From 3d3776f6d19cefd2409c0a739a0dc5dc13c209d1 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Sun, 23 Aug 2026 02:25:30 +0200
Subject: [PATCH 001/267] Document the renderer-independent UI foundation

---
 Documentation/toc.yml          |  2 +
 Documentation/ui-foundation.md | 97 ++++++++++++++++++++++++++++++++++
 2 files changed, 99 insertions(+)
 create mode 100644 Documentation/ui-foundation.md

diff --git a/Documentation/toc.yml b/Documentation/toc.yml
index ec093714..91f1190f 100644
--- a/Documentation/toc.yml
+++ b/Documentation/toc.yml
@@ -2,6 +2,8 @@
   href: index.mdx
 - name: Why Components
   href: why-components.md
+- name: UI foundation
+  href: ui-foundation.md
 - name: PrimeReact and Components
   href: coming-from-primereact.md
 - name: Getting started
diff --git a/Documentation/ui-foundation.md b/Documentation/ui-foundation.md
new file mode 100644
index 00000000..d5cee961
--- /dev/null
+++ b/Documentation/ui-foundation.md
@@ -0,0 +1,97 @@
+---
+title: UI foundation
+description: Why Components owns its public design system and uses React Aria for accessible behavior.
+sidebar:
+  order: 2
+---
+
+Components exists to give a Cratis application a stable, productive UI API—not to expose whichever rendering library happens to implement it. The default package therefore owns its markup, styling contract, and TypeScript types. It uses React Aria internally for accessible interaction behavior and uses TanStack Table only when a table needs advanced state that Arc paging and React Aria do not already provide.
+
+This is an accepted direction for the next major release. Components 3 remains PrimeReact-backed so compatible fixes can ship without hiding a renderer migration inside a minor release.
+
+## Decision
+
+The next major release follows these boundaries:
+
+```mermaid
+graph TD
+    App[Consumer application] --> Components[@cratis/components]
+    Components --> Contracts[Cratis-owned APIs, parts, tokens, and state attributes]
+    Components --> Aria[React Aria interaction behavior]
+    Components --> Table[TanStack Table where advanced table state is needed]
+    Components --> Arc[@cratis/arc.react bindings]
+    Legacy[@cratis/components.primereact compatibility package] --> Prime[PrimeReact / PrimeUI]
+```
+
+Consumers continue importing `@cratis/components/*`. React Aria and TanStack are implementation dependencies and do not appear in public prop types.
+
+Arc command, query, and dialog bindings remain owned by `@cratis/arc.react`. Components builds visual behavior around those bindings rather than re-exporting them through a package with optional rendering peers.
+
+## Consumer contract
+
+The public contract must make both the default Cratis look and a deeply customized product design straightforward:
+
+- Cratis-owned CSS variables for semantic colors, spacing, typography, motion, elevation, and control dimensions.
+- Stable Cratis part names for every meaningful component element.
+- State data attributes such as open, selected, disabled, invalid, pending, and orientation.
+- `className`, `style`, and per-part configuration without renderer-specific types.
+- No required theme preset or proprietary provider.
+- Light, dark, forced-colors, reduced-motion, responsive, and right-to-left behavior.
+- Public component behavior that remains stable when the internal foundation changes.
+
+A product may map its own tokens directly onto the Cratis variables or style the stable parts itself. It must not need selectors tied to React Aria's DOM or an internal package's class names.
+
+## Why React Aria
+
+[React Aria Components](https://react-aria.adobe.com/getting-started) is style-free and Apache-2.0 licensed. It supplies the interaction behavior that is difficult to implement and maintain correctly: keyboard navigation, focus management, screen-reader semantics, collection behavior, overlays, internationalized dates, and cross-device input.
+
+Its official component set covers the high-risk primitives Components needs, including Dialog, Select, ComboBox, Table, DatePicker, NumberField, Slider, ColorPicker, Tooltip, and form controls. Its table supports selection, sorting, hierarchical rows, column resizing, drag-and-drop, infinite loading, and virtualization. Its date stack supports locale-specific formats, time zones, right-to-left layouts, and multiple calendar systems.
+
+React Aria does not remove application responsibility. Components still owns labels, error associations, focus appearance, contrast, hit targets, responsive layout, and behavior specs.
+
+The React Aria Components Toast API is still exported as unstable. Components keeps its own toast dispatch and presentation contract and may use the lower-level React Aria/Stately toast packages or its own accessible region until the component API is stable.
+
+## Why TanStack Table is selective
+
+[TanStack Table](https://tanstack.com/table/latest/docs/overview) is an MIT-licensed headless table engine. It provides advanced filtering, sorting, grouping, sizing, visibility, pinning, selection, and manual server-side state without prescribing markup.
+
+Query-backed Cratis tables already receive paging from Arc, and React Aria supplies accessible table semantics. TanStack is added only where it removes real state-management complexity. Server filtering, sorting, and paging remain one coherent operation: the server filters before paging and returns the filtered total.
+
+## Why PrimeReact is not the default
+
+PrimeReact 11 has a capable layered architecture, and its headless hooks are explicitly intended for custom component libraries. The constraint is the consumer contract around that architecture.
+
+The [PrimeUI Community License](https://primeui.dev/licenses/community) states that developers building on an internal wrapper or design system still need seats. Eligibility excludes many organizations by revenue, team size, funding, or public-sector status. The [OEM guidance](https://primeui.dev/licenses/oem) also identifies frameworks and SDKs used for third-party development as potential OEM uses, while not clarifying peer-only open-source wrappers.
+
+A PrimeReact-backed compatibility package is therefore explicit rather than invisible. It requires the Prime peers, documents that PrimeUI licensing still applies, and is not published until PrimeTek confirms the applicable OEM and redistribution terms in writing.
+
+## Why Components does not implement every primitive itself
+
+Owning the public API does not mean reimplementing accessibility infrastructure. Dialog focus traps, composite keyboard navigation, international calendars, collection selection, and screen-reader behavior carry high maintenance and regression risk.
+
+Components owns product-facing composition, Arc integration, styling, and semantics. It delegates low-level interaction behavior to an open, specialized foundation and verifies the result with browser and accessibility tests.
+
+## Release sequence
+
+The transition is deliberately split:
+
+1. A Components 3 minor release delivers source-compatible accessibility, localization, filtering, notification, and paging fixes. PrimeReact and PrimeUI licensing remain unchanged and explicit.
+2. The next major release changes the default foundation, removes Prime runtime and declaration references, and introduces the Cratis-owned styling and provider contracts.
+3. A PrimeReact compatibility package may preserve the existing implementation for consumers that need a staged migration, subject to licensing confirmation.
+
+The stabilization specs are the parity contract for the major release. The new implementation is not complete until it preserves the observable behavior those specs protect.
+
+## Validation gates
+
+The major release does not ship until:
+
+- The default package contains no Prime runtime imports or Prime references in emitted declarations.
+- npm, pnpm, and Yarn PnP packed-consumer fixtures pass.
+- Supported Arc versions compile and load with the packed artifact.
+- Representative consumers compile and exercise their critical screens.
+- Keyboard, focus, browser accessibility, Storybook, SSR, responsive, dark-mode, forced-colors, and reduced-motion scenarios pass.
+- Custom token systems and per-part styling work without internal DOM selectors.
+- Bundle size and rendering performance are measured against the stabilization release.
+- The migration guide has been followed successfully without repository-specific knowledge.
+
+Track implementation and acceptance evidence in [the UI foundation issue](https://github.com/Cratis/Components/issues/170).

From ab6c08db65746eb590f820ab72d60cd7ada7b5f0 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Sun, 23 Aug 2026 02:29:14 +0200
Subject: [PATCH 002/267] Add the open UI foundation dependencies

---
 Source/package.json | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/Source/package.json b/Source/package.json
index 479792d6..c677c62a 100644
--- a/Source/package.json
+++ b/Source/package.json
@@ -139,9 +139,11 @@
         "build-storybook": "npx storybook build"
     },
     "dependencies": {
+        "@internationalized/date": "3.12.3",
         "allotment": "1.20.5",
         "framer-motion": "13.1.1",
         "pixi.js": "^8.20.0",
+        "react-aria-components": "1.20.0",
         "react-icons": "5.7.0",
         "ts-deepmerge": "8.0.0"
     },

From 06de8dfe5ecdbe7c848d4da7a57ae08eee43dd7d Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Sun, 23 Aug 2026 02:29:14 +0200
Subject: [PATCH 003/267] Own display component markup and styling

---
 Source/Display/Avatar.tsx          |  30 ++++---
 Source/Display/Badge.tsx           |  24 +++---
 Source/Display/Chip.tsx            |  30 +++----
 Source/Display/Display.css         | 130 +++++++++++++++++++++++++++++
 Source/Display/Message.tsx         |  61 ++++++--------
 Source/Display/ProgressBar.tsx     |  45 ++++++----
 Source/Display/ProgressSpinner.tsx |  28 ++++---
 Source/Display/Skeleton.tsx        |  25 +++---
 Source/Display/Tag.tsx             |  30 +++----
 Source/styles.css                  |   1 +
 10 files changed, 273 insertions(+), 131 deletions(-)
 create mode 100644 Source/Display/Display.css

diff --git a/Source/Display/Avatar.tsx b/Source/Display/Avatar.tsx
index 624a75f2..b0d30157 100644
--- a/Source/Display/Avatar.tsx
+++ b/Source/Display/Avatar.tsx
@@ -1,8 +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 React from 'react';
-import { Avatar as PrimeAvatar } from 'primereact/avatar';
+import type { ReactNode } from 'react';
 
 /** Props for {@link Avatar}. */
 export interface AvatarProps {
@@ -11,7 +10,7 @@ export interface AvatarProps {
     /** Text fallback (e.g. initials) shown when no image is available. */
     label?: string;
     /** Icon fallback shown when no image/label is available. */
-    icon?: React.ReactNode;
+    icon?: ReactNode;
     /** Alt text for the image. */
     alt?: string;
     /** Avatar size. */
@@ -20,14 +19,19 @@ export interface AvatarProps {
     className?: string;
 }
 
-/**
- * A user/entity avatar built on PrimeReact 11's compositional `Avatar`. Shows
- * an image when available and falls back to initials or an icon otherwise.
- */
-export const Avatar = ({ image, label, icon, alt, size, className }: AvatarProps) => (
-    <PrimeAvatar.Root size={size} className={className}>
-        {image
-            ? <PrimeAvatar.Image src={image} alt={alt} />
-            : <PrimeAvatar.Fallback>{icon ?? label}</PrimeAvatar.Fallback>}
-    </PrimeAvatar.Root>
+/** A user or entity avatar with an image and text/icon fallback. */
+export const Avatar = ({ image, label, icon, alt = '', size = 'normal', className }: AvatarProps) => (
+    <span
+        className={['cratis-avatar', className].filter(Boolean).join(' ')}
+        data-cratis-part='root'
+        data-size={size}
+    >
+        {image ? (
+            <img className='cratis-avatar__image' data-cratis-part='image' src={image} alt={alt} />
+        ) : (
+            <span className='cratis-avatar__fallback' data-cratis-part='fallback' aria-hidden={!label}>
+                {icon ?? label}
+            </span>
+        )}
+    </span>
 );
diff --git a/Source/Display/Badge.tsx b/Source/Display/Badge.tsx
index 3d4d1063..da97472e 100644
--- a/Source/Display/Badge.tsx
+++ b/Source/Display/Badge.tsx
@@ -1,8 +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 React from 'react';
-import { Badge as PrimeBadge } from 'primereact/badge';
+import type { ReactNode } from 'react';
 
 /** Severity tone of a {@link Badge}. */
 export type BadgeSeverity = 'secondary' | 'info' | 'success' | 'warn' | 'danger' | 'contrast';
@@ -10,7 +9,7 @@ export type BadgeSeverity = 'secondary' | 'info' | 'success' | 'warn' | 'danger'
 /** Props for {@link Badge}. */
 export interface BadgeProps {
     /** The value shown inside the badge (e.g. a count). */
-    value?: React.ReactNode;
+    value?: ReactNode;
     /** Severity tone (drives the color). */
     severity?: BadgeSeverity;
     /** Badge size. */
@@ -20,15 +19,18 @@ export interface BadgeProps {
     /** Extra class name. */
     className?: string;
     /** Badge content (alternative to {@link value}). */
-    children?: React.ReactNode;
+    children?: ReactNode;
 }
 
-/**
- * A compact count/status badge built on PrimeReact 11's `Badge`. Use for
- * unread counts, notification indicators, and small numeric overlays.
- */
-export const Badge = ({ value, severity, size, shape, className, children }: BadgeProps) => (
-    <PrimeBadge severity={severity} size={size} shape={shape} className={className} data-severity={severity}>
+/** A compact count or status badge. */
+export const Badge = ({ value, severity = 'secondary', size = 'small', shape, className, children }: BadgeProps) => (
+    <span
+        className={['cratis-badge', className].filter(Boolean).join(' ')}
+        data-cratis-part='root'
+        data-severity={severity}
+        data-size={size}
+        data-shape={shape}
+    >
         {value ?? children}
-    </PrimeBadge>
+    </span>
 );
diff --git a/Source/Display/Chip.tsx b/Source/Display/Chip.tsx
index 4c56885d..5253b205 100644
--- a/Source/Display/Chip.tsx
+++ b/Source/Display/Chip.tsx
@@ -1,15 +1,14 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import React from 'react';
-import { Chip as PrimeChip } from 'primereact/chip';
+import type { ReactNode } from 'react';
 
 /** Props for {@link Chip}. */
 export interface ChipProps {
     /** The chip label. */
     label?: string;
     /** An icon rendered before the label. */
-    icon?: React.ReactNode;
+    icon?: ReactNode;
     /** When true, shows a remove control. */
     removable?: boolean;
     /** Invoked when the remove control is activated. */
@@ -20,18 +19,21 @@ export interface ChipProps {
     className?: string;
 }
 
-/**
- * A labeled, optionally-removable chip built on PrimeReact 11's compositional
- * `Chip`. Use for filter pills, selected tokens, and tag-like affordances.
- */
+/** A labeled, optionally removable chip. */
 export const Chip = ({ label, icon, removable, onRemove, removeAriaLabel = 'Remove', className }: ChipProps) => (
-    <PrimeChip.Root className={className}>
-        {icon && <PrimeChip.Start>{icon}</PrimeChip.Start>}
-        <PrimeChip.Label>{label}</PrimeChip.Label>
+    <span className={['cratis-chip', className].filter(Boolean).join(' ')} data-cratis-part='root'>
+        {icon && <span className='cratis-chip__icon' data-cratis-part='icon'>{icon}</span>}
+        <span className='cratis-chip__label' data-cratis-part='label'>{label}</span>
         {removable && (
-            <PrimeChip.Remove onClick={onRemove} role="button" aria-label={removeAriaLabel}>
-                <i className="pi pi-times" />
-            </PrimeChip.Remove>
+            <button
+                type='button'
+                className='cratis-chip__remove'
+                data-cratis-part='remove'
+                onClick={onRemove}
+                aria-label={removeAriaLabel}
+            >
+                <span aria-hidden='true'>×</span>
+            </button>
         )}
-    </PrimeChip.Root>
+    </span>
 );
diff --git a/Source/Display/Display.css b/Source/Display/Display.css
new file mode 100644
index 00000000..19b7b407
--- /dev/null
+++ b/Source/Display/Display.css
@@ -0,0 +1,130 @@
+/* Copyright (c) Cratis. All rights reserved. */
+/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */
+
+.cratis-avatar {
+    display: inline-flex;
+    width: 2rem;
+    height: 2rem;
+    overflow: hidden;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    border-radius: 50%;
+    background: var(--cratis-surface-100);
+    color: var(--cratis-text-color);
+}
+.cratis-avatar[data-size='large'] { width: 3rem; height: 3rem; }
+.cratis-avatar[data-size='xlarge'] { width: 4rem; height: 4rem; }
+.cratis-avatar__image { width: 100%; height: 100%; object-fit: cover; }
+.cratis-avatar__fallback { display: inline-flex; align-items: center; justify-content: center; font-weight: 600; }
+
+.cratis-badge,
+.cratis-tag,
+.cratis-chip {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.35rem;
+    border-radius: var(--cratis-border-radius);
+    background: var(--cratis-surface-100);
+    color: var(--cratis-text-color);
+    line-height: 1;
+}
+.cratis-badge { min-width: 1.25rem; min-height: 1.25rem; padding: 0.2rem 0.35rem; font-size: 0.75rem; font-weight: 700; }
+.cratis-badge[data-size='large'] { min-width: 1.75rem; min-height: 1.75rem; font-size: 0.875rem; }
+.cratis-badge[data-size='xlarge'] { min-width: 2.25rem; min-height: 2.25rem; font-size: 1rem; }
+.cratis-badge[data-shape='circle'] { padding: 0; border-radius: 50%; }
+.cratis-tag { padding: 0.35rem 0.55rem; font-size: 0.75rem; font-weight: 600; }
+.cratis-tag[data-rounded='true'] { border-radius: 999px; }
+.cratis-chip { padding: 0.35rem 0.5rem; font-size: 0.875rem; }
+
+.cratis-badge[data-severity='info'], .cratis-tag[data-severity='info'] { background: color-mix(in srgb, var(--cratis-primary-color) 16%, transparent); color: var(--cratis-primary-color); }
+.cratis-badge[data-severity='success'], .cratis-tag[data-severity='success'] { background: color-mix(in srgb, var(--cratis-green-500) 16%, transparent); color: var(--cratis-green-500); }
+.cratis-badge[data-severity='warn'], .cratis-tag[data-severity='warn'] { background: color-mix(in srgb, var(--cratis-orange-500) 18%, transparent); color: var(--cratis-orange-500); }
+.cratis-badge[data-severity='danger'], .cratis-tag[data-severity='danger'] { background: color-mix(in srgb, var(--cratis-red-500) 16%, transparent); color: var(--cratis-red-500); }
+.cratis-badge[data-severity='contrast'], .cratis-tag[data-severity='contrast'] { background: var(--cratis-text-color); color: var(--cratis-surface-0); }
+
+.cratis-chip__remove {
+    display: inline-flex;
+    width: 1.25rem;
+    height: 1.25rem;
+    padding: 0;
+    align-items: center;
+    justify-content: center;
+    border: 0;
+    border-radius: 50%;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+}
+.cratis-chip__remove:hover { background: var(--cratis-surface-hover); }
+.cratis-chip__remove:focus-visible { outline: none; box-shadow: var(--cratis-focus-ring); }
+
+.cratis-message {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.6rem;
+    padding: 0.75rem 0.9rem;
+    border: 1px solid var(--cratis-surface-border);
+    border-radius: var(--cratis-border-radius);
+    background: var(--cratis-surface-section);
+    color: var(--cratis-text-color);
+}
+.cratis-message[data-severity='info'] { border-color: var(--cratis-primary-color); }
+.cratis-message[data-severity='success'] { border-color: var(--cratis-green-500); }
+.cratis-message[data-severity='warn'] { border-color: var(--cratis-orange-500); }
+.cratis-message[data-severity='error'] { border-color: var(--cratis-red-500); }
+.cratis-message__icon { flex: 0 0 auto; }
+.cratis-message__text { min-width: 0; }
+
+.cratis-progress-bar {
+    position: relative;
+    height: 1rem;
+    overflow: hidden;
+    border-radius: 999px;
+    background: var(--cratis-surface-100);
+}
+.cratis-progress-bar__indicator {
+    display: flex;
+    height: 100%;
+    min-width: 0;
+    align-items: center;
+    justify-content: center;
+    background: var(--cratis-primary-color);
+    color: var(--cratis-primary-color-text);
+    transition: width 160ms ease;
+}
+.cratis-progress-bar[data-mode='indeterminate'] .cratis-progress-bar__indicator {
+    width: 40%;
+    animation: cratis-progress-indeterminate 1.2s ease-in-out infinite;
+}
+.cratis-progress-bar__label { padding-inline: 0.35rem; font-size: 0.7rem; }
+
+.cratis-progress-spinner { display: inline-flex; width: 2rem; height: 2rem; }
+.cratis-progress-spinner__svg { width: 100%; height: 100%; animation: cratis-spinner-rotate 1s linear infinite; }
+.cratis-progress-spinner__track,
+.cratis-progress-spinner__range { fill: none; stroke-width: 4; }
+.cratis-progress-spinner__track { stroke: var(--cratis-surface-100); }
+.cratis-progress-spinner__range { stroke: var(--cratis-primary-color); stroke-linecap: round; stroke-dasharray: 90 150; }
+
+.cratis-skeleton {
+    display: block;
+    background: linear-gradient(90deg, var(--cratis-surface-100), var(--cratis-surface-hover), var(--cratis-surface-100));
+    background-size: 200% 100%;
+    animation: cratis-skeleton-pulse 1.4s ease-in-out infinite;
+}
+
+@keyframes cratis-progress-indeterminate { from { transform: translateX(-120%); } to { transform: translateX(350%); } }
+@keyframes cratis-spinner-rotate { to { transform: rotate(360deg); } }
+@keyframes cratis-skeleton-pulse { from { background-position: 200% 0; } to { background-position: -200% 0; } }
+
+@media (prefers-reduced-motion: reduce) {
+    .cratis-progress-bar__indicator,
+    .cratis-progress-spinner__svg,
+    .cratis-skeleton { animation: none; transition: none; }
+}
+
+@media (forced-colors: active) {
+    .cratis-message, .cratis-chip, .cratis-tag, .cratis-badge { border: 1px solid CanvasText; }
+    .cratis-progress-bar__indicator, .cratis-progress-spinner__range { background: Highlight; stroke: Highlight; }
+}
diff --git a/Source/Display/Message.tsx b/Source/Display/Message.tsx
index 4359a2f6..3242cc44 100644
--- a/Source/Display/Message.tsx
+++ b/Source/Display/Message.tsx
@@ -1,8 +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 React from 'react';
-import { Message as PrimeMessage } from 'primereact/message';
+import type { ReactNode } from 'react';
 
 /** Severity tone of a {@link Message}. */
 export type MessageSeverity = 'info' | 'success' | 'warn' | 'error' | 'secondary' | 'contrast';
@@ -12,45 +11,37 @@ export interface MessageProps {
     /** Severity tone (drives the color). */
     severity?: MessageSeverity;
     /** The message text. */
-    text?: React.ReactNode;
+    text?: ReactNode;
     /** Message content (alternative to {@link text}). */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /** Extra class name applied to the message root. */
     className?: string;
-    /**
-     * The icon shown ahead of the text. Defaults to the glyph PrimeReact 10 showed for the
-     * severity; pass `false` for no icon, or a node of your own.
-     */
-    icon?: React.ReactNode | false;
+    /** The icon shown ahead of the text. Pass `false` for no icon. */
+    icon?: ReactNode | false;
 }
 
-/**
- * The severity glyphs of PrimeReact 10's `Message`, which composed its own icon; v11's
- * `Message.Icon` part renders whatever it is given and nothing on its own.
- */
-const severityIcons: Record<MessageSeverity, string> = {
-    info: 'pi pi-info-circle',
-    success: 'pi pi-check',
-    warn: 'pi pi-exclamation-triangle',
-    error: 'pi pi-times-circle',
-    secondary: 'pi pi-info-circle',
-    contrast: 'pi pi-info-circle',
+const severitySymbols: Record<MessageSeverity, string> = {
+    info: 'ⓘ',
+    success: '✓',
+    warn: '⚠',
+    error: '⨯',
+    secondary: 'ⓘ',
+    contrast: 'ⓘ',
 };
 
-/**
- * A declarative inline message built on PrimeReact 11's compositional `Message` parts.
- *
- * PrimeReact 10's `<Message severity text />` became `Message.Root` + `Message.Content` +
- * `Message.Text` in 11; this preserves the flat call shape so an inline notice stays a
- * single element at the call site.
- */
+/** A declarative inline status message. */
 export const Message = ({ severity = 'info', text, children, className, icon }: MessageProps) => (
-    <PrimeMessage.Root severity={severity} className={className}>
-        <PrimeMessage.Content>
-            {icon !== false && (
-                <PrimeMessage.Icon>{icon ?? <i className={severityIcons[severity]} />}</PrimeMessage.Icon>
-            )}
-            <PrimeMessage.Text>{children ?? text}</PrimeMessage.Text>
-        </PrimeMessage.Content>
-    </PrimeMessage.Root>
+    <div
+        className={['cratis-message', className].filter(Boolean).join(' ')}
+        data-cratis-part='root'
+        data-severity={severity}
+        role={severity === 'error' ? 'alert' : 'status'}
+    >
+        {icon !== false && (
+            <span className='cratis-message__icon' data-cratis-part='icon' aria-hidden='true'>
+                {icon ?? severitySymbols[severity]}
+            </span>
+        )}
+        <span className='cratis-message__text' data-cratis-part='text'>{children ?? text}</span>
+    </div>
 );
diff --git a/Source/Display/ProgressBar.tsx b/Source/Display/ProgressBar.tsx
index 3ac8cbd4..fd825cfd 100644
--- a/Source/Display/ProgressBar.tsx
+++ b/Source/Display/ProgressBar.tsx
@@ -1,8 +1,6 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { ProgressBar as PrimeProgressBar } from 'primereact/progressbar';
-
 /** Props for {@link ProgressBar}. */
 export interface ProgressBarProps {
     /** Completion value, 0–100. Ignored in `indeterminate` mode. */
@@ -15,17 +13,32 @@ export interface ProgressBarProps {
     className?: string;
 }
 
-/**
- * A horizontal progress indicator built on PrimeReact 11's compositional
- * `ProgressBar`. Use `indeterminate` for unknown-duration work and
- * `determinate` with a `value` for measurable progress (e.g. an upload).
- */
-export const ProgressBar = ({ value, mode = 'determinate', showValue = true, className }: ProgressBarProps) => (
-    <PrimeProgressBar.Root value={value} mode={mode} className={className}>
-        <PrimeProgressBar.Indicator>
-            {showValue && mode === 'determinate' && (
-                <PrimeProgressBar.Label>{value ?? 0}%</PrimeProgressBar.Label>
-            )}
-        </PrimeProgressBar.Indicator>
-    </PrimeProgressBar.Root>
-);
+/** A horizontal determinate or indeterminate progress indicator. */
+export const ProgressBar = ({ value = 0, mode = 'determinate', showValue = true, className }: ProgressBarProps) => {
+    const boundedValue = Math.min(100, Math.max(0, value));
+    const ariaValue = mode === 'determinate' ? boundedValue : undefined;
+
+    return (
+        <div
+            className={['cratis-progress-bar', className].filter(Boolean).join(' ')}
+            data-cratis-part='root'
+            data-mode={mode}
+            role='progressbar'
+            aria-valuemin={mode === 'determinate' ? 0 : undefined}
+            aria-valuemax={mode === 'determinate' ? 100 : undefined}
+            aria-valuenow={ariaValue}
+        >
+            <span
+                className='cratis-progress-bar__indicator'
+                data-cratis-part='indicator'
+                style={mode === 'determinate' ? { width: `${boundedValue}%` } : undefined}
+            >
+                {showValue && mode === 'determinate' && (
+                    <span className='cratis-progress-bar__label' data-cratis-part='label'>
+                        {boundedValue}%
+                    </span>
+                )}
+            </span>
+        </div>
+    );
+};
diff --git a/Source/Display/ProgressSpinner.tsx b/Source/Display/ProgressSpinner.tsx
index 011c28dc..da4b92e7 100644
--- a/Source/Display/ProgressSpinner.tsx
+++ b/Source/Display/ProgressSpinner.tsx
@@ -1,28 +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 React from 'react';
-import { ProgressSpinner as PrimeProgressSpinner } from 'primereact/progressspinner';
+import type { CSSProperties } from 'react';
 
 /** Props for {@link ProgressSpinner}. */
 export interface ProgressSpinnerProps {
     /** Applied to the spinner root — use it to size the spinner. */
-    style?: React.CSSProperties;
+    style?: CSSProperties;
     /** Extra class name applied to the spinner root. */
     className?: string;
     /** Announced to assistive technology while the spinner is visible. */
     'aria-label'?: string;
 }
 
-/**
- * An indeterminate spinner built on PrimeReact 11's compositional `ProgressSpinner` parts.
- *
- * PrimeReact 10's single `<ProgressSpinner />` became `ProgressSpinner.Root` + `Track` +
- * `Range` in 11; this preserves the flat call shape for the common loading indicator.
- */
+/** An indeterminate loading spinner. */
 export const ProgressSpinner = ({ style, className, 'aria-label': ariaLabel = 'Loading' }: ProgressSpinnerProps) => (
-    <PrimeProgressSpinner.Root style={style} className={className} aria-label={ariaLabel}>
-        <PrimeProgressSpinner.Track />
-        <PrimeProgressSpinner.Range />
-    </PrimeProgressSpinner.Root>
+    <span
+        className={['cratis-progress-spinner', className].filter(Boolean).join(' ')}
+        data-cratis-part='root'
+        style={style}
+        role='status'
+        aria-label={ariaLabel}
+    >
+        <svg className='cratis-progress-spinner__svg' data-cratis-part='svg' viewBox='0 0 50 50' aria-hidden='true'>
+            <circle className='cratis-progress-spinner__track' data-cratis-part='track' cx='25' cy='25' r='20' />
+            <circle className='cratis-progress-spinner__range' data-cratis-part='range' cx='25' cy='25' r='20' />
+        </svg>
+    </span>
 );
diff --git a/Source/Display/Skeleton.tsx b/Source/Display/Skeleton.tsx
index bffd0c13..48e98593 100644
--- a/Source/Display/Skeleton.tsx
+++ b/Source/Display/Skeleton.tsx
@@ -1,8 +1,6 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { Skeleton as PrimeSkeleton } from 'primereact/skeleton';
-
 /** Props for {@link Skeleton}. */
 export interface SkeletonProps {
     /** Width, any CSS length. Defaults to `'100%'`. */
@@ -17,18 +15,17 @@ export interface SkeletonProps {
     className?: string;
 }
 
-/**
- * A loading placeholder built on PrimeReact 11's `Skeleton`. Use to reserve
- * layout while a query is loading (e.g. `result.isPerforming`) instead of a
- * blank flash or a spinner.
- */
+/** A loading placeholder that reserves content layout. */
 export const Skeleton = ({ width = '100%', height = '1rem', borderRadius, circle, className }: SkeletonProps) => (
-    <PrimeSkeleton
-        // A circle is square: it takes its width from `height`, which always has a value
-        // (it defaults to '1rem'), so there is no fallback to reach for here.
-        width={circle ? height : width}
-        height={height}
-        borderRadius={circle ? '50%' : borderRadius}
-        className={className}
+    <span
+        className={['cratis-skeleton', className].filter(Boolean).join(' ')}
+        data-cratis-part='root'
+        data-circle={circle || undefined}
+        aria-hidden='true'
+        style={{
+            width: circle ? height : width,
+            height,
+            borderRadius: circle ? '50%' : borderRadius,
+        }}
     />
 );
diff --git a/Source/Display/Tag.tsx b/Source/Display/Tag.tsx
index 115d9e2d..487f7abd 100644
--- a/Source/Display/Tag.tsx
+++ b/Source/Display/Tag.tsx
@@ -1,8 +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 React from 'react';
-import { Tag as PrimeTag } from 'primereact/tag';
+import type { ReactNode } from 'react';
 
 /** Severity tone of a {@link Tag}. */
 export type TagSeverity = 'secondary' | 'success' | 'info' | 'warn' | 'danger' | 'contrast';
@@ -10,27 +9,28 @@ export type TagSeverity = 'secondary' | 'success' | 'info' | 'warn' | 'danger' |
 /** Props for {@link Tag}. */
 export interface TagProps {
     /** The label shown inside the tag. */
-    value?: React.ReactNode;
+    value?: ReactNode;
     /** Severity tone (drives the color). */
     severity?: TagSeverity;
     /** When true, fully rounds the tag. */
     rounded?: boolean;
     /** An icon rendered before the label. */
-    icon?: React.ReactNode;
+    icon?: ReactNode;
     /** Extra class name. */
     className?: string;
     /** Tag content (alternative to {@link value}). */
-    children?: React.ReactNode;
+    children?: ReactNode;
 }
 
-/**
- * A small colored status label built on PrimeReact 11's `Tag`. Use for inline
- * status indicators in tables, lists, and detail views — e.g. an order state
- * or a read-model flag.
- */
-export const Tag = ({ value, severity, rounded, icon, className, children }: TagProps) => (
-    <PrimeTag severity={severity} rounded={rounded} className={className} data-severity={severity}>
-        {icon}
-        {value ?? children}
-    </PrimeTag>
+/** A small colored status label. */
+export const Tag = ({ value, severity = 'secondary', rounded, icon, className, children }: TagProps) => (
+    <span
+        className={['cratis-tag', className].filter(Boolean).join(' ')}
+        data-cratis-part='root'
+        data-severity={severity}
+        data-rounded={rounded || undefined}
+    >
+        {icon && <span className='cratis-tag__icon' data-cratis-part='icon'>{icon}</span>}
+        <span className='cratis-tag__label' data-cratis-part='label'>{value ?? children}</span>
+    </span>
 );
diff --git a/Source/styles.css b/Source/styles.css
index 7963f706..9ce004fe 100644
--- a/Source/styles.css
+++ b/Source/styles.css
@@ -36,6 +36,7 @@
 @import './DataTables/ColumnFilterMenu.css';
 @import './DataTables/DataTableCore.css';
 @import './DataTables/TablePaginator.css';
+@import './Display/Display.css';
 @import './Filter/FilterPanel.css';
 @import './Notifications/Toaster.css';
 @import './ObjectNavigationalBar/ObjectNavigationalBar.css';

From 77122870cbfefe4f5f725ba1505b92db78b9d702 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Sun, 23 Aug 2026 02:32:12 +0200
Subject: [PATCH 004/267] Own button and tooltip primitives

---
 Source/Common/ActionMenubar.tsx |  59 +++++++--------
 Source/Common/Button.css        |  64 +++++++++++++++++
 Source/Common/Button.tsx        | 123 +++++++++++++++++++-------------
 Source/Common/Tooltip.tsx       |  84 ++++++++--------------
 Source/DataPage/DataPage.tsx    |  12 ++--
 Source/styles.css               |   1 +
 6 files changed, 201 insertions(+), 142 deletions(-)
 create mode 100644 Source/Common/Button.css

diff --git a/Source/Common/ActionMenubar.tsx b/Source/Common/ActionMenubar.tsx
index 716be85f..cdcc25fa 100644
--- a/Source/Common/ActionMenubar.tsx
+++ b/Source/Common/ActionMenubar.tsx
@@ -1,75 +1,66 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import React from 'react';
-import { Button } from 'primereact/button';
-import type { ButtonProps } from '@primereact/types/primitive/button';
+import { Fragment, type ReactNode } from 'react';
+import { Button, type ButtonParts, type ButtonSeverity } from './Button';
 
 /** A single action in an {@link ActionMenubar}. */
 export interface ActionMenuItem {
     /** The visible label. */
     label?: string;
     /** An icon element rendered before the label. */
-    icon?: React.ReactNode;
+    icon?: ReactNode;
     /** Invoked when the item is activated. */
     command?: () => void;
     /** When true, the item is greyed out and not clickable. */
     disabled?: boolean;
     /** Extra class name for the item. */
     className?: string;
-    /** Severity styling for the underlying button (e.g. `danger`). */
-    severity?: 'secondary' | 'info' | 'success' | 'warn' | 'help' | 'danger' | 'contrast';
-    /** Fully custom render for this item; when present it replaces the default button. */
-    template?: (item: ActionMenuItem) => React.ReactNode;
+    /** Severity styling for the action. */
+    severity?: ButtonSeverity;
+    /** Fully custom render for this item. */
+    template?: (item: ActionMenuItem) => ReactNode;
 }
 
 /** Props for {@link ActionMenubar}. */
 export interface ActionMenubarProps {
-    /** The actions to render, left to right. */
+    /** Actions to render from left to right. */
     model: ActionMenuItem[];
     /** Extra class name for the toolbar container. */
     className?: string;
     /** Accessible label for the toolbar. */
     'aria-label'?: string;
-    /** PrimeReact pass-through configuration applied to each action button. */
-    pt?: ButtonProps['pt'];
-    /** PrimeReact pass-through options applied to each action button. */
-    ptOptions?: ButtonProps['ptOptions'];
-    /** When true, disables every base PrimeReact style on the action buttons. */
+    /** Cratis-owned per-part attributes applied to each action button. */
+    pt?: ButtonParts;
+    /** Retained for source compatibility; Cratis parts always merge. */
+    ptOptions?: object;
+    /** Retained for source compatibility; Components always uses consumer-owned CSS. */
     unstyled?: boolean;
 }
 
-/**
- * A horizontal bar of command actions. Replaces the PrimeReact 10 `Menubar`
- * (removed in PrimeReact 11, and never a great fit for a bar of *actions*
- * rather than navigation) with a simple button toolbar driven by the same
- * `model` array shape. Each item is a text `Button` unless it supplies a
- * `template`.
- */
-export const ActionMenubar = ({ model, className, pt, ptOptions, unstyled, ...rest }: ActionMenubarProps) => (
+/** A horizontal, accessible toolbar of command actions. */
+export const ActionMenubar = ({ model, className, pt, ...rest }: ActionMenubarProps) => (
     <div
-        role="toolbar"
-        className={className ? `cratis-action-menubar ${className}` : 'cratis-action-menubar'}
-        {...rest}>
+        role='toolbar'
+        className={['cratis-action-menubar', className].filter(Boolean).join(' ')}
+        data-cratis-part='root'
+        {...rest}
+    >
         {model.map((item, index) => {
-            if (item.template) {
-                return <React.Fragment key={index}>{item.template(item)}</React.Fragment>;
-            }
+            if (item.template) return <Fragment key={index}>{item.template(item)}</Fragment>;
 
             return (
                 <Button
                     key={index}
-                    variant="text"
+                    text
                     severity={item.severity}
                     onClick={item.command}
                     disabled={item.disabled}
                     className={item.className}
+                    icon={item.icon}
+                    label={item.label}
                     pt={pt}
-                    ptOptions={ptOptions}
-                    unstyled={unstyled}>
-                    {item.icon}
-                    {item.label && <span>{item.label}</span>}
-                </Button>
+                />
             );
         })}
     </div>
diff --git a/Source/Common/Button.css b/Source/Common/Button.css
new file mode 100644
index 00000000..0614bdfd
--- /dev/null
+++ b/Source/Common/Button.css
@@ -0,0 +1,64 @@
+/* Copyright (c) Cratis. All rights reserved. */
+/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */
+
+.cratis-button {
+    display: inline-flex;
+    min-height: 2.25rem;
+    padding: 0.5rem 0.85rem;
+    align-items: center;
+    justify-content: center;
+    gap: 0.45rem;
+    border: 1px solid transparent;
+    border-radius: var(--cratis-border-radius);
+    background: var(--cratis-primary-color);
+    color: var(--cratis-primary-color-text);
+    font: inherit;
+    font-weight: 600;
+    line-height: 1;
+    cursor: pointer;
+    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, opacity 140ms ease;
+}
+.cratis-button:hover:not(:disabled) { filter: brightness(0.94); }
+.cratis-button:focus-visible { outline: none; box-shadow: var(--cratis-focus-ring); }
+.cratis-button:disabled { cursor: not-allowed; opacity: 0.55; }
+.cratis-button[data-size='small'] { min-height: 1.9rem; padding: 0.35rem 0.6rem; font-size: 0.8rem; }
+.cratis-button[data-size='large'] { min-height: 2.75rem; padding: 0.7rem 1rem; font-size: 1rem; }
+.cratis-button[data-rounded='true'], .cratis-button[data-icon-only='true'] { border-radius: 999px; }
+.cratis-button[data-icon-only='true'] { width: 2.25rem; padding: 0; }
+.cratis-button[data-size='small'][data-icon-only='true'] { width: 1.9rem; }
+.cratis-button[data-size='large'][data-icon-only='true'] { width: 2.75rem; }
+
+.cratis-button[data-variant='outlined'] { border-color: currentColor; background: transparent; color: var(--cratis-primary-color); }
+.cratis-button[data-variant='text'] { background: transparent; color: var(--cratis-text-color); }
+.cratis-button[data-variant='link'] { min-height: auto; padding: 0; background: transparent; color: var(--cratis-primary-color); text-decoration: underline; }
+
+.cratis-button[data-severity='secondary'] { --cratis-button-tone: var(--cratis-text-color); }
+.cratis-button[data-severity='info'] { --cratis-button-tone: var(--cratis-primary-color); }
+.cratis-button[data-severity='success'] { --cratis-button-tone: var(--cratis-green-500); }
+.cratis-button[data-severity='warn'] { --cratis-button-tone: var(--cratis-orange-500); }
+.cratis-button[data-severity='danger'] { --cratis-button-tone: var(--cratis-red-500); }
+.cratis-button[data-severity='help'] { --cratis-button-tone: var(--cratis-primary-400); }
+.cratis-button[data-severity='contrast'] { --cratis-button-tone: var(--cratis-text-color); }
+.cratis-button:not([data-severity='info'])[data-variant='filled'] { background: var(--cratis-button-tone); }
+.cratis-button:not([data-severity='info']):is([data-variant='outlined'], [data-variant='text'], [data-variant='link']) { color: var(--cratis-button-tone); }
+
+.cratis-button__icon, .cratis-button__spinner { display: inline-flex; flex: 0 0 auto; }
+.cratis-button__spinner {
+    width: 1em;
+    height: 1em;
+    border: 2px solid currentColor;
+    border-right-color: transparent;
+    border-radius: 50%;
+    animation: cratis-button-spin 700ms linear infinite;
+}
+
+@keyframes cratis-button-spin { to { transform: rotate(360deg); } }
+
+@media (prefers-reduced-motion: reduce) {
+    .cratis-button, .cratis-button__spinner { transition: none; animation: none; }
+}
+
+@media (forced-colors: active) {
+    .cratis-button { border-color: ButtonText; }
+    .cratis-button:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; box-shadow: none; }
+}
diff --git a/Source/Common/Button.tsx b/Source/Common/Button.tsx
index 3c73c544..73cbf714 100644
--- a/Source/Common/Button.tsx
+++ b/Source/Common/Button.tsx
@@ -1,33 +1,40 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { type CSSProperties, type MouseEventHandler, type ReactNode } from 'react';
-import { Button as PrimeButton } from 'primereact/button';
-import type { ButtonProps as ButtonRootProps } from '@primereact/types/primitive/button';
+import type {
+    ButtonHTMLAttributes,
+    CSSProperties,
+    HTMLAttributes,
+    MouseEventHandler,
+    ReactNode,
+} from 'react';
 import { Tooltip, type TooltipPosition } from './Tooltip';
 
 /** Severity tone of a {@link Button}. */
 export type ButtonSeverity = 'secondary' | 'info' | 'success' | 'warn' | 'help' | 'danger' | 'contrast';
 
-/**
- * Props for {@link Button}.
- */
+/** Stable Cratis-owned parts for styling a {@link Button}. */
+export interface ButtonParts {
+    root?: ButtonHTMLAttributes<HTMLButtonElement>;
+    icon?: HTMLAttributes<HTMLSpanElement>;
+    label?: HTMLAttributes<HTMLSpanElement>;
+    spinner?: HTMLAttributes<HTMLSpanElement>;
+}
+
+/** Props for {@link Button}. */
 export interface ButtonProps {
     /** The button's text. */
     label?: ReactNode;
-    /**
-     * The button's icon — either a PrimeIcons class name (`'pi pi-check'`) or an
-     * element. Rendered before the label.
-     */
+    /** The button's icon, rendered before the label. */
     icon?: ReactNode;
     /** Replaces the icon with a spinner and disables the button. */
     loading?: boolean;
-    /** Text shown on hover. */
+    /** Text shown on hover and keyboard focus. */
     tooltip?: string;
     /** Placement of the tooltip. */
     tooltipOptions?: { position?: TooltipPosition; className?: string };
-    /** PrimeReact pass-through for the underlying button. */
-    pt?: ButtonRootProps['pt'];
+    /** Cratis-owned per-part attributes. */
+    pt?: ButtonParts;
     /** Renders the button borderless. */
     text?: boolean;
     /** Renders the button as an inline link. */
@@ -44,7 +51,7 @@ export interface ButtonProps {
     disabled?: boolean;
     /** Native button type. */
     type?: 'button' | 'submit' | 'reset';
-    /** Native title attribute - the browser's own hover text, for when a full {@link tooltip} is too much. */
+    /** Native title attribute. */
     title?: string;
     /** Focuses the button when it mounts. */
     autoFocus?: boolean;
@@ -54,7 +61,7 @@ export interface ButtonProps {
     className?: string;
     /** Applied to the button element. */
     style?: CSSProperties;
-    /** Accessible name — required when the button renders an icon and no label. */
+    /** Accessible name, required for an icon-only button. */
     'aria-label'?: string;
     /** Rendered inside the button, after the icon and label. */
     children?: ReactNode;
@@ -63,19 +70,7 @@ export interface ButtonProps {
 const renderIcon = (icon: ReactNode) =>
     typeof icon === 'string' ? <i className={icon} aria-hidden='true' /> : icon;
 
-/**
- * A button carrying the `label` / `icon` / `loading` / `tooltip` authoring model.
- *
- * PrimeReact 11's `Button` takes its content as **children** and dropped `label`,
- * `icon`, `loading`, `tooltip` and `text` entirely. Because its props type is
- * generic over `React.ElementType`, those props are still *accepted by the
- * compiler* and silently ignored at runtime — a `<Button label="Save" />`
- * typechecks and renders an empty button. This wrapper closes that trap once, for
- * every application, rather than leaving each call site to be caught by eye.
- *
- * `severity` is also stamped as `data-severity` on the element: the Cratis theme colors
- * by that attribute (as {@link Tag} does), and PrimeReact 11's button does not emit it.
- */
+/** A Cratis-owned button with stable parts and renderer-independent styling. */
 export const Button = ({
     label,
     icon,
@@ -87,8 +82,8 @@ export const Button = ({
     link,
     outlined,
     rounded,
-    severity,
-    size,
+    severity = 'secondary',
+    size = 'normal',
     disabled,
     type = 'button',
     title,
@@ -97,34 +92,66 @@ export const Button = ({
     className,
     style,
     'aria-label': ariaLabel,
-    children
+    children,
 }: ButtonProps) => {
-    const variant = link ? 'link' : text ? 'text' : outlined ? 'outlined' : undefined;
+    const variant = link ? 'link' : text ? 'text' : outlined ? 'outlined' : 'filled';
+    const iconOnly = Boolean(icon) && label === undefined && !children;
+    const rootClassName = ['cratis-button', pt?.root?.className, className]
+        .filter(Boolean)
+        .join(' ');
 
     const button = (
-        <PrimeButton
+        <button
+            {...pt?.root}
             type={type}
             title={title}
             autoFocus={autoFocus}
-            variant={variant}
-            rounded={rounded}
-            severity={severity}
-            size={size}
-            iconOnly={!!icon && label === undefined && !children}
             disabled={disabled || loading}
             onClick={onClick}
-            className={className}
-            style={style}
+            className={rootClassName}
+            style={{ ...pt?.root?.style, ...style }}
             aria-label={ariaLabel}
+            aria-busy={loading || undefined}
+            data-cratis-part='root'
+            data-variant={variant}
             data-severity={severity}
-            pt={pt}>
-            {loading ? <i className='pi pi-spinner pi-spin' aria-hidden='true' /> : renderIcon(icon)}
-            {label}
-            {children}
-        </PrimeButton>
+            data-size={size}
+            data-rounded={rounded || undefined}
+            data-icon-only={iconOnly || undefined}
+        >
+            {loading ? (
+                <span
+                    {...pt?.spinner}
+                    className={['cratis-button__spinner', pt?.spinner?.className].filter(Boolean).join(' ')}
+                    data-cratis-part='spinner'
+                    aria-hidden='true'
+                />
+            ) : icon ? (
+                <span
+                    {...pt?.icon}
+                    className={['cratis-button__icon', pt?.icon?.className].filter(Boolean).join(' ')}
+                    data-cratis-part='icon'
+                    aria-hidden={pt?.icon?.['aria-hidden'] ?? true}
+                >
+                    {renderIcon(icon)}
+                </span>
+            ) : null}
+            {(label !== undefined || children) && (
+                <span
+                    {...pt?.label}
+                    className={['cratis-button__label', pt?.label?.className].filter(Boolean).join(' ')}
+                    data-cratis-part='label'
+                >
+                    {label}
+                    {children}
+                </span>
+            )}
+        </button>
     );
 
-    return tooltip
-        ? <Tooltip content={tooltip} position={tooltipOptions?.position} className={tooltipOptions?.className}>{button}</Tooltip>
-        : button;
+    return tooltip ? (
+        <Tooltip content={tooltip} position={tooltipOptions?.position} className={tooltipOptions?.className}>
+            {button}
+        </Tooltip>
+    ) : button;
 };
diff --git a/Source/Common/Tooltip.tsx b/Source/Common/Tooltip.tsx
index 018a255e..5bdb3979 100644
--- a/Source/Common/Tooltip.tsx
+++ b/Source/Common/Tooltip.tsx
@@ -1,74 +1,50 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import React from 'react';
-import { Tooltip as PrimeTooltip } from 'primereact/tooltip';
+import type { ReactNode } from 'react';
+import {
+    Tooltip as AriaTooltip,
+    TooltipTrigger,
+} from 'react-aria-components/Tooltip';
 
 /** Position of the tooltip relative to its trigger element. */
 export type TooltipPosition = 'top' | 'right' | 'bottom' | 'left';
 
 /** Props for the {@link Tooltip} component. */
 export interface TooltipProps {
-    /**
-     * The text to display inside the tooltip. When empty or omitted, the
-     * children render on their own with no tooltip attached — convenient for
-     * the common `content={condition ? text : undefined}` pattern.
-     */
+    /** Text displayed inside the tooltip. Empty content disables the tooltip. */
     content?: string;
-    /** Where the tooltip appears relative to the trigger (default: 'top'). */
+    /** Where the tooltip appears relative to the trigger. */
     position?: TooltipPosition;
-    /**
-     * When true, the tooltip is suppressed and never appears on hover (default: false).
-     * Useful when the trigger has expanded into a submenu/fan-out panel and the hover
-     * label would otherwise overlap the revealed content.
-     */
+    /** When true, suppresses the tooltip. */
     disabled?: boolean;
-    /**
-     * Extra class name(s) for the wrapping trigger element. The trigger is an
-     * inline-flex `<span>` by default; pass `w-full` (or similar) when the
-     * child needs to fill its container.
-     */
+    /** Extra class name for the trigger wrapper. */
     className?: string;
-    /** The element(s) that trigger the tooltip on hover. */
-    children: React.ReactNode;
+    /** Element that triggers the tooltip. */
+    children: ReactNode;
 }
 
-/**
- * A hover tooltip wrapper around PrimeReact 11's compositional Tooltip. Wraps
- * any child element and shows a floating label on hover, portaled to the
- * document body so it is never clipped by an overflow container (table cells,
- * dropdowns, scroll regions) — the reason this wrapper exists rather than a
- * plain CSS `position: absolute` bubble.
- *
- * The public API (`content`, `position`, `disabled`, `children`) is preserved
- * from the previous CSS-only implementation, so existing call sites are
- * unaffected. This replaces the removed PrimeReact 10 `data-pr-tooltip`
- * directive: wrap the trigger element instead of tagging it with a
- * `data-pr-tooltip` attribute.
- *
- * ```tsx
- * <Tooltip content="Delete" position="top">
- *     <i className="pi pi-trash" />
- * </Tooltip>
- * ```
- */
-export const Tooltip: React.FC<TooltipProps> = ({ content, position = 'top', disabled = false, className, children }) => {
-    if (!content || disabled) {
-        return <>{children}</>;
-    }
+/** An accessible hover and keyboard-focus tooltip with stable Cratis parts. */
+export const Tooltip = ({ content, position = 'top', disabled = false, className, children }: TooltipProps) => {
+    if (!content || disabled) return <>{children}</>;
 
     return (
-        <PrimeTooltip.Root>
-            <PrimeTooltip.Trigger as="span" className={className ? `cratis-tooltip-trigger ${className}` : 'cratis-tooltip-trigger'}>
+        <TooltipTrigger delay={350} closeDelay={100}>
+            <span
+                className={['cratis-tooltip-trigger', className].filter(Boolean).join(' ')}
+                data-cratis-part='trigger'
+                tabIndex={0}
+            >
                 {children}
-            </PrimeTooltip.Trigger>
-            <PrimeTooltip.Portal>
-                <PrimeTooltip.Positioner side={position} sideOffset={8}>
-                    <PrimeTooltip.Popup className="cratis-tooltip-popup">
-                        {content}
-                    </PrimeTooltip.Popup>
-                </PrimeTooltip.Positioner>
-            </PrimeTooltip.Portal>
-        </PrimeTooltip.Root>
+            </span>
+            <AriaTooltip
+                placement={position}
+                offset={8}
+                className='cratis-tooltip-popup'
+                data-cratis-part='popup'
+            >
+                {content}
+            </AriaTooltip>
+        </TooltipTrigger>
     );
 };
diff --git a/Source/DataPage/DataPage.tsx b/Source/DataPage/DataPage.tsx
index f4eb508f..79b19f40 100644
--- a/Source/DataPage/DataPage.tsx
+++ b/Source/DataPage/DataPage.tsx
@@ -5,7 +5,7 @@ import { type CSSProperties, type ReactNode, useMemo } from 'react';
 import { Page } from '../Common/Page';
 import React from 'react';
 import { ActionMenubar, type ActionMenuItem } from '../Common/ActionMenubar';
-import type { ButtonProps } from '@primereact/types/primitive/button';
+import type { ButtonParts } from '../Common/Button';
 import { type IObservableQueryFor, type IQueryFor, QueryFor } from '@cratis/arc/queries';
 import { DataTableForObservableQuery } from '../DataTables/DataTableForObservableQuery';
 import type { DataTableRootProps } from '@primereact/types/primitive/datatable';
@@ -314,11 +314,11 @@ export interface DataPageProps<
      */
     menubarClassName?: string;
 
-    /** PrimeReact pass-through configuration applied to the action menubar's buttons. */
-    menubarPt?: ButtonProps['pt'];
+    /** Cratis-owned part attributes applied to the action menubar's buttons. */
+    menubarPt?: ButtonParts;
 
-    /** PrimeReact pass-through options applied to the action menubar's buttons. */
-    menubarPtOptions?: ButtonProps['ptOptions'];
+    /** Retained for source compatibility; Cratis parts always merge. */
+    menubarPtOptions?: object;
 
     /** When true, disables every base PrimeReact style on the action menubar's buttons. */
     menubarUnstyled?: boolean;
@@ -428,7 +428,7 @@ export interface DataPageProps<
  * `tablePt` / `tableUnstyled` / `tableClassName` for the table;
  * `menubarPt` / `menubarPtOptions` / `menubarUnstyled` / `menubarClassName` for
  * the action toolbar's buttons (in PrimeReact 11 the v10 Menubar is replaced by
- * a button toolbar, so `menubarPt` targets those buttons). See the
+ * a button toolbar, so `menubarPt` targets the stable Cratis button parts). See the
  * [pass-through cheat sheet](../../Documentation/Styling/pass-through.md) for
  * the full slot reference.
  *
diff --git a/Source/styles.css b/Source/styles.css
index 9ce004fe..1a8fd44a 100644
--- a/Source/styles.css
+++ b/Source/styles.css
@@ -31,6 +31,7 @@
 
 @import './CommandDialog/CommandStepper.css';
 @import './Common/ActionMenubar.css';
+@import './Common/Button.css';
 @import './Common/FormElement.css';
 @import './Common/Tooltip.css';
 @import './DataTables/ColumnFilterMenu.css';

From d7806c3839163dc098bca7e5be99e60259bb39b0 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Sun, 23 Aug 2026 02:37:56 +0200
Subject: [PATCH 005/267] Rebuild Dropdown on React Aria

---
 Source/Dropdown/Dropdown.css                  | 106 ++++
 Source/Dropdown/Dropdown.tsx                  | 466 ++++++++++++------
 .../when_configuring_accessible_name.tsx      |  10 +-
 .../when_configuring_filter_placeholder.tsx   |   6 +-
 .../when_opened_inside_a_dialog.ts            |  37 +-
 .../when_options_carry_label_and_value.ts     |  11 +-
 Source/styles.css                             |   1 +
 7 files changed, 454 insertions(+), 183 deletions(-)
 create mode 100644 Source/Dropdown/Dropdown.css

diff --git a/Source/Dropdown/Dropdown.css b/Source/Dropdown/Dropdown.css
new file mode 100644
index 00000000..0a8df528
--- /dev/null
+++ b/Source/Dropdown/Dropdown.css
@@ -0,0 +1,106 @@
+/* Copyright (c) Cratis. All rights reserved. */
+/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */
+
+.cratis-dropdown {
+    position: relative;
+    display: inline-flex;
+    min-width: 10rem;
+    color: var(--cratis-text-color);
+}
+.cratis-dropdown__select,
+.cratis-dropdown__combobox { position: relative; display: flex; width: 100%; }
+.cratis-dropdown__trigger,
+.cratis-dropdown__filter,
+.cratis-dropdown__multiple {
+    width: 100%;
+    min-height: 2.5rem;
+    border: 1px solid var(--cratis-surface-border);
+    border-radius: var(--cratis-border-radius);
+    background: var(--cratis-surface-card);
+    color: var(--cratis-text-color);
+    font: inherit;
+}
+.cratis-dropdown__trigger {
+    display: flex;
+    padding: 0.5rem 2.25rem 0.5rem 0.75rem;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+    text-align: start;
+    cursor: pointer;
+}
+.cratis-dropdown__filter { padding: 0.5rem 4rem 0.5rem 0.75rem; }
+.cratis-dropdown__multiple { padding: 0.4rem; }
+.cratis-dropdown__trigger:focus-visible,
+.cratis-dropdown__filter:focus-visible,
+.cratis-dropdown__multiple:focus-visible { outline: none; box-shadow: var(--cratis-focus-ring); border-color: var(--cratis-primary-color); }
+.cratis-dropdown[data-invalid='true'] :is(.cratis-dropdown__trigger, .cratis-dropdown__filter, .cratis-dropdown__multiple) { border-color: var(--cratis-red-500); }
+.cratis-dropdown[data-disabled='true'] { opacity: 0.6; }
+.cratis-dropdown__value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.cratis-dropdown__indicator {
+    position: absolute;
+    inset-inline-end: 0.55rem;
+    top: 50%;
+    display: inline-flex;
+    width: 1.5rem;
+    height: 1.5rem;
+    padding: 0;
+    align-items: center;
+    justify-content: center;
+    transform: translateY(-50%);
+    border: 0;
+    background: transparent;
+    color: var(--cratis-text-color-secondary);
+}
+.cratis-dropdown__clear {
+    position: absolute;
+    inset-inline-end: 2.15rem;
+    top: 50%;
+    z-index: 1;
+    display: inline-flex;
+    width: 1.5rem;
+    height: 1.5rem;
+    padding: 0;
+    align-items: center;
+    justify-content: center;
+    transform: translateY(-50%);
+    border: 0;
+    border-radius: 50%;
+    background: transparent;
+    color: var(--cratis-text-color-secondary);
+    cursor: pointer;
+}
+.cratis-dropdown__clear:hover { background: var(--cratis-surface-hover); color: var(--cratis-text-color); }
+.cratis-dropdown__clear:focus-visible { outline: none; box-shadow: var(--cratis-focus-ring); }
+.cratis-dropdown__popover {
+    z-index: 1200;
+    min-width: var(--trigger-width);
+    max-height: min(20rem, var(--available-height));
+    overflow: auto;
+    border: 1px solid var(--cratis-surface-border);
+    border-radius: var(--cratis-border-radius);
+    background: var(--cratis-surface-overlay);
+    color: var(--cratis-text-color);
+    box-shadow: 0 0.5rem 1.5rem color-mix(in srgb, var(--cratis-text-color) 18%, transparent);
+}
+.cratis-dropdown__listbox { padding: 0.3rem; outline: none; }
+.cratis-dropdown__option {
+    display: flex;
+    min-height: 2.25rem;
+    padding: 0.45rem 0.65rem;
+    align-items: center;
+    border-radius: calc(var(--cratis-border-radius) * 0.75);
+    cursor: default;
+}
+.cratis-dropdown__option[data-focused] { background: var(--cratis-surface-hover); }
+.cratis-dropdown__option[data-selected] { background: var(--cratis-highlight-bg); color: var(--cratis-highlight-text-color); }
+.cratis-dropdown__option[data-disabled] { opacity: 0.5; }
+
+@media (forced-colors: active) {
+    .cratis-dropdown__trigger,
+    .cratis-dropdown__filter,
+    .cratis-dropdown__multiple,
+    .cratis-dropdown__popover { border-color: CanvasText; }
+    .cratis-dropdown__option[data-focused],
+    .cratis-dropdown__option[data-selected] { outline: 2px solid Highlight; }
+}
diff --git a/Source/Dropdown/Dropdown.tsx b/Source/Dropdown/Dropdown.tsx
index 6cae9e5f..f3b2d5c2 100644
--- a/Source/Dropdown/Dropdown.tsx
+++ b/Source/Dropdown/Dropdown.tsx
@@ -1,141 +1,153 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import type React from 'react';
-import { Select } from 'primereact/select';
 import type {
-    SelectRootProps,
-    SelectValueChangeEvent,
-} from '@primereact/types/primitive/select';
-
-/**
- * Change event emitted by {@link Dropdown}. Wrapper-owned so the public API does
- * not leak a raw PrimeReact type; carries the newly selected `value` (a single
- * option value, or an array when `multiple` is set) plus the originating event.
- */
+    ButtonHTMLAttributes,
+    CSSProperties,
+    FocusEventHandler,
+    HTMLAttributes,
+    InputHTMLAttributes,
+    Key,
+    SelectHTMLAttributes,
+    SyntheticEvent,
+} from 'react';
+import {
+    Button as AriaButton,
+    ListBox,
+    ListBoxItem,
+    Popover,
+    Select as AriaSelect,
+    SelectValue,
+} from 'react-aria-components/Select';
+import {
+    Button as ComboBoxButton,
+    ComboBox,
+    Input,
+    ListBox as ComboBoxListBox,
+    ListBoxItem as ComboBoxListBoxItem,
+    Popover as ComboBoxPopover,
+} from 'react-aria-components/ComboBox';
+
+/** Change event emitted by {@link Dropdown}. */
 export interface DropdownChangeEvent<T = unknown> {
-    /** The newly selected value. An array of values when `multiple` is set. */
+    /** Newly selected value, or an array when `multiple` is set. */
     value: T;
+    /** Underlying event when the native multiple-select path produced the change. */
+    originalEvent?: SyntheticEvent;
+}
+
+type DropdownTriggerAttributes = Omit<
+    ButtonHTMLAttributes<HTMLButtonElement>,
+    'onClick' | 'tabIndex' | 'value'
+>;
+
+type DropdownOptionValue =
+    | string
+    | number
+    | boolean
+    | bigint
+    | symbol
+    | object
+    | null
+    | undefined;
 
-    /** The underlying React event that produced the change, when available. */
-    originalEvent?: SelectValueChangeEvent['originalEvent'];
+/** Stable Cratis-owned parts for styling a {@link Dropdown}. */
+export interface DropdownParts {
+    root?: HTMLAttributes<HTMLElement>;
+    trigger?: DropdownTriggerAttributes;
+    value?: HTMLAttributes<HTMLSpanElement>;
+    clear?: ButtonHTMLAttributes<HTMLButtonElement>;
+    indicator?: HTMLAttributes<HTMLSpanElement>;
+    popover?: HTMLAttributes<HTMLDivElement>;
+    listbox?: HTMLAttributes<HTMLDivElement>;
+    option?: HTMLAttributes<HTMLDivElement>;
+    filter?: InputHTMLAttributes<HTMLInputElement>;
+    multiple?: SelectHTMLAttributes<HTMLSelectElement>;
 }
 
-/**
- * Props for {@link Dropdown}. Wrapper-owned — the common single/multi select
- * surface every Cratis form needs, without exposing PrimeReact's internal
- * compositional Select parts.
- */
+/** Props for {@link Dropdown}. */
 export interface DropdownProps<T = unknown> {
-    /** The selected value. An array of values when `multiple` is set. */
     value?: T;
-
-    /** Source array of option objects (or primitives). */
     options?: unknown[];
-
-    /**
-     * Property name on each option object used as the visible label. When omitted and the
-     * options are objects carrying a `label`, that is used - the v10 `Dropdown` convention.
-     */
     optionLabel?: string;
-
-    /**
-     * Property name on each option object used as the underlying value. When omitted and the
-     * options are objects carrying a `value`, that is used - the v10 `Dropdown` convention.
-     */
     optionValue?: string;
-
-    /** Placeholder shown in the trigger when nothing is selected. */
     placeholder?: string;
-
-    /** When true, shows a filter input inside the options popup. */
     filter?: boolean;
-
-    /** Placeholder shown in the filter input. Defaults to {@link placeholder}. */
     filterPlaceholder?: string;
-
-    /** When true, the dropdown accepts multiple selections. */
     multiple?: boolean;
-
-    /** When true, shows a clear control that resets the selection. */
     showClear?: boolean;
-
-    /** Renders the trigger in an invalid (error) state. */
     invalid?: boolean;
-
-    /** Disables the control. */
     disabled?: boolean;
-
-    /** Extra CSS class name forwarded to the Select root. */
     className?: string;
-
-    /** Inline style forwarded to the Select root. */
-    style?: React.CSSProperties;
-
-    /** DOM id forwarded to the focusable combobox — pair it with a label's `htmlFor`. */
+    style?: CSSProperties;
     id?: string;
-
-    /** Form field name forwarded to the Select root. */
     name?: string;
-
-    /** Tab order for the control. */
     tabIndex?: number;
-
-    /** Accessible name for the control (when no visible label is associated). */
     'aria-label'?: string;
-
-    /** Id of the element that labels the control. */
     'aria-labelledby'?: string;
-
-    /** Id of the element that describes the control. */
     'aria-describedby'?: string;
-
-    /** Fired when the selection changes. */
     onChange?: (event: DropdownChangeEvent<T>) => void;
-
-    /** Fired when focus leaves the control (rides the root's blur). */
-    onBlur?: React.FocusEventHandler<HTMLElement>;
-
-    /** PrimeReact pass-through configuration applied to the Select. */
-    pt?: SelectRootProps['pt'];
-
-    /** PrimeReact pass-through options applied to the Select. */
-    ptOptions?: SelectRootProps['ptOptions'];
-
-    /** When true, disables every base PrimeReact style on the Select. */
+    onBlur?: FocusEventHandler<HTMLElement>;
+    /** Cratis-owned per-part attributes. */
+    pt?: DropdownParts;
+    /** Retained for source compatibility; Cratis parts always merge. */
+    ptOptions?: object;
+    /** Retained for source compatibility; consumers always own the CSS. */
     unstyled?: boolean;
 }
 
-/**
- * Cratis single/multi select built on PrimeReact 11's compositional `Select`.
- *
- * PrimeReact 11 replaced the monolithic v10 `Dropdown` with a headless,
- * compositional `Select` (Root → Trigger/Value → Portal → Positioner → Popup →
- * List/Option). This wrapper assembles that composition once behind a small,
- * familiar `value` / `options` / `optionLabel` / `optionValue` / `onChange`
- * API so slices never touch the parts directly. `Select.List` auto-renders the
- * `options`, so no manual option mapping is needed.
- *
- * The options popup renders through `Select.Portal` and stacks correctly above
- * modal dialogs via PrimeReact 11's overlay manager — the v10 `appendTo` /
- * manual z-index workaround is no longer required.
- */
-/**
- * PrimeReact 10's `Dropdown` read `label` and `value` off option objects when no
- * `optionLabel` / `optionValue` was given; v11's `Select` compares the option object
- * itself against the value instead, so `[{ label, value }]` options with a scalar
- * `value` never match. Resolve the v10 convention here so those call sites keep working.
- */
+interface ResolvedOption {
+    key: string;
+    label: string;
+    value: unknown;
+    disabled: boolean;
+}
+
 const conventionalField = (
     options: unknown[] | undefined,
     field: 'label' | 'value',
 ): string | undefined => {
     const first = options?.[0];
-    return first !== null && typeof first === 'object' && field in (first as object)
+    return first !== null && typeof first === 'object' && field in first
         ? field
         : undefined;
 };
 
+const optionValue = (value: unknown): DropdownOptionValue => {
+    if (typeof value === 'function') return String(value);
+    return value as DropdownOptionValue;
+};
+
+const readField = (option: unknown, field: string | undefined): DropdownOptionValue => {
+    if (!field || option === null || typeof option !== 'object') return optionValue(option);
+    return field in option
+        ? optionValue((option as Record<string, unknown>)[field])
+        : optionValue(option);
+};
+
+const resolveOptions = (
+    options: unknown[] | undefined,
+    optionLabel: string | undefined,
+    optionValue: string | undefined,
+): ResolvedOption[] => (options ?? []).map((option, index) => {
+    const value = readField(option, optionValue);
+    const labelValue = readField(option, optionLabel);
+    const keyValue = value ?? index;
+    const disabled = option !== null && typeof option === 'object' && 'disabled' in option
+        ? Boolean((option as { disabled?: unknown }).disabled)
+        : false;
+
+    return {
+        key: `${typeof keyValue}:${String(keyValue)}:${index}`,
+        label: String(labelValue ?? value ?? ''),
+        value,
+        disabled,
+    };
+});
+
+const classNames = (...values: Array<string | undefined>) => values.filter(Boolean).join(' ');
+
+/** A renderer-independent single or multiple select with stable Cratis parts. */
 export const Dropdown = <T = unknown,>({
     value,
     options,
@@ -159,65 +171,225 @@ export const Dropdown = <T = unknown,>({
     onChange,
     onBlur,
     pt,
-    ptOptions,
-    unstyled,
 }: DropdownProps<T>) => {
-    return (
-        // `onBlur` rides the wrapping span because React blur bubbles (focusout).
-        <span onBlur={onBlur}>
-            <Select.Root
-                value={value}
-                options={options}
-                optionLabel={optionLabel}
-                optionValue={optionValue}
-                multiple={multiple}
-                invalid={invalid}
-                disabled={disabled}
-                className={className}
-                style={style}
-                name={name}
-                onValueChange={(event: SelectValueChangeEvent) =>
-                    onChange?.({
-                        value: event.value as T,
-                        originalEvent: event.originalEvent,
-                    })
-                }
-                pt={pt}
-                ptOptions={ptOptions}
-                unstyled={unstyled}
+    const resolvedOptions = resolveOptions(options, optionLabel, optionValue);
+    const selectedOption = resolvedOptions.find(option => Object.is(option.value, value));
+    const selectedKey = selectedOption?.key ?? null;
+    const rootClassName = classNames('cratis-dropdown', pt?.root?.className, className);
+    const triggerId = id ?? pt?.trigger?.id;
+
+    const selectOption = (key: Key | null) => {
+        const option = resolvedOptions.find(candidate => candidate.key === String(key));
+        onChange?.({ value: (option?.value ?? null) as T });
+    };
+
+    if (multiple) {
+        const selectedValues = Array.isArray(value) ? value : [];
+        const selectedKeys = resolvedOptions
+            .filter(option => selectedValues.some(selected => Object.is(selected, option.value)))
+            .map(option => option.key);
+
+        return (
+            <span
+                {...pt?.root}
+                className={rootClassName}
+                data-cratis-part='root'
+                data-invalid={invalid || undefined}
+                data-disabled={disabled || undefined}
+                style={{ ...pt?.root?.style, ...style }}
+                onBlur={onBlur}
             >
-                <Select.Trigger
-                    id={id}
+                <select
+                    {...pt?.multiple}
+                    id={id ?? pt?.multiple?.id}
+                    name={name}
+                    multiple
+                    disabled={disabled}
+                    value={selectedKeys}
                     tabIndex={tabIndex}
                     aria-label={ariaLabel}
                     aria-labelledby={ariaLabelledby}
                     aria-describedby={ariaDescribedby}
+                    aria-invalid={invalid || undefined}
+                    className={classNames('cratis-dropdown__multiple', pt?.multiple?.className)}
+                    data-cratis-part='multiple'
+                    onChange={event => {
+                        const keys = Array.from(event.currentTarget.selectedOptions, option => option.value);
+                        const values = resolvedOptions
+                            .filter(option => keys.includes(option.key))
+                            .map(option => option.value);
+                        onChange?.({ value: values as T, originalEvent: event });
+                    }}
+                >
+                    {resolvedOptions.map(option => (
+                        <option key={option.key} value={option.key} disabled={option.disabled}>
+                            {option.label}
+                        </option>
+                    ))}
+                </select>
+            </span>
+        );
+    }
+
+    if (filter) {
+        return (
+            <span
+                {...pt?.root}
+                className={rootClassName}
+                data-cratis-part='root'
+                data-invalid={invalid || undefined}
+                data-disabled={disabled || undefined}
+                style={{ ...pt?.root?.style, ...style }}
+                onBlur={onBlur}
+            >
+                <ComboBox
+                    selectedKey={selectedKey}
+                    onSelectionChange={selectOption}
+                    isDisabled={disabled}
+                    name={name}
+                    aria-label={ariaLabel}
+                    aria-labelledby={ariaLabelledby}
+                    aria-describedby={ariaDescribedby}
+                    allowsEmptyCollection
+                    className='cratis-dropdown__combobox'
                 >
-                    <Select.Value placeholder={placeholder} />
-                    {/* v11's parts render no glyph of their own - the icon is the composer's to supply.
-                        `Indicator` is the trigger's chevron; `Arrow` would be the popup's pointer. */}
-                    {showClear && (
-                        <Select.Clear>
-                            <i className='pi pi-times' />
-                        </Select.Clear>
+                    <Input
+                        {...pt?.filter}
+                        id={triggerId}
+                        placeholder={filterPlaceholder ?? placeholder}
+                        tabIndex={tabIndex}
+                        aria-invalid={invalid || undefined}
+                        className={classNames('cratis-dropdown__filter', pt?.filter?.className)}
+                        data-cratis-part='filter'
+                    />
+                    <ComboBoxButton
+                        {...pt?.trigger}
+                        className={classNames('cratis-dropdown__indicator', pt?.trigger?.className)}
+                        data-cratis-part='trigger'
+                        aria-label={pt?.trigger?.['aria-label'] ?? 'Show options'}
+                    >
+                        <span aria-hidden='true'>⌄</span>
+                    </ComboBoxButton>
+                    {showClear && selectedKey !== null && (
+                        <button
+                            {...pt?.clear}
+                            type='button'
+                            className={classNames('cratis-dropdown__clear', pt?.clear?.className)}
+                            data-cratis-part='clear'
+                            aria-label={pt?.clear?.['aria-label'] ?? 'Clear selection'}
+                            onClick={() => onChange?.({ value: null as T })}
+                        >
+                            <span aria-hidden='true'>×</span>
+                        </button>
                     )}
-                    <Select.Indicator>
-                        <i className='pi pi-chevron-down' />
-                    </Select.Indicator>
-                </Select.Trigger>
-                <Select.Portal>
-                    <Select.Positioner>
-                        <Select.Popup>
-                            {filter && (
-                                <Select.Filter
-                                    placeholder={filterPlaceholder ?? placeholder}
-                                />
+                    <ComboBoxPopover
+                        {...pt?.popover}
+                        className={classNames('cratis-dropdown__popover', pt?.popover?.className)}
+                        data-cratis-part='popover'
+                    >
+                        <ComboBoxListBox
+                            items={resolvedOptions}
+                            className={classNames('cratis-dropdown__listbox', pt?.listbox?.className)}
+                            data-cratis-part='listbox'
+                        >
+                            {option => (
+                                <ComboBoxListBoxItem
+                                    id={option.key}
+                                    textValue={option.label}
+                                    isDisabled={option.disabled}
+                                    className={classNames('cratis-dropdown__option', pt?.option?.className)}
+                                    data-cratis-part='option'
+                                >
+                                    {option.label}
+                                </ComboBoxListBoxItem>
                             )}
-                            <Select.List />
-                        </Select.Popup>
-                    </Select.Positioner>
-                </Select.Portal>
-            </Select.Root>
+                        </ComboBoxListBox>
+                    </ComboBoxPopover>
+                </ComboBox>
+            </span>
+        );
+    }
+
+    return (
+        <span
+            {...pt?.root}
+            className={rootClassName}
+            data-cratis-part='root'
+            data-invalid={invalid || undefined}
+            data-disabled={disabled || undefined}
+            style={{ ...pt?.root?.style, ...style }}
+            onBlur={onBlur}
+        >
+            <AriaSelect
+                selectedKey={selectedKey}
+                onSelectionChange={selectOption}
+                isDisabled={disabled}
+                name={name}
+                aria-label={ariaLabel}
+                aria-labelledby={ariaLabelledby}
+                aria-describedby={ariaDescribedby}
+                className='cratis-dropdown__select'
+            >
+                <AriaButton
+                    {...pt?.trigger}
+                    id={triggerId}
+                    excludeFromTabOrder={tabIndex === -1}
+                    aria-invalid={invalid || undefined}
+                    className={classNames('cratis-dropdown__trigger', pt?.trigger?.className)}
+                    data-cratis-part='trigger'
+                >
+                    <SelectValue
+                        {...pt?.value}
+                        className={classNames('cratis-dropdown__value', pt?.value?.className)}
+                        data-cratis-part='value'
+                    >
+                        {selectedOption?.label ?? placeholder}
+                    </SelectValue>
+                    <span
+                        {...pt?.indicator}
+                        className={classNames('cratis-dropdown__indicator', pt?.indicator?.className)}
+                        data-cratis-part='indicator'
+                        aria-hidden='true'
+                    >
+                        ⌄
+                    </span>
+                </AriaButton>
+                {showClear && selectedKey !== null && (
+                    <button
+                        {...pt?.clear}
+                        type='button'
+                        className={classNames('cratis-dropdown__clear', pt?.clear?.className)}
+                        data-cratis-part='clear'
+                        aria-label={pt?.clear?.['aria-label'] ?? 'Clear selection'}
+                        onClick={() => onChange?.({ value: null as T })}
+                    >
+                        <span aria-hidden='true'>×</span>
+                    </button>
+                )}
+                <Popover
+                    {...pt?.popover}
+                    className={classNames('cratis-dropdown__popover', pt?.popover?.className)}
+                    data-cratis-part='popover'
+                >
+                    <ListBox
+                        items={resolvedOptions}
+                        className={classNames('cratis-dropdown__listbox', pt?.listbox?.className)}
+                        data-cratis-part='listbox'
+                    >
+                        {option => (
+                            <ListBoxItem
+                                id={option.key}
+                                textValue={option.label}
+                                isDisabled={option.disabled}
+                                className={classNames('cratis-dropdown__option', pt?.option?.className)}
+                                data-cratis-part='option'
+                            >
+                                {option.label}
+                            </ListBoxItem>
+                        )}
+                    </ListBox>
+                </Popover>
+            </AriaSelect>
         </span>
     );
 };
diff --git a/Source/Dropdown/for_Dropdown/when_configuring_accessible_name.tsx b/Source/Dropdown/for_Dropdown/when_configuring_accessible_name.tsx
index 5b38b9f7..7fde18b1 100644
--- a/Source/Dropdown/for_Dropdown/when_configuring_accessible_name.tsx
+++ b/Source/Dropdown/for_Dropdown/when_configuring_accessible_name.tsx
@@ -39,17 +39,17 @@ describe('when configuring the accessible name', () => {
                         aria-label='Select a role'
                         aria-labelledby='role-label'
                         aria-describedby='role-help'
-                        tabIndex={3}
+                        tabIndex={-1}
                     />
                 </CratisComponentsProvider>,
             );
         });
 
         const renderedRoot = container.querySelector<HTMLElement>(
-            '[data-scope="select"][data-part="root"]',
+            '.cratis-dropdown[data-cratis-part="root"]',
         );
         const renderedTrigger = container.querySelector<HTMLButtonElement>(
-            '[data-scope="select"][data-part="trigger"][role="combobox"]',
+            '[data-cratis-part="trigger"]',
         );
         if (!renderedRoot || !renderedTrigger) {
             throw new Error('Dropdown did not render its root and combobox trigger.');
@@ -72,7 +72,7 @@ describe('when configuring the accessible name', () => {
     });
 
     it('should put the label reference on the combobox', () => {
-        expect(trigger.getAttribute('aria-labelledby')).to.equal('role-label');
+        expect(trigger.getAttribute('aria-labelledby')?.split(' ')).to.include('role-label');
     });
 
     it('should put the description reference on the combobox', () => {
@@ -84,7 +84,7 @@ describe('when configuring the accessible name', () => {
     });
 
     it('should put the tab order on the combobox', () => {
-        expect(trigger.tabIndex).to.equal(3);
+        expect(trigger.tabIndex).to.equal(-1);
     });
 
     it('should not duplicate the control id on the wrapper', () => {
diff --git a/Source/Dropdown/for_Dropdown/when_configuring_filter_placeholder.tsx b/Source/Dropdown/for_Dropdown/when_configuring_filter_placeholder.tsx
index 4dcd513f..3544247a 100644
--- a/Source/Dropdown/for_Dropdown/when_configuring_filter_placeholder.tsx
+++ b/Source/Dropdown/for_Dropdown/when_configuring_filter_placeholder.tsx
@@ -20,7 +20,7 @@ describe('when configuring the filter placeholder', () => {
         (
             globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
         ).IS_REACT_ACT_ENVIRONMENT = true;
-        // SAFETY: jsdom omits ResizeObserver, while PrimeReact only calls its three observer methods.
+        // SAFETY: jsdom omits ResizeObserver, while overlay positioning only calls its observer methods.
         (globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver ??= class {
             observe() {
                 return undefined;
@@ -50,7 +50,7 @@ describe('when configuring the filter placeholder', () => {
         });
 
         const trigger = container.querySelector<HTMLButtonElement>(
-            '[data-scope="select"][data-part="trigger"]',
+            '[data-cratis-part="trigger"]',
         );
         if (!trigger) {
             throw new Error('Dropdown did not render its trigger.');
@@ -58,7 +58,7 @@ describe('when configuring the filter placeholder', () => {
         await act(async () => trigger.click());
 
         const renderedFilter = document.querySelector<HTMLInputElement>(
-            '[data-scope="select"][data-part="filter"]',
+            '[data-cratis-part="filter"]',
         );
         if (!renderedFilter) {
             throw new Error('Dropdown did not render its filter input.');
diff --git a/Source/Dropdown/for_Dropdown/when_opened_inside_a_dialog.ts b/Source/Dropdown/for_Dropdown/when_opened_inside_a_dialog.ts
index 975aecaa..418cc41a 100644
--- a/Source/Dropdown/for_Dropdown/when_opened_inside_a_dialog.ts
+++ b/Source/Dropdown/for_Dropdown/when_opened_inside_a_dialog.ts
@@ -2,6 +2,7 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 // @vitest-environment jsdom
 
+import { expect } from 'chai';
 import React from 'react';
 import { act } from 'react';
 import { createRoot, type Root } from 'react-dom/client';
@@ -10,20 +11,9 @@ import { Dropdown } from '../Dropdown';
 import { CratisComponentsProvider } from '../../Common/CratisComponentsProvider';
 
 /**
- * The regression guard for what used to be two hand-rolled workarounds.
- *
- * On PrimeReact 10 a `Dropdown` opened inside a modal `Dialog` rendered its panel *inside* the
- * dialog's DOM subtree, so the dialog's scroll and stacking context clipped it, and the panel could
- * land underneath the dialog's own mask. The library carried two fixes for that: `appendTo={document.body}`
- * on every overlay-bearing field (Cratis/Components#115) and a `useOverlayZIndex` hook that raised a
- * panel to a z-index floor with a `MutationObserver` (Cratis/Components#117).
- *
- * PrimeReact 11 does both natively: `Select.Portal` defaults to `appendTo: 'body'`, and the shared
- * `@primeuix/utils` z-index registry assigns a later-opened overlay a value above whatever is already
- * registered — so the panel outranks the dialog it was opened from. Both workarounds were therefore
- * deleted rather than ported. This spec is what makes that deletion safe: it fails if a future
- * PrimeReact release stops portaling the panel or stops stacking it above the dialog, which is
- * exactly the signal that a workaround is needed again.
+ * The dropdown popup must leave the dialog's clipping and stacking context. This is a
+ * Cratis behavior contract rather than a renderer-specific DOM contract: the popup is
+ * portaled to the document overlay container and carries the stable Cratis popover part.
  */
 describe('when a dropdown is opened inside a dialog', () => {
     let root: Root;
@@ -34,8 +24,9 @@ describe('when a dropdown is opened inside a dialog', () => {
     let panelIsPortaledToTheBody: boolean;
 
     beforeEach(async () => {
+        // SAFETY: React's test-environment flag is an intentionally undocumented global absent from DOM typings.
         (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
-        // Allotment and PrimeReact's positioner both observe their container; jsdom has no layout engine.
+        // SAFETY: jsdom omits ResizeObserver; the overlay only calls these observer methods.
         (globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver ??= class {
             observe() { } unobserve() { } disconnect() { }
         };
@@ -60,18 +51,18 @@ describe('when a dropdown is opened inside a dialog', () => {
         });
         await act(async () => { await new Promise(resolve => setTimeout(resolve, 300)); });
 
-        const trigger = document.querySelector('[data-scope="select"][data-part="trigger"]') as HTMLElement;
+        const trigger = document.querySelector('[data-cratis-part="trigger"]') as HTMLElement;
         await act(async () => { trigger.click(); });
         await act(async () => { await new Promise(resolve => setTimeout(resolve, 300)); });
 
         const dialogPositioner = document.querySelector('[data-scope="dialog"][data-part="positioner"]') as HTMLElement;
         const dialogPopup = document.querySelector('[data-scope="dialog"][data-part="popup"]') as HTMLElement;
-        const panel = document.querySelector('[data-scope="select"][data-part="positioner"]') as HTMLElement;
+        const panel = document.querySelector('[data-cratis-part="popover"]') as HTMLElement;
 
-        dialogPositionerZIndex = Number.parseInt(dialogPositioner.style.zIndex, 10);
-        panelZIndex = Number.parseInt(panel.style.zIndex, 10);
+        dialogPositionerZIndex = Number.parseInt(getComputedStyle(dialogPositioner).zIndex, 10);
+        panelZIndex = Number.parseInt(getComputedStyle(panel).zIndex, 10);
         panelIsInsideTheDialog = dialogPopup.contains(panel);
-        panelIsPortaledToTheBody = panel.parentElement === document.body;
+        panelIsPortaledToTheBody = document.body.contains(panel) && !container.contains(panel);
     });
 
     afterEach(async () => {
@@ -80,14 +71,14 @@ describe('when a dropdown is opened inside a dialog', () => {
     });
 
     it('should render the panel outside the dialog rather than inside its stacking context', () => {
-        panelIsInsideTheDialog.should.be.false;
+        expect(panelIsInsideTheDialog).to.equal(false);
     });
 
     it('should portal the panel to the document body', () => {
-        panelIsPortaledToTheBody.should.be.true;
+        expect(panelIsPortaledToTheBody).to.equal(true);
     });
 
     it('should stack the panel above the dialog it was opened from', () => {
-        panelZIndex.should.be.greaterThan(dialogPositionerZIndex);
+        expect(panelZIndex).to.be.greaterThan(dialogPositionerZIndex);
     });
 });
diff --git a/Source/Dropdown/for_Dropdown/when_options_carry_label_and_value.ts b/Source/Dropdown/for_Dropdown/when_options_carry_label_and_value.ts
index 803fba7d..825ae138 100644
--- a/Source/Dropdown/for_Dropdown/when_options_carry_label_and_value.ts
+++ b/Source/Dropdown/for_Dropdown/when_options_carry_label_and_value.ts
@@ -9,10 +9,9 @@ import { Dropdown } from '../Dropdown';
 import { CratisComponentsProvider } from '../../Common/CratisComponentsProvider';
 
 /**
- * PrimeReact 10's `Dropdown` displayed `option.label` and compared `option.value` when no
- * `optionLabel` / `optionValue` was given, so `[{ label, value }]` with a scalar `value` was
- * the everyday shape. v11's `Select` matches the option object itself against the value, which
- * shows the raw scalar in the trigger. The wrapper keeps the v10 convention.
+ * The Cratis convention displays `option.label` and compares `option.value` when no
+ * explicit field names are supplied, preserving the everyday `{ label, value }` shape
+ * independently of the internal select implementation.
  */
 describe('when options carry label and value', () => {
     let root: Root;
@@ -20,7 +19,9 @@ describe('when options carry label and value', () => {
     let triggerText: string;
 
     beforeEach(async () => {
+        // SAFETY: React's test-environment flag and ResizeObserver polyfill are test-only globals absent from jsdom typings.
         (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+        // SAFETY: The overlay implementation only needs the observer methods supplied by this jsdom polyfill.
         (globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver ??= class {
             observe() { } unobserve() { } disconnect() { }
         };
@@ -38,7 +39,7 @@ describe('when options carry label and value', () => {
             }));
         });
 
-        triggerText = container.querySelector('[data-scope="select"][data-part="value"]')?.textContent ?? '';
+        triggerText = container.querySelector('[data-cratis-part="value"]')?.textContent ?? '';
     });
 
     afterEach(async () => {
diff --git a/Source/styles.css b/Source/styles.css
index 1a8fd44a..6d95deb6 100644
--- a/Source/styles.css
+++ b/Source/styles.css
@@ -38,6 +38,7 @@
 @import './DataTables/DataTableCore.css';
 @import './DataTables/TablePaginator.css';
 @import './Display/Display.css';
+@import './Dropdown/Dropdown.css';
 @import './Filter/FilterPanel.css';
 @import './Notifications/Toaster.css';
 @import './ObjectNavigationalBar/ObjectNavigationalBar.css';

From 3cec469be3c9c2db1de34489fdca8a9397851191 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Sun, 23 Aug 2026 02:43:38 +0200
Subject: [PATCH 006/267] Rebuild DatePickerInput on React Aria

---
 Source/CommandForm/fields/CalendarField.tsx   |  16 +-
 Source/Common/DatePickerInput.css             |  77 ++++
 Source/Common/DatePickerInput.tsx             | 418 +++++++++++-------
 .../when_configuring_input_pass_through.tsx   |  36 +-
 .../when_configuring_standard_props.tsx       | 109 ++---
 .../when_rendering_invalid_state.tsx          |  19 +-
 Source/styles.css                             |   1 +
 7 files changed, 408 insertions(+), 268 deletions(-)
 create mode 100644 Source/Common/DatePickerInput.css

diff --git a/Source/CommandForm/fields/CalendarField.tsx b/Source/CommandForm/fields/CalendarField.tsx
index f4005517..d9e651f9 100644
--- a/Source/CommandForm/fields/CalendarField.tsx
+++ b/Source/CommandForm/fields/CalendarField.tsx
@@ -2,8 +2,10 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import { asCommandFormField, WrappedFieldProps } from '@cratis/arc.react/commands';
-import { DatePickerInput } from '../../Common/DatePickerInput';
-import type { DatePickerRootProps } from '@primereact/types/primitive/datepicker';
+import {
+    DatePickerInput,
+    type DatePickerInputPassThrough,
+} from '../../Common/DatePickerInput';
 import React from 'react';
 
 /**
@@ -34,13 +36,13 @@ interface CalendarFieldComponentProps extends WrappedFieldProps<Date | null> {
     /** Extra CSS class name combined with the default `w-full`. */
     className?: string;
 
-    /** PrimeReact pass-through configuration applied to the underlying DatePicker. */
-    pt?: DatePickerRootProps['pt'];
+    /** Cratis-owned per-part attributes applied to the date picker. */
+    pt?: DatePickerInputPassThrough;
 
-    /** PrimeReact pass-through options applied to the underlying DatePicker. */
-    ptOptions?: DatePickerRootProps['ptOptions'];
+    /** Retained for source compatibility; Cratis parts always merge. */
+    ptOptions?: object;
 
-    /** When true, disables every base PrimeReact style on the underlying DatePicker. */
+    /** Retained for source compatibility; consumers always own the CSS. */
     unstyled?: boolean;
 }
 
diff --git a/Source/Common/DatePickerInput.css b/Source/Common/DatePickerInput.css
new file mode 100644
index 00000000..2d726660
--- /dev/null
+++ b/Source/Common/DatePickerInput.css
@@ -0,0 +1,77 @@
+/* Copyright (c) Cratis. All rights reserved. */
+/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */
+
+.cratis-date-picker { display: inline-flex; width: 100%; color: var(--cratis-text-color); }
+.cratis-date-picker__picker { width: 100%; }
+.cratis-date-picker__group {
+    display: flex;
+    width: 100%;
+    min-height: 2.5rem;
+    align-items: center;
+    overflow: hidden;
+    border: 1px solid var(--cratis-surface-border);
+    border-radius: var(--cratis-border-radius);
+    background: var(--cratis-surface-card);
+}
+.cratis-date-picker__group[data-focus-within] { border-color: var(--cratis-primary-color); box-shadow: var(--cratis-focus-ring); }
+.cratis-date-picker[data-invalid='true'] .cratis-date-picker__group { border-color: var(--cratis-red-500); }
+.cratis-date-picker[data-disabled='true'] { opacity: 0.6; }
+.cratis-date-picker__input { display: flex; flex: 1; min-width: 0; padding: 0.45rem 0.7rem; }
+.cratis-date-picker__input:empty::before { content: attr(data-placeholder); color: var(--cratis-text-color-secondary); }
+.cratis-date-picker__segment { padding: 0 0.1rem; border-radius: 0.2rem; outline: none; font-variant-numeric: tabular-nums; }
+.cratis-date-picker__segment[data-placeholder] { color: var(--cratis-text-color-secondary); }
+.cratis-date-picker__segment[data-focused] { background: var(--cratis-highlight-bg); color: var(--cratis-highlight-text-color); }
+.cratis-date-picker__trigger {
+    align-self: stretch;
+    min-width: 2.5rem;
+    border: 0;
+    border-inline-start: 1px solid var(--cratis-surface-border);
+    background: transparent;
+    color: var(--cratis-text-color-secondary);
+    cursor: pointer;
+}
+.cratis-date-picker__trigger:hover { background: var(--cratis-surface-hover); color: var(--cratis-text-color); }
+.cratis-date-picker__trigger:focus-visible { outline: none; box-shadow: inset var(--cratis-focus-ring); }
+.cratis-date-picker__popover {
+    z-index: 1200;
+    overflow: auto;
+    border: 1px solid var(--cratis-surface-border);
+    border-radius: var(--cratis-border-radius);
+    background: var(--cratis-surface-overlay);
+    color: var(--cratis-text-color);
+    box-shadow: 0 0.75rem 2rem color-mix(in srgb, var(--cratis-text-color) 18%, transparent);
+}
+.cratis-date-picker__dialog { padding: 0.75rem; outline: none; }
+.cratis-date-picker__calendar { width: max-content; }
+.cratis-date-picker__header { display: grid; grid-template-columns: 2rem 1fr 2rem; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
+.cratis-date-picker__heading { margin: 0; text-align: center; font-size: 0.95rem; }
+.cratis-date-picker__nav,
+.cratis-date-picker__action {
+    min-height: 2rem;
+    border: 1px solid var(--cratis-surface-border);
+    border-radius: calc(var(--cratis-border-radius) * 0.75);
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+}
+.cratis-date-picker__nav:hover,
+.cratis-date-picker__action:hover { background: var(--cratis-surface-hover); }
+.cratis-date-picker__nav:focus-visible,
+.cratis-date-picker__action:focus-visible { outline: none; box-shadow: var(--cratis-focus-ring); }
+.cratis-date-picker__grid { border-collapse: collapse; }
+.cratis-date-picker__grid th { width: 2.25rem; height: 2rem; color: var(--cratis-text-color-secondary); font-size: 0.75rem; font-weight: 500; }
+.cratis-date-picker__cell { display: flex; width: 2.25rem; height: 2.25rem; align-items: center; justify-content: center; border-radius: 50%; outline: none; cursor: default; }
+.cratis-date-picker__cell[data-hovered] { background: var(--cratis-surface-hover); }
+.cratis-date-picker__cell[data-selected] { background: var(--cratis-primary-color); color: var(--cratis-primary-color-text); }
+.cratis-date-picker__cell[data-focused] { box-shadow: var(--cratis-focus-ring); }
+.cratis-date-picker__cell[data-disabled], .cratis-date-picker__cell[data-outside-month] { opacity: 0.45; }
+.cratis-date-picker__button-bar { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--cratis-surface-border); }
+.cratis-date-picker__action { padding: 0.35rem 0.65rem; }
+
+@media (forced-colors: active) {
+    .cratis-date-picker__group,
+    .cratis-date-picker__popover,
+    .cratis-date-picker__nav,
+    .cratis-date-picker__action { border-color: CanvasText; }
+    .cratis-date-picker__cell[data-selected] { background: Highlight; color: HighlightText; }
+}
diff --git a/Source/Common/DatePickerInput.tsx b/Source/Common/DatePickerInput.tsx
index 4c97e898..bb53bdb3 100644
--- a/Source/Common/DatePickerInput.tsx
+++ b/Source/Common/DatePickerInput.tsx
@@ -2,104 +2,126 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import type {
+    ButtonHTMLAttributes,
     CSSProperties,
     FocusEventHandler,
-    InputHTMLAttributes,
-    KeyboardEvent as ReactKeyboardEvent,
 } from 'react';
-import { DatePicker, useDatePickerContext } from 'primereact/datepicker';
-import { InputText } from 'primereact/inputtext';
-import { Button } from 'primereact/button';
-import type {
-    DatePickerRootPassThrough,
-    DatePickerRootPassThroughType,
-    DatePickerRootProps,
-    DatePickerRootValueChangeEvent,
-} from '@primereact/types/primitive/datepicker';
+import {
+    Button,
+    Calendar,
+    CalendarCell,
+    CalendarGrid,
+    CalendarGridBody,
+    CalendarGridHeader,
+    CalendarHeaderCell,
+    DateInput,
+    DatePicker as AriaDatePicker,
+    DateSegment,
+    Group,
+    Popover,
+    type DateValue,
+} from 'react-aria-components/DatePicker';
+import { Dialog } from 'react-aria-components/Dialog';
+import { Heading } from 'react-aria-components/Heading';
+import {
+    fromDate,
+    getLocalTimeZone,
+    today,
+    toCalendarDate,
+} from '@internationalized/date';
 
-/**
- * Pass-through configuration for {@link DatePickerInput}.
- *
- * PrimeReact 11 routes the rendered input through `input`; its published
- * `pcInputText` declaration is not used by the runtime composition.
- */
-export type DatePickerInputPassThrough = Omit<
-    DatePickerRootPassThrough,
-    'pcInputText'
-> & {
-    /** Attributes applied to the rendered input element. */
-    input?: DatePickerRootPassThroughType<InputHTMLAttributes<HTMLInputElement>>;
-};
-
-const stopDatePickerKeyboardOpening = (event: ReactKeyboardEvent) => {
-    if (event.code === 'ArrowDown') {
-        event.stopPropagation();
-    }
-};
+interface DatePickerPartAttributes {
+    id?: string;
+    className?: string;
+    style?: CSSProperties;
+    disabled?: boolean;
+    readOnly?: boolean;
+    placeholder?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    'aria-invalid'?: boolean;
+    [attribute: `data-${string}`]: string | number | boolean | undefined;
+}
 
-const DatePickerInputButtonBar = () => {
-    const datePicker = useDatePickerContext();
+type DatePickerButtonAttributes = Omit<
+    ButtonHTMLAttributes<HTMLButtonElement>,
+    'onClick' | 'value'
+>;
 
-    return (
-        <DatePicker.Buttonbar>
-            <DatePicker.Today>{datePicker?.todayLabel}</DatePicker.Today>
-            <DatePicker.Clear>{datePicker?.clearLabel}</DatePicker.Clear>
-        </DatePicker.Buttonbar>
-    );
-};
+/** Stable Cratis-owned parts for styling a {@link DatePickerInput}. */
+export interface DatePickerInputPassThrough {
+    root?: DatePickerPartAttributes;
+    group?: DatePickerPartAttributes;
+    input?: DatePickerPartAttributes;
+    segment?: DatePickerPartAttributes;
+    trigger?: DatePickerButtonAttributes;
+    popover?: DatePickerPartAttributes;
+    dialog?: DatePickerPartAttributes;
+    calendar?: DatePickerPartAttributes;
+    header?: DatePickerPartAttributes;
+    heading?: DatePickerPartAttributes;
+    previous?: DatePickerButtonAttributes;
+    next?: DatePickerButtonAttributes;
+    grid?: DatePickerPartAttributes;
+    cell?: DatePickerPartAttributes;
+    buttonBar?: DatePickerPartAttributes;
+    today?: DatePickerButtonAttributes;
+    clear?: DatePickerButtonAttributes;
+}
 
 /** Props for {@link DatePickerInput}. */
 export interface DatePickerInputProps {
-    /** The selected date, or `null` when nothing is selected. */
     value: Date | null;
-    /** Invoked with the newly-selected date (or `null`). */
     onChange: (value: Date | null) => void;
-    /** Invoked when focus leaves the control. */
     onBlur?: FocusEventHandler<HTMLElement>;
-    /** Renders the control in an invalid (error) state. */
     invalid?: boolean;
-    /** Disables the date model, input and trigger. */
     disabled?: boolean;
-    /** Prevents manual input and date selection. */
     readOnly?: boolean;
-    /** DOM id applied to the rendered input element. */
     id?: string;
-    /** When true, shows the localized Today and Clear button bar in the popup. */
     showButtonBar?: boolean;
-    /** Placeholder text shown when no date is selected. */
     placeholder?: string;
-    /** PrimeReact-style date format mask (e.g. `'yy-mm-dd'`). */
+    /** Deprecated mask from the PrimeReact implementation; locale controls formatting now. */
     dateFormat?: string;
-    /** When true, renders a trailing calendar icon button. */
     showIcon?: boolean;
-    /** When true, includes time selection alongside the date. */
     showTime?: boolean;
-    /** Hour format used when {@link showTime} is true. */
     hourFormat?: '12' | '24';
-    /** Earliest selectable date. */
     minDate?: Date;
-    /** Latest selectable date. */
     maxDate?: Date;
-    /** Extra CSS class name combined with the default `w-full`. */
     className?: string;
-    /** Inline style for the wrapping element. */
     style?: CSSProperties;
-    /** PrimeReact pass-through configuration applied to the underlying DatePicker. */
+    /** Cratis-owned per-part attributes. */
     pt?: DatePickerInputPassThrough;
-    /** PrimeReact pass-through options applied to the underlying DatePicker. */
-    ptOptions?: DatePickerRootProps['ptOptions'];
-    /** When true, disables every base PrimeReact style on the underlying DatePicker. */
+    /** Retained for source compatibility; Cratis parts always merge. */
+    ptOptions?: object;
+    /** Retained for source compatibility; consumers always own the CSS. */
     unstyled?: boolean;
+    /** Localized label for the Today action. */
+    todayLabel?: string;
+    /** Localized label for the Clear action. */
+    clearLabel?: string;
+    /** Accessible name when no external label is supplied. */
+    'aria-label'?: string;
+    /** Id of the element that labels the picker. */
+    'aria-labelledby'?: string;
+    /** Id of the element that describes the picker. */
+    'aria-describedby'?: string;
 }
 
+const classNames = (...values: Array<string | undefined>) => values.filter(Boolean).join(' ');
+
+const asDateValue = (value: Date | null, showTime: boolean | undefined): DateValue | null => {
+    if (!value) return null;
+    const zoned = fromDate(value, getLocalTimeZone());
+    return showTime ? zoned : toCalendarDate(zoned);
+};
+
+const asDate = (value: DateValue | null): Date | null =>
+    value ? value.toDate(getLocalTimeZone()) : null;
+
 /**
- * A wrapper-owned date (or date-time) picker with a simple `value` / `onChange`
- * (`Date | null`) surface, assembling PrimeReact 11's compositional
- * `DatePicker` (Root owns the date model, Input is the text field, and the
- * popup Calendar/Table auto-render the grid). Shared by {@link CalendarField}
- * (the command-bound field) and other editors that need a raw date input.
- *
- * `onBlur` rides the wrapping `<div>` because React blur bubbles (focusout).
+ * An internationalized date or date-time picker with Cratis-owned markup parts.
+ * The public boundary remains `Date | null`; React Aria's calendar values stay internal.
  */
 export const DatePickerInput = ({
     value,
@@ -111,8 +133,7 @@ export const DatePickerInput = ({
     id,
     showButtonBar,
     placeholder,
-    dateFormat,
-    showIcon,
+    showIcon = false,
     showTime,
     hourFormat,
     minDate,
@@ -120,96 +141,175 @@ export const DatePickerInput = ({
     className,
     style,
     pt,
-    ptOptions,
-    unstyled,
-}: DatePickerInputProps) => (
-    <div
-        className={className ? `w-full ${className}` : 'w-full'}
-        style={style}
-        onBlur={onBlur}
-    >
-        <DatePicker.Root
-            value={value}
-            onValueChange={(e: DatePickerRootValueChangeEvent) =>
-                onChange(e.value instanceof Date ? e.value : null)
-            }
-            disabled={disabled}
-            readOnly={readOnly}
-            showOnFocus={!disabled && !readOnly}
-            dateFormat={dateFormat}
-            showTime={showTime}
-            hourFormat={hourFormat}
-            minDate={minDate}
-            maxDate={maxDate}
-            pt={pt}
-            ptOptions={ptOptions}
-            unstyled={unstyled}
+    todayLabel = 'Today',
+    clearLabel = 'Clear',
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledby,
+    'aria-describedby': ariaDescribedby,
+}: DatePickerInputProps) => {
+    const rootClassName = classNames('cratis-date-picker', pt?.root?.className, className);
+    const inputId = id ?? pt?.input?.id;
+    const effectiveDisabled = disabled ?? pt?.input?.disabled ?? false;
+    const effectiveReadOnly = readOnly ?? pt?.input?.readOnly ?? false;
+    const effectiveInvalid = invalid ?? pt?.input?.['aria-invalid'] ?? false;
+    const effectivePlaceholder = placeholder ?? pt?.input?.placeholder;
+    const effectiveAriaLabel = ariaLabel ?? pt?.input?.['aria-label'] ?? effectivePlaceholder ?? 'Date';
+    const effectiveAriaLabelledby = ariaLabelledby ?? pt?.input?.['aria-labelledby'];
+    const effectiveAriaDescribedby = ariaDescribedby ?? pt?.input?.['aria-describedby'];
+
+    return (
+        <div
+            {...pt?.root}
+            className={rootClassName}
+            style={{ ...pt?.root?.style, ...style }}
+            data-cratis-part='root'
+            data-invalid={effectiveInvalid || undefined}
+            data-disabled={effectiveDisabled || undefined}
+            data-readonly={effectiveReadOnly || undefined}
+            onBlur={onBlur}
         >
-            <DatePicker.Input
-                as={InputText}
-                {...(id === undefined ? {} : { id })}
-                {...(disabled === undefined ? {} : { disabled })}
-                {...(readOnly === undefined ? {} : { readOnly })}
-                {...(disabled || readOnly
-                    ? { onKeyDownCapture: stopDatePickerKeyboardOpening }
-                    : {})}
-                {...(placeholder === undefined ? {} : { placeholder })}
-                {...(invalid === undefined
-                    ? {}
-                    : {
-                          'aria-invalid': invalid || undefined,
-                          'data-invalid': invalid ? '' : undefined,
-                      })}
-                className='w-full'
-            />
-            {showIcon && (
-                <DatePicker.Trigger disabled={disabled || readOnly}>
-                    <i className='pi pi-calendar' />
-                </DatePicker.Trigger>
-            )}
-            <DatePicker.Portal>
-                <DatePicker.Positioner align='start'>
-                    <DatePicker.Popup>
-                        <DatePicker.Calendar>
-                            <DatePicker.Header>
-                                <DatePicker.Prev
-                                    as={Button}
-                                    iconOnly
-                                    variant='text'
-                                    rounded
-                                    severity='secondary'
-                                    size='small'
+            <AriaDatePicker
+                value={asDateValue(value, showTime)}
+                onChange={next => onChange(asDate(next))}
+                isDisabled={effectiveDisabled}
+                isReadOnly={effectiveReadOnly}
+                isInvalid={effectiveInvalid}
+                minValue={asDateValue(minDate ?? null, showTime) ?? undefined}
+                maxValue={asDateValue(maxDate ?? null, showTime) ?? undefined}
+                granularity={showTime ? 'minute' : 'day'}
+                hourCycle={hourFormat === '12' ? 12 : hourFormat === '24' ? 24 : undefined}
+                aria-label={effectiveAriaLabel}
+                aria-labelledby={effectiveAriaLabelledby}
+                aria-describedby={effectiveAriaDescribedby}
+                className='cratis-date-picker__picker'
+            >
+                <Group
+                    {...pt?.group}
+                    id={inputId}
+                    aria-invalid={effectiveInvalid || undefined}
+                    className={classNames('cratis-date-picker__group', pt?.group?.className)}
+                    data-cratis-part='group'
+                >
+                    <DateInput
+                        className={classNames('cratis-date-picker__input', pt?.input?.className)}
+                        style={pt?.input?.style}
+                        data-cratis-part='input'
+                        data-placeholder={effectivePlaceholder}
+                    >
+                        {segment => (
+                            <DateSegment
+                                {...pt?.segment}
+                                segment={segment}
+                                className={classNames('cratis-date-picker__segment', pt?.segment?.className)}
+                                data-cratis-part='segment'
+                            />
+                        )}
+                    </DateInput>
+                    {showIcon && (
+                        <Button
+                            {...pt?.trigger}
+                            isDisabled={effectiveDisabled || effectiveReadOnly}
+                            className={classNames('cratis-date-picker__trigger', pt?.trigger?.className)}
+                            data-cratis-part='trigger'
+                            aria-label={pt?.trigger?.['aria-label'] ?? 'Open calendar'}
+                        >
+                            <span aria-hidden='true'>▦</span>
+                        </Button>
+                    )}
+                </Group>
+                <Popover
+                    {...pt?.popover}
+                    className={classNames('cratis-date-picker__popover', pt?.popover?.className)}
+                    data-cratis-part='popover'
+                    placement='bottom start'
+                >
+                    <Dialog
+                        {...pt?.dialog}
+                        className={classNames('cratis-date-picker__dialog', pt?.dialog?.className)}
+                        data-cratis-part='dialog'
+                    >
+                        <Calendar
+                            {...pt?.calendar}
+                            className={classNames('cratis-date-picker__calendar', pt?.calendar?.className)}
+                            data-cratis-part='calendar'
+                        >
+                            <header
+                                {...pt?.header}
+                                className={classNames('cratis-date-picker__header', pt?.header?.className)}
+                                data-cratis-part='header'
+                            >
+                                <Button
+                                    {...pt?.previous}
+                                    slot='previous'
+                                    className={classNames('cratis-date-picker__nav', pt?.previous?.className)}
+                                    data-cratis-part='previous'
+                                    aria-label={pt?.previous?.['aria-label'] ?? 'Previous month'}
+                                >
+                                    <span aria-hidden='true'>‹</span>
+                                </Button>
+                                <Heading
+                                    {...pt?.heading}
+                                    className={classNames('cratis-date-picker__heading', pt?.heading?.className)}
+                                    data-cratis-part='heading'
+                                />
+                                <Button
+                                    {...pt?.next}
+                                    slot='next'
+                                    className={classNames('cratis-date-picker__nav', pt?.next?.className)}
+                                    data-cratis-part='next'
+                                    aria-label={pt?.next?.['aria-label'] ?? 'Next month'}
                                 >
-                                    <i className='pi pi-chevron-left' />
-                                </DatePicker.Prev>
-                                <DatePicker.Title>
-                                    <DatePicker.SelectMonth />
-                                    <DatePicker.SelectYear />
-                                    <DatePicker.Decade />
-                                </DatePicker.Title>
-                                <DatePicker.Next
-                                    as={Button}
-                                    iconOnly
-                                    variant='text'
-                                    rounded
-                                    severity='secondary'
-                                    size='small'
+                                    <span aria-hidden='true'>›</span>
+                                </Button>
+                            </header>
+                            <CalendarGrid
+                                className={classNames('cratis-date-picker__grid', pt?.grid?.className)}
+                                data-cratis-part='grid'
+                            >
+                                <CalendarGridHeader>
+                                    {day => <CalendarHeaderCell>{day}</CalendarHeaderCell>}
+                                </CalendarGridHeader>
+                                <CalendarGridBody>
+                                    {date => (
+                                        <CalendarCell
+                                            {...pt?.cell}
+                                            date={date}
+                                            className={classNames('cratis-date-picker__cell', pt?.cell?.className)}
+                                            data-cratis-part='cell'
+                                        />
+                                    )}
+                                </CalendarGridBody>
+                            </CalendarGrid>
+                        </Calendar>
+                        {showButtonBar && (
+                            <div
+                                {...pt?.buttonBar}
+                                className={classNames('cratis-date-picker__button-bar', pt?.buttonBar?.className)}
+                                data-cratis-part='button-bar'
+                            >
+                                <button
+                                    {...pt?.today}
+                                    type='button'
+                                    className={classNames('cratis-date-picker__action', pt?.today?.className)}
+                                    data-cratis-part='today'
+                                    onClick={() => onChange(today(getLocalTimeZone()).toDate(getLocalTimeZone()))}
                                 >
-                                    <i className='pi pi-chevron-right' />
-                                </DatePicker.Next>
-                            </DatePicker.Header>
-                            <DatePicker.Table>
-                                <DatePicker.TableHead />
-                                <DatePicker.TableBody />
-                                <DatePicker.TableBody view='month' />
-                                <DatePicker.TableBody view='year' />
-                            </DatePicker.Table>
-                        </DatePicker.Calendar>
-                        {showTime && <DatePicker.Time />}
-                        {showButtonBar && <DatePickerInputButtonBar />}
-                    </DatePicker.Popup>
-                </DatePicker.Positioner>
-            </DatePicker.Portal>
-        </DatePicker.Root>
-    </div>
-);
+                                    {todayLabel}
+                                </button>
+                                <button
+                                    {...pt?.clear}
+                                    type='button'
+                                    className={classNames('cratis-date-picker__action', pt?.clear?.className)}
+                                    data-cratis-part='clear'
+                                    onClick={() => onChange(null)}
+                                >
+                                    {clearLabel}
+                                </button>
+                            </div>
+                        )}
+                    </Dialog>
+                </Popover>
+            </AriaDatePicker>
+        </div>
+    );
+};
diff --git a/Source/Common/for_DatePickerInput/when_configuring_input_pass_through.tsx b/Source/Common/for_DatePickerInput/when_configuring_input_pass_through.tsx
index 124d4d7a..ef46fd9c 100644
--- a/Source/Common/for_DatePickerInput/when_configuring_input_pass_through.tsx
+++ b/Source/Common/for_DatePickerInput/when_configuring_input_pass_through.tsx
@@ -13,10 +13,12 @@ import { DatePickerInput } from '../DatePickerInput';
 describe('when configuring input pass-through', () => {
     let container: HTMLDivElement;
     let root: Root;
-    let input: HTMLInputElement;
+    let group: HTMLElement;
+    let dateInput: HTMLElement;
+    let pickerRoot: HTMLElement;
 
     beforeEach(async () => {
-        // SAFETY: React's test-environment flag is an intentionally undocumented global absent from the DOM typings.
+        // SAFETY: React's test-environment flag is an intentionally undocumented global absent from DOM typings.
         (
             globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
         ).IS_REACT_ACT_ENVIRONMENT = true;
@@ -45,13 +47,15 @@ describe('when configuring input pass-through', () => {
             );
         });
 
-        const renderedInput = container.querySelector<HTMLInputElement>(
-            '[data-scope="datepicker"][data-part="input"]',
-        );
-        if (!renderedInput) {
-            throw new Error('DatePickerInput did not render its input element.');
+        const renderedRoot = container.querySelector<HTMLElement>('[data-cratis-part="root"]');
+        const renderedGroup = container.querySelector<HTMLElement>('[data-cratis-part="group"]');
+        const renderedInput = container.querySelector<HTMLElement>('[data-cratis-part="input"]');
+        if (!renderedRoot || !renderedGroup || !renderedInput) {
+            throw new Error('DatePickerInput did not render its stable Cratis parts.');
         }
-        input = renderedInput;
+        pickerRoot = renderedRoot;
+        group = renderedGroup;
+        dateInput = renderedInput;
     });
 
     afterEach(async () => {
@@ -59,27 +63,27 @@ describe('when configuring input pass-through', () => {
         container.remove();
     });
 
-    it('should set the input id', () => {
-        expect(input.id).to.equal('appointment-date');
+    it('should set the group id', () => {
+        expect(group.id).to.equal('appointment-date');
     });
 
     it('should set the accessible name', () => {
-        expect(input.getAttribute('aria-label')).to.equal('Appointment date');
+        expect(group.getAttribute('aria-label')).to.equal('Appointment date');
     });
 
     it('should set the description reference', () => {
-        expect(input.getAttribute('aria-describedby')).to.equal('appointment-date-help');
+        expect(group.getAttribute('aria-describedby')).to.equal('appointment-date-help');
     });
 
     it('should preserve pass-through invalid state when the wrapper prop is omitted', () => {
-        expect(input.getAttribute('aria-invalid')).to.equal('true');
+        expect(pickerRoot.getAttribute('data-invalid')).to.equal('true');
     });
 
-    it('should disable the input', () => {
-        expect(input.disabled).to.equal(true);
+    it('should disable the picker', () => {
+        expect(pickerRoot.getAttribute('data-disabled')).to.equal('true');
     });
 
     it('should preserve the pass-through placeholder when the wrapper prop is omitted', () => {
-        expect(input.placeholder).to.equal('Pass-through placeholder');
+        expect(dateInput.getAttribute('data-placeholder')).to.equal('Pass-through placeholder');
     });
 });
diff --git a/Source/Common/for_DatePickerInput/when_configuring_standard_props.tsx b/Source/Common/for_DatePickerInput/when_configuring_standard_props.tsx
index 8b4ae886..cebf56cd 100644
--- a/Source/Common/for_DatePickerInput/when_configuring_standard_props.tsx
+++ b/Source/Common/for_DatePickerInput/when_configuring_standard_props.tsx
@@ -3,15 +3,11 @@
 
 // @vitest-environment jsdom
 
-import { en } from '@primereact/core/locale';
 import { expect } from 'chai';
 import { act } from 'react';
 import { createRoot, type Root } from 'react-dom/client';
 import { describe, it } from 'vitest';
-import {
-    CratisComponentsProvider,
-    type CratisComponentsConfig,
-} from '../CratisComponentsProvider';
+import { CratisComponentsProvider } from '../CratisComponentsProvider';
 import { DatePickerInput, type DatePickerInputProps } from '../DatePickerInput';
 
 type DatePickerOptions = Partial<Omit<DatePickerInputProps, 'value' | 'onChange'>> & {
@@ -21,29 +17,21 @@ type DatePickerOptions = Partial<Omit<DatePickerInputProps, 'value' | 'onChange'
 interface MountedDatePicker {
     container: HTMLDivElement;
     root: Root;
-    input: HTMLInputElement;
+    pickerRoot: HTMLElement;
+    group: HTMLElement;
     trigger: HTMLButtonElement;
 }
 
-const mountDatePicker = async (
-    options: DatePickerOptions,
-    configuration?: CratisComponentsConfig,
-): Promise<MountedDatePicker> => {
-    // SAFETY: React's test-environment flag is an intentionally undocumented global absent from the DOM typings.
+const mountDatePicker = async (options: DatePickerOptions): Promise<MountedDatePicker> => {
+    // SAFETY: React's test-environment flag is an intentionally undocumented global absent from DOM typings.
     (
         globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
     ).IS_REACT_ACT_ENVIRONMENT = true;
-    // SAFETY: jsdom omits ResizeObserver, while PrimeReact only calls its three observer methods.
+    // SAFETY: jsdom omits ResizeObserver; the overlay only calls these observer methods.
     (globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver ??= class {
-        observe() {
-            return undefined;
-        }
-        unobserve() {
-            return undefined;
-        }
-        disconnect() {
-            return undefined;
-        }
+        observe() { return undefined; }
+        unobserve() { return undefined; }
+        disconnect() { return undefined; }
     };
     const container = document.createElement('div');
     document.body.append(container);
@@ -51,28 +39,26 @@ const mountDatePicker = async (
 
     await act(async () => {
         root.render(
-            <CratisComponentsProvider value={configuration}>
+            <CratisComponentsProvider>
                 <DatePickerInput
                     value={options.value ?? null}
                     onChange={() => undefined}
                     showIcon
+                    aria-label='Appointment date'
                     {...options}
                 />
             </CratisComponentsProvider>,
         );
     });
 
-    const input = container.querySelector<HTMLInputElement>(
-        '[data-scope="datepicker"][data-part="input"]',
-    );
-    const trigger = container.querySelector<HTMLButtonElement>(
-        '[data-scope="datepicker"][data-part="trigger"]',
-    );
-    if (!input || !trigger) {
-        throw new Error('DatePickerInput did not render its input and trigger.');
+    const pickerRoot = container.querySelector<HTMLElement>('[data-cratis-part="root"]');
+    const group = container.querySelector<HTMLElement>('[data-cratis-part="group"]');
+    const trigger = container.querySelector<HTMLButtonElement>('[data-cratis-part="trigger"]');
+    if (!pickerRoot || !group || !trigger) {
+        throw new Error('DatePickerInput did not render its stable Cratis parts.');
     }
 
-    return { container, root, input, trigger };
+    return { container, root, pickerRoot, group, trigger };
 };
 
 const unmountDatePicker = async (mounted: MountedDatePicker) => {
@@ -80,33 +66,24 @@ const unmountDatePicker = async (mounted: MountedDatePicker) => {
     mounted.container.remove();
 };
 
-const popup = () =>
-    document.querySelector('[data-scope="datepicker"][data-part="popup"]');
+const popup = () => document.querySelector('[data-cratis-part="popover"]');
 
 describe('when configuring standard DatePickerInput props', () => {
-    it('should put the id directly on the input', async () => {
+    it('should put the id directly on the focus group', async () => {
         const mounted = await mountDatePicker({ id: 'appointment-date' });
         try {
-            expect(mounted.input.id).to.equal('appointment-date');
+            expect(mounted.group.id).to.equal('appointment-date');
         } finally {
             await unmountDatePicker(mounted);
         }
     });
 
-    it('should disable the model and prevent keyboard activation', async () => {
+    it('should disable the model and trigger', async () => {
         const mounted = await mountDatePicker({ disabled: true });
         try {
-            expect(mounted.input.disabled).to.equal(true);
+            expect(mounted.pickerRoot.getAttribute('data-disabled')).to.equal('true');
             expect(mounted.trigger.disabled).to.equal(true);
-            await act(async () => {
-                mounted.input.dispatchEvent(
-                    new KeyboardEvent('keydown', {
-                        bubbles: true,
-                        code: 'ArrowDown',
-                        key: 'ArrowDown',
-                    }),
-                );
-            });
+            await act(async () => mounted.trigger.click());
             expect(popup()).to.equal(null);
         } finally {
             await unmountDatePicker(mounted);
@@ -116,19 +93,9 @@ describe('when configuring standard DatePickerInput props', () => {
     it('should make the date model read-only', async () => {
         const mounted = await mountDatePicker({ readOnly: true });
         try {
-            expect(mounted.input.readOnly).to.equal(true);
+            expect(mounted.pickerRoot.getAttribute('data-readonly')).to.equal('true');
             expect(mounted.trigger.disabled).to.equal(true);
-            await act(async () => {
-                mounted.input.focus();
-                mounted.input.click();
-                mounted.input.dispatchEvent(
-                    new KeyboardEvent('keydown', {
-                        bubbles: true,
-                        code: 'ArrowDown',
-                        key: 'ArrowDown',
-                    }),
-                );
-            });
+            await act(async () => mounted.trigger.click());
             expect(popup()).to.equal(null);
         } finally {
             await unmountDatePicker(mounted);
@@ -136,27 +103,15 @@ describe('when configuring standard DatePickerInput props', () => {
     });
 
     it('should render the localized button bar', async () => {
-        const mounted = await mountDatePicker(
-            {
-                showButtonBar: true,
-                value: new Date(2026, 7, 22),
-            },
-            {
-                locale: 'test',
-                locales: {
-                    test: {
-                        ...en,
-                        today: 'Translated today',
-                        clear: 'Translated clear',
-                    },
-                },
-            },
-        );
+        const mounted = await mountDatePicker({
+            showButtonBar: true,
+            value: new Date(2026, 7, 22),
+            todayLabel: 'Translated today',
+            clearLabel: 'Translated clear',
+        });
         try {
             await act(async () => mounted.trigger.click());
-            const buttonBar = document.querySelector(
-                '[data-scope="datepicker"][data-part="buttonbar"]',
-            );
+            const buttonBar = document.querySelector('[data-cratis-part="button-bar"]');
             expect(buttonBar?.textContent).to.contain('Translated today');
             expect(buttonBar?.textContent).to.contain('Translated clear');
         } finally {
diff --git a/Source/Common/for_DatePickerInput/when_rendering_invalid_state.tsx b/Source/Common/for_DatePickerInput/when_rendering_invalid_state.tsx
index c3117cd1..9609fdc6 100644
--- a/Source/Common/for_DatePickerInput/when_rendering_invalid_state.tsx
+++ b/Source/Common/for_DatePickerInput/when_rendering_invalid_state.tsx
@@ -14,7 +14,8 @@ import { DatePickerInput } from '../DatePickerInput';
     describe(`when rendering with invalid set to ${invalid}`, () => {
         let container: HTMLDivElement;
         let root: Root;
-        let input: HTMLInputElement;
+        let pickerRoot: HTMLElement;
+        let group: HTMLElement;
         let errorSpy: ReturnType<typeof vi.spyOn>;
 
         beforeEach(async () => {
@@ -39,13 +40,13 @@ import { DatePickerInput } from '../DatePickerInput';
                 );
             });
 
-            const renderedInput = container.querySelector<HTMLInputElement>(
-                '[data-scope="datepicker"][data-part="input"]',
-            );
-            if (!renderedInput) {
-                throw new Error('DatePickerInput did not render its input element.');
+            const renderedRoot = container.querySelector<HTMLElement>('[data-cratis-part="root"]');
+            const renderedGroup = container.querySelector<HTMLElement>('[data-cratis-part="group"]');
+            if (!renderedRoot || !renderedGroup) {
+                throw new Error('DatePickerInput did not render its stable Cratis parts.');
             }
-            input = renderedInput;
+            pickerRoot = renderedRoot;
+            group = renderedGroup;
         });
 
         afterEach(async () => {
@@ -59,8 +60,8 @@ import { DatePickerInput } from '../DatePickerInput';
         });
 
         it('should represent the invalid state through accepted input attributes', () => {
-            expect(input.getAttribute('aria-invalid')).to.equal(invalid ? 'true' : null);
-            expect(input.hasAttribute('data-invalid')).to.equal(invalid);
+            expect(group.getAttribute('aria-invalid')).to.equal(invalid ? 'true' : null);
+            expect(pickerRoot.hasAttribute('data-invalid')).to.equal(invalid);
         });
     });
 });
diff --git a/Source/styles.css b/Source/styles.css
index 6d95deb6..a0caa9ed 100644
--- a/Source/styles.css
+++ b/Source/styles.css
@@ -32,6 +32,7 @@
 @import './CommandDialog/CommandStepper.css';
 @import './Common/ActionMenubar.css';
 @import './Common/Button.css';
+@import './Common/DatePickerInput.css';
 @import './Common/FormElement.css';
 @import './Common/Tooltip.css';
 @import './DataTables/ColumnFilterMenu.css';

From c758ebfe1095bec89b4adb93a7393f49c461c5d6 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Sun, 23 Aug 2026 02:54:12 +0200
Subject: [PATCH 007/267] Rebuild Dialog on React Aria

---
 ...ng_with_close_dialog_and_command_result.ts |  62 +-
 .../when_dismissal_is_configured.ts           |  12 +-
 .../when_initial_focus_is_specified.ts        |  10 +-
 .../when_validity_is_gated.ts                 |  30 +-
 Source/Dialogs/Dialog.css                     |  81 +++
 Source/Dialogs/Dialog.tsx                     | 622 ++++++------------
 .../for_BusyIndicatorDialog/when_shown.ts     |   2 +-
 .../for_Dialog/given/a_dialog_in_the_dom.ts   |  29 +-
 ...confirming_with_close_dialog_and_result.ts |  76 +--
 .../when_initial_focus_is_cancel.ts           |   4 +-
 .../when_initial_focus_is_content.ts          |   4 +-
 .../when_rendering_footer_buttons.tsx         |  13 +-
 Source/styles.css                             |   1 +
 13 files changed, 385 insertions(+), 561 deletions(-)
 create mode 100644 Source/Dialogs/Dialog.css

diff --git a/Source/CommandDialog/for_CommandDialog/when_confirming_with_close_dialog_and_command_result.ts b/Source/CommandDialog/for_CommandDialog/when_confirming_with_close_dialog_and_command_result.ts
index 030af9eb..ab64c1d6 100644
--- a/Source/CommandDialog/for_CommandDialog/when_confirming_with_close_dialog_and_command_result.ts
+++ b/Source/CommandDialog/for_CommandDialog/when_confirming_with_close_dialog_and_command_result.ts
@@ -1,10 +1,18 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
+// @vitest-environment jsdom
+
+import { expect } from 'chai';
 import React from 'react';
-import { renderToStaticMarkup } from 'react-dom/server';
 import { vi } from 'vitest';
 import { DialogResult, useDialogContext } from '@cratis/arc.react/dialogs';
+import {
+    click,
+    render,
+    unmount,
+    type DialogInTheDom,
+} from '../../Dialogs/for_Dialog/given/a_dialog_in_the_dom';
 import { CommandDialog } from '../CommandDialog';
 
 const { closeDialog, commandResult } = vi.hoisted(() => ({
@@ -16,31 +24,6 @@ const { closeDialog, commandResult } = vi.hoisted(() => ({
     },
 }));
 
-vi.mock('primereact/dialog', () => {
-    // PrimeReact 11's Dialog is compositional; each part is a pass-through that
-    // renders its children so the footer buttons and content reach the markup.
-    const part = (props: { children?: React.ReactNode }) => React.createElement('div', null, props.children);
-    return {
-        Dialog: {
-            Root: part, Portal: part, Backdrop: part, Positioner: part, Popup: part,
-            Header: part, Title: part, Close: part, Content: part, Footer: part,
-        },
-    };
-});
-
-vi.mock('primereact/button', () => ({
-    // PrimeReact 11 Button renders children (the v10 label/icon props are gone), and the
-    // dialog marks the button its focus trap should land on with `data-autofocus` rather
-    // than React's autoFocus prop. That marker identifies the confirm button, whose click
-    // this SSR render stands in for.
-    Button: (props: { 'data-autofocus'?: string; onClick?: () => Promise<void> | void; disabled?: boolean; children?: React.ReactNode }) => {
-        if (props['data-autofocus'] !== undefined && props.onClick) {
-            void props.onClick();
-        }
-        return React.createElement('button', { disabled: props.disabled }, props.children);
-    },
-}));
-
 vi.mock('@cratis/arc.react/dialogs', () => ({
     DialogButtons: { Ok: 1, OkCancel: 2, YesNo: 3, YesNoCancel: 4 },
     DialogResult: { None: 0, Yes: 1, No: 2, Ok: 3, Cancelled: 4 },
@@ -52,12 +35,10 @@ vi.mock('@cratis/arc.react/commands', () => ({
         React.createElement('div', null, props.children),
     useCommandFormContext: () => ({
         isValid: true,
-        setCommandValues: () => {},
-        setCommandResult: () => {},
-    }),
-    useCommandInstance: () => ({
-        execute: async () => commandResult,
+        setCommandValues: () => undefined,
+        setCommandResult: () => undefined,
     }),
+    useCommandInstance: () => ({ execute: async () => commandResult }),
     CommandFormFieldWrapper: (props: { field?: React.ReactNode }) =>
         React.createElement('div', null, props.field),
 }));
@@ -78,16 +59,19 @@ const TestDialog = () => {
 };
 
 describe('when confirming with close dialog and command result', () => {
-    beforeEach(() => {
+    let dialog: DialogInTheDom;
+
+    beforeEach(async () => {
         closeDialog.mockReset();
-        renderToStaticMarkup(React.createElement(TestDialog));
+        dialog = await render(React.createElement(TestDialog));
+        await click('Ok');
     });
 
-    it('should_close_once_with_ok_and_the_command_result', () => {
-        if (closeDialog.mock.calls.length !== 1) {
-            throw new Error(`Expected one closeDialog call, got ${closeDialog.mock.calls.length}`);
-        }
-        closeDialog.mock.calls[0][0].should.equal(3);
-        closeDialog.mock.calls[0][1].should.equal(commandResult);
+    afterEach(async () => unmount(dialog));
+
+    it('should close once with ok and the command result', () => {
+        expect(closeDialog.mock.calls).to.have.lengthOf(1);
+        expect(closeDialog.mock.calls[0][0]).to.equal(3);
+        expect(closeDialog.mock.calls[0][1]).to.equal(commandResult);
     });
 });
diff --git a/Source/CommandDialog/for_CommandDialog/when_dismissal_is_configured.ts b/Source/CommandDialog/for_CommandDialog/when_dismissal_is_configured.ts
index e5c7cbe9..316b67b6 100644
--- a/Source/CommandDialog/for_CommandDialog/when_dismissal_is_configured.ts
+++ b/Source/CommandDialog/for_CommandDialog/when_dismissal_is_configured.ts
@@ -2,6 +2,7 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 // @vitest-environment jsdom
 
+import { expect } from 'chai';
 import React from 'react';
 import { act } from 'react';
 import { createRoot, type Root } from 'react-dom/client';
@@ -43,7 +44,9 @@ describe('when dismissal is configured on a command dialog', () => {
     let container: HTMLDivElement;
 
     const render = async (props: { dismissable?: boolean; closeAriaLabel?: string; buttons?: React.ReactNode }) => {
+        // SAFETY: React's test-environment flag is an intentionally undocumented global absent from DOM typings.
         (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+        // SAFETY: jsdom omits ResizeObserver; the overlay only calls these observer methods.
         (globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver ??= class {
             observe() { } unobserve() { } disconnect() { }
         };
@@ -53,6 +56,7 @@ describe('when dismissal is configured on a command dialog', () => {
         root = createRoot(container);
 
         await act(async () => {
+            // SAFETY: The generated command proxy constructor is erased by this test harness only.
             root.render(React.createElement(CratisComponentsProvider, null,
                 React.createElement(CommandDialog<TestCommand>, {
                     command: TestCommand as unknown as new () => object,
@@ -65,7 +69,7 @@ describe('when dismissal is configured on a command dialog', () => {
         await act(async () => { await new Promise(resolve => setTimeout(resolve, 300)); });
     };
 
-    const closeButton = () => document.querySelector('[data-scope="dialog"][data-part="close"]');
+    const closeButton = () => document.querySelector('[data-cratis-part="close"]');
 
     afterEach(async () => {
         await act(async () => { root.unmount(); });
@@ -75,18 +79,18 @@ describe('when dismissal is configured on a command dialog', () => {
     it('should forward dismissable so a custom footer can keep its close button', async () => {
         await render({ buttons: React.createElement('button', { type: 'button' }, 'Go'), dismissable: true });
 
-        (!!closeButton()).should.be.true;
+        expect(Boolean(closeButton())).to.equal(true);
     });
 
     it('should forward dismissable so a dialog can withdraw its close button', async () => {
         await render({ dismissable: false });
 
-        (!!closeButton()).should.be.false;
+        expect(Boolean(closeButton())).to.equal(false);
     });
 
     it('should forward closeAriaLabel to the close button', async () => {
         await render({ dismissable: true, closeAriaLabel: 'Lukk' });
 
-        closeButton()!.getAttribute('aria-label')!.should.equal('Lukk');
+        expect(closeButton()?.getAttribute('aria-label')).to.equal('Lukk');
     });
 });
diff --git a/Source/CommandDialog/for_CommandDialog/when_initial_focus_is_specified.ts b/Source/CommandDialog/for_CommandDialog/when_initial_focus_is_specified.ts
index 36d8343b..e3d7c995 100644
--- a/Source/CommandDialog/for_CommandDialog/when_initial_focus_is_specified.ts
+++ b/Source/CommandDialog/for_CommandDialog/when_initial_focus_is_specified.ts
@@ -2,6 +2,7 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 // @vitest-environment jsdom
 
+import { expect } from 'chai';
 import React from 'react';
 import { vi } from 'vitest';
 import { DialogInitialFocus } from '../../Dialogs/DialogInitialFocus';
@@ -38,6 +39,7 @@ describe('when a command dialog is given an initial focus', () => {
 
         const { CommandDialog } = await import('../CommandDialog');
 
+        // SAFETY: The generated command proxy constructor is erased by this test harness only.
         dialog = await render(React.createElement(CommandDialog, {
             command: DeletePersonalData as unknown as new () => object,
             title: 'Delete personal data',
@@ -65,7 +67,7 @@ describe('when a command dialog is given an initial focus', () => {
     it('should forward a request to focus the content', async () => {
         await renderDialog(DialogInitialFocus.Content);
 
-        focusedElement().should.equal('span:Delete personal data');
+        focusedElement().should.equal('h2:Delete personal data');
     });
 
     it('should not run the command on an Enter that repeats onto the freshly mounted dialog', async () => {
@@ -73,7 +75,7 @@ describe('when a command dialog is given an initial focus', () => {
 
         await pressEnterOnFocusedElement();
 
-        executeCommand.should.not.have.been.called;
+        expect(executeCommand.mock.calls).to.have.lengthOf(0);
     });
 
     it('should still run the command when the user deliberately confirms', async () => {
@@ -81,7 +83,7 @@ describe('when a command dialog is given an initial focus', () => {
 
         await click('Ok');
 
-        executeCommand.should.have.been.calledOnce;
-        succeeded.should.have.been.calledOnce;
+        expect(executeCommand.mock.calls).to.have.lengthOf(1);
+        expect(succeeded.mock.calls).to.have.lengthOf(1);
     });
 });
diff --git a/Source/CommandDialog/for_CommandDialog/when_validity_is_gated.ts b/Source/CommandDialog/for_CommandDialog/when_validity_is_gated.ts
index ce532495..482d34b6 100644
--- a/Source/CommandDialog/for_CommandDialog/when_validity_is_gated.ts
+++ b/Source/CommandDialog/for_CommandDialog/when_validity_is_gated.ts
@@ -1,6 +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 { expect } from 'chai';
 import React from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { vi } from 'vitest';
@@ -76,6 +77,7 @@ describe('when CommandDialog validity is gated', () => {
 
     const renderDialog = (props?: { isValid?: boolean; onBeforeExecute?: (values: TestCommand) => TestCommand }) => renderToStaticMarkup(
         React.createElement(CommandDialog, {
+            // SAFETY: The generated command proxy constructor is erased by this SSR harness only.
             command: TestCommand as unknown as new () => object,
             visible: true,
             title: 'Test Dialog',
@@ -96,8 +98,8 @@ describe('when CommandDialog validity is gated', () => {
 
         const html = renderDialog();
 
-        getOkButton(html).should.include('disabled');
-        executeCommand.should.not.have.been.called;
+        expect(getOkButton(html)).to.include('disabled');
+        expect(executeCommand.mock.calls).to.have.lengthOf(0);
     });
 
     it('should_not_allow_isValid_true_to_override_invalid_command_form_state', () => {
@@ -108,9 +110,9 @@ describe('when CommandDialog validity is gated', () => {
             onBeforeExecute: () => ({ name: 'External value' })
         });
 
-        getOkButton(html).should.include('disabled');
-        setCommandValues.should.not.have.been.called;
-        executeCommand.should.not.have.been.called;
+        expect(getOkButton(html)).to.include('disabled');
+        expect(setCommandValues.mock.calls).to.have.lengthOf(0);
+        expect(executeCommand.mock.calls).to.have.lengthOf(0);
     });
 
     it('should_allow_isValid_false_to_disable_an_internally_valid_form', () => {
@@ -118,20 +120,20 @@ describe('when CommandDialog validity is gated', () => {
 
         const html = renderDialog({ isValid: false });
 
-        getOkButton(html).should.include('disabled');
-        executeCommand.should.not.have.been.called;
+        expect(getOkButton(html)).to.include('disabled');
+        expect(executeCommand.mock.calls).to.have.lengthOf(0);
     });
 
-    it('should_execute_when_command_form_is_valid_and_isValid_is_not_provided', () => {
+    it('should_enable_confirm_when_command_form_is_valid_and_isValid_is_not_provided', () => {
         commandFormValidity.isValid = true;
 
         const html = renderDialog();
 
-        getOkButton(html).should.not.include('disabled');
-        executeCommand.should.have.been.calledOnce;
+        expect(getOkButton(html)).not.to.include('disabled');
+        expect(executeCommand.mock.calls).to.have.lengthOf(0);
     });
 
-    it('should_execute_when_command_form_is_valid_and_isValid_is_true', () => {
+    it('should_enable_confirm_when_command_form_is_valid_and_isValid_is_true', () => {
         commandFormValidity.isValid = true;
 
         const html = renderDialog({
@@ -139,8 +141,8 @@ describe('when CommandDialog validity is gated', () => {
             onBeforeExecute: () => ({ name: 'External value' })
         });
 
-        getOkButton(html).should.not.include('disabled');
-        setCommandValues.should.have.been.calledOnceWith({ name: 'External value' });
-        executeCommand.should.have.been.calledOnce;
+        expect(getOkButton(html)).not.to.include('disabled');
+        expect(setCommandValues.mock.calls).to.have.lengthOf(0);
+        expect(executeCommand.mock.calls).to.have.lengthOf(0);
     });
 });
diff --git a/Source/Dialogs/Dialog.css b/Source/Dialogs/Dialog.css
new file mode 100644
index 00000000..b0577fff
--- /dev/null
+++ b/Source/Dialogs/Dialog.css
@@ -0,0 +1,81 @@
+/* Copyright (c) Cratis. All rights reserved. */
+/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */
+
+.cratis-dialog__backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 1100;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+    background: var(--cratis-maskbg);
+}
+.cratis-dialog__backdrop[data-entering] { animation: cratis-dialog-fade 160ms ease-out; }
+.cratis-dialog__backdrop[data-exiting] { animation: cratis-dialog-fade 120ms reverse ease-in; }
+.cratis-dialog__positioner { display: flex; max-width: 100%; max-height: 100%; align-items: center; justify-content: center; }
+.cratis-dialog {
+    display: flex;
+    max-width: min(100%, calc(100vw - 2rem));
+    max-height: min(90vh, calc(100vh - 2rem));
+    overflow: hidden;
+    flex-direction: column;
+    border: 1px solid var(--cratis-surface-border);
+    border-radius: calc(var(--cratis-border-radius) * 1.5);
+    background: var(--cratis-surface-overlay);
+    color: var(--cratis-text-color);
+    box-shadow: 0 1rem 3rem color-mix(in srgb, var(--cratis-text-color) 22%, transparent);
+    outline: none;
+}
+.cratis-dialog__document { display: flex; min-height: 0; flex: 1; flex-direction: column; outline: none; }
+.cratis-dialog__header { display: flex; padding: 1rem 1.25rem; align-items: center; justify-content: space-between; gap: 1rem; flex: 0 0 auto; border-bottom: 1px solid var(--cratis-surface-border); }
+.cratis-dialog__title { margin: 0; font-size: 1.1rem; font-weight: 700; outline: none; }
+.cratis-dialog__title:focus-visible { border-radius: var(--cratis-border-radius); box-shadow: var(--cratis-focus-ring); }
+.cratis-dialog__close {
+    display: inline-flex;
+    width: 2rem;
+    height: 2rem;
+    padding: 0;
+    align-items: center;
+    justify-content: center;
+    border: 0;
+    border-radius: 50%;
+    background: transparent;
+    color: var(--cratis-text-color-secondary);
+    font-size: 1.25rem;
+    cursor: pointer;
+}
+.cratis-dialog__close:hover { background: var(--cratis-surface-hover); color: var(--cratis-text-color); }
+.cratis-dialog__close:focus-visible { outline: none; box-shadow: var(--cratis-focus-ring); }
+.cratis-dialog__content { min-height: 0; padding: 1.25rem; overflow: auto; flex: 1 1 auto; }
+.cratis-dialog__footer { display: flex; padding: 0.9rem 1.25rem; justify-content: flex-start; flex-wrap: wrap; gap: 0.75rem; flex: 0 0 auto; border-top: 1px solid var(--cratis-surface-border); }
+.cratis-dialog__button {
+    display: inline-flex;
+    min-height: 2.25rem;
+    padding: 0.5rem 0.85rem;
+    align-items: center;
+    justify-content: center;
+    gap: 0.45rem;
+    border: 1px solid var(--cratis-primary-color);
+    border-radius: var(--cratis-border-radius);
+    font: inherit;
+    font-weight: 600;
+    cursor: pointer;
+}
+.cratis-dialog__button--primary { background: var(--cratis-primary-color); color: var(--cratis-primary-color-text); }
+.cratis-dialog__button--secondary { background: transparent; color: var(--cratis-primary-color); }
+.cratis-dialog__button:focus-visible { outline: none; box-shadow: var(--cratis-focus-ring); }
+.cratis-dialog__button:disabled { cursor: not-allowed; opacity: 0.55; }
+.cratis-dialog__spinner { width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: cratis-dialog-spin 700ms linear infinite; }
+
+@keyframes cratis-dialog-fade { from { opacity: 0; } to { opacity: 1; } }
+@keyframes cratis-dialog-spin { to { transform: rotate(360deg); } }
+
+@media (prefers-reduced-motion: reduce) {
+    .cratis-dialog__backdrop, .cratis-dialog__spinner { animation: none; }
+}
+
+@media (forced-colors: active) {
+    .cratis-dialog, .cratis-dialog__button { border-color: CanvasText; }
+    .cratis-dialog__close:focus-visible, .cratis-dialog__button:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; box-shadow: none; }
+}
diff --git a/Source/Dialogs/Dialog.tsx b/Source/Dialogs/Dialog.tsx
index 4bf7cbba..e444c4a1 100644
--- a/Source/Dialogs/Dialog.tsx
+++ b/Source/Dialogs/Dialog.tsx
@@ -1,283 +1,93 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { Dialog as PrimeDialog } from 'primereact/dialog';
-import type {
-    DialogRootProps,
-    DialogRootChangeEvent,
-} from '@primereact/types/primitive/dialog';
-import { Button } from 'primereact/button';
 import { DialogResult, DialogButtons, useDialogContext } from '@cratis/arc.react/dialogs';
+import {
+    Dialog as AriaDialog,
+    Heading,
+} from 'react-aria-components/Dialog';
+import { Modal, ModalOverlay } from 'react-aria-components/Modal';
+import type {
+    ButtonHTMLAttributes,
+    CSSProperties,
+    ReactNode,
+} from 'react';
+import { useEffect, useRef } from 'react';
 import { DialogInitialFocus } from './DialogInitialFocus';
-import type { CSSProperties, ReactNode } from 'react';
 
-/**
- * Callback used by {@link Dialog} (and its wrappers) when the dialog is about to
- * close. Returning `false` (sync or via promise) keeps the dialog open — useful
- * for confirming or surfacing an error to the user before letting it close.
- */
 export type CloseDialog = (
     result: DialogResult,
 ) => boolean | void | Promise<boolean> | Promise<void>;
 
-/**
- * Callback invoked when the user activates the confirm action (Ok / Yes).
- * Return `false` (sync or via promise) to keep the dialog open after the
- * confirm callback completes.
- */
 export type ConfirmCallback = () => boolean | void | Promise<boolean> | Promise<void>;
-
-/**
- * Callback invoked when the user activates the cancel / dismiss action.
- * Return `false` to keep the dialog open after the cancel callback completes.
- */
 export type CancelCallback = () => boolean | void | Promise<boolean> | Promise<void>;
 
-/**
- * Props for {@link Dialog}.
- */
+interface DialogPartAttributes {
+    id?: string;
+    className?: string;
+    style?: CSSProperties;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    [attribute: `data-${string}`]: string | number | boolean | undefined;
+}
+
+type DialogButtonAttributes = Omit<
+    ButtonHTMLAttributes<HTMLButtonElement>,
+    'onClick' | 'value'
+>;
+
+/** Stable Cratis-owned parts for styling a {@link Dialog}. */
+export interface DialogParts {
+    backdrop?: DialogPartAttributes;
+    positioner?: DialogPartAttributes;
+    root?: DialogPartAttributes;
+    header?: DialogPartAttributes;
+    title?: DialogPartAttributes;
+    close?: DialogButtonAttributes;
+    content?: DialogPartAttributes;
+    footer?: DialogPartAttributes;
+    confirm?: DialogButtonAttributes;
+    cancel?: DialogButtonAttributes;
+}
+
+/** Props for {@link Dialog}. */
 export interface DialogProps {
-    /** Header text shown at the top of the dialog. */
     title: string;
-
-    /** Controls visibility. Defaults to `true`; set to `false` to hide without unmounting. */
     visible?: boolean;
-
-    /**
-     * Catch-all close callback invoked for both confirm and cancel paths when no
-     * matching {@link onConfirm} / {@link onCancel} handler is supplied. Receives
-     * the {@link DialogResult} the user produced.
-     */
     onClose?: CloseDialog;
-
-    /** Invoked when the user activates the confirm action (Ok / Yes). */
     onConfirm?: ConfirmCallback;
-
-    /** Invoked when the user activates the cancel / dismiss action. */
     onCancel?: CancelCallback;
-
-    /**
-     * Footer button configuration. Pass a {@link DialogButtons} value for one of
-     * the predefined sets (`Ok`, `OkCancel`, `YesNo`, `YesNoCancel`), `null` for
-     * no footer, or a custom React node to fully render your own footer.
-     * Defaults to `DialogButtons.OkCancel`.
-     *
-     * ⚠️ **Anything other than a {@link DialogButtons} value also opts the dialog
-     * out of three unrelated behaviors**, because the dialog can no longer know
-     * which of your buttons means "confirm" and which means "dismiss":
-     * the header close (X) is removed, `Escape` no longer closes, and
-     * `onClose` / `onCancel` / `onConfirm` are never invoked — including the
-     * confirm handler that {@link CommandDialog} uses to execute its command.
-     * A custom footer must therefore close the dialog itself through
-     * `useDialogContext().closeDialog(...)`, or opt the dismiss affordances back
-     * in explicitly with {@link dismissable}.
-     *
-     * Reach for {@link initialFocus} rather than a custom footer when all you
-     * want is to change which button starts out focused.
-     */
     buttons?: DialogButtons | ReactNode;
-
-    /**
-     * Where keyboard focus lands when the dialog becomes visible. Defaults to
-     * {@link DialogInitialFocus.Confirm}, which focuses the `Ok` / `Yes` button.
-     *
-     * Set it to {@link DialogInitialFocus.Cancel} or
-     * {@link DialogInitialFocus.Content} for a dialog whose confirm action is
-     * destructive and needs no input to become valid — otherwise the confirm
-     * button sits armed under the same `Enter` that opened the dialog, and key
-     * auto-repeat (or the habit of pressing `Enter` twice) collapses a two-step
-     * confirmation into one.
-     */
     initialFocus?: DialogInitialFocus;
-
-    /** Dialog body content. */
     children: ReactNode;
-
-    /** Dialog width, any valid CSS length. Defaults to `'450px'`. */
     width?: string;
-
-    /** Inline style forwarded to the dialog popup (the visible dialog box). */
     style?: CSSProperties;
-
-    /** Inline style forwarded to the dialog's inner content area. */
     contentStyle?: CSSProperties;
-
-    /**
-     * When true, allows the user to resize the dialog. Defaults to `false`.
-     *
-     * PrimeReact 11's headless Dialog has no built-in resize handle, so this is
-     * currently accepted for API compatibility and has no effect. Kept so
-     * existing call sites continue to type-check.
-     */
+    /** Retained for source compatibility; the dialog is viewport-bounded rather than resizable. */
     resizable?: boolean;
-
-    /**
-     * Controls whether the confirm button is enabled. Defaults to `true` when
-     * omitted; set to `false` to disable confirm (e.g. when form validation
-     * fails).
-     */
     isValid?: boolean;
-
-    /**
-     * When true, disables all dialog buttons and shows a loading state on the
-     * confirm button. Used by command-executing wrappers while a command runs.
-     */
     isBusy?: boolean;
-
-    /** Override the Ok button label. Defaults to `'Ok'`. */
     okLabel?: string;
-
-    /** Override the Cancel button label. Defaults to `'Cancel'`. */
     cancelLabel?: string;
-
-    /** Override the Yes button label. Defaults to `'Yes'`. */
     yesLabel?: string;
-
-    /** Override the No button label. Defaults to `'No'`. */
     noLabel?: string;
-
-    /** Accessible name for the header close button. Override to localize. Defaults to `'Close'`. */
     closeAriaLabel?: string;
-
-    /**
-     * Whether the dialog can be dismissed via the header close button, a
-     * backdrop click, or the Escape key. When omitted, the dialog is
-     * dismissable exactly when a predefined {@link DialogButtons} set is used
-     * (a custom `ReactNode` footer or `null` footer is not dismissable by
-     * default). Set it explicitly to keep a dismiss affordance with a custom
-     * footer — as {@link StepperCommandDialog} does for its wizard chrome.
-     */
     dismissable?: boolean;
-
-    /**
-     * Extra CSS class names forwarded to the underlying PrimeReact Dialog root.
-     */
     className?: string;
-
-    /**
-     * PrimeReact pass-through configuration. Applies to the underlying Dialog's
-     * slots (`root`, `positioner`, `backdrop`, `header`, `title`, `close`,
-     * `content`, `footer`, …) — see PrimeReact's Dialog `pt` reference for the
-     * available keys. Use this (or set a global preset on
-     * `CratisComponentsProvider`) to take full control of styling.
-     */
-    pt?: DialogRootProps['pt'];
-
-    /**
-     * PrimeReact pass-through options. Controls merge vs. replace behavior for
-     * the {@link pt} preset.
-     */
-    ptOptions?: DialogRootProps['ptOptions'];
-
-    /**
-     * When true, disables every base PrimeReact style on the underlying Dialog.
-     * Combine with {@link pt} or with the global setting from
-     * `CratisComponentsProvider` to fully restyle.
-     */
+    /** Cratis-owned per-part attributes. */
+    pt?: DialogParts;
+    /** Retained for source compatibility; Cratis parts always merge. */
+    ptOptions?: object;
+    /** Retained for source compatibility; consumers always own the CSS. */
     unstyled?: boolean;
 }
 
+const classNames = (...values: Array<string | undefined>) => values.filter(Boolean).join(' ');
+
 /**
- * Cratis wrapper around PrimeReact's `Dialog` that adds the surface every Arc
- * app needs on top of PrimeReact's bare modal:
- *
- * - **Typed footer-button enum** (`DialogButtons.Ok` / `OkCancel` / `YesNo` /
- *   `YesNoCancel`) with localizable labels. Pass `null` for a footer-less
- *   dialog with your own buttons, or a `ReactNode` to fully render the
- *   footer yourself.
- * - **Confirm/cancel callback contract** (`onConfirm`, `onCancel`, `onClose`)
- *   where returning `false` (sync or via promise) keeps the dialog open.
- *   This is the contract used to surface inline command failures: when a
- *   command's `execute()` returns `IsSuccess: false`, the dialog stays open
- *   and the form re-renders with field-level errors.
- * - **Busy state** (`isBusy`) that disables every action and shows a loading
- *   spinner on the confirm button. Command-executing wrappers
- *   ({@link CommandDialog}, {@link StepperCommandDialog}) flip this
- *   automatically while a command runs.
- * - **Validity gate** (`isValid`) that disables the confirm button without
- *   disabling the cancel button. Used by command-executing wrappers to
- *   block submission while form validation fails.
- * - **Initial focus** (`initialFocus`) choosing which element inside the
- *   dialog the keyboard lands on when it opens.
- *
- * ## Initial focus
- *
- * By default the confirm button is focused when the dialog opens, so the
- * common "read it, press Enter" flow costs one keystroke. That default also
- * *arms* the confirm button: browsers fire `click` from the `keydown` of
- * `Enter`, so the key still held down from opening the dialog — or the very
- * ordinary habit of pressing `Enter` twice — confirms it immediately.
- *
- * A dialog whose confirm action is destructive **and** needs no input to
- * become valid gets no protection from `isValid`, because there is nothing
- * to fill in. Give those dialogs an explicit
- * {@link DialogInitialFocus} instead:
- *
- * ```tsx
- * <Dialog title="Delete personal data?"
- *         buttons={DialogButtons.YesNo}
- *         initialFocus={DialogInitialFocus.Cancel}
- *         onConfirm={...} onCancel={...}>
- *     This permanently removes the person and every record about them.
- * </Dialog>
- * ```
- *
- * `Cancel` focuses the dismissing button (`Cancel`, or `No` when the set has
- * no `Cancel`); `Content` focuses the dialog's title so nothing at all is
- * armed and screen readers announce the dialog from the top. Both keep the
- * footer, the close (X), `Escape`, and every callback intact — unlike
- * replacing `buttons` with a custom node.
- *
- * ## Arc dialog host integration
- *
- * When mounted inside a `<DialogHost>` from `@cratis/arc.react/dialogs`, the
- * Dialog automatically discovers the host through `useDialogContext()` and
- * closes through it on confirm/cancel — no manual `closeDialog` wiring at
- * the call site. The typical pattern at the host's request site:
- *
- * ```tsx
- * import { useDialog, DialogResult } from '@cratis/arc.react/dialogs';
- *
- * const [DeleteProjectDialog, showDeleteProjectDialog] = useDialog(DeleteProject);
- *
- * const onDeleteClick = async () => {
- *     const [result] = await showDeleteProjectDialog();
- *     if (result === DialogResult.Yes) {
- *         // user confirmed
- *     }
- * };
- * ```
- *
- * Inside the dialog component itself the close path goes through
- * `useDialogContext()`:
- *
- * ```tsx
- * import { Dialog, DialogButtons, DialogResult, useDialogContext } from '@cratis/arc.react/dialogs';
- *
- * export const DeleteProject = () => {
- *     const { closeDialog } = useDialogContext();
- *     return (
- *         <Dialog title="Delete project?" buttons={DialogButtons.YesNo}
- *                 onConfirm={() => closeDialog(DialogResult.Yes)}
- *                 onCancel={() => closeDialog(DialogResult.No)}>
- *             This action cannot be undone.
- *         </Dialog>
- *     );
- * };
- * ```
- *
- * The Dialog also works **outside** a host — the `useDialogContext()` call is
- * wrapped in a try/catch so standalone use does not throw.
- *
- * ## Styling
- *
- * Pass `pt`, `ptOptions`, `unstyled`, or `className` to forward straight to
- * the underlying PrimeReact Dialog. See the [Styling section](../../Documentation/Styling/index.md)
- * for the supported styling options and the
- * [pass-through cheat sheet](../../Documentation/Styling/pass-through.md)
- * for available slots.
- *
- * @param props - {@link DialogProps}.
+ * A modal dialog with Arc host integration, typed footer actions, busy/validity
+ * state, controlled dismissal, and stable Cratis-owned styling parts.
  */
 export const Dialog = ({
     title,
@@ -291,8 +101,6 @@ export const Dialog = ({
     width = '450px',
     style,
     contentStyle,
-    // `resizable` is accepted for API compatibility but has no effect on
-    // PrimeReact 11's headless Dialog, so it is intentionally not destructured.
     isValid,
     isBusy = false,
     okLabel = 'Ok',
@@ -303,12 +111,7 @@ export const Dialog = ({
     dismissable,
     className,
     pt,
-    ptOptions,
-    unstyled,
 }: DialogProps) => {
-    // useDialogContext() is called unconditionally on every render — the try/catch only suppresses
-    // the exception when Dialog is used standalone (outside a provider). React's Rules of Hooks
-    // are not violated because the hook is always called; the try/catch never skips the call.
     let contextCloseDialog: ((result: DialogResult) => void) | undefined;
     try {
         const context = useDialogContext();
@@ -317,46 +120,31 @@ export const Dialog = ({
         contextCloseDialog = undefined;
     }
 
-    const isDialogValid = isValid !== false;
+    const titleRef = useRef<HTMLHeadingElement>(null);
+    const confirmRef = useRef<HTMLButtonElement>(null);
+    const cancelRef = useRef<HTMLButtonElement>(null);
 
-    // A dismissing button only exists for the predefined sets that have one — Cancel for
-    // OkCancel / YesNoCancel, No for YesNo. Asking for Cancel focus without one (DialogButtons.Ok,
-    // a custom footer node, or no footer) degrades to focusing the title rather than silently
-    // leaving focus on the dialog container.
-    const hasDismissingButton =
-        typeof buttons === 'number' && buttons !== DialogButtons.Ok;
+    const isDialogValid = isValid !== false;
+    const hasDismissingButton = typeof buttons === 'number' && buttons !== DialogButtons.Ok;
     const resolvedInitialFocus =
         initialFocus === DialogInitialFocus.Cancel && !hasDismissingButton
             ? DialogInitialFocus.Content
             : initialFocus;
-
     const focusesConfirmButton = resolvedInitialFocus === DialogInitialFocus.Confirm;
     const focusesDismissingButton = resolvedInitialFocus === DialogInitialFocus.Cancel;
     const focusesTitle = resolvedInitialFocus === DialogInitialFocus.Content;
+    const isDismissable = dismissable ?? typeof buttons === 'number';
 
-    // PrimeReact 11's Dialog focus trap resolves its initial target in this order:
-    // an explicit `initialFocusRef`, then the first `[autofocus]` / `[data-autofocus]`
-    // element inside the popup, then the first focusable element, then the container.
-    // `DialogRoot` does not forward `initialFocusRef`, so the marker attribute is the
-    // seam — and it has to be `data-autofocus` rather than React's `autoFocus` prop,
-    // because React implements `autoFocus` by calling `.focus()` itself on mount and
-    // never reflects the attribute into the DOM for the trap's querySelector to find.
-    // Exactly one element carries it, since the trap takes the first match in document
-    // order (header → content → footer).
-    const autofocusMarker = (isTarget: boolean) =>
-        isTarget ? { 'data-autofocus': '' } : {};
-
-    const headerElement = (
-        <div className='inline-flex items-center justify-center gap-2'>
-            <span
-                tabIndex={focusesTitle ? -1 : undefined}
-                {...autofocusMarker(focusesTitle)}
-                className='font-bold whitespace-nowrap'
-            >
-                {title}
-            </span>
-        </div>
-    );
+    useEffect(() => {
+        if (!visible) return;
+        const target = focusesConfirmButton
+            ? confirmRef.current
+            : focusesDismissingButton
+                ? cancelRef.current
+                : titleRef.current;
+        const frame = requestAnimationFrame(() => target?.focus());
+        return () => cancelAnimationFrame(frame);
+    }, [focusesConfirmButton, focusesDismissingButton, visible]);
 
     const handleClose = async (result: DialogResult) => {
         let shouldCloseThroughContext = true;
@@ -377,178 +165,164 @@ export const Dialog = ({
             shouldCloseThroughContext = closeResult !== false;
         }
 
-        if (shouldCloseThroughContext) {
-            contextCloseDialog?.(result);
-        }
+        if (shouldCloseThroughContext) contextCloseDialog?.(result);
     };
 
-    // PrimeReact 11's Button renders its content as children (the v10 `label`/`icon`
-    // props are gone) and expresses the outlined look through `variant`. The primary
-    // (confirm) button shows a spinner in place of its icon while busy. `focused`
-    // marks the button the dialog's focus trap should land on when it opens.
-    // This helper keeps the footer definitions below readable.
     const footerButton = (
         result: DialogResult,
         label: string,
-        icon: string,
         primary: boolean,
         focused: boolean,
     ) => (
-        <Button
+        <button
             key={`${result}-${label}`}
-            variant={primary ? undefined : 'outlined'}
-            onClick={() => handleClose(result)}
+            {...(primary ? pt?.confirm : pt?.cancel)}
+            type='button'
+            className={classNames(
+                'cratis-dialog__button',
+                primary ? 'cratis-dialog__button--primary' : 'cratis-dialog__button--secondary',
+                primary ? pt?.confirm?.className : pt?.cancel?.className,
+            )}
+            data-cratis-part={primary ? 'confirm' : 'cancel'}
+            ref={primary ? confirmRef : focused ? cancelRef : undefined}
+            onClick={() => void handleClose(result)}
             disabled={primary ? !isDialogValid || isBusy : isBusy}
-            {...autofocusMarker(focused)}
+            autoFocus={focused}
+            aria-busy={primary && isBusy ? true : undefined}
         >
-            <i
-                className={primary && isBusy ? 'pi pi-spin pi-spinner' : icon}
-                aria-hidden='true'
-            />
+            {primary && isBusy && <span className='cratis-dialog__spinner' aria-hidden='true' />}
             <span>{label}</span>
-        </Button>
-    );
-
-    const okFooter = footerButton(
-        DialogResult.Ok,
-        okLabel,
-        'pi pi-check',
-        true,
-        focusesConfirmButton,
-    );
-
-    const okCancelFooter = (
-        <>
-            {footerButton(
-                DialogResult.Ok,
-                okLabel,
-                'pi pi-check',
-                true,
-                focusesConfirmButton,
-            )}
-            {footerButton(
-                DialogResult.Cancelled,
-                cancelLabel,
-                'pi pi-times',
-                false,
-                focusesDismissingButton,
-            )}
-        </>
-    );
-
-    const yesNoFooter = (
-        <>
-            {footerButton(
-                DialogResult.Yes,
-                yesLabel,
-                'pi pi-check',
-                true,
-                focusesConfirmButton,
-            )}
-            {footerButton(
-                DialogResult.No,
-                noLabel,
-                'pi pi-times',
-                false,
-                focusesDismissingButton,
-            )}
-        </>
-    );
-
-    const yesNoCancelFooter = (
-        <>
-            {footerButton(
-                DialogResult.Yes,
-                yesLabel,
-                'pi pi-check',
-                true,
-                focusesConfirmButton,
-            )}
-            {footerButton(DialogResult.No, noLabel, 'pi pi-times', false, false)}
-            {footerButton(
-                DialogResult.Cancelled,
-                cancelLabel,
-                'pi pi-times',
-                false,
-                focusesDismissingButton,
-            )}
-        </>
+        </button>
     );
 
-    const getFooterInterior = () => {
-        // If buttons is a ReactNode (custom buttons), use it directly
-        if (typeof buttons !== 'number') {
-            return buttons;
-        }
+    const predefinedFooter = () => {
+        if (typeof buttons !== 'number') return buttons;
 
-        // Otherwise, use predefined buttons based on DialogButtons enum
         switch (buttons) {
             case DialogButtons.Ok:
-                return okFooter;
+                return footerButton(DialogResult.Ok, okLabel, true, focusesConfirmButton);
             case DialogButtons.OkCancel:
-                return okCancelFooter;
+                return (
+                    <>
+                        {footerButton(DialogResult.Ok, okLabel, true, focusesConfirmButton)}
+                        {footerButton(DialogResult.Cancelled, cancelLabel, false, focusesDismissingButton)}
+                    </>
+                );
             case DialogButtons.YesNo:
-                return yesNoFooter;
+                return (
+                    <>
+                        {footerButton(DialogResult.Yes, yesLabel, true, focusesConfirmButton)}
+                        {footerButton(DialogResult.No, noLabel, false, focusesDismissingButton)}
+                    </>
+                );
             case DialogButtons.YesNoCancel:
-                return yesNoCancelFooter;
+                return (
+                    <>
+                        {footerButton(DialogResult.Yes, yesLabel, true, focusesConfirmButton)}
+                        {footerButton(DialogResult.No, noLabel, false, false)}
+                        {footerButton(DialogResult.Cancelled, cancelLabel, false, focusesDismissingButton)}
+                    </>
+                );
+            default:
+                return null;
         }
-
-        return <></>;
     };
 
-    const footer = (
-        <div className='flex flex-wrap justify-start gap-3'>{getFooterInterior()}</div>
+    const dialogDocument = (
+        <AriaDialog className='cratis-dialog__document'>
+            <>
+                <header
+                    className={classNames('cratis-dialog__header', pt?.header?.className)}
+                    style={pt?.header?.style}
+                    data-cratis-part='header'
+                >
+                    <Heading
+                        slot='title'
+                        tabIndex={focusesTitle ? -1 : undefined}
+                        ref={titleRef}
+                        className={classNames('cratis-dialog__title', pt?.title?.className)}
+                        style={pt?.title?.style}
+                        data-cratis-part='title'
+                    >
+                        {title}
+                    </Heading>
+                    {isDismissable && (
+                        <button
+                            {...pt?.close}
+                            type='button'
+                            className={classNames('cratis-dialog__close', pt?.close?.className)}
+                            data-cratis-part='close'
+                            aria-label={closeAriaLabel}
+                            onClick={() => void handleClose(DialogResult.Cancelled)}
+                        >
+                            <span aria-hidden='true'>×</span>
+                        </button>
+                    )}
+                </header>
+                <div
+                    className={classNames('cratis-dialog__content', pt?.content?.className)}
+                    style={{ ...pt?.content?.style, ...contentStyle }}
+                    data-cratis-part='content'
+                >
+                    {children}
+                </div>
+                {buttons !== null && (
+                    <footer
+                        className={classNames('cratis-dialog__footer', pt?.footer?.className)}
+                        style={pt?.footer?.style}
+                        data-cratis-part='footer'
+                    >
+                        {predefinedFooter()}
+                    </footer>
+                )}
+            </>
+        </AriaDialog>
     );
 
-    // The dialog is dismissable (backdrop click, Escape, header close button)
-    // for the predefined-button sets by default, mirroring the v10 `closable`
-    // behavior that keyed off `typeof buttons === 'number'`. The `dismissable`
-    // prop overrides that default so a custom-footer dialog (e.g. the stepper
-    // wizard) can still offer a header-close affordance.
-    const isDismissable = dismissable ?? typeof buttons === 'number';
-
-    // PrimeReact 11's Dialog is a controlled overlay: `open` reflects `visible`,
-    // and any dismiss gesture fires `onOpenChange` with `value: false`. We route
-    // that through the same `handleClose(Cancelled)` path used by the footer's
-    // cancel button, so the "return false keeps the dialog open" contract holds —
-    // the parent (the Arc dialog host) owns `visible`, so nothing closes unless
-    // `handleClose` calls back through the host.
-    const handleOpenChange = (event: DialogRootChangeEvent) => {
-        if (!event.value) {
-            handleClose(DialogResult.Cancelled);
-        }
-    };
+    const dialogStyle = { width, ...pt?.root?.style, ...style };
+
+    if (typeof document === 'undefined') {
+        if (!visible) return null;
+        return (
+            <div className={classNames('cratis-dialog__backdrop', pt?.backdrop?.className)} data-cratis-part='backdrop'>
+                <div className={classNames('cratis-dialog__positioner', pt?.positioner?.className)} data-cratis-part='positioner'>
+                    <section
+                        className={classNames('cratis-dialog', pt?.root?.className, className)}
+                        style={dialogStyle}
+                        data-cratis-part='root'
+                    >
+                        {dialogDocument}
+                    </section>
+                </div>
+            </div>
+        );
+    }
 
     return (
-        <PrimeDialog.Root
-            open={visible}
-            onOpenChange={handleOpenChange}
-            modal
-            dismissable={isDismissable}
-            closeOnEscape={isDismissable}
-            pt={pt}
-            ptOptions={ptOptions}
-            unstyled={unstyled}
+        <ModalOverlay
+            isOpen={visible}
+            onOpenChange={open => {
+                if (!open) void handleClose(DialogResult.Cancelled);
+            }}
+            isDismissable={isDismissable}
+            isKeyboardDismissDisabled={!isDismissable}
+            className={classNames('cratis-dialog__backdrop', pt?.backdrop?.className)}
+            style={pt?.backdrop?.style}
+            data-cratis-part='backdrop'
         >
-            <PrimeDialog.Portal>
-                <PrimeDialog.Backdrop />
-                <PrimeDialog.Positioner>
-                    <PrimeDialog.Popup className={className} style={{ width, ...style }}>
-                        <PrimeDialog.Header>
-                            <PrimeDialog.Title>{headerElement}</PrimeDialog.Title>
-                            {isDismissable && (
-                                <PrimeDialog.Close aria-label={closeAriaLabel}>
-                                    <i className='pi pi-times' />
-                                </PrimeDialog.Close>
-                            )}
-                        </PrimeDialog.Header>
-                        <PrimeDialog.Content style={contentStyle}>
-                            {children}
-                        </PrimeDialog.Content>
-                        <PrimeDialog.Footer>{footer}</PrimeDialog.Footer>
-                    </PrimeDialog.Popup>
-                </PrimeDialog.Positioner>
-            </PrimeDialog.Portal>
-        </PrimeDialog.Root>
+            <div
+                className={classNames('cratis-dialog__positioner', pt?.positioner?.className)}
+                style={pt?.positioner?.style}
+                data-cratis-part='positioner'
+            >
+                <Modal
+                    className={classNames('cratis-dialog', pt?.root?.className, className)}
+                    style={dialogStyle}
+                    data-cratis-part='root'
+                >
+                    {dialogDocument}
+                </Modal>
+            </div>
+        </ModalOverlay>
     );
 };
diff --git a/Source/Dialogs/for_BusyIndicatorDialog/when_shown.ts b/Source/Dialogs/for_BusyIndicatorDialog/when_shown.ts
index db6e1e4f..104a2cf9 100644
--- a/Source/Dialogs/for_BusyIndicatorDialog/when_shown.ts
+++ b/Source/Dialogs/for_BusyIndicatorDialog/when_shown.ts
@@ -28,6 +28,6 @@ describe('when a busy indicator dialog is shown', () => {
     });
 
     it('should focus the title so the wait state is announced', () => {
-        focusedElement().should.equal('span:Saving');
+        focusedElement().should.equal('h2:Saving');
     });
 });
diff --git a/Source/Dialogs/for_Dialog/given/a_dialog_in_the_dom.ts b/Source/Dialogs/for_Dialog/given/a_dialog_in_the_dom.ts
index efc5cfb2..01efe91d 100644
--- a/Source/Dialogs/for_Dialog/given/a_dialog_in_the_dom.ts
+++ b/Source/Dialogs/for_Dialog/given/a_dialog_in_the_dom.ts
@@ -17,20 +17,16 @@ export interface DialogInTheDom {
 }
 
 /**
- * Renders an element into a real document and lets PrimeReact's show
- * transition complete, so the dialog has settled on its initial focus by the
- * time the spec looks at it.
- *
- * PrimeReact 11 components resolve their configuration from a
- * `PrimeReactProvider` and throw without one, so the element is mounted inside
- * the Cratis provider that supplies it. `ResizeObserver` is stubbed because
- * PrimeReact's positioner observes the overlay and jsdom has no layout engine
- * to report any size at all.
+ * Renders an element into a real document and lets the modal focus scope settle
+ * before the spec observes it. The Cratis provider supplies locale and global
+ * notification context just as an application root does.
  * @param element - The element to render.
  * @returns The mounted dialog, to be passed to {@link unmount}.
  */
 export const render = async (element: React.ReactElement): Promise<DialogInTheDom> => {
+    // SAFETY: React's test-environment flag is an intentionally undocumented global absent from DOM typings.
     (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+    // SAFETY: jsdom omits ResizeObserver; the overlay only calls these observer methods.
     (globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver ??= class {
         observe() { }
         unobserve() { }
@@ -69,7 +65,7 @@ export const unmount = async (dialog: DialogInTheDom) => {
  * not carry chai's `should`, and a description also makes a failure say what
  * was focused instead of only that two objects differ.
  *
- * Reads as `button:Ok`, `span:Delete personal data`, or `document.body` when
+ * Reads as `button:Ok`, `h2:Delete personal data`, or `document.body` when
  * focus was never moved into the dialog at all.
  * @returns The description of the focused element.
  */
@@ -92,20 +88,18 @@ export const focusIsInsideTheDialog = (): boolean => {
 };
 
 /**
- * Whether the dialog renders its header close (X) button. PrimeReact 11 is unstyled-first —
- * with no theme preset applied every `class` attribute is empty — so its parts are addressed
- * by the `data-scope` / `data-part` pair rather than by a `p-*` class name.
+ * Whether the dialog renders its header close button.
  * @returns True when the close button is present.
  */
 export const hasCloseButton = (): boolean =>
-    !!document.querySelector('[data-scope="dialog"][data-part="close"]');
+    !!document.querySelector('[data-cratis-part="close"]');
 
 /**
  * The `tabindex` attribute on the dialog's title, or `'none'` when it has none.
  * @returns The tab index as a string.
  */
 export const titleTabIndex = (): string =>
-    document.querySelector('[data-scope="dialog"][data-part="title"] span')?.getAttribute('tabindex') ?? 'none';
+    document.querySelector('[data-cratis-part="title"]')?.getAttribute('tabindex') ?? 'none';
 
 const buttonLabeled = (label: string) =>
     Array.from(document.querySelectorAll('button')).find(button => button.textContent === label);
@@ -129,11 +123,12 @@ export const pressEnterOnFocusedElement = async () => {
 };
 
 /**
- * Presses `Escape`, which PrimeReact listens for on the document.
+ * Presses `Escape`, which the modal focus scope listens for on the document.
  */
 export const pressEscape = async () => {
     await act(async () => {
-        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', code: 'Escape', bubbles: true }));
+        const target = document.activeElement ?? document;
+        target.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', code: 'Escape', bubbles: true }));
     });
 };
 
diff --git a/Source/Dialogs/for_Dialog/when_confirming_with_close_dialog_and_result.ts b/Source/Dialogs/for_Dialog/when_confirming_with_close_dialog_and_result.ts
index a01c2b04..6c77f367 100644
--- a/Source/Dialogs/for_Dialog/when_confirming_with_close_dialog_and_result.ts
+++ b/Source/Dialogs/for_Dialog/when_confirming_with_close_dialog_and_result.ts
@@ -1,39 +1,20 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
+// @vitest-environment jsdom
+
+import { expect } from 'chai';
 import React from 'react';
-import { renderToStaticMarkup } from 'react-dom/server';
 import { vi } from 'vitest';
 import { Dialog } from '../Dialog';
+import {
+    click,
+    render,
+    unmount,
+    type DialogInTheDom,
+} from './given/a_dialog_in_the_dom';
 
-const { closeDialog } = vi.hoisted(() => ({
-    closeDialog: vi.fn(),
-}));
-
-vi.mock('primereact/dialog', () => {
-    // PrimeReact 11's Dialog is compositional; each part is a pass-through that
-    // renders its children so the footer buttons and content reach the markup.
-    const part = (props: { children?: React.ReactNode }) => React.createElement('div', null, props.children);
-    return {
-        Dialog: {
-            Root: part, Portal: part, Backdrop: part, Positioner: part, Popup: part,
-            Header: part, Title: part, Close: part, Content: part, Footer: part,
-        },
-    };
-});
-
-vi.mock('primereact/button', () => ({
-    // PrimeReact 11 Button renders children (the v10 label/icon props are gone), and the
-    // dialog marks the button its focus trap should land on with `data-autofocus` rather
-    // than React's autoFocus prop. That marker identifies the confirm button, whose click
-    // this SSR render stands in for.
-    Button: (props: { 'data-autofocus'?: string; onClick?: () => Promise<void> | void; disabled?: boolean; children?: React.ReactNode }) => {
-        if (props['data-autofocus'] !== undefined && props.onClick) {
-            void props.onClick();
-        }
-        return React.createElement('button', { disabled: props.disabled }, props.children);
-    },
-}));
+const { closeDialog } = vi.hoisted(() => ({ closeDialog: vi.fn() }));
 
 vi.mock('@cratis/arc.react/dialogs', () => ({
     DialogButtons: { Ok: 1, OkCancel: 2, YesNo: 3, YesNoCancel: 4 },
@@ -43,27 +24,28 @@ vi.mock('@cratis/arc.react/dialogs', () => ({
 
 describe('when confirming with close dialog and result', () => {
     const resultPayload = { id: 'project-1', name: 'Project 1' };
+    let dialog: DialogInTheDom;
 
-    beforeEach(() => {
+    beforeEach(async () => {
         closeDialog.mockReset();
-
-        const element = React.createElement(Dialog, {
-            title: 'Add project',
-            visible: true,
-            onConfirm: () => closeDialog(3, resultPayload),
-            onCancel: () => closeDialog(4),
-            buttons: 2,
-            children: React.createElement('p', null, 'Dialog content'),
-        });
-
-        renderToStaticMarkup(element);
+        dialog = await render(
+            React.createElement(Dialog, {
+                title: 'Add project',
+                visible: true,
+                onConfirm: () => closeDialog(3, resultPayload),
+                onCancel: () => closeDialog(4),
+                buttons: 2,
+                children: React.createElement('p', null, 'Dialog content'),
+            }),
+        );
+        await click('Ok');
     });
 
-    it('should_close_once_with_ok_and_the_payload', () => {
-        if (closeDialog.mock.calls.length !== 1) {
-            throw new Error(`Expected one closeDialog call, got ${closeDialog.mock.calls.length}`);
-        }
-        closeDialog.mock.calls[0][0].should.equal(3);
-        closeDialog.mock.calls[0][1].should.deep.equal(resultPayload);
+    afterEach(async () => unmount(dialog));
+
+    it('should close once with ok and the payload', () => {
+        expect(closeDialog.mock.calls).to.have.lengthOf(1);
+        expect(closeDialog.mock.calls[0][0]).to.equal(3);
+        expect(closeDialog.mock.calls[0][1]).to.deep.equal(resultPayload);
     });
 });
diff --git a/Source/Dialogs/for_Dialog/when_initial_focus_is_cancel.ts b/Source/Dialogs/for_Dialog/when_initial_focus_is_cancel.ts
index af6c7d7f..bfc8b145 100644
--- a/Source/Dialogs/for_Dialog/when_initial_focus_is_cancel.ts
+++ b/Source/Dialogs/for_Dialog/when_initial_focus_is_cancel.ts
@@ -50,13 +50,13 @@ describe('when initial focus is cancel', () => {
     it('should fall back to the title when the button set has nothing to dismiss with', async () => {
         await renderDialog(DialogButtons.Ok);
 
-        focusedElement().should.equal('span:Delete personal data');
+        focusedElement().should.equal('h2:Delete personal data');
     });
 
     it('should fall back to the title when the footer is a custom node', async () => {
         await renderDialog(React.createElement('button', { type: 'button' }, 'Delete'));
 
-        focusedElement().should.equal('span:Delete personal data');
+        focusedElement().should.equal('h2:Delete personal data');
     });
 
     it('should keep focus inside the dialog rather than on the document body', async () => {
diff --git a/Source/Dialogs/for_Dialog/when_initial_focus_is_content.ts b/Source/Dialogs/for_Dialog/when_initial_focus_is_content.ts
index 29ac5d10..fdf81ce1 100644
--- a/Source/Dialogs/for_Dialog/when_initial_focus_is_content.ts
+++ b/Source/Dialogs/for_Dialog/when_initial_focus_is_content.ts
@@ -32,7 +32,7 @@ describe('when initial focus is content', () => {
     it('should focus the title rather than any button', async () => {
         await renderDialog(DialogButtons.OkCancel);
 
-        focusedElement().should.equal('span:Delete personal data');
+        focusedElement().should.equal('h2:Delete personal data');
     });
 
     it('should make the title focusable without putting it in the tab order', async () => {
@@ -44,7 +44,7 @@ describe('when initial focus is content', () => {
     it('should move focus into a dialog that has no focusable content at all', async () => {
         await renderDialog(null);
 
-        focusedElement().should.equal('span:Delete personal data');
+        focusedElement().should.equal('h2:Delete personal data');
         focusIsInsideTheDialog().should.be.true;
     });
 
diff --git a/Source/Dialogs/for_Dialog/when_rendering_footer_buttons.tsx b/Source/Dialogs/for_Dialog/when_rendering_footer_buttons.tsx
index ebaedeb3..cb555ce8 100644
--- a/Source/Dialogs/for_Dialog/when_rendering_footer_buttons.tsx
+++ b/Source/Dialogs/for_Dialog/when_rendering_footer_buttons.tsx
@@ -12,7 +12,7 @@ import { type DialogInTheDom, render, unmount } from './given/a_dialog_in_the_do
 const footerButtons = () =>
     Array.from(
         document.querySelectorAll<HTMLButtonElement>(
-            '[data-scope="dialog"][data-part="footer"] button',
+            '[data-cratis-part="footer"] button',
         ),
     );
 
@@ -49,12 +49,11 @@ describe('when rendering footer buttons', () => {
         await unmount(dialog);
     });
 
-    it('should hide every decorative icon from accessibility APIs', () => {
-        const icons = footerButtons().map((button) => button.querySelector('i'));
-        expect(icons).to.have.lengthOf(2);
-        expect(
-            icons.every((icon) => icon?.getAttribute('aria-hidden') === 'true'),
-        ).to.equal(true);
+    it('should not add decorative content to the action labels', () => {
+        const decorativeElements = footerButtons().flatMap((button) =>
+            Array.from(button.querySelectorAll('i, svg')),
+        );
+        expect(decorativeElements).to.have.lengthOf(0);
     });
 
     it('should give each button exactly its visible label as accessible content', () => {
diff --git a/Source/styles.css b/Source/styles.css
index a0caa9ed..902aedaa 100644
--- a/Source/styles.css
+++ b/Source/styles.css
@@ -38,6 +38,7 @@
 @import './DataTables/ColumnFilterMenu.css';
 @import './DataTables/DataTableCore.css';
 @import './DataTables/TablePaginator.css';
+@import './Dialogs/Dialog.css';
 @import './Display/Display.css';
 @import './Dropdown/Dropdown.css';
 @import './Filter/FilterPanel.css';

From 74cd8cac5931e11073cd563a48e62369df88832c Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Sun, 23 Aug 2026 02:59:03 +0200
Subject: [PATCH 008/267] Own command form field primitives

---
 Source/CommandForm/fields/CheckboxField.tsx   |  89 +++++-----
 Source/CommandForm/fields/ChipsField.tsx      | 161 +++++++++---------
 .../CommandForm/fields/ColorPickerField.tsx   | 112 +++++-------
 Source/CommandForm/fields/Fields.css          | 131 ++++++++++++++
 Source/CommandForm/fields/InputTextField.tsx  |  87 ++--------
 Source/CommandForm/fields/NumberField.tsx     |  77 ++++-----
 Source/CommandForm/fields/PasswordField.tsx   |  81 +++++----
 .../CommandForm/fields/RadioButtonField.tsx   |  97 +++++------
 Source/CommandForm/fields/RadioGroupField.tsx | 140 +++++++--------
 Source/CommandForm/fields/RatingField.tsx     |  96 ++++++-----
 Source/CommandForm/fields/SliderField.tsx     |  82 ++++-----
 Source/CommandForm/fields/TextAreaField.tsx   |  56 ++----
 .../CommandForm/fields/ToggleSwitchField.tsx  |  83 ++++-----
 Source/styles.css                             |   1 +
 14 files changed, 637 insertions(+), 656 deletions(-)
 create mode 100644 Source/CommandForm/fields/Fields.css

diff --git a/Source/CommandForm/fields/CheckboxField.tsx b/Source/CommandForm/fields/CheckboxField.tsx
index 3c449354..8a024fa9 100644
--- a/Source/CommandForm/fields/CheckboxField.tsx
+++ b/Source/CommandForm/fields/CheckboxField.tsx
@@ -1,65 +1,60 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { Checkbox } from 'primereact/checkbox';
-import type { CheckboxRootProps, CheckboxRootChangeEvent } from '@primereact/types/primitive/checkbox';
-import React from 'react';
-import { asCommandFormField, WrappedFieldProps } from '@cratis/arc.react/commands';
+import type { HTMLAttributes, InputHTMLAttributes } from 'react';
+import { asCommandFormField, type WrappedFieldProps } from '@cratis/arc.react/commands';
+
+interface CheckboxParts {
+    root?: HTMLAttributes<HTMLLabelElement>;
+    input?: InputHTMLAttributes<HTMLInputElement>;
+    box?: HTMLAttributes<HTMLSpanElement>;
+    indicator?: HTMLAttributes<HTMLSpanElement>;
+}
 
-/**
- * Component-level props for {@link CheckboxField}.
- */
 interface CheckboxFieldComponentProps extends WrappedFieldProps<boolean> {
-    /** Optional label displayed next to the checkbox. */
     label?: string;
-
-    /** Extra CSS class name forwarded to the underlying Checkbox. */
     className?: string;
-
-    /** PrimeReact pass-through configuration applied to the underlying Checkbox. */
-    pt?: CheckboxRootProps['pt'];
-
-    /** PrimeReact pass-through options applied to the underlying Checkbox. */
-    ptOptions?: CheckboxRootProps['ptOptions'];
-
-    /** When true, disables every base PrimeReact style on the underlying Checkbox. */
+    pt?: CheckboxParts;
+    ptOptions?: object;
     unstyled?: boolean;
 }
 
-/**
- * A single boolean checkbox field bound to a `boolean` property on a Cratis
- * Arc command. See {@link InputTextField} for the full `value={c => c.prop}`
- * binding model.
- *
- * ```tsx
- * <CheckboxField value={c => c.acceptedTerms} label="I agree to the terms" />
- * ```
- */
+/** A checkbox field bound to a boolean property on an Arc command. */
 export const CheckboxField = asCommandFormField<CheckboxFieldComponentProps>(
     (props) => (
-        // PrimeReact 11's Checkbox is compositional (Root → Box → Indicator). A real
-        // <label> wraps the control so the visible text is its accessible name
-        // (implicit association) and doubles the click target. `onBlur` rides on the
-        // label because React blur bubbles (focusout), so the CommandForm's blur-timed
-        // validation still fires from the inner input.
-        <label className="flex items-center" onBlur={props.onBlur}>
-            <Checkbox.Root
+        <label
+            {...props.pt?.root}
+            className={['cratis-choice-field', props.pt?.root?.className, props.className].filter(Boolean).join(' ')}
+            onBlur={props.onBlur}
+            data-cratis-part='root'
+            data-invalid={props.invalid || undefined}
+        >
+            <input
+                {...props.pt?.input}
+                type='checkbox'
                 checked={props.value}
-                onCheckedChange={props.onChange}
-                invalid={props.invalid}
-                className={props.className}
-                pt={props.pt}
-                ptOptions={props.ptOptions}
-                unstyled={props.unstyled}>
-                <Checkbox.Box>
-                    <Checkbox.Indicator />
-                </Checkbox.Box>
-            </Checkbox.Root>
-            {props.label && <span className="ml-2">{props.label}</span>}
+                onChange={props.onChange}
+                aria-invalid={props.invalid || undefined}
+                className={['cratis-choice-field__native', props.pt?.input?.className].filter(Boolean).join(' ')}
+                data-cratis-part='input'
+            />
+            <span
+                {...props.pt?.box}
+                className={['cratis-checkbox__box', props.pt?.box?.className].filter(Boolean).join(' ')}
+                data-cratis-part='box'
+                aria-hidden='true'
+            >
+                <span
+                    {...props.pt?.indicator}
+                    className={['cratis-checkbox__indicator', props.pt?.indicator?.className].filter(Boolean).join(' ')}
+                    data-cratis-part='indicator'
+                >✓</span>
+            </span>
+            {props.label && <span className='cratis-choice-field__label'>{props.label}</span>}
         </label>
     ),
     {
         defaultValue: false,
-        extractValue: (e: CheckboxRootChangeEvent) => e.checked
-    }
+        extractValue: (event: React.ChangeEvent<HTMLInputElement>) => event.target.checked,
+    },
 );
diff --git a/Source/CommandForm/fields/ChipsField.tsx b/Source/CommandForm/fields/ChipsField.tsx
index 1009f0db..73a47d3e 100644
--- a/Source/CommandForm/fields/ChipsField.tsx
+++ b/Source/CommandForm/fields/ChipsField.tsx
@@ -1,101 +1,100 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { asCommandFormField, WrappedFieldProps } from '@cratis/arc.react/commands';
-import { InputTags } from 'primereact/inputtags';
-import type { InputTagsRootProps, InputTagsRootValueChangeEvent } from '@primereact/types/primitive/inputtags';
-import React from 'react';
+import { useState, type HTMLAttributes, type InputHTMLAttributes } from 'react';
+import { asCommandFormField, type WrappedFieldProps } from '@cratis/arc.react/commands';
+
+interface ChipsParts {
+    root?: HTMLAttributes<HTMLDivElement>;
+    item?: HTMLAttributes<HTMLSpanElement>;
+    remove?: React.ButtonHTMLAttributes<HTMLButtonElement>;
+    input?: InputHTMLAttributes<HTMLInputElement>;
+}
 
-/**
- * Component-level props for {@link ChipsField}.
- */
 interface ChipsFieldComponentProps extends WrappedFieldProps<string[]> {
-    /** Placeholder text shown when the chip list is empty. */
     placeholder?: string;
-
-    /** Maximum number of chips allowed. */
     max?: number;
-
-    /**
-     * Character (or regex source) that splits typed input into multiple chips.
-     *
-     * PrimeReact 11's `InputTags` commits one tag per Enter rather than exposing
-     * v10 Chips' `separator`; accepted for API compatibility, not applied.
-     */
     separator?: string;
-
-    /** When true, the current input is committed as a chip on blur. */
     addOnBlur?: boolean;
-
-    /** When true, the same chip value may be added multiple times. */
     allowDuplicate?: boolean;
-
-    /** Accessible name for each chip's remove button. Override to localize. Defaults to `'Remove'`. */
     removeAriaLabel?: string;
-
-    /** Extra CSS class name combined with the default `w-full`. */
     className?: string;
+    pt?: ChipsParts;
+    ptOptions?: object;
+    unstyled?: boolean;
+}
 
-    /** PrimeReact pass-through configuration applied to the underlying InputTags. */
-    pt?: InputTagsRootProps['pt'];
+const ChipsControl = (props: ChipsFieldComponentProps) => {
+    const [draft, setDraft] = useState('');
 
-    /** PrimeReact pass-through options applied to the underlying InputTags. */
-    ptOptions?: InputTagsRootProps['ptOptions'];
+    const commit = () => {
+        const candidates = (props.separator ? draft.split(props.separator) : [draft])
+            .map(value => value.trim())
+            .filter(Boolean);
+        if (candidates.length === 0) return;
+        const available = props.max === undefined ? candidates : candidates.slice(0, Math.max(0, props.max - props.value.length));
+        const next = props.allowDuplicate
+            ? [...props.value, ...available]
+            : [...props.value, ...available.filter(candidate => !props.value.includes(candidate))];
+        props.onChange(next);
+        setDraft('');
+    };
 
-    /** When true, disables every base PrimeReact style on the underlying InputTags. */
-    unstyled?: boolean;
-}
+    return (
+        <div
+            {...props.pt?.root}
+            className={['cratis-chips-field', 'w-full', props.pt?.root?.className, props.className].filter(Boolean).join(' ')}
+            onBlur={event => {
+                props.onBlur?.();
+                if (props.addOnBlur && !event.currentTarget.contains(event.relatedTarget)) commit();
+            }}
+            data-cratis-part='root'
+            data-invalid={props.invalid || undefined}
+        >
+            {props.value.map((item, index) => (
+                <span
+                    {...props.pt?.item}
+                    key={`${item}-${index}`}
+                    className={['cratis-chips-field__item', props.pt?.item?.className].filter(Boolean).join(' ')}
+                    data-cratis-part='item'
+                >
+                    <span>{item}</span>
+                    <button
+                        {...props.pt?.remove}
+                        type='button'
+                        className={['cratis-chips-field__remove', props.pt?.remove?.className].filter(Boolean).join(' ')}
+                        data-cratis-part='remove'
+                        aria-label={props.removeAriaLabel ?? 'Remove'}
+                        onClick={() => props.onChange(props.value.filter((_, itemIndex) => itemIndex !== index))}
+                    >×</button>
+                </span>
+            ))}
+            <input
+                {...props.pt?.input}
+                value={draft}
+                onChange={event => setDraft(event.target.value)}
+                onKeyDown={event => {
+                    if (event.key === 'Enter') {
+                        event.preventDefault();
+                        commit();
+                    }
+                }}
+                placeholder={props.placeholder}
+                aria-invalid={props.invalid || undefined}
+                className={['cratis-chips-field__input', props.pt?.input?.className].filter(Boolean).join(' ')}
+                data-cratis-part='input'
+            />
+        </div>
+    );
+};
 
-/**
- * A tag/chip input field bound to a `string[]` property on a Cratis Arc
- * command. Each entered token becomes a chip; `separator` splits pasted
- * input into multiple chips at once. See {@link InputTextField} for the
- * full `value={c => c.prop}` binding model.
- *
- * ```tsx
- * <ChipsField value={c => c.tags} title="Tags" separator="," />
- * ```
- */
+/** A token input bound to a string array property on an Arc command. */
 export const ChipsField = asCommandFormField<ChipsFieldComponentProps>(
-    (props) => (
-        // PrimeReact 11's InputTags is compositional with render-prop parts: Items
-        // renders one node per tag, Control renders the text-entry input. `onBlur`
-        // rides the wrapping div because React blur bubbles (focusout).
-        <div className={props.className ? `w-full ${props.className}` : 'w-full'} onBlur={props.onBlur}>
-            <InputTags.Root
-                value={props.value}
-                onValueChange={(e: InputTagsRootValueChangeEvent) => props.onChange(e.value ?? [])}
-                invalid={props.invalid}
-                max={props.max}
-                addOnBlur={props.addOnBlur}
-                allowDuplicate={props.allowDuplicate}
-                pt={props.pt}
-                ptOptions={props.ptOptions}
-                unstyled={props.unstyled}>
-                <InputTags.Items>
-                    {({ item, index, remove, itemProps }) => (
-                        <span key={index} {...itemProps} className="cratis-inputtags-item">
-                            <span>{item}</span>
-                            <button type="button" aria-label={props.removeAriaLabel ?? 'Remove'} onClick={remove}>
-                                <i className="pi pi-times-circle" />
-                            </button>
-                        </span>
-                    )}
-                </InputTags.Items>
-                <InputTags.Control>
-                    {({ controlProps }) => <input {...controlProps} placeholder={props.placeholder} />}
-                </InputTags.Control>
-            </InputTags.Root>
-        </div>
-    ),
+    ChipsControl,
     {
         defaultValue: [],
-        extractValue: (e: unknown) => {
-            if (!Array.isArray(e)) {
-                return [];
-            }
-
-            return e.filter((item): item is string => typeof item === 'string');
-        }
-    }
+        extractValue: (value: unknown) => Array.isArray(value)
+            ? value.filter((item): item is string => typeof item === 'string')
+            : [],
+    },
 );
diff --git a/Source/CommandForm/fields/ColorPickerField.tsx b/Source/CommandForm/fields/ColorPickerField.tsx
index c7140c74..89f505ee 100644
--- a/Source/CommandForm/fields/ColorPickerField.tsx
+++ b/Source/CommandForm/fields/ColorPickerField.tsx
@@ -1,95 +1,59 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { asCommandFormField, WrappedFieldProps } from '@cratis/arc.react/commands';
-import { InputColor } from 'primereact/inputcolor';
-import { parseColor } from '@primereact/headless/inputcolor';
-import type { InputColorRootProps, InputColorRootChangeEvent } from '@primereact/types/primitive/inputcolor';
-import React from 'react';
+import type { HTMLAttributes, InputHTMLAttributes } from 'react';
+import { asCommandFormField, type WrappedFieldProps } from '@cratis/arc.react/commands';
 
-/** Parse a bare hex string (no leading `#`) into a color, falling back on invalid input. */
-const toColor = (hex: string, fallback: string) => {
-    const candidate = typeof hex === 'string' && hex.length > 0 ? hex : fallback;
-    try {
-        return parseColor(`#${candidate}`);
-    } catch {
-        return parseColor(`#${fallback}`);
-    }
-};
+interface ColorPickerParts {
+    root?: HTMLAttributes<HTMLDivElement>;
+    input?: InputHTMLAttributes<HTMLInputElement>;
+    value?: HTMLAttributes<HTMLOutputElement>;
+}
 
-/**
- * Component-level props for {@link ColorPickerField}.
- */
 interface ColorPickerFieldComponentProps extends WrappedFieldProps<string> {
-    /**
-     * When true, renders the color picker inline rather than as a popover.
-     *
-     * PrimeReact 11's InputColor is composed inline (area + sliders + swatch); the
-     * v10 popover mode is not reproduced here. Accepted for API compatibility.
-     */
     inline?: boolean;
-
-    /** Initial color shown when the bound property is empty. Defaults to `'000000'`. */
     defaultColor?: string;
-
-    /** Extra CSS class name forwarded to the underlying InputColor. */
     className?: string;
-
-    /** PrimeReact pass-through configuration applied to the underlying InputColor. */
-    pt?: InputColorRootProps['pt'];
-
-    /** PrimeReact pass-through options applied to the underlying InputColor. */
-    ptOptions?: InputColorRootProps['ptOptions'];
-
-    /** When true, disables every base PrimeReact style on the underlying InputColor. */
+    pt?: ColorPickerParts;
+    ptOptions?: object;
     unstyled?: boolean;
 }
 
-/**
- * A color picker field bound to a `string` property on a Cratis Arc command,
- * holding a hex color value without the leading `#` (e.g. `"60a5fa"`). Set
- * `inline` to render the picker inline rather than as a popover. See
- * {@link InputTextField} for the full `value={c => c.prop}` binding model.
- *
- * ```tsx
- * <ColorPickerField value={c => c.accentColor} title="Accent" inline />
- * ```
- */
+const normalizeHex = (value: string, fallback: string) =>
+    /^[0-9a-f]{6}$/i.test(value) ? value : fallback;
+
+/** A native color picker bound to a bare six-digit hex string on an Arc command. */
 export const ColorPickerField = asCommandFormField<ColorPickerFieldComponentProps>(
     (props) => {
-        const defaultColor = props.defaultColor ?? '000000';
-        // InputColor exposes no `invalid` prop, so surface the invalid state as a class on the
-        // wrapper — the same `p-invalid` token the other fields emit; it no-ops when unstyled.
-        const invalidClass = props.invalid ? 'p-invalid' : undefined;
-        const className = [invalidClass, props.className].filter(Boolean).join(' ') || undefined;
-
+        const value = normalizeHex(props.value, normalizeHex(props.defaultColor ?? '000000', '000000'));
         return (
-            // PrimeReact 11's InputColor is compositional (area + hue slider + swatch).
-            // `onBlur` rides the wrapping div because React blur bubbles (focusout).
-            <div className={className} onBlur={props.onBlur}>
-                <InputColor.Root
-                    value={toColor(props.value, defaultColor)}
-                    onValueChange={(e: InputColorRootChangeEvent) => props.onChange(e.value.toString('hex').replace('#', ''))}
-                    pt={props.pt}
-                    ptOptions={props.ptOptions}
-                    unstyled={props.unstyled}>
-                    <InputColor.Area>
-                        <InputColor.AreaBackground />
-                        <InputColor.AreaHandle />
-                    </InputColor.Area>
-                    <InputColor.Slider>
-                        <InputColor.SliderTrack />
-                        <InputColor.SliderHandle />
-                    </InputColor.Slider>
-                    <InputColor.Swatch>
-                        <InputColor.SwatchBackground />
-                    </InputColor.Swatch>
-                </InputColor.Root>
+            <div
+                {...props.pt?.root}
+                className={['cratis-color-field', props.pt?.root?.className, props.className].filter(Boolean).join(' ')}
+                onBlur={props.onBlur}
+                data-cratis-part='root'
+                data-invalid={props.invalid || undefined}
+                data-inline={props.inline || undefined}
+            >
+                <input
+                    {...props.pt?.input}
+                    type='color'
+                    value={`#${value}`}
+                    onChange={props.onChange}
+                    aria-invalid={props.invalid || undefined}
+                    className={['cratis-color-field__input', props.pt?.input?.className].filter(Boolean).join(' ')}
+                    data-cratis-part='input'
+                />
+                <output
+                    {...props.pt?.value}
+                    className={['cratis-color-field__value', props.pt?.value?.className].filter(Boolean).join(' ')}
+                    data-cratis-part='value'
+                >#{value}</output>
             </div>
         );
     },
     {
         defaultValue: '',
-        extractValue: (e: unknown) => typeof e === 'string' ? e : ''
-    }
+        extractValue: (event: React.ChangeEvent<HTMLInputElement>) => event.target.value.replace('#', ''),
+    },
 );
diff --git a/Source/CommandForm/fields/Fields.css b/Source/CommandForm/fields/Fields.css
new file mode 100644
index 00000000..87a49250
--- /dev/null
+++ b/Source/CommandForm/fields/Fields.css
@@ -0,0 +1,131 @@
+/* Copyright (c) Cratis. All rights reserved. */
+/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */
+
+.cratis-field-input {
+    min-height: 2.5rem;
+    padding: 0.5rem 0.7rem;
+    border: 1px solid var(--cratis-surface-border);
+    border-radius: var(--cratis-border-radius);
+    background: var(--cratis-surface-card);
+    color: var(--cratis-text-color);
+    font: inherit;
+    box-shadow: 0 1px 2px color-mix(in srgb, var(--cratis-text-color) 5%, transparent);
+}
+.cratis-field-input::placeholder { color: var(--cratis-text-color-secondary); }
+.cratis-field-input:focus-visible { outline: none; border-color: var(--cratis-primary-color); box-shadow: var(--cratis-focus-ring); }
+.cratis-field-input[data-invalid='true'], .cratis-field-input[aria-invalid='true'] { border-color: var(--cratis-red-500); }
+.cratis-field-textarea { resize: vertical; }
+.cratis-number-field, .cratis-password-field { position: relative; display: flex; }
+.cratis-password-field .cratis-field-input { padding-inline-end: 2.75rem; }
+.cratis-password-field__toggle {
+    position: absolute;
+    inset-inline-end: 0.35rem;
+    top: 50%;
+    display: inline-flex;
+    width: 2rem;
+    height: 2rem;
+    padding: 0;
+    align-items: center;
+    justify-content: center;
+    transform: translateY(-50%);
+    border: 0;
+    border-radius: 50%;
+    background: transparent;
+    color: var(--cratis-text-color-secondary);
+    cursor: pointer;
+}
+.cratis-password-field__toggle:hover { background: var(--cratis-surface-hover); }
+.cratis-password-field__toggle:focus-visible { outline: none; box-shadow: var(--cratis-focus-ring); }
+
+.cratis-choice-field { position: relative; display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; }
+.cratis-choice-field__native { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
+.cratis-checkbox__box {
+    display: inline-flex;
+    width: 1.25rem;
+    height: 1.25rem;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--cratis-surface-border);
+    border-radius: calc(var(--cratis-border-radius) * 0.65);
+    background: var(--cratis-surface-card);
+}
+.cratis-checkbox__indicator { opacity: 0; color: var(--cratis-primary-color-text); font-size: 0.85rem; }
+.cratis-choice-field__native:checked + .cratis-checkbox__box { border-color: var(--cratis-primary-color); background: var(--cratis-primary-color); }
+.cratis-choice-field__native:checked + .cratis-checkbox__box .cratis-checkbox__indicator { opacity: 1; }
+.cratis-choice-field__native:focus-visible + :is(.cratis-checkbox__box, .cratis-switch__control) { box-shadow: var(--cratis-focus-ring); }
+.cratis-choice-field[data-invalid='true'] :is(.cratis-checkbox__box, .cratis-switch__control) { border-color: var(--cratis-red-500); }
+
+.cratis-switch__control {
+    display: inline-flex;
+    width: 2.5rem;
+    height: 1.4rem;
+    padding: 0.15rem;
+    align-items: center;
+    border: 1px solid var(--cratis-surface-border);
+    border-radius: 999px;
+    background: var(--cratis-surface-100);
+    transition: background-color 140ms ease;
+}
+.cratis-switch__handle { width: 1rem; height: 1rem; border-radius: 50%; background: var(--cratis-surface-card); box-shadow: 0 1px 3px color-mix(in srgb, var(--cratis-text-color) 25%, transparent); transition: transform 140ms ease; }
+.cratis-choice-field__native:checked + .cratis-switch__control { border-color: var(--cratis-primary-color); background: var(--cratis-primary-color); }
+.cratis-choice-field__native:checked + .cratis-switch__control .cratis-switch__handle { transform: translateX(1.05rem); }
+
+.cratis-radio__box {
+    display: inline-flex;
+    width: 1.25rem;
+    height: 1.25rem;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--cratis-surface-border);
+    border-radius: 50%;
+    background: var(--cratis-surface-card);
+}
+.cratis-radio__indicator { width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--cratis-primary-color); opacity: 0; }
+.cratis-choice-field__native:checked + .cratis-radio__box { border-color: var(--cratis-primary-color); }
+.cratis-choice-field__native:checked + .cratis-radio__box .cratis-radio__indicator { opacity: 1; }
+.cratis-radio-group { display: flex; }
+.cratis-radio-group--vertical { flex-direction: column; gap: 0.5rem; }
+.cratis-radio-group--horizontal { flex-direction: row; flex-wrap: wrap; gap: 1rem; }
+
+.cratis-slider-field { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.75rem; }
+.cratis-slider-field__input { width: 100%; accent-color: var(--cratis-primary-color); }
+.cratis-slider-field__input:focus-visible { outline: none; box-shadow: var(--cratis-focus-ring); }
+.cratis-slider-field__value { min-width: 2.5rem; text-align: end; font-weight: 600; font-variant-numeric: tabular-nums; }
+
+.cratis-chips-field {
+    display: flex;
+    min-height: 2.5rem;
+    padding: 0.3rem;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 0.35rem;
+    border: 1px solid var(--cratis-surface-border);
+    border-radius: var(--cratis-border-radius);
+    background: var(--cratis-surface-card);
+}
+.cratis-chips-field:focus-within { border-color: var(--cratis-primary-color); box-shadow: var(--cratis-focus-ring); }
+.cratis-chips-field[data-invalid='true'] { border-color: var(--cratis-red-500); }
+.cratis-chips-field__item { display: inline-flex; padding: 0.3rem 0.45rem; align-items: center; gap: 0.3rem; border-radius: 999px; background: var(--cratis-surface-100); }
+.cratis-chips-field__remove { border: 0; background: transparent; color: inherit; cursor: pointer; }
+.cratis-chips-field__remove:focus-visible { outline: none; border-radius: 50%; box-shadow: var(--cratis-focus-ring); }
+.cratis-chips-field__input { min-width: 7rem; padding: 0.3rem; flex: 1; border: 0; outline: none; background: transparent; color: var(--cratis-text-color); font: inherit; }
+
+.cratis-color-field { display: inline-flex; align-items: center; gap: 0.6rem; }
+.cratis-color-field__input { width: 3rem; height: 2.5rem; padding: 0.2rem; border: 1px solid var(--cratis-surface-border); border-radius: var(--cratis-border-radius); background: var(--cratis-surface-card); }
+.cratis-color-field__input:focus-visible { outline: none; box-shadow: var(--cratis-focus-ring); }
+.cratis-color-field__value { font-family: ui-monospace, monospace; }
+
+.cratis-rating-field { display: inline-flex; align-items: center; }
+.cratis-rating-field__option { position: relative; cursor: pointer; }
+.cratis-rating-field__star { color: var(--cratis-surface-border); font-size: 1.4rem; line-height: 1; }
+.cratis-rating-field__star[data-selected='true'] { color: var(--cratis-orange-500); }
+.cratis-rating-field__option:focus-within .cratis-rating-field__star { border-radius: 0.2rem; box-shadow: var(--cratis-focus-ring); }
+
+@media (prefers-reduced-motion: reduce) {
+    .cratis-switch__control, .cratis-switch__handle { transition: none; }
+}
+
+@media (forced-colors: active) {
+    .cratis-field-input, .cratis-checkbox__box, .cratis-switch__control { border-color: CanvasText; }
+    .cratis-choice-field__native:checked + :is(.cratis-checkbox__box, .cratis-switch__control) { background: Highlight; }
+}
diff --git a/Source/CommandForm/fields/InputTextField.tsx b/Source/CommandForm/fields/InputTextField.tsx
index c7fd4816..aa2836f9 100644
--- a/Source/CommandForm/fields/InputTextField.tsx
+++ b/Source/CommandForm/fields/InputTextField.tsx
@@ -1,93 +1,38 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { InputText } from 'primereact/inputtext';
-import type { InputTextProps } from '@primereact/types/primitive/inputtext';
-import React from 'react';
-import { asCommandFormField, WrappedFieldProps } from '@cratis/arc.react/commands';
+import type { InputHTMLAttributes } from 'react';
+import { asCommandFormField, type WrappedFieldProps } from '@cratis/arc.react/commands';
+
+interface InputTextParts { root?: InputHTMLAttributes<HTMLInputElement>; }
 
-/**
- * Component-level props for {@link InputTextField}. Combined at runtime with
- * the field-level props injected by `asCommandFormField` (`value`, `onChange`,
- * `onBlur`, `invalid`).
- */
 interface InputTextComponentProps extends WrappedFieldProps<string> {
-    /** HTML input type. Defaults to `'text'`. */
     type?: 'text' | 'email' | 'password' | 'color' | 'date' | 'datetime-local' | 'time' | 'url' | 'tel' | 'search';
-
-    /** Placeholder text shown when the field is empty. */
     placeholder?: string;
-
-    /** Extra CSS class name forwarded to the PrimeReact InputText. Combined with the default `w-full`. */
     className?: string;
-
-    /** PrimeReact pass-through configuration applied to the underlying InputText. */
-    pt?: InputTextProps['pt'];
-
-    /** PrimeReact pass-through options applied to the underlying InputText. */
-    ptOptions?: InputTextProps['ptOptions'];
-
-    /** When true, disables every base PrimeReact style on the underlying InputText. */
+    pt?: InputTextParts;
+    ptOptions?: object;
     unstyled?: boolean;
 }
 
-/**
- * A single-line text field for use inside a Cratis Arc `CommandForm` (or any
- * of its dialog-hosted variants like {@link CommandDialog},
- * {@link StepperCommandDialog}, {@link CommandStepper}).
- *
- * ## How it binds to the command
- *
- * The `value` prop is an accessor function — `value={c => c.name}` — where
- * `c` is the typed command instance. The `asCommandFormField` HOC from
- * `@cratis/arc.react/commands` reads the accessor, subscribes the field to
- * that property on the form context, and threads validation state back to
- * the input. You never read or write the command instance directly; the
- * field handles it.
- *
- * The accessor pattern means the *binding* is fully typechecked end-to-end
- * — if the command's `name` property is a `string`, the field's value type
- * is inferred as `string` and TypeScript catches any mismatch.
- *
- * ## What's unique vs. PrimeReact's `InputText`
- *
- * - Bound to a single command property, no manual `onChange`/`setState`.
- * - Validation state (`invalid` border) is driven automatically from the
- *   `CommandResult.validationResults` returned by the backend's `Handle()`.
- * - All HTML input `type`s PrimeReact supports (`text`, `email`,
- *   `password`, `url`, `tel`, `date`, `datetime-local`, `time`, `color`,
- *   `search`) work the same way.
- *
- * ## Styling
- *
- * Forwards `pt` / `ptOptions` / `unstyled` / `className` to the underlying
- * `InputText`. The default `w-full` class is preserved when consumer
- * `className` is supplied. See [pass-through cheat sheet](../../../Documentation/Styling/pass-through.md).
- *
- * ```tsx
- * <InputTextField value={c => c.email}
- *                 type="email"
- *                 title="Email"
- *                 placeholder="you@example.com" />
- * ```
- */
+/** A single-line text field bound to a string property on an Arc command. */
 export const InputTextField = asCommandFormField<InputTextComponentProps>(
     (props) => (
-        <InputText
-            type={props.type || 'text'}
+        <input
+            {...props.pt?.root}
+            type={props.type ?? 'text'}
             value={props.value}
             onChange={props.onChange}
             onBlur={props.onBlur}
-            invalid={props.invalid}
             placeholder={props.placeholder}
-            className={props.className ? `w-full ${props.className}` : 'w-full'}
-            pt={props.pt}
-            ptOptions={props.ptOptions}
-            unstyled={props.unstyled}
+            aria-invalid={props.invalid || undefined}
+            data-invalid={props.invalid || undefined}
+            data-cratis-part='input'
+            className={['cratis-field-input', 'w-full', props.pt?.root?.className, props.className].filter(Boolean).join(' ')}
         />
     ),
     {
         defaultValue: '',
-        extractValue: (e: React.ChangeEvent<HTMLInputElement>) => e.target.value
-    }
+        extractValue: (event: React.ChangeEvent<HTMLInputElement>) => event.target.value,
+    },
 );
diff --git a/Source/CommandForm/fields/NumberField.tsx b/Source/CommandForm/fields/NumberField.tsx
index 7e9d9311..a663b5e4 100644
--- a/Source/CommandForm/fields/NumberField.tsx
+++ b/Source/CommandForm/fields/NumberField.tsx
@@ -1,72 +1,53 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { InputNumber } from 'primereact/inputnumber';
-import type { InputNumberRootProps, InputNumberRootValueChangeEvent } from '@primereact/types/primitive/inputnumber';
-import React from 'react';
-import { asCommandFormField, WrappedFieldProps } from '@cratis/arc.react/commands';
+import type { HTMLAttributes, InputHTMLAttributes } from 'react';
+import { asCommandFormField, type WrappedFieldProps } from '@cratis/arc.react/commands';
+
+interface NumberFieldParts {
+    root?: HTMLAttributes<HTMLDivElement>;
+    input?: InputHTMLAttributes<HTMLInputElement>;
+}
 
-/**
- * Component-level props for {@link NumberField}.
- */
 interface NumberFieldComponentProps extends WrappedFieldProps<number> {
-    /** Placeholder text shown when the field is empty. */
     placeholder?: string;
-
-    /** Minimum allowed value. */
     min?: number;
-
-    /** Maximum allowed value. */
     max?: number;
-
-    /** Increment/decrement step applied by the spinner buttons. */
     step?: number;
-
-    /** Extra CSS class name combined with the default `w-full`. */
     className?: string;
-
-    /** PrimeReact pass-through configuration applied to the underlying InputNumber. */
-    pt?: InputNumberRootProps['pt'];
-
-    /** PrimeReact pass-through options applied to the underlying InputNumber. */
-    ptOptions?: InputNumberRootProps['ptOptions'];
-
-    /** When true, disables every base PrimeReact style on the underlying InputNumber. */
+    pt?: NumberFieldParts;
+    ptOptions?: object;
     unstyled?: boolean;
 }
 
-/**
- * A numeric input field bound to a `number` property on a Cratis Arc
- * command. Defaults to integer mode without thousands grouping; pass `step`
- * to enable spinner increments and `min` / `max` to clamp the range. See
- * {@link InputTextField} for the full `value={c => c.prop}` binding model.
- *
- * ```tsx
- * <NumberField value={c => c.quantity} title="Quantity" min={0} step={1} />
- * ```
- */
+/** A numeric field bound to a number property on an Arc command. */
 export const NumberField = asCommandFormField<NumberFieldComponentProps>(
     (props) => (
-        // PrimeReact 11's InputNumber is compositional (Root owns the numeric model,
-        // Input is the text field). `onBlur` rides on the wrapping div so the
-        // CommandForm's blur-timed validation still fires from the inner input.
-        <div onBlur={props.onBlur} className={props.className ? `w-full ${props.className}` : 'w-full'}>
-            <InputNumber.Root
+        <div
+            {...props.pt?.root}
+            onBlur={props.onBlur}
+            data-cratis-part='root'
+            className={['cratis-number-field', 'w-full', props.pt?.root?.className, props.className].filter(Boolean).join(' ')}
+        >
+            <input
+                {...props.pt?.input}
+                type='number'
                 value={props.value}
-                onValueChange={(e: InputNumberRootValueChangeEvent) => props.onChange(e.value ?? 0)}
-                invalid={props.invalid}
+                onChange={props.onChange}
+                placeholder={props.placeholder}
                 min={props.min}
                 max={props.max}
                 step={props.step}
-                pt={props.pt}
-                ptOptions={props.ptOptions}
-                unstyled={props.unstyled}>
-                <InputNumber.Input placeholder={props.placeholder} className="w-full" />
-            </InputNumber.Root>
+                aria-invalid={props.invalid || undefined}
+                data-invalid={props.invalid || undefined}
+                data-cratis-part='input'
+                className={['cratis-field-input', 'w-full', props.pt?.input?.className].filter(Boolean).join(' ')}
+            />
         </div>
     ),
     {
         defaultValue: 0,
-        extractValue: (e: unknown) => (typeof e === 'number' ? e : 0)
-    }
+        extractValue: (event: React.ChangeEvent<HTMLInputElement>) =>
+            Number.isNaN(event.target.valueAsNumber) ? 0 : event.target.valueAsNumber,
+    },
 );
diff --git a/Source/CommandForm/fields/PasswordField.tsx b/Source/CommandForm/fields/PasswordField.tsx
index a69d4ebf..0b6f41d1 100644
--- a/Source/CommandForm/fields/PasswordField.tsx
+++ b/Source/CommandForm/fields/PasswordField.tsx
@@ -1,51 +1,64 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { InputPassword } from 'primereact/inputpassword';
-import type { InputPasswordProps, InputPasswordValueChangeEvent } from '@primereact/types/primitive/inputpassword';
-import React from 'react';
-import { asCommandFormField, WrappedFieldProps } from '@cratis/arc.react/commands';
+import { useState, type ButtonHTMLAttributes, type HTMLAttributes, type InputHTMLAttributes } from 'react';
+import { asCommandFormField, type WrappedFieldProps } from '@cratis/arc.react/commands';
+
+interface PasswordParts {
+    root?: HTMLAttributes<HTMLDivElement>;
+    input?: InputHTMLAttributes<HTMLInputElement>;
+    toggle?: ButtonHTMLAttributes<HTMLButtonElement>;
+}
 
-/** Component-level props for {@link PasswordField}. */
 interface PasswordFieldComponentProps extends WrappedFieldProps<string> {
-    /** Placeholder text. */
     placeholder?: string;
-    /** Extra CSS class name combined with the default `w-full`. */
     className?: string;
-    /** PrimeReact pass-through configuration applied to the underlying InputPassword. */
-    pt?: InputPasswordProps['pt'];
-    /** PrimeReact pass-through options applied to the underlying InputPassword. */
-    ptOptions?: InputPasswordProps['ptOptions'];
-    /** When true, disables every base PrimeReact style on the underlying InputPassword. */
+    pt?: PasswordParts;
+    ptOptions?: object;
     unstyled?: boolean;
+    showLabel?: string;
+    hideLabel?: string;
 }
 
-/**
- * A masked password field bound to a `string` property on a Cratis Arc command,
- * with a built-in show/hide toggle. See {@link InputTextField} for the full
- * `value={c => c.prop}` binding model.
- *
- * ```tsx
- * <PasswordField value={c => c.password} title="Password" />
- * ```
- */
-export const PasswordField = asCommandFormField<PasswordFieldComponentProps>(
-    (props) => (
-        <div onBlur={props.onBlur} className={props.className ? `w-full ${props.className}` : 'w-full'}>
-            <InputPassword
+const PasswordControl = (props: PasswordFieldComponentProps) => {
+    const [visible, setVisible] = useState(false);
+    return (
+        <div
+            {...props.pt?.root}
+            onBlur={props.onBlur}
+            className={['cratis-password-field', 'w-full', props.pt?.root?.className, props.className].filter(Boolean).join(' ')}
+            data-cratis-part='root'
+        >
+            <input
+                {...props.pt?.input}
+                type={visible ? 'text' : 'password'}
                 value={props.value}
-                onValueChange={props.onChange}
-                invalid={props.invalid}
+                onChange={props.onChange}
                 placeholder={props.placeholder}
-                className="w-full"
-                pt={props.pt}
-                ptOptions={props.ptOptions}
-                unstyled={props.unstyled}
+                aria-invalid={props.invalid || undefined}
+                data-invalid={props.invalid || undefined}
+                className={['cratis-field-input', 'w-full', props.pt?.input?.className].filter(Boolean).join(' ')}
+                data-cratis-part='input'
             />
+            <button
+                {...props.pt?.toggle}
+                type='button'
+                className={['cratis-password-field__toggle', props.pt?.toggle?.className].filter(Boolean).join(' ')}
+                data-cratis-part='toggle'
+                aria-label={visible ? props.hideLabel ?? 'Hide password' : props.showLabel ?? 'Show password'}
+                onClick={() => setVisible(current => !current)}
+            >
+                <span aria-hidden='true'>{visible ? '◉' : '○'}</span>
+            </button>
         </div>
-    ),
+    );
+};
+
+/** A masked password field bound to a string property on an Arc command. */
+export const PasswordField = asCommandFormField<PasswordFieldComponentProps>(
+    PasswordControl,
     {
         defaultValue: '',
-        extractValue: (e: InputPasswordValueChangeEvent) => e.value
-    }
+        extractValue: (event: React.ChangeEvent<HTMLInputElement>) => event.target.value,
+    },
 );
diff --git a/Source/CommandForm/fields/RadioButtonField.tsx b/Source/CommandForm/fields/RadioButtonField.tsx
index 2b87f147..b18b6ee9 100644
--- a/Source/CommandForm/fields/RadioButtonField.tsx
+++ b/Source/CommandForm/fields/RadioButtonField.tsx
@@ -1,71 +1,60 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { RadioButton } from 'primereact/radiobutton';
-import type { RadioButtonRootProps, RadioButtonRootChangeEvent } from '@primereact/types/primitive/radiobutton';
-import React from 'react';
-import { asCommandFormField, WrappedFieldProps } from '@cratis/arc.react/commands';
+import type { HTMLAttributes, InputHTMLAttributes } from 'react';
+import { asCommandFormField, type WrappedFieldProps } from '@cratis/arc.react/commands';
+
+interface RadioParts {
+    root?: HTMLAttributes<HTMLLabelElement>;
+    input?: InputHTMLAttributes<HTMLInputElement>;
+    box?: HTMLAttributes<HTMLSpanElement>;
+    indicator?: HTMLAttributes<HTMLSpanElement>;
+}
 
-/**
- * Component-level props for {@link RadioButtonField}.
- */
 interface RadioButtonFieldComponentProps extends WrappedFieldProps<string | number> {
-    /** Optional label displayed next to the radio button. */
     label?: string;
-
-    /**
-     * The value this radio button represents. The field is selected when the
-     * bound command property equals this value.
-     */
     buttonValue: string | number;
-
-    /** Extra CSS class name forwarded to the underlying RadioButton. */
     className?: string;
-
-    /** PrimeReact pass-through configuration applied to the underlying RadioButton. */
-    pt?: RadioButtonRootProps['pt'];
-
-    /** PrimeReact pass-through options applied to the underlying RadioButton. */
-    ptOptions?: RadioButtonRootProps['ptOptions'];
-
-    /** When true, disables every base PrimeReact style on the underlying RadioButton. */
+    pt?: RadioParts;
+    ptOptions?: object;
     unstyled?: boolean;
 }
 
-/**
- * A single radio button bound to a `string` or `number` property on a
- * Cratis Arc command. Multiple {@link RadioButtonField} instances with the
- * same `value` accessor and distinct `buttonValue` props together form a
- * mutually-exclusive group — useful when the radios need to be laid out
- * non-contiguously in the form. For the common case where the radios sit
- * in one place, prefer {@link RadioGroupField} which manages the group as
- * a single field. See {@link InputTextField} for the full
- * `value={c => c.prop}` binding model.
- */
+/** A single radio option bound to a string or number property on an Arc command. */
 export const RadioButtonField = asCommandFormField<RadioButtonFieldComponentProps>(
     (props) => (
-        // A real <label> wraps the control so the visible text is its accessible
-        // name (implicit association). `onBlur` rides on the label because React
-        // blur bubbles (focusout).
-        <label className="flex items-center" onBlur={props.onBlur}>
-            <RadioButton.Root
-                value={props.buttonValue}
+        <label
+            {...props.pt?.root}
+            className={['cratis-choice-field', props.pt?.root?.className, props.className].filter(Boolean).join(' ')}
+            onBlur={props.onBlur}
+            data-cratis-part='root'
+            data-invalid={props.invalid || undefined}
+        >
+            <input
+                {...props.pt?.input}
+                type='radio'
                 checked={props.value === props.buttonValue}
-                onCheckedChange={(e: RadioButtonRootChangeEvent) => { if (e.checked) props.onChange(props.buttonValue); }}
-                invalid={props.invalid}
-                className={props.className}
-                pt={props.pt}
-                ptOptions={props.ptOptions}
-                unstyled={props.unstyled}>
-                <RadioButton.Box>
-                    <RadioButton.Indicator />
-                </RadioButton.Box>
-            </RadioButton.Root>
-            {props.label && <span className="ml-2">{props.label}</span>}
+                onChange={event => {
+                    if (event.target.checked) props.onChange(props.buttonValue);
+                }}
+                aria-invalid={props.invalid || undefined}
+                className={['cratis-choice-field__native', props.pt?.input?.className].filter(Boolean).join(' ')}
+                data-cratis-part='input'
+            />
+            <span
+                {...props.pt?.box}
+                className={['cratis-radio__box', props.pt?.box?.className].filter(Boolean).join(' ')}
+                data-cratis-part='box'
+                aria-hidden='true'
+            >
+                <span
+                    {...props.pt?.indicator}
+                    className={['cratis-radio__indicator', props.pt?.indicator?.className].filter(Boolean).join(' ')}
+                    data-cratis-part='indicator'
+                />
+            </span>
+            {props.label && <span className='cratis-choice-field__label'>{props.label}</span>}
         </label>
     ),
-    {
-        defaultValue: '',
-        extractValue: (e: unknown) => e as string | number
-    }
+    { defaultValue: '', extractValue: (value: unknown) => value as string | number },
 );
diff --git a/Source/CommandForm/fields/RadioGroupField.tsx b/Source/CommandForm/fields/RadioGroupField.tsx
index 7fc8f375..60ca6fb5 100644
--- a/Source/CommandForm/fields/RadioGroupField.tsx
+++ b/Source/CommandForm/fields/RadioGroupField.tsx
@@ -1,89 +1,81 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { RadioButton } from 'primereact/radiobutton';
-import type { RadioButtonRootProps, RadioButtonRootChangeEvent } from '@primereact/types/primitive/radiobutton';
-import React from 'react';
-import { asCommandFormField, WrappedFieldProps } from '@cratis/arc.react/commands';
+import type { HTMLAttributes, InputHTMLAttributes } from 'react';
+import { asCommandFormField, type WrappedFieldProps } from '@cratis/arc.react/commands';
+
+interface RadioGroupParts {
+    root?: HTMLAttributes<HTMLDivElement>;
+    option?: HTMLAttributes<HTMLLabelElement>;
+    input?: InputHTMLAttributes<HTMLInputElement>;
+    box?: HTMLAttributes<HTMLSpanElement>;
+    indicator?: HTMLAttributes<HTMLSpanElement>;
+}
 
-/**
- * Component-level props for {@link RadioGroupField}.
- */
 interface RadioGroupFieldComponentProps extends WrappedFieldProps<string | number> {
-    /** Source array of objects to populate the radio options. */
     options: Array<Record<string, unknown>>;
-
-    /** Property name on each option object used as the visible label. */
     optionLabel: string;
-
-    /** Property name on each option object used as the underlying value. */
     optionValue: string;
-
-    /** Layout orientation. Defaults to `'vertical'`. */
     layout?: 'horizontal' | 'vertical';
-    /** Extra CSS class name forwarded to the group container. */
     className?: string;
-    /** PrimeReact pass-through configuration applied to every inner RadioButton. */
-    pt?: RadioButtonRootProps['pt'];
-    /** PrimeReact pass-through options applied to every inner RadioButton. */
-    ptOptions?: RadioButtonRootProps['ptOptions'];
-    /** When true, disables every base PrimeReact style on the inner RadioButtons. */
+    pt?: RadioGroupParts;
+    ptOptions?: object;
     unstyled?: boolean;
 }
 
-/**
- * A radio-button group field bound to a `string` or `number` property on a
- * Cratis Arc command. Use for small mutually-exclusive choice sets where
- * all options should be visible at once; for larger sets, prefer
- * {@link DropdownField}. See {@link InputTextField} for the full
- * `value={c => c.prop}` binding model.
- *
- * ```tsx
- * <RadioGroupField value={c => c.priority}
- *                  options={priorityOptions}
- *                  optionLabel="label"
- *                  optionValue="value"
- *                  layout="horizontal"
- *                  title="Priority" />
- * ```
- */
+/** A visible radio group bound to a string or number property on an Arc command. */
 export const RadioGroupField = asCommandFormField<RadioGroupFieldComponentProps>(
-    (props) => {
-        const layout = props.layout ?? 'vertical';
-        const layoutClasses = layout === 'horizontal' ? 'flex-row gap-4 flex-wrap' : 'flex-col gap-2';
-        const containerClassName = props.className
-            ? `flex ${layoutClasses} ${props.className}`
-            : `flex ${layoutClasses}`;
-        return (
-            <div className={containerClassName}>
-                {props.options.map((option) => {
-                    const optValue = option[props.optionValue] as string | number;
-                    const optLabel = option[props.optionLabel] as string;
-                    return (
-                        // A real <label> per option so the visible text is the radio's
-                        // accessible name. `onBlur` rides on the label (blur bubbles).
-                        <label key={String(optValue)} className="flex items-center" onBlur={props.onBlur}>
-                            <RadioButton.Root
-                                value={optValue}
-                                checked={props.value === optValue}
-                                onCheckedChange={(e: RadioButtonRootChangeEvent) => { if (e.checked) props.onChange(optValue); }}
-                                invalid={props.invalid}
-                                pt={props.pt}
-                                ptOptions={props.ptOptions}
-                                unstyled={props.unstyled}>
-                                <RadioButton.Box>
-                                    <RadioButton.Indicator />
-                                </RadioButton.Box>
-                            </RadioButton.Root>
-                            <span className="ml-2">{optLabel}</span>
-                        </label>
-                    );
-                })}
-            </div>
-        );
-    },
-    {
-        defaultValue: '',
-        extractValue: (e: unknown) => e as string | number
-    }
+    (props) => (
+        <div
+            {...props.pt?.root}
+            role='radiogroup'
+            className={[
+                'cratis-radio-group',
+                `cratis-radio-group--${props.layout ?? 'vertical'}`,
+                props.pt?.root?.className,
+                props.className,
+            ].filter(Boolean).join(' ')}
+            data-cratis-part='root'
+        >
+            {props.options.map(option => {
+                const value = option[props.optionValue] as string | number;
+                const label = String(option[props.optionLabel] ?? value);
+                return (
+                    <label
+                        {...props.pt?.option}
+                        key={String(value)}
+                        className={['cratis-choice-field', props.pt?.option?.className].filter(Boolean).join(' ')}
+                        onBlur={props.onBlur}
+                        data-cratis-part='option'
+                    >
+                        <input
+                            {...props.pt?.input}
+                            type='radio'
+                            checked={props.value === value}
+                            onChange={event => {
+                                if (event.target.checked) props.onChange(value);
+                            }}
+                            aria-invalid={props.invalid || undefined}
+                            className={['cratis-choice-field__native', props.pt?.input?.className].filter(Boolean).join(' ')}
+                            data-cratis-part='input'
+                        />
+                        <span
+                            {...props.pt?.box}
+                            className={['cratis-radio__box', props.pt?.box?.className].filter(Boolean).join(' ')}
+                            data-cratis-part='box'
+                            aria-hidden='true'
+                        >
+                            <span
+                                {...props.pt?.indicator}
+                                className={['cratis-radio__indicator', props.pt?.indicator?.className].filter(Boolean).join(' ')}
+                                data-cratis-part='indicator'
+                            />
+                        </span>
+                        <span className='cratis-choice-field__label'>{label}</span>
+                    </label>
+                );
+            })}
+        </div>
+    ),
+    { defaultValue: '', extractValue: (value: unknown) => value as string | number },
 );
diff --git a/Source/CommandForm/fields/RatingField.tsx b/Source/CommandForm/fields/RatingField.tsx
index 2b25495a..c885124e 100644
--- a/Source/CommandForm/fields/RatingField.tsx
+++ b/Source/CommandForm/fields/RatingField.tsx
@@ -1,60 +1,68 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { Rating } from 'primereact/rating';
-import type { RatingRootProps, RatingRootValueChangeEvent } from '@primereact/types/primitive/rating';
-import React from 'react';
-import { asCommandFormField, WrappedFieldProps } from '@cratis/arc.react/commands';
+import type { HTMLAttributes, InputHTMLAttributes } from 'react';
+import { asCommandFormField, type WrappedFieldProps } from '@cratis/arc.react/commands';
+
+interface RatingParts {
+    root?: HTMLAttributes<HTMLDivElement>;
+    option?: HTMLAttributes<HTMLLabelElement>;
+    input?: InputHTMLAttributes<HTMLInputElement>;
+    star?: HTMLAttributes<HTMLSpanElement>;
+}
 
-/** Component-level props for {@link RatingField}. */
 interface RatingFieldComponentProps extends WrappedFieldProps<number> {
-    /** Number of stars. Defaults to `5`. */
     stars?: number;
-    /** Builds the accessible name for each star. Override to localize. Defaults to `` `${n} star(s)` ``. */
     starAriaLabel?: (starValue: number) => string;
-    /** Extra CSS class name. */
     className?: string;
-    /** PrimeReact pass-through configuration applied to the underlying Rating. */
-    pt?: RatingRootProps['pt'];
-    /** PrimeReact pass-through options applied to the underlying Rating. */
-    ptOptions?: RatingRootProps['ptOptions'];
-    /** When true, disables every base PrimeReact style on the underlying Rating. */
+    pt?: RatingParts;
+    ptOptions?: object;
     unstyled?: boolean;
 }
 
-/**
- * A star-rating field bound to a `number` property on a Cratis Arc command.
- * See {@link InputTextField} for the full `value={c => c.prop}` binding model.
- *
- * ```tsx
- * <RatingField value={c => c.rating} title="Rating" stars={5} />
- * ```
- */
+/** A star rating bound to a number property on an Arc command. */
 export const RatingField = asCommandFormField<RatingFieldComponentProps>(
     (props) => (
-        <div onBlur={props.onBlur} className={props.className}>
-            <Rating.Root
-                value={props.value}
-                onValueChange={props.onChange}
-                invalid={props.invalid}
-                pt={props.pt}
-                ptOptions={props.ptOptions}
-                unstyled={props.unstyled}>
-                {Array.from({ length: props.stars ?? 5 }, (_, index) => (
-                    <Rating.Option
-                        key={index}
-                        value={index + 1}
-                        index={index}
-                        aria-label={(props.starAriaLabel ?? ((n) => `${n} ${n === 1 ? 'star' : 'stars'}`))(index + 1)}>
-                        <Rating.On><i className="pi pi-star-fill" /></Rating.On>
-                        <Rating.Off><i className="pi pi-star" /></Rating.Off>
-                    </Rating.Option>
-                ))}
-            </Rating.Root>
+        <div
+            {...props.pt?.root}
+            role='radiogroup'
+            className={['cratis-rating-field', props.pt?.root?.className, props.className].filter(Boolean).join(' ')}
+            onBlur={props.onBlur}
+            data-cratis-part='root'
+            data-invalid={props.invalid || undefined}
+        >
+            {Array.from({ length: props.stars ?? 5 }, (_, index) => {
+                const starValue = index + 1;
+                const label = (props.starAriaLabel ?? ((value: number) => `${value} ${value === 1 ? 'star' : 'stars'}`))(starValue);
+                return (
+                    <label
+                        {...props.pt?.option}
+                        key={starValue}
+                        className={['cratis-rating-field__option', props.pt?.option?.className].filter(Boolean).join(' ')}
+                        data-cratis-part='option'
+                    >
+                        <input
+                            {...props.pt?.input}
+                            type='radio'
+                            checked={props.value === starValue}
+                            onChange={event => {
+                                if (event.target.checked) props.onChange(starValue);
+                            }}
+                            aria-label={label}
+                            className={['cratis-choice-field__native', props.pt?.input?.className].filter(Boolean).join(' ')}
+                            data-cratis-part='input'
+                        />
+                        <span
+                            {...props.pt?.star}
+                            className={['cratis-rating-field__star', props.pt?.star?.className].filter(Boolean).join(' ')}
+                            data-cratis-part='star'
+                            data-selected={starValue <= props.value || undefined}
+                            aria-hidden='true'
+                        >★</span>
+                    </label>
+                );
+            })}
         </div>
     ),
-    {
-        defaultValue: 0,
-        extractValue: (e: RatingRootValueChangeEvent) => e.value
-    }
+    { defaultValue: 0, extractValue: (value: unknown) => typeof value === 'number' ? value : 0 },
 );
diff --git a/Source/CommandForm/fields/SliderField.tsx b/Source/CommandForm/fields/SliderField.tsx
index ed404e93..f36df6e3 100644
--- a/Source/CommandForm/fields/SliderField.tsx
+++ b/Source/CommandForm/fields/SliderField.tsx
@@ -1,71 +1,57 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { Slider } from 'primereact/slider';
-import type { SliderRootProps, SliderRootChangeEvent } from '@primereact/types/primitive/slider';
-import React from 'react';
-import { asCommandFormField, WrappedFieldProps } from '@cratis/arc.react/commands';
+import type { HTMLAttributes, InputHTMLAttributes } from 'react';
+import { asCommandFormField, type WrappedFieldProps } from '@cratis/arc.react/commands';
+
+interface SliderParts {
+    root?: HTMLAttributes<HTMLDivElement>;
+    input?: InputHTMLAttributes<HTMLInputElement>;
+    value?: HTMLAttributes<HTMLSpanElement>;
+}
 
-/**
- * Component-level props for {@link SliderField}.
- */
 interface SliderFieldComponentProps extends WrappedFieldProps<number> {
-    /** Minimum value. Defaults to `0`. */
     min?: number;
-
-    /** Maximum value. Defaults to `100`. */
     max?: number;
-
-    /** Increment between selectable values. Defaults to `1`. */
     step?: number;
-
-    /** Extra CSS class name combined with the default `w-full`. */
     className?: string;
-
-    /** PrimeReact pass-through configuration applied to the underlying Slider. */
-    pt?: SliderRootProps['pt'];
-
-    /** PrimeReact pass-through options applied to the underlying Slider. */
-    ptOptions?: SliderRootProps['ptOptions'];
-
-    /** When true, disables every base PrimeReact style on the underlying Slider. */
+    pt?: SliderParts;
+    ptOptions?: object;
     unstyled?: boolean;
 }
 
-/**
- * A horizontal slider field bound to a `number` property on a Cratis Arc
- * command. The current value is rendered below the track for feedback. See
- * {@link InputTextField} for the full `value={c => c.prop}` binding model.
- *
- * ```tsx
- * <SliderField value={c => c.volume} title="Volume" min={0} max={100} />
- * ```
- */
+/** A range slider bound to a number property on an Arc command. */
 export const SliderField = asCommandFormField<SliderFieldComponentProps>(
     (props) => (
-        <div className="w-full" onBlur={props.onBlur}>
-            <Slider.Root
+        <div
+            {...props.pt?.root}
+            className={['cratis-slider-field', 'w-full', props.pt?.root?.className, props.className].filter(Boolean).join(' ')}
+            onBlur={props.onBlur}
+            data-cratis-part='root'
+        >
+            <input
+                {...props.pt?.input}
+                type='range'
                 value={props.value}
-                onValueChange={(e: SliderRootChangeEvent) => props.onChange(Array.isArray(e.value) ? (e.value[0] ?? 0) : e.value)}
+                onChange={props.onChange}
                 min={props.min ?? 0}
                 max={props.max ?? 100}
                 step={props.step ?? 1}
-                className={props.className ? `w-full ${props.className}` : 'w-full'}
-                pt={props.pt}
-                ptOptions={props.ptOptions}
-                unstyled={props.unstyled}>
-                <Slider.Track>
-                    <Slider.Range />
-                </Slider.Track>
-                <Slider.Handle />
-            </Slider.Root>
-            <div className="text-center mt-2">
-                <span className="font-semibold">{props.value}</span>
-            </div>
+                aria-invalid={props.invalid || undefined}
+                className={['cratis-slider-field__input', props.pt?.input?.className].filter(Boolean).join(' ')}
+                data-cratis-part='input'
+            />
+            <span
+                {...props.pt?.value}
+                className={['cratis-slider-field__value', props.pt?.value?.className].filter(Boolean).join(' ')}
+                data-cratis-part='value'
+            >
+                {props.value}
+            </span>
         </div>
     ),
     {
         defaultValue: 0,
-        extractValue: (e: unknown) => (typeof e === 'number' ? e : 0)
-    }
+        extractValue: (event: React.ChangeEvent<HTMLInputElement>) => event.target.valueAsNumber,
+    },
 );
diff --git a/Source/CommandForm/fields/TextAreaField.tsx b/Source/CommandForm/fields/TextAreaField.tsx
index 27594138..cc65fd54 100644
--- a/Source/CommandForm/fields/TextAreaField.tsx
+++ b/Source/CommandForm/fields/TextAreaField.tsx
@@ -1,66 +1,40 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { Textarea } from 'primereact/textarea';
-import type { TextareaProps } from '@primereact/types/primitive/textarea';
-import React from 'react';
-import { asCommandFormField, WrappedFieldProps } from '@cratis/arc.react/commands';
+import type { TextareaHTMLAttributes } from 'react';
+import { asCommandFormField, type WrappedFieldProps } from '@cratis/arc.react/commands';
+
+interface TextAreaParts { root?: TextareaHTMLAttributes<HTMLTextAreaElement>; }
 
-/**
- * Component-level props for {@link TextAreaField}.
- */
 interface TextAreaFieldComponentProps extends WrappedFieldProps<string> {
-    /** Placeholder text shown when the field is empty. */
     placeholder?: string;
-
-    /** Number of visible text rows. Defaults to `5`. */
     rows?: number;
-
-    /** Number of visible character columns. */
     cols?: number;
-
-    /** Extra CSS class name combined with the default `w-full`. */
     className?: string;
-
-    /** PrimeReact pass-through configuration applied to the underlying Textarea. */
-    pt?: TextareaProps['pt'];
-
-    /** PrimeReact pass-through options applied to the underlying Textarea. */
-    ptOptions?: TextareaProps['ptOptions'];
-
-    /** When true, disables every base PrimeReact style on the underlying Textarea. */
+    pt?: TextAreaParts;
+    ptOptions?: object;
     unstyled?: boolean;
 }
 
-/**
- * A multi-line text field bound to a `string` property on a Cratis Arc
- * command. Use for descriptions, notes, or any free-form text longer than
- * a single line. See {@link InputTextField} for the full
- * `value={c => c.prop}` binding model that every field in this folder
- * follows.
- *
- * ```tsx
- * <TextAreaField value={c => c.description} title="Description" rows={4} />
- * ```
- */
+/** A multi-line text field bound to a string property on an Arc command. */
 export const TextAreaField = asCommandFormField<TextAreaFieldComponentProps>(
     (props) => (
-        <Textarea
+        <textarea
+            {...props.pt?.root}
             value={props.value}
             onChange={props.onChange}
             onBlur={props.onBlur}
-            invalid={props.invalid}
             placeholder={props.placeholder}
             rows={props.rows ?? 5}
             cols={props.cols}
-            className={props.className ? `w-full ${props.className}` : 'w-full'}
-            pt={props.pt}
-            ptOptions={props.ptOptions}
-            unstyled={props.unstyled}
+            aria-invalid={props.invalid || undefined}
+            data-invalid={props.invalid || undefined}
+            data-cratis-part='textarea'
+            className={['cratis-field-input', 'cratis-field-textarea', 'w-full', props.pt?.root?.className, props.className].filter(Boolean).join(' ')}
         />
     ),
     {
         defaultValue: '',
-        extractValue: (e: React.ChangeEvent<HTMLTextAreaElement>) => e.target.value
-    }
+        extractValue: (event: React.ChangeEvent<HTMLTextAreaElement>) => event.target.value,
+    },
 );
diff --git a/Source/CommandForm/fields/ToggleSwitchField.tsx b/Source/CommandForm/fields/ToggleSwitchField.tsx
index 613cc0a1..c32e841e 100644
--- a/Source/CommandForm/fields/ToggleSwitchField.tsx
+++ b/Source/CommandForm/fields/ToggleSwitchField.tsx
@@ -1,58 +1,61 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { ToggleSwitch } from 'primereact/toggleswitch';
-import type { ToggleSwitchRootProps, ToggleSwitchRootChangeEvent } from '@primereact/types/primitive/toggleswitch';
-import React from 'react';
-import { asCommandFormField, WrappedFieldProps } from '@cratis/arc.react/commands';
+import type { HTMLAttributes, InputHTMLAttributes } from 'react';
+import { asCommandFormField, type WrappedFieldProps } from '@cratis/arc.react/commands';
+
+interface ToggleSwitchParts {
+    root?: HTMLAttributes<HTMLLabelElement>;
+    input?: InputHTMLAttributes<HTMLInputElement>;
+    control?: HTMLAttributes<HTMLSpanElement>;
+    handle?: HTMLAttributes<HTMLSpanElement>;
+}
 
-/** Component-level props for {@link ToggleSwitchField}. */
 interface ToggleSwitchFieldComponentProps extends WrappedFieldProps<boolean> {
-    /** Optional label displayed next to the switch. */
     label?: string;
-    /** Extra CSS class name forwarded to the underlying ToggleSwitch. */
     className?: string;
-    /** PrimeReact pass-through configuration applied to the underlying ToggleSwitch. */
-    pt?: ToggleSwitchRootProps['pt'];
-    /** PrimeReact pass-through options applied to the underlying ToggleSwitch. */
-    ptOptions?: ToggleSwitchRootProps['ptOptions'];
-    /** When true, disables every base PrimeReact style on the underlying ToggleSwitch. */
+    pt?: ToggleSwitchParts;
+    ptOptions?: object;
     unstyled?: boolean;
 }
 
-/**
- * A boolean on/off switch field bound to a `boolean` property on a Cratis Arc
- * command — the toggle counterpart of {@link CheckboxField}. See
- * {@link InputTextField} for the full `value={c => c.prop}` binding model.
- *
- * ```tsx
- * <ToggleSwitchField value={c => c.notificationsEnabled} label="Notifications" />
- * ```
- */
+/** An on/off switch bound to a boolean property on an Arc command. */
 export const ToggleSwitchField = asCommandFormField<ToggleSwitchFieldComponentProps>(
     (props) => (
-        // A real <label> wrapping the switch: the underlying checkbox input is a
-        // descendant, so the visible text becomes its accessible name (implicit
-        // association) regardless of the composition's internal structure — and
-        // the text doubles the click target.
-        <label className="flex items-center" onBlur={props.onBlur}>
-            <ToggleSwitch.Root
+        <label
+            {...props.pt?.root}
+            className={['cratis-choice-field', props.pt?.root?.className, props.className].filter(Boolean).join(' ')}
+            onBlur={props.onBlur}
+            data-cratis-part='root'
+            data-invalid={props.invalid || undefined}
+        >
+            <input
+                {...props.pt?.input}
+                type='checkbox'
+                role='switch'
                 checked={props.value}
-                onCheckedChange={props.onChange}
-                invalid={props.invalid}
-                className={props.className}
-                pt={props.pt}
-                ptOptions={props.ptOptions}
-                unstyled={props.unstyled}>
-                <ToggleSwitch.Control>
-                    <ToggleSwitch.Handle />
-                </ToggleSwitch.Control>
-            </ToggleSwitch.Root>
-            {props.label && <span className="ml-2">{props.label}</span>}
+                onChange={props.onChange}
+                aria-invalid={props.invalid || undefined}
+                className={['cratis-choice-field__native', props.pt?.input?.className].filter(Boolean).join(' ')}
+                data-cratis-part='input'
+            />
+            <span
+                {...props.pt?.control}
+                className={['cratis-switch__control', props.pt?.control?.className].filter(Boolean).join(' ')}
+                data-cratis-part='control'
+                aria-hidden='true'
+            >
+                <span
+                    {...props.pt?.handle}
+                    className={['cratis-switch__handle', props.pt?.handle?.className].filter(Boolean).join(' ')}
+                    data-cratis-part='handle'
+                />
+            </span>
+            {props.label && <span className='cratis-choice-field__label'>{props.label}</span>}
         </label>
     ),
     {
         defaultValue: false,
-        extractValue: (e: ToggleSwitchRootChangeEvent) => e.checked
-    }
+        extractValue: (event: React.ChangeEvent<HTMLInputElement>) => event.target.checked,
+    },
 );
diff --git a/Source/styles.css b/Source/styles.css
index 902aedaa..d57dd81c 100644
--- a/Source/styles.css
+++ b/Source/styles.css
@@ -30,6 +30,7 @@
 @import 'allotment/dist/style.css';
 
 @import './CommandDialog/CommandStepper.css';
+@import './CommandForm/fields/Fields.css';
 @import './Common/ActionMenubar.css';
 @import './Common/Button.css';
 @import './Common/DatePickerInput.css';

From 325065e8c828bc6f0a762e17d4757ef47b31ef3b Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Sun, 23 Aug 2026 03:31:31 +0200
Subject: [PATCH 009/267] Replace PrimeReact with the open UI foundation

---
 Source/CommandDialog/CommandStepper.css       | 122 +++-
 Source/CommandDialog/CommandStepper.tsx       | 329 ++++++---
 Source/CommandDialog/StepperCommandDialog.tsx |  72 +-
 .../when_dismissal_is_configured.ts           |  56 +-
 .../when_initial_focus_is_specified.ts        |  45 +-
 .../when_validity_is_gated.ts                 |  73 +-
 .../and_a_bare_string_sits_between_steps.ts   |   2 +-
 .../and_it_is_in_the_middle.ts                | 113 +++-
 .../and_it_is_null.ts                         |   2 +-
 .../and_it_is_undefined.ts                    |   2 +-
 .../and_the_first_step_is_hidden.ts           |   2 +-
 .../and_the_last_step_is_false.ts             |   2 +-
 .../and_the_steps_come_from_a_map.ts          |   2 +-
 .../and_two_are_hidden.ts                     |   2 +-
 .../when_every_step_is_hidden.ts              |   2 +-
 ...ive_step_is_past_the_last_rendered_step.ts |   2 +-
 .../given/a_stepper_dialog_in_the_dom.ts      |  53 +-
 ...n_a_step_disappears_after_it_was_passed.ts |   2 +-
 .../and_a_bare_string_sits_between_steps.ts   |   2 +-
 .../and_it_is_in_the_middle.ts                |  83 ++-
 .../and_it_is_null.ts                         |   2 +-
 .../and_it_is_undefined.ts                    |   2 +-
 .../and_the_first_step_is_hidden.ts           |   2 +-
 .../and_the_last_step_is_false.ts             |   2 +-
 .../and_the_steps_come_from_a_map.ts          |   2 +-
 .../and_two_are_hidden.ts                     |   2 +-
 .../and_escape_is_pressed.ts                  |   2 +-
 .../and_the_header_close_is_used.ts           |   2 +-
 .../when_every_step_is_hidden.ts              |   2 +-
 .../when_form_is_invalid.ts                   |   2 +-
 .../when_not_executing.ts                     |   2 +-
 .../and_an_async_transform_has_not_settled.ts |   2 +-
 .../and_it_is_asked_for.ts                    |   2 +-
 .../and_it_is_clicked.ts                      |   2 +-
 .../and_it_is_given_a_label.ts                |   2 +-
 .../and_it_is_not_asked_for.ts                |   2 +-
 .../and_submit_is_clicked_instead.ts          |   2 +-
 .../and_the_command_is_executing.ts           |   2 +-
 .../when_single_step.ts                       |   2 +-
 .../when_step_has_field_errors.ts             |  44 +-
 Source/CommandForm/fields/CalendarField.tsx   |   4 +-
 Source/CommandForm/fields/CheckboxField.tsx   |  30 +-
 Source/CommandForm/fields/ChipsField.tsx      |  67 +-
 .../CommandForm/fields/ColorPickerField.tsx   |  28 +-
 Source/CommandForm/fields/Fields.css          | 259 ++++++--
 Source/CommandForm/fields/InputTextField.tsx  |  25 +-
 Source/CommandForm/fields/NumberField.tsx     |  13 +-
 Source/CommandForm/fields/PasswordField.tsx   |  32 +-
 .../CommandForm/fields/RadioButtonField.tsx   |  22 +-
 Source/CommandForm/fields/RadioGroupField.tsx |  30 +-
 Source/CommandForm/fields/RatingField.tsx     |  41 +-
 Source/CommandForm/fields/SliderField.tsx     |  20 +-
 Source/CommandForm/fields/TextAreaField.tsx   |  17 +-
 .../CommandForm/fields/ToggleSwitchField.tsx  |  23 +-
 Source/Common/ActionMenubar.tsx               |   3 +-
 Source/Common/Button.css                      | 139 +++-
 Source/Common/Button.tsx                      |  25 +-
 Source/Common/CratisComponentsProvider.tsx    | 232 +++++--
 Source/Common/DatePickerInput.css             | 159 ++++-
 Source/Common/DatePickerInput.tsx             | 156 +++--
 Source/Common/FormElement.stories.tsx         |  31 +-
 Source/Common/Tooltip.tsx                     |  17 +-
 .../when_configuring_input_pass_through.tsx   |  16 +-
 .../when_configuring_standard_props.tsx       |  20 +-
 .../when_rendering_invalid_state.tsx          |  12 +-
 .../when_merging_user_value.ts                |  11 +-
 .../PrimeReact11PassThroughComponent.ts       |   8 -
 ...ertPrimeReact11PassThroughCompatibility.ts |  80 ---
 ...ponents3PrimeReact11PassThroughContract.ts | 269 --------
 .../when_a_required_marker_is_renamed.ts      |  26 -
 .../when_a_required_slot_is_missing.ts        |  25 -
 ...tibility_root_is_the_rendered_component.ts |  23 -
 .../when_the_surface_is_compatible.ts         |  24 -
 .../when_rendering_the_supported_surface.tsx  | 237 -------
 .../when_components_share_a_global_key.ts     |  22 -
 Source/Compatibility/index.ts                 |  10 -
 .../primeReact11PassThroughSentinelPreset.ts  |  75 ---
 Source/DataPage/DataPage.tsx                  |  10 +-
 Source/DataTables/ColumnFilterMenu.css        |  27 +-
 Source/DataTables/ColumnFilterMenu.tsx        | 407 ++++++------
 Source/DataTables/DataTableCore.css           |  98 ++-
 Source/DataTables/DataTableCore.tsx           | 622 ++++++++++++------
 .../DataTableFilterMatcherRegistry.ts         |   5 +
 .../DataTableForObservableQuery.tsx           |  10 +-
 Source/DataTables/DataTableForQuery.tsx       |  10 +-
 Source/DataTables/TablePaginator.tsx          |  34 +-
 .../when_configuring_labels.tsx               |   4 +-
 .../when_using_configured_locale.tsx          |  19 +-
 Source/DataTables/selectionKeys.ts            |  33 +-
 Source/Dialogs/BusyIndicatorDialog.tsx        |  10 +-
 Source/Dialogs/Dialog.css                     | 134 +++-
 Source/Dialogs/Dialog.stories.tsx             | 137 ++--
 Source/Dialogs/Dialog.tsx                     | 125 +++-
 .../for_BusyIndicatorDialog/when_shown.ts     |  18 +-
 .../for_Dialog/given/a_dialog_in_the_dom.ts   |  37 +-
 ...confirming_with_close_dialog_and_result.ts |   7 +-
 .../when_initial_focus_is_cancel.ts           |  35 +-
 .../when_initial_focus_is_content.ts          |  36 +-
 Source/Display/Avatar.tsx                     |  22 +-
 Source/Display/Badge.tsx                      |  12 +-
 Source/Display/Chip.tsx                       |  24 +-
 Source/Display/Display.css                    | 207 ++++--
 Source/Display/Message.tsx                    |  21 +-
 Source/Display/ProgressBar.tsx                |   7 +-
 Source/Display/ProgressSpinner.tsx            |  29 +-
 Source/Display/Skeleton.tsx                   |   8 +-
 Source/Display/Tag.tsx                        |  22 +-
 Source/Dropdown/Dropdown.css                  |  75 ++-
 Source/Dropdown/Dropdown.tsx                  | 152 +++--
 .../when_configuring_accessible_name.tsx      |   4 +-
 .../when_opened_inside_a_dialog.ts            |  78 ++-
 .../when_options_carry_label_and_value.ts     |  28 +-
 Source/Notifications/Toaster.css              | 143 +++-
 Source/Notifications/Toaster.stories.tsx      |  90 ++-
 Source/Notifications/Toaster.tsx              | 317 +++++----
 .../when_configuring_pass_through.tsx         |  10 +-
 .../when_rendering_a_custom_body.tsx          |  15 +-
 Source/Notifications/toast.ts                 | 179 ++---
 .../ObjectContentEditor.tsx                   | 403 ++++++++----
 .../ObjectNavigationalBar.tsx                 |  41 +-
 Source/SchemaEditor/NameCell.tsx              |  44 +-
 Source/SchemaEditor/SchemaEditor.tsx          | 467 ++++++++-----
 Source/SchemaEditor/TypeCell.tsx              | 172 +++--
 Source/Styled/CratisPreset.ts                 |  78 +--
 ...resolving_the_styles_of_every_primitive.ts |  46 --
 .../when_configuring_with_defaults.ts         |  34 -
 .../when_configuring_with_options.ts          |  42 --
 .../when_using_the_legacy_helper.ts           |  20 +
 Source/Styled/primeReactStyles.ts             | 202 +-----
 Source/Styled/styledMode.ts                   |  97 +--
 Source/TimeMachine/EventsView.css             |  71 +-
 Source/TimeMachine/EventsView.tsx             | 229 ++++---
 Source/index.ts                               |  10 -
 Source/package.json                           |  35 +-
 134 files changed, 4980 insertions(+), 3553 deletions(-)
 delete mode 100644 Source/Compatibility/PrimeReact11PassThroughComponent.ts
 delete mode 100644 Source/Compatibility/assertPrimeReact11PassThroughCompatibility.ts
 delete mode 100644 Source/Compatibility/components3PrimeReact11PassThroughContract.ts
 delete mode 100644 Source/Compatibility/for_assertPrimeReact11PassThroughCompatibility/when_a_required_marker_is_renamed.ts
 delete mode 100644 Source/Compatibility/for_assertPrimeReact11PassThroughCompatibility/when_a_required_slot_is_missing.ts
 delete mode 100644 Source/Compatibility/for_assertPrimeReact11PassThroughCompatibility/when_the_compatibility_root_is_the_rendered_component.ts
 delete mode 100644 Source/Compatibility/for_assertPrimeReact11PassThroughCompatibility/when_the_surface_is_compatible.ts
 delete mode 100644 Source/Compatibility/for_primeReact11PassThroughContract/when_rendering_the_supported_surface.tsx
 delete mode 100644 Source/Compatibility/for_primeReact11PassThroughSentinelPreset/when_components_share_a_global_key.ts
 delete mode 100644 Source/Compatibility/index.ts
 delete mode 100644 Source/Compatibility/primeReact11PassThroughSentinelPreset.ts
 delete mode 100644 Source/Styled/for_primeReactStyles/when_resolving_the_styles_of_every_primitive.ts
 delete mode 100644 Source/Styled/for_styledMode/when_configuring_with_defaults.ts
 delete mode 100644 Source/Styled/for_styledMode/when_configuring_with_options.ts
 create mode 100644 Source/Styled/for_styledMode/when_using_the_legacy_helper.ts

diff --git a/Source/CommandDialog/CommandStepper.css b/Source/CommandDialog/CommandStepper.css
index 1176d561..8c2bfe9b 100644
--- a/Source/CommandDialog/CommandStepper.css
+++ b/Source/CommandDialog/CommandStepper.css
@@ -1,65 +1,123 @@
 /* Copyright (c) Cratis. All rights reserved. */
 /* Licensed under the MIT license. See LICENSE file in the project root for full license information. */
 
-/* Make stepper and its panels fill available width */
 .cratis-command-stepper {
     display: flex;
+    width: 100%;
     flex-direction: column;
     gap: 0.75rem;
-    width: 100%;
-}
-
-/* PrimeReact 11 stepper parts carry data-scope/data-part attributes rather
-   than the v10 .p-stepper* class names, so key structural rules off those. */
-.cratis-command-stepper [data-scope="stepper"][data-part="root"] {
-    width: 100%;
 }
-
-.cratis-command-stepper [data-scope="stepper"][data-part="panel"] {
+.cratis-command-stepper__root,
+.cratis-command-stepper__panels,
+.cratis-command-stepper__panel {
     width: 100%;
     box-sizing: border-box;
 }
-
-/* Dim the header of steps that are not currently active */
-.cratis-command-stepper [data-scope="stepper"][data-part="step"]:not([data-active]) [data-part="header"] {
-    opacity: 0.5;
+.cratis-command-stepper__list {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style: none;
 }
-
-/* Horizontal (default): the step list flows left-to-right. */
-.cratis-command-stepper--horizontal [data-scope="stepper"][data-part="list"] {
+.cratis-command-stepper__step {
     display: flex;
-    flex-direction: row;
+    min-width: 0;
+    align-items: center;
+    flex: 1;
+}
+.cratis-command-stepper__header {
+    display: inline-flex;
+    min-width: 0;
+    padding: 0.4rem;
+    align-items: center;
+    gap: 0.5rem;
+    border: 0;
+    background: transparent;
+    color: var(--cratis-text-color);
+    font: inherit;
+    cursor: pointer;
+}
+.cratis-command-stepper__header:disabled {
+    cursor: default;
+}
+.cratis-command-stepper__header:focus-visible {
+    outline: none;
+    border-radius: var(--cratis-border-radius);
+    box-shadow: var(--cratis-focus-ring);
+}
+.cratis-command-stepper__step:not([data-active]) .cratis-command-stepper__header {
+    opacity: 0.55;
+}
+.cratis-command-stepper__number {
+    display: inline-flex;
+    width: 1.8rem;
+    height: 1.8rem;
     align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    border: 1px solid var(--cratis-surface-border);
+    border-radius: 50%;
+    background: var(--cratis-surface-card);
+}
+.cratis-command-stepper__step[data-active='true'] .cratis-command-stepper__number {
+    border-color: var(--cratis-primary-color);
+    background: var(--cratis-primary-color);
+    color: var(--cratis-primary-color-text);
+}
+.cratis-command-stepper__title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.cratis-command-stepper__separator {
+    height: 2px;
+    min-width: 1rem;
+    margin-inline: 0.25rem;
+    flex: 1;
+    background: var(--cratis-surface-border);
+}
+.cratis-command-stepper__panel {
+    padding-block: 0.5rem;
 }
 
-/* Vertical: the step list is a stacked column beside the panels. */
-.cratis-command-stepper--vertical [data-scope="stepper"][data-part="root"] {
+.cratis-command-stepper--horizontal .cratis-command-stepper__list {
+    flex-direction: row;
+    align-items: center;
+}
+.cratis-command-stepper--vertical .cratis-command-stepper__root {
     display: flex;
     flex-direction: row;
     align-items: flex-start;
     gap: 1.5rem;
 }
-
-.cratis-command-stepper--vertical [data-scope="stepper"][data-part="list"] {
-    display: flex;
+.cratis-command-stepper--vertical .cratis-command-stepper__list {
+    width: max-content;
     flex-direction: column;
     align-items: flex-start;
     gap: 0.25rem;
 }
-
-.cratis-command-stepper--vertical [data-scope="stepper"][data-part="step"] {
-    display: flex;
+.cratis-command-stepper--vertical .cratis-command-stepper__step {
     flex-direction: column;
     align-items: flex-start;
 }
-
-.cratis-command-stepper--vertical [data-scope="stepper"][data-part="separator"] {
+.cratis-command-stepper--vertical .cratis-command-stepper__separator {
     width: 2px;
+    min-width: 2px;
     min-height: 1.25rem;
-    margin-left: 0.9rem;
+    margin-inline-start: 1.3rem;
 }
-
-.cratis-command-stepper--vertical [data-scope="stepper"][data-part="panels"] {
-    flex: 1;
+.cratis-command-stepper--vertical .cratis-command-stepper__panels {
     min-width: 0;
+    flex: 1;
+}
+
+@media (forced-colors: active) {
+    .cratis-command-stepper__number,
+    .cratis-command-stepper__separator {
+        border-color: CanvasText;
+    }
+    .cratis-command-stepper__step[data-active='true'] .cratis-command-stepper__number {
+        background: Highlight;
+        color: HighlightText;
+    }
 }
diff --git a/Source/CommandDialog/CommandStepper.tsx b/Source/CommandDialog/CommandStepper.tsx
index 8856b7f2..bdf65656 100644
--- a/Source/CommandDialog/CommandStepper.tsx
+++ b/Source/CommandDialog/CommandStepper.tsx
@@ -1,32 +1,27 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import React, { useEffect, useMemo, useState, type CSSProperties } from 'react';
-import { Stepper } from 'primereact/stepper';
-import type { StepperRootProps } from '@primereact/types/primitive/stepper';
-import { Button } from 'primereact/button';
+import React, {
+    useEffect,
+    useMemo,
+    useState,
+    type ButtonHTMLAttributes,
+    type CSSProperties,
+    type HTMLAttributes,
+} from 'react';
+import { Button } from '../Common/Button';
 import { ICommandResult } from '@cratis/arc/commands';
 import {
     CommandForm,
     CommandFormFieldWrapper,
     useCommandFormContext,
     useCommandInstance,
-    type CommandFormProps
+    type CommandFormProps,
 } from '@cratis/arc.react/commands';
 import { applyBeforeExecute, type BeforeExecuteCallback } from './applyBeforeExecute';
 import type { StepperPanelProps } from './StepperPanel';
 import { getStepPanels } from './stepChildren';
 
-// PrimeReact 11's Stepper annotates each step header as role="tab" and each panel
-// as role="tabpanel", with `aria-controls` pointing at element ids it never
-// renders — a dangling-reference + orphaned-tab pattern (the list is not a
-// role="tablist") that axe flags as critical. The headless stepper implements no
-// keyboard navigation bound to these roles (steps navigate by click on the native
-// <button>), so stripping the broken tab semantics is safe: it leaves natively
-// keyboard-accessible buttons and a plain content region. `undefined` in `pt`
-// removes the attribute the primitive would otherwise set.
-const stripBrokenTabRole = { root: { role: undefined, 'aria-controls': undefined } };
-
 /**
  * Event passed to {@link StepperCustomizationProps.onChangeStep} when the user
  * navigates to a different step.
@@ -50,6 +45,18 @@ export type StepperHeaderPosition = 'top' | 'bottom';
  * Stepper has no built-in `orientation` / `start` / `end` / `headerPosition`,
  * so the wrapper re-implements them over the compositional parts.
  */
+export interface StepperParts {
+    root?: HTMLAttributes<HTMLDivElement>;
+    list?: HTMLAttributes<HTMLOListElement>;
+    step?: HTMLAttributes<HTMLLIElement>;
+    header?: ButtonHTMLAttributes<HTMLButtonElement>;
+    number?: HTMLAttributes<HTMLSpanElement>;
+    title?: HTMLAttributes<HTMLSpanElement>;
+    separator?: HTMLAttributes<HTMLSpanElement>;
+    panels?: HTMLAttributes<HTMLDivElement>;
+    panel?: HTMLAttributes<HTMLElement>;
+}
+
 export interface StepperCustomizationProps {
     /**
      * Whether the wizard is linear. In linear mode the step headers are not
@@ -68,11 +75,11 @@ export interface StepperCustomizationProps {
     end?: React.ReactNode;
     /** Invoked when the active step changes (via navigation or a header click). */
     onChangeStep?: (event: StepperChangeEvent) => void;
-    /** PrimeReact pass-through configuration for the underlying Stepper parts. */
-    pt?: StepperRootProps['pt'];
-    /** PrimeReact pass-through options controlling merge vs. replace for {@link pt}. */
-    ptOptions?: StepperRootProps['ptOptions'];
-    /** When true, disables every base PrimeReact style on the Stepper. */
+    /** Cratis-owned per-part attributes for the stepper. */
+    pt?: StepperParts;
+    /** Retained for source compatibility; Cratis parts always merge. */
+    ptOptions?: object;
+    /** Retained for source compatibility; consumers always own the CSS. */
     unstyled?: boolean;
 }
 
@@ -112,8 +119,19 @@ export interface CommandStepperContentProps extends StepperCustomizationProps {
 }
 
 export interface CommandStepperProps<TCommand extends object, TResponse = object>
-    extends Omit<CommandFormProps<TCommand, TResponse>, 'children' | 'onBeforeExecute'>,
-        Omit<CommandStepperContentProps, 'activeStep' | 'visitedSteps' | 'onActiveStepChange' | 'onVisitedStepsChange' | 'getFieldError' | 'isSubmitting' | 'isSubmitDisabled' | 'onSubmit'> {
+    extends
+        Omit<CommandFormProps<TCommand, TResponse>, 'children' | 'onBeforeExecute'>,
+        Omit<
+            CommandStepperContentProps,
+            | 'activeStep'
+            | 'visitedSteps'
+            | 'onActiveStepChange'
+            | 'onVisitedStepsChange'
+            | 'getFieldError'
+            | 'isSubmitting'
+            | 'isSubmitDisabled'
+            | 'onSubmit'
+        > {
     /**
      * A transformer invoked with the current command values immediately before
      * the command executes on submit. It **must return** the values to run with
@@ -153,7 +171,9 @@ const extractFieldNamesFromNode = (nodes: React.ReactNode): string[] => {
 
         const childProps = child.props as Record<string, unknown>;
         if (childProps.children != null) {
-            names.push(...extractFieldNamesFromNode(childProps.children as React.ReactNode));
+            names.push(
+                ...extractFieldNamesFromNode(childProps.children as React.ReactNode),
+            );
         }
     });
     return names;
@@ -171,18 +191,18 @@ const processChildren = (nodes: React.ReactNode): React.ReactNode => {
 
         const childProps = child.props as Record<string, unknown>;
         if (childProps.children != null) {
-            return React.cloneElement(child as React.ReactElement<Record<string, unknown>>, {
-                children: processChildren(childProps.children as React.ReactNode)
-            });
+            return React.cloneElement(
+                child as React.ReactElement<Record<string, unknown>>,
+                {
+                    children: processChildren(childProps.children as React.ReactNode),
+                },
+            );
         }
 
         return child;
     });
 };
 
-/** The value used to identify a step in PrimeReact 11's Stepper — its index as a string. */
-const stepValue = (index: number): string => String(index);
-
 export const CommandStepperContent = ({
     activeStep,
     visitedSteps,
@@ -207,15 +227,13 @@ export const CommandStepperContent = ({
     end,
     onChangeStep,
     pt,
-    ptOptions,
-    unstyled,
 }: CommandStepperContentProps) => {
     // The steps that actually render. Conditional steps (`{condition && <StepperPanel/>}`)
     // leave falsy children behind, so the count, the per-step validation state and what the
     // Stepper renders are all derived from this one list — they cannot drift apart.
     const panels = useMemo(
         () => getStepPanels(children) as React.ReactElement<StepperPanelProps>[],
-        [children]
+        [children],
     );
     const stepCount = panels.length;
 
@@ -229,12 +247,15 @@ export const CommandStepperContent = ({
 
     const stepFieldNames = useMemo(
         () => panels.map((panel) => extractFieldNamesFromNode(panel.props.children)),
-        [panels]
+        [panels],
     );
 
     const stepErrors = useMemo(
-        () => stepFieldNames.map(fields => fields.some(fieldName => !!getFieldError?.(fieldName))),
-        [stepFieldNames, getFieldError]
+        () =>
+            stepFieldNames.map((fields) =>
+                fields.some((fieldName) => !!getFieldError?.(fieldName)),
+            ),
+        [stepFieldNames, getFieldError],
     );
 
     useEffect(() => {
@@ -242,7 +263,7 @@ export const CommandStepperContent = ({
     }, [onStepErrorsChange, stepErrors]);
 
     const isCurrentStepInvalid = stepErrors[currentStep] ?? false;
-    const hasAnyStepErrors = stepErrors.some(hasError => hasError);
+    const hasAnyStepErrors = stepErrors.some((hasError) => hasError);
 
     // The per-step number indicator paints red when a visited step still has a
     // field error and green once a step has been visited without errors — a
@@ -257,11 +278,7 @@ export const CommandStepperContent = ({
         return { backgroundColor, color: 'var(--cratis-primary-color-text)' };
     };
 
-    const handleValueChange: StepperRootProps['onValueChange'] = event => {
-        const raw = event.value;
-        const index = typeof raw === 'number' ? raw : parseInt(String(raw ?? ''), 10);
-        if (Number.isNaN(index)) return;
-
+    const handleStepChange = (index: number) => {
         onChangeStep?.({ index });
 
         if (index > currentStep && isCurrentStepInvalid) {
@@ -288,55 +305,162 @@ export const CommandStepperContent = ({
     };
 
     const stepperList = (
-        <Stepper.List>
+        <ol
+            {...pt?.list}
+            className={['cratis-command-stepper__list', pt?.list?.className]
+                .filter(Boolean)
+                .join(' ')}
+            data-cratis-part='list'
+            data-part='list'
+        >
             {panels.map((panel, index) => (
-                <Stepper.Step key={index} value={stepValue(index)}>
-                    <Stepper.Header pt={stripBrokenTabRole}>
-                        <Stepper.Number style={numberStyle(index)}>{index + 1}</Stepper.Number>
-                        <Stepper.Title>{panel.props.header}</Stepper.Title>
-                    </Stepper.Header>
-                    {index < stepCount - 1 && <Stepper.Separator />}
-                </Stepper.Step>
+                <li
+                    {...pt?.step}
+                    key={index}
+                    className={['cratis-command-stepper__step', pt?.step?.className]
+                        .filter(Boolean)
+                        .join(' ')}
+                    data-cratis-part='step'
+                    data-part='step'
+                    data-active={index === currentStep || undefined}
+                    data-visited={visitedSteps.has(index) || undefined}
+                    data-invalid={stepErrors[index] || undefined}
+                >
+                    <button
+                        {...pt?.header}
+                        type='button'
+                        className={[
+                            'cratis-command-stepper__header',
+                            pt?.header?.className,
+                        ]
+                            .filter(Boolean)
+                            .join(' ')}
+                        data-cratis-part='header'
+                        data-part='header'
+                        disabled={linear && index !== currentStep}
+                        aria-current={index === currentStep ? 'step' : undefined}
+                        onClick={() => handleStepChange(index)}
+                    >
+                        <span
+                            {...pt?.number}
+                            className={[
+                                'cratis-command-stepper__number',
+                                pt?.number?.className,
+                            ]
+                                .filter(Boolean)
+                                .join(' ')}
+                            style={{ ...pt?.number?.style, ...numberStyle(index) }}
+                            data-cratis-part='number'
+                            data-part='number'
+                        >
+                            {index + 1}
+                        </span>
+                        <span
+                            {...pt?.title}
+                            className={[
+                                'cratis-command-stepper__title',
+                                pt?.title?.className,
+                            ]
+                                .filter(Boolean)
+                                .join(' ')}
+                            data-cratis-part='title'
+                            data-part='title'
+                        >
+                            {panel.props.header}
+                        </span>
+                    </button>
+                    {index < stepCount - 1 && (
+                        <span
+                            {...pt?.separator}
+                            className={[
+                                'cratis-command-stepper__separator',
+                                pt?.separator?.className,
+                            ]
+                                .filter(Boolean)
+                                .join(' ')}
+                            data-cratis-part='separator'
+                            data-part='separator'
+                            aria-hidden='true'
+                        />
+                    )}
+                </li>
             ))}
-        </Stepper.List>
+        </ol>
     );
 
     const stepperPanels = (
-        <Stepper.Panels>
+        <div
+            {...pt?.panels}
+            className={['cratis-command-stepper__panels', pt?.panels?.className]
+                .filter(Boolean)
+                .join(' ')}
+            data-cratis-part='panels'
+            data-part='panels'
+        >
             {panels.map((panel, index) => (
-                <Stepper.Panel key={index} value={stepValue(index)} pt={stripBrokenTabRole}>
+                <section
+                    {...pt?.panel}
+                    key={index}
+                    hidden={index !== currentStep}
+                    className={['cratis-command-stepper__panel', pt?.panel?.className]
+                        .filter(Boolean)
+                        .join(' ')}
+                    data-cratis-part='panel'
+                    data-part='panel'
+                    aria-label={String(panel.props.header ?? `Step ${index + 1}`)}
+                >
                     {processChildren(panel.props.children)}
-                </Stepper.Panel>
+                </section>
             ))}
-        </Stepper.Panels>
+        </div>
     );
 
     return (
-        <div className={`cratis-command-stepper cratis-command-stepper--${orientation}`} data-orientation={orientation}>
+        <div
+            className={`cratis-command-stepper cratis-command-stepper--${orientation}`}
+            data-orientation={orientation}
+        >
             {start}
-            <Stepper.Root
-                value={stepValue(currentStep)}
-                linear={linear}
-                onValueChange={handleValueChange}
+            <div
+                {...pt?.root}
+                className={['cratis-command-stepper__root', pt?.root?.className]
+                    .filter(Boolean)
+                    .join(' ')}
+                data-cratis-part='root'
+                data-part='root'
+                data-value={currentStep}
                 data-orientation={orientation}
-                pt={pt}
-                ptOptions={ptOptions}
-                unstyled={unstyled}>
-                {headerPosition === 'bottom'
-                    ? (<>{stepperPanels}{stepperList}</>)
-                    : (<>{stepperList}{stepperPanels}</>)}
-            </Stepper.Root>
+            >
+                {headerPosition === 'bottom' ? (
+                    <>
+                        {stepperPanels}
+                        {stepperList}
+                    </>
+                ) : (
+                    <>
+                        {stepperList}
+                        {stepperPanels}
+                    </>
+                )}
+            </div>
             {end}
 
             {showNavigation && (
-                <div style={{ display: 'flex', alignItems: 'center', width: '100%', gap: '0.75rem' }}>
+                <div
+                    style={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        width: '100%',
+                        gap: '0.75rem',
+                    }}
+                >
                     {!isFirstStep && (
                         <Button
-                            variant="outlined"
+                            outlined
                             onClick={handlePrevious}
                             disabled={isBusy}
-                            style={{ width: 'auto' }}>
-                            <i className="pi pi-arrow-left" />
+                            style={{ width: 'auto' }}
+                        >
                             <span>{previousLabel}</span>
                         </Button>
                     )}
@@ -345,18 +469,29 @@ export const CommandStepperContent = ({
                         <Button
                             onClick={handleNext}
                             disabled={isBusy || isSubmitting || isCurrentStepInvalid}
-                            style={{ width: 'auto' }}>
+                            style={{ width: 'auto' }}
+                        >
                             <span>{nextLabel}</span>
-                            <i className="pi pi-arrow-right" />
                         </Button>
                     )}
                     {isLastStep && showSubmit && (
                         <Button
                             onClick={() => void onSubmit?.()}
-                            disabled={isBusy || isSubmitting || isSubmitDisabled || hasAnyStepErrors}
+                            disabled={
+                                isBusy ||
+                                isSubmitting ||
+                                isSubmitDisabled ||
+                                hasAnyStepErrors
+                            }
                             autoFocus
-                            style={{ width: 'auto' }}>
-                            <i className={isSubmitting ? 'pi pi-spin pi-spinner' : 'pi pi-check'} />
+                            style={{ width: 'auto' }}
+                        >
+                            {isSubmitting && (
+                                <span
+                                    className='cratis-dialog__spinner'
+                                    aria-hidden='true'
+                                />
+                            )}
                             <span>{okLabel}</span>
                         </Button>
                     )}
@@ -366,17 +501,23 @@ export const CommandStepperContent = ({
     );
 };
 
-type CommandStepperWrapperProps<TCommand extends object, TResponse = object> =
-    Omit<
-        CommandStepperContentProps,
-        'activeStep' | 'visitedSteps' | 'onActiveStepChange' | 'onVisitedStepsChange' | 'getFieldError' | 'isSubmitting' | 'isSubmitDisabled' | 'onSubmit'
-    > & {
-        children?: React.ReactNode;
-        onSuccess?: CommandFormProps<TCommand, TResponse>['onSuccess'];
-        onValidationFailure?: CommandFormProps<TCommand, TResponse>['onValidationFailure'];
-        onFailed?: CommandFormProps<TCommand, TResponse>['onFailed'];
-        onBeforeExecute?: BeforeExecuteCallback<TCommand>;
-    };
+type CommandStepperWrapperProps<TCommand extends object, TResponse = object> = Omit<
+    CommandStepperContentProps,
+    | 'activeStep'
+    | 'visitedSteps'
+    | 'onActiveStepChange'
+    | 'onVisitedStepsChange'
+    | 'getFieldError'
+    | 'isSubmitting'
+    | 'isSubmitDisabled'
+    | 'onSubmit'
+> & {
+    children?: React.ReactNode;
+    onSuccess?: CommandFormProps<TCommand, TResponse>['onSuccess'];
+    onValidationFailure?: CommandFormProps<TCommand, TResponse>['onValidationFailure'];
+    onFailed?: CommandFormProps<TCommand, TResponse>['onFailed'];
+    onBeforeExecute?: BeforeExecuteCallback<TCommand>;
+};
 
 const CommandStepperWrapper = <TCommand extends object, TResponse = object>({
     children,
@@ -401,7 +542,12 @@ const CommandStepperWrapper = <TCommand extends object, TResponse = object>({
     onFailed,
     onBeforeExecute,
 }: CommandStepperWrapperProps<TCommand, TResponse>) => {
-    const { getFieldError, isValid: isCommandFormValid, setCommandValues, setCommandResult } = useCommandFormContext<TCommand>();
+    const {
+        getFieldError,
+        isValid: isCommandFormValid,
+        setCommandValues,
+        setCommandResult,
+    } = useCommandFormContext<TCommand>();
     const commandInstance = useCommandInstance<TCommand>();
     const [activeStep, setActiveStep] = useState(0);
     const [visitedSteps, setVisitedSteps] = useState<Set<number>>(new Set([0]));
@@ -417,7 +563,12 @@ const CommandStepperWrapper = <TCommand extends object, TResponse = object>({
         let result: ICommandResult<TResponse>;
 
         try {
-            result = await (commandInstance as unknown as { execute: () => Promise<ICommandResult<TResponse>> }).execute();
+            // SAFETY: Arc command instances expose execute at runtime; the wrapper's public type omits it.
+            result = await (
+                commandInstance as unknown as {
+                    execute: () => Promise<ICommandResult<TResponse>>;
+                }
+            ).execute();
         } finally {
             setIsSubmitting(false);
         }
@@ -527,7 +678,7 @@ const CommandStepperWrapper = <TCommand extends object, TResponse = object>({
  * @param props - {@link CommandStepperProps}.
  */
 export const CommandStepper = <TCommand extends object = object, TResponse = object>(
-    props: CommandStepperProps<TCommand, TResponse>
+    props: CommandStepperProps<TCommand, TResponse>,
 ) => {
     const {
         children,
diff --git a/Source/CommandDialog/StepperCommandDialog.tsx b/Source/CommandDialog/StepperCommandDialog.tsx
index 2cda15c6..235bbd5e 100644
--- a/Source/CommandDialog/StepperCommandDialog.tsx
+++ b/Source/CommandDialog/StepperCommandDialog.tsx
@@ -4,14 +4,20 @@
 import React, { useState, type CSSProperties } from 'react';
 import { ICommandResult } from '@cratis/arc/commands';
 import { DialogResult, useDialogContext } from '@cratis/arc.react/dialogs';
-import { Button } from 'primereact/button';
+import { Button } from '../Common/Button';
 import {
     CommandForm,
     useCommandFormContext,
     useCommandInstance,
-    type CommandFormProps
+    type CommandFormProps,
 } from '@cratis/arc.react/commands';
-import { Dialog, type DialogProps, type CloseDialog, type ConfirmCallback, type CancelCallback } from '../Dialogs/Dialog';
+import {
+    Dialog,
+    type DialogProps,
+    type CloseDialog,
+    type ConfirmCallback,
+    type CancelCallback,
+} from '../Dialogs/Dialog';
 import { CommandStepperContent, type StepperCustomizationProps } from './CommandStepper';
 import { applyBeforeExecute, type BeforeExecuteCallback } from './applyBeforeExecute';
 import { getStepPanels } from './stepChildren';
@@ -29,7 +35,8 @@ import { getStepPanels } from './stepChildren';
  * @typeParam TResponse - The response payload type returned by a successful command.
  */
 export interface StepperCommandDialogProps<TCommand extends object, TResponse = object>
-    extends Omit<CommandFormProps<TCommand, TResponse>, 'children' | 'onBeforeExecute'>,
+    extends
+        Omit<CommandFormProps<TCommand, TResponse>, 'children' | 'onBeforeExecute'>,
         StepperCustomizationProps {
     /**
      * A transformer invoked with the current command values immediately before
@@ -158,9 +165,14 @@ const StepperCommandDialogWrapper = <TCommand extends object, TResponse = object
     dialogPt,
     dialogPtOptions,
     dialogUnstyled,
-    children
+    children,
 }: StepperCommandDialogWrapperProps<TCommand, TResponse>) => {
-    const { setCommandValues, setCommandResult, isValid: isCommandFormValid, getFieldError } = useCommandFormContext<TCommand>();
+    const {
+        setCommandValues,
+        setCommandResult,
+        isValid: isCommandFormValid,
+        getFieldError,
+    } = useCommandFormContext<TCommand>();
     const commandInstance = useCommandInstance<TCommand>();
     const [isBusy, setIsBusy] = useState(false);
     const [activeStep, setActiveStep] = useState(0);
@@ -239,7 +251,12 @@ const StepperCommandDialogWrapper = <TCommand extends object, TResponse = object
                 setCommandValues(applied instanceof Promise ? await applied : applied);
             }
 
-            result = await (commandInstance as unknown as { execute: () => Promise<ICommandResult<TResponse>> }).execute();
+            // SAFETY: Arc command instances expose execute at runtime; the wrapper's public type omits it.
+            result = await (
+                commandInstance as unknown as {
+                    execute: () => Promise<ICommandResult<TResponse>>;
+                }
+            ).execute();
         } finally {
             setIsBusy(false);
         }
@@ -259,24 +276,31 @@ const StepperCommandDialogWrapper = <TCommand extends object, TResponse = object
     };
 
     const footer = (
-        <div style={{ display: 'flex', alignItems: 'center', width: '100%', gap: '0.75rem' }}>
+        <div
+            style={{
+                display: 'flex',
+                alignItems: 'center',
+                width: '100%',
+                gap: '0.75rem',
+            }}
+        >
             {showCancel && (
                 <Button
-                    variant="outlined"
+                    outlined
                     onClick={() => handleClose(DialogResult.Cancelled)}
                     disabled={isBusy}
-                    style={{ width: 'auto' }}>
-                    <i className="pi pi-times" />
+                    style={{ width: 'auto' }}
+                >
                     <span>{cancelLabel}</span>
                 </Button>
             )}
             {!isFirstStep && (
                 <Button
-                    variant="outlined"
+                    outlined
                     onClick={() => setActiveStep(Math.max(0, currentStep - 1))}
                     disabled={isBusy}
-                    style={{ width: 'auto' }}>
-                    <i className="pi pi-arrow-left" />
+                    style={{ width: 'auto' }}
+                >
                     <span>{previousLabel}</span>
                 </Button>
             )}
@@ -284,13 +308,13 @@ const StepperCommandDialogWrapper = <TCommand extends object, TResponse = object
             {!isLastStep && (
                 <Button
                     onClick={() => {
-                        setVisitedSteps(previous => new Set(previous).add(currentStep));
+                        setVisitedSteps((previous) => new Set(previous).add(currentStep));
                         setActiveStep(Math.min(stepCount - 1, currentStep + 1));
                     }}
                     disabled={isBusy || isCurrentStepInvalid}
-                    style={{ width: 'auto' }}>
+                    style={{ width: 'auto' }}
+                >
                     <span>{nextLabel}</span>
-                    <i className="pi pi-arrow-right" />
                 </Button>
             )}
             {isLastStep && isDialogValid && (
@@ -298,8 +322,11 @@ const StepperCommandDialogWrapper = <TCommand extends object, TResponse = object
                     onClick={handleSubmit}
                     disabled={isBusy}
                     autoFocus
-                    style={{ width: 'auto' }}>
-                    <i className={isBusy ? 'pi pi-spin pi-spinner' : 'pi pi-check'} />
+                    style={{ width: 'auto' }}
+                >
+                    {isBusy && (
+                        <span className='cratis-dialog__spinner' aria-hidden='true' />
+                    )}
                     <span>{okLabel}</span>
                 </Button>
             )}
@@ -438,8 +465,11 @@ const StepperCommandDialogWrapper = <TCommand extends object, TResponse = object
  * @typeParam TResponse - The success payload type returned by the command's `Handle()` method on the backend.
  * @param props - {@link StepperCommandDialogProps}.
  */
-const StepperCommandDialogComponent = <TCommand extends object = object, TResponse = object>(
-    props: StepperCommandDialogProps<TCommand, TResponse>
+const StepperCommandDialogComponent = <
+    TCommand extends object = object,
+    TResponse = object,
+>(
+    props: StepperCommandDialogProps<TCommand, TResponse>,
 ) => {
     const {
         title,
diff --git a/Source/CommandDialog/for_CommandDialog/when_dismissal_is_configured.ts b/Source/CommandDialog/for_CommandDialog/when_dismissal_is_configured.ts
index 316b67b6..95e2fd7d 100644
--- a/Source/CommandDialog/for_CommandDialog/when_dismissal_is_configured.ts
+++ b/Source/CommandDialog/for_CommandDialog/when_dismissal_is_configured.ts
@@ -11,15 +11,17 @@ import { CommandDialog } from '../CommandDialog';
 import { CratisComponentsProvider } from '../../Common/CratisComponentsProvider';
 
 vi.mock('@cratis/arc.react/commands', async () => {
-    const actual = await vi.importActual<Record<string, unknown>>('@cratis/arc.react/commands');
+    const actual = await vi.importActual<Record<string, unknown>>(
+        '@cratis/arc.react/commands',
+    );
     return {
         ...actual,
         CommandForm: (props: { children?: React.ReactNode }) =>
             React.createElement('div', null, props.children),
         useCommandFormContext: () => ({
             isValid: true,
-            setCommandValues: () => { },
-            setCommandResult: () => { },
+            setCommandValues: () => {},
+            setCommandResult: () => {},
         }),
         useCommandInstance: () => ({}),
     };
@@ -43,12 +45,20 @@ describe('when dismissal is configured on a command dialog', () => {
     let root: Root;
     let container: HTMLDivElement;
 
-    const render = async (props: { dismissable?: boolean; closeAriaLabel?: string; buttons?: React.ReactNode }) => {
+    const render = async (props: {
+        dismissable?: boolean;
+        closeAriaLabel?: string;
+        buttons?: React.ReactNode;
+    }) => {
         // SAFETY: React's test-environment flag is an intentionally undocumented global absent from DOM typings.
-        (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+        (
+            globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
+        ).IS_REACT_ACT_ENVIRONMENT = true;
         // SAFETY: jsdom omits ResizeObserver; the overlay only calls these observer methods.
         (globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver ??= class {
-            observe() { } unobserve() { } disconnect() { }
+            observe() {}
+            unobserve() {}
+            disconnect() {}
         };
 
         container = document.createElement('div');
@@ -57,27 +67,39 @@ describe('when dismissal is configured on a command dialog', () => {
 
         await act(async () => {
             // SAFETY: The generated command proxy constructor is erased by this test harness only.
-            root.render(React.createElement(CratisComponentsProvider, null,
-                React.createElement(CommandDialog<TestCommand>, {
-                    command: TestCommand as unknown as new () => object,
-                    title: 'Register',
-                    visible: true,
-                    ...props,
-                    children: React.createElement('p', null, 'Body')
-                })));
+            root.render(
+                React.createElement(
+                    CratisComponentsProvider,
+                    null,
+                    React.createElement(CommandDialog<TestCommand>, {
+                        command: TestCommand as unknown as new () => object,
+                        title: 'Register',
+                        visible: true,
+                        ...props,
+                        children: React.createElement('p', null, 'Body'),
+                    }),
+                ),
+            );
+        });
+        await act(async () => {
+            await new Promise((resolve) => setTimeout(resolve, 300));
         });
-        await act(async () => { await new Promise(resolve => setTimeout(resolve, 300)); });
     };
 
     const closeButton = () => document.querySelector('[data-cratis-part="close"]');
 
     afterEach(async () => {
-        await act(async () => { root.unmount(); });
+        await act(async () => {
+            root.unmount();
+        });
         container.remove();
     });
 
     it('should forward dismissable so a custom footer can keep its close button', async () => {
-        await render({ buttons: React.createElement('button', { type: 'button' }, 'Go'), dismissable: true });
+        await render({
+            buttons: React.createElement('button', { type: 'button' }, 'Go'),
+            dismissable: true,
+        });
 
         expect(Boolean(closeButton())).to.equal(true);
     });
diff --git a/Source/CommandDialog/for_CommandDialog/when_initial_focus_is_specified.ts b/Source/CommandDialog/for_CommandDialog/when_initial_focus_is_specified.ts
index e3d7c995..9c03c7b5 100644
--- a/Source/CommandDialog/for_CommandDialog/when_initial_focus_is_specified.ts
+++ b/Source/CommandDialog/for_CommandDialog/when_initial_focus_is_specified.ts
@@ -6,11 +6,22 @@ import { expect } from 'chai';
 import React from 'react';
 import { vi } from 'vitest';
 import { DialogInitialFocus } from '../../Dialogs/DialogInitialFocus';
-import { click, focusedElement, pressEnterOnFocusedElement, render, unmount, type DialogInTheDom } from '../../Dialogs/for_Dialog/given/a_dialog_in_the_dom';
+import {
+    click,
+    focusedElement,
+    pressEnterOnFocusedElement,
+    render,
+    unmount,
+    type DialogInTheDom,
+} from '../../Dialogs/for_Dialog/given/a_dialog_in_the_dom';
 
 const { executeCommand, succeeded } = vi.hoisted(() => ({
-    executeCommand: vi.fn(async () => ({ isSuccess: true, isValid: true, validationResults: [] })),
-    succeeded: vi.fn()
+    executeCommand: vi.fn(async () => ({
+        isSuccess: true,
+        isValid: true,
+        validationResults: [],
+    })),
+    succeeded: vi.fn(),
 }));
 
 vi.mock('@cratis/arc.react/commands', () => ({
@@ -18,12 +29,16 @@ vi.mock('@cratis/arc.react/commands', () => ({
         React.createElement('div', null, props.children),
     useCommandFormContext: () => ({
         isValid: true,
-        setCommandValues: () => { /* not part of this scenario */ },
-        setCommandResult: () => { /* not part of this scenario */ }
+        setCommandValues: () => {
+            /* not part of this scenario */
+        },
+        setCommandResult: () => {
+            /* not part of this scenario */
+        },
     }),
     useCommandInstance: () => ({ execute: executeCommand }),
     CommandFormFieldWrapper: (props: { field?: React.ReactNode }) =>
-        React.createElement('div', null, props.field)
+        React.createElement('div', null, props.field),
 }));
 
 class DeletePersonalData {
@@ -40,14 +55,16 @@ describe('when a command dialog is given an initial focus', () => {
         const { CommandDialog } = await import('../CommandDialog');
 
         // SAFETY: The generated command proxy constructor is erased by this test harness only.
-        dialog = await render(React.createElement(CommandDialog, {
-            command: DeletePersonalData as unknown as new () => object,
-            title: 'Delete personal data',
-            visible: true,
-            initialFocus,
-            onSuccess: succeeded,
-            children: React.createElement('p', null, 'This cannot be undone')
-        }));
+        dialog = await render(
+            React.createElement(CommandDialog, {
+                command: DeletePersonalData as unknown as new () => object,
+                title: 'Delete personal data',
+                visible: true,
+                initialFocus,
+                onSuccess: succeeded,
+                children: React.createElement('p', null, 'This cannot be undone'),
+            }),
+        );
     };
 
     afterEach(async () => await unmount(dialog));
diff --git a/Source/CommandDialog/for_CommandDialog/when_validity_is_gated.ts b/Source/CommandDialog/for_CommandDialog/when_validity_is_gated.ts
index 482d34b6..3537a3f7 100644
--- a/Source/CommandDialog/for_CommandDialog/when_validity_is_gated.ts
+++ b/Source/CommandDialog/for_CommandDialog/when_validity_is_gated.ts
@@ -8,18 +8,31 @@ import { vi } from 'vitest';
 
 const { commandFormValidity, executeCommand, setCommandValues } = vi.hoisted(() => ({
     commandFormValidity: { isValid: false },
-    executeCommand: vi.fn(async () => ({ isSuccess: true, isValid: true, validationResults: [] })),
-    setCommandValues: vi.fn()
+    executeCommand: vi.fn(async () => ({
+        isSuccess: true,
+        isValid: true,
+        validationResults: [],
+    })),
+    setCommandValues: vi.fn(),
 }));
 
 vi.mock('primereact/dialog', () => {
     // PrimeReact 11's Dialog is compositional; each part is a pass-through that
     // renders its children so the footer buttons and content reach the markup.
-    const part = (props: { children?: React.ReactNode }) => React.createElement('div', null, props.children);
+    const part = (props: { children?: React.ReactNode }) =>
+        React.createElement('div', null, props.children);
     return {
         Dialog: {
-            Root: part, Portal: part, Backdrop: part, Positioner: part, Popup: part,
-            Header: part, Title: part, Close: part, Content: part, Footer: part,
+            Root: part,
+            Portal: part,
+            Backdrop: part,
+            Positioner: part,
+            Popup: part,
+            Header: part,
+            Title: part,
+            Close: part,
+            Content: part,
+            Footer: part,
         },
     };
 });
@@ -29,11 +42,24 @@ vi.mock('primereact/button', () => ({
     // dialog marks the button its focus trap should land on with `data-autofocus` rather
     // than React's autoFocus prop. That marker identifies the confirm button, whose click
     // this SSR render stands in for.
-    Button: (props: { 'data-autofocus'?: string; onClick?: () => Promise<void> | void; disabled?: boolean; children?: React.ReactNode }) => {
-        if (props['data-autofocus'] !== undefined && props.onClick && props.disabled !== true) {
+    Button: (props: {
+        'data-autofocus'?: string;
+        onClick?: () => Promise<void> | void;
+        disabled?: boolean;
+        children?: React.ReactNode;
+    }) => {
+        if (
+            props['data-autofocus'] !== undefined &&
+            props.onClick &&
+            props.disabled !== true
+        ) {
             void props.onClick();
         }
-        return React.createElement('button', { disabled: props.disabled }, props.children);
+        return React.createElement(
+            'button',
+            { disabled: props.disabled },
+            props.children,
+        );
     },
 }));
 
@@ -75,19 +101,26 @@ describe('when CommandDialog validity is gated', () => {
         CommandDialog = (await import('../CommandDialog')).CommandDialog;
     });
 
-    const renderDialog = (props?: { isValid?: boolean; onBeforeExecute?: (values: TestCommand) => TestCommand }) => renderToStaticMarkup(
-        React.createElement(CommandDialog, {
-            // SAFETY: The generated command proxy constructor is erased by this SSR harness only.
-            command: TestCommand as unknown as new () => object,
-            visible: true,
-            title: 'Test Dialog',
-            ...props
-        })
-    );
+    const renderDialog = (props?: {
+        isValid?: boolean;
+        onBeforeExecute?: (values: TestCommand) => TestCommand;
+    }) =>
+        renderToStaticMarkup(
+            React.createElement(CommandDialog, {
+                // SAFETY: The generated command proxy constructor is erased by this SSR harness only.
+                command: TestCommand as unknown as new () => object,
+                visible: true,
+                title: 'Test Dialog',
+                ...props,
+            }),
+        );
 
     // The PrimeReact 11 Button renders its content as children, so the Ok button's
     // markup is `<button ...><i .../><span>Ok</span></button>` — find it by its label span.
-    const getOkButton = (html: string) => (html.match(/<button[\s\S]*?<\/button>/g) ?? []).find(button => button.includes('>Ok<')) ?? '';
+    const getOkButton = (html: string) =>
+        (html.match(/<button[\s\S]*?<\/button>/g) ?? []).find((button) =>
+            button.includes('>Ok<'),
+        ) ?? '';
 
     afterEach(() => {
         commandFormValidity.isValid = true;
@@ -107,7 +140,7 @@ describe('when CommandDialog validity is gated', () => {
 
         const html = renderDialog({
             isValid: true,
-            onBeforeExecute: () => ({ name: 'External value' })
+            onBeforeExecute: () => ({ name: 'External value' }),
         });
 
         expect(getOkButton(html)).to.include('disabled');
@@ -138,7 +171,7 @@ describe('when CommandDialog validity is gated', () => {
 
         const html = renderDialog({
             isValid: true,
-            onBeforeExecute: () => ({ name: 'External value' })
+            onBeforeExecute: () => ({ name: 'External value' }),
         });
 
         expect(getOkButton(html)).not.to.include('disabled');
diff --git a/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_a_bare_string_sits_between_steps.ts b/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_a_bare_string_sits_between_steps.ts
index efbf11f7..fa339783 100644
--- a/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_a_bare_string_sits_between_steps.ts
+++ b/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_a_bare_string_sits_between_steps.ts
@@ -32,7 +32,7 @@ vi.mock('primereact/stepper', () => {
 // PrimeReact 11's Button takes its label as children, not a `label` prop, so the label a
 // button is recorded under is the text its children carry (the icon contributes none).
 // Only an enabled button is clickable, so only an enabled button is recorded.
-vi.mock('primereact/button', () => {
+vi.mock('../../../Common/Button', () => {
     const labelOf = (children: React.ReactNode): string => {
         let label = '';
         React.Children.forEach(children, child => {
diff --git a/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_it_is_in_the_middle.ts b/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_it_is_in_the_middle.ts
index a7a2a5cd..ba2f8160 100644
--- a/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_it_is_in_the_middle.ts
+++ b/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_it_is_in_the_middle.ts
@@ -7,45 +7,71 @@ import { vi } from 'vitest';
 import { CommandStepper, CommandStepperContent } from '../../CommandStepper';
 import { StepperPanel } from '../../StepperPanel';
 
-const { buttonClicks } = vi.hoisted(() => ({ buttonClicks: new Map<string, () => void>() }));
+const { buttonClicks } = vi.hoisted(() => ({
+    buttonClicks: new Map<string, () => void>(),
+}));
 
 // PrimeReact 11's Stepper is compositional: each part renders its children, so every step
 // the wizard renders shows up as one `data-part="panel"` element, and the Number part
 // forwards the inline `style` carrying the per-step indicator color.
 vi.mock('primereact/stepper', () => {
     const part = (name: string) => {
-        const Component = (props: { children?: React.ReactNode; style?: React.CSSProperties }) =>
-            React.createElement('div', { 'data-part': name, style: props.style }, props.children);
+        const Component = (props: {
+            children?: React.ReactNode;
+            style?: React.CSSProperties;
+        }) =>
+            React.createElement(
+                'div',
+                { 'data-part': name, style: props.style },
+                props.children,
+            );
         Component.displayName = name;
         return Component;
     };
     return {
         Stepper: {
-            Root: part('root'), List: part('list'), Step: part('step'),
-            Header: part('header'), Number: part('number'), Title: part('title'),
-            Separator: part('separator'), Panels: part('panels'), Panel: part('panel'),
+            Root: part('root'),
+            List: part('list'),
+            Step: part('step'),
+            Header: part('header'),
+            Number: part('number'),
+            Title: part('title'),
+            Separator: part('separator'),
+            Panels: part('panels'),
+            Panel: part('panel'),
         },
     };
 });
 
-
 // PrimeReact 11's Button takes its label as children, not a `label` prop, so the label a
 // button is recorded under is the text its children carry (the icon contributes none).
 // Only an enabled button is clickable, so only an enabled button is recorded.
-vi.mock('primereact/button', () => {
+vi.mock('../../../Common/Button', () => {
     const labelOf = (children: React.ReactNode): string => {
         let label = '';
-        React.Children.forEach(children, child => {
+        React.Children.forEach(children, (child) => {
             if (typeof child === 'string') label += child;
-            else if (React.isValidElement(child)) label += labelOf((child.props as { children?: React.ReactNode }).children);
+            else if (React.isValidElement(child))
+                label += labelOf(
+                    (child.props as { children?: React.ReactNode }).children,
+                );
         });
         return label;
     };
     return {
-        Button: (props: { children?: React.ReactNode; disabled?: boolean; onClick?: () => void }) => {
+        Button: (props: {
+            children?: React.ReactNode;
+            disabled?: boolean;
+            onClick?: () => void;
+        }) => {
             const label = labelOf(props.children);
-            if (label && props.disabled !== true) buttonClicks.set(label, () => props.onClick?.());
-            return React.createElement('button', { disabled: props.disabled }, props.children);
+            if (label && props.disabled !== true)
+                buttonClicks.set(label, () => props.onClick?.());
+            return React.createElement(
+                'button',
+                { disabled: props.disabled },
+                props.children,
+            );
         },
     };
 });
@@ -57,7 +83,8 @@ vi.mock('@cratis/arc.react/commands', () => ({
         isValid: true,
         setCommandValues: () => {},
         setCommandResult: () => {},
-        getFieldError: (fieldName: string) => fieldName === 'name' ? 'Name is required' : undefined,
+        getFieldError: (fieldName: string) =>
+            fieldName === 'name' ? 'Name is required' : undefined,
     }),
     useCommandInstance: () => ({}),
     CommandFormFieldWrapper: (props: { field?: React.ReactNode }) =>
@@ -79,30 +106,48 @@ NameField.displayName = 'CommandFormField';
 // The step number and its title are siblings inside the step header, so the number
 // belonging to a named step is the one immediately preceding that step's title.
 const numberBackgroundOf = (html: string, header: string) =>
-    html.match(new RegExp(`<div data-part="number"([^>]*)>[^<]*</div><div data-part="title">${header}</div>`))?.[1] ?? '';
+    html.match(
+        new RegExp(
+            `<span(?=[^>]*data-part="number")([^>]*)>[^<]*</span><span(?=[^>]*data-part="title")[^>]*>${header}</span>`,
+        ),
+    )?.[1] ?? '';
 
 // Exactly how a conditional step is written in an application: `{condition && <StepperPanel/>}`.
 const showOptionalStep: boolean = false;
 
 const steps = () => [
-    React.createElement(StepperPanel, { header: 'Contact', key: 'contact' }, 'No fields here'),
-    showOptionalStep && React.createElement(StepperPanel, { header: 'Optional', key: 'optional' }, 'Hidden'),
+    React.createElement(
+        StepperPanel,
+        { header: 'Contact', key: 'contact' },
+        'No fields here',
+    ),
+    showOptionalStep &&
+        React.createElement(
+            StepperPanel,
+            { header: 'Optional', key: 'optional' },
+            'Hidden',
+        ),
     React.createElement(
         StepperPanel,
         { header: 'Details', key: 'details' },
-        React.createElement(NameField, { value: (command: TestCommand) => command.name })
-    )
+        React.createElement(NameField, { value: (command: TestCommand) => command.name }),
+    ),
 ];
 
 describe('when the hidden step sits between two rendered steps', () => {
     let html: string;
 
     beforeEach(() => {
-        html = renderToStaticMarkup(React.createElement(
-            CommandStepper<TestCommand>,
-            { command: TestCommand as unknown as new () => object },
-            ...steps()
-        ));
+        html = renderToStaticMarkup(
+            React.createElement(
+                CommandStepper<TestCommand>,
+                {
+                    // SAFETY: The generated command proxy constructor is erased by this SSR harness only.
+                    command: TestCommand as unknown as new () => object,
+                },
+                ...steps(),
+            ),
+        );
     });
 
     it('should_render_only_the_two_surviving_steps', () => {
@@ -132,13 +177,19 @@ describe('when the hidden step sits in the middle and the user walks forward', (
 
         const render = () => {
             buttonClicks.clear();
-            html = renderToStaticMarkup(React.createElement(CommandStepperContent, {
-                activeStep,
-                visitedSteps,
-                onActiveStepChange: (stepIndex: number) => { activeStep = stepIndex; },
-                onVisitedStepsChange: (updated: Set<number>) => { visitedSteps = updated; },
-                children: steps()
-            }));
+            html = renderToStaticMarkup(
+                React.createElement(CommandStepperContent, {
+                    activeStep,
+                    visitedSteps,
+                    onActiveStepChange: (stepIndex: number) => {
+                        activeStep = stepIndex;
+                    },
+                    onVisitedStepsChange: (updated: Set<number>) => {
+                        visitedSteps = updated;
+                    },
+                    children: steps(),
+                }),
+            );
         };
 
         render();
diff --git a/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_it_is_null.ts b/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_it_is_null.ts
index 6eaaef68..b353a85e 100644
--- a/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_it_is_null.ts
+++ b/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_it_is_null.ts
@@ -32,7 +32,7 @@ vi.mock('primereact/stepper', () => {
 // PrimeReact 11's Button takes its label as children, not a `label` prop, so the label a
 // button is recorded under is the text its children carry (the icon contributes none).
 // Only an enabled button is clickable, so only an enabled button is recorded.
-vi.mock('primereact/button', () => {
+vi.mock('../../../Common/Button', () => {
     const labelOf = (children: React.ReactNode): string => {
         let label = '';
         React.Children.forEach(children, child => {
diff --git a/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_it_is_undefined.ts b/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_it_is_undefined.ts
index 803bf06e..7ea1bf54 100644
--- a/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_it_is_undefined.ts
+++ b/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_it_is_undefined.ts
@@ -32,7 +32,7 @@ vi.mock('primereact/stepper', () => {
 // PrimeReact 11's Button takes its label as children, not a `label` prop, so the label a
 // button is recorded under is the text its children carry (the icon contributes none).
 // Only an enabled button is clickable, so only an enabled button is recorded.
-vi.mock('primereact/button', () => {
+vi.mock('../../../Common/Button', () => {
     const labelOf = (children: React.ReactNode): string => {
         let label = '';
         React.Children.forEach(children, child => {
diff --git a/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_the_first_step_is_hidden.ts b/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_the_first_step_is_hidden.ts
index f7f3a5dd..c2a1c35c 100644
--- a/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_the_first_step_is_hidden.ts
+++ b/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_the_first_step_is_hidden.ts
@@ -32,7 +32,7 @@ vi.mock('primereact/stepper', () => {
 // PrimeReact 11's Button takes its label as children, not a `label` prop, so the label a
 // button is recorded under is the text its children carry (the icon contributes none).
 // Only an enabled button is clickable, so only an enabled button is recorded.
-vi.mock('primereact/button', () => {
+vi.mock('../../../Common/Button', () => {
     const labelOf = (children: React.ReactNode): string => {
         let label = '';
         React.Children.forEach(children, child => {
diff --git a/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_the_last_step_is_false.ts b/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_the_last_step_is_false.ts
index 80be3be2..dcf32ab7 100644
--- a/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_the_last_step_is_false.ts
+++ b/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_the_last_step_is_false.ts
@@ -32,7 +32,7 @@ vi.mock('primereact/stepper', () => {
 // PrimeReact 11's Button takes its label as children, not a `label` prop, so the label a
 // button is recorded under is the text its children carry (the icon contributes none).
 // Only an enabled button is clickable, so only an enabled button is recorded.
-vi.mock('primereact/button', () => {
+vi.mock('../../../Common/Button', () => {
     const labelOf = (children: React.ReactNode): string => {
         let label = '';
         React.Children.forEach(children, child => {
diff --git a/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_the_steps_come_from_a_map.ts b/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_the_steps_come_from_a_map.ts
index 6cbbc1e9..f2ce63a5 100644
--- a/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_the_steps_come_from_a_map.ts
+++ b/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_the_steps_come_from_a_map.ts
@@ -32,7 +32,7 @@ vi.mock('primereact/stepper', () => {
 // PrimeReact 11's Button takes its label as children, not a `label` prop, so the label a
 // button is recorded under is the text its children carry (the icon contributes none).
 // Only an enabled button is clickable, so only an enabled button is recorded.
-vi.mock('primereact/button', () => {
+vi.mock('../../../Common/Button', () => {
     const labelOf = (children: React.ReactNode): string => {
         let label = '';
         React.Children.forEach(children, child => {
diff --git a/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_two_are_hidden.ts b/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_two_are_hidden.ts
index 0bc0d3e3..4d19747d 100644
--- a/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_two_are_hidden.ts
+++ b/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_two_are_hidden.ts
@@ -32,7 +32,7 @@ vi.mock('primereact/stepper', () => {
 // PrimeReact 11's Button takes its label as children, not a `label` prop, so the label a
 // button is recorded under is the text its children carry (the icon contributes none).
 // Only an enabled button is clickable, so only an enabled button is recorded.
-vi.mock('primereact/button', () => {
+vi.mock('../../../Common/Button', () => {
     const labelOf = (children: React.ReactNode): string => {
         let label = '';
         React.Children.forEach(children, child => {
diff --git a/Source/CommandDialog/for_CommandStepper/when_every_step_is_hidden.ts b/Source/CommandDialog/for_CommandStepper/when_every_step_is_hidden.ts
index 69d8358b..45971b9f 100644
--- a/Source/CommandDialog/for_CommandStepper/when_every_step_is_hidden.ts
+++ b/Source/CommandDialog/for_CommandStepper/when_every_step_is_hidden.ts
@@ -27,7 +27,7 @@ vi.mock('primereact/stepper', () => {
 
 
 // PrimeReact 11's Button takes its label as children, not a `label` prop.
-vi.mock('primereact/button', () => ({
+vi.mock('../../Common/Button', () => ({
     Button: (props: { children?: React.ReactNode; disabled?: boolean }) =>
         React.createElement('button', { disabled: props.disabled }, props.children),
 }));
diff --git a/Source/CommandDialog/for_CommandStepper/when_the_active_step_is_past_the_last_rendered_step.ts b/Source/CommandDialog/for_CommandStepper/when_the_active_step_is_past_the_last_rendered_step.ts
index 2677df95..c0b4fea8 100644
--- a/Source/CommandDialog/for_CommandStepper/when_the_active_step_is_past_the_last_rendered_step.ts
+++ b/Source/CommandDialog/for_CommandStepper/when_the_active_step_is_past_the_last_rendered_step.ts
@@ -28,7 +28,7 @@ vi.mock('primereact/stepper', () => {
 });
 
 // PrimeReact 11's Button takes its label as children, not a `label` prop.
-vi.mock('primereact/button', () => ({
+vi.mock('../../Common/Button', () => ({
     Button: (props: { children?: React.ReactNode; disabled?: boolean }) =>
         React.createElement('button', { disabled: props.disabled }, props.children),
 }));
diff --git a/Source/CommandDialog/for_StepperCommandDialog/given/a_stepper_dialog_in_the_dom.ts b/Source/CommandDialog/for_StepperCommandDialog/given/a_stepper_dialog_in_the_dom.ts
index 6ab58462..bd88e743 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/given/a_stepper_dialog_in_the_dom.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/given/a_stepper_dialog_in_the_dom.ts
@@ -24,8 +24,13 @@ export interface StepperDialogInTheDom {
  * @param element - The element to render.
  * @returns The mounted dialog, to be passed to {@link unmount}.
  */
-export const render = async (element: React.ReactElement): Promise<StepperDialogInTheDom> => {
-    (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+export const render = async (
+    element: React.ReactElement,
+): Promise<StepperDialogInTheDom> => {
+    // SAFETY: React's test-environment flag is an intentionally undocumented global absent from DOM typings.
+    (
+        globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
+    ).IS_REACT_ACT_ENVIRONMENT = true;
 
     const container = document.createElement('div');
     document.body.appendChild(container);
@@ -44,7 +49,10 @@ export const render = async (element: React.ReactElement): Promise<StepperDialog
  * @param dialog - The mounted dialog.
  * @param element - The element to render in its place.
  */
-export const rerender = async (dialog: StepperDialogInTheDom, element: React.ReactElement) => {
+export const rerender = async (
+    dialog: StepperDialogInTheDom,
+    element: React.ReactElement,
+) => {
     await act(async () => {
         dialog.root.render(element);
     });
@@ -67,7 +75,9 @@ export const unmount = async (dialog: StepperDialogInTheDom) => {
  * @param label - The label of the button to click.
  */
 export const click = async (dialog: StepperDialogInTheDom, label: string) => {
-    const button = Array.from(dialog.container.querySelectorAll('button')).find(candidate => candidate.textContent === label);
+    const button = Array.from(dialog.container.querySelectorAll('button'))
+        .filter((candidate) => !candidate.matches('[data-cratis-part="header"]'))
+        .find((candidate) => candidate.textContent === label);
 
     await act(async () => {
         button?.click();
@@ -93,7 +103,9 @@ export const pressEscape = async () => {
  * @returns The button labels, in document order.
  */
 export const buttonLabels = (dialog: StepperDialogInTheDom): string[] =>
-    Array.from(dialog.container.querySelectorAll('button')).map(button => button.textContent ?? '');
+    Array.from(dialog.container.querySelectorAll('button'))
+        .filter((button) => !button.matches('[data-cratis-part="header"]'))
+        .map((button) => button.textContent ?? '');
 
 /**
  * The footer laid out the way it is composed: every button by its label, and the flexible spacer
@@ -104,10 +116,13 @@ export const buttonLabels = (dialog: StepperDialogInTheDom): string[] =>
  * @returns The footer's children, in document order.
  */
 export const footerLayout = (dialog: StepperDialogInTheDom): string[] => {
-    const footer = dialog.container.querySelector('[data-testid="dialog"]')?.firstElementChild;
+    const footer = dialog.container.querySelector(
+        '[data-testid="dialog"]',
+    )?.firstElementChild;
 
-    return Array.from(footer?.children ?? [])
-        .map(child => child.tagName === 'BUTTON' ? child.textContent ?? '' : 'spacer');
+    return Array.from(footer?.children ?? []).map((child) =>
+        child.tagName === 'BUTTON' ? (child.textContent ?? '') : 'spacer',
+    );
 };
 
 /**
@@ -119,8 +134,10 @@ export const footerLayout = (dialog: StepperDialogInTheDom): string[] => {
  */
 export const disabledButtonLabels = (dialog: StepperDialogInTheDom): string[] =>
     Array.from(dialog.container.querySelectorAll('button'))
-        .filter(button => button.disabled)
-        .map(button => button.textContent ?? '');
+        .filter(
+            (button) => !button.matches('[data-cratis-part="header"]') && button.disabled,
+        )
+        .map((button) => button.textContent ?? '');
 
 /**
  * Runs work that resolves a promise the spec itself holds - settling a command execution,
@@ -134,22 +151,20 @@ export const settle = async (work: () => void) => {
 };
 
 /**
- * The headers of the steps the wizard actually rendered, in render order. PrimeReact 11's
- * Stepper is compositional, so a step's header text is the `Stepper.Title` part inside its
- * header rather than an attribute on the panel — one title per rendered step either way.
+ * The headers of the steps the wizard actually rendered, in render order.
  * @param dialog - The mounted dialog.
  * @returns The step headers.
  */
 export const renderedSteps = (dialog: StepperDialogInTheDom): string[] =>
-    Array.from(dialog.container.querySelectorAll('[data-part="title"]'))
-        .map(title => title.textContent ?? '');
+    Array.from(dialog.container.querySelectorAll('[data-part="title"]')).map(
+        (title) => title.textContent ?? '',
+    );
 
 /**
- * The step index the wizard handed the Stepper, or `'none'` when no stepper was
- * rendered at all. PrimeReact 11 drives the Stepper by `value` — the step's index
- * as a string — on its root part, in place of v10's `activeStep`.
+ * The active step index on the stable Cratis stepper root, or `'none'`.
  * @param dialog - The mounted dialog.
  * @returns The active step index as a string.
  */
 export const activeStep = (dialog: StepperDialogInTheDom): string =>
-    dialog.container.querySelector('[data-part="root"]')?.getAttribute('data-value') ?? 'none';
+    dialog.container.querySelector('[data-part="root"]')?.getAttribute('data-value') ??
+    'none';
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_a_step_disappears_after_it_was_passed.ts b/Source/CommandDialog/for_StepperCommandDialog/when_a_step_disappears_after_it_was_passed.ts
index 03290bc9..503f292d 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_a_step_disappears_after_it_was_passed.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_a_step_disappears_after_it_was_passed.ts
@@ -45,7 +45,7 @@ vi.mock('primereact/stepper', () => {
 
 // PrimeReact 11's Button takes its label as children, not a `label` prop — the button's
 // text content is what the given helpers read a button's label from.
-vi.mock('primereact/button', () => ({
+vi.mock('../../Common/Button', () => ({
     Button: (props: { children?: React.ReactNode; disabled?: boolean; onClick?: () => void }) =>
         React.createElement('button', { disabled: props.disabled, onClick: props.onClick }, props.children),
 }));
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_a_bare_string_sits_between_steps.ts b/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_a_bare_string_sits_between_steps.ts
index 2f8135f8..c5699460 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_a_bare_string_sits_between_steps.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_a_bare_string_sits_between_steps.ts
@@ -32,7 +32,7 @@ vi.mock('primereact/stepper', () => {
 
 
 // PrimeReact 11's Button takes its label as children, not a `label` prop.
-vi.mock('primereact/button', () => ({
+vi.mock('../../../Common/Button', () => ({
     Button: (props: { children?: React.ReactNode; disabled?: boolean }) =>
         React.createElement('button', { disabled: props.disabled }, props.children),
 }));
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_it_is_in_the_middle.ts b/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_it_is_in_the_middle.ts
index d2ad6418..f7d12e65 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_it_is_in_the_middle.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_it_is_in_the_middle.ts
@@ -9,7 +9,12 @@ import { StepperPanel } from '../../StepperPanel';
 
 vi.mock('../../../Dialogs/Dialog', () => ({
     Dialog: (props: { buttons?: React.ReactNode; children?: React.ReactNode }) =>
-        React.createElement('div', { 'data-testid': 'dialog' }, props.buttons, props.children),
+        React.createElement(
+            'div',
+            { 'data-testid': 'dialog' },
+            props.buttons,
+            props.children,
+        ),
 }));
 
 // PrimeReact 11's Stepper is compositional: each part renders its children, and the
@@ -17,22 +22,35 @@ vi.mock('../../../Dialogs/Dialog', () => ({
 // is where the red / green indicator now lives (v10 read it off pt.stepperpanel.number).
 vi.mock('primereact/stepper', () => {
     const part = (name: string) => {
-        const Component = (props: { children?: React.ReactNode; style?: React.CSSProperties }) =>
-            React.createElement('div', { 'data-part': name, style: props.style }, props.children);
+        const Component = (props: {
+            children?: React.ReactNode;
+            style?: React.CSSProperties;
+        }) =>
+            React.createElement(
+                'div',
+                { 'data-part': name, style: props.style },
+                props.children,
+            );
         Component.displayName = name;
         return Component;
     };
     return {
         Stepper: {
-            Root: part('root'), List: part('list'), Step: part('step'),
-            Header: part('header'), Number: part('number'), Title: part('title'),
-            Separator: part('separator'), Panels: part('panels'), Panel: part('panel'),
+            Root: part('root'),
+            List: part('list'),
+            Step: part('step'),
+            Header: part('header'),
+            Number: part('number'),
+            Title: part('title'),
+            Separator: part('separator'),
+            Panels: part('panels'),
+            Panel: part('panel'),
         },
     };
 });
 
 // PrimeReact 11's Button takes its label as children, not a `label` prop.
-vi.mock('primereact/button', () => ({
+vi.mock('../../../Common/Button', () => ({
     Button: (props: { children?: React.ReactNode; disabled?: boolean }) =>
         React.createElement('button', { disabled: props.disabled }, props.children),
 }));
@@ -49,7 +67,8 @@ vi.mock('@cratis/arc.react/commands', () => ({
         isValid: true,
         setCommandValues: () => {},
         setCommandResult: () => {},
-        getFieldError: (fieldName: string) => fieldName === 'name' ? 'Name is required' : undefined,
+        getFieldError: (fieldName: string) =>
+            fieldName === 'name' ? 'Name is required' : undefined,
     }),
     useCommandInstance: () => ({}),
     CommandFormFieldWrapper: (props: { field?: React.ReactNode }) =>
@@ -71,7 +90,11 @@ NameField.displayName = 'CommandFormField';
 // The step number and its title are siblings inside the step header, so the number
 // belonging to a named step is the one immediately preceding that step's title.
 const numberBackgroundOf = (html: string, header: string) =>
-    html.match(new RegExp(`<div data-part="number"([^>]*)>[^<]*</div><div data-part="title">${header}</div>`))?.[1] ?? '';
+    html.match(
+        new RegExp(
+            `<span(?=[^>]*data-part="number")([^>]*)>[^<]*</span><span(?=[^>]*data-part="title")[^>]*>${header}</span>`,
+        ),
+    )?.[1] ?? '';
 
 // Exactly how a conditional step is written in an application: `{condition && <StepperPanel/>}`.
 const showOptionalStep: boolean = false;
@@ -80,21 +103,35 @@ describe('when the hidden step sits between two rendered steps', () => {
     let html: string;
 
     beforeEach(() => {
-        html = renderToStaticMarkup(React.createElement(
-            StepperCommandDialog<TestCommand>,
-            {
-                command: TestCommand as unknown as new () => object,
-                visible: true,
-                title: 'Test Dialog',
-            },
-            React.createElement(StepperPanel, { header: 'Contact', key: 'contact' }, 'No fields here'),
-            showOptionalStep && React.createElement(StepperPanel, { header: 'Optional', key: 'optional' }, 'Hidden'),
+        html = renderToStaticMarkup(
             React.createElement(
-                StepperPanel,
-                { header: 'Details', key: 'details' },
-                React.createElement(NameField, { value: (command: TestCommand) => command.name })
-            )
-        ));
+                StepperCommandDialog<TestCommand>,
+                {
+                    // SAFETY: The generated command proxy constructor is erased by this SSR harness only.
+                    command: TestCommand as unknown as new () => object,
+                    visible: true,
+                    title: 'Test Dialog',
+                },
+                React.createElement(
+                    StepperPanel,
+                    { header: 'Contact', key: 'contact' },
+                    'No fields here',
+                ),
+                showOptionalStep &&
+                    React.createElement(
+                        StepperPanel,
+                        { header: 'Optional', key: 'optional' },
+                        'Hidden',
+                    ),
+                React.createElement(
+                    StepperPanel,
+                    { header: 'Details', key: 'details' },
+                    React.createElement(NameField, {
+                        value: (command: TestCommand) => command.name,
+                    }),
+                ),
+            ),
+        );
     });
 
     it('should_render_only_the_two_surviving_steps', () => {
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_it_is_null.ts b/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_it_is_null.ts
index 05a86220..bd8fc43b 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_it_is_null.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_it_is_null.ts
@@ -32,7 +32,7 @@ vi.mock('primereact/stepper', () => {
 
 
 // PrimeReact 11's Button takes its label as children, not a `label` prop.
-vi.mock('primereact/button', () => ({
+vi.mock('../../../Common/Button', () => ({
     Button: (props: { children?: React.ReactNode; disabled?: boolean }) =>
         React.createElement('button', { disabled: props.disabled }, props.children),
 }));
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_it_is_undefined.ts b/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_it_is_undefined.ts
index 3c112ef2..707a7623 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_it_is_undefined.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_it_is_undefined.ts
@@ -32,7 +32,7 @@ vi.mock('primereact/stepper', () => {
 
 
 // PrimeReact 11's Button takes its label as children, not a `label` prop.
-vi.mock('primereact/button', () => ({
+vi.mock('../../../Common/Button', () => ({
     Button: (props: { children?: React.ReactNode; disabled?: boolean }) =>
         React.createElement('button', { disabled: props.disabled }, props.children),
 }));
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_the_first_step_is_hidden.ts b/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_the_first_step_is_hidden.ts
index 45add02c..42cf9f31 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_the_first_step_is_hidden.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_the_first_step_is_hidden.ts
@@ -32,7 +32,7 @@ vi.mock('primereact/stepper', () => {
 
 
 // PrimeReact 11's Button takes its label as children, not a `label` prop.
-vi.mock('primereact/button', () => ({
+vi.mock('../../../Common/Button', () => ({
     Button: (props: { children?: React.ReactNode; disabled?: boolean }) =>
         React.createElement('button', { disabled: props.disabled }, props.children),
 }));
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_the_last_step_is_false.ts b/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_the_last_step_is_false.ts
index 14a9794f..9765502f 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_the_last_step_is_false.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_the_last_step_is_false.ts
@@ -32,7 +32,7 @@ vi.mock('primereact/stepper', () => {
 
 
 // PrimeReact 11's Button takes its label as children, not a `label` prop.
-vi.mock('primereact/button', () => ({
+vi.mock('../../../Common/Button', () => ({
     Button: (props: { children?: React.ReactNode; disabled?: boolean }) =>
         React.createElement('button', { disabled: props.disabled }, props.children),
 }));
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_the_steps_come_from_a_map.ts b/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_the_steps_come_from_a_map.ts
index 99102d73..c5e02e8d 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_the_steps_come_from_a_map.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_the_steps_come_from_a_map.ts
@@ -32,7 +32,7 @@ vi.mock('primereact/stepper', () => {
 
 
 // PrimeReact 11's Button takes its label as children, not a `label` prop.
-vi.mock('primereact/button', () => ({
+vi.mock('../../../Common/Button', () => ({
     Button: (props: { children?: React.ReactNode; disabled?: boolean }) =>
         React.createElement('button', { disabled: props.disabled }, props.children),
 }));
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_two_are_hidden.ts b/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_two_are_hidden.ts
index 2d1e2e4e..d1dd3d7a 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_two_are_hidden.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_two_are_hidden.ts
@@ -32,7 +32,7 @@ vi.mock('primereact/stepper', () => {
 
 
 // PrimeReact 11's Button takes its label as children, not a `label` prop.
-vi.mock('primereact/button', () => ({
+vi.mock('../../../Common/Button', () => ({
     Button: (props: { children?: React.ReactNode; disabled?: boolean }) =>
         React.createElement('button', { disabled: props.disabled }, props.children),
 }));
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_dismissing_while_the_command_runs/and_escape_is_pressed.ts b/Source/CommandDialog/for_StepperCommandDialog/when_dismissing_while_the_command_runs/and_escape_is_pressed.ts
index 7d4e7d8e..4f762131 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_dismissing_while_the_command_runs/and_escape_is_pressed.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_dismissing_while_the_command_runs/and_escape_is_pressed.ts
@@ -80,7 +80,7 @@ vi.mock('primereact/stepper', () => {
 });
 
 // PrimeReact 11's Button takes its label as children, not a `label` prop.
-vi.mock('primereact/button', () => ({
+vi.mock('../../../Common/Button', () => ({
     Button: (props: { children?: React.ReactNode; disabled?: boolean; onClick?: () => void }) =>
         React.createElement('button', { disabled: props.disabled, onClick: props.onClick }, props.children),
 }));
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_dismissing_while_the_command_runs/and_the_header_close_is_used.ts b/Source/CommandDialog/for_StepperCommandDialog/when_dismissing_while_the_command_runs/and_the_header_close_is_used.ts
index 608eceef..24685e87 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_dismissing_while_the_command_runs/and_the_header_close_is_used.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_dismissing_while_the_command_runs/and_the_header_close_is_used.ts
@@ -66,7 +66,7 @@ vi.mock('primereact/stepper', () => {
 });
 
 // PrimeReact 11's Button takes its label as children, not a `label` prop.
-vi.mock('primereact/button', () => ({
+vi.mock('../../../Common/Button', () => ({
     Button: (props: { children?: React.ReactNode; disabled?: boolean; onClick?: () => void }) =>
         React.createElement('button', { disabled: props.disabled, onClick: props.onClick }, props.children),
 }));
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_every_step_is_hidden.ts b/Source/CommandDialog/for_StepperCommandDialog/when_every_step_is_hidden.ts
index 9dd75bcb..a181bb2c 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_every_step_is_hidden.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_every_step_is_hidden.ts
@@ -44,7 +44,7 @@ vi.mock('primereact/stepper', () => {
 
 // PrimeReact 11's Button takes its label as children, not a `label` prop — the button's
 // text content is what the given helpers read a button's label from.
-vi.mock('primereact/button', () => ({
+vi.mock('../../Common/Button', () => ({
     Button: (props: { children?: React.ReactNode; disabled?: boolean; onClick?: () => void }) =>
         React.createElement('button', { disabled: props.disabled, onClick: props.onClick }, props.children),
 }));
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_form_is_invalid.ts b/Source/CommandDialog/for_StepperCommandDialog/when_form_is_invalid.ts
index 3fca06e3..0718f26b 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_form_is_invalid.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_form_is_invalid.ts
@@ -33,7 +33,7 @@ vi.mock('primereact/stepper', () => {
 
 // The submit button is the only one carrying autoFocus — auto-activate it (when
 // enabled) so the spec can assert whether the command executes.
-vi.mock('primereact/button', () => ({
+vi.mock('../../Common/Button', () => ({
     Button: (props: { children?: React.ReactNode; onClick?: () => Promise<void> | void; disabled?: boolean; autoFocus?: boolean }) => {
         if (props.autoFocus && props.onClick && props.disabled !== true) {
             void props.onClick();
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_not_executing.ts b/Source/CommandDialog/for_StepperCommandDialog/when_not_executing.ts
index 07d656c8..eed2b8f3 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_not_executing.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_not_executing.ts
@@ -33,7 +33,7 @@ vi.mock('primereact/stepper', () => {
 });
 
 // PrimeReact 11's Button renders its content as children (no label/loading props).
-vi.mock('primereact/button', () => ({
+vi.mock('../../Common/Button', () => ({
     Button: (props: { children?: React.ReactNode; disabled?: boolean }) =>
         React.createElement('button', { disabled: props.disabled }, props.children),
 }));
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_an_async_transform_has_not_settled.ts b/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_an_async_transform_has_not_settled.ts
index 86e72073..44345140 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_an_async_transform_has_not_settled.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_an_async_transform_has_not_settled.ts
@@ -52,7 +52,7 @@ vi.mock('primereact/stepper', () => {
 
 // PrimeReact 11's Button takes its label as children, not a `label` prop — the button's
 // text content is what the given helpers read a button's label from.
-vi.mock('primereact/button', () => ({
+vi.mock('../../../Common/Button', () => ({
     Button: (props: { children?: React.ReactNode; disabled?: boolean; onClick?: () => void }) =>
         React.createElement('button', { disabled: props.disabled, onClick: props.onClick }, props.children),
 }));
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_it_is_asked_for.ts b/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_it_is_asked_for.ts
index 74802972..42138fde 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_it_is_asked_for.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_it_is_asked_for.ts
@@ -42,7 +42,7 @@ vi.mock('primereact/stepper', () => {
 
 // PrimeReact 11's Button takes its label as children, not a `label` prop — the button's
 // text content is what the given helpers read a button's label from.
-vi.mock('primereact/button', () => ({
+vi.mock('../../../Common/Button', () => ({
     Button: (props: { children?: React.ReactNode; disabled?: boolean; onClick?: () => void }) =>
         React.createElement('button', { disabled: props.disabled, onClick: props.onClick }, props.children),
 }));
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_it_is_clicked.ts b/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_it_is_clicked.ts
index d3dbc1e5..64595a17 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_it_is_clicked.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_it_is_clicked.ts
@@ -44,7 +44,7 @@ vi.mock('primereact/stepper', () => {
 
 // PrimeReact 11's Button takes its label as children, not a `label` prop — the button's
 // text content is what the given helpers read a button's label from.
-vi.mock('primereact/button', () => ({
+vi.mock('../../../Common/Button', () => ({
     Button: (props: { children?: React.ReactNode; disabled?: boolean; onClick?: () => void }) =>
         React.createElement('button', { disabled: props.disabled, onClick: props.onClick }, props.children),
 }));
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_it_is_given_a_label.ts b/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_it_is_given_a_label.ts
index e22d09d9..a83788f4 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_it_is_given_a_label.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_it_is_given_a_label.ts
@@ -44,7 +44,7 @@ vi.mock('primereact/stepper', () => {
 
 // PrimeReact 11's Button takes its label as children, not a `label` prop — the button's
 // text content is what the given helpers read a button's label from.
-vi.mock('primereact/button', () => ({
+vi.mock('../../../Common/Button', () => ({
     Button: (props: { children?: React.ReactNode; disabled?: boolean; onClick?: () => void }) =>
         React.createElement('button', { disabled: props.disabled, onClick: props.onClick }, props.children),
 }));
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_it_is_not_asked_for.ts b/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_it_is_not_asked_for.ts
index ba317c7c..d3390716 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_it_is_not_asked_for.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_it_is_not_asked_for.ts
@@ -42,7 +42,7 @@ vi.mock('primereact/stepper', () => {
 
 // PrimeReact 11's Button takes its label as children, not a `label` prop — the button's
 // text content is what the given helpers read a button's label from.
-vi.mock('primereact/button', () => ({
+vi.mock('../../../Common/Button', () => ({
     Button: (props: { children?: React.ReactNode; disabled?: boolean; onClick?: () => void }) =>
         React.createElement('button', { disabled: props.disabled, onClick: props.onClick }, props.children),
 }));
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_submit_is_clicked_instead.ts b/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_submit_is_clicked_instead.ts
index fdc9c379..8720fcde 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_submit_is_clicked_instead.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_submit_is_clicked_instead.ts
@@ -44,7 +44,7 @@ vi.mock('primereact/stepper', () => {
 
 // PrimeReact 11's Button takes its label as children, not a `label` prop — the button's
 // text content is what the given helpers read a button's label from.
-vi.mock('primereact/button', () => ({
+vi.mock('../../../Common/Button', () => ({
     Button: (props: { children?: React.ReactNode; disabled?: boolean; onClick?: () => void }) =>
         React.createElement('button', { disabled: props.disabled, onClick: props.onClick }, props.children),
 }));
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_the_command_is_executing.ts b/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_the_command_is_executing.ts
index 8e74093d..295fcebb 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_the_command_is_executing.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_the_command_is_executing.ts
@@ -58,7 +58,7 @@ vi.mock('primereact/stepper', () => {
 
 // PrimeReact 11's Button takes its label as children, not a `label` prop — the button's
 // text content is what the given helpers read a button's label from.
-vi.mock('primereact/button', () => ({
+vi.mock('../../../Common/Button', () => ({
     Button: (props: { children?: React.ReactNode; disabled?: boolean; onClick?: () => void }) =>
         React.createElement('button', { disabled: props.disabled, onClick: props.onClick }, props.children),
 }));
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_single_step.ts b/Source/CommandDialog/for_StepperCommandDialog/when_single_step.ts
index c72789df..625f23f7 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_single_step.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_single_step.ts
@@ -28,7 +28,7 @@ vi.mock('primereact/stepper', () => {
     };
 });
 
-vi.mock('primereact/button', () => ({
+vi.mock('../../Common/Button', () => ({
     Button: (props: { children?: React.ReactNode; disabled?: boolean }) =>
         React.createElement('button', { disabled: props.disabled }, props.children),
 }));
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_step_has_field_errors.ts b/Source/CommandDialog/for_StepperCommandDialog/when_step_has_field_errors.ts
index 557d1e07..c9c7cc20 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_step_has_field_errors.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_step_has_field_errors.ts
@@ -7,7 +7,12 @@ import { vi } from 'vitest';
 
 vi.mock('../../Dialogs/Dialog', () => ({
     Dialog: (props: { buttons?: React.ReactNode; children?: React.ReactNode }) =>
-        React.createElement('div', { 'data-testid': 'dialog' }, props.buttons, props.children),
+        React.createElement(
+            'div',
+            { 'data-testid': 'dialog' },
+            props.buttons,
+            props.children,
+        ),
 }));
 
 // PrimeReact 11's Stepper is compositional: each part renders its children, and
@@ -15,21 +20,34 @@ vi.mock('../../Dialogs/Dialog', () => ({
 // red/green indicator the wrapper applies directly to each step's number.
 vi.mock('primereact/stepper', () => {
     const part = (name: string) => {
-        const Component = (props: { children?: React.ReactNode; style?: React.CSSProperties }) =>
-            React.createElement('div', { 'data-part': name, style: props.style }, props.children);
+        const Component = (props: {
+            children?: React.ReactNode;
+            style?: React.CSSProperties;
+        }) =>
+            React.createElement(
+                'div',
+                { 'data-part': name, style: props.style },
+                props.children,
+            );
         Component.displayName = name;
         return Component;
     };
     return {
         Stepper: {
-            Root: part('root'), List: part('list'), Step: part('step'),
-            Header: part('header'), Number: part('number'), Title: part('title'),
-            Separator: part('separator'), Panels: part('panels'), Panel: part('panel'),
+            Root: part('root'),
+            List: part('list'),
+            Step: part('step'),
+            Header: part('header'),
+            Number: part('number'),
+            Title: part('title'),
+            Separator: part('separator'),
+            Panels: part('panels'),
+            Panel: part('panel'),
         },
     };
 });
 
-vi.mock('primereact/button', () => ({
+vi.mock('../../Common/Button', () => ({
     Button: (props: { children?: React.ReactNode; disabled?: boolean }) =>
         React.createElement('button', { disabled: props.disabled }, props.children),
 }));
@@ -81,12 +99,14 @@ describe('when a step contains a field with a validation error', () => {
 
     beforeEach(async () => {
         vi.resetModules();
-        StepperCommandDialog = (await import('../StepperCommandDialog')).StepperCommandDialog;
+        StepperCommandDialog = (await import('../StepperCommandDialog'))
+            .StepperCommandDialog;
         StepperPanel = (await import('../StepperPanel')).StepperPanel;
 
         const element = React.createElement(
             StepperCommandDialog<TestCommand>,
             {
+                // SAFETY: The generated command proxy constructor is erased by this SSR harness only.
                 command: TestCommand as unknown as new () => object,
                 visible: true,
                 title: 'Test Dialog',
@@ -94,22 +114,22 @@ describe('when a step contains a field with a validation error', () => {
             React.createElement(
                 StepperPanel,
                 { header: 'Step 1' },
-                React.createElement(FakeNameField, { value: (c: TestCommand) => c.name })
+                React.createElement(FakeNameField, { value: (c: TestCommand) => c.name }),
             ),
-            React.createElement(StepperPanel, { header: 'Step 2' }, 'No errors here')
+            React.createElement(StepperPanel, { header: 'Step 2' }, 'No errors here'),
         );
         html = renderToStaticMarkup(element);
     });
 
     it('should_mark_the_invalid_step_number_with_the_error_color', () => {
         // Step 1 (number "1") has a field error — its number circle should have the red error background
-        const step1Number = html.match(/<span data-part="number"[^>]*>1<\/span>|<div data-part="number"[^>]*>1<\/div>/);
+        const step1Number = html.match(/<span(?=[^>]*data-part="number")[^>]*>1<\/span>/);
         (step1Number?.[0] ?? '').should.include('red');
     });
 
     it('should_not_mark_the_valid_step_number_with_the_error_color', () => {
         // Step 2 (number "2") has no field errors — its number circle should not have the red error background
-        const step2Number = html.match(/<span data-part="number"[^>]*>2<\/span>|<div data-part="number"[^>]*>2<\/div>/);
+        const step2Number = html.match(/<span(?=[^>]*data-part="number")[^>]*>2<\/span>/);
         (step2Number?.[0] ?? '').should.not.include('red');
     });
 });
diff --git a/Source/CommandForm/fields/CalendarField.tsx b/Source/CommandForm/fields/CalendarField.tsx
index d9e651f9..67c4a2e1 100644
--- a/Source/CommandForm/fields/CalendarField.tsx
+++ b/Source/CommandForm/fields/CalendarField.tsx
@@ -81,6 +81,6 @@ export const CalendarField = asCommandFormField<CalendarFieldComponentProps>(
     ),
     {
         defaultValue: null,
-        extractValue: (e: unknown) => e instanceof Date ? e : null
-    }
+        extractValue: (e: unknown) => (e instanceof Date ? e : null),
+    },
 );
diff --git a/Source/CommandForm/fields/CheckboxField.tsx b/Source/CommandForm/fields/CheckboxField.tsx
index 8a024fa9..1a73c280 100644
--- a/Source/CommandForm/fields/CheckboxField.tsx
+++ b/Source/CommandForm/fields/CheckboxField.tsx
@@ -24,7 +24,9 @@ export const CheckboxField = asCommandFormField<CheckboxFieldComponentProps>(
     (props) => (
         <label
             {...props.pt?.root}
-            className={['cratis-choice-field', props.pt?.root?.className, props.className].filter(Boolean).join(' ')}
+            className={['cratis-choice-field', props.pt?.root?.className, props.className]
+                .filter(Boolean)
+                .join(' ')}
             onBlur={props.onBlur}
             data-cratis-part='root'
             data-invalid={props.invalid || undefined}
@@ -35,26 +37,40 @@ export const CheckboxField = asCommandFormField<CheckboxFieldComponentProps>(
                 checked={props.value}
                 onChange={props.onChange}
                 aria-invalid={props.invalid || undefined}
-                className={['cratis-choice-field__native', props.pt?.input?.className].filter(Boolean).join(' ')}
+                className={['cratis-choice-field__native', props.pt?.input?.className]
+                    .filter(Boolean)
+                    .join(' ')}
                 data-cratis-part='input'
             />
             <span
                 {...props.pt?.box}
-                className={['cratis-checkbox__box', props.pt?.box?.className].filter(Boolean).join(' ')}
+                className={['cratis-checkbox__box', props.pt?.box?.className]
+                    .filter(Boolean)
+                    .join(' ')}
                 data-cratis-part='box'
                 aria-hidden='true'
             >
                 <span
                     {...props.pt?.indicator}
-                    className={['cratis-checkbox__indicator', props.pt?.indicator?.className].filter(Boolean).join(' ')}
+                    className={[
+                        'cratis-checkbox__indicator',
+                        props.pt?.indicator?.className,
+                    ]
+                        .filter(Boolean)
+                        .join(' ')}
                     data-cratis-part='indicator'
-                >✓</span>
+                >
+                    ✓
+                </span>
             </span>
-            {props.label && <span className='cratis-choice-field__label'>{props.label}</span>}
+            {props.label && (
+                <span className='cratis-choice-field__label'>{props.label}</span>
+            )}
         </label>
     ),
     {
         defaultValue: false,
-        extractValue: (event: React.ChangeEvent<HTMLInputElement>) => event.target.checked,
+        extractValue: (event: React.ChangeEvent<HTMLInputElement>) =>
+            event.target.checked,
     },
 );
diff --git a/Source/CommandForm/fields/ChipsField.tsx b/Source/CommandForm/fields/ChipsField.tsx
index 73a47d3e..2679969e 100644
--- a/Source/CommandForm/fields/ChipsField.tsx
+++ b/Source/CommandForm/fields/ChipsField.tsx
@@ -29,13 +29,19 @@ const ChipsControl = (props: ChipsFieldComponentProps) => {
 
     const commit = () => {
         const candidates = (props.separator ? draft.split(props.separator) : [draft])
-            .map(value => value.trim())
+            .map((value) => value.trim())
             .filter(Boolean);
         if (candidates.length === 0) return;
-        const available = props.max === undefined ? candidates : candidates.slice(0, Math.max(0, props.max - props.value.length));
+        const available =
+            props.max === undefined
+                ? candidates
+                : candidates.slice(0, Math.max(0, props.max - props.value.length));
         const next = props.allowDuplicate
             ? [...props.value, ...available]
-            : [...props.value, ...available.filter(candidate => !props.value.includes(candidate))];
+            : [
+                  ...props.value,
+                  ...available.filter((candidate) => !props.value.includes(candidate)),
+              ];
         props.onChange(next);
         setDraft('');
     };
@@ -43,10 +49,18 @@ const ChipsControl = (props: ChipsFieldComponentProps) => {
     return (
         <div
             {...props.pt?.root}
-            className={['cratis-chips-field', 'w-full', props.pt?.root?.className, props.className].filter(Boolean).join(' ')}
-            onBlur={event => {
+            className={[
+                'cratis-chips-field',
+                'w-full',
+                props.pt?.root?.className,
+                props.className,
+            ]
+                .filter(Boolean)
+                .join(' ')}
+            onBlur={(event) => {
                 props.onBlur?.();
-                if (props.addOnBlur && !event.currentTarget.contains(event.relatedTarget)) commit();
+                if (props.addOnBlur && !event.currentTarget.contains(event.relatedTarget))
+                    commit();
             }}
             data-cratis-part='root'
             data-invalid={props.invalid || undefined}
@@ -55,25 +69,38 @@ const ChipsControl = (props: ChipsFieldComponentProps) => {
                 <span
                     {...props.pt?.item}
                     key={`${item}-${index}`}
-                    className={['cratis-chips-field__item', props.pt?.item?.className].filter(Boolean).join(' ')}
+                    className={['cratis-chips-field__item', props.pt?.item?.className]
+                        .filter(Boolean)
+                        .join(' ')}
                     data-cratis-part='item'
                 >
                     <span>{item}</span>
                     <button
                         {...props.pt?.remove}
                         type='button'
-                        className={['cratis-chips-field__remove', props.pt?.remove?.className].filter(Boolean).join(' ')}
+                        className={[
+                            'cratis-chips-field__remove',
+                            props.pt?.remove?.className,
+                        ]
+                            .filter(Boolean)
+                            .join(' ')}
                         data-cratis-part='remove'
                         aria-label={props.removeAriaLabel ?? 'Remove'}
-                        onClick={() => props.onChange(props.value.filter((_, itemIndex) => itemIndex !== index))}
-                    >×</button>
+                        onClick={() =>
+                            props.onChange(
+                                props.value.filter((_, itemIndex) => itemIndex !== index),
+                            )
+                        }
+                    >
+                        ×
+                    </button>
                 </span>
             ))}
             <input
                 {...props.pt?.input}
                 value={draft}
-                onChange={event => setDraft(event.target.value)}
-                onKeyDown={event => {
+                onChange={(event) => setDraft(event.target.value)}
+                onKeyDown={(event) => {
                     if (event.key === 'Enter') {
                         event.preventDefault();
                         commit();
@@ -81,7 +108,9 @@ const ChipsControl = (props: ChipsFieldComponentProps) => {
                 }}
                 placeholder={props.placeholder}
                 aria-invalid={props.invalid || undefined}
-                className={['cratis-chips-field__input', props.pt?.input?.className].filter(Boolean).join(' ')}
+                className={['cratis-chips-field__input', props.pt?.input?.className]
+                    .filter(Boolean)
+                    .join(' ')}
                 data-cratis-part='input'
             />
         </div>
@@ -89,12 +118,10 @@ const ChipsControl = (props: ChipsFieldComponentProps) => {
 };
 
 /** A token input bound to a string array property on an Arc command. */
-export const ChipsField = asCommandFormField<ChipsFieldComponentProps>(
-    ChipsControl,
-    {
-        defaultValue: [],
-        extractValue: (value: unknown) => Array.isArray(value)
+export const ChipsField = asCommandFormField<ChipsFieldComponentProps>(ChipsControl, {
+    defaultValue: [],
+    extractValue: (value: unknown) =>
+        Array.isArray(value)
             ? value.filter((item): item is string => typeof item === 'string')
             : [],
-    },
-);
+});
diff --git a/Source/CommandForm/fields/ColorPickerField.tsx b/Source/CommandForm/fields/ColorPickerField.tsx
index 89f505ee..8df6bdcd 100644
--- a/Source/CommandForm/fields/ColorPickerField.tsx
+++ b/Source/CommandForm/fields/ColorPickerField.tsx
@@ -25,11 +25,20 @@ const normalizeHex = (value: string, fallback: string) =>
 /** A native color picker bound to a bare six-digit hex string on an Arc command. */
 export const ColorPickerField = asCommandFormField<ColorPickerFieldComponentProps>(
     (props) => {
-        const value = normalizeHex(props.value, normalizeHex(props.defaultColor ?? '000000', '000000'));
+        const value = normalizeHex(
+            props.value,
+            normalizeHex(props.defaultColor ?? '000000', '000000'),
+        );
         return (
             <div
                 {...props.pt?.root}
-                className={['cratis-color-field', props.pt?.root?.className, props.className].filter(Boolean).join(' ')}
+                className={[
+                    'cratis-color-field',
+                    props.pt?.root?.className,
+                    props.className,
+                ]
+                    .filter(Boolean)
+                    .join(' ')}
                 onBlur={props.onBlur}
                 data-cratis-part='root'
                 data-invalid={props.invalid || undefined}
@@ -41,19 +50,26 @@ export const ColorPickerField = asCommandFormField<ColorPickerFieldComponentProp
                     value={`#${value}`}
                     onChange={props.onChange}
                     aria-invalid={props.invalid || undefined}
-                    className={['cratis-color-field__input', props.pt?.input?.className].filter(Boolean).join(' ')}
+                    className={['cratis-color-field__input', props.pt?.input?.className]
+                        .filter(Boolean)
+                        .join(' ')}
                     data-cratis-part='input'
                 />
                 <output
                     {...props.pt?.value}
-                    className={['cratis-color-field__value', props.pt?.value?.className].filter(Boolean).join(' ')}
+                    className={['cratis-color-field__value', props.pt?.value?.className]
+                        .filter(Boolean)
+                        .join(' ')}
                     data-cratis-part='value'
-                >#{value}</output>
+                >
+                    #{value}
+                </output>
             </div>
         );
     },
     {
         defaultValue: '',
-        extractValue: (event: React.ChangeEvent<HTMLInputElement>) => event.target.value.replace('#', ''),
+        extractValue: (event: React.ChangeEvent<HTMLInputElement>) =>
+            event.target.value.replace('#', ''),
     },
 );
diff --git a/Source/CommandForm/fields/Fields.css b/Source/CommandForm/fields/Fields.css
index 87a49250..4f9d8f5d 100644
--- a/Source/CommandForm/fields/Fields.css
+++ b/Source/CommandForm/fields/Fields.css
@@ -11,12 +11,29 @@
     font: inherit;
     box-shadow: 0 1px 2px color-mix(in srgb, var(--cratis-text-color) 5%, transparent);
 }
-.cratis-field-input::placeholder { color: var(--cratis-text-color-secondary); }
-.cratis-field-input:focus-visible { outline: none; border-color: var(--cratis-primary-color); box-shadow: var(--cratis-focus-ring); }
-.cratis-field-input[data-invalid='true'], .cratis-field-input[aria-invalid='true'] { border-color: var(--cratis-red-500); }
-.cratis-field-textarea { resize: vertical; }
-.cratis-number-field, .cratis-password-field { position: relative; display: flex; }
-.cratis-password-field .cratis-field-input { padding-inline-end: 2.75rem; }
+.cratis-field-input::placeholder {
+    color: var(--cratis-text-color-secondary);
+}
+.cratis-field-input:focus-visible {
+    outline: none;
+    border-color: var(--cratis-primary-color);
+    box-shadow: var(--cratis-focus-ring);
+}
+.cratis-field-input[data-invalid='true'],
+.cratis-field-input[aria-invalid='true'] {
+    border-color: var(--cratis-red-500);
+}
+.cratis-field-textarea {
+    resize: vertical;
+}
+.cratis-number-field,
+.cratis-password-field {
+    position: relative;
+    display: flex;
+}
+.cratis-password-field .cratis-field-input {
+    padding-inline-end: 2.75rem;
+}
 .cratis-password-field__toggle {
     position: absolute;
     inset-inline-end: 0.35rem;
@@ -34,11 +51,28 @@
     color: var(--cratis-text-color-secondary);
     cursor: pointer;
 }
-.cratis-password-field__toggle:hover { background: var(--cratis-surface-hover); }
-.cratis-password-field__toggle:focus-visible { outline: none; box-shadow: var(--cratis-focus-ring); }
+.cratis-password-field__toggle:hover {
+    background: var(--cratis-surface-hover);
+}
+.cratis-password-field__toggle:focus-visible {
+    outline: none;
+    box-shadow: var(--cratis-focus-ring);
+}
 
-.cratis-choice-field { position: relative; display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; }
-.cratis-choice-field__native { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
+.cratis-choice-field {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    cursor: pointer;
+}
+.cratis-choice-field__native {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    opacity: 0;
+}
 .cratis-checkbox__box {
     display: inline-flex;
     width: 1.25rem;
@@ -49,11 +83,26 @@
     border-radius: calc(var(--cratis-border-radius) * 0.65);
     background: var(--cratis-surface-card);
 }
-.cratis-checkbox__indicator { opacity: 0; color: var(--cratis-primary-color-text); font-size: 0.85rem; }
-.cratis-choice-field__native:checked + .cratis-checkbox__box { border-color: var(--cratis-primary-color); background: var(--cratis-primary-color); }
-.cratis-choice-field__native:checked + .cratis-checkbox__box .cratis-checkbox__indicator { opacity: 1; }
-.cratis-choice-field__native:focus-visible + :is(.cratis-checkbox__box, .cratis-switch__control) { box-shadow: var(--cratis-focus-ring); }
-.cratis-choice-field[data-invalid='true'] :is(.cratis-checkbox__box, .cratis-switch__control) { border-color: var(--cratis-red-500); }
+.cratis-checkbox__indicator {
+    opacity: 0;
+    color: var(--cratis-primary-color-text);
+    font-size: 0.85rem;
+}
+.cratis-choice-field__native:checked + .cratis-checkbox__box {
+    border-color: var(--cratis-primary-color);
+    background: var(--cratis-primary-color);
+}
+.cratis-choice-field__native:checked + .cratis-checkbox__box .cratis-checkbox__indicator {
+    opacity: 1;
+}
+.cratis-choice-field__native:focus-visible
+    + :is(.cratis-checkbox__box, .cratis-switch__control) {
+    box-shadow: var(--cratis-focus-ring);
+}
+.cratis-choice-field[data-invalid='true']
+    :is(.cratis-checkbox__box, .cratis-switch__control) {
+    border-color: var(--cratis-red-500);
+}
 
 .cratis-switch__control {
     display: inline-flex;
@@ -66,9 +115,21 @@
     background: var(--cratis-surface-100);
     transition: background-color 140ms ease;
 }
-.cratis-switch__handle { width: 1rem; height: 1rem; border-radius: 50%; background: var(--cratis-surface-card); box-shadow: 0 1px 3px color-mix(in srgb, var(--cratis-text-color) 25%, transparent); transition: transform 140ms ease; }
-.cratis-choice-field__native:checked + .cratis-switch__control { border-color: var(--cratis-primary-color); background: var(--cratis-primary-color); }
-.cratis-choice-field__native:checked + .cratis-switch__control .cratis-switch__handle { transform: translateX(1.05rem); }
+.cratis-switch__handle {
+    width: 1rem;
+    height: 1rem;
+    border-radius: 50%;
+    background: var(--cratis-surface-card);
+    box-shadow: 0 1px 3px color-mix(in srgb, var(--cratis-text-color) 25%, transparent);
+    transition: transform 140ms ease;
+}
+.cratis-choice-field__native:checked + .cratis-switch__control {
+    border-color: var(--cratis-primary-color);
+    background: var(--cratis-primary-color);
+}
+.cratis-choice-field__native:checked + .cratis-switch__control .cratis-switch__handle {
+    transform: translateX(1.05rem);
+}
 
 .cratis-radio__box {
     display: inline-flex;
@@ -80,17 +141,52 @@
     border-radius: 50%;
     background: var(--cratis-surface-card);
 }
-.cratis-radio__indicator { width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--cratis-primary-color); opacity: 0; }
-.cratis-choice-field__native:checked + .cratis-radio__box { border-color: var(--cratis-primary-color); }
-.cratis-choice-field__native:checked + .cratis-radio__box .cratis-radio__indicator { opacity: 1; }
-.cratis-radio-group { display: flex; }
-.cratis-radio-group--vertical { flex-direction: column; gap: 0.5rem; }
-.cratis-radio-group--horizontal { flex-direction: row; flex-wrap: wrap; gap: 1rem; }
+.cratis-radio__indicator {
+    width: 0.65rem;
+    height: 0.65rem;
+    border-radius: 50%;
+    background: var(--cratis-primary-color);
+    opacity: 0;
+}
+.cratis-choice-field__native:checked + .cratis-radio__box {
+    border-color: var(--cratis-primary-color);
+}
+.cratis-choice-field__native:checked + .cratis-radio__box .cratis-radio__indicator {
+    opacity: 1;
+}
+.cratis-radio-group {
+    display: flex;
+}
+.cratis-radio-group--vertical {
+    flex-direction: column;
+    gap: 0.5rem;
+}
+.cratis-radio-group--horizontal {
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 1rem;
+}
 
-.cratis-slider-field { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.75rem; }
-.cratis-slider-field__input { width: 100%; accent-color: var(--cratis-primary-color); }
-.cratis-slider-field__input:focus-visible { outline: none; box-shadow: var(--cratis-focus-ring); }
-.cratis-slider-field__value { min-width: 2.5rem; text-align: end; font-weight: 600; font-variant-numeric: tabular-nums; }
+.cratis-slider-field {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    align-items: center;
+    gap: 0.75rem;
+}
+.cratis-slider-field__input {
+    width: 100%;
+    accent-color: var(--cratis-primary-color);
+}
+.cratis-slider-field__input:focus-visible {
+    outline: none;
+    box-shadow: var(--cratis-focus-ring);
+}
+.cratis-slider-field__value {
+    min-width: 2.5rem;
+    text-align: end;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+}
 
 .cratis-chips-field {
     display: flex;
@@ -103,29 +199,100 @@
     border-radius: var(--cratis-border-radius);
     background: var(--cratis-surface-card);
 }
-.cratis-chips-field:focus-within { border-color: var(--cratis-primary-color); box-shadow: var(--cratis-focus-ring); }
-.cratis-chips-field[data-invalid='true'] { border-color: var(--cratis-red-500); }
-.cratis-chips-field__item { display: inline-flex; padding: 0.3rem 0.45rem; align-items: center; gap: 0.3rem; border-radius: 999px; background: var(--cratis-surface-100); }
-.cratis-chips-field__remove { border: 0; background: transparent; color: inherit; cursor: pointer; }
-.cratis-chips-field__remove:focus-visible { outline: none; border-radius: 50%; box-shadow: var(--cratis-focus-ring); }
-.cratis-chips-field__input { min-width: 7rem; padding: 0.3rem; flex: 1; border: 0; outline: none; background: transparent; color: var(--cratis-text-color); font: inherit; }
+.cratis-chips-field:focus-within {
+    border-color: var(--cratis-primary-color);
+    box-shadow: var(--cratis-focus-ring);
+}
+.cratis-chips-field[data-invalid='true'] {
+    border-color: var(--cratis-red-500);
+}
+.cratis-chips-field__item {
+    display: inline-flex;
+    padding: 0.3rem 0.45rem;
+    align-items: center;
+    gap: 0.3rem;
+    border-radius: 999px;
+    background: var(--cratis-surface-100);
+}
+.cratis-chips-field__remove {
+    border: 0;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+}
+.cratis-chips-field__remove:focus-visible {
+    outline: none;
+    border-radius: 50%;
+    box-shadow: var(--cratis-focus-ring);
+}
+.cratis-chips-field__input {
+    min-width: 7rem;
+    padding: 0.3rem;
+    flex: 1;
+    border: 0;
+    outline: none;
+    background: transparent;
+    color: var(--cratis-text-color);
+    font: inherit;
+}
 
-.cratis-color-field { display: inline-flex; align-items: center; gap: 0.6rem; }
-.cratis-color-field__input { width: 3rem; height: 2.5rem; padding: 0.2rem; border: 1px solid var(--cratis-surface-border); border-radius: var(--cratis-border-radius); background: var(--cratis-surface-card); }
-.cratis-color-field__input:focus-visible { outline: none; box-shadow: var(--cratis-focus-ring); }
-.cratis-color-field__value { font-family: ui-monospace, monospace; }
+.cratis-color-field {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.6rem;
+}
+.cratis-color-field__input {
+    width: 3rem;
+    height: 2.5rem;
+    padding: 0.2rem;
+    border: 1px solid var(--cratis-surface-border);
+    border-radius: var(--cratis-border-radius);
+    background: var(--cratis-surface-card);
+}
+.cratis-color-field__input:focus-visible {
+    outline: none;
+    box-shadow: var(--cratis-focus-ring);
+}
+.cratis-color-field__value {
+    font-family: ui-monospace, monospace;
+}
 
-.cratis-rating-field { display: inline-flex; align-items: center; }
-.cratis-rating-field__option { position: relative; cursor: pointer; }
-.cratis-rating-field__star { color: var(--cratis-surface-border); font-size: 1.4rem; line-height: 1; }
-.cratis-rating-field__star[data-selected='true'] { color: var(--cratis-orange-500); }
-.cratis-rating-field__option:focus-within .cratis-rating-field__star { border-radius: 0.2rem; box-shadow: var(--cratis-focus-ring); }
+.cratis-rating-field {
+    display: inline-flex;
+    align-items: center;
+}
+.cratis-rating-field__option {
+    position: relative;
+    cursor: pointer;
+}
+.cratis-rating-field__star {
+    color: var(--cratis-surface-border);
+    font-size: 1.4rem;
+    line-height: 1;
+}
+.cratis-rating-field__star[data-selected='true'] {
+    color: var(--cratis-orange-500);
+}
+.cratis-rating-field__option:focus-within .cratis-rating-field__star {
+    border-radius: 0.2rem;
+    box-shadow: var(--cratis-focus-ring);
+}
 
 @media (prefers-reduced-motion: reduce) {
-    .cratis-switch__control, .cratis-switch__handle { transition: none; }
+    .cratis-switch__control,
+    .cratis-switch__handle {
+        transition: none;
+    }
 }
 
 @media (forced-colors: active) {
-    .cratis-field-input, .cratis-checkbox__box, .cratis-switch__control { border-color: CanvasText; }
-    .cratis-choice-field__native:checked + :is(.cratis-checkbox__box, .cratis-switch__control) { background: Highlight; }
+    .cratis-field-input,
+    .cratis-checkbox__box,
+    .cratis-switch__control {
+        border-color: CanvasText;
+    }
+    .cratis-choice-field__native:checked
+        + :is(.cratis-checkbox__box, .cratis-switch__control) {
+        background: Highlight;
+    }
 }
diff --git a/Source/CommandForm/fields/InputTextField.tsx b/Source/CommandForm/fields/InputTextField.tsx
index aa2836f9..62fe0daf 100644
--- a/Source/CommandForm/fields/InputTextField.tsx
+++ b/Source/CommandForm/fields/InputTextField.tsx
@@ -4,10 +4,22 @@
 import type { InputHTMLAttributes } from 'react';
 import { asCommandFormField, type WrappedFieldProps } from '@cratis/arc.react/commands';
 
-interface InputTextParts { root?: InputHTMLAttributes<HTMLInputElement>; }
+interface InputTextParts {
+    root?: InputHTMLAttributes<HTMLInputElement>;
+}
 
 interface InputTextComponentProps extends WrappedFieldProps<string> {
-    type?: 'text' | 'email' | 'password' | 'color' | 'date' | 'datetime-local' | 'time' | 'url' | 'tel' | 'search';
+    type?:
+        | 'text'
+        | 'email'
+        | 'password'
+        | 'color'
+        | 'date'
+        | 'datetime-local'
+        | 'time'
+        | 'url'
+        | 'tel'
+        | 'search';
     placeholder?: string;
     className?: string;
     pt?: InputTextParts;
@@ -28,7 +40,14 @@ export const InputTextField = asCommandFormField<InputTextComponentProps>(
             aria-invalid={props.invalid || undefined}
             data-invalid={props.invalid || undefined}
             data-cratis-part='input'
-            className={['cratis-field-input', 'w-full', props.pt?.root?.className, props.className].filter(Boolean).join(' ')}
+            className={[
+                'cratis-field-input',
+                'w-full',
+                props.pt?.root?.className,
+                props.className,
+            ]
+                .filter(Boolean)
+                .join(' ')}
         />
     ),
     {
diff --git a/Source/CommandForm/fields/NumberField.tsx b/Source/CommandForm/fields/NumberField.tsx
index a663b5e4..85f785e3 100644
--- a/Source/CommandForm/fields/NumberField.tsx
+++ b/Source/CommandForm/fields/NumberField.tsx
@@ -27,7 +27,14 @@ export const NumberField = asCommandFormField<NumberFieldComponentProps>(
             {...props.pt?.root}
             onBlur={props.onBlur}
             data-cratis-part='root'
-            className={['cratis-number-field', 'w-full', props.pt?.root?.className, props.className].filter(Boolean).join(' ')}
+            className={[
+                'cratis-number-field',
+                'w-full',
+                props.pt?.root?.className,
+                props.className,
+            ]
+                .filter(Boolean)
+                .join(' ')}
         >
             <input
                 {...props.pt?.input}
@@ -41,7 +48,9 @@ export const NumberField = asCommandFormField<NumberFieldComponentProps>(
                 aria-invalid={props.invalid || undefined}
                 data-invalid={props.invalid || undefined}
                 data-cratis-part='input'
-                className={['cratis-field-input', 'w-full', props.pt?.input?.className].filter(Boolean).join(' ')}
+                className={['cratis-field-input', 'w-full', props.pt?.input?.className]
+                    .filter(Boolean)
+                    .join(' ')}
             />
         </div>
     ),
diff --git a/Source/CommandForm/fields/PasswordField.tsx b/Source/CommandForm/fields/PasswordField.tsx
index 0b6f41d1..457e08f9 100644
--- a/Source/CommandForm/fields/PasswordField.tsx
+++ b/Source/CommandForm/fields/PasswordField.tsx
@@ -1,7 +1,12 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { useState, type ButtonHTMLAttributes, type HTMLAttributes, type InputHTMLAttributes } from 'react';
+import {
+    useState,
+    type ButtonHTMLAttributes,
+    type HTMLAttributes,
+    type InputHTMLAttributes,
+} from 'react';
 import { asCommandFormField, type WrappedFieldProps } from '@cratis/arc.react/commands';
 
 interface PasswordParts {
@@ -26,7 +31,14 @@ const PasswordControl = (props: PasswordFieldComponentProps) => {
         <div
             {...props.pt?.root}
             onBlur={props.onBlur}
-            className={['cratis-password-field', 'w-full', props.pt?.root?.className, props.className].filter(Boolean).join(' ')}
+            className={[
+                'cratis-password-field',
+                'w-full',
+                props.pt?.root?.className,
+                props.className,
+            ]
+                .filter(Boolean)
+                .join(' ')}
             data-cratis-part='root'
         >
             <input
@@ -37,16 +49,24 @@ const PasswordControl = (props: PasswordFieldComponentProps) => {
                 placeholder={props.placeholder}
                 aria-invalid={props.invalid || undefined}
                 data-invalid={props.invalid || undefined}
-                className={['cratis-field-input', 'w-full', props.pt?.input?.className].filter(Boolean).join(' ')}
+                className={['cratis-field-input', 'w-full', props.pt?.input?.className]
+                    .filter(Boolean)
+                    .join(' ')}
                 data-cratis-part='input'
             />
             <button
                 {...props.pt?.toggle}
                 type='button'
-                className={['cratis-password-field__toggle', props.pt?.toggle?.className].filter(Boolean).join(' ')}
+                className={['cratis-password-field__toggle', props.pt?.toggle?.className]
+                    .filter(Boolean)
+                    .join(' ')}
                 data-cratis-part='toggle'
-                aria-label={visible ? props.hideLabel ?? 'Hide password' : props.showLabel ?? 'Show password'}
-                onClick={() => setVisible(current => !current)}
+                aria-label={
+                    visible
+                        ? (props.hideLabel ?? 'Hide password')
+                        : (props.showLabel ?? 'Show password')
+                }
+                onClick={() => setVisible((current) => !current)}
             >
                 <span aria-hidden='true'>{visible ? '◉' : '○'}</span>
             </button>
diff --git a/Source/CommandForm/fields/RadioButtonField.tsx b/Source/CommandForm/fields/RadioButtonField.tsx
index b18b6ee9..682d676c 100644
--- a/Source/CommandForm/fields/RadioButtonField.tsx
+++ b/Source/CommandForm/fields/RadioButtonField.tsx
@@ -25,7 +25,9 @@ export const RadioButtonField = asCommandFormField<RadioButtonFieldComponentProp
     (props) => (
         <label
             {...props.pt?.root}
-            className={['cratis-choice-field', props.pt?.root?.className, props.className].filter(Boolean).join(' ')}
+            className={['cratis-choice-field', props.pt?.root?.className, props.className]
+                .filter(Boolean)
+                .join(' ')}
             onBlur={props.onBlur}
             data-cratis-part='root'
             data-invalid={props.invalid || undefined}
@@ -34,26 +36,34 @@ export const RadioButtonField = asCommandFormField<RadioButtonFieldComponentProp
                 {...props.pt?.input}
                 type='radio'
                 checked={props.value === props.buttonValue}
-                onChange={event => {
+                onChange={(event) => {
                     if (event.target.checked) props.onChange(props.buttonValue);
                 }}
                 aria-invalid={props.invalid || undefined}
-                className={['cratis-choice-field__native', props.pt?.input?.className].filter(Boolean).join(' ')}
+                className={['cratis-choice-field__native', props.pt?.input?.className]
+                    .filter(Boolean)
+                    .join(' ')}
                 data-cratis-part='input'
             />
             <span
                 {...props.pt?.box}
-                className={['cratis-radio__box', props.pt?.box?.className].filter(Boolean).join(' ')}
+                className={['cratis-radio__box', props.pt?.box?.className]
+                    .filter(Boolean)
+                    .join(' ')}
                 data-cratis-part='box'
                 aria-hidden='true'
             >
                 <span
                     {...props.pt?.indicator}
-                    className={['cratis-radio__indicator', props.pt?.indicator?.className].filter(Boolean).join(' ')}
+                    className={['cratis-radio__indicator', props.pt?.indicator?.className]
+                        .filter(Boolean)
+                        .join(' ')}
                     data-cratis-part='indicator'
                 />
             </span>
-            {props.label && <span className='cratis-choice-field__label'>{props.label}</span>}
+            {props.label && (
+                <span className='cratis-choice-field__label'>{props.label}</span>
+            )}
         </label>
     ),
     { defaultValue: '', extractValue: (value: unknown) => value as string | number },
diff --git a/Source/CommandForm/fields/RadioGroupField.tsx b/Source/CommandForm/fields/RadioGroupField.tsx
index 60ca6fb5..83ea2ffd 100644
--- a/Source/CommandForm/fields/RadioGroupField.tsx
+++ b/Source/CommandForm/fields/RadioGroupField.tsx
@@ -34,17 +34,21 @@ export const RadioGroupField = asCommandFormField<RadioGroupFieldComponentProps>
                 `cratis-radio-group--${props.layout ?? 'vertical'}`,
                 props.pt?.root?.className,
                 props.className,
-            ].filter(Boolean).join(' ')}
+            ]
+                .filter(Boolean)
+                .join(' ')}
             data-cratis-part='root'
         >
-            {props.options.map(option => {
+            {props.options.map((option) => {
                 const value = option[props.optionValue] as string | number;
                 const label = String(option[props.optionLabel] ?? value);
                 return (
                     <label
                         {...props.pt?.option}
                         key={String(value)}
-                        className={['cratis-choice-field', props.pt?.option?.className].filter(Boolean).join(' ')}
+                        className={['cratis-choice-field', props.pt?.option?.className]
+                            .filter(Boolean)
+                            .join(' ')}
                         onBlur={props.onBlur}
                         data-cratis-part='option'
                     >
@@ -52,22 +56,34 @@ export const RadioGroupField = asCommandFormField<RadioGroupFieldComponentProps>
                             {...props.pt?.input}
                             type='radio'
                             checked={props.value === value}
-                            onChange={event => {
+                            onChange={(event) => {
                                 if (event.target.checked) props.onChange(value);
                             }}
                             aria-invalid={props.invalid || undefined}
-                            className={['cratis-choice-field__native', props.pt?.input?.className].filter(Boolean).join(' ')}
+                            className={[
+                                'cratis-choice-field__native',
+                                props.pt?.input?.className,
+                            ]
+                                .filter(Boolean)
+                                .join(' ')}
                             data-cratis-part='input'
                         />
                         <span
                             {...props.pt?.box}
-                            className={['cratis-radio__box', props.pt?.box?.className].filter(Boolean).join(' ')}
+                            className={['cratis-radio__box', props.pt?.box?.className]
+                                .filter(Boolean)
+                                .join(' ')}
                             data-cratis-part='box'
                             aria-hidden='true'
                         >
                             <span
                                 {...props.pt?.indicator}
-                                className={['cratis-radio__indicator', props.pt?.indicator?.className].filter(Boolean).join(' ')}
+                                className={[
+                                    'cratis-radio__indicator',
+                                    props.pt?.indicator?.className,
+                                ]
+                                    .filter(Boolean)
+                                    .join(' ')}
                                 data-cratis-part='indicator'
                             />
                         </span>
diff --git a/Source/CommandForm/fields/RatingField.tsx b/Source/CommandForm/fields/RatingField.tsx
index c885124e..e0e206e3 100644
--- a/Source/CommandForm/fields/RatingField.tsx
+++ b/Source/CommandForm/fields/RatingField.tsx
@@ -26,43 +26,68 @@ export const RatingField = asCommandFormField<RatingFieldComponentProps>(
         <div
             {...props.pt?.root}
             role='radiogroup'
-            className={['cratis-rating-field', props.pt?.root?.className, props.className].filter(Boolean).join(' ')}
+            className={['cratis-rating-field', props.pt?.root?.className, props.className]
+                .filter(Boolean)
+                .join(' ')}
             onBlur={props.onBlur}
             data-cratis-part='root'
             data-invalid={props.invalid || undefined}
         >
             {Array.from({ length: props.stars ?? 5 }, (_, index) => {
                 const starValue = index + 1;
-                const label = (props.starAriaLabel ?? ((value: number) => `${value} ${value === 1 ? 'star' : 'stars'}`))(starValue);
+                const label = (
+                    props.starAriaLabel ??
+                    ((value: number) => `${value} ${value === 1 ? 'star' : 'stars'}`)
+                )(starValue);
                 return (
                     <label
                         {...props.pt?.option}
                         key={starValue}
-                        className={['cratis-rating-field__option', props.pt?.option?.className].filter(Boolean).join(' ')}
+                        className={[
+                            'cratis-rating-field__option',
+                            props.pt?.option?.className,
+                        ]
+                            .filter(Boolean)
+                            .join(' ')}
                         data-cratis-part='option'
                     >
                         <input
                             {...props.pt?.input}
                             type='radio'
                             checked={props.value === starValue}
-                            onChange={event => {
+                            onChange={(event) => {
                                 if (event.target.checked) props.onChange(starValue);
                             }}
                             aria-label={label}
-                            className={['cratis-choice-field__native', props.pt?.input?.className].filter(Boolean).join(' ')}
+                            className={[
+                                'cratis-choice-field__native',
+                                props.pt?.input?.className,
+                            ]
+                                .filter(Boolean)
+                                .join(' ')}
                             data-cratis-part='input'
                         />
                         <span
                             {...props.pt?.star}
-                            className={['cratis-rating-field__star', props.pt?.star?.className].filter(Boolean).join(' ')}
+                            className={[
+                                'cratis-rating-field__star',
+                                props.pt?.star?.className,
+                            ]
+                                .filter(Boolean)
+                                .join(' ')}
                             data-cratis-part='star'
                             data-selected={starValue <= props.value || undefined}
                             aria-hidden='true'
-                        >★</span>
+                        >
+                            ★
+                        </span>
                     </label>
                 );
             })}
         </div>
     ),
-    { defaultValue: 0, extractValue: (value: unknown) => typeof value === 'number' ? value : 0 },
+    {
+        defaultValue: 0,
+        extractValue: (value: unknown) => (typeof value === 'number' ? value : 0),
+    },
 );
diff --git a/Source/CommandForm/fields/SliderField.tsx b/Source/CommandForm/fields/SliderField.tsx
index f36df6e3..0c38d409 100644
--- a/Source/CommandForm/fields/SliderField.tsx
+++ b/Source/CommandForm/fields/SliderField.tsx
@@ -25,7 +25,14 @@ export const SliderField = asCommandFormField<SliderFieldComponentProps>(
     (props) => (
         <div
             {...props.pt?.root}
-            className={['cratis-slider-field', 'w-full', props.pt?.root?.className, props.className].filter(Boolean).join(' ')}
+            className={[
+                'cratis-slider-field',
+                'w-full',
+                props.pt?.root?.className,
+                props.className,
+            ]
+                .filter(Boolean)
+                .join(' ')}
             onBlur={props.onBlur}
             data-cratis-part='root'
         >
@@ -38,12 +45,16 @@ export const SliderField = asCommandFormField<SliderFieldComponentProps>(
                 max={props.max ?? 100}
                 step={props.step ?? 1}
                 aria-invalid={props.invalid || undefined}
-                className={['cratis-slider-field__input', props.pt?.input?.className].filter(Boolean).join(' ')}
+                className={['cratis-slider-field__input', props.pt?.input?.className]
+                    .filter(Boolean)
+                    .join(' ')}
                 data-cratis-part='input'
             />
             <span
                 {...props.pt?.value}
-                className={['cratis-slider-field__value', props.pt?.value?.className].filter(Boolean).join(' ')}
+                className={['cratis-slider-field__value', props.pt?.value?.className]
+                    .filter(Boolean)
+                    .join(' ')}
                 data-cratis-part='value'
             >
                 {props.value}
@@ -52,6 +63,7 @@ export const SliderField = asCommandFormField<SliderFieldComponentProps>(
     ),
     {
         defaultValue: 0,
-        extractValue: (event: React.ChangeEvent<HTMLInputElement>) => event.target.valueAsNumber,
+        extractValue: (event: React.ChangeEvent<HTMLInputElement>) =>
+            event.target.valueAsNumber,
     },
 );
diff --git a/Source/CommandForm/fields/TextAreaField.tsx b/Source/CommandForm/fields/TextAreaField.tsx
index cc65fd54..aaae9c27 100644
--- a/Source/CommandForm/fields/TextAreaField.tsx
+++ b/Source/CommandForm/fields/TextAreaField.tsx
@@ -4,7 +4,9 @@
 import type { TextareaHTMLAttributes } from 'react';
 import { asCommandFormField, type WrappedFieldProps } from '@cratis/arc.react/commands';
 
-interface TextAreaParts { root?: TextareaHTMLAttributes<HTMLTextAreaElement>; }
+interface TextAreaParts {
+    root?: TextareaHTMLAttributes<HTMLTextAreaElement>;
+}
 
 interface TextAreaFieldComponentProps extends WrappedFieldProps<string> {
     placeholder?: string;
@@ -30,11 +32,20 @@ export const TextAreaField = asCommandFormField<TextAreaFieldComponentProps>(
             aria-invalid={props.invalid || undefined}
             data-invalid={props.invalid || undefined}
             data-cratis-part='textarea'
-            className={['cratis-field-input', 'cratis-field-textarea', 'w-full', props.pt?.root?.className, props.className].filter(Boolean).join(' ')}
+            className={[
+                'cratis-field-input',
+                'cratis-field-textarea',
+                'w-full',
+                props.pt?.root?.className,
+                props.className,
+            ]
+                .filter(Boolean)
+                .join(' ')}
         />
     ),
     {
         defaultValue: '',
-        extractValue: (event: React.ChangeEvent<HTMLTextAreaElement>) => event.target.value,
+        extractValue: (event: React.ChangeEvent<HTMLTextAreaElement>) =>
+            event.target.value,
     },
 );
diff --git a/Source/CommandForm/fields/ToggleSwitchField.tsx b/Source/CommandForm/fields/ToggleSwitchField.tsx
index c32e841e..47388056 100644
--- a/Source/CommandForm/fields/ToggleSwitchField.tsx
+++ b/Source/CommandForm/fields/ToggleSwitchField.tsx
@@ -24,7 +24,9 @@ export const ToggleSwitchField = asCommandFormField<ToggleSwitchFieldComponentPr
     (props) => (
         <label
             {...props.pt?.root}
-            className={['cratis-choice-field', props.pt?.root?.className, props.className].filter(Boolean).join(' ')}
+            className={['cratis-choice-field', props.pt?.root?.className, props.className]
+                .filter(Boolean)
+                .join(' ')}
             onBlur={props.onBlur}
             data-cratis-part='root'
             data-invalid={props.invalid || undefined}
@@ -36,26 +38,35 @@ export const ToggleSwitchField = asCommandFormField<ToggleSwitchFieldComponentPr
                 checked={props.value}
                 onChange={props.onChange}
                 aria-invalid={props.invalid || undefined}
-                className={['cratis-choice-field__native', props.pt?.input?.className].filter(Boolean).join(' ')}
+                className={['cratis-choice-field__native', props.pt?.input?.className]
+                    .filter(Boolean)
+                    .join(' ')}
                 data-cratis-part='input'
             />
             <span
                 {...props.pt?.control}
-                className={['cratis-switch__control', props.pt?.control?.className].filter(Boolean).join(' ')}
+                className={['cratis-switch__control', props.pt?.control?.className]
+                    .filter(Boolean)
+                    .join(' ')}
                 data-cratis-part='control'
                 aria-hidden='true'
             >
                 <span
                     {...props.pt?.handle}
-                    className={['cratis-switch__handle', props.pt?.handle?.className].filter(Boolean).join(' ')}
+                    className={['cratis-switch__handle', props.pt?.handle?.className]
+                        .filter(Boolean)
+                        .join(' ')}
                     data-cratis-part='handle'
                 />
             </span>
-            {props.label && <span className='cratis-choice-field__label'>{props.label}</span>}
+            {props.label && (
+                <span className='cratis-choice-field__label'>{props.label}</span>
+            )}
         </label>
     ),
     {
         defaultValue: false,
-        extractValue: (event: React.ChangeEvent<HTMLInputElement>) => event.target.checked,
+        extractValue: (event: React.ChangeEvent<HTMLInputElement>) =>
+            event.target.checked,
     },
 );
diff --git a/Source/Common/ActionMenubar.tsx b/Source/Common/ActionMenubar.tsx
index cdcc25fa..c41a26c7 100644
--- a/Source/Common/ActionMenubar.tsx
+++ b/Source/Common/ActionMenubar.tsx
@@ -47,7 +47,8 @@ export const ActionMenubar = ({ model, className, pt, ...rest }: ActionMenubarPr
         {...rest}
     >
         {model.map((item, index) => {
-            if (item.template) return <Fragment key={index}>{item.template(item)}</Fragment>;
+            if (item.template)
+                return <Fragment key={index}>{item.template(item)}</Fragment>;
 
             return (
                 <Button
diff --git a/Source/Common/Button.css b/Source/Common/Button.css
index 0614bdfd..d0a56148 100644
--- a/Source/Common/Button.css
+++ b/Source/Common/Button.css
@@ -16,33 +16,102 @@
     font-weight: 600;
     line-height: 1;
     cursor: pointer;
-    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, opacity 140ms ease;
-}
-.cratis-button:hover:not(:disabled) { filter: brightness(0.94); }
-.cratis-button:focus-visible { outline: none; box-shadow: var(--cratis-focus-ring); }
-.cratis-button:disabled { cursor: not-allowed; opacity: 0.55; }
-.cratis-button[data-size='small'] { min-height: 1.9rem; padding: 0.35rem 0.6rem; font-size: 0.8rem; }
-.cratis-button[data-size='large'] { min-height: 2.75rem; padding: 0.7rem 1rem; font-size: 1rem; }
-.cratis-button[data-rounded='true'], .cratis-button[data-icon-only='true'] { border-radius: 999px; }
-.cratis-button[data-icon-only='true'] { width: 2.25rem; padding: 0; }
-.cratis-button[data-size='small'][data-icon-only='true'] { width: 1.9rem; }
-.cratis-button[data-size='large'][data-icon-only='true'] { width: 2.75rem; }
+    transition:
+        background-color 140ms ease,
+        border-color 140ms ease,
+        color 140ms ease,
+        opacity 140ms ease;
+}
+.cratis-button:hover:not(:disabled) {
+    filter: brightness(0.94);
+}
+.cratis-button:focus-visible {
+    outline: none;
+    box-shadow: var(--cratis-focus-ring);
+}
+.cratis-button:disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+}
+.cratis-button[data-size='small'] {
+    min-height: 1.9rem;
+    padding: 0.35rem 0.6rem;
+    font-size: 0.8rem;
+}
+.cratis-button[data-size='large'] {
+    min-height: 2.75rem;
+    padding: 0.7rem 1rem;
+    font-size: 1rem;
+}
+.cratis-button[data-rounded='true'],
+.cratis-button[data-icon-only='true'] {
+    border-radius: 999px;
+}
+.cratis-button[data-icon-only='true'] {
+    width: 2.25rem;
+    padding: 0;
+}
+.cratis-button[data-size='small'][data-icon-only='true'] {
+    width: 1.9rem;
+}
+.cratis-button[data-size='large'][data-icon-only='true'] {
+    width: 2.75rem;
+}
 
-.cratis-button[data-variant='outlined'] { border-color: currentColor; background: transparent; color: var(--cratis-primary-color); }
-.cratis-button[data-variant='text'] { background: transparent; color: var(--cratis-text-color); }
-.cratis-button[data-variant='link'] { min-height: auto; padding: 0; background: transparent; color: var(--cratis-primary-color); text-decoration: underline; }
+.cratis-button[data-variant='outlined'] {
+    border-color: currentColor;
+    background: transparent;
+    color: var(--cratis-primary-color);
+}
+.cratis-button[data-variant='text'] {
+    background: transparent;
+    color: var(--cratis-text-color);
+}
+.cratis-button[data-variant='link'] {
+    min-height: auto;
+    padding: 0;
+    background: transparent;
+    color: var(--cratis-primary-color);
+    text-decoration: underline;
+}
 
-.cratis-button[data-severity='secondary'] { --cratis-button-tone: var(--cratis-text-color); }
-.cratis-button[data-severity='info'] { --cratis-button-tone: var(--cratis-primary-color); }
-.cratis-button[data-severity='success'] { --cratis-button-tone: var(--cratis-green-500); }
-.cratis-button[data-severity='warn'] { --cratis-button-tone: var(--cratis-orange-500); }
-.cratis-button[data-severity='danger'] { --cratis-button-tone: var(--cratis-red-500); }
-.cratis-button[data-severity='help'] { --cratis-button-tone: var(--cratis-primary-400); }
-.cratis-button[data-severity='contrast'] { --cratis-button-tone: var(--cratis-text-color); }
-.cratis-button:not([data-severity='info'])[data-variant='filled'] { background: var(--cratis-button-tone); }
-.cratis-button:not([data-severity='info']):is([data-variant='outlined'], [data-variant='text'], [data-variant='link']) { color: var(--cratis-button-tone); }
+.cratis-button[data-severity='secondary'] {
+    --cratis-button-tone: var(--cratis-text-color);
+}
+.cratis-button[data-severity='info'] {
+    --cratis-button-tone: var(--cratis-primary-color);
+}
+.cratis-button[data-severity='success'] {
+    --cratis-button-tone: var(--cratis-green-500);
+}
+.cratis-button[data-severity='warn'] {
+    --cratis-button-tone: var(--cratis-orange-500);
+}
+.cratis-button[data-severity='danger'] {
+    --cratis-button-tone: var(--cratis-red-500);
+}
+.cratis-button[data-severity='help'] {
+    --cratis-button-tone: var(--cratis-primary-400);
+}
+.cratis-button[data-severity='contrast'] {
+    --cratis-button-tone: var(--cratis-text-color);
+}
+.cratis-button:not([data-severity='info'])[data-variant='filled'] {
+    background: var(--cratis-button-tone);
+}
+.cratis-button:not([data-severity='info']):is(
+        [data-variant='outlined'],
+        [data-variant='text'],
+        [data-variant='link']
+    ) {
+    color: var(--cratis-button-tone);
+}
 
-.cratis-button__icon, .cratis-button__spinner { display: inline-flex; flex: 0 0 auto; }
+.cratis-button__icon,
+.cratis-button__spinner {
+    display: inline-flex;
+    flex: 0 0 auto;
+}
 .cratis-button__spinner {
     width: 1em;
     height: 1em;
@@ -52,13 +121,27 @@
     animation: cratis-button-spin 700ms linear infinite;
 }
 
-@keyframes cratis-button-spin { to { transform: rotate(360deg); } }
+@keyframes cratis-button-spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
 
 @media (prefers-reduced-motion: reduce) {
-    .cratis-button, .cratis-button__spinner { transition: none; animation: none; }
+    .cratis-button,
+    .cratis-button__spinner {
+        transition: none;
+        animation: none;
+    }
 }
 
 @media (forced-colors: active) {
-    .cratis-button { border-color: ButtonText; }
-    .cratis-button:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; box-shadow: none; }
+    .cratis-button {
+        border-color: ButtonText;
+    }
+    .cratis-button:focus-visible {
+        outline: 2px solid Highlight;
+        outline-offset: 2px;
+        box-shadow: none;
+    }
 }
diff --git a/Source/Common/Button.tsx b/Source/Common/Button.tsx
index 73cbf714..33e37e4d 100644
--- a/Source/Common/Button.tsx
+++ b/Source/Common/Button.tsx
@@ -11,7 +11,8 @@ import type {
 import { Tooltip, type TooltipPosition } from './Tooltip';
 
 /** Severity tone of a {@link Button}. */
-export type ButtonSeverity = 'secondary' | 'info' | 'success' | 'warn' | 'help' | 'danger' | 'contrast';
+export type ButtonSeverity =
+    'secondary' | 'info' | 'success' | 'warn' | 'help' | 'danger' | 'contrast';
 
 /** Stable Cratis-owned parts for styling a {@link Button}. */
 export interface ButtonParts {
@@ -122,14 +123,18 @@ export const Button = ({
             {loading ? (
                 <span
                     {...pt?.spinner}
-                    className={['cratis-button__spinner', pt?.spinner?.className].filter(Boolean).join(' ')}
+                    className={['cratis-button__spinner', pt?.spinner?.className]
+                        .filter(Boolean)
+                        .join(' ')}
                     data-cratis-part='spinner'
                     aria-hidden='true'
                 />
             ) : icon ? (
                 <span
                     {...pt?.icon}
-                    className={['cratis-button__icon', pt?.icon?.className].filter(Boolean).join(' ')}
+                    className={['cratis-button__icon', pt?.icon?.className]
+                        .filter(Boolean)
+                        .join(' ')}
                     data-cratis-part='icon'
                     aria-hidden={pt?.icon?.['aria-hidden'] ?? true}
                 >
@@ -139,7 +144,9 @@ export const Button = ({
             {(label !== undefined || children) && (
                 <span
                     {...pt?.label}
-                    className={['cratis-button__label', pt?.label?.className].filter(Boolean).join(' ')}
+                    className={['cratis-button__label', pt?.label?.className]
+                        .filter(Boolean)
+                        .join(' ')}
                     data-cratis-part='label'
                 >
                     {label}
@@ -150,8 +157,14 @@ export const Button = ({
     );
 
     return tooltip ? (
-        <Tooltip content={tooltip} position={tooltipOptions?.position} className={tooltipOptions?.className}>
+        <Tooltip
+            content={tooltip}
+            position={tooltipOptions?.position}
+            className={tooltipOptions?.className}
+        >
             {button}
         </Tooltip>
-    ) : button;
+    ) : (
+        button
+    );
 };
diff --git a/Source/Common/CratisComponentsProvider.tsx b/Source/Common/CratisComponentsProvider.tsx
index 3043a484..7daadd0c 100644
--- a/Source/Common/CratisComponentsProvider.tsx
+++ b/Source/Common/CratisComponentsProvider.tsx
@@ -1,92 +1,178 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import React, { useMemo } from 'react';
-import { PrimeReactProvider } from '@primereact/core';
-import type { PrimeReactProps } from '@primereact/types/core';
+import { createContext, useContext, useMemo, type ReactNode } from 'react';
+import { I18nProvider } from 'react-aria-components/I18nProvider';
 import { merge } from 'ts-deepmerge';
 import { Toaster, type ToasterProps } from '../Notifications';
 
-/**
- * Configuration accepted by {@link CratisComponentsProvider}. Mirrors PrimeReact 11's
- * {@link PrimeReactProps} — the most commonly used members are `unstyled`, `pt`, `ptOptions`,
- * `ripple`, `inputVariant`, `zIndex`, `locale`, and `theme` (`{ preset, options }` for the
- * `@primeuix/themes` styled layer).
- */
-export type CratisComponentsConfig = Partial<PrimeReactProps>;
+export interface CratisPaginatorMessages {
+    navigation?: string;
+    first?: string;
+    previous?: string;
+    next?: string;
+    last?: string;
+}
 
-export interface CratisComponentsProviderProps {
-    /**
-     * Cratis-wide and PrimeReact pass-through configuration. Merged on top of the
-     * library's defaults and made available to every Cratis component below in the tree.
-     */
-    value?: CratisComponentsConfig;
+export interface CratisDatePickerMessages {
+    today?: string;
+    clear?: string;
+    openCalendar?: string;
+    previousMonth?: string;
+    nextMonth?: string;
+}
 
+export interface CratisComponentsMessages {
+    paginator?: CratisPaginatorMessages;
+    datePicker?: CratisDatePickerMessages;
+}
+
+interface LegacyLocaleMessages {
+    today?: string;
+    clear?: string;
+    aria?: {
+        navigation?: string;
+        firstPageLabel?: string;
+        prevPageLabel?: string;
+        nextPageLabel?: string;
+        lastPageLabel?: string;
+    };
+    [message: string]: unknown;
+}
+
+/** Renderer-independent application configuration for Components. */
+export interface CratisComponentsConfig {
+    /** BCP 47 locale used by React Aria for dates, numbers, and interaction announcements. */
+    locale?: string;
+    /** Cratis-owned labels not supplied by the platform's internationalization APIs. */
+    messages?: CratisComponentsMessages;
     /**
-     * When set, mounts a {@link Toaster} inside the provider so the imperative
-     * `toast(...)` works app-wide with no extra setup. Pass `true` for the
-     * defaults, or a {@link ToasterProps} object to position/configure it.
+     * Legacy locale map retained for source compatibility during the major migration.
+     * New code should use {@link messages}; React Aria supplies its own locale data.
      */
-    toaster?: boolean | ToasterProps;
+    locales?: Record<string, LegacyLocaleMessages>;
+    /** Legacy renderer options are accepted during migration but have no effect. */
+    [legacyRendererOption: string]: unknown;
+}
 
-    children: React.ReactNode;
+export interface CratisComponentsProviderProps {
+    value?: CratisComponentsConfig;
+    toaster?: boolean | ToasterProps;
+    children: ReactNode;
 }
 
-/**
- * Default configuration applied to every consumer. Intentionally empty today —
- * reserved for Cratis-wide opinions we may want to ship in the future (for example,
- * a default pt preset that complements the --cratis-* token layer). Anything added
- * here is deep-merged with the consumer's `value` so consumer settings always win.
- *
- * Exported so specs can verify the merge contract without re-rendering React.
- */
-export const cratisDefaults: CratisComponentsConfig = {};
+export const cratisDefaults: CratisComponentsConfig = {
+    locale: 'en-US',
+    messages: {
+        paginator: {
+            navigation: 'Pagination',
+            first: 'First page',
+            previous: 'Previous page',
+            next: 'Next page',
+            last: 'Last page',
+        },
+        datePicker: {
+            today: 'Today',
+            clear: 'Clear',
+            openCalendar: 'Open calendar',
+            previousMonth: 'Previous month',
+            nextMonth: 'Next month',
+        },
+    },
+};
+
+export const mergeCratisComponentsConfig = (
+    value: CratisComponentsConfig | undefined,
+): CratisComponentsConfig => merge(cratisDefaults, value ?? {}) as CratisComponentsConfig;
+
+const CratisComponentsContext = createContext<CratisComponentsConfig>(cratisDefaults);
 
-/**
- * Pure merge of {@link cratisDefaults} and consumer-supplied config. Exposed for
- * specs; the provider component uses the same logic inside its `useMemo`.
- */
-export const mergeCratisComponentsConfig = (value: CratisComponentsConfig | undefined): CratisComponentsConfig =>
-    merge(cratisDefaults, value ?? {}) as CratisComponentsConfig;
+/** Returns the resolved renderer-independent Components configuration. */
+export const useCratisComponentsConfig = (): CratisComponentsConfig =>
+    useContext(CratisComponentsContext);
 
-/**
- * Single setup point for Cratis Components. Wraps PrimeReact 11's
- * {@link PrimeReactProvider} so the library can layer Cratis-wide defaults on top of
- * PrimeReact's pass-through and unstyled mechanisms while still letting the consumer
- * take complete control. PrimeReact 11 is unstyled-first, so this library ships no
- * bundled theme — you choose the styling posture:
- *
- * Every option is passed through the single `value` prop (it is deep-merged onto
- * PrimeReact's provider config):
- *
- * - **Unstyled (default posture):** pass nothing, or `value={{ unstyled: true }}`, and
- *   style the structural markup yourself through the `--cratis-*` token layer, your own
- *   CSS, Tailwind, or `pt` definitions.
- * - **Styled:** spread `styledMode()` from `@cratis/components/styled` into `value` -
- *   PrimeReact's own component styles for every primitive plus a `@primeuix/themes`
- *   preset (the Cratis preset by default, `styledMode({ preset: Aura })` for another).
- *   A preset on `theme` alone only emits design tokens; the primitives render without
- *   `p-*` classes until `defaults` gives them their styles, which is what `styledMode()` does.
- * - Pass `value={{ pt, ptOptions }}` to apply global per-component pass-through.
- *
- * **PrimeUI license.** PrimeReact 11 is no longer MIT — its provider verifies a PrimeUI
- * license on mount and, without one, logs a warning and shows an "Invalid PrimeUI License"
- * banner (in development *and* production). Supply your key via `value={{ license: '…' }}`
- * (a free Community tier covers individuals, non-profits, non-commercial OSS, and small
- * orgs; otherwise a Commercial license is required — see primeui.store). The key flows
- * straight through to PrimeReact's provider.
- *
- * Consumers who want to talk to PrimeReact directly may still mount
- * {@link PrimeReactProvider} themselves — this component is an optional convenience,
- * not a requirement.
- */
-export const CratisComponentsProvider = ({ value, toaster, children }: CratisComponentsProviderProps) => {
-    const merged = useMemo<CratisComponentsConfig>(() => mergeCratisComponentsConfig(value), [value]);
+const withLegacyLocaleMessages = (
+    config: CratisComponentsConfig,
+    explicitMessages: CratisComponentsMessages | undefined,
+): CratisComponentsConfig => {
+    const legacy = config.locale ? config.locales?.[config.locale] : undefined;
+    if (!legacy) return config;
+    return {
+        ...config,
+        messages: {
+            ...config.messages,
+            paginator: {
+                navigation:
+                    explicitMessages?.paginator?.navigation ??
+                    legacy.aria?.navigation ??
+                    config.messages?.paginator?.navigation,
+                first:
+                    explicitMessages?.paginator?.first ??
+                    legacy.aria?.firstPageLabel ??
+                    config.messages?.paginator?.first,
+                previous:
+                    explicitMessages?.paginator?.previous ??
+                    legacy.aria?.prevPageLabel ??
+                    config.messages?.paginator?.previous,
+                next:
+                    explicitMessages?.paginator?.next ??
+                    legacy.aria?.nextPageLabel ??
+                    config.messages?.paginator?.next,
+                last:
+                    explicitMessages?.paginator?.last ??
+                    legacy.aria?.lastPageLabel ??
+                    config.messages?.paginator?.last,
+            },
+            datePicker: {
+                today:
+                    explicitMessages?.datePicker?.today ??
+                    legacy.today ??
+                    config.messages?.datePicker?.today,
+                clear:
+                    explicitMessages?.datePicker?.clear ??
+                    legacy.clear ??
+                    config.messages?.datePicker?.clear,
+                openCalendar:
+                    explicitMessages?.datePicker?.openCalendar ??
+                    config.messages?.datePicker?.openCalendar,
+                previousMonth:
+                    explicitMessages?.datePicker?.previousMonth ??
+                    config.messages?.datePicker?.previousMonth,
+                nextMonth:
+                    explicitMessages?.datePicker?.nextMonth ??
+                    config.messages?.datePicker?.nextMonth,
+            },
+        },
+    };
+};
+
+const validLocale = (locale: string | undefined) => {
+    if (!locale) return 'en-US';
+    try {
+        return new Intl.Locale(locale).toString();
+    } catch {
+        return 'en-US';
+    }
+};
+
+/** Application root for locale, labels, and the optional app-wide toaster. */
+export const CratisComponentsProvider = ({
+    value,
+    toaster,
+    children,
+}: CratisComponentsProviderProps) => {
+    const resolved = useMemo(
+        () =>
+            withLegacyLocaleMessages(mergeCratisComponentsConfig(value), value?.messages),
+        [value],
+    );
 
     return (
-        <PrimeReactProvider {...merged}>
-            {children}
-            {toaster && <Toaster {...(typeof toaster === 'object' ? toaster : {})} />}
-        </PrimeReactProvider>
+        <CratisComponentsContext.Provider value={resolved}>
+            <I18nProvider locale={validLocale(resolved.locale)}>
+                {children}
+                {toaster && <Toaster {...(typeof toaster === 'object' ? toaster : {})} />}
+            </I18nProvider>
+        </CratisComponentsContext.Provider>
     );
 };
diff --git a/Source/Common/DatePickerInput.css b/Source/Common/DatePickerInput.css
index 2d726660..7e5e7b6c 100644
--- a/Source/Common/DatePickerInput.css
+++ b/Source/Common/DatePickerInput.css
@@ -1,8 +1,14 @@
 /* Copyright (c) Cratis. All rights reserved. */
 /* Licensed under the MIT license. See LICENSE file in the project root for full license information. */
 
-.cratis-date-picker { display: inline-flex; width: 100%; color: var(--cratis-text-color); }
-.cratis-date-picker__picker { width: 100%; }
+.cratis-date-picker {
+    display: inline-flex;
+    width: 100%;
+    color: var(--cratis-text-color);
+}
+.cratis-date-picker__picker {
+    width: 100%;
+}
 .cratis-date-picker__group {
     display: flex;
     width: 100%;
@@ -13,14 +19,39 @@
     border-radius: var(--cratis-border-radius);
     background: var(--cratis-surface-card);
 }
-.cratis-date-picker__group[data-focus-within] { border-color: var(--cratis-primary-color); box-shadow: var(--cratis-focus-ring); }
-.cratis-date-picker[data-invalid='true'] .cratis-date-picker__group { border-color: var(--cratis-red-500); }
-.cratis-date-picker[data-disabled='true'] { opacity: 0.6; }
-.cratis-date-picker__input { display: flex; flex: 1; min-width: 0; padding: 0.45rem 0.7rem; }
-.cratis-date-picker__input:empty::before { content: attr(data-placeholder); color: var(--cratis-text-color-secondary); }
-.cratis-date-picker__segment { padding: 0 0.1rem; border-radius: 0.2rem; outline: none; font-variant-numeric: tabular-nums; }
-.cratis-date-picker__segment[data-placeholder] { color: var(--cratis-text-color-secondary); }
-.cratis-date-picker__segment[data-focused] { background: var(--cratis-highlight-bg); color: var(--cratis-highlight-text-color); }
+.cratis-date-picker__group[data-focus-within] {
+    border-color: var(--cratis-primary-color);
+    box-shadow: var(--cratis-focus-ring);
+}
+.cratis-date-picker[data-invalid='true'] .cratis-date-picker__group {
+    border-color: var(--cratis-red-500);
+}
+.cratis-date-picker[data-disabled='true'] {
+    opacity: 0.6;
+}
+.cratis-date-picker__input {
+    display: flex;
+    flex: 1;
+    min-width: 0;
+    padding: 0.45rem 0.7rem;
+}
+.cratis-date-picker__input:empty::before {
+    content: attr(data-placeholder);
+    color: var(--cratis-text-color-secondary);
+}
+.cratis-date-picker__segment {
+    padding: 0 0.1rem;
+    border-radius: 0.2rem;
+    outline: none;
+    font-variant-numeric: tabular-nums;
+}
+.cratis-date-picker__segment[data-placeholder] {
+    color: var(--cratis-text-color-secondary);
+}
+.cratis-date-picker__segment[data-focused] {
+    background: var(--cratis-highlight-bg);
+    color: var(--cratis-highlight-text-color);
+}
 .cratis-date-picker__trigger {
     align-self: stretch;
     min-width: 2.5rem;
@@ -30,8 +61,14 @@
     color: var(--cratis-text-color-secondary);
     cursor: pointer;
 }
-.cratis-date-picker__trigger:hover { background: var(--cratis-surface-hover); color: var(--cratis-text-color); }
-.cratis-date-picker__trigger:focus-visible { outline: none; box-shadow: inset var(--cratis-focus-ring); }
+.cratis-date-picker__trigger:hover {
+    background: var(--cratis-surface-hover);
+    color: var(--cratis-text-color);
+}
+.cratis-date-picker__trigger:focus-visible {
+    outline: none;
+    box-shadow: inset var(--cratis-focus-ring);
+}
 .cratis-date-picker__popover {
     z-index: 1200;
     overflow: auto;
@@ -39,12 +76,28 @@
     border-radius: var(--cratis-border-radius);
     background: var(--cratis-surface-overlay);
     color: var(--cratis-text-color);
-    box-shadow: 0 0.75rem 2rem color-mix(in srgb, var(--cratis-text-color) 18%, transparent);
+    box-shadow: 0 0.75rem 2rem
+        color-mix(in srgb, var(--cratis-text-color) 18%, transparent);
+}
+.cratis-date-picker__dialog {
+    padding: 0.75rem;
+    outline: none;
+}
+.cratis-date-picker__calendar {
+    width: max-content;
+}
+.cratis-date-picker__header {
+    display: grid;
+    grid-template-columns: 2rem 1fr 2rem;
+    align-items: center;
+    gap: 0.5rem;
+    margin-bottom: 0.5rem;
+}
+.cratis-date-picker__heading {
+    margin: 0;
+    text-align: center;
+    font-size: 0.95rem;
 }
-.cratis-date-picker__dialog { padding: 0.75rem; outline: none; }
-.cratis-date-picker__calendar { width: max-content; }
-.cratis-date-picker__header { display: grid; grid-template-columns: 2rem 1fr 2rem; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
-.cratis-date-picker__heading { margin: 0; text-align: center; font-size: 0.95rem; }
 .cratis-date-picker__nav,
 .cratis-date-picker__action {
     min-height: 2rem;
@@ -55,23 +108,69 @@
     cursor: pointer;
 }
 .cratis-date-picker__nav:hover,
-.cratis-date-picker__action:hover { background: var(--cratis-surface-hover); }
+.cratis-date-picker__action:hover {
+    background: var(--cratis-surface-hover);
+}
 .cratis-date-picker__nav:focus-visible,
-.cratis-date-picker__action:focus-visible { outline: none; box-shadow: var(--cratis-focus-ring); }
-.cratis-date-picker__grid { border-collapse: collapse; }
-.cratis-date-picker__grid th { width: 2.25rem; height: 2rem; color: var(--cratis-text-color-secondary); font-size: 0.75rem; font-weight: 500; }
-.cratis-date-picker__cell { display: flex; width: 2.25rem; height: 2.25rem; align-items: center; justify-content: center; border-radius: 50%; outline: none; cursor: default; }
-.cratis-date-picker__cell[data-hovered] { background: var(--cratis-surface-hover); }
-.cratis-date-picker__cell[data-selected] { background: var(--cratis-primary-color); color: var(--cratis-primary-color-text); }
-.cratis-date-picker__cell[data-focused] { box-shadow: var(--cratis-focus-ring); }
-.cratis-date-picker__cell[data-disabled], .cratis-date-picker__cell[data-outside-month] { opacity: 0.45; }
-.cratis-date-picker__button-bar { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--cratis-surface-border); }
-.cratis-date-picker__action { padding: 0.35rem 0.65rem; }
+.cratis-date-picker__action:focus-visible {
+    outline: none;
+    box-shadow: var(--cratis-focus-ring);
+}
+.cratis-date-picker__grid {
+    border-collapse: collapse;
+}
+.cratis-date-picker__grid th {
+    width: 2.25rem;
+    height: 2rem;
+    color: var(--cratis-text-color-secondary);
+    font-size: 0.75rem;
+    font-weight: 500;
+}
+.cratis-date-picker__cell {
+    display: flex;
+    width: 2.25rem;
+    height: 2.25rem;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    outline: none;
+    cursor: default;
+}
+.cratis-date-picker__cell[data-hovered] {
+    background: var(--cratis-surface-hover);
+}
+.cratis-date-picker__cell[data-selected] {
+    background: var(--cratis-primary-color);
+    color: var(--cratis-primary-color-text);
+}
+.cratis-date-picker__cell[data-focused] {
+    box-shadow: var(--cratis-focus-ring);
+}
+.cratis-date-picker__cell[data-disabled],
+.cratis-date-picker__cell[data-outside-month] {
+    opacity: 0.45;
+}
+.cratis-date-picker__button-bar {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+    margin-top: 0.6rem;
+    padding-top: 0.6rem;
+    border-top: 1px solid var(--cratis-surface-border);
+}
+.cratis-date-picker__action {
+    padding: 0.35rem 0.65rem;
+}
 
 @media (forced-colors: active) {
     .cratis-date-picker__group,
     .cratis-date-picker__popover,
     .cratis-date-picker__nav,
-    .cratis-date-picker__action { border-color: CanvasText; }
-    .cratis-date-picker__cell[data-selected] { background: Highlight; color: HighlightText; }
+    .cratis-date-picker__action {
+        border-color: CanvasText;
+    }
+    .cratis-date-picker__cell[data-selected] {
+        background: Highlight;
+        color: HighlightText;
+    }
 }
diff --git a/Source/Common/DatePickerInput.tsx b/Source/Common/DatePickerInput.tsx
index bb53bdb3..4dbe0497 100644
--- a/Source/Common/DatePickerInput.tsx
+++ b/Source/Common/DatePickerInput.tsx
@@ -1,11 +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 {
-    ButtonHTMLAttributes,
-    CSSProperties,
-    FocusEventHandler,
-} from 'react';
+import type { ButtonHTMLAttributes, CSSProperties, FocusEventHandler } from 'react';
 import {
     Button,
     Calendar,
@@ -23,6 +19,7 @@ import {
 } from 'react-aria-components/DatePicker';
 import { Dialog } from 'react-aria-components/Dialog';
 import { Heading } from 'react-aria-components/Heading';
+import { useCratisComponentsConfig } from './CratisComponentsProvider';
 import {
     fromDate,
     getLocalTimeZone,
@@ -108,9 +105,13 @@ export interface DatePickerInputProps {
     'aria-describedby'?: string;
 }
 
-const classNames = (...values: Array<string | undefined>) => values.filter(Boolean).join(' ');
+const classNames = (...values: Array<string | undefined>) =>
+    values.filter(Boolean).join(' ');
 
-const asDateValue = (value: Date | null, showTime: boolean | undefined): DateValue | null => {
+const asDateValue = (
+    value: Date | null,
+    showTime: boolean | undefined,
+): DateValue | null => {
     if (!value) return null;
     const zoned = fromDate(value, getLocalTimeZone());
     return showTime ? zoned : toCalendarDate(zoned);
@@ -141,19 +142,28 @@ export const DatePickerInput = ({
     className,
     style,
     pt,
-    todayLabel = 'Today',
-    clearLabel = 'Clear',
+    todayLabel,
+    clearLabel,
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledby,
     'aria-describedby': ariaDescribedby,
 }: DatePickerInputProps) => {
-    const rootClassName = classNames('cratis-date-picker', pt?.root?.className, className);
+    const { messages } = useCratisComponentsConfig();
+    const datePickerMessages = messages?.datePicker;
+    const resolvedTodayLabel = todayLabel ?? datePickerMessages?.today ?? 'Today';
+    const resolvedClearLabel = clearLabel ?? datePickerMessages?.clear ?? 'Clear';
+    const rootClassName = classNames(
+        'cratis-date-picker',
+        pt?.root?.className,
+        className,
+    );
     const inputId = id ?? pt?.input?.id;
     const effectiveDisabled = disabled ?? pt?.input?.disabled ?? false;
     const effectiveReadOnly = readOnly ?? pt?.input?.readOnly ?? false;
     const effectiveInvalid = invalid ?? pt?.input?.['aria-invalid'] ?? false;
     const effectivePlaceholder = placeholder ?? pt?.input?.placeholder;
-    const effectiveAriaLabel = ariaLabel ?? pt?.input?.['aria-label'] ?? effectivePlaceholder ?? 'Date';
+    const effectiveAriaLabel =
+        ariaLabel ?? pt?.input?.['aria-label'] ?? effectivePlaceholder ?? 'Date';
     const effectiveAriaLabelledby = ariaLabelledby ?? pt?.input?.['aria-labelledby'];
     const effectiveAriaDescribedby = ariaDescribedby ?? pt?.input?.['aria-describedby'];
 
@@ -170,14 +180,16 @@ export const DatePickerInput = ({
         >
             <AriaDatePicker
                 value={asDateValue(value, showTime)}
-                onChange={next => onChange(asDate(next))}
+                onChange={(next) => onChange(asDate(next))}
                 isDisabled={effectiveDisabled}
                 isReadOnly={effectiveReadOnly}
                 isInvalid={effectiveInvalid}
                 minValue={asDateValue(minDate ?? null, showTime) ?? undefined}
                 maxValue={asDateValue(maxDate ?? null, showTime) ?? undefined}
                 granularity={showTime ? 'minute' : 'day'}
-                hourCycle={hourFormat === '12' ? 12 : hourFormat === '24' ? 24 : undefined}
+                hourCycle={
+                    hourFormat === '12' ? 12 : hourFormat === '24' ? 24 : undefined
+                }
                 aria-label={effectiveAriaLabel}
                 aria-labelledby={effectiveAriaLabelledby}
                 aria-describedby={effectiveAriaDescribedby}
@@ -187,20 +199,29 @@ export const DatePickerInput = ({
                     {...pt?.group}
                     id={inputId}
                     aria-invalid={effectiveInvalid || undefined}
-                    className={classNames('cratis-date-picker__group', pt?.group?.className)}
+                    className={classNames(
+                        'cratis-date-picker__group',
+                        pt?.group?.className,
+                    )}
                     data-cratis-part='group'
                 >
                     <DateInput
-                        className={classNames('cratis-date-picker__input', pt?.input?.className)}
+                        className={classNames(
+                            'cratis-date-picker__input',
+                            pt?.input?.className,
+                        )}
                         style={pt?.input?.style}
                         data-cratis-part='input'
                         data-placeholder={effectivePlaceholder}
                     >
-                        {segment => (
+                        {(segment) => (
                             <DateSegment
                                 {...pt?.segment}
                                 segment={segment}
-                                className={classNames('cratis-date-picker__segment', pt?.segment?.className)}
+                                className={classNames(
+                                    'cratis-date-picker__segment',
+                                    pt?.segment?.className,
+                                )}
                                 data-cratis-part='segment'
                             />
                         )}
@@ -209,9 +230,16 @@ export const DatePickerInput = ({
                         <Button
                             {...pt?.trigger}
                             isDisabled={effectiveDisabled || effectiveReadOnly}
-                            className={classNames('cratis-date-picker__trigger', pt?.trigger?.className)}
+                            className={classNames(
+                                'cratis-date-picker__trigger',
+                                pt?.trigger?.className,
+                            )}
                             data-cratis-part='trigger'
-                            aria-label={pt?.trigger?.['aria-label'] ?? 'Open calendar'}
+                            aria-label={
+                                pt?.trigger?.['aria-label'] ??
+                                datePickerMessages?.openCalendar ??
+                                'Open calendar'
+                            }
                         >
                             <span aria-hidden='true'>▦</span>
                         </Button>
@@ -219,62 +247,99 @@ export const DatePickerInput = ({
                 </Group>
                 <Popover
                     {...pt?.popover}
-                    className={classNames('cratis-date-picker__popover', pt?.popover?.className)}
+                    className={classNames(
+                        'cratis-date-picker__popover',
+                        pt?.popover?.className,
+                    )}
                     data-cratis-part='popover'
                     placement='bottom start'
                 >
                     <Dialog
                         {...pt?.dialog}
-                        className={classNames('cratis-date-picker__dialog', pt?.dialog?.className)}
+                        className={classNames(
+                            'cratis-date-picker__dialog',
+                            pt?.dialog?.className,
+                        )}
                         data-cratis-part='dialog'
                     >
                         <Calendar
                             {...pt?.calendar}
-                            className={classNames('cratis-date-picker__calendar', pt?.calendar?.className)}
+                            className={classNames(
+                                'cratis-date-picker__calendar',
+                                pt?.calendar?.className,
+                            )}
                             data-cratis-part='calendar'
                         >
                             <header
                                 {...pt?.header}
-                                className={classNames('cratis-date-picker__header', pt?.header?.className)}
+                                className={classNames(
+                                    'cratis-date-picker__header',
+                                    pt?.header?.className,
+                                )}
                                 data-cratis-part='header'
                             >
                                 <Button
                                     {...pt?.previous}
                                     slot='previous'
-                                    className={classNames('cratis-date-picker__nav', pt?.previous?.className)}
+                                    className={classNames(
+                                        'cratis-date-picker__nav',
+                                        pt?.previous?.className,
+                                    )}
                                     data-cratis-part='previous'
-                                    aria-label={pt?.previous?.['aria-label'] ?? 'Previous month'}
+                                    aria-label={
+                                        pt?.previous?.['aria-label'] ??
+                                        datePickerMessages?.previousMonth ??
+                                        'Previous month'
+                                    }
                                 >
                                     <span aria-hidden='true'>‹</span>
                                 </Button>
                                 <Heading
                                     {...pt?.heading}
-                                    className={classNames('cratis-date-picker__heading', pt?.heading?.className)}
+                                    className={classNames(
+                                        'cratis-date-picker__heading',
+                                        pt?.heading?.className,
+                                    )}
                                     data-cratis-part='heading'
                                 />
                                 <Button
                                     {...pt?.next}
                                     slot='next'
-                                    className={classNames('cratis-date-picker__nav', pt?.next?.className)}
+                                    className={classNames(
+                                        'cratis-date-picker__nav',
+                                        pt?.next?.className,
+                                    )}
                                     data-cratis-part='next'
-                                    aria-label={pt?.next?.['aria-label'] ?? 'Next month'}
+                                    aria-label={
+                                        pt?.next?.['aria-label'] ??
+                                        datePickerMessages?.nextMonth ??
+                                        'Next month'
+                                    }
                                 >
                                     <span aria-hidden='true'>›</span>
                                 </Button>
                             </header>
                             <CalendarGrid
-                                className={classNames('cratis-date-picker__grid', pt?.grid?.className)}
+                                className={classNames(
+                                    'cratis-date-picker__grid',
+                                    pt?.grid?.className,
+                                )}
                                 data-cratis-part='grid'
                             >
                                 <CalendarGridHeader>
-                                    {day => <CalendarHeaderCell>{day}</CalendarHeaderCell>}
+                                    {(day) => (
+                                        <CalendarHeaderCell>{day}</CalendarHeaderCell>
+                                    )}
                                 </CalendarGridHeader>
                                 <CalendarGridBody>
-                                    {date => (
+                                    {(date) => (
                                         <CalendarCell
                                             {...pt?.cell}
                                             date={date}
-                                            className={classNames('cratis-date-picker__cell', pt?.cell?.className)}
+                                            className={classNames(
+                                                'cratis-date-picker__cell',
+                                                pt?.cell?.className,
+                                            )}
                                             data-cratis-part='cell'
                                         />
                                     )}
@@ -284,26 +349,41 @@ export const DatePickerInput = ({
                         {showButtonBar && (
                             <div
                                 {...pt?.buttonBar}
-                                className={classNames('cratis-date-picker__button-bar', pt?.buttonBar?.className)}
+                                className={classNames(
+                                    'cratis-date-picker__button-bar',
+                                    pt?.buttonBar?.className,
+                                )}
                                 data-cratis-part='button-bar'
                             >
                                 <button
                                     {...pt?.today}
                                     type='button'
-                                    className={classNames('cratis-date-picker__action', pt?.today?.className)}
+                                    className={classNames(
+                                        'cratis-date-picker__action',
+                                        pt?.today?.className,
+                                    )}
                                     data-cratis-part='today'
-                                    onClick={() => onChange(today(getLocalTimeZone()).toDate(getLocalTimeZone()))}
+                                    onClick={() =>
+                                        onChange(
+                                            today(getLocalTimeZone()).toDate(
+                                                getLocalTimeZone(),
+                                            ),
+                                        )
+                                    }
                                 >
-                                    {todayLabel}
+                                    {resolvedTodayLabel}
                                 </button>
                                 <button
                                     {...pt?.clear}
                                     type='button'
-                                    className={classNames('cratis-date-picker__action', pt?.clear?.className)}
+                                    className={classNames(
+                                        'cratis-date-picker__action',
+                                        pt?.clear?.className,
+                                    )}
                                     data-cratis-part='clear'
                                     onClick={() => onChange(null)}
                                 >
-                                    {clearLabel}
+                                    {resolvedClearLabel}
                                 </button>
                             </div>
                         )}
diff --git a/Source/Common/FormElement.stories.tsx b/Source/Common/FormElement.stories.tsx
index fff1adce..c9a1473e 100644
--- a/Source/Common/FormElement.stories.tsx
+++ b/Source/Common/FormElement.stories.tsx
@@ -2,9 +2,8 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import React from 'react';
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { FormElement } from './FormElement';
-import { InputText } from 'primereact/inputtext';
 
 const meta: Meta<typeof FormElement> = {
     title: 'Common/FormElement',
@@ -16,39 +15,43 @@ type Story = StoryObj<typeof FormElement>;
 
 export const Default: Story = {
     args: {
-        icon: <i className="pi pi-user" />,
+        icon: <i className='pi pi-user' />,
     },
     render: (args) => (
-        <div className="p-4">
+        <div className='p-4'>
             <FormElement {...args}>
-                <InputText placeholder="Username" />
+                <input className='cratis-field-input' placeholder='Username' />
             </FormElement>
         </div>
-    )
+    ),
 };
 
 export const WithEmailIcon: Story = {
     args: {
-        icon: <i className="pi pi-envelope" />,
+        icon: <i className='pi pi-envelope' />,
     },
     render: (args) => (
-        <div className="p-4">
+        <div className='p-4'>
             <FormElement {...args}>
-                <InputText type="email" placeholder="Email address" />
+                <input
+                    className='cratis-field-input'
+                    type='email'
+                    placeholder='Email address'
+                />
             </FormElement>
         </div>
-    )
+    ),
 };
 
 export const WithSearchIcon: Story = {
     args: {
-        icon: <i className="pi pi-search" />,
+        icon: <i className='pi pi-search' />,
     },
     render: (args) => (
-        <div className="p-4">
+        <div className='p-4'>
             <FormElement {...args}>
-                <InputText placeholder="Search..." />
+                <input className='cratis-field-input' placeholder='Search…' />
             </FormElement>
         </div>
-    )
+    ),
 };
diff --git a/Source/Common/Tooltip.tsx b/Source/Common/Tooltip.tsx
index 5bdb3979..a1c0d10c 100644
--- a/Source/Common/Tooltip.tsx
+++ b/Source/Common/Tooltip.tsx
@@ -2,10 +2,7 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import type { ReactNode } from 'react';
-import {
-    Tooltip as AriaTooltip,
-    TooltipTrigger,
-} from 'react-aria-components/Tooltip';
+import { Tooltip as AriaTooltip, TooltipTrigger } from 'react-aria-components/Tooltip';
 
 /** Position of the tooltip relative to its trigger element. */
 export type TooltipPosition = 'top' | 'right' | 'bottom' | 'left';
@@ -25,13 +22,21 @@ export interface TooltipProps {
 }
 
 /** An accessible hover and keyboard-focus tooltip with stable Cratis parts. */
-export const Tooltip = ({ content, position = 'top', disabled = false, className, children }: TooltipProps) => {
+export const Tooltip = ({
+    content,
+    position = 'top',
+    disabled = false,
+    className,
+    children,
+}: TooltipProps) => {
     if (!content || disabled) return <>{children}</>;
 
     return (
         <TooltipTrigger delay={350} closeDelay={100}>
             <span
-                className={['cratis-tooltip-trigger', className].filter(Boolean).join(' ')}
+                className={['cratis-tooltip-trigger', className]
+                    .filter(Boolean)
+                    .join(' ')}
                 data-cratis-part='trigger'
                 tabIndex={0}
             >
diff --git a/Source/Common/for_DatePickerInput/when_configuring_input_pass_through.tsx b/Source/Common/for_DatePickerInput/when_configuring_input_pass_through.tsx
index ef46fd9c..45127c2c 100644
--- a/Source/Common/for_DatePickerInput/when_configuring_input_pass_through.tsx
+++ b/Source/Common/for_DatePickerInput/when_configuring_input_pass_through.tsx
@@ -47,9 +47,15 @@ describe('when configuring input pass-through', () => {
             );
         });
 
-        const renderedRoot = container.querySelector<HTMLElement>('[data-cratis-part="root"]');
-        const renderedGroup = container.querySelector<HTMLElement>('[data-cratis-part="group"]');
-        const renderedInput = container.querySelector<HTMLElement>('[data-cratis-part="input"]');
+        const renderedRoot = container.querySelector<HTMLElement>(
+            '[data-cratis-part="root"]',
+        );
+        const renderedGroup = container.querySelector<HTMLElement>(
+            '[data-cratis-part="group"]',
+        );
+        const renderedInput = container.querySelector<HTMLElement>(
+            '[data-cratis-part="input"]',
+        );
         if (!renderedRoot || !renderedGroup || !renderedInput) {
             throw new Error('DatePickerInput did not render its stable Cratis parts.');
         }
@@ -84,6 +90,8 @@ describe('when configuring input pass-through', () => {
     });
 
     it('should preserve the pass-through placeholder when the wrapper prop is omitted', () => {
-        expect(dateInput.getAttribute('data-placeholder')).to.equal('Pass-through placeholder');
+        expect(dateInput.getAttribute('data-placeholder')).to.equal(
+            'Pass-through placeholder',
+        );
     });
 });
diff --git a/Source/Common/for_DatePickerInput/when_configuring_standard_props.tsx b/Source/Common/for_DatePickerInput/when_configuring_standard_props.tsx
index cebf56cd..7bec88dd 100644
--- a/Source/Common/for_DatePickerInput/when_configuring_standard_props.tsx
+++ b/Source/Common/for_DatePickerInput/when_configuring_standard_props.tsx
@@ -22,16 +22,24 @@ interface MountedDatePicker {
     trigger: HTMLButtonElement;
 }
 
-const mountDatePicker = async (options: DatePickerOptions): Promise<MountedDatePicker> => {
+const mountDatePicker = async (
+    options: DatePickerOptions,
+): Promise<MountedDatePicker> => {
     // SAFETY: React's test-environment flag is an intentionally undocumented global absent from DOM typings.
     (
         globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
     ).IS_REACT_ACT_ENVIRONMENT = true;
     // SAFETY: jsdom omits ResizeObserver; the overlay only calls these observer methods.
     (globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver ??= class {
-        observe() { return undefined; }
-        unobserve() { return undefined; }
-        disconnect() { return undefined; }
+        observe() {
+            return undefined;
+        }
+        unobserve() {
+            return undefined;
+        }
+        disconnect() {
+            return undefined;
+        }
     };
     const container = document.createElement('div');
     document.body.append(container);
@@ -53,7 +61,9 @@ const mountDatePicker = async (options: DatePickerOptions): Promise<MountedDateP
 
     const pickerRoot = container.querySelector<HTMLElement>('[data-cratis-part="root"]');
     const group = container.querySelector<HTMLElement>('[data-cratis-part="group"]');
-    const trigger = container.querySelector<HTMLButtonElement>('[data-cratis-part="trigger"]');
+    const trigger = container.querySelector<HTMLButtonElement>(
+        '[data-cratis-part="trigger"]',
+    );
     if (!pickerRoot || !group || !trigger) {
         throw new Error('DatePickerInput did not render its stable Cratis parts.');
     }
diff --git a/Source/Common/for_DatePickerInput/when_rendering_invalid_state.tsx b/Source/Common/for_DatePickerInput/when_rendering_invalid_state.tsx
index 9609fdc6..41881ca7 100644
--- a/Source/Common/for_DatePickerInput/when_rendering_invalid_state.tsx
+++ b/Source/Common/for_DatePickerInput/when_rendering_invalid_state.tsx
@@ -40,10 +40,16 @@ import { DatePickerInput } from '../DatePickerInput';
                 );
             });
 
-            const renderedRoot = container.querySelector<HTMLElement>('[data-cratis-part="root"]');
-            const renderedGroup = container.querySelector<HTMLElement>('[data-cratis-part="group"]');
+            const renderedRoot = container.querySelector<HTMLElement>(
+                '[data-cratis-part="root"]',
+            );
+            const renderedGroup = container.querySelector<HTMLElement>(
+                '[data-cratis-part="group"]',
+            );
             if (!renderedRoot || !renderedGroup) {
-                throw new Error('DatePickerInput did not render its stable Cratis parts.');
+                throw new Error(
+                    'DatePickerInput did not render its stable Cratis parts.',
+                );
             }
             pickerRoot = renderedRoot;
             group = renderedGroup;
diff --git a/Source/Common/for_mergeCratisComponentsConfig/when_merging_user_value.ts b/Source/Common/for_mergeCratisComponentsConfig/when_merging_user_value.ts
index 34e1f6d8..0ffdbfb1 100644
--- a/Source/Common/for_mergeCratisComponentsConfig/when_merging_user_value.ts
+++ b/Source/Common/for_mergeCratisComponentsConfig/when_merging_user_value.ts
@@ -10,15 +10,20 @@ describe('when merging user value', () => {
 
     beforeEach(() => {
         withoutValue = mergeCratisComponentsConfig(undefined) as Record<string, unknown>;
-        withValue = mergeCratisComponentsConfig({ unstyled: true, ripple: true, pt: userPt }) as Record<string, unknown>;
+        withValue = mergeCratisComponentsConfig({
+            unstyled: true,
+            ripple: true,
+            pt: userPt,
+        }) as Record<string, unknown>;
     });
 
     it('should return an object when no value is given', () => {
         withoutValue.should.not.be.undefined;
     });
 
-    it('should pass an empty config when no value is given', () => {
-        Object.keys(withoutValue).should.have.lengthOf(0);
+    it('should include the renderer-independent defaults when no value is given', () => {
+        withoutValue.locale!.should.equal('en-US');
+        withoutValue.messages!.should.not.be.undefined;
     });
 
     it('should forward unstyled from user value', () => {
diff --git a/Source/Compatibility/PrimeReact11PassThroughComponent.ts b/Source/Compatibility/PrimeReact11PassThroughComponent.ts
deleted file mode 100644
index c3a9703b..00000000
--- a/Source/Compatibility/PrimeReact11PassThroughComponent.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-// Copyright (c) Cratis. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-
-import type { components3PrimeReact11PassThroughContract } from './components3PrimeReact11PassThroughContract';
-
-/** A component name in the Components 3 / PrimeReact 11 pass-through contract. */
-export type PrimeReact11PassThroughComponent =
-    keyof typeof components3PrimeReact11PassThroughContract.components;
diff --git a/Source/Compatibility/assertPrimeReact11PassThroughCompatibility.ts b/Source/Compatibility/assertPrimeReact11PassThroughCompatibility.ts
deleted file mode 100644
index c6368423..00000000
--- a/Source/Compatibility/assertPrimeReact11PassThroughCompatibility.ts
+++ /dev/null
@@ -1,80 +0,0 @@
-// Copyright (c) Cratis. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-
-import { components3PrimeReact11PassThroughContract } from './components3PrimeReact11PassThroughContract';
-import type { PrimeReact11PassThroughComponent } from './PrimeReact11PassThroughComponent';
-import { primeReact11PassThroughSentinelAttribute } from './primeReact11PassThroughSentinelPreset';
-
-type RenderedMarker = {
-    readonly scope: string;
-    readonly part?: string;
-};
-
-const markerSelector = (marker: RenderedMarker) =>
-    marker.part
-        ? `[data-scope="${marker.scope}"][data-part="${marker.part}"]`
-        : `[data-scope="${marker.scope}"]`;
-
-const containsSelector = (root: ParentNode, selector: string) => {
-    const possibleElement = root as ParentNode & {
-        matches?: (candidate: string) => boolean;
-    };
-    return (
-        possibleElement.matches?.(selector) === true ||
-        root.querySelector(selector) !== null
-    );
-};
-
-/**
- * Asserts that rendered PrimeReact 11 output still honors the Components 3 pass-through contract.
- *
- * Render the components under {@link primeReact11PassThroughSentinelPreset} before calling this
- * function. Pass a component list to check only the primitives your application uses. Additional
- * slots and markers are ignored so additive PrimeReact changes remain compatible.
- *
- * @throws Error with one diagnostic per missing slot or structural marker.
- */
-export const assertPrimeReact11PassThroughCompatibility = (
-    root: ParentNode,
-    components: readonly PrimeReact11PassThroughComponent[] = Object.keys(
-        components3PrimeReact11PassThroughContract.components,
-    ) as PrimeReact11PassThroughComponent[],
-): void => {
-    const diagnostics: string[] = [];
-
-    for (const component of components) {
-        const contract = components3PrimeReact11PassThroughContract.components[component];
-
-        for (const slot of contract.slots) {
-            const sentinel = `${component}.${slot}`;
-            if (
-                !containsSelector(
-                    root,
-                    `[${primeReact11PassThroughSentinelAttribute}~="${sentinel}"]`,
-                )
-            ) {
-                diagnostics.push(
-                    `${component}.${slot}: pass-through sentinel was not rendered; ` +
-                        'the slot may have been removed, renamed, or omitted from the compatibility fixture.',
-                );
-            }
-        }
-
-        for (const marker of contract.renderedMarkers) {
-            const selector = markerSelector(marker);
-            if (!containsSelector(root, selector)) {
-                diagnostics.push(
-                    `${component} marker ${selector}: structural marker was not rendered; ` +
-                        'it may have been removed, renamed, or omitted from the compatibility fixture.',
-                );
-            }
-        }
-    }
-
-    if (diagnostics.length > 0) {
-        throw new Error(
-            `PrimeReact 11 pass-through compatibility failed for @cratis/components major 3 ` +
-                `(${components3PrimeReact11PassThroughContract.id}):\n- ${diagnostics.join('\n- ')}`,
-        );
-    }
-};
diff --git a/Source/Compatibility/components3PrimeReact11PassThroughContract.ts b/Source/Compatibility/components3PrimeReact11PassThroughContract.ts
deleted file mode 100644
index 09427423..00000000
--- a/Source/Compatibility/components3PrimeReact11PassThroughContract.ts
+++ /dev/null
@@ -1,269 +0,0 @@
-// Copyright (c) Cratis. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-
-/**
- * The pass-through slots and unstyled DOM markers supported by Components 3 on PrimeReact 11.
- *
- * Slot names are the keys accepted by PrimeReact's component-level `pt` objects. Rendered markers
- * identify the `data-scope` and optional `data-part` emitted by the supported composition.
- * Additions are compatible; removing or renaming an entry requires a new Components major.
- */
-export const components3PrimeReact11PassThroughContract = {
-    id: '@cratis/components@3/primereact@11/pass-through',
-    componentsMajor: 3,
-    primeReactMajor: 11,
-    revision: 1,
-    components: {
-        button: {
-            globalKey: 'button',
-            slots: ['root'],
-            renderedMarkers: [{ scope: 'button' }],
-        },
-        inputtext: {
-            globalKey: 'inputtext',
-            slots: ['root'],
-            renderedMarkers: [{ scope: 'inputtext' }],
-        },
-        textarea: {
-            globalKey: 'textarea',
-            slots: ['root'],
-            renderedMarkers: [{ scope: 'textarea' }],
-        },
-        inputnumber: {
-            globalKey: 'inputnumber.root',
-            slots: ['root', 'input'],
-            renderedMarkers: [
-                { scope: 'inputnumber', part: 'root' },
-                { scope: 'inputnumber', part: 'input' },
-            ],
-        },
-        select: {
-            globalKey: 'select.root',
-            slots: [
-                'root',
-                'trigger',
-                'value',
-                'clear',
-                'indicator',
-                'positioner',
-                'popup',
-                'filter',
-                'list',
-                'option',
-            ],
-            renderedMarkers: [
-                { scope: 'select', part: 'root' },
-                { scope: 'select', part: 'trigger' },
-                { scope: 'select', part: 'value' },
-                { scope: 'select', part: 'clear' },
-                { scope: 'select', part: 'indicator' },
-                { scope: 'select', part: 'positioner' },
-                { scope: 'select', part: 'popup' },
-                { scope: 'select', part: 'filter' },
-                { scope: 'select', part: 'list' },
-                { scope: 'select', part: 'option' },
-            ],
-        },
-        checkbox: {
-            globalKey: 'checkbox.root',
-            slots: ['root', 'input', 'box', 'indicator'],
-            renderedMarkers: [
-                { scope: 'checkbox', part: 'root' },
-                { scope: 'checkbox', part: 'input' },
-                { scope: 'checkboxbox' },
-                { scope: 'checkboxindicator' },
-            ],
-        },
-        radiobutton: {
-            globalKey: 'radiobutton.root',
-            slots: ['root', 'input', 'box', 'indicator'],
-            renderedMarkers: [
-                { scope: 'radiobutton', part: 'root' },
-                { scope: 'radiobutton', part: 'input' },
-                { scope: 'radiobutton', part: 'box' },
-                { scope: 'radiobutton', part: 'indicator' },
-            ],
-        },
-        datepicker: {
-            globalKey: 'datepicker.root',
-            slots: [
-                'root',
-                'trigger',
-                'positioner',
-                'popup',
-                'calendar',
-                'header',
-                'prev',
-                'title',
-                'selectMonth',
-                'selectYear',
-                'next',
-                'tableBody',
-            ],
-            renderedMarkers: [
-                { scope: 'datepicker', part: 'root' },
-                { scope: 'datepicker', part: 'input' },
-                { scope: 'datepicker', part: 'trigger' },
-                { scope: 'datepicker', part: 'positioner' },
-                { scope: 'datepicker', part: 'popup' },
-                { scope: 'datepicker', part: 'calendar' },
-                { scope: 'datepicker', part: 'header' },
-                { scope: 'datepicker', part: 'prev' },
-                { scope: 'datepicker', part: 'title' },
-                { scope: 'datepicker', part: 'selectmonth' },
-                { scope: 'datepicker', part: 'selectyear' },
-                { scope: 'datepicker', part: 'next' },
-                { scope: 'datepicker', part: 'table' },
-                { scope: 'datepicker', part: 'tablehead' },
-                { scope: 'datepicker', part: 'tablebody' },
-                { scope: 'datepicker', part: 'time' },
-            ],
-        },
-        slider: {
-            globalKey: 'slider.root',
-            slots: ['root', 'track', 'range', 'handle'],
-            renderedMarkers: [
-                { scope: 'slider', part: 'root' },
-                { scope: 'slider', part: 'track' },
-                { scope: 'slider', part: 'range' },
-                { scope: 'slider', part: 'handle' },
-            ],
-        },
-        inputtags: {
-            globalKey: 'inputtags.root',
-            slots: ['root'],
-            renderedMarkers: [{ scope: 'inputtags', part: 'root' }],
-        },
-        inputcolor: {
-            globalKey: 'inputcolor.root',
-            slots: [
-                'area',
-                'areaBackground',
-                'areaHandle',
-                'sliderTrack',
-                'sliderHandle',
-                'swatch',
-                'swatchBackground',
-            ],
-            renderedMarkers: [
-                { scope: 'inputcolor', part: 'area' },
-                { scope: 'inputcolor', part: 'areabackground' },
-                { scope: 'inputcolor', part: 'areahandle' },
-                { scope: 'inputcolor', part: 'slider' },
-                { scope: 'inputcolor', part: 'slidertrack' },
-                { scope: 'inputcolor', part: 'sliderhandle' },
-                { scope: 'inputcolor', part: 'swatch' },
-                { scope: 'inputcolor', part: 'swatchbackground' },
-            ],
-        },
-        timeline: {
-            globalKey: 'timeline.root',
-            slots: ['root', 'event', 'separator', 'marker', 'connector', 'content'],
-            renderedMarkers: [
-                { scope: 'timeline', part: 'root' },
-                { scope: 'timeline', part: 'event' },
-                { scope: 'timeline', part: 'separator' },
-                { scope: 'timeline', part: 'marker' },
-                { scope: 'timeline', part: 'connector' },
-                { scope: 'timeline', part: 'content' },
-            ],
-        },
-        rating: {
-            globalKey: 'rating.root',
-            slots: ['root', 'option', 'onIcon', 'offIcon'],
-            renderedMarkers: [
-                { scope: 'rating', part: 'root' },
-                { scope: 'rating', part: 'option' },
-                { scope: 'rating', part: 'on' },
-                { scope: 'rating', part: 'off' },
-            ],
-        },
-        toggleswitch: {
-            globalKey: 'toggleswitch.root',
-            slots: ['root', 'input', 'control', 'handle'],
-            renderedMarkers: [
-                { scope: 'toggleswitch', part: 'root' },
-                { scope: 'toggleswitch', part: 'control' },
-                { scope: 'toggleswitch', part: 'handle' },
-            ],
-        },
-        inputpassword: {
-            globalKey: 'inputtext',
-            slots: ['root'],
-            renderedMarkers: [{ scope: 'inputpassword' }],
-        },
-        dialog: {
-            globalKey: 'dialog.root',
-            slots: [
-                'backdrop',
-                'positioner',
-                'popup',
-                'header',
-                'title',
-                'close',
-                'content',
-                'footer',
-            ],
-            renderedMarkers: [
-                { scope: 'dialog', part: 'backdrop' },
-                { scope: 'dialog', part: 'positioner' },
-                { scope: 'dialog', part: 'popup' },
-                { scope: 'dialog', part: 'header' },
-                { scope: 'dialog', part: 'title' },
-                { scope: 'dialog', part: 'close' },
-                { scope: 'dialog', part: 'content' },
-                { scope: 'dialog', part: 'footer' },
-            ],
-        },
-        datatable: {
-            globalKey: 'datatable.root',
-            slots: [
-                'root',
-                'tableContainer',
-                'table',
-                'head',
-                'theadRow',
-                'theadCell',
-                'body',
-                'row',
-                'cell',
-            ],
-            renderedMarkers: [
-                { scope: 'datatable', part: 'root' },
-                { scope: 'datatable', part: 'tablecontainer' },
-                { scope: 'datatable', part: 'table' },
-                { scope: 'datatable', part: 'thead' },
-                { scope: 'datatable', part: 'theadrow' },
-                { scope: 'datatable', part: 'theadcell' },
-                { scope: 'datatable', part: 'tbody' },
-                { scope: 'datatable', part: 'row' },
-                { scope: 'datatable', part: 'cell' },
-            ],
-        },
-        stepper: {
-            globalKey: 'stepper.root',
-            slots: [
-                'root',
-                'list',
-                'step',
-                'header',
-                'number',
-                'title',
-                'separator',
-                'panels',
-                'panel',
-            ],
-            renderedMarkers: [
-                { scope: 'stepper', part: 'root' },
-                { scope: 'stepper', part: 'list' },
-                { scope: 'stepper', part: 'step' },
-                { scope: 'stepper', part: 'header' },
-                { scope: 'stepper', part: 'number' },
-                { scope: 'stepper', part: 'title' },
-                { scope: 'stepper', part: 'separator' },
-                { scope: 'stepper', part: 'panels' },
-                { scope: 'stepper', part: 'panel' },
-            ],
-        },
-    },
-} as const;
diff --git a/Source/Compatibility/for_assertPrimeReact11PassThroughCompatibility/when_a_required_marker_is_renamed.ts b/Source/Compatibility/for_assertPrimeReact11PassThroughCompatibility/when_a_required_marker_is_renamed.ts
deleted file mode 100644
index e002b456..00000000
--- a/Source/Compatibility/for_assertPrimeReact11PassThroughCompatibility/when_a_required_marker_is_renamed.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-// Copyright (c) Cratis. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-// @vitest-environment jsdom
-
-import { expect } from 'chai';
-import { beforeEach, describe, it } from 'vitest';
-import { assertPrimeReact11PassThroughCompatibility } from '../assertPrimeReact11PassThroughCompatibility';
-
-describe('when a required structural marker is renamed', () => {
-    let root: HTMLDivElement;
-
-    beforeEach(() => {
-        root = document.createElement('div');
-        root.innerHTML =
-            '<button data-scope="renamed-button" data-cratis-pt-slot="button.root"></button>';
-    });
-
-    it('should report the expected selector with a likely cause', () => {
-        expect(() =>
-            assertPrimeReact11PassThroughCompatibility(root, ['button']),
-        ).to.throw(
-            Error,
-            'button marker [data-scope="button"]: structural marker was not rendered; it may have been removed, renamed',
-        );
-    });
-});
diff --git a/Source/Compatibility/for_assertPrimeReact11PassThroughCompatibility/when_a_required_slot_is_missing.ts b/Source/Compatibility/for_assertPrimeReact11PassThroughCompatibility/when_a_required_slot_is_missing.ts
deleted file mode 100644
index 2c4a08b4..00000000
--- a/Source/Compatibility/for_assertPrimeReact11PassThroughCompatibility/when_a_required_slot_is_missing.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-// Copyright (c) Cratis. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-// @vitest-environment jsdom
-
-import { expect } from 'chai';
-import { beforeEach, describe, it } from 'vitest';
-import { assertPrimeReact11PassThroughCompatibility } from '../assertPrimeReact11PassThroughCompatibility';
-
-describe('when a required pass-through slot is missing', () => {
-    let root: HTMLDivElement;
-
-    beforeEach(() => {
-        root = document.createElement('div');
-        root.innerHTML = '<button data-scope="button" data-part="root"></button>';
-    });
-
-    it('should report the component and slot with a likely cause', () => {
-        expect(() =>
-            assertPrimeReact11PassThroughCompatibility(root, ['button']),
-        ).to.throw(
-            Error,
-            'button.root: pass-through sentinel was not rendered; the slot may have been removed, renamed',
-        );
-    });
-});
diff --git a/Source/Compatibility/for_assertPrimeReact11PassThroughCompatibility/when_the_compatibility_root_is_the_rendered_component.ts b/Source/Compatibility/for_assertPrimeReact11PassThroughCompatibility/when_the_compatibility_root_is_the_rendered_component.ts
deleted file mode 100644
index 59acc1df..00000000
--- a/Source/Compatibility/for_assertPrimeReact11PassThroughCompatibility/when_the_compatibility_root_is_the_rendered_component.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-// Copyright (c) Cratis. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-// @vitest-environment jsdom
-
-import { expect } from 'chai';
-import { beforeEach, describe, it } from 'vitest';
-import { assertPrimeReact11PassThroughCompatibility } from '../assertPrimeReact11PassThroughCompatibility';
-
-describe('when the compatibility root is the rendered component', () => {
-    let root: HTMLButtonElement;
-
-    beforeEach(() => {
-        root = document.createElement('button');
-        root.dataset.scope = 'button';
-        root.dataset.cratisPtSlot = 'button.root';
-    });
-
-    it('should include the root in the compatibility check', () => {
-        expect(() =>
-            assertPrimeReact11PassThroughCompatibility(root, ['button']),
-        ).not.to.throw();
-    });
-});
diff --git a/Source/Compatibility/for_assertPrimeReact11PassThroughCompatibility/when_the_surface_is_compatible.ts b/Source/Compatibility/for_assertPrimeReact11PassThroughCompatibility/when_the_surface_is_compatible.ts
deleted file mode 100644
index 4b809c7c..00000000
--- a/Source/Compatibility/for_assertPrimeReact11PassThroughCompatibility/when_the_surface_is_compatible.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-// Copyright (c) Cratis. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-// @vitest-environment jsdom
-
-import { expect } from 'chai';
-import { beforeEach, describe, it } from 'vitest';
-import { assertPrimeReact11PassThroughCompatibility } from '../assertPrimeReact11PassThroughCompatibility';
-
-describe('when the pass-through surface is compatible', () => {
-    let root: HTMLDivElement;
-
-    beforeEach(() => {
-        root = document.createElement('div');
-        root.innerHTML = `
-            <button data-scope="button" data-part="root" data-cratis-pt-slot="button.root"></button>
-            <span data-scope="button" data-part="addition" data-cratis-pt-slot="button.addition"></span>`;
-    });
-
-    it('should allow additive slots and markers', () => {
-        expect(() =>
-            assertPrimeReact11PassThroughCompatibility(root, ['button']),
-        ).not.to.throw();
-    });
-});
diff --git a/Source/Compatibility/for_primeReact11PassThroughContract/when_rendering_the_supported_surface.tsx b/Source/Compatibility/for_primeReact11PassThroughContract/when_rendering_the_supported_surface.tsx
deleted file mode 100644
index de92eea5..00000000
--- a/Source/Compatibility/for_primeReact11PassThroughContract/when_rendering_the_supported_surface.tsx
+++ /dev/null
@@ -1,237 +0,0 @@
-// Copyright (c) Cratis. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-// @vitest-environment jsdom
-
-import { parseColor } from '@primereact/headless/inputcolor';
-import { expect } from 'chai';
-import { Button } from 'primereact/button';
-import { Checkbox } from 'primereact/checkbox';
-import { DataTable } from 'primereact/datatable';
-import { DatePicker } from 'primereact/datepicker';
-import { InputColor } from 'primereact/inputcolor';
-import { InputNumber } from 'primereact/inputnumber';
-import { InputPassword } from 'primereact/inputpassword';
-import { InputTags } from 'primereact/inputtags';
-import { InputText } from 'primereact/inputtext';
-import { RadioButton } from 'primereact/radiobutton';
-import { Rating } from 'primereact/rating';
-import { Select } from 'primereact/select';
-import { Slider } from 'primereact/slider';
-import { Stepper } from 'primereact/stepper';
-import { Textarea } from 'primereact/textarea';
-import { Timeline } from 'primereact/timeline';
-import { ToggleSwitch } from 'primereact/toggleswitch';
-import { act } from 'react';
-import { createRoot, type Root } from 'react-dom/client';
-import { afterEach, beforeEach, describe, it } from 'vitest';
-import { CratisComponentsProvider } from '../../Common/CratisComponentsProvider';
-import { Dialog as CratisDialog } from '../../Dialogs/Dialog';
-import { assertPrimeReact11PassThroughCompatibility } from '../assertPrimeReact11PassThroughCompatibility';
-import { primeReact11PassThroughSentinelPreset } from '../primeReact11PassThroughSentinelPreset';
-
-const SupportedSurface = () => (
-    <>
-        <Button>Save</Button>
-        <InputText value='Ada' readOnly />
-        <Textarea value='Notes' readOnly />
-        <InputNumber.Root value={44}>
-            <InputNumber.Input />
-        </InputNumber.Root>
-        <Select.Root
-            open
-            value='ada'
-            options={[{ label: 'Ada', value: 'ada' }]}
-            optionLabel='label'
-            optionValue='value'
-        >
-            <Select.Trigger>
-                <Select.Value />
-                <Select.Clear />
-                <Select.Indicator />
-            </Select.Trigger>
-            <Select.Portal>
-                <Select.Positioner>
-                    <Select.Popup>
-                        <Select.Filter />
-                        <Select.List />
-                    </Select.Popup>
-                </Select.Positioner>
-            </Select.Portal>
-        </Select.Root>
-        <Checkbox.Root checked>
-            <Checkbox.Box>
-                <Checkbox.Indicator />
-            </Checkbox.Box>
-        </Checkbox.Root>
-        <RadioButton.Root checked value='ada'>
-            <RadioButton.Box>
-                <RadioButton.Indicator />
-            </RadioButton.Box>
-        </RadioButton.Root>
-        <DatePicker.Root value={new Date(2026, 7, 22, 12, 30)} open showTime>
-            <DatePicker.Input as={InputText} />
-            <DatePicker.Trigger>Open</DatePicker.Trigger>
-            <DatePicker.Portal>
-                <DatePicker.Positioner>
-                    <DatePicker.Popup>
-                        <DatePicker.Calendar>
-                            <DatePicker.Header>
-                                <DatePicker.Prev>Previous</DatePicker.Prev>
-                                <DatePicker.Title>
-                                    <DatePicker.SelectMonth />
-                                    <DatePicker.SelectYear />
-                                    <DatePicker.Decade />
-                                </DatePicker.Title>
-                                <DatePicker.Next>Next</DatePicker.Next>
-                            </DatePicker.Header>
-                            <DatePicker.Table>
-                                <DatePicker.TableHead />
-                                <DatePicker.TableBody />
-                                <DatePicker.TableBody view='month' />
-                                <DatePicker.TableBody view='year' />
-                            </DatePicker.Table>
-                        </DatePicker.Calendar>
-                        <DatePicker.Time />
-                    </DatePicker.Popup>
-                </DatePicker.Positioner>
-            </DatePicker.Portal>
-        </DatePicker.Root>
-        <Slider.Root value={44}>
-            <Slider.Track>
-                <Slider.Range />
-            </Slider.Track>
-            <Slider.Handle />
-        </Slider.Root>
-        <InputTags.Root value={['Ada']}>
-            <InputTags.Items>
-                {({ item, index, itemProps }) => (
-                    <span {...itemProps} key={index}>
-                        {item}
-                    </span>
-                )}
-            </InputTags.Items>
-            <InputTags.Control>
-                {({ controlProps }) => <input {...controlProps} />}
-            </InputTags.Control>
-        </InputTags.Root>
-        <InputColor.Root value={parseColor('#60a5fa')}>
-            <InputColor.Area>
-                <InputColor.AreaBackground />
-                <InputColor.AreaHandle />
-            </InputColor.Area>
-            <InputColor.Slider>
-                <InputColor.SliderTrack />
-                <InputColor.SliderHandle />
-            </InputColor.Slider>
-            <InputColor.Swatch>
-                <InputColor.SwatchBackground />
-            </InputColor.Swatch>
-        </InputColor.Root>
-        <Timeline.Root>
-            <Timeline.Event>
-                <Timeline.Separator>
-                    <Timeline.Marker />
-                    <Timeline.Connector />
-                </Timeline.Separator>
-                <Timeline.Content>Event</Timeline.Content>
-            </Timeline.Event>
-        </Timeline.Root>
-        <Rating.Root value={1}>
-            <Rating.Option value={1} index={0}>
-                <Rating.On>On</Rating.On>
-                <Rating.Off>Off</Rating.Off>
-            </Rating.Option>
-        </Rating.Root>
-        <ToggleSwitch.Root checked>
-            <ToggleSwitch.Control>
-                <ToggleSwitch.Handle />
-            </ToggleSwitch.Control>
-        </ToggleSwitch.Root>
-        <InputPassword value='secret' readOnly />
-        <CratisDialog title='Compatibility' unstyled>
-            Content
-        </CratisDialog>
-        <DataTable.Root data={[{ name: 'Ada' }]}>
-            <DataTable.TableContainer>
-                <DataTable.Table>
-                    <DataTable.THead>
-                        <DataTable.THeadRow>
-                            <DataTable.THeadCell>Name</DataTable.THeadCell>
-                        </DataTable.THeadRow>
-                    </DataTable.THead>
-                    <DataTable.TBody>
-                        {({ item, index }) => (
-                            <DataTable.Row index={index}>
-                                <DataTable.Cell>{item.name}</DataTable.Cell>
-                            </DataTable.Row>
-                        )}
-                    </DataTable.TBody>
-                </DataTable.Table>
-            </DataTable.TableContainer>
-        </DataTable.Root>
-        <Stepper.Root value='contract'>
-            <Stepper.List>
-                <Stepper.Step value='contract'>
-                    <Stepper.Header>
-                        <Stepper.Number>1</Stepper.Number>
-                        <Stepper.Title>Contract</Stepper.Title>
-                    </Stepper.Header>
-                    <Stepper.Separator />
-                </Stepper.Step>
-            </Stepper.List>
-            <Stepper.Panels>
-                <Stepper.Panel value='contract'>Panel</Stepper.Panel>
-            </Stepper.Panels>
-        </Stepper.Root>
-    </>
-);
-
-describe('when rendering the supported PrimeReact 11 pass-through surface', () => {
-    let root: Root;
-    let container: HTMLDivElement;
-
-    beforeEach(async () => {
-        // SAFETY: Vitest's jsdom global exposes React's test-only act hook at runtime.
-        (
-            globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
-        ).IS_REACT_ACT_ENVIRONMENT = true;
-        // SAFETY: jsdom may omit ResizeObserver, and PrimeReact only calls this standard observer shape.
-        (globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver ??= class {
-            observe() {
-                return undefined;
-            }
-            unobserve() {
-                return undefined;
-            }
-            disconnect() {
-                return undefined;
-            }
-        };
-
-        container = document.createElement('div');
-        document.body.append(container);
-        root = createRoot(container);
-
-        await act(async () => {
-            root.render(
-                <CratisComponentsProvider
-                    value={{
-                        unstyled: true,
-                        pt: primeReact11PassThroughSentinelPreset,
-                    }}
-                >
-                    <SupportedSurface />
-                </CratisComponentsProvider>,
-            );
-        });
-    });
-
-    afterEach(async () => {
-        await act(async () => root.unmount());
-        container.remove();
-    });
-
-    it('should honor every committed slot and structural marker', () => {
-        expect(() => assertPrimeReact11PassThroughCompatibility(document)).not.to.throw();
-    });
-});
diff --git a/Source/Compatibility/for_primeReact11PassThroughSentinelPreset/when_components_share_a_global_key.ts b/Source/Compatibility/for_primeReact11PassThroughSentinelPreset/when_components_share_a_global_key.ts
deleted file mode 100644
index cb29a239..00000000
--- a/Source/Compatibility/for_primeReact11PassThroughSentinelPreset/when_components_share_a_global_key.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-// Copyright (c) Cratis. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-
-import { expect } from 'chai';
-import { describe, it } from 'vitest';
-import {
-    primeReact11PassThroughSentinelAttribute,
-    primeReact11PassThroughSentinelPreset,
-} from '../primeReact11PassThroughSentinelPreset';
-
-describe('when components share a global pass-through key', () => {
-    it('should retain every component sentinel', () => {
-        const inputText = primeReact11PassThroughSentinelPreset.inputtext as Record<
-            string,
-            Record<string, string>
-        >;
-
-        expect(inputText.root[primeReact11PassThroughSentinelAttribute]).to.equal(
-            'inputtext.root inputpassword.root',
-        );
-    });
-});
diff --git a/Source/Compatibility/index.ts b/Source/Compatibility/index.ts
deleted file mode 100644
index 544f0726..00000000
--- a/Source/Compatibility/index.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-// Copyright (c) Cratis. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-
-export { assertPrimeReact11PassThroughCompatibility } from './assertPrimeReact11PassThroughCompatibility';
-export { components3PrimeReact11PassThroughContract } from './components3PrimeReact11PassThroughContract';
-export type { PrimeReact11PassThroughComponent } from './PrimeReact11PassThroughComponent';
-export {
-    primeReact11PassThroughSentinelAttribute,
-    primeReact11PassThroughSentinelPreset,
-} from './primeReact11PassThroughSentinelPreset';
diff --git a/Source/Compatibility/primeReact11PassThroughSentinelPreset.ts b/Source/Compatibility/primeReact11PassThroughSentinelPreset.ts
deleted file mode 100644
index 8359e915..00000000
--- a/Source/Compatibility/primeReact11PassThroughSentinelPreset.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-// Copyright (c) Cratis. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-
-import type { CratisComponentsConfig } from '../Common/CratisComponentsProvider';
-import { components3PrimeReact11PassThroughContract } from './components3PrimeReact11PassThroughContract';
-
-/** Attribute used to prove that a pass-through slot reached rendered output. */
-export const primeReact11PassThroughSentinelAttribute = 'data-cratis-pt-slot';
-
-type SentinelPresetNode = {
-    [key: string]: SentinelPresetNode | string;
-};
-
-type SentinelPresetMap = Map<string, SentinelPresetMap | string>;
-
-const nodeAt = (root: SentinelPresetMap, path: readonly string[]) => {
-    let current = root;
-
-    for (const segment of path) {
-        const existing = current.get(segment);
-        if (typeof existing === 'string') {
-            throw new Error(`Cannot add pass-through entries below ${path.join('.')}.`);
-        }
-
-        const child = existing ?? new Map<string, SentinelPresetMap | string>();
-        current.set(segment, child);
-        current = child;
-    }
-
-    return current;
-};
-
-const toPresetNode = (source: SentinelPresetMap): SentinelPresetNode => {
-    const entries = Array.from(
-        source,
-        ([key, value]) =>
-            [key, value instanceof Map ? toPresetNode(value) : value] as const,
-    );
-
-    // SAFETY: Every Map value is recursively converted to the declared string-or-node shape.
-    return Object.fromEntries(entries) as SentinelPresetNode;
-};
-
-const createSentinelPreset = () => {
-    const preset: SentinelPresetMap = new Map();
-
-    for (const [component, contract] of Object.entries(
-        components3PrimeReact11PassThroughContract.components,
-    )) {
-        const target = nodeAt(preset, contract.globalKey.split('.'));
-
-        for (const slot of contract.slots) {
-            const slotTarget = nodeAt(target, [slot]);
-            const existing = slotTarget.get(primeReact11PassThroughSentinelAttribute);
-            const sentinel = `${component}.${slot}`;
-            slotTarget.set(
-                primeReact11PassThroughSentinelAttribute,
-                typeof existing === 'string' ? `${existing} ${sentinel}` : sentinel,
-            );
-        }
-    }
-
-    return toPresetNode(preset);
-};
-
-/**
- * A non-visual PrimeReact 11 `pt` preset for compatibility tests.
- *
- * Apply this preset globally with `unstyled: true`, render the supported components and then call
- * {@link assertPrimeReact11PassThroughCompatibility}. The custom data attributes are intentionally
- * inert and can coexist with additional consumer pass-through entries.
- */
-export const primeReact11PassThroughSentinelPreset =
-    createSentinelPreset() as NonNullable<CratisComponentsConfig['pt']> &
-        SentinelPresetNode;
diff --git a/Source/DataPage/DataPage.tsx b/Source/DataPage/DataPage.tsx
index 79b19f40..1d1a7769 100644
--- a/Source/DataPage/DataPage.tsx
+++ b/Source/DataPage/DataPage.tsx
@@ -8,7 +8,7 @@ import { ActionMenubar, type ActionMenuItem } from '../Common/ActionMenubar';
 import type { ButtonParts } from '../Common/Button';
 import { type IObservableQueryFor, type IQueryFor, QueryFor } from '@cratis/arc/queries';
 import { DataTableForObservableQuery } from '../DataTables/DataTableForObservableQuery';
-import type { DataTableRootProps } from '@primereact/types/primitive/datatable';
+import type { DataTableParts } from '../DataTables/DataTableCore';
 import { DataTableForQuery } from '../DataTables/DataTableForQuery';
 import type { DataTableFilterMeta } from '../DataTables/DataTableFilterMeta';
 import type { DataTableSelectionChangeEvent } from '../DataTables/DataTableSelectionChangeEvent';
@@ -300,11 +300,11 @@ export interface DataPageProps<
      */
     tableClassName?: string;
 
-    /** PrimeReact pass-through configuration applied to the inner DataTable. */
-    tablePt?: DataTableRootProps['pt'];
+    /** Cratis-owned per-part attributes applied to the inner table. */
+    tablePt?: DataTableParts;
 
-    /** PrimeReact pass-through options applied to the inner DataTable. */
-    tablePtOptions?: DataTableRootProps['ptOptions'];
+    /** Retained for source compatibility; Cratis parts always merge. */
+    tablePtOptions?: object;
 
     /** When true, disables every base PrimeReact style on the inner DataTable. */
     tableUnstyled?: boolean;
diff --git a/Source/DataTables/ColumnFilterMenu.css b/Source/DataTables/ColumnFilterMenu.css
index cef92617..e56be27d 100644
--- a/Source/DataTables/ColumnFilterMenu.css
+++ b/Source/DataTables/ColumnFilterMenu.css
@@ -18,10 +18,19 @@
     color: var(--cratis-text-color);
 }
 
-.cratis-filter-trigger--active {
+.cratis-filter-trigger[data-active='true'] {
     color: var(--cratis-primary-color);
 }
 
+.cratis-filter-trigger:focus-visible {
+    outline: none;
+    box-shadow: var(--cratis-focus-ring);
+}
+
+.cratis-filter-popover {
+    z-index: 1250;
+}
+
 .cratis-filter-menu {
     display: flex;
     flex-direction: column;
@@ -34,6 +43,22 @@
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
 }
 
+.cratis-filter-menu__input {
+    min-height: 2.5rem;
+    padding: 0.5rem 0.7rem;
+    border: 1px solid var(--cratis-surface-border);
+    border-radius: var(--cratis-border-radius);
+    background: var(--cratis-surface-card);
+    color: var(--cratis-text-color);
+    font: inherit;
+}
+
+.cratis-filter-menu__input:focus-visible {
+    outline: none;
+    border-color: var(--cratis-primary-color);
+    box-shadow: var(--cratis-focus-ring);
+}
+
 .cratis-filter-menu-actions {
     display: flex;
     justify-content: space-between;
diff --git a/Source/DataTables/ColumnFilterMenu.tsx b/Source/DataTables/ColumnFilterMenu.tsx
index 4a68cf5d..09635713 100644
--- a/Source/DataTables/ColumnFilterMenu.tsx
+++ b/Source/DataTables/ColumnFilterMenu.tsx
@@ -1,36 +1,29 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import type { ReactNode, SyntheticEvent } from 'react';
-import { DataTable } from 'primereact/datatable';
-import { Popover } from 'primereact/popover';
-import { InputText } from 'primereact/inputtext';
-import { InputNumber } from 'primereact/inputnumber';
-import type { InputNumberRootValueChangeEvent } from '@primereact/types/primitive/inputnumber';
-import type { DataTableFilterExposes } from '@primereact/types/primitive/datatable';
-import { Button } from 'primereact/button';
-import { Dropdown } from '../Dropdown/Dropdown';
+import { useEffect, useState, type ReactNode, type SyntheticEvent } from 'react';
+import { Button as AriaButton } from 'react-aria-components/Button';
+import { Dialog as AriaDialog, DialogTrigger } from 'react-aria-components/Dialog';
+import { Popover } from 'react-aria-components/Popover';
+import { Button } from '../Common/Button';
 import { DatePickerInput } from '../Common/DatePickerInput';
-import type { DataTableFilterMatchMode } from './DataTableFilterMeta';
+import { Dropdown } from '../Dropdown/Dropdown';
+import {
+    DataTableFilterMatchMode,
+    type DataTableFilterConstraint,
+    type DataTableFilterMatchMode as FilterMatchMode,
+} from './DataTableFilterMeta';
 
-/** The value kind a {@link ColumnFilterMenu} edits, which drives the match modes and the input control. */
 export type ColumnFilterDataType = 'text' | 'numeric' | 'date' | 'boolean';
 
-/** Localizable chrome rendered by {@link ColumnFilterMenu}. */
 export interface ColumnFilterMenuLabels {
-    /** Builds the accessible name for a column's filter trigger. */
     filterTriggerAriaLabel: (field: string) => string;
-    /** Clear action label. */
     clear: string;
-    /** Apply action label. */
     apply: string;
-    /** Boolean true option label. */
     true: string;
-    /** Boolean false option label. */
     false: string;
 }
 
-/** Default English labels for {@link ColumnFilterMenu}. */
 export const defaultColumnFilterMenuLabels: ColumnFilterMenuLabels = {
     filterTriggerAriaLabel: (field) => `Filter by ${field}`,
     clear: 'Clear',
@@ -39,60 +32,73 @@ export const defaultColumnFilterMenuLabels: ColumnFilterMenuLabels = {
     false: 'False',
 };
 
-/** State and actions supplied to a custom column filter editor. */
 export interface ColumnFilterElementOptions {
-    /** The row field being filtered. */
     field: string;
-    /** Current draft value. */
     value: unknown;
-    /** Current draft match mode. */
-    matchMode: DataTableFilterMatchMode;
-    /** Updates the draft without applying it. */
-    onChange: (value: unknown, matchMode?: DataTableFilterMatchMode) => void;
-    /** Applies the current draft. */
+    matchMode: FilterMatchMode;
+    onChange: (value: unknown, matchMode?: FilterMatchMode) => void;
     onApply: (event: SyntheticEvent) => void;
-    /** Clears the current field filter. */
     onClear: (event: SyntheticEvent) => void;
 }
 
-/** Renders a custom value editor inside a column filter menu. */
 export type ColumnFilterElement = (options: ColumnFilterElementOptions) => ReactNode;
 
-/** Props for {@link ColumnFilterMenu}. */
 export interface ColumnFilterMenuProps {
-    /** The row field this menu filters. */
     field: string;
-    /** The value kind — selects the match modes and the input control. Defaults to `'text'`. */
     dataType?: ColumnFilterDataType;
-    /** Placeholder for the value input. */
     placeholder?: string;
-    /** Whether to show the match-mode selector. Defaults to `true`. */
     showMatchModes?: boolean;
-    /** Custom value editor rendered instead of the built-in editor. */
     filterElement?: ColumnFilterElement;
-    /** Overrides the default English menu labels. */
     labels?: Partial<ColumnFilterMenuLabels>;
+    constraint?: DataTableFilterConstraint;
+    onApply: (constraint: DataTableFilterConstraint) => void;
+    onClear: () => void;
+}
+
+interface MatchModeOption {
+    label: string;
+    value: FilterMatchMode;
 }
 
-/**
- * The filter affordance for a single data-table column: a filter icon in the
- * header that opens a popover menu with a match-mode selector, a value input
- * (text / number / date / boolean), and Clear / Apply actions. Restores the
- * PrimeReact 10 `filterDisplay="menu"` experience on PrimeReact 11's headless
- * `DataTable.Filter` state machine — which manages the filter draft and the
- * actual client-side row filtering, but renders none of the chrome — portaled
- * through `primereact/popover`.
- *
- * Rendered by {@link DataTableCore} inside a `THeadCell` for any `<Column>`
- * with `filter` set. Must live inside a `DataTable.Root` subtree.
- */
-const eventForFilter = (event?: SyntheticEvent): SyntheticEvent => {
-    if (event) return event;
-
-    // SAFETY: PrimeReact's draft change handler does not inspect the event for programmatic editors.
-    return {} as SyntheticEvent;
+const optionsFor = (dataType: ColumnFilterDataType): MatchModeOption[] => {
+    switch (dataType) {
+        case 'numeric':
+            return [
+                ['Equals', DataTableFilterMatchMode.Equals],
+                ['Not equals', DataTableFilterMatchMode.NotEquals],
+                ['Less than', DataTableFilterMatchMode.LessThan],
+                ['Less than or equal', DataTableFilterMatchMode.LessThanOrEqual],
+                ['Greater than', DataTableFilterMatchMode.GreaterThan],
+                ['Greater than or equal', DataTableFilterMatchMode.GreaterThanOrEqual],
+            ].map(([label, value]) => ({ label, value }) as MatchModeOption);
+        case 'date':
+            return [
+                ['Date is', DataTableFilterMatchMode.DateIs],
+                ['Date is not', DataTableFilterMatchMode.DateIsNot],
+                ['Before', DataTableFilterMatchMode.DateBefore],
+                ['After', DataTableFilterMatchMode.DateAfter],
+            ].map(([label, value]) => ({ label, value }) as MatchModeOption);
+        case 'boolean':
+            return [{ label: 'Equals', value: DataTableFilterMatchMode.Equals }];
+        default:
+            return [
+                ['Contains', DataTableFilterMatchMode.Contains],
+                ['Starts with', DataTableFilterMatchMode.StartsWith],
+                ['Ends with', DataTableFilterMatchMode.EndsWith],
+                ['Equals', DataTableFilterMatchMode.Equals],
+                ['Not contains', DataTableFilterMatchMode.NotContains],
+                ['Not equals', DataTableFilterMatchMode.NotEquals],
+            ].map(([label, value]) => ({ label, value }) as MatchModeOption);
+    }
+};
+
+const defaultModeFor = (dataType: ColumnFilterDataType): FilterMatchMode => {
+    if (dataType === 'text') return DataTableFilterMatchMode.Contains;
+    if (dataType === 'date') return DataTableFilterMatchMode.DateIs;
+    return DataTableFilterMatchMode.Equals;
 };
 
+/** Cratis-owned column filter popup with draft/apply behavior. */
 export const ColumnFilterMenu = ({
     field,
     dataType = 'text',
@@ -100,153 +106,154 @@ export const ColumnFilterMenu = ({
     showMatchModes = true,
     filterElement,
     labels,
-}: ColumnFilterMenuProps) => (
-    <DataTable.Filter
-        field={field}
-        display='menu'
-        dataType={dataType}
-        showOperator={false}
-        showAddButton={false}
-    >
-        {(filter: DataTableFilterExposes) => {
-            const resolvedLabels: ColumnFilterMenuLabels = {
-                filterTriggerAriaLabel:
-                    labels?.filterTriggerAriaLabel ??
-                    defaultColumnFilterMenuLabels.filterTriggerAriaLabel,
-                clear: labels?.clear ?? defaultColumnFilterMenuLabels.clear,
-                apply: labels?.apply ?? defaultColumnFilterMenuLabels.apply,
-                true: labels?.true ?? defaultColumnFilterMenuLabels.true,
-                false: labels?.false ?? defaultColumnFilterMenuLabels.false,
-            };
-            const booleanOptions = [
-                { label: resolvedLabels.true, value: true },
-                { label: resolvedLabels.false, value: false },
-            ];
-            const commit = (
-                value: unknown,
-                event?: SyntheticEvent,
-                matchMode = filter.matchMode,
-            ) => filter.onChange(eventForFilter(event), value, matchMode);
-
-            const builtInValueInput = (() => {
-                switch (dataType) {
-                    case 'numeric':
-                        return (
-                            <InputNumber.Root
-                                value={(filter.value as number | null) ?? null}
-                                onValueChange={(e: InputNumberRootValueChangeEvent) =>
-                                    commit(e.value)
-                                }
-                            >
-                                <InputNumber.Input
-                                    placeholder={placeholder}
-                                    className='w-full'
-                                />
-                            </InputNumber.Root>
-                        );
-                    case 'date':
-                        return (
-                            <DatePickerInput
-                                value={
-                                    filter.value
-                                        ? new Date(filter.value as string | number | Date)
-                                        : null
-                                }
-                                onChange={(date) => commit(date)}
-                                showIcon
-                            />
-                        );
-                    case 'boolean':
-                        return (
-                            <Dropdown
-                                value={filter.value}
-                                options={booleanOptions}
-                                optionLabel='label'
-                                optionValue='value'
-                                placeholder={placeholder}
-                                showClear
-                                onChange={(e) => commit(e.value)}
-                            />
-                        );
-                    default:
-                        return (
-                            <InputText
-                                value={(filter.value as string) ?? ''}
-                                placeholder={placeholder}
-                                className='w-full'
-                                onChange={(e) => commit(e.target.value, e)}
-                            />
-                        );
+    constraint,
+    onApply,
+    onClear,
+}: ColumnFilterMenuProps) => {
+    const [draftValue, setDraftValue] = useState<unknown>(constraint?.value ?? null);
+    const [draftMode, setDraftMode] = useState<FilterMatchMode>(
+        constraint?.matchMode ?? defaultModeFor(dataType),
+    );
+
+    useEffect(() => {
+        setDraftValue(constraint?.value ?? null);
+        setDraftMode(constraint?.matchMode ?? defaultModeFor(dataType));
+    }, [constraint, dataType]);
+
+    const resolvedLabels: ColumnFilterMenuLabels = {
+        filterTriggerAriaLabel:
+            labels?.filterTriggerAriaLabel ??
+            defaultColumnFilterMenuLabels.filterTriggerAriaLabel,
+        clear: labels?.clear ?? defaultColumnFilterMenuLabels.clear,
+        apply: labels?.apply ?? defaultColumnFilterMenuLabels.apply,
+        true: labels?.true ?? defaultColumnFilterMenuLabels.true,
+        false: labels?.false ?? defaultColumnFilterMenuLabels.false,
+    };
+    const modeOptions = optionsFor(dataType);
+    if (!modeOptions.some((option) => option.value === draftMode)) {
+        modeOptions.push({ label: String(draftMode), value: draftMode });
+    }
+
+    const clear = (event?: SyntheticEvent) => {
+        setDraftValue(null);
+        onClear();
+        event?.preventDefault();
+    };
+    const apply = (event?: SyntheticEvent) => {
+        onApply({ value: draftValue, matchMode: draftMode });
+        event?.preventDefault();
+    };
+
+    const valueInput = filterElement
+        ? filterElement({
+              field,
+              value: draftValue,
+              matchMode: draftMode,
+              onChange: (value, matchMode) => {
+                  setDraftValue(value);
+                  if (matchMode) setDraftMode(matchMode);
+              },
+              onApply: apply,
+              onClear: clear,
+          })
+        : (() => {
+              switch (dataType) {
+                  case 'numeric':
+                      return (
+                          <input
+                              type='number'
+                              value={typeof draftValue === 'number' ? draftValue : ''}
+                              placeholder={placeholder}
+                              className='cratis-filter-menu__input'
+                              onChange={(event) =>
+                                  setDraftValue(
+                                      event.target.value === ''
+                                          ? null
+                                          : event.target.valueAsNumber,
+                                  )
+                              }
+                          />
+                      );
+                  case 'date':
+                      return (
+                          <DatePickerInput
+                              value={draftValue instanceof Date ? draftValue : null}
+                              onChange={setDraftValue}
+                              showIcon
+                              aria-label={
+                                  placeholder ??
+                                  resolvedLabels.filterTriggerAriaLabel(field)
+                              }
+                          />
+                      );
+                  case 'boolean':
+                      return (
+                          <Dropdown
+                              value={draftValue}
+                              options={[
+                                  { label: resolvedLabels.true, value: true },
+                                  { label: resolvedLabels.false, value: false },
+                              ]}
+                              placeholder={placeholder}
+                              showClear
+                              onChange={(event) => setDraftValue(event.value)}
+                              aria-label={
+                                  placeholder ??
+                                  resolvedLabels.filterTriggerAriaLabel(field)
+                              }
+                          />
+                      );
+                  default:
+                      return (
+                          <input
+                              value={typeof draftValue === 'string' ? draftValue : ''}
+                              placeholder={placeholder}
+                              className='cratis-filter-menu__input'
+                              onChange={(event) => setDraftValue(event.target.value)}
+                          />
+                      );
+              }
+          })();
+
+    return (
+        <DialogTrigger>
+            <AriaButton
+                aria-label={resolvedLabels.filterTriggerAriaLabel(field)}
+                className='cratis-filter-trigger'
+                data-active={
+                    (constraint?.value !== null &&
+                        constraint?.value !== undefined &&
+                        constraint?.value !== '') ||
+                    undefined
                 }
-            })();
-            const valueInput = filterElement
-                ? filterElement({
-                      field,
-                      value: filter.value,
-                      // SAFETY: PrimeReact stores the Cratis vocabulary's runtime string values unchanged.
-                      matchMode: filter.matchMode as DataTableFilterMatchMode,
-                      onChange: (value, matchMode) => commit(value, undefined, matchMode),
-                      onApply: filter.onApply,
-                      onClear: filter.onClear,
-                  })
-                : builtInValueInput;
-
-            return (
-                <Popover.Root
-                    open={filter.overlayVisible}
-                    onOpenChange={(event) =>
-                        event.value ? filter.onShowOverlay() : filter.onHideOverlay()
-                    }
+                data-cratis-part='filter-trigger'
+            >
+                <span aria-hidden='true'>⌕</span>
+            </AriaButton>
+            <Popover className='cratis-filter-popover' placement='bottom end'>
+                <AriaDialog
+                    className='cratis-filter-menu'
+                    aria-label={resolvedLabels.filterTriggerAriaLabel(field)}
                 >
-                    <Popover.Trigger
-                        aria-label={resolvedLabels.filterTriggerAriaLabel(field)}
-                        className={
-                            filter.isActive
-                                ? 'cratis-filter-trigger cratis-filter-trigger--active'
-                                : 'cratis-filter-trigger'
-                        }
-                    >
-                        <i className='pi pi-filter' />
-                    </Popover.Trigger>
-                    <Popover.Portal>
-                        <Popover.Positioner>
-                            <Popover.Popup>
-                                <Popover.Content>
-                                    <div className='cratis-filter-menu'>
-                                        {showMatchModes && (
-                                            <Dropdown
-                                                value={filter.matchMode}
-                                                options={filter.matchModeOptions}
-                                                optionLabel='label'
-                                                optionValue='value'
-                                                onChange={(e) =>
-                                                    filter.onChange(
-                                                        eventForFilter(e.originalEvent),
-                                                        filter.value,
-                                                        e.value as string,
-                                                    )
-                                                }
-                                            />
-                                        )}
-                                        {valueInput}
-                                        <div className='cratis-filter-menu-actions'>
-                                            <Button
-                                                variant='outlined'
-                                                onClick={(e) => filter.onClear(e)}
-                                            >
-                                                <span>{resolvedLabels.clear}</span>
-                                            </Button>
-                                            <Button onClick={(e) => filter.onApply(e)}>
-                                                <span>{resolvedLabels.apply}</span>
-                                            </Button>
-                                        </div>
-                                    </div>
-                                </Popover.Content>
-                            </Popover.Popup>
-                        </Popover.Positioner>
-                    </Popover.Portal>
-                </Popover.Root>
-            );
-        }}
-    </DataTable.Filter>
-);
+                    {showMatchModes && (
+                        <Dropdown
+                            value={draftMode}
+                            options={modeOptions}
+                            optionLabel='label'
+                            optionValue='value'
+                            onChange={(event) =>
+                                setDraftMode(event.value as FilterMatchMode)
+                            }
+                            aria-label='Match mode'
+                        />
+                    )}
+                    {valueInput}
+                    <div className='cratis-filter-menu-actions'>
+                        <Button outlined onClick={clear} label={resolvedLabels.clear} />
+                        <Button onClick={apply} label={resolvedLabels.apply} />
+                    </div>
+                </AriaDialog>
+            </Popover>
+        </DialogTrigger>
+    );
+};
diff --git a/Source/DataTables/DataTableCore.css b/Source/DataTables/DataTableCore.css
index 9945ec1f..5465de82 100644
--- a/Source/DataTables/DataTableCore.css
+++ b/Source/DataTables/DataTableCore.css
@@ -1,13 +1,107 @@
 /* Copyright (c) Cratis. All rights reserved. */
 /* Licensed under the MIT license. See LICENSE file in the project root for full license information. */
 
+.cratis-datatable {
+    width: 100%;
+    color: var(--cratis-text-color);
+}
 .cratis-datatable-header-cell {
     display: flex;
+    min-width: 0;
     align-items: center;
-    gap: 0.25rem;
+    justify-content: space-between;
+    gap: 0.35rem;
 }
-
 .cratis-datatable-search {
     padding: 0.5rem;
     border-bottom: 1px solid var(--cratis-surface-border);
 }
+.cratis-datatable-search__input {
+    width: 100%;
+    min-height: 2.5rem;
+    padding: 0.5rem 0.7rem;
+    border: 1px solid var(--cratis-surface-border);
+    border-radius: var(--cratis-border-radius);
+    background: var(--cratis-surface-card);
+    color: var(--cratis-text-color);
+    font: inherit;
+}
+.cratis-datatable-search__input:focus-visible {
+    outline: none;
+    border-color: var(--cratis-primary-color);
+    box-shadow: var(--cratis-focus-ring);
+}
+.cratis-datatable__container {
+    width: 100%;
+    overflow-x: auto;
+}
+.cratis-datatable__table {
+    width: 100%;
+    border-spacing: 0;
+    border-collapse: collapse;
+}
+.cratis-datatable__header-cell {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    padding: 0.65rem 0.75rem;
+    border-bottom: 1px solid var(--cratis-surface-border);
+    background: var(--cratis-surface-section);
+    color: var(--cratis-text-color);
+    text-align: start;
+    font-size: 0.8rem;
+    font-weight: 700;
+}
+.cratis-datatable__sort {
+    display: inline-flex;
+    padding: 0;
+    align-items: center;
+    gap: 0.35rem;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    font-weight: inherit;
+    cursor: pointer;
+}
+.cratis-datatable__sort:focus-visible {
+    outline: none;
+    border-radius: 0.2rem;
+    box-shadow: var(--cratis-focus-ring);
+}
+.cratis-datatable__cell {
+    padding: 0.65rem 0.75rem;
+    border-bottom: 1px solid var(--cratis-surface-border);
+    vertical-align: middle;
+}
+.cratis-datatable__row {
+    transition: background-color 100ms ease;
+}
+.cratis-datatable__row:hover {
+    background: var(--cratis-surface-hover);
+}
+.cratis-datatable__row[data-selected='true'] {
+    background: var(--cratis-highlight-bg);
+    color: var(--cratis-highlight-text-color);
+}
+.cratis-datatable__empty-cell {
+    padding: 2rem 1rem;
+    color: var(--cratis-text-color-secondary);
+    text-align: center;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .cratis-datatable__row {
+        transition: none;
+    }
+}
+@media (forced-colors: active) {
+    .cratis-datatable-search__input,
+    .cratis-datatable__header-cell,
+    .cratis-datatable__cell {
+        border-color: CanvasText;
+    }
+    .cratis-datatable__row[data-selected='true'] {
+        outline: 2px solid Highlight;
+    }
+}
diff --git a/Source/DataTables/DataTableCore.tsx b/Source/DataTables/DataTableCore.tsx
index 1ebf6237..10e45bda 100644
--- a/Source/DataTables/DataTableCore.tsx
+++ b/Source/DataTables/DataTableCore.tsx
@@ -1,93 +1,77 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import React, { useMemo, useState, type CSSProperties, type ReactNode } from 'react';
-import { DataTable as PrimeDataTable } from 'primereact/datatable';
-import { InputText } from 'primereact/inputtext';
-import { registerMatcher, unregisterMatcher } from '@primereact/hooks/use-filter';
-import type { DataTableRootProps } from '@primereact/types/primitive/datatable';
-import type {
-    UseDataTableSelectionEvent,
-    UseDataTableRowMouseEvent,
-    UseDataTableFilterEvent,
-} from '@primereact/types/headless/datatable';
+import React, {
+    useMemo,
+    useState,
+    type CSSProperties,
+    type HTMLAttributes,
+    type ReactNode,
+    type TableHTMLAttributes,
+    type TdHTMLAttributes,
+    type ThHTMLAttributes,
+} from 'react';
 import type { ColumnProps } from './Column';
 import { ColumnFilterMenu } from './ColumnFilterMenu';
-import { selectionKeysForRow, rowFromSelectionKeys } from './selectionKeys';
 import type { DataTableSelectionChangeEvent } from './DataTableSelectionChangeEvent';
-import type { DataTableFilterMeta } from './DataTableFilterMeta';
-import { attachDataTableFilterMatcherAdapter } from './DataTableFilterMatcherRegistry';
-
-attachDataTableFilterMatcherAdapter({
-    register: registerMatcher,
-    unregister: unregisterMatcher,
-});
+import {
+    DataTableFilterMatchMode,
+    type DataTableFilterConstraint,
+    type DataTableFilterMeta,
+} from './DataTableFilterMeta';
+import { resolveDataTableFilterMatcher } from './DataTableFilterMatcherRegistry';
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-/**
- * Row-click event surfaced by {@link DataTableCore}.
- *
- * @typeParam TData - The row type.
- */
 export interface DataTableRowClickEvent<TData> {
-    /** The clicked row. */
     data: TData;
-    /** The row's index in the current page. */
     index: number;
 }
 
-/**
- * Props for {@link DataTableCore}.
- *
- * @typeParam TData - The row type.
- */
+/** Stable Cratis-owned parts for styling a {@link DataTableCore}. */
+export interface DataTableParts {
+    root?: HTMLAttributes<HTMLDivElement>;
+    search?: HTMLAttributes<HTMLDivElement>;
+    searchInput?: React.InputHTMLAttributes<HTMLInputElement>;
+    tableContainer?: HTMLAttributes<HTMLDivElement>;
+    table?: TableHTMLAttributes<HTMLTableElement>;
+    head?: HTMLAttributes<HTMLTableSectionElement>;
+    headerRow?: HTMLAttributes<HTMLTableRowElement>;
+    headerCell?: ThHTMLAttributes<HTMLTableCellElement>;
+    body?: HTMLAttributes<HTMLTableSectionElement>;
+    row?: HTMLAttributes<HTMLTableRowElement>;
+    cell?: TdHTMLAttributes<HTMLTableCellElement>;
+    emptyRow?: HTMLAttributes<HTMLTableRowElement>;
+    emptyCell?: TdHTMLAttributes<HTMLTableCellElement>;
+}
+
 export interface DataTableCoreProps<TData extends object> {
-    /** The rows to render (already paged by the caller). */
     data: TData[];
-    /** `<Column>` elements describing the columns. */
     children?: ReactNode;
-    /** The row property uniquely identifying each row — required for selection. */
     dataKey?: string;
-    /** Content shown when there are no rows. */
     emptyMessage: ReactNode;
-    /** Enables single-row selection by clicking a row. */
     selectionMode?: 'single';
-    /** Accessible name for each row's selection control. Override to localize. Defaults to `'Select row'`. */
     selectionAriaLabel?: string;
-    /** The currently-selected row. */
     selection?: TData | null;
-    /** Invoked when the selected row changes. */
     onSelectionChange?: (event: DataTableSelectionChangeEvent<TData>) => void;
-    /** Invoked when a row is clicked. */
     onRowClick?: (event: DataTableRowClickEvent<TData>) => void;
-    /** Computes an extra class name for each row. */
     rowClassName?: (rowData: TData) => string;
-    /** The fields the global search term is matched against. When set, a search box is shown above the table. */
     globalFilterFields?: string[];
-    /** Placeholder for the global search box. */
     globalSearchPlaceholder?: string;
-    /** Initial per-column filter state. */
     defaultFilters?: DataTableFilterMeta;
-    /** Invoked whenever the per-column filter state changes. */
     onFilter?: (filters: DataTableFilterMeta) => void;
-    /** Renders the table body in a scroll region of {@link scrollHeight}. */
     scrollable?: boolean;
-    /** The height of the scroll region when {@link scrollable} is set. */
     scrollHeight?: string;
-    /** Extra class name for the table root. */
     className?: string;
-    /** Inline style for the table root. */
     style?: CSSProperties;
-    /** PrimeReact pass-through configuration for the underlying DataTable. */
-    pt?: DataTableRootProps['pt'];
-    /** PrimeReact pass-through options for the underlying DataTable. */
-    ptOptions?: DataTableRootProps['ptOptions'];
-    /** When true, disables every base PrimeReact style on the DataTable. */
+    /** Cratis-owned per-part attributes. */
+    pt?: DataTableParts;
+    /** Retained for source compatibility; Cratis parts always merge. */
+    ptOptions?: object;
+    /** Retained for source compatibility; consumers always own the CSS. */
     unstyled?: boolean;
 }
 
-/** Parses column definitions from `<Column>` children. */
 const useColumns = (children: ReactNode): React.ReactElement<ColumnProps<any>>[] =>
     useMemo(
         () =>
@@ -97,32 +81,110 @@ const useColumns = (children: ReactNode): React.ReactElement<ColumnProps<any>>[]
         [children],
     );
 
+type CellValue =
+    string | number | boolean | bigint | symbol | Date | object | null | undefined;
+
+const asCellValue = (value: unknown): CellValue =>
+    typeof value === 'function' ? String(value) : (value as CellValue);
+
+const valueAtPath = (
+    row: Record<string, unknown>,
+    path: string | undefined,
+): CellValue => {
+    if (!path) return undefined;
+    let current: CellValue = row;
+    for (const segment of path.split('.')) {
+        if (current === null || typeof current !== 'object' || !(segment in current))
+            return undefined;
+        current = asCellValue((current as Record<string, unknown>)[segment]);
+    }
+    return current;
+};
+
 const renderCellContent = (
     column: ColumnProps<any>,
     row: Record<string, unknown>,
 ): ReactNode => {
     if (column.body) return column.body(row);
-    if (column.field) {
-        const value = row[column.field];
-        return value == null ? '' : String(value);
+    const value = valueAtPath(row, column.field);
+    return value == null ? '' : String(value);
+};
+
+const dateNumber = (value: unknown) => {
+    const date = value instanceof Date ? value : new Date(String(value));
+    return Number.isNaN(date.getTime()) ? undefined : date.setHours(0, 0, 0, 0);
+};
+
+const builtInMatches = (
+    value: unknown,
+    constraint: DataTableFilterConstraint,
+): boolean => {
+    const filter = constraint.value;
+    const mode = constraint.matchMode ?? DataTableFilterMatchMode.Contains;
+    if (filter === null || filter === undefined || filter === '') return true;
+
+    const valueText = String(value ?? '').toLocaleLowerCase();
+    const filterText = String(filter).toLocaleLowerCase();
+    const valueNumber = typeof value === 'number' ? value : Number(value);
+    const filterNumber = typeof filter === 'number' ? filter : Number(filter);
+
+    switch (mode) {
+        case DataTableFilterMatchMode.StartsWith:
+            return valueText.startsWith(filterText);
+        case DataTableFilterMatchMode.Contains:
+            return valueText.includes(filterText);
+        case DataTableFilterMatchMode.NotContains:
+            return !valueText.includes(filterText);
+        case DataTableFilterMatchMode.EndsWith:
+            return valueText.endsWith(filterText);
+        case DataTableFilterMatchMode.Equals:
+            return Object.is(value, filter) || valueText === filterText;
+        case DataTableFilterMatchMode.NotEquals:
+            return !(Object.is(value, filter) || valueText === filterText);
+        case DataTableFilterMatchMode.In:
+            return Array.isArray(filter) && filter.some((item) => Object.is(item, value));
+        case DataTableFilterMatchMode.Between:
+            return (
+                Array.isArray(filter) &&
+                filter.length >= 2 &&
+                valueNumber >= Number(filter[0]) &&
+                valueNumber <= Number(filter[1])
+            );
+        case DataTableFilterMatchMode.LessThan:
+            return valueNumber < filterNumber;
+        case DataTableFilterMatchMode.LessThanOrEqual:
+            return valueNumber <= filterNumber;
+        case DataTableFilterMatchMode.GreaterThan:
+            return valueNumber > filterNumber;
+        case DataTableFilterMatchMode.GreaterThanOrEqual:
+            return valueNumber >= filterNumber;
+        case DataTableFilterMatchMode.DateIs:
+            return dateNumber(value) === dateNumber(filter);
+        case DataTableFilterMatchMode.DateIsNot:
+            return dateNumber(value) !== dateNumber(filter);
+        case DataTableFilterMatchMode.DateBefore:
+            return (dateNumber(value) ?? Infinity) < (dateNumber(filter) ?? -Infinity);
+        case DataTableFilterMatchMode.DateAfter:
+            return (dateNumber(value) ?? -Infinity) > (dateNumber(filter) ?? Infinity);
+        default:
+            return resolveDataTableFilterMatcher(String(mode))?.(value, filter) ?? false;
     }
-    return null;
 };
 
-/**
- * The shared, query-agnostic table used by {@link DataTableForQuery},
- * {@link DataTableForObservableQuery}, and the schema editor. Rebuilds
- * PrimeReact 10's monolithic `DataTable` on PrimeReact 11's headless
- * compositional table: it reads `<Column>` children, renders the header and
- * per-row body cells, and translates PrimeReact 11's key-based selection back
- * to the row-object API callers expect.
- *
- * Paging is intentionally *not* handled here — the query wrappers own paging
- * through Arc and feed one page of rows in via `data`, so this component only
- * renders and sorts/filters the current page client-side.
- *
- * @typeParam TData - The row type.
- */
+const compareValues = (left: unknown, right: unknown): number => {
+    if (typeof left === 'number' && typeof right === 'number') return left - right;
+    if (left instanceof Date && right instanceof Date)
+        return left.getTime() - right.getTime();
+    return String(left ?? '').localeCompare(String(right ?? ''), undefined, {
+        numeric: true,
+        sensitivity: 'base',
+    });
+};
+
+const classNames = (...values: Array<string | undefined>) =>
+    values.filter(Boolean).join(' ');
+
+/** A semantic, renderer-independent data table over one already-loaded page. */
 export const DataTableCore = <TData extends object>({
     data,
     children,
@@ -143,119 +205,192 @@ export const DataTableCore = <TData extends object>({
     className,
     style,
     pt,
-    ptOptions,
-    unstyled,
 }: DataTableCoreProps<TData>) => {
     const columns = useColumns(children);
     const [filters, setFilters] = useState<DataTableFilterMeta>(defaultFilters ?? {});
-    const [globalFilter, setGlobalFilter] = useState<string>('');
-    const showGlobalSearch = !!globalFilterFields && globalFilterFields.length > 0;
+    const [globalFilter, setGlobalFilter] = useState('');
+    const [sort, setSort] = useState<{
+        field: string;
+        direction: 'ascending' | 'descending';
+    }>();
 
-    const handleFilter = (event: UseDataTableFilterEvent) => {
-        // PrimeReact's headless filter meta is looser than the typed Cratis
-        // constraint the public API exposes; narrow at this one boundary.
-        // SAFETY: DataTableCore only configures one value/match-mode constraint per field.
-        const next = event.filters as unknown as DataTableFilterMeta;
-        setFilters(next);
-        onFilter?.(next);
-    };
-
-    const keyOf = (row: TData): string | undefined =>
-        dataKey ? String((row as Record<string, unknown>)[dataKey]) : undefined;
-
-    const selectionKeys = useMemo(
-        () => selectionKeysForRow(selection, dataKey),
-        [selection, dataKey],
-    );
+    const filteredRows = useMemo(() => {
+        const term = globalFilter.trim().toLocaleLowerCase();
+        const rows = data.filter((row) => {
+            const rowValues = row as Record<string, unknown>;
+            const matchesColumns = Object.entries(filters).every(([field, constraint]) =>
+                builtInMatches(valueAtPath(rowValues, field), constraint),
+            );
+            if (!matchesColumns) return false;
+            if (!term || !globalFilterFields?.length) return true;
+            return globalFilterFields.some((field) =>
+                String(valueAtPath(rowValues, field) ?? '')
+                    .toLocaleLowerCase()
+                    .includes(term),
+            );
+        });
 
-    const handleSelectionChange = (event: UseDataTableSelectionEvent) => {
-        if (!onSelectionChange) return;
-        onSelectionChange({
-            value: rowFromSelectionKeys(event.value, data, dataKey),
-            originalEvent: event.originalEvent,
+        if (!sort) return rows;
+        return [...rows].sort((left, right) => {
+            const comparison = compareValues(
+                valueAtPath(left as Record<string, unknown>, sort.field),
+                valueAtPath(right as Record<string, unknown>, sort.field),
+            );
+            return sort.direction === 'ascending' ? comparison : -comparison;
         });
+    }, [data, filters, globalFilter, globalFilterFields, sort]);
+
+    const updateFilter = (
+        field: string,
+        constraint: DataTableFilterConstraint | undefined,
+    ) => {
+        const next = { ...filters };
+        if (constraint) next[field] = constraint;
+        else delete next[field];
+        setFilters(next);
+        onFilter?.(next);
     };
 
-    const handleRowClick = onRowClick
-        ? (event: UseDataTableRowMouseEvent) =>
-              onRowClick({ data: event.data as TData, index: event.index })
-        : undefined;
+    const keyOf = (row: TData, index: number) =>
+        dataKey
+            ? String(valueAtPath(row as Record<string, unknown>, dataKey))
+            : String(index);
+    const selectedKey =
+        selection && dataKey
+            ? String(valueAtPath(selection as Record<string, unknown>, dataKey))
+            : undefined;
 
     return (
-        <PrimeDataTable.Root
-            data={data as object[]}
-            dataKey={dataKey}
-            removableSort
-            selectionMode={selectionMode ?? null}
-            selectionKeys={selectionKeys}
-            onSelectionChange={onSelectionChange ? handleSelectionChange : undefined}
-            onRowClick={handleRowClick}
-            filters={filters}
-            onFilter={handleFilter}
-            globalFilter={globalFilter || null}
-            globalFilterFields={globalFilterFields}
-            scrollable={scrollable}
-            scrollHeight={scrollHeight}
-            className={className}
-            style={style}
-            pt={pt}
-            ptOptions={ptOptions}
-            unstyled={unstyled}
+        <div
+            {...pt?.root}
+            className={classNames('cratis-datatable', pt?.root?.className, className)}
+            style={{ ...pt?.root?.style, ...style }}
+            data-cratis-part='root'
         >
-            {showGlobalSearch && (
-                <div className='cratis-datatable-search'>
-                    <InputText
+            {!!globalFilterFields?.length && (
+                <div
+                    {...pt?.search}
+                    className={classNames(
+                        'cratis-datatable-search',
+                        pt?.search?.className,
+                    )}
+                    data-cratis-part='search'
+                >
+                    <input
+                        {...pt?.searchInput}
                         value={globalFilter}
                         placeholder={globalSearchPlaceholder}
-                        className='w-full'
+                        className={classNames(
+                            'cratis-datatable-search__input',
+                            pt?.searchInput?.className,
+                        )}
+                        data-cratis-part='search-input'
                         onChange={(event) => setGlobalFilter(event.target.value)}
                     />
                 </div>
             )}
-            <PrimeDataTable.TableContainer>
-                <PrimeDataTable.Table>
-                    <PrimeDataTable.THead>
-                        <PrimeDataTable.THeadRow>
-                            {columns.map((column, index) => (
-                                <PrimeDataTable.THeadCell
-                                    key={index}
-                                    style={column.props.headerStyle ?? column.props.style}
-                                    className={column.props.headerClassName}
-                                >
-                                    <div className='cratis-datatable-header-cell'>
-                                        {column.props.sortable && column.props.field ? (
-                                            // aria-sort belongs on the column header, not the sort button; PrimeReact 11's
-                                            // Sort part puts it on its role="button" element (invalid ARIA), so strip it here.
-                                            <PrimeDataTable.Sort
-                                                field={column.props.field}
-                                                pt={{ root: { 'aria-sort': undefined } }}
-                                            >
-                                                <PrimeDataTable.THeadTitle>
-                                                    {column.props.header}
-                                                </PrimeDataTable.THeadTitle>
-                                                <PrimeDataTable.SortIndicator match='asc'>
-                                                    {' '}
-                                                    ▲
-                                                </PrimeDataTable.SortIndicator>
-                                                <PrimeDataTable.SortIndicator match='desc'>
-                                                    {' '}
-                                                    ▼
-                                                </PrimeDataTable.SortIndicator>
-                                            </PrimeDataTable.Sort>
-                                        ) : (
-                                            // The title part, not a bare span, so a theme's column-title weight reaches it.
-                                            <PrimeDataTable.THeadTitle>
-                                                {column.props.header}
-                                            </PrimeDataTable.THeadTitle>
+            <div
+                {...pt?.tableContainer}
+                className={classNames(
+                    'cratis-datatable__container',
+                    pt?.tableContainer?.className,
+                )}
+                style={{
+                    ...pt?.tableContainer?.style,
+                    ...(scrollable
+                        ? { maxHeight: scrollHeight ?? '100%', overflow: 'auto' }
+                        : {}),
+                }}
+                data-cratis-part='table-container'
+            >
+                <table
+                    {...pt?.table}
+                    className={classNames(
+                        'cratis-datatable__table',
+                        pt?.table?.className,
+                    )}
+                    data-cratis-part='table'
+                >
+                    <thead
+                        {...pt?.head}
+                        className={classNames(
+                            'cratis-datatable__head',
+                            pt?.head?.className,
+                        )}
+                        data-cratis-part='head'
+                    >
+                        <tr
+                            {...pt?.headerRow}
+                            className={classNames(
+                                'cratis-datatable__header-row',
+                                pt?.headerRow?.className,
+                            )}
+                            data-cratis-part='header-row'
+                        >
+                            {columns.map((column, index) => {
+                                const field =
+                                    column.props.filterField ?? column.props.field;
+                                const ariaSort =
+                                    sort && sort.field === column.props.field
+                                        ? sort.direction
+                                        : undefined;
+                                return (
+                                    <th
+                                        {...pt?.headerCell}
+                                        key={index}
+                                        scope='col'
+                                        aria-sort={ariaSort}
+                                        style={{
+                                            ...pt?.headerCell?.style,
+                                            ...column.props.style,
+                                            ...column.props.headerStyle,
+                                        }}
+                                        className={classNames(
+                                            'cratis-datatable__header-cell',
+                                            pt?.headerCell?.className,
+                                            column.props.headerClassName,
                                         )}
-                                        {column.props.filter &&
-                                            (column.props.filterField ??
-                                                column.props.field) && (
-                                                <ColumnFilterMenu
-                                                    field={
-                                                        (column.props.filterField ??
-                                                            column.props.field) as string
+                                        data-cratis-part='header-cell'
+                                    >
+                                        <div
+                                            className='cratis-datatable-header-cell'
+                                            data-cratis-part='header-content'
+                                        >
+                                            {column.props.sortable &&
+                                            column.props.field ? (
+                                                <button
+                                                    type='button'
+                                                    className='cratis-datatable__sort'
+                                                    data-cratis-part='sort'
+                                                    onClick={() =>
+                                                        setSort((current) => ({
+                                                            field: column.props
+                                                                .field as string,
+                                                            direction:
+                                                                current?.field ===
+                                                                    column.props.field &&
+                                                                current?.direction ===
+                                                                    'ascending'
+                                                                    ? 'descending'
+                                                                    : 'ascending',
+                                                        }))
                                                     }
+                                                >
+                                                    <span>{column.props.header}</span>
+                                                    {ariaSort && (
+                                                        <span aria-hidden='true'>
+                                                            {ariaSort === 'ascending'
+                                                                ? '▲'
+                                                                : '▼'}
+                                                        </span>
+                                                    )}
+                                                </button>
+                                            ) : (
+                                                column.props.header
+                                            )}
+                                            {column.props.filter && field && (
+                                                <ColumnFilterMenu
+                                                    field={field}
                                                     dataType={column.props.dataType}
                                                     placeholder={
                                                         column.props.filterPlaceholder
@@ -267,62 +402,115 @@ export const DataTableCore = <TData extends object>({
                                                         column.props.filterElement
                                                     }
                                                     labels={column.props.filterLabels}
+                                                    constraint={filters[field]}
+                                                    onApply={(constraint) =>
+                                                        updateFilter(field, constraint)
+                                                    }
+                                                    onClear={() =>
+                                                        updateFilter(field, undefined)
+                                                    }
                                                 />
                                             )}
-                                    </div>
-                                </PrimeDataTable.THeadCell>
-                            ))}
-                        </PrimeDataTable.THeadRow>
-                    </PrimeDataTable.THead>
-                    <PrimeDataTable.TBody>
-                        {({ item, index }) => (
-                            <PrimeDataTable.Row
-                                index={index}
-                                className={rowClassName?.(item as TData)}
+                                        </div>
+                                    </th>
+                                );
+                            })}
+                        </tr>
+                    </thead>
+                    <tbody
+                        {...pt?.body}
+                        className={classNames(
+                            'cratis-datatable__body',
+                            pt?.body?.className,
+                        )}
+                        data-cratis-part='body'
+                    >
+                        {filteredRows.length === 0 ? (
+                            <tr
+                                {...pt?.emptyRow}
+                                className={classNames(
+                                    'cratis-datatable__empty-row',
+                                    pt?.emptyRow?.className,
+                                )}
+                                data-cratis-part='empty-row'
                             >
-                                {columns.map((column, columnIndex) => (
-                                    <PrimeDataTable.Cell
-                                        key={columnIndex}
-                                        style={{
-                                            ...column.props.style,
-                                            ...column.props.bodyStyle,
+                                <td
+                                    {...pt?.emptyCell}
+                                    colSpan={Math.max(columns.length, 1)}
+                                    className={classNames(
+                                        'cratis-datatable__empty-cell',
+                                        pt?.emptyCell?.className,
+                                    )}
+                                    data-cratis-part='empty-cell'
+                                >
+                                    {emptyMessage}
+                                </td>
+                            </tr>
+                        ) : (
+                            filteredRows.map((row, rowIndex) => {
+                                const rowKey = keyOf(row, rowIndex);
+                                const isSelected =
+                                    selectionMode === 'single' && selectedKey === rowKey;
+                                return (
+                                    <tr
+                                        {...pt?.row}
+                                        key={rowKey}
+                                        className={classNames(
+                                            'cratis-datatable__row',
+                                            pt?.row?.className,
+                                            rowClassName?.(row),
+                                        )}
+                                        data-cratis-part='row'
+                                        data-selected={isSelected || undefined}
+                                        onClick={(event) => {
+                                            onRowClick?.({ data: row, index: rowIndex });
+                                            if (selectionMode === 'single') {
+                                                onSelectionChange?.({
+                                                    value: row,
+                                                    originalEvent: event,
+                                                });
+                                            }
                                         }}
-                                        className={
-                                            column.props.bodyClassName ??
-                                            column.props.className
-                                        }
                                     >
-                                        {column.props.selectionMode ? (
-                                            <input
-                                                type='radio'
-                                                readOnly
-                                                aria-label={selectionAriaLabel}
-                                                checked={
-                                                    !!selection &&
-                                                    keyOf(item as TData) ===
-                                                        keyOf(selection)
-                                                }
-                                            />
-                                        ) : (
-                                            renderCellContent(column.props, item)
-                                        )}
-                                    </PrimeDataTable.Cell>
-                                ))}
-                            </PrimeDataTable.Row>
+                                        {columns.map((column, columnIndex) => (
+                                            <td
+                                                {...pt?.cell}
+                                                key={columnIndex}
+                                                style={{
+                                                    ...pt?.cell?.style,
+                                                    ...column.props.style,
+                                                    ...column.props.bodyStyle,
+                                                }}
+                                                className={classNames(
+                                                    'cratis-datatable__cell',
+                                                    pt?.cell?.className,
+                                                    column.props.bodyClassName ??
+                                                        column.props.className,
+                                                )}
+                                                data-cratis-part='cell'
+                                            >
+                                                {column.props.selectionMode ? (
+                                                    <input
+                                                        type='radio'
+                                                        readOnly
+                                                        aria-label={selectionAriaLabel}
+                                                        checked={isSelected}
+                                                    />
+                                                ) : (
+                                                    renderCellContent(
+                                                        column.props,
+                                                        row as Record<string, unknown>,
+                                                    )
+                                                )}
+                                            </td>
+                                        ))}
+                                    </tr>
+                                );
+                            })
                         )}
-                    </PrimeDataTable.TBody>
-                    {/* v11 classes the empty body `p-datatable-empty-message` alone, so a theme's
-                        `.p-datatable-tbody > tr > td` cell rules never reach the message row; the
-                        body class puts the empty row on the same footing as a data row. */}
-                    <PrimeDataTable.EmptyTBody className='p-datatable-tbody'>
-                        <PrimeDataTable.Row>
-                            <PrimeDataTable.Cell colSpan={Math.max(columns.length, 1)}>
-                                {emptyMessage}
-                            </PrimeDataTable.Cell>
-                        </PrimeDataTable.Row>
-                    </PrimeDataTable.EmptyTBody>
-                </PrimeDataTable.Table>
-            </PrimeDataTable.TableContainer>
-        </PrimeDataTable.Root>
+                    </tbody>
+                </table>
+            </div>
+        </div>
     );
 };
diff --git a/Source/DataTables/DataTableFilterMatcherRegistry.ts b/Source/DataTables/DataTableFilterMatcherRegistry.ts
index 19374f8f..edf3367e 100644
--- a/Source/DataTables/DataTableFilterMatcherRegistry.ts
+++ b/Source/DataTables/DataTableFilterMatcherRegistry.ts
@@ -96,6 +96,11 @@ export const registerDataTableFilterMatcher = (
     return { matchMode, unregister };
 };
 
+/** Resolves a custom matcher registered for the given name. */
+export const resolveDataTableFilterMatcher = (
+    name: string,
+): DataTableFilterMatcher | undefined => registry.matchers.get(name)?.matcher;
+
 /** Removes a custom matcher registration. Safe to call more than once. */
 export const unregisterDataTableFilterMatcher = (
     registration: DataTableFilterMatcherRegistration,
diff --git a/Source/DataTables/DataTableForObservableQuery.tsx b/Source/DataTables/DataTableForObservableQuery.tsx
index a068a0a3..4bb59746 100644
--- a/Source/DataTables/DataTableForObservableQuery.tsx
+++ b/Source/DataTables/DataTableForObservableQuery.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 type { DataTableRootProps } from '@primereact/types/primitive/datatable';
+import type { DataTableParts } from './DataTableCore';
 import type { Constructor } from '@cratis/fundamentals';
 import { type IObservableQueryFor, Paging } from '@cratis/arc/queries';
 import { useObservableQueryWithPaging } from '@cratis/arc.react/queries';
@@ -82,11 +82,11 @@ export interface DataTableForObservableQueryProps<
      */
     className?: string;
 
-    /** PrimeReact pass-through configuration applied to the underlying DataTable. */
-    pt?: DataTableRootProps['pt'];
+    /** Cratis-owned per-part attributes applied to the underlying table. */
+    pt?: DataTableParts;
 
-    /** PrimeReact pass-through options applied to the underlying DataTable. */
-    ptOptions?: DataTableRootProps['ptOptions'];
+    /** Retained for source compatibility; Cratis parts always merge. */
+    ptOptions?: object;
 
     /** When true, disables every base PrimeReact style on the underlying DataTable. */
     unstyled?: boolean;
diff --git a/Source/DataTables/DataTableForQuery.tsx b/Source/DataTables/DataTableForQuery.tsx
index d887c3a2..488d95cc 100644
--- a/Source/DataTables/DataTableForQuery.tsx
+++ b/Source/DataTables/DataTableForQuery.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 type { DataTableRootProps } from '@primereact/types/primitive/datatable';
+import type { DataTableParts } from './DataTableCore';
 import type { Constructor } from '@cratis/fundamentals';
 import { type IQueryFor, Paging } from '@cratis/arc/queries';
 import { useQueryWithPaging } from '@cratis/arc.react/queries';
@@ -80,11 +80,11 @@ export interface DataTableForQueryProps<
      */
     className?: string;
 
-    /** PrimeReact pass-through configuration applied to the underlying DataTable. */
-    pt?: DataTableRootProps['pt'];
+    /** Cratis-owned per-part attributes applied to the underlying table. */
+    pt?: DataTableParts;
 
-    /** PrimeReact pass-through options applied to the underlying DataTable. */
-    ptOptions?: DataTableRootProps['ptOptions'];
+    /** Retained for source compatibility; Cratis parts always merge. */
+    ptOptions?: object;
 
     /** When true, disables every base PrimeReact style on the underlying DataTable. */
     unstyled?: boolean;
diff --git a/Source/DataTables/TablePaginator.tsx b/Source/DataTables/TablePaginator.tsx
index 09feace0..4d8b5b88 100644
--- a/Source/DataTables/TablePaginator.tsx
+++ b/Source/DataTables/TablePaginator.tsx
@@ -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.
 
-import { Button } from 'primereact/button';
-import { useLocale } from '@primereact/core/locale';
+import { Button } from '../Common/Button';
+import { useCratisComponentsConfig } from '../Common/CratisComponentsProvider';
 import { paginatorRange } from './paginatorRange';
 
 /** Props for {@link TablePaginator}. */
@@ -45,16 +45,18 @@ export const TablePaginator = ({
     ariaLabels,
     className,
 }: TablePaginatorProps) => {
-    const { messages } = useLocale();
+    const { messages } = useCratisComponentsConfig();
+    const paginatorMessages = messages?.paginator;
     const isFirst = page <= 0;
     const isLast = page >= pageCount - 1;
     const rangeReport = paginatorRange(page, pageSize, totalItems);
     const labels = {
-        navigation: ariaLabels?.navigation ?? messages.aria.navigation,
-        first: ariaLabels?.first ?? messages.aria.firstPageLabel,
-        previous: ariaLabels?.previous ?? messages.aria.prevPageLabel,
-        next: ariaLabels?.next ?? messages.aria.nextPageLabel,
-        last: ariaLabels?.last ?? messages.aria.lastPageLabel,
+        navigation:
+            ariaLabels?.navigation ?? paginatorMessages?.navigation ?? 'Pagination',
+        first: ariaLabels?.first ?? paginatorMessages?.first ?? 'First page',
+        previous: ariaLabels?.previous ?? paginatorMessages?.previous ?? 'Previous page',
+        next: ariaLabels?.next ?? paginatorMessages?.next ?? 'Next page',
+        last: ariaLabels?.last ?? paginatorMessages?.last ?? 'Last page',
     };
 
     return (
@@ -71,39 +73,39 @@ export const TablePaginator = ({
                 <span className='cratis-table-paginator-range'>{rangeReport}</span>
             )}
             <Button
-                variant='text'
+                text
                 disabled={isFirst}
                 onClick={() => onPageChange(0)}
                 aria-label={labels.first}
             >
-                <i className='pi pi-angle-double-left' />
+                <span aria-hidden='true'>«</span>
             </Button>
             <Button
-                variant='text'
+                text
                 disabled={isFirst}
                 onClick={() => onPageChange(page - 1)}
                 aria-label={labels.previous}
             >
-                <i className='pi pi-angle-left' />
+                <span aria-hidden='true'>‹</span>
             </Button>
             <span className='cratis-table-paginator-info'>
                 {page + 1} / {Math.max(pageCount, 1)}
             </span>
             <Button
-                variant='text'
+                text
                 disabled={isLast}
                 onClick={() => onPageChange(page + 1)}
                 aria-label={labels.next}
             >
-                <i className='pi pi-angle-right' />
+                <span aria-hidden='true'>›</span>
             </Button>
             <Button
-                variant='text'
+                text
                 disabled={isLast}
                 onClick={() => onPageChange(pageCount - 1)}
                 aria-label={labels.last}
             >
-                <i className='pi pi-angle-double-right' />
+                <span aria-hidden='true'>»</span>
             </Button>
         </div>
     );
diff --git a/Source/DataTables/for_ColumnFilterMenu/when_configuring_labels.tsx b/Source/DataTables/for_ColumnFilterMenu/when_configuring_labels.tsx
index 4e48a7e7..27ec471f 100644
--- a/Source/DataTables/for_ColumnFilterMenu/when_configuring_labels.tsx
+++ b/Source/DataTables/for_ColumnFilterMenu/when_configuring_labels.tsx
@@ -39,14 +39,14 @@ describe('when configuring column filter labels', () => {
         menu = await openFilterMenu(table);
 
         const booleanTrigger = menu.querySelector<HTMLButtonElement>(
-            '[data-scope="select"][data-part="trigger"]',
+            '[data-cratis-part="trigger"]',
         );
         if (!booleanTrigger) {
             throw new Error('Boolean filter did not render its dropdown.');
         }
         await act(async () => booleanTrigger.click());
         booleanOptions = Array.from(
-            document.querySelectorAll('[data-scope="select"][data-part="option"]'),
+            document.querySelectorAll('[data-cratis-part="option"]'),
             (option) => option.textContent ?? '',
         );
     });
diff --git a/Source/DataTables/for_TablePaginator/when_using_configured_locale.tsx b/Source/DataTables/for_TablePaginator/when_using_configured_locale.tsx
index fc78d1b4..56719971 100644
--- a/Source/DataTables/for_TablePaginator/when_using_configured_locale.tsx
+++ b/Source/DataTables/for_TablePaginator/when_using_configured_locale.tsx
@@ -3,7 +3,6 @@
 
 // @vitest-environment jsdom
 
-import { en } from '@primereact/core/locale';
 import { expect } from 'chai';
 import { act } from 'react';
 import { createRoot, type Root } from 'react-dom/client';
@@ -31,17 +30,13 @@ describe('when using the configured locale', () => {
                 <CratisComponentsProvider
                     value={{
                         locale: 'test',
-                        locales: {
-                            test: {
-                                ...en,
-                                aria: {
-                                    ...en.aria,
-                                    navigation: 'Sidenavigasjon',
-                                    firstPageLabel: 'Første side',
-                                    prevPageLabel: 'Forrige side',
-                                    nextPageLabel: 'Neste side',
-                                    lastPageLabel: 'Siste side',
-                                },
+                        messages: {
+                            paginator: {
+                                navigation: 'Sidenavigasjon',
+                                first: 'Første side',
+                                previous: 'Forrige side',
+                                next: 'Neste side',
+                                last: 'Siste side',
                             },
                         },
                     }}
diff --git a/Source/DataTables/selectionKeys.ts b/Source/DataTables/selectionKeys.ts
index 61e1c25e..e50620c2 100644
--- a/Source/DataTables/selectionKeys.ts
+++ b/Source/DataTables/selectionKeys.ts
@@ -1,39 +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 type { SelectionKeys } from '@primereact/types/headless/datatable';
+/** Cratis-owned selected-row key map. */
+export type SelectionKeys = Record<string, boolean>;
 
-/**
- * Builds PrimeReact 11's key-based selection map for a single selected row —
- * `{ [String(row[dataKey])]: true }` — or an empty map when nothing is
- * selected or no `dataKey` is set. This is the write side of the object↔key
- * translation the Cratis tables use to keep a row-object selection API over
- * v11's key-based model.
- *
- * @typeParam TData - The row type.
- */
+/** Builds a single selected-row key map. */
 export function selectionKeysForRow<TData extends object>(
     selection: TData | null | undefined,
-    dataKey: string | undefined
+    dataKey: string | undefined,
 ): SelectionKeys {
     if (!selection || !dataKey) return {};
     return { [String((selection as Record<string, unknown>)[dataKey])]: true };
 }
 
-/**
- * The read side: resolves the row object matching the single `true` key in a
- * PrimeReact 11 selection-keys map, or `null` when the selection is cleared or
- * the key is not in `data`.
- *
- * @typeParam TData - The row type.
- */
+/** Resolves a row from a selected-row key map. */
 export function rowFromSelectionKeys<TData extends object>(
     keys: SelectionKeys,
     data: TData[],
-    dataKey: string | undefined
+    dataKey: string | undefined,
 ): TData | null {
     if (!dataKey) return null;
-    const selectedKey = Object.keys(keys).find(key => keys[key]);
+    const selectedKey = Object.keys(keys).find((key) => keys[key]);
     if (selectedKey === undefined) return null;
-    return data.find(row => String((row as Record<string, unknown>)[dataKey]) === selectedKey) ?? null;
+    return (
+        data.find(
+            (row) => String((row as Record<string, unknown>)[dataKey]) === selectedKey,
+        ) ?? null
+    );
 }
diff --git a/Source/Dialogs/BusyIndicatorDialog.tsx b/Source/Dialogs/BusyIndicatorDialog.tsx
index b9bbe6c5..8b7784ec 100644
--- a/Source/Dialogs/BusyIndicatorDialog.tsx
+++ b/Source/Dialogs/BusyIndicatorDialog.tsx
@@ -2,7 +2,7 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import { BusyIndicatorDialogRequest } from '@cratis/arc.react/dialogs';
-import { ProgressSpinner } from 'primereact/progressspinner';
+import { ProgressSpinner } from '../Display/ProgressSpinner';
 import { Dialog } from './Dialog';
 import { DialogInitialFocus } from './DialogInitialFocus';
 
@@ -65,13 +65,11 @@ export const BusyIndicatorDialog = (props: BusyIndicatorDialogRequest) => {
             buttons={null}
             initialFocus={DialogInitialFocus.Content}
         >
-            <div className="flex flex-col items-center justify-center gap-4 py-4">
+            <div className='flex flex-col items-center justify-center gap-4 py-4'>
                 {/* The spinner's role="progressbar" needs an accessible name; use the
                     consumer-supplied message/title (already localized), never a baked-in string. */}
-                <ProgressSpinner.Root aria-label={props.message || props.title || 'Loading'} />
-                <p className="m-0 text-center">
-                    {props.message}
-                </p>
+                <ProgressSpinner aria-label={props.message || props.title || 'Loading'} />
+                <p className='m-0 text-center'>{props.message}</p>
             </div>
         </Dialog>
     );
diff --git a/Source/Dialogs/Dialog.css b/Source/Dialogs/Dialog.css
index b0577fff..1d2aa26d 100644
--- a/Source/Dialogs/Dialog.css
+++ b/Source/Dialogs/Dialog.css
@@ -11,9 +11,19 @@
     padding: 2rem;
     background: var(--cratis-maskbg);
 }
-.cratis-dialog__backdrop[data-entering] { animation: cratis-dialog-fade 160ms ease-out; }
-.cratis-dialog__backdrop[data-exiting] { animation: cratis-dialog-fade 120ms reverse ease-in; }
-.cratis-dialog__positioner { display: flex; max-width: 100%; max-height: 100%; align-items: center; justify-content: center; }
+.cratis-dialog__backdrop[data-entering] {
+    animation: cratis-dialog-fade 160ms ease-out;
+}
+.cratis-dialog__backdrop[data-exiting] {
+    animation: cratis-dialog-fade 120ms reverse ease-in;
+}
+.cratis-dialog__positioner {
+    display: flex;
+    max-width: 100%;
+    max-height: 100%;
+    align-items: center;
+    justify-content: center;
+}
 .cratis-dialog {
     display: flex;
     max-width: min(100%, calc(100vw - 2rem));
@@ -27,10 +37,32 @@
     box-shadow: 0 1rem 3rem color-mix(in srgb, var(--cratis-text-color) 22%, transparent);
     outline: none;
 }
-.cratis-dialog__document { display: flex; min-height: 0; flex: 1; flex-direction: column; outline: none; }
-.cratis-dialog__header { display: flex; padding: 1rem 1.25rem; align-items: center; justify-content: space-between; gap: 1rem; flex: 0 0 auto; border-bottom: 1px solid var(--cratis-surface-border); }
-.cratis-dialog__title { margin: 0; font-size: 1.1rem; font-weight: 700; outline: none; }
-.cratis-dialog__title:focus-visible { border-radius: var(--cratis-border-radius); box-shadow: var(--cratis-focus-ring); }
+.cratis-dialog__document {
+    display: flex;
+    min-height: 0;
+    flex: 1;
+    flex-direction: column;
+    outline: none;
+}
+.cratis-dialog__header {
+    display: flex;
+    padding: 1rem 1.25rem;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    flex: 0 0 auto;
+    border-bottom: 1px solid var(--cratis-surface-border);
+}
+.cratis-dialog__title {
+    margin: 0;
+    font-size: 1.1rem;
+    font-weight: 700;
+    outline: none;
+}
+.cratis-dialog__title:focus-visible {
+    border-radius: var(--cratis-border-radius);
+    box-shadow: var(--cratis-focus-ring);
+}
 .cratis-dialog__close {
     display: inline-flex;
     width: 2rem;
@@ -45,10 +77,29 @@
     font-size: 1.25rem;
     cursor: pointer;
 }
-.cratis-dialog__close:hover { background: var(--cratis-surface-hover); color: var(--cratis-text-color); }
-.cratis-dialog__close:focus-visible { outline: none; box-shadow: var(--cratis-focus-ring); }
-.cratis-dialog__content { min-height: 0; padding: 1.25rem; overflow: auto; flex: 1 1 auto; }
-.cratis-dialog__footer { display: flex; padding: 0.9rem 1.25rem; justify-content: flex-start; flex-wrap: wrap; gap: 0.75rem; flex: 0 0 auto; border-top: 1px solid var(--cratis-surface-border); }
+.cratis-dialog__close:hover {
+    background: var(--cratis-surface-hover);
+    color: var(--cratis-text-color);
+}
+.cratis-dialog__close:focus-visible {
+    outline: none;
+    box-shadow: var(--cratis-focus-ring);
+}
+.cratis-dialog__content {
+    min-height: 0;
+    padding: 1.25rem;
+    overflow: auto;
+    flex: 1 1 auto;
+}
+.cratis-dialog__footer {
+    display: flex;
+    padding: 0.9rem 1.25rem;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+    flex: 0 0 auto;
+    border-top: 1px solid var(--cratis-surface-border);
+}
 .cratis-dialog__button {
     display: inline-flex;
     min-height: 2.25rem;
@@ -62,20 +113,61 @@
     font-weight: 600;
     cursor: pointer;
 }
-.cratis-dialog__button--primary { background: var(--cratis-primary-color); color: var(--cratis-primary-color-text); }
-.cratis-dialog__button--secondary { background: transparent; color: var(--cratis-primary-color); }
-.cratis-dialog__button:focus-visible { outline: none; box-shadow: var(--cratis-focus-ring); }
-.cratis-dialog__button:disabled { cursor: not-allowed; opacity: 0.55; }
-.cratis-dialog__spinner { width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: cratis-dialog-spin 700ms linear infinite; }
+.cratis-dialog__button--primary {
+    background: var(--cratis-primary-color);
+    color: var(--cratis-primary-color-text);
+}
+.cratis-dialog__button--secondary {
+    background: transparent;
+    color: var(--cratis-primary-color);
+}
+.cratis-dialog__button:focus-visible {
+    outline: none;
+    box-shadow: var(--cratis-focus-ring);
+}
+.cratis-dialog__button:disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+}
+.cratis-dialog__spinner {
+    width: 1em;
+    height: 1em;
+    border: 2px solid currentColor;
+    border-right-color: transparent;
+    border-radius: 50%;
+    animation: cratis-dialog-spin 700ms linear infinite;
+}
 
-@keyframes cratis-dialog-fade { from { opacity: 0; } to { opacity: 1; } }
-@keyframes cratis-dialog-spin { to { transform: rotate(360deg); } }
+@keyframes cratis-dialog-fade {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+@keyframes cratis-dialog-spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
 
 @media (prefers-reduced-motion: reduce) {
-    .cratis-dialog__backdrop, .cratis-dialog__spinner { animation: none; }
+    .cratis-dialog__backdrop,
+    .cratis-dialog__spinner {
+        animation: none;
+    }
 }
 
 @media (forced-colors: active) {
-    .cratis-dialog, .cratis-dialog__button { border-color: CanvasText; }
-    .cratis-dialog__close:focus-visible, .cratis-dialog__button:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; box-shadow: none; }
+    .cratis-dialog,
+    .cratis-dialog__button {
+        border-color: CanvasText;
+    }
+    .cratis-dialog__close:focus-visible,
+    .cratis-dialog__button:focus-visible {
+        outline: 2px solid Highlight;
+        outline-offset: 2px;
+        box-shadow: none;
+    }
 }
diff --git a/Source/Dialogs/Dialog.stories.tsx b/Source/Dialogs/Dialog.stories.tsx
index 00b23c7f..4b4cb764 100644
--- a/Source/Dialogs/Dialog.stories.tsx
+++ b/Source/Dialogs/Dialog.stories.tsx
@@ -1,13 +1,18 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import React, { useState } from 'react';
-import { Meta, StoryObj } from '@storybook/react';
+import type React from 'react';
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { Dialog } from './Dialog';
 import { DialogInitialFocus } from './DialogInitialFocus';
-import { DialogButtons, DialogResult, useDialog, useDialogContext } from '@cratis/arc.react/dialogs';
-import { Button } from 'primereact/button';
-import { InputText } from 'primereact/inputtext';
+import {
+    DialogButtons,
+    DialogResult,
+    useDialog,
+    useDialogContext,
+} from '@cratis/arc.react/dialogs';
+import { Button } from '../Common/Button';
 
 const meta: Meta<typeof Dialog> = {
     title: 'Dialogs/Dialog',
@@ -20,7 +25,19 @@ const meta: Meta<typeof Dialog> = {
 export default meta;
 type Story = StoryObj<typeof Dialog>;
 
-const DialogWrapper = ({ buttons, title, children, isValid, initialFocus }: { buttons: DialogButtons; title: string; children: React.ReactNode; isValid?: boolean; initialFocus?: DialogInitialFocus }) => {
+const DialogWrapper = ({
+    buttons,
+    title,
+    children,
+    isValid,
+    initialFocus,
+}: {
+    buttons: DialogButtons;
+    title: string;
+    children: React.ReactNode;
+    isValid?: boolean;
+    initialFocus?: DialogInitialFocus;
+}) => {
     const ResultDialog = () => {
         const { closeDialog } = useDialogContext();
 
@@ -50,34 +67,34 @@ const DialogWrapper = ({ buttons, title, children, isValid, initialFocus }: { bu
 
 export const OkCancel: Story = {
     render: () => (
-        <DialogWrapper title="Confirm Action" buttons={DialogButtons.OkCancel}>
+        <DialogWrapper title='Confirm Action' buttons={DialogButtons.OkCancel}>
             <p>Are you sure you want to perform this action?</p>
         </DialogWrapper>
-    )
+    ),
 };
 
 export const YesNo: Story = {
     render: () => (
-        <DialogWrapper title="Delete Item" buttons={DialogButtons.YesNo}>
+        <DialogWrapper title='Delete Item' buttons={DialogButtons.YesNo}>
             <p>Do you want to delete this item? This cannot be undone.</p>
         </DialogWrapper>
-    )
+    ),
 };
 
 export const YesNoCancel: Story = {
     render: () => (
-        <DialogWrapper title="Save Changes" buttons={DialogButtons.YesNoCancel}>
+        <DialogWrapper title='Save Changes' buttons={DialogButtons.YesNoCancel}>
             <p>You have unsaved changes. Do you want to save them before closing?</p>
         </DialogWrapper>
-    )
+    ),
 };
 
 export const Ok: Story = {
     render: () => (
-        <DialogWrapper title="Information" buttons={DialogButtons.Ok}>
+        <DialogWrapper title='Information' buttons={DialogButtons.Ok}>
             <p>The operation completed successfully.</p>
         </DialogWrapper>
-    )
+    ),
 };
 
 /**
@@ -88,10 +105,17 @@ export const Ok: Story = {
  */
 export const DestructiveFocusesDismiss: Story = {
     render: () => (
-        <DialogWrapper title="Delete personal data?" buttons={DialogButtons.YesNo} initialFocus={DialogInitialFocus.Cancel}>
-            <p>This permanently removes the person and every record about them. It cannot be undone.</p>
+        <DialogWrapper
+            title='Delete personal data?'
+            buttons={DialogButtons.YesNo}
+            initialFocus={DialogInitialFocus.Cancel}
+        >
+            <p>
+                This permanently removes the person and every record about them. It cannot
+                be undone.
+            </p>
         </DialogWrapper>
-    )
+    ),
 };
 
 /**
@@ -101,10 +125,17 @@ export const DestructiveFocusesDismiss: Story = {
  */
 export const DestructiveArmsNothing: Story = {
     render: () => (
-        <DialogWrapper title="Delete personal data?" buttons={DialogButtons.OkCancel} initialFocus={DialogInitialFocus.Content}>
-            <p>This permanently removes the person and every record about them. It cannot be undone.</p>
+        <DialogWrapper
+            title='Delete personal data?'
+            buttons={DialogButtons.OkCancel}
+            initialFocus={DialogInitialFocus.Content}
+        >
+            <p>
+                This permanently removes the person and every record about them. It cannot
+                be undone.
+            </p>
         </DialogWrapper>
-    )
+    ),
 };
 
 export const WithForm: Story = {
@@ -117,29 +148,31 @@ export const WithForm: Story = {
 
             return (
                 <Dialog
-                    title="Edit Name"
+                    title='Edit Name'
                     buttons={DialogButtons.OkCancel}
                     onConfirm={() => closeDialog(DialogResult.Ok, { name })}
                     onCancel={() => closeDialog(DialogResult.Cancelled)}
                     isValid={name.trim().length > 0}
                 >
-                    <div className="flex flex-col gap-2">
-                        <label htmlFor="name">Name</label>
-                        <InputText
-                            id="name"
+                    <div className='flex flex-col gap-2'>
+                        <label htmlFor='name'>Name</label>
+                        <input
+                            id='name'
+                            className='cratis-field-input'
                             value={name}
-                            onChange={(e) => setName(e.target.value)}
-                            placeholder="Enter name..."
+                            onChange={(event) => setName(event.target.value)}
+                            placeholder='Enter name…'
                         />
                         {name.trim().length === 0 && (
-                            <small className="p-error">Name is required</small>
+                            <small className='p-error'>Name is required</small>
                         )}
                     </div>
                 </Dialog>
             );
         };
 
-        const [AddNameDialogComponent, showAddNameDialog] = useDialog<NameResult>(AddNameDialog);
+        const [AddNameDialogComponent, showAddNameDialog] =
+            useDialog<NameResult>(AddNameDialog);
         const [result, setResult] = useState('');
 
         return (
@@ -151,12 +184,14 @@ export const WithForm: Story = {
                             setResult(value.name);
                         }
                     }}
-                >Open Form Dialog</Button>
+                >
+                    Open Form Dialog
+                </Button>
                 {result && <p>Last saved name: {result}</p>}
                 <AddNameDialogComponent />
             </>
         );
-    }
+    },
 };
 
 export const IsBusy: Story = {
@@ -168,11 +203,11 @@ export const IsBusy: Story = {
 
             return (
                 <Dialog
-                    title="Saving changes"
+                    title='Saving changes'
                     buttons={DialogButtons.OkCancel}
                     onConfirm={async () => {
                         setBusy(true);
-                        await new Promise(resolve => setTimeout(resolve, 3000));
+                        await new Promise((resolve) => setTimeout(resolve, 3000));
                         setBusy(false);
                         closeDialog(DialogResult.Ok);
                         return true;
@@ -180,7 +215,10 @@ export const IsBusy: Story = {
                     onCancel={() => closeDialog(DialogResult.Cancelled)}
                     isBusy={busy}
                 >
-                    <p>Click Ok to simulate a 3-second save operation. All buttons become disabled and the primary button shows a spinner.</p>
+                    <p>
+                        Click Ok to simulate a 3-second save operation. All buttons become
+                        disabled and the primary button shows a spinner.
+                    </p>
                 </Dialog>
             );
         };
@@ -193,7 +231,7 @@ export const IsBusy: Story = {
                 <DialogComponent />
             </>
         );
-    }
+    },
 };
 
 export const CustomButtons: Story = {
@@ -205,16 +243,24 @@ export const CustomButtons: Story = {
 
             return (
                 <Dialog
-                    title="Custom Actions"
+                    title='Custom Actions'
                     buttons={
                         <>
                             <Button
-                                severity="secondary"
-                                onClick={() => closeDialog(DialogResult.Ok, { action: 'draft' })}
-                            ><i className="pi pi-save" /> Save Draft</Button>
+                                severity='secondary'
+                                onClick={() =>
+                                    closeDialog(DialogResult.Ok, { action: 'draft' })
+                                }
+                            >
+                                <i className='pi pi-save' /> Save Draft
+                            </Button>
                             <Button
-                                onClick={() => closeDialog(DialogResult.Ok, { action: 'publish' })}
-                            ><i className="pi pi-send" /> Publish</Button>
+                                onClick={() =>
+                                    closeDialog(DialogResult.Ok, { action: 'publish' })
+                                }
+                            >
+                                <i className='pi pi-send' /> Publish
+                            </Button>
                         </>
                     }
                     onCancel={() => closeDialog(DialogResult.Cancelled)}
@@ -224,7 +270,8 @@ export const CustomButtons: Story = {
             );
         };
 
-        const [CustomActionsDialogComponent, showCustomActionsDialog] = useDialog<ActionResult>(CustomActionsDialog);
+        const [CustomActionsDialogComponent, showCustomActionsDialog] =
+            useDialog<ActionResult>(CustomActionsDialog);
         const [result, setResult] = useState('');
 
         return (
@@ -236,10 +283,12 @@ export const CustomButtons: Story = {
                             setResult(value.action);
                         }
                     }}
-                >Open Custom Dialog</Button>
+                >
+                    Open Custom Dialog
+                </Button>
                 {result && <p>Last action: {result}</p>}
                 <CustomActionsDialogComponent />
             </>
         );
-    }
+    },
 };
diff --git a/Source/Dialogs/Dialog.tsx b/Source/Dialogs/Dialog.tsx
index e444c4a1..0a3bee09 100644
--- a/Source/Dialogs/Dialog.tsx
+++ b/Source/Dialogs/Dialog.tsx
@@ -2,16 +2,9 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import { DialogResult, DialogButtons, useDialogContext } from '@cratis/arc.react/dialogs';
-import {
-    Dialog as AriaDialog,
-    Heading,
-} from 'react-aria-components/Dialog';
+import { Dialog as AriaDialog, Heading } from 'react-aria-components/Dialog';
 import { Modal, ModalOverlay } from 'react-aria-components/Modal';
-import type {
-    ButtonHTMLAttributes,
-    CSSProperties,
-    ReactNode,
-} from 'react';
+import type { ButtonHTMLAttributes, CSSProperties, ReactNode } from 'react';
 import { useEffect, useRef } from 'react';
 import { DialogInitialFocus } from './DialogInitialFocus';
 
@@ -83,7 +76,8 @@ export interface DialogProps {
     unstyled?: boolean;
 }
 
-const classNames = (...values: Array<string | undefined>) => values.filter(Boolean).join(' ');
+const classNames = (...values: Array<string | undefined>) =>
+    values.filter(Boolean).join(' ');
 
 /**
  * A modal dialog with Arc host integration, typed footer actions, busy/validity
@@ -125,7 +119,8 @@ export const Dialog = ({
     const cancelRef = useRef<HTMLButtonElement>(null);
 
     const isDialogValid = isValid !== false;
-    const hasDismissingButton = typeof buttons === 'number' && buttons !== DialogButtons.Ok;
+    const hasDismissingButton =
+        typeof buttons === 'number' && buttons !== DialogButtons.Ok;
     const resolvedInitialFocus =
         initialFocus === DialogInitialFocus.Cancel && !hasDismissingButton
             ? DialogInitialFocus.Content
@@ -140,8 +135,8 @@ export const Dialog = ({
         const target = focusesConfirmButton
             ? confirmRef.current
             : focusesDismissingButton
-                ? cancelRef.current
-                : titleRef.current;
+              ? cancelRef.current
+              : titleRef.current;
         const frame = requestAnimationFrame(() => target?.focus());
         return () => cancelAnimationFrame(frame);
     }, [focusesConfirmButton, focusesDismissingButton, visible]);
@@ -180,7 +175,9 @@ export const Dialog = ({
             type='button'
             className={classNames(
                 'cratis-dialog__button',
-                primary ? 'cratis-dialog__button--primary' : 'cratis-dialog__button--secondary',
+                primary
+                    ? 'cratis-dialog__button--primary'
+                    : 'cratis-dialog__button--secondary',
                 primary ? pt?.confirm?.className : pt?.cancel?.className,
             )}
             data-cratis-part={primary ? 'confirm' : 'cancel'}
@@ -190,7 +187,9 @@ export const Dialog = ({
             autoFocus={focused}
             aria-busy={primary && isBusy ? true : undefined}
         >
-            {primary && isBusy && <span className='cratis-dialog__spinner' aria-hidden='true' />}
+            {primary && isBusy && (
+                <span className='cratis-dialog__spinner' aria-hidden='true' />
+            )}
             <span>{label}</span>
         </button>
     );
@@ -204,23 +203,53 @@ export const Dialog = ({
             case DialogButtons.OkCancel:
                 return (
                     <>
-                        {footerButton(DialogResult.Ok, okLabel, true, focusesConfirmButton)}
-                        {footerButton(DialogResult.Cancelled, cancelLabel, false, focusesDismissingButton)}
+                        {footerButton(
+                            DialogResult.Ok,
+                            okLabel,
+                            true,
+                            focusesConfirmButton,
+                        )}
+                        {footerButton(
+                            DialogResult.Cancelled,
+                            cancelLabel,
+                            false,
+                            focusesDismissingButton,
+                        )}
                     </>
                 );
             case DialogButtons.YesNo:
                 return (
                     <>
-                        {footerButton(DialogResult.Yes, yesLabel, true, focusesConfirmButton)}
-                        {footerButton(DialogResult.No, noLabel, false, focusesDismissingButton)}
+                        {footerButton(
+                            DialogResult.Yes,
+                            yesLabel,
+                            true,
+                            focusesConfirmButton,
+                        )}
+                        {footerButton(
+                            DialogResult.No,
+                            noLabel,
+                            false,
+                            focusesDismissingButton,
+                        )}
                     </>
                 );
             case DialogButtons.YesNoCancel:
                 return (
                     <>
-                        {footerButton(DialogResult.Yes, yesLabel, true, focusesConfirmButton)}
+                        {footerButton(
+                            DialogResult.Yes,
+                            yesLabel,
+                            true,
+                            focusesConfirmButton,
+                        )}
                         {footerButton(DialogResult.No, noLabel, false, false)}
-                        {footerButton(DialogResult.Cancelled, cancelLabel, false, focusesDismissingButton)}
+                        {footerButton(
+                            DialogResult.Cancelled,
+                            cancelLabel,
+                            false,
+                            focusesDismissingButton,
+                        )}
                     </>
                 );
             default:
@@ -240,7 +269,10 @@ export const Dialog = ({
                         slot='title'
                         tabIndex={focusesTitle ? -1 : undefined}
                         ref={titleRef}
-                        className={classNames('cratis-dialog__title', pt?.title?.className)}
+                        className={classNames(
+                            'cratis-dialog__title',
+                            pt?.title?.className,
+                        )}
                         style={pt?.title?.style}
                         data-cratis-part='title'
                     >
@@ -250,7 +282,10 @@ export const Dialog = ({
                         <button
                             {...pt?.close}
                             type='button'
-                            className={classNames('cratis-dialog__close', pt?.close?.className)}
+                            className={classNames(
+                                'cratis-dialog__close',
+                                pt?.close?.className,
+                            )}
                             data-cratis-part='close'
                             aria-label={closeAriaLabel}
                             onClick={() => void handleClose(DialogResult.Cancelled)}
@@ -260,7 +295,10 @@ export const Dialog = ({
                     )}
                 </header>
                 <div
-                    className={classNames('cratis-dialog__content', pt?.content?.className)}
+                    className={classNames(
+                        'cratis-dialog__content',
+                        pt?.content?.className,
+                    )}
                     style={{ ...pt?.content?.style, ...contentStyle }}
                     data-cratis-part='content'
                 >
@@ -268,7 +306,10 @@ export const Dialog = ({
                 </div>
                 {buttons !== null && (
                     <footer
-                        className={classNames('cratis-dialog__footer', pt?.footer?.className)}
+                        className={classNames(
+                            'cratis-dialog__footer',
+                            pt?.footer?.className,
+                        )}
                         style={pt?.footer?.style}
                         data-cratis-part='footer'
                     >
@@ -284,10 +325,23 @@ export const Dialog = ({
     if (typeof document === 'undefined') {
         if (!visible) return null;
         return (
-            <div className={classNames('cratis-dialog__backdrop', pt?.backdrop?.className)} data-cratis-part='backdrop'>
-                <div className={classNames('cratis-dialog__positioner', pt?.positioner?.className)} data-cratis-part='positioner'>
+            <div
+                className={classNames('cratis-dialog__backdrop', pt?.backdrop?.className)}
+                data-cratis-part='backdrop'
+            >
+                <div
+                    className={classNames(
+                        'cratis-dialog__positioner',
+                        pt?.positioner?.className,
+                    )}
+                    data-cratis-part='positioner'
+                >
                     <section
-                        className={classNames('cratis-dialog', pt?.root?.className, className)}
+                        className={classNames(
+                            'cratis-dialog',
+                            pt?.root?.className,
+                            className,
+                        )}
                         style={dialogStyle}
                         data-cratis-part='root'
                     >
@@ -301,22 +355,29 @@ export const Dialog = ({
     return (
         <ModalOverlay
             isOpen={visible}
-            onOpenChange={open => {
+            onOpenChange={(open) => {
                 if (!open) void handleClose(DialogResult.Cancelled);
             }}
             isDismissable={isDismissable}
             isKeyboardDismissDisabled={!isDismissable}
             className={classNames('cratis-dialog__backdrop', pt?.backdrop?.className)}
-            style={pt?.backdrop?.style}
+            style={{ zIndex: 1100, ...pt?.backdrop?.style }}
             data-cratis-part='backdrop'
         >
             <div
-                className={classNames('cratis-dialog__positioner', pt?.positioner?.className)}
+                className={classNames(
+                    'cratis-dialog__positioner',
+                    pt?.positioner?.className,
+                )}
                 style={pt?.positioner?.style}
                 data-cratis-part='positioner'
             >
                 <Modal
-                    className={classNames('cratis-dialog', pt?.root?.className, className)}
+                    className={classNames(
+                        'cratis-dialog',
+                        pt?.root?.className,
+                        className,
+                    )}
                     style={dialogStyle}
                     data-cratis-part='root'
                 >
diff --git a/Source/Dialogs/for_BusyIndicatorDialog/when_shown.ts b/Source/Dialogs/for_BusyIndicatorDialog/when_shown.ts
index 104a2cf9..00bd2807 100644
--- a/Source/Dialogs/for_BusyIndicatorDialog/when_shown.ts
+++ b/Source/Dialogs/for_BusyIndicatorDialog/when_shown.ts
@@ -4,7 +4,13 @@
 
 import React from 'react';
 import { BusyIndicatorDialog } from '../BusyIndicatorDialog';
-import { focusIsInsideTheDialog, focusedElement, render, unmount, type DialogInTheDom } from '../for_Dialog/given/a_dialog_in_the_dom';
+import {
+    focusIsInsideTheDialog,
+    focusedElement,
+    render,
+    unmount,
+    type DialogInTheDom,
+} from '../for_Dialog/given/a_dialog_in_the_dom';
 
 /**
  * A busy indicator has no buttons at all, so there is nothing for the browser
@@ -15,10 +21,12 @@ describe('when a busy indicator dialog is shown', () => {
     let dialog: DialogInTheDom;
 
     beforeEach(async () => {
-        dialog = await render(React.createElement(BusyIndicatorDialog, {
-            title: 'Saving',
-            message: 'Persisting your changes'
-        }));
+        dialog = await render(
+            React.createElement(BusyIndicatorDialog, {
+                title: 'Saving',
+                message: 'Persisting your changes',
+            }),
+        );
     });
 
     afterEach(async () => await unmount(dialog));
diff --git a/Source/Dialogs/for_Dialog/given/a_dialog_in_the_dom.ts b/Source/Dialogs/for_Dialog/given/a_dialog_in_the_dom.ts
index 01efe91d..112e5d8c 100644
--- a/Source/Dialogs/for_Dialog/given/a_dialog_in_the_dom.ts
+++ b/Source/Dialogs/for_Dialog/given/a_dialog_in_the_dom.ts
@@ -25,12 +25,14 @@ export interface DialogInTheDom {
  */
 export const render = async (element: React.ReactElement): Promise<DialogInTheDom> => {
     // SAFETY: React's test-environment flag is an intentionally undocumented global absent from DOM typings.
-    (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+    (
+        globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
+    ).IS_REACT_ACT_ENVIRONMENT = true;
     // SAFETY: jsdom omits ResizeObserver; the overlay only calls these observer methods.
     (globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver ??= class {
-        observe() { }
-        unobserve() { }
-        disconnect() { }
+        observe() {}
+        unobserve() {}
+        disconnect() {}
     };
 
     const container = document.createElement('div');
@@ -42,7 +44,7 @@ export const render = async (element: React.ReactElement): Promise<DialogInTheDo
     });
 
     await act(async () => {
-        await new Promise(resolve => setTimeout(resolve, 400));
+        await new Promise((resolve) => setTimeout(resolve, 400));
     });
 
     return { container, root };
@@ -84,7 +86,11 @@ export const focusedElement = (): string => {
  */
 export const focusIsInsideTheDialog = (): boolean => {
     const dialog = document.querySelector('[role="dialog"]');
-    return !!dialog && dialog.contains(document.activeElement) && document.activeElement !== document.body;
+    return (
+        !!dialog &&
+        dialog.contains(document.activeElement) &&
+        document.activeElement !== document.body
+    );
 };
 
 /**
@@ -99,10 +105,13 @@ export const hasCloseButton = (): boolean =>
  * @returns The tab index as a string.
  */
 export const titleTabIndex = (): string =>
-    document.querySelector('[data-cratis-part="title"]')?.getAttribute('tabindex') ?? 'none';
+    document.querySelector('[data-cratis-part="title"]')?.getAttribute('tabindex') ??
+    'none';
 
 const buttonLabeled = (label: string) =>
-    Array.from(document.querySelectorAll('button')).find(button => button.textContent === label);
+    Array.from(document.querySelectorAll('button')).find(
+        (button) => button.textContent === label,
+    );
 
 /**
  * Presses `Enter` on whatever has focus, the way a browser does: the key event
@@ -115,7 +124,9 @@ export const pressEnterOnFocusedElement = async () => {
     const element = document.activeElement as HTMLElement;
 
     await act(async () => {
-        element.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', repeat: true, bubbles: true }));
+        element.dispatchEvent(
+            new KeyboardEvent('keydown', { key: 'Enter', repeat: true, bubbles: true }),
+        );
         if (element instanceof HTMLButtonElement) {
             element.click();
         }
@@ -128,7 +139,13 @@ export const pressEnterOnFocusedElement = async () => {
 export const pressEscape = async () => {
     await act(async () => {
         const target = document.activeElement ?? document;
-        target.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', code: 'Escape', bubbles: true }));
+        target.dispatchEvent(
+            new KeyboardEvent('keydown', {
+                key: 'Escape',
+                code: 'Escape',
+                bubbles: true,
+            }),
+        );
     });
 };
 
diff --git a/Source/Dialogs/for_Dialog/when_confirming_with_close_dialog_and_result.ts b/Source/Dialogs/for_Dialog/when_confirming_with_close_dialog_and_result.ts
index 6c77f367..cd4b10f6 100644
--- a/Source/Dialogs/for_Dialog/when_confirming_with_close_dialog_and_result.ts
+++ b/Source/Dialogs/for_Dialog/when_confirming_with_close_dialog_and_result.ts
@@ -7,12 +7,7 @@ import { expect } from 'chai';
 import React from 'react';
 import { vi } from 'vitest';
 import { Dialog } from '../Dialog';
-import {
-    click,
-    render,
-    unmount,
-    type DialogInTheDom,
-} from './given/a_dialog_in_the_dom';
+import { click, render, unmount, type DialogInTheDom } from './given/a_dialog_in_the_dom';
 
 const { closeDialog } = vi.hoisted(() => ({ closeDialog: vi.fn() }));
 
diff --git a/Source/Dialogs/for_Dialog/when_initial_focus_is_cancel.ts b/Source/Dialogs/for_Dialog/when_initial_focus_is_cancel.ts
index bfc8b145..01e4447d 100644
--- a/Source/Dialogs/for_Dialog/when_initial_focus_is_cancel.ts
+++ b/Source/Dialogs/for_Dialog/when_initial_focus_is_cancel.ts
@@ -6,7 +6,14 @@ import React from 'react';
 import { DialogButtons } from '@cratis/arc.react/dialogs';
 import { Dialog } from '../Dialog';
 import { DialogInitialFocus } from '../DialogInitialFocus';
-import { focusIsInsideTheDialog, focusedElement, pressEnterOnFocusedElement, render, unmount, type DialogInTheDom } from './given/a_dialog_in_the_dom';
+import {
+    focusIsInsideTheDialog,
+    focusedElement,
+    pressEnterOnFocusedElement,
+    render,
+    unmount,
+    type DialogInTheDom,
+} from './given/a_dialog_in_the_dom';
 
 describe('when initial focus is cancel', () => {
     let dialog: DialogInTheDom;
@@ -16,15 +23,23 @@ describe('when initial focus is cancel', () => {
     const renderDialog = async (buttons: DialogButtons | React.ReactNode) => {
         confirmed = 0;
         cancelled = 0;
-        dialog = await render(React.createElement(Dialog, {
-            title: 'Delete personal data',
-            visible: true,
-            buttons,
-            initialFocus: DialogInitialFocus.Cancel,
-            onConfirm: () => { confirmed++; return true; },
-            onCancel: () => { cancelled++; return true; },
-            children: React.createElement('p', null, 'This cannot be undone')
-        }));
+        dialog = await render(
+            React.createElement(Dialog, {
+                title: 'Delete personal data',
+                visible: true,
+                buttons,
+                initialFocus: DialogInitialFocus.Cancel,
+                onConfirm: () => {
+                    confirmed++;
+                    return true;
+                },
+                onCancel: () => {
+                    cancelled++;
+                    return true;
+                },
+                children: React.createElement('p', null, 'This cannot be undone'),
+            }),
+        );
     };
 
     afterEach(async () => await unmount(dialog));
diff --git a/Source/Dialogs/for_Dialog/when_initial_focus_is_content.ts b/Source/Dialogs/for_Dialog/when_initial_focus_is_content.ts
index fdf81ce1..f1233034 100644
--- a/Source/Dialogs/for_Dialog/when_initial_focus_is_content.ts
+++ b/Source/Dialogs/for_Dialog/when_initial_focus_is_content.ts
@@ -6,7 +6,15 @@ import React from 'react';
 import { DialogButtons } from '@cratis/arc.react/dialogs';
 import { Dialog } from '../Dialog';
 import { DialogInitialFocus } from '../DialogInitialFocus';
-import { focusIsInsideTheDialog, focusedElement, pressEnterOnFocusedElement, render, titleTabIndex, unmount, type DialogInTheDom } from './given/a_dialog_in_the_dom';
+import {
+    focusIsInsideTheDialog,
+    focusedElement,
+    pressEnterOnFocusedElement,
+    render,
+    titleTabIndex,
+    unmount,
+    type DialogInTheDom,
+} from './given/a_dialog_in_the_dom';
 
 describe('when initial focus is content', () => {
     let dialog: DialogInTheDom;
@@ -16,15 +24,23 @@ describe('when initial focus is content', () => {
     const renderDialog = async (buttons: DialogButtons | React.ReactNode) => {
         confirmed = 0;
         cancelled = 0;
-        dialog = await render(React.createElement(Dialog, {
-            title: 'Delete personal data',
-            visible: true,
-            buttons,
-            initialFocus: DialogInitialFocus.Content,
-            onConfirm: () => { confirmed++; return true; },
-            onCancel: () => { cancelled++; return true; },
-            children: React.createElement('p', null, 'This cannot be undone')
-        }));
+        dialog = await render(
+            React.createElement(Dialog, {
+                title: 'Delete personal data',
+                visible: true,
+                buttons,
+                initialFocus: DialogInitialFocus.Content,
+                onConfirm: () => {
+                    confirmed++;
+                    return true;
+                },
+                onCancel: () => {
+                    cancelled++;
+                    return true;
+                },
+                children: React.createElement('p', null, 'This cannot be undone'),
+            }),
+        );
     };
 
     afterEach(async () => await unmount(dialog));
diff --git a/Source/Display/Avatar.tsx b/Source/Display/Avatar.tsx
index b0d30157..4d69a7c3 100644
--- a/Source/Display/Avatar.tsx
+++ b/Source/Display/Avatar.tsx
@@ -20,16 +20,32 @@ export interface AvatarProps {
 }
 
 /** A user or entity avatar with an image and text/icon fallback. */
-export const Avatar = ({ image, label, icon, alt = '', size = 'normal', className }: AvatarProps) => (
+export const Avatar = ({
+    image,
+    label,
+    icon,
+    alt = '',
+    size = 'normal',
+    className,
+}: AvatarProps) => (
     <span
         className={['cratis-avatar', className].filter(Boolean).join(' ')}
         data-cratis-part='root'
         data-size={size}
     >
         {image ? (
-            <img className='cratis-avatar__image' data-cratis-part='image' src={image} alt={alt} />
+            <img
+                className='cratis-avatar__image'
+                data-cratis-part='image'
+                src={image}
+                alt={alt}
+            />
         ) : (
-            <span className='cratis-avatar__fallback' data-cratis-part='fallback' aria-hidden={!label}>
+            <span
+                className='cratis-avatar__fallback'
+                data-cratis-part='fallback'
+                aria-hidden={!label}
+            >
                 {icon ?? label}
             </span>
         )}
diff --git a/Source/Display/Badge.tsx b/Source/Display/Badge.tsx
index da97472e..a8c82cb9 100644
--- a/Source/Display/Badge.tsx
+++ b/Source/Display/Badge.tsx
@@ -4,7 +4,8 @@
 import type { ReactNode } from 'react';
 
 /** Severity tone of a {@link Badge}. */
-export type BadgeSeverity = 'secondary' | 'info' | 'success' | 'warn' | 'danger' | 'contrast';
+export type BadgeSeverity =
+    'secondary' | 'info' | 'success' | 'warn' | 'danger' | 'contrast';
 
 /** Props for {@link Badge}. */
 export interface BadgeProps {
@@ -23,7 +24,14 @@ export interface BadgeProps {
 }
 
 /** A compact count or status badge. */
-export const Badge = ({ value, severity = 'secondary', size = 'small', shape, className, children }: BadgeProps) => (
+export const Badge = ({
+    value,
+    severity = 'secondary',
+    size = 'small',
+    shape,
+    className,
+    children,
+}: BadgeProps) => (
     <span
         className={['cratis-badge', className].filter(Boolean).join(' ')}
         data-cratis-part='root'
diff --git a/Source/Display/Chip.tsx b/Source/Display/Chip.tsx
index 5253b205..c3295384 100644
--- a/Source/Display/Chip.tsx
+++ b/Source/Display/Chip.tsx
@@ -20,10 +20,26 @@ export interface ChipProps {
 }
 
 /** A labeled, optionally removable chip. */
-export const Chip = ({ label, icon, removable, onRemove, removeAriaLabel = 'Remove', className }: ChipProps) => (
-    <span className={['cratis-chip', className].filter(Boolean).join(' ')} data-cratis-part='root'>
-        {icon && <span className='cratis-chip__icon' data-cratis-part='icon'>{icon}</span>}
-        <span className='cratis-chip__label' data-cratis-part='label'>{label}</span>
+export const Chip = ({
+    label,
+    icon,
+    removable,
+    onRemove,
+    removeAriaLabel = 'Remove',
+    className,
+}: ChipProps) => (
+    <span
+        className={['cratis-chip', className].filter(Boolean).join(' ')}
+        data-cratis-part='root'
+    >
+        {icon && (
+            <span className='cratis-chip__icon' data-cratis-part='icon'>
+                {icon}
+            </span>
+        )}
+        <span className='cratis-chip__label' data-cratis-part='label'>
+            {label}
+        </span>
         {removable && (
             <button
                 type='button'
diff --git a/Source/Display/Display.css b/Source/Display/Display.css
index 19b7b407..2f31a090 100644
--- a/Source/Display/Display.css
+++ b/Source/Display/Display.css
@@ -13,10 +13,25 @@
     background: var(--cratis-surface-100);
     color: var(--cratis-text-color);
 }
-.cratis-avatar[data-size='large'] { width: 3rem; height: 3rem; }
-.cratis-avatar[data-size='xlarge'] { width: 4rem; height: 4rem; }
-.cratis-avatar__image { width: 100%; height: 100%; object-fit: cover; }
-.cratis-avatar__fallback { display: inline-flex; align-items: center; justify-content: center; font-weight: 600; }
+.cratis-avatar[data-size='large'] {
+    width: 3rem;
+    height: 3rem;
+}
+.cratis-avatar[data-size='xlarge'] {
+    width: 4rem;
+    height: 4rem;
+}
+.cratis-avatar__image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+.cratis-avatar__fallback {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 600;
+}
 
 .cratis-badge,
 .cratis-tag,
@@ -30,19 +45,65 @@
     color: var(--cratis-text-color);
     line-height: 1;
 }
-.cratis-badge { min-width: 1.25rem; min-height: 1.25rem; padding: 0.2rem 0.35rem; font-size: 0.75rem; font-weight: 700; }
-.cratis-badge[data-size='large'] { min-width: 1.75rem; min-height: 1.75rem; font-size: 0.875rem; }
-.cratis-badge[data-size='xlarge'] { min-width: 2.25rem; min-height: 2.25rem; font-size: 1rem; }
-.cratis-badge[data-shape='circle'] { padding: 0; border-radius: 50%; }
-.cratis-tag { padding: 0.35rem 0.55rem; font-size: 0.75rem; font-weight: 600; }
-.cratis-tag[data-rounded='true'] { border-radius: 999px; }
-.cratis-chip { padding: 0.35rem 0.5rem; font-size: 0.875rem; }
+.cratis-badge {
+    min-width: 1.25rem;
+    min-height: 1.25rem;
+    padding: 0.2rem 0.35rem;
+    font-size: 0.75rem;
+    font-weight: 700;
+}
+.cratis-badge[data-size='large'] {
+    min-width: 1.75rem;
+    min-height: 1.75rem;
+    font-size: 0.875rem;
+}
+.cratis-badge[data-size='xlarge'] {
+    min-width: 2.25rem;
+    min-height: 2.25rem;
+    font-size: 1rem;
+}
+.cratis-badge[data-shape='circle'] {
+    padding: 0;
+    border-radius: 50%;
+}
+.cratis-tag {
+    padding: 0.35rem 0.55rem;
+    font-size: 0.75rem;
+    font-weight: 600;
+}
+.cratis-tag[data-rounded='true'] {
+    border-radius: 999px;
+}
+.cratis-chip {
+    padding: 0.35rem 0.5rem;
+    font-size: 0.875rem;
+}
 
-.cratis-badge[data-severity='info'], .cratis-tag[data-severity='info'] { background: color-mix(in srgb, var(--cratis-primary-color) 16%, transparent); color: var(--cratis-primary-color); }
-.cratis-badge[data-severity='success'], .cratis-tag[data-severity='success'] { background: color-mix(in srgb, var(--cratis-green-500) 16%, transparent); color: var(--cratis-green-500); }
-.cratis-badge[data-severity='warn'], .cratis-tag[data-severity='warn'] { background: color-mix(in srgb, var(--cratis-orange-500) 18%, transparent); color: var(--cratis-orange-500); }
-.cratis-badge[data-severity='danger'], .cratis-tag[data-severity='danger'] { background: color-mix(in srgb, var(--cratis-red-500) 16%, transparent); color: var(--cratis-red-500); }
-.cratis-badge[data-severity='contrast'], .cratis-tag[data-severity='contrast'] { background: var(--cratis-text-color); color: var(--cratis-surface-0); }
+.cratis-badge[data-severity='info'],
+.cratis-tag[data-severity='info'] {
+    background: color-mix(in srgb, var(--cratis-primary-color) 16%, transparent);
+    color: var(--cratis-primary-color);
+}
+.cratis-badge[data-severity='success'],
+.cratis-tag[data-severity='success'] {
+    background: color-mix(in srgb, var(--cratis-green-500) 16%, transparent);
+    color: var(--cratis-green-500);
+}
+.cratis-badge[data-severity='warn'],
+.cratis-tag[data-severity='warn'] {
+    background: color-mix(in srgb, var(--cratis-orange-500) 18%, transparent);
+    color: var(--cratis-orange-500);
+}
+.cratis-badge[data-severity='danger'],
+.cratis-tag[data-severity='danger'] {
+    background: color-mix(in srgb, var(--cratis-red-500) 16%, transparent);
+    color: var(--cratis-red-500);
+}
+.cratis-badge[data-severity='contrast'],
+.cratis-tag[data-severity='contrast'] {
+    background: var(--cratis-text-color);
+    color: var(--cratis-surface-0);
+}
 
 .cratis-chip__remove {
     display: inline-flex;
@@ -57,8 +118,13 @@
     color: inherit;
     cursor: pointer;
 }
-.cratis-chip__remove:hover { background: var(--cratis-surface-hover); }
-.cratis-chip__remove:focus-visible { outline: none; box-shadow: var(--cratis-focus-ring); }
+.cratis-chip__remove:hover {
+    background: var(--cratis-surface-hover);
+}
+.cratis-chip__remove:focus-visible {
+    outline: none;
+    box-shadow: var(--cratis-focus-ring);
+}
 
 .cratis-message {
     display: flex;
@@ -70,12 +136,24 @@
     background: var(--cratis-surface-section);
     color: var(--cratis-text-color);
 }
-.cratis-message[data-severity='info'] { border-color: var(--cratis-primary-color); }
-.cratis-message[data-severity='success'] { border-color: var(--cratis-green-500); }
-.cratis-message[data-severity='warn'] { border-color: var(--cratis-orange-500); }
-.cratis-message[data-severity='error'] { border-color: var(--cratis-red-500); }
-.cratis-message__icon { flex: 0 0 auto; }
-.cratis-message__text { min-width: 0; }
+.cratis-message[data-severity='info'] {
+    border-color: var(--cratis-primary-color);
+}
+.cratis-message[data-severity='success'] {
+    border-color: var(--cratis-green-500);
+}
+.cratis-message[data-severity='warn'] {
+    border-color: var(--cratis-orange-500);
+}
+.cratis-message[data-severity='error'] {
+    border-color: var(--cratis-red-500);
+}
+.cratis-message__icon {
+    flex: 0 0 auto;
+}
+.cratis-message__text {
+    min-width: 0;
+}
 
 .cratis-progress-bar {
     position: relative;
@@ -98,33 +176,88 @@
     width: 40%;
     animation: cratis-progress-indeterminate 1.2s ease-in-out infinite;
 }
-.cratis-progress-bar__label { padding-inline: 0.35rem; font-size: 0.7rem; }
+.cratis-progress-bar__label {
+    padding-inline: 0.35rem;
+    font-size: 0.7rem;
+}
 
-.cratis-progress-spinner { display: inline-flex; width: 2rem; height: 2rem; }
-.cratis-progress-spinner__svg { width: 100%; height: 100%; animation: cratis-spinner-rotate 1s linear infinite; }
+.cratis-progress-spinner {
+    display: inline-flex;
+    width: 2rem;
+    height: 2rem;
+}
+.cratis-progress-spinner__svg {
+    width: 100%;
+    height: 100%;
+    animation: cratis-spinner-rotate 1s linear infinite;
+}
 .cratis-progress-spinner__track,
-.cratis-progress-spinner__range { fill: none; stroke-width: 4; }
-.cratis-progress-spinner__track { stroke: var(--cratis-surface-100); }
-.cratis-progress-spinner__range { stroke: var(--cratis-primary-color); stroke-linecap: round; stroke-dasharray: 90 150; }
+.cratis-progress-spinner__range {
+    fill: none;
+    stroke-width: 4;
+}
+.cratis-progress-spinner__track {
+    stroke: var(--cratis-surface-100);
+}
+.cratis-progress-spinner__range {
+    stroke: var(--cratis-primary-color);
+    stroke-linecap: round;
+    stroke-dasharray: 90 150;
+}
 
 .cratis-skeleton {
     display: block;
-    background: linear-gradient(90deg, var(--cratis-surface-100), var(--cratis-surface-hover), var(--cratis-surface-100));
+    background: linear-gradient(
+        90deg,
+        var(--cratis-surface-100),
+        var(--cratis-surface-hover),
+        var(--cratis-surface-100)
+    );
     background-size: 200% 100%;
     animation: cratis-skeleton-pulse 1.4s ease-in-out infinite;
 }
 
-@keyframes cratis-progress-indeterminate { from { transform: translateX(-120%); } to { transform: translateX(350%); } }
-@keyframes cratis-spinner-rotate { to { transform: rotate(360deg); } }
-@keyframes cratis-skeleton-pulse { from { background-position: 200% 0; } to { background-position: -200% 0; } }
+@keyframes cratis-progress-indeterminate {
+    from {
+        transform: translateX(-120%);
+    }
+    to {
+        transform: translateX(350%);
+    }
+}
+@keyframes cratis-spinner-rotate {
+    to {
+        transform: rotate(360deg);
+    }
+}
+@keyframes cratis-skeleton-pulse {
+    from {
+        background-position: 200% 0;
+    }
+    to {
+        background-position: -200% 0;
+    }
+}
 
 @media (prefers-reduced-motion: reduce) {
     .cratis-progress-bar__indicator,
     .cratis-progress-spinner__svg,
-    .cratis-skeleton { animation: none; transition: none; }
+    .cratis-skeleton {
+        animation: none;
+        transition: none;
+    }
 }
 
 @media (forced-colors: active) {
-    .cratis-message, .cratis-chip, .cratis-tag, .cratis-badge { border: 1px solid CanvasText; }
-    .cratis-progress-bar__indicator, .cratis-progress-spinner__range { background: Highlight; stroke: Highlight; }
+    .cratis-message,
+    .cratis-chip,
+    .cratis-tag,
+    .cratis-badge {
+        border: 1px solid CanvasText;
+    }
+    .cratis-progress-bar__indicator,
+    .cratis-progress-spinner__range {
+        background: Highlight;
+        stroke: Highlight;
+    }
 }
diff --git a/Source/Display/Message.tsx b/Source/Display/Message.tsx
index 3242cc44..a2a3042b 100644
--- a/Source/Display/Message.tsx
+++ b/Source/Display/Message.tsx
@@ -4,7 +4,8 @@
 import type { ReactNode } from 'react';
 
 /** Severity tone of a {@link Message}. */
-export type MessageSeverity = 'info' | 'success' | 'warn' | 'error' | 'secondary' | 'contrast';
+export type MessageSeverity =
+    'info' | 'success' | 'warn' | 'error' | 'secondary' | 'contrast';
 
 /** Props for {@link Message}. */
 export interface MessageProps {
@@ -30,7 +31,13 @@ const severitySymbols: Record<MessageSeverity, string> = {
 };
 
 /** A declarative inline status message. */
-export const Message = ({ severity = 'info', text, children, className, icon }: MessageProps) => (
+export const Message = ({
+    severity = 'info',
+    text,
+    children,
+    className,
+    icon,
+}: MessageProps) => (
     <div
         className={['cratis-message', className].filter(Boolean).join(' ')}
         data-cratis-part='root'
@@ -38,10 +45,16 @@ export const Message = ({ severity = 'info', text, children, className, icon }:
         role={severity === 'error' ? 'alert' : 'status'}
     >
         {icon !== false && (
-            <span className='cratis-message__icon' data-cratis-part='icon' aria-hidden='true'>
+            <span
+                className='cratis-message__icon'
+                data-cratis-part='icon'
+                aria-hidden='true'
+            >
                 {icon ?? severitySymbols[severity]}
             </span>
         )}
-        <span className='cratis-message__text' data-cratis-part='text'>{children ?? text}</span>
+        <span className='cratis-message__text' data-cratis-part='text'>
+            {children ?? text}
+        </span>
     </div>
 );
diff --git a/Source/Display/ProgressBar.tsx b/Source/Display/ProgressBar.tsx
index fd825cfd..99a0f0f6 100644
--- a/Source/Display/ProgressBar.tsx
+++ b/Source/Display/ProgressBar.tsx
@@ -14,7 +14,12 @@ export interface ProgressBarProps {
 }
 
 /** A horizontal determinate or indeterminate progress indicator. */
-export const ProgressBar = ({ value = 0, mode = 'determinate', showValue = true, className }: ProgressBarProps) => {
+export const ProgressBar = ({
+    value = 0,
+    mode = 'determinate',
+    showValue = true,
+    className,
+}: ProgressBarProps) => {
     const boundedValue = Math.min(100, Math.max(0, value));
     const ariaValue = mode === 'determinate' ? boundedValue : undefined;
 
diff --git a/Source/Display/ProgressSpinner.tsx b/Source/Display/ProgressSpinner.tsx
index da4b92e7..3542906f 100644
--- a/Source/Display/ProgressSpinner.tsx
+++ b/Source/Display/ProgressSpinner.tsx
@@ -14,7 +14,11 @@ export interface ProgressSpinnerProps {
 }
 
 /** An indeterminate loading spinner. */
-export const ProgressSpinner = ({ style, className, 'aria-label': ariaLabel = 'Loading' }: ProgressSpinnerProps) => (
+export const ProgressSpinner = ({
+    style,
+    className,
+    'aria-label': ariaLabel = 'Loading',
+}: ProgressSpinnerProps) => (
     <span
         className={['cratis-progress-spinner', className].filter(Boolean).join(' ')}
         data-cratis-part='root'
@@ -22,9 +26,26 @@ export const ProgressSpinner = ({ style, className, 'aria-label': ariaLabel = 'L
         role='status'
         aria-label={ariaLabel}
     >
-        <svg className='cratis-progress-spinner__svg' data-cratis-part='svg' viewBox='0 0 50 50' aria-hidden='true'>
-            <circle className='cratis-progress-spinner__track' data-cratis-part='track' cx='25' cy='25' r='20' />
-            <circle className='cratis-progress-spinner__range' data-cratis-part='range' cx='25' cy='25' r='20' />
+        <svg
+            className='cratis-progress-spinner__svg'
+            data-cratis-part='svg'
+            viewBox='0 0 50 50'
+            aria-hidden='true'
+        >
+            <circle
+                className='cratis-progress-spinner__track'
+                data-cratis-part='track'
+                cx='25'
+                cy='25'
+                r='20'
+            />
+            <circle
+                className='cratis-progress-spinner__range'
+                data-cratis-part='range'
+                cx='25'
+                cy='25'
+                r='20'
+            />
         </svg>
     </span>
 );
diff --git a/Source/Display/Skeleton.tsx b/Source/Display/Skeleton.tsx
index 48e98593..32ba3ad7 100644
--- a/Source/Display/Skeleton.tsx
+++ b/Source/Display/Skeleton.tsx
@@ -16,7 +16,13 @@ export interface SkeletonProps {
 }
 
 /** A loading placeholder that reserves content layout. */
-export const Skeleton = ({ width = '100%', height = '1rem', borderRadius, circle, className }: SkeletonProps) => (
+export const Skeleton = ({
+    width = '100%',
+    height = '1rem',
+    borderRadius,
+    circle,
+    className,
+}: SkeletonProps) => (
     <span
         className={['cratis-skeleton', className].filter(Boolean).join(' ')}
         data-cratis-part='root'
diff --git a/Source/Display/Tag.tsx b/Source/Display/Tag.tsx
index 487f7abd..506f090a 100644
--- a/Source/Display/Tag.tsx
+++ b/Source/Display/Tag.tsx
@@ -4,7 +4,8 @@
 import type { ReactNode } from 'react';
 
 /** Severity tone of a {@link Tag}. */
-export type TagSeverity = 'secondary' | 'success' | 'info' | 'warn' | 'danger' | 'contrast';
+export type TagSeverity =
+    'secondary' | 'success' | 'info' | 'warn' | 'danger' | 'contrast';
 
 /** Props for {@link Tag}. */
 export interface TagProps {
@@ -23,14 +24,27 @@ export interface TagProps {
 }
 
 /** A small colored status label. */
-export const Tag = ({ value, severity = 'secondary', rounded, icon, className, children }: TagProps) => (
+export const Tag = ({
+    value,
+    severity = 'secondary',
+    rounded,
+    icon,
+    className,
+    children,
+}: TagProps) => (
     <span
         className={['cratis-tag', className].filter(Boolean).join(' ')}
         data-cratis-part='root'
         data-severity={severity}
         data-rounded={rounded || undefined}
     >
-        {icon && <span className='cratis-tag__icon' data-cratis-part='icon'>{icon}</span>}
-        <span className='cratis-tag__label' data-cratis-part='label'>{value ?? children}</span>
+        {icon && (
+            <span className='cratis-tag__icon' data-cratis-part='icon'>
+                {icon}
+            </span>
+        )}
+        <span className='cratis-tag__label' data-cratis-part='label'>
+            {value ?? children}
+        </span>
     </span>
 );
diff --git a/Source/Dropdown/Dropdown.css b/Source/Dropdown/Dropdown.css
index 0a8df528..9259551f 100644
--- a/Source/Dropdown/Dropdown.css
+++ b/Source/Dropdown/Dropdown.css
@@ -8,7 +8,11 @@
     color: var(--cratis-text-color);
 }
 .cratis-dropdown__select,
-.cratis-dropdown__combobox { position: relative; display: flex; width: 100%; }
+.cratis-dropdown__combobox {
+    position: relative;
+    display: flex;
+    width: 100%;
+}
 .cratis-dropdown__trigger,
 .cratis-dropdown__filter,
 .cratis-dropdown__multiple {
@@ -29,14 +33,32 @@
     text-align: start;
     cursor: pointer;
 }
-.cratis-dropdown__filter { padding: 0.5rem 4rem 0.5rem 0.75rem; }
-.cratis-dropdown__multiple { padding: 0.4rem; }
+.cratis-dropdown__filter {
+    padding: 0.5rem 4rem 0.5rem 0.75rem;
+}
+.cratis-dropdown__multiple {
+    padding: 0.4rem;
+}
 .cratis-dropdown__trigger:focus-visible,
 .cratis-dropdown__filter:focus-visible,
-.cratis-dropdown__multiple:focus-visible { outline: none; box-shadow: var(--cratis-focus-ring); border-color: var(--cratis-primary-color); }
-.cratis-dropdown[data-invalid='true'] :is(.cratis-dropdown__trigger, .cratis-dropdown__filter, .cratis-dropdown__multiple) { border-color: var(--cratis-red-500); }
-.cratis-dropdown[data-disabled='true'] { opacity: 0.6; }
-.cratis-dropdown__value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.cratis-dropdown__multiple:focus-visible {
+    outline: none;
+    box-shadow: var(--cratis-focus-ring);
+    border-color: var(--cratis-primary-color);
+}
+.cratis-dropdown[data-invalid='true']
+    :is(.cratis-dropdown__trigger, .cratis-dropdown__filter, .cratis-dropdown__multiple) {
+    border-color: var(--cratis-red-500);
+}
+.cratis-dropdown[data-disabled='true'] {
+    opacity: 0.6;
+}
+.cratis-dropdown__value {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
 .cratis-dropdown__indicator {
     position: absolute;
     inset-inline-end: 0.55rem;
@@ -70,8 +92,14 @@
     color: var(--cratis-text-color-secondary);
     cursor: pointer;
 }
-.cratis-dropdown__clear:hover { background: var(--cratis-surface-hover); color: var(--cratis-text-color); }
-.cratis-dropdown__clear:focus-visible { outline: none; box-shadow: var(--cratis-focus-ring); }
+.cratis-dropdown__clear:hover {
+    background: var(--cratis-surface-hover);
+    color: var(--cratis-text-color);
+}
+.cratis-dropdown__clear:focus-visible {
+    outline: none;
+    box-shadow: var(--cratis-focus-ring);
+}
 .cratis-dropdown__popover {
     z-index: 1200;
     min-width: var(--trigger-width);
@@ -81,9 +109,13 @@
     border-radius: var(--cratis-border-radius);
     background: var(--cratis-surface-overlay);
     color: var(--cratis-text-color);
-    box-shadow: 0 0.5rem 1.5rem color-mix(in srgb, var(--cratis-text-color) 18%, transparent);
+    box-shadow: 0 0.5rem 1.5rem
+        color-mix(in srgb, var(--cratis-text-color) 18%, transparent);
+}
+.cratis-dropdown__listbox {
+    padding: 0.3rem;
+    outline: none;
 }
-.cratis-dropdown__listbox { padding: 0.3rem; outline: none; }
 .cratis-dropdown__option {
     display: flex;
     min-height: 2.25rem;
@@ -92,15 +124,26 @@
     border-radius: calc(var(--cratis-border-radius) * 0.75);
     cursor: default;
 }
-.cratis-dropdown__option[data-focused] { background: var(--cratis-surface-hover); }
-.cratis-dropdown__option[data-selected] { background: var(--cratis-highlight-bg); color: var(--cratis-highlight-text-color); }
-.cratis-dropdown__option[data-disabled] { opacity: 0.5; }
+.cratis-dropdown__option[data-focused] {
+    background: var(--cratis-surface-hover);
+}
+.cratis-dropdown__option[data-selected] {
+    background: var(--cratis-highlight-bg);
+    color: var(--cratis-highlight-text-color);
+}
+.cratis-dropdown__option[data-disabled] {
+    opacity: 0.5;
+}
 
 @media (forced-colors: active) {
     .cratis-dropdown__trigger,
     .cratis-dropdown__filter,
     .cratis-dropdown__multiple,
-    .cratis-dropdown__popover { border-color: CanvasText; }
+    .cratis-dropdown__popover {
+        border-color: CanvasText;
+    }
     .cratis-dropdown__option[data-focused],
-    .cratis-dropdown__option[data-selected] { outline: 2px solid Highlight; }
+    .cratis-dropdown__option[data-selected] {
+        outline: 2px solid Highlight;
+    }
 }
diff --git a/Source/Dropdown/Dropdown.tsx b/Source/Dropdown/Dropdown.tsx
index f3b2d5c2..d914940c 100644
--- a/Source/Dropdown/Dropdown.tsx
+++ b/Source/Dropdown/Dropdown.tsx
@@ -42,14 +42,7 @@ type DropdownTriggerAttributes = Omit<
 >;
 
 type DropdownOptionValue =
-    | string
-    | number
-    | boolean
-    | bigint
-    | symbol
-    | object
-    | null
-    | undefined;
+    string | number | boolean | bigint | symbol | object | null | undefined;
 
 /** Stable Cratis-owned parts for styling a {@link Dropdown}. */
 export interface DropdownParts {
@@ -119,7 +112,8 @@ const optionValue = (value: unknown): DropdownOptionValue => {
 };
 
 const readField = (option: unknown, field: string | undefined): DropdownOptionValue => {
-    if (!field || option === null || typeof option !== 'object') return optionValue(option);
+    if (!field || option === null || typeof option !== 'object')
+        return optionValue(option);
     return field in option
         ? optionValue((option as Record<string, unknown>)[field])
         : optionValue(option);
@@ -129,23 +123,26 @@ const resolveOptions = (
     options: unknown[] | undefined,
     optionLabel: string | undefined,
     optionValue: string | undefined,
-): ResolvedOption[] => (options ?? []).map((option, index) => {
-    const value = readField(option, optionValue);
-    const labelValue = readField(option, optionLabel);
-    const keyValue = value ?? index;
-    const disabled = option !== null && typeof option === 'object' && 'disabled' in option
-        ? Boolean((option as { disabled?: unknown }).disabled)
-        : false;
+): ResolvedOption[] =>
+    (options ?? []).map((option, index) => {
+        const value = readField(option, optionValue);
+        const labelValue = readField(option, optionLabel);
+        const keyValue = value ?? index;
+        const disabled =
+            option !== null && typeof option === 'object' && 'disabled' in option
+                ? Boolean((option as { disabled?: unknown }).disabled)
+                : false;
 
-    return {
-        key: `${typeof keyValue}:${String(keyValue)}:${index}`,
-        label: String(labelValue ?? value ?? ''),
-        value,
-        disabled,
-    };
-});
+        return {
+            key: `${typeof keyValue}:${String(keyValue)}:${index}`,
+            label: String(labelValue ?? value ?? ''),
+            value,
+            disabled,
+        };
+    });
 
-const classNames = (...values: Array<string | undefined>) => values.filter(Boolean).join(' ');
+const classNames = (...values: Array<string | undefined>) =>
+    values.filter(Boolean).join(' ');
 
 /** A renderer-independent single or multiple select with stable Cratis parts. */
 export const Dropdown = <T = unknown,>({
@@ -173,21 +170,25 @@ export const Dropdown = <T = unknown,>({
     pt,
 }: DropdownProps<T>) => {
     const resolvedOptions = resolveOptions(options, optionLabel, optionValue);
-    const selectedOption = resolvedOptions.find(option => Object.is(option.value, value));
+    const selectedOption = resolvedOptions.find((option) =>
+        Object.is(option.value, value),
+    );
     const selectedKey = selectedOption?.key ?? null;
     const rootClassName = classNames('cratis-dropdown', pt?.root?.className, className);
     const triggerId = id ?? pt?.trigger?.id;
 
     const selectOption = (key: Key | null) => {
-        const option = resolvedOptions.find(candidate => candidate.key === String(key));
+        const option = resolvedOptions.find((candidate) => candidate.key === String(key));
         onChange?.({ value: (option?.value ?? null) as T });
     };
 
     if (multiple) {
         const selectedValues = Array.isArray(value) ? value : [];
         const selectedKeys = resolvedOptions
-            .filter(option => selectedValues.some(selected => Object.is(selected, option.value)))
-            .map(option => option.key);
+            .filter((option) =>
+                selectedValues.some((selected) => Object.is(selected, option.value)),
+            )
+            .map((option) => option.key);
 
         return (
             <span
@@ -211,18 +212,28 @@ export const Dropdown = <T = unknown,>({
                     aria-labelledby={ariaLabelledby}
                     aria-describedby={ariaDescribedby}
                     aria-invalid={invalid || undefined}
-                    className={classNames('cratis-dropdown__multiple', pt?.multiple?.className)}
+                    className={classNames(
+                        'cratis-dropdown__multiple',
+                        pt?.multiple?.className,
+                    )}
                     data-cratis-part='multiple'
-                    onChange={event => {
-                        const keys = Array.from(event.currentTarget.selectedOptions, option => option.value);
+                    onChange={(event) => {
+                        const keys = Array.from(
+                            event.currentTarget.selectedOptions,
+                            (option) => option.value,
+                        );
                         const values = resolvedOptions
-                            .filter(option => keys.includes(option.key))
-                            .map(option => option.value);
+                            .filter((option) => keys.includes(option.key))
+                            .map((option) => option.value);
                         onChange?.({ value: values as T, originalEvent: event });
                     }}
                 >
-                    {resolvedOptions.map(option => (
-                        <option key={option.key} value={option.key} disabled={option.disabled}>
+                    {resolvedOptions.map((option) => (
+                        <option
+                            key={option.key}
+                            value={option.key}
+                            disabled={option.disabled}
+                        >
                             {option.label}
                         </option>
                     ))}
@@ -259,12 +270,18 @@ export const Dropdown = <T = unknown,>({
                         placeholder={filterPlaceholder ?? placeholder}
                         tabIndex={tabIndex}
                         aria-invalid={invalid || undefined}
-                        className={classNames('cratis-dropdown__filter', pt?.filter?.className)}
+                        className={classNames(
+                            'cratis-dropdown__filter',
+                            pt?.filter?.className,
+                        )}
                         data-cratis-part='filter'
                     />
                     <ComboBoxButton
                         {...pt?.trigger}
-                        className={classNames('cratis-dropdown__indicator', pt?.trigger?.className)}
+                        className={classNames(
+                            'cratis-dropdown__indicator',
+                            pt?.trigger?.className,
+                        )}
                         data-cratis-part='trigger'
                         aria-label={pt?.trigger?.['aria-label'] ?? 'Show options'}
                     >
@@ -274,7 +291,10 @@ export const Dropdown = <T = unknown,>({
                         <button
                             {...pt?.clear}
                             type='button'
-                            className={classNames('cratis-dropdown__clear', pt?.clear?.className)}
+                            className={classNames(
+                                'cratis-dropdown__clear',
+                                pt?.clear?.className,
+                            )}
                             data-cratis-part='clear'
                             aria-label={pt?.clear?.['aria-label'] ?? 'Clear selection'}
                             onClick={() => onChange?.({ value: null as T })}
@@ -284,20 +304,30 @@ export const Dropdown = <T = unknown,>({
                     )}
                     <ComboBoxPopover
                         {...pt?.popover}
-                        className={classNames('cratis-dropdown__popover', pt?.popover?.className)}
+                        className={classNames(
+                            'cratis-dropdown__popover',
+                            pt?.popover?.className,
+                        )}
+                        style={{ zIndex: 1200, ...pt?.popover?.style }}
                         data-cratis-part='popover'
                     >
                         <ComboBoxListBox
                             items={resolvedOptions}
-                            className={classNames('cratis-dropdown__listbox', pt?.listbox?.className)}
+                            className={classNames(
+                                'cratis-dropdown__listbox',
+                                pt?.listbox?.className,
+                            )}
                             data-cratis-part='listbox'
                         >
-                            {option => (
+                            {(option) => (
                                 <ComboBoxListBoxItem
                                     id={option.key}
                                     textValue={option.label}
                                     isDisabled={option.disabled}
-                                    className={classNames('cratis-dropdown__option', pt?.option?.className)}
+                                    className={classNames(
+                                        'cratis-dropdown__option',
+                                        pt?.option?.className,
+                                    )}
                                     data-cratis-part='option'
                                 >
                                     {option.label}
@@ -335,19 +365,28 @@ export const Dropdown = <T = unknown,>({
                     id={triggerId}
                     excludeFromTabOrder={tabIndex === -1}
                     aria-invalid={invalid || undefined}
-                    className={classNames('cratis-dropdown__trigger', pt?.trigger?.className)}
+                    className={classNames(
+                        'cratis-dropdown__trigger',
+                        pt?.trigger?.className,
+                    )}
                     data-cratis-part='trigger'
                 >
                     <SelectValue
                         {...pt?.value}
-                        className={classNames('cratis-dropdown__value', pt?.value?.className)}
+                        className={classNames(
+                            'cratis-dropdown__value',
+                            pt?.value?.className,
+                        )}
                         data-cratis-part='value'
                     >
                         {selectedOption?.label ?? placeholder}
                     </SelectValue>
                     <span
                         {...pt?.indicator}
-                        className={classNames('cratis-dropdown__indicator', pt?.indicator?.className)}
+                        className={classNames(
+                            'cratis-dropdown__indicator',
+                            pt?.indicator?.className,
+                        )}
                         data-cratis-part='indicator'
                         aria-hidden='true'
                     >
@@ -358,7 +397,10 @@ export const Dropdown = <T = unknown,>({
                     <button
                         {...pt?.clear}
                         type='button'
-                        className={classNames('cratis-dropdown__clear', pt?.clear?.className)}
+                        className={classNames(
+                            'cratis-dropdown__clear',
+                            pt?.clear?.className,
+                        )}
                         data-cratis-part='clear'
                         aria-label={pt?.clear?.['aria-label'] ?? 'Clear selection'}
                         onClick={() => onChange?.({ value: null as T })}
@@ -368,20 +410,30 @@ export const Dropdown = <T = unknown,>({
                 )}
                 <Popover
                     {...pt?.popover}
-                    className={classNames('cratis-dropdown__popover', pt?.popover?.className)}
+                    className={classNames(
+                        'cratis-dropdown__popover',
+                        pt?.popover?.className,
+                    )}
+                    style={{ zIndex: 1200, ...pt?.popover?.style }}
                     data-cratis-part='popover'
                 >
                     <ListBox
                         items={resolvedOptions}
-                        className={classNames('cratis-dropdown__listbox', pt?.listbox?.className)}
+                        className={classNames(
+                            'cratis-dropdown__listbox',
+                            pt?.listbox?.className,
+                        )}
                         data-cratis-part='listbox'
                     >
-                        {option => (
+                        {(option) => (
                             <ListBoxItem
                                 id={option.key}
                                 textValue={option.label}
                                 isDisabled={option.disabled}
-                                className={classNames('cratis-dropdown__option', pt?.option?.className)}
+                                className={classNames(
+                                    'cratis-dropdown__option',
+                                    pt?.option?.className,
+                                )}
                                 data-cratis-part='option'
                             >
                                 {option.label}
diff --git a/Source/Dropdown/for_Dropdown/when_configuring_accessible_name.tsx b/Source/Dropdown/for_Dropdown/when_configuring_accessible_name.tsx
index 7fde18b1..d121ae67 100644
--- a/Source/Dropdown/for_Dropdown/when_configuring_accessible_name.tsx
+++ b/Source/Dropdown/for_Dropdown/when_configuring_accessible_name.tsx
@@ -72,7 +72,9 @@ describe('when configuring the accessible name', () => {
     });
 
     it('should put the label reference on the combobox', () => {
-        expect(trigger.getAttribute('aria-labelledby')?.split(' ')).to.include('role-label');
+        expect(trigger.getAttribute('aria-labelledby')?.split(' ')).to.include(
+            'role-label',
+        );
     });
 
     it('should put the description reference on the combobox', () => {
diff --git a/Source/Dropdown/for_Dropdown/when_opened_inside_a_dialog.ts b/Source/Dropdown/for_Dropdown/when_opened_inside_a_dialog.ts
index 418cc41a..4c240a41 100644
--- a/Source/Dropdown/for_Dropdown/when_opened_inside_a_dialog.ts
+++ b/Source/Dropdown/for_Dropdown/when_opened_inside_a_dialog.ts
@@ -25,10 +25,14 @@ describe('when a dropdown is opened inside a dialog', () => {
 
     beforeEach(async () => {
         // SAFETY: React's test-environment flag is an intentionally undocumented global absent from DOM typings.
-        (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+        (
+            globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
+        ).IS_REACT_ACT_ENVIRONMENT = true;
         // SAFETY: jsdom omits ResizeObserver; the overlay only calls these observer methods.
         (globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver ??= class {
-            observe() { } unobserve() { } disconnect() { }
+            observe() {}
+            unobserve() {}
+            disconnect() {}
         };
 
         container = document.createElement('div');
@@ -36,37 +40,63 @@ describe('when a dropdown is opened inside a dialog', () => {
         root = createRoot(container);
 
         await act(async () => {
-            root.render(React.createElement(CratisComponentsProvider, {
-                children: React.createElement(Dialog, {
-                    title: 'Pick something',
-                    visible: true,
-                    buttons: null,
-                    children: React.createElement(Dropdown, {
-                        options: [{ id: '1', name: 'One' }, { id: '2', name: 'Two' }],
-                        optionLabel: 'name',
-                        optionValue: 'id'
-                    })
-                })
-            }));
+            root.render(
+                React.createElement(CratisComponentsProvider, {
+                    children: React.createElement(Dialog, {
+                        title: 'Pick something',
+                        visible: true,
+                        buttons: null,
+                        children: React.createElement(Dropdown, {
+                            options: [
+                                { id: '1', name: 'One' },
+                                { id: '2', name: 'Two' },
+                            ],
+                            optionLabel: 'name',
+                            optionValue: 'id',
+                            'aria-label': 'Pick value',
+                        }),
+                    }),
+                }),
+            );
+        });
+        await act(async () => {
+            await new Promise((resolve) => setTimeout(resolve, 300));
         });
-        await act(async () => { await new Promise(resolve => setTimeout(resolve, 300)); });
 
-        const trigger = document.querySelector('[data-cratis-part="trigger"]') as HTMLElement;
-        await act(async () => { trigger.click(); });
-        await act(async () => { await new Promise(resolve => setTimeout(resolve, 300)); });
+        const trigger = document.querySelector(
+            '[data-cratis-part="trigger"]',
+        ) as HTMLElement;
+        await act(async () => {
+            trigger.click();
+        });
+        await act(async () => {
+            await new Promise((resolve) => setTimeout(resolve, 300));
+        });
 
-        const dialogPositioner = document.querySelector('[data-scope="dialog"][data-part="positioner"]') as HTMLElement;
-        const dialogPopup = document.querySelector('[data-scope="dialog"][data-part="popup"]') as HTMLElement;
-        const panel = document.querySelector('[data-cratis-part="popover"]') as HTMLElement;
+        const dialogPositioner = document.querySelector(
+            '.cratis-dialog__backdrop[data-cratis-part="backdrop"]',
+        ) as HTMLElement;
+        const dialogPopup = document.querySelector(
+            '.cratis-dialog[data-cratis-part="root"]',
+        ) as HTMLElement;
+        const panel = document.querySelector(
+            '[data-cratis-part="popover"]',
+        ) as HTMLElement;
 
-        dialogPositionerZIndex = Number.parseInt(getComputedStyle(dialogPositioner).zIndex, 10);
+        dialogPositionerZIndex = Number.parseInt(
+            getComputedStyle(dialogPositioner).zIndex,
+            10,
+        );
         panelZIndex = Number.parseInt(getComputedStyle(panel).zIndex, 10);
         panelIsInsideTheDialog = dialogPopup.contains(panel);
-        panelIsPortaledToTheBody = document.body.contains(panel) && !container.contains(panel);
+        panelIsPortaledToTheBody =
+            document.body.contains(panel) && !container.contains(panel);
     });
 
     afterEach(async () => {
-        await act(async () => { root.unmount(); });
+        await act(async () => {
+            root.unmount();
+        });
         container.remove();
     });
 
diff --git a/Source/Dropdown/for_Dropdown/when_options_carry_label_and_value.ts b/Source/Dropdown/for_Dropdown/when_options_carry_label_and_value.ts
index 825ae138..ffa873cc 100644
--- a/Source/Dropdown/for_Dropdown/when_options_carry_label_and_value.ts
+++ b/Source/Dropdown/for_Dropdown/when_options_carry_label_and_value.ts
@@ -20,10 +20,14 @@ describe('when options carry label and value', () => {
 
     beforeEach(async () => {
         // SAFETY: React's test-environment flag and ResizeObserver polyfill are test-only globals absent from jsdom typings.
-        (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+        (
+            globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
+        ).IS_REACT_ACT_ENVIRONMENT = true;
         // SAFETY: The overlay implementation only needs the observer methods supplied by this jsdom polyfill.
         (globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver ??= class {
-            observe() { } unobserve() { } disconnect() { }
+            observe() {}
+            unobserve() {}
+            disconnect() {}
         };
 
         container = document.createElement('div');
@@ -31,15 +35,21 @@ describe('when options carry label and value', () => {
         root = createRoot(container);
 
         await act(async () => {
-            root.render(React.createElement(CratisComponentsProvider, {
-                children: React.createElement(Dropdown, {
-                    value: 'new',
-                    options: [{ label: 'New project', value: 'new' }, { label: 'Sample', value: 'sample' }],
-                })
-            }));
+            root.render(
+                React.createElement(CratisComponentsProvider, {
+                    children: React.createElement(Dropdown, {
+                        value: 'new',
+                        options: [
+                            { label: 'New project', value: 'new' },
+                            { label: 'Sample', value: 'sample' },
+                        ],
+                    }),
+                }),
+            );
         });
 
-        triggerText = container.querySelector('[data-cratis-part="value"]')?.textContent ?? '';
+        triggerText =
+            container.querySelector('[data-cratis-part="value"]')?.textContent ?? '';
     });
 
     afterEach(async () => {
diff --git a/Source/Notifications/Toaster.css b/Source/Notifications/Toaster.css
index 3d54bdcc..a4d954f0 100644
--- a/Source/Notifications/Toaster.css
+++ b/Source/Notifications/Toaster.css
@@ -1,61 +1,136 @@
 /* Copyright (c) Cratis. All rights reserved. */
 /* Licensed under the MIT license. See LICENSE file in the project root for full license information. */
 
-/* Baseline toast card — a notification needs a visible surface even before a
-   theme preset is applied, so this ships a token-based default that a preset or
-   `pt` can still override. */
+.cratis-toaster {
+    position: fixed;
+    z-index: 1400;
+    display: flex;
+    width: min(26rem, calc(100vw - 2rem));
+    flex-direction: column;
+    gap: 0.75rem;
+    pointer-events: none;
+}
+.cratis-toaster[data-position^='top'] {
+    top: 1rem;
+}
+.cratis-toaster[data-position^='bottom'] {
+    bottom: 1rem;
+}
+.cratis-toaster[data-position$='left'] {
+    left: 1rem;
+}
+.cratis-toaster[data-position$='right'] {
+    right: 1rem;
+}
+.cratis-toaster[data-position$='center'] {
+    left: 50%;
+    transform: translateX(-50%);
+}
+
 .cratis-toast {
     display: flex;
-    align-items: flex-start;
-    gap: 0.625rem;
     min-width: 18rem;
     max-width: 26rem;
     padding: 0.75rem 1rem;
+    align-items: flex-start;
+    gap: 0.625rem;
+    border: 1px solid var(--cratis-surface-border);
+    border-inline-start: 4px solid var(--cratis-surface-border);
+    border-radius: calc(var(--cratis-border-radius) * 1.25);
     background: var(--cratis-surface-overlay);
     color: var(--cratis-text-color);
-    border: 1px solid var(--cratis-surface-border);
-    border-left: 4px solid var(--cratis-surface-border);
-    border-radius: 0.5rem;
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
+    box-shadow: 0 0.5rem 1.5rem
+        color-mix(in srgb, var(--cratis-text-color) 24%, transparent);
+    pointer-events: auto;
 }
-
-.cratis-toast [data-part="content"] {
-    flex: 1;
-    min-width: 0;
+.cratis-toast__content {
     display: flex;
+    min-width: 0;
+    flex: 1;
     flex-direction: column;
     gap: 0.125rem;
 }
-
-.cratis-toast [data-part="title"] {
+.cratis-toast__title {
     font-weight: 600;
 }
-
-.cratis-toast [data-part="description"] {
-    font-size: 0.875rem;
+.cratis-toast__description {
     color: var(--cratis-text-color-secondary);
+    font-size: 0.875rem;
     white-space: pre-line;
 }
-
-.cratis-toast [data-part="close"] {
-    border: none;
+.cratis-toast__icon {
+    flex: 0 0 auto;
+}
+.cratis-toast__close {
+    display: inline-flex;
+    width: 1.75rem;
+    height: 1.75rem;
+    padding: 0;
+    align-items: center;
+    justify-content: center;
+    border: 0;
+    border-radius: 50%;
     background: transparent;
     color: var(--cratis-text-color-secondary);
     cursor: pointer;
-    padding: 0.125rem;
-    border-radius: 0.25rem;
 }
-
-.cratis-toast [data-part="close"]:hover {
+.cratis-toast__close:hover {
+    background: var(--cratis-surface-hover);
     color: var(--cratis-text-color);
 }
+.cratis-toast__close:focus-visible {
+    outline: none;
+    box-shadow: var(--cratis-focus-ring);
+}
+.cratis-toast__action {
+    align-self: flex-start;
+    margin-top: 0.4rem;
+}
+.cratis-toast[data-loading='true'] .cratis-toast__icon {
+    animation: cratis-toast-spin 800ms linear infinite;
+}
+.cratis-toast[data-severity='success'] {
+    border-inline-start-color: var(--cratis-green-500);
+}
+.cratis-toast[data-severity='info'] {
+    border-inline-start-color: var(--cratis-primary-color);
+}
+.cratis-toast[data-severity='warn'] {
+    border-inline-start-color: var(--cratis-orange-500);
+}
+.cratis-toast[data-severity='error'] {
+    border-inline-start-color: var(--cratis-red-500);
+}
+.cratis-toast[data-severity='success'] .cratis-toast__icon {
+    color: var(--cratis-green-500);
+}
+.cratis-toast[data-severity='info'] .cratis-toast__icon {
+    color: var(--cratis-primary-color);
+}
+.cratis-toast[data-severity='warn'] .cratis-toast__icon {
+    color: var(--cratis-orange-500);
+}
+.cratis-toast[data-severity='error'] .cratis-toast__icon {
+    color: var(--cratis-red-500);
+}
 
-.cratis-toast[data-severity="success"] { border-left-color: var(--cratis-green-500); }
-.cratis-toast[data-severity="info"]    { border-left-color: var(--cratis-primary-color); }
-.cratis-toast[data-severity="warn"]    { border-left-color: var(--cratis-yellow-500, #eab308); }
-.cratis-toast[data-severity="error"]   { border-left-color: var(--cratis-red-500); }
-
-.cratis-toast[data-severity="success"] [data-part="icon"] { color: var(--cratis-green-500); }
-.cratis-toast[data-severity="info"]    [data-part="icon"] { color: var(--cratis-primary-color); }
-.cratis-toast[data-severity="warn"]    [data-part="icon"] { color: var(--cratis-yellow-500, #eab308); }
-.cratis-toast[data-severity="error"]   [data-part="icon"] { color: var(--cratis-red-500); }
+@keyframes cratis-toast-spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+@media (prefers-reduced-motion: reduce) {
+    .cratis-toast__icon {
+        animation: none !important;
+    }
+}
+@media (forced-colors: active) {
+    .cratis-toast {
+        border-color: CanvasText;
+    }
+    .cratis-toast__close:focus-visible {
+        outline: 2px solid Highlight;
+        outline-offset: 2px;
+        box-shadow: none;
+    }
+}
diff --git a/Source/Notifications/Toaster.stories.tsx b/Source/Notifications/Toaster.stories.tsx
index b145aeaa..ee247abd 100644
--- a/Source/Notifications/Toaster.stories.tsx
+++ b/Source/Notifications/Toaster.stories.tsx
@@ -2,7 +2,7 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import type { Meta, StoryObj } from '@storybook/react';
-import { Button } from 'primereact/button';
+import { Button } from '../Common/Button';
 import { Toaster } from './Toaster';
 import { toast } from './toast';
 import { toastCommandResult } from './toastCommandResult';
@@ -18,30 +18,98 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-const makeResult = (over: Partial<ICommandResult>): ICommandResult =>
-    ({ isSuccess: false, isAuthorized: true, isValid: true, hasExceptions: false, validationResults: [], exceptionMessages: [], response: {}, ...over } as unknown as ICommandResult);
+const makeResult = (over: Partial<ICommandResult>): ICommandResult => {
+    // SAFETY: Stories construct only the ICommandResult fields consumed by toastCommandResult.
+    return {
+        isSuccess: false,
+        isAuthorized: true,
+        isValid: true,
+        hasExceptions: false,
+        validationResults: [],
+        exceptionMessages: [],
+        response: {},
+        ...over,
+    } as unknown as ICommandResult;
+};
 
 /** Fire toasts of each severity, plus the Arc command-result helper. */
 export const Playground: Story = {
     render: () => (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem', width: '20rem' }}>
-            <Toaster position="top-right" />
-            <Button onClick={() => toast.success({ title: 'Saved', description: 'Your changes were saved.' })}>
+        <div
+            style={{
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '0.5rem',
+                width: '20rem',
+            }}
+        >
+            <Toaster position='top-right' />
+            <Button
+                onClick={() =>
+                    toast.success({
+                        title: 'Saved',
+                        description: 'Your changes were saved.',
+                    })
+                }
+            >
                 <span>Success</span>
             </Button>
-            <Button severity="info" onClick={() => toast.info({ title: 'Heads up', description: 'A new version is available.' })}>
+            <Button
+                severity='info'
+                onClick={() =>
+                    toast.info({
+                        title: 'Heads up',
+                        description: 'A new version is available.',
+                    })
+                }
+            >
                 <span>Info</span>
             </Button>
-            <Button severity="warn" onClick={() => toast.warn({ title: 'Careful', description: 'This action is irreversible.' })}>
+            <Button
+                severity='warn'
+                onClick={() =>
+                    toast.warn({
+                        title: 'Careful',
+                        description: 'This action is irreversible.',
+                    })
+                }
+            >
                 <span>Warn</span>
             </Button>
-            <Button severity="danger" onClick={() => toast.error({ title: 'Failed', description: 'Please try again.' })}>
+            <Button
+                severity='danger'
+                onClick={() =>
+                    toast.error({ title: 'Failed', description: 'Please try again.' })
+                }
+            >
                 <span>Error</span>
             </Button>
-            <Button variant="outlined" onClick={() => toastCommandResult(makeResult({ isValid: false, validationResults: [{ message: 'Name is required' }, { message: 'Email is invalid' }] as unknown as ICommandResult['validationResults'] }), { validationTitle: 'Could not register author' })}>
+            <Button
+                outlined
+                onClick={() =>
+                    toastCommandResult(
+                        makeResult({
+                            isValid: false,
+                            // SAFETY: Story validation objects include the message field toastCommandResult reads.
+                            validationResults: [
+                                { message: 'Name is required' },
+                                { message: 'Email is invalid' },
+                            ] as unknown as ICommandResult['validationResults'],
+                        }),
+                        { validationTitle: 'Could not register author' },
+                    )
+                }
+            >
                 <span>Command validation failure</span>
             </Button>
-            <Button variant="outlined" onClick={() => toastCommandResult(makeResult({ isSuccess: true }), { successTitle: 'Author registered' })}>
+            <Button
+                outlined
+                onClick={() =>
+                    toastCommandResult(makeResult({ isSuccess: true }), {
+                        successTitle: 'Author registered',
+                    })
+                }
+            >
                 <span>Command success</span>
             </Button>
         </div>
diff --git a/Source/Notifications/Toaster.tsx b/Source/Notifications/Toaster.tsx
index 6ece92c1..da24a38e 100644
--- a/Source/Notifications/Toaster.tsx
+++ b/Source/Notifications/Toaster.tsx
@@ -1,158 +1,209 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { useMemo } from 'react';
-import { Toaster as PrimeToaster, useToasterContext } from 'primereact/toaster';
-import { Toast } from 'primereact/toast';
-import type { ToastRootProps } from '@primereact/types/primitive/toast';
-import type {
-    ToasterRegionProps,
-    ToastType as PrimeReactToastType,
-} from '@primereact/types/primitive/toaster';
-import type { ToasterPosition } from '@primereact/types/headless/toaster';
+import {
+    useEffect,
+    useState,
+    useSyncExternalStore,
+    type ButtonHTMLAttributes,
+    type HTMLAttributes,
+} from 'react';
+import { createPortal } from 'react-dom';
+import {
+    getToastSnapshot,
+    subscribeToToasts,
+    toast,
+    type ToastRecord,
+    type ToastSeverity,
+} from './toast';
 
-/**
- * Reads the live toasts from the toaster context and renders each one. Must be
- * mounted inside `PrimeToaster.Root` (which provides the context). The
- * imperative `toast(...)` calls push into the same module-level store this
- * subscribes to, so a single mounted region shows toasts from anywhere.
- */
-interface FramedToastProps {
-    item: PrimeReactToastType;
-    dismissAriaLabel: string;
-    pt?: ToastRootProps['pt'];
+export type ToasterPosition =
+    | 'top-left'
+    | 'top-center'
+    | 'top-right'
+    | 'bottom-left'
+    | 'bottom-center'
+    | 'bottom-right';
+
+export interface ToasterPassThrough {
+    region?: HTMLAttributes<HTMLDivElement>;
+    toast?: HTMLAttributes<HTMLElement>;
+    icon?: HTMLAttributes<HTMLSpanElement>;
+    content?: HTMLAttributes<HTMLDivElement>;
+    title?: HTMLAttributes<HTMLDivElement>;
+    description?: HTMLAttributes<HTMLDivElement>;
+    close?: ButtonHTMLAttributes<HTMLButtonElement>;
+    action?: ButtonHTMLAttributes<HTMLButtonElement>;
 }
 
-const FramedToast = ({ item, dismissAriaLabel, pt }: FramedToastProps) => {
-    const customBody = item.render;
-    const framedToast = useMemo<PrimeReactToastType>(
-        () => ({
-            ...item,
-            render: undefined,
-            onDismiss: item.onDismiss ? () => item.onDismiss?.(item) : undefined,
-            onTimeout: item.onTimeout ? () => item.onTimeout?.(item) : undefined,
-        }),
-        [item],
-    );
+export interface ToasterProps {
+    position?: ToasterPosition;
+    limit?: number;
+    timeout?: number;
+    dismissAriaLabel?: string;
+    regionAriaLabel?: string;
+    pt?: ToasterPassThrough;
+}
 
-    return (
-        <Toast.Root
-            toast={framedToast}
-            data-severity={item.severity}
-            className='cratis-toast'
-            pt={pt}
-        >
-            <Toast.Icon match='success'>
-                <i className='pi pi-check-circle' />
-            </Toast.Icon>
-            <Toast.Icon match='info'>
-                <i className='pi pi-info-circle' />
-            </Toast.Icon>
-            <Toast.Icon match='warn'>
-                <i className='pi pi-exclamation-triangle' />
-            </Toast.Icon>
-            <Toast.Icon match='error'>
-                <i className='pi pi-times-circle' />
-            </Toast.Icon>
-            <Toast.Icon>
-                <i className='pi pi-bell' />
-            </Toast.Icon>
-            <Toast.Content>
-                {customBody ?? (
-                    <>
-                        <Toast.Title />
-                        <Toast.Description />
-                    </>
-                )}
-            </Toast.Content>
-            <Toast.Close aria-label={dismissAriaLabel}>
-                <i className='pi pi-times' />
-            </Toast.Close>
-        </Toast.Root>
-    );
+const severitySymbol: Record<ToastSeverity, string> = {
+    normal: '●',
+    success: '✓',
+    info: 'ⓘ',
+    warn: '⚠',
+    error: '⨯',
+    secondary: '●',
+    contrast: '●',
 };
 
-interface ToastListProps {
+const emptyToasts: ToastRecord[] = [];
+const classNames = (...values: Array<string | undefined>) =>
+    values.filter(Boolean).join(' ');
+
+interface ToastFrameProps {
+    item: ToastRecord;
+    timeout: number;
     dismissAriaLabel: string;
-    pt?: ToastRootProps['pt'];
+    pt?: ToasterPassThrough;
 }
 
-const ToastList = ({ dismissAriaLabel, pt }: ToastListProps) => {
-    const toaster = useToasterContext();
-    if (!toaster) return null;
+const ToastFrame = ({ item, timeout, dismissAriaLabel, pt }: ToastFrameProps) => {
+    const [paused, setPaused] = useState(false);
 
-    return (
+    useEffect(() => {
+        if (paused || item.loading || item.duration === 0) return;
+        const duration = item.duration ?? timeout;
+        const timer = window.setTimeout(
+            () => {
+                item.onTimeout?.(item);
+                toast.dismiss(item.id);
+            },
+            Math.max(duration, 5000),
+        );
+        return () => window.clearTimeout(timer);
+    }, [item, paused, timeout]);
+
+    const severity = item.severity ?? 'normal';
+    const content = item.render ?? (
         <>
-            {toaster.toasts.map((item: PrimeReactToastType) => (
-                <FramedToast
-                    key={item.id}
-                    item={item}
-                    dismissAriaLabel={dismissAriaLabel}
-                    pt={pt}
+            {item.title && (
+                <div
+                    {...pt?.title}
+                    className={classNames('cratis-toast__title', pt?.title?.className)}
+                    data-cratis-part='title'
+                >
+                    {item.title}
+                </div>
+            )}
+            {item.description && (
+                <div
+                    {...pt?.description}
+                    className={classNames(
+                        'cratis-toast__description',
+                        pt?.description?.className,
+                    )}
+                    data-cratis-part='description'
+                >
+                    {item.description}
+                </div>
+            )}
+            {item.action && (
+                <button
+                    {...item.action}
+                    {...pt?.action}
+                    type='button'
+                    className={classNames(
+                        'cratis-toast__action',
+                        item.action.className,
+                        pt?.action?.className,
+                    )}
+                    data-cratis-part='action'
                 />
-            ))}
+            )}
         </>
     );
-};
 
-/** Pass-through configuration for the toaster region and each toast frame. */
-export interface ToasterPassThrough {
-    /** Pass-through configuration for the app-wide toaster region. */
-    region?: ToasterRegionProps['pt'];
-    /** Pass-through configuration applied to every toast frame. */
-    toast?: ToastRootProps['pt'];
-}
-
-/** Props for {@link Toaster}. */
-export interface ToasterProps {
-    /** Corner/edge the toasts stack from. Defaults to `'top-right'`. */
-    position?: ToasterPosition;
-    /** Maximum number of toasts shown at once. Defaults to `3`. */
-    limit?: number;
-    /** Auto-dismiss timeout in milliseconds. Defaults to `6000`. Per-toast `duration` overrides it. */
-    timeout?: number;
-    /** Accessible name for each toast's dismiss button. Override to localize. Defaults to `'Dismiss'`. */
-    dismissAriaLabel?: string;
-    /** Pass-through configuration for the region and each toast frame. */
-    pt?: ToasterPassThrough;
-}
+    return (
+        <article
+            {...pt?.toast}
+            className={classNames('cratis-toast', pt?.toast?.className)}
+            data-cratis-part='toast'
+            data-severity={severity}
+            data-loading={item.loading || undefined}
+            role={severity === 'error' ? 'alert' : 'status'}
+            onMouseEnter={() => setPaused(true)}
+            onMouseLeave={() => setPaused(false)}
+            onFocusCapture={() => setPaused(true)}
+            onBlurCapture={(event) => {
+                if (!event.currentTarget.contains(event.relatedTarget)) setPaused(false);
+            }}
+        >
+            <span
+                {...pt?.icon}
+                className={classNames('cratis-toast__icon', pt?.icon?.className)}
+                data-cratis-part='icon'
+                aria-hidden='true'
+            >
+                {item.loading ? '◌' : (item.icon ?? severitySymbol[severity])}
+            </span>
+            <div
+                {...pt?.content}
+                className={classNames('cratis-toast__content', pt?.content?.className)}
+                data-cratis-part='content'
+            >
+                {content}
+            </div>
+            {item.dismissible !== false && (
+                <button
+                    {...pt?.close}
+                    type='button'
+                    className={classNames('cratis-toast__close', pt?.close?.className)}
+                    data-cratis-part='close'
+                    aria-label={pt?.close?.['aria-label'] ?? dismissAriaLabel}
+                    onClick={() => toast.dismiss(item.id)}
+                >
+                    <span aria-hidden='true'>×</span>
+                </button>
+            )}
+        </article>
+    );
+};
 
-/**
- * The single, app-wide toast host. Mount one `<Toaster />` near your app root;
- * then call the imperative {@link toast} (`toast.success(...)`, `toast.error(...)`,
- * …) from anywhere — including outside React — and the notification appears
- * here and auto-dismisses.
- *
- * Built on PrimeReact 11's headless Toaster/Toast: a module-level store backs
- * the imperative API, and this region subscribes to it. Icons are chosen per
- * severity, close/dismiss and the auto-dismiss timer are wired by the
- * primitives, and severity is surfaced as `data-severity` on each toast for
- * styling. A toast's custom `render` element replaces only the content body;
- * the severity icon and dismiss control remain in the Components-owned frame.
- *
- * ```tsx
- * // once, near the app root:
- * <Toaster position="top-right" />
- *
- * // anywhere:
- * import { toast } from '@cratis/components/Notifications';
- * toast.success({ title: 'Saved', description: 'Your changes were saved.' });
- * ```
- *
- * To surface an Arc command result automatically, see {@link toastCommandResult}.
- */
+/** App-wide accessible toast region backed by the Cratis-owned toast queue. */
 export const Toaster = ({
     position = 'top-right',
     limit = 3,
     timeout = 6000,
     dismissAriaLabel = 'Dismiss',
+    regionAriaLabel = 'Notifications',
     pt,
-}: ToasterProps) => (
-    <PrimeToaster.Root position={position} limit={limit} timeout={timeout}>
-        <PrimeToaster.Portal>
-            <PrimeToaster.Region pt={pt?.region}>
-                <ToastList dismissAriaLabel={dismissAriaLabel} pt={pt?.toast} />
-            </PrimeToaster.Region>
-        </PrimeToaster.Portal>
-    </PrimeToaster.Root>
-);
+}: ToasterProps) => {
+    const items = useSyncExternalStore(
+        subscribeToToasts,
+        getToastSnapshot,
+        () => emptyToasts,
+    );
+    if (typeof document === 'undefined') return null;
+
+    return createPortal(
+        <div
+            {...pt?.region}
+            className={classNames('cratis-toaster', pt?.region?.className)}
+            data-cratis-part='region'
+            data-position={position}
+            role='region'
+            aria-label={regionAriaLabel}
+            aria-live='polite'
+        >
+            {items.slice(-limit).map((item) => (
+                <ToastFrame
+                    key={item.id}
+                    item={item}
+                    timeout={timeout}
+                    dismissAriaLabel={dismissAriaLabel}
+                    pt={pt}
+                />
+            ))}
+        </div>,
+        document.body,
+    );
+};
diff --git a/Source/Notifications/for_Toaster/when_configuring_pass_through.tsx b/Source/Notifications/for_Toaster/when_configuring_pass_through.tsx
index d4d3ec5c..e5d13a3b 100644
--- a/Source/Notifications/for_Toaster/when_configuring_pass_through.tsx
+++ b/Source/Notifications/for_Toaster/when_configuring_pass_through.tsx
@@ -15,12 +15,10 @@ describe('when configuring toaster pass-through', () => {
     beforeEach(async () => {
         toaster = await renderToaster({
             pt: {
-                region: { root: { className: 'region-probe' } },
-                toast: {
-                    root: { className: 'toast-probe' },
-                    content: { className: 'content-probe' },
-                    close: { className: 'close-probe' },
-                },
+                region: { className: 'region-probe' },
+                toast: { className: 'toast-probe' },
+                content: { className: 'content-probe' },
+                close: { className: 'close-probe' },
             },
         });
         await act(async () => {
diff --git a/Source/Notifications/for_Toaster/when_rendering_a_custom_body.tsx b/Source/Notifications/for_Toaster/when_rendering_a_custom_body.tsx
index a76df87a..73bcdd64 100644
--- a/Source/Notifications/for_Toaster/when_rendering_a_custom_body.tsx
+++ b/Source/Notifications/for_Toaster/when_rendering_a_custom_body.tsx
@@ -3,7 +3,7 @@
 
 // @vitest-environment jsdom
 
-import type { ToastType } from '@primereact/types/primitive/toaster';
+import type { ToastType } from '../toast';
 import { expect } from 'chai';
 import { act } from 'react';
 import { afterEach, beforeEach, describe, it } from 'vitest';
@@ -35,28 +35,25 @@ describe('when rendering a custom toast body', () => {
     });
 
     it('should render the custom body inside the normal content frame', () => {
-        const content = document.querySelector(
-            '[data-scope="toast"][data-part="content"]',
-        );
+        const content = document.querySelector('[data-cratis-part="content"]');
         expect(content?.querySelector('[data-custom-toast-body]')).not.to.equal(null);
     });
 
     it('should retain the severity icon', () => {
-        expect(document.querySelector('.cratis-toast .pi-times-circle')).not.to.equal(
-            null,
-        );
+        const icon = document.querySelector('[data-cratis-part="icon"]');
+        expect(icon?.textContent).to.equal('⨯');
     });
 
     it('should retain an accessible dismiss control', () => {
         const close = document.querySelector<HTMLButtonElement>(
-            '[data-scope="toast"][data-part="close"]',
+            '[data-cratis-part="close"]',
         );
         expect(close?.getAttribute('aria-label')).to.equal('Dismiss notification');
     });
 
     it('should dismiss without a consumer-owned id or close button', async () => {
         const close = document.querySelector<HTMLButtonElement>(
-            '[data-scope="toast"][data-part="close"]',
+            '[data-cratis-part="close"]',
         );
         if (!close) {
             throw new Error('Custom toast did not retain its close control.');
diff --git a/Source/Notifications/toast.ts b/Source/Notifications/toast.ts
index 5d997b37..70ccf255 100644
--- a/Source/Notifications/toast.ts
+++ b/Source/Notifications/toast.ts
@@ -2,20 +2,11 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import type { ButtonHTMLAttributes, ReactElement, ReactNode } from 'react';
-import { toast as primeReactToast } from 'primereact/toaster';
-import type {
-    ToastPromiseType as PrimeReactToastPromiseType,
-    ToastType as PrimeReactToastType,
-} from '@primereact/types/primitive/toaster';
 
-/** Severity understood by the Cratis toast dispatch. */
 export type ToastSeverity =
     'normal' | 'success' | 'info' | 'warn' | 'error' | 'secondary' | 'contrast';
-
-/** Identifier returned by the toast dispatch. */
 export type ToastId = string | number;
 
-/** Cratis-owned toast options, independent of the active renderer. */
 export interface ToastOptions {
     id?: ToastId;
     title?: ReactNode | string;
@@ -34,17 +25,14 @@ export interface ToastOptions {
     onTimeout?: (toast: ToastOptions) => void;
 }
 
-/** Backward-compatible name for {@link ToastOptions}. */
 export type ToastType = ToastOptions;
 
-/** Toast states used while tracking a promise. */
 export interface ToastPromiseOptions<T = unknown> {
     loading: ToastOptions;
     success?: ToastOptions | ((data: T) => ToastOptions | void);
     error?: ToastOptions | ((error: unknown) => ToastOptions | void);
 }
 
-/** Renderer-independent toast dispatch contract. */
 export interface ToastDispatch {
     show(options: ToastOptions): ToastId;
     update(id: ToastId, updates: Partial<ToastOptions>): ToastId;
@@ -58,7 +46,6 @@ export interface ToastDispatch {
     contrast(options: ToastOptions): ToastId;
 }
 
-/** Callable Cratis toast API exposed to applications. */
 export interface ToastFunction {
     (options: ToastOptions): ToastId;
     update(id: ToastId, updates: Partial<ToastOptions>): ToastId;
@@ -72,53 +59,96 @@ export interface ToastFunction {
     contrast(options: ToastOptions): ToastId;
 }
 
-const toPrimeReactToast = (options: ToastOptions): PrimeReactToastType => {
-    // SAFETY: ToastOptions intentionally mirrors the renderer's value shape while
-    // keeping all public names owned by Cratis.
-    return options as PrimeReactToastType;
+export interface ToastRecord extends ToastOptions {
+    id: ToastId;
+}
+
+interface ToastStore {
+    items: ToastRecord[];
+    listeners: Set<() => void>;
+    nextId: number;
+}
+
+const storeKey = Symbol.for('@cratis/components/toast-store/v1');
+// SAFETY: Symbol.for lets multiple loaded Components copies share one app-wide queue.
+const storeHost = globalThis as unknown as Record<symbol, ToastStore | undefined>;
+const store = (storeHost[storeKey] ??= { items: [], listeners: new Set(), nextId: 1 });
+const emit = () => store.listeners.forEach((listener) => listener());
+
+/** Subscribes a mounted toaster to the app-wide queue. */
+export const subscribeToToasts = (listener: () => void): (() => void) => {
+    store.listeners.add(listener);
+    return () => store.listeners.delete(listener);
 };
 
-const toPrimeReactPromise = <T>(
+/** Returns the current immutable queue snapshot. */
+export const getToastSnapshot = (): ToastRecord[] => store.items;
+
+const show = (options: ToastOptions): ToastId => {
+    const id = options.id ?? store.nextId++;
+    const record = { ...options, id };
+    const existing = store.items.findIndex((item) => item.id === id);
+    store.items =
+        existing >= 0
+            ? store.items.map((item) => (item.id === id ? record : item))
+            : [...store.items, record];
+    emit();
+    return id;
+};
+
+const update = (id: ToastId, updates: Partial<ToastOptions>): ToastId => {
+    store.items = store.items.map((item) =>
+        item.id === id ? { ...item, ...updates, id } : item,
+    );
+    emit();
+    return id;
+};
+
+const dismiss = (id?: ToastId) => {
+    const removed =
+        id === undefined ? store.items : store.items.filter((item) => item.id === id);
+    removed.forEach((item) => item.onDismiss?.(item));
+    store.items = id === undefined ? [] : store.items.filter((item) => item.id !== id);
+    emit();
+};
+
+const promise = async <T>(
+    work: Promise<T>,
     options: ToastPromiseOptions<T>,
-): PrimeReactToastPromiseType<T> => {
-    const success = options.success;
-    const error = options.error;
-
-    return {
-        loading: toPrimeReactToast(options.loading),
-        success:
-            typeof success === 'function'
-                ? (data) => {
-                      const resolved = success(data);
-                      return resolved ? toPrimeReactToast(resolved) : undefined;
-                  }
-                : success
-                  ? toPrimeReactToast(success)
-                  : undefined,
-        error:
-            typeof error === 'function'
-                ? (failure) => {
-                      const resolved = error(failure);
-                      return resolved ? toPrimeReactToast(resolved) : undefined;
-                  }
-                : error
-                  ? toPrimeReactToast(error)
-                  : undefined,
-    };
+): Promise<T> => {
+    const id = show({ ...options.loading, loading: true });
+    try {
+        const data = await work;
+        const resolved =
+            typeof options.success === 'function'
+                ? options.success(data)
+                : options.success;
+        if (resolved) update(id, { ...resolved, loading: false });
+        else dismiss(id);
+        return data;
+    } catch (error) {
+        const resolved =
+            typeof options.error === 'function' ? options.error(error) : options.error;
+        if (resolved) update(id, { ...resolved, loading: false });
+        else dismiss(id);
+        throw error;
+    }
 };
 
-const primeReactToastDispatch: ToastDispatch = {
-    show: (options) => primeReactToast(toPrimeReactToast(options)),
-    update: (id, updates) => primeReactToast.update(id, toPrimeReactToast(updates)),
-    dismiss: (id) => primeReactToast.dismiss(id),
-    promise: (promise, options) =>
-        primeReactToast.promise(promise, toPrimeReactPromise(options)),
-    success: (options) => primeReactToast.success(toPrimeReactToast(options)),
-    info: (options) => primeReactToast.info(toPrimeReactToast(options)),
-    warn: (options) => primeReactToast.warn(toPrimeReactToast(options)),
-    error: (options) => primeReactToast.error(toPrimeReactToast(options)),
-    secondary: (options) => primeReactToast.secondary(toPrimeReactToast(options)),
-    contrast: (options) => primeReactToast.contrast(toPrimeReactToast(options)),
+const withSeverity = (severity: ToastSeverity) => (options: ToastOptions) =>
+    show({ ...options, severity });
+
+const defaultToastDispatch: ToastDispatch = {
+    show,
+    update,
+    dismiss,
+    promise,
+    success: withSeverity('success'),
+    info: withSeverity('info'),
+    warn: withSeverity('warn'),
+    error: withSeverity('error'),
+    secondary: withSeverity('secondary'),
+    contrast: withSeverity('contrast'),
 };
 
 interface ToastDispatchFrame {
@@ -131,18 +161,13 @@ interface ToastDispatchRegistry {
     active?: ToastDispatchFrame;
 }
 
-const toastDispatchRegistryKey = Symbol.for('@cratis/components/toast-dispatch/v1');
+const dispatchRegistryKey = Symbol.for('@cratis/components/toast-dispatch/v1');
 // SAFETY: Symbol.for gives every loaded Components copy the same isolated dispatch slot.
-const toastDispatchRegistryHost = globalThis as unknown as Record<symbol, unknown>;
-const existingToastDispatchRegistry = toastDispatchRegistryHost[toastDispatchRegistryKey];
-const toastDispatchRegistry: ToastDispatchRegistry =
-    typeof existingToastDispatchRegistry === 'object' &&
-    existingToastDispatchRegistry !== null &&
-    ('active' in existingToastDispatchRegistry ||
-        Object.keys(existingToastDispatchRegistry).length === 0)
-        ? (existingToastDispatchRegistry as ToastDispatchRegistry)
-        : {};
-toastDispatchRegistryHost[toastDispatchRegistryKey] = toastDispatchRegistry;
+const dispatchHost = globalThis as unknown as Record<
+    symbol,
+    ToastDispatchRegistry | undefined
+>;
+const dispatchRegistry = (dispatchHost[dispatchRegistryKey] ??= {});
 
 const nearestActiveFrame = (
     frame: ToastDispatchFrame | undefined,
@@ -152,36 +177,31 @@ const nearestActiveFrame = (
     return current;
 };
 
-/**
- * Replaces the active toast renderer and returns a scoped restore callback.
- * Applications normally use the default PrimeReact implementation.
- */
 export const setToastDispatch = (dispatch: ToastDispatch): (() => void) => {
     const frame: ToastDispatchFrame = {
         dispatch,
-        previous: toastDispatchRegistry.active,
+        previous: dispatchRegistry.active,
         removed: false,
     };
-    toastDispatchRegistry.active = frame;
+    dispatchRegistry.active = frame;
 
     return () => {
         if (frame.removed) return;
         frame.removed = true;
-        if (toastDispatchRegistry.active === frame) {
-            toastDispatchRegistry.active = nearestActiveFrame(frame.previous);
+        if (dispatchRegistry.active === frame) {
+            dispatchRegistry.active = nearestActiveFrame(frame.previous);
         }
     };
 };
 
 const activeToastDispatch = () =>
-    nearestActiveFrame(toastDispatchRegistry.active)?.dispatch ?? primeReactToastDispatch;
+    nearestActiveFrame(dispatchRegistry.active)?.dispatch ?? defaultToastDispatch;
 
 const callableToast = ((options: ToastOptions) =>
     activeToastDispatch().show(options)) as ToastFunction;
 callableToast.update = (id, updates) => activeToastDispatch().update(id, updates);
 callableToast.dismiss = (id) => activeToastDispatch().dismiss(id);
-callableToast.promise = (promise, options) =>
-    activeToastDispatch().promise(promise, options);
+callableToast.promise = (work, options) => activeToastDispatch().promise(work, options);
 callableToast.success = (options) => activeToastDispatch().success(options);
 callableToast.info = (options) => activeToastDispatch().info(options);
 callableToast.warn = (options) => activeToastDispatch().warn(options);
@@ -189,8 +209,5 @@ callableToast.error = (options) => activeToastDispatch().error(options);
 callableToast.secondary = (options) => activeToastDispatch().secondary(options);
 callableToast.contrast = (options) => activeToastDispatch().contrast(options);
 
-/**
- * Cratis-owned imperative toast API. Requires a {@link Toaster} for the default
- * renderer, or a custom dispatch installed through {@link setToastDispatch}.
- */
+/** Cratis-owned imperative toast API. Mount one {@link Toaster} in the application root. */
 export const toast: ToastFunction = callableToast;
diff --git a/Source/ObjectContentEditor/ObjectContentEditor.tsx b/Source/ObjectContentEditor/ObjectContentEditor.tsx
index 3bc0e056..3ad80f90 100644
--- a/Source/ObjectContentEditor/ObjectContentEditor.tsx
+++ b/Source/ObjectContentEditor/ObjectContentEditor.tsx
@@ -7,12 +7,7 @@ import * as faIcons from 'react-icons/fa6';
 import { ObjectNavigationalBar } from '../ObjectNavigationalBar';
 import { Json, JsonSchema, JsonSchemaProperty } from '../types/JsonSchema';
 import { getValueAtPath } from './objectHelpers';
-import { InputText } from 'primereact/inputtext';
-import { InputNumber } from 'primereact/inputnumber';
-import type { InputNumberRootValueChangeEvent } from '@primereact/types/primitive/inputnumber';
-import { Checkbox } from 'primereact/checkbox';
-import type { CheckboxRootChangeEvent } from '@primereact/types/primitive/checkbox';
-import { Textarea } from 'primereact/textarea';
+
 import { DatePickerInput } from '../Common/DatePickerInput';
 
 /**
@@ -71,39 +66,70 @@ export interface ObjectContentEditorProps {
  *
  * @param props - {@link ObjectContentEditorProps}.
  */
-export const ObjectContentEditor = ({ object, timestamp, schema, editMode = false, onChange, onValidationChange, className }: ObjectContentEditorProps) => {
+export const ObjectContentEditor = ({
+    object,
+    timestamp,
+    schema,
+    editMode = false,
+    onChange,
+    onValidationChange,
+    className,
+}: ObjectContentEditorProps) => {
     const [navigationPath, setNavigationPath] = useState<string[]>([]);
     const [validationErrors, setValidationErrors] = useState<Record<string, string>>({});
 
-    const validateValue = useCallback((propertyName: string, value: Json, property: JsonSchemaProperty): string | undefined => {
-        if (editMode) {
-            if (value === null || value === undefined || value === '') {
-                return 'This field is required';
-            }
-        } else {
-            const isRequired = schema.required?.includes(propertyName);
-            if (isRequired && (value === null || value === undefined || value === '')) {
-                return 'This field is required';
+    const validateValue = useCallback(
+        (
+            propertyName: string,
+            value: Json,
+            property: JsonSchemaProperty,
+        ): string | undefined => {
+            if (editMode) {
+                if (value === null || value === undefined || value === '') {
+                    return 'This field is required';
+                }
+            } else {
+                const isRequired = schema.required?.includes(propertyName);
+                if (
+                    isRequired &&
+                    (value === null || value === undefined || value === '')
+                ) {
+                    return 'This field is required';
+                }
             }
-        }
 
-        if (property.type === 'string' && typeof value === 'string') {
-            if (property.format === 'email' && value && !value.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)) {
-                return 'Invalid email format';
-            }
-            if (property.format === 'uri' && value && !value.match(/^https?:\/\/.+/)) {
-                return 'Invalid URI format';
+            if (property.type === 'string' && typeof value === 'string') {
+                if (
+                    property.format === 'email' &&
+                    value &&
+                    !value.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)
+                ) {
+                    return 'Invalid email format';
+                }
+                if (
+                    property.format === 'uri' &&
+                    value &&
+                    !value.match(/^https?:\/\/.+/)
+                ) {
+                    return 'Invalid URI format';
+                }
             }
-        }
 
-        if (property.type === 'number' || property.type === 'integer') {
-            if (value !== null && value !== undefined && value !== '' && isNaN(Number(value))) {
-                return 'Must be a valid number';
+            if (property.type === 'number' || property.type === 'integer') {
+                if (
+                    value !== null &&
+                    value !== undefined &&
+                    value !== '' &&
+                    isNaN(Number(value))
+                ) {
+                    return 'Must be a valid number';
+                }
             }
-        }
 
-        return undefined;
-    }, [schema, editMode]);
+            return undefined;
+        },
+        [schema, editMode],
+    );
 
     useEffect(() => {
         if (!editMode || navigationPath.length > 0) return;
@@ -113,7 +139,11 @@ export const ObjectContentEditor = ({ object, timestamp, schema, editMode = fals
 
         Object.entries(properties).forEach(([propertyName, property]) => {
             const value = (object as Record<string, Json>)[propertyName];
-            const error = validateValue(propertyName, value, property as JsonSchemaProperty);
+            const error = validateValue(
+                propertyName,
+                value,
+                property as JsonSchemaProperty,
+            );
             if (error) {
                 errors[propertyName] = error;
             }
@@ -129,17 +159,23 @@ export const ObjectContentEditor = ({ object, timestamp, schema, editMode = fals
         }
     }, [validationErrors, editMode, onValidationChange]);
 
-    const navigateToProperty = useCallback((key: string) => {
-        setNavigationPath([...navigationPath, key]);
-    }, [navigationPath]);
+    const navigateToProperty = useCallback(
+        (key: string) => {
+            setNavigationPath([...navigationPath, key]);
+        },
+        [navigationPath],
+    );
 
-    const navigateToBreadcrumb = useCallback((index: number) => {
-        if (index === 0) {
-            setNavigationPath([]);
-        } else {
-            setNavigationPath(navigationPath.slice(0, index));
-        }
-    }, [navigationPath]);
+    const navigateToBreadcrumb = useCallback(
+        (index: number) => {
+            if (index === 0) {
+                setNavigationPath([]);
+            } else {
+                setNavigationPath(navigationPath.slice(0, index));
+            }
+        },
+        [navigationPath],
+    );
 
     const currentData = useMemo(() => {
         if (navigationPath.length === 0) {
@@ -149,11 +185,14 @@ export const ObjectContentEditor = ({ object, timestamp, schema, editMode = fals
         const lastKey = navigationPath[navigationPath.length - 1];
         const pathToParent = navigationPath.slice(0, -1);
 
-        const parentValue = pathToParent.length > 0
-            ? getValueAtPath(object, pathToParent)
-            : object;
+        const parentValue =
+            pathToParent.length > 0 ? getValueAtPath(object, pathToParent) : object;
 
-        if (parentValue && typeof parentValue === 'object' && !Array.isArray(parentValue)) {
+        if (
+            parentValue &&
+            typeof parentValue === 'object' &&
+            !Array.isArray(parentValue)
+        ) {
             const value = (parentValue as { [k: string]: Json })[lastKey];
 
             if (Array.isArray(value)) {
@@ -213,21 +252,28 @@ export const ObjectContentEditor = ({ object, timestamp, schema, editMode = fals
         fontSize: '0.75rem',
     };
 
-    const updateValue = useCallback((propertyName: string, newValue: Json) => {
-        if (!onChange) return;
+    const updateValue = useCallback(
+        (propertyName: string, newValue: Json) => {
+            if (!onChange) return;
 
-        const updatedObject = { ...(object as Record<string, Json>) };
-        updatedObject[propertyName] = newValue;
-        onChange(updatedObject);
-    }, [object, onChange]);
+            const updatedObject = { ...(object as Record<string, Json>) };
+            updatedObject[propertyName] = newValue;
+            onChange(updatedObject);
+        },
+        [object, onChange],
+    );
 
-    const renderEditField = (propertyName: string, property: JsonSchemaProperty, value: Json) => {
+    const renderEditField = (
+        propertyName: string,
+        property: JsonSchemaProperty,
+        value: Json,
+    ) => {
         const error = validationErrors[propertyName];
 
         const handleChange = (newValue: Json) => {
             updateValue(propertyName, newValue);
             const validationError = validateValue(propertyName, newValue, property);
-            setValidationErrors(prev => {
+            setValidationErrors((prev) => {
                 const newErrors = { ...prev };
                 if (validationError) {
                     newErrors[propertyName] = validationError;
@@ -241,14 +287,13 @@ export const ObjectContentEditor = ({ object, timestamp, schema, editMode = fals
         if (property.type === 'boolean') {
             return (
                 <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
-                    <Checkbox.Root
+                    <input
+                        type='checkbox'
                         checked={Boolean(value)}
-                        onCheckedChange={(e: CheckboxRootChangeEvent) => handleChange(e.checked ?? false)}
-                        invalid={!!error}>
-                        <Checkbox.Box>
-                            <Checkbox.Indicator />
-                        </Checkbox.Box>
-                    </Checkbox.Root>
+                        onChange={(event) => handleChange(event.target.checked)}
+                        aria-invalid={Boolean(error) || undefined}
+                        className='size-5 accent-[var(--cratis-primary-color)]'
+                    />
                     {error && <small style={fieldErrorStyle}>{error}</small>}
                 </div>
             );
@@ -257,13 +302,19 @@ export const ObjectContentEditor = ({ object, timestamp, schema, editMode = fals
         if (property.type === 'number' || property.type === 'integer') {
             return (
                 <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
-                    <InputNumber.Root
-                        value={(value === null || value === undefined) ? null : Number(value)}
-                        onValueChange={(e: InputNumberRootValueChangeEvent) => handleChange(e.value ?? null)}
-                        useGrouping={false}
-                        invalid={!!error}>
-                        <InputNumber.Input className="w-full" />
-                    </InputNumber.Root>
+                    <input
+                        type='number'
+                        value={value === null || value === undefined ? '' : Number(value)}
+                        onChange={(event) =>
+                            handleChange(
+                                event.target.value === ''
+                                    ? null
+                                    : event.target.valueAsNumber,
+                            )
+                        }
+                        aria-invalid={Boolean(error) || undefined}
+                        className='cratis-field-input w-full'
+                    />
                     {error && <small style={fieldErrorStyle}>{error}</small>}
                 </div>
             );
@@ -275,7 +326,9 @@ export const ObjectContentEditor = ({ object, timestamp, schema, editMode = fals
                 <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
                     <DatePickerInput
                         value={dateValue}
-                        onChange={(date) => handleChange(date ? date.toISOString() : null)}
+                        onChange={(date) =>
+                            handleChange(date ? date.toISOString() : null)
+                        }
                         showTime
                         showIcon
                         invalid={!!error}
@@ -291,7 +344,9 @@ export const ObjectContentEditor = ({ object, timestamp, schema, editMode = fals
                 <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
                     <DatePickerInput
                         value={dateValue}
-                        onChange={(date) => handleChange(date ? date.toISOString().split('T')[0] : null)}
+                        onChange={(date) =>
+                            handleChange(date ? date.toISOString().split('T')[0] : null)
+                        }
                         showIcon
                         invalid={!!error}
                     />
@@ -302,7 +357,13 @@ export const ObjectContentEditor = ({ object, timestamp, schema, editMode = fals
 
         if (property.type === 'array') {
             return (
-                <div className="flex items-center gap-2" style={{ color: 'var(--cratis-text-color-secondary)', fontStyle: 'italic' }}>
+                <div
+                    className='flex items-center gap-2'
+                    style={{
+                        color: 'var(--cratis-text-color-secondary)',
+                        fontStyle: 'italic',
+                    }}
+                >
                     <span>Array editing not yet supported</span>
                 </div>
             );
@@ -310,7 +371,13 @@ export const ObjectContentEditor = ({ object, timestamp, schema, editMode = fals
 
         if (property.type === 'object') {
             return (
-                <div className="flex items-center gap-2" style={{ color: 'var(--cratis-text-color-secondary)', fontStyle: 'italic' }}>
+                <div
+                    className='flex items-center gap-2'
+                    style={{
+                        color: 'var(--cratis-text-color-secondary)',
+                        fontStyle: 'italic',
+                    }}
+                >
                     <span>Object editing not yet supported</span>
                 </div>
             );
@@ -321,12 +388,12 @@ export const ObjectContentEditor = ({ object, timestamp, schema, editMode = fals
         if (isLongText) {
             return (
                 <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
-                    <Textarea
+                    <textarea
                         value={String(value ?? '')}
-                        onChange={(e) => handleChange(e.target.value)}
+                        onChange={(event) => handleChange(event.target.value)}
                         rows={3}
-                        invalid={!!error}
-                        className="w-full"
+                        aria-invalid={Boolean(error) || undefined}
+                        className='cratis-field-input cratis-field-textarea w-full'
                     />
                     {error && <small style={fieldErrorStyle}>{error}</small>}
                 </div>
@@ -335,11 +402,11 @@ export const ObjectContentEditor = ({ object, timestamp, schema, editMode = fals
 
         return (
             <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
-                <InputText
+                <input
                     value={String(value ?? '')}
-                    onChange={(e) => handleChange(e.target.value)}
-                    invalid={!!error}
-                    className="w-full"
+                    onChange={(event) => handleChange(event.target.value)}
+                    aria-invalid={Boolean(error) || undefined}
+                    className='cratis-field-input w-full'
                 />
                 {error && <small style={fieldErrorStyle}>{error}</small>}
             </div>
@@ -352,12 +419,18 @@ export const ObjectContentEditor = ({ object, timestamp, schema, editMode = fals
         if (Array.isArray(value)) {
             return (
                 <div
-                    className="flex items-center gap-2 cursor-pointer"
+                    className='flex items-center gap-2 cursor-pointer'
                     onClick={() => navigateToProperty(propertyName)}
-                    style={{ color: 'var(--cratis-primary-color)', display: 'flex', alignItems: 'center' }}
+                    style={{
+                        color: 'var(--cratis-primary-color)',
+                        display: 'flex',
+                        alignItems: 'center',
+                    }}
                 >
                     <span>Array[{value.length}]</span>
-                    <faIcons.FaArrowRight style={{ fontSize: '0.875rem', display: 'inline-flex' }} />
+                    <faIcons.FaArrowRight
+                        style={{ fontSize: '0.875rem', display: 'inline-flex' }}
+                    />
                 </div>
             );
         }
@@ -365,12 +438,18 @@ export const ObjectContentEditor = ({ object, timestamp, schema, editMode = fals
         if (typeof value === 'object') {
             return (
                 <div
-                    className="flex items-center gap-2 cursor-pointer"
+                    className='flex items-center gap-2 cursor-pointer'
                     onClick={() => navigateToProperty(propertyName)}
-                    style={{ color: 'var(--cratis-primary-color)', display: 'flex', alignItems: 'center' }}
+                    style={{
+                        color: 'var(--cratis-primary-color)',
+                        display: 'flex',
+                        alignItems: 'center',
+                    }}
                 >
                     <span>Object</span>
-                    <faIcons.FaArrowRight style={{ fontSize: '0.875rem', display: 'inline-flex' }} />
+                    <faIcons.FaArrowRight
+                        style={{ fontSize: '0.875rem', display: 'inline-flex' }}
+                    />
                 </div>
             );
         }
@@ -380,10 +459,24 @@ export const ObjectContentEditor = ({ object, timestamp, schema, editMode = fals
 
     const renderTable = () => {
         if (Array.isArray(currentData)) {
-            if (currentData.length === 0) return <div style={{ padding: '12px', color: 'var(--cratis-text-color-secondary)' }}>Empty array</div>;
+            if (currentData.length === 0)
+                return (
+                    <div
+                        style={{
+                            padding: '12px',
+                            color: 'var(--cratis-text-color-secondary)',
+                        }}
+                    >
+                        Empty array
+                    </div>
+                );
 
             const firstItem = currentData[0];
-            if (typeof firstItem === 'object' && firstItem !== null && !Array.isArray(firstItem)) {
+            if (
+                typeof firstItem === 'object' &&
+                firstItem !== null &&
+                !Array.isArray(firstItem)
+            ) {
                 const keys = Object.keys(firstItem);
 
                 return (
@@ -392,14 +485,24 @@ export const ObjectContentEditor = ({ object, timestamp, schema, editMode = fals
                             {currentData.map((item, index) => (
                                 <React.Fragment key={index}>
                                     {index > 0 && (
-                                        <tr style={{ height: '8px', background: 'var(--cratis-surface-hover)' }}>
+                                        <tr
+                                            style={{
+                                                height: '8px',
+                                                background: 'var(--cratis-surface-hover)',
+                                            }}
+                                        >
                                             <td colSpan={2}></td>
                                         </tr>
                                     )}
                                     {keys.map((key) => (
                                         <tr key={`${index}-${key}`} style={rowStyle}>
                                             <td style={labelStyle}>{key}</td>
-                                            <td style={valueStyle}>{renderValue((item as Record<string, Json>)[key], key)}</td>
+                                            <td style={valueStyle}>
+                                                {renderValue(
+                                                    (item as Record<string, Json>)[key],
+                                                    key,
+                                                )}
+                                            </td>
                                         </tr>
                                     ))}
                                 </React.Fragment>
@@ -414,7 +517,9 @@ export const ObjectContentEditor = ({ object, timestamp, schema, editMode = fals
                             {currentData.map((item, index) => (
                                 <tr key={index} style={rowStyle}>
                                     <td style={labelStyle}>[{index}]</td>
-                                    <td style={valueStyle}>{renderValue(item, `[${index}]`)}</td>
+                                    <td style={valueStyle}>
+                                        {renderValue(item, `[${index}]`)}
+                                    </td>
                                 </tr>
                             ))}
                         </tbody>
@@ -423,66 +528,96 @@ export const ObjectContentEditor = ({ object, timestamp, schema, editMode = fals
             }
         }
 
-        const entries = navigationPath.length === 0
-            ? Object.entries(currentProperties)
-            : Object.entries(currentData as { [key: string]: Json });
+        const entries =
+            navigationPath.length === 0
+                ? Object.entries(currentProperties)
+                : Object.entries(currentData as { [key: string]: Json });
 
         return (
             <table style={tableStyle}>
                 <tbody>
-                    {entries.map(([propertyName, propertyDef]: [string, JsonSchemaProperty | Json]) => {
-                        const value = (currentData as Record<string, Json>)[propertyName];
-
-                        const isSchemaProperty = navigationPath.length === 0;
-                        const property = isSchemaProperty && typeof propertyDef === 'object' && propertyDef !== null && 'type' in propertyDef
-                            ? (propertyDef as JsonSchemaProperty)
-                            : null;
-                        const description = property?.description;
-
-                        return (
-                            <tr key={propertyName} style={rowStyle}>
-                                <td style={labelStyle}>
-                                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: '6px' }}>
-                                        {propertyName}
-                                        {description && (
-                                            <Tooltip content={description} position="right">
-                                                <faIcons.FaCircleInfo
-                                                    className="property-info-icon"
-                                                    style={infoIconStyle} />
-                                            </Tooltip>
-                                        )}
-                                    </span>
-                                </td>
-                                <td style={valueStyle}>
-                                    {editMode && property
-                                        ? renderEditField(propertyName, property, value)
-                                        : renderValue(value as Json, propertyName)
-                                    }
-                                </td>
-                            </tr>
-                        );
-                    })}
+                    {entries.map(
+                        ([propertyName, propertyDef]: [
+                            string,
+                            JsonSchemaProperty | Json,
+                        ]) => {
+                            const value = (currentData as Record<string, Json>)[
+                                propertyName
+                            ];
+
+                            const isSchemaProperty = navigationPath.length === 0;
+                            const property =
+                                isSchemaProperty &&
+                                typeof propertyDef === 'object' &&
+                                propertyDef !== null &&
+                                'type' in propertyDef
+                                    ? (propertyDef as JsonSchemaProperty)
+                                    : null;
+                            const description = property?.description;
+
+                            return (
+                                <tr key={propertyName} style={rowStyle}>
+                                    <td style={labelStyle}>
+                                        <span
+                                            style={{
+                                                display: 'inline-flex',
+                                                alignItems: 'center',
+                                                gap: '6px',
+                                            }}
+                                        >
+                                            {propertyName}
+                                            {description && (
+                                                <Tooltip
+                                                    content={description}
+                                                    position='right'
+                                                >
+                                                    <faIcons.FaCircleInfo
+                                                        className='property-info-icon'
+                                                        style={infoIconStyle}
+                                                    />
+                                                </Tooltip>
+                                            )}
+                                        </span>
+                                    </td>
+                                    <td style={valueStyle}>
+                                        {editMode && property
+                                            ? renderEditField(
+                                                  propertyName,
+                                                  property,
+                                                  value,
+                                              )
+                                            : renderValue(value as Json, propertyName)}
+                                    </td>
+                                </tr>
+                            );
+                        },
+                    )}
                 </tbody>
             </table>
         );
     };
 
     return (
-        <div className={className ? `order-content ${className}` : 'order-content'} style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+        <div
+            className={className ? `order-content ${className}` : 'order-content'}
+            style={{ display: 'flex', flexDirection: 'column', height: '100%' }}
+        >
             <ObjectNavigationalBar
                 navigationPath={navigationPath}
                 onNavigate={navigateToBreadcrumb}
             />
             {renderTable()}
             {timestamp && (
-                <div style={{
-                    marginTop: '20px',
-                    padding: '12px',
-                    background: 'var(--cratis-highlight-bg)',
-                    borderRadius: '8px',
-                    fontSize: '12px',
-                    color: 'var(--cratis-text-color-secondary)'
-                }}>
+                <div
+                    style={{
+                        marginTop: '20px',
+                        padding: '12px',
+                        background: 'var(--cratis-highlight-bg)',
+                        borderRadius: '8px',
+                        fontSize: '12px',
+                        color: 'var(--cratis-text-color-secondary)',
+                    }}
+                >
                     Snapshot captured: {timestamp.toLocaleString()}
                 </div>
             )}
diff --git a/Source/ObjectNavigationalBar/ObjectNavigationalBar.tsx b/Source/ObjectNavigationalBar/ObjectNavigationalBar.tsx
index b8f5be69..44600450 100644
--- a/Source/ObjectNavigationalBar/ObjectNavigationalBar.tsx
+++ b/Source/ObjectNavigationalBar/ObjectNavigationalBar.tsx
@@ -2,7 +2,7 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import { useMemo } from 'react';
-import { Button } from 'primereact/button';
+import { Button } from '../Common/Button';
 import * as faIcons from 'react-icons/fa6';
 import { Tooltip } from '../Common/Tooltip';
 import { buildNavigationBreadcrumbs } from './breadcrumbHelpers';
@@ -39,8 +39,16 @@ export interface ObjectNavigationalBarProps {
  *
  * @param props - {@link ObjectNavigationalBarProps}.
  */
-export function ObjectNavigationalBar({ navigationPath, onNavigate, backLabel = 'Navigate back', className }: ObjectNavigationalBarProps) {
-    const breadcrumbItems = useMemo(() => buildNavigationBreadcrumbs(navigationPath), [navigationPath]);
+export function ObjectNavigationalBar({
+    navigationPath,
+    onNavigate,
+    backLabel = 'Navigate back',
+    className,
+}: ObjectNavigationalBarProps) {
+    const breadcrumbItems = useMemo(
+        () => buildNavigationBreadcrumbs(navigationPath),
+        [navigationPath],
+    );
     const rootClassName = className
         ? `cratis-object-navigational-bar px-4 py-2 mb-2 ${className}`
         : 'cratis-object-navigational-bar px-4 py-2 mb-2';
@@ -48,26 +56,33 @@ export function ObjectNavigationalBar({ navigationPath, onNavigate, backLabel =
     return (
         <div className={rootClassName}>
             <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
-                <Tooltip content={backLabel} position="top">
+                <Tooltip content={backLabel} position='top'>
                     <Button
-                        variant="text"
-                        size="small"
-                        iconOnly
+                        text
+                        size='small'
+                        icon={<faIcons.FaArrowLeft />}
                         onClick={() => onNavigate(navigationPath.length - 1)}
                         disabled={navigationPath.length === 0}
-                        aria-label={backLabel}>
-                        <faIcons.FaArrowLeft />
-                    </Button>
+                        aria-label={backLabel}
+                    />
                 </Tooltip>
-                <div style={{ fontSize: '0.9rem', color: 'var(--cratis-text-color-secondary)' }}>
+                <div
+                    style={{
+                        fontSize: '0.9rem',
+                        color: 'var(--cratis-text-color-secondary)',
+                    }}
+                >
                     {breadcrumbItems.map((item, index) => (
                         <span key={index}>
-                            {index > 0 && <span className="mx-2">&gt;</span>}
+                            {index > 0 && <span className='mx-2'>&gt;</span>}
                             <span
                                 onClick={() => onNavigate(item.index)}
                                 style={{
                                     cursor: 'pointer',
-                                    textDecoration: index < breadcrumbItems.length - 1 ? 'underline' : 'none'
+                                    textDecoration:
+                                        index < breadcrumbItems.length - 1
+                                            ? 'underline'
+                                            : 'none',
                                 }}
                             >
                                 {item.name}
diff --git a/Source/SchemaEditor/NameCell.tsx b/Source/SchemaEditor/NameCell.tsx
index 278777ec..61637913 100644
--- a/Source/SchemaEditor/NameCell.tsx
+++ b/Source/SchemaEditor/NameCell.tsx
@@ -1,7 +1,6 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { InputText } from 'primereact/inputtext';
 import * as faIcons from 'react-icons/fa6';
 import { Tooltip } from '../Common/Tooltip';
 import { JsonSchemaProperty } from '../types/JsonSchema';
@@ -13,22 +12,36 @@ export interface NameCellProps {
     validationError?: string;
 }
 
-export const NameCell = ({ rowData, isEditMode, onUpdate, validationError }: NameCellProps) => {
+export const NameCell = ({
+    rowData,
+    isEditMode,
+    onUpdate,
+    validationError,
+}: NameCellProps) => {
     if (!isEditMode) {
-        const isNavigable = rowData.type === 'object' || (rowData.type === 'array' && rowData.items?.type === 'object');
-        const navigationTooltipText = rowData.type === 'object'
-            ? 'Click to navigate to object properties'
-            : 'Click to navigate to item definition';
+        const isNavigable =
+            rowData.type === 'object' ||
+            (rowData.type === 'array' && rowData.items?.type === 'object');
+        const navigationTooltipText =
+            rowData.type === 'object'
+                ? 'Click to navigate to object properties'
+                : 'Click to navigate to item definition';
 
         return (
             <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
-                <Tooltip content={isNavigable ? navigationTooltipText : undefined} position="top">
+                <Tooltip
+                    content={isNavigable ? navigationTooltipText : undefined}
+                    position='top'
+                >
                     <span>{rowData.name}</span>
                 </Tooltip>
                 {rowData.description && (
-                    <Tooltip content={rowData.description} position="right">
+                    <Tooltip content={rowData.description} position='right'>
                         <faIcons.FaCircleInfo
-                            style={{ color: 'var(--cratis-text-color-secondary)', fontSize: '0.875rem' }}
+                            style={{
+                                color: 'var(--cratis-text-color-secondary)',
+                                fontSize: '0.875rem',
+                            }}
                         />
                     </Tooltip>
                 )}
@@ -37,12 +50,15 @@ export const NameCell = ({ rowData, isEditMode, onUpdate, validationError }: Nam
     }
 
     return (
-        <Tooltip content={validationError} position="top" className="w-full">
-            <InputText
+        <Tooltip content={validationError} position='top' className='w-full'>
+            <input
                 value={rowData.name || ''}
-                onChange={(e) => onUpdate(rowData.name || '', 'name', e.target.value)}
-                className="w-full"
-                invalid={!!validationError}
+                onChange={(event) =>
+                    onUpdate(rowData.name || '', 'name', event.target.value)
+                }
+                className='cratis-field-input w-full'
+                aria-invalid={Boolean(validationError) || undefined}
+                data-invalid={Boolean(validationError) || undefined}
             />
         </Tooltip>
     );
diff --git a/Source/SchemaEditor/SchemaEditor.tsx b/Source/SchemaEditor/SchemaEditor.tsx
index aa0597a6..e08cab13 100644
--- a/Source/SchemaEditor/SchemaEditor.tsx
+++ b/Source/SchemaEditor/SchemaEditor.tsx
@@ -2,7 +2,7 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import { useState, useEffect, useMemo, useCallback } from 'react';
-import { Button } from 'primereact/button';
+import { Button } from '../Common/Button';
 import { DataTableCore } from '../DataTables/DataTableCore';
 import { Column } from '../DataTables/Column';
 import { ActionMenubar, type ActionMenuItem } from '../Common/ActionMenubar';
@@ -53,7 +53,7 @@ export const defaultSchemaEditorLabels: SchemaEditorLabels = {
     emptyMessage: 'No properties defined',
     navigateToItemDefinition: 'Navigate to item definition',
     navigateToProperties: 'Navigate to object properties',
-    deleteProperty: 'Delete property'
+    deleteProperty: 'Delete property',
 };
 
 /**
@@ -136,7 +136,7 @@ export const SchemaEditor = ({
     cancelDisabled = false,
     typeFormats = DEFAULT_TYPE_FORMATS,
     className,
-    labels
+    labels,
 }: SchemaEditorProps) => {
     const l = { ...defaultSchemaEditorLabels, ...labels };
     const [currentPath, setCurrentPath] = useState<string[]>([]);
@@ -152,20 +152,23 @@ export const SchemaEditor = ({
         }
     }, [isEditMode]);
 
-    const validateAllProperties = useCallback((properties: JsonSchemaProperty[]) => {
-        const errors: Record<string, string> = {};
+    const validateAllProperties = useCallback(
+        (properties: JsonSchemaProperty[]) => {
+            const errors: Record<string, string> = {};
 
-        properties.forEach(prop => {
-            if (!prop.name) return;
-            const error = validatePropertyName(prop.name, prop.id!, properties);
-            if (error) {
-                errors[prop.id!] = error;
-            }
-        });
+            properties.forEach((prop) => {
+                if (!prop.name) return;
+                const error = validatePropertyName(prop.name, prop.id!, properties);
+                if (error) {
+                    errors[prop.id!] = error;
+                }
+            });
 
-        setValidationErrors(errors);
-        return Object.keys(errors).length === 0;
-    }, [validatePropertyName]);
+            setValidationErrors(errors);
+            return Object.keys(errors).length === 0;
+        },
+        [validatePropertyName],
+    );
 
     useEffect(() => {
         setCurrentSchema(schema);
@@ -183,7 +186,8 @@ export const SchemaEditor = ({
             if (targetSchema.type === 'array' && segment === '$items') {
                 targetSchema = targetSchema.items || {};
             } else if (targetSchema.properties && targetSchema.properties[segment]) {
-                targetSchema = targetSchema.properties[segment] as JsonSchema | JsonSchemaProperty;
+                targetSchema = targetSchema.properties[segment] as
+                    JsonSchema | JsonSchemaProperty;
             } else {
                 return;
             }
@@ -201,7 +205,10 @@ export const SchemaEditor = ({
                     description: property.description,
                     items: property.items,
                     properties: property.properties,
-                    required: (currentSchema.required as string[] | undefined)?.includes(name) || false
+                    required:
+                        (currentSchema.required as string[] | undefined)?.includes(
+                            name,
+                        ) || false,
                 });
             }
         }
@@ -212,42 +219,47 @@ export const SchemaEditor = ({
         }
     };
 
-    const updateSchemaAtPath = useCallback((path: string[], updater: (schema: JsonSchema) => JsonSchema) => {
-        const newSchema = JSON.parse(JSON.stringify(currentSchema));
+    const updateSchemaAtPath = useCallback(
+        (path: string[], updater: (schema: JsonSchema) => JsonSchema) => {
+            const newSchema = JSON.parse(JSON.stringify(currentSchema));
 
-        if (path.length === 0) {
-            const updated = updater(newSchema);
-            setCurrentSchema(updated);
-            onChange?.(updated);
-            return;
-        }
+            if (path.length === 0) {
+                const updated = updater(newSchema);
+                setCurrentSchema(updated);
+                onChange?.(updated);
+                return;
+            }
 
-        let targetSchema = newSchema;
-        for (let i = 0; i < path.length - 1; i++) {
-            const segment = path[i];
-            if (targetSchema.type === 'array' && segment === '$items') {
-                if (!targetSchema.items) {
-                    targetSchema.items = { type: 'object', properties: {} };
+            let targetSchema = newSchema;
+            for (let i = 0; i < path.length - 1; i++) {
+                const segment = path[i];
+                if (targetSchema.type === 'array' && segment === '$items') {
+                    if (!targetSchema.items) {
+                        targetSchema.items = { type: 'object', properties: {} };
+                    }
+                    targetSchema = targetSchema.items;
+                } else if (targetSchema.properties && targetSchema.properties[segment]) {
+                    targetSchema = targetSchema.properties[segment];
                 }
-                targetSchema = targetSchema.items;
-            } else if (targetSchema.properties && targetSchema.properties[segment]) {
-                targetSchema = targetSchema.properties[segment];
             }
-        }
 
-        const lastSegment = path[path.length - 1];
-        if (targetSchema.type === 'array' && lastSegment === '$items') {
-            targetSchema.items = updater(targetSchema.items || {});
-        } else {
-            if (!targetSchema.properties) {
-                targetSchema.properties = {};
+            const lastSegment = path[path.length - 1];
+            if (targetSchema.type === 'array' && lastSegment === '$items') {
+                targetSchema.items = updater(targetSchema.items || {});
+            } else {
+                if (!targetSchema.properties) {
+                    targetSchema.properties = {};
+                }
+                targetSchema.properties[lastSegment] = updater(
+                    targetSchema.properties[lastSegment] || {},
+                );
             }
-            targetSchema.properties[lastSegment] = updater(targetSchema.properties[lastSegment] || {});
-        }
 
-        setCurrentSchema(newSchema);
-        onChange?.(newSchema);
-    }, [currentSchema, onChange]);
+            setCurrentSchema(newSchema);
+            onChange?.(newSchema);
+        },
+        [currentSchema, onChange],
+    );
 
     const addProperty = useCallback(() => {
         updateSchemaAtPath(currentPath, (schema) => {
@@ -262,87 +274,107 @@ export const SchemaEditor = ({
         });
     }, [currentPath, updateSchemaAtPath]);
 
-    const removeProperty = useCallback((propertyName: string) => {
-        updateSchemaAtPath(currentPath, (schema) => {
-            const newProps = { ...(schema.properties || {}) };
-            delete newProps[propertyName];
-            return { ...schema, properties: newProps };
-        });
-    }, [currentPath, updateSchemaAtPath]);
-
-    const updateProperty = useCallback((oldName: string, field: keyof JsonSchemaProperty, value: unknown, additionalUpdates?: Partial<JsonSchemaProperty>) => {
-        updateSchemaAtPath(currentPath, (schema) => {
-            const newProps = { ...(schema.properties || {}) };
-            const prop = { ...(newProps[oldName] || {}) };
+    const removeProperty = useCallback(
+        (propertyName: string) => {
+            updateSchemaAtPath(currentPath, (schema) => {
+                const newProps = { ...(schema.properties || {}) };
+                delete newProps[propertyName];
+                return { ...schema, properties: newProps };
+            });
+        },
+        [currentPath, updateSchemaAtPath],
+    );
 
-            if (field === 'name') {
-                if (value !== oldName && !newProps[value as string]) {
-                    newProps[value as string] = prop;
-                    delete newProps[oldName];
-                }
-            } else if (field === 'type') {
-                prop.type = value as string;
-                if (value === 'array') {
-                    prop.items = { type: 'string' };
-                    delete prop.format;
-                } else if (value === 'object') {
-                    prop.properties = {};
-                    delete prop.format;
-                    delete prop.items;
-                } else {
-                    delete prop.items;
-                    delete prop.properties;
-                }
+    const updateProperty = useCallback(
+        (
+            oldName: string,
+            field: keyof JsonSchemaProperty,
+            value: unknown,
+            additionalUpdates?: Partial<JsonSchemaProperty>,
+        ) => {
+            updateSchemaAtPath(currentPath, (schema) => {
+                const newProps = { ...(schema.properties || {}) };
+                const prop = { ...(newProps[oldName] || {}) };
+
+                if (field === 'name') {
+                    if (value !== oldName && !newProps[value as string]) {
+                        newProps[value as string] = prop;
+                        delete newProps[oldName];
+                    }
+                } else if (field === 'type') {
+                    prop.type = value as string;
+                    if (value === 'array') {
+                        prop.items = { type: 'string' };
+                        delete prop.format;
+                    } else if (value === 'object') {
+                        prop.properties = {};
+                        delete prop.format;
+                        delete prop.items;
+                    } else {
+                        delete prop.items;
+                        delete prop.properties;
+                    }
 
-                if (additionalUpdates) {
-                    if ('format' in additionalUpdates) {
-                        if (additionalUpdates.format) {
-                            prop.format = additionalUpdates.format as string;
-                        } else {
-                            delete prop.format;
+                    if (additionalUpdates) {
+                        if ('format' in additionalUpdates) {
+                            if (additionalUpdates.format) {
+                                prop.format = additionalUpdates.format as string;
+                            } else {
+                                delete prop.format;
+                            }
                         }
                     }
-                }
 
-                newProps[oldName] = prop;
-            } else if (field === 'format') {
-                if (value && value !== 'none') {
-                    prop.format = value as string;
-                } else {
-                    delete prop.format;
+                    newProps[oldName] = prop;
+                } else if (field === 'format') {
+                    if (value && value !== 'none') {
+                        prop.format = value as string;
+                    } else {
+                        delete prop.format;
+                    }
+                    newProps[oldName] = prop;
                 }
-                newProps[oldName] = prop;
-            }
 
-            return { ...schema, properties: newProps };
-        });
-    }, [currentPath, updateSchemaAtPath]);
+                return { ...schema, properties: newProps };
+            });
+        },
+        [currentPath, updateSchemaAtPath],
+    );
 
-    const updateArrayItemType = useCallback((propertyName: string, itemType: string) => {
-        updateSchemaAtPath(currentPath, (schema) => {
-            const newProps = { ...(schema.properties || {}) };
-            const prop = { ...(newProps[propertyName] || {}) };
+    const updateArrayItemType = useCallback(
+        (propertyName: string, itemType: string) => {
+            updateSchemaAtPath(currentPath, (schema) => {
+                const newProps = { ...(schema.properties || {}) };
+                const prop = { ...(newProps[propertyName] || {}) };
 
-            if (itemType === 'object') {
-                prop.items = { type: 'object', properties: {} };
-            } else if (itemType === 'array') {
-                prop.items = { type: 'array', items: { type: 'string' } };
-            } else {
-                prop.items = { type: itemType };
-            }
+                if (itemType === 'object') {
+                    prop.items = { type: 'object', properties: {} };
+                } else if (itemType === 'array') {
+                    prop.items = { type: 'array', items: { type: 'string' } };
+                } else {
+                    prop.items = { type: itemType };
+                }
 
-            newProps[propertyName] = prop;
-            return { ...schema, properties: newProps };
-        });
-    }, [currentPath, updateSchemaAtPath]);
+                newProps[propertyName] = prop;
+                return { ...schema, properties: newProps };
+            });
+        },
+        [currentPath, updateSchemaAtPath],
+    );
 
-    const navigateToProperty = useCallback((propertyName: string) => {
-        setCurrentPath([...currentPath, propertyName]);
-    }, [currentPath]);
+    const navigateToProperty = useCallback(
+        (propertyName: string) => {
+            setCurrentPath([...currentPath, propertyName]);
+        },
+        [currentPath],
+    );
 
-    const navigateToArrayItems = useCallback((propertyName: string) => {
-        setCurrentPath([...currentPath, propertyName, '$items']);
-    }, [currentPath]);
+    const navigateToArrayItems = useCallback(
+        (propertyName: string) => {
+            setCurrentPath([...currentPath, propertyName, '$items']);
+        },
+        [currentPath],
+    );
 
     const navigateBack = useCallback(() => {
         if (currentPath.length > 0) {
@@ -350,10 +382,13 @@ export const SchemaEditor = ({
         }
     }, [currentPath]);
 
-    const navigateToBreadcrumb = useCallback((index: number) => {
-        const items = getBreadcrumbItems();
-        setCurrentPath(items[index].path);
-    }, [currentPath, eventTypeName]);
+    const navigateToBreadcrumb = useCallback(
+        (index: number) => {
+            const items = getBreadcrumbItems();
+            setCurrentPath(items[index].path);
+        },
+        [currentPath, eventTypeName],
+    );
 
     const handleSave = useCallback(() => {
         onSave?.();
@@ -381,7 +416,8 @@ export const SchemaEditor = ({
             if (targetSchema.type === 'array' && segment === '$items') {
                 targetSchema = targetSchema.items || {};
             } else if (targetSchema.properties && targetSchema.properties[segment]) {
-                targetSchema = targetSchema.properties[segment] as JsonSchema | JsonSchemaProperty;
+                targetSchema = targetSchema.properties[segment] as
+                    JsonSchema | JsonSchemaProperty;
             } else {
                 return undefined;
             }
@@ -392,75 +428,129 @@ export const SchemaEditor = ({
 
     const hasValidationErrors = Object.keys(validationErrors).length > 0;
 
-    const menuItems = useMemo<ActionMenuItem[]>(() => [
-        ...(!isEditMode ? [{
-            label: l.edit,
-            icon: <faIcons.FaPencil className='mr-2' />,
-            command: canEdit ? handleEdit : undefined,
-            className: !canEdit ? 'edit-disabled-with-reason' : undefined,
-            template: !canEdit && canNotEditReason ? (item: ActionMenuItem) => (
-                <Tooltip content={canNotEditReason} position="bottom">
-                    <div
-                        style={{ cursor: 'not-allowed', opacity: 0.6, display: 'inline-flex', alignItems: 'center', padding: '0.5rem 0.75rem' }}
-                    >
-                        {item.icon}
-                        <span>{item.label}</span>
-                    </div>
-                </Tooltip>
-            ) : undefined
-        }] : []),
-        ...(isEditMode ? [
-            ...(!saveDisabled ? [{
-                label: l.save,
-                icon: <faIcons.FaCheck className='mr-2' />,
-                command: hasValidationErrors ? undefined : handleSave,
-                disabled: hasValidationErrors
-            }] : []),
-            ...(!cancelDisabled ? [{
-                label: l.cancel,
-                icon: <faIcons.FaXmark className='mr-2' />,
-                command: handleCancel
-            }] : []),
-            {
-                label: l.addProperty,
-                icon: <faIcons.FaPlus className='mr-2' />,
-                command: addProperty
-            }
-        ] : [])
-    ], [isEditMode, handleSave, handleCancel, handleEdit, addProperty, canEdit, canNotEditReason, hasValidationErrors, saveDisabled, cancelDisabled]);
+    const menuItems = useMemo<ActionMenuItem[]>(
+        () => [
+            ...(!isEditMode
+                ? [
+                      {
+                          label: l.edit,
+                          icon: <faIcons.FaPencil className='mr-2' />,
+                          command: canEdit ? handleEdit : undefined,
+                          className: !canEdit ? 'edit-disabled-with-reason' : undefined,
+                          template:
+                              !canEdit && canNotEditReason
+                                  ? (item: ActionMenuItem) => (
+                                        <Tooltip
+                                            content={canNotEditReason}
+                                            position='bottom'
+                                        >
+                                            <div
+                                                style={{
+                                                    cursor: 'not-allowed',
+                                                    opacity: 0.6,
+                                                    display: 'inline-flex',
+                                                    alignItems: 'center',
+                                                    padding: '0.5rem 0.75rem',
+                                                }}
+                                            >
+                                                {item.icon}
+                                                <span>{item.label}</span>
+                                            </div>
+                                        </Tooltip>
+                                    )
+                                  : undefined,
+                      },
+                  ]
+                : []),
+            ...(isEditMode
+                ? [
+                      ...(!saveDisabled
+                          ? [
+                                {
+                                    label: l.save,
+                                    icon: <faIcons.FaCheck className='mr-2' />,
+                                    command: hasValidationErrors ? undefined : handleSave,
+                                    disabled: hasValidationErrors,
+                                },
+                            ]
+                          : []),
+                      ...(!cancelDisabled
+                          ? [
+                                {
+                                    label: l.cancel,
+                                    icon: <faIcons.FaXmark className='mr-2' />,
+                                    command: handleCancel,
+                                },
+                            ]
+                          : []),
+                      {
+                          label: l.addProperty,
+                          icon: <faIcons.FaPlus className='mr-2' />,
+                          command: addProperty,
+                      },
+                  ]
+                : []),
+        ],
+        [
+            isEditMode,
+            handleSave,
+            handleCancel,
+            handleEdit,
+            addProperty,
+            canEdit,
+            canNotEditReason,
+            hasValidationErrors,
+            saveDisabled,
+            cancelDisabled,
+        ],
+    );
 
     const breadcrumbItems = getBreadcrumbItems();
     const isAtRoot = currentPath.length === 0;
     const currentDescription = getCurrentDescription();
 
     return (
-        <div className={className ? `schema-editor ${className}` : 'schema-editor'} style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
-            <div className="px-4 py-4">
-                <div className="schema-editor-menubar">
+        <div
+            className={className ? `schema-editor ${className}` : 'schema-editor'}
+            style={{ display: 'flex', flexDirection: 'column', height: '100%' }}
+        >
+            <div className='px-4 py-4'>
+                <div className='schema-editor-menubar'>
                     <ActionMenubar aria-label={l.actions} model={menuItems} />
                 </div>
             </div>
 
             <div className='px-4 py-2 cratis-schema-editor-bottom-border'>
                 <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
-                    <Tooltip content="Navigate back" position="top">
+                    <Tooltip content='Navigate back' position='top'>
                         <Button
-                            variant="text"
-                            size="small"
-                            iconOnly
+                            text
+                            size='small'
+                            icon={<faIcons.FaArrowLeft />}
                             onClick={navigateBack}
                             disabled={isAtRoot}
-                            aria-label={l.navigateBack}>
-                            <faIcons.FaArrowLeft />
-                        </Button>
+                            aria-label={l.navigateBack}
+                        />
                     </Tooltip>
-                    <div style={{ fontSize: '0.9rem', color: 'var(--cratis-text-color-secondary)', cursor: 'pointer' }}>
+                    <div
+                        style={{
+                            fontSize: '0.9rem',
+                            color: 'var(--cratis-text-color-secondary)',
+                            cursor: 'pointer',
+                        }}
+                    >
                         {breadcrumbItems.map((item, index) => (
                             <span key={index}>
-                                {index > 0 && <span className="mx-2">&gt;</span>}
+                                {index > 0 && <span className='mx-2'>&gt;</span>}
                                 <span
                                     onClick={() => navigateToBreadcrumb(index)}
-                                    style={{ cursor: 'pointer', textDecoration: index < breadcrumbItems.length - 1 ? 'underline' : 'none' }}
+                                    style={{
+                                        cursor: 'pointer',
+                                        textDecoration:
+                                            index < breadcrumbItems.length - 1
+                                                ? 'underline'
+                                                : 'none',
+                                    }}
                                 >
                                     {item.name}
                                 </span>
@@ -469,7 +559,18 @@ export const SchemaEditor = ({
                     </div>
                 </div>
                 {currentDescription && (
-                    <div style={{ fontSize: '0.875rem', color: 'var(--cratis-text-color-secondary)', marginTop: '0.5rem', marginLeft: '2.5rem', fontStyle: 'italic', display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+                    <div
+                        style={{
+                            fontSize: '0.875rem',
+                            color: 'var(--cratis-text-color-secondary)',
+                            marginTop: '0.5rem',
+                            marginLeft: '2.5rem',
+                            fontStyle: 'italic',
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: '0.5rem',
+                        }}
+                    >
                         <faIcons.FaCircleInfo />
                         <span>{currentDescription}</span>
                     </div>
@@ -480,10 +581,15 @@ export const SchemaEditor = ({
                 <DataTableCore<JsonSchemaProperty>
                     key={`${isEditMode}-${currentPath.join('/')}`}
                     data={properties}
-                    dataKey="id"
+                    dataKey='id'
                     emptyMessage={l.emptyMessage}
                     rowClassName={(rowData) => {
-                        if (!isEditMode && (rowData.type === 'object' || (rowData.type === 'array' && rowData.items?.type === 'object'))) {
+                        if (
+                            !isEditMode &&
+                            (rowData.type === 'object' ||
+                                (rowData.type === 'array' &&
+                                    rowData.items?.type === 'object'))
+                        ) {
                             return 'cratis-schema-editor-navigable-row';
                         }
                         return '';
@@ -494,7 +600,10 @@ export const SchemaEditor = ({
                             if (rowData.name) {
                                 if (rowData.type === 'object') {
                                     navigateToProperty(rowData.name);
-                                } else if (rowData.type === 'array' && rowData.items?.type === 'object') {
+                                } else if (
+                                    rowData.type === 'array' &&
+                                    rowData.items?.type === 'object'
+                                ) {
                                     navigateToArrayItems(rowData.name);
                                 }
                             }
@@ -502,12 +611,16 @@ export const SchemaEditor = ({
                     }}
                     pt={{
                         root: { style: { border: 'none' } },
-                        tbody: { style: { borderTop: '1px solid var(--cratis-surface-border)' } }
+                        body: {
+                            style: {
+                                borderTop: '1px solid var(--cratis-surface-border)',
+                            },
+                        },
                     }}
                 >
                     <Column
-                        field="name"
-                        header="Property"
+                        field='name'
+                        header='Property'
                         body={(rowData: JsonSchemaProperty) => (
                             <NameCell
                                 rowData={rowData}
@@ -519,7 +632,7 @@ export const SchemaEditor = ({
                         style={{ width: '30%' }}
                     />
                     <Column
-                        header="Type"
+                        header='Type'
                         body={(rowData: JsonSchemaProperty) => (
                             <TypeCell
                                 rowData={rowData}
diff --git a/Source/SchemaEditor/TypeCell.tsx b/Source/SchemaEditor/TypeCell.tsx
index 07bf3a9a..546d64cd 100644
--- a/Source/SchemaEditor/TypeCell.tsx
+++ b/Source/SchemaEditor/TypeCell.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 { Button } from 'primereact/button';
+import { Button } from '../Common/Button';
 import { Dropdown } from '../Dropdown/Dropdown';
 import { Tooltip } from '../Common/Tooltip';
 import * as faIcons from 'react-icons/fa6';
@@ -13,7 +13,12 @@ export interface TypeCellProps {
     rowData: JsonSchemaProperty;
     isEditMode: boolean;
     typeFormats: TypeFormat[];
-    onUpdateProperty: (oldName: string, field: keyof JsonSchemaProperty, value: unknown, additionalUpdates?: Partial<JsonSchemaProperty>) => void;
+    onUpdateProperty: (
+        oldName: string,
+        field: keyof JsonSchemaProperty,
+        value: unknown,
+        additionalUpdates?: Partial<JsonSchemaProperty>,
+    ) => void;
     onUpdateArrayItemType: (propertyName: string, itemType: string) => void;
     onNavigateToProperty: (propertyName: string) => void;
     onNavigateToArrayItems: (propertyName: string) => void;
@@ -24,7 +29,7 @@ export interface TypeCellProps {
 
 const CONTAINER_TYPES = [
     { label: 'array', value: 'array' },
-    { label: 'object', value: 'object' }
+    { label: 'object', value: 'object' },
 ];
 
 export const TypeCell = ({
@@ -36,31 +41,33 @@ export const TypeCell = ({
     onNavigateToProperty,
     onNavigateToArrayItems,
     onRemoveProperty,
-    labels
+    labels,
 }: TypeCellProps) => {
     const DEFAULT_TYPE_OPTIONS = [
         { label: 'string', value: 'string' },
         { label: 'integer', value: 'integer' },
         { label: 'number', value: 'number' },
-        { label: 'boolean', value: 'boolean' }
+        { label: 'boolean', value: 'boolean' },
     ];
 
-    const formatOptions = typeFormats.length > 0
-        ? typeFormats.map(tf => {
-            const format = (!tf.format || tf.format === '' ? tf.jsonType : tf.format);
-            return { label: format, value: format };
-        })
-        : DEFAULT_TYPE_OPTIONS;
+    const formatOptions =
+        typeFormats.length > 0
+            ? typeFormats.map((tf) => {
+                  const format = !tf.format || tf.format === '' ? tf.jsonType : tf.format;
+                  return { label: format, value: format };
+              })
+            : DEFAULT_TYPE_OPTIONS;
 
-    const allTypeOptions = [
-        ...formatOptions,
-        ...CONTAINER_TYPES
-    ];
+    const allTypeOptions = [...formatOptions, ...CONTAINER_TYPES];
 
     const displayValue = rowData.format || rowData.type || 'string';
     const currentValue = rowData.format || rowData.type || 'string';
 
-    const handleTypeChange = (value: string, propertyName: string, isArrayItem: boolean = false) => {
+    const handleTypeChange = (
+        value: string,
+        propertyName: string,
+        isArrayItem: boolean = false,
+    ) => {
         if (value === 'array' || value === 'object') {
             if (isArrayItem) {
                 onUpdateArrayItemType(propertyName, value);
@@ -68,8 +75,9 @@ export const TypeCell = ({
                 onUpdateProperty(propertyName, 'type', value, { format: undefined });
             }
         } else {
-            const typeFormat = typeFormats.find(tf => {
-                const effectiveFormat = (!tf.format || tf.format === '' ? tf.jsonType : tf.format);
+            const typeFormat = typeFormats.find((tf) => {
+                const effectiveFormat =
+                    !tf.format || tf.format === '' ? tf.jsonType : tf.format;
                 return effectiveFormat === value;
             });
 
@@ -78,9 +86,13 @@ export const TypeCell = ({
                     onUpdateArrayItemType(propertyName, typeFormat.jsonType);
                 } else {
                     if (typeFormat.format && typeFormat.format !== '') {
-                        onUpdateProperty(propertyName, 'type', typeFormat.jsonType, { format: value });
+                        onUpdateProperty(propertyName, 'type', typeFormat.jsonType, {
+                            format: value,
+                        });
                     } else {
-                        onUpdateProperty(propertyName, 'type', typeFormat.jsonType, { format: undefined });
+                        onUpdateProperty(propertyName, 'type', typeFormat.jsonType, {
+                            format: undefined,
+                        });
                     }
                 }
             } else {
@@ -98,14 +110,28 @@ export const TypeCell = ({
             const itemType = rowData.items?.type || 'string';
             const isNavigable = itemType === 'object';
             return (
-                <Tooltip content={isNavigable ? 'Click to navigate to item definition' : undefined} position="top" className="w-full">
-                    <div className="flex items-center gap-2 w-full" style={{ height: '100%' }}>
+                <Tooltip
+                    content={
+                        isNavigable ? 'Click to navigate to item definition' : undefined
+                    }
+                    position='top'
+                    className='w-full'
+                >
+                    <div
+                        className='flex items-center gap-2 w-full'
+                        style={{ height: '100%' }}
+                    >
                         <span>Array of {itemType}</span>
                         {isNavigable && (
                             <>
                                 <div style={{ flex: 1 }} />
                                 <span style={{ display: 'flex', alignItems: 'center' }}>
-                                    <faIcons.FaArrowRight style={{ fontSize: '1rem', color: 'var(--cratis-primary-color)' }} />
+                                    <faIcons.FaArrowRight
+                                        style={{
+                                            fontSize: '1rem',
+                                            color: 'var(--cratis-primary-color)',
+                                        }}
+                                    />
                                 </span>
                             </>
                         )}
@@ -114,12 +140,24 @@ export const TypeCell = ({
             );
         } else if (rowData.type === 'object') {
             return (
-                <Tooltip content="Click to navigate to object properties" position="top" className="w-full">
-                    <div className="flex items-center gap-2 w-full" style={{ height: '100%' }}>
+                <Tooltip
+                    content='Click to navigate to object properties'
+                    position='top'
+                    className='w-full'
+                >
+                    <div
+                        className='flex items-center gap-2 w-full'
+                        style={{ height: '100%' }}
+                    >
                         <span>Object</span>
                         <div style={{ flex: 1 }} />
                         <span style={{ display: 'flex', alignItems: 'center' }}>
-                            <faIcons.FaArrowRight style={{ fontSize: '1rem', color: 'var(--cratis-primary-color)' }} />
+                            <faIcons.FaArrowRight
+                                style={{
+                                    fontSize: '1rem',
+                                    color: 'var(--cratis-primary-color)',
+                                }}
+                            />
                         </span>
                     </div>
                 </Tooltip>
@@ -129,48 +167,80 @@ export const TypeCell = ({
     }
 
     return (
-        <div className="flex items-center gap-2 w-full" style={{ minHeight: '2.5rem' }}>
+        <div className='flex items-center gap-2 w-full' style={{ minHeight: '2.5rem' }}>
             <Dropdown<string>
                 value={currentValue}
                 options={allTypeOptions}
-                optionLabel="label"
-                optionValue="value"
+                optionLabel='label'
+                optionValue='value'
                 onChange={(e) => handleTypeChange(e.value, rowData.name || '')}
-                className="flex-1"
+                className='flex-1'
             />
             {rowData.type === 'array' && rowData.items && (
                 <>
-                    <span style={{ whiteSpace: 'nowrap', display: 'flex', alignItems: 'center' }}>of</span>
+                    <span
+                        style={{
+                            whiteSpace: 'nowrap',
+                            display: 'flex',
+                            alignItems: 'center',
+                        }}
+                    >
+                        of
+                    </span>
                     <Dropdown<string>
                         value={rowData.items.type || 'string'}
                         options={allTypeOptions}
-                        optionLabel="label"
-                        optionValue="value"
-                        onChange={(e) => handleTypeChange(e.value, rowData.name || '', true)}
-                        className="flex-1"
+                        optionLabel='label'
+                        optionValue='value'
+                        onChange={(e) =>
+                            handleTypeChange(e.value, rowData.name || '', true)
+                        }
+                        className='flex-1'
                     />
                 </>
             )}
-            <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
-                {rowData.type === 'array' && rowData.items?.type === 'object' && rowData.name && (
-                    <Tooltip content={labels.navigateToItemDefinition} position="top">
-                        <Button variant="text" size="small" iconOnly onClick={() => onNavigateToArrayItems(rowData.name!)} aria-label={labels.navigateToItemDefinition}>
-                            <faIcons.FaArrowRight />
-                        </Button>
-                    </Tooltip>
-                )}
+            <div
+                style={{
+                    marginLeft: 'auto',
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '0.5rem',
+                }}
+            >
+                {rowData.type === 'array' &&
+                    rowData.items?.type === 'object' &&
+                    rowData.name && (
+                        <Tooltip content={labels.navigateToItemDefinition} position='top'>
+                            <Button
+                                text
+                                size='small'
+                                icon={<faIcons.FaArrowRight />}
+                                onClick={() => onNavigateToArrayItems(rowData.name!)}
+                                aria-label={labels.navigateToItemDefinition}
+                            />
+                        </Tooltip>
+                    )}
                 {rowData.type === 'object' && rowData.name && (
-                    <Tooltip content={labels.navigateToProperties} position="top">
-                        <Button variant="text" size="small" iconOnly onClick={() => onNavigateToProperty(rowData.name!)} aria-label={labels.navigateToProperties}>
-                            <faIcons.FaArrowRight />
-                        </Button>
+                    <Tooltip content={labels.navigateToProperties} position='top'>
+                        <Button
+                            text
+                            size='small'
+                            icon={<faIcons.FaArrowRight />}
+                            onClick={() => onNavigateToProperty(rowData.name!)}
+                            aria-label={labels.navigateToProperties}
+                        />
                     </Tooltip>
                 )}
                 {rowData.name && (
-                    <Tooltip content={labels.deleteProperty} position="top">
-                        <Button variant="text" severity="danger" size="small" iconOnly onClick={() => onRemoveProperty(rowData.name!)} aria-label={labels.deleteProperty}>
-                            <faIcons.FaTrash />
-                        </Button>
+                    <Tooltip content={labels.deleteProperty} position='top'>
+                        <Button
+                            text
+                            severity='danger'
+                            size='small'
+                            icon={<faIcons.FaTrash />}
+                            onClick={() => onRemoveProperty(rowData.name!)}
+                            aria-label={labels.deleteProperty}
+                        />
                     </Tooltip>
                 )}
             </div>
diff --git a/Source/Styled/CratisPreset.ts b/Source/Styled/CratisPreset.ts
index 9b252648..d14044ee 100644
--- a/Source/Styled/CratisPreset.ts
+++ b/Source/Styled/CratisPreset.ts
@@ -1,78 +1,14 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { definePreset } from '@primeuix/themes';
-import Lara from '@primeuix/themes/lara';
-
 /**
- * A `@primeuix/themes` preset with the look Cratis applications had on PrimeReact 10.
- *
- * Every Cratis application shipped `lara-dark-blue` (and `lara-light-blue` where a light
- * scheme was offered). Lara is still PrimeReact's design system in version 11, so this
- * starts from it and moves the palette back to what those themes used: a blue primary
- * over gray surfaces.
- *
- * The dark surface scale is shifted one step lighter than the light one. Lara's dark
- * scheme places content on `surface.900`, form fields and the page on `surface.950`, and
- * borders and hovers on `surface.800`; the v10 dark theme had cards, tables, dialogs and
- * dropdown panels on `#1f2937` (gray 800) over a `#111827` (gray 900) page, with inputs on
- * the page tone. Mapping dark `surface.900` to gray 800 and `surface.950` to gray 900
- * reproduces exactly that through Lara's own component tokens, without overriding any
- * of them — so borders, hovers and selection stay one visible step apart from the
- * surfaces they sit on.
- *
- * Both color schemes are carried; which one applies follows the provider's
- * `darkModeSelector`. Extend it the way you would any preset:
- *
- * ```ts
- * import { definePreset } from '@primeuix/themes';
- * import { CratisPreset } from '@cratis/components/styled';
+ * Legacy preset marker retained for source compatibility.
  *
- * const MyPreset = definePreset(CratisPreset, { semantic: { primary: { ... } } });
- * ```
+ * Components now styles its Cratis-owned markup through `tokens`, `styles`, and
+ * the optional `theme` stylesheet. Consumer design systems should map their own
+ * variables onto the `--cratis-*` tokens instead of extending a renderer preset.
  */
-export const CratisPreset = definePreset(Lara, {
-    semantic: {
-        primary: {
-            50: '{blue.50}',
-            100: '{blue.100}',
-            200: '{blue.200}',
-            300: '{blue.300}',
-            400: '{blue.400}',
-            500: '{blue.500}',
-            600: '{blue.600}',
-            700: '{blue.700}',
-            800: '{blue.800}',
-            900: '{blue.900}',
-            950: '{blue.950}',
-        },
-        surface: {
-            0: '#ffffff',
-            50: '{gray.50}',
-            100: 'light-dark({gray.100}, {gray.50})',
-            200: 'light-dark({gray.200}, {gray.100})',
-            300: 'light-dark({gray.300}, {gray.200})',
-            400: 'light-dark({gray.400}, {gray.300})',
-            500: 'light-dark({gray.500}, {gray.400})',
-            600: 'light-dark({gray.600}, {gray.500})',
-            700: 'light-dark({gray.700}, {gray.600})',
-            800: 'light-dark({gray.800}, {gray.700})',
-            900: 'light-dark({gray.900}, {gray.800})',
-            950: 'light-dark({gray.950}, {gray.900})',
-        },
-    },
-    components: {
-        // Lara raises a table's head and foot one step above its rows; the v10 dark theme
-        // kept them on the row tone and told them apart by weight and a border, as the
-        // Workbench and Studio tables were designed around.
-        datatable: {
-            header: { background: 'light-dark({surface.50}, {content.background})' },
-            headerCell: {
-                background: 'light-dark({surface.50}, {content.background})',
-                selectedBackground: 'light-dark({surface.50}, {content.background})',
-            },
-            footer: { background: 'light-dark({surface.50}, {content.background})' },
-            footerCell: { background: 'light-dark({surface.50}, {content.background})' },
-        },
-    },
+export const CratisPreset = Object.freeze({
+    name: 'cratis',
+    darkModeSelector: '.cratis-dark',
 });
diff --git a/Source/Styled/for_primeReactStyles/when_resolving_the_styles_of_every_primitive.ts b/Source/Styled/for_primeReactStyles/when_resolving_the_styles_of_every_primitive.ts
deleted file mode 100644
index 8eee1b92..00000000
--- a/Source/Styled/for_primeReactStyles/when_resolving_the_styles_of_every_primitive.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-// Copyright (c) Cratis. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-
-import { primeReactStyles } from '../primeReactStyles';
-
-type Entry = { props: { styles?: { name: string; classes: unknown }; motionProps?: { name: string } } };
-
-describe('when resolving the styles of every primitive', () => {
-    const entries = Object.entries(primeReactStyles) as [string, Entry][];
-    const roots = entries.filter(([, entry]) => entry.props.styles);
-    const motionOnly = entries.filter(([, entry]) => !entry.props.styles);
-
-    it('should have an entry for every primitive this library renders', () => {
-        for (const name of [
-            'Button', 'InputText', 'Textarea', 'InputPassword',
-            'Checkbox.Root', 'RadioButton.Root', 'ToggleSwitch.Root', 'Slider.Root', 'Rating.Root',
-            'InputNumber.Root', 'InputTags.Root', 'InputColor.Root', 'DatePicker.Root', 'Select.Root',
-            'DataTable.Root', 'Dialog.Root', 'Popover.Root', 'Stepper.Root', 'Tooltip.Root',
-            'Toast.Root', 'Toaster.Root', 'Message.Root', 'Tag', 'Badge', 'Chip.Root', 'Avatar.Root',
-            'Skeleton', 'ProgressBar.Root', 'ProgressSpinner.Root', 'Timeline.Root',
-        ]) {
-            primeReactStyles.should.have.property(name);
-        }
-    });
-
-    it('should give every root a named PrimeReact style with class names', () => {
-        roots.should.not.be.empty;
-        for (const [, entry] of roots) {
-            entry.props.styles!.name.should.be.a('string').and.not.be.empty;
-            entry.props.styles!.should.have.property('classes');
-        }
-    });
-
-    it('should name the motion of every part that only animates', () => {
-        motionOnly.should.not.be.empty;
-        for (const [, entry] of motionOnly) {
-            entry.props.motionProps!.name.should.match(/^p-/);
-        }
-    });
-
-    it('should key every entry on a primitive component name', () => {
-        for (const [name] of entries) {
-            name.should.match(/^[A-Z][A-Za-z]+(\.[A-Z][A-Za-z]+)?$/);
-        }
-    });
-});
diff --git a/Source/Styled/for_styledMode/when_configuring_with_defaults.ts b/Source/Styled/for_styledMode/when_configuring_with_defaults.ts
deleted file mode 100644
index f7554a0d..00000000
--- a/Source/Styled/for_styledMode/when_configuring_with_defaults.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-// Copyright (c) Cratis. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-
-import { CratisPreset } from '../CratisPreset';
-import { primeReactStyles } from '../primeReactStyles';
-import { cratisDarkModeSelector, primeReactCssLayer, primeReactCssLayerOrder, styledMode } from '../styledMode';
-
-describe('when configuring with defaults', () => {
-    let config: ReturnType<typeof styledMode>;
-
-    beforeEach(() => {
-        config = styledMode();
-    });
-
-    it('should style with the Cratis preset', () => {
-        config.theme!.preset!.should.equal(CratisPreset);
-    });
-
-    it('should switch dark mode on the Cratis dark class', () => {
-        config.theme!.options!.darkModeSelector!.should.equal(cratisDarkModeSelector);
-    });
-
-    it('should emit the theme into the primereact cascade layer', () => {
-        (config.theme!.options!.cssLayer as { name: string }).name.should.equal(primeReactCssLayer);
-    });
-
-    it('should order the layer above the base reset and below utilities', () => {
-        (config.theme!.options!.cssLayer as { order: string }).order.should.equal(primeReactCssLayerOrder);
-    });
-
-    it('should hand every primitive its PrimeReact styles', () => {
-        config.defaults!.should.equal(primeReactStyles);
-    });
-});
diff --git a/Source/Styled/for_styledMode/when_configuring_with_options.ts b/Source/Styled/for_styledMode/when_configuring_with_options.ts
deleted file mode 100644
index 347c2559..00000000
--- a/Source/Styled/for_styledMode/when_configuring_with_options.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-// Copyright (c) Cratis. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-
-import { primeReactStyles } from '../primeReactStyles';
-import { styledMode } from '../styledMode';
-
-describe('when configuring with options', () => {
-    const preset = { primitive: {}, semantic: {} };
-
-    it('should style with the given preset', () => {
-        styledMode({ preset }).theme!.preset!.should.equal(preset);
-    });
-
-    it('should switch dark mode on the given selector', () => {
-        styledMode({ darkModeSelector: '.app-dark' }).theme!.options!.darkModeSelector!.should.equal('.app-dark');
-    });
-
-    it('should follow the system scheme when asked to', () => {
-        styledMode({ darkModeSelector: 'system' }).theme!.options!.darkModeSelector!.should.equal('system');
-    });
-
-    it('should name the cascade layer from a string', () => {
-        (styledMode({ cssLayer: 'ui' }).theme!.options!.cssLayer as { name: string }).name.should.equal('ui');
-    });
-
-    it('should keep the default order with the layer renamed', () => {
-        (styledMode({ cssLayer: 'ui' }).theme!.options!.cssLayer as { order: string }).order.should.equal('theme, base, ui, components, utilities');
-    });
-
-    it('should pass a layer with an order through untouched', () => {
-        const cssLayer = { name: 'ui', order: 'reset, ui, app' };
-        styledMode({ cssLayer }).theme!.options!.cssLayer!.should.equal(cssLayer);
-    });
-
-    it('should emit the theme unlayered when asked to', () => {
-        styledMode({ cssLayer: false }).theme!.options!.cssLayer!.should.equal(false);
-    });
-
-    it('should still hand every primitive its PrimeReact styles', () => {
-        styledMode({ preset }).defaults!.should.equal(primeReactStyles);
-    });
-});
diff --git a/Source/Styled/for_styledMode/when_using_the_legacy_helper.ts b/Source/Styled/for_styledMode/when_using_the_legacy_helper.ts
new file mode 100644
index 00000000..aad8049a
--- /dev/null
+++ b/Source/Styled/for_styledMode/when_using_the_legacy_helper.ts
@@ -0,0 +1,20 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { expect } from 'chai';
+import { describe, it } from 'vitest';
+import { CratisPreset } from '../CratisPreset';
+import { primeReactStyles } from '../primeReactStyles';
+import { styledMode } from '../styledMode';
+
+describe('when using the legacy styled-mode surface', () => {
+    it('should return an empty provider configuration', () => {
+        expect(styledMode()).to.deep.equal({});
+        expect(styledMode({ preset: { name: 'legacy' } })).to.deep.equal({});
+    });
+
+    it('should retain inert legacy exports for migration builds', () => {
+        expect(CratisPreset.name).to.equal('cratis');
+        expect(primeReactStyles).to.deep.equal({});
+    });
+});
diff --git a/Source/Styled/primeReactStyles.ts b/Source/Styled/primeReactStyles.ts
index c2442634..08317971 100644
--- a/Source/Styled/primeReactStyles.ts
+++ b/Source/Styled/primeReactStyles.ts
@@ -1,204 +1,8 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import type { ComponentDefaults } from '@primereact/types/core';
-import { styles as accordion } from '@primereact/styles/accordion';
-import { styles as autocomplete } from '@primereact/styles/autocomplete';
-import { styles as avatar } from '@primereact/styles/avatar';
-import { styles as avatarGroup } from '@primereact/styles/avatargroup';
-import { styles as badge } from '@primereact/styles/badge';
-import { styles as breadcrumb } from '@primereact/styles/breadcrumb';
-import { styles as button } from '@primereact/styles/button';
-import { styles as buttonGroup } from '@primereact/styles/buttongroup';
-import { styles as card } from '@primereact/styles/card';
-import { styles as carousel } from '@primereact/styles/carousel';
-import { styles as checkbox } from '@primereact/styles/checkbox';
-import { styles as checkboxGroup } from '@primereact/styles/checkboxgroup';
-import { styles as chip } from '@primereact/styles/chip';
-import { styles as compare } from '@primereact/styles/compare';
-import { styles as contextMenu } from '@primereact/styles/contextmenu';
-import { styles as dataTable } from '@primereact/styles/datatable';
-import { styles as dataView } from '@primereact/styles/dataview';
-import { styles as datePicker } from '@primereact/styles/datepicker';
-import { styles as dialog } from '@primereact/styles/dialog';
-import { styles as divider } from '@primereact/styles/divider';
-import { styles as drawer } from '@primereact/styles/drawer';
-import { styles as fieldset } from '@primereact/styles/fieldset';
-import { styles as fileUpload } from '@primereact/styles/fileupload';
-import { styles as floatLabel } from '@primereact/styles/floatlabel';
-import { styles as fluid } from '@primereact/styles/fluid';
-import { styles as gallery } from '@primereact/styles/gallery';
-import { styles as iconField } from '@primereact/styles/iconfield';
-import { styles as iftaLabel } from '@primereact/styles/iftalabel';
-import { styles as inplace } from '@primereact/styles/inplace';
-import { styles as inputColor } from '@primereact/styles/inputcolor';
-import { styles as inputGroup } from '@primereact/styles/inputgroup';
-import { styles as inputNumber } from '@primereact/styles/inputnumber';
-import { styles as inputOtp } from '@primereact/styles/inputotp';
-import { styles as inputTags } from '@primereact/styles/inputtags';
-import { styles as inputText } from '@primereact/styles/inputtext';
-import { styles as knob } from '@primereact/styles/knob';
-import { styles as label } from '@primereact/styles/label';
-import { styles as listbox } from '@primereact/styles/listbox';
-import { styles as menu } from '@primereact/styles/menu';
-import { styles as message } from '@primereact/styles/message';
-import { styles as meterGroup } from '@primereact/styles/metergroup';
-import { styles as navigationMenu } from '@primereact/styles/navigationmenu';
-import { styles as organizationChart } from '@primereact/styles/organizationchart';
-import { styles as overlayBadge } from '@primereact/styles/overlaybadge';
-import { styles as paginator } from '@primereact/styles/paginator';
-import { styles as panel } from '@primereact/styles/panel';
-import { styles as password } from '@primereact/styles/password';
-import { styles as popover } from '@primereact/styles/popover';
-import { styles as progressBar } from '@primereact/styles/progressbar';
-import { styles as progressSpinner } from '@primereact/styles/progressspinner';
-import { styles as radioButton } from '@primereact/styles/radiobutton';
-import { styles as radioButtonGroup } from '@primereact/styles/radiobuttongroup';
-import { styles as rating } from '@primereact/styles/rating';
-import { styles as scrollArea } from '@primereact/styles/scrollarea';
-import { styles as select } from '@primereact/styles/select';
-import { styles as sidebar, layoutStyles as sidebarLayout } from '@primereact/styles/sidebar';
-import { styles as skeleton } from '@primereact/styles/skeleton';
-import { styles as slider } from '@primereact/styles/slider';
-import { styles as speedDial } from '@primereact/styles/speeddial';
-import { styles as splitter } from '@primereact/styles/splitter';
-import { styles as stepper } from '@primereact/styles/stepper';
-import { styles as tabs } from '@primereact/styles/tabs';
-import { styles as tag } from '@primereact/styles/tag';
-import { styles as terminal } from '@primereact/styles/terminal';
-import { styles as textarea } from '@primereact/styles/textarea';
-import { styles as timeline } from '@primereact/styles/timeline';
-import { styles as toast } from '@primereact/styles/toast';
-import { styles as toaster } from '@primereact/styles/toaster';
-import { styles as toggleButton } from '@primereact/styles/togglebutton';
-import { styles as toggleButtonGroup } from '@primereact/styles/togglebuttongroup';
-import { styles as toggleSwitch } from '@primereact/styles/toggleswitch';
-import { styles as toolbar } from '@primereact/styles/toolbar';
-import { styles as tooltip } from '@primereact/styles/tooltip';
-import { styles as tree } from '@primereact/styles/tree';
-
-/**
- * The names PrimeReact's motion hook uses for the enter/leave classes of an overlay or
- * collapsible part. `@primereact/ui` hands these to the same primitives when it composes
- * its styled components; the theme's transitions key off them.
- */
-const anchoredOverlay = 'p-anchored-overlay';
-const collapsible = 'p-collapsible';
-const overlayMask = 'p-overlay-mask';
-
-/** A root that carries a component's `styles`, optionally with the motion its parts animate through. */
-const styled = (styles: unknown, motion?: string) => ({ props: motion ? { styles, motionProps: { name: motion } } : { styles } });
-
-/** A part that only needs its motion name — its classes come from the root's `styles`. */
-const motion = (name: string) => ({ props: { motionProps: { name } } });
-
 /**
- * PrimeReact 11's own component styles, keyed by primitive component name, ready to be
- * handed to the provider as `defaults`.
- *
- * PrimeReact 11 splits every component in two: the `primereact/*` primitives, which own
- * behavior and render structural markup with `data-scope` / `data-part` attributes and no
- * class names, and `@primereact/styles/*`, which holds the `p-*` class names and the CSS
- * that a `@primeuix/themes` preset drives. `@primereact/ui/*` is nothing more than the two
- * glued together: each styled component is the primitive with its `styles` prop preset.
- *
- * `@cratis/components` builds on the primitives, so a preset alone leaves it unstyled.
- * PrimeReact's provider accepts default props per component name (`defaults`), and
- * `styles` is a public prop on every primitive, so this map performs the same gluing
- * `@primereact/ui` does — for every primitive rendered under the provider, whether by
- * this library or by the application. Together with a preset it is styled mode. Prefer
- * {@link styledMode}, which combines the two.
- *
- * Every entry keys the primitive's *root* name (`Dialog.Root`, `Button`), because the
- * parts read their class names from the root's styles. The overlay/collapsible parts
- * that animate are also listed, with the motion name the theme's transitions expect.
+ * Legacy empty style map retained so existing imports fail softly during the
+ * major migration. The default package no longer renders PrimeReact markup.
  */
-export const primeReactStyles: ComponentDefaults = {
-    'Accordion.Root': styled(accordion, collapsible),
-    'AutoComplete.Root': styled(autocomplete),
-    'AutoComplete.Popup': motion(anchoredOverlay),
-    'Avatar.Root': styled(avatar),
-    'AvatarGroup': styled(avatarGroup),
-    'Badge': styled(badge),
-    'Breadcrumb.Root': styled(breadcrumb),
-    'Button': styled(button),
-    'ButtonGroup': styled(buttonGroup),
-    'Card.Root': styled(card),
-    'Carousel.Root': styled(carousel),
-    'Checkbox.Root': styled(checkbox),
-    'CheckboxGroup': styled(checkboxGroup),
-    'Chip.Root': styled(chip),
-    'Compare.Root': styled(compare),
-    'ContextMenu.Root': styled(contextMenu),
-    'ContextMenu.Popup': motion(anchoredOverlay),
-    'DataTable.Root': styled(dataTable),
-    'DataView.Root': styled(dataView),
-    'DatePicker.Root': styled(datePicker),
-    'DatePicker.Popup': motion(anchoredOverlay),
-    'Dialog.Root': styled(dialog),
-    'Dialog.Backdrop': motion(overlayMask),
-    'Dialog.Popup': motion('p-dialog'),
-    'Divider': styled(divider),
-    'Drawer.Root': styled(drawer),
-    'Drawer.Backdrop': motion(overlayMask),
-    'Drawer.Popup': motion('p-drawer'),
-    'Fieldset.Root': styled(fieldset, collapsible),
-    'FileUpload.Root': styled(fileUpload),
-    'FloatLabel': styled(floatLabel),
-    'Fluid': styled(fluid),
-    'Gallery.Root': styled(gallery),
-    'IconField.Root': styled(iconField),
-    'IftaLabel': styled(iftaLabel),
-    'Inplace.Root': styled(inplace),
-    'InputColor.Root': styled(inputColor),
-    'InputGroup.Root': styled(inputGroup),
-    'InputNumber.Root': styled(inputNumber),
-    'InputOtp.Root': styled(inputOtp),
-    'InputPassword': styled(password),
-    'InputTags.Root': styled(inputTags),
-    'InputText': styled(inputText),
-    'Knob.Root': styled(knob),
-    'Label': styled(label),
-    'Listbox.Root': styled(listbox),
-    'Menu.Root': styled(menu),
-    'Menu.Popup': motion(anchoredOverlay),
-    'Message.Root': styled(message),
-    'MeterGroup.Root': styled(meterGroup),
-    'NavigationMenu': styled(navigationMenu),
-    'OrganizationChart.Root': styled(organizationChart),
-    'OverlayBadge': styled(overlayBadge),
-    'Paginator.Root': styled(paginator),
-    'Panel.Root': styled(panel, collapsible),
-    'Popover.Root': styled(popover),
-    'Popover.Popup': motion(anchoredOverlay),
-    'ProgressBar.Root': styled(progressBar),
-    'ProgressSpinner.Root': styled(progressSpinner),
-    'RadioButton.Root': styled(radioButton),
-    'RadioButtonGroup': styled(radioButtonGroup),
-    'Rating.Root': styled(rating),
-    'ScrollArea.Root': styled(scrollArea),
-    'Select.Root': styled(select),
-    'Select.Popup': motion(anchoredOverlay),
-    'Sidebar.Root': styled(sidebar),
-    'Sidebar.Layout': styled(sidebarLayout),
-    'Sidebar.Backdrop': motion(overlayMask),
-    'Skeleton': styled(skeleton),
-    'Slider.Root': styled(slider),
-    'SpeedDial.Root': styled(speedDial),
-    'Splitter.Root': styled(splitter),
-    'Stepper.Root': styled(stepper, collapsible),
-    'Tabs.Root': styled(tabs),
-    'Tag': styled(tag),
-    'Terminal.Root': styled(terminal),
-    'Textarea': styled(textarea),
-    'Timeline.Root': styled(timeline),
-    'Toast.Root': styled(toast),
-    'Toaster.Root': styled(toaster),
-    'ToggleButton.Root': styled(toggleButton),
-    'ToggleButtonGroup': styled(toggleButtonGroup),
-    'ToggleSwitch.Root': styled(toggleSwitch),
-    'Toolbar.Root': styled(toolbar),
-    'Tooltip.Root': styled(tooltip),
-    'Tooltip.Popup': motion('p-tooltip'),
-    'Tree.Root': styled(tree),
-};
+export const primeReactStyles: Readonly<Record<string, never>> = Object.freeze({});
diff --git a/Source/Styled/styledMode.ts b/Source/Styled/styledMode.ts
index a3ff980c..c577c0ea 100644
--- a/Source/Styled/styledMode.ts
+++ b/Source/Styled/styledMode.ts
@@ -1,98 +1,31 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import type { CSSLayer, ThemeOptions } from '@primereact/types/core';
 import type { CratisComponentsConfig } from '../Common/CratisComponentsProvider';
-import { CratisPreset } from './CratisPreset';
-import { primeReactStyles } from './primeReactStyles';
 
-/**
- * The cascade layer PrimeReact's theme is emitted into by default. Rules in a layer lose
- * to unlayered rules regardless of specificity or order, which is what lets an
- * application's own stylesheet override the theme with a plain selector — exactly the
- * relationship PrimeReact 10's stylesheet themes had, since they were wrapped in
- * `@layer primereact` too.
- */
+/** Legacy cascade-layer name retained for migration tooling. */
 export const primeReactCssLayer = 'primereact';
-
-/**
- * The layer order declared with the theme by default. PrimeReact writes its `@layer`
- * statement ahead of every other stylesheet, so this is what fixes the order — and it
- * has to name Tailwind's layers, which `@cratis/components/styles` declares in every
- * consumer: the theme sits above `base`, so Tailwind's preflight reset does not strip the
- * padding and borders the theme gives a table cell or an input, and below `components`
- * and `utilities`, so a utility class on a PrimeReact element still wins.
- */
+/** Legacy cascade-layer order retained for migration tooling. */
 export const primeReactCssLayerOrder = 'theme, base, primereact, components, utilities';
-
-/**
- * The selector that switches the theme to its dark scheme by default. It is the class
- * the Cratis baseline theme keys its dark palette off as well, so one `class="cratis-dark"`
- * on the body serves both.
- */
+/** Default selector used by the Cratis token/theme stylesheets. */
 export const cratisDarkModeSelector = '.cratis-dark';
 
 export interface StyledModeOptions {
-    /**
-     * The `@primeuix/themes` preset to style with. Defaults to {@link CratisPreset}, the
-     * PrimeReact 10 look of Cratis applications; any preset — Aura, Nora, Material, or
-     * one derived with `definePreset` — works.
-     */
+    /** Legacy renderer preset. Ignored by the renderer-independent package. */
     preset?: unknown;
-
-    /**
-     * How the dark scheme is activated. A selector such as `.my-dark`, `'system'` for the
-     * `prefers-color-scheme` media query, or `'none'` to stay light. Defaults to
-     * {@link cratisDarkModeSelector}.
-     */
-    darkModeSelector?: ThemeOptions['darkModeSelector'];
-
-    /**
-     * The cascade layer to emit the theme into, or `false` to emit it unlayered — in
-     * which case the theme's rules compete with the application's on specificity and
-     * order alone, and being injected at runtime they arrive last. Defaults to
-     * {@link primeReactCssLayer} ordered by {@link primeReactCssLayerOrder}. A string
-     * names the layer and keeps that order with the name swapped in; a `{ name, order }`
-     * object is used as given.
-     */
-    cssLayer?: false | string | CSSLayer;
+    /** Dark selector retained for source compatibility. */
+    darkModeSelector?: string;
+    /** Legacy renderer cascade layer. Ignored by the renderer-independent package. */
+    cssLayer?: false | string | { name: string; order?: string };
 }
 
 /**
- * Configures {@link CratisComponentsProvider} for PrimeReact 11's styled mode: a
- * `@primeuix/themes` preset for the design tokens, and PrimeReact's own component styles
- * ({@link primeReactStyles}) so every primitive — those rendered by this library and those
- * the application renders itself — carries the `p-*` class names that preset paints.
- *
- * Spread the result into the provider's `value`, next to the license key and anything
- * else the application configures:
+ * Legacy provider helper retained for source compatibility.
  *
- * ```tsx
- * import { CratisComponentsProvider } from '@cratis/components';
- * import { styledMode } from '@cratis/components/styled';
- *
- * <CratisComponentsProvider value={{ license, ...styledMode() }}>
- * ```
- *
- * The theme goes into the `primereact` cascade layer, so a plain `.p-button { … }` in the
- * application's own stylesheet overrides it just as it did on PrimeReact 10 — see
- * {@link primeReactCssLayerOrder} for where that layer sits relative to Tailwind's.
+ * Components is now styled by importing `@cratis/components/tokens`,
+ * `@cratis/components/styles`, and optionally `@cratis/components/theme`.
+ * The helper returns an empty configuration and can be removed from application code.
  */
-export const styledMode = (options: StyledModeOptions = {}): Pick<CratisComponentsConfig, 'theme' | 'defaults'> => {
-    const cssLayer = options.cssLayer === undefined
-        ? { name: primeReactCssLayer, order: primeReactCssLayerOrder }
-        : typeof options.cssLayer === 'string'
-            ? { name: options.cssLayer, order: primeReactCssLayerOrder.replace(primeReactCssLayer, options.cssLayer) }
-            : options.cssLayer;
-
-    return {
-        theme: {
-            preset: options.preset ?? CratisPreset,
-            options: {
-                darkModeSelector: options.darkModeSelector ?? cratisDarkModeSelector,
-                cssLayer,
-            },
-        },
-        defaults: primeReactStyles,
-    };
-};
+export const styledMode = (
+    _options: StyledModeOptions = {},
+): CratisComponentsConfig => ({});
diff --git a/Source/TimeMachine/EventsView.css b/Source/TimeMachine/EventsView.css
index 67afa4df..473e832e 100644
--- a/Source/TimeMachine/EventsView.css
+++ b/Source/TimeMachine/EventsView.css
@@ -10,13 +10,10 @@
 
 /* Timeline customization */
 .events-view-timeline {
+    display: flex;
     max-width: 1200px;
     margin: 0 auto;
     padding: 2.5rem 0 3rem;
-}
-
-.events-view-timeline .p-timeline {
-    display: flex;
     flex-direction: column;
 }
 
@@ -34,7 +31,9 @@
     justify-content: center;
     backdrop-filter: blur(8px);
     box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
+    transition:
+        transform 0.2s ease,
+        box-shadow 0.2s ease;
     z-index: 5;
     pointer-events: auto;
 }
@@ -105,7 +104,9 @@
     font-weight: 600;
     color: var(--tm-text);
     margin: 0 0 0.5rem 0;
-    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
+    font-family:
+        -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto,
+        sans-serif;
 }
 
 .events-view-event-timestamp {
@@ -157,57 +158,55 @@
     box-shadow: 0 0 10px var(--tm-accent-glow);
 }
 
-/* PrimeReact Timeline connector styling */
-.events-view-timeline .p-timeline-event-connector {
-    background: linear-gradient(to bottom, var(--tm-accent-border), var(--tm-accent-bg));
-}
-
-.events-view-timeline .p-timeline-event:last-child .p-timeline-event-connector {
-    visibility: hidden;
+.events-view-timeline-event {
+    display: grid;
+    min-height: 5rem;
+    grid-template-columns: minmax(0, 1fr) 2.5rem minmax(0, 1fr);
+    align-items: stretch;
 }
 
-/* Remove default padding from PrimeReact timeline content areas */
-.events-view-timeline .p-timeline-event-opposite,
-.events-view-timeline .p-timeline-event-content {
-    padding: 0 1.5rem;
+.events-view-timeline-separator {
+    position: relative;
+    grid-column: 2;
     display: flex;
     align-items: center;
+    flex-direction: column;
 }
 
-/* Ensure cards hug the timeline on both sides */
-.events-view-timeline .p-timeline-event:nth-child(odd) .p-timeline-event-content {
-    justify-content: flex-start;
+.events-view-timeline-connector {
+    width: 2px;
+    min-height: 3rem;
+    flex: 1;
+    background: linear-gradient(to bottom, var(--tm-accent-border), var(--tm-accent-bg));
 }
 
-.events-view-timeline .p-timeline-event:nth-child(even) .p-timeline-event-content {
-    justify-content: flex-end;
+.events-view-timeline-content {
+    display: flex;
+    padding: 0 1.5rem 1.5rem;
+    align-items: flex-start;
 }
 
-.events-view-timeline .p-timeline-event:nth-child(odd) .p-timeline-event-opposite {
-    justify-content: flex-end;
+.events-view-timeline-event[data-position='right'] .events-view-timeline-content {
+    grid-column: 3;
+    justify-content: flex-start;
 }
 
-.events-view-timeline .p-timeline-event:nth-child(even) .p-timeline-event-opposite {
-    justify-content: flex-start;
+.events-view-timeline-event[data-position='left'] .events-view-timeline-content {
+    grid-column: 1;
+    grid-row: 1;
+    justify-content: flex-end;
+    text-align: right;
 }
 
 .events-view-event-card--left,
 .events-view-event-card--right {
     max-width: 380px;
 }
-
-/* Right-align content in left-side cards */
-.events-view-timeline .p-timeline-event-opposite .events-view-event-card {
-    text-align: right;
-}
-
-.events-view-timeline .p-timeline-event-opposite .events-view-event-card table {
+.events-view-event-card--left table {
     margin-left: auto;
     direction: rtl;
 }
-
-.events-view-timeline .p-timeline-event-opposite .events-view-event-card table td {
+.events-view-event-card--left table td {
     direction: ltr;
     text-align: right;
 }
-
diff --git a/Source/TimeMachine/EventsView.tsx b/Source/TimeMachine/EventsView.tsx
index e2938791..7da6d4e2 100644
--- a/Source/TimeMachine/EventsView.tsx
+++ b/Source/TimeMachine/EventsView.tsx
@@ -1,50 +1,39 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import React, { useEffect, useRef, useState } from 'react';
-import { Timeline } from 'primereact/timeline';
-import type { TimelineRootProps } from '@primereact/types/primitive/timeline';
+import { useEffect, useRef, useState, type HTMLAttributes } from 'react';
 import type { Event } from './types';
 import { type TimeMachineLabels, defaultTimeMachineLabels } from './TimeMachineLabels';
 import { Properties } from './Properties';
 
-/**
- * Props for {@link EventsView}.
- */
+interface EventsViewParts {
+    timeline?: HTMLAttributes<HTMLDivElement>;
+    event?: HTMLAttributes<HTMLElement>;
+    separator?: HTMLAttributes<HTMLDivElement>;
+    marker?: HTMLAttributes<HTMLDivElement>;
+    connector?: HTMLAttributes<HTMLDivElement>;
+    content?: HTMLAttributes<HTMLDivElement>;
+}
+
 interface EventsViewProps {
-    /** The events to display, in chronological order. */
     events: Event[];
-
-    /** Extra CSS class name forwarded to the underlying Timeline, alongside the component's own. */
     className?: string;
-
-    /** PrimeReact pass-through configuration applied to the underlying Timeline. */
-    pt?: TimelineRootProps['pt'];
-
-    /** PrimeReact pass-through options applied to the underlying Timeline. */
-    ptOptions?: TimelineRootProps['ptOptions'];
-
-    /** When true, disables every base PrimeReact style on the underlying Timeline. */
+    pt?: EventsViewParts;
+    ptOptions?: object;
     unstyled?: boolean;
-
-    /** Accessible-name overrides; defaults to English. See {@link TimeMachineLabels}. */
     labels?: TimeMachineLabels;
 }
 
-/**
- * Vertical timeline visualization of an ordered list of Cratis events.
- * Renders each event on alternating sides of a central spine with its
- * properties shown in a popup, and tracks scroll boundaries so up/down
- * arrows appear only when there's content to scroll to.
- *
- * Used inside {@link TimeMachine} to show the events that produced a given
- * read-model version, but can be reused for any event timeline UI.
- *
- * @param props - {@link EventsViewProps}.
- */
-export const EventsView: React.FC<EventsViewProps> = ({ events, className, pt, ptOptions, unstyled, labels = defaultTimeMachineLabels }) => {
-    // Use test data if no events provided
-    const displayEvents = events.length > 0 ? events : [];
+const classNames = (...values: Array<string | undefined>) =>
+    values.filter(Boolean).join(' ');
+
+/** Vertical, alternating timeline visualization of an ordered event list. */
+export const EventsView = ({
+    events,
+    className,
+    pt,
+    labels = defaultTimeMachineLabels,
+}: EventsViewProps) => {
     const containerRef = useRef<HTMLDivElement>(null);
     const [canScrollUp, setCanScrollUp] = useState(false);
     const [canScrollDown, setCanScrollDown] = useState(false);
@@ -56,102 +45,138 @@ export const EventsView: React.FC<EventsViewProps> = ({ events, className, pt, p
             setCanScrollDown(false);
             return;
         }
-
         const { scrollTop, scrollHeight, clientHeight } = container;
-        const epsilon = 1;
-        setCanScrollUp(scrollTop > epsilon);
-        setCanScrollDown(scrollTop + clientHeight < scrollHeight - epsilon);
+        setCanScrollUp(scrollTop > 1);
+        setCanScrollDown(scrollTop + clientHeight < scrollHeight - 1);
     };
 
     useEffect(() => {
         updateScrollState();
         const container = containerRef.current;
         if (!container) return;
+        container.addEventListener('scroll', updateScrollState);
+        return () => container.removeEventListener('scroll', updateScrollState);
+    }, [events.length]);
 
-        const handleScroll = () => updateScrollState();
-        container.addEventListener('scroll', handleScroll);
-        return () => container.removeEventListener('scroll', handleScroll);
-    }, [displayEvents.length]);
-
-    const renderEventCard = (event: Event, position: 'left' | 'right') => {
-        const isLeft = position === 'left';
-
-        return (
-            <div className={`events-view-event-card events-view-event-card--${position}`}>
-                <div className={`events-view-event-header ${isLeft ? 'events-view-event-header--right' : ''}`}>
-                    <h3 className={`events-view-event-name ${isLeft ? 'events-view-event-name--right' : ''}`}>{event.type}</h3>
-                    <div className={`events-view-event-timestamp ${isLeft ? 'events-view-event-timestamp--right' : ''}`}>
-                        {event.occurred.toLocaleString()}
-                    </div>
-                </div>
-                <div className="events-view-event-properties">
-                    <Properties data={event.content || {}} align="left" />
-                </div>
-            </div>
-        );
-    };
-
-    const customContent = (event: Event, index: number) => {
-        // PrimeReact places even indices (0,2,4,...) on the right, odd on the left
-        const position = index % 2 === 0 ? 'right' : 'left';
-        return renderEventCard(event, position);
-    };
-
-    const customMarker = () => {
-        return (
-            <div className="events-view-marker">
-                <div className="events-view-marker-dot"></div>
-            </div>
-        );
-    };
-
-    const scrollToTop = () => containerRef.current?.scrollTo({ top: 0, behavior: 'smooth' });
+    const scrollToTop = () =>
+        containerRef.current?.scrollTo({ top: 0, behavior: 'smooth' });
     const scrollToBottom = () => {
         const container = containerRef.current;
-        if (!container) return;
-        container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' });
+        if (container)
+            container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' });
     };
 
     return (
-        <div className="events-view-container" ref={containerRef}>
+        <div className='events-view-container' ref={containerRef}>
             {canScrollUp && (
-                <div className="events-view-scroll-button-wrapper events-view-scroll-button-wrapper--top">
+                <div className='events-view-scroll-button-wrapper events-view-scroll-button-wrapper--top'>
                     <button
-                        type="button"
-                        className="events-view-scroll-button events-view-scroll-button--top"
+                        type='button'
+                        className='events-view-scroll-button events-view-scroll-button--top'
                         onClick={scrollToTop}
                         aria-label={labels.scrollToTop}
                     >
-                        <i className="pi pi-arrow-up" />
+                        ↑
                     </button>
                 </div>
             )}
-            <Timeline.Root
-                align="alternate"
-                className={className ? `events-view-timeline ${className}` : 'events-view-timeline'}
-                pt={pt}
-                ptOptions={ptOptions}
-                unstyled={unstyled}
+            <div
+                {...pt?.timeline}
+                className={classNames(
+                    'events-view-timeline',
+                    pt?.timeline?.className,
+                    className,
+                )}
+                data-cratis-part='timeline'
             >
-                {displayEvents.map((event, index) => (
-                    <Timeline.Event key={index}>
-                        <Timeline.Separator>
-                            <Timeline.Marker>{customMarker()}</Timeline.Marker>
-                            {index < displayEvents.length - 1 && <Timeline.Connector />}
-                        </Timeline.Separator>
-                        <Timeline.Content>{customContent(event, index)}</Timeline.Content>
-                    </Timeline.Event>
-                ))}
-            </Timeline.Root>
+                {events.map((event, index) => {
+                    const position = index % 2 === 0 ? 'right' : 'left';
+                    return (
+                        <article
+                            {...pt?.event}
+                            key={`${event.type}-${event.occurred.toISOString()}-${index}`}
+                            className={classNames(
+                                'events-view-timeline-event',
+                                pt?.event?.className,
+                            )}
+                            data-cratis-part='event'
+                            data-position={position}
+                        >
+                            <div
+                                {...pt?.separator}
+                                className={classNames(
+                                    'events-view-timeline-separator',
+                                    pt?.separator?.className,
+                                )}
+                                data-cratis-part='separator'
+                            >
+                                <div
+                                    {...pt?.marker}
+                                    className={classNames(
+                                        'events-view-marker',
+                                        pt?.marker?.className,
+                                    )}
+                                    data-cratis-part='marker'
+                                >
+                                    <div className='events-view-marker-dot' />
+                                </div>
+                                {index < events.length - 1 && (
+                                    <div
+                                        {...pt?.connector}
+                                        className={classNames(
+                                            'events-view-timeline-connector',
+                                            pt?.connector?.className,
+                                        )}
+                                        data-cratis-part='connector'
+                                    />
+                                )}
+                            </div>
+                            <div
+                                {...pt?.content}
+                                className={classNames(
+                                    'events-view-timeline-content',
+                                    pt?.content?.className,
+                                )}
+                                data-cratis-part='content'
+                            >
+                                <div
+                                    className={`events-view-event-card events-view-event-card--${position}`}
+                                >
+                                    <div
+                                        className={`events-view-event-header ${position === 'left' ? 'events-view-event-header--right' : ''}`}
+                                    >
+                                        <h3
+                                            className={`events-view-event-name ${position === 'left' ? 'events-view-event-name--right' : ''}`}
+                                        >
+                                            {event.type}
+                                        </h3>
+                                        <div
+                                            className={`events-view-event-timestamp ${position === 'left' ? 'events-view-event-timestamp--right' : ''}`}
+                                        >
+                                            {event.occurred.toLocaleString()}
+                                        </div>
+                                    </div>
+                                    <div className='events-view-event-properties'>
+                                        <Properties
+                                            data={event.content || {}}
+                                            align='left'
+                                        />
+                                    </div>
+                                </div>
+                            </div>
+                        </article>
+                    );
+                })}
+            </div>
             {canScrollDown && (
-                <div className="events-view-scroll-button-wrapper events-view-scroll-button-wrapper--bottom">
+                <div className='events-view-scroll-button-wrapper events-view-scroll-button-wrapper--bottom'>
                     <button
-                        type="button"
-                        className="events-view-scroll-button events-view-scroll-button--bottom"
+                        type='button'
+                        className='events-view-scroll-button events-view-scroll-button--bottom'
                         onClick={scrollToBottom}
                         aria-label={labels.scrollToBottom}
                     >
-                        <i className="pi pi-arrow-down" />
+                        ↓
                     </button>
                 </div>
             )}
diff --git a/Source/index.ts b/Source/index.ts
index bd1d8968..52135e6e 100644
--- a/Source/index.ts
+++ b/Source/index.ts
@@ -5,7 +5,6 @@ import * as CommandDialog from './CommandDialog';
 import * as CommandStepper from './CommandDialog';
 import * as CommandForm from './CommandForm';
 import * as Common from './Common';
-import * as Compatibility from './Compatibility';
 import * as DataPage from './DataPage';
 import * as DataTables from './DataTables';
 import * as Dialogs from './Dialogs';
@@ -26,7 +25,6 @@ export {
     CommandStepper,
     CommandForm,
     Common,
-    Compatibility,
     DataPage,
     DataTables,
     Dialogs,
@@ -53,11 +51,3 @@ export {
     type CratisComponentsConfig,
     type CratisComponentsProviderProps,
 } from './Common/CratisComponentsProvider';
-
-export {
-    assertPrimeReact11PassThroughCompatibility,
-    components3PrimeReact11PassThroughContract,
-    primeReact11PassThroughSentinelAttribute,
-    primeReact11PassThroughSentinelPreset,
-    type PrimeReact11PassThroughComponent,
-} from './Compatibility';
diff --git a/Source/package.json b/Source/package.json
index c677c62a..7fe097f0 100644
--- a/Source/package.json
+++ b/Source/package.json
@@ -54,10 +54,6 @@
             "types": "./dist/esm/Common/index.d.ts",
             "import": "./dist/esm/Common/index.js"
         },
-        "./compatibility": {
-            "types": "./dist/esm/Compatibility/index.d.ts",
-            "import": "./dist/esm/Compatibility/index.js"
-        },
         "./DataPage": {
             "types": "./dist/esm/DataPage/index.d.ts",
             "import": "./dist/esm/DataPage/index.js"
@@ -148,44 +144,15 @@
         "ts-deepmerge": "8.0.0"
     },
     "devDependencies": {
-        "@cratis/arc.vite": "22.0.1",
-        "@primereact/core": "11.1.0",
-        "@primereact/headless": "11.1.0",
-        "@primereact/hooks": "11.1.0",
-        "@primereact/styles": "11.1.0",
-        "@primereact/types": "11.1.0",
-        "@primeuix/motion": "^1.0.0",
-        "@primeuix/styled": "^1.0.0",
-        "@primeuix/themes": "3.0.0",
-        "primeicons": "8.0.0",
-        "primereact": "11.1.0"
+        "@cratis/arc.vite": "22.0.1"
     },
     "peerDependencies": {
         "@cratis/arc": ">=20.3.1 <23",
         "@cratis/arc.react": ">=20.3.1 <23",
         "@cratis/fundamentals": "^7.10.3",
-        "@primereact/core": "^11.0.0",
-        "@primereact/headless": "^11.0.0",
-        "@primereact/hooks": "^11.0.0",
-        "@primereact/styles": "^11.0.0",
-        "@primereact/types": "^11.0.0",
-        "@primeuix/themes": "^3.0.0",
-        "primeicons": "^8.0.0",
-        "primereact": "^11.0.0",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
         "reflect-metadata": "0.2.2",
         "tsyringe": "4.10.0"
-    },
-    "peerDependenciesMeta": {
-        "@primereact/styles": {
-            "optional": true
-        },
-        "@primereact/types": {
-            "optional": true
-        },
-        "@primeuix/themes": {
-            "optional": true
-        }
     }
 }

From fbef34b9af0805cb346c834394fe8bd8a51e73b1 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Sun, 23 Aug 2026 12:54:03 +0200
Subject: [PATCH 010/267] Remove renderer-specific compatibility surfaces

---
 Source/CommandDialog/CommandStepper.tsx       |  10 +-
 Source/CommandDialog/StepperCommandDialog.tsx |  10 +-
 Source/CommandDialog/StepperPanel.tsx         |  11 +-
 Source/CommandForm/fields/CalendarField.tsx   |   2 +-
 Source/CommandForm/fields/DropdownField.tsx   |   6 +-
 .../CommandForm/fields/MultiSelectField.tsx   |  14 +-
 Source/Common/DatePickerInput.tsx             |   2 +-
 Source/Common/FormElement.tsx                 |   3 +-
 Source/DataPage/DataPage.tsx                  |  14 +-
 Source/DataTables/Column.tsx                  |   5 +-
 .../DataTableForObservableQuery.tsx           |   2 +-
 Source/DataTables/DataTableForQuery.tsx       |   2 +-
 .../DataTableSelectionChangeEvent.ts          |   3 +-
 Source/DataTables/TablePaginator.tsx          |   3 +-
 Source/MIGRATION.md                           | 647 +++++--------
 .../ObjectContentEditor.tsx                   |   4 +-
 .../PivotViewer/components/pivot/constants.ts |   2 +-
 Source/PivotViewer/types.ts                   |   4 +-
 Source/README.md                              | 871 +++---------------
 Source/SchemaEditor/SchemaEditor.tsx          |   4 +-
 Source/Styled/CratisPreset.ts                 |  14 -
 .../when_using_the_legacy_helper.ts           |  20 -
 Source/Styled/index.ts                        |   6 -
 Source/Styled/primeReactStyles.ts             |   8 -
 Source/Styled/styledMode.ts                   |  31 -
 Source/package.json                           |  11 +-
 Source/primereact-v10-palette.css             | 242 -----
 Source/scripts/copy-css.sh                    |   2 +-
 Source/theme.css                              | 423 ++-------
 Source/tokens.css                             | 135 +--
 Source/tsconfig.json                          |   3 +
 rollup.config.mjs                             |  24 +-
 32 files changed, 497 insertions(+), 2041 deletions(-)
 delete mode 100644 Source/Styled/CratisPreset.ts
 delete mode 100644 Source/Styled/for_styledMode/when_using_the_legacy_helper.ts
 delete mode 100644 Source/Styled/index.ts
 delete mode 100644 Source/Styled/primeReactStyles.ts
 delete mode 100644 Source/Styled/styledMode.ts
 delete mode 100644 Source/primereact-v10-palette.css

diff --git a/Source/CommandDialog/CommandStepper.tsx b/Source/CommandDialog/CommandStepper.tsx
index bdf65656..9c3ddaa3 100644
--- a/Source/CommandDialog/CommandStepper.tsx
+++ b/Source/CommandDialog/CommandStepper.tsx
@@ -40,10 +40,9 @@ export type StepperHeaderPosition = 'top' | 'bottom';
 /**
  * Stepper-specific customization surface exposed by {@link CommandStepper} and
  * {@link StepperCommandDialog}. This is a Cratis-owned type — it no longer
- * leaks PrimeReact's `StepperProps` — so PrimeReact 11's compositional Stepper
- * can be rebuilt underneath without changing the public API. PrimeReact 11's
- * Stepper has no built-in `orientation` / `start` / `end` / `headerPosition`,
- * so the wrapper re-implements them over the compositional parts.
+ * leaks renderer-specific stepper props — so the Cratis-owned Stepper
+ * can evolve underneath without changing the public API. Orientation, start/end
+ * content, and header position are implemented over stable Cratis parts.
  */
 export interface StepperParts {
     root?: HTMLAttributes<HTMLDivElement>;
@@ -186,6 +185,7 @@ const processChildren = (nodes: React.ReactNode): React.ReactNode => {
         const component = child.type as React.ComponentType<unknown>;
         if ((component as { displayName?: string }).displayName === 'CommandFormField') {
             type FieldElement = Parameters<typeof CommandFormFieldWrapper>[0]['field'];
+            // SAFETY: displayName identifies the Arc command field shape before it reaches the wrapper.
             return <CommandFormFieldWrapper field={child as unknown as FieldElement} />;
         }
 
@@ -628,7 +628,7 @@ const CommandStepperWrapper = <TCommand extends object, TResponse = object>({
  *
  * ## Mechanics
  *
- * - Wraps PrimeReact's `Stepper` inside an Arc `CommandForm` so each
+ * - Wraps the Cratis-owned Stepper inside an Arc `CommandForm` so each
  *   `<StepperPanel>` becomes a logical grouping of fields that all bind to
  *   the same single command.
  * - Provides a built-in Previous / Next / Submit footer. The Submit button
diff --git a/Source/CommandDialog/StepperCommandDialog.tsx b/Source/CommandDialog/StepperCommandDialog.tsx
index 235bbd5e..c93477a0 100644
--- a/Source/CommandDialog/StepperCommandDialog.tsx
+++ b/Source/CommandDialog/StepperCommandDialog.tsx
@@ -95,11 +95,11 @@ export interface StepperCommandDialogProps<TCommand extends object, TResponse =
      * Use the inherited `pt`/`ptOptions`/`unstyled` props to customize the Stepper.
      */
     dialogClassName?: string;
-    /** PrimeReact pass-through configuration applied to the outer Dialog. */
+    /** Cratis-owned per-part attributes applied to the outer Dialog. */
     dialogPt?: DialogProps['pt'];
-    /** PrimeReact pass-through options applied to the outer Dialog. */
+    /** Legacy part merge options applied to the outer Dialog. */
     dialogPtOptions?: DialogProps['ptOptions'];
-    /** When true, disables every base PrimeReact style on the outer Dialog. */
+    /** Legacy renderer flag retained for source compatibility; ignored on the outer Dialog. */
     dialogUnstyled?: boolean;
     /** StepperPanel children defining each wizard step. */
     children?: React.ReactNode;
@@ -336,7 +336,7 @@ const StepperCommandDialogWrapper = <TCommand extends object, TResponse = object
     // The header X and the Escape key are withdrawn on the same flag as the footer Cancel. A
     // dismissal that still worked mid-flight would close the dialog and then let onSuccess fire on
     // a dialog that is already gone. `dismissable` is the single switch on the Cratis Dialog that
-    // governs all three affordances in PrimeReact 11 — the header close button, the backdrop click
+    // governs all three affordances — the header close button, the backdrop click
     // and `closeOnEscape` — so withdrawing it withdraws every dismissal at once.
     return (
         <Dialog
@@ -382,7 +382,7 @@ const StepperCommandDialogWrapper = <TCommand extends object, TResponse = object
 
 /**
  * A multi-step wizard dialog backed by a single Cratis Arc command. Wraps
- * PrimeReact's `Stepper` inside a Cratis {@link Dialog}, tracks per-step
+ * the Cratis-owned Stepper inside a Cratis {@link Dialog}, tracks per-step
  * visit state, surfaces inline error indicators on steps with invalid
  * fields, and executes the bound command when the user submits the last
  * step. Use it when one command has enough fields that they should be
diff --git a/Source/CommandDialog/StepperPanel.tsx b/Source/CommandDialog/StepperPanel.tsx
index a2c18b81..091750bf 100644
--- a/Source/CommandDialog/StepperPanel.tsx
+++ b/Source/CommandDialog/StepperPanel.tsx
@@ -10,7 +10,7 @@ export interface StepperPanelProps {
     /**
      * Content shown in the step's header (the label next to the step number).
      * Accepts a string or any node, so a custom/template header works as it did
-     * with PrimeReact 10's `StepperPanel`.
+     * with earlier renderer-specific step panels.
      */
     header?: React.ReactNode;
     /** The command form fields that make up this step. */
@@ -21,13 +21,10 @@ export interface StepperPanelProps {
  * Declares a single step of a {@link CommandStepper} / {@link StepperCommandDialog}
  * wizard. Group the command form fields that belong to a step inside a
  * `<StepperPanel header="…">`; the enclosing stepper reads each panel's
- * `header` and `children` to build the underlying PrimeReact 11 Stepper
- * structure (a `Stepper.Step` in the header list plus a matching
- * `Stepper.Panel` in the content area).
+ * `header` and `children` to build the Cratis-owned step header and matching
+ * content panel.
  *
- * This is the Cratis-owned replacement for PrimeReact 10's
- * `primereact/stepperpanel`, which no longer exists in PrimeReact 11. It is a
- * pure marker: it is never rendered on its own — the parent stepper consumes
+ * It is a pure marker: it is never rendered on its own — the parent stepper consumes
  * its props — so it renders nothing when mounted directly.
  *
  * ```tsx
diff --git a/Source/CommandForm/fields/CalendarField.tsx b/Source/CommandForm/fields/CalendarField.tsx
index 67c4a2e1..0f676ed0 100644
--- a/Source/CommandForm/fields/CalendarField.tsx
+++ b/Source/CommandForm/fields/CalendarField.tsx
@@ -15,7 +15,7 @@ interface CalendarFieldComponentProps extends WrappedFieldProps<Date | null> {
     /** Placeholder text shown when no date is selected. */
     placeholder?: string;
 
-    /** PrimeReact-style date format mask (e.g. `'yy-mm-dd'`). */
+    /** legacy date format mask (e.g. `'yy-mm-dd'`). */
     dateFormat?: string;
 
     /** When true, renders a trailing calendar icon button. */
diff --git a/Source/CommandForm/fields/DropdownField.tsx b/Source/CommandForm/fields/DropdownField.tsx
index 977958de..b3527ebe 100644
--- a/Source/CommandForm/fields/DropdownField.tsx
+++ b/Source/CommandForm/fields/DropdownField.tsx
@@ -24,13 +24,13 @@ interface DropdownFieldComponentProps extends WrappedFieldProps<string | number>
     /** Extra CSS class name combined with the default `w-full`. */
     className?: string;
 
-    /** PrimeReact pass-through configuration applied to the underlying Dropdown. */
+    /** Cratis-owned per-part attributes applied to the underlying Dropdown. */
     pt?: DropdownProps['pt'];
 
-    /** PrimeReact pass-through options applied to the underlying Dropdown. */
+    /** Legacy part merge options applied to the underlying Dropdown. */
     ptOptions?: DropdownProps['ptOptions'];
 
-    /** When true, disables every base PrimeReact style on the underlying Dropdown. */
+    /** Legacy renderer flag retained for source compatibility; ignored on the underlying Dropdown. */
     unstyled?: boolean;
 }
 
diff --git a/Source/CommandForm/fields/MultiSelectField.tsx b/Source/CommandForm/fields/MultiSelectField.tsx
index 8d86763f..58432163 100644
--- a/Source/CommandForm/fields/MultiSelectField.tsx
+++ b/Source/CommandForm/fields/MultiSelectField.tsx
@@ -24,17 +24,15 @@ interface MultiSelectFieldComponentProps extends WrappedFieldProps<Array<string
     /**
      * How the selection is displayed in the field: comma-separated or as chips.
      *
-     * PrimeReact 11's `Select` (in `multiple` mode) renders the selection through
-     * its value slot rather than v10 MultiSelect's chip/comma modes, so this is
-     * currently accepted for API compatibility and does not change rendering.
+     * Legacy display mode retained for source compatibility; native multiple
+     * selection does not change presentation based on this value.
      */
     display?: 'comma' | 'chip';
 
     /**
      * Maximum number of selected labels to show before collapsing into a count.
      *
-     * Accepted for API compatibility; not applied under the PrimeReact 11
-     * `Select` value rendering.
+     * Accepted for API compatibility; not applied by native multiple selection.
      */
     maxSelectedLabels?: number;
 
@@ -47,13 +45,13 @@ interface MultiSelectFieldComponentProps extends WrappedFieldProps<Array<string
     /** Extra CSS class name combined with the default `w-full`. */
     className?: string;
 
-    /** PrimeReact pass-through configuration applied to the underlying Select. */
+    /** Cratis-owned per-part attributes applied to the underlying Select. */
     pt?: DropdownProps['pt'];
 
-    /** PrimeReact pass-through options applied to the underlying Select. */
+    /** Legacy part merge options applied to the underlying Select. */
     ptOptions?: DropdownProps['ptOptions'];
 
-    /** When true, disables every base PrimeReact style on the underlying Select. */
+    /** Legacy renderer flag retained for source compatibility; ignored on the underlying Select. */
     unstyled?: boolean;
 }
 
diff --git a/Source/Common/DatePickerInput.tsx b/Source/Common/DatePickerInput.tsx
index 4dbe0497..50907485 100644
--- a/Source/Common/DatePickerInput.tsx
+++ b/Source/Common/DatePickerInput.tsx
@@ -78,7 +78,7 @@ export interface DatePickerInputProps {
     id?: string;
     showButtonBar?: boolean;
     placeholder?: string;
-    /** Deprecated mask from the PrimeReact implementation; locale controls formatting now. */
+    /** Deprecated renderer mask; locale controls formatting now. */
     dateFormat?: string;
     showIcon?: boolean;
     showTime?: boolean;
diff --git a/Source/Common/FormElement.tsx b/Source/Common/FormElement.tsx
index 621cc7fa..e079c8f6 100644
--- a/Source/Common/FormElement.tsx
+++ b/Source/Common/FormElement.tsx
@@ -20,8 +20,7 @@ export interface FormElementProps {
 /**
  * Lightweight wrapper that places an icon addon to the left of a form input,
  * styled with the `--cratis-*` token layer (background, border, radius). Use
- * it to give input fields a leading icon without pulling in PrimeReact's
- * `InputGroup` chrome.
+ * it to give input fields a leading icon without pulling in a renderer-specific input-group abstraction.
  *
  * ```tsx
  * <FormElement icon={<i className="pi pi-user" />}>
diff --git a/Source/DataPage/DataPage.tsx b/Source/DataPage/DataPage.tsx
index 1d1a7769..acca3fc2 100644
--- a/Source/DataPage/DataPage.tsx
+++ b/Source/DataPage/DataPage.tsx
@@ -68,7 +68,7 @@ export interface MenuItemsProps {
  * Props for {@link Columns}.
  */
 export interface ColumnProps {
-    /** PrimeReact `<Column>` elements describing each visible column. */
+    /** Cratis-owned `<Column>` markers describing each visible column. */
     children: ReactNode;
 }
 
@@ -145,7 +145,7 @@ export const MenuItems = ({ children }: MenuItemsProps) => {
  * {@link DataTableForObservableQuery} (real-time observable) based on the
  * `query` type provided to the surrounding `<DataPage>`.
  *
- * Use as `<DataPage.Columns>` inside a `<DataPage>`, with PrimeReact `<Column>`
+ * Use as `<DataPage.Columns>` inside a `<DataPage>`, with Cratis-owned `<Column>`
  * children defining the table columns.
  */
 export const Columns = ({ children }: ColumnProps) => {
@@ -306,7 +306,7 @@ export interface DataPageProps<
     /** Retained for source compatibility; Cratis parts always merge. */
     tablePtOptions?: object;
 
-    /** When true, disables every base PrimeReact style on the inner DataTable. */
+    /** Legacy renderer flag retained for source compatibility; ignored on the inner DataTable. */
     tableUnstyled?: boolean;
 
     /**
@@ -320,7 +320,7 @@ export interface DataPageProps<
     /** Retained for source compatibility; Cratis parts always merge. */
     menubarPtOptions?: object;
 
-    /** When true, disables every base PrimeReact style on the action menubar's buttons. */
+    /** Legacy renderer flag retained for source compatibility; ignored on the action menubar's buttons. */
     menubarUnstyled?: boolean;
 
     /**
@@ -363,9 +363,9 @@ export interface DataPageProps<
  *   `disableOnUnselected` so they automatically grey out until the user
  *   picks a row — useful for Edit / Delete actions that need a target.
  *
- * - **`<DataPage.Columns>`** wraps PrimeReact `<Column>` elements that
+ * - **`<DataPage.Columns>`** wraps Cratis-owned `<Column>` markers that
  *   describe the visible columns. The columns themselves are
- *   PrimeReact's — anything supported by their `DataTable` `<Column>` is
+ *   Cratis-owned — the documented `ColumnProps` surface is
  *   supported here (sorting, filtering, custom body templates, …).
  *
  * - **`detailsComponent`** (optional) is a React component rendered in a
@@ -427,7 +427,7 @@ export interface DataPageProps<
  * The inner DataTable and action toolbar each have their own per-slot props:
  * `tablePt` / `tableUnstyled` / `tableClassName` for the table;
  * `menubarPt` / `menubarPtOptions` / `menubarUnstyled` / `menubarClassName` for
- * the action toolbar's buttons (in PrimeReact 11 the v10 Menubar is replaced by
+ * the action toolbar's stable button parts (the action bar is implemented as
  * a button toolbar, so `menubarPt` targets the stable Cratis button parts). See the
  * [pass-through cheat sheet](../../Documentation/Styling/pass-through.md) for
  * the full slot reference.
diff --git a/Source/DataTables/Column.tsx b/Source/DataTables/Column.tsx
index f88b47c7..4dcfc8a8 100644
--- a/Source/DataTables/Column.tsx
+++ b/Source/DataTables/Column.tsx
@@ -58,9 +58,8 @@ export interface ColumnProps<TData = unknown> {
 /**
  * Declares one column of a Cratis data table (`DataTableForQuery`,
  * `DataTableForObservableQuery`, `DataPage.Columns`). This is the Cratis-owned
- * replacement for the removed `primereact/column` — the same `<Column field
- * header body sortable />` authoring model, mapped internally onto PrimeReact
- * 11's headless DataTable header/body cells.
+ * renderer-independent `<Column field header body sortable />` authoring model,
+ * mapped internally onto semantic table header/body cells.
  *
  * It is a pure marker: the surrounding table reads its props to build the
  * header and per-row cells, so it renders nothing when mounted on its own.
diff --git a/Source/DataTables/DataTableForObservableQuery.tsx b/Source/DataTables/DataTableForObservableQuery.tsx
index 4bb59746..77b7b878 100644
--- a/Source/DataTables/DataTableForObservableQuery.tsx
+++ b/Source/DataTables/DataTableForObservableQuery.tsx
@@ -88,7 +88,7 @@ export interface DataTableForObservableQueryProps<
     /** Retained for source compatibility; Cratis parts always merge. */
     ptOptions?: object;
 
-    /** When true, disables every base PrimeReact style on the underlying DataTable. */
+    /** Legacy renderer flag retained for source compatibility; ignored on the underlying DataTable. */
     unstyled?: boolean;
 
     /** Extra CSS class name forwarded to the paginator. */
diff --git a/Source/DataTables/DataTableForQuery.tsx b/Source/DataTables/DataTableForQuery.tsx
index 488d95cc..b743de3b 100644
--- a/Source/DataTables/DataTableForQuery.tsx
+++ b/Source/DataTables/DataTableForQuery.tsx
@@ -86,7 +86,7 @@ export interface DataTableForQueryProps<
     /** Retained for source compatibility; Cratis parts always merge. */
     ptOptions?: object;
 
-    /** When true, disables every base PrimeReact style on the underlying DataTable. */
+    /** Legacy renderer flag retained for source compatibility; ignored on the underlying DataTable. */
     unstyled?: boolean;
 
     /** Extra CSS class name forwarded to the paginator. */
diff --git a/Source/DataTables/DataTableSelectionChangeEvent.ts b/Source/DataTables/DataTableSelectionChangeEvent.ts
index 163e9d9e..26afdbc4 100644
--- a/Source/DataTables/DataTableSelectionChangeEvent.ts
+++ b/Source/DataTables/DataTableSelectionChangeEvent.ts
@@ -5,8 +5,7 @@ import type { SyntheticEvent } from 'react';
 
 /**
  * Fired when the selected row of a Cratis data table changes. Replaces
- * PrimeReact 10's `DataTableSelectionSingleChangeEvent` (removed in
- * PrimeReact 11, which models selection by key rather than by row object).
+ * the legacy renderer's single-selection event.
  * The `value` field is preserved so existing `event.value` call sites keep
  * working.
  *
diff --git a/Source/DataTables/TablePaginator.tsx b/Source/DataTables/TablePaginator.tsx
index 4d8b5b88..f11a4a01 100644
--- a/Source/DataTables/TablePaginator.tsx
+++ b/Source/DataTables/TablePaginator.tsx
@@ -30,8 +30,7 @@ export interface TablePaginatorProps {
 }
 
 /**
- * A minimal first/previous/next/last paginator. PrimeReact 11's `Paginator`
- * is a headless compositional slot rather than a ready-made control, and the
+ * A minimal first/previous/next/last paginator. The
  * Cratis data tables drive paging through Arc's paging hook rather than the
  * table's internal pagination — so this renders the page controls wired to a
  * simple `onPageChange(pageIndex)` callback.
diff --git a/Source/MIGRATION.md b/Source/MIGRATION.md
index f796921a..485cff5f 100644
--- a/Source/MIGRATION.md
+++ b/Source/MIGRATION.md
@@ -1,466 +1,241 @@
-# Migrating `@cratis/components` 2.x → 3.0 (PrimeReact 10 → 11)
+# Migrate from Components 3 to 4
 
-`@cratis/components` 3.0 moves the library from PrimeReact 10 to **PrimeReact 11**.
-Most wrapper APIs survive unchanged, so many apps upgrade with the find-and-replace
-in §3 plus the install and import changes in §1 and §2. This guide lists every
-change a consuming app can feel.
+Components 4 replaces the mandatory PrimeReact 11 foundation with Cratis-owned markup, styling contracts, and public types. React Aria supplies accessible interaction behavior internally. Applications no longer install, configure, license, theme, or type against PrimeReact to use Components.
 
-> **The three things you must do**, even if you change no component code:
->
-> 1. **Install the PrimeReact peers yourself** — they are no longer our dependency (§1).
-> 2. **Import `@cratis/components/styles`** — component CSS no longer rides along with
->    the JavaScript (§2).
-> 3. **Choose a theming path** — there is no `resources/themes/*.css` to import any
->    more (§6).
-
----
-
-## 1. PrimeReact is now a peer dependency
-
-**This is the change most likely to break your install.** In 2.x, `primereact` was a
-regular `dependency` of `@cratis/components`, so your app got a copy whether it asked
-for one or not. That is exactly the problem: if your app also depended on `primereact`,
-npm could resolve **two copies**, and two copies of PrimeReact means two
-`PrimeReactProvider` React contexts. Components rendered from the library would read a
-different config, theme and z-index registry than components you render yourself — and
-the symptom is not an error, it is overlays stacking wrongly and `pt`/`unstyled`
-silently not applying. Apps were papering over this with a `resolutions` / `overrides`
-pin.
-
-3.0 makes the requirement explicit instead. **You supply PrimeReact; we use yours.**
-
-Add these to your app's `dependencies`:
-
-```jsonc
-{
-    "dependencies": {
-        "primereact": "^11.0.0",
-        "@primereact/core": "^11.0.0",
-        "@primereact/headless": "^11.0.0",
-        "@primereact/hooks": "^11.0.0",
-        "primeicons": "^8.0.0",
-    },
-}
-```
+This is intentionally a major release. Component behavior remains familiar, but rendered markup, styling parts, provider configuration, date entry, and some deprecated props change.
 
-Notes:
-
-- `primereact` pins `@primereact/core`, `@primereact/headless` and `@primereact/hooks` to its own **exact**
-  version, so installing `primereact@11.1.0` gives you 11.1.0 of all three. Declaring
-  them anyway is what makes a strict installer (pnpm, Yarn PnP) resolve them for the
-  library too.
-- `@primeicons` went **7 → 8** alongside PrimeReact 11.
-- `@primereact/types` is an **optional** peer. You only need it declared if your own
-  code imports our prop types (they re-export `@primereact/types/*` shapes). It arrives
-  transitively via `@primereact/core` in a hoisting installer.
-- `@primereact/styles` and `@primeuix/themes` are **optional** peers. Install them only for
-  PrimeReact's styled mode (§6). The baseline theme and unstyled mode need neither.
-- If your app carried a `resolutions` / `overrides` entry to collapse PrimeReact into one
-  copy, **you can delete it** — the peer declaration is what enforces that now.
-
-### Arc peer range is unchanged
-
-`@cratis/arc` and `@cratis/arc.react` now support `>=20.3.1 <23`. Arc 20, Arc 21 and
-Arc 22 are supported.
-
-> ⚠️ **Keep `@cratis/arc`, `@cratis/arc.react` and `@cratis/arc.vite` on the same
-> version.** `@cratis/arc.react` depends on `@cratis/arc` with an **exact** pin, so if
-> your own `@cratis/arc` drifts by even a patch your installer nests a second copy.
-> `ObservableQuerySubscription` has a `private` field, which makes it nominally typed, so
-> two copies produce a type error like _"types have separate declarations of a private
-> property `_connection`"_ in any code touching an observable query. This is an Arc
-> packaging issue, not a Components one; `DataTableForObservableQuery` is hardened
-> against it internally so the library itself still compiles either way
-> ([#135](https://github.com/Cratis/Components/issues/135)).
-
-## 2. Stylesheets — you now import them explicitly
-
-In 2.x, every component did `import './Foo.css'` and relied on your bundler injecting
-it. That put CSS files in the **JavaScript module graph**, which meant the published
-package could not be loaded by Node at all: 29 of the export subpath checks failed with
-`ERR_UNKNOWN_FILE_EXTENSION` / `ERR_UNSUPPORTED_DIR_IMPORT`, and no consumer whose test
-environment is `node` could render a `Dialog` or `CommandDialog` in a spec
-([#118](https://github.com/Cratis/Components/issues/118)).
-
-3.0 takes CSS out of the JavaScript graph entirely. Every export subpath now loads
-cleanly in Node. The cost is one explicit import in your app:
-
-```diff
-  // in your app entry point
-+ import '@cratis/components/tokens';   // the --cratis-* token layer
-+ import '@cratis/components/styles';   // all component CSS, in one file
-+ import '@cratis/components/theme';    // optional — the Cratis baseline look, MIT CSS (§6)
-```
+:::note
+Components 3 remains the compatibility line for an application that cannot migrate yet. A separate PrimeReact compatibility package will not be published unless PrimeTek confirms the applicable OEM and redistribution terms in writing.
+:::
+
+## Update dependencies
+
+Remove the Prime packages that were installed only for Components:
 
-Import them in that order. `styles` and `theme` both consume the tokens.
-
-- `@cratis/components/styles` is new content, same specifier: in 2.x it resolved to only
-  the compiled Tailwind utilities. It now contains those **plus every component
-  stylesheet**.
-- It also **vendors `allotment/dist/style.css`**, which `DataPage` needs for its split
-  view to lay out (without it a details pane grows to its content and clips the
-  paginator). If you were importing `allotment/dist/style.css` yourself, you can drop it.
-- `SchemaEditor.module.css` is gone as a CSS Module. Its two classes are now plain,
-  prefixed names (`cratis-schema-editor-navigable-row`, `cratis-schema-editor-bottom-border`)
-  shipped in `styles`. This is internal, but noted in case you targeted the hashed names.
-
-## 3. ESM-only packaging
-
-PrimeReact 11 is ESM-only, so `@cratis/components` dropped its CommonJS build. `main`,
-`module` and every `exports` entry point at `dist/esm`, and the package declares
-`"type": "module"`.
-
-- If your app bundles with Vite / modern tooling (the Cratis default), **no change**.
-- If something in your pipeline `require()`d the package, switch it to `import`.
-
-## 4. Import moves (removed `primereact/*` paths)
-
-PrimeReact 11 ships **80** modules where v10 shipped 117. Replace the removed ones with
-the Cratis-owned equivalents — the authoring model is unchanged:
-
-| Was (PrimeReact 10)                                                                                                       | Now (3.0)                                                                                                                         |
-| ------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
-| `import { Column } from 'primereact/column'`                                                                              | `import { Column } from '@cratis/components/DataTables'` (also re-exported from `@cratis/components/DataPage`)                    |
-| `import { StepperPanel } from 'primereact/stepperpanel'`                                                                  | `import { StepperPanel } from '@cratis/components/CommandDialog'`                                                                 |
-| `import { Menubar } from 'primereact/menubar'`                                                                            | `<DataPage.MenuItems>` for list-page actions; `ActionMenubar` from `@cratis/components/Common` otherwise                          |
-| `import { Dropdown } from 'primereact/dropdown'`                                                                          | `import { Dropdown } from '@cratis/components/Dropdown'`                                                                          |
-| `primereact/calendar`, `primereact/inputtextarea`, `primereact/multiselect`, `primereact/chips`, `primereact/colorpicker` | consume through the `CommandForm` fields (`CalendarField`, `TextAreaField`, `MultiSelectField`, `ChipsField`, `ColorPickerField`) |
-| `import { PrimeReactProvider } from 'primereact/api'`                                                                     | `import { PrimeReactProvider } from '@primereact/core'` — or just use `CratisComponentsProvider`                                  |
-
-`<Column field="name" header="Name" sortable filter />` and `<StepperPanel header="…">`
-work exactly as before.
-
-### If you import `primereact/*` directly anywhere
-
-These are the v11 renames. **v11 is compositional**, so a rename is often not a one-line
-edit: `primereact/select` exports `Select.Root` / `Select.Trigger` / `Select.Value` /
-`Select.Portal` / `Select.Popup` / `Select.List` / `Select.Option`, and you assemble them.
-Prefer a Cratis wrapper where one exists.
-
-| v10 module             | v11 module          |
-| ---------------------- | ------------------- |
-| `dropdown`             | `select`            |
-| `calendar`             | `datepicker`        |
-| `overlaypanel`         | `popover`           |
-| `inputswitch`          | `toggleswitch`      |
-| `tabview` + `tabpanel` | `tabs`              |
-| `inputtextarea`        | `textarea`          |
-| `password`             | `inputpassword`     |
-| `chips`                | `inputtags`         |
-| `colorpicker`          | `inputcolor`        |
-| `galleria`             | `gallery`           |
-| `scrollpanel`          | `scrollarea`        |
-| `selectbutton`         | `togglebuttongroup` |
-
-> ⚠️ **The `Sidebar` trap.** v10's `Sidebar` (an overlay drawer) is now
-> **`primereact/drawer`**. `primereact/sidebar` still exists in v11 but is a **different,
-> new app-shell primitive**. A name-preserving migration compiles cleanly and silently
-> swaps your overlay for an app shell. Check every `Sidebar` usage by hand.
-
-### Removed with no drop-in replacement
-
-These v10 modules are gone from v11 entirely — no rename, no equivalent:
-
-`menubar`, `megamenu`, `tieredmenu`, `steps`, `multiselect`, `treeselect`, `treetable`,
-`cascadeselect`, `splitbutton`, `image`, `virtualscroller`, `confirmdialog`, `column`,
-`columngroup`, `row`, `inputicon`, `messages`, and the infrastructure modules `api`,
-`menuitem`, `treenode`, `utils`, `hooks`, `passthrough`, `componentbase`.
-
-`inputmask`, `keyfilter` and `scrolltop` exist in **neither** `primereact/*` nor
-`@primereact/headless/*`. `orderlist` and `picklist` survive only as **headless hooks**
-(`@primereact/headless/orderlist`, `.../picklist`) — you build the presentation.
-
-Where the library needed one of these, it now owns a replacement:
-`Source/Common/ActionMenubar.tsx` (for `menubar`), `Source/DataTables/Column.tsx` +
-`ColumnFilterMenu.tsx` (for `column`), `Source/CommandDialog/StepperPanel.tsx` (for
-`stepperpanel`), and `MultiSelectField` re-expressed over our own `Dropdown` wrapper
-(v11's `Select` has no `multiple` prop of the v10 shape).
-
-## 5. Data-table selection event
-
-The removed `DataTableSelectionSingleChangeEvent` is replaced by
-`DataTableSelectionChangeEvent<T>`. `event.value` (the selected row) is unchanged, so
-only the type import moves:
-
-```diff
-- import { DataTableSelectionSingleChangeEvent } from 'primereact/datatable';
-- onSelectionChange={(e: DataTableSelectionSingleChangeEvent<Product[]>) => setSelected(e.value as Product)}
-+ import type { DataTableSelectionChangeEvent } from '@cratis/components/DataTables';
-+ onSelectionChange={(e: DataTableSelectionChangeEvent<Product>) => setSelected(e.value ?? undefined)}
+```bash
+npm uninstall \
+  primereact primeicons \
+  @primereact/core @primereact/headless @primereact/hooks \
+  @primereact/styles @primereact/types \
+  @primeuix/themes
+npm install @cratis/components
 ```
 
-Per-column filter menus (`<Column filter dataType="…" />`), a global search box, and a
-paginator range report are all restored — no API change to opt in beyond `filter`.
-
-## 6. Theming — there is no theme stylesheet any more
-
-**PrimeReact 11 ships zero CSS.** `primereact/resources/themes/*.css` does not exist, and
-the `primereact` package is **unstyled primitives**: they render structural markup with
-`data-scope` / `data-part` attributes and **no `p-*` class names**. A theme is now two
-things handed to the provider at runtime: a **preset** — a plain JavaScript token object
-(`@primeuix/themes` — Aura, Lara, Nora) that `@primeuix/styled` turns into `--p-*` custom
-properties — and PrimeReact's **component styles** (`@primereact/styles`), which put the
-`p-*` class names on the primitives and carry the CSS the tokens drive. PrimeReact's own
-styled components (`@primereact/ui`) are just the primitives with those styles preset;
-`@cratis/components` builds on the primitives, so **a preset alone (`theme: { preset }`)
-emits tokens but paints nothing**.
-
-The chain is: **preset (JS) → `--p-*` (runtime) → `--cratis-*` (our token layer) →
-component CSS**, and in styled mode also **`primeReactStyles` → `p-*` class names +
-PrimeReact's component CSS**. Our `--cratis-*` tokens resolve the v11 token first and fall
-back to the v10 variable, so an app that still has a compiled v10 theme on the page during
-its port keeps working, and nothing breaks the day it is removed.
-
-Pick one of three paths:
-
-**A. The Cratis baseline theme.** Cratis-authored MIT CSS that assigns the
-`--cratis-*` tokens directly, light and dark, for a polished default with no preset and
-no extra dependency. It defers to a preset's `--p-*` values when one is present.
-
-```diff
-- import 'primereact/resources/themes/lara-dark-blue/theme.css';
-+ import '@cratis/components/theme';
+Keep a Prime package only when your application still imports it directly. Migrate those imports separately; Components no longer supplies or requires them.
+
+The supported Arc peer range remains `>=20.3.1 <23`.
+
+## Keep the stylesheet entry points
+
+The three Cratis-owned stylesheet entries remain:
+
+```ts
+import '@cratis/components/tokens';
+import '@cratis/components/styles';
+import '@cratis/components/theme'; // optional baseline appearance
 ```
 
-**B. PrimeReact's styled mode.** `styledMode()` from `@cratis/components/styled` returns
-`{ theme, defaults }`: a `@primeuix/themes` preset (default `CratisPreset` — Lara with the
-blue primary and gray surfaces of `lara-light-blue` / `lara-dark-blue`, the dark surface
-scale one step lighter so content sits above the page as it did there, both color schemes) plus
-`primeReactStyles`, PrimeReact's own component styles keyed by primitive name, which the
-provider applies to every primitive rendered under it — this library's and your own. That
-is what makes the `p-*` class names appear and the preset paint them. Options: `preset`
-(any preset or a `definePreset` result — `definePreset(CratisPreset, {...})` to extend),
-`darkModeSelector` (default `.cratis-dark`, the class the baseline theme uses too),
-`cssLayer` (default the `primereact` layer, ordered between Tailwind's `base` and
-`components`, so a plain `.p-button { … }` in your CSS overrides the theme just as it did
-against v10's `@layer primereact` stylesheets and a utility class still wins; `false`
-emits unlayered).
-
-```diff
-- import 'primereact/resources/themes/lara-dark-blue/theme.css';
-+ import { styledMode } from '@cratis/components/styled';
-  // …
-- <CratisComponentsProvider>
-+ <CratisComponentsProvider value={{ license: '…', ...styledMode() }}>
+- `tokens` defines the stable semantic `--cratis-*` variables.
+- `styles` contains structural rules for every component.
+- `theme` supplies the optional baseline light/dark values.
+
+A custom product design can omit `theme`, define the `--cratis-*` variables itself, and style stable component parts through classes or `pt`.
+
+## Simplify the provider
+
+The provider now owns locale and Components-specific labels. It no longer accepts a PrimeUI key, renderer preset, global Prime pass-through map, ripple setting, or renderer defaults.
+
+```tsx
+import { CratisComponentsProvider } from '@cratis/components';
+
+export const ApplicationRoot = ({ children }: { children: React.ReactNode }) => (
+    <CratisComponentsProvider
+        value={{
+            locale: 'nb-NO',
+            messages: {
+                paginator: {
+                    navigation: 'Sidenavigasjon',
+                    first: 'Første side',
+                    previous: 'Forrige side',
+                    next: 'Neste side',
+                    last: 'Siste side',
+                },
+                datePicker: {
+                    today: 'I dag',
+                    clear: 'Tøm',
+                    openCalendar: 'Åpne kalender',
+                    previousMonth: 'Forrige måned',
+                    nextMonth: 'Neste måned',
+                },
+            },
+        }}
+        toaster
+    >
+        {children}
+    </CratisComponentsProvider>
+);
 ```
 
-`npm i @primereact/styles @primeuix/themes` for this path only (both PrimeUI-licensed —
-see below).
+`locales` remains temporarily accepted and maps the old paginator/date labels, but new code should use `messages`. Unknown renderer keys are ignored and should be removed.
 
-**C. Fully unstyled.** Ship structure plus the `--cratis-*` token layer and bring your
-own visuals via `pt` / CSS / Tailwind. Your existing `--cratis-*` overrides keep working.
+## Replace renderer presets with tokens
+
+Remove `styledMode()`, `CratisPreset`, and `primeReactStyles` before upgrading. The `@cratis/components/styled` renderer-specific entry point is removed in Components 4.
+
+Before:
 
 ```tsx
-<CratisComponentsProvider value={{ unstyled: true, pt: myPreset }}>
+<CratisComponentsProvider value={{ license, ...styledMode({ preset: ProductPreset }) }}>
+    <App />
+</CratisComponentsProvider>
 ```
 
-### If your CSS was written against a v10 theme's variables
-
-A v10 theme stylesheet published `--surface-ground`, `--surface-card`, `--surface-border`,
-`--surface-hover`, `--text-color`, `--text-color-secondary`, `--primary-color`,
-`--highlight-bg`, `--focus-ring`, `--maskbg`, `--border-radius`, the `--surface-0…900` and
-`--primary-50…900` scales, the `--gray` / `--blue` / `--green` / `--yellow` / `--cyan` /
-`--pink` / `--indigo` / `--teal` / `--orange` / `--bluegray` / `--purple` / `--red-50…900`
-scales, the `--surface-a…f` aliases, `--content-padding` and `--inline-spacing` on `:root`.
-On PrimeReact 11 they resolve to nothing the day it is installed — borders vanish, cards
-lose their background. **`@cratis/components/primereact-v10-palette`** restores every one
-of them with the `lara-light-blue` / `lara-dark-blue` values, so those call sites keep
-working:
-
-```diff
-- import 'primereact/resources/themes/lara-dark-blue/theme.css';
-  import '@cratis/components/tokens';
-  import '@cratis/components/styles';
-+ import '@cratis/components/primereact-v10-palette';
-  // …
-+ <CratisComponentsProvider value={{ license: '…', ...styledMode() }}>
+After:
+
+```tsx
+<CratisComponentsProvider value={{ locale: 'en-US' }}>
+    <App />
+</CratisComponentsProvider>
 ```
 
-- The **semantic** names (`--surface-card`, `--text-color`, `--primary-color`, …) resolve
-  from the active preset's `--p-*` tokens where v11 has an equivalent, with the Lara values
-  as the fallback — so they follow whatever preset styled mode applies.
-- The **numbered scales** are the lara-blue values verbatim. The v10 dark surface scale was
-  inverted, so `--p-surface-*` cannot stand in for it.
-- Light and dark switch through `light-dark()`, keyed off `.cratis-dark` (the file sets
-  `color-scheme: dark` on it) — the same class the baseline theme and `styledMode()` use.
-
-Import order: `tokens`, `styles`, then the palette (and/or `theme`). It exists so what is
-already written keeps working — write nothing new against those names; use `--cratis-*`
-(or `--p-*`) instead.
-
-`CratisComponentsProvider` takes everything through its single `value` prop, which is
-deep-merged onto PrimeReact's provider config — `unstyled`, `pt`, `ptOptions`, `ripple`,
-`inputVariant`, `zIndex`, `locale`, `theme`, `defaults` and `license`. It also accepts a
-`toaster` prop (`true` or a `ToasterProps` object) to mount a `<Toaster />` for you.
-
-## 7. Dialog
-
-`Dialog` / `CommandDialog` / `StepperCommandDialog` keep their public APIs, including
-`initialFocus` (`DialogInitialFocus.Confirm | Cancel | Content`), which is re-expressed on
-v11's focus trap and behaves identically.
-
-- **Added:** `dismissable` — whether the header close, backdrop click and `Escape` are
-  offered. Defaults to "yes for a predefined `DialogButtons` set, no for a custom footer",
-  matching v10's behavior; set it explicitly to keep a dismiss affordance with a custom
-  footer.
-- **Added:** `closeAriaLabel` for localizing the header close button.
-- **No effect:** `resizable` is still accepted so call sites compile, but v11's headless
-  dialog has no resize handle.
-
-`StepperCommandDialog` keeps `showCancel` / `cancelLabel` (the opt-in footer Cancel), and
-still withdraws every dismissal — footer Cancel, header close and `Escape` — for the whole
-window a command is executing in.
-
-## 8. Overlay z-index workarounds are gone (and no longer needed)
-
-2.x exported a `useOverlayZIndex` hook and passed `appendTo={document.body}` on every
-overlay-bearing field, because a v10 dropdown/calendar panel opened inside a modal dialog
-rendered _inside_ the dialog's subtree and could land under its own mask.
-
-**`useOverlayZIndex` is removed.** PrimeReact 11 does both natively: `Select.Portal`
-defaults to `appendTo: 'body'`, and the shared z-index registry gives a later-opened
-overlay a value above whatever is already registered. Measured on v11.1.0: with a dialog
-at z-index 1102, the select panel opens at **2103**, portaled to `document.body`. There is
-a spec (`Source/Dropdown/for_Dropdown/when_opened_inside_a_dialog.ts`) pinning this, so a
-future regression is caught rather than rediscovered.
-
-If you called `useOverlayZIndex` in your own app for your own overlays, you will need to
-inline it — but check first whether v11 has already made it unnecessary for you too.
-
-## 9. Reduced capabilities (forced by PrimeReact 11)
-
-A few v10 features have no v11 equivalent. The props are **kept so your code still
-compiles**, but they no longer do anything — remove them or adopt the alternative:
-
-| Prop                                                                               | What changed                                                                                                                                                                                                                                            |
-| ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `Dialog` `resizable`                                                               | v11's headless dialog has no resize handle — no effect.                                                                                                                                                                                                 |
-| `ChipsField` `separator`                                                           | v11 `InputTags` commits one tag per Enter; pasted input is no longer auto-split.                                                                                                                                                                        |
-| `MultiSelectField` `display` / `maxSelectedLabels`                                 | v11 `Select` renders the selection through its value slot; the v10 comma/chip modes and label-collapse are gone.                                                                                                                                        |
-| `DataTableForQuery` / `DataTableForObservableQuery` / `DataPage` `clientFiltering` | Retained as a deprecated no-op for source compatibility. Filtering always affects only the loaded page and pagination retains server totals. For complete-result filtering, pass filters as query arguments and apply them on the server before paging. |
-
-Some wrappers also **narrowed their surface** (they no longer leak PrimeReact's full API):
-
-- **`Column`** keeps the `field` / `header` / `body` / `sortable` / `filter` authoring
-  model; v10 extras like `editor`, `frozen`, `footer`, `colSpan` and `expander` are not
-  carried over.
-- **`Dropdown`** exposes a curated single/multi select surface (`value`, `options`,
-  `optionLabel` / `optionValue`, `placeholder`, `filter`, `multiple`, `showClear`, `style`,
-  `id`, `name`, `aria-*`, …) plus `pt` / `ptOptions` / `unstyled` — it no longer accepts
-  arbitrary PrimeReact Select props. `optionLabel` / `optionValue` default to `label` /
-  `value` when the option objects carry those fields — the v10 `Dropdown` convention — so
-  `[{ label, value }]` options with a scalar `value` keep matching (v11's `Select` compares
-  the option object itself otherwise).
-- The **`DataPage` action toolbar** replaces the v10 Menubar: `menubarPt` /
-  `menubarPtOptions` / `menubarUnstyled` now target the toolbar's **buttons**, and the
-  paginator is styled via `paginatorClassName` (+ `paginatorAriaLabels`), not `pt`.
-- **`StepperCustomizationProps`** is now Cratis-owned (it no longer aliases PrimeReact's
-  `StepperProps`). Same shape, minus the removed slots.
-
-### If you write `pt` definitions or CSS selectors against PrimeReact internals
-
-v11 is unstyled-first: outside styled mode (§6), PrimeReact elements carry **no `p-*`
-class at all**. Parts are identified by data attributes instead —
-`[data-scope="dialog"][data-part="close"]`, `[data-scope="select"][data-part="trigger"]`,
-and so on. Selectors written against v10 class names will silently match nothing there. In
-styled mode the `p-*` class names are back — `styledMode()` applies PrimeReact's component
-styles to every primitive — and the theme sits in the `primereact` cascade layer, so a
-plain `.p-button { … }` in your own CSS overrides it as it did on v10. (`pt` slot keys are
-unaffected either way.)
-
-## 10. What's new (nothing to migrate — just available)
-
-- **`@cratis/components/Notifications`** — `Toaster`, the imperative `toast`, and
-  `toastCommandResult(result)` to surface an Arc command result as the right toast
-  (validation → per-field messages, exceptions → generic, never stack traces).
-- **`@cratis/components/Display`** — `Tag`, `Badge`, `Chip`, `Skeleton`, `Avatar`,
-  `ProgressBar`.
-- **CommandForm fields** — `PasswordField`, `ToggleSwitchField`, `RatingField`.
-- **`AutoCommandForm`** — generates a `CommandForm`'s fields from the command's own
-  `propertyDescriptors`, with a `registerFieldTypeProvider` registry for custom types.
-- **`@cratis/components/theme`** — the Cratis baseline theme, MIT CSS (§6). It now
-  positions the dialog backdrop and positioner itself; previously a baseline-theme dialog
-  could render below the page content.
-- **`@cratis/components/styled`** — `styledMode()`, `CratisPreset`, `primeReactStyles`,
-  `primeReactCssLayer` and `cratisDarkModeSelector`: PrimeReact's styled mode, wired for
-  the provider (§6).
-- **`@cratis/components/primereact-v10-palette`** — the PrimeReact 10 theme variables
-  (`--surface-*`, `--text-color`, `--primary-color`, the color scales, …) restored with the
-  lara-blue values, for CSS already written against them (§6).
-- **`Dropdown`** reads `label` / `value` off option objects when `optionLabel` /
-  `optionValue` are omitted — the v10 `Dropdown` convention (§9).
-
----
-
-## Licensing (read this)
-
-**PrimeReact 11 is no longer MIT.** This is the single most consequential change in the
-upgrade, and it is not a theming detail — it applies to the whole library.
-
-| Package                                                                               | v10       | v11                      |
-| ------------------------------------------------------------------------------------- | --------- | ------------------------ |
-| `primereact`                                                                          | MIT       | PrimeUI commercial       |
-| `primeicons`                                                                          | MIT (7.x) | PrimeUI commercial (8.x) |
-| `@primereact/core`, `@primereact/headless`, `@primereact/hooks`, `@primereact/styles` | —         | PrimeUI commercial       |
-| `@primeuix/themes`, `@primeuix/styled`                                                | —         | PrimeUI commercial       |
-
-From PrimeReact 11's own `LICENSE.md`: _"A valid license key is required to use this
-software. A missing, invalid, or expired key may cause the software to display a license
-notice."_
-
-### A key is required regardless of how you style
-
-An earlier version of this guide said unstyled rendering and the Cratis baseline theme
-needed no key. **That was wrong.** The check runs in `PrimeReactProvider` on mount, with
-an empty dependency array and no condition on `unstyled`, on `theme`, or on `NODE_ENV`:
-
-```js
-useEffect(() => {
-    license && registerLicense({ primeui: license });
-    verifyLicense('primeui', { releaseDate }).then((result) => {
-        result.valid ||
-            (console.warn(`[PrimeUI] ${result.message}`), showInvalidLicenseBanner());
-    });
-}, []);
+Map product tokens directly in CSS:
+
+```css
+:root {
+    --cratis-primary-color: var(--product-accent-700);
+    --cratis-primary-color-text: var(--product-text-inverse);
+    --cratis-surface-card: var(--product-surface);
+    --cratis-surface-overlay: var(--product-surface);
+    --cratis-surface-border: var(--product-border);
+    --cratis-text-color: var(--product-text-primary);
+    --cratis-text-color-secondary: var(--product-text-secondary);
+    --cratis-focus-ring: var(--product-focus-ring);
+}
 ```
 
-So every styling path below reaches the same verification. Without a valid key you get a
-console warning and a fixed _"Invalid PrimeUI License"_ banner, in development **and**
-production. Supply your key through the provider:
+This removes the old product-token → Prime preset → Prime variable → Cratis variable translation chain.
+
+## Migrate pass-through configuration
+
+The `pt` prop remains the per-part customization surface, but its values are now ordinary HTML attributes and its keys are stable Cratis names. `ptOptions` and `unstyled` remain accepted temporarily but have no effect: part attributes always merge, and Components always uses consumer-owned CSS.
 
 ```tsx
-<CratisComponentsProvider value={{ license: '…' }}>
+<Dialog
+    title='Confirm deletion'
+    pt={{
+        backdrop: { className: 'product-dialog-backdrop' },
+        root: { className: 'product-dialog' },
+        header: { className: 'product-dialog-header' },
+        title: { className: 'product-dialog-title' },
+        close: { className: 'product-dialog-close' },
+        content: { className: 'product-dialog-content' },
+        footer: { className: 'product-dialog-footer' },
+    }}
+>
+    This cannot be undone.
+</Dialog>
 ```
 
-What the styling choice _does_ change is whether you additionally pull in
-`@primereact/styles` and `@primeuix/themes` — both PrimeUI-licensed too, and needed only
-for styled mode. `@cratis/components/theme` is Cratis-authored MIT CSS that embeds no
-PrimeTek values — so that **stylesheet** carries no PrimeTek terms, but rendering it still
-means running PrimeReact 11, which needs a key.
+Every meaningful element also carries `data-cratis-part`. Interactive states use attributes such as `data-selected`, `data-invalid`, `data-disabled`, `data-active`, and `data-position`. Do not target React Aria class names or internal DOM structure.
+
+### Common part mappings
+
+| Components 3 renderer slot     | Components 4 Cratis part                       |
+| ------------------------------ | ---------------------------------------------- |
+| Dialog `mask` / `backdrop`     | `backdrop`                                     |
+| Dialog `positioner`            | `positioner`                                   |
+| Dialog `root`                  | `root`                                         |
+| Dialog `headerTitle` / `title` | `title`                                        |
+| Dialog `closeButton` / `close` | `close`                                        |
+| DataTable `tableContainer`     | `tableContainer`                               |
+| DataTable `thead`              | `head`                                         |
+| DataTable `tbody`              | `body`                                         |
+| DataTable `bodyRow` / `row`    | `row`                                          |
+| Dropdown `trigger`             | `trigger`                                      |
+| Dropdown `option`              | `option`                                       |
+| DatePicker `input`             | segmented `input`; identity belongs on `group` |
+
+See [Stable component parts](Styling/pass-through.md) for the complete contract.
+
+## Update DatePicker integration
+
+`DatePickerInput` still accepts and emits `Date | null`, but its internal value uses `@internationalized/date`. Formatting now follows the active locale and calendar rather than a PrimeReact mask.
+
+- Replace `dateFormat` with locale configuration where possible. The prop remains accepted but is ignored.
+- Use `aria-label` or `aria-labelledby` for the segmented date group.
+- `id` identifies the focus group rather than a native text input.
+- `todayLabel` and `clearLabel` override the provider messages for one picker.
+- `showTime` and `hourFormat` remain supported.
+
+## Update Dropdown styling and semantics
+
+`Dropdown` preserves the `value`, `options`, `optionLabel`, `optionValue`, filtering, clear, and change-event model. Single selects now follow the WAI-ARIA button/listbox pattern; filtered selects use a combobox.
+
+Do not assume every Dropdown trigger has `role="combobox"`. Query it by its accessible name or `data-cratis-part="trigger"` in tests.
+
+Multiple selection remains available through the native multiple-select path. Prefer a dedicated collection picker for a large or highly customized multi-select experience.
+
+## Update tables
+
+`DataTableCore` now renders semantic HTML. Query-backed paging remains owned by Arc.
+
+- Sorting and filtering apply to the currently loaded page.
+- Complete-result filtering belongs in query arguments and runs on the server before paging.
+- `clientFiltering` is removed; it was a deprecated no-op in Components 3.
+- `Column` remains the declarative column marker.
+- Table styling uses `DataTableParts` and `data-cratis-part`.
+- Server totals remain authoritative for the paginator.
+
+Custom matchers registered with `registerDataTableFilterMatcher()` continue to work.
+
+## Update dialogs and steppers
+
+Dialog callback, busy, validity, dismissal, and initial-focus contracts remain. The modal/focus implementation is now React Aria-based.
+
+Stepper parts are Cratis-owned: `root`, `list`, `step`, `header`, `number`, `title`, `separator`, `panels`, and `panel`. Custom CSS that targeted Prime stepper classes or roles must move to those parts.
+
+## Update notifications
+
+The imperative API remains:
+
+```ts
+import { toast } from '@cratis/components/Notifications';
+
+toast.success({
+    title: 'Saved',
+    description: 'Your changes were saved.',
+});
+```
+
+The queue, promise lifecycle, dispatch substitution, timeout pause, focus behavior, frames, and region are Cratis-owned. Toast part keys are `region`, `toast`, `icon`, `content`, `title`, `description`, `action`, and `close`.
+
+## Replace direct Prime imports
 
-### Which license you need
+Components cannot remove PrimeUI licensing from an application that still imports Prime directly. Replace those imports with Components, native HTML, or application-owned primitives.
 
-- **[Community License](https://primeui.dev/licenses/community)** — free, and covers
-  individuals, students, non-profits and non-commercial open source. For organizations it
-  requires _all_ of: under $1M USD annual gross revenue, fewer than 5 developers, fewer
-  than 10 employees, and under $3M USD in outside funding. It supports up to 4 developers
-  and must be renewed annually by confirming continued eligibility.
-- **[Commercial License](https://primeui.dev/licenses/commercial)** — for everyone else.
-  Per developer, perpetual, one year of updates included.
+Typical replacements:
 
-### If you redistribute
+| Prime import                         | Preferred replacement                      |
+| ------------------------------------ | ------------------------------------------ |
+| `primereact/button`                  | `Button` from `@cratis/components/Common`  |
+| `primereact/inputtext`               | CommandForm field or native styled input   |
+| `primereact/dialog`                  | `Dialog` from `@cratis/components/Dialogs` |
+| `primereact/dropdown` / `select`     | `Dropdown`                                 |
+| `primereact/datatable` / `column`    | `DataTableCore` / `Column`                 |
+| `primereact/tag`, `badge`, `message` | `@cratis/components/Display`               |
+| `primereact/toast` / `toaster`       | `@cratis/components/Notifications`         |
 
-PrimeReact 11's restrictions clause is explicit: _"You may not … redistribute it as a
-component library or development tool … Redistributing the software so that third parties
-can develop with it requires a separate OEM License."_
+PrimeIcons class strings are still accepted where a component takes an icon node/string, but Components no longer installs PrimeIcons. Prefer a React icon component or product-owned SVG.
 
-If you are building an application, that clause is not about you. If you are publishing a
-library or tool that others build with — as this package does — read it carefully and
-check your position with PrimeTek. Nothing in this document is legal advice; the
-authoritative terms are at the links above.
+## Verify the migration
 
-### Staying on MIT
+1. Remove unused Prime dependencies and the PrimeUI license/provider configuration.
+2. Import `tokens` and `styles`; choose the baseline `theme` or map product tokens.
+3. Replace global Prime presets with Cratis tokens.
+4. Update `pt` keys and CSS selectors to Cratis parts.
+5. Replace direct Prime imports.
+6. Exercise dialogs, filtered tables, dates, dropdowns, toasts, and steppers with keyboard-only navigation.
+7. Verify light, dark, forced-colors, reduced-motion, and responsive layouts.
+8. Run TypeScript, specs, Storybook, and the production build.
 
-If a commercial dependency is not acceptable for your project, **`@cratis/components` 2.x
-remains on PrimeReact 10 and is fully MIT**. It is not receiving new features, but it is
-the supported option for staying MIT-only.
+For the decision, trade-offs, and validation gates, read [UI foundation](ui-foundation.md). For the older 2.x → 3.x PrimeReact migration, see [Migrate from Components 2 to 3](migration-from-2.md).
diff --git a/Source/ObjectContentEditor/ObjectContentEditor.tsx b/Source/ObjectContentEditor/ObjectContentEditor.tsx
index 3ad80f90..62a480c5 100644
--- a/Source/ObjectContentEditor/ObjectContentEditor.tsx
+++ b/Source/ObjectContentEditor/ObjectContentEditor.tsx
@@ -49,7 +49,7 @@ export interface ObjectContentEditorProps {
     /**
      * Extra CSS class names appended to the editor root, combined with the
      * default `order-content` class. For fine-grained styling of the internal
-     * PrimeReact inputs, use a global `pt` preset on `CratisComponentsProvider`.
+     * Components inputs, use product tokens and stable Cratis parts.
      */
     className?: string;
 }
@@ -61,7 +61,7 @@ export interface ObjectContentEditorProps {
  * edit mode it switches to the appropriate input type for each property
  * (`InputText`, `InputNumber`, `Checkbox`, `Calendar`, `InputTextarea`).
  *
- * The component composes many PrimeReact widgets internally; for fine-grained
+ * The component composes Cratis-owned controls internally; for fine-grained
  * pass-through styling use a global `pt` preset on `CratisComponentsProvider`.
  *
  * @param props - {@link ObjectContentEditorProps}.
diff --git a/Source/PivotViewer/components/pivot/constants.ts b/Source/PivotViewer/components/pivot/constants.ts
index 4d1b914f..80cde489 100644
--- a/Source/PivotViewer/components/pivot/constants.ts
+++ b/Source/PivotViewer/components/pivot/constants.ts
@@ -8,7 +8,7 @@ export const CARD_PADDING = 10;
 export const CARD_RADIUS = 12;
 export const CARD_GAP = 8; // Gap between cards (must match layout gap)
 
-// Fallbacks tuned to PrimeReact lara-dark-blue aesthetic; actual values resolved from CSS variables
+// Fallbacks tuned to the Cratis dark baseline; actual values resolved from CSS variables
 export const DEFAULT_COLORS = {
   base: 0x0f2745,        // surface-b-ish deep blue
   mid: 0x163359,         // surface-a-ish
diff --git a/Source/PivotViewer/types.ts b/Source/PivotViewer/types.ts
index 20c6e301..8e169b30 100644
--- a/Source/PivotViewer/types.ts
+++ b/Source/PivotViewer/types.ts
@@ -91,8 +91,8 @@ export interface PivotViewerProps<TItem extends object> {
   emptyContent?: ReactNode;
   isLoading?: boolean;
   /**
-   * Optional color overrides mapped to PrimeReact-like CSS variables.
-   * If omitted, values are taken from the global theme (PrimeReact defaults).
+   * Optional color overrides mapped to semantic CSS variables.
+   * If omitted, values are taken from the global theme (Cratis defaults).
    */
   colors?: Partial<{
     primaryColor: string;
diff --git a/Source/README.md b/Source/README.md
index 323fd6f9..9c21e190 100644
--- a/Source/README.md
+++ b/Source/README.md
@@ -1,810 +1,191 @@
-# Cratis Components
+# @cratis/components
 
-A collection of React components for building modern applications with Cratis.
+Renderer-independent React components for Cratis Arc commands, queries, dialogs, forms, and application surfaces.
 
-## Requirements
+Components owns its public markup, TypeScript contracts, styling parts, and design tokens. React Aria supplies low-level accessible interaction behavior internally; consumers do not import or style React Aria.
 
-### Minimum Versions
-
-- TypeScript: 4.7+
-- React: 19.0+
-- Node.js: 18+ (for development)
-
-### TypeScript Configuration
-
-This package is compatible with all modern TypeScript `moduleResolution` strategies:
-
-- ✅ `"bundler"` (recommended for Vite, esbuild, webpack 5+)
-- ✅ `"node16"` / `"nodenext"` (for Node.js projects)
-
-The package is **ESM-only** (`"type": "module"`) — PrimeReact 11 dropped the
-CommonJS build. It ships subpath `exports` with per-entry `types` for optimal
-module resolution and tree-shaking. Consume it from an ESM or bundler context;
-there is no `require()` entry.
-
-## Installation
+## Install
 
 ```bash
-npm install @cratis/components primereact @primereact/core @primereact/headless @primereact/hooks primeicons
-# or
-yarn add @cratis/components primereact @primereact/core @primereact/headless @primereact/hooks primeicons
-```
-
-**PrimeReact is a peer dependency** as of 3.0.0. You install it; the library uses
-your copy. This is deliberate: when `primereact` was a regular dependency, an app
-that also depended on it could end up with **two copies** — and two copies mean two
-`PrimeReactProvider` React contexts, so components rendered from the library read a
-different config, theme and z-index registry than components you render yourself.
-Nothing errors; overlays just stack wrongly and `pt` / `unstyled` silently fail to
-apply. If your app carries a `resolutions` / `overrides` pin to collapse PrimeReact
-into one copy, you can now delete it.
-
-`primereact` pins `@primereact/core`, `@primereact/headless` and `@primereact/hooks` to its own exact
-version, so one `primereact@11.x` install gives you matching copies of all three;
-declaring them is what makes a strict installer (pnpm, Yarn PnP) resolve them for the
-library too. `@primereact/types` is an **optional** peer — needed only if your own
-code imports the prop types the wrappers re-export.
-
-The other **peer dependencies** you provide are `react` / `react-dom` (**19+**), the
-`@cratis/arc*` packages (`>=20.3.1 <23` — Arc 20, 21 and 22 work), `reflect-metadata`
-and `tsyringe`; you typically already have these in a Cratis app. `pixi.js`,
-`framer-motion`, `allotment` and `react-icons` remain regular dependencies and are
-installed for you. `@primereact/styles` and `@primeuix/themes` are **optional** peers,
-needed only for PrimeReact's styled mode (see [Styling](#styling)).
-
-### Stylesheets
-
-Component CSS is no longer imported by the JavaScript — import it once in your app
-entry point, in this order:
-
-```ts
-import '@cratis/components/tokens'; // the --cratis-* token layer
-import '@cratis/components/styles'; // every component stylesheet, in one file
-import '@cratis/components/theme'; // optional — the Cratis baseline look (MIT CSS)
+npm install @cratis/components
 ```
 
-`./styles` also vendors `allotment/dist/style.css`, which `DataPage` needs for its
-split view, so you do not have to import that yourself.
-
-## Licensing
-
-**As of 3.0.0 this library builds on PrimeReact 11, which is no longer MIT.** PrimeReact 10
-was; PrimeReact 11 is part of PrimeTek's commercial **PrimeUI** family, and so are the
-packages it brings with it.
-
-| Package                                                                               | v10       | v11                      |
-| ------------------------------------------------------------------------------------- | --------- | ------------------------ |
-| `primereact`                                                                          | MIT       | PrimeUI commercial       |
-| `primeicons`                                                                          | MIT (7.x) | PrimeUI commercial (8.x) |
-| `@primereact/core`, `@primereact/headless`, `@primereact/hooks`, `@primereact/styles` | —         | PrimeUI commercial       |
-| `@primeuix/themes`, `@primeuix/styled`                                                | —         | PrimeUI commercial       |
-
-`@cratis/components` itself remains **MIT**. The change is in what it depends on, and it is
-yours to satisfy: PrimeReact is a peer dependency, so you install it and its license terms
-apply to you directly. `@primereact/styles` and `@primeuix/themes` — the two styled mode
-adds — are PrimeUI-licensed too.
-
-### A key is required regardless of how you style
-
-PrimeReact 11 verifies a license key when `PrimeReactProvider` mounts. The check is not
-conditional on `unstyled`, on whether a theme preset is applied, or on `NODE_ENV` — so
-every styling setup in [Styling](#styling) reaches it. Without a valid key you get a
-console warning and a fixed _"Invalid PrimeUI License"_ banner, in development **and**
-production.
-
-Supply your key through the provider:
-
-```tsx
-<CratisComponentsProvider value={{ license: '…' }}>
-```
-
-`@cratis/components/theme` is Cratis-authored MIT CSS that embeds no PrimeTek values, so
-that **stylesheet** carries no PrimeTek terms — but rendering it still means running
-PrimeReact 11, which needs a key.
-
-### Which license you need
-
-- **[Community License](https://primeui.dev/licenses/community)** — free. Covers
-  individuals, students, non-profits and non-commercial open source outright. For an
-  organization it requires _all_ of: under $1M USD annual gross revenue, fewer than 5
-  developers, fewer than 10 employees, and under $3M USD in outside funding. Supports up to
-  4 developers and is renewed annually by confirming continued eligibility.
-- **[Commercial License](https://primeui.dev/licenses/commercial)** — for everyone else.
-  Per developer, perpetual, with one year of updates.
-
-### If you redistribute
-
-PrimeReact 11's terms state: _"You may not … redistribute it as a component library or
-development tool … Redistributing the software so that third parties can develop with it
-requires a separate OEM License."_
-
-If you are building an application, that clause is not aimed at you. If you are publishing
-a library or tool that others build with, read it and check your position with PrimeTek.
-
-### Staying on MIT
+Supported peers:
 
-If a commercial dependency is not acceptable, **`@cratis/components` 2.x stays on
-PrimeReact 10 and is fully MIT.** It is not getting new features, but it is the supported
-way to remain MIT-only.
-
-> Nothing here is legal advice, and this summary may lag PrimeTek's terms. The
-> authoritative text is the `LICENSE.md` inside the `primereact` package and the pages
-> linked above.
-
-## Usage
-
-### Importing Components
-
-You can import components using subpath imports for better tree-shaking:
-
-```typescript
-// Import specific component modules
-import { TimeMachine } from '@cratis/components/TimeMachine';
-import { DataPage } from '@cratis/components/DataPage';
-import { CommandForm } from '@cratis/components/CommandForm';
-
-// Or import from the main entry point
-import { TimeMachine, DataPage } from '@cratis/components';
-```
-
-### Available Subpath Exports
-
-Components:
-
-- `@cratis/components` — package root (re-exports `CratisComponentsProvider` and the namespaced component groups)
-- `@cratis/components/CommandDialog`
-- `@cratis/components/CommandStepper`
-- `@cratis/components/CommandForm`
-- `@cratis/components/CommandForm/fields`
-- `@cratis/components/Common`
-- `@cratis/components/DataPage`
-- `@cratis/components/DataTables`
-- `@cratis/components/Dialogs`
-- `@cratis/components/Display` — `Tag`, `Badge`, `Chip`, `Skeleton`, `Avatar`, `ProgressBar`
-- `@cratis/components/Dropdown`
-- `@cratis/components/Notifications` — `Toaster`, Cratis-owned `toast` / `ToastDispatch`, `toastCommandResult`
-- `@cratis/components/ObjectContentEditor`
-- `@cratis/components/ObjectNavigationalBar`
-- `@cratis/components/PivotViewer`
-- `@cratis/components/SchemaEditor`
-- `@cratis/components/TimeMachine`
-- `@cratis/components/Toolbar`
-- `@cratis/components/styled` — `styledMode`, `CratisPreset`, `primeReactStyles`, `primeReactCssLayer`, `primeReactCssLayerOrder`, `cratisDarkModeSelector`: PrimeReact's styled mode, wired for the provider (needs `@primereact/styles` + `@primeuix/themes`)
-- `@cratis/components/types`
+- React and React DOM 19
+- `@cratis/arc` and `@cratis/arc.react` `>=20.3.1 <23`
+- `@cratis/fundamentals`
+- `reflect-metadata`
+- `tsyringe`
 
-Stylesheets:
+PrimeReact, PrimeIcons, PrimeUI themes, and a PrimeUI license are not required.
 
-- `@cratis/components/theme` — the **Cratis baseline theme** (light + dark, Cratis-authored MIT CSS, no `@primereact/styles` / `@primeuix/themes` dependency); import it and add `class="cratis-theme"` to skin every component from the token layer
-- `@cratis/components/styles` — **required**: every component stylesheet, the Tailwind utilities used inside the package, and the `allotment` rules `DataPage` needs, in one file
-- `@cratis/components/tokens` — **required**: the `--cratis-*` CSS variable tokens every component reads from
-- `@cratis/components/primereact-v10-palette` — the PrimeReact 10 theme variables (`--surface-*`, `--text-color`, `--primary-color`, the color scales, …) restored with the lara-blue values, for CSS already written against them
+## Styles
 
-## Styling
-
-This package ships primarily for its functionality and Arc integrations.
-Styling is designed to stay out of the way: choose the setup that matches how
-much control you want, and the other layers stay invisible.
-
-> **Tip — see each setup live:** every Storybook story includes a **Styling**
-> toolbar (paintbrush icon) that flips between the modes demonstrating the
-> setups below: _Aura Dark_ and _Aura Light_ (an `@primeuix/themes`
-> preset), _Cratis baseline theme_ (light and dark), _Unstyled
-> (bare structure)_, and _Unstyled + Tailwind pt_. Open any story (`yarn dev`)
-> and switch modes to see the same component under each setup.
-
-### TL;DR — choose a styling setup
-
-> **A PrimeUI license key is required for every row below** — see [Licensing](#licensing).
-> The styling choice changes how it looks and whether you additionally pull in
-> `@primeuix/themes`; it does not change whether you need a key.
-
-| Setup                             | When                                                                                                 | Effort  | Extra dependency                          | What you write                                                                                           |
-| --------------------------------- | ---------------------------------------------------------------------------------------------------- | ------- | ----------------------------------------- | -------------------------------------------------------------------------------------------------------- |
-| **Cratis baseline theme**         | You want a polished default look without adding a theme package.                                     | Lowest  | None                                      | `unstyled` + `import '@cratis/components/theme'` + `class="cratis-theme"`                                |
-| **PrimeReact's styled mode**      | You want PrimeReact's own look — a `@primeuix/themes` preset painting PrimeReact's component styles. | Low     | `@primereact/styles` + `@primeuix/themes` | `value={{ license, ...styledMode() }}` with `styledMode` from `@cratis/components/styled`                |
-| **A custom palette over a theme** | You want the theme's structure but your own colors.                                                  | Low     | As above, or none                         | `--cratis-*` overrides on the baseline theme, or `styledMode({ preset: definePreset(CratisPreset, …) })` |
-| **Fully unstyled**                | You're integrating into a tightly controlled design system.                                          | Highest | None                                      | `unstyled: true` + a `pt` preset in CSS or Tailwind                                                      |
-
-> **Why you need a theme, a baseline stylesheet, or a `pt` preset**
->
-> PrimeReact 11 is **unstyled-first**: the `primereact` package is primitives
-> that render structural markup with `data-scope` / `data-part` attributes,
-> no built-in visuals and **no `p-*` class names**. The class names and the
-> CSS behind them live in `@primereact/styles`; PrimeReact's own styled
-> components (`@primereact/ui`) are just the primitives with those styles
-> preset, and this library builds on the primitives. So a look comes from one
-> of three sources — PrimeReact's styled mode (`styledMode()`: a
-> `@primeuix/themes` preset **plus** PrimeReact's component styles), the
-> Cratis baseline theme (`@cratis/components/theme`), or your own `pt`/CSS.
-> Load none of them and the components render as their raw HTML primitives.
-> **A preset alone is not one of the three** — `theme: { preset }` by itself
-> emits `--p-*` tokens but styles nothing rendered here.
->
-> The `--cratis-*` token layer is an **additive Cratis-scoped tint** for
-> surfaces _our_ wrappers own (validation error text, the FormElement addon,
-> breadcrumb borders, etc.). It is not, by itself, enough to skin the
-> PrimeReact widgets — pair it with the baseline theme, styled mode, or a `pt`
-> preset. Derive the preset (styled mode) or override the `--cratis-*` tokens
-> (baseline theme) when you want the whole UI in your palette.
-
-All setups share the same one-line provider setup. You can change direction
-later because the same provider, tokens, and `pt` hooks stay available.
-
-### One-line setup (every styling option)
-
-```tsx
+```ts
 import '@cratis/components/tokens';
 import '@cratis/components/styles';
-import { CratisComponentsProvider } from '@cratis/components';
-
-export const App = () => (
-    <CratisComponentsProvider>
-        <YourApp />
-    </CratisComponentsProvider>
-);
+import '@cratis/components/theme'; // optional baseline appearance
 ```
 
-- `@cratis/components/tokens` is the `--cratis-*` CSS variable layer every
-  internal component reads from. It is the seam that lets the library span
-  PrimeReact major versions, so it is always needed.
-- `@cratis/components/styles` is every component stylesheet in one file, plus
-  the Tailwind utility classes used inside the package and the third-party
-  `allotment` rules `DataPage` needs. Components no longer import their own
-  CSS — that is what made the published package unloadable in Node
-  ([#118](https://github.com/Cratis/Components/issues/118)) — so this import is
-  required, not optional.
-- `CratisComponentsProvider` is a thin wrapper over `@primereact/core`'s
-  `PrimeReactProvider` so Cratis has one place to layer in defaults (including
-  the optional `...styledMode()` styled layer). Drop in the raw
-  `PrimeReactProvider` from `@primereact/core` if you'd rather.
-
-The setups below differ only in **what else** you load on top of this
-provider setup.
-
----
-
-### Use PrimeReact's styled mode
-
-PrimeReact 11 dropped the v10 `primereact/resources/themes/*/theme.css`
-stylesheets. A theme is now handed to the provider at runtime, in two halves: a
-`@primeuix/themes` **preset** (a token object `@primeuix/styled` turns into
-`--p-*` custom properties) and PrimeReact's **component styles**
-(`@primereact/styles` — the `p-*` class names and the CSS the tokens drive).
-`styledMode()` from `@cratis/components/styled` returns both as
-`{ theme, defaults }`; spread it into the provider `value` next to your
-license key. The `defaults` are `primeReactStyles`, PrimeReact's component
-styles keyed by primitive name, which the provider applies to **every**
-primitive rendered under it — the ones this library renders and the ones your
-app renders itself. That is what puts the `p-*` class names on the elements and
-lets the preset paint them; the `--cratis-*` tokens follow the preset's `--p-*`
-so Cratis-scoped surfaces stay in sync.
+A custom product design omits `theme` and defines the semantic `--cratis-*` variables itself.
 
-```bash
-npm install @primereact/styles @primeuix/themes   # optional peers, styled mode only
-```
+## Provider
 
 ```tsx
-import 'primeicons/primeicons.css';
-import '@cratis/components/tokens';
-import '@cratis/components/styles';
 import { CratisComponentsProvider } from '@cratis/components';
-import { styledMode } from '@cratis/components/styled';
 
 export const App = () => (
-    <CratisComponentsProvider value={{ license: 'YOUR-PRIMEUI-KEY', ...styledMode() }}>
-        <YourApp />
+    <CratisComponentsProvider value={{ locale: 'en-US' }} toaster>
+        <Application />
     </CratisComponentsProvider>
 );
 ```
 
-The default preset is `CratisPreset` — Lara with the blue primary and gray
-surfaces of PrimeReact 10's `lara-light-blue` / `lara-dark-blue`, with the dark
-surface scale one step lighter so content sits above the page as it did there,
-both color schemes.
-Options: `preset` (any `@primeuix/themes` preset — Aura, Lara, Nora, Material —
-or a `definePreset` result), `darkModeSelector` (default `.cratis-dark`, the
-class the baseline theme uses too; `'system'` follows `prefers-color-scheme`),
-`cssLayer` (default the `primereact` layer ordered between Tailwind's `base`
-and `components`; `false` emits the theme unlayered).
-
-> **A preset alone styles nothing.** `value={{ theme: { preset } }}` without the
-> `defaults` emits the `--p-*` tokens, but the primitives keep rendering with no
-> `p-*` class, so nothing rendered by this library is painted. Use
-> `styledMode()`.
-
-#### Override a single component with CSS
-
-Plain CSS works fine on top of the theme. In styled mode PrimeReact's elements
-carry their `p-*` class names, and the theme is emitted into the `primereact`
-cascade layer, so a plain unlayered rule in your own stylesheet wins — exactly
-as it did against PrimeReact 10's `@layer primereact` stylesheets. Or target
-your own `className`:
-
-```css
-/* yourApp.css */
-.p-button {
-    border-radius: 999px; /* pill buttons everywhere */
-}
-
-.dangerous-button {
-    background: var(--cratis-red-500);
-    color: white;
-}
-```
-
-```tsx
-<Button className='dangerous-button'>Delete</Button>
-```
-
-#### Override a single component with Tailwind
-
-Pass Tailwind utility classes through the wrapper's `className` prop:
+The provider owns locale, Components-specific labels, and the optional toast region. Styling is CSS-owned.
 
 ```tsx
-<InputTextField value={c => c.name}
-                className="rounded-2xl bg-slate-900 text-slate-50" />
-
-<Dialog title="Confirm" className="shadow-2xl rounded-3xl">
-    {/* … */}
-</Dialog>
+<CratisComponentsProvider
+    value={{
+        locale: 'nb-NO',
+        messages: {
+            paginator: {
+                navigation: 'Sidenavigasjon',
+                first: 'Første side',
+                previous: 'Forrige side',
+                next: 'Neste side',
+                last: 'Siste side',
+            },
+            datePicker: {
+                today: 'I dag',
+                clear: 'Tøm',
+                openCalendar: 'Åpne kalender',
+                previousMonth: 'Forrige måned',
+                nextMonth: 'Neste måned',
+            },
+        },
+    }}
+>
+    <Application />
+</CratisComponentsProvider>
 ```
 
-**Use this setup when:** you're prototyping, building internal tools, want the
-look Cratis apps had on PrimeReact 10, or are happy with one of the prebuilt
-PrimeReact design systems.
-
-### Use the Cratis baseline theme
-
-Want a polished default look **without adding `@primereact/styles` and
-`@primeuix/themes`**? Ship the components unstyled and import the Cratis baseline
-theme — Cratis-authored MIT CSS that styles every component from the `--cratis-*`
-layer. (You still need a PrimeUI key to run PrimeReact itself — see
-[Licensing](#licensing).)
+## Command forms
 
 ```tsx
-import 'primeicons/primeicons.css';
-import '@cratis/components/theme'; // the baseline theme
-
-export const App = () => (
-    <CratisComponentsProvider value={{ unstyled: true }}>
-        <div className='cratis-theme'>
-            {' '}
-            {/* scope: put on <body>, app root, or a subtree */}
-            <YourApp />
-        </div>
-    </CratisComponentsProvider>
+import { CommandDialog } from '@cratis/components/CommandDialog';
+import { InputTextField } from '@cratis/components/CommandForm';
+import { RegisterAuthor } from './RegisterAuthor';
+
+export const RegisterAuthorDialog = () => (
+    <CommandDialog<RegisterAuthor>
+        command={RegisterAuthor}
+        title='Register author'
+        okLabel='Register'
+    >
+        <InputTextField<RegisterAuthor> value={(command) => command.name} title='Name' />
+    </CommandDialog>
 );
 ```
 
-Add `cratis-dark` to an ancestor for the dark palette. The theme defers to a
-`@primeuix/themes` preset's `--p-*` tokens when one is present, so you can layer
-it under styled mode too, and every rule is overridable via your own CSS or `pt`.
-The baseline theme styles the unstyled primitives through their `[data-scope]`
-attributes — there are no `p-*` class names outside styled mode — so target
-those, or your own `className`, or the `--cratis-*` tokens:
-
-```css
-.cratis-theme [data-scope='button'] {
-    border-radius: 999px;
-} /* pill buttons */
-.dangerous {
-    background: var(--cratis-red-500);
-    color: white;
-}
-```
-
----
-
-### Use a custom palette on top of a PrimeReact theme
-
-Keep a theme as your **structural baseline** (so every widget gets its
-padding, dialog frame, button shape, focus ring, etc.) and repaint it with your
-own colors. Which knob you turn depends on the theme:
-
-- **Cratis baseline theme** — override the `--cratis-*` tokens in CSS; the
-  theme paints the widgets from them, so one override repaints widgets and
-  Cratis-scoped surfaces alike.
-- **PrimeReact's styled mode** — derive your own preset with `definePreset` and
-  hand it to `styledMode({ preset })`; the widgets read the preset's `--p-*`
-  tokens, and the `--cratis-*` tokens follow.
-
-#### Baseline theme, plain CSS
-
-```css
-/* palette.override.css — imported once, after @cratis/components/theme */
-.cratis-theme {
-    --cratis-surface-section: #0f172a;
-    --cratis-surface-card: #1e293b;
-    --cratis-surface-overlay: #1e293b;
-    --cratis-surface-hover: #334155;
-    --cratis-surface-border: #334155;
-
-    --cratis-text-color: #f8fafc;
-    --cratis-text-color-secondary: #94a3b8;
-
-    --cratis-primary-color: #38bdf8;
-    --cratis-primary-color-text: #0b1220;
-
-    --cratis-highlight-bg: #1e40af;
-    --cratis-highlight-text-color: #ffffff;
-
-    --cratis-border-radius: 10px;
-}
-```
-
-#### Styled mode, `definePreset`
+Fields bind directly to generated command properties and surface server validation through the Arc command-form context.
 
-```ts
-// brand-preset.ts
-import { definePreset } from '@primeuix/themes';
-import { CratisPreset } from '@cratis/components/styled';
-
-export const BrandPreset = definePreset(CratisPreset, {
-    semantic: {
-        primary: {
-            50: '{sky.50}',
-            100: '{sky.100}',
-            200: '{sky.200}',
-            300: '{sky.300}',
-            400: '{sky.400}',
-            500: '{sky.500}',
-            600: '{sky.600}',
-            700: '{sky.700}',
-            800: '{sky.800}',
-            900: '{sky.900}',
-            950: '{sky.950}',
-        },
-    },
-});
-```
+## Query-backed tables
 
 ```tsx
-<CratisComponentsProvider value={{ license, ...styledMode({ preset: BrandPreset }) }}>
-```
-
-#### Scoped (dark-on-light, light-on-dark, etc.)
-
-`--cratis-*` tokens cascade like any other CSS variable, so an ancestor scope
-works under the baseline theme (in styled mode, region-scoped widget colors come
-from the preset; the `--cratis-*` overrides still retint Cratis-scoped surfaces):
-
-```css
-.dark-zone {
-    --cratis-surface-card: #0b1220;
-    --cratis-text-color: #f8fafc;
-    --cratis-primary-color: #60a5fa;
-}
-```
+import { Column, DataTableForObservableQuery } from '@cratis/components/DataTables';
+import { ObserveAuthors } from './ObserveAuthors';
 
-```tsx
-<div className='dark-zone'>
-    <Dialog title='Always dark'>…</Dialog>
-</div>
+<DataTableForObservableQuery
+    query={ObserveAuthors}
+    dataKey='id'
+    emptyMessage='No authors'
+>
+    <Column field='name' header='Name' sortable filter />
+    <Column field='email' header='Email' filter />
+</DataTableForObservableQuery>;
 ```
 
-#### With Tailwind CSS
-
-Tailwind's `@layer base` is the idiomatic spot — declare the palette once and
-Tailwind handles cascade and dark mode:
+Arc owns server paging. Client filters apply only to the loaded page; complete-result filtering belongs in query arguments and runs on the server before paging.
 
-```css
-/* app.css */
-@import 'tailwindcss';
-@import '@cratis/components/tokens';
-@import '@cratis/components/styles';
-
-@layer base {
-    :root {
-        --cratis-surface-card: theme('colors.slate.800');
-        --cratis-surface-border: theme('colors.slate.700');
-        --cratis-text-color: theme('colors.slate.50');
-        --cratis-primary-color: theme('colors.sky.400');
-        --cratis-red-500: theme('colors.red.500');
-    }
-
-    .cratis-dark {
-        --cratis-surface-card: theme('colors.slate.900');
-        --cratis-text-color: theme('colors.slate.100');
-    }
-}
-```
-
-#### CSS written against PrimeReact 10's variables
-
-If your stylesheets still use the names a v10 theme published on `:root` —
-`--surface-ground`, `--surface-card`, `--surface-border`, `--text-color`,
-`--primary-color`, the `--surface-0…900` and color scales — import
-`@cratis/components/primereact-v10-palette` after `tokens` and `styles`. It
-restores every one of them with the `lara-light-blue` / `lara-dark-blue`
-values: the semantic names follow the active preset's `--p-*` tokens where
-v11 has an equivalent (Lara as the fallback), the numbered scales are the
-lara-blue values verbatim (the v10 dark surface scale was inverted, so
-`--p-surface-*` cannot stand in for it), and light/dark switch through
-`light-dark()` keyed off `.cratis-dark`. It exists so what is already written
-keeps working — write nothing new against those names; use `--cratis-*` (or
-`--p-*`).
-
-#### What `--cratis-*` tokens are for
-
-In styled mode PrimeReact widgets read the preset's `--p-*` design tokens
-directly. Cratis wrappers add some surfaces of their own (inline validation
-error text, the FormElement addon background, the breadcrumb bottom border,
-etc.) — those use a parallel set of `--cratis-*` tokens that resolve the v11
-token first and fall back to the v10 variable, via the cascade defined in
-`tokens.css`. Under the baseline theme the widgets read the `--cratis-*` tokens
-too.
-
-The upshot:
-
-- Repaint the whole UI by deriving the **preset** (styled mode) or overriding the **`--cratis-*` tokens** (baseline theme).
-- Override **`--cratis-*` tokens** in styled mode when you specifically want Cratis surfaces to differ from PrimeReact widgets.
-
-#### `--cratis-*` token reference (Cratis-scoped surfaces)
-
-| Group     | Tokens                                                                                                                                                                                                        |
-| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Surfaces  | `--cratis-surface-0`, `--cratis-surface-100`, `--cratis-surface-ground`, `--cratis-surface-section`, `--cratis-surface-card`, `--cratis-surface-overlay`, `--cratis-surface-hover`, `--cratis-surface-border` |
-| Text      | `--cratis-text-color`, `--cratis-text-color-secondary`                                                                                                                                                        |
-| Brand     | `--cratis-primary-color`, `--cratis-primary-color-text`, `--cratis-primary-300`, `--cratis-primary-400`, `--cratis-primary-500`, `--cratis-primary-600`                                                       |
-| Selection | `--cratis-highlight-bg`, `--cratis-highlight-text-color`                                                                                                                                                      |
-| Semantic  | `--cratis-green-500`, `--cratis-orange-500`, `--cratis-red-500`                                                                                                                                               |
-| Geometry  | `--cratis-border-radius`                                                                                                                                                                                      |
-| Effects   | `--cratis-focus-ring`, `--cratis-maskbg`                                                                                                                                                                      |
-
-Each resolves the v11 design token first and falls back to the v10 variable
-with the same name minus the `--cratis-` prefix (e.g. `--cratis-surface-card`
-→ `var(--p-content-background, var(--surface-card))`).
-
-**Use this setup when:** you want a custom look without writing a PrimeReact
-theme from scratch, you're shipping multiple palette variants (light/dark/
-brand), or you want Cratis-scoped surfaces tinted differently from PrimeReact
-widgets.
-
----
-
-### Use fully unstyled mode
-
-Turn off every PrimeReact base style at the provider and supply visuals
-through PrimeReact's `pt` (pass-through) mechanism, your own CSS, or both.
-Components render structurally only and become a blank canvas.
+## Notifications
 
 ```tsx
-import '@cratis/components/styles'; // component rules + Tailwind utilities, still needed when unstyled
-import { CratisComponentsProvider } from '@cratis/components';
-
-export const App = () => (
-    <CratisComponentsProvider value={{ unstyled: true, pt: globalPt }}>
-        <YourApp />
-    </CratisComponentsProvider>
-);
-```
-
-#### Verify pass-through compatibility
-
-Components 3 publishes its PrimeReact 11 slot and rendered-marker contract from `@cratis/components/compatibility`. In a DOM test, apply `primeReact11PassThroughSentinelPreset`, render the surfaces your application uses, and call `assertPrimeReact11PassThroughCompatibility(root, components)`. Additions pass; a missing or renamed contracted slot or marker produces an actionable error. The contract is major-version scoped and does not preserve PrimeReact 10 names.
-
-The machine-readable `components3PrimeReact11PassThroughContract` is the source of truth. Contract revision 1 covers the parts rendered by Components 3's supported compositions on PrimeReact 11, rather than every optional part an application could compose directly. See the [pass-through contract documentation](https://cratis.io/Components/styling/pass-through.html) for the supported component and slot list.
-
-#### A `pt` preset in plain CSS
-
-Attach a `className` from your own stylesheet via a global preset:
-
-```ts
-// pt-preset.ts
-export const globalPt = {
-    button: {
-        root: { className: 'my-btn' },
-    },
-    dialog: {
-        root: {
-            popup: { className: 'my-dialog' },
-            header: { className: 'my-dialog__header' },
-            content: { className: 'my-dialog__body' },
-        },
-    },
-    inputtext: {
-        root: { className: 'my-input' },
-    },
-} as const;
-```
+import { Toaster, toast } from '@cratis/components/Notifications';
 
-```css
-/* yourApp.css */
-.my-btn {
-    display: inline-flex;
-    align-items: center;
-    padding: 0.5rem 1rem;
-    background: var(--cratis-primary-color);
-    color: var(--cratis-primary-color-text);
-    border: none;
-    border-radius: var(--cratis-border-radius);
-    cursor: pointer;
-}
+<Toaster position='top-right' />;
 
-.my-dialog__header {
-    padding: 1rem 1.25rem;
-    background: var(--cratis-surface-card);
-    border-bottom: 1px solid var(--cratis-surface-border);
-    font-weight: 600;
-}
+toast.success({
+    title: 'Saved',
+    description: 'Your changes were saved.',
+});
 ```
 
-#### A `pt` preset in Tailwind
+The queue, promise lifecycle, timers, dispatch substitution, accessible frame, and region are Cratis-owned.
 
-Same shape, Tailwind utilities as the class strings:
+## Custom styling
 
-```ts
-// pt-preset.ts
-export const globalPt = {
-    button: {
-        root: {
-            className:
-                'inline-flex items-center px-4 py-2 rounded-lg bg-sky-700 text-white hover:bg-sky-600 disabled:opacity-50',
-        },
-    },
-    dialog: {
-        root: {
-            popup: { className: 'rounded-2xl shadow-2xl overflow-hidden' },
-            header: {
-                className:
-                    'px-5 py-3 bg-slate-800 text-slate-50 font-semibold border-b border-slate-700',
-            },
-            content: { className: 'p-5 bg-slate-900 text-slate-100' },
-        },
-    },
-    inputtext: {
-        root: {
-            className:
-                'w-full px-3 py-2 rounded-md bg-slate-800 text-slate-50 border border-slate-700 focus:border-sky-400 focus:outline-none',
-        },
-    },
-} as const;
-```
-
-#### Per-instance overrides
-
-Anything global can be overridden per-instance — useful when one component
-needs to look different:
+Every meaningful component element carries a stable `data-cratis-part`. Components with per-instance customization expose a typed `pt` object containing ordinary HTML attributes.
 
 ```tsx
 <Dialog
-    title="Brand callout"
-    pt={{ root: { className: 'rounded-none' },
-          header: { className: 'bg-pink-600 text-white' } }}>
-    …
+    title='Edit account'
+    pt={{
+        backdrop: { className: 'product-dialog-backdrop' },
+        root: { className: 'product-dialog' },
+        content: { className: 'product-dialog-content' },
+    }}
+>
+    Content
 </Dialog>
-
-<InputTextField value={c => c.name}
-                pt={{ root: { className: 'border-2 border-pink-500' } }} />
 ```
 
-#### Composite components in unstyled mode
-
-`DataPage` and `StepperCommandDialog` compose multiple PrimeReact widgets and
-expose explicit per-slot props. The global `pt` reaches every internal widget;
-per-instance overrides target the inner slot directly:
-
-```tsx
-<DataPage<AllAuthors, Author, never>
-    title="Authors" query={AllAuthors}
-    tablePt={{ table: { className: 'min-w-full divide-y divide-slate-700' } }}
-    menubarPt={{ root: { className: 'px-3 py-2 bg-slate-900' } }}>
-    <DataPage.MenuItems>…</DataPage.MenuItems>
-    <DataPage.Columns>…</DataPage.Columns>
-</DataPage>
-
-<StepperCommandDialog<RegisterOrder> command={RegisterOrder} title="New order"
-    /* pt targets the Stepper */
-    pt={{ stepperpanel: { content: { className: 'pt-6' } } }}
-    /* dialogPt targets the outer Dialog */
-    dialogPt={{ header: { className: 'bg-slate-900' } }}>
-    …
-</StepperCommandDialog>
-```
-
-`ObjectContentEditor`, `ObjectNavigationalBar`, and `SchemaEditor` accept only
-`className` on the root — restyle their internals via the **global** `pt`
-preset.
-
-**Use this setup when:** you have a design system to honor, you're matching a
-brand kit, or you want zero PrimeReact CSS in the final bundle.
-
----
-
-### Combining styling setups
-
-The styling options compose, so you don't have to choose one for the whole app:
-
-- **Themed with one unstyled component** — keep the PrimeReact theme and pass
-  `unstyled` per-component to opt that one widget out:
-
-    ```tsx
-    <Dialog title='Custom' unstyled pt={brandDialogPt}>
-        …
-    </Dialog>
-    ```
-
-- **Unstyled with one themed island** — the baseline theme's rules are scoped
-  under `.cratis-theme`, so wrapping one element in the class themes just that
-  subtree:
-
-    ```tsx
-    <CratisComponentsProvider value={{ unstyled: true, pt: globalPt }}>
-        <App />
-        <div className='cratis-theme'>
-            <BaselineThemedSubtree />
-        </div>
-    </CratisComponentsProvider>
-    ```
-
-- **Dark mode** — toggle `cratis-dark` on the root element: the baseline
-  theme's dark palette, `styledMode()`'s dark scheme (its default
-  `darkModeSelector`) and the v10 palette all key off it, so PrimeReact widgets
-  and Cratis surfaces follow together. Scope any `--cratis-*` tokens you want
-  to diverge to `.cratis-dark` as well.
-
-### Per-component `pt` cheat sheet
-
-Three patterns, depending on how much PrimeReact a wrapper composes:
-
-1. **Single-widget wrappers** — `Dialog`, every `CommandForm` field,
-   `EventsView`, and `Dropdown` forward `pt`, `ptOptions`, `unstyled`, and
-   `className` straight to their inner PrimeReact component.
-2. **Multi-slot composites** — `StepperCommandDialog` (`pt` for Stepper,
-   `dialogPt` for Dialog), `DataPage` (`tablePt` for DataTable, `menubarPt`
-   for the action toolbar's buttons), and `DataTableForQuery` /
-   `DataTableForObservableQuery` (`pt` for DataTable plus
-   `paginatorClassName` / `paginatorAriaLabels` for the Cratis paginator).
-3. **Large composites** — `ObjectContentEditor`, `ObjectNavigationalBar`,
-   `SchemaEditor` expose `className` only; restyle internals via the global
-   `pt` preset.
-
-`Dropdown` routes `id`, `tabIndex`, `aria-label`, `aria-labelledby` and `aria-describedby` to its focusable `role="combobox"` trigger. The outer Select root remains a layout wrapper and does not duplicate the control id. For filterable dropdowns, `filterPlaceholder` can differ from the closed trigger's `placeholder` and defaults to it when omitted.
-
-Filtered data-table columns accept partial `filterLabels` overrides for trigger, action and boolean-option text, plus a `filterElement` render callback that replaces the built-in value editor while keeping draft/apply behavior. `DataTableFilterMatchMode` supplies the Cratis-owned built-in vocabulary, and `registerDataTableFilterMatcher()` adds custom modes without importing the active rendering adapter.
-
-`DatePickerInput` exposes `id`, `disabled`, `readOnly` and `showButtonBar` directly. Use its runtime `input` slot only for additional attributes; the public type intentionally rejects PrimeReact 11's stale `pcInputText` declaration, which the runtime never emits. The wrapper translates `invalid` to accepted `aria-invalid` and `data-invalid` input attributes instead of forwarding a rejected `invalid` DOM attribute:
+```css
+:root {
+    --cratis-primary-color: var(--product-accent);
+    --cratis-surface-card: var(--product-surface);
+    --cratis-surface-overlay: var(--product-surface-raised);
+    --cratis-surface-border: var(--product-border);
+    --cratis-text-color: var(--product-text);
+    --cratis-focus-ring: var(--product-focus-ring);
+}
 
-```tsx
-<DatePickerInput
-    id='appointment-date'
-    value={selectedDate}
-    onChange={setSelectedDate}
-    disabled={isDisabled}
-    readOnly={isReadOnly}
-    showButtonBar
-    pt={{ input: { 'aria-label': 'Appointment date' } }}
-/>
+.product-dialog[data-cratis-part='root'] {
+    border-radius: 1rem;
+}
 ```
 
-### What is _not_ fully pass-through
-
-`BusyIndicatorDialog` only honors the global `pt` set via
-`CratisComponentsProvider`; it does not accept per-instance `pt` because its
-request type is owned by `@cratis/arc.react`.
+Do not target React Aria classes or internal DOM structure.
 
-## Troubleshooting
+## Entry points
 
-### Module Resolution Errors
-
-If you encounter errors like:
-
-```
-Cannot find module '@cratis/components/TimeMachine' or its corresponding type declarations.
-```
+- `@cratis/components`
+- `@cratis/components/CommandDialog`
+- `@cratis/components/CommandStepper`
+- `@cratis/components/CommandForm`
+- `@cratis/components/CommandForm/fields`
+- `@cratis/components/Common`
+- `@cratis/components/DataPage`
+- `@cratis/components/DataTables`
+- `@cratis/components/Dialogs`
+- `@cratis/components/Display`
+- `@cratis/components/Dropdown`
+- `@cratis/components/Filter`
+- `@cratis/components/Notifications`
+- `@cratis/components/ObjectContentEditor`
+- `@cratis/components/ObjectNavigationalBar`
+- `@cratis/components/PivotViewer`
+- `@cratis/components/SchemaEditor`
+- `@cratis/components/TimeMachine`
+- `@cratis/components/Toolbar`
+- `@cratis/components/types`
 
-**Solution:** Ensure you're using the correct case-sensitive import paths (e.g., `TimeMachine`, not `timeMachine`).
+## Components 3 migration
 
-If using TypeScript 4.7+, try updating your `tsconfig.json`:
+Components 4 removes the mandatory PrimeReact 11 foundation. Follow [MIGRATION.md](./MIGRATION.md) for dependency removal, provider changes, product token mapping, stable part names, DatePicker changes, table behavior, notifications, and direct Prime import replacements.
 
-```json
-{
-    "compilerOptions": {
-        "moduleResolution": "bundler" // or "node16" / "nodenext"
-    }
-}
-```
+The old `@cratis/components/styled`, `styledMode`, `CratisPreset`, and `primeReactStyles` renderer exports are removed. Move styling to tokens and stable parts before upgrading.
 
-### Import Errors
+## License
 
-Ensure you're using the correct import paths. The package uses case-sensitive paths that match the actual component names.
+Cratis Components is MIT licensed. Its default runtime dependencies are Apache-2.0 or MIT licensed. Components 4 does not require PrimeUI licensing.
diff --git a/Source/SchemaEditor/SchemaEditor.tsx b/Source/SchemaEditor/SchemaEditor.tsx
index e08cab13..8be03f28 100644
--- a/Source/SchemaEditor/SchemaEditor.tsx
+++ b/Source/SchemaEditor/SchemaEditor.tsx
@@ -103,7 +103,7 @@ export interface SchemaEditorProps {
     /**
      * Extra CSS class names appended to the editor root. Combined with the
      * default `schema-editor` class. For fine-grained styling of internal
-     * PrimeReact components, use a global `pt` preset on `CratisComponentsProvider`.
+     * Components controls, use product tokens and stable Cratis parts.
      */
     className?: string;
 
@@ -117,7 +117,7 @@ export interface SchemaEditorProps {
  * types and formats, and validate naming rules in place. Designed to drive
  * UIs around event payload schemas and similar structural documents.
  *
- * The editor composes a PrimeReact `DataTable`, `Menubar`, and several form
+ * The editor composes a Cratis data table, action toolbar, and form
  * widgets internally; for restyling, use a global `pt` preset on
  * `CratisComponentsProvider`.
  *
diff --git a/Source/Styled/CratisPreset.ts b/Source/Styled/CratisPreset.ts
deleted file mode 100644
index d14044ee..00000000
--- a/Source/Styled/CratisPreset.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-// Copyright (c) Cratis. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-
-/**
- * Legacy preset marker retained for source compatibility.
- *
- * Components now styles its Cratis-owned markup through `tokens`, `styles`, and
- * the optional `theme` stylesheet. Consumer design systems should map their own
- * variables onto the `--cratis-*` tokens instead of extending a renderer preset.
- */
-export const CratisPreset = Object.freeze({
-    name: 'cratis',
-    darkModeSelector: '.cratis-dark',
-});
diff --git a/Source/Styled/for_styledMode/when_using_the_legacy_helper.ts b/Source/Styled/for_styledMode/when_using_the_legacy_helper.ts
deleted file mode 100644
index aad8049a..00000000
--- a/Source/Styled/for_styledMode/when_using_the_legacy_helper.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-// Copyright (c) Cratis. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-
-import { expect } from 'chai';
-import { describe, it } from 'vitest';
-import { CratisPreset } from '../CratisPreset';
-import { primeReactStyles } from '../primeReactStyles';
-import { styledMode } from '../styledMode';
-
-describe('when using the legacy styled-mode surface', () => {
-    it('should return an empty provider configuration', () => {
-        expect(styledMode()).to.deep.equal({});
-        expect(styledMode({ preset: { name: 'legacy' } })).to.deep.equal({});
-    });
-
-    it('should retain inert legacy exports for migration builds', () => {
-        expect(CratisPreset.name).to.equal('cratis');
-        expect(primeReactStyles).to.deep.equal({});
-    });
-});
diff --git a/Source/Styled/index.ts b/Source/Styled/index.ts
deleted file mode 100644
index c401a9fe..00000000
--- a/Source/Styled/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-// Copyright (c) Cratis. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-
-export * from './CratisPreset';
-export * from './primeReactStyles';
-export * from './styledMode';
diff --git a/Source/Styled/primeReactStyles.ts b/Source/Styled/primeReactStyles.ts
deleted file mode 100644
index 08317971..00000000
--- a/Source/Styled/primeReactStyles.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-// Copyright (c) Cratis. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-
-/**
- * Legacy empty style map retained so existing imports fail softly during the
- * major migration. The default package no longer renders PrimeReact markup.
- */
-export const primeReactStyles: Readonly<Record<string, never>> = Object.freeze({});
diff --git a/Source/Styled/styledMode.ts b/Source/Styled/styledMode.ts
deleted file mode 100644
index c577c0ea..00000000
--- a/Source/Styled/styledMode.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-// Copyright (c) Cratis. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-
-import type { CratisComponentsConfig } from '../Common/CratisComponentsProvider';
-
-/** Legacy cascade-layer name retained for migration tooling. */
-export const primeReactCssLayer = 'primereact';
-/** Legacy cascade-layer order retained for migration tooling. */
-export const primeReactCssLayerOrder = 'theme, base, primereact, components, utilities';
-/** Default selector used by the Cratis token/theme stylesheets. */
-export const cratisDarkModeSelector = '.cratis-dark';
-
-export interface StyledModeOptions {
-    /** Legacy renderer preset. Ignored by the renderer-independent package. */
-    preset?: unknown;
-    /** Dark selector retained for source compatibility. */
-    darkModeSelector?: string;
-    /** Legacy renderer cascade layer. Ignored by the renderer-independent package. */
-    cssLayer?: false | string | { name: string; order?: string };
-}
-
-/**
- * Legacy provider helper retained for source compatibility.
- *
- * Components is now styled by importing `@cratis/components/tokens`,
- * `@cratis/components/styles`, and optionally `@cratis/components/theme`.
- * The helper returns an empty configuration and can be removed from application code.
- */
-export const styledMode = (
-    _options: StyledModeOptions = {},
-): CratisComponentsConfig => ({});
diff --git a/Source/package.json b/Source/package.json
index 7fe097f0..472d07eb 100644
--- a/Source/package.json
+++ b/Source/package.json
@@ -106,22 +106,17 @@
             "types": "./dist/esm/Toolbar/index.d.ts",
             "import": "./dist/esm/Toolbar/index.js"
         },
-        "./styled": {
-            "types": "./dist/esm/Styled/index.d.ts",
-            "import": "./dist/esm/Styled/index.js"
-        },
         "./types": {
             "types": "./dist/esm/types/index.d.ts",
             "import": "./dist/esm/types/index.js"
         },
         "./styles": "./dist/esm/styles.css",
         "./tokens": "./dist/esm/tokens.css",
-        "./theme": "./dist/esm/theme.css",
-        "./primereact-v10-palette": "./dist/esm/primereact-v10-palette.css"
+        "./theme": "./dist/esm/theme.css"
     },
     "scripts": {
-        "prepare": "yarn g:build",
-        "clean": "yarn g:clean",
+        "prepare": "yarn clean && yarn g:build",
+        "clean": "rm -rf dist && yarn g:clean",
         "build": "tsc -p tsconfig.json",
         "compile": "tsc -p tsconfig.json -noEmit && yarn g:lint",
         "copy-css": "./scripts/copy-css.sh",
diff --git a/Source/primereact-v10-palette.css b/Source/primereact-v10-palette.css
deleted file mode 100644
index 805d0197..00000000
--- a/Source/primereact-v10-palette.css
+++ /dev/null
@@ -1,242 +0,0 @@
-/* Copyright (c) Cratis. All rights reserved. */
-/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */
-
-/*
- * The PrimeReact 10 theme palette, carried forward.
- *
- * PrimeReact 10's stylesheet themes published a set of custom properties on `:root` —
- * `--surface-ground`, `--surface-card`, `--surface-border`, `--text-color`, `--primary-color`,
- * the `--surface-0…900` and `--gray/--blue/--red-…` scales, and so on — and applications wrote
- * their own CSS against them for years. PrimeReact 11 ships no stylesheet, so those names
- * resolve to nothing the day it is installed: borders vanish, cards lose their background,
- * text falls back to the browser default.
- *
- * This file restores every one of them, with the values of the `lara-light-blue` and
- * `lara-dark-blue` themes both Cratis applications shipped, so an application can move to
- * PrimeReact 11 without rewriting those call sites. Import it once, next to the token layer:
- *
- *     import '@cratis/components/tokens';
- *     import '@cratis/components/styles';
- *     import '@cratis/components/primereact-v10-palette';
- *
- * Two kinds of name:
- *
- * - The **semantic** names (`--surface-ground`, `--surface-card`, `--text-color`,
- *   `--primary-color`, …) resolve from the active `@primeuix/themes` preset's `--p-*` tokens
- *   where PrimeReact 11 has an equivalent, so they follow whatever preset is applied — with
- *   the Lara values as the fallback when no preset is present.
- * - The **numbered scales** (`--surface-0…900`, `--primary-50…900`, `--gray/--blue/--red-…`)
- *   are the Lara values verbatim. PrimeReact 11's `--p-surface-*` scale is not inverted in
- *   dark mode the way the v10 one was, so it cannot stand in for it.
- *
- * Light and dark are both carried through `light-dark()`, which reads the element's
- * `color-scheme`. `.cratis-dark` — the class the Cratis baseline theme and `styledMode()`
- * key dark mode off — sets it, so one class on the body switches every name below.
- *
- * Nothing new should be written against these names: use the `--cratis-*` tokens (or the
- * preset's `--p-*` tokens) instead. This exists so what already is written keeps working.
- */
-
-.cratis-dark {
-    color-scheme: dark;
-}
-
-:root {
-    /* Semantic surfaces and text — follow the preset, fall back to Lara */
-    --surface-ground: light-dark(#f9fafb, #111827);
-    --surface-section: light-dark(#ffffff, #111827);
-    --surface-card: var(--p-content-background, light-dark(#ffffff, #1f2937));
-    --surface-overlay: var(--p-overlay-modal-background, light-dark(#ffffff, #1f2937));
-    --surface-border: var(--p-content-border-color, light-dark(#dfe7ef, rgba(255, 255, 255, 0.1)));
-    --surface-hover: var(--p-content-hover-background, light-dark(#f6f9fc, rgba(255, 255, 255, 0.03)));
-    --text-color: var(--p-text-color, light-dark(#4b5563, rgba(255, 255, 255, 0.87)));
-    --text-color-secondary: var(--p-text-muted-color, light-dark(#6b7280, rgba(255, 255, 255, 0.6)));
-    --primary-color: var(--p-primary-color, light-dark(#3b82f6, #60a5fa));
-    --primary-color-text: var(--p-primary-contrast-color, light-dark(#ffffff, #030712));
-    --highlight-bg: var(--p-highlight-background, light-dark(#eff6ff, rgba(96, 165, 250, 0.16)));
-    --highlight-text-color: var(--p-highlight-color, light-dark(#1d4ed8, rgba(255, 255, 255, 0.87)));
-    --focus-ring: var(--p-focus-ring-shadow, 0 0 0 0.2rem light-dark(#bfdbfe, rgba(96, 165, 250, 0.2)));
-    --maskbg: var(--p-mask-background, rgba(0, 0, 0, 0.4));
-    --border-radius: var(--p-content-border-radius, 6px);
-
-    /* Spacing the v10 themes published alongside the palette */
-    --content-padding: 1.25rem;
-    --inline-spacing: 0.5rem;
-
-    /* The v9 aliases the v10 themes still carried */
-    --surface-a: var(--surface-card);
-    --surface-b: var(--surface-ground);
-    --surface-c: var(--surface-hover);
-    --surface-d: var(--surface-border);
-    --surface-e: var(--surface-overlay);
-    --surface-f: var(--surface-card);
-
-    /* Surface scale — inverted in the dark scheme, as the v10 dark themes had it */
-    --surface-0: light-dark(#ffffff, #111827);
-    --surface-50: light-dark(#f9fafb, #1f2937);
-    --surface-100: light-dark(#f3f4f6, #374151);
-    --surface-200: light-dark(#e5e7eb, #4b5563);
-    --surface-300: light-dark(#d1d5db, #6b7280);
-    --surface-400: #9ca3af;
-    --surface-500: light-dark(#6b7280, #d1d5db);
-    --surface-600: light-dark(#4b5563, #e5e7eb);
-    --surface-700: light-dark(#374151, #f3f4f6);
-    --surface-800: light-dark(#1f2937, #f9fafb);
-    --surface-900: light-dark(#111827, #ffffff);
-
-    /* Primary scale */
-    --primary-50: light-dark(#f5f9ff, #f7fbff);
-    --primary-100: light-dark(#d0e1fd, #d9e9fe);
-    --primary-200: light-dark(#abc9fb, #bbd8fd);
-    --primary-300: light-dark(#85b2f9, #9cc7fc);
-    --primary-400: light-dark(#609af8, #7eb6fb);
-    --primary-500: light-dark(#3b82f6, #60a5fa);
-    --primary-600: light-dark(#326fd1, #528cd5);
-    --primary-700: light-dark(#295bac, #4374af);
-    --primary-800: light-dark(#204887, #355b8a);
-    --primary-900: light-dark(#183462, #264264);
-
-    /* Gray scale */
-    --gray-50: #f9fafb;
-    --gray-100: #f3f4f6;
-    --gray-200: #e5e7eb;
-    --gray-300: #d1d5db;
-    --gray-400: #9ca3af;
-    --gray-500: #6b7280;
-    --gray-600: #4b5563;
-    --gray-700: #374151;
-    --gray-800: #1f2937;
-    --gray-900: #111827;
-
-    /* Blue scale */
-    --blue-50: #f5f9ff;
-    --blue-100: #d0e1fd;
-    --blue-200: #abc9fb;
-    --blue-300: #85b2f9;
-    --blue-400: #609af8;
-    --blue-500: #3b82f6;
-    --blue-600: #326fd1;
-    --blue-700: #295bac;
-    --blue-800: #204887;
-    --blue-900: #183462;
-
-    /* Green scale */
-    --green-50: #f4fcf7;
-    --green-100: #caf1d8;
-    --green-200: #a0e6ba;
-    --green-300: #76db9b;
-    --green-400: #4cd07d;
-    --green-500: #22c55e;
-    --green-600: #1da750;
-    --green-700: #188a42;
-    --green-800: #136c34;
-    --green-900: #0e4f26;
-
-    /* Yellow scale */
-    --yellow-50: #fefbf3;
-    --yellow-100: #faedc4;
-    --yellow-200: #f6de95;
-    --yellow-300: #f2d066;
-    --yellow-400: #eec137;
-    --yellow-500: #eab308;
-    --yellow-600: #c79807;
-    --yellow-700: #a47d06;
-    --yellow-800: #816204;
-    --yellow-900: #5e4803;
-
-    /* Cyan scale */
-    --cyan-50: #f3fbfd;
-    --cyan-100: #c3edf5;
-    --cyan-200: #94e0ed;
-    --cyan-300: #65d2e4;
-    --cyan-400: #35c4dc;
-    --cyan-500: #06b6d4;
-    --cyan-600: #059bb4;
-    --cyan-700: #047f94;
-    --cyan-800: #036475;
-    --cyan-900: #024955;
-
-    /* Pink scale */
-    --pink-50: #fef6fa;
-    --pink-100: #fad3e7;
-    --pink-200: #f7b0d3;
-    --pink-300: #f38ec0;
-    --pink-400: #f06bac;
-    --pink-500: #ec4899;
-    --pink-600: #c93d82;
-    --pink-700: #a5326b;
-    --pink-800: #822854;
-    --pink-900: #5e1d3d;
-
-    /* Indigo scale */
-    --indigo-50: #f7f7fe;
-    --indigo-100: #dadafc;
-    --indigo-200: #bcbdf9;
-    --indigo-300: #9ea0f6;
-    --indigo-400: #8183f4;
-    --indigo-500: #6366f1;
-    --indigo-600: #5457cd;
-    --indigo-700: #4547a9;
-    --indigo-800: #363885;
-    --indigo-900: #282960;
-
-    /* Teal scale */
-    --teal-50: #f3fbfb;
-    --teal-100: #c7eeea;
-    --teal-200: #9ae0d9;
-    --teal-300: #6dd3c8;
-    --teal-400: #41c5b7;
-    --teal-500: #14b8a6;
-    --teal-600: #119c8d;
-    --teal-700: #0e8174;
-    --teal-800: #0b655b;
-    --teal-900: #084a42;
-
-    /* Orange scale */
-    --orange-50: #fff8f3;
-    --orange-100: #feddc7;
-    --orange-200: #fcc39b;
-    --orange-300: #fba86f;
-    --orange-400: #fa8e42;
-    --orange-500: #f97316;
-    --orange-600: #d46213;
-    --orange-700: #ae510f;
-    --orange-800: #893f0c;
-    --orange-900: #642e09;
-
-    /* Blue-gray scale */
-    --bluegray-50: #f7f8f9;
-    --bluegray-100: #dadee3;
-    --bluegray-200: #bcc3cd;
-    --bluegray-300: #9fa9b7;
-    --bluegray-400: #818ea1;
-    --bluegray-500: #64748b;
-    --bluegray-600: #556376;
-    --bluegray-700: #465161;
-    --bluegray-800: #37404c;
-    --bluegray-900: #282e38;
-
-    /* Purple scale */
-    --purple-50: #fbf7ff;
-    --purple-100: #ead6fd;
-    --purple-200: #dab6fc;
-    --purple-300: #c996fa;
-    --purple-400: #b975f9;
-    --purple-500: #a855f7;
-    --purple-600: #8f48d2;
-    --purple-700: #763cad;
-    --purple-800: #5c2f88;
-    --purple-900: #432263;
-
-    /* Red scale */
-    --red-50: #fff5f5;
-    --red-100: #ffd0ce;
-    --red-200: #ffaca7;
-    --red-300: #ff8780;
-    --red-400: #ff6259;
-    --red-500: #ff3d32;
-    --red-600: #d9342b;
-    --red-700: #b32b23;
-    --red-800: #8c221c;
-    --red-900: #661814;
-}
diff --git a/Source/scripts/copy-css.sh b/Source/scripts/copy-css.sh
index e4dfc21d..14a67838 100755
--- a/Source/scripts/copy-css.sh
+++ b/Source/scripts/copy-css.sh
@@ -13,7 +13,7 @@ set -euo pipefail
 
 mkdir -p dist/esm
 
-for stylesheet in tokens.css theme.css primereact-v10-palette.css; do
+for stylesheet in tokens.css theme.css; do
     cp "$stylesheet" "dist/esm/$stylesheet"
     echo "Copied $stylesheet"
 done
diff --git a/Source/theme.css b/Source/theme.css
index 89d18982..b4e3baf4 100644
--- a/Source/theme.css
+++ b/Source/theme.css
@@ -1,79 +1,48 @@
 /* Copyright (c) Cratis. All rights reserved. */
 /* Licensed under the MIT license. See LICENSE file in the project root for full license information. */
 
-/*
- * Cratis baseline theme — a token-based default look for the unstyled
- * PrimeReact 11 components, built entirely on the `--cratis-*` / `--surface-*`
- * token layer. It requires **no PrimeUI license** (unlike the styled
- * `@primeuix/themes` presets).
- *
- * Usage: run the components `unstyled`, `import '@cratis/components/theme'`, and
- * add `class="cratis-theme"` to an ancestor (e.g. <body> or your app root). The
- * rules are scoped under `.cratis-theme` so it can also theme a subtree.
- *
- * It intentionally styles all buttons as filled primary (the unstyled DOM
- * carries no variant/severity); component-owned CSS (ActionMenubar, paginator,
- * toast, tooltip, filter menu) refines specific button roles on top.
- */
-
-/* Concrete palette. The Cratis tokens normally resolve from a `@primeuix/themes`
-   preset's `--p-*` variables; with no preset (the license-free path) that chain
-   is empty, so the baseline theme supplies real colors here — deferring to a
-   preset's `--p-*` when one *is* present, and falling back to these otherwise. */
+/* Optional Cratis baseline values. Component structure lives in styles.css. */
 .cratis-theme {
-    /* Paint the base surface, not just the text color — so the theme is
-       self-contained on any host background. Applied to <body> it fills the
-       viewport; applied to a subtree (a documented use) it establishes the
-       themed backdrop instead of letting the dark text fall on whatever is
-       behind it. The surface token flips light/dark with the palette below. */
     color: var(--cratis-text-color);
-    background-color: var(--cratis-surface-section);
-
-    --cratis-primary-color:      var(--p-primary-color, #3b82f6);
-    --cratis-primary-color-text: var(--p-primary-contrast-color, #ffffff);
-    --cratis-primary-300:        var(--p-primary-300, #93c5fd);
-    --cratis-primary-400:        var(--p-primary-400, #60a5fa);
-    --cratis-primary-500:        var(--p-primary-500, #3b82f6);
-    --cratis-primary-600:        var(--p-primary-600, #2563eb);
-    --cratis-green-500:          var(--p-green-500, #22c55e);
-    --cratis-orange-500:         var(--p-orange-500, #f59e0b);
-    --cratis-red-500:            var(--p-red-500, #ef4444);
-
-    --cratis-surface-0:          var(--p-form-field-background, #ffffff);
-    --cratis-surface-100:        var(--p-content-hover-background, #f1f5f9);
-    --cratis-surface-section:    var(--p-surface-50, #f8fafc);
-    --cratis-surface-card:       var(--p-surface-0, #ffffff);
-    --cratis-surface-overlay:    var(--p-surface-0, #ffffff);
-    --cratis-surface-hover:      var(--p-surface-100, #f1f5f9);
-    --cratis-surface-border:     var(--p-surface-200, #e2e8f0);
-
-    --cratis-text-color:           var(--p-text-color, #1e293b);
-    --cratis-text-color-secondary: var(--p-text-muted-color, #475569);
-    --cratis-highlight-bg:         var(--p-highlight-background, #dbeafe);
-    --cratis-highlight-text-color: var(--p-highlight-color, #1e40af);
-    --cratis-maskbg:               rgba(0, 0, 0, 0.4);
-    --cratis-border-radius:        6px;
-
-    /* Arc component chrome. @cratis/arc.react's field wrappers, form errors, and
-       dialogs read this `--color-*` token family; map it onto the palette so the
-       baseline theme also themes the Arc surface (labels, borders, field errors),
-       not only the PrimeReact components. The chrome/text tokens reference the
-       `--cratis-*` vars so they flip automatically in dark; the semantic colors
-       are WCAG-AA-safe on the light surface and re-declared for dark below. */
-    --color-text:                 var(--cratis-text-color);
-    --color-text-secondary:       var(--cratis-text-color-secondary);
-    --color-text-muted:           var(--cratis-text-color-secondary);
-    --color-border:               var(--cratis-surface-border);
+    background-color: var(--cratis-surface-ground);
+
+    --cratis-primary-color: #3b82f6;
+    --cratis-primary-color-text: #ffffff;
+    --cratis-primary-300: #93c5fd;
+    --cratis-primary-400: #60a5fa;
+    --cratis-primary-500: #3b82f6;
+    --cratis-primary-600: #2563eb;
+    --cratis-green-500: #16a34a;
+    --cratis-orange-500: #d97706;
+    --cratis-red-500: #dc2626;
+
+    --cratis-surface-0: #ffffff;
+    --cratis-surface-100: #f1f5f9;
+    --cratis-surface-ground: #f8fafc;
+    --cratis-surface-section: #f8fafc;
+    --cratis-surface-card: #ffffff;
+    --cratis-surface-overlay: #ffffff;
+    --cratis-surface-hover: #f1f5f9;
+    --cratis-surface-border: #e2e8f0;
+
+    --cratis-text-color: #1e293b;
+    --cratis-text-color-secondary: #475569;
+    --cratis-highlight-bg: #dbeafe;
+    --cratis-highlight-text-color: #1e40af;
+    --cratis-maskbg: rgba(15, 23, 42, 0.45);
+    --cratis-border-radius: 6px;
+    --cratis-focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.35);
+
+    --color-text: var(--cratis-text-color);
+    --color-text-secondary: var(--cratis-text-color-secondary);
+    --color-text-muted: var(--cratis-text-color-secondary);
+    --color-border: var(--cratis-surface-border);
     --color-background-secondary: var(--cratis-surface-section);
-    --color-background-tertiary:  var(--cratis-surface-100);
-    --color-error:                #b91c1c;
-    --color-error-bg:             #fef2f2;
-    --color-success:              #15803d;
-    --color-warning:              #b45309;
-
-    /* Arc also reads these radius/spacing/font tokens (with no fallbacks of its
-       own); supply a scale so Arc chrome keeps its corners, padding, and gaps
-       under the baseline theme instead of collapsing to the initial value. */
+    --color-background-tertiary: var(--cratis-surface-100);
+    --color-error: #b91c1c;
+    --color-error-bg: #fef2f2;
+    --color-success: #15803d;
+    --color-warning: #b45309;
     --radius-sm: 4px;
     --radius-md: 6px;
     --radius-lg: 10px;
@@ -83,301 +52,47 @@
     --space-lg: 1.5rem;
     --space-xl: 2rem;
     --space-2xl: 3rem;
-    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
-
-    /* Concrete values for two tokens tokens.css leaves preset-only. Filter/
-       FilterPanel.css (shipped via @cratis/components/Filter) consumes both
-       without inline fallbacks, so with no preset the Filter panel would lose its
-       sub-surface backgrounds and focus rings. */
-    --cratis-surface-ground: var(--p-surface-50, #f8fafc);
-    --cratis-focus-ring:     0 0 0 0.2rem rgba(59, 130, 246, 0.45);
+    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
 }
 
-/* Dark palette — applied when the `cratis-dark` class is on an ancestor. */
 .cratis-dark .cratis-theme,
 .cratis-theme.cratis-dark {
-    --cratis-surface-0:       #1e293b;
-    --cratis-surface-100:     #334155;
+    --cratis-primary-color: #60a5fa;
+    --cratis-primary-color-text: #0f172a;
+    --cratis-surface-0: #1e293b;
+    --cratis-surface-100: #334155;
+    --cratis-surface-ground: #020617;
     --cratis-surface-section: #0f172a;
-    --cratis-surface-card:    #1e293b;
+    --cratis-surface-card: #1e293b;
     --cratis-surface-overlay: #1e293b;
-    --cratis-surface-hover:   #334155;
-    --cratis-surface-border:  #334155;
-
-    --cratis-text-color:           #f8fafc;
+    --cratis-surface-hover: #334155;
+    --cratis-surface-border: #475569;
+    --cratis-text-color: #f8fafc;
     --cratis-text-color-secondary: #cbd5e1;
-    --cratis-highlight-bg:         #1e3a8a;
+    --cratis-highlight-bg: #1e3a8a;
     --cratis-highlight-text-color: #ffffff;
-    --cratis-maskbg:               rgba(0, 0, 0, 0.6);
-    --cratis-surface-ground:       #020617;
-
-    /* Lighter semantic colors that stay AA-legible on the dark surface. The
-       chrome/text `--color-*` tokens follow the `--cratis-*` vars redefined
-       above, so only the concrete semantic colors are re-declared here. The
-       error-bg is deepened (red-950) so the #f87171 error text clears AA (~6.4:1)
-       on the exception banner, not just on the section surface. */
-    --color-error:    #f87171;
+    --cratis-maskbg: rgba(0, 0, 0, 0.65);
+    --color-error: #f87171;
     --color-error-bg: #450a0a;
-    --color-success:  #4ade80;
-    --color-warning:  #fbbf24;
-}
-
-/* ── Buttons ─────────────────────────────────────────────────────────────── */
-.cratis-theme [data-scope='button'] {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.5rem;
-    padding: 0.5rem 1rem;
-    border: 1px solid transparent;
-    border-radius: var(--cratis-border-radius, 6px);
-    /* A WCAG-AA-safe filled shade against the white label. */
-    background: #1d4ed8;
-    color: #fff;
-    font-weight: 500;
-    cursor: pointer;
-    transition: background-color 0.15s, opacity 0.15s;
-}
-.cratis-theme [data-scope='button']:not([disabled]):hover { background: #1e40af; }
-.cratis-theme [data-scope='button']:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--cratis-primary-300, var(--cratis-primary-color)); }
-.cratis-theme [data-scope='button'][disabled] { opacity: 0.5; cursor: not-allowed; }
-
-/* ── Text inputs ─────────────────────────────────────────────────────────── */
-.cratis-theme [data-scope='inputtext'],
-.cratis-theme [data-scope='textarea'],
-.cratis-theme [data-scope='inputnumber'][data-part='input'],
-.cratis-theme [data-scope='datepicker'][data-part='input'],
-.cratis-theme [data-scope='inputtags'][data-part='control'],
-.cratis-theme [data-scope='select'][data-part='root'] {
-    width: 100%;
-    padding: 0.5rem 0.75rem;
-    background: var(--cratis-surface-0);
-    color: var(--cratis-text-color);
-    border: 1px solid var(--cratis-surface-border);
-    border-radius: var(--cratis-border-radius, 6px);
-    box-sizing: border-box;
-}
-.cratis-theme [data-scope='textarea'] { resize: vertical; min-height: 4rem; }
-.cratis-theme [data-scope='select'][data-part='root'] {
-    display: inline-flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 0.5rem;
-    cursor: pointer;
-}
-.cratis-theme [data-scope='select'][data-part='value'] { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; }
-.cratis-theme [data-scope='select'][data-part='arrow'],
-.cratis-theme [data-scope='datepicker'][data-part='trigger'] { color: var(--cratis-text-color-secondary); }
-.cratis-theme [data-scope='inputtext']:focus-visible,
-.cratis-theme [data-scope='textarea']:focus-visible,
-.cratis-theme [data-scope='inputnumber'][data-part='input']:focus-visible {
-    outline: none;
-    border-color: var(--cratis-primary-color);
-    box-shadow: 0 0 0 2px var(--cratis-primary-300, transparent);
-}
-.cratis-theme [aria-invalid='true'],
-.cratis-theme [data-invalid] > [data-scope='inputtext'],
-.cratis-theme [data-scope='inputtext'][aria-invalid='true'] { border-color: var(--cratis-red-500); }
-
-/* ── Select / datepicker popup ───────────────────────────────────────────── */
-.cratis-theme [data-scope='select'][data-part='list'],
-.cratis-theme [data-scope='select'][data-part='popup'] {
-    background: var(--cratis-surface-overlay);
-    border: 1px solid var(--cratis-surface-border);
-    border-radius: var(--cratis-border-radius, 6px);
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
-    overflow: hidden;
-}
-.cratis-theme [data-scope='select'][data-part='option'] { padding: 0.5rem 0.75rem; cursor: pointer; }
-.cratis-theme [data-scope='select'][data-part='option']:hover,
-.cratis-theme [data-scope='select'][data-part='option'][data-selected] { background: var(--cratis-surface-hover); }
-
-/* ── Checkbox / radio ────────────────────────────────────────────────────── */
-.cratis-theme [data-scope='checkboxbox'],
-.cratis-theme [data-scope='radiobutton'][data-part='box'] {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 1.15rem;
-    height: 1.15rem;
-    background: var(--cratis-surface-0);
-    border: 1px solid var(--cratis-surface-border);
-    color: var(--cratis-primary-color-text);
-}
-.cratis-theme [data-scope='checkboxbox'] { border-radius: 4px; }
-.cratis-theme [data-scope='radiobutton'][data-part='box'] { border-radius: 50%; }
-.cratis-theme [data-scope='checkbox'][data-part='root'][data-checked] [data-scope='checkboxbox'],
-.cratis-theme [data-scope='radiobutton'][data-part='root'][data-checked] [data-part='box'] {
-    background: var(--cratis-primary-color);
-    border-color: var(--cratis-primary-color);
-}
-
-/* ── Toggle switch ───────────────────────────────────────────────────────── */
-.cratis-theme [data-scope='toggleswitch'][data-part='control'] {
-    display: inline-flex;
-    align-items: center;
-    width: 2.5rem;
-    height: 1.4rem;
-    padding: 0.15rem;
-    background: var(--cratis-surface-border);
-    border-radius: 999px;
-    transition: background-color 0.15s;
-}
-.cratis-theme [data-scope='toggleswitch'][data-part='root'][data-checked] [data-part='control'] { background: var(--cratis-primary-color); }
-.cratis-theme [data-scope='toggleswitch'][data-part='handle'] {
-    width: 1.1rem;
-    height: 1.1rem;
-    background: var(--cratis-surface-0);
-    border-radius: 50%;
-    transition: transform 0.15s;
+    --color-success: #4ade80;
+    --color-warning: #fbbf24;
 }
-.cratis-theme [data-scope='toggleswitch'][data-part='root'][data-checked] [data-part='handle'] { transform: translateX(1.1rem); }
 
-/* ── Slider ──────────────────────────────────────────────────────────────── */
-.cratis-theme [data-scope='slider'][data-part='track'] { height: 0.35rem; background: var(--cratis-surface-border); border-radius: 999px; }
-.cratis-theme [data-scope='slider'][data-part='range'] { height: 0.35rem; background: var(--cratis-primary-color); border-radius: 999px; }
-.cratis-theme [data-scope='slider'][data-part='handle'] { width: 1.1rem; height: 1.1rem; background: var(--cratis-primary-color); border-radius: 50%; }
-
-/* ── Dialog ──────────────────────────────────────────────────────────────── */
-/* PrimeReact 11 renders the backdrop and the positioner as siblings under the portal,
-   and leaves placing them to CSS: without these two rules the backdrop is a zero-height
-   block and the popup flows in after the page content, below the fold. The layout is
-   the one PrimeReact's own dialog style applies (`@primereact/styles/dialog`). */
-.cratis-theme [data-scope='dialog'][data-part='backdrop'],
-.cratis-theme [data-scope='dialog'][data-part='mask'] {
-    position: fixed;
-    inset: 0;
-    background: var(--cratis-maskbg, rgba(0, 0, 0, 0.5));
-}
-.cratis-theme [data-scope='dialog'][data-part='positioner'] {
-    position: fixed;
-    inset: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 2rem;
-    pointer-events: none;
-}
-.cratis-theme [data-scope='dialog'][data-part='positioner'][data-modal] { pointer-events: auto; }
-.cratis-theme [data-scope='dialog'][data-part='positioner'][data-position='top'] { align-items: flex-start; }
-.cratis-theme [data-scope='dialog'][data-part='positioner'][data-position='bottom'] { align-items: flex-end; }
-.cratis-theme [data-scope='dialog'][data-part='positioner'][data-position='left'] { justify-content: flex-start; }
-.cratis-theme [data-scope='dialog'][data-part='positioner'][data-position='right'] { justify-content: flex-end; }
-.cratis-theme [data-scope='dialog'][data-part='popup'] {
-    display: flex;
-    flex-direction: column;
-    max-height: 100%;
-    pointer-events: auto;
-    background: var(--cratis-surface-overlay);
-    color: var(--cratis-text-color);
-    border-radius: 0.75rem;
-    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
-    overflow: hidden;
-}
-.cratis-theme [data-scope='dialog'][data-part='header'] {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 1rem;
-    padding: 1rem 1.25rem;
-    border-bottom: 1px solid var(--cratis-surface-border);
-    font-weight: 600;
-}
-.cratis-theme [data-scope='dialog'][data-part='content'] { padding: 1.25rem; overflow-y: auto; }
-.cratis-theme [data-scope='dialog'][data-part='footer'] { padding: 1rem 1.25rem; border-top: 1px solid var(--cratis-surface-border); }
-.cratis-theme [data-scope='dialog'][data-part='close'] {
-    border: none; background: transparent; color: var(--cratis-text-color-secondary);
-    cursor: pointer; padding: 0.25rem; border-radius: 0.25rem;
-}
-.cratis-theme [data-scope='dialog'][data-part='close']:hover { color: var(--cratis-text-color); background: var(--cratis-surface-hover); }
-
-/* ── DataTable ───────────────────────────────────────────────────────────── */
-.cratis-theme [data-scope='datatable'][data-part='table'] { width: 100%; border-collapse: collapse; }
-.cratis-theme [data-scope='datatable'][data-part='thead'] { background: var(--cratis-surface-section); }
-.cratis-theme [data-scope='datatable'][data-part='theadcell'] {
-    padding: 0.625rem 0.75rem; text-align: left; font-weight: 600;
-    color: var(--cratis-text-color-secondary); border-bottom: 1px solid var(--cratis-surface-border);
-}
-.cratis-theme [data-scope='datatable'][data-part='cell'] { padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--cratis-surface-border); }
-.cratis-theme [data-scope='datatable'][data-part='row']:hover { background: var(--cratis-surface-hover); }
-.cratis-theme [data-scope='datatable'][data-part='row'][data-selected] { background: var(--cratis-highlight-bg); color: var(--cratis-highlight-text-color); }
-
-/* ── Tag / Badge ─────────────────────────────────────────────────────────── */
-.cratis-theme [data-scope='tag'] {
-    display: inline-flex; align-items: center; gap: 0.25rem;
-    padding: 0.15rem 0.5rem; border-radius: 4px; font-size: 0.8125rem; font-weight: 500;
-    background: var(--cratis-surface-hover); color: var(--cratis-text-color);
-}
-.cratis-theme [data-scope='badge'] {
-    display: inline-flex; align-items: center; justify-content: center;
-    min-width: 1.4rem; height: 1.4rem; padding: 0 0.4rem; border-radius: 999px;
-    font-size: 0.75rem; font-weight: 600; background: #1d4ed8; color: #fff;
-}
-/* Filled severity backgrounds use WCAG-AA-safe (darker) shades against white text. */
-.cratis-theme [data-severity='success'] { background: #15803d; color: #fff; }
-.cratis-theme [data-severity='info'] { background: #1d4ed8; color: #fff; }
-.cratis-theme [data-severity='warn'] { background: #b45309; color: #fff; }
-.cratis-theme [data-severity='danger'] { background: #b91c1c; color: #fff; }
-.cratis-theme [data-severity='secondary'] { background: var(--cratis-surface-hover); color: var(--cratis-text-color); }
-
-/* ── Chip / Avatar ───────────────────────────────────────────────────────── */
-.cratis-theme [data-scope='chip'][data-part='root'] {
-    display: inline-flex; align-items: center; gap: 0.375rem;
-    padding: 0.25rem 0.625rem; border-radius: 999px; background: var(--cratis-surface-hover); color: var(--cratis-text-color);
-}
-.cratis-theme [data-scope='chip'][data-part='remove'] { cursor: pointer; color: var(--cratis-text-color-secondary); }
-.cratis-theme [data-scope='avatar'][data-part='root'] {
-    display: inline-flex; align-items: center; justify-content: center;
-    width: 2.25rem; height: 2.25rem; border-radius: 50%; overflow: hidden;
-    background: var(--cratis-surface-hover); color: var(--cratis-text-color); font-weight: 600;
-}
-.cratis-theme [data-scope='avatar'][data-part='root'][data-size='large'] { width: 3rem; height: 3rem; }
-
-/* ── ProgressBar / Skeleton ──────────────────────────────────────────────── */
-.cratis-theme [data-scope='progressbar'][data-part='root'] {
-    height: 1.25rem; background: var(--cratis-surface-border); border-radius: 999px; overflow: hidden;
-}
-.cratis-theme [data-scope='progressbar'][data-part='indicator'] {
-    display: flex; align-items: center; justify-content: center; height: 100%;
-    background: #1d4ed8; color: #fff; font-size: 0.75rem;
-    transition: width 0.2s;
-}
-.cratis-theme [data-scope='skeleton'] {
-    display: block; background: var(--cratis-surface-hover); border-radius: 4px;
-    animation: cratis-skeleton-pulse 1.4s ease-in-out infinite;
+@media (prefers-color-scheme: dark) {
+    .cratis-theme:not(.cratis-light) {
+        color-scheme: dark;
+    }
 }
-@keyframes cratis-skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
 
-/* ── Stepper ─────────────────────────────────────────────────────────────── */
-.cratis-theme [data-scope='stepper'][data-part='number'] {
-    display: inline-flex; align-items: center; justify-content: center;
-    width: 1.75rem; height: 1.75rem; border-radius: 50%;
-    background: var(--cratis-surface-hover); color: var(--cratis-text-color); font-weight: 600;
-}
-.cratis-theme [data-scope='stepper'][data-part='step'][data-active] [data-part='number'] {
-    background: var(--cratis-primary-color); color: var(--cratis-primary-color-text);
-}
-.cratis-theme [data-scope='stepper'][data-part='separator'] { background: var(--cratis-surface-border); }
-.cratis-theme [data-scope='stepper'][data-part='header'] {
-    display: inline-flex; align-items: center; gap: 0.5rem; background: transparent; border: none; cursor: pointer; color: inherit;
-}
-
-/* ── Rating ──────────────────────────────────────────────────────────────── */
-.cratis-theme [data-scope='rating'][data-part='root'] { display: inline-flex; gap: 0.25rem; }
-.cratis-theme [data-scope='rating'] .pi { font-size: 1.25rem; cursor: pointer; }
-.cratis-theme [data-scope='rating'] .pi-star { color: var(--cratis-surface-border); }
-.cratis-theme [data-scope='rating'] .pi-star-fill { color: var(--cratis-orange-500, #f59e0b); }
-
-/* ── ProgressSpinner (BusyIndicatorDialog) ───────────────────────────────────
-   The unstyled primitive is a bare SVG circle with no stroke or motion; give it
-   a visible ring and spin it so the busy indicator actually shows. */
-.cratis-theme [data-scope='progressspinner'][data-part='root'] {
-    display: inline-block; width: 2.5rem; height: 2.5rem;
-    animation: cratis-spin 1s linear infinite;
-}
-.cratis-theme [data-scope='progressspinner'] svg { width: 100%; height: 100%; }
-.cratis-theme [data-scope='progressspinner'] circle {
-    fill: none; stroke: var(--cratis-primary-color, #3b82f6); stroke-width: 4;
-    stroke-linecap: round; stroke-dasharray: 80 200;
+@media (forced-colors: active) {
+    .cratis-theme {
+        --cratis-primary-color: Highlight;
+        --cratis-primary-color-text: HighlightText;
+        --cratis-surface-card: Canvas;
+        --cratis-surface-overlay: Canvas;
+        --cratis-surface-border: CanvasText;
+        --cratis-text-color: CanvasText;
+        --cratis-text-color-secondary: CanvasText;
+        --cratis-focus-ring: 0 0 0 2px Highlight;
+    }
 }
-@keyframes cratis-spin { to { transform: rotate(360deg); } }
diff --git a/Source/tokens.css b/Source/tokens.css
index ed0dbaea..4c01bc1c 100644
--- a/Source/tokens.css
+++ b/Source/tokens.css
@@ -2,109 +2,38 @@
 /* Licensed under the MIT license. See LICENSE file in the project root for full license information. */
 
 /*
- * Cratis Components — CSS variable tokens.
- *
- * Every internal component references the --cratis-* variables defined here
- * instead of PrimeReact's theme variables directly. This indirection is the
- * single seam that lets the library span PrimeReact major versions — and 3.0.0
- * is the release that seam was built for.
- *
- *   --cratis-surface-border: var(--p-content-border-color, var(--surface-border));
- *                                  ^ PrimeReact v11 (@primeuix/themes)  ^ v10 legacy
- *
- * Each token resolves the v11 design token first and falls back to the legacy v10
- * theme variable. @cratis/components 3.0.0 requires `primereact@^11` as a peer, so
- * the v11 arm is the one that resolves in a correctly installed app; the v10 arm is
- * kept deliberately for the upgrade window, when an app still has a compiled v10
- * theme stylesheet on the page while it ports its own screens. Nothing breaks the
- * day that stylesheet is removed — the v11 arm was already winning.
- *
- * ## Where the values now come from
- *
- * v11 ships ZERO CSS. There is no `primereact/resources/themes/*.css` to import any
- * more. The --p-* custom properties are emitted **at runtime** by @primeuix/styled
- * when a preset (a plain JS token object from @primeuix/themes — Aura, Lara, Nora)
- * is handed to the provider - which `styledMode()` from `@cratis/components/styled`
- * does, together with PrimeReact's own component styles for every primitive (a
- * preset alone leaves the primitives without their `p-*` classes):
- *
- *   import { styledMode } from '@cratis/components/styled';
- *   <CratisComponentsProvider value={{ license, ...styledMode() }}>
- *
- * So the chain is: preset (JS) → --p-* (runtime) → --cratis-* (this file) → component CSS.
- *
- * v11 is not a rename of v10 — it is a different token vocabulary (a primitive
- * palette plus semantic content/surface/text/primary/highlight tokens). Where
- * v11 has no 1:1 equivalent for a v10 concept (surface-ground / surface-section
- * / surface-overlay / the composite focus-ring), the closest durable v11
- * semantic token is used and noted inline; consumers can always override.
- *
- * ## Three ways to get a look
- *
- * 1. **Styled mode** — `value={{ license, ...styledMode() }}` from
- *    `@cratis/components/styled`: a preset plus PrimeReact's component styles.
- * 2. **The Cratis baseline theme** — `import '@cratis/components/theme'`. A stylesheet
- *    that assigns the --cratis-* tokens directly (light and dark), so it needs no preset
- *    and no @primeuix/themes install. It defers to a preset's --p-* values when one is
- *    present.
- * 3. **Your own tokens** — override any --cratis-* on :root (or any ancestor):
- *
- *   :root {
- *       --cratis-surface-card: #1f2937;
- *       --cratis-text-color:   #f3f4f6;
- *   }
- *
- * Tokens are intentionally fallback-free at the end of the chain — if neither a
- * PrimeReact theme (v10 or v11), the baseline theme, nor a consumer override is
- * present, the variable resolves to nothing and the affected rule no-ops. That keeps
- * the library theme-agnostic without imposing a default palette on consumers.
+ * Stable semantic seam between Components structure and product design systems.
+ * The optional theme.css supplies concrete values; products may define these
+ * variables directly or map them onto an existing token family.
  */
-
 :root {
-    /* Surfaces */
-    /* v10's surface scale ran from the page tone (0) up through raised surfaces (100, 200, …)
-     * and inverted in its dark themes, so surface-0 was the darkest tone there. v11's
-     * --p-surface-N is a plain palette that is white at 0 in both schemes, so it cannot stand
-     * in. The two are read here as what they were used for: the tone underneath a form field
-     * and the tone of a raised or hovered surface, which v11 names semantically. */
-    --cratis-surface-0:        var(--p-form-field-background, var(--surface-0));
-    --cratis-surface-100:      var(--p-content-hover-background, var(--surface-100));
-    /* v11 has no page-canvas/section token — map to the neutral content surface;
-     * separation in v11 comes from borders (content-border-color), not fills. */
-    --cratis-surface-ground:   var(--p-content-background, var(--surface-ground));
-    --cratis-surface-section:  var(--p-content-hover-background, var(--surface-section));
-    --cratis-surface-card:     var(--p-content-background, var(--surface-card));
-    /* v11 splits overlay backgrounds by type — use the modal surface as the general overlay. */
-    --cratis-surface-overlay:  var(--p-overlay-modal-background, var(--surface-overlay));
-    --cratis-surface-hover:    var(--p-content-hover-background, var(--surface-hover));
-    --cratis-surface-border:   var(--p-content-border-color, var(--surface-border));
-
-    /* Text */
-    --cratis-text-color:           var(--p-text-color, var(--text-color));
-    --cratis-text-color-secondary: var(--p-text-muted-color, var(--text-color-secondary));
-
-    /* Primary brand */
-    --cratis-primary-color:      var(--p-primary-color, var(--primary-color));
-    --cratis-primary-color-text: var(--p-primary-contrast-color, var(--primary-color-text));
-    --cratis-primary-300:        var(--p-primary-300, var(--primary-300));
-    --cratis-primary-400:        var(--p-primary-400, var(--primary-400));
-    --cratis-primary-500:        var(--p-primary-500, var(--primary-500));
-    --cratis-primary-600:        var(--p-primary-600, var(--primary-600));
-
-    /* Highlight / selection */
-    --cratis-highlight-bg:         var(--p-highlight-background, var(--highlight-bg));
-    --cratis-highlight-text-color: var(--p-highlight-color, var(--highlight-text-color));
-
-    /* Semantic accents (primitive palette) */
-    --cratis-green-500:  var(--p-green-500, var(--green-500));
-    --cratis-orange-500: var(--p-orange-500, var(--orange-500));
-    --cratis-red-500:    var(--p-red-500, var(--red-500));
-
-    /* Geometry */
-    --cratis-border-radius: var(--p-content-border-radius, var(--border-radius));
-
-    /* Effects */
-    /* v11 decomposes the focus ring; --p-focus-ring-shadow is the box-shadow form. */
-    --cratis-focus-ring: var(--p-focus-ring-shadow, var(--focus-ring));
-    --cratis-maskbg:     var(--p-mask-background, var(--maskbg));
+    --cratis-surface-0: var(--surface-0, #ffffff);
+    --cratis-surface-100: var(--surface-100, #f1f5f9);
+    --cratis-surface-ground: var(--surface-ground, #f8fafc);
+    --cratis-surface-section: var(--surface-section, #f8fafc);
+    --cratis-surface-card: var(--surface-card, #ffffff);
+    --cratis-surface-overlay: var(--surface-overlay, #ffffff);
+    --cratis-surface-hover: var(--surface-hover, #f1f5f9);
+    --cratis-surface-border: var(--surface-border, #e2e8f0);
+
+    --cratis-text-color: var(--text-color, #1e293b);
+    --cratis-text-color-secondary: var(--text-color-secondary, #475569);
+
+    --cratis-primary-color: var(--primary-color, #3b82f6);
+    --cratis-primary-color-text: var(--primary-color-text, #ffffff);
+    --cratis-primary-300: var(--primary-300, #93c5fd);
+    --cratis-primary-400: var(--primary-400, #60a5fa);
+    --cratis-primary-500: var(--primary-500, #3b82f6);
+    --cratis-primary-600: var(--primary-600, #2563eb);
+
+    --cratis-highlight-bg: var(--highlight-bg, #dbeafe);
+    --cratis-highlight-text-color: var(--highlight-text-color, #1e40af);
+
+    --cratis-green-500: var(--green-500, #16a34a);
+    --cratis-orange-500: var(--orange-500, #d97706);
+    --cratis-red-500: var(--red-500, #dc2626);
+
+    --cratis-border-radius: var(--border-radius, 6px);
+    --cratis-focus-ring: var(--focus-ring, 0 0 0 3px rgba(59, 130, 246, 0.35));
+    --cratis-maskbg: var(--maskbg, rgba(15, 23, 42, 0.45));
 }
diff --git a/Source/tsconfig.json b/Source/tsconfig.json
index c41545af..4e5f9fad 100644
--- a/Source/tsconfig.json
+++ b/Source/tsconfig.json
@@ -14,6 +14,9 @@
     "exclude": [
         "dist",
         "**/for_*/**",
+        "**/*.stories.ts",
+        "**/*.stories.tsx",
+        ".storybook/**",
         "vite.config.mts",
         "node_modules",
         "../node_modules"
diff --git a/rollup.config.mjs b/rollup.config.mjs
index a00e902b..89f2ff3b 100644
--- a/rollup.config.mjs
+++ b/rollup.config.mjs
@@ -4,12 +4,12 @@
 import typescript from '@rollup/plugin-typescript';
 import { nodeResolve } from '@rollup/plugin-node-resolve';
 import peerDepsExternal from 'rollup-plugin-peer-deps-external';
-import { existsSync, readdirSync, readFileSync, writeFileSync, mkdirSync } from 'fs';
+import { readdirSync, readFileSync, writeFileSync, mkdirSync } from 'fs';
 import { dirname, join, relative, resolve } from 'path';
 import { createRequire } from 'module';
 
 /** Stylesheets that are entry points or token layers in their own right, not component rules. */
-const STANDALONE_STYLESHEETS = new Set(['tailwind.css', 'tailwind-utilities.css', 'tokens.css', 'theme.css', 'primereact-v10-palette.css', 'styles.css']);
+const STANDALONE_STYLESHEETS = new Set(['tailwind.css', 'tailwind-utilities.css', 'tokens.css', 'theme.css', 'styles.css']);
 
 /** Directories that never hold shipped component CSS. */
 const NON_SOURCE_DIRECTORIES = new Set(['node_modules', 'dist', 'storybook-static', '.storybook', 'wwwroot']);
@@ -123,8 +123,7 @@ function bundleStyles(sourceDir, esmPath) {
 
 /**
  * Rollup plugin to generate the package.json in the ESM output directory,
- * marking it as an ES module. PrimeReact 11 is ESM-only, so the package ships
- * a single ESM build — there is no CJS output.
+ * marking it as an ES module. The package ships a single ESM build.
  */
 function generatePackageJson(esmPath) {
     return {
@@ -143,19 +142,10 @@ function generatePackageJson(esmPath) {
     };
 }
 
-/**
- * Entry points that are deliberately NOT reachable from `index.ts`. The root re-exports every
- * component namespace, so anything imported there lands in every consumer's graph — and the
- * styled-mode entry pulls in `@primereact/styles` and `@primeuix/themes`, which are optional
- * peers a consumer that runs unstyled never installs. Listing them here gives them their own
- * bundle without touching the root.
- */
-const STANDALONE_ENTRIES = ['Styled/index.ts'];
-
 export function rollup(esmPath, tsconfigPath, pkg) {
     const sourceDir = dirname(tsconfigPath);
     return {
-        input: ['index.ts', ...STANDALONE_ENTRIES.filter((entry) => existsSync(resolve(sourceDir, entry)))],
+        input: ['index.ts'],
 
         output: [
             {
@@ -172,10 +162,8 @@ export function rollup(esmPath, tsconfigPath, pkg) {
             ...Object.keys(pkg.peerDependencies || {}),
             /^@cratis\/components/,
             /^@cratis\/arc/,
-            /^primereact\//,
-            /^@primereact\//,
-            /^@primeuix\//,
-            /^primeicons/,
+            /^react-aria-components(?:\/|$)/,
+            /^@internationalized\/date(?:\/|$)/,
             /^react-icons\//,
             /\.css$/,
             'react',

From 31f259759623c43a883b826eefc2c6685362d62b Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Sun, 23 Aug 2026 12:54:14 +0200
Subject: [PATCH 011/267] Add the Components 4 migration guides

---
 .ai/rules/components.md                       |  35 +-
 .ai/skills/cratis-react-page/SKILL.md         |   6 +-
 Documentation/CommandDialog/index.md          |   4 +-
 Documentation/CommandForm/calendar-field.md   |   6 +-
 Documentation/CommandForm/checkbox-field.md   |   4 +-
 Documentation/CommandForm/chips-field.md      |   6 +-
 .../CommandForm/color-picker-field.md         |   4 +-
 Documentation/CommandForm/dropdown-field.md   |   4 +-
 Documentation/CommandForm/index.md            |   2 +-
 Documentation/CommandForm/input-text-field.md |   4 +-
 .../CommandForm/multi-select-field.md         |   6 +-
 Documentation/CommandForm/number-field.md     |   4 +-
 Documentation/CommandForm/password-field.md   |  10 +-
 .../CommandForm/radio-button-field.md         |   4 +-
 .../CommandForm/radio-group-field.md          |   4 +-
 Documentation/CommandForm/rating-field.md     |  10 +-
 Documentation/CommandForm/slider-field.md     |   2 +-
 Documentation/CommandForm/text-area-field.md  |   4 +-
 .../CommandForm/toggle-switch-field.md        |  10 +-
 Documentation/CommandStepper/index.md         |   2 +-
 .../Common/cratis-components-provider.md      | 174 +++----
 Documentation/Common/form-element.md          | 133 +-----
 Documentation/Common/index.md                 |   6 +-
 Documentation/DataPage/index.md               |   2 +-
 Documentation/DataPage/menu-items.md          |   4 +-
 .../DataTables/column-configuration.md        | 369 ++-------------
 .../data-table-for-observable-query.md        |   4 +-
 .../DataTables/data-table-for-query.md        |   4 +-
 Documentation/DataTables/index.md             |   2 +-
 .../Dialogs/busy-indicator-dialog.md          |   2 +-
 Documentation/Dialogs/dialog.md               |   6 +-
 Documentation/Dropdown/index.md               | 446 ++----------------
 Documentation/Notifications/index.md          | 139 ++----
 Documentation/ObjectNavigationalBar/index.md  |   2 +-
 Documentation/StepperCommandDialog/index.md   |  14 +-
 Documentation/Styling/baseline-theme.md       |  61 +--
 Documentation/Styling/cratis-tokens.md        | 205 ++------
 Documentation/Styling/custom-palette.md       | 165 +------
 Documentation/Styling/getting-started.md      |  75 +--
 Documentation/Styling/index.md                |  97 +---
 Documentation/Styling/mixing-paths.md         | 149 +-----
 Documentation/Styling/pass-through.md         | 223 ++-------
 Documentation/Styling/themed.md               | 174 ++-----
 Documentation/Styling/toc.yml                 |  10 +-
 Documentation/Styling/unstyled.md             | 336 ++-----------
 Documentation/building-a-form.md              |   2 +-
 Documentation/choosing-a-component.md         |   2 +-
 Documentation/coming-from-primereact.md       | 209 +-------
 Documentation/getting-started.mdx             | 125 ++---
 Documentation/index.mdx                       |  98 ++--
 Documentation/migration-from-2.md             | 248 ++++++++++
 Documentation/migration.md                    | 358 +++++++-------
 Documentation/toc.yml                         |   6 +-
 Documentation/tutorial/act-on-it.mdx          |   4 +-
 Documentation/tutorial/list-it.mdx            |   2 +-
 Documentation/ui-foundation.md                |   2 +-
 Documentation/why-components.md               |  52 +-
 57 files changed, 1136 insertions(+), 2905 deletions(-)
 create mode 100644 Documentation/migration-from-2.md

diff --git a/.ai/rules/components.md b/.ai/rules/components.md
index 8a5b3418..1cea4647 100644
--- a/.ai/rules/components.md
+++ b/.ai/rules/components.md
@@ -9,7 +9,7 @@ profile: application
 
 ## Cratis Components — pick the wrapper, import from subpaths
 
-Reach PrimeReact almost exclusively through Cratis Components wrappers. Import from **subpaths**, not the root barrel (the barrel pulls optional-peer-heavy exports):
+Use Cratis Components for shared application behavior and import from subpaths. Components owns its markup, tokens, parts, and accessibility contract; do not import a second UI kit for surfaces Components already provides:
 
 | Need                     | Use                                                                      | Subpath                            |
 | ------------------------ | ------------------------------------------------------------------------ | ---------------------------------- |
@@ -26,7 +26,7 @@ Reach PrimeReact almost exclusively through Cratis Components wrappers. Import f
 | Status & display         | `Tag` / `Badge` / `Chip` / `Skeleton` / `Avatar` / `ProgressBar`         | `@cratis/components/Display`       |
 | Canvas tool palette      | `Toolbar`                                                                | `@cratis/components/Toolbar`       |
 
-Use `Dropdown` from `@cratis/components/Dropdown` (not raw `primereact/dropdown`) — it appends to the document body and stacks correctly above overlays, avoiding the z-index issues raw PrimeReact dropdowns have inside dialogs.
+Use `Dropdown` from `@cratis/components/Dropdown`; its popup is portaled outside dialog clipping contexts and exposes stable Cratis-owned parts.
 
 ### Notifications — feedback for commands run outside a dialog
 
@@ -54,7 +54,7 @@ indicators and loading states in tables and detail views.
 
 ### `DataPage` — query list pages
 
-`DataPage` (from `@cratis/components/DataPage`) owns the data table's subscription, paging, selection, action menubar, and details split — **do not pre-fetch rows and pass an `items` array**. Required props: `title`, `query` (`Constructor<TQuery>`; snapshot and observable queries are auto-detected), `emptyMessage`, and `children`. Other props: `queryArguments`, `dataKey` (pass whenever the read model has an identity), `selection` / `onSelectionChange`, `globalFilterFields` / `defaultFilters`, `detailsComponent` (`React.FC<IDetailsComponentProps<T>>` = `{ item, onRefresh? }`), `onRefresh`, and PrimeReact pass-through `tablePt`/`tableClassName`/`menubarPt`/`menubarClassName`.
+`DataPage` (from `@cratis/components/DataPage`) owns the data table's subscription, paging, selection, action menubar, and details split — **do not pre-fetch rows and pass an `items` array**. Required props: `title`, `query` (`Constructor<TQuery>`; snapshot and observable queries are auto-detected), `emptyMessage`, and `children`. Other props: `queryArguments`, `dataKey` (pass whenever the read model has an identity), `selection` / `onSelectionChange`, `globalFilterFields` / `defaultFilters`, `detailsComponent` (`React.FC<IDetailsComponentProps<T>>` = `{ item, onRefresh? }`), `onRefresh`, and Cratis-owned `tablePt`/`tableClassName`/`menubarPt`/`menubarClassName` styling parts.
 
 Columns and toolbar actions are compositional children:
 
@@ -71,7 +71,7 @@ import { DataPage, MenuItem, Column } from '@cratis/components/DataPage';
 </DataPage>;
 ```
 
-`MenuItem` is a PrimeReact menu item (use `command`, not `onClick`); `disableOnUnselected` greys it out until a row is selected. See the **cratis-react-page** skill for the full page workflow.
+`MenuItem` is a Cratis-owned action marker (use `command`, not `onClick`); `disableOnUnselected` greys it out until a row is selected. See the **cratis-react-page** skill for the full page workflow.
 
 ## Composition over Monoliths
 
@@ -100,22 +100,19 @@ Add an `index.ts` that re-exports the public surface so import paths stay stable
 
 ## Styling
 
-Consistent styling comes from discipline: static styles in CSS files, dynamic values inline, and colors always from PrimeReact's design tokens. This ensures theming works automatically and no component breaks the visual language.
+Consistent styling comes from discipline: static styles in CSS files, dynamic values inline, and colors always from Cratis or product semantic tokens.
 
 ### App setup — the imports Cratis Components needs
 
-From `@cratis/components` **3.0.0** (PrimeReact 11), an app must do two things or the components render unstyled and PrimeReact may end up with two React contexts:
+Install `@cratis/components`, then import the Cratis-owned layers in order:
 
-1. **Install PrimeReact yourself** — it is a **peer dependency**, not bundled: `primereact@^11`, `@primereact/core@^11`, `@primereact/headless@^11`, `primeicons@^8`. Two copies of PrimeReact means two `PrimeReactProvider` contexts, which breaks overlays and `pt` silently. Delete any `resolutions`/`overrides` pin that used to work around this.
-2. **Import the stylesheets explicitly**, in this order — components no longer import their own CSS:
-
-    ```ts
-    import '@cratis/components/tokens'; // the --cratis-* layer every component reads
-    import '@cratis/components/styles'; // every component stylesheet, in one file
-    import '@cratis/components/theme'; // optional: the license-free baseline look
-    ```
+```ts
+import '@cratis/components/tokens';
+import '@cratis/components/styles';
+import '@cratis/components/theme'; // optional baseline values
+```
 
-PrimeReact 11 ships **zero CSS** — there is no `primereact/resources/themes/*.css`. A styled look comes from a `@primeuix/themes` preset passed through the provider (`value={{ theme: { preset: Aura } }}`, license-gated), from `@cratis/components/theme` (no license), or from your own `pt`/CSS.
+A custom product omits `theme`, maps product values onto `--cratis-*`, and uses stable `data-cratis-part` / typed `pt` attributes. React Aria is internal and must not appear in consumer styling or public types.
 
 ### Writing styles inside the library
 
@@ -123,9 +120,9 @@ PrimeReact 11 ships **zero CSS** — there is no `primereact/resources/themes/*.
 - Each component must have its own CSS file — never add sub-component styles to the parent's CSS. This keeps styles co-located with the component they belong to.
 - The composition root's CSS only contains layout/grid rules for positioning children — it should not style the children themselves.
 - Use inline `style` props **only** for runtime-dynamic values (pixel positions, computed sizes).
-- Use **PrimeReact CSS variables** for all colors, backgrounds, borders. This ensures the application respects theming and dark/light mode switches:
-    - `var(--surface-0)` through `var(--surface-900)`, `var(--surface-card)`, `var(--surface-border)`, `var(--surface-ground)`
-    - `var(--text-color)`, `var(--text-color-secondary)`, `var(--primary-color)`, `var(--primary-color-text)`, `var(--highlight-bg)`
+- Use **Cratis or product semantic CSS variables** for colors, backgrounds, borders, focus, spacing, and motion:
+    - `var(--cratis-surface-card)`, `var(--cratis-surface-overlay)`, `var(--cratis-surface-border)`
+    - `var(--cratis-text-color)`, `var(--cratis-text-color-secondary)`, `var(--cratis-primary-color)`, `var(--cratis-focus-ring)`
     - Never hard-code hex or `rgb()` for UI chrome — it will break when themes change. Only hard-code colors that are intentionally theme-independent (e.g. brand-specific accent dots, traffic-light indicators).
 - Name CSS classes with a BEM-like prefix matching the component name.
 
@@ -141,7 +138,7 @@ Props are a component's public API. They should be clear, minimal, and well-docu
 
 See [dialogs.md](./dialogs.md) for the full dialog guide.
 
-**Summary:** Never import `Dialog` from `primereact/dialog`. Use `CommandDialog` from `@cratis/components/CommandDialog` for command-executing dialogs and `Dialog` from `@cratis/components/Dialogs` for data-collection dialogs. Do not render manual `<Button>` components for dialog actions — the dialog components handle footers.
+**Summary:** Use `CommandDialog` from `@cratis/components/CommandDialog` for command-executing dialogs and `Dialog` from `@cratis/components/Dialogs` for data-collection dialogs. Do not render manual `<Button>` components for dialog actions — the dialog components handle footers.
 
 ## Icons
 
diff --git a/.ai/skills/cratis-react-page/SKILL.md b/.ai/skills/cratis-react-page/SKILL.md
index 5711ee04..ad31a316 100644
--- a/.ai/skills/cratis-react-page/SKILL.md
+++ b/.ai/skills/cratis-react-page/SKILL.md
@@ -23,7 +23,7 @@ import { useDialog, DialogProps } from '@cratis/arc.react/dialogs';
 
 ### Step 2 — Basic DataPage setup
 
-`DataPage` combines a toolbar/menu, a data table, and an optional details component. `title`, `query`, `emptyMessage`, and `children` are required; columns are declared compositionally inside `<DataPage.Columns>` using PrimeReact `<Column>`.
+`DataPage` combines a toolbar/menu, a data table, and an optional details component. `title`, `query`, `emptyMessage`, and `children` are required; columns are declared compositionally inside `<DataPage.Columns>` using the Cratis-owned `<Column>` marker.
 
 ```tsx
 import { DataPage } from '@cratis/components/DataPage';
@@ -44,7 +44,7 @@ export const AccountsPage = () => (
 
 ### Step 3 — Add menu actions
 
-Toolbar actions go in `<DataPage.MenuItems>`. `MenuItem` is a PrimeReact menu item (use `command`, not `onClick`); the `disableOnUnselected` flag greys it out until a row is selected. Create a separate dialog component using `DialogProps`, then wire it up with `useDialog`.
+Toolbar actions go in `<DataPage.MenuItems>`. `MenuItem` is a Cratis-owned action marker (use `command`, not `onClick`); the `disableOnUnselected` flag greys it out until a row is selected. Create a separate dialog component using `DialogProps`, then wire it up with `useDialog`.
 
 **Dialog component (`CreateAccountDialog.tsx`):**
 
@@ -257,4 +257,4 @@ Read `viewModel.property` inside JSX (never destructure observables at the top o
 | `detailsComponent`                      | `React.FC<IDetailsComponentProps<T>>` rendered for the selected row |
 | `globalFilterFields` / `defaultFilters` | filtering                                                           |
 | `onRefresh`                             | invoked to re-fetch a standard query                                |
-| `tablePt` / `menubarPt` / `*Unstyled`   | PrimeReact pass-through styling                                     |
+| `tablePt` / `menubarPt`                 | Cratis-owned stable part styling                                     |
diff --git a/Documentation/CommandDialog/index.md b/Documentation/CommandDialog/index.md
index 5b333344..a704d909 100644
--- a/Documentation/CommandDialog/index.md
+++ b/Documentation/CommandDialog/index.md
@@ -105,7 +105,7 @@ function MyComponent() {
 - `yesLabel`, `noLabel`: Labels for `YesNo` and `YesNoCancel` button modes
 - `buttons`: `DialogButtons` value or custom footer content
 - `initialFocus`: Where keyboard focus lands when the dialog opens — forwarded to `Dialog` (see below)
-- `resizable`: Accepted but a no-op in PrimeReact 11 — the headless dialog has no built-in resize handle
+- `resizable`: Accepted for source compatibility; the viewport-bounded Cratis dialog has no resize handle
 - `isValid`: Additional validity gate combined with command form validity
 - `onFieldValidate`: Custom validation function for fields
 - `onFieldChange`: Callback when field values change
@@ -187,7 +187,7 @@ CommandDialog integrates with:
 
 - `@cratis/arc/commands` for command execution
 - `@cratis/arc.react/commands` for form handling
-- PrimeReact Dialog component for UI
+- React Aria modal/focus behavior behind Cratis-owned markup
 
 ## See Also
 
diff --git a/Documentation/CommandForm/calendar-field.md b/Documentation/CommandForm/calendar-field.md
index e95d9802..21532f61 100644
--- a/Documentation/CommandForm/calendar-field.md
+++ b/Documentation/CommandForm/calendar-field.md
@@ -1,6 +1,6 @@
 # CalendarField
 
-`CalendarField` wraps the PrimeReact `Calendar` component for selecting date values.
+`CalendarField` wraps the internationalized Cratis `DatePickerInput` while preserving a `Date | null` command value.
 
 ## Usage
 
@@ -24,7 +24,7 @@ import { CalendarField } from '@cratis/components/CommandForm';
 |------|------|---------|-------------|
 | `value` | `(instance: TCommand) => unknown` | - | **Required.** Accessor function that returns the bound property from the command instance. Pass the command type as the generic parameter for full type safety. |
 | `placeholder` | `string` | - | Placeholder text shown when no date is selected. |
-| `dateFormat` | `string` | PrimeReact default | Date display and parsing format used by the calendar input. |
+| `dateFormat` | `string` | — | Legacy mask retained for source compatibility; locale controls formatting. |
 | `showIcon` | `boolean` | `false` | Displays a calendar icon button next to the input. |
 | `showTime` | `boolean` | `false` | Enables time selection in addition to date selection. |
 | `hourFormat` | `'12' \| '24'` | `24` | Hour format when `showTime` is enabled. |
@@ -35,4 +35,4 @@ import { CalendarField } from '@cratis/components/CommandForm';
 
 - Default value is `null`.
 - The field spans full width within its container.
-- Validation state is reflected via the PrimeReact `invalid` flag.
+- Validation state is reflected through `aria-invalid` and `data-invalid`.
diff --git a/Documentation/CommandForm/checkbox-field.md b/Documentation/CommandForm/checkbox-field.md
index 2e481d40..610de7b9 100644
--- a/Documentation/CommandForm/checkbox-field.md
+++ b/Documentation/CommandForm/checkbox-field.md
@@ -1,6 +1,6 @@
 # CheckboxField
 
-`CheckboxField` provides a boolean toggle backed by the PrimeReact `Checkbox` component.
+`CheckboxField` provides a Cratis-owned native boolean checkbox.
 
 ## Usage
 
@@ -24,5 +24,5 @@ import { CheckboxField } from '@cratis/components/CommandForm';
 ## Behavior
 
 - Default value is `false`.
-- Validation state is reflected via the PrimeReact `invalid` flag on the checkbox.
+- Validation state is reflected through `aria-invalid` and `data-invalid`.
 
diff --git a/Documentation/CommandForm/chips-field.md b/Documentation/CommandForm/chips-field.md
index bf2d5bfe..f56c5590 100644
--- a/Documentation/CommandForm/chips-field.md
+++ b/Documentation/CommandForm/chips-field.md
@@ -1,6 +1,6 @@
 # ChipsField
 
-`ChipsField` wraps the PrimeReact `InputTags` component (`primereact/inputtags` — v10's `Chips`) for collecting multiple text values in a single field.
+`ChipsField` renders a Cratis-owned token input for collecting multiple text values.
 
 ## Usage
 
@@ -35,7 +35,7 @@ import { ChipsField } from '@cratis/components/CommandForm';
 
 - Default value is an empty array.
 - The field spans full width within its container.
-- Validation state is reflected via the PrimeReact `invalid` flag.
+- Validation state is reflected through `aria-invalid` and `data-invalid`.
 
 > [!IMPORTANT]
-> **`separator` no longer does anything.** PrimeReact 11's `InputTags` commits one tag per Enter and does not auto-split pasted input, so v10 `Chips`' `separator` has no equivalent. The prop is still accepted so existing call sites compile — remove it, and split multi-value input yourself before binding if you need that behavior.
+> `separator` is treated as a literal string. The draft is split on that string when the user commits it; it is not interpreted as a regular expression.
diff --git a/Documentation/CommandForm/color-picker-field.md b/Documentation/CommandForm/color-picker-field.md
index fff8958a..e8813838 100644
--- a/Documentation/CommandForm/color-picker-field.md
+++ b/Documentation/CommandForm/color-picker-field.md
@@ -1,6 +1,6 @@
 # ColorPickerField
 
-`ColorPickerField` wraps the PrimeReact `ColorPicker` component for selecting colors.
+`ColorPickerField` renders a Cratis-owned native color input.
 
 ## Usage
 
@@ -27,5 +27,5 @@ import { ColorPickerField } from '@cratis/components/CommandForm';
 ## Behavior
 
 - Default value is an empty string.
-- Values are persisted as color strings (hex format in the default PrimeReact mode).
+- Values are persisted as six-digit hex strings without the leading `#`.
 - Validation state is reflected by applying the `p-invalid` class when the field is invalid.
diff --git a/Documentation/CommandForm/dropdown-field.md b/Documentation/CommandForm/dropdown-field.md
index d80732ce..9f909c9f 100644
--- a/Documentation/CommandForm/dropdown-field.md
+++ b/Documentation/CommandForm/dropdown-field.md
@@ -1,6 +1,6 @@
 # DropdownField
 
-`DropdownField` renders the Cratis [`Dropdown`](../Dropdown/index.md) — PrimeReact 11's `Select`, composed for you — for choosing a single value from a list of options.
+`DropdownField` renders the renderer-independent Cratis [`Dropdown`](../Dropdown/index.md) for choosing one value from a list.
 
 ## Usage
 
@@ -58,5 +58,5 @@ const roles = [
 
 - Default value is an empty string.
 - The field spans full width within its container.
-- Validation state is reflected via the PrimeReact `invalid` flag.
+- Validation state is reflected through `aria-invalid` and `data-invalid`.
 
diff --git a/Documentation/CommandForm/index.md b/Documentation/CommandForm/index.md
index 4af5ed1d..7348317c 100644
--- a/Documentation/CommandForm/index.md
+++ b/Documentation/CommandForm/index.md
@@ -16,7 +16,7 @@ CommandForm offers a complete set of form field components designed to work seam
 
 ## Available Field Components
 
-The CommandForm module exports specialized field components built on [PrimeReact](https://primereact.org/) primitives. Each field wraps a PrimeReact component using `asCommandFormField`, providing automatic value binding, validation state, and integration with Cratis Arc commands.
+The CommandForm module exports Cratis-owned semantic fields built with native controls and accessible interaction behavior. Each field uses `asCommandFormField` for automatic value binding, validation state, and Arc command integration.
 
 See the field type pages in this section for documentation on each available field component. To generate a form's fields from a command's own properties instead of writing them out by hand, see [AutoCommandForm](auto-command-form.md).
 
diff --git a/Documentation/CommandForm/input-text-field.md b/Documentation/CommandForm/input-text-field.md
index ca42e1c6..e9c0a4ae 100644
--- a/Documentation/CommandForm/input-text-field.md
+++ b/Documentation/CommandForm/input-text-field.md
@@ -1,6 +1,6 @@
 # InputTextField
 
-`InputTextField` wraps the PrimeReact `InputText` component for single-line text input. It supports all standard HTML input types.
+`InputTextField` renders a Cratis-owned native single-line input. It supports all standard HTML input types.
 
 ## Usage
 
@@ -27,5 +27,5 @@ import { InputTextField } from '@cratis/components/CommandForm';
 
 - Default value is an empty string.
 - The field spans full width within its container.
-- Validation state is reflected via the PrimeReact `invalid` flag.
+- Validation state is reflected through `aria-invalid` and `data-invalid`.
 
diff --git a/Documentation/CommandForm/multi-select-field.md b/Documentation/CommandForm/multi-select-field.md
index b42d2f8c..aa2e9e3e 100644
--- a/Documentation/CommandForm/multi-select-field.md
+++ b/Documentation/CommandForm/multi-select-field.md
@@ -1,6 +1,6 @@
 # MultiSelectField
 
-`MultiSelectField` lets the user pick several values from a list. PrimeReact 11 removed `MultiSelect` entirely, so the field is now built on the Cratis [`Dropdown`](../Dropdown/index.md) wrapper in `multiple` mode — the binding and the props below are unchanged, but two of them no longer have an effect (see the note at the end).
+`MultiSelectField` lets the user pick several values through the Cratis [`Dropdown`](../Dropdown/index.md) native multiple-selection path.
 
 ## Usage
 
@@ -46,7 +46,7 @@ const categoryOptions = [
 
 - Default value is an empty array.
 - The field spans full width within its container.
-- Validation state is reflected via the PrimeReact `invalid` flag.
+- Validation state is reflected through `aria-invalid` and `data-invalid`.
 
 > [!IMPORTANT]
-> **`display` and `maxSelectedLabels` no longer do anything.** PrimeReact 11's `Select` renders the selection through its value slot, so v10 MultiSelect's comma/chip display modes and its label-collapse threshold have no equivalent. Both props are still accepted so existing call sites compile — remove them, and restyle the value slot through `pt` if you need a different presentation.
+> `display` and `maxSelectedLabels` are legacy compatibility props and have no effect. Use a dedicated collection picker when a large multi-select needs chip collapsing or virtualized search.
diff --git a/Documentation/CommandForm/number-field.md b/Documentation/CommandForm/number-field.md
index ae89a9e7..c7e9c577 100644
--- a/Documentation/CommandForm/number-field.md
+++ b/Documentation/CommandForm/number-field.md
@@ -1,6 +1,6 @@
 # NumberField
 
-`NumberField` wraps the PrimeReact `InputNumber` component for numeric input with optional constraints.
+`NumberField` renders a Cratis-owned native numeric input with optional constraints.
 
 ## Usage
 
@@ -28,6 +28,6 @@ import { NumberField } from '@cratis/components/CommandForm';
 
 - Default value is `0`.
 - The field spans full width within its container.
-- Validation state is reflected via the PrimeReact `invalid` flag.
+- Validation state is reflected through `aria-invalid` and `data-invalid`.
 - When the value is cleared, it falls back to `0`.
 
diff --git a/Documentation/CommandForm/password-field.md b/Documentation/CommandForm/password-field.md
index 1f3913ac..ff47933d 100644
--- a/Documentation/CommandForm/password-field.md
+++ b/Documentation/CommandForm/password-field.md
@@ -1,6 +1,6 @@
 # PasswordField
 
-`PasswordField` provides a masked text entry backed by the PrimeReact `InputPassword` component, bound to a `string` property on a command.
+`PasswordField` provides a Cratis-owned masked text input with an accessible show/hide action.
 
 ## Usage
 
@@ -20,12 +20,12 @@ import { PasswordField } from '@cratis/components/CommandForm';
 | `value` | `(instance: TCommand) => unknown` | — | **Required.** Accessor that returns the bound property from the command instance. Pass the command type as the generic parameter for full type safety. |
 | `placeholder` | `string` | — | Placeholder text shown when the field is empty. |
 | `className` | `string` | — | Extra CSS class combined with the default `w-full`. |
-| `pt` | `InputPasswordProps['pt']` | — | PrimeReact pass-through configuration for the underlying `InputPassword`. |
-| `ptOptions` | `InputPasswordProps['ptOptions']` | — | PrimeReact pass-through options. |
-| `unstyled` | `boolean` | `false` | Disables every base PrimeReact style on the underlying `InputPassword`. |
+| `pt` | component-specific parts | — | Cratis-owned HTML attributes for stable parts. |
+| `ptOptions` | `object` | — | Legacy compatibility prop; ignored. |
+| `unstyled` | `boolean` | `false` | Legacy compatibility prop; ignored. |
 
 ## Behavior
 
 - Default value is an empty string.
 - The input masks its content; the underlying `InputPassword` provides the show/hide affordance.
-- Validation state is reflected via the PrimeReact `invalid` flag.
+- Validation state is reflected through `aria-invalid` and `data-invalid`.
diff --git a/Documentation/CommandForm/radio-button-field.md b/Documentation/CommandForm/radio-button-field.md
index f28ce5ba..3829c893 100644
--- a/Documentation/CommandForm/radio-button-field.md
+++ b/Documentation/CommandForm/radio-button-field.md
@@ -1,6 +1,6 @@
 # RadioButtonField
 
-`RadioButtonField` renders a single PrimeReact `RadioButton` that sets the bound command property to a specific value when selected. Use multiple `RadioButtonField` components bound to the same property to form a radio group.
+`RadioButtonField` renders a Cratis-owned native radio option that sets the bound command property to a specific value when selected. Use multiple `RadioButtonField` components bound to the same property to form a radio group.
 
 ## Usage
 
@@ -27,4 +27,4 @@ import { RadioButtonField } from '@cratis/components/CommandForm';
 
 - Default value is an empty string.
 - The radio button is checked when the current field value equals `buttonValue`.
-- Validation state is reflected via the PrimeReact `invalid` flag on the radio button.
+- Validation state is reflected through `aria-invalid` and `data-invalid`.
diff --git a/Documentation/CommandForm/radio-group-field.md b/Documentation/CommandForm/radio-group-field.md
index 06a3bf01..8517ffa4 100644
--- a/Documentation/CommandForm/radio-group-field.md
+++ b/Documentation/CommandForm/radio-group-field.md
@@ -1,6 +1,6 @@
 # RadioGroupField
 
-`RadioGroupField` renders a group of PrimeReact `RadioButton` components from an options array, allowing the user to select a single value.
+`RadioGroupField` renders a Cratis-owned native radio group from an options array.
 
 ## Usage
 
@@ -52,4 +52,4 @@ With horizontal layout:
 
 - Default value is an empty string.
 - A radio button is checked when the current field value equals its `optionValue`.
-- Validation state is reflected via the PrimeReact `invalid` flag on all radio buttons.
+- Validation state is reflected through `aria-invalid` and `data-invalid`.
diff --git a/Documentation/CommandForm/rating-field.md b/Documentation/CommandForm/rating-field.md
index fbd58b36..f49c5958 100644
--- a/Documentation/CommandForm/rating-field.md
+++ b/Documentation/CommandForm/rating-field.md
@@ -1,6 +1,6 @@
 # RatingField
 
-`RatingField` provides a star-rating input backed by the PrimeReact `Rating` component, bound to a `number` property on a command.
+`RatingField` provides a Cratis-owned accessible star-rating radio group bound to a `number` property.
 
 ## Usage
 
@@ -21,12 +21,12 @@ import { RatingField } from '@cratis/components/CommandForm';
 | `stars` | `number` | `5` | Number of stars to display. |
 | `starAriaLabel` | `(starValue: number) => string` | `"1 star"`, `"2 stars"`, … | Builds the accessible name for each star, from the 1-based star value. Override to localize. |
 | `className` | `string` | — | Extra CSS class name. |
-| `pt` | `RatingRootProps['pt']` | — | PrimeReact pass-through configuration. |
-| `ptOptions` | `RatingRootProps['ptOptions']` | — | PrimeReact pass-through options. |
-| `unstyled` | `boolean` | `false` | Disables every base PrimeReact style on the underlying `Rating`. |
+| `pt` | component-specific parts | — | Cratis-owned HTML attributes for stable parts. |
+| `ptOptions` | `object` | — | Legacy compatibility prop; ignored. |
+| `unstyled` | `boolean` | `false` | Legacy compatibility prop; ignored. |
 
 ## Behavior
 
 - Default value is `0` (no rating selected).
 - The bound value is the selected star count (`1`–`stars`).
-- Validation state is reflected via the PrimeReact `invalid` flag.
+- Validation state is reflected through `aria-invalid` and `data-invalid`.
diff --git a/Documentation/CommandForm/slider-field.md b/Documentation/CommandForm/slider-field.md
index 0dd8fadd..1bb6585e 100644
--- a/Documentation/CommandForm/slider-field.md
+++ b/Documentation/CommandForm/slider-field.md
@@ -1,6 +1,6 @@
 # SliderField
 
-`SliderField` wraps the PrimeReact `Slider` component for selecting a numeric value within a range. The current value is displayed below the slider.
+`SliderField` renders a Cratis-owned native range input for selecting a numeric value. The current value is displayed below the slider.
 
 ## Usage
 
diff --git a/Documentation/CommandForm/text-area-field.md b/Documentation/CommandForm/text-area-field.md
index 0e6d26b2..825ae5fe 100644
--- a/Documentation/CommandForm/text-area-field.md
+++ b/Documentation/CommandForm/text-area-field.md
@@ -1,6 +1,6 @@
 # TextAreaField
 
-`TextAreaField` wraps the PrimeReact `Textarea` component (`primereact/textarea` — v10's `InputTextarea`) for multi-line text input.
+`TextAreaField` renders a Cratis-owned native multi-line input.
 
 ## Usage
 
@@ -27,4 +27,4 @@ import { TextAreaField } from '@cratis/components/CommandForm';
 
 - Default value is an empty string.
 - The field spans full width within its container.
-- Validation state is reflected via the PrimeReact `invalid` flag.
+- Validation state is reflected through `aria-invalid` and `data-invalid`.
diff --git a/Documentation/CommandForm/toggle-switch-field.md b/Documentation/CommandForm/toggle-switch-field.md
index c3841b85..e5e70112 100644
--- a/Documentation/CommandForm/toggle-switch-field.md
+++ b/Documentation/CommandForm/toggle-switch-field.md
@@ -1,6 +1,6 @@
 # ToggleSwitchField
 
-`ToggleSwitchField` provides an on/off switch backed by the PrimeReact `ToggleSwitch` component, bound to a `boolean` property on a command. It is the switch-styled counterpart of [CheckboxField](./checkbox-field.md).
+`ToggleSwitchField` provides a Cratis-owned accessible on/off switch bound to a `boolean` property on a command. It is the switch-styled counterpart of [CheckboxField](./checkbox-field.md).
 
 ## Usage
 
@@ -20,12 +20,12 @@ import { ToggleSwitchField } from '@cratis/components/CommandForm';
 | `value` | `(instance: TCommand) => unknown` | — | **Required.** Accessor that returns the bound property from the command instance. Pass the command type as the generic parameter for full type safety. |
 | `label` | `string` | — | Text displayed next to the switch. It is the switch's accessible name — override it to localize. |
 | `className` | `string` | — | Extra CSS class forwarded to the underlying `ToggleSwitch`. |
-| `pt` | `ToggleSwitchRootProps['pt']` | — | PrimeReact pass-through configuration. |
-| `ptOptions` | `ToggleSwitchRootProps['ptOptions']` | — | PrimeReact pass-through options. |
-| `unstyled` | `boolean` | `false` | Disables every base PrimeReact style on the underlying `ToggleSwitch`. |
+| `pt` | component-specific parts | — | Cratis-owned HTML attributes for stable parts. |
+| `ptOptions` | `object` | — | Legacy compatibility prop; ignored. |
+| `unstyled` | `boolean` | `false` | Legacy compatibility prop; ignored. |
 
 ## Behavior
 
 - Default value is `false`.
 - The switch is wrapped in a `<label>`, so the visible text is its accessible name and clicking the text toggles it.
-- Validation state is reflected via the PrimeReact `invalid` flag.
+- Validation state is reflected through `aria-invalid` and `data-invalid`.
diff --git a/Documentation/CommandStepper/index.md b/Documentation/CommandStepper/index.md
index 02414d76..f76f1b47 100644
--- a/Documentation/CommandStepper/index.md
+++ b/Documentation/CommandStepper/index.md
@@ -54,7 +54,7 @@ export const ProjectWizard = () => {
 - `onSubmit`: Submit callback invoked on the last step
 - Any `CommandForm` props, including `initialValues`, `currentValues`, `validateOnInit`, and validation callbacks
 - `onBeforeExecute`: Transform command values before execution — it must **return** the values to run with, and it runs only on submit, so it can never satisfy required-field validation (seed those through `initialValues`)
-- `linear` (default `true`), `orientation` (`'horizontal'` default / `'vertical'`), `headerPosition` (`'top'` default / `'bottom'`), `start`, `end`, `onChangeStep`, `pt`, `ptOptions`, `unstyled`: the `StepperCustomizationProps` surface. This is a Cratis-owned type — it no longer aliases PrimeReact's `StepperProps`, and `orientation` / `headerPosition` / `start` / `end` are re-implemented over PrimeReact 11's compositional Stepper parts.
+- `linear` (default `true`), `orientation` (`'horizontal'` default / `'vertical'`), `headerPosition` (`'top'` default / `'bottom'`), `start`, `end`, `onChangeStep`, `pt`, `ptOptions`, `unstyled`: the `StepperCustomizationProps` surface. This is a Cratis-owned type mapped onto stable `root`, `list`, `step`, `header`, `number`, `title`, `separator`, `panels`, and `panel` parts.
 
 Conditional steps written as `{condition && <StepperPanel/>}` are counted correctly — only the panels that actually render are counted, so navigation and the per-step validation state stay in step with what is on screen. A `<>…</>` fragment wrapping several panels still counts as **one** step.
 
diff --git a/Documentation/Common/cratis-components-provider.md b/Documentation/Common/cratis-components-provider.md
index e3a59559..ec747d4c 100644
--- a/Documentation/Common/cratis-components-provider.md
+++ b/Documentation/Common/cratis-components-provider.md
@@ -1,144 +1,96 @@
-# CratisComponentsProvider
+---
+title: CratisComponentsProvider
+description: Configure locale, Components-owned labels, and the app-wide toast region.
+---
 
-Single setup point for Cratis Components. Wraps PrimeReact's `PrimeReactProvider` so the package can layer Cratis-wide defaults on top of PrimeReact's pass-through and unstyled mechanisms while still letting the consumer take complete control.
+`CratisComponentsProvider` is the application root for renderer-independent Components configuration. It does not provide a theme runtime or third-party renderer context; styling is owned by CSS.
 
-## Purpose
-
-- Hosts the PrimeReact `pt` / `unstyled` / `ptOptions` / `inputVariant` / `ripple` / `theme` / `defaults` / `zIndex` / `locale` configuration for every Cratis wrapper below it in the tree.
-- Deep-merges Cratis-wide defaults with the consumer's value, so future Cratis defaults can land without breaking consumer overrides.
-- Re-exported from the package root so the recommended setup is one import:
-
-  ```ts
-  import { CratisComponentsProvider } from '@cratis/components';
-  ```
-
-## Basic usage
-
-Mount once at the root of your tree:
+## Basic setup
 
 ```tsx
-import '@cratis/components/tokens';
-import '@cratis/components/styles';
 import { CratisComponentsProvider } from '@cratis/components';
 
 export const App = () => (
-    <CratisComponentsProvider>
-        <YourApp />
+    <CratisComponentsProvider value={{ locale: 'en-US' }} toaster>
+        <Application />
     </CratisComponentsProvider>
 );
 ```
 
-## Configuring `pt` / `unstyled` globally
+## Configuration
 
-The `value` prop accepts PrimeReact 11's `Partial<PrimeReactProps>` shape. The most commonly used members are `unstyled`, `pt`, `ptOptions`, `inputVariant`, `ripple`, and `theme`:
+| Member                | Purpose                                                                                    |
+| --------------------- | ------------------------------------------------------------------------------------------ |
+| `locale`              | BCP 47 locale used by React Aria for dates, numbers, keyboard behavior, and announcements. |
+| `messages.paginator`  | Components-owned paginator labels.                                                         |
+| `messages.datePicker` | Components-owned date-picker action/navigation labels.                                     |
+| `locales`             | Temporary Components 3 compatibility map; migrate to `messages`.                           |
 
-```tsx
-import { CratisComponentsProvider } from '@cratis/components';
-import { globalPt } from './pt-preset';
+Unknown Components 3 renderer options remain accepted during the major migration so applications can update incrementally, but they have no effect. Remove `license`, `theme`, `defaults`, `pt`, `ptOptions`, `ripple`, `unstyled`, and renderer z-index settings from the provider.
 
-export const App = () => (
-    <CratisComponentsProvider value={{ unstyled: true, pt: globalPt }}>
-        <YourApp />
-    </CratisComponentsProvider>
-);
-```
-
-The `value` is deep-merged with the Cratis defaults (currently empty) so consumer settings always win. Pass a stable reference (a module-level constant or a `useMemo` result) to avoid unnecessary re-renders.
-
-## PrimeReact's styled mode
-
-PrimeReact 11's primitives are unstyled: `theme: { preset }` on its own emits the `--p-*` design tokens but the elements carry no `p-*` class names, so a preset alone paints nothing. `styledMode()` from `@cratis/components/styled` returns the `theme` *and* the `defaults` (`primeReactStyles`, PrimeReact's own component styles keyed by primitive name) the provider needs to apply PrimeReact's look to every primitive rendered under it — this library's and your own. Spread it into `value` next to your license key:
+## Localize owned labels
 
 ```tsx
-import { CratisComponentsProvider } from '@cratis/components';
-import { styledMode } from '@cratis/components/styled';
-
-export const App = () => (
-    <CratisComponentsProvider value={{ license: 'YOUR-PRIMEUI-KEY', ...styledMode() }}>
-        <YourApp />
-    </CratisComponentsProvider>
-);
-```
-
-It needs `@primereact/styles` and `@primeuix/themes` installed (optional peers). Options — `preset`, `darkModeSelector`, `cssLayer` — are on [Use PrimeReact's styled mode](../Styling/themed.md).
-
-## Props
-
-### `value`
-
-`Partial<PrimeReactProps>` — Cratis-wide and PrimeReact pass-through configuration. Merged on top of the library's defaults and made available to every Cratis component below in the tree.
-
-The most useful members:
-
-| Member | Purpose |
-|---|---|
-| `unstyled` | When `true`, disables every PrimeReact base style. Combine with `pt` (or per-component CSS / Tailwind) to fully restyle. |
-| `pt` | Per-component pass-through configuration. Keys are PrimeReact component names (`button`, `dialog`, `inputtext`, …); values are slot configuration objects. |
-| `ptOptions` | Controls merge vs. replace behavior for `pt`. Default is `{ mergeSections: true }` which merges per-instance `pt` with the global preset. |
-| `inputVariant` | `'outlined'` or `'filled'` — switches the default input rendering across the whole app. |
-| `theme` | `{ preset, options }` — a `@primeuix/themes` preset and its options (`darkModeSelector`, `cssLayer`, …). Emits the `--p-*` design tokens; on its own it paints nothing, because the primitives carry no `p-*` class — pair it with `defaults`, which is what `styledMode()` does. |
-| `defaults` | Default props per PrimeReact component name. `styledMode()` uses it to hand every primitive PrimeReact's component styles (`primeReactStyles`), which is what puts the `p-*` class names on the elements the preset paints. |
-| `license` | Your PrimeUI license key, passed straight through to PrimeReact. Required whichever way you style — the check runs when the provider mounts — see [Styling](../Styling/index.md). |
-| `ripple` | Enables PrimeReact's ripple animation on supported components. |
-| `zIndex` | Per-overlay-type z-index baseline (`{ modal: 1100, overlay: 1000, menu: 1000, tooltip: 1100 }`). |
-| `locale` | PrimeReact locale string. |
-
-The full type is re-exported as `CratisComponentsConfig`.
-
-### `toaster`
-
-`boolean | ToasterProps` — when set, mounts a [`Toaster`](../Notifications/index.md) inside the provider so the imperative `toast(...)` works app-wide with no extra setup. Pass `true` for the defaults, or a `ToasterProps` object to position and configure it:
-
-```tsx
-<CratisComponentsProvider toaster={{ position: 'bottom-right', limit: 5 }}>
-    <YourApp />
+<CratisComponentsProvider
+    value={{
+        locale: 'nb-NO',
+        messages: {
+            paginator: {
+                navigation: 'Sidenavigasjon',
+                first: 'Første side',
+                previous: 'Forrige side',
+                next: 'Neste side',
+                last: 'Siste side',
+            },
+            datePicker: {
+                today: 'I dag',
+                clear: 'Tøm',
+                openCalendar: 'Åpne kalender',
+                previousMonth: 'Forrige måned',
+                nextMonth: 'Neste måned',
+            },
+        },
+    }}
+>
+    <Application />
 </CratisComponentsProvider>
 ```
 
-Unlike `value`, this is a direct prop on `CratisComponentsProvider` — it is not part of PrimeReact's config.
-
-### `children`
-
-`React.ReactNode` — your application tree.
+React Aria supplies locale data for its interaction patterns. Components asks you only for product labels it owns.
 
-## Using `PrimeReactProvider` directly
+## Mount the toaster
 
-`CratisComponentsProvider` is optional. If you'd rather mount PrimeReact's own provider directly, that works too — every Cratis wrapper reads the same context:
+Pass `toaster` to mount the app-wide notification region:
 
 ```tsx
-import { PrimeReactProvider } from '@primereact/core';
-
-export const App = () => (
-    <PrimeReactProvider value={{ unstyled: true, pt: globalPt }}>
-        <YourApp />
-    </PrimeReactProvider>
-);
+<CratisComponentsProvider
+    value={{ locale: 'en-US' }}
+    toaster={{ position: 'top-right', dismissAriaLabel: 'Dismiss notification' }}
+>
+    <Application />
+</CratisComponentsProvider>
 ```
 
-The Cratis provider exists to give Cratis one place to layer in defaults later without breaking consumers, and to keep the setup discoverable from a single import path.
+You may instead mount `<Toaster />` yourself when its placement belongs elsewhere in the application tree.
 
-## Pure helpers (testing / library extension)
+## Styling
 
-The merge logic is exported so the contract can be verified without rendering React:
+Import `tokens` and `styles`, then choose the baseline `theme` or your own token values. The provider has no styling responsibility.
 
 ```ts
-import { mergeCratisComponentsConfig, cratisDefaults } from '@cratis/components';
-
-const merged = mergeCratisComponentsConfig({ unstyled: true, pt: myPt });
-// → { ...cratisDefaults, unstyled: true, pt: myPt }
+import '@cratis/components/tokens';
+import '@cratis/components/styles';
+import '@cratis/components/theme';
 ```
 
-| Export | Description |
-|---|---|
-| `CratisComponentsProvider`     | The React component. |
-| `CratisComponentsProviderProps` | Props type. |
-| `CratisComponentsConfig`        | Alias for `Partial<PrimeReactProps>`. |
-| `cratisDefaults`                | The Cratis-wide defaults that ship today (currently `{}`). |
-| `mergeCratisComponentsConfig`   | Pure deep-merge helper used inside the provider. |
+For custom products, see [Cratis tokens](../Styling/cratis-tokens.md) and [Stable component parts](../Styling/pass-through.md).
 
-## See also
+## Related exports
 
-- [Styling Overview](../Styling/index.md) — the supported styling options and where the provider fits
-- [Use PrimeReact's styled mode](../Styling/themed.md) — `styledMode()`, `CratisPreset` and the options
-- [Pass-through cheat sheet](../Styling/pass-through.md) — what `pt` reaches in each Cratis wrapper
-- [Use fully unstyled mode](../Styling/unstyled.md) — full `pt` preset walk-through
+| Export                          | Purpose                                              |
+| ------------------------------- | ---------------------------------------------------- |
+| `CratisComponentsConfig`        | Renderer-independent provider configuration.         |
+| `CratisComponentsMessages`      | Components-owned message groups.                     |
+| `cratisDefaults`                | Default locale and English labels.                   |
+| `mergeCratisComponentsConfig()` | Pure configuration merge helper.                     |
+| `useCratisComponentsConfig()`   | Reads the resolved configuration inside a component. |
diff --git a/Documentation/Common/form-element.md b/Documentation/Common/form-element.md
index 789bc371..149b3417 100644
--- a/Documentation/Common/form-element.md
+++ b/Documentation/Common/form-element.md
@@ -1,131 +1,14 @@
-# FormElement
+---
+title: FormElement
+description: Add a leading icon to an application-owned input.
+---
 
-Lightweight wrapper that places an icon addon to the left of a form input, styled with the `--cratis-*` token layer. Use it to give input fields a leading icon without pulling in PrimeReact's `InputGroup` chrome.
-
-## Purpose
-
-FormElement is a structural primitive — it lays out an icon addon and a child input side by side, with rounded-on-the-left chrome around the addon. It does **not** render labels, required indicators, or validation messages — those concerns live on the underlying input itself or on the surrounding command form.
-
-## Key Features
-
-- Icon addon styled from `--cratis-*` tokens (background, border, radius).
-- Independent of PrimeReact's `p-inputgroup` / `p-inputgroup-addon` classes — works the same with or without a PrimeReact theme loaded.
-- Accepts any React node as the icon (PrimeIcons class, `<svg>`, third-party icon component, …).
-
-## Props
-
-| Prop | Type | Description |
-|---|---|---|
-| `icon` | `React.ReactNode` | Icon node displayed inside the leading addon. Can be any React node — a PrimeIcons `<i className="pi pi-…" />`, an `<svg>`, or a `react-icons` component. |
-| `children` | `React.ReactNode` | The form input rendered to the right of the icon addon (typically an `InputText`, `Dropdown`, etc.). |
-
-## Basic Usage
+`FormElement` places an icon beside ordinary form content using Cratis tokens and structural CSS.
 
 ```tsx
-import { FormElement } from '@cratis/components/Common';
-import { InputText } from 'primereact/inputtext';
-
-function MyForm() {
-    return (
-        <FormElement icon={<i className="pi pi-user" />}>
-            <InputText value={name} onChange={(e) => setName(e.target.value)} />
-        </FormElement>
-    );
-}
-```
-
-## Examples
-
-### Email field with envelope icon
-
-```tsx
-<FormElement icon={<i className="pi pi-envelope" />}>
-    <InputText
-        type="email"
-        value={email}
-        onChange={(e) => setEmail(e.target.value)}
-        placeholder="you@example.com"
-    />
-</FormElement>
-```
-
-### Search field with react-icons
-
-```tsx
-import { FaMagnifyingGlass } from 'react-icons/fa6';
-
-<FormElement icon={<FaMagnifyingGlass />}>
-    <InputText
-        value={query}
-        onChange={(e) => setQuery(e.target.value)}
-        placeholder="Search…"
-    />
+<FormElement icon={<SearchIcon />}>
+    <input className='cratis-field-input' placeholder='Search' />
 </FormElement>
 ```
 
-### Dropdown with category icon
-
-```tsx
-import { FaLayerGroup } from 'react-icons/fa6';
-
-<FormElement icon={<FaLayerGroup />}>
-    <Dropdown
-        value={category}
-        options={categories}
-        onChange={(e) => setCategory(e.value)}
-        optionLabel="name"
-        optionValue="id"
-    />
-</FormElement>
-```
-
-## Styling
-
-The addon's background, border, and radius are driven by the [`--cratis-*` token layer](../Styling/cratis-tokens.md):
-
-| Token | Surface |
-|---|---|
-| `--cratis-surface-100` | Addon background. |
-| `--cratis-surface-border` | Addon border. |
-| `--cratis-text-color-secondary` | Icon color. |
-| `--cratis-border-radius` | Rounded-on-the-left corner radius. |
-
-Override the tokens to retint the addon without forking the component:
-
-```css
-:root {
-    --cratis-surface-100:   #1e293b;
-    --cratis-surface-border: #334155;
-    --cratis-border-radius:  10px;
-}
-```
-
-For per-instance restyling, wrap the FormElement with your own class and target it in CSS:
-
-```css
-.brand-form-element .cratis-form-element__addon {
-    background: var(--brand-accent);
-    color: var(--brand-on-accent);
-}
-```
-
-```tsx
-<div className="brand-form-element">
-    <FormElement icon={<i className="pi pi-shield" />}>
-        <InputText … />
-    </FormElement>
-</div>
-```
-
-For full styling control under `unstyled` mode, the addon classes are stable: `cratis-form-element` on the row and `cratis-form-element__addon` on the leading slot.
-
-## When to use FormElement vs CommandForm fields
-
-- Use **`FormElement`** for ad-hoc forms outside of a `CommandForm`, when you want the icon-addon visual on top of any input you control.
-- Use **CommandForm fields** (`InputTextField`, `NumberField`, `DropdownField`, …) inside a `CommandForm` or `CommandDialog` — they bind to a command property, surface validation state, and render the appropriate input type.
-
-## See Also
-
-- [Styling Overview](../Styling/index.md) — the supported styling options and where FormElement fits
-- [Cratis token reference](../Styling/cratis-tokens.md) — every token and the surfaces it tints
-- [CommandForm Field Types](../CommandForm/index.md) — command-bound field wrappers
+The wrapper is renderer-independent. It works with native controls, product-owned controls, and Components fields that accept child composition.
diff --git a/Documentation/Common/index.md b/Documentation/Common/index.md
index 08f9996e..c9b38f24 100644
--- a/Documentation/Common/index.md
+++ b/Documentation/Common/index.md
@@ -4,15 +4,15 @@ The Common module provides reusable UI components and the styling setup primitiv
 
 ## Components
 
-- **CratisComponentsProvider**: Single setup point for Cratis Components — wraps PrimeReact's `PrimeReactProvider` and hosts the `pt`, `unstyled`, locale, and other global configuration.
-- **Icon / IconDisplay**: Unified icon type that accepts a PrimeIcons CSS class string or any React node.
+- **CratisComponentsProvider**: Locale, Components-owned labels, and optional app-wide toaster.
+- **Icon / IconDisplay**: Unified icon type that accepts a CSS class string or any React node.
 - **Page**: Layout primitive for consistent page structures.
 - **FormElement**: Lightweight wrapper that places an icon addon to the left of a form input.
 - **ErrorBoundary**: Error handling for React component trees.
 
 ## See Also
 
-- [CratisComponentsProvider](cratis-components-provider.md) — global setup, `pt` / `unstyled` configuration
+- [CratisComponentsProvider](cratis-components-provider.md) — locale, labels, and toaster configuration
 - [Icon](icon.md) - Icon type and IconDisplay component
 - [Page](page.md) - Page layout component
 - [FormElement](form-element.md) - Form field icon-addon wrapper
diff --git a/Documentation/DataPage/index.md b/Documentation/DataPage/index.md
index 4dc1d3ef..952cec70 100644
--- a/Documentation/DataPage/index.md
+++ b/Documentation/DataPage/index.md
@@ -174,7 +174,7 @@ DataPage integrates with:
 
 - `@cratis/arc/queries` for data fetching
 - `DataTableForQuery` and `DataTableForObservableQuery` components
-- PrimeReact's DataTable, plus a Cratis action toolbar of `Button`s (PrimeReact 11 removed Menubar)
+- the semantic Cratis data table plus a Cratis action toolbar of Buttons
 - Allotment for split view layout — its stylesheet is vendored into `@cratis/components/styles`, so the split view lays out as long as you import that
 
 ## See Also
diff --git a/Documentation/DataPage/menu-items.md b/Documentation/DataPage/menu-items.md
index eb5eb74c..15088f5f 100644
--- a/Documentation/DataPage/menu-items.md
+++ b/Documentation/DataPage/menu-items.md
@@ -37,7 +37,7 @@ import { FaPlus, FaPencil, FaTrash } from 'react-icons/fa6';
 - `disabled`: Disable the item unconditionally (default: false)
 - `disableOnUnselected`: Disable when no row is selected (default: false)
 
-That is the whole surface. `MenuItem` is Cratis-owned — `primereact/menuitem` was removed in PrimeReact 11 — so PrimeReact MenuItem props such as `items`, `separator`, `url`, `template` and `className` are **not** accepted.
+That is the whole surface. `MenuItem` is Cratis-owned; navigation/menu-specific props such as nested `items`, `separator`, `url`, and renderer templates are not accepted.
 
 ## Context-Aware Actions
 
@@ -129,7 +129,7 @@ import { FaPlus, FaPencil, FaTrash, FaFileExport } from 'react-icons/fa6';
 
 There are no separators and no submenus. A `MenuItem` with `MenuItem` children does not nest — the children are simply ignored, with no error to tell you — and `<MenuItem separator />` is not a thing.
 
-That is a deliberate consequence of PrimeReact 11 removing `Menubar`: the Cratis action bar that replaced it is a `Button` toolbar driven by a flat `model` array, and a menubar was never a good fit for a row of *actions* rather than navigation. When a page genuinely needs grouped actions, put the grouping in a dialog opened from one item, or split the page.
+The action bar is a flat Button toolbar because a navigation menubar is not the correct semantic pattern for a row of commands. When a page genuinely needs grouped actions, put the grouping in a dialog opened from one item, or split the page.
 
 ## Action Handlers
 
diff --git a/Documentation/DataTables/column-configuration.md b/Documentation/DataTables/column-configuration.md
index 75e4da38..d869e1a3 100644
--- a/Documentation/DataTables/column-configuration.md
+++ b/Documentation/DataTables/column-configuration.md
@@ -1,357 +1,68 @@
-# Column Configuration
+---
+title: Column configuration
+description: Define data, selection, sorting, filtering, and custom rendering columns.
+---
 
-Both DataTableForQuery and DataTableForObservableQuery support all PrimeReact Column features.
-
-## Basic Column
-
-```typescript
-<Column field="name" header="Name" />
-```
-
-## Sortable Column
-
-```typescript
-<Column field="name" header="Name" sortable />
-```
-
-## Column with Filter
-
-```typescript
-<Column
-    field="status"
-    header="Status"
-    filter
-    filterPlaceholder="Search by status"
-/>
-```
-
-## Custom Body Template
-
-Display custom content in cells:
-
-```typescript
-<Column
-    field="status"
-    header="Status"
-    body={(rowData) => (
-        <span className={`badge badge-${rowData.status}`}>
-            {rowData.status}
-        </span>
-    )}
-/>
-```
-
-## Formatted Values
-
-```typescript
-<Column
-    field="price"
-    header="Price"
-    body={(rowData) => `$${rowData.price.toFixed(2)}`}
-/>
-
-<Column
-    field="createdAt"
-    header="Created"
-    body={(rowData) => new Date(rowData.createdAt).toLocaleDateString()}
-/>
-```
-
-## Boolean Display
-
-```typescript
-<Column
-    field="active"
-    header="Active"
-    body={(rowData) => (
-        <i className={`pi ${rowData.active ? 'pi-check text-green-500' : 'pi-times text-red-500'}`} />
-    )}
-/>
-```
-
-## Action Buttons
-
-PrimeReact 11's `Button` renders its content as **children** — the v10 `label` / `icon` props are gone, and severity is a `severity` prop rather than a `p-button-*` class:
-
-```tsx
-import { Button } from 'primereact/button';
-
-<Column
-    header='Actions'
-    body={(rowData) => (
-        <div className='flex gap-2'>
-            <Button size='small' aria-label='Edit' onClick={() => handleEdit(rowData)}>
-                <i className='pi pi-pencil' />
-            </Button>
-            <Button
-                size='small'
-                severity='danger'
-                aria-label='Delete'
-                onClick={() => handleDelete(rowData)}
-            >
-                <i className='pi pi-trash' />
-            </Button>
-        </div>
-    )}
-/>;
-```
-
-## Column Width
-
-```typescript
-<Column field="id" header="ID" style={{ width: '80px' }} />
-<Column field="name" header="Name" style={{ width: '200px' }} />
-<Column field="description" header="Description" />
-```
-
-## Alignment
-
-```typescript
-<Column
-    field="price"
-    header="Price"
-    style={{ textAlign: 'right' }}
-    headerStyle={{ textAlign: 'right' }}
-/>
-```
-
-## Frozen Columns
-
-```typescript
-<Column field="id" header="ID" frozen />
-<Column field="name" header="Name" frozen />
-<Column field="email" header="Email" />
-<Column field="phone" header="Phone" />
-```
-
-## Conditional Styling
-
-```typescript
-<Column
-    field="stock"
-    header="Stock"
-    body={(rowData) => (
-        <span className={rowData.stock < 10 ? 'text-red-500 font-bold' : ''}>
-            {rowData.stock}
-        </span>
-    )}
-/>
-```
-
-## Nested Property Access
-
-```typescript
-<Column field="user.name" header="User Name" />
-<Column field="address.city" header="City" />
-```
-
-## Custom Header
-
-```typescript
-<Column
-    header={
-        <div className="flex align-items-center">
-            <i className="pi pi-user mr-2" />
-            <span>User Name</span>
-        </div>
-    }
-    field="name"
-/>
-```
-
-## Export Support
-
-```typescript
-<Column field="name" header="Name" exportable />
-<Column field="internalId" header="Internal ID" exportable={false} />
-```
-
-## Column Filters
-
-Set `filter` and choose one of the four built-in value editors with `dataType`:
-
-| `dataType`       | Built-in editor     |
-| ---------------- | ------------------- |
-| `text` (default) | Text input          |
-| `numeric`        | Number input        |
-| `date`           | Date picker         |
-| `boolean`        | True/False dropdown |
+`Column` is a declarative marker consumed by `DataTableCore` and the query-backed table components.
 
 ```tsx
-<Column
-    field='name'
-    header='Name'
-    filter
-    filterPlaceholder='Search names'
-    dataType='text'
-/>
+<DataTableForQuery query={AllAuthors} emptyMessage='No authors'>
+    <Column field='name' header='Name' sortable filter />
+    <Column field='email' header='Email' filter />
+</DataTableForQuery>
 ```
 
-`defaultFilters` on the surrounding table initializes the draft once when the table mounts. Filtering is client-side over the currently loaded query page; the menu's Apply action commits its draft.
+## Data and custom cells
 
-### Match-mode vocabulary
+| Prop | Purpose |
+|---|---|
+| `field` | Dot-separated row path used for display, sorting, and default filtering. |
+| `header` | Header content. |
+| `body` | Custom cell renderer receiving the row. |
+| `style` / `className` | Body-cell treatment. |
+| `headerStyle` / `headerClassName` | Header-cell treatment. |
+| `bodyStyle` / `bodyClassName` | Body-only override. |
 
-Use the Cratis-owned `DataTableFilterMatchMode` values rather than importing rendering-adapter constants:
+Nested paths such as `personalDetails.displayName` are resolved by Components.
 
-```typescript
-import {
-    DataTableFilterMatchMode,
-    type DataTableFilterMeta,
-} from '@cratis/components/DataTables';
+## Selection
 
-const filters: DataTableFilterMeta = {
-    name: {
-        value: 'Ada',
-        matchMode: DataTableFilterMatchMode.Contains,
-    },
-};
-```
+Set `selectionMode='single'` on a selection column and configure the table's `dataKey`, `selection`, and `onSelectionChange` props.
 
-For a custom mode, register the matcher through Cratis and use the branded value it returns:
+## Sorting
 
-```typescript
-import {
-    registerDataTableFilterMatcher,
-    unregisterDataTableFilterMatcher,
-} from '@cratis/components/DataTables';
+Set `sortable`. Sorting applies to the currently loaded page. Query-backed complete-result sorting belongs on the server and should be expressed through the Arc paging/sorting contract.
 
-const UserHasRole = registerDataTableFilterMatcher(
-    'userHasRole',
-    (roles, expectedRole) => Array.isArray(roles) && roles.includes(expectedRole),
-);
+## Column filters
 
-const filters: DataTableFilterMeta = {
-    roles: { value: 'advisor', matchMode: UserHasRole.matchMode },
-};
+Set `filter` and optionally:
 
-// Optional during hot-module disposal or isolated specs:
-unregisterDataTableFilterMatcher(UserHasRole);
-```
-
-Custom matcher names are process-wide, matching the active table engine's registry. Register them once with a unique application-owned name; built-in names cannot be replaced, and registering a different function under an existing custom name throws. Consumers import only the Cratis vocabulary and registration seam; every loaded table adapter receives the runtime matcher internally.
-
-### Localize the menu
-
-Override any of the default English labels per filtered column. Omitted labels retain their defaults:
+- `filterField` when the filtered path differs from `field`
+- `filterPlaceholder`
+- `dataType`: `text`, `numeric`, `date`, or `boolean`
+- `showFilterMatchModes`
+- `filterLabels`
+- `filterElement`
 
 ```tsx
 <Column
-    field='active'
+    field='status'
     header='Status'
     filter
     dataType='boolean'
     filterLabels={{
-        filterTriggerAriaLabel: (field) => `Filtrer ${field}`,
-        clear: 'Tøm',
-        apply: 'Bruk',
-        true: 'Ja',
-        false: 'Nei',
+        clear: 'Reset',
+        apply: 'Use filter',
+        true: 'Active',
+        false: 'Inactive',
     }}
 />
 ```
 
-### Custom value editor
-
-`filterElement` replaces only the built-in value editor. The match-mode selector and the component-owned Clear and Apply actions remain in the menu. `onChange` updates the draft; it does not apply the filter until Apply is used.
-
-```tsx
-<Column
-    field='role'
-    filterField='roleCode'
-    header='Role'
-    filter
-    showFilterMatchModes={false}
-    filterElement={({ value, onChange }) => (
-        <Dropdown
-            value={value}
-            options={roleOptions}
-            optionLabel='label'
-            optionValue='value'
-            onChange={(event) => onChange(event.value, 'equals')}
-            placeholder='Select role'
-        />
-    )}
-/>
-```
-
-The callback receives:
-
-```typescript
-interface ColumnFilterElementOptions {
-    field: string; // effective filterField, or field
-    value: unknown; // current draft value
-    matchMode: DataTableFilterMatchMode; // current draft match mode
-    onChange(value: unknown, matchMode?: DataTableFilterMatchMode): void;
-    onApply(event: React.SyntheticEvent): void;
-    onClear(event: React.SyntheticEvent): void;
-}
-```
-
-Use `onApply` / `onClear` when the custom editor needs its own action buttons; otherwise use the menu's built-in actions.
-
-## Advanced Templates
-
-### Status Badge
-
-```typescript
-const statusBodyTemplate = (rowData) => {
-    const statusColors = {
-        active: 'success',
-        pending: 'warning',
-        inactive: 'danger'
-    };
-
-    return (
-        <Tag
-            value={rowData.status}
-            severity={statusColors[rowData.status]}
-        />
-    );
-};
-
-<Column
-    field="status"
-    header="Status"
-    body={statusBodyTemplate}
-/>
-```
-
-### Image Display
+A custom editor receives the draft value/mode and `onChange`, `onApply`, and `onClear` callbacks. Applying updates the table's `DataTableFilterMeta`; clearing removes the constraint.
 
-```typescript
-<Column
-    header="Avatar"
-    body={(rowData) => (
-        <img
-            src={rowData.avatarUrl}
-            alt={rowData.name}
-            width="40"
-            height="40"
-            className="rounded-full"
-        />
-    )}
-/>
-```
-
-### Progress Bar
-
-```typescript
-<Column
-    field="progress"
-    header="Progress"
-    body={(rowData) => (
-        <ProgressBar value={rowData.progress} />
-    )}
-/>
-```
+Filtering affects the loaded page. For complete-result filtering, send the filter model as query arguments and filter before server paging.
 
-## Best Practices
+## Custom matchers
 
-1. **Use dataKey**: Always specify a dataKey for better performance
-2. **Keep templates simple**: Complex calculations should be done outside render
-3. **Memoize callbacks**: Use useCallback for event handlers in templates
-4. **Limit columns**: Too many columns hurt usability
-5. **Make important columns first**: Put key information on the left
-6. **Use appropriate widths**: Don't let long content break layout
-7. **Filter strategically**: Add filters to commonly searched fields
-8. **Sort by default**: Consider default sorting on key column
+Use `registerDataTableFilterMatcher()` for a named matcher. The returned branded mode can be assigned to `DataTableFilterMeta`, and the registration handle removes it safely.
diff --git a/Documentation/DataTables/data-table-for-observable-query.md b/Documentation/DataTables/data-table-for-observable-query.md
index a4bdf9df..ef41d140 100644
--- a/Documentation/DataTables/data-table-for-observable-query.md
+++ b/Documentation/DataTables/data-table-for-observable-query.md
@@ -54,7 +54,7 @@ Same as DataTableForQuery, but the query must extend `IObservableQueryFor`.
 - `globalFilterFields`: Fields to search in global filter
 - `defaultFilters`: Initial filter configuration (a `DataTableFilterMeta`)
 - `clientFiltering`: Deprecated compatibility prop; accepted but ignored because filtering is always scoped to the loaded page
-- `paginatorClassName` / `paginatorAriaLabels`: styling and explicit localization overrides for the paginator; accessible names default from the configured PrimeReact locale
+- `paginatorClassName` / `paginatorAriaLabels`: styling and explicit localization overrides for the paginator; accessible names default from `CratisComponentsProvider` messages
 - `children`: Column definitions
 
 Filtered columns use the same `filterLabels` localization and `filterElement` custom-editor seams as `DataTableForQuery`. See [Column Configuration](column-configuration.md#column-filters). Filters are applied client-side to the currently loaded observable-query page, while pagination continues to use the server-reported totals.
@@ -147,7 +147,7 @@ Integrates with:
 
 - `@cratis/arc/queries` for observable query support
 - `@cratis/arc.react/queries` for React observable hooks
-- PrimeReact DataTable
+- semantic Cratis data table
 
 ## See Also
 
diff --git a/Documentation/DataTables/data-table-for-query.md b/Documentation/DataTables/data-table-for-query.md
index e216cc23..f3cf6825 100644
--- a/Documentation/DataTables/data-table-for-query.md
+++ b/Documentation/DataTables/data-table-for-query.md
@@ -53,7 +53,7 @@ function MyTable() {
 - `globalFilterFields`: Fields to search in global filter
 - `defaultFilters`: Initial filter configuration (a `DataTableFilterMeta`)
 - `clientFiltering`: Deprecated compatibility prop; accepted but ignored because filtering is always scoped to the loaded page
-- `paginatorClassName` / `paginatorAriaLabels`: styling and explicit localization overrides for the paginator; accessible names default from the configured PrimeReact locale
+- `paginatorClassName` / `paginatorAriaLabels`: styling and explicit localization overrides for the paginator; accessible names default from `CratisComponentsProvider` messages
 - `children`: Column definitions
 
 While the first query result is still performing, an empty default data array renders a silent table body rather than `emptyMessage`. Once the query settles, a genuinely empty result renders the configured message normally.
@@ -128,7 +128,7 @@ Integrates with:
 
 - `@cratis/arc/queries` for data fetching
 - `@cratis/arc.react/queries` for React hooks
-- PrimeReact DataTable and Paginator
+- semantic Cratis table and Arc-backed paginator
 
 ## See Also
 
diff --git a/Documentation/DataTables/index.md b/Documentation/DataTables/index.md
index 4750c051..94955774 100644
--- a/Documentation/DataTables/index.md
+++ b/Documentation/DataTables/index.md
@@ -29,7 +29,7 @@ Both table components share:
 - Global filtering
 - Custom column templates
 - Empty state messages
-- PrimeReact Column support
+- Cratis-owned semantic Column markers and stable table parts
 
 ## See Also
 
diff --git a/Documentation/Dialogs/busy-indicator-dialog.md b/Documentation/Dialogs/busy-indicator-dialog.md
index a97050e8..0c5d6bcb 100644
--- a/Documentation/Dialogs/busy-indicator-dialog.md
+++ b/Documentation/Dialogs/busy-indicator-dialog.md
@@ -75,4 +75,4 @@ The `BusyIndicatorDialogRequest` the host threads into the dialog carries:
 
 ## Integration
 
-Uses PrimeReact ProgressSpinner for the loading animation.
+Uses the Cratis-owned progress spinner for the loading animation.
diff --git a/Documentation/Dialogs/dialog.md b/Documentation/Dialogs/dialog.md
index 9a909137..da1c1755 100644
--- a/Documentation/Dialogs/dialog.md
+++ b/Documentation/Dialogs/dialog.md
@@ -81,18 +81,18 @@ const MyComponent = () => {
 - `width`: Dialog width (defaults to `'450px'`)
 - `style`: Custom dialog style
 - `contentStyle`: Custom content area style
-- `resizable`: Accepted but a no-op in PrimeReact 11 — the headless dialog has no built-in resize handle. Existing code that passes it keeps compiling; it simply has no effect.
+- `resizable`: Accepted for source compatibility; the viewport-bounded Cratis dialog has no resize handle. Existing code that passes it keeps compiling; it simply has no effect.
 - `isValid`: Enables or disables confirm actions (defaults to `true`)
 - `isBusy`: When `true`, disables all buttons and shows a loading spinner on the primary action button
 - `initialFocus`: Where keyboard focus lands when the dialog opens (see below)
 - `okLabel`, `cancelLabel`, `yesLabel`, `noLabel`: Button labels. Footer icons are decorative and hidden from accessibility APIs, so each button's accessible name is exactly its configured label
 - `className`, `pt`, `ptOptions`, `unstyled`: Styling hooks forwarded to the
-  underlying PrimeReact Dialog — see the [pass-through cheat sheet](../Styling/pass-through.md)
+  Cratis-owned dialog parts — see the [pass-through cheat sheet](../Styling/pass-through.md)
 
 ## Dismissing
 
 A dialog is _dismissable_ when the header close (X), a backdrop click and
-`Escape` are all offered. In PrimeReact 11 those three are one switch, so they
+`Escape` are all offered. Those three affordances are controlled by one switch, so they
 are always on or off together.
 
 By default the dialog works out which it should be from `buttons`: a predefined
diff --git a/Documentation/Dropdown/index.md b/Documentation/Dropdown/index.md
index 27bccc97..525faf82 100644
--- a/Documentation/Dropdown/index.md
+++ b/Documentation/Dropdown/index.md
@@ -1,422 +1,64 @@
-# Dropdown
+---
+title: Dropdown
+description: Accessible single, filtered, and multiple selection with a stable Cratis API.
+---
 
-The `Dropdown` component is a curated wrapper around PrimeReact 11's compositional `Select`. It assembles `Select.Root`, `Select.Trigger`, `Select.Value`, `Select.Portal`, `Select.Positioner`, `Select.Popup` and `Select.List` for you, so a select is one element with props instead of seven nested parts.
+`Dropdown` binds a value to an option collection without exposing its internal interaction library.
 
-## Purpose
-
-Dropdown gives you a single-element select that binds a value to a list of options, works inside dialogs without any z-index configuration, and exposes a small, stable prop surface rather than the whole PrimeReact Select API.
-
-## Key Features
-
-- Single or multiple selection (set `multiple`)
-- Optional in-popup filter (`filter`) and clear control (`showClear`)
-- Portaled and stacked by PrimeReact 11 itself, so it renders above the dialog it was opened from — no manual z-index, no `appendTo`
-- `id`, tab order and accessible naming are applied to the focusable combobox trigger, not its layout wrapper
-- A small, curated prop surface (below) plus `pt` / `ptOptions` / `unstyled` for full styling control
-
-## Quick Start
-
-```typescript
-import { Dropdown } from '@cratis/components/Dropdown';
-
-function MyForm() {
-    const [selectedCity, setSelectedCity] = useState(null);
-
-    const cities = [
-        { label: 'Oslo', value: 'oslo' },
-        { label: 'Bergen', value: 'bergen' },
-        { label: 'Trondheim', value: 'trondheim' }
-    ];
-
-    return (
-        <Dropdown
-            value={selectedCity}
-            options={cities}
-            onChange={(e) => setSelectedCity(e.value)}
-            placeholder="Select a City"
-            aria-label="City"
-        />
-    );
-}
-```
-
-No `optionLabel` / `optionValue` here: when the option objects carry `label` and `value`, those are used — the PrimeReact 10 `Dropdown` convention.
-
-## Props
-
-`Dropdown` exposes a wrapper-owned surface — the common single/multi select props every Cratis form needs — rather than leaking PrimeReact's entire Select API. For anything beyond this, use `pt` / `ptOptions` / `unstyled`.
-
-```typescript
-interface DropdownProps<T = unknown> {
-    value?: T;
-    options?: unknown[];
-    optionLabel?: string; // property used as the visible label; defaults to 'label' when the options carry it
-    optionValue?: string; // property used as the underlying value; defaults to 'value' when the options carry it
-    placeholder?: string;
-    filter?: boolean; // filter input inside the popup
-    filterPlaceholder?: string; // defaults to placeholder when omitted
-    multiple?: boolean; // multi-select
-    showClear?: boolean;
-    invalid?: boolean;
-    disabled?: boolean;
-    onChange?: (event: DropdownChangeEvent<T>) => void; // event.value is typed as T
-    onBlur?: React.FocusEventHandler<HTMLElement>;
-    // styling forwarded to the Select root:
-    className?: string;
-    style?: React.CSSProperties;
-    name?: string;
-    // identity and accessibility forwarded to the focusable combobox trigger:
-    id?: string;
-    tabIndex?: number;
-    'aria-label'?: string;
-    'aria-labelledby'?: string;
-    'aria-describedby'?: string;
-    pt?: SelectRootProps['pt'];
-    ptOptions?: SelectRootProps['ptOptions'];
-    unstyled?: boolean;
-}
-```
-
-Every prop is optional. `multiple`, `filter`, `showClear`, `invalid` and `disabled` are simply off unless you set them. The one convention the wrapper applies is `optionLabel` / `optionValue`: when they are omitted and the options are objects carrying a `label` / `value` field, that field is used — as PrimeReact 10's `Dropdown` did. v11's `Select` compares the option object itself against the value otherwise, so `[{ label, value }]` options with a scalar `value` would never match without it. Options keyed differently (`name` / `code`, say) still need `optionLabel` / `optionValue` spelled out.
-
-There is no `...rest` spread and no index signature, so anything not listed above is a compile error rather than an ignored prop. That includes `aria-*` beyond the three declared (`aria-label`, `aria-labelledby`, `aria-describedby`) and PrimeReact Select props the wrapper deliberately does not surface — `appendTo`, `variant`, `size`, `fluid`, `filterMatchMode`, `optionGroupLabel` / `optionGroupChildren`, `optionDisabled`, `open` / `defaultOpen`, and the rest. Reach those through `pt` / `ptOptions` / `unstyled`, or compose `Select` yourself.
-
-`onChange` receives a `DropdownChangeEvent<T>`:
-
-```typescript
-interface DropdownChangeEvent<T = unknown> {
-    value: T; // the newly selected value (an array when `multiple`)
-    originalEvent?: React.SyntheticEvent; // the underlying React event, when available
-}
-```
-
-## Accessible naming
-
-`Dropdown` places `id`, `tabIndex`, `aria-label`, `aria-labelledby` and `aria-describedby` on the focusable button carrying `role="combobox"`. The outer Select root is only a layout wrapper and does not receive the control id.
-
-Associate a visible label in the normal way:
+## Basic selection
 
 ```tsx
-<label htmlFor="role">Role</label>
 <Dropdown
-    id="role"
     value={role}
-    options={roles}
-    aria-describedby="role-help"
-/>
-<span id="role-help">Choose the role used for this assignment.</span>
-```
-
-When there is no visible label, provide `aria-label` instead.
-
-## Basic Examples
-
-### Simple String Options
-
-```typescript
-const options = ['React', 'Angular', 'Vue', 'Svelte'];
-
-<Dropdown
-    value={selectedFramework}
-    options={options}
-    onChange={(e) => setSelectedFramework(e.value)}
-    placeholder="Select Framework"
-/>
-```
-
-### Object Options
-
-Options shaped `{ label, value }` need nothing more (see the quick start). Any other shape names its fields:
-
-```typescript
-const countries = [
-    { name: 'Norway', code: 'NO' },
-    { name: 'Sweden', code: 'SE' },
-    { name: 'Denmark', code: 'DK' }
-];
-
-<Dropdown
-    value={selectedCountry}
-    options={countries}
-    onChange={(e) => setSelectedCountry(e.value)}
-    optionLabel="name"
-    placeholder="Select Country"
+    options={[
+        { label: 'Administrator', value: 'admin' },
+        { label: 'Advisor', value: 'advisor' },
+    ]}
+    onChange={(event) => setRole(event.value)}
+    aria-label='Role'
 />
 ```
 
-### With Filtering
+When option objects contain `label` and `value`, those fields are used automatically. Use `optionLabel` and `optionValue` for another shape.
 
-Set `filter` to render a filter input inside the popup. `filterPlaceholder` can differ from the closed trigger's `placeholder`; when omitted, it defaults to the trigger placeholder:
+## Filtered selection
 
-```typescript
+```tsx
 <Dropdown
-    value={selected}
-    options={longListOfOptions}
-    onChange={(e) => setSelected(e.value)}
+    value={role}
+    options={roles}
     filter
-    placeholder="Select Option"
-    filterPlaceholder="Search options"
+    placeholder='Select a role'
+    filterPlaceholder='Search roles'
+    onChange={(event) => setRole(event.value)}
+    aria-label='Role'
 />
 ```
 
-### Clearable Selection
-
-```typescript
-<Dropdown
-    value={selected}
-    options={options}
-    onChange={(e) => setSelected(e.value)}
-    showClear
-    placeholder="Select (optional)"
-/>
-```
-
-### Multiple Selection
-
-```typescript
-<Dropdown<string[]>
-    value={selectedTags}
-    options={tags}
-    onChange={(e) => setSelectedTags(e.value)}
-    optionLabel="name"
-    optionValue="id"
-    multiple
-    placeholder="Select tags"
-/>
-```
-
-## Inside Dialogs
-
-Dropdown works correctly inside dialogs with no configuration:
-
-```typescript
-import { Dialog } from '@cratis/components/Dialogs';
-import { Dropdown } from '@cratis/components/Dropdown';
-
-<Dialog title="Categorize" visible={visible} onCancel={() => setVisible(false)}>
-    <div className="field">
-        <label htmlFor="category">Category</label>
-        <Dropdown
-            id="category"
-            value={category}
-            options={categories}
-            onChange={(e) => setCategory(e.value)}
-            placeholder="Select Category"
-        />
-    </div>
-</Dialog>
-```
-
-The panel appears above the dialog without z-index issues.
+Filtered selection follows the combobox pattern. A non-filtered single select follows the button/listbox pattern, so tests should query by accessible name rather than assume `role="combobox"` for both.
 
-## Overlay stacking inside dialogs
+## Multiple selection
 
-On PrimeReact 10 this needed help. A dropdown panel opened inside a modal dialog rendered _inside_ the dialog's DOM subtree, so the dialog's stacking and scroll context clipped it and the panel could land under the dialog's own mask. Version 2.x of this library carried two workarounds for that: `appendTo={document.body}` on every overlay-bearing field, and a `useOverlayZIndex` hook that raised the panel to a z-index floor with a `MutationObserver`.
+Set `multiple` and bind an array. Components uses the native multiple-select path for dependable keyboard and screen-reader behavior. Use a specialized collection picker when a large dataset needs virtualized search or chip collapsing.
 
-**Both are gone in 3.0, because PrimeReact 11 does the work itself.** `Select.Portal` defaults to `appendTo: 'body'`, so the panel is portaled out of the dialog entirely, and the shared z-index registry assigns a later-opened overlay a value above whatever is already registered — so the panel outranks the dialog it was opened from. Measured on PrimeReact 11.1.0: with the dialog positioner at z-index 1102, the select panel opens at 2103, parented directly to `document.body`.
-
-There is nothing to configure and nothing to import. `useOverlayZIndex` no longer exists; if you called it in your own app for your own overlays, check whether v11 has made it unnecessary there too before inlining it.
-
-A regression spec pins this behavior — `Source/Dropdown/for_Dropdown/when_opened_inside_a_dialog.ts` renders a `Dropdown` inside a `Dialog`, opens it, and asserts that the panel is not contained by the dialog popup, that it is portaled to `document.body`, and that its z-index is above the dialog's. If a future PrimeReact release stops portaling or stops stacking the panel, that spec fails — which is exactly the signal that a workaround is needed again.
-
-## Disabled State
-
-```typescript
-<Dropdown
-    value={selected}
-    options={options}
-    disabled={isLoading}
-    placeholder="Loading..."
-/>
-```
-
-## Validation and Errors
-
-Use the `invalid` prop to put the trigger into its error state — don't hand-apply a class:
-
-```typescript
-<div className="field">
-    <label htmlFor="status">Status</label>
-    <Dropdown
-        id="status"
-        value={formData.status}
-        options={statusOptions}
-        onChange={(e) => setFormData({ ...formData, status: e.value })}
-        invalid={!!errors.status}
-    />
-    {errors.status && <small style={{ color: 'var(--cratis-red-500)' }}>{errors.status}</small>}
-</div>
-```
-
-Inside a command form, reach for [`DropdownField`](../CommandForm/dropdown-field.md) instead — it wires `invalid`, the error message and the binding for you.
-
-## Complete Form Example
-
-```typescript
-import { Dropdown } from '@cratis/components/Dropdown';
-import { useState } from 'react';
-
-interface FormData {
-    category: string;
-    priority: string;
-    assignee: string;
-}
-
-function IssueForm() {
-    const [formData, setFormData] = useState<FormData>({
-        category: '',
-        priority: '',
-        assignee: ''
-    });
-
-    const categories = [
-        { label: 'Bug', value: 'bug' },
-        { label: 'Feature', value: 'feature' },
-        { label: 'Improvement', value: 'improvement' }
-    ];
-
-    const priorities = [
-        { label: 'Low', value: 'low' },
-        { label: 'Medium', value: 'medium' },
-        { label: 'High', value: 'high' },
-        { label: 'Critical', value: 'critical' }
-    ];
-
-    const assignees = [
-        { label: 'Alice', value: 'alice' },
-        { label: 'Bob', value: 'bob' },
-        { label: 'Charlie', value: 'charlie' }
-    ];
-
-    return (
-        <form>
-            <div className="field">
-                <label htmlFor="category">Category</label>
-                <Dropdown
-                    id="category"
-                    value={formData.category}
-                    options={categories}
-                    onChange={(e) => setFormData({ ...formData, category: e.value })}
-                    placeholder="Select Category"
-                />
-            </div>
-
-            <div className="field">
-                <label htmlFor="priority">Priority</label>
-                <Dropdown
-                    id="priority"
-                    value={formData.priority}
-                    options={priorities}
-                    onChange={(e) => setFormData({ ...formData, priority: e.value })}
-                    placeholder="Select Priority"
-                />
-            </div>
-
-            <div className="field">
-                <label htmlFor="assignee">Assignee</label>
-                <Dropdown
-                    id="assignee"
-                    value={formData.assignee}
-                    options={assignees}
-                    onChange={(e) => setFormData({ ...formData, assignee: e.value })}
-                    placeholder="Assign to..."
-                    showClear
-                    filter
-                />
-            </div>
-        </form>
-    );
-}
-```
-
-## Use Cases
-
-- **Form fields**: Select inputs in forms
-- **Filters**: Filtering data by category, status, etc.
-- **Preferences**: User settings selection
-- **Navigation**: Menu-style navigation options
-- **Status selection**: Workflow state transitions
-- **Type selection**: Choose item types in editors
-
-## Differences from PrimeReact's Select
-
-`primereact/dropdown` no longer exists — PrimeReact 11 renamed it to `primereact/select` and made it **compositional**: you assemble `Select.Root`, `Select.Trigger`, `Select.Value`, `Select.Portal`, `Select.Positioner`, `Select.Popup` and `Select.List` yourself. This wrapper differs from using `Select` directly in two ways:
-
-1. **It is one element, not seven.** The wrapper composes the parts and gates `Select.Filter` and `Select.Clear` on the `filter` / `showClear` props.
-2. **It is a curated surface, not a passthrough.** Only the props in the table above are accepted; the rest of PrimeReact's Select API is reachable through `pt` / `ptOptions` / `unstyled`. That is deliberate — it is what lets the wrapper's API stay stable across PrimeReact versions.
-
-Two details of the composition are worth knowing when you style or test it. `onBlur` rides a wrapping `<span>` rather than `Select.Root`, because React blur bubbles as `focusout`. And `placeholder` is not passed to the root — it goes to `Select.Value` and is the filter input's fallback when no independent `filterPlaceholder` is supplied.
-
-## Best Practices
-
-1. **Provide clear labels**: Always label dropdowns
-2. **Use placeholders**: Guide users with meaningful placeholders
-3. **Enable filtering for long lists**: Use `filter` prop for 10+ options
-4. **Show clear button**: Use `showClear` for optional selections
-5. **Validate selections**: Provide error feedback
-6. **Disable when appropriate**: Disable during loading or when unavailable
-7. **Use object options**: For complex data with multiple properties
-8. **Group related options**: Use grouped options for better organization
-9. **Provide feedback**: Show loading states, error states clearly
-
-## Accessibility
-
-Inherits PrimeReact Select's accessibility features:
-
-- Keyboard navigation (Arrow keys, Enter, Escape)
-- ARIA labels and roles
-- Focus management
-- Screen reader support
-
-Enhance with:
-
-```typescript
-<label htmlFor="dropdown-id">
-    Selection Label
-</label>
-<Dropdown
-    id="dropdown-id"
-    aria-label="Selection Label"
-    // ... other props
-/>
-```
-
-## Styling
-
-`className` and `style` go to the Select root:
-
-```typescript
-<Dropdown
-    className="w-full"
-    // ...
-/>
-```
-
-There is no `panelClassName` — the popup is styled through `pt`, whose slot names are PrimeReact's own:
-
-```typescript
-<Dropdown
-    value={selected}
-    options={options}
-    onChange={(e) => setSelected(e.value)}
-    pt={{
-        root: { className: 'w-full' },
-        popup: { className: 'custom-dropdown-panel' },
-        option: { className: 'px-3 py-2' },
-    }}
-/>
-```
-
-Global CSS is possible too, but outside [PrimeReact's styled mode](../Styling/themed.md) not through `p-*` class names. PrimeReact 11 is unstyled-first: its primitives carry **no `p-*` class at all** unless `styledMode()` hands them PrimeReact's component styles, and parts are identified by data attributes instead:
-
-```css
-[data-scope='select'][data-part='root'] {
-    /* Custom trigger styles */
-}
-
-[data-scope='select'][data-part='popup'] {
-    /* Custom panel styles */
-}
-```
+## Props
 
-See the [pass-through cheat sheet](../Styling/pass-through.md) for the wrapper-by-wrapper `pt` reference.
+| Prop | Purpose |
+|---|---|
+| `value` | Selected value or array for multiple selection. |
+| `options` | Option collection. |
+| `optionLabel` / `optionValue` | Field names for object options. |
+| `placeholder` | Empty trigger text. |
+| `filter` / `filterPlaceholder` | Searchable combobox mode. |
+| `multiple` | Native multiple-selection mode. |
+| `showClear` | Clear action for a single selection. |
+| `invalid` / `disabled` | Control state. |
+| `id`, `name`, `tabIndex`, `aria-*` | Identity, form, and accessibility attributes. |
+| `onChange` / `onBlur` | Selection and focus callbacks. |
+| `pt` | Cratis-owned stable part attributes. |
+
+## Stable parts
+
+`root`, `trigger`, `value`, `clear`, `indicator`, `filter`, `popover`, `listbox`, `option`, and `multiple`.
+
+The popup is portaled outside modal clipping contexts and carries a z-index above Cratis dialogs. Styling uses the `--cratis-*` tokens and stable parts; no renderer selectors are required.
diff --git a/Documentation/Notifications/index.md b/Documentation/Notifications/index.md
index 9dfc0e36..eac18f8e 100644
--- a/Documentation/Notifications/index.md
+++ b/Documentation/Notifications/index.md
@@ -1,119 +1,66 @@
-# Notifications
+---
+title: Notifications
+description: App-wide accessible notifications through the Cratis-owned toast queue.
+---
 
-`CommandDialog` shows success and error feedback for you. But when you run a command **programmatically** — `command.execute()` outside a dialog — nothing tells the user what happened. The `Notifications` components fill that gap with app-wide toasts. Import them from `@cratis/components/Notifications`.
-
-## Mount one Toaster
-
-Mount a single `Toaster` near your app root. Every toast — from anywhere in the tree, even outside React — appears here and auto-dismisses.
-
-```tsx
-import { Toaster } from '@cratis/components/Notifications';
-
-<Toaster position='top-right' />;
-```
-
-Or let the provider mount it for you:
+Mount one toaster, then dispatch notifications from React components or ordinary modules.
 
 ```tsx
 <CratisComponentsProvider toaster>
-    <App />
+    <Application />
 </CratisComponentsProvider>
 ```
 
-| `Toaster` prop     | Type                 | Description                                                                                                                                                                     |
-| ------------------ | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `position`         | `ToasterPosition`    | Corner/edge the toasts stack from — `'top-left'`, `'top-center'`, `'top-right'`, `'bottom-left'`, `'bottom-center'`, `'bottom-right'` or `'center'`. Defaults to `'top-right'`. |
-| `limit`            | `number`             | Maximum toasts shown at once. Defaults to `3`.                                                                                                                                  |
-| `timeout`          | `number`             | Auto-dismiss timeout in milliseconds. Defaults to `6000`.                                                                                                                       |
-| `dismissAriaLabel` | `string`             | Accessible name for each toast's dismiss button. Override to localize. Defaults to `'Dismiss'`.                                                                                 |
-| `pt`               | `ToasterPassThrough` | Pass-through configuration for `region` and every `toast` frame.                                                                                                                |
-
-Use `pt.region` for the app-wide region and `pt.toast` for each toast's root, content, icon, title, description, action and close slots:
-
-```tsx
-<Toaster
-    pt={{
-        region: { root: { className: 'notification-region' } },
-        toast: {
-            root: { className: 'notification' },
-            close: { className: 'notification-close' },
-        },
-    }}
-/>
-```
-
-## Surface a command result with `toastCommandResult`
-
-When you execute a command outside a dialog you have to branch on the granular `ICommandResult` flags — authorized? valid? did it throw? `toastCommandResult` does that branching for you and shows the right toast: a success toast, a warning when not authorized, an error listing the per-field validation messages, or a generic error when the handler threw (stack traces are never shown to users).
-
-```tsx
-import { toastCommandResult } from '@cratis/components/Notifications';
+```ts
+import { toast } from '@cratis/components/Notifications';
 
-const result = await command.execute();
-if (toastCommandResult(result, { successTitle: 'Author registered' })) {
-    refresh();
-}
+toast.success({
+    title: 'Saved',
+    description: 'Your changes were saved.',
+});
 ```
 
-It returns `true` on success, so you can gate follow-up work (close a panel, refresh a query) on the same call. The branches are checked in order and the first match wins: success, then not-authorized (a **warning**, not an error), then validation, then exceptions. `result.exceptionMessages` and stack traces are deliberately never shown to the user — the exception toast carries the generic `exceptionTitle` and nothing else.
-
-| `toastCommandResult` option | Type      | Description                                                           |
-| --------------------------- | --------- | --------------------------------------------------------------------- |
-| `successTitle`              | `string`  | Title for the success toast. Defaults to `'Success'`.                 |
-| `successDescription`        | `string`  | Description for the success toast.                                    |
-| `unauthorizedTitle`         | `string`  | Title when rejected by authorization. Defaults to `'Not authorized'`. |
-| `validationTitle`           | `string`  | Title when validation failed. Defaults to `'Validation failed'`.      |
-| `exceptionTitle`            | `string`  | Title when the handler threw. Defaults to `'Something went wrong'`.   |
-| `showSuccess`               | `boolean` | When `false`, no toast is shown on success. Defaults to `true`.       |
-
-Every title is overridable — pass translated strings to localize.
+## Imperative API
 
-## Ad-hoc toasts with `toast`
+- `toast(options)`
+- `toast.success(options)`
+- `toast.info(options)`
+- `toast.warn(options)`
+- `toast.error(options)`
+- `toast.secondary(options)`
+- `toast.contrast(options)`
+- `toast.update(id, updates)`
+- `toast.dismiss(id?)`
+- `toast.promise(promise, states)`
 
-For notifications unrelated to a command, call the imperative `toast`. Each method takes an **options object**, not a bare string.
+The queue is shared across loaded Components copies. `setToastDispatch()` installs an application-owned dispatch and returns a scoped restore callback.
 
-```tsx
-import { toast } from '@cratis/components/Notifications';
-
-toast.success({ title: 'Saved', description: 'Your changes were saved.' });
-toast.info({ title: 'Heads up' });
-toast.warn({ title: 'Check your input' });
-toast.error({ title: 'Failed', description: 'Please try again.' });
-```
+## Accessible behavior
 
-### Custom content keeps the toast frame
+- Error frames use `role="alert"`; other frames use `role="status"`.
+- The notification region is labeled and polite.
+- Every dismissible frame retains a localized close control, including custom bodies.
+- Auto-dismiss pauses while the frame is hovered or contains keyboard focus.
+- Timeouts have a five-second accessibility floor.
 
-`render` replaces only the toast's content body. Components retains the severity icon and accessible dismiss control, so you do not need to preallocate a toast ID or render your own close button:
+## Custom body
 
 ```tsx
 toast.error({
-    render: (
-        <div>
-            <strong>Import failed</strong>
-            <p>Three rows contain invalid email addresses.</p>
-        </div>
-    ),
+    render: <FailureDetails />,
+    dismissible: true,
 });
 ```
 
-The same framing applies when `toast.update` or a `toast.promise` success/error callback supplies `render`. `dismissible: false` and loading toasts still follow PrimeReact's normal no-close behavior.
+Custom content replaces only the body. The frame, severity indicator, timeout, and dismiss control remain owned by Components.
 
-The severity method is `warn`, not `warning`. Alongside the four above, `toast` also offers `secondary` and `contrast`, and calling `toast(...)` directly takes the same options object with an explicit `severity`.
-
-Every call returns a `ToastId` you can hold on to: `toast.dismiss(id?)` closes that toast (or all of them), `toast.update(id, updates)` rewrites one in place, and `toast.promise(promise, options)` tracks a promise through pending/success/error states.
-
-## Supply an existing notification system
-
-`toast` is a Cratis-owned dispatch contract; PrimeReact is only its default renderer. Install an application-owned implementation with `setToastDispatch()` and restore the previous dispatch when the scope ends:
-
-```typescript
-import { setToastDispatch, type ToastDispatch } from '@cratis/components/Notifications';
-
-const restore = setToastDispatch(myToastDispatch satisfies ToastDispatch);
-
-// toast.success(...) and toastCommandResult(...) now use myToastDispatch.
-// Later, during teardown:
-restore();
-```
+## Toaster props
 
-The contract preserves the existing callable API and severity methods: `show`, `success`, `info`, `warn`, `error`, `secondary`, `contrast`, `update`, `dismiss`, and `promise`. `toastCommandResult` depends on this Cratis dispatch, so command feedback follows the renderer you supply.
+| Prop | Purpose |
+|---|---|
+| `position` | One of the six viewport edges/corners. |
+| `limit` | Maximum visible frames. |
+| `timeout` | Default timeout in milliseconds. |
+| `dismissAriaLabel` | Accessible name for close controls. |
+| `regionAriaLabel` | Accessible name for the notification region. |
+| `pt` | Stable `region`, `toast`, `icon`, `content`, `title`, `description`, `action`, and `close` parts. |
diff --git a/Documentation/ObjectNavigationalBar/index.md b/Documentation/ObjectNavigationalBar/index.md
index 6d2d834b..bbfc830e 100644
--- a/Documentation/ObjectNavigationalBar/index.md
+++ b/Documentation/ObjectNavigationalBar/index.md
@@ -196,7 +196,7 @@ onNavigate(navigationPath.length - 1);  // Back button
 
 ## Styling
 
-The component uses PrimeReact styling:
+The component uses Cratis tokens and stable parts:
 
 - Border at bottom
 - Surface border color
diff --git a/Documentation/StepperCommandDialog/index.md b/Documentation/StepperCommandDialog/index.md
index 49ba52c6..6b59ff67 100644
--- a/Documentation/StepperCommandDialog/index.md
+++ b/Documentation/StepperCommandDialog/index.md
@@ -1,6 +1,6 @@
 # StepperCommandDialog
 
-The `StepperCommandDialog` component provides a multi-step wizard dialog interface for executing commands, built on top of `CommandStepper` and [PrimeReact](https://primereact.org/)'s compositional Stepper.
+The `StepperCommandDialog` component provides a multi-step wizard dialog interface for executing commands, built on top of the Cratis-owned `CommandStepper`.
 
 ## Purpose
 
@@ -103,7 +103,7 @@ function MyComponent() {
 - `cancelLabel`: Label for the footer cancel button (default: `'Cancel'`)
 - `isValid`: Additional validity gate combined with command form validity
 - `width`: Dialog width (default: `'600px'`)
-- `resizable`: Accepted but a no-op in PrimeReact 11 — the headless dialog has no built-in resize handle. Existing call sites keep compiling; the prop simply has no effect.
+- `resizable`: Accepted for source compatibility; the viewport-bounded Cratis dialog has no resize handle. Existing call sites keep compiling; the prop simply has no effect.
 - `style`: Custom CSS styles
 - `contentStyle`: Custom CSS styles for the dialog content area
 - `dialogClassName`: Extra CSS class name for the outer dialog root
@@ -114,7 +114,7 @@ function MyComponent() {
 
 ### Stepper Props
 
-`StepperCustomizationProps` is Cratis-owned — it no longer aliases PrimeReact's `StepperProps`, so the surface below is the whole of it. PrimeReact 11's Stepper has no built-in `orientation` / `headerPosition` / `start` / `end`; the wrapper re-implements them over the compositional parts.
+`StepperCustomizationProps` is Cratis-owned. The surface below is complete and maps onto stable stepper parts rather than renderer props.
 
 - `orientation`: `'horizontal'` (default) or `'vertical'`
 - `headerPosition`: `'top'` (default) or `'bottom'`
@@ -122,9 +122,9 @@ function MyComponent() {
 - `onChangeStep`: Callback when the active step changes, receiving `{ index }` (zero-based)
 - `start`: Content rendered before the stepper
 - `end`: Content rendered after the stepper
-- `pt`: PrimeReact pass-through configuration for the inner stepper's parts
+- `pt`: Cratis-owned HTML attributes for the inner stepper's stable parts
 - `ptOptions`: Pass-through options controlling merge vs. replace for `pt`
-- `unstyled`: Removes every base PrimeReact style on the inner stepper
+- `unstyled`: Legacy compatibility flag; ignored
 
 ## Callback Behavior
 
@@ -228,7 +228,7 @@ Each step is defined by a `StepperPanel` from `@cratis/components/CommandDialog`
 
 CommandForm fields placed inside a `StepperPanel` are automatically bound to the same command instance, regardless of which step they are on.
 
-`StepperPanel` is Cratis-owned — it replaces PrimeReact 10's `primereact/stepperpanel`, which no longer exists in PrimeReact 11. It is a pure marker: the stepper consumes its props, so rendering one on its own produces nothing.
+`StepperPanel` is a pure Cratis marker: the stepper consumes its props, so rendering one on its own produces nothing.
 
 ## Conditional steps
 
@@ -263,7 +263,7 @@ The count is not fixed for the lifetime of the dialog either. A late-resolving q
 
 - `@cratis/arc/commands` for command execution
 - `@cratis/arc.react/commands` for form handling
-- [PrimeReact](https://primereact.org/)'s compositional Stepper, plus the Cratis-owned `StepperPanel`, for the wizard UI
+- the Cratis-owned Stepper and `StepperPanel` for the wizard UI
 - The Cratis [`Dialog`](../Dialogs/dialog.md) for the modal wrapper
 
 ## See Also
diff --git a/Documentation/Styling/baseline-theme.md b/Documentation/Styling/baseline-theme.md
index 63d6a754..c6b75cc9 100644
--- a/Documentation/Styling/baseline-theme.md
+++ b/Documentation/Styling/baseline-theme.md
@@ -1,55 +1,22 @@
-# Use the Cratis baseline theme
+---
+title: Use the baseline theme
+description: Apply the license-free Cratis baseline appearance.
+---
 
-PrimeReact 11 is unstyled-first, and [its styled mode](themed.md) needs two more packages — `@primereact/styles` and `@primeuix/themes`. If you want a polished default look **without them**, ship the components unstyled and import the **Cratis baseline theme** — a token-based stylesheet that skins every component from the `--cratis-*` layer. (A PrimeUI license key is still required to run PrimeReact 11 itself — see [Licensing](../migration.md#licensing).)
+Import the baseline after tokens and structural styles:
 
-## Setup
-
-Two things: run the provider unstyled, and import the theme plus add the `cratis-theme` class to an ancestor.
-
-```tsx
-import 'primeicons/primeicons.css';
-import '@cratis/components/tokens';  // the --cratis-* token layer
-import '@cratis/components/styles';  // every component stylesheet
-import '@cratis/components/theme';   // the baseline theme
-import { CratisComponentsProvider } from '@cratis/components';
-
-export const App = () => (
-    <CratisComponentsProvider value={{ unstyled: true }}>
-        <div className="cratis-theme">   {/* on <body>, your app root, or a subtree */}
-            <YourApp />
-        </div>
-    </CratisComponentsProvider>
-);
+```ts
+import '@cratis/components/tokens';
+import '@cratis/components/styles';
+import '@cratis/components/theme';
 ```
 
-The rules are scoped under `.cratis-theme`, so you can theme the whole document or just a subtree. Keep the import order — `theme` assigns `--cratis-*` values that `styles` reads.
-
-## Dark mode
-
-Add the `cratis-dark` class to an ancestor for the dark palette:
+The stylesheet supplies light and dark semantic values. Add `cratis-dark` to an ancestor to select the dark values.
 
 ```tsx
-<body className="cratis-dark">
-    <div className="cratis-theme">…</div>
-</body>
-```
-
-## Layering under a preset
-
-The baseline theme defers to a `@primeuix/themes` preset's `--p-*` tokens when one is present, so you can also run it underneath [styled mode](themed.md) — the preset drives the palette and the baseline theme fills the gaps. `styledMode()`'s dark scheme keys off the same `.cratis-dark` class by default, so one class switches both.
-
-## Overriding
-
-Every rule is overridable with your own CSS or `pt`. The baseline theme styles the unstyled primitives through their `[data-scope]` attributes, so target those (or your own `className`, or the `--cratis-*` tokens):
-
-```css
-.cratis-theme [data-scope='button'] { border-radius: 999px; }   /* pill buttons */
-.dangerous { background: var(--cratis-red-500); color: white; }
+<div className={dark ? 'cratis-dark' : undefined}>
+    <Application />
+</div>
 ```
 
-The baseline theme also maps the `--color-*` token family that `@cratis/arc.react` reads, so Arc's form-field chrome (labels, borders, validation errors) is themed alongside the PrimeReact components.
-
-## When this is the wrong fit
-
-- You want PrimeReact's own look — one of its design systems (Aura, Lara, …) painted by PrimeReact's component styles — [use styled mode](./themed.md) instead.
-- You have a strict design system to honor — go [fully unstyled](./unstyled.md) with your own `pt`.
+Override any `--cratis-*` variable after the theme import to adapt the baseline. For a complete product design, omit the baseline and follow [Build a product theme](themed.md).
diff --git a/Documentation/Styling/cratis-tokens.md b/Documentation/Styling/cratis-tokens.md
index fa79a170..322e6f51 100644
--- a/Documentation/Styling/cratis-tokens.md
+++ b/Documentation/Styling/cratis-tokens.md
@@ -1,179 +1,62 @@
-# Cratis token reference
+---
+title: Cratis token reference
+description: Stable semantic CSS variables consumed by Components markup and structural styles.
+---
 
-The `--cratis-*` CSS variable layer is the Cratis-scoped tint surface every Cratis wrapper reads from. Each token resolves the **PrimeReact v11 design token first** (e.g. `--p-content-border-color`), falling back to the **legacy v10 theme variable** (e.g. `--surface-border`):
+The `--cratis-*` variables are the supported theming boundary. The optional baseline theme supplies concrete values; a product design system can define them directly.
 
-```css
---cratis-surface-border: var(--p-content-border-color, var(--surface-border));
-/*                            ^ v11 (@primeuix/themes)      ^ v10 legacy      */
-```
-
-`@cratis/components` 3.0 requires `primereact@^11` as a peer, so the **v11 arm is the one that resolves in a correctly installed app**. The v10 arm is kept deliberately for the upgrade window, when an app still has a compiled v10 theme stylesheet on the page while it ports its own screens — or imports [`@cratis/components/primereact-v10-palette`](../migration.md#theming-without-a-theme-stylesheet), which restores those v10 names for CSS already written against them. Nothing breaks the day that stylesheet is removed — the v11 arm was already winning.
-
-This indirection is the single seam that insulates your code (and your consumers' `--cratis-*` overrides) from PrimeReact's token system changing underneath you. It is the reason this library could span a PrimeReact major version at all.
-
-You override `--cratis-*` tokens when you want **just** Cratis-scoped surfaces (validation error text, FormElement addon, breadcrumb borders, …) tinted independently of PrimeReact widgets. To repaint PrimeReact widgets themselves, override the tokens under the baseline theme or derive your own preset in styled mode — see [the custom palette setup](custom-palette.md).
-
-## Where the values come from
-
-PrimeReact 11 ships **zero CSS**, so nothing populates `--p-*` until something does it at runtime. Two things can:
-
-- **A `@primeuix/themes` preset**, in [PrimeReact's styled mode](themed.md). A preset is a plain JavaScript token object; `@primeuix/styled` turns it into `--p-*` custom properties when the provider receives it. `styledMode()` from `@cratis/components/styled` hands the provider the preset together with PrimeReact's component styles — the tokens alone would populate `--p-*` (and so `--cratis-*`) but paint no widget, because the primitives carry no `p-*` class without those styles.
-- **The [Cratis baseline theme](baseline-theme.md).** `@cratis/components/theme` skips `--p-*` entirely and assigns the `--cratis-*` tokens concrete values directly, light and dark — no preset needed. It still defers to a preset's `--p-*` when one is present.
-
-With neither, the tokens resolve to nothing and the rules that read them no-op. That is deliberate: the library stays theme-agnostic rather than imposing a default palette on consumers.
-
-## Loading the tokens
-
-The token layer is its own stylesheet, imported alongside the component CSS:
-
-```ts
-import '@cratis/components/tokens';   // the --cratis-* declarations
-import '@cratis/components/styles';   // every component stylesheet + the Tailwind utilities
-```
-
-Import `tokens` **first** — `styles` (and `theme`, if you use it) resolve variables that `tokens` declares.
-
-> [!IMPORTANT]
-> In 2.x, `@cratis/components/styles` carried the token declarations as well. It no longer does: `styles` is now the component CSS plus the compiled Tailwind utilities, and `tokens` is a separate import you always need. Upgrading apps must add the `tokens` line.
-
-If you bring your own utility CSS solution and want nothing else from the package's Tailwind build, `tokens` still works on its own — but note that omitting `styles` also omits every component stylesheet, so wrappers like `DataPage` and `Toolbar` will lose their layout.
-
-## Token catalog
-
-v11 is not a 1:1 rename of v10 — where v11's vocabulary has no direct equivalent for a v10 concept (`surface-ground`, `surface-section`, `surface-overlay`, the composite `focus-ring`), the closest durable v11 semantic token is used (see the inline notes in `tokens.css`). Set the `--cratis-*` token to override regardless of which PrimeReact version is loaded.
-
-### Surfaces
-
-| Token | Cratis surfaces tinted by it |
-|---|---|
-| `--cratis-surface-0`      | Reserved for any Cratis-scoped surface that maps to PrimeReact's `--surface-0`. |
-| `--cratis-surface-100`    | `FormElement` addon background. |
-| `--cratis-surface-ground` | `PivotViewer` canvas and panel backgrounds. |
-| `--cratis-surface-section` | `PivotViewer` panel section backgrounds. |
-| `--cratis-surface-card`   | Backgrounds of the `ObjectContentEditor` snapshot card and similar panels; `PivotViewer` card gradients. |
-| `--cratis-surface-overlay` | Overlay backgrounds inside Cratis wrappers. |
-| `--cratis-surface-hover`  | Hover state on row alternation inside `ObjectContentEditor`. |
-| `--cratis-surface-border` | `FormElement` addon border, `ObjectNavigationalBar` bottom border, `SchemaEditor` bottom border, table/paginator borders inside `DataTableForQuery` / `DataTableForObservableQuery`. |
-
-### Text
-
-| Token | Cratis surfaces tinted by it |
-|---|---|
-| `--cratis-text-color`           | Default body text inside Cratis wrappers. |
-| `--cratis-text-color-secondary` | `ObjectContentEditor` label column, `ObjectNavigationalBar` breadcrumbs, `SchemaEditor` secondary labels. |
-
-### Brand
-
-| Token | Cratis surfaces tinted by it |
-|---|---|
-| `--cratis-primary-color`      | `ObjectContentEditor` navigation links into nested objects/arrays, default brand accent. |
-| `--cratis-primary-color-text` | Foreground used on top of `--cratis-primary-color` backgrounds (e.g. CommandStepper step number color). |
-| `--cratis-primary-300`        | `PivotViewer` loading spinner ring. |
-| `--cratis-primary-400`        | `PivotViewer` loading spinner ring. |
-| `--cratis-primary-500`        | `PivotViewer` loading spinner ring and card gradient. |
-| `--cratis-primary-600`        | `PivotViewer` loading spinner ring. |
-
-### Selection / highlight
-
-| Token | Cratis surfaces tinted by it |
-|---|---|
-| `--cratis-highlight-bg`         | Background of timestamp/highlight chips inside `ObjectContentEditor`. |
-| `--cratis-highlight-text-color` | Text on top of `--cratis-highlight-bg`. |
-
-### Semantic accents
+## Core colors
 
-| Token | Cratis surfaces tinted by it |
+| Token | Purpose |
 |---|---|
-| `--cratis-green-500`  | `CommandStepper` visited-step indicator. |
-| `--cratis-orange-500` | Reserved for warning accents. |
-| `--cratis-red-500`    | Inline validation error text (replaces PrimeReact's `.p-error` styling), `CommandStepper` error-step indicator, error border tint inside `ObjectContentEditor`. |
+| `--cratis-primary-color` | Primary actions and selected controls. |
+| `--cratis-primary-color-text` | Content on the primary color. |
+| `--cratis-primary-300` … `--cratis-primary-600` | Accent scale used by specialized surfaces. |
+| `--cratis-green-500` | Success state. |
+| `--cratis-orange-500` | Warning state. |
+| `--cratis-red-500` | Error/destructive state. |
 
-### Geometry
+## Surfaces
 
-| Token | Cratis surfaces tinted by it |
+| Token | Purpose |
 |---|---|
-| `--cratis-border-radius` | Border radius on `FormElement` addon and any Cratis surface that mirrors PrimeReact's `--border-radius`. |
+| `--cratis-surface-ground` | Application/page background. |
+| `--cratis-surface-section` | Grouped section background. |
+| `--cratis-surface-card` | Cards and inputs. |
+| `--cratis-surface-overlay` | Dialogs, dropdowns, popovers, and toasts. |
+| `--cratis-surface-hover` | Hovered or quiet selected state. |
+| `--cratis-surface-border` | Borders and dividers. |
+| `--cratis-surface-0` / `--cratis-surface-100` | Small neutral ramp used by display components. |
 
-### Effects
+## Text and interaction
 
-| Token | Cratis surfaces tinted by it |
+| Token | Purpose |
 |---|---|
-| `--cratis-focus-ring` | Focus-ring box-shadow on interactive `PivotViewer` elements. |
-| `--cratis-maskbg`     | `PivotViewer` modal mask background. |
+| `--cratis-text-color` | Primary text. |
+| `--cratis-text-color-secondary` | Supporting text and placeholders. |
+| `--cratis-highlight-bg` | Selected/highlighted background. |
+| `--cratis-highlight-text-color` | Text on a highlighted background. |
+| `--cratis-focus-ring` | Keyboard-visible focus treatment. |
+| `--cratis-maskbg` | Modal backdrop. |
+| `--cratis-border-radius` | Default component radius. |
 
-## Overriding tokens
-
-Apply on `:root` for an app-wide override:
+## Map a product system
 
 ```css
 :root {
-    --cratis-red-500: #f97316;
-    --cratis-border-radius: 12px;
-}
-```
-
-…or on an ancestor scope for a region-specific look:
-
-```css
-.brand-region {
-    --cratis-surface-border: theme('colors.violet.500');
-    --cratis-text-color-secondary: theme('colors.violet.300');
+    --cratis-primary-color: var(--product-accent-700);
+    --cratis-primary-color-text: var(--product-text-inverse);
+    --cratis-surface-ground: var(--product-canvas);
+    --cratis-surface-card: var(--product-surface);
+    --cratis-surface-overlay: var(--product-surface-raised);
+    --cratis-surface-hover: var(--product-subtle);
+    --cratis-surface-border: var(--product-border);
+    --cratis-text-color: var(--product-text-primary);
+    --cratis-text-color-secondary: var(--product-text-secondary);
+    --cratis-focus-ring: var(--product-focus-ring);
 }
 ```
 
-```tsx
-<div className="brand-region">
-    <ObjectNavigationalBar navigationPath={path} onNavigate={…} />
-</div>
-```
-
-Cratis tokens cascade like any other CSS variable, so any selector that increases specificity over `:root` wins.
-
-## With TailwindCSS
-
-Tailwind's `@layer base` is the idiomatic spot — declare tokens once and let Tailwind handle cascade and dark mode:
-
-```css
-@import "tailwindcss";
-@import "@cratis/components/tokens";
-@import "@cratis/components/styles";
-
-@layer base {
-    :root {
-        --cratis-surface-border: theme('colors.slate.700');
-        --cratis-text-color:     theme('colors.slate.50');
-        --cratis-red-500:        theme('colors.red.500');
-    }
-
-    .dark {
-        --cratis-surface-border: theme('colors.slate.600');
-        --cratis-text-color:     theme('colors.slate.100');
-    }
-}
-```
-
-## Relationship to PrimeReact variables
-
-The Cratis token layer is **additive** on top of PrimeReact's theme system, not a replacement for it. The cascade in `tokens.css` resolves the v11 token first, then the v10 legacy variable:
-
-```css
-:root {
-    /* v11 (@primeuix/themes) first, v10 legacy fallback */
-    --cratis-surface-card: var(--p-content-background, var(--surface-card));
-    --cratis-text-color:   var(--p-text-color, var(--text-color));
-    /* … */
-}
-```
-
-That means:
-
-- Repaint PrimeReact itself — in styled mode, derive the preset with `definePreset` so the `--p-*` tokens change — and both PrimeReact widgets *and* Cratis surfaces follow. (During an upgrade window, a still-loaded v10 theme's legacy `--surface-*` / `--text-color` variables — or the ones `@cratis/components/primereact-v10-palette` restores — reach the Cratis surfaces the same way, through the fallback arm.)
-- Override `--cratis-surface-card` → only Cratis surfaces follow; PrimeReact widgets keep their existing color.
-- Under the [Cratis baseline theme](baseline-theme.md) the distinction collapses: the theme skins the widgets from the same `--cratis-*` tokens, so one override repaints both.
-
-Use the preset (styled mode) or the baseline theme's tokens when you want a whole-UI repaint. Use the Cratis token when you want a Cratis-specific accent that differs from PrimeReact widgets.
-
-## See also
+The token layer retains fallbacks to the generic `--surface-*`, `--text-color`, and `--primary-color` names for a staged migration from Components 3. New product code should define `--cratis-*` directly.
 
-- [Use a custom palette on top of a PrimeReact theme](custom-palette.md) — for whole-UI repainting with PrimeReact variables
-- [Pass-through cheat sheet](pass-through.md) — for per-slot styling beyond what tokens reach
+Use [Stable component parts](pass-through.md) when token changes are not enough for a product-specific component treatment.
diff --git a/Documentation/Styling/custom-palette.md b/Documentation/Styling/custom-palette.md
index 71d5fd34..fa5c6216 100644
--- a/Documentation/Styling/custom-palette.md
+++ b/Documentation/Styling/custom-palette.md
@@ -1,159 +1,22 @@
-# Use a custom palette on top of a theme
+---
+title: Customize the palette
+description: Override the semantic Cratis color tokens without replacing component structure.
+---
 
-You want a theme's chrome — its dialog frames, button shapes, focus rings, input borders — but in your own colors. You don't want to write a theme from scratch.
-
-This setup keeps a theme as the **structural baseline** and repaints it with your palette. Which knob you turn depends on which theme you started from:
-
-- **[Cratis baseline theme](baseline-theme.md)** — override the `--cratis-*` tokens in CSS.
-- **[PrimeReact's styled mode](themed.md)** (license, `@primereact/styles` + `@primeuix/themes`) — derive your own preset from `CratisPreset` with `definePreset` and hand it to `styledMode({ preset })`.
-
-Either way the `--cratis-*` layer follows your palette, so Cratis-scoped surfaces stay in sync.
-
-## With the Cratis baseline theme (CSS token overrides)
-
-The baseline theme paints everything from the `--cratis-*` tokens. Override them under `.cratis-theme` (loaded after the theme so your values win):
-
-```tsx
-import '@cratis/components/tokens';
-import '@cratis/components/styles';
-import '@cratis/components/theme';
-import './palette.override.css';   // after the theme so it wins
-```
-
-```css
-/* palette.override.css */
-.cratis-theme {
-    /* Surfaces */
-    --cratis-surface-0:       #1e293b;
-    --cratis-surface-100:     #1e293b;
-    --cratis-surface-section: #0f172a;
-    --cratis-surface-card:    #1e293b;
-    --cratis-surface-overlay: #1e293b;
-    --cratis-surface-hover:   #334155;
-    --cratis-surface-border:  #334155;
-
-    /* Text */
-    --cratis-text-color:           #f8fafc;
-    --cratis-text-color-secondary: #94a3b8;
-
-    /* Brand */
-    --cratis-primary-color:      #38bdf8;
-    --cratis-primary-color-text: #0b1220;
-
-    /* Selection */
-    --cratis-highlight-bg:         #1e40af;
-    --cratis-highlight-text-color: #ffffff;
-
-    /* Geometry */
-    --cratis-border-radius: 10px;
-}
-
-/* Dark palette is applied when `cratis-dark` is on the same ancestor. */
-.cratis-theme.cratis-dark {
-    --cratis-surface-card: #0b1220;
-    --cratis-text-color:   #e2e8f0;
-}
-```
-
-## In PrimeReact's styled mode (`definePreset`)
-
-Presets are customized in TypeScript, not CSS: derive a new preset from a base one with `definePreset` and hand it to `styledMode()`, which pairs it with PrimeReact's component styles so the widgets are actually painted (a preset alone emits `--p-*` tokens but styles nothing — see [styled mode](themed.md)). Start from `CratisPreset` to keep the PrimeReact 10 look of Cratis applications, or from any `@primeuix/themes` preset. Design-token references like `{sky.500}` point at the preset's built-in primitive palette:
-
-```ts
-// brand-preset.ts
-import { definePreset } from '@primeuix/themes';
-import { CratisPreset } from '@cratis/components/styled';
-
-export const BrandPreset = definePreset(CratisPreset, {
-    semantic: {
-        primary: {
-            50: '{sky.50}',   100: '{sky.100}', 200: '{sky.200}',
-            300: '{sky.300}', 400: '{sky.400}', 500: '{sky.500}',
-            600: '{sky.600}', 700: '{sky.700}', 800: '{sky.800}',
-            900: '{sky.900}', 950: '{sky.950}',
-        },
-    },
-});
-```
-
-```tsx
-import { CratisComponentsProvider } from '@cratis/components';
-import { styledMode } from '@cratis/components/styled';
-import { BrandPreset } from './brand-preset';
-
-export const App = () => (
-    <CratisComponentsProvider value={{ license: 'YOUR-PRIMEUI-KEY', ...styledMode({ preset: BrandPreset }) }}>
-        <YourApp />
-    </CratisComponentsProvider>
-);
-```
-
-Dark mode follows `styledMode()`'s `darkModeSelector` — `.cratis-dark` by default, the same class the baseline theme uses — so the preset's dark scheme and the `--cratis-*` tokens switch together.
-
-## Scoped overrides
-
-The `--cratis-*` tokens cascade like any other CSS variable, so an ancestor scope works for region-specific looks with the baseline theme:
-
-```css
-.dark-zone {
-    --cratis-surface-card:  #0b1220;
-    --cratis-text-color:    #f8fafc;
-    --cratis-primary-color: #60a5fa;
-}
-```
-
-```tsx
-<>
-    <Dialog title="Standard look">…</Dialog>
-
-    <div className="dark-zone">
-        <Dialog title="Always dark in here">…</Dialog>
-    </div>
-</>
-```
-
-## Shipping multiple palettes (light / dark / brand variants)
-
-Put each palette behind a class on the root element and toggle the class with your theme switcher:
+Define semantic values after importing the baseline theme:
 
 ```css
-.cratis-theme.theme-light {
-    --cratis-surface-card: #ffffff;
-    --cratis-text-color:   #0f172a;
-    /* … */
-}
-
-.cratis-theme.theme-dark {
-    --cratis-surface-card: #1e293b;
-    --cratis-text-color:   #f8fafc;
-    /* … */
+:root {
+    --cratis-primary-color: #0f766e;
+    --cratis-primary-color-text: #ffffff;
+    --cratis-highlight-bg: #ccfbf1;
+    --cratis-highlight-text-color: #115e59;
 }
 
-.cratis-theme.theme-brand {
-    --cratis-surface-card:  #1f1147;
-    --cratis-text-color:    #ede9fe;
-    --cratis-primary-color: #a78bfa;
-    /* … */
+.cratis-dark {
+    --cratis-primary-color: #5eead4;
+    --cratis-primary-color-text: #042f2e;
 }
 ```
 
-```tsx
-document.documentElement.classList.add('theme-dark');
-```
-
-The baseline theme's own `cratis-dark` class is the simplest light/dark switch when you only need those two — add it alongside `cratis-theme` for dark, remove it for light.
-
-## What `--cratis-*` tokens are for in this setup
-
-Two override surfaces are available, with different reach:
-
-- **The theme's palette** (`--cratis-*` for the baseline theme, or the preset's `--p-*` design tokens in styled mode) — read by the widgets. Override these to repaint the whole UI.
-- **`--cratis-*` tokens on a Cratis-only scope** — read by Cratis-scoped surfaces (validation errors, the FormElement addon, breadcrumb borders, etc.). Override these when you want Cratis surfaces to differ from the surrounding widgets.
-
-See [Cratis token reference](cratis-tokens.md) for the full Cratis token list, and [Pass-through cheat sheet](pass-through.md) when you want even tighter per-component control.
-
-## When to use fully unstyled mode
-
-This setup stops being a good fit when:
-
-- You need to restyle the structural chrome itself — for example, a non-rectangular Dialog frame, a completely different Button shape, or a design system with a custom focus-ring system. Use [fully unstyled mode](unstyled.md) and bring the visuals yourself.
+Prefer semantic product variables when several libraries share the same design system, then map those values onto `--cratis-*` once.
diff --git a/Documentation/Styling/getting-started.md b/Documentation/Styling/getting-started.md
index 785c8044..35d0851f 100644
--- a/Documentation/Styling/getting-started.md
+++ b/Documentation/Styling/getting-started.md
@@ -1,74 +1,23 @@
-# Getting Started
+---
+title: Set up styling
+description: Import Components structure and choose baseline or product-owned token values.
+---
 
-Every styling option shares the same setup — an install, two stylesheet imports, and the provider. The differences come from what you load **on top** of that baseline.
-
-## Install
-
-From 3.0, **PrimeReact is a peer dependency, not a bundled one.** You install it alongside `@cratis/components`:
-
-```bash
-npm install @cratis/components primereact @primereact/core @primereact/headless primeicons
-# or
-yarn add @cratis/components primereact @primereact/core @primereact/headless primeicons
-```
-
-Why the extra names, when 2.x needed none? Because bundling PrimeReact meant an app that also depended on it could end up with **two copies** — and two copies of PrimeReact means two `PrimeReactProvider` React contexts. Components rendered from the library then read a different config, theme and z-index registry than the ones you render yourself. Nothing errors; overlays just stack wrongly and `pt` / `unstyled` silently stop applying. Declaring the peer is what collapses it to one copy, so **if you carried a `resolutions` / `overrides` pin for `primereact` to work around this, you can delete it.**
-
-Two more notes:
-
-- `primeicons` went **7 → 8** alongside PrimeReact 11.
-- `primereact` pins `@primereact/core` and `@primereact/headless` to its own exact version, so all three land on the same release. Declaring them anyway is what makes a strict installer (pnpm, Yarn PnP) resolve them for the library too.
-- `@primereact/styles` and `@primeuix/themes` are **optional** peers — install them only for [PrimeReact's styled mode](themed.md). The baseline theme and unstyled mode need neither.
-
-The heavier extras (`pixi.js` for `PivotViewer`, `framer-motion` for animated panels, `allotment` for the `DataPage` resizable layout) are still regular dependencies, so they come down with the package and modern bundlers tree-shake away the ones you never import. The remaining peers — `react`/`react-dom` 19+, `@cratis/arc*`, `reflect-metadata`, and `tsyringe` — already come with your Arc frontend.
-
-## Import the stylesheets
-
-Components no longer import their own CSS. In 2.x every component did `import './Foo.css'`, which put stylesheets in the JavaScript module graph and made the published package unloadable by Node — no consumer whose test environment is `node` could render a `Dialog` in a spec. 3.0 takes CSS out of that graph entirely, and the cost is one explicit import block in your app entry point:
+Import the token and structural layers once:
 
 ```ts
-import '@cratis/components/tokens';   // the --cratis-* token layer
-import '@cratis/components/styles';   // every component stylesheet, in one file
-import '@cratis/components/theme';    // optional — the Cratis baseline look (MIT CSS)
-```
-
-Import them in that order: `styles` and `theme` both consume the tokens.
-
-- **`tokens`** declares the `--cratis-*` CSS variables every Cratis surface reads from. Always import it.
-- **`styles`** is the component CSS plus the Tailwind utilities the package uses internally. It also vendors `allotment/dist/style.css`, which `DataPage` needs for its split view to lay out — if you were importing that yourself, you can drop it. Note that `styles` is *new content behind the same specifier*: in 2.x it resolved to only the compiled Tailwind utilities.
-- **`theme`** is optional — see [Use the Cratis baseline theme](baseline-theme.md).
-
-## Wire the provider
-
-Mount [`CratisComponentsProvider`](../Common/cratis-components-provider.md) once at the root of your tree. The provider is a thin wrapper around PrimeReact's own `PrimeReactProvider` and is where you configure `unstyled`, `pt`, `ptOptions`, `inputVariant`, `ripple`, `zIndex`, `locale`, `theme`, `defaults` and `license` — all through its single `value` prop:
-
-```tsx
 import '@cratis/components/tokens';
 import '@cratis/components/styles';
-import { CratisComponentsProvider } from '@cratis/components';
-
-export const App = () => (
-    <CratisComponentsProvider>
-        <YourApp />
-    </CratisComponentsProvider>
-);
 ```
 
-## What's loaded so far
-
-With nothing else, you've imported:
-
-- The `--cratis-*` token layer (so Cratis-scoped surfaces have a stable variable surface to read from)
-- Every component stylesheet, plus the Tailwind utility classes used internally by Cratis wrappers (so layout, spacing, sizing all work)
-- The provider that hosts `pt` / `unstyled` / locale / overlay z-index settings
+For the baseline appearance, also import:
 
-That's enough for the wrappers to render structurally, but PrimeReact 11 is **unstyled-first**: widgets need a look applied before they resemble anything other than raw browser primitives. Choose the setup that matches how much visual control you need:
+```ts
+import '@cratis/components/theme';
+```
 
-- [Use the Cratis baseline theme](baseline-theme.md) — the default look, no preset needed
-- [Use PrimeReact's styled mode](themed.md) — `styledMode()`: a `@primeuix/themes` preset plus PrimeReact's own component styles
-- [Use a custom palette on top of a theme](custom-palette.md) — keep the theme's structure and supply your colors
-- [Use fully unstyled mode](unstyled.md) — bring every visual yourself through `pt` / CSS
+For a custom product, omit `theme` and define the semantic `--cratis-*` variables in the product stylesheet. Import product values after `tokens` so they win in the cascade.
 
-## Using `PrimeReactProvider` directly
+Components no longer imports or requires PrimeReact, PrimeIcons, PrimeUI themes, or a renderer provider.
 
-`CratisComponentsProvider` is optional. If you'd rather mount `PrimeReactProvider` from `@primereact/core` directly, that works too — every Cratis wrapper reads the same context. The Cratis provider exists to give Cratis a single place to layer in defaults later without breaking consumers, and to keep the setup discoverable. See [CratisComponentsProvider](../Common/cratis-components-provider.md) for the full prop reference.
+See [Build a product theme](themed.md) and [Stable component parts](pass-through.md).
diff --git a/Documentation/Styling/index.md b/Documentation/Styling/index.md
index 42ac17fb..b2e3681c 100644
--- a/Documentation/Styling/index.md
+++ b/Documentation/Styling/index.md
@@ -1,85 +1,28 @@
-# Styling
+---
+title: Styling
+description: Style Components with Cratis tokens, structural CSS, and stable parts.
+---
 
-> [!CAUTION]
-> **PrimeReact 11 is not MIT.**
-> `@cratis/components` is MIT, but as of 3.0.0 it builds on **PrimeReact 11**, which is part of
-> PrimeTek's commercial **PrimeUI** family — as are `primeicons` 8.x, `@primereact/core`,
-> `@primereact/headless`, `@primereact/styles`, `@primeuix/themes` and `@primeuix/styled`. PrimeReact 10 was MIT; 11 is not.
->
-> A **PrimeUI license key is required regardless of how you style** — the check runs when
-> `PrimeReactProvider` mounts, not when a theme is applied. Without one you get a console warning and
-> an *"Invalid PrimeUI License"* banner, in development and production.
->
-> The [Community License](https://primeui.dev/licenses/community) is free for individuals, students,
-> non-profits, non-commercial open source, and organizations under $1M revenue with fewer than 5
-> developers. Everyone else needs a [Commercial License](https://primeui.dev/licenses/commercial).
-> Redistributing a library that others build with needs a separate OEM License.
->
-> Need to stay MIT-only? **`@cratis/components` 2.x remains on PrimeReact 10.** See
-> [Licensing](/components/migration/#licensing).
+Components separates behavior from product appearance through three Cratis-owned layers:
 
-Cratis Components is built on top of PrimeReact 11 and stays out of your way when it comes to styling. PrimeReact 11 is **unstyled-first** — it ships no widget chrome by default — so you decide the look: use the Cratis baseline theme, run PrimeReact's own styled mode, keep a theme's structure while painting your own palette, or take complete control and provide every visual yourself — all without forking the library or fighting it.
+1. `@cratis/components/tokens` declares semantic variables.
+2. `@cratis/components/styles` supplies component structure.
+3. `@cratis/components/theme` optionally supplies baseline values.
 
-The supported styling setups are not mutually exclusive: every component still exposes the same building blocks, so you can combine them per-component or per-region of your app.
-
-## TL;DR — choose a styling setup
-
-| Setup | When | Effort | What you write |
-|---|---|---|---|
-| [**Cratis baseline theme**](baseline-theme.md) | You want a polished default look with no extra dependency. | Lowest | `import '@cratis/components/theme'` + `class="cratis-theme"` |
-| [**PrimeReact's styled mode**](themed.md) | You want PrimeReact's own look — a `@primeuix/themes` preset painting PrimeReact's component styles — and have a PrimeUI license key. | Low | `...styledMode()` from `@cratis/components/styled` in the provider `value` (+ a `license` key); install `@primereact/styles` and `@primeuix/themes` |
-| [**A custom palette on top of a theme**](custom-palette.md) | You want a theme's structure but your own colors. | Low | `--cratis-*` overrides on the baseline theme, or `styledMode({ preset: definePreset(CratisPreset, …) })` |
-| [**Fully unstyled mode**](unstyled.md) | You're integrating into a tightly controlled design system. | Highest | `unstyled: true` + a `pt` preset in CSS or Tailwind |
-
-Every setup shares the same install and stylesheet imports described in [Getting Started](getting-started.md). You can change direction later because the same provider, tokens, and `pt` hooks stay available.
-
-## Why the themed options need a theme
-
-**PrimeReact 11 ships zero CSS.** There is no `primereact/resources/themes/*.css` any more — the v10 theme stylesheets do not exist, and there is nothing to `<link>` or `import`. The `primereact` package is **unstyled primitives**: on its own it supplies **no** widget chrome at all — no padding, borders, dialog frame, focus rings, or button shapes — and its elements carry **no `p-*` class names**; parts are identified by data attributes instead (`[data-scope="dialog"][data-part="close"]`). The `p-*` class names and the CSS behind them live in a separate package, `@primereact/styles`, and PrimeReact's own styled components (`@primereact/ui`) are simply the primitives with those styles preset. `@cratis/components` builds on the primitives.
-
-That has one consequence worth stating plainly: **a `@primeuix/themes` preset by itself styles nothing here.** Handing the provider `theme: { preset }` emits the `--p-*` design tokens at runtime, but with no `p-*` class on any element the preset has nothing to paint.
-
-So every setup except fully-unstyled starts from a theme, and that chrome comes from one of two sources:
-
-- the **Cratis baseline theme** (`import '@cratis/components/theme'` + `class="cratis-theme"`) — a token-based default look that needs no `@primereact/styles` or `@primeuix/themes` dependency.
-- **PrimeReact's styled mode** — `styledMode()` from `@cratis/components/styled`, spread into the provider `value`. It supplies a `@primeuix/themes` preset (default `CratisPreset`; Aura, Lara, Nora, or a `definePreset` result all work) **and** `primeReactStyles`, PrimeReact's own component styles, which the provider applies to every primitive rendered under it — the ones this library renders and the ones your application renders itself. That is what makes the `p-*` class names appear and the preset paint them. It needs `@primereact/styles` and `@primeuix/themes` installed (both optional peers).
-
-Either way, a **PrimeUI license key** is required — the check runs when the provider mounts, whichever look you choose (a free community tier or a paid one); without it PrimeReact shows an "Invalid PrimeUI License" banner in development *and* production.
-
-Without either — and without your own `pt` / CSS — components render as the raw HTML primitives the browser supplies by default.
-
-The `--cratis-*` token layer is an additive Cratis-scoped tint for surfaces the wrappers in this package own — validation error text, the FormElement addon background, breadcrumb borders — and **is not, by itself, sufficient to skin PrimeReact widgets**. In styled mode, derive your own preset (`definePreset(CratisPreset, …)`) when you want the whole UI in your palette; under the baseline theme, override the `--cratis-*` tokens. Use `unstyled: true` and a `pt` preset when you want to replace PrimeReact's visuals entirely.
-
-## Mental model
-
-Every component you import from `@cratis/components` is a thin wrapper around a PrimeReact primitive plus a few Cratis additions (validation hooks, command-form integration, …). The important thing to understand about v11 is that a theme is **JavaScript, not CSS**, and comes in two halves: a preset — a plain token object that `@primeuix/styled` turns into `--p-*` custom properties **at runtime**, when you hand it to the provider — and PrimeReact's component styles, which put the `p-*` class names on the primitives and carry the CSS those tokens drive. So the chain runs:
-
-```mermaid
-flowchart LR
-    Preset["preset (JS)<br/>@primeuix/themes"] -->|"@primeuix/styled, at runtime"| P["--p-* custom properties"]
-    P --> C["--cratis-* tokens<br/>tokens.css — the seam"]
-    C --> CSS["component CSS"]
-    Styles["primeReactStyles<br/>@primereact/styles, via provider defaults"] -->|"p-* class names + PrimeReact component CSS"| W["PrimeReact widgets"]
-    P --> W
-    Theme["@cratis/components/theme<br/>(no preset)"] -.->|"assigns --cratis-* directly"| C
+```ts
+import '@cratis/components/tokens';
+import '@cratis/components/styles';
+import '@cratis/components/theme';
 ```
 
-`styledMode()` hands the provider both the preset and `primeReactStyles`. Read as three layers you can intervene at:
-
-1. **PrimeReact design tokens** — the `--p-*` custom properties emitted at runtime from a `@primeuix/themes` preset, customized via `definePreset`. Read by PrimeReact's component CSS, which reaches the widgets through the `p-*` class names `primeReactStyles` puts on them. Derive your own preset to repaint the whole UI — in styled mode.
-2. **Cratis tokens** — `--cratis-surface-card`, `--cratis-text-color`, `--cratis-primary-color`, … Read only by Cratis-scoped surfaces. In `tokens.css` each resolves the v11 design token first (e.g. `--p-content-border-color`) and falls back to the legacy v10 variable, which is what keeps a half-ported app working during its upgrade window. With the baseline theme instead of a preset, `@cratis/components/theme` assigns these tokens concrete values directly — light and dark — and defers to a preset's `--p-*` when one *is* present. Override them when you want a Cratis surface tinted differently from the surrounding PrimeReact widgets.
-3. **PrimeReact `pt` (pass-through)** — A per-component prop that lets you attach CSS class names (or inline styles) to every slot inside a PrimeReact widget. The strongest customization knob; works hand-in-hand with `unstyled` mode.
+A product design system omits `theme`, defines the token values itself, and uses stable parts for component-specific treatment.
 
-The [Cratis token reference](cratis-tokens.md) lists every token and the surface it tints. The [pass-through cheat sheet](pass-through.md) lists every Cratis wrapper and which pt props it exposes.
+## Choose a path
 
-## See also
+- [Use the baseline theme](baseline-theme.md)
+- [Map a product theme](themed.md)
+- [Own all styling](unstyled.md)
+- [Use Cratis tokens](cratis-tokens.md)
+- [Customize stable parts](pass-through.md)
 
-- [Getting Started](getting-started.md) — the install, stylesheet imports, and provider every option shares
-- [Use the Cratis baseline theme](baseline-theme.md) — the default look, no preset needed
-- [Use PrimeReact's styled mode](themed.md) — `styledMode()`: a `@primeuix/themes` preset plus PrimeReact's component styles (needs a license)
-- [Use a custom palette on top of a theme](custom-palette.md)
-- [Use fully unstyled mode](unstyled.md)
-- [Cratis token reference](cratis-tokens.md)
-- [Pass-through (pt) cheat sheet](pass-through.md)
-- [Combining styling setups](mixing-paths.md)
-- [CratisComponentsProvider](../Common/cratis-components-provider.md)
+React Aria is internal. Never style React Aria class names or undocumented DOM structure.
diff --git a/Documentation/Styling/mixing-paths.md b/Documentation/Styling/mixing-paths.md
index c6b8a633..c12b25b7 100644
--- a/Documentation/Styling/mixing-paths.md
+++ b/Documentation/Styling/mixing-paths.md
@@ -1,150 +1,25 @@
-# Combining styling setups
+---
+title: Mix baseline and custom styling
+description: Combine token overrides and stable part customization safely.
+---
 
-The three styling options compose. You don't have to choose one for the whole app — every Cratis wrapper still exposes the same building blocks, so you can combine them per-component or per-region.
+Start with the baseline theme, override product tokens, and add part-specific CSS only where the product needs a distinct structure.
 
-## Themed app with one unstyled island
-
-Keep [PrimeReact's styled mode](themed.md) as your global baseline and opt one specific component out with the per-instance `unstyled` prop:
-
-```tsx
-import '@cratis/components/tokens';
-import '@cratis/components/styles';
-import { CratisComponentsProvider } from '@cratis/components';
-import { styledMode } from '@cratis/components/styled';
-import { Dialog } from '@cratis/components/Dialogs';
-
-const brandDialogPt = {
-    root:    { className: 'rounded-3xl bg-violet-900 text-violet-50' },
-    header:  { className: 'px-6 py-4 border-b border-violet-700 font-semibold' },
-    content: { className: 'p-6' },
-};
-
-export const App = () => (
-    <CratisComponentsProvider value={{ license: 'YOUR-PRIMEUI-KEY', ...styledMode() }}>
-        <YourApp />
-
-        {/* This one Dialog opts out of the theme and uses its own brand visuals. */}
-        <Dialog title="Brand callout" unstyled pt={brandDialogPt}>
-            …
-        </Dialog>
-    </CratisComponentsProvider>
-);
-```
-
-## Unstyled app with one themed island
-
-Run the app fully unstyled and give a single subtree the Cratis baseline look. The baseline theme's rules are scoped under `.cratis-theme`, so wrapping one element in the class themes just that subtree:
-
-```tsx
+```ts
 import '@cratis/components/tokens';
 import '@cratis/components/styles';
 import '@cratis/components/theme';
-import { CratisComponentsProvider } from '@cratis/components';
-import { globalPt } from './pt-preset';
-
-export const App = () => (
-    <CratisComponentsProvider value={{ unstyled: true, pt: globalPt }}>
-        <YourApp />
-
-        {/* Inside this subtree, components pick up the Cratis baseline theme. */}
-        <div className="cratis-theme">
-            <BaselineThemedSubtree />
-        </div>
-    </CratisComponentsProvider>
-);
-```
-
-## App-wide dark mode
-
-With the Cratis baseline theme, dark mode is a single class: add `cratis-dark` alongside `cratis-theme` for the dark palette, remove it for light. The widgets and Cratis-scoped surfaces both follow because the baseline theme drives everything from the `--cratis-*` tokens. The same class switches PrimeReact's styled mode too — `styledMode()`'s `darkModeSelector` defaults to `.cratis-dark` (pass `'system'` to follow `prefers-color-scheme` instead):
-
-```tsx
-const ThemeToggle = () => {
-    const toggle = () => document.body.classList.toggle('cratis-dark');
-    return <button onClick={toggle}>Toggle theme</button>;
-};
-```
-
-Need more than two palettes, or your own colors? Override the `--cratis-*` tokens under scoped classes instead:
-
-```css
-.cratis-theme.theme-light {
-    --cratis-surface-card:   #ffffff;
-    --cratis-surface-border: #e2e8f0;
-    --cratis-text-color:     #0f172a;
-    --cratis-primary-color:  #2563eb;
-}
-
-.cratis-theme.theme-dark {
-    --cratis-surface-card:   #1e293b;
-    --cratis-surface-border: #334155;
-    --cratis-text-color:     #f8fafc;
-    --cratis-primary-color:  #38bdf8;
-}
+import './product-components.css';
 ```
 
-Combine with `prefers-color-scheme` for the initial mode:
-
 ```css
-@media (prefers-color-scheme: dark) {
-    .cratis-theme:not(.theme-light):not(.theme-dark) {
-        --cratis-surface-card: #1e293b;
-        --cratis-text-color:   #f8fafc;
-    }
+:root {
+    --cratis-primary-color: var(--product-accent);
 }
-```
-
-## Per-region brand zones
-
-Token overrides cascade, so any ancestor scope works for tinting Cratis-scoped surfaces in a region:
 
-```css
-.brand-zone {
-    --cratis-surface-border: #c4b5fd;
-    --cratis-text-color-secondary: #a78bfa;
-    --cratis-primary-color: #7c3aed;
+.product-toolbar[data-cratis-part='root'] {
+    border-radius: 1rem;
 }
 ```
 
-```tsx
-<div className="brand-zone">
-    <ObjectNavigationalBar navigationPath={path} onNavigate={…} />
-    <ObjectContentEditor object={data} schema={schema} />
-</div>
-```
-
-With the baseline theme these `--cratis-*` overrides already reach the widgets in the region — the theme reads the same tokens. (In styled mode, region-scoped widget colors come from the preset instead — `definePreset(CratisPreset, …)`; the `--cratis-*` overrides still retint the Cratis-scoped surfaces.)
-
-## Per-component visual override inside unstyled mode
-
-When you're using fully unstyled mode globally, single components can still pull in classes from a separate stylesheet via the `className` prop or per-instance `pt`:
-
-```tsx
-import './custom-table.css';
-
-<CratisComponentsProvider value={{ unstyled: true, pt: globalPt }}>
-    {/* All other DataTables use globalPt; this one uses a bespoke look. */}
-    <DataTableForQuery
-        query={AllAuthors}
-        emptyMessage="No authors"
-        className="custom-table"
-        pt={{ table: { className: 'custom-table__inner' } }}
-    >
-        …
-    </DataTableForQuery>
-</CratisComponentsProvider>
-```
-
-## What to keep in mind
-
-- **Provider value updates re-render**: changing `value` on `CratisComponentsProvider` rebuilds the merged config. Use a stable reference (e.g. `useMemo` or a module-level constant) to avoid spurious re-renders.
-- **`pt` merging is deep**: PrimeReact merges global `pt` with per-instance `pt` by default. Set `ptOptions={{ mergeSections: false }}` on the wrapper if you need a hard replace.
-- **Where `--cratis-*` reaches depends on the theme**: with the Cratis baseline theme the widgets read those tokens, so an override repaints both. In styled mode the widgets read the preset's `--p-*` design tokens, so `--cratis-*` overrides only retint the Cratis-scoped surfaces — repaint the widgets with a `definePreset` derivative handed to `styledMode({ preset })`. See [Cratis token reference](cratis-tokens.md).
-
-## See also
-
-- [Use PrimeReact's styled mode](themed.md)
-- [Use a custom palette on top of a PrimeReact theme](custom-palette.md)
-- [Use fully unstyled mode](unstyled.md)
-- [Pass-through cheat sheet](pass-through.md)
-- [CratisComponentsProvider](../Common/cratis-components-provider.md)
+All three layers are Cratis-owned. There is no provider theme or renderer cascade layer to coordinate.
diff --git a/Documentation/Styling/pass-through.md b/Documentation/Styling/pass-through.md
index cfa564a1..0522f880 100644
--- a/Documentation/Styling/pass-through.md
+++ b/Documentation/Styling/pass-through.md
@@ -1,195 +1,68 @@
-# Pass-through (`pt`) cheat sheet
+---
+title: Stable component parts
+description: Customize Components through Cratis-owned parts and state attributes.
+---
 
-Every Cratis wrapper forwards PrimeReact's `pt`, `ptOptions`, and `unstyled` props somewhere — but **where** depends on how much PrimeReact the wrapper composes. This page summarizes the pattern per component so you know which prop to reach for.
-
-## Three patterns
-
-### 1. Single-widget wrappers
-
-The wrapper renders exactly one PrimeReact widget and forwards `pt` / `ptOptions` / `unstyled` / `className` straight to it. The pt slot names are PrimeReact's own — see the underlying component's documentation.
-
-| Wrapper            | Underlying widget (PrimeReact 11)                     | pt slot reference           |
-| ------------------ | ----------------------------------------------------- | --------------------------- |
-| `Dialog`           | `primereact/dialog` Dialog                            | PrimeReact Dialog `pt`      |
-| `Dropdown`         | `primereact/select` Select                            | PrimeReact Select `pt`      |
-| `InputTextField`   | `primereact/inputtext` InputText                      | PrimeReact InputText `pt`   |
-| `TextAreaField`    | `primereact/textarea` Textarea                        | PrimeReact Textarea `pt`    |
-| `NumberField`      | `primereact/inputnumber` InputNumber                  | PrimeReact InputNumber `pt` |
-| `DropdownField`    | `primereact/select` Select                            | PrimeReact Select `pt`      |
-| `RadioGroupField`  | `primereact/radiobutton` RadioButton (one per option) | PrimeReact RadioButton `pt` |
-| `RadioButtonField` | `primereact/radiobutton` RadioButton                  | PrimeReact RadioButton `pt` |
-| `CalendarField`    | `primereact/datepicker` DatePicker                    | PrimeReact DatePicker `pt`  |
-| `CheckboxField`    | `primereact/checkbox` Checkbox                        | PrimeReact Checkbox `pt`    |
-| `SliderField`      | `primereact/slider` Slider                            | PrimeReact Slider `pt`      |
-| `ChipsField`       | `primereact/inputtags` InputTags                      | PrimeReact InputTags `pt`   |
-| `MultiSelectField` | `primereact/select` Select (multiple mode)            | PrimeReact Select `pt`      |
-| `ColorPickerField` | `primereact/inputcolor` InputColor                    | PrimeReact InputColor `pt`  |
-| `EventsView`       | `primereact/timeline` Timeline                        | PrimeReact Timeline `pt`    |
-
-`DatePickerInput` exposes `id`, `disabled`, `readOnly` and `showButtonBar` directly, so those behaviors do not need element-level pass-through workarounds. It deliberately narrows PrimeReact 11's stale root pass-through declaration: use `input` for additional attributes on the rendered `data-part="input"` element; `pcInputText` is not valid because PrimeReact does not emit it. The wrapper also translates `invalid` to `aria-invalid` and `data-invalid` rather than leaking a rejected `invalid` DOM attribute.
+Every component exposes meaningful elements through `data-cratis-part`. Components that need per-instance customization also accept a `pt` object whose values are ordinary HTML attributes.
 
 ```tsx
-<DatePickerInput
-    id='appointment-date'
-    value={selectedDate}
-    onChange={setSelectedDate}
-    disabled={isDisabled}
-    readOnly={isReadOnly}
-    showButtonBar
+<Dialog
+    title='Edit account'
     pt={{
-        input: {
-            'aria-label': 'Appointment date',
-            'aria-describedby': 'appointment-date-help',
-        },
-    }}
-/>
-```
-
-Example:
-
-```tsx
-<InputTextField
-    value={(c) => c.email}
-    title='Email'
-    pt={{ root: { className: 'border-2 border-sky-500' } }}
-/>
-```
-
-### 2. Multi-slot composites
-
-The wrapper composes more than one PrimeReact widget and exposes a sibling set of `*Pt` / `*PtOptions` / `*Unstyled` / `*ClassName` props per slot.
-
-#### `Dialog`-based dialogs
-
-`CommandDialog` is a single Dialog and forwards `pt`/`ptOptions`/`unstyled` to that Dialog.
-
-`StepperCommandDialog` composes a Dialog **and** a Stepper:
-
-| Prop                                                                  | Targets                       |
-| --------------------------------------------------------------------- | ----------------------------- |
-| `pt` / `ptOptions` / `unstyled`                                       | The inner PrimeReact Stepper. |
-| `dialogPt` / `dialogPtOptions` / `dialogUnstyled` / `dialogClassName` | The outer PrimeReact Dialog.  |
-
-```tsx
-<StepperCommandDialog<RegisterAuthor>
-    command={RegisterAuthor}
-    title='Register author'
-    pt={{ stepperpanel: { content: { className: 'pt-6' } } }}
-    dialogPt={{ header: { className: 'bg-slate-900 text-slate-50' } }}
-    dialogClassName='shadow-2xl'
->
-    …
-</StepperCommandDialog>
-```
-
-#### Data tables and pages
-
-`DataTableForQuery` and `DataTableForObservableQuery` each compose a DataTable **and** a Paginator:
-
-| Prop                                          | Targets                                                                   |
-| --------------------------------------------- | ------------------------------------------------------------------------- |
-| `pt` / `ptOptions` / `unstyled` / `className` | The inner DataTable.                                                      |
-| `paginatorClassName` / `paginatorAriaLabels`  | The paginator (a Cratis button control — styled by class name, not `pt`). |
-
-`DataPage` composes a DataTable **and** an action toolbar:
-
-| Prop                                                                      | Targets                                                                                      |
-| ------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
-| `tablePt` / `tablePtOptions` / `tableUnstyled` / `tableClassName`         | The inner DataTable.                                                                         |
-| `menubarPt` / `menubarPtOptions` / `menubarUnstyled` / `menubarClassName` | The action toolbar's buttons (PrimeReact 11 replaced the v10 Menubar with a button toolbar). |
-
-```tsx
-<DataPage<AllAuthors, Author, never>
-    title='Authors'
-    query={AllAuthors}
-    tablePt={{ table: { className: 'min-w-full divide-y divide-slate-700' } }}
-    menubarPt={{ root: { className: 'px-3 py-2 bg-slate-900' } }}
->
-    <DataPage.MenuItems>…</DataPage.MenuItems>
-    <DataPage.Columns>…</DataPage.Columns>
-</DataPage>
-```
-
-### 3. Large composites
-
-These wrappers render many PrimeReact widgets internally (`InputText`, `InputNumber`, `Checkbox`, `DatePicker`, `Textarea`, `Select`, `Button`, …). Exposing a `pt` prop per inner widget would be impractical; instead, they expose **`className`** on the root for layout/positioning, and you restyle their internals via the **global `pt` preset** on [`CratisComponentsProvider`](../Common/cratis-components-provider.md).
-
-| Wrapper                 | What it accepts | How to restyle internals                                                                               |
-| ----------------------- | --------------- | ------------------------------------------------------------------------------------------------------ |
-| `ObjectContentEditor`   | `className`     | Global `pt` on `CratisComponentsProvider` covering `inputtext`, `inputnumber`, `checkbox`, `textarea`. |
-| `ObjectNavigationalBar` | `className`     | Global `pt` covering `button`; `--cratis-surface-border` for the bottom border.                        |
-| `SchemaEditor`          | `className`     | Global `pt` covering `button`, `inputtext`, `select`, `datatable`.                                     |
-
-Example with a global preset:
-
-```tsx
-<CratisComponentsProvider
-    value={{
-        unstyled: true,
-        pt: {
-            inputtext: { root: { className: 'my-input' } },
-            inputnumber: { input: { root: { className: 'my-input' } } },
-            button: { root: { className: 'my-btn' } },
-            /* … */
-        },
+        backdrop: { className: 'account-dialog-backdrop' },
+        root: { className: 'account-dialog' },
+        header: { className: 'account-dialog-header' },
+        content: { className: 'account-dialog-content' },
+        footer: { className: 'account-dialog-footer' },
     }}
 >
-    <ObjectContentEditor object={data} schema={schema} editMode />
-</CratisComponentsProvider>
+    Content
+</Dialog>
 ```
 
-## Where the global `pt` reaches
+`pt` classes merge with the component's structural classes. Named component props control behavior and take precedence over conflicting part attributes.
 
-A `pt` preset on `CratisComponentsProvider` flows into **every** PrimeReact widget rendered by every wrapper — including the internals of the large composites. Per-instance `pt` props on individual wrappers are _merged_ with the global preset (PrimeReact's `ptOptions.mergeSections` defaults to `true`).
+## CSS targeting
 
-To replace a slot's preset entirely on a single instance, opt out of merging:
+```css
+.account-dialog[data-cratis-part='root'] {
+    border-radius: 1rem;
+}
 
-```tsx
-<Button pt={{ root: { className: 'special-btn' } }} ptOptions={{ mergeSections: false }}>
-    Special
-</Button>
+[data-cratis-part='row'][data-selected='true'] {
+    background: var(--product-selected-row);
+}
 ```
 
-## Components that do NOT accept per-instance `pt`
-
-- **`BusyIndicatorDialog`** — the dialog is rendered by the dialog host on demand and the request type lives in `@cratis/arc.react`, so no per-instance prop is plumbed through. Use the **global `pt`** on `CratisComponentsProvider` to restyle it.
-
-## Versioned compatibility contract
-
-Components 3 publishes its PrimeReact 11 compatibility surface from `@cratis/components/compatibility`. The contract is scoped to this Components major; it does not preserve PrimeReact 10 names or guarantee the same names in a future Components major.
+Use Cratis part names and state attributes. Do not target React Aria classes or undocumented descendants.
 
-| Contract component | Global `pt` key     | Contracted slots                                                                                                                  |
-| ------------------ | ------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
-| `button`           | `button`            | `root`                                                                                                                            |
-| `inputtext`        | `inputtext`         | `root`                                                                                                                            |
-| `textarea`         | `textarea`          | `root`                                                                                                                            |
-| `inputnumber`      | `inputnumber.root`  | `root`, `input`                                                                                                                   |
-| `select`           | `select.root`       | `root`, `trigger`, `value`, `clear`, `indicator`, `positioner`, `popup`, `filter`, `list`, `option`                               |
-| `checkbox`         | `checkbox.root`     | `root`, `input`, `box`, `indicator`                                                                                               |
-| `radiobutton`      | `radiobutton.root`  | `root`, `input`, `box`, `indicator`                                                                                               |
-| `datepicker`       | `datepicker.root`   | `root`, `trigger`, `positioner`, `popup`, `calendar`, `header`, `prev`, `title`, `selectMonth`, `selectYear`, `next`, `tableBody` |
-| `slider`           | `slider.root`       | `root`, `track`, `range`, `handle`                                                                                                |
-| `inputtags`        | `inputtags.root`    | `root`                                                                                                                            |
-| `inputcolor`       | `inputcolor.root`   | `area`, `areaBackground`, `areaHandle`, `sliderTrack`, `sliderHandle`, `swatch`, `swatchBackground`                               |
-| `timeline`         | `timeline.root`     | `root`, `event`, `separator`, `marker`, `connector`, `content`                                                                    |
-| `rating`           | `rating.root`       | `root`, `option`, `onIcon`, `offIcon`                                                                                             |
-| `toggleswitch`     | `toggleswitch.root` | `root`, `input`, `control`, `handle`                                                                                              |
-| `inputpassword`    | `inputtext`         | `root`                                                                                                                            |
-| `dialog`           | `dialog.root`       | `backdrop`, `positioner`, `popup`, `header`, `title`, `close`, `content`, `footer`                                                |
-| `datatable`        | `datatable.root`    | `root`, `tableContainer`, `table`, `head`, `theadRow`, `theadCell`, `body`, `row`, `cell`                                         |
-| `stepper`          | `stepper.root`      | `root`, `list`, `step`, `header`, `number`, `title`, `separator`, `panels`, `panel`                                               |
+## Common state attributes
 
-`components3PrimeReact11PassThroughContract` is the machine-readable source of truth. Each entry also lists the rendered `data-scope` / `data-part` markers verified by the compatibility suite. The table covers the parts rendered by Components' supported compositions; it is not a copy of every optional PrimeReact part that an application could compose itself. Contract additions are compatible. A contracted slot or marker removal or rename requires a new Components major.
+- `data-active`
+- `data-selected`
+- `data-invalid`
+- `data-disabled`
+- `data-readonly`
+- `data-loading`
+- `data-position`
+- `data-orientation`
+- `data-size`
+- `data-severity`
 
-Use `primeReact11PassThroughSentinelPreset` and `assertPrimeReact11PassThroughCompatibility()` in a DOM test to verify the subset your application renders. See [Use fully unstyled mode](unstyled.md#verify-the-contract) for an example.
+## Part groups
 
-### Compatibility history
+| Component       | Stable parts                                                                                                                                                                  |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Button          | `root`, `icon`, `label`, `spinner`                                                                                                                                            |
+| Dialog          | `backdrop`, `positioner`, `root`, `header`, `title`, `close`, `content`, `footer`, `confirm`, `cancel`                                                                        |
+| Dropdown        | `root`, `trigger`, `value`, `clear`, `indicator`, `filter`, `popover`, `listbox`, `option`, `multiple`                                                                        |
+| DatePickerInput | `root`, `group`, `input`, `segment`, `trigger`, `popover`, `dialog`, `calendar`, `header`, `heading`, `previous`, `next`, `grid`, `cell`, `button-bar`, `today`, `clear`      |
+| DataTableCore   | `root`, `search`, `search-input`, `table-container`, `table`, `head`, `header-row`, `header-cell`, `header-content`, `sort`, `body`, `row`, `cell`, `empty-row`, `empty-cell` |
+| Stepper         | `root`, `list`, `step`, `header`, `number`, `title`, `separator`, `panels`, `panel`                                                                                           |
+| Toaster         | `region`, `toast`, `icon`, `content`, `title`, `description`, `action`, `close`                                                                                               |
 
-| Components major | PrimeReact major | Contract revision |
-| ---------------- | ---------------- | ----------------- |
-| 3                | 11               | 1                 |
+TypeScript exposes the exact part type for each component, so unknown keys fail compilation.
 
-## See also
+## Legacy flags
 
-- [CratisComponentsProvider](../Common/cratis-components-provider.md) — global `pt` / `unstyled` setup
-- [Use fully unstyled mode](unstyled.md) — full `pt` preset walk-through
+`ptOptions` and `unstyled` remain accepted temporarily for Components 3 source compatibility. They have no effect: Cratis parts always merge, and the component CSS is always consumer-owned.
diff --git a/Documentation/Styling/themed.md b/Documentation/Styling/themed.md
index 0fed3e8d..f9aa1349 100644
--- a/Documentation/Styling/themed.md
+++ b/Documentation/Styling/themed.md
@@ -1,163 +1,47 @@
-# Use PrimeReact's styled mode
+---
+title: Build a product theme
+description: Map a product design system onto Cratis tokens and stable parts.
+---
 
-You want components to look the way PrimeReact's own do — one of its design systems, painted by a `@primeuix/themes` preset. PrimeReact 11 ships zero CSS and is unstyled-first, so a *theme* is no longer a stylesheet you import. It is two things handed to the provider at runtime: a **preset** (a plain JavaScript token object that `@primeuix/styled` turns into `--p-*` custom properties) and PrimeReact's **component styles** (`@primereact/styles`, the `p-*` class names and the CSS the preset drives). `styledMode()` from `@cratis/components/styled` supplies both.
+A Components theme is CSS. It does not require a JavaScript preset or provider configuration.
 
-> [!IMPORTANT]
-> **A preset alone styles nothing.** PrimeReact 11's `primereact` package is unstyled primitives: they render structural markup identified by `data-scope` / `data-part` attributes and **no `p-*` class names**. Handing the provider `theme: { preset }` by itself emits the `--p-*` tokens, but with no class names on the elements the preset has nothing to paint. PrimeReact's own styled components (`@primereact/ui`) are just the primitives with their `styles` prop preset from `@primereact/styles` — and `@cratis/components` builds on the primitives, so it needs the same gluing. That is what `styledMode()` does.
-
-**Licensing.** A **PrimeUI license key** is required to run PrimeReact 11 at all — styled mode does not change that, and neither does going unstyled. See [Licensing](../migration.md#licensing). What styled mode *does* add is two dependencies, `@primereact/styles` and `@primeuix/themes`; the [Cratis baseline theme](baseline-theme.md) gives a polished look without them.
-
-## Setup
-
-Install the two packages styled mode needs — both are optional peers of `@cratis/components` — and spread `styledMode()` into the provider's `value`, next to your license key:
-
-```bash
-npm install @primereact/styles @primeuix/themes
-```
-
-```tsx
-import '@cratis/components/tokens';
-import '@cratis/components/styles';
-import { CratisComponentsProvider } from '@cratis/components';
-import { styledMode } from '@cratis/components/styled';
-
-export const App = () => (
-    <CratisComponentsProvider value={{ license: 'YOUR-PRIMEUI-KEY', ...styledMode() }}>
-        <YourApp />
-    </CratisComponentsProvider>
-);
-```
-
-`styledMode()` returns `{ theme, defaults }`:
-
-- **`theme`** — a `@primeuix/themes` preset plus its options. The default preset is **`CratisPreset`**: Lara, with the blue primary and gray surfaces of PrimeReact 10's `lara-light-blue` / `lara-dark-blue`, and, in the dark scheme, content and overlays one step lighter than the page — the dark surface scale sits one step lighter than the light one, so Lara's own tokens land on the tones those themes used. Both color schemes are carried.
-- **`defaults`** — `primeReactStyles`, PrimeReact's own component styles keyed by primitive name. The provider applies them to **every** primitive rendered under it — the ones this library renders *and* the ones your application renders itself — so the `p-*` class names appear and the preset paints them.
-
-The `--cratis-*` tokens follow the preset's `--p-*` tokens, so Cratis-scoped surfaces stay in sync with the widgets. Without a license key, PrimeReact logs a warning and shows an "Invalid PrimeUI License" banner in development **and** production.
-
-### Options
-
-| Option | Default | What it does |
-|---|---|---|
-| `preset` | `CratisPreset` | Any `@primeuix/themes` preset — Aura, Lara, Nora, Material — or one derived with `definePreset`. |
-| `darkModeSelector` | `cratisDarkModeSelector` (`.cratis-dark`) | How the dark scheme is activated: a selector, `'system'` for `prefers-color-scheme`, or `'none'` to stay light. The default is the class the Cratis baseline theme keys its dark palette off as well, so one `class="cratis-dark"` on the body serves both. |
-| `cssLayer` | `{ name: primeReactCssLayer, order: primeReactCssLayerOrder }` | The cascade layer the theme is emitted into — `primereact`, declared between Tailwind's `base` and `components` layers (`theme, base, primereact, components, utilities`), so the preflight reset does not strip what the theme gives a cell or an input while a utility class on a PrimeReact element still wins. A string names the layer and keeps that order; `false` emits the theme unlayered. |
-
-```tsx
-import Aura from '@primeuix/themes/aura';
-import { styledMode } from '@cratis/components/styled';
-
-<CratisComponentsProvider value={{ license, ...styledMode({ preset: Aura, darkModeSelector: 'system' }) }}>
-```
-
-Extend `CratisPreset` the way you would any preset:
-
-```ts
-import { definePreset } from '@primeuix/themes';
-import { CratisPreset } from '@cratis/components/styled';
-
-export const BrandPreset = definePreset(CratisPreset, {
-    semantic: {
-        primary: {
-            50: '{sky.50}',   100: '{sky.100}', 200: '{sky.200}',
-            300: '{sky.300}', 400: '{sky.400}', 500: '{sky.500}',
-            600: '{sky.600}', 700: '{sky.700}', 800: '{sky.800}',
-            900: '{sky.900}', 950: '{sky.950}',
-        },
-    },
-});
-```
-
-```tsx
-<CratisComponentsProvider value={{ license, ...styledMode({ preset: BrandPreset }) }}>
-```
-
-## Override one component with CSS
-
-When you want to tweak a single widget without redesigning anything, plain CSS works on top of the theme. In styled mode PrimeReact's elements carry their `p-*` class names, so a global rule reaches them — and because the theme is emitted into the `primereact` cascade layer, a plain unlayered rule in your own stylesheet wins regardless of specificity or order, exactly as it did against PrimeReact 10's stylesheet themes (which were wrapped in `@layer primereact` too):
+## Map product tokens
 
 ```css
-/* yourApp.css */
-.p-button {
-    border-radius: 999px;  /* pill buttons everywhere */
+:root {
+    --cratis-primary-color: var(--brand-accent-700);
+    --cratis-primary-color-text: var(--brand-text-inverse);
+    --cratis-surface-ground: var(--brand-canvas);
+    --cratis-surface-card: var(--brand-surface);
+    --cratis-surface-overlay: var(--brand-surface);
+    --cratis-surface-hover: var(--brand-subtle);
+    --cratis-surface-border: var(--brand-border);
+    --cratis-text-color: var(--brand-text-primary);
+    --cratis-text-color-secondary: var(--brand-text-secondary);
+    --cratis-border-radius: 0.5rem;
+    --cratis-focus-ring: var(--brand-focus-ring);
 }
 ```
 
-> [!WARNING]
-> Those class names exist **only in styled mode** — they come from `primeReactStyles`, not from the preset. Run unstyled, or under the [Cratis baseline theme](baseline-theme.md), and PrimeReact emits no `p-*` class at all; parts are identified by data attributes instead (`[data-scope="button"]`, `[data-scope="select"][data-part="trigger"]`). A selector written against a v10 class name silently matches nothing there.
-
-Pass `cssLayer: false` to emit the theme unlayered instead; its rules then compete with yours on specificity and order alone, and being injected at runtime they arrive last.
-
-…or target your own class names on Cratis wrappers:
+Switch schemes by redefining the product values under the product's own selector:
 
 ```css
-.dangerous-button {
-    background: var(--cratis-red-500);
-    color: white;
+[data-theme='dark'] {
+    --brand-canvas: #171717;
+    --brand-surface: #262626;
+    --brand-text-primary: #fafafa;
 }
 ```
 
-```tsx
-<Button className="dangerous-button">Delete</Button>
-```
-
-## Override one component with Tailwind
-
-Every Cratis wrapper accepts a `className` prop. Pass Tailwind utility classes straight through:
-
-```tsx
-<InputTextField value={c => c.name}
-                className="rounded-2xl bg-slate-900 text-slate-50" />
-
-<Dialog title="Confirm" className="shadow-2xl rounded-3xl">
-    {/* … */}
-</Dialog>
-```
-
-For multi-slot composites like `StepperCommandDialog` or `DataPage`, the `className` is on the outer wrapper. Use the per-slot props (`dialogClassName`, `tableClassName`, `menubarClassName`) when you need to target an inner widget. See the [pass-through cheat sheet](pass-through.md) for the full list.
-
-## Tint a specific Cratis surface
+## Add component-specific treatment
 
-Validation error text, the FormElement addon, breadcrumb bottom borders, and other Cratis-specific surfaces read from `--cratis-*` tokens (not from PrimeReact's design tokens). Override the relevant token to retint just those surfaces while leaving the theme untouched:
+Tokens provide shared semantics. Use stable parts for a distinctive product component:
 
 ```css
-:root {
-    /* Make Cratis validation errors a brand-distinct orange-red. */
-    --cratis-red-500: #f97316;
-
-    /* Round Cratis addons a bit harder than the theme. */
-    --cratis-border-radius: 12px;
+.product-dialog[data-cratis-part='root'] {
+    backdrop-filter: blur(18px);
+    border-radius: 1rem;
 }
 ```
 
-See the [Cratis token reference](cratis-tokens.md) for the full list and which surface each token controls.
-
-## Per-instance pass-through
-
-When CSS overrides aren't enough — for example, when you need to attach a class to a specific slot inside a PrimeReact widget — use the `pt` prop:
-
-```tsx
-<Dialog
-    title="Confirm"
-    pt={{
-        header: { className: 'bg-sky-600 text-white' },
-        content: { className: 'p-6' },
-    }}
->
-    …
-</Dialog>
-```
-
-`pt`, `ptOptions`, and `unstyled` are typed from the underlying PrimeReact component, so your IDE autocompletes the available slot names.
-
-## Coming from a PrimeReact 10 theme stylesheet
-
-If your CSS was written against the variables a v10 theme published on `:root` — `--surface-ground`, `--surface-card`, `--surface-border`, `--text-color`, `--primary-color`, the `--surface-0…900` and `--blue-*` / `--gray-*` scales — those names resolve to nothing on PrimeReact 11. `@cratis/components/primereact-v10-palette` restores every one of them with the `lara-light-blue` / `lara-dark-blue` values, following the active preset where v11 has an equivalent. Import it after `tokens` and `styles`; nothing new should be written against those names. See [the migration guide](../migration.md#theming-without-a-theme-stylesheet).
-
-## When to choose another setup
-
-This setup stops being a good fit when:
-
-- You don't want the extra `@primereact/styles` and `@primeuix/themes` dependencies — use the [Cratis baseline theme](baseline-theme.md) instead.
-- The preset is "almost" but not your brand — use [a custom palette on top of a theme](custom-palette.md) and derive your own preset from `CratisPreset` with `definePreset`.
-- You're integrating into a design system that defines its own button, dialog, and input visuals — use [fully unstyled mode](unstyled.md) and bring every visual yourself.
+This is the supported path for deeply customized products. No renderer preset, internal selector, or commercial theme package sits between product tokens and the rendered component.
diff --git a/Documentation/Styling/toc.yml b/Documentation/Styling/toc.yml
index 8104854b..ebc434b5 100644
--- a/Documentation/Styling/toc.yml
+++ b/Documentation/Styling/toc.yml
@@ -4,15 +4,15 @@
   href: getting-started.md
 - name: Use the Cratis baseline theme
   href: baseline-theme.md
-- name: Use PrimeReact's styled mode (preset, needs a license)
+- name: Build a product theme
   href: themed.md
-- name: Use a custom palette on top of a PrimeReact theme
+- name: Customize the palette
   href: custom-palette.md
-- name: Use fully unstyled mode
+- name: Own all styling
   href: unstyled.md
 - name: Cratis token reference
   href: cratis-tokens.md
-- name: Pass-through (pt) cheat sheet
+- name: Stable component parts
   href: pass-through.md
-- name: Combining styling setups
+- name: Combine styling setups
   href: mixing-paths.md
diff --git a/Documentation/Styling/unstyled.md b/Documentation/Styling/unstyled.md
index 9ff1937a..3da04ec9 100644
--- a/Documentation/Styling/unstyled.md
+++ b/Documentation/Styling/unstyled.md
@@ -1,328 +1,48 @@
-# Use fully unstyled mode
+---
+title: Own all styling
+description: Use Components structure and behavior with a completely custom product design.
+---
 
-You're integrating Cratis Components into a design system that defines its own button, dialog, and input visuals. You want zero PrimeReact CSS in the final bundle.
-
-This setup disables every PrimeReact base style at the provider and supplies visuals through PrimeReact's `pt` (pass-through) mechanism, your own CSS, or both. Components render structurally only until your `pt` preset and CSS provide the actual UI.
-
-## Setup
-
-```tsx
-import '@cratis/components/tokens'; // the --cratis-* layer, still useful for Cratis-scoped surfaces
-import '@cratis/components/styles'; // component CSS + Tailwind utilities for spacing/layout
-import { CratisComponentsProvider } from '@cratis/components';
-import { globalPt } from './pt-preset';
-
-export const App = () => (
-    <CratisComponentsProvider value={{ unstyled: true, pt: globalPt }}>
-        <YourApp />
-    </CratisComponentsProvider>
-);
-```
-
-`unstyled: true` removes every PrimeReact base style. The `pt` preset is what fills the visual vacuum. Without one, components render as raw HTML elements with browser defaults.
-
-The top-level keys of a `pt` preset are PrimeReact 11's own component names — so `select`, not `dropdown`; `textarea`, not `inputtextarea`; and there is no `menubar` key at all, because PrimeReact 11 removed Menubar and the Cratis action bar is a `button` toolbar. Components 3 publishes the supported keys, slots, and rendered markers from `@cratis/components/compatibility`; do not rely on an ignored unknown slot as a compatibility strategy.
-
-## Verify the contract
-
-Use the published sentinel preset in a DOM test, render the Cratis surfaces your application depends on, and assert the relevant contract subset:
-
-```tsx
-import { render } from '@testing-library/react';
-import { CratisComponentsProvider } from '@cratis/components';
-import {
-    assertPrimeReact11PassThroughCompatibility,
-    primeReact11PassThroughSentinelPreset,
-} from '@cratis/components/compatibility';
-
-it('keeps the unstyled slots used by the application', () => {
-    render(
-        <CratisComponentsProvider
-            value={{
-                unstyled: true,
-                pt: primeReact11PassThroughSentinelPreset,
-            }}
-        >
-            <ApplicationCompatibilitySurface />
-        </CratisComponentsProvider>,
-    );
-
-    assertPrimeReact11PassThroughCompatibility(document, ['button', 'dialog', 'select']);
-});
-```
-
-The assertion ignores additions and fails with one diagnostic per missing sentinel or structural marker. The default component list checks the complete contract. The contract is scoped to Components 3 and PrimeReact 11; future Components majors may publish a different contract.
-
-The two examples below show the same preset in two different styling languages. Pick whichever your design system uses.
-
-## With plain CSS
-
-Attach class names from your own stylesheet via a global preset:
+Components does not require a theme runtime. Import the structural CSS and define the semantic tokens yourself:
 
 ```ts
-// pt-preset.ts
-export const globalPt = {
-    button: {
-        root: { className: 'my-btn' },
-    },
-    dialog: {
-        root: {
-            popup: { className: 'my-dialog' },
-            header: { className: 'my-dialog__header' },
-            content: { className: 'my-dialog__body' },
-            backdrop: { className: 'my-dialog__mask' },
-        },
-    },
-    inputtext: {
-        root: { className: 'my-input' },
-    },
-} as const;
+import '@cratis/components/tokens';
+import '@cratis/components/styles';
 ```
 
 ```css
-/* yourApp.css */
-.my-btn {
-    display: inline-flex;
-    align-items: center;
-    padding: 0.5rem 1rem;
-    background: var(--cratis-primary-color);
-    color: var(--cratis-primary-color-text);
-    border: none;
-    border-radius: var(--cratis-border-radius);
-    cursor: pointer;
-}
-
-.my-btn:hover {
-    filter: brightness(1.1);
-}
-.my-btn:active {
-    filter: brightness(0.9);
-}
-.my-btn:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-}
-
-.my-dialog {
-    border-radius: 16px;
-    overflow: hidden;
-    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
-}
-
-.my-dialog__header {
-    padding: 1rem 1.25rem;
-    background: var(--cratis-surface-card);
-    border-bottom: 1px solid var(--cratis-surface-border);
-    font-weight: 600;
-}
-
-.my-dialog__body {
-    padding: 1.25rem;
-    background: var(--cratis-surface-card);
-    color: var(--cratis-text-color);
-}
-
-.my-dialog__mask {
-    background: rgba(15, 23, 42, 0.7);
-    backdrop-filter: blur(4px);
-}
-
-.my-input {
-    width: 100%;
-    padding: 0.5rem 0.75rem;
-    background: var(--cratis-surface-100);
-    border: 1px solid var(--cratis-surface-border);
-    border-radius: 6px;
-    color: var(--cratis-text-color);
-}
-
-.my-input:focus {
-    outline: 2px solid var(--cratis-primary-color);
-    outline-offset: 1px;
+:root {
+    --cratis-primary-color: var(--product-accent);
+    --cratis-primary-color-text: var(--product-on-accent);
+    --cratis-surface-card: var(--product-surface);
+    --cratis-surface-overlay: var(--product-surface-raised);
+    --cratis-surface-border: var(--product-border);
+    --cratis-text-color: var(--product-text);
+    --cratis-text-color-secondary: var(--product-text-muted);
+    --cratis-focus-ring: 0 0 0 3px var(--product-focus-ring);
 }
 ```
 
-This is the most discoverable shape: every PrimeReact slot gets a single dedicated class in your own CSS file. You can grep, refactor, and reuse the same classes outside Cratis Components without coupling to PrimeReact's internals.
-
-## With TailwindCSS
-
-Same shape, Tailwind utility classes as the class strings:
-
-```ts
-// pt-preset.ts
-export const globalPt = {
-    button: {
-        root: {
-            className: [
-                'inline-flex items-center justify-center gap-2',
-                'px-4 py-2 rounded-lg font-medium',
-                'bg-sky-500 text-white',
-                'hover:bg-sky-400 active:bg-sky-600',
-                'disabled:opacity-50 disabled:cursor-not-allowed',
-                'transition-colors',
-                'focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-400',
-            ].join(' '),
-        },
-    },
-
-    inputtext: {
-        root: {
-            className: [
-                'w-full px-3 py-2 rounded-md',
-                'bg-slate-800 text-slate-50',
-                'border border-slate-700',
-                'placeholder:text-slate-400',
-                'focus:border-sky-400 focus:outline-none',
-                'focus-visible:ring-2 focus-visible:ring-sky-400',
-            ].join(' '),
-        },
-    },
-
-    dialog: {
-        root: {
-            popup: {
-                className:
-                    'rounded-2xl shadow-2xl overflow-hidden bg-slate-900 text-slate-50',
-            },
-            header: {
-                className: [
-                    'flex items-center justify-between gap-4',
-                    'px-5 py-3 font-semibold',
-                    'bg-slate-800 text-slate-50 border-b border-slate-700',
-                ].join(' '),
-            },
-            title: { className: 'text-base' },
-            close: { className: 'p-1 rounded hover:bg-slate-700 transition-colors' },
-            content: { className: 'p-5 bg-slate-900 text-slate-100' },
-            footer: {
-                className:
-                    'px-5 py-3 bg-slate-800 border-t border-slate-700 flex justify-end gap-2',
-            },
-            backdrop: { className: 'bg-slate-950/70 backdrop-blur-sm' },
-        },
-    },
-
-    select: {
-        root: {
-            root: {
-                className: [
-                    'w-full inline-flex items-center justify-between gap-2',
-                    'px-3 py-2 rounded-md cursor-pointer',
-                    'bg-slate-800 text-slate-50 border border-slate-700',
-                    'hover:border-slate-500',
-                    'focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-400',
-                ].join(' '),
-            },
-            value: { className: 'flex-1 truncate text-left' },
-            indicator: { className: 'shrink-0 text-slate-400' },
-            popup: {
-                className:
-                    'mt-1 rounded-md shadow-xl overflow-hidden bg-slate-800 border border-slate-700',
-            },
-            option: { className: 'px-3 py-2 cursor-pointer hover:bg-slate-800' },
-        },
-    },
-
-    checkbox: {
-        root: {
-            root: { className: 'inline-flex items-center' },
-            box: {
-                className: [
-                    'w-4 h-4 rounded',
-                    'border border-slate-500 bg-slate-800',
-                    'data-[p-highlight=true]:bg-sky-500 data-[p-highlight=true]:border-sky-500',
-                ].join(' '),
-            },
-            indicator: { className: 'text-white text-xs' },
-        },
-    },
-
-    datatable: {
-        root: {
-            root: { className: 'w-full' },
-            table: { className: 'w-full text-sm' },
-            head: {
-                className: 'bg-slate-800 text-slate-300 uppercase text-xs tracking-wider',
-            },
-            theadRow: { className: 'border-b border-slate-700' },
-            theadCell: { className: 'px-3 py-2 text-left font-medium' },
-            body: { className: 'divide-y divide-slate-800' },
-            row: { className: 'hover:bg-slate-800/60 transition-colors' },
-            cell: { className: 'px-3 py-2 text-slate-100' },
-        },
-    },
-
-    // PrimeReact 11 removed Menubar; the Cratis action bar is a Button toolbar
-    // styled through the `button` slot above, so no menubar preset is needed.
-} as const;
-```
+Do not import `@cratis/components/theme` when the product supplies all values.
 
-A nearly-identical preset ships in the Storybook (`.storybook/pt-preset.ts`) — use it as a starter and fork into your own app.
+## Customize structure
 
-## Per-instance overrides
-
-Anything global can be overridden per-instance:
+Use `pt` for one instance or `data-cratis-part` for a product-wide rule:
 
 ```tsx
-<Dialog
-    title="Brand callout"
+<Dropdown
+    aria-label='Role'
+    options={roles}
     pt={{
-        root:   { className: 'rounded-none' },
-        header: { className: 'bg-pink-600 text-white' },
+        trigger: { className: 'product-select-trigger' },
+        popover: { className: 'product-select-popover' },
+        option: { className: 'product-select-option' },
     }}
->
-    …
-</Dialog>
-
-<InputTextField
-    value={c => c.name}
-    pt={{ root: { className: 'border-2 border-pink-500' } }}
 />
 ```
 
-Per-instance `pt` is **merged** with the global preset by default (`ptOptions.mergeSections: true` is PrimeReact's default). To replace a slot entirely instead, set `ptOptions={{ mergeSections: false }}` on the wrapper.
-
-## Composite components in unstyled mode
-
-`DataPage` and `StepperCommandDialog` compose multiple PrimeReact widgets and expose explicit per-slot props. The global `pt` reaches every internal widget; per-instance overrides target the inner slot directly:
-
-```tsx
-<DataPage<AllAuthors, Author, never>
-    title="Authors"
-    query={AllAuthors}
-    tablePt={{ table: { className: 'min-w-full divide-y divide-slate-700' } }}
-    menubarPt={{ root: { className: 'px-3 py-2 bg-slate-900' } }}
->
-    <DataPage.MenuItems>…</DataPage.MenuItems>
-    <DataPage.Columns>…</DataPage.Columns>
-</DataPage>
-
-<StepperCommandDialog<RegisterOrder>
-    command={RegisterOrder}
-    title="New order"
-    /* pt targets the inner Stepper */
-    pt={{ stepperpanel: { content: { className: 'pt-6' } } }}
-    /* dialogPt targets the outer Dialog */
-    dialogPt={{ header: { className: 'bg-slate-900' } }}
->
-    …
-</StepperCommandDialog>
-```
+The parts are Cratis-owned and remain stable across internal foundation changes. See [Stable component parts](pass-through.md).
 
-`ObjectContentEditor`, `ObjectNavigationalBar`, and `SchemaEditor` accept only `className` on the root — restyle their internals via the **global** `pt` preset set on `CratisComponentsProvider`. See [Pass-through cheat sheet](pass-through.md) for the full per-component reference.
-
-## What `--cratis-*` tokens give you in fully unstyled mode
-
-In fully unstyled mode the `pt` preset carries every PrimeReact visual, so you don't strictly need any `--cratis-*` token. However, a few Cratis surfaces are styled with token-driven CSS (FormElement addon, ObjectNavigationalBar bottom border, inline validation errors) — overriding the relevant tokens lets you tint those surfaces consistently with your preset:
-
-```css
-:root {
-    --cratis-surface-border: theme('colors.slate.700');
-    --cratis-text-color: theme('colors.slate.50');
-    --cratis-text-color-secondary: theme('colors.slate.400');
-    --cratis-red-500: theme('colors.red.500');
-    --cratis-border-radius: 8px;
-}
-```
+## Accessibility responsibilities
 
-See [Cratis token reference](cratis-tokens.md) for the full list and which surface each token controls.
+A custom design still owns visible focus, contrast, target size, reduced motion, forced colors, and responsive behavior. Components supplies semantic behavior but cannot infer product color relationships.
diff --git a/Documentation/building-a-form.md b/Documentation/building-a-form.md
index 875d3d11..70c0b479 100644
--- a/Documentation/building-a-form.md
+++ b/Documentation/building-a-form.md
@@ -56,7 +56,7 @@ const [AddAuthorDialog, showAddAuthor] = useDialog(AddAuthor);
 
 - **Injected (non-input) values** — set required values like a parent id via `initialValues`, not `onBeforeExecute`. Values set in `onBeforeExecute` run too late to affect validity, so the confirm button would stay disabled. Use `onBeforeExecute` only for generated values (like a new `Guid`) that don't gate validity.
 - **Multi-step forms** — reach for `StepperCommandDialog` when one command needs to be gathered across several stages.
-- Don't import `Dialog` from `primereact/dialog` directly — use the Cratis wrappers so execution, validation timing, and footers stay consistent.
+- Use the Cratis dialog wrappers so execution, validation timing, focus behavior, and footers stay consistent.
 
 ## Next
 
diff --git a/Documentation/choosing-a-component.md b/Documentation/choosing-a-component.md
index 366cb7fe..7f87f4f5 100644
--- a/Documentation/choosing-a-component.md
+++ b/Documentation/choosing-a-component.md
@@ -20,7 +20,7 @@ The question is whether confirming the form **runs a command**, and whether it's
 
 Rule of thumb: **if confirming the dialog executes a generated command, it's a `CommandDialog`** (or its
 stepper variant). If it just gathers values and returns them, it's a `Dialog`. Never reach for
-PrimeReact's raw `Dialog` — these wrappers handle validation timing, loading state, and footers
+an application-owned modal — these wrappers handle validation timing, loading state, focus, and footers
 consistently.
 
 ## Displaying data
diff --git a/Documentation/coming-from-primereact.md b/Documentation/coming-from-primereact.md
index 6604f416..c553e8b4 100644
--- a/Documentation/coming-from-primereact.md
+++ b/Documentation/coming-from-primereact.md
@@ -1,198 +1,37 @@
 ---
-title: PrimeReact and Components
-description: You already know PrimeReact. Here's how forms and tables map onto Cratis Components — concept by concept, side by side — plus what PrimeReact 11 renamed, removed, and rebuilt.
+title: Coming from PrimeReact
+description: Map direct PrimeReact usage onto renderer-independent Components 4 APIs.
 ---
 
-Cratis Components isn't a different component kit — it's built **on** PrimeReact. Your `Column`, your `Button`, your icons all still apply. What changes is the *wiring*: instead of keeping form state and query subscriptions in the screen, you point a component at an Arc-generated proxy and let the component own that integration. This page maps familiar PrimeReact code onto its Components equivalent — and, because `@cratis/components` 3.0 moved to **PrimeReact 11**, tells you what PrimeReact itself renamed, removed, and rebuilt underneath.
+Components 4 does not render PrimeReact or expose Prime types. The public API uses Cratis-owned props, events, tokens, and parts.
 
-If you already have an app on `@cratis/components` 2.x, read the [migration guide](migration.md) first — it is the ordered checklist. This page is the map you keep open while you work through it.
+## Replace direct imports
 
-## The one-paragraph version
+| PrimeReact                       | Components                            |
+| -------------------------------- | ------------------------------------- |
+| Button                           | `Common/Button`                       |
+| Dialog                           | `Dialogs/Dialog`                      |
+| Select / Dropdown                | `Dropdown`                            |
+| DataTable / Column               | `DataTables/DataTableCore` / `Column` |
+| Input fields in command forms    | `CommandForm` fields                  |
+| Tag / Badge / Message / Skeleton | `Display`                             |
+| Toast / Toaster                  | `Notifications`                       |
 
-In a PrimeReact app, the screen often owns request creation, loading state, dialog footer actions, field binding, API calls, and live updates. Components centralizes that wiring around generated command and query proxies — so a form or a table is declarative, and it's type-checked against the C# it came from. You keep PrimeReact while reducing screen-specific integration code.
+Use native HTML for simple application-owned controls that do not need Components behavior.
 
-## A command form
+## Replace provider configuration
 
-You have a dialog with a field and a save button. By hand, that's local state, a saving flag, a fetch, and footer buttons you wire yourself:
+Remove `PrimeReactProvider`, license keys, presets, renderer defaults, and global Prime pass-through configuration. Mount `CratisComponentsProvider` for locale, owned labels, and the optional toaster.
 
-```tsx
-// Manual: local state, a saving flag, a fetch, and hand-wired footer buttons
-const [name, setName] = useState('');
-const [saving, setSaving] = useState(false);
+## Replace styling
 
-const save = async () => {
-    setSaving(true);
-    await fetch('/api/authors/register', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ name }),
-    });
-    setSaving(false);
-};
+- Map product values to `--cratis-*` tokens.
+- Replace `.p-*`, `data-scope`, and `data-part` selectors with stable `data-cratis-part` selectors.
+- Replace Prime pass-through keys with each component's Cratis-owned `pt` type.
+- Replace PrimeIcons with React icon nodes or product-owned SVGs.
 
-<Dialog title="Add author" onCancel={hide} buttons={
-    <>
-        <Button onClick={hide}>Cancel</Button>
-        <Button disabled={saving} onClick={save}>Add</Button>
-    </>
-}>
-    <InputText value={name} onChange={e => setName(e.target.value)} />
-</Dialog>
-```
+## Keep server data behavior explicit
 
-With Components, the command *is* the form — instantiation, the footer, the executing state, and validation are handled:
+Components tables render one Arc-provided page. Filtering and sorting the complete dataset belongs on the server before paging. Do not reproduce a client-side DataTable mode over partial data.
 
-```tsx
-// Components
-<CommandDialog<RegisterAuthor> command={RegisterAuthor} title="Add author" okLabel="Add">
-    <InputTextField<RegisterAuthor> value={i => i.name} title="Name" />
-</CommandDialog>
-```
-
-`i => i.name` is typed against the generated `RegisterAuthor` — rename the property in C#, rebuild, and this line stops compiling.
-
-## A data table
-
-With plain PrimeReact, a table typically fetches on mount, holds rows in state, and — if you want live data — subscribes to updates:
-
-```tsx
-// PrimeReact, local state
-const [authors, setAuthors] = useState([]);
-
-useEffect(() => {
-    fetch('/api/authors').then(r => r.json()).then(setAuthors);
-    // ...and a subscription if you want it to stay current
-}, []);
-
-<DataTable value={authors}>
-    <Column field="name" header="Name" sortable />
-</DataTable>
-```
-
-With Components, you hand the table the query proxy; it subscribes and re-renders as the read model changes:
-
-```tsx
-// Components
-<DataTableForObservableQuery query={AllAuthors} emptyMessage="No authors yet">
-    <Column field="name" header="Name" sortable />
-</DataTableForObservableQuery>
-```
-
-The `Column` is the same PrimeReact component you already use. Only the data binding changed — and it stays live with no subscription code.
-
-## A list-and-detail page
-
-The "table left, details right, toolbar on top" layout has several moving parts: split panes, selection state, and a detail panel that appears only when a row is picked. `DataPage` is that layout as one component:
-
-```tsx
-// Components
-import { DataPage, MenuItem, Column } from '@cratis/components/DataPage';
-import { FaPencil, FaPlus } from 'react-icons/fa6';
-
-<DataPage title="Authors" query={AllAuthorsWithBooks} emptyMessage="No authors yet"
-          detailsComponent={AuthorDetails}>
-    <DataPage.MenuItems>
-        <MenuItem label="Add author" icon={FaPlus} command={() => showAddAuthor()} />
-        <MenuItem label="Edit" icon={FaPencil} disableOnUnselected command={openEdit} />
-    </DataPage.MenuItems>
-    <DataPage.Columns>
-        <Column field="name" header="Name" sortable />
-    </DataPage.Columns>
-</DataPage>
-```
-
-`MenuItem`'s `icon` is a **component type**, not a PrimeIcons class string and not a JSX element — `DataPage` instantiates it itself.
-
-Selection, the resizable split, and disabling menu items until a row is selected all come built in.
-
-## How the pieces map
-
-| You know (PrimeReact) | In Components |
-|---|---|
-| `Dialog` + footer `Button`s + a fetch | `CommandDialog command={...}` |
-| `InputText` + `useState` + manual validation | `InputTextField value={i => i.field}` — typed to the command |
-| `DataTable value={...}` + `useEffect` fetch | `DataTableForObservableQuery query={...}` (live) or `DataTableForQuery` |
-| Split panes + selection + detail wiring | `DataPage` with `detailsComponent` |
-| A multi-step wizard you build yourself | `StepperCommandDialog` |
-| A PrimeReact theme | the Cratis baseline theme, or PrimeReact's styled mode (`styledMode()` — a `@primeuix/themes` preset plus PrimeReact's component styles), plus `--cratis-*` tokens for repainting |
-
-## The v11 module renames
-
-If you import from `primereact/*` anywhere in your own code, this is the table you need. PrimeReact 11 ships **80** modules where v10 shipped 117, and a dozen of the survivors moved:
-
-| v10 module | v11 module |
-|---|---|
-| `dropdown` | `select` |
-| `calendar` | `datepicker` |
-| `overlaypanel` | `popover` |
-| `inputswitch` | `toggleswitch` |
-| `tabview` + `tabpanel` | `tabs` |
-| `inputtextarea` | `textarea` |
-| `password` | `inputpassword` |
-| `chips` | `inputtags` |
-| `colorpicker` | `inputcolor` |
-| `galleria` | `gallery` |
-| `scrollpanel` | `scrollarea` |
-| `selectbutton` | `togglebuttongroup` |
-
-**A rename is usually not a one-line edit.** This is the part that surprises people: v11 is **compositional**. `primereact/select` does not export a `Select` you drop in with props — it exports `Select.Root`, `Select.Trigger`, `Select.Value`, `Select.Portal`, `Select.Positioner`, `Select.Popup`, `Select.List` and `Select.Option`, and you assemble them yourself. So does `Chip`, `Avatar`, `ProgressBar`, `Rating`, `ToggleSwitch`, `InputColor`, and most of the rest. Budget for restructuring the JSX, not for a find-and-replace.
-
-Which is exactly why you should prefer a Cratis wrapper where one exists: [`Dropdown`](Dropdown/index.md) is that seven-part `Select` assembly behind one element with props, and it stays put across PrimeReact versions.
-
-### The `Sidebar` trap
-
-> [!CAUTION]
-> v10's `Sidebar` — the overlay drawer — is now **`primereact/drawer`**. `primereact/sidebar` **still exists** in v11, but it is a **different, new app-shell primitive**. A name-preserving migration therefore compiles cleanly and silently swaps your overlay for an app shell. There is no error, no warning, and no type mismatch to catch it. Check every `Sidebar` usage by hand.
-
-### Removed with no drop-in replacement
-
-These v10 modules are gone from v11 entirely — no rename, no equivalent:
-
-`menubar`, `megamenu`, `tieredmenu`, `steps`, `multiselect`, `treeselect`, `treetable`, `cascadeselect`, `splitbutton`, `image`, `virtualscroller`, `confirmdialog`, `column`, `columngroup`, `row`, `inputicon`, `messages`, and the infrastructure modules `api`, `menuitem`, `treenode`, `utils`, `hooks`, `passthrough`, `componentbase`.
-
-`inputmask`, `keyfilter` and `scrolltop` exist in **neither** `primereact/*` nor `@primereact/headless/*`. `orderlist` and `picklist` survive only as **headless hooks** (`@primereact/headless/orderlist`, `.../picklist`) — you build the presentation.
-
-Where the library needed one of these, it now owns a replacement, so your authoring model is unchanged even though the import moved:
-
-| You used to import | Now |
-|---|---|
-| `Column` from `primereact/column` | `Column` from `@cratis/components/DataTables` (also re-exported from `@cratis/components/DataPage`) |
-| `StepperPanel` from `primereact/stepperpanel` | `StepperPanel` from `@cratis/components/CommandDialog` |
-| `Menubar` from `primereact/menubar` | `<DataPage.MenuItems>` for list-page actions; a `Button` toolbar of your own otherwise |
-| `Dropdown` from `primereact/dropdown` | `Dropdown` from `@cratis/components/Dropdown` |
-| `MultiSelect` from `primereact/multiselect` | `MultiSelectField` from `@cratis/components/CommandForm` (re-expressed over the Cratis `Dropdown` — v11's `Select` has no `multiple` prop of the v10 shape) |
-| `ConfirmDialog` from `primereact/confirmdialog` | `ConfirmationDialog` from `@cratis/components/Dialogs` |
-| `PrimeReactProvider` from `primereact/api` | `PrimeReactProvider` from `@primereact/core` — or just use [`CratisComponentsProvider`](Common/cratis-components-provider.md) |
-| `Messages` from `primereact/messages` | `Toaster` / `toast` from [`@cratis/components/Notifications`](Notifications/index.md) |
-
-`<Column field="name" header="Name" sortable filter />` and `<StepperPanel header="…">` work exactly as they did. Inside `DataPage`, the action toolbar that replaced Menubar keeps the same `model` array shape, so `<DataPage.MenuItems>` reads as it always did.
-
-## What stays the same
-
-- The authoring model. `Column`, `StepperPanel`, `DataPage`, `CommandDialog` and the CommandForm fields all take the same props they took on 2.x — the churn above is PrimeReact's, and the wrappers absorbed it.
-- You keep using plain PrimeReact for purely presentational widgets that aren't tied to a command or query — the two coexist happily on the same screen.
-- Your styling knowledge carries over, though the *mechanism* changed: see the next section.
-
-## What changed in PrimeReact 11 itself
-
-Three things bite even when you only use Cratis wrappers.
-
-**PrimeReact is now a peer dependency.** You install `primereact`, `@primereact/core`, `@primereact/headless` and `primeicons` yourself. Two copies of PrimeReact means two `PrimeReactProvider` contexts, which breaks overlays and `pt` with no error to point at — the peer declaration is what prevents that. See [Getting started](/components/getting-started/).
-
-**PrimeReact 11 ships zero CSS.** `primereact/resources/themes/*.css` does not exist. A theme is now [PrimeReact's styled mode](Styling/themed.md) — `styledMode()` from `@cratis/components/styled`, which hands the provider a `@primeuix/themes` preset (a JavaScript token object turned into `--p-*` custom properties at runtime) together with PrimeReact's own component styles; a preset by itself paints nothing — or the [Cratis baseline theme](Styling/baseline-theme.md), or your own `pt`. **PrimeReact 11 needs a PrimeUI license key whichever you pick** — the check runs when the provider mounts, not when a theme is applied. See [Licensing](migration.md#licensing) and [Styling](/components/styling/).
-
-**Outside styled mode, elements carry no `p-*` class.** The `primereact` primitives identify parts by data attributes — `[data-scope="dialog"][data-part="close"]`, `[data-scope="select"][data-part="trigger"]`; the `p-*` class names come from PrimeReact's component styles, which only `styledMode()` applies. Elsewhere, CSS selectors written against v10 class names silently match nothing. (`pt` slot keys are unaffected, though the top-level keys follow the renames above: `select`, not `dropdown`.)
-
-Two smaller ones: `Button` renders its content as **children**, not `label`/`icon` props; and the data-table selection event is now `DataTableSelectionChangeEvent<T>` rather than `DataTableSelectionSingleChangeEvent`.
-
-## What changes (and why it's less code)
-
-- **Forms bind to commands, not to local state.** No `useState` per field, no loading flag, no hand-written validation — the command carries its own rules, and the proxy runs them on both sides.
-- **Tables bind to queries, not to fetched arrays.** An observable query keeps the table current with no subscription code and no "refresh after save."
-- **The binding is type-checked.** Field accessors and column fields line up with the generated types, so a backend change that breaks the screen is a compile error, not a runtime surprise.
-
-## Where to go next
-
-- [Getting started](/components/getting-started/) — install Components and mount the provider.
-- [Build the library screen](/components/tutorial/) — the same ideas built up one screen at a time.
-- [Why Components](/components/why-components/) — the case for the library, and when plain PrimeReact is the better choice.
+Follow the complete [Components 3 to 4 migration](migration.md).
diff --git a/Documentation/getting-started.mdx b/Documentation/getting-started.mdx
index 87609e67..17ba3c01 100644
--- a/Documentation/getting-started.mdx
+++ b/Documentation/getting-started.mdx
@@ -1,77 +1,57 @@
 ---
 title: Getting started
-description: Install Components, mount the provider, and render your first type-safe command form — a few declarative lines instead of a few files of glue.
+description: Install Components, mount the provider, and render your first type-safe command form.
 sidebar:
     order: 2
 ---
 
 import { Steps, Aside } from '@astrojs/starlight/components';
 
-You've built an Arc backend — a `RegisterAuthor` command, an `AllAuthors` query — and `dotnet build` has generated the typed proxies for both. Now you need a screen: a form to add an author, a table that lists them and refreshes itself when one's added.
-
-You can build that straight on PrimeReact — instantiate the command, track its executing state, disable the button while it runs, render OK/Cancel, bind every field, call the query, subscribe to its observable, re-render on change. `@cratis/components` centralizes that integration around your generated proxies, so the same screen is a few declarative lines. Let's wire it up.
+You've built an Arc backend—a `RegisterAuthor` command and an `AllAuthors` query—and `dotnet build` generated typed proxies for both. Components turns those proxies into accessible forms, dialogs, and data views without duplicating command state, validation, or query lifecycle code.
 
 ## Prerequisites
 
-- **A React app** — a Vite + React frontend (the `dotnet new cratis` template scaffolds one).
-- **An Arc frontend that reaches your backend through generated proxies** — the [Arc frontend get-started](/arc/frontend/getting-started/) sets that up. Components renders forms and tables _on top_ of those proxies. If you scaffolded with `dotnet new cratis`, the package is already installed and you're here to understand the pieces.
+- A React 19 application.
+- An Arc frontend connected through generated proxies. The [Arc frontend guide](/arc/frontend/getting-started/) sets this up.
 
 ## Install and wire it up
 
 <Steps>
 
-1. **Install the package — and PrimeReact alongside it.**
+1. **Install Components.**
 
     ```bash title="Install Components"
-    npm install @cratis/components primereact @primereact/core @primereact/headless @primereact/hooks primeicons
+    npm install @cratis/components
     ```
 
-    From 3.0, PrimeReact is a **peer dependency**, so you supply it and the library uses yours. That's not bureaucracy: when the library bundled its own copy, an app that also depended on `primereact` could end up with **two** — and two copies means two `PrimeReactProvider` contexts, so overlays stack wrongly and `pt` silently stops applying, with no error to point at it. One declared peer is one copy. If you carried a `resolutions` / `overrides` pin for `primereact` to work around this, delete it.
+    React Aria and the internationalized date implementation are internal dependencies. You do not install a UI kit, theme runtime, icon package, or commercial license for Components.
 
-    `primeicons` went 7 → 8 with PrimeReact 11. The heavier extras — `pixi.js` (`PivotViewer`), `framer-motion` (animated panels), `allotment` (`DataPage`) — are still regular dependencies and install automatically. The remaining peers (`react`/`react-dom` 19+, `@cratis/arc*`, `reflect-metadata`, `tsyringe`) already come with the Arc frontend from the prerequisites.
+    The remaining peers—React, Arc, Fundamentals, `reflect-metadata`, and `tsyringe`—already come with an Arc frontend. Arc 20, 21, and 22 are supported.
 
-2. **Import the stylesheets once**, at your app's entry point, in this order:
+2. **Import the Cratis-owned stylesheets once**, at your application entry point:
 
     ```typescript title="main.tsx"
-    import '@cratis/components/tokens'; // the --cratis-* token layer
-    import '@cratis/components/styles'; // every component stylesheet, in one file
-    import '@cratis/components/theme'; // optional — the Cratis baseline look (MIT CSS)
+    import '@cratis/components/tokens';
+    import '@cratis/components/styles';
+    import '@cratis/components/theme'; // optional baseline appearance
     ```
 
-    :::caution[PrimeReact 11 is not MIT]
-    `@cratis/components` is MIT, but as of 3.0.0 it builds on **PrimeReact 11**, which is part of
-    PrimeTek's commercial **PrimeUI** family — as are `primeicons` 8.x, `@primereact/core`,
-    `@primereact/headless`, `@primereact/styles`, `@primeuix/themes` and `@primeuix/styled`. PrimeReact 10 was MIT; 11 is not.
-
-    A **PrimeUI license key is required regardless of how you style** — the check runs when
-    `PrimeReactProvider` mounts, not when a theme is applied. Without one you get a console warning and
-    an _"Invalid PrimeUI License"_ banner, in development and production.
-
-    The [Community License](https://primeui.dev/licenses/community) is free for individuals, students,
-    non-profits, non-commercial open source, and organizations under $1M revenue with fewer than 5
-    developers. Everyone else needs a [Commercial License](https://primeui.dev/licenses/commercial).
-    Redistributing a library that others build with needs a separate OEM License.
+    `tokens` declares the stable `--cratis-*` variables. `styles` supplies component structure. `theme` provides the optional baseline light/dark values.
 
-    Need to stay MIT-only? **`@cratis/components` 2.x remains on PrimeReact 10.** See
-    [Licensing](/components/migration/#licensing).
-    :::
-
-    Components no longer import their own CSS — that's what lets the package load in a plain Node test environment. `tokens` declares the `--cratis-*` [token layer](/components/styling/) the components read their colors and spacing from; `styles` is the component CSS plus the pre-compiled utility styles; `theme` is optional and covered below. It works with any bundler.
+    A product with its own design system can omit `theme`, map its own variables onto `--cratis-*`, and customize stable `data-cratis-part` elements or `pt` attributes.
 
     <Aside type='caution' title='Order matters'>
-        Import `tokens` first. Both `styles` and `theme` resolve `--cratis-*` variables
-        that `tokens` declares.
+        Import `tokens` before `styles` and `theme` so every component resolves the same
+        semantic variables.
     </Aside>
 
-3. **Mount the provider** around your app:
+3. **Mount the provider** around your application:
 
     ```tsx title="App.tsx"
-    import '@cratis/components/tokens';
-    import '@cratis/components/styles';
     import { CratisComponentsProvider } from '@cratis/components';
 
     export const App = () => (
-        <CratisComponentsProvider>
+        <CratisComponentsProvider value={{ locale: 'en-US' }} toaster>
             <YourApp />
         </CratisComponentsProvider>
     );
@@ -81,25 +61,56 @@ You can build that straight on PrimeReact — instantiate the command, track its
 
 ## What the provider sets up
 
-That one wrapper does more than it looks. Components renders PrimeReact **unstyled-first** (PrimeReact 11's default) and is the single place you layer on a `pt` preset, locale, ripple, overlay z-index, or a styled theme — routing every component's look through the `--cratis-*` tokens you just imported. The upshot: everything below it renders structurally right away, and it takes its visual identity from tokens and the styling setup you control — not from styles baked into the library.
+The provider supplies the locale, Components-specific labels, and an optional app-wide toast region. React Aria uses the locale for date, number, keyboard, and screen-reader behavior. Styling remains CSS-owned rather than provider-owned.
 
 ```mermaid
 flowchart LR
     Proxy["generated proxy<br/>RegisterAuthor · AllAuthors"] --> C["Components<br/>CommandDialog · DataTable"]
-    C --> PR["PrimeReact (unstyled)"]
-    Tokens["--cratis-* tokens"] -.->|theming| PR
+    C --> Markup["Cratis-owned semantic markup"]
+    Aria["React Aria behavior"] -.-> Markup
+    Tokens["--cratis-* tokens"] -.-> Markup
 ```
 
-The components sit between your typed proxies and PrimeReact: they speak commands and queries on one side, render PrimeReact on the other, and take their styling from tokens.
+React Aria is an implementation dependency. Public props, parts, CSS variables, and event types are owned by Cratis.
+
+## Localize Components labels
+
+React Aria supplies its own locale data. Configure only labels owned by Components:
+
+```tsx
+<CratisComponentsProvider
+    value={{
+        locale: 'nb-NO',
+        messages: {
+            paginator: {
+                navigation: 'Sidenavigasjon',
+                first: 'Første side',
+                previous: 'Forrige side',
+                next: 'Neste side',
+                last: 'Siste side',
+            },
+            datePicker: {
+                today: 'I dag',
+                clear: 'Tøm',
+                openCalendar: 'Åpne kalender',
+                previousMonth: 'Forrige måned',
+                nextMonth: 'Neste måned',
+            },
+        },
+    }}
+>
+    <YourApp />
+</CratisComponentsProvider>
+```
 
 ## See the payoff
 
-Here's the add-author form — the whole thing. `CommandDialog` takes your generated command, renders the fields and the confirm/cancel buttons, and disables confirm while it executes:
+`CommandDialog` takes the generated command, renders its fields and actions, and disables confirmation while execution is in progress:
 
 ```tsx title="AddAuthor.tsx"
 import { CommandDialog } from '@cratis/components/CommandDialog';
 import { InputTextField } from '@cratis/components/CommandForm';
-import { RegisterAuthor } from './Authors/RegisterAuthor'; // generated proxy
+import { RegisterAuthor } from './Authors/RegisterAuthor';
 
 export const AddAuthor = () => (
     <CommandDialog<RegisterAuthor>
@@ -107,28 +118,32 @@ export const AddAuthor = () => (
         title='Add author'
         okLabel='Add'
     >
-        <InputTextField<RegisterAuthor> value={(i) => i.name} title='Name' />
+        <InputTextField<RegisterAuthor> value={(command) => command.name} title='Name' />
     </CommandDialog>
 );
 ```
 
-No `isExecuting` flag, no button wiring, no duplicate validation logic — and because `RegisterAuthor` is generated from your C#, `i => i.name` is type-checked against the real command. Rename the property in C#, rebuild, and this line stops compiling until you fix it.
+No `isExecuting` state, action wiring, or duplicate validation logic is required. If the C# command changes, the generated proxy makes this component fail compilation until it is updated.
 
 ## Choose how it looks
 
-The components render structurally the moment the provider is mounted; their _look_ is a separate, deliberate choice. PrimeReact 11 is unstyled-first, so pick one setup on the [Styling](/components/styling/) page:
+Choose one styling posture:
+
+- Import `theme` for the Cratis baseline.
+- Define your own `--cratis-*` token values for a product design system.
+- Add classes or ordinary HTML attributes through each component's Cratis-owned `pt` parts.
+- Target stable `data-cratis-part` and state attributes when product CSS needs structural control.
 
-- the **Cratis baseline theme** (`import '@cratis/components/theme'` + `class="cratis-theme"`),
-- PrimeReact's **styled mode** — `import { styledMode } from '@cratis/components/styled'` and `value={{ license, ...styledMode() }}`, which hands the provider a `@primeuix/themes` preset _and_ PrimeReact's own component styles (a preset alone emits tokens but paints nothing; needs `@primereact/styles` and `@primeuix/themes` installed), or
-- fully unstyled, with your own `pt` / CSS.
+Do not target React Aria class names or internal DOM structure. See [Styling](/components/styling/) and [Stable component parts](/components/styling/pass-through/).
 
 ## Recap
 
-You installed `@cratis/components` and its PrimeReact peers, imported the token and component stylesheets, and wrapped your app in `CratisComponentsProvider` — and with that one provider in place, a typed command form is a handful of lines instead of a handful of files. Everything else in the library works the same way: declare it, point it at a proxy, done.
+You installed one UI package, imported Cratis-owned styles, and mounted a locale/toast provider. Components owns the public UI contract while Arc supplies command and query behavior and React Aria supplies low-level accessible interactions.
 
 ## Where to go next
 
-- **[Building a form](/components/building-a-form/)** — `CommandDialog`, field types, validation, and multi-step wizards.
-- **[Displaying data](/components/displaying-data/)** — live data tables that re-render when the read model changes.
-- **[Choosing a component](/components/choosing-a-component/)** — a decision guide from "what's on the screen" to the right component.
-- **[Build a full-stack feature](/build-a-full-app/)** — see Components consume a real Arc slice end to end.
+- [Building a form](/components/building-a-form/)
+- [Displaying data](/components/displaying-data/)
+- [Choosing a component](/components/choosing-a-component/)
+- [Migrate from Components 3](/components/migration/)
+- [Understand the UI foundation](/components/ui-foundation/)
diff --git a/Documentation/index.mdx b/Documentation/index.mdx
index 98171019..c2b8573f 100644
--- a/Documentation/index.mdx
+++ b/Documentation/index.mdx
@@ -7,56 +7,84 @@ import { CardGrid } from '@astrojs/starlight/components';
 import SimpleCard from '@components/SimpleCard.astro';
 import TopicHero from '@components/TopicHero.astro';
 
-<TopicHero icon="laptop" eyebrow="Components" title="React components wired to your proxies">
-Command dialogs, forms, and data tables that consume [Arc's](/arc/) generated proxies. Built on PrimeReact, fully typed, and styled the way you choose. [Get started →](/components/getting-started/) · [Why Components? →](/components/why-components/)
+<TopicHero
+    icon='laptop'
+    eyebrow='Components'
+    title='React components wired to your proxies'
+>
+    Command dialogs, forms, and data tables that consume [Arc's](/arc/) generated proxies.
+    Cratis-owned, fully typed, accessible, and styled the way you choose. [Get started
+    →](/components/getting-started/) · [Why Components? →](/components/why-components/)
 </TopicHero>
 
 ## Start here
 
 <CardGrid>
-  <SimpleCard title="Getting started" icon="rocket" link="/components/getting-started/">
-    Install the package, mount the provider, and render your first proxy-driven screen.
-  </SimpleCard>
-  <SimpleCard title="Why Components" icon="approve-check" link="/components/why-components/">
-    What the library adds when PrimeReact meets generated Arc proxies.
-  </SimpleCard>
-  <SimpleCard title="Styling" icon="seti:folder" link="/components/styling/">
-    Three paths — a PrimeReact theme, your own palette, or fully unstyled with a `pt` preset.
-  </SimpleCard>
+    <SimpleCard title='Getting started' icon='rocket' link='/components/getting-started/'>
+        Install the package, mount the provider, and render your first proxy-driven
+        screen.
+    </SimpleCard>
+    <SimpleCard
+        title='Why Components'
+        icon='approve-check'
+        link='/components/why-components/'
+    >
+        What the library adds around generated Arc proxies and accessible interaction
+        behavior.
+    </SimpleCard>
+    <SimpleCard title='Styling' icon='seti:folder' link='/components/styling/'>
+        Use the baseline theme or map a product design system directly onto Cratis tokens
+        and parts.
+    </SimpleCard>
 </CardGrid>
 
 ## Recipes
 
 <CardGrid>
-  <SimpleCard title="Build a form" icon="open-book" link="/components/building-a-form/">
-    Collect input and execute a command with `CommandDialog` and the `CommandForm` fields.
-  </SimpleCard>
-  <SimpleCard title="Display data" icon="seti:db" link="/components/displaying-data/">
-    Render a query or observable query with `DataPage` and the data-table wrappers.
-  </SimpleCard>
-  <SimpleCard title="Multi-step form" icon="list-format" link="/components/multi-step-form/">
-    Gather information across named stages with `StepperCommandDialog`.
-  </SimpleCard>
-  <SimpleCard title="A list screen with actions" icon="puzzle" link="/components/list-screen-with-actions/">
-    A full screen: list rows, add and edit through dialogs, and react to selection.
-  </SimpleCard>
+    <SimpleCard title='Build a form' icon='open-book' link='/components/building-a-form/'>
+        Collect input and execute a command with `CommandDialog` and the `CommandForm`
+        fields.
+    </SimpleCard>
+    <SimpleCard title='Display data' icon='seti:db' link='/components/displaying-data/'>
+        Render a query or observable query with `DataPage` and the data-table wrappers.
+    </SimpleCard>
+    <SimpleCard
+        title='Multi-step form'
+        icon='list-format'
+        link='/components/multi-step-form/'
+    >
+        Gather information across named stages with `StepperCommandDialog`.
+    </SimpleCard>
+    <SimpleCard
+        title='A list screen with actions'
+        icon='puzzle'
+        link='/components/list-screen-with-actions/'
+    >
+        A full screen: list rows, add and edit through dialogs, and react to selection.
+    </SimpleCard>
 </CardGrid>
 
 ## Key components
 
 <CardGrid>
-  <SimpleCard title="CommandDialog" icon="seti:react" link="/components/commanddialog/">
-    Instantiates, validates, and executes a generated command, with the footer handled for you.
-  </SimpleCard>
-  <SimpleCard title="DataPage" icon="laptop" link="/components/datapage/">
-    A resizable page that lists query data with toolbar actions and detail panels.
-  </SimpleCard>
-  <SimpleCard title="CommandForm fields" icon="approve-check" link="/components/commandform/">
-    Typed input fields bound to command properties — text, number, dropdown, date, and more.
-  </SimpleCard>
-  <SimpleCard title="Dialogs" icon="open-book" link="/components/dialogs/">
-    Data-collection dialogs that return values without executing a command.
-  </SimpleCard>
+    <SimpleCard title='CommandDialog' icon='seti:react' link='/components/commanddialog/'>
+        Instantiates, validates, and executes a generated command, with the footer handled
+        for you.
+    </SimpleCard>
+    <SimpleCard title='DataPage' icon='laptop' link='/components/datapage/'>
+        A resizable page that lists query data with toolbar actions and detail panels.
+    </SimpleCard>
+    <SimpleCard
+        title='CommandForm fields'
+        icon='approve-check'
+        link='/components/commandform/'
+    >
+        Typed input fields bound to command properties — text, number, dropdown, date, and
+        more.
+    </SimpleCard>
+    <SimpleCard title='Dialogs' icon='open-book' link='/components/dialogs/'>
+        Data-collection dialogs that return values without executing a command.
+    </SimpleCard>
 </CardGrid>
 
 Components renders [Arc's](/arc/) proxies over [Chronicle](/chronicle/) read models — see [Why developers choose Cratis](/why-cratis/) for the full stack.
diff --git a/Documentation/migration-from-2.md b/Documentation/migration-from-2.md
new file mode 100644
index 00000000..fb3f151e
--- /dev/null
+++ b/Documentation/migration-from-2.md
@@ -0,0 +1,248 @@
+# Migration — `@cratis/components` 2.x → 3.0 (PrimeReact 10 → 11)
+
+`@cratis/components` 3.0 moves the library from PrimeReact 10 to **PrimeReact 11**. Most wrapper APIs survive unchanged, so many apps upgrade with the find-and-replace in [Import moves](#import-moves-removed-primereact-paths) plus the install and import changes in [PrimeReact is now a peer dependency](#primereact-is-now-a-peer-dependency) and [Stylesheets are now an explicit import](#stylesheets-are-now-an-explicit-import). This guide lists every change a consuming app can feel.
+
+> [!IMPORTANT]
+> **The three things you must do**, even if you change no component code:
+>
+> 1. **Install the PrimeReact peers yourself** — they are no longer our dependency.
+> 2. **Import `@cratis/components/styles`** — component CSS no longer rides along with the JavaScript.
+> 3. **Choose a theming path** — there is no `resources/themes/*.css` to import any more.
+
+## PrimeReact is now a peer dependency
+
+**This is the change most likely to break your install.** In 2.x, `primereact` was a regular `dependency` of `@cratis/components`, so your app got a copy whether it asked for one or not. That is exactly the problem: if your app also depended on `primereact`, npm could resolve **two copies**, and two copies of PrimeReact means two `PrimeReactProvider` React contexts. Components rendered from the library would read a different config, theme and z-index registry than components you render yourself — and the symptom is not an error, it is overlays stacking wrongly and `pt`/`unstyled` silently not applying. Apps were papering over this with a `resolutions` / `overrides` pin.
+
+3.0 makes the requirement explicit instead. **You supply PrimeReact; we use yours.**
+
+```bash
+npm install @cratis/components primereact @primereact/core @primereact/headless @primereact/hooks primeicons
+```
+
+Which lands in your app's `dependencies` as:
+
+```json
+{
+    "dependencies": {
+        "primereact": "^11.0.0",
+        "@primereact/core": "^11.0.0",
+        "@primereact/headless": "^11.0.0",
+        "@primereact/hooks": "^11.0.0",
+        "primeicons": "^8.0.0"
+    }
+}
+```
+
+Notes:
+
+- `primereact` pins `@primereact/core`, `@primereact/headless` and `@primereact/hooks` to its own **exact** version, so installing `primereact@11.1.0` gives you 11.1.0 of all four. Declaring them anyway is what makes a strict installer (pnpm, Yarn PnP) resolve them for the library too.
+- `primeicons` went **7 → 8** alongside PrimeReact 11.
+- `@primereact/types` is an **optional** peer. You only need it declared if your own code imports our prop types (they re-export `@primereact/types/*` shapes). It arrives transitively via `@primereact/core` in a hoisting installer.
+- `@primereact/styles` and `@primeuix/themes` are **optional** peers. Install them only for PrimeReact's styled mode — see [Theming without a theme stylesheet](#theming-without-a-theme-stylesheet). The baseline theme and unstyled mode need neither.
+- If your app carried a `resolutions` / `overrides` entry to collapse PrimeReact into one copy, **you can delete it** — the peer declaration is what enforces that now.
+
+### Arc peer range is unchanged
+
+`@cratis/arc` and `@cratis/arc.react` now support `>=20.3.1 <23`. Arc 20, Arc 21 and Arc 22 are supported.
+
+> [!WARNING]
+> **Keep `@cratis/arc`, `@cratis/arc.react` and `@cratis/arc.vite` on the same version.** `@cratis/arc.react` depends on `@cratis/arc` with an **exact** pin, so if your own `@cratis/arc` drifts by even a patch your installer nests a second copy. `ObservableQuerySubscription` has a `private` field, which makes it nominally typed, so two copies produce a type error like _"types have separate declarations of a private property `_connection`"_ in any code touching an observable query. This is an Arc packaging issue, not a Components one; `DataTableForObservableQuery` is hardened against it internally so the library itself still compiles either way ([#135](https://github.com/Cratis/Components/issues/135)).
+
+## Stylesheets are now an explicit import
+
+In 2.x, every component did `import './Foo.css'` and relied on your bundler injecting it. That put CSS files in the **JavaScript module graph**, which meant the published package could not be loaded by Node at all: 29 of the export subpath checks failed with `ERR_UNKNOWN_FILE_EXTENSION` / `ERR_UNSUPPORTED_DIR_IMPORT`, and no consumer whose test environment is `node` could render a `Dialog` or `CommandDialog` in a spec ([#118](https://github.com/Cratis/Components/issues/118)).
+
+3.0 takes CSS out of the JavaScript graph entirely. Every export subpath now loads cleanly in Node. The cost is one explicit import in your app:
+
+```diff
+  // in your app entry point
++ import '@cratis/components/tokens';   // the --cratis-* token layer
++ import '@cratis/components/styles';   // all component CSS, in one file
++ import '@cratis/components/theme';    // optional — the Cratis baseline look (MIT CSS)
+```
+
+Import them in that order. `styles` and `theme` both consume the tokens.
+
+- `@cratis/components/styles` is new content, same specifier: in 2.x it resolved to only the compiled Tailwind utilities. It now contains those **plus every component stylesheet**.
+- It also **vendors `allotment/dist/style.css`**, which `DataPage` needs for its split view to lay out (without it a details pane grows to its content and clips the paginator). If you were importing `allotment/dist/style.css` yourself, you can drop it.
+- `SchemaEditor.module.css` is gone as a CSS Module. Its two classes are now plain, prefixed names (`cratis-schema-editor-navigable-row`, `cratis-schema-editor-bottom-border`) shipped in `styles`. This is internal, but noted in case you targeted the hashed names.
+
+## ESM-only packaging
+
+PrimeReact 11 is ESM-only, so `@cratis/components` dropped its CommonJS build. `main`, `module` and every `exports` entry point at `dist/esm`, and the package declares `"type": "module"`.
+
+- If your app bundles with Vite / modern tooling (the Cratis default), **no change**.
+- If something in your pipeline `require()`d the package, switch it to `import`.
+
+## Import moves (removed `primereact/*` paths)
+
+PrimeReact 11 ships **80** modules where v10 shipped 117. Replace the removed ones with the Cratis-owned equivalents — the authoring model is unchanged:
+
+| Was (PrimeReact 10)                                                                                                       | Now (3.0)                                                                                                                                               |
+| ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `import { Column } from 'primereact/column'`                                                                              | `import { Column } from '@cratis/components/DataTables'` (also re-exported from `@cratis/components/DataPage`)                                          |
+| `import { StepperPanel } from 'primereact/stepperpanel'`                                                                  | `import { StepperPanel } from '@cratis/components/CommandDialog'`                                                                                       |
+| `import { Menubar } from 'primereact/menubar'`                                                                            | `<DataPage.MenuItems>` for list-page actions; a `Button` toolbar of your own otherwise                                                                  |
+| `import { Dropdown } from 'primereact/dropdown'`                                                                          | `import { Dropdown } from '@cratis/components/Dropdown'`                                                                                                |
+| `primereact/calendar`, `primereact/inputtextarea`, `primereact/multiselect`, `primereact/chips`, `primereact/colorpicker` | consume through the [CommandForm fields](CommandForm/index.md) (`CalendarField`, `TextAreaField`, `MultiSelectField`, `ChipsField`, `ColorPickerField`) |
+| `import { PrimeReactProvider } from 'primereact/api'`                                                                     | `import { PrimeReactProvider } from '@primereact/core'` — or just use [`CratisComponentsProvider`](Common/cratis-components-provider.md)                |
+
+`<Column field="name" header="Name" sortable filter />` and `<StepperPanel header="…">` work exactly as before.
+
+### If you import `primereact/*` directly anywhere
+
+The full rename table, the removed-with-no-replacement list, and the `Sidebar` trap are on [PrimeReact and Components](coming-from-primereact.md#the-v11-module-renames). The short version: **v11 is compositional**, so a rename is often not a one-line edit — `primereact/select` exports `Select.Root` / `Select.Trigger` / `Select.Value` / `Select.Portal` / `Select.Popup` / `Select.List` / `Select.Option`, and you assemble them. Prefer a Cratis wrapper where one exists.
+
+> [!CAUTION]
+> **The `Sidebar` trap.** v10's `Sidebar` (an overlay drawer) is now **`primereact/drawer`**. `primereact/sidebar` still exists in v11 but is a **different, new app-shell primitive**. A name-preserving migration compiles cleanly and silently swaps your overlay for an app shell. Check every `Sidebar` usage by hand.
+
+Where the library needed a removed module, it now owns a replacement: a Cratis action toolbar (for `menubar`, driven by the same `model` array shape and reached through `<DataPage.MenuItems>`), [`Column`](DataTables/column-configuration.md) plus its filter menu (for `column`), [`StepperPanel`](StepperCommandDialog/index.md) (for `stepperpanel`), and `MultiSelectField` re-expressed over our own [`Dropdown`](Dropdown/index.md) wrapper (v11's `Select` has no `multiple` prop of the v10 shape).
+
+## Data-table selection event
+
+The removed `DataTableSelectionSingleChangeEvent` is replaced by `DataTableSelectionChangeEvent<T>`. `event.value` (the selected row) is unchanged, so only the type import moves:
+
+```diff
+- import { DataTableSelectionSingleChangeEvent } from 'primereact/datatable';
+- onSelectionChange={(e: DataTableSelectionSingleChangeEvent<Product[]>) => setSelected(e.value as Product)}
++ import type { DataTableSelectionChangeEvent } from '@cratis/components/DataTables';
++ onSelectionChange={(e: DataTableSelectionChangeEvent<Product>) => setSelected(e.value ?? undefined)}
+```
+
+Per-column filter menus (`<Column filter dataType="…" />`), a global search box, and a paginator range report are all restored — no API change to opt in beyond `filter`.
+
+## Theming without a theme stylesheet
+
+**PrimeReact 11 ships zero CSS.** `primereact/resources/themes/*.css` does not exist, and the `primereact` package is **unstyled primitives**: they render structural markup with `data-scope` / `data-part` attributes and **no `p-*` class names**. A theme is now two things handed to the provider at runtime: a **preset** — a plain JavaScript token object (`@primeuix/themes` — Aura, Lara, Nora) that `@primeuix/styled` turns into `--p-*` custom properties — and PrimeReact's **component styles** (`@primereact/styles`), which put the `p-*` class names on the primitives and carry the CSS the tokens drive. PrimeReact's own styled components (`@primereact/ui`) are just the primitives with those styles preset; `@cratis/components` builds on the primitives, so a preset alone (`theme: { preset }`) emits tokens but paints nothing.
+
+The chain is: **preset (JS) → `--p-*` (runtime) → `--cratis-*` (our token layer) → component CSS**, and in styled mode also **`primeReactStyles` → `p-*` class names + PrimeReact's component CSS**. Our `--cratis-*` tokens resolve the v11 token first and fall back to the v10 variable, so an app that still has a compiled v10 theme on the page during its port keeps working, and nothing breaks the day it is removed.
+
+Pick one of three paths — the [Styling](Styling/index.md) section walks each one:
+
+**A. [The Cratis baseline theme](Styling/baseline-theme.md).** Cratis-authored MIT CSS that assigns the `--cratis-*` tokens directly, light and dark, for a polished default with no preset and no extra dependency. It defers to a preset's `--p-*` values when one is present.
+
+```diff
+- import 'primereact/resources/themes/lara-dark-blue/theme.css';
++ import '@cratis/components/theme';
+```
+
+**B. [PrimeReact's styled mode](Styling/themed.md).** `styledMode()` from `@cratis/components/styled` returns `{ theme, defaults }` — a `@primeuix/themes` preset (default `CratisPreset`: Lara with the blue primary and gray surfaces of `lara-light-blue` / `lara-dark-blue`) plus `primeReactStyles`, PrimeReact's own component styles, which the provider applies to every primitive rendered under it — this library's and your own. Needs `@primereact/styles` and `@primeuix/themes` installed. Options: `preset` (any preset or `definePreset` result), `darkModeSelector` (default `.cratis-dark`), `cssLayer` (default the `primereact` layer, ordered between Tailwind's `base` and `components`, so a plain `.p-button { … }` in your CSS overrides the theme just as it did against v10's `@layer primereact` stylesheets; `false` emits unlayered).
+
+```diff
+- import 'primereact/resources/themes/lara-dark-blue/theme.css';
++ import { styledMode } from '@cratis/components/styled';
+  // …
+- <CratisComponentsProvider>
++ <CratisComponentsProvider value={{ license: '…', ...styledMode() }}>
+```
+
+`npm i @primereact/styles @primeuix/themes` for this path only.
+
+**C. Fully unstyled.** Ship structure plus the `--cratis-*` token layer and bring your own visuals via `pt` / CSS / Tailwind. Your existing `--cratis-*` overrides keep working.
+
+```tsx
+<CratisComponentsProvider value={{ unstyled: true, pt: myPreset }}>
+```
+
+### If your CSS was written against a v10 theme's variables
+
+A v10 theme stylesheet published `--surface-ground`, `--surface-card`, `--surface-border`, `--surface-hover`, `--text-color`, `--text-color-secondary`, `--primary-color`, `--highlight-bg`, `--focus-ring`, `--maskbg`, `--border-radius`, the `--surface-0…900` and `--primary-50…900` scales, the `--gray` / `--blue` / `--green` / `--yellow` / `--cyan` / `--pink` / `--indigo` / `--teal` / `--orange` / `--bluegray` / `--purple` / `--red-50…900` scales, the `--surface-a…f` aliases, `--content-padding` and `--inline-spacing` on `:root`. On PrimeReact 11 they resolve to nothing the day it is installed — borders vanish, cards lose their background. **`@cratis/components/primereact-v10-palette`** restores every one of them with the `lara-light-blue` / `lara-dark-blue` values, so those call sites keep working:
+
+```diff
+- import 'primereact/resources/themes/lara-dark-blue/theme.css';
+  import '@cratis/components/tokens';
+  import '@cratis/components/styles';
++ import '@cratis/components/primereact-v10-palette';
+  // …
++ <CratisComponentsProvider value={{ license: '…', ...styledMode() }}>
+```
+
+- The **semantic** names (`--surface-card`, `--text-color`, `--primary-color`, …) resolve from the active preset's `--p-*` tokens where v11 has an equivalent, with the Lara values as the fallback — so they follow whatever preset styled mode applies.
+- The **numbered scales** are the lara-blue values verbatim. The v10 dark surface scale was inverted, so `--p-surface-*` cannot stand in for it.
+- Light and dark switch through `light-dark()`, keyed off `.cratis-dark` (the file sets `color-scheme: dark` on it) — the same class the baseline theme and `styledMode()` use.
+
+Import order: `tokens`, `styles`, then the palette (and/or `theme`). It exists so what is already written keeps working — write nothing new against those names; use `--cratis-*` (or `--p-*`) instead.
+
+`CratisComponentsProvider` takes everything through its single `value` prop, which is deep-merged onto PrimeReact's provider config — `unstyled`, `pt`, `ptOptions`, `ripple`, `inputVariant`, `zIndex`, `locale`, `theme`, `defaults` and `license`. It also accepts a `toaster` prop (`true` or a `ToasterProps` object) to mount a `<Toaster />` for you.
+
+## Dialog
+
+[`Dialog`](Dialogs/dialog.md) / [`CommandDialog`](CommandDialog/index.md) / [`StepperCommandDialog`](StepperCommandDialog/index.md) keep their public APIs, including `initialFocus` (`DialogInitialFocus.Confirm | Cancel | Content`), which is re-expressed on v11's focus trap and behaves identically.
+
+- **Added:** `dismissable` — whether the header close, backdrop click and `Escape` are offered. Defaults to "yes for a predefined `DialogButtons` set, no for a custom footer", matching v10's behavior; set it explicitly to keep a dismiss affordance with a custom footer.
+- **Added:** `closeAriaLabel` for localizing the header close button.
+- **No effect:** `resizable` is still accepted so call sites compile, but v11's headless dialog has no resize handle.
+
+`StepperCommandDialog` keeps `showCancel` / `cancelLabel` (the opt-in footer Cancel), and still withdraws every dismissal — footer Cancel, header close and `Escape` — for the whole window a command is executing in.
+
+## Overlay z-index workarounds are gone (and no longer needed)
+
+2.x exported a `useOverlayZIndex` hook and passed `appendTo={document.body}` on every overlay-bearing field, because a v10 dropdown/calendar panel opened inside a modal dialog rendered _inside_ the dialog's subtree and could land under its own mask.
+
+**`useOverlayZIndex` is removed.** PrimeReact 11 does both natively: `Select.Portal` defaults to `appendTo: 'body'`, and the shared z-index registry gives a later-opened overlay a value above whatever is already registered. Measured on v11.1.0: with a dialog at z-index 1102, the select panel opens at **2103**, portaled to `document.body`. There is a regression spec (`Source/Dropdown/for_Dropdown/when_opened_inside_a_dialog.ts`) pinning this, so a future regression is caught rather than rediscovered.
+
+If you called `useOverlayZIndex` in your own app for your own overlays, you will need to inline it — but check first whether v11 has already made it unnecessary for you too.
+
+## Reduced capabilities (forced by PrimeReact 11)
+
+A few v10 features have no v11 equivalent. The props are **kept so your code still compiles**, but they no longer do anything — remove them or adopt the alternative:
+
+| Prop                                                                               | What changed                                                                                                                                                                                                                                            |
+| ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `Dialog` `resizable`                                                               | v11's headless dialog has no resize handle — no effect.                                                                                                                                                                                                 |
+| `ChipsField` `separator`                                                           | v11 `InputTags` commits one tag per Enter; pasted input is no longer auto-split.                                                                                                                                                                        |
+| `MultiSelectField` `display` / `maxSelectedLabels`                                 | v11 `Select` renders the selection through its value slot; the v10 comma/chip modes and label-collapse are gone.                                                                                                                                        |
+| `DataTableForQuery` / `DataTableForObservableQuery` / `DataPage` `clientFiltering` | Retained as a deprecated no-op for source compatibility. Filtering always affects only the loaded page and pagination retains server totals. For complete-result filtering, pass filters as query arguments and apply them on the server before paging. |
+
+Some wrappers also **narrowed their surface** (they no longer leak PrimeReact's full API):
+
+- **`Column`** keeps the `field` / `header` / `body` / `sortable` / `filter` authoring model; v10 extras like `editor`, `frozen`, `footer`, `colSpan` and `expander` are not carried over.
+- **`Dropdown`** exposes a curated single/multi select surface (`value`, `options`, `optionLabel` / `optionValue`, `placeholder`, `filter`, `multiple`, `showClear`, `style`, `id`, `name`, `aria-*`, …) plus `pt` / `ptOptions` / `unstyled` — it no longer accepts arbitrary PrimeReact Select props. `optionLabel` / `optionValue` default to `label` / `value` when the option objects carry those fields — the v10 `Dropdown` convention — so `[{ label, value }]` options with a scalar `value` keep matching (v11's `Select` compares the option object itself otherwise).
+- The **`DataPage` action toolbar** replaces the v10 Menubar: `menubarPt` / `menubarPtOptions` / `menubarUnstyled` now target the toolbar's **buttons**, and the paginator is styled via `paginatorClassName` (+ `paginatorAriaLabels`), not `pt`.
+- **`StepperCustomizationProps`** is now Cratis-owned (it no longer aliases PrimeReact's `StepperProps`). Same shape, minus the removed slots.
+
+### If you write `pt` definitions or CSS selectors against PrimeReact internals
+
+v11 is unstyled-first: outside [styled mode](Styling/themed.md), PrimeReact elements carry **no `p-*` class at all**. Parts are identified by data attributes instead — `[data-scope="dialog"][data-part="close"]`, `[data-scope="select"][data-part="trigger"]`, and so on. Selectors written against v10 class names will silently match nothing there. In styled mode the `p-*` class names are back — `styledMode()` applies PrimeReact's component styles to every primitive — and the theme sits in the `primereact` cascade layer, so a plain `.p-button { … }` in your own CSS overrides it as it did on v10. (`pt` slot keys are unaffected either way.)
+
+## What's new (nothing to migrate — just available)
+
+- **[Notifications](Notifications/index.md)** — `Toaster`, the imperative `toast`, and `toastCommandResult(result)` to surface an Arc command result as the right toast (validation → per-field messages, exceptions → generic, never stack traces).
+- **[Display](Display/index.md)** — `Tag`, `Badge`, `Chip`, `Skeleton`, `Avatar`, `ProgressBar`.
+- **CommandForm fields** — [PasswordField](CommandForm/password-field.md), [ToggleSwitchField](CommandForm/toggle-switch-field.md), [RatingField](CommandForm/rating-field.md).
+- **[AutoCommandForm](CommandForm/auto-command-form.md)** — generates a `CommandForm`'s fields from the command's own `propertyDescriptors`, with a `registerFieldTypeProvider` registry for custom types.
+- **[`@cratis/components/theme`](Styling/baseline-theme.md)** — the Cratis baseline theme (MIT CSS). It now positions the dialog backdrop and positioner itself; previously a baseline-theme dialog could render below the page content.
+- **[`@cratis/components/styled`](Styling/themed.md)** — `styledMode()`, `CratisPreset`, `primeReactStyles`, `primeReactCssLayer`, `primeReactCssLayerOrder` and `cratisDarkModeSelector`: PrimeReact's styled mode, wired for the provider.
+- **`@cratis/components/primereact-v10-palette`** — the PrimeReact 10 theme variables (`--surface-*`, `--text-color`, `--primary-color`, the color scales, …) restored with the lara-blue values, for CSS already written against them.
+- **`Dropdown`** reads `label` / `value` off option objects when `optionLabel` / `optionValue` are omitted — the v10 `Dropdown` convention.
+
+## Licensing
+
+**PrimeReact 11 is no longer MIT.** PrimeReact 10 was; 11 is part of PrimeTek's commercial **PrimeUI** family, along with `primeicons` 8.x, `@primereact/core`, `@primereact/headless`, `@primereact/hooks`, `@primereact/styles`, `@primeuix/themes` and `@primeuix/styled`.
+
+`@cratis/components` itself stays **MIT**. What changed is what it depends on — and because PrimeReact is a peer dependency as of 3.0.0, you install it and its terms apply to you directly.
+
+### A key is required regardless of how you style
+
+An earlier version of this page said unstyled rendering and the Cratis baseline theme needed no key. **That was wrong.** PrimeReact 11 verifies a license key when `PrimeReactProvider` mounts, with no condition on `unstyled`, on whether a preset is applied, or on `NODE_ENV` — so all three styling paths above reach it. Without a valid key you get a console warning and a fixed _"Invalid PrimeUI License"_ banner, in development **and** production.
+
+```tsx
+<CratisComponentsProvider value={{ license: '…' }}>
+```
+
+What the styling choice changes is whether you additionally depend on `@primereact/styles` and `@primeuix/themes` — both PrimeUI-licensed too, and needed only for styled mode. [The Cratis baseline theme](Styling/baseline-theme.md) is Cratis-authored MIT CSS embedding no PrimeTek values, so that _stylesheet_ carries no PrimeTek terms — but rendering it still runs PrimeReact 11, which needs a key.
+
+### Which license you need
+
+- **[Community License](https://primeui.dev/licenses/community)** — free, and covers individuals, students, non-profits and non-commercial open source. For an organization it requires _all_ of: under $1M USD annual gross revenue, fewer than 5 developers, fewer than 10 employees, and under $3M USD in outside funding. Supports up to 4 developers, renewed annually by confirming eligibility.
+- **[Commercial License](https://primeui.dev/licenses/commercial)** — for everyone else. Per developer, perpetual, one year of updates.
+
+### If you redistribute
+
+PrimeReact 11's terms state: _"You may not … redistribute it as a component library or development tool … Redistributing the software so that third parties can develop with it requires a separate OEM License."_ Building an application is not what that clause is aimed at; publishing a library or tool that others build with is — read it and check your position with PrimeTek.
+
+### Staying on MIT
+
+**`@cratis/components` 2.x stays on PrimeReact 10 and is fully MIT.** It is not getting new features, but it is the supported way to remain MIT-only.
+
+> Nothing here is legal advice, and this summary may lag PrimeTek's terms. The authoritative text is the `LICENSE.md` inside the `primereact` package and the pages linked above.
diff --git a/Documentation/migration.md b/Documentation/migration.md
index fb3f151e..f31c164d 100644
--- a/Documentation/migration.md
+++ b/Documentation/migration.md
@@ -1,248 +1,244 @@
-# Migration — `@cratis/components` 2.x → 3.0 (PrimeReact 10 → 11)
+---
+title: Migrate from Components 3 to 4
+description: Move from the PrimeReact-backed release to the renderer-independent React Aria foundation.
+---
 
-`@cratis/components` 3.0 moves the library from PrimeReact 10 to **PrimeReact 11**. Most wrapper APIs survive unchanged, so many apps upgrade with the find-and-replace in [Import moves](#import-moves-removed-primereact-paths) plus the install and import changes in [PrimeReact is now a peer dependency](#primereact-is-now-a-peer-dependency) and [Stylesheets are now an explicit import](#stylesheets-are-now-an-explicit-import). This guide lists every change a consuming app can feel.
+Components 4 replaces the mandatory PrimeReact 11 foundation with Cratis-owned markup, styling contracts, and public types. React Aria supplies accessible interaction behavior internally. Applications no longer install, configure, license, theme, or type against PrimeReact to use Components.
 
-> [!IMPORTANT]
-> **The three things you must do**, even if you change no component code:
->
-> 1. **Install the PrimeReact peers yourself** — they are no longer our dependency.
-> 2. **Import `@cratis/components/styles`** — component CSS no longer rides along with the JavaScript.
-> 3. **Choose a theming path** — there is no `resources/themes/*.css` to import any more.
+This is intentionally a major release. Component behavior remains familiar, but rendered markup, styling parts, provider configuration, date entry, and some deprecated props change.
 
-## PrimeReact is now a peer dependency
+:::note
+Components 3 remains the compatibility line for an application that cannot migrate yet. A separate PrimeReact compatibility package will not be published unless PrimeTek confirms the applicable OEM and redistribution terms in writing.
+:::
 
-**This is the change most likely to break your install.** In 2.x, `primereact` was a regular `dependency` of `@cratis/components`, so your app got a copy whether it asked for one or not. That is exactly the problem: if your app also depended on `primereact`, npm could resolve **two copies**, and two copies of PrimeReact means two `PrimeReactProvider` React contexts. Components rendered from the library would read a different config, theme and z-index registry than components you render yourself — and the symptom is not an error, it is overlays stacking wrongly and `pt`/`unstyled` silently not applying. Apps were papering over this with a `resolutions` / `overrides` pin.
+## Update dependencies
 
-3.0 makes the requirement explicit instead. **You supply PrimeReact; we use yours.**
+Remove the Prime packages that were installed only for Components:
 
 ```bash
-npm install @cratis/components primereact @primereact/core @primereact/headless @primereact/hooks primeicons
+npm uninstall \
+  primereact primeicons \
+  @primereact/core @primereact/headless @primereact/hooks \
+  @primereact/styles @primereact/types \
+  @primeuix/themes
+npm install @cratis/components
 ```
 
-Which lands in your app's `dependencies` as:
-
-```json
-{
-    "dependencies": {
-        "primereact": "^11.0.0",
-        "@primereact/core": "^11.0.0",
-        "@primereact/headless": "^11.0.0",
-        "@primereact/hooks": "^11.0.0",
-        "primeicons": "^8.0.0"
-    }
-}
-```
-
-Notes:
-
-- `primereact` pins `@primereact/core`, `@primereact/headless` and `@primereact/hooks` to its own **exact** version, so installing `primereact@11.1.0` gives you 11.1.0 of all four. Declaring them anyway is what makes a strict installer (pnpm, Yarn PnP) resolve them for the library too.
-- `primeicons` went **7 → 8** alongside PrimeReact 11.
-- `@primereact/types` is an **optional** peer. You only need it declared if your own code imports our prop types (they re-export `@primereact/types/*` shapes). It arrives transitively via `@primereact/core` in a hoisting installer.
-- `@primereact/styles` and `@primeuix/themes` are **optional** peers. Install them only for PrimeReact's styled mode — see [Theming without a theme stylesheet](#theming-without-a-theme-stylesheet). The baseline theme and unstyled mode need neither.
-- If your app carried a `resolutions` / `overrides` entry to collapse PrimeReact into one copy, **you can delete it** — the peer declaration is what enforces that now.
+Keep a Prime package only when your application still imports it directly. Migrate those imports separately; Components no longer supplies or requires them.
 
-### Arc peer range is unchanged
+The supported Arc peer range remains `>=20.3.1 <23`.
 
-`@cratis/arc` and `@cratis/arc.react` now support `>=20.3.1 <23`. Arc 20, Arc 21 and Arc 22 are supported.
+## Keep the stylesheet entry points
 
-> [!WARNING]
-> **Keep `@cratis/arc`, `@cratis/arc.react` and `@cratis/arc.vite` on the same version.** `@cratis/arc.react` depends on `@cratis/arc` with an **exact** pin, so if your own `@cratis/arc` drifts by even a patch your installer nests a second copy. `ObservableQuerySubscription` has a `private` field, which makes it nominally typed, so two copies produce a type error like _"types have separate declarations of a private property `_connection`"_ in any code touching an observable query. This is an Arc packaging issue, not a Components one; `DataTableForObservableQuery` is hardened against it internally so the library itself still compiles either way ([#135](https://github.com/Cratis/Components/issues/135)).
+The three Cratis-owned stylesheet entries remain:
 
-## Stylesheets are now an explicit import
-
-In 2.x, every component did `import './Foo.css'` and relied on your bundler injecting it. That put CSS files in the **JavaScript module graph**, which meant the published package could not be loaded by Node at all: 29 of the export subpath checks failed with `ERR_UNKNOWN_FILE_EXTENSION` / `ERR_UNSUPPORTED_DIR_IMPORT`, and no consumer whose test environment is `node` could render a `Dialog` or `CommandDialog` in a spec ([#118](https://github.com/Cratis/Components/issues/118)).
-
-3.0 takes CSS out of the JavaScript graph entirely. Every export subpath now loads cleanly in Node. The cost is one explicit import in your app:
-
-```diff
-  // in your app entry point
-+ import '@cratis/components/tokens';   // the --cratis-* token layer
-+ import '@cratis/components/styles';   // all component CSS, in one file
-+ import '@cratis/components/theme';    // optional — the Cratis baseline look (MIT CSS)
+```ts
+import '@cratis/components/tokens';
+import '@cratis/components/styles';
+import '@cratis/components/theme'; // optional baseline appearance
 ```
 
-Import them in that order. `styles` and `theme` both consume the tokens.
-
-- `@cratis/components/styles` is new content, same specifier: in 2.x it resolved to only the compiled Tailwind utilities. It now contains those **plus every component stylesheet**.
-- It also **vendors `allotment/dist/style.css`**, which `DataPage` needs for its split view to lay out (without it a details pane grows to its content and clips the paginator). If you were importing `allotment/dist/style.css` yourself, you can drop it.
-- `SchemaEditor.module.css` is gone as a CSS Module. Its two classes are now plain, prefixed names (`cratis-schema-editor-navigable-row`, `cratis-schema-editor-bottom-border`) shipped in `styles`. This is internal, but noted in case you targeted the hashed names.
-
-## ESM-only packaging
-
-PrimeReact 11 is ESM-only, so `@cratis/components` dropped its CommonJS build. `main`, `module` and every `exports` entry point at `dist/esm`, and the package declares `"type": "module"`.
-
-- If your app bundles with Vite / modern tooling (the Cratis default), **no change**.
-- If something in your pipeline `require()`d the package, switch it to `import`.
-
-## Import moves (removed `primereact/*` paths)
-
-PrimeReact 11 ships **80** modules where v10 shipped 117. Replace the removed ones with the Cratis-owned equivalents — the authoring model is unchanged:
-
-| Was (PrimeReact 10)                                                                                                       | Now (3.0)                                                                                                                                               |
-| ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `import { Column } from 'primereact/column'`                                                                              | `import { Column } from '@cratis/components/DataTables'` (also re-exported from `@cratis/components/DataPage`)                                          |
-| `import { StepperPanel } from 'primereact/stepperpanel'`                                                                  | `import { StepperPanel } from '@cratis/components/CommandDialog'`                                                                                       |
-| `import { Menubar } from 'primereact/menubar'`                                                                            | `<DataPage.MenuItems>` for list-page actions; a `Button` toolbar of your own otherwise                                                                  |
-| `import { Dropdown } from 'primereact/dropdown'`                                                                          | `import { Dropdown } from '@cratis/components/Dropdown'`                                                                                                |
-| `primereact/calendar`, `primereact/inputtextarea`, `primereact/multiselect`, `primereact/chips`, `primereact/colorpicker` | consume through the [CommandForm fields](CommandForm/index.md) (`CalendarField`, `TextAreaField`, `MultiSelectField`, `ChipsField`, `ColorPickerField`) |
-| `import { PrimeReactProvider } from 'primereact/api'`                                                                     | `import { PrimeReactProvider } from '@primereact/core'` — or just use [`CratisComponentsProvider`](Common/cratis-components-provider.md)                |
-
-`<Column field="name" header="Name" sortable filter />` and `<StepperPanel header="…">` work exactly as before.
-
-### If you import `primereact/*` directly anywhere
-
-The full rename table, the removed-with-no-replacement list, and the `Sidebar` trap are on [PrimeReact and Components](coming-from-primereact.md#the-v11-module-renames). The short version: **v11 is compositional**, so a rename is often not a one-line edit — `primereact/select` exports `Select.Root` / `Select.Trigger` / `Select.Value` / `Select.Portal` / `Select.Popup` / `Select.List` / `Select.Option`, and you assemble them. Prefer a Cratis wrapper where one exists.
+- `tokens` defines the stable semantic `--cratis-*` variables.
+- `styles` contains structural rules for every component.
+- `theme` supplies the optional baseline light/dark values.
 
-> [!CAUTION]
-> **The `Sidebar` trap.** v10's `Sidebar` (an overlay drawer) is now **`primereact/drawer`**. `primereact/sidebar` still exists in v11 but is a **different, new app-shell primitive**. A name-preserving migration compiles cleanly and silently swaps your overlay for an app shell. Check every `Sidebar` usage by hand.
+A custom product design can omit `theme`, define the `--cratis-*` variables itself, and style stable component parts through classes or `pt`.
 
-Where the library needed a removed module, it now owns a replacement: a Cratis action toolbar (for `menubar`, driven by the same `model` array shape and reached through `<DataPage.MenuItems>`), [`Column`](DataTables/column-configuration.md) plus its filter menu (for `column`), [`StepperPanel`](StepperCommandDialog/index.md) (for `stepperpanel`), and `MultiSelectField` re-expressed over our own [`Dropdown`](Dropdown/index.md) wrapper (v11's `Select` has no `multiple` prop of the v10 shape).
+## Simplify the provider
 
-## Data-table selection event
+The provider now owns locale and Components-specific labels. It no longer accepts a PrimeUI key, renderer preset, global Prime pass-through map, ripple setting, or renderer defaults.
 
-The removed `DataTableSelectionSingleChangeEvent` is replaced by `DataTableSelectionChangeEvent<T>`. `event.value` (the selected row) is unchanged, so only the type import moves:
-
-```diff
-- import { DataTableSelectionSingleChangeEvent } from 'primereact/datatable';
-- onSelectionChange={(e: DataTableSelectionSingleChangeEvent<Product[]>) => setSelected(e.value as Product)}
-+ import type { DataTableSelectionChangeEvent } from '@cratis/components/DataTables';
-+ onSelectionChange={(e: DataTableSelectionChangeEvent<Product>) => setSelected(e.value ?? undefined)}
+```tsx
+import { CratisComponentsProvider } from '@cratis/components';
+
+export const ApplicationRoot = ({ children }: { children: React.ReactNode }) => (
+    <CratisComponentsProvider
+        value={{
+            locale: 'nb-NO',
+            messages: {
+                paginator: {
+                    navigation: 'Sidenavigasjon',
+                    first: 'Første side',
+                    previous: 'Forrige side',
+                    next: 'Neste side',
+                    last: 'Siste side',
+                },
+                datePicker: {
+                    today: 'I dag',
+                    clear: 'Tøm',
+                    openCalendar: 'Åpne kalender',
+                    previousMonth: 'Forrige måned',
+                    nextMonth: 'Neste måned',
+                },
+            },
+        }}
+        toaster
+    >
+        {children}
+    </CratisComponentsProvider>
+);
 ```
 
-Per-column filter menus (`<Column filter dataType="…" />`), a global search box, and a paginator range report are all restored — no API change to opt in beyond `filter`.
-
-## Theming without a theme stylesheet
+`locales` remains temporarily accepted and maps the old paginator/date labels, but new code should use `messages`. Unknown renderer keys are ignored and should be removed.
 
-**PrimeReact 11 ships zero CSS.** `primereact/resources/themes/*.css` does not exist, and the `primereact` package is **unstyled primitives**: they render structural markup with `data-scope` / `data-part` attributes and **no `p-*` class names**. A theme is now two things handed to the provider at runtime: a **preset** — a plain JavaScript token object (`@primeuix/themes` — Aura, Lara, Nora) that `@primeuix/styled` turns into `--p-*` custom properties — and PrimeReact's **component styles** (`@primereact/styles`), which put the `p-*` class names on the primitives and carry the CSS the tokens drive. PrimeReact's own styled components (`@primereact/ui`) are just the primitives with those styles preset; `@cratis/components` builds on the primitives, so a preset alone (`theme: { preset }`) emits tokens but paints nothing.
+## Replace renderer presets with tokens
 
-The chain is: **preset (JS) → `--p-*` (runtime) → `--cratis-*` (our token layer) → component CSS**, and in styled mode also **`primeReactStyles` → `p-*` class names + PrimeReact's component CSS**. Our `--cratis-*` tokens resolve the v11 token first and fall back to the v10 variable, so an app that still has a compiled v10 theme on the page during its port keeps working, and nothing breaks the day it is removed.
+Remove `styledMode()`, `CratisPreset`, and `primeReactStyles` before upgrading. The `@cratis/components/styled` renderer-specific entry point is removed in Components 4.
 
-Pick one of three paths — the [Styling](Styling/index.md) section walks each one:
+Before:
 
-**A. [The Cratis baseline theme](Styling/baseline-theme.md).** Cratis-authored MIT CSS that assigns the `--cratis-*` tokens directly, light and dark, for a polished default with no preset and no extra dependency. It defers to a preset's `--p-*` values when one is present.
-
-```diff
-- import 'primereact/resources/themes/lara-dark-blue/theme.css';
-+ import '@cratis/components/theme';
-```
-
-**B. [PrimeReact's styled mode](Styling/themed.md).** `styledMode()` from `@cratis/components/styled` returns `{ theme, defaults }` — a `@primeuix/themes` preset (default `CratisPreset`: Lara with the blue primary and gray surfaces of `lara-light-blue` / `lara-dark-blue`) plus `primeReactStyles`, PrimeReact's own component styles, which the provider applies to every primitive rendered under it — this library's and your own. Needs `@primereact/styles` and `@primeuix/themes` installed. Options: `preset` (any preset or `definePreset` result), `darkModeSelector` (default `.cratis-dark`), `cssLayer` (default the `primereact` layer, ordered between Tailwind's `base` and `components`, so a plain `.p-button { … }` in your CSS overrides the theme just as it did against v10's `@layer primereact` stylesheets; `false` emits unlayered).
-
-```diff
-- import 'primereact/resources/themes/lara-dark-blue/theme.css';
-+ import { styledMode } from '@cratis/components/styled';
-  // …
-- <CratisComponentsProvider>
-+ <CratisComponentsProvider value={{ license: '…', ...styledMode() }}>
+```tsx
+<CratisComponentsProvider value={{ license, ...styledMode({ preset: ProductPreset }) }}>
+    <App />
+</CratisComponentsProvider>
 ```
 
-`npm i @primereact/styles @primeuix/themes` for this path only.
-
-**C. Fully unstyled.** Ship structure plus the `--cratis-*` token layer and bring your own visuals via `pt` / CSS / Tailwind. Your existing `--cratis-*` overrides keep working.
+After:
 
 ```tsx
-<CratisComponentsProvider value={{ unstyled: true, pt: myPreset }}>
+<CratisComponentsProvider value={{ locale: 'en-US' }}>
+    <App />
+</CratisComponentsProvider>
 ```
 
-### If your CSS was written against a v10 theme's variables
-
-A v10 theme stylesheet published `--surface-ground`, `--surface-card`, `--surface-border`, `--surface-hover`, `--text-color`, `--text-color-secondary`, `--primary-color`, `--highlight-bg`, `--focus-ring`, `--maskbg`, `--border-radius`, the `--surface-0…900` and `--primary-50…900` scales, the `--gray` / `--blue` / `--green` / `--yellow` / `--cyan` / `--pink` / `--indigo` / `--teal` / `--orange` / `--bluegray` / `--purple` / `--red-50…900` scales, the `--surface-a…f` aliases, `--content-padding` and `--inline-spacing` on `:root`. On PrimeReact 11 they resolve to nothing the day it is installed — borders vanish, cards lose their background. **`@cratis/components/primereact-v10-palette`** restores every one of them with the `lara-light-blue` / `lara-dark-blue` values, so those call sites keep working:
-
-```diff
-- import 'primereact/resources/themes/lara-dark-blue/theme.css';
-  import '@cratis/components/tokens';
-  import '@cratis/components/styles';
-+ import '@cratis/components/primereact-v10-palette';
-  // …
-+ <CratisComponentsProvider value={{ license: '…', ...styledMode() }}>
+Map product tokens directly in CSS:
+
+```css
+:root {
+    --cratis-primary-color: var(--product-accent-700);
+    --cratis-primary-color-text: var(--product-text-inverse);
+    --cratis-surface-card: var(--product-surface);
+    --cratis-surface-overlay: var(--product-surface);
+    --cratis-surface-border: var(--product-border);
+    --cratis-text-color: var(--product-text-primary);
+    --cratis-text-color-secondary: var(--product-text-secondary);
+    --cratis-focus-ring: var(--product-focus-ring);
+}
 ```
 
-- The **semantic** names (`--surface-card`, `--text-color`, `--primary-color`, …) resolve from the active preset's `--p-*` tokens where v11 has an equivalent, with the Lara values as the fallback — so they follow whatever preset styled mode applies.
-- The **numbered scales** are the lara-blue values verbatim. The v10 dark surface scale was inverted, so `--p-surface-*` cannot stand in for it.
-- Light and dark switch through `light-dark()`, keyed off `.cratis-dark` (the file sets `color-scheme: dark` on it) — the same class the baseline theme and `styledMode()` use.
+This removes the old product-token → Prime preset → Prime variable → Cratis variable translation chain.
 
-Import order: `tokens`, `styles`, then the palette (and/or `theme`). It exists so what is already written keeps working — write nothing new against those names; use `--cratis-*` (or `--p-*`) instead.
+## Migrate pass-through configuration
 
-`CratisComponentsProvider` takes everything through its single `value` prop, which is deep-merged onto PrimeReact's provider config — `unstyled`, `pt`, `ptOptions`, `ripple`, `inputVariant`, `zIndex`, `locale`, `theme`, `defaults` and `license`. It also accepts a `toaster` prop (`true` or a `ToasterProps` object) to mount a `<Toaster />` for you.
+The `pt` prop remains the per-part customization surface, but its values are now ordinary HTML attributes and its keys are stable Cratis names. `ptOptions` and `unstyled` remain accepted temporarily but have no effect: part attributes always merge, and Components always uses consumer-owned CSS.
 
-## Dialog
+```tsx
+<Dialog
+    title='Confirm deletion'
+    pt={{
+        backdrop: { className: 'product-dialog-backdrop' },
+        root: { className: 'product-dialog' },
+        header: { className: 'product-dialog-header' },
+        title: { className: 'product-dialog-title' },
+        close: { className: 'product-dialog-close' },
+        content: { className: 'product-dialog-content' },
+        footer: { className: 'product-dialog-footer' },
+    }}
+>
+    This cannot be undone.
+</Dialog>
+```
 
-[`Dialog`](Dialogs/dialog.md) / [`CommandDialog`](CommandDialog/index.md) / [`StepperCommandDialog`](StepperCommandDialog/index.md) keep their public APIs, including `initialFocus` (`DialogInitialFocus.Confirm | Cancel | Content`), which is re-expressed on v11's focus trap and behaves identically.
+Every meaningful element also carries `data-cratis-part`. Interactive states use attributes such as `data-selected`, `data-invalid`, `data-disabled`, `data-active`, and `data-position`. Do not target React Aria class names or internal DOM structure.
 
-- **Added:** `dismissable` — whether the header close, backdrop click and `Escape` are offered. Defaults to "yes for a predefined `DialogButtons` set, no for a custom footer", matching v10's behavior; set it explicitly to keep a dismiss affordance with a custom footer.
-- **Added:** `closeAriaLabel` for localizing the header close button.
-- **No effect:** `resizable` is still accepted so call sites compile, but v11's headless dialog has no resize handle.
+### Common part mappings
 
-`StepperCommandDialog` keeps `showCancel` / `cancelLabel` (the opt-in footer Cancel), and still withdraws every dismissal — footer Cancel, header close and `Escape` — for the whole window a command is executing in.
+| Components 3 renderer slot     | Components 4 Cratis part                       |
+| ------------------------------ | ---------------------------------------------- |
+| Dialog `mask` / `backdrop`     | `backdrop`                                     |
+| Dialog `positioner`            | `positioner`                                   |
+| Dialog `root`                  | `root`                                         |
+| Dialog `headerTitle` / `title` | `title`                                        |
+| Dialog `closeButton` / `close` | `close`                                        |
+| DataTable `tableContainer`     | `tableContainer`                               |
+| DataTable `thead`              | `head`                                         |
+| DataTable `tbody`              | `body`                                         |
+| DataTable `bodyRow` / `row`    | `row`                                          |
+| Dropdown `trigger`             | `trigger`                                      |
+| Dropdown `option`              | `option`                                       |
+| DatePicker `input`             | segmented `input`; identity belongs on `group` |
 
-## Overlay z-index workarounds are gone (and no longer needed)
+See [Stable component parts](Styling/pass-through.md) for the complete contract.
 
-2.x exported a `useOverlayZIndex` hook and passed `appendTo={document.body}` on every overlay-bearing field, because a v10 dropdown/calendar panel opened inside a modal dialog rendered _inside_ the dialog's subtree and could land under its own mask.
+## Update DatePicker integration
 
-**`useOverlayZIndex` is removed.** PrimeReact 11 does both natively: `Select.Portal` defaults to `appendTo: 'body'`, and the shared z-index registry gives a later-opened overlay a value above whatever is already registered. Measured on v11.1.0: with a dialog at z-index 1102, the select panel opens at **2103**, portaled to `document.body`. There is a regression spec (`Source/Dropdown/for_Dropdown/when_opened_inside_a_dialog.ts`) pinning this, so a future regression is caught rather than rediscovered.
+`DatePickerInput` still accepts and emits `Date | null`, but its internal value uses `@internationalized/date`. Formatting now follows the active locale and calendar rather than a PrimeReact mask.
 
-If you called `useOverlayZIndex` in your own app for your own overlays, you will need to inline it — but check first whether v11 has already made it unnecessary for you too.
+- Replace `dateFormat` with locale configuration where possible. The prop remains accepted but is ignored.
+- Use `aria-label` or `aria-labelledby` for the segmented date group.
+- `id` identifies the focus group rather than a native text input.
+- `todayLabel` and `clearLabel` override the provider messages for one picker.
+- `showTime` and `hourFormat` remain supported.
 
-## Reduced capabilities (forced by PrimeReact 11)
+## Update Dropdown styling and semantics
 
-A few v10 features have no v11 equivalent. The props are **kept so your code still compiles**, but they no longer do anything — remove them or adopt the alternative:
+`Dropdown` preserves the `value`, `options`, `optionLabel`, `optionValue`, filtering, clear, and change-event model. Single selects now follow the WAI-ARIA button/listbox pattern; filtered selects use a combobox.
 
-| Prop                                                                               | What changed                                                                                                                                                                                                                                            |
-| ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `Dialog` `resizable`                                                               | v11's headless dialog has no resize handle — no effect.                                                                                                                                                                                                 |
-| `ChipsField` `separator`                                                           | v11 `InputTags` commits one tag per Enter; pasted input is no longer auto-split.                                                                                                                                                                        |
-| `MultiSelectField` `display` / `maxSelectedLabels`                                 | v11 `Select` renders the selection through its value slot; the v10 comma/chip modes and label-collapse are gone.                                                                                                                                        |
-| `DataTableForQuery` / `DataTableForObservableQuery` / `DataPage` `clientFiltering` | Retained as a deprecated no-op for source compatibility. Filtering always affects only the loaded page and pagination retains server totals. For complete-result filtering, pass filters as query arguments and apply them on the server before paging. |
+Do not assume every Dropdown trigger has `role="combobox"`. Query it by its accessible name or `data-cratis-part="trigger"` in tests.
 
-Some wrappers also **narrowed their surface** (they no longer leak PrimeReact's full API):
+Multiple selection remains available through the native multiple-select path. Prefer a dedicated collection picker for a large or highly customized multi-select experience.
 
-- **`Column`** keeps the `field` / `header` / `body` / `sortable` / `filter` authoring model; v10 extras like `editor`, `frozen`, `footer`, `colSpan` and `expander` are not carried over.
-- **`Dropdown`** exposes a curated single/multi select surface (`value`, `options`, `optionLabel` / `optionValue`, `placeholder`, `filter`, `multiple`, `showClear`, `style`, `id`, `name`, `aria-*`, …) plus `pt` / `ptOptions` / `unstyled` — it no longer accepts arbitrary PrimeReact Select props. `optionLabel` / `optionValue` default to `label` / `value` when the option objects carry those fields — the v10 `Dropdown` convention — so `[{ label, value }]` options with a scalar `value` keep matching (v11's `Select` compares the option object itself otherwise).
-- The **`DataPage` action toolbar** replaces the v10 Menubar: `menubarPt` / `menubarPtOptions` / `menubarUnstyled` now target the toolbar's **buttons**, and the paginator is styled via `paginatorClassName` (+ `paginatorAriaLabels`), not `pt`.
-- **`StepperCustomizationProps`** is now Cratis-owned (it no longer aliases PrimeReact's `StepperProps`). Same shape, minus the removed slots.
+## Update tables
 
-### If you write `pt` definitions or CSS selectors against PrimeReact internals
+`DataTableCore` now renders semantic HTML. Query-backed paging remains owned by Arc.
 
-v11 is unstyled-first: outside [styled mode](Styling/themed.md), PrimeReact elements carry **no `p-*` class at all**. Parts are identified by data attributes instead — `[data-scope="dialog"][data-part="close"]`, `[data-scope="select"][data-part="trigger"]`, and so on. Selectors written against v10 class names will silently match nothing there. In styled mode the `p-*` class names are back — `styledMode()` applies PrimeReact's component styles to every primitive — and the theme sits in the `primereact` cascade layer, so a plain `.p-button { … }` in your own CSS overrides it as it did on v10. (`pt` slot keys are unaffected either way.)
+- Sorting and filtering apply to the currently loaded page.
+- Complete-result filtering belongs in query arguments and runs on the server before paging.
+- `clientFiltering` is removed; it was a deprecated no-op in Components 3.
+- `Column` remains the declarative column marker.
+- Table styling uses `DataTableParts` and `data-cratis-part`.
+- Server totals remain authoritative for the paginator.
 
-## What's new (nothing to migrate — just available)
+Custom matchers registered with `registerDataTableFilterMatcher()` continue to work.
 
-- **[Notifications](Notifications/index.md)** — `Toaster`, the imperative `toast`, and `toastCommandResult(result)` to surface an Arc command result as the right toast (validation → per-field messages, exceptions → generic, never stack traces).
-- **[Display](Display/index.md)** — `Tag`, `Badge`, `Chip`, `Skeleton`, `Avatar`, `ProgressBar`.
-- **CommandForm fields** — [PasswordField](CommandForm/password-field.md), [ToggleSwitchField](CommandForm/toggle-switch-field.md), [RatingField](CommandForm/rating-field.md).
-- **[AutoCommandForm](CommandForm/auto-command-form.md)** — generates a `CommandForm`'s fields from the command's own `propertyDescriptors`, with a `registerFieldTypeProvider` registry for custom types.
-- **[`@cratis/components/theme`](Styling/baseline-theme.md)** — the Cratis baseline theme (MIT CSS). It now positions the dialog backdrop and positioner itself; previously a baseline-theme dialog could render below the page content.
-- **[`@cratis/components/styled`](Styling/themed.md)** — `styledMode()`, `CratisPreset`, `primeReactStyles`, `primeReactCssLayer`, `primeReactCssLayerOrder` and `cratisDarkModeSelector`: PrimeReact's styled mode, wired for the provider.
-- **`@cratis/components/primereact-v10-palette`** — the PrimeReact 10 theme variables (`--surface-*`, `--text-color`, `--primary-color`, the color scales, …) restored with the lara-blue values, for CSS already written against them.
-- **`Dropdown`** reads `label` / `value` off option objects when `optionLabel` / `optionValue` are omitted — the v10 `Dropdown` convention.
+## Update dialogs and steppers
 
-## Licensing
+Dialog callback, busy, validity, dismissal, and initial-focus contracts remain. The modal/focus implementation is now React Aria-based.
 
-**PrimeReact 11 is no longer MIT.** PrimeReact 10 was; 11 is part of PrimeTek's commercial **PrimeUI** family, along with `primeicons` 8.x, `@primereact/core`, `@primereact/headless`, `@primereact/hooks`, `@primereact/styles`, `@primeuix/themes` and `@primeuix/styled`.
+Stepper parts are Cratis-owned: `root`, `list`, `step`, `header`, `number`, `title`, `separator`, `panels`, and `panel`. Custom CSS that targeted Prime stepper classes or roles must move to those parts.
 
-`@cratis/components` itself stays **MIT**. What changed is what it depends on — and because PrimeReact is a peer dependency as of 3.0.0, you install it and its terms apply to you directly.
+## Update notifications
 
-### A key is required regardless of how you style
+The imperative API remains:
 
-An earlier version of this page said unstyled rendering and the Cratis baseline theme needed no key. **That was wrong.** PrimeReact 11 verifies a license key when `PrimeReactProvider` mounts, with no condition on `unstyled`, on whether a preset is applied, or on `NODE_ENV` — so all three styling paths above reach it. Without a valid key you get a console warning and a fixed _"Invalid PrimeUI License"_ banner, in development **and** production.
+```ts
+import { toast } from '@cratis/components/Notifications';
 
-```tsx
-<CratisComponentsProvider value={{ license: '…' }}>
+toast.success({
+    title: 'Saved',
+    description: 'Your changes were saved.',
+});
 ```
 
-What the styling choice changes is whether you additionally depend on `@primereact/styles` and `@primeuix/themes` — both PrimeUI-licensed too, and needed only for styled mode. [The Cratis baseline theme](Styling/baseline-theme.md) is Cratis-authored MIT CSS embedding no PrimeTek values, so that _stylesheet_ carries no PrimeTek terms — but rendering it still runs PrimeReact 11, which needs a key.
+The queue, promise lifecycle, dispatch substitution, timeout pause, focus behavior, frames, and region are Cratis-owned. Toast part keys are `region`, `toast`, `icon`, `content`, `title`, `description`, `action`, and `close`.
+
+## Replace direct Prime imports
 
-### Which license you need
+Components cannot remove PrimeUI licensing from an application that still imports Prime directly. Replace those imports with Components, native HTML, or application-owned primitives.
 
-- **[Community License](https://primeui.dev/licenses/community)** — free, and covers individuals, students, non-profits and non-commercial open source. For an organization it requires _all_ of: under $1M USD annual gross revenue, fewer than 5 developers, fewer than 10 employees, and under $3M USD in outside funding. Supports up to 4 developers, renewed annually by confirming eligibility.
-- **[Commercial License](https://primeui.dev/licenses/commercial)** — for everyone else. Per developer, perpetual, one year of updates.
+Typical replacements:
 
-### If you redistribute
+| Prime import                         | Preferred replacement                      |
+| ------------------------------------ | ------------------------------------------ |
+| `primereact/button`                  | `Button` from `@cratis/components/Common`  |
+| `primereact/inputtext`               | CommandForm field or native styled input   |
+| `primereact/dialog`                  | `Dialog` from `@cratis/components/Dialogs` |
+| `primereact/dropdown` / `select`     | `Dropdown`                                 |
+| `primereact/datatable` / `column`    | `DataTableCore` / `Column`                 |
+| `primereact/tag`, `badge`, `message` | `@cratis/components/Display`               |
+| `primereact/toast` / `toaster`       | `@cratis/components/Notifications`         |
 
-PrimeReact 11's terms state: _"You may not … redistribute it as a component library or development tool … Redistributing the software so that third parties can develop with it requires a separate OEM License."_ Building an application is not what that clause is aimed at; publishing a library or tool that others build with is — read it and check your position with PrimeTek.
+PrimeIcons class strings are still accepted where a component takes an icon node/string, but Components no longer installs PrimeIcons. Prefer a React icon component or product-owned SVG.
 
-### Staying on MIT
+## Verify the migration
 
-**`@cratis/components` 2.x stays on PrimeReact 10 and is fully MIT.** It is not getting new features, but it is the supported way to remain MIT-only.
+1. Remove unused Prime dependencies and the PrimeUI license/provider configuration.
+2. Import `tokens` and `styles`; choose the baseline `theme` or map product tokens.
+3. Replace global Prime presets with Cratis tokens.
+4. Update `pt` keys and CSS selectors to Cratis parts.
+5. Replace direct Prime imports.
+6. Exercise dialogs, filtered tables, dates, dropdowns, toasts, and steppers with keyboard-only navigation.
+7. Verify light, dark, forced-colors, reduced-motion, and responsive layouts.
+8. Run TypeScript, specs, Storybook, and the production build.
 
-> Nothing here is legal advice, and this summary may lag PrimeTek's terms. The authoritative text is the `LICENSE.md` inside the `primereact` package and the pages linked above.
+For the decision, trade-offs, and validation gates, read [UI foundation](ui-foundation.md). For the older 2.x → 3.x PrimeReact migration, see [Migrate from Components 2 to 3](migration-from-2.md).
diff --git a/Documentation/toc.yml b/Documentation/toc.yml
index 91f1190f..e8cea84a 100644
--- a/Documentation/toc.yml
+++ b/Documentation/toc.yml
@@ -4,7 +4,7 @@
   href: why-components.md
 - name: UI foundation
   href: ui-foundation.md
-- name: PrimeReact and Components
+- name: Coming from PrimeReact
   href: coming-from-primereact.md
 - name: Getting started
   href: getting-started.mdx
@@ -62,5 +62,7 @@
   href: Common/toc.yml
 - name: Types
   href: Types/toc.yml
-- name: Migration
+- name: Migrate from Components 3 to 4
   href: migration.md
+- name: Migrate from Components 2 to 3
+  href: migration-from-2.md
diff --git a/Documentation/tutorial/act-on-it.mdx b/Documentation/tutorial/act-on-it.mdx
index 9fafc6f7..d3986c82 100644
--- a/Documentation/tutorial/act-on-it.mdx
+++ b/Documentation/tutorial/act-on-it.mdx
@@ -33,7 +33,7 @@ The table lists authors; now a librarian needs to *change* the list. Every chang
 2. **Open it from the screen.** `useDialog` gives you a wrapper element to render and a function to show it. Drop a toolbar button next to the table from chapter 1:
 
    ```tsx title="Authors.tsx"
-   import { Button } from 'primereact/button';
+   import { Button } from '@cratis/components/Common';
    import { useDialog } from '@cratis/arc.react/dialogs';
    import { AddAuthor } from './AddAuthor';
 
@@ -41,7 +41,7 @@ The table lists authors; now a librarian needs to *change* the list. Every chang
        const [AddAuthorDialog, showAddAuthor] = useDialog(AddAuthor);
        return (
            <Page title="Authors" panel>
-               <Button onClick={() => showAddAuthor()}><i className="pi pi-plus" /> Add author</Button>
+               <Button onClick={() => showAddAuthor()} icon={<span aria-hidden='true'>+</span>} label='Add author' />
                <DataTableForObservableQuery query={AllAuthors} emptyMessage="No authors yet">
                    <Column field="name" header="Name" sortable />
                </DataTableForObservableQuery>
diff --git a/Documentation/tutorial/list-it.mdx b/Documentation/tutorial/list-it.mdx
index 618de07f..cf5e93d1 100644
--- a/Documentation/tutorial/list-it.mdx
+++ b/Documentation/tutorial/list-it.mdx
@@ -9,7 +9,7 @@ A library screen starts with a list. We have an `AllAuthors` query from the back
 
 <Steps>
 
-1. **Render the table.** `DataTableForObservableQuery` takes the query proxy, subscribes to it, and renders each result as a row. You describe the columns with PrimeReact's `Column` — `field` matches a property on the read model, typed against the generated `Author`:
+1. **Render the table.** `DataTableForObservableQuery` takes the query proxy, subscribes to it, and renders each result as a row. You describe the columns with the Cratis-owned `Column` marker — `field` matches a property on the read model, typed against the generated `Author`:
 
    ```tsx title="Authors.tsx"
    import { Page } from '@cratis/components/Common';
diff --git a/Documentation/ui-foundation.md b/Documentation/ui-foundation.md
index d5cee961..600b2762 100644
--- a/Documentation/ui-foundation.md
+++ b/Documentation/ui-foundation.md
@@ -2,7 +2,7 @@
 title: UI foundation
 description: Why Components owns its public design system and uses React Aria for accessible behavior.
 sidebar:
-  order: 2
+    order: 2
 ---
 
 Components exists to give a Cratis application a stable, productive UI API—not to expose whichever rendering library happens to implement it. The default package therefore owns its markup, styling contract, and TypeScript types. It uses React Aria internally for accessible interaction behavior and uses TanStack Table only when a table needs advanced state that Arc paging and React Aria do not already provide.
diff --git a/Documentation/why-components.md b/Documentation/why-components.md
index 5bce692e..dde0c55a 100644
--- a/Documentation/why-components.md
+++ b/Documentation/why-components.md
@@ -1,35 +1,49 @@
 ---
 title: Why Components
-description: What the Cratis Components library is for, and why it exists on top of PrimeReact.
+description: Why Cratis owns a component system around Arc proxies and accessible interaction behavior.
 sidebar:
-  order: 1
+    order: 1
 ---
 
-You can build your UI straight on PrimeReact (or any component kit) and keep each form and table connected to your [Arc](/arc/) backend with screen-local state and effects — instantiate the command, manage loading and error state, render the footer buttons, bind each field, call the query, handle the observable subscription. Components centralizes that wiring.
+You can connect an Arc-generated command or query to any React UI. Without Components, every application repeatedly builds command execution state, validation display, dialogs, observable subscriptions, paging, selection, empty/pending states, localization, and accessibility behavior.
 
-It's a set of React components built on **PrimeReact** that know how to talk to **Arc's generated proxies**. The result: a command form or a live data table is a few declarative lines instead of a few files of glue.
+Components centralizes that integration behind a stable Cratis-owned API.
 
 ## What it removes
 
-| Without Components | With Components |
-|---|---|
-| Instantiate a command, track `isExecuting`, disable the button, render OK/Cancel | `<CommandDialog command={...}>` does all of it |
-| Bind each input to command state and validate locally | `<InputTextField value={i => i.name} />` — typed to the command |
-| Fetch a query, subscribe to the observable, re-render on change | `<DataTableForObservableQuery>` / `query.use()` |
-| Hand-roll list pages with detail panels | `<DataPage>` |
+| Without Components                                                         | With Components                                                               |
+| -------------------------------------------------------------------------- | ----------------------------------------------------------------------------- |
+| Instantiate a command, track execution, disable actions, render validation | `<CommandDialog command={...}>` owns the lifecycle                            |
+| Bind each field manually                                                   | `<InputTextField value={command => command.name} />`                          |
+| Subscribe to query changes and manage pending/empty state                  | Query-backed Components own the result lifecycle                              |
+| Hand-roll list pages, selection, paging, and detail panels                 | `<DataPage>` composes the screen                                              |
+| Reimplement focus, overlays, keyboard interaction, and international dates | Components delegates low-level behavior to React Aria and verifies the result |
 
-## What you get
+## What Components owns
 
-- **Command components** — `CommandDialog`, `StepperCommandDialog`, and the full `CommandForm` field set (text, number, dropdown, date, checkbox, slider, …), all typed against your generated command.
-- **Data components** — `DataTableForQuery`, `DataTableForObservableQuery`, and `DataPage` for list-and-detail screens.
-- **Building blocks** — dialogs, toolbars, navigation, and specialized editors (`PivotViewer`, `TimeMachine`, `SchemaEditor`).
-- **Theming that stays out of the way** — use a PrimeReact theme, repaint with a custom palette, or go fully unstyled. See [Styling](/components/styling/).
+- Public React component APIs and event types
+- Arc command/query/dialog integration
+- Semantic markup and accessibility composition
+- Stable `data-cratis-part` names and state attributes
+- `--cratis-*` design tokens and structural styles
+- Product-level behavior specs and migration guarantees
+
+React Aria is an internal implementation dependency. Consumers do not type against it or style its internal DOM.
+
+## Custom design systems remain first-class
+
+Import the baseline theme for a ready-made appearance, or omit it and map product tokens directly onto `--cratis-*`. Every meaningful element has a stable Cratis part, and `pt` accepts ordinary HTML attributes for per-instance customization.
+
+This avoids coupling a product design system to a renderer preset, proprietary provider, or internal class roster.
 
 ## When to use it
 
-Use Components when you're building a Cratis app and want the UI to track the backend with minimal ceremony. If you only need one-off presentational widgets unrelated to commands/queries, plain PrimeReact is fine — and the two coexist happily.
+Use Components for Cratis application surfaces that consume generated commands, queries, dialogs, forms, tables, notifications, or shared interaction patterns.
+
+Use native HTML or a product-owned presentational component for a one-off element that has no Cratis behavior. The two approaches compose naturally because Components uses semantic HTML and consumer-owned CSS.
+
+## Why the foundation changed
 
-## Next
+Components 3 was backed by PrimeReact 11. PrimeUI licensing still applied through wrappers, renderer types leaked into declarations, and custom products depended on renderer-specific pass-through slots. Components 4 replaces that mandatory foundation with Cratis-owned contracts and open interaction dependencies.
 
-- [Getting started](/components/getting-started/) — install, wire the provider, render your first form and table.
-- [Build a full-stack feature](/build-a-full-app/) — see Components consume a real Arc slice end to end.
+Read [UI foundation](ui-foundation.md) for the decision and [Migrate from Components 3](migration.md) for the consumer steps.

From 0b1c667293728ec8c2b1e271a634527f6551410c Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Sun, 23 Aug 2026 12:57:01 +0200
Subject: [PATCH 012/267] Format renderer-independent documentation

---
 .ai/skills/cratis-react-page/SKILL.md         |   2 +-
 Documentation/CommandForm/calendar-field.md   |  28 ++---
 Documentation/CommandForm/chips-field.md      |  28 ++---
 Documentation/CommandForm/index.md            |  26 ++--
 .../CommandForm/multi-select-field.md         |  36 +++---
 Documentation/CommandStepper/index.md         |  11 +-
 Documentation/DataPage/menu-items.md          |  39 +++---
 .../DataTables/column-configuration.md        |  16 +--
 Documentation/Dropdown/index.md               |  26 ++--
 Documentation/Notifications/index.md          |  16 +--
 Documentation/StepperCommandDialog/index.md   |  69 ++++++-----
 Documentation/Styling/cratis-tokens.md        |  44 +++----
 Documentation/building-a-form.md              |  39 +++---
 Documentation/choosing-a-component.md         |  20 ++--
 Documentation/tutorial/act-on-it.mdx          | 111 ++++++++++--------
 Documentation/tutorial/list-it.mdx            |  41 ++++---
 Source/CommandDialog/StepperPanel.tsx         |   3 +-
 .../CommandForm/fields/MultiSelectField.tsx   |  13 +-
 Source/DataTables/Column.tsx                  |   2 +-
 Source/tsconfig.json                          |   7 +-
 rollup.config.mjs                             | 106 +++++++++++------
 21 files changed, 391 insertions(+), 292 deletions(-)

diff --git a/.ai/skills/cratis-react-page/SKILL.md b/.ai/skills/cratis-react-page/SKILL.md
index ad31a316..2024c33b 100644
--- a/.ai/skills/cratis-react-page/SKILL.md
+++ b/.ai/skills/cratis-react-page/SKILL.md
@@ -257,4 +257,4 @@ Read `viewModel.property` inside JSX (never destructure observables at the top o
 | `detailsComponent`                      | `React.FC<IDetailsComponentProps<T>>` rendered for the selected row |
 | `globalFilterFields` / `defaultFilters` | filtering                                                           |
 | `onRefresh`                             | invoked to re-fetch a standard query                                |
-| `tablePt` / `menubarPt`                 | Cratis-owned stable part styling                                     |
+| `tablePt` / `menubarPt`                 | Cratis-owned stable part styling                                    |
diff --git a/Documentation/CommandForm/calendar-field.md b/Documentation/CommandForm/calendar-field.md
index 21532f61..ea7466c7 100644
--- a/Documentation/CommandForm/calendar-field.md
+++ b/Documentation/CommandForm/calendar-field.md
@@ -10,26 +10,26 @@ import { CalendarField } from '@cratis/components/CommandForm';
 
 <CommandDialog command={MyCommand} visible={visible} onCancel={() => setVisible(false)}>
     <CalendarField<MyCommand>
-        value={c => c.startDate}
-        placeholder="Select a date"
+        value={(c) => c.startDate}
+        placeholder='Select a date'
         showIcon
-        dateFormat="mm/dd/yy"
+        dateFormat='mm/dd/yy'
     />
-</CommandDialog>
+</CommandDialog>;
 ```
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `value` | `(instance: TCommand) => unknown` | - | **Required.** Accessor function that returns the bound property from the command instance. Pass the command type as the generic parameter for full type safety. |
-| `placeholder` | `string` | - | Placeholder text shown when no date is selected. |
-| `dateFormat` | `string` | — | Legacy mask retained for source compatibility; locale controls formatting. |
-| `showIcon` | `boolean` | `false` | Displays a calendar icon button next to the input. |
-| `showTime` | `boolean` | `false` | Enables time selection in addition to date selection. |
-| `hourFormat` | `'12' \| '24'` | `24` | Hour format when `showTime` is enabled. |
-| `minDate` | `Date` | - | Minimum selectable date. |
-| `maxDate` | `Date` | - | Maximum selectable date. |
+| Prop          | Type                              | Default | Description                                                                                                                                                     |
+| ------------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `value`       | `(instance: TCommand) => unknown` | -       | **Required.** Accessor function that returns the bound property from the command instance. Pass the command type as the generic parameter for full type safety. |
+| `placeholder` | `string`                          | -       | Placeholder text shown when no date is selected.                                                                                                                |
+| `dateFormat`  | `string`                          | —       | Legacy mask retained for source compatibility; locale controls formatting.                                                                                      |
+| `showIcon`    | `boolean`                         | `false` | Displays a calendar icon button next to the input.                                                                                                              |
+| `showTime`    | `boolean`                         | `false` | Enables time selection in addition to date selection.                                                                                                           |
+| `hourFormat`  | `'12' \| '24'`                    | `24`    | Hour format when `showTime` is enabled.                                                                                                                         |
+| `minDate`     | `Date`                            | -       | Minimum selectable date.                                                                                                                                        |
+| `maxDate`     | `Date`                            | -       | Maximum selectable date.                                                                                                                                        |
 
 ## Behavior
 
diff --git a/Documentation/CommandForm/chips-field.md b/Documentation/CommandForm/chips-field.md
index f56c5590..367eb2d8 100644
--- a/Documentation/CommandForm/chips-field.md
+++ b/Documentation/CommandForm/chips-field.md
@@ -10,26 +10,26 @@ import { ChipsField } from '@cratis/components/CommandForm';
 
 <CommandDialog command={MyCommand} visible={visible} onCancel={() => setVisible(false)}>
     <ChipsField<MyCommand>
-        value={c => c.tags}
-        placeholder="Add tags and press Enter"
+        value={(c) => c.tags}
+        placeholder='Add tags and press Enter'
         addOnBlur
     />
-</CommandDialog>
+</CommandDialog>;
 ```
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `value` | `(instance: TCommand) => unknown` | - | **Required.** Accessor function that returns the bound property from the command instance. Pass the command type as the generic parameter for full type safety. |
-| `placeholder` | `string` | - | Advisory text shown when no chip values exist. |
-| `max` | `number` | - | Maximum number of chips allowed. |
-| `separator` | `string` | - | **No effect.** See below. |
-| `addOnBlur` | `boolean` | `false` | Adds the current input as a chip when the field loses focus. |
-| `allowDuplicate` | `boolean` | `true` | Controls whether duplicate chip values are allowed. |
-| `removeAriaLabel` | `string` | `'Remove'` | Accessible name for each chip's remove button. Override to localize. |
-| `className` | `string` | - | Extra CSS class combined with the default `w-full`. |
-| `pt` / `ptOptions` / `unstyled` | - | - | Pass-through styling for the underlying `InputTags`. |
+| Prop                            | Type                              | Default    | Description                                                                                                                                                     |
+| ------------------------------- | --------------------------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `value`                         | `(instance: TCommand) => unknown` | -          | **Required.** Accessor function that returns the bound property from the command instance. Pass the command type as the generic parameter for full type safety. |
+| `placeholder`                   | `string`                          | -          | Advisory text shown when no chip values exist.                                                                                                                  |
+| `max`                           | `number`                          | -          | Maximum number of chips allowed.                                                                                                                                |
+| `separator`                     | `string`                          | -          | **No effect.** See below.                                                                                                                                       |
+| `addOnBlur`                     | `boolean`                         | `false`    | Adds the current input as a chip when the field loses focus.                                                                                                    |
+| `allowDuplicate`                | `boolean`                         | `true`     | Controls whether duplicate chip values are allowed.                                                                                                             |
+| `removeAriaLabel`               | `string`                          | `'Remove'` | Accessible name for each chip's remove button. Override to localize.                                                                                            |
+| `className`                     | `string`                          | -          | Extra CSS class combined with the default `w-full`.                                                                                                             |
+| `pt` / `ptOptions` / `unstyled` | -                                 | -          | Pass-through styling for the underlying `InputTags`.                                                                                                            |
 
 ## Behavior
 
diff --git a/Documentation/CommandForm/index.md b/Documentation/CommandForm/index.md
index 7348317c..e6e15526 100644
--- a/Documentation/CommandForm/index.md
+++ b/Documentation/CommandForm/index.md
@@ -40,13 +40,17 @@ CommandForm fields are used as children of `CommandDialog`:
 
 ```tsx
 import { CommandDialog } from '@cratis/components/CommandDialog';
-import { InputTextField, NumberField, CheckboxField } from '@cratis/components/CommandForm';
+import {
+    InputTextField,
+    NumberField,
+    CheckboxField,
+} from '@cratis/components/CommandForm';
 
 <CommandDialog command={MyCommand} visible={visible} onCancel={() => setVisible(false)}>
-    <InputTextField<MyCommand> value={c => c.title} />
-    <NumberField<MyCommand> value={c => c.quantity} />
-    <CheckboxField<MyCommand> value={c => c.active} label="Active" />
-</CommandDialog>
+    <InputTextField<MyCommand> value={(c) => c.title} />
+    <NumberField<MyCommand> value={(c) => c.quantity} />
+    <CheckboxField<MyCommand> value={(c) => c.active} label='Active' />
+</CommandDialog>;
 ```
 
 ## Populating Initial Values from a Query
@@ -59,10 +63,14 @@ import { InputTextField } from '@cratis/components/CommandForm';
 import { GetUserProfile } from './queries';
 import { UpdateProfile } from './commands';
 
-<CommandForm command={UpdateProfile} populateFromQuery={GetUserProfile} populateFromQueryArgs={{ userId }}>
-    <InputTextField<UpdateProfile> value={c => c.firstName} title="First name" />
-    <InputTextField<UpdateProfile> value={c => c.lastName} title="Last name" />
-</CommandForm>
+<CommandForm
+    command={UpdateProfile}
+    populateFromQuery={GetUserProfile}
+    populateFromQueryArgs={{ userId }}
+>
+    <InputTextField<UpdateProfile> value={(c) => c.firstName} title='First name' />
+    <InputTextField<UpdateProfile> value={(c) => c.lastName} title='Last name' />
+</CommandForm>;
 ```
 
 Two field props refine this per field - both work on every field type in this package, since they come from the shared `asCommandFormField` wrapper:
diff --git a/Documentation/CommandForm/multi-select-field.md b/Documentation/CommandForm/multi-select-field.md
index aa2e9e3e..c55f1f6c 100644
--- a/Documentation/CommandForm/multi-select-field.md
+++ b/Documentation/CommandForm/multi-select-field.md
@@ -16,31 +16,31 @@ const categoryOptions = [
 
 <CommandDialog command={MyCommand} visible={visible} onCancel={() => setVisible(false)}>
     <MultiSelectField<MyCommand>
-        value={c => c.categories}
+        value={(c) => c.categories}
         options={categoryOptions}
-        optionLabel="label"
-        optionValue="id"
-        placeholder="Select categories"
+        optionLabel='label'
+        optionValue='id'
+        placeholder='Select categories'
         filter
     />
-</CommandDialog>
+</CommandDialog>;
 ```
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `value` | `(instance: TCommand) => unknown` | - | **Required.** Accessor function that returns the bound property from the command instance. Pass the command type as the generic parameter for full type safety. |
-| `options` | `Array<Record<string, unknown>>` | - | **Required.** Array of option objects. |
-| `optionLabel` | `string` | - | Property name in each option object used as the display text. |
-| `optionValue` | `string` | - | Property name in each option object used as the bound value. |
-| `placeholder` | `string` | - | Placeholder text shown when no options are selected. |
-| `display` | `'comma' \| 'chip'` | - | **No effect.** See below. |
-| `maxSelectedLabels` | `number` | - | **No effect.** See below. |
-| `filter` | `boolean` | `false` | Shows a filter input in the options popup. |
-| `showClear` | `boolean` | `false` | Displays a clear icon to reset selected values. |
-| `className` | `string` | - | Extra CSS class combined with the default `w-full`. |
-| `pt` / `ptOptions` / `unstyled` | - | - | Pass-through styling for the underlying `Select`. |
+| Prop                            | Type                              | Default | Description                                                                                                                                                     |
+| ------------------------------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `value`                         | `(instance: TCommand) => unknown` | -       | **Required.** Accessor function that returns the bound property from the command instance. Pass the command type as the generic parameter for full type safety. |
+| `options`                       | `Array<Record<string, unknown>>`  | -       | **Required.** Array of option objects.                                                                                                                          |
+| `optionLabel`                   | `string`                          | -       | Property name in each option object used as the display text.                                                                                                   |
+| `optionValue`                   | `string`                          | -       | Property name in each option object used as the bound value.                                                                                                    |
+| `placeholder`                   | `string`                          | -       | Placeholder text shown when no options are selected.                                                                                                            |
+| `display`                       | `'comma' \| 'chip'`               | -       | **No effect.** See below.                                                                                                                                       |
+| `maxSelectedLabels`             | `number`                          | -       | **No effect.** See below.                                                                                                                                       |
+| `filter`                        | `boolean`                         | `false` | Shows a filter input in the options popup.                                                                                                                      |
+| `showClear`                     | `boolean`                         | `false` | Displays a clear icon to reset selected values.                                                                                                                 |
+| `className`                     | `string`                          | -       | Extra CSS class combined with the default `w-full`.                                                                                                             |
+| `pt` / `ptOptions` / `unstyled` | -                                 | -       | Pass-through styling for the underlying `Select`.                                                                                                               |
 
 ## Behavior
 
diff --git a/Documentation/CommandStepper/index.md b/Documentation/CommandStepper/index.md
index f76f1b47..7560ca16 100644
--- a/Documentation/CommandStepper/index.md
+++ b/Documentation/CommandStepper/index.md
@@ -29,12 +29,13 @@ export const ProjectWizard = () => {
             autoServerValidate={false}
             validateOnInit
         >
-            <StepperPanel header="Basic Info">
-                <InputTextField<CreateProject> value={c => c.name} title="Project Name" />
-            </StepperPanel>
-            <StepperPanel header="Details">
-                {/* CommandForm fields */}
+            <StepperPanel header='Basic Info'>
+                <InputTextField<CreateProject>
+                    value={(c) => c.name}
+                    title='Project Name'
+                />
             </StepperPanel>
+            <StepperPanel header='Details'>{/* CommandForm fields */}</StepperPanel>
         </CommandStepper>
     );
 };
diff --git a/Documentation/DataPage/menu-items.md b/Documentation/DataPage/menu-items.md
index 15088f5f..056b8cc3 100644
--- a/Documentation/DataPage/menu-items.md
+++ b/Documentation/DataPage/menu-items.md
@@ -11,17 +11,20 @@ import { DataPage, MenuItem } from '@cratis/components/DataPage';
 import { Column } from '@cratis/components/DataPage';
 import { FaPlus, FaPencil, FaTrash } from 'react-icons/fa6';
 
-<DataPage title="Products" query={ProductsQuery} emptyMessage="No products">
+<DataPage title='Products' query={ProductsQuery} emptyMessage='No products'>
     <DataPage.MenuItems>
-        <MenuItem label="Create Product" icon={FaPlus} command={handleCreate} />
-        <MenuItem label="Edit" icon={FaPencil} disableOnUnselected command={handleEdit} />
-        <MenuItem label="Delete" icon={FaTrash} disableOnUnselected command={handleDelete} />
+        <MenuItem label='Create Product' icon={FaPlus} command={handleCreate} />
+        <MenuItem label='Edit' icon={FaPencil} disableOnUnselected command={handleEdit} />
+        <MenuItem
+            label='Delete'
+            icon={FaTrash}
+            disableOnUnselected
+            command={handleDelete}
+        />
     </DataPage.MenuItems>
 
-    <DataPage.Columns>
-        {/* ... columns */}
-    </DataPage.Columns>
-</DataPage>
+    <DataPage.Columns>{/* ... columns */}</DataPage.Columns>
+</DataPage>;
 ```
 
 ## MenuItem Props
@@ -49,21 +52,21 @@ import { FaPlus, FaPencil, FaTrash, FaBoxArchive } from 'react-icons/fa6';
 <DataPage.MenuItems>
     {/* Always enabled */}
     <MenuItem
-        label="Create New"
+        label='Create New'
         icon={FaPlus}
         command={() => setShowCreateDialog(true)}
     />
 
     {/* Disabled when no selection */}
     <MenuItem
-        label="Edit Selected"
+        label='Edit Selected'
         icon={FaPencil}
         disableOnUnselected={true}
         command={() => setShowEditDialog(true)}
     />
 
     <MenuItem
-        label="Delete Selected"
+        label='Delete Selected'
         icon={FaTrash}
         disableOnUnselected={true}
         command={() => handleDelete()}
@@ -71,12 +74,12 @@ import { FaPlus, FaPencil, FaTrash, FaBoxArchive } from 'react-icons/fa6';
 
     {/* Conditional actions */}
     <MenuItem
-        label="Archive"
+        label='Archive'
         icon={FaBoxArchive}
         disableOnUnselected={true}
         command={() => handleArchive()}
     />
-</DataPage.MenuItems>
+</DataPage.MenuItems>;
 ```
 
 ## Icons
@@ -120,11 +123,11 @@ const handleEdit = () => {
 import { FaPlus, FaPencil, FaTrash, FaFileExport } from 'react-icons/fa6';
 
 <DataPage.MenuItems>
-    <MenuItem label="New" icon={FaPlus} command={handleNew} />
-    <MenuItem label="Edit" icon={FaPencil} disableOnUnselected command={handleEdit} />
-    <MenuItem label="Delete" icon={FaTrash} disableOnUnselected command={handleDelete} />
-    <MenuItem label="Export" icon={FaFileExport} command={handleExport} />
-</DataPage.MenuItems>
+    <MenuItem label='New' icon={FaPlus} command={handleNew} />
+    <MenuItem label='Edit' icon={FaPencil} disableOnUnselected command={handleEdit} />
+    <MenuItem label='Delete' icon={FaTrash} disableOnUnselected command={handleDelete} />
+    <MenuItem label='Export' icon={FaFileExport} command={handleExport} />
+</DataPage.MenuItems>;
 ```
 
 There are no separators and no submenus. A `MenuItem` with `MenuItem` children does not nest — the children are simply ignored, with no error to tell you — and `<MenuItem separator />` is not a thing.
diff --git a/Documentation/DataTables/column-configuration.md b/Documentation/DataTables/column-configuration.md
index d869e1a3..47db0981 100644
--- a/Documentation/DataTables/column-configuration.md
+++ b/Documentation/DataTables/column-configuration.md
@@ -14,14 +14,14 @@ description: Define data, selection, sorting, filtering, and custom rendering co
 
 ## Data and custom cells
 
-| Prop | Purpose |
-|---|---|
-| `field` | Dot-separated row path used for display, sorting, and default filtering. |
-| `header` | Header content. |
-| `body` | Custom cell renderer receiving the row. |
-| `style` / `className` | Body-cell treatment. |
-| `headerStyle` / `headerClassName` | Header-cell treatment. |
-| `bodyStyle` / `bodyClassName` | Body-only override. |
+| Prop                              | Purpose                                                                  |
+| --------------------------------- | ------------------------------------------------------------------------ |
+| `field`                           | Dot-separated row path used for display, sorting, and default filtering. |
+| `header`                          | Header content.                                                          |
+| `body`                            | Custom cell renderer receiving the row.                                  |
+| `style` / `className`             | Body-cell treatment.                                                     |
+| `headerStyle` / `headerClassName` | Header-cell treatment.                                                   |
+| `bodyStyle` / `bodyClassName`     | Body-only override.                                                      |
 
 Nested paths such as `personalDetails.displayName` are resolved by Components.
 
diff --git a/Documentation/Dropdown/index.md b/Documentation/Dropdown/index.md
index 525faf82..3db95297 100644
--- a/Documentation/Dropdown/index.md
+++ b/Documentation/Dropdown/index.md
@@ -43,19 +43,19 @@ Set `multiple` and bind an array. Components uses the native multiple-select pat
 
 ## Props
 
-| Prop | Purpose |
-|---|---|
-| `value` | Selected value or array for multiple selection. |
-| `options` | Option collection. |
-| `optionLabel` / `optionValue` | Field names for object options. |
-| `placeholder` | Empty trigger text. |
-| `filter` / `filterPlaceholder` | Searchable combobox mode. |
-| `multiple` | Native multiple-selection mode. |
-| `showClear` | Clear action for a single selection. |
-| `invalid` / `disabled` | Control state. |
-| `id`, `name`, `tabIndex`, `aria-*` | Identity, form, and accessibility attributes. |
-| `onChange` / `onBlur` | Selection and focus callbacks. |
-| `pt` | Cratis-owned stable part attributes. |
+| Prop                               | Purpose                                         |
+| ---------------------------------- | ----------------------------------------------- |
+| `value`                            | Selected value or array for multiple selection. |
+| `options`                          | Option collection.                              |
+| `optionLabel` / `optionValue`      | Field names for object options.                 |
+| `placeholder`                      | Empty trigger text.                             |
+| `filter` / `filterPlaceholder`     | Searchable combobox mode.                       |
+| `multiple`                         | Native multiple-selection mode.                 |
+| `showClear`                        | Clear action for a single selection.            |
+| `invalid` / `disabled`             | Control state.                                  |
+| `id`, `name`, `tabIndex`, `aria-*` | Identity, form, and accessibility attributes.   |
+| `onChange` / `onBlur`              | Selection and focus callbacks.                  |
+| `pt`                               | Cratis-owned stable part attributes.            |
 
 ## Stable parts
 
diff --git a/Documentation/Notifications/index.md b/Documentation/Notifications/index.md
index eac18f8e..823e74e2 100644
--- a/Documentation/Notifications/index.md
+++ b/Documentation/Notifications/index.md
@@ -56,11 +56,11 @@ Custom content replaces only the body. The frame, severity indicator, timeout, a
 
 ## Toaster props
 
-| Prop | Purpose |
-|---|---|
-| `position` | One of the six viewport edges/corners. |
-| `limit` | Maximum visible frames. |
-| `timeout` | Default timeout in milliseconds. |
-| `dismissAriaLabel` | Accessible name for close controls. |
-| `regionAriaLabel` | Accessible name for the notification region. |
-| `pt` | Stable `region`, `toast`, `icon`, `content`, `title`, `description`, `action`, and `close` parts. |
+| Prop               | Purpose                                                                                           |
+| ------------------ | ------------------------------------------------------------------------------------------------- |
+| `position`         | One of the six viewport edges/corners.                                                            |
+| `limit`            | Maximum visible frames.                                                                           |
+| `timeout`          | Default timeout in milliseconds.                                                                  |
+| `dismissAriaLabel` | Accessible name for close controls.                                                               |
+| `regionAriaLabel`  | Accessible name for the notification region.                                                      |
+| `pt`               | Stable `region`, `toast`, `icon`, `content`, `title`, `description`, `action`, and `close` parts. |
diff --git a/Documentation/StepperCommandDialog/index.md b/Documentation/StepperCommandDialog/index.md
index 6b59ff67..8cb9cb56 100644
--- a/Documentation/StepperCommandDialog/index.md
+++ b/Documentation/StepperCommandDialog/index.md
@@ -152,11 +152,11 @@ Multiple callbacks may fire for the same execution. For example, both `onFailed`
 
 The step number circles in the wizard navigation bar reflect the validation state of each step:
 
-| Circle color | Meaning |
-|---|---|
-| **Red** | The step contains at least one field with a validation error |
-| **Green** | The step has been visited (navigated through) and all its fields are valid |
-| **Default** (theme primary) | The step has not been visited yet |
+| Circle color                | Meaning                                                                    |
+| --------------------------- | -------------------------------------------------------------------------- |
+| **Red**                     | The step contains at least one field with a validation error               |
+| **Green**                   | The step has been visited (navigated through) and all its fields are valid |
+| **Default** (theme primary) | The step has not been visited yet                                          |
 
 Steps that are not currently active are dimmed to keep visual focus on the current step.
 
@@ -174,12 +174,12 @@ This is useful when the dialog opens with pre-populated values that may already
 
 ## Navigation and Submit
 
-| Step position | Footer content | Footer content with `showCancel` |
-|---|---|---|
-| First step | Next | Cancel, Next |
-| Middle step | Previous, Next | Cancel, Previous, Next |
-| Last step (invalid) | Previous | Cancel, Previous |
-| Last step (valid) | Previous, Submit | Cancel, Previous, Submit |
+| Step position       | Footer content   | Footer content with `showCancel` |
+| ------------------- | ---------------- | -------------------------------- |
+| First step          | Next             | Cancel, Next                     |
+| Middle step         | Previous, Next   | Cancel, Previous, Next           |
+| Last step (invalid) | Previous         | Cancel, Previous                 |
+| Last step (valid)   | Previous, Submit | Cancel, Previous, Submit         |
 
 The Submit button is hidden until the user reaches the last step **and** all command form fields across every step pass validation.
 
@@ -192,17 +192,24 @@ Set `showCancel` to add a Cancel button to the footer as well. It leads the foot
 ```tsx
 <StepperCommandDialog<DeleteEnvironment>
     command={DeleteEnvironment}
-    title="Delete environment"
-    okLabel="Delete"
+    title='Delete environment'
+    okLabel='Delete'
     showCancel
-    cancelLabel="Keep environment"
+    cancelLabel='Keep environment'
     onCancel={() => closeDialog(DialogResult.Cancelled)}
 >
-    <StepperPanel header="Environment">
-        <DropdownField<DeleteEnvironment> value={c => c.environmentId} title="Environment" options={environments} />
+    <StepperPanel header='Environment'>
+        <DropdownField<DeleteEnvironment>
+            value={(c) => c.environmentId}
+            title='Environment'
+            options={environments}
+        />
     </StepperPanel>
-    <StepperPanel header="Confirm">
-        <InputTextField<DeleteEnvironment> value={c => c.confirmationText} title="Type the environment name to confirm" />
+    <StepperPanel header='Confirm'>
+        <InputTextField<DeleteEnvironment>
+            value={(c) => c.confirmationText}
+            title='Type the environment name to confirm'
+        />
     </StepperPanel>
 </StepperCommandDialog>
 ```
@@ -221,8 +228,8 @@ Set `showCancel` to add a Cancel button to the footer as well. It leads the foot
 Each step is defined by a `StepperPanel` from `@cratis/components/CommandDialog`. The `header` prop sets the step title shown in the stepper navigation:
 
 ```tsx
-<StepperPanel header="Contact Details">
-    <InputTextField<MyCommand> value={c => c.email} title="Email" />
+<StepperPanel header='Contact Details'>
+    <InputTextField<MyCommand> value={(c) => c.email} title='Email' />
 </StepperPanel>
 ```
 
@@ -235,24 +242,30 @@ CommandForm fields placed inside a `StepperPanel` are automatically bound to the
 A step that only applies sometimes is written the obvious way, and it is counted the obvious way:
 
 ```tsx
-<StepperCommandDialog<RegisterCustomer> command={RegisterCustomer} title="New customer">
-    <StepperPanel header="Customer">
-        <InputTextField<RegisterCustomer> value={c => c.name} title="Name" />
+<StepperCommandDialog<RegisterCustomer> command={RegisterCustomer} title='New customer'>
+    <StepperPanel header='Customer'>
+        <InputTextField<RegisterCustomer> value={(c) => c.name} title='Name' />
     </StepperPanel>
     {isBusiness && (
-        <StepperPanel header="Company">
-            <InputTextField<RegisterCustomer> value={c => c.organizationNumber} title="Organization number" />
+        <StepperPanel header='Company'>
+            <InputTextField<RegisterCustomer>
+                value={(c) => c.organizationNumber}
+                title='Organization number'
+            />
         </StepperPanel>
     )}
-    <StepperPanel header="Confirm">
-        <CheckboxField<RegisterCustomer> value={c => c.acceptedTerms} label="I accept the terms" />
+    <StepperPanel header='Confirm'>
+        <CheckboxField<RegisterCustomer>
+            value={(c) => c.acceptedTerms}
+            label='I accept the terms'
+        />
     </StepperPanel>
 </StepperCommandDialog>
 ```
 
 **Only the steps that actually render are counted.** `{condition && <StepperPanel/>}` leaves a `false` child behind when the condition does not hold, and `null` / `undefined` children are just as common; all of them are filtered out before the step count, the per-step validation state and the rendered panels are derived — from the same one list, so they cannot drift apart. With `isBusiness` false the wizard above has two steps, and Submit appears on "Confirm" where the user expects it.
 
-The count is not fixed for the lifetime of the dialog either. A late-resolving query or a `currentValues` overlay can flip the condition *after* the user has advanced past that step, so the active step is clamped into the set that still renders — an index left stranded above the end resolves to the last surviving step rather than a step that is neither last nor navigable.
+The count is not fixed for the lifetime of the dialog either. A late-resolving query or a `currentValues` overlay can flip the condition _after_ the user has advanced past that step, so the active step is clamped into the set that still renders — an index left stranded above the end resolves to the last surviving step rather than a step that is neither last nor navigable.
 
 > [!WARNING]
 > A `<>…</>` fragment wrapping several panels counts as **one** step. Give each step its own `StepperPanel` child.
diff --git a/Documentation/Styling/cratis-tokens.md b/Documentation/Styling/cratis-tokens.md
index 322e6f51..a889a9f2 100644
--- a/Documentation/Styling/cratis-tokens.md
+++ b/Documentation/Styling/cratis-tokens.md
@@ -7,38 +7,38 @@ The `--cratis-*` variables are the supported theming boundary. The optional base
 
 ## Core colors
 
-| Token | Purpose |
-|---|---|
-| `--cratis-primary-color` | Primary actions and selected controls. |
-| `--cratis-primary-color-text` | Content on the primary color. |
+| Token                                           | Purpose                                    |
+| ----------------------------------------------- | ------------------------------------------ |
+| `--cratis-primary-color`                        | Primary actions and selected controls.     |
+| `--cratis-primary-color-text`                   | Content on the primary color.              |
 | `--cratis-primary-300` … `--cratis-primary-600` | Accent scale used by specialized surfaces. |
-| `--cratis-green-500` | Success state. |
-| `--cratis-orange-500` | Warning state. |
-| `--cratis-red-500` | Error/destructive state. |
+| `--cratis-green-500`                            | Success state.                             |
+| `--cratis-orange-500`                           | Warning state.                             |
+| `--cratis-red-500`                              | Error/destructive state.                   |
 
 ## Surfaces
 
-| Token | Purpose |
-|---|---|
-| `--cratis-surface-ground` | Application/page background. |
-| `--cratis-surface-section` | Grouped section background. |
-| `--cratis-surface-card` | Cards and inputs. |
-| `--cratis-surface-overlay` | Dialogs, dropdowns, popovers, and toasts. |
-| `--cratis-surface-hover` | Hovered or quiet selected state. |
-| `--cratis-surface-border` | Borders and dividers. |
+| Token                                         | Purpose                                        |
+| --------------------------------------------- | ---------------------------------------------- |
+| `--cratis-surface-ground`                     | Application/page background.                   |
+| `--cratis-surface-section`                    | Grouped section background.                    |
+| `--cratis-surface-card`                       | Cards and inputs.                              |
+| `--cratis-surface-overlay`                    | Dialogs, dropdowns, popovers, and toasts.      |
+| `--cratis-surface-hover`                      | Hovered or quiet selected state.               |
+| `--cratis-surface-border`                     | Borders and dividers.                          |
 | `--cratis-surface-0` / `--cratis-surface-100` | Small neutral ramp used by display components. |
 
 ## Text and interaction
 
-| Token | Purpose |
-|---|---|
-| `--cratis-text-color` | Primary text. |
+| Token                           | Purpose                           |
+| ------------------------------- | --------------------------------- |
+| `--cratis-text-color`           | Primary text.                     |
 | `--cratis-text-color-secondary` | Supporting text and placeholders. |
-| `--cratis-highlight-bg` | Selected/highlighted background. |
+| `--cratis-highlight-bg`         | Selected/highlighted background.  |
 | `--cratis-highlight-text-color` | Text on a highlighted background. |
-| `--cratis-focus-ring` | Keyboard-visible focus treatment. |
-| `--cratis-maskbg` | Modal backdrop. |
-| `--cratis-border-radius` | Default component radius. |
+| `--cratis-focus-ring`           | Keyboard-visible focus treatment. |
+| `--cratis-maskbg`               | Modal backdrop.                   |
+| `--cratis-border-radius`        | Default component radius.         |
 
 ## Map a product system
 
diff --git a/Documentation/building-a-form.md b/Documentation/building-a-form.md
index 70c0b479..3c93acea 100644
--- a/Documentation/building-a-form.md
+++ b/Documentation/building-a-form.md
@@ -1,8 +1,8 @@
 ---
-title: "Recipe: Building a form"
+title: 'Recipe: Building a form'
 description: Execute a command from a typed form using CommandDialog and CommandForm fields, with validation handled for you.
 sidebar:
-  order: 3
+    order: 3
 ---
 
 **Goal:** collect input and run an Arc command — with the confirm button disabled while it executes, validation wired up, and no manual fetch.
@@ -15,17 +15,22 @@ sidebar:
 import { CommandDialog } from '@cratis/components/CommandDialog';
 import { InputTextField, TextAreaField } from '@cratis/components/CommandForm';
 import { DialogProps, DialogResult } from '@cratis/arc.react/dialogs';
-import { RegisterAuthor } from './RegisterAuthor';   // generated proxy
+import { RegisterAuthor } from './RegisterAuthor'; // generated proxy
 
 export const AddAuthor = ({ closeDialog }: DialogProps) => (
     <CommandDialog<RegisterAuthor>
         command={RegisterAuthor}
-        title="Add author"
-        okLabel="Add"
-        validateOn="blur"
-        onConfirm={() => closeDialog(DialogResult.Ok)}>
-        <InputTextField<RegisterAuthor> value={i => i.name} title="Name" placeholder="Jane Austen" />
-        <TextAreaField<RegisterAuthor> value={i => i.bio} title="Bio" />
+        title='Add author'
+        okLabel='Add'
+        validateOn='blur'
+        onConfirm={() => closeDialog(DialogResult.Ok)}
+    >
+        <InputTextField<RegisterAuthor>
+            value={(i) => i.name}
+            title='Name'
+            placeholder='Jane Austen'
+        />
+        <TextAreaField<RegisterAuthor> value={(i) => i.bio} title='Bio' />
     </CommandDialog>
 );
 ```
@@ -44,12 +49,18 @@ const [AddAuthorDialog, showAddAuthor] = useDialog(AddAuthor);
 
 // in your component
 <>
-    <button onClick={async () => {
-        const [result] = await showAddAuthor();
-        if (result === DialogResult.Ok) { /* command executed successfully */ }
-    }}>Add author</button>
+    <button
+        onClick={async () => {
+            const [result] = await showAddAuthor();
+            if (result === DialogResult.Ok) {
+                /* command executed successfully */
+            }
+        }}
+    >
+        Add author
+    </button>
     <AddAuthorDialog />
-</>
+</>;
 ```
 
 ## Tips
diff --git a/Documentation/choosing-a-component.md b/Documentation/choosing-a-component.md
index 7f87f4f5..c8f2d263 100644
--- a/Documentation/choosing-a-component.md
+++ b/Documentation/choosing-a-component.md
@@ -11,12 +11,12 @@ reference.
 
 The question is whether confirming the form **runs a command**, and whether it's one step or several.
 
-| You want to… | Use | Why |
-| --- | --- | --- |
-| Collect a few fields and run one command | [`CommandDialog`](./CommandDialog/index.md) | Instantiates, validates, and executes the command; handles the footer and button states. The default. |
-| Run a command, but gather input across **named steps** | [`StepperCommandDialog`](./StepperCommandDialog/index.md) | A wizard over a single command — validate per step, navigate back and forth, execute at the end. |
-| Embed command fields **in a page**, not a dialog | [`CommandForm`](./CommandForm/index.md) | The same typed fields `CommandDialog` uses, without the dialog chrome. |
-| Collect data and return it **without** running a command | [`Dialog`](./Dialogs/index.md) | A confirmation or data-entry dialog that hands values back to the caller. No command involved. |
+| You want to…                                             | Use                                                       | Why                                                                                                   |
+| -------------------------------------------------------- | --------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
+| Collect a few fields and run one command                 | [`CommandDialog`](./CommandDialog/index.md)               | Instantiates, validates, and executes the command; handles the footer and button states. The default. |
+| Run a command, but gather input across **named steps**   | [`StepperCommandDialog`](./StepperCommandDialog/index.md) | A wizard over a single command — validate per step, navigate back and forth, execute at the end.      |
+| Embed command fields **in a page**, not a dialog         | [`CommandForm`](./CommandForm/index.md)                   | The same typed fields `CommandDialog` uses, without the dialog chrome.                                |
+| Collect data and return it **without** running a command | [`Dialog`](./Dialogs/index.md)                            | A confirmation or data-entry dialog that hands values back to the caller. No command involved.        |
 
 Rule of thumb: **if confirming the dialog executes a generated command, it's a `CommandDialog`** (or its
 stepper variant). If it just gathers values and returns them, it's a `Dialog`. Never reach for
@@ -28,10 +28,10 @@ consistently.
 Both render a query or observable query; the question is whether you want a **whole page** or a **table
 to drop into one**.
 
-| You want to… | Use | Why |
-| --- | --- | --- |
-| A full screen: a list, a toolbar of actions, detail panels | [`DataPage`](./DataPage/index.md) | A resizable page composition with toolbar and detail areas wired to the query. |
-| Just a grid inside a layout you already have | [`DataTables`](./DataTables/index.md) | The table wrappers — paging, sorting, and selection over a query — without the page scaffolding. |
+| You want to…                                               | Use                                   | Why                                                                                              |
+| ---------------------------------------------------------- | ------------------------------------- | ------------------------------------------------------------------------------------------------ |
+| A full screen: a list, a toolbar of actions, detail panels | [`DataPage`](./DataPage/index.md)     | A resizable page composition with toolbar and detail areas wired to the query.                   |
+| Just a grid inside a layout you already have               | [`DataTables`](./DataTables/index.md) | The table wrappers — paging, sorting, and selection over a query — without the page scaffolding. |
 
 If you're building a list-screen-with-actions from scratch, start with the
 [list screen recipe](./list-screen-with-actions.md), which composes `DataPage` with `CommandDialog`
diff --git a/Documentation/tutorial/act-on-it.mdx b/Documentation/tutorial/act-on-it.mdx
index d3986c82..898aab5b 100644
--- a/Documentation/tutorial/act-on-it.mdx
+++ b/Documentation/tutorial/act-on-it.mdx
@@ -1,11 +1,11 @@
 ---
-title: "2. Act on the list"
+title: '2. Act on the list'
 description: Add, rename, and remove authors with typed command dialogs — and watch the live table update itself the moment a command lands.
 ---
 
 import { Steps, Aside } from '@astrojs/starlight/components';
 
-The table lists authors; now a librarian needs to *change* the list. Every change is an Arc command — `RegisterAuthor`, `RenameAuthor`, `RemoveAuthor` — and Components turns each one into a form-with-a-button without you binding a single field. Let's start with adding.
+The table lists authors; now a librarian needs to _change_ the list. Every change is an Arc command — `RegisterAuthor`, `RenameAuthor`, `RemoveAuthor` — and Components turns each one into a form-with-a-button without you binding a single field. Let's start with adding.
 
 ## Add an author
 
@@ -13,43 +13,55 @@ The table lists authors; now a librarian needs to *change* the list. Every chang
 
 1. **Build the dialog from the command.** `CommandDialog` takes the generated command, renders the fields you list plus the OK/Cancel footer, validates, and executes on confirm. The field accessor `i => i.name` is typed against `RegisterAuthor`:
 
-   ```tsx title="AddAuthor.tsx"
-   import { CommandDialog } from '@cratis/components/CommandDialog';
-   import { InputTextField } from '@cratis/components/CommandForm';
-   import { DialogProps, DialogResult } from '@cratis/arc.react/dialogs';
-   import { RegisterAuthor } from './Authors/RegisterAuthor';   // generated proxy
-
-   export const AddAuthor = ({ closeDialog }: DialogProps) => (
-       <CommandDialog<RegisterAuthor>
-           command={RegisterAuthor}
-           title="Add author"
-           okLabel="Add"
-           onConfirm={() => closeDialog(DialogResult.Ok)}>
-           <InputTextField<RegisterAuthor> value={i => i.name} title="Name" placeholder="Jane Austen" />
-       </CommandDialog>
-   );
-   ```
+    ```tsx title="AddAuthor.tsx"
+    import { CommandDialog } from '@cratis/components/CommandDialog';
+    import { InputTextField } from '@cratis/components/CommandForm';
+    import { DialogProps, DialogResult } from '@cratis/arc.react/dialogs';
+    import { RegisterAuthor } from './Authors/RegisterAuthor'; // generated proxy
+
+    export const AddAuthor = ({ closeDialog }: DialogProps) => (
+        <CommandDialog<RegisterAuthor>
+            command={RegisterAuthor}
+            title='Add author'
+            okLabel='Add'
+            onConfirm={() => closeDialog(DialogResult.Ok)}
+        >
+            <InputTextField<RegisterAuthor>
+                value={(i) => i.name}
+                title='Name'
+                placeholder='Jane Austen'
+            />
+        </CommandDialog>
+    );
+    ```
 
 2. **Open it from the screen.** `useDialog` gives you a wrapper element to render and a function to show it. Drop a toolbar button next to the table from chapter 1:
 
-   ```tsx title="Authors.tsx"
-   import { Button } from '@cratis/components/Common';
-   import { useDialog } from '@cratis/arc.react/dialogs';
-   import { AddAuthor } from './AddAuthor';
-
-   export const Authors = () => {
-       const [AddAuthorDialog, showAddAuthor] = useDialog(AddAuthor);
-       return (
-           <Page title="Authors" panel>
-               <Button onClick={() => showAddAuthor()} icon={<span aria-hidden='true'>+</span>} label='Add author' />
-               <DataTableForObservableQuery query={AllAuthors} emptyMessage="No authors yet">
-                   <Column field="name" header="Name" sortable />
-               </DataTableForObservableQuery>
-               <AddAuthorDialog />
-           </Page>
-       );
-   };
-   ```
+    ```tsx title="Authors.tsx"
+    import { Button } from '@cratis/components/Common';
+    import { useDialog } from '@cratis/arc.react/dialogs';
+    import { AddAuthor } from './AddAuthor';
+
+    export const Authors = () => {
+        const [AddAuthorDialog, showAddAuthor] = useDialog(AddAuthor);
+        return (
+            <Page title='Authors' panel>
+                <Button
+                    onClick={() => showAddAuthor()}
+                    icon={<span aria-hidden='true'>+</span>}
+                    label='Add author'
+                />
+                <DataTableForObservableQuery
+                    query={AllAuthors}
+                    emptyMessage='No authors yet'
+                >
+                    <Column field='name' header='Name' sortable />
+                </DataTableForObservableQuery>
+                <AddAuthorDialog />
+            </Page>
+        );
+    };
+    ```
 
 </Steps>
 
@@ -57,26 +69,33 @@ The table lists authors; now a librarian needs to *change* the list. Every chang
 
 Run it and add an author. The new row appears in the table **immediately** — and you wrote nothing to make that happen. There's no "reload the list after saving," because there's nothing to reload: the command appended an event, the projection updated the read model, and the observable table you built in chapter 1 re-rendered on its own. The write side and the read side meet at the read model, and the screen just follows.
 
-<Aside type="tip" title="Validation flows through">
-The rules you put on the command in the backend (a non-empty name, a unique name) are extracted into the generated proxy. `CommandDialog` runs them, disables **Add** until the form is valid, and shows the server's rejection message against the field without duplicate frontend validation code.
+<Aside type='tip' title='Validation flows through'>
+    The rules you put on the command in the backend (a non-empty name, a unique name) are
+    extracted into the generated proxy. `CommandDialog` runs them, disables **Add** until
+    the form is valid, and shows the server's rejection message against the field without
+    duplicate frontend validation code.
 </Aside>
 
 ## Rename and remove are just more commands
 
-Editing isn't a different mechanism — it's another command. `RenameAuthor` opens the same way, but it needs to know *which* author. Pass the selected author's id (and current name) as `initialValues`, so the command is valid from the start:
+Editing isn't a different mechanism — it's another command. `RenameAuthor` opens the same way, but it needs to know _which_ author. Pass the selected author's id (and current name) as `initialValues`, so the command is valid from the start:
 
 ```tsx title="RenameAuthor.tsx"
 <CommandDialog<RenameAuthor>
     command={RenameAuthor}
-    title="Rename author"
-    okLabel="Save"
-    initialValues={{ id: author.id, name: author.name }}>
-    <InputTextField<RenameAuthor> value={i => i.name} title="Name" />
+    title='Rename author'
+    okLabel='Save'
+    initialValues={{ id: author.id, name: author.name }}
+>
+    <InputTextField<RenameAuthor> value={(i) => i.name} title='Name' />
 </CommandDialog>
 ```
 
-<Aside type="note" title="initialValues, not onBeforeExecute">
-The author's `id` must be present for the command to be valid, so it goes in `initialValues`. Values you compute at execution time and that don't gate validity (a generated `Guid`, say) can go in `onBeforeExecute` — but a required id set there arrives too late, and the confirm button would never enable.
+<Aside type='note' title='initialValues, not onBeforeExecute'>
+    The author's `id` must be present for the command to be valid, so it goes in
+    `initialValues`. Values you compute at execution time and that don't gate validity (a
+    generated `Guid`, say) can go in `onBeforeExecute` — but a required id set there
+    arrives too late, and the confirm button would never enable.
 </Aside>
 
 Removing is a `RemoveAuthor` command with nothing but the id — often a confirm dialog rather than a form. The table updates itself after every one of these, the same way it did for adding.
@@ -87,4 +106,4 @@ Removing is a `RemoveAuthor` command with nothing but the id — often a confirm
 - a table that **updates live** the moment the command lands — no refresh code,
 - and the pattern for rename and remove: model the change as a command, open it in a dialog, let the list follow.
 
-These actions hang off a toolbar button, but a real list screen lets you *select* a row and act on it — and often shows that row's details beside the list. That's exactly what `DataPage` is for. [Let's build the list-and-detail screen →](./list-and-detail)
+These actions hang off a toolbar button, but a real list screen lets you _select_ a row and act on it — and often shows that row's details beside the list. That's exactly what `DataPage` is for. [Let's build the list-and-detail screen →](./list-and-detail)
diff --git a/Documentation/tutorial/list-it.mdx b/Documentation/tutorial/list-it.mdx
index cf5e93d1..f098b3d1 100644
--- a/Documentation/tutorial/list-it.mdx
+++ b/Documentation/tutorial/list-it.mdx
@@ -1,5 +1,5 @@
 ---
-title: "1. List the authors"
+title: '1. List the authors'
 description: Put the library's authors on screen with a data table that binds to the AllAuthors query and updates itself when the read model changes.
 ---
 
@@ -11,20 +11,20 @@ A library screen starts with a list. We have an `AllAuthors` query from the back
 
 1. **Render the table.** `DataTableForObservableQuery` takes the query proxy, subscribes to it, and renders each result as a row. You describe the columns with the Cratis-owned `Column` marker — `field` matches a property on the read model, typed against the generated `Author`:
 
-   ```tsx title="Authors.tsx"
-   import { Page } from '@cratis/components/Common';
-   import { DataTableForObservableQuery } from '@cratis/components/DataTables';
-   import { Column } from '@cratis/components/DataTables';
-   import { AllAuthors } from './Authors/Author';   // generated observable query proxy
-
-   export const Authors = () => (
-       <Page title="Authors" panel>
-           <DataTableForObservableQuery query={AllAuthors} emptyMessage="No authors yet">
-               <Column field="name" header="Name" sortable />
-           </DataTableForObservableQuery>
-       </Page>
-   );
-   ```
+    ```tsx title="Authors.tsx"
+    import { Page } from '@cratis/components/Common';
+    import { DataTableForObservableQuery } from '@cratis/components/DataTables';
+    import { Column } from '@cratis/components/DataTables';
+    import { AllAuthors } from './Authors/Author'; // generated observable query proxy
+
+    export const Authors = () => (
+        <Page title='Authors' panel>
+            <DataTableForObservableQuery query={AllAuthors} emptyMessage='No authors yet'>
+                <Column field='name' header='Name' sortable />
+            </DataTableForObservableQuery>
+        </Page>
+    );
+    ```
 
 </Steps>
 
@@ -32,10 +32,13 @@ That's the whole screen. The `Page` wrapper gives you the titled, panelled chrom
 
 ## What you didn't write
 
-Notice everything that's *absent*. There's no `fetch`, no `useEffect`, no loading flag, no `useState` holding the rows, and — the part that matters most — **no subscription code**. `DataTableForObservableQuery` opened the observable for you. The moment something else in the app registers a new author, the backend pushes the new read-model value down, and this table re-renders with the extra row. You'll see that happen for real in the next chapter, when we add the form.
+Notice everything that's _absent_. There's no `fetch`, no `useEffect`, no loading flag, no `useState` holding the rows, and — the part that matters most — **no subscription code**. `DataTableForObservableQuery` opened the observable for you. The moment something else in the app registers a new author, the backend pushes the new read-model value down, and this table re-renders with the extra row. You'll see that happen for real in the next chapter, when we add the form.
 
-<Aside type="note" title="Live, because the query is observable">
-The liveness comes from the query being observable on the C# side (it returns `collection.Observe()`). If you only need the data once — to summarize or render custom markup — use `DataTableForQuery` instead, or call `AllAuthors.use()` to get the values directly. Same proxy, different consumption.
+<Aside type='note' title='Live, because the query is observable'>
+    The liveness comes from the query being observable on the C# side (it returns
+    `collection.Observe()`). If you only need the data once — to summarize or render
+    custom markup — use `DataTableForQuery` instead, or call `AllAuthors.use()` to get the
+    values directly. Same proxy, different consumption.
 </Aside>
 
 ## Type safety reaches the column
@@ -48,4 +51,4 @@ The liveness comes from the query being observable on the C# side (it returns `c
 - bound to the `AllAuthors` query with **no subscription or fetch code**,
 - that will update itself the instant the data behind it changes.
 
-A read-only list isn't a back office, though — a librarian needs to *add* authors. Next we'll give the screen a command. [Let's act on the list →](./act-on-it)
+A read-only list isn't a back office, though — a librarian needs to _add_ authors. Next we'll give the screen a command. [Let's act on the list →](./act-on-it)
diff --git a/Source/CommandDialog/StepperPanel.tsx b/Source/CommandDialog/StepperPanel.tsx
index 091750bf..e82bec4b 100644
--- a/Source/CommandDialog/StepperPanel.tsx
+++ b/Source/CommandDialog/StepperPanel.tsx
@@ -37,5 +37,6 @@ export interface StepperPanelProps {
  *
  * @param props - {@link StepperPanelProps}.
  */
-export const StepperPanel = (_props: StepperPanelProps): React.ReactElement | null => null;
+export const StepperPanel = (_props: StepperPanelProps): React.ReactElement | null =>
+    null;
 StepperPanel.displayName = 'StepperPanel';
diff --git a/Source/CommandForm/fields/MultiSelectField.tsx b/Source/CommandForm/fields/MultiSelectField.tsx
index 58432163..c38a9843 100644
--- a/Source/CommandForm/fields/MultiSelectField.tsx
+++ b/Source/CommandForm/fields/MultiSelectField.tsx
@@ -8,7 +8,9 @@ import React from 'react';
 /**
  * Component-level props for {@link MultiSelectField}.
  */
-interface MultiSelectFieldComponentProps extends WrappedFieldProps<Array<string | number>> {
+interface MultiSelectFieldComponentProps extends WrappedFieldProps<
+    Array<string | number>
+> {
     /** Source array of objects to populate the multi-select options. */
     options: Array<Record<string, unknown>>;
 
@@ -94,7 +96,10 @@ export const MultiSelectField = asCommandFormField<MultiSelectFieldComponentProp
                 return [];
             }
 
-            return e.filter((item): item is string | number => typeof item === 'string' || typeof item === 'number');
-        }
-    }
+            return e.filter(
+                (item): item is string | number =>
+                    typeof item === 'string' || typeof item === 'number',
+            );
+        },
+    },
 );
diff --git a/Source/DataTables/Column.tsx b/Source/DataTables/Column.tsx
index 4dcfc8a8..22c31f39 100644
--- a/Source/DataTables/Column.tsx
+++ b/Source/DataTables/Column.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 React from 'react';
+import type React from 'react';
 import type {
     ColumnFilterDataType,
     ColumnFilterElement,
diff --git a/Source/tsconfig.json b/Source/tsconfig.json
index 4e5f9fad..1098aef8 100644
--- a/Source/tsconfig.json
+++ b/Source/tsconfig.json
@@ -6,10 +6,7 @@
         "skipLibCheck": true,
         "types": []
     },
-    "include": [
-        "./**/*.ts",
-        "./**/*.tsx"
-    ],
+    "include": ["./**/*.ts", "./**/*.tsx"],
     "references": [],
     "exclude": [
         "dist",
@@ -21,4 +18,4 @@
         "node_modules",
         "../node_modules"
     ]
-}
\ No newline at end of file
+}
diff --git a/rollup.config.mjs b/rollup.config.mjs
index 89f2ff3b..b41e8357 100644
--- a/rollup.config.mjs
+++ b/rollup.config.mjs
@@ -9,10 +9,22 @@ import { dirname, join, relative, resolve } from 'path';
 import { createRequire } from 'module';
 
 /** Stylesheets that are entry points or token layers in their own right, not component rules. */
-const STANDALONE_STYLESHEETS = new Set(['tailwind.css', 'tailwind-utilities.css', 'tokens.css', 'theme.css', 'styles.css']);
+const STANDALONE_STYLESHEETS = new Set([
+    'tailwind.css',
+    'tailwind-utilities.css',
+    'tokens.css',
+    'theme.css',
+    'styles.css',
+]);
 
 /** Directories that never hold shipped component CSS. */
-const NON_SOURCE_DIRECTORIES = new Set(['node_modules', 'dist', 'storybook-static', '.storybook', 'wwwroot']);
+const NON_SOURCE_DIRECTORIES = new Set([
+    'node_modules',
+    'dist',
+    'storybook-static',
+    '.storybook',
+    'wwwroot',
+]);
 
 /** Every `.css` file under the package source that is expected to reach the published bundle. */
 function findComponentStylesheets(sourceDir, directory = sourceDir, found = []) {
@@ -20,7 +32,11 @@ function findComponentStylesheets(sourceDir, directory = sourceDir, found = [])
         if (entry.isDirectory()) {
             if (NON_SOURCE_DIRECTORIES.has(entry.name)) continue;
             findComponentStylesheets(sourceDir, join(directory, entry.name), found);
-        } else if (entry.name.endsWith('.css') && !entry.name.endsWith('.module.css') && !STANDALONE_STYLESHEETS.has(entry.name)) {
+        } else if (
+            entry.name.endsWith('.css') &&
+            !entry.name.endsWith('.module.css') &&
+            !STANDALONE_STYLESHEETS.has(entry.name)
+        ) {
             found.push(join(directory, entry.name));
         }
     }
@@ -43,17 +59,26 @@ function inlineStyleImports(manifestFile, sourceDir) {
     const inlined = new Set();
 
     // Keep the manifest's own header comment, then replace each @import with the file it names.
-    const body = manifest.replace(/@import\s+['"]([^'"]+)['"]\s*;/g, (_match, specifier) => {
-        const file = specifier.startsWith('.')
-            ? resolve(dirname(manifestFile), specifier)
-            : require.resolve(specifier);
-        if (specifier.startsWith('.')) inlined.add(resolve(dirname(manifestFile), specifier));
-        parts.push(`/* ── ${specifier} ─────────────────────────────────────── */\n${readFileSync(file, 'utf8')}`);
-        return `@__CRATIS_STYLE_${parts.length - 1}__@`;
-    });
+    const body = manifest.replace(
+        /@import\s+['"]([^'"]+)['"]\s*;/g,
+        (_match, specifier) => {
+            const file = specifier.startsWith('.')
+                ? resolve(dirname(manifestFile), specifier)
+                : require.resolve(specifier);
+            if (specifier.startsWith('.'))
+                inlined.add(resolve(dirname(manifestFile), specifier));
+            parts.push(
+                `/* ── ${specifier} ─────────────────────────────────────── */\n${readFileSync(file, 'utf8')}`,
+            );
+            return `@__CRATIS_STYLE_${parts.length - 1}__@`;
+        },
+    );
 
     return {
-        css: body.replace(/@__CRATIS_STYLE_(\d+)__@/g, (_match, index) => parts[Number(index)]),
+        css: body.replace(
+            /@__CRATIS_STYLE_(\d+)__@/g,
+            (_match, index) => parts[Number(index)],
+        ),
         inlined,
     };
 }
@@ -93,13 +118,19 @@ function bundleStyles(sourceDir, esmPath) {
             const { default: autoprefixer } = await import('autoprefixer');
 
             const tailwindEntry = resolve(sourceDir, 'tailwind.css');
-            const tailwind = await postcss([tailwindcss({ base: sourceDir }), autoprefixer]).process(
-                readFileSync(tailwindEntry, 'utf8'),
-                { from: tailwindEntry, to: resolve(esmPath, 'styles.css') }
-            );
+            const tailwind = await postcss([
+                tailwindcss({ base: sourceDir }),
+                autoprefixer,
+            ]).process(readFileSync(tailwindEntry, 'utf8'), {
+                from: tailwindEntry,
+                to: resolve(esmPath, 'styles.css'),
+            });
 
             const manifestFile = resolve(sourceDir, 'styles.css');
-            const { css: components, inlined } = inlineStyleImports(manifestFile, sourceDir);
+            const { css: components, inlined } = inlineStyleImports(
+                manifestFile,
+                sourceDir,
+            );
 
             const missing = findComponentStylesheets(sourceDir)
                 .filter((file) => !inlined.has(file))
@@ -108,15 +139,17 @@ function bundleStyles(sourceDir, esmPath) {
             if (missing.length > 0) {
                 this.error(
                     `${missing.length} component stylesheet(s) are not imported by Source/styles.css, so their rules ` +
-                    `would not ship in @cratis/components/styles:\n  ${missing.join('\n  ')}\n` +
-                    'Add an @import for each to Source/styles.css.'
+                        `would not ship in @cratis/components/styles:\n  ${missing.join('\n  ')}\n` +
+                        'Add an @import for each to Source/styles.css.',
                 );
             }
 
             const outputFile = resolve(esmPath, 'styles.css');
             mkdirSync(dirname(outputFile), { recursive: true });
             writeFileSync(outputFile, `${tailwind.css}\n${components}`);
-            console.log(`✓ Bundled Tailwind utilities + ${inlined.size} component stylesheet(s) → dist/esm/styles.css`);
+            console.log(
+                `✓ Bundled Tailwind utilities + ${inlined.size} component stylesheet(s) → dist/esm/styles.css`,
+            );
         },
     };
 }
@@ -134,11 +167,11 @@ function generatePackageJson(esmPath) {
             writeFileSync(
                 join(esmDir, 'package.json'),
                 JSON.stringify({ type: 'module' }, null, 2),
-                'utf-8'
+                'utf-8',
             );
 
             console.log('✓ Generated package.json for ESM output');
-        }
+        },
     };
 }
 
@@ -150,12 +183,12 @@ export function rollup(esmPath, tsconfigPath, pkg) {
         output: [
             {
                 dir: esmPath,
-                format: "es",
-                exports: "named",
+                format: 'es',
+                exports: 'named',
                 sourcemap: true,
                 preserveModules: true,
-                preserveModulesRoot: "."
-            }
+                preserveModulesRoot: '.',
+            },
         ],
         external: [
             ...Object.keys(pkg.dependencies || {}),
@@ -172,26 +205,31 @@ export function rollup(esmPath, tsconfigPath, pkg) {
         plugins: [
             peerDepsExternal(),
             nodeResolve({
-                extensions: ['.mjs', '.js', '.json', '.node', '.ts', '.tsx']
+                extensions: ['.mjs', '.js', '.json', '.node', '.ts', '.tsx'],
             }),
             typescript({
                 tsconfig: false,
-                exclude: ["node_modules", "../node_modules", "**/for_*/**/*", "**/when_*/**/*"],
+                exclude: [
+                    'node_modules',
+                    '../node_modules',
+                    '**/for_*/**/*',
+                    '**/when_*/**/*',
+                ],
                 compilerOptions: {
-                    target: "ES2022",
-                    module: "ESNext",
-                    moduleResolution: "bundler",
-                    jsx: "react-jsx",
+                    target: 'ES2022',
+                    module: 'ESNext',
+                    moduleResolution: 'bundler',
+                    jsx: 'react-jsx',
                     sourceMap: true,
                     importHelpers: false,
                     noCheck: true,
                     declaration: false,
                     declarationMap: false,
                     composite: false,
-                }
+                },
             }),
             generatePackageJson(esmPath),
             bundleStyles(sourceDir, esmPath),
-        ]
+        ],
     };
 }

From da3d5034ffcf737bbea6cde6968f19c1300cb90f Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Sun, 23 Aug 2026 14:26:12 +0200
Subject: [PATCH 013/267] Complete consumer compatibility and package gates

Preserve practical migration aliases and Cratis-owned paginator/filter contracts for deeply customized consumers. Validate the packed artifact across package managers, remove stale Prime Storybook modes, and align the migration documentation with the shipped renderer-independent foundation.
---
 .github/workflows/javascript-build.yml        |  94 ++++++-
 Documentation/Styling/baseline-theme.md       |  27 +-
 Documentation/Styling/pass-through.md         | 112 ++++++---
 Documentation/migration-from-2.md             |  34 +--
 Documentation/migration.md                    |  52 +++-
 Documentation/ui-foundation.md                |  89 +++----
 Source/.storybook/main.ts                     |  17 +-
 Source/.storybook/manager.js                  |  35 +--
 Source/.storybook/preview.css                 | 234 ++++--------------
 Source/.storybook/preview.js                  | 117 +++------
 Source/.storybook/pt-preset.ts                | 172 -------------
 Source/DataTables/DataTableCore.tsx           |  26 +-
 Source/DataTables/DataTableFilterMeta.ts      |  14 +-
 .../DataTableForObservableQuery.tsx           |  15 +-
 Source/DataTables/DataTableForQuery.tsx       |  14 +-
 Source/DataTables/TablePaginator.tsx          |  51 +++-
 .../when_using_builtin_match_modes.ts         |  12 +-
 .../when_using_legacy_operator_filters.tsx    |  72 ++++++
 .../when_using_configured_locale.tsx          |  24 +-
 Source/DataTables/index.ts                    |   1 +
 Source/Dropdown/Dropdown.tsx                  | 110 ++++++--
 .../when_opened_inside_a_dialog.ts            |   8 +
 .../when_options_carry_label_and_value.ts     |   6 +-
 .../when_using_migration_aliases.tsx          |  83 +++++++
 Source/MIGRATION.md                           |  52 +++-
 Source/README.md                              |   2 +-
 Source/theme.css                              |   4 +
 Source/vite.config.ts                         |   7 +-
 rollup.config.mjs                             |  45 +++-
 29 files changed, 906 insertions(+), 623 deletions(-)
 delete mode 100644 Source/.storybook/pt-preset.ts
 create mode 100644 Source/DataTables/for_DataTableForQuery/when_using_legacy_operator_filters.tsx
 create mode 100644 Source/Dropdown/for_Dropdown/when_using_migration_aliases.tsx

diff --git a/.github/workflows/javascript-build.yml b/.github/workflows/javascript-build.yml
index 118c7cbb..eab293bf 100644
--- a/.github/workflows/javascript-build.yml
+++ b/.github/workflows/javascript-build.yml
@@ -142,7 +142,8 @@ jobs:
                     /tmp/cratis-components.tgz \
                     "@cratis/arc@${{ matrix.arc-version }}" \
                     "@cratis/arc.react@${{ matrix.arc-version }}" \
-                    @cratis/fundamentals react@19 react-dom@19
+                    @cratis/fundamentals react@19 react-dom@19 \
+                    reflect-metadata tsyringe
                   node --input-type=module - <<'NODE'
                   const commandDialog = await import('@cratis/components/CommandDialog');
                   const dataPage = await import('@cratis/components/DataPage');
@@ -155,4 +156,95 @@ jobs:
                   for (const [name, value] of Object.entries(required)) {
                       if (!value) throw new Error(`Missing ${name}`);
                   }
+                  for (const forbidden of ['primereact', '@primereact/core', '@primeuix/themes']) {
+                      try {
+                          import.meta.resolve(forbidden);
+                          throw new Error(`Unexpected renderer dependency: ${forbidden}`);
+                      } catch (error) {
+                          if (error instanceof Error && error.message.startsWith('Unexpected')) throw error;
+                      }
+                  }
                   NODE
+
+    verify-package-managers:
+        runs-on: ubuntu-latest
+        strategy:
+            fail-fast: false
+            matrix:
+                manager: ['pnpm', 'yarn-pnp']
+
+        steps:
+            - name: Checkout code
+              uses: actions/checkout@v4
+
+            - name: Setup node
+              uses: actions/setup-node@v4
+              with:
+                  node-version: 23.x
+                  registry-url: 'https://registry.npmjs.org'
+
+            - name: Enable Corepack
+              run: corepack enable
+
+            - name: Yarn install
+              run: yarn
+
+            - name: Build and pack Components
+              run: |
+                  yarn workspace @cratis/components prepare
+                  yarn workspace @cratis/components pack --out /tmp/cratis-components.tgz
+
+            - name: Create consumer fixture
+              run: |
+                  mkdir /tmp/components-consumer
+                  cat > /tmp/components-consumer/package.json <<'JSON'
+                  {"private":true,"type":"module"}
+                  JSON
+                  cat > /tmp/components-consumer/verify.mjs <<'NODE'
+                  const commandDialog = await import('@cratis/components/CommandDialog');
+                  const dataPage = await import('@cratis/components/DataPage');
+                  const notifications = await import('@cratis/components/Notifications');
+                  if (!commandDialog.CommandDialog || !dataPage.DataPage || !notifications.toast) {
+                      throw new Error('The packed Components surface is incomplete');
+                  }
+                  for (const forbidden of ['primereact', '@primereact/core', '@primeuix/themes']) {
+                      try {
+                          import.meta.resolve(forbidden);
+                          throw new Error(`Unexpected renderer dependency: ${forbidden}`);
+                      } catch (error) {
+                          if (error instanceof Error && error.message.startsWith('Unexpected')) throw error;
+                      }
+                  }
+                  NODE
+
+            - name: Verify pnpm consumer
+              if: matrix.manager == 'pnpm'
+              working-directory: /tmp/components-consumer
+              run: |
+                  corepack prepare pnpm@10.17.1 --activate
+                  pnpm add --ignore-scripts \
+                    /tmp/cratis-components.tgz \
+                    @cratis/arc@22.0.1 @cratis/arc.react@22.0.1 \
+                    @cratis/fundamentals react@19 react-dom@19 reflect-metadata tsyringe
+                  pnpm exec node verify.mjs
+
+            - name: Verify Yarn PnP consumer
+              if: matrix.manager == 'yarn-pnp'
+              working-directory: /tmp/components-consumer
+              run: |
+                  corepack prepare yarn@4.5.3 --activate
+                  cat > .yarnrc.yml <<'YAML'
+                  nodeLinker: pnp
+                  # Arc React 22 imports rxjs without declaring it. Keep that upstream
+                  # manifest issue explicit so this fixture can still isolate Components.
+                  packageExtensions:
+                    "@cratis/arc.react@*":
+                      dependencies:
+                        rxjs: "*"
+                  YAML
+                  yarn add \
+                    /tmp/cratis-components.tgz \
+                    @cratis/arc@22.0.1 @cratis/arc.react@22.0.1 \
+                    @cratis/fundamentals react@19 react-dom@19 \
+                    reflect-metadata tsyringe rxjs
+                  yarn node verify.mjs
diff --git a/Documentation/Styling/baseline-theme.md b/Documentation/Styling/baseline-theme.md
index c6b75cc9..977baf3c 100644
--- a/Documentation/Styling/baseline-theme.md
+++ b/Documentation/Styling/baseline-theme.md
@@ -1,6 +1,6 @@
 ---
 title: Use the baseline theme
-description: Apply the license-free Cratis baseline appearance.
+description: Apply the license-free Cratis baseline appearance globally or to one subtree.
 ---
 
 Import the baseline after tokens and structural styles:
@@ -11,12 +11,31 @@ import '@cratis/components/styles';
 import '@cratis/components/theme';
 ```
 
-The stylesheet supplies light and dark semantic values. Add `cratis-dark` to an ancestor to select the dark values.
+The import activates baseline values on `:root`, so no provider option or wrapper class is required for the normal whole-application setup.
+
+## Dark mode
+
+Apply `cratis-dark` to the document element:
+
+```ts
+document.documentElement.classList.toggle('cratis-dark', darkMode);
+```
+
+Use `cratis-light` to keep the light color scheme when the operating system prefers dark.
+
+## Theme one subtree
+
+The same values are scoped by `.cratis-theme` when a page needs an independently themed island:
 
 ```tsx
-<div className={dark ? 'cratis-dark' : undefined}>
-    <Application />
+<div className={`cratis-theme ${dark ? 'cratis-dark' : ''}`}>
+    <EmbeddedSurface />
 </div>
 ```
 
+Both arrangements are supported:
+
+- `cratis-dark cratis-theme` on the same element
+- `cratis-dark` on an ancestor of `cratis-theme`
+
 Override any `--cratis-*` variable after the theme import to adapt the baseline. For a complete product design, omit the baseline and follow [Build a product theme](themed.md).
diff --git a/Documentation/Styling/pass-through.md b/Documentation/Styling/pass-through.md
index 0522f880..de23db20 100644
--- a/Documentation/Styling/pass-through.md
+++ b/Documentation/Styling/pass-through.md
@@ -1,9 +1,16 @@
 ---
 title: Stable component parts
-description: Customize Components through Cratis-owned parts and state attributes.
+description: Customize Components through typed Cratis part keys and documented DOM part values.
 ---
 
-Every component exposes meaningful elements through `data-cratis-part`. Components that need per-instance customization also accept a `pt` object whose values are ordinary HTML attributes.
+Components exposes two related styling surfaces:
+
+- **Typed `pt` keys** use camel case and accept ordinary HTML attributes for one component instance.
+- **DOM part values** appear in `data-cratis-part` and use kebab case where a name contains several words.
+
+They are documented separately because not every DOM part needs a `pt` key, and the spellings are intentionally different (`headerRow` versus `header-row`).
+
+## Typed pt keys
 
 ```tsx
 <Dialog
@@ -11,22 +18,69 @@ Every component exposes meaningful elements through `data-cratis-part`. Componen
     pt={{
         backdrop: { className: 'account-dialog-backdrop' },
         root: { className: 'account-dialog' },
-        header: { className: 'account-dialog-header' },
         content: { className: 'account-dialog-content' },
-        footer: { className: 'account-dialog-footer' },
     }}
 >
     Content
 </Dialog>
 ```
 
-`pt` classes merge with the component's structural classes. Named component props control behavior and take precedence over conflicting part attributes.
+| Component/type               | Typed `pt` keys                                                                                                                                                         | Element types                                                 |
+| ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- |
+| `ButtonParts`                | `root`, `icon`, `label`, `spinner`                                                                                                                                      | button, spans                                                 |
+| `DialogParts`                | `backdrop`, `positioner`, `root`, `header`, `title`, `close`, `content`, `footer`, `confirm`, `cancel`                                                                  | div/section/header/heading/footer/buttons                     |
+| `DropdownParts`              | `root`, `input`, `select`, `trigger`, `value`, `clear`, `indicator`, `popover`, `listbox`, `option`, `filter`, `multiple`                                               | wrapper, input/button, spans, popover/listbox/options, select |
+| `DatePickerInputPassThrough` | `root`, `group`, `input`, `segment`, `trigger`, `popover`, `dialog`, `calendar`, `header`, `heading`, `previous`, `next`, `grid`, `cell`, `buttonBar`, `today`, `clear` | divs, segmented field, buttons, calendar grid/cells           |
+| `DataTableParts`             | `root`, `search`, `searchInput`, `tableContainer`, `table`, `head`, `headerRow`, `headerCell`, `body`, `row`, `cell`, `emptyRow`, `emptyCell`                           | div/input/table sections/rows/cells                           |
+| `TablePaginatorParts`        | `root`, `range`, `info`, `first`, `previous`, `next`, `last`                                                                                                            | navigation div, spans, and Button parts                       |
+| `StepperParts`               | `root`, `list`, `step`, `header`, `number`, `title`, `separator`, `panels`, `panel`                                                                                     | div, ordered list, list item, button, spans, section          |
+| `ToasterPassThrough`         | `region`, `toast`, `icon`, `content`, `title`, `description`, `close`, `action`                                                                                         | region/article/divs/spans/buttons                             |
+| `ActionMenubar` `pt`         | the `ButtonParts` keys applied to each action                                                                                                                           | button and spans                                              |
+| `DataPage` `tablePt`         | `DataTableParts`                                                                                                                                                        | table surface                                                 |
+| `DataPage` `menubarPt`       | `ButtonParts`                                                                                                                                                           | action buttons                                                |
+
+Command field part keys:
+
+| Field                  | Typed keys                                    |
+| ---------------------- | --------------------------------------------- |
+| InputText / TextArea   | `root`                                        |
+| Number                 | `root`, `input`                               |
+| Checkbox               | `root`, `input`, `box`, `indicator`           |
+| ToggleSwitch           | `root`, `input`, `control`, `handle`          |
+| Password               | `root`, `input`, `toggle`                     |
+| RadioButton            | `root`, `input`, `box`, `indicator`           |
+| RadioGroup             | `root`, `option`, `input`, `box`, `indicator` |
+| Slider                 | `root`, `input`, `value`                      |
+| Chips                  | `root`, `item`, `remove`, `input`             |
+| ColorPicker            | `root`, `input`, `value`                      |
+| Rating                 | `root`, `option`, `input`, `star`             |
+| Calendar               | `DatePickerInputPassThrough` keys             |
+| Dropdown / MultiSelect | `DropdownParts` keys                          |
+
+Named behavior props override conflicting part attributes. Part classes and styles merge with component structure.
 
-## CSS targeting
+## DOM part values
+
+Use the exact kebab-case value in CSS or tests:
+
+| Surface        | `data-cratis-part` values                                                                                                                                                                       |
+| -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Button         | `root`, `icon`, `label`, `spinner`                                                                                                                                                              |
+| Dialog         | `backdrop`, `positioner`, `root`, `header`, `title`, `close`, `content`, `footer`, `confirm`, `cancel`                                                                                          |
+| Dropdown       | `root`, `trigger`, `value`, `clear`, `indicator`, `filter`, `popover`, `listbox`, `option`, `multiple`                                                                                          |
+| DatePicker     | `root`, `group`, `input`, `segment`, `trigger`, `popover`, `dialog`, `calendar`, `header`, `heading`, `previous`, `next`, `grid`, `cell`, `button-bar`, `today`, `clear`                        |
+| DataTable      | `root`, `search`, `search-input`, `table-container`, `table`, `head`, `header-row`, `header-cell`, `header-content`, `sort`, `filter-trigger`, `body`, `row`, `cell`, `empty-row`, `empty-cell` |
+| TablePaginator | `root`, `range`, `info`; paginator buttons expose the documented Button parts                                                                                                                   |
+| Stepper        | `root`, `list`, `step`, `header`, `number`, `title`, `separator`, `panels`, `panel`                                                                                                             |
+| Toaster        | `region`, `toast`, `icon`, `content`, `title`, `description`, `action`, `close`                                                                                                                 |
+| Display        | component roots plus `image`, `fallback`, `remove`, `indicator`, `range`, `track`, and labels where applicable                                                                                  |
+| Event timeline | `timeline`, `event`, `separator`, `marker`, `connector`, `content`                                                                                                                              |
+
+`header-content`, `sort`, and `filter-trigger` are DOM targets but are not `DataTableParts` keys. Customize them with CSS rather than claiming a nonexistent typed key.
 
 ```css
-.account-dialog[data-cratis-part='root'] {
-    border-radius: 1rem;
+[data-cratis-part='header-cell'] {
+    text-transform: uppercase;
 }
 
 [data-cratis-part='row'][data-selected='true'] {
@@ -34,35 +88,25 @@ Every component exposes meaningful elements through `data-cratis-part`. Componen
 }
 ```
 
-Use Cratis part names and state attributes. Do not target React Aria classes or undocumented descendants.
-
-## Common state attributes
-
-- `data-active`
-- `data-selected`
-- `data-invalid`
-- `data-disabled`
-- `data-readonly`
-- `data-loading`
-- `data-position`
-- `data-orientation`
-- `data-size`
-- `data-severity`
+## State attributes
 
-## Part groups
+State attributes are component-specific. Common values include:
 
-| Component       | Stable parts                                                                                                                                                                  |
-| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Button          | `root`, `icon`, `label`, `spinner`                                                                                                                                            |
-| Dialog          | `backdrop`, `positioner`, `root`, `header`, `title`, `close`, `content`, `footer`, `confirm`, `cancel`                                                                        |
-| Dropdown        | `root`, `trigger`, `value`, `clear`, `indicator`, `filter`, `popover`, `listbox`, `option`, `multiple`                                                                        |
-| DatePickerInput | `root`, `group`, `input`, `segment`, `trigger`, `popover`, `dialog`, `calendar`, `header`, `heading`, `previous`, `next`, `grid`, `cell`, `button-bar`, `today`, `clear`      |
-| DataTableCore   | `root`, `search`, `search-input`, `table-container`, `table`, `head`, `header-row`, `header-cell`, `header-content`, `sort`, `body`, `row`, `cell`, `empty-row`, `empty-cell` |
-| Stepper         | `root`, `list`, `step`, `header`, `number`, `title`, `separator`, `panels`, `panel`                                                                                           |
-| Toaster         | `region`, `toast`, `icon`, `content`, `title`, `description`, `action`, `close`                                                                                               |
+| Attribute          | Meaning                                |
+| ------------------ | -------------------------------------- |
+| `data-active`      | Active filter, step, or action.        |
+| `data-selected`    | Selected row, option, or value.        |
+| `data-invalid`     | Validation error state.                |
+| `data-disabled`    | Disabled component state.              |
+| `data-readonly`    | Read-only date/control state.          |
+| `data-loading`     | Loading toast/action.                  |
+| `data-position`    | Overlay, timeline, or region position. |
+| `data-orientation` | Horizontal/vertical layout.            |
+| `data-size`        | Component size variant.                |
+| `data-severity`    | Semantic status tone.                  |
 
-TypeScript exposes the exact part type for each component, so unknown keys fail compilation.
+Do not assume an attribute exists on every component; use its documented parts/type and inspect the rendered Cratis contract in tests.
 
 ## Legacy flags
 
-`ptOptions` and `unstyled` remain accepted temporarily for Components 3 source compatibility. They have no effect: Cratis parts always merge, and the component CSS is always consumer-owned.
+`ptOptions` and `unstyled` remain accepted temporarily for Components 3 source compatibility. They have no effect: typed Cratis attributes always merge, and styling is always CSS-owned.
diff --git a/Documentation/migration-from-2.md b/Documentation/migration-from-2.md
index fb3f151e..2d7a5eea 100644
--- a/Documentation/migration-from-2.md
+++ b/Documentation/migration-from-2.md
@@ -1,5 +1,7 @@
 # Migration — `@cratis/components` 2.x → 3.0 (PrimeReact 10 → 11)
 
+> This is the historical Components 3 guide. Links to version-specific styling/provider pages use the immutable Components 3 merge commit so they cannot drift to Components 4 behavior.
+
 `@cratis/components` 3.0 moves the library from PrimeReact 10 to **PrimeReact 11**. Most wrapper APIs survive unchanged, so many apps upgrade with the find-and-replace in [Import moves](#import-moves-removed-primereact-paths) plus the install and import changes in [PrimeReact is now a peer dependency](#primereact-is-now-a-peer-dependency) and [Stylesheets are now an explicit import](#stylesheets-are-now-an-explicit-import). This guide lists every change a consuming app can feel.
 
 > [!IMPORTANT]
@@ -78,20 +80,20 @@ PrimeReact 11 is ESM-only, so `@cratis/components` dropped its CommonJS build. `
 
 PrimeReact 11 ships **80** modules where v10 shipped 117. Replace the removed ones with the Cratis-owned equivalents — the authoring model is unchanged:
 
-| Was (PrimeReact 10)                                                                                                       | Now (3.0)                                                                                                                                               |
-| ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `import { Column } from 'primereact/column'`                                                                              | `import { Column } from '@cratis/components/DataTables'` (also re-exported from `@cratis/components/DataPage`)                                          |
-| `import { StepperPanel } from 'primereact/stepperpanel'`                                                                  | `import { StepperPanel } from '@cratis/components/CommandDialog'`                                                                                       |
-| `import { Menubar } from 'primereact/menubar'`                                                                            | `<DataPage.MenuItems>` for list-page actions; a `Button` toolbar of your own otherwise                                                                  |
-| `import { Dropdown } from 'primereact/dropdown'`                                                                          | `import { Dropdown } from '@cratis/components/Dropdown'`                                                                                                |
-| `primereact/calendar`, `primereact/inputtextarea`, `primereact/multiselect`, `primereact/chips`, `primereact/colorpicker` | consume through the [CommandForm fields](CommandForm/index.md) (`CalendarField`, `TextAreaField`, `MultiSelectField`, `ChipsField`, `ColorPickerField`) |
-| `import { PrimeReactProvider } from 'primereact/api'`                                                                     | `import { PrimeReactProvider } from '@primereact/core'` — or just use [`CratisComponentsProvider`](Common/cratis-components-provider.md)                |
+| Was (PrimeReact 10)                                                                                                       | Now (3.0)                                                                                                                                                                                                                                 |
+| ------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `import { Column } from 'primereact/column'`                                                                              | `import { Column } from '@cratis/components/DataTables'` (also re-exported from `@cratis/components/DataPage`)                                                                                                                            |
+| `import { StepperPanel } from 'primereact/stepperpanel'`                                                                  | `import { StepperPanel } from '@cratis/components/CommandDialog'`                                                                                                                                                                         |
+| `import { Menubar } from 'primereact/menubar'`                                                                            | `<DataPage.MenuItems>` for list-page actions; a `Button` toolbar of your own otherwise                                                                                                                                                    |
+| `import { Dropdown } from 'primereact/dropdown'`                                                                          | `import { Dropdown } from '@cratis/components/Dropdown'`                                                                                                                                                                                  |
+| `primereact/calendar`, `primereact/inputtextarea`, `primereact/multiselect`, `primereact/chips`, `primereact/colorpicker` | consume through the [CommandForm fields](CommandForm/index.md) (`CalendarField`, `TextAreaField`, `MultiSelectField`, `ChipsField`, `ColorPickerField`)                                                                                   |
+| `import { PrimeReactProvider } from 'primereact/api'`                                                                     | `import { PrimeReactProvider } from '@primereact/core'` — or just use [`CratisComponentsProvider`](https://github.com/Cratis/Components/blob/9b45cfeb3719ec113ee4e939f9d49be38a877a14/Documentation/Common/cratis-components-provider.md) |
 
 `<Column field="name" header="Name" sortable filter />` and `<StepperPanel header="…">` work exactly as before.
 
 ### If you import `primereact/*` directly anywhere
 
-The full rename table, the removed-with-no-replacement list, and the `Sidebar` trap are on [PrimeReact and Components](coming-from-primereact.md#the-v11-module-renames). The short version: **v11 is compositional**, so a rename is often not a one-line edit — `primereact/select` exports `Select.Root` / `Select.Trigger` / `Select.Value` / `Select.Portal` / `Select.Popup` / `Select.List` / `Select.Option`, and you assemble them. Prefer a Cratis wrapper where one exists.
+The full rename table, the removed-with-no-replacement list, and the `Sidebar` trap are on [PrimeReact and Components](https://github.com/Cratis/Components/blob/9b45cfeb3719ec113ee4e939f9d49be38a877a14/Documentation/coming-from-primereact.md#the-v11-module-renames). The short version: **v11 is compositional**, so a rename is often not a one-line edit — `primereact/select` exports `Select.Root` / `Select.Trigger` / `Select.Value` / `Select.Portal` / `Select.Popup` / `Select.List` / `Select.Option`, and you assemble them. Prefer a Cratis wrapper where one exists.
 
 > [!CAUTION]
 > **The `Sidebar` trap.** v10's `Sidebar` (an overlay drawer) is now **`primereact/drawer`**. `primereact/sidebar` still exists in v11 but is a **different, new app-shell primitive**. A name-preserving migration compiles cleanly and silently swaps your overlay for an app shell. Check every `Sidebar` usage by hand.
@@ -117,16 +119,16 @@ Per-column filter menus (`<Column filter dataType="…" />`), a global search bo
 
 The chain is: **preset (JS) → `--p-*` (runtime) → `--cratis-*` (our token layer) → component CSS**, and in styled mode also **`primeReactStyles` → `p-*` class names + PrimeReact's component CSS**. Our `--cratis-*` tokens resolve the v11 token first and fall back to the v10 variable, so an app that still has a compiled v10 theme on the page during its port keeps working, and nothing breaks the day it is removed.
 
-Pick one of three paths — the [Styling](Styling/index.md) section walks each one:
+Pick one of three paths — the [Components 3 Styling guide](https://github.com/Cratis/Components/blob/9b45cfeb3719ec113ee4e939f9d49be38a877a14/Documentation/Styling/index.md) walks each one:
 
-**A. [The Cratis baseline theme](Styling/baseline-theme.md).** Cratis-authored MIT CSS that assigns the `--cratis-*` tokens directly, light and dark, for a polished default with no preset and no extra dependency. It defers to a preset's `--p-*` values when one is present.
+**A. [The Components 3 baseline theme](https://github.com/Cratis/Components/blob/9b45cfeb3719ec113ee4e939f9d49be38a877a14/Documentation/Styling/baseline-theme.md).** Cratis-authored MIT CSS that assigns the `--cratis-*` tokens directly, light and dark, for a polished default with no preset and no extra dependency. It defers to a preset's `--p-*` values when one is present.
 
 ```diff
 - import 'primereact/resources/themes/lara-dark-blue/theme.css';
 + import '@cratis/components/theme';
 ```
 
-**B. [PrimeReact's styled mode](Styling/themed.md).** `styledMode()` from `@cratis/components/styled` returns `{ theme, defaults }` — a `@primeuix/themes` preset (default `CratisPreset`: Lara with the blue primary and gray surfaces of `lara-light-blue` / `lara-dark-blue`) plus `primeReactStyles`, PrimeReact's own component styles, which the provider applies to every primitive rendered under it — this library's and your own. Needs `@primereact/styles` and `@primeuix/themes` installed. Options: `preset` (any preset or `definePreset` result), `darkModeSelector` (default `.cratis-dark`), `cssLayer` (default the `primereact` layer, ordered between Tailwind's `base` and `components`, so a plain `.p-button { … }` in your CSS overrides the theme just as it did against v10's `@layer primereact` stylesheets; `false` emits unlayered).
+**B. [Components 3 PrimeReact styled mode](https://github.com/Cratis/Components/blob/9b45cfeb3719ec113ee4e939f9d49be38a877a14/Documentation/Styling/themed.md).** `styledMode()` from `@cratis/components/styled` returns `{ theme, defaults }` — a `@primeuix/themes` preset (default `CratisPreset`: Lara with the blue primary and gray surfaces of `lara-light-blue` / `lara-dark-blue`) plus `primeReactStyles`, PrimeReact's own component styles, which the provider applies to every primitive rendered under it — this library's and your own. Needs `@primereact/styles` and `@primeuix/themes` installed. Options: `preset` (any preset or `definePreset` result), `darkModeSelector` (default `.cratis-dark`), `cssLayer` (default the `primereact` layer, ordered between Tailwind's `base` and `components`, so a plain `.p-button { … }` in your CSS overrides the theme just as it did against v10's `@layer primereact` stylesheets; `false` emits unlayered).
 
 ```diff
 - import 'primereact/resources/themes/lara-dark-blue/theme.css';
@@ -203,7 +205,7 @@ Some wrappers also **narrowed their surface** (they no longer leak PrimeReact's
 
 ### If you write `pt` definitions or CSS selectors against PrimeReact internals
 
-v11 is unstyled-first: outside [styled mode](Styling/themed.md), PrimeReact elements carry **no `p-*` class at all**. Parts are identified by data attributes instead — `[data-scope="dialog"][data-part="close"]`, `[data-scope="select"][data-part="trigger"]`, and so on. Selectors written against v10 class names will silently match nothing there. In styled mode the `p-*` class names are back — `styledMode()` applies PrimeReact's component styles to every primitive — and the theme sits in the `primereact` cascade layer, so a plain `.p-button { … }` in your own CSS overrides it as it did on v10. (`pt` slot keys are unaffected either way.)
+v11 is unstyled-first: outside [Components 3 styled mode](https://github.com/Cratis/Components/blob/9b45cfeb3719ec113ee4e939f9d49be38a877a14/Documentation/Styling/themed.md), PrimeReact elements carry **no `p-*` class at all**. Parts are identified by data attributes instead — `[data-scope="dialog"][data-part="close"]`, `[data-scope="select"][data-part="trigger"]`, and so on. Selectors written against v10 class names will silently match nothing there. In styled mode the `p-*` class names are back — `styledMode()` applies PrimeReact's component styles to every primitive — and the theme sits in the `primereact` cascade layer, so a plain `.p-button { … }` in your own CSS overrides it as it did on v10. (`pt` slot keys are unaffected either way.)
 
 ## What's new (nothing to migrate — just available)
 
@@ -211,8 +213,8 @@ v11 is unstyled-first: outside [styled mode](Styling/themed.md), PrimeReact elem
 - **[Display](Display/index.md)** — `Tag`, `Badge`, `Chip`, `Skeleton`, `Avatar`, `ProgressBar`.
 - **CommandForm fields** — [PasswordField](CommandForm/password-field.md), [ToggleSwitchField](CommandForm/toggle-switch-field.md), [RatingField](CommandForm/rating-field.md).
 - **[AutoCommandForm](CommandForm/auto-command-form.md)** — generates a `CommandForm`'s fields from the command's own `propertyDescriptors`, with a `registerFieldTypeProvider` registry for custom types.
-- **[`@cratis/components/theme`](Styling/baseline-theme.md)** — the Cratis baseline theme (MIT CSS). It now positions the dialog backdrop and positioner itself; previously a baseline-theme dialog could render below the page content.
-- **[`@cratis/components/styled`](Styling/themed.md)** — `styledMode()`, `CratisPreset`, `primeReactStyles`, `primeReactCssLayer`, `primeReactCssLayerOrder` and `cratisDarkModeSelector`: PrimeReact's styled mode, wired for the provider.
+- **[`@cratis/components/theme`](https://github.com/Cratis/Components/blob/9b45cfeb3719ec113ee4e939f9d49be38a877a14/Documentation/Styling/baseline-theme.md)** — the Cratis baseline theme (MIT CSS). It now positions the dialog backdrop and positioner itself; previously a baseline-theme dialog could render below the page content.
+- **[`@cratis/components/styled`](https://github.com/Cratis/Components/blob/9b45cfeb3719ec113ee4e939f9d49be38a877a14/Documentation/Styling/themed.md)** — `styledMode()`, `CratisPreset`, `primeReactStyles`, `primeReactCssLayer`, `primeReactCssLayerOrder` and `cratisDarkModeSelector`: PrimeReact's styled mode, wired for the provider.
 - **`@cratis/components/primereact-v10-palette`** — the PrimeReact 10 theme variables (`--surface-*`, `--text-color`, `--primary-color`, the color scales, …) restored with the lara-blue values, for CSS already written against them.
 - **`Dropdown`** reads `label` / `value` off option objects when `optionLabel` / `optionValue` are omitted — the v10 `Dropdown` convention.
 
@@ -230,7 +232,7 @@ An earlier version of this page said unstyled rendering and the Cratis baseline
 <CratisComponentsProvider value={{ license: '…' }}>
 ```
 
-What the styling choice changes is whether you additionally depend on `@primereact/styles` and `@primeuix/themes` — both PrimeUI-licensed too, and needed only for styled mode. [The Cratis baseline theme](Styling/baseline-theme.md) is Cratis-authored MIT CSS embedding no PrimeTek values, so that _stylesheet_ carries no PrimeTek terms — but rendering it still runs PrimeReact 11, which needs a key.
+What the styling choice changes is whether you additionally depend on `@primereact/styles` and `@primeuix/themes` - both PrimeUI-licensed too, and needed only for styled mode. [The Components 3 baseline theme](https://github.com/Cratis/Components/blob/9b45cfeb3719ec113ee4e939f9d49be38a877a14/Documentation/Styling/baseline-theme.md) is Cratis-authored MIT CSS embedding no PrimeTek values, so that _stylesheet_ carries no PrimeTek terms - but rendering it still runs PrimeReact 11, which needs a key.
 
 ### Which license you need
 
diff --git a/Documentation/migration.md b/Documentation/migration.md
index f31c164d..120c354e 100644
--- a/Documentation/migration.md
+++ b/Documentation/migration.md
@@ -160,6 +160,55 @@ Every meaningful element also carries `data-cratis-part`. Interactive states use
 
 See [Stable component parts](Styling/pass-through.md) for the complete contract.
 
+### Migrate a deeply customized product
+
+Keep the product's own tokens, Tailwind utilities, dark/high-contrast selectors, and accessibility preferences. Remove the renderer preset that translated those values into a third-party token system, then map the product values directly onto `--cratis-*`.
+
+For a custom dialog layer, change renderer part types to Cratis types and rename slots:
+
+```ts
+import type { DialogParts } from '@cratis/components/Dialogs';
+import type { StepperParts } from '@cratis/components/CommandDialog';
+
+export const productDialogParts: DialogParts = {
+    backdrop: { className: 'product-dialog-backdrop' },
+    root: { className: 'product-dialog' },
+    title: { className: 'product-dialog-title' },
+    close: { className: 'product-dialog-close' },
+    content: { className: 'product-dialog-content' },
+    footer: { className: 'product-dialog-footer' },
+};
+
+export const productStepperParts: StepperParts = {
+    root: { className: 'product-stepper' },
+    list: { className: 'product-stepper-list' },
+    header: { className: 'product-stepper-header' },
+    number: { className: 'product-stepper-number' },
+    title: { className: 'product-stepper-title' },
+    panels: { className: 'product-stepper-panels' },
+    panel: { className: 'product-stepper-panel' },
+};
+```
+
+Paginator callbacks that formerly returned classes from renderer context must become static Cratis parts plus CSS state selectors:
+
+```ts
+import type { TablePaginatorParts } from '@cratis/components/DataTables';
+
+export const productPaginatorParts: TablePaginatorParts = {
+    root: { className: 'product-paginator' },
+    first: { root: { className: 'product-paginator-button' } },
+    previous: { root: { className: 'product-paginator-button' } },
+    next: { root: { className: 'product-paginator-button' } },
+    last: { root: { className: 'product-paginator-button' } },
+    info: { className: 'product-paginator-info' },
+};
+```
+
+Use `:disabled`, `:focus-visible`, and the documented `data-cratis-*` states in CSS instead of renderer callback context. The numbered-page renderer is gone; the paginator reports the current page and provides first/previous/next/last actions.
+
+`Dropdown.inputId` and `Dropdown.panelClassName` remain migration aliases for `id` and `pt.popover.className`, but new code should use the current names.
+
 ## Update DatePicker integration
 
 `DatePickerInput` still accepts and emits `Date | null`, but its internal value uses `@internationalized/date`. Formatting now follows the active locale and calendar rather than a PrimeReact mask.
@@ -184,7 +233,8 @@ Multiple selection remains available through the native multiple-select path. Pr
 
 - Sorting and filtering apply to the currently loaded page.
 - Complete-result filtering belongs in query arguments and runs on the server before paging.
-- `clientFiltering` is removed; it was a deprecated no-op in Components 3.
+- `clientFiltering` remains temporarily accepted as a deprecated no-op so staged source migrations compile. Remove it: filtering is always scoped to the loaded page, and complete-result filtering belongs on the server before paging.
+- Legacy `{ operator, constraints }` filter entries remain accepted. `operator: 'or'` matches any constraint; all other values match every constraint.
 - `Column` remains the declarative column marker.
 - Table styling uses `DataTableParts` and `data-cratis-part`.
 - Server totals remain authoritative for the paginator.
diff --git a/Documentation/ui-foundation.md b/Documentation/ui-foundation.md
index 600b2762..8d99aad3 100644
--- a/Documentation/ui-foundation.md
+++ b/Documentation/ui-foundation.md
@@ -5,93 +5,82 @@ sidebar:
     order: 2
 ---
 
-Components exists to give a Cratis application a stable, productive UI API—not to expose whichever rendering library happens to implement it. The default package therefore owns its markup, styling contract, and TypeScript types. It uses React Aria internally for accessible interaction behavior and uses TanStack Table only when a table needs advanced state that Arc paging and React Aria do not already provide.
+Components 4 gives Cratis applications a stable UI API without exposing a mandatory rendering kit. The package owns its markup, TypeScript types, tokens, stable parts, and product-level behavior. React Aria supplies complex accessible interaction behavior internally.
 
-This is an accepted direction for the next major release. Components 3 remains PrimeReact-backed so compatible fixes can ship without hiding a renderer migration inside a minor release.
-
-## Decision
-
-The next major release follows these boundaries:
+## Shipped architecture
 
 ```mermaid
 graph TD
     App[Consumer application] --> Components[@cratis/components]
     Components --> Contracts[Cratis-owned APIs, parts, tokens, and state attributes]
     Components --> Aria[React Aria interaction behavior]
-    Components --> Table[TanStack Table where advanced table state is needed]
+    Components --> Native[Semantic native HTML]
     Components --> Arc[@cratis/arc.react bindings]
-    Legacy[@cratis/components.primereact compatibility package] --> Prime[PrimeReact / PrimeUI]
 ```
 
-Consumers continue importing `@cratis/components/*`. React Aria and TanStack are implementation dependencies and do not appear in public prop types.
-
-Arc command, query, and dialog bindings remain owned by `@cratis/arc.react`. Components builds visual behavior around those bindings rather than re-exporting them through a package with optional rendering peers.
+Consumers import `@cratis/components/*`. React Aria does not appear in public prop types, declarations, or styling contracts. Arc command, query, and dialog bindings remain owned by `@cratis/arc.react`; Components builds visual behavior around them.
 
 ## Consumer contract
 
-The public contract must make both the default Cratis look and a deeply customized product design straightforward:
+The shipped styling contract contains:
 
-- Cratis-owned CSS variables for semantic colors, spacing, typography, motion, elevation, and control dimensions.
-- Stable Cratis part names for every meaningful component element.
-- State data attributes such as open, selected, disabled, invalid, pending, and orientation.
-- `className`, `style`, and per-part configuration without renderer-specific types.
-- No required theme preset or proprietary provider.
-- Light, dark, forced-colors, reduced-motion, responsive, and right-to-left behavior.
-- Public component behavior that remains stable when the internal foundation changes.
+- Semantic color, surface, border, radius, and focus variables under `--cratis-*`.
+- Typed `pt` keys for foundation components that support per-instance part attributes.
+- Stable `data-cratis-part` values and component-specific state attributes documented in [Stable component parts](Styling/pass-through.md).
+- `className` and `style` on public roots where applicable.
+- Baseline light/dark/forced-colors values in the optional theme.
 
-A product may map its own tokens directly onto the Cratis variables or style the stable parts itself. It must not need selectors tied to React Aria's DOM or an internal package's class names.
+Spacing, typography, motion, elevation, and product-specific dimensions remain product design-system concerns unless a component documents a dedicated token or prop. A product can map its own token families to the Cratis semantic values and style stable parts without targeting React Aria DOM.
 
 ## Why React Aria
 
-[React Aria Components](https://react-aria.adobe.com/getting-started) is style-free and Apache-2.0 licensed. It supplies the interaction behavior that is difficult to implement and maintain correctly: keyboard navigation, focus management, screen-reader semantics, collection behavior, overlays, internationalized dates, and cross-device input.
+[React Aria Components](https://react-aria.adobe.com/getting-started) is style-free and Apache-2.0 licensed. It supplies difficult interaction behavior such as focus management, keyboard navigation, screen-reader semantics, overlays, collection behavior, and internationalized dates.
 
-Its official component set covers the high-risk primitives Components needs, including Dialog, Select, ComboBox, Table, DatePicker, NumberField, Slider, ColorPicker, Tooltip, and form controls. Its table supports selection, sorting, hierarchical rows, column resizing, drag-and-drop, infinite loading, and virtualization. Its date stack supports locale-specific formats, time zones, right-to-left layouts, and multiple calendar systems.
+Components still owns labels, error association, visual focus, contrast, hit targets, responsive composition, and behavior specs. React Aria is not treated as proof that a composed component is automatically accessible.
 
-React Aria does not remove application responsibility. Components still owns labels, error associations, focus appearance, contrast, hit targets, responsive layout, and behavior specs.
+The React Aria Components Toast API remains unstable, so Components 4 ships its own queue, dispatch, timer, frame, and accessible region rather than exposing that unstable API.
 
-The React Aria Components Toast API is still exported as unstable. Components keeps its own toast dispatch and presentation contract and may use the lower-level React Aria/Stately toast packages or its own accessible region until the component API is stable.
+## Table architecture
 
-## Why TanStack Table is selective
+Components 4 uses semantic HTML and Cratis-owned table state. Arc remains authoritative for server paging. Client filtering and sorting operate only on the loaded page; complete-result filtering and sorting run on the server before paging.
 
-[TanStack Table](https://tanstack.com/table/latest/docs/overview) is an MIT-licensed headless table engine. It provides advanced filtering, sorting, grouping, sizing, visibility, pinning, selection, and manual server-side state without prescribing markup.
+[TanStack Table](https://tanstack.com/table/latest/docs/overview) was evaluated but is not a Components 4 dependency. It remains a possible future implementation tool if advanced grouping, pinning, faceting, or sizing creates enough state complexity to justify it. Adopting it would not change the Cratis public contract.
 
-Query-backed Cratis tables already receive paging from Arc, and React Aria supplies accessible table semantics. TanStack is added only where it removes real state-management complexity. Server filtering, sorting, and paging remain one coherent operation: the server filters before paging and returns the filtered total.
+## Why PrimeReact is no longer the default
 
-## Why PrimeReact is not the default
+PrimeReact 11 has a capable layered architecture, but PrimeUI's consumer contract is unsuitable as an invisible mandatory dependency of a general Cratis framework.
 
-PrimeReact 11 has a capable layered architecture, and its headless hooks are explicitly intended for custom component libraries. The constraint is the consumer contract around that architecture.
+The [PrimeUI Community License](https://primeui.dev/licenses/community) says developers building on an internal wrapper or design system still need seats. Eligibility excludes organizations by revenue, team size, funding, or public-sector status. The [OEM guidance](https://primeui.dev/licenses/oem) identifies frameworks and SDKs used for third-party development as potential OEM uses while not clarifying peer-only open-source wrappers.
 
-The [PrimeUI Community License](https://primeui.dev/licenses/community) states that developers building on an internal wrapper or design system still need seats. Eligibility excludes many organizations by revenue, team size, funding, or public-sector status. The [OEM guidance](https://primeui.dev/licenses/oem) also identifies frameworks and SDKs used for third-party development as potential OEM uses, while not clarifying peer-only open-source wrappers.
+No `@cratis/components.primereact` package is published. Such a package is only a conditional future option and requires written PrimeTek confirmation first. Consumers that need the old implementation remain on the Components 3 release line while migrating.
 
-A PrimeReact-backed compatibility package is therefore explicit rather than invisible. It requires the Prime peers, documents that PrimeUI licensing still applies, and is not published until PrimeTek confirms the applicable OEM and redistribution terms in writing.
+This documentation summarizes public terms for architectural transparency; it is not legal advice. Consumers must consult the current authoritative license terms and their own counsel.
 
-## Why Components does not implement every primitive itself
+## Why Components does not implement every interaction itself
 
-Owning the public API does not mean reimplementing accessibility infrastructure. Dialog focus traps, composite keyboard navigation, international calendars, collection selection, and screen-reader behavior carry high maintenance and regression risk.
+Owning the API does not mean independently rebuilding dialog focus traps, composite keyboard navigation, international calendars, and collection selection. Components delegates those low-level behaviors to an open specialized foundation and verifies the composed result.
 
-Components owns product-facing composition, Arc integration, styling, and semantics. It delegates low-level interaction behavior to an open, specialized foundation and verifies the result with browser and accessibility tests.
+Simple controls use semantic native HTML when that is more robust than introducing an abstraction.
 
 ## Release sequence
 
-The transition is deliberately split:
+The transition was deliberately split:
 
-1. A Components 3 minor release delivers source-compatible accessibility, localization, filtering, notification, and paging fixes. PrimeReact and PrimeUI licensing remain unchanged and explicit.
-2. The next major release changes the default foundation, removes Prime runtime and declaration references, and introduces the Cratis-owned styling and provider contracts.
-3. A PrimeReact compatibility package may preserve the existing implementation for consumers that need a staged migration, subject to licensing confirmation.
+1. Components 3 received a source-compatible stabilization release with accessibility, localization, filtering, notification, and paging fixes while retaining explicit PrimeUI requirements.
+2. Components 4 changes the default foundation, removes Prime runtime/declaration references, and introduces Cratis-owned provider and styling contracts.
+3. Components 3 remains the temporary compatibility line for applications that cannot migrate atomically.
 
-The stabilization specs are the parity contract for the major release. The new implementation is not complete until it preserves the observable behavior those specs protect.
+The stabilization specs are the behavior parity contract for Components 4.
 
-## Validation gates
+## Release gates
 
-The major release does not ship until:
+Components 4 is accepted only when:
 
-- The default package contains no Prime runtime imports or Prime references in emitted declarations.
+- Emitted JavaScript and declarations contain no Prime imports or type references.
 - npm, pnpm, and Yarn PnP packed-consumer fixtures pass.
-- Supported Arc versions compile and load with the packed artifact.
-- Representative consumers compile and exercise their critical screens.
-- Keyboard, focus, browser accessibility, Storybook, SSR, responsive, dark-mode, forced-colors, and reduced-motion scenarios pass.
-- Custom token systems and per-part styling work without internal DOM selectors.
-- Bundle size and rendering performance are measured against the stabilization release.
-- The migration guide has been followed successfully without repository-specific knowledge.
-
-Track implementation and acceptance evidence in [the UI foundation issue](https://github.com/Cratis/Components/issues/170).
+- Supported Arc versions load from the packed artifact.
+- Representative custom-theme and pass-through consumers compile after following the guide.
+- Specs, Storybook, package exports, SSR, keyboard/focus behavior, responsive layouts, dark mode, forced colors, and reduced motion pass.
+- The migration guide works without repository-specific knowledge.
+
+Track acceptance evidence in [the UI foundation issue](https://github.com/Cratis/Components/issues/170).
diff --git a/Source/.storybook/main.ts b/Source/.storybook/main.ts
index dee55628..91e40583 100644
--- a/Source/.storybook/main.ts
+++ b/Source/.storybook/main.ts
@@ -5,12 +5,7 @@ import type { StorybookConfig } from '@storybook/react-vite';
 import type { UserConfig as ViteConfig } from 'vite';
 
 const config: StorybookConfig = {
-  stories: [
-    '../**/*.stories.@(ts|tsx)',
-    '!../node_modules/**',
-    '!../dist/**',
-    '!../storybook-static/**'
-  ],
+  stories: ['../!(dist|node_modules|storybook-static)/**/*.stories.@(ts|tsx)'],
   addons: [],
   framework: {
     name: '@storybook/react-vite',
@@ -21,8 +16,14 @@ const config: StorybookConfig = {
   // Ensure Vite dev server does not open the browser when Storybook starts
   async viteFinal(existingConfig: ViteConfig) {
     const cfg: ViteConfig = { ...existingConfig };
-    cfg.server = { ...(cfg.server || {}), open: false } as unknown;
-    cfg.build = { ...(cfg.build || {}), cssMinify: false };
+    cfg.server = { ...(cfg.server || {}), open: false };
+    cfg.build = {
+      ...(cfg.build || {}),
+      cssMinify: false,
+      // The preview index includes Storybook's manager runtime and every story entry;
+      // it is documentation output rather than a consumer package chunk.
+      chunkSizeWarningLimit: 1200
+    };
     return cfg;
   }
 };
diff --git a/Source/.storybook/manager.js b/Source/.storybook/manager.js
index b02b95a4..1ba54b83 100644
--- a/Source/.storybook/manager.js
+++ b/Source/.storybook/manager.js
@@ -5,31 +5,38 @@ import { addons } from 'storybook/manager-api';
 import { themes } from 'storybook/theming';
 
 const urlParams = new URLSearchParams(window.location.search);
+let followsDocsSiteTheme = urlParams.has('docsSiteTheme');
 let currentTheme = urlParams.get('docsSiteTheme') ?? 'dark';
 
-addons.setConfig({
-    theme: currentTheme === 'light' ? themes.light : themes.dark,
-    navSize: 300,
-    bottomPanelHeight: 300,
-    panelPosition: 'bottom',
-    showToolbar: true,
-    showTabs: true,
-});
+const applyManagerConfig = () => {
+    addons.setConfig({
+        theme: currentTheme === 'light' ? themes.light : themes.dark,
+        navSize: 300,
+        bottomPanelHeight: 300,
+        panelPosition: 'bottom',
+        showToolbar: true,
+        showTabs: true,
+    });
+};
+
+applyManagerConfig();
 
 // Relay the current theme to the preview canvas whenever a story renders,
-// so the PrimeReact component theme stays in sync with the docs-site preference.
+// so the Cratis baseline stays in sync with the docs-site preference.
 addons.getChannel().on('STORY_RENDERED', () => {
-    addons.getChannel().emit('STORYBOOK_THEME_CHANGE', { theme: currentTheme });
+    if (followsDocsSiteTheme) {
+        addons.getChannel().emit('STORYBOOK_THEME_CHANGE', { theme: currentTheme });
+    }
 });
 
 // Receive theme-sync messages from the embedding docs site (StorybookEmbed.astro).
-// Reload the manager with the new theme in the URL so addons.setConfig takes effect.
 window.addEventListener('message', (event) => {
     if (event.data?.type !== 'STORYBOOK_THEME_CHANGE') return;
     const newTheme = event.data.theme;
+    if (newTheme !== 'light' && newTheme !== 'dark') return;
+    followsDocsSiteTheme = true;
     if (currentTheme === newTheme) return;
     currentTheme = newTheme;
-    const url = new URL(window.location.href);
-    url.searchParams.set('docsSiteTheme', newTheme);
-    window.location.href = url.toString();
+    applyManagerConfig();
+    addons.getChannel().emit('STORYBOOK_THEME_CHANGE', { theme: currentTheme });
 });
diff --git a/Source/.storybook/preview.css b/Source/.storybook/preview.css
index f52cb546..771ebb74 100644
--- a/Source/.storybook/preview.css
+++ b/Source/.storybook/preview.css
@@ -1,206 +1,82 @@
-/* 1. Tailwind (includes preflight reset) — must come first */
-@import "tailwindcss";
-/* 2. PrimeReact theme is injected dynamically by the Storybook theme decorator
- *    (omitted when the decorator's 'Cratis-themed' or 'Unstyled' modes are selected) */
+/* Copyright (c) Cratis. All rights reserved. */
+/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */
 
-/*
- * Storybook-only token overrides per styling path.
- *
- * In real consumer apps the consumer either loads a PrimeReact theme (which
- * populates the underlying --surface-*, --text-color, etc., and the --cratis-*
- * tokens forward to them) or overrides --cratis-* tokens themselves. Storybook
- * needs a working baseline for every documented path so each toolbar mode is
- * visually intelligible.
- *
- * The decorator toggles one of the body classes below, so the right token set
- * wins for each mode. When no class is set we leave tokens alone so the
- * loaded PrimeReact theme can drive --cratis-* through tokens.css.
- */
-
-/*
- * Path B — Themed with custom palette. A PrimeReact theme (Lara Dark Blue in
- * Storybook) supplies the structural chrome. This block then overrides
- * PrimeReact's own variables so every widget repaints in slate/sky, with the
- * --cratis-* siblings updated in parallel so Cratis-scoped surfaces follow
- * suit.
- *
- * In a consumer app the same pattern would live in the consumer's own CSS,
- * applied either on :root or scoped to a region.
- */
-body.cratis-themed {
-    /* PrimeReact theme variables — these are what PrimeReact widgets read. */
-    --surface-0:        #1e293b;
-    --surface-100:      #1e293b;
-    --surface-ground:   #020617;
-    --surface-section:  #0f172a;
-    --surface-card:     #1e293b;
-    --surface-overlay:  #1e293b;
-    --surface-hover:    #334155;
-    --surface-border:   #334155;
-
-    --text-color:           #f8fafc;
-    --text-color-secondary: #94a3b8;
-
-    --primary-color:      #38bdf8;
-    --primary-color-text: #0b1220;
-    --primary-300:        #7dd3fc;
-    --primary-400:        #38bdf8;
-    --primary-500:        #0ea5e9;
-    --primary-600:        #0284c7;
-
-    --highlight-bg:         #1e40af;
-    --highlight-text-color: #ffffff;
-
-    --green-500:  #22c55e;
-    --orange-500: #f97316;
-    --red-500:    #ef4444;
-
-    --border-radius: 10px;
-
-    /* --cratis-* tokens default to var(--surface-*) etc. via tokens.css, so
-     * the overrides above flow through automatically. The explicit settings
-     * below let a consumer tint Cratis-scoped surfaces (validation errors,
-     * the FormElement addon, breadcrumb borders) independently if they want
-     * to make Cratis surfaces visually distinct from PrimeReact widgets. */
-    --cratis-primary-color:      #38bdf8;
-    --cratis-primary-color-text: #0b1220;
-    --cratis-red-500:            #ef4444;
-    --cratis-green-500:          #22c55e;
-    --cratis-orange-500:         #f97316;
-    --cratis-border-radius:      10px;
-}
-
-/*
- * Path C bare — Unstyled with no consumer styling. PrimeReact base styles are
- * disabled at the provider; tokens are intentionally set to neutral dark
- * grays so structural elements (borders, text) remain readable but no brand
- * personality leaks in. Consumers see what they'd start from.
- */
-body.cratis-unstyled-bare {
-    --cratis-surface-0:        #1f2937;
-    --cratis-surface-100:      #1f2937;
-    --cratis-surface-ground:   #111827;
-    --cratis-surface-section:  #111827;
-    --cratis-surface-card:     #1f2937;
-    --cratis-surface-overlay:  #1f2937;
-    --cratis-surface-hover:    #374151;
-    --cratis-surface-border:   #374151;
-
-    --cratis-text-color:           #f3f4f6;
-    --cratis-text-color-secondary: #9ca3af;
-
-    --cratis-primary-color:      #60a5fa;
-    --cratis-primary-color-text: #0b1220;
-    --cratis-primary-300:        #93c5fd;
-    --cratis-primary-400:        #60a5fa;
-    --cratis-primary-500:        #3b82f6;
-    --cratis-primary-600:        #2563eb;
-
-    --cratis-highlight-bg:         #1e3a8a;
-    --cratis-highlight-text-color: #ffffff;
-
-    --cratis-green-500:  #22c55e;
-    --cratis-orange-500: #f97316;
-    --cratis-red-500:    #ef4444;
-
-    --cratis-border-radius: 6px;
-}
+@import 'tailwindcss';
 
 /*
- * Path C with Tailwind pt — Unstyled, with a sample pt preset applied. The
- * pt preset (see .storybook/pt-preset.ts) carries every visual; tokens are
- * still useful for any wrapper that uses --cratis-* directly (e.g.
- * ObjectNavigationalBar's border).
+ * A representative product-owned design system mapping directly onto the
+ * stable Cratis token seam. It deliberately has no renderer preset or
+ * third-party class dependency.
  */
-body.cratis-unstyled-pt {
+body.storybook-product-theme {
+    --cratis-surface-0: #1e293b;
+    --cratis-surface-100: #1e293b;
+    --cratis-surface-ground: #020617;
+    --cratis-surface-section: #0f172a;
+    --cratis-surface-card: #1e293b;
+    --cratis-surface-overlay: #1e293b;
+    --cratis-surface-hover: #334155;
     --cratis-surface-border: #334155;
-    --cratis-text-color:     #f8fafc;
+    --cratis-text-color: #f8fafc;
     --cratis-text-color-secondary: #94a3b8;
-    --cratis-primary-color:      #38bdf8;
+    --cratis-primary-color: #38bdf8;
     --cratis-primary-color-text: #0b1220;
-    --cratis-red-500:    #ef4444;
-    --cratis-green-500:  #22c55e;
+    --cratis-primary-300: #7dd3fc;
+    --cratis-primary-400: #38bdf8;
+    --cratis-primary-500: #0ea5e9;
+    --cratis-primary-600: #0284c7;
+    --cratis-highlight-bg: #1e40af;
+    --cratis-highlight-text-color: #ffffff;
+    --cratis-green-500: #22c55e;
     --cratis-orange-500: #f97316;
+    --cratis-red-500: #ef4444;
     --cratis-border-radius: 10px;
+    --cratis-focus-ring: 0 0 0 3px rgb(56 189 248 / 45%);
+    --cratis-maskbg: rgb(2 6 23 / 70%);
 }
 
-html, body {
-  background-color: var(--cratis-surface-ground, #111827);
-  color: var(--cratis-text-color, #f3f4f6);
-  min-height: 100vh;
-  margin: 0;
-  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-  font-size: 12px;
-  line-height: 24px;
-  font-weight: 400;
+html,
+body {
+    min-height: 100vh;
+    margin: 0;
+    color: var(--cratis-text-color);
+    background-color: var(--cratis-surface-ground);
+    font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 24px;
 }
 
 .storybook-wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 100vh;
-  padding: 1rem;
-  background-color: var(--cratis-surface-ground, #111827);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+    padding: 1rem;
+    background-color: var(--cratis-surface-ground);
 }
 
-/* Utility classes matching Chronicle Workbench */
 .highlight {
-  background-color: var(--cratis-highlight-bg);
-  color: var(--cratis-highlight-text-color);
+    color: var(--cratis-highlight-text-color);
+    background-color: var(--cratis-highlight-bg);
 }
 
 .contentBackground {
-  background-color: var(--cratis-surface-0);
+    background-color: var(--cratis-surface-0);
 }
 
 .panel {
-  background: var(--cratis-surface-card);
-  border: 1px solid var(--cratis-surface-border);
-  border-radius: var(--cratis-border-radius);
-  color: var(--cratis-text-color);
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    color: var(--cratis-text-color);
+    background: var(--cratis-surface-card);
+    border: 1px solid var(--cratis-surface-border);
+    border-radius: var(--cratis-border-radius);
 }
 
 .card {
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-}
-
-/* DataTable layout helpers — only effective when the PrimeReact theme is loaded */
-.p-datatable {
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  height: 100%;
-}
-
-.p-datatable .p-datatable-wrapper {
-  flex: 1 1 auto;
-  min-height: 0;
-  overflow: auto;
-}
-
-.p-datatable .p-datatable-table {
-  width: 100%;
-}
-
-/* Prevent menubar from collapsing to hamburger on small screens */
-.p-menubar .p-menubar-button {
-  display: none !important;
-}
-
-.p-menubar .p-menubar-root-list {
-  display: flex !important;
-  flex-direction: row !important;
-  position: static !important;
-  width: auto !important;
-  padding: 0 !important;
-}
-
-.p-menubar {
-  border: 1px solid var(--cratis-surface-border) !important;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
 }
diff --git a/Source/.storybook/preview.js b/Source/.storybook/preview.js
index 82bf51a4..573b4524 100644
--- a/Source/.storybook/preview.js
+++ b/Source/.storybook/preview.js
@@ -3,101 +3,52 @@
 
 import { addons } from 'storybook/preview-api';
 import React from 'react';
-import 'primeicons/primeicons.css';
 import '../styles.css';
 import './preview.css';
 import '../theme.css';
-import '../primereact-v10-palette.css';
-import Aura from '@primeuix/themes/aura';
 import { CratisComponentsProvider } from '../Common/CratisComponentsProvider';
-import { styledMode } from '../Styled';
-import { tailwindPtPreset } from './pt-preset';
 
-// PrimeReact 11 is unstyled-first and token-based: the styled look is styled mode -
-// PrimeReact's own component styles handed to every primitive through the provider's
-// `defaults`, painted by a @primeuix/themes preset applied through its `theme` config
-// (which injects the `--p-*` design tokens). A preset alone styles nothing; that is what
-// `styledMode()` composes. Dark mode is toggled with the class the preset's
-// `darkModeSelector` targets. There are no theme CSS files to <link> anymore (the v10
-// `primereact/resources/themes/lara-*` files were removed).
 const DARK_SELECTOR = 'cratis-dark';
+const LIGHT_SELECTOR = 'cratis-light';
 
-// PrimeReact 11 verifies a PrimeUI license key when its provider mounts, whatever the
-// styling path; without one a nag banner appears. Set STORYBOOK_PRIMEUI_LICENSE to your
-// own key. The default mode below is the unstyled + Tailwind `pt` path.
-const PRIMEUI_LICENSE = import.meta.env?.STORYBOOK_PRIMEUI_LICENSE;
-const withLicense = (value) => (PRIMEUI_LICENSE ? { ...value, license: PRIMEUI_LICENSE } : value);
-
-const STYLING_MODES = {
-    'unstyled-pt': {
-        title: 'Path C — Unstyled + Tailwind pt (default)',
-        dark: true,
-        bodyClass: 'cratis-unstyled-pt',
-        providerValue: { unstyled: true, pt: tailwindPtPreset },
-    },
-    'unstyled-bare': {
-        title: 'Path C — Unstyled (bare structure)',
-        dark: true,
-        bodyClass: 'cratis-unstyled-bare',
-        providerValue: { unstyled: true },
-    },
-    'styled-dark': {
-        title: 'Path A — Styled mode, Cratis preset, dark',
+const APPEARANCE_MODES = {
+    'baseline-dark': {
+        title: 'Cratis baseline — dark',
         dark: true,
         bodyClass: null,
-        providerValue: withLicense({ ripple: true, ...styledMode() }),
     },
-    'styled-light': {
-        title: 'Path A — Styled mode, Cratis preset, light',
+    'baseline-light': {
+        title: 'Cratis baseline — light',
         dark: false,
         bodyClass: null,
-        providerValue: withLicense({ ripple: true, ...styledMode() }),
     },
-    'styled-aura-dark': {
-        title: 'Path A — Styled mode, Aura preset, dark',
+    'product-theme': {
+        title: 'Product-owned token mapping',
         dark: true,
-        bodyClass: null,
-        providerValue: withLicense({ ripple: true, ...styledMode({ preset: Aura }) }),
-    },
-    'cratis-theme': {
-        title: 'Path B — Cratis baseline theme, dark (no license)',
-        dark: true,
-        bodyClass: 'cratis-theme',
-        providerValue: { unstyled: true },
-    },
-    'cratis-theme-light': {
-        title: 'Path B — Cratis baseline theme, light (no license)',
-        dark: false,
-        bodyClass: 'cratis-theme',
-        providerValue: { unstyled: true },
+        bodyClass: 'storybook-product-theme',
     },
 };
 
-const ALL_BODY_CLASSES = Object.values(STYLING_MODES)
-    .map(mode => mode.bodyClass)
+const ALL_BODY_CLASSES = Object.values(APPEARANCE_MODES)
+    .map((mode) => mode.bodyClass)
     .filter(Boolean);
 
-// Tracks the theme relayed from manager.js via the Storybook channel.
-// null means "not embedded — use the toolbar selection".
-let _docsSiteTheme = null;
+let docsSiteAppearance = null;
 
 addons.getChannel().on('STORYBOOK_THEME_CHANGE', ({ theme }) => {
-    _docsSiteTheme = theme === 'light' ? 'styled-light' : 'styled-dark';
-    const mode = STYLING_MODES[_docsSiteTheme];
-    if (mode) {
-        applyDarkMode(mode.dark);
-        applyBodyClass(mode.bodyClass);
-    }
+    docsSiteAppearance = theme === 'light' ? 'baseline-light' : 'baseline-dark';
+    const mode = APPEARANCE_MODES[docsSiteAppearance];
+    if (mode) applyAppearance(mode);
 });
 
 export const globalTypes = {
-    theme: {
-        name: 'Styling',
-        description: 'Which README styling path to render the story under',
-        defaultValue: 'unstyled-pt',
+    appearance: {
+        name: 'Appearance',
+        description: 'Render with the Cratis baseline or a product-owned token mapping',
+        defaultValue: 'baseline-dark',
         toolbar: {
             icon: 'paintbrush',
-            items: Object.entries(STYLING_MODES).map(([value, mode]) => ({
+            items: Object.entries(APPEARANCE_MODES).map(([value, mode]) => ({
                 value,
                 title: mode.title,
             })),
@@ -106,32 +57,24 @@ export const globalTypes = {
     },
 };
 
-function applyDarkMode(isDark) {
-    document.documentElement.classList.toggle(DARK_SELECTOR, !!isDark);
-}
-
-function applyBodyClass(className) {
+function applyAppearance(mode) {
+    document.documentElement.classList.toggle(DARK_SELECTOR, mode.dark);
+    document.documentElement.classList.toggle(LIGHT_SELECTOR, !mode.dark);
     document.body.classList.remove(...ALL_BODY_CLASSES);
-    if (className) {
-        document.body.classList.add(className);
-    }
+    if (mode.bodyClass) document.body.classList.add(mode.bodyClass);
 }
 
 export const decorators = [
     (Story, context) => {
-        const themeKey = _docsSiteTheme ?? context.globals.theme ?? 'unstyled-pt';
-        const mode = STYLING_MODES[themeKey] ?? STYLING_MODES['unstyled-pt'];
-
-        applyDarkMode(mode.dark);
-        applyBodyClass(mode.bodyClass);
+        const appearanceKey =
+            docsSiteAppearance ?? context.globals.appearance ?? 'baseline-dark';
+        const mode = APPEARANCE_MODES[appearanceKey] ?? APPEARANCE_MODES['baseline-dark'];
+        applyAppearance(mode);
 
-        // Key the provider by the selected mode so switching styling paths fully
-        // remounts it — this re-initializes the injected `@primeuix/themes` stylesheet
-        // instead of leaving a stale preset behind when moving to/from unstyled modes.
         return React.createElement(
             CratisComponentsProvider,
-            { key: themeKey, value: mode.providerValue },
-            React.createElement(Story)
+            { key: appearanceKey, value: { locale: 'en-US' } },
+            React.createElement(Story),
         );
     },
 ];
diff --git a/Source/.storybook/pt-preset.ts b/Source/.storybook/pt-preset.ts
deleted file mode 100644
index 410ed25c..00000000
--- a/Source/.storybook/pt-preset.ts
+++ /dev/null
@@ -1,172 +0,0 @@
-// Copyright (c) Cratis. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-
-/**
- * Sample PrimeReact `pt` (pass-through) preset that demonstrates the Path C
- * styling story from the README: drop into `CratisComponentsProvider` with
- * `unstyled: true`, and every covered PrimeReact widget picks up a fresh look
- * built entirely from Tailwind utility classes.
- *
- * This file is Storybook-only and not part of the published package. Treat it
- * as a PrimeReact 11 starting point you can fork into your own app. Its keys
- * follow the Components 3 contract published from `@cratis/components/compatibility`.
- */
-
-const surface = 'bg-slate-900 text-slate-50';
-const border = 'border border-slate-700';
-const focusRing = 'focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-400';
-
-export const tailwindPtPreset = {
-    button: {
-        root: {
-            className: [
-                'inline-flex items-center justify-center gap-2',
-                'px-4 py-2 rounded-lg font-medium',
-                // sky-700 (not sky-500) so white label text clears WCAG AA (~6:1).
-                'bg-sky-700 text-white',
-                'hover:bg-sky-600 active:bg-sky-800',
-                'disabled:opacity-50 disabled:cursor-not-allowed',
-                'transition-colors',
-                focusRing,
-            ].join(' '),
-        },
-    },
-
-    inputtext: {
-        root: {
-            className: [
-                'w-full px-3 py-2 rounded-md',
-                surface,
-                border,
-                'placeholder:text-slate-400',
-                'focus:border-sky-400',
-                focusRing,
-            ].join(' '),
-        },
-    },
-
-    textarea: {
-        root: {
-            className: [
-                'w-full px-3 py-2 rounded-md',
-                surface,
-                border,
-                'placeholder:text-slate-400 resize-y',
-                'focus:border-sky-400',
-                focusRing,
-            ].join(' '),
-        },
-    },
-
-    inputnumber: {
-        root: {
-            root: { className: 'w-full' },
-            input: {
-                className: [
-                    'w-full px-3 py-2 rounded-md',
-                    surface,
-                    border,
-                    'focus:border-sky-400',
-                    focusRing,
-                ].join(' '),
-            },
-        },
-    },
-
-    select: {
-        root: {
-            root: {
-                className: [
-                    'w-full inline-flex items-center justify-between gap-2',
-                    'px-3 py-2 rounded-md cursor-pointer',
-                    surface,
-                    border,
-                    'hover:border-slate-500',
-                    focusRing,
-                ].join(' '),
-            },
-            value: { className: 'flex-1 truncate text-left' },
-            indicator: { className: 'shrink-0 text-slate-400' },
-            popup: {
-                className: [
-                    'mt-1 rounded-md shadow-xl overflow-hidden',
-                    surface,
-                    border,
-                ].join(' '),
-            },
-            option: {
-                className: 'px-3 py-2 cursor-pointer hover:bg-slate-800',
-            },
-        },
-    },
-
-    checkbox: {
-        root: {
-            root: { className: 'inline-flex items-center' },
-            box: {
-                className: [
-                    'w-4 h-4 rounded',
-                    'border border-slate-500 bg-slate-800',
-                    'data-[p-highlight=true]:bg-sky-500 data-[p-highlight=true]:border-sky-500',
-                    focusRing,
-                ].join(' '),
-            },
-            indicator: { className: 'text-white text-xs' },
-        },
-    },
-
-    dialog: {
-        root: {
-            popup: {
-                className: ['rounded-2xl shadow-2xl overflow-hidden', surface].join(' '),
-            },
-            header: {
-                className: [
-                    'flex items-center justify-between gap-4',
-                    'px-5 py-3 font-semibold',
-                    'bg-slate-800 text-slate-50 border-b border-slate-700',
-                ].join(' '),
-            },
-            title: { className: 'text-base' },
-            close: {
-                className: 'p-1 rounded hover:bg-slate-700 transition-colors',
-            },
-            content: {
-                className: 'p-5 bg-slate-900 text-slate-100',
-            },
-            footer: {
-                className:
-                    'px-5 py-3 bg-slate-800 border-t border-slate-700 flex justify-end gap-2',
-            },
-            backdrop: {
-                className: 'bg-slate-950/70 backdrop-blur-sm',
-            },
-        },
-    },
-
-    datatable: {
-        root: {
-            root: { className: 'w-full' },
-            table: { className: 'w-full text-sm' },
-            head: {
-                className: 'bg-slate-800 text-slate-300 uppercase text-xs tracking-wider',
-            },
-            theadRow: { className: 'border-b border-slate-700' },
-            theadCell: { className: 'px-3 py-2 text-left font-medium' },
-            body: {
-                className: 'divide-y divide-slate-800',
-            },
-            row: {
-                className: [
-                    'hover:bg-slate-800/60 data-[p-highlight=true]:bg-sky-500/10',
-                    'data-[p-highlight=true]:text-sky-100',
-                    'transition-colors',
-                ].join(' '),
-            },
-            cell: { className: 'px-3 py-2 text-slate-100' },
-        },
-    },
-
-    // PrimeReact 11 removed Menubar; the Cratis action bar is a Button toolbar
-    // styled through the `button` slot above, so no menubar preset is needed.
-} as const;
diff --git a/Source/DataTables/DataTableCore.tsx b/Source/DataTables/DataTableCore.tsx
index 10e45bda..774e7167 100644
--- a/Source/DataTables/DataTableCore.tsx
+++ b/Source/DataTables/DataTableCore.tsx
@@ -17,6 +17,7 @@ import type { DataTableSelectionChangeEvent } from './DataTableSelectionChangeEv
 import {
     DataTableFilterMatchMode,
     type DataTableFilterConstraint,
+    type DataTableFilterEntry,
     type DataTableFilterMeta,
 } from './DataTableFilterMeta';
 import { resolveDataTableFilterMatcher } from './DataTableFilterMatcherRegistry';
@@ -115,6 +116,11 @@ const dateNumber = (value: unknown) => {
     return Number.isNaN(date.getTime()) ? undefined : date.setHours(0, 0, 0, 0);
 };
 
+const firstConstraint = (
+    entry: DataTableFilterEntry | undefined,
+): DataTableFilterConstraint | undefined =>
+    entry && 'constraints' in entry ? entry.constraints[0] : entry;
+
 const builtInMatches = (
     value: unknown,
     constraint: DataTableFilterConstraint,
@@ -171,6 +177,18 @@ const builtInMatches = (
     }
 };
 
+const matchesFilterEntry = (value: unknown, entry: DataTableFilterEntry) => {
+    if (!('constraints' in entry)) return builtInMatches(value, entry);
+    if (entry.constraints.length === 0) return true;
+
+    const matches = entry.constraints.map((constraint) =>
+        builtInMatches(value, constraint),
+    );
+    return entry.operator?.toLowerCase() === 'or'
+        ? matches.some(Boolean)
+        : matches.every(Boolean);
+};
+
 const compareValues = (left: unknown, right: unknown): number => {
     if (typeof left === 'number' && typeof right === 'number') return left - right;
     if (left instanceof Date && right instanceof Date)
@@ -218,8 +236,8 @@ export const DataTableCore = <TData extends object>({
         const term = globalFilter.trim().toLocaleLowerCase();
         const rows = data.filter((row) => {
             const rowValues = row as Record<string, unknown>;
-            const matchesColumns = Object.entries(filters).every(([field, constraint]) =>
-                builtInMatches(valueAtPath(rowValues, field), constraint),
+            const matchesColumns = Object.entries(filters).every(([field, entry]) =>
+                matchesFilterEntry(valueAtPath(rowValues, field), entry),
             );
             if (!matchesColumns) return false;
             if (!term || !globalFilterFields?.length) return true;
@@ -402,7 +420,9 @@ export const DataTableCore = <TData extends object>({
                                                         column.props.filterElement
                                                     }
                                                     labels={column.props.filterLabels}
-                                                    constraint={filters[field]}
+                                                    constraint={firstConstraint(
+                                                        filters[field],
+                                                    )}
                                                     onApply={(constraint) =>
                                                         updateFilter(field, constraint)
                                                     }
diff --git a/Source/DataTables/DataTableFilterMeta.ts b/Source/DataTables/DataTableFilterMeta.ts
index 267f08fd..cd64e7d8 100644
--- a/Source/DataTables/DataTableFilterMeta.ts
+++ b/Source/DataTables/DataTableFilterMeta.ts
@@ -57,5 +57,17 @@ export interface DataTableFilterConstraint {
     matchMode?: DataTableFilterMatchMode;
 }
 
+/** Legacy multi-constraint entry accepted during the Components 3 migration. */
+export interface DataTableOperatorFilterConstraint {
+    /** Combines constraints with `or`; every other value uses `and` semantics. */
+    operator?: string;
+    /** Constraints applied to the same field value. */
+    constraints: DataTableFilterConstraint[];
+}
+
+/** One simple or legacy operator-based filter entry. */
+export type DataTableFilterEntry =
+    DataTableFilterConstraint | DataTableOperatorFilterConstraint;
+
 /** Filter state for a Cratis data table, keyed by field name. */
-export type DataTableFilterMeta = Record<string, DataTableFilterConstraint>;
+export type DataTableFilterMeta = Record<string, DataTableFilterEntry>;
diff --git a/Source/DataTables/DataTableForObservableQuery.tsx b/Source/DataTables/DataTableForObservableQuery.tsx
index 77b7b878..a4f87b6d 100644
--- a/Source/DataTables/DataTableForObservableQuery.tsx
+++ b/Source/DataTables/DataTableForObservableQuery.tsx
@@ -7,7 +7,11 @@ import { type IObservableQueryFor, Paging } from '@cratis/arc/queries';
 import { useObservableQueryWithPaging } from '@cratis/arc.react/queries';
 import { type ReactNode, useState, useRef, useEffect } from 'react';
 import { DataTableCore } from './DataTableCore';
-import { TablePaginator, type TablePaginatorProps } from './TablePaginator';
+import {
+    TablePaginator,
+    type TablePaginatorParts,
+    type TablePaginatorProps,
+} from './TablePaginator';
 import type { DataTableFilterMeta } from './DataTableFilterMeta';
 import type { DataTableSelectionChangeEvent } from './DataTableSelectionChangeEvent';
 
@@ -94,6 +98,12 @@ export interface DataTableForObservableQueryProps<
     /** Extra CSS class name forwarded to the paginator. */
     paginatorClassName?: string;
 
+    /** Cratis-owned attributes for paginator parts. */
+    paginatorPt?: TablePaginatorParts;
+
+    /** Retained for source compatibility; Cratis parts always merge. */
+    paginatorPtOptions?: object;
+
     /** Accessible names for the paginator controls. Override any to localize. */
     paginatorAriaLabels?: TablePaginatorProps['ariaLabels'];
 }
@@ -259,8 +269,9 @@ export const DataTableForObservableQuery = <
                         totalItems={totalItems}
                         pageSize={paging.pageSize}
                         className={props.paginatorClassName}
-
                         ariaLabels={props.paginatorAriaLabels}
+                        pt={props.paginatorPt}
+                        ptOptions={props.paginatorPtOptions}
                     />
                 </div>
             )}
diff --git a/Source/DataTables/DataTableForQuery.tsx b/Source/DataTables/DataTableForQuery.tsx
index b743de3b..e4ec7f19 100644
--- a/Source/DataTables/DataTableForQuery.tsx
+++ b/Source/DataTables/DataTableForQuery.tsx
@@ -7,7 +7,11 @@ import { type IQueryFor, Paging } from '@cratis/arc/queries';
 import { useQueryWithPaging } from '@cratis/arc.react/queries';
 import type { ReactNode } from 'react';
 import { DataTableCore } from './DataTableCore';
-import { TablePaginator, type TablePaginatorProps } from './TablePaginator';
+import {
+    TablePaginator,
+    type TablePaginatorParts,
+    type TablePaginatorProps,
+} from './TablePaginator';
 import type { DataTableFilterMeta } from './DataTableFilterMeta';
 import type { DataTableSelectionChangeEvent } from './DataTableSelectionChangeEvent';
 
@@ -92,6 +96,12 @@ export interface DataTableForQueryProps<
     /** Extra CSS class name forwarded to the paginator. */
     paginatorClassName?: string;
 
+    /** Cratis-owned attributes for paginator parts. */
+    paginatorPt?: TablePaginatorParts;
+
+    /** Retained for source compatibility; Cratis parts always merge. */
+    paginatorPtOptions?: object;
+
     /** Accessible names for the paginator controls. Override any to localize. */
     paginatorAriaLabels?: TablePaginatorProps['ariaLabels'];
 }
@@ -208,6 +218,8 @@ export const DataTableForQuery = <
                         pageSize={paging.pageSize}
                         className={props.paginatorClassName}
                         ariaLabels={props.paginatorAriaLabels}
+                        pt={props.paginatorPt}
+                        ptOptions={props.paginatorPtOptions}
                     />
                 </div>
             )}
diff --git a/Source/DataTables/TablePaginator.tsx b/Source/DataTables/TablePaginator.tsx
index f11a4a01..2a1b54d2 100644
--- a/Source/DataTables/TablePaginator.tsx
+++ b/Source/DataTables/TablePaginator.tsx
@@ -1,10 +1,22 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { Button } from '../Common/Button';
+import type { HTMLAttributes } from 'react';
+import { Button, type ButtonParts } from '../Common/Button';
 import { useCratisComponentsConfig } from '../Common/CratisComponentsProvider';
 import { paginatorRange } from './paginatorRange';
 
+/** Stable Cratis-owned paginator parts. */
+export interface TablePaginatorParts {
+    root?: HTMLAttributes<HTMLDivElement>;
+    range?: HTMLAttributes<HTMLSpanElement>;
+    info?: HTMLAttributes<HTMLSpanElement>;
+    first?: ButtonParts;
+    previous?: ButtonParts;
+    next?: ButtonParts;
+    last?: ButtonParts;
+}
+
 /** Props for {@link TablePaginator}. */
 export interface TablePaginatorProps {
     /** The current page, zero-based. */
@@ -27,6 +39,10 @@ export interface TablePaginatorProps {
     };
     /** Extra class name for the paginator container. */
     className?: string;
+    /** Cratis-owned paginator part attributes. */
+    pt?: TablePaginatorParts;
+    /** Retained for source compatibility; Cratis parts always merge. */
+    ptOptions?: object;
 }
 
 /**
@@ -43,6 +59,7 @@ export const TablePaginator = ({
     pageSize,
     ariaLabels,
     className,
+    pt,
 }: TablePaginatorProps) => {
     const { messages } = useCratisComponentsConfig();
     const paginatorMessages = messages?.paginator;
@@ -60,22 +77,31 @@ export const TablePaginator = ({
 
     return (
         <div
+            {...pt?.root}
             role='navigation'
             aria-label={labels.navigation}
-            className={
-                className
-                    ? `cratis-table-paginator ${className}`
-                    : 'cratis-table-paginator'
-            }
+            data-cratis-part='root'
+            className={['cratis-table-paginator', pt?.root?.className, className]
+                .filter(Boolean)
+                .join(' ')}
         >
             {rangeReport && (
-                <span className='cratis-table-paginator-range'>{rangeReport}</span>
+                <span
+                    {...pt?.range}
+                    className={['cratis-table-paginator-range', pt?.range?.className]
+                        .filter(Boolean)
+                        .join(' ')}
+                    data-cratis-part='range'
+                >
+                    {rangeReport}
+                </span>
             )}
             <Button
                 text
                 disabled={isFirst}
                 onClick={() => onPageChange(0)}
                 aria-label={labels.first}
+                pt={pt?.first}
             >
                 <span aria-hidden='true'>«</span>
             </Button>
@@ -84,10 +110,17 @@ export const TablePaginator = ({
                 disabled={isFirst}
                 onClick={() => onPageChange(page - 1)}
                 aria-label={labels.previous}
+                pt={pt?.previous}
             >
                 <span aria-hidden='true'>‹</span>
             </Button>
-            <span className='cratis-table-paginator-info'>
+            <span
+                {...pt?.info}
+                className={['cratis-table-paginator-info', pt?.info?.className]
+                    .filter(Boolean)
+                    .join(' ')}
+                data-cratis-part='info'
+            >
                 {page + 1} / {Math.max(pageCount, 1)}
             </span>
             <Button
@@ -95,6 +128,7 @@ export const TablePaginator = ({
                 disabled={isLast}
                 onClick={() => onPageChange(page + 1)}
                 aria-label={labels.next}
+                pt={pt?.next}
             >
                 <span aria-hidden='true'>›</span>
             </Button>
@@ -103,6 +137,7 @@ export const TablePaginator = ({
                 disabled={isLast}
                 onClick={() => onPageChange(pageCount - 1)}
                 aria-label={labels.last}
+                pt={pt?.last}
             >
                 <span aria-hidden='true'>»</span>
             </Button>
diff --git a/Source/DataTables/for_DataTableFilterMeta/when_using_builtin_match_modes.ts b/Source/DataTables/for_DataTableFilterMeta/when_using_builtin_match_modes.ts
index 6fb8bfaa..549e9a05 100644
--- a/Source/DataTables/for_DataTableFilterMeta/when_using_builtin_match_modes.ts
+++ b/Source/DataTables/for_DataTableFilterMeta/when_using_builtin_match_modes.ts
@@ -20,12 +20,20 @@ describe('when using built-in match modes', () => {
         },
     };
 
+    const matchModeFor = (field: string) => {
+        const entry = filters[field];
+        if ('constraints' in entry) {
+            throw new Error(`${field} unexpectedly uses operator constraints.`);
+        }
+        return entry.matchMode;
+    };
+
     it('should provide the adapter-independent runtime value', () => {
-        expect(filters.name.matchMode).to.equal('contains');
+        expect(matchModeFor('name')).to.equal('contains');
     });
 
     it('should retain source compatibility with existing custom matcher names', () => {
-        expect(filters.legacyCustomField.matchMode).to.equal(
+        expect(matchModeFor('legacyCustomField')).to.equal(
             'matcherRegisteredByTheConsumer',
         );
     });
diff --git a/Source/DataTables/for_DataTableForQuery/when_using_legacy_operator_filters.tsx b/Source/DataTables/for_DataTableForQuery/when_using_legacy_operator_filters.tsx
new file mode 100644
index 00000000..40e812f0
--- /dev/null
+++ b/Source/DataTables/for_DataTableForQuery/when_using_legacy_operator_filters.tsx
@@ -0,0 +1,72 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { expect } from 'chai';
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, it, vi } from 'vitest';
+import { CratisComponentsProvider } from '../../Common/CratisComponentsProvider';
+import { Column } from '../Column';
+import { DataTableFilterMatchMode } from '../DataTableFilterMeta';
+import { DataTableForQuery } from '../DataTableForQuery';
+import { type Product, ProductsQuery, resetQueryResult } from './given/a_query_result';
+
+vi.mock('@cratis/arc.react/queries', async () => {
+    const { arcQueryHooks } = await import('./given/a_query_result');
+    return arcQueryHooks();
+});
+
+describe('when using legacy operator filters', () => {
+    let container: HTMLDivElement;
+    let root: Root;
+
+    beforeEach(async () => {
+        // SAFETY: React's test-environment flag is an intentionally undocumented global absent from the DOM typings.
+        (
+            globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
+        ).IS_REACT_ACT_ENVIRONMENT = true;
+        container = document.createElement('div');
+        document.body.append(container);
+        root = createRoot(container);
+
+        await act(async () => {
+            root.render(
+                <CratisComponentsProvider>
+                    <DataTableForQuery<ProductsQuery, Product, object>
+                        query={ProductsQuery}
+                        emptyMessage='No products'
+                        defaultFilters={{
+                            name: {
+                                operator: 'or',
+                                constraints: [
+                                    {
+                                        value: 'Product 1',
+                                        matchMode: DataTableFilterMatchMode.StartsWith,
+                                    },
+                                    {
+                                        value: 'Product 2',
+                                        matchMode: DataTableFilterMatchMode.Equals,
+                                    },
+                                ],
+                            },
+                        }}
+                    >
+                        <Column<Product> field='name' header='Name' />
+                    </DataTableForQuery>
+                </CratisComponentsProvider>,
+            );
+        });
+    });
+
+    afterEach(async () => {
+        await act(async () => root.unmount());
+        container.remove();
+        resetQueryResult();
+    });
+
+    it('should apply every constraint using the configured operator', () => {
+        expect(container.querySelectorAll('tbody tr')).to.have.lengthOf(12);
+    });
+});
diff --git a/Source/DataTables/for_TablePaginator/when_using_configured_locale.tsx b/Source/DataTables/for_TablePaginator/when_using_configured_locale.tsx
index 56719971..c909b3ae 100644
--- a/Source/DataTables/for_TablePaginator/when_using_configured_locale.tsx
+++ b/Source/DataTables/for_TablePaginator/when_using_configured_locale.tsx
@@ -15,6 +15,7 @@ describe('when using the configured locale', () => {
     let root: Root;
     let navigation: HTMLElement;
     let buttonLabels: Array<string | null>;
+    let firstButton: HTMLButtonElement;
 
     beforeEach(async () => {
         // SAFETY: React's test-environment flag is an intentionally undocumented global absent from the DOM typings.
@@ -46,6 +47,13 @@ describe('when using the configured locale', () => {
                         pageCount={3}
                         onPageChange={() => undefined}
                         ariaLabels={{ next: 'Explicit next' }}
+                        pt={{
+                            root: { className: 'product-paginator' },
+                            info: { className: 'product-paginator-info' },
+                            first: {
+                                root: { className: 'product-paginator-button' },
+                            },
+                        }}
                     />
                 </CratisComponentsProvider>,
             );
@@ -58,9 +66,9 @@ describe('when using the configured locale', () => {
             throw new Error('TablePaginator did not render its navigation.');
         }
         navigation = renderedNavigation;
-        buttonLabels = Array.from(navigation.querySelectorAll('button'), (button) =>
-            button.getAttribute('aria-label'),
-        );
+        const buttons = Array.from(navigation.querySelectorAll('button'));
+        buttonLabels = buttons.map((button) => button.getAttribute('aria-label'));
+        [firstButton] = buttons;
     });
 
     afterEach(async () => {
@@ -80,4 +88,14 @@ describe('when using the configured locale', () => {
             'Siste side',
         ]);
     });
+
+    it('should apply Cratis-owned paginator parts', () => {
+        expect(navigation.classList.contains('product-paginator')).to.equal(true);
+        expect(
+            navigation
+                .querySelector('[data-cratis-part="info"]')
+                ?.classList.contains('product-paginator-info'),
+        ).to.equal(true);
+        expect(firstButton.classList.contains('product-paginator-button')).to.equal(true);
+    });
 });
diff --git a/Source/DataTables/index.ts b/Source/DataTables/index.ts
index 12df4432..e9be8c05 100644
--- a/Source/DataTables/index.ts
+++ b/Source/DataTables/index.ts
@@ -6,6 +6,7 @@ export * from './DataTableForQuery';
 export * from './DataTableForObservableQuery';
 export * from './Column';
 export * from './ColumnFilterMenu';
+export * from './TablePaginator';
 export * from './DataTableSelectionChangeEvent';
 export * from './DataTableFilterMeta';
 export {
diff --git a/Source/Dropdown/Dropdown.tsx b/Source/Dropdown/Dropdown.tsx
index d914940c..eb8036c9 100644
--- a/Source/Dropdown/Dropdown.tsx
+++ b/Source/Dropdown/Dropdown.tsx
@@ -47,6 +47,10 @@ type DropdownOptionValue =
 /** Stable Cratis-owned parts for styling a {@link Dropdown}. */
 export interface DropdownParts {
     root?: HTMLAttributes<HTMLElement>;
+    /** Legacy visible-control part, mapped onto the current trigger/filter input. */
+    input?: HTMLAttributes<HTMLElement> & { id?: string };
+    /** Legacy select-root part retained for custom product wrappers. */
+    select?: HTMLAttributes<HTMLElement>;
     trigger?: DropdownTriggerAttributes;
     value?: HTMLAttributes<HTMLSpanElement>;
     clear?: ButtonHTMLAttributes<HTMLButtonElement>;
@@ -74,11 +78,20 @@ export interface DropdownProps<T = unknown> {
     className?: string;
     style?: CSSProperties;
     id?: string;
+    /** Legacy identity alias mapped to {@link id}. */
+    inputId?: string;
+    /** Legacy popup class alias mapped to the `popover` part. */
+    panelClassName?: string;
     name?: string;
     tabIndex?: number;
     'aria-label'?: string;
     'aria-labelledby'?: string;
     'aria-describedby'?: string;
+    /** Camel-case aliases retained for existing product wrappers. */
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+    ariaDescribedBy?: string;
+    ariaInvalid?: boolean;
     onChange?: (event: DropdownChangeEvent<T>) => void;
     onBlur?: FocusEventHandler<HTMLElement>;
     /** Cratis-owned per-part attributes. */
@@ -160,11 +173,17 @@ export const Dropdown = <T = unknown,>({
     className,
     style,
     id,
+    inputId,
+    panelClassName,
     name,
     tabIndex,
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledby,
     'aria-describedby': ariaDescribedby,
+    ariaLabel: ariaLabelAlias,
+    ariaLabelledBy,
+    ariaDescribedBy,
+    ariaInvalid,
     onChange,
     onBlur,
     pt,
@@ -174,13 +193,38 @@ export const Dropdown = <T = unknown,>({
         Object.is(option.value, value),
     );
     const selectedKey = selectedOption?.key ?? null;
-    const rootClassName = classNames('cratis-dropdown', pt?.root?.className, className);
-    const triggerId = id ?? pt?.trigger?.id;
+    const effectiveAriaLabel = ariaLabel ?? ariaLabelAlias ?? pt?.input?.['aria-label'];
+    const effectiveAriaLabelledby =
+        ariaLabelledby ?? ariaLabelledBy ?? pt?.input?.['aria-labelledby'];
+    const effectiveAriaDescribedby =
+        ariaDescribedby ?? ariaDescribedBy ?? pt?.input?.['aria-describedby'];
+    const inputAriaInvalid = pt?.input?.['aria-invalid'];
+    const effectiveInvalid =
+        invalid ??
+        ariaInvalid ??
+        (inputAriaInvalid === true ||
+            inputAriaInvalid === 'true' ||
+            inputAriaInvalid === 'grammar' ||
+            inputAriaInvalid === 'spelling');
+    const rootClassName = classNames(
+        'cratis-dropdown',
+        pt?.root?.className,
+        pt?.select?.className,
+        className,
+    );
+    const triggerId = id ?? inputId ?? pt?.trigger?.id ?? pt?.input?.id;
 
     const selectOption = (key: Key | null) => {
         const option = resolvedOptions.find((candidate) => candidate.key === String(key));
         onChange?.({ value: (option?.value ?? null) as T });
     };
+    // React Aria's Select trigger context does not forward aria-invalid from its Button child.
+    // Keep the Cratis validation contract on the actual focusable control after context props merge.
+    const applyTriggerInvalidState = (element: HTMLButtonElement | null) => {
+        if (!element) return;
+        if (effectiveInvalid) element.setAttribute('aria-invalid', 'true');
+        else element.removeAttribute('aria-invalid');
+    };
 
     if (multiple) {
         const selectedValues = Array.isArray(value) ? value : [];
@@ -195,25 +239,26 @@ export const Dropdown = <T = unknown,>({
                 {...pt?.root}
                 className={rootClassName}
                 data-cratis-part='root'
-                data-invalid={invalid || undefined}
+                data-invalid={effectiveInvalid || undefined}
                 data-disabled={disabled || undefined}
-                style={{ ...pt?.root?.style, ...style }}
+                style={{ ...pt?.root?.style, ...pt?.select?.style, ...style }}
                 onBlur={onBlur}
             >
                 <select
                     {...pt?.multiple}
-                    id={id ?? pt?.multiple?.id}
+                    id={triggerId ?? pt?.multiple?.id}
                     name={name}
                     multiple
                     disabled={disabled}
                     value={selectedKeys}
                     tabIndex={tabIndex}
-                    aria-label={ariaLabel}
-                    aria-labelledby={ariaLabelledby}
-                    aria-describedby={ariaDescribedby}
-                    aria-invalid={invalid || undefined}
+                    aria-label={effectiveAriaLabel}
+                    aria-labelledby={effectiveAriaLabelledby}
+                    aria-describedby={effectiveAriaDescribedby}
+                    aria-invalid={effectiveInvalid || undefined}
                     className={classNames(
                         'cratis-dropdown__multiple',
+                        pt?.input?.className,
                         pt?.multiple?.className,
                     )}
                     data-cratis-part='multiple'
@@ -248,19 +293,20 @@ export const Dropdown = <T = unknown,>({
                 {...pt?.root}
                 className={rootClassName}
                 data-cratis-part='root'
-                data-invalid={invalid || undefined}
+                data-invalid={effectiveInvalid || undefined}
                 data-disabled={disabled || undefined}
-                style={{ ...pt?.root?.style, ...style }}
+                style={{ ...pt?.root?.style, ...pt?.select?.style, ...style }}
                 onBlur={onBlur}
             >
                 <ComboBox
-                    selectedKey={selectedKey}
-                    onSelectionChange={selectOption}
+                    value={selectedKey}
+                    onChange={selectOption}
                     isDisabled={disabled}
+                    isInvalid={effectiveInvalid}
                     name={name}
-                    aria-label={ariaLabel}
-                    aria-labelledby={ariaLabelledby}
-                    aria-describedby={ariaDescribedby}
+                    aria-label={effectiveAriaLabel}
+                    aria-labelledby={effectiveAriaLabelledby}
+                    aria-describedby={effectiveAriaDescribedby}
                     allowsEmptyCollection
                     className='cratis-dropdown__combobox'
                 >
@@ -269,11 +315,13 @@ export const Dropdown = <T = unknown,>({
                         id={triggerId}
                         placeholder={filterPlaceholder ?? placeholder}
                         tabIndex={tabIndex}
-                        aria-invalid={invalid || undefined}
+                        aria-invalid={effectiveInvalid || undefined}
                         className={classNames(
                             'cratis-dropdown__filter',
+                            pt?.input?.className,
                             pt?.filter?.className,
                         )}
+                        style={{ ...pt?.input?.style, ...pt?.filter?.style }}
                         data-cratis-part='filter'
                     />
                     <ComboBoxButton
@@ -283,7 +331,11 @@ export const Dropdown = <T = unknown,>({
                             pt?.trigger?.className,
                         )}
                         data-cratis-part='trigger'
-                        aria-label={pt?.trigger?.['aria-label'] ?? 'Show options'}
+                        aria-label={
+                            pt?.trigger?.['aria-label'] ??
+                            pt?.select?.['aria-label'] ??
+                            'Show options'
+                        }
                     >
                         <span aria-hidden='true'>⌄</span>
                     </ComboBoxButton>
@@ -307,6 +359,7 @@ export const Dropdown = <T = unknown,>({
                         className={classNames(
                             'cratis-dropdown__popover',
                             pt?.popover?.className,
+                            panelClassName,
                         )}
                         style={{ zIndex: 1200, ...pt?.popover?.style }}
                         data-cratis-part='popover'
@@ -345,30 +398,34 @@ export const Dropdown = <T = unknown,>({
             {...pt?.root}
             className={rootClassName}
             data-cratis-part='root'
-            data-invalid={invalid || undefined}
+            data-invalid={effectiveInvalid || undefined}
             data-disabled={disabled || undefined}
-            style={{ ...pt?.root?.style, ...style }}
+            style={{ ...pt?.root?.style, ...pt?.select?.style, ...style }}
             onBlur={onBlur}
         >
             <AriaSelect
-                selectedKey={selectedKey}
-                onSelectionChange={selectOption}
+                value={selectedKey}
+                onChange={selectOption}
                 isDisabled={disabled}
+                isInvalid={effectiveInvalid}
                 name={name}
-                aria-label={ariaLabel}
-                aria-labelledby={ariaLabelledby}
-                aria-describedby={ariaDescribedby}
+                aria-label={effectiveAriaLabel}
+                aria-labelledby={effectiveAriaLabelledby}
+                aria-describedby={effectiveAriaDescribedby}
                 className='cratis-dropdown__select'
             >
                 <AriaButton
                     {...pt?.trigger}
+                    ref={applyTriggerInvalidState}
                     id={triggerId}
                     excludeFromTabOrder={tabIndex === -1}
-                    aria-invalid={invalid || undefined}
+                    aria-invalid={effectiveInvalid || undefined}
                     className={classNames(
                         'cratis-dropdown__trigger',
+                        pt?.input?.className,
                         pt?.trigger?.className,
                     )}
+                    style={{ ...pt?.input?.style, ...pt?.trigger?.style }}
                     data-cratis-part='trigger'
                 >
                     <SelectValue
@@ -413,6 +470,7 @@ export const Dropdown = <T = unknown,>({
                     className={classNames(
                         'cratis-dropdown__popover',
                         pt?.popover?.className,
+                        panelClassName,
                     )}
                     style={{ zIndex: 1200, ...pt?.popover?.style }}
                     data-cratis-part='popover'
diff --git a/Source/Dropdown/for_Dropdown/when_opened_inside_a_dialog.ts b/Source/Dropdown/for_Dropdown/when_opened_inside_a_dialog.ts
index 4c240a41..ada3913d 100644
--- a/Source/Dropdown/for_Dropdown/when_opened_inside_a_dialog.ts
+++ b/Source/Dropdown/for_Dropdown/when_opened_inside_a_dialog.ts
@@ -6,6 +6,7 @@ import { expect } from 'chai';
 import React from 'react';
 import { act } from 'react';
 import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, it } from 'vitest';
 import { Dialog } from '../../Dialogs/Dialog';
 import { Dropdown } from '../Dropdown';
 import { CratisComponentsProvider } from '../../Common/CratisComponentsProvider';
@@ -22,6 +23,7 @@ describe('when a dropdown is opened inside a dialog', () => {
     let panelZIndex: number;
     let panelIsInsideTheDialog: boolean;
     let panelIsPortaledToTheBody: boolean;
+    let panelUsesTheLegacyClassName: boolean;
 
     beforeEach(async () => {
         // SAFETY: React's test-environment flag is an intentionally undocumented global absent from DOM typings.
@@ -54,6 +56,7 @@ describe('when a dropdown is opened inside a dialog', () => {
                             optionLabel: 'name',
                             optionValue: 'id',
                             'aria-label': 'Pick value',
+                            panelClassName: 'product-dropdown-panel',
                         }),
                     }),
                 }),
@@ -91,6 +94,7 @@ describe('when a dropdown is opened inside a dialog', () => {
         panelIsInsideTheDialog = dialogPopup.contains(panel);
         panelIsPortaledToTheBody =
             document.body.contains(panel) && !container.contains(panel);
+        panelUsesTheLegacyClassName = panel.classList.contains('product-dropdown-panel');
     });
 
     afterEach(async () => {
@@ -111,4 +115,8 @@ describe('when a dropdown is opened inside a dialog', () => {
     it('should stack the panel above the dialog it was opened from', () => {
         expect(panelZIndex).to.be.greaterThan(dialogPositionerZIndex);
     });
+
+    it('should map the legacy panel class to the Cratis popover', () => {
+        expect(panelUsesTheLegacyClassName).to.equal(true);
+    });
 });
diff --git a/Source/Dropdown/for_Dropdown/when_options_carry_label_and_value.ts b/Source/Dropdown/for_Dropdown/when_options_carry_label_and_value.ts
index ffa873cc..c91b8b85 100644
--- a/Source/Dropdown/for_Dropdown/when_options_carry_label_and_value.ts
+++ b/Source/Dropdown/for_Dropdown/when_options_carry_label_and_value.ts
@@ -2,11 +2,13 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 // @vitest-environment jsdom
 
+import { expect } from 'chai';
 import React from 'react';
 import { act } from 'react';
 import { createRoot, type Root } from 'react-dom/client';
-import { Dropdown } from '../Dropdown';
+import { afterEach, beforeEach, describe, it } from 'vitest';
 import { CratisComponentsProvider } from '../../Common/CratisComponentsProvider';
+import { Dropdown } from '../Dropdown';
 
 /**
  * The Cratis convention displays `option.label` and compares `option.value` when no
@@ -58,6 +60,6 @@ describe('when options carry label and value', () => {
     });
 
     it('should show the label of the selected option', () => {
-        triggerText.should.equal('New project');
+        expect(triggerText).to.equal('New project');
     });
 });
diff --git a/Source/Dropdown/for_Dropdown/when_using_migration_aliases.tsx b/Source/Dropdown/for_Dropdown/when_using_migration_aliases.tsx
new file mode 100644
index 00000000..dedea3a9
--- /dev/null
+++ b/Source/Dropdown/for_Dropdown/when_using_migration_aliases.tsx
@@ -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.
+
+// @vitest-environment jsdom
+
+import { expect } from 'chai';
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, it } from 'vitest';
+import { CratisComponentsProvider } from '../../Common/CratisComponentsProvider';
+import { Dropdown } from '../Dropdown';
+
+describe('when using migration aliases', () => {
+    let container: HTMLDivElement;
+    let root: Root;
+    let dropdownRoot: HTMLElement;
+    let trigger: HTMLButtonElement;
+
+    beforeEach(async () => {
+        // SAFETY: React's test-environment flag is an intentionally undocumented global absent from the DOM typings.
+        (
+            globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
+        ).IS_REACT_ACT_ENVIRONMENT = true;
+        container = document.createElement('div');
+        document.body.append(container);
+        root = createRoot(container);
+
+        await act(async () => {
+            root.render(
+                <CratisComponentsProvider>
+                    <span id='role-label'>Role</span>
+                    <span id='role-description'>Choose a role</span>
+                    <Dropdown
+                        inputId='legacy-role'
+                        value='developer'
+                        options={[{ label: 'Developer', value: 'developer' }]}
+                        ariaLabel='Choose role'
+                        ariaLabelledBy='role-label'
+                        ariaDescribedBy='role-description'
+                        ariaInvalid
+                        pt={{
+                            input: { className: 'product-dropdown-input' },
+                            select: { className: 'product-dropdown-select' },
+                        }}
+                    />
+                </CratisComponentsProvider>,
+            );
+        });
+
+        const renderedRoot = container.querySelector<HTMLElement>(
+            '.cratis-dropdown[data-cratis-part="root"]',
+        );
+        const renderedTrigger = container.querySelector<HTMLButtonElement>(
+            '[data-cratis-part="trigger"]',
+        );
+        if (!renderedRoot || !renderedTrigger) {
+            throw new Error('Dropdown did not render its root and trigger.');
+        }
+        dropdownRoot = renderedRoot;
+        trigger = renderedTrigger;
+    });
+
+    afterEach(async () => {
+        await act(async () => root.unmount());
+        container.remove();
+    });
+
+    it('should map the legacy identity and aria aliases to the control', () => {
+        expect(trigger.id).to.equal('legacy-role');
+        expect(trigger.getAttribute('aria-label')).to.equal('Choose role');
+        expect(trigger.getAttribute('aria-labelledby')?.split(' ')).to.include(
+            'role-label',
+        );
+        expect(trigger.getAttribute('aria-describedby')).to.equal('role-description');
+        expect(dropdownRoot.dataset.invalid).to.equal('true');
+        expect(trigger.getAttribute('aria-invalid')).to.equal('true');
+    });
+
+    it('should map legacy input and select classes to stable Cratis elements', () => {
+        expect(trigger.classList.contains('product-dropdown-input')).to.equal(true);
+        expect(dropdownRoot.classList.contains('product-dropdown-select')).to.equal(true);
+    });
+});
diff --git a/Source/MIGRATION.md b/Source/MIGRATION.md
index 485cff5f..eb02c8ea 100644
--- a/Source/MIGRATION.md
+++ b/Source/MIGRATION.md
@@ -157,6 +157,55 @@ Every meaningful element also carries `data-cratis-part`. Interactive states use
 
 See [Stable component parts](Styling/pass-through.md) for the complete contract.
 
+### Migrate a deeply customized product
+
+Keep the product's own tokens, Tailwind utilities, dark/high-contrast selectors, and accessibility preferences. Remove the renderer preset that translated those values into a third-party token system, then map the product values directly onto `--cratis-*`.
+
+For a custom dialog layer, change renderer part types to Cratis types and rename slots:
+
+```ts
+import type { DialogParts } from '@cratis/components/Dialogs';
+import type { StepperParts } from '@cratis/components/CommandDialog';
+
+export const productDialogParts: DialogParts = {
+    backdrop: { className: 'product-dialog-backdrop' },
+    root: { className: 'product-dialog' },
+    title: { className: 'product-dialog-title' },
+    close: { className: 'product-dialog-close' },
+    content: { className: 'product-dialog-content' },
+    footer: { className: 'product-dialog-footer' },
+};
+
+export const productStepperParts: StepperParts = {
+    root: { className: 'product-stepper' },
+    list: { className: 'product-stepper-list' },
+    header: { className: 'product-stepper-header' },
+    number: { className: 'product-stepper-number' },
+    title: { className: 'product-stepper-title' },
+    panels: { className: 'product-stepper-panels' },
+    panel: { className: 'product-stepper-panel' },
+};
+```
+
+Paginator callbacks that formerly returned classes from renderer context must become static Cratis parts plus CSS state selectors:
+
+```ts
+import type { TablePaginatorParts } from '@cratis/components/DataTables';
+
+export const productPaginatorParts: TablePaginatorParts = {
+    root: { className: 'product-paginator' },
+    first: { root: { className: 'product-paginator-button' } },
+    previous: { root: { className: 'product-paginator-button' } },
+    next: { root: { className: 'product-paginator-button' } },
+    last: { root: { className: 'product-paginator-button' } },
+    info: { className: 'product-paginator-info' },
+};
+```
+
+Use `:disabled`, `:focus-visible`, and the documented `data-cratis-*` states in CSS instead of renderer callback context. The numbered-page renderer is gone; the paginator reports the current page and provides first/previous/next/last actions.
+
+`Dropdown.inputId` and `Dropdown.panelClassName` remain migration aliases for `id` and `pt.popover.className`, but new code should use the current names.
+
 ## Update DatePicker integration
 
 `DatePickerInput` still accepts and emits `Date | null`, but its internal value uses `@internationalized/date`. Formatting now follows the active locale and calendar rather than a PrimeReact mask.
@@ -181,7 +230,8 @@ Multiple selection remains available through the native multiple-select path. Pr
 
 - Sorting and filtering apply to the currently loaded page.
 - Complete-result filtering belongs in query arguments and runs on the server before paging.
-- `clientFiltering` is removed; it was a deprecated no-op in Components 3.
+- `clientFiltering` remains temporarily accepted as a deprecated no-op so staged source migrations compile. Remove it: filtering is always scoped to the loaded page, and complete-result filtering belongs on the server before paging.
+- Legacy `{ operator, constraints }` filter entries remain accepted. `operator: 'or'` matches any constraint; all other values match every constraint.
 - `Column` remains the declarative column marker.
 - Table styling uses `DataTableParts` and `data-cratis-part`.
 - Server totals remain authoritative for the paginator.
diff --git a/Source/README.md b/Source/README.md
index 9c21e190..58d5a6f0 100644
--- a/Source/README.md
+++ b/Source/README.md
@@ -182,7 +182,7 @@ Do not target React Aria classes or internal DOM structure.
 
 ## Components 3 migration
 
-Components 4 removes the mandatory PrimeReact 11 foundation. Follow [MIGRATION.md](./MIGRATION.md) for dependency removal, provider changes, product token mapping, stable part names, DatePicker changes, table behavior, notifications, and direct Prime import replacements.
+Components 4 removes the mandatory PrimeReact 11 foundation. Follow the published [Components 3 to 4 migration guide](https://cratis.io/components/migration/) for dependency removal, provider changes, product token mapping, stable part names, DatePicker changes, table behavior, notifications, and direct Prime import replacements.
 
 The old `@cratis/components/styled`, `styledMode`, `CratisPreset`, and `primeReactStyles` renderer exports are removed. Move styling to tokens and stable parts before upgrading.
 
diff --git a/Source/theme.css b/Source/theme.css
index b4e3baf4..acabbdc8 100644
--- a/Source/theme.css
+++ b/Source/theme.css
@@ -2,6 +2,7 @@
 /* Licensed under the MIT license. See LICENSE file in the project root for full license information. */
 
 /* Optional Cratis baseline values. Component structure lives in styles.css. */
+:root,
 .cratis-theme {
     color: var(--cratis-text-color);
     background-color: var(--cratis-surface-ground);
@@ -55,6 +56,7 @@
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
 }
 
+:root.cratis-dark,
 .cratis-dark .cratis-theme,
 .cratis-theme.cratis-dark {
     --cratis-primary-color: #60a5fa;
@@ -79,12 +81,14 @@
 }
 
 @media (prefers-color-scheme: dark) {
+    :root:not(.cratis-light),
     .cratis-theme:not(.cratis-light) {
         color-scheme: dark;
     }
 }
 
 @media (forced-colors: active) {
+    :root,
     .cratis-theme {
         --cratis-primary-color: Highlight;
         --cratis-primary-color-text: HighlightText;
diff --git a/Source/vite.config.ts b/Source/vite.config.ts
index ee5b131a..c4d32afc 100644
--- a/Source/vite.config.ts
+++ b/Source/vite.config.ts
@@ -11,11 +11,6 @@ export default defineConfig({
     optimizeDeps: {
         exclude: ['tslib'],
     },
-    esbuild: {
-        supported: {
-            'top-level-await': true,
-        },
-    },
     build: {
         outDir: './wwwroot',
         assetsDir: '',
@@ -72,7 +67,7 @@ export default defineConfig({
             '**/for_*/**/when_*.ts',
             '**/for_*/**/when_*.tsx',
         ],
-        setupFiles: `${__dirname}/vitest.setup.ts`,
+        setupFiles: `${import.meta.dirname}/vitest.setup.ts`,
     },
     plugins: [
         react(),
diff --git a/rollup.config.mjs b/rollup.config.mjs
index b41e8357..0f38296d 100644
--- a/rollup.config.mjs
+++ b/rollup.config.mjs
@@ -4,7 +4,7 @@
 import typescript from '@rollup/plugin-typescript';
 import { nodeResolve } from '@rollup/plugin-node-resolve';
 import peerDepsExternal from 'rollup-plugin-peer-deps-external';
-import { readdirSync, readFileSync, writeFileSync, mkdirSync } from 'fs';
+import { existsSync, readdirSync, readFileSync, writeFileSync, mkdirSync } from 'fs';
 import { dirname, join, relative, resolve } from 'path';
 import { createRequire } from 'module';
 
@@ -158,6 +158,48 @@ function bundleStyles(sourceDir, esmPath) {
  * Rollup plugin to generate the package.json in the ESM output directory,
  * marking it as an ES module. The package ships a single ESM build.
  */
+function resolvedRelativeSpecifier(file, specifier) {
+    if (!specifier.startsWith('.') || /\.[a-z0-9]+$/i.test(specifier)) return specifier;
+    const target = resolve(dirname(file), specifier);
+    if (existsSync(`${target}.js`)) return `${specifier}.js`;
+    if (existsSync(join(target, 'index.js'))) return `${specifier}/index.js`;
+    return specifier;
+}
+
+function findEmittedModules(directory, found = []) {
+    for (const entry of readdirSync(directory, { withFileTypes: true })) {
+        const file = join(directory, entry.name);
+        if (entry.isDirectory()) findEmittedModules(file, found);
+        else if (entry.name.endsWith('.js') || entry.name.endsWith('.d.ts'))
+            found.push(file);
+    }
+    return found;
+}
+
+/** Makes every relative ESM specifier directly executable by Node. */
+function fixRelativeEsmSpecifiers(esmPath) {
+    return {
+        name: 'fix-relative-esm-specifiers',
+        closeBundle() {
+            for (const file of findEmittedModules(esmPath)) {
+                const source = readFileSync(file, 'utf8');
+                const rewritten = source
+                    .replace(
+                        /((?:from\s*|import\s*)['"])(\.\.?\/[^'"]+)(['"])/g,
+                        (_match, before, specifier, after) =>
+                            `${before}${resolvedRelativeSpecifier(file, specifier)}${after}`,
+                    )
+                    .replace(
+                        /(import\(\s*['"])(\.\.?\/[^'"]+)(['"]\s*\))/g,
+                        (_match, before, specifier, after) =>
+                            `${before}${resolvedRelativeSpecifier(file, specifier)}${after}`,
+                    );
+                if (rewritten !== source) writeFileSync(file, rewritten);
+            }
+        },
+    };
+}
+
 function generatePackageJson(esmPath) {
     return {
         name: 'generate-package-json',
@@ -230,6 +272,7 @@ export function rollup(esmPath, tsconfigPath, pkg) {
             }),
             generatePackageJson(esmPath),
             bundleStyles(sourceDir, esmPath),
+            fixRelativeEsmSpecifiers(esmPath),
         ],
     };
 }

From 54495095b7ad8ef97f867a27a3da154caae939d0 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Sun, 23 Aug 2026 15:53:33 +0200
Subject: [PATCH 014/267] Address Components 4 release review

Close the independently identified accessibility, pass-through, SSR hydration, multi-select, documentation, Storybook, packaging, and guidance gaps before exposing the major release for human review.
---
 .ai/agents/code-reviewer.md                   |   2 +-
 .ai/agents/frontend-developer.md              |   4 +-
 .ai/rules/framework.md                        |   2 +-
 .ai/rules/frontend-testing.md                 |  15 +-
 .ai/rules/general.md                          |   2 +-
 .ai/rules/react.md                            |   6 +-
 .ai/rules/storybook.md                        |   2 +-
 .ai/rules/vertical-slices.md                  |   2 +-
 .ai/skills/new-vertical-slice/SKILL.md        |   2 +-
 .ai/skills/review-code/SKILL.md               |   2 +-
 .../review-code/references/CHECKLISTS.md      |   2 +-
 .ai/skills/write-specs-frontend/SKILL.md      |  17 +--
 .github/workflows/javascript-build.yml        |  11 ++
 .../CommandForm/multi-select-field.md         |   4 +-
 .../CommandForm/radio-button-field.md         |   8 +-
 .../CommandForm/radio-group-field.md          |   2 +
 Documentation/CommandForm/rating-field.md     |   2 +
 Documentation/Dropdown/index.md               |   4 +-
 Documentation/Styling/pass-through.md         |   9 +-
 Documentation/migration.md                    |  39 ++++-
 Documentation/ui-foundation.md                |   2 +-
 Source/.storybook/main.ts                     |  42 +++---
 Source/.storybook/manager.js                  |   1 +
 Source/.storybook/preview.js                  |   1 +
 Source/CommandForm/fields/Fields.stories.tsx  |  57 +++----
 .../CommandForm/fields/RadioButtonField.tsx   |   3 +
 Source/CommandForm/fields/RadioGroupField.tsx |  14 +-
 Source/CommandForm/fields/RatingField.tsx     |  14 +-
 .../when_rendering_native_groups.tsx          |  97 ++++++++++++
 Source/Common/ActionMenubar.tsx               |   9 +-
 Source/Common/DatePickerInput.css             |  14 +-
 Source/Common/DatePickerInput.tsx             |  15 ++
 Source/Common/Tooltip.tsx                     |   1 -
 .../when_configuring_standard_props.tsx       |  13 ++
 .../when_rendered/and_it_is_not_disabled.ts   |  15 +-
 Source/DataTables/DataTableCore.tsx           |  41 ++++-
 ...hen_activating_a_row_with_the_keyboard.tsx |  82 ++++++++++
 Source/Dialogs/Dialog.tsx                     |  64 +++++---
 ...en_configuring_pass_through_attributes.tsx |  61 ++++++++
 .../when_hydrating_server_markup.tsx          |  76 ++++++++++
 Source/Dropdown/Dropdown.tsx                  | 141 ++++++++++++++++++
 .../when_opened_inside_a_dialog.ts            |  13 ++
 ...dering_a_filterable_multiple_selection.tsx | 107 +++++++++++++
 Source/MIGRATION.md                           |  41 ++++-
 .../ObjectContentEditor.tsx                   |  22 ++-
 Source/README.md                              |   2 +-
 Source/SchemaEditor/SchemaEditor.tsx          |   6 +-
 rollup.config.mjs                             |  66 ++++++--
 48 files changed, 997 insertions(+), 160 deletions(-)
 create mode 100644 Source/CommandForm/for_radio_fields/when_rendering_native_groups.tsx
 create mode 100644 Source/DataTables/for_DataTableCore/when_activating_a_row_with_the_keyboard.tsx
 create mode 100644 Source/Dialogs/for_Dialog/when_configuring_pass_through_attributes.tsx
 create mode 100644 Source/Dialogs/for_Dialog/when_hydrating_server_markup.tsx
 create mode 100644 Source/Dropdown/for_Dropdown/when_rendering_a_filterable_multiple_selection.tsx

diff --git a/.ai/agents/code-reviewer.md b/.ai/agents/code-reviewer.md
index 39bc1896..558fbd58 100644
--- a/.ai/agents/code-reviewer.md
+++ b/.ai/agents/code-reviewer.md
@@ -101,7 +101,7 @@ When checking for unused code, missing references, or naming consistency, prefer
 
 ## TypeScript Styling checklist
 
-- [ ] No hard-coded hex/rgb values — PrimeReact CSS variables used
+- [ ] No hard-coded hex/rgb values — Cratis semantic CSS variables used
 - [ ] CSS co-located with component (`.css` file in same folder)
 - [ ] No `!important` unless absolutely required and justified with a comment
 
diff --git a/.ai/agents/frontend-developer.md b/.ai/agents/frontend-developer.md
index 0eef551f..3b726fb5 100644
--- a/.ai/agents/frontend-developer.md
+++ b/.ai/agents/frontend-developer.md
@@ -58,7 +58,7 @@ Confirm that the TypeScript proxies exist in the slice folder before writing any
 - Place `.tsx` files in the **same folder** as the corresponding `.cs` file.
 - Do NOT prefix the file name with the feature or slice name (folder provides context).
 - Each component has its own `.css` file for static styles.
-- Use PrimeReact CSS variables for all colors, backgrounds, and borders — never hard-code hex values. The default stack is Cratis Components on PrimeReact theming — not Tailwind.
+- Use Cratis semantic CSS variables (`--cratis-*`) for colors, backgrounds, borders, and focus treatment — never hard-code hex values. Style component-specific surfaces through typed `pt` and documented `data-cratis-part` values.
 - Use `const` over `let`.
 - Use full descriptive names (never abbreviations like `e`, `idx`, `prev`).
 - **Move non-trivial state out of the render function** into a `withViewModel` view model (or a tested state module) — see `react.md`. Extract as soon as a component has 3+ `useState`, a state-syncing `useEffect`, or derived values. A view model is a plain class with no React hooks, constructible in a spec.
@@ -232,7 +232,7 @@ Before handing back:
 - [ ] `npx tsc -b` passes with zero errors
 - [ ] Components are in the correct slice folder
 - [ ] If the app has a localization convention, user-visible text is routed through it (product policy — not a Cratis rule)
-- [ ] No hard-coded hex/rgb color values — PrimeReact CSS variables used throughout
+- [ ] No hard-coded hex/rgb color values — Cratis semantic CSS variables used throughout
 - [ ] All variable/parameter names are fully descriptive (no abbreviations)
 - [ ] No `any` types — `unknown` with type guards where needed
 - [ ] Composition page updated to include the new component
diff --git a/.ai/rules/framework.md b/.ai/rules/framework.md
index 519a65c9..1592507a 100644
--- a/.ai/rules/framework.md
+++ b/.ai/rules/framework.md
@@ -24,7 +24,7 @@ Each framework repo is organized by what it builds, not by feature slices:
 - **Fundamentals** — the base library. `ConceptAs<T>`, type discovery (`IInstancesOf<T>` / `IImplementationsOf<T>`), serialization, common primitives. `Source/DotNET` (C#) + `Source/JavaScript` (`@cratis/fundamentals`) + the shared ESLint config.
 - **Arc** — the CQRS + model-binding + proxy-generation engine. `Source/DotNET` (the command/query pipeline, validation, authorization, identity, the Roslyn **proxy generator**) + `Source/JavaScript` (`@cratis/arc`, `@cratis/arc.react`, `@cratis/arc.react.mvvm`). Arc.Core does **not** depend on Chronicle.
 - **Chronicle** — the event-sourcing engine. `Source/Kernel` (the engine: **Orleans grains**, event sequences, observers/projections/reducers, storage providers — MongoDB and others), `Source/Clients` (the client SDKs incl. `DotNET` and `Testing`), `Infrastructure`, `Tools`, `Workbench`. The kernel is the deep, performance- and consistency-critical core.
-- **Components** — the React component library on PrimeReact. `Source/<Component>/` folder per component (`CommandDialog`, `DataPage`, `DataTables`, …) with Storybook stories; published as `@cratis/components`. (Application rules *consume* these components; here you *build* them.)
+- **Components** — the React component library with Cratis-owned markup, public types, tokens, and stable parts. It uses React Aria internally for complex accessible interactions and semantic native HTML where simpler. `Source/<Component>/` holds each component (`CommandDialog`, `DataPage`, `DataTables`, …) with Storybook stories; the package is published as `@cratis/components`. (Application rules *consume* these components; here you *build* them.)
 
 Repo conventions follow from this: `Source/DotNET` + `Source/JavaScript` for dual-stack libraries; `Kernel` vs `Clients` for Chronicle; a folder-per-component library layout for Components. Match the structure of the area you are editing — do not introduce app-style layouts.
 
diff --git a/.ai/rules/frontend-testing.md b/.ai/rules/frontend-testing.md
index 8fbc5775..034620fc 100644
--- a/.ai/rules/frontend-testing.md
+++ b/.ai/rules/frontend-testing.md
@@ -88,17 +88,16 @@ The environment is `node`. For behavior that doesn't need browser events, use se
 ```ts
 import React from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
-import { vi } from 'vitest';
-
-vi.mock('primereact/dialog', () => ({
-    Dialog: (props: { footer?: React.ReactNode; children?: React.ReactNode }) =>
-        React.createElement('div', null, props.footer, props.children),
-}));
+import { Button } from '@cratis/components/Common';
 
 describe('when rendered while busy', () => {
     let html: string;
-    beforeEach(() => { html = renderToStaticMarkup(React.createElement(MyDialog, { isBusy: true })); });
-    it('should disable the confirm button', () => { html.should.include('disabled'); });
+    beforeEach(() => {
+        html = renderToStaticMarkup(
+            React.createElement(Button, { loading: true, label: 'Save' }),
+        );
+    });
+    it('should disable the action', () => { html.should.include('disabled'); });
 });
 ```
 
diff --git a/.ai/rules/general.md b/.ai/rules/general.md
index 848a13b9..5563d379 100644
--- a/.ai/rules/general.md
+++ b/.ai/rules/general.md
@@ -121,7 +121,7 @@ Tagged **[contract]** (framework-enforced) or **[convention]** (house default).
 13. **[convention] Cross-slice access is read-only through Chronicle** — inject another slice's read model or reference its events; never instantiate or DI another slice's command/handler/service.
 14. **[contract] Never inject `IEventLog` into `Handle()`** — express appends through return types (`IEnumerable<object>` with `EventForEventSourceId` wrappers for cross-stream). In application reactors, return side-effect events or use `ICommandPipeline`; don't reach for `IEventLog` directly.
 15. **[contract] Never edit a generated file** — proxies carry a `// @generated by Cratis` header. Fix the C# source and rebuild.
-16. **[convention] Use the Cratis dialog wrappers** — never import `Dialog` from `primereact/dialog`; use `CommandDialog` / `Dialog` from `@cratis/components`. The default frontend stack is Cratis Components on PrimeReact theming/tokens/`pt` — **not** Tailwind (Tailwind is one supported unstyled path, not the generic default).
+16. **[convention] Use the Cratis dialog wrappers** — never import `Dialog` from a renderer package; use `CommandDialog` / `Dialog` from `@cratis/components`. The default frontend stack uses Cratis-owned semantic tokens, structural styles, stable parts, and typed `pt`; React Aria remains internal.
 17. **[convention] One slice is one unit** — creating/renaming/moving/deleting a slice means doing the same to every artifact (the `.cs`, every `when_*/`, every `.tsx`, the composition import/JSX, the route).
 
 ## Implementation Workflow
diff --git a/.ai/rules/react.md b/.ai/rules/react.md
index daefbb7e..a7efdd54 100644
--- a/.ai/rules/react.md
+++ b/.ai/rules/react.md
@@ -8,7 +8,7 @@ paths:
 
 # React + Arc + Cratis Components
 
-The frontend is React + TypeScript in MVVM style, composed from **Cratis Components** on top of **Arc-generated proxies**. Cratis Components is PrimeReact-based; you reach PrimeReact almost exclusively through the Cratis wrappers. For component structure, styling, and icons see [components.md](./components.md); for dialogs see [dialogs.md](./dialogs.md). This rule covers MVVM, queries, and commands.
+The frontend is React + TypeScript in MVVM style, composed from **Cratis Components** on top of **Arc-generated proxies**. Components owns its markup, public types, semantic tokens, and stable parts; React Aria is an internal implementation detail. For component structure, styling, and icons see [components.md](./components.md); for dialogs see [dialogs.md](./dialogs.md). This rule covers MVVM, queries, and commands.
 
 ## The proxy boundary
 
@@ -185,11 +185,11 @@ Top-level provider for microservice name and API base path. Config props (with d
 
 ## Styling default
 
-Default to **Cratis Components on PrimeReact theming/tokens** (`var(--surface-*)`, `var(--primary-color)`, `var(--text-color)`, `pt`/unstyled where needed) — see [components.md](./components.md). Tailwind is **not** the Cratis default (it's one supported unstyled path). Never hard-code hex/`rgb()` for chrome.
+Default to **Cratis Components semantic tokens and stable parts** (`var(--cratis-surface-*)`, `var(--cratis-primary-color)`, `var(--cratis-text-color)`, typed `pt`, and `data-cratis-part`) — see [components.md](./components.md). Import the token and structural stylesheet entry points; use the optional baseline theme or map a product design system directly. Never hard-code hex/`rgb()` for chrome.
 
 ## See also
 
-- [components.md](./components.md) — component structure, CSS, PrimeReact tokens, icons, Storybook.
+- [components.md](./components.md) — component structure, Cratis tokens and parts, icons, Storybook.
 - [dialogs.md](./dialogs.md) — `CommandDialog` / `Dialog` / `StepperCommandDialog` rules.
 - [frontend-quality.md](./frontend-quality.md) — engineering bar; [frontend-testing.md](./frontend-testing.md) — BDD specs.
 - [typescript.md](./typescript.md) — TS style.
diff --git a/.ai/rules/storybook.md b/.ai/rules/storybook.md
index bec0c726..2ab73de2 100644
--- a/.ai/rules/storybook.md
+++ b/.ai/rules/storybook.md
@@ -17,7 +17,7 @@ Good candidates: a presentational card/list-item/form-field with multiple visual
 
 ## Preview infrastructure (what you get for free)
 
-A configured `.storybook/preview` should wrap every story in `CratisComponentsProvider` (from `@cratis/components/Common`) and import `@cratis/components/styles` so PrimeReact-based components render correctly. With that in place:
+A configured `.storybook/preview` should wrap every story in `CratisComponentsProvider` (from `@cratis/components/Common`) and import `@cratis/components/tokens`, `@cratis/components/styles`, and either the optional baseline `theme` or product token mappings. With that in place:
 
 - **Auto prop tables** via `react-docgen-typescript` — a component's `interface` + per-prop JSDoc renders as a Docs prop table, and union props become `select` controls automatically. Keep a JSDoc comment on every prop. **`argTypes` is an override layer** (change control type, group under `table.category`, disable a control) — don't re-list every prop.
 - **Accessibility panel** (`@storybook/addon-a11y`) scans each story with axe-core. Treat new violations as defects.
diff --git a/.ai/rules/vertical-slices.md b/.ai/rules/vertical-slices.md
index bd153505..b36dbf2d 100644
--- a/.ai/rules/vertical-slices.md
+++ b/.ai/rules/vertical-slices.md
@@ -17,7 +17,7 @@ This file is the reference for *what* goes in each part of a slice. Layout, slic
 ## Technical stack
 
 - .NET / C# (ASP.NET Core) — **Cratis Arc** for CQRS / model-bound commands and queries, **Cratis Chronicle** for event sourcing, MongoDB or EF Core for read models.
-- React + TypeScript (Vite) — Cratis Components (PrimeReact-based) + Arc-generated proxies, MVVM. Vitest + Mocha/Chai/Sinon for frontend specs.
+- React + TypeScript (Vite) — Cratis Components with Cratis-owned tokens/parts + Arc-generated proxies, MVVM. Vitest + Mocha/Chai/Sinon for frontend specs.
 - xUnit + Cratis.Specifications + NSubstitute for C# specs (the `*Scenario` family — see [specs.md](./specs.md)).
 
 ## Proxy generation — the build dependency
diff --git a/.ai/skills/new-vertical-slice/SKILL.md b/.ai/skills/new-vertical-slice/SKILL.md
index ff5480e6..34b19fb1 100644
--- a/.ai/skills/new-vertical-slice/SKILL.md
+++ b/.ai/skills/new-vertical-slice/SKILL.md
@@ -61,7 +61,7 @@ Place `.tsx` files in the slice folder `<Feature>/<Slice>/`.
 - Import the auto-generated command/query proxy from the same folder
 - Use `CommandDialog` from `@cratis/components/CommandDialog` for command dialogs
 - Use `Dialog` from `@cratis/components/Dialogs` for data-only dialogs — NEVER import from `primereact/dialog`
-- Use PrimeReact CSS variables for all colors — never hard-code hex values
+- Use Cratis semantic CSS variables (`--cratis-*`) for all colors — never hard-code hex values
 - Use full descriptive variable names — never abbreviations (`event` not `e`, `index` not `idx`)
 - No `any` types — use `unknown` with type guards
 
diff --git a/.ai/skills/review-code/SKILL.md b/.ai/skills/review-code/SKILL.md
index b179447c..708f240c 100644
--- a/.ai/skills/review-code/SKILL.md
+++ b/.ai/skills/review-code/SKILL.md
@@ -49,7 +49,7 @@ Review changed code against all Cratis project standards and produce a structure
 - [ ] `CommandDialog` from `@cratis/components/CommandDialog` for command dialogs
 - [ ] `Dialog` from `@cratis/components/Dialogs` for data-only dialogs
 - [ ] Never imports `Dialog` from `primereact/dialog` directly
-- [ ] No hard-coded hex/rgb colors — PrimeReact CSS variables only
+- [ ] No hard-coded hex/rgb colors — Cratis semantic CSS variables only
 - [ ] README.md present for complex component folders with multiple sub-components
 
 ## Performance
diff --git a/.ai/skills/review-code/references/CHECKLISTS.md b/.ai/skills/review-code/references/CHECKLISTS.md
index 4c62dbea..b7c836d7 100644
--- a/.ai/skills/review-code/references/CHECKLISTS.md
+++ b/.ai/skills/review-code/references/CHECKLISTS.md
@@ -78,7 +78,7 @@
 
 ## TypeScript Styling
 
-- [ ] No hard-coded hex/rgb values — PrimeReact CSS variables (`var(--...)`) only
+- [ ] No hard-coded hex/rgb values — Cratis semantic CSS variables (`var(--cratis-...)`) only
 - [ ] CSS co-located with component (`.css` file in same folder)
 - [ ] No `!important` unless justified with a comment
 
diff --git a/.ai/skills/write-specs-frontend/SKILL.md b/.ai/skills/write-specs-frontend/SKILL.md
index e47f37af..32c4c0b2 100644
--- a/.ai/skills/write-specs-frontend/SKILL.md
+++ b/.ai/skills/write-specs-frontend/SKILL.md
@@ -57,22 +57,21 @@ Pass small typed fakes / `sinon.stub()` for dependencies; don't build a broad ha
 
 ## Component spec (when rendering is the point)
 
-Environment is `node`; render server-side markup and mock only the external component boundary:
+Environment is `node`; render server-side markup and use the public Cratis component contract:
 
 ```ts
 import React from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
-import { vi } from 'vitest';
-
-vi.mock('primereact/dialog', () => ({
-    Dialog: (p: { footer?: React.ReactNode; children?: React.ReactNode }) =>
-        React.createElement('div', null, p.footer, p.children),
-}));
+import { Button } from '@cratis/components/Common';
 
 describe('when rendered while busy', () => {
     let html: string;
-    beforeEach(() => { html = renderToStaticMarkup(React.createElement(MyDialog, { isBusy: true })); });
-    it('should disable the confirm button', () => html.should.include('disabled'));
+    beforeEach(() => {
+        html = renderToStaticMarkup(
+            React.createElement(Button, { loading: true, label: 'Save' }),
+        );
+    });
+    it('should disable the action', () => html.should.include('disabled'));
 });
 ```
 
diff --git a/.github/workflows/javascript-build.yml b/.github/workflows/javascript-build.yml
index eab293bf..378c6f94 100644
--- a/.github/workflows/javascript-build.yml
+++ b/.github/workflows/javascript-build.yml
@@ -17,11 +17,19 @@ on:
             - 'main'
         paths:
             - 'Source/**'
+            - 'package.json'
+            - 'rollup.config.mjs'
+            - 'yarn.lock'
+            - '.github/workflows/javascript-build.yml'
     pull_request:
         branches:
             - '**'
         paths:
             - 'Source/**'
+            - 'package.json'
+            - 'rollup.config.mjs'
+            - 'yarn.lock'
+            - '.github/workflows/javascript-build.yml'
 
 permissions:
     contents: read
@@ -58,6 +66,9 @@ jobs:
                   export NODE_OPTIONS="--max-old-space-size=4096"
                   yarn ci
 
+            - name: Build Storybook
+              run: yarn workspace @cratis/components build-storybook
+
     # Builds the artifact that actually ships to npm (the `prepare` script: tsc -b +
     # rollup + copy-css) and loads every subpath of the `exports` map from it.
     #
diff --git a/Documentation/CommandForm/multi-select-field.md b/Documentation/CommandForm/multi-select-field.md
index c55f1f6c..08200103 100644
--- a/Documentation/CommandForm/multi-select-field.md
+++ b/Documentation/CommandForm/multi-select-field.md
@@ -1,6 +1,6 @@
 # MultiSelectField
 
-`MultiSelectField` lets the user pick several values through the Cratis [`Dropdown`](../Dropdown/index.md) native multiple-selection path.
+`MultiSelectField` lets the user pick several values through the Cratis [`Dropdown`](../Dropdown/index.md). It uses native multiple selection by default and an accessible multi-value combobox when filtering is enabled.
 
 ## Usage
 
@@ -40,7 +40,7 @@ const categoryOptions = [
 | `filter`                        | `boolean`                         | `false` | Shows a filter input in the options popup.                                                                                                                      |
 | `showClear`                     | `boolean`                         | `false` | Displays a clear icon to reset selected values.                                                                                                                 |
 | `className`                     | `string`                          | -       | Extra CSS class combined with the default `w-full`.                                                                                                             |
-| `pt` / `ptOptions` / `unstyled` | -                                 | -       | Pass-through styling for the underlying `Select`.                                                                                                               |
+| `pt` / `ptOptions` / `unstyled` | -                                 | -       | Pass-through styling for the underlying `Dropdown`; `ptOptions` and `unstyled` are compatibility no-ops.                                                       |
 
 ## Behavior
 
diff --git a/Documentation/CommandForm/radio-button-field.md b/Documentation/CommandForm/radio-button-field.md
index 3829c893..964992ce 100644
--- a/Documentation/CommandForm/radio-button-field.md
+++ b/Documentation/CommandForm/radio-button-field.md
@@ -9,9 +9,9 @@ import { CommandDialog } from '@cratis/components/CommandDialog';
 import { RadioButtonField } from '@cratis/components/CommandForm';
 
 <CommandDialog command={MyCommand} visible={visible} onCancel={() => setVisible(false)}>
-    <RadioButtonField<MyCommand> value={c => c.size} buttonValue="small" label="Small" />
-    <RadioButtonField<MyCommand> value={c => c.size} buttonValue="medium" label="Medium" />
-    <RadioButtonField<MyCommand> value={c => c.size} buttonValue="large" label="Large" />
+    <RadioButtonField<MyCommand> name="size" value={c => c.size} buttonValue="small" label="Small" />
+    <RadioButtonField<MyCommand> name="size" value={c => c.size} buttonValue="medium" label="Medium" />
+    <RadioButtonField<MyCommand> name="size" value={c => c.size} buttonValue="large" label="Large" />
 </CommandDialog>
 ```
 
@@ -21,10 +21,12 @@ import { RadioButtonField } from '@cratis/components/CommandForm';
 |------|------|---------|-------------|
 | `value` | `(instance: TCommand) => unknown` | — | **Required.** Accessor function that returns the bound property from the command instance. Pass the command type as the generic parameter for full type safety. |
 | `buttonValue` | `string \| number` | — | **Required.** The value this radio button represents. When selected, the command property is set to this value. |
+| `name` | `string` | — | **Required.** Native group name shared by every option bound to the same command property. |
 | `label` | `string` | — | Text displayed inline next to the radio button. |
 
 ## Behavior
 
 - Default value is an empty string.
 - The radio button is checked when the current field value equals `buttonValue`.
+- Options with the same `name` use native arrow-key radio navigation and one tab stop.
 - Validation state is reflected through `aria-invalid` and `data-invalid`.
diff --git a/Documentation/CommandForm/radio-group-field.md b/Documentation/CommandForm/radio-group-field.md
index 8517ffa4..c8a04e52 100644
--- a/Documentation/CommandForm/radio-group-field.md
+++ b/Documentation/CommandForm/radio-group-field.md
@@ -47,9 +47,11 @@ With horizontal layout:
 | `optionLabel` | `string` | — | **Required.** Key in each option object to use as the display label. |
 | `optionValue` | `string` | — | **Required.** Key in each option object to use as the submitted value. |
 | `layout` | `'horizontal' \| 'vertical'` | `'vertical'` | Controls whether the radio buttons are stacked vertically or laid out in a horizontal row. |
+| `name` | `string` | generated | Optional native radio-group name. All options in the component always share one name. |
 
 ## Behavior
 
 - Default value is an empty string.
 - A radio button is checked when the current field value equals its `optionValue`.
+- The options share one native name for arrow-key navigation and a single tab stop.
 - Validation state is reflected through `aria-invalid` and `data-invalid`.
diff --git a/Documentation/CommandForm/rating-field.md b/Documentation/CommandForm/rating-field.md
index f49c5958..89ddd5b1 100644
--- a/Documentation/CommandForm/rating-field.md
+++ b/Documentation/CommandForm/rating-field.md
@@ -19,6 +19,7 @@ import { RatingField } from '@cratis/components/CommandForm';
 |------|------|---------|-------------|
 | `value` | `(instance: TCommand) => unknown` | — | **Required.** Accessor that returns the bound property from the command instance. Pass the command type as the generic parameter for full type safety. |
 | `stars` | `number` | `5` | Number of stars to display. |
+| `name` | `string` | generated | Optional native radio-group name. Every star in the component shares one name. |
 | `starAriaLabel` | `(starValue: number) => string` | `"1 star"`, `"2 stars"`, … | Builds the accessible name for each star, from the 1-based star value. Override to localize. |
 | `className` | `string` | — | Extra CSS class name. |
 | `pt` | component-specific parts | — | Cratis-owned HTML attributes for stable parts. |
@@ -29,4 +30,5 @@ import { RatingField } from '@cratis/components/CommandForm';
 
 - Default value is `0` (no rating selected).
 - The bound value is the selected star count (`1`–`stars`).
+- Stars use native arrow-key radio navigation with one tab stop.
 - Validation state is reflected through `aria-invalid` and `data-invalid`.
diff --git a/Documentation/Dropdown/index.md b/Documentation/Dropdown/index.md
index 3db95297..af9080f0 100644
--- a/Documentation/Dropdown/index.md
+++ b/Documentation/Dropdown/index.md
@@ -39,7 +39,7 @@ Filtered selection follows the combobox pattern. A non-filtered single select fo
 
 ## Multiple selection
 
-Set `multiple` and bind an array. Components uses the native multiple-select path for dependable keyboard and screen-reader behavior. Use a specialized collection picker when a large dataset needs virtualized search or chip collapsing.
+Set `multiple` and bind an array. Components uses native multiple selection when filtering is off and an accessible multi-value combobox when `filter` is enabled. Use a specialized collection picker when a large dataset needs virtualized search or chip collapsing.
 
 ## Props
 
@@ -59,6 +59,6 @@ Set `multiple` and bind an array. Components uses the native multiple-select pat
 
 ## Stable parts
 
-`root`, `trigger`, `value`, `clear`, `indicator`, `filter`, `popover`, `listbox`, `option`, and `multiple`.
+`root`, `input`, `select`, `trigger`, `value`, `clear`, `indicator`, `filter`, `popover`, `listbox`, `option`, and `multiple`.
 
 The popup is portaled outside modal clipping contexts and carries a z-index above Cratis dialogs. Styling uses the `--cratis-*` tokens and stable parts; no renderer selectors are required.
diff --git a/Documentation/Styling/pass-through.md b/Documentation/Styling/pass-through.md
index de23db20..43be4a80 100644
--- a/Documentation/Styling/pass-through.md
+++ b/Documentation/Styling/pass-through.md
@@ -28,14 +28,15 @@ They are documented separately because not every DOM part needs a `pt` key, and
 | Component/type               | Typed `pt` keys                                                                                                                                                         | Element types                                                 |
 | ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- |
 | `ButtonParts`                | `root`, `icon`, `label`, `spinner`                                                                                                                                      | button, spans                                                 |
-| `DialogParts`                | `backdrop`, `positioner`, `root`, `header`, `title`, `close`, `content`, `footer`, `confirm`, `cancel`                                                                  | div/section/header/heading/footer/buttons                     |
+| `DialogParts`                | `backdrop`, `positioner`, `root`, `header`, `title`, `close`, `content`, `footer`, `confirm`, `cancel`                                                                  | divs/header/heading/footer/buttons                            |
 | `DropdownParts`              | `root`, `input`, `select`, `trigger`, `value`, `clear`, `indicator`, `popover`, `listbox`, `option`, `filter`, `multiple`                                               | wrapper, input/button, spans, popover/listbox/options, select |
-| `DatePickerInputPassThrough` | `root`, `group`, `input`, `segment`, `trigger`, `popover`, `dialog`, `calendar`, `header`, `heading`, `previous`, `next`, `grid`, `cell`, `buttonBar`, `today`, `clear` | divs, segmented field, buttons, calendar grid/cells           |
+| `DatePickerInputPassThrough` | `root`, `group`, `input`, `placeholder`, `segment`, `trigger`, `popover`, `dialog`, `calendar`, `header`, `heading`, `previous`, `next`, `grid`, `cell`, `buttonBar`, `today`, `clear` | divs, segmented field, buttons, calendar grid/cells |
 | `DataTableParts`             | `root`, `search`, `searchInput`, `tableContainer`, `table`, `head`, `headerRow`, `headerCell`, `body`, `row`, `cell`, `emptyRow`, `emptyCell`                           | div/input/table sections/rows/cells                           |
 | `TablePaginatorParts`        | `root`, `range`, `info`, `first`, `previous`, `next`, `last`                                                                                                            | navigation div, spans, and Button parts                       |
 | `StepperParts`               | `root`, `list`, `step`, `header`, `number`, `title`, `separator`, `panels`, `panel`                                                                                     | div, ordered list, list item, button, spans, section          |
 | `ToasterPassThrough`         | `region`, `toast`, `icon`, `content`, `title`, `description`, `close`, `action`                                                                                         | region/article/divs/spans/buttons                             |
 | `ActionMenubar` `pt`         | the `ButtonParts` keys applied to each action                                                                                                                           | button and spans                                              |
+| Query table / `DataPage` `paginatorPt` | `TablePaginatorParts`                                                                                                                                                   | paginator surface                                             |
 | `DataPage` `tablePt`         | `DataTableParts`                                                                                                                                                        | table surface                                                 |
 | `DataPage` `menubarPt`       | `ButtonParts`                                                                                                                                                           | action buttons                                                |
 
@@ -68,11 +69,13 @@ Use the exact kebab-case value in CSS or tests:
 | Button         | `root`, `icon`, `label`, `spinner`                                                                                                                                                              |
 | Dialog         | `backdrop`, `positioner`, `root`, `header`, `title`, `close`, `content`, `footer`, `confirm`, `cancel`                                                                                          |
 | Dropdown       | `root`, `trigger`, `value`, `clear`, `indicator`, `filter`, `popover`, `listbox`, `option`, `multiple`                                                                                          |
-| DatePicker     | `root`, `group`, `input`, `segment`, `trigger`, `popover`, `dialog`, `calendar`, `header`, `heading`, `previous`, `next`, `grid`, `cell`, `button-bar`, `today`, `clear`                        |
+| DatePicker     | `root`, `group`, `input`, `placeholder`, `segment`, `trigger`, `popover`, `dialog`, `calendar`, `header`, `heading`, `previous`, `next`, `grid`, `cell`, `button-bar`, `today`, `clear`         |
 | DataTable      | `root`, `search`, `search-input`, `table-container`, `table`, `head`, `header-row`, `header-cell`, `header-content`, `sort`, `filter-trigger`, `body`, `row`, `cell`, `empty-row`, `empty-cell` |
 | TablePaginator | `root`, `range`, `info`; paginator buttons expose the documented Button parts                                                                                                                   |
 | Stepper        | `root`, `list`, `step`, `header`, `number`, `title`, `separator`, `panels`, `panel`                                                                                                             |
 | Toaster        | `region`, `toast`, `icon`, `content`, `title`, `description`, `action`, `close`                                                                                                                 |
+| Tooltip        | `trigger`, `popup`                                                                                                                                                                             |
+| Command fields | `root`, plus the typed field-specific values listed above (`input`, `textarea`, `box`, `control`, `handle`, `indicator`, `option`, `item`, `remove`, `value`, `star`, `toggle`)                |
 | Display        | component roots plus `image`, `fallback`, `remove`, `indicator`, `range`, `track`, and labels where applicable                                                                                  |
 | Event timeline | `timeline`, `event`, `separator`, `marker`, `connector`, `content`                                                                                                                              |
 
diff --git a/Documentation/migration.md b/Documentation/migration.md
index 120c354e..d6d6e854 100644
--- a/Documentation/migration.md
+++ b/Documentation/migration.md
@@ -46,7 +46,7 @@ A custom product design can omit `theme`, define the `--cratis-*` variables itse
 
 ## Simplify the provider
 
-The provider now owns locale and Components-specific labels. It no longer accepts a PrimeUI key, renderer preset, global Prime pass-through map, ripple setting, or renderer defaults.
+The provider now owns locale and Components-specific labels. It temporarily accepts unknown legacy renderer keys so staged source migrations compile, but ignores them. Remove PrimeUI keys, renderer presets, global Prime pass-through maps, ripple settings, and renderer defaults.
 
 ```tsx
 import { CratisComponentsProvider } from '@cratis/components';
@@ -158,7 +158,7 @@ Every meaningful element also carries `data-cratis-part`. Interactive states use
 | Dropdown `option`              | `option`                                       |
 | DatePicker `input`             | segmented `input`; identity belongs on `group` |
 
-See [Stable component parts](Styling/pass-through.md) for the complete contract.
+See [Stable component parts](Styling/pass-through.md) for the documented foundation surfaces.
 
 ### Migrate a deeply customized product
 
@@ -182,6 +182,7 @@ export const productDialogParts: DialogParts = {
 export const productStepperParts: StepperParts = {
     root: { className: 'product-stepper' },
     list: { className: 'product-stepper-list' },
+    step: { className: 'product-stepper-step' },
     header: { className: 'product-stepper-header' },
     number: { className: 'product-stepper-number' },
     title: { className: 'product-stepper-title' },
@@ -190,6 +191,20 @@ export const productStepperParts: StepperParts = {
 };
 ```
 
+For an existing nested Prime stepper preset, map the slots by rendered responsibility:
+
+| Components 3 Prime slot | Components 4 part |
+| ----------------------- | ----------------- |
+| `nav` | `list` |
+| `panelContainer` | `panels` |
+| `stepperpanel.root` | `step` (`<li>`) |
+| `stepperpanel.action` | `header` (`<button>`) |
+| `stepperpanel.number` | `number` |
+| `stepperpanel.title` | `title` |
+| `stepperpanel.content` | `panel` (`<section>`) |
+
+The old `stepperpanel.header` wrapper has no one-to-one element. Put list-item layout on `step`, and interactive-header styling on `header`. Replace `data-p-active` selectors with `[data-cratis-part='step'][data-active='true']`.
+
 Paginator callbacks that formerly returned classes from renderer context must become static Cratis parts plus CSS state selectors:
 
 ```ts
@@ -205,7 +220,19 @@ export const productPaginatorParts: TablePaginatorParts = {
 };
 ```
 
-Use `:disabled`, `:focus-visible`, and the documented `data-cratis-*` states in CSS instead of renderer callback context. The numbered-page renderer is gone; the paginator reports the current page and provides first/previous/next/last actions.
+Pass the parts to either query-backed table:
+
+```tsx
+<DataTableForQuery
+    query={AllProducts}
+    paginatorPt={productPaginatorParts}
+    emptyMessage='No products'
+>
+    <Column field='name' header='Name' />
+</DataTableForQuery>
+```
+
+`DataTableForObservableQuery` uses the same `paginatorPt` prop. Use `:disabled`, `:focus-visible`, and the documented `data-cratis-*` states in CSS instead of renderer callback context. The numbered-page renderer is gone; the paginator reports the current page and provides first/previous/next/last actions.
 
 `Dropdown.inputId` and `Dropdown.panelClassName` remain migration aliases for `id` and `pt.popover.className`, but new code should use the current names.
 
@@ -225,14 +252,14 @@ Use `:disabled`, `:focus-visible`, and the documented `data-cratis-*` states in
 
 Do not assume every Dropdown trigger has `role="combobox"`. Query it by its accessible name or `data-cratis-part="trigger"` in tests.
 
-Multiple selection remains available through the native multiple-select path. Prefer a dedicated collection picker for a large or highly customized multi-select experience.
+Multiple selection uses a native multiple-select when filtering is off and an accessible multi-value combobox when `filter` is enabled. Prefer a dedicated collection picker for a large or highly customized multi-select experience.
 
 ## Update tables
 
 `DataTableCore` now renders semantic HTML. Query-backed paging remains owned by Arc.
 
 - Sorting and filtering apply to the currently loaded page.
-- Complete-result filtering belongs in query arguments and runs on the server before paging.
+- Complete-result filtering and sorting are not automatic table state. Model them in query arguments and implement them in the server query before paging.
 - `clientFiltering` remains temporarily accepted as a deprecated no-op so staged source migrations compile. Remove it: filtering is always scoped to the loaded page, and complete-result filtering belongs on the server before paging.
 - Legacy `{ operator, constraints }` filter entries remain accepted. `operator: 'or'` matches any constraint; all other values match every constraint.
 - `Column` remains the declarative column marker.
@@ -241,6 +268,8 @@ Multiple selection remains available through the native multiple-select path. Pr
 
 Custom matchers registered with `registerDataTableFilterMatcher()` continue to work.
 
+Separate `RadioButtonField` options bound to one property now require the same explicit `name` prop so native arrow-key radio-group navigation works. `RadioGroupField` and `RatingField` generate a shared internal name automatically.
+
 ## Update dialogs and steppers
 
 Dialog callback, busy, validity, dismissal, and initial-focus contracts remain. The modal/focus implementation is now React Aria-based.
diff --git a/Documentation/ui-foundation.md b/Documentation/ui-foundation.md
index 8d99aad3..f92b2a06 100644
--- a/Documentation/ui-foundation.md
+++ b/Documentation/ui-foundation.md
@@ -42,7 +42,7 @@ The React Aria Components Toast API remains unstable, so Components 4 ships its
 
 ## Table architecture
 
-Components 4 uses semantic HTML and Cratis-owned table state. Arc remains authoritative for server paging. Client filtering and sorting operate only on the loaded page; complete-result filtering and sorting run on the server before paging.
+Components 4 uses semantic HTML and Cratis-owned table state. Arc remains authoritative for server paging. Client filtering and sorting operate only on the loaded page. Complete-result filtering and sorting require consumer-defined query arguments and server query logic that applies them before paging; Components does not automatically forward table state to the server.
 
 [TanStack Table](https://tanstack.com/table/latest/docs/overview) was evaluated but is not a Components 4 dependency. It remains a possible future implementation tool if advanced grouping, pinning, faceting, or sizing creates enough state complexity to justify it. Adopting it would not change the Cratis public contract.
 
diff --git a/Source/.storybook/main.ts b/Source/.storybook/main.ts
index 91e40583..5dced7bc 100644
--- a/Source/.storybook/main.ts
+++ b/Source/.storybook/main.ts
@@ -5,27 +5,27 @@ import type { StorybookConfig } from '@storybook/react-vite';
 import type { UserConfig as ViteConfig } from 'vite';
 
 const config: StorybookConfig = {
-  stories: ['../!(dist|node_modules|storybook-static)/**/*.stories.@(ts|tsx)'],
-  addons: [],
-  framework: {
-    name: '@storybook/react-vite',
-    options: {}
-  },
-  core: { builder: '@storybook/builder-vite' },
-  staticDirs: ['../public'],
-  // Ensure Vite dev server does not open the browser when Storybook starts
-  async viteFinal(existingConfig: ViteConfig) {
-    const cfg: ViteConfig = { ...existingConfig };
-    cfg.server = { ...(cfg.server || {}), open: false };
-    cfg.build = {
-      ...(cfg.build || {}),
-      cssMinify: false,
-      // The preview index includes Storybook's manager runtime and every story entry;
-      // it is documentation output rather than a consumer package chunk.
-      chunkSizeWarningLimit: 1200
-    };
-    return cfg;
-  }
+    stories: ['../!(dist|node_modules|storybook-static)/**/*.stories.@(ts|tsx)'],
+    addons: [],
+    framework: {
+        name: '@storybook/react-vite',
+        options: {},
+    },
+    core: { builder: '@storybook/builder-vite' },
+    staticDirs: ['../public'],
+    // Ensure Vite dev server does not open the browser when Storybook starts
+    async viteFinal(existingConfig: ViteConfig) {
+        const cfg: ViteConfig = { ...existingConfig };
+        cfg.server = { ...(cfg.server || {}), open: false };
+        cfg.build = {
+            ...(cfg.build || {}),
+            cssMinify: false,
+            // The preview index includes Storybook's manager runtime and every story entry;
+            // it is documentation output rather than a consumer package chunk.
+            chunkSizeWarningLimit: 1200,
+        };
+        return cfg;
+    },
 };
 
 export default config;
diff --git a/Source/.storybook/manager.js b/Source/.storybook/manager.js
index 1ba54b83..64b14197 100644
--- a/Source/.storybook/manager.js
+++ b/Source/.storybook/manager.js
@@ -31,6 +31,7 @@ addons.getChannel().on('STORY_RENDERED', () => {
 
 // Receive theme-sync messages from the embedding docs site (StorybookEmbed.astro).
 window.addEventListener('message', (event) => {
+    if (event.source !== window.parent || event.origin !== window.location.origin) return;
     if (event.data?.type !== 'STORYBOOK_THEME_CHANGE') return;
     const newTheme = event.data.theme;
     if (newTheme !== 'light' && newTheme !== 'dark') return;
diff --git a/Source/.storybook/preview.js b/Source/.storybook/preview.js
index 573b4524..dabf77fd 100644
--- a/Source/.storybook/preview.js
+++ b/Source/.storybook/preview.js
@@ -3,6 +3,7 @@
 
 import { addons } from 'storybook/preview-api';
 import React from 'react';
+import '../tokens.css';
 import '../styles.css';
 import './preview.css';
 import '../theme.css';
diff --git a/Source/CommandForm/fields/Fields.stories.tsx b/Source/CommandForm/fields/Fields.stories.tsx
index eab412ec..318ab017 100644
--- a/Source/CommandForm/fields/Fields.stories.tsx
+++ b/Source/CommandForm/fields/Fields.stories.tsx
@@ -8,6 +8,7 @@ import { Command, CommandValidator } from '@cratis/arc/commands';
 import { PropertyDescriptor } from '@cratis/arc/reflection';
 import { StoryContainer, StorySection, StoryDivider } from '@cratis/arc.react/stories';
 import '@cratis/arc/validation';
+import { Button } from '../../Common/Button';
 import {
     InputTextField,
     NumberField,
@@ -24,7 +25,7 @@ import {
 } from './index';
 
 const meta: Meta = {
-    title: 'CommandForm/PrimeReact Fields',
+    title: 'CommandForm/Fields',
     parameters: {
         layout: 'centered',
     },
@@ -131,9 +132,9 @@ export const AllFields: Story = {
 
         return (
             <StoryContainer size="md" asCard>
-                <h1>PrimeReact Form Fields</h1>
+                <h1>Cratis Command Form Fields</h1>
                 <p>
-                    This showcase demonstrates all available PrimeReact-based form fields integrated with CommandForm from @cratis/arc.react.
+                    This showcase demonstrates the Cratis-owned fields integrated with CommandForm from @cratis/arc.react.
                 </p>
 
                 <StoryDivider />
@@ -268,7 +269,7 @@ export const AllFields: Story = {
                             value={c => c.dropdown}
                             title="Dropdown Field"
                             placeholder="Select an option"
-                            description="PrimeReact dropdown component"
+                            description="Accessible Cratis dropdown component"
                             options={dropdownOptions}
                             optionValue="id"
                             optionLabel="name"
@@ -288,7 +289,7 @@ export const AllFields: Story = {
                         <CalendarField<FormFieldsCommand>
                             value={c => c.calendarDate}
                             title="Calendar Field"
-                            description="PrimeReact Calendar component for selecting dates"
+                            description="Internationalized Cratis date picker"
                             placeholder="Select a date"
                             showIcon
                             dateFormat="mm/dd/yy"
@@ -303,7 +304,7 @@ export const AllFields: Story = {
                         <ColorPickerField<FormFieldsCommand>
                             value={c => c.color}
                             title="Color Picker Field"
-                            description="PrimeReact ColorPicker for selecting hex colors"
+                            description="Cratis color picker for selecting hex colors"
                         />
                     </StorySection>
 
@@ -315,12 +316,11 @@ export const AllFields: Story = {
                         <MultiSelectField<FormFieldsCommand>
                             value={c => c.multiSelect}
                             title="MultiSelect Field"
-                            description="PrimeReact MultiSelect for selecting multiple options"
+                            description="Filterable Cratis multi-select"
                             placeholder="Choose one or more features"
                             options={multiSelectOptions}
                             optionValue="id"
                             optionLabel="name"
-                            display="chip"
                             filter
                             showClear
                         />
@@ -334,7 +334,7 @@ export const AllFields: Story = {
                         <ChipsField<FormFieldsCommand>
                             value={c => c.chips}
                             title="Chips Field"
-                            description="PrimeReact Chips for entering multiple text values"
+                            description="Cratis chips field for entering multiple text values"
                             placeholder="Add tags and press Enter"
                             separator=","
                         />
@@ -372,16 +372,19 @@ export const AllFields: Story = {
                         <h3>Radio Button</h3>
 
                         <RadioButtonField<FormFieldsCommand>
+                            name="radio-button-options"
                             value={c => c.radioButton}
                             buttonValue="option1"
                             label="Option 1"
                         />
                         <RadioButtonField<FormFieldsCommand>
+                            name="radio-button-options"
                             value={c => c.radioButton}
                             buttonValue="option2"
                             label="Option 2"
                         />
                         <RadioButtonField<FormFieldsCommand>
+                            name="radio-button-options"
                             value={c => c.radioButton}
                             buttonValue="option3"
                             label="Option 3"
@@ -406,13 +409,11 @@ export const AllFields: Story = {
                     <StoryDivider />
 
                     <div style={{ marginTop: '1.5rem', display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
-                        <button
+                        <Button
                             type="submit"
                             disabled={!validationState.canSubmit}
-                            className="p-button p-component"
-                        >
-                            Submit Form
-                        </button>
+                            label="Submit Form"
+                        />
                         {!validationState.canSubmit && Object.keys(validationState.errors).length > 0 && (
                             <span style={{ color: 'var(--cratis-orange-500)', fontSize: '0.875rem' }}>
                                 Please fix validation errors
@@ -430,7 +431,7 @@ export const InputTextFieldExample: Story = {
         return (
             <StoryContainer size="sm" asCard>
                 <h2>InputTextField</h2>
-                <p>PrimeReact InputText component wrapped for CommandForm.</p>
+                <p>Cratis text inputs wrapped for CommandForm.</p>
 
                 <CommandForm<FormFieldsCommand>
                     command={FormFieldsCommand}
@@ -466,7 +467,7 @@ export const NumberFieldExample: Story = {
         return (
             <StoryContainer size="sm" asCard>
                 <h2>NumberField</h2>
-                <p>PrimeReact InputNumber component with spinners and constraints.</p>
+                <p>Cratis number input with native constraints.</p>
 
                 <CommandForm<FormFieldsCommand>
                     command={FormFieldsCommand}
@@ -491,7 +492,7 @@ export const TextAreaFieldExample: Story = {
         return (
             <StoryContainer size="sm" asCard>
                 <h2>TextAreaField</h2>
-                <p>PrimeReact InputTextarea for multi-line text input.</p>
+                <p>Cratis textarea for multi-line text input.</p>
 
                 <CommandForm<FormFieldsCommand>
                     command={FormFieldsCommand}
@@ -514,7 +515,7 @@ export const DropdownFieldExample: Story = {
         return (
             <StoryContainer size="sm" asCard>
                 <h2>DropdownField</h2>
-                <p>PrimeReact Dropdown for selecting from a list of options.</p>
+                <p>Cratis Dropdown for selecting from a list of options.</p>
 
                 <CommandForm<FormFieldsCommand>
                     command={FormFieldsCommand}
@@ -539,7 +540,7 @@ export const SliderFieldExample: Story = {
         return (
             <StoryContainer size="sm" asCard>
                 <h2>SliderField</h2>
-                <p>PrimeReact Slider for selecting numeric values visually.</p>
+                <p>Cratis Slider for selecting numeric values visually.</p>
 
                 <CommandForm<FormFieldsCommand>
                     command={FormFieldsCommand}
@@ -563,7 +564,7 @@ export const CheckboxFieldExample: Story = {
         return (
             <StoryContainer size="sm" asCard>
                 <h2>CheckboxField</h2>
-                <p>PrimeReact Checkbox for boolean values.</p>
+                <p>Cratis Checkbox for boolean values.</p>
 
                 <CommandForm<FormFieldsCommand>
                     command={FormFieldsCommand}
@@ -589,7 +590,7 @@ export const CalendarFieldExample: Story = {
         return (
             <StoryContainer size="sm" asCard>
                 <h2>CalendarField</h2>
-                <p>PrimeReact Calendar for selecting date values.</p>
+                <p>Cratis internationalized date picker for selecting date values.</p>
 
                 <CommandForm<FormFieldsCommand>
                     command={FormFieldsCommand}
@@ -612,7 +613,7 @@ export const ColorPickerFieldExample: Story = {
         return (
             <StoryContainer size="sm" asCard>
                 <h2>ColorPickerField</h2>
-                <p>PrimeReact ColorPicker for selecting hex colors.</p>
+                <p>Cratis ColorPicker for selecting hex colors.</p>
 
                 <CommandForm<FormFieldsCommand>
                     command={FormFieldsCommand}
@@ -633,7 +634,7 @@ export const MultiSelectFieldExample: Story = {
         return (
             <StoryContainer size="sm" asCard>
                 <h2>MultiSelectField</h2>
-                <p>PrimeReact MultiSelect for selecting multiple options from a list.</p>
+                <p>Cratis filterable multi-select for selecting several options.</p>
 
                 <CommandForm<FormFieldsCommand>
                     command={FormFieldsCommand}
@@ -646,7 +647,6 @@ export const MultiSelectFieldExample: Story = {
                         options={multiSelectOptions}
                         optionValue="id"
                         optionLabel="name"
-                        display="chip"
                         filter
                     />
                 </CommandForm>
@@ -660,7 +660,7 @@ export const ChipsFieldExample: Story = {
         return (
             <StoryContainer size="sm" asCard>
                 <h2>ChipsField</h2>
-                <p>PrimeReact Chips for entering and managing multiple text values.</p>
+                <p>Cratis Chips field for entering and managing multiple text values.</p>
 
                 <CommandForm<FormFieldsCommand>
                     command={FormFieldsCommand}
@@ -683,23 +683,26 @@ export const RadioButtonFieldExample: Story = {
         return (
             <StoryContainer size="sm" asCard>
                 <h2>RadioButtonField</h2>
-                <p>PrimeReact RadioButton for selecting a single value. Multiple RadioButtonFields bound to the same property form a radio group.</p>
+                <p>Cratis native radio options form one keyboard-navigable group when they share a name.</p>
 
                 <CommandForm<FormFieldsCommand>
                     command={FormFieldsCommand}
                     initialValues={{ radioButton: 'apple' }}
                 >
                     <RadioButtonField<FormFieldsCommand>
+                        name="fruit"
                         value={c => c.radioButton}
                         buttonValue="apple"
                         label="Apple"
                     />
                     <RadioButtonField<FormFieldsCommand>
+                        name="fruit"
                         value={c => c.radioButton}
                         buttonValue="banana"
                         label="Banana"
                     />
                     <RadioButtonField<FormFieldsCommand>
+                        name="fruit"
                         value={c => c.radioButton}
                         buttonValue="cherry"
                         label="Cherry"
@@ -722,7 +725,7 @@ export const RadioGroupFieldExample: Story = {
         return (
             <StoryContainer size="sm" asCard>
                 <h2>RadioGroupField</h2>
-                <p>PrimeReact RadioButton group rendered from an options array.</p>
+                <p>Cratis native radio group rendered from an options array.</p>
 
                 <CommandForm<FormFieldsCommand>
                     command={FormFieldsCommand}
diff --git a/Source/CommandForm/fields/RadioButtonField.tsx b/Source/CommandForm/fields/RadioButtonField.tsx
index 682d676c..8c223669 100644
--- a/Source/CommandForm/fields/RadioButtonField.tsx
+++ b/Source/CommandForm/fields/RadioButtonField.tsx
@@ -14,6 +14,8 @@ interface RadioParts {
 interface RadioButtonFieldComponentProps extends WrappedFieldProps<string | number> {
     label?: string;
     buttonValue: string | number;
+    /** Native group name shared by every option bound to the same property. */
+    name: string;
     className?: string;
     pt?: RadioParts;
     ptOptions?: object;
@@ -35,6 +37,7 @@ export const RadioButtonField = asCommandFormField<RadioButtonFieldComponentProp
             <input
                 {...props.pt?.input}
                 type='radio'
+                name={props.name}
                 checked={props.value === props.buttonValue}
                 onChange={(event) => {
                     if (event.target.checked) props.onChange(props.buttonValue);
diff --git a/Source/CommandForm/fields/RadioGroupField.tsx b/Source/CommandForm/fields/RadioGroupField.tsx
index 83ea2ffd..841accae 100644
--- a/Source/CommandForm/fields/RadioGroupField.tsx
+++ b/Source/CommandForm/fields/RadioGroupField.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 type { HTMLAttributes, InputHTMLAttributes } from 'react';
+import { useId, type HTMLAttributes, type InputHTMLAttributes } from 'react';
 import { asCommandFormField, type WrappedFieldProps } from '@cratis/arc.react/commands';
 
 interface RadioGroupParts {
@@ -17,6 +17,8 @@ interface RadioGroupFieldComponentProps extends WrappedFieldProps<string | numbe
     optionLabel: string;
     optionValue: string;
     layout?: 'horizontal' | 'vertical';
+    /** Native radio-group name. Generated automatically when omitted. */
+    name?: string;
     className?: string;
     pt?: RadioGroupParts;
     ptOptions?: object;
@@ -25,7 +27,11 @@ interface RadioGroupFieldComponentProps extends WrappedFieldProps<string | numbe
 
 /** A visible radio group bound to a string or number property on an Arc command. */
 export const RadioGroupField = asCommandFormField<RadioGroupFieldComponentProps>(
-    (props) => (
+    (props) => {
+        const generatedName = useId();
+        const name = props.name ?? generatedName;
+
+        return (
         <div
             {...props.pt?.root}
             role='radiogroup'
@@ -55,6 +61,7 @@ export const RadioGroupField = asCommandFormField<RadioGroupFieldComponentProps>
                         <input
                             {...props.pt?.input}
                             type='radio'
+                            name={name}
                             checked={props.value === value}
                             onChange={(event) => {
                                 if (event.target.checked) props.onChange(value);
@@ -92,6 +99,7 @@ export const RadioGroupField = asCommandFormField<RadioGroupFieldComponentProps>
                 );
             })}
         </div>
-    ),
+        );
+    },
     { defaultValue: '', extractValue: (value: unknown) => value as string | number },
 );
diff --git a/Source/CommandForm/fields/RatingField.tsx b/Source/CommandForm/fields/RatingField.tsx
index e0e206e3..dbaac47b 100644
--- a/Source/CommandForm/fields/RatingField.tsx
+++ b/Source/CommandForm/fields/RatingField.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 type { HTMLAttributes, InputHTMLAttributes } from 'react';
+import { useId, type HTMLAttributes, type InputHTMLAttributes } from 'react';
 import { asCommandFormField, type WrappedFieldProps } from '@cratis/arc.react/commands';
 
 interface RatingParts {
@@ -13,6 +13,8 @@ interface RatingParts {
 
 interface RatingFieldComponentProps extends WrappedFieldProps<number> {
     stars?: number;
+    /** Native radio-group name. Generated automatically when omitted. */
+    name?: string;
     starAriaLabel?: (starValue: number) => string;
     className?: string;
     pt?: RatingParts;
@@ -22,7 +24,11 @@ interface RatingFieldComponentProps extends WrappedFieldProps<number> {
 
 /** A star rating bound to a number property on an Arc command. */
 export const RatingField = asCommandFormField<RatingFieldComponentProps>(
-    (props) => (
+    (props) => {
+        const generatedName = useId();
+        const name = props.name ?? generatedName;
+
+        return (
         <div
             {...props.pt?.root}
             role='radiogroup'
@@ -54,6 +60,7 @@ export const RatingField = asCommandFormField<RatingFieldComponentProps>(
                         <input
                             {...props.pt?.input}
                             type='radio'
+                            name={name}
                             checked={props.value === starValue}
                             onChange={(event) => {
                                 if (event.target.checked) props.onChange(starValue);
@@ -85,7 +92,8 @@ export const RatingField = asCommandFormField<RatingFieldComponentProps>(
                 );
             })}
         </div>
-    ),
+        );
+    },
     {
         defaultValue: 0,
         extractValue: (value: unknown) => (typeof value === 'number' ? value : 0),
diff --git a/Source/CommandForm/for_radio_fields/when_rendering_native_groups.tsx b/Source/CommandForm/for_radio_fields/when_rendering_native_groups.tsx
new file mode 100644
index 00000000..c4e55c4e
--- /dev/null
+++ b/Source/CommandForm/for_radio_fields/when_rendering_native_groups.tsx
@@ -0,0 +1,97 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import '@cratis/arc/validation';
+import { Command } from '@cratis/arc/commands';
+import { CommandForm } from '@cratis/arc.react/commands';
+import { PropertyDescriptor } from '@cratis/arc/reflection';
+import { expect } from 'chai';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, it } from 'vitest';
+import { RadioButtonField } from '../fields/RadioButtonField';
+import { RadioGroupField } from '../fields/RadioGroupField';
+import { RatingField } from '../fields/RatingField';
+
+class ChooseOptions extends Command {
+    readonly route = '/choose-options';
+    readonly propertyDescriptors = [
+        new PropertyDescriptor('choice', String),
+        new PropertyDescriptor('rating', Number),
+    ];
+    choice = '';
+    rating = 0;
+
+    constructor() {
+        super(Object, false);
+    }
+
+    get requestParameters(): string[] {
+        return [];
+    }
+
+    get properties(): string[] {
+        return ['choice', 'rating'];
+    }
+}
+
+const radioNames = (html: string) =>
+    Array.from(html.matchAll(/<input[^>]+type="radio"[^>]+name="([^"]+)"/g), (match) =>
+        match[1],
+    );
+
+describe('when rendering native radio groups', () => {
+    it('should give generated group options one shared name', () => {
+        const html = renderToStaticMarkup(
+            <CommandForm command={ChooseOptions}>
+                <RadioGroupField<ChooseOptions>
+                    value={(command) => command.choice}
+                    title='Choice'
+                    options={[
+                        { id: 'one', label: 'One' },
+                        { id: 'two', label: 'Two' },
+                    ]}
+                    optionValue='id'
+                    optionLabel='label'
+                />
+            </CommandForm>,
+        );
+        const names = radioNames(html);
+        expect(names).to.have.lengthOf(2);
+        expect(new Set(names).size).to.equal(1);
+    });
+
+    it('should give rating options one shared name', () => {
+        const html = renderToStaticMarkup(
+            <CommandForm command={ChooseOptions}>
+                <RatingField<ChooseOptions>
+                    value={(command) => command.rating}
+                    title='Rating'
+                    stars={3}
+                />
+            </CommandForm>,
+        );
+        const names = radioNames(html);
+        expect(names).to.have.lengthOf(3);
+        expect(new Set(names).size).to.equal(1);
+    });
+
+    it('should preserve an explicit name across separate radio fields', () => {
+        const html = renderToStaticMarkup(
+            <CommandForm command={ChooseOptions}>
+                <RadioButtonField<ChooseOptions>
+                    name='choice'
+                    value={(command) => command.choice}
+                    buttonValue='one'
+                    label='One'
+                />
+                <RadioButtonField<ChooseOptions>
+                    name='choice'
+                    value={(command) => command.choice}
+                    buttonValue='two'
+                    label='Two'
+                />
+            </CommandForm>,
+        );
+        expect(radioNames(html)).to.deep.equal(['choice', 'choice']);
+    });
+});
diff --git a/Source/Common/ActionMenubar.tsx b/Source/Common/ActionMenubar.tsx
index c41a26c7..bb17b232 100644
--- a/Source/Common/ActionMenubar.tsx
+++ b/Source/Common/ActionMenubar.tsx
@@ -39,12 +39,17 @@ export interface ActionMenubarProps {
 }
 
 /** A horizontal, accessible toolbar of command actions. */
-export const ActionMenubar = ({ model, className, pt, ...rest }: ActionMenubarProps) => (
+export const ActionMenubar = ({
+    model,
+    className,
+    pt,
+    'aria-label': ariaLabel,
+}: ActionMenubarProps) => (
     <div
         role='toolbar'
         className={['cratis-action-menubar', className].filter(Boolean).join(' ')}
         data-cratis-part='root'
-        {...rest}
+        aria-label={ariaLabel}
     >
         {model.map((item, index) => {
             if (item.template)
diff --git a/Source/Common/DatePickerInput.css b/Source/Common/DatePickerInput.css
index 7e5e7b6c..6f4375e2 100644
--- a/Source/Common/DatePickerInput.css
+++ b/Source/Common/DatePickerInput.css
@@ -10,6 +10,7 @@
     width: 100%;
 }
 .cratis-date-picker__group {
+    position: relative;
     display: flex;
     width: 100%;
     min-height: 2.5rem;
@@ -35,9 +36,18 @@
     min-width: 0;
     padding: 0.45rem 0.7rem;
 }
-.cratis-date-picker__input:empty::before {
-    content: attr(data-placeholder);
+.cratis-date-picker__group[data-empty='true']:not([data-focus-within])
+    .cratis-date-picker__input {
+    opacity: 0;
+}
+.cratis-date-picker__placeholder {
+    position: absolute;
+    inset-inline-start: 0.7rem;
     color: var(--cratis-text-color-secondary);
+    pointer-events: none;
+}
+.cratis-date-picker__group[data-focus-within] .cratis-date-picker__placeholder {
+    display: none;
 }
 .cratis-date-picker__segment {
     padding: 0 0.1rem;
diff --git a/Source/Common/DatePickerInput.tsx b/Source/Common/DatePickerInput.tsx
index 50907485..bf7f1673 100644
--- a/Source/Common/DatePickerInput.tsx
+++ b/Source/Common/DatePickerInput.tsx
@@ -51,6 +51,7 @@ export interface DatePickerInputPassThrough {
     root?: DatePickerPartAttributes;
     group?: DatePickerPartAttributes;
     input?: DatePickerPartAttributes;
+    placeholder?: DatePickerPartAttributes;
     segment?: DatePickerPartAttributes;
     trigger?: DatePickerButtonAttributes;
     popover?: DatePickerPartAttributes;
@@ -204,6 +205,7 @@ export const DatePickerInput = ({
                         pt?.group?.className,
                     )}
                     data-cratis-part='group'
+                    data-empty={value === null || undefined}
                 >
                     <DateInput
                         className={classNames(
@@ -226,6 +228,19 @@ export const DatePickerInput = ({
                             />
                         )}
                     </DateInput>
+                    {value === null && effectivePlaceholder && (
+                        <span
+                            {...pt?.placeholder}
+                            className={classNames(
+                                'cratis-date-picker__placeholder',
+                                pt?.placeholder?.className,
+                            )}
+                            data-cratis-part='placeholder'
+                            aria-hidden='true'
+                        >
+                            {effectivePlaceholder}
+                        </span>
+                    )}
                     {showIcon && (
                         <Button
                             {...pt?.trigger}
diff --git a/Source/Common/Tooltip.tsx b/Source/Common/Tooltip.tsx
index a1c0d10c..45fb1b3a 100644
--- a/Source/Common/Tooltip.tsx
+++ b/Source/Common/Tooltip.tsx
@@ -38,7 +38,6 @@ export const Tooltip = ({
                     .filter(Boolean)
                     .join(' ')}
                 data-cratis-part='trigger'
-                tabIndex={0}
             >
                 {children}
             </span>
diff --git a/Source/Common/for_DatePickerInput/when_configuring_standard_props.tsx b/Source/Common/for_DatePickerInput/when_configuring_standard_props.tsx
index 7bec88dd..138460d5 100644
--- a/Source/Common/for_DatePickerInput/when_configuring_standard_props.tsx
+++ b/Source/Common/for_DatePickerInput/when_configuring_standard_props.tsx
@@ -88,6 +88,19 @@ describe('when configuring standard DatePickerInput props', () => {
         }
     });
 
+    it('should show the configured placeholder while empty', async () => {
+        const mounted = await mountDatePicker({ placeholder: 'Choose a date' });
+        try {
+            expect(
+                mounted.container.querySelector('[data-cratis-part="placeholder"]')
+                    ?.textContent,
+            ).to.equal('Choose a date');
+            expect(mounted.group.getAttribute('data-empty')).to.equal('true');
+        } finally {
+            await unmountDatePicker(mounted);
+        }
+    });
+
     it('should disable the model and trigger', async () => {
         const mounted = await mountDatePicker({ disabled: true });
         try {
diff --git a/Source/Common/for_Tooltip/when_rendered/and_it_is_not_disabled.ts b/Source/Common/for_Tooltip/when_rendered/and_it_is_not_disabled.ts
index cdf98b47..1d01582f 100644
--- a/Source/Common/for_Tooltip/when_rendered/and_it_is_not_disabled.ts
+++ b/Source/Common/for_Tooltip/when_rendered/and_it_is_not_disabled.ts
@@ -1,15 +1,14 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
+import { expect } from 'chai';
 import React from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, it } from 'vitest';
 import { CratisComponentsProvider } from '../../CratisComponentsProvider';
 import { Tooltip } from '../../Tooltip';
 
-// An enabled tooltip reaches PrimeReact 11's compositional Tooltip, which resolves its
-// configuration from a `PrimeReactProvider` and throws without one — so the trigger is
-// rendered inside the Cratis provider that supplies it. The disabled case needs none,
-// because it never renders a PrimeReact component at all.
+// The provider supplies the locale used by the internal accessible tooltip behavior.
 describe('when Tooltip is rendered and it is not disabled', () => {
     const html = renderToStaticMarkup(
         React.createElement(
@@ -24,10 +23,14 @@ describe('when Tooltip is rendered and it is not disabled', () => {
     );
 
     it('should attach a tooltip to the trigger', () => {
-        html.should.include('cratis-tooltip-trigger');
+        expect(html).to.include('cratis-tooltip-trigger');
     });
 
     it('should render the trigger element', () => {
-        html.should.include('Trigger');
+        expect(html).to.include('Trigger');
+    });
+
+    it('should not add a second tab stop around the trigger', () => {
+        expect(html).not.to.include('tabindex="0"');
     });
 });
diff --git a/Source/DataTables/DataTableCore.tsx b/Source/DataTables/DataTableCore.tsx
index 774e7167..1667ad34 100644
--- a/Source/DataTables/DataTableCore.tsx
+++ b/Source/DataTables/DataTableCore.tsx
@@ -2,6 +2,7 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import React, {
+    useId,
     useMemo,
     useState,
     type CSSProperties,
@@ -225,6 +226,7 @@ export const DataTableCore = <TData extends object>({
     pt,
 }: DataTableCoreProps<TData>) => {
     const columns = useColumns(children);
+    const selectionGroupName = useId();
     const [filters, setFilters] = useState<DataTableFilterMeta>(defaultFilters ?? {});
     const [globalFilter, setGlobalFilter] = useState('');
     const [sort, setSort] = useState<{
@@ -269,6 +271,17 @@ export const DataTableCore = <TData extends object>({
         onFilter?.(next);
     };
 
+    const activateRow = (
+        row: TData,
+        index: number,
+        originalEvent: React.SyntheticEvent,
+    ) => {
+        onRowClick?.({ data: row, index });
+        if (selectionMode === 'single') {
+            onSelectionChange?.({ value: row, originalEvent });
+        }
+    };
+
     const keyOf = (row: TData, index: number) =>
         dataKey
             ? String(valueAtPath(row as Record<string, unknown>, dataKey))
@@ -471,10 +484,18 @@ export const DataTableCore = <TData extends object>({
                                 const rowKey = keyOf(row, rowIndex);
                                 const isSelected =
                                     selectionMode === 'single' && selectedKey === rowKey;
+                                const isInteractive =
+                                    Boolean(onRowClick) || selectionMode === 'single';
                                 return (
                                     <tr
                                         {...pt?.row}
                                         key={rowKey}
+                                        tabIndex={isInteractive ? 0 : pt?.row?.tabIndex}
+                                        aria-selected={
+                                            selectionMode === 'single'
+                                                ? isSelected
+                                                : undefined
+                                        }
                                         className={classNames(
                                             'cratis-datatable__row',
                                             pt?.row?.className,
@@ -482,14 +503,18 @@ export const DataTableCore = <TData extends object>({
                                         )}
                                         data-cratis-part='row'
                                         data-selected={isSelected || undefined}
-                                        onClick={(event) => {
-                                            onRowClick?.({ data: row, index: rowIndex });
-                                            if (selectionMode === 'single') {
-                                                onSelectionChange?.({
-                                                    value: row,
-                                                    originalEvent: event,
-                                                });
+                                        onClick={(event) =>
+                                            activateRow(row, rowIndex, event)
+                                        }
+                                        onKeyDown={(event) => {
+                                            if (
+                                                event.target !== event.currentTarget ||
+                                                (event.key !== 'Enter' && event.key !== ' ')
+                                            ) {
+                                                return;
                                             }
+                                            event.preventDefault();
+                                            activateRow(row, rowIndex, event);
                                         }}
                                     >
                                         {columns.map((column, columnIndex) => (
@@ -512,7 +537,9 @@ export const DataTableCore = <TData extends object>({
                                                 {column.props.selectionMode ? (
                                                     <input
                                                         type='radio'
+                                                        name={selectionGroupName}
                                                         readOnly
+                                                        tabIndex={-1}
                                                         aria-label={selectionAriaLabel}
                                                         checked={isSelected}
                                                     />
diff --git a/Source/DataTables/for_DataTableCore/when_activating_a_row_with_the_keyboard.tsx b/Source/DataTables/for_DataTableCore/when_activating_a_row_with_the_keyboard.tsx
new file mode 100644
index 00000000..a8be31c1
--- /dev/null
+++ b/Source/DataTables/for_DataTableCore/when_activating_a_row_with_the_keyboard.tsx
@@ -0,0 +1,82 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { expect } from 'chai';
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, it, vi } from 'vitest';
+import { Column } from '../Column';
+import { DataTableCore } from '../DataTableCore';
+
+interface Product {
+    id: number;
+    name: string;
+}
+
+describe('when activating a row with the keyboard', () => {
+    let container: HTMLDivElement;
+    let root: Root;
+    const onRowClick = vi.fn();
+    const onSelectionChange = vi.fn();
+
+    beforeEach(async () => {
+        (
+            globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
+        ).IS_REACT_ACT_ENVIRONMENT = true;
+        container = document.createElement('div');
+        document.body.append(container);
+        root = createRoot(container);
+
+        await act(async () => {
+            root.render(
+                <DataTableCore<Product>
+                    data={[{ id: 1, name: 'One' }]}
+                    dataKey='id'
+                    emptyMessage='No products'
+                    selectionMode='single'
+                    onRowClick={onRowClick}
+                    onSelectionChange={onSelectionChange}
+                >
+                    <Column<Product> field='name' header='Name' />
+                </DataTableCore>,
+            );
+        });
+
+        const row = container.querySelector<HTMLTableRowElement>(
+            '[data-cratis-part="row"]',
+        );
+        if (!row) throw new Error('DataTableCore did not render its row.');
+        row.focus();
+        await act(async () => {
+            row.dispatchEvent(
+                new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }),
+            );
+        });
+    });
+
+    afterEach(async () => {
+        await act(async () => root.unmount());
+        container.remove();
+        onRowClick.mockReset();
+        onSelectionChange.mockReset();
+    });
+
+    it('should make the interactive row keyboard focusable', () => {
+        expect(
+            container.querySelector<HTMLTableRowElement>(
+                '[data-cratis-part="row"]',
+            )?.tabIndex,
+        ).to.equal(0);
+    });
+
+    it('should activate row navigation and selection', () => {
+        expect(onRowClick.mock.calls).to.have.lengthOf(1);
+        expect(onSelectionChange.mock.calls).to.have.lengthOf(1);
+        expect(onSelectionChange.mock.calls[0][0].value).to.deep.equal({
+            id: 1,
+            name: 'One',
+        });
+    });
+});
diff --git a/Source/Dialogs/Dialog.tsx b/Source/Dialogs/Dialog.tsx
index 0a3bee09..a86df63f 100644
--- a/Source/Dialogs/Dialog.tsx
+++ b/Source/Dialogs/Dialog.tsx
@@ -4,8 +4,13 @@
 import { DialogResult, DialogButtons, useDialogContext } from '@cratis/arc.react/dialogs';
 import { Dialog as AriaDialog, Heading } from 'react-aria-components/Dialog';
 import { Modal, ModalOverlay } from 'react-aria-components/Modal';
-import type { ButtonHTMLAttributes, CSSProperties, ReactNode } from 'react';
-import { useEffect, useRef } from 'react';
+import type {
+    ButtonHTMLAttributes,
+    CSSProperties,
+    HTMLAttributes,
+    ReactNode,
+} from 'react';
+import { useEffect, useRef, useSyncExternalStore } from 'react';
 import { DialogInitialFocus } from './DialogInitialFocus';
 
 export type CloseDialog = (
@@ -15,15 +20,9 @@ export type CloseDialog = (
 export type ConfirmCallback = () => boolean | void | Promise<boolean> | Promise<void>;
 export type CancelCallback = () => boolean | void | Promise<boolean> | Promise<void>;
 
-interface DialogPartAttributes {
-    id?: string;
-    className?: string;
-    style?: CSSProperties;
-    'aria-label'?: string;
-    'aria-labelledby'?: string;
-    'aria-describedby'?: string;
+type DialogPartAttributes<TElement> = HTMLAttributes<TElement> & {
     [attribute: `data-${string}`]: string | number | boolean | undefined;
-}
+};
 
 type DialogButtonAttributes = Omit<
     ButtonHTMLAttributes<HTMLButtonElement>,
@@ -32,14 +31,14 @@ type DialogButtonAttributes = Omit<
 
 /** Stable Cratis-owned parts for styling a {@link Dialog}. */
 export interface DialogParts {
-    backdrop?: DialogPartAttributes;
-    positioner?: DialogPartAttributes;
-    root?: DialogPartAttributes;
-    header?: DialogPartAttributes;
-    title?: DialogPartAttributes;
+    backdrop?: DialogPartAttributes<HTMLDivElement>;
+    positioner?: DialogPartAttributes<HTMLDivElement>;
+    root?: DialogPartAttributes<HTMLDivElement>;
+    header?: DialogPartAttributes<HTMLElement>;
+    title?: DialogPartAttributes<HTMLHeadingElement>;
     close?: DialogButtonAttributes;
-    content?: DialogPartAttributes;
-    footer?: DialogPartAttributes;
+    content?: DialogPartAttributes<HTMLDivElement>;
+    footer?: DialogPartAttributes<HTMLElement>;
     confirm?: DialogButtonAttributes;
     cancel?: DialogButtonAttributes;
 }
@@ -79,6 +78,14 @@ export interface DialogProps {
 const classNames = (...values: Array<string | undefined>) =>
     values.filter(Boolean).join(' ');
 
+const subscribeToBrowserEnvironment = () => () => undefined;
+const useIsBrowser = () =>
+    useSyncExternalStore(
+        subscribeToBrowserEnvironment,
+        () => true,
+        () => false,
+    );
+
 /**
  * A modal dialog with Arc host integration, typed footer actions, busy/validity
  * state, controlled dismissal, and stable Cratis-owned styling parts.
@@ -114,6 +121,7 @@ export const Dialog = ({
         contextCloseDialog = undefined;
     }
 
+    const isBrowser = useIsBrowser();
     const titleRef = useRef<HTMLHeadingElement>(null);
     const confirmRef = useRef<HTMLButtonElement>(null);
     const cancelRef = useRef<HTMLButtonElement>(null);
@@ -261,11 +269,13 @@ export const Dialog = ({
         <AriaDialog className='cratis-dialog__document'>
             <>
                 <header
+                    {...pt?.header}
                     className={classNames('cratis-dialog__header', pt?.header?.className)}
                     style={pt?.header?.style}
                     data-cratis-part='header'
                 >
                     <Heading
+                        {...pt?.title}
                         slot='title'
                         tabIndex={focusesTitle ? -1 : undefined}
                         ref={titleRef}
@@ -295,6 +305,7 @@ export const Dialog = ({
                     )}
                 </header>
                 <div
+                    {...pt?.content}
                     className={classNames(
                         'cratis-dialog__content',
                         pt?.content?.className,
@@ -306,6 +317,7 @@ export const Dialog = ({
                 </div>
                 {buttons !== null && (
                     <footer
+                        {...pt?.footer}
                         className={classNames(
                             'cratis-dialog__footer',
                             pt?.footer?.className,
@@ -322,21 +334,32 @@ export const Dialog = ({
 
     const dialogStyle = { width, ...pt?.root?.style, ...style };
 
-    if (typeof document === 'undefined') {
+    // useSyncExternalStore supplies the server snapshot during hydration, so this
+    // fallback is identical on the server and on the client's first render. React
+    // switches to the portaled React Aria modal only after hydration completes.
+    if (!isBrowser) {
         if (!visible) return null;
         return (
             <div
-                className={classNames('cratis-dialog__backdrop', pt?.backdrop?.className)}
+                {...pt?.backdrop}
+                className={classNames(
+                    'cratis-dialog__backdrop',
+                    pt?.backdrop?.className,
+                )}
+                style={{ zIndex: 1100, ...pt?.backdrop?.style }}
                 data-cratis-part='backdrop'
             >
                 <div
+                    {...pt?.positioner}
                     className={classNames(
                         'cratis-dialog__positioner',
                         pt?.positioner?.className,
                     )}
+                    style={pt?.positioner?.style}
                     data-cratis-part='positioner'
                 >
                     <section
+                        {...pt?.root}
                         className={classNames(
                             'cratis-dialog',
                             pt?.root?.className,
@@ -354,6 +377,7 @@ export const Dialog = ({
 
     return (
         <ModalOverlay
+            {...pt?.backdrop}
             isOpen={visible}
             onOpenChange={(open) => {
                 if (!open) void handleClose(DialogResult.Cancelled);
@@ -365,6 +389,7 @@ export const Dialog = ({
             data-cratis-part='backdrop'
         >
             <div
+                {...pt?.positioner}
                 className={classNames(
                     'cratis-dialog__positioner',
                     pt?.positioner?.className,
@@ -373,6 +398,7 @@ export const Dialog = ({
                 data-cratis-part='positioner'
             >
                 <Modal
+                    {...pt?.root}
                     className={classNames(
                         'cratis-dialog',
                         pt?.root?.className,
diff --git a/Source/Dialogs/for_Dialog/when_configuring_pass_through_attributes.tsx b/Source/Dialogs/for_Dialog/when_configuring_pass_through_attributes.tsx
new file mode 100644
index 00000000..f3f2bea7
--- /dev/null
+++ b/Source/Dialogs/for_Dialog/when_configuring_pass_through_attributes.tsx
@@ -0,0 +1,61 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { expect } from 'chai';
+import { afterEach, beforeEach, describe, it } from 'vitest';
+import { Dialog } from '../Dialog';
+import { type DialogInTheDom, render, unmount } from './given/a_dialog_in_the_dom';
+
+describe('when configuring pass-through attributes', () => {
+    let dialog: DialogInTheDom;
+
+    beforeEach(async () => {
+        dialog = await render(
+            <Dialog
+                title='Account details'
+                pt={{
+                    backdrop: { id: 'dialog-backdrop', 'data-product-layer': 'modal' },
+                    positioner: { 'aria-label': 'Dialog positioner' },
+                    root: { 'data-product-surface': 'glass' },
+                    header: { 'data-product-header': 'account' },
+                    title: { id: 'account-dialog-title' },
+                    content: { 'aria-describedby': 'account-dialog-help' },
+                    footer: { 'data-product-footer': 'actions' },
+                }}
+            >
+                <span id='account-dialog-help'>Account guidance</span>
+            </Dialog>,
+        );
+    });
+
+    afterEach(async () => {
+        await unmount(dialog);
+    });
+
+    it('should apply ordinary attributes to every configured stable part', () => {
+        expect(document.querySelector('#dialog-backdrop')).not.to.equal(null);
+        expect(
+            document
+                .querySelector('[data-cratis-part="root"]')
+                ?.getAttribute('data-product-surface'),
+        ).to.equal('glass');
+        expect(
+            document
+                .querySelector('[data-cratis-part="header"]')
+                ?.getAttribute('data-product-header'),
+        ).to.equal('account');
+        expect(document.querySelector('#account-dialog-title')).not.to.equal(null);
+        expect(
+            document
+                .querySelector('[data-cratis-part="content"]')
+                ?.getAttribute('aria-describedby'),
+        ).to.equal('account-dialog-help');
+        expect(
+            document
+                .querySelector('[data-cratis-part="footer"]')
+                ?.getAttribute('data-product-footer'),
+        ).to.equal('actions');
+    });
+});
diff --git a/Source/Dialogs/for_Dialog/when_hydrating_server_markup.tsx b/Source/Dialogs/for_Dialog/when_hydrating_server_markup.tsx
new file mode 100644
index 00000000..a85de3ab
--- /dev/null
+++ b/Source/Dialogs/for_Dialog/when_hydrating_server_markup.tsx
@@ -0,0 +1,76 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { expect } from 'chai';
+import { act } from 'react';
+import { hydrateRoot, type Root } from 'react-dom/client';
+import { renderToString } from 'react-dom/server';
+import { afterEach, beforeEach, describe, it, vi } from 'vitest';
+import { CratisComponentsProvider } from '../../Common/CratisComponentsProvider';
+import { Dialog } from '../Dialog';
+
+describe('when hydrating server markup', () => {
+    let container: HTMLDivElement;
+    let root: Root;
+    const hydrationErrors: string[] = [];
+    const originalConsoleError = console.error;
+
+    beforeEach(async () => {
+        (
+            globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
+        ).IS_REACT_ACT_ENVIRONMENT = true;
+        (globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver ??= class {
+            observe() {
+                return undefined;
+            }
+            unobserve() {
+                return undefined;
+            }
+            disconnect() {
+                return undefined;
+            }
+        };
+        vi.spyOn(console, 'error').mockImplementation((...values: unknown[]) => {
+            const message = values.map(String).join(' ');
+            if (/hydration|did not match|server rendered/i.test(message)) {
+                hydrationErrors.push(message);
+            } else {
+                originalConsoleError(...values);
+            }
+        });
+
+        const element = (
+            <CratisComponentsProvider>
+                <Dialog title='Hydrated dialog'>Content</Dialog>
+            </CratisComponentsProvider>
+        );
+        container = document.createElement('div');
+        const serverDocument = new DOMParser().parseFromString(
+            renderToString(element),
+            'text/html',
+        );
+        container.append(...Array.from(serverDocument.body.childNodes));
+        document.body.append(container);
+
+        await act(async () => {
+            root = hydrateRoot(container, element);
+            await new Promise((resolve) => setTimeout(resolve, 50));
+        });
+    });
+
+    afterEach(async () => {
+        await act(async () => root.unmount());
+        container.remove();
+        vi.restoreAllMocks();
+        hydrationErrors.length = 0;
+    });
+
+    it('should preserve the server tree through the first client render', () => {
+        expect(hydrationErrors).to.deep.equal([]);
+        expect(document.querySelector('[data-cratis-part="root"]')).not.to.equal(
+            null,
+        );
+    });
+});
diff --git a/Source/Dropdown/Dropdown.tsx b/Source/Dropdown/Dropdown.tsx
index eb8036c9..f3ac2041 100644
--- a/Source/Dropdown/Dropdown.tsx
+++ b/Source/Dropdown/Dropdown.tsx
@@ -218,6 +218,13 @@ export const Dropdown = <T = unknown,>({
         const option = resolvedOptions.find((candidate) => candidate.key === String(key));
         onChange?.({ value: (option?.value ?? null) as T });
     };
+    const selectOptions = (keys: readonly Key[]) => {
+        const selectedKeys = new Set(keys.map(String));
+        const values = resolvedOptions
+            .filter((option) => selectedKeys.has(option.key))
+            .map((option) => option.value);
+        onChange?.({ value: values as T });
+    };
     // React Aria's Select trigger context does not forward aria-invalid from its Button child.
     // Keep the Cratis validation contract on the actual focusable control after context props merge.
     const applyTriggerInvalidState = (element: HTMLButtonElement | null) => {
@@ -234,6 +241,118 @@ export const Dropdown = <T = unknown,>({
             )
             .map((option) => option.key);
 
+        if (filter) {
+            return (
+                <span
+                    {...pt?.root}
+                    className={rootClassName}
+                    data-cratis-part='root'
+                    data-invalid={effectiveInvalid || undefined}
+                    data-disabled={disabled || undefined}
+                    style={{ ...pt?.root?.style, ...pt?.select?.style, ...style }}
+                    onBlur={onBlur}
+                >
+                    <ComboBox
+                        selectionMode='multiple'
+                        value={selectedKeys}
+                        onChange={selectOptions}
+                        isDisabled={disabled}
+                        isInvalid={effectiveInvalid}
+                        name={name}
+                        aria-label={effectiveAriaLabel}
+                        aria-labelledby={effectiveAriaLabelledby}
+                        aria-describedby={effectiveAriaDescribedby}
+                        allowsEmptyCollection
+                        className='cratis-dropdown__combobox'
+                    >
+                        <Input
+                            {...pt?.filter}
+                            id={triggerId}
+                            placeholder={filterPlaceholder ?? placeholder}
+                            tabIndex={tabIndex}
+                            aria-invalid={effectiveInvalid || undefined}
+                            className={classNames(
+                                'cratis-dropdown__filter',
+                                pt?.input?.className,
+                                pt?.filter?.className,
+                            )}
+                            style={{ ...pt?.input?.style, ...pt?.filter?.style }}
+                            data-cratis-part='filter'
+                        />
+                        <ComboBoxButton
+                            {...pt?.trigger}
+                            className={classNames(
+                                'cratis-dropdown__indicator',
+                                pt?.trigger?.className,
+                            )}
+                            data-cratis-part='trigger'
+                            aria-label={
+                                pt?.trigger?.['aria-label'] ??
+                                pt?.select?.['aria-label'] ??
+                                'Show options'
+                            }
+                        >
+                            <span aria-hidden='true'>⌄</span>
+                        </ComboBoxButton>
+                        {showClear && selectedKeys.length > 0 && (
+                            <button
+                                {...pt?.clear}
+                                type='button'
+                                disabled={disabled}
+                                className={classNames(
+                                    'cratis-dropdown__clear',
+                                    pt?.clear?.className,
+                                )}
+                                data-cratis-part='clear'
+                                aria-label={
+                                    pt?.clear?.['aria-label'] ?? 'Clear selection'
+                                }
+                                onClick={() => onChange?.({ value: [] as T })}
+                            >
+                                <span aria-hidden='true'>×</span>
+                            </button>
+                        )}
+                        <ComboBoxPopover
+                            {...pt?.popover}
+                            className={classNames(
+                                'cratis-dropdown__popover',
+                                pt?.popover?.className,
+                                panelClassName,
+                            )}
+                            style={{ zIndex: 1200, ...pt?.popover?.style }}
+                            data-cratis-part='popover'
+                        >
+                            <ComboBoxListBox
+                                {...pt?.listbox}
+                                items={resolvedOptions}
+                                className={classNames(
+                                    'cratis-dropdown__listbox',
+                                    pt?.listbox?.className,
+                                )}
+                                data-cratis-part='listbox'
+                            >
+                                {(option) => (
+                                    <ComboBoxListBoxItem
+                                        {...pt?.option}
+                                        id={option.key}
+                                        textValue={option.label}
+                                        isDisabled={option.disabled}
+                                        className={classNames(
+                                            'cratis-dropdown__option',
+                                            pt?.option?.className,
+                                        )}
+                                        data-cratis-part='option'
+                                    >
+                                        {option.label}
+                                    </ComboBoxListBoxItem>
+                                )}
+                            </ComboBoxListBox>
+                        </ComboBoxPopover>
+                    </ComboBox>
+                </span>
+            );
+        }
+
         return (
             <span
                 {...pt?.root}
@@ -283,6 +402,22 @@ export const Dropdown = <T = unknown,>({
                         </option>
                     ))}
                 </select>
+                {showClear && selectedKeys.length > 0 && (
+                    <button
+                        {...pt?.clear}
+                        type='button'
+                        disabled={disabled}
+                        className={classNames(
+                            'cratis-dropdown__clear',
+                            pt?.clear?.className,
+                        )}
+                        data-cratis-part='clear'
+                        aria-label={pt?.clear?.['aria-label'] ?? 'Clear selection'}
+                        onClick={() => onChange?.({ value: [] as T })}
+                    >
+                        <span aria-hidden='true'>×</span>
+                    </button>
+                )}
             </span>
         );
     }
@@ -343,6 +478,7 @@ export const Dropdown = <T = unknown,>({
                         <button
                             {...pt?.clear}
                             type='button'
+                            disabled={disabled}
                             className={classNames(
                                 'cratis-dropdown__clear',
                                 pt?.clear?.className,
@@ -365,6 +501,7 @@ export const Dropdown = <T = unknown,>({
                         data-cratis-part='popover'
                     >
                         <ComboBoxListBox
+                            {...pt?.listbox}
                             items={resolvedOptions}
                             className={classNames(
                                 'cratis-dropdown__listbox',
@@ -374,6 +511,7 @@ export const Dropdown = <T = unknown,>({
                         >
                             {(option) => (
                                 <ComboBoxListBoxItem
+                                    {...pt?.option}
                                     id={option.key}
                                     textValue={option.label}
                                     isDisabled={option.disabled}
@@ -454,6 +592,7 @@ export const Dropdown = <T = unknown,>({
                     <button
                         {...pt?.clear}
                         type='button'
+                        disabled={disabled}
                         className={classNames(
                             'cratis-dropdown__clear',
                             pt?.clear?.className,
@@ -476,6 +615,7 @@ export const Dropdown = <T = unknown,>({
                     data-cratis-part='popover'
                 >
                     <ListBox
+                        {...pt?.listbox}
                         items={resolvedOptions}
                         className={classNames(
                             'cratis-dropdown__listbox',
@@ -485,6 +625,7 @@ export const Dropdown = <T = unknown,>({
                     >
                         {(option) => (
                             <ListBoxItem
+                                {...pt?.option}
                                 id={option.key}
                                 textValue={option.label}
                                 isDisabled={option.disabled}
diff --git a/Source/Dropdown/for_Dropdown/when_opened_inside_a_dialog.ts b/Source/Dropdown/for_Dropdown/when_opened_inside_a_dialog.ts
index ada3913d..3f5d8e79 100644
--- a/Source/Dropdown/for_Dropdown/when_opened_inside_a_dialog.ts
+++ b/Source/Dropdown/for_Dropdown/when_opened_inside_a_dialog.ts
@@ -57,6 +57,10 @@ describe('when a dropdown is opened inside a dialog', () => {
                             optionValue: 'id',
                             'aria-label': 'Pick value',
                             panelClassName: 'product-dropdown-panel',
+                            pt: {
+                                listbox: { id: 'product-options' },
+                                option: { 'aria-label': 'Product option' },
+                            },
                         }),
                     }),
                 }),
@@ -119,4 +123,13 @@ describe('when a dropdown is opened inside a dialog', () => {
     it('should map the legacy panel class to the Cratis popover', () => {
         expect(panelUsesTheLegacyClassName).to.equal(true);
     });
+
+    it('should apply ordinary attributes to listbox and option parts', () => {
+        expect(document.querySelector('#product-options')).not.to.equal(null);
+        expect(
+            document
+                .querySelector('[data-cratis-part="option"]')
+                ?.getAttribute('aria-label'),
+        ).to.equal('Product option');
+    });
 });
diff --git a/Source/Dropdown/for_Dropdown/when_rendering_a_filterable_multiple_selection.tsx b/Source/Dropdown/for_Dropdown/when_rendering_a_filterable_multiple_selection.tsx
new file mode 100644
index 00000000..d0f34a4c
--- /dev/null
+++ b/Source/Dropdown/for_Dropdown/when_rendering_a_filterable_multiple_selection.tsx
@@ -0,0 +1,107 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { expect } from 'chai';
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, it, vi } from 'vitest';
+import { CratisComponentsProvider } from '../../Common/CratisComponentsProvider';
+import { Dropdown } from '../Dropdown';
+
+describe('when rendering a filterable multiple selection', () => {
+    let container: HTMLDivElement;
+    let root: Root;
+    const onChange = vi.fn();
+
+    beforeEach(async () => {
+        (
+            globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
+        ).IS_REACT_ACT_ENVIRONMENT = true;
+        (globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver ??= class {
+            observe() {
+                return undefined;
+            }
+            unobserve() {
+                return undefined;
+            }
+            disconnect() {
+                return undefined;
+            }
+        };
+        container = document.createElement('div');
+        document.body.append(container);
+        root = createRoot(container);
+
+        await act(async () => {
+            root.render(
+                <CratisComponentsProvider>
+                    <Dropdown<Array<string>>
+                        multiple
+                        filter
+                        showClear
+                        disabled
+                        value={['one']}
+                        options={[
+                            { label: 'One', value: 'one' },
+                            { label: 'Two', value: 'two' },
+                        ]}
+                        filterPlaceholder='Filter choices'
+                        onChange={onChange}
+                    />
+                </CratisComponentsProvider>,
+            );
+        });
+    });
+
+    afterEach(async () => {
+        await act(async () => root.unmount());
+        container.remove();
+        onChange.mockReset();
+    });
+
+    it('should render the multi-value combobox filter', () => {
+        expect(
+            container.querySelector<HTMLInputElement>(
+                '[data-cratis-part="filter"]',
+            )?.placeholder,
+        ).to.equal('Filter choices');
+    });
+
+    it('should keep the clear action disabled with the control', () => {
+        const clear = container.querySelector<HTMLButtonElement>(
+            '[data-cratis-part="clear"]',
+        );
+        expect(clear?.disabled).to.equal(true);
+        clear?.click();
+        expect(onChange.mock.calls).to.have.lengthOf(0);
+    });
+
+    it('should clear every selected value when enabled', async () => {
+        await act(async () => {
+            root.render(
+                <CratisComponentsProvider>
+                    <Dropdown<Array<string>>
+                        multiple
+                        filter
+                        showClear
+                        value={['one']}
+                        options={[
+                            { label: 'One', value: 'one' },
+                            { label: 'Two', value: 'two' },
+                        ]}
+                        onChange={onChange}
+                    />
+                </CratisComponentsProvider>,
+            );
+        });
+        await act(async () => {
+            container
+                .querySelector<HTMLButtonElement>('[data-cratis-part="clear"]')
+                ?.click();
+        });
+        expect(onChange.mock.calls).to.have.lengthOf(1);
+        expect(onChange.mock.calls[0][0].value).to.deep.equal([]);
+    });
+});
diff --git a/Source/MIGRATION.md b/Source/MIGRATION.md
index eb02c8ea..288d455d 100644
--- a/Source/MIGRATION.md
+++ b/Source/MIGRATION.md
@@ -43,7 +43,7 @@ A custom product design can omit `theme`, define the `--cratis-*` variables itse
 
 ## Simplify the provider
 
-The provider now owns locale and Components-specific labels. It no longer accepts a PrimeUI key, renderer preset, global Prime pass-through map, ripple setting, or renderer defaults.
+The provider now owns locale and Components-specific labels. It temporarily accepts unknown legacy renderer keys so staged source migrations compile, but ignores them. Remove PrimeUI keys, renderer presets, global Prime pass-through maps, ripple settings, and renderer defaults.
 
 ```tsx
 import { CratisComponentsProvider } from '@cratis/components';
@@ -155,7 +155,7 @@ Every meaningful element also carries `data-cratis-part`. Interactive states use
 | Dropdown `option`              | `option`                                       |
 | DatePicker `input`             | segmented `input`; identity belongs on `group` |
 
-See [Stable component parts](Styling/pass-through.md) for the complete contract.
+See the published [Stable component parts](https://cratis.io/components/styling/pass-through/) reference for the documented foundation surfaces.
 
 ### Migrate a deeply customized product
 
@@ -179,6 +179,7 @@ export const productDialogParts: DialogParts = {
 export const productStepperParts: StepperParts = {
     root: { className: 'product-stepper' },
     list: { className: 'product-stepper-list' },
+    step: { className: 'product-stepper-step' },
     header: { className: 'product-stepper-header' },
     number: { className: 'product-stepper-number' },
     title: { className: 'product-stepper-title' },
@@ -187,6 +188,20 @@ export const productStepperParts: StepperParts = {
 };
 ```
 
+For an existing nested Prime stepper preset, map the slots by rendered responsibility:
+
+| Components 3 Prime slot | Components 4 part |
+| ----------------------- | ----------------- |
+| `nav` | `list` |
+| `panelContainer` | `panels` |
+| `stepperpanel.root` | `step` (`<li>`) |
+| `stepperpanel.action` | `header` (`<button>`) |
+| `stepperpanel.number` | `number` |
+| `stepperpanel.title` | `title` |
+| `stepperpanel.content` | `panel` (`<section>`) |
+
+The old `stepperpanel.header` wrapper has no one-to-one element. Put list-item layout on `step`, and interactive-header styling on `header`. Replace `data-p-active` selectors with `[data-cratis-part='step'][data-active='true']`.
+
 Paginator callbacks that formerly returned classes from renderer context must become static Cratis parts plus CSS state selectors:
 
 ```ts
@@ -202,7 +217,19 @@ export const productPaginatorParts: TablePaginatorParts = {
 };
 ```
 
-Use `:disabled`, `:focus-visible`, and the documented `data-cratis-*` states in CSS instead of renderer callback context. The numbered-page renderer is gone; the paginator reports the current page and provides first/previous/next/last actions.
+Pass the parts to either query-backed table:
+
+```tsx
+<DataTableForQuery
+    query={AllProducts}
+    paginatorPt={productPaginatorParts}
+    emptyMessage='No products'
+>
+    <Column field='name' header='Name' />
+</DataTableForQuery>
+```
+
+`DataTableForObservableQuery` uses the same `paginatorPt` prop. Use `:disabled`, `:focus-visible`, and the documented `data-cratis-*` states in CSS instead of renderer callback context. The numbered-page renderer is gone; the paginator reports the current page and provides first/previous/next/last actions.
 
 `Dropdown.inputId` and `Dropdown.panelClassName` remain migration aliases for `id` and `pt.popover.className`, but new code should use the current names.
 
@@ -222,14 +249,14 @@ Use `:disabled`, `:focus-visible`, and the documented `data-cratis-*` states in
 
 Do not assume every Dropdown trigger has `role="combobox"`. Query it by its accessible name or `data-cratis-part="trigger"` in tests.
 
-Multiple selection remains available through the native multiple-select path. Prefer a dedicated collection picker for a large or highly customized multi-select experience.
+Multiple selection uses a native multiple-select when filtering is off and an accessible multi-value combobox when `filter` is enabled. Prefer a dedicated collection picker for a large or highly customized multi-select experience.
 
 ## Update tables
 
 `DataTableCore` now renders semantic HTML. Query-backed paging remains owned by Arc.
 
 - Sorting and filtering apply to the currently loaded page.
-- Complete-result filtering belongs in query arguments and runs on the server before paging.
+- Complete-result filtering and sorting are not automatic table state. Model them in query arguments and implement them in the server query before paging.
 - `clientFiltering` remains temporarily accepted as a deprecated no-op so staged source migrations compile. Remove it: filtering is always scoped to the loaded page, and complete-result filtering belongs on the server before paging.
 - Legacy `{ operator, constraints }` filter entries remain accepted. `operator: 'or'` matches any constraint; all other values match every constraint.
 - `Column` remains the declarative column marker.
@@ -238,6 +265,8 @@ Multiple selection remains available through the native multiple-select path. Pr
 
 Custom matchers registered with `registerDataTableFilterMatcher()` continue to work.
 
+Separate `RadioButtonField` options bound to one property now require the same explicit `name` prop so native arrow-key radio-group navigation works. `RadioGroupField` and `RatingField` generate a shared internal name automatically.
+
 ## Update dialogs and steppers
 
 Dialog callback, busy, validity, dismissal, and initial-focus contracts remain. The modal/focus implementation is now React Aria-based.
@@ -288,4 +317,4 @@ PrimeIcons class strings are still accepted where a component takes an icon node
 7. Verify light, dark, forced-colors, reduced-motion, and responsive layouts.
 8. Run TypeScript, specs, Storybook, and the production build.
 
-For the decision, trade-offs, and validation gates, read [UI foundation](ui-foundation.md). For the older 2.x → 3.x PrimeReact migration, see [Migrate from Components 2 to 3](migration-from-2.md).
+For the decision, trade-offs, and validation gates, read the published [UI foundation](https://cratis.io/components/ui-foundation/) explanation. For the older 2.x → 3.x PrimeReact migration, see [Migrate from Components 2 to 3](https://cratis.io/components/migration-from-2/).
diff --git a/Source/ObjectContentEditor/ObjectContentEditor.tsx b/Source/ObjectContentEditor/ObjectContentEditor.tsx
index 62a480c5..627af902 100644
--- a/Source/ObjectContentEditor/ObjectContentEditor.tsx
+++ b/Source/ObjectContentEditor/ObjectContentEditor.tsx
@@ -418,39 +418,53 @@ export const ObjectContentEditor = ({
 
         if (Array.isArray(value)) {
             return (
-                <div
+                <button
+                    type='button'
                     className='flex items-center gap-2 cursor-pointer'
                     onClick={() => navigateToProperty(propertyName)}
                     style={{
                         color: 'var(--cratis-primary-color)',
                         display: 'flex',
                         alignItems: 'center',
+                        padding: 0,
+                        border: 0,
+                        background: 'transparent',
+                        font: 'inherit',
                     }}
+                    aria-label={`Open ${propertyName}, ${value.length} items`}
                 >
                     <span>Array[{value.length}]</span>
                     <faIcons.FaArrowRight
                         style={{ fontSize: '0.875rem', display: 'inline-flex' }}
+                        aria-hidden='true'
                     />
-                </div>
+                </button>
             );
         }
 
         if (typeof value === 'object') {
             return (
-                <div
+                <button
+                    type='button'
                     className='flex items-center gap-2 cursor-pointer'
                     onClick={() => navigateToProperty(propertyName)}
                     style={{
                         color: 'var(--cratis-primary-color)',
                         display: 'flex',
                         alignItems: 'center',
+                        padding: 0,
+                        border: 0,
+                        background: 'transparent',
+                        font: 'inherit',
                     }}
+                    aria-label={`Open ${propertyName}`}
                 >
                     <span>Object</span>
                     <faIcons.FaArrowRight
                         style={{ fontSize: '0.875rem', display: 'inline-flex' }}
+                        aria-hidden='true'
                     />
-                </div>
+                </button>
             );
         }
 
diff --git a/Source/README.md b/Source/README.md
index 58d5a6f0..179e1db1 100644
--- a/Source/README.md
+++ b/Source/README.md
@@ -188,4 +188,4 @@ The old `@cratis/components/styled`, `styledMode`, `CratisPreset`, and `primeRea
 
 ## License
 
-Cratis Components is MIT licensed. Its default runtime dependencies are Apache-2.0 or MIT licensed. Components 4 does not require PrimeUI licensing.
+Cratis Components is MIT licensed. Its default runtime dependencies use permissive open-source licenses, including Apache-2.0, MIT, and ISC. Components 4 does not require PrimeUI licensing.
diff --git a/Source/SchemaEditor/SchemaEditor.tsx b/Source/SchemaEditor/SchemaEditor.tsx
index 8be03f28..771bd6f8 100644
--- a/Source/SchemaEditor/SchemaEditor.tsx
+++ b/Source/SchemaEditor/SchemaEditor.tsx
@@ -138,7 +138,10 @@ export const SchemaEditor = ({
     className,
     labels,
 }: SchemaEditorProps) => {
-    const l = { ...defaultSchemaEditorLabels, ...labels };
+    const l = useMemo(
+        () => ({ ...defaultSchemaEditorLabels, ...labels }),
+        [labels],
+    );
     const [currentPath, setCurrentPath] = useState<string[]>([]);
     const [properties, setProperties] = useState<JsonSchemaProperty[]>([]);
     const [currentSchema, setCurrentSchema] = useState<JsonSchema>(schema);
@@ -502,6 +505,7 @@ export const SchemaEditor = ({
             hasValidationErrors,
             saveDisabled,
             cancelDisabled,
+            l,
         ],
     );
 
diff --git a/rollup.config.mjs b/rollup.config.mjs
index 0f38296d..6b7987e9 100644
--- a/rollup.config.mjs
+++ b/rollup.config.mjs
@@ -7,6 +7,7 @@ import peerDepsExternal from 'rollup-plugin-peer-deps-external';
 import { existsSync, readdirSync, readFileSync, writeFileSync, mkdirSync } from 'fs';
 import { dirname, join, relative, resolve } from 'path';
 import { createRequire } from 'module';
+import ts from 'typescript';
 
 /** Stylesheets that are entry points or token layers in their own right, not component rules. */
 const STANDALONE_STYLESHEETS = new Set([
@@ -176,6 +177,36 @@ function findEmittedModules(directory, found = []) {
     return found;
 }
 
+/** Returns module-specifier string literals without matching comments or runtime strings. */
+function moduleSpecifiers(sourceFile) {
+    const specifiers = [];
+    const visit = (node) => {
+        if (
+            (ts.isImportDeclaration(node) || ts.isExportDeclaration(node)) &&
+            node.moduleSpecifier &&
+            ts.isStringLiteralLike(node.moduleSpecifier)
+        ) {
+            specifiers.push(node.moduleSpecifier);
+        } else if (
+            ts.isCallExpression(node) &&
+            node.expression.kind === ts.SyntaxKind.ImportKeyword &&
+            node.arguments.length === 1 &&
+            ts.isStringLiteralLike(node.arguments[0])
+        ) {
+            specifiers.push(node.arguments[0]);
+        } else if (
+            ts.isImportTypeNode(node) &&
+            ts.isLiteralTypeNode(node.argument) &&
+            ts.isStringLiteralLike(node.argument.literal)
+        ) {
+            specifiers.push(node.argument.literal);
+        }
+        ts.forEachChild(node, visit);
+    };
+    visit(sourceFile);
+    return specifiers;
+}
+
 /** Makes every relative ESM specifier directly executable by Node. */
 function fixRelativeEsmSpecifiers(esmPath) {
     return {
@@ -183,17 +214,30 @@ function fixRelativeEsmSpecifiers(esmPath) {
         closeBundle() {
             for (const file of findEmittedModules(esmPath)) {
                 const source = readFileSync(file, 'utf8');
-                const rewritten = source
-                    .replace(
-                        /((?:from\s*|import\s*)['"])(\.\.?\/[^'"]+)(['"])/g,
-                        (_match, before, specifier, after) =>
-                            `${before}${resolvedRelativeSpecifier(file, specifier)}${after}`,
-                    )
-                    .replace(
-                        /(import\(\s*['"])(\.\.?\/[^'"]+)(['"]\s*\))/g,
-                        (_match, before, specifier, after) =>
-                            `${before}${resolvedRelativeSpecifier(file, specifier)}${after}`,
-                    );
+                const sourceFile = ts.createSourceFile(
+                    file,
+                    source,
+                    ts.ScriptTarget.Latest,
+                    true,
+                    file.endsWith('.d.ts') ? ts.ScriptKind.TS : ts.ScriptKind.JS,
+                );
+                const replacements = moduleSpecifiers(sourceFile)
+                    .map((node) => ({
+                        start: node.getStart(sourceFile) + 1,
+                        end: node.getEnd() - 1,
+                        specifier: resolvedRelativeSpecifier(file, node.text),
+                        original: node.text,
+                    }))
+                    .filter(({ specifier, original }) => specifier !== original)
+                    .sort((left, right) => right.start - left.start);
+
+                let rewritten = source;
+                for (const replacement of replacements) {
+                    rewritten =
+                        rewritten.slice(0, replacement.start) +
+                        replacement.specifier +
+                        rewritten.slice(replacement.end);
+                }
                 if (rewritten !== source) writeFileSync(file, rewritten);
             }
         },

From 254f0855ccbeeea2184bb2fe12d8842386a839eb Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Sun, 23 Aug 2026 15:58:11 +0200
Subject: [PATCH 015/267] Format Components 4 review fixes

Apply the repository formatters after the accessibility and migration review changes, and remove the last stale PrimeReact architecture reference from the authoritative corpus.
---
 .ai/agents/code-reviewer.md                   |  22 +-
 .ai/agents/frontend-developer.md              |  57 ++-
 .ai/rules/framework.md                        |  12 +-
 .ai/rules/frontend-testing.md                 |  16 +-
 .ai/rules/general.md                          |  80 ++--
 .ai/rules/react.md                            | 114 +++--
 .ai/rules/storybook.md                        |  15 +-
 .ai/rules/vertical-slices.md                  |  93 ++--
 .ai/skills/new-vertical-slice/SKILL.md        |  13 +-
 .ai/skills/review-code/SKILL.md               |   5 +-
 .../CommandForm/multi-select-field.md         |   2 +-
 .../CommandForm/radio-button-field.md         |  35 +-
 .../CommandForm/radio-group-field.md          |  36 +-
 Documentation/CommandForm/rating-field.md     |  30 +-
 Documentation/Styling/pass-through.md         |  32 +-
 Documentation/migration.md                    |  18 +-
 Source/CommandForm/fields/Fields.stories.tsx  | 443 ++++++++++--------
 Source/CommandForm/fields/RadioGroupField.tsx | 117 ++---
 Source/CommandForm/fields/RatingField.tsx     | 120 ++---
 .../when_rendering_native_groups.tsx          |   5 +-
 Source/DataTables/DataTableCore.tsx           |   3 +-
 ...hen_activating_a_row_with_the_keyboard.tsx |   5 +-
 Source/Dialogs/Dialog.tsx                     |   5 +-
 .../when_hydrating_server_markup.tsx          |   4 +-
 ...dering_a_filterable_multiple_selection.tsx |   5 +-
 Source/MIGRATION.md                           |  18 +-
 Source/SchemaEditor/SchemaEditor.tsx          |   5 +-
 27 files changed, 711 insertions(+), 599 deletions(-)

diff --git a/.ai/agents/code-reviewer.md b/.ai/agents/code-reviewer.md
index 558fbd58..bf8778d3 100644
--- a/.ai/agents/code-reviewer.md
+++ b/.ai/agents/code-reviewer.md
@@ -1,16 +1,16 @@
 ---
 name: Code Reviewer
 description: >
-  Quality gate agent for Cratis-based projects. Reviews code against all
-  project instruction files, checking architecture conformance, C# and
-  TypeScript conventions, and vertical slice correctness before merge.
+    Quality gate agent for Cratis-based projects. Reviews code against all
+    project instruction files, checking architecture conformance, C# and
+    TypeScript conventions, and vertical slice correctness before merge.
 model: claude-sonnet-4-5
 tools:
-  - githubRepo
-  - codeSearch
-  - usages
-  - rename
-  - terminalLastCommand
+    - githubRepo
+    - codeSearch
+    - usages
+    - rename
+    - terminalLastCommand
 ---
 
 # Code Reviewer
@@ -25,6 +25,7 @@ Always check against the canonical rules in `.ai/rules/` (and `general.md`): `ve
 ## Review approach
 
 Review every changed file. For each issue found:
+
 - State the **file and line number**
 - Quote the **problematic code**
 - Explain **why it violates the standard**
@@ -138,11 +139,12 @@ When checking for unused code, missing references, or naming consistency, prefer
 ## Output format
 
 Start with a **summary**:
+
 > **Review result: ✅ Approved / ⚠️ Approved with comments / ❌ Changes requested**
 
 Then list issues grouped by file:
 
-```
+````
 ### <file path>
 
 **[BLOCKING]** … or **[SUGGESTION]** …
@@ -152,6 +154,6 @@ Then list issues grouped by file:
 > ```
 > corrected code
 > ```
-```
+````
 
 End with a checklist of passed / failed items so the developer knows what was verified.
diff --git a/.ai/agents/frontend-developer.md b/.ai/agents/frontend-developer.md
index 3b726fb5..d769f264 100644
--- a/.ai/agents/frontend-developer.md
+++ b/.ai/agents/frontend-developer.md
@@ -1,16 +1,16 @@
 ---
 name: Frontend Developer
 description: >
-  Specialist for TypeScript/React frontend code within a vertical slice.
-  Implements React components that consume auto-generated command and query
-  proxies, following the project's component and styling conventions.
+    Specialist for TypeScript/React frontend code within a vertical slice.
+    Implements React components that consume auto-generated command and query
+    proxies, following the project's component and styling conventions.
 model: claude-sonnet-4-5
 tools:
-  - githubRepo
-  - codeSearch
-  - usages
-  - rename
-  - terminalLastCommand
+    - githubRepo
+    - codeSearch
+    - usages
+    - rename
+    - terminalLastCommand
 ---
 
 # Frontend Developer
@@ -19,6 +19,7 @@ You are the **Frontend Developer** for Cratis-based projects.
 Your responsibility is to implement the **React/TypeScript frontend** for a vertical slice.
 
 Always read and follow the canonical rules in `.ai/rules/`:
+
 - `react.md` — MVVM, Arc query/command hooks, Cratis Components
 - `components.md` — component structure, styling, icons
 - `dialogs.md` — `CommandDialog` / `Dialog` / `StepperCommandDialog`
@@ -91,16 +92,19 @@ export const Listing = () => {
 
     return (
         <DataTable
-            lazy paginator
+            lazy
+            paginator
             value={allProjectsResult.data}
             rows={pageSize}
             totalRecords={allProjectsResult.paging.totalItems}
             alwaysShowPaginator={false}
             first={allProjectsResult.paging.page * pageSize}
-            onPage={event => setPage(event.page ?? 0)}
-            scrollable scrollHeight="flex"
-            emptyMessage="No items found.">
-            <Column field="name" header="Name" />
+            onPage={(event) => setPage(event.page ?? 0)}
+            scrollable
+            scrollHeight='flex'
+            emptyMessage='No items found.'
+        >
+            <Column field='name' header='Name' />
         </DataTable>
     );
 };
@@ -124,16 +128,16 @@ export const AddProject = ({ closeDialog }: DialogProps) => {
     return (
         <CommandDialog<RegisterProject>
             command={RegisterProject}
-            title="Add Project"
-            okLabel="Add"
-            cancelLabel="Cancel"
+            title='Add Project'
+            okLabel='Add'
+            cancelLabel='Cancel'
             onConfirm={() => closeDialog(DialogResult.Ok)}
             onCancel={() => closeDialog(DialogResult.Cancelled)}
         >
             <InputTextField<RegisterProject>
-                value={instance => instance.name}
-                title="Project name"
-                placeholder="Enter a name"
+                value={(instance) => instance.name}
+                title='Project name'
+                placeholder='Enter a name'
             />
         </CommandDialog>
     );
@@ -159,18 +163,18 @@ export const AddProject = ({ closeDialog }: DialogProps<{ name: string }>) => {
 
     return (
         <Dialog
-            title="Add Project"
+            title='Add Project'
             width='32rem'
-            okLabel="Add"
-            cancelLabel="Cancel"
+            okLabel='Add'
+            cancelLabel='Cancel'
             isValid={isValid}
             onConfirm={() => closeDialog(DialogResult.Ok, { name })}
             onCancel={() => closeDialog(DialogResult.Cancelled)}
         >
             <InputText
                 value={name}
-                onChange={event => setName(event.target.value)}
-                placeholder="Enter a name"
+                onChange={(event) => setName(event.target.value)}
+                placeholder='Enter a name'
                 autoFocus
             />
         </Dialog>
@@ -199,8 +203,8 @@ export const Projects = () => {
     // (it owns the action bar). PrimeReact 11 removed the standalone `Menubar`;
     // for a custom toolbar, compose `Button`s (content is children in v11).
     return (
-        <Page title="Projects">
-            <Button variant="text" onClick={() => showAddProjectDialog()}>
+        <Page title='Projects'>
+            <Button variant='text' onClick={() => showAddProjectDialog()}>
                 <mdIcons.MdAdd />
                 <span>Add Project</span>
             </Button>
@@ -216,6 +220,7 @@ export const Projects = () => {
 ## Browser verification (optional)
 
 If the workspace has `workbench.browser.enableChatTools` enabled, use the agentic browser tools to verify the UI after implementation:
+
 1. Open the app page in the integrated browser.
 2. Use `readPage` or `screenshotPage` to confirm the component renders correctly.
 3. Use `clickElement` or `typeInPage` to test interactive elements.
diff --git a/.ai/rules/framework.md b/.ai/rules/framework.md
index 1592507a..b8c634d3 100644
--- a/.ai/rules/framework.md
+++ b/.ai/rules/framework.md
@@ -1,17 +1,17 @@
 ---
-applyTo: "**/*"
+applyTo: '**/*'
 profile: framework
 ---
 
 # Framework Profile — Contributing to Cratis Itself
 
-> **Framework profile only.** This applies when you are working **inside a Cratis framework repository** (Arc, Chronicle, Fundamentals, Components, Specifications, and the like) — building the framework. If you are building an *application on* Cratis, ignore this file and follow the Application profile (`general.md` + `vertical-slices.md`).
+> **Framework profile only.** This applies when you are working **inside a Cratis framework repository** (Arc, Chronicle, Fundamentals, Components, Specifications, and the like) — building the framework. If you are building an _application on_ Cratis, ignore this file and follow the Application profile (`general.md` + `vertical-slices.md`).
 
 The framework repos are **libraries**, not event-sourced applications. The application-profile architecture — vertical slices, model-bound `[Command]`/`[ReadModel]` artifacts, projections/read-models, reactors, MVVM app components — **does not exist here and must not be imposed**. A Cratis framework repo has its own architecture per its purpose.
 
 ## What still applies (universal rules)
 
-Everything tagged `profile: universal` holds in framework repos exactly as in apps: **C# conventions** (`csharp.md`), **TypeScript conventions** (`typescript.md`), **code quality** (`code-quality*.md`), **specs** (`specs.md` / `specs.csharp.md` / `specs.typescript.md` — `Cratis.Specifications` is how the framework tests itself, using the plain `Specification` base + NSubstitute against the classes under test — this is the dominant mode in framework repos. The in-process `*Scenario` family lives in `specs.scenarios.csharp.md` (`profile: application`); it is the *application* default, and a framework repo reaches for it only to test the very engine it provides — Arc → `CommandScenario`, Chronicle → `EventScenario`/`ReadModelScenario`/`ReactorScenario` — not as a general testing mode. The **write-specs** skill is application-oriented), **documentation**, **git-commits**, **pull-requests**, **concepts** (`ConceptAs<T>` / `EventSourceId<T>` are Fundamentals/Chronicle primitives the framework defines and uses), and **American English**.
+Everything tagged `profile: universal` holds in framework repos exactly as in apps: **C# conventions** (`csharp.md`), **TypeScript conventions** (`typescript.md`), **code quality** (`code-quality*.md`), **specs** (`specs.md` / `specs.csharp.md` / `specs.typescript.md` — `Cratis.Specifications` is how the framework tests itself, using the plain `Specification` base + NSubstitute against the classes under test — this is the dominant mode in framework repos. The in-process `*Scenario` family lives in `specs.scenarios.csharp.md` (`profile: application`); it is the _application_ default, and a framework repo reaches for it only to test the very engine it provides — Arc → `CommandScenario`, Chronicle → `EventScenario`/`ReadModelScenario`/`ReactorScenario` — not as a general testing mode. The **write-specs** skill is application-oriented), **documentation**, **git-commits**, **pull-requests**, **concepts** (`ConceptAs<T>` / `EventSourceId<T>` are Fundamentals/Chronicle primitives the framework defines and uses), and **American English**.
 
 ## What does NOT apply
 
@@ -24,7 +24,7 @@ Each framework repo is organized by what it builds, not by feature slices:
 - **Fundamentals** — the base library. `ConceptAs<T>`, type discovery (`IInstancesOf<T>` / `IImplementationsOf<T>`), serialization, common primitives. `Source/DotNET` (C#) + `Source/JavaScript` (`@cratis/fundamentals`) + the shared ESLint config.
 - **Arc** — the CQRS + model-binding + proxy-generation engine. `Source/DotNET` (the command/query pipeline, validation, authorization, identity, the Roslyn **proxy generator**) + `Source/JavaScript` (`@cratis/arc`, `@cratis/arc.react`, `@cratis/arc.react.mvvm`). Arc.Core does **not** depend on Chronicle.
 - **Chronicle** — the event-sourcing engine. `Source/Kernel` (the engine: **Orleans grains**, event sequences, observers/projections/reducers, storage providers — MongoDB and others), `Source/Clients` (the client SDKs incl. `DotNET` and `Testing`), `Infrastructure`, `Tools`, `Workbench`. The kernel is the deep, performance- and consistency-critical core.
-- **Components** — the React component library with Cratis-owned markup, public types, tokens, and stable parts. It uses React Aria internally for complex accessible interactions and semantic native HTML where simpler. `Source/<Component>/` holds each component (`CommandDialog`, `DataPage`, `DataTables`, …) with Storybook stories; the package is published as `@cratis/components`. (Application rules *consume* these components; here you *build* them.)
+- **Components** — the React component library with Cratis-owned markup, public types, tokens, and stable parts. It uses React Aria internally for complex accessible interactions and semantic native HTML where simpler. `Source/<Component>/` holds each component (`CommandDialog`, `DataPage`, `DataTables`, …) with Storybook stories; the package is published as `@cratis/components`. (Application rules _consume_ these components; here you _build_ them.)
 
 Repo conventions follow from this: `Source/DotNET` + `Source/JavaScript` for dual-stack libraries; `Kernel` vs `Clients` for Chronicle; a folder-per-component library layout for Components. Match the structure of the area you are editing — do not introduce app-style layouts.
 
@@ -32,10 +32,10 @@ Repo conventions follow from this: `Source/DotNET` + `Source/JavaScript` for dua
 
 - **Public API design is the product.** These libraries are consumed by every Cratis app, so the **Lovable APIs** value (`general.md`) is paramount: sane defaults, convention over configuration, extensible/overridable, minimal boilerplate. Design the API the app developer will love before the implementation.
 - **Backward compatibility is a contract.** A change to a public type, attribute, interface, or generated-proxy shape is a breaking change for every downstream app — label PRs by semver impact (`major`/`minor`/`patch`) and treat removals/renames of public surface as `major`.
-- **Convention discovery is built here.** `IInstancesOf<T>` / `IImplementationsOf<T>`, attribute-based discovery, and source generation are the mechanisms the framework *provides*; use them internally too rather than hand-registration where a convention fits.
+- **Convention discovery is built here.** `IInstancesOf<T>` / `IImplementationsOf<T>`, attribute-based discovery, and source generation are the mechanisms the framework _provides_; use them internally too rather than hand-registration where a convention fits.
 - **Source generators / analyzers** (Arc's proxy generator, Fundamentals) follow Roslyn conventions; their output is consumed verbatim by apps, so treat generated shape as public API.
 - **Orleans grains** in the Chronicle kernel follow `orleans.md`.
-- **An alternate implementation of an interface must match the primary one's *semantics*, not just its signature.** Chronicle ships several implementations of the same storage interfaces (MongoDB, SQL, in-memory) and the in-memory ones exist precisely so the real kernel code paths can run without infrastructure. When you touch one, **diff it against the persistent implementations** — the signature tells you nothing about the contract. The specific trap: query criteria carry **sentinels meaning "do not narrow"** (`EventSourceId.Unspecified`, `EventSourceType.Unspecified`/`Default`, `EventStreamType.All`, `EventStreamId.Default`, an empty event-type set). Callers asking for "everything" pass those sentinels, never `null`, so a plain `is not null` check narrows every row away and the read silently returns nothing. A divergence here does not fail — it makes specs pass vacuously, which is worse.
+- **An alternate implementation of an interface must match the primary one's _semantics_, not just its signature.** Chronicle ships several implementations of the same storage interfaces (MongoDB, SQL, in-memory) and the in-memory ones exist precisely so the real kernel code paths can run without infrastructure. When you touch one, **diff it against the persistent implementations** — the signature tells you nothing about the contract. The specific trap: query criteria carry **sentinels meaning "do not narrow"** (`EventSourceId.Unspecified`, `EventSourceType.Unspecified`/`Default`, `EventStreamType.All`, `EventStreamId.Default`, an empty event-type set). Callers asking for "everything" pass those sentinels, never `null`, so a plain `is not null` check narrows every row away and the read silently returns nothing. A divergence here does not fail — it makes specs pass vacuously, which is worse.
 - **A stub that silently succeeds is a bug, not a placeholder.** An unimplemented method returning `Task.CompletedTask`/an empty result lets a spec assert on work that never happened. Implement it, or make it fail loudly — never leave it quietly lying.
 - **Specs** use `Cratis.Specifications` (the `Establish`/`Because`/`should_` BDD style) with NSubstitute — the same philosophy as apps, without the Arc/Chronicle `*Scenario` app-testing helpers.
 - **Treat "no spec touches this public API" as a defect in itself.** Public surface with zero coverage is where silent breakage lives — an entire read surface, including two shipped assertion helpers, was once dead in `Cratis.Chronicle.Testing` because nothing ever called it. When adding public API, add at least one spec that exercises it end to end.
diff --git a/.ai/rules/frontend-testing.md b/.ai/rules/frontend-testing.md
index 034620fc..1bc33ca9 100644
--- a/.ai/rules/frontend-testing.md
+++ b/.ai/rules/frontend-testing.md
@@ -1,9 +1,9 @@
 ---
-applyTo: "**/for_*/**/*.{ts,tsx}"
+applyTo: '**/for_*/**/*.{ts,tsx}'
 profile: application
 paths:
-  - "**/for_*/**/*.ts"
-  - "**/for_*/**/*.tsx"
+    - '**/for_*/**/*.ts'
+    - '**/for_*/**/*.tsx'
 ---
 
 # Frontend Testing
@@ -30,10 +30,10 @@ Tests live next to the unit they specify:
             and_<extra_context>.ts
 ```
 
-| Shape | Use for |
-|---|---|
+| Shape                                         | Use for                                                       |
+| --------------------------------------------- | ------------------------------------------------------------- |
 | `for_<Subject>/when_<context>/and_<extra>.ts` | default — view models, helpers with branches, component specs |
-| `for_<Subject>/when_<context>.ts` | tiny pure-helper spec with no useful extra context |
+| `for_<Subject>/when_<context>.ts`             | tiny pure-helper spec with no useful extra context            |
 
 snake_case file/folder names so the path reads as a scenario sentence. Use `should` in `it()` descriptions (spaces, not underscores — TS specs read as human sentences). Don't add `.test.ts`/`.spec.ts` files unless the config changes intentionally.
 
@@ -97,7 +97,9 @@ describe('when rendered while busy', () => {
             React.createElement(Button, { loading: true, label: 'Save' }),
         );
     });
-    it('should disable the action', () => { html.should.include('disabled'); });
+    it('should disable the action', () => {
+        html.should.include('disabled');
+    });
 });
 ```
 
diff --git a/.ai/rules/general.md b/.ai/rules/general.md
index 5563d379..51d07774 100644
--- a/.ai/rules/general.md
+++ b/.ai/rules/general.md
@@ -2,14 +2,14 @@
 
 Cratis repositories come in **two profiles**, and the rules are scoped to them. **Identify your profile first** — it decides which rules apply.
 
-- **Application profile (default)** — you are *building an application on Cratis*: event-sourced CQRS with **Cratis Chronicle** + **Cratis Arc**, vertical slices, read models persisted to MongoDB/EF Core, and a React + Cratis Components (PrimeReact) frontend in MVVM. Most of this corpus targets this profile.
-- **Framework profile** — you are *contributing to a Cratis framework repository itself* (Arc, Chronicle, Fundamentals, Components, …). These are **libraries** — source generators, the Chronicle kernel (Orleans grains + storage), client SDKs, a React component library — **not** vertical-slice event-sourced apps. The application-architecture rules here **do not apply**; follow **[framework.md](./framework.md)**.
+- **Application profile (default)** — you are _building an application on Cratis_: event-sourced CQRS with **Cratis Chronicle** + **Cratis Arc**, vertical slices, read models persisted to MongoDB/EF Core, and a React + Cratis Components frontend in MVVM. Most of this corpus targets this profile.
+- **Framework profile** — you are _contributing to a Cratis framework repository itself_ (Arc, Chronicle, Fundamentals, Components, …). These are **libraries** — source generators, the Chronicle kernel (Orleans grains + storage), client SDKs, a React component library — **not** vertical-slice event-sourced apps. The application-architecture rules here **do not apply**; follow **[framework.md](./framework.md)**.
 
-**How to tell:** if the repo's own package is `Cratis.*` / `@cratis/*` and it *builds* the framework, you are in the framework profile. If it *consumes* Cratis to build a product, you are in the application profile.
+**How to tell:** if the repo's own package is `Cratis.*` / `@cratis/*` and it _builds_ the framework, you are in the framework profile. If it _consumes_ Cratis to build a product, you are in the application profile.
 
-Profile-specific rules declare a **`profile:`** in their frontmatter (`application` or `framework`); a rule **without** one is **universal** and applies everywhere — C#/TypeScript style, code quality, specs (`Cratis.Specifications`), documentation, commits/PRs, American English. In this file, everything from **Project Layout** through the **Implementation Workflow** is *application profile* (skip to the Framework profile section if you're contributing to the framework); Philosophy, Authority, Verification, Quality Gates, and the closing sections are universal.
+Profile-specific rules declare a **`profile:`** in their frontmatter (`application` or `framework`); a rule **without** one is **universal** and applies everywhere — C#/TypeScript style, code quality, specs (`Cratis.Specifications`), documentation, commits/PRs, American English. In this file, everything from **Project Layout** through the **Implementation Workflow** is _application profile_ (skip to the Framework profile section if you're contributing to the framework); Philosophy, Authority, Verification, Quality Gates, and the closing sections are universal.
 
-> **Arc is a standalone CQRS framework — not bound to event sourcing.** Even within the application profile, Arc provides model-bound commands/queries, validation, authorization, and full-stack proxy generation, and works **without** Chronicle (Arc.Core does not depend on Chronicle). A `[Command]` `Handle()` does not *have* to append events — it can return a response, return `void`, or work through injected services. The event-sourcing behavior (a returned event gets appended; `EventForEventSourceId`; "never inject `IEventLog`") comes from the **Arc + Chronicle** integration. This application is event-sourced, so the slice guidance assumes event-sourced commands — read the event-centric rules as the *house default for this app*, not universal Arc laws.
+> **Arc is a standalone CQRS framework — not bound to event sourcing.** Even within the application profile, Arc provides model-bound commands/queries, validation, authorization, and full-stack proxy generation, and works **without** Chronicle (Arc.Core does not depend on Chronicle). A `[Command]` `Handle()` does not _have_ to append events — it can return a response, return `void`, or work through injected services. The event-sourcing behavior (a returned event gets appended; `EventForEventSourceId`; "never inject `IEventLog`") comes from the **Arc + Chronicle** integration. This application is event-sourced, so the slice guidance assumes event-sourced commands — read the event-centric rules as the _house default for this app_, not universal Arc laws.
 
 The framework is convention-over-configuration. **Idiomatic Cratis is the goal — not custom abstractions over it.** When something is unclear, prefer the Cratis convention; do not invent. The rules and skills under `.ai/` are the authoritative answer — if your question is not answered there, ask rather than inferring framework behavior from package internals.
 
@@ -52,9 +52,9 @@ Default to agentic behavior: inspect local rules, skills, code, tests, and gener
 
 ## Verification Discipline
 
-A claim is only as good as the signal behind it — a build result, a test run, a lint pass, observed app behavior — not the model's own confidence. Internal reasoning *plans* the work; external signals *confirm* it.
+A claim is only as good as the signal behind it — a build result, a test run, a lint pass, observed app behavior — not the model's own confidence. Internal reasoning _plans_ the work; external signals _confirm_ it.
 
-- **Confirm "done"/"fixed"/"correct" against a fresh signal — never self-assessment.** Run the relevant gate and observe it pass *this time*.
+- **Confirm "done"/"fixed"/"correct" against a fresh signal — never self-assessment.** Run the relevant gate and observe it pass _this time_.
 - **After a fix, re-run the gate that failed.** Don't argue yourself to green.
 - **A green build is not behavioral correctness.** Compilation proves it builds, not that the slice does the right thing — that's what specs and exercising the UI are for.
 - **Report with inspectable evidence, and name what you didn't verify.**
@@ -89,14 +89,14 @@ The framework discovers commands and read models by attributes and static method
 
 ## Slice Types
 
-Pick exactly one type per slice folder — determined by what the slice *does*.
+Pick exactly one type per slice folder — determined by what the slice _does_.
 
-| Type | What it does | Contents |
-|---|---|---|
-| **State Change** | Accepts a command, appends events | Command + validator + event(s); optional `[Passive]` read model for command-side decisions |
-| **State View** | Projects events into a queryable read model | `[ReadModel]` + model-bound projection + static query method(s) |
-| **Automation** | Reacts to events, calls external systems / `ICommandPipeline` | Reactor only |
-| **Translation** | Reacts to events and appends follow-up events to another stream | Reactor only |
+| Type             | What it does                                                    | Contents                                                                                   |
+| ---------------- | --------------------------------------------------------------- | ------------------------------------------------------------------------------------------ |
+| **State Change** | Accepts a command, appends events                               | Command + validator + event(s); optional `[Passive]` read model for command-side decisions |
+| **State View**   | Projects events into a queryable read model                     | `[ReadModel]` + model-bound projection + static query method(s)                            |
+| **Automation**   | Reacts to events, calls external systems / `ICommandPipeline`   | Reactor only                                                                               |
+| **Translation**  | Reacts to events and appends follow-up events to another stream | Reactor only                                                                               |
 
 ## Slice Naming (convention)
 
@@ -127,7 +127,7 @@ Tagged **[contract]** (framework-enforced) or **[convention]** (house default).
 ## Implementation Workflow
 
 - **Phase 0 — Model the request.** Confirm Module/Feature, Slice name, slice type, domain rules. For new behavior or unclear event vocabulary, run the **event-modeling** skill before writing code.
-- **Phase 1 — Backend.** Write the slice file. **Gate:** build clean Debug *and* Release (Debug regenerates the TypeScript proxies and compiles `#if DEBUG` spec code; Release is a build-only check — see the proxy-generation note below).
+- **Phase 1 — Backend.** Write the slice file. **Gate:** build clean Debug _and_ Release (Debug regenerates the TypeScript proxies and compiles `#if DEBUG` spec code; Release is a build-only check — see the proxy-generation note below).
 - **Phase 2 — Specs.** Mandatory for every slice type, in-process scenario family first: `CommandScenario<T>` (commands), `EventScenario` (constraints/append), `ReadModelScenario<T>` (projections/reducers), `ReactorScenario<T>` (reactors). Reserve out-of-process integration specs for host/infra/transport boundaries. **Gate:** tests pass.
 - **Phase 3 — Frontend.** Proxies now exist. Build React components from generated proxies, register in the composition page, wire routing. **Gate:** lint, conditional test, and build all clean.
 
@@ -137,14 +137,14 @@ Tagged **[contract]** (framework-enforced) or **[convention]** (house default).
 
 ## Quality Gates
 
-| Phase | Command (app-pinned) | Pass criteria |
-|---|---|---|
-| Backend | build (Debug) | zero errors, zero warnings — validates `#if DEBUG` spec code and regenerates proxies |
-| Backend | build (Release) | zero errors, zero warnings — build-only check; pass `-p:CratisProxiesOutputPath=` to skip re-running proxy generation |
-| Specs | test | zero failures |
-| Frontend | lint | zero errors |
-| Frontend | test | zero failures when frontend specs/behavior changed |
-| Frontend | build | zero errors |
+| Phase    | Command (app-pinned) | Pass criteria                                                                                                         |
+| -------- | -------------------- | --------------------------------------------------------------------------------------------------------------------- |
+| Backend  | build (Debug)        | zero errors, zero warnings — validates `#if DEBUG` spec code and regenerates proxies                                  |
+| Backend  | build (Release)      | zero errors, zero warnings — build-only check; pass `-p:CratisProxiesOutputPath=` to skip re-running proxy generation |
+| Specs    | test                 | zero failures                                                                                                         |
+| Frontend | lint                 | zero errors                                                                                                           |
+| Frontend | test                 | zero failures when frontend specs/behavior changed                                                                    |
+| Frontend | build                | zero errors                                                                                                           |
 
 All gates pass before merging, opening a PR, or marking a slice complete — except for a **documentation-only** pull request, which waits for nothing and carries no version label (see [pull-requests.md](./pull-requests.md)). After pushing to a PR, monitor CI with the GitHub MCP tools (`pull_request_read` → `get_check_runs`, `get_job_logs`); investigate and fix any failure, then push again — the task is not done until CI is green or the only remaining failures are confirmed pre-existing flakes unrelated to the change.
 
@@ -166,23 +166,23 @@ All gates pass before merging, opening a PR, or marking a slice complete — exc
 
 ## Where to Look
 
-| For | Location |
-|---|---|
-| **Contributing to a Cratis framework repo** (framework profile) | `framework.md` |
-| Slice anatomy (commands, `Provide()`, validators, events, projections, read models, reactors, constraints, compliance, cross-slice) | `vertical-slices.md` |
-| C# / TypeScript style | `csharp.md`, `typescript.md` |
-| React + Arc + Cratis Components + MVVM + dialogs | `react.md`, `components.md`, `dialogs.md` |
-| Frontend engineering quality & testing | `frontend-quality.md`, `frontend-testing.md`, `storybook.md` |
-| Spec patterns — universal `Specification` base (both profiles) | `specs.md`, `specs.csharp.md`, `specs.typescript.md` |
-| Spec patterns — the four `*Scenario` helpers (application only) | `specs.scenarios.csharp.md` |
-| Strongly-typed values (`ConceptAs<T>`, `EventSourceId<T>`) | `concepts.md` |
-| Shared term definitions (event, projection, reducer, reactor, observer, DCB, …) | `glossary.md` |
-| Diagnosing a misbehaving slice (read model stale, proxy missing, quarantine, …) | the **diagnose-slice** skill |
-| Inspecting or operating a **running** Chronicle store (failed partitions, replays, browsing events) with the `cratis` CLI | the **inspect-running-chronicle** skill |
-| EF Core read models / migrations | `efcore.md`, `efcore.specs.md` |
-| PRs / commits | `pull-requests.md`, `git-commits.md` |
-| Event modeling / schema migration / calling commands from code / paging / cross-cutting metadata / multi-tenancy | the matching skills |
-| Step-by-step recipes | `.ai/skills/` |
+| For                                                                                                                                 | Location                                                     |
+| ----------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ |
+| **Contributing to a Cratis framework repo** (framework profile)                                                                     | `framework.md`                                               |
+| Slice anatomy (commands, `Provide()`, validators, events, projections, read models, reactors, constraints, compliance, cross-slice) | `vertical-slices.md`                                         |
+| C# / TypeScript style                                                                                                               | `csharp.md`, `typescript.md`                                 |
+| React + Arc + Cratis Components + MVVM + dialogs                                                                                    | `react.md`, `components.md`, `dialogs.md`                    |
+| Frontend engineering quality & testing                                                                                              | `frontend-quality.md`, `frontend-testing.md`, `storybook.md` |
+| Spec patterns — universal `Specification` base (both profiles)                                                                      | `specs.md`, `specs.csharp.md`, `specs.typescript.md`         |
+| Spec patterns — the four `*Scenario` helpers (application only)                                                                     | `specs.scenarios.csharp.md`                                  |
+| Strongly-typed values (`ConceptAs<T>`, `EventSourceId<T>`)                                                                          | `concepts.md`                                                |
+| Shared term definitions (event, projection, reducer, reactor, observer, DCB, …)                                                     | `glossary.md`                                                |
+| Diagnosing a misbehaving slice (read model stale, proxy missing, quarantine, …)                                                     | the **diagnose-slice** skill                                 |
+| Inspecting or operating a **running** Chronicle store (failed partitions, replays, browsing events) with the `cratis` CLI           | the **inspect-running-chronicle** skill                      |
+| EF Core read models / migrations                                                                                                    | `efcore.md`, `efcore.specs.md`                               |
+| PRs / commits                                                                                                                       | `pull-requests.md`, `git-commits.md`                         |
+| Event modeling / schema migration / calling commands from code / paging / cross-cutting metadata / multi-tenancy                    | the matching skills                                          |
+| Step-by-step recipes                                                                                                                | `.ai/skills/`                                                |
 
 ## Source-of-Truth Discipline
 
diff --git a/.ai/rules/react.md b/.ai/rules/react.md
index a7efdd54..49174893 100644
--- a/.ai/rules/react.md
+++ b/.ai/rules/react.md
@@ -1,9 +1,9 @@
 ---
-applyTo: "**/*.tsx, **/Components/**/*.ts"
+applyTo: '**/*.tsx, **/Components/**/*.ts'
 profile: application
 paths:
-  - "**/*.tsx"
-  - "**/Components/**/*.ts"
+    - '**/*.tsx'
+    - '**/Components/**/*.ts'
 ---
 
 # React + Arc + Cratis Components
@@ -42,6 +42,7 @@ export const Listing = withViewModel(<Entity>ListingViewModel, ({ viewModel }) =
 ```
 
 **View-model rules:**
+
 - Pure TypeScript classes — no JSX, never store React state, never call React hooks (`useIdentity`, `useNavigate`) inside one — inject the Cratis abstraction instead.
 - Fields are auto-observable (`makeAutoObservable` is applied by `withViewModel`); no `@observable` on plain assignments.
 - Inject services via the primary constructor (`@injectable` / tsyringe).
@@ -53,31 +54,31 @@ Extract as soon as a component has **any** of: 3+ `useState`, any `useCallback`
 
 ### MobX reactivity
 
-- **Dereference late** — read `viewModel.property` *inside* JSX; never destructure observables at the top of the component body (the captured value won't track changes).
+- **Dereference late** — read `viewModel.property` _inside_ JSX; never destructure observables at the top of the component body (the captured value won't track changes).
 - **Computed getters** for derived state (auto-`computed`) — not `useMemo` in the component.
-- **`useCallback`/`useMemo` are unnecessary in `withViewModel` components** — the render is wrapped in `Observer`. Their presence signals state that belongs in the view model. (This does *not* apply to plain functional components using proxy hooks directly. A plain component reaching for `useCallback` to stabilize a handler is a signal that handler belongs in a view model or tested state module.)
-- **Observable arrays into raw children** — passing `viewModel.items` (an observable array) to a *raw non-observer* child needs `viewModel.items.slice()` to materialize a plain array. Uncommon in practice — prefer `DataTableForObservableQuery`, which handles reactivity internally.
+- **`useCallback`/`useMemo` are unnecessary in `withViewModel` components** — the render is wrapped in `Observer`. Their presence signals state that belongs in the view model. (This does _not_ apply to plain functional components using proxy hooks directly. A plain component reaching for `useCallback` to stabilize a handler is a signal that handler belongs in a view model or tested state module.)
+- **Observable arrays into raw children** — passing `viewModel.items` (an observable array) to a _raw non-observer_ child needs `viewModel.items.slice()` to materialize a plain array. Uncommon in practice — prefer `DataTableForObservableQuery`, which handles reactivity internally.
 
 ### Props / route / query params in view models
 
-| Need | Mechanism |
-|---|---|
+| Need                          | Mechanism                                                                                                    |
+| ----------------------------- | ------------------------------------------------------------------------------------------------------------ |
 | Props that change after mount | implement `IHandleProps<TProps>` → `handleProps(props)` (called on initial mount **and** every props change) |
-| Props set once at mount | `@props readonly componentProps: TProps` |
-| Route params | `@params readonly routeParams: RouteParams` — put `@field` on each property |
-| Query-string params | `@queryParams` |
+| Props set once at mount       | `@props readonly componentProps: TProps`                                                                     |
+| Route params                  | `@params readonly routeParams: RouteParams` — put `@field` on each property                                  |
+| Query-string params           | `@queryParams`                                                                                               |
 
 `@field` on each route/query-param property is what makes Arc's JSON serializer convert the URL **strings** to the property's real type — **without `@field`, the values stay strings**.
 
 ### Injectable abstractions (never touch browser/React globals in a view model)
 
-| Interface | Package | Replaces |
-|---|---|---|
-| `IMessenger` | `@cratis/arc.react.mvvm/messaging` | cross-component selection (list↔detail) — not React Context |
-| `IDialogs` | `@cratis/arc.react.mvvm/dialogs` | imperative confirmation/busy dialogs from a view model |
-| `IIdentityProvider` | `@cratis/arc/identity` | identity in a view model (not the `useIdentity` hook) |
-| `ILocalStorage`, `INavigation` | `@cratis/arc.react.mvvm/browser` | `localStorage`, URL navigation |
-| `IViewModelDetached` | `@cratis/arc.react.mvvm` | teardown (`detached()`) for subscriptions/timers |
+| Interface                      | Package                            | Replaces                                                    |
+| ------------------------------ | ---------------------------------- | ----------------------------------------------------------- |
+| `IMessenger`                   | `@cratis/arc.react.mvvm/messaging` | cross-component selection (list↔detail) — not React Context |
+| `IDialogs`                     | `@cratis/arc.react.mvvm/dialogs`   | imperative confirmation/busy dialogs from a view model      |
+| `IIdentityProvider`            | `@cratis/arc/identity`             | identity in a view model (not the `useIdentity` hook)       |
+| `ILocalStorage`, `INavigation` | `@cratis/arc.react.mvvm/browser`   | `localStorage`, URL navigation                              |
+| `IViewModelDetached`           | `@cratis/arc.react.mvvm`           | teardown (`detached()`) for subscriptions/timers            |
 
 These are registered automatically by `withViewModel` and injected via the primary constructor. Concrete usage:
 
@@ -92,26 +93,26 @@ These are registered automatically by `withViewModel` and injected via the prima
 
 A typed proxy class is generated per query. Pick the hook:
 
-| Hook | When |
-|---|---|
-| `<Query>.use(args?, sorting?)` | standard — returns `[result]`, re-renders on change |
-| `<Query>.useSuspense(...)` | suspense-aware — throws while loading; wrap in `<QueryBoundary>` |
-| `<Query>.when(condition).use(args)` | conditional — only fires when `condition` is true (don't wrap a hook in `if`) |
-| `<Query>.useWithPaging(pageSize, args?, sorting?)` | server-side paging (backend returns `IQueryable<T>`) |
-| `<Query>.useSuspenseWithPaging(pageSize, ...)` | suspense + paging |
-| `<ObservableQuery>.use(...)` | live observable (`ISubject<T>` backend) pushed over SSE/WebSocket |
-| `<ObservableQuery>.useChangeStream(args?, getKey?, ...)` | item-level add/replace/remove deltas |
+| Hook                                                     | When                                                                          |
+| -------------------------------------------------------- | ----------------------------------------------------------------------------- |
+| `<Query>.use(args?, sorting?)`                           | standard — returns `[result]`, re-renders on change                           |
+| `<Query>.useSuspense(...)`                               | suspense-aware — throws while loading; wrap in `<QueryBoundary>`              |
+| `<Query>.when(condition).use(args)`                      | conditional — only fires when `condition` is true (don't wrap a hook in `if`) |
+| `<Query>.useWithPaging(pageSize, args?, sorting?)`       | server-side paging (backend returns `IQueryable<T>`)                          |
+| `<Query>.useSuspenseWithPaging(pageSize, ...)`           | suspense + paging                                                             |
+| `<ObservableQuery>.use(...)`                             | live observable (`ISubject<T>` backend) pushed over SSE/WebSocket             |
+| `<ObservableQuery>.useChangeStream(args?, getKey?, ...)` | item-level add/replace/remove deltas                                          |
 
 **Return-tuple shapes** (load-bearing — the observable variants have no `perform`):
 
-| Hook | Returns |
-|---|---|
-| `<Query>.use(args?, sorting?)` | `[result, perform]` |
-| `<Query>.useSuspense(...)` | `[result, perform, setSorting]` |
-| `<Query>.useWithPaging(pageSize, args?, sorting?)` | `[result, perform, setSorting, setPage, setPageSize]` |
-| `<Query>.useSuspenseWithPaging(pageSize, ...)` | `[result, perform, setSorting, setPage, setPageSize]` |
-| `<ObservableQuery>.use(...)` | `[result, setSorting]` — **no `perform`** |
-| `<ObservableQuery>.useChangeStream(args?, getKey?, sorting?, isEnabled?)` | `ChangeSet<T> { added, replaced, removed }` |
+| Hook                                                                      | Returns                                               |
+| ------------------------------------------------------------------------- | ----------------------------------------------------- |
+| `<Query>.use(args?, sorting?)`                                            | `[result, perform]`                                   |
+| `<Query>.useSuspense(...)`                                                | `[result, perform, setSorting]`                       |
+| `<Query>.useWithPaging(pageSize, args?, sorting?)`                        | `[result, perform, setSorting, setPage, setPageSize]` |
+| `<Query>.useSuspenseWithPaging(pageSize, ...)`                            | `[result, perform, setSorting, setPage, setPageSize]` |
+| `<ObservableQuery>.use(...)`                                              | `[result, setSorting]` — **no `perform`**             |
+| `<ObservableQuery>.useChangeStream(args?, getKey?, sorting?, isEnabled?)` | `ChangeSet<T> { added, replaced, removed }`           |
 
 `result.paging` = `{ page, size, totalItems, totalPages }` (zero-based `page`). Read models returning `IQueryable<TReadModel>` get automatic server-side paging/sorting — use it whenever a list can grow.
 
@@ -125,8 +126,8 @@ A typed proxy class is generated per query. Pick the hook:
 A typed proxy class is generated per command. For programmatic execution:
 
 ```tsx
-const [command, setCommandValues, clearCommandValues] = Command.use();   // 3-tuple
-command.someField = value;                  // or setCommandValues({ ... })
+const [command, setCommandValues, clearCommandValues] = Command.use(); // 3-tuple
+command.someField = value; // or setCommandValues({ ... })
 const result = await command.execute();
 ```
 
@@ -134,11 +135,11 @@ Inside dialogs, use `CommandDialog` + CommandForm fields rather than driving the
 
 ### Read `CommandResult` by the granular flag — not just `isSuccess`
 
-| Flag | Meaning | UX response |
-|---|---|---|
-| `isSuccess` | `isAuthorized && isValid && !hasExceptions` | happy path |
-| `isAuthorized` | `[Roles]`/policy rejected | redirect to login / "not allowed" |
-| `isValid` | validation failed — `validationResults` has per-field messages | render inline field errors |
+| Flag            | Meaning                                                              | UX response                                        |
+| --------------- | -------------------------------------------------------------------- | -------------------------------------------------- |
+| `isSuccess`     | `isAuthorized && isValid && !hasExceptions`                          | happy path                                         |
+| `isAuthorized`  | `[Roles]`/policy rejected                                            | redirect to login / "not allowed"                  |
+| `isValid`       | validation failed — `validationResults` has per-field messages       | render inline field errors                         |
 | `hasExceptions` | `Provide()`/`Handle()` threw — `exceptionMessages` carry diagnostics | generic error toast + log; never show stack traces |
 
 `CommandDialog` handles all of this automatically; the flags matter most when executing a command **outside** a dialog. `validate()` returns the same shape with `response == null` (handler did not run). `result.validationResults` is a `ValidationResult[]` of `{ property, message }` — render per-field UI from it, but **never branch on raw `.message` text**. `exceptionMessages`/`exceptionStackTrace` are for logging, never for users.
@@ -147,9 +148,18 @@ Out-of-dialog execution branches in this order:
 
 ```tsx
 const result = await command.execute();
-if (!result.isAuthorized) { redirectToLogin(); return; }
-if (!result.isValid)      { /* validationResults → inline field errors */ return; }
-if (result.hasExceptions) { toast.error('Something went wrong'); console.error(result.exceptionMessages); return; }
+if (!result.isAuthorized) {
+    redirectToLogin();
+    return;
+}
+if (!result.isValid) {
+    /* validationResults → inline field errors */ return;
+}
+if (result.hasExceptions) {
+    toast.error('Something went wrong');
+    console.error(result.exceptionMessages);
+    return;
+}
 // happy path — refresh queries, close, etc.
 ```
 
@@ -167,13 +177,13 @@ if (result.hasExceptions) { toast.error('Something went wrong'); console.error(r
 
 Top-level provider for microservice name and API base path. Config props (with defaults):
 
-| Prop | Default | Notes |
-|---|---|---|
-| `httpHeadersCallback` | — | returns `HeadersInit` merged into every request (bearer/tenant headers) |
-| `queryTransportMethod` | `ServerSentEvents` | SSE is capped at 4 connections on HTTP/1.1 |
-| `observableQueryTransferMode` | `Delta` | `Delta` = server ChangeSet/client diff; `Full` = all items as `added` |
-| `queryConnectionCount` | `1` | hub connection slots |
-| `queryDirectMode` | `false` | direct per-query connection — dev use only |
+| Prop                          | Default            | Notes                                                                   |
+| ----------------------------- | ------------------ | ----------------------------------------------------------------------- |
+| `httpHeadersCallback`         | —                  | returns `HeadersInit` merged into every request (bearer/tenant headers) |
+| `queryTransportMethod`        | `ServerSentEvents` | SSE is capped at 4 connections on HTTP/1.1                              |
+| `observableQueryTransferMode` | `Delta`            | `Delta` = server ChangeSet/client diff; `Full` = all items as `added`   |
+| `queryConnectionCount`        | `1`                | hub connection slots                                                    |
+| `queryDirectMode`             | `false`            | direct per-query connection — dev use only                              |
 
 `QueryTransportMethod`/`ObservableQueryTransferMode` import from `@cratis/arc`; `Arc` from `@cratis/arc.react`. Reach `arc.reconnectQueries()` via `useContext(ArcContext)` and call it after login/logout to re-establish observable connections.
 
diff --git a/.ai/rules/storybook.md b/.ai/rules/storybook.md
index 2ab73de2..068c4871 100644
--- a/.ai/rules/storybook.md
+++ b/.ai/rules/storybook.md
@@ -1,8 +1,8 @@
 ---
-applyTo: "**/*.stories.tsx"
+applyTo: '**/*.stories.tsx'
 profile: application
 paths:
-  - "**/*.stories.tsx"
+    - '**/*.stories.tsx'
 ---
 
 # Storybook Story Conventions
@@ -29,10 +29,10 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { MyComponent } from './MyComponent';
 
 const meta = {
-    title: 'Components/MyComponent',          // sidebar path
+    title: 'Components/MyComponent', // sidebar path
     component: MyComponent,
-    parameters: { layout: 'centered' },       // 'centered' | 'padded' | 'fullscreen'
-    tags: ['autodocs'],                       // always include
+    parameters: { layout: 'centered' }, // 'centered' | 'padded' | 'fullscreen'
+    tags: ['autodocs'], // always include
 } satisfies Meta<typeof MyComponent>;
 
 export default meta;
@@ -62,7 +62,10 @@ export const Interactive: Story = {
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);
         await userEvent.click(canvas.getAllByRole('tab')[1]);
-        await expect(canvas.getAllByRole('tab')[1]).toHaveAttribute('aria-selected', 'true');
+        await expect(canvas.getAllByRole('tab')[1]).toHaveAttribute(
+            'aria-selected',
+            'true',
+        );
     },
 };
 ```
diff --git a/.ai/rules/vertical-slices.md b/.ai/rules/vertical-slices.md
index b36dbf2d..b06b01d4 100644
--- a/.ai/rules/vertical-slices.md
+++ b/.ai/rules/vertical-slices.md
@@ -1,18 +1,18 @@
 ---
-applyTo: "**/*.cs, **/*.tsx"
+applyTo: '**/*.cs, **/*.tsx'
 profile: application
 paths:
-  - "**/*.cs"
-  - "**/*.tsx"
+    - '**/*.cs'
+    - '**/*.tsx'
 ---
 
 # Vertical Slice Architecture
 
-> **Application profile.** This is the architecture for *applications built on Cratis*. It does **not** apply inside a Cratis framework repo (Arc/Chronicle/Fundamentals/Components) — those are libraries; see [framework.md](./framework.md).
+> **Application profile.** This is the architecture for _applications built on Cratis_. It does **not** apply inside a Cratis framework repo (Arc/Chronicle/Fundamentals/Components) — those are libraries; see [framework.md](./framework.md).
 
 A vertical slice owns a single behavior: the command or query, the events it produces, the projections that build read models, the React component that renders the UI, and the specs that verify it all works. Everything lives together because everything changes together. **The slice is the invariant unit** (command + events + projection + component + specs), created, renamed, and deleted as one.
 
-This file is the reference for *what* goes in each part of a slice. Layout, slice types, workflow, and quality gates are in [general.md](./general.md).
+This file is the reference for _what_ goes in each part of a slice. Layout, slice types, workflow, and quality gates are in [general.md](./general.md).
 
 ## Technical stack
 
@@ -46,9 +46,9 @@ A single `<Slice>.cs` therefore contains ALL of: `[Command]` records with `Handl
 
 ## Concepts
 
-Every domain identifier or named value is a typed record — raw `string`/`Guid`/`int` should not appear on commands, events, or read models for domain values. Primitives stay primitive only when the meaning *is* the base type (`bool`, a plain count, `DateOnly`).
+Every domain identifier or named value is a typed record — raw `string`/`Guid`/`int` should not appear on commands, events, or read models for domain values. Primitives stay primitive only when the meaning _is_ the base type (`bool`, a plain count, `DateOnly`).
 
-- **[contract] Value concepts** derive from `ConceptAs<T>`. The base provides value equality and an implicit **concept → `T`** conversion. **Add your own `T` → concept operator** when call-site ergonomics need it — the base does *not* provide that direction.
+- **[contract] Value concepts** derive from `ConceptAs<T>`. The base provides value equality and an implicit **concept → `T`** conversion. **Add your own `T` → concept operator** when call-site ergonomics need it — the base does _not_ provide that direction.
 - **[contract] Identity concepts** (event-source ids) derive from `EventSourceId<T>` with the underlying primitive (`Guid` standard). `EventSourceId<T>` already gives conversions to/from `T`, untyped `EventSourceId`, and `string`. Add `NotSet`, a typed `New()`, and a `T` → id operator.
 
 ```csharp
@@ -75,18 +75,18 @@ The command carries input from the caller. `Handle()` is defined directly on the
 
 ### The decision matrix — where each rule lives **[contract]**
 
-`Handle()` assumes the command is valid and constructs the event(s). Pick the mechanism by what the decision *is*:
+`Handle()` assumes the command is valid and constructs the event(s). Pick the mechanism by what the decision _is_:
 
-| Decision | Use |
-|---|---|
-| Reusable value invariant (length, format, range) | `ConceptValidator<T>` on the concept type |
-| Command-input / cross-field / pre-handler rule (incl. injected read-model/service/identity checks) | `CommandValidator<TCommand>` with `RuleFor(...)` |
-| Handler needs fetched/computed data before it can build the event | `Provide()` — fetches the data; may validate it and short-circuit |
-| State-dependent rule that must hold **under concurrency** | inject the read model into `Handle()`, return `Result<TEvent, ValidationResult>` |
-| Uniqueness | Chronicle `[Unique]` / `IConstraint` (race-safe) — not a read-model pre-check |
-| Genuinely exceptional failure (bug, missing infra) | `throw` a domain exception |
+| Decision                                                                                           | Use                                                                              |
+| -------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- |
+| Reusable value invariant (length, format, range)                                                   | `ConceptValidator<T>` on the concept type                                        |
+| Command-input / cross-field / pre-handler rule (incl. injected read-model/service/identity checks) | `CommandValidator<TCommand>` with `RuleFor(...)`                                 |
+| Handler needs fetched/computed data before it can build the event                                  | `Provide()` — fetches the data; may validate it and short-circuit                |
+| State-dependent rule that must hold **under concurrency**                                          | inject the read model into `Handle()`, return `Result<TEvent, ValidationResult>` |
+| Uniqueness                                                                                         | Chronicle `[Unique]` / `IConstraint` (race-safe) — not a read-model pre-check    |
+| Genuinely exceptional failure (bug, missing infra)                                                 | `throw` a domain exception                                                       |
 
-**Do not throw for normal business rejection.** A thrown exception (from `Provide()` or `Handle()`) surfaces as an exception/HTTP 500, *not* a validation result. Recoverable, user-facing rejections are validation: `ValidationResult.Error(...)` via a validator or `Result<,>`. (For step-by-step business-rule placement, invoke the **add-business-rule** skill.)
+**Do not throw for normal business rejection.** A thrown exception (from `Provide()` or `Handle()`) surfaces as an exception/HTTP 500, _not_ a validation result. Recoverable, user-facing rejections are validation: `ValidationResult.Error(...)` via a validator or `Result<,>`. (For step-by-step business-rule placement, invoke the **add-business-rule** skill.)
 
 ### `Provide()` — data for `Handle()` **[contract]**
 
@@ -114,28 +114,28 @@ Use `Provide()` for IO/fetched/computed data a valid command needs (explicit-key
 
 Return the event(s) directly — Arc appends them; never inject `IEventLog` to append the primary event. If there is no `await`, return the value directly (no `Task<T>`/`Task.FromResult`).
 
-| Return | When |
-|---|---|
-| `TEvent` | one event on the implicit stream |
-| `(EventSourceId, TEvent)` | command decides the event source id (tuple order doesn't matter) |
-| `(TResponse, TEvent)` | a response value plus an event |
-| `IEnumerable<object>` | multiple events; `EventForEventSourceId(id, @event)` wrappers for cross-stream |
-| `Result<TEvent, ValidationResult>` | success event or a typed validation error (concurrency-sensitive rule) |
-| `void` | no event |
+| Return                             | When                                                                           |
+| ---------------------------------- | ------------------------------------------------------------------------------ |
+| `TEvent`                           | one event on the implicit stream                                               |
+| `(EventSourceId, TEvent)`          | command decides the event source id (tuple order doesn't matter)               |
+| `(TResponse, TEvent)`              | a response value plus an event                                                 |
+| `IEnumerable<object>`              | multiple events; `EventForEventSourceId(id, @event)` wrappers for cross-stream |
+| `Result<TEvent, ValidationResult>` | success event or a typed validation error (concurrency-sensitive rule)         |
+| `void`                             | no event                                                                       |
 
-**How Arc picks the response vs. metadata:** for an `(A, B)` tuple, each element is checked — exactly one element *without* a registered event handler becomes the `CommandResult<...>` response; if all are events, there is no response; **more than one un-handled element throws**. A `Result<TSuccess, TError>` has its inner value unwrapped and processed by these same rules (so `Result<(TId, TEvent), ValidationResult>` is processed as a tuple). A `(TEvent, Subject)` tuple's `Subject` is treated as **append metadata** (not a response) and overrides the resolved compliance subject. A `(TIdConcept, TEvent)` tuple opens a new stream — the id concept is the event source for that event.
+**How Arc picks the response vs. metadata:** for an `(A, B)` tuple, each element is checked — exactly one element _without_ a registered event handler becomes the `CommandResult<...>` response; if all are events, there is no response; **more than one un-handled element throws**. A `Result<TSuccess, TError>` has its inner value unwrapped and processed by these same rules (so `Result<(TId, TEvent), ValidationResult>` is processed as a tuple). A `(TEvent, Subject)` tuple's `Subject` is treated as **append metadata** (not a response) and overrides the resolved compliance subject. A `(TIdConcept, TEvent)` tuple opens a new stream — the id concept is the event source for that event.
 
 ### Stream metadata & DCB concurrency **[contract]**
 
-Three attributes scope an append broad→narrow, and each one *also* (only with `concurrency: true`) contributes its dimension to the server-side concurrency check:
+Three attributes scope an append broad→narrow, and each one _also_ (only with `concurrency: true`) contributes its dimension to the server-side concurrency check:
 
-| Attribute | Meaning |
-|---|---|
-| `[EventSourceType("...")]` | the overarching concept the event source *is* (`Account`, `Order`) |
-| `[EventStreamType("...")]` | a concrete process **within** that source type (`Onboarding`, `Transactions`) |
-| `[EventStreamId("...")]` | a marker separating **independent streams** within one stream type (`Monthly`, `2026-06`) |
+| Attribute                  | Meaning                                                                                   |
+| -------------------------- | ----------------------------------------------------------------------------------------- |
+| `[EventSourceType("...")]` | the overarching concept the event source _is_ (`Account`, `Order`)                        |
+| `[EventStreamType("...")]` | a concrete process **within** that source type (`Onboarding`, `Transactions`)             |
+| `[EventStreamId("...")]`   | a marker separating **independent streams** within one stream type (`Monthly`, `2026-06`) |
 
-Each attribute always tags the appended events (visible in `EventContext`). **Only when the command also carries `concurrency: true`** does each dimension join the server-side `ConcurrencyScope` (plus the event source id), with the optimistic strategy supplying the expected tail sequence number. A command **without** `concurrency: true` contributes no scope of its own, and the append falls to whatever concurrency strategy the event sequence is configured with — by default the optimistic one, scoped to the event source. So the attribute chooses *which dimensions* bound the check, not whether a check happens at all. Reach for it on high-contention state transitions where a stale read would let two commands both "win" — it narrows the boundary so appends that are genuinely independent stop colliding (concurrency failures surface on `CommandResult`/`AppendResult`). Adopt it deliberately per behavior, not as a blanket default.
+Each attribute always tags the appended events (visible in `EventContext`). **Only when the command also carries `concurrency: true`** does each dimension join the server-side `ConcurrencyScope` (plus the event source id), with the optimistic strategy supplying the expected tail sequence number. A command **without** `concurrency: true` contributes no scope of its own, and the append falls to whatever concurrency strategy the event sequence is configured with — by default the optimistic one, scoped to the event source. So the attribute chooses _which dimensions_ bound the check, not whether a check happens at all. Reach for it on high-contention state transitions where a stale read would let two commands both "win" — it narrows the boundary so appends that are genuinely independent stop colliding (concurrency failures surface on `CommandResult`/`AppendResult`). Adopt it deliberately per behavior, not as a blanket default.
 
 When the stream id is known only at runtime, implement `ICanProvideEventStreamId.GetEventStreamId()` instead of `[EventStreamId]`. ⚠️ Combining `ICanProvideEventStreamId` with a non-null `[EventStreamId]` attribute on the same command throws `AmbiguousEventStreamId` at startup — pick one (or set the attribute value to `null` to defer to the interface).
 
@@ -143,7 +143,7 @@ When the stream id is known only at runtime, implement `ICanProvideEventStreamId
 
 `ICanProvideEventSourceId.GetEventSourceId()` → a single `EventSourceId`/`EventSourceId<T>`-derived property → a `[Key]` property → else Arc/Chronicle generates one.
 
-⚠️ **Injected read models resolve ONLY by the command's resolved event-source id** — not by the read-model type, and not by "the property that looks like its key." If the read model you need is keyed by a **different** value, direct injection silently hands you the **wrong** instance (or a default-initialized one) — a correctness bug, not a compile error. The three failure shapes: (1) you need a *referenced other* entity (act on A, check B); (2) the command has **multiple** `EventSourceId<T>`-typed properties → ambiguous resolution (never rely on property order); (3) a create command whose id is generated inside `Handle()`. In all three, read by explicit key: `IReadModels.GetInstanceById<T>((EventSourceId)key)`.
+⚠️ **Injected read models resolve ONLY by the command's resolved event-source id** — not by the read-model type, and not by "the property that looks like its key." If the read model you need is keyed by a **different** value, direct injection silently hands you the **wrong** instance (or a default-initialized one) — a correctness bug, not a compile error. The three failure shapes: (1) you need a _referenced other_ entity (act on A, check B); (2) the command has **multiple** `EventSourceId<T>`-typed properties → ambiguous resolution (never rely on property order); (3) a create command whose id is generated inside `Handle()`. In all three, read by explicit key: `IReadModels.GetInstanceById<T>((EventSourceId)key)`.
 
 ### Validators **[contract]**
 
@@ -166,8 +166,9 @@ Apply authorization attributes on the `[Command]` record or query method. **[con
 - **[contract] `[EventType]` lives in its owning slice file** — referenced from other slices via `using`.
 
 **Event-design rules (what is and isn't a fact):**
+
 - **Events are not read models** — never append events for totals, counts, statuses, search indexes, or dashboards. Project those from source events into read models.
-- **Never duplicate one fact as an aggregate event *plus* a per-item fanout.** If a command fans out per item (one `RequestSentToPartner` per partner), don't also emit an aggregate event carrying the whole list. Keep the fanout as the single source of truth and project any aggregate from it; pick per-item vs. single-with-list event from how consumers read it — never both.
+- **Never duplicate one fact as an aggregate event _plus_ a per-item fanout.** If a command fans out per item (one `RequestSentToPartner` per partner), don't also emit an aggregate event carrying the whole list. Keep the fanout as the single source of truth and project any aggregate from it; pick per-item vs. single-with-list event from how consumers read it — never both.
 - **Command rejection normally appends no event.** Validation and business-rule rejections are command results, not facts. Add a rejection/failed event only when the business must audit or react to that failure later.
 - **One event name = one meaning.** Don't reuse a vague event for several domain facts; if facts can occur, be absent, or have consumers independently, split them into separate event types.
 
@@ -207,7 +208,7 @@ public record Author(AuthorId Id, AuthorName Name)
 
 ### Choosing read-model access in command-side code **[convention]**
 
-Ladder, first that fits: (1) direct read-model (DCB) injection — only when keyed by the command's own event-source id; (2) a `[Passive]` projection; (3) `IReadModels.GetInstanceById<T>((EventSourceId)key)` for a different/derived key; (4) a materialized projection. A lookup *interface* is justified **only** for a genuine non-key search (e.g. find-by-email) — never to wrap a keyed `GetInstanceById`.
+Ladder, first that fits: (1) direct read-model (DCB) injection — only when keyed by the command's own event-source id; (2) a `[Passive]` projection; (3) `IReadModels.GetInstanceById<T>((EventSourceId)key)` for a different/derived key; (4) a materialized projection. A lookup _interface_ is justified **only** for a genuine non-key search (e.g. find-by-email) — never to wrap a keyed `GetInstanceById`.
 
 **Existence checks — null vs default:** a read model **with** class-level `[RemovedWith<T>]` returns **default-initialized** values after a removal event (never `null`) for both persisted and passive models — so check a sentinel/flag, not `null`. A read model **without** `[RemovedWith<T>]` that was **never created** resolves to **`null`** from `IReadModels.GetInstanceById<T>`. Match the check to the model.
 
@@ -222,7 +223,7 @@ Projections build read models from **events** (never from other read models). Us
 3. **Reducer `IReducerFor<T>`** when the model is "current state + event → next state" — branching on prior state, loops, calculations. A valid style, **not** a failure mode; carry an inline justification comment naming the limitation that ruled out a projection.
 
 - **[contract] AutoMap is on by default — never call `.AutoMap()`.** Match property names so AutoMap wires them; diverge with `[SetFrom<T>]` / `.Set().To()` only for genuine name differences. Re-enable `.AutoMap()` only inside a scope disabled with `.NoAutoMap()`.
-  - ⚠️ **AutoMap runs per *event* across every event the projection references — it does not defer to your explicit setters.** A property sourced with `[SetFrom<A>]` can still be silently overwritten when some *other* referenced event `B` happens to carry an identically named property (AutoMap wires `B`'s value on top). Fence the property with property-level **`[NoAutoMap]`** (which pairs with the `[SetFrom]`, not replaces it) so only your explicit setter writes it. `[SetFrom]` does **not** imply this — leaving AutoMap on is what allows the common create-then-rename pattern (a later event updating a property by name-match). No colliding event property name means no `[NoAutoMap]` needed. (An event subscribed only via an aggregate like `[Count]` doesn't auto-map its other properties, so it can't collide.) The analyzer **`CHR0025`** surfaces this collision as an *informational* heads-up (not a warning, because either resolution — add `[NoAutoMap]`, or accept the update — can be correct).
+    - ⚠️ **AutoMap runs per _event_ across every event the projection references — it does not defer to your explicit setters.** A property sourced with `[SetFrom<A>]` can still be silently overwritten when some _other_ referenced event `B` happens to carry an identically named property (AutoMap wires `B`'s value on top). Fence the property with property-level **`[NoAutoMap]`** (which pairs with the `[SetFrom]`, not replaces it) so only your explicit setter writes it. `[SetFrom]` does **not** imply this — leaving AutoMap on is what allows the common create-then-rename pattern (a later event updating a property by name-match). No colliding event property name means no `[NoAutoMap]` needed. (An event subscribed only via an aggregate like `[Count]` doesn't auto-map its other properties, so it can't collide.) The analyzer **`CHR0025`** surfaces this collision as an _informational_ heads-up (not a warning, because either resolution — add `[NoAutoMap]`, or accept the update — can be correct).
 - **[contract] `[Nested]`** projects a single nullable child object; place `[FromEvent<T>]` on the nested type (or property-level `[SetFrom<T>]` when the parent shares the event — declaring class-level `[FromEvent<T>]` on both parent and nested type for the same event is a duplicate-registration startup crash).
 - **[contract] Event-sequence source attributes:** class-level `[EventSequence("name")]`, `[EventLog]`, or `[EventStore("name")]` select where the projection reads from (a named sequence, the explicit default log, or another Chronicle event store / inbox). ⚠️ `[FromEventSequence]` is **removed** — use `[EventSequence("name")]`.
 
@@ -258,22 +259,22 @@ public Task AuthorRegistered(AuthorRegistered @event, EventContext context) => .
 - **`[PII]` is found at any nesting depth, and may mark a whole value object.** A `[PII]` concept inside a value object is encrypted where it sits (siblings stay readable). Marking the **value object type** (or a property typed as one) with `[PII]` classifies every value it holds — Chronicle pushes the marker down to the individual values, so the document keeps its shape and each value is separately encrypted rather than fused into one blob.
 - Projection-backed read models inherit PII lineage automatically — don't add `[PII]` to their properties. Reducer-backed models: a `[PII]`-concept-typed property is detected automatically; add property-level `[PII]` only for a primitive/non-PII-concept property populated from PII source data.
 - ⚠️ **`[PII]` cannot be applied to `EventSourceId`/`EventSourceId<T>`** — Chronicle throws `PIINotSupportedOnEventSourceId` at runtime because the identifier is the encryption-key lookup. If the identifier itself is sensitive, use a random `Guid`-backed surrogate as the event source id and store the sensitive value in a `[PII]` property.
-- **PII inside a list/array element IS encrypted.** The compliance walk descends into nested objects *and* into array elements, so a `[PII]` concept in an `IReadOnlyList<T>` and a `[PII]` member of an element object are both encrypted per element. `[PII]` on the *list property itself* is different: it blob-encrypts the whole collection as one value, protecting it but making per-element values unqueryable — reach for that only when you never need to query inside the collection. For list-valued PII that must stay queryable, prefer a **person-scoped** read model joined at the query edge.
+- **PII inside a list/array element IS encrypted.** The compliance walk descends into nested objects _and_ into array elements, so a `[PII]` concept in an `IReadOnlyList<T>` and a `[PII]` member of an element object are both encrypted per element. `[PII]` on the _list property itself_ is different: it blob-encrypts the whole collection as one value, protecting it but making per-element values unqueryable — reach for that only when you never need to query inside the collection. For list-valued PII that must stay queryable, prefer a **person-scoped** read model joined at the query edge.
 - ⚠️ **Do not declare a read-model property named `_subject`** — Chronicle reserves that field in MongoDB for internal key tracking. After right-to-erasure key deletion, `[PII]` properties return an **empty** value (no exception is thrown).
 
 ### Subject resolution **[contract]**
 
 The compliance **subject** is the encryption-key identity. It is resolved first-match-wins:
 
-| Priority | Mechanism |
-|---|---|
-| 1 | `Subject` as the second tuple element returned from `Handle()` (computed in the handler) |
-| 2 | `ICanProvideSubject.GetSubject()` on the command |
-| 3 | a `Subject`-typed property on the command |
-| 4 | an `EventSourceId<T>` property (the typed identity is the subject — no attribute) |
-| 5 | `[Subject]` on a **non-`EventSourceId<T>`** property (Arc converts via `ToString()`) |
+| Priority | Mechanism                                                                                |
+| -------- | ---------------------------------------------------------------------------------------- |
+| 1        | `Subject` as the second tuple element returned from `Handle()` (computed in the handler) |
+| 2        | `ICanProvideSubject.GetSubject()` on the command                                         |
+| 3        | a `Subject`-typed property on the command                                                |
+| 4        | an `EventSourceId<T>` property (the typed identity is the subject — no attribute)        |
+| 5        | `[Subject]` on a **non-`EventSourceId<T>`** property (Arc converts via `ToString()`)     |
 
-`ICanProvideSubject` lives in `Cratis.Chronicle.Events` (alongside `ICanProvideEventSourceId`/`ICanProvideEventStreamId`). `[Subject]` is *not* aggregate identity. A managed read-model document has **one** subject — never mix multiple people's PII in one document; split into person-scoped models.
+`ICanProvideSubject` lives in `Cratis.Chronicle.Events` (alongside `ICanProvideEventSourceId`/`ICanProvideEventStreamId`). `[Subject]` is _not_ aggregate identity. A managed read-model document has **one** subject — never mix multiple people's PII in one document; split into person-scoped models.
 
 ### Redaction **[contract]**
 
diff --git a/.ai/skills/new-vertical-slice/SKILL.md b/.ai/skills/new-vertical-slice/SKILL.md
index 34b19fb1..31a08c86 100644
--- a/.ai/skills/new-vertical-slice/SKILL.md
+++ b/.ai/skills/new-vertical-slice/SKILL.md
@@ -1,6 +1,6 @@
 ---
 name: new-vertical-slice
-description: "Use this skill when asked to implement a new feature, command, query, slice, or screen in a Cratis-based project. Guides the full end-to-end workflow: C# backend → Debug+Release build → specs → React frontend → quality gates."
+description: 'Use this skill when asked to implement a new feature, command, query, slice, or screen in a Cratis-based project. Guides the full end-to-end workflow: C# backend → Debug+Release build → specs → React frontend → quality gates.'
 ---
 
 Implement a complete vertical slice following this EXACT order. Never skip steps or work on multiple slices in parallel.
@@ -8,6 +8,7 @@ Implement a complete vertical slice following this EXACT order. Never skip steps
 ## Step 1 — Identify the slice type
 
 Choose **one** of:
+
 - **State Change** — a command that mutates state and records events (most common)
 - **State View** — a query that reads from a read model
 - **Automation** — a background reactor triggered by events
@@ -22,16 +23,18 @@ Read `global.json` and existing `.cs` files under the app source root to find th
 Place ALL backend artifacts in a single file in the slice folder: `<Feature>/<Slice>/<Slice>.cs` (under the app source root; a `<Module>/` grouping above the feature is optional — there is **no** top-level `Features/` wrapper).
 
 File creation order within the slice:
+
 1. Concept types (if new strongly-typed IDs are needed — see `add-concept` skill)
 2. Command `record` with `Handle()` method and optional validation attributes
-   - If a business rule depends on Chronicle event-sourced state, add the relevant read model as a parameter to `Handle()` — see `add-business-rule` skill (DCB pattern)
+    - If a business rule depends on Chronicle event-sourced state, add the relevant read model as a parameter to `Handle()` — see `add-business-rule` skill (DCB pattern)
 3. `CommandValidator<T>` for command-level rejection rules (see `add-business-rule`); `ConceptValidator<T>` for value invariants
 4. Constraint class `<Name>Constraint` (if needed)
 5. Event `record` with `[EventType]` (no arguments, no mutable properties)
 6. Read model `record` with `[ReadModel]` and model-bound projection attributes (`[FromEvent<T>]`, `[Key]`, etc.)
-   - Use fluent `IProjectionFor<T>` only when model-bound attributes don't fit
+    - Use fluent `IProjectionFor<T>` only when model-bound attributes don't fit
 
 **Critical rules:**
+
 - Commands are `record` types with a `Handle()` method directly on them — DO NOT create separate handler classes
 - Events use `[EventType]` with NO arguments — never pass a GUID or string
 - Projection: prefer model-bound attributes on the read model; if using `IProjectionFor<T>`, AutoMap is on by default — just call `.From<>()` directly
@@ -45,6 +48,7 @@ Run `dotnet build` in **both** Debug and Release. Fix ALL errors and warnings be
 ## Step 5 — Write specs (mandatory for every slice type)
 
 Use the in-process scenario family — `CommandScenario` for State Change, `ReadModelScenario` for State View, `ReactorScenario` for Automation/Translation. For each command, write specs covering:
+
 - Happy path — command succeeds, correct event appended
 - Each validation failure (one spec per rule)
 - Each business rule violation (one spec per DCB condition in `Handle()` that inspects a read model)
@@ -66,6 +70,7 @@ Place `.tsx` files in the slice folder `<Feature>/<Slice>/`.
 - No `any` types — use `unknown` with type guards
 
 **Command usage:**
+
 ```tsx
 const [myCommand] = MyCommand.use();
 const handleSubmit = async () => {
@@ -76,6 +81,7 @@ const handleSubmit = async () => {
 ```
 
 **Query with paging:**
+
 ```tsx
 const pageSize = 10;
 const [result, , setPage] = MyQuery.useWithPaging(pageSize);
@@ -91,6 +97,7 @@ Open `<Feature>/<Feature>.tsx` and add the new component. If a new page is intro
 ## Step 8 — Quality gates
 
 All must pass before the slice is considered done:
+
 - `dotnet build` — zero errors/warnings
 - `dotnet test` — zero failures
 - `yarn lint` — zero errors
diff --git a/.ai/skills/review-code/SKILL.md b/.ai/skills/review-code/SKILL.md
index 708f240c..83e14e8d 100644
--- a/.ai/skills/review-code/SKILL.md
+++ b/.ai/skills/review-code/SKILL.md
@@ -70,14 +70,15 @@ Classify findings: 🔴 measurable degradation at moderate load (fix before merg
 Start with: **Review result: ✅ Approved / ⚠️ Approved with comments / ❌ Changes requested**
 
 Then list issues:
-```
+
+````
 ### <file path>
 
 **[BLOCKING]** Line N: `problematic code`
 Because: explanation
 Fix:
 ```corrected code```
-```
+````
 
 End with a concise summary of what passed and what must change.
 
diff --git a/Documentation/CommandForm/multi-select-field.md b/Documentation/CommandForm/multi-select-field.md
index 08200103..e8744d13 100644
--- a/Documentation/CommandForm/multi-select-field.md
+++ b/Documentation/CommandForm/multi-select-field.md
@@ -40,7 +40,7 @@ const categoryOptions = [
 | `filter`                        | `boolean`                         | `false` | Shows a filter input in the options popup.                                                                                                                      |
 | `showClear`                     | `boolean`                         | `false` | Displays a clear icon to reset selected values.                                                                                                                 |
 | `className`                     | `string`                          | -       | Extra CSS class combined with the default `w-full`.                                                                                                             |
-| `pt` / `ptOptions` / `unstyled` | -                                 | -       | Pass-through styling for the underlying `Dropdown`; `ptOptions` and `unstyled` are compatibility no-ops.                                                       |
+| `pt` / `ptOptions` / `unstyled` | -                                 | -       | Pass-through styling for the underlying `Dropdown`; `ptOptions` and `unstyled` are compatibility no-ops.                                                        |
 
 ## Behavior
 
diff --git a/Documentation/CommandForm/radio-button-field.md b/Documentation/CommandForm/radio-button-field.md
index 964992ce..04c3ad9f 100644
--- a/Documentation/CommandForm/radio-button-field.md
+++ b/Documentation/CommandForm/radio-button-field.md
@@ -9,20 +9,35 @@ import { CommandDialog } from '@cratis/components/CommandDialog';
 import { RadioButtonField } from '@cratis/components/CommandForm';
 
 <CommandDialog command={MyCommand} visible={visible} onCancel={() => setVisible(false)}>
-    <RadioButtonField<MyCommand> name="size" value={c => c.size} buttonValue="small" label="Small" />
-    <RadioButtonField<MyCommand> name="size" value={c => c.size} buttonValue="medium" label="Medium" />
-    <RadioButtonField<MyCommand> name="size" value={c => c.size} buttonValue="large" label="Large" />
-</CommandDialog>
+    <RadioButtonField<MyCommand>
+        name='size'
+        value={(c) => c.size}
+        buttonValue='small'
+        label='Small'
+    />
+    <RadioButtonField<MyCommand>
+        name='size'
+        value={(c) => c.size}
+        buttonValue='medium'
+        label='Medium'
+    />
+    <RadioButtonField<MyCommand>
+        name='size'
+        value={(c) => c.size}
+        buttonValue='large'
+        label='Large'
+    />
+</CommandDialog>;
 ```
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `value` | `(instance: TCommand) => unknown` | — | **Required.** Accessor function that returns the bound property from the command instance. Pass the command type as the generic parameter for full type safety. |
-| `buttonValue` | `string \| number` | — | **Required.** The value this radio button represents. When selected, the command property is set to this value. |
-| `name` | `string` | — | **Required.** Native group name shared by every option bound to the same command property. |
-| `label` | `string` | — | Text displayed inline next to the radio button. |
+| Prop          | Type                              | Default | Description                                                                                                                                                     |
+| ------------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `value`       | `(instance: TCommand) => unknown` | —       | **Required.** Accessor function that returns the bound property from the command instance. Pass the command type as the generic parameter for full type safety. |
+| `buttonValue` | `string \| number`                | —       | **Required.** The value this radio button represents. When selected, the command property is set to this value.                                                 |
+| `name`        | `string`                          | —       | **Required.** Native group name shared by every option bound to the same command property.                                                                      |
+| `label`       | `string`                          | —       | Text displayed inline next to the radio button.                                                                                                                 |
 
 ## Behavior
 
diff --git a/Documentation/CommandForm/radio-group-field.md b/Documentation/CommandForm/radio-group-field.md
index c8a04e52..1cdaa824 100644
--- a/Documentation/CommandForm/radio-group-field.md
+++ b/Documentation/CommandForm/radio-group-field.md
@@ -16,38 +16,38 @@ const sizeOptions = [
 
 <CommandDialog command={MyCommand} visible={visible} onCancel={() => setVisible(false)}>
     <RadioGroupField<MyCommand>
-        value={c => c.size}
+        value={(c) => c.size}
         options={sizeOptions}
-        optionLabel="label"
-        optionValue="id"
-        title="Size"
+        optionLabel='label'
+        optionValue='id'
+        title='Size'
     />
-</CommandDialog>
+</CommandDialog>;
 ```
 
 With horizontal layout:
 
 ```tsx
 <RadioGroupField<MyCommand>
-    value={c => c.priority}
+    value={(c) => c.priority}
     options={priorityOptions}
-    optionLabel="label"
-    optionValue="id"
-    title="Priority"
-    layout="horizontal"
+    optionLabel='label'
+    optionValue='id'
+    title='Priority'
+    layout='horizontal'
 />
 ```
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `value` | `(instance: TCommand) => unknown` | — | **Required.** Accessor function that returns the bound property from the command instance. Pass the command type as the generic parameter for full type safety. |
-| `options` | `Array<Record<string, unknown>>` | — | **Required.** Array of option objects. |
-| `optionLabel` | `string` | — | **Required.** Key in each option object to use as the display label. |
-| `optionValue` | `string` | — | **Required.** Key in each option object to use as the submitted value. |
-| `layout` | `'horizontal' \| 'vertical'` | `'vertical'` | Controls whether the radio buttons are stacked vertically or laid out in a horizontal row. |
-| `name` | `string` | generated | Optional native radio-group name. All options in the component always share one name. |
+| Prop          | Type                              | Default      | Description                                                                                                                                                     |
+| ------------- | --------------------------------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `value`       | `(instance: TCommand) => unknown` | —            | **Required.** Accessor function that returns the bound property from the command instance. Pass the command type as the generic parameter for full type safety. |
+| `options`     | `Array<Record<string, unknown>>`  | —            | **Required.** Array of option objects.                                                                                                                          |
+| `optionLabel` | `string`                          | —            | **Required.** Key in each option object to use as the display label.                                                                                            |
+| `optionValue` | `string`                          | —            | **Required.** Key in each option object to use as the submitted value.                                                                                          |
+| `layout`      | `'horizontal' \| 'vertical'`      | `'vertical'` | Controls whether the radio buttons are stacked vertically or laid out in a horizontal row.                                                                      |
+| `name`        | `string`                          | generated    | Optional native radio-group name. All options in the component always share one name.                                                                           |
 
 ## Behavior
 
diff --git a/Documentation/CommandForm/rating-field.md b/Documentation/CommandForm/rating-field.md
index 89ddd5b1..4d5d5d4a 100644
--- a/Documentation/CommandForm/rating-field.md
+++ b/Documentation/CommandForm/rating-field.md
@@ -8,23 +8,27 @@
 import { CommandDialog } from '@cratis/components/CommandDialog';
 import { RatingField } from '@cratis/components/CommandForm';
 
-<CommandDialog command={SubmitReview} visible={visible} onCancel={() => setVisible(false)}>
-    <RatingField<SubmitReview> value={c => c.rating} stars={5} />
-</CommandDialog>
+<CommandDialog
+    command={SubmitReview}
+    visible={visible}
+    onCancel={() => setVisible(false)}
+>
+    <RatingField<SubmitReview> value={(c) => c.rating} stars={5} />
+</CommandDialog>;
 ```
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `value` | `(instance: TCommand) => unknown` | — | **Required.** Accessor that returns the bound property from the command instance. Pass the command type as the generic parameter for full type safety. |
-| `stars` | `number` | `5` | Number of stars to display. |
-| `name` | `string` | generated | Optional native radio-group name. Every star in the component shares one name. |
-| `starAriaLabel` | `(starValue: number) => string` | `"1 star"`, `"2 stars"`, … | Builds the accessible name for each star, from the 1-based star value. Override to localize. |
-| `className` | `string` | — | Extra CSS class name. |
-| `pt` | component-specific parts | — | Cratis-owned HTML attributes for stable parts. |
-| `ptOptions` | `object` | — | Legacy compatibility prop; ignored. |
-| `unstyled` | `boolean` | `false` | Legacy compatibility prop; ignored. |
+| Prop            | Type                              | Default                    | Description                                                                                                                                            |
+| --------------- | --------------------------------- | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `value`         | `(instance: TCommand) => unknown` | —                          | **Required.** Accessor that returns the bound property from the command instance. Pass the command type as the generic parameter for full type safety. |
+| `stars`         | `number`                          | `5`                        | Number of stars to display.                                                                                                                            |
+| `name`          | `string`                          | generated                  | Optional native radio-group name. Every star in the component shares one name.                                                                         |
+| `starAriaLabel` | `(starValue: number) => string`   | `"1 star"`, `"2 stars"`, … | Builds the accessible name for each star, from the 1-based star value. Override to localize.                                                           |
+| `className`     | `string`                          | —                          | Extra CSS class name.                                                                                                                                  |
+| `pt`            | component-specific parts          | —                          | Cratis-owned HTML attributes for stable parts.                                                                                                         |
+| `ptOptions`     | `object`                          | —                          | Legacy compatibility prop; ignored.                                                                                                                    |
+| `unstyled`      | `boolean`                         | `false`                    | Legacy compatibility prop; ignored.                                                                                                                    |
 
 ## Behavior
 
diff --git a/Documentation/Styling/pass-through.md b/Documentation/Styling/pass-through.md
index 43be4a80..5c2eb3fb 100644
--- a/Documentation/Styling/pass-through.md
+++ b/Documentation/Styling/pass-through.md
@@ -25,20 +25,20 @@ They are documented separately because not every DOM part needs a `pt` key, and
 </Dialog>
 ```
 
-| Component/type               | Typed `pt` keys                                                                                                                                                         | Element types                                                 |
-| ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- |
-| `ButtonParts`                | `root`, `icon`, `label`, `spinner`                                                                                                                                      | button, spans                                                 |
-| `DialogParts`                | `backdrop`, `positioner`, `root`, `header`, `title`, `close`, `content`, `footer`, `confirm`, `cancel`                                                                  | divs/header/heading/footer/buttons                            |
-| `DropdownParts`              | `root`, `input`, `select`, `trigger`, `value`, `clear`, `indicator`, `popover`, `listbox`, `option`, `filter`, `multiple`                                               | wrapper, input/button, spans, popover/listbox/options, select |
-| `DatePickerInputPassThrough` | `root`, `group`, `input`, `placeholder`, `segment`, `trigger`, `popover`, `dialog`, `calendar`, `header`, `heading`, `previous`, `next`, `grid`, `cell`, `buttonBar`, `today`, `clear` | divs, segmented field, buttons, calendar grid/cells |
-| `DataTableParts`             | `root`, `search`, `searchInput`, `tableContainer`, `table`, `head`, `headerRow`, `headerCell`, `body`, `row`, `cell`, `emptyRow`, `emptyCell`                           | div/input/table sections/rows/cells                           |
-| `TablePaginatorParts`        | `root`, `range`, `info`, `first`, `previous`, `next`, `last`                                                                                                            | navigation div, spans, and Button parts                       |
-| `StepperParts`               | `root`, `list`, `step`, `header`, `number`, `title`, `separator`, `panels`, `panel`                                                                                     | div, ordered list, list item, button, spans, section          |
-| `ToasterPassThrough`         | `region`, `toast`, `icon`, `content`, `title`, `description`, `close`, `action`                                                                                         | region/article/divs/spans/buttons                             |
-| `ActionMenubar` `pt`         | the `ButtonParts` keys applied to each action                                                                                                                           | button and spans                                              |
-| Query table / `DataPage` `paginatorPt` | `TablePaginatorParts`                                                                                                                                                   | paginator surface                                             |
-| `DataPage` `tablePt`         | `DataTableParts`                                                                                                                                                        | table surface                                                 |
-| `DataPage` `menubarPt`       | `ButtonParts`                                                                                                                                                           | action buttons                                                |
+| Component/type                         | Typed `pt` keys                                                                                                                                                                        | Element types                                                 |
+| -------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- |
+| `ButtonParts`                          | `root`, `icon`, `label`, `spinner`                                                                                                                                                     | button, spans                                                 |
+| `DialogParts`                          | `backdrop`, `positioner`, `root`, `header`, `title`, `close`, `content`, `footer`, `confirm`, `cancel`                                                                                 | divs/header/heading/footer/buttons                            |
+| `DropdownParts`                        | `root`, `input`, `select`, `trigger`, `value`, `clear`, `indicator`, `popover`, `listbox`, `option`, `filter`, `multiple`                                                              | wrapper, input/button, spans, popover/listbox/options, select |
+| `DatePickerInputPassThrough`           | `root`, `group`, `input`, `placeholder`, `segment`, `trigger`, `popover`, `dialog`, `calendar`, `header`, `heading`, `previous`, `next`, `grid`, `cell`, `buttonBar`, `today`, `clear` | divs, segmented field, buttons, calendar grid/cells           |
+| `DataTableParts`                       | `root`, `search`, `searchInput`, `tableContainer`, `table`, `head`, `headerRow`, `headerCell`, `body`, `row`, `cell`, `emptyRow`, `emptyCell`                                          | div/input/table sections/rows/cells                           |
+| `TablePaginatorParts`                  | `root`, `range`, `info`, `first`, `previous`, `next`, `last`                                                                                                                           | navigation div, spans, and Button parts                       |
+| `StepperParts`                         | `root`, `list`, `step`, `header`, `number`, `title`, `separator`, `panels`, `panel`                                                                                                    | div, ordered list, list item, button, spans, section          |
+| `ToasterPassThrough`                   | `region`, `toast`, `icon`, `content`, `title`, `description`, `close`, `action`                                                                                                        | region/article/divs/spans/buttons                             |
+| `ActionMenubar` `pt`                   | the `ButtonParts` keys applied to each action                                                                                                                                          | button and spans                                              |
+| Query table / `DataPage` `paginatorPt` | `TablePaginatorParts`                                                                                                                                                                  | paginator surface                                             |
+| `DataPage` `tablePt`                   | `DataTableParts`                                                                                                                                                                       | table surface                                                 |
+| `DataPage` `menubarPt`                 | `ButtonParts`                                                                                                                                                                          | action buttons                                                |
 
 Command field part keys:
 
@@ -74,8 +74,8 @@ Use the exact kebab-case value in CSS or tests:
 | TablePaginator | `root`, `range`, `info`; paginator buttons expose the documented Button parts                                                                                                                   |
 | Stepper        | `root`, `list`, `step`, `header`, `number`, `title`, `separator`, `panels`, `panel`                                                                                                             |
 | Toaster        | `region`, `toast`, `icon`, `content`, `title`, `description`, `action`, `close`                                                                                                                 |
-| Tooltip        | `trigger`, `popup`                                                                                                                                                                             |
-| Command fields | `root`, plus the typed field-specific values listed above (`input`, `textarea`, `box`, `control`, `handle`, `indicator`, `option`, `item`, `remove`, `value`, `star`, `toggle`)                |
+| Tooltip        | `trigger`, `popup`                                                                                                                                                                              |
+| Command fields | `root`, plus the typed field-specific values listed above (`input`, `textarea`, `box`, `control`, `handle`, `indicator`, `option`, `item`, `remove`, `value`, `star`, `toggle`)                 |
 | Display        | component roots plus `image`, `fallback`, `remove`, `indicator`, `range`, `track`, and labels where applicable                                                                                  |
 | Event timeline | `timeline`, `event`, `separator`, `marker`, `connector`, `content`                                                                                                                              |
 
diff --git a/Documentation/migration.md b/Documentation/migration.md
index d6d6e854..d1ac3322 100644
--- a/Documentation/migration.md
+++ b/Documentation/migration.md
@@ -193,15 +193,15 @@ export const productStepperParts: StepperParts = {
 
 For an existing nested Prime stepper preset, map the slots by rendered responsibility:
 
-| Components 3 Prime slot | Components 4 part |
-| ----------------------- | ----------------- |
-| `nav` | `list` |
-| `panelContainer` | `panels` |
-| `stepperpanel.root` | `step` (`<li>`) |
-| `stepperpanel.action` | `header` (`<button>`) |
-| `stepperpanel.number` | `number` |
-| `stepperpanel.title` | `title` |
-| `stepperpanel.content` | `panel` (`<section>`) |
+| Components 3 Prime slot | Components 4 part     |
+| ----------------------- | --------------------- |
+| `nav`                   | `list`                |
+| `panelContainer`        | `panels`              |
+| `stepperpanel.root`     | `step` (`<li>`)       |
+| `stepperpanel.action`   | `header` (`<button>`) |
+| `stepperpanel.number`   | `number`              |
+| `stepperpanel.title`    | `title`               |
+| `stepperpanel.content`  | `panel` (`<section>`) |
 
 The old `stepperpanel.header` wrapper has no one-to-one element. Put list-item layout on `step`, and interactive-header styling on `header`. Replace `data-p-active` selectors with `[data-cratis-part='step'][data-active='true']`.
 
diff --git a/Source/CommandForm/fields/Fields.stories.tsx b/Source/CommandForm/fields/Fields.stories.tsx
index 318ab017..792e44e8 100644
--- a/Source/CommandForm/fields/Fields.stories.tsx
+++ b/Source/CommandForm/fields/Fields.stories.tsx
@@ -21,7 +21,7 @@ import {
     MultiSelectField,
     ChipsField,
     RadioButtonField,
-    RadioGroupField
+    RadioGroupField,
 } from './index';
 
 const meta: Meta = {
@@ -93,7 +93,7 @@ class FormFieldsCommand extends Command {
             'multiSelect',
             'chips',
             'radioButton',
-            'radioGroup'
+            'radioGroup',
         ];
     }
 }
@@ -101,11 +101,19 @@ class FormFieldsCommand extends Command {
 class FormFieldsCommandValidator extends CommandValidator<FormFieldsCommand> {
     constructor() {
         super();
-        this.ruleFor(c => c.textInput).notEmpty().minLength(3);
-        this.ruleFor(c => c.emailInput).notEmpty().emailAddress();
-        this.ruleFor(c => c.passwordInput).notEmpty().minLength(6);
-        this.ruleFor(c => c.numberInput).greaterThanOrEqual(1).lessThanOrEqual(100);
-        this.ruleFor(c => c.dropdown).notEmpty();
+        this.ruleFor((c) => c.textInput)
+            .notEmpty()
+            .minLength(3);
+        this.ruleFor((c) => c.emailInput)
+            .notEmpty()
+            .emailAddress();
+        this.ruleFor((c) => c.passwordInput)
+            .notEmpty()
+            .minLength(6);
+        this.ruleFor((c) => c.numberInput)
+            .greaterThanOrEqual(1)
+            .lessThanOrEqual(100);
+        this.ruleFor((c) => c.dropdown).notEmpty();
     }
 }
 
@@ -113,14 +121,14 @@ const dropdownOptions = [
     { id: 'option1', name: 'Option 1' },
     { id: 'option2', name: 'Option 2' },
     { id: 'option3', name: 'Option 3' },
-    { id: 'option4', name: 'Option 4' }
+    { id: 'option4', name: 'Option 4' },
 ];
 
 const multiSelectOptions = [
     { id: 'feature1', name: 'Feature 1' },
     { id: 'feature2', name: 'Feature 2' },
     { id: 'feature3', name: 'Feature 3' },
-    { id: 'feature4', name: 'Feature 4' }
+    { id: 'feature4', name: 'Feature 4' },
 ];
 
 export const AllFields: Story = {
@@ -131,10 +139,11 @@ export const AllFields: Story = {
         }>({ errors: {}, canSubmit: false });
 
         return (
-            <StoryContainer size="md" asCard>
+            <StoryContainer size='md' asCard>
                 <h1>Cratis Command Form Fields</h1>
                 <p>
-                    This showcase demonstrates the Cratis-owned fields integrated with CommandForm from @cratis/arc.react.
+                    This showcase demonstrates the Cratis-owned fields integrated with
+                    CommandForm from @cratis/arc.react.
                 </p>
 
                 <StoryDivider />
@@ -162,22 +171,25 @@ export const AllFields: Story = {
                         const result = await command.validate();
 
                         if (!result.isValid) {
-                            const fieldError = result.validationResults.find(
-                                v => v.members.includes(fieldName)
+                            const fieldError = result.validationResults.find((v) =>
+                                v.members.includes(fieldName),
                             );
 
                             if (fieldError) {
-                                setValidationState(prev => ({
-                                    errors: { ...prev.errors, [fieldName]: fieldError.message },
-                                    canSubmit: false
+                                setValidationState((prev) => ({
+                                    errors: {
+                                        ...prev.errors,
+                                        [fieldName]: fieldError.message,
+                                    },
+                                    canSubmit: false,
                                 }));
                             }
                         } else {
-                            setValidationState(prev => {
+                            setValidationState((prev) => {
                                 const { [fieldName]: removed, ...rest } = prev.errors;
                                 return {
                                     errors: rest,
-                                    canSubmit: Object.keys(rest).length === 0
+                                    canSubmit: Object.keys(rest).length === 0,
                                 };
                             });
                         }
@@ -187,39 +199,60 @@ export const AllFields: Story = {
                         <h3>Text Inputs</h3>
 
                         <InputTextField<FormFieldsCommand>
-                            value={c => c.textInput}
-                            title="Text Input"
-                            placeholder="Enter at least 3 characters"
-                            description="Standard text input field with validation"
+                            value={(c) => c.textInput}
+                            title='Text Input'
+                            placeholder='Enter at least 3 characters'
+                            description='Standard text input field with validation'
                         />
                         {validationState.errors.textInput && (
-                            <div style={{ color: 'var(--cratis-red-500)', fontSize: '0.875rem', marginTop: '0.25rem', marginBottom: '1rem' }}>
+                            <div
+                                style={{
+                                    color: 'var(--cratis-red-500)',
+                                    fontSize: '0.875rem',
+                                    marginTop: '0.25rem',
+                                    marginBottom: '1rem',
+                                }}
+                            >
                                 {validationState.errors.textInput}
                             </div>
                         )}
 
                         <InputTextField<FormFieldsCommand>
-                            value={c => c.emailInput}
-                            title="Email Input"
-                            type="email"
-                            placeholder="Enter a valid email address"
-                            description="Email input with email validation"
+                            value={(c) => c.emailInput}
+                            title='Email Input'
+                            type='email'
+                            placeholder='Enter a valid email address'
+                            description='Email input with email validation'
                         />
                         {validationState.errors.emailInput && (
-                            <div style={{ color: 'var(--cratis-red-500)', fontSize: '0.875rem', marginTop: '0.25rem', marginBottom: '1rem' }}>
+                            <div
+                                style={{
+                                    color: 'var(--cratis-red-500)',
+                                    fontSize: '0.875rem',
+                                    marginTop: '0.25rem',
+                                    marginBottom: '1rem',
+                                }}
+                            >
                                 {validationState.errors.emailInput}
                             </div>
                         )}
 
                         <InputTextField<FormFieldsCommand>
-                            value={c => c.passwordInput}
-                            title="Password Input"
-                            type="password"
-                            placeholder="Enter at least 6 characters"
-                            description="Password input field (min 6 characters)"
+                            value={(c) => c.passwordInput}
+                            title='Password Input'
+                            type='password'
+                            placeholder='Enter at least 6 characters'
+                            description='Password input field (min 6 characters)'
                         />
                         {validationState.errors.passwordInput && (
-                            <div style={{ color: 'var(--cratis-red-500)', fontSize: '0.875rem', marginTop: '0.25rem', marginBottom: '1rem' }}>
+                            <div
+                                style={{
+                                    color: 'var(--cratis-red-500)',
+                                    fontSize: '0.875rem',
+                                    marginTop: '0.25rem',
+                                    marginBottom: '1rem',
+                                }}
+                            >
                                 {validationState.errors.passwordInput}
                             </div>
                         )}
@@ -231,16 +264,23 @@ export const AllFields: Story = {
                         <h3>Number Input</h3>
 
                         <NumberField<FormFieldsCommand>
-                            value={c => c.numberInput}
-                            title="Number Field"
-                            placeholder="Enter a number (1-100)"
-                            description="Number input with min/max boundaries"
+                            value={(c) => c.numberInput}
+                            title='Number Field'
+                            placeholder='Enter a number (1-100)'
+                            description='Number input with min/max boundaries'
                             min={1}
                             max={100}
                             step={1}
                         />
                         {validationState.errors.numberInput && (
-                            <div style={{ color: 'var(--cratis-red-500)', fontSize: '0.875rem', marginTop: '0.25rem', marginBottom: '1rem' }}>
+                            <div
+                                style={{
+                                    color: 'var(--cratis-red-500)',
+                                    fontSize: '0.875rem',
+                                    marginTop: '0.25rem',
+                                    marginBottom: '1rem',
+                                }}
+                            >
                                 {validationState.errors.numberInput}
                             </div>
                         )}
@@ -252,10 +292,10 @@ export const AllFields: Story = {
                         <h3>Text Area</h3>
 
                         <TextAreaField<FormFieldsCommand>
-                            value={c => c.textArea}
-                            title="Text Area Field"
-                            placeholder="Enter a longer text..."
-                            description="Multi-line text input"
+                            value={(c) => c.textArea}
+                            title='Text Area Field'
+                            placeholder='Enter a longer text...'
+                            description='Multi-line text input'
                             rows={5}
                         />
                     </StorySection>
@@ -266,16 +306,23 @@ export const AllFields: Story = {
                         <h3>Dropdown</h3>
 
                         <DropdownField<FormFieldsCommand>
-                            value={c => c.dropdown}
-                            title="Dropdown Field"
-                            placeholder="Select an option"
-                            description="Accessible Cratis dropdown component"
+                            value={(c) => c.dropdown}
+                            title='Dropdown Field'
+                            placeholder='Select an option'
+                            description='Accessible Cratis dropdown component'
                             options={dropdownOptions}
-                            optionValue="id"
-                            optionLabel="name"
+                            optionValue='id'
+                            optionLabel='name'
                         />
                         {validationState.errors.dropdown && (
-                            <div style={{ color: 'var(--cratis-red-500)', fontSize: '0.875rem', marginTop: '0.25rem', marginBottom: '1rem' }}>
+                            <div
+                                style={{
+                                    color: 'var(--cratis-red-500)',
+                                    fontSize: '0.875rem',
+                                    marginTop: '0.25rem',
+                                    marginBottom: '1rem',
+                                }}
+                            >
                                 {validationState.errors.dropdown}
                             </div>
                         )}
@@ -287,12 +334,12 @@ export const AllFields: Story = {
                         <h3>Calendar</h3>
 
                         <CalendarField<FormFieldsCommand>
-                            value={c => c.calendarDate}
-                            title="Calendar Field"
-                            description="Internationalized Cratis date picker"
-                            placeholder="Select a date"
+                            value={(c) => c.calendarDate}
+                            title='Calendar Field'
+                            description='Internationalized Cratis date picker'
+                            placeholder='Select a date'
                             showIcon
-                            dateFormat="mm/dd/yy"
+                            dateFormat='mm/dd/yy'
                         />
                     </StorySection>
 
@@ -302,9 +349,9 @@ export const AllFields: Story = {
                         <h3>Color Picker</h3>
 
                         <ColorPickerField<FormFieldsCommand>
-                            value={c => c.color}
-                            title="Color Picker Field"
-                            description="Cratis color picker for selecting hex colors"
+                            value={(c) => c.color}
+                            title='Color Picker Field'
+                            description='Cratis color picker for selecting hex colors'
                         />
                     </StorySection>
 
@@ -314,13 +361,13 @@ export const AllFields: Story = {
                         <h3>MultiSelect</h3>
 
                         <MultiSelectField<FormFieldsCommand>
-                            value={c => c.multiSelect}
-                            title="MultiSelect Field"
-                            description="Filterable Cratis multi-select"
-                            placeholder="Choose one or more features"
+                            value={(c) => c.multiSelect}
+                            title='MultiSelect Field'
+                            description='Filterable Cratis multi-select'
+                            placeholder='Choose one or more features'
                             options={multiSelectOptions}
-                            optionValue="id"
-                            optionLabel="name"
+                            optionValue='id'
+                            optionLabel='name'
                             filter
                             showClear
                         />
@@ -332,11 +379,11 @@ export const AllFields: Story = {
                         <h3>Chips</h3>
 
                         <ChipsField<FormFieldsCommand>
-                            value={c => c.chips}
-                            title="Chips Field"
-                            description="Cratis chips field for entering multiple text values"
-                            placeholder="Add tags and press Enter"
-                            separator=","
+                            value={(c) => c.chips}
+                            title='Chips Field'
+                            description='Cratis chips field for entering multiple text values'
+                            placeholder='Add tags and press Enter'
+                            separator=','
                         />
                     </StorySection>
 
@@ -346,9 +393,9 @@ export const AllFields: Story = {
                         <h3>Slider</h3>
 
                         <SliderField<FormFieldsCommand>
-                            value={c => c.slider}
-                            title="Slider Field"
-                            description="Slider for numeric values"
+                            value={(c) => c.slider}
+                            title='Slider Field'
+                            description='Slider for numeric values'
                             min={0}
                             max={100}
                             step={5}
@@ -361,8 +408,8 @@ export const AllFields: Story = {
                         <h3>Checkbox</h3>
 
                         <CheckboxField<FormFieldsCommand>
-                            value={c => c.checkbox}
-                            label="I agree to the terms and conditions"
+                            value={(c) => c.checkbox}
+                            label='I agree to the terms and conditions'
                         />
                     </StorySection>
 
@@ -372,22 +419,22 @@ export const AllFields: Story = {
                         <h3>Radio Button</h3>
 
                         <RadioButtonField<FormFieldsCommand>
-                            name="radio-button-options"
-                            value={c => c.radioButton}
-                            buttonValue="option1"
-                            label="Option 1"
+                            name='radio-button-options'
+                            value={(c) => c.radioButton}
+                            buttonValue='option1'
+                            label='Option 1'
                         />
                         <RadioButtonField<FormFieldsCommand>
-                            name="radio-button-options"
-                            value={c => c.radioButton}
-                            buttonValue="option2"
-                            label="Option 2"
+                            name='radio-button-options'
+                            value={(c) => c.radioButton}
+                            buttonValue='option2'
+                            label='Option 2'
                         />
                         <RadioButtonField<FormFieldsCommand>
-                            name="radio-button-options"
-                            value={c => c.radioButton}
-                            buttonValue="option3"
-                            label="Option 3"
+                            name='radio-button-options'
+                            value={(c) => c.radioButton}
+                            buttonValue='option3'
+                            label='Option 3'
                         />
                     </StorySection>
 
@@ -397,39 +444,52 @@ export const AllFields: Story = {
                         <h3>Radio Group</h3>
 
                         <RadioGroupField<FormFieldsCommand>
-                            value={c => c.radioGroup}
-                            title="Radio Group Field"
-                            description="Radio buttons from an options array"
+                            value={(c) => c.radioGroup}
+                            title='Radio Group Field'
+                            description='Radio buttons from an options array'
                             options={dropdownOptions}
-                            optionValue="id"
-                            optionLabel="name"
+                            optionValue='id'
+                            optionLabel='name'
                         />
                     </StorySection>
 
                     <StoryDivider />
 
-                    <div style={{ marginTop: '1.5rem', display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
+                    <div
+                        style={{
+                            marginTop: '1.5rem',
+                            display: 'flex',
+                            gap: '0.5rem',
+                            alignItems: 'center',
+                        }}
+                    >
                         <Button
-                            type="submit"
+                            type='submit'
                             disabled={!validationState.canSubmit}
-                            label="Submit Form"
+                            label='Submit Form'
                         />
-                        {!validationState.canSubmit && Object.keys(validationState.errors).length > 0 && (
-                            <span style={{ color: 'var(--cratis-orange-500)', fontSize: '0.875rem' }}>
-                                Please fix validation errors
-                            </span>
-                        )}
+                        {!validationState.canSubmit &&
+                            Object.keys(validationState.errors).length > 0 && (
+                                <span
+                                    style={{
+                                        color: 'var(--cratis-orange-500)',
+                                        fontSize: '0.875rem',
+                                    }}
+                                >
+                                    Please fix validation errors
+                                </span>
+                            )}
                     </div>
                 </CommandForm>
             </StoryContainer>
         );
-    }
+    },
 };
 
 export const InputTextFieldExample: Story = {
     render: () => {
         return (
-            <StoryContainer size="sm" asCard>
+            <StoryContainer size='sm' asCard>
                 <h2>InputTextField</h2>
                 <p>Cratis text inputs wrapped for CommandForm.</p>
 
@@ -438,34 +498,34 @@ export const InputTextFieldExample: Story = {
                     initialValues={{ textInput: '', emailInput: '', passwordInput: '' }}
                 >
                     <InputTextField<FormFieldsCommand>
-                        value={c => c.textInput}
-                        title="Standard Text"
-                        placeholder="Type here..."
+                        value={(c) => c.textInput}
+                        title='Standard Text'
+                        placeholder='Type here...'
                     />
 
                     <InputTextField<FormFieldsCommand>
-                        value={c => c.emailInput}
-                        title="Email"
-                        type="email"
-                        placeholder="your@email.com"
+                        value={(c) => c.emailInput}
+                        title='Email'
+                        type='email'
+                        placeholder='your@email.com'
                     />
 
                     <InputTextField<FormFieldsCommand>
-                        value={c => c.passwordInput}
-                        title="Password"
-                        type="password"
-                        placeholder="••••••••"
+                        value={(c) => c.passwordInput}
+                        title='Password'
+                        type='password'
+                        placeholder='••••••••'
                     />
                 </CommandForm>
             </StoryContainer>
         );
-    }
+    },
 };
 
 export const NumberFieldExample: Story = {
     render: () => {
         return (
-            <StoryContainer size="sm" asCard>
+            <StoryContainer size='sm' asCard>
                 <h2>NumberField</h2>
                 <p>Cratis number input with native constraints.</p>
 
@@ -474,9 +534,9 @@ export const NumberFieldExample: Story = {
                     initialValues={{ numberInput: 42 }}
                 >
                     <NumberField<FormFieldsCommand>
-                        value={c => c.numberInput}
-                        title="Quantity"
-                        placeholder="Enter a number"
+                        value={(c) => c.numberInput}
+                        title='Quantity'
+                        placeholder='Enter a number'
                         min={0}
                         max={100}
                         step={1}
@@ -484,13 +544,13 @@ export const NumberFieldExample: Story = {
                 </CommandForm>
             </StoryContainer>
         );
-    }
+    },
 };
 
 export const TextAreaFieldExample: Story = {
     render: () => {
         return (
-            <StoryContainer size="sm" asCard>
+            <StoryContainer size='sm' asCard>
                 <h2>TextAreaField</h2>
                 <p>Cratis textarea for multi-line text input.</p>
 
@@ -499,21 +559,21 @@ export const TextAreaFieldExample: Story = {
                     initialValues={{ textArea: '' }}
                 >
                     <TextAreaField<FormFieldsCommand>
-                        value={c => c.textArea}
-                        title="Description"
-                        placeholder="Enter a detailed description..."
+                        value={(c) => c.textArea}
+                        title='Description'
+                        placeholder='Enter a detailed description...'
                         rows={6}
                     />
                 </CommandForm>
             </StoryContainer>
         );
-    }
+    },
 };
 
 export const DropdownFieldExample: Story = {
     render: () => {
         return (
-            <StoryContainer size="sm" asCard>
+            <StoryContainer size='sm' asCard>
                 <h2>DropdownField</h2>
                 <p>Cratis Dropdown for selecting from a list of options.</p>
 
@@ -522,23 +582,23 @@ export const DropdownFieldExample: Story = {
                     initialValues={{ dropdown: '' }}
                 >
                     <DropdownField<FormFieldsCommand>
-                        value={c => c.dropdown}
-                        title="Select Option"
-                        placeholder="Choose..."
+                        value={(c) => c.dropdown}
+                        title='Select Option'
+                        placeholder='Choose...'
                         options={dropdownOptions}
-                        optionValue="id"
-                        optionLabel="name"
+                        optionValue='id'
+                        optionLabel='name'
                     />
                 </CommandForm>
             </StoryContainer>
         );
-    }
+    },
 };
 
 export const SliderFieldExample: Story = {
     render: () => {
         return (
-            <StoryContainer size="sm" asCard>
+            <StoryContainer size='sm' asCard>
                 <h2>SliderField</h2>
                 <p>Cratis Slider for selecting numeric values visually.</p>
 
@@ -547,8 +607,8 @@ export const SliderFieldExample: Story = {
                     initialValues={{ slider: 75 }}
                 >
                     <SliderField<FormFieldsCommand>
-                        value={c => c.slider}
-                        title="Volume"
+                        value={(c) => c.slider}
+                        title='Volume'
                         min={0}
                         max={100}
                         step={5}
@@ -556,13 +616,13 @@ export const SliderFieldExample: Story = {
                 </CommandForm>
             </StoryContainer>
         );
-    }
+    },
 };
 
 export const CheckboxFieldExample: Story = {
     render: () => {
         return (
-            <StoryContainer size="sm" asCard>
+            <StoryContainer size='sm' asCard>
                 <h2>CheckboxField</h2>
                 <p>Cratis Checkbox for boolean values.</p>
 
@@ -571,24 +631,24 @@ export const CheckboxFieldExample: Story = {
                     initialValues={{ checkbox: false }}
                 >
                     <CheckboxField<FormFieldsCommand>
-                        value={c => c.checkbox}
-                        label="Enable notifications"
+                        value={(c) => c.checkbox}
+                        label='Enable notifications'
                     />
 
                     <CheckboxField<FormFieldsCommand>
-                        value={c => c.checkbox}
-                        label="I have read and agree to the terms"
+                        value={(c) => c.checkbox}
+                        label='I have read and agree to the terms'
                     />
                 </CommandForm>
             </StoryContainer>
         );
-    }
+    },
 };
 
 export const CalendarFieldExample: Story = {
     render: () => {
         return (
-            <StoryContainer size="sm" asCard>
+            <StoryContainer size='sm' asCard>
                 <h2>CalendarField</h2>
                 <p>Cratis internationalized date picker for selecting date values.</p>
 
@@ -597,21 +657,21 @@ export const CalendarFieldExample: Story = {
                     initialValues={{ calendarDate: null }}
                 >
                     <CalendarField<FormFieldsCommand>
-                        value={c => c.calendarDate}
-                        title="Start Date"
-                        placeholder="Pick a date"
+                        value={(c) => c.calendarDate}
+                        title='Start Date'
+                        placeholder='Pick a date'
                         showIcon
                     />
                 </CommandForm>
             </StoryContainer>
         );
-    }
+    },
 };
 
 export const ColorPickerFieldExample: Story = {
     render: () => {
         return (
-            <StoryContainer size="sm" asCard>
+            <StoryContainer size='sm' asCard>
                 <h2>ColorPickerField</h2>
                 <p>Cratis ColorPicker for selecting hex colors.</p>
 
@@ -620,19 +680,19 @@ export const ColorPickerFieldExample: Story = {
                     initialValues={{ color: '0ea5e9' }}
                 >
                     <ColorPickerField<FormFieldsCommand>
-                        value={c => c.color}
-                        title="Brand Color"
+                        value={(c) => c.color}
+                        title='Brand Color'
                     />
                 </CommandForm>
             </StoryContainer>
         );
-    }
+    },
 };
 
 export const MultiSelectFieldExample: Story = {
     render: () => {
         return (
-            <StoryContainer size="sm" asCard>
+            <StoryContainer size='sm' asCard>
                 <h2>MultiSelectField</h2>
                 <p>Cratis filterable multi-select for selecting several options.</p>
 
@@ -641,24 +701,24 @@ export const MultiSelectFieldExample: Story = {
                     initialValues={{ multiSelect: ['feature2'] }}
                 >
                     <MultiSelectField<FormFieldsCommand>
-                        value={c => c.multiSelect}
-                        title="Features"
-                        placeholder="Select features"
+                        value={(c) => c.multiSelect}
+                        title='Features'
+                        placeholder='Select features'
                         options={multiSelectOptions}
-                        optionValue="id"
-                        optionLabel="name"
+                        optionValue='id'
+                        optionLabel='name'
                         filter
                     />
                 </CommandForm>
             </StoryContainer>
         );
-    }
+    },
 };
 
 export const ChipsFieldExample: Story = {
     render: () => {
         return (
-            <StoryContainer size="sm" asCard>
+            <StoryContainer size='sm' asCard>
                 <h2>ChipsField</h2>
                 <p>Cratis Chips field for entering and managing multiple text values.</p>
 
@@ -667,50 +727,53 @@ export const ChipsFieldExample: Story = {
                     initialValues={{ chips: ['urgent'] }}
                 >
                     <ChipsField<FormFieldsCommand>
-                        value={c => c.chips}
-                        title="Tags"
-                        placeholder="Type a tag and press Enter"
+                        value={(c) => c.chips}
+                        title='Tags'
+                        placeholder='Type a tag and press Enter'
                         addOnBlur
                     />
                 </CommandForm>
             </StoryContainer>
         );
-    }
+    },
 };
 
 export const RadioButtonFieldExample: Story = {
     render: () => {
         return (
-            <StoryContainer size="sm" asCard>
+            <StoryContainer size='sm' asCard>
                 <h2>RadioButtonField</h2>
-                <p>Cratis native radio options form one keyboard-navigable group when they share a name.</p>
+                <p>
+                    Cratis native radio options form one keyboard-navigable group when
+                    they share a name.
+                </p>
 
                 <CommandForm<FormFieldsCommand>
                     command={FormFieldsCommand}
                     initialValues={{ radioButton: 'apple' }}
                 >
                     <RadioButtonField<FormFieldsCommand>
-                        name="fruit"
-                        value={c => c.radioButton}
-                        buttonValue="apple"
-                        label="Apple"
+                        name='fruit'
+                        value={(c) => c.radioButton}
+                        buttonValue='apple'
+                        label='Apple'
                     />
                     <RadioButtonField<FormFieldsCommand>
-                        name="fruit"
-                        value={c => c.radioButton}
-                        buttonValue="banana"
-                        label="Banana"
+                        name='fruit'
+                        value={(c) => c.radioButton}
+                        buttonValue='banana'
+                        label='Banana'
                     />
                     <RadioButtonField<FormFieldsCommand>
-                        name="fruit"
-                        value={c => c.radioButton}
-                        buttonValue="cherry"
-                        label="Cherry"
+                        name='fruit'
+                        value={(c) => c.radioButton}
+                        buttonValue='cherry'
+                        label='Cherry'
                     />
                 </CommandForm>
             </StoryContainer>
         );
-    }
+    },
 };
 
 export const RadioGroupFieldExample: Story = {
@@ -723,7 +786,7 @@ export const RadioGroupFieldExample: Story = {
         ];
 
         return (
-            <StoryContainer size="sm" asCard>
+            <StoryContainer size='sm' asCard>
                 <h2>RadioGroupField</h2>
                 <p>Cratis native radio group rendered from an options array.</p>
 
@@ -732,25 +795,25 @@ export const RadioGroupFieldExample: Story = {
                     initialValues={{ radioGroup: 'medium' }}
                 >
                     <RadioGroupField<FormFieldsCommand>
-                        value={c => c.radioGroup}
-                        title="T-Shirt Size"
-                        description="Select your preferred size"
+                        value={(c) => c.radioGroup}
+                        title='T-Shirt Size'
+                        description='Select your preferred size'
                         options={options}
-                        optionValue="id"
-                        optionLabel="name"
+                        optionValue='id'
+                        optionLabel='name'
                     />
 
                     <RadioGroupField<FormFieldsCommand>
-                        value={c => c.radioGroup}
-                        title="T-Shirt Size (Horizontal)"
-                        description="Same options laid out horizontally"
+                        value={(c) => c.radioGroup}
+                        title='T-Shirt Size (Horizontal)'
+                        description='Same options laid out horizontally'
                         options={options}
-                        optionValue="id"
-                        optionLabel="name"
-                        layout="horizontal"
+                        optionValue='id'
+                        optionLabel='name'
+                        layout='horizontal'
                     />
                 </CommandForm>
             </StoryContainer>
         );
-    }
+    },
 };
diff --git a/Source/CommandForm/fields/RadioGroupField.tsx b/Source/CommandForm/fields/RadioGroupField.tsx
index 841accae..d02945e5 100644
--- a/Source/CommandForm/fields/RadioGroupField.tsx
+++ b/Source/CommandForm/fields/RadioGroupField.tsx
@@ -32,73 +32,76 @@ export const RadioGroupField = asCommandFormField<RadioGroupFieldComponentProps>
         const name = props.name ?? generatedName;
 
         return (
-        <div
-            {...props.pt?.root}
-            role='radiogroup'
-            className={[
-                'cratis-radio-group',
-                `cratis-radio-group--${props.layout ?? 'vertical'}`,
-                props.pt?.root?.className,
-                props.className,
-            ]
-                .filter(Boolean)
-                .join(' ')}
-            data-cratis-part='root'
-        >
-            {props.options.map((option) => {
-                const value = option[props.optionValue] as string | number;
-                const label = String(option[props.optionLabel] ?? value);
-                return (
-                    <label
-                        {...props.pt?.option}
-                        key={String(value)}
-                        className={['cratis-choice-field', props.pt?.option?.className]
-                            .filter(Boolean)
-                            .join(' ')}
-                        onBlur={props.onBlur}
-                        data-cratis-part='option'
-                    >
-                        <input
-                            {...props.pt?.input}
-                            type='radio'
-                            name={name}
-                            checked={props.value === value}
-                            onChange={(event) => {
-                                if (event.target.checked) props.onChange(value);
-                            }}
-                            aria-invalid={props.invalid || undefined}
+            <div
+                {...props.pt?.root}
+                role='radiogroup'
+                className={[
+                    'cratis-radio-group',
+                    `cratis-radio-group--${props.layout ?? 'vertical'}`,
+                    props.pt?.root?.className,
+                    props.className,
+                ]
+                    .filter(Boolean)
+                    .join(' ')}
+                data-cratis-part='root'
+            >
+                {props.options.map((option) => {
+                    const value = option[props.optionValue] as string | number;
+                    const label = String(option[props.optionLabel] ?? value);
+                    return (
+                        <label
+                            {...props.pt?.option}
+                            key={String(value)}
                             className={[
-                                'cratis-choice-field__native',
-                                props.pt?.input?.className,
+                                'cratis-choice-field',
+                                props.pt?.option?.className,
                             ]
                                 .filter(Boolean)
                                 .join(' ')}
-                            data-cratis-part='input'
-                        />
-                        <span
-                            {...props.pt?.box}
-                            className={['cratis-radio__box', props.pt?.box?.className]
-                                .filter(Boolean)
-                                .join(' ')}
-                            data-cratis-part='box'
-                            aria-hidden='true'
+                            onBlur={props.onBlur}
+                            data-cratis-part='option'
                         >
-                            <span
-                                {...props.pt?.indicator}
+                            <input
+                                {...props.pt?.input}
+                                type='radio'
+                                name={name}
+                                checked={props.value === value}
+                                onChange={(event) => {
+                                    if (event.target.checked) props.onChange(value);
+                                }}
+                                aria-invalid={props.invalid || undefined}
                                 className={[
-                                    'cratis-radio__indicator',
-                                    props.pt?.indicator?.className,
+                                    'cratis-choice-field__native',
+                                    props.pt?.input?.className,
                                 ]
                                     .filter(Boolean)
                                     .join(' ')}
-                                data-cratis-part='indicator'
+                                data-cratis-part='input'
                             />
-                        </span>
-                        <span className='cratis-choice-field__label'>{label}</span>
-                    </label>
-                );
-            })}
-        </div>
+                            <span
+                                {...props.pt?.box}
+                                className={['cratis-radio__box', props.pt?.box?.className]
+                                    .filter(Boolean)
+                                    .join(' ')}
+                                data-cratis-part='box'
+                                aria-hidden='true'
+                            >
+                                <span
+                                    {...props.pt?.indicator}
+                                    className={[
+                                        'cratis-radio__indicator',
+                                        props.pt?.indicator?.className,
+                                    ]
+                                        .filter(Boolean)
+                                        .join(' ')}
+                                    data-cratis-part='indicator'
+                                />
+                            </span>
+                            <span className='cratis-choice-field__label'>{label}</span>
+                        </label>
+                    );
+                })}
+            </div>
         );
     },
     { defaultValue: '', extractValue: (value: unknown) => value as string | number },
diff --git a/Source/CommandForm/fields/RatingField.tsx b/Source/CommandForm/fields/RatingField.tsx
index dbaac47b..34bee5ba 100644
--- a/Source/CommandForm/fields/RatingField.tsx
+++ b/Source/CommandForm/fields/RatingField.tsx
@@ -29,69 +29,73 @@ export const RatingField = asCommandFormField<RatingFieldComponentProps>(
         const name = props.name ?? generatedName;
 
         return (
-        <div
-            {...props.pt?.root}
-            role='radiogroup'
-            className={['cratis-rating-field', props.pt?.root?.className, props.className]
-                .filter(Boolean)
-                .join(' ')}
-            onBlur={props.onBlur}
-            data-cratis-part='root'
-            data-invalid={props.invalid || undefined}
-        >
-            {Array.from({ length: props.stars ?? 5 }, (_, index) => {
-                const starValue = index + 1;
-                const label = (
-                    props.starAriaLabel ??
-                    ((value: number) => `${value} ${value === 1 ? 'star' : 'stars'}`)
-                )(starValue);
-                return (
-                    <label
-                        {...props.pt?.option}
-                        key={starValue}
-                        className={[
-                            'cratis-rating-field__option',
-                            props.pt?.option?.className,
-                        ]
-                            .filter(Boolean)
-                            .join(' ')}
-                        data-cratis-part='option'
-                    >
-                        <input
-                            {...props.pt?.input}
-                            type='radio'
-                            name={name}
-                            checked={props.value === starValue}
-                            onChange={(event) => {
-                                if (event.target.checked) props.onChange(starValue);
-                            }}
-                            aria-label={label}
+            <div
+                {...props.pt?.root}
+                role='radiogroup'
+                className={[
+                    'cratis-rating-field',
+                    props.pt?.root?.className,
+                    props.className,
+                ]
+                    .filter(Boolean)
+                    .join(' ')}
+                onBlur={props.onBlur}
+                data-cratis-part='root'
+                data-invalid={props.invalid || undefined}
+            >
+                {Array.from({ length: props.stars ?? 5 }, (_, index) => {
+                    const starValue = index + 1;
+                    const label = (
+                        props.starAriaLabel ??
+                        ((value: number) => `${value} ${value === 1 ? 'star' : 'stars'}`)
+                    )(starValue);
+                    return (
+                        <label
+                            {...props.pt?.option}
+                            key={starValue}
                             className={[
-                                'cratis-choice-field__native',
-                                props.pt?.input?.className,
+                                'cratis-rating-field__option',
+                                props.pt?.option?.className,
                             ]
                                 .filter(Boolean)
                                 .join(' ')}
-                            data-cratis-part='input'
-                        />
-                        <span
-                            {...props.pt?.star}
-                            className={[
-                                'cratis-rating-field__star',
-                                props.pt?.star?.className,
-                            ]
-                                .filter(Boolean)
-                                .join(' ')}
-                            data-cratis-part='star'
-                            data-selected={starValue <= props.value || undefined}
-                            aria-hidden='true'
+                            data-cratis-part='option'
                         >
-                            ★
-                        </span>
-                    </label>
-                );
-            })}
-        </div>
+                            <input
+                                {...props.pt?.input}
+                                type='radio'
+                                name={name}
+                                checked={props.value === starValue}
+                                onChange={(event) => {
+                                    if (event.target.checked) props.onChange(starValue);
+                                }}
+                                aria-label={label}
+                                className={[
+                                    'cratis-choice-field__native',
+                                    props.pt?.input?.className,
+                                ]
+                                    .filter(Boolean)
+                                    .join(' ')}
+                                data-cratis-part='input'
+                            />
+                            <span
+                                {...props.pt?.star}
+                                className={[
+                                    'cratis-rating-field__star',
+                                    props.pt?.star?.className,
+                                ]
+                                    .filter(Boolean)
+                                    .join(' ')}
+                                data-cratis-part='star'
+                                data-selected={starValue <= props.value || undefined}
+                                aria-hidden='true'
+                            >
+                                ★
+                            </span>
+                        </label>
+                    );
+                })}
+            </div>
         );
     },
     {
diff --git a/Source/CommandForm/for_radio_fields/when_rendering_native_groups.tsx b/Source/CommandForm/for_radio_fields/when_rendering_native_groups.tsx
index c4e55c4e..a854c30d 100644
--- a/Source/CommandForm/for_radio_fields/when_rendering_native_groups.tsx
+++ b/Source/CommandForm/for_radio_fields/when_rendering_native_groups.tsx
@@ -35,8 +35,9 @@ class ChooseOptions extends Command {
 }
 
 const radioNames = (html: string) =>
-    Array.from(html.matchAll(/<input[^>]+type="radio"[^>]+name="([^"]+)"/g), (match) =>
-        match[1],
+    Array.from(
+        html.matchAll(/<input[^>]+type="radio"[^>]+name="([^"]+)"/g),
+        (match) => match[1],
     );
 
 describe('when rendering native radio groups', () => {
diff --git a/Source/DataTables/DataTableCore.tsx b/Source/DataTables/DataTableCore.tsx
index 1667ad34..797ac62a 100644
--- a/Source/DataTables/DataTableCore.tsx
+++ b/Source/DataTables/DataTableCore.tsx
@@ -509,7 +509,8 @@ export const DataTableCore = <TData extends object>({
                                         onKeyDown={(event) => {
                                             if (
                                                 event.target !== event.currentTarget ||
-                                                (event.key !== 'Enter' && event.key !== ' ')
+                                                (event.key !== 'Enter' &&
+                                                    event.key !== ' ')
                                             ) {
                                                 return;
                                             }
diff --git a/Source/DataTables/for_DataTableCore/when_activating_a_row_with_the_keyboard.tsx b/Source/DataTables/for_DataTableCore/when_activating_a_row_with_the_keyboard.tsx
index a8be31c1..c1467c9a 100644
--- a/Source/DataTables/for_DataTableCore/when_activating_a_row_with_the_keyboard.tsx
+++ b/Source/DataTables/for_DataTableCore/when_activating_a_row_with_the_keyboard.tsx
@@ -65,9 +65,8 @@ describe('when activating a row with the keyboard', () => {
 
     it('should make the interactive row keyboard focusable', () => {
         expect(
-            container.querySelector<HTMLTableRowElement>(
-                '[data-cratis-part="row"]',
-            )?.tabIndex,
+            container.querySelector<HTMLTableRowElement>('[data-cratis-part="row"]')
+                ?.tabIndex,
         ).to.equal(0);
     });
 
diff --git a/Source/Dialogs/Dialog.tsx b/Source/Dialogs/Dialog.tsx
index a86df63f..21dfd608 100644
--- a/Source/Dialogs/Dialog.tsx
+++ b/Source/Dialogs/Dialog.tsx
@@ -342,10 +342,7 @@ export const Dialog = ({
         return (
             <div
                 {...pt?.backdrop}
-                className={classNames(
-                    'cratis-dialog__backdrop',
-                    pt?.backdrop?.className,
-                )}
+                className={classNames('cratis-dialog__backdrop', pt?.backdrop?.className)}
                 style={{ zIndex: 1100, ...pt?.backdrop?.style }}
                 data-cratis-part='backdrop'
             >
diff --git a/Source/Dialogs/for_Dialog/when_hydrating_server_markup.tsx b/Source/Dialogs/for_Dialog/when_hydrating_server_markup.tsx
index a85de3ab..decbe61f 100644
--- a/Source/Dialogs/for_Dialog/when_hydrating_server_markup.tsx
+++ b/Source/Dialogs/for_Dialog/when_hydrating_server_markup.tsx
@@ -69,8 +69,6 @@ describe('when hydrating server markup', () => {
 
     it('should preserve the server tree through the first client render', () => {
         expect(hydrationErrors).to.deep.equal([]);
-        expect(document.querySelector('[data-cratis-part="root"]')).not.to.equal(
-            null,
-        );
+        expect(document.querySelector('[data-cratis-part="root"]')).not.to.equal(null);
     });
 });
diff --git a/Source/Dropdown/for_Dropdown/when_rendering_a_filterable_multiple_selection.tsx b/Source/Dropdown/for_Dropdown/when_rendering_a_filterable_multiple_selection.tsx
index d0f34a4c..fd1c40ed 100644
--- a/Source/Dropdown/for_Dropdown/when_rendering_a_filterable_multiple_selection.tsx
+++ b/Source/Dropdown/for_Dropdown/when_rendering_a_filterable_multiple_selection.tsx
@@ -63,9 +63,8 @@ describe('when rendering a filterable multiple selection', () => {
 
     it('should render the multi-value combobox filter', () => {
         expect(
-            container.querySelector<HTMLInputElement>(
-                '[data-cratis-part="filter"]',
-            )?.placeholder,
+            container.querySelector<HTMLInputElement>('[data-cratis-part="filter"]')
+                ?.placeholder,
         ).to.equal('Filter choices');
     });
 
diff --git a/Source/MIGRATION.md b/Source/MIGRATION.md
index 288d455d..ebb66213 100644
--- a/Source/MIGRATION.md
+++ b/Source/MIGRATION.md
@@ -190,15 +190,15 @@ export const productStepperParts: StepperParts = {
 
 For an existing nested Prime stepper preset, map the slots by rendered responsibility:
 
-| Components 3 Prime slot | Components 4 part |
-| ----------------------- | ----------------- |
-| `nav` | `list` |
-| `panelContainer` | `panels` |
-| `stepperpanel.root` | `step` (`<li>`) |
-| `stepperpanel.action` | `header` (`<button>`) |
-| `stepperpanel.number` | `number` |
-| `stepperpanel.title` | `title` |
-| `stepperpanel.content` | `panel` (`<section>`) |
+| Components 3 Prime slot | Components 4 part     |
+| ----------------------- | --------------------- |
+| `nav`                   | `list`                |
+| `panelContainer`        | `panels`              |
+| `stepperpanel.root`     | `step` (`<li>`)       |
+| `stepperpanel.action`   | `header` (`<button>`) |
+| `stepperpanel.number`   | `number`              |
+| `stepperpanel.title`    | `title`               |
+| `stepperpanel.content`  | `panel` (`<section>`) |
 
 The old `stepperpanel.header` wrapper has no one-to-one element. Put list-item layout on `step`, and interactive-header styling on `header`. Replace `data-p-active` selectors with `[data-cratis-part='step'][data-active='true']`.
 
diff --git a/Source/SchemaEditor/SchemaEditor.tsx b/Source/SchemaEditor/SchemaEditor.tsx
index 771bd6f8..ee28c00c 100644
--- a/Source/SchemaEditor/SchemaEditor.tsx
+++ b/Source/SchemaEditor/SchemaEditor.tsx
@@ -138,10 +138,7 @@ export const SchemaEditor = ({
     className,
     labels,
 }: SchemaEditorProps) => {
-    const l = useMemo(
-        () => ({ ...defaultSchemaEditorLabels, ...labels }),
-        [labels],
-    );
+    const l = useMemo(() => ({ ...defaultSchemaEditorLabels, ...labels }), [labels]);
     const [currentPath, setCurrentPath] = useState<string[]>([]);
     const [properties, setProperties] = useState<JsonSchemaProperty[]>([]);
     const [currentSchema, setCurrentSchema] = useState<JsonSchema>(schema);

From ea07f9ac3e9ec2bfd3993aa15508a171c8a5aff9 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Sun, 23 Aug 2026 16:43:13 +0200
Subject: [PATCH 016/267] Harden the Components 4 public API

Connect tooltip behavior to real focusable controls, associate Arc field titles and errors with every command control, make DataPage selection truly typed and controlled, complete pass-through forwarding, and align dialog callbacks and documentation with runtime behavior.
---
 Documentation/CommandDialog/index.md          |  2 +-
 Documentation/CommandForm/index.md            | 15 +++-
 Documentation/Styling/pass-through.md         |  2 +-
 Source/CommandDialog/CommandDialog.tsx        | 18 +++-
 .../when_command_execution_fails.tsx          | 88 +++++++++++++++++++
 Source/CommandForm/fields/CalendarField.tsx   | 25 +++++-
 Source/CommandForm/fields/CheckboxField.tsx   | 25 +++++-
 Source/CommandForm/fields/ChipsField.tsx      | 17 +++-
 .../CommandForm/fields/ColorPickerField.tsx   | 17 +++-
 Source/CommandForm/fields/DropdownField.tsx   | 25 +++++-
 Source/CommandForm/fields/Fields.css          | 12 +++
 Source/CommandForm/fields/InputTextField.tsx  | 25 +++++-
 .../CommandForm/fields/MultiSelectField.tsx   | 27 ++++--
 Source/CommandForm/fields/NumberField.tsx     | 23 ++++-
 Source/CommandForm/fields/PasswordField.tsx   | 17 +++-
 .../CommandForm/fields/RadioButtonField.tsx   | 25 +++++-
 Source/CommandForm/fields/RadioGroupField.tsx | 18 +++-
 Source/CommandForm/fields/RatingField.tsx     | 18 +++-
 Source/CommandForm/fields/SliderField.tsx     | 23 ++++-
 Source/CommandForm/fields/TextAreaField.tsx   | 25 +++++-
 .../CommandForm/fields/ToggleSwitchField.tsx  | 25 +++++-
 .../CommandForm/fields/fieldAccessibility.tsx | 61 +++++++++++++
 .../when_rendering_a_titled_field.tsx         | 48 ++++++++++
 .../when_rendering_validation_errors.tsx      | 38 ++++++++
 Source/Common/Button.tsx                      | 29 +++---
 Source/Common/DatePickerInput.tsx             | 15 ++++
 Source/Common/Tooltip.css                     |  5 --
 Source/Common/Tooltip.tsx                     | 31 ++++---
 .../when_configuring_input_pass_through.tsx   |  5 ++
 .../when_configuring_standard_props.tsx       |  4 +
 .../when_rendered/and_it_is_not_disabled.ts   | 14 +--
 .../when_the_trigger_receives_focus.tsx       | 70 +++++++++++++++
 Source/DataPage/DataPage.tsx                  | 23 ++---
 .../for_DataPage/given/a_data_page.ts         | 44 ++++++----
 .../when_a_controlled_selection_is_given.ts   | 52 +++++++++++
 Source/Dialogs/BusyIndicatorDialog.tsx        |  7 +-
 Source/Dropdown/Dropdown.tsx                  | 17 +++-
 .../ObjectContentEditor.tsx                   | 20 +++--
 Source/SchemaEditor/NameCell.tsx              | 28 +++---
 Source/SchemaEditor/SchemaEditor.tsx          | 12 +--
 Source/SchemaEditor/TypeCell.tsx              | 78 +++++++---------
 41 files changed, 892 insertions(+), 181 deletions(-)
 create mode 100644 Source/CommandDialog/for_CommandDialog/when_command_execution_fails.tsx
 create mode 100644 Source/CommandForm/fields/fieldAccessibility.tsx
 create mode 100644 Source/CommandForm/for_field_accessibility/when_rendering_a_titled_field.tsx
 create mode 100644 Source/CommandForm/for_field_accessibility/when_rendering_validation_errors.tsx
 create mode 100644 Source/Common/for_Tooltip/when_the_trigger_receives_focus.tsx
 create mode 100644 Source/DataPage/for_DataPage/when_a_controlled_selection_is_given.ts

diff --git a/Documentation/CommandDialog/index.md b/Documentation/CommandDialog/index.md
index a704d909..fed6fd3e 100644
--- a/Documentation/CommandDialog/index.md
+++ b/Documentation/CommandDialog/index.md
@@ -116,7 +116,7 @@ function MyComponent() {
 - `className`, `pt`, `ptOptions`, `unstyled`: Styling hooks forwarded to the underlying dialog
 
 > [!NOTE]
-> `CommandDialog` inherits `Dialog`'s prop type, so `dismissable`, `closeAriaLabel` and `isBusy` type-check here — but they are not plumbed through. `isBusy` is owned by the dialog (it is raised while the command executes), and `dismissable` / `closeAriaLabel` currently fall back to `Dialog`'s own defaults. Use [`Dialog`](../Dialogs/dialog.md) directly when you need to control them.
+> `dismissable` and `closeAriaLabel` are forwarded to the underlying `Dialog`. `isBusy` is managed internally while the command executes, so consumers should not set it directly.
 
 ## Callback Behavior
 
diff --git a/Documentation/CommandForm/index.md b/Documentation/CommandForm/index.md
index 2580808d..c7d058ea 100644
--- a/Documentation/CommandForm/index.md
+++ b/Documentation/CommandForm/index.md
@@ -47,12 +47,23 @@ import {
 } from '@cratis/components/CommandForm';
 
 <CommandDialog command={MyCommand} visible={visible} onCancel={() => setVisible(false)}>
-    <InputTextField<MyCommand> value={(c) => c.title} />
-    <NumberField<MyCommand> value={(c) => c.quantity} />
+    <InputTextField<MyCommand> value={(c) => c.title} title='Title' />
+    <NumberField<MyCommand> value={(c) => c.quantity} title='Quantity' />
     <CheckboxField<MyCommand> value={(c) => c.active} label='Active' />
 </CommandDialog>;
 ```
 
+## Accessible names and validation errors
+
+Every Components field associates its primary native control or semantic group with Arc's `title` and validation messages:
+
+- `title` becomes the default accessible name while Arc continues rendering the visible field title.
+- Validation messages are referenced through `aria-describedby` and remain visible through Arc's normal error presentation.
+- `id`, `aria-label`, and `aria-describedby` can override or extend the generated values on every field.
+- Component-specific `pt` attributes remain fallback values; named accessibility props take precedence.
+
+Checkboxes and switches prefer their inline `label`; radio options use their option labels while the `RadioGroupField` / `RatingField` group uses `title`.
+
 ## Populating Initial Values from a Query
 
 Every field here is built with `asCommandFormField` from `@cratis/arc.react/commands`, so each one automatically supports `CommandForm`'s `populateFromQuery`/`populateFromObservableQuery` props - the form fetches a single-instance query itself and seeds its fields from the result, matched onto the command by property name:
diff --git a/Documentation/Styling/pass-through.md b/Documentation/Styling/pass-through.md
index 5c2eb3fb..86f8796b 100644
--- a/Documentation/Styling/pass-through.md
+++ b/Documentation/Styling/pass-through.md
@@ -58,7 +58,7 @@ Command field part keys:
 | Calendar               | `DatePickerInputPassThrough` keys             |
 | Dropdown / MultiSelect | `DropdownParts` keys                          |
 
-Named behavior props override conflicting part attributes. Part classes and styles merge with component structure.
+Named behavior props override conflicting part attributes. Part classes and styles merge with component structure. `DropdownParts.input` and `select` are narrow Components 3 migration aliases for class, style, id, and ARIA values; attach event handlers and other ordinary attributes to the current `trigger`, `filter`, `multiple`, `listbox`, or `option` part instead.
 
 ## DOM part values
 
diff --git a/Source/CommandDialog/CommandDialog.tsx b/Source/CommandDialog/CommandDialog.tsx
index 2489b06b..77c95c14 100644
--- a/Source/CommandDialog/CommandDialog.tsx
+++ b/Source/CommandDialog/CommandDialog.tsx
@@ -26,7 +26,7 @@ import { isCommandFormField, markAsCommandFormColumn } from '../CommandForm/comm
  */
 export interface CommandDialogProps<TCommand extends object, TResponse = object>
     extends Omit<CommandFormProps<TCommand, TResponse>, 'children' | 'onBeforeExecute'>,
-        Omit<DialogProps, 'children'> {
+        Omit<DialogProps, 'children' | 'isBusy'> {
     /**
      * A transformer invoked with the current command values immediately before
      * the command executes on confirm. It **must return** the values to run with
@@ -72,6 +72,8 @@ const CommandDialogWrapper = <TCommand extends object, TResponse = object>({
     onSuccess,
     onValidationFailure,
     onFailed,
+    onException,
+    onUnauthorized,
     onBeforeExecute,
     className,
     pt,
@@ -100,6 +102,8 @@ const CommandDialogWrapper = <TCommand extends object, TResponse = object>({
     onSuccess?: CommandFormProps<TCommand, TResponse>['onSuccess'];
     onValidationFailure?: CommandFormProps<TCommand, TResponse>['onValidationFailure'];
     onFailed?: CommandFormProps<TCommand, TResponse>['onFailed'];
+    onException?: CommandFormProps<TCommand, TResponse>['onException'];
+    onUnauthorized?: CommandFormProps<TCommand, TResponse>['onUnauthorized'];
     onBeforeExecute?: BeforeExecuteCallback<TCommand>;
     className?: DialogProps['className'];
     pt?: DialogProps['pt'];
@@ -126,10 +130,16 @@ const CommandDialogWrapper = <TCommand extends object, TResponse = object>({
         }
 
         if (!result.isSuccess) {
+            await onFailed?.(result);
+            if (result.hasExceptions) {
+                await onException?.(
+                    result.exceptionMessages,
+                    result.exceptionStackTrace,
+                );
+            }
+            if (!result.isAuthorized) await onUnauthorized?.();
             if (!result.isValid) {
                 await onValidationFailure?.(result.validationResults);
-            } else {
-                await onFailed?.(result);
             }
             setCommandResult(result);
             return false;
@@ -376,6 +386,8 @@ const CommandDialogComponent = <TCommand extends object = object, TResponse = ob
                 onSuccess={props.onSuccess}
                 onValidationFailure={props.onValidationFailure}
                 onFailed={props.onFailed}
+                onException={props.onException}
+                onUnauthorized={props.onUnauthorized}
                 onBeforeExecute={onBeforeExecute}
                 className={className}
                 pt={pt}
diff --git a/Source/CommandDialog/for_CommandDialog/when_command_execution_fails.tsx b/Source/CommandDialog/for_CommandDialog/when_command_execution_fails.tsx
new file mode 100644
index 00000000..4ab0869a
--- /dev/null
+++ b/Source/CommandDialog/for_CommandDialog/when_command_execution_fails.tsx
@@ -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.
+
+// @vitest-environment jsdom
+
+import { expect } from 'chai';
+import React from 'react';
+import { vi } from 'vitest';
+import {
+    click,
+    render,
+    unmount,
+    type DialogInTheDom,
+} from '../../Dialogs/for_Dialog/given/a_dialog_in_the_dom';
+import { CommandDialog } from '../CommandDialog';
+
+const callbacks = vi.hoisted(() => ({
+    failed: vi.fn(),
+    exception: vi.fn(),
+    unauthorized: vi.fn(),
+    validation: vi.fn(),
+}));
+
+const commandResult = {
+    isSuccess: false,
+    isValid: false,
+    isAuthorized: false,
+    hasExceptions: true,
+    validationResults: [{ message: 'Name is required', members: ['name'] }],
+    exceptionMessages: ['Command failed'],
+    exceptionStackTrace: 'stack',
+};
+
+vi.mock('@cratis/arc.react/dialogs', () => ({
+    DialogButtons: { Ok: 1, OkCancel: 2, YesNo: 3, YesNoCancel: 4 },
+    DialogResult: { None: 0, Yes: 1, No: 2, Ok: 3, Cancelled: 4 },
+    useDialogContext: () => undefined,
+}));
+
+vi.mock('@cratis/arc.react/commands', () => ({
+    CommandForm: (props: { children?: React.ReactNode }) =>
+        React.createElement('div', null, props.children),
+    useCommandFormContext: () => ({
+        isValid: true,
+        setCommandValues: () => undefined,
+        setCommandResult: () => undefined,
+    }),
+    useCommandInstance: () => ({ execute: async () => commandResult }),
+    CommandFormFieldWrapper: (props: { field?: React.ReactNode }) =>
+        React.createElement('div', null, props.field),
+}));
+
+class TestCommand {
+    name = '';
+}
+
+describe('when command execution fails', () => {
+    let dialog: DialogInTheDom;
+
+    beforeEach(async () => {
+        Object.values(callbacks).forEach((callback) => callback.mockReset());
+        dialog = await render(
+            <CommandDialog<TestCommand>
+                command={TestCommand}
+                title='Update user'
+                onFailed={callbacks.failed}
+                onException={callbacks.exception}
+                onUnauthorized={callbacks.unauthorized}
+                onValidationFailure={callbacks.validation}
+            />,
+        );
+        await click('Ok');
+    });
+
+    afterEach(async () => unmount(dialog));
+
+    it('should invoke the general and every matching granular callback', () => {
+        expect(callbacks.failed.mock.calls).to.have.lengthOf(1);
+        expect(callbacks.exception.mock.calls[0]).to.deep.equal([
+            ['Command failed'],
+            'stack',
+        ]);
+        expect(callbacks.unauthorized.mock.calls).to.have.lengthOf(1);
+        expect(callbacks.validation.mock.calls[0][0]).to.deep.equal(
+            commandResult.validationResults,
+        );
+    });
+});
diff --git a/Source/CommandForm/fields/CalendarField.tsx b/Source/CommandForm/fields/CalendarField.tsx
index 0f676ed0..82fc2bd7 100644
--- a/Source/CommandForm/fields/CalendarField.tsx
+++ b/Source/CommandForm/fields/CalendarField.tsx
@@ -7,11 +7,17 @@ import {
     type DatePickerInputPassThrough,
 } from '../../Common/DatePickerInput';
 import React from 'react';
+import {
+    useFieldAccessibility,
+    type FieldAccessibilityProps,
+} from './fieldAccessibility';
 
 /**
  * Component-level props for {@link CalendarField}.
  */
-interface CalendarFieldComponentProps extends WrappedFieldProps<Date | null> {
+interface CalendarFieldComponentProps
+    extends WrappedFieldProps<Date | null>,
+        FieldAccessibilityProps {
     /** Placeholder text shown when no date is selected. */
     placeholder?: string;
 
@@ -60,8 +66,18 @@ interface CalendarFieldComponentProps extends WrappedFieldProps<Date | null> {
  * ```
  */
 export const CalendarField = asCommandFormField<CalendarFieldComponentProps>(
-    (props) => (
+    (props) => {
+        const accessibility = useFieldAccessibility(props, {
+            id: props.pt?.input?.id,
+            ariaLabel: props.pt?.input?.['aria-label'],
+            ariaDescribedBy: props.pt?.input?.['aria-describedby'],
+        });
+        return (
+            <>
         <DatePickerInput
+            id={accessibility.controlId}
+            aria-label={accessibility.ariaLabel}
+            aria-describedby={accessibility.ariaDescribedBy}
             value={props.value}
             onChange={props.onChange}
             onBlur={props.onBlur}
@@ -78,7 +94,10 @@ export const CalendarField = asCommandFormField<CalendarFieldComponentProps>(
             ptOptions={props.ptOptions}
             unstyled={props.unstyled}
         />
-    ),
+                {accessibility.hiddenError}
+            </>
+        );
+    },
     {
         defaultValue: null,
         extractValue: (e: unknown) => (e instanceof Date ? e : null),
diff --git a/Source/CommandForm/fields/CheckboxField.tsx b/Source/CommandForm/fields/CheckboxField.tsx
index 1a73c280..d647d8f2 100644
--- a/Source/CommandForm/fields/CheckboxField.tsx
+++ b/Source/CommandForm/fields/CheckboxField.tsx
@@ -3,6 +3,10 @@
 
 import type { HTMLAttributes, InputHTMLAttributes } from 'react';
 import { asCommandFormField, type WrappedFieldProps } from '@cratis/arc.react/commands';
+import {
+    useFieldAccessibility,
+    type FieldAccessibilityProps,
+} from './fieldAccessibility';
 
 interface CheckboxParts {
     root?: HTMLAttributes<HTMLLabelElement>;
@@ -11,7 +15,9 @@ interface CheckboxParts {
     indicator?: HTMLAttributes<HTMLSpanElement>;
 }
 
-interface CheckboxFieldComponentProps extends WrappedFieldProps<boolean> {
+interface CheckboxFieldComponentProps
+    extends WrappedFieldProps<boolean>,
+        FieldAccessibilityProps {
     label?: string;
     className?: string;
     pt?: CheckboxParts;
@@ -21,7 +27,14 @@ interface CheckboxFieldComponentProps extends WrappedFieldProps<boolean> {
 
 /** A checkbox field bound to a boolean property on an Arc command. */
 export const CheckboxField = asCommandFormField<CheckboxFieldComponentProps>(
-    (props) => (
+    (props) => {
+        const accessibility = useFieldAccessibility(props, {
+            id: props.pt?.input?.id,
+            ariaLabel: props.pt?.input?.['aria-label'] ?? props.label,
+            ariaDescribedBy: props.pt?.input?.['aria-describedby'],
+        });
+        return (
+            <>
         <label
             {...props.pt?.root}
             className={['cratis-choice-field', props.pt?.root?.className, props.className]
@@ -33,6 +46,9 @@ export const CheckboxField = asCommandFormField<CheckboxFieldComponentProps>(
         >
             <input
                 {...props.pt?.input}
+                id={accessibility.controlId}
+                aria-label={accessibility.ariaLabel}
+                aria-describedby={accessibility.ariaDescribedBy}
                 type='checkbox'
                 checked={props.value}
                 onChange={props.onChange}
@@ -67,7 +83,10 @@ export const CheckboxField = asCommandFormField<CheckboxFieldComponentProps>(
                 <span className='cratis-choice-field__label'>{props.label}</span>
             )}
         </label>
-    ),
+                {accessibility.hiddenError}
+            </>
+        );
+    },
     {
         defaultValue: false,
         extractValue: (event: React.ChangeEvent<HTMLInputElement>) =>
diff --git a/Source/CommandForm/fields/ChipsField.tsx b/Source/CommandForm/fields/ChipsField.tsx
index 2679969e..9b777c3f 100644
--- a/Source/CommandForm/fields/ChipsField.tsx
+++ b/Source/CommandForm/fields/ChipsField.tsx
@@ -3,6 +3,10 @@
 
 import { useState, type HTMLAttributes, type InputHTMLAttributes } from 'react';
 import { asCommandFormField, type WrappedFieldProps } from '@cratis/arc.react/commands';
+import {
+    useFieldAccessibility,
+    type FieldAccessibilityProps,
+} from './fieldAccessibility';
 
 interface ChipsParts {
     root?: HTMLAttributes<HTMLDivElement>;
@@ -11,7 +15,9 @@ interface ChipsParts {
     input?: InputHTMLAttributes<HTMLInputElement>;
 }
 
-interface ChipsFieldComponentProps extends WrappedFieldProps<string[]> {
+interface ChipsFieldComponentProps
+    extends WrappedFieldProps<string[]>,
+        FieldAccessibilityProps {
     placeholder?: string;
     max?: number;
     separator?: string;
@@ -26,6 +32,11 @@ interface ChipsFieldComponentProps extends WrappedFieldProps<string[]> {
 
 const ChipsControl = (props: ChipsFieldComponentProps) => {
     const [draft, setDraft] = useState('');
+    const accessibility = useFieldAccessibility(props, {
+        id: props.pt?.input?.id,
+        ariaLabel: props.pt?.input?.['aria-label'],
+        ariaDescribedBy: props.pt?.input?.['aria-describedby'],
+    });
 
     const commit = () => {
         const candidates = (props.separator ? draft.split(props.separator) : [draft])
@@ -98,6 +109,9 @@ const ChipsControl = (props: ChipsFieldComponentProps) => {
             ))}
             <input
                 {...props.pt?.input}
+                id={accessibility.controlId}
+                aria-label={accessibility.ariaLabel}
+                aria-describedby={accessibility.ariaDescribedBy}
                 value={draft}
                 onChange={(event) => setDraft(event.target.value)}
                 onKeyDown={(event) => {
@@ -113,6 +127,7 @@ const ChipsControl = (props: ChipsFieldComponentProps) => {
                     .join(' ')}
                 data-cratis-part='input'
             />
+            {accessibility.hiddenError}
         </div>
     );
 };
diff --git a/Source/CommandForm/fields/ColorPickerField.tsx b/Source/CommandForm/fields/ColorPickerField.tsx
index 8df6bdcd..a6e52b6c 100644
--- a/Source/CommandForm/fields/ColorPickerField.tsx
+++ b/Source/CommandForm/fields/ColorPickerField.tsx
@@ -3,6 +3,10 @@
 
 import type { HTMLAttributes, InputHTMLAttributes } from 'react';
 import { asCommandFormField, type WrappedFieldProps } from '@cratis/arc.react/commands';
+import {
+    useFieldAccessibility,
+    type FieldAccessibilityProps,
+} from './fieldAccessibility';
 
 interface ColorPickerParts {
     root?: HTMLAttributes<HTMLDivElement>;
@@ -10,7 +14,9 @@ interface ColorPickerParts {
     value?: HTMLAttributes<HTMLOutputElement>;
 }
 
-interface ColorPickerFieldComponentProps extends WrappedFieldProps<string> {
+interface ColorPickerFieldComponentProps
+    extends WrappedFieldProps<string>,
+        FieldAccessibilityProps {
     inline?: boolean;
     defaultColor?: string;
     className?: string;
@@ -25,6 +31,11 @@ const normalizeHex = (value: string, fallback: string) =>
 /** A native color picker bound to a bare six-digit hex string on an Arc command. */
 export const ColorPickerField = asCommandFormField<ColorPickerFieldComponentProps>(
     (props) => {
+        const accessibility = useFieldAccessibility(props, {
+            id: props.pt?.input?.id,
+            ariaLabel: props.pt?.input?.['aria-label'],
+            ariaDescribedBy: props.pt?.input?.['aria-describedby'],
+        });
         const value = normalizeHex(
             props.value,
             normalizeHex(props.defaultColor ?? '000000', '000000'),
@@ -46,6 +57,9 @@ export const ColorPickerField = asCommandFormField<ColorPickerFieldComponentProp
             >
                 <input
                     {...props.pt?.input}
+                    id={accessibility.controlId}
+                    aria-label={accessibility.ariaLabel}
+                    aria-describedby={accessibility.ariaDescribedBy}
                     type='color'
                     value={`#${value}`}
                     onChange={props.onChange}
@@ -64,6 +78,7 @@ export const ColorPickerField = asCommandFormField<ColorPickerFieldComponentProp
                 >
                     #{value}
                 </output>
+                {accessibility.hiddenError}
             </div>
         );
     },
diff --git a/Source/CommandForm/fields/DropdownField.tsx b/Source/CommandForm/fields/DropdownField.tsx
index b3527ebe..4ab9a5f5 100644
--- a/Source/CommandForm/fields/DropdownField.tsx
+++ b/Source/CommandForm/fields/DropdownField.tsx
@@ -4,11 +4,17 @@
 import { Dropdown, type DropdownProps } from '../../Dropdown/Dropdown';
 import React from 'react';
 import { asCommandFormField, WrappedFieldProps } from '@cratis/arc.react/commands';
+import {
+    useFieldAccessibility,
+    type FieldAccessibilityProps,
+} from './fieldAccessibility';
 
 /**
  * Component-level props for {@link DropdownField}.
  */
-interface DropdownFieldComponentProps extends WrappedFieldProps<string | number> {
+interface DropdownFieldComponentProps
+    extends WrappedFieldProps<string | number>,
+        FieldAccessibilityProps {
     /** Source array of objects to populate the dropdown options. */
     options: Array<{ [key: string]: unknown }>;
 
@@ -50,8 +56,18 @@ interface DropdownFieldComponentProps extends WrappedFieldProps<string | number>
  * ```
  */
 export const DropdownField = asCommandFormField<DropdownFieldComponentProps>(
-    (props) => (
+    (props) => {
+        const accessibility = useFieldAccessibility(props, {
+            id: props.pt?.input?.id,
+            ariaLabel: props.pt?.input?.['aria-label'],
+            ariaDescribedBy: props.pt?.input?.['aria-describedby'],
+        });
+        return (
+            <>
         <Dropdown
+            id={accessibility.controlId}
+            aria-label={accessibility.ariaLabel}
+            aria-describedby={accessibility.ariaDescribedBy}
             value={props.value}
             onChange={(e) => props.onChange(e.value)}
             onBlur={props.onBlur}
@@ -65,7 +81,10 @@ export const DropdownField = asCommandFormField<DropdownFieldComponentProps>(
             ptOptions={props.ptOptions}
             unstyled={props.unstyled}
         />
-    ),
+                {accessibility.hiddenError}
+            </>
+        );
+    },
     {
         defaultValue: '',
         extractValue: (e: unknown) => e as string | number
diff --git a/Source/CommandForm/fields/Fields.css b/Source/CommandForm/fields/Fields.css
index 4f9d8f5d..ed650a6b 100644
--- a/Source/CommandForm/fields/Fields.css
+++ b/Source/CommandForm/fields/Fields.css
@@ -1,6 +1,18 @@
 /* Copyright (c) Cratis. All rights reserved. */
 /* Licensed under the MIT license. See LICENSE file in the project root for full license information. */
 
+.cratis-field-sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
+
 .cratis-field-input {
     min-height: 2.5rem;
     padding: 0.5rem 0.7rem;
diff --git a/Source/CommandForm/fields/InputTextField.tsx b/Source/CommandForm/fields/InputTextField.tsx
index 62fe0daf..0ade46e8 100644
--- a/Source/CommandForm/fields/InputTextField.tsx
+++ b/Source/CommandForm/fields/InputTextField.tsx
@@ -3,12 +3,18 @@
 
 import type { InputHTMLAttributes } from 'react';
 import { asCommandFormField, type WrappedFieldProps } from '@cratis/arc.react/commands';
+import {
+    useFieldAccessibility,
+    type FieldAccessibilityProps,
+} from './fieldAccessibility';
 
 interface InputTextParts {
     root?: InputHTMLAttributes<HTMLInputElement>;
 }
 
-interface InputTextComponentProps extends WrappedFieldProps<string> {
+interface InputTextComponentProps
+    extends WrappedFieldProps<string>,
+        FieldAccessibilityProps {
     type?:
         | 'text'
         | 'email'
@@ -29,9 +35,19 @@ interface InputTextComponentProps extends WrappedFieldProps<string> {
 
 /** A single-line text field bound to a string property on an Arc command. */
 export const InputTextField = asCommandFormField<InputTextComponentProps>(
-    (props) => (
+    (props) => {
+        const accessibility = useFieldAccessibility(props, {
+            id: props.pt?.root?.id,
+            ariaLabel: props.pt?.root?.['aria-label'],
+            ariaDescribedBy: props.pt?.root?.['aria-describedby'],
+        });
+        return (
+            <>
         <input
             {...props.pt?.root}
+            id={accessibility.controlId}
+            aria-label={accessibility.ariaLabel}
+            aria-describedby={accessibility.ariaDescribedBy}
             type={props.type ?? 'text'}
             value={props.value}
             onChange={props.onChange}
@@ -49,7 +65,10 @@ export const InputTextField = asCommandFormField<InputTextComponentProps>(
                 .filter(Boolean)
                 .join(' ')}
         />
-    ),
+                {accessibility.hiddenError}
+            </>
+        );
+    },
     {
         defaultValue: '',
         extractValue: (event: React.ChangeEvent<HTMLInputElement>) => event.target.value,
diff --git a/Source/CommandForm/fields/MultiSelectField.tsx b/Source/CommandForm/fields/MultiSelectField.tsx
index c38a9843..405e8993 100644
--- a/Source/CommandForm/fields/MultiSelectField.tsx
+++ b/Source/CommandForm/fields/MultiSelectField.tsx
@@ -4,13 +4,17 @@
 import { asCommandFormField, WrappedFieldProps } from '@cratis/arc.react/commands';
 import { Dropdown, type DropdownProps } from '../../Dropdown/Dropdown';
 import React from 'react';
+import {
+    useFieldAccessibility,
+    type FieldAccessibilityProps,
+} from './fieldAccessibility';
 
 /**
  * Component-level props for {@link MultiSelectField}.
  */
-interface MultiSelectFieldComponentProps extends WrappedFieldProps<
-    Array<string | number>
-> {
+interface MultiSelectFieldComponentProps
+    extends WrappedFieldProps<Array<string | number>>,
+        FieldAccessibilityProps {
     /** Source array of objects to populate the multi-select options. */
     options: Array<Record<string, unknown>>;
 
@@ -70,8 +74,18 @@ interface MultiSelectFieldComponentProps extends WrappedFieldProps<
  * ```
  */
 export const MultiSelectField = asCommandFormField<MultiSelectFieldComponentProps>(
-    (props) => (
+    (props) => {
+        const accessibility = useFieldAccessibility(props, {
+            id: props.pt?.input?.id,
+            ariaLabel: props.pt?.input?.['aria-label'],
+            ariaDescribedBy: props.pt?.input?.['aria-describedby'],
+        });
+        return (
+            <>
         <Dropdown<Array<string | number>>
+            id={accessibility.controlId}
+            aria-label={accessibility.ariaLabel}
+            aria-describedby={accessibility.ariaDescribedBy}
             multiple
             value={props.value}
             onChange={(e) => props.onChange(e.value ?? [])}
@@ -88,7 +102,10 @@ export const MultiSelectField = asCommandFormField<MultiSelectFieldComponentProp
             ptOptions={props.ptOptions}
             unstyled={props.unstyled}
         />
-    ),
+                {accessibility.hiddenError}
+            </>
+        );
+    },
     {
         defaultValue: [],
         extractValue: (e: unknown) => {
diff --git a/Source/CommandForm/fields/NumberField.tsx b/Source/CommandForm/fields/NumberField.tsx
index 85f785e3..b1b40b5b 100644
--- a/Source/CommandForm/fields/NumberField.tsx
+++ b/Source/CommandForm/fields/NumberField.tsx
@@ -3,13 +3,19 @@
 
 import type { HTMLAttributes, InputHTMLAttributes } from 'react';
 import { asCommandFormField, type WrappedFieldProps } from '@cratis/arc.react/commands';
+import {
+    useFieldAccessibility,
+    type FieldAccessibilityProps,
+} from './fieldAccessibility';
 
 interface NumberFieldParts {
     root?: HTMLAttributes<HTMLDivElement>;
     input?: InputHTMLAttributes<HTMLInputElement>;
 }
 
-interface NumberFieldComponentProps extends WrappedFieldProps<number> {
+interface NumberFieldComponentProps
+    extends WrappedFieldProps<number>,
+        FieldAccessibilityProps {
     placeholder?: string;
     min?: number;
     max?: number;
@@ -22,7 +28,13 @@ interface NumberFieldComponentProps extends WrappedFieldProps<number> {
 
 /** A numeric field bound to a number property on an Arc command. */
 export const NumberField = asCommandFormField<NumberFieldComponentProps>(
-    (props) => (
+    (props) => {
+        const accessibility = useFieldAccessibility(props, {
+            id: props.pt?.input?.id,
+            ariaLabel: props.pt?.input?.['aria-label'],
+            ariaDescribedBy: props.pt?.input?.['aria-describedby'],
+        });
+        return (
         <div
             {...props.pt?.root}
             onBlur={props.onBlur}
@@ -38,6 +50,9 @@ export const NumberField = asCommandFormField<NumberFieldComponentProps>(
         >
             <input
                 {...props.pt?.input}
+                id={accessibility.controlId}
+                aria-label={accessibility.ariaLabel}
+                aria-describedby={accessibility.ariaDescribedBy}
                 type='number'
                 value={props.value}
                 onChange={props.onChange}
@@ -52,8 +67,10 @@ export const NumberField = asCommandFormField<NumberFieldComponentProps>(
                     .filter(Boolean)
                     .join(' ')}
             />
+            {accessibility.hiddenError}
         </div>
-    ),
+        );
+    },
     {
         defaultValue: 0,
         extractValue: (event: React.ChangeEvent<HTMLInputElement>) =>
diff --git a/Source/CommandForm/fields/PasswordField.tsx b/Source/CommandForm/fields/PasswordField.tsx
index 457e08f9..4a7458cc 100644
--- a/Source/CommandForm/fields/PasswordField.tsx
+++ b/Source/CommandForm/fields/PasswordField.tsx
@@ -8,6 +8,10 @@ import {
     type InputHTMLAttributes,
 } from 'react';
 import { asCommandFormField, type WrappedFieldProps } from '@cratis/arc.react/commands';
+import {
+    useFieldAccessibility,
+    type FieldAccessibilityProps,
+} from './fieldAccessibility';
 
 interface PasswordParts {
     root?: HTMLAttributes<HTMLDivElement>;
@@ -15,7 +19,9 @@ interface PasswordParts {
     toggle?: ButtonHTMLAttributes<HTMLButtonElement>;
 }
 
-interface PasswordFieldComponentProps extends WrappedFieldProps<string> {
+interface PasswordFieldComponentProps
+    extends WrappedFieldProps<string>,
+        FieldAccessibilityProps {
     placeholder?: string;
     className?: string;
     pt?: PasswordParts;
@@ -27,6 +33,11 @@ interface PasswordFieldComponentProps extends WrappedFieldProps<string> {
 
 const PasswordControl = (props: PasswordFieldComponentProps) => {
     const [visible, setVisible] = useState(false);
+    const accessibility = useFieldAccessibility(props, {
+        id: props.pt?.input?.id,
+        ariaLabel: props.pt?.input?.['aria-label'],
+        ariaDescribedBy: props.pt?.input?.['aria-describedby'],
+    });
     return (
         <div
             {...props.pt?.root}
@@ -43,6 +54,9 @@ const PasswordControl = (props: PasswordFieldComponentProps) => {
         >
             <input
                 {...props.pt?.input}
+                id={accessibility.controlId}
+                aria-label={accessibility.ariaLabel}
+                aria-describedby={accessibility.ariaDescribedBy}
                 type={visible ? 'text' : 'password'}
                 value={props.value}
                 onChange={props.onChange}
@@ -70,6 +84,7 @@ const PasswordControl = (props: PasswordFieldComponentProps) => {
             >
                 <span aria-hidden='true'>{visible ? '◉' : '○'}</span>
             </button>
+            {accessibility.hiddenError}
         </div>
     );
 };
diff --git a/Source/CommandForm/fields/RadioButtonField.tsx b/Source/CommandForm/fields/RadioButtonField.tsx
index 8c223669..c86773af 100644
--- a/Source/CommandForm/fields/RadioButtonField.tsx
+++ b/Source/CommandForm/fields/RadioButtonField.tsx
@@ -3,6 +3,10 @@
 
 import type { HTMLAttributes, InputHTMLAttributes } from 'react';
 import { asCommandFormField, type WrappedFieldProps } from '@cratis/arc.react/commands';
+import {
+    useFieldAccessibility,
+    type FieldAccessibilityProps,
+} from './fieldAccessibility';
 
 interface RadioParts {
     root?: HTMLAttributes<HTMLLabelElement>;
@@ -11,7 +15,9 @@ interface RadioParts {
     indicator?: HTMLAttributes<HTMLSpanElement>;
 }
 
-interface RadioButtonFieldComponentProps extends WrappedFieldProps<string | number> {
+interface RadioButtonFieldComponentProps
+    extends WrappedFieldProps<string | number>,
+        FieldAccessibilityProps {
     label?: string;
     buttonValue: string | number;
     /** Native group name shared by every option bound to the same property. */
@@ -24,7 +30,14 @@ interface RadioButtonFieldComponentProps extends WrappedFieldProps<string | numb
 
 /** A single radio option bound to a string or number property on an Arc command. */
 export const RadioButtonField = asCommandFormField<RadioButtonFieldComponentProps>(
-    (props) => (
+    (props) => {
+        const accessibility = useFieldAccessibility(props, {
+            id: props.pt?.input?.id,
+            ariaLabel: props.pt?.input?.['aria-label'] ?? props.label,
+            ariaDescribedBy: props.pt?.input?.['aria-describedby'],
+        });
+        return (
+            <>
         <label
             {...props.pt?.root}
             className={['cratis-choice-field', props.pt?.root?.className, props.className]
@@ -36,6 +49,9 @@ export const RadioButtonField = asCommandFormField<RadioButtonFieldComponentProp
         >
             <input
                 {...props.pt?.input}
+                id={accessibility.controlId}
+                aria-label={accessibility.ariaLabel}
+                aria-describedby={accessibility.ariaDescribedBy}
                 type='radio'
                 name={props.name}
                 checked={props.value === props.buttonValue}
@@ -68,6 +84,9 @@ export const RadioButtonField = asCommandFormField<RadioButtonFieldComponentProp
                 <span className='cratis-choice-field__label'>{props.label}</span>
             )}
         </label>
-    ),
+                {accessibility.hiddenError}
+            </>
+        );
+    },
     { defaultValue: '', extractValue: (value: unknown) => value as string | number },
 );
diff --git a/Source/CommandForm/fields/RadioGroupField.tsx b/Source/CommandForm/fields/RadioGroupField.tsx
index d02945e5..2044996d 100644
--- a/Source/CommandForm/fields/RadioGroupField.tsx
+++ b/Source/CommandForm/fields/RadioGroupField.tsx
@@ -3,6 +3,10 @@
 
 import { useId, type HTMLAttributes, type InputHTMLAttributes } from 'react';
 import { asCommandFormField, type WrappedFieldProps } from '@cratis/arc.react/commands';
+import {
+    useFieldAccessibility,
+    type FieldAccessibilityProps,
+} from './fieldAccessibility';
 
 interface RadioGroupParts {
     root?: HTMLAttributes<HTMLDivElement>;
@@ -12,7 +16,9 @@ interface RadioGroupParts {
     indicator?: HTMLAttributes<HTMLSpanElement>;
 }
 
-interface RadioGroupFieldComponentProps extends WrappedFieldProps<string | number> {
+interface RadioGroupFieldComponentProps
+    extends WrappedFieldProps<string | number>,
+        FieldAccessibilityProps {
     options: Array<Record<string, unknown>>;
     optionLabel: string;
     optionValue: string;
@@ -30,11 +36,20 @@ export const RadioGroupField = asCommandFormField<RadioGroupFieldComponentProps>
     (props) => {
         const generatedName = useId();
         const name = props.name ?? generatedName;
+        const accessibility = useFieldAccessibility(props, {
+            id: props.pt?.root?.id,
+            ariaLabel: props.pt?.root?.['aria-label'],
+            ariaDescribedBy: props.pt?.root?.['aria-describedby'],
+        });
 
         return (
             <div
                 {...props.pt?.root}
+                id={accessibility.controlId}
                 role='radiogroup'
+                aria-label={accessibility.ariaLabel}
+                aria-describedby={accessibility.ariaDescribedBy}
+                aria-invalid={props.invalid || undefined}
                 className={[
                     'cratis-radio-group',
                     `cratis-radio-group--${props.layout ?? 'vertical'}`,
@@ -101,6 +116,7 @@ export const RadioGroupField = asCommandFormField<RadioGroupFieldComponentProps>
                         </label>
                     );
                 })}
+                {accessibility.hiddenError}
             </div>
         );
     },
diff --git a/Source/CommandForm/fields/RatingField.tsx b/Source/CommandForm/fields/RatingField.tsx
index 34bee5ba..1772ec9c 100644
--- a/Source/CommandForm/fields/RatingField.tsx
+++ b/Source/CommandForm/fields/RatingField.tsx
@@ -3,6 +3,10 @@
 
 import { useId, type HTMLAttributes, type InputHTMLAttributes } from 'react';
 import { asCommandFormField, type WrappedFieldProps } from '@cratis/arc.react/commands';
+import {
+    useFieldAccessibility,
+    type FieldAccessibilityProps,
+} from './fieldAccessibility';
 
 interface RatingParts {
     root?: HTMLAttributes<HTMLDivElement>;
@@ -11,7 +15,9 @@ interface RatingParts {
     star?: HTMLAttributes<HTMLSpanElement>;
 }
 
-interface RatingFieldComponentProps extends WrappedFieldProps<number> {
+interface RatingFieldComponentProps
+    extends WrappedFieldProps<number>,
+        FieldAccessibilityProps {
     stars?: number;
     /** Native radio-group name. Generated automatically when omitted. */
     name?: string;
@@ -27,11 +33,20 @@ export const RatingField = asCommandFormField<RatingFieldComponentProps>(
     (props) => {
         const generatedName = useId();
         const name = props.name ?? generatedName;
+        const accessibility = useFieldAccessibility(props, {
+            id: props.pt?.root?.id,
+            ariaLabel: props.pt?.root?.['aria-label'],
+            ariaDescribedBy: props.pt?.root?.['aria-describedby'],
+        });
 
         return (
             <div
                 {...props.pt?.root}
+                id={accessibility.controlId}
                 role='radiogroup'
+                aria-label={accessibility.ariaLabel}
+                aria-describedby={accessibility.ariaDescribedBy}
+                aria-invalid={props.invalid || undefined}
                 className={[
                     'cratis-rating-field',
                     props.pt?.root?.className,
@@ -95,6 +110,7 @@ export const RatingField = asCommandFormField<RatingFieldComponentProps>(
                         </label>
                     );
                 })}
+                {accessibility.hiddenError}
             </div>
         );
     },
diff --git a/Source/CommandForm/fields/SliderField.tsx b/Source/CommandForm/fields/SliderField.tsx
index 0c38d409..7e0b47ab 100644
--- a/Source/CommandForm/fields/SliderField.tsx
+++ b/Source/CommandForm/fields/SliderField.tsx
@@ -3,6 +3,10 @@
 
 import type { HTMLAttributes, InputHTMLAttributes } from 'react';
 import { asCommandFormField, type WrappedFieldProps } from '@cratis/arc.react/commands';
+import {
+    useFieldAccessibility,
+    type FieldAccessibilityProps,
+} from './fieldAccessibility';
 
 interface SliderParts {
     root?: HTMLAttributes<HTMLDivElement>;
@@ -10,7 +14,9 @@ interface SliderParts {
     value?: HTMLAttributes<HTMLSpanElement>;
 }
 
-interface SliderFieldComponentProps extends WrappedFieldProps<number> {
+interface SliderFieldComponentProps
+    extends WrappedFieldProps<number>,
+        FieldAccessibilityProps {
     min?: number;
     max?: number;
     step?: number;
@@ -22,7 +28,13 @@ interface SliderFieldComponentProps extends WrappedFieldProps<number> {
 
 /** A range slider bound to a number property on an Arc command. */
 export const SliderField = asCommandFormField<SliderFieldComponentProps>(
-    (props) => (
+    (props) => {
+        const accessibility = useFieldAccessibility(props, {
+            id: props.pt?.input?.id,
+            ariaLabel: props.pt?.input?.['aria-label'],
+            ariaDescribedBy: props.pt?.input?.['aria-describedby'],
+        });
+        return (
         <div
             {...props.pt?.root}
             className={[
@@ -38,6 +50,9 @@ export const SliderField = asCommandFormField<SliderFieldComponentProps>(
         >
             <input
                 {...props.pt?.input}
+                id={accessibility.controlId}
+                aria-label={accessibility.ariaLabel}
+                aria-describedby={accessibility.ariaDescribedBy}
                 type='range'
                 value={props.value}
                 onChange={props.onChange}
@@ -59,8 +74,10 @@ export const SliderField = asCommandFormField<SliderFieldComponentProps>(
             >
                 {props.value}
             </span>
+            {accessibility.hiddenError}
         </div>
-    ),
+        );
+    },
     {
         defaultValue: 0,
         extractValue: (event: React.ChangeEvent<HTMLInputElement>) =>
diff --git a/Source/CommandForm/fields/TextAreaField.tsx b/Source/CommandForm/fields/TextAreaField.tsx
index aaae9c27..0c552f85 100644
--- a/Source/CommandForm/fields/TextAreaField.tsx
+++ b/Source/CommandForm/fields/TextAreaField.tsx
@@ -3,12 +3,18 @@
 
 import type { TextareaHTMLAttributes } from 'react';
 import { asCommandFormField, type WrappedFieldProps } from '@cratis/arc.react/commands';
+import {
+    useFieldAccessibility,
+    type FieldAccessibilityProps,
+} from './fieldAccessibility';
 
 interface TextAreaParts {
     root?: TextareaHTMLAttributes<HTMLTextAreaElement>;
 }
 
-interface TextAreaFieldComponentProps extends WrappedFieldProps<string> {
+interface TextAreaFieldComponentProps
+    extends WrappedFieldProps<string>,
+        FieldAccessibilityProps {
     placeholder?: string;
     rows?: number;
     cols?: number;
@@ -20,9 +26,19 @@ interface TextAreaFieldComponentProps extends WrappedFieldProps<string> {
 
 /** A multi-line text field bound to a string property on an Arc command. */
 export const TextAreaField = asCommandFormField<TextAreaFieldComponentProps>(
-    (props) => (
+    (props) => {
+        const accessibility = useFieldAccessibility(props, {
+            id: props.pt?.root?.id,
+            ariaLabel: props.pt?.root?.['aria-label'],
+            ariaDescribedBy: props.pt?.root?.['aria-describedby'],
+        });
+        return (
+            <>
         <textarea
             {...props.pt?.root}
+            id={accessibility.controlId}
+            aria-label={accessibility.ariaLabel}
+            aria-describedby={accessibility.ariaDescribedBy}
             value={props.value}
             onChange={props.onChange}
             onBlur={props.onBlur}
@@ -42,7 +58,10 @@ export const TextAreaField = asCommandFormField<TextAreaFieldComponentProps>(
                 .filter(Boolean)
                 .join(' ')}
         />
-    ),
+                {accessibility.hiddenError}
+            </>
+        );
+    },
     {
         defaultValue: '',
         extractValue: (event: React.ChangeEvent<HTMLTextAreaElement>) =>
diff --git a/Source/CommandForm/fields/ToggleSwitchField.tsx b/Source/CommandForm/fields/ToggleSwitchField.tsx
index 47388056..19158054 100644
--- a/Source/CommandForm/fields/ToggleSwitchField.tsx
+++ b/Source/CommandForm/fields/ToggleSwitchField.tsx
@@ -3,6 +3,10 @@
 
 import type { HTMLAttributes, InputHTMLAttributes } from 'react';
 import { asCommandFormField, type WrappedFieldProps } from '@cratis/arc.react/commands';
+import {
+    useFieldAccessibility,
+    type FieldAccessibilityProps,
+} from './fieldAccessibility';
 
 interface ToggleSwitchParts {
     root?: HTMLAttributes<HTMLLabelElement>;
@@ -11,7 +15,9 @@ interface ToggleSwitchParts {
     handle?: HTMLAttributes<HTMLSpanElement>;
 }
 
-interface ToggleSwitchFieldComponentProps extends WrappedFieldProps<boolean> {
+interface ToggleSwitchFieldComponentProps
+    extends WrappedFieldProps<boolean>,
+        FieldAccessibilityProps {
     label?: string;
     className?: string;
     pt?: ToggleSwitchParts;
@@ -21,7 +27,14 @@ interface ToggleSwitchFieldComponentProps extends WrappedFieldProps<boolean> {
 
 /** An on/off switch bound to a boolean property on an Arc command. */
 export const ToggleSwitchField = asCommandFormField<ToggleSwitchFieldComponentProps>(
-    (props) => (
+    (props) => {
+        const accessibility = useFieldAccessibility(props, {
+            id: props.pt?.input?.id,
+            ariaLabel: props.pt?.input?.['aria-label'] ?? props.label,
+            ariaDescribedBy: props.pt?.input?.['aria-describedby'],
+        });
+        return (
+            <>
         <label
             {...props.pt?.root}
             className={['cratis-choice-field', props.pt?.root?.className, props.className]
@@ -33,6 +46,9 @@ export const ToggleSwitchField = asCommandFormField<ToggleSwitchFieldComponentPr
         >
             <input
                 {...props.pt?.input}
+                id={accessibility.controlId}
+                aria-label={accessibility.ariaLabel}
+                aria-describedby={accessibility.ariaDescribedBy}
                 type='checkbox'
                 role='switch'
                 checked={props.value}
@@ -63,7 +79,10 @@ export const ToggleSwitchField = asCommandFormField<ToggleSwitchFieldComponentPr
                 <span className='cratis-choice-field__label'>{props.label}</span>
             )}
         </label>
-    ),
+                {accessibility.hiddenError}
+            </>
+        );
+    },
     {
         defaultValue: false,
         extractValue: (event: React.ChangeEvent<HTMLInputElement>) =>
diff --git a/Source/CommandForm/fields/fieldAccessibility.tsx b/Source/CommandForm/fields/fieldAccessibility.tsx
new file mode 100644
index 00000000..15508bc4
--- /dev/null
+++ b/Source/CommandForm/fields/fieldAccessibility.tsx
@@ -0,0 +1,61 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { useId, type ReactNode } from 'react';
+
+/** Accessible identity and description props shared by command-form controls. */
+export interface FieldAccessibilityProps {
+    /** Stable DOM id for the primary control or semantic group. */
+    id?: string;
+    /** Explicit accessible name. Falls back to the CommandForm field title. */
+    'aria-label'?: string;
+    /** Additional description ids supplied by the consumer. */
+    'aria-describedby'?: string;
+    /** CommandForm field title supplied by Arc's public field props. */
+    title?: string;
+}
+
+interface FieldAccessibilityFallbacks {
+    id?: string;
+    ariaLabel?: string;
+    ariaDescribedBy?: string;
+}
+
+interface FieldAccessibilityResult {
+    controlId: string;
+    ariaLabel?: string;
+    ariaDescribedBy?: string;
+    hiddenError: ReactNode;
+}
+
+/**
+ * Associates Arc field titles and validation messages with a Components control.
+ * Arc renders the visible title/error presentation; this adds the semantic control
+ * name and a visually hidden error description without duplicating visible chrome.
+ */
+export const useFieldAccessibility = (
+    props: FieldAccessibilityProps & { errors: string[] },
+    fallbacks: FieldAccessibilityFallbacks = {},
+): FieldAccessibilityResult => {
+    const generatedId = useId();
+    const controlId = props.id ?? fallbacks.id ?? `cratis-field-${generatedId}`;
+    const errorId = props.errors.length > 0 ? `${controlId}-errors` : undefined;
+    const ariaLabel = props['aria-label'] ?? fallbacks.ariaLabel ?? props.title;
+    const ariaDescribedBy = [
+        props['aria-describedby'] ?? fallbacks.ariaDescribedBy,
+        errorId,
+    ]
+        .filter(Boolean)
+        .join(' ') || undefined;
+
+    return {
+        controlId,
+        ariaLabel,
+        ariaDescribedBy,
+        hiddenError: errorId ? (
+            <span id={errorId} className='cratis-field-sr-only'>
+                {props.errors.join('. ')}
+            </span>
+        ) : null,
+    };
+};
diff --git a/Source/CommandForm/for_field_accessibility/when_rendering_a_titled_field.tsx b/Source/CommandForm/for_field_accessibility/when_rendering_a_titled_field.tsx
new file mode 100644
index 00000000..39aac434
--- /dev/null
+++ b/Source/CommandForm/for_field_accessibility/when_rendering_a_titled_field.tsx
@@ -0,0 +1,48 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import '@cratis/arc/validation';
+import { Command } from '@cratis/arc/commands';
+import { CommandForm } from '@cratis/arc.react/commands';
+import { PropertyDescriptor } from '@cratis/arc/reflection';
+import { expect } from 'chai';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, it } from 'vitest';
+import { InputTextField } from '../fields/InputTextField';
+
+class RenamePerson extends Command {
+    readonly route = '/rename-person';
+    readonly propertyDescriptors = [new PropertyDescriptor('name', String)];
+    name = '';
+
+    constructor() {
+        super(Object, false);
+    }
+
+    get requestParameters(): string[] {
+        return [];
+    }
+
+    get properties(): string[] {
+        return ['name'];
+    }
+}
+
+describe('when rendering a titled field', () => {
+    const html = renderToStaticMarkup(
+        <CommandForm command={RenamePerson}>
+            <InputTextField<RenamePerson>
+                value={(command) => command.name}
+                title='Person name'
+            />
+        </CommandForm>,
+    );
+
+    it('should name the primary control from the field title', () => {
+        expect(html).to.contain('aria-label="Person name"');
+    });
+
+    it('should give the primary control a stable generated id', () => {
+        expect(html).to.match(/<input[^>]+id="cratis-field-[^"]+"/);
+    });
+});
diff --git a/Source/CommandForm/for_field_accessibility/when_rendering_validation_errors.tsx b/Source/CommandForm/for_field_accessibility/when_rendering_validation_errors.tsx
new file mode 100644
index 00000000..ed770b3a
--- /dev/null
+++ b/Source/CommandForm/for_field_accessibility/when_rendering_validation_errors.tsx
@@ -0,0 +1,38 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { expect } from 'chai';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, it } from 'vitest';
+import { useFieldAccessibility } from '../fields/fieldAccessibility';
+
+const ValidationProbe = () => {
+    const accessibility = useFieldAccessibility({
+        title: 'Email',
+        errors: ['Email is required', 'Email is invalid'],
+    });
+    return (
+        <>
+            <input
+                id={accessibility.controlId}
+                aria-label={accessibility.ariaLabel}
+                aria-describedby={accessibility.ariaDescribedBy}
+            />
+            {accessibility.hiddenError}
+        </>
+    );
+};
+
+describe('when rendering validation errors', () => {
+    const html = renderToStaticMarkup(<ValidationProbe />);
+    const descriptionId = html.match(/aria-describedby="([^"]+)"/)?.[1];
+
+    it('should associate the primary control with an error description', () => {
+        expect(descriptionId).not.to.equal(undefined);
+        expect(html).to.contain(`id="${descriptionId}"`);
+    });
+
+    it('should expose every validation message to assistive technology', () => {
+        expect(html).to.contain('Email is required. Email is invalid');
+    });
+});
diff --git a/Source/Common/Button.tsx b/Source/Common/Button.tsx
index 33e37e4d..1387a199 100644
--- a/Source/Common/Button.tsx
+++ b/Source/Common/Button.tsx
@@ -1,12 +1,12 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import type {
-    ButtonHTMLAttributes,
-    CSSProperties,
-    HTMLAttributes,
-    MouseEventHandler,
-    ReactNode,
+import {
+    forwardRef,
+    type ButtonHTMLAttributes,
+    type CSSProperties,
+    type HTMLAttributes,
+    type ReactNode,
 } from 'react';
 import { Tooltip, type TooltipPosition } from './Tooltip';
 
@@ -23,7 +23,11 @@ export interface ButtonParts {
 }
 
 /** Props for {@link Button}. */
-export interface ButtonProps {
+export interface ButtonProps
+    extends Omit<
+        ButtonHTMLAttributes<HTMLButtonElement>,
+        'children' | 'className' | 'disabled' | 'size' | 'style' | 'type'
+    > {
     /** The button's text. */
     label?: ReactNode;
     /** The button's icon, rendered before the label. */
@@ -56,8 +60,6 @@ export interface ButtonProps {
     title?: string;
     /** Focuses the button when it mounts. */
     autoFocus?: boolean;
-    /** Called when the button is activated. */
-    onClick?: MouseEventHandler<HTMLButtonElement>;
     /** Applied to the button element. */
     className?: string;
     /** Applied to the button element. */
@@ -72,7 +74,7 @@ const renderIcon = (icon: ReactNode) =>
     typeof icon === 'string' ? <i className={icon} aria-hidden='true' /> : icon;
 
 /** A Cratis-owned button with stable parts and renderer-independent styling. */
-export const Button = ({
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button({
     label,
     icon,
     loading,
@@ -94,7 +96,8 @@ export const Button = ({
     style,
     'aria-label': ariaLabel,
     children,
-}: ButtonProps) => {
+    ...nativeProps
+}, ref) {
     const variant = link ? 'link' : text ? 'text' : outlined ? 'outlined' : 'filled';
     const iconOnly = Boolean(icon) && label === undefined && !children;
     const rootClassName = ['cratis-button', pt?.root?.className, className]
@@ -104,6 +107,8 @@ export const Button = ({
     const button = (
         <button
             {...pt?.root}
+            {...nativeProps}
+            ref={ref}
             type={type}
             title={title}
             autoFocus={autoFocus}
@@ -167,4 +172,4 @@ export const Button = ({
     ) : (
         button
     );
-};
+});
diff --git a/Source/Common/DatePickerInput.tsx b/Source/Common/DatePickerInput.tsx
index bf7f1673..a4713807 100644
--- a/Source/Common/DatePickerInput.tsx
+++ b/Source/Common/DatePickerInput.tsx
@@ -167,6 +167,19 @@ export const DatePickerInput = ({
         ariaLabel ?? pt?.input?.['aria-label'] ?? effectivePlaceholder ?? 'Date';
     const effectiveAriaLabelledby = ariaLabelledby ?? pt?.input?.['aria-labelledby'];
     const effectiveAriaDescribedby = ariaDescribedby ?? pt?.input?.['aria-describedby'];
+    const inputPartAttributes = {
+        ...pt?.input,
+        id: undefined,
+        className: undefined,
+        style: undefined,
+        disabled: undefined,
+        readOnly: undefined,
+        placeholder: undefined,
+        'aria-label': undefined,
+        'aria-labelledby': undefined,
+        'aria-describedby': undefined,
+        'aria-invalid': undefined,
+    };
 
     return (
         <div
@@ -208,6 +221,7 @@ export const DatePickerInput = ({
                     data-empty={value === null || undefined}
                 >
                     <DateInput
+                        {...inputPartAttributes}
                         className={classNames(
                             'cratis-date-picker__input',
                             pt?.input?.className,
@@ -335,6 +349,7 @@ export const DatePickerInput = ({
                                 </Button>
                             </header>
                             <CalendarGrid
+                                {...pt?.grid}
                                 className={classNames(
                                     'cratis-date-picker__grid',
                                     pt?.grid?.className,
diff --git a/Source/Common/Tooltip.css b/Source/Common/Tooltip.css
index 2d964f97..08bc8564 100644
--- a/Source/Common/Tooltip.css
+++ b/Source/Common/Tooltip.css
@@ -1,11 +1,6 @@
 /* Copyright (c) Cratis. All rights reserved. */
 /* Licensed under the MIT license. See LICENSE file in the project root for full license information. */
 
-/* ── Tooltip trigger ─────────────────────────────────────────────────────── */
-.cratis-tooltip-trigger {
-    display: inline-flex;
-}
-
 /* ── Tooltip bubble ──────────────────────────────────────────────────────── */
 .cratis-tooltip-popup {
     background: var(--cratis-surface-100);
diff --git a/Source/Common/Tooltip.tsx b/Source/Common/Tooltip.tsx
index 45fb1b3a..e868d84d 100644
--- a/Source/Common/Tooltip.tsx
+++ b/Source/Common/Tooltip.tsx
@@ -1,7 +1,8 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import type { ReactNode } from 'react';
+import { cloneElement, type DOMAttributes, type ReactElement } from 'react';
+import { Pressable } from 'react-aria-components/Pressable';
 import { Tooltip as AriaTooltip, TooltipTrigger } from 'react-aria-components/Tooltip';
 
 /** Position of the tooltip relative to its trigger element. */
@@ -11,14 +12,14 @@ export type TooltipPosition = 'top' | 'right' | 'bottom' | 'left';
 export interface TooltipProps {
     /** Text displayed inside the tooltip. Empty content disables the tooltip. */
     content?: string;
-    /** Where the tooltip appears relative to the trigger. */
+    /** Where the tooltip appears relative to its trigger. */
     position?: TooltipPosition;
     /** When true, suppresses the tooltip. */
     disabled?: boolean;
-    /** Extra class name for the trigger wrapper. */
+    /** Extra class name applied to the actual trigger element. */
     className?: string;
-    /** Element that triggers the tooltip. */
-    children: ReactNode;
+    /** One focusable element that triggers the tooltip. */
+    children: ReactElement<{ className?: string }>;
 }
 
 /** An accessible hover and keyboard-focus tooltip with stable Cratis parts. */
@@ -29,18 +30,20 @@ export const Tooltip = ({
     className,
     children,
 }: TooltipProps) => {
-    if (!content || disabled) return <>{children}</>;
+    if (!content || disabled) return children;
+
+    const trigger = cloneElement(children, {
+        className: ['cratis-tooltip-trigger', children.props.className, className]
+            .filter(Boolean)
+            .join(' '),
+        'data-cratis-part': 'trigger',
+    } as { className: string });
 
     return (
         <TooltipTrigger delay={350} closeDelay={100}>
-            <span
-                className={['cratis-tooltip-trigger', className]
-                    .filter(Boolean)
-                    .join(' ')}
-                data-cratis-part='trigger'
-            >
-                {children}
-            </span>
+            <Pressable>
+                {trigger as unknown as ReactElement<DOMAttributes<HTMLElement>, string>}
+            </Pressable>
             <AriaTooltip
                 placement={position}
                 offset={8}
diff --git a/Source/Common/for_DatePickerInput/when_configuring_input_pass_through.tsx b/Source/Common/for_DatePickerInput/when_configuring_input_pass_through.tsx
index 45127c2c..2fa4c966 100644
--- a/Source/Common/for_DatePickerInput/when_configuring_input_pass_through.tsx
+++ b/Source/Common/for_DatePickerInput/when_configuring_input_pass_through.tsx
@@ -40,6 +40,7 @@ describe('when configuring input pass-through', () => {
                                 'aria-invalid': true,
                                 disabled: true,
                                 placeholder: 'Pass-through placeholder',
+                                'data-product-control': 'appointment',
                             },
                         }}
                     />
@@ -89,6 +90,10 @@ describe('when configuring input pass-through', () => {
         expect(pickerRoot.getAttribute('data-disabled')).to.equal('true');
     });
 
+    it('should forward ordinary data attributes to the segmented input', () => {
+        expect(dateInput.getAttribute('data-product-control')).to.equal('appointment');
+    });
+
     it('should preserve the pass-through placeholder when the wrapper prop is omitted', () => {
         expect(dateInput.getAttribute('data-placeholder')).to.equal(
             'Pass-through placeholder',
diff --git a/Source/Common/for_DatePickerInput/when_configuring_standard_props.tsx b/Source/Common/for_DatePickerInput/when_configuring_standard_props.tsx
index 138460d5..32497485 100644
--- a/Source/Common/for_DatePickerInput/when_configuring_standard_props.tsx
+++ b/Source/Common/for_DatePickerInput/when_configuring_standard_props.tsx
@@ -131,12 +131,16 @@ describe('when configuring standard DatePickerInput props', () => {
             value: new Date(2026, 7, 22),
             todayLabel: 'Translated today',
             clearLabel: 'Translated clear',
+            pt: { grid: { id: 'appointment-calendar-grid' } },
         });
         try {
             await act(async () => mounted.trigger.click());
             const buttonBar = document.querySelector('[data-cratis-part="button-bar"]');
             expect(buttonBar?.textContent).to.contain('Translated today');
             expect(buttonBar?.textContent).to.contain('Translated clear');
+            expect(document.querySelector('#appointment-calendar-grid')).not.to.equal(
+                null,
+            );
         } finally {
             await unmountDatePicker(mounted);
         }
diff --git a/Source/Common/for_Tooltip/when_rendered/and_it_is_not_disabled.ts b/Source/Common/for_Tooltip/when_rendered/and_it_is_not_disabled.ts
index 1d01582f..edf3fd37 100644
--- a/Source/Common/for_Tooltip/when_rendered/and_it_is_not_disabled.ts
+++ b/Source/Common/for_Tooltip/when_rendered/and_it_is_not_disabled.ts
@@ -14,11 +14,10 @@ describe('when Tooltip is rendered and it is not disabled', () => {
         React.createElement(
             CratisComponentsProvider,
             null,
-            React.createElement(
-                Tooltip,
-                { content: 'Shapes' },
-                React.createElement('button', null, 'Trigger'),
-            ),
+            React.createElement(Tooltip, {
+                content: 'Shapes',
+                children: React.createElement('button', null, 'Trigger'),
+            }),
         ),
     );
 
@@ -30,7 +29,8 @@ describe('when Tooltip is rendered and it is not disabled', () => {
         expect(html).to.include('Trigger');
     });
 
-    it('should not add a second tab stop around the trigger', () => {
-        expect(html).not.to.include('tabindex="0"');
+    it('should apply focus behavior to the actual trigger without a wrapper', () => {
+        expect(html).to.match(/^<button[^>]+data-cratis-part="trigger"/);
+        expect(html.match(/tabindex="0"/g)).to.have.lengthOf(1);
     });
 });
diff --git a/Source/Common/for_Tooltip/when_the_trigger_receives_focus.tsx b/Source/Common/for_Tooltip/when_the_trigger_receives_focus.tsx
new file mode 100644
index 00000000..16d4f867
--- /dev/null
+++ b/Source/Common/for_Tooltip/when_the_trigger_receives_focus.tsx
@@ -0,0 +1,70 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { expect } from 'chai';
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, it } from 'vitest';
+import { CratisComponentsProvider } from '../CratisComponentsProvider';
+import { Tooltip } from '../Tooltip';
+
+describe('when the tooltip trigger receives focus', () => {
+    let container: HTMLDivElement;
+    let root: Root;
+    let button: HTMLButtonElement;
+
+    beforeEach(async () => {
+        (
+            globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
+        ).IS_REACT_ACT_ENVIRONMENT = true;
+        (globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver ??= class {
+            observe() {
+                return undefined;
+            }
+            unobserve() {
+                return undefined;
+            }
+            disconnect() {
+                return undefined;
+            }
+        };
+        container = document.createElement('div');
+        document.body.append(container);
+        root = createRoot(container);
+        await act(async () => {
+            root.render(
+                <CratisComponentsProvider>
+                    <Tooltip content='Save changes'>
+                        <button type='button'>Save</button>
+                    </Tooltip>
+                </CratisComponentsProvider>,
+            );
+        });
+        const renderedButton = container.querySelector<HTMLButtonElement>('button');
+        if (!renderedButton) throw new Error('Tooltip did not render its trigger.');
+        button = renderedButton;
+        await act(async () => button.focus());
+    });
+
+    afterEach(async () => {
+        await act(async () => root.unmount());
+        container.remove();
+    });
+
+    it('should describe the actual focusable control', () => {
+        const descriptionId = button.getAttribute('aria-describedby');
+        expect(descriptionId).not.to.equal(null);
+        expect(document.getElementById(descriptionId ?? '')?.textContent).to.equal(
+            'Save changes',
+        );
+    });
+
+    it('should expose only the actual control as the trigger tab stop', () => {
+        const triggers = container.querySelectorAll('[data-cratis-part="trigger"]');
+        expect(triggers).to.have.lengthOf(1);
+        expect(triggers[0]).to.equal(button);
+        expect(button.tabIndex).to.equal(0);
+    });
+});
diff --git a/Source/DataPage/DataPage.tsx b/Source/DataPage/DataPage.tsx
index acca3fc2..75a871ae 100644
--- a/Source/DataPage/DataPage.tsx
+++ b/Source/DataPage/DataPage.tsx
@@ -241,7 +241,7 @@ export interface DataPageProps<
     /**
      * Component to render when the selection changes
      */
-    detailsComponent?: React.FC<IDetailsComponentProps<any>>;
+    detailsComponent?: React.FC<IDetailsComponentProps<TDataType>>;
 
     /**
      * The type of query to use
@@ -266,12 +266,12 @@ export interface DataPageProps<
     /**
      * The current selection.
      */
-    selection?: any | undefined | null;
+    selection?: TDataType | undefined | null;
 
     /**
      * Callback for when the selection changes
      */
-    onSelectionChange?(event: DataTableSelectionChangeEvent<any>): void;
+    onSelectionChange?(event: DataTableSelectionChangeEvent<TDataType>): void;
 
     /**
      * Fields to use for global filtering
@@ -444,13 +444,15 @@ const DataPage = <
 >(
     props: DataPageProps<TQuery, TDataType, TArguments>,
 ) => {
-    const [selectedItem, setSelectedItem] = React.useState(undefined);
-
-    const selectionChanged = (e: DataTableSelectionChangeEvent<any>) => {
-        setSelectedItem(e.value);
-        if (props.onSelectionChange) {
-            props.onSelectionChange(e);
-        }
+    const [internalSelection, setInternalSelection] = React.useState<
+        TDataType | null | undefined
+    >(props.selection);
+    const selectedItem =
+        props.selection !== undefined ? props.selection : internalSelection;
+
+    const selectionChanged = (event: DataTableSelectionChangeEvent<TDataType>) => {
+        if (props.selection === undefined) setInternalSelection(event.value);
+        props.onSelectionChange?.(event);
     };
 
     const context = { ...props, selectedItem, onSelectionChanged: selectionChanged };
@@ -480,6 +482,7 @@ const DataPage = <
     );
 };
 
+DataPage.MenuItem = MenuItem;
 DataPage.MenuItems = MenuItems;
 DataPage.Columns = Columns;
 
diff --git a/Source/DataPage/for_DataPage/given/a_data_page.ts b/Source/DataPage/for_DataPage/given/a_data_page.ts
index 6fe09b06..06c754dd 100644
--- a/Source/DataPage/for_DataPage/given/a_data_page.ts
+++ b/Source/DataPage/for_DataPage/given/a_data_page.ts
@@ -38,29 +38,39 @@ export interface DataPageOptions {
 
     /** Seed the data table's per-field filters. */
     defaultFilters?: DataTableFilterMeta;
+
+    /** Controlled row selection. */
+    selection?: Person | null;
+
+    /** Observe selection changes. */
+    onSelectionChange?: (event: { value: Person | null }) => void;
 }
 
 const PersonDetails = ({ item }: { item: Person }) =>
     React.createElement('div', { className: 'person-details' }, item.name);
 
 const columns = () =>
-    React.createElement(
-        DataPage.Columns,
-        { key: 'columns' },
-        React.createElement(Column, { key: 'id', field: 'id', header: 'Id' }),
-        React.createElement(Column, { key: 'name', field: 'name', header: 'Name' }),
-    );
+    React.createElement(DataPage.Columns, {
+        key: 'columns',
+        children: [
+            React.createElement(Column, { key: 'id', field: 'id', header: 'Id' }),
+            React.createElement(Column, {
+                key: 'name',
+                field: 'name',
+                header: 'Name',
+            }),
+        ],
+    });
 
 const menuItems = () =>
-    React.createElement(
-        DataPage.MenuItems,
-        { key: 'menuItems' },
-        React.createElement(MenuItem, {
+    React.createElement(DataPage.MenuItems, {
+        key: 'menuItems',
+        children: React.createElement(MenuItem, {
             key: 'add',
             label: 'Add',
             icon: () => React.createElement('i', { className: 'pi pi-plus' }),
         }),
-    );
+    });
 
 /**
  * Builds the `DataPage` element the specs render.
@@ -69,9 +79,10 @@ const menuItems = () =>
  */
 export const aDataPage = (options: DataPageOptions = {}) => {
     const children = options.withMenuItems ? [menuItems(), columns()] : [columns()];
+    const PersonDataPage = DataPage<PersonsQuery, Person, object>;
 
     return React.createElement(
-        DataPage,
+        PersonDataPage,
         {
             title: 'Persons',
             query: PersonsQuery,
@@ -79,8 +90,10 @@ export const aDataPage = (options: DataPageOptions = {}) => {
             dataKey: 'id',
             detailsComponent: options.withDetails ? PersonDetails : undefined,
             defaultFilters: options.defaultFilters,
+            selection: options.selection,
+            onSelectionChange: options.onSelectionChange,
+            children,
         },
-        ...children,
     );
 };
 
@@ -88,9 +101,8 @@ export const aDataPage = (options: DataPageOptions = {}) => {
  * Renders an element into a real document and lets React settle, so the specs
  * look at the tree a browser would have built.
  *
- * PrimeReact 11 components resolve their configuration from a `PrimeReactProvider`
- * and throw without one, so the element is mounted inside the Cratis provider that
- * supplies it. `ResizeObserver` is stubbed because Allotment observes its container
+ * The element is mounted inside the Cratis provider to supply locale and component
+ * messages. `ResizeObserver` is stubbed because Allotment observes its container
  * for size changes and jsdom has no layout engine to report any.
  * @param element - The element to render.
  * @returns The mounted page, to be passed to {@link unmount}.
diff --git a/Source/DataPage/for_DataPage/when_a_controlled_selection_is_given.ts b/Source/DataPage/for_DataPage/when_a_controlled_selection_is_given.ts
new file mode 100644
index 00000000..83fb2912
--- /dev/null
+++ b/Source/DataPage/for_DataPage/when_a_controlled_selection_is_given.ts
@@ -0,0 +1,52 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { expect } from 'chai';
+import { afterEach, beforeEach, describe, it, vi } from 'vitest';
+import {
+    aDataPage,
+    type DataPageInTheDom,
+    render,
+    unmount,
+} from './given/a_data_page';
+
+vi.mock('@cratis/arc.react/queries', async () => {
+    const { arcQueryHooks } = await import('./given/a_paged_query_result');
+    return arcQueryHooks();
+});
+
+describe('when a controlled selection is given', () => {
+    let page: DataPageInTheDom;
+
+    beforeEach(async () => {
+        page = await render(
+            aDataPage({
+                withDetails: true,
+                selection: {
+                    id: 2,
+                    name: 'Person 2',
+                    email: 'person2@example.com',
+                },
+            }),
+        );
+    });
+
+    afterEach(async () => {
+        await unmount(page);
+    });
+
+    it('should select the matching row', () => {
+        expect(
+            page.container.querySelector('[data-cratis-part="row"][aria-selected="true"]')
+                ?.textContent,
+        ).to.contain('Person 2');
+    });
+
+    it('should render details for the controlled value', () => {
+        expect(page.container.querySelector('.person-details')?.textContent).to.equal(
+            'Person 2',
+        );
+    });
+});
diff --git a/Source/Dialogs/BusyIndicatorDialog.tsx b/Source/Dialogs/BusyIndicatorDialog.tsx
index 8b7784ec..8148eb9e 100644
--- a/Source/Dialogs/BusyIndicatorDialog.tsx
+++ b/Source/Dialogs/BusyIndicatorDialog.tsx
@@ -50,9 +50,9 @@ import { DialogInitialFocus } from './DialogInitialFocus';
  *   behind the modal mask.
  * - **No per-instance pass-through.** The request type
  *   ({@link BusyIndicatorDialogRequest}) is owned by `@cratis/arc.react`, so
- *   `pt` / `unstyled` are not exposed on a per-call basis. Restyle the
- *   busy dialog (and every dialog) via the global `pt` preset on
- *   `CratisComponentsProvider`.
+ *   `pt` / `unstyled` are not exposed on a per-call basis. Restyle this
+ *   surface through `.cratis-busy-indicator-dialog` together with the stable
+ *   Dialog `data-cratis-part` values and semantic tokens.
  *
  * @param props - The request from the dialog host, containing `title` and `message`.
  */
@@ -64,6 +64,7 @@ export const BusyIndicatorDialog = (props: BusyIndicatorDialogRequest) => {
             onCancel={() => undefined}
             buttons={null}
             initialFocus={DialogInitialFocus.Content}
+            className='cratis-busy-indicator-dialog'
         >
             <div className='flex flex-col items-center justify-center gap-4 py-4'>
                 {/* The spinner's role="progressbar" needs an accessible name; use the
diff --git a/Source/Dropdown/Dropdown.tsx b/Source/Dropdown/Dropdown.tsx
index f3ac2041..e2d01ad1 100644
--- a/Source/Dropdown/Dropdown.tsx
+++ b/Source/Dropdown/Dropdown.tsx
@@ -44,13 +44,24 @@ type DropdownTriggerAttributes = Omit<
 type DropdownOptionValue =
     string | number | boolean | bigint | symbol | object | null | undefined;
 
+/** Narrow migration aliases shared by the legacy `input` and `select` keys. */
+interface DropdownLegacyControlAttributes {
+    id?: string;
+    className?: string;
+    style?: CSSProperties;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    'aria-invalid'?: boolean | 'true' | 'false' | 'grammar' | 'spelling';
+}
+
 /** Stable Cratis-owned parts for styling a {@link Dropdown}. */
 export interface DropdownParts {
     root?: HTMLAttributes<HTMLElement>;
     /** Legacy visible-control part, mapped onto the current trigger/filter input. */
-    input?: HTMLAttributes<HTMLElement> & { id?: string };
-    /** Legacy select-root part retained for custom product wrappers. */
-    select?: HTMLAttributes<HTMLElement>;
+    input?: DropdownLegacyControlAttributes;
+    /** Legacy select-root alias for class, style, identity, and ARIA migration. */
+    select?: DropdownLegacyControlAttributes;
     trigger?: DropdownTriggerAttributes;
     value?: HTMLAttributes<HTMLSpanElement>;
     clear?: ButtonHTMLAttributes<HTMLButtonElement>;
diff --git a/Source/ObjectContentEditor/ObjectContentEditor.tsx b/Source/ObjectContentEditor/ObjectContentEditor.tsx
index 627af902..28d99455 100644
--- a/Source/ObjectContentEditor/ObjectContentEditor.tsx
+++ b/Source/ObjectContentEditor/ObjectContentEditor.tsx
@@ -61,8 +61,9 @@ export interface ObjectContentEditorProps {
  * edit mode it switches to the appropriate input type for each property
  * (`InputText`, `InputNumber`, `Checkbox`, `Calendar`, `InputTextarea`).
  *
- * The component composes Cratis-owned controls internally; for fine-grained
- * pass-through styling use a global `pt` preset on `CratisComponentsProvider`.
+ * The component composes Cratis-owned controls internally. Restyle it through
+ * semantic tokens, its root `className`, and documented descendant
+ * `data-cratis-part` values rather than a provider-level renderer preset.
  *
  * @param props - {@link ObjectContentEditorProps}.
  */
@@ -585,10 +586,17 @@ export const ObjectContentEditor = ({
                                                     content={description}
                                                     position='right'
                                                 >
-                                                    <faIcons.FaCircleInfo
-                                                        className='property-info-icon'
-                                                        style={infoIconStyle}
-                                                    />
+                                                    <span
+                                                        tabIndex={0}
+                                                        role='img'
+                                                        aria-label='Property description'
+                                                    >
+                                                        <faIcons.FaCircleInfo
+                                                            aria-hidden='true'
+                                                            className='property-info-icon'
+                                                            style={infoIconStyle}
+                                                        />
+                                                    </span>
                                                 </Tooltip>
                                             )}
                                         </span>
diff --git a/Source/SchemaEditor/NameCell.tsx b/Source/SchemaEditor/NameCell.tsx
index 61637913..6f2e836e 100644
--- a/Source/SchemaEditor/NameCell.tsx
+++ b/Source/SchemaEditor/NameCell.tsx
@@ -29,20 +29,24 @@ export const NameCell = ({
 
         return (
             <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
-                <Tooltip
-                    content={isNavigable ? navigationTooltipText : undefined}
-                    position='top'
-                >
-                    <span>{rowData.name}</span>
-                </Tooltip>
+                <span title={isNavigable ? navigationTooltipText : undefined}>
+                    {rowData.name}
+                </span>
                 {rowData.description && (
                     <Tooltip content={rowData.description} position='right'>
-                        <faIcons.FaCircleInfo
-                            style={{
-                                color: 'var(--cratis-text-color-secondary)',
-                                fontSize: '0.875rem',
-                            }}
-                        />
+                        <span
+                            tabIndex={0}
+                            role='img'
+                            aria-label='Property description'
+                        >
+                            <faIcons.FaCircleInfo
+                                aria-hidden='true'
+                                style={{
+                                    color: 'var(--cratis-text-color-secondary)',
+                                    fontSize: '0.875rem',
+                                }}
+                            />
+                        </span>
                     </Tooltip>
                 )}
             </div>
diff --git a/Source/SchemaEditor/SchemaEditor.tsx b/Source/SchemaEditor/SchemaEditor.tsx
index ee28c00c..f055a68f 100644
--- a/Source/SchemaEditor/SchemaEditor.tsx
+++ b/Source/SchemaEditor/SchemaEditor.tsx
@@ -117,9 +117,9 @@ export interface SchemaEditorProps {
  * types and formats, and validate naming rules in place. Designed to drive
  * UIs around event payload schemas and similar structural documents.
  *
- * The editor composes a Cratis data table, action toolbar, and form
- * widgets internally; for restyling, use a global `pt` preset on
- * `CratisComponentsProvider`.
+ * The editor composes a Cratis data table, action toolbar, and form widgets
+ * internally. Restyle it through semantic tokens, the editor root `className`,
+ * and documented `data-cratis-part` values rather than a provider preset.
  *
  * @param props - {@link SchemaEditorProps}.
  */
@@ -444,7 +444,9 @@ export const SchemaEditor = ({
                                             content={canNotEditReason}
                                             position='bottom'
                                         >
-                                            <div
+                                            <span
+                                                tabIndex={0}
+                                                role='note'
                                                 style={{
                                                     cursor: 'not-allowed',
                                                     opacity: 0.6,
@@ -455,7 +457,7 @@ export const SchemaEditor = ({
                                             >
                                                 {item.icon}
                                                 <span>{item.label}</span>
-                                            </div>
+                                            </span>
                                         </Tooltip>
                                     )
                                   : undefined,
diff --git a/Source/SchemaEditor/TypeCell.tsx b/Source/SchemaEditor/TypeCell.tsx
index 546d64cd..2f2cca29 100644
--- a/Source/SchemaEditor/TypeCell.tsx
+++ b/Source/SchemaEditor/TypeCell.tsx
@@ -110,57 +110,47 @@ export const TypeCell = ({
             const itemType = rowData.items?.type || 'string';
             const isNavigable = itemType === 'object';
             return (
-                <Tooltip
-                    content={
+                <div
+                    className='flex items-center gap-2 w-full'
+                    style={{ height: '100%' }}
+                    title={
                         isNavigable ? 'Click to navigate to item definition' : undefined
                     }
-                    position='top'
-                    className='w-full'
                 >
-                    <div
-                        className='flex items-center gap-2 w-full'
-                        style={{ height: '100%' }}
-                    >
-                        <span>Array of {itemType}</span>
-                        {isNavigable && (
-                            <>
-                                <div style={{ flex: 1 }} />
-                                <span style={{ display: 'flex', alignItems: 'center' }}>
-                                    <faIcons.FaArrowRight
-                                        style={{
-                                            fontSize: '1rem',
-                                            color: 'var(--cratis-primary-color)',
-                                        }}
-                                    />
-                                </span>
-                            </>
-                        )}
-                    </div>
-                </Tooltip>
+                    <span>Array of {itemType}</span>
+                    {isNavigable && (
+                        <>
+                            <div style={{ flex: 1 }} />
+                            <span style={{ display: 'flex', alignItems: 'center' }}>
+                                <faIcons.FaArrowRight
+                                    style={{
+                                        fontSize: '1rem',
+                                        color: 'var(--cratis-primary-color)',
+                                    }}
+                                />
+                            </span>
+                        </>
+                    )}
+                </div>
             );
         } else if (rowData.type === 'object') {
             return (
-                <Tooltip
-                    content='Click to navigate to object properties'
-                    position='top'
-                    className='w-full'
+                <div
+                    className='flex items-center gap-2 w-full'
+                    style={{ height: '100%' }}
+                    title='Click to navigate to object properties'
                 >
-                    <div
-                        className='flex items-center gap-2 w-full'
-                        style={{ height: '100%' }}
-                    >
-                        <span>Object</span>
-                        <div style={{ flex: 1 }} />
-                        <span style={{ display: 'flex', alignItems: 'center' }}>
-                            <faIcons.FaArrowRight
-                                style={{
-                                    fontSize: '1rem',
-                                    color: 'var(--cratis-primary-color)',
-                                }}
-                            />
-                        </span>
-                    </div>
-                </Tooltip>
+                    <span>Object</span>
+                    <div style={{ flex: 1 }} />
+                    <span style={{ display: 'flex', alignItems: 'center' }}>
+                        <faIcons.FaArrowRight
+                            style={{
+                                fontSize: '1rem',
+                                color: 'var(--cratis-primary-color)',
+                            }}
+                        />
+                    </span>
+                </div>
             );
         }
         return displayValue;

From cad29aaef1631aaa6f44b58dddced6ac94ded7ff Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Sun, 23 Aug 2026 16:55:21 +0200
Subject: [PATCH 017/267] Complete renderer-independent guidance and navigation

Remove the remaining Prime-specific application recipes, expose DataPage paginator customization, display filtered multi-select values, make breadcrumbs natively keyboard accessible, and align the merged marker specs with stable Cratis parts.
---
 .ai/agents/frontend-developer.md              | 19 ++--
 .ai/rules/dialogs.md                          | 22 +++--
 .ai/rules/storybook.md                        |  2 +-
 .../cratis-react-page/references/dialogs.md   |  6 +-
 .../new-vertical-slice/references/PATTERNS.md | 98 ++++++++-----------
 .ai/skills/stepper-command-dialog/SKILL.md    |  6 +-
 Documentation/DataPage/index.md               |  3 +
 ...epper_field_display_name_is_overwritten.ts | 17 +++-
 Source/CommandForm/fields/Fields.stories.tsx  |  3 +-
 Source/DataPage/DataPage.tsx                  | 17 ++++
 .../for_DataPage/given/a_data_page.ts         |  5 +
 .../when_paginator_parts_are_given.ts         | 47 +++++++++
 Source/Dropdown/Dropdown.tsx                  | 10 ++
 ...dering_a_filterable_multiple_selection.tsx |  6 ++
 .../ObjectNavigationalBar.tsx                 | 15 ++-
 .../when_rendering_breadcrumbs.tsx            | 26 +++++
 Source/SchemaEditor/SchemaEditor.tsx          | 15 ++-
 17 files changed, 222 insertions(+), 95 deletions(-)
 create mode 100644 Source/DataPage/for_DataPage/when_paginator_parts_are_given.ts
 create mode 100644 Source/ObjectNavigationalBar/for_ObjectNavigationalBar/when_rendering_breadcrumbs.tsx

diff --git a/.ai/agents/frontend-developer.md b/.ai/agents/frontend-developer.md
index d769f264..a2c2ef43 100644
--- a/.ai/agents/frontend-developer.md
+++ b/.ai/agents/frontend-developer.md
@@ -155,7 +155,6 @@ Use this for dialogs that collect data and return it without executing a command
 import { useState } from 'react';
 import { DialogProps, DialogResult } from '@cratis/arc.react/dialogs';
 import { Dialog } from '@cratis/components/Dialogs';
-import { InputText } from 'primereact/inputtext';
 
 export const AddProject = ({ closeDialog }: DialogProps<{ name: string }>) => {
     const [name, setName] = useState('');
@@ -171,10 +170,11 @@ export const AddProject = ({ closeDialog }: DialogProps<{ name: string }>) => {
             onConfirm={() => closeDialog(DialogResult.Ok, { name })}
             onCancel={() => closeDialog(DialogResult.Cancelled)}
         >
-            <InputText
+            <input
                 value={name}
                 onChange={(event) => setName(event.target.value)}
                 placeholder='Enter a name'
+                className='cratis-field-input w-full'
                 autoFocus
             />
         </Dialog>
@@ -193,21 +193,22 @@ import { Page } from '@cratis/components/Common';
 import { AddProject } from './Registration/AddProject';
 import { Listing } from './Listing/Listing';
 import { DialogResult, useDialog } from '@cratis/arc.react/dialogs';
-import { Button } from 'primereact/button';
+import { Button } from '@cratis/components/Common';
 import * as mdIcons from 'react-icons/md';
 
 export const Projects = () => {
     const [AddProjectDialog, showAddProjectDialog] = useDialog(AddProject);
 
     // For a query-backed list page, prefer `DataPage` with `<DataPage.MenuItems>`
-    // (it owns the action bar). PrimeReact 11 removed the standalone `Menubar`;
-    // for a custom toolbar, compose `Button`s (content is children in v11).
+    // (it owns the action bar). For a custom toolbar, compose Cratis `Button`s.
     return (
         <Page title='Projects'>
-            <Button variant='text' onClick={() => showAddProjectDialog()}>
-                <mdIcons.MdAdd />
-                <span>Add Project</span>
-            </Button>
+            <Button
+                text
+                icon={<mdIcons.MdAdd />}
+                label='Add Project'
+                onClick={() => showAddProjectDialog()}
+            />
             <Listing />
             <AddProjectDialog />
         </Page>
diff --git a/.ai/rules/dialogs.md b/.ai/rules/dialogs.md
index a81b9eca..cc5a8705 100644
--- a/.ai/rules/dialogs.md
+++ b/.ai/rules/dialogs.md
@@ -7,13 +7,13 @@ paths:
 
 # Using Dialogs
 
-The Cratis dialog wrappers handle command execution, validation timing, loading states, and footer buttons consistently. Using PrimeReact's raw `Dialog` bypasses all of this and leads to inconsistent UX.
+The Cratis dialog wrappers handle command execution, validation timing, accessible focus, loading states, and footer buttons consistently. Importing a renderer dialog directly bypasses these contracts and leads to inconsistent UX.
 
 ## Choose the Correct Dialog Type
 
 - If confirm executes a command, use `CommandDialog` from `@cratis/components/CommandDialog`.
 - If no command is executed on confirm, use `Dialog` from `@cratis/components/Dialogs`.
-- **Never** import `Dialog` from `primereact/dialog` directly.
+- **Never** import `Dialog` from a renderer package directly; use the Cratis dialog subpaths.
 
 ## When Using `CommandDialog`
 
@@ -71,11 +71,11 @@ if (result === DialogResult.Ok) {
 
 ### `onBeforeExecute` is a transformer
 
-It receives the current command values and **must return them** (mutated or not). **Returning `void` executes the command with `undefined` values.** It runs only on submit — never use it to seed *required* values (validation runs against pre-transform state, so a value seeded here never makes the form valid and the submit button stays permanently disabled). Seed required values via `initialValues`; reserve `onBeforeExecute` for transforms that don't affect validity (e.g. a generated id).
+It receives the current command values and should return them (mutated or not). Returning `void` keeps the current values and emits a development warning, but it obscures intent. It runs only on submit — never use it to seed *required* values (validation runs against pre-transform state, so a value seeded here never makes the form valid and the submit button stays permanently disabled). Seed required values via `initialValues`; reserve `onBeforeExecute` for transforms that don't affect validity (e.g. a generated id).
 
 ### CommandForm fields
 
-Use built-in `CommandForm` fields (from `@cratis/components/CommandForm`) for every user-input value — a raw PrimeReact control inside a command dialog bypasses `CommandFormFieldWrapper`, so validation never re-runs and the submit button stays **permanently disabled**. Catalog: `InputTextField`, `PasswordField`, `NumberField`, `DropdownField`, `CheckboxField`, `ToggleSwitchField`, `TextAreaField`, `CalendarField`, `RadioButtonField`, `RadioGroupField`, `ChipsField`, `MultiSelectField`, `ColorPickerField`, `SliderField`, `RatingField`.
+Use built-in `CommandForm` fields (from `@cratis/components/CommandForm`) for every user-input value — a raw unwrapped control inside a command dialog bypasses `CommandFormFieldWrapper`, so validation never re-runs and the submit button stays **permanently disabled**. Catalog: `InputTextField`, `PasswordField`, `NumberField`, `DropdownField`, `CheckboxField`, `ToggleSwitchField`, `TextAreaField`, `CalendarField`, `RadioButtonField`, `RadioGroupField`, `ChipsField`, `MultiSelectField`, `ColorPickerField`, `SliderField`, `RatingField`.
 
 - The `value={c => c.name}` **accessor lambda doubles as the binding and type-checked field selection** — renaming a command property surfaces a compile error at every binding.
 - **`RadioGroupField<T>`** renders a whole group from data (`options`/`optionLabel`/`optionValue`, `layout='horizontal'|'vertical'`); **`RadioButtonField<T>`** is one component per option (each takes a `buttonValue`). Both infer the value type from the accessor — no `as string` casts.
@@ -88,7 +88,7 @@ Use built-in `CommandForm` fields (from `@cratis/components/CommandForm`) for ev
 
 ### Multi-step wizards — `StepperCommandDialog`
 
-For a command split across named steps use `StepperCommandDialog` (`@cratis/components/CommandDialog`) — see the **stepper-command-dialog** skill. Conditional steps written as `{condition && <StepperPanel/>}` are supported **from 2.7.1**: only the steps that actually render are counted, so Next and Submit appear where the user expects them. ⚠️ On earlier versions a hidden step is still counted — Submit never appears on the real last step and a dead Next takes its place, so check what you are pinned to before relying on this. ⚠️ A `<>…</>` fragment wrapping several panels still counts as **one** step — give each step its own `StepperPanel` child. When a step needs non-CommandForm inputs, or cross-step state is complex, fall back to a manual `Dialog` + PrimeReact `Stepper`.
+For a command split across named steps use `StepperCommandDialog` (`@cratis/components/CommandDialog`) — see the **stepper-command-dialog** skill. Conditional steps written as `{condition && <StepperPanel/>}` are supported **from 2.7.1**: only the steps that actually render are counted, so Next and Submit appear where the user expects them. ⚠️ On earlier versions a hidden step is still counted — Submit never appears on the real last step and a dead Next takes its place, so check what you are pinned to before relying on this. ⚠️ A `<>…</>` fragment wrapping several panels still counts as **one** step — give each step its own `StepperPanel` child. When a step needs non-CommandForm inputs or cross-step state is complex, fall back to a manual Cratis `Dialog` plus tested application-owned step state.
 
 ## When Using `Dialog`
 
@@ -98,7 +98,6 @@ Use this for dialogs that collect data and return it without executing a command
 import { useState } from 'react';
 import { DialogProps, DialogResult } from '@cratis/arc.react/dialogs';
 import { Dialog } from '@cratis/components/Dialogs';
-import { InputText } from 'primereact/inputtext';
 
 export const AddProject = ({ closeDialog }: DialogProps<{ name: string }>) => {
     const [name, setName] = useState('');
@@ -112,9 +111,10 @@ export const AddProject = ({ closeDialog }: DialogProps<{ name: string }>) => {
             onConfirm={() => closeDialog(DialogResult.Ok, { name })}
             onCancel={() => closeDialog(DialogResult.Cancelled)}
         >
-            <InputText
+            <input
                 value={name}
-                onChange={event => setName(event.target.value)}
+                onChange={(event) => setName(event.target.value)}
+                className='cratis-field-input w-full'
                 autoFocus
             />
         </Dialog>
@@ -195,6 +195,8 @@ When the dialog must return data to its caller (e.g. a postal code lookup result
 Use `buttons={null}` for dialogs that contain their own internal actions (e.g. a menu + data table) and don't need a confirm/cancel footer:
 
 ```tsx
+import { ActionMenubar } from '@cratis/components/Common';
+
 <Dialog
     title="Hubs"
     visible={true}
@@ -202,7 +204,7 @@ Use `buttons={null}` for dialogs that contain their own internal actions (e.g. a
     buttons={null}
     onCancel={() => closeDialog(DialogResult.Cancelled)}
 >
-    <Menubar model={menuItems} />
+    <ActionMenubar model={menuItems} aria-label='Hub actions' />
     <Listing configurationId={configurationId} />
 </Dialog>
 ```
@@ -223,4 +225,4 @@ Use `buttons={null}` for dialogs that contain their own internal actions (e.g. a
 | `width` | `string` | Dialog width (e.g. `'50vw'`) — replaces PrimeReact `style={{ width }}` |
 | `resizable` | `boolean` | Default `false` |
 
-`style`, `contentStyle`, and `dismissable` **are** supported. The other v10 PrimeReact Dialog props (`modal`, `dismissableMask`, `draggable`, `footer`, `onHide`) are **not** available — do not use them. (`resizable` is accepted for compatibility but is a no-op in PrimeReact 11.)
+`style`, `contentStyle`, and `dismissable` **are** supported. Legacy renderer props such as `modal`, `dismissableMask`, `draggable`, `footer`, and `onHide` are **not** available — do not use them. `resizable` remains a compatibility no-op because the Cratis dialog is viewport bounded.
diff --git a/.ai/rules/storybook.md b/.ai/rules/storybook.md
index 068c4871..53dec524 100644
--- a/.ai/rules/storybook.md
+++ b/.ai/rules/storybook.md
@@ -70,7 +70,7 @@ export const Interactive: Story = {
 };
 ```
 
-- **Stateful only** — presentational atoms get no `play:`. Thin PrimeReact wrappers (overlay-portal components) are excluded — their behavior is the framework's.
+- **Stateful only** — presentational atoms get no `play:`. Low-level interaction details delegated to React Aria are excluded, but every Cratis-owned composition still needs specs for the behavior it promises.
 - Prefer role/structure queries over localized text. `play:` runs in the Interactions panel (documentation/QA); the enforced behavioral gate is the Vitest spec.
 
 ## Router-dependent components
diff --git a/.ai/skills/cratis-react-page/references/dialogs.md b/.ai/skills/cratis-react-page/references/dialogs.md
index 644c1695..867f0d32 100644
--- a/.ai/skills/cratis-react-page/references/dialogs.md
+++ b/.ai/skills/cratis-react-page/references/dialogs.md
@@ -172,7 +172,6 @@ Use when the dialog collects data and returns it without executing a command.
 ```tsx
 import { DialogProps, DialogResult } from '@cratis/arc.react/dialogs';
 import { Dialog } from '@cratis/components/Dialogs';
-import { InputText } from 'primereact/inputtext';
 import { useState } from 'react';
 
 export const RenameDialog = ({ closeDialog }: DialogProps<{ name: string }>) => {
@@ -185,9 +184,10 @@ export const RenameDialog = ({ closeDialog }: DialogProps<{ name: string }>) =>
             onConfirm={() => closeDialog(DialogResult.Ok, { name })}
             onCancel={() => closeDialog(DialogResult.Cancelled)}
         >
-            <InputText
+            <input
                 value={name}
-                onChange={event => setName(event.target.value)}
+                onChange={(event) => setName(event.target.value)}
+                className='cratis-field-input w-full'
                 autoFocus
             />
         </Dialog>
diff --git a/.ai/skills/new-vertical-slice/references/PATTERNS.md b/.ai/skills/new-vertical-slice/references/PATTERNS.md
index c6e132e7..e5c025ec 100644
--- a/.ai/skills/new-vertical-slice/references/PATTERNS.md
+++ b/.ai/skills/new-vertical-slice/references/PATTERNS.md
@@ -244,30 +244,20 @@ public record StockDecreased(ISBN Isbn, BookStock StockBeforeDecrease);
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { Column } from '@cratis/components/DataPage';
-import { DataTable } from 'primereact/datatable';
+import { Column, DataTableForQuery } from '@cratis/components/DataTables';
 import { AllProjects } from './AllProjects';
 
-const pageSize = 10;
-
-export const Listing = () => {
-    const [result, , setPage] = AllProjects.useWithPaging(pageSize);
-
-    return (
-        <DataTable
-            lazy paginator
-            value={result.data}
-            rows={pageSize}
-            totalRecords={result.paging.totalItems}
-            alwaysShowPaginator={false}
-            first={result.paging.page * pageSize}
-            onPage={event => setPage(event.page ?? 0)}
-            scrollable scrollHeight="flex"
-            emptyMessage="No projects found.">
-            <Column field="name" header="Name" />
-        </DataTable>
-    );
-};
+export const Listing = () => (
+    <DataTableForQuery
+        query={AllProjects}
+        pageSize={10}
+        emptyMessage='No projects found.'
+        scrollable
+        scrollHeight='flex'
+    >
+        <Column field='name' header='Name' />
+    </DataTableForQuery>
+);
 ```
 
 ### CommandDialog for state-change commands
@@ -276,39 +266,28 @@ export const Listing = () => {
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { useState } from 'react';
 import { DialogProps, DialogResult } from '@cratis/arc.react/dialogs';
 import { CommandDialog } from '@cratis/components/CommandDialog';
-import { InputText } from 'primereact/inputtext';
+import { InputTextField } from '@cratis/components/CommandForm';
 import { RegisterProject } from './RegisterProject';
 
-export const AddProject = ({ closeDialog }: DialogProps) => {
-    const [name, setName] = useState('');
-
-    return (
-        <CommandDialog
-            command={RegisterProject}
-            visible
-            header="Add Project"
-            width="32rem"
-            confirmLabel="Add"
-            cancelLabel="Cancel"
-            onBeforeExecute={(values) => {
-                values.name = name;
-                return values;
-            }}
-            onConfirm={() => closeDialog(DialogResult.Ok)}
-            onCancel={() => closeDialog(DialogResult.Cancelled)}>
-            <CommandDialog.Fields>
-                <InputText
-                    value={name}
-                    onChange={event => setName(event.target.value)}
-                    autoFocus
-                />
-            </CommandDialog.Fields>
-        </CommandDialog>
-    );
-};
+export const AddProject = ({ closeDialog }: DialogProps) => (
+    <CommandDialog<RegisterProject>
+        command={RegisterProject}
+        title='Add Project'
+        width='32rem'
+        okLabel='Add'
+        cancelLabel='Cancel'
+        onSuccess={() => closeDialog(DialogResult.Ok)}
+        onCancel={() => closeDialog(DialogResult.Cancelled)}
+    >
+        <InputTextField<RegisterProject>
+            value={(command) => command.name}
+            title='Project name'
+            autoFocus
+        />
+    </CommandDialog>
+);
 ```
 
 ### Composition page
@@ -318,7 +297,7 @@ export const AddProject = ({ closeDialog }: DialogProps) => {
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import { DialogResult, useDialog } from '@cratis/arc.react/dialogs';
-import { Button } from 'primereact/button';
+import { Button } from '@cratis/components/Common';
 import * as mdIcons from 'react-icons/md';
 import { Page } from '@cratis/components/Common';
 import { AddProject } from './Registration/AddProject';
@@ -327,15 +306,16 @@ import { Listing } from './Listing/Listing';
 export const Projects = () => {
     const [AddProjectDialog, showAddProjectDialog] = useDialog(AddProject);
 
-    // PrimeReact 11 removed the standalone Menubar; for a query-backed list
-    // page prefer `DataPage` + `<DataPage.MenuItems>`, or compose `Button`s
-    // (content is children in v11) for a custom toolbar.
+    // For a query-backed list page prefer `DataPage` +
+    // `<DataPage.MenuItems>`, or compose Cratis `Button`s for a custom toolbar.
     return (
         <Page title="Projects">
-            <Button variant="text" onClick={() => showAddProjectDialog()}>
-                <mdIcons.MdAdd />
-                <span>Add Project</span>
-            </Button>
+            <Button
+                text
+                icon={<mdIcons.MdAdd />}
+                label='Add Project'
+                onClick={() => showAddProjectDialog()}
+            />
             <Listing />
             <AddProjectDialog />
         </Page>
diff --git a/.ai/skills/stepper-command-dialog/SKILL.md b/.ai/skills/stepper-command-dialog/SKILL.md
index 0e9133c5..793d225f 100644
--- a/.ai/skills/stepper-command-dialog/SKILL.md
+++ b/.ai/skills/stepper-command-dialog/SKILL.md
@@ -98,7 +98,7 @@ const CreateProjectDialog = () => {
 
 ```tsx
 import { useDialog } from '@cratis/arc.react/dialogs';
-import { Button } from 'primereact/button';
+import { Button } from '@cratis/components/Common';
 
 export const ProjectsPage = () => {
     const [CreateProjectDialogWrapper, showCreateProject] = useDialog(CreateProjectDialog);
@@ -112,7 +112,7 @@ export const ProjectsPage = () => {
 };
 ```
 
-Use the PrimeReact `Button` (or a Cratis Components wrapper) — never a raw `<button className="p-button">`.
+Use the Cratis `Button` so product tokens, stable parts, focus behavior, and disabled semantics stay consistent.
 
 ---
 
@@ -218,7 +218,7 @@ For longer wizards, vertical orientation can be more readable:
 | `onConfirm` | `() => void \| Promise<void>` | — | Called after successful execute |
 | `onCancel` | `() => void \| Promise<void>` | — | Called when user dismisses dialog |
 | `onBeforeExecute` | `(values: TCommand) => TCommand` | — | Transform values before execution |
-| `pt` | `StepperProps['pt']` | — | PrimeReact PassThrough for deep DOM customization |
+| `pt` | `StepperParts` | — | Cratis-owned attributes for the stable stepper parts |
 
 ---
 
diff --git a/Documentation/DataPage/index.md b/Documentation/DataPage/index.md
index 952cec70..505aa15a 100644
--- a/Documentation/DataPage/index.md
+++ b/Documentation/DataPage/index.md
@@ -103,6 +103,9 @@ Selection is managed for you; to drive it yourself, pass `selection` and `onSele
 - `globalFilterFields`: Fields to include in global search
 - `defaultFilters`: Initial filter state, a `DataTableFilterMeta` (a `{ value, matchMode }` constraint per field)
 - `clientFiltering`: Deprecated compatibility prop; accepted but ignored because filtering is always scoped to the loaded query page
+- `tablePt` / `tableClassName`: Stable table-part attributes and root class
+- `paginatorPt` / `paginatorClassName`: Stable paginator-part attributes and root class
+- `paginatorAriaLabels`: Localized labels for the paginator navigation and controls
 
 The query-backed table inside `DataPage` suppresses `emptyMessage` while its first result is still performing, so a pending query is not presented as a confirmed empty result.
 
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_stepper_field_display_name_is_overwritten.ts b/Source/CommandDialog/for_StepperCommandDialog/when_stepper_field_display_name_is_overwritten.ts
index 00531df0..a0b112ba 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_stepper_field_display_name_is_overwritten.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_stepper_field_display_name_is_overwritten.ts
@@ -61,8 +61,11 @@ vi.mock('@cratis/arc.react/commands', () => ({
         React.createElement('div', { 'data-testid': 'field-wrapper' }, props.field),
 }));
 
-const overwriteDisplayName = (component: object, name: string): void => {
-    (component as { displayName?: string }).displayName = name;
+const overwriteDisplayName = (
+    component: { displayName?: string },
+    name: string,
+): void => {
+    component.displayName = name;
 };
 
 class TestCommand {
@@ -93,6 +96,8 @@ describe('when a stepper field displayName has been overwritten by a build trans
         const element = React.createElement(
             StepperCommandDialog<TestCommand>,
             {
+                // SAFETY: The local Arc module mock erases the generated command base type;
+                // TestCommand supplies the shape this StepperCommandDialog spec exercises.
                 command: TestCommand as unknown as new () => object,
                 visible: true,
                 title: 'Test Dialog',
@@ -119,12 +124,16 @@ describe('when a stepper field displayName has been overwritten by a build trans
     // Covers the read in extractFieldNamesFromNode: the step indicator can only
     // turn red if the field was recognized and its property name extracted.
     it('should still extract the field name for the step indicator', () => {
-        const step1Number = html.match(/<span data-part="number"[^>]*>1<\/span>|<div data-part="number"[^>]*>1<\/div>/);
+        const step1Number = html.match(
+            /<span[^>]*data-cratis-part="number"[^>]*>1<\/span>/,
+        );
         (step1Number?.[0] ?? '').should.include('red');
     });
 
     it('should not mark the step that has no fields', () => {
-        const step2Number = html.match(/<span data-part="number"[^>]*>2<\/span>|<div data-part="number"[^>]*>2<\/div>/);
+        const step2Number = html.match(
+            /<span[^>]*data-cratis-part="number"[^>]*>2<\/span>/,
+        );
         (step2Number?.[0] ?? '').should.not.include('red');
     });
 
diff --git a/Source/CommandForm/fields/Fields.stories.tsx b/Source/CommandForm/fields/Fields.stories.tsx
index 792e44e8..3d035b68 100644
--- a/Source/CommandForm/fields/Fields.stories.tsx
+++ b/Source/CommandForm/fields/Fields.stories.tsx
@@ -186,7 +186,7 @@ export const AllFields: Story = {
                             }
                         } else {
                             setValidationState((prev) => {
-                                const { [fieldName]: removed, ...rest } = prev.errors;
+                                const { [fieldName]: _removed, ...rest } = prev.errors;
                                 return {
                                     errors: rest,
                                     canSubmit: Object.keys(rest).length === 0,
@@ -339,7 +339,6 @@ export const AllFields: Story = {
                             description='Internationalized Cratis date picker'
                             placeholder='Select a date'
                             showIcon
-                            dateFormat='mm/dd/yy'
                         />
                     </StorySection>
 
diff --git a/Source/DataPage/DataPage.tsx b/Source/DataPage/DataPage.tsx
index 75a871ae..e1e686a1 100644
--- a/Source/DataPage/DataPage.tsx
+++ b/Source/DataPage/DataPage.tsx
@@ -10,6 +10,10 @@ import { type IObservableQueryFor, type IQueryFor, QueryFor } from '@cratis/arc/
 import { DataTableForObservableQuery } from '../DataTables/DataTableForObservableQuery';
 import type { DataTableParts } from '../DataTables/DataTableCore';
 import { DataTableForQuery } from '../DataTables/DataTableForQuery';
+import type {
+    TablePaginatorParts,
+    TablePaginatorProps,
+} from '../DataTables/TablePaginator';
 import type { DataTableFilterMeta } from '../DataTables/DataTableFilterMeta';
 import type { DataTableSelectionChangeEvent } from '../DataTables/DataTableSelectionChangeEvent';
 import { Allotment } from 'allotment';
@@ -309,6 +313,18 @@ export interface DataPageProps<
     /** Legacy renderer flag retained for source compatibility; ignored on the inner DataTable. */
     tableUnstyled?: boolean;
 
+    /** Extra CSS class name forwarded to the query table paginator. */
+    paginatorClassName?: string;
+
+    /** Cratis-owned attributes applied to the query table paginator. */
+    paginatorPt?: TablePaginatorParts;
+
+    /** Retained for source compatibility; Cratis parts always merge. */
+    paginatorPtOptions?: object;
+
+    /** Accessible paginator labels. Override any value to localize it. */
+    paginatorAriaLabels?: TablePaginatorProps['ariaLabels'];
+
     /**
      * Extra CSS class name forwarded to the action menubar root.
      */
@@ -426,6 +442,7 @@ export interface DataPageProps<
  *
  * The inner DataTable and action toolbar each have their own per-slot props:
  * `tablePt` / `tableUnstyled` / `tableClassName` for the table;
+ * `paginatorPt` / `paginatorClassName` / `paginatorAriaLabels` for paging;
  * `menubarPt` / `menubarPtOptions` / `menubarUnstyled` / `menubarClassName` for
  * the action toolbar's stable button parts (the action bar is implemented as
  * a button toolbar, so `menubarPt` targets the stable Cratis button parts). See the
diff --git a/Source/DataPage/for_DataPage/given/a_data_page.ts b/Source/DataPage/for_DataPage/given/a_data_page.ts
index 06c754dd..7c8ec349 100644
--- a/Source/DataPage/for_DataPage/given/a_data_page.ts
+++ b/Source/DataPage/for_DataPage/given/a_data_page.ts
@@ -7,6 +7,7 @@ import { createRoot, type Root } from 'react-dom/client';
 import { CratisComponentsProvider } from '../../../Common/CratisComponentsProvider';
 import { Column } from '../../../DataTables/Column';
 import type { DataTableFilterMeta } from '../../../DataTables/DataTableFilterMeta';
+import type { TablePaginatorParts } from '../../../DataTables/TablePaginator';
 // Allotment lays its split view out entirely from this stylesheet, and a pane is only the
 // absolutely positioned, full-height box the page assumes once the rules are on the document.
 // `DataPage` no longer imports it — a CSS import inside the JS graph is what stopped the
@@ -44,6 +45,9 @@ export interface DataPageOptions {
 
     /** Observe selection changes. */
     onSelectionChange?: (event: { value: Person | null }) => void;
+
+    /** Customize paginator parts. */
+    paginatorPt?: TablePaginatorParts;
 }
 
 const PersonDetails = ({ item }: { item: Person }) =>
@@ -92,6 +96,7 @@ export const aDataPage = (options: DataPageOptions = {}) => {
             defaultFilters: options.defaultFilters,
             selection: options.selection,
             onSelectionChange: options.onSelectionChange,
+            paginatorPt: options.paginatorPt,
             children,
         },
     );
diff --git a/Source/DataPage/for_DataPage/when_paginator_parts_are_given.ts b/Source/DataPage/for_DataPage/when_paginator_parts_are_given.ts
new file mode 100644
index 00000000..ae6bc6e5
--- /dev/null
+++ b/Source/DataPage/for_DataPage/when_paginator_parts_are_given.ts
@@ -0,0 +1,47 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { expect } from 'chai';
+import { afterEach, beforeEach, describe, it, vi } from 'vitest';
+import {
+    aDataPage,
+    type DataPageInTheDom,
+    render,
+    unmount,
+} from './given/a_data_page';
+
+vi.mock('@cratis/arc.react/queries', async () => {
+    const { arcQueryHooks } = await import('./given/a_paged_query_result');
+    return arcQueryHooks();
+});
+
+describe('when paginator parts are given', () => {
+    let page: DataPageInTheDom;
+
+    beforeEach(async () => {
+        page = await render(
+            aDataPage({
+                paginatorPt: {
+                    root: { className: 'product-paginator' },
+                    next: { root: { className: 'product-paginator-next' } },
+                },
+            }),
+        );
+    });
+
+    afterEach(async () => {
+        await unmount(page);
+    });
+
+    it('should forward the paginator root part', () => {
+        expect(page.container.querySelector('.product-paginator')).not.to.equal(null);
+    });
+
+    it('should forward paginator button parts', () => {
+        expect(page.container.querySelector('.product-paginator-next')).not.to.equal(
+            null,
+        );
+    });
+});
diff --git a/Source/Dropdown/Dropdown.tsx b/Source/Dropdown/Dropdown.tsx
index e2d01ad1..17e8f560 100644
--- a/Source/Dropdown/Dropdown.tsx
+++ b/Source/Dropdown/Dropdown.tsx
@@ -22,6 +22,7 @@ import {
 import {
     Button as ComboBoxButton,
     ComboBox,
+    ComboBoxValue,
     Input,
     ListBox as ComboBoxListBox,
     ListBoxItem as ComboBoxListBoxItem,
@@ -276,6 +277,15 @@ export const Dropdown = <T = unknown,>({
                         allowsEmptyCollection
                         className='cratis-dropdown__combobox'
                     >
+                        <ComboBoxValue
+                            {...pt?.value}
+                            placeholder={placeholder}
+                            className={classNames(
+                                'cratis-dropdown__value',
+                                pt?.value?.className,
+                            )}
+                            data-cratis-part='value'
+                        />
                         <Input
                             {...pt?.filter}
                             id={triggerId}
diff --git a/Source/Dropdown/for_Dropdown/when_rendering_a_filterable_multiple_selection.tsx b/Source/Dropdown/for_Dropdown/when_rendering_a_filterable_multiple_selection.tsx
index fd1c40ed..c109489f 100644
--- a/Source/Dropdown/for_Dropdown/when_rendering_a_filterable_multiple_selection.tsx
+++ b/Source/Dropdown/for_Dropdown/when_rendering_a_filterable_multiple_selection.tsx
@@ -61,6 +61,12 @@ describe('when rendering a filterable multiple selection', () => {
         onChange.mockReset();
     });
 
+    it('should display the selected values while the popup is closed', () => {
+        expect(
+            container.querySelector('[data-cratis-part="value"]')?.textContent,
+        ).to.contain('One');
+    });
+
     it('should render the multi-value combobox filter', () => {
         expect(
             container.querySelector<HTMLInputElement>('[data-cratis-part="filter"]')
diff --git a/Source/ObjectNavigationalBar/ObjectNavigationalBar.tsx b/Source/ObjectNavigationalBar/ObjectNavigationalBar.tsx
index 44600450..b8f428d3 100644
--- a/Source/ObjectNavigationalBar/ObjectNavigationalBar.tsx
+++ b/Source/ObjectNavigationalBar/ObjectNavigationalBar.tsx
@@ -75,9 +75,20 @@ export function ObjectNavigationalBar({
                     {breadcrumbItems.map((item, index) => (
                         <span key={index}>
                             {index > 0 && <span className='mx-2'>&gt;</span>}
-                            <span
+                            <button
+                                type='button'
                                 onClick={() => onNavigate(item.index)}
+                                aria-current={
+                                    index === breadcrumbItems.length - 1
+                                        ? 'location'
+                                        : undefined
+                                }
                                 style={{
+                                    padding: 0,
+                                    border: 0,
+                                    background: 'transparent',
+                                    color: 'inherit',
+                                    font: 'inherit',
                                     cursor: 'pointer',
                                     textDecoration:
                                         index < breadcrumbItems.length - 1
@@ -86,7 +97,7 @@ export function ObjectNavigationalBar({
                                 }}
                             >
                                 {item.name}
-                            </span>
+                            </button>
                         </span>
                     ))}
                 </div>
diff --git a/Source/ObjectNavigationalBar/for_ObjectNavigationalBar/when_rendering_breadcrumbs.tsx b/Source/ObjectNavigationalBar/for_ObjectNavigationalBar/when_rendering_breadcrumbs.tsx
new file mode 100644
index 00000000..7b3acfb3
--- /dev/null
+++ b/Source/ObjectNavigationalBar/for_ObjectNavigationalBar/when_rendering_breadcrumbs.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 { expect } from 'chai';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, it } from 'vitest';
+import { ObjectNavigationalBar } from '../ObjectNavigationalBar';
+
+describe('when rendering breadcrumbs', () => {
+    const html = renderToStaticMarkup(
+        <ObjectNavigationalBar
+            navigationPath={['person', 'address']}
+            onNavigate={() => undefined}
+        />,
+    );
+
+    it('should render every location as a native keyboard button', () => {
+        expect(html.match(/<button/g)).to.have.lengthOf(4);
+        expect(html).to.contain('person');
+        expect(html).to.contain('address');
+    });
+
+    it('should identify the current location', () => {
+        expect(html).to.contain('aria-current="location"');
+    });
+});
diff --git a/Source/SchemaEditor/SchemaEditor.tsx b/Source/SchemaEditor/SchemaEditor.tsx
index f055a68f..6ad31b14 100644
--- a/Source/SchemaEditor/SchemaEditor.tsx
+++ b/Source/SchemaEditor/SchemaEditor.tsx
@@ -545,9 +545,20 @@ export const SchemaEditor = ({
                         {breadcrumbItems.map((item, index) => (
                             <span key={index}>
                                 {index > 0 && <span className='mx-2'>&gt;</span>}
-                                <span
+                                <button
+                                    type='button'
                                     onClick={() => navigateToBreadcrumb(index)}
+                                    aria-current={
+                                        index === breadcrumbItems.length - 1
+                                            ? 'location'
+                                            : undefined
+                                    }
                                     style={{
+                                        padding: 0,
+                                        border: 0,
+                                        background: 'transparent',
+                                        color: 'inherit',
+                                        font: 'inherit',
                                         cursor: 'pointer',
                                         textDecoration:
                                             index < breadcrumbItems.length - 1
@@ -556,7 +567,7 @@ export const SchemaEditor = ({
                                     }}
                                 >
                                     {item.name}
-                                </span>
+                                </button>
                             </span>
                         ))}
                     </div>

From 51896429e7d1de448a6084d035a17f862736f236 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Sun, 23 Aug 2026 17:54:37 +0200
Subject: [PATCH 018/267] Harden Canvas and table foundation APIs

Remove late-merged Prime icon and legacy-token dependencies, make Canvas overlays SSR-safe, block busy dialog dismissal, localize and expose stable filter parts, document Canvas and public part contracts, and verify current Arc 22.1 compatibility.
---
 .github/workflows/javascript-build.yml        |   6 +-
 Documentation/Canvas/index.md                 | 131 +++++++++++++
 Documentation/Canvas/toc.yml                  |   2 +
 Documentation/CommandDialog/index.md          |   7 +-
 Documentation/DataPage/index.md               |   4 +-
 .../DataTables/column-configuration.md        |   6 +
 .../data-table-for-observable-query.md        |   4 +-
 .../DataTables/data-table-for-query.md        |   4 +-
 Documentation/Dialogs/dialog.md               |   2 +-
 Documentation/Styling/pass-through.md         |   3 +-
 Documentation/choosing-a-component.md         |   4 +
 Documentation/coming-from-primereact.md       |   4 +-
 Documentation/index.mdx                       |   3 +
 Documentation/toc.yml                         |   2 +
 Source/Canvas/Canvas.css                      |  30 +--
 Source/Canvas/Canvas.tsx                      | 101 +++++-----
 Source/Canvas/CanvasControls.tsx              |  31 ++-
 Source/Canvas/CanvasItem.tsx                  |   7 +-
 Source/Canvas/CanvasMinimap.tsx               |  29 +--
 Source/Canvas/CanvasOverlay.tsx               |  19 +-
 .../when_rendering_on_the_server.tsx          |  19 ++
 Source/Canvas/shapes/ChatBubble/Chat.tsx      |   1 +
 .../Canvas/shapes/ChatBubble/ChatBubble.tsx   |  17 +-
 .../Canvas/shapes/ChatBubble/ChatComposer.tsx |   1 +
 .../shapes/ChatBubble/ChatMessageBubble.tsx   |   5 +-
 .../Canvas/shapes/ChatBubble/FailedReply.css  |   4 +-
 .../Canvas/shapes/ChatBubble/FailedReply.tsx  |   6 +-
 Source/Canvas/shapes/Note/Note.tsx            |  30 +--
 Source/Canvas/shapes/Region/Region.tsx        |  27 +--
 Source/CommandDialog/CommandDialog.tsx        |  15 +-
 Source/CommandDialog/CommandStepper.css       |  10 +
 Source/CommandDialog/CommandStepper.tsx       |  25 +--
 .../when_command_execution_fails.tsx          |   2 +-
 ...epper_field_display_name_is_overwritten.ts |  54 ++----
 Source/CommandForm/fields/CheckboxField.tsx   |   7 +-
 Source/CommandForm/fields/ChipsField.tsx      |   7 +-
 .../CommandForm/fields/ColorPickerField.tsx   |   6 +-
 Source/CommandForm/fields/InputTextField.tsx  |   4 +-
 Source/CommandForm/fields/NumberField.tsx     |   5 +-
 Source/CommandForm/fields/PasswordField.tsx   |   6 +-
 .../CommandForm/fields/RadioButtonField.tsx   |   7 +-
 Source/CommandForm/fields/RadioGroupField.tsx |   8 +-
 Source/CommandForm/fields/RatingField.tsx     |   7 +-
 Source/CommandForm/fields/SliderField.tsx     |   6 +-
 Source/CommandForm/fields/TextAreaField.tsx   |   4 +-
 .../CommandForm/fields/ToggleSwitchField.tsx  |   7 +-
 Source/Common/Button.tsx                      |   4 +
 Source/Common/CratisComponentsProvider.tsx    |  21 +++
 Source/Common/DatePickerInput.tsx             |  34 ++++
 Source/DataPage/DataPage.tsx                  |   6 +
 Source/DataTables/Column.tsx                  |   3 +
 Source/DataTables/ColumnFilterMenu.tsx        | 176 +++++++++++++++---
 Source/DataTables/DataTableCore.tsx           |  40 ++++
 .../DataTableForObservableQuery.tsx           |   6 +
 Source/DataTables/DataTableForQuery.tsx       |   6 +
 Source/DataTables/TablePaginator.tsx          |   7 +
 .../given/a_filterable_table.tsx              |   2 +-
 .../when_configuring_labels.tsx               |   9 +
 .../when_configuring_stable_parts.tsx         |  54 ++++++
 .../when_localizing_match_modes.tsx           |  59 ++++++
 .../when_rendering_global_search.tsx          |  51 +++++
 Source/Dialogs/Dialog.tsx                     |  41 +++-
 .../when_busy_dismissal_is_attempted.tsx      |  43 +++++
 Source/Dropdown/Dropdown.tsx                  |  56 +++++-
 .../when_using_migration_aliases.tsx          |  25 +++
 Source/Notifications/Toaster.tsx              |  17 ++
 Source/README.md                              |   1 +
 Source/TimeMachine/ReadModelView.tsx          |  16 +-
 Source/TimeMachine/TimeMachine.tsx            |   9 +-
 69 files changed, 1133 insertions(+), 242 deletions(-)
 create mode 100644 Documentation/Canvas/index.md
 create mode 100644 Documentation/Canvas/toc.yml
 create mode 100644 Source/Canvas/for_CanvasOverlay/when_rendering_on_the_server.tsx
 create mode 100644 Source/DataTables/for_ColumnFilterMenu/when_configuring_stable_parts.tsx
 create mode 100644 Source/DataTables/for_ColumnFilterMenu/when_localizing_match_modes.tsx
 create mode 100644 Source/DataTables/for_DataTableCore/when_rendering_global_search.tsx
 create mode 100644 Source/Dialogs/for_Dialog/when_busy_dismissal_is_attempted.tsx

diff --git a/.github/workflows/javascript-build.yml b/.github/workflows/javascript-build.yml
index 378c6f94..a2d51f8a 100644
--- a/.github/workflows/javascript-build.yml
+++ b/.github/workflows/javascript-build.yml
@@ -124,7 +124,7 @@ jobs:
         strategy:
             fail-fast: false
             matrix:
-                arc-version: ['20.3.1', '21.19.4', '22.0.1']
+                arc-version: ['20.3.1', '21.19.4', '22.1.0']
 
         steps:
             - name: Checkout code
@@ -235,7 +235,7 @@ jobs:
                   corepack prepare pnpm@10.17.1 --activate
                   pnpm add --ignore-scripts \
                     /tmp/cratis-components.tgz \
-                    @cratis/arc@22.0.1 @cratis/arc.react@22.0.1 \
+                    @cratis/arc@22.1.0 @cratis/arc.react@22.1.0 \
                     @cratis/fundamentals react@19 react-dom@19 reflect-metadata tsyringe
                   pnpm exec node verify.mjs
 
@@ -255,7 +255,7 @@ jobs:
                   YAML
                   yarn add \
                     /tmp/cratis-components.tgz \
-                    @cratis/arc@22.0.1 @cratis/arc.react@22.0.1 \
+                    @cratis/arc@22.1.0 @cratis/arc.react@22.1.0 \
                     @cratis/fundamentals react@19 react-dom@19 \
                     reflect-metadata tsyringe rxjs
                   yarn node verify.mjs
diff --git a/Documentation/Canvas/index.md b/Documentation/Canvas/index.md
new file mode 100644
index 00000000..c9a9811b
--- /dev/null
+++ b/Documentation/Canvas/index.md
@@ -0,0 +1,131 @@
+---
+title: Canvas
+description: Reference for the pan, zoom, minimap, overlay, and collaborative canvas primitives.
+---
+
+`@cratis/components/Canvas` provides a renderer-independent React surface for large spatial workspaces. It owns gesture coordination, transforms, controls, item measurement, minimap state, and optional Note, Region, and Chat shapes. Product appearance comes from `--cratis-*` tokens and Canvas classes; PrimeIcons and a renderer provider are not required.
+
+## Import
+
+```tsx
+import {
+    Canvas,
+    CanvasItem,
+    CanvasOverlay,
+    type CanvasHandle,
+} from '@cratis/components/Canvas';
+```
+
+Import `@cratis/components/tokens` and `@cratis/components/styles` once at the application root. Add `@cratis/components/theme` only when using the baseline appearance.
+
+## Canvas
+
+```tsx
+const handleReady = (handle: CanvasHandle) => {
+    handle.smoothPanZoomToWorld(1200, 800, 1.25);
+};
+
+<Canvas
+    initialZoom={1}
+    minZoom={0.25}
+    maxZoom={3}
+    showControls
+    showMinimap
+    onHandleReady={handleReady}
+>
+    <CanvasItem x={1200} y={800}>
+        <article>Customer journey</article>
+    </CanvasItem>
+</Canvas>;
+```
+
+### `CanvasProps<T>`
+
+`T` extends `CanvasItemData` (`id`, `x`, `y`) when the optional Pixi item renderer is used.
+
+| Prop | Type | Default | Meaning |
+| --- | --- | --- | --- |
+| `children` | `ReactNode` | — | DOM canvas content, normally positioned with `CanvasItem`. |
+| `items` | `T[]` | `[]` | Optional Pixi-backed item data. |
+| `renderItem` | `(item: T) => PIXI.Container` | — | Builds one Pixi display object. |
+| `onItemPointerDown` | `(item, event) => void` | — | Receives Pixi item pointer activation. |
+| `onReady` | `(context: CanvasContext) => void` | — | Provides the Pixi `app` and `world` container. |
+| `onTransformChange` | `(zoom, pan) => void` | — | Reports camera changes. |
+| `initialZoom` | `number` | `1` | Initial zoom factor. |
+| `initialPan` | `{ x: number; y: number }` | `{ x: 0, y: 0 }` | Initial viewport translation. |
+| `minZoom` / `maxZoom` | `number` | `0.1` / `5` | Zoom limits. |
+| `showControls` | `boolean` | `true` | Shows zoom controls. |
+| `showMinimap` | `boolean` | `false` | Adds the minimap toggle/control. |
+| `minimapWorldWidth` / `minimapWorldHeight` | `number` | `4000` / `3000` in the minimap | World dimensions represented by the minimap. |
+| `minimapItems` | `MinimapItem[]` | measured items | Explicit minimap rectangles. |
+| `controlsPlacement` | `'bottom-left' \| 'bottom-right'` | `'bottom-left'` | Control-bar edge. |
+| `className` / `style` | standard React values | — | Canvas root customization. |
+| `onHelp` | `() => void` | — | Adds and handles the help action. |
+| `helpTitle` | `string` | provider-independent English fallback | Help action label. |
+| `disableControlsGlass` | `boolean` | `false` | Uses the lower-cost CSS frosted pill for large scenes. |
+| `onHandleReady` | `(handle: CanvasHandle) => void` | — | Provides imperative camera/item-bound operations. |
+| `readOnly` | `boolean` | `false` | Keeps pan/zoom but absorbs content interaction. |
+| `backgroundDragPans` | `boolean` | `true` | Set `false` when the product owns empty-background drag selection. Wheel, middle-button, and touch panning remain available. |
+
+### `CanvasHandle`
+
+| Method | Meaning |
+| --- | --- |
+| `smoothPanToWorld(x, y, durationMs?)` | Centers a world point with an animated pan. |
+| `smoothPanZoomToWorld(x, y, zoom?, durationMs?)` | Animates pan and zoom together. |
+| `getContainerRect()` | Returns the current viewport rectangle or `null`. |
+| `getItemBounds()` | Returns measured world-space rectangles as `MinimapItem[]`. |
+
+## CanvasItem
+
+`CanvasItem` positions and measures DOM content inside a `Canvas`.
+
+| Prop | Type | Meaning |
+| --- | --- | --- |
+| `x` / `y` | `number` | World position. |
+| `zIndex` | `number` | Item-root stacking order. Use this rather than a descendant z-index because each transformed item is its own stacking context. |
+| `onSize` | `(width, height) => void` | Reports measured size changes. |
+| `children` | `ReactNode` | Item content. |
+
+## Controls and minimap
+
+`CanvasControls` is exported for products that compose controls separately. Its callbacks are `getZoom`, `onZoomIn`, `onZoomOut`, and `onZoomReset`; optional minimap, placement, help, label, glass-surface, and low-cost fallback props match the integrated Canvas controls.
+
+`CanvasControlsLabels` localizes `toggleMinimap`, `zoomOut`, `resetZoom`, `zoomIn`, and `help`.
+
+`CanvasMinimap` accepts `worldWidth`, `worldHeight`, `items`, and `onRequestPan`. A `MinimapItem` contains `x`, `y`, `width`, `height`, and optional `color`. Its ref exposes `CanvasMinimapHandle.update(pan, zoom, canvasWidth, canvasHeight)`.
+
+## Overlays and SSR
+
+`CanvasOverlay` portals children to `document.body` in the browser. It renders an empty server/hydration placeholder, so importing or server-rendering a Canvas tree does not access `document` before hydration.
+
+Use it for floating controls that must escape canvas clipping:
+
+```tsx
+<CanvasOverlay>
+    <aside className='product-canvas-inspector'>Inspector</aside>
+</CanvasOverlay>
+```
+
+## Included shapes
+
+The Canvas entry point also exports:
+
+- `Note`, `NoteProps`, and `NoteData` for movable/resizable editable notes.
+- `Region`, `RegionProps`, and `RegionData` for labeled spatial grouping.
+- Chat composition primitives: `Chat`, `ChatBubble`, `ChatComposer`, `ChatMessageBubble`, `MessageReactions`, `ReactionPicker`, `TypingIndicator`, `FailedReply`, and their exported data/label types.
+- Avatar, emoji-memory/catalog, and mention parsing/application helpers used by the chat primitives.
+- `AnchoredOverlay` and its side/alignment types for body-level overlays attached to a control.
+- `canvasGesture`, `canvasTransformActivity`, and `createSelfSuspendingFrameLoop` for advanced canvas integrations.
+
+These shapes are optional conveniences, not domain models. Applications own persistence, commands, read models, authorization, and collaboration policy through Arc/Chronicle. Pass typed data and callbacks into the shapes rather than coupling them to generated proxies.
+
+## Styling
+
+Canvas structure uses the standard semantic token seam:
+
+- `--cratis-surface-card`, `--cratis-surface-hover`, `--cratis-surface-border`
+- `--cratis-text-color`, `--cratis-text-color-secondary`
+- `--cratis-primary-color`, `--cratis-green-500`, `--cratis-red-500`
+
+Use `className` on Canvas roots and product CSS for shape-specific treatment. Components does not install PrimeIcons; library-owned actions use bundled React icon components.
diff --git a/Documentation/Canvas/toc.yml b/Documentation/Canvas/toc.yml
new file mode 100644
index 00000000..856f67d8
--- /dev/null
+++ b/Documentation/Canvas/toc.yml
@@ -0,0 +1,2 @@
+- name: Canvas reference
+  href: index.md
diff --git a/Documentation/CommandDialog/index.md b/Documentation/CommandDialog/index.md
index fed6fd3e..5feb1548 100644
--- a/Documentation/CommandDialog/index.md
+++ b/Documentation/CommandDialog/index.md
@@ -169,11 +169,12 @@ import { DialogInitialFocus } from '@cratis/components/Dialogs';
 
 ## Busy State
 
-`CommandDialog` automatically manages a busy state during command execution:
+`CommandDialog` automatically manages a busy state from the start of `onBeforeExecute` until command execution settles:
 
-- When the Ok/Yes button is clicked and command execution begins, all buttons are disabled and the primary button shows a loading spinner.
+- All buttons, including header close, are disabled and the primary button shows a loading spinner.
+- Escape and backdrop dismissal are ignored while work is in flight.
 - Once execution completes (success or failure), the buttons return to their normal state.
-- This prevents duplicate submissions and gives users clear visual feedback.
+- This prevents duplicate submissions and accidental dismissal while giving users clear visual feedback.
 
 ## Context
 
diff --git a/Documentation/DataPage/index.md b/Documentation/DataPage/index.md
index 505aa15a..cdf1511c 100644
--- a/Documentation/DataPage/index.md
+++ b/Documentation/DataPage/index.md
@@ -100,7 +100,9 @@ Selection is managed for you; to drive it yourself, pass `selection` and `onSele
 - `dataKey`: Unique key field for data items
 - `selection`: Currently selected item
 - `onSelectionChange`: Callback when the selection changes
-- `globalFilterFields`: Fields to include in global search
+- `globalFilterFields`: Fields to include in loaded-page search
+- `globalSearchPlaceholder`: Placeholder for the search input
+- `globalSearchAriaLabel`: Accessible name for the search input; localize independently from the placeholder
 - `defaultFilters`: Initial filter state, a `DataTableFilterMeta` (a `{ value, matchMode }` constraint per field)
 - `clientFiltering`: Deprecated compatibility prop; accepted but ignored because filtering is always scoped to the loaded query page
 - `tablePt` / `tableClassName`: Stable table-part attributes and root class
diff --git a/Documentation/DataTables/column-configuration.md b/Documentation/DataTables/column-configuration.md
index 47db0981..0856736c 100644
--- a/Documentation/DataTables/column-configuration.md
+++ b/Documentation/DataTables/column-configuration.md
@@ -42,6 +42,7 @@ Set `filter` and optionally:
 - `dataType`: `text`, `numeric`, `date`, or `boolean`
 - `showFilterMatchModes`
 - `filterLabels`
+- `filterPt`
 - `filterElement`
 
 ```tsx
@@ -55,12 +56,17 @@ Set `filter` and optionally:
         apply: 'Use filter',
         true: 'Active',
         false: 'Inactive',
+        matchModeAriaLabel: 'Comparison',
+        valueAriaLabel: (field) => `Value for ${field}`,
+        matchModeLabel: (_mode, defaultLabel) => defaultLabel,
     }}
 />
 ```
 
 A custom editor receives the draft value/mode and `onChange`, `onApply`, and `onClear` callbacks. Applying updates the table's `DataTableFilterMeta`; clearing removes the constraint.
 
+`filterPt` exposes `trigger`, `popover`, `menu`, `matchMode`, `input`, `actions`, `clear`, and `apply`. These are Cratis-owned parts; the popup/menu/actions also render `data-cratis-part='filter-popover'`, `filter-menu`, and `filter-actions`.
+
 Filtering affects the loaded page. For complete-result filtering, send the filter model as query arguments and filter before server paging.
 
 ## Custom matchers
diff --git a/Documentation/DataTables/data-table-for-observable-query.md b/Documentation/DataTables/data-table-for-observable-query.md
index ef41d140..b3a5bd24 100644
--- a/Documentation/DataTables/data-table-for-observable-query.md
+++ b/Documentation/DataTables/data-table-for-observable-query.md
@@ -51,7 +51,9 @@ Same as DataTableForQuery, but the query must extend `IObservableQueryFor`.
 - `dataKey`: Unique identifier field
 - `selection`: Currently selected row
 - `onSelectionChange`: Callback when selection changes
-- `globalFilterFields`: Fields to search in global filter
+- `globalFilterFields`: Fields searched on the loaded page
+- `globalSearchPlaceholder`: Search-input placeholder
+- `globalSearchAriaLabel`: Accessible search-input name; localize independently from the placeholder
 - `defaultFilters`: Initial filter configuration (a `DataTableFilterMeta`)
 - `clientFiltering`: Deprecated compatibility prop; accepted but ignored because filtering is always scoped to the loaded page
 - `paginatorClassName` / `paginatorAriaLabels`: styling and explicit localization overrides for the paginator; accessible names default from `CratisComponentsProvider` messages
diff --git a/Documentation/DataTables/data-table-for-query.md b/Documentation/DataTables/data-table-for-query.md
index f3cf6825..cbdc00ce 100644
--- a/Documentation/DataTables/data-table-for-query.md
+++ b/Documentation/DataTables/data-table-for-query.md
@@ -50,7 +50,9 @@ function MyTable() {
 - `dataKey`: Unique identifier field
 - `selection`: Currently selected row
 - `onSelectionChange`: Callback when selection changes
-- `globalFilterFields`: Fields to search in global filter
+- `globalFilterFields`: Fields searched on the loaded page
+- `globalSearchPlaceholder`: Search-input placeholder
+- `globalSearchAriaLabel`: Accessible search-input name; localize independently from the placeholder
 - `defaultFilters`: Initial filter configuration (a `DataTableFilterMeta`)
 - `clientFiltering`: Deprecated compatibility prop; accepted but ignored because filtering is always scoped to the loaded page
 - `paginatorClassName` / `paginatorAriaLabels`: styling and explicit localization overrides for the paginator; accessible names default from `CratisComponentsProvider` messages
diff --git a/Documentation/Dialogs/dialog.md b/Documentation/Dialogs/dialog.md
index da1c1755..d9dcfa40 100644
--- a/Documentation/Dialogs/dialog.md
+++ b/Documentation/Dialogs/dialog.md
@@ -83,7 +83,7 @@ const MyComponent = () => {
 - `contentStyle`: Custom content area style
 - `resizable`: Accepted for source compatibility; the viewport-bounded Cratis dialog has no resize handle. Existing code that passes it keeps compiling; it simply has no effect.
 - `isValid`: Enables or disables confirm actions (defaults to `true`)
-- `isBusy`: When `true`, disables all buttons and shows a loading spinner on the primary action button
+- `isBusy`: When `true`, disables all buttons, blocks Escape/backdrop dismissal, and shows a loading spinner on the primary action button
 - `initialFocus`: Where keyboard focus lands when the dialog opens (see below)
 - `okLabel`, `cancelLabel`, `yesLabel`, `noLabel`: Button labels. Footer icons are decorative and hidden from accessibility APIs, so each button's accessible name is exactly its configured label
 - `className`, `pt`, `ptOptions`, `unstyled`: Styling hooks forwarded to the
diff --git a/Documentation/Styling/pass-through.md b/Documentation/Styling/pass-through.md
index 86f8796b..ffde1552 100644
--- a/Documentation/Styling/pass-through.md
+++ b/Documentation/Styling/pass-through.md
@@ -32,6 +32,7 @@ They are documented separately because not every DOM part needs a `pt` key, and
 | `DropdownParts`                        | `root`, `input`, `select`, `trigger`, `value`, `clear`, `indicator`, `popover`, `listbox`, `option`, `filter`, `multiple`                                                              | wrapper, input/button, spans, popover/listbox/options, select |
 | `DatePickerInputPassThrough`           | `root`, `group`, `input`, `placeholder`, `segment`, `trigger`, `popover`, `dialog`, `calendar`, `header`, `heading`, `previous`, `next`, `grid`, `cell`, `buttonBar`, `today`, `clear` | divs, segmented field, buttons, calendar grid/cells           |
 | `DataTableParts`                       | `root`, `search`, `searchInput`, `tableContainer`, `table`, `head`, `headerRow`, `headerCell`, `body`, `row`, `cell`, `emptyRow`, `emptyCell`                                          | div/input/table sections/rows/cells                           |
+| `ColumnFilterMenuParts` (`Column.filterPt`) | `trigger`, `popover`, `menu`, `matchMode`, `input`, `actions`, `clear`, `apply`                                                                                             | button, overlay/menu, inputs, actions                         |
 | `TablePaginatorParts`                  | `root`, `range`, `info`, `first`, `previous`, `next`, `last`                                                                                                                           | navigation div, spans, and Button parts                       |
 | `StepperParts`                         | `root`, `list`, `step`, `header`, `number`, `title`, `separator`, `panels`, `panel`                                                                                                    | div, ordered list, list item, button, spans, section          |
 | `ToasterPassThrough`                   | `region`, `toast`, `icon`, `content`, `title`, `description`, `close`, `action`                                                                                                        | region/article/divs/spans/buttons                             |
@@ -70,7 +71,7 @@ Use the exact kebab-case value in CSS or tests:
 | Dialog         | `backdrop`, `positioner`, `root`, `header`, `title`, `close`, `content`, `footer`, `confirm`, `cancel`                                                                                          |
 | Dropdown       | `root`, `trigger`, `value`, `clear`, `indicator`, `filter`, `popover`, `listbox`, `option`, `multiple`                                                                                          |
 | DatePicker     | `root`, `group`, `input`, `placeholder`, `segment`, `trigger`, `popover`, `dialog`, `calendar`, `header`, `heading`, `previous`, `next`, `grid`, `cell`, `button-bar`, `today`, `clear`         |
-| DataTable      | `root`, `search`, `search-input`, `table-container`, `table`, `head`, `header-row`, `header-cell`, `header-content`, `sort`, `filter-trigger`, `body`, `row`, `cell`, `empty-row`, `empty-cell` |
+| DataTable      | `root`, `search`, `search-input`, `table-container`, `table`, `head`, `header-row`, `header-cell`, `header-content`, `sort`, `filter-trigger`, `filter-popover`, `filter-menu`, `filter-actions`, `body`, `row`, `cell`, `empty-row`, `empty-cell` |
 | TablePaginator | `root`, `range`, `info`; paginator buttons expose the documented Button parts                                                                                                                   |
 | Stepper        | `root`, `list`, `step`, `header`, `number`, `title`, `separator`, `panels`, `panel`                                                                                                             |
 | Toaster        | `region`, `toast`, `icon`, `content`, `title`, `description`, `action`, `close`                                                                                                                 |
diff --git a/Documentation/choosing-a-component.md b/Documentation/choosing-a-component.md
index c8f2d263..4fcc479d 100644
--- a/Documentation/choosing-a-component.md
+++ b/Documentation/choosing-a-component.md
@@ -37,6 +37,10 @@ If you're building a list-screen-with-actions from scratch, start with the
 [list screen recipe](./list-screen-with-actions.md), which composes `DataPage` with `CommandDialog`
 actions.
 
+## Spatial workspaces
+
+Use [`Canvas`](./Canvas/index.md) for a pan/zoom workspace containing positioned DOM or Pixi items, optional minimap/controls, notes, regions, or collaborative chat shapes. Canvas owns interaction and rendering primitives; the application still owns persistence and behavior through Arc commands, queries, and Chronicle read models.
+
 ## Putting it together
 
 A typical CRUD screen combines these: a `DataPage` lists the rows, a toolbar button opens a
diff --git a/Documentation/coming-from-primereact.md b/Documentation/coming-from-primereact.md
index c553e8b4..7d58759f 100644
--- a/Documentation/coming-from-primereact.md
+++ b/Documentation/coming-from-primereact.md
@@ -21,7 +21,9 @@ Use native HTML for simple application-owned controls that do not need Component
 
 ## Replace provider configuration
 
-Remove `PrimeReactProvider`, license keys, presets, renderer defaults, and global Prime pass-through configuration. Mount `CratisComponentsProvider` for locale, owned labels, and the optional toaster.
+If Components was the application's only Prime consumer, remove `PrimeReactProvider`, license keys, presets, renderer defaults, and global Prime pass-through configuration. Mount `CratisComponentsProvider` for locale, owned labels, and the optional toaster.
+
+If the application still imports Prime directly, keep its Prime provider, styling, and license configuration around those remaining surfaces while mounting `CratisComponentsProvider` independently for Components. Remove the Prime root only after the downstream direct imports are gone.
 
 ## Replace styling
 
diff --git a/Documentation/index.mdx b/Documentation/index.mdx
index c2b8573f..e93a70e6 100644
--- a/Documentation/index.mdx
+++ b/Documentation/index.mdx
@@ -85,6 +85,9 @@ import TopicHero from '@components/TopicHero.astro';
     <SimpleCard title='Dialogs' icon='open-book' link='/components/dialogs/'>
         Data-collection dialogs that return values without executing a command.
     </SimpleCard>
+    <SimpleCard title='Canvas' icon='seti:image' link='/components/canvas/'>
+        A pan/zoom workspace with measured items, controls, minimap, notes, regions, and chat shapes.
+    </SimpleCard>
 </CardGrid>
 
 Components renders [Arc's](/arc/) proxies over [Chronicle](/chronicle/) read models — see [Why developers choose Cratis](/why-cratis/) for the full stack.
diff --git a/Documentation/toc.yml b/Documentation/toc.yml
index e8cea84a..3a7f2ac2 100644
--- a/Documentation/toc.yml
+++ b/Documentation/toc.yml
@@ -24,6 +24,8 @@
   href: multi-step-form.md
 - name: A list screen with actions
   href: list-screen-with-actions.md
+- name: Canvas
+  href: Canvas/toc.yml
 - name: CommandDialog
   href: CommandDialog/toc.yml
 - name: CommandForm
diff --git a/Source/Canvas/Canvas.css b/Source/Canvas/Canvas.css
index b6686eab..66d1ab05 100644
--- a/Source/Canvas/Canvas.css
+++ b/Source/Canvas/Canvas.css
@@ -27,10 +27,10 @@
 /* Fallback for large boards where the LiquidGlass capture is too expensive: a frosted pill using the
    GPU-composited backdrop-filter instead of an html2canvas re-rasterization every frame. */
 .canvas-controls-glass--plain {
-    background: color-mix(in srgb, var(--surface-card) 78%, transparent);
+    background: color-mix(in srgb, var(--cratis-surface-card) 78%, transparent);
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
-    border: 1px solid var(--surface-border);
+    border: 1px solid var(--cratis-surface-border);
     border-radius: 999px;
 }
 
@@ -46,7 +46,7 @@
     display: inline-block;
     width: 1px;
     height: 20px;
-    background: var(--surface-border);
+    background: var(--cratis-surface-border);
     border-radius: 1px;
     margin-inline: 2px;
     flex-shrink: 0;
@@ -54,43 +54,43 @@
 
 /* ── Canvas control icon button ──────────────────────────────────────────── */
 .canvas-controls-icon-btn {
-    color: var(--text-color-secondary);
+    color: var(--cratis-text-color-secondary);
     background: transparent;
     border: none;
     transition: background 0.15s, color 0.15s;
 }
 
 .canvas-controls-icon-btn:hover {
-    background: var(--surface-100);
-    color: var(--text-color);
+    background: var(--cratis-surface-100);
+    color: var(--cratis-text-color);
 }
 
 .canvas-controls-icon-btn--active {
-    background: var(--surface-100);
-    color: var(--text-color);
+    background: var(--cratis-surface-100);
+    color: var(--cratis-text-color);
 }
 
 /* ── Canvas control zoom percentage button ───────────────────────────────── */
 .canvas-controls-zoom-btn {
-    color: var(--text-color-secondary);
+    color: var(--cratis-text-color-secondary);
     background: transparent;
     border: none;
     transition: background 0.15s, color 0.15s;
 }
 
 .canvas-controls-zoom-btn:hover {
-    background: var(--surface-100);
-    color: var(--text-color);
+    background: var(--cratis-surface-100);
+    color: var(--cratis-text-color);
 }
 
 /* ── Canvas minimap ──────────────────────────────────────────────────────── */
 .canvas-minimap {
-    background: var(--surface-50);
-    border: 1px solid var(--surface-border);
+    background: var(--cratis-surface-hover);
+    border: 1px solid var(--cratis-surface-border);
     box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
 }
 
 .canvas-minimap-viewport {
-    border: 2px solid var(--primary-color);
-    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
+    border: 2px solid var(--cratis-primary-color);
+    background: color-mix(in srgb, var(--cratis-primary-color) 12%, transparent);
 }
diff --git a/Source/Canvas/Canvas.tsx b/Source/Canvas/Canvas.tsx
index 043d7990..f8ab3615 100644
--- a/Source/Canvas/Canvas.tsx
+++ b/Source/Canvas/Canvas.tsx
@@ -42,106 +42,117 @@ interface WebKitGestureEvent extends Event {
     readonly clientY: number;
 }
 
+/** Measured world-space bounds for one registered {@link CanvasItem}. */
 export interface CanvasItemRegistryEntry {
-
+    /** World-space horizontal position. */
     x: number;
-
+    /** World-space vertical position. */
     y: number;
-
+    /** Measured width. */
     width: number;
-
+    /** Measured height. */
     height: number;
 }
 
+/** Registry contract used by {@link CanvasItem} to publish measured bounds. */
 export interface CanvasItemRegistryContextValue {
-
+    /** Adds or updates one measured item. */
     register: (id: string, entry: CanvasItemRegistryEntry) => void;
-
+    /** Removes one measured item. */
     unregister: (id: string) => void;
 }
 
+/** Context carrying the nearest Canvas item registry. */
 export const CanvasItemRegistryContext = React.createContext<CanvasItemRegistryContextValue | null>(null);
 
+/** Minimum data shape for an optional Pixi-rendered canvas item. */
 export interface CanvasItemData {
+    /** Stable item identity. */
     id: string;
+    /** World-space horizontal position. */
     x: number;
+    /** World-space vertical position. */
     y: number;
 }
 
+/** Pixi objects supplied after the Canvas renderer initializes. */
 export interface CanvasContext {
+    /** Pixi application owned by the Canvas. */
     app: PIXI.Application;
+    /** Pixi world container receiving rendered items. */
     world: PIXI.Container;
 }
 
+/** Imperative camera and measurement operations exposed by {@link Canvas}. */
 export interface CanvasHandle {
-
+    /** Smoothly centers a world point. */
     smoothPanToWorld(worldX: number, worldY: number, durationMs?: number): void;
-
-    /** Smoothly pans the world point to the viewport center while simultaneously animating to the target zoom. */
-    smoothPanZoomToWorld(worldX: number, worldY: number, targetZoom?: number, durationMs?: number): void;
-
+    /** Smoothly centers a world point while animating to a target zoom. */
+    smoothPanZoomToWorld(
+        worldX: number,
+        worldY: number,
+        targetZoom?: number,
+        durationMs?: number,
+    ): void;
+    /** Returns the current viewport rectangle, or `null` before mounting. */
     getContainerRect(): DOMRect | null;
-
-    /** The world-space bounds every registered CanvasItem currently occupies, as measured on screen. */
+    /** Returns world-space bounds for every registered CanvasItem. */
     getItemBounds(): MinimapItem[];
 }
 
+/** Props for the pan, zoom, item, minimap, and control surface. */
 export interface CanvasProps<T extends CanvasItemData = CanvasItemData> {
-
+    /** DOM content positioned inside the transformed world. */
     children?: React.ReactNode;
-
+    /** Optional Pixi-rendered item data. */
     items?: T[];
-
+    /** Builds a Pixi display object for one item. */
     renderItem?: (item: T) => PIXI.Container;
-
+    /** Receives pointer activation for a Pixi-rendered item. */
     onItemPointerDown?: (item: T, event: PIXI.FederatedPointerEvent) => void;
-
+    /** Receives the initialized Pixi application and world. */
     onReady?: (context: CanvasContext) => void;
-
+    /** Reports every camera transform change. */
     onTransformChange?: (zoom: number, pan: { x: number; y: number }) => void;
-
+    /** Initial zoom factor. Defaults to `1`. */
     initialZoom?: number;
-
+    /** Initial viewport translation. Defaults to `{ x: 0, y: 0 }`. */
     initialPan?: { x: number; y: number };
-
+    /** Minimum zoom factor. Defaults to `0.1`. */
     minZoom?: number;
-
+    /** Maximum zoom factor. Defaults to `5`. */
     maxZoom?: number;
-
+    /** Whether integrated zoom controls render. Defaults to `true`. */
     showControls?: boolean;
-
+    /** Whether controls expose the minimap toggle. Defaults to `false`. */
     showMinimap?: boolean;
-
+    /** World width represented by the minimap. */
     minimapWorldWidth?: number;
-
+    /** World height represented by the minimap. */
     minimapWorldHeight?: number;
-
+    /** Explicit minimap item rectangles; measured CanvasItem bounds are used otherwise. */
     minimapItems?: MinimapItem[];
-
+    /** Edge used by the integrated control bar. Defaults to `'bottom-left'`. */
     controlsPlacement?: 'bottom-left' | 'bottom-right';
+    /** Extra class name for the Canvas root. */
     className?: string;
+    /** Inline style for the Canvas root. */
     style?: React.CSSProperties;
-
-    /** Invoked when the controls' help button is clicked. When omitted, the help button does nothing. */
+    /** Invoked when the optional help action is activated. */
     onHelp?: () => void;
-    /** Tooltip for the controls' help button. */
+    /** Accessible label and tooltip for the help action. */
     helpTitle?: string;
-
-    /** Disables the LiquidGlass surface behind the control pill (falls back to a cheap backdrop-filter).
-     *  Large canvases set this because the per-frame glass capture stalls pan/zoom. */
+    /** Uses a low-cost CSS frosted pill instead of a consumer-supplied glass surface. */
     disableControlsGlass?: boolean;
-
+    /** Receives imperative camera and measurement operations. */
     onHandleReady?: (handle: CanvasHandle) => void;
-
-    /** Renders an inert preview: content can still be panned and zoomed, but nothing on it can be clicked,
-     *  dragged, or dropped into — a transparent cover absorbs every pointer event before it reaches the
-     *  board content, so no leaf component needs its own read-only handling. */
+    /** Keeps pan/zoom available while absorbing interaction with canvas content. */
     readOnly?: boolean;
-
-    /** Whether a left-button mouse or pen drag on the empty background pans the board. Boards that claim
-     *  that gesture for themselves (rubber-band selection) set this to false; the pointer events then
-     *  bubble up untouched. Wheel/trackpad panning, middle-drag panning, and one-finger touch panning are
-     *  never affected — turning this off must not leave a tablet unable to move the board. */
+    /**
+     * Whether mouse/pen drag on empty background pans the board. Disable when
+     * the product owns that gesture for selection; wheel, middle-button, and
+     * touch panning remain available.
+     */
     backgroundDragPans?: boolean;
 }
 
diff --git a/Source/Canvas/CanvasControls.tsx b/Source/Canvas/CanvasControls.tsx
index 1b29825c..73656930 100644
--- a/Source/Canvas/CanvasControls.tsx
+++ b/Source/Canvas/CanvasControls.tsx
@@ -4,6 +4,7 @@
 import React, { useEffect, useState } from 'react';
 import { CONTENT_ATTR } from './glassAttributes';
 import { CanvasMinimap, CanvasMinimapHandle, MinimapItem } from './CanvasMinimap';
+import { FaCircleQuestion, FaMap, FaMinus, FaPlus } from 'react-icons/fa6';
 
 // How often the zoom-percentage label re-reads the live zoom. The canvas must not re-render during
 // gestures, so the label polls the ref-backed value on a slow interval instead of receiving state.
@@ -25,22 +26,33 @@ export interface CanvasControlsLabels {
     help?: string;
 }
 
+/** Props for standalone or Canvas-integrated zoom/minimap/help controls. */
 export interface CanvasControlsProps {
     /** Reads the live zoom factor — polled slowly so gestures never re-render the canvas. */
     getZoom: () => number;
+    /** Increases the Canvas zoom. */
     onZoomIn: () => void;
+    /** Decreases the Canvas zoom. */
     onZoomOut: () => void;
+    /** Restores the product's default zoom. */
     onZoomReset: () => void;
 
+    /** Whether the minimap toggle is available. */
     showMinimapToggle?: boolean;
 
+    /** Ref used to update the standalone minimap viewport. */
     minimapRef?: React.RefObject<CanvasMinimapHandle | null>;
+    /** World width represented by the minimap. */
     minimapWorldWidth?: number;
+    /** World height represented by the minimap. */
     minimapWorldHeight?: number;
 
+    /** Item rectangles rendered by the minimap. */
     minimapItems?: MinimapItem[];
+    /** Requests a Canvas pan from minimap interaction. */
     onMinimapPan?: (pan: { x: number; y: number }) => void;
 
+    /** Control-bar edge. Defaults to `'bottom-left'`. */
     placement?: 'bottom-left' | 'bottom-right';
 
     /** Invoked when the help button is clicked. When omitted, the help button is not rendered. */
@@ -70,6 +82,7 @@ export interface CanvasControlsProps {
     disableGlass?: boolean;
 }
 
+/** Zoom, minimap, and optional help controls for a {@link Canvas}. */
 export const CanvasControls: React.FC<CanvasControlsProps> = ({
     getZoom,
     onZoomIn,
@@ -140,29 +153,33 @@ export const CanvasControls: React.FC<CanvasControlsProps> = ({
                 {showMinimapToggle && (
                     <>
                         <button
+                            type='button'
                             title={labels?.toggleMinimap ?? 'Toggle minimap'}
+                            aria-label={labels?.toggleMinimap ?? 'Toggle minimap'}
                             className={`canvas-controls-icon-btn flex items-center justify-center w-9 h-9 rounded-lg cursor-pointer select-none${minimapOpen ? ' canvas-controls-icon-btn--active' : ''}`}
                             onClick={() => setMinimapOpen(v => !v)}
                         >
-                            <i className='pi pi-th-large text-base' />
+                            <FaMap className='text-base' aria-hidden='true' />
                         </button>
                         <span className='canvas-controls-separator' />
                     </>
                 )}
 
                 {/* Zoom controls */}
-                <button title={labels?.zoomOut ?? 'Zoom Out'} className='canvas-controls-icon-btn flex items-center justify-center w-9 h-9 rounded-lg cursor-pointer select-none' onClick={() => { onZoomOut(); refreshDisplayZoom(); }}>
-                    <i className='pi pi-minus text-base' />
+                <button type='button' title={labels?.zoomOut ?? 'Zoom Out'} aria-label={labels?.zoomOut ?? 'Zoom Out'} className='canvas-controls-icon-btn flex items-center justify-center w-9 h-9 rounded-lg cursor-pointer select-none' onClick={() => { onZoomOut(); refreshDisplayZoom(); }}>
+                    <FaMinus className='text-base' aria-hidden='true' />
                 </button>
                 <button
+                    type='button'
                     title={labels?.resetZoom ?? 'Reset Zoom'}
+                    aria-label={labels?.resetZoom ?? 'Reset Zoom'}
                     onClick={() => { onZoomReset(); refreshDisplayZoom(); }}
                     className='canvas-controls-zoom-btn flex items-center justify-center h-9 min-w-[3.25rem] px-1.5 rounded-lg text-xs font-semibold cursor-pointer select-none tabular-nums'
                 >
                     {Math.round(displayZoom * 100)}%
                 </button>
-                <button title={labels?.zoomIn ?? 'Zoom In'} className='canvas-controls-icon-btn flex items-center justify-center w-9 h-9 rounded-lg cursor-pointer select-none' onClick={() => { onZoomIn(); refreshDisplayZoom(); }}>
-                    <i className='pi pi-plus text-base' />
+                <button type='button' title={labels?.zoomIn ?? 'Zoom In'} aria-label={labels?.zoomIn ?? 'Zoom In'} className='canvas-controls-icon-btn flex items-center justify-center w-9 h-9 rounded-lg cursor-pointer select-none' onClick={() => { onZoomIn(); refreshDisplayZoom(); }}>
+                    <FaPlus className='text-base' aria-hidden='true' />
                 </button>
 
                 {/* Help - only where there is something to explain; a button that does nothing is worse than none. */}
@@ -170,11 +187,13 @@ export const CanvasControls: React.FC<CanvasControlsProps> = ({
                     <>
                         <span className='canvas-controls-separator' />
                         <button
+                            type='button'
                             title={helpTitle ?? labels?.help ?? 'Help'}
+                            aria-label={helpTitle ?? labels?.help ?? 'Help'}
                             className='canvas-controls-icon-btn flex items-center justify-center w-9 h-9 rounded-lg cursor-pointer select-none'
                             onClick={onHelp}
                         >
-                            <i className='pi pi-question-circle text-base' />
+                            <FaCircleQuestion className='text-base' aria-hidden='true' />
                         </button>
                     </>
                 )}
diff --git a/Source/Canvas/CanvasItem.tsx b/Source/Canvas/CanvasItem.tsx
index 567fa52b..70b4ba26 100644
--- a/Source/Canvas/CanvasItem.tsx
+++ b/Source/Canvas/CanvasItem.tsx
@@ -4,10 +4,11 @@
 import React, { useContext, useEffect, useId, useRef, useState } from 'react';
 import { CanvasItemRegistryContext } from './Canvas';
 
+/** Props for a measured DOM item positioned in Canvas world space. */
 export interface CanvasItemProps {
-
+    /** World-space horizontal position. */
     x: number;
-
+    /** World-space vertical position. */
     y: number;
 
     /**
@@ -19,7 +20,9 @@ export interface CanvasItemProps {
      */
     zIndex?: number;
 
+    /** Reports measured size changes. */
     onSize?: (width: number, height: number) => void;
+    /** Item content. */
     children: React.ReactNode;
 }
 
diff --git a/Source/Canvas/CanvasMinimap.tsx b/Source/Canvas/CanvasMinimap.tsx
index c0400f7f..49e57bf9 100644
--- a/Source/Canvas/CanvasMinimap.tsx
+++ b/Source/Canvas/CanvasMinimap.tsx
@@ -8,21 +8,23 @@ const MINIMAP_HEIGHT = 120;
 const DEFAULT_WORLD_WIDTH = 4000;
 const DEFAULT_WORLD_HEIGHT = 3000;
 
+/** One world-space rectangle rendered in a Canvas minimap. */
 export interface MinimapItem {
-
+    /** World-space horizontal position. */
     x: number;
-
+    /** World-space vertical position. */
     y: number;
-
+    /** World-space width. */
     width: number;
-
+    /** World-space height. */
     height: number;
-
+    /** Optional product color for the rectangle. */
     color?: string;
 }
 
+/** Imperative viewport update exposed by {@link CanvasMinimap}. */
 export interface CanvasMinimapHandle {
-
+    /** Updates the visible viewport rectangle from current Canvas camera state. */
     update: (
         pan: { x: number; y: number },
         zoom: number,
@@ -31,14 +33,15 @@ export interface CanvasMinimapHandle {
     ) => void;
 }
 
+/** Props for the standalone Canvas minimap. */
 export interface CanvasMinimapProps {
-
+    /** Represented world width. Defaults to `4000`. */
     worldWidth?: number;
-
+    /** Represented world height. Defaults to `3000`. */
     worldHeight?: number;
-
+    /** World-space item rectangles. */
     items?: MinimapItem[];
-
+    /** Requests a Canvas pan when the minimap is clicked or dragged. */
     onRequestPan?: (pan: { x: number; y: number }) => void;
 }
 
@@ -148,7 +151,7 @@ export const CanvasMinimap = forwardRef<CanvasMinimapHandle, CanvasMinimapProps>
                     style={{
                         position: 'absolute',
                         inset: 0,
-                        backgroundImage: 'radial-gradient(circle, var(--surface-200) 1px, transparent 1px)',
+                        backgroundImage: 'radial-gradient(circle, var(--cratis-surface-border) 1px, transparent 1px)',
                         backgroundSize: '10px 10px',
                         pointerEvents: 'none',
                     }}
@@ -165,7 +168,9 @@ export const CanvasMinimap = forwardRef<CanvasMinimapHandle, CanvasMinimapProps>
                             top: item.y * scaleYConst,
                             width: Math.max(2, item.width * scaleXConst),
                             height: Math.max(2, item.height * scaleYConst),
-                            background: item.color ?? 'rgba(255, 255, 255, 0.25)',
+                            background:
+                                item.color ??
+                                'color-mix(in srgb, var(--cratis-text-color) 25%, transparent)',
                             borderRadius: 2,
                             pointerEvents: 'none',
                         }}
diff --git a/Source/Canvas/CanvasOverlay.tsx b/Source/Canvas/CanvasOverlay.tsx
index 71819d06..20cbde2d 100644
--- a/Source/Canvas/CanvasOverlay.tsx
+++ b/Source/Canvas/CanvasOverlay.tsx
@@ -1,12 +1,25 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { ReactNode } from 'react';
+import { useSyncExternalStore, type ReactNode } from 'react';
 import { createPortal } from 'react-dom';
 
+/** Props for a Canvas overlay portaled to the browser document body. */
 export interface CanvasOverlayProps {
+    /** Overlay content; omitted during SSR and the first hydration render. */
     children: ReactNode;
 }
 
-export const CanvasOverlay = ({ children }: CanvasOverlayProps) =>
-    createPortal(children, document.body);
+const subscribeToBrowserEnvironment = () => () => undefined;
+const useIsBrowser = () =>
+    useSyncExternalStore(
+        subscribeToBrowserEnvironment,
+        () => true,
+        () => false,
+    );
+
+/** A body-level overlay that stays empty during SSR and the first hydration render. */
+export const CanvasOverlay = ({ children }: CanvasOverlayProps) => {
+    const isBrowser = useIsBrowser();
+    return isBrowser ? createPortal(children, document.body) : null;
+};
diff --git a/Source/Canvas/for_CanvasOverlay/when_rendering_on_the_server.tsx b/Source/Canvas/for_CanvasOverlay/when_rendering_on_the_server.tsx
new file mode 100644
index 00000000..9f0f13e3
--- /dev/null
+++ b/Source/Canvas/for_CanvasOverlay/when_rendering_on_the_server.tsx
@@ -0,0 +1,19 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { expect } from 'chai';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, it } from 'vitest';
+import { CanvasOverlay } from '../CanvasOverlay';
+
+describe('when rendering on the server', () => {
+    it('should render an empty hydration-safe placeholder without accessing document', () => {
+        expect(
+            renderToStaticMarkup(
+                <CanvasOverlay>
+                    <div>Overlay</div>
+                </CanvasOverlay>,
+            ),
+        ).to.equal('');
+    });
+});
diff --git a/Source/Canvas/shapes/ChatBubble/Chat.tsx b/Source/Canvas/shapes/ChatBubble/Chat.tsx
index 8a9c7601..107ebbba 100644
--- a/Source/Canvas/shapes/ChatBubble/Chat.tsx
+++ b/Source/Canvas/shapes/ChatBubble/Chat.tsx
@@ -189,6 +189,7 @@ export const Chat: React.FC<ChatProps> = ({
                 <div className='chat-panel-header'>
                     <span className='chat-panel-title'>{resolvedTitle}</span>
                     <button
+                        type='button'
                         className='chat-panel-close'
                         onClick={onClose}
                         title={labels?.close ?? 'Close'}
diff --git a/Source/Canvas/shapes/ChatBubble/ChatBubble.tsx b/Source/Canvas/shapes/ChatBubble/ChatBubble.tsx
index a224117a..7e4dec0f 100644
--- a/Source/Canvas/shapes/ChatBubble/ChatBubble.tsx
+++ b/Source/Canvas/shapes/ChatBubble/ChatBubble.tsx
@@ -1,7 +1,8 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import React, { useEffect, useRef, useState } from 'react';
+import type React from 'react';
+import { useEffect, useRef, useState } from 'react';
 import type { Guid } from '@cratis/fundamentals';
 import { PersonAvatarCircle, getAvatarColor, type BuildAvatarUrlParams } from './Avatar';
 
@@ -101,7 +102,7 @@ export const ChatBubble: React.FC<ChatBubbleProps> = ({
                     height: size,
                     borderRadius: '50%',
                     boxShadow: selected
-                        ? `inset 0 0 0 3px var(--primary-color), 0 4px 12px rgba(0, 0, 0, 0.22)`
+                        ? `inset 0 0 0 3px var(--cratis-primary-color), 0 4px 12px rgba(0, 0, 0, 0.22)`
                         : '0 4px 12px rgba(0, 0, 0, 0.22)',
                     position: 'relative',
                 }}
@@ -149,8 +150,8 @@ export const ChatBubble: React.FC<ChatBubbleProps> = ({
                         marginLeft: 14,
                         transform: 'translateY(-50%)',
                         width: 224,
-                        background: 'var(--surface-card)',
-                        border: '1px solid var(--surface-border)',
+                        background: 'var(--cratis-surface-card)',
+                        border: '1px solid var(--cratis-surface-border)',
                         borderRadius: 10,
                         boxShadow: '0 8px 24px rgba(0, 0, 0, 0.14)',
                         padding: '10px 12px',
@@ -167,20 +168,20 @@ export const ChatBubble: React.FC<ChatBubbleProps> = ({
                     {/* Text content */}
                     <div style={{ flex: 1, minWidth: 0 }}>
                         <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 3, flexWrap: 'wrap' }}>
-                            <span style={{ ...FONT, fontSize: 12, fontWeight: 600, color: 'var(--text-color)' }}>
+                            <span style={{ ...FONT, fontSize: 12, fontWeight: 600, color: 'var(--cratis-text-color)' }}>
                                 {authorName.length > PREVIEW_AUTHOR_NAME_MAX_LENGTH ? `${authorName.slice(0, PREVIEW_AUTHOR_NAME_MAX_LENGTH)}…` : authorName}
                             </span>
                             {previewTimestamp && (
-                                <span style={{ ...FONT, fontSize: 10, color: 'var(--text-color-secondary)' }}>
+                                <span style={{ ...FONT, fontSize: 10, color: 'var(--cratis-text-color-secondary)' }}>
                                     {formatTimestamp(previewTimestamp)}
                                 </span>
                             )}
                         </div>
-                        <p style={{ ...FONT, fontSize: 11, color: 'var(--text-color)', margin: '0 0 6px', lineHeight: 1.4 }}>
+                        <p style={{ ...FONT, fontSize: 11, color: 'var(--cratis-text-color)', margin: '0 0 6px', lineHeight: 1.4 } }>
                             {previewMessage ? (previewMessage.length > PREVIEW_MESSAGE_MAX_LENGTH ? `${previewMessage.slice(0, PREVIEW_MESSAGE_MAX_LENGTH)}…` : previewMessage) : 'No messages yet'}
                         </p>
                         {replyCount !== undefined && replyCount > 0 && (
-                            <span style={{ ...FONT, fontSize: 10, color: 'var(--primary-color)' }}>
+                            <span style={{ ...FONT, fontSize: 10, color: 'var(--cratis-primary-color)' }}>
                                 {replyCount === 1 ? '1 reply' : `${replyCount} replies`}
                             </span>
                         )}
diff --git a/Source/Canvas/shapes/ChatBubble/ChatComposer.tsx b/Source/Canvas/shapes/ChatBubble/ChatComposer.tsx
index 3b4047af..42abdc76 100644
--- a/Source/Canvas/shapes/ChatBubble/ChatComposer.tsx
+++ b/Source/Canvas/shapes/ChatBubble/ChatComposer.tsx
@@ -188,6 +188,7 @@ export const ChatComposer = forwardRef<ChatComposerHandle, ChatComposerProps>(({
                 ☺
             </button>
             <button
+                type='button'
                 className='chat-composer__send'
                 onClick={send}
                 disabled={!draft.text.trim()}
diff --git a/Source/Canvas/shapes/ChatBubble/ChatMessageBubble.tsx b/Source/Canvas/shapes/ChatBubble/ChatMessageBubble.tsx
index 60a139e9..edde69f6 100644
--- a/Source/Canvas/shapes/ChatBubble/ChatMessageBubble.tsx
+++ b/Source/Canvas/shapes/ChatBubble/ChatMessageBubble.tsx
@@ -11,6 +11,7 @@ import { findOwnReaction } from './findOwnReaction';
 import { MessageReactions } from './MessageReactions';
 import { ReactionPicker, type ReactionPickerLabels } from './ReactionPicker';
 import { reactionsExcludingUser } from './reactionsExcludingUser';
+import { FaBolt, FaReply } from 'react-icons/fa6';
 
 /** Overrides for the bubble's own labels. Any field left unset falls back to a literal English
  *  default. `{emoji}`/`{name}` placeholders are substituted by the component. */
@@ -128,7 +129,7 @@ export const ChatMessageBubble = ({ message, showAuthor, showTimestamp, formatte
                                     aria-label={(labels?.quickReplyTo ?? 'Reply to {name}').replace('{name}', message.authorName)}
                                     onClick={() => onQuickReply(message.authorName)}
                                 >
-                                    <i className='pi pi-reply' aria-hidden='true' />
+                                    <FaReply aria-hidden='true' />
                                 </button>
                             )}
                             {onAct && (
@@ -139,7 +140,7 @@ export const ChatMessageBubble = ({ message, showAuthor, showTimestamp, formatte
                                     aria-label={labels?.convertToAction ?? 'Turn into an action'}
                                     onClick={() => onAct(message.id)}
                                 >
-                                    <i className='pi pi-bolt' aria-hidden='true' />
+                                    <FaBolt aria-hidden='true' />
                                 </button>
                             )}
                         </div>
diff --git a/Source/Canvas/shapes/ChatBubble/FailedReply.css b/Source/Canvas/shapes/ChatBubble/FailedReply.css
index 702f75fe..5b0e0eb0 100644
--- a/Source/Canvas/shapes/ChatBubble/FailedReply.css
+++ b/Source/Canvas/shapes/ChatBubble/FailedReply.css
@@ -55,8 +55,8 @@
     margin: 0;
     padding: 12px;
     border-radius: 6px;
-    background: var(--surface-100);
-    color: var(--text-color);
+    background: var(--cratis-surface-100);
+    color: var(--cratis-text-color);
     font-size: 12px;
     line-height: 1.5;
     white-space: pre-wrap;
diff --git a/Source/Canvas/shapes/ChatBubble/FailedReply.tsx b/Source/Canvas/shapes/ChatBubble/FailedReply.tsx
index b5bb09b5..e97c3194 100644
--- a/Source/Canvas/shapes/ChatBubble/FailedReply.tsx
+++ b/Source/Canvas/shapes/ChatBubble/FailedReply.tsx
@@ -5,6 +5,7 @@ import { useState } from 'react';
 import { DialogButtons } from '@cratis/arc.react/dialogs';
 import { Dialog } from '../../../Dialogs/Dialog';
 import type { ChatMessage } from './ChatMessage';
+import { FaTriangleExclamation } from 'react-icons/fa6';
 
 /** The pieces of a would-be issue report, handed to {@link FailedReplyProps.buildReportUrl}. */
 export interface FailedReplyReportDetails {
@@ -82,7 +83,10 @@ export const FailedReply = ({ message, buildReportUrl, labels }: FailedReplyProp
     return (
         <div className='chat-failed-reply' aria-live='polite'>
             <div className='chat-failed-reply__line'>
-                <i className='pi pi-exclamation-triangle chat-failed-reply__icon' aria-hidden='true' />
+                <FaTriangleExclamation
+                    className='chat-failed-reply__icon'
+                    aria-hidden='true'
+                />
                 <span className='chat-failed-reply__text'>{withName(labels?.replyFailed ?? '{name} could not answer')}</span>
             </div>
             <div className='chat-failed-reply__actions'>
diff --git a/Source/Canvas/shapes/Note/Note.tsx b/Source/Canvas/shapes/Note/Note.tsx
index b5b5f2c3..30d6630b 100644
--- a/Source/Canvas/shapes/Note/Note.tsx
+++ b/Source/Canvas/shapes/Note/Note.tsx
@@ -3,6 +3,7 @@
 
 import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { whenNoteFontReady } from './noteFont';
+import { FaPlus } from 'react-icons/fa6';
 
 const MIN_SIZE = 80;
 // How small the fitted text is allowed to get. Notes live on a canvas that zooms, so text too small to
@@ -14,18 +15,19 @@ const MAX_FONT_SIZE = 120;
 const PADDING = 12;
 const LINE_HEIGHT_RATIO = 1.4;
 
+/** Controlled data rendered by {@link Note}. */
 export interface NoteData {
-
+    /** Stable note identity. */
     id: string;
-
+    /** World-space horizontal position. */
     x: number;
-
+    /** World-space vertical position. */
     y: number;
-
+    /** Note width. */
     width: number;
-
+    /** Note height. */
     height: number;
-
+    /** Editable note text. */
     text: string;
 }
 
@@ -101,10 +103,11 @@ const RESIZE_CURSORS: Record<HandleKey, string> = {
     s: 's-resize',   sw: 'sw-resize', w: 'w-resize',
 };
 
+/** Props for a fully controlled movable, resizable, editable Canvas note. */
 export interface NoteProps {
-
+    /** Current note data. */
     note: NoteData;
-
+    /** Whether selection handles are visible. */
     selected: boolean;
 
     /**
@@ -113,14 +116,15 @@ export interface NoteProps {
      */
     onSelect: (id: string, additive: boolean) => void;
 
+    /** Reports drag movement. */
     onMove: (id: string, x: number, y: number) => void;
-
+    /** Reports drag completion. */
     onMoveEnd?: (id: string) => void;
-
+    /** Reports resize movement and the resulting bounds. */
     onResize: (id: string, x: number, y: number, width: number, height: number) => void;
-
+    /** Reports resize completion. */
     onResizeEnd?: (id: string) => void;
-
+    /** Reports committed text edits. */
     onTextChange: (id: string, text: string) => void;
 
     /**
@@ -403,7 +407,7 @@ export const Note: React.FC<NoteProps> = ({ note, selected, onSelect, onMove, on
                     onClick={handleExpand}
                     onPointerDown={event => event.stopPropagation()}
                 >
-                    <i className='pi pi-plus' />
+                    <FaPlus aria-hidden='true' />
                 </button>
             )}
 
diff --git a/Source/Canvas/shapes/Region/Region.tsx b/Source/Canvas/shapes/Region/Region.tsx
index 40de279e..6c10e0b8 100644
--- a/Source/Canvas/shapes/Region/Region.tsx
+++ b/Source/Canvas/shapes/Region/Region.tsx
@@ -25,25 +25,27 @@ const RESIZE_CURSORS: Record<HandleKey, string> = {
     s: 's-resize',   sw: 'sw-resize', w: 'w-resize',
 };
 
+/** Controlled data rendered by {@link Region}. */
 export interface RegionData {
-
+    /** Stable region identity. */
     id: string;
-
+    /** World-space horizontal position. */
     x: number;
-
+    /** World-space vertical position. */
     y: number;
-
+    /** Region width. */
     width: number;
-
+    /** Region height. */
     height: number;
-
+    /** Editable region label. */
     name: string;
 }
 
+/** Props for a fully controlled movable, resizable, labeled Canvas region. */
 export interface RegionProps {
-
+    /** Current region data. */
     region: RegionData;
-
+    /** Whether resize handles are visible. */
     selected: boolean;
 
     /**
@@ -52,14 +54,15 @@ export interface RegionProps {
      */
     onSelect: (id: string, additive: boolean) => void;
 
+    /** Reports drag movement. */
     onMove: (id: string, x: number, y: number) => void;
-
+    /** Reports drag completion. */
     onMoveEnd?: (id: string) => void;
-
+    /** Reports resize movement and resulting bounds. */
     onResize: (id: string, x: number, y: number, width: number, height: number) => void;
-
+    /** Reports resize completion. */
     onResizeEnd?: (id: string) => void;
-
+    /** Reports committed label edits. */
     onNameChange: (id: string, name: string) => void;
 
     /**
diff --git a/Source/CommandDialog/CommandDialog.tsx b/Source/CommandDialog/CommandDialog.tsx
index 77c95c14..e6c2b912 100644
--- a/Source/CommandDialog/CommandDialog.tsx
+++ b/Source/CommandDialog/CommandDialog.tsx
@@ -116,15 +116,18 @@ const CommandDialogWrapper = <TCommand extends object, TResponse = object>({
     const [isBusy, setIsBusy] = useState(false);
 
     const handleConfirm = async () => {
-        if (onBeforeExecute) {
-            const applied = applyBeforeExecute(onBeforeExecute, commandInstance);
-            setCommandValues(applied instanceof Promise ? await applied : applied);
-        }
-
         setIsBusy(true);
         let result: ICommandResult<TResponse>;
         try {
-            result = await (commandInstance as unknown as { execute: () => Promise<ICommandResult<TResponse>> }).execute();
+            if (onBeforeExecute) {
+                const applied = applyBeforeExecute(onBeforeExecute, commandInstance);
+                setCommandValues(applied instanceof Promise ? await applied : applied);
+            }
+            result = await (
+                commandInstance as unknown as {
+                    execute: () => Promise<ICommandResult<TResponse>>;
+                }
+            ).execute();
         } finally {
             setIsBusy(false);
         }
diff --git a/Source/CommandDialog/CommandStepper.css b/Source/CommandDialog/CommandStepper.css
index 8c2bfe9b..e11f2542 100644
--- a/Source/CommandDialog/CommandStepper.css
+++ b/Source/CommandDialog/CommandStepper.css
@@ -64,6 +64,16 @@
     background: var(--cratis-primary-color);
     color: var(--cratis-primary-color-text);
 }
+.cratis-command-stepper__step[data-visited='true']:not([data-invalid='true'])
+    .cratis-command-stepper__number {
+    border-color: var(--cratis-green-500);
+    color: var(--cratis-green-500);
+}
+.cratis-command-stepper__step[data-invalid='true'] .cratis-command-stepper__number {
+    border-color: var(--cratis-red-500);
+    background: var(--cratis-surface-card);
+    color: var(--cratis-red-500);
+}
 .cratis-command-stepper__title {
     overflow: hidden;
     text-overflow: ellipsis;
diff --git a/Source/CommandDialog/CommandStepper.tsx b/Source/CommandDialog/CommandStepper.tsx
index 42daf959..da60a470 100644
--- a/Source/CommandDialog/CommandStepper.tsx
+++ b/Source/CommandDialog/CommandStepper.tsx
@@ -6,7 +6,6 @@ import React, {
     useMemo,
     useState,
     type ButtonHTMLAttributes,
-    type CSSProperties,
     type HTMLAttributes,
 } from 'react';
 import { Button } from '../Common/Button';
@@ -46,14 +45,23 @@ export type StepperHeaderPosition = 'top' | 'bottom';
  * content, and header position are implemented over stable Cratis parts.
  */
 export interface StepperParts {
+    /** Stepper composition root. */
     root?: HTMLAttributes<HTMLDivElement>;
+    /** Ordered step-header list. */
     list?: HTMLAttributes<HTMLOListElement>;
+    /** One step list item and its state attributes. */
     step?: HTMLAttributes<HTMLLIElement>;
+    /** Interactive step-header button. */
     header?: ButtonHTMLAttributes<HTMLButtonElement>;
+    /** Step number/status indicator. */
     number?: HTMLAttributes<HTMLSpanElement>;
+    /** Step title. */
     title?: HTMLAttributes<HTMLSpanElement>;
+    /** Visual separator between steps. */
     separator?: HTMLAttributes<HTMLSpanElement>;
+    /** Panels wrapper. */
     panels?: HTMLAttributes<HTMLDivElement>;
+    /** Active step panel. */
     panel?: HTMLAttributes<HTMLElement>;
 }
 
@@ -266,19 +274,6 @@ export const CommandStepperContent = ({
     const isCurrentStepInvalid = stepErrors[currentStep] ?? false;
     const hasAnyStepErrors = stepErrors.some((hasError) => hasError);
 
-    // The per-step number indicator paints red when a visited step still has a
-    // field error and green once a step has been visited without errors — a
-    // traffic-light status marker that is intentionally theme-independent, so
-    // the literal color names are appropriate here (and let specs assert on the
-    // computed background reliably).
-    const numberStyle = (index: number): CSSProperties | undefined => {
-        const hasError = stepErrors[index] ?? false;
-        const isVisited = visitedSteps.has(index);
-        const backgroundColor = hasError ? 'red' : isVisited ? 'green' : undefined;
-        if (!backgroundColor) return undefined;
-        return { backgroundColor, color: 'var(--cratis-primary-color-text)' };
-    };
-
     const handleStepChange = (index: number) => {
         onChangeStep?.({ index });
 
@@ -350,7 +345,7 @@ export const CommandStepperContent = ({
                             ]
                                 .filter(Boolean)
                                 .join(' ')}
-                            style={{ ...pt?.number?.style, ...numberStyle(index) }}
+                            style={pt?.number?.style}
                             data-cratis-part='number'
                             data-part='number'
                         >
diff --git a/Source/CommandDialog/for_CommandDialog/when_command_execution_fails.tsx b/Source/CommandDialog/for_CommandDialog/when_command_execution_fails.tsx
index 4ab0869a..87ca7e51 100644
--- a/Source/CommandDialog/for_CommandDialog/when_command_execution_fails.tsx
+++ b/Source/CommandDialog/for_CommandDialog/when_command_execution_fails.tsx
@@ -5,7 +5,7 @@
 
 import { expect } from 'chai';
 import React from 'react';
-import { vi } from 'vitest';
+import { afterEach, beforeEach, describe, it, vi } from 'vitest';
 import {
     click,
     render,
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_stepper_field_display_name_is_overwritten.ts b/Source/CommandDialog/for_StepperCommandDialog/when_stepper_field_display_name_is_overwritten.ts
index a0b112ba..9d1de386 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_stepper_field_display_name_is_overwritten.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_stepper_field_display_name_is_overwritten.ts
@@ -1,9 +1,10 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
+import { expect } from 'chai';
 import React from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
-import { vi } from 'vitest';
+import { beforeEach, describe, it, vi } from 'vitest';
 import { CommandFormFieldDisplayName, markAsCommandFormField } from '../../CommandForm/commandFormMarkers';
 
 vi.mock('../../Dialogs/Dialog', () => ({
@@ -11,30 +12,6 @@ vi.mock('../../Dialogs/Dialog', () => ({
         React.createElement('div', { 'data-testid': 'dialog' }, props.buttons, props.children),
 }));
 
-// PrimeReact 11's Stepper is compositional: each part renders its children, and
-// the Number part forwards its inline `style` so specs can assert the per-step
-// red/green indicator the wrapper applies directly to each step's number.
-vi.mock('primereact/stepper', () => {
-    const part = (name: string) => {
-        const Component = (props: { children?: React.ReactNode; style?: React.CSSProperties }) =>
-            React.createElement('div', { 'data-part': name, style: props.style }, props.children);
-        Component.displayName = name;
-        return Component;
-    };
-    return {
-        Stepper: {
-            Root: part('root'), List: part('list'), Step: part('step'),
-            Header: part('header'), Number: part('number'), Title: part('title'),
-            Separator: part('separator'), Panels: part('panels'), Panel: part('panel'),
-        },
-    };
-});
-
-vi.mock('primereact/button', () => ({
-    Button: (props: { children?: React.ReactNode; disabled?: boolean }) =>
-        React.createElement('button', { disabled: props.disabled }, props.children),
-}));
-
 vi.mock('@cratis/arc.react/dialogs', () => ({
     DialogButtons: { Ok: 1, OkCancel: 2, YesNo: 3, YesNoCancel: 4 },
     DialogResult: { None: 0, Yes: 1, No: 2, Ok: 3, Cancelled: 4 },
@@ -114,33 +91,32 @@ describe('when a stepper field displayName has been overwritten by a build trans
 
     // Covers the read in processChildren.
     it('should still recognize the child as a field and wrap it', () => {
-        html.should.include('field-wrapper');
+        expect(html).to.include('field-wrapper');
     });
 
     it('should still render the field itself', () => {
-        html.should.include('the-field');
+        expect(html).to.include('the-field');
     });
 
-    // Covers the read in extractFieldNamesFromNode: the step indicator can only
-    // turn red if the field was recognized and its property name extracted.
+    // Covers the read in extractFieldNamesFromNode: the first step can only
+    // carry invalid state if the field was recognized and its property extracted.
     it('should still extract the field name for the step indicator', () => {
-        const step1Number = html.match(
-            /<span[^>]*data-cratis-part="number"[^>]*>1<\/span>/,
-        );
-        (step1Number?.[0] ?? '').should.include('red');
+        const steps =
+            html.match(/<li[^>]*data-cratis-part="step"[^>]*>/g) ?? [];
+        expect(steps[0] ?? '').to.include('data-invalid="true"');
     });
 
     it('should not mark the step that has no fields', () => {
-        const step2Number = html.match(
-            /<span[^>]*data-cratis-part="number"[^>]*>2<\/span>/,
-        );
-        (step2Number?.[0] ?? '').should.not.include('red');
+        const steps =
+            html.match(/<li[^>]*data-cratis-part="step"[^>]*>/g) ?? [];
+        expect(steps[1] ?? '').not.to.include('data-invalid');
     });
 
     // Guards every assertion above: were the overwrite to silently fail, they
     // would pass through the legacy fallback and prove nothing about the marker.
     it('should have actually lost the legacy display name', () => {
-        (RenamedField as { displayName?: string }).displayName!
-            .should.not.equal(CommandFormFieldDisplayName);
+        expect((RenamedField as { displayName?: string }).displayName).not.to.equal(
+            CommandFormFieldDisplayName,
+        );
     });
 });
diff --git a/Source/CommandForm/fields/CheckboxField.tsx b/Source/CommandForm/fields/CheckboxField.tsx
index d647d8f2..479b3867 100644
--- a/Source/CommandForm/fields/CheckboxField.tsx
+++ b/Source/CommandForm/fields/CheckboxField.tsx
@@ -8,10 +8,15 @@ import {
     type FieldAccessibilityProps,
 } from './fieldAccessibility';
 
-interface CheckboxParts {
+/** Stable part attributes for {@link CheckboxField}. */
+export interface CheckboxParts {
+    /** Wrapping label. */
     root?: HTMLAttributes<HTMLLabelElement>;
+    /** Native checkbox input. */
     input?: InputHTMLAttributes<HTMLInputElement>;
+    /** Visual checkbox box. */
     box?: HTMLAttributes<HTMLSpanElement>;
+    /** Visual checked indicator. */
     indicator?: HTMLAttributes<HTMLSpanElement>;
 }
 
diff --git a/Source/CommandForm/fields/ChipsField.tsx b/Source/CommandForm/fields/ChipsField.tsx
index 9b777c3f..7456f5d8 100644
--- a/Source/CommandForm/fields/ChipsField.tsx
+++ b/Source/CommandForm/fields/ChipsField.tsx
@@ -8,10 +8,15 @@ import {
     type FieldAccessibilityProps,
 } from './fieldAccessibility';
 
-interface ChipsParts {
+/** Stable part attributes for {@link ChipsField}. */
+export interface ChipsParts {
+    /** Field wrapper. */
     root?: HTMLAttributes<HTMLDivElement>;
+    /** One selected chip. */
     item?: HTMLAttributes<HTMLSpanElement>;
+    /** Chip removal button. */
     remove?: React.ButtonHTMLAttributes<HTMLButtonElement>;
+    /** Native draft-value input. */
     input?: InputHTMLAttributes<HTMLInputElement>;
 }
 
diff --git a/Source/CommandForm/fields/ColorPickerField.tsx b/Source/CommandForm/fields/ColorPickerField.tsx
index a6e52b6c..c16d23a1 100644
--- a/Source/CommandForm/fields/ColorPickerField.tsx
+++ b/Source/CommandForm/fields/ColorPickerField.tsx
@@ -8,9 +8,13 @@ import {
     type FieldAccessibilityProps,
 } from './fieldAccessibility';
 
-interface ColorPickerParts {
+/** Stable part attributes for {@link ColorPickerField}. */
+export interface ColorPickerParts {
+    /** Field wrapper. */
     root?: HTMLAttributes<HTMLDivElement>;
+    /** Native color input. */
     input?: InputHTMLAttributes<HTMLInputElement>;
+    /** Selected hexadecimal value output. */
     value?: HTMLAttributes<HTMLOutputElement>;
 }
 
diff --git a/Source/CommandForm/fields/InputTextField.tsx b/Source/CommandForm/fields/InputTextField.tsx
index 0ade46e8..1cf840fb 100644
--- a/Source/CommandForm/fields/InputTextField.tsx
+++ b/Source/CommandForm/fields/InputTextField.tsx
@@ -8,7 +8,9 @@ import {
     type FieldAccessibilityProps,
 } from './fieldAccessibility';
 
-interface InputTextParts {
+/** Stable part attributes for {@link InputTextField}. */
+export interface InputTextParts {
+    /** Native input element. */
     root?: InputHTMLAttributes<HTMLInputElement>;
 }
 
diff --git a/Source/CommandForm/fields/NumberField.tsx b/Source/CommandForm/fields/NumberField.tsx
index b1b40b5b..c6833ff3 100644
--- a/Source/CommandForm/fields/NumberField.tsx
+++ b/Source/CommandForm/fields/NumberField.tsx
@@ -8,8 +8,11 @@ import {
     type FieldAccessibilityProps,
 } from './fieldAccessibility';
 
-interface NumberFieldParts {
+/** Stable part attributes for {@link NumberField}. */
+export interface NumberFieldParts {
+    /** Field wrapper. */
     root?: HTMLAttributes<HTMLDivElement>;
+    /** Native number input. */
     input?: InputHTMLAttributes<HTMLInputElement>;
 }
 
diff --git a/Source/CommandForm/fields/PasswordField.tsx b/Source/CommandForm/fields/PasswordField.tsx
index 4a7458cc..e7159a0b 100644
--- a/Source/CommandForm/fields/PasswordField.tsx
+++ b/Source/CommandForm/fields/PasswordField.tsx
@@ -13,9 +13,13 @@ import {
     type FieldAccessibilityProps,
 } from './fieldAccessibility';
 
-interface PasswordParts {
+/** Stable part attributes for {@link PasswordField}. */
+export interface PasswordParts {
+    /** Field wrapper. */
     root?: HTMLAttributes<HTMLDivElement>;
+    /** Native password/text input. */
     input?: InputHTMLAttributes<HTMLInputElement>;
+    /** Visibility toggle button. */
     toggle?: ButtonHTMLAttributes<HTMLButtonElement>;
 }
 
diff --git a/Source/CommandForm/fields/RadioButtonField.tsx b/Source/CommandForm/fields/RadioButtonField.tsx
index c86773af..75e536ee 100644
--- a/Source/CommandForm/fields/RadioButtonField.tsx
+++ b/Source/CommandForm/fields/RadioButtonField.tsx
@@ -8,10 +8,15 @@ import {
     type FieldAccessibilityProps,
 } from './fieldAccessibility';
 
-interface RadioParts {
+/** Stable part attributes for {@link RadioButtonField}. */
+export interface RadioParts {
+    /** Wrapping option label. */
     root?: HTMLAttributes<HTMLLabelElement>;
+    /** Native radio input. */
     input?: InputHTMLAttributes<HTMLInputElement>;
+    /** Visual radio box. */
     box?: HTMLAttributes<HTMLSpanElement>;
+    /** Visual selected indicator. */
     indicator?: HTMLAttributes<HTMLSpanElement>;
 }
 
diff --git a/Source/CommandForm/fields/RadioGroupField.tsx b/Source/CommandForm/fields/RadioGroupField.tsx
index 2044996d..c836c358 100644
--- a/Source/CommandForm/fields/RadioGroupField.tsx
+++ b/Source/CommandForm/fields/RadioGroupField.tsx
@@ -8,11 +8,17 @@ import {
     type FieldAccessibilityProps,
 } from './fieldAccessibility';
 
-interface RadioGroupParts {
+/** Stable part attributes for {@link RadioGroupField}. */
+export interface RadioGroupParts {
+    /** Semantic radiogroup wrapper. */
     root?: HTMLAttributes<HTMLDivElement>;
+    /** One option label. */
     option?: HTMLAttributes<HTMLLabelElement>;
+    /** Native radio input. */
     input?: InputHTMLAttributes<HTMLInputElement>;
+    /** Visual radio box. */
     box?: HTMLAttributes<HTMLSpanElement>;
+    /** Visual selected indicator. */
     indicator?: HTMLAttributes<HTMLSpanElement>;
 }
 
diff --git a/Source/CommandForm/fields/RatingField.tsx b/Source/CommandForm/fields/RatingField.tsx
index 1772ec9c..34ac34cd 100644
--- a/Source/CommandForm/fields/RatingField.tsx
+++ b/Source/CommandForm/fields/RatingField.tsx
@@ -8,10 +8,15 @@ import {
     type FieldAccessibilityProps,
 } from './fieldAccessibility';
 
-interface RatingParts {
+/** Stable part attributes for {@link RatingField}. */
+export interface RatingParts {
+    /** Semantic radiogroup wrapper. */
     root?: HTMLAttributes<HTMLDivElement>;
+    /** One rating option label. */
     option?: HTMLAttributes<HTMLLabelElement>;
+    /** Native radio input. */
     input?: InputHTMLAttributes<HTMLInputElement>;
+    /** Visual star. */
     star?: HTMLAttributes<HTMLSpanElement>;
 }
 
diff --git a/Source/CommandForm/fields/SliderField.tsx b/Source/CommandForm/fields/SliderField.tsx
index 7e0b47ab..a32f97f6 100644
--- a/Source/CommandForm/fields/SliderField.tsx
+++ b/Source/CommandForm/fields/SliderField.tsx
@@ -8,9 +8,13 @@ import {
     type FieldAccessibilityProps,
 } from './fieldAccessibility';
 
-interface SliderParts {
+/** Stable part attributes for {@link SliderField}. */
+export interface SliderParts {
+    /** Field wrapper. */
     root?: HTMLAttributes<HTMLDivElement>;
+    /** Native range input. */
     input?: InputHTMLAttributes<HTMLInputElement>;
+    /** Current-value display. */
     value?: HTMLAttributes<HTMLSpanElement>;
 }
 
diff --git a/Source/CommandForm/fields/TextAreaField.tsx b/Source/CommandForm/fields/TextAreaField.tsx
index 0c552f85..b9262fd0 100644
--- a/Source/CommandForm/fields/TextAreaField.tsx
+++ b/Source/CommandForm/fields/TextAreaField.tsx
@@ -8,7 +8,9 @@ import {
     type FieldAccessibilityProps,
 } from './fieldAccessibility';
 
-interface TextAreaParts {
+/** Stable part attributes for {@link TextAreaField}. */
+export interface TextAreaParts {
+    /** Native textarea element. */
     root?: TextareaHTMLAttributes<HTMLTextAreaElement>;
 }
 
diff --git a/Source/CommandForm/fields/ToggleSwitchField.tsx b/Source/CommandForm/fields/ToggleSwitchField.tsx
index 19158054..16cb057d 100644
--- a/Source/CommandForm/fields/ToggleSwitchField.tsx
+++ b/Source/CommandForm/fields/ToggleSwitchField.tsx
@@ -8,10 +8,15 @@ import {
     type FieldAccessibilityProps,
 } from './fieldAccessibility';
 
-interface ToggleSwitchParts {
+/** Stable part attributes for {@link ToggleSwitchField}. */
+export interface ToggleSwitchParts {
+    /** Wrapping label. */
     root?: HTMLAttributes<HTMLLabelElement>;
+    /** Native checkbox with switch semantics. */
     input?: InputHTMLAttributes<HTMLInputElement>;
+    /** Visual switch track. */
     control?: HTMLAttributes<HTMLSpanElement>;
+    /** Visual switch handle. */
     handle?: HTMLAttributes<HTMLSpanElement>;
 }
 
diff --git a/Source/Common/Button.tsx b/Source/Common/Button.tsx
index 1387a199..bffd5ae0 100644
--- a/Source/Common/Button.tsx
+++ b/Source/Common/Button.tsx
@@ -16,9 +16,13 @@ export type ButtonSeverity =
 
 /** Stable Cratis-owned parts for styling a {@link Button}. */
 export interface ButtonParts {
+    /** Native button element. */
     root?: ButtonHTMLAttributes<HTMLButtonElement>;
+    /** Icon wrapper. */
     icon?: HTMLAttributes<HTMLSpanElement>;
+    /** Label/content wrapper. */
     label?: HTMLAttributes<HTMLSpanElement>;
+    /** Loading spinner. */
     spinner?: HTMLAttributes<HTMLSpanElement>;
 }
 
diff --git a/Source/Common/CratisComponentsProvider.tsx b/Source/Common/CratisComponentsProvider.tsx
index 7daadd0c..2009748a 100644
--- a/Source/Common/CratisComponentsProvider.tsx
+++ b/Source/Common/CratisComponentsProvider.tsx
@@ -6,24 +6,39 @@ import { I18nProvider } from 'react-aria-components/I18nProvider';
 import { merge } from 'ts-deepmerge';
 import { Toaster, type ToasterProps } from '../Notifications';
 
+/** Localizable labels owned by the Cratis paginator. */
 export interface CratisPaginatorMessages {
+    /** Pagination navigation-region name. */
     navigation?: string;
+    /** First-page action label. */
     first?: string;
+    /** Previous-page action label. */
     previous?: string;
+    /** Next-page action label. */
     next?: string;
+    /** Last-page action label. */
     last?: string;
 }
 
+/** Localizable labels owned by the Cratis date picker composition. */
 export interface CratisDatePickerMessages {
+    /** Today action label. */
     today?: string;
+    /** Clear action label. */
     clear?: string;
+    /** Calendar-trigger label. */
     openCalendar?: string;
+    /** Previous-month action label. */
     previousMonth?: string;
+    /** Next-month action label. */
     nextMonth?: string;
 }
 
+/** Components-owned message groups. */
 export interface CratisComponentsMessages {
+    /** Paginator labels. */
     paginator?: CratisPaginatorMessages;
+    /** Date-picker labels. */
     datePicker?: CratisDatePickerMessages;
 }
 
@@ -55,12 +70,17 @@ export interface CratisComponentsConfig {
     [legacyRendererOption: string]: unknown;
 }
 
+/** Props for the application-root Components provider. */
 export interface CratisComponentsProviderProps {
+    /** Locale and Components-owned messages. */
     value?: CratisComponentsConfig;
+    /** Mounts the global toaster with defaults or explicit options. */
     toaster?: boolean | ToasterProps;
+    /** Application content. */
     children: ReactNode;
 }
 
+/** Default locale and English Components messages. */
 export const cratisDefaults: CratisComponentsConfig = {
     locale: 'en-US',
     messages: {
@@ -81,6 +101,7 @@ export const cratisDefaults: CratisComponentsConfig = {
     },
 };
 
+/** Deep-merges consumer configuration over {@link cratisDefaults}. */
 export const mergeCratisComponentsConfig = (
     value: CratisComponentsConfig | undefined,
 ): CratisComponentsConfig => merge(cratisDefaults, value ?? {}) as CratisComponentsConfig;
diff --git a/Source/Common/DatePickerInput.tsx b/Source/Common/DatePickerInput.tsx
index a4713807..84d94a80 100644
--- a/Source/Common/DatePickerInput.tsx
+++ b/Source/Common/DatePickerInput.tsx
@@ -48,45 +48,79 @@ type DatePickerButtonAttributes = Omit<
 
 /** Stable Cratis-owned parts for styling a {@link DatePickerInput}. */
 export interface DatePickerInputPassThrough {
+    /** Outer wrapper. */
     root?: DatePickerPartAttributes;
+    /** Focusable segmented-input group. */
     group?: DatePickerPartAttributes;
+    /** Segmented date input. */
     input?: DatePickerPartAttributes;
+    /** Visible empty-value placeholder. */
     placeholder?: DatePickerPartAttributes;
+    /** Individual editable date/time segment. */
     segment?: DatePickerPartAttributes;
+    /** Calendar popup trigger. */
     trigger?: DatePickerButtonAttributes;
+    /** Portaled calendar popover. */
     popover?: DatePickerPartAttributes;
+    /** Calendar dialog. */
     dialog?: DatePickerPartAttributes;
+    /** Calendar root. */
     calendar?: DatePickerPartAttributes;
+    /** Calendar navigation header. */
     header?: DatePickerPartAttributes;
+    /** Current month/year heading. */
     heading?: DatePickerPartAttributes;
+    /** Previous-month action. */
     previous?: DatePickerButtonAttributes;
+    /** Next-month action. */
     next?: DatePickerButtonAttributes;
+    /** Calendar grid. */
     grid?: DatePickerPartAttributes;
+    /** One calendar cell. */
     cell?: DatePickerPartAttributes;
+    /** Today/clear action row. */
     buttonBar?: DatePickerPartAttributes;
+    /** Today action. */
     today?: DatePickerButtonAttributes;
+    /** Clear action. */
     clear?: DatePickerButtonAttributes;
 }
 
 /** Props for {@link DatePickerInput}. */
 export interface DatePickerInputProps {
+    /** Controlled JavaScript date value. */
     value: Date | null;
+    /** Invoked with the selected JavaScript date or `null`. */
     onChange: (value: Date | null) => void;
+    /** Invoked when focus leaves the picker wrapper. */
     onBlur?: FocusEventHandler<HTMLElement>;
+    /** Marks the picker invalid. */
     invalid?: boolean;
+    /** Disables every picker control. */
     disabled?: boolean;
+    /** Prevents editing while retaining focus semantics. */
     readOnly?: boolean;
+    /** DOM id for the segmented-input group. */
     id?: string;
+    /** Shows Today and Clear actions. */
     showButtonBar?: boolean;
+    /** Visible text while no date is selected. */
     placeholder?: string;
     /** Deprecated renderer mask; locale controls formatting now. */
     dateFormat?: string;
+    /** Shows the calendar trigger button. */
     showIcon?: boolean;
+    /** Adds hour/minute segments. */
     showTime?: boolean;
+    /** Preferred 12- or 24-hour cycle. */
     hourFormat?: '12' | '24';
+    /** Earliest selectable date. */
     minDate?: Date;
+    /** Latest selectable date. */
     maxDate?: Date;
+    /** Extra class name for the outer wrapper. */
     className?: string;
+    /** Inline style for the outer wrapper. */
     style?: CSSProperties;
     /** Cratis-owned per-part attributes. */
     pt?: DatePickerInputPassThrough;
diff --git a/Source/DataPage/DataPage.tsx b/Source/DataPage/DataPage.tsx
index e1e686a1..a781b81c 100644
--- a/Source/DataPage/DataPage.tsx
+++ b/Source/DataPage/DataPage.tsx
@@ -282,6 +282,12 @@ export interface DataPageProps<
      */
     globalFilterFields?: string[] | undefined;
 
+    /** Placeholder for the loaded-page search input. */
+    globalSearchPlaceholder?: string;
+
+    /** Accessible name for the loaded-page search input. */
+    globalSearchAriaLabel?: string;
+
     /**
      * Default filters to use
      */
diff --git a/Source/DataTables/Column.tsx b/Source/DataTables/Column.tsx
index 22c31f39..c8eb19bf 100644
--- a/Source/DataTables/Column.tsx
+++ b/Source/DataTables/Column.tsx
@@ -6,6 +6,7 @@ import type {
     ColumnFilterDataType,
     ColumnFilterElement,
     ColumnFilterMenuLabels,
+    ColumnFilterMenuParts,
 } from './ColumnFilterMenu';
 
 /**
@@ -36,6 +37,8 @@ export interface ColumnProps<TData = unknown> {
     filterElement?: ColumnFilterElement;
     /** Overrides the column filter menu's default English labels. */
     filterLabels?: Partial<ColumnFilterMenuLabels>;
+    /** Stable part attributes for this column's filter popup. */
+    filterPt?: ColumnFilterMenuParts;
     /**
      * Renders a selection control column (a radio for `single`, a checkbox for
      * `multiple`) instead of a data column.
diff --git a/Source/DataTables/ColumnFilterMenu.tsx b/Source/DataTables/ColumnFilterMenu.tsx
index 09635713..98e3c28f 100644
--- a/Source/DataTables/ColumnFilterMenu.tsx
+++ b/Source/DataTables/ColumnFilterMenu.tsx
@@ -1,57 +1,133 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { useEffect, useState, type ReactNode, type SyntheticEvent } from 'react';
+import {
+    useEffect,
+    useState,
+    type ButtonHTMLAttributes,
+    type CSSProperties,
+    type HTMLAttributes,
+    type InputHTMLAttributes,
+    type ReactNode,
+    type SyntheticEvent,
+} from 'react';
 import { Button as AriaButton } from 'react-aria-components/Button';
 import { Dialog as AriaDialog, DialogTrigger } from 'react-aria-components/Dialog';
 import { Popover } from 'react-aria-components/Popover';
-import { Button } from '../Common/Button';
+import { Button, type ButtonParts } from '../Common/Button';
 import { DatePickerInput } from '../Common/DatePickerInput';
-import { Dropdown } from '../Dropdown/Dropdown';
+import { Dropdown, type DropdownParts } from '../Dropdown/Dropdown';
 import {
     DataTableFilterMatchMode,
     type DataTableFilterConstraint,
     type DataTableFilterMatchMode as FilterMatchMode,
 } from './DataTableFilterMeta';
 
+/** Value editor used by a built-in column filter. */
 export type ColumnFilterDataType = 'text' | 'numeric' | 'date' | 'boolean';
 
+/** Localizable labels owned by the column filter popup. */
 export interface ColumnFilterMenuLabels {
+    /** Builds the filter-trigger accessible name from the effective field. */
     filterTriggerAriaLabel: (field: string) => string;
+    /** Builds the value-control accessible name from the effective field. */
+    valueAriaLabel: (field: string) => string;
+    /** Accessible name for the match-mode selector. */
+    matchModeAriaLabel: string;
+    /** Localizes a match mode while retaining its default label as fallback input. */
+    matchModeLabel: (mode: FilterMatchMode, defaultLabel: string) => string;
+    /** Clear action label. */
     clear: string;
+    /** Apply action label. */
     apply: string;
+    /** Boolean true option label. */
     true: string;
+    /** Boolean false option label. */
     false: string;
 }
 
+interface ColumnFilterOverlayAttributes {
+    id?: string;
+    className?: string;
+    style?: CSSProperties;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    [attribute: `data-${string}`]: string | number | boolean | undefined;
+}
+
+/** Stable Cratis-owned parts for a column filter popup. */
+export interface ColumnFilterMenuParts {
+    /** Header-cell filter trigger. */
+    trigger?: Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value'>;
+    /** Portaled filter popover. */
+    popover?: ColumnFilterOverlayAttributes;
+    /** Semantic filter dialog/menu. */
+    menu?: ColumnFilterOverlayAttributes;
+    /** Match-mode Dropdown parts. */
+    matchMode?: DropdownParts;
+    /** Built-in value input, or root class/style for date/boolean controls. */
+    input?: InputHTMLAttributes<HTMLInputElement>;
+    /** Clear/apply action row. */
+    actions?: HTMLAttributes<HTMLDivElement>;
+    /** Clear Button parts. */
+    clear?: ButtonParts;
+    /** Apply Button parts. */
+    apply?: ButtonParts;
+}
+
+/** Default English labels for the column filter popup. */
 export const defaultColumnFilterMenuLabels: ColumnFilterMenuLabels = {
     filterTriggerAriaLabel: (field) => `Filter by ${field}`,
+    valueAriaLabel: (field) => `Filter value for ${field}`,
+    matchModeAriaLabel: 'Match mode',
+    matchModeLabel: (_mode, defaultLabel) => defaultLabel,
     clear: 'Clear',
     apply: 'Apply',
     true: 'True',
     false: 'False',
 };
 
+/** State and actions supplied to a custom column filter value editor. */
 export interface ColumnFilterElementOptions {
+    /** Effective filtered field. */
     field: string;
+    /** Current draft value. */
     value: unknown;
+    /** Current draft match mode. */
     matchMode: FilterMatchMode;
+    /** Updates draft value and optionally match mode. */
     onChange: (value: unknown, matchMode?: FilterMatchMode) => void;
+    /** Applies the draft filter. */
     onApply: (event: SyntheticEvent) => void;
+    /** Clears the field filter. */
     onClear: (event: SyntheticEvent) => void;
 }
 
+/** Custom renderer for a column filter's value editor. */
 export type ColumnFilterElement = (options: ColumnFilterElementOptions) => ReactNode;
 
+/** Props for the Cratis-owned draft/apply column filter popup. */
 export interface ColumnFilterMenuProps {
+    /** Effective row field being filtered. */
     field: string;
+    /** Built-in value editor and match-mode family. */
     dataType?: ColumnFilterDataType;
+    /** Placeholder for the value editor. */
     placeholder?: string;
+    /** Whether the match-mode selector is shown. */
     showMatchModes?: boolean;
+    /** Custom value editor replacing the built-in control. */
     filterElement?: ColumnFilterElement;
+    /** Partial localization overrides. */
     labels?: Partial<ColumnFilterMenuLabels>;
+    /** Stable part attributes. */
+    pt?: ColumnFilterMenuParts;
+    /** Currently applied constraint. */
     constraint?: DataTableFilterConstraint;
+    /** Applies one draft constraint. */
     onApply: (constraint: DataTableFilterConstraint) => void;
+    /** Removes the field constraint. */
     onClear: () => void;
 }
 
@@ -92,6 +168,9 @@ const optionsFor = (dataType: ColumnFilterDataType): MatchModeOption[] => {
     }
 };
 
+const classNames = (...values: Array<string | undefined>) =>
+    values.filter(Boolean).join(' ');
+
 const defaultModeFor = (dataType: ColumnFilterDataType): FilterMatchMode => {
     if (dataType === 'text') return DataTableFilterMatchMode.Contains;
     if (dataType === 'date') return DataTableFilterMatchMode.DateIs;
@@ -106,6 +185,7 @@ export const ColumnFilterMenu = ({
     showMatchModes = true,
     filterElement,
     labels,
+    pt,
     constraint,
     onApply,
     onClear,
@@ -124,14 +204,27 @@ export const ColumnFilterMenu = ({
         filterTriggerAriaLabel:
             labels?.filterTriggerAriaLabel ??
             defaultColumnFilterMenuLabels.filterTriggerAriaLabel,
+        valueAriaLabel:
+            labels?.valueAriaLabel ?? defaultColumnFilterMenuLabels.valueAriaLabel,
+        matchModeAriaLabel:
+            labels?.matchModeAriaLabel ??
+            defaultColumnFilterMenuLabels.matchModeAriaLabel,
+        matchModeLabel:
+            labels?.matchModeLabel ?? defaultColumnFilterMenuLabels.matchModeLabel,
         clear: labels?.clear ?? defaultColumnFilterMenuLabels.clear,
         apply: labels?.apply ?? defaultColumnFilterMenuLabels.apply,
         true: labels?.true ?? defaultColumnFilterMenuLabels.true,
         false: labels?.false ?? defaultColumnFilterMenuLabels.false,
     };
-    const modeOptions = optionsFor(dataType);
+    const modeOptions = optionsFor(dataType).map((option) => ({
+        ...option,
+        label: resolvedLabels.matchModeLabel(option.value, option.label),
+    }));
     if (!modeOptions.some((option) => option.value === draftMode)) {
-        modeOptions.push({ label: String(draftMode), value: draftMode });
+        modeOptions.push({
+            label: resolvedLabels.matchModeLabel(draftMode, String(draftMode)),
+            value: draftMode,
+        });
     }
 
     const clear = (event?: SyntheticEvent) => {
@@ -161,10 +254,15 @@ export const ColumnFilterMenu = ({
                   case 'numeric':
                       return (
                           <input
+                              {...pt?.input}
                               type='number'
+                              aria-label={resolvedLabels.valueAriaLabel(field)}
                               value={typeof draftValue === 'number' ? draftValue : ''}
                               placeholder={placeholder}
-                              className='cratis-filter-menu__input'
+                              className={classNames(
+                                  'cratis-filter-menu__input',
+                                  pt?.input?.className,
+                              )}
                               onChange={(event) =>
                                   setDraftValue(
                                       event.target.value === ''
@@ -180,10 +278,9 @@ export const ColumnFilterMenu = ({
                               value={draftValue instanceof Date ? draftValue : null}
                               onChange={setDraftValue}
                               showIcon
-                              aria-label={
-                                  placeholder ??
-                                  resolvedLabels.filterTriggerAriaLabel(field)
-                              }
+                              aria-label={resolvedLabels.valueAriaLabel(field)}
+                              className={pt?.input?.className}
+                              style={pt?.input?.style}
                           />
                       );
                   case 'boolean':
@@ -197,18 +294,22 @@ export const ColumnFilterMenu = ({
                               placeholder={placeholder}
                               showClear
                               onChange={(event) => setDraftValue(event.value)}
-                              aria-label={
-                                  placeholder ??
-                                  resolvedLabels.filterTriggerAriaLabel(field)
-                              }
+                              aria-label={resolvedLabels.valueAriaLabel(field)}
+                              className={pt?.input?.className}
+                              style={pt?.input?.style}
                           />
                       );
                   default:
                       return (
                           <input
+                              {...pt?.input}
                               value={typeof draftValue === 'string' ? draftValue : ''}
+                              aria-label={resolvedLabels.valueAriaLabel(field)}
                               placeholder={placeholder}
-                              className='cratis-filter-menu__input'
+                              className={classNames(
+                                  'cratis-filter-menu__input',
+                                  pt?.input?.className,
+                              )}
                               onChange={(event) => setDraftValue(event.target.value)}
                           />
                       );
@@ -218,8 +319,12 @@ export const ColumnFilterMenu = ({
     return (
         <DialogTrigger>
             <AriaButton
+                {...pt?.trigger}
                 aria-label={resolvedLabels.filterTriggerAriaLabel(field)}
-                className='cratis-filter-trigger'
+                className={classNames(
+                    'cratis-filter-trigger',
+                    pt?.trigger?.className,
+                )}
                 data-active={
                     (constraint?.value !== null &&
                         constraint?.value !== undefined &&
@@ -230,9 +335,19 @@ export const ColumnFilterMenu = ({
             >
                 <span aria-hidden='true'>⌕</span>
             </AriaButton>
-            <Popover className='cratis-filter-popover' placement='bottom end'>
+            <Popover
+                {...pt?.popover}
+                className={classNames(
+                    'cratis-filter-popover',
+                    pt?.popover?.className,
+                )}
+                data-cratis-part='filter-popover'
+                placement='bottom end'
+            >
                 <AriaDialog
-                    className='cratis-filter-menu'
+                    {...pt?.menu}
+                    className={classNames('cratis-filter-menu', pt?.menu?.className)}
+                    data-cratis-part='filter-menu'
                     aria-label={resolvedLabels.filterTriggerAriaLabel(field)}
                 >
                     {showMatchModes && (
@@ -244,13 +359,30 @@ export const ColumnFilterMenu = ({
                             onChange={(event) =>
                                 setDraftMode(event.value as FilterMatchMode)
                             }
-                            aria-label='Match mode'
+                            aria-label={resolvedLabels.matchModeAriaLabel}
+                            pt={pt?.matchMode}
                         />
                     )}
                     {valueInput}
-                    <div className='cratis-filter-menu-actions'>
-                        <Button outlined onClick={clear} label={resolvedLabels.clear} />
-                        <Button onClick={apply} label={resolvedLabels.apply} />
+                    <div
+                        {...pt?.actions}
+                        className={classNames(
+                            'cratis-filter-menu-actions',
+                            pt?.actions?.className,
+                        )}
+                        data-cratis-part='filter-actions'
+                    >
+                        <Button
+                            outlined
+                            onClick={clear}
+                            label={resolvedLabels.clear}
+                            pt={pt?.clear}
+                        />
+                        <Button
+                            onClick={apply}
+                            label={resolvedLabels.apply}
+                            pt={pt?.apply}
+                        />
                     </div>
                 </AriaDialog>
             </Popover>
diff --git a/Source/DataTables/DataTableCore.tsx b/Source/DataTables/DataTableCore.tsx
index 797ac62a..4296272b 100644
--- a/Source/DataTables/DataTableCore.tsx
+++ b/Source/DataTables/DataTableCore.tsx
@@ -25,46 +25,83 @@ import { resolveDataTableFilterMatcher } from './DataTableFilterMatcherRegistry'
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
+/** Event emitted when a DataTable row is activated. */
 export interface DataTableRowClickEvent<TData> {
+    /** Activated row data. */
     data: TData;
+    /** Loaded-page row index. */
     index: number;
 }
 
 /** Stable Cratis-owned parts for styling a {@link DataTableCore}. */
 export interface DataTableParts {
+    /** Outer table composition. */
     root?: HTMLAttributes<HTMLDivElement>;
+    /** Loaded-page search wrapper. */
     search?: HTMLAttributes<HTMLDivElement>;
+    /** Loaded-page search input. */
     searchInput?: React.InputHTMLAttributes<HTMLInputElement>;
+    /** Scroll container. */
     tableContainer?: HTMLAttributes<HTMLDivElement>;
+    /** Semantic table element. */
     table?: TableHTMLAttributes<HTMLTableElement>;
+    /** Table head. */
     head?: HTMLAttributes<HTMLTableSectionElement>;
+    /** Header row. */
     headerRow?: HTMLAttributes<HTMLTableRowElement>;
+    /** Header cell. */
     headerCell?: ThHTMLAttributes<HTMLTableCellElement>;
+    /** Table body. */
     body?: HTMLAttributes<HTMLTableSectionElement>;
+    /** Data row. */
     row?: HTMLAttributes<HTMLTableRowElement>;
+    /** Data cell. */
     cell?: TdHTMLAttributes<HTMLTableCellElement>;
+    /** Empty-state row. */
     emptyRow?: HTMLAttributes<HTMLTableRowElement>;
+    /** Empty-state cell. */
     emptyCell?: TdHTMLAttributes<HTMLTableCellElement>;
 }
 
+/** Props for the semantic loaded-page DataTable renderer. */
 export interface DataTableCoreProps<TData extends object> {
+    /** Loaded page rows. */
     data: TData[];
+    /** Declarative {@link Column} markers. */
     children?: ReactNode;
+    /** Row property used as stable identity. */
     dataKey?: string;
+    /** Content shown when the loaded page has no matching rows. */
     emptyMessage: ReactNode;
+    /** Enables single-row selection. */
     selectionMode?: 'single';
+    /** Accessible name for row selection controls. */
     selectionAriaLabel?: string;
+    /** Controlled selected row. */
     selection?: TData | null;
+    /** Invoked when row selection changes. */
     onSelectionChange?: (event: DataTableSelectionChangeEvent<TData>) => void;
+    /** Invoked when a row is clicked or keyboard activated. */
     onRowClick?: (event: DataTableRowClickEvent<TData>) => void;
+    /** Builds an extra class name for one row. */
     rowClassName?: (rowData: TData) => string;
+    /** Row fields searched on the loaded page. */
     globalFilterFields?: string[];
+    /** Placeholder for the loaded-page search input. */
     globalSearchPlaceholder?: string;
+    /** Accessible name for the loaded-page search input. */
+    globalSearchAriaLabel?: string;
+    /** Initial per-field filter constraints. */
     defaultFilters?: DataTableFilterMeta;
+    /** Invoked when applied field filters change. */
     onFilter?: (filters: DataTableFilterMeta) => void;
+    /** Enables the bounded scroll container. */
     scrollable?: boolean;
+    /** Scroll-container maximum height. */
     scrollHeight?: string;
+    /** Extra class name for the table composition. */
     className?: string;
+    /** Inline style for the table composition. */
     style?: CSSProperties;
     /** Cratis-owned per-part attributes. */
     pt?: DataTableParts;
@@ -217,6 +254,7 @@ export const DataTableCore = <TData extends object>({
     rowClassName,
     globalFilterFields,
     globalSearchPlaceholder = 'Search…',
+    globalSearchAriaLabel = 'Search table',
     defaultFilters,
     onFilter,
     scrollable,
@@ -311,6 +349,7 @@ export const DataTableCore = <TData extends object>({
                         {...pt?.searchInput}
                         value={globalFilter}
                         placeholder={globalSearchPlaceholder}
+                        aria-label={globalSearchAriaLabel}
                         className={classNames(
                             'cratis-datatable-search__input',
                             pt?.searchInput?.className,
@@ -433,6 +472,7 @@ export const DataTableCore = <TData extends object>({
                                                         column.props.filterElement
                                                     }
                                                     labels={column.props.filterLabels}
+                                                    pt={column.props.filterPt}
                                                     constraint={firstConstraint(
                                                         filters[field],
                                                     )}
diff --git a/Source/DataTables/DataTableForObservableQuery.tsx b/Source/DataTables/DataTableForObservableQuery.tsx
index a4f87b6d..3eafd05f 100644
--- a/Source/DataTables/DataTableForObservableQuery.tsx
+++ b/Source/DataTables/DataTableForObservableQuery.tsx
@@ -69,6 +69,12 @@ export interface DataTableForObservableQueryProps<
      */
     globalFilterFields?: string[] | undefined;
 
+    /** Placeholder for the loaded-page search input. */
+    globalSearchPlaceholder?: string;
+
+    /** Accessible name for the loaded-page search input. */
+    globalSearchAriaLabel?: string;
+
     /**
      * Default filters to use
      */
diff --git a/Source/DataTables/DataTableForQuery.tsx b/Source/DataTables/DataTableForQuery.tsx
index e4ec7f19..9f480249 100644
--- a/Source/DataTables/DataTableForQuery.tsx
+++ b/Source/DataTables/DataTableForQuery.tsx
@@ -67,6 +67,12 @@ export interface DataTableForQueryProps<
      */
     globalFilterFields?: string[] | undefined;
 
+    /** Placeholder for the loaded-page search input. */
+    globalSearchPlaceholder?: string;
+
+    /** Accessible name for the loaded-page search input. */
+    globalSearchAriaLabel?: string;
+
     /**
      * Default filters to use
      */
diff --git a/Source/DataTables/TablePaginator.tsx b/Source/DataTables/TablePaginator.tsx
index 2a1b54d2..cfe4f21c 100644
--- a/Source/DataTables/TablePaginator.tsx
+++ b/Source/DataTables/TablePaginator.tsx
@@ -8,12 +8,19 @@ import { paginatorRange } from './paginatorRange';
 
 /** Stable Cratis-owned paginator parts. */
 export interface TablePaginatorParts {
+    /** Pagination navigation root. */
     root?: HTMLAttributes<HTMLDivElement>;
+    /** Loaded item-range report. */
     range?: HTMLAttributes<HTMLSpanElement>;
+    /** Current page / page-count report. */
     info?: HTMLAttributes<HTMLSpanElement>;
+    /** First-page Button parts. */
     first?: ButtonParts;
+    /** Previous-page Button parts. */
     previous?: ButtonParts;
+    /** Next-page Button parts. */
     next?: ButtonParts;
+    /** Last-page Button parts. */
     last?: ButtonParts;
 }
 
diff --git a/Source/DataTables/for_ColumnFilterMenu/given/a_filterable_table.tsx b/Source/DataTables/for_ColumnFilterMenu/given/a_filterable_table.tsx
index de7e2d97..78a2f574 100644
--- a/Source/DataTables/for_ColumnFilterMenu/given/a_filterable_table.tsx
+++ b/Source/DataTables/for_ColumnFilterMenu/given/a_filterable_table.tsx
@@ -39,7 +39,7 @@ export const renderFilterableTable = async (
     (
         globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
     ).IS_REACT_ACT_ENVIRONMENT = true;
-    // SAFETY: jsdom omits ResizeObserver, while PrimeReact only calls its three observer methods.
+    // SAFETY: jsdom omits ResizeObserver; overlay positioning only calls these methods.
     (globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver ??= class {
         observe() {
             return undefined;
diff --git a/Source/DataTables/for_ColumnFilterMenu/when_configuring_labels.tsx b/Source/DataTables/for_ColumnFilterMenu/when_configuring_labels.tsx
index 27ec471f..7e91291a 100644
--- a/Source/DataTables/for_ColumnFilterMenu/when_configuring_labels.tsx
+++ b/Source/DataTables/for_ColumnFilterMenu/when_configuring_labels.tsx
@@ -29,6 +29,7 @@ describe('when configuring column filter labels', () => {
                 showFilterMatchModes: false,
                 filterLabels: {
                     filterTriggerAriaLabel: (field) => `Filtrer ${field}`,
+                    valueAriaLabel: (field) => `Filterverdi for ${field}`,
                     clear: 'Tøm',
                     apply: 'Bruk',
                     true: 'Ja',
@@ -59,6 +60,14 @@ describe('when configuring column filter labels', () => {
         expect(table.trigger.getAttribute('aria-label')).to.equal('Filtrer roleCode');
     });
 
+    it('should label the filter value control', () => {
+        expect(
+            menu
+                .querySelector('[data-cratis-part="trigger"]')
+                ?.getAttribute('aria-label'),
+        ).to.equal('Filterverdi for roleCode');
+    });
+
     it('should localize the menu actions', () => {
         const actions = menu.querySelector('.cratis-filter-menu-actions');
         expect(actions?.textContent).to.contain('Tøm');
diff --git a/Source/DataTables/for_ColumnFilterMenu/when_configuring_stable_parts.tsx b/Source/DataTables/for_ColumnFilterMenu/when_configuring_stable_parts.tsx
new file mode 100644
index 00000000..d3040df1
--- /dev/null
+++ b/Source/DataTables/for_ColumnFilterMenu/when_configuring_stable_parts.tsx
@@ -0,0 +1,54 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { expect } from 'chai';
+import { afterEach, beforeEach, describe, it } from 'vitest';
+import {
+    type FilterableTableInTheDom,
+    openFilterMenu,
+    renderFilterableTable,
+    unmountFilterableTable,
+} from './given/a_filterable_table';
+
+describe('when configuring stable column filter parts', () => {
+    let table: FilterableTableInTheDom;
+    let menu: HTMLElement;
+
+    beforeEach(async () => {
+        table = await renderFilterableTable({
+            column: {
+                field: 'name',
+                header: 'Name',
+                filter: true,
+                filterPt: {
+                    trigger: { className: 'product-filter-trigger' },
+                    popover: { className: 'product-filter-popover' },
+                    menu: { className: 'product-filter-menu' },
+                    input: { className: 'product-filter-input' },
+                    actions: { className: 'product-filter-actions' },
+                    clear: { root: { className: 'product-filter-clear' } },
+                    apply: { root: { className: 'product-filter-apply' } },
+                },
+            },
+        });
+        menu = await openFilterMenu(table);
+    });
+
+    afterEach(async () => {
+        await unmountFilterableTable(table);
+    });
+
+    it('should expose trigger, overlay, menu, input, and action parts', () => {
+        expect(table.trigger.classList.contains('product-filter-trigger')).to.equal(
+            true,
+        );
+        expect(document.querySelector('.product-filter-popover')).not.to.equal(null);
+        expect(menu.classList.contains('product-filter-menu')).to.equal(true);
+        expect(menu.querySelector('.product-filter-input')).not.to.equal(null);
+        expect(menu.querySelector('.product-filter-actions')).not.to.equal(null);
+        expect(menu.querySelector('.product-filter-clear')).not.to.equal(null);
+        expect(menu.querySelector('.product-filter-apply')).not.to.equal(null);
+    });
+});
diff --git a/Source/DataTables/for_ColumnFilterMenu/when_localizing_match_modes.tsx b/Source/DataTables/for_ColumnFilterMenu/when_localizing_match_modes.tsx
new file mode 100644
index 00000000..6afff046
--- /dev/null
+++ b/Source/DataTables/for_ColumnFilterMenu/when_localizing_match_modes.tsx
@@ -0,0 +1,59 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { expect } from 'chai';
+import { act } from 'react';
+import { afterEach, beforeEach, describe, it } from 'vitest';
+import {
+    type FilterableTableInTheDom,
+    openFilterMenu,
+    renderFilterableTable,
+    unmountFilterableTable,
+} from './given/a_filterable_table';
+
+describe('when localizing match modes', () => {
+    let table: FilterableTableInTheDom;
+    let modeLabels: string[];
+
+    beforeEach(async () => {
+        table = await renderFilterableTable({
+            column: {
+                field: 'score',
+                header: 'Score',
+                filter: true,
+                dataType: 'numeric',
+                showFilterMatchModes: true,
+                filterLabels: {
+                    matchModeAriaLabel: 'Comparison',
+                    matchModeLabel: (_mode, defaultLabel) => `Localized ${defaultLabel}`,
+                },
+            },
+        });
+        const menu = await openFilterMenu(table);
+        const matchMode = menu.querySelector<HTMLButtonElement>(
+            '.cratis-dropdown__trigger',
+        );
+        if (!document.querySelector('[aria-label="Comparison"]')) {
+            throw new Error('Match-mode selector was not accessibly named.');
+        }
+        if (!matchMode) throw new Error('Match-mode selector was not rendered.');
+        await act(async () => matchMode.click());
+        modeLabels = Array.from(
+            document.querySelectorAll('[data-cratis-part="option"]'),
+            (option) => option.textContent ?? '',
+        );
+    });
+
+    afterEach(async () => {
+        await unmountFilterableTable(table);
+    });
+
+    it('should localize every built-in mode', () => {
+        expect(modeLabels.length).to.be.greaterThan(0);
+        expect(modeLabels.every((label) => label.startsWith('Localized '))).to.equal(
+            true,
+        );
+    });
+});
diff --git a/Source/DataTables/for_DataTableCore/when_rendering_global_search.tsx b/Source/DataTables/for_DataTableCore/when_rendering_global_search.tsx
new file mode 100644
index 00000000..f4331b0f
--- /dev/null
+++ b/Source/DataTables/for_DataTableCore/when_rendering_global_search.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.
+
+// @vitest-environment jsdom
+
+import { expect } from 'chai';
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, it } from 'vitest';
+import { Column } from '../Column';
+import { DataTableCore } from '../DataTableCore';
+
+describe('when rendering global search', () => {
+    let container: HTMLDivElement;
+    let root: Root;
+
+    beforeEach(async () => {
+        (
+            globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
+        ).IS_REACT_ACT_ENVIRONMENT = true;
+        container = document.createElement('div');
+        document.body.append(container);
+        root = createRoot(container);
+        await act(async () => {
+            root.render(
+                <DataTableCore
+                    data={[{ name: 'Ada' }]}
+                    emptyMessage='No people'
+                    globalFilterFields={['name']}
+                    globalSearchPlaceholder='Find people'
+                    globalSearchAriaLabel='Search people'
+                >
+                    <Column field='name' header='Name' />
+                </DataTableCore>,
+            );
+        });
+    });
+
+    afterEach(async () => {
+        await act(async () => root.unmount());
+        container.remove();
+    });
+
+    it('should give the search control a name independent of its placeholder', () => {
+        const input = container.querySelector<HTMLInputElement>(
+            '[data-cratis-part="search-input"]',
+        );
+        expect(input?.placeholder).to.equal('Find people');
+        expect(input?.getAttribute('aria-label')).to.equal('Search people');
+    });
+});
diff --git a/Source/Dialogs/Dialog.tsx b/Source/Dialogs/Dialog.tsx
index 21dfd608..5da19156 100644
--- a/Source/Dialogs/Dialog.tsx
+++ b/Source/Dialogs/Dialog.tsx
@@ -13,11 +13,14 @@ import type {
 import { useEffect, useRef, useSyncExternalStore } from 'react';
 import { DialogInitialFocus } from './DialogInitialFocus';
 
+/** Callback handling a typed dialog result; return `false` to keep the dialog open. */
 export type CloseDialog = (
     result: DialogResult,
 ) => boolean | void | Promise<boolean> | Promise<void>;
 
+/** Confirmation callback; return `true` to permit host closure. */
 export type ConfirmCallback = () => boolean | void | Promise<boolean> | Promise<void>;
+/** Cancellation callback; return `true` to permit host closure. */
 export type CancelCallback = () => boolean | void | Promise<boolean> | Promise<void>;
 
 type DialogPartAttributes<TElement> = HTMLAttributes<TElement> & {
@@ -31,41 +34,71 @@ type DialogButtonAttributes = Omit<
 
 /** Stable Cratis-owned parts for styling a {@link Dialog}. */
 export interface DialogParts {
+    /** Viewport backdrop and dismissal surface. */
     backdrop?: DialogPartAttributes<HTMLDivElement>;
+    /** Viewport positioning wrapper. */
     positioner?: DialogPartAttributes<HTMLDivElement>;
+    /** Modal root. */
     root?: DialogPartAttributes<HTMLDivElement>;
+    /** Header containing title and optional close action. */
     header?: DialogPartAttributes<HTMLElement>;
+    /** Dialog heading. */
     title?: DialogPartAttributes<HTMLHeadingElement>;
+    /** Header close button. */
     close?: DialogButtonAttributes;
+    /** Dialog content region. */
     content?: DialogPartAttributes<HTMLDivElement>;
+    /** Footer action region. */
     footer?: DialogPartAttributes<HTMLElement>;
+    /** Primary confirmation button. */
     confirm?: DialogButtonAttributes;
+    /** Secondary dismissal button(s). */
     cancel?: DialogButtonAttributes;
 }
 
 /** Props for {@link Dialog}. */
 export interface DialogProps {
+    /** Dialog heading. */
     title: string;
+    /** Controlled open state. Defaults to `true`. */
     visible?: boolean;
+    /** Combined result callback used when a dedicated confirm/cancel callback is absent. */
     onClose?: CloseDialog;
+    /** Invoked by primary confirmation actions. */
     onConfirm?: ConfirmCallback;
+    /** Invoked by cancellation actions. */
     onCancel?: CancelCallback;
+    /** Predefined Arc buttons, custom footer content, or `null` for no footer. */
     buttons?: DialogButtons | ReactNode;
+    /** Initial focus target. Defaults to the confirmation action. */
     initialFocus?: DialogInitialFocus;
+    /** Dialog body content. */
     children: ReactNode;
+    /** CSS width. Defaults to `450px`. */
     width?: string;
+    /** Modal-root inline style. */
     style?: CSSProperties;
+    /** Content-region inline style. */
     contentStyle?: CSSProperties;
     /** Retained for source compatibility; the dialog is viewport-bounded rather than resizable. */
     resizable?: boolean;
+    /** Whether the primary action is enabled. Defaults to `true`. */
     isValid?: boolean;
+    /** Disables every action and dismissal path while work is in flight. */
     isBusy?: boolean;
+    /** Label for the Ok action. */
     okLabel?: string;
+    /** Label for the Cancel action. */
     cancelLabel?: string;
+    /** Label for the Yes action. */
     yesLabel?: string;
+    /** Label for the No action. */
     noLabel?: string;
+    /** Accessible label for the header close button. */
     closeAriaLabel?: string;
+    /** Enables header, Escape, and backdrop dismissal when not busy. */
     dismissable?: boolean;
+    /** Extra class name for the modal root. */
     className?: string;
     /** Cratis-owned per-part attributes. */
     pt?: DialogParts;
@@ -136,7 +169,8 @@ export const Dialog = ({
     const focusesConfirmButton = resolvedInitialFocus === DialogInitialFocus.Confirm;
     const focusesDismissingButton = resolvedInitialFocus === DialogInitialFocus.Cancel;
     const focusesTitle = resolvedInitialFocus === DialogInitialFocus.Content;
-    const isDismissable = dismissable ?? typeof buttons === 'number';
+    const allowsDismissal = dismissable ?? typeof buttons === 'number';
+    const isDismissable = allowsDismissal && !isBusy;
 
     useEffect(() => {
         if (!visible) return;
@@ -288,10 +322,11 @@ export const Dialog = ({
                     >
                         {title}
                     </Heading>
-                    {isDismissable && (
+                    {allowsDismissal && (
                         <button
                             {...pt?.close}
                             type='button'
+                            disabled={isBusy}
                             className={classNames(
                                 'cratis-dialog__close',
                                 pt?.close?.className,
@@ -377,7 +412,7 @@ export const Dialog = ({
             {...pt?.backdrop}
             isOpen={visible}
             onOpenChange={(open) => {
-                if (!open) void handleClose(DialogResult.Cancelled);
+                if (!open && !isBusy) void handleClose(DialogResult.Cancelled);
             }}
             isDismissable={isDismissable}
             isKeyboardDismissDisabled={!isDismissable}
diff --git a/Source/Dialogs/for_Dialog/when_busy_dismissal_is_attempted.tsx b/Source/Dialogs/for_Dialog/when_busy_dismissal_is_attempted.tsx
new file mode 100644
index 00000000..3ef2fcf6
--- /dev/null
+++ b/Source/Dialogs/for_Dialog/when_busy_dismissal_is_attempted.tsx
@@ -0,0 +1,43 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { expect } from 'chai';
+import { afterEach, beforeEach, describe, it, vi } from 'vitest';
+import { Dialog } from '../Dialog';
+import {
+    type DialogInTheDom,
+    pressEscape,
+    render,
+    unmount,
+} from './given/a_dialog_in_the_dom';
+
+describe('when busy dismissal is attempted', () => {
+    let dialog: DialogInTheDom;
+    const onCancel = vi.fn();
+
+    beforeEach(async () => {
+        onCancel.mockReset();
+        dialog = await render(
+            <Dialog title='Saving' isBusy dismissable onCancel={onCancel}>
+                Saving changes
+            </Dialog>,
+        );
+    });
+
+    afterEach(async () => {
+        await unmount(dialog);
+    });
+
+    it('should keep every dialog action disabled', () => {
+        const buttons = Array.from(document.querySelectorAll('button'));
+        expect(buttons.length).to.be.greaterThan(0);
+        expect(buttons.every((button) => button.disabled)).to.equal(true);
+    });
+
+    it('should ignore escape while work is in flight', async () => {
+        await pressEscape();
+        expect(onCancel.mock.calls).to.have.lengthOf(0);
+    });
+});
diff --git a/Source/Dropdown/Dropdown.tsx b/Source/Dropdown/Dropdown.tsx
index 17e8f560..aee3393b 100644
--- a/Source/Dropdown/Dropdown.tsx
+++ b/Source/Dropdown/Dropdown.tsx
@@ -58,53 +58,87 @@ interface DropdownLegacyControlAttributes {
 
 /** Stable Cratis-owned parts for styling a {@link Dropdown}. */
 export interface DropdownParts {
+    /** Outer Dropdown wrapper. */
     root?: HTMLAttributes<HTMLElement>;
     /** Legacy visible-control part, mapped onto the current trigger/filter input. */
     input?: DropdownLegacyControlAttributes;
     /** Legacy select-root alias for class, style, identity, and ARIA migration. */
     select?: DropdownLegacyControlAttributes;
+    /** Single-select trigger or filtered options button. */
     trigger?: DropdownTriggerAttributes;
+    /** Selected value display. */
     value?: HTMLAttributes<HTMLSpanElement>;
+    /** Selection clear button. */
     clear?: ButtonHTMLAttributes<HTMLButtonElement>;
+    /** Dropdown indicator. */
     indicator?: HTMLAttributes<HTMLSpanElement>;
+    /** Portaled options popover. */
     popover?: HTMLAttributes<HTMLDivElement>;
+    /** Options listbox. */
     listbox?: HTMLAttributes<HTMLDivElement>;
+    /** One option. */
     option?: HTMLAttributes<HTMLDivElement>;
+    /** Filter input. */
     filter?: InputHTMLAttributes<HTMLInputElement>;
+    /** Native multiple-select element used when filtering is off. */
     multiple?: SelectHTMLAttributes<HTMLSelectElement>;
 }
 
 /** Props for {@link Dropdown}. */
 export interface DropdownProps<T = unknown> {
+    /** Controlled selected value, or selected-value array in multiple mode. */
     value?: T;
+    /** Available scalar values or option objects. */
     options?: unknown[];
+    /** Property containing an option object's visible label. */
     optionLabel?: string;
+    /** Property containing an option object's bound value. */
     optionValue?: string;
+    /** Empty-selection text. */
     placeholder?: string;
+    /** Enables the filterable combobox path. */
     filter?: boolean;
+    /** Filter-input placeholder. */
     filterPlaceholder?: string;
+    /** Enables multiple selection. */
     multiple?: boolean;
+    /** Shows a clear-selection action. */
     showClear?: boolean;
+    /** Marks the control invalid. */
     invalid?: boolean;
+    /** Disables every control and clear action. */
     disabled?: boolean;
+    /** Extra class name for the outer wrapper. */
     className?: string;
+    /** Inline style for the outer wrapper. */
     style?: CSSProperties;
+    /** DOM identity of the focusable primary control. */
     id?: string;
     /** Legacy identity alias mapped to {@link id}. */
     inputId?: string;
     /** Legacy popup class alias mapped to the `popover` part. */
     panelClassName?: string;
+    /** Native form field name. */
     name?: string;
+    /** Primary-control tab order. */
     tabIndex?: number;
+    /** Accessible control name. */
     'aria-label'?: string;
+    /** Id of an external labeling element. */
     'aria-labelledby'?: string;
+    /** Id(s) of external descriptions. */
     'aria-describedby'?: string;
     /** Camel-case aliases retained for existing product wrappers. */
     ariaLabel?: string;
+    /** Legacy camel-case alias for `aria-labelledby`. */
     ariaLabelledBy?: string;
+    /** Legacy camel-case alias for `aria-describedby`. */
     ariaDescribedBy?: string;
+    /** Legacy invalid-state alias. */
     ariaInvalid?: boolean;
+    /** Invoked with the selected value(s). */
     onChange?: (event: DropdownChangeEvent<T>) => void;
+    /** Invoked when focus leaves the Dropdown wrapper. */
     onBlur?: FocusEventHandler<HTMLElement>;
     /** Cratis-owned per-part attributes. */
     pt?: DropdownParts;
@@ -205,12 +239,23 @@ export const Dropdown = <T = unknown,>({
         Object.is(option.value, value),
     );
     const selectedKey = selectedOption?.key ?? null;
-    const effectiveAriaLabel = ariaLabel ?? ariaLabelAlias ?? pt?.input?.['aria-label'];
+    const effectiveAriaLabel =
+        ariaLabel ??
+        ariaLabelAlias ??
+        pt?.input?.['aria-label'] ??
+        pt?.select?.['aria-label'];
     const effectiveAriaLabelledby =
-        ariaLabelledby ?? ariaLabelledBy ?? pt?.input?.['aria-labelledby'];
+        ariaLabelledby ??
+        ariaLabelledBy ??
+        pt?.input?.['aria-labelledby'] ??
+        pt?.select?.['aria-labelledby'];
     const effectiveAriaDescribedby =
-        ariaDescribedby ?? ariaDescribedBy ?? pt?.input?.['aria-describedby'];
-    const inputAriaInvalid = pt?.input?.['aria-invalid'];
+        ariaDescribedby ??
+        ariaDescribedBy ??
+        pt?.input?.['aria-describedby'] ??
+        pt?.select?.['aria-describedby'];
+    const inputAriaInvalid =
+        pt?.input?.['aria-invalid'] ?? pt?.select?.['aria-invalid'];
     const effectiveInvalid =
         invalid ??
         ariaInvalid ??
@@ -224,7 +269,8 @@ export const Dropdown = <T = unknown,>({
         pt?.select?.className,
         className,
     );
-    const triggerId = id ?? inputId ?? pt?.trigger?.id ?? pt?.input?.id;
+    const triggerId =
+        id ?? inputId ?? pt?.trigger?.id ?? pt?.input?.id ?? pt?.select?.id;
 
     const selectOption = (key: Key | null) => {
         const option = resolvedOptions.find((candidate) => candidate.key === String(key));
diff --git a/Source/Dropdown/for_Dropdown/when_using_migration_aliases.tsx b/Source/Dropdown/for_Dropdown/when_using_migration_aliases.tsx
index dedea3a9..ac1a44c3 100644
--- a/Source/Dropdown/for_Dropdown/when_using_migration_aliases.tsx
+++ b/Source/Dropdown/for_Dropdown/when_using_migration_aliases.tsx
@@ -76,6 +76,31 @@ describe('when using migration aliases', () => {
         expect(trigger.getAttribute('aria-invalid')).to.equal('true');
     });
 
+    it('should map legacy select identity and aria values to the control', async () => {
+        await act(async () => {
+            root.render(
+                <CratisComponentsProvider>
+                    <Dropdown
+                        options={[{ label: 'Developer', value: 'developer' }]}
+                        pt={{
+                            select: {
+                                id: 'select-role',
+                                'aria-label': 'Role from select alias',
+                            },
+                        }}
+                    />
+                </CratisComponentsProvider>,
+            );
+        });
+        const renderedTrigger = container.querySelector<HTMLButtonElement>(
+            '[data-cratis-part="trigger"]',
+        );
+        expect(renderedTrigger?.id).to.equal('select-role');
+        expect(renderedTrigger?.getAttribute('aria-label')).to.equal(
+            'Role from select alias',
+        );
+    });
+
     it('should map legacy input and select classes to stable Cratis elements', () => {
         expect(trigger.classList.contains('product-dropdown-input')).to.equal(true);
         expect(dropdownRoot.classList.contains('product-dropdown-select')).to.equal(true);
diff --git a/Source/Notifications/Toaster.tsx b/Source/Notifications/Toaster.tsx
index da24a38e..1c3d8d9e 100644
--- a/Source/Notifications/Toaster.tsx
+++ b/Source/Notifications/Toaster.tsx
@@ -17,6 +17,7 @@ import {
     type ToastSeverity,
 } from './toast';
 
+/** Supported viewport positions for the global toast region. */
 export type ToasterPosition =
     | 'top-left'
     | 'top-center'
@@ -25,23 +26,39 @@ export type ToasterPosition =
     | 'bottom-center'
     | 'bottom-right';
 
+/** Stable part attributes for {@link Toaster}. */
 export interface ToasterPassThrough {
+    /** Accessible toast region. */
     region?: HTMLAttributes<HTMLDivElement>;
+    /** One toast article. */
     toast?: HTMLAttributes<HTMLElement>;
+    /** Severity/custom icon wrapper. */
     icon?: HTMLAttributes<HTMLSpanElement>;
+    /** Toast content wrapper. */
     content?: HTMLAttributes<HTMLDivElement>;
+    /** Toast title. */
     title?: HTMLAttributes<HTMLDivElement>;
+    /** Toast description. */
     description?: HTMLAttributes<HTMLDivElement>;
+    /** Dismiss button. */
     close?: ButtonHTMLAttributes<HTMLButtonElement>;
+    /** Optional toast action button. */
     action?: ButtonHTMLAttributes<HTMLButtonElement>;
 }
 
+/** Props for the global accessible toast region. */
 export interface ToasterProps {
+    /** Viewport position. */
     position?: ToasterPosition;
+    /** Maximum visible toast count. */
     limit?: number;
+    /** Default timeout in milliseconds. */
     timeout?: number;
+    /** Accessible label for dismiss buttons. */
     dismissAriaLabel?: string;
+    /** Accessible name for the toast region. */
     regionAriaLabel?: string;
+    /** Stable part attributes. */
     pt?: ToasterPassThrough;
 }
 
diff --git a/Source/README.md b/Source/README.md
index 179e1db1..3f814bd3 100644
--- a/Source/README.md
+++ b/Source/README.md
@@ -160,6 +160,7 @@ Do not target React Aria classes or internal DOM structure.
 ## Entry points
 
 - `@cratis/components`
+- `@cratis/components/Canvas`
 - `@cratis/components/CommandDialog`
 - `@cratis/components/CommandStepper`
 - `@cratis/components/CommandForm`
diff --git a/Source/TimeMachine/ReadModelView.tsx b/Source/TimeMachine/ReadModelView.tsx
index 8af86e5d..8aa0d755 100644
--- a/Source/TimeMachine/ReadModelView.tsx
+++ b/Source/TimeMachine/ReadModelView.tsx
@@ -1,10 +1,12 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import React, { useState } from 'react';
+import type React from 'react';
+import { useState } from 'react';
 import type { Version } from './types';
 import { type TimeMachineLabels, defaultTimeMachineLabels } from './TimeMachineLabels';
 import { Properties } from './Properties';
+import { FaArrowRotateLeft, FaArrowRotateRight } from 'react-icons/fa6';
 
 /**
  * Props for {@link ReadModelView}.
@@ -124,7 +126,11 @@ export const ReadModelView: React.FC<ReadModelViewProps> = ({
                                                     aria-label={labels.showRelatedEvents}
                                                     aria-pressed={isFlipped}
                                                 >
-                                                    <i className={`pi ${isFlipped ? 'pi-undo' : 'pi-refresh'}`} />
+                                                    {isFlipped ? (
+                                                        <FaArrowRotateLeft aria-hidden='true' />
+                                                    ) : (
+                                                        <FaArrowRotateRight aria-hidden='true' />
+                                                    )}
                                                 </button>
                                             </div>
                                         </div>
@@ -148,7 +154,11 @@ export const ReadModelView: React.FC<ReadModelViewProps> = ({
                                                     aria-label={labels.showReadModelSnapshot}
                                                     aria-pressed={isFlipped}
                                                 >
-                                                    <i className={`pi ${isFlipped ? 'pi-undo' : 'pi-refresh'}`} />
+                                                    {isFlipped ? (
+                                                        <FaArrowRotateLeft aria-hidden='true' />
+                                                    ) : (
+                                                        <FaArrowRotateRight aria-hidden='true' />
+                                                    )}
                                                 </button>
                                             </div>
                                         </div>
diff --git a/Source/TimeMachine/TimeMachine.tsx b/Source/TimeMachine/TimeMachine.tsx
index 533781b5..384555c9 100644
--- a/Source/TimeMachine/TimeMachine.tsx
+++ b/Source/TimeMachine/TimeMachine.tsx
@@ -6,6 +6,7 @@ import type { Version } from './types';
 import { ReadModelView } from './ReadModelView';
 import { EventsView } from './EventsView';
 import { type TimeMachineLabels, defaultTimeMachineLabels } from './TimeMachineLabels';
+import { FaBoxArchive, FaList } from 'react-icons/fa6';
 
 export type { TimeMachineLabels } from './TimeMachineLabels';
 export { defaultTimeMachineLabels } from './TimeMachineLabels';
@@ -109,20 +110,22 @@ export const TimeMachine: React.FC<TimeMachineProps> = ({
       {/* View Switcher */}
       <div className="view-switcher">
         <button
+          type='button'
           className={`view-button ${viewMode === ViewModes.ReadModel ? 'active' : ''}`}
           onClick={() => setViewMode(ViewModes.ReadModel)}
           aria-label={l.readModelView}
           title={l.readModelView}
         >
-          <i className="pi pi-box" />
+          <FaBoxArchive aria-hidden='true' />
         </button>
         <button
+          type='button'
           className={`view-button ${viewMode === ViewModes.Events ? 'active' : ''}`}
           onClick={() => setViewMode(ViewModes.Events)}
           aria-label={l.eventsView}
           title={l.eventsView}
         >
-          <i className="pi pi-list" />
+          <FaList aria-hidden='true' />
         </button>
       </div>
 
@@ -155,6 +158,7 @@ export const TimeMachine: React.FC<TimeMachineProps> = ({
       {viewMode === ViewModes.ReadModel && (
         <div className="navigation-controls">
           <button
+            type='button'
             className="nav-button prev"
             disabled={selectedIndex === 0}
             onClick={() => handleVersionSelect(Math.max(0, selectedIndex - 1))}
@@ -163,6 +167,7 @@ export const TimeMachine: React.FC<TimeMachineProps> = ({
             ‹
           </button>
           <button
+            type='button'
             className="nav-button next"
             disabled={selectedIndex === versions.length - 1}
             onClick={() => handleVersionSelect(Math.min(versions.length - 1, selectedIndex + 1))}

From b7d3f7268270171eba758b5bf899bc313ca19ef5 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Sun, 23 Aug 2026 18:16:28 +0200
Subject: [PATCH 019/267] Remove stale renderer assumptions from tests and
 guidance

Exercise the owned dialog and stepper markup directly, update Storybook and toolbar examples to Cratis contracts, preserve selection without a data key by object reference, and broaden DatePicker part attributes without leaking implementation types.
---
 .ai/skills/toolbar/SKILL.md                   | 78 +++++++--------
 .../CommandForm/color-picker-field.md         |  2 +-
 .../CommandDialog/CommandDialog.stories.tsx   | 99 +++++++------------
 .../CommandDialog/CommandStepper.stories.tsx  | 15 +--
 Source/CommandDialog/CommandStepper.tsx       |  3 +
 .../StepperCommandDialog.stories.tsx          | 82 ++++++---------
 Source/CommandDialog/StepperCommandDialog.tsx | 16 ++-
 ...n_a_renamed_field_is_nested_in_a_column.ts | 15 +--
 ...ld_carries_only_the_legacy_display_name.ts | 15 +--
 .../when_field_display_name_is_overwritten.ts | 17 +---
 .../when_given_initial_valid_values.ts        | 18 +---
 .../when_inspecting_the_column_wrapper.ts     | 15 +--
 .../for_CommandDialog/when_not_executing.ts   | 19 +---
 .../when_validity_is_gated.ts                 | 47 +--------
 .../and_a_bare_string_sits_between_steps.ts   | 16 +--
 .../and_it_is_in_the_middle.ts                | 42 ++------
 .../and_it_is_null.ts                         | 16 +--
 .../and_it_is_undefined.ts                    | 16 +--
 .../and_the_first_step_is_hidden.ts           | 16 +--
 .../and_the_last_step_is_false.ts             | 16 +--
 .../and_the_steps_come_from_a_map.ts          | 16 +--
 .../and_two_are_hidden.ts                     | 16 +--
 .../when_every_step_is_hidden.ts              | 16 +--
 ...ive_step_is_past_the_last_rendered_step.ts | 16 +--
 ...n_a_step_disappears_after_it_was_passed.ts | 16 +--
 .../and_a_bare_string_sits_between_steps.ts   | 16 +--
 .../and_it_is_in_the_middle.ts                | 44 ++-------
 .../and_it_is_null.ts                         | 16 +--
 .../and_it_is_undefined.ts                    | 16 +--
 .../and_the_first_step_is_hidden.ts           | 16 +--
 .../and_the_last_step_is_false.ts             | 16 +--
 .../and_the_steps_come_from_a_map.ts          | 16 +--
 .../and_two_are_hidden.ts                     | 16 +--
 .../and_escape_is_pressed.ts                  | 16 +--
 .../and_the_header_close_is_used.ts           | 16 +--
 .../when_every_step_is_hidden.ts              | 16 +--
 .../when_form_is_invalid.ts                   | 16 +--
 .../when_not_executing.ts                     | 16 +--
 .../and_an_async_transform_has_not_settled.ts | 16 +--
 .../and_it_is_asked_for.ts                    | 16 +--
 .../and_it_is_clicked.ts                      | 16 +--
 .../and_it_is_given_a_label.ts                | 16 +--
 .../and_it_is_not_asked_for.ts                | 16 +--
 .../and_submit_is_clicked_instead.ts          | 16 +--
 .../and_the_command_is_executing.ts           | 16 +--
 .../when_single_step.ts                       | 16 +--
 .../when_step_has_field_errors.ts             | 43 ++------
 Source/Common/DatePickerInput.tsx             | 13 ++-
 Source/Common/ErrorBoundary.stories.tsx       |  5 +-
 Source/Common/FormElement.tsx                 | 10 +-
 Source/Common/Icon.tsx                        |  9 +-
 Source/DataPage/DataPage.stories.tsx          | 11 +--
 Source/DataTables/DataTableCore.tsx           | 12 ++-
 .../when_selecting_by_object_reference.tsx    | 51 ++++++++++
 Source/Dialogs/Dialog.stories.tsx             |  2 +-
 .../for_Dialog/when_rendered_with_is_busy.ts  | 30 +-----
 .../ObjectContentEditor.stories.tsx           |  9 +-
 Source/PivotViewer/PivotViewer.stories.tsx    |  4 +-
 Source/Toolbar/ToolbarButton.tsx              |  2 +-
 Source/Toolbar/ToolbarFanOutItem.tsx          |  2 +-
 60 files changed, 288 insertions(+), 922 deletions(-)
 create mode 100644 Source/DataTables/for_DataTableCore/when_selecting_by_object_reference.tsx

diff --git a/.ai/skills/toolbar/SKILL.md b/.ai/skills/toolbar/SKILL.md
index 61a7df8b..b5dfd81a 100644
--- a/.ai/skills/toolbar/SKILL.md
+++ b/.ai/skills/toolbar/SKILL.md
@@ -43,9 +43,9 @@ import { Toolbar, ToolbarButton } from '@cratis/components/Toolbar';
 
 export const DrawingToolbar = () => (
     <Toolbar>
-        <ToolbarButton icon='pi pi-arrow-up-left' tooltip='Select' />
-        <ToolbarButton icon='pi pi-pencil' tooltip='Draw' />
-        <ToolbarButton icon='pi pi-stop' tooltip='Rectangle' />
+        <ToolbarButton text='↖' title='Select' />
+        <ToolbarButton text='✎' title='Draw' />
+        <ToolbarButton text='□' title='Rectangle' />
     </Toolbar>
 );
 ```
@@ -66,20 +66,20 @@ export const DrawingToolbar = () => {
     return (
         <Toolbar>
             <ToolbarButton
-                icon='pi pi-arrow-up-left'
-                tooltip='Select'
+                text='↖'
+                title='Select'
                 active={activeTool === 'select'}
                 onClick={() => setActiveTool('select')}
             />
             <ToolbarButton
-                icon='pi pi-pencil'
-                tooltip='Draw'
+                text='✎'
+                title='Draw'
                 active={activeTool === 'draw'}
                 onClick={() => setActiveTool('draw')}
             />
             <ToolbarButton
-                icon='pi pi-stop'
-                tooltip='Rectangle'
+                text='□'
+                title='Rectangle'
                 active={activeTool === 'rect'}
                 onClick={() => setActiveTool('rect')}
             />
@@ -96,11 +96,11 @@ export const DrawingToolbar = () => {
 
 ```tsx
 <Toolbar>
-    <ToolbarButton icon='pi pi-pencil' tooltip='Draw' />
-    <ToolbarButton icon='pi pi-stop' tooltip='Rectangle' />
+    <ToolbarButton text='✎' title='Draw' />
+    <ToolbarButton text='□' title='Rectangle' />
     <ToolbarSeparator />
-    <ToolbarButton icon='pi pi-undo' tooltip='Undo' />
-    <ToolbarButton icon='pi pi-refresh' tooltip='Redo' />
+    <ToolbarButton text='↶' title='Undo' />
+    <ToolbarButton text='↷' title='Redo' />
 </Toolbar>
 ```
 
@@ -119,11 +119,11 @@ export const ZoomToolbar = () => {
 
     return (
         <Toolbar orientation='horizontal'>
-            <ToolbarButton icon='pi pi-minus' tooltip='Zoom out' tooltipPosition='bottom' onClick={() => setZoom(z => z - 10)} />
-            <ToolbarButton text={`${zoom}%`} tooltip='Reset zoom' tooltipPosition='bottom' onClick={() => setZoom(100)} />
-            <ToolbarButton icon='pi pi-plus' tooltip='Zoom in' tooltipPosition='bottom' onClick={() => setZoom(z => z + 10)} />
+            <ToolbarButton text='−' title='Zoom out' tooltipPosition='bottom' onClick={() => setZoom(z => z - 10)} />
+            <ToolbarButton text={`${zoom}%`} title='Reset zoom' tooltipPosition='bottom' onClick={() => setZoom(100)} />
+            <ToolbarButton text='+' title='Zoom in' tooltipPosition='bottom' onClick={() => setZoom(z => z + 10)} />
             <ToolbarSeparator orientation='horizontal' />
-            <ToolbarButton icon='pi pi-question-circle' tooltip='Help' tooltipPosition='bottom' />
+            <ToolbarButton text='?' title='Help' tooltipPosition='bottom' />
         </Toolbar>
     );
 };
@@ -146,20 +146,20 @@ export const ContextualToolbar = () => {
 
     return (
         <Toolbar>
-            <ToolbarButton icon='pi pi-arrow-up-left' tooltip='Select' />
+            <ToolbarButton text='↖' title='Select' />
             <ToolbarSection activeContext={mode}>
                 <ToolbarContext name='drawing'>
-                    <ToolbarButton icon='pi pi-pencil' tooltip='Draw' />
-                    <ToolbarButton icon='pi pi-stop' tooltip='Rectangle' />
-                    <ToolbarButton icon='pi pi-circle' tooltip='Circle' />
+                    <ToolbarButton text='✎' title='Draw' />
+                    <ToolbarButton text='□' title='Rectangle' />
+                    <ToolbarButton text='○' title='Circle' />
                 </ToolbarContext>
                 <ToolbarContext name='text'>
-                    <ToolbarButton icon='pi pi-align-left' tooltip='Align Left' />
-                    <ToolbarButton icon='pi pi-align-center' tooltip='Align Center' />
-                    <ToolbarButton icon='pi pi-align-right' tooltip='Align Right' />
+                    <ToolbarButton text='⇤' title='Align Left' />
+                    <ToolbarButton text='↔' title='Align Center' />
+                    <ToolbarButton text='⇥' title='Align Right' />
                 </ToolbarContext>
             </ToolbarSection>
-            <ToolbarButton icon='pi pi-undo' tooltip='Undo' />
+            <ToolbarButton text='↶' title='Undo' />
         </Toolbar>
     );
 };
@@ -178,11 +178,11 @@ import { Toolbar, ToolbarButton, ToolbarFanOutItem } from '@cratis/components/To
 
 export const ShapesToolbar = () => (
     <Toolbar>
-        <ToolbarButton icon='pi pi-arrow-up-left' tooltip='Select' />
-        <ToolbarFanOutItem icon='pi pi-th-large' tooltip='Shapes'>
-            <ToolbarButton icon='pi pi-stop' tooltip='Rectangle' />
-            <ToolbarButton icon='pi pi-circle' tooltip='Circle' />
-            <ToolbarButton icon='pi pi-minus' tooltip='Line' />
+        <ToolbarButton text='↖' title='Select' />
+        <ToolbarFanOutItem icon={<span aria-hidden='true'>▦</span>} tooltip='Shapes'>
+            <ToolbarButton text='□' title='Rectangle' />
+            <ToolbarButton text='○' title='Circle' />
+            <ToolbarButton text='―' title='Line' />
         </ToolbarFanOutItem>
     </Toolbar>
 );
@@ -191,7 +191,7 @@ export const ShapesToolbar = () => (
 When the toolbar is on the **right side** of the screen, fan out to the left:
 
 ```tsx
-<ToolbarFanOutItem icon='pi pi-th-large' tooltip='Shapes' fanOutDirection='left'>
+<ToolbarFanOutItem icon={<span aria-hidden='true'>▦</span>} tooltip='Shapes' fanOutDirection='left'>
     ...
 </ToolbarFanOutItem>
 ```
@@ -211,9 +211,9 @@ When the toolbar is on the **right side** of the screen, fan out to the left:
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `icon` | `string` | — | PrimeIcons CSS class (e.g. `'pi pi-pencil'`) |
+| `icon` | `Icon` | — | React node or consumer-owned icon class; Components does not install an icon font |
 | `text` | `string` | — | Text shown inside the button (use for values like zoom %) |
-| `tooltip` | `string` | **required** | Tooltip text on hover |
+| `title` | `string` | **required** | Accessible name and hover/focus tooltip |
 | `active` | `boolean` | `false` | Highlights the button as selected |
 | `onClick` | `() => void` | — | Click handler |
 | `tooltipPosition` | `'top' \| 'right' \| 'bottom' \| 'left'` | `'right'` | Tooltip position |
@@ -243,10 +243,10 @@ When the toolbar is on the **right side** of the screen, fan out to the left:
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `icon` | `string` | **required** | PrimeIcons CSS class for the trigger button |
+| `icon` | `Icon` | **required** | React node or consumer-owned icon class for the trigger |
 | `tooltip` | `string` | **required** | Tooltip for the trigger button |
 | `tooltipPosition` | `'top' \| 'right' \| 'bottom' \| 'left'` | `'right'` | Tooltip position |
-| `fanOutDirection` | `'right' \| 'left'` | `'right'` | Direction the sub-panel slides out |
+| `fanOutDirection` | `'right' \| 'left' \| 'up' \| 'down'` | `'right'` | Direction the sub-panel slides out |
 | `children` | `ReactNode` | — | `ToolbarButton` elements inside the fan-out panel |
 
 ---
@@ -258,12 +258,12 @@ Render separate `Toolbar` instances to create distinct groups:
 ```tsx
 <div className='flex flex-column gap-2'>
     <Toolbar>
-        <ToolbarButton icon='pi pi-arrow-up-left' tooltip='Select' />
-        <ToolbarButton icon='pi pi-pencil' tooltip='Draw' />
+        <ToolbarButton text='↖' title='Select' />
+        <ToolbarButton text='✎' title='Draw' />
     </Toolbar>
     <Toolbar>
-        <ToolbarButton icon='pi pi-undo' tooltip='Undo' />
-        <ToolbarButton icon='pi pi-refresh' tooltip='Redo' />
+        <ToolbarButton text='↶' title='Undo' />
+        <ToolbarButton text='↷' title='Redo' />
     </Toolbar>
 </div>
 ```
diff --git a/Documentation/CommandForm/color-picker-field.md b/Documentation/CommandForm/color-picker-field.md
index e8813838..c47fdba4 100644
--- a/Documentation/CommandForm/color-picker-field.md
+++ b/Documentation/CommandForm/color-picker-field.md
@@ -28,4 +28,4 @@ import { ColorPickerField } from '@cratis/components/CommandForm';
 
 - Default value is an empty string.
 - Values are persisted as six-digit hex strings without the leading `#`.
-- Validation state is reflected by applying the `p-invalid` class when the field is invalid.
+- Validation state is exposed through `aria-invalid` on the native color input and `data-invalid` on the stable root part.
diff --git a/Source/CommandDialog/CommandDialog.stories.tsx b/Source/CommandDialog/CommandDialog.stories.tsx
index 166cb3b1..6c0ad5ec 100644
--- a/Source/CommandDialog/CommandDialog.stories.tsx
+++ b/Source/CommandDialog/CommandDialog.stories.tsx
@@ -157,15 +157,12 @@ export const Default: Story = {
 
         return (
             <div className="storybook-wrapper">
-                <button
-                    className="p-button p-component mb-3"
-                    onClick={async () => {
-                        const [dialogResult, commandResult] = await showUpdateUserDialog();
-                        if (dialogResult === DialogResult.Ok && commandResult) {
-                            setResult(JSON.stringify(commandResult));
-                        }
-                    }}
-                >
+                <button className="cratis-button mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={async () => {
+                    const [dialogResult, commandResult] = await showUpdateUserDialog();
+                    if (dialogResult === DialogResult.Ok && commandResult) {
+                        setResult(JSON.stringify(commandResult));
+                    }
+                }}>
                     Open Dialog
                 </button>
 
@@ -189,14 +186,11 @@ export const WithServerValidation: Story = {
 
         return (
             <div className="storybook-wrapper">
-                <button
-                    className="p-button p-component mb-3"
-                    onClick={() => {
-                        setVisible(true);
-                        setValidationErrors([]);
-                        setResult('');
-                    }}
-                >
+                <button className="cratis-button mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => {
+                    setVisible(true);
+                    setValidationErrors([]);
+                    setResult('');
+                }}>
                     Open Dialog
                 </button>
 
@@ -267,13 +261,8 @@ export const WithInitialValues: Story = {
             <div className="storybook-wrapper">
                 <div style={{ display: 'flex', gap: '0.5rem', marginBottom: '1rem' }}>
                     {users.map(user => (
-                        <button
-                            key={user.email}
-                            className="p-button p-component"
-                            onClick={() => handleEdit(user)}
-                        >
-                            Edit {user.name}
-                        </button>
+                        <button key={user.email} className="cratis-button" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => handleEdit(user)}>
+                            Edit {user.name}</button>
                     ))}
                 </div>
 
@@ -314,13 +303,10 @@ export const WithCustomValidation: Story = {
 
         return (
             <div className="storybook-wrapper">
-                <button
-                    className="p-button p-component mb-3"
-                    onClick={() => {
-                        setResult('');
-                        setVisible(true);
-                    }}
-                >
+                <button className="cratis-button mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => {
+                    setResult('');
+                    setVisible(true);
+                }}>
                     Open Dialog
                 </button>
 
@@ -376,7 +362,7 @@ export const ValidationOnBlur: Story = {
 
         return (
             <div className="storybook-wrapper">
-                <button className="p-button p-component mb-3" onClick={() => setVisible(true)}>
+                <button className="cratis-button mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => setVisible(true)}>
                     Open Dialog
                 </button>
                 <CommandDialog<UpdateUserCommand>
@@ -405,7 +391,7 @@ export const ValidationOnChange: Story = {
 
         return (
             <div className="storybook-wrapper">
-                <button className="p-button p-component mb-3" onClick={() => setVisible(true)}>
+                <button className="cratis-button mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => setVisible(true)}>
                     Open Dialog
                 </button>
                 <CommandDialog<UpdateUserCommand>
@@ -434,7 +420,7 @@ export const ValidateOnInit: Story = {
 
         return (
             <div className="storybook-wrapper">
-                <button className="p-button p-component mb-3" onClick={() => setVisible(true)}>
+                <button className="cratis-button mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => setVisible(true)}>
                     Open Dialog
                 </button>
                 <CommandDialog<UpdateUserCommand>
@@ -464,7 +450,7 @@ export const ValidateAllFieldsOnChange: Story = {
 
         return (
             <div className="storybook-wrapper">
-                <button className="p-button p-component mb-3" onClick={() => setVisible(true)}>
+                <button className="cratis-button mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => setVisible(true)}>
                     Open Dialog
                 </button>
                 <CommandDialog<UpdateUserCommand>
@@ -495,7 +481,7 @@ export const BeforeExecute: Story = {
 
         return (
             <div className="storybook-wrapper">
-                <button className="p-button p-component mb-3" onClick={() => { setVisible(true); setPreprocessedData(''); }}>
+                <button className="cratis-button mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => { setVisible(true); setPreprocessedData(''); }}>
                     Open Dialog
                 </button>
 
@@ -538,7 +524,7 @@ export const WithIcons: Story = {
 
         return (
             <div className="storybook-wrapper">
-                <button className="p-button p-component mb-3" onClick={() => setVisible(true)}>
+                <button className="cratis-button mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => setVisible(true)}>
                     Open Dialog
                 </button>
                 <CommandDialog<UpdateUserCommand>
@@ -631,7 +617,7 @@ export const MultiColumnLayout: Story = {
 
         return (
             <div className="storybook-wrapper">
-                <button className="p-button p-component mb-3" onClick={() => setVisible(true)}>
+                <button className="cratis-button mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => setVisible(true)}>
                     Open Dialog
                 </button>
                 <CommandDialog<UpdateProfileCommand>
@@ -668,7 +654,7 @@ export const MixedChildren: Story = {
 
         return (
             <div className="storybook-wrapper">
-                <button className="p-button p-component mb-3" onClick={() => setVisible(true)}>
+                <button className="cratis-button mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => setVisible(true)}>
                     Open Dialog
                 </button>
                 <CommandDialog<UpdateProfileCommand>
@@ -704,13 +690,10 @@ export const WithBusyState: Story = {
 
         return (
             <div className="storybook-wrapper">
-                <button
-                    className="p-button p-component mb-3"
-                    onClick={() => {
-                        setResult('');
-                        setVisible(true);
-                    }}
-                >
+                <button className="cratis-button mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => {
+                    setResult('');
+                    setVisible(true);
+                }}>
                     Open Dialog
                 </button>
 
@@ -798,14 +781,11 @@ export const WithResponseTypeAndCallbacks: Story = {
 
         return (
             <div className="storybook-wrapper">
-                <button
-                    className="p-button p-component mb-3"
-                    onClick={() => {
-                        setResult('');
-                        setError('');
-                        setVisible(true);
-                    }}
-                >
+                <button className="cratis-button mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => {
+                    setResult('');
+                    setError('');
+                    setVisible(true);
+                }}>
                     Open Dialog
                 </button>
 
@@ -923,13 +903,10 @@ export const DestructiveCommandFocusesDismiss: Story = {
 
         return (
             <div className="storybook-wrapper">
-                <button
-                    className="p-button p-component mb-3"
-                    onClick={async () => {
-                        const [dialogResult] = await showDeletePersonalDataDialog();
-                        setResult(dialogResult === DialogResult.Ok ? 'Deleted' : 'Kept');
-                    }}
-                >
+                <button className="cratis-button mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={async () => {
+                    const [dialogResult] = await showDeletePersonalDataDialog();
+                    setResult(dialogResult === DialogResult.Ok ? 'Deleted' : 'Kept');
+                }}>
                     Delete
                 </button>
 
diff --git a/Source/CommandDialog/CommandStepper.stories.tsx b/Source/CommandDialog/CommandStepper.stories.tsx
index 2a4b761f..e5b2b02e 100644
--- a/Source/CommandDialog/CommandStepper.stories.tsx
+++ b/Source/CommandDialog/CommandStepper.stories.tsx
@@ -172,8 +172,8 @@ export const InDialogFrame: Story = {
                         )}
                     </div>
                     <div className="command-stepper-stories-footer">
-                        <button className="p-button p-button-secondary">Cancel</button>
-                        <button className="p-button p-button-primary">Create</button>
+                        <button className="cratis-button" data-variant="outlined" data-severity="secondary" data-size="normal" >Cancel</button>
+                        <button  className="cratis-button" data-variant="filled" data-severity="secondary" data-size="normal" >Create</button>
                     </div>
                 </div>
             </div>
@@ -235,8 +235,8 @@ export const InDialogFrameWithCenteredHeader: Story = {
                         )}
                     </div>
                     <div className="command-stepper-stories-footer">
-                        <button className="p-button p-button-secondary">Cancel</button>
-                        <button className="p-button p-button-primary">Complete</button>
+                        <button className="cratis-button" data-variant="outlined" data-severity="secondary" data-size="normal" >Cancel</button>
+                        <button  className="cratis-button" data-variant="filled" data-severity="secondary" data-size="normal" >Complete</button>
                     </div>
                 </div>
             </div>
@@ -362,12 +362,7 @@ export const ConditionalSteps: Story = {
 
         return (
             <div style={{ width: '600px', padding: '1.5rem' }}>
-                <button
-                    className="p-button p-component mb-3"
-                    onClick={() => setIncludeBudgetStep(current => !current)}
-                >
-                    {includeBudgetStep ? 'Hide the optional Budget step' : 'Show the optional Budget step'}
-                </button>
+                <button className="cratis-button mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => setIncludeBudgetStep(current => !current)}>{includeBudgetStep ? 'Hide the optional Budget step' : 'Show the optional Budget step'}</button>
                 <p className="mb-3 text-sm text-color-secondary">
                     The Budget step is currently <strong>{includeBudgetStep ? 'shown' : 'hidden'}</strong>, so the
                     wizard has {includeBudgetStep ? 'three' : 'two'} steps.
diff --git a/Source/CommandDialog/CommandStepper.tsx b/Source/CommandDialog/CommandStepper.tsx
index da60a470..de9f7b86 100644
--- a/Source/CommandDialog/CommandStepper.tsx
+++ b/Source/CommandDialog/CommandStepper.tsx
@@ -65,6 +65,7 @@ export interface StepperParts {
     panel?: HTMLAttributes<HTMLElement>;
 }
 
+/** Public layout, navigation, and stable-part customization shared by both steppers. */
 export interface StepperCustomizationProps {
     /**
      * Whether the wizard is linear. In linear mode the step headers are not
@@ -91,6 +92,7 @@ export interface StepperCustomizationProps {
     unstyled?: boolean;
 }
 
+/** Controlled state and validation props for the visual stepper content. */
 export interface CommandStepperContentProps extends StepperCustomizationProps {
     /** The active step index. */
     activeStep: number;
@@ -126,6 +128,7 @@ export interface CommandStepperContentProps extends StepperCustomizationProps {
     onSubmit?: () => void | Promise<void>;
 }
 
+/** Props for a standalone stepper bound to one Arc command form. */
 export interface CommandStepperProps<TCommand extends object, TResponse = object>
     extends
         Omit<CommandFormProps<TCommand, TResponse>, 'children' | 'onBeforeExecute'>,
diff --git a/Source/CommandDialog/StepperCommandDialog.stories.tsx b/Source/CommandDialog/StepperCommandDialog.stories.tsx
index fbb6c8c4..a3778809 100644
--- a/Source/CommandDialog/StepperCommandDialog.stories.tsx
+++ b/Source/CommandDialog/StepperCommandDialog.stories.tsx
@@ -123,17 +123,14 @@ export const Default: Story = {
 
         return (
             <div className="storybook-wrapper">
-                <button
-                    className="p-button p-component mb-3"
-                    onClick={async () => {
-                        const [dialogResult, commandResult] = await showCreateProjectDialog();
-                        if (dialogResult === DialogResult.Ok && commandResult) {
-                            setResult(JSON.stringify(commandResult));
-                        } else {
-                            setResult('Cancelled');
-                        }
-                    }}
-                >
+                <button className="cratis-button mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={async () => {
+                    const [dialogResult, commandResult] = await showCreateProjectDialog();
+                    if (dialogResult === DialogResult.Ok && commandResult) {
+                        setResult(JSON.stringify(commandResult));
+                    } else {
+                        setResult('Cancelled');
+                    }
+                }}>
                     Open Dialog
                 </button>
 
@@ -156,13 +153,10 @@ export const ThreeSteps: Story = {
 
         return (
             <div className="storybook-wrapper">
-                <button
-                    className="p-button p-component mb-3"
-                    onClick={() => {
-                        setVisible(true);
-                        setResult('');
-                    }}
-                >
+                <button className="cratis-button mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => {
+                    setVisible(true);
+                    setResult('');
+                }}>
                     Open Three-Step Dialog
                 </button>
 
@@ -228,10 +222,7 @@ export const WithValidationIndicators: Story = {
                     <code>validateOnInit</code> triggers validation immediately — step indicators appear on
                     any step whose fields are invalid right from the start.
                 </p>
-                <button
-                    className="p-button p-component mb-3"
-                    onClick={() => setVisible(true)}
-                >
+                <button className="cratis-button mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => setVisible(true)}>
                     Open Dialog
                 </button>
 
@@ -286,10 +277,7 @@ export const WithBusyState: Story = {
                 <p className="mb-3 text-sm text-color-secondary">
                     Simulates a 2-second server delay. Fill all fields and click Submit to see the busy state.
                 </p>
-                <button
-                    className="p-button p-component mb-3"
-                    onClick={() => setVisible(true)}
-                >
+                <button className="cratis-button mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => setVisible(true)}>
                     Open Dialog
                 </button>
 
@@ -392,14 +380,11 @@ export const WithResponseTypeAndCallbacks: Story = {
 
         return (
             <div className="storybook-wrapper">
-                <button
-                    className="p-button p-component mb-3"
-                    onClick={() => {
-                        setResult('');
-                        setError('');
-                        setVisible(true);
-                    }}
-                >
+                <button className="cratis-button mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => {
+                    setResult('');
+                    setError('');
+                    setVisible(true);
+                }}>
                     Open Dialog
                 </button>
 
@@ -484,13 +469,10 @@ export const WithFooterCancel: Story = {
                     The footer leads with a renamed Cancel. Fill both steps and click Create to run a 2-second
                     command — while it runs, neither the footer Cancel nor the header X can dismiss the dialog.
                 </p>
-                <button
-                    className="p-button p-component mb-3"
-                    onClick={() => {
-                        setOutcome('');
-                        setVisible(true);
-                    }}
-                >
+                <button className="cratis-button mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => {
+                    setOutcome('');
+                    setVisible(true);
+                }}>
                     Open Dialog
                 </button>
 
@@ -562,19 +544,11 @@ export const ConditionalSteps: Story = {
 
         return (
             <div className="storybook-wrapper">
-                <button
-                    className="p-button p-component mb-3"
-                    onClick={() => setIncludeBudgetStep(current => !current)}
-                >
-                    {includeBudgetStep ? 'Hide the optional Budget step' : 'Show the optional Budget step'}
-                </button>
-                <button
-                    className="p-button p-component mb-3 ml-2"
-                    onClick={() => {
-                        setResult('');
-                        setVisible(true);
-                    }}
-                >
+                <button className="cratis-button mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => setIncludeBudgetStep(current => !current)}>{includeBudgetStep ? 'Hide the optional Budget step' : 'Show the optional Budget step'}</button>
+                <button className="cratis-button mb-3 ml-2" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => {
+                    setResult('');
+                    setVisible(true);
+                }}>
                     Open Dialog
                 </button>
                 <p className="mb-3 text-sm text-color-secondary">
diff --git a/Source/CommandDialog/StepperCommandDialog.tsx b/Source/CommandDialog/StepperCommandDialog.tsx
index c93477a0..82435b5d 100644
--- a/Source/CommandDialog/StepperCommandDialog.tsx
+++ b/Source/CommandDialog/StepperCommandDialog.tsx
@@ -119,6 +119,8 @@ type StepperCommandDialogWrapperProps<TCommand extends object, TResponse = objec
     onSuccess?: CommandFormProps<TCommand, TResponse>['onSuccess'];
     onValidationFailure?: CommandFormProps<TCommand, TResponse>['onValidationFailure'];
     onFailed?: CommandFormProps<TCommand, TResponse>['onFailed'];
+    onException?: CommandFormProps<TCommand, TResponse>['onException'];
+    onUnauthorized?: CommandFormProps<TCommand, TResponse>['onUnauthorized'];
     onBeforeExecute?: BeforeExecuteCallback<TCommand>;
     okLabel?: string;
     nextLabel?: string;
@@ -146,6 +148,8 @@ const StepperCommandDialogWrapper = <TCommand extends object, TResponse = object
     onSuccess,
     onValidationFailure,
     onFailed,
+    onException,
+    onUnauthorized,
     onBeforeExecute,
     okLabel = 'Submit',
     nextLabel = 'Next',
@@ -262,10 +266,16 @@ const StepperCommandDialogWrapper = <TCommand extends object, TResponse = object
         }
 
         if (!result.isSuccess) {
+            await onFailed?.(result);
+            if (result.hasExceptions) {
+                await onException?.(
+                    result.exceptionMessages,
+                    result.exceptionStackTrace,
+                );
+            }
+            if (!result.isAuthorized) await onUnauthorized?.();
             if (!result.isValid) {
                 await onValidationFailure?.(result.validationResults);
-            } else {
-                await onFailed?.(result);
             }
             setCommandResult(result);
             return;
@@ -521,6 +531,8 @@ const StepperCommandDialogComponent = <
                 onSuccess={props.onSuccess}
                 onValidationFailure={props.onValidationFailure}
                 onFailed={props.onFailed}
+                onException={props.onException}
+                onUnauthorized={props.onUnauthorized}
                 onBeforeExecute={onBeforeExecute}
                 okLabel={okLabel}
                 nextLabel={nextLabel}
diff --git a/Source/CommandDialog/for_CommandDialog/when_a_renamed_field_is_nested_in_a_column.ts b/Source/CommandDialog/for_CommandDialog/when_a_renamed_field_is_nested_in_a_column.ts
index 88b4b278..2b750cba 100644
--- a/Source/CommandDialog/for_CommandDialog/when_a_renamed_field_is_nested_in_a_column.ts
+++ b/Source/CommandDialog/for_CommandDialog/when_a_renamed_field_is_nested_in_a_column.ts
@@ -6,20 +6,9 @@ import { renderToStaticMarkup } from 'react-dom/server';
 import { vi } from 'vitest';
 import { CommandFormFieldDisplayName, markAsCommandFormField } from '../../CommandForm/commandFormMarkers';
 
-vi.mock('primereact/dialog', () => {
-    const part = (props: { children?: React.ReactNode }) => React.createElement('div', null, props.children);
-    return {
-        Dialog: {
-            Root: part, Portal: part, Backdrop: part, Positioner: part, Popup: part,
-            Header: part, Title: part, Close: part, Content: part, Footer: part,
-        },
-    };
-});
+;
 
-vi.mock('primereact/button', () => ({
-    Button: (props: { disabled?: boolean; children?: React.ReactNode }) =>
-        React.createElement('button', { disabled: props.disabled }, props.children),
-}));
+;
 
 vi.mock('@cratis/arc.react/dialogs', () => ({
     DialogButtons: { Ok: 1, OkCancel: 2, YesNo: 3, YesNoCancel: 4 },
diff --git a/Source/CommandDialog/for_CommandDialog/when_field_carries_only_the_legacy_display_name.ts b/Source/CommandDialog/for_CommandDialog/when_field_carries_only_the_legacy_display_name.ts
index b050b30a..33a11620 100644
--- a/Source/CommandDialog/for_CommandDialog/when_field_carries_only_the_legacy_display_name.ts
+++ b/Source/CommandDialog/for_CommandDialog/when_field_carries_only_the_legacy_display_name.ts
@@ -6,20 +6,9 @@ import { renderToStaticMarkup } from 'react-dom/server';
 import { vi } from 'vitest';
 import { CommandFormFieldDisplayName } from '../../CommandForm/commandFormMarkers';
 
-vi.mock('primereact/dialog', () => {
-    const part = (props: { children?: React.ReactNode }) => React.createElement('div', null, props.children);
-    return {
-        Dialog: {
-            Root: part, Portal: part, Backdrop: part, Positioner: part, Popup: part,
-            Header: part, Title: part, Close: part, Content: part, Footer: part,
-        },
-    };
-});
+;
 
-vi.mock('primereact/button', () => ({
-    Button: (props: { disabled?: boolean; children?: React.ReactNode }) =>
-        React.createElement('button', { disabled: props.disabled }, props.children),
-}));
+;
 
 vi.mock('@cratis/arc.react/dialogs', () => ({
     DialogButtons: { Ok: 1, OkCancel: 2, YesNo: 3, YesNoCancel: 4 },
diff --git a/Source/CommandDialog/for_CommandDialog/when_field_display_name_is_overwritten.ts b/Source/CommandDialog/for_CommandDialog/when_field_display_name_is_overwritten.ts
index 212d2cf3..0adca32d 100644
--- a/Source/CommandDialog/for_CommandDialog/when_field_display_name_is_overwritten.ts
+++ b/Source/CommandDialog/for_CommandDialog/when_field_display_name_is_overwritten.ts
@@ -6,22 +6,9 @@ import { renderToStaticMarkup } from 'react-dom/server';
 import { vi } from 'vitest';
 import { CommandFormFieldDisplayName, markAsCommandFormField } from '../../CommandForm/commandFormMarkers';
 
-vi.mock('primereact/dialog', () => {
-    // PrimeReact 11's Dialog is compositional; each part is a pass-through that
-    // renders its children so the content reaches the markup.
-    const part = (props: { children?: React.ReactNode }) => React.createElement('div', null, props.children);
-    return {
-        Dialog: {
-            Root: part, Portal: part, Backdrop: part, Positioner: part, Popup: part,
-            Header: part, Title: part, Close: part, Content: part, Footer: part,
-        },
-    };
-});
+;
 
-vi.mock('primereact/button', () => ({
-    Button: (props: { disabled?: boolean; children?: React.ReactNode }) =>
-        React.createElement('button', { disabled: props.disabled }, props.children),
-}));
+;
 
 vi.mock('@cratis/arc.react/dialogs', () => ({
     DialogButtons: { Ok: 1, OkCancel: 2, YesNo: 3, YesNoCancel: 4 },
diff --git a/Source/CommandDialog/for_CommandDialog/when_given_initial_valid_values.ts b/Source/CommandDialog/for_CommandDialog/when_given_initial_valid_values.ts
index 59b894fc..5bba1fa4 100644
--- a/Source/CommandDialog/for_CommandDialog/when_given_initial_valid_values.ts
+++ b/Source/CommandDialog/for_CommandDialog/when_given_initial_valid_values.ts
@@ -6,23 +6,9 @@ import { renderToStaticMarkup } from 'react-dom/server';
 import { vi } from 'vitest';
 import { CommandDialog } from '../CommandDialog';
 
-vi.mock('primereact/dialog', () => {
-    // PrimeReact 11's Dialog is compositional; each part is a pass-through that
-    // renders its children so the footer buttons and content reach the markup.
-    const part = (props: { children?: React.ReactNode }) => React.createElement('div', null, props.children);
-    return {
-        Dialog: {
-            Root: part, Portal: part, Backdrop: part, Positioner: part, Popup: part,
-            Header: part, Title: part, Close: part, Content: part, Footer: part,
-        },
-    };
-});
+;
 
-vi.mock('primereact/button', () => ({
-    // PrimeReact 11 Button renders children (the v10 label/icon props are gone).
-    Button: (props: { disabled?: boolean; children?: React.ReactNode }) =>
-        React.createElement('button', { disabled: props.disabled }, props.children)
-}));
+;
 
 vi.mock('@cratis/arc.react/dialogs', () => ({
     DialogButtons: { Ok: 1, OkCancel: 2, YesNo: 3, YesNoCancel: 4 },
diff --git a/Source/CommandDialog/for_CommandDialog/when_inspecting_the_column_wrapper.ts b/Source/CommandDialog/for_CommandDialog/when_inspecting_the_column_wrapper.ts
index 5713e454..56fac9f9 100644
--- a/Source/CommandDialog/for_CommandDialog/when_inspecting_the_column_wrapper.ts
+++ b/Source/CommandDialog/for_CommandDialog/when_inspecting_the_column_wrapper.ts
@@ -5,20 +5,9 @@ import React from 'react';
 import { vi } from 'vitest';
 import { CommandFormColumnDisplayName, isCommandFormColumn } from '../../CommandForm/commandFormMarkers';
 
-vi.mock('primereact/dialog', () => {
-    const part = (props: { children?: React.ReactNode }) => React.createElement('div', null, props.children);
-    return {
-        Dialog: {
-            Root: part, Portal: part, Backdrop: part, Positioner: part, Popup: part,
-            Header: part, Title: part, Close: part, Content: part, Footer: part,
-        },
-    };
-});
+;
 
-vi.mock('primereact/button', () => ({
-    Button: (props: { disabled?: boolean; children?: React.ReactNode }) =>
-        React.createElement('button', { disabled: props.disabled }, props.children),
-}));
+;
 
 vi.mock('@cratis/arc.react/dialogs', () => ({
     DialogButtons: { Ok: 1, OkCancel: 2, YesNo: 3, YesNoCancel: 4 },
diff --git a/Source/CommandDialog/for_CommandDialog/when_not_executing.ts b/Source/CommandDialog/for_CommandDialog/when_not_executing.ts
index 38500227..02331757 100644
--- a/Source/CommandDialog/for_CommandDialog/when_not_executing.ts
+++ b/Source/CommandDialog/for_CommandDialog/when_not_executing.ts
@@ -6,24 +6,9 @@ import { renderToStaticMarkup } from 'react-dom/server';
 import { vi } from 'vitest';
 import { CommandDialog } from '../CommandDialog';
 
-vi.mock('primereact/dialog', () => {
-    // PrimeReact 11's Dialog is compositional; each part is a pass-through that
-    // renders its children so the footer buttons and content reach the markup.
-    const part = (props: { children?: React.ReactNode }) => React.createElement('div', null, props.children);
-    return {
-        Dialog: {
-            Root: part, Portal: part, Backdrop: part, Positioner: part, Popup: part,
-            Header: part, Title: part, Close: part, Content: part, Footer: part,
-        },
-    };
-});
+;
 
-vi.mock('primereact/button', () => ({
-    // PrimeReact 11 Button renders children (the v10 label/icon/loading props are gone).
-    // A busy dialog now disables its confirm button rather than setting a loading flag.
-    Button: (props: { disabled?: boolean; children?: React.ReactNode }) =>
-        React.createElement('button', { disabled: props.disabled }, props.children),
-}));
+;
 
 vi.mock('@cratis/arc.react/dialogs', () => ({
     DialogButtons: { Ok: 1, OkCancel: 2, YesNo: 3, YesNoCancel: 4 },
diff --git a/Source/CommandDialog/for_CommandDialog/when_validity_is_gated.ts b/Source/CommandDialog/for_CommandDialog/when_validity_is_gated.ts
index 3537a3f7..132a1da1 100644
--- a/Source/CommandDialog/for_CommandDialog/when_validity_is_gated.ts
+++ b/Source/CommandDialog/for_CommandDialog/when_validity_is_gated.ts
@@ -16,52 +16,9 @@ const { commandFormValidity, executeCommand, setCommandValues } = vi.hoisted(()
     setCommandValues: vi.fn(),
 }));
 
-vi.mock('primereact/dialog', () => {
-    // PrimeReact 11's Dialog is compositional; each part is a pass-through that
-    // renders its children so the footer buttons and content reach the markup.
-    const part = (props: { children?: React.ReactNode }) =>
-        React.createElement('div', null, props.children);
-    return {
-        Dialog: {
-            Root: part,
-            Portal: part,
-            Backdrop: part,
-            Positioner: part,
-            Popup: part,
-            Header: part,
-            Title: part,
-            Close: part,
-            Content: part,
-            Footer: part,
-        },
-    };
-});
+;
 
-vi.mock('primereact/button', () => ({
-    // PrimeReact 11 Button renders children (the v10 label/icon props are gone), and the
-    // dialog marks the button its focus trap should land on with `data-autofocus` rather
-    // than React's autoFocus prop. That marker identifies the confirm button, whose click
-    // this SSR render stands in for.
-    Button: (props: {
-        'data-autofocus'?: string;
-        onClick?: () => Promise<void> | void;
-        disabled?: boolean;
-        children?: React.ReactNode;
-    }) => {
-        if (
-            props['data-autofocus'] !== undefined &&
-            props.onClick &&
-            props.disabled !== true
-        ) {
-            void props.onClick();
-        }
-        return React.createElement(
-            'button',
-            { disabled: props.disabled },
-            props.children,
-        );
-    },
-}));
+;
 
 vi.mock('@cratis/arc.react/dialogs', () => ({
     DialogButtons: { Ok: 1, OkCancel: 2, YesNo: 3, YesNoCancel: 4 },
diff --git a/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_a_bare_string_sits_between_steps.ts b/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_a_bare_string_sits_between_steps.ts
index fa339783..fe1dc82e 100644
--- a/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_a_bare_string_sits_between_steps.ts
+++ b/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_a_bare_string_sits_between_steps.ts
@@ -12,21 +12,7 @@ const { buttonClicks } = vi.hoisted(() => ({ buttonClicks: new Map<string, () =>
 // PrimeReact 11's Stepper is compositional: each part renders its children, so every step
 // the wizard renders shows up as one `data-part="panel"` element, and the Number part
 // forwards the inline `style` carrying the per-step indicator color.
-vi.mock('primereact/stepper', () => {
-    const part = (name: string) => {
-        const Component = (props: { children?: React.ReactNode; style?: React.CSSProperties }) =>
-            React.createElement('div', { 'data-part': name, style: props.style }, props.children);
-        Component.displayName = name;
-        return Component;
-    };
-    return {
-        Stepper: {
-            Root: part('root'), List: part('list'), Step: part('step'),
-            Header: part('header'), Number: part('number'), Title: part('title'),
-            Separator: part('separator'), Panels: part('panels'), Panel: part('panel'),
-        },
-    };
-});
+;
 
 
 // PrimeReact 11's Button takes its label as children, not a `label` prop, so the label a
diff --git a/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_it_is_in_the_middle.ts b/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_it_is_in_the_middle.ts
index ba2f8160..1896b149 100644
--- a/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_it_is_in_the_middle.ts
+++ b/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_it_is_in_the_middle.ts
@@ -14,34 +14,7 @@ const { buttonClicks } = vi.hoisted(() => ({
 // PrimeReact 11's Stepper is compositional: each part renders its children, so every step
 // the wizard renders shows up as one `data-part="panel"` element, and the Number part
 // forwards the inline `style` carrying the per-step indicator color.
-vi.mock('primereact/stepper', () => {
-    const part = (name: string) => {
-        const Component = (props: {
-            children?: React.ReactNode;
-            style?: React.CSSProperties;
-        }) =>
-            React.createElement(
-                'div',
-                { 'data-part': name, style: props.style },
-                props.children,
-            );
-        Component.displayName = name;
-        return Component;
-    };
-    return {
-        Stepper: {
-            Root: part('root'),
-            List: part('list'),
-            Step: part('step'),
-            Header: part('header'),
-            Number: part('number'),
-            Title: part('title'),
-            Separator: part('separator'),
-            Panels: part('panels'),
-            Panel: part('panel'),
-        },
-    };
-});
+;
 
 // PrimeReact 11's Button takes its label as children, not a `label` prop, so the label a
 // button is recorded under is the text its children carry (the icon contributes none).
@@ -105,12 +78,9 @@ NameField.displayName = 'CommandFormField';
 
 // The step number and its title are siblings inside the step header, so the number
 // belonging to a named step is the one immediately preceding that step's title.
-const numberBackgroundOf = (html: string, header: string) =>
-    html.match(
-        new RegExp(
-            `<span(?=[^>]*data-part="number")([^>]*)>[^<]*</span><span(?=[^>]*data-part="title")[^>]*>${header}</span>`,
-        ),
-    )?.[1] ?? '';
+const stepStateOf = (html: string, header: string) =>
+    (html.match(/<li[^>]*data-cratis-part="step"[^>]*>[\s\S]*?<\/li>/g) ?? [])
+        .find((step) => step.includes(`>${header}</span>`)) ?? '';
 
 // Exactly how a conditional step is written in an application: `{condition && <StepperPanel/>}`.
 const showOptionalStep: boolean = false;
@@ -155,11 +125,11 @@ describe('when the hidden step sits between two rendered steps', () => {
     });
 
     it('should_not_mark_the_step_without_field_errors', () => {
-        numberBackgroundOf(html, 'Contact').should.not.include('red');
+        stepStateOf(html, 'Contact').should.not.include('data-invalid');
     });
 
     it('should_mark_the_step_whose_own_field_has_an_error', () => {
-        numberBackgroundOf(html, 'Details').should.include('red');
+        stepStateOf(html, 'Details').should.include('data-invalid="true"');
     });
 
     it('should_show_the_next_button_on_the_first_of_two_steps', () => {
diff --git a/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_it_is_null.ts b/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_it_is_null.ts
index b353a85e..3ca203a4 100644
--- a/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_it_is_null.ts
+++ b/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_it_is_null.ts
@@ -12,21 +12,7 @@ const { buttonClicks } = vi.hoisted(() => ({ buttonClicks: new Map<string, () =>
 // PrimeReact 11's Stepper is compositional: each part renders its children, so every step
 // the wizard renders shows up as one `data-part="panel"` element, and the Number part
 // forwards the inline `style` carrying the per-step indicator color.
-vi.mock('primereact/stepper', () => {
-    const part = (name: string) => {
-        const Component = (props: { children?: React.ReactNode; style?: React.CSSProperties }) =>
-            React.createElement('div', { 'data-part': name, style: props.style }, props.children);
-        Component.displayName = name;
-        return Component;
-    };
-    return {
-        Stepper: {
-            Root: part('root'), List: part('list'), Step: part('step'),
-            Header: part('header'), Number: part('number'), Title: part('title'),
-            Separator: part('separator'), Panels: part('panels'), Panel: part('panel'),
-        },
-    };
-});
+;
 
 
 // PrimeReact 11's Button takes its label as children, not a `label` prop, so the label a
diff --git a/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_it_is_undefined.ts b/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_it_is_undefined.ts
index 7ea1bf54..5228687b 100644
--- a/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_it_is_undefined.ts
+++ b/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_it_is_undefined.ts
@@ -12,21 +12,7 @@ const { buttonClicks } = vi.hoisted(() => ({ buttonClicks: new Map<string, () =>
 // PrimeReact 11's Stepper is compositional: each part renders its children, so every step
 // the wizard renders shows up as one `data-part="panel"` element, and the Number part
 // forwards the inline `style` carrying the per-step indicator color.
-vi.mock('primereact/stepper', () => {
-    const part = (name: string) => {
-        const Component = (props: { children?: React.ReactNode; style?: React.CSSProperties }) =>
-            React.createElement('div', { 'data-part': name, style: props.style }, props.children);
-        Component.displayName = name;
-        return Component;
-    };
-    return {
-        Stepper: {
-            Root: part('root'), List: part('list'), Step: part('step'),
-            Header: part('header'), Number: part('number'), Title: part('title'),
-            Separator: part('separator'), Panels: part('panels'), Panel: part('panel'),
-        },
-    };
-});
+;
 
 
 // PrimeReact 11's Button takes its label as children, not a `label` prop, so the label a
diff --git a/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_the_first_step_is_hidden.ts b/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_the_first_step_is_hidden.ts
index c2a1c35c..e184b158 100644
--- a/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_the_first_step_is_hidden.ts
+++ b/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_the_first_step_is_hidden.ts
@@ -12,21 +12,7 @@ const { buttonClicks } = vi.hoisted(() => ({ buttonClicks: new Map<string, () =>
 // PrimeReact 11's Stepper is compositional: each part renders its children, so every step
 // the wizard renders shows up as one `data-part="panel"` element, and the Number part
 // forwards the inline `style` carrying the per-step indicator color.
-vi.mock('primereact/stepper', () => {
-    const part = (name: string) => {
-        const Component = (props: { children?: React.ReactNode; style?: React.CSSProperties }) =>
-            React.createElement('div', { 'data-part': name, style: props.style }, props.children);
-        Component.displayName = name;
-        return Component;
-    };
-    return {
-        Stepper: {
-            Root: part('root'), List: part('list'), Step: part('step'),
-            Header: part('header'), Number: part('number'), Title: part('title'),
-            Separator: part('separator'), Panels: part('panels'), Panel: part('panel'),
-        },
-    };
-});
+;
 
 
 // PrimeReact 11's Button takes its label as children, not a `label` prop, so the label a
diff --git a/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_the_last_step_is_false.ts b/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_the_last_step_is_false.ts
index dcf32ab7..cd744ce3 100644
--- a/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_the_last_step_is_false.ts
+++ b/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_the_last_step_is_false.ts
@@ -12,21 +12,7 @@ const { buttonClicks } = vi.hoisted(() => ({ buttonClicks: new Map<string, () =>
 // PrimeReact 11's Stepper is compositional: each part renders its children, so every step
 // the wizard renders shows up as one `data-part="panel"` element, and the Number part
 // forwards the inline `style` carrying the per-step indicator color.
-vi.mock('primereact/stepper', () => {
-    const part = (name: string) => {
-        const Component = (props: { children?: React.ReactNode; style?: React.CSSProperties }) =>
-            React.createElement('div', { 'data-part': name, style: props.style }, props.children);
-        Component.displayName = name;
-        return Component;
-    };
-    return {
-        Stepper: {
-            Root: part('root'), List: part('list'), Step: part('step'),
-            Header: part('header'), Number: part('number'), Title: part('title'),
-            Separator: part('separator'), Panels: part('panels'), Panel: part('panel'),
-        },
-    };
-});
+;
 
 
 // PrimeReact 11's Button takes its label as children, not a `label` prop, so the label a
diff --git a/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_the_steps_come_from_a_map.ts b/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_the_steps_come_from_a_map.ts
index f2ce63a5..1fe3ae91 100644
--- a/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_the_steps_come_from_a_map.ts
+++ b/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_the_steps_come_from_a_map.ts
@@ -12,21 +12,7 @@ const { buttonClicks } = vi.hoisted(() => ({ buttonClicks: new Map<string, () =>
 // PrimeReact 11's Stepper is compositional: each part renders its children, so every step
 // the wizard renders shows up as one `data-part="panel"` element, and the Number part
 // forwards the inline `style` carrying the per-step indicator color.
-vi.mock('primereact/stepper', () => {
-    const part = (name: string) => {
-        const Component = (props: { children?: React.ReactNode; style?: React.CSSProperties }) =>
-            React.createElement('div', { 'data-part': name, style: props.style }, props.children);
-        Component.displayName = name;
-        return Component;
-    };
-    return {
-        Stepper: {
-            Root: part('root'), List: part('list'), Step: part('step'),
-            Header: part('header'), Number: part('number'), Title: part('title'),
-            Separator: part('separator'), Panels: part('panels'), Panel: part('panel'),
-        },
-    };
-});
+;
 
 
 // PrimeReact 11's Button takes its label as children, not a `label` prop, so the label a
diff --git a/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_two_are_hidden.ts b/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_two_are_hidden.ts
index 4d19747d..c7b4a666 100644
--- a/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_two_are_hidden.ts
+++ b/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_two_are_hidden.ts
@@ -12,21 +12,7 @@ const { buttonClicks } = vi.hoisted(() => ({ buttonClicks: new Map<string, () =>
 // PrimeReact 11's Stepper is compositional: each part renders its children, so every step
 // the wizard renders shows up as one `data-part="panel"` element, and the Number part
 // forwards the inline `style` carrying the per-step indicator color.
-vi.mock('primereact/stepper', () => {
-    const part = (name: string) => {
-        const Component = (props: { children?: React.ReactNode; style?: React.CSSProperties }) =>
-            React.createElement('div', { 'data-part': name, style: props.style }, props.children);
-        Component.displayName = name;
-        return Component;
-    };
-    return {
-        Stepper: {
-            Root: part('root'), List: part('list'), Step: part('step'),
-            Header: part('header'), Number: part('number'), Title: part('title'),
-            Separator: part('separator'), Panels: part('panels'), Panel: part('panel'),
-        },
-    };
-});
+;
 
 
 // PrimeReact 11's Button takes its label as children, not a `label` prop, so the label a
diff --git a/Source/CommandDialog/for_CommandStepper/when_every_step_is_hidden.ts b/Source/CommandDialog/for_CommandStepper/when_every_step_is_hidden.ts
index 45971b9f..d43b4804 100644
--- a/Source/CommandDialog/for_CommandStepper/when_every_step_is_hidden.ts
+++ b/Source/CommandDialog/for_CommandStepper/when_every_step_is_hidden.ts
@@ -9,21 +9,7 @@ import { CommandStepperContent } from '../CommandStepper';
 // PrimeReact 11's Stepper is compositional: each part renders its children, so every step
 // the wizard renders shows up as one `data-part="panel"` element, and the Number part
 // forwards the inline `style` carrying the per-step indicator color.
-vi.mock('primereact/stepper', () => {
-    const part = (name: string) => {
-        const Component = (props: { children?: React.ReactNode; style?: React.CSSProperties }) =>
-            React.createElement('div', { 'data-part': name, style: props.style }, props.children);
-        Component.displayName = name;
-        return Component;
-    };
-    return {
-        Stepper: {
-            Root: part('root'), List: part('list'), Step: part('step'),
-            Header: part('header'), Number: part('number'), Title: part('title'),
-            Separator: part('separator'), Panels: part('panels'), Panel: part('panel'),
-        },
-    };
-});
+;
 
 
 // PrimeReact 11's Button takes its label as children, not a `label` prop.
diff --git a/Source/CommandDialog/for_CommandStepper/when_the_active_step_is_past_the_last_rendered_step.ts b/Source/CommandDialog/for_CommandStepper/when_the_active_step_is_past_the_last_rendered_step.ts
index c0b4fea8..c2881218 100644
--- a/Source/CommandDialog/for_CommandStepper/when_the_active_step_is_past_the_last_rendered_step.ts
+++ b/Source/CommandDialog/for_CommandStepper/when_the_active_step_is_past_the_last_rendered_step.ts
@@ -11,21 +11,7 @@ import { StepperPanel } from '../StepperPanel';
 // the wizard renders shows up as one `data-part="panel"` element. The step the wizard is on
 // is no longer an `activeStep` prop — the Root is driven by `value`, the step's index as a
 // string — so the Root part surfaces that value for the spec to read.
-vi.mock('primereact/stepper', () => {
-    const part = (name: string) => {
-        const Component = (props: { children?: React.ReactNode; style?: React.CSSProperties; value?: string }) =>
-            React.createElement('div', { 'data-part': name, style: props.style, 'data-value': props.value }, props.children);
-        Component.displayName = name;
-        return Component;
-    };
-    return {
-        Stepper: {
-            Root: part('root'), List: part('list'), Step: part('step'),
-            Header: part('header'), Number: part('number'), Title: part('title'),
-            Separator: part('separator'), Panels: part('panels'), Panel: part('panel'),
-        },
-    };
-});
+;
 
 // PrimeReact 11's Button takes its label as children, not a `label` prop.
 vi.mock('../../Common/Button', () => ({
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_a_step_disappears_after_it_was_passed.ts b/Source/CommandDialog/for_StepperCommandDialog/when_a_step_disappears_after_it_was_passed.ts
index 503f292d..ef4b24b8 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_a_step_disappears_after_it_was_passed.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_a_step_disappears_after_it_was_passed.ts
@@ -26,21 +26,7 @@ vi.mock('../../Dialogs/Dialog', () => ({
 // PrimeReact 11's Stepper is compositional: each part renders its children, and the step the
 // wizard is on is no longer an `activeStep` prop — the Root is driven by `value`, the step's
 // index as a string — so the Root part surfaces that value for the given helpers to read.
-vi.mock('primereact/stepper', () => {
-    const part = (name: string) => {
-        const Component = (props: { children?: React.ReactNode; style?: React.CSSProperties; value?: string }) =>
-            React.createElement('div', { 'data-part': name, style: props.style, 'data-value': props.value }, props.children);
-        Component.displayName = name;
-        return Component;
-    };
-    return {
-        Stepper: {
-            Root: part('root'), List: part('list'), Step: part('step'),
-            Header: part('header'), Number: part('number'), Title: part('title'),
-            Separator: part('separator'), Panels: part('panels'), Panel: part('panel'),
-        },
-    };
-});
+;
 
 
 // PrimeReact 11's Button takes its label as children, not a `label` prop — the button's
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_a_bare_string_sits_between_steps.ts b/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_a_bare_string_sits_between_steps.ts
index c5699460..45f6aee2 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_a_bare_string_sits_between_steps.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_a_bare_string_sits_between_steps.ts
@@ -14,21 +14,7 @@ vi.mock('../../../Dialogs/Dialog', () => ({
 
 // PrimeReact 11's Stepper is compositional: each part renders its children, so the
 // steps the wizard actually renders show up as one `data-part="panel"` element each.
-vi.mock('primereact/stepper', () => {
-    const part = (name: string) => {
-        const Component = (props: { children?: React.ReactNode; style?: React.CSSProperties }) =>
-            React.createElement('div', { 'data-part': name, style: props.style }, props.children);
-        Component.displayName = name;
-        return Component;
-    };
-    return {
-        Stepper: {
-            Root: part('root'), List: part('list'), Step: part('step'),
-            Header: part('header'), Number: part('number'), Title: part('title'),
-            Separator: part('separator'), Panels: part('panels'), Panel: part('panel'),
-        },
-    };
-});
+;
 
 
 // PrimeReact 11's Button takes its label as children, not a `label` prop.
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_it_is_in_the_middle.ts b/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_it_is_in_the_middle.ts
index f7d12e65..008ac337 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_it_is_in_the_middle.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_it_is_in_the_middle.ts
@@ -20,34 +20,7 @@ vi.mock('../../../Dialogs/Dialog', () => ({
 // PrimeReact 11's Stepper is compositional: each part renders its children, and the
 // Number part forwards the inline `style` the wrapper computes for each step — which
 // is where the red / green indicator now lives (v10 read it off pt.stepperpanel.number).
-vi.mock('primereact/stepper', () => {
-    const part = (name: string) => {
-        const Component = (props: {
-            children?: React.ReactNode;
-            style?: React.CSSProperties;
-        }) =>
-            React.createElement(
-                'div',
-                { 'data-part': name, style: props.style },
-                props.children,
-            );
-        Component.displayName = name;
-        return Component;
-    };
-    return {
-        Stepper: {
-            Root: part('root'),
-            List: part('list'),
-            Step: part('step'),
-            Header: part('header'),
-            Number: part('number'),
-            Title: part('title'),
-            Separator: part('separator'),
-            Panels: part('panels'),
-            Panel: part('panel'),
-        },
-    };
-});
+;
 
 // PrimeReact 11's Button takes its label as children, not a `label` prop.
 vi.mock('../../../Common/Button', () => ({
@@ -87,14 +60,9 @@ const NameField = (props: { value?: (command: TestCommand) => unknown }) => {
 };
 NameField.displayName = 'CommandFormField';
 
-// The step number and its title are siblings inside the step header, so the number
-// belonging to a named step is the one immediately preceding that step's title.
-const numberBackgroundOf = (html: string, header: string) =>
-    html.match(
-        new RegExp(
-            `<span(?=[^>]*data-part="number")([^>]*)>[^<]*</span><span(?=[^>]*data-part="title")[^>]*>${header}</span>`,
-        ),
-    )?.[1] ?? '';
+const stepStateOf = (html: string, header: string) =>
+    (html.match(/<li[^>]*data-cratis-part="step"[^>]*>[\s\S]*?<\/li>/g) ?? [])
+        .find((step) => step.includes(`>${header}</span>`)) ?? '';
 
 // Exactly how a conditional step is written in an application: `{condition && <StepperPanel/>}`.
 const showOptionalStep: boolean = false;
@@ -139,11 +107,11 @@ describe('when the hidden step sits between two rendered steps', () => {
     });
 
     it('should_not_mark_the_step_without_field_errors', () => {
-        numberBackgroundOf(html, 'Contact').should.not.include('red');
+        stepStateOf(html, 'Contact').should.not.include('data-invalid');
     });
 
     it('should_mark_the_step_whose_own_field_has_an_error', () => {
-        numberBackgroundOf(html, 'Details').should.include('red');
+        stepStateOf(html, 'Details').should.include('data-invalid="true"');
     });
 
     it('should_show_the_next_button_on_the_first_of_two_steps', () => {
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_it_is_null.ts b/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_it_is_null.ts
index bd8fc43b..bdfe4803 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_it_is_null.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_it_is_null.ts
@@ -14,21 +14,7 @@ vi.mock('../../../Dialogs/Dialog', () => ({
 
 // PrimeReact 11's Stepper is compositional: each part renders its children, so the
 // steps the wizard actually renders show up as one `data-part="panel"` element each.
-vi.mock('primereact/stepper', () => {
-    const part = (name: string) => {
-        const Component = (props: { children?: React.ReactNode; style?: React.CSSProperties }) =>
-            React.createElement('div', { 'data-part': name, style: props.style }, props.children);
-        Component.displayName = name;
-        return Component;
-    };
-    return {
-        Stepper: {
-            Root: part('root'), List: part('list'), Step: part('step'),
-            Header: part('header'), Number: part('number'), Title: part('title'),
-            Separator: part('separator'), Panels: part('panels'), Panel: part('panel'),
-        },
-    };
-});
+;
 
 
 // PrimeReact 11's Button takes its label as children, not a `label` prop.
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_it_is_undefined.ts b/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_it_is_undefined.ts
index 707a7623..04fadef7 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_it_is_undefined.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_it_is_undefined.ts
@@ -14,21 +14,7 @@ vi.mock('../../../Dialogs/Dialog', () => ({
 
 // PrimeReact 11's Stepper is compositional: each part renders its children, so the
 // steps the wizard actually renders show up as one `data-part="panel"` element each.
-vi.mock('primereact/stepper', () => {
-    const part = (name: string) => {
-        const Component = (props: { children?: React.ReactNode; style?: React.CSSProperties }) =>
-            React.createElement('div', { 'data-part': name, style: props.style }, props.children);
-        Component.displayName = name;
-        return Component;
-    };
-    return {
-        Stepper: {
-            Root: part('root'), List: part('list'), Step: part('step'),
-            Header: part('header'), Number: part('number'), Title: part('title'),
-            Separator: part('separator'), Panels: part('panels'), Panel: part('panel'),
-        },
-    };
-});
+;
 
 
 // PrimeReact 11's Button takes its label as children, not a `label` prop.
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_the_first_step_is_hidden.ts b/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_the_first_step_is_hidden.ts
index 42cf9f31..a45876a3 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_the_first_step_is_hidden.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_the_first_step_is_hidden.ts
@@ -14,21 +14,7 @@ vi.mock('../../../Dialogs/Dialog', () => ({
 
 // PrimeReact 11's Stepper is compositional: each part renders its children, so the
 // steps the wizard actually renders show up as one `data-part="panel"` element each.
-vi.mock('primereact/stepper', () => {
-    const part = (name: string) => {
-        const Component = (props: { children?: React.ReactNode; style?: React.CSSProperties }) =>
-            React.createElement('div', { 'data-part': name, style: props.style }, props.children);
-        Component.displayName = name;
-        return Component;
-    };
-    return {
-        Stepper: {
-            Root: part('root'), List: part('list'), Step: part('step'),
-            Header: part('header'), Number: part('number'), Title: part('title'),
-            Separator: part('separator'), Panels: part('panels'), Panel: part('panel'),
-        },
-    };
-});
+;
 
 
 // PrimeReact 11's Button takes its label as children, not a `label` prop.
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_the_last_step_is_false.ts b/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_the_last_step_is_false.ts
index 9765502f..b5824281 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_the_last_step_is_false.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_the_last_step_is_false.ts
@@ -14,21 +14,7 @@ vi.mock('../../../Dialogs/Dialog', () => ({
 
 // PrimeReact 11's Stepper is compositional: each part renders its children, so the
 // steps the wizard actually renders show up as one `data-part="panel"` element each.
-vi.mock('primereact/stepper', () => {
-    const part = (name: string) => {
-        const Component = (props: { children?: React.ReactNode; style?: React.CSSProperties }) =>
-            React.createElement('div', { 'data-part': name, style: props.style }, props.children);
-        Component.displayName = name;
-        return Component;
-    };
-    return {
-        Stepper: {
-            Root: part('root'), List: part('list'), Step: part('step'),
-            Header: part('header'), Number: part('number'), Title: part('title'),
-            Separator: part('separator'), Panels: part('panels'), Panel: part('panel'),
-        },
-    };
-});
+;
 
 
 // PrimeReact 11's Button takes its label as children, not a `label` prop.
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_the_steps_come_from_a_map.ts b/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_the_steps_come_from_a_map.ts
index c5e02e8d..bc96f23c 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_the_steps_come_from_a_map.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_the_steps_come_from_a_map.ts
@@ -14,21 +14,7 @@ vi.mock('../../../Dialogs/Dialog', () => ({
 
 // PrimeReact 11's Stepper is compositional: each part renders its children, so the
 // steps the wizard actually renders show up as one `data-part="panel"` element each.
-vi.mock('primereact/stepper', () => {
-    const part = (name: string) => {
-        const Component = (props: { children?: React.ReactNode; style?: React.CSSProperties }) =>
-            React.createElement('div', { 'data-part': name, style: props.style }, props.children);
-        Component.displayName = name;
-        return Component;
-    };
-    return {
-        Stepper: {
-            Root: part('root'), List: part('list'), Step: part('step'),
-            Header: part('header'), Number: part('number'), Title: part('title'),
-            Separator: part('separator'), Panels: part('panels'), Panel: part('panel'),
-        },
-    };
-});
+;
 
 
 // PrimeReact 11's Button takes its label as children, not a `label` prop.
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_two_are_hidden.ts b/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_two_are_hidden.ts
index d1dd3d7a..2dfa3cb8 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_two_are_hidden.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_two_are_hidden.ts
@@ -14,21 +14,7 @@ vi.mock('../../../Dialogs/Dialog', () => ({
 
 // PrimeReact 11's Stepper is compositional: each part renders its children, so the
 // steps the wizard actually renders show up as one `data-part="panel"` element each.
-vi.mock('primereact/stepper', () => {
-    const part = (name: string) => {
-        const Component = (props: { children?: React.ReactNode; style?: React.CSSProperties }) =>
-            React.createElement('div', { 'data-part': name, style: props.style }, props.children);
-        Component.displayName = name;
-        return Component;
-    };
-    return {
-        Stepper: {
-            Root: part('root'), List: part('list'), Step: part('step'),
-            Header: part('header'), Number: part('number'), Title: part('title'),
-            Separator: part('separator'), Panels: part('panels'), Panel: part('panel'),
-        },
-    };
-});
+;
 
 
 // PrimeReact 11's Button takes its label as children, not a `label` prop.
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_dismissing_while_the_command_runs/and_escape_is_pressed.ts b/Source/CommandDialog/for_StepperCommandDialog/when_dismissing_while_the_command_runs/and_escape_is_pressed.ts
index 4f762131..f141fcbc 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_dismissing_while_the_command_runs/and_escape_is_pressed.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_dismissing_while_the_command_runs/and_escape_is_pressed.ts
@@ -63,21 +63,7 @@ vi.mock('../../../Dialogs/Dialog', () => ({
 }));
 
 // PrimeReact 11's Stepper is compositional: each part renders its children.
-vi.mock('primereact/stepper', () => {
-    const part = (name: string) => {
-        const Component = (props: { children?: React.ReactNode; style?: React.CSSProperties; value?: string }) =>
-            React.createElement('div', { 'data-part': name, style: props.style, 'data-value': props.value }, props.children);
-        Component.displayName = name;
-        return Component;
-    };
-    return {
-        Stepper: {
-            Root: part('root'), List: part('list'), Step: part('step'),
-            Header: part('header'), Number: part('number'), Title: part('title'),
-            Separator: part('separator'), Panels: part('panels'), Panel: part('panel'),
-        },
-    };
-});
+;
 
 // PrimeReact 11's Button takes its label as children, not a `label` prop.
 vi.mock('../../../Common/Button', () => ({
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_dismissing_while_the_command_runs/and_the_header_close_is_used.ts b/Source/CommandDialog/for_StepperCommandDialog/when_dismissing_while_the_command_runs/and_the_header_close_is_used.ts
index 24685e87..d870f99b 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_dismissing_while_the_command_runs/and_the_header_close_is_used.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_dismissing_while_the_command_runs/and_the_header_close_is_used.ts
@@ -49,21 +49,7 @@ vi.mock('../../../Dialogs/Dialog', () => ({
 }));
 
 // PrimeReact 11's Stepper is compositional: each part renders its children.
-vi.mock('primereact/stepper', () => {
-    const part = (name: string) => {
-        const Component = (props: { children?: React.ReactNode; style?: React.CSSProperties; value?: string }) =>
-            React.createElement('div', { 'data-part': name, style: props.style, 'data-value': props.value }, props.children);
-        Component.displayName = name;
-        return Component;
-    };
-    return {
-        Stepper: {
-            Root: part('root'), List: part('list'), Step: part('step'),
-            Header: part('header'), Number: part('number'), Title: part('title'),
-            Separator: part('separator'), Panels: part('panels'), Panel: part('panel'),
-        },
-    };
-});
+;
 
 // PrimeReact 11's Button takes its label as children, not a `label` prop.
 vi.mock('../../../Common/Button', () => ({
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_every_step_is_hidden.ts b/Source/CommandDialog/for_StepperCommandDialog/when_every_step_is_hidden.ts
index a181bb2c..9db96677 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_every_step_is_hidden.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_every_step_is_hidden.ts
@@ -25,21 +25,7 @@ vi.mock('../../Dialogs/Dialog', () => ({
 // PrimeReact 11's Stepper is compositional: each part renders its children, and the step the
 // wizard is on is no longer an `activeStep` prop — the Root is driven by `value`, the step's
 // index as a string — so the Root part surfaces that value for the given helpers to read.
-vi.mock('primereact/stepper', () => {
-    const part = (name: string) => {
-        const Component = (props: { children?: React.ReactNode; style?: React.CSSProperties; value?: string }) =>
-            React.createElement('div', { 'data-part': name, style: props.style, 'data-value': props.value }, props.children);
-        Component.displayName = name;
-        return Component;
-    };
-    return {
-        Stepper: {
-            Root: part('root'), List: part('list'), Step: part('step'),
-            Header: part('header'), Number: part('number'), Title: part('title'),
-            Separator: part('separator'), Panels: part('panels'), Panel: part('panel'),
-        },
-    };
-});
+;
 
 
 // PrimeReact 11's Button takes its label as children, not a `label` prop — the button's
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_form_is_invalid.ts b/Source/CommandDialog/for_StepperCommandDialog/when_form_is_invalid.ts
index 0718f26b..b24fb6b3 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_form_is_invalid.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_form_is_invalid.ts
@@ -15,21 +15,7 @@ vi.mock('../../Dialogs/Dialog', () => ({
         React.createElement('div', null, props.buttons, props.children),
 }));
 
-vi.mock('primereact/stepper', () => {
-    const part = (name: string) => {
-        const Component = (props: { children?: React.ReactNode; style?: React.CSSProperties }) =>
-            React.createElement('div', { 'data-part': name, style: props.style }, props.children);
-        Component.displayName = name;
-        return Component;
-    };
-    return {
-        Stepper: {
-            Root: part('root'), List: part('list'), Step: part('step'),
-            Header: part('header'), Number: part('number'), Title: part('title'),
-            Separator: part('separator'), Panels: part('panels'), Panel: part('panel'),
-        },
-    };
-});
+;
 
 // The submit button is the only one carrying autoFocus — auto-activate it (when
 // enabled) so the spec can assert whether the command executes.
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_not_executing.ts b/Source/CommandDialog/for_StepperCommandDialog/when_not_executing.ts
index eed2b8f3..676cf9f3 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_not_executing.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_not_executing.ts
@@ -16,21 +16,7 @@ vi.mock('../../Dialogs/Dialog', () => ({
 
 // PrimeReact 11's Stepper is a set of compositional parts — each just renders its
 // children so the footer/navigation behavior can be asserted.
-vi.mock('primereact/stepper', () => {
-    const part = (name: string) => {
-        const Component = (props: { children?: React.ReactNode; style?: React.CSSProperties }) =>
-            React.createElement('div', { 'data-part': name, style: props.style }, props.children);
-        Component.displayName = name;
-        return Component;
-    };
-    return {
-        Stepper: {
-            Root: part('root'), List: part('list'), Step: part('step'),
-            Header: part('header'), Number: part('number'), Title: part('title'),
-            Separator: part('separator'), Panels: part('panels'), Panel: part('panel'),
-        },
-    };
-});
+;
 
 // PrimeReact 11's Button renders its content as children (no label/loading props).
 vi.mock('../../Common/Button', () => ({
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_an_async_transform_has_not_settled.ts b/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_an_async_transform_has_not_settled.ts
index 44345140..8735be6b 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_an_async_transform_has_not_settled.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_an_async_transform_has_not_settled.ts
@@ -33,21 +33,7 @@ vi.mock('../../../Dialogs/Dialog', () => ({
 // PrimeReact 11's Stepper is compositional: each part renders its children, and the step the
 // wizard is on is no longer an `activeStep` prop — the Root is driven by `value`, the step's
 // index as a string — so the Root part surfaces that value for the given helpers to read.
-vi.mock('primereact/stepper', () => {
-    const part = (name: string) => {
-        const Component = (props: { children?: React.ReactNode; style?: React.CSSProperties; value?: string }) =>
-            React.createElement('div', { 'data-part': name, style: props.style, 'data-value': props.value }, props.children);
-        Component.displayName = name;
-        return Component;
-    };
-    return {
-        Stepper: {
-            Root: part('root'), List: part('list'), Step: part('step'),
-            Header: part('header'), Number: part('number'), Title: part('title'),
-            Separator: part('separator'), Panels: part('panels'), Panel: part('panel'),
-        },
-    };
-});
+;
 
 
 // PrimeReact 11's Button takes its label as children, not a `label` prop — the button's
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_it_is_asked_for.ts b/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_it_is_asked_for.ts
index 42138fde..360a6f23 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_it_is_asked_for.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_it_is_asked_for.ts
@@ -23,21 +23,7 @@ vi.mock('../../../Dialogs/Dialog', () => ({
 // PrimeReact 11's Stepper is compositional: each part renders its children, and the step the
 // wizard is on is no longer an `activeStep` prop — the Root is driven by `value`, the step's
 // index as a string — so the Root part surfaces that value for the given helpers to read.
-vi.mock('primereact/stepper', () => {
-    const part = (name: string) => {
-        const Component = (props: { children?: React.ReactNode; style?: React.CSSProperties; value?: string }) =>
-            React.createElement('div', { 'data-part': name, style: props.style, 'data-value': props.value }, props.children);
-        Component.displayName = name;
-        return Component;
-    };
-    return {
-        Stepper: {
-            Root: part('root'), List: part('list'), Step: part('step'),
-            Header: part('header'), Number: part('number'), Title: part('title'),
-            Separator: part('separator'), Panels: part('panels'), Panel: part('panel'),
-        },
-    };
-});
+;
 
 
 // PrimeReact 11's Button takes its label as children, not a `label` prop — the button's
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_it_is_clicked.ts b/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_it_is_clicked.ts
index 64595a17..3aefd64a 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_it_is_clicked.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_it_is_clicked.ts
@@ -25,21 +25,7 @@ vi.mock('../../../Dialogs/Dialog', () => ({
 // PrimeReact 11's Stepper is compositional: each part renders its children, and the step the
 // wizard is on is no longer an `activeStep` prop — the Root is driven by `value`, the step's
 // index as a string — so the Root part surfaces that value for the given helpers to read.
-vi.mock('primereact/stepper', () => {
-    const part = (name: string) => {
-        const Component = (props: { children?: React.ReactNode; style?: React.CSSProperties; value?: string }) =>
-            React.createElement('div', { 'data-part': name, style: props.style, 'data-value': props.value }, props.children);
-        Component.displayName = name;
-        return Component;
-    };
-    return {
-        Stepper: {
-            Root: part('root'), List: part('list'), Step: part('step'),
-            Header: part('header'), Number: part('number'), Title: part('title'),
-            Separator: part('separator'), Panels: part('panels'), Panel: part('panel'),
-        },
-    };
-});
+;
 
 
 // PrimeReact 11's Button takes its label as children, not a `label` prop — the button's
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_it_is_given_a_label.ts b/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_it_is_given_a_label.ts
index a83788f4..4e49c843 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_it_is_given_a_label.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_it_is_given_a_label.ts
@@ -25,21 +25,7 @@ vi.mock('../../../Dialogs/Dialog', () => ({
 // PrimeReact 11's Stepper is compositional: each part renders its children, and the step the
 // wizard is on is no longer an `activeStep` prop — the Root is driven by `value`, the step's
 // index as a string — so the Root part surfaces that value for the given helpers to read.
-vi.mock('primereact/stepper', () => {
-    const part = (name: string) => {
-        const Component = (props: { children?: React.ReactNode; style?: React.CSSProperties; value?: string }) =>
-            React.createElement('div', { 'data-part': name, style: props.style, 'data-value': props.value }, props.children);
-        Component.displayName = name;
-        return Component;
-    };
-    return {
-        Stepper: {
-            Root: part('root'), List: part('list'), Step: part('step'),
-            Header: part('header'), Number: part('number'), Title: part('title'),
-            Separator: part('separator'), Panels: part('panels'), Panel: part('panel'),
-        },
-    };
-});
+;
 
 
 // PrimeReact 11's Button takes its label as children, not a `label` prop — the button's
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_it_is_not_asked_for.ts b/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_it_is_not_asked_for.ts
index d3390716..e3bd8a94 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_it_is_not_asked_for.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_it_is_not_asked_for.ts
@@ -23,21 +23,7 @@ vi.mock('../../../Dialogs/Dialog', () => ({
 // PrimeReact 11's Stepper is compositional: each part renders its children, and the step the
 // wizard is on is no longer an `activeStep` prop — the Root is driven by `value`, the step's
 // index as a string — so the Root part surfaces that value for the given helpers to read.
-vi.mock('primereact/stepper', () => {
-    const part = (name: string) => {
-        const Component = (props: { children?: React.ReactNode; style?: React.CSSProperties; value?: string }) =>
-            React.createElement('div', { 'data-part': name, style: props.style, 'data-value': props.value }, props.children);
-        Component.displayName = name;
-        return Component;
-    };
-    return {
-        Stepper: {
-            Root: part('root'), List: part('list'), Step: part('step'),
-            Header: part('header'), Number: part('number'), Title: part('title'),
-            Separator: part('separator'), Panels: part('panels'), Panel: part('panel'),
-        },
-    };
-});
+;
 
 
 // PrimeReact 11's Button takes its label as children, not a `label` prop — the button's
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_submit_is_clicked_instead.ts b/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_submit_is_clicked_instead.ts
index 8720fcde..e963c495 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_submit_is_clicked_instead.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_submit_is_clicked_instead.ts
@@ -25,21 +25,7 @@ vi.mock('../../../Dialogs/Dialog', () => ({
 // PrimeReact 11's Stepper is compositional: each part renders its children, and the step the
 // wizard is on is no longer an `activeStep` prop — the Root is driven by `value`, the step's
 // index as a string — so the Root part surfaces that value for the given helpers to read.
-vi.mock('primereact/stepper', () => {
-    const part = (name: string) => {
-        const Component = (props: { children?: React.ReactNode; style?: React.CSSProperties; value?: string }) =>
-            React.createElement('div', { 'data-part': name, style: props.style, 'data-value': props.value }, props.children);
-        Component.displayName = name;
-        return Component;
-    };
-    return {
-        Stepper: {
-            Root: part('root'), List: part('list'), Step: part('step'),
-            Header: part('header'), Number: part('number'), Title: part('title'),
-            Separator: part('separator'), Panels: part('panels'), Panel: part('panel'),
-        },
-    };
-});
+;
 
 
 // PrimeReact 11's Button takes its label as children, not a `label` prop — the button's
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_the_command_is_executing.ts b/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_the_command_is_executing.ts
index 295fcebb..d1a02d78 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_the_command_is_executing.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_the_command_is_executing.ts
@@ -39,21 +39,7 @@ vi.mock('../../../Dialogs/Dialog', () => ({
 // PrimeReact 11's Stepper is compositional: each part renders its children, and the step the
 // wizard is on is no longer an `activeStep` prop — the Root is driven by `value`, the step's
 // index as a string — so the Root part surfaces that value for the given helpers to read.
-vi.mock('primereact/stepper', () => {
-    const part = (name: string) => {
-        const Component = (props: { children?: React.ReactNode; style?: React.CSSProperties; value?: string }) =>
-            React.createElement('div', { 'data-part': name, style: props.style, 'data-value': props.value }, props.children);
-        Component.displayName = name;
-        return Component;
-    };
-    return {
-        Stepper: {
-            Root: part('root'), List: part('list'), Step: part('step'),
-            Header: part('header'), Number: part('number'), Title: part('title'),
-            Separator: part('separator'), Panels: part('panels'), Panel: part('panel'),
-        },
-    };
-});
+;
 
 
 // PrimeReact 11's Button takes its label as children, not a `label` prop — the button's
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_single_step.ts b/Source/CommandDialog/for_StepperCommandDialog/when_single_step.ts
index 625f23f7..97c48c01 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_single_step.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_single_step.ts
@@ -12,21 +12,7 @@ vi.mock('../../Dialogs/Dialog', () => ({
         React.createElement('div', { 'data-testid': 'dialog' }, props.buttons, props.children),
 }));
 
-vi.mock('primereact/stepper', () => {
-    const part = (name: string) => {
-        const Component = (props: { children?: React.ReactNode; style?: React.CSSProperties }) =>
-            React.createElement('div', { 'data-part': name, style: props.style }, props.children);
-        Component.displayName = name;
-        return Component;
-    };
-    return {
-        Stepper: {
-            Root: part('root'), List: part('list'), Step: part('step'),
-            Header: part('header'), Number: part('number'), Title: part('title'),
-            Separator: part('separator'), Panels: part('panels'), Panel: part('panel'),
-        },
-    };
-});
+;
 
 vi.mock('../../Common/Button', () => ({
     Button: (props: { children?: React.ReactNode; disabled?: boolean }) =>
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_step_has_field_errors.ts b/Source/CommandDialog/for_StepperCommandDialog/when_step_has_field_errors.ts
index c9c7cc20..29e88d68 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_step_has_field_errors.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_step_has_field_errors.ts
@@ -18,34 +18,7 @@ vi.mock('../../Dialogs/Dialog', () => ({
 // PrimeReact 11's Stepper is compositional: each part renders its children, and
 // the Number part forwards its inline `style` so specs can assert the per-step
 // red/green indicator the wrapper applies directly to each step's number.
-vi.mock('primereact/stepper', () => {
-    const part = (name: string) => {
-        const Component = (props: {
-            children?: React.ReactNode;
-            style?: React.CSSProperties;
-        }) =>
-            React.createElement(
-                'div',
-                { 'data-part': name, style: props.style },
-                props.children,
-            );
-        Component.displayName = name;
-        return Component;
-    };
-    return {
-        Stepper: {
-            Root: part('root'),
-            List: part('list'),
-            Step: part('step'),
-            Header: part('header'),
-            Number: part('number'),
-            Title: part('title'),
-            Separator: part('separator'),
-            Panels: part('panels'),
-            Panel: part('panel'),
-        },
-    };
-});
+;
 
 vi.mock('../../Common/Button', () => ({
     Button: (props: { children?: React.ReactNode; disabled?: boolean }) =>
@@ -121,15 +94,13 @@ describe('when a step contains a field with a validation error', () => {
         html = renderToStaticMarkup(element);
     });
 
-    it('should_mark_the_invalid_step_number_with_the_error_color', () => {
-        // Step 1 (number "1") has a field error — its number circle should have the red error background
-        const step1Number = html.match(/<span(?=[^>]*data-part="number")[^>]*>1<\/span>/);
-        (step1Number?.[0] ?? '').should.include('red');
+    it('should_mark_the_invalid_step', () => {
+        const steps = html.match(/<li[^>]*data-cratis-part="step"[^>]*>/g) ?? [];
+        (steps[0] ?? '').should.include('data-invalid="true"');
     });
 
-    it('should_not_mark_the_valid_step_number_with_the_error_color', () => {
-        // Step 2 (number "2") has no field errors — its number circle should not have the red error background
-        const step2Number = html.match(/<span(?=[^>]*data-part="number")[^>]*>2<\/span>/);
-        (step2Number?.[0] ?? '').should.not.include('red');
+    it('should_not_mark_the_valid_step', () => {
+        const steps = html.match(/<li[^>]*data-cratis-part="step"[^>]*>/g) ?? [];
+        (steps[1] ?? '').should.not.include('data-invalid');
     });
 });
diff --git a/Source/Common/DatePickerInput.tsx b/Source/Common/DatePickerInput.tsx
index 84d94a80..86d0bf19 100644
--- a/Source/Common/DatePickerInput.tsx
+++ b/Source/Common/DatePickerInput.tsx
@@ -1,7 +1,12 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import type { ButtonHTMLAttributes, CSSProperties, FocusEventHandler } from 'react';
+import type {
+    ButtonHTMLAttributes,
+    CSSProperties,
+    FocusEventHandler,
+    HTMLAttributes,
+} from 'react';
 import {
     Button,
     Calendar,
@@ -27,7 +32,11 @@ import {
     toCalendarDate,
 } from '@internationalized/date';
 
-interface DatePickerPartAttributes {
+interface DatePickerPartAttributes
+    extends Omit<
+        HTMLAttributes<HTMLElement>,
+        'defaultValue' | 'onChange' | 'role'
+    > {
     id?: string;
     className?: string;
     style?: CSSProperties;
diff --git a/Source/Common/ErrorBoundary.stories.tsx b/Source/Common/ErrorBoundary.stories.tsx
index 34f6ff27..05a7a766 100644
--- a/Source/Common/ErrorBoundary.stories.tsx
+++ b/Source/Common/ErrorBoundary.stories.tsx
@@ -24,10 +24,7 @@ const ErrorThrowingComponent = () => {
     return (
         <div className="p-4">
             <h2 className="text-xl mb-3">Click the button to trigger an error</h2>
-            <button 
-                className="p-button p-component"
-                onClick={() => setShouldThrow(true)}
-            >
+            <button className="cratis-button" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => setShouldThrow(true)}>
                 Throw Error
             </button>
         </div>
diff --git a/Source/Common/FormElement.tsx b/Source/Common/FormElement.tsx
index e079c8f6..e5e71949 100644
--- a/Source/Common/FormElement.tsx
+++ b/Source/Common/FormElement.tsx
@@ -10,9 +10,9 @@ export interface FormElementProps {
     children: React.ReactNode;
 
     /**
-     * Icon node displayed inside the leading addon. Can be any React node —
-     * a PrimeIcons `<i className="pi pi-…" />`, an `<svg>`, or a `react-icons`
-     * component.
+     * Icon node displayed inside the leading addon. Prefer an SVG or React icon
+     * component. Consumer-owned icon-font elements also work when their stylesheet
+     * is installed separately.
      */
     icon: React.ReactNode;
 }
@@ -23,8 +23,8 @@ export interface FormElementProps {
  * it to give input fields a leading icon without pulling in a renderer-specific input-group abstraction.
  *
  * ```tsx
- * <FormElement icon={<i className="pi pi-user" />}>
- *     <InputText value={name} onChange={…} />
+ * <FormElement icon={<FaUser />}>
+ *     <input className='cratis-field-input' value={name} onChange={…} />
  * </FormElement>
  * ```
  */
diff --git a/Source/Common/Icon.tsx b/Source/Common/Icon.tsx
index 011ea019..9724ca5a 100644
--- a/Source/Common/Icon.tsx
+++ b/Source/Common/Icon.tsx
@@ -10,14 +10,15 @@ import { normalizeIconClass } from './normalizeIconClass';
 declare const process: { env: Record<string, string | undefined> };
 
 /**
- * Represents an icon that can be either a PrimeIcons CSS class string (e.g. `'pi pi-home'`)
- * or any React node (e.g. an SVG element or a third-party icon component).
+ * Represents either a React icon node or a consumer-owned icon-font class string.
+ * PrimeIcons strings remain compatible when the consumer installs that font separately;
+ * Components does not install an icon font.
  */
 export type Icon = string | ReactNode;
 
 /** Props for the {@link IconDisplay} component. */
 export interface IconDisplayProps {
-    /** The icon to render — either a PrimeIcons CSS class or a React node. */
+    /** React node or consumer-owned icon-font CSS class. */
     icon: Icon;
 
     /** Optional additional CSS classes applied to the wrapping `<i>` when the icon is a string. */
@@ -27,7 +28,7 @@ export interface IconDisplayProps {
 /**
  * Renders an {@link Icon} value.
  *
- * - When `icon` is a non-empty string it is treated as a PrimeIcons (or other icon-font)
+ * - When `icon` is a non-empty string it is treated as a consumer-owned icon-font
  *   CSS class and rendered as `<i className={icon} />`. A lone PrimeIcons class missing its
  *   base `pi` class (`'pi-home'`) is repaired to `'pi pi-home'`, and a bare icon name
  *   (`'plus'`) that would silently render nothing logs a development warning.
diff --git a/Source/DataPage/DataPage.stories.tsx b/Source/DataPage/DataPage.stories.tsx
index 29c64a0f..d9ec15a8 100644
--- a/Source/DataPage/DataPage.stories.tsx
+++ b/Source/DataPage/DataPage.stories.tsx
@@ -303,13 +303,10 @@ const PersonDetailsWithRefresh = ({
                     <strong>Role:</strong> {item.role}
                 </div>
             </div>
-            <button
-                className='p-button p-component'
-                onClick={() => {
-                    alert(`Saved changes for ${item.name}`);
-                    onRefresh?.();
-                }}
-            >
+            <button className="cratis-button" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => {
+                alert(`Saved changes for ${item.name}`);
+                onRefresh?.();
+            }}>
                 Save &amp; Refresh
             </button>
         </div>
diff --git a/Source/DataTables/DataTableCore.tsx b/Source/DataTables/DataTableCore.tsx
index 4296272b..a6456a66 100644
--- a/Source/DataTables/DataTableCore.tsx
+++ b/Source/DataTables/DataTableCore.tsx
@@ -69,7 +69,7 @@ export interface DataTableCoreProps<TData extends object> {
     data: TData[];
     /** Declarative {@link Column} markers. */
     children?: ReactNode;
-    /** Row property used as stable identity. */
+    /** Row property used as stable identity. Required to preserve selection across refreshed row objects. */
     dataKey?: string;
     /** Content shown when the loaded page has no matching rows. */
     emptyMessage: ReactNode;
@@ -324,10 +324,14 @@ export const DataTableCore = <TData extends object>({
         dataKey
             ? String(valueAtPath(row as Record<string, unknown>, dataKey))
             : String(index);
-    const selectedKey =
-        selection && dataKey
+    const selectedKey = selection
+        ? dataKey
             ? String(valueAtPath(selection as Record<string, unknown>, dataKey))
-            : undefined;
+            : (() => {
+                  const selectedIndex = data.indexOf(selection);
+                  return selectedIndex >= 0 ? String(selectedIndex) : undefined;
+              })()
+        : undefined;
 
     return (
         <div
diff --git a/Source/DataTables/for_DataTableCore/when_selecting_by_object_reference.tsx b/Source/DataTables/for_DataTableCore/when_selecting_by_object_reference.tsx
new file mode 100644
index 00000000..9b5d46cd
--- /dev/null
+++ b/Source/DataTables/for_DataTableCore/when_selecting_by_object_reference.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.
+
+// @vitest-environment jsdom
+
+import { expect } from 'chai';
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, it } from 'vitest';
+import { Column } from '../Column';
+import { DataTableCore } from '../DataTableCore';
+
+describe('when selecting by object reference', () => {
+    const selected = { name: 'Ada' };
+    let container: HTMLDivElement;
+    let root: Root;
+
+    beforeEach(async () => {
+        (
+            globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
+        ).IS_REACT_ACT_ENVIRONMENT = true;
+        container = document.createElement('div');
+        document.body.append(container);
+        root = createRoot(container);
+        await act(async () => {
+            root.render(
+                <DataTableCore
+                    data={[selected, { name: 'Grace' }]}
+                    emptyMessage='No people'
+                    selectionMode='single'
+                    selection={selected}
+                >
+                    <Column field='name' header='Name' />
+                </DataTableCore>,
+            );
+        });
+    });
+
+    afterEach(async () => {
+        await act(async () => root.unmount());
+        container.remove();
+    });
+
+    it('should mark the referenced row selected without a data key', () => {
+        expect(
+            container.querySelector('[data-cratis-part="row"]')?.getAttribute(
+                'aria-selected',
+            ),
+        ).to.equal('true');
+    });
+});
diff --git a/Source/Dialogs/Dialog.stories.tsx b/Source/Dialogs/Dialog.stories.tsx
index 4b4cb764..65581952 100644
--- a/Source/Dialogs/Dialog.stories.tsx
+++ b/Source/Dialogs/Dialog.stories.tsx
@@ -164,7 +164,7 @@ export const WithForm: Story = {
                             placeholder='Enter name…'
                         />
                         {name.trim().length === 0 && (
-                            <small className='p-error'>Name is required</small>
+                            <small className='text-[var(--cratis-red-500)]'>Name is required</small>
                         )}
                     </div>
                 </Dialog>
diff --git a/Source/Dialogs/for_Dialog/when_rendered_with_is_busy.ts b/Source/Dialogs/for_Dialog/when_rendered_with_is_busy.ts
index 9d8405e5..fdfe4f4e 100644
--- a/Source/Dialogs/for_Dialog/when_rendered_with_is_busy.ts
+++ b/Source/Dialogs/for_Dialog/when_rendered_with_is_busy.ts
@@ -1,34 +1,12 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
+import { expect } from 'chai';
 import React from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
-import { vi } from 'vitest';
+import { beforeEach, describe, it, vi } from 'vitest';
 import { Dialog } from '../Dialog';
 
-vi.mock('primereact/dialog', () => {
-    // PrimeReact 11's Dialog is compositional; each part is a pass-through that
-    // renders its children so the footer buttons and content reach the markup.
-    const part = (props: { children?: React.ReactNode }) => React.createElement('div', null, props.children);
-    return {
-        Dialog: {
-            Root: part, Portal: part, Backdrop: part, Positioner: part, Popup: part,
-            Header: part, Title: part, Close: part, Content: part, Footer: part,
-        },
-    };
-});
-
-vi.mock('primereact/button', () => ({
-    // PrimeReact 11 Button renders children (the v10 label/icon props are gone); the
-    // confirm button carries autoFocus, which stands in for the click in this SSR render.
-    Button: (props: { autoFocus?: boolean; onClick?: () => void | Promise<void>; disabled?: boolean; children?: React.ReactNode }) => {
-        if (props.autoFocus && props.onClick) {
-            void props.onClick();
-        }
-        return React.createElement('button', { disabled: props.disabled }, props.children);
-    },
-}));
-
 vi.mock('@cratis/arc.react/dialogs', () => ({
     DialogButtons: { Ok: 1, OkCancel: 2, YesNo: 3, YesNoCancel: 4 },
     DialogResult: { None: 0, Yes: 1, No: 2, Ok: 3, Cancelled: 4 },
@@ -50,9 +28,9 @@ describe('when rendered with is busy', () => {
         html = renderToStaticMarkup(element);
     });
 
-    it('should_disable_all_buttons', () => {
+    it('should disable footer and header dismissal buttons', () => {
         const disabledCount = (html.match(/disabled=""/g) || []).length;
-        disabledCount.should.equal(2);
+        expect(disabledCount).to.equal(3);
     });
 });
 
diff --git a/Source/ObjectContentEditor/ObjectContentEditor.stories.tsx b/Source/ObjectContentEditor/ObjectContentEditor.stories.tsx
index bfaa087a..e3b9cf8a 100644
--- a/Source/ObjectContentEditor/ObjectContentEditor.stories.tsx
+++ b/Source/ObjectContentEditor/ObjectContentEditor.stories.tsx
@@ -216,15 +216,12 @@ export const EditModeWithValidation: Story = {
                     onValidationChange={setHasErrors}
                 />
                 <div className="mt-4">
-                    <button
-                        className="p-button p-component"
-                        disabled={hasErrors}
-                        onClick={() => alert('Saved: ' + JSON.stringify(obj, null, 2))}
-                    >
+                    <button className="cratis-button" data-variant="filled" data-severity="secondary" data-size="normal" disabled={hasErrors}
+                    onClick={() => alert('Saved: ' + JSON.stringify(obj, null, 2))}>
                         Save
                     </button>
                     {hasErrors && (
-                        <span className="p-error ml-3">Please fix validation errors before saving.</span>
+                        <span className="ml-3 text-[var(--cratis-red-500)]">Please fix validation errors before saving.</span>
                     )}
                 </div>
             </div>
diff --git a/Source/PivotViewer/PivotViewer.stories.tsx b/Source/PivotViewer/PivotViewer.stories.tsx
index e96ab1b3..4acfcaee 100644
--- a/Source/PivotViewer/PivotViewer.stories.tsx
+++ b/Source/PivotViewer/PivotViewer.stories.tsx
@@ -205,7 +205,7 @@ export const Default: Story = {
                                     <h3 style={{ margin: 0 }}>{item.name}</h3>
                                     <p style={{ margin: 0, opacity: 0.8 }}>Department • {item.department}</p>
                                 </div>
-                                <button type="button" onClick={onClose} title="Close" className="p-button p-button-text">
+                                <button type="button" onClick={onClose} title="Close" className="cratis-button" data-variant="text" data-severity="secondary" data-size="normal" >
                                     Close
                                 </button>
                             </header>
@@ -350,7 +350,7 @@ export const LargeDataset: Story = {
                                     <h3 style={{ margin: 0 }}>{item.name}</h3>
                                     <p style={{ margin: 0, opacity: 0.7 }}>{item.seniority} · {item.department}</p>
                                 </div>
-                                <button type="button" onClick={onClose} title="Close" className="p-button p-button-text">
+                                <button type="button" onClick={onClose} title="Close" className="cratis-button" data-variant="text" data-severity="secondary" data-size="normal" >
                                     Close
                                 </button>
                             </header>
diff --git a/Source/Toolbar/ToolbarButton.tsx b/Source/Toolbar/ToolbarButton.tsx
index 465a710c..f4974154 100644
--- a/Source/Toolbar/ToolbarButton.tsx
+++ b/Source/Toolbar/ToolbarButton.tsx
@@ -10,7 +10,7 @@ import { useToolbarFolderMode } from './ToolbarFolderContext';
 
 /** Props for the {@link ToolbarButton} component. */
 export interface ToolbarButtonProps {
-    /** The icon to display — either a PrimeIcons CSS class string (e.g. `'pi pi-home'`) or a React node. */
+    /** React icon node or consumer-owned icon-font class. Components installs no icon font. */
     icon?: Icon;
 
     /** Optional text to render inside the button (e.g. '120%'). */
diff --git a/Source/Toolbar/ToolbarFanOutItem.tsx b/Source/Toolbar/ToolbarFanOutItem.tsx
index a381f786..fe94ceb7 100644
--- a/Source/Toolbar/ToolbarFanOutItem.tsx
+++ b/Source/Toolbar/ToolbarFanOutItem.tsx
@@ -9,7 +9,7 @@ import type { TooltipPosition } from '../Common/Tooltip';
 
 /** Props for the {@link ToolbarFanOutItem} component. */
 export interface ToolbarFanOutItemProps {
-    /** The icon to display on the trigger button — either a PrimeIcons CSS class string (e.g. `'pi pi-home'`) or a React node. */
+    /** React icon node or consumer-owned icon-font class for the trigger. */
     icon: Icon;
 
     /** Tooltip text shown when hovering over the trigger button. */

From 0f6aca52c4551ee37e3a44a7ec79c0d64710a698 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Sun, 23 Aug 2026 18:29:11 +0200
Subject: [PATCH 020/267] Complete remaining Components 4 migration contracts

Make the date trigger discoverable by default, align Chips behavior and accessibility, document removed renderer subpaths, expose stable Toolbar parts, clarify React-only renderer independence, and preserve controlled DataPage typing without internal any.
---
 Documentation/CommandForm/calendar-field.md |  2 +-
 Documentation/CommandForm/chips-field.md    |  8 +-
 Documentation/DataPage/index.md             |  2 +-
 Documentation/Styling/pass-through.md       |  3 +
 Documentation/Toolbar/basic-usage.md        | 23 +++---
 Documentation/Toolbar/index.md              |  2 +
 Documentation/index.mdx                     |  2 +-
 Documentation/migration.md                  | 11 ++-
 Documentation/ui-foundation.md              |  2 +
 Source/CommandForm/fields/ChipsField.tsx    |  9 ++-
 Source/Common/DatePickerInput.tsx           |  4 +-
 Source/DataPage/DataPage.tsx                | 32 ++++++--
 Source/MIGRATION.md                         | 11 ++-
 Source/Toolbar/Toolbar.tsx                  | 36 +++++++--
 Source/Toolbar/ToolbarButton.tsx            | 87 ++++++++++++++++++---
 Source/Toolbar/ToolbarFanOutItem.tsx        | 43 +++++++++-
 16 files changed, 227 insertions(+), 50 deletions(-)

diff --git a/Documentation/CommandForm/calendar-field.md b/Documentation/CommandForm/calendar-field.md
index ea7466c7..1caf9016 100644
--- a/Documentation/CommandForm/calendar-field.md
+++ b/Documentation/CommandForm/calendar-field.md
@@ -25,7 +25,7 @@ import { CalendarField } from '@cratis/components/CommandForm';
 | `value`       | `(instance: TCommand) => unknown` | -       | **Required.** Accessor function that returns the bound property from the command instance. Pass the command type as the generic parameter for full type safety. |
 | `placeholder` | `string`                          | -       | Placeholder text shown when no date is selected.                                                                                                                |
 | `dateFormat`  | `string`                          | —       | Legacy mask retained for source compatibility; locale controls formatting.                                                                                      |
-| `showIcon`    | `boolean`                         | `false` | Displays a calendar icon button next to the input.                                                                                                              |
+| `showIcon`    | `boolean`                         | `true`  | Displays the accessible calendar trigger next to the segmented input. Set `false` only when typed segment entry is sufficient.                                  |
 | `showTime`    | `boolean`                         | `false` | Enables time selection in addition to date selection.                                                                                                           |
 | `hourFormat`  | `'12' \| '24'`                    | `24`    | Hour format when `showTime` is enabled.                                                                                                                         |
 | `minDate`     | `Date`                            | -       | Minimum selectable date.                                                                                                                                        |
diff --git a/Documentation/CommandForm/chips-field.md b/Documentation/CommandForm/chips-field.md
index 367eb2d8..7c30e002 100644
--- a/Documentation/CommandForm/chips-field.md
+++ b/Documentation/CommandForm/chips-field.md
@@ -24,12 +24,12 @@ import { ChipsField } from '@cratis/components/CommandForm';
 | `value`                         | `(instance: TCommand) => unknown` | -          | **Required.** Accessor function that returns the bound property from the command instance. Pass the command type as the generic parameter for full type safety. |
 | `placeholder`                   | `string`                          | -          | Advisory text shown when no chip values exist.                                                                                                                  |
 | `max`                           | `number`                          | -          | Maximum number of chips allowed.                                                                                                                                |
-| `separator`                     | `string`                          | -          | **No effect.** See below.                                                                                                                                       |
+| `separator`                     | `string`                          | -          | Splits the draft on this literal string when the value is committed.                                                                                            |
 | `addOnBlur`                     | `boolean`                         | `false`    | Adds the current input as a chip when the field loses focus.                                                                                                    |
-| `allowDuplicate`                | `boolean`                         | `true`     | Controls whether duplicate chip values are allowed.                                                                                                             |
-| `removeAriaLabel`               | `string`                          | `'Remove'` | Accessible name for each chip's remove button. Override to localize.                                                                                            |
+| `allowDuplicate`                | `boolean`                         | `false`    | Controls whether duplicate chip values are allowed.                                                                                                             |
+| `removeAriaLabel`               | `string \| (item, index) => string` | `Remove <item>` | Accessible name for remove buttons. Use a callback for localized item-specific labels.                                                                     |
 | `className`                     | `string`                          | -          | Extra CSS class combined with the default `w-full`.                                                                                                             |
-| `pt` / `ptOptions` / `unstyled` | -                                 | -          | Pass-through styling for the underlying `InputTags`.                                                                                                            |
+| `pt` / `ptOptions` / `unstyled` | -                                 | -          | Stable Cratis chip/item/remove/input parts; compatibility flags are no-ops.                                                                                      |
 
 ## Behavior
 
diff --git a/Documentation/DataPage/index.md b/Documentation/DataPage/index.md
index cdf1511c..8bca029e 100644
--- a/Documentation/DataPage/index.md
+++ b/Documentation/DataPage/index.md
@@ -84,7 +84,7 @@ function Authors() {
 }
 ```
 
-Selection is managed for you; to drive it yourself, pass `selection` and `onSelectionChange`.
+Selection is managed for you; to drive it yourself, pass `selection` and `onSelectionChange`. In controlled mode, clear the selection with `null`. Omitting `selection`/passing `undefined` selects uncontrolled mode. Provide `dataKey` when query refreshes can replace row object instances.
 
 ## Props
 
diff --git a/Documentation/Styling/pass-through.md b/Documentation/Styling/pass-through.md
index ffde1552..99d6e6b1 100644
--- a/Documentation/Styling/pass-through.md
+++ b/Documentation/Styling/pass-through.md
@@ -36,6 +36,8 @@ They are documented separately because not every DOM part needs a `pt` key, and
 | `TablePaginatorParts`                  | `root`, `range`, `info`, `first`, `previous`, `next`, `last`                                                                                                                           | navigation div, spans, and Button parts                       |
 | `StepperParts`                         | `root`, `list`, `step`, `header`, `number`, `title`, `separator`, `panels`, `panel`                                                                                                    | div, ordered list, list item, button, spans, section          |
 | `ToasterPassThrough`                   | `region`, `toast`, `icon`, `content`, `title`, `description`, `close`, `action`                                                                                                        | region/article/divs/spans/buttons                             |
+| `ToolbarParts` / `ToolbarButtonParts`  | toolbar `root`; button `root`, `icon`, `label`                                                                                                                                         | toolbar div and native buttons/spans                          |
+| `ToolbarFanOutParts`                   | `root`, `trigger`, `panel`                                                                                                                                                             | fan-out divs and native trigger                              |
 | `ActionMenubar` `pt`                   | the `ButtonParts` keys applied to each action                                                                                                                                          | button and spans                                              |
 | Query table / `DataPage` `paginatorPt` | `TablePaginatorParts`                                                                                                                                                                  | paginator surface                                             |
 | `DataPage` `tablePt`                   | `DataTableParts`                                                                                                                                                                       | table surface                                                 |
@@ -79,6 +81,7 @@ Use the exact kebab-case value in CSS or tests:
 | Command fields | `root`, plus the typed field-specific values listed above (`input`, `textarea`, `box`, `control`, `handle`, `indicator`, `option`, `item`, `remove`, `value`, `star`, `toggle`)                 |
 | Display        | component roots plus `image`, `fallback`, `remove`, `indicator`, `range`, `track`, and labels where applicable                                                                                  |
 | Event timeline | `timeline`, `event`, `separator`, `marker`, `connector`, `content`                                                                                                                              |
+| Toolbar        | `root`, `button`, `icon`, `label`, `fanout-root`, `fanout-trigger`, `fanout-panel`                                                                                                            |
 
 `header-content`, `sort`, and `filter-trigger` are DOM targets but are not `DataTableParts` keys. Customize them with CSS rather than claiming a nonexistent typed key.
 
diff --git a/Documentation/Toolbar/basic-usage.md b/Documentation/Toolbar/basic-usage.md
index 96e03870..25209d2d 100644
--- a/Documentation/Toolbar/basic-usage.md
+++ b/Documentation/Toolbar/basic-usage.md
@@ -4,13 +4,14 @@ Place `ToolbarButton` elements inside a `Toolbar`:
 
 ```tsx
 import { Toolbar, ToolbarButton } from '@cratis/components/Toolbar';
+import { FaArrowPointer, FaPencil, FaRegSquare } from 'react-icons/fa6';
 
 function MyToolbar() {
     return (
         <Toolbar>
-            <ToolbarButton icon='pi pi-arrow-up-left' title='Select' />
-            <ToolbarButton icon='pi pi-pencil' title='Draw' />
-            <ToolbarButton icon='pi pi-stop' title='Rectangle' />
+            <ToolbarButton icon={<FaArrowPointer />} title='Select' />
+            <ToolbarButton icon={<FaPencil />} title='Draw' />
+            <ToolbarButton icon={<FaRegSquare />} title='Rectangle' />
         </Toolbar>
     );
 }
@@ -20,17 +21,18 @@ function MyToolbar() {
 
 ```tsx
 import { Toolbar, ToolbarButton, ToolbarSeparator } from '@cratis/components/Toolbar';
+import { FaCircleQuestion, FaMinus, FaPlus } from 'react-icons/fa6';
 
 function ZoomToolbar() {
     const [zoom, setZoom] = useState(120);
 
     return (
         <Toolbar orientation='horizontal'>
-            <ToolbarButton icon='pi pi-minus' title='Zoom out' onClick={() => setZoom(value => value - 10)} />
+            <ToolbarButton icon={<FaMinus />} title='Zoom out' onClick={() => setZoom(value => value - 10)} />
             <ToolbarButton text={`${zoom}%`} title='Reset zoom' onClick={() => setZoom(100)} />
-            <ToolbarButton icon='pi pi-plus' title='Zoom in' onClick={() => setZoom(value => value + 10)} />
+            <ToolbarButton icon={<FaPlus />} title='Zoom in' onClick={() => setZoom(value => value + 10)} />
             <ToolbarSeparator orientation='horizontal' />
-            <ToolbarButton icon='pi pi-question-circle' title='Help' />
+            <ToolbarButton icon={<FaCircleQuestion />} title='Help' />
         </Toolbar>
     );
 }
@@ -38,16 +40,13 @@ function ZoomToolbar() {
 
 ## ReactNode Icons
 
-The `icon` prop accepts a `string | ReactNode`. In addition to PrimeIcons CSS class strings you can pass any React element — an SVG component, a third-party icon library component, or any other node:
+The `icon` prop accepts an `Icon` (`string | ReactNode`). Prefer a React element, product-owned SVG, or icon-library component. A string is treated as a consumer-owned icon-font class; Components does not install that font.
 
 ```tsx
-import { FaPencil } from 'react-icons/fa6';
+import { FaArrowPointer, FaPencil } from 'react-icons/fa6';
 
 <Toolbar>
-    {/* String — PrimeIcons CSS class */}
-    <ToolbarButton icon='pi pi-arrow-up-left' title='Select' />
-
-    {/* ReactNode — third-party icon component */}
+    <ToolbarButton icon={<FaArrowPointer />} title='Select' />
     <ToolbarButton icon={<FaPencil />} title='Draw' />
 </Toolbar>
 ```
diff --git a/Documentation/Toolbar/index.md b/Documentation/Toolbar/index.md
index f7695b6b..9f748885 100644
--- a/Documentation/Toolbar/index.md
+++ b/Documentation/Toolbar/index.md
@@ -2,6 +2,8 @@
 
 The `Toolbar` component provides a canvas-style icon toolbar with support for orientations, active states, animated context switching, separators, fan-out sub-panels, and drag & drop onto surfaces.
 
+Pass React icon nodes or product-owned SVGs for a dependency-free toolbar. Legacy icon-font class strings remain accepted, but Components does not install PrimeIcons or any other icon font; string examples require the consumer to install the matching stylesheet separately.
+
 ## Components
 
 | Component | Description |
diff --git a/Documentation/index.mdx b/Documentation/index.mdx
index e93a70e6..7d5effe0 100644
--- a/Documentation/index.mdx
+++ b/Documentation/index.mdx
@@ -90,4 +90,4 @@ import TopicHero from '@components/TopicHero.astro';
     </SimpleCard>
 </CardGrid>
 
-Components renders [Arc's](/arc/) proxies over [Chronicle](/chronicle/) read models — see [Why developers choose Cratis](/why-cratis/) for the full stack.
+Components renders [Arc](/arc/) command and query proxies. Those queries can come from Chronicle read models in an event-sourced application or from any Arc query source — Chronicle is optional. See [Why developers choose Cratis](/why-cratis/) for the full stack.
diff --git a/Documentation/migration.md b/Documentation/migration.md
index d1ac3322..785e4b77 100644
--- a/Documentation/migration.md
+++ b/Documentation/migration.md
@@ -83,7 +83,15 @@ export const ApplicationRoot = ({ children }: { children: React.ReactNode }) =>
 
 ## Replace renderer presets with tokens
 
-Remove `styledMode()`, `CratisPreset`, and `primeReactStyles` before upgrading. The `@cratis/components/styled` renderer-specific entry point is removed in Components 4.
+Remove `styledMode()`, `CratisPreset`, and `primeReactStyles` before upgrading. Components 4 removes three renderer-specific subpaths:
+
+| Removed subpath | Migration |
+| --- | --- |
+| `@cratis/components/styled` | Import Cratis tokens/styles and map product tokens directly as shown below. |
+| `@cratis/components/compatibility` | Replace Prime slot types/sentinel presets with each component's Cratis-owned `*Parts` type. The root `Compatibility` namespace is also removed. |
+| `@cratis/components/primereact-v10-palette` | Remove legacy Prime variable dependencies; define product tokens and map them to `--cratis-*`, or use the baseline theme. |
+
+There is no compatibility-package replacement in Components 4. Stay on Components 3 while renderer-specific types or selectors remain.
 
 Before:
 
@@ -243,6 +251,7 @@ Pass the parts to either query-backed table:
 - Replace `dateFormat` with locale configuration where possible. The prop remains accepted but is ignored.
 - Use `aria-label` or `aria-labelledby` for the segmented date group.
 - `id` identifies the focus group rather than a native text input.
+- The accessible calendar trigger is shown by default; set `showIcon={false}` only for segment-entry-only experiences.
 - `todayLabel` and `clearLabel` override the provider messages for one picker.
 - `showTime` and `hourFormat` remain supported.
 
diff --git a/Documentation/ui-foundation.md b/Documentation/ui-foundation.md
index f92b2a06..98321a54 100644
--- a/Documentation/ui-foundation.md
+++ b/Documentation/ui-foundation.md
@@ -20,6 +20,8 @@ graph TD
 
 Consumers import `@cratis/components/*`. React Aria does not appear in public prop types, declarations, or styling contracts. Arc command, query, and dialog bindings remain owned by `@cratis/arc.react`; Components builds visual behavior around them.
 
+“Renderer-independent” here means that React applications depend on Cratis-owned contracts rather than one internal React renderer. `@cratis/components` is still a React package. A future Vue, Svelte, or other frontend should use Arc's transport/client contracts and framework-native bindings; genuinely cross-framework behavior belongs in Arc only after a second implementation proves that seam.
+
 ## Consumer contract
 
 The shipped styling contract contains:
diff --git a/Source/CommandForm/fields/ChipsField.tsx b/Source/CommandForm/fields/ChipsField.tsx
index 7456f5d8..14872122 100644
--- a/Source/CommandForm/fields/ChipsField.tsx
+++ b/Source/CommandForm/fields/ChipsField.tsx
@@ -28,7 +28,8 @@ interface ChipsFieldComponentProps
     separator?: string;
     addOnBlur?: boolean;
     allowDuplicate?: boolean;
-    removeAriaLabel?: string;
+    /** Builds a remove-button label, or supplies one shared localized label. */
+    removeAriaLabel?: string | ((item: string, index: number) => string);
     className?: string;
     pt?: ChipsParts;
     ptOptions?: object;
@@ -101,7 +102,11 @@ const ChipsControl = (props: ChipsFieldComponentProps) => {
                             .filter(Boolean)
                             .join(' ')}
                         data-cratis-part='remove'
-                        aria-label={props.removeAriaLabel ?? 'Remove'}
+                        aria-label={
+                            typeof props.removeAriaLabel === 'function'
+                                ? props.removeAriaLabel(item, index)
+                                : (props.removeAriaLabel ?? `Remove ${item}`)
+                        }
                         onClick={() =>
                             props.onChange(
                                 props.value.filter((_, itemIndex) => itemIndex !== index),
diff --git a/Source/Common/DatePickerInput.tsx b/Source/Common/DatePickerInput.tsx
index 86d0bf19..3558b2be 100644
--- a/Source/Common/DatePickerInput.tsx
+++ b/Source/Common/DatePickerInput.tsx
@@ -117,7 +117,7 @@ export interface DatePickerInputProps {
     placeholder?: string;
     /** Deprecated renderer mask; locale controls formatting now. */
     dateFormat?: string;
-    /** Shows the calendar trigger button. */
+    /** Shows the calendar trigger button. Defaults to `true`. */
     showIcon?: boolean;
     /** Adds hour/minute segments. */
     showTime?: boolean;
@@ -178,7 +178,7 @@ export const DatePickerInput = ({
     id,
     showButtonBar,
     placeholder,
-    showIcon = false,
+    showIcon = true,
     showTime,
     hourFormat,
     minDate,
diff --git a/Source/DataPage/DataPage.tsx b/Source/DataPage/DataPage.tsx
index a781b81c..cc260884 100644
--- a/Source/DataPage/DataPage.tsx
+++ b/Source/DataPage/DataPage.tsx
@@ -28,8 +28,6 @@ import { DataPageLayout } from './DataPageLayout';
 // which the build concatenates from every component stylesheet plus this third-party one — so a
 // consumer still gets a working split view, from the single stylesheet they already import.
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
 /**
  * Props for {@link MenuItem} — a single action in a {@link DataPage}'s
  * action bar.
@@ -155,12 +153,21 @@ export const MenuItems = ({ children }: MenuItemsProps) => {
 export const Columns = ({ children }: ColumnProps) => {
     const context = useDataPageContext();
     const isSnapshotQuery = context.query.prototype instanceof QueryFor;
+    // SAFETY: The runtime prototype check above narrows a constructor shape that
+    // TypeScript cannot discriminate after the generic DataPage context is erased.
+    const snapshotQuery = context.query as Constructor<
+        IQueryFor<object, object> | IQueryFor<object[], object>
+    >;
+    const observableQuery = context.query as Constructor<
+        IObservableQueryFor<object, object> | IObservableQueryFor<object[], object>
+    >;
 
     return (
         <div className='cratis-data-page-table' style={tableRegionStyle}>
             {isSnapshotQuery ? (
                 <DataTableForQuery
                     {...context}
+                    query={snapshotQuery}
                     selection={context.selectedItem}
                     onSelectionChange={context.onSelectionChanged}
                     className={context.tableClassName}
@@ -173,6 +180,7 @@ export const Columns = ({ children }: ColumnProps) => {
             ) : (
                 <DataTableForObservableQuery
                     {...context}
+                    query={observableQuery}
                     selection={context.selectedItem}
                     onSelectionChange={context.onSelectionChanged}
                     className={context.tableClassName}
@@ -205,9 +213,14 @@ export interface IDetailsComponentProps<TDataType> {
     onRefresh?: () => void;
 }
 
-interface IDataPageContext extends DataPageProps<any, any, any> {
-    selectedItem: any;
-    onSelectionChanged: (e: DataTableSelectionChangeEvent<any>) => void;
+interface IDataPageContext
+    extends DataPageProps<
+        IQueryFor<object, object> | IObservableQueryFor<object, object>,
+        object,
+        object
+    > {
+    selectedItem: object | null | undefined;
+    onSelectionChanged: (event: DataTableSelectionChangeEvent<object>) => void;
 }
 
 const DataPageContext = React.createContext<IDataPageContext | null>(null);
@@ -478,7 +491,14 @@ const DataPage = <
         props.onSelectionChange?.(event);
     };
 
-    const context = { ...props, selectedItem, onSelectionChanged: selectionChanged };
+    // SAFETY: React context cannot retain this component's generic parameters. The
+    // provider and every consumer are nested in the same DataPage invocation, so the
+    // erased object-level context never crosses between differently typed pages.
+    const context = {
+        ...props,
+        selectedItem,
+        onSelectionChanged: selectionChanged,
+    } as unknown as IDataPageContext;
 
     return (
         <DataPageContext.Provider value={context}>
diff --git a/Source/MIGRATION.md b/Source/MIGRATION.md
index ebb66213..38b5b08d 100644
--- a/Source/MIGRATION.md
+++ b/Source/MIGRATION.md
@@ -80,7 +80,15 @@ export const ApplicationRoot = ({ children }: { children: React.ReactNode }) =>
 
 ## Replace renderer presets with tokens
 
-Remove `styledMode()`, `CratisPreset`, and `primeReactStyles` before upgrading. The `@cratis/components/styled` renderer-specific entry point is removed in Components 4.
+Remove `styledMode()`, `CratisPreset`, and `primeReactStyles` before upgrading. Components 4 removes three renderer-specific subpaths:
+
+| Removed subpath | Migration |
+| --- | --- |
+| `@cratis/components/styled` | Import Cratis tokens/styles and map product tokens directly as shown below. |
+| `@cratis/components/compatibility` | Replace Prime slot types/sentinel presets with each component's Cratis-owned `*Parts` type. The root `Compatibility` namespace is also removed. |
+| `@cratis/components/primereact-v10-palette` | Remove legacy Prime variable dependencies; define product tokens and map them to `--cratis-*`, or use the baseline theme. |
+
+There is no compatibility-package replacement in Components 4. Stay on Components 3 while renderer-specific types or selectors remain.
 
 Before:
 
@@ -240,6 +248,7 @@ Pass the parts to either query-backed table:
 - Replace `dateFormat` with locale configuration where possible. The prop remains accepted but is ignored.
 - Use `aria-label` or `aria-labelledby` for the segmented date group.
 - `id` identifies the focus group rather than a native text input.
+- The accessible calendar trigger is shown by default; set `showIcon={false}` only for segment-entry-only experiences.
 - `todayLabel` and `clearLabel` override the provider messages for one picker.
 - `showTime` and `hourFormat` remain supported.
 
diff --git a/Source/Toolbar/Toolbar.tsx b/Source/Toolbar/Toolbar.tsx
index 87ff840e..c7a55d2a 100644
--- a/Source/Toolbar/Toolbar.tsx
+++ b/Source/Toolbar/Toolbar.tsx
@@ -1,15 +1,25 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { ReactNode } from 'react';
+import { type HTMLAttributes, type ReactNode } from 'react';
 import { ToolbarDragContext } from './ToolbarDragContext';
 
+/** Stable part attributes for {@link Toolbar}. */
+export interface ToolbarParts {
+    /** Toolbar root. */
+    root?: HTMLAttributes<HTMLDivElement>;
+}
+
 /** Props for the {@link Toolbar} component. */
 export interface ToolbarProps {
     /** The {@link ToolbarButton} elements to render inside this toolbar group. */
     children: ReactNode;
     /** Layout direction of the toolbar (default: 'vertical'). */
     orientation?: 'vertical' | 'horizontal';
+    /** Extra class name for the toolbar root. */
+    className?: string;
+    /** Stable toolbar part attributes. */
+    pt?: ToolbarParts;
     /**
      * When `true`, all {@link ToolbarButton} children become draggable by default.
      * Individual buttons can still override this with their own `draggable` prop.
@@ -28,12 +38,28 @@ export interface ToolbarProps {
  * mimicking the style of tools panels found in canvas-based applications.
  * Supports both vertical (default) and horizontal orientations.
  */
-export const Toolbar = ({ children, orientation = 'vertical', draggable = false, onItemDragStart }: ToolbarProps) => (
+export const Toolbar = ({
+    children,
+    orientation = 'vertical',
+    draggable = false,
+    onItemDragStart,
+    className,
+    pt,
+}: ToolbarProps) => (
     <ToolbarDragContext.Provider value={{ draggable, onItemDragStart }}>
         <div
-            className={`toolbar inline-flex ${
-                orientation === 'horizontal' ? 'flex-row' : 'flex-col'
-            } items-center gap-1 p-2 rounded-2xl`}
+            {...pt?.root}
+            className={[
+                'toolbar inline-flex',
+                orientation === 'horizontal' ? 'flex-row' : 'flex-col',
+                'items-center gap-1 p-2 rounded-2xl',
+                pt?.root?.className,
+                className,
+            ]
+                .filter(Boolean)
+                .join(' ')}
+            data-cratis-part='root'
+            data-orientation={orientation}
         >
             {children}
         </div>
diff --git a/Source/Toolbar/ToolbarButton.tsx b/Source/Toolbar/ToolbarButton.tsx
index f4974154..cb44ddee 100644
--- a/Source/Toolbar/ToolbarButton.tsx
+++ b/Source/Toolbar/ToolbarButton.tsx
@@ -1,6 +1,10 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
+import type {
+    ButtonHTMLAttributes,
+    HTMLAttributes,
+} from 'react';
 import { IconDisplay } from '../Common/Icon';
 import type { Icon } from '../Common/Icon';
 import { Tooltip } from '../Common/Tooltip';
@@ -8,6 +12,16 @@ import type { TooltipPosition } from '../Common/Tooltip';
 import { useToolbarDragContext } from './ToolbarDragContext';
 import { useToolbarFolderMode } from './ToolbarFolderContext';
 
+/** Stable part attributes for {@link ToolbarButton}. */
+export interface ToolbarButtonParts {
+    /** Native button root. */
+    root?: ButtonHTMLAttributes<HTMLButtonElement>;
+    /** Icon wrapper. */
+    icon?: HTMLAttributes<HTMLSpanElement>;
+    /** Text/title label wrapper. */
+    label?: HTMLAttributes<HTMLSpanElement>;
+}
+
 /** Props for the {@link ToolbarButton} component. */
 export interface ToolbarButtonProps {
     /** React icon node or consumer-owned icon-font class. Components installs no icon font. */
@@ -28,6 +42,12 @@ export interface ToolbarButtonProps {
     /** Position of the tooltip relative to the button (default: 'right'). */
     tooltipPosition?: TooltipPosition;
 
+    /** Extra class name for the native button. */
+    className?: string;
+
+    /** Stable button part attributes. */
+    pt?: ToolbarButtonParts;
+
     /**
      * Whether this button can be dragged onto a surface.
      * When omitted the value is inherited from the parent {@link Toolbar}'s `draggable` prop.
@@ -52,7 +72,19 @@ export interface ToolbarButtonProps {
  * An icon button with a tooltip, intended to be placed inside a {@link Toolbar}.
  * Uses the shared {@link Tooltip} component for consistent hover labels.
  */
-export const ToolbarButton = ({ icon, text, title, active = false, onClick, tooltipPosition = 'right', draggable, data, onDragStart }: ToolbarButtonProps) => {
+export const ToolbarButton = ({
+    icon,
+    text,
+    title,
+    active = false,
+    onClick,
+    tooltipPosition = 'right',
+    draggable,
+    data,
+    onDragStart,
+    className,
+    pt,
+}: ToolbarButtonProps) => {
     const dragContext = useToolbarDragContext();
     const folderMode = useToolbarFolderMode();
     const isListMode = folderMode === 'list';
@@ -74,35 +106,70 @@ export const ToolbarButton = ({ icon, text, title, active = false, onClick, tool
     if (isListMode) {
         return (
             <button
+                {...pt?.root}
                 type='button'
                 aria-label={title}
                 onClick={onClick}
                 draggable={isDraggable}
                 onDragStart={isDraggable ? handleDragStart : undefined}
-                className={`toolbar-button toolbar-button--list h-10 px-3 w-full flex items-center justify-start gap-2 rounded-lg cursor-pointer ${activeClass} ${draggableClass}`}
+                className={`toolbar-button toolbar-button--list h-10 px-3 w-full flex items-center justify-start gap-2 rounded-lg cursor-pointer ${activeClass} ${draggableClass} ${pt?.root?.className ?? ''} ${className ?? ''}`}
+                data-cratis-part='button'
+                data-active={active || undefined}
             >
-                {resolvedIcon !== null && <IconDisplay icon={resolvedIcon} className='text-lg flex-shrink-0' />}
-                <span className='toolbar-button__label'>{title}</span>
+                {resolvedIcon !== null && (
+                    <span
+                        {...pt?.icon}
+                        className={pt?.icon?.className}
+                        data-cratis-part='icon'
+                    >
+                        <IconDisplay
+                            icon={resolvedIcon}
+                            className='text-lg flex-shrink-0'
+                        />
+                    </span>
+                )}
+                <span
+                    {...pt?.label}
+                    className={`toolbar-button__label ${pt?.label?.className ?? ''}`}
+                    data-cratis-part='label'
+                >
+                    {title}
+                </span>
             </button>
         );
     }
 
     const buttonSizeClass = hasText ? 'h-10 px-3 min-w-[4rem]' : 'w-10 h-10';
-    const buttonContent = hasText
-        ? <span className='toolbar-button__text'>{text}</span>
-        : resolvedIcon !== null
-            ? <IconDisplay icon={resolvedIcon} className='text-lg' />
-            : null;
+    const buttonContent = hasText ? (
+        <span
+            {...pt?.label}
+            className={`toolbar-button__text ${pt?.label?.className ?? ''}`}
+            data-cratis-part='label'
+        >
+            {text}
+        </span>
+    ) : resolvedIcon === null ? null : (
+        <span
+            {...pt?.icon}
+            className={pt?.icon?.className}
+            data-cratis-part='icon'
+        >
+            <IconDisplay icon={resolvedIcon} className='text-lg' />
+        </span>
+    );
 
     return (
         <Tooltip content={title} position={tooltipPosition}>
             <button
+                {...pt?.root}
                 type='button'
                 aria-label={title}
                 onClick={onClick}
                 draggable={isDraggable}
                 onDragStart={isDraggable ? handleDragStart : undefined}
-                className={`toolbar-button ${buttonSizeClass} flex items-center justify-center rounded-lg cursor-pointer ${activeClass} ${draggableClass}`}
+                className={`toolbar-button ${buttonSizeClass} flex items-center justify-center rounded-lg cursor-pointer ${activeClass} ${draggableClass} ${pt?.root?.className ?? ''} ${className ?? ''}`}
+                data-cratis-part='button'
+                data-active={active || undefined}
             >
                 {buttonContent}
             </button>
diff --git a/Source/Toolbar/ToolbarFanOutItem.tsx b/Source/Toolbar/ToolbarFanOutItem.tsx
index fe94ceb7..c7c243b4 100644
--- a/Source/Toolbar/ToolbarFanOutItem.tsx
+++ b/Source/Toolbar/ToolbarFanOutItem.tsx
@@ -1,12 +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 React, { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
+import React, {
+    type ButtonHTMLAttributes,
+    type HTMLAttributes,
+    type ReactNode,
+    useCallback,
+    useEffect,
+    useRef,
+    useState,
+} from 'react';
 import { IconDisplay } from '../Common/Icon';
 import type { Icon } from '../Common/Icon';
 import { Tooltip } from '../Common/Tooltip';
 import type { TooltipPosition } from '../Common/Tooltip';
 
+/** Stable part attributes for {@link ToolbarFanOutItem}. */
+export interface ToolbarFanOutParts {
+    /** Fan-out composition root. */
+    root?: HTMLAttributes<HTMLDivElement>;
+    /** Native trigger button. */
+    trigger?: ButtonHTMLAttributes<HTMLButtonElement>;
+    /** Expanded tool panel. */
+    panel?: HTMLAttributes<HTMLDivElement>;
+}
+
 /** Props for the {@link ToolbarFanOutItem} component. */
 export interface ToolbarFanOutItemProps {
     /** React icon node or consumer-owned icon-font class for the trigger. */
@@ -21,6 +39,12 @@ export interface ToolbarFanOutItemProps {
     /** Direction the panel fans out from the trigger button (default: 'right'). */
     fanOutDirection?: 'right' | 'left' | 'up' | 'down';
 
+    /** Extra class name for the fan-out root. */
+    className?: string;
+
+    /** Stable fan-out part attributes. */
+    pt?: ToolbarFanOutParts;
+
     /** The toolbar items to render inside the fan-out panel. */
     children: ReactNode;
 }
@@ -40,6 +64,8 @@ export const ToolbarFanOutItem = ({
     tooltip,
     tooltipPosition = 'right',
     fanOutDirection = 'right',
+    className,
+    pt,
     children,
 }: ToolbarFanOutItemProps) => {
     const [isExpanded, setIsExpanded] = useState(false);
@@ -101,21 +127,30 @@ export const ToolbarFanOutItem = ({
     const directionClass = `toolbar-fanout-panel--${fanOutDirection}`;
 
     return (
-        <div className='toolbar-fanout-item' ref={containerRef}>
+        <div
+            {...pt?.root}
+            className={`toolbar-fanout-item ${pt?.root?.className ?? ''} ${className ?? ''}`}
+            data-cratis-part='fanout-root'
+            ref={containerRef}
+        >
             <Tooltip content={tooltip} position={tooltipPosition} disabled={isExpanded}>
                 <button
+                    {...pt?.trigger}
                     type='button'
                     aria-label={tooltip}
                     aria-expanded={isExpanded}
                     onClick={handleToggle}
-                    className={`toolbar-button w-10 h-10 flex items-center justify-center rounded-lg cursor-pointer ${activeClass}`}
+                    className={`toolbar-button w-10 h-10 flex items-center justify-center rounded-lg cursor-pointer ${activeClass} ${pt?.trigger?.className ?? ''}`}
+                    data-cratis-part='fanout-trigger'
                 >
                     <IconDisplay icon={icon} className='text-lg' />
                 </button>
             </Tooltip>
             <div
+                {...pt?.panel}
                 ref={panelRef}
-                className={`toolbar-fanout-panel ${directionClass} ${panelVisibleClass} ${panelSettledClass}`}
+                className={`toolbar-fanout-panel ${directionClass} ${panelVisibleClass} ${panelSettledClass} ${pt?.panel?.className ?? ''}`}
+                data-cratis-part='fanout-panel'
                 onTransitionEnd={handleTransitionEnd}
             >
                 {children}

From fc2c0bea8a47da3ebe9a47a9b8231eeb1222d275 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Sun, 23 Aug 2026 18:46:51 +0200
Subject: [PATCH 021/267] Close final consumer contract gaps

Forward localized search labels, expose integrated Canvas labels and glass surfaces with a safe default, and honor arbitrary Dropdown tab order values with regression coverage.
---
 Documentation/Canvas/index.md                  |  4 +++-
 Source/Canvas/Canvas.tsx                       | 10 +++++++++-
 Source/Canvas/CanvasControls.tsx               |  8 ++++++--
 .../DataTables/DataTableForObservableQuery.tsx |  2 ++
 Source/DataTables/DataTableForQuery.tsx        |  2 ++
 Source/Dropdown/Dropdown.tsx                   |  5 +++--
 .../when_using_migration_aliases.tsx           | 18 ++++++++++++++++++
 7 files changed, 43 insertions(+), 6 deletions(-)

diff --git a/Documentation/Canvas/index.md b/Documentation/Canvas/index.md
index c9a9811b..4d2b55c1 100644
--- a/Documentation/Canvas/index.md
+++ b/Documentation/Canvas/index.md
@@ -62,7 +62,9 @@ const handleReady = (handle: CanvasHandle) => {
 | `className` / `style` | standard React values | — | Canvas root customization. |
 | `onHelp` | `() => void` | — | Adds and handles the help action. |
 | `helpTitle` | `string` | provider-independent English fallback | Help action label. |
-| `disableControlsGlass` | `boolean` | `false` | Uses the lower-cost CSS frosted pill for large scenes. |
+| `controlsLabels` | `CanvasControlsLabels` | English fallbacks | Localizes integrated minimap, zoom, reset, and help controls. |
+| `controlsGlassSurface` | `ReactNode` | — | Product-owned glass/acrylic surface rendered behind integrated controls. |
+| `disableControlsGlass` | `boolean` | `false` | Forces the low-cost CSS frosted pill. The same fallback is used automatically when no `controlsGlassSurface` is supplied. |
 | `onHandleReady` | `(handle: CanvasHandle) => void` | — | Provides imperative camera/item-bound operations. |
 | `readOnly` | `boolean` | `false` | Keeps pan/zoom but absorbs content interaction. |
 | `backgroundDragPans` | `boolean` | `true` | Set `false` when the product owns empty-background drag selection. Wheel, middle-button, and touch panning remain available. |
diff --git a/Source/Canvas/Canvas.tsx b/Source/Canvas/Canvas.tsx
index f8ab3615..3457d067 100644
--- a/Source/Canvas/Canvas.tsx
+++ b/Source/Canvas/Canvas.tsx
@@ -4,7 +4,7 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import * as PIXI from 'pixi.js';
 import { LAYER_ATTR, TRANSFORM_HOST_ATTR } from './glassAttributes';
-import { CanvasControls } from './CanvasControls';
+import { CanvasControls, type CanvasControlsLabels } from './CanvasControls';
 import { CanvasMinimapHandle, MinimapItem } from './CanvasMinimap';
 import { canvasGesture } from './canvasGesture';
 import { canvasTransformActivity } from './canvasTransformActivity';
@@ -142,6 +142,10 @@ export interface CanvasProps<T extends CanvasItemData = CanvasItemData> {
     onHelp?: () => void;
     /** Accessible label and tooltip for the help action. */
     helpTitle?: string;
+    /** Localized labels for integrated zoom/minimap/help controls. */
+    controlsLabels?: CanvasControlsLabels;
+    /** Optional product-owned glass/acrylic surface behind integrated controls. */
+    controlsGlassSurface?: React.ReactNode;
     /** Uses a low-cost CSS frosted pill instead of a consumer-supplied glass surface. */
     disableControlsGlass?: boolean;
     /** Receives imperative camera and measurement operations. */
@@ -200,6 +204,8 @@ function Canvas<T extends CanvasItemData = CanvasItemData>({
     style,
     onHelp,
     helpTitle,
+    controlsLabels,
+    controlsGlassSurface,
     disableControlsGlass = false,
     readOnly = false,
     backgroundDragPans = true,
@@ -1067,6 +1073,8 @@ function Canvas<T extends CanvasItemData = CanvasItemData>({
                     placement={controlsPlacement}
                     onHelp={onHelp}
                     helpTitle={helpTitle}
+                    labels={controlsLabels}
+                    glassSurface={controlsGlassSurface}
                     disableGlass={disableControlsGlass}
                 />
             )}
diff --git a/Source/Canvas/CanvasControls.tsx b/Source/Canvas/CanvasControls.tsx
index 73656930..7247c92e 100644
--- a/Source/Canvas/CanvasControls.tsx
+++ b/Source/Canvas/CanvasControls.tsx
@@ -124,6 +124,7 @@ export const CanvasControls: React.FC<CanvasControlsProps> = ({
     }, [getZoom]);
 
     const refreshDisplayZoom = () => setDisplayZoom(getZoom());
+    const usesPlainSurface = disableGlass || !glassSurface;
 
     return (
         <div
@@ -147,8 +148,11 @@ export const CanvasControls: React.FC<CanvasControlsProps> = ({
                 is only set when the glass surface exists: with the plain pill nothing refracts this
                 subtree, and the marker would make every zoom-label update trigger a whole-page
                 content-layer capture. */}
-            <div className={`canvas-controls-glass${disableGlass ? ' canvas-controls-glass--plain' : ''}`} {...(disableGlass ? {} : { [CONTENT_ATTR]: 'true' })}>
-                {!disableGlass && glassSurface}
+            <div
+                className={`canvas-controls-glass${usesPlainSurface ? ' canvas-controls-glass--plain' : ''}`}
+                {...(usesPlainSurface ? {} : { [CONTENT_ATTR]: 'true' })}
+            >
+                {!usesPlainSurface && glassSurface}
             <div className='canvas-controls-bar inline-flex flex-row items-center gap-1 px-2 py-1.5 rounded-2xl'>
                 {showMinimapToggle && (
                     <>
diff --git a/Source/DataTables/DataTableForObservableQuery.tsx b/Source/DataTables/DataTableForObservableQuery.tsx
index 3eafd05f..65c1da1c 100644
--- a/Source/DataTables/DataTableForObservableQuery.tsx
+++ b/Source/DataTables/DataTableForObservableQuery.tsx
@@ -248,6 +248,8 @@ export const DataTableForObservableQuery = <
                     selection={props.selection}
                     onSelectionChange={props.onSelectionChange}
                     globalFilterFields={props.globalFilterFields}
+                    globalSearchPlaceholder={props.globalSearchPlaceholder}
+                    globalSearchAriaLabel={props.globalSearchAriaLabel}
                     defaultFilters={props.defaultFilters}
                     scrollable
                     scrollHeight='100%'
diff --git a/Source/DataTables/DataTableForQuery.tsx b/Source/DataTables/DataTableForQuery.tsx
index 9f480249..08a58f53 100644
--- a/Source/DataTables/DataTableForQuery.tsx
+++ b/Source/DataTables/DataTableForQuery.tsx
@@ -198,6 +198,8 @@ export const DataTableForQuery = <
                     selection={props.selection}
                     onSelectionChange={props.onSelectionChange}
                     globalFilterFields={props.globalFilterFields}
+                    globalSearchPlaceholder={props.globalSearchPlaceholder}
+                    globalSearchAriaLabel={props.globalSearchAriaLabel}
                     defaultFilters={props.defaultFilters}
                     className={props.className}
                     style={{ minWidth: '100%' }}
diff --git a/Source/Dropdown/Dropdown.tsx b/Source/Dropdown/Dropdown.tsx
index aee3393b..dd26040c 100644
--- a/Source/Dropdown/Dropdown.tsx
+++ b/Source/Dropdown/Dropdown.tsx
@@ -285,10 +285,11 @@ export const Dropdown = <T = unknown,>({
     };
     // React Aria's Select trigger context does not forward aria-invalid from its Button child.
     // Keep the Cratis validation contract on the actual focusable control after context props merge.
-    const applyTriggerInvalidState = (element: HTMLButtonElement | null) => {
+    const applyTriggerState = (element: HTMLButtonElement | null) => {
         if (!element) return;
         if (effectiveInvalid) element.setAttribute('aria-invalid', 'true');
         else element.removeAttribute('aria-invalid');
+        if (tabIndex !== undefined) element.tabIndex = tabIndex;
     };
 
     if (multiple) {
@@ -621,7 +622,7 @@ export const Dropdown = <T = unknown,>({
             >
                 <AriaButton
                     {...pt?.trigger}
-                    ref={applyTriggerInvalidState}
+                    ref={applyTriggerState}
                     id={triggerId}
                     excludeFromTabOrder={tabIndex === -1}
                     aria-invalid={effectiveInvalid || undefined}
diff --git a/Source/Dropdown/for_Dropdown/when_using_migration_aliases.tsx b/Source/Dropdown/for_Dropdown/when_using_migration_aliases.tsx
index ac1a44c3..5882f99f 100644
--- a/Source/Dropdown/for_Dropdown/when_using_migration_aliases.tsx
+++ b/Source/Dropdown/for_Dropdown/when_using_migration_aliases.tsx
@@ -101,6 +101,24 @@ describe('when using migration aliases', () => {
         );
     });
 
+    it('should apply an explicit positive tab index to the primary control', async () => {
+        await act(async () => {
+            root.render(
+                <CratisComponentsProvider>
+                    <Dropdown
+                        options={[{ label: 'Developer', value: 'developer' }]}
+                        tabIndex={3}
+                    />
+                </CratisComponentsProvider>,
+            );
+        });
+        expect(
+            container.querySelector<HTMLButtonElement>(
+                '[data-cratis-part="trigger"]',
+            )?.tabIndex,
+        ).to.equal(3);
+    });
+
     it('should map legacy input and select classes to stable Cratis elements', () => {
         expect(trigger.classList.contains('product-dropdown-input')).to.equal(true);
         expect(dropdownRoot.classList.contains('product-dropdown-select')).to.equal(true);

From f7dbf165eb8792993bb2c90f1064dddc12747cef Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Sun, 23 Aug 2026 21:33:25 +0200
Subject: [PATCH 022/267] Resolve final Components 4 release blockers

Remove residual renderer icon and token assumptions, fix PivotViewer token overrides and Chips duplicate/max semantics, ship the bundled font license, complete public part exports, and expand migration guidance for removed APIs plus Ada and Studio.
---
 Documentation/Canvas/index.md                 |   4 +-
 Documentation/CommandForm/chips-field.md      |   5 +
 Documentation/Common/icon.md                  |  77 ++--
 .../DataTables/column-configuration.md        |   2 +-
 Documentation/Styling/cratis-tokens.md        |   2 +-
 Documentation/Styling/pass-through.md         |   4 +-
 Documentation/Toolbar/active-state.md         |   4 +-
 Documentation/Toolbar/context-switching.md    |  14 +-
 Documentation/Toolbar/drag-and-drop.md        |  10 +-
 Documentation/Toolbar/fan-out.md              |  20 +-
 Documentation/Toolbar/folder.md               |  30 +-
 Documentation/Toolbar/groups.md               |  22 +-
 Documentation/Toolbar/index.md                |   2 +-
 Documentation/Toolbar/multiple-groups.md      |   8 +-
 Documentation/Toolbar/orientation.md          |   4 +-
 Documentation/Toolbar/sections.md             |  12 +-
 Documentation/Toolbar/slots.md                |  20 +-
 Documentation/Toolbar/toolbar-layout.md       |  14 +-
 Documentation/Toolbar/tooltip-position.md     |   2 +-
 Documentation/migration.md                    | 136 ++++++-
 ...n_a_renamed_field_is_nested_in_a_column.ts |   2 -
 ...ld_carries_only_the_legacy_display_name.ts |   2 -
 .../when_field_display_name_is_overwritten.ts |   2 -
 .../when_given_initial_valid_values.ts        |   2 -
 .../when_inspecting_the_column_wrapper.ts     |   2 -
 .../for_CommandDialog/when_not_executing.ts   |   2 -
 .../when_validity_is_gated.ts                 |   4 -
 .../and_a_bare_string_sits_between_steps.ts   |   7 -
 .../and_it_is_in_the_middle.ts                |  13 +-
 .../and_it_is_null.ts                         |   7 -
 .../and_it_is_undefined.ts                    |   7 -
 .../and_the_first_step_is_hidden.ts           |   7 -
 .../and_the_last_step_is_false.ts             |   7 -
 .../and_the_steps_come_from_a_map.ts          |   7 -
 .../and_two_are_hidden.ts                     |   7 -
 .../when_every_step_is_hidden.ts              |   5 -
 ...ive_step_is_past_the_last_rendered_step.ts |   6 -
 ...n_a_step_disappears_after_it_was_passed.ts |   6 -
 .../and_a_bare_string_sits_between_steps.ts   |   4 -
 .../and_it_is_in_the_middle.ts                |  11 +-
 .../and_it_is_null.ts                         |   4 -
 .../and_it_is_undefined.ts                    |   4 -
 .../and_the_first_step_is_hidden.ts           |   4 -
 .../and_the_last_step_is_false.ts             |   4 -
 .../and_the_steps_come_from_a_map.ts          |   4 -
 .../and_two_are_hidden.ts                     |   4 -
 .../and_escape_is_pressed.ts                  |  14 +-
 .../and_the_header_close_is_used.ts           |   8 -
 .../when_every_step_is_hidden.ts              |   6 -
 .../when_form_is_invalid.ts                   |   1 -
 .../when_not_executing.ts                     |  11 +-
 .../and_an_async_transform_has_not_settled.ts |   6 -
 .../and_it_is_asked_for.ts                    |   6 -
 .../and_it_is_clicked.ts                      |   6 -
 .../and_it_is_given_a_label.ts                |   6 -
 .../and_it_is_not_asked_for.ts                |   6 -
 .../and_submit_is_clicked_instead.ts          |   6 -
 .../and_the_command_is_executing.ts           |   6 -
 .../when_single_step.ts                       |   1 -
 .../when_step_has_field_errors.ts             |   5 -
 Source/CommandForm/fields/ChipsField.tsx      |  23 +-
 Source/CommandForm/fields/chipValues.ts       |  27 ++
 .../when_appending_candidates.ts              |  26 ++
 Source/Common/Button.stories.tsx              |   6 +-
 Source/Common/FormElement.stories.tsx         |   6 +-
 Source/Common/FormElement.tsx                 |  17 +-
 Source/Common/Icon.stories.tsx                | 109 ++----
 Source/Common/Icon.tsx                        |  23 +-
 .../and_rendered.ts                           |   8 +-
 .../and_extra_class_is_provided.ts            |   7 +-
 .../when_icon_is_a_string/and_rendered.ts     |   4 +-
 .../when_given_a_bare_icon_name.ts            |  14 +-
 .../when_given_a_full_class_string.ts         |   8 +-
 .../when_given_a_pi_class_without_base.ts     |  16 -
 .../when_given_a_single_provider_class.ts     |  12 +
 Source/Common/normalizeIconClass.ts           |  52 +--
 Source/DataPage/DataPage.stories.tsx          |  12 +-
 .../for_DataPage/given/a_data_page.ts         |  29 +-
 Source/DataTables/Column.tsx                  |   7 +-
 .../given/a_data_table.ts                     |  13 +-
 Source/Dialogs/Dialog.stories.tsx             |   8 +-
 Source/Display/Display.stories.tsx            |   4 +-
 Source/MIGRATION.md                           |  30 +-
 Source/PivotViewer/PivotViewer.tsx            |  26 +-
 Source/PivotViewer/components/PivotCanvas.tsx |   7 +-
 .../components/pivot/colorResolver.ts         |  20 +-
 .../when_semantic_tokens_are_defined.ts       |  45 +++
 Source/README.md                              |   2 +-
 Source/Toolbar/Toolbar.stories.tsx            | 342 +++++++++---------
 Source/Toolbar/ToolbarGroup.tsx               |   2 +-
 Source/Toolbar/ToolbarLayout.tsx              |   8 +-
 Source/Toolbar/ToolbarSlot.tsx                |   2 +-
 .../and_button_is_not_draggable.ts            |   2 +-
 .../and_button_is_rendered.ts                 |   2 +-
 .../and_button_is_rendered.ts                 |   2 +-
 .../and_item_is_rendered.ts                   |   2 +-
 Source/Toolbar/index.ts                       |   6 +-
 Source/scripts/copy-css.sh                    |   5 +
 Source/scripts/verify-exports.mjs             |  21 +-
 Source/tokens.css                             |  48 +--
 100 files changed, 779 insertions(+), 838 deletions(-)
 create mode 100644 Source/CommandForm/fields/chipValues.ts
 create mode 100644 Source/CommandForm/for_ChipsField/when_appending_candidates.ts
 rename Source/Common/for_IconDisplay/{when_icon_is_a_pi_class_without_base => when_icon_is_a_single_provider_class}/and_rendered.ts (70%)
 delete mode 100644 Source/Common/for_normalizeIconClass/when_given_a_pi_class_without_base.ts
 create mode 100644 Source/Common/for_normalizeIconClass/when_given_a_single_provider_class.ts
 create mode 100644 Source/PivotViewer/for_resolveCardColors/when_semantic_tokens_are_defined.ts

diff --git a/Documentation/Canvas/index.md b/Documentation/Canvas/index.md
index 4d2b55c1..aeb97918 100644
--- a/Documentation/Canvas/index.md
+++ b/Documentation/Canvas/index.md
@@ -120,7 +120,7 @@ The Canvas entry point also exports:
 - `AnchoredOverlay` and its side/alignment types for body-level overlays attached to a control.
 - `canvasGesture`, `canvasTransformActivity`, and `createSelfSuspendingFrameLoop` for advanced canvas integrations.
 
-These shapes are optional conveniences, not domain models. Applications own persistence, commands, read models, authorization, and collaboration policy through Arc/Chronicle. Pass typed data and callbacks into the shapes rather than coupling them to generated proxies.
+These shapes are optional conveniences, not domain models. Applications own persistence, authorization, and collaboration policy. Arc can own commands, queries, validation, authorization, and generated React bindings without Chronicle. Applications that choose Arc plus Chronicle additionally own event streams, projections, and read models. Pass typed data and callbacks into Canvas shapes rather than coupling them to generated proxies.
 
 ## Styling
 
@@ -130,4 +130,4 @@ Canvas structure uses the standard semantic token seam:
 - `--cratis-text-color`, `--cratis-text-color-secondary`
 - `--cratis-primary-color`, `--cratis-green-500`, `--cratis-red-500`
 
-Use `className` on Canvas roots and product CSS for shape-specific treatment. Components does not install PrimeIcons; library-owned actions use bundled React icon components.
+Use `className` on Canvas roots and product CSS for shape-specific treatment. Components does not install an icon font; library-owned actions use bundled React icon components.
diff --git a/Documentation/CommandForm/chips-field.md b/Documentation/CommandForm/chips-field.md
index 7c30e002..1cf2d4dd 100644
--- a/Documentation/CommandForm/chips-field.md
+++ b/Documentation/CommandForm/chips-field.md
@@ -34,6 +34,11 @@ import { ChipsField } from '@cratis/components/CommandForm';
 ## Behavior
 
 - Default value is an empty array.
+- Enter commits the current draft; `addOnBlur` can also commit when focus leaves the field.
+- Candidates are trimmed and empty candidates are ignored.
+- With `allowDuplicate={false}`, duplicates are removed against both existing values and other candidates in the same draft **before** `max` is applied. An existing duplicate therefore cannot consume the final slot ahead of a later unique value.
+- With `allowDuplicate`, repeated values are preserved until `max` is reached.
+- Each remove action defaults to the item-specific accessible name `Remove <item>`; localize it with the callback form of `removeAriaLabel`.
 - The field spans full width within its container.
 - Validation state is reflected through `aria-invalid` and `data-invalid`.
 
diff --git a/Documentation/Common/icon.md b/Documentation/Common/icon.md
index 5699c0b6..851c3b68 100644
--- a/Documentation/Common/icon.md
+++ b/Documentation/Common/icon.md
@@ -1,66 +1,57 @@
 # Icon
 
-The `Icon` type and `IconDisplay` component provide a unified way to pass icons throughout the component library. Any component that accepts an icon can receive either a PrimeIcons CSS class string or any React node.
+The `Icon` type and `IconDisplay` component let Cratis controls render either a React icon node or a complete consumer-owned icon-font CSS class. Components does not install an icon font, infer a provider, or add provider-specific base classes.
 
-## Icon Type
+Prefer React nodes for portable component-library code:
 
-```ts
-import type { Icon } from '@cratis/components/Common';
-
-// A PrimeIcons (or other icon-font) CSS class string
-const stringIcon: Icon = 'pi pi-home';
+```tsx
+import { FaHouse } from 'react-icons/fa6';
+import { IconDisplay } from '@cratis/components/Common';
 
-// Any React node — SVG component, third-party icon, emoji wrapper, …
-const nodeIcon: Icon = <MyCustomSvgIcon />;
+<IconDisplay icon={<FaHouse aria-hidden='true' />} />
 ```
 
-## IconDisplay Component
+## Icon type
 
-`IconDisplay` renders an `Icon` value:
+```tsx
+import type { Icon } from '@cratis/components/Common';
+import { FaHouse } from 'react-icons/fa6';
 
-- A non-empty **string** is treated as a CSS class and rendered as `<i className={...} />`.
-- Any other value (**React node**) is rendered as-is.
+const reactIcon: Icon = <FaHouse aria-hidden='true' />;
+const productFontIcon: Icon = 'product-icons product-home';
+```
+
+A string is passed to an `<i>` element unchanged apart from trimming whitespace. The consuming product must load the stylesheet and supply every class required by its icon provider.
+
+## IconDisplay
 
 ```tsx
 import { IconDisplay } from '@cratis/components/Common';
 
-// Renders: <i className="pi pi-home text-2xl" />
-<IconDisplay icon='pi pi-home' className='text-2xl' />
-
-// Renders the SVG element directly
-<IconDisplay icon={<MyHomeIcon />} />
+// The product owns the product-icons stylesheet.
+<IconDisplay icon='product-icons product-home' className='text-2xl' />
 ```
 
-### Props
-
 | Prop | Type | Required | Description |
 |---|---|---|---|
-| `icon` | `Icon` | ✅ | The icon to render — a CSS class string or a React node. |
-| `className` | `string` | — | Extra CSS classes added to the `<i>` wrapper when `icon` is a string. Has no effect for React node icons. |
+| `icon` | `Icon` | ✅ | React node or complete consumer-owned CSS class string. |
+| `className` | `string` | — | Extra classes for the `<i>` element used by string icons. It does not wrap React nodes. |
 
-## Using ReactNode Icons in Toolbar Components
+## Toolbar icons
 
-`ToolbarButton` and `ToolbarFanOutItem` both accept `Icon` for their `icon` prop. String-based usage is unchanged:
+`ToolbarButton`, `ToolbarFanOutItem`, and `ToolbarFolder` accept `Icon` directly:
 
 ```tsx
+import { FaArrowPointer, FaPencil, FaShapes, FaVectorSquare } from 'react-icons/fa6';
 import { Toolbar, ToolbarButton, ToolbarFanOutItem } from '@cratis/components/Toolbar';
-import { FaPencil, FaShapes } from 'react-icons/fa6';
-
-function MyToolbar() {
-    return (
-        <Toolbar>
-            {/* String — existing usage unchanged */}
-            <ToolbarButton icon='pi pi-arrow-up-left' title='Select' />
-
-            {/* ReactNode — third-party icon component */}
-            <ToolbarButton icon={<FaPencil />} title='Draw' />
-
-            {/* ReactNode — fan-out trigger */}
-            <ToolbarFanOutItem icon={<FaShapes />} tooltip='Shapes'>
-                <ToolbarButton icon='pi pi-stop' title='Rectangle' />
-                <ToolbarButton icon='pi pi-circle' title='Circle' />
-            </ToolbarFanOutItem>
-        </Toolbar>
-    );
-}
+
+<Toolbar>
+    <ToolbarButton icon={<FaArrowPointer />} title='Select' />
+    <ToolbarButton icon={<FaPencil />} title='Draw' />
+    <ToolbarFanOutItem icon={<FaShapes />} tooltip='Shapes'>
+        <ToolbarButton icon={<FaVectorSquare />} title='Rectangle' />
+    </ToolbarFanOutItem>
+</Toolbar>
 ```
+
+Not every API named `icon` has the same shape. For example, `DataPage.MenuItem.icon` is a React component type because the page instantiates it. Follow the type exported by the specific component rather than assuming every icon-bearing API accepts `Icon`.
diff --git a/Documentation/DataTables/column-configuration.md b/Documentation/DataTables/column-configuration.md
index 0856736c..ee27ccab 100644
--- a/Documentation/DataTables/column-configuration.md
+++ b/Documentation/DataTables/column-configuration.md
@@ -31,7 +31,7 @@ Set `selectionMode='single'` on a selection column and configure the table's `da
 
 ## Sorting
 
-Set `sortable`. Sorting applies to the currently loaded page. Query-backed complete-result sorting belongs on the server and should be expressed through the Arc paging/sorting contract.
+Set `sortable` for client-side sorting of the currently loaded page. These table components do not automatically forward sort state to Arc. For complete-result sorting, add explicit sort arguments to the generated query, apply them on the server before paging, and connect the product's sort controls to those arguments.
 
 ## Column filters
 
diff --git a/Documentation/Styling/cratis-tokens.md b/Documentation/Styling/cratis-tokens.md
index a889a9f2..703ae33d 100644
--- a/Documentation/Styling/cratis-tokens.md
+++ b/Documentation/Styling/cratis-tokens.md
@@ -57,6 +57,6 @@ The `--cratis-*` variables are the supported theming boundary. The optional base
 }
 ```
 
-The token layer retains fallbacks to the generic `--surface-*`, `--text-color`, and `--primary-color` names for a staged migration from Components 3. New product code should define `--cratis-*` directly.
+The token layer has renderer-independent baseline values and does not read legacy `--surface-*`, `--text-color`, `--primary-color`, or `--p-*` names. Import `@cratis/components/tokens` first, then assign product values to `--cratis-*` directly. This keeps product theming independent of any renderer token vocabulary.
 
 Use [Stable component parts](pass-through.md) when token changes are not enough for a product-specific component treatment.
diff --git a/Documentation/Styling/pass-through.md b/Documentation/Styling/pass-through.md
index 99d6e6b1..801d8145 100644
--- a/Documentation/Styling/pass-through.md
+++ b/Documentation/Styling/pass-through.md
@@ -47,7 +47,7 @@ Command field part keys:
 
 | Field                  | Typed keys                                    |
 | ---------------------- | --------------------------------------------- |
-| InputText / TextArea   | `root`                                        |
+| InputText / TextArea   | `root` (the native control; see the DOM note below) |
 | Number                 | `root`, `input`                               |
 | Checkbox               | `root`, `input`, `box`, `indicator`           |
 | ToggleSwitch           | `root`, `input`, `control`, `handle`          |
@@ -61,6 +61,8 @@ Command field part keys:
 | Calendar               | `DatePickerInputPassThrough` keys             |
 | Dropdown / MultiSelect | `DropdownParts` keys                          |
 
+`InputTextParts.root` applies to the native element carrying `data-cratis-part='input'`; `TextAreaParts.root` applies to `data-cratis-part='textarea'`. The typed key is retained for source compatibility, but there is no extra field-root DOM wrapper.
+
 Named behavior props override conflicting part attributes. Part classes and styles merge with component structure. `DropdownParts.input` and `select` are narrow Components 3 migration aliases for class, style, id, and ARIA values; attach event handlers and other ordinary attributes to the current `trigger`, `filter`, `multiple`, `listbox`, or `option` part instead.
 
 ## DOM part values
diff --git a/Documentation/Toolbar/active-state.md b/Documentation/Toolbar/active-state.md
index 80df90ed..68d93446 100644
--- a/Documentation/Toolbar/active-state.md
+++ b/Documentation/Toolbar/active-state.md
@@ -9,13 +9,13 @@ function DrawingToolbar() {
     return (
         <Toolbar>
             <ToolbarButton
-                icon='pi pi-arrow-up-left'
+                icon={<span aria-hidden='true'>◆</span>}
                 title='Select'
                 active={activeTool === 'select'}
                 onClick={() => setActiveTool('select')}
             />
             <ToolbarButton
-                icon='pi pi-pencil'
+                icon={<span aria-hidden='true'>◆</span>}
                 title='Draw'
                 active={activeTool === 'draw'}
                 onClick={() => setActiveTool('draw')}
diff --git a/Documentation/Toolbar/context-switching.md b/Documentation/Toolbar/context-switching.md
index f5fa204c..5be9b541 100644
--- a/Documentation/Toolbar/context-switching.md
+++ b/Documentation/Toolbar/context-switching.md
@@ -8,19 +8,19 @@ function ContextualToolbar() {
 
     return (
         <Toolbar>
-            <ToolbarButton icon='pi pi-arrow-up-left' title='Select' />
+            <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Select' />
             <ToolbarSection activeContext={mode}>
                 <ToolbarContext name='drawing'>
-                    <ToolbarButton icon='pi pi-pencil' title='Draw' />
-                    <ToolbarButton icon='pi pi-stop' title='Rectangle' />
-                    <ToolbarButton icon='pi pi-circle' title='Circle' />
+                    <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Draw' />
+                    <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Rectangle' />
+                    <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Circle' />
                 </ToolbarContext>
                 <ToolbarContext name='text'>
-                    <ToolbarButton icon='pi pi-align-left' title='Align Left' />
-                    <ToolbarButton icon='pi pi-align-center' title='Align Center' />
+                    <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Align Left' />
+                    <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Align Center' />
                 </ToolbarContext>
             </ToolbarSection>
-            <ToolbarButton icon='pi pi-undo' title='Undo' />
+            <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Undo' />
         </Toolbar>
     );
 }
diff --git a/Documentation/Toolbar/drag-and-drop.md b/Documentation/Toolbar/drag-and-drop.md
index a6b0f93c..785a8b8d 100644
--- a/Documentation/Toolbar/drag-and-drop.md
+++ b/Documentation/Toolbar/drag-and-drop.md
@@ -13,9 +13,9 @@ Set `draggable` on the `Toolbar` to make every child `ToolbarButton` draggable.
         console.log('Started dragging:', data);
     }}
 >
-    <ToolbarButton icon='pi pi-pencil' title='Pencil' data={{ tool: 'pencil' }} />
-    <ToolbarButton icon='pi pi-stop' title='Rectangle' data={{ tool: 'rectangle' }} />
-    <ToolbarButton icon='pi pi-circle' title='Circle' data={{ tool: 'circle' }} />
+    <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Pencil' data={{ tool: 'pencil' }} />
+    <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Rectangle' data={{ tool: 'rectangle' }} />
+    <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Circle' data={{ tool: 'circle' }} />
 </Toolbar>
 ```
 
@@ -26,7 +26,7 @@ Set `draggable` and an optional `onDragStart` callback directly on a `ToolbarBut
 ```tsx
 <Toolbar>
     <ToolbarButton
-        icon='pi pi-pencil'
+        icon={<span aria-hidden='true'>◆</span>}
         title='Pencil'
         draggable
         data={{ tool: 'pencil' }}
@@ -34,7 +34,7 @@ Set `draggable` and an optional `onDragStart` callback directly on a `ToolbarBut
             console.log('Pencil drag started', data);
         }}
     />
-    <ToolbarButton icon='pi pi-undo' title='Undo' />
+    <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Undo' />
 </Toolbar>
 ```
 
diff --git a/Documentation/Toolbar/fan-out.md b/Documentation/Toolbar/fan-out.md
index 1375c7f1..565156d0 100644
--- a/Documentation/Toolbar/fan-out.md
+++ b/Documentation/Toolbar/fan-out.md
@@ -4,11 +4,11 @@
 
 ```tsx
 <Toolbar>
-    <ToolbarButton icon='pi pi-arrow-up-left' title='Select' />
-    <ToolbarFanOutItem icon='pi pi-th-large' tooltip='Shapes'>
-        <ToolbarButton icon='pi pi-stop' title='Rectangle' />
-        <ToolbarButton icon='pi pi-circle' title='Circle' />
-        <ToolbarButton icon='pi pi-minus' title='Line' />
+    <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Select' />
+    <ToolbarFanOutItem icon={<span aria-hidden='true'>◆</span>} tooltip='Shapes'>
+        <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Rectangle' />
+        <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Circle' />
+        <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Line' />
     </ToolbarFanOutItem>
 </Toolbar>
 ```
@@ -16,7 +16,7 @@
 By default the panel fans out to the right. Use `fanOutDirection='left'` when the toolbar is positioned on the right side of the screen:
 
 ```tsx
-<ToolbarFanOutItem icon='pi pi-th-large' tooltip='Shapes' fanOutDirection='left'>
+<ToolbarFanOutItem icon={<span aria-hidden='true'>◆</span>} tooltip='Shapes' fanOutDirection='left'>
     ...
 </ToolbarFanOutItem>
 ```
@@ -24,11 +24,11 @@ By default the panel fans out to the right. Use `fanOutDirection='left'` when th
 You can also fan out vertically:
 
 ```tsx
-<ToolbarFanOutItem icon='pi pi-th-large' tooltip='Shapes' fanOutDirection='up'>
+<ToolbarFanOutItem icon={<span aria-hidden='true'>◆</span>} tooltip='Shapes' fanOutDirection='up'>
     ...
 </ToolbarFanOutItem>
 
-<ToolbarFanOutItem icon='pi pi-th-large' tooltip='Shapes' fanOutDirection='down'>
+<ToolbarFanOutItem icon={<span aria-hidden='true'>◆</span>} tooltip='Shapes' fanOutDirection='down'>
     ...
 </ToolbarFanOutItem>
 ```
@@ -41,8 +41,8 @@ Like `ToolbarButton`, the `icon` prop accepts a `string | ReactNode`. Pass any R
 import { FaShapes } from 'react-icons/fa6';
 
 <ToolbarFanOutItem icon={<FaShapes />} tooltip='Shapes'>
-    <ToolbarButton icon='pi pi-stop' title='Rectangle' />
-    <ToolbarButton icon='pi pi-circle' title='Circle' />
+    <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Rectangle' />
+    <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Circle' />
 </ToolbarFanOutItem>
 ```
 
diff --git a/Documentation/Toolbar/folder.md b/Documentation/Toolbar/folder.md
index 107dd47c..e58618f8 100644
--- a/Documentation/Toolbar/folder.md
+++ b/Documentation/Toolbar/folder.md
@@ -6,12 +6,12 @@ The grid automatically balances rows and columns based on item count, keeping th
 
 ```tsx
 <Toolbar>
-    <ToolbarButton icon='pi pi-arrow-up-left' title='Select' />
-    <ToolbarFolder icon='pi pi-th-large' title='More tools'>
-        <ToolbarButton icon='pi pi-exclamation-circle' title='Info' />
-        <ToolbarButton icon='pi pi-eye' title='Preview' />
-        <ToolbarButton icon='pi pi-cog' title='Settings' />
-        <ToolbarButton icon='pi pi-external-link' title='Open' />
+    <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Select' />
+    <ToolbarFolder icon={<span aria-hidden='true'>◆</span>} title='More tools'>
+        <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Info' />
+        <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Preview' />
+        <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Settings' />
+        <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Open' />
     </ToolbarFolder>
 </Toolbar>
 ```
@@ -19,7 +19,7 @@ The grid automatically balances rows and columns based on item count, keeping th
 By default the folder opens to the right. Use `folderDirection='left'` when the toolbar is positioned on the right side of the screen:
 
 ```tsx
-<ToolbarFolder icon='pi pi-th-large' title='More tools' folderDirection='left'>
+<ToolbarFolder icon={<span aria-hidden='true'>◆</span>} title='More tools' folderDirection='left'>
     ...
 </ToolbarFolder>
 ```
@@ -36,7 +36,7 @@ The folder automatically computes the number of columns based on the item count:
 Use `maxColumns` to customize the maximum column count:
 
 ```tsx
-<ToolbarFolder icon='pi pi-th-large' title='More tools' maxColumns={4}>
+<ToolbarFolder icon={<span aria-hidden='true'>◆</span>} title='More tools' maxColumns={4}>
     ...
 </ToolbarFolder>
 ```
@@ -49,8 +49,8 @@ Like `ToolbarButton`, the `icon` prop accepts a `string | ReactNode`. Pass any R
 import { FaFolder } from 'react-icons/fa6';
 
 <ToolbarFolder icon={<FaFolder />} title='More tools'>
-    <ToolbarButton icon='pi pi-cog' title='Settings' />
-    <ToolbarButton icon='pi pi-external-link' title='Open' />
+    <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Settings' />
+    <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Open' />
 </ToolbarFolder>
 ```
 
@@ -61,11 +61,11 @@ See [Icon](../Common/icon.md) for the shared `Icon` type and `IconDisplay` compo
 Set `mode='list'` to change the folder's panel layout from a grid into a vertical list. In list mode, each button renders its icon and tooltip text side by side as a labeled row — no tooltip hover needed.
 
 ```tsx
-<ToolbarFolder icon='pi pi-list' title='Tools' mode='list'>
-    <ToolbarButton icon='pi pi-pencil' title='Draw freehand' />
-    <ToolbarButton icon='pi pi-stop' title='Rectangle' />
-    <ToolbarButton icon='pi pi-circle' title='Ellipse' />
-    <ToolbarButton icon='pi pi-minus' title='Straight line' />
+<ToolbarFolder icon={<span aria-hidden='true'>◆</span>} title='Tools' mode='list'>
+    <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Draw freehand' />
+    <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Rectangle' />
+    <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Ellipse' />
+    <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Straight line' />
 </ToolbarFolder>
 ```
 
diff --git a/Documentation/Toolbar/groups.md b/Documentation/Toolbar/groups.md
index b182acb9..8cd16076 100644
--- a/Documentation/Toolbar/groups.md
+++ b/Documentation/Toolbar/groups.md
@@ -5,17 +5,17 @@
 ```tsx
 <Toolbar>
     <ToolbarGroup>
-        <ToolbarButton icon='pi pi-arrow-up-left' title='Select' />
-        <ToolbarButton icon='pi pi-hand-paper' title='Pan' />
+        <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Select' />
+        <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Pan' />
     </ToolbarGroup>
     <ToolbarGroup>
-        <ToolbarButton icon='pi pi-pencil' title='Draw' />
-        <ToolbarButton icon='pi pi-stop' title='Rectangle' />
-        <ToolbarButton icon='pi pi-circle' title='Circle' />
+        <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Draw' />
+        <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Rectangle' />
+        <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Circle' />
     </ToolbarGroup>
     <ToolbarGroup>
-        <ToolbarButton icon='pi pi-undo' title='Undo' />
-        <ToolbarButton icon='pi pi-refresh' title='Redo' />
+        <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Undo' />
+        <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Redo' />
     </ToolbarGroup>
 </Toolbar>
 ```
@@ -26,8 +26,8 @@ Use the `orientation` prop to control how the group lays out its children. The d
 
 ```tsx
 <ToolbarGroup orientation='horizontal'>
-    <ToolbarButton icon='pi pi-minus' title='Zoom out' />
-    <ToolbarButton icon='pi pi-plus' title='Zoom in' />
+    <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Zoom out' />
+    <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Zoom in' />
 </ToolbarGroup>
 ```
 
@@ -45,13 +45,13 @@ A group can act as a **slot host**: other components anywhere in the React tree
 <ToolbarSlotProvider>
     <Toolbar>
         <ToolbarGroup slotName='canvas-tools'>
-            <ToolbarButton icon='pi pi-pencil' title='Draw' />
+            <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Draw' />
         </ToolbarGroup>
     </Toolbar>
 
     {/* anywhere else in the tree */}
     <ToolbarSlot slotName='canvas-tools' order={10}>
-        <ToolbarButton icon='pi pi-star' title='Favorite' />
+        <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Favorite' />
     </ToolbarSlot>
 </ToolbarSlotProvider>
 ```
diff --git a/Documentation/Toolbar/index.md b/Documentation/Toolbar/index.md
index 9f748885..8c4e220e 100644
--- a/Documentation/Toolbar/index.md
+++ b/Documentation/Toolbar/index.md
@@ -2,7 +2,7 @@
 
 The `Toolbar` component provides a canvas-style icon toolbar with support for orientations, active states, animated context switching, separators, fan-out sub-panels, and drag & drop onto surfaces.
 
-Pass React icon nodes or product-owned SVGs for a dependency-free toolbar. Legacy icon-font class strings remain accepted, but Components does not install PrimeIcons or any other icon font; string examples require the consumer to install the matching stylesheet separately.
+Pass React icon nodes or product-owned SVGs for a dependency-free toolbar. Consumer-owned icon-font class strings remain accepted, but Components does not install an icon font or infer provider base classes; the product must load the matching stylesheet and pass the complete class string.
 
 ## Components
 
diff --git a/Documentation/Toolbar/multiple-groups.md b/Documentation/Toolbar/multiple-groups.md
index 467c0c5f..23342f79 100644
--- a/Documentation/Toolbar/multiple-groups.md
+++ b/Documentation/Toolbar/multiple-groups.md
@@ -5,12 +5,12 @@ Render multiple `Toolbar` instances to create separate groups, matching the styl
 ```tsx
 <div className='flex flex-col gap-2'>
     <Toolbar>
-        <ToolbarButton icon='pi pi-arrow-up-left' title='Select' />
-        <ToolbarButton icon='pi pi-pencil' title='Draw' />
+        <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Select' />
+        <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Draw' />
     </Toolbar>
     <Toolbar>
-        <ToolbarButton icon='pi pi-undo' title='Undo' />
-        <ToolbarButton icon='pi pi-refresh' title='Redo' />
+        <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Undo' />
+        <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Redo' />
     </Toolbar>
 </div>
 ```
diff --git a/Documentation/Toolbar/orientation.md b/Documentation/Toolbar/orientation.md
index 2fecf4f0..4826afd6 100644
--- a/Documentation/Toolbar/orientation.md
+++ b/Documentation/Toolbar/orientation.md
@@ -4,7 +4,7 @@ The toolbar defaults to `vertical`. Pass `orientation='horizontal'` for a horizo
 
 ```tsx
 <Toolbar orientation='horizontal'>
-    <ToolbarButton icon='pi pi-undo' title='Undo' />
-    <ToolbarButton icon='pi pi-refresh' title='Redo' />
+    <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Undo' />
+    <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Redo' />
 </Toolbar>
 ```
diff --git a/Documentation/Toolbar/sections.md b/Documentation/Toolbar/sections.md
index 303f9e3d..c292ba2d 100644
--- a/Documentation/Toolbar/sections.md
+++ b/Documentation/Toolbar/sections.md
@@ -8,12 +8,12 @@ import { Toolbar, ToolbarButton, ToolbarSeparator } from '@cratis/components/Too
 function ZoomToolbar() {
     return (
         <Toolbar orientation='horizontal'>
-            <ToolbarButton icon='pi pi-th-large' title='Overview' tooltipPosition='bottom' />
+            <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Overview' tooltipPosition='bottom' />
             <ToolbarSeparator orientation='horizontal' />
-            <ToolbarButton icon='pi pi-minus' title='Zoom out' tooltipPosition='bottom' />
-            <ToolbarButton icon='pi pi-plus' title='Zoom in' tooltipPosition='bottom' />
+            <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Zoom out' tooltipPosition='bottom' />
+            <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Zoom in' tooltipPosition='bottom' />
             <ToolbarSeparator orientation='horizontal' />
-            <ToolbarButton icon='pi pi-question-circle' title='Help' tooltipPosition='bottom' />
+            <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Help' tooltipPosition='bottom' />
         </Toolbar>
     );
 }
@@ -27,8 +27,8 @@ In a vertical toolbar (the default) the separator is a horizontal rule:
 
 ```tsx
 <Toolbar>
-    <ToolbarButton icon='pi pi-pencil' title='Draw' />
+    <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Draw' />
     <ToolbarSeparator />
-    <ToolbarButton icon='pi pi-undo' title='Undo' />
+    <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Undo' />
 </Toolbar>
 ```
diff --git a/Documentation/Toolbar/slots.md b/Documentation/Toolbar/slots.md
index 3997bb44..05704215 100644
--- a/Documentation/Toolbar/slots.md
+++ b/Documentation/Toolbar/slots.md
@@ -13,13 +13,13 @@ export const MyCanvas = () => (
     <ToolbarSlotProvider>
         <Toolbar>
             <ToolbarGroup slotName='canvas-tools'>
-                <ToolbarButton icon='pi pi-pencil' title='Draw' />
+                <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Draw' />
             </ToolbarGroup>
         </Toolbar>
 
         {/* The feature injects its own button — no prop drilling */}
         <ToolbarSlot slotName='canvas-tools' order={10}>
-            <ToolbarButton icon='pi pi-star' title='Feature: Favorite' />
+            <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Feature: Favorite' />
         </ToolbarSlot>
 
         <MyFeatureComponent />
@@ -45,7 +45,7 @@ Renders nothing in the DOM — its only purpose is to register its `children` in
 
 ```tsx
 <ToolbarSlot slotName='my-slot' order={5}>
-    <ToolbarButton icon='pi pi-cog' title='Settings' />
+    <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Settings' />
 </ToolbarSlot>
 ```
 
@@ -69,12 +69,12 @@ Both `ToolbarGroup` and `ToolbarContext` can act as slot hosts via the `slotName
 <ToolbarSlotProvider>
     <Toolbar>
         <ToolbarGroup slotName='drawing'>
-            <ToolbarButton icon='pi pi-pencil' title='Draw' />
+            <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Draw' />
         </ToolbarGroup>
     </Toolbar>
 
     <ToolbarSlot slotName='drawing' order={20}>
-        <ToolbarButton icon='pi pi-minus' title='Line' />
+        <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Line' />
     </ToolbarSlot>
 </ToolbarSlotProvider>
 ```
@@ -88,13 +88,13 @@ Items injected into a `ToolbarContext` slot are only visible when that context i
     <Toolbar>
         <ToolbarSection activeContext={currentContext}>
             <ToolbarContext name='drawing' slotName='drawing-extras'>
-                <ToolbarButton icon='pi pi-pencil' title='Draw' />
+                <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Draw' />
             </ToolbarContext>
         </ToolbarSection>
     </Toolbar>
 
     <ToolbarSlot slotName='drawing-extras' order={5}>
-        <ToolbarButton icon='pi pi-star' title='Injected tool' />
+        <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Injected tool' />
     </ToolbarSlot>
 </ToolbarSlotProvider>
 ```
@@ -111,17 +111,17 @@ Any number of independent components can register into the same slot. They are r
 
     {/* order 5 — appears first */}
     <ToolbarSlot slotName='shared' order={5}>
-        <ToolbarButton icon='pi pi-heart' title='Likes' />
+        <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Likes' />
     </ToolbarSlot>
 
     {/* order 10 — appears second */}
     <ToolbarSlot slotName='shared' order={10}>
-        <ToolbarButton icon='pi pi-star' title='Favorites' />
+        <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Favorites' />
     </ToolbarSlot>
 
     {/* order 20 — appears last */}
     <ToolbarSlot slotName='shared' order={20}>
-        <ToolbarButton icon='pi pi-bell' title='Notifications' />
+        <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Notifications' />
     </ToolbarSlot>
 </ToolbarSlotProvider>
 ```
diff --git a/Documentation/Toolbar/toolbar-layout.md b/Documentation/Toolbar/toolbar-layout.md
index ff902dcf..100700c4 100644
--- a/Documentation/Toolbar/toolbar-layout.md
+++ b/Documentation/Toolbar/toolbar-layout.md
@@ -23,11 +23,11 @@ import { ToolbarSlotProvider, ToolbarSlot } from '@cratis/components/Toolbar';
 export const AppShell = () => (
     <ToolbarSlotProvider>
         <Toolbar>
-            <ToolbarButton icon='pi pi-arrow-up-left' title='Select' />
+            <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Select' />
             <ToolbarLayout name='canvas-tools'>
                 {/* Fallback — shown when no slot content is registered */}
                 <ToolbarGroup>
-                    <ToolbarButton icon='pi pi-pencil' title='Draw (default)' />
+                    <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Draw (default)' />
                 </ToolbarGroup>
             </ToolbarLayout>
         </Toolbar>
@@ -41,12 +41,12 @@ const CanvasFeature = () => {
     const content = useMemo(() => (
         <>
             <ToolbarGroup>
-                <ToolbarButton icon='pi pi-star' title='Favorite' />
-                <ToolbarButton icon='pi pi-heart' title='Like' />
+                <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Favorite' />
+                <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Like' />
             </ToolbarGroup>
             <ToolbarSeparator />
             <ToolbarGroup>
-                <ToolbarButton icon='pi pi-bolt' title='Quick action' />
+                <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Quick action' />
             </ToolbarGroup>
         </>
     ), []);
@@ -74,7 +74,7 @@ Multiple components can each register a `ToolbarSlot` with the same `slotName`.
 // Feature A — appears first
 <ToolbarSlot slotName='shared-tools' order={10}>
     <ToolbarGroup>
-        <ToolbarButton icon='pi pi-star' title='Feature A' />
+        <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Feature A' />
     </ToolbarGroup>
 </ToolbarSlot>
 
@@ -83,7 +83,7 @@ Multiple components can each register a `ToolbarSlot` with the same `slotName`.
     <>
         <ToolbarSeparator />
         <ToolbarGroup>
-            <ToolbarButton icon='pi pi-cog' title='Feature B' />
+            <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Feature B' />
         </ToolbarGroup>
     </>
 </ToolbarSlot>
diff --git a/Documentation/Toolbar/tooltip-position.md b/Documentation/Toolbar/tooltip-position.md
index 06851dcc..ed978e40 100644
--- a/Documentation/Toolbar/tooltip-position.md
+++ b/Documentation/Toolbar/tooltip-position.md
@@ -3,7 +3,7 @@
 Both `ToolbarButton` and `ToolbarFanOutItem` default to showing tooltips on the `right`. Use `tooltipPosition` to override:
 
 ```tsx
-<ToolbarButton icon='pi pi-cog' title='Settings' tooltipPosition='bottom' />
+<ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Settings' tooltipPosition='bottom' />
 ```
 
 Valid values are `'top'`, `'right'`, `'bottom'`, and `'left'`.
diff --git a/Documentation/migration.md b/Documentation/migration.md
index 785e4b77..ff9bbba6 100644
--- a/Documentation/migration.md
+++ b/Documentation/migration.md
@@ -85,14 +85,26 @@ export const ApplicationRoot = ({ children }: { children: React.ReactNode }) =>
 
 Remove `styledMode()`, `CratisPreset`, and `primeReactStyles` before upgrading. Components 4 removes three renderer-specific subpaths:
 
-| Removed subpath | Migration |
-| --- | --- |
-| `@cratis/components/styled` | Import Cratis tokens/styles and map product tokens directly as shown below. |
-| `@cratis/components/compatibility` | Replace Prime slot types/sentinel presets with each component's Cratis-owned `*Parts` type. The root `Compatibility` namespace is also removed. |
-| `@cratis/components/primereact-v10-palette` | Remove legacy Prime variable dependencies; define product tokens and map them to `--cratis-*`, or use the baseline theme. |
+| Removed subpath                             | Migration                                                                                                                                       |
+| ------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
+| `@cratis/components/styled`                 | Import Cratis tokens/styles and map product tokens directly as shown below.                                                                     |
+| `@cratis/components/compatibility`          | Replace Prime slot types/sentinel presets with each component's Cratis-owned `*Parts` type. The root `Compatibility` namespace is also removed. |
+| `@cratis/components/primereact-v10-palette` | Remove legacy Prime variable dependencies; define product tokens and map them to `--cratis-*`, or use the baseline theme.                       |
 
 There is no compatibility-package replacement in Components 4. Stay on Components 3 while renderer-specific types or selectors remain.
 
+### Removed symbol mapping
+
+| Removed Components 3 export | Components 4 action |
+| --- | --- |
+| `styledMode`, `StyledModeOptions`, `CratisPreset`, `primeReactStyles` | Remove the renderer configuration. Pass locale/messages to `CratisComponentsProvider`, import the Cratis stylesheet layers, and map product values directly to `--cratis-*`. |
+| `primeReactCssLayer`, `primeReactCssLayerOrder` | Delete unless the product still owns direct Prime CSS. Product cascade-layer ordering now belongs in product CSS. |
+| `cratisDarkModeSelector` | Use the product's own theme selector and assign the corresponding `--cratis-*` values under it. |
+| `assertPrimeReact11PassThroughCompatibility` | Delete after migrating every renderer slot to a typed Cratis `*Parts` surface. Package export verification replaces the old renderer-sentinel check. |
+| `components3PrimeReact11PassThroughContract`, `PrimeReact11PassThroughComponent` | Replace with the component-specific `DialogParts`, `DataTableParts`, `TablePaginatorParts`, `StepperParts`, `ToolbarParts`, and related public types. |
+| `primeReact11PassThroughSentinelAttribute`, `primeReact11PassThroughSentinelPreset` | Replace sentinel selectors with documented `data-cratis-part` and state attributes. |
+| `@cratis/components/primereact-v10-palette` variables | Map the product's canonical tokens directly to `--cratis-*`; do not preserve a product → Prime → Cratis bridge. |
+
 Before:
 
 ```tsx
@@ -213,6 +225,76 @@ For an existing nested Prime stepper preset, map the slots by rendered responsib
 
 The old `stepperpanel.header` wrapper has no one-to-one element. Put list-item layout on `step`, and interactive-header styling on `header`. Replace `data-p-active` selectors with `[data-cratis-part='step'][data-active='true']`.
 
+### Ada-style preset migration
+
+Ada is the representative migration for a product that previously supplied `styledMode({ preset: AdaPreset })`, Prime locale types, a PrimeUI license, and a legacy token bridge:
+
+1. Remove `styledMode`, `AdaPreset`, and the license from the **Components provider**. If Ada still renders Prime directly, keep its Prime provider, preset, dependencies, and license beside Components until those direct imports are removed.
+2. Replace `LocaleProps['locales']` with product-owned message input and map only Components labels into `CratisComponentsMessages`.
+3. Keep `--ada-*` as the canonical design tokens. Replace the `--p-*` and `--surface-*` bridge with direct `--cratis-*` assignments.
+4. Keep Ada's `data-theme` selector and map both light and dark values there; Components does not own Ada's theme lifecycle.
+
+```tsx
+import type { ReactNode } from 'react';
+import {
+    CratisComponentsProvider,
+    type CratisComponentsMessages,
+} from '@cratis/components/Common';
+
+interface AdaComponentsProviderProps {
+    children: ReactNode;
+    locale?: string;
+    messages?: CratisComponentsMessages;
+}
+
+export const AdaComponentsProvider = ({
+    children,
+    locale = 'en-US',
+    messages,
+}: AdaComponentsProviderProps) => (
+    <CratisComponentsProvider value={{ locale, messages }} toaster>
+        {children}
+    </CratisComponentsProvider>
+);
+```
+
+```css
+:root {
+    --cratis-primary-color: var(--ada-accent-700);
+    --cratis-primary-color-text: var(--ada-text-inverse);
+    --cratis-primary-400: var(--ada-accent-400);
+    --cratis-primary-500: var(--ada-accent-500);
+    --cratis-surface-ground: var(--ada-canvas);
+    --cratis-surface-card: var(--ada-surface);
+    --cratis-surface-section: var(--ada-subtle);
+    --cratis-surface-overlay: var(--ada-surface);
+    --cratis-surface-border: var(--ada-border-default);
+    --cratis-text-color: var(--ada-text-primary);
+    --cratis-text-color-secondary: var(--ada-text-secondary);
+    --cratis-highlight-bg: var(--ada-accent-50);
+    --cratis-focus-ring: var(--ada-ring-focus);
+}
+```
+
+This preserves Ada's token and theme ownership while removing the circular Ada → Prime preset → Prime variables → Cratis translation.
+
+### Studio Liquid Glass migration
+
+Studio is the representative deeply customized consumer. Keep `LiquidGlassSurface` and product shaders in Studio; replace renderer types and selectors at the Components boundary:
+
+- Type dialog maps as `DialogParts`: `mask` → `backdrop`, `headerTitle` → `title`, and `closeButton` → `close`.
+- Type stepper maps as `StepperParts`: `nav` → `list`, `panelContainer` → `panels`, `stepperpanel.root` → `step`, `action` → `header`, and `content` → `panel`.
+- `Toolbar`, `ToolbarButton`, and fan-out controls now expose `ToolbarParts`, `ToolbarButtonParts`, and `ToolbarFanOutParts`. Use `pt.root` and documented `data-cratis-part` values rather than treating fixed `.toolbar*` classes as the public contract. Studio may keep its measurement wrapper and glass sibling; the wrapper remains product architecture.
+- For integrated Canvas controls, pass Studio's surface through `controlsGlassSurface` and localized actions through `controlsLabels`. Set `disableControlsGlass` only when Studio intentionally wants the low-cost CSS fallback.
+- Preserve `data-cratis-part` and product-owned `LAYER_ATTR` attributes through part props so capture exclusion remains explicit.
+
+```tsx
+<Canvas
+    controlsGlassSurface={<LiquidGlassSurface /* Studio-owned shader props */ />}
+    controlsLabels={canvasControlLabels}
+/>
+```
+
 Paginator callbacks that formerly returned classes from renderer context must become static Cratis parts plus CSS state selectors:
 
 ```ts
@@ -263,6 +345,21 @@ Do not assume every Dropdown trigger has `role="combobox"`. Query it by its acce
 
 Multiple selection uses a native multiple-select when filtering is off and an accessible multi-value combobox when `filter` is enabled. Prefer a dedicated collection picker for a large or highly customized multi-select experience.
 
+## Update Tooltip triggers
+
+`Tooltip` now enhances the actual trigger so focus, hover, and `aria-describedby` stay on one element. Its `children` contract is one React element rather than an arbitrary node list. Wrap text, fragments, multiple siblings, or conditional content in one appropriate native control before passing it to `Tooltip`. `className` is merged onto that trigger instead of an extra wrapper.
+
+```tsx
+import { FaGear } from 'react-icons/fa6';
+import { Tooltip } from '@cratis/components/Common';
+
+<Tooltip content='Account settings'>
+    <button type='button' aria-label='Account settings'>
+        <FaGear aria-hidden='true' />
+    </button>
+</Tooltip>
+```
+
 ## Update tables
 
 `DataTableCore` now renders semantic HTML. Query-backed paging remains owned by Arc.
@@ -271,11 +368,34 @@ Multiple selection uses a native multiple-select when filtering is off and an ac
 - Complete-result filtering and sorting are not automatic table state. Model them in query arguments and implement them in the server query before paging.
 - `clientFiltering` remains temporarily accepted as a deprecated no-op so staged source migrations compile. Remove it: filtering is always scoped to the loaded page, and complete-result filtering belongs on the server before paging.
 - Legacy `{ operator, constraints }` filter entries remain accepted. `operator: 'or'` matches any constraint; all other values match every constraint.
-- `Column` remains the declarative column marker.
+- `Column` remains the declarative column marker. Its selection-column contract is explicitly single-row (`selectionMode='single'`); the old `'multiple'` type advertised checkbox behavior that the implementation never provided. Build multiple selection as an explicit product interaction rather than relying on that removed value.
 - Table styling uses `DataTableParts` and `data-cratis-part`.
 - Server totals remain authoritative for the paginator.
 
-Custom matchers registered with `registerDataTableFilterMatcher()` continue to work.
+Direct Prime `FilterMatchMode` values and `FilterService.register()` / `registerMatcher()` calls do **not** populate the Components registry. Replace both sides together:
+
+```ts
+import {
+    registerDataTableFilterMatcher,
+    type DataTableFilterMeta,
+} from '@cratis/components/DataTables';
+
+const roleMatcher = registerDataTableFilterMatcher(
+    'product.roleContains',
+    (value, filter) =>
+        String(value ?? '').toLocaleLowerCase().includes(
+            String(filter ?? '').toLocaleLowerCase(),
+        ),
+);
+
+const filters: DataTableFilterMeta = {
+    role: { value: 'admin', matchMode: roleMatcher.matchMode },
+};
+
+// Call roleMatcher.unregister() when the owning integration is permanently removed.
+```
+
+A retained arbitrary match-mode string keeps source compatibility but does not register behavior. Unknown modes deliberately match nothing rather than silently applying the wrong predicate.
 
 Separate `RadioButtonField` options bound to one property now require the same explicit `name` prop so native arrow-key radio-group navigation works. `RadioGroupField` and `RatingField` generate a shared internal name automatically.
 
@@ -316,7 +436,7 @@ Typical replacements:
 | `primereact/tag`, `badge`, `message` | `@cratis/components/Display`               |
 | `primereact/toast` / `toaster`       | `@cratis/components/Notifications`         |
 
-PrimeIcons class strings are still accepted where a component takes an icon node/string, but Components no longer installs PrimeIcons. Prefer a React icon component or product-owned SVG.
+Complete PrimeIcons class strings remain usable where a component accepts the public `Icon` type, but Components no longer installs the font or adds a missing provider base class. A consumer that intentionally retains PrimeIcons must load its stylesheet and pass the complete class string. Prefer a React icon component or product-owned SVG. `DataPage.MenuItem.icon` remains a React component type rather than the shared `Icon` union.
 
 ## Verify the migration
 
diff --git a/Source/CommandDialog/for_CommandDialog/when_a_renamed_field_is_nested_in_a_column.ts b/Source/CommandDialog/for_CommandDialog/when_a_renamed_field_is_nested_in_a_column.ts
index 2b750cba..2d1ce3ce 100644
--- a/Source/CommandDialog/for_CommandDialog/when_a_renamed_field_is_nested_in_a_column.ts
+++ b/Source/CommandDialog/for_CommandDialog/when_a_renamed_field_is_nested_in_a_column.ts
@@ -6,9 +6,7 @@ import { renderToStaticMarkup } from 'react-dom/server';
 import { vi } from 'vitest';
 import { CommandFormFieldDisplayName, markAsCommandFormField } from '../../CommandForm/commandFormMarkers';
 
-;
 
-;
 
 vi.mock('@cratis/arc.react/dialogs', () => ({
     DialogButtons: { Ok: 1, OkCancel: 2, YesNo: 3, YesNoCancel: 4 },
diff --git a/Source/CommandDialog/for_CommandDialog/when_field_carries_only_the_legacy_display_name.ts b/Source/CommandDialog/for_CommandDialog/when_field_carries_only_the_legacy_display_name.ts
index 33a11620..c891c072 100644
--- a/Source/CommandDialog/for_CommandDialog/when_field_carries_only_the_legacy_display_name.ts
+++ b/Source/CommandDialog/for_CommandDialog/when_field_carries_only_the_legacy_display_name.ts
@@ -6,9 +6,7 @@ import { renderToStaticMarkup } from 'react-dom/server';
 import { vi } from 'vitest';
 import { CommandFormFieldDisplayName } from '../../CommandForm/commandFormMarkers';
 
-;
 
-;
 
 vi.mock('@cratis/arc.react/dialogs', () => ({
     DialogButtons: { Ok: 1, OkCancel: 2, YesNo: 3, YesNoCancel: 4 },
diff --git a/Source/CommandDialog/for_CommandDialog/when_field_display_name_is_overwritten.ts b/Source/CommandDialog/for_CommandDialog/when_field_display_name_is_overwritten.ts
index 0adca32d..1a18ebb0 100644
--- a/Source/CommandDialog/for_CommandDialog/when_field_display_name_is_overwritten.ts
+++ b/Source/CommandDialog/for_CommandDialog/when_field_display_name_is_overwritten.ts
@@ -6,9 +6,7 @@ import { renderToStaticMarkup } from 'react-dom/server';
 import { vi } from 'vitest';
 import { CommandFormFieldDisplayName, markAsCommandFormField } from '../../CommandForm/commandFormMarkers';
 
-;
 
-;
 
 vi.mock('@cratis/arc.react/dialogs', () => ({
     DialogButtons: { Ok: 1, OkCancel: 2, YesNo: 3, YesNoCancel: 4 },
diff --git a/Source/CommandDialog/for_CommandDialog/when_given_initial_valid_values.ts b/Source/CommandDialog/for_CommandDialog/when_given_initial_valid_values.ts
index 5bba1fa4..6ab78915 100644
--- a/Source/CommandDialog/for_CommandDialog/when_given_initial_valid_values.ts
+++ b/Source/CommandDialog/for_CommandDialog/when_given_initial_valid_values.ts
@@ -6,9 +6,7 @@ import { renderToStaticMarkup } from 'react-dom/server';
 import { vi } from 'vitest';
 import { CommandDialog } from '../CommandDialog';
 
-;
 
-;
 
 vi.mock('@cratis/arc.react/dialogs', () => ({
     DialogButtons: { Ok: 1, OkCancel: 2, YesNo: 3, YesNoCancel: 4 },
diff --git a/Source/CommandDialog/for_CommandDialog/when_inspecting_the_column_wrapper.ts b/Source/CommandDialog/for_CommandDialog/when_inspecting_the_column_wrapper.ts
index 56fac9f9..b5910e3c 100644
--- a/Source/CommandDialog/for_CommandDialog/when_inspecting_the_column_wrapper.ts
+++ b/Source/CommandDialog/for_CommandDialog/when_inspecting_the_column_wrapper.ts
@@ -5,9 +5,7 @@ import React from 'react';
 import { vi } from 'vitest';
 import { CommandFormColumnDisplayName, isCommandFormColumn } from '../../CommandForm/commandFormMarkers';
 
-;
 
-;
 
 vi.mock('@cratis/arc.react/dialogs', () => ({
     DialogButtons: { Ok: 1, OkCancel: 2, YesNo: 3, YesNoCancel: 4 },
diff --git a/Source/CommandDialog/for_CommandDialog/when_not_executing.ts b/Source/CommandDialog/for_CommandDialog/when_not_executing.ts
index 02331757..48e95045 100644
--- a/Source/CommandDialog/for_CommandDialog/when_not_executing.ts
+++ b/Source/CommandDialog/for_CommandDialog/when_not_executing.ts
@@ -6,9 +6,7 @@ import { renderToStaticMarkup } from 'react-dom/server';
 import { vi } from 'vitest';
 import { CommandDialog } from '../CommandDialog';
 
-;
 
-;
 
 vi.mock('@cratis/arc.react/dialogs', () => ({
     DialogButtons: { Ok: 1, OkCancel: 2, YesNo: 3, YesNoCancel: 4 },
diff --git a/Source/CommandDialog/for_CommandDialog/when_validity_is_gated.ts b/Source/CommandDialog/for_CommandDialog/when_validity_is_gated.ts
index 132a1da1..e30c6932 100644
--- a/Source/CommandDialog/for_CommandDialog/when_validity_is_gated.ts
+++ b/Source/CommandDialog/for_CommandDialog/when_validity_is_gated.ts
@@ -16,9 +16,7 @@ const { commandFormValidity, executeCommand, setCommandValues } = vi.hoisted(()
     setCommandValues: vi.fn(),
 }));
 
-;
 
-;
 
 vi.mock('@cratis/arc.react/dialogs', () => ({
     DialogButtons: { Ok: 1, OkCancel: 2, YesNo: 3, YesNoCancel: 4 },
@@ -72,8 +70,6 @@ describe('when CommandDialog validity is gated', () => {
             }),
         );
 
-    // The PrimeReact 11 Button renders its content as children, so the Ok button's
-    // markup is `<button ...><i .../><span>Ok</span></button>` — find it by its label span.
     const getOkButton = (html: string) =>
         (html.match(/<button[\s\S]*?<\/button>/g) ?? []).find((button) =>
             button.includes('>Ok<'),
diff --git a/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_a_bare_string_sits_between_steps.ts b/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_a_bare_string_sits_between_steps.ts
index fe1dc82e..376c9c4e 100644
--- a/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_a_bare_string_sits_between_steps.ts
+++ b/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_a_bare_string_sits_between_steps.ts
@@ -9,15 +9,8 @@ import { StepperPanel } from '../../StepperPanel';
 
 const { buttonClicks } = vi.hoisted(() => ({ buttonClicks: new Map<string, () => void>() }));
 
-// PrimeReact 11's Stepper is compositional: each part renders its children, so every step
-// the wizard renders shows up as one `data-part="panel"` element, and the Number part
-// forwards the inline `style` carrying the per-step indicator color.
-;
 
 
-// PrimeReact 11's Button takes its label as children, not a `label` prop, so the label a
-// button is recorded under is the text its children carry (the icon contributes none).
-// Only an enabled button is clickable, so only an enabled button is recorded.
 vi.mock('../../../Common/Button', () => {
     const labelOf = (children: React.ReactNode): string => {
         let label = '';
diff --git a/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_it_is_in_the_middle.ts b/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_it_is_in_the_middle.ts
index 1896b149..e39f9e7c 100644
--- a/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_it_is_in_the_middle.ts
+++ b/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_it_is_in_the_middle.ts
@@ -11,14 +11,6 @@ const { buttonClicks } = vi.hoisted(() => ({
     buttonClicks: new Map<string, () => void>(),
 }));
 
-// PrimeReact 11's Stepper is compositional: each part renders its children, so every step
-// the wizard renders shows up as one `data-part="panel"` element, and the Number part
-// forwards the inline `style` carrying the per-step indicator color.
-;
-
-// PrimeReact 11's Button takes its label as children, not a `label` prop, so the label a
-// button is recorded under is the text its children carry (the icon contributes none).
-// Only an enabled button is clickable, so only an enabled button is recorded.
 vi.mock('../../../Common/Button', () => {
     const labelOf = (children: React.ReactNode): string => {
         let label = '';
@@ -79,8 +71,9 @@ NameField.displayName = 'CommandFormField';
 // The step number and its title are siblings inside the step header, so the number
 // belonging to a named step is the one immediately preceding that step's title.
 const stepStateOf = (html: string, header: string) =>
-    (html.match(/<li[^>]*data-cratis-part="step"[^>]*>[\s\S]*?<\/li>/g) ?? [])
-        .find((step) => step.includes(`>${header}</span>`)) ?? '';
+    (html.match(/<li[^>]*data-cratis-part="step"[^>]*>[\s\S]*?<\/li>/g) ?? []).find(
+        (step) => step.includes(`>${header}</span>`),
+    ) ?? '';
 
 // Exactly how a conditional step is written in an application: `{condition && <StepperPanel/>}`.
 const showOptionalStep: boolean = false;
diff --git a/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_it_is_null.ts b/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_it_is_null.ts
index 3ca203a4..ef0191b3 100644
--- a/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_it_is_null.ts
+++ b/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_it_is_null.ts
@@ -9,15 +9,8 @@ import { StepperPanel } from '../../StepperPanel';
 
 const { buttonClicks } = vi.hoisted(() => ({ buttonClicks: new Map<string, () => void>() }));
 
-// PrimeReact 11's Stepper is compositional: each part renders its children, so every step
-// the wizard renders shows up as one `data-part="panel"` element, and the Number part
-// forwards the inline `style` carrying the per-step indicator color.
-;
 
 
-// PrimeReact 11's Button takes its label as children, not a `label` prop, so the label a
-// button is recorded under is the text its children carry (the icon contributes none).
-// Only an enabled button is clickable, so only an enabled button is recorded.
 vi.mock('../../../Common/Button', () => {
     const labelOf = (children: React.ReactNode): string => {
         let label = '';
diff --git a/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_it_is_undefined.ts b/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_it_is_undefined.ts
index 5228687b..5766f792 100644
--- a/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_it_is_undefined.ts
+++ b/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_it_is_undefined.ts
@@ -9,15 +9,8 @@ import { StepperPanel } from '../../StepperPanel';
 
 const { buttonClicks } = vi.hoisted(() => ({ buttonClicks: new Map<string, () => void>() }));
 
-// PrimeReact 11's Stepper is compositional: each part renders its children, so every step
-// the wizard renders shows up as one `data-part="panel"` element, and the Number part
-// forwards the inline `style` carrying the per-step indicator color.
-;
 
 
-// PrimeReact 11's Button takes its label as children, not a `label` prop, so the label a
-// button is recorded under is the text its children carry (the icon contributes none).
-// Only an enabled button is clickable, so only an enabled button is recorded.
 vi.mock('../../../Common/Button', () => {
     const labelOf = (children: React.ReactNode): string => {
         let label = '';
diff --git a/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_the_first_step_is_hidden.ts b/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_the_first_step_is_hidden.ts
index e184b158..5788079f 100644
--- a/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_the_first_step_is_hidden.ts
+++ b/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_the_first_step_is_hidden.ts
@@ -9,15 +9,8 @@ import { StepperPanel } from '../../StepperPanel';
 
 const { buttonClicks } = vi.hoisted(() => ({ buttonClicks: new Map<string, () => void>() }));
 
-// PrimeReact 11's Stepper is compositional: each part renders its children, so every step
-// the wizard renders shows up as one `data-part="panel"` element, and the Number part
-// forwards the inline `style` carrying the per-step indicator color.
-;
 
 
-// PrimeReact 11's Button takes its label as children, not a `label` prop, so the label a
-// button is recorded under is the text its children carry (the icon contributes none).
-// Only an enabled button is clickable, so only an enabled button is recorded.
 vi.mock('../../../Common/Button', () => {
     const labelOf = (children: React.ReactNode): string => {
         let label = '';
diff --git a/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_the_last_step_is_false.ts b/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_the_last_step_is_false.ts
index cd744ce3..16af1177 100644
--- a/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_the_last_step_is_false.ts
+++ b/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_the_last_step_is_false.ts
@@ -9,15 +9,8 @@ import { StepperPanel } from '../../StepperPanel';
 
 const { buttonClicks } = vi.hoisted(() => ({ buttonClicks: new Map<string, () => void>() }));
 
-// PrimeReact 11's Stepper is compositional: each part renders its children, so every step
-// the wizard renders shows up as one `data-part="panel"` element, and the Number part
-// forwards the inline `style` carrying the per-step indicator color.
-;
 
 
-// PrimeReact 11's Button takes its label as children, not a `label` prop, so the label a
-// button is recorded under is the text its children carry (the icon contributes none).
-// Only an enabled button is clickable, so only an enabled button is recorded.
 vi.mock('../../../Common/Button', () => {
     const labelOf = (children: React.ReactNode): string => {
         let label = '';
diff --git a/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_the_steps_come_from_a_map.ts b/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_the_steps_come_from_a_map.ts
index 1fe3ae91..4471296a 100644
--- a/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_the_steps_come_from_a_map.ts
+++ b/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_the_steps_come_from_a_map.ts
@@ -9,15 +9,8 @@ import { StepperPanel } from '../../StepperPanel';
 
 const { buttonClicks } = vi.hoisted(() => ({ buttonClicks: new Map<string, () => void>() }));
 
-// PrimeReact 11's Stepper is compositional: each part renders its children, so every step
-// the wizard renders shows up as one `data-part="panel"` element, and the Number part
-// forwards the inline `style` carrying the per-step indicator color.
-;
 
 
-// PrimeReact 11's Button takes its label as children, not a `label` prop, so the label a
-// button is recorded under is the text its children carry (the icon contributes none).
-// Only an enabled button is clickable, so only an enabled button is recorded.
 vi.mock('../../../Common/Button', () => {
     const labelOf = (children: React.ReactNode): string => {
         let label = '';
diff --git a/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_two_are_hidden.ts b/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_two_are_hidden.ts
index c7b4a666..db8ad612 100644
--- a/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_two_are_hidden.ts
+++ b/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_two_are_hidden.ts
@@ -9,15 +9,8 @@ import { StepperPanel } from '../../StepperPanel';
 
 const { buttonClicks } = vi.hoisted(() => ({ buttonClicks: new Map<string, () => void>() }));
 
-// PrimeReact 11's Stepper is compositional: each part renders its children, so every step
-// the wizard renders shows up as one `data-part="panel"` element, and the Number part
-// forwards the inline `style` carrying the per-step indicator color.
-;
 
 
-// PrimeReact 11's Button takes its label as children, not a `label` prop, so the label a
-// button is recorded under is the text its children carry (the icon contributes none).
-// Only an enabled button is clickable, so only an enabled button is recorded.
 vi.mock('../../../Common/Button', () => {
     const labelOf = (children: React.ReactNode): string => {
         let label = '';
diff --git a/Source/CommandDialog/for_CommandStepper/when_every_step_is_hidden.ts b/Source/CommandDialog/for_CommandStepper/when_every_step_is_hidden.ts
index d43b4804..8a598e7b 100644
--- a/Source/CommandDialog/for_CommandStepper/when_every_step_is_hidden.ts
+++ b/Source/CommandDialog/for_CommandStepper/when_every_step_is_hidden.ts
@@ -6,13 +6,8 @@ import { renderToStaticMarkup } from 'react-dom/server';
 import { vi } from 'vitest';
 import { CommandStepperContent } from '../CommandStepper';
 
-// PrimeReact 11's Stepper is compositional: each part renders its children, so every step
-// the wizard renders shows up as one `data-part="panel"` element, and the Number part
-// forwards the inline `style` carrying the per-step indicator color.
-;
 
 
-// PrimeReact 11's Button takes its label as children, not a `label` prop.
 vi.mock('../../Common/Button', () => ({
     Button: (props: { children?: React.ReactNode; disabled?: boolean }) =>
         React.createElement('button', { disabled: props.disabled }, props.children),
diff --git a/Source/CommandDialog/for_CommandStepper/when_the_active_step_is_past_the_last_rendered_step.ts b/Source/CommandDialog/for_CommandStepper/when_the_active_step_is_past_the_last_rendered_step.ts
index c2881218..19599f1c 100644
--- a/Source/CommandDialog/for_CommandStepper/when_the_active_step_is_past_the_last_rendered_step.ts
+++ b/Source/CommandDialog/for_CommandStepper/when_the_active_step_is_past_the_last_rendered_step.ts
@@ -7,13 +7,7 @@ import { vi } from 'vitest';
 import { CommandStepperContent } from '../CommandStepper';
 import { StepperPanel } from '../StepperPanel';
 
-// PrimeReact 11's Stepper is compositional: each part renders its children, so every step
-// the wizard renders shows up as one `data-part="panel"` element. The step the wizard is on
-// is no longer an `activeStep` prop — the Root is driven by `value`, the step's index as a
-// string — so the Root part surfaces that value for the spec to read.
-;
 
-// PrimeReact 11's Button takes its label as children, not a `label` prop.
 vi.mock('../../Common/Button', () => ({
     Button: (props: { children?: React.ReactNode; disabled?: boolean }) =>
         React.createElement('button', { disabled: props.disabled }, props.children),
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_a_step_disappears_after_it_was_passed.ts b/Source/CommandDialog/for_StepperCommandDialog/when_a_step_disappears_after_it_was_passed.ts
index ef4b24b8..1b3de715 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_a_step_disappears_after_it_was_passed.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_a_step_disappears_after_it_was_passed.ts
@@ -23,14 +23,8 @@ vi.mock('../../Dialogs/Dialog', () => ({
         React.createElement('div', { 'data-testid': 'dialog' }, props.buttons, props.children),
 }));
 
-// PrimeReact 11's Stepper is compositional: each part renders its children, and the step the
-// wizard is on is no longer an `activeStep` prop — the Root is driven by `value`, the step's
-// index as a string — so the Root part surfaces that value for the given helpers to read.
-;
 
 
-// PrimeReact 11's Button takes its label as children, not a `label` prop — the button's
-// text content is what the given helpers read a button's label from.
 vi.mock('../../Common/Button', () => ({
     Button: (props: { children?: React.ReactNode; disabled?: boolean; onClick?: () => void }) =>
         React.createElement('button', { disabled: props.disabled, onClick: props.onClick }, props.children),
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_a_bare_string_sits_between_steps.ts b/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_a_bare_string_sits_between_steps.ts
index 45f6aee2..d054cbcc 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_a_bare_string_sits_between_steps.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_a_bare_string_sits_between_steps.ts
@@ -12,12 +12,8 @@ vi.mock('../../../Dialogs/Dialog', () => ({
         React.createElement('div', { 'data-testid': 'dialog' }, props.buttons, props.children),
 }));
 
-// PrimeReact 11's Stepper is compositional: each part renders its children, so the
-// steps the wizard actually renders show up as one `data-part="panel"` element each.
-;
 
 
-// PrimeReact 11's Button takes its label as children, not a `label` prop.
 vi.mock('../../../Common/Button', () => ({
     Button: (props: { children?: React.ReactNode; disabled?: boolean }) =>
         React.createElement('button', { disabled: props.disabled }, props.children),
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_it_is_in_the_middle.ts b/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_it_is_in_the_middle.ts
index 008ac337..1003845d 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_it_is_in_the_middle.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_it_is_in_the_middle.ts
@@ -17,12 +17,6 @@ vi.mock('../../../Dialogs/Dialog', () => ({
         ),
 }));
 
-// PrimeReact 11's Stepper is compositional: each part renders its children, and the
-// Number part forwards the inline `style` the wrapper computes for each step — which
-// is where the red / green indicator now lives (v10 read it off pt.stepperpanel.number).
-;
-
-// PrimeReact 11's Button takes its label as children, not a `label` prop.
 vi.mock('../../../Common/Button', () => ({
     Button: (props: { children?: React.ReactNode; disabled?: boolean }) =>
         React.createElement('button', { disabled: props.disabled }, props.children),
@@ -61,8 +55,9 @@ const NameField = (props: { value?: (command: TestCommand) => unknown }) => {
 NameField.displayName = 'CommandFormField';
 
 const stepStateOf = (html: string, header: string) =>
-    (html.match(/<li[^>]*data-cratis-part="step"[^>]*>[\s\S]*?<\/li>/g) ?? [])
-        .find((step) => step.includes(`>${header}</span>`)) ?? '';
+    (html.match(/<li[^>]*data-cratis-part="step"[^>]*>[\s\S]*?<\/li>/g) ?? []).find(
+        (step) => step.includes(`>${header}</span>`),
+    ) ?? '';
 
 // Exactly how a conditional step is written in an application: `{condition && <StepperPanel/>}`.
 const showOptionalStep: boolean = false;
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_it_is_null.ts b/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_it_is_null.ts
index bdfe4803..b1ecfa2f 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_it_is_null.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_it_is_null.ts
@@ -12,12 +12,8 @@ vi.mock('../../../Dialogs/Dialog', () => ({
         React.createElement('div', { 'data-testid': 'dialog' }, props.buttons, props.children),
 }));
 
-// PrimeReact 11's Stepper is compositional: each part renders its children, so the
-// steps the wizard actually renders show up as one `data-part="panel"` element each.
-;
 
 
-// PrimeReact 11's Button takes its label as children, not a `label` prop.
 vi.mock('../../../Common/Button', () => ({
     Button: (props: { children?: React.ReactNode; disabled?: boolean }) =>
         React.createElement('button', { disabled: props.disabled }, props.children),
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_it_is_undefined.ts b/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_it_is_undefined.ts
index 04fadef7..d5183a0e 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_it_is_undefined.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_it_is_undefined.ts
@@ -12,12 +12,8 @@ vi.mock('../../../Dialogs/Dialog', () => ({
         React.createElement('div', { 'data-testid': 'dialog' }, props.buttons, props.children),
 }));
 
-// PrimeReact 11's Stepper is compositional: each part renders its children, so the
-// steps the wizard actually renders show up as one `data-part="panel"` element each.
-;
 
 
-// PrimeReact 11's Button takes its label as children, not a `label` prop.
 vi.mock('../../../Common/Button', () => ({
     Button: (props: { children?: React.ReactNode; disabled?: boolean }) =>
         React.createElement('button', { disabled: props.disabled }, props.children),
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_the_first_step_is_hidden.ts b/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_the_first_step_is_hidden.ts
index a45876a3..f3eba118 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_the_first_step_is_hidden.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_the_first_step_is_hidden.ts
@@ -12,12 +12,8 @@ vi.mock('../../../Dialogs/Dialog', () => ({
         React.createElement('div', { 'data-testid': 'dialog' }, props.buttons, props.children),
 }));
 
-// PrimeReact 11's Stepper is compositional: each part renders its children, so the
-// steps the wizard actually renders show up as one `data-part="panel"` element each.
-;
 
 
-// PrimeReact 11's Button takes its label as children, not a `label` prop.
 vi.mock('../../../Common/Button', () => ({
     Button: (props: { children?: React.ReactNode; disabled?: boolean }) =>
         React.createElement('button', { disabled: props.disabled }, props.children),
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_the_last_step_is_false.ts b/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_the_last_step_is_false.ts
index b5824281..e8428c07 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_the_last_step_is_false.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_the_last_step_is_false.ts
@@ -12,12 +12,8 @@ vi.mock('../../../Dialogs/Dialog', () => ({
         React.createElement('div', { 'data-testid': 'dialog' }, props.buttons, props.children),
 }));
 
-// PrimeReact 11's Stepper is compositional: each part renders its children, so the
-// steps the wizard actually renders show up as one `data-part="panel"` element each.
-;
 
 
-// PrimeReact 11's Button takes its label as children, not a `label` prop.
 vi.mock('../../../Common/Button', () => ({
     Button: (props: { children?: React.ReactNode; disabled?: boolean }) =>
         React.createElement('button', { disabled: props.disabled }, props.children),
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_the_steps_come_from_a_map.ts b/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_the_steps_come_from_a_map.ts
index bc96f23c..2fa7c3e2 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_the_steps_come_from_a_map.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_the_steps_come_from_a_map.ts
@@ -12,12 +12,8 @@ vi.mock('../../../Dialogs/Dialog', () => ({
         React.createElement('div', { 'data-testid': 'dialog' }, props.buttons, props.children),
 }));
 
-// PrimeReact 11's Stepper is compositional: each part renders its children, so the
-// steps the wizard actually renders show up as one `data-part="panel"` element each.
-;
 
 
-// PrimeReact 11's Button takes its label as children, not a `label` prop.
 vi.mock('../../../Common/Button', () => ({
     Button: (props: { children?: React.ReactNode; disabled?: boolean }) =>
         React.createElement('button', { disabled: props.disabled }, props.children),
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_two_are_hidden.ts b/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_two_are_hidden.ts
index 2dfa3cb8..82521e0b 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_two_are_hidden.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_a_step_is_conditionally_hidden/and_two_are_hidden.ts
@@ -12,12 +12,8 @@ vi.mock('../../../Dialogs/Dialog', () => ({
         React.createElement('div', { 'data-testid': 'dialog' }, props.buttons, props.children),
 }));
 
-// PrimeReact 11's Stepper is compositional: each part renders its children, so the
-// steps the wizard actually renders show up as one `data-part="panel"` element each.
-;
 
 
-// PrimeReact 11's Button takes its label as children, not a `label` prop.
 vi.mock('../../../Common/Button', () => ({
     Button: (props: { children?: React.ReactNode; disabled?: boolean }) =>
         React.createElement('button', { disabled: props.disabled }, props.children),
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_dismissing_while_the_command_runs/and_escape_is_pressed.ts b/Source/CommandDialog/for_StepperCommandDialog/when_dismissing_while_the_command_runs/and_escape_is_pressed.ts
index f141fcbc..a4897ee0 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_dismissing_while_the_command_runs/and_escape_is_pressed.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_dismissing_while_the_command_runs/and_escape_is_pressed.ts
@@ -29,10 +29,6 @@ const { execution } = vi.hoisted(() => {
 
 const { closeDialog } = vi.hoisted(() => ({ closeDialog: vi.fn() }));
 
-// The Cratis Dialog is what the wizard now dismisses through, and `dismissable` is the single
-// switch it exposes: in PrimeReact 11 it governs the header close, the backdrop and Escape alike,
-// and a dismissal arrives on the same `onCancel` arm the footer uses. The mock reproduces that
-// gate so Escape is exercised as a dismissal rather than read back as a prop value.
 vi.mock('../../../Dialogs/Dialog', () => ({
     Dialog: (props: {
         dismissable?: boolean;
@@ -62,10 +58,7 @@ vi.mock('../../../Dialogs/Dialog', () => ({
     },
 }));
 
-// PrimeReact 11's Stepper is compositional: each part renders its children.
-;
 
-// PrimeReact 11's Button takes its label as children, not a `label` prop.
 vi.mock('../../../Common/Button', () => ({
     Button: (props: { children?: React.ReactNode; disabled?: boolean; onClick?: () => void }) =>
         React.createElement('button', { disabled: props.disabled, onClick: props.onClick }, props.children),
@@ -116,6 +109,7 @@ const onCancel = vi.fn(() => true);
 const aWizard = () => React.createElement(
     StepperCommandDialog<TestCommand>,
     {
+        // SAFETY: The test command implements the runtime command constructor contract.
         command: TestCommand as unknown as new () => object,
         visible: true,
         title: 'Test Dialog',
@@ -123,10 +117,8 @@ const aWizard = () => React.createElement(
     },
     React.createElement(StepperPanel, { header: 'Only Step' }, 'Only Step content'));
 
-// Escape is the dismissal with no control to disable - the dialog can only refuse it by telling
-// PrimeReact not to listen while the command runs. Pressing it in both states is what separates
-// "refused for now" from "never listened at all": the second press, after the command has returned,
-// has to be honored, or the silence during the run says nothing about the guard.
+// Escape has no visible control to disable. Pressing it in both states separates "refused while
+// busy" from "never listened at all": the second press, after the command returns, must be honored.
 describe('when escape is pressed on a wizard whose command has not returned', () => {
     let dialog: StepperDialogInTheDom;
     let cancelCallsWhileRunning: number;
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_dismissing_while_the_command_runs/and_the_header_close_is_used.ts b/Source/CommandDialog/for_StepperCommandDialog/when_dismissing_while_the_command_runs/and_the_header_close_is_used.ts
index d870f99b..ee211534 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_dismissing_while_the_command_runs/and_the_header_close_is_used.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_dismissing_while_the_command_runs/and_the_header_close_is_used.ts
@@ -29,11 +29,6 @@ const { execution } = vi.hoisted(() => {
 
 const { closeDialog } = vi.hoisted(() => ({ closeDialog: vi.fn() }));
 
-// The Cratis Dialog renders the header close control only while `dismissable` — the single switch
-// governing the header close, the backdrop and Escape in PrimeReact 11 — and routes it through the
-// same `onCancel` arm the footer uses. The mock renders that control on the same condition instead
-// of handing the prop back, so the spec presses the X the operator would press rather than reading
-// what the dialog asked for.
 vi.mock('../../../Dialogs/Dialog', () => ({
     Dialog: (props: {
         dismissable?: boolean;
@@ -48,10 +43,7 @@ vi.mock('../../../Dialogs/Dialog', () => ({
         props.children),
 }));
 
-// PrimeReact 11's Stepper is compositional: each part renders its children.
-;
 
-// PrimeReact 11's Button takes its label as children, not a `label` prop.
 vi.mock('../../../Common/Button', () => ({
     Button: (props: { children?: React.ReactNode; disabled?: boolean; onClick?: () => void }) =>
         React.createElement('button', { disabled: props.disabled, onClick: props.onClick }, props.children),
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_every_step_is_hidden.ts b/Source/CommandDialog/for_StepperCommandDialog/when_every_step_is_hidden.ts
index 9db96677..a64cc996 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_every_step_is_hidden.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_every_step_is_hidden.ts
@@ -22,14 +22,8 @@ vi.mock('../../Dialogs/Dialog', () => ({
         React.createElement('div', { 'data-testid': 'dialog' }, props.buttons, props.children),
 }));
 
-// PrimeReact 11's Stepper is compositional: each part renders its children, and the step the
-// wizard is on is no longer an `activeStep` prop — the Root is driven by `value`, the step's
-// index as a string — so the Root part surfaces that value for the given helpers to read.
-;
 
 
-// PrimeReact 11's Button takes its label as children, not a `label` prop — the button's
-// text content is what the given helpers read a button's label from.
 vi.mock('../../Common/Button', () => ({
     Button: (props: { children?: React.ReactNode; disabled?: boolean; onClick?: () => void }) =>
         React.createElement('button', { disabled: props.disabled, onClick: props.onClick }, props.children),
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_form_is_invalid.ts b/Source/CommandDialog/for_StepperCommandDialog/when_form_is_invalid.ts
index b24fb6b3..99ae3fbf 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_form_is_invalid.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_form_is_invalid.ts
@@ -15,7 +15,6 @@ vi.mock('../../Dialogs/Dialog', () => ({
         React.createElement('div', null, props.buttons, props.children),
 }));
 
-;
 
 // The submit button is the only one carrying autoFocus — auto-activate it (when
 // enabled) so the spec can assert whether the command executes.
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_not_executing.ts b/Source/CommandDialog/for_StepperCommandDialog/when_not_executing.ts
index 676cf9f3..909475c7 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_not_executing.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_not_executing.ts
@@ -7,18 +7,12 @@ import { vi } from 'vitest';
 import { StepperCommandDialog } from '../StepperCommandDialog';
 import { StepperPanel } from '../StepperPanel';
 
-// StepperCommandDialog now composes the Cratis Dialog wrapper (not primereact/dialog
-// directly) — render its custom footer (`buttons`) and body.
+// Render the Cratis Dialog wrapper's custom footer and body.
 vi.mock('../../Dialogs/Dialog', () => ({
     Dialog: (props: { buttons?: React.ReactNode; children?: React.ReactNode }) =>
         React.createElement('div', { 'data-testid': 'dialog' }, props.buttons, props.children),
 }));
 
-// PrimeReact 11's Stepper is a set of compositional parts — each just renders its
-// children so the footer/navigation behavior can be asserted.
-;
-
-// PrimeReact 11's Button renders its content as children (no label/loading props).
 vi.mock('../../Common/Button', () => ({
     Button: (props: { children?: React.ReactNode; disabled?: boolean }) =>
         React.createElement('button', { disabled: props.disabled }, props.children),
@@ -56,7 +50,8 @@ describe('when StepperCommandDialog is in its initial state', () => {
         const element = React.createElement(
             StepperCommandDialog<TestCommand>,
             {
-                command: TestCommand as unknown as new () => object,
+                // SAFETY: The test command implements the runtime command constructor contract.
+        command: TestCommand as unknown as new () => object,
                 visible: true,
                 title: 'Test Stepper Dialog',
             },
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_an_async_transform_has_not_settled.ts b/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_an_async_transform_has_not_settled.ts
index 8735be6b..cc9e48f1 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_an_async_transform_has_not_settled.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_an_async_transform_has_not_settled.ts
@@ -30,14 +30,8 @@ vi.mock('../../../Dialogs/Dialog', () => ({
         React.createElement('div', { 'data-testid': 'dialog' }, props.buttons, props.children),
 }));
 
-// PrimeReact 11's Stepper is compositional: each part renders its children, and the step the
-// wizard is on is no longer an `activeStep` prop — the Root is driven by `value`, the step's
-// index as a string — so the Root part surfaces that value for the given helpers to read.
-;
 
 
-// PrimeReact 11's Button takes its label as children, not a `label` prop — the button's
-// text content is what the given helpers read a button's label from.
 vi.mock('../../../Common/Button', () => ({
     Button: (props: { children?: React.ReactNode; disabled?: boolean; onClick?: () => void }) =>
         React.createElement('button', { disabled: props.disabled, onClick: props.onClick }, props.children),
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_it_is_asked_for.ts b/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_it_is_asked_for.ts
index 360a6f23..4bbc8949 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_it_is_asked_for.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_it_is_asked_for.ts
@@ -20,14 +20,8 @@ vi.mock('../../../Dialogs/Dialog', () => ({
         React.createElement('div', { 'data-testid': 'dialog' }, props.buttons, props.children),
 }));
 
-// PrimeReact 11's Stepper is compositional: each part renders its children, and the step the
-// wizard is on is no longer an `activeStep` prop — the Root is driven by `value`, the step's
-// index as a string — so the Root part surfaces that value for the given helpers to read.
-;
 
 
-// PrimeReact 11's Button takes its label as children, not a `label` prop — the button's
-// text content is what the given helpers read a button's label from.
 vi.mock('../../../Common/Button', () => ({
     Button: (props: { children?: React.ReactNode; disabled?: boolean; onClick?: () => void }) =>
         React.createElement('button', { disabled: props.disabled, onClick: props.onClick }, props.children),
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_it_is_clicked.ts b/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_it_is_clicked.ts
index 3aefd64a..de769330 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_it_is_clicked.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_it_is_clicked.ts
@@ -22,14 +22,8 @@ vi.mock('../../../Dialogs/Dialog', () => ({
         React.createElement('div', { 'data-testid': 'dialog' }, props.buttons, props.children),
 }));
 
-// PrimeReact 11's Stepper is compositional: each part renders its children, and the step the
-// wizard is on is no longer an `activeStep` prop — the Root is driven by `value`, the step's
-// index as a string — so the Root part surfaces that value for the given helpers to read.
-;
 
 
-// PrimeReact 11's Button takes its label as children, not a `label` prop — the button's
-// text content is what the given helpers read a button's label from.
 vi.mock('../../../Common/Button', () => ({
     Button: (props: { children?: React.ReactNode; disabled?: boolean; onClick?: () => void }) =>
         React.createElement('button', { disabled: props.disabled, onClick: props.onClick }, props.children),
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_it_is_given_a_label.ts b/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_it_is_given_a_label.ts
index 4e49c843..3816acdc 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_it_is_given_a_label.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_it_is_given_a_label.ts
@@ -22,14 +22,8 @@ vi.mock('../../../Dialogs/Dialog', () => ({
         React.createElement('div', { 'data-testid': 'dialog' }, props.buttons, props.children),
 }));
 
-// PrimeReact 11's Stepper is compositional: each part renders its children, and the step the
-// wizard is on is no longer an `activeStep` prop — the Root is driven by `value`, the step's
-// index as a string — so the Root part surfaces that value for the given helpers to read.
-;
 
 
-// PrimeReact 11's Button takes its label as children, not a `label` prop — the button's
-// text content is what the given helpers read a button's label from.
 vi.mock('../../../Common/Button', () => ({
     Button: (props: { children?: React.ReactNode; disabled?: boolean; onClick?: () => void }) =>
         React.createElement('button', { disabled: props.disabled, onClick: props.onClick }, props.children),
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_it_is_not_asked_for.ts b/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_it_is_not_asked_for.ts
index e3bd8a94..15c5b6b6 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_it_is_not_asked_for.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_it_is_not_asked_for.ts
@@ -20,14 +20,8 @@ vi.mock('../../../Dialogs/Dialog', () => ({
         React.createElement('div', { 'data-testid': 'dialog' }, props.buttons, props.children),
 }));
 
-// PrimeReact 11's Stepper is compositional: each part renders its children, and the step the
-// wizard is on is no longer an `activeStep` prop — the Root is driven by `value`, the step's
-// index as a string — so the Root part surfaces that value for the given helpers to read.
-;
 
 
-// PrimeReact 11's Button takes its label as children, not a `label` prop — the button's
-// text content is what the given helpers read a button's label from.
 vi.mock('../../../Common/Button', () => ({
     Button: (props: { children?: React.ReactNode; disabled?: boolean; onClick?: () => void }) =>
         React.createElement('button', { disabled: props.disabled, onClick: props.onClick }, props.children),
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_submit_is_clicked_instead.ts b/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_submit_is_clicked_instead.ts
index e963c495..ae3b4c3c 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_submit_is_clicked_instead.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_submit_is_clicked_instead.ts
@@ -22,14 +22,8 @@ vi.mock('../../../Dialogs/Dialog', () => ({
         React.createElement('div', { 'data-testid': 'dialog' }, props.buttons, props.children),
 }));
 
-// PrimeReact 11's Stepper is compositional: each part renders its children, and the step the
-// wizard is on is no longer an `activeStep` prop — the Root is driven by `value`, the step's
-// index as a string — so the Root part surfaces that value for the given helpers to read.
-;
 
 
-// PrimeReact 11's Button takes its label as children, not a `label` prop — the button's
-// text content is what the given helpers read a button's label from.
 vi.mock('../../../Common/Button', () => ({
     Button: (props: { children?: React.ReactNode; disabled?: boolean; onClick?: () => void }) =>
         React.createElement('button', { disabled: props.disabled, onClick: props.onClick }, props.children),
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_the_command_is_executing.ts b/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_the_command_is_executing.ts
index d1a02d78..cf31c0d3 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_the_command_is_executing.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_offering_a_footer_cancel/and_the_command_is_executing.ts
@@ -36,14 +36,8 @@ vi.mock('../../../Dialogs/Dialog', () => ({
         React.createElement('div', { 'data-testid': 'dialog' }, props.buttons, props.children),
 }));
 
-// PrimeReact 11's Stepper is compositional: each part renders its children, and the step the
-// wizard is on is no longer an `activeStep` prop — the Root is driven by `value`, the step's
-// index as a string — so the Root part surfaces that value for the given helpers to read.
-;
 
 
-// PrimeReact 11's Button takes its label as children, not a `label` prop — the button's
-// text content is what the given helpers read a button's label from.
 vi.mock('../../../Common/Button', () => ({
     Button: (props: { children?: React.ReactNode; disabled?: boolean; onClick?: () => void }) =>
         React.createElement('button', { disabled: props.disabled, onClick: props.onClick }, props.children),
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_single_step.ts b/Source/CommandDialog/for_StepperCommandDialog/when_single_step.ts
index 97c48c01..ea406ac1 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_single_step.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_single_step.ts
@@ -12,7 +12,6 @@ vi.mock('../../Dialogs/Dialog', () => ({
         React.createElement('div', { 'data-testid': 'dialog' }, props.buttons, props.children),
 }));
 
-;
 
 vi.mock('../../Common/Button', () => ({
     Button: (props: { children?: React.ReactNode; disabled?: boolean }) =>
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_step_has_field_errors.ts b/Source/CommandDialog/for_StepperCommandDialog/when_step_has_field_errors.ts
index 29e88d68..92f94838 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_step_has_field_errors.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_step_has_field_errors.ts
@@ -15,11 +15,6 @@ vi.mock('../../Dialogs/Dialog', () => ({
         ),
 }));
 
-// PrimeReact 11's Stepper is compositional: each part renders its children, and
-// the Number part forwards its inline `style` so specs can assert the per-step
-// red/green indicator the wrapper applies directly to each step's number.
-;
-
 vi.mock('../../Common/Button', () => ({
     Button: (props: { children?: React.ReactNode; disabled?: boolean }) =>
         React.createElement('button', { disabled: props.disabled }, props.children),
diff --git a/Source/CommandForm/fields/ChipsField.tsx b/Source/CommandForm/fields/ChipsField.tsx
index 14872122..8d1a9aa9 100644
--- a/Source/CommandForm/fields/ChipsField.tsx
+++ b/Source/CommandForm/fields/ChipsField.tsx
@@ -7,6 +7,7 @@ import {
     useFieldAccessibility,
     type FieldAccessibilityProps,
 } from './fieldAccessibility';
+import { appendChipCandidates } from './chipValues';
 
 /** Stable part attributes for {@link ChipsField}. */
 export interface ChipsParts {
@@ -21,8 +22,7 @@ export interface ChipsParts {
 }
 
 interface ChipsFieldComponentProps
-    extends WrappedFieldProps<string[]>,
-        FieldAccessibilityProps {
+    extends WrappedFieldProps<string[]>, FieldAccessibilityProps {
     placeholder?: string;
     max?: number;
     separator?: string;
@@ -49,17 +49,14 @@ const ChipsControl = (props: ChipsFieldComponentProps) => {
             .map((value) => value.trim())
             .filter(Boolean);
         if (candidates.length === 0) return;
-        const available =
-            props.max === undefined
-                ? candidates
-                : candidates.slice(0, Math.max(0, props.max - props.value.length));
-        const next = props.allowDuplicate
-            ? [...props.value, ...available]
-            : [
-                  ...props.value,
-                  ...available.filter((candidate) => !props.value.includes(candidate)),
-              ];
-        props.onChange(next);
+        props.onChange(
+            appendChipCandidates(
+                props.value,
+                candidates,
+                props.max,
+                props.allowDuplicate ?? false,
+            ),
+        );
         setDraft('');
     };
 
diff --git a/Source/CommandForm/fields/chipValues.ts b/Source/CommandForm/fields/chipValues.ts
new file mode 100644
index 00000000..f2b4aa14
--- /dev/null
+++ b/Source/CommandForm/fields/chipValues.ts
@@ -0,0 +1,27 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+/**
+ * Adds normalized chip candidates while preserving insertion order, duplicate policy, and max size.
+ * Internal to the command-field implementation.
+ */
+export const appendChipCandidates = (
+    current: readonly string[],
+    candidates: readonly string[],
+    max: number | undefined,
+    allowDuplicate: boolean,
+): string[] => {
+    const availableSlots =
+        max === undefined ? Number.POSITIVE_INFINITY : Math.max(0, max - current.length);
+    const seen = new Set(current);
+    const additions: string[] = [];
+
+    for (const candidate of candidates) {
+        if (!allowDuplicate && seen.has(candidate)) continue;
+        if (additions.length >= availableSlots) break;
+        additions.push(candidate);
+        seen.add(candidate);
+    }
+
+    return [...current, ...additions];
+};
diff --git a/Source/CommandForm/for_ChipsField/when_appending_candidates.ts b/Source/CommandForm/for_ChipsField/when_appending_candidates.ts
new file mode 100644
index 00000000..1c63f94e
--- /dev/null
+++ b/Source/CommandForm/for_ChipsField/when_appending_candidates.ts
@@ -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 { expect } from 'chai';
+import { describe, it } from 'vitest';
+import { appendChipCandidates } from '../fields/chipValues';
+
+describe('when appending chip candidates', () => {
+    it('should_remove_duplicates_within_one_committed_draft_by_default', () => {
+        const result = appendChipCandidates(['alpha'], ['beta', 'beta'], undefined, false);
+
+        expect(result).to.deep.equal(['alpha', 'beta']);
+    });
+
+    it('should_deduplicate_before_applying_the_maximum', () => {
+        const result = appendChipCandidates(['alpha'], ['alpha', 'beta'], 2, false);
+
+        expect(result).to.deep.equal(['alpha', 'beta']);
+    });
+
+    it('should_preserve_duplicates_when_explicitly_allowed', () => {
+        const result = appendChipCandidates(['alpha'], ['beta', 'beta', 'gamma'], 3, true);
+
+        expect(result).to.deep.equal(['alpha', 'beta', 'beta']);
+    });
+});
diff --git a/Source/Common/Button.stories.tsx b/Source/Common/Button.stories.tsx
index e3298235..296524e9 100644
--- a/Source/Common/Button.stories.tsx
+++ b/Source/Common/Button.stories.tsx
@@ -17,10 +17,10 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Label: Story = { args: { label: 'Save' } };
-export const LabelAndIcon: Story = { args: { label: 'Save', icon: 'pi pi-check' } };
-export const IconOnly: Story = { args: { icon: 'pi pi-trash', 'aria-label': 'Delete', severity: 'danger' } };
+export const LabelAndIcon: Story = { args: { label: 'Save', icon: <span aria-hidden='true'>◆</span> } };
+export const IconOnly: Story = { args: { icon: <span aria-hidden='true'>◆</span>, 'aria-label': 'Delete', severity: 'danger' } };
 export const Loading: Story = { args: { label: 'Saving', loading: true } };
 export const Text: Story = { args: { label: 'Cancel', text: true } };
 export const Link: Story = { args: { label: 'Learn more', link: true } };
 export const Outlined: Story = { args: { label: 'Details', outlined: true, severity: 'secondary' } };
-export const WithTooltip: Story = { args: { icon: 'pi pi-info-circle', 'aria-label': 'Info', tooltip: 'More information' } };
+export const WithTooltip: Story = { args: { icon: <span aria-hidden='true'>◆</span>, 'aria-label': 'Info', tooltip: 'More information' } };
diff --git a/Source/Common/FormElement.stories.tsx b/Source/Common/FormElement.stories.tsx
index c9a1473e..06688d8c 100644
--- a/Source/Common/FormElement.stories.tsx
+++ b/Source/Common/FormElement.stories.tsx
@@ -15,7 +15,7 @@ type Story = StoryObj<typeof FormElement>;
 
 export const Default: Story = {
     args: {
-        icon: <i className='pi pi-user' />,
+        icon: <span aria-hidden='true'>◆</span>,
     },
     render: (args) => (
         <div className='p-4'>
@@ -28,7 +28,7 @@ export const Default: Story = {
 
 export const WithEmailIcon: Story = {
     args: {
-        icon: <i className='pi pi-envelope' />,
+        icon: <span aria-hidden='true'>◆</span>,
     },
     render: (args) => (
         <div className='p-4'>
@@ -45,7 +45,7 @@ export const WithEmailIcon: Story = {
 
 export const WithSearchIcon: Story = {
     args: {
-        icon: <i className='pi pi-search' />,
+        icon: <span aria-hidden='true'>◆</span>,
     },
     render: (args) => (
         <div className='p-4'>
diff --git a/Source/Common/FormElement.tsx b/Source/Common/FormElement.tsx
index e5e71949..f45b0be8 100644
--- a/Source/Common/FormElement.tsx
+++ b/Source/Common/FormElement.tsx
@@ -1,12 +1,11 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-
 /**
  * Props for {@link FormElement}.
  */
 export interface FormElementProps {
-    /** The form input rendered to the right of the icon addon (typically an `InputText`, `Dropdown`, etc.). */
+    /** The form control rendered to the right of the icon addon. */
     children: React.ReactNode;
 
     /**
@@ -24,17 +23,19 @@ export interface FormElementProps {
  *
  * ```tsx
  * <FormElement icon={<FaUser />}>
- *     <input className='cratis-field-input' value={name} onChange={…} />
+ *     <input
+ *         className='cratis-field-input'
+ *         value={name}
+ *         onChange={(event) => setName(event.currentTarget.value)}
+ *     />
  * </FormElement>
  * ```
  */
 export const FormElement = (props: FormElementProps) => {
     return (
-        <div className="flex flex-col md:flex-row gap-3">
-            <div className="cratis-form-element">
-                <span className="cratis-form-element__addon">
-                    {props.icon}
-                </span>
+        <div className='flex flex-col md:flex-row gap-3'>
+            <div className='cratis-form-element'>
+                <span className='cratis-form-element__addon'>{props.icon}</span>
                 {props.children}
             </div>
         </div>
diff --git a/Source/Common/Icon.stories.tsx b/Source/Common/Icon.stories.tsx
index d3355b5c..7895f17e 100644
--- a/Source/Common/Icon.stories.tsx
+++ b/Source/Common/Icon.stories.tsx
@@ -2,119 +2,60 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import type { Meta, StoryObj } from '@storybook/react';
+import { FaHouse, FaRocket } from 'react-icons/fa6';
 import { IconDisplay } from './Icon';
 
 const meta: Meta<typeof IconDisplay> = {
     title: 'Common/IconDisplay',
     component: IconDisplay,
-    parameters: {
-        layout: 'centered',
-    },
+    parameters: { layout: 'centered' },
 };
 
 export default meta;
 type Story = StoryObj<typeof IconDisplay>;
 
-/** Renders a PrimeIcons CSS class as an `<i>` element. */
+/** Renders a consumer-owned CSS class without inferring an icon provider. */
 export const StringIcon: Story = {
-    render: () => <IconDisplay icon='pi pi-home' />,
+    render: () => (
+        <>
+            <style>{'.story-product-home::before { content: "⌂"; font-size: 1.5rem; }'}</style>
+            <IconDisplay icon='story-product-home' />
+        </>
+    ),
 };
 
-/** Renders a PrimeIcons CSS class with an additional size class. */
+/** Adds consumer layout classes to the `<i>` element used by string icons. */
 export const StringIconWithExtraClass: Story = {
-    render: () => <IconDisplay icon='pi pi-home' className='text-3xl' />,
-};
-
-/**
- * A lone PrimeIcons class (`'pi-home'`) missing its required base `pi` class is repaired to
- * `'pi pi-home'` so it still renders — a common mistake that otherwise shows nothing.
- */
-export const PiClassMissingBase: Story = {
-    render: () => <IconDisplay icon='pi-home' className='text-3xl' />,
-};
-
-/**
- * A bare icon name (`'plus'`) is not a CSS class and renders nothing — passing one logs a
- * development warning pointing at the full `'pi pi-plus'` class. Shown here next to the
- * correct usage for contrast.
- */
-export const BareIconNameWarns: Story = {
     render: () => (
-        <div style={{ display: 'flex', gap: '2rem', alignItems: 'center' }}>
-            <div style={{ textAlign: 'center' }}>
-                <IconDisplay icon='plus' className='text-2xl' />
-                <p style={{ fontSize: '0.75rem', marginTop: '0.5rem', color: 'var(--cratis-text-color-secondary)' }}>
-                    'plus' (bare name — warns, renders nothing)
-                </p>
-            </div>
-            <div style={{ textAlign: 'center' }}>
-                <IconDisplay icon='pi pi-plus' className='text-2xl' />
-                <p style={{ fontSize: '0.75rem', marginTop: '0.5rem', color: 'var(--cratis-text-color-secondary)' }}>
-                    'pi pi-plus' (correct)
-                </p>
-            </div>
-        </div>
+        <>
+            <style>{'.story-product-home::before { content: "⌂"; font-size: 1.5rem; }'}</style>
+            <IconDisplay icon='story-product-home' className='text-3xl' />
+        </>
     ),
 };
 
-/** Renders an SVG React node directly — no wrapping `<i>` element is produced. */
-export const SvgReactNode: Story = {
-    render: () => (
-        <IconDisplay
-            icon={
-                <svg
-                    xmlns='http://www.w3.org/2000/svg'
-                    viewBox='0 0 24 24'
-                    width='24'
-                    height='24'
-                    fill='currentColor'
-                    aria-hidden='true'
-                >
-                    <path d='M12 2a10 10 0 1 0 0 20A10 10 0 0 0 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z' />
-                </svg>
-            }
-        />
-    ),
+/** Renders an icon-library React node directly without a wrapping `<i>`. */
+export const ReactIconNode: Story = {
+    render: () => <IconDisplay icon={<FaHouse aria-hidden='true' />} />,
 };
 
-/** Renders any arbitrary React element — here a styled emoji span — as an icon. */
+/** Renders any React node, including product-owned SVG or content. */
 export const ArbitraryReactNode: Story = {
-    render: () => (
-        <IconDisplay icon={<span style={{ fontSize: '1.5rem' }}>🚀</span>} />
-    ),
+    render: () => <IconDisplay icon={<FaRocket aria-hidden='true' />} />,
 };
 
-/**
- * Side-by-side comparison of the same logical "home" icon expressed as
- * a CSS-class string versus a custom SVG React node.
- */
+/** Shows the provider-owned CSS-class and React-node contracts side by side. */
 export const StringVsReactNode: Story = {
     render: () => (
         <div style={{ display: 'flex', gap: '2rem', alignItems: 'center' }}>
+            <style>{'.story-product-home::before { content: "⌂"; font-size: 1.5rem; }'}</style>
             <div style={{ textAlign: 'center' }}>
-                <IconDisplay icon='pi pi-home' className='text-2xl' />
-                <p style={{ fontSize: '0.75rem', marginTop: '0.5rem', color: 'var(--cratis-text-color-secondary)' }}>
-                    string (CSS class)
-                </p>
+                <IconDisplay icon='story-product-home' />
+                <p>consumer CSS class</p>
             </div>
             <div style={{ textAlign: 'center' }}>
-                <IconDisplay
-                    icon={
-                        <svg
-                            xmlns='http://www.w3.org/2000/svg'
-                            viewBox='0 0 24 24'
-                            width='24'
-                            height='24'
-                            fill='currentColor'
-                            aria-hidden='true'
-                        >
-                            <path d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z' />
-                        </svg>
-                    }
-                />
-                <p style={{ fontSize: '0.75rem', marginTop: '0.5rem', color: 'var(--cratis-text-color-secondary)' }}>
-                    ReactNode (SVG)
-                </p>
+                <IconDisplay icon={<FaHouse aria-hidden='true' />} />
+                <p>React node</p>
             </div>
         </div>
     ),
diff --git a/Source/Common/Icon.tsx b/Source/Common/Icon.tsx
index 9724ca5a..8f7c3a43 100644
--- a/Source/Common/Icon.tsx
+++ b/Source/Common/Icon.tsx
@@ -4,16 +4,7 @@
 import { ReactNode } from 'react';
 import { normalizeIconClass } from './normalizeIconClass';
 
-// Module-scoped ambient so the dev-only warning below type-checks without pulling in Node
-// types (the library's tsconfig sets `types: []`). Bundlers replace `process.env.NODE_ENV`
-// with a literal; the `typeof` guard keeps it safe where `process` is genuinely absent.
-declare const process: { env: Record<string, string | undefined> };
-
-/**
- * Represents either a React icon node or a consumer-owned icon-font class string.
- * PrimeIcons strings remain compatible when the consumer installs that font separately;
- * Components does not install an icon font.
- */
+/** Represents either a React icon node or a consumer-owned icon-font class string. */
 export type Icon = string | ReactNode;
 
 /** Props for the {@link IconDisplay} component. */
@@ -28,20 +19,14 @@ export interface IconDisplayProps {
 /**
  * Renders an {@link Icon} value.
  *
- * - When `icon` is a non-empty string it is treated as a consumer-owned icon-font
- *   CSS class and rendered as `<i className={icon} />`. A lone PrimeIcons class missing its
- *   base `pi` class (`'pi-home'`) is repaired to `'pi pi-home'`, and a bare icon name
- *   (`'plus'`) that would silently render nothing logs a development warning.
+ * - When `icon` is a non-empty string it is treated as a complete consumer-owned
+ *   icon-font CSS class and rendered as `<i className={icon} />`.
  * - Otherwise the value is rendered as-is, allowing any React node (SVG, component, etc.)
  *   to be used as an icon.
  */
 export const IconDisplay = ({ icon, className }: IconDisplayProps) => {
     if (typeof icon === 'string') {
-        const { className: resolved, warning } = normalizeIconClass(icon);
-        const isDevelopment = typeof process === 'undefined' || process.env.NODE_ENV !== 'production';
-        if (warning && isDevelopment) {
-            console.warn(warning);
-        }
+        const { className: resolved } = normalizeIconClass(icon);
         if (resolved.length === 0) {
             return <></>;
         }
diff --git a/Source/Common/for_IconDisplay/when_icon_is_a_pi_class_without_base/and_rendered.ts b/Source/Common/for_IconDisplay/when_icon_is_a_single_provider_class/and_rendered.ts
similarity index 70%
rename from Source/Common/for_IconDisplay/when_icon_is_a_pi_class_without_base/and_rendered.ts
rename to Source/Common/for_IconDisplay/when_icon_is_a_single_provider_class/and_rendered.ts
index ee805adb..29ccce8d 100644
--- a/Source/Common/for_IconDisplay/when_icon_is_a_pi_class_without_base/and_rendered.ts
+++ b/Source/Common/for_IconDisplay/when_icon_is_a_single_provider_class/and_rendered.ts
@@ -5,11 +5,11 @@ import React from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { IconDisplay } from '../../Icon';
 
-describe('when IconDisplay is given a pi class missing its base class and rendered', () => {
+describe('when IconDisplay is given one provider-specific class and rendered', () => {
     let html: string;
 
     beforeEach(() => {
-        const element = React.createElement(IconDisplay, { icon: 'pi-home' });
+        const element = React.createElement(IconDisplay, { icon: 'product-home' });
         html = renderToStaticMarkup(element);
     });
 
@@ -17,7 +17,7 @@ describe('when IconDisplay is given a pi class missing its base class and render
         html.should.include('<i');
     });
 
-    it('should_apply_the_repaired_class_with_base_pi', () => {
-        html.should.include('pi pi-home');
+    it('should_not_infer_or_prepend_a_provider_base_class', () => {
+        html.should.include('class="product-home"');
     });
 });
diff --git a/Source/Common/for_IconDisplay/when_icon_is_a_string/and_extra_class_is_provided.ts b/Source/Common/for_IconDisplay/when_icon_is_a_string/and_extra_class_is_provided.ts
index b5ba31fd..f40d15b3 100644
--- a/Source/Common/for_IconDisplay/when_icon_is_a_string/and_extra_class_is_provided.ts
+++ b/Source/Common/for_IconDisplay/when_icon_is_a_string/and_extra_class_is_provided.ts
@@ -9,7 +9,10 @@ describe('when IconDisplay is given a string icon with an extra className and re
     let html: string;
 
     beforeEach(() => {
-        const element = React.createElement(IconDisplay, { icon: 'pi pi-home', className: 'text-lg' });
+        const element = React.createElement(IconDisplay, {
+            icon: 'product-icons product-home',
+            className: 'text-lg',
+        });
         html = renderToStaticMarkup(element);
     });
 
@@ -18,7 +21,7 @@ describe('when IconDisplay is given a string icon with an extra className and re
     });
 
     it('should_include_the_icon_class', () => {
-        html.should.include('pi pi-home');
+        html.should.include('product-icons product-home');
     });
 
     it('should_include_the_extra_class', () => {
diff --git a/Source/Common/for_IconDisplay/when_icon_is_a_string/and_rendered.ts b/Source/Common/for_IconDisplay/when_icon_is_a_string/and_rendered.ts
index f3f6024e..9f87a9cc 100644
--- a/Source/Common/for_IconDisplay/when_icon_is_a_string/and_rendered.ts
+++ b/Source/Common/for_IconDisplay/when_icon_is_a_string/and_rendered.ts
@@ -9,7 +9,7 @@ describe('when IconDisplay is given a string icon and rendered', () => {
     let html: string;
 
     beforeEach(() => {
-        const element = React.createElement(IconDisplay, { icon: 'pi pi-home' });
+        const element = React.createElement(IconDisplay, { icon: 'product-icons product-home' });
         html = renderToStaticMarkup(element);
     });
 
@@ -18,6 +18,6 @@ describe('when IconDisplay is given a string icon and rendered', () => {
     });
 
     it('should_apply_the_icon_class', () => {
-        html.should.include('pi pi-home');
+        html.should.include('product-icons product-home');
     });
 });
diff --git a/Source/Common/for_normalizeIconClass/when_given_a_bare_icon_name.ts b/Source/Common/for_normalizeIconClass/when_given_a_bare_icon_name.ts
index 13dc4e78..fa29b0c0 100644
--- a/Source/Common/for_normalizeIconClass/when_given_a_bare_icon_name.ts
+++ b/Source/Common/for_normalizeIconClass/when_given_a_bare_icon_name.ts
@@ -3,18 +3,10 @@
 
 import { normalizeIconClass } from '../normalizeIconClass';
 
-describe('when normalizeIconClass is given a bare icon name', () => {
-    const result = normalizeIconClass('plus');
+describe('when normalizeIconClass is given a bare consumer class', () => {
+    const result = normalizeIconClass('productIcon');
 
     it('should_leave_the_class_untouched', () => {
-        result.className.should.equal('plus');
-    });
-
-    it('should_warn_that_it_is_not_a_class', () => {
-        (result.warning === undefined).should.be.false;
-    });
-
-    it('should_suggest_the_prime_icons_class', () => {
-        (result.warning ?? '').should.include('pi pi-plus');
+        result.className.should.equal('productIcon');
     });
 });
diff --git a/Source/Common/for_normalizeIconClass/when_given_a_full_class_string.ts b/Source/Common/for_normalizeIconClass/when_given_a_full_class_string.ts
index a518d71c..0810ab2f 100644
--- a/Source/Common/for_normalizeIconClass/when_given_a_full_class_string.ts
+++ b/Source/Common/for_normalizeIconClass/when_given_a_full_class_string.ts
@@ -4,13 +4,9 @@
 import { normalizeIconClass } from '../normalizeIconClass';
 
 describe('when normalizeIconClass is given a full class string', () => {
-    const result = normalizeIconClass('pi pi-home');
+    const result = normalizeIconClass('product-icons product-home');
 
     it('should_return_the_class_unchanged', () => {
-        result.className.should.equal('pi pi-home');
-    });
-
-    it('should_not_produce_a_warning', () => {
-        (result.warning === undefined).should.be.true;
+        result.className.should.equal('product-icons product-home');
     });
 });
diff --git a/Source/Common/for_normalizeIconClass/when_given_a_pi_class_without_base.ts b/Source/Common/for_normalizeIconClass/when_given_a_pi_class_without_base.ts
deleted file mode 100644
index f94cd760..00000000
--- a/Source/Common/for_normalizeIconClass/when_given_a_pi_class_without_base.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-// Copyright (c) Cratis. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-
-import { normalizeIconClass } from '../normalizeIconClass';
-
-describe('when normalizeIconClass is given a pi class without its base class', () => {
-    const result = normalizeIconClass('pi-home');
-
-    it('should_prepend_the_base_pi_class', () => {
-        result.className.should.equal('pi pi-home');
-    });
-
-    it('should_not_produce_a_warning', () => {
-        (result.warning === undefined).should.be.true;
-    });
-});
diff --git a/Source/Common/for_normalizeIconClass/when_given_a_single_provider_class.ts b/Source/Common/for_normalizeIconClass/when_given_a_single_provider_class.ts
new file mode 100644
index 00000000..c26424be
--- /dev/null
+++ b/Source/Common/for_normalizeIconClass/when_given_a_single_provider_class.ts
@@ -0,0 +1,12 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { normalizeIconClass } from '../normalizeIconClass';
+
+describe('when normalizeIconClass is given a provider-specific class', () => {
+    const result = normalizeIconClass('product-home');
+
+    it('should_not_infer_or_prepend_a_provider_base_class', () => {
+        result.className.should.equal('product-home');
+    });
+});
diff --git a/Source/Common/normalizeIconClass.ts b/Source/Common/normalizeIconClass.ts
index 09546c7b..3459cfce 100644
--- a/Source/Common/normalizeIconClass.ts
+++ b/Source/Common/normalizeIconClass.ts
@@ -5,57 +5,17 @@
 export interface NormalizedIconClass {
     /** The CSS class to apply to the `<i>` element. Empty when there is nothing to render. */
     className: string;
-
-    /**
-     * A developer-facing warning when the input looks like a bare icon name rather than a
-     * CSS class (e.g. `'plus'` instead of `'pi pi-plus'`). Present only when the value would
-     * render nothing recognizable as an icon.
-     */
-    warning?: string;
 }
 
 /**
- * Normalizes a string icon value into a CSS class for {@link IconDisplay}.
- *
- * A string icon is meant to be a full icon-font CSS class such as `'pi pi-home'`. Two
- * mistakes silently render nothing — and look like the icon "just doesn't work":
+ * Trims a consumer-owned icon-font CSS class for {@link IconDisplay}.
  *
- * - A lone PrimeIcons class (`'pi-home'`) missing its required base `pi` class. This is
- *   unambiguous, so it is repaired to `'pi pi-home'`.
- * - A bare icon name (`'plus'`, `'home'`) that is not a CSS class at all. There is no safe
- *   way to know which icon font it belongs to, so the value is left untouched and a warning
- *   is produced pointing at the full class (`'pi pi-plus'`) or a React node.
+ * Components does not infer an icon provider or add provider-specific base classes. Pass the
+ * complete class string required by the icon font, or prefer a React icon node.
  *
- * Full class strings (anything containing whitespace) and already-prefixed values pass
- * through unchanged.
- *
- * @param icon - The raw string icon value.
- * @returns The class to render and an optional developer warning.
+ * @param icon - The complete consumer-owned icon CSS class.
+ * @returns The trimmed class to render.
  */
 export function normalizeIconClass(icon: string): NormalizedIconClass {
-    const trimmed = icon.trim();
-    if (trimmed.length === 0) {
-        return { className: '' };
-    }
-
-    // A full class string (multiple tokens) is taken as-is — the caller spelled it out.
-    if (trimmed.includes(' ')) {
-        return { className: trimmed };
-    }
-
-    // A lone PrimeIcons icon class missing its base `pi` class — repair it.
-    if (trimmed.startsWith('pi-')) {
-        return { className: `pi pi-${trimmed.slice('pi-'.length)}` };
-    }
-
-    // A single plain word (no hyphen, no prefix) is almost certainly a bare icon name that
-    // will not render. Leave rendering untouched but guide the caller to the real class.
-    if (trimmed !== 'pi' && /^[a-z][a-z0-9]*$/i.test(trimmed)) {
-        return {
-            className: trimmed,
-            warning: `IconDisplay received '${trimmed}', which looks like a bare icon name rather than a CSS class, so it will not render as an icon. Use a full icon class such as 'pi pi-${trimmed}', or pass a React node.`,
-        };
-    }
-
-    return { className: trimmed };
+    return { className: icon.trim() };
 }
diff --git a/Source/DataPage/DataPage.stories.tsx b/Source/DataPage/DataPage.stories.tsx
index d9ec15a8..6a991fdb 100644
--- a/Source/DataPage/DataPage.stories.tsx
+++ b/Source/DataPage/DataPage.stories.tsx
@@ -154,18 +154,18 @@ export const Default: Story = {
                 <DataPage.MenuItems>
                     <MenuItem
                         label='Add Person'
-                        icon={() => <i className='pi pi-plus' />}
+                        icon={() => <span aria-hidden='true'>◆</span>}
                         command={() => alert('Add person clicked')}
                     />
                     <MenuItem
                         label='Edit Person'
-                        icon={() => <i className='pi pi-pencil' />}
+                        icon={() => <span aria-hidden='true'>◆</span>}
                         command={() => alert('Edit person clicked')}
                         disableOnUnselected
                     />
                     <MenuItem
                         label='Delete Person'
-                        icon={() => <i className='pi pi-trash' />}
+                        icon={() => <span aria-hidden='true'>◆</span>}
                         command={() => alert('Delete person clicked')}
                         disableOnUnselected
                     />
@@ -209,7 +209,7 @@ export const WithoutDetails: Story = {
                 <DataPage.MenuItems>
                     <MenuItem
                         label='Refresh'
-                        icon={() => <i className='pi pi-refresh' />}
+                        icon={() => <span aria-hidden='true'>◆</span>}
                         command={() => alert('Refresh clicked')}
                     />
                 </DataPage.MenuItems>
@@ -368,7 +368,7 @@ export const MultiplePages: Story = {
                 <DataPage.MenuItems>
                     <MenuItem
                         label='Add Person'
-                        icon={() => <i className='pi pi-plus' />}
+                        icon={() => <span aria-hidden='true'>◆</span>}
                         command={() => alert('Add person clicked')}
                     />
                 </DataPage.MenuItems>
@@ -496,7 +496,7 @@ export const MultiplePagesWithDetails: Story = {
                 <DataPage.MenuItems>
                     <MenuItem
                         label='Edit Person'
-                        icon={() => <i className='pi pi-pencil' />}
+                        icon={() => <span aria-hidden='true'>◆</span>}
                         command={() => alert('Edit person clicked')}
                         disableOnUnselected
                     />
diff --git a/Source/DataPage/for_DataPage/given/a_data_page.ts b/Source/DataPage/for_DataPage/given/a_data_page.ts
index 7c8ec349..2eadcc7b 100644
--- a/Source/DataPage/for_DataPage/given/a_data_page.ts
+++ b/Source/DataPage/for_DataPage/given/a_data_page.ts
@@ -72,7 +72,7 @@ const menuItems = () =>
         children: React.createElement(MenuItem, {
             key: 'add',
             label: 'Add',
-            icon: () => React.createElement('i', { className: 'pi pi-plus' }),
+            icon: () => React.createElement('span', { 'aria-hidden': true }, '◆'),
         }),
     });
 
@@ -85,21 +85,18 @@ export const aDataPage = (options: DataPageOptions = {}) => {
     const children = options.withMenuItems ? [menuItems(), columns()] : [columns()];
     const PersonDataPage = DataPage<PersonsQuery, Person, object>;
 
-    return React.createElement(
-        PersonDataPage,
-        {
-            title: 'Persons',
-            query: PersonsQuery,
-            emptyMessage: 'No persons found',
-            dataKey: 'id',
-            detailsComponent: options.withDetails ? PersonDetails : undefined,
-            defaultFilters: options.defaultFilters,
-            selection: options.selection,
-            onSelectionChange: options.onSelectionChange,
-            paginatorPt: options.paginatorPt,
-            children,
-        },
-    );
+    return React.createElement(PersonDataPage, {
+        title: 'Persons',
+        query: PersonsQuery,
+        emptyMessage: 'No persons found',
+        dataKey: 'id',
+        detailsComponent: options.withDetails ? PersonDetails : undefined,
+        defaultFilters: options.defaultFilters,
+        selection: options.selection,
+        onSelectionChange: options.onSelectionChange,
+        paginatorPt: options.paginatorPt,
+        children,
+    });
 };
 
 /**
diff --git a/Source/DataTables/Column.tsx b/Source/DataTables/Column.tsx
index c8eb19bf..6a8d0f28 100644
--- a/Source/DataTables/Column.tsx
+++ b/Source/DataTables/Column.tsx
@@ -39,11 +39,8 @@ export interface ColumnProps<TData = unknown> {
     filterLabels?: Partial<ColumnFilterMenuLabels>;
     /** Stable part attributes for this column's filter popup. */
     filterPt?: ColumnFilterMenuParts;
-    /**
-     * Renders a selection control column (a radio for `single`, a checkbox for
-     * `multiple`) instead of a data column.
-     */
-    selectionMode?: 'single' | 'multiple';
+    /** Renders a single-row selection radio instead of a data column. */
+    selectionMode?: 'single';
     /** Inline style for every body cell in the column. */
     style?: React.CSSProperties;
     /** Class name for every body cell in the column. */
diff --git a/Source/DataTables/for_DataTableForQuery/given/a_data_table.ts b/Source/DataTables/for_DataTableForQuery/given/a_data_table.ts
index d3e0bf81..27244e50 100644
--- a/Source/DataTables/for_DataTableForQuery/given/a_data_table.ts
+++ b/Source/DataTables/for_DataTableForQuery/given/a_data_table.ts
@@ -54,15 +54,16 @@ export const aDataTableOverAGeneratedProxy = (onSelectionChange: (product: Produ
 /**
  * Renders an element into a real document and lets React settle.
  *
- * PrimeReact 11 components resolve their configuration from a `PrimeReactProvider` and
- * throw without one, so the element is mounted inside the Cratis provider that supplies
- * it. `ResizeObserver` is stubbed because PrimeReact observes its containers for size
- * changes and jsdom has no layout engine to report any.
+ * The element is mounted inside the Cratis provider so locale and component messages follow
+ * the same path as production. `ResizeObserver` is stubbed because jsdom has no layout engine
+ * to report container size changes.
  * @param element - The element to render.
  * @returns The mounted table, to be passed to {@link unmount}.
  */
 export const render = async (element: React.ReactElement): Promise<DataTableInTheDom> => {
+    // SAFETY: React reads this process-wide test flag from globalThis.
     (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+    // SAFETY: jsdom has no ResizeObserver, so this process-wide test shim supplies its contract.
     (globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver ??= class {
         observe() { }
         unobserve() { }
@@ -93,9 +94,7 @@ export const unmount = async (table: DataTableInTheDom) => {
 };
 
 /**
- * Whether the table rendered its paginator. PrimeReact 11 has no Paginator, so the
- * paging controls are the Cratis `TablePaginator` and carry its own class rather than
- * PrimeReact's `.p-paginator`.
+ * Whether the table rendered its Cratis-owned paginator.
  * @param table - The mounted table.
  * @returns True when a paginator is present.
  */
diff --git a/Source/Dialogs/Dialog.stories.tsx b/Source/Dialogs/Dialog.stories.tsx
index 65581952..8da2f803 100644
--- a/Source/Dialogs/Dialog.stories.tsx
+++ b/Source/Dialogs/Dialog.stories.tsx
@@ -164,7 +164,9 @@ export const WithForm: Story = {
                             placeholder='Enter name…'
                         />
                         {name.trim().length === 0 && (
-                            <small className='text-[var(--cratis-red-500)]'>Name is required</small>
+                            <small className='text-[var(--cratis-red-500)]'>
+                                Name is required
+                            </small>
                         )}
                     </div>
                 </Dialog>
@@ -252,14 +254,14 @@ export const CustomButtons: Story = {
                                     closeDialog(DialogResult.Ok, { action: 'draft' })
                                 }
                             >
-                                <i className='pi pi-save' /> Save Draft
+                                <span aria-hidden='true'>◆</span> Save Draft
                             </Button>
                             <Button
                                 onClick={() =>
                                     closeDialog(DialogResult.Ok, { action: 'publish' })
                                 }
                             >
-                                <i className='pi pi-send' /> Publish
+                                <span aria-hidden='true'>◆</span> Publish
                             </Button>
                         </>
                     }
diff --git a/Source/Display/Display.stories.tsx b/Source/Display/Display.stories.tsx
index b2c3221f..057bd329 100644
--- a/Source/Display/Display.stories.tsx
+++ b/Source/Display/Display.stories.tsx
@@ -46,11 +46,11 @@ export const Overview: Story = {
             <Row label="Chip">
                 <Chip label="Design" />
                 <Chip label="Removable" removable onRemove={fn()} />
-                <Chip label="With icon" icon={<i className="pi pi-user" />} />
+                <Chip label="With icon" icon={<span aria-hidden='true'>◆</span>} />
             </Row>
             <Row label="Avatar">
                 <Avatar label="JD" />
-                <Avatar icon={<i className="pi pi-user" />} size="large" />
+                <Avatar icon={<span aria-hidden='true'>◆</span>} size="large" />
             </Row>
             <Row label="ProgressBar">
                 <div style={{ flex: 1, minWidth: '200px' }}>
diff --git a/Source/MIGRATION.md b/Source/MIGRATION.md
index 38b5b08d..8e83bb66 100644
--- a/Source/MIGRATION.md
+++ b/Source/MIGRATION.md
@@ -90,6 +90,18 @@ Remove `styledMode()`, `CratisPreset`, and `primeReactStyles` before upgrading.
 
 There is no compatibility-package replacement in Components 4. Stay on Components 3 while renderer-specific types or selectors remain.
 
+### Removed symbol mapping
+
+| Removed Components 3 export | Components 4 action |
+| --- | --- |
+| `styledMode`, `StyledModeOptions`, `CratisPreset`, `primeReactStyles` | Remove renderer configuration; use provider locale/messages and direct `--cratis-*` token mappings. |
+| `primeReactCssLayer`, `primeReactCssLayerOrder` | Delete unless the product still owns direct Prime CSS; product layer ordering belongs in product CSS. |
+| `cratisDarkModeSelector` | Use the product's own theme selector and assign `--cratis-*` values under it. |
+| `assertPrimeReact11PassThroughCompatibility` | Delete after moving renderer slots to typed Cratis `*Parts` surfaces. |
+| `components3PrimeReact11PassThroughContract`, `PrimeReact11PassThroughComponent` | Replace with component-specific public part types. |
+| `primeReact11PassThroughSentinelAttribute`, `primeReact11PassThroughSentinelPreset` | Replace with documented `data-cratis-part` and state attributes. |
+| `@cratis/components/primereact-v10-palette` variables | Map canonical product tokens directly to `--cratis-*`. |
+
 Before:
 
 ```tsx
@@ -210,6 +222,14 @@ For an existing nested Prime stepper preset, map the slots by rendered responsib
 
 The old `stepperpanel.header` wrapper has no one-to-one element. Put list-item layout on `step`, and interactive-header styling on `header`. Replace `data-p-active` selectors with `[data-cratis-part='step'][data-active='true']`.
 
+### Representative downstream migrations
+
+For an Ada-style design system, remove `styledMode`, `AdaPreset`, Prime locale types, and the PrimeUI license from the Components provider. Keep `--ada-*` as the canonical tokens and map them directly to `--cratis-*`. If the product still imports Prime directly, retain a separate Prime provider, preset, dependencies, and license until those imports are removed.
+
+For Studio Liquid Glass, replace renderer part types with `DialogParts`, `StepperParts`, `ToolbarParts`, `ToolbarButtonParts`, and `ToolbarFanOutParts`. Keep Studio's shaders and measurement wrappers product-owned. Use stable `pt` / `data-cratis-part` seams, pass the integrated Canvas surface through `controlsGlassSurface`, and localize its actions through `controlsLabels`.
+
+The published migration guide contains complete Ada provider/token and Studio Dialog/Stepper/Toolbar/Canvas mapping examples.
+
 Paginator callbacks that formerly returned classes from renderer context must become static Cratis parts plus CSS state selectors:
 
 ```ts
@@ -260,6 +280,10 @@ Do not assume every Dropdown trigger has `role="combobox"`. Query it by its acce
 
 Multiple selection uses a native multiple-select when filtering is off and an accessible multi-value combobox when `filter` is enabled. Prefer a dedicated collection picker for a large or highly customized multi-select experience.
 
+## Update Tooltip triggers
+
+`Tooltip` now enhances one actual React-element trigger so focus, hover, and `aria-describedby` stay together. Wrap text, fragments, multiple siblings, or conditional content in one appropriate native control. `className` is merged onto that trigger instead of an extra wrapper.
+
 ## Update tables
 
 `DataTableCore` now renders semantic HTML. Query-backed paging remains owned by Arc.
@@ -268,11 +292,11 @@ Multiple selection uses a native multiple-select when filtering is off and an ac
 - Complete-result filtering and sorting are not automatic table state. Model them in query arguments and implement them in the server query before paging.
 - `clientFiltering` remains temporarily accepted as a deprecated no-op so staged source migrations compile. Remove it: filtering is always scoped to the loaded page, and complete-result filtering belongs on the server before paging.
 - Legacy `{ operator, constraints }` filter entries remain accepted. `operator: 'or'` matches any constraint; all other values match every constraint.
-- `Column` remains the declarative column marker.
+- `Column` remains the declarative column marker. Selection columns now type only the implemented `selectionMode='single'`; the removed `'multiple'` value never provided checkbox selection.
 - Table styling uses `DataTableParts` and `data-cratis-part`.
 - Server totals remain authoritative for the paginator.
 
-Custom matchers registered with `registerDataTableFilterMatcher()` continue to work.
+Direct Prime `FilterMatchMode` values and `FilterService.register()` / `registerMatcher()` calls do not register behavior in Components. Replace them with `DataTableFilterMatchMode` and `registerDataTableFilterMatcher()`, then use the returned `matchMode` in `DataTableFilterMeta`. Retaining an arbitrary string preserves source compatibility but an unregistered mode deliberately matches nothing.
 
 Separate `RadioButtonField` options bound to one property now require the same explicit `name` prop so native arrow-key radio-group navigation works. `RadioGroupField` and `RatingField` generate a shared internal name automatically.
 
@@ -313,7 +337,7 @@ Typical replacements:
 | `primereact/tag`, `badge`, `message` | `@cratis/components/Display`               |
 | `primereact/toast` / `toaster`       | `@cratis/components/Notifications`         |
 
-PrimeIcons class strings are still accepted where a component takes an icon node/string, but Components no longer installs PrimeIcons. Prefer a React icon component or product-owned SVG.
+Complete PrimeIcons class strings remain usable where a component accepts `Icon`, but Components no longer installs the font or adds a missing base class. Consumers that retain it must load its stylesheet and pass the complete class string. Prefer a React icon component or product-owned SVG. `DataPage.MenuItem.icon` remains a React component type rather than `Icon`.
 
 ## Verify the migration
 
diff --git a/Source/PivotViewer/PivotViewer.tsx b/Source/PivotViewer/PivotViewer.tsx
index 60d67fd7..c20b0bc4 100644
--- a/Source/PivotViewer/PivotViewer.tsx
+++ b/Source/PivotViewer/PivotViewer.tsx
@@ -356,19 +356,19 @@ export function PivotViewer<TItem extends object>({
     const cssVariables = useMemo(() => {
         const vars: Record<string, string> = {};
         if (!colors) return vars;
-        if (colors.primaryColor) vars['--primary-color'] = colors.primaryColor;
-        if (colors.primaryColorText) vars['--primary-color-text'] = colors.primaryColorText;
-        if (colors.primary500) vars['--primary-500'] = colors.primary500;
-        if (colors.surfaceGround) vars['--surface-ground'] = colors.surfaceGround;
-        if (colors.surfaceCard) vars['--surface-card'] = colors.surfaceCard;
-        if (colors.surfaceSection) vars['--surface-section'] = colors.surfaceSection;
-        if (colors.surfaceOverlay) vars['--surface-overlay'] = colors.surfaceOverlay;
-        if (colors.surfaceBorder) vars['--surface-border'] = colors.surfaceBorder;
-        if (colors.textColor) vars['--text-color'] = colors.textColor;
-        if (colors.textColorSecondary) vars['--text-color-secondary'] = colors.textColorSecondary;
-        if (colors.highlightBg) vars['--highlight-bg'] = colors.highlightBg;
-        if (colors.maskbg) vars['--maskbg'] = colors.maskbg;
-        if (colors.focusRing) vars['--focus-ring'] = colors.focusRing;
+        if (colors.primaryColor) vars['--cratis-primary-color'] = colors.primaryColor;
+        if (colors.primaryColorText) vars['--cratis-primary-color-text'] = colors.primaryColorText;
+        if (colors.primary500) vars['--cratis-primary-500'] = colors.primary500;
+        if (colors.surfaceGround) vars['--cratis-surface-ground'] = colors.surfaceGround;
+        if (colors.surfaceCard) vars['--cratis-surface-card'] = colors.surfaceCard;
+        if (colors.surfaceSection) vars['--cratis-surface-section'] = colors.surfaceSection;
+        if (colors.surfaceOverlay) vars['--cratis-surface-overlay'] = colors.surfaceOverlay;
+        if (colors.surfaceBorder) vars['--cratis-surface-border'] = colors.surfaceBorder;
+        if (colors.textColor) vars['--cratis-text-color'] = colors.textColor;
+        if (colors.textColorSecondary) vars['--cratis-text-color-secondary'] = colors.textColorSecondary;
+        if (colors.highlightBg) vars['--cratis-highlight-bg'] = colors.highlightBg;
+        if (colors.maskbg) vars['--cratis-maskbg'] = colors.maskbg;
+        if (colors.focusRing) vars['--cratis-focus-ring'] = colors.focusRing;
         return vars;
     }, [colors]);
 
diff --git a/Source/PivotViewer/components/PivotCanvas.tsx b/Source/PivotViewer/components/PivotCanvas.tsx
index 2f2a4e94..806ddd75 100644
--- a/Source/PivotViewer/components/PivotCanvas.tsx
+++ b/Source/PivotViewer/components/PivotCanvas.tsx
@@ -140,8 +140,11 @@ export function PivotCanvas<TItem extends object>({
   }, [onPanStart, onPanMove, onPanEnd, onCardClick]);
 
   useEffect(() => {
-    cardColorsRef.current = resolveCardColors(cssColorResolver);
-  }, [cssColorResolver]);
+    cardColorsRef.current = resolveCardColors(
+      cssColorResolver,
+      parentContainerRef.current ?? document.documentElement,
+    );
+  }, [cssColorResolver, parentContainerRef]);
 
   useEffect(() => {
     // Reset mounted flag
diff --git a/Source/PivotViewer/components/pivot/colorResolver.ts b/Source/PivotViewer/components/pivot/colorResolver.ts
index bf9405c9..949532a3 100644
--- a/Source/PivotViewer/components/pivot/colorResolver.ts
+++ b/Source/PivotViewer/components/pivot/colorResolver.ts
@@ -50,18 +50,20 @@ export function createCssColorResolver() {
   };
 }
 
-export function resolveCardColors(cssColorResolver: (s: string, f: number) => number): CardColors {
-  const root = document.documentElement;
-  const style = getComputedStyle(root);
+export function resolveCardColors(
+  cssColorResolver: (s: string, f: number) => number,
+  element: Element = document.documentElement,
+): CardColors {
+  const style = getComputedStyle(element);
   const getVar = (name: string, fallback: number) =>
     cssColorResolver(style.getPropertyValue(name) || name, fallback);
 
   return {
-    base: getVar('--surface-b', DEFAULT_COLORS.base),
-    mid: getVar('--surface-a', DEFAULT_COLORS.mid),
-    gradient: getVar('--surface-ground', DEFAULT_COLORS.gradient),
-    border: getVar('--surface-border', DEFAULT_COLORS.border),
-    text: getVar('--text-color', DEFAULT_COLORS.text),
-    textSecondary: getVar('--text-color-secondary', DEFAULT_COLORS.textSecondary),
+    base: getVar('--cratis-surface-100', DEFAULT_COLORS.base),
+    mid: getVar('--cratis-surface-0', DEFAULT_COLORS.mid),
+    gradient: getVar('--cratis-surface-ground', DEFAULT_COLORS.gradient),
+    border: getVar('--cratis-surface-border', DEFAULT_COLORS.border),
+    text: getVar('--cratis-text-color', DEFAULT_COLORS.text),
+    textSecondary: getVar('--cratis-text-color-secondary', DEFAULT_COLORS.textSecondary),
   };
 }
diff --git a/Source/PivotViewer/for_resolveCardColors/when_semantic_tokens_are_defined.ts b/Source/PivotViewer/for_resolveCardColors/when_semantic_tokens_are_defined.ts
new file mode 100644
index 00000000..2e33367b
--- /dev/null
+++ b/Source/PivotViewer/for_resolveCardColors/when_semantic_tokens_are_defined.ts
@@ -0,0 +1,45 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { expect } from 'chai';
+import { describe, it } from 'vitest';
+import { resolveCardColors } from '../components/pivot/colorResolver';
+import { DEFAULT_COLORS } from '../components/pivot/constants';
+
+const parseHex = (value: string, fallback: number) => {
+    const match = value.trim().match(/^#([0-9a-f]{6})$/i);
+    return match ? Number.parseInt(match[1], 16) : fallback;
+};
+
+describe('when semantic PivotViewer color tokens are defined', () => {
+    it('should_resolve_them_from_the_viewer_element', () => {
+        const element = document.createElement('div');
+        element.style.setProperty('--cratis-surface-100', '#112233');
+        element.style.setProperty('--cratis-surface-0', '#223344');
+        element.style.setProperty('--cratis-surface-ground', '#334455');
+        element.style.setProperty('--cratis-surface-border', '#445566');
+        element.style.setProperty('--cratis-text-color', '#556677');
+        element.style.setProperty('--cratis-text-color-secondary', '#667788');
+        document.body.appendChild(element);
+
+        const result = resolveCardColors(parseHex, element);
+
+        expect(result).to.deep.equal({
+            base: 0x112233,
+            mid: 0x223344,
+            gradient: 0x334455,
+            border: 0x445566,
+            text: 0x556677,
+            textSecondary: 0x667788,
+        });
+        element.remove();
+    });
+
+    it('should_use_internal_fallbacks_when_tokens_are_missing', () => {
+        const result = resolveCardColors(parseHex, document.createElement('div'));
+
+        expect(result).to.deep.equal(DEFAULT_COLORS);
+    });
+});
diff --git a/Source/README.md b/Source/README.md
index 3f814bd3..e01e0e3f 100644
--- a/Source/README.md
+++ b/Source/README.md
@@ -189,4 +189,4 @@ The old `@cratis/components/styled`, `styledMode`, `CratisPreset`, and `primeRea
 
 ## License
 
-Cratis Components is MIT licensed. Its default runtime dependencies use permissive open-source licenses, including Apache-2.0, MIT, and ISC. Components 4 does not require PrimeUI licensing.
+Cratis Components is MIT licensed. Its default runtime dependencies use permissive open-source licenses, including Apache-2.0, MIT, and ISC. The bundled Patrick Hand font used by Canvas notes is distributed under the SIL Open Font License 1.1; its `PatrickHand-OFL.txt` notice is included in the package. Components 4 does not require PrimeUI licensing.
diff --git a/Source/Toolbar/Toolbar.stories.tsx b/Source/Toolbar/Toolbar.stories.tsx
index 75e79e07..f49b2a09 100644
--- a/Source/Toolbar/Toolbar.stories.tsx
+++ b/Source/Toolbar/Toolbar.stories.tsx
@@ -26,35 +26,40 @@ export default meta;
 
 type Story = StoryObj<typeof Toolbar>;
 
+const ToolGlyph = ({ name }: { name: string }) => (
+    <span aria-hidden='true' style={{ fontSize: '0.75rem', fontWeight: 700 }}>
+        {name.slice(0, 1).toUpperCase()}
+    </span>
+);
+
 const folderIcons: string[] = [
-    'pi pi-exclamation-circle',
-    'pi pi-eye',
-    'pi pi-cog',
-    'pi pi-external-link',
-    'pi pi-clock',
-    'pi pi-globe',
-    'pi pi-bookmark',
-    'pi pi-send',
-    'pi pi-search',
-    'pi pi-car',
-    'pi pi-box',
-    'pi pi-bolt',
-    'pi pi-database',
-    'pi pi-cloud',
-    'pi pi-star',
-    'pi pi-heart',
-    'pi pi-map',
-    'pi pi-wifi',
-    'pi pi-lock',
-    'pi pi-bell',
+    'exclamation-circle',
+    'eye',
+    'cog',
+    'external-link',
+    'clock',
+    'globe',
+    'bookmark',
+    'send',
+    'search',
+    'car',
+    'box',
+    'bolt',
+    'database',
+    'cloud',
+    'star',
+    'heart',
+    'map',
+    'wifi',
+    'lock',
+    'bell',
 ];
 
 /**
  * Demonstrates that any React node can be used as an icon on {@link ToolbarButton} and
- * {@link ToolbarFanOutItem} — here using inline SVG elements in place of PrimeIcons CSS
- * class strings.
+ * {@link ToolbarFanOutItem} — here using inline SVG elements instead of relying on an icon-font stylesheet.
  *
- * Existing string-based usage is unchanged; the `icon` prop now accepts `string | ReactNode`.
+ * Consumer-owned icon-font class strings remain supported, while React nodes work without extra CSS.
  */
 export const WithReactNodeIcons: Story = {
     render: () => {
@@ -92,8 +97,7 @@ export const WithReactNodeIcons: Story = {
                     <ToolbarButton icon={<TriangleIcon />} title='Triangle' />
                     <ToolbarButton icon={<PentagonIcon />} title='Pentagon' />
                 </ToolbarFanOutItem>
-                {/* String-based icons still work unchanged */}
-                <ToolbarButton icon='pi pi-undo' title='Undo' />
+                <ToolbarButton icon={<ToolGlyph name='undo' />} title='Undo' />
             </Toolbar>
         );
     },
@@ -103,11 +107,11 @@ export const WithReactNodeIcons: Story = {
 export const Default: Story = {
     render: () => (
         <Toolbar>
-            <ToolbarButton icon='pi pi-arrow-up-left' title='Select' />
-            <ToolbarButton icon='pi pi-clone' title='Layers' />
-            <ToolbarButton icon='pi pi-circle' title='Shapes' />
-            <ToolbarButton icon='pi pi-stop' title='Rectangle' />
-            <ToolbarButton icon='pi pi-file' title='Sticky note' />
+            <ToolbarButton icon={<ToolGlyph name='arrow-up-left' />} title='Select' />
+            <ToolbarButton icon={<ToolGlyph name='clone' />} title='Layers' />
+            <ToolbarButton icon={<ToolGlyph name='circle' />} title='Shapes' />
+            <ToolbarButton icon={<ToolGlyph name='stop' />} title='Rectangle' />
+            <ToolbarButton icon={<ToolGlyph name='file' />} title='Sticky note' />
         </Toolbar>
     ),
 };
@@ -121,25 +125,25 @@ export const WithActiveButton: Story = {
             return (
                 <Toolbar>
                     <ToolbarButton
-                        icon='pi pi-arrow-up-left'
+                        icon={<ToolGlyph name='arrow-up-left' />}
                         title='Select'
                         active={active === 'select'}
                         onClick={() => setActive('select')}
                     />
                     <ToolbarButton
-                        icon='pi pi-clone'
+                        icon={<ToolGlyph name='clone' />}
                         title='Layers'
                         active={active === 'layers'}
                         onClick={() => setActive('layers')}
                     />
                     <ToolbarButton
-                        icon='pi pi-stop'
+                        icon={<ToolGlyph name='stop' />}
                         title='Rectangle'
                         active={active === 'rectangle'}
                         onClick={() => setActive('rectangle')}
                     />
                     <ToolbarButton
-                        icon='pi pi-file'
+                        icon={<ToolGlyph name='file' />}
                         title='Sticky note'
                         active={active === 'sticky'}
                         onClick={() => setActive('sticky')}
@@ -167,20 +171,20 @@ export const WithContexts: Story = {
             return (
                 <div className='flex flex-col items-center gap-6'>
                     <Toolbar>
-                        <ToolbarButton icon='pi pi-arrow-up-left' title='Select' />
+                        <ToolbarButton icon={<ToolGlyph name='arrow-up-left' />} title='Select' />
                         <ToolbarSection activeContext={currentContext}>
                             <ToolbarContext name='drawing'>
-                                <ToolbarButton icon='pi pi-pencil' title='Draw' />
-                                <ToolbarButton icon='pi pi-stop' title='Rectangle' />
-                                <ToolbarButton icon='pi pi-circle' title='Circle' />
-                                <ToolbarButton icon='pi pi-minus' title='Line' />
+                                <ToolbarButton icon={<ToolGlyph name='pencil' />} title='Draw' />
+                                <ToolbarButton icon={<ToolGlyph name='stop' />} title='Rectangle' />
+                                <ToolbarButton icon={<ToolGlyph name='circle' />} title='Circle' />
+                                <ToolbarButton icon={<ToolGlyph name='minus' />} title='Line' />
                             </ToolbarContext>
                             <ToolbarContext name='text'>
-                                <ToolbarButton icon='pi pi-align-center' title='Align Center' />
-                                <ToolbarButton icon='pi pi-align-left' title='Align Left' />
+                                <ToolbarButton icon={<ToolGlyph name='align-center' />} title='Align Center' />
+                                <ToolbarButton icon={<ToolGlyph name='align-left' />} title='Align Left' />
                             </ToolbarContext>
                         </ToolbarSection>
-                        <ToolbarButton icon='pi pi-undo' title='Undo' />
+                        <ToolbarButton icon={<ToolGlyph name='undo' />} title='Undo' />
                     </Toolbar>
 
                     <div className='flex gap-2'>
@@ -223,12 +227,12 @@ export const WithContexts: Story = {
 export const WithSeparators: Story = {
     render: () => (
         <Toolbar orientation='horizontal'>
-            <ToolbarButton icon='pi pi-th-large' title='Overview' tooltipPosition='bottom' />
+            <ToolbarButton icon={<ToolGlyph name='th-large' />} title='Overview' tooltipPosition='bottom' />
             <ToolbarSeparator orientation='horizontal' />
-            <ToolbarButton icon='pi pi-minus' title='Zoom out' tooltipPosition='bottom' />
-            <ToolbarButton icon='pi pi-plus' title='Zoom in' tooltipPosition='bottom' />
+            <ToolbarButton icon={<ToolGlyph name='minus' />} title='Zoom out' tooltipPosition='bottom' />
+            <ToolbarButton icon={<ToolGlyph name='plus' />} title='Zoom in' tooltipPosition='bottom' />
             <ToolbarSeparator orientation='horizontal' />
-            <ToolbarButton icon='pi pi-question-circle' title='Help' tooltipPosition='bottom' />
+            <ToolbarButton icon={<ToolGlyph name='question-circle' />} title='Help' tooltipPosition='bottom' />
         </Toolbar>
     ),
 };
@@ -248,13 +252,13 @@ export const ZoomBar: Story = {
 
             return (
                 <Toolbar orientation='horizontal'>
-                    <ToolbarButton icon='pi pi-th-large' title='Overview' tooltipPosition='bottom' />
+                    <ToolbarButton icon={<ToolGlyph name='th-large' />} title='Overview' tooltipPosition='bottom' />
                     <ToolbarSeparator orientation='horizontal' />
-                    <ToolbarButton icon='pi pi-minus' title='Zoom out' tooltipPosition='bottom' onClick={zoomOut} />
+                    <ToolbarButton icon={<ToolGlyph name='minus' />} title='Zoom out' tooltipPosition='bottom' onClick={zoomOut} />
                     <ToolbarButton text={`${zoom}%`} title='Reset zoom' tooltipPosition='bottom' onClick={resetZoom} />
-                    <ToolbarButton icon='pi pi-plus' title='Zoom in' tooltipPosition='bottom' onClick={zoomIn} />
+                    <ToolbarButton icon={<ToolGlyph name='plus' />} title='Zoom in' tooltipPosition='bottom' onClick={zoomIn} />
                     <ToolbarSeparator orientation='horizontal' />
-                    <ToolbarButton icon='pi pi-question-circle' title='Help' tooltipPosition='bottom' />
+                    <ToolbarButton icon={<ToolGlyph name='question-circle' />} title='Help' tooltipPosition='bottom' />
                 </Toolbar>
             );
         };
@@ -278,37 +282,37 @@ export const WithFanOut: Story = {
                 <div className='flex flex-col gap-2'>
                     <Toolbar>
                         <ToolbarButton
-                            icon='pi pi-arrow-up-left'
+                            icon={<ToolGlyph name='arrow-up-left' />}
                             title='Select'
                             active={activeTool === 'select'}
                             onClick={() => setActiveTool('select')}
                         />
                         <ToolbarFanOutItem
-                            icon='pi pi-th-large'
+                            icon={<ToolGlyph name='th-large' />}
                             tooltip='Shapes'
                         >
-                            <ToolbarButton icon='pi pi-th-large' title='Shapes' onClick={() => setActiveTool('shapes')} />
-                            <ToolbarButton icon='pi pi-exclamation-circle' title='Info' onClick={() => setActiveTool('info')} />
-                            <ToolbarButton icon='pi pi-eye' title='Preview' onClick={() => setActiveTool('preview')} />
-                            <ToolbarButton icon='pi pi-cog' title='Settings' onClick={() => setActiveTool('settings')} />
-                            <ToolbarButton icon='pi pi-external-link' title='Open' onClick={() => setActiveTool('open')} />
+                            <ToolbarButton icon={<ToolGlyph name='th-large' />} title='Shapes' onClick={() => setActiveTool('shapes')} />
+                            <ToolbarButton icon={<ToolGlyph name='exclamation-circle' />} title='Info' onClick={() => setActiveTool('info')} />
+                            <ToolbarButton icon={<ToolGlyph name='eye' />} title='Preview' onClick={() => setActiveTool('preview')} />
+                            <ToolbarButton icon={<ToolGlyph name='cog' />} title='Settings' onClick={() => setActiveTool('settings')} />
+                            <ToolbarButton icon={<ToolGlyph name='external-link' />} title='Open' onClick={() => setActiveTool('open')} />
                         </ToolbarFanOutItem>
                         <ToolbarButton
-                            icon='pi pi-stop'
+                            icon={<ToolGlyph name='stop' />}
                             title='Rectangle'
                             active={activeTool === 'rectangle'}
                             onClick={() => setActiveTool('rectangle')}
                         />
                         <ToolbarButton
-                            icon='pi pi-file'
+                            icon={<ToolGlyph name='file' />}
                             title='Sticky note'
                             active={activeTool === 'sticky'}
                             onClick={() => setActiveTool('sticky')}
                         />
                     </Toolbar>
                     <Toolbar>
-                        <ToolbarButton icon='pi pi-undo' title='Undo' />
-                        <ToolbarButton icon='pi pi-refresh' title='Redo' />
+                        <ToolbarButton icon={<ToolGlyph name='undo' />} title='Undo' />
+                        <ToolbarButton icon={<ToolGlyph name='refresh' />} title='Redo' />
                     </Toolbar>
                 </div>
             );
@@ -322,18 +326,18 @@ export const WithFanOut: Story = {
 export const WithFanOutDown: Story = {
     render: () => (
         <Toolbar orientation='horizontal'>
-            <ToolbarButton icon='pi pi-arrow-up-left' title='Select' tooltipPosition='bottom' />
+            <ToolbarButton icon={<ToolGlyph name='arrow-up-left' />} title='Select' tooltipPosition='bottom' />
             <ToolbarFanOutItem
-                icon='pi pi-th-large'
+                icon={<ToolGlyph name='th-large' />}
                 tooltip='Shapes'
                 tooltipPosition='bottom'
                 fanOutDirection='down'
             >
-                <ToolbarButton icon='pi pi-th-large' title='Shapes' tooltipPosition='bottom' />
-                <ToolbarButton icon='pi pi-exclamation-circle' title='Info' tooltipPosition='bottom' />
-                <ToolbarButton icon='pi pi-eye' title='Preview' tooltipPosition='bottom' />
+                <ToolbarButton icon={<ToolGlyph name='th-large' />} title='Shapes' tooltipPosition='bottom' />
+                <ToolbarButton icon={<ToolGlyph name='exclamation-circle' />} title='Info' tooltipPosition='bottom' />
+                <ToolbarButton icon={<ToolGlyph name='eye' />} title='Preview' tooltipPosition='bottom' />
             </ToolbarFanOutItem>
-            <ToolbarButton icon='pi pi-stop' title='Rectangle' tooltipPosition='bottom' />
+            <ToolbarButton icon={<ToolGlyph name='stop' />} title='Rectangle' tooltipPosition='bottom' />
         </Toolbar>
     ),
 };
@@ -342,11 +346,11 @@ export const WithFanOutDown: Story = {
 export const WithFolderOneButton: Story = {
     render: () => (
         <Toolbar>
-            <ToolbarButton icon='pi pi-arrow-up-left' title='Select' />
-            <ToolbarFolder icon='pi pi-th-large' title='Folder (1 item)'>
-                <ToolbarButton icon={folderIcons[0]} title='Action 1' />
+            <ToolbarButton icon={<ToolGlyph name='arrow-up-left' />} title='Select' />
+            <ToolbarFolder icon={<ToolGlyph name='th-large' />} title='Folder (1 item)'>
+                <ToolbarButton icon={<ToolGlyph name={folderIcons[0]} />} title='Action 1' />
             </ToolbarFolder>
-            <ToolbarButton icon='pi pi-stop' title='Rectangle' />
+            <ToolbarButton icon={<ToolGlyph name='stop' />} title='Rectangle' />
         </Toolbar>
     ),
 };
@@ -355,13 +359,13 @@ export const WithFolderOneButton: Story = {
 export const WithFolderFourButtons: Story = {
     render: () => (
         <Toolbar>
-            <ToolbarButton icon='pi pi-arrow-up-left' title='Select' />
-            <ToolbarFolder icon='pi pi-th-large' title='Folder (4 items)'>
+            <ToolbarButton icon={<ToolGlyph name='arrow-up-left' />} title='Select' />
+            <ToolbarFolder icon={<ToolGlyph name='th-large' />} title='Folder (4 items)'>
                 {folderIcons.slice(0, 4).map((icon, index) => (
-                    <ToolbarButton key={`folder-4-${index}`} icon={icon} title={`Action ${index + 1}`} />
+                    <ToolbarButton key={`folder-4-${index}`} icon={<ToolGlyph name={icon} />} title={`Action ${index + 1}`} />
                 ))}
             </ToolbarFolder>
-            <ToolbarButton icon='pi pi-stop' title='Rectangle' />
+            <ToolbarButton icon={<ToolGlyph name='stop' />} title='Rectangle' />
         </Toolbar>
     ),
 };
@@ -370,13 +374,13 @@ export const WithFolderFourButtons: Story = {
 export const WithFolderTwentyButtons: Story = {
     render: () => (
         <Toolbar>
-            <ToolbarButton icon='pi pi-arrow-up-left' title='Select' />
-            <ToolbarFolder icon='pi pi-th-large' title='Folder (20 items)'>
+            <ToolbarButton icon={<ToolGlyph name='arrow-up-left' />} title='Select' />
+            <ToolbarFolder icon={<ToolGlyph name='th-large' />} title='Folder (20 items)'>
                 {folderIcons.slice(0, 20).map((icon, index) => (
-                    <ToolbarButton key={`folder-20-${index}`} icon={icon} title={`Action ${index + 1}`} />
+                    <ToolbarButton key={`folder-20-${index}`} icon={<ToolGlyph name={icon} />} title={`Action ${index + 1}`} />
                 ))}
             </ToolbarFolder>
-            <ToolbarButton icon='pi pi-stop' title='Rectangle' />
+            <ToolbarButton icon={<ToolGlyph name='stop' />} title='Rectangle' />
         </Toolbar>
     ),
 };
@@ -404,10 +408,10 @@ export const DragAndDrop: Story = {
                             setDropped(`Dragging: ${(data as { tool: string }).tool}`)
                         }
                     >
-                        <ToolbarButton icon='pi pi-pencil' title='Pencil' data={{ tool: 'pencil' }} />
-                        <ToolbarButton icon='pi pi-stop' title='Rectangle' data={{ tool: 'rectangle' }} />
-                        <ToolbarButton icon='pi pi-circle' title='Circle' data={{ tool: 'circle' }} />
-                        <ToolbarButton icon='pi pi-minus' title='Line' data={{ tool: 'line' }} />
+                        <ToolbarButton icon={<ToolGlyph name='pencil' />} title='Pencil' data={{ tool: 'pencil' }} />
+                        <ToolbarButton icon={<ToolGlyph name='stop' />} title='Rectangle' data={{ tool: 'rectangle' }} />
+                        <ToolbarButton icon={<ToolGlyph name='circle' />} title='Circle' data={{ tool: 'circle' }} />
+                        <ToolbarButton icon={<ToolGlyph name='minus' />} title='Line' data={{ tool: 'line' }} />
                     </Toolbar>
 
                     <div
@@ -453,18 +457,18 @@ export const WithGroups: Story = {
     render: () => (
         <Toolbar>
             <ToolbarGroup>
-                <ToolbarButton icon='pi pi-arrow-up-left' title='Select' />
-                <ToolbarButton icon='pi pi-hand-paper' title='Pan' />
+                <ToolbarButton icon={<ToolGlyph name='arrow-up-left' />} title='Select' />
+                <ToolbarButton icon={<ToolGlyph name='hand-paper' />} title='Pan' />
             </ToolbarGroup>
             <ToolbarGroup>
-                <ToolbarButton icon='pi pi-pencil' title='Draw' />
-                <ToolbarButton icon='pi pi-stop' title='Rectangle' />
-                <ToolbarButton icon='pi pi-circle' title='Circle' />
-                <ToolbarButton icon='pi pi-minus' title='Line' />
+                <ToolbarButton icon={<ToolGlyph name='pencil' />} title='Draw' />
+                <ToolbarButton icon={<ToolGlyph name='stop' />} title='Rectangle' />
+                <ToolbarButton icon={<ToolGlyph name='circle' />} title='Circle' />
+                <ToolbarButton icon={<ToolGlyph name='minus' />} title='Line' />
             </ToolbarGroup>
             <ToolbarGroup>
-                <ToolbarButton icon='pi pi-undo' title='Undo' />
-                <ToolbarButton icon='pi pi-refresh' title='Redo' />
+                <ToolbarButton icon={<ToolGlyph name='undo' />} title='Undo' />
+                <ToolbarButton icon={<ToolGlyph name='refresh' />} title='Redo' />
             </ToolbarGroup>
         </Toolbar>
     ),
@@ -482,14 +486,14 @@ export const WithGroups: Story = {
 export const WithFolderListMode: Story = {
     render: () => (
         <Toolbar>
-            <ToolbarButton icon='pi pi-arrow-up-left' title='Select' />
-            <ToolbarFolder icon='pi pi-th-large' title='Tools' mode='list'>
-                <ToolbarButton icon='pi pi-pencil' title='Draw freehand' />
-                <ToolbarButton icon='pi pi-stop' title='Rectangle' />
-                <ToolbarButton icon='pi pi-circle' title='Ellipse' />
-                <ToolbarButton icon='pi pi-minus' title='Straight line' />
+            <ToolbarButton icon={<ToolGlyph name='arrow-up-left' />} title='Select' />
+            <ToolbarFolder icon={<ToolGlyph name='th-large' />} title='Tools' mode='list'>
+                <ToolbarButton icon={<ToolGlyph name='pencil' />} title='Draw freehand' />
+                <ToolbarButton icon={<ToolGlyph name='stop' />} title='Rectangle' />
+                <ToolbarButton icon={<ToolGlyph name='circle' />} title='Ellipse' />
+                <ToolbarButton icon={<ToolGlyph name='minus' />} title='Straight line' />
             </ToolbarFolder>
-            <ToolbarButton icon='pi pi-undo' title='Undo' />
+            <ToolbarButton icon={<ToolGlyph name='undo' />} title='Undo' />
         </Toolbar>
     ),
 };
@@ -503,26 +507,26 @@ export const FolderGridVsList: Story = {
             <div className='flex flex-col items-center gap-2'>
                 <span style={{ color: 'var(--cratis-text-color-secondary)', fontSize: '0.75rem' }}>Grid (default)</span>
                 <Toolbar>
-                    <ToolbarFolder icon='pi pi-th-large' title='Tools' mode='grid'>
-                        <ToolbarButton icon='pi pi-pencil' title='Draw' />
-                        <ToolbarButton icon='pi pi-stop' title='Rectangle' />
-                        <ToolbarButton icon='pi pi-circle' title='Ellipse' />
-                        <ToolbarButton icon='pi pi-minus' title='Line' />
-                        <ToolbarButton icon='pi pi-cog' title='Settings' />
-                        <ToolbarButton icon='pi pi-star' title='Favorite' />
+                    <ToolbarFolder icon={<ToolGlyph name='th-large' />} title='Tools' mode='grid'>
+                        <ToolbarButton icon={<ToolGlyph name='pencil' />} title='Draw' />
+                        <ToolbarButton icon={<ToolGlyph name='stop' />} title='Rectangle' />
+                        <ToolbarButton icon={<ToolGlyph name='circle' />} title='Ellipse' />
+                        <ToolbarButton icon={<ToolGlyph name='minus' />} title='Line' />
+                        <ToolbarButton icon={<ToolGlyph name='cog' />} title='Settings' />
+                        <ToolbarButton icon={<ToolGlyph name='star' />} title='Favorite' />
                     </ToolbarFolder>
                 </Toolbar>
             </div>
             <div className='flex flex-col items-center gap-2'>
                 <span style={{ color: 'var(--cratis-text-color-secondary)', fontSize: '0.75rem' }}>List</span>
                 <Toolbar>
-                    <ToolbarFolder icon='pi pi-list' title='Tools' mode='list'>
-                        <ToolbarButton icon='pi pi-pencil' title='Draw freehand' />
-                        <ToolbarButton icon='pi pi-stop' title='Rectangle' />
-                        <ToolbarButton icon='pi pi-circle' title='Ellipse' />
-                        <ToolbarButton icon='pi pi-minus' title='Straight line' />
-                        <ToolbarButton icon='pi pi-cog' title='Settings' />
-                        <ToolbarButton icon='pi pi-star' title='Favorite' />
+                    <ToolbarFolder icon={<ToolGlyph name='list' />} title='Tools' mode='list'>
+                        <ToolbarButton icon={<ToolGlyph name='pencil' />} title='Draw freehand' />
+                        <ToolbarButton icon={<ToolGlyph name='stop' />} title='Rectangle' />
+                        <ToolbarButton icon={<ToolGlyph name='circle' />} title='Ellipse' />
+                        <ToolbarButton icon={<ToolGlyph name='minus' />} title='Straight line' />
+                        <ToolbarButton icon={<ToolGlyph name='cog' />} title='Settings' />
+                        <ToolbarButton icon={<ToolGlyph name='star' />} title='Favorite' />
                     </ToolbarFolder>
                 </Toolbar>
             </div>
@@ -552,33 +556,33 @@ export const WithSlotInGroup: Story = {
             // Draw mode has the most tools (8) to make slot transitions visually dramatic.
             const drawTools = useMemo(() => (
                 <>
-                    <ToolbarButton icon='pi pi-pencil' title='Pencil' />
-                    <ToolbarButton icon='pi pi-eraser' title='Eraser' />
-                    <ToolbarButton icon='pi pi-palette' title='Color' />
-                    <ToolbarButton icon='pi pi-bolt' title='Airbrush' />
-                    <ToolbarButton icon='pi pi-image' title='Stamp' />
-                    <ToolbarButton icon='pi pi-filter' title='Blur' />
-                    <ToolbarButton icon='pi pi-sun' title='Dodge' />
-                    <ToolbarButton icon='pi pi-moon' title='Burn' />
+                    <ToolbarButton icon={<ToolGlyph name='pencil' />} title='Pencil' />
+                    <ToolbarButton icon={<ToolGlyph name='eraser' />} title='Eraser' />
+                    <ToolbarButton icon={<ToolGlyph name='palette' />} title='Color' />
+                    <ToolbarButton icon={<ToolGlyph name='bolt' />} title='Airbrush' />
+                    <ToolbarButton icon={<ToolGlyph name='image' />} title='Stamp' />
+                    <ToolbarButton icon={<ToolGlyph name='filter' />} title='Blur' />
+                    <ToolbarButton icon={<ToolGlyph name='sun' />} title='Dodge' />
+                    <ToolbarButton icon={<ToolGlyph name='moon' />} title='Burn' />
                 </>
             ), []);
 
             const shapeTools = useMemo(() => (
                 <>
-                    <ToolbarButton icon='pi pi-stop' title='Rectangle' />
-                    <ToolbarButton icon='pi pi-circle' title='Circle' />
-                    <ToolbarButton icon='pi pi-minus' title='Line' />
-                    <ToolbarButton icon='pi pi-sort-up' title='Triangle' />
-                    <ToolbarButton icon='pi pi-star' title='Polygon' />
+                    <ToolbarButton icon={<ToolGlyph name='stop' />} title='Rectangle' />
+                    <ToolbarButton icon={<ToolGlyph name='circle' />} title='Circle' />
+                    <ToolbarButton icon={<ToolGlyph name='minus' />} title='Line' />
+                    <ToolbarButton icon={<ToolGlyph name='sort-up' />} title='Triangle' />
+                    <ToolbarButton icon={<ToolGlyph name='star' />} title='Polygon' />
                 </>
             ), []);
 
             const selectTools = useMemo(() => (
                 <>
-                    <ToolbarButton icon='pi pi-arrows-alt' title='Move' />
-                    <ToolbarButton icon='pi pi-clone' title='Duplicate' />
-                    <ToolbarButton icon='pi pi-refresh' title='Rotate' />
-                    <ToolbarButton icon='pi pi-expand' title='Scale' />
+                    <ToolbarButton icon={<ToolGlyph name='arrows-alt' />} title='Move' />
+                    <ToolbarButton icon={<ToolGlyph name='clone' />} title='Duplicate' />
+                    <ToolbarButton icon={<ToolGlyph name='refresh' />} title='Rotate' />
+                    <ToolbarButton icon={<ToolGlyph name='expand' />} title='Scale' />
                 </>
             ), []);
 
@@ -592,9 +596,9 @@ export const WithSlotInGroup: Story = {
                     <Toolbar>
                         {/* Group 1: mode switcher — clicking a button changes which slot content is mounted */}
                         <ToolbarGroup>
-                            <ToolbarButton icon='pi pi-pencil' title='Draw mode' active={mode === 'draw'} onClick={() => setMode('draw')} />
-                            <ToolbarButton icon='pi pi-stop' title='Shape mode' active={mode === 'shape'} onClick={() => setMode('shape')} />
-                            <ToolbarButton icon='pi pi-arrow-up-left' title='Select mode' active={mode === 'select'} onClick={() => setMode('select')} />
+                            <ToolbarButton icon={<ToolGlyph name='pencil' />} title='Draw mode' active={mode === 'draw'} onClick={() => setMode('draw')} />
+                            <ToolbarButton icon={<ToolGlyph name='stop' />} title='Shape mode' active={mode === 'shape'} onClick={() => setMode('shape')} />
+                            <ToolbarButton icon={<ToolGlyph name='arrow-up-left' />} title='Select mode' active={mode === 'select'} onClick={() => setMode('select')} />
                         </ToolbarGroup>
 
                         {/* Group 2: receives context-sensitive tools from the active mode via the slot */}
@@ -622,8 +626,8 @@ export const WithSlotInContext: Story = {
             const [currentContext, setCurrentContext] = useState<string>('drawing');
             const [slotContent, setSlotContent] = useState<'favorite' | 'bookmark' | 'none'>('favorite');
 
-            const favoriteBtn = useMemo(() => <ToolbarButton icon='pi pi-star' title='Favorite' />, []);
-            const bookmarkBtn = useMemo(() => <ToolbarButton icon='pi pi-bookmark' title='Bookmark' />, []);
+            const favoriteBtn = useMemo(() => <ToolbarButton icon={<ToolGlyph name='star' />} title='Favorite' />, []);
+            const bookmarkBtn = useMemo(() => <ToolbarButton icon={<ToolGlyph name='bookmark' />} title='Bookmark' />, []);
 
             return (
                 <ToolbarSlotProvider>
@@ -631,12 +635,12 @@ export const WithSlotInContext: Story = {
                         <Toolbar>
                             <ToolbarSection activeContext={currentContext}>
                                 <ToolbarContext name='drawing' slotName='drawing-extras'>
-                                    <ToolbarButton icon='pi pi-pencil' title='Draw' />
-                                    <ToolbarButton icon='pi pi-stop' title='Rectangle' />
+                                    <ToolbarButton icon={<ToolGlyph name='pencil' />} title='Draw' />
+                                    <ToolbarButton icon={<ToolGlyph name='stop' />} title='Rectangle' />
                                 </ToolbarContext>
                                 <ToolbarContext name='text'>
-                                    <ToolbarButton icon='pi pi-align-left' title='Align Left' />
-                                    <ToolbarButton icon='pi pi-align-center' title='Align Center' />
+                                    <ToolbarButton icon={<ToolGlyph name='align-left' />} title='Align Left' />
+                                    <ToolbarButton icon={<ToolGlyph name='align-center' />} title='Align Center' />
                                 </ToolbarContext>
                             </ToolbarSection>
                         </Toolbar>
@@ -702,15 +706,15 @@ export const WithSlotInContext: Story = {
 export const WithMultipleSlotContributors: Story = {
     render: () => {
         const ButtonA = () => {
-            const btn = useMemo(() => <ToolbarButton icon='pi pi-star' title='Slot A (order 10)' />, []);
+            const btn = useMemo(() => <ToolbarButton icon={<ToolGlyph name='star' />} title='Slot A (order 10)' />, []);
             return <ToolbarSlot slotName='shared' order={10}>{btn}</ToolbarSlot>;
         };
         const ButtonB = () => {
-            const btn = useMemo(() => <ToolbarButton icon='pi pi-heart' title='Slot B (order 5)' />, []);
+            const btn = useMemo(() => <ToolbarButton icon={<ToolGlyph name='heart' />} title='Slot B (order 5)' />, []);
             return <ToolbarSlot slotName='shared' order={5}>{btn}</ToolbarSlot>;
         };
         const ButtonC = () => {
-            const btn = useMemo(() => <ToolbarButton icon='pi pi-bell' title='Slot C (order 20)' />, []);
+            const btn = useMemo(() => <ToolbarButton icon={<ToolGlyph name='bell' />} title='Slot C (order 20)' />, []);
             return <ToolbarSlot slotName='shared' order={20}>{btn}</ToolbarSlot>;
         };
 
@@ -719,7 +723,7 @@ export const WithMultipleSlotContributors: Story = {
                 <div className='flex gap-6 items-start'>
                     <Toolbar>
                         <ToolbarGroup slotName='shared'>
-                            <ToolbarButton icon='pi pi-pencil' title='Draw (always first)' />
+                            <ToolbarButton icon={<ToolGlyph name='pencil' />} title='Draw (always first)' />
                         </ToolbarGroup>
                     </Toolbar>
 
@@ -755,8 +759,8 @@ export const LayoutForEditorModules: Story = {
             const assetTools = useMemo(
                 () => (
                     <ToolbarGroup>
-                        <ToolbarButton icon='pi pi-image' title='Asset Browser' />
-                        <ToolbarButton icon='pi pi-upload' title='Upload Asset' />
+                        <ToolbarButton icon={<ToolGlyph name='image' />} title='Asset Browser' />
+                        <ToolbarButton icon={<ToolGlyph name='upload' />} title='Upload Asset' />
                     </ToolbarGroup>
                 ),
                 []
@@ -767,8 +771,8 @@ export const LayoutForEditorModules: Story = {
                     <>
                         <ToolbarSeparator />
                         <ToolbarGroup>
-                            <ToolbarButton icon='pi pi-comment' title='Comments' />
-                            <ToolbarButton icon='pi pi-check-square' title='Approval Checks' />
+                            <ToolbarButton icon={<ToolGlyph name='comment' />} title='Comments' />
+                            <ToolbarButton icon={<ToolGlyph name='check-square' />} title='Approval Checks' />
                         </ToolbarGroup>
                     </>
                 ),
@@ -779,16 +783,16 @@ export const LayoutForEditorModules: Story = {
                 <ToolbarSlotProvider>
                     <div className='flex flex-col items-center gap-6'>
                         <Toolbar orientation='horizontal'>
-                            <ToolbarButton icon='pi pi-file-edit' title='Open Editor' tooltipPosition='bottom' />
+                            <ToolbarButton icon={<ToolGlyph name='file-edit' />} title='Open Editor' tooltipPosition='bottom' />
                             <ToolbarSeparator orientation='horizontal' />
                             <ToolbarLayout name='editor-modules' orientation='horizontal'>
                                 <ToolbarGroup orientation='horizontal'>
-                                    <ToolbarButton icon='pi pi-save' title='Save' tooltipPosition='bottom' />
-                                    <ToolbarButton icon='pi pi-refresh' title='Reload' tooltipPosition='bottom' />
+                                    <ToolbarButton icon={<ToolGlyph name='save' />} title='Save' tooltipPosition='bottom' />
+                                    <ToolbarButton icon={<ToolGlyph name='refresh' />} title='Reload' tooltipPosition='bottom' />
                                 </ToolbarGroup>
                             </ToolbarLayout>
                             <ToolbarSeparator orientation='horizontal' />
-                            <ToolbarButton icon='pi pi-cog' title='Settings' tooltipPosition='bottom' />
+                            <ToolbarButton icon={<ToolGlyph name='cog' />} title='Settings' tooltipPosition='bottom' />
                         </Toolbar>
 
                         {assetToolsEnabled && (
@@ -846,9 +850,9 @@ export const LayoutWithSmoothEditorTransitions: Story = {
             const canvasTools = useMemo(
                 () => (
                     <ToolbarGroup orientation='horizontal'>
-                        <ToolbarButton icon='pi pi-pencil' title='Draw' tooltipPosition='bottom' />
-                        <ToolbarButton icon='pi pi-stop' title='Rectangle' tooltipPosition='bottom' />
-                        <ToolbarButton icon='pi pi-circle' title='Circle' tooltipPosition='bottom' />
+                        <ToolbarButton icon={<ToolGlyph name='pencil' />} title='Draw' tooltipPosition='bottom' />
+                        <ToolbarButton icon={<ToolGlyph name='stop' />} title='Rectangle' tooltipPosition='bottom' />
+                        <ToolbarButton icon={<ToolGlyph name='circle' />} title='Circle' tooltipPosition='bottom' />
                     </ToolbarGroup>
                 ),
                 []
@@ -857,9 +861,9 @@ export const LayoutWithSmoothEditorTransitions: Story = {
             const textTools = useMemo(
                 () => (
                     <ToolbarGroup orientation='horizontal'>
-                        <ToolbarButton icon='pi pi-align-left' title='Align Left' tooltipPosition='bottom' />
-                        <ToolbarButton icon='pi pi-bold' title='Bold' tooltipPosition='bottom' />
-                        <ToolbarButton icon='pi pi-underline' title='Underline' tooltipPosition='bottom' />
+                        <ToolbarButton icon={<ToolGlyph name='align-left' />} title='Align Left' tooltipPosition='bottom' />
+                        <ToolbarButton icon={<ToolGlyph name='bold' />} title='Bold' tooltipPosition='bottom' />
+                        <ToolbarButton icon={<ToolGlyph name='underline' />} title='Underline' tooltipPosition='bottom' />
                     </ToolbarGroup>
                 ),
                 []
@@ -869,12 +873,12 @@ export const LayoutWithSmoothEditorTransitions: Story = {
                 () => (
                     <>
                         <ToolbarGroup orientation='horizontal'>
-                            <ToolbarButton icon='pi pi-table' title='Add Table' tooltipPosition='bottom' />
-                            <ToolbarButton icon='pi pi-link' title='Relationship' tooltipPosition='bottom' />
+                            <ToolbarButton icon={<ToolGlyph name='table' />} title='Add Table' tooltipPosition='bottom' />
+                            <ToolbarButton icon={<ToolGlyph name='link' />} title='Relationship' tooltipPosition='bottom' />
                         </ToolbarGroup>
                         <ToolbarSeparator orientation='horizontal' />
                         <ToolbarGroup orientation='horizontal'>
-                            <ToolbarButton icon='pi pi-check-square' title='Validate Schema' tooltipPosition='bottom' />
+                            <ToolbarButton icon={<ToolGlyph name='check-square' />} title='Validate Schema' tooltipPosition='bottom' />
                         </ToolbarGroup>
                     </>
                 ),
@@ -891,15 +895,15 @@ export const LayoutWithSmoothEditorTransitions: Story = {
                 <ToolbarSlotProvider>
                     <div className='flex flex-col items-center gap-6'>
                         <Toolbar orientation='horizontal'>
-                            <ToolbarButton icon='pi pi-home' title='Workspace Home' tooltipPosition='bottom' />
+                            <ToolbarButton icon={<ToolGlyph name='home' />} title='Workspace Home' tooltipPosition='bottom' />
                             <ToolbarSeparator orientation='horizontal' />
                             <ToolbarLayout name='active-editor-tools' orientation='horizontal'>
                                 <ToolbarGroup orientation='horizontal'>
-                                    <ToolbarButton icon='pi pi-folder-open' title='Open' tooltipPosition='bottom' />
+                                    <ToolbarButton icon={<ToolGlyph name='folder-open' />} title='Open' tooltipPosition='bottom' />
                                 </ToolbarGroup>
                             </ToolbarLayout>
                             <ToolbarSeparator orientation='horizontal' />
-                            <ToolbarButton icon='pi pi-history' title='History' tooltipPosition='bottom' />
+                            <ToolbarButton icon={<ToolGlyph name='history' />} title='History' tooltipPosition='bottom' />
                         </Toolbar>
 
                         <ToolbarSlot slotName='active-editor-tools' order={0}>
@@ -946,8 +950,8 @@ export const LayoutWithGlobalAndEditorRegions: Story = {
             const globalActions = useMemo(
                 () => (
                     <ToolbarGroup orientation='horizontal'>
-                        <ToolbarButton icon='pi pi-save' title='Save Workspace' tooltipPosition='bottom' />
-                        <ToolbarButton icon='pi pi-share-alt' title='Share' tooltipPosition='bottom' />
+                        <ToolbarButton icon={<ToolGlyph name='save' />} title='Save Workspace' tooltipPosition='bottom' />
+                        <ToolbarButton icon={<ToolGlyph name='share-alt' />} title='Share' tooltipPosition='bottom' />
                     </ToolbarGroup>
                 ),
                 []
@@ -956,8 +960,8 @@ export const LayoutWithGlobalAndEditorRegions: Story = {
             const pageEditorTools = useMemo(
                 () => (
                     <ToolbarGroup orientation='horizontal'>
-                        <ToolbarButton icon='pi pi-clone' title='Duplicate Block' tooltipPosition='bottom' />
-                        <ToolbarButton icon='pi pi-palette' title='Theme' tooltipPosition='bottom' />
+                        <ToolbarButton icon={<ToolGlyph name='clone' />} title='Duplicate Block' tooltipPosition='bottom' />
+                        <ToolbarButton icon={<ToolGlyph name='palette' />} title='Theme' tooltipPosition='bottom' />
                     </ToolbarGroup>
                 ),
                 []
@@ -966,9 +970,9 @@ export const LayoutWithGlobalAndEditorRegions: Story = {
             const workflowEditorTools = useMemo(
                 () => (
                     <ToolbarGroup orientation='horizontal'>
-                        <ToolbarButton icon='pi pi-sitemap' title='Add Node' tooltipPosition='bottom' />
-                        <ToolbarButton icon='pi pi-play' title='Run Flow' tooltipPosition='bottom' />
-                        <ToolbarButton icon='pi pi-stopwatch' title='Debug Step' tooltipPosition='bottom' />
+                        <ToolbarButton icon={<ToolGlyph name='sitemap' />} title='Add Node' tooltipPosition='bottom' />
+                        <ToolbarButton icon={<ToolGlyph name='play' />} title='Run Flow' tooltipPosition='bottom' />
+                        <ToolbarButton icon={<ToolGlyph name='stopwatch' />} title='Debug Step' tooltipPosition='bottom' />
                     </ToolbarGroup>
                 ),
                 []
diff --git a/Source/Toolbar/ToolbarGroup.tsx b/Source/Toolbar/ToolbarGroup.tsx
index 451d25cb..e0fd8fb3 100644
--- a/Source/Toolbar/ToolbarGroup.tsx
+++ b/Source/Toolbar/ToolbarGroup.tsx
@@ -143,7 +143,7 @@ export interface ToolbarGroupProps {
  * ```tsx
  * <Toolbar>
  *     <ToolbarGroup slotName="canvas-tools">
- *         <ToolbarButton icon="pi pi-pencil" title="Draw" />
+ *         <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title="Draw" />
  *     </ToolbarGroup>
  * </Toolbar>
  * ```
diff --git a/Source/Toolbar/ToolbarLayout.tsx b/Source/Toolbar/ToolbarLayout.tsx
index f03e4484..020c813c 100644
--- a/Source/Toolbar/ToolbarLayout.tsx
+++ b/Source/Toolbar/ToolbarLayout.tsx
@@ -130,10 +130,10 @@ export interface ToolbarLayoutProps {
  * // Application shell — define the layout region with optional fallback content:
  * <ToolbarSlotProvider>
  *     <Toolbar>
- *         <ToolbarButton icon="pi pi-arrow-up-left" title="Select" />
+ *         <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title="Select" />
  *         <ToolbarLayout name="canvas-tools">
  *             <ToolbarGroup>
- *                 <ToolbarButton icon="pi pi-pencil" title="Draw (default)" />
+ *                 <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title="Draw (default)" />
  *             </ToolbarGroup>
  *         </ToolbarLayout>
  *     </Toolbar>
@@ -145,11 +145,11 @@ export interface ToolbarLayoutProps {
  * const CanvasFeature = () => (
  *     <ToolbarSlot slotName="canvas-tools">
  *         <ToolbarGroup>
- *             <ToolbarButton icon="pi pi-star" title="Feature tool" />
+ *             <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title="Feature tool" />
  *         </ToolbarGroup>
  *         <ToolbarSeparator />
  *         <ToolbarGroup>
- *             <ToolbarButton icon="pi pi-bolt" title="Quick action" />
+ *             <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title="Quick action" />
  *         </ToolbarGroup>
  *     </ToolbarSlot>
  * );
diff --git a/Source/Toolbar/ToolbarSlot.tsx b/Source/Toolbar/ToolbarSlot.tsx
index c1a4d0cb..72866c44 100644
--- a/Source/Toolbar/ToolbarSlot.tsx
+++ b/Source/Toolbar/ToolbarSlot.tsx
@@ -151,7 +151,7 @@ export interface ToolbarSlotProps {
  * ```tsx
  * // In a feature component, inject a button into the 'canvas-tools' slot:
  * <ToolbarSlot slotName="canvas-tools" order={10}>
- *     <ToolbarButton icon="pi pi-star" title="Favorite" />
+ *     <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title="Favorite" />
  * </ToolbarSlot>
  * ```
  */
diff --git a/Source/Toolbar/for_ToolbarButton/when_draggable_is_set/and_button_is_not_draggable.ts b/Source/Toolbar/for_ToolbarButton/when_draggable_is_set/and_button_is_not_draggable.ts
index 46fb965f..bd6d3cb8 100644
--- a/Source/Toolbar/for_ToolbarButton/when_draggable_is_set/and_button_is_not_draggable.ts
+++ b/Source/Toolbar/for_ToolbarButton/when_draggable_is_set/and_button_is_not_draggable.ts
@@ -15,7 +15,7 @@ describe('when ToolbarButton does not have draggable set and is rendered', () =>
 
     beforeEach(() => {
         const element = React.createElement(ToolbarButton, {
-            icon: 'pi pi-pencil',
+            icon: 'product-icons product-pencil',
             title: 'Draw',
         });
         html = renderToStaticMarkup(element);
diff --git a/Source/Toolbar/for_ToolbarButton/when_draggable_is_set/and_button_is_rendered.ts b/Source/Toolbar/for_ToolbarButton/when_draggable_is_set/and_button_is_rendered.ts
index 8acdc998..2c7884b9 100644
--- a/Source/Toolbar/for_ToolbarButton/when_draggable_is_set/and_button_is_rendered.ts
+++ b/Source/Toolbar/for_ToolbarButton/when_draggable_is_set/and_button_is_rendered.ts
@@ -15,7 +15,7 @@ describe('when ToolbarButton has draggable set and is rendered', () => {
 
     beforeEach(() => {
         const element = React.createElement(ToolbarButton, {
-            icon: 'pi pi-pencil',
+            icon: 'product-icons product-pencil',
             title: 'Draw',
             draggable: true,
             data: { tool: 'pencil' },
diff --git a/Source/Toolbar/for_ToolbarButton/when_inherited_draggable_from_toolbar/and_button_is_rendered.ts b/Source/Toolbar/for_ToolbarButton/when_inherited_draggable_from_toolbar/and_button_is_rendered.ts
index 74da7744..ad2be293 100644
--- a/Source/Toolbar/for_ToolbarButton/when_inherited_draggable_from_toolbar/and_button_is_rendered.ts
+++ b/Source/Toolbar/for_ToolbarButton/when_inherited_draggable_from_toolbar/and_button_is_rendered.ts
@@ -19,7 +19,7 @@ describe('when ToolbarButton is inside a draggable Toolbar and is rendered', ()
             Toolbar,
             { draggable: true },
             React.createElement(ToolbarButton, {
-                icon: 'pi pi-pencil',
+                icon: 'product-icons product-pencil',
                 title: 'Draw',
                 data: { tool: 'pencil' },
             }),
diff --git a/Source/Toolbar/for_ToolbarFanOutItem/when_direction_is_set/and_item_is_rendered.ts b/Source/Toolbar/for_ToolbarFanOutItem/when_direction_is_set/and_item_is_rendered.ts
index 261ed32a..a244cf07 100644
--- a/Source/Toolbar/for_ToolbarFanOutItem/when_direction_is_set/and_item_is_rendered.ts
+++ b/Source/Toolbar/for_ToolbarFanOutItem/when_direction_is_set/and_item_is_rendered.ts
@@ -16,7 +16,7 @@ describe('when ToolbarFanOutItem direction is set and item is rendered', () => {
             React.createElement(
                 ToolbarFanOutItem,
                 {
-                    icon: 'pi pi-th-large',
+                    icon: 'product-icons product-th-large',
                     tooltip: 'Shapes',
                     fanOutDirection,
                 },
diff --git a/Source/Toolbar/index.ts b/Source/Toolbar/index.ts
index aaad64f3..6dc79cdc 100644
--- a/Source/Toolbar/index.ts
+++ b/Source/Toolbar/index.ts
@@ -2,9 +2,9 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 export { Toolbar } from './Toolbar';
-export type { ToolbarProps } from './Toolbar';
+export type { ToolbarParts, ToolbarProps } from './Toolbar';
 export { ToolbarButton } from './ToolbarButton';
-export type { ToolbarButtonProps } from './ToolbarButton';
+export type { ToolbarButtonParts, ToolbarButtonProps } from './ToolbarButton';
 export { ToolbarContext } from './ToolbarContext';
 export type { ToolbarContextProps } from './ToolbarContext';
 export { ToolbarGroup } from './ToolbarGroup';
@@ -14,7 +14,7 @@ export type { ToolbarSectionProps } from './ToolbarSection';
 export { ToolbarSeparator } from './ToolbarSeparator';
 export type { ToolbarSeparatorProps } from './ToolbarSeparator';
 export { ToolbarFanOutItem } from './ToolbarFanOutItem';
-export type { ToolbarFanOutItemProps } from './ToolbarFanOutItem';
+export type { ToolbarFanOutItemProps, ToolbarFanOutParts } from './ToolbarFanOutItem';
 export { ToolbarFolder } from './ToolbarFolder';
 export type { ToolbarFolderProps } from './ToolbarFolder';
 export type { ToolbarFolderMode } from './ToolbarFolderContext';
diff --git a/Source/scripts/copy-css.sh b/Source/scripts/copy-css.sh
index 5abe15ed..f8938627 100755
--- a/Source/scripts/copy-css.sh
+++ b/Source/scripts/copy-css.sh
@@ -32,4 +32,9 @@ while IFS= read -r font; do
     echo "Copied $(basename "$font")"
 done
 
+# Patrick Hand is distributed under the SIL Open Font License. Keep its notice beside the
+# packaged font binaries so every redistributed archive carries the required license text.
+cp Canvas/shapes/Note/PatrickHand-OFL.txt dist/esm/PatrickHand-OFL.txt
+echo "Copied PatrickHand-OFL.txt"
+
 echo "Stylesheet layers copied successfully"
diff --git a/Source/scripts/verify-exports.mjs b/Source/scripts/verify-exports.mjs
index 77edf30f..13800046 100644
--- a/Source/scripts/verify-exports.mjs
+++ b/Source/scripts/verify-exports.mjs
@@ -104,7 +104,17 @@ function loadInChildProcess(specifier, mode) {
     };
 }
 
-const pkg = JSON.parse(await readFile(packageJsonPath, 'utf8'));
+const readPackageManifest = async () => {
+    try {
+        return JSON.parse(await readFile(packageJsonPath, 'utf8'));
+    } catch (error) {
+        const detail = error instanceof Error ? error.message : String(error);
+        console.error(`Could not read ${packageJsonPath}: ${detail}`);
+        process.exit(1);
+    }
+};
+
+const pkg = await readPackageManifest();
 const exportsMap = pkg.exports ?? {};
 const subpaths = Object.keys(exportsMap);
 
@@ -121,6 +131,15 @@ if (!existsSync(esmRoot)) {
     process.exit(1);
 }
 
+const requiredPackageAssets = ['PatrickHand-OFL.txt'];
+for (const asset of requiredPackageAssets) {
+    const assetPath = path.join(esmRoot, asset);
+    if (!existsSync(assetPath)) {
+        console.error(`Required packaged asset is missing: ${assetPath}`);
+        process.exit(1);
+    }
+}
+
 const modes = [...(checkEsm ? ['import'] : []), ...(checkCjs ? ['require'] : [])];
 const rows = [];
 let failures = 0;
diff --git a/Source/tokens.css b/Source/tokens.css
index 4c01bc1c..6c383fd1 100644
--- a/Source/tokens.css
+++ b/Source/tokens.css
@@ -7,33 +7,33 @@
  * variables directly or map them onto an existing token family.
  */
 :root {
-    --cratis-surface-0: var(--surface-0, #ffffff);
-    --cratis-surface-100: var(--surface-100, #f1f5f9);
-    --cratis-surface-ground: var(--surface-ground, #f8fafc);
-    --cratis-surface-section: var(--surface-section, #f8fafc);
-    --cratis-surface-card: var(--surface-card, #ffffff);
-    --cratis-surface-overlay: var(--surface-overlay, #ffffff);
-    --cratis-surface-hover: var(--surface-hover, #f1f5f9);
-    --cratis-surface-border: var(--surface-border, #e2e8f0);
+    --cratis-surface-0: #ffffff;
+    --cratis-surface-100: #f1f5f9;
+    --cratis-surface-ground: #f8fafc;
+    --cratis-surface-section: #f8fafc;
+    --cratis-surface-card: #ffffff;
+    --cratis-surface-overlay: #ffffff;
+    --cratis-surface-hover: #f1f5f9;
+    --cratis-surface-border: #e2e8f0;
 
-    --cratis-text-color: var(--text-color, #1e293b);
-    --cratis-text-color-secondary: var(--text-color-secondary, #475569);
+    --cratis-text-color: #1e293b;
+    --cratis-text-color-secondary: #475569;
 
-    --cratis-primary-color: var(--primary-color, #3b82f6);
-    --cratis-primary-color-text: var(--primary-color-text, #ffffff);
-    --cratis-primary-300: var(--primary-300, #93c5fd);
-    --cratis-primary-400: var(--primary-400, #60a5fa);
-    --cratis-primary-500: var(--primary-500, #3b82f6);
-    --cratis-primary-600: var(--primary-600, #2563eb);
+    --cratis-primary-color: #3b82f6;
+    --cratis-primary-color-text: #ffffff;
+    --cratis-primary-300: #93c5fd;
+    --cratis-primary-400: #60a5fa;
+    --cratis-primary-500: #3b82f6;
+    --cratis-primary-600: #2563eb;
 
-    --cratis-highlight-bg: var(--highlight-bg, #dbeafe);
-    --cratis-highlight-text-color: var(--highlight-text-color, #1e40af);
+    --cratis-highlight-bg: #dbeafe;
+    --cratis-highlight-text-color: #1e40af;
 
-    --cratis-green-500: var(--green-500, #16a34a);
-    --cratis-orange-500: var(--orange-500, #d97706);
-    --cratis-red-500: var(--red-500, #dc2626);
+    --cratis-green-500: #16a34a;
+    --cratis-orange-500: #d97706;
+    --cratis-red-500: #dc2626;
 
-    --cratis-border-radius: var(--border-radius, 6px);
-    --cratis-focus-ring: var(--focus-ring, 0 0 0 3px rgba(59, 130, 246, 0.35));
-    --cratis-maskbg: var(--maskbg, rgba(15, 23, 42, 0.45));
+    --cratis-border-radius: 6px;
+    --cratis-focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.35);
+    --cratis-maskbg: rgba(15, 23, 42, 0.45);
 }

From e5b8927f8c2f3d67b7626565e7d4369326f67629 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Sun, 23 Aug 2026 22:09:48 +0200
Subject: [PATCH 023/267] Close definitive Components 4 review gaps

Add stable Toolbar composition seams, make hidden tools inert, preserve controlled table selection through loaded-page transforms, enforce busy dialog scopes, make PivotViewer SSR-safe and color-reactive, and complete the Arc, Ada, Studio, and public API guidance.
---
 .github/workflows/javascript-build.yml        |  2 +-
 Documentation/Common/form-element.md          |  7 +-
 Documentation/PivotViewer/configuration.md    | 19 ++--
 Documentation/StepperCommandDialog/index.md   |  2 +-
 Documentation/Styling/pass-through.md         |  7 +-
 Documentation/Toolbar/basic-usage.md          |  3 +-
 Documentation/Toolbar/index.md                | 20 +++-
 Documentation/choosing-a-component.md         |  2 +-
 Documentation/migration.md                    | 19 +++-
 Documentation/ui-foundation.md                |  4 +-
 .../for_CommandDialog/when_not_executing.ts   |  4 +-
 .../when_not_executing.ts                     |  4 +-
 Source/Common/FormElement.tsx                 | 23 +++--
 Source/DataTables/DataTableCore.tsx           | 13 +--
 .../DataTableForObservableQuery.tsx           |  2 +-
 Source/DataTables/DataTableForQuery.tsx       |  2 +-
 .../when_selecting_by_object_reference.tsx    | 44 +++++++--
 Source/Dialogs/Dialog.css                     |  7 ++
 Source/Dialogs/Dialog.tsx                     | 20 +++-
 .../when_busy_dismissal_is_attempted.tsx      | 12 ++-
 .../for_Dialog/when_rendered_with_is_busy.ts  |  9 +-
 Source/Filter/FilterPanel.tsx                 |  2 +
 Source/MIGRATION.md                           |  6 +-
 Source/PivotViewer/PivotViewer.tsx            |  1 +
 Source/PivotViewer/components/PivotCanvas.tsx | 14 ++-
 .../components/PivotViewerMain.tsx            |  4 +
 .../components/pivot/colorResolver.ts         | 25 +++--
 .../when_rendering_on_the_server.tsx          | 35 +++++++
 .../when_semantic_tokens_are_defined.ts       |  4 +-
 Source/PivotViewer/index.ts                   | 12 ++-
 Source/PivotViewer/types.ts                   | 47 +++++----
 Source/Toolbar/ToolbarButton.tsx              |  2 +-
 Source/Toolbar/ToolbarFanOutItem.tsx          |  3 +
 Source/Toolbar/ToolbarFolder.tsx              | 57 +++++++++--
 Source/Toolbar/ToolbarGroup.tsx               | 68 +++++++++++--
 Source/Toolbar/ToolbarLayout.tsx              | 68 +++++++++++--
 Source/Toolbar/ToolbarSection.tsx             | 47 ++++++++-
 Source/Toolbar/ToolbarSeparator.tsx           | 20 +++-
 Source/Toolbar/ToolbarSlot.tsx                |  2 +-
 .../when_rendering_stable_parts.tsx           | 97 +++++++++++++++++++
 .../and_item_is_rendered.ts                   |  5 +
 Source/Toolbar/index.ts                       | 10 +-
 42 files changed, 623 insertions(+), 131 deletions(-)
 create mode 100644 Source/PivotViewer/for_PivotViewer/when_rendering_on_the_server.tsx
 create mode 100644 Source/Toolbar/for_ToolbarComposition/when_rendering_stable_parts.tsx

diff --git a/.github/workflows/javascript-build.yml b/.github/workflows/javascript-build.yml
index a2d51f8a..3a8ad454 100644
--- a/.github/workflows/javascript-build.yml
+++ b/.github/workflows/javascript-build.yml
@@ -81,7 +81,7 @@ jobs:
     # that issue's causes were still open: the bare `primereact/*` directory imports
     # (fixed by the PrimeReact 11 migration) and the CSS side-effect imports rollup
     # externalised via /\.css$/ (fixed by moving component CSS out of the JavaScript
-    # graph and into the `./styles` entry point). Both are resolved as of 3.0.0 - all 24
+    # graph and into the `./styles` entry point). Both are resolved as of 3.0.0; all 25
     # subpaths load cleanly - so `continue-on-error` is gone and this is now a real gate.
     verify-published-exports:
         runs-on: ubuntu-latest
diff --git a/Documentation/Common/form-element.md b/Documentation/Common/form-element.md
index 149b3417..b956a030 100644
--- a/Documentation/Common/form-element.md
+++ b/Documentation/Common/form-element.md
@@ -6,8 +6,11 @@ description: Add a leading icon to an application-owned input.
 `FormElement` places an icon beside ordinary form content using Cratis tokens and structural CSS.
 
 ```tsx
-<FormElement icon={<SearchIcon />}>
-    <input className='cratis-field-input' placeholder='Search' />
+import { FaMagnifyingGlass } from 'react-icons/fa6';
+import { FormElement } from '@cratis/components/Common';
+
+<FormElement icon={<FaMagnifyingGlass aria-hidden='true' />}>
+    <input className='cratis-field-input' aria-label='Search' placeholder='Search' />
 </FormElement>
 ```
 
diff --git a/Documentation/PivotViewer/configuration.md b/Documentation/PivotViewer/configuration.md
index a908566a..5c244ec3 100644
--- a/Documentation/PivotViewer/configuration.md
+++ b/Documentation/PivotViewer/configuration.md
@@ -22,7 +22,7 @@
 
 ## Example Configuration
 
-```typescript
+```tsx
 <PivotViewer
     data={items}
     dimensions={dimensions}
@@ -47,11 +47,12 @@
 
 Customize the color scheme:
 
-```typescript
+```tsx
 const customColors = {
     primaryColor: '#0066cc',     // Primary accent color
     surfaceGround: '#ffffff',    // Main background
-    surfaceCard: '#f5f5f5',      // Card backgrounds
+    surfaceCard: '#f5f5f5',      // Pixi card base and DOM card backgrounds
+    surfaceSection: '#e8e8e8',   // Pixi card secondary surface
     textColor: '#333333',        // Text color
     surfaceBorder: '#e0e0e0'     // Border color
 };
@@ -62,11 +63,13 @@ const customColors = {
 />
 ```
 
+Color props map to semantic `--cratis-*` variables and the Pixi renderer's card palette. Updating `colors` after mount refreshes both surfaces.
+
 ## Loading State
 
 Show a loading indicator while data is being fetched:
 
-```typescript
+```tsx
 const [data, setData] = useState([]);
 const [loading, setLoading] = useState(true);
 
@@ -88,11 +91,13 @@ useEffect(() => {
 
 Customize the message when filters return no results:
 
-```typescript
+```tsx
+import { FaInbox } from 'react-icons/fa6';
+
 <PivotViewer
     emptyContent={
         <div className="empty-state">
-            <i className="pi pi-inbox" style={{ fontSize: '3rem' }} />
+            <FaInbox aria-hidden='true' style={{ fontSize: '3rem' }} />
             <h3>No results found</h3>
             <p>Try adjusting your filters</p>
         </div>
@@ -105,7 +110,7 @@ Customize the message when filters return no results:
 
 Specify which fields should be searchable by passing accessor functions:
 
-```typescript
+```tsx
 <PivotViewer
     searchFields={[item => item.title, item => item.description, item => item.tags, item => item.author]}
     // ... other props
diff --git a/Documentation/StepperCommandDialog/index.md b/Documentation/StepperCommandDialog/index.md
index 8cb9cb56..0b33cb65 100644
--- a/Documentation/StepperCommandDialog/index.md
+++ b/Documentation/StepperCommandDialog/index.md
@@ -123,7 +123,7 @@ function MyComponent() {
 - `start`: Content rendered before the stepper
 - `end`: Content rendered after the stepper
 - `pt`: Cratis-owned HTML attributes for the inner stepper's stable parts
-- `ptOptions`: Pass-through options controlling merge vs. replace for `pt`
+- `ptOptions`: Retained temporarily for source compatibility; ignored because Cratis part attributes always merge
 - `unstyled`: Legacy compatibility flag; ignored
 
 ## Callback Behavior
diff --git a/Documentation/Styling/pass-through.md b/Documentation/Styling/pass-through.md
index 801d8145..321d05ee 100644
--- a/Documentation/Styling/pass-through.md
+++ b/Documentation/Styling/pass-through.md
@@ -37,7 +37,10 @@ They are documented separately because not every DOM part needs a `pt` key, and
 | `StepperParts`                         | `root`, `list`, `step`, `header`, `number`, `title`, `separator`, `panels`, `panel`                                                                                                    | div, ordered list, list item, button, spans, section          |
 | `ToasterPassThrough`                   | `region`, `toast`, `icon`, `content`, `title`, `description`, `close`, `action`                                                                                                        | region/article/divs/spans/buttons                             |
 | `ToolbarParts` / `ToolbarButtonParts`  | toolbar `root`; button `root`, `icon`, `label`                                                                                                                                         | toolbar div and native buttons/spans                          |
-| `ToolbarFanOutParts`                   | `root`, `trigger`, `panel`                                                                                                                                                             | fan-out divs and native trigger                              |
+| `ToolbarGroupParts` / `ToolbarLayoutParts` | `root`, `slot`, `incoming`, `outgoing`                                                                                                                                              | group/layout and transition measurement divs                 |
+| `ToolbarSectionParts`                  | `root`, `context`                                                                                                                                                                      | animated section and named context divs                      |
+| `ToolbarSeparatorParts`                | `root`                                                                                                                                                                                 | native separator div                                         |
+| `ToolbarFolderParts` / `ToolbarFanOutParts` | `root`, `trigger`, `panel`                                                                                                                                                         | composition div, native trigger, and inert collapsed panel   |
 | `ActionMenubar` `pt`                   | the `ButtonParts` keys applied to each action                                                                                                                                          | button and spans                                              |
 | Query table / `DataPage` `paginatorPt` | `TablePaginatorParts`                                                                                                                                                                  | paginator surface                                             |
 | `DataPage` `tablePt`                   | `DataTableParts`                                                                                                                                                                       | table surface                                                 |
@@ -83,7 +86,7 @@ Use the exact kebab-case value in CSS or tests:
 | Command fields | `root`, plus the typed field-specific values listed above (`input`, `textarea`, `box`, `control`, `handle`, `indicator`, `option`, `item`, `remove`, `value`, `star`, `toggle`)                 |
 | Display        | component roots plus `image`, `fallback`, `remove`, `indicator`, `range`, `track`, and labels where applicable                                                                                  |
 | Event timeline | `timeline`, `event`, `separator`, `marker`, `connector`, `content`                                                                                                                              |
-| Toolbar        | `root`, `button`, `icon`, `label`, `fanout-root`, `fanout-trigger`, `fanout-panel`                                                                                                            |
+| Toolbar        | `root`, `button`, `icon`, `label`, `fanout-root`, `fanout-trigger`, `fanout-panel`, `toolbar-group`, `toolbar-separator`, `toolbar-layout`, `toolbar-section`, `toolbar-context`, `toolbar-slot`, `toolbar-slot-incoming`, `toolbar-slot-outgoing`, `toolbar-folder`, `toolbar-folder-trigger`, `toolbar-folder-panel` |
 
 `header-content`, `sort`, and `filter-trigger` are DOM targets but are not `DataTableParts` keys. Customize them with CSS rather than claiming a nonexistent typed key.
 
diff --git a/Documentation/Toolbar/basic-usage.md b/Documentation/Toolbar/basic-usage.md
index 25209d2d..cfd9bce1 100644
--- a/Documentation/Toolbar/basic-usage.md
+++ b/Documentation/Toolbar/basic-usage.md
@@ -17,9 +17,10 @@ function MyToolbar() {
 }
 ```
 
-`ToolbarButton` supports either an icon, text, or both. For text-first controls such as zoom indicators, provide the `text` prop:
+`ToolbarButton` renders `text` when that prop is non-empty; otherwise it renders `icon`. Use `text` for text-first controls such as zoom indicators rather than expecting icon and text to appear together:
 
 ```tsx
+import { useState } from 'react';
 import { Toolbar, ToolbarButton, ToolbarSeparator } from '@cratis/components/Toolbar';
 import { FaCircleQuestion, FaMinus, FaPlus } from 'react-icons/fa6';
 
diff --git a/Documentation/Toolbar/index.md b/Documentation/Toolbar/index.md
index 8c4e220e..63cde424 100644
--- a/Documentation/Toolbar/index.md
+++ b/Documentation/Toolbar/index.md
@@ -9,7 +9,7 @@ Pass React icon nodes or product-owned SVGs for a dependency-free toolbar. Consu
 | Component | Description |
 |---|---|
 | `Toolbar` | Container that groups toolbar buttons into a pill-shaped bar |
-| `ToolbarButton` | Button with optional icon and optional text, including hover tooltip |
+| `ToolbarButton` | Button that renders non-empty `text` or otherwise an `icon`, with a hover tooltip |
 | `ToolbarSeparator` | Visual divider that separates groups of buttons |
 | `ToolbarSection` | Section within a toolbar that animates between named contexts |
 | `ToolbarContext` | Named context (set of buttons) inside a `ToolbarSection` |
@@ -18,4 +18,22 @@ Pass React icon nodes or product-owned SVGs for a dependency-free toolbar. Consu
 | `ToolbarGroup` | Formal logical sub-group of toolbar items with an automatic visual separator between adjacent groups |
 | `ToolbarSlotProvider` | Context provider that enables the slot system — wrap the application root or a feature boundary |
 | `ToolbarSlot` | Renders nothing itself; injects its `children` into the named slot at the given `order` position |
+| `ToolbarLayout` | Named layout boundary that swaps default content for matching slot content |
+
+## Stable composition and measurement parts
+
+Deeply styled products should measure and select Toolbar structure through typed `pt` surfaces and `data-cratis-part`, not implementation class names.
+
+| Component | Type | Stable parts |
+| --- | --- | --- |
+| `Toolbar` | `ToolbarParts` | `root` → `root` |
+| `ToolbarButton` | `ToolbarButtonParts` | `root`, `icon`, `label` |
+| `ToolbarGroup` | `ToolbarGroupParts` | `root` → `toolbar-group`; `slot`, `incoming`, `outgoing` |
+| `ToolbarSeparator` | `ToolbarSeparatorParts` | `root` → `toolbar-separator` |
+| `ToolbarLayout` | `ToolbarLayoutParts` | `root` → `toolbar-layout`; `slot`, `incoming`, `outgoing` |
+| `ToolbarSection` | `ToolbarSectionParts` | `root` → `toolbar-section`; `context` → `toolbar-context` |
+| `ToolbarFolder` | `ToolbarFolderParts` | `root`, `trigger`, `panel` |
+| `ToolbarFanOutItem` | `ToolbarFanOutParts` | `root`, `trigger`, `panel` |
+
+Slot transitions expose `toolbar-slot`, `toolbar-slot-incoming`, and `toolbar-slot-outgoing`. Contexts expose `data-context-name` and `data-active`; sections and slots expose `data-transitioning`. Folder and fan-out panels expose `data-expanded`. Collapsed/inactive panels and contexts are inert so hidden tools do not remain in keyboard navigation.
 
diff --git a/Documentation/choosing-a-component.md b/Documentation/choosing-a-component.md
index 4fcc479d..9cffc778 100644
--- a/Documentation/choosing-a-component.md
+++ b/Documentation/choosing-a-component.md
@@ -39,7 +39,7 @@ actions.
 
 ## Spatial workspaces
 
-Use [`Canvas`](./Canvas/index.md) for a pan/zoom workspace containing positioned DOM or Pixi items, optional minimap/controls, notes, regions, or collaborative chat shapes. Canvas owns interaction and rendering primitives; the application still owns persistence and behavior through Arc commands, queries, and Chronicle read models.
+Use [`Canvas`](./Canvas/index.md) for a pan/zoom workspace containing positioned DOM or Pixi items, optional minimap/controls, notes, regions, or collaborative chat shapes. Canvas owns interaction and rendering primitives; the application owns persistence and behavior. Arc can provide commands, queries, validation, authorization, and generated bindings on its own. Applications using Arc plus Chronicle can additionally project event streams into read models.
 
 ## Putting it together
 
diff --git a/Documentation/migration.md b/Documentation/migration.md
index ff9bbba6..d676559e 100644
--- a/Documentation/migration.md
+++ b/Documentation/migration.md
@@ -278,13 +278,15 @@ export const AdaComponentsProvider = ({
 
 This preserves Ada's token and theme ownership while removing the circular Ada → Prime preset → Prime variables → Cratis translation.
 
+Ada's custom role filter must migrate in the same change: replace its Prime `FilterMatchMode` import with `DataTableFilterMatchMode`, replace `registerMatcher` with `registerDataTableFilterMatcher`, and store the returned `matchMode` in the role constraint. Built-in mode strings remain behaviorally compatible, but using the Cratis constants removes the renderer type dependency; custom registration never crosses registries automatically.
+
 ### Studio Liquid Glass migration
 
 Studio is the representative deeply customized consumer. Keep `LiquidGlassSurface` and product shaders in Studio; replace renderer types and selectors at the Components boundary:
 
 - Type dialog maps as `DialogParts`: `mask` → `backdrop`, `headerTitle` → `title`, and `closeButton` → `close`.
 - Type stepper maps as `StepperParts`: `nav` → `list`, `panelContainer` → `panels`, `stepperpanel.root` → `step`, `action` → `header`, and `content` → `panel`.
-- `Toolbar`, `ToolbarButton`, and fan-out controls now expose `ToolbarParts`, `ToolbarButtonParts`, and `ToolbarFanOutParts`. Use `pt.root` and documented `data-cratis-part` values rather than treating fixed `.toolbar*` classes as the public contract. Studio may keep its measurement wrapper and glass sibling; the wrapper remains product architecture.
+- Toolbar composition now exposes `ToolbarParts`, `ToolbarButtonParts`, `ToolbarGroupParts`, `ToolbarSeparatorParts`, `ToolbarLayoutParts`, `ToolbarSectionParts`, `ToolbarFolderParts`, and `ToolbarFanOutParts`. Studio's measurement wrapper should identify boundaries through `toolbar-group`, `toolbar-separator`, `toolbar-layout`, `toolbar-section`, `toolbar-context`, and `toolbar-slot*` `data-cratis-part` values. It can keep its glass sibling and measurement algorithm as product architecture without depending on `.toolbar*` implementation classes.
 - For integrated Canvas controls, pass Studio's surface through `controlsGlassSurface` and localized actions through `controlsLabels`. Set `disableControlsGlass` only when Studio intentionally wants the low-cost CSS fallback.
 - Preserve `data-cratis-part` and product-owned `LAYER_ATTR` attributes through part props so capture exclusion remains explicit.
 
@@ -372,10 +374,22 @@ import { Tooltip } from '@cratis/components/Common';
 - Table styling uses `DataTableParts` and `data-cratis-part`.
 - Server totals remain authoritative for the paginator.
 
-Direct Prime `FilterMatchMode` values and `FilterService.register()` / `registerMatcher()` calls do **not** populate the Components registry. Replace both sides together:
+Prime's built-in match-mode **string values** continue to work because Components implements the same common predicates directly. Replace the renderer constants with Cratis constants to remove the type dependency:
+
+| Prime constant | Cratis constant |
+| --- | --- |
+| `FilterMatchMode.STARTS_WITH` | `DataTableFilterMatchMode.StartsWith` |
+| `FilterMatchMode.CONTAINS` | `DataTableFilterMatchMode.Contains` |
+| `FilterMatchMode.EQUALS` | `DataTableFilterMatchMode.Equals` |
+| `FilterMatchMode.IN` | `DataTableFilterMatchMode.In` |
+| `FilterMatchMode.DATE_BEFORE` | `DataTableFilterMatchMode.DateBefore` |
+| `FilterMatchMode.DATE_AFTER` | `DataTableFilterMatchMode.DateAfter` |
+
+Custom matcher registration is different: Prime `FilterService.register()` or an application helper around it does **not** populate the Components registry. Replace the registration and the constraint together:
 
 ```ts
 import {
+    DataTableFilterMatchMode,
     registerDataTableFilterMatcher,
     type DataTableFilterMeta,
 } from '@cratis/components/DataTables';
@@ -389,6 +403,7 @@ const roleMatcher = registerDataTableFilterMatcher(
 );
 
 const filters: DataTableFilterMeta = {
+    name: { value: 'Ada', matchMode: DataTableFilterMatchMode.Contains },
     role: { value: 'admin', matchMode: roleMatcher.matchMode },
 };
 
diff --git a/Documentation/ui-foundation.md b/Documentation/ui-foundation.md
index 98321a54..ccb4f86d 100644
--- a/Documentation/ui-foundation.md
+++ b/Documentation/ui-foundation.md
@@ -44,7 +44,9 @@ The React Aria Components Toast API remains unstable, so Components 4 ships its
 
 ## Table architecture
 
-Components 4 uses semantic HTML and Cratis-owned table state. Arc remains authoritative for server paging. Client filtering and sorting operate only on the loaded page. Complete-result filtering and sorting require consumer-defined query arguments and server query logic that applies them before paging; Components does not automatically forward table state to the server.
+Components 4 uses semantic React HTML and Cratis-owned table state. `DataTableCore` is a rendered React component, not a headless or framework-neutral table engine. Arc remains authoritative for server paging. Client filtering and sorting operate only on the loaded page. Complete-result filtering and sorting require consumer-defined query arguments and server query logic that applies them before paging; Components does not automatically forward table state to the server.
+
+The reusable cross-framework seam today is Arc's generated query/transport contract and explicit paging/query arguments—not Components' React table state. [Issue #109](https://github.com/Cratis/Components/issues/109) tracks a possible headless Arc React query/table binding. It should be designed in Arc React, separately from visual policy, and only after real consumer implementations establish the required sorting, filtering, selection, and observable-query state. A future Vue or Svelte binding would build framework-native state over the same Arc transport contract rather than reuse `DataTableCore`.
 
 [TanStack Table](https://tanstack.com/table/latest/docs/overview) was evaluated but is not a Components 4 dependency. It remains a possible future implementation tool if advanced grouping, pinning, faceting, or sizing creates enough state complexity to justify it. Adopting it would not change the Cratis public contract.
 
diff --git a/Source/CommandDialog/for_CommandDialog/when_not_executing.ts b/Source/CommandDialog/for_CommandDialog/when_not_executing.ts
index 48e95045..19a16dd7 100644
--- a/Source/CommandDialog/for_CommandDialog/when_not_executing.ts
+++ b/Source/CommandDialog/for_CommandDialog/when_not_executing.ts
@@ -36,6 +36,7 @@ describe('when CommandDialog is in its initial state', () => {
 
     beforeEach(() => {
         const element = React.createElement(CommandDialog, {
+            // SAFETY: The test command implements the runtime command constructor contract.
             command: TestCommand as unknown as new () => object,
             visible: true,
             title: 'Test Dialog',
@@ -44,7 +45,6 @@ describe('when CommandDialog is in its initial state', () => {
     });
 
     it('should_not_have_buttons_disabled_due_to_busy', () => {
-        // A busy dialog swaps the confirm icon for a spinner; a non-busy dialog shows none.
-        html.should.not.include('pi-spinner');
+        html.should.not.include('cratis-dialog__spinner');
     });
 });
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_not_executing.ts b/Source/CommandDialog/for_StepperCommandDialog/when_not_executing.ts
index 909475c7..3a0af090 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_not_executing.ts
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_not_executing.ts
@@ -51,7 +51,7 @@ describe('when StepperCommandDialog is in its initial state', () => {
             StepperCommandDialog<TestCommand>,
             {
                 // SAFETY: The test command implements the runtime command constructor contract.
-        command: TestCommand as unknown as new () => object,
+                command: TestCommand as unknown as new () => object,
                 visible: true,
                 title: 'Test Stepper Dialog',
             },
@@ -62,7 +62,7 @@ describe('when StepperCommandDialog is in its initial state', () => {
     });
 
     it('should_not_have_buttons_in_a_busy_state', () => {
-        html.should.not.include('pi-spinner');
+        html.should.not.include('cratis-dialog__spinner');
     });
 
     it('should_not_show_previous_button_on_first_step', () => {
diff --git a/Source/Common/FormElement.tsx b/Source/Common/FormElement.tsx
index f45b0be8..0a12037d 100644
--- a/Source/Common/FormElement.tsx
+++ b/Source/Common/FormElement.tsx
@@ -22,13 +22,22 @@ export interface FormElementProps {
  * it to give input fields a leading icon without pulling in a renderer-specific input-group abstraction.
  *
  * ```tsx
- * <FormElement icon={<FaUser />}>
- *     <input
- *         className='cratis-field-input'
- *         value={name}
- *         onChange={(event) => setName(event.currentTarget.value)}
- *     />
- * </FormElement>
+ * import { useState } from 'react';
+ * import { FaUser } from 'react-icons/fa6';
+ * import { FormElement } from '@cratis/components/Common';
+ *
+ * function NameField() {
+ *     const [name, setName] = useState('');
+ *     return (
+ *         <FormElement icon={<FaUser aria-hidden='true' />}>
+ *             <input
+ *                 className='cratis-field-input'
+ *                 value={name}
+ *                 onChange={(event) => setName(event.currentTarget.value)}
+ *             />
+ *         </FormElement>
+ *     );
+ * }
  * ```
  */
 export const FormElement = (props: FormElementProps) => {
diff --git a/Source/DataTables/DataTableCore.tsx b/Source/DataTables/DataTableCore.tsx
index a6456a66..668d43b0 100644
--- a/Source/DataTables/DataTableCore.tsx
+++ b/Source/DataTables/DataTableCore.tsx
@@ -320,17 +320,18 @@ export const DataTableCore = <TData extends object>({
         }
     };
 
-    const keyOf = (row: TData, index: number) =>
+    const loadedPageKeyByRow = useMemo(
+        () => new Map(data.map((row, index) => [row, String(index)])),
+        [data],
+    );
+    const keyOf = (row: TData, filteredIndex: number) =>
         dataKey
             ? String(valueAtPath(row as Record<string, unknown>, dataKey))
-            : String(index);
+            : (loadedPageKeyByRow.get(row) ?? `filtered-${filteredIndex}`);
     const selectedKey = selection
         ? dataKey
             ? String(valueAtPath(selection as Record<string, unknown>, dataKey))
-            : (() => {
-                  const selectedIndex = data.indexOf(selection);
-                  return selectedIndex >= 0 ? String(selectedIndex) : undefined;
-              })()
+            : loadedPageKeyByRow.get(selection)
         : undefined;
 
     return (
diff --git a/Source/DataTables/DataTableForObservableQuery.tsx b/Source/DataTables/DataTableForObservableQuery.tsx
index 65c1da1c..212c9ff1 100644
--- a/Source/DataTables/DataTableForObservableQuery.tsx
+++ b/Source/DataTables/DataTableForObservableQuery.tsx
@@ -120,7 +120,7 @@ const paging = new Paging(0, 20);
  * A paged data table bound to a real-time Cratis Arc observable query
  * (`IObservableQueryFor<TDataType, TArguments>`). Subscribes via
  * `useObservableQueryWithPaging`, so the table re-renders automatically as the
- * underlying read model changes server-side. Rows render through the headless
+ * underlying read model changes server-side. Rows render through the semantic Cratis-owned
  * {@link DataTableCore} inside an internally-scrolling region that resizes to
  * fill its container.
  *
diff --git a/Source/DataTables/DataTableForQuery.tsx b/Source/DataTables/DataTableForQuery.tsx
index 08a58f53..f039d7f4 100644
--- a/Source/DataTables/DataTableForQuery.tsx
+++ b/Source/DataTables/DataTableForQuery.tsx
@@ -118,7 +118,7 @@ const paging = new Paging(0, 20);
  * A paged data table bound to a snapshot Cratis Arc query
  * (`IQueryFor<TDataType, TArguments>`). Subscribes via
  * `useQueryWithPaging` from `@cratis/arc.react/queries`, renders the result
- * page through the headless {@link DataTableCore}, and shows a
+ * page through the semantic Cratis-owned {@link DataTableCore}, and shows a
  * {@link TablePaginator} when the result set exceeds one page.
  *
  * ## What `TQuery` is
diff --git a/Source/DataTables/for_DataTableCore/when_selecting_by_object_reference.tsx b/Source/DataTables/for_DataTableCore/when_selecting_by_object_reference.tsx
index 9b5d46cd..82486b5e 100644
--- a/Source/DataTables/for_DataTableCore/when_selecting_by_object_reference.tsx
+++ b/Source/DataTables/for_DataTableCore/when_selecting_by_object_reference.tsx
@@ -11,7 +11,7 @@ import { Column } from '../Column';
 import { DataTableCore } from '../DataTableCore';
 
 describe('when selecting by object reference', () => {
-    const selected = { name: 'Ada' };
+    const selected = { name: 'Grace' };
     let container: HTMLDivElement;
     let root: Root;
 
@@ -25,12 +25,13 @@ describe('when selecting by object reference', () => {
         await act(async () => {
             root.render(
                 <DataTableCore
-                    data={[selected, { name: 'Grace' }]}
+                    data={[selected, { name: 'Ada' }]}
                     emptyMessage='No people'
                     selectionMode='single'
                     selection={selected}
+                    globalFilterFields={['name']}
                 >
-                    <Column field='name' header='Name' />
+                    <Column field='name' header='Name' sortable />
                 </DataTableCore>,
             );
         });
@@ -41,11 +42,38 @@ describe('when selecting by object reference', () => {
         container.remove();
     });
 
+    const selectedRow = () =>
+        Array.from(container.querySelectorAll('[data-cratis-part="row"]')).find(
+            (row) => row.textContent?.includes('Grace'),
+        );
+
     it('should mark the referenced row selected without a data key', () => {
-        expect(
-            container.querySelector('[data-cratis-part="row"]')?.getAttribute(
-                'aria-selected',
-            ),
-        ).to.equal('true');
+        expect(selectedRow()?.getAttribute('aria-selected')).to.equal('true');
+    });
+
+    it('should_preserve_selection_after_loaded_page_search', async () => {
+        const search = container.querySelector<HTMLInputElement>(
+            '[data-cratis-part="search-input"]',
+        )!;
+        await act(async () => {
+            const setValue = Object.getOwnPropertyDescriptor(
+                HTMLInputElement.prototype,
+                'value',
+            )!.set!;
+            setValue.call(search, 'Grace');
+            search.dispatchEvent(new Event('input', { bubbles: true }));
+        });
+
+        expect(container.querySelectorAll('[data-cratis-part="row"]')).to.have.length(1);
+        expect(selectedRow()?.getAttribute('aria-selected')).to.equal('true');
+    });
+
+    it('should_preserve_selection_after_loaded_page_sorting', async () => {
+        const sort = container.querySelector<HTMLButtonElement>(
+            '[data-cratis-part="sort"]',
+        )!;
+        await act(async () => sort.click());
+
+        expect(selectedRow()?.getAttribute('aria-selected')).to.equal('true');
     });
 });
diff --git a/Source/Dialogs/Dialog.css b/Source/Dialogs/Dialog.css
index 1d2aa26d..063c3042 100644
--- a/Source/Dialogs/Dialog.css
+++ b/Source/Dialogs/Dialog.css
@@ -91,6 +91,13 @@
     overflow: auto;
     flex: 1 1 auto;
 }
+.cratis-dialog__busy-scope {
+    display: contents;
+    min-inline-size: 0;
+    padding: 0;
+    margin: 0;
+    border: 0;
+}
 .cratis-dialog__footer {
     display: flex;
     padding: 0.9rem 1.25rem;
diff --git a/Source/Dialogs/Dialog.tsx b/Source/Dialogs/Dialog.tsx
index 5da19156..553bc70e 100644
--- a/Source/Dialogs/Dialog.tsx
+++ b/Source/Dialogs/Dialog.tsx
@@ -348,7 +348,15 @@ export const Dialog = ({
                     style={{ ...pt?.content?.style, ...contentStyle }}
                     data-cratis-part='content'
                 >
-                    {children}
+                    <fieldset
+                        className='cratis-dialog__busy-scope'
+                        data-cratis-part='busy-scope'
+                        disabled={isBusy}
+                        inert={isBusy}
+                        aria-busy={isBusy || undefined}
+                    >
+                        {children}
+                    </fieldset>
                 </div>
                 {buttons !== null && (
                     <footer
@@ -360,7 +368,15 @@ export const Dialog = ({
                         style={pt?.footer?.style}
                         data-cratis-part='footer'
                     >
-                        {predefinedFooter()}
+                        <fieldset
+                            className='cratis-dialog__busy-scope cratis-dialog__busy-scope--footer'
+                            data-cratis-part='busy-scope'
+                            disabled={isBusy}
+                            inert={isBusy}
+                            aria-busy={isBusy || undefined}
+                        >
+                            {predefinedFooter()}
+                        </fieldset>
                     </footer>
                 )}
             </>
diff --git a/Source/Dialogs/for_Dialog/when_busy_dismissal_is_attempted.tsx b/Source/Dialogs/for_Dialog/when_busy_dismissal_is_attempted.tsx
index 3ef2fcf6..92b0f9e5 100644
--- a/Source/Dialogs/for_Dialog/when_busy_dismissal_is_attempted.tsx
+++ b/Source/Dialogs/for_Dialog/when_busy_dismissal_is_attempted.tsx
@@ -20,8 +20,14 @@ describe('when busy dismissal is attempted', () => {
     beforeEach(async () => {
         onCancel.mockReset();
         dialog = await render(
-            <Dialog title='Saving' isBusy dismissable onCancel={onCancel}>
-                Saving changes
+            <Dialog
+                title='Saving'
+                isBusy
+                dismissable
+                onCancel={onCancel}
+                buttons={<button type='button'>Custom footer action</button>}
+            >
+                <button type='button'>Content action</button>
             </Dialog>,
         );
     });
@@ -33,7 +39,7 @@ describe('when busy dismissal is attempted', () => {
     it('should keep every dialog action disabled', () => {
         const buttons = Array.from(document.querySelectorAll('button'));
         expect(buttons.length).to.be.greaterThan(0);
-        expect(buttons.every((button) => button.disabled)).to.equal(true);
+        expect(buttons.every((button) => button.matches(':disabled'))).to.equal(true);
     });
 
     it('should ignore escape while work is in flight', async () => {
diff --git a/Source/Dialogs/for_Dialog/when_rendered_with_is_busy.ts b/Source/Dialogs/for_Dialog/when_rendered_with_is_busy.ts
index fdfe4f4e..edaf6117 100644
--- a/Source/Dialogs/for_Dialog/when_rendered_with_is_busy.ts
+++ b/Source/Dialogs/for_Dialog/when_rendered_with_is_busy.ts
@@ -29,8 +29,13 @@ describe('when rendered with is busy', () => {
     });
 
     it('should disable footer and header dismissal buttons', () => {
-        const disabledCount = (html.match(/disabled=""/g) || []).length;
-        expect(disabledCount).to.equal(3);
+        const disabledButtons = html.match(/<button[^>]*disabled=""/g) ?? [];
+        expect(disabledButtons).to.have.length(3);
+    });
+
+    it('should disable content and footer custom-action scopes', () => {
+        const disabledScopes = html.match(/<fieldset[^>]*disabled=""/g) ?? [];
+        expect(disabledScopes).to.have.length(2);
     });
 });
 
diff --git a/Source/Filter/FilterPanel.tsx b/Source/Filter/FilterPanel.tsx
index 8887017b..0ca7ee64 100644
--- a/Source/Filter/FilterPanel.tsx
+++ b/Source/Filter/FilterPanel.tsx
@@ -204,6 +204,8 @@ export function FilterPanel({
     };
   }, [isOpen, anchorRef, onClose]);
 
+  if (typeof document === 'undefined') return null;
+
   return createPortal(
     <AnimatePresence initial={false}>
       {isOpen && (
diff --git a/Source/MIGRATION.md b/Source/MIGRATION.md
index 8e83bb66..de37e27d 100644
--- a/Source/MIGRATION.md
+++ b/Source/MIGRATION.md
@@ -224,9 +224,9 @@ The old `stepperpanel.header` wrapper has no one-to-one element. Put list-item l
 
 ### Representative downstream migrations
 
-For an Ada-style design system, remove `styledMode`, `AdaPreset`, Prime locale types, and the PrimeUI license from the Components provider. Keep `--ada-*` as the canonical tokens and map them directly to `--cratis-*`. If the product still imports Prime directly, retain a separate Prime provider, preset, dependencies, and license until those imports are removed.
+For an Ada-style design system, remove `styledMode`, `AdaPreset`, Prime locale types, and the PrimeUI license from the Components provider. Keep `--ada-*` as the canonical tokens and map them directly to `--cratis-*`. If the product still imports Prime directly, retain a separate Prime provider, preset, dependencies, and license until those imports are removed. Migrate Ada's role filter from `registerMatcher` to `registerDataTableFilterMatcher` and use the returned `matchMode` in its constraint.
 
-For Studio Liquid Glass, replace renderer part types with `DialogParts`, `StepperParts`, `ToolbarParts`, `ToolbarButtonParts`, and `ToolbarFanOutParts`. Keep Studio's shaders and measurement wrappers product-owned. Use stable `pt` / `data-cratis-part` seams, pass the integrated Canvas surface through `controlsGlassSurface`, and localize its actions through `controlsLabels`.
+For Studio Liquid Glass, replace renderer part types with `DialogParts`, `StepperParts`, and the complete Toolbar part family: `ToolbarParts`, `ToolbarButtonParts`, `ToolbarGroupParts`, `ToolbarSeparatorParts`, `ToolbarLayoutParts`, `ToolbarSectionParts`, `ToolbarFolderParts`, and `ToolbarFanOutParts`. Keep Studio's shaders and measurement wrappers product-owned. Measure `toolbar-group`, `toolbar-separator`, `toolbar-layout`, `toolbar-section`, `toolbar-context`, and `toolbar-slot*` `data-cratis-part` boundaries; pass the integrated Canvas surface through `controlsGlassSurface`; and localize its actions through `controlsLabels`.
 
 The published migration guide contains complete Ada provider/token and Studio Dialog/Stepper/Toolbar/Canvas mapping examples.
 
@@ -296,7 +296,7 @@ Multiple selection uses a native multiple-select when filtering is off and an ac
 - Table styling uses `DataTableParts` and `data-cratis-part`.
 - Server totals remain authoritative for the paginator.
 
-Direct Prime `FilterMatchMode` values and `FilterService.register()` / `registerMatcher()` calls do not register behavior in Components. Replace them with `DataTableFilterMatchMode` and `registerDataTableFilterMatcher()`, then use the returned `matchMode` in `DataTableFilterMeta`. Retaining an arbitrary string preserves source compatibility but an unregistered mode deliberately matches nothing.
+Common built-in Prime match-mode string values remain compatible because Components implements those predicates directly; replace the renderer constants with `DataTableFilterMatchMode` to remove the type dependency. Prime `FilterService.register()` / `registerMatcher()` custom registrations do not cross into Components: replace them with `registerDataTableFilterMatcher()` and use the returned `matchMode` in `DataTableFilterMeta`. An unregistered custom mode deliberately matches nothing.
 
 Separate `RadioButtonField` options bound to one property now require the same explicit `name` prop so native arrow-key radio-group navigation works. `RadioGroupField` and `RatingField` generate a shared internal name automatically.
 
diff --git a/Source/PivotViewer/PivotViewer.tsx b/Source/PivotViewer/PivotViewer.tsx
index c20b0bc4..d728597b 100644
--- a/Source/PivotViewer/PivotViewer.tsx
+++ b/Source/PivotViewer/PivotViewer.tsx
@@ -428,6 +428,7 @@ export function PivotViewer<TItem extends object>({
                     isZooming={isZooming}
                     viewMode={viewMode}
                     cardRenderer={cardRenderer}
+                    colorOverrides={colors}
                     detailRenderer={detailRenderer}
                     resolveId={resolveId}
                     emptyContent={emptyContent}
diff --git a/Source/PivotViewer/components/PivotCanvas.tsx b/Source/PivotViewer/components/PivotCanvas.tsx
index 806ddd75..60968685 100644
--- a/Source/PivotViewer/components/PivotCanvas.tsx
+++ b/Source/PivotViewer/components/PivotCanvas.tsx
@@ -5,6 +5,7 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import * as PIXI from 'pixi.js';
 import type { ItemId, LayoutResult, GroupingResult } from '../engine/types';
 import type { ViewMode } from './Toolbar';
+import type { PivotViewerColors } from '../types';
 import { createCssColorResolver, resolveCardColors } from './pivot/colorResolver';
 import { createCardSprite as createCardSpriteExternal, updateCardContent as updateCardContentExternal } from './pivot/sprites';
 import { syncSpritesToViewport } from './pivot/visibility';
@@ -55,6 +56,9 @@ export interface PivotCanvasProps<TItem extends object> {
   /** Card renderer function - returns structured data for display */
   cardRenderer: (item: TItem) => { title: string; labels?: string[]; values?: string[] };
 
+  /** Public color overrides; changes trigger a Pixi color refresh. */
+  colorOverrides?: Partial<PivotViewerColors>;
+
   /** ID resolver */
   resolveId: (item: TItem, index: number) => string | number;
 
@@ -94,6 +98,7 @@ export function PivotCanvas<TItem extends object>({
   onPanEnd,
   viewMode,
   cardRenderer,
+  colorOverrides,
   containerRef,
 }: PivotCanvasProps<TItem>) {
   // Use the containerRef passed from the parent viewport so we append the Pixi
@@ -142,9 +147,10 @@ export function PivotCanvas<TItem extends object>({
   useEffect(() => {
     cardColorsRef.current = resolveCardColors(
       cssColorResolver,
-      parentContainerRef.current ?? document.documentElement,
+      parentContainerRef.current ?? undefined,
     );
-  }, [cssColorResolver, parentContainerRef]);
+    needsRenderRef.current = true;
+  }, [cssColorResolver, parentContainerRef, colorOverrides]);
 
   useEffect(() => {
     // Reset mounted flag
@@ -412,7 +418,7 @@ export function PivotCanvas<TItem extends object>({
     updateGroupBackgroundsExternal(groupsContainerRef.current, parentContainerRef.current, grouping, layout, zoomLevel, cardColorsRef.current, viewMode);
     needsRenderRef.current = true;
     appRef.current?.renderer?.render(appRef.current.stage);
-  }, [grouping, layout, zoomLevel, viewMode, pixiReady]);
+  }, [grouping, layout, zoomLevel, viewMode, pixiReady, colorOverrides]);
 
   // Fade buckets background when switching view modes
   useEffect(() => {
@@ -546,7 +552,7 @@ export function PivotCanvas<TItem extends object>({
       spritesRef,
       isViewTransitionRef,
     });
-  }, [layout, visibleIds, items, cardWidth, cardHeight, pixiReady, zoomLevel, panX, panY, grouping, viewMode]);
+  }, [layout, visibleIds, items, cardWidth, cardHeight, pixiReady, zoomLevel, panX, panY, grouping, viewMode, colorOverrides]);
 
   // Update prevLayoutRef after processing layout changes
   useEffect(() => {
diff --git a/Source/PivotViewer/components/PivotViewerMain.tsx b/Source/PivotViewer/components/PivotViewerMain.tsx
index 6b6e843d..36bcf7ce 100644
--- a/Source/PivotViewer/components/PivotViewerMain.tsx
+++ b/Source/PivotViewer/components/PivotViewerMain.tsx
@@ -5,6 +5,7 @@ import type { ReactNode } from 'react';
 import type { ItemId, LayoutResult, GroupingResult } from '../engine/types';
 import type { ViewMode } from './Toolbar';
 import type { PivotDimensionFilter } from '../hooks/useDimensionState';
+import type { PivotViewerColors } from '../types';
 import { Spinner } from './Spinner';
 import { PivotCanvas } from './PivotCanvas';
 import { AxisLabels } from './AxisLabels';
@@ -28,6 +29,7 @@ export interface PivotViewerMainProps<TItem extends object> {
   isZooming: boolean;
   viewMode: ViewMode;
   cardRenderer: (item: TItem) => { title: string; labels?: string[]; values?: string[] };
+  colorOverrides?: Partial<PivotViewerColors>;
   /** Optional renderer for a custom details panel when a card is selected */
   detailRenderer?: (item: TItem, onClose: () => void) => ReactNode;
   resolveId: (item: TItem, index: number) => ItemId;
@@ -62,6 +64,7 @@ export function PivotViewerMain<TItem extends object>({
   isZooming,
   viewMode,
   cardRenderer,
+  colorOverrides,
   detailRenderer,
   resolveId,
   emptyContent,
@@ -205,6 +208,7 @@ export function PivotViewerMain<TItem extends object>({
               hoveredGroupIndex={hoveredGroupIndex}
               isZooming={isZooming}
               cardRenderer={cardRenderer}
+              colorOverrides={colorOverrides}
               resolveId={resolveId}
               onCardClick={onCardClick}
               onPanStart={onPanStart}
diff --git a/Source/PivotViewer/components/pivot/colorResolver.ts b/Source/PivotViewer/components/pivot/colorResolver.ts
index 949532a3..4cf36af3 100644
--- a/Source/PivotViewer/components/pivot/colorResolver.ts
+++ b/Source/PivotViewer/components/pivot/colorResolver.ts
@@ -4,8 +4,13 @@
 import { DEFAULT_COLORS, type CardColors } from './constants';
 
 export function createCssColorResolver() {
-  const canvas = document.createElement('canvas');
-  const ctx = canvas.getContext('2d');
+  let context: CanvasRenderingContext2D | null | undefined;
+  const getContext = () => {
+    if (context !== undefined) return context;
+    if (typeof document === 'undefined') return null;
+    context = document.createElement('canvas').getContext('2d');
+    return context;
+  };
 
   const parseHex = (val: string): number | null => {
     if (!val.startsWith('#')) return null;
@@ -23,9 +28,8 @@ export function createCssColorResolver() {
   };
 
   return (cssValue: string, fallback: number): number => {
-    if (!ctx) {
-      return fallback;
-    }
+    const ctx = getContext();
+    if (!ctx) return fallback;
     ctx.fillStyle = cssValue.trim();
     const resolved = ctx.fillStyle; // normalized by canvas
     const hex = parseHex(resolved);
@@ -52,15 +56,18 @@ export function createCssColorResolver() {
 
 export function resolveCardColors(
   cssColorResolver: (s: string, f: number) => number,
-  element: Element = document.documentElement,
+  element?: Element,
 ): CardColors {
-  const style = getComputedStyle(element);
+  if (typeof document === 'undefined' || typeof getComputedStyle === 'undefined') {
+    return DEFAULT_COLORS;
+  }
+  const style = getComputedStyle(element ?? document.documentElement);
   const getVar = (name: string, fallback: number) =>
     cssColorResolver(style.getPropertyValue(name) || name, fallback);
 
   return {
-    base: getVar('--cratis-surface-100', DEFAULT_COLORS.base),
-    mid: getVar('--cratis-surface-0', DEFAULT_COLORS.mid),
+    base: getVar('--cratis-surface-card', DEFAULT_COLORS.base),
+    mid: getVar('--cratis-surface-section', DEFAULT_COLORS.mid),
     gradient: getVar('--cratis-surface-ground', DEFAULT_COLORS.gradient),
     border: getVar('--cratis-surface-border', DEFAULT_COLORS.border),
     text: getVar('--cratis-text-color', DEFAULT_COLORS.text),
diff --git a/Source/PivotViewer/for_PivotViewer/when_rendering_on_the_server.tsx b/Source/PivotViewer/for_PivotViewer/when_rendering_on_the_server.tsx
new file mode 100644
index 00000000..e851d0b3
--- /dev/null
+++ b/Source/PivotViewer/for_PivotViewer/when_rendering_on_the_server.tsx
@@ -0,0 +1,35 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { expect } from 'chai';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, it } from 'vitest';
+import { PivotViewer } from '../PivotViewer';
+
+interface Product {
+    id: number;
+    name: string;
+}
+
+describe('when rendering PivotViewer on the server', () => {
+    const render = (colors?: { surfaceCard?: string; surfaceSection?: string }) =>
+        renderToStaticMarkup(
+            <PivotViewer<Product>
+                data={[]}
+                dimensions={[]}
+                cardRenderer={(product) => ({ title: product.name })}
+                colors={colors}
+            />,
+        );
+
+    it('should_render_without_browser_globals', () => {
+        expect(render()).to.contain('pivot-viewer');
+    });
+
+    it('should_map_public_card_colors_to_semantic_tokens', () => {
+        const html = render({ surfaceCard: '#112233', surfaceSection: '#223344' });
+
+        expect(html).to.contain('--cratis-surface-card:#112233');
+        expect(html).to.contain('--cratis-surface-section:#223344');
+    });
+});
diff --git a/Source/PivotViewer/for_resolveCardColors/when_semantic_tokens_are_defined.ts b/Source/PivotViewer/for_resolveCardColors/when_semantic_tokens_are_defined.ts
index 2e33367b..db05976e 100644
--- a/Source/PivotViewer/for_resolveCardColors/when_semantic_tokens_are_defined.ts
+++ b/Source/PivotViewer/for_resolveCardColors/when_semantic_tokens_are_defined.ts
@@ -16,8 +16,8 @@ const parseHex = (value: string, fallback: number) => {
 describe('when semantic PivotViewer color tokens are defined', () => {
     it('should_resolve_them_from_the_viewer_element', () => {
         const element = document.createElement('div');
-        element.style.setProperty('--cratis-surface-100', '#112233');
-        element.style.setProperty('--cratis-surface-0', '#223344');
+        element.style.setProperty('--cratis-surface-card', '#112233');
+        element.style.setProperty('--cratis-surface-section', '#223344');
         element.style.setProperty('--cratis-surface-ground', '#334455');
         element.style.setProperty('--cratis-surface-border', '#445566');
         element.style.setProperty('--cratis-text-color', '#556677');
diff --git a/Source/PivotViewer/index.ts b/Source/PivotViewer/index.ts
index 6338a26a..80a1aeb3 100644
--- a/Source/PivotViewer/index.ts
+++ b/Source/PivotViewer/index.ts
@@ -4,5 +4,15 @@
 import { PivotViewer } from './PivotViewer';
 
 export { PivotViewer, PivotViewer as PivotViewerOptimized };
-export type { PivotViewerProps, PivotDimension, PivotFilter, PivotFilterOption, PivotGroup, PivotPrimitive, PropertyAccessor } from './types';
+export type {
+    PivotViewerProps,
+    PivotViewerColors,
+    PivotDimension,
+    PivotFilter,
+    PivotFilterOption,
+    PivotGroup,
+    PivotPrimitive,
+    PivotPropertyValue,
+    PropertyAccessor,
+} from './types';
 export { getPropertyPath, getValueByPath } from './types';
diff --git a/Source/PivotViewer/types.ts b/Source/PivotViewer/types.ts
index 8e169b30..ce2fd776 100644
--- a/Source/PivotViewer/types.ts
+++ b/Source/PivotViewer/types.ts
@@ -6,10 +6,13 @@ import type { FilterEditorProps } from '../Filter/types';
 
 export type PivotPrimitive = string | number | boolean | Date | null | undefined;
 
+/** Value reachable through a searchable PivotViewer property path. */
+export type PivotPropertyValue = PivotPrimitive | object;
+
 /**
  * Type-safe property accessor for accessing properties, including nested ones
  */
-export type PropertyAccessor<TItem> = (item: TItem) => unknown;
+export type PropertyAccessor<TItem> = (item: TItem) => PivotPropertyValue;
 
 /**
  * Extract property path from a property accessor function
@@ -26,14 +29,15 @@ export function getPropertyPath<TItem>(accessor: PropertyAccessor<TItem>): strin
  * Get the value from an item using a property path string
  * Supports nested properties like "address.city"
  */
-export function getValueByPath<TItem>(item: TItem, path: string): unknown {
+export function getValueByPath<TItem>(item: TItem, path: string): PivotPropertyValue {
     const parts = path.split('.');
-    let value: unknown = item;
+    let value: PivotPropertyValue = item as PivotPropertyValue;
     for (const part of parts) {
-        if (value === null || value === undefined) {
+        if (value === null || value === undefined || typeof value !== 'object') {
             return undefined;
         }
-        value = value[part];
+        // SAFETY: Property paths are consumer-provided runtime keys over the current object.
+        value = (value as Record<string, PivotPropertyValue>)[part];
     }
     return value;
 }
@@ -76,6 +80,23 @@ export interface PivotFilter<TItem extends object> {
   renderEditor?: (props: FilterEditorProps) => ReactNode;
 }
 
+/** Semantic color overrides for DOM and Pixi PivotViewer surfaces. */
+export interface PivotViewerColors {
+  primaryColor: string;
+  primaryColorText: string;
+  primary500: string;
+  surfaceGround: string;
+  surfaceCard: string;
+  surfaceSection: string;
+  surfaceOverlay: string;
+  surfaceBorder: string;
+  textColor: string;
+  textColorSecondary: string;
+  highlightBg: string;
+  maskbg: string;
+  focusRing: string;
+}
+
 export interface PivotViewerProps<TItem extends object> {
   data: TItem[];
   dimensions: PivotDimension<TItem>[];
@@ -94,21 +115,7 @@ export interface PivotViewerProps<TItem extends object> {
    * Optional color overrides mapped to semantic CSS variables.
    * If omitted, values are taken from the global theme (Cratis defaults).
    */
-  colors?: Partial<{
-    primaryColor: string;
-    primaryColorText: string;
-    primary500: string;
-    surfaceGround: string;
-    surfaceCard: string;
-    surfaceSection: string;
-    surfaceOverlay: string;
-    surfaceBorder: string;
-    textColor: string;
-    textColorSecondary: string;
-    highlightBg: string;
-    maskbg: string;
-    focusRing: string;
-  }>;
+  colors?: Partial<PivotViewerColors>;
 }
 
 export type FilterState = Record<string, Set<string>>;
diff --git a/Source/Toolbar/ToolbarButton.tsx b/Source/Toolbar/ToolbarButton.tsx
index cb44ddee..25adfdcf 100644
--- a/Source/Toolbar/ToolbarButton.tsx
+++ b/Source/Toolbar/ToolbarButton.tsx
@@ -27,7 +27,7 @@ export interface ToolbarButtonProps {
     /** React icon node or consumer-owned icon-font class. Components installs no icon font. */
     icon?: Icon;
 
-    /** Optional text to render inside the button (e.g. '120%'). */
+    /** Optional text-first content (for example `120%`); when non-empty it renders instead of {@link icon}. */
     text?: string;
 
     /** Title text shown when the user hovers over the button. */
diff --git a/Source/Toolbar/ToolbarFanOutItem.tsx b/Source/Toolbar/ToolbarFanOutItem.tsx
index c7c243b4..16a66422 100644
--- a/Source/Toolbar/ToolbarFanOutItem.tsx
+++ b/Source/Toolbar/ToolbarFanOutItem.tsx
@@ -151,6 +151,9 @@ export const ToolbarFanOutItem = ({
                 ref={panelRef}
                 className={`toolbar-fanout-panel ${directionClass} ${panelVisibleClass} ${panelSettledClass} ${pt?.panel?.className ?? ''}`}
                 data-cratis-part='fanout-panel'
+                data-expanded={isExpanded || undefined}
+                aria-hidden={!isExpanded}
+                inert={!isExpanded}
                 onTransitionEnd={handleTransitionEnd}
             >
                 {children}
diff --git a/Source/Toolbar/ToolbarFolder.tsx b/Source/Toolbar/ToolbarFolder.tsx
index 533d4650..0646e985 100644
--- a/Source/Toolbar/ToolbarFolder.tsx
+++ b/Source/Toolbar/ToolbarFolder.tsx
@@ -1,7 +1,16 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { Children, ReactNode, useEffect, useMemo, useRef, useState } from 'react';
+import {
+    Children,
+    type ButtonHTMLAttributes,
+    type HTMLAttributes,
+    type ReactNode,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+} from 'react';
 import { IconDisplay } from '../Common/Icon';
 import type { Icon } from '../Common/Icon';
 import { Tooltip } from '../Common/Tooltip';
@@ -9,6 +18,16 @@ import type { TooltipPosition } from '../Common/Tooltip';
 import { ToolbarFolderContext } from './ToolbarFolderContext';
 import type { ToolbarFolderMode } from './ToolbarFolderContext';
 
+/** Stable part attributes for {@link ToolbarFolder}. */
+export interface ToolbarFolderParts {
+    /** Folder composition and measurement root. */
+    root?: HTMLAttributes<HTMLDivElement>;
+    /** Native folder trigger. */
+    trigger?: ButtonHTMLAttributes<HTMLButtonElement>;
+    /** Expanded item panel. */
+    panel?: HTMLAttributes<HTMLDivElement>;
+}
+
 /** Props for the {@link ToolbarFolder} component. */
 export interface ToolbarFolderProps {
     /** The icon to display on the folder trigger button. */
@@ -34,6 +53,12 @@ export interface ToolbarFolderProps {
     /** Maximum number of columns to render before adding more rows (default: 5). Only applies to `grid` mode. */
     maxColumns?: number;
 
+    /** Extra class name for the folder root. */
+    className?: string;
+
+    /** Stable folder attributes. */
+    pt?: ToolbarFolderParts;
+
     /** The toolbar buttons shown when the folder is expanded. */
     children: ReactNode;
 }
@@ -54,6 +79,8 @@ export const ToolbarFolder = ({
     folderDirection = 'right',
     mode = 'grid',
     maxColumns = 5,
+    className,
+    pt,
     children,
 }: ToolbarFolderProps) => {
     const [isExpanded, setIsExpanded] = useState(false);
@@ -96,23 +123,39 @@ export const ToolbarFolder = ({
 
     return (
         <ToolbarFolderContext.Provider value={mode}>
-            <div className='toolbar-folder-item' ref={containerRef}>
+            <div
+                {...pt?.root}
+                className={`toolbar-folder-item ${pt?.root?.className ?? ''} ${className ?? ''}`}
+                data-cratis-part='toolbar-folder'
+                ref={containerRef}
+            >
                 <Tooltip content={title} position={tooltipPosition} disabled={isExpanded}>
                     <button
+                        {...pt?.trigger}
                         type='button'
                         aria-label={title}
                         aria-expanded={isExpanded}
                         onClick={toggleExpanded}
-                        className={`toolbar-button w-10 h-10 flex items-center justify-center rounded-lg cursor-pointer ${activeClass}`}
+                        className={`toolbar-button w-10 h-10 flex items-center justify-center rounded-lg cursor-pointer ${activeClass} ${pt?.trigger?.className ?? ''}`}
+                        data-cratis-part='toolbar-folder-trigger'
                     >
                         <IconDisplay icon={icon} className='text-lg' />
                     </button>
                 </Tooltip>
                 <div
-                    className={`toolbar-folder-panel ${directionClass} ${panelVisibleClass} ${modeClass}`}
-                    style={mode === 'grid' ? {
-                        gridTemplateColumns: `repeat(${columns}, minmax(2.5rem, 2.5rem))`,
-                    } : undefined}
+                    {...pt?.panel}
+                    className={`toolbar-folder-panel ${directionClass} ${panelVisibleClass} ${modeClass} ${pt?.panel?.className ?? ''}`}
+                    style={{
+                        ...pt?.panel?.style,
+                        ...(mode === 'grid' ? {
+                            gridTemplateColumns: `repeat(${columns}, minmax(2.5rem, 2.5rem))`,
+                        } : {}),
+                    }}
+                    data-cratis-part='toolbar-folder-panel'
+                    data-expanded={isExpanded || undefined}
+                    data-mode={mode}
+                    aria-hidden={!isExpanded}
+                    inert={!isExpanded}
                 >
                     {items}
                 </div>
diff --git a/Source/Toolbar/ToolbarGroup.tsx b/Source/Toolbar/ToolbarGroup.tsx
index e0fd8fb3..e66aee94 100644
--- a/Source/Toolbar/ToolbarGroup.tsx
+++ b/Source/Toolbar/ToolbarGroup.tsx
@@ -1,7 +1,15 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { ReactNode, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import {
+    type HTMLAttributes,
+    type ReactNode,
+    useCallback,
+    useEffect,
+    useLayoutEffect,
+    useRef,
+    useState,
+} from 'react';
 import { useToolbarSlot } from './ToolbarSlot';
 
 /** How long the fade-out animation runs (ms). React unmounts exiting content after this. */
@@ -18,7 +26,15 @@ const SLOT_TRANSITION_MS = 220;
  * the opacity animations start one frame before the resize — matching the feel of
  * {@link ToolbarSection} context switching.
  */
-const SlotTransition = ({ slotName, flexClass }: { slotName: string; flexClass: string }) => {
+const SlotTransition = ({
+    slotName,
+    flexClass,
+    pt,
+}: {
+    slotName: string;
+    flexClass: string;
+    pt?: ToolbarGroupParts;
+}) => {
     const liveItems = useToolbarSlot(slotName);
 
     // `current` is the content fading in (or already settled at full opacity).
@@ -91,21 +107,30 @@ const SlotTransition = ({ slotName, flexClass }: { slotName: string; flexClass:
 
     return (
         <div
-            className={`toolbar-slot-section ${transitioningClass}`}
-            style={size ? { width: size.width, height: size.height } : undefined}
+            {...pt?.slot}
+            className={`toolbar-slot-section ${transitioningClass} ${pt?.slot?.className ?? ''}`}
+            style={{ ...pt?.slot?.style, ...(size ? { width: size.width, height: size.height } : {}) }}
+            data-cratis-part='toolbar-slot'
+            data-transitioning={exiting.length > 0 || undefined}
         >
             {/* Incoming content — fades in via @keyframes animation on mount */}
             <div
+                {...pt?.incoming}
                 ref={incomingRef}
-                className={`toolbar-slot-incoming inline-flex ${flexClass} items-center gap-1`}
+                className={`toolbar-slot-incoming inline-flex ${flexClass} items-center gap-1 ${pt?.incoming?.className ?? ''}`}
+                data-cratis-part='toolbar-slot-incoming'
             >
                 {current}
             </div>
             {/* Exiting content — fades out, then React unmounts it after SLOT_TRANSITION_MS */}
             {exiting.length > 0 && (
                 <div
+                    {...pt?.outgoing}
                     key={exitRevision}
-                    className={`toolbar-slot-outgoing inline-flex ${flexClass} items-center gap-1`}
+                    className={`toolbar-slot-outgoing inline-flex ${flexClass} items-center gap-1 ${pt?.outgoing?.className ?? ''}`}
+                    data-cratis-part='toolbar-slot-outgoing'
+                    aria-hidden='true'
+                    inert
                 >
                     {exiting}
                 </div>
@@ -114,6 +139,18 @@ const SlotTransition = ({ slotName, flexClass }: { slotName: string; flexClass:
     );
 };
 
+/** Stable part attributes for {@link ToolbarGroup}. */
+export interface ToolbarGroupParts {
+    /** Group root used as one logical measurement boundary. */
+    root?: HTMLAttributes<HTMLDivElement>;
+    /** Slot-transition boundary rendered when {@link ToolbarGroupProps.slotName} is used. */
+    slot?: HTMLAttributes<HTMLDivElement>;
+    /** Current slot content. */
+    incoming?: HTMLAttributes<HTMLDivElement>;
+    /** Previous slot content while it exits. */
+    outgoing?: HTMLAttributes<HTMLDivElement>;
+}
+
 /** Props for the {@link ToolbarGroup} component. */
 export interface ToolbarGroupProps {
     /** The toolbar items to render inside this group. */
@@ -129,6 +166,9 @@ export interface ToolbarGroupProps {
 
     /** Layout direction of the group, should match the parent {@link Toolbar} (default: `'vertical'`). */
     orientation?: 'vertical' | 'horizontal';
+
+    /** Stable group and slot-transition part attributes. */
+    pt?: ToolbarGroupParts;
 }
 
 /**
@@ -148,13 +188,23 @@ export interface ToolbarGroupProps {
  * </Toolbar>
  * ```
  */
-export const ToolbarGroup = ({ children, slotName, orientation = 'vertical' }: ToolbarGroupProps) => {
+export const ToolbarGroup = ({
+    children,
+    slotName,
+    orientation = 'vertical',
+    pt,
+}: ToolbarGroupProps) => {
     const flexClass = orientation === 'horizontal' ? 'flex-row' : 'flex-col';
 
     return (
-        <div className={`toolbar-group inline-flex ${flexClass} items-center gap-1 p-2 rounded-2xl`}>
+        <div
+            {...pt?.root}
+            className={`toolbar-group inline-flex ${flexClass} items-center gap-1 p-2 rounded-2xl ${pt?.root?.className ?? ''}`}
+            data-cratis-part='toolbar-group'
+            data-orientation={orientation}
+        >
             {children}
-            {slotName && <SlotTransition slotName={slotName} flexClass={flexClass} />}
+            {slotName && <SlotTransition slotName={slotName} flexClass={flexClass} pt={pt} />}
         </div>
     );
 };
diff --git a/Source/Toolbar/ToolbarLayout.tsx b/Source/Toolbar/ToolbarLayout.tsx
index 020c813c..526bad2f 100644
--- a/Source/Toolbar/ToolbarLayout.tsx
+++ b/Source/Toolbar/ToolbarLayout.tsx
@@ -1,7 +1,15 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { Children, ReactNode, useEffect, useMemo, useRef, useState } from 'react';
+import {
+    Children,
+    type HTMLAttributes,
+    type ReactNode,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+} from 'react';
 import { useToolbarSlot } from './ToolbarSlot';
 
 /** How long the fade-out animation runs (ms). React unmounts exiting content after this. */
@@ -13,7 +21,15 @@ const LAYOUT_TRANSITION_MS = 220;
  * - The container resizes smoothly to fit incoming layout content.
  * - Outgoing content fades out while incoming content fades in.
  */
-const LayoutTransition = ({ items, flexClass }: { items: ReactNode[]; flexClass: string }) => {
+const LayoutTransition = ({
+    items,
+    flexClass,
+    pt,
+}: {
+    items: ReactNode[];
+    flexClass: string;
+    pt?: ToolbarLayoutParts;
+}) => {
     const [current, setCurrent] = useState<ReactNode[]>(items);
     const [exiting, setExiting] = useState<ReactNode[]>([]);
     const [exitRevision, setExitRevision] = useState(0);
@@ -69,19 +85,28 @@ const LayoutTransition = ({ items, flexClass }: { items: ReactNode[]; flexClass:
 
     return (
         <div
-            className={`toolbar-slot-section ${transitioningClass}`}
-            style={size ? { width: size.width, height: size.height } : undefined}
+            {...pt?.slot}
+            className={`toolbar-slot-section ${transitioningClass} ${pt?.slot?.className ?? ''}`}
+            style={{ ...pt?.slot?.style, ...(size ? { width: size.width, height: size.height } : {}) }}
+            data-cratis-part='toolbar-slot'
+            data-transitioning={exiting.length > 0 || undefined}
         >
             <div
+                {...pt?.incoming}
                 ref={incomingRef}
-                className={`toolbar-slot-incoming inline-flex ${flexClass} items-center gap-1`}
+                className={`toolbar-slot-incoming inline-flex ${flexClass} items-center gap-1 ${pt?.incoming?.className ?? ''}`}
+                data-cratis-part='toolbar-slot-incoming'
             >
                 {current}
             </div>
             {exiting.length > 0 && (
                 <div
+                    {...pt?.outgoing}
                     key={exitRevision}
-                    className={`toolbar-slot-outgoing inline-flex ${flexClass} items-center gap-1`}
+                    className={`toolbar-slot-outgoing inline-flex ${flexClass} items-center gap-1 ${pt?.outgoing?.className ?? ''}`}
+                    data-cratis-part='toolbar-slot-outgoing'
+                    aria-hidden='true'
+                    inert
                 >
                     {exiting}
                 </div>
@@ -90,6 +115,18 @@ const LayoutTransition = ({ items, flexClass }: { items: ReactNode[]; flexClass:
     );
 };
 
+/** Stable part attributes for {@link ToolbarLayout}. */
+export interface ToolbarLayoutParts {
+    /** Named layout root. */
+    root?: HTMLAttributes<HTMLDivElement>;
+    /** Slot-transition measurement boundary. */
+    slot?: HTMLAttributes<HTMLDivElement>;
+    /** Current layout content. */
+    incoming?: HTMLAttributes<HTMLDivElement>;
+    /** Previous layout content while it exits. */
+    outgoing?: HTMLAttributes<HTMLDivElement>;
+}
+
 /** Props for the {@link ToolbarLayout} component. */
 export interface ToolbarLayoutProps {
     /**
@@ -108,6 +145,8 @@ export interface ToolbarLayoutProps {
     /** Layout direction matching the parent {@link Toolbar} (default: `'vertical'`). */
     orientation?: 'vertical' | 'horizontal';
 
+    /** Stable layout and transition attributes. */
+    pt?: ToolbarLayoutParts;
 }
 
 /**
@@ -155,7 +194,12 @@ export interface ToolbarLayoutProps {
  * );
  * ```
  */
-export const ToolbarLayout = ({ name, children, orientation = 'vertical' }: ToolbarLayoutProps) => {
+export const ToolbarLayout = ({
+    name,
+    children,
+    orientation = 'vertical',
+    pt,
+}: ToolbarLayoutProps) => {
     const slotItems = useToolbarSlot(name);
     const flexClass = orientation === 'horizontal' ? 'flex-row' : 'flex-col';
     const fallbackItems = useMemo(() => Children.toArray(children), [children]);
@@ -164,8 +208,14 @@ export const ToolbarLayout = ({ name, children, orientation = 'vertical' }: Tool
     if (items.length === 0) return null;
 
     return (
-        <div className={`toolbar-layout inline-flex ${flexClass} items-center gap-1`}>
-            <LayoutTransition items={items} flexClass={flexClass} />
+        <div
+            {...pt?.root}
+            className={`toolbar-layout inline-flex ${flexClass} items-center gap-1 ${pt?.root?.className ?? ''}`}
+            data-cratis-part='toolbar-layout'
+            data-layout-name={name}
+            data-orientation={orientation}
+        >
+            <LayoutTransition items={items} flexClass={flexClass} pt={pt} />
         </div>
     );
 };
diff --git a/Source/Toolbar/ToolbarSection.tsx b/Source/Toolbar/ToolbarSection.tsx
index d61d7c15..f7f86756 100644
--- a/Source/Toolbar/ToolbarSection.tsx
+++ b/Source/Toolbar/ToolbarSection.tsx
@@ -1,7 +1,18 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { Children, ReactElement, ReactNode, isValidElement, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import {
+    Children,
+    type HTMLAttributes,
+    type ReactElement,
+    type ReactNode,
+    isValidElement,
+    useCallback,
+    useEffect,
+    useLayoutEffect,
+    useRef,
+    useState,
+} from 'react';
 
 import type { ToolbarContextProps } from './ToolbarContext';
 import { useToolbarSlot } from './ToolbarSlot';
@@ -26,6 +37,14 @@ const ContextRenderer = ({ children, slotName }: { children: ReactNode; slotName
     );
 };
 
+/** Stable part attributes for {@link ToolbarSection}. */
+export interface ToolbarSectionParts {
+    /** Animated section root. */
+    root?: HTMLAttributes<HTMLDivElement>;
+    /** One named context, with active state exposed through data attributes. */
+    context?: HTMLAttributes<HTMLDivElement>;
+}
+
 /** Props for the {@link ToolbarSection} component. */
 export interface ToolbarSectionProps {
     /**
@@ -40,6 +59,9 @@ export interface ToolbarSectionProps {
 
     /** Layout direction matching the parent {@link Toolbar} (default: 'vertical'). */
     orientation?: 'vertical' | 'horizontal';
+
+    /** Stable section and context attributes. */
+    pt?: ToolbarSectionParts;
 }
 
 /**
@@ -53,7 +75,12 @@ export interface ToolbarSectionProps {
  * Contexts are defined by placing {@link ToolbarContext} children inside this section.
  * Switching contexts only affects this section; other sections are unaffected.
  */
-export const ToolbarSection = ({ activeContext, children, orientation = 'vertical' }: ToolbarSectionProps) => {
+export const ToolbarSection = ({
+    activeContext,
+    children,
+    orientation = 'vertical',
+    pt,
+}: ToolbarSectionProps) => {
     const contextRefs = useRef<Record<string, HTMLDivElement | null>>({});
     const resizeObserverRef = useRef<ResizeObserver | null>(null);
     const mutationObserverRef = useRef<MutationObserver | null>(null);
@@ -162,8 +189,12 @@ export const ToolbarSection = ({ activeContext, children, orientation = 'vertica
 
     return (
         <div
-            className={`toolbar-section ${isTransitioning ? 'toolbar-section--transitioning' : ''}`}
-            style={size ? { width: size.width, height: size.height } : undefined}
+            {...pt?.root}
+            className={`toolbar-section ${isTransitioning ? 'toolbar-section--transitioning' : ''} ${pt?.root?.className ?? ''}`}
+            style={{ ...pt?.root?.style, ...(size ? { width: size.width, height: size.height } : {}) }}
+            data-cratis-part='toolbar-section'
+            data-transitioning={isTransitioning || undefined}
+            data-orientation={orientation}
         >
             {contexts.map((child) => {
                 const { name, children: contextChildren, slotName } = child.props as ToolbarContextProps;
@@ -171,11 +202,17 @@ export const ToolbarSection = ({ activeContext, children, orientation = 'vertica
 
                 return (
                     <div
+                        {...pt?.context}
                         key={name}
                         ref={(element) => { contextRefs.current[name] = element; }}
                         className={`toolbar-context inline-flex ${flexClass} items-center gap-1 ${
                             isActive ? 'toolbar-context--active' : 'toolbar-context--inactive'
-                        }`}
+                        } ${pt?.context?.className ?? ''}`}
+                        data-cratis-part='toolbar-context'
+                        data-context-name={name}
+                        data-active={isActive || undefined}
+                        aria-hidden={!isActive}
+                        inert={!isActive}
                     >
                         <ContextRenderer slotName={slotName}>{contextChildren}</ContextRenderer>
                     </div>
diff --git a/Source/Toolbar/ToolbarSeparator.tsx b/Source/Toolbar/ToolbarSeparator.tsx
index 6f78aa67..9ad06ec0 100644
--- a/Source/Toolbar/ToolbarSeparator.tsx
+++ b/Source/Toolbar/ToolbarSeparator.tsx
@@ -1,10 +1,20 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
+import type { HTMLAttributes } from 'react';
+
+/** Stable part attributes for {@link ToolbarSeparator}. */
+export interface ToolbarSeparatorParts {
+    /** Native separator root. */
+    root?: HTMLAttributes<HTMLDivElement>;
+}
+
 /** Props for the {@link ToolbarSeparator} component. */
 export interface ToolbarSeparatorProps {
     /** Layout direction matching the parent {@link Toolbar} (default: 'vertical'). */
     orientation?: 'vertical' | 'horizontal';
+    /** Stable separator attributes. */
+    pt?: ToolbarSeparatorParts;
 }
 
 /**
@@ -13,10 +23,16 @@ export interface ToolbarSeparatorProps {
  * In a vertical toolbar (default) the separator renders as a horizontal rule.
  * In a horizontal toolbar it renders as a vertical rule.
  */
-export const ToolbarSeparator = ({ orientation = 'vertical' }: ToolbarSeparatorProps) => (
+export const ToolbarSeparator = ({
+    orientation = 'vertical',
+    pt,
+}: ToolbarSeparatorProps) => (
     <div
+        {...pt?.root}
         role='separator'
         aria-orientation={orientation === 'horizontal' ? 'vertical' : 'horizontal'}
-        className={orientation === 'horizontal' ? 'toolbar-separator toolbar-separator--in-horizontal' : 'toolbar-separator toolbar-separator--in-vertical'}
+        className={`${orientation === 'horizontal' ? 'toolbar-separator toolbar-separator--in-horizontal' : 'toolbar-separator toolbar-separator--in-vertical'} ${pt?.root?.className ?? ''}`}
+        data-cratis-part='toolbar-separator'
+        data-orientation={orientation}
     />
 );
diff --git a/Source/Toolbar/ToolbarSlot.tsx b/Source/Toolbar/ToolbarSlot.tsx
index 72866c44..2f38696e 100644
--- a/Source/Toolbar/ToolbarSlot.tsx
+++ b/Source/Toolbar/ToolbarSlot.tsx
@@ -115,7 +115,7 @@ export const useToolbarSlot = (slotName: string): ReactNode[] => {
         return registry.subscribe(fn);
     }, [registry]);
     const getSnapshot = useCallback(() => registry?.getSnapshot(slotName) ?? _emptySnapshot, [registry, slotName]);
-    return useSyncExternalStore(subscribe, getSnapshot);
+    return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
 };
 
 /** Props for the {@link ToolbarSlot} component. */
diff --git a/Source/Toolbar/for_ToolbarComposition/when_rendering_stable_parts.tsx b/Source/Toolbar/for_ToolbarComposition/when_rendering_stable_parts.tsx
new file mode 100644
index 00000000..9ad443b0
--- /dev/null
+++ b/Source/Toolbar/for_ToolbarComposition/when_rendering_stable_parts.tsx
@@ -0,0 +1,97 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { expect } from 'chai';
+import { describe, it, vi } from 'vitest';
+import { ToolbarContext } from '../ToolbarContext';
+import { ToolbarFolder } from '../ToolbarFolder';
+import { ToolbarGroup } from '../ToolbarGroup';
+import { ToolbarLayout } from '../ToolbarLayout';
+import { ToolbarSection } from '../ToolbarSection';
+import { ToolbarSeparator } from '../ToolbarSeparator';
+
+vi.mock('../../Common/Tooltip', () => ({
+    Tooltip: ({ children }: { children?: React.ReactNode }) => <>{children}</>,
+}));
+
+describe('when rendering Toolbar composition parts', () => {
+    const html = renderToStaticMarkup(
+        <>
+            <ToolbarGroup pt={{ root: { id: 'group' } }}>
+                Group
+            </ToolbarGroup>
+            <ToolbarSeparator pt={{ root: { id: 'separator' } }} />
+            <ToolbarLayout
+                name='tools'
+                pt={{
+                    root: { id: 'layout' },
+                    slot: { id: 'layout-slot' },
+                    incoming: { id: 'layout-incoming' },
+                }}
+            >
+                Layout
+            </ToolbarLayout>
+            <ToolbarSection
+                activeContext='draw'
+                pt={{
+                    root: { id: 'section' },
+                    context: { title: 'context' },
+                }}
+            >
+                <ToolbarContext name='draw'>Draw</ToolbarContext>
+                <ToolbarContext name='text'>Text</ToolbarContext>
+            </ToolbarSection>
+            <ToolbarFolder
+                icon={<span aria-hidden='true'>F</span>}
+                title='Tools'
+                pt={{
+                    root: { id: 'folder' },
+                    trigger: { id: 'folder-trigger' },
+                    panel: { id: 'folder-panel' },
+                }}
+            >
+                <button type='button'>Nested action</button>
+            </ToolbarFolder>
+        </>,
+    );
+
+    it('should_expose_each_composition_boundary', () => {
+        for (const part of [
+            'toolbar-group',
+            'toolbar-separator',
+            'toolbar-layout',
+            'toolbar-slot',
+            'toolbar-slot-incoming',
+            'toolbar-section',
+            'toolbar-context',
+            'toolbar-folder',
+            'toolbar-folder-trigger',
+            'toolbar-folder-panel',
+        ]) {
+            expect(html).to.contain(`data-cratis-part="${part}"`);
+        }
+    });
+
+    it('should_forward_product_part_attributes', () => {
+        for (const attribute of [
+            'id="group"',
+            'id="separator"',
+            'id="layout"',
+            'id="layout-slot"',
+            'id="layout-incoming"',
+            'id="section"',
+            'title="context"',
+            'id="folder"',
+            'id="folder-trigger"',
+            'id="folder-panel"',
+        ]) {
+            expect(html).to.contain(attribute);
+        }
+    });
+
+    it('should_make_the_collapsed_folder_panel_inert', () => {
+        expect(html).to.match(/data-cratis-part="toolbar-folder-panel"[^>]*aria-hidden="true"[^>]*inert=""/);
+    });
+});
diff --git a/Source/Toolbar/for_ToolbarFanOutItem/when_direction_is_set/and_item_is_rendered.ts b/Source/Toolbar/for_ToolbarFanOutItem/when_direction_is_set/and_item_is_rendered.ts
index a244cf07..2bf7b9a9 100644
--- a/Source/Toolbar/for_ToolbarFanOutItem/when_direction_is_set/and_item_is_rendered.ts
+++ b/Source/Toolbar/for_ToolbarFanOutItem/when_direction_is_set/and_item_is_rendered.ts
@@ -38,4 +38,9 @@ describe('when ToolbarFanOutItem direction is set and item is rendered', () => {
         const html = render('down');
         html.should.include('toolbar-fanout-panel--down');
     });
+
+    it('should_make_the_collapsed_panel_inert', () => {
+        const html = render();
+        html.should.match(/data-cratis-part="fanout-panel"[^>]*aria-hidden="true"[^>]*inert=""/);
+    });
 });
diff --git a/Source/Toolbar/index.ts b/Source/Toolbar/index.ts
index 6dc79cdc..097fd80e 100644
--- a/Source/Toolbar/index.ts
+++ b/Source/Toolbar/index.ts
@@ -8,17 +8,17 @@ export type { ToolbarButtonParts, ToolbarButtonProps } from './ToolbarButton';
 export { ToolbarContext } from './ToolbarContext';
 export type { ToolbarContextProps } from './ToolbarContext';
 export { ToolbarGroup } from './ToolbarGroup';
-export type { ToolbarGroupProps } from './ToolbarGroup';
+export type { ToolbarGroupParts, ToolbarGroupProps } from './ToolbarGroup';
 export { ToolbarSection } from './ToolbarSection';
-export type { ToolbarSectionProps } from './ToolbarSection';
+export type { ToolbarSectionParts, ToolbarSectionProps } from './ToolbarSection';
 export { ToolbarSeparator } from './ToolbarSeparator';
-export type { ToolbarSeparatorProps } from './ToolbarSeparator';
+export type { ToolbarSeparatorParts, ToolbarSeparatorProps } from './ToolbarSeparator';
 export { ToolbarFanOutItem } from './ToolbarFanOutItem';
 export type { ToolbarFanOutItemProps, ToolbarFanOutParts } from './ToolbarFanOutItem';
 export { ToolbarFolder } from './ToolbarFolder';
-export type { ToolbarFolderProps } from './ToolbarFolder';
+export type { ToolbarFolderParts, ToolbarFolderProps } from './ToolbarFolder';
 export type { ToolbarFolderMode } from './ToolbarFolderContext';
 export { ToolbarSlot, ToolbarSlotProvider, useToolbarSlot } from './ToolbarSlot';
 export type { ToolbarSlotProps, ToolbarSlotProviderProps } from './ToolbarSlot';
 export { ToolbarLayout } from './ToolbarLayout';
-export type { ToolbarLayoutProps } from './ToolbarLayout';
+export type { ToolbarLayoutParts, ToolbarLayoutProps } from './ToolbarLayout';

From b7d1b91026006c530d2cb4da4f6836ad201deaf8 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Mon, 24 Aug 2026 00:32:41 +0200
Subject: [PATCH 024/267] Harden Components 4 ecosystem contracts

Align the baseline with familiar Lara-era visuals while improving contrast, isolate prefixed no-Preflight styles, add Storybook accessibility and visual matrices, complete consumer migration guidance, harden overlays/SSR/selection/source maps/licensing, and expose product-owned Canvas and Toolbar seams.
---
 .github/workflows/javascript-build.yml        |   2 +
 Documentation/Canvas/index.md                 | 100 ++-
 Documentation/CommandDialog/index.md          |  12 +-
 Documentation/CommandForm/dropdown-field.md   |  38 +-
 .../CommandForm/multi-select-field.md         |  27 +-
 Documentation/CommandStepper/index.md         |   3 +-
 .../Common/cratis-components-provider.md      |   4 +-
 Documentation/DataTables/index.md             |  18 +-
 Documentation/Dialogs/dialog.md               |   4 +-
 Documentation/PivotViewer/configuration.md    |  49 +-
 Documentation/StepperCommandDialog/index.md   |   3 +-
 Documentation/Styling/baseline-theme.md       |   6 +-
 Documentation/Styling/cratis-tokens.md        |  54 +-
 Documentation/Styling/custom-palette.md       |   8 +
 Documentation/Styling/getting-started.md      |   8 +-
 Documentation/Styling/index.md                |  35 +-
 Documentation/Styling/mixing-paths.md         |   6 +-
 Documentation/Styling/pass-through.md         |  98 +--
 Documentation/Styling/themed.md               |   8 +
 Documentation/Styling/unstyled.md             |   8 +
 Documentation/Toolbar/index.md                |  53 +-
 Documentation/Toolbar/slots.md                |  29 +-
 Documentation/Toolbar/toolbar-layout.md       |  90 ++-
 Documentation/choosing-a-component.md         |  17 +-
 Documentation/coming-from-primereact.md       |  31 +-
 Documentation/getting-started.mdx             |   4 +-
 Documentation/migration.md                    | 140 +++-
 Documentation/storybook.mdx                   |   2 +
 Documentation/ui-foundation.md                |  12 +
 Source/.storybook/foundation.css              |   9 +
 Source/.storybook/main.ts                     |   2 +-
 Source/.storybook/preview.css                 |  24 +-
 Source/.storybook/preview.js                  |   5 +-
 Source/Canvas/Canvas.tsx                      | 423 +++++++----
 Source/Canvas/CanvasControls.tsx              | 154 ++--
 ...ering_capture_attributes_on_the_server.tsx |  35 +
 Source/Canvas/glassAttributes.ts              |  26 -
 Source/Canvas/index.ts                        |  16 +-
 .../CommandDialog/CommandDialog.stories.tsx   |  50 +-
 .../CommandDialog/CommandStepper.stories.tsx  |  16 +-
 .../StepperCommandDialog.stories.tsx          |  36 +-
 Source/CommandForm/fields/ChipsField.tsx      |   2 +-
 Source/CommandForm/fields/DropdownField.tsx   |   2 +-
 Source/CommandForm/fields/Fields.css          |  50 +-
 Source/CommandForm/fields/InputTextField.tsx  |   2 +-
 .../CommandForm/fields/MultiSelectField.tsx   |   2 +-
 Source/CommandForm/fields/NumberField.tsx     |   4 +-
 Source/CommandForm/fields/PasswordField.tsx   |   4 +-
 Source/CommandForm/fields/SliderField.tsx     |   2 +-
 Source/CommandForm/fields/TextAreaField.tsx   |   2 +-
 Source/Common/Button.css                      |  82 ++-
 Source/Common/Button.stories.tsx              |  37 +-
 Source/Common/Button.tsx                      |   4 +-
 Source/Common/CratisComponentsProvider.tsx    |   2 -
 Source/Common/DatePickerInput.css             |  28 +-
 Source/Common/DatePickerInput.stories.tsx     |  61 ++
 Source/Common/ErrorBoundary.stories.tsx       |   8 +-
 Source/Common/ErrorBoundary.tsx               |   4 +-
 Source/Common/FormElement.css                 |   2 +-
 Source/Common/FormElement.stories.tsx         |   6 +-
 Source/Common/FormElement.tsx                 |   2 +-
 Source/Common/Icon.stories.tsx                |   2 +-
 Source/Common/Page.stories.tsx                |   8 +-
 Source/Common/Page.tsx                        |   6 +-
 Source/Common/Tooltip.css                     |   8 +-
 Source/Common/Tooltip.tsx                     |  13 +-
 .../when_rendering_the_default_action.tsx     |  20 +
 Source/DataPage/DataPage.stories.tsx          |  12 +-
 Source/DataPage/DataPage.tsx                  |   6 +-
 Source/DataTables/ColumnFilterMenu.css        |  15 +-
 Source/DataTables/DataTableCore.css           |  22 +-
 Source/DataTables/DataTableCore.stories.tsx   |  63 ++
 Source/DataTables/DataTableCore.tsx           |  92 ++-
 Source/DataTables/DataTableFilterMeta.ts      |   7 +-
 .../DataTableForObservableQuery.stories.tsx   |   8 +-
 .../DataTables/DataTableForQuery.stories.tsx  |  10 +-
 .../when_selecting_by_object_reference.tsx    |  60 +-
 Source/Dialogs/BusyIndicatorDialog.tsx        |   4 +-
 Source/Dialogs/ConfirmationDialog.tsx         |   2 +-
 Source/Dialogs/Dialog.css                     |  35 +-
 Source/Dialogs/Dialog.stories.tsx             |   4 +-
 Source/Dialogs/Dialog.tsx                     |  10 +-
 Source/Display/Display.css                    |  26 +-
 Source/Dropdown/Dropdown.css                  |  22 +-
 Source/Dropdown/Dropdown.stories.tsx          |  74 ++
 Source/Dropdown/Dropdown.tsx                  |  21 +-
 .../when_opened_inside_a_dialog.ts            |  19 +-
 Source/Filter/FilterPanel.tsx                 | 690 ++++++++++--------
 .../when_hydrating_an_open_panel.tsx          |  78 ++
 Source/LICENSE                                |  21 +
 Source/MIGRATION.md                           |  44 +-
 Source/Notifications/Toaster.css              |   7 +-
 .../ObjectContentEditor.stories.tsx           |   6 +-
 .../ObjectContentEditor.tsx                   |  16 +-
 .../ObjectNavigationalBar.tsx                 |   6 +-
 Source/PivotViewer/components/AxisLabels.tsx  |   2 +-
 .../PivotViewer/components/pivot/sprites.ts   | 608 ++++++++-------
 .../when_colors_change.ts                     |  33 +
 Source/README.md                              |  16 +-
 Source/SchemaEditor/NameCell.tsx              |   4 +-
 Source/SchemaEditor/SchemaEditor.tsx          |  14 +-
 Source/SchemaEditor/TypeCell.tsx              |  10 +-
 Source/THIRD_PARTY_NOTICES.md                 |  21 +
 Source/TimeMachine/TimeMachine.css            |  20 +
 Source/TimeMachine/TimeMachine.tsx            |  32 +-
 .../when_rendering_the_timeline.tsx           |  38 +
 Source/TimeMachine/index.ts                   |   1 +
 Source/Toolbar/Toolbar.css                    |  23 +-
 Source/Toolbar/Toolbar.stories.tsx            |  96 +--
 Source/Toolbar/Toolbar.tsx                    |  16 +-
 Source/Toolbar/ToolbarButton.tsx              |  10 +-
 Source/Toolbar/ToolbarFanOutItem.tsx          |  38 +-
 Source/Toolbar/ToolbarFolder.tsx              |  50 +-
 Source/Toolbar/ToolbarGroup.tsx               |   8 +-
 Source/Toolbar/ToolbarLayout.tsx              |   8 +-
 Source/Toolbar/ToolbarSection.tsx             |   4 +-
 .../when_tooltip_is_enabled.tsx               |  34 +
 .../when_rendering_stable_parts.tsx           |  10 +-
 .../when_escape_is_pressed.tsx                |  82 +++
 .../when_scanning_foundation_surfaces.tsx     |  86 +++
 Source/package.json                           |   3 +
 Source/scripts/verify-exports.mjs             | 125 +++-
 Source/scripts/verify-package-archive.mjs     |  65 ++
 Source/tailwind.css                           |  18 +-
 Source/theme.css                              | 166 +++--
 Source/tokens.css                             |  54 +-
 package.json                                  |   2 +
 rollup.config.mjs                             |  37 +-
 128 files changed, 3531 insertions(+), 1611 deletions(-)
 create mode 100644 Source/.storybook/foundation.css
 create mode 100644 Source/Canvas/for_Canvas/when_rendering_capture_attributes_on_the_server.tsx
 delete mode 100644 Source/Canvas/glassAttributes.ts
 create mode 100644 Source/Common/DatePickerInput.stories.tsx
 create mode 100644 Source/Common/for_Button/when_rendering_the_default_action.tsx
 create mode 100644 Source/DataTables/DataTableCore.stories.tsx
 create mode 100644 Source/Dropdown/Dropdown.stories.tsx
 create mode 100644 Source/Filter/for_FilterPanel/when_hydrating_an_open_panel.tsx
 create mode 100644 Source/LICENSE
 create mode 100644 Source/PivotViewer/for_updateCardTextColors/when_colors_change.ts
 create mode 100644 Source/THIRD_PARTY_NOTICES.md
 create mode 100644 Source/TimeMachine/for_TimeMachine/when_rendering_the_timeline.tsx
 create mode 100644 Source/Toolbar/for_ToolbarButton/when_tooltip_is_enabled.tsx
 create mode 100644 Source/Toolbar/for_ToolbarPanels/when_escape_is_pressed.tsx
 create mode 100644 Source/for_accessibility/when_scanning_foundation_surfaces.tsx
 create mode 100644 Source/scripts/verify-package-archive.mjs

diff --git a/.github/workflows/javascript-build.yml b/.github/workflows/javascript-build.yml
index 3a8ad454..f8257514 100644
--- a/.github/workflows/javascript-build.yml
+++ b/.github/workflows/javascript-build.yml
@@ -143,6 +143,7 @@ jobs:
               run: |
                   yarn workspace @cratis/components prepare
                   yarn workspace @cratis/components pack --out /tmp/cratis-components.tgz
+                  yarn workspace @cratis/components verify-package-archive /tmp/cratis-components.tgz
 
             - name: Verify Arc ${{ matrix.arc-version }} rendering consumer
               run: |
@@ -204,6 +205,7 @@ jobs:
               run: |
                   yarn workspace @cratis/components prepare
                   yarn workspace @cratis/components pack --out /tmp/cratis-components.tgz
+                  yarn workspace @cratis/components verify-package-archive /tmp/cratis-components.tgz
 
             - name: Create consumer fixture
               run: |
diff --git a/Documentation/Canvas/index.md b/Documentation/Canvas/index.md
index aeb97918..96205b46 100644
--- a/Documentation/Canvas/index.md
+++ b/Documentation/Canvas/index.md
@@ -12,6 +12,7 @@ import {
     Canvas,
     CanvasItem,
     CanvasOverlay,
+    type CanvasCaptureAttributes,
     type CanvasHandle,
 } from '@cratis/components/Canvas';
 ```
@@ -43,60 +44,83 @@ const handleReady = (handle: CanvasHandle) => {
 
 `T` extends `CanvasItemData` (`id`, `x`, `y`) when the optional Pixi item renderer is used.
 
-| Prop | Type | Default | Meaning |
-| --- | --- | --- | --- |
-| `children` | `ReactNode` | — | DOM canvas content, normally positioned with `CanvasItem`. |
-| `items` | `T[]` | `[]` | Optional Pixi-backed item data. |
-| `renderItem` | `(item: T) => PIXI.Container` | — | Builds one Pixi display object. |
-| `onItemPointerDown` | `(item, event) => void` | — | Receives Pixi item pointer activation. |
-| `onReady` | `(context: CanvasContext) => void` | — | Provides the Pixi `app` and `world` container. |
-| `onTransformChange` | `(zoom, pan) => void` | — | Reports camera changes. |
-| `initialZoom` | `number` | `1` | Initial zoom factor. |
-| `initialPan` | `{ x: number; y: number }` | `{ x: 0, y: 0 }` | Initial viewport translation. |
-| `minZoom` / `maxZoom` | `number` | `0.1` / `5` | Zoom limits. |
-| `showControls` | `boolean` | `true` | Shows zoom controls. |
-| `showMinimap` | `boolean` | `false` | Adds the minimap toggle/control. |
-| `minimapWorldWidth` / `minimapWorldHeight` | `number` | `4000` / `3000` in the minimap | World dimensions represented by the minimap. |
-| `minimapItems` | `MinimapItem[]` | measured items | Explicit minimap rectangles. |
-| `controlsPlacement` | `'bottom-left' \| 'bottom-right'` | `'bottom-left'` | Control-bar edge. |
-| `className` / `style` | standard React values | — | Canvas root customization. |
-| `onHelp` | `() => void` | — | Adds and handles the help action. |
-| `helpTitle` | `string` | provider-independent English fallback | Help action label. |
-| `controlsLabels` | `CanvasControlsLabels` | English fallbacks | Localizes integrated minimap, zoom, reset, and help controls. |
-| `controlsGlassSurface` | `ReactNode` | — | Product-owned glass/acrylic surface rendered behind integrated controls. |
-| `disableControlsGlass` | `boolean` | `false` | Forces the low-cost CSS frosted pill. The same fallback is used automatically when no `controlsGlassSurface` is supplied. |
-| `onHandleReady` | `(handle: CanvasHandle) => void` | — | Provides imperative camera/item-bound operations. |
-| `readOnly` | `boolean` | `false` | Keeps pan/zoom but absorbs content interaction. |
-| `backgroundDragPans` | `boolean` | `true` | Set `false` when the product owns empty-background drag selection. Wheel, middle-button, and touch panning remain available. |
+| Prop                                       | Type                               | Default                               | Meaning                                                                                                                           |
+| ------------------------------------------ | ---------------------------------- | ------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
+| `children`                                 | `ReactNode`                        | —                                     | DOM canvas content, normally positioned with `CanvasItem`.                                                                        |
+| `items`                                    | `T[]`                              | `[]`                                  | Optional Pixi-backed item data.                                                                                                   |
+| `renderItem`                               | `(item: T) => PIXI.Container`      | —                                     | Builds one Pixi display object.                                                                                                   |
+| `onItemPointerDown`                        | `(item, event) => void`            | —                                     | Receives Pixi item pointer activation.                                                                                            |
+| `onReady`                                  | `(context: CanvasContext) => void` | —                                     | Provides the Pixi `app` and `world` container.                                                                                    |
+| `onTransformChange`                        | `(zoom, pan) => void`              | —                                     | Reports camera changes.                                                                                                           |
+| `initialZoom`                              | `number`                           | `1`                                   | Initial zoom factor.                                                                                                              |
+| `initialPan`                               | `{ x: number; y: number }`         | `{ x: 0, y: 0 }`                      | Initial viewport translation.                                                                                                     |
+| `minZoom` / `maxZoom`                      | `number`                           | `0.1` / `5`                           | Zoom limits.                                                                                                                      |
+| `showControls`                             | `boolean`                          | `true`                                | Shows zoom controls.                                                                                                              |
+| `showMinimap`                              | `boolean`                          | `false`                               | Adds the minimap toggle/control.                                                                                                  |
+| `minimapWorldWidth` / `minimapWorldHeight` | `number`                           | `4000` / `3000` in the minimap        | World dimensions represented by the minimap.                                                                                      |
+| `minimapItems`                             | `MinimapItem[]`                    | measured items                        | Explicit minimap rectangles.                                                                                                      |
+| `controlsPlacement`                        | `'bottom-left' \| 'bottom-right'`  | `'bottom-left'`                       | Control-bar edge.                                                                                                                 |
+| `className` / `style`                      | standard React values              | —                                     | Canvas root customization.                                                                                                        |
+| `onHelp`                                   | `() => void`                       | —                                     | Adds and handles the help action.                                                                                                 |
+| `helpTitle`                                | `string`                           | provider-independent English fallback | Help action label.                                                                                                                |
+| `controlsLabels`                           | `CanvasControlsLabels`             | English fallbacks                     | Localizes integrated minimap, zoom, reset, and help controls.                                                                     |
+| `controlsGlassSurface`                     | `ReactNode`                        | —                                     | Product-owned glass/acrylic surface rendered behind integrated controls.                                                          |
+| `disableControlsGlass`                     | `boolean`                          | `false`                               | Forces the low-cost CSS frosted pill. The same fallback is used automatically when no `controlsGlassSurface` is supplied.         |
+| `captureAttributes`                        | `CanvasCaptureAttributes`          | —                                     | Product-owned layer/content/transform-host attribute names for a capture or compositor pipeline. Nothing is hardcoded by default. |
+| `onHandleReady`                            | `(handle: CanvasHandle) => void`   | —                                     | Provides imperative camera/item-bound operations.                                                                                 |
+| `readOnly`                                 | `boolean`                          | `false`                               | Keeps pan/zoom but absorbs content interaction.                                                                                   |
+| `backgroundDragPans`                       | `boolean`                          | `true`                                | Set `false` when the product owns empty-background drag selection. Wheel, middle-button, and touch panning remain available.      |
 
 ### `CanvasHandle`
 
-| Method | Meaning |
-| --- | --- |
-| `smoothPanToWorld(x, y, durationMs?)` | Centers a world point with an animated pan. |
-| `smoothPanZoomToWorld(x, y, zoom?, durationMs?)` | Animates pan and zoom together. |
-| `getContainerRect()` | Returns the current viewport rectangle or `null`. |
-| `getItemBounds()` | Returns measured world-space rectangles as `MinimapItem[]`. |
+| Method                                           | Meaning                                                     |
+| ------------------------------------------------ | ----------------------------------------------------------- |
+| `smoothPanToWorld(x, y, durationMs?)`            | Centers a world point with an animated pan.                 |
+| `smoothPanZoomToWorld(x, y, zoom?, durationMs?)` | Animates pan and zoom together.                             |
+| `getContainerRect()`                             | Returns the current viewport rectangle or `null`.           |
+| `getItemBounds()`                                | Returns measured world-space rectangles as `MinimapItem[]`. |
 
 ## CanvasItem
 
 `CanvasItem` positions and measures DOM content inside a `Canvas`.
 
-| Prop | Type | Meaning |
-| --- | --- | --- |
-| `x` / `y` | `number` | World position. |
-| `zIndex` | `number` | Item-root stacking order. Use this rather than a descendant z-index because each transformed item is its own stacking context. |
-| `onSize` | `(width, height) => void` | Reports measured size changes. |
-| `children` | `ReactNode` | Item content. |
+| Prop       | Type                      | Meaning                                                                                                                        |
+| ---------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| `x` / `y`  | `number`                  | World position.                                                                                                                |
+| `zIndex`   | `number`                  | Item-root stacking order. Use this rather than a descendant z-index because each transformed item is its own stacking context. |
+| `onSize`   | `(width, height) => void` | Reports measured size changes.                                                                                                 |
+| `children` | `ReactNode`               | Item content.                                                                                                                  |
 
 ## Controls and minimap
 
-`CanvasControls` is exported for products that compose controls separately. Its callbacks are `getZoom`, `onZoomIn`, `onZoomOut`, and `onZoomReset`; optional minimap, placement, help, label, glass-surface, and low-cost fallback props match the integrated Canvas controls.
+`CanvasControls` is exported for products that compose controls separately. Its callbacks are `getZoom`, `onZoomIn`, `onZoomOut`, and `onZoomReset`; optional minimap, placement, help, label, glass-surface, and low-cost fallback props match the integrated Canvas controls. Standalone controls can set `contentCaptureAttribute` when a product compositor needs to mark their non-plain surface.
 
 `CanvasControlsLabels` localizes `toggleMinimap`, `zoomOut`, `resetZoom`, `zoomIn`, and `help`.
 
 `CanvasMinimap` accepts `worldWidth`, `worldHeight`, `items`, and `onRequestPan`. A `MinimapItem` contains `x`, `y`, `width`, `height`, and optional `color`. Its ref exposes `CanvasMinimapHandle.update(pan, zoom, canvasWidth, canvasHeight)`.
 
+### Product capture/compositor integration
+
+Components does not know Studio's Liquid Glass attribute vocabulary. A product opts into its own markers explicitly:
+
+```tsx
+import { Canvas, type CanvasCaptureAttributes } from '@cratis/components/Canvas';
+import LiquidGlassSurface from './LiquidGlassSurface'; // product-owned surface
+
+const captureAttributes: CanvasCaptureAttributes = {
+    layer: 'data-liquid-glass-layer',
+    content: 'data-liquid-glass-content',
+    transformHost: 'data-liquid-glass-transform-host',
+};
+
+<Canvas
+    captureAttributes={captureAttributes}
+    controlsGlassSurface={<LiquidGlassSurface cornerRadius={999} />}
+/>;
+```
+
+`layer` marks the Pixi canvas, `content` marks non-plain integrated controls, and `transformHost` marks both pan/zoom hosts. Omit the prop when the product has no capture pipeline. This keeps provider-specific names and update ownership outside Components.
+
 ## Overlays and SSR
 
 `CanvasOverlay` portals children to `document.body` in the browser. It renders an empty server/hydration placeholder, so importing or server-rendering a Canvas tree does not access `document` before hydration.
diff --git a/Documentation/CommandDialog/index.md b/Documentation/CommandDialog/index.md
index 5feb1548..0c98ff43 100644
--- a/Documentation/CommandDialog/index.md
+++ b/Documentation/CommandDialog/index.md
@@ -113,7 +113,8 @@ function MyComponent() {
 - `style`: Custom CSS styles
 - `contentStyle`: Custom CSS styles for the dialog content area
 - `width`: Dialog width
-- `className`, `pt`, `ptOptions`, `unstyled`: Styling hooks forwarded to the underlying dialog
+- `className`, `pt`: Styling hooks for the Cratis-owned dialog root and stable parts
+- `ptOptions`, `unstyled`: Retained temporarily for source compatibility; ignored because Cratis part attributes always merge and styling is CSS-owned
 
 > [!NOTE]
 > `dismissable` and `closeAriaLabel` are forwarded to the underlying `Dialog`. `isBusy` is managed internally while the command executes, so consumers should not set it directly.
@@ -159,12 +160,13 @@ import { DialogInitialFocus } from '@cratis/components/Dialogs';
 
 <CommandDialog<DeletePersonalData>
     command={DeletePersonalData}
-    title="Delete personal data?"
-    okLabel="Delete"
+    title='Delete personal data?'
+    okLabel='Delete'
     initialFocus={DialogInitialFocus.Cancel}
-    onSuccess={() => closeDialog(DialogResult.Ok)}>
+    onSuccess={() => closeDialog(DialogResult.Ok)}
+>
     This cannot be undone.
-</CommandDialog>
+</CommandDialog>;
 ```
 
 ## Busy State
diff --git a/Documentation/CommandForm/dropdown-field.md b/Documentation/CommandForm/dropdown-field.md
index 9f909c9f..7ca04d01 100644
--- a/Documentation/CommandForm/dropdown-field.md
+++ b/Documentation/CommandForm/dropdown-field.md
@@ -15,13 +15,13 @@ const statusOptions = [
 
 <CommandDialog command={MyCommand} visible={visible} onCancel={() => setVisible(false)}>
     <DropdownField<MyCommand>
-        value={c => c.status}
+        value={(c) => c.status}
         options={statusOptions}
-        optionLabel="label"
-        optionValue="value"
-        placeholder="Select a status"
+        optionLabel='label'
+        optionValue='value'
+        placeholder='Select a status'
     />
-</CommandDialog>
+</CommandDialog>;
 ```
 
 With custom data:
@@ -33,24 +33,25 @@ const roles = [
 ];
 
 <DropdownField<MyCommand>
-    value={c => c.role}
+    value={(c) => c.role}
     options={roles}
-    optionLabel="display"
-    optionValue="id"
-/>
+    optionLabel='display'
+    optionValue='id'
+/>;
 ```
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `value` | `(instance: TCommand) => unknown` | — | **Required.** Accessor function that returns the bound property from the command instance. Pass the command type as the generic parameter for full type safety. |
-| `options` | `Array<{ [key: string]: unknown }>` | — | **Required.** Array of option objects. |
-| `optionLabel` | `string` | — | **Required.** Key in each option object to use as the display label. |
-| `optionValue` | `string` | — | **Required.** Key in each option object to use as the submitted value. |
-| `placeholder` | `string` | — | Placeholder text shown when no value is selected. |
-| `className` | `string` | — | Extra CSS class combined with the default `w-full`. |
-| `pt` / `ptOptions` / `unstyled` | — | — | Pass-through styling for the underlying `Select`. |
+| Prop                     | Type                                | Default | Description                                                                                                                                                     |
+| ------------------------ | ----------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `value`                  | `(instance: TCommand) => unknown`   | —       | **Required.** Accessor function that returns the bound property from the command instance. Pass the command type as the generic parameter for full type safety. |
+| `options`                | `Array<{ [key: string]: unknown }>` | —       | **Required.** Array of option objects.                                                                                                                          |
+| `optionLabel`            | `string`                            | —       | **Required.** Key in each option object to use as the display label.                                                                                            |
+| `optionValue`            | `string`                            | —       | **Required.** Key in each option object to use as the submitted value.                                                                                          |
+| `placeholder`            | `string`                            | —       | Placeholder text shown when no value is selected.                                                                                                               |
+| `className`              | `string`                            | —       | Extra CSS class combined with the default `w-full`.                                                                                                             |
+| `pt`                     | `DropdownParts`                     | —       | Attributes for the Cratis-owned Dropdown's stable parts.                                                                                                        |
+| `ptOptions` / `unstyled` | —                                   | —       | Retained temporarily for source compatibility; ignored.                                                                                                         |
 
 `DropdownField` deliberately does not surface `multiple`, `filter` or `showClear` — use [`MultiSelectField`](multi-select-field.md) for multi-select, or the [`Dropdown`](../Dropdown/index.md) wrapper directly outside a command form.
 
@@ -59,4 +60,3 @@ const roles = [
 - Default value is an empty string.
 - The field spans full width within its container.
 - Validation state is reflected through `aria-invalid` and `data-invalid`.
-
diff --git a/Documentation/CommandForm/multi-select-field.md b/Documentation/CommandForm/multi-select-field.md
index e8744d13..2dbfdbe2 100644
--- a/Documentation/CommandForm/multi-select-field.md
+++ b/Documentation/CommandForm/multi-select-field.md
@@ -28,19 +28,20 @@ const categoryOptions = [
 
 ## Props
 
-| Prop                            | Type                              | Default | Description                                                                                                                                                     |
-| ------------------------------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `value`                         | `(instance: TCommand) => unknown` | -       | **Required.** Accessor function that returns the bound property from the command instance. Pass the command type as the generic parameter for full type safety. |
-| `options`                       | `Array<Record<string, unknown>>`  | -       | **Required.** Array of option objects.                                                                                                                          |
-| `optionLabel`                   | `string`                          | -       | Property name in each option object used as the display text.                                                                                                   |
-| `optionValue`                   | `string`                          | -       | Property name in each option object used as the bound value.                                                                                                    |
-| `placeholder`                   | `string`                          | -       | Placeholder text shown when no options are selected.                                                                                                            |
-| `display`                       | `'comma' \| 'chip'`               | -       | **No effect.** See below.                                                                                                                                       |
-| `maxSelectedLabels`             | `number`                          | -       | **No effect.** See below.                                                                                                                                       |
-| `filter`                        | `boolean`                         | `false` | Shows a filter input in the options popup.                                                                                                                      |
-| `showClear`                     | `boolean`                         | `false` | Displays a clear icon to reset selected values.                                                                                                                 |
-| `className`                     | `string`                          | -       | Extra CSS class combined with the default `w-full`.                                                                                                             |
-| `pt` / `ptOptions` / `unstyled` | -                                 | -       | Pass-through styling for the underlying `Dropdown`; `ptOptions` and `unstyled` are compatibility no-ops.                                                        |
+| Prop                     | Type                              | Default | Description                                                                                                                                                     |
+| ------------------------ | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `value`                  | `(instance: TCommand) => unknown` | -       | **Required.** Accessor function that returns the bound property from the command instance. Pass the command type as the generic parameter for full type safety. |
+| `options`                | `Array<Record<string, unknown>>`  | -       | **Required.** Array of option objects.                                                                                                                          |
+| `optionLabel`            | `string`                          | -       | Property name in each option object used as the display text.                                                                                                   |
+| `optionValue`            | `string`                          | -       | Property name in each option object used as the bound value.                                                                                                    |
+| `placeholder`            | `string`                          | -       | Placeholder text shown when no options are selected.                                                                                                            |
+| `display`                | `'comma' \| 'chip'`               | -       | **No effect.** See below.                                                                                                                                       |
+| `maxSelectedLabels`      | `number`                          | -       | **No effect.** See below.                                                                                                                                       |
+| `filter`                 | `boolean`                         | `false` | Shows a filter input in the options popup.                                                                                                                      |
+| `showClear`              | `boolean`                         | `false` | Displays a clear icon to reset selected values.                                                                                                                 |
+| `className`              | `string`                          | -       | Extra CSS class combined with the default `w-full`.                                                                                                             |
+| `pt`                     | `DropdownParts`                   | —       | Attributes for the Cratis-owned Dropdown's stable parts.                                                                                                        |
+| `ptOptions` / `unstyled` | —                                 | —       | Retained temporarily for source compatibility; ignored.                                                                                                         |
 
 ## Behavior
 
diff --git a/Documentation/CommandStepper/index.md b/Documentation/CommandStepper/index.md
index 7560ca16..85ba4852 100644
--- a/Documentation/CommandStepper/index.md
+++ b/Documentation/CommandStepper/index.md
@@ -55,7 +55,8 @@ export const ProjectWizard = () => {
 - `onSubmit`: Submit callback invoked on the last step
 - Any `CommandForm` props, including `initialValues`, `currentValues`, `validateOnInit`, and validation callbacks
 - `onBeforeExecute`: Transform command values before execution — it must **return** the values to run with, and it runs only on submit, so it can never satisfy required-field validation (seed those through `initialValues`)
-- `linear` (default `true`), `orientation` (`'horizontal'` default / `'vertical'`), `headerPosition` (`'top'` default / `'bottom'`), `start`, `end`, `onChangeStep`, `pt`, `ptOptions`, `unstyled`: the `StepperCustomizationProps` surface. This is a Cratis-owned type mapped onto stable `root`, `list`, `step`, `header`, `number`, `title`, `separator`, `panels`, and `panel` parts.
+- `linear` (default `true`), `orientation` (`'horizontal'` default / `'vertical'`), `headerPosition` (`'top'` default / `'bottom'`), `start`, `end`, `onChangeStep`, and `pt`: the active `StepperCustomizationProps` surface. It maps onto stable `root`, `list`, `step`, `header`, `number`, `title`, `separator`, `panels`, and `panel` parts.
+- `ptOptions` and `unstyled`: retained temporarily for source compatibility; ignored because Cratis part attributes always merge and styling is CSS-owned.
 
 Conditional steps written as `{condition && <StepperPanel/>}` are counted correctly — only the panels that actually render are counted, so navigation and the per-step validation state stay in step with what is on screen. A `<>…</>` fragment wrapping several panels still counts as **one** step.
 
diff --git a/Documentation/Common/cratis-components-provider.md b/Documentation/Common/cratis-components-provider.md
index ec747d4c..f8ee5ab8 100644
--- a/Documentation/Common/cratis-components-provider.md
+++ b/Documentation/Common/cratis-components-provider.md
@@ -8,7 +8,7 @@ description: Configure locale, Components-owned labels, and the app-wide toast r
 ## Basic setup
 
 ```tsx
-import { CratisComponentsProvider } from '@cratis/components';
+import { CratisComponentsProvider } from '@cratis/components/Common';
 
 export const App = () => (
     <CratisComponentsProvider value={{ locale: 'en-US' }} toaster>
@@ -26,7 +26,7 @@ export const App = () => (
 | `messages.datePicker` | Components-owned date-picker action/navigation labels.                                     |
 | `locales`             | Temporary Components 3 compatibility map; migrate to `messages`.                           |
 
-Unknown Components 3 renderer options remain accepted during the major migration so applications can update incrementally, but they have no effect. Remove `license`, `theme`, `defaults`, `pt`, `ptOptions`, `ripple`, `unstyled`, and renderer z-index settings from the provider.
+Unknown Components 3 renderer options are intentionally a type error. Remove `license`, `theme`, `defaults`, global `pt`, `ptOptions`, `ripple`, `unstyled`, and renderer z-index settings rather than compiling a provider whose visual configuration does nothing. Configure any remaining direct Prime provider independently.
 
 ## Localize owned labels
 
diff --git a/Documentation/DataTables/index.md b/Documentation/DataTables/index.md
index 94955774..9746bd6f 100644
--- a/Documentation/DataTables/index.md
+++ b/Documentation/DataTables/index.md
@@ -1,14 +1,21 @@
 # DataTables
 
-The DataTables module provides specialized table components for displaying data from queries and observable queries.
+The DataTables module provides a semantic local-array table plus specialized Arc query and observable-query wrappers.
 
 ## Components
 
-- **DataTableForQuery**: For standard queries with pagination
-- **DataTableForObservableQuery**: For observable queries with real-time updates
+- **DataTableCore**: For an already-loaded local array
+- **DataTableForQuery**: For standard Arc queries with pagination
+- **DataTableForObservableQuery**: For observable Arc queries with real-time updates
 
 ## When to Use
 
+Use DataTableCore when:
+
+- Rows are already loaded locally
+- Single selection and semantic table rendering are sufficient
+- Filtering and sorting should apply only to that loaded array
+
 Use DataTableForQuery when:
 
 - You have standard query results
@@ -23,7 +30,7 @@ Use DataTableForObservableQuery when:
 
 ## Common Features
 
-Both table components share:
+All three table components share:
 
 - Single row selection
 - Global filtering
@@ -31,8 +38,11 @@ Both table components share:
 - Empty state messages
 - Cratis-owned semantic Column markers and stable table parts
 
+Keep an application-owned or direct toolkit table when the surface requires grouping, row expansion, or controlled lazy/server sorting. Components does not silently emulate those behaviors over one loaded page.
+
 ## See Also
 
+- [Choosing a component](../choosing-a-component.md) - Local, query-backed, and advanced table boundaries
 - [DataTableForQuery](data-table-for-query.md) - Standard query tables
 - [DataTableForObservableQuery](data-table-for-observable-query.md) - Real-time tables
 - [Column Configuration](column-configuration.md) - Customizing columns
diff --git a/Documentation/Dialogs/dialog.md b/Documentation/Dialogs/dialog.md
index d9dcfa40..efa5d555 100644
--- a/Documentation/Dialogs/dialog.md
+++ b/Documentation/Dialogs/dialog.md
@@ -86,8 +86,8 @@ const MyComponent = () => {
 - `isBusy`: When `true`, disables all buttons, blocks Escape/backdrop dismissal, and shows a loading spinner on the primary action button
 - `initialFocus`: Where keyboard focus lands when the dialog opens (see below)
 - `okLabel`, `cancelLabel`, `yesLabel`, `noLabel`: Button labels. Footer icons are decorative and hidden from accessibility APIs, so each button's accessible name is exactly its configured label
-- `className`, `pt`, `ptOptions`, `unstyled`: Styling hooks forwarded to the
-  Cratis-owned dialog parts — see the [pass-through cheat sheet](../Styling/pass-through.md)
+- `className`, `pt`: Styling hooks for the Cratis-owned dialog root and stable parts — see the [pass-through cheat sheet](../Styling/pass-through.md)
+- `ptOptions`, `unstyled`: Retained temporarily for source compatibility; ignored because Cratis part attributes always merge and styling is CSS-owned
 
 ## Dismissing
 
diff --git a/Documentation/PivotViewer/configuration.md b/Documentation/PivotViewer/configuration.md
index 5c244ec3..d3527645 100644
--- a/Documentation/PivotViewer/configuration.md
+++ b/Documentation/PivotViewer/configuration.md
@@ -27,18 +27,22 @@
     data={items}
     dimensions={dimensions}
     filters={filters}
-    defaultDimensionKey="status"
+    defaultDimensionKey='status'
     cardRenderer={renderCard}
     detailRenderer={renderDetails}
     getItemId={(item) => item.id}
-    searchFields={[item => item.title, item => item.description, item => item.assignee]}
-    className="my-pivot-viewer"
+    searchFields={[
+        (item) => item.title,
+        (item) => item.description,
+        (item) => item.assignee,
+    ]}
+    className='my-pivot-viewer'
     emptyContent={<div>No items match your filters</div>}
     isLoading={isLoadingData}
     colors={{
         primaryColor: '#4CAF50',
         surfaceGround: '#1a1a1a',
-        surfaceCard: '#2d2d2d'
+        surfaceCard: '#2d2d2d',
     }}
 />
 ```
@@ -49,21 +53,27 @@ Customize the color scheme:
 
 ```tsx
 const customColors = {
-    primaryColor: '#0066cc',     // Primary accent color
-    surfaceGround: '#ffffff',    // Main background
-    surfaceCard: '#f5f5f5',      // Pixi card base and DOM card backgrounds
-    surfaceSection: '#e8e8e8',   // Pixi card secondary surface
-    textColor: '#333333',        // Text color
-    surfaceBorder: '#e0e0e0'     // Border color
+    primaryColor: '#0066cc', // Primary accent color
+    surfaceGround: '#ffffff', // Main background
+    surfaceCard: '#f5f5f5', // Pixi card base and DOM card backgrounds
+    surfaceSection: '#e8e8e8', // Pixi card secondary surface
+    textColor: '#333333', // Text color
+    surfaceBorder: '#e0e0e0', // Border color
 };
 
 <PivotViewer
     colors={customColors}
     // ... other props
-/>
+/>;
 ```
 
-Color props map to semantic `--cratis-*` variables and the Pixi renderer's card palette. Updating `colors` after mount refreshes both surfaces.
+Color props map to semantic `--cratis-*` variables and the Pixi renderer's card palette. Updating `colors` after mount refreshes both surfaces, including existing title, label, and value text.
+
+## Server rendering and hydration
+
+`PivotViewer` can render its structural fallback on the server without `document`, canvas, or Pixi initialization. Browser-only color resolution, portals, observers, and the Pixi renderer start after hydration. An initially closed filter panel produces the same server and first-client tree; if application state opens it immediately, the portal is deliberately mounted only after hydration.
+
+The server does not rasterize cards. Treat the server output as a stable loading/empty structure, then let the client build the interactive Pixi surface.
 
 ## Loading State
 
@@ -74,7 +84,7 @@ const [data, setData] = useState([]);
 const [loading, setLoading] = useState(true);
 
 useEffect(() => {
-    fetchData().then(result => {
+    fetchData().then((result) => {
         setData(result);
         setLoading(false);
     });
@@ -84,7 +94,7 @@ useEffect(() => {
     data={data}
     isLoading={loading}
     // ... other props
-/>
+/>;
 ```
 
 ## Empty State
@@ -96,14 +106,14 @@ import { FaInbox } from 'react-icons/fa6';
 
 <PivotViewer
     emptyContent={
-        <div className="empty-state">
+        <div className='empty-state'>
             <FaInbox aria-hidden='true' style={{ fontSize: '3rem' }} />
             <h3>No results found</h3>
             <p>Try adjusting your filters</p>
         </div>
     }
     // ... other props
-/>
+/>;
 ```
 
 ## Search Configuration
@@ -112,7 +122,12 @@ Specify which fields should be searchable by passing accessor functions:
 
 ```tsx
 <PivotViewer
-    searchFields={[item => item.title, item => item.description, item => item.tags, item => item.author]}
+    searchFields={[
+        (item) => item.title,
+        (item) => item.description,
+        (item) => item.tags,
+        (item) => item.author,
+    ]}
     // ... other props
 />
 ```
diff --git a/Documentation/StepperCommandDialog/index.md b/Documentation/StepperCommandDialog/index.md
index 0b33cb65..be415064 100644
--- a/Documentation/StepperCommandDialog/index.md
+++ b/Documentation/StepperCommandDialog/index.md
@@ -107,7 +107,8 @@ function MyComponent() {
 - `style`: Custom CSS styles
 - `contentStyle`: Custom CSS styles for the dialog content area
 - `dialogClassName`: Extra CSS class name for the outer dialog root
-- `dialogPt` / `dialogPtOptions` / `dialogUnstyled`: Pass-through styling for the **outer** dialog (the inherited `pt` / `ptOptions` / `unstyled` target the **inner** stepper)
+- `dialogPt`: Cratis-owned stable part attributes for the **outer** dialog; inherited `pt` targets the **inner** stepper
+- `dialogPtOptions` / `dialogUnstyled` / inherited `ptOptions` / inherited `unstyled`: Retained temporarily for source compatibility; ignored because part attributes always merge and styling is CSS-owned
 - `onFieldValidate`: Custom validation function for fields
 - `onFieldChange`: Callback when field values change
 - `onBeforeExecute`: Transform command values before execution — it must **return** the values to run with. It runs only on submit, after every step has been validated, so a value produced here can never satisfy required-field validation; seed required values through `initialValues` instead.
diff --git a/Documentation/Styling/baseline-theme.md b/Documentation/Styling/baseline-theme.md
index 977baf3c..39ba1f6c 100644
--- a/Documentation/Styling/baseline-theme.md
+++ b/Documentation/Styling/baseline-theme.md
@@ -11,7 +11,9 @@ import '@cratis/components/styles';
 import '@cratis/components/theme';
 ```
 
-The import activates baseline values on `:root`, so no provider option or wrapper class is required for the normal whole-application setup.
+`tokens` supplies conservative light defaults on `:root`. The `theme` import adds document foreground/background, system dark-mode values, explicit scheme classes, forced-colors tuning, and `.cratis-theme` subtree defaults. No provider option or wrapper class is required for the normal whole-application setup.
+
+The baseline intentionally remains visually familiar to Components 2/3 consumers: Lara-adjacent blue actions, neutral surfaces, 6px radii, comparable control density, and similar overlay depth. It is implemented entirely with Cratis markup and tokens. Exact pixel identity is not promised where stronger focus, control-boundary, disabled-state, or status contrast improves accessibility.
 
 ## Dark mode
 
@@ -21,7 +23,7 @@ Apply `cratis-dark` to the document element:
 document.documentElement.classList.toggle('cratis-dark', darkMode);
 ```
 
-Use `cratis-light` to keep the light color scheme when the operating system prefers dark.
+Use `cratis-light` to keep the light values when the operating system prefers dark. Without either explicit class, the baseline follows `prefers-color-scheme`.
 
 ## Theme one subtree
 
diff --git a/Documentation/Styling/cratis-tokens.md b/Documentation/Styling/cratis-tokens.md
index 703ae33d..3cf9590d 100644
--- a/Documentation/Styling/cratis-tokens.md
+++ b/Documentation/Styling/cratis-tokens.md
@@ -3,18 +3,24 @@ title: Cratis token reference
 description: Stable semantic CSS variables consumed by Components markup and structural styles.
 ---
 
-The `--cratis-*` variables are the supported theming boundary. The optional baseline theme supplies concrete values; a product design system can define them directly.
+The `--cratis-*` variables are the supported theming boundary. The `tokens` entry supplies conservative light defaults so an unthemed surface remains usable. A product design system overrides them directly; the optional `theme` entry adds dark, forced-colors, and scoped-subtree behavior.
 
 ## Core colors
 
 | Token                                           | Purpose                                    |
 | ----------------------------------------------- | ------------------------------------------ |
-| `--cratis-primary-color`                        | Primary actions and selected controls.     |
-| `--cratis-primary-color-text`                   | Content on the primary color.              |
+| `--cratis-primary-color`                        | Accent, links, selected controls, and non-text indicators. |
+| `--cratis-primary-color-text`                   | Content on the accent color where used.    |
 | `--cratis-primary-300` … `--cratis-primary-600` | Accent scale used by specialized surfaces. |
 | `--cratis-green-500`                            | Success state.                             |
 | `--cratis-orange-500`                           | Warning state.                             |
-| `--cratis-red-500`                              | Error/destructive state.                   |
+| `--cratis-red-500`                              | Error/destructive indicator.               |
+| `--cratis-action-background` / `-hover` / `-active` | Accessible primary-action state fills. |
+| `--cratis-action-text`                          | Text/icons on the primary action.          |
+| `--cratis-info-background` / `--cratis-info-text` | Accessible info badge/tag pair.         |
+| `--cratis-success-background` / `--cratis-success-text` | Accessible success pair.             |
+| `--cratis-warning-background` / `--cratis-warning-text` | Accessible warning pair.             |
+| `--cratis-danger-background` / `--cratis-danger-text` | Accessible danger pair.                |
 
 ## Surfaces
 
@@ -22,11 +28,13 @@ The `--cratis-*` variables are the supported theming boundary. The optional base
 | --------------------------------------------- | ---------------------------------------------- |
 | `--cratis-surface-ground`                     | Application/page background.                   |
 | `--cratis-surface-section`                    | Grouped section background.                    |
-| `--cratis-surface-card`                       | Cards and inputs.                              |
+| `--cratis-surface-card`                       | Cards and raised content.                      |
 | `--cratis-surface-overlay`                    | Dialogs, dropdowns, popovers, and toasts.      |
 | `--cratis-surface-hover`                      | Hovered or quiet selected state.               |
 | `--cratis-surface-border`                     | Borders and dividers.                          |
 | `--cratis-surface-0` / `--cratis-surface-100` | Small neutral ramp used by display components. |
+| `--cratis-control-background`                  | Inputs, Dropdown triggers, and segmented date controls. |
+| `--cratis-control-border`                      | Visible control boundary, intentionally stronger than quiet surface borders. |
 
 ## Text and interaction
 
@@ -39,6 +47,36 @@ The `--cratis-*` variables are the supported theming boundary. The optional base
 | `--cratis-focus-ring`           | Keyboard-visible focus treatment. |
 | `--cratis-maskbg`               | Modal backdrop.                   |
 | `--cratis-border-radius`        | Default component radius.         |
+| `--cratis-control-height` / `-small` / `-large` | Interactive control size floor. |
+| `--cratis-disabled-opacity`     | Shared disabled-state opacity.    |
+| `--cratis-shadow-subtle`        | Small control elevation.          |
+| `--cratis-shadow-overlay`       | Dropdown, DatePicker, filter, Toolbar panel, and tooltip elevation. |
+| `--cratis-shadow-dialog`        | Dialog elevation.                 |
+| `--cratis-shadow-toast`         | Toast elevation.                  |
+
+## Overlay stacking
+
+| Token                      | Default | Surface                           |
+| -------------------------- | ------: | --------------------------------- |
+| `--cratis-z-index-dialog`  |  `1100` | Dialog backdrop/root.             |
+| `--cratis-z-index-overlay` |  `1200` | Dropdown and DatePicker overlays. |
+| `--cratis-z-index-filter`  |  `1250` | Column filter menus.              |
+| `--cratis-z-index-tooltip` |  `1300` | Tooltips.                         |
+| `--cratis-z-index-toast`   |  `1400` | Toast regions.                    |
+
+Keep their relative order when mapping into an application's overlay system. A mixed Prime/product application with overlays around `10000` can move the complete Components range together:
+
+```css
+:root {
+    --cratis-z-index-dialog: 11000;
+    --cratis-z-index-overlay: 11100;
+    --cratis-z-index-filter: 11150;
+    --cratis-z-index-tooltip: 11200;
+    --cratis-z-index-toast: 11300;
+}
+```
+
+These tokens coordinate Components only. Configure direct Prime or product overlays independently.
 
 ## Map a product system
 
@@ -46,11 +84,17 @@ The `--cratis-*` variables are the supported theming boundary. The optional base
 :root {
     --cratis-primary-color: var(--product-accent-700);
     --cratis-primary-color-text: var(--product-text-inverse);
+    --cratis-action-background: var(--product-action);
+    --cratis-action-background-hover: var(--product-action-hover);
+    --cratis-action-background-active: var(--product-action-active);
+    --cratis-action-text: var(--product-on-action);
     --cratis-surface-ground: var(--product-canvas);
     --cratis-surface-card: var(--product-surface);
     --cratis-surface-overlay: var(--product-surface-raised);
     --cratis-surface-hover: var(--product-subtle);
     --cratis-surface-border: var(--product-border);
+    --cratis-control-background: var(--product-control);
+    --cratis-control-border: var(--product-control-border);
     --cratis-text-color: var(--product-text-primary);
     --cratis-text-color-secondary: var(--product-text-secondary);
     --cratis-focus-ring: var(--product-focus-ring);
diff --git a/Documentation/Styling/custom-palette.md b/Documentation/Styling/custom-palette.md
index fa5c6216..8cf33a59 100644
--- a/Documentation/Styling/custom-palette.md
+++ b/Documentation/Styling/custom-palette.md
@@ -9,6 +9,10 @@ Define semantic values after importing the baseline theme:
 :root {
     --cratis-primary-color: #0f766e;
     --cratis-primary-color-text: #ffffff;
+    --cratis-action-background: #0f766e;
+    --cratis-action-background-hover: #115e59;
+    --cratis-action-background-active: #134e4a;
+    --cratis-action-text: #ffffff;
     --cratis-highlight-bg: #ccfbf1;
     --cratis-highlight-text-color: #115e59;
 }
@@ -16,6 +20,10 @@ Define semantic values after importing the baseline theme:
 .cratis-dark {
     --cratis-primary-color: #5eead4;
     --cratis-primary-color-text: #042f2e;
+    --cratis-action-background: #5eead4;
+    --cratis-action-background-hover: #99f6e4;
+    --cratis-action-background-active: #ccfbf1;
+    --cratis-action-text: #042f2e;
 }
 ```
 
diff --git a/Documentation/Styling/getting-started.md b/Documentation/Styling/getting-started.md
index 35d0851f..2b997813 100644
--- a/Documentation/Styling/getting-started.md
+++ b/Documentation/Styling/getting-started.md
@@ -3,21 +3,21 @@ title: Set up styling
 description: Import Components structure and choose baseline or product-owned token values.
 ---
 
-Import the token and structural layers once:
+Import the semantic defaults and structural bundle once, in this order:
 
 ```ts
 import '@cratis/components/tokens';
 import '@cratis/components/styles';
 ```
 
-For the baseline appearance, also import:
+For automatic dark mode, explicit `cratis-dark` / `cratis-light`, forced-colors tuning, and independently themed subtrees, also import:
 
 ```ts
 import '@cratis/components/theme';
 ```
 
-For a custom product, omit `theme` and define the semantic `--cratis-*` variables in the product stylesheet. Import product values after `tokens` so they win in the cascade.
+For a custom product, omit `theme` and define the semantic `--cratis-*` variables in the product stylesheet. Import product values after both Components entries so they win in the cascade.
 
-Components no longer imports or requires PrimeReact, PrimeIcons, PrimeUI themes, or a renderer provider.
+`styles` contains named, low-priority Cratis layers and no Tailwind Preflight, consumer reset, or token duplication. Components no longer imports or requires PrimeReact, PrimeIcons, PrimeUI themes, or a renderer provider.
 
 See [Build a product theme](themed.md) and [Stable component parts](pass-through.md).
diff --git a/Documentation/Styling/index.md b/Documentation/Styling/index.md
index b2e3681c..3ea436fb 100644
--- a/Documentation/Styling/index.md
+++ b/Documentation/Styling/index.md
@@ -3,11 +3,11 @@ title: Styling
 description: Style Components with Cratis tokens, structural CSS, and stable parts.
 ---
 
-Components separates behavior from product appearance through three Cratis-owned layers:
+Components separates behavior from product appearance through three independently published Cratis-owned layers:
 
-1. `@cratis/components/tokens` declares semantic variables.
-2. `@cratis/components/styles` supplies component structure.
-3. `@cratis/components/theme` optionally supplies baseline values.
+1. `@cratis/components/tokens` defines the semantic `--cratis-*` seam with conservative light defaults.
+2. `@cratis/components/styles` supplies component structure and only the internal utility rules Components uses. It contains no token copy and no Tailwind Preflight or global reset.
+3. `@cratis/components/theme` optionally adds document/subtree foreground and background, automatic or explicit dark mode, and forced-colors behavior.
 
 ```ts
 import '@cratis/components/tokens';
@@ -15,14 +15,29 @@ import '@cratis/components/styles';
 import '@cratis/components/theme';
 ```
 
-A product design system omits `theme`, defines the token values itself, and uses stable parts for component-specific treatment.
+A product design system omits `theme`, maps its canonical values directly onto `--cratis-*`, and uses stable parts for component-specific treatment.
 
 ## Choose a path
 
-- [Use the baseline theme](baseline-theme.md)
-- [Map a product theme](themed.md)
-- [Own all styling](unstyled.md)
-- [Use Cratis tokens](cratis-tokens.md)
-- [Customize stable parts](pass-through.md)
+| Situation                                           | Imports                                                                     | Product responsibility                                                                                                                        |
+| --------------------------------------------------- | --------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
+| New app that wants the maintained Cratis appearance | `tokens`, `styles`, `theme`                                                 | Choose `cratis-dark`, `cratis-light`, or system preference; override only intentional brand values.                                           |
+| Product with its own tokens, such as Ada            | `tokens`, `styles`, then product CSS                                        | Omit `theme`; map the complete product palette to `--cratis-*`; keep product typography, spacing, motion, contrast, and component treatments. |
+| Existing app migrating gradually from PrimeReact    | `tokens`, `styles`, optional `theme`, plus the product's existing Prime CSS | Mount Components and Prime providers independently. Keep Prime styling and licensing only for direct Prime surfaces until they are removed.   |
+| Independently themed embedded surface               | `tokens`, `styles`, `theme`                                                 | Put `cratis-theme` on the subtree and add `cratis-dark` or `cratis-light` there.                                                              |
+
+Read [Use the baseline theme](baseline-theme.md), [Build a product theme](themed.md), [Own all styling](unstyled.md), and [Stable component parts](pass-through.md) for the corresponding implementation.
+
+## Cascade contract
+
+The structural bundle declares low-priority `cratis-theme`, `cratis-components`, and `cratis-utilities` layers. Internal Tailwind-generated utility selectors are prefixed (`cratis:*`) and are not public styling hooks. Product CSS written outside a layer wins over all three without specificity tricks. If the product uses its own cascade layers, declare their order explicitly after the Components imports. Components does not inject Preflight, reset headings/forms/lists, or copy token values into `styles`.
+
+Import product mappings and overrides after Components:
+
+```ts
+import '@cratis/components/tokens';
+import '@cratis/components/styles';
+import './product-components.css';
+```
 
 React Aria is internal. Never style React Aria class names or undocumented DOM structure.
diff --git a/Documentation/Styling/mixing-paths.md b/Documentation/Styling/mixing-paths.md
index c12b25b7..9d2ecda1 100644
--- a/Documentation/Styling/mixing-paths.md
+++ b/Documentation/Styling/mixing-paths.md
@@ -15,6 +15,10 @@ import './product-components.css';
 ```css
 :root {
     --cratis-primary-color: var(--product-accent);
+    --cratis-action-background: var(--product-action);
+    --cratis-action-background-hover: var(--product-action-hover);
+    --cratis-action-background-active: var(--product-action-active);
+    --cratis-action-text: var(--product-on-action);
 }
 
 .product-toolbar[data-cratis-part='root'] {
@@ -22,4 +26,4 @@ import './product-components.css';
 }
 ```
 
-All three layers are Cratis-owned. There is no provider theme or renderer cascade layer to coordinate.
+All three entries are Cratis-owned. Structural rules live in the low-priority `cratis-components` layer and internal utilities in `cratis-utilities`; the unlayered `product-components.css` import wins over both. There is no provider theme or renderer cascade layer to coordinate.
diff --git a/Documentation/Styling/pass-through.md b/Documentation/Styling/pass-through.md
index 321d05ee..adb158ee 100644
--- a/Documentation/Styling/pass-through.md
+++ b/Documentation/Styling/pass-through.md
@@ -25,44 +25,44 @@ They are documented separately because not every DOM part needs a `pt` key, and
 </Dialog>
 ```
 
-| Component/type                         | Typed `pt` keys                                                                                                                                                                        | Element types                                                 |
-| -------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- |
-| `ButtonParts`                          | `root`, `icon`, `label`, `spinner`                                                                                                                                                     | button, spans                                                 |
-| `DialogParts`                          | `backdrop`, `positioner`, `root`, `header`, `title`, `close`, `content`, `footer`, `confirm`, `cancel`                                                                                 | divs/header/heading/footer/buttons                            |
-| `DropdownParts`                        | `root`, `input`, `select`, `trigger`, `value`, `clear`, `indicator`, `popover`, `listbox`, `option`, `filter`, `multiple`                                                              | wrapper, input/button, spans, popover/listbox/options, select |
-| `DatePickerInputPassThrough`           | `root`, `group`, `input`, `placeholder`, `segment`, `trigger`, `popover`, `dialog`, `calendar`, `header`, `heading`, `previous`, `next`, `grid`, `cell`, `buttonBar`, `today`, `clear` | divs, segmented field, buttons, calendar grid/cells           |
-| `DataTableParts`                       | `root`, `search`, `searchInput`, `tableContainer`, `table`, `head`, `headerRow`, `headerCell`, `body`, `row`, `cell`, `emptyRow`, `emptyCell`                                          | div/input/table sections/rows/cells                           |
-| `ColumnFilterMenuParts` (`Column.filterPt`) | `trigger`, `popover`, `menu`, `matchMode`, `input`, `actions`, `clear`, `apply`                                                                                             | button, overlay/menu, inputs, actions                         |
-| `TablePaginatorParts`                  | `root`, `range`, `info`, `first`, `previous`, `next`, `last`                                                                                                                           | navigation div, spans, and Button parts                       |
-| `StepperParts`                         | `root`, `list`, `step`, `header`, `number`, `title`, `separator`, `panels`, `panel`                                                                                                    | div, ordered list, list item, button, spans, section          |
-| `ToasterPassThrough`                   | `region`, `toast`, `icon`, `content`, `title`, `description`, `close`, `action`                                                                                                        | region/article/divs/spans/buttons                             |
-| `ToolbarParts` / `ToolbarButtonParts`  | toolbar `root`; button `root`, `icon`, `label`                                                                                                                                         | toolbar div and native buttons/spans                          |
-| `ToolbarGroupParts` / `ToolbarLayoutParts` | `root`, `slot`, `incoming`, `outgoing`                                                                                                                                              | group/layout and transition measurement divs                 |
-| `ToolbarSectionParts`                  | `root`, `context`                                                                                                                                                                      | animated section and named context divs                      |
-| `ToolbarSeparatorParts`                | `root`                                                                                                                                                                                 | native separator div                                         |
-| `ToolbarFolderParts` / `ToolbarFanOutParts` | `root`, `trigger`, `panel`                                                                                                                                                         | composition div, native trigger, and inert collapsed panel   |
-| `ActionMenubar` `pt`                   | the `ButtonParts` keys applied to each action                                                                                                                                          | button and spans                                              |
-| Query table / `DataPage` `paginatorPt` | `TablePaginatorParts`                                                                                                                                                                  | paginator surface                                             |
-| `DataPage` `tablePt`                   | `DataTableParts`                                                                                                                                                                       | table surface                                                 |
-| `DataPage` `menubarPt`                 | `ButtonParts`                                                                                                                                                                          | action buttons                                                |
+| Component/type                              | Typed `pt` keys                                                                                                                                                                        | Element types                                                 |
+| ------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- |
+| `ButtonParts`                               | `root`, `icon`, `label`, `spinner`                                                                                                                                                     | button, spans                                                 |
+| `DialogParts`                               | `backdrop`, `positioner`, `root`, `header`, `title`, `close`, `content`, `footer`, `confirm`, `cancel`                                                                                 | divs/header/heading/footer/buttons                            |
+| `DropdownParts`                             | `root`, `input`, `select`, `trigger`, `value`, `clear`, `indicator`, `popover`, `listbox`, `option`, `filter`, `multiple`                                                              | wrapper, input/button, spans, popover/listbox/options, select |
+| `DatePickerInputPassThrough`                | `root`, `group`, `input`, `placeholder`, `segment`, `trigger`, `popover`, `dialog`, `calendar`, `header`, `heading`, `previous`, `next`, `grid`, `cell`, `buttonBar`, `today`, `clear` | divs, segmented field, buttons, calendar grid/cells           |
+| `DataTableParts`                            | `root`, `search`, `searchInput`, `tableContainer`, `table`, `head`, `headerRow`, `headerCell`, `body`, `row`, `cell`, `emptyRow`, `emptyCell`                                          | div/input/table sections/rows/cells                           |
+| `ColumnFilterMenuParts` (`Column.filterPt`) | `trigger`, `popover`, `menu`, `matchMode`, `input`, `actions`, `clear`, `apply`                                                                                                        | button, overlay/menu, inputs, actions                         |
+| `TablePaginatorParts`                       | `root`, `range`, `info`, `first`, `previous`, `next`, `last`                                                                                                                           | navigation div, spans, and Button parts                       |
+| `StepperParts`                              | `root`, `list`, `step`, `header`, `number`, `title`, `separator`, `panels`, `panel`                                                                                                    | div, ordered list, list item, button, spans, section          |
+| `ToasterPassThrough`                        | `region`, `toast`, `icon`, `content`, `title`, `description`, `close`, `action`                                                                                                        | region/article/divs/spans/buttons                             |
+| `ToolbarParts` / `ToolbarButtonParts`       | toolbar `root`; button `root`, `icon`, `label`                                                                                                                                         | toolbar div and native buttons/spans                          |
+| `ToolbarGroupParts` / `ToolbarLayoutParts`  | `root`, `slot`, `incoming`, `outgoing`                                                                                                                                                 | group/layout and transition measurement divs                  |
+| `ToolbarSectionParts`                       | `root`, `context`                                                                                                                                                                      | animated section and named context divs                       |
+| `ToolbarSeparatorParts`                     | `root`                                                                                                                                                                                 | native separator div                                          |
+| `ToolbarFolderParts` / `ToolbarFanOutParts` | `root`, `trigger`, `panel`                                                                                                                                                             | composition div, native trigger, and inert collapsed panel    |
+| `ActionMenubar` `pt`                        | the `ButtonParts` keys applied to each action                                                                                                                                          | button and spans                                              |
+| Query table / `DataPage` `paginatorPt`      | `TablePaginatorParts`                                                                                                                                                                  | paginator surface                                             |
+| `DataPage` `tablePt`                        | `DataTableParts`                                                                                                                                                                       | table surface                                                 |
+| `DataPage` `menubarPt`                      | `ButtonParts`                                                                                                                                                                          | action buttons                                                |
 
 Command field part keys:
 
-| Field                  | Typed keys                                    |
-| ---------------------- | --------------------------------------------- |
+| Field                  | Typed keys                                          |
+| ---------------------- | --------------------------------------------------- |
 | InputText / TextArea   | `root` (the native control; see the DOM note below) |
-| Number                 | `root`, `input`                               |
-| Checkbox               | `root`, `input`, `box`, `indicator`           |
-| ToggleSwitch           | `root`, `input`, `control`, `handle`          |
-| Password               | `root`, `input`, `toggle`                     |
-| RadioButton            | `root`, `input`, `box`, `indicator`           |
-| RadioGroup             | `root`, `option`, `input`, `box`, `indicator` |
-| Slider                 | `root`, `input`, `value`                      |
-| Chips                  | `root`, `item`, `remove`, `input`             |
-| ColorPicker            | `root`, `input`, `value`                      |
-| Rating                 | `root`, `option`, `input`, `star`             |
-| Calendar               | `DatePickerInputPassThrough` keys             |
-| Dropdown / MultiSelect | `DropdownParts` keys                          |
+| Number                 | `root`, `input`                                     |
+| Checkbox               | `root`, `input`, `box`, `indicator`                 |
+| ToggleSwitch           | `root`, `input`, `control`, `handle`                |
+| Password               | `root`, `input`, `toggle`                           |
+| RadioButton            | `root`, `input`, `box`, `indicator`                 |
+| RadioGroup             | `root`, `option`, `input`, `box`, `indicator`       |
+| Slider                 | `root`, `input`, `value`                            |
+| Chips                  | `root`, `item`, `remove`, `input`                   |
+| ColorPicker            | `root`, `input`, `value`                            |
+| Rating                 | `root`, `option`, `input`, `star`                   |
+| Calendar               | `DatePickerInputPassThrough` keys                   |
+| Dropdown / MultiSelect | `DropdownParts` keys                                |
 
 `InputTextParts.root` applies to the native element carrying `data-cratis-part='input'`; `TextAreaParts.root` applies to `data-cratis-part='textarea'`. The typed key is retained for source compatibility, but there is no extra field-root DOM wrapper.
 
@@ -72,24 +72,26 @@ Named behavior props override conflicting part attributes. Part classes and styl
 
 Use the exact kebab-case value in CSS or tests:
 
-| Surface        | `data-cratis-part` values                                                                                                                                                                       |
-| -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Button         | `root`, `icon`, `label`, `spinner`                                                                                                                                                              |
-| Dialog         | `backdrop`, `positioner`, `root`, `header`, `title`, `close`, `content`, `footer`, `confirm`, `cancel`                                                                                          |
-| Dropdown       | `root`, `trigger`, `value`, `clear`, `indicator`, `filter`, `popover`, `listbox`, `option`, `multiple`                                                                                          |
-| DatePicker     | `root`, `group`, `input`, `placeholder`, `segment`, `trigger`, `popover`, `dialog`, `calendar`, `header`, `heading`, `previous`, `next`, `grid`, `cell`, `button-bar`, `today`, `clear`         |
-| DataTable      | `root`, `search`, `search-input`, `table-container`, `table`, `head`, `header-row`, `header-cell`, `header-content`, `sort`, `filter-trigger`, `filter-popover`, `filter-menu`, `filter-actions`, `body`, `row`, `cell`, `empty-row`, `empty-cell` |
-| TablePaginator | `root`, `range`, `info`; paginator buttons expose the documented Button parts                                                                                                                   |
-| Stepper        | `root`, `list`, `step`, `header`, `number`, `title`, `separator`, `panels`, `panel`                                                                                                             |
-| Toaster        | `region`, `toast`, `icon`, `content`, `title`, `description`, `action`, `close`                                                                                                                 |
-| Tooltip        | `trigger`, `popup`                                                                                                                                                                              |
-| Command fields | `root`, plus the typed field-specific values listed above (`input`, `textarea`, `box`, `control`, `handle`, `indicator`, `option`, `item`, `remove`, `value`, `star`, `toggle`)                 |
-| Display        | component roots plus `image`, `fallback`, `remove`, `indicator`, `range`, `track`, and labels where applicable                                                                                  |
-| Event timeline | `timeline`, `event`, `separator`, `marker`, `connector`, `content`                                                                                                                              |
+| Surface        | `data-cratis-part` values                                                                                                                                                                                                                                                                                              |
+| -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Button         | `root`, `icon`, `label`, `spinner`                                                                                                                                                                                                                                                                                     |
+| Dialog         | `backdrop`, `positioner`, `root`, `header`, `title`, `close`, `content`, `footer`, `confirm`, `cancel`                                                                                                                                                                                                                 |
+| Dropdown       | `root`, `trigger`, `value`, `clear`, `indicator`, `filter`, `popover`, `listbox`, `option`, `multiple`                                                                                                                                                                                                                 |
+| DatePicker     | `root`, `group`, `input`, `placeholder`, `segment`, `trigger`, `popover`, `dialog`, `calendar`, `header`, `heading`, `previous`, `next`, `grid`, `cell`, `button-bar`, `today`, `clear`                                                                                                                                |
+| DataTable      | `root`, `search`, `search-input`, `table-container`, `table`, `head`, `header-row`, `header-cell`, `header-content`, `sort`, `filter-trigger`, `filter-popover`, `filter-menu`, `filter-actions`, `body`, `row`, `cell`, `empty-row`, `empty-cell`                                                                     |
+| TablePaginator | `root`, `range`, `info`; paginator buttons expose the documented Button parts                                                                                                                                                                                                                                          |
+| Stepper        | `root`, `list`, `step`, `header`, `number`, `title`, `separator`, `panels`, `panel`                                                                                                                                                                                                                                    |
+| Toaster        | `region`, `toast`, `icon`, `content`, `title`, `description`, `action`, `close`                                                                                                                                                                                                                                        |
+| Tooltip        | `popup`; a standalone trigger uses `trigger`, while a composed child preserves its own component part and gains `data-cratis-tooltip-trigger`                                                                                                                                                                          |
+| Command fields | `root`, plus the typed field-specific values listed above (`input`, `textarea`, `box`, `control`, `handle`, `indicator`, `option`, `item`, `remove`, `value`, `star`, `toggle`)                                                                                                                                        |
+| Display        | component roots plus `image`, `fallback`, `remove`, `indicator`, `range`, `track`, and labels where applicable                                                                                                                                                                                                         |
+| Event timeline | `timeline`, `event`, `separator`, `marker`, `connector`, `content`                                                                                                                                                                                                                                                     |
 | Toolbar        | `root`, `button`, `icon`, `label`, `fanout-root`, `fanout-trigger`, `fanout-panel`, `toolbar-group`, `toolbar-separator`, `toolbar-layout`, `toolbar-section`, `toolbar-context`, `toolbar-slot`, `toolbar-slot-incoming`, `toolbar-slot-outgoing`, `toolbar-folder`, `toolbar-folder-trigger`, `toolbar-folder-panel` |
 
 `header-content`, `sort`, and `filter-trigger` are DOM targets but are not `DataTableParts` keys. Customize them with CSS rather than claiming a nonexistent typed key.
 
+`Tooltip` enhances the actual focusable child. If that child already has a component-specific `data-cratis-part` (for example `button`, `toolbar-folder-trigger`, or `fanout-trigger`), Tooltip preserves it and adds `data-cratis-tooltip-trigger`. It uses `data-cratis-part='trigger'` only for a child without its own stable part.
+
 ```css
 [data-cratis-part='header-cell'] {
     text-transform: uppercase;
diff --git a/Documentation/Styling/themed.md b/Documentation/Styling/themed.md
index f9aa1349..c72cf7fe 100644
--- a/Documentation/Styling/themed.md
+++ b/Documentation/Styling/themed.md
@@ -11,15 +11,23 @@ A Components theme is CSS. It does not require a JavaScript preset or provider c
 :root {
     --cratis-primary-color: var(--brand-accent-700);
     --cratis-primary-color-text: var(--brand-text-inverse);
+    --cratis-action-background: var(--brand-action);
+    --cratis-action-background-hover: var(--brand-action-hover);
+    --cratis-action-background-active: var(--brand-action-active);
+    --cratis-action-text: var(--brand-on-action);
     --cratis-surface-ground: var(--brand-canvas);
     --cratis-surface-card: var(--brand-surface);
     --cratis-surface-overlay: var(--brand-surface);
     --cratis-surface-hover: var(--brand-subtle);
     --cratis-surface-border: var(--brand-border);
+    --cratis-control-background: var(--brand-control);
+    --cratis-control-border: var(--brand-control-border);
     --cratis-text-color: var(--brand-text-primary);
     --cratis-text-color-secondary: var(--brand-text-secondary);
     --cratis-border-radius: 0.5rem;
     --cratis-focus-ring: var(--brand-focus-ring);
+    --cratis-shadow-overlay: var(--brand-overlay-shadow);
+    --cratis-shadow-dialog: var(--brand-dialog-shadow);
 }
 ```
 
diff --git a/Documentation/Styling/unstyled.md b/Documentation/Styling/unstyled.md
index 3da04ec9..73678434 100644
--- a/Documentation/Styling/unstyled.md
+++ b/Documentation/Styling/unstyled.md
@@ -14,12 +14,20 @@ import '@cratis/components/styles';
 :root {
     --cratis-primary-color: var(--product-accent);
     --cratis-primary-color-text: var(--product-on-accent);
+    --cratis-action-background: var(--product-action);
+    --cratis-action-background-hover: var(--product-action-hover);
+    --cratis-action-background-active: var(--product-action-active);
+    --cratis-action-text: var(--product-on-action);
     --cratis-surface-card: var(--product-surface);
     --cratis-surface-overlay: var(--product-surface-raised);
     --cratis-surface-border: var(--product-border);
+    --cratis-control-background: var(--product-control);
+    --cratis-control-border: var(--product-control-border);
     --cratis-text-color: var(--product-text);
     --cratis-text-color-secondary: var(--product-text-muted);
     --cratis-focus-ring: 0 0 0 3px var(--product-focus-ring);
+    --cratis-shadow-overlay: var(--product-overlay-shadow);
+    --cratis-shadow-dialog: var(--product-dialog-shadow);
 }
 ```
 
diff --git a/Documentation/Toolbar/index.md b/Documentation/Toolbar/index.md
index 63cde424..52b2e9f1 100644
--- a/Documentation/Toolbar/index.md
+++ b/Documentation/Toolbar/index.md
@@ -4,36 +4,37 @@ The `Toolbar` component provides a canvas-style icon toolbar with support for or
 
 Pass React icon nodes or product-owned SVGs for a dependency-free toolbar. Consumer-owned icon-font class strings remain accepted, but Components does not install an icon font or infer provider base classes; the product must load the matching stylesheet and pass the complete class string.
 
+The root renders `role='toolbar'`, orientation semantics, and an accessible name. `aria-label` defaults to `Tools`; localize it or use `aria-labelledby`. Folder and fan-out panels close on Escape, return focus to their trigger, become inert while collapsed, and suppress transitions under reduced motion.
+
 ## Components
 
-| Component | Description |
-|---|---|
-| `Toolbar` | Container that groups toolbar buttons into a pill-shaped bar |
-| `ToolbarButton` | Button that renders non-empty `text` or otherwise an `icon`, with a hover tooltip |
-| `ToolbarSeparator` | Visual divider that separates groups of buttons |
-| `ToolbarSection` | Section within a toolbar that animates between named contexts |
-| `ToolbarContext` | Named context (set of buttons) inside a `ToolbarSection` |
-| `ToolbarFanOutItem` | Button that slides out a horizontal sub-panel on click |
-| `ToolbarFolder` | Button that reveals a dynamically sized grid of buttons on click |
-| `ToolbarGroup` | Formal logical sub-group of toolbar items with an automatic visual separator between adjacent groups |
-| `ToolbarSlotProvider` | Context provider that enables the slot system — wrap the application root or a feature boundary |
-| `ToolbarSlot` | Renders nothing itself; injects its `children` into the named slot at the given `order` position |
-| `ToolbarLayout` | Named layout boundary that swaps default content for matching slot content |
+| Component             | Description                                                                                          |
+| --------------------- | ---------------------------------------------------------------------------------------------------- |
+| `Toolbar`             | Container that groups toolbar buttons into a pill-shaped bar                                         |
+| `ToolbarButton`       | Button that renders non-empty `text` or otherwise an `icon`, with a hover tooltip                    |
+| `ToolbarSeparator`    | Visual divider that separates groups of buttons                                                      |
+| `ToolbarSection`      | Section within a toolbar that animates between named contexts                                        |
+| `ToolbarContext`      | Named context (set of buttons) inside a `ToolbarSection`                                             |
+| `ToolbarFanOutItem`   | Button that slides out a horizontal sub-panel on click                                               |
+| `ToolbarFolder`       | Button that reveals a dynamically sized grid of buttons on click                                     |
+| `ToolbarGroup`        | Formal logical sub-group of toolbar items with an automatic visual separator between adjacent groups |
+| `ToolbarSlotProvider` | Context provider that enables the slot system — wrap the application root or a feature boundary      |
+| `ToolbarSlot`         | Renders nothing itself; injects its `children` into the named slot at the given `order` position     |
+| `ToolbarLayout`       | Named layout boundary that swaps default content for matching slot content                           |
 
 ## Stable composition and measurement parts
 
 Deeply styled products should measure and select Toolbar structure through typed `pt` surfaces and `data-cratis-part`, not implementation class names.
 
-| Component | Type | Stable parts |
-| --- | --- | --- |
-| `Toolbar` | `ToolbarParts` | `root` → `root` |
-| `ToolbarButton` | `ToolbarButtonParts` | `root`, `icon`, `label` |
-| `ToolbarGroup` | `ToolbarGroupParts` | `root` → `toolbar-group`; `slot`, `incoming`, `outgoing` |
-| `ToolbarSeparator` | `ToolbarSeparatorParts` | `root` → `toolbar-separator` |
-| `ToolbarLayout` | `ToolbarLayoutParts` | `root` → `toolbar-layout`; `slot`, `incoming`, `outgoing` |
-| `ToolbarSection` | `ToolbarSectionParts` | `root` → `toolbar-section`; `context` → `toolbar-context` |
-| `ToolbarFolder` | `ToolbarFolderParts` | `root`, `trigger`, `panel` |
-| `ToolbarFanOutItem` | `ToolbarFanOutParts` | `root`, `trigger`, `panel` |
-
-Slot transitions expose `toolbar-slot`, `toolbar-slot-incoming`, and `toolbar-slot-outgoing`. Contexts expose `data-context-name` and `data-active`; sections and slots expose `data-transitioning`. Folder and fan-out panels expose `data-expanded`. Collapsed/inactive panels and contexts are inert so hidden tools do not remain in keyboard navigation.
-
+| Component           | Type                    | Stable parts                                              |
+| ------------------- | ----------------------- | --------------------------------------------------------- |
+| `Toolbar`           | `ToolbarParts`          | `root` → `root`                                           |
+| `ToolbarButton`     | `ToolbarButtonParts`    | `root`, `icon`, `label`                                   |
+| `ToolbarGroup`      | `ToolbarGroupParts`     | `root` → `toolbar-group`; `slot`, `incoming`, `outgoing`  |
+| `ToolbarSeparator`  | `ToolbarSeparatorParts` | `root` → `toolbar-separator`                              |
+| `ToolbarLayout`     | `ToolbarLayoutParts`    | `root` → `toolbar-layout`; `slot`, `incoming`, `outgoing` |
+| `ToolbarSection`    | `ToolbarSectionParts`   | `root` → `toolbar-section`; `context` → `toolbar-context` |
+| `ToolbarFolder`     | `ToolbarFolderParts`    | `root`, `trigger`, `panel`                                |
+| `ToolbarFanOutItem` | `ToolbarFanOutParts`    | `root`, `trigger`, `panel`                                |
+
+Slot transitions expose `toolbar-slot`, `toolbar-slot-incoming`, and `toolbar-slot-outgoing`. Contexts expose `data-context-name` and `data-active`; sections and slots expose `data-transitioning`. Folder and fan-out panels expose `data-expanded` and `data-direction`; fan-out also exposes `data-settled`, while folders expose `data-mode`. Collapsed/inactive panels and contexts are inert so hidden tools do not remain in keyboard navigation.
diff --git a/Documentation/Toolbar/slots.md b/Documentation/Toolbar/slots.md
index 05704215..d1a76ed7 100644
--- a/Documentation/Toolbar/slots.md
+++ b/Documentation/Toolbar/slots.md
@@ -7,7 +7,15 @@ The slot system lets any component in the React tree inject toolbar items into a
 Wrap the relevant part of the tree in a `ToolbarSlotProvider`, give a `ToolbarGroup` a `slotName`, and use `ToolbarSlot` anywhere inside the provider to inject items:
 
 ```tsx
-import { ToolbarSlotProvider, ToolbarSlot } from '@cratis/components/Toolbar';
+import {
+    Toolbar,
+    ToolbarButton,
+    ToolbarContext,
+    ToolbarGroup,
+    ToolbarSection,
+    ToolbarSlot,
+    ToolbarSlotProvider,
+} from '@cratis/components/Toolbar';
 
 export const MyCanvas = () => (
     <ToolbarSlotProvider>
@@ -19,7 +27,10 @@ export const MyCanvas = () => (
 
         {/* The feature injects its own button — no prop drilling */}
         <ToolbarSlot slotName='canvas-tools' order={10}>
-            <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Feature: Favorite' />
+            <ToolbarButton
+                icon={<span aria-hidden='true'>◆</span>}
+                title='Feature: Favorite'
+            />
         </ToolbarSlot>
 
         <MyFeatureComponent />
@@ -34,9 +45,7 @@ export const MyCanvas = () => (
 Creates the slot registry and makes it available to the rest of the tree. Place it as high as needed so that both the toolbar and all contributing components fall inside it.
 
 ```tsx
-<ToolbarSlotProvider>
-    {children}
-</ToolbarSlotProvider>
+<ToolbarSlotProvider>{children}</ToolbarSlotProvider>
 ```
 
 ### `ToolbarSlot`
@@ -53,11 +62,11 @@ The component registers on mount and unregisters on unmount, so conditional rend
 
 ## Props
 
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `slotName` | `string` | required | The slot to inject into |
-| `order` | `number` | `0` | Determines render position relative to other slot items — lower values appear first |
-| `children` | `ReactNode` | required | The toolbar item(s) to inject |
+| Prop       | Type        | Default  | Description                                                                         |
+| ---------- | ----------- | -------- | ----------------------------------------------------------------------------------- |
+| `slotName` | `string`    | required | The slot to inject into                                                             |
+| `order`    | `number`    | `0`      | Determines render position relative to other slot items — lower values appear first |
+| `children` | `ReactNode` | required | The toolbar item(s) to inject                                                       |
 
 ## Slot Hosts
 
diff --git a/Documentation/Toolbar/toolbar-layout.md b/Documentation/Toolbar/toolbar-layout.md
index 100700c4..ac44d4dc 100644
--- a/Documentation/Toolbar/toolbar-layout.md
+++ b/Documentation/Toolbar/toolbar-layout.md
@@ -6,19 +6,28 @@ The key capability: any component in the React tree can inject a complete toolba
 
 ## When to use `ToolbarLayout` vs `ToolbarGroup`
 
-| | `ToolbarGroup` | `ToolbarLayout` |
-|---|---|---|
-| Visual container | Yes — renders as a pill | No — transparent pass-through |
-| Slot content | Appended to its own children | Replaces fallback children |
-| Intended content | Individual buttons | Complete toolbar structures (groups, sections, separators) |
-| Use case | Cluster related buttons | Entire swappable toolbar regions |
+|                  | `ToolbarGroup`               | `ToolbarLayout`                                            |
+| ---------------- | ---------------------------- | ---------------------------------------------------------- |
+| Visual container | Yes — renders as a pill      | No — transparent pass-through                              |
+| Slot content     | Appended to its own children | Replaces fallback children                                 |
+| Intended content | Individual buttons           | Complete toolbar structures (groups, sections, separators) |
+| Use case         | Cluster related buttons      | Entire swappable toolbar regions                           |
 
 ## Quick Start
 
 Wrap the toolbar and the contributing components in a `ToolbarSlotProvider`. Give `ToolbarLayout` a `name` prop that external components match in their `ToolbarSlot`:
 
 ```tsx
-import { ToolbarSlotProvider, ToolbarSlot } from '@cratis/components/Toolbar';
+import { useMemo } from 'react';
+import {
+    Toolbar,
+    ToolbarButton,
+    ToolbarGroup,
+    ToolbarLayout,
+    ToolbarSeparator,
+    ToolbarSlot,
+    ToolbarSlotProvider,
+} from '@cratis/components/Toolbar';
 
 export const AppShell = () => (
     <ToolbarSlotProvider>
@@ -27,7 +36,10 @@ export const AppShell = () => (
             <ToolbarLayout name='canvas-tools'>
                 {/* Fallback — shown when no slot content is registered */}
                 <ToolbarGroup>
-                    <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Draw (default)' />
+                    <ToolbarButton
+                        icon={<span aria-hidden='true'>◆</span>}
+                        title='Draw (default)'
+                    />
                 </ToolbarGroup>
             </ToolbarLayout>
         </Toolbar>
@@ -38,20 +50,36 @@ export const AppShell = () => (
 
 // Anywhere in the tree — injects a complete multi-group layout:
 const CanvasFeature = () => {
-    const content = useMemo(() => (
-        <>
-            <ToolbarGroup>
-                <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Favorite' />
-                <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Like' />
-            </ToolbarGroup>
-            <ToolbarSeparator />
-            <ToolbarGroup>
-                <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title='Quick action' />
-            </ToolbarGroup>
-        </>
-    ), []);
-
-    return <ToolbarSlot slotName='canvas-tools' order={0}>{content}</ToolbarSlot>;
+    const content = useMemo(
+        () => (
+            <>
+                <ToolbarGroup>
+                    <ToolbarButton
+                        icon={<span aria-hidden='true'>◆</span>}
+                        title='Favorite'
+                    />
+                    <ToolbarButton
+                        icon={<span aria-hidden='true'>◆</span>}
+                        title='Like'
+                    />
+                </ToolbarGroup>
+                <ToolbarSeparator />
+                <ToolbarGroup>
+                    <ToolbarButton
+                        icon={<span aria-hidden='true'>◆</span>}
+                        title='Quick action'
+                    />
+                </ToolbarGroup>
+            </>
+        ),
+        [],
+    );
+
+    return (
+        <ToolbarSlot slotName='canvas-tools' order={0}>
+            {content}
+        </ToolbarSlot>
+    );
 };
 ```
 
@@ -62,8 +90,10 @@ The `children` prop provides default content rendered when no slot content has b
 If the layout region has no meaningful default, omit `children` entirely — `ToolbarLayout` renders nothing when both its slot and its children are empty:
 
 ```tsx
-{/* No fallback — layout is invisible until a feature registers */}
-<ToolbarLayout name='mode-tools' />
+{
+    /* No fallback — layout is invisible until a feature registers */
+}
+<ToolbarLayout name='mode-tools' />;
 ```
 
 ## Multiple Contributors
@@ -103,16 +133,16 @@ const modeContent = {
 // The ToolbarLayout region updates automatically as activeMode changes:
 <ToolbarSlot slotName='mode-tools' order={0}>
     {modeContent[activeMode]}
-</ToolbarSlot>
+</ToolbarSlot>;
 ```
 
 ## Props
 
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `name` | `string` | required | Identifies the layout region. Match this in `ToolbarSlot` `slotName`. |
-| `children` | `ReactNode` | — | Fallback content shown when no slot content is registered. |
-| `orientation` | `'vertical' \| 'horizontal'` | `'vertical'` | Layout direction — should match the parent `Toolbar`. |
+| Prop          | Type                         | Default      | Description                                                           |
+| ------------- | ---------------------------- | ------------ | --------------------------------------------------------------------- |
+| `name`        | `string`                     | required     | Identifies the layout region. Match this in `ToolbarSlot` `slotName`. |
+| `children`    | `ReactNode`                  | —            | Fallback content shown when no slot content is registered.            |
+| `orientation` | `'vertical' \| 'horizontal'` | `'vertical'` | Layout direction — should match the parent `Toolbar`.                 |
 
 ## Related
 
diff --git a/Documentation/choosing-a-component.md b/Documentation/choosing-a-component.md
index 9cffc778..d4bac43f 100644
--- a/Documentation/choosing-a-component.md
+++ b/Documentation/choosing-a-component.md
@@ -17,6 +17,7 @@ The question is whether confirming the form **runs a command**, and whether it's
 | Run a command, but gather input across **named steps**   | [`StepperCommandDialog`](./StepperCommandDialog/index.md) | A wizard over a single command — validate per step, navigate back and forth, execute at the end.      |
 | Embed command fields **in a page**, not a dialog         | [`CommandForm`](./CommandForm/index.md)                   | The same typed fields `CommandDialog` uses, without the dialog chrome.                                |
 | Collect data and return it **without** running a command | [`Dialog`](./Dialogs/index.md)                            | A confirmation or data-entry dialog that hands values back to the caller. No command involved.        |
+| Edit ordinary local React state                          | Native/product controls                                   | CommandForm fields bind generated command properties; they are not a general local-state input suite. |
 
 Rule of thumb: **if confirming the dialog executes a generated command, it's a `CommandDialog`** (or its
 stepper variant). If it just gathers values and returns them, it's a `Dialog`. Never reach for
@@ -28,15 +29,21 @@ consistently.
 Both render a query or observable query; the question is whether you want a **whole page** or a **table
 to drop into one**.
 
-| You want to…                                               | Use                                   | Why                                                                                              |
-| ---------------------------------------------------------- | ------------------------------------- | ------------------------------------------------------------------------------------------------ |
-| A full screen: a list, a toolbar of actions, detail panels | [`DataPage`](./DataPage/index.md)     | A resizable page composition with toolbar and detail areas wired to the query.                   |
-| Just a grid inside a layout you already have               | [`DataTables`](./DataTables/index.md) | The table wrappers — paging, sorting, and selection over a query — without the page scaffolding. |
+| You want to…                                               | Use                                   | Why                                                                                               |
+| ---------------------------------------------------------- | ------------------------------------- | ------------------------------------------------------------------------------------------------- |
+| A full screen: a list, a toolbar of actions, detail panels | [`DataPage`](./DataPage/index.md)     | A resizable page composition with toolbar and detail areas wired to the query.                    |
+| A table over an Arc query or observable query              | [`DataTables`](./DataTables/index.md) | Query wrappers with server paging and loaded-page rendering.                                      |
+| A semantic table over an already-loaded array              | `DataTableCore`                       | Local rows, single selection, loaded-page filtering/sorting, scrolling, and stable parts.         |
+| Grouping, row expansion, or controlled lazy/server sorting | Product-owned/retained table adapter  | Components does not claim these advanced state contracts; keep the existing adapter deliberately. |
 
 If you're building a list-screen-with-actions from scratch, start with the
 [list screen recipe](./list-screen-with-actions.md), which composes `DataPage` with `CommandDialog`
 actions.
 
+## Actions and tool palettes
+
+Use `ActionMenubar` or an ordinary product action row for flat page commands. Use [`Toolbar`](./Toolbar/index.md) for a canvas/tool-palette interaction with active tools, groups, slots, folders, and fan-out panels. It is not a one-for-one replacement for a generic Prime Toolbar.
+
 ## Spatial workspaces
 
 Use [`Canvas`](./Canvas/index.md) for a pan/zoom workspace containing positioned DOM or Pixi items, optional minimap/controls, notes, regions, or collaborative chat shapes. Canvas owns interaction and rendering primitives; the application owns persistence and behavior. Arc can provide commands, queries, validation, authorization, and generated bindings on its own. Applications using Arc plus Chronicle can additionally project event streams into read models.
@@ -47,4 +54,6 @@ A typical CRUD screen combines these: a `DataPage` lists the rows, a toolbar but
 `CommandDialog` to add one, and selecting a row opens another `CommandDialog` to edit it. That whole
 screen is the [list screen with actions](./list-screen-with-actions.md) recipe.
 
+Components does not attempt to replace every toolkit widget. Tabs, sidebars, timelines, knobs, select-button groups, general popovers, and specialized locale-aware inputs may remain product-owned or in a separately configured UI toolkit until an intentional Components API exists.
+
 Still deciding how to style any of this? See [Styling](./Styling/index.md).
diff --git a/Documentation/coming-from-primereact.md b/Documentation/coming-from-primereact.md
index 7d58759f..234acf3c 100644
--- a/Documentation/coming-from-primereact.md
+++ b/Documentation/coming-from-primereact.md
@@ -17,13 +17,40 @@ Components 4 does not render PrimeReact or expose Prime types. The public API us
 | Tag / Badge / Message / Skeleton | `Display`                             |
 | Toast / Toaster                  | `Notifications`                       |
 
-Use native HTML for simple application-owned controls that do not need Components behavior.
+Use native HTML for simple application-owned controls that do not need Components behavior. CommandForm fields are specifically for generated command properties; they are not a general local-state input suite.
+
+Components does not provide one-for-one replacements for every Prime widget. Keep an application-owned or direct Prime surface during migration when it requires tabs, sidebars, timelines, knobs, select-button groups, general popovers, grouped/expandable tables, or controlled lazy/server table sorting. Components `Toolbar` is a canvas/tool-palette control, not a replacement for every page action bar.
+
+## Map common Dialog props
+
+| Prime Dialog             | Components Dialog                                     |
+| ------------------------ | ----------------------------------------------------- |
+| `header`                 | `title`                                               |
+| `visible`                | `visible`                                             |
+| `onHide`                 | `onCancel` or `onClose`, according to product meaning |
+| `footer`                 | `buttons` custom content                              |
+| `style={{ width }}`      | `width`                                               |
+| Prime pass-through slots | `DialogParts` through `pt`                            |
+
+A custom `buttons` footer owns its close result through `useDialogContext`; Components cannot infer which custom action confirms or cancels.
+
+## Choose the table boundary
+
+- Use `DataTableCore` for an already-loaded local array.
+- Use `DataTableForQuery` for a paged Arc query.
+- Use `DataTableForObservableQuery` for an observable paged Arc query.
+- Use `DataPage` for a complete list screen with actions and optional details.
+- Keep an application-owned/Prime adapter for grouping, row expansion, or controlled lazy/server sorting until an explicit state contract exists.
+
+For direct Prime migration, rename `value` to `data`. Replace compact size, stripes, and column alignment with `DataTableParts`, `Column` classes/styles, and product CSS. Prime `Column` cannot be passed to a Components table or `DataPage`; import the Cratis marker for those surfaces.
 
 ## Replace provider configuration
 
 If Components was the application's only Prime consumer, remove `PrimeReactProvider`, license keys, presets, renderer defaults, and global Prime pass-through configuration. Mount `CratisComponentsProvider` for locale, owned labels, and the optional toaster.
 
-If the application still imports Prime directly, keep its Prime provider, styling, and license configuration around those remaining surfaces while mounting `CratisComponentsProvider` independently for Components. Remove the Prime root only after the downstream direct imports are gone.
+If the application still imports Prime directly, keep its installed-version provider, styling, dependencies, and license configuration around those remaining surfaces while mounting `CratisComponentsProvider` independently for Components. Remove the Prime root only after direct UI imports, icon classes, generated schemas, and any intentional prototype/catalog tooling are accounted for.
+
+A PrimeReact 10 / Components 2 application may migrate directly to Components 4. It does not need to adopt PrimeReact 11 first; keep Prime 10 isolated while replacing surfaces in batches.
 
 ## Replace styling
 
diff --git a/Documentation/getting-started.mdx b/Documentation/getting-started.mdx
index 17ba3c01..b3897e89 100644
--- a/Documentation/getting-started.mdx
+++ b/Documentation/getting-started.mdx
@@ -36,7 +36,7 @@ You've built an Arc backend—a `RegisterAuthor` command and an `AllAuthors` que
     import '@cratis/components/theme'; // optional baseline appearance
     ```
 
-    `tokens` declares the stable `--cratis-*` variables. `styles` supplies component structure. `theme` provides the optional baseline light/dark values.
+    `tokens` defines stable `--cratis-*` variables with conservative light defaults. `styles` supplies no-Preflight component structure in low-priority Cratis layers. `theme` adds automatic/explicit dark mode, forced colors, and themed subtrees.
 
     A product with its own design system can omit `theme`, map its own variables onto `--cratis-*`, and customize stable `data-cratis-part` elements or `pt` attributes.
 
@@ -48,7 +48,7 @@ You've built an Arc backend—a `RegisterAuthor` command and an `AllAuthors` que
 3. **Mount the provider** around your application:
 
     ```tsx title="App.tsx"
-    import { CratisComponentsProvider } from '@cratis/components';
+    import { CratisComponentsProvider } from '@cratis/components/Common';
 
     export const App = () => (
         <CratisComponentsProvider value={{ locale: 'en-US' }} toaster>
diff --git a/Documentation/migration.md b/Documentation/migration.md
index d676559e..017b7a55 100644
--- a/Documentation/migration.md
+++ b/Documentation/migration.md
@@ -46,10 +46,10 @@ A custom product design can omit `theme`, define the `--cratis-*` variables itse
 
 ## Simplify the provider
 
-The provider now owns locale and Components-specific labels. It temporarily accepts unknown legacy renderer keys so staged source migrations compile, but ignores them. Remove PrimeUI keys, renderer presets, global Prime pass-through maps, ripple settings, and renderer defaults.
+The provider now owns locale and Components-specific labels. Unknown renderer keys are a type error so a migrated app cannot silently lose its theme, license, global pass-through, ripple, or z-index behavior. Remove those keys from `CratisComponentsProvider` and configure any remaining direct Prime provider independently.
 
 ```tsx
-import { CratisComponentsProvider } from '@cratis/components';
+import { CratisComponentsProvider } from '@cratis/components/Common';
 
 export const ApplicationRoot = ({ children }: { children: React.ReactNode }) => (
     <CratisComponentsProvider
@@ -79,7 +79,7 @@ export const ApplicationRoot = ({ children }: { children: React.ReactNode }) =>
 );
 ```
 
-`locales` remains temporarily accepted and maps the old paginator/date labels, but new code should use `messages`. Unknown renderer keys are ignored and should be removed.
+`locales` remains temporarily accepted and maps the old paginator/date labels, but new code should use `messages`. Renderer keys such as `license`, `theme`, `defaults`, `pt`, `ripple`, `unstyled`, and z-index settings are not part of this provider.
 
 ## Replace renderer presets with tokens
 
@@ -95,15 +95,15 @@ There is no compatibility-package replacement in Components 4. Stay on Component
 
 ### Removed symbol mapping
 
-| Removed Components 3 export | Components 4 action |
-| --- | --- |
-| `styledMode`, `StyledModeOptions`, `CratisPreset`, `primeReactStyles` | Remove the renderer configuration. Pass locale/messages to `CratisComponentsProvider`, import the Cratis stylesheet layers, and map product values directly to `--cratis-*`. |
-| `primeReactCssLayer`, `primeReactCssLayerOrder` | Delete unless the product still owns direct Prime CSS. Product cascade-layer ordering now belongs in product CSS. |
-| `cratisDarkModeSelector` | Use the product's own theme selector and assign the corresponding `--cratis-*` values under it. |
-| `assertPrimeReact11PassThroughCompatibility` | Delete after migrating every renderer slot to a typed Cratis `*Parts` surface. Package export verification replaces the old renderer-sentinel check. |
-| `components3PrimeReact11PassThroughContract`, `PrimeReact11PassThroughComponent` | Replace with the component-specific `DialogParts`, `DataTableParts`, `TablePaginatorParts`, `StepperParts`, `ToolbarParts`, and related public types. |
-| `primeReact11PassThroughSentinelAttribute`, `primeReact11PassThroughSentinelPreset` | Replace sentinel selectors with documented `data-cratis-part` and state attributes. |
-| `@cratis/components/primereact-v10-palette` variables | Map the product's canonical tokens directly to `--cratis-*`; do not preserve a product → Prime → Cratis bridge. |
+| Removed Components 3 export                                                         | Components 4 action                                                                                                                                                          |
+| ----------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `styledMode`, `StyledModeOptions`, `CratisPreset`, `primeReactStyles`               | Remove the renderer configuration. Pass locale/messages to `CratisComponentsProvider`, import the Cratis stylesheet layers, and map product values directly to `--cratis-*`. |
+| `primeReactCssLayer`, `primeReactCssLayerOrder`                                     | Delete unless the product still owns direct Prime CSS. Product cascade-layer ordering now belongs in product CSS.                                                            |
+| `cratisDarkModeSelector`                                                            | Use the product's own theme selector and assign the corresponding `--cratis-*` values under it.                                                                              |
+| `assertPrimeReact11PassThroughCompatibility`                                        | Delete after migrating every renderer slot to a typed Cratis `*Parts` surface. Package export verification replaces the old renderer-sentinel check.                         |
+| `components3PrimeReact11PassThroughContract`, `PrimeReact11PassThroughComponent`    | Replace with the component-specific `DialogParts`, `DataTableParts`, `TablePaginatorParts`, `StepperParts`, `ToolbarParts`, and related public types.                        |
+| `primeReact11PassThroughSentinelAttribute`, `primeReact11PassThroughSentinelPreset` | Replace sentinel selectors with documented `data-cratis-part` and state attributes.                                                                                          |
+| `@cratis/components/primereact-v10-palette` variables                               | Map the product's canonical tokens directly to `--cratis-*`; do not preserve a product → Prime → Cratis bridge.                                                              |
 
 Before:
 
@@ -258,45 +258,125 @@ export const AdaComponentsProvider = ({
 );
 ```
 
+Import Components structure but omit its optional theme, then load Ada's mapping:
+
+```ts
+import '@cratis/components/tokens';
+import '@cratis/components/styles';
+import './ada-components.css';
+```
+
 ```css
 :root {
-    --cratis-primary-color: var(--ada-accent-700);
-    --cratis-primary-color-text: var(--ada-text-inverse);
-    --cratis-primary-400: var(--ada-accent-400);
-    --cratis-primary-500: var(--ada-accent-500);
+    --cratis-surface-0: var(--ada-surface);
+    --cratis-surface-100: var(--ada-subtle);
     --cratis-surface-ground: var(--ada-canvas);
-    --cratis-surface-card: var(--ada-surface);
     --cratis-surface-section: var(--ada-subtle);
+    --cratis-surface-card: var(--ada-surface);
     --cratis-surface-overlay: var(--ada-surface);
+    --cratis-surface-hover: var(--ada-subtle);
     --cratis-surface-border: var(--ada-border-default);
+    --cratis-control-background: var(--ada-surface);
+    --cratis-control-border: var(--ada-border-default);
+
     --cratis-text-color: var(--ada-text-primary);
     --cratis-text-color-secondary: var(--ada-text-secondary);
+
+    --cratis-primary-color: var(--ada-accent-700);
+    --cratis-primary-color-text: var(--ada-text-inverse);
+    --cratis-primary-300: var(--ada-accent-300);
+    --cratis-primary-400: var(--ada-accent-400);
+    --cratis-primary-500: var(--ada-accent-500);
+    --cratis-primary-600: var(--ada-accent-600);
+    --cratis-action-background: var(--ada-accent-500);
+    --cratis-action-background-hover: var(--ada-accent-600);
+    --cratis-action-background-active: var(--ada-accent-700);
+    --cratis-action-text: var(--ada-text-inverse);
+
     --cratis-highlight-bg: var(--ada-accent-50);
+    --cratis-highlight-text-color: var(--ada-accent-700);
+    --cratis-green-500: var(--ada-success-fg);
+    --cratis-orange-500: var(--ada-warning-fg);
+    --cratis-red-500: var(--ada-error-fg);
+    --cratis-info-background: var(--ada-info-fg);
+    --cratis-info-text: var(--ada-text-inverse);
+    --cratis-success-background: var(--ada-success-fg);
+    --cratis-success-text: var(--ada-text-inverse);
+    --cratis-warning-background: var(--ada-warning-fg);
+    --cratis-warning-text: var(--ada-text-inverse);
+    --cratis-danger-background: var(--ada-error-fg);
+    --cratis-danger-text: var(--ada-text-inverse);
+    --cratis-control-height: var(--ada-control-min-size);
+    --cratis-control-height-small: var(--ada-control-min-size);
+    --cratis-control-height-large: var(--ada-control-min-size);
+    --cratis-border-radius: 6px;
     --cratis-focus-ring: var(--ada-ring-focus);
+    --cratis-maskbg: var(--ada-scrim);
 }
 ```
 
+Because these assignments reference Ada tokens, Ada's existing dark, enhanced-contrast, control-size, status, and accessibility selectors flow through without duplicating the mapping. Ada continues to own typography, spacing, motion, elevation, and product-specific component treatments.
+
+If Core still uses Prime's locale-aware `InputNumber`, keep it as an explicitly bounded Prime island. Mount the Prime provider independently around that remaining surface and retain its installed-version theme/license requirements; do not put renderer keys back into `CratisComponentsProvider`. Lobby can remove Prime as soon as it has no direct Prime imports. Remove the separate Prime provider only when number grouping, decimal handling, fraction digits, prefix/suffix, min/max, and command binding have an accepted renderer-independent replacement.
+
 This preserves Ada's token and theme ownership while removing the circular Ada → Prime preset → Prime variables → Cratis translation.
 
 Ada's custom role filter must migrate in the same change: replace its Prime `FilterMatchMode` import with `DataTableFilterMatchMode`, replace `registerMatcher` with `registerDataTableFilterMatcher`, and store the returned `matchMode` in the role constraint. Built-in mode strings remain behaviorally compatible, but using the Cratis constants removes the renderer type dependency; custom registration never crosses registries automatically.
 
+### Stagehand: migrate directly from Components 2
+
+A PrimeReact 10 application does not need to adopt Components 3/PrimeReact 11 before moving to Components 4. Migrate the two boundaries independently:
+
+1. Keep the existing Prime 10 provider and Lara/product theme while direct Prime controls remain.
+2. Mount `CratisComponentsProvider` separately and import `tokens` plus `styles`.
+3. Map Stagehand's product palette directly to `--cratis-*`; omit the baseline `theme` when product CSS owns the appearance.
+4. Use the Cratis `Column` marker inside `DataPage`. Alias and retain Prime `Column` only for grouped/expandable direct Prime tables.
+5. Replace low-risk direct Button, Tag, Badge, Avatar, Message, Progress, Dropdown, Dialog, and Toast surfaces in batches.
+6. Retain Prime or build product primitives for tabs, sidebars, timelines, select-button groups, menubars, and advanced tables until their requirements have an intentional replacement.
+7. Retain PrimeIcons while class strings remain; move to React icons/product SVGs separately.
+
+This avoids an unnecessary intermediate Prime 11 migration and does not imply that Components configures Stagehand's remaining Prime 10 surfaces.
+
+### Chronicle Workbench: baseline-first coexistence
+
+Workbench can adopt Components 4 while retaining Prime 11 directly:
+
+1. Mount Components and Prime providers independently. Keep Prime dependencies, theme, and license for direct Prime controls.
+2. Remove `styledMode()` and `@cratis/components/primereact-v10-palette` from the Components side.
+3. Start with `tokens`, `styles`, and `theme` plus `cratis-dark` for the maintained baseline dark appearance.
+4. Keep temporary legacy `--surface-*` aliases in Workbench-owned CSS while direct Prime and old product styles remain; migrate those references to `--cratis-*` over time.
+5. Replace simple Workbench-owned Prime wrappers where Components or native composition has parity.
+6. Keep the application-owned grouped/lazy table adapter until #109 or another proven state seam covers its grouping and controlled server sorting.
+7. Use Components `Toolbar` only for canvas/tool-palette interactions. Keep a native action row for ordinary page actions rather than forcing a canvas toolbar replacement.
+
+Every Workbench/host entry point that renders Components must import the structural stylesheet. A package that imports Components must also declare it rather than relying on another workspace's dependency.
+
 ### Studio Liquid Glass migration
 
 Studio is the representative deeply customized consumer. Keep `LiquidGlassSurface` and product shaders in Studio; replace renderer types and selectors at the Components boundary:
 
 - Type dialog maps as `DialogParts`: `mask` → `backdrop`, `headerTitle` → `title`, and `closeButton` → `close`.
 - Type stepper maps as `StepperParts`: `nav` → `list`, `panelContainer` → `panels`, `stepperpanel.root` → `step`, `action` → `header`, and `content` → `panel`.
-- Toolbar composition now exposes `ToolbarParts`, `ToolbarButtonParts`, `ToolbarGroupParts`, `ToolbarSeparatorParts`, `ToolbarLayoutParts`, `ToolbarSectionParts`, `ToolbarFolderParts`, and `ToolbarFanOutParts`. Studio's measurement wrapper should identify boundaries through `toolbar-group`, `toolbar-separator`, `toolbar-layout`, `toolbar-section`, `toolbar-context`, and `toolbar-slot*` `data-cratis-part` values. It can keep its glass sibling and measurement algorithm as product architecture without depending on `.toolbar*` implementation classes.
-- For integrated Canvas controls, pass Studio's surface through `controlsGlassSurface` and localized actions through `controlsLabels`. Set `disableControlsGlass` only when Studio intentionally wants the low-cost CSS fallback.
-- Preserve `data-cratis-part` and product-owned `LAYER_ATTR` attributes through part props so capture exclusion remains explicit.
+- Toolbar composition now exposes `ToolbarParts`, `ToolbarButtonParts`, `ToolbarGroupParts`, `ToolbarSeparatorParts`, `ToolbarLayoutParts`, `ToolbarSectionParts`, `ToolbarFolderParts`, and `ToolbarFanOutParts`. Studio's measurement wrapper should identify boundaries through `toolbar-group`, `toolbar-separator`, `toolbar-layout`, `toolbar-section`, `toolbar-context`, and `toolbar-slot*` `data-cratis-part` values. Direction, mode, expanded, settled, active, and transitioning state are data attributes, so Studio can keep its glass sibling and measurement algorithm without depending on `.toolbar*` implementation classes.
+- For integrated Canvas controls, pass Studio's surface through `controlsGlassSurface`, localized actions through `controlsLabels`, and Studio's compositor marker names through `captureAttributes`. Set `disableControlsGlass` only when Studio intentionally wants the low-cost CSS fallback. Components no longer hardcodes or duplicates Studio's marker vocabulary.
+- Preserve product-owned capture attributes through the documented Canvas prop and ordinary part attributes; keep capture/compositor implementation in Studio.
 
 ```tsx
 <Canvas
+    captureAttributes={{
+        layer: 'data-liquid-glass-layer',
+        content: 'data-liquid-glass-content',
+        transformHost: 'data-liquid-glass-transform-host',
+    }}
     controlsGlassSurface={<LiquidGlassSurface /* Studio-owned shader props */ />}
     controlsLabels={canvasControlLabels}
 />
 ```
 
+For direct Prime tables, map `value` to `data`. Replace `size='small'`, `stripedRows`, and `Column align` with product classes through `DataTableParts` / `Column` body and header classes. Stop and keep an application-owned or Prime table when the surface requires grouping, row expansion, or controlled lazy/server sorting that `DataTableCore` does not claim to provide. Move Prime `Column` imports used inside `DataPage` to the Cratis marker independently from those advanced tables.
+
+Removing Prime UI imports is not the same as removing a deliberate Prime schema/prototype catalog. If Studio keeps Prime metadata generation or its PrimeReact prototype workspace, Prime remains an intentional tooling/product dependency and must be versioned and licensed on that basis even after application screens migrate.
+
 Paginator callbacks that formerly returned classes from renderer context must become static Cratis parts plus CSS state selectors:
 
 ```ts
@@ -359,7 +439,7 @@ import { Tooltip } from '@cratis/components/Common';
     <button type='button' aria-label='Account settings'>
         <FaGear aria-hidden='true' />
     </button>
-</Tooltip>
+</Tooltip>;
 ```
 
 ## Update tables
@@ -376,14 +456,14 @@ import { Tooltip } from '@cratis/components/Common';
 
 Prime's built-in match-mode **string values** continue to work because Components implements the same common predicates directly. Replace the renderer constants with Cratis constants to remove the type dependency:
 
-| Prime constant | Cratis constant |
-| --- | --- |
+| Prime constant                | Cratis constant                       |
+| ----------------------------- | ------------------------------------- |
 | `FilterMatchMode.STARTS_WITH` | `DataTableFilterMatchMode.StartsWith` |
-| `FilterMatchMode.CONTAINS` | `DataTableFilterMatchMode.Contains` |
-| `FilterMatchMode.EQUALS` | `DataTableFilterMatchMode.Equals` |
-| `FilterMatchMode.IN` | `DataTableFilterMatchMode.In` |
+| `FilterMatchMode.CONTAINS`    | `DataTableFilterMatchMode.Contains`   |
+| `FilterMatchMode.EQUALS`      | `DataTableFilterMatchMode.Equals`     |
+| `FilterMatchMode.IN`          | `DataTableFilterMatchMode.In`         |
 | `FilterMatchMode.DATE_BEFORE` | `DataTableFilterMatchMode.DateBefore` |
-| `FilterMatchMode.DATE_AFTER` | `DataTableFilterMatchMode.DateAfter` |
+| `FilterMatchMode.DATE_AFTER`  | `DataTableFilterMatchMode.DateAfter`  |
 
 Custom matcher registration is different: Prime `FilterService.register()` or an application helper around it does **not** populate the Components registry. Replace the registration and the constraint together:
 
@@ -397,9 +477,9 @@ import {
 const roleMatcher = registerDataTableFilterMatcher(
     'product.roleContains',
     (value, filter) =>
-        String(value ?? '').toLocaleLowerCase().includes(
-            String(filter ?? '').toLocaleLowerCase(),
-        ),
+        String(value ?? '')
+            .toLocaleLowerCase()
+            .includes(String(filter ?? '').toLocaleLowerCase()),
 );
 
 const filters: DataTableFilterMeta = {
diff --git a/Documentation/storybook.mdx b/Documentation/storybook.mdx
index e4fdd3c0..7a573b46 100644
--- a/Documentation/storybook.mdx
+++ b/Documentation/storybook.mdx
@@ -5,4 +5,6 @@ tableOfContents: false
 ---
 import StorybookEmbed from '@components/StorybookEmbed.astro';
 
+Use the Appearance toolbar to compare the maintained baseline in light and dark modes with a representative product-owned token mapping. Stories load the same prefixed, layered, no-Preflight CSS contract as the published package. The Accessibility panel runs axe checks; keyboard, focus, busy, empty, invalid, disabled, open-overlay, and responsive states remain part of the release review.
+
 <StorybookEmbed fullPage={true} />
diff --git a/Documentation/ui-foundation.md b/Documentation/ui-foundation.md
index ccb4f86d..6589901c 100644
--- a/Documentation/ui-foundation.md
+++ b/Documentation/ui-foundation.md
@@ -76,6 +76,18 @@ The transition was deliberately split:
 
 The stabilization specs are the behavior parity contract for Components 4.
 
+## Tracked follow-up work
+
+Components 4 deliberately does not pretend every adjacent problem is solved by this renderer change:
+
+- [#109](https://github.com/Cratis/Components/issues/109) tracks a future Arc React query/table state binding, to be extracted only after another renderer proves the contract.
+- [#159](https://github.com/Cratis/Components/issues/159) remains open for explicit complete-result filtering and sorting through server query arguments before paging. The deprecated `clientFiltering` compatibility prop is not that solution.
+- [#173](https://github.com/Cratis/Components/issues/173) tracks a package-export-driven audit and TSDoc/API-reference coverage. Existing root namespaces are intentionally retained for Components 4 consumer compatibility; any future export removal requires explicit consumer evidence and an appropriate major boundary.
+- [#174](https://github.com/Cratis/Components/issues/174) tracks typed provider messages for the remaining Components-owned labels.
+- [#175](https://github.com/Cratis/Components/issues/175) tracks a locale-aware number input so Ada can eventually remove its final specialized Prime input without losing number UX.
+
+These are follow-up contracts, not undocumented work required to use the Components 4 foundation.
+
 ## Release gates
 
 Components 4 is accepted only when:
diff --git a/Source/.storybook/foundation.css b/Source/.storybook/foundation.css
new file mode 100644
index 00000000..343d766c
--- /dev/null
+++ b/Source/.storybook/foundation.css
@@ -0,0 +1,9 @@
+/* Copyright (c) Cratis. All rights reserved. */
+/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */
+
+/* Mirror the published package contract: semantic defaults, no-Preflight internal utilities,
+   layered component structure, then optional baseline scheme behavior. */
+@import '../tokens.css';
+@import '../tailwind.css';
+@import '../styles.css' layer(cratis-components);
+@import '../theme.css';
diff --git a/Source/.storybook/main.ts b/Source/.storybook/main.ts
index 9e82284e..dab8b8f4 100644
--- a/Source/.storybook/main.ts
+++ b/Source/.storybook/main.ts
@@ -6,7 +6,7 @@ import type { UserConfig as ViteConfig } from 'vite';
 
 const config: StorybookConfig = {
     stories: ['../!(dist|node_modules|storybook-static)/**/*.stories.@(ts|tsx)'],
-    addons: [],
+    addons: ['@storybook/addon-a11y'],
     framework: {
         name: '@storybook/react-vite',
         options: {},
diff --git a/Source/.storybook/preview.css b/Source/.storybook/preview.css
index 771ebb74..49473a3a 100644
--- a/Source/.storybook/preview.css
+++ b/Source/.storybook/preview.css
@@ -1,8 +1,6 @@
 /* Copyright (c) Cratis. All rights reserved. */
 /* Licensed under the MIT license. See LICENSE file in the project root for full license information. */
 
-@import 'tailwindcss';
-
 /*
  * A representative product-owned design system mapping directly onto the
  * stable Cratis token seam. It deliberately has no renderer preset or
@@ -17,6 +15,8 @@ body.storybook-product-theme {
     --cratis-surface-overlay: #1e293b;
     --cratis-surface-hover: #334155;
     --cratis-surface-border: #334155;
+    --cratis-control-background: #0f172a;
+    --cratis-control-border: #64748b;
     --cratis-text-color: #f8fafc;
     --cratis-text-color-secondary: #94a3b8;
     --cratis-primary-color: #38bdf8;
@@ -25,14 +25,30 @@ body.storybook-product-theme {
     --cratis-primary-400: #38bdf8;
     --cratis-primary-500: #0ea5e9;
     --cratis-primary-600: #0284c7;
+    --cratis-action-background: #0284c7;
+    --cratis-action-background-hover: #0369a1;
+    --cratis-action-background-active: #075985;
+    --cratis-action-text: #ffffff;
     --cratis-highlight-bg: #1e40af;
     --cratis-highlight-text-color: #ffffff;
     --cratis-green-500: #22c55e;
     --cratis-orange-500: #f97316;
     --cratis-red-500: #ef4444;
+    --cratis-info-background: #38bdf8;
+    --cratis-info-text: #082f49;
+    --cratis-success-background: #4ade80;
+    --cratis-success-text: #052e16;
+    --cratis-warning-background: #fb923c;
+    --cratis-warning-text: #431407;
+    --cratis-danger-background: #f87171;
+    --cratis-danger-text: #450a0a;
     --cratis-border-radius: 10px;
-    --cratis-focus-ring: 0 0 0 3px rgb(56 189 248 / 45%);
-    --cratis-maskbg: rgb(2 6 23 / 70%);
+    --cratis-focus-ring: 0 0 0 3px #7dd3fc;
+    --cratis-maskbg: rgb(2 6 23 / 55%);
+    --cratis-shadow-subtle: none;
+    --cratis-shadow-overlay: 0 8px 24px rgb(0 0 0 / 35%);
+    --cratis-shadow-dialog: 0 24px 64px rgb(0 0 0 / 45%);
+    --cratis-shadow-toast: 0 8px 24px rgb(0 0 0 / 35%);
 }
 
 html,
diff --git a/Source/.storybook/preview.js b/Source/.storybook/preview.js
index dabf77fd..781728c0 100644
--- a/Source/.storybook/preview.js
+++ b/Source/.storybook/preview.js
@@ -3,10 +3,8 @@
 
 import { addons } from 'storybook/preview-api';
 import React from 'react';
-import '../tokens.css';
-import '../styles.css';
+import './foundation.css';
 import './preview.css';
-import '../theme.css';
 import { CratisComponentsProvider } from '../Common/CratisComponentsProvider';
 
 const DARK_SELECTOR = 'cratis-dark';
@@ -83,6 +81,7 @@ export const decorators = [
 export const parameters = {
     actions: { argTypesRegex: '^on[A-Z].*' },
     controls: { expanded: true },
+    a11y: { test: 'error' },
     backgrounds: {
         default: 'dark',
         values: [
diff --git a/Source/Canvas/Canvas.tsx b/Source/Canvas/Canvas.tsx
index 3457d067..af9c8cad 100644
--- a/Source/Canvas/Canvas.tsx
+++ b/Source/Canvas/Canvas.tsx
@@ -3,17 +3,30 @@
 
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import * as PIXI from 'pixi.js';
-import { LAYER_ATTR, TRANSFORM_HOST_ATTR } from './glassAttributes';
 import { CanvasControls, type CanvasControlsLabels } from './CanvasControls';
-import { CanvasMinimapHandle, MinimapItem } from './CanvasMinimap';
+import type { CanvasMinimapHandle, MinimapItem } from './CanvasMinimap';
 import { canvasGesture } from './canvasGesture';
 import { canvasTransformActivity } from './canvasTransformActivity';
 import { isBackgroundPointerTarget } from './isBackgroundPointerTarget';
 import { isWithinScrollableContent } from './isWithinScrollableContent';
-import { PanSample, decayVelocity, trimSamples, velocityFromSamples } from './panMomentum';
-import { PinchSnapshot, PointerPosition, pinchChangeBetween, pinchSnapshotOf } from './pinchGesture';
+import {
+    type PanSample,
+    decayVelocity,
+    trimSamples,
+    velocityFromSamples,
+} from './panMomentum';
+import {
+    type PinchSnapshot,
+    type PointerPosition,
+    pinchChangeBetween,
+    pinchSnapshotOf,
+} from './pinchGesture';
 import { useDragSelectionGuard } from './useDragSelectionGuard';
-import { applyZoomLayer, isMultiTouchCapableDevice, shouldUseCssZoom } from './zoomMechanism';
+import {
+    applyZoomLayer,
+    isMultiTouchCapableDevice,
+    shouldUseCssZoom,
+} from './zoomMechanism';
 
 /**
  * The easing curve for programmatic camera moves: a cubic ease-in-out, so the camera picks up speed gently
@@ -24,7 +37,7 @@ import { applyZoomLayer, isMultiTouchCapableDevice, shouldUseCssZoom } from './z
 function easeInOutCubic(progress: number): number {
     return progress < 0.5
         ? 4 * progress * progress * progress
-        : 1 - Math.pow(-2 * progress + 2, 3) / 2;
+        : 1 - (-2 * progress + 2) ** 3 / 2;
 }
 
 /**
@@ -63,7 +76,8 @@ export interface CanvasItemRegistryContextValue {
 }
 
 /** Context carrying the nearest Canvas item registry. */
-export const CanvasItemRegistryContext = React.createContext<CanvasItemRegistryContextValue | null>(null);
+export const CanvasItemRegistryContext =
+    React.createContext<CanvasItemRegistryContextValue | null>(null);
 
 /** Minimum data shape for an optional Pixi-rendered canvas item. */
 export interface CanvasItemData {
@@ -100,6 +114,16 @@ export interface CanvasHandle {
     getItemBounds(): MinimapItem[];
 }
 
+/** Optional product compositor/capture marker names applied by {@link Canvas}. */
+export interface CanvasCaptureAttributes {
+    /** Attribute placed on the Pixi canvas so a product capture pipeline can exclude it. */
+    layer?: string;
+    /** Attribute placed on non-plain integrated controls that own composited content. */
+    content?: string;
+    /** Attribute placed on pan/zoom transform hosts whose churn moves existing layers. */
+    transformHost?: string;
+}
+
 /** Props for the pan, zoom, item, minimap, and control surface. */
 export interface CanvasProps<T extends CanvasItemData = CanvasItemData> {
     /** DOM content positioned inside the transformed world. */
@@ -148,6 +172,8 @@ export interface CanvasProps<T extends CanvasItemData = CanvasItemData> {
     controlsGlassSurface?: React.ReactNode;
     /** Uses a low-cost CSS frosted pill instead of a consumer-supplied glass surface. */
     disableControlsGlass?: boolean;
+    /** Product-owned capture/compositor marker names. Canvas has no capture-provider dependency. */
+    captureAttributes?: CanvasCaptureAttributes;
     /** Receives imperative camera and measurement operations. */
     onHandleReady?: (handle: CanvasHandle) => void;
     /** Keeps pan/zoom available while absorbing interaction with canvas content. */
@@ -207,6 +233,7 @@ function Canvas<T extends CanvasItemData = CanvasItemData>({
     controlsLabels,
     controlsGlassSurface,
     disableControlsGlass = false,
+    captureAttributes,
     readOnly = false,
     backgroundDragPans = true,
 }: CanvasProps<T>): React.ReactElement {
@@ -238,7 +265,9 @@ function Canvas<T extends CanvasItemData = CanvasItemData>({
     // composited transform path with virtualization told to hold still. The settle timer restores the crisp
     // resting state shortly after the last wheel event.
     const gestureActiveRef = useRef(false);
-    const gestureSettleTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+    const gestureSettleTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(
+        undefined,
+    );
     const transformFramePendingRef = useRef(false);
     const isPanningRef = useRef(false);
     const lastPointerRef = useRef({ x: 0, y: 0 });
@@ -248,7 +277,8 @@ function Canvas<T extends CanvasItemData = CanvasItemData>({
     // to 'grabbing' for the life of a drag-pan is exactly the kind of per-gesture churn this file
     // already avoids re-rendering for elsewhere (see the transform writes below).
     const setPanCursor = useCallback((panning: boolean) => {
-        if (containerRef.current) containerRef.current.style.cursor = panning ? 'grabbing' : 'default';
+        if (containerRef.current)
+            containerRef.current.style.cursor = panning ? 'grabbing' : 'default';
     }, []);
 
     // Touch pointers currently down on the canvas, in the order they landed, plus the pinch geometry
@@ -267,53 +297,70 @@ function Canvas<T extends CanvasItemData = CanvasItemData>({
     const onTransformChangeRef = useRef(onTransformChange);
     const onHandleReadyRef = useRef(onHandleReady);
     const itemsRef = useRef(items);
-    useEffect(() => { onReadyRef.current = onReady; }, [onReady]);
-    useEffect(() => { onItemPointerDownRef.current = onItemPointerDown; }, [onItemPointerDown]);
-    useEffect(() => { onTransformChangeRef.current = onTransformChange; }, [onTransformChange]);
-    useEffect(() => { onHandleReadyRef.current = onHandleReady; }, [onHandleReady]);
+    useEffect(() => {
+        onReadyRef.current = onReady;
+    }, [onReady]);
+    useEffect(() => {
+        onItemPointerDownRef.current = onItemPointerDown;
+    }, [onItemPointerDown]);
+    useEffect(() => {
+        onTransformChangeRef.current = onTransformChange;
+    }, [onTransformChange]);
+    useEffect(() => {
+        onHandleReadyRef.current = onHandleReady;
+    }, [onHandleReady]);
     useEffect(() => {
         itemsRef.current = items;
     }, [items]);
 
     // ── Item registry — auto-builds minimap items from CanvasItem children ──
 
-
     const itemRegistryRef = useRef<Map<string, CanvasItemRegistryEntry>>(new Map());
     const [itemRegistryVersion, setItemRegistryVersion] = useState(0);
 
     const registerItem = useCallback((id: string, entry: CanvasItemRegistryEntry) => {
         const existing = itemRegistryRef.current.get(id);
-        if (existing &&
-            existing.x === entry.x && existing.y === entry.y &&
-            existing.width === entry.width && existing.height === entry.height) return;
+        if (
+            existing &&
+            existing.x === entry.x &&
+            existing.y === entry.y &&
+            existing.width === entry.width &&
+            existing.height === entry.height
+        )
+            return;
         itemRegistryRef.current.set(id, entry);
-        setItemRegistryVersion(version => version + 1);
+        setItemRegistryVersion((version) => version + 1);
     }, []);
 
     const unregisterItem = useCallback((id: string) => {
         itemRegistryRef.current.delete(id);
-        setItemRegistryVersion(version => version + 1);
+        setItemRegistryVersion((version) => version + 1);
     }, []);
 
-    const registryContextValue = useMemo<CanvasItemRegistryContextValue>(() => ({
-        register: registerItem,
-        unregister: unregisterItem,
-    }), [registerItem, unregisterItem]);
-
+    const registryContextValue = useMemo<CanvasItemRegistryContextValue>(
+        () => ({
+            register: registerItem,
+            unregister: unregisterItem,
+        }),
+        [registerItem, unregisterItem],
+    );
 
     const autoMinimapItems = useMemo((): MinimapItem[] => {
         void itemRegistryVersion; // subscribe to registry changes
         const result: MinimapItem[] = [];
-        itemRegistryRef.current.forEach(entry => {
-            result.push({ x: entry.x, y: entry.y, width: entry.width, height: entry.height });
+        itemRegistryRef.current.forEach((entry) => {
+            result.push({
+                x: entry.x,
+                y: entry.y,
+                width: entry.width,
+                height: entry.height,
+            });
         });
         return result;
     }, [itemRegistryVersion]);
 
-
     const effectiveMinimapItems = minimapItems ?? autoMinimapItems;
 
-
     const refreshMinimap = useCallback(() => {
         const app = appRef.current;
         if (!app || !minimapRef.current) return;
@@ -344,7 +391,11 @@ function Canvas<T extends CanvasItemData = CanvasItemData>({
             overlayRef.current.style.transform = `translate(${panRef.current.x}px, ${panRef.current.y}px)`;
         }
         if (zoomLayerRef.current) {
-            applyZoomLayer(zoomLayerRef.current, zoomRef.current, gestureActiveRef.current);
+            applyZoomLayer(
+                zoomLayerRef.current,
+                zoomRef.current,
+                gestureActiveRef.current,
+            );
         }
         onTransformChangeRef.current?.(zoomRef.current, panRef.current);
         // Every applied transform frame is announced so followers (cursors, selection toolbar, tour
@@ -406,9 +457,6 @@ function Canvas<T extends CanvasItemData = CanvasItemData>({
             const canvas = app.canvas as HTMLCanvasElement;
             canvas.style.display = 'block';
             canvas.style.touchAction = 'none';
-            // WebGL canvases rasterize as opaque black in the glass capture pipeline - exclude
-            // this one from every captured scene so glass never refracts a black rectangle.
-            canvas.setAttribute(LAYER_ATTR, 'true');
             containerRef.current.appendChild(canvas);
 
             setPixiReady(true);
@@ -436,6 +484,16 @@ function Canvas<T extends CanvasItemData = CanvasItemData>({
         };
     }, []); // intentional: PIXI init runs exactly once
 
+    // Products with a capture/compositor pipeline can mark the Pixi canvas without making that
+    // provider a Components dependency. Keep the marker synchronized if product configuration changes.
+    useEffect(() => {
+        const canvas = appRef.current?.canvas as HTMLCanvasElement | undefined;
+        const attribute = captureAttributes?.layer;
+        if (!canvas || !attribute) return;
+        canvas.setAttribute(attribute, 'true');
+        return () => canvas.removeAttribute(attribute);
+    }, [pixiReady, captureAttributes?.layer]);
+
     // Handle container resize
     useEffect(() => {
         const container = containerRef.current;
@@ -481,22 +539,34 @@ function Canvas<T extends CanvasItemData = CanvasItemData>({
         }, GESTURE_SETTLE_MS);
     }, [applyWorldTransform]);
 
-    useEffect(() => () => {
-        clearTimeout(gestureSettleTimerRef.current);
-        canvasGesture.set(false);
-    }, []);
+    useEffect(
+        () => () => {
+            clearTimeout(gestureSettleTimerRef.current);
+            canvasGesture.set(false);
+        },
+        [],
+    );
 
     // Zooms toward a fixed focus point on the container, holding the world point under it still —
     // the one zoom every input path shares, whether the factor came from a wheel delta or a pinch.
-    const zoomTowards = useCallback((focusX: number, focusY: number, factor: number) => {
-        const newZoom = Math.max(minZoom, Math.min(maxZoom, zoomRef.current * factor));
-        const worldX = (focusX - panRef.current.x) / zoomRef.current;
-        const worldY = (focusY - panRef.current.y) / zoomRef.current;
-        panRef.current = { x: focusX - worldX * newZoom, y: focusY - worldY * newZoom };
-        zoomRef.current = newZoom;
-        noteGestureActivity();
-        scheduleTransformApply();
-    }, [minZoom, maxZoom, noteGestureActivity, scheduleTransformApply]);
+    const zoomTowards = useCallback(
+        (focusX: number, focusY: number, factor: number) => {
+            const newZoom = Math.max(
+                minZoom,
+                Math.min(maxZoom, zoomRef.current * factor),
+            );
+            const worldX = (focusX - panRef.current.x) / zoomRef.current;
+            const worldY = (focusY - panRef.current.y) / zoomRef.current;
+            panRef.current = {
+                x: focusX - worldX * newZoom,
+                y: focusY - worldY * newZoom,
+            };
+            zoomRef.current = newZoom;
+            noteGestureActivity();
+            scheduleTransformApply();
+        },
+        [minZoom, maxZoom, noteGestureActivity, scheduleTransformApply],
+    );
 
     // Wheel: pan (scroll) or zoom (Ctrl+scroll / pinch)
     const handleWheel = useCallback(
@@ -508,7 +578,11 @@ function Canvas<T extends CanvasItemData = CanvasItemData>({
             // and similar) scrolls that content instead of panning the board underneath it
             // (StudioIssues#229). A zoom gesture (ctrl/cmd) always wins — pinch-to-zoom over a chat
             // panel is still a zoom, not a captured scroll.
-            if (!(e.ctrlKey || e.metaKey) && isWithinScrollableContent(e.target, container)) return;
+            if (
+                !(e.ctrlKey || e.metaKey) &&
+                isWithinScrollableContent(e.target, container)
+            )
+                return;
 
             e.preventDefault();
 
@@ -525,12 +599,15 @@ function Canvas<T extends CanvasItemData = CanvasItemData>({
             if (e.ctrlKey || e.metaKey) {
                 zoomTowards(mouseX, mouseY, Math.exp(-e.deltaY * ZOOM_INTENSITY));
             } else {
-                panRef.current = { x: panRef.current.x - e.deltaX, y: panRef.current.y - e.deltaY };
+                panRef.current = {
+                    x: panRef.current.x - e.deltaX,
+                    y: panRef.current.y - e.deltaY,
+                };
                 noteGestureActivity();
                 scheduleTransformApply();
             }
         },
-        [zoomTowards, noteGestureActivity, scheduleTransformApply]
+        [zoomTowards, noteGestureActivity, scheduleTransformApply],
     );
 
     useEffect(() => {
@@ -566,7 +643,11 @@ function Canvas<T extends CanvasItemData = CanvasItemData>({
             if (!gesture.scale || !lastScale) return;
 
             const rect = container.getBoundingClientRect();
-            zoomTowards(gesture.clientX - rect.left, gesture.clientY - rect.top, gesture.scale / lastScale);
+            zoomTowards(
+                gesture.clientX - rect.left,
+                gesture.clientY - rect.top,
+                gesture.scale / lastScale,
+            );
             lastScale = gesture.scale;
         };
         const handleGestureEnd = (event: Event) => event.preventDefault();
@@ -574,8 +655,12 @@ function Canvas<T extends CanvasItemData = CanvasItemData>({
         // Explicitly non-passive: WebKit is free to treat an options-less gesture listener as
         // passive, silently ignoring preventDefault() — which reads as "pinch zooms the browser
         // page" on an iPad Magic Keyboard trackpad (StudioIssues#241, previously #73).
-        container.addEventListener('gesturestart', handleGestureStart, { passive: false });
-        container.addEventListener('gesturechange', handleGestureChange, { passive: false });
+        container.addEventListener('gesturestart', handleGestureStart, {
+            passive: false,
+        });
+        container.addEventListener('gesturechange', handleGestureChange, {
+            passive: false,
+        });
         container.addEventListener('gestureend', handleGestureEnd, { passive: false });
         return () => {
             container.removeEventListener('gesturestart', handleGestureStart);
@@ -599,12 +684,22 @@ function Canvas<T extends CanvasItemData = CanvasItemData>({
     useEffect(() => {
         const isWithinCanvas = (x: number, y: number) => {
             const rect = containerRef.current?.getBoundingClientRect();
-            return !!rect && x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;
+            return (
+                !!rect &&
+                x >= rect.left &&
+                x <= rect.right &&
+                y >= rect.top &&
+                y <= rect.bottom
+            );
         };
         const reachesContainerListeners = (event: Event) =>
-            event.target instanceof Node && !!containerRef.current?.contains(event.target);
+            event.target instanceof Node &&
+            !!containerRef.current?.contains(event.target);
         const handleWindowWheel = (event: WheelEvent) => {
-            if ((event.ctrlKey || event.metaKey) && isWithinCanvas(event.clientX, event.clientY)) {
+            if (
+                (event.ctrlKey || event.metaKey) &&
+                isWithinCanvas(event.clientX, event.clientY)
+            ) {
                 event.preventDefault();
             }
         };
@@ -626,7 +721,11 @@ function Canvas<T extends CanvasItemData = CanvasItemData>({
 
             const rect = containerRef.current?.getBoundingClientRect();
             if (!rect) return;
-            zoomTowards(gesture.clientX - rect.left, gesture.clientY - rect.top, gesture.scale / lastScale);
+            zoomTowards(
+                gesture.clientX - rect.left,
+                gesture.clientY - rect.top,
+                gesture.scale / lastScale,
+            );
             lastScale = gesture.scale;
         };
         const handleWindowGestureEnd = (event: Event) => {
@@ -637,8 +736,12 @@ function Canvas<T extends CanvasItemData = CanvasItemData>({
         // Non-passive everywhere: WebKit treating any of these as passive is what lets the page
         // zoom through, and window-level listeners are exactly where it is most inclined to.
         window.addEventListener('wheel', handleWindowWheel, { passive: false });
-        window.addEventListener('gesturestart', handleWindowGestureStart, { passive: false });
-        window.addEventListener('gesturechange', handleWindowGestureChange, { passive: false });
+        window.addEventListener('gesturestart', handleWindowGestureStart, {
+            passive: false,
+        });
+        window.addEventListener('gesturechange', handleWindowGestureChange, {
+            passive: false,
+        });
         window.addEventListener('gestureend', handleWindowGestureEnd, { passive: false });
         return () => {
             window.removeEventListener('wheel', handleWindowWheel);
@@ -665,7 +768,10 @@ function Canvas<T extends CanvasItemData = CanvasItemData>({
         const rect = container.getBoundingClientRect();
         const focusX = snapshot.center.x - rect.left;
         const focusY = snapshot.center.y - rect.top;
-        const newZoom = Math.max(minZoom, Math.min(maxZoom, zoomRef.current * change.scale));
+        const newZoom = Math.max(
+            minZoom,
+            Math.min(maxZoom, zoomRef.current * change.scale),
+        );
         // The world point that was under the midpoint BEFORE this step is the one being held, so the
         // midpoint's own movement is what pans — exactly as zoom-towards-cursor does for the wheel.
         const worldX = (focusX - change.panX - panRef.current.x) / zoomRef.current;
@@ -682,7 +788,10 @@ function Canvas<T extends CanvasItemData = CanvasItemData>({
     // Shares animationFrameRef with smoothPanToWorld/smoothPanZoomToWorld so only one of the three
     // ever drives the transform at once; each cancels whichever of the others was still running.
     const startTouchMomentum = useCallback(() => {
-        const initialVelocity = velocityFromSamples(touchPanSamplesRef.current, MOMENTUM_MIN_VELOCITY);
+        const initialVelocity = velocityFromSamples(
+            touchPanSamplesRef.current,
+            MOMENTUM_MIN_VELOCITY,
+        );
         if (!initialVelocity) return;
 
         if (animationFrameRef.current !== null) {
@@ -719,40 +828,50 @@ function Canvas<T extends CanvasItemData = CanvasItemData>({
     }, [applyWorldTransform, refreshMinimap, render, noteGestureActivity]);
 
     // Pointer: pan via middle mouse, left-click on empty background, or a single finger on it
-    const handlePointerDown = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
-        // A fresh gesture always wins over a still-coasting one from the last touch pan.
-        if (animationFrameRef.current !== null) {
-            cancelAnimationFrame(animationFrameRef.current);
-            animationFrameRef.current = null;
-        }
-
-        if (e.pointerType === 'touch') {
-            touchPointersRef.current.set(e.pointerId, { x: e.clientX, y: e.clientY });
-            if (touchPointersRef.current.size > 1) {
-                // A second finger turns whatever was happening into a pinch: end the one-finger drag
-                // so the two paths never both move the board in the same frame.
-                isPanningRef.current = false;
-                setPanCursor(false);
-                pinchRef.current = pinchSnapshotOf(touchPointersRef.current.values());
-                return;
+    const handlePointerDown = useCallback(
+        (e: React.PointerEvent<HTMLDivElement>) => {
+            // A fresh gesture always wins over a still-coasting one from the last touch pan.
+            if (animationFrameRef.current !== null) {
+                cancelAnimationFrame(animationFrameRef.current);
+                animationFrameRef.current = null;
             }
-        }
 
-        const isBackground = isBackgroundPointerTarget(e.pointerType, readOnly, e.target, containerRef.current);
-        // A host that claims the background drag for itself only gives up the mouse/pen gesture: touch
-        // has no middle button and no wheel, so one finger must keep panning or the board is stuck.
-        const mayDragPan = backgroundDragPans || e.pointerType === 'touch';
-        if (e.button === 1 || (e.button === 0 && isBackground && mayDragPan)) {
-            if (e.button === 1) e.preventDefault();
-            isPanningRef.current = true;
-            setPanCursor(true);
-            lastPointerRef.current = { x: e.clientX, y: e.clientY };
             if (e.pointerType === 'touch') {
-                touchPanSamplesRef.current = [{ x: e.clientX, y: e.clientY, time: performance.now() }];
+                touchPointersRef.current.set(e.pointerId, { x: e.clientX, y: e.clientY });
+                if (touchPointersRef.current.size > 1) {
+                    // A second finger turns whatever was happening into a pinch: end the one-finger drag
+                    // so the two paths never both move the board in the same frame.
+                    isPanningRef.current = false;
+                    setPanCursor(false);
+                    pinchRef.current = pinchSnapshotOf(touchPointersRef.current.values());
+                    return;
+                }
             }
-            e.currentTarget.setPointerCapture(e.pointerId);
-        }
-    }, [readOnly, backgroundDragPans, setPanCursor]);
+
+            const isBackground = isBackgroundPointerTarget(
+                e.pointerType,
+                readOnly,
+                e.target,
+                containerRef.current,
+            );
+            // A host that claims the background drag for itself only gives up the mouse/pen gesture: touch
+            // has no middle button and no wheel, so one finger must keep panning or the board is stuck.
+            const mayDragPan = backgroundDragPans || e.pointerType === 'touch';
+            if (e.button === 1 || (e.button === 0 && isBackground && mayDragPan)) {
+                if (e.button === 1) e.preventDefault();
+                isPanningRef.current = true;
+                setPanCursor(true);
+                lastPointerRef.current = { x: e.clientX, y: e.clientY };
+                if (e.pointerType === 'touch') {
+                    touchPanSamplesRef.current = [
+                        { x: e.clientX, y: e.clientY, time: performance.now() },
+                    ];
+                }
+                e.currentTarget.setPointerCapture(e.pointerId);
+            }
+        },
+        [readOnly, backgroundDragPans, setPanCursor],
+    );
 
     const handlePointerMove = useCallback(
         (e: React.PointerEvent<HTMLDivElement>) => {
@@ -767,11 +886,20 @@ function Canvas<T extends CanvasItemData = CanvasItemData>({
             const deltaX = e.clientX - lastPointerRef.current.x;
             const deltaY = e.clientY - lastPointerRef.current.y;
             lastPointerRef.current = { x: e.clientX, y: e.clientY };
-            panRef.current = { x: panRef.current.x + deltaX, y: panRef.current.y + deltaY };
+            panRef.current = {
+                x: panRef.current.x + deltaX,
+                y: panRef.current.y + deltaY,
+            };
 
             if (e.pointerType === 'touch') {
-                const samples = [...touchPanSamplesRef.current, { x: e.clientX, y: e.clientY, time: performance.now() }];
-                touchPanSamplesRef.current = trimSamples(samples, MOMENTUM_SAMPLE_WINDOW_MS);
+                const samples = [
+                    ...touchPanSamplesRef.current,
+                    { x: e.clientX, y: e.clientY, time: performance.now() },
+                ];
+                touchPanSamplesRef.current = trimSamples(
+                    samples,
+                    MOMENTUM_SAMPLE_WINDOW_MS,
+                );
             }
 
             // Same gesture path as wheel pan: coalesce onto one rAF and signal the gesture so
@@ -779,38 +907,43 @@ function Canvas<T extends CanvasItemData = CanvasItemData>({
             noteGestureActivity();
             scheduleTransformApply();
         },
-        [applyPinch, noteGestureActivity, scheduleTransformApply]
+        [applyPinch, noteGestureActivity, scheduleTransformApply],
     );
 
-    const handlePointerUp = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
-        if (touchPointersRef.current.delete(e.pointerId)) {
-            // Re-baseline on the fingers that are left: keeping the old geometry would register the
-            // lifted finger's absence as a huge pinch/pan step on the next move.
-            pinchRef.current = pinchSnapshotOf(touchPointersRef.current.values());
-            const [remaining] = [...touchPointersRef.current.values()];
-            if (remaining) {
-                // Lifting back down to one finger continues the same gesture as a plain drag-pan
-                // rather than stopping dead until the user lifts and starts over.
-                isPanningRef.current = true;
-                setPanCursor(true);
-                lastPointerRef.current = { x: remaining.x, y: remaining.y };
-                touchPanSamplesRef.current = [{ x: remaining.x, y: remaining.y, time: performance.now() }];
-                return;
+    const handlePointerUp = useCallback(
+        (e: React.PointerEvent<HTMLDivElement>) => {
+            if (touchPointersRef.current.delete(e.pointerId)) {
+                // Re-baseline on the fingers that are left: keeping the old geometry would register the
+                // lifted finger's absence as a huge pinch/pan step on the next move.
+                pinchRef.current = pinchSnapshotOf(touchPointersRef.current.values());
+                const [remaining] = [...touchPointersRef.current.values()];
+                if (remaining) {
+                    // Lifting back down to one finger continues the same gesture as a plain drag-pan
+                    // rather than stopping dead until the user lifts and starts over.
+                    isPanningRef.current = true;
+                    setPanCursor(true);
+                    lastPointerRef.current = { x: remaining.x, y: remaining.y };
+                    touchPanSamplesRef.current = [
+                        { x: remaining.x, y: remaining.y, time: performance.now() },
+                    ];
+                    return;
+                }
             }
-        }
 
-        const wasPanningTouch = e.pointerType === 'touch' && isPanningRef.current;
-        isPanningRef.current = false;
-        setPanCursor(false);
-        if (wasPanningTouch) startTouchMomentum();
-    }, [startTouchMomentum, setPanCursor]);
+            const wasPanningTouch = e.pointerType === 'touch' && isPanningRef.current;
+            isPanningRef.current = false;
+            setPanCursor(false);
+            if (wasPanningTouch) startTouchMomentum();
+        },
+        [startTouchMomentum, setPanCursor],
+    );
 
     // Sync items → PIXI containers
     useEffect(() => {
         const world = worldRef.current;
         if (!pixiReady || !world || !renderItem) return;
 
-        const incoming = new Map(items.map(item => [item.id, item]));
+        const incoming = new Map(items.map((item) => [item.id, item]));
 
         // Remove deleted items
         spritesRef.current.forEach((container, id) => {
@@ -822,7 +955,7 @@ function Canvas<T extends CanvasItemData = CanvasItemData>({
         });
 
         // Add new items; update positions of existing ones
-        items.forEach(item => {
+        items.forEach((item) => {
             const existing = spritesRef.current.get(item.id);
             if (existing) {
                 existing.position.set(item.x, item.y);
@@ -888,7 +1021,6 @@ function Canvas<T extends CanvasItemData = CanvasItemData>({
         render();
     }, [applyWorldTransform, refreshMinimap, render]);
 
-
     const handleMinimapPan = useCallback(
         (pan: { x: number; y: number }) => {
             panRef.current = pan;
@@ -899,7 +1031,6 @@ function Canvas<T extends CanvasItemData = CanvasItemData>({
         [applyWorldTransform, refreshMinimap, render],
     );
 
-
     const smoothPanToWorld = useCallback(
         (worldX: number, worldY: number, durationMs = 600) => {
             const container = containerRef.current;
@@ -941,7 +1072,6 @@ function Canvas<T extends CanvasItemData = CanvasItemData>({
         [applyWorldTransform, refreshMinimap, render],
     );
 
-
     const smoothPanZoomToWorld = useCallback(
         (worldX: number, worldY: number, targetZoom = 1, durationMs = 600) => {
             const container = containerRef.current;
@@ -994,19 +1124,38 @@ function Canvas<T extends CanvasItemData = CanvasItemData>({
     // Measured, not estimated: the registry holds what each CanvasItem's ResizeObserver last reported, so a
     // fit-to-content computed from it includes everything an item really renders (specifications under the
     // rows included), unlike the size estimates the minimap falls back to before anything has mounted.
-    const getItemBounds = useCallback((): MinimapItem[] =>
-        Array.from(itemRegistryRef.current.values(), entry => ({ x: entry.x, y: entry.y, width: entry.width, height: entry.height })), []);
+    const getItemBounds = useCallback(
+        (): MinimapItem[] =>
+            Array.from(itemRegistryRef.current.values(), (entry) => ({
+                x: entry.x,
+                y: entry.y,
+                width: entry.width,
+                height: entry.height,
+            })),
+        [],
+    );
 
     // Expose imperative handle once the canvas is set up
     useEffect(() => {
         if (!pixiReady) return;
-        onHandleReadyRef.current?.({ smoothPanToWorld, smoothPanZoomToWorld, getContainerRect, getItemBounds });
-    }, [pixiReady, smoothPanToWorld, smoothPanZoomToWorld, getContainerRect, getItemBounds]);
+        onHandleReadyRef.current?.({
+            smoothPanToWorld,
+            smoothPanZoomToWorld,
+            getContainerRect,
+            getItemBounds,
+        });
+    }, [
+        pixiReady,
+        smoothPanToWorld,
+        smoothPanZoomToWorld,
+        getContainerRect,
+        getItemBounds,
+    ]);
 
     return (
         <div
             ref={containerRef}
-            className={`canvas-surface relative overflow-hidden${className ? ` ${className}` : ''}`}
+            className={`canvas-surface cratis:relative cratis:overflow-hidden${className ? ` ${className}` : ''}`}
             style={{ cursor: 'default', ...style }}
             onPointerDown={handlePointerDown}
             onPointerMove={handlePointerMove}
@@ -1026,7 +1175,9 @@ function Canvas<T extends CanvasItemData = CanvasItemData>({
                     and instead refreshes once the gesture settles. */}
                 <div
                     ref={overlayRef}
-                    {...{ [TRANSFORM_HOST_ATTR]: 'true' }}
+                    {...(captureAttributes?.transformHost
+                        ? { [captureAttributes.transformHost]: 'true' }
+                        : {})}
                     style={{
                         position: 'absolute',
                         top: 0,
@@ -1038,14 +1189,25 @@ function Canvas<T extends CanvasItemData = CanvasItemData>({
                 >
                     <div
                         ref={zoomLayerRef}
-                        {...{ [TRANSFORM_HOST_ATTR]: 'true' }}
+                        {...(captureAttributes?.transformHost
+                            ? { [captureAttributes.transformHost]: 'true' }
+                            : {})}
                         // The read-only overlay below keeps pointers off the board; `inert` keeps the keyboard
                         // and assistive tech off it too, so nothing on a read-only board can be tabbed to and
                         // activated (a public viewer must never be able to fire a command).
                         inert={readOnly}
-                        style={shouldUseCssZoom(initialTransformRef.current.zoom, false, isMultiTouchCapableDevice)
-                            ? { zoom: initialTransformRef.current.zoom }
-                            : { transform: `scale(${initialTransformRef.current.zoom})`, transformOrigin: '0 0' }}
+                        style={
+                            shouldUseCssZoom(
+                                initialTransformRef.current.zoom,
+                                false,
+                                isMultiTouchCapableDevice,
+                            )
+                                ? { zoom: initialTransformRef.current.zoom }
+                                : {
+                                      transform: `scale(${initialTransformRef.current.zoom})`,
+                                      transformOrigin: '0 0',
+                                  }
+                        }
                     >
                         {children}
                     </div>
@@ -1056,7 +1218,9 @@ function Canvas<T extends CanvasItemData = CanvasItemData>({
                 // z-index) but below the controls/minimap, which render after it. Nothing underneath can
                 // ever become a pointer event's target, so no CanvasItem consumer needs its own read-only
                 // handling — this is the entire read-only guarantee.
-                <div style={{ position: 'absolute', inset: 0, zIndex: 2, cursor: 'grab' }} />
+                <div
+                    style={{ position: 'absolute', inset: 0, zIndex: 2, cursor: 'grab' }}
+                />
             )}
             {showControls && (
                 <CanvasControls
@@ -1075,6 +1239,7 @@ function Canvas<T extends CanvasItemData = CanvasItemData>({
                     helpTitle={helpTitle}
                     labels={controlsLabels}
                     glassSurface={controlsGlassSurface}
+                    contentCaptureAttribute={captureAttributes?.content}
                     disableGlass={disableControlsGlass}
                 />
             )}
diff --git a/Source/Canvas/CanvasControls.tsx b/Source/Canvas/CanvasControls.tsx
index 7247c92e..1e2ad395 100644
--- a/Source/Canvas/CanvasControls.tsx
+++ b/Source/Canvas/CanvasControls.tsx
@@ -2,7 +2,6 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import React, { useEffect, useState } from 'react';
-import { CONTENT_ATTR } from './glassAttributes';
 import { CanvasMinimap, CanvasMinimapHandle, MinimapItem } from './CanvasMinimap';
 import { FaCircleQuestion, FaMap, FaMinus, FaPlus } from 'react-icons/fa6';
 
@@ -73,9 +72,12 @@ export interface CanvasControlsProps {
      */
     glassSurface?: React.ReactNode;
 
+    /** Optional product capture/compositor attribute placed on non-plain glass content. */
+    contentCaptureAttribute?: string;
+
     /**
      * Disables the glass surface behind the control bar, falling back to a CSS backdrop-filter pill:
-     * `glassSurface` is not rendered, and the `CONTENT_ATTR` marker is not set. A full-scene glass
+     * `glassSurface` is not rendered, and the product content marker is not set. A full-scene glass
      * capture (like LiquidGlass's) re-rasterizes the content behind it on every interaction frame; on a
      * very large canvas that costs hundreds of ms and stalls pan/zoom, so large boards opt out.
      */
@@ -99,23 +101,31 @@ export const CanvasControls: React.FC<CanvasControlsProps> = ({
     helpTitle,
     labels,
     glassSurface,
+    contentCaptureAttribute,
     disableGlass = false,
 }) => {
     const [minimapOpen, setMinimapOpen] = useState(false);
     const [displayZoom, setDisplayZoom] = useState(getZoom);
-    const alignClass = placement === 'bottom-right' ? 'items-end' : 'items-start';
+    const alignClass = placement === 'bottom-right' ? 'cratis:items-end' : 'cratis:items-start';
 
     // The controls step aside for whatever the canvas viewport is inset by at their own edge — the docked
     // right panel for the bottom-right placement, the project drawer for the bottom-left one — exactly like
     // the top toolbars do. See Components/Viewport.
-    const alignStyle: React.CSSProperties = placement === 'bottom-right'
-        ? { right: 'calc(1rem + var(--canvas-viewport-right, 0px))', transition: 'right 0.25s cubic-bezier(0.4, 0, 0.2, 1)' }
-        : { left: 'calc(1rem + var(--canvas-viewport-left, 0px))', transition: 'left 0.25s cubic-bezier(0.4, 0, 0.2, 1)' };
+    const alignStyle: React.CSSProperties =
+        placement === 'bottom-right'
+            ? {
+                  right: 'calc(1rem + var(--canvas-viewport-right, 0px))',
+                  transition: 'right 0.25s cubic-bezier(0.4, 0, 0.2, 1)',
+              }
+            : {
+                  left: 'calc(1rem + var(--canvas-viewport-left, 0px))',
+                  transition: 'left 0.25s cubic-bezier(0.4, 0, 0.2, 1)',
+              };
 
     // Poll the live zoom for the readout — only this small component re-renders, never the canvas.
     useEffect(() => {
         const timer = setInterval(() => {
-            setDisplayZoom(previous => {
+            setDisplayZoom((previous) => {
                 const current = getZoom();
                 return current === previous ? previous : current;
             });
@@ -128,9 +138,9 @@ export const CanvasControls: React.FC<CanvasControlsProps> = ({
 
     return (
         <div
-            className={`absolute bottom-4 ${alignClass} z-10 flex flex-col gap-2`}
+            className={`cratis:absolute cratis:bottom-4 ${alignClass} cratis:z-10 cratis:flex cratis:flex-col cratis:gap-2`}
             style={alignStyle}
-            onPointerDown={e => e.stopPropagation()}
+            onPointerDown={(e) => e.stopPropagation()}
         >
             {/* Minimap panel — pops up above the bar */}
             {showMinimapToggle && minimapOpen && (
@@ -150,58 +160,84 @@ export const CanvasControls: React.FC<CanvasControlsProps> = ({
                 content-layer capture. */}
             <div
                 className={`canvas-controls-glass${usesPlainSurface ? ' canvas-controls-glass--plain' : ''}`}
-                {...(usesPlainSurface ? {} : { [CONTENT_ATTR]: 'true' })}
+                {...(!usesPlainSurface && contentCaptureAttribute
+                    ? { [contentCaptureAttribute]: 'true' }
+                    : {})}
             >
                 {!usesPlainSurface && glassSurface}
-            <div className='canvas-controls-bar inline-flex flex-row items-center gap-1 px-2 py-1.5 rounded-2xl'>
-                {showMinimapToggle && (
-                    <>
-                        <button
-                            type='button'
-                            title={labels?.toggleMinimap ?? 'Toggle minimap'}
-                            aria-label={labels?.toggleMinimap ?? 'Toggle minimap'}
-                            className={`canvas-controls-icon-btn flex items-center justify-center w-9 h-9 rounded-lg cursor-pointer select-none${minimapOpen ? ' canvas-controls-icon-btn--active' : ''}`}
-                            onClick={() => setMinimapOpen(v => !v)}
-                        >
-                            <FaMap className='text-base' aria-hidden='true' />
-                        </button>
-                        <span className='canvas-controls-separator' />
-                    </>
-                )}
-
-                {/* Zoom controls */}
-                <button type='button' title={labels?.zoomOut ?? 'Zoom Out'} aria-label={labels?.zoomOut ?? 'Zoom Out'} className='canvas-controls-icon-btn flex items-center justify-center w-9 h-9 rounded-lg cursor-pointer select-none' onClick={() => { onZoomOut(); refreshDisplayZoom(); }}>
-                    <FaMinus className='text-base' aria-hidden='true' />
-                </button>
-                <button
-                    type='button'
-                    title={labels?.resetZoom ?? 'Reset Zoom'}
-                    aria-label={labels?.resetZoom ?? 'Reset Zoom'}
-                    onClick={() => { onZoomReset(); refreshDisplayZoom(); }}
-                    className='canvas-controls-zoom-btn flex items-center justify-center h-9 min-w-[3.25rem] px-1.5 rounded-lg text-xs font-semibold cursor-pointer select-none tabular-nums'
-                >
-                    {Math.round(displayZoom * 100)}%
-                </button>
-                <button type='button' title={labels?.zoomIn ?? 'Zoom In'} aria-label={labels?.zoomIn ?? 'Zoom In'} className='canvas-controls-icon-btn flex items-center justify-center w-9 h-9 rounded-lg cursor-pointer select-none' onClick={() => { onZoomIn(); refreshDisplayZoom(); }}>
-                    <FaPlus className='text-base' aria-hidden='true' />
-                </button>
-
-                {/* Help - only where there is something to explain; a button that does nothing is worse than none. */}
-                {onHelp && (
-                    <>
-                        <span className='canvas-controls-separator' />
-                        <button
-                            type='button'
-                            title={helpTitle ?? labels?.help ?? 'Help'}
-                            aria-label={helpTitle ?? labels?.help ?? 'Help'}
-                            className='canvas-controls-icon-btn flex items-center justify-center w-9 h-9 rounded-lg cursor-pointer select-none'
-                            onClick={onHelp}
-                        >
-                            <FaCircleQuestion className='text-base' aria-hidden='true' />
-                        </button>
-                    </>
-                )}
-            </div>
+                <div className='canvas-controls-bar cratis:inline-flex cratis:flex-row cratis:items-center cratis:gap-1 cratis:px-2 cratis:py-1.5 cratis:rounded-2xl'>
+                    {showMinimapToggle && (
+                        <>
+                            <button
+                                type='button'
+                                title={labels?.toggleMinimap ?? 'Toggle minimap'}
+                                aria-label={labels?.toggleMinimap ?? 'Toggle minimap'}
+                                className={`canvas-controls-icon-btn cratis:flex cratis:items-center cratis:justify-center cratis:w-9 cratis:h-9 cratis:rounded-lg cratis:cursor-pointer cratis:select-none${minimapOpen ? ' canvas-controls-icon-btn--active' : ''}`}
+                                onClick={() => setMinimapOpen((v) => !v)}
+                            >
+                                <FaMap className='cratis:text-base' aria-hidden='true' />
+                            </button>
+                            <span className='canvas-controls-separator' />
+                        </>
+                    )}
+
+                    {/* Zoom controls */}
+                    <button
+                        type='button'
+                        title={labels?.zoomOut ?? 'Zoom Out'}
+                        aria-label={labels?.zoomOut ?? 'Zoom Out'}
+                        className='canvas-controls-icon-btn cratis:flex cratis:items-center cratis:justify-center cratis:w-9 cratis:h-9 cratis:rounded-lg cratis:cursor-pointer cratis:select-none'
+                        onClick={() => {
+                            onZoomOut();
+                            refreshDisplayZoom();
+                        }}
+                    >
+                        <FaMinus className='cratis:text-base' aria-hidden='true' />
+                    </button>
+                    <button
+                        type='button'
+                        title={labels?.resetZoom ?? 'Reset Zoom'}
+                        aria-label={labels?.resetZoom ?? 'Reset Zoom'}
+                        onClick={() => {
+                            onZoomReset();
+                            refreshDisplayZoom();
+                        }}
+                        className='canvas-controls-zoom-btn cratis:flex cratis:items-center cratis:justify-center cratis:h-9 cratis:min-w-[3.25rem] cratis:px-1.5 cratis:rounded-lg cratis:text-xs cratis:font-semibold cratis:cursor-pointer cratis:select-none cratis:tabular-nums'
+                    >
+                        {Math.round(displayZoom * 100)}%
+                    </button>
+                    <button
+                        type='button'
+                        title={labels?.zoomIn ?? 'Zoom In'}
+                        aria-label={labels?.zoomIn ?? 'Zoom In'}
+                        className='canvas-controls-icon-btn cratis:flex cratis:items-center cratis:justify-center cratis:w-9 cratis:h-9 cratis:rounded-lg cratis:cursor-pointer cratis:select-none'
+                        onClick={() => {
+                            onZoomIn();
+                            refreshDisplayZoom();
+                        }}
+                    >
+                        <FaPlus className='cratis:text-base' aria-hidden='true' />
+                    </button>
+
+                    {/* Help - only where there is something to explain; a button that does nothing is worse than none. */}
+                    {onHelp && (
+                        <>
+                            <span className='canvas-controls-separator' />
+                            <button
+                                type='button'
+                                title={helpTitle ?? labels?.help ?? 'Help'}
+                                aria-label={helpTitle ?? labels?.help ?? 'Help'}
+                                className='canvas-controls-icon-btn cratis:flex cratis:items-center cratis:justify-center cratis:w-9 cratis:h-9 cratis:rounded-lg cratis:cursor-pointer cratis:select-none'
+                                onClick={onHelp}
+                            >
+                                <FaCircleQuestion
+                                    className='cratis:text-base'
+                                    aria-hidden='true'
+                                />
+                            </button>
+                        </>
+                    )}
+                </div>
             </div>
         </div>
     );
diff --git a/Source/Canvas/for_Canvas/when_rendering_capture_attributes_on_the_server.tsx b/Source/Canvas/for_Canvas/when_rendering_capture_attributes_on_the_server.tsx
new file mode 100644
index 00000000..b0ebca76
--- /dev/null
+++ b/Source/Canvas/for_Canvas/when_rendering_capture_attributes_on_the_server.tsx
@@ -0,0 +1,35 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { renderToStaticMarkup } from 'react-dom/server';
+import { expect } from 'chai';
+import { describe, it } from 'vitest';
+import { Canvas } from '../Canvas';
+
+describe('when rendering Canvas capture attributes on the server', () => {
+    const html = renderToStaticMarkup(
+        <Canvas
+            captureAttributes={{
+                content: 'data-product-content',
+                layer: 'data-product-layer',
+                transformHost: 'data-product-transform-host',
+            }}
+            controlsGlassSurface={<span>Product glass</span>}
+        >
+            <button type='button'>Canvas content</button>
+        </Canvas>,
+    );
+
+    it('should_mark_both_transform_hosts', () => {
+        expect(html.match(/data-product-transform-host="true"/g)).to.have.length(2);
+    });
+
+    it('should_mark_non_plain_control_content', () => {
+        expect(html).to.contain('data-product-content="true"');
+    });
+
+    it('should_not_hardcode_a_capture_provider', () => {
+        const defaultHtml = renderToStaticMarkup(<Canvas showControls={false} />);
+        expect(defaultHtml).not.to.contain('data-liquid-glass-');
+    });
+});
diff --git a/Source/Canvas/glassAttributes.ts b/Source/Canvas/glassAttributes.ts
deleted file mode 100644
index ab320636..00000000
--- a/Source/Canvas/glassAttributes.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-// Copyright (c) Cratis. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-
-// The data attributes the `@cratis/liquid-glass` solution stamps on DOM subtrees to identify glass
-// surfaces (`LAYER_ATTR`) and their own content (`CONTENT_ATTR`), plus a Studio extension marking
-// elements whose attribute churn only moves already-marked layers (`TRANSFORM_HOST_ATTR`). Canvas
-// only sets these as plain DOM attribute values - it never imports anything else from that package,
-// which is a Studio-only workspace package, not published to npm, and therefore cannot be a
-// dependency of this shared library. Declaring the values locally still lets a consumer that
-// separately mounts `@cratis/liquid-glass` alongside a Canvas from this library scan the DOM for
-// these attribute names and get correct behavior with zero extra wiring, as long as the values below
-// keep matching Studio's `Source/LiquidGlass/liquid-glass/glass-attributes.ts` - update both together
-// if that file's values ever change.
-
-/** Excluded from every glass capture scene: glass effect canvases, and whole subtrees that must
- *  never appear in any refraction (dialogs, 'page'-level components). */
-export const LAYER_ATTR = 'data-liquid-glass-layer';
-
-/** A glass component's own content: excluded from the `behind` scene, but still visible (as its own
- *  layer) to higher-level (dialog) surfaces. */
-export const CONTENT_ATTR = 'data-liquid-glass-content';
-
-/** An element whose attribute churn (style transforms during pan/zoom) only moves marked layers
- *  inside it and never changes base content - its mutations are ignored; the compositor repositions
- *  the layers per frame. */
-export const TRANSFORM_HOST_ATTR = 'data-liquid-glass-transform-host';
diff --git a/Source/Canvas/index.ts b/Source/Canvas/index.ts
index 0efa9b3c..6f407a3c 100644
--- a/Source/Canvas/index.ts
+++ b/Source/Canvas/index.ts
@@ -2,11 +2,23 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 export { Canvas, CanvasItemRegistryContext } from './Canvas';
-export type { CanvasItemRegistryEntry, CanvasItemRegistryContextValue, CanvasItemData, CanvasContext, CanvasProps, CanvasHandle } from './Canvas';
+export type {
+    CanvasCaptureAttributes,
+    CanvasContext,
+    CanvasHandle,
+    CanvasItemData,
+    CanvasItemRegistryContextValue,
+    CanvasItemRegistryEntry,
+    CanvasProps,
+} from './Canvas';
 export { CanvasItem } from './CanvasItem';
 export type { CanvasItemProps } from './CanvasItem';
 export { CanvasMinimap } from './CanvasMinimap';
-export type { MinimapItem, CanvasMinimapHandle, CanvasMinimapProps } from './CanvasMinimap';
+export type {
+    MinimapItem,
+    CanvasMinimapHandle,
+    CanvasMinimapProps,
+} from './CanvasMinimap';
 export { CanvasControls } from './CanvasControls';
 export type { CanvasControlsProps, CanvasControlsLabels } from './CanvasControls';
 export { CanvasOverlay } from './CanvasOverlay';
diff --git a/Source/CommandDialog/CommandDialog.stories.tsx b/Source/CommandDialog/CommandDialog.stories.tsx
index 6c0ad5ec..d506df45 100644
--- a/Source/CommandDialog/CommandDialog.stories.tsx
+++ b/Source/CommandDialog/CommandDialog.stories.tsx
@@ -157,7 +157,7 @@ export const Default: Story = {
 
         return (
             <div className="storybook-wrapper">
-                <button className="cratis-button mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={async () => {
+                <button className="cratis-button cratis:mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={async () => {
                     const [dialogResult, commandResult] = await showUpdateUserDialog();
                     if (dialogResult === DialogResult.Ok && commandResult) {
                         setResult(JSON.stringify(commandResult));
@@ -167,7 +167,7 @@ export const Default: Story = {
                 </button>
 
                 {result && (
-                    <div className="p-3 mt-3 bg-green-100 border-round">
+                    <div className="cratis:p-3 cratis:mt-3 cratis:bg-green-100 border-round">
                         <strong>Command executed:</strong> {result}
                     </div>
                 )}
@@ -186,7 +186,7 @@ export const WithServerValidation: Story = {
 
         return (
             <div className="storybook-wrapper">
-                <button className="cratis-button mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => {
+                <button className="cratis-button cratis:mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => {
                     setVisible(true);
                     setValidationErrors([]);
                     setResult('');
@@ -195,9 +195,9 @@ export const WithServerValidation: Story = {
                 </button>
 
                 {validationErrors.length > 0 && (
-                    <div className="p-3 mt-3 bg-red-100 border-round">
+                    <div className="cratis:p-3 cratis:mt-3 cratis:bg-red-100 border-round">
                         <strong>Validation Errors:</strong>
-                        <ul className="mt-2 mb-0">
+                        <ul className="cratis:mt-2 cratis:mb-0">
                             {validationErrors.map((error, index) => (
                                 <li key={index}>{error}</li>
                             ))}
@@ -206,7 +206,7 @@ export const WithServerValidation: Story = {
                 )}
 
                 {result && (
-                    <div className="p-3 mt-3 bg-green-100 border-round">
+                    <div className="cratis:p-3 cratis:mt-3 cratis:bg-green-100 border-round">
                         <strong>Command executed:</strong> {result}
                     </div>
                 )}
@@ -267,7 +267,7 @@ export const WithInitialValues: Story = {
                 </div>
 
                 {result && (
-                    <div className="p-3 mt-3 bg-green-100 border-round">
+                    <div className="cratis:p-3 cratis:mt-3 cratis:bg-green-100 border-round">
                         <strong>Saved:</strong> {result}
                     </div>
                 )}
@@ -303,7 +303,7 @@ export const WithCustomValidation: Story = {
 
         return (
             <div className="storybook-wrapper">
-                <button className="cratis-button mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => {
+                <button className="cratis-button cratis:mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => {
                     setResult('');
                     setVisible(true);
                 }}>
@@ -311,7 +311,7 @@ export const WithCustomValidation: Story = {
                 </button>
 
                 {result && (
-                    <div className="p-3 mt-3 bg-green-100 border-round">
+                    <div className="cratis:p-3 cratis:mt-3 cratis:bg-green-100 border-round">
                         <strong>Saved:</strong> {result}
                     </div>
                 )}
@@ -362,7 +362,7 @@ export const ValidationOnBlur: Story = {
 
         return (
             <div className="storybook-wrapper">
-                <button className="cratis-button mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => setVisible(true)}>
+                <button className="cratis-button cratis:mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => setVisible(true)}>
                     Open Dialog
                 </button>
                 <CommandDialog<UpdateUserCommand>
@@ -391,7 +391,7 @@ export const ValidationOnChange: Story = {
 
         return (
             <div className="storybook-wrapper">
-                <button className="cratis-button mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => setVisible(true)}>
+                <button className="cratis-button cratis:mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => setVisible(true)}>
                     Open Dialog
                 </button>
                 <CommandDialog<UpdateUserCommand>
@@ -420,7 +420,7 @@ export const ValidateOnInit: Story = {
 
         return (
             <div className="storybook-wrapper">
-                <button className="cratis-button mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => setVisible(true)}>
+                <button className="cratis-button cratis:mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => setVisible(true)}>
                     Open Dialog
                 </button>
                 <CommandDialog<UpdateUserCommand>
@@ -450,7 +450,7 @@ export const ValidateAllFieldsOnChange: Story = {
 
         return (
             <div className="storybook-wrapper">
-                <button className="cratis-button mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => setVisible(true)}>
+                <button className="cratis-button cratis:mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => setVisible(true)}>
                     Open Dialog
                 </button>
                 <CommandDialog<UpdateUserCommand>
@@ -481,12 +481,12 @@ export const BeforeExecute: Story = {
 
         return (
             <div className="storybook-wrapper">
-                <button className="cratis-button mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => { setVisible(true); setPreprocessedData(''); }}>
+                <button className="cratis-button cratis:mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => { setVisible(true); setPreprocessedData(''); }}>
                     Open Dialog
                 </button>
 
                 {preprocessedData && (
-                    <div className="p-3 mt-3 bg-green-100 border-round">
+                    <div className="cratis:p-3 cratis:mt-3 cratis:bg-green-100 border-round">
                         <strong>Preprocessed before submit:</strong>
                         <pre style={{ marginTop: '0.5rem', fontSize: '0.875rem' }}>{preprocessedData}</pre>
                     </div>
@@ -524,7 +524,7 @@ export const WithIcons: Story = {
 
         return (
             <div className="storybook-wrapper">
-                <button className="cratis-button mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => setVisible(true)}>
+                <button className="cratis-button cratis:mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => setVisible(true)}>
                     Open Dialog
                 </button>
                 <CommandDialog<UpdateUserCommand>
@@ -617,7 +617,7 @@ export const MultiColumnLayout: Story = {
 
         return (
             <div className="storybook-wrapper">
-                <button className="cratis-button mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => setVisible(true)}>
+                <button className="cratis-button cratis:mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => setVisible(true)}>
                     Open Dialog
                 </button>
                 <CommandDialog<UpdateProfileCommand>
@@ -654,7 +654,7 @@ export const MixedChildren: Story = {
 
         return (
             <div className="storybook-wrapper">
-                <button className="cratis-button mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => setVisible(true)}>
+                <button className="cratis-button cratis:mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => setVisible(true)}>
                     Open Dialog
                 </button>
                 <CommandDialog<UpdateProfileCommand>
@@ -690,7 +690,7 @@ export const WithBusyState: Story = {
 
         return (
             <div className="storybook-wrapper">
-                <button className="cratis-button mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => {
+                <button className="cratis-button cratis:mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => {
                     setResult('');
                     setVisible(true);
                 }}>
@@ -698,7 +698,7 @@ export const WithBusyState: Story = {
                 </button>
 
                 {result && (
-                    <div className="p-3 mt-3 bg-green-100 border-round">
+                    <div className="cratis:p-3 cratis:mt-3 cratis:bg-green-100 border-round">
                         <strong>Saved:</strong> {result}
                     </div>
                 )}
@@ -781,7 +781,7 @@ export const WithResponseTypeAndCallbacks: Story = {
 
         return (
             <div className="storybook-wrapper">
-                <button className="cratis-button mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => {
+                <button className="cratis-button cratis:mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => {
                     setResult('');
                     setError('');
                     setVisible(true);
@@ -790,13 +790,13 @@ export const WithResponseTypeAndCallbacks: Story = {
                 </button>
 
                 {result && (
-                    <div className="p-3 mt-3 bg-green-100 border-round">
+                    <div className="cratis:p-3 cratis:mt-3 cratis:bg-green-100 border-round">
                         <strong>Success:</strong> {result}
                     </div>
                 )}
 
                 {error && (
-                    <div className="p-3 mt-3 bg-red-100 border-round">
+                    <div className="cratis:p-3 cratis:mt-3 cratis:bg-red-100 border-round">
                         <strong>Error:</strong> {error}
                     </div>
                 )}
@@ -903,7 +903,7 @@ export const DestructiveCommandFocusesDismiss: Story = {
 
         return (
             <div className="storybook-wrapper">
-                <button className="cratis-button mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={async () => {
+                <button className="cratis-button cratis:mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={async () => {
                     const [dialogResult] = await showDeletePersonalDataDialog();
                     setResult(dialogResult === DialogResult.Ok ? 'Deleted' : 'Kept');
                 }}>
@@ -911,7 +911,7 @@ export const DestructiveCommandFocusesDismiss: Story = {
                 </button>
 
                 {result && (
-                    <div className="p-3 mt-3 bg-green-100 border-round">
+                    <div className="cratis:p-3 cratis:mt-3 cratis:bg-green-100 border-round">
                         <strong>Outcome:</strong> {result}
                     </div>
                 )}
diff --git a/Source/CommandDialog/CommandStepper.stories.tsx b/Source/CommandDialog/CommandStepper.stories.tsx
index e5b2b02e..1dd02985 100644
--- a/Source/CommandDialog/CommandStepper.stories.tsx
+++ b/Source/CommandDialog/CommandStepper.stories.tsx
@@ -112,7 +112,7 @@ export const Default: Story = {
                 </CommandStepper>
 
                 {result && (
-                    <div className="p-2 mt-3 border-round surface-100" style={{ border: '1px solid var(--cratis-surface-border)' }}>
+                    <div className="cratis:p-2 cratis:mt-3 border-round surface-100" style={{ border: '1px solid var(--cratis-surface-border)' }}>
                         {result}
                     </div>
                 )}
@@ -166,7 +166,7 @@ export const InDialogFrame: Story = {
                             </StepperPanel>
                         </CommandStepper>
                         {result && (
-                            <div className="p-2 mt-3 border-round surface-100" style={{ border: '1px solid var(--cratis-surface-border)' }}>
+                            <div className="cratis:p-2 cratis:mt-3 border-round surface-100" style={{ border: '1px solid var(--cratis-surface-border)' }}>
                                 {result}
                             </div>
                         )}
@@ -229,7 +229,7 @@ export const InDialogFrameWithCenteredHeader: Story = {
                             </StepperPanel>
                         </CommandStepper>
                         {result && (
-                            <div className="p-2 mt-3 border-round surface-100" style={{ border: '1px solid var(--cratis-surface-border)' }}>
+                            <div className="cratis:p-2 cratis:mt-3 border-round surface-100" style={{ border: '1px solid var(--cratis-surface-border)' }}>
                                 {result}
                             </div>
                         )}
@@ -287,7 +287,7 @@ export const Vertical: Story = {
                 </CommandStepper>
 
                 {result && (
-                    <div className="p-2 mt-3 border-round surface-100" style={{ border: '1px solid var(--cratis-surface-border)' }}>
+                    <div className="cratis:p-2 cratis:mt-3 border-round surface-100" style={{ border: '1px solid var(--cratis-surface-border)' }}>
                         {result}
                     </div>
                 )}
@@ -341,7 +341,7 @@ export const WithValidationIndicators: Story = {
                 </CommandStepper>
 
                 {result && (
-                    <div className="p-2 mt-3 border-round surface-100" style={{ border: '1px solid var(--cratis-surface-border)' }}>
+                    <div className="cratis:p-2 cratis:mt-3 border-round surface-100" style={{ border: '1px solid var(--cratis-surface-border)' }}>
                         {result}
                     </div>
                 )}
@@ -362,8 +362,8 @@ export const ConditionalSteps: Story = {
 
         return (
             <div style={{ width: '600px', padding: '1.5rem' }}>
-                <button className="cratis-button mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => setIncludeBudgetStep(current => !current)}>{includeBudgetStep ? 'Hide the optional Budget step' : 'Show the optional Budget step'}</button>
-                <p className="mb-3 text-sm text-color-secondary">
+                <button className="cratis-button cratis:mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => setIncludeBudgetStep(current => !current)}>{includeBudgetStep ? 'Hide the optional Budget step' : 'Show the optional Budget step'}</button>
+                <p className="cratis:mb-3 cratis:text-sm text-color-secondary">
                     The Budget step is currently <strong>{includeBudgetStep ? 'shown' : 'hidden'}</strong>, so the
                     wizard has {includeBudgetStep ? 'three' : 'two'} steps.
                 </p>
@@ -401,7 +401,7 @@ export const ConditionalSteps: Story = {
                 </CommandStepper>
 
                 {result && (
-                    <div className="p-2 mt-3 border-round surface-100" style={{ border: '1px solid var(--cratis-surface-border)' }}>
+                    <div className="cratis:p-2 cratis:mt-3 border-round surface-100" style={{ border: '1px solid var(--cratis-surface-border)' }}>
                         {result}
                     </div>
                 )}
diff --git a/Source/CommandDialog/StepperCommandDialog.stories.tsx b/Source/CommandDialog/StepperCommandDialog.stories.tsx
index a3778809..ccbcaada 100644
--- a/Source/CommandDialog/StepperCommandDialog.stories.tsx
+++ b/Source/CommandDialog/StepperCommandDialog.stories.tsx
@@ -123,7 +123,7 @@ export const Default: Story = {
 
         return (
             <div className="storybook-wrapper">
-                <button className="cratis-button mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={async () => {
+                <button className="cratis-button cratis:mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={async () => {
                     const [dialogResult, commandResult] = await showCreateProjectDialog();
                     if (dialogResult === DialogResult.Ok && commandResult) {
                         setResult(JSON.stringify(commandResult));
@@ -135,7 +135,7 @@ export const Default: Story = {
                 </button>
 
                 {result && (
-                    <div className="p-3 mt-3 bg-green-100 border-round">
+                    <div className="cratis:p-3 cratis:mt-3 cratis:bg-green-100 border-round">
                         <strong>Result:</strong> {result}
                     </div>
                 )}
@@ -153,7 +153,7 @@ export const ThreeSteps: Story = {
 
         return (
             <div className="storybook-wrapper">
-                <button className="cratis-button mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => {
+                <button className="cratis-button cratis:mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => {
                     setVisible(true);
                     setResult('');
                 }}>
@@ -161,7 +161,7 @@ export const ThreeSteps: Story = {
                 </button>
 
                 {result && (
-                    <div className="p-3 mt-3 bg-green-100 border-round">
+                    <div className="cratis:p-3 cratis:mt-3 cratis:bg-green-100 border-round">
                         <strong>Submitted:</strong> {result}
                     </div>
                 )}
@@ -218,11 +218,11 @@ export const WithValidationIndicators: Story = {
 
         return (
             <div className="storybook-wrapper">
-                <p className="mb-3 text-sm text-color-secondary">
+                <p className="cratis:mb-3 cratis:text-sm text-color-secondary">
                     <code>validateOnInit</code> triggers validation immediately — step indicators appear on
                     any step whose fields are invalid right from the start.
                 </p>
-                <button className="cratis-button mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => setVisible(true)}>
+                <button className="cratis-button cratis:mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => setVisible(true)}>
                     Open Dialog
                 </button>
 
@@ -274,10 +274,10 @@ export const WithBusyState: Story = {
 
         return (
             <div className="storybook-wrapper">
-                <p className="mb-3 text-sm text-color-secondary">
+                <p className="cratis:mb-3 cratis:text-sm text-color-secondary">
                     Simulates a 2-second server delay. Fill all fields and click Submit to see the busy state.
                 </p>
-                <button className="cratis-button mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => setVisible(true)}>
+                <button className="cratis-button cratis:mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => setVisible(true)}>
                     Open Dialog
                 </button>
 
@@ -380,7 +380,7 @@ export const WithResponseTypeAndCallbacks: Story = {
 
         return (
             <div className="storybook-wrapper">
-                <button className="cratis-button mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => {
+                <button className="cratis-button cratis:mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => {
                     setResult('');
                     setError('');
                     setVisible(true);
@@ -389,13 +389,13 @@ export const WithResponseTypeAndCallbacks: Story = {
                 </button>
 
                 {result && (
-                    <div className="p-3 mt-3 bg-green-100 border-round">
+                    <div className="cratis:p-3 cratis:mt-3 cratis:bg-green-100 border-round">
                         <strong>Success:</strong> {result}
                     </div>
                 )}
 
                 {error && (
-                    <div className="p-3 mt-3 bg-red-100 border-round">
+                    <div className="cratis:p-3 cratis:mt-3 cratis:bg-red-100 border-round">
                         <strong>Error:</strong> {error}
                     </div>
                 )}
@@ -465,11 +465,11 @@ export const WithFooterCancel: Story = {
 
         return (
             <div className="storybook-wrapper">
-                <p className="mb-3 text-sm text-color-secondary">
+                <p className="cratis:mb-3 cratis:text-sm text-color-secondary">
                     The footer leads with a renamed Cancel. Fill both steps and click Create to run a 2-second
                     command — while it runs, neither the footer Cancel nor the header X can dismiss the dialog.
                 </p>
-                <button className="cratis-button mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => {
+                <button className="cratis-button cratis:mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => {
                     setOutcome('');
                     setVisible(true);
                 }}>
@@ -477,7 +477,7 @@ export const WithFooterCancel: Story = {
                 </button>
 
                 {outcome && (
-                    <div className="p-3 mt-3 bg-green-100 border-round">
+                    <div className="cratis:p-3 cratis:mt-3 cratis:bg-green-100 border-round">
                         <strong>Outcome:</strong> {outcome}
                     </div>
                 )}
@@ -544,20 +544,20 @@ export const ConditionalSteps: Story = {
 
         return (
             <div className="storybook-wrapper">
-                <button className="cratis-button mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => setIncludeBudgetStep(current => !current)}>{includeBudgetStep ? 'Hide the optional Budget step' : 'Show the optional Budget step'}</button>
-                <button className="cratis-button mb-3 ml-2" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => {
+                <button className="cratis-button cratis:mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => setIncludeBudgetStep(current => !current)}>{includeBudgetStep ? 'Hide the optional Budget step' : 'Show the optional Budget step'}</button>
+                <button className="cratis-button cratis:mb-3 cratis:ml-2" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => {
                     setResult('');
                     setVisible(true);
                 }}>
                     Open Dialog
                 </button>
-                <p className="mb-3 text-sm text-color-secondary">
+                <p className="cratis:mb-3 cratis:text-sm text-color-secondary">
                     The Budget step is currently <strong>{includeBudgetStep ? 'shown' : 'hidden'}</strong>, so the
                     wizard has {includeBudgetStep ? 'three' : 'two'} steps.
                 </p>
 
                 {result && (
-                    <div className="p-3 mt-3 bg-green-100 border-round">
+                    <div className="cratis:p-3 cratis:mt-3 cratis:bg-green-100 border-round">
                         <strong>Submitted:</strong> {result}
                     </div>
                 )}
diff --git a/Source/CommandForm/fields/ChipsField.tsx b/Source/CommandForm/fields/ChipsField.tsx
index 8d1a9aa9..29689ebc 100644
--- a/Source/CommandForm/fields/ChipsField.tsx
+++ b/Source/CommandForm/fields/ChipsField.tsx
@@ -65,7 +65,7 @@ const ChipsControl = (props: ChipsFieldComponentProps) => {
             {...props.pt?.root}
             className={[
                 'cratis-chips-field',
-                'w-full',
+                'cratis:w-full',
                 props.pt?.root?.className,
                 props.className,
             ]
diff --git a/Source/CommandForm/fields/DropdownField.tsx b/Source/CommandForm/fields/DropdownField.tsx
index 4ab9a5f5..e27f87de 100644
--- a/Source/CommandForm/fields/DropdownField.tsx
+++ b/Source/CommandForm/fields/DropdownField.tsx
@@ -76,7 +76,7 @@ export const DropdownField = asCommandFormField<DropdownFieldComponentProps>(
             optionLabel={props.optionLabel}
             placeholder={props.placeholder}
             invalid={props.invalid}
-            className={props.className ? `w-full ${props.className}` : 'w-full'}
+            className={props.className ? `cratis:w-full ${props.className}` : 'cratis:w-full'}
             pt={props.pt}
             ptOptions={props.ptOptions}
             unstyled={props.unstyled}
diff --git a/Source/CommandForm/fields/Fields.css b/Source/CommandForm/fields/Fields.css
index ed650a6b..36179861 100644
--- a/Source/CommandForm/fields/Fields.css
+++ b/Source/CommandForm/fields/Fields.css
@@ -14,14 +14,15 @@
 }
 
 .cratis-field-input {
-    min-height: 2.5rem;
-    padding: 0.5rem 0.7rem;
-    border: 1px solid var(--cratis-surface-border);
+    box-sizing: border-box;
+    min-height: var(--cratis-control-height);
+    padding: 0.625rem 0.75rem;
+    border: 1px solid var(--cratis-control-border);
     border-radius: var(--cratis-border-radius);
-    background: var(--cratis-surface-card);
+    background: var(--cratis-control-background);
     color: var(--cratis-text-color);
     font: inherit;
-    box-shadow: 0 1px 2px color-mix(in srgb, var(--cratis-text-color) 5%, transparent);
+    box-shadow: var(--cratis-shadow-subtle);
 }
 .cratis-field-input::placeholder {
     color: var(--cratis-text-color-secondary);
@@ -31,6 +32,10 @@
     border-color: var(--cratis-primary-color);
     box-shadow: var(--cratis-focus-ring);
 }
+.cratis-field-input:disabled {
+    cursor: not-allowed;
+    opacity: var(--cratis-disabled-opacity);
+}
 .cratis-field-input[data-invalid='true'],
 .cratis-field-input[aria-invalid='true'] {
     border-color: var(--cratis-red-500);
@@ -78,6 +83,10 @@
     gap: 0.5rem;
     cursor: pointer;
 }
+.cratis-choice-field:has(.cratis-choice-field__native:disabled) {
+    cursor: not-allowed;
+    opacity: var(--cratis-disabled-opacity);
+}
 .cratis-choice-field__native {
     position: absolute;
     width: 1px;
@@ -91,9 +100,9 @@
     height: 1.25rem;
     align-items: center;
     justify-content: center;
-    border: 1px solid var(--cratis-surface-border);
-    border-radius: calc(var(--cratis-border-radius) * 0.65);
-    background: var(--cratis-surface-card);
+    border: 1px solid var(--cratis-control-border);
+    border-radius: var(--cratis-border-radius);
+    background: var(--cratis-control-background);
 }
 .cratis-checkbox__indicator {
     opacity: 0;
@@ -122,7 +131,7 @@
     height: 1.4rem;
     padding: 0.15rem;
     align-items: center;
-    border: 1px solid var(--cratis-surface-border);
+    border: 1px solid var(--cratis-control-border);
     border-radius: 999px;
     background: var(--cratis-surface-100);
     transition: background-color 140ms ease;
@@ -131,8 +140,8 @@
     width: 1rem;
     height: 1rem;
     border-radius: 50%;
-    background: var(--cratis-surface-card);
-    box-shadow: 0 1px 3px color-mix(in srgb, var(--cratis-text-color) 25%, transparent);
+    background: var(--cratis-control-background);
+    box-shadow: var(--cratis-shadow-subtle);
     transition: transform 140ms ease;
 }
 .cratis-choice-field__native:checked + .cratis-switch__control {
@@ -149,9 +158,9 @@
     height: 1.25rem;
     align-items: center;
     justify-content: center;
-    border: 1px solid var(--cratis-surface-border);
+    border: 1px solid var(--cratis-control-border);
     border-radius: 50%;
-    background: var(--cratis-surface-card);
+    background: var(--cratis-control-background);
 }
 .cratis-radio__indicator {
     width: 0.65rem;
@@ -202,14 +211,15 @@
 
 .cratis-chips-field {
     display: flex;
-    min-height: 2.5rem;
-    padding: 0.3rem;
+    box-sizing: border-box;
+    min-height: var(--cratis-control-height);
+    padding: 0.4rem;
     align-items: center;
     flex-wrap: wrap;
     gap: 0.35rem;
-    border: 1px solid var(--cratis-surface-border);
+    border: 1px solid var(--cratis-control-border);
     border-radius: var(--cratis-border-radius);
-    background: var(--cratis-surface-card);
+    background: var(--cratis-control-background);
 }
 .cratis-chips-field:focus-within {
     border-color: var(--cratis-primary-color);
@@ -255,11 +265,11 @@
 }
 .cratis-color-field__input {
     width: 3rem;
-    height: 2.5rem;
+    height: var(--cratis-control-height);
     padding: 0.2rem;
-    border: 1px solid var(--cratis-surface-border);
+    border: 1px solid var(--cratis-control-border);
     border-radius: var(--cratis-border-radius);
-    background: var(--cratis-surface-card);
+    background: var(--cratis-control-background);
 }
 .cratis-color-field__input:focus-visible {
     outline: none;
diff --git a/Source/CommandForm/fields/InputTextField.tsx b/Source/CommandForm/fields/InputTextField.tsx
index 1cf840fb..c923b5f7 100644
--- a/Source/CommandForm/fields/InputTextField.tsx
+++ b/Source/CommandForm/fields/InputTextField.tsx
@@ -60,7 +60,7 @@ export const InputTextField = asCommandFormField<InputTextComponentProps>(
             data-cratis-part='input'
             className={[
                 'cratis-field-input',
-                'w-full',
+                'cratis:w-full',
                 props.pt?.root?.className,
                 props.className,
             ]
diff --git a/Source/CommandForm/fields/MultiSelectField.tsx b/Source/CommandForm/fields/MultiSelectField.tsx
index 405e8993..d404a3d7 100644
--- a/Source/CommandForm/fields/MultiSelectField.tsx
+++ b/Source/CommandForm/fields/MultiSelectField.tsx
@@ -97,7 +97,7 @@ export const MultiSelectField = asCommandFormField<MultiSelectFieldComponentProp
             filter={props.filter}
             showClear={props.showClear}
             invalid={props.invalid}
-            className={props.className ? `w-full ${props.className}` : 'w-full'}
+            className={props.className ? `cratis:w-full ${props.className}` : 'cratis:w-full'}
             pt={props.pt}
             ptOptions={props.ptOptions}
             unstyled={props.unstyled}
diff --git a/Source/CommandForm/fields/NumberField.tsx b/Source/CommandForm/fields/NumberField.tsx
index c6833ff3..41a07930 100644
--- a/Source/CommandForm/fields/NumberField.tsx
+++ b/Source/CommandForm/fields/NumberField.tsx
@@ -44,7 +44,7 @@ export const NumberField = asCommandFormField<NumberFieldComponentProps>(
             data-cratis-part='root'
             className={[
                 'cratis-number-field',
-                'w-full',
+                'cratis:w-full',
                 props.pt?.root?.className,
                 props.className,
             ]
@@ -66,7 +66,7 @@ export const NumberField = asCommandFormField<NumberFieldComponentProps>(
                 aria-invalid={props.invalid || undefined}
                 data-invalid={props.invalid || undefined}
                 data-cratis-part='input'
-                className={['cratis-field-input', 'w-full', props.pt?.input?.className]
+                className={['cratis-field-input', 'cratis:w-full', props.pt?.input?.className]
                     .filter(Boolean)
                     .join(' ')}
             />
diff --git a/Source/CommandForm/fields/PasswordField.tsx b/Source/CommandForm/fields/PasswordField.tsx
index e7159a0b..11325751 100644
--- a/Source/CommandForm/fields/PasswordField.tsx
+++ b/Source/CommandForm/fields/PasswordField.tsx
@@ -48,7 +48,7 @@ const PasswordControl = (props: PasswordFieldComponentProps) => {
             onBlur={props.onBlur}
             className={[
                 'cratis-password-field',
-                'w-full',
+                'cratis:w-full',
                 props.pt?.root?.className,
                 props.className,
             ]
@@ -67,7 +67,7 @@ const PasswordControl = (props: PasswordFieldComponentProps) => {
                 placeholder={props.placeholder}
                 aria-invalid={props.invalid || undefined}
                 data-invalid={props.invalid || undefined}
-                className={['cratis-field-input', 'w-full', props.pt?.input?.className]
+                className={['cratis-field-input', 'cratis:w-full', props.pt?.input?.className]
                     .filter(Boolean)
                     .join(' ')}
                 data-cratis-part='input'
diff --git a/Source/CommandForm/fields/SliderField.tsx b/Source/CommandForm/fields/SliderField.tsx
index a32f97f6..a520ef85 100644
--- a/Source/CommandForm/fields/SliderField.tsx
+++ b/Source/CommandForm/fields/SliderField.tsx
@@ -43,7 +43,7 @@ export const SliderField = asCommandFormField<SliderFieldComponentProps>(
             {...props.pt?.root}
             className={[
                 'cratis-slider-field',
-                'w-full',
+                'cratis:w-full',
                 props.pt?.root?.className,
                 props.className,
             ]
diff --git a/Source/CommandForm/fields/TextAreaField.tsx b/Source/CommandForm/fields/TextAreaField.tsx
index b9262fd0..34e344b9 100644
--- a/Source/CommandForm/fields/TextAreaField.tsx
+++ b/Source/CommandForm/fields/TextAreaField.tsx
@@ -53,7 +53,7 @@ export const TextAreaField = asCommandFormField<TextAreaFieldComponentProps>(
             className={[
                 'cratis-field-input',
                 'cratis-field-textarea',
-                'w-full',
+                'cratis:w-full',
                 props.pt?.root?.className,
                 props.className,
             ]
diff --git a/Source/Common/Button.css b/Source/Common/Button.css
index d0a56148..2def34c9 100644
--- a/Source/Common/Button.css
+++ b/Source/Common/Button.css
@@ -3,15 +3,16 @@
 
 .cratis-button {
     display: inline-flex;
-    min-height: 2.25rem;
-    padding: 0.5rem 0.85rem;
+    box-sizing: border-box;
+    min-height: var(--cratis-control-height);
+    padding: 0.75rem 1.25rem;
     align-items: center;
     justify-content: center;
     gap: 0.45rem;
-    border: 1px solid transparent;
+    border: 1px solid var(--cratis-action-background);
     border-radius: var(--cratis-border-radius);
-    background: var(--cratis-primary-color);
-    color: var(--cratis-primary-color-text);
+    background: var(--cratis-action-background);
+    color: var(--cratis-action-text);
     font: inherit;
     font-weight: 600;
     line-height: 1;
@@ -22,8 +23,19 @@
         color 140ms ease,
         opacity 140ms ease;
 }
-.cratis-button:hover:not(:disabled) {
-    filter: brightness(0.94);
+.cratis-button:not([data-severity])[data-variant='filled']:hover:not(:disabled) {
+    border-color: var(--cratis-action-background-hover);
+    background: var(--cratis-action-background-hover);
+}
+.cratis-button:not([data-severity])[data-variant='filled']:active:not(:disabled) {
+    border-color: var(--cratis-action-background-active);
+    background: var(--cratis-action-background-active);
+}
+.cratis-button:is([data-variant='outlined'], [data-variant='text']):hover:not(:disabled) {
+    background: color-mix(in srgb, currentColor 4%, transparent);
+}
+.cratis-button:is([data-variant='outlined'], [data-variant='text']):active:not(:disabled) {
+    background: color-mix(in srgb, currentColor 16%, transparent);
 }
 .cratis-button:focus-visible {
     outline: none;
@@ -31,16 +43,16 @@
 }
 .cratis-button:disabled {
     cursor: not-allowed;
-    opacity: 0.55;
+    opacity: var(--cratis-disabled-opacity);
 }
 .cratis-button[data-size='small'] {
-    min-height: 1.9rem;
-    padding: 0.35rem 0.6rem;
+    min-height: var(--cratis-control-height-small);
+    padding: 0.5rem 0.75rem;
     font-size: 0.8rem;
 }
 .cratis-button[data-size='large'] {
-    min-height: 2.75rem;
-    padding: 0.7rem 1rem;
+    min-height: var(--cratis-control-height-large);
+    padding: 0.875rem 1.5rem;
     font-size: 1rem;
 }
 .cratis-button[data-rounded='true'],
@@ -48,14 +60,14 @@
     border-radius: 999px;
 }
 .cratis-button[data-icon-only='true'] {
-    width: 2.25rem;
+    width: var(--cratis-control-height);
     padding: 0;
 }
 .cratis-button[data-size='small'][data-icon-only='true'] {
-    width: 1.9rem;
+    width: var(--cratis-control-height-small);
 }
 .cratis-button[data-size='large'][data-icon-only='true'] {
-    width: 2.75rem;
+    width: var(--cratis-control-height-large);
 }
 
 .cratis-button[data-variant='outlined'] {
@@ -77,29 +89,53 @@
 
 .cratis-button[data-severity='secondary'] {
     --cratis-button-tone: var(--cratis-text-color);
+    --cratis-button-fill: var(--cratis-surface-100);
+    --cratis-button-fill-text: var(--cratis-text-color);
 }
 .cratis-button[data-severity='info'] {
-    --cratis-button-tone: var(--cratis-primary-color);
+    --cratis-button-tone: var(--cratis-info-background);
+    --cratis-button-fill: var(--cratis-info-background);
+    --cratis-button-fill-text: var(--cratis-info-text);
 }
 .cratis-button[data-severity='success'] {
-    --cratis-button-tone: var(--cratis-green-500);
+    --cratis-button-tone: var(--cratis-success-background);
+    --cratis-button-fill: var(--cratis-success-background);
+    --cratis-button-fill-text: var(--cratis-success-text);
 }
 .cratis-button[data-severity='warn'] {
-    --cratis-button-tone: var(--cratis-orange-500);
+    --cratis-button-tone: var(--cratis-warning-background);
+    --cratis-button-fill: var(--cratis-warning-background);
+    --cratis-button-fill-text: var(--cratis-warning-text);
 }
 .cratis-button[data-severity='danger'] {
-    --cratis-button-tone: var(--cratis-red-500);
+    --cratis-button-tone: var(--cratis-danger-background);
+    --cratis-button-fill: var(--cratis-danger-background);
+    --cratis-button-fill-text: var(--cratis-danger-text);
 }
 .cratis-button[data-severity='help'] {
-    --cratis-button-tone: var(--cratis-primary-400);
+    --cratis-button-tone: var(--cratis-primary-600);
+    --cratis-button-fill: var(--cratis-primary-600);
+    --cratis-button-fill-text: #ffffff;
 }
 .cratis-button[data-severity='contrast'] {
     --cratis-button-tone: var(--cratis-text-color);
+    --cratis-button-fill: var(--cratis-text-color);
+    --cratis-button-fill-text: var(--cratis-surface-0);
+}
+.cratis-button[data-severity][data-variant='filled'] {
+    border-color: var(--cratis-button-fill);
+    background: var(--cratis-button-fill);
+    color: var(--cratis-button-fill-text);
+}
+.cratis-button[data-severity][data-variant='filled']:hover:not(:disabled) {
+    border-color: color-mix(in srgb, var(--cratis-button-fill) 88%, black);
+    background: color-mix(in srgb, var(--cratis-button-fill) 88%, black);
 }
-.cratis-button:not([data-severity='info'])[data-variant='filled'] {
-    background: var(--cratis-button-tone);
+.cratis-button[data-severity][data-variant='filled']:active:not(:disabled) {
+    border-color: color-mix(in srgb, var(--cratis-button-fill) 76%, black);
+    background: color-mix(in srgb, var(--cratis-button-fill) 76%, black);
 }
-.cratis-button:not([data-severity='info']):is(
+.cratis-button[data-severity]:is(
         [data-variant='outlined'],
         [data-variant='text'],
         [data-variant='link']
diff --git a/Source/Common/Button.stories.tsx b/Source/Common/Button.stories.tsx
index 296524e9..87039b69 100644
--- a/Source/Common/Button.stories.tsx
+++ b/Source/Common/Button.stories.tsx
@@ -2,7 +2,7 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from 'storybook/test';
+import { expect, fn, userEvent, within } from 'storybook/test';
 import { Button } from './Button';
 
 const meta = {
@@ -24,3 +24,38 @@ export const Text: Story = { args: { label: 'Cancel', text: true } };
 export const Link: Story = { args: { label: 'Learn more', link: true } };
 export const Outlined: Story = { args: { label: 'Details', outlined: true, severity: 'secondary' } };
 export const WithTooltip: Story = { args: { icon: <span aria-hidden='true'>◆</span>, 'aria-label': 'Info', tooltip: 'More information' } };
+
+export const VisualMatrix: Story = {
+    render: () => (
+        <div style={{ display: 'grid', gap: '1rem' }}>
+            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(6rem, 1fr))', gap: '0.75rem' }}>
+                <Button label='Primary' />
+                <Button label='Secondary' severity='secondary' />
+                <Button label='Info' severity='info' />
+                <Button label='Success' severity='success' />
+                <Button label='Warning' severity='warn' />
+                <Button label='Danger' severity='danger' />
+                <Button label='Help' severity='help' />
+                <Button label='Contrast' severity='contrast' />
+            </div>
+            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(6rem, 1fr))', gap: '0.75rem' }}>
+                <Button label='Small' size='small' />
+                <Button label='Normal' />
+                <Button label='Large' size='large' />
+                <Button label='Disabled' disabled />
+                <Button label='Loading' loading />
+            </div>
+            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(6rem, 1fr))', gap: '0.75rem' }}>
+                <Button label='Filled' />
+                <Button label='Outlined' outlined />
+                <Button label='Text' text />
+                <Button label='Link' link />
+            </div>
+        </div>
+    ),
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await userEvent.tab();
+        await expect(canvas.getByRole('button', { name: 'Primary' })).toHaveFocus();
+    },
+};
diff --git a/Source/Common/Button.tsx b/Source/Common/Button.tsx
index bffd5ae0..25ac142a 100644
--- a/Source/Common/Button.tsx
+++ b/Source/Common/Button.tsx
@@ -52,7 +52,7 @@ export interface ButtonProps
     outlined?: boolean;
     /** Renders the button fully rounded. */
     rounded?: boolean;
-    /** Controls the button's coloring. */
+    /** Controls the button's coloring. Omit for the familiar primary action. */
     severity?: ButtonSeverity;
     /** Sizes the button. */
     size?: 'small' | 'normal' | 'large';
@@ -89,7 +89,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
     link,
     outlined,
     rounded,
-    severity = 'secondary',
+    severity,
     size = 'normal',
     disabled,
     type = 'button',
diff --git a/Source/Common/CratisComponentsProvider.tsx b/Source/Common/CratisComponentsProvider.tsx
index 2009748a..3ca1e32c 100644
--- a/Source/Common/CratisComponentsProvider.tsx
+++ b/Source/Common/CratisComponentsProvider.tsx
@@ -66,8 +66,6 @@ export interface CratisComponentsConfig {
      * New code should use {@link messages}; React Aria supplies its own locale data.
      */
     locales?: Record<string, LegacyLocaleMessages>;
-    /** Legacy renderer options are accepted during migration but have no effect. */
-    [legacyRendererOption: string]: unknown;
 }
 
 /** Props for the application-root Components provider. */
diff --git a/Source/Common/DatePickerInput.css b/Source/Common/DatePickerInput.css
index 6f4375e2..95e7176e 100644
--- a/Source/Common/DatePickerInput.css
+++ b/Source/Common/DatePickerInput.css
@@ -13,12 +13,13 @@
     position: relative;
     display: flex;
     width: 100%;
-    min-height: 2.5rem;
+    box-sizing: border-box;
+    min-height: var(--cratis-control-height);
     align-items: center;
     overflow: hidden;
-    border: 1px solid var(--cratis-surface-border);
+    border: 1px solid var(--cratis-control-border);
     border-radius: var(--cratis-border-radius);
-    background: var(--cratis-surface-card);
+    background: var(--cratis-control-background);
 }
 .cratis-date-picker__group[data-focus-within] {
     border-color: var(--cratis-primary-color);
@@ -28,13 +29,13 @@
     border-color: var(--cratis-red-500);
 }
 .cratis-date-picker[data-disabled='true'] {
-    opacity: 0.6;
+    opacity: var(--cratis-disabled-opacity);
 }
 .cratis-date-picker__input {
     display: flex;
     flex: 1;
     min-width: 0;
-    padding: 0.45rem 0.7rem;
+    padding: 0.625rem 0.75rem;
 }
 .cratis-date-picker__group[data-empty='true']:not([data-focus-within])
     .cratis-date-picker__input {
@@ -64,9 +65,9 @@
 }
 .cratis-date-picker__trigger {
     align-self: stretch;
-    min-width: 2.5rem;
+    min-width: var(--cratis-control-height);
     border: 0;
-    border-inline-start: 1px solid var(--cratis-surface-border);
+    border-inline-start: 1px solid var(--cratis-control-border);
     background: transparent;
     color: var(--cratis-text-color-secondary);
     cursor: pointer;
@@ -80,14 +81,13 @@
     box-shadow: inset var(--cratis-focus-ring);
 }
 .cratis-date-picker__popover {
-    z-index: 1200;
+    z-index: var(--cratis-z-index-overlay);
     overflow: auto;
     border: 1px solid var(--cratis-surface-border);
     border-radius: var(--cratis-border-radius);
     background: var(--cratis-surface-overlay);
     color: var(--cratis-text-color);
-    box-shadow: 0 0.75rem 2rem
-        color-mix(in srgb, var(--cratis-text-color) 18%, transparent);
+    box-shadow: var(--cratis-shadow-overlay);
 }
 .cratis-date-picker__dialog {
     padding: 0.75rem;
@@ -138,8 +138,8 @@
 }
 .cratis-date-picker__cell {
     display: flex;
-    width: 2.25rem;
-    height: 2.25rem;
+    width: 2.5rem;
+    height: 2.5rem;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
@@ -150,8 +150,8 @@
     background: var(--cratis-surface-hover);
 }
 .cratis-date-picker__cell[data-selected] {
-    background: var(--cratis-primary-color);
-    color: var(--cratis-primary-color-text);
+    background: var(--cratis-action-background);
+    color: var(--cratis-action-text);
 }
 .cratis-date-picker__cell[data-focused] {
     box-shadow: var(--cratis-focus-ring);
diff --git a/Source/Common/DatePickerInput.stories.tsx b/Source/Common/DatePickerInput.stories.tsx
new file mode 100644
index 00000000..1c1d2e30
--- /dev/null
+++ b/Source/Common/DatePickerInput.stories.tsx
@@ -0,0 +1,61 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { expect, userEvent, within } from 'storybook/test';
+import { DatePickerInput } from './DatePickerInput';
+
+const meta = {
+    title: 'Common/DatePickerInput visual parity',
+    component: DatePickerInput,
+    parameters: { layout: 'padded' },
+    tags: ['autodocs'],
+} satisfies Meta<typeof DatePickerInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const ControlledPicker = ({
+    initialValue = null,
+    disabled = false,
+    invalid = false,
+}: {
+    initialValue?: Date | null;
+    disabled?: boolean;
+    invalid?: boolean;
+}) => {
+    const [value, setValue] = useState<Date | null>(initialValue);
+    return (
+        <DatePickerInput
+            aria-label='Delivery date'
+            value={value}
+            onChange={setValue}
+            placeholder='Choose a date'
+            showButtonBar
+            disabled={disabled}
+            invalid={invalid}
+            style={{ width: '18rem' }}
+        />
+    );
+};
+
+export const StateMatrix: Story = {
+    render: () => (
+        <div style={{ display: 'grid', gap: '1rem', maxWidth: '20rem' }}>
+            <ControlledPicker />
+            <ControlledPicker initialValue={new Date(2024, 5, 15)} />
+            <ControlledPicker initialValue={new Date(2024, 5, 15)} disabled />
+            <ControlledPicker invalid />
+        </div>
+    ),
+};
+
+export const OpenCalendar: Story = {
+    render: () => <ControlledPicker />,
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await userEvent.click(canvas.getByRole('button', { name: 'Open calendar' }));
+        await expect(within(document.body).getByRole('dialog')).toBeTruthy();
+    },
+};
diff --git a/Source/Common/ErrorBoundary.stories.tsx b/Source/Common/ErrorBoundary.stories.tsx
index 05a7a766..0215bfbf 100644
--- a/Source/Common/ErrorBoundary.stories.tsx
+++ b/Source/Common/ErrorBoundary.stories.tsx
@@ -22,8 +22,8 @@ const ErrorThrowingComponent = () => {
     }
     
     return (
-        <div className="p-4">
-            <h2 className="text-xl mb-3">Click the button to trigger an error</h2>
+        <div className="cratis:p-4">
+            <h2 className="cratis:text-xl cratis:mb-3">Click the button to trigger an error</h2>
             <button className="cratis-button" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => setShouldThrow(true)}>
                 Throw Error
             </button>
@@ -34,8 +34,8 @@ const ErrorThrowingComponent = () => {
 export const Default: Story = {
     render: () => (
         <ErrorBoundary>
-            <div className="p-4">
-                <h1 className="text-2xl mb-3">Normal Content</h1>
+            <div className="cratis:p-4">
+                <h1 className="cratis:text-2xl cratis:mb-3">Normal Content</h1>
                 <p>This content is wrapped in an ErrorBoundary. Everything works fine here.</p>
             </div>
         </ErrorBoundary>
diff --git a/Source/Common/ErrorBoundary.tsx b/Source/Common/ErrorBoundary.tsx
index a0d5652e..3bb13a50 100644
--- a/Source/Common/ErrorBoundary.tsx
+++ b/Source/Common/ErrorBoundary.tsx
@@ -70,8 +70,8 @@ export class ErrorBoundary extends Component<Props, State> {
     public render() {
         if (this.state.hasError) {
             return (
-                <div className='p-4'>
-                    <h1 className='text-3xl m-3'>Error</h1>
+                <div className='cratis:p-4'>
+                    <h1 className='cratis:text-3xl cratis:m-3'>Error</h1>
                     <p>{this.state.error.message}</p>
                     <p>{this.state.error.stack}</p>
                 </div>
diff --git a/Source/Common/FormElement.css b/Source/Common/FormElement.css
index fc67611d..74d1f47c 100644
--- a/Source/Common/FormElement.css
+++ b/Source/Common/FormElement.css
@@ -14,7 +14,7 @@
     padding: 0 0.75rem;
     color: var(--cratis-text-color-secondary);
     background: var(--cratis-surface-100);
-    border: 1px solid var(--cratis-surface-border);
+    border: 1px solid var(--cratis-control-border);
     border-right: 0;
     border-top-left-radius: var(--cratis-border-radius);
     border-bottom-left-radius: var(--cratis-border-radius);
diff --git a/Source/Common/FormElement.stories.tsx b/Source/Common/FormElement.stories.tsx
index 06688d8c..53535ec3 100644
--- a/Source/Common/FormElement.stories.tsx
+++ b/Source/Common/FormElement.stories.tsx
@@ -18,7 +18,7 @@ export const Default: Story = {
         icon: <span aria-hidden='true'>◆</span>,
     },
     render: (args) => (
-        <div className='p-4'>
+        <div className='cratis:p-4'>
             <FormElement {...args}>
                 <input className='cratis-field-input' placeholder='Username' />
             </FormElement>
@@ -31,7 +31,7 @@ export const WithEmailIcon: Story = {
         icon: <span aria-hidden='true'>◆</span>,
     },
     render: (args) => (
-        <div className='p-4'>
+        <div className='cratis:p-4'>
             <FormElement {...args}>
                 <input
                     className='cratis-field-input'
@@ -48,7 +48,7 @@ export const WithSearchIcon: Story = {
         icon: <span aria-hidden='true'>◆</span>,
     },
     render: (args) => (
-        <div className='p-4'>
+        <div className='cratis:p-4'>
             <FormElement {...args}>
                 <input className='cratis-field-input' placeholder='Search…' />
             </FormElement>
diff --git a/Source/Common/FormElement.tsx b/Source/Common/FormElement.tsx
index 0a12037d..8814e3ef 100644
--- a/Source/Common/FormElement.tsx
+++ b/Source/Common/FormElement.tsx
@@ -42,7 +42,7 @@ export interface FormElementProps {
  */
 export const FormElement = (props: FormElementProps) => {
     return (
-        <div className='flex flex-col md:flex-row gap-3'>
+        <div className='cratis:flex cratis:flex-col cratis:md:flex-row cratis:gap-3'>
             <div className='cratis-form-element'>
                 <span className='cratis-form-element__addon'>{props.icon}</span>
                 {props.children}
diff --git a/Source/Common/Icon.stories.tsx b/Source/Common/Icon.stories.tsx
index 7895f17e..8fd0b4b2 100644
--- a/Source/Common/Icon.stories.tsx
+++ b/Source/Common/Icon.stories.tsx
@@ -29,7 +29,7 @@ export const StringIconWithExtraClass: Story = {
     render: () => (
         <>
             <style>{'.story-product-home::before { content: "⌂"; font-size: 1.5rem; }'}</style>
-            <IconDisplay icon='story-product-home' className='text-3xl' />
+            <IconDisplay icon='story-product-home' className='cratis:text-3xl' />
         </>
     ),
 };
diff --git a/Source/Common/Page.stories.tsx b/Source/Common/Page.stories.tsx
index 747a3fdf..9f56c335 100644
--- a/Source/Common/Page.stories.tsx
+++ b/Source/Common/Page.stories.tsx
@@ -19,7 +19,7 @@ export const Default: Story = {
     },
     render: (args) => (
         <Page {...args}>
-            <div className="p-4">
+            <div className="cratis:p-4">
                 <p>This is the page content area.</p>
                 <p>The Page component provides a consistent layout with a title and content area.</p>
             </div>
@@ -34,7 +34,7 @@ export const WithPanel: Story = {
     },
     render: (args) => (
         <Page {...args}>
-            <div className="p-4">
+            <div className="cratis:p-4">
                 <p>This page has the panel style applied.</p>
                 <p>The panel prop adds special styling to the content area.</p>
             </div>
@@ -49,7 +49,7 @@ export const WithTitle: Story = {
     },
     render: (args) => (
         <Page {...args}>
-            <div className="p-4">
+            <div className="cratis:p-4">
                 <p>The title is shown above because showTitle is true.</p>
             </div>
         </Page>
@@ -63,7 +63,7 @@ export const WithoutTitle: Story = {
     },
     render: (args) => (
         <Page {...args}>
-            <div className="p-4">
+            <div className="cratis:p-4">
                 <p>The title is hidden because showTitle is false (the default).</p>
             </div>
         </Page>
diff --git a/Source/Common/Page.tsx b/Source/Common/Page.tsx
index 58224928..80179ae6 100644
--- a/Source/Common/Page.tsx
+++ b/Source/Common/Page.tsx
@@ -49,9 +49,9 @@ export interface PageProps extends HTMLAttributes<HTMLDivElement> {
  */
 export const Page = ({ title, showTitle = false, children, panel, ...rest }: PageProps) => {
     return (
-        <div className='flex flex-col h-full flex-1' {...rest}>
-            {showTitle && <h1 className='text-3xl mt-3 mb-4'>{title}</h1>}
-            <main className={`overflow-hidden h-full flex flex-col flex-1 ${panel ? 'panel' : ''}`}>
+        <div className='cratis:flex cratis:flex-col cratis:h-full cratis:flex-1' {...rest}>
+            {showTitle && <h1 className='cratis:text-3xl cratis:mt-3 cratis:mb-4'>{title}</h1>}
+            <main className={`cratis:overflow-hidden cratis:h-full cratis:flex cratis:flex-col cratis:flex-1 ${panel ? 'panel' : ''}`}>
                 {children}
             </main>
         </div>
diff --git a/Source/Common/Tooltip.css b/Source/Common/Tooltip.css
index 08bc8564..27223306 100644
--- a/Source/Common/Tooltip.css
+++ b/Source/Common/Tooltip.css
@@ -6,11 +6,11 @@
     background: var(--cratis-surface-100);
     color: var(--cratis-text-color);
     border: 1px solid var(--cratis-surface-border);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-    border-radius: 0.25rem;
+    box-shadow: var(--cratis-shadow-overlay);
+    border-radius: var(--cratis-border-radius);
     padding: 0.25rem 0.5rem;
     font-size: 0.75rem;
-    font-family: system-ui, sans-serif;
+    font-family: inherit;
     max-width: 24rem;
-    z-index: 1100;
+    z-index: var(--cratis-z-index-tooltip);
 }
diff --git a/Source/Common/Tooltip.tsx b/Source/Common/Tooltip.tsx
index e868d84d..9ca18835 100644
--- a/Source/Common/Tooltip.tsx
+++ b/Source/Common/Tooltip.tsx
@@ -8,6 +8,12 @@ import { Tooltip as AriaTooltip, TooltipTrigger } from 'react-aria-components/To
 /** Position of the tooltip relative to its trigger element. */
 export type TooltipPosition = 'top' | 'right' | 'bottom' | 'left';
 
+interface TooltipTriggerElementProps {
+    className?: string;
+    'data-cratis-part'?: string;
+    'data-cratis-tooltip-trigger'?: string;
+}
+
 /** Props for the {@link Tooltip} component. */
 export interface TooltipProps {
     /** Text displayed inside the tooltip. Empty content disables the tooltip. */
@@ -19,7 +25,7 @@ export interface TooltipProps {
     /** Extra class name applied to the actual trigger element. */
     className?: string;
     /** One focusable element that triggers the tooltip. */
-    children: ReactElement<{ className?: string }>;
+    children: ReactElement<TooltipTriggerElementProps>;
 }
 
 /** An accessible hover and keyboard-focus tooltip with stable Cratis parts. */
@@ -36,8 +42,9 @@ export const Tooltip = ({
         className: ['cratis-tooltip-trigger', children.props.className, className]
             .filter(Boolean)
             .join(' '),
-        'data-cratis-part': 'trigger',
-    } as { className: string });
+        'data-cratis-part': children.props['data-cratis-part'] ?? 'trigger',
+        'data-cratis-tooltip-trigger': '',
+    } as TooltipTriggerElementProps);
 
     return (
         <TooltipTrigger delay={350} closeDelay={100}>
diff --git a/Source/Common/for_Button/when_rendering_the_default_action.tsx b/Source/Common/for_Button/when_rendering_the_default_action.tsx
new file mode 100644
index 00000000..22102aac
--- /dev/null
+++ b/Source/Common/for_Button/when_rendering_the_default_action.tsx
@@ -0,0 +1,20 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { renderToStaticMarkup } from 'react-dom/server';
+import { expect } from 'chai';
+import { describe, it } from 'vitest';
+import { Button } from '../Button';
+
+describe('when rendering the default Button action', () => {
+    const html = renderToStaticMarkup(<Button label='Save' />);
+
+    it('should_use_the_primary_base_style_without_a_secondary_severity', () => {
+        expect(html).to.contain('data-variant="filled"');
+        expect(html).not.to.contain('data-severity=');
+    });
+
+    it('should_remain_a_normal_sized_button', () => {
+        expect(html).to.contain('data-size="normal"');
+    });
+});
diff --git a/Source/DataPage/DataPage.stories.tsx b/Source/DataPage/DataPage.stories.tsx
index 6a991fdb..3b4dda3b 100644
--- a/Source/DataPage/DataPage.stories.tsx
+++ b/Source/DataPage/DataPage.stories.tsx
@@ -120,9 +120,9 @@ class ManyPersonsQuery extends QueryFor<Person, object> {
 
 const PersonDetails = ({ item }: { item: Person }) => {
     return (
-        <div className='p-4'>
-            <h2 className='text-2xl font-bold mb-4'>Person Details</h2>
-            <div className='space-y-2'>
+        <div className='cratis:p-4'>
+            <h2 className='cratis:text-2xl cratis:font-bold cratis:mb-4'>Person Details</h2>
+            <div className='cratis:space-y-2'>
                 <div>
                     <strong>ID:</strong> {item.id}
                 </div>
@@ -290,9 +290,9 @@ const PersonDetailsWithRefresh = ({
     onRefresh?: () => void;
 }) => {
     return (
-        <div className='p-4'>
-            <h2 className='text-2xl font-bold mb-4'>Person Details</h2>
-            <div className='space-y-2 mb-4'>
+        <div className='cratis:p-4'>
+            <h2 className='cratis:text-2xl cratis:font-bold cratis:mb-4'>Person Details</h2>
+            <div className='cratis:space-y-2 cratis:mb-4'>
                 <div>
                     <strong>Name:</strong> {item.name}
                 </div>
diff --git a/Source/DataPage/DataPage.tsx b/Source/DataPage/DataPage.tsx
index cc260884..aebb589e 100644
--- a/Source/DataPage/DataPage.tsx
+++ b/Source/DataPage/DataPage.tsx
@@ -116,7 +116,7 @@ export const MenuItems = ({ children }: MenuItemsProps) => {
                 menuItems.push({
                     label: child.props.label,
                     command: child.props.command,
-                    icon: Icon ? <Icon className='mr-2' /> : undefined,
+                    icon: Icon ? <Icon className='cratis:mr-2' /> : undefined,
                     disabled:
                         (child.props.disabled ?? false) ||
                         (isDisabled && (child.props.disableOnUnselected ?? false)),
@@ -128,7 +128,7 @@ export const MenuItems = ({ children }: MenuItemsProps) => {
     }, [children, isDisabled]);
 
     return (
-        <div className='cratis-data-page-actions px-4 py-2' style={actionsStyle}>
+        <div className='cratis-data-page-actions cratis:px-4 cratis:py-2' style={actionsStyle}>
             <ActionMenubar
                 aria-label={context.actionsAriaLabel ?? 'Actions'}
                 model={items}
@@ -504,7 +504,7 @@ const DataPage = <
         <DataPageContext.Provider value={context}>
             <Page title={props.title} panel={true} style={pageStyle}>
                 {props.detailsComponent ? (
-                    <Allotment className='h-full' proportionalLayout={false}>
+                    <Allotment className='cratis:h-full' proportionalLayout={false}>
                         <Allotment.Pane>
                             <DataPageLayout>{props.children}</DataPageLayout>
                         </Allotment.Pane>
diff --git a/Source/DataTables/ColumnFilterMenu.css b/Source/DataTables/ColumnFilterMenu.css
index e56be27d..88d314a6 100644
--- a/Source/DataTables/ColumnFilterMenu.css
+++ b/Source/DataTables/ColumnFilterMenu.css
@@ -28,7 +28,7 @@
 }
 
 .cratis-filter-popover {
-    z-index: 1250;
+    z-index: var(--cratis-z-index-filter);
 }
 
 .cratis-filter-menu {
@@ -39,16 +39,17 @@
     padding: 0.5rem;
     background: var(--cratis-surface-overlay);
     border: 1px solid var(--cratis-surface-border);
-    border-radius: 0.375rem;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
+    border-radius: var(--cratis-border-radius);
+    box-shadow: var(--cratis-shadow-overlay);
 }
 
 .cratis-filter-menu__input {
-    min-height: 2.5rem;
-    padding: 0.5rem 0.7rem;
-    border: 1px solid var(--cratis-surface-border);
+    box-sizing: border-box;
+    min-height: var(--cratis-control-height);
+    padding: 0.625rem 0.75rem;
+    border: 1px solid var(--cratis-control-border);
     border-radius: var(--cratis-border-radius);
-    background: var(--cratis-surface-card);
+    background: var(--cratis-control-background);
     color: var(--cratis-text-color);
     font: inherit;
 }
diff --git a/Source/DataTables/DataTableCore.css b/Source/DataTables/DataTableCore.css
index 5465de82..903c125a 100644
--- a/Source/DataTables/DataTableCore.css
+++ b/Source/DataTables/DataTableCore.css
@@ -18,11 +18,12 @@
 }
 .cratis-datatable-search__input {
     width: 100%;
-    min-height: 2.5rem;
-    padding: 0.5rem 0.7rem;
-    border: 1px solid var(--cratis-surface-border);
+    box-sizing: border-box;
+    min-height: var(--cratis-control-height);
+    padding: 0.625rem 0.75rem;
+    border: 1px solid var(--cratis-control-border);
     border-radius: var(--cratis-border-radius);
-    background: var(--cratis-surface-card);
+    background: var(--cratis-control-background);
     color: var(--cratis-text-color);
     font: inherit;
 }
@@ -44,12 +45,12 @@
     position: sticky;
     top: 0;
     z-index: 1;
-    padding: 0.65rem 0.75rem;
+    padding: 0.875rem 1rem;
     border-bottom: 1px solid var(--cratis-surface-border);
     background: var(--cratis-surface-section);
     color: var(--cratis-text-color);
     text-align: start;
-    font-size: 0.8rem;
+    font-size: 0.875rem;
     font-weight: 700;
 }
 .cratis-datatable__sort {
@@ -70,16 +71,21 @@
     box-shadow: var(--cratis-focus-ring);
 }
 .cratis-datatable__cell {
-    padding: 0.65rem 0.75rem;
+    padding: 0.875rem 1rem;
     border-bottom: 1px solid var(--cratis-surface-border);
     vertical-align: middle;
 }
 .cratis-datatable__row {
+    background: var(--cratis-surface-card);
     transition: background-color 100ms ease;
 }
-.cratis-datatable__row:hover {
+.cratis-datatable__row[data-interactive='true']:hover {
     background: var(--cratis-surface-hover);
 }
+.cratis-datatable__row:focus-visible {
+    outline: none;
+    box-shadow: inset var(--cratis-focus-ring);
+}
 .cratis-datatable__row[data-selected='true'] {
     background: var(--cratis-highlight-bg);
     color: var(--cratis-highlight-text-color);
diff --git a/Source/DataTables/DataTableCore.stories.tsx b/Source/DataTables/DataTableCore.stories.tsx
new file mode 100644
index 00000000..2fd09102
--- /dev/null
+++ b/Source/DataTables/DataTableCore.stories.tsx
@@ -0,0 +1,63 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { DataTableCore } from './DataTableCore';
+import { Column } from './Column';
+
+interface Person {
+    id: number;
+    name: string;
+    role: string;
+}
+
+const people: Person[] = [
+    { id: 1, name: 'Ada Lovelace', role: 'Administrator' },
+    { id: 2, name: 'Grace Hopper', role: 'Developer' },
+    { id: 3, name: 'Margaret Hamilton', role: 'Viewer' },
+];
+
+const meta = {
+    title: 'DataTables/DataTableCore visual parity',
+    component: DataTableCore,
+    parameters: { layout: 'padded' },
+    tags: ['autodocs'],
+} satisfies Meta<typeof DataTableCore>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const LocalTable = () => {
+    const [selection, setSelection] = useState<Person | undefined>(people[1]);
+    return (
+        <DataTableCore<Person>
+            data={people}
+            dataKey='id'
+            emptyMessage='No people'
+            selectionMode='single'
+            selection={selection}
+            onSelectionChange={(event) => setSelection(event.value)}
+            globalFilterFields={['name', 'role']}
+            globalSearchPlaceholder='Search people'
+            globalSearchAriaLabel='Search people'
+        >
+            <Column<Person> selectionMode='single' header='Select' />
+            <Column<Person> field='name' header='Name' sortable />
+            <Column<Person> field='role' header='Role' filter />
+        </DataTableCore>
+    );
+};
+
+export const LoadedArray: Story = {
+    render: () => <LocalTable />,
+};
+
+export const Empty: Story = {
+    render: () => (
+        <DataTableCore<Person> data={[]} emptyMessage='No people'>
+            <Column<Person> field='name' header='Name' />
+            <Column<Person> field='role' header='Role' />
+        </DataTableCore>
+    ),
+};
diff --git a/Source/DataTables/DataTableCore.tsx b/Source/DataTables/DataTableCore.tsx
index 668d43b0..34d68c28 100644
--- a/Source/DataTables/DataTableCore.tsx
+++ b/Source/DataTables/DataTableCore.tsx
@@ -274,25 +274,27 @@ export const DataTableCore = <TData extends object>({
 
     const filteredRows = useMemo(() => {
         const term = globalFilter.trim().toLocaleLowerCase();
-        const rows = data.filter((row) => {
-            const rowValues = row as Record<string, unknown>;
-            const matchesColumns = Object.entries(filters).every(([field, entry]) =>
-                matchesFilterEntry(valueAtPath(rowValues, field), entry),
-            );
-            if (!matchesColumns) return false;
-            if (!term || !globalFilterFields?.length) return true;
-            return globalFilterFields.some((field) =>
-                String(valueAtPath(rowValues, field) ?? '')
-                    .toLocaleLowerCase()
-                    .includes(term),
-            );
-        });
+        const rows = data
+            .map((row, loadedIndex) => ({ row, loadedIndex }))
+            .filter(({ row }) => {
+                const rowValues = row as Record<string, unknown>;
+                const matchesColumns = Object.entries(filters).every(([field, entry]) =>
+                    matchesFilterEntry(valueAtPath(rowValues, field), entry),
+                );
+                if (!matchesColumns) return false;
+                if (!term || !globalFilterFields?.length) return true;
+                return globalFilterFields.some((field) =>
+                    String(valueAtPath(rowValues, field) ?? '')
+                        .toLocaleLowerCase()
+                        .includes(term),
+                );
+            });
 
         if (!sort) return rows;
         return [...rows].sort((left, right) => {
             const comparison = compareValues(
-                valueAtPath(left as Record<string, unknown>, sort.field),
-                valueAtPath(right as Record<string, unknown>, sort.field),
+                valueAtPath(left.row as Record<string, unknown>, sort.field),
+                valueAtPath(right.row as Record<string, unknown>, sort.field),
             );
             return sort.direction === 'ascending' ? comparison : -comparison;
         });
@@ -320,19 +322,38 @@ export const DataTableCore = <TData extends object>({
         }
     };
 
-    const loadedPageKeyByRow = useMemo(
-        () => new Map(data.map((row, index) => [row, String(index)])),
-        [data],
-    );
-    const keyOf = (row: TData, filteredIndex: number) =>
-        dataKey
-            ? String(valueAtPath(row as Record<string, unknown>, dataKey))
-            : (loadedPageKeyByRow.get(row) ?? `filtered-${filteredIndex}`);
-    const selectedKey = selection
-        ? dataKey
-            ? String(valueAtPath(selection as Record<string, unknown>, dataKey))
-            : loadedPageKeyByRow.get(selection)
-        : undefined;
+    const dataKeyIdentity = (row: TData) =>
+        String(valueAtPath(row as Record<string, unknown>, dataKey!));
+    const dataKeyCounts = useMemo(() => {
+        const counts = new Map<string, number>();
+        if (!dataKey) return counts;
+        for (const row of data) {
+            const identity = String(valueAtPath(row as Record<string, unknown>, dataKey));
+            counts.set(identity, (counts.get(identity) ?? 0) + 1);
+        }
+        return counts;
+    }, [data, dataKey]);
+    const firstLoadedIndexByDataKey = useMemo(() => {
+        const indices = new Map<string, number>();
+        if (!dataKey) return indices;
+        data.forEach((row, loadedIndex) => {
+            const identity = String(valueAtPath(row as Record<string, unknown>, dataKey));
+            if (!indices.has(identity)) indices.set(identity, loadedIndex);
+        });
+        return indices;
+    }, [data, dataKey]);
+    const selectedLoadedIndex = selection ? data.indexOf(selection) : -1;
+    const selectedDataKey = selection && dataKey ? dataKeyIdentity(selection) : undefined;
+    const isSelectedRow = (row: TData, loadedIndex: number) => {
+        if (!selection) return false;
+        if (!dataKey) return loadedIndex === selectedLoadedIndex;
+
+        const identity = dataKeyIdentity(row);
+        if (identity !== selectedDataKey) return false;
+        if ((dataKeyCounts.get(identity) ?? 0) <= 1) return true;
+        if (selectedLoadedIndex >= 0) return loadedIndex === selectedLoadedIndex;
+        return loadedIndex === firstLoadedIndexByDataKey.get(identity);
+    };
 
     return (
         <div
@@ -525,10 +546,14 @@ export const DataTableCore = <TData extends object>({
                                 </td>
                             </tr>
                         ) : (
-                            filteredRows.map((row, rowIndex) => {
-                                const rowKey = keyOf(row, rowIndex);
+                            filteredRows.map(({ row, loadedIndex }, filteredIndex) => {
+                                const identity = dataKey
+                                    ? dataKeyIdentity(row)
+                                    : 'loaded-row';
+                                const rowKey = `${identity}::${loadedIndex}`;
                                 const isSelected =
-                                    selectionMode === 'single' && selectedKey === rowKey;
+                                    selectionMode === 'single' &&
+                                    isSelectedRow(row, loadedIndex);
                                 const isInteractive =
                                     Boolean(onRowClick) || selectionMode === 'single';
                                 return (
@@ -548,8 +573,9 @@ export const DataTableCore = <TData extends object>({
                                         )}
                                         data-cratis-part='row'
                                         data-selected={isSelected || undefined}
+                                        data-interactive={isInteractive || undefined}
                                         onClick={(event) =>
-                                            activateRow(row, rowIndex, event)
+                                            activateRow(row, filteredIndex, event)
                                         }
                                         onKeyDown={(event) => {
                                             if (
@@ -560,7 +586,7 @@ export const DataTableCore = <TData extends object>({
                                                 return;
                                             }
                                             event.preventDefault();
-                                            activateRow(row, rowIndex, event);
+                                            activateRow(row, filteredIndex, event);
                                         }}
                                     >
                                         {columns.map((column, columnIndex) => (
diff --git a/Source/DataTables/DataTableFilterMeta.ts b/Source/DataTables/DataTableFilterMeta.ts
index cd64e7d8..b6cbd396 100644
--- a/Source/DataTables/DataTableFilterMeta.ts
+++ b/Source/DataTables/DataTableFilterMeta.ts
@@ -31,9 +31,10 @@ export type DataTableCustomFilterMatchMode = string & {
 /**
  * Built-in or custom match-mode name.
  *
- * Arbitrary strings remain accepted for source compatibility with renderers
- * whose matcher was registered outside Components. New custom matchers should
- * use `registerDataTableFilterMatcher()`, which returns a branded name.
+ * Arbitrary strings remain accepted only for source compatibility. Components does
+ * not consult an external renderer's matcher registry, and an unregistered custom mode
+ * deliberately matches nothing. Register new custom matchers with
+ * `registerDataTableFilterMatcher()`, which returns a branded name.
  */
 export type DataTableFilterMatchMode =
     | (typeof DataTableFilterMatchMode)[keyof typeof DataTableFilterMatchMode]
diff --git a/Source/DataTables/DataTableForObservableQuery.stories.tsx b/Source/DataTables/DataTableForObservableQuery.stories.tsx
index 1048ef5d..80c3a698 100644
--- a/Source/DataTables/DataTableForObservableQuery.stories.tsx
+++ b/Source/DataTables/DataTableForObservableQuery.stories.tsx
@@ -84,7 +84,7 @@ const getPrioritySeverity = (priority: string): TagSeverity => {
 
 export const Default: Story = {
     render: () => (
-        <div className="p-4">
+        <div className="cratis:p-4">
             <DataTableForObservableQuery<TasksQuery, Task, object>
                 query={TasksQuery}
                 emptyMessage="No tasks found"
@@ -121,7 +121,7 @@ export const WithSelection: Story = {
         const [selectedTask, setSelectedTask] = useState<Task | undefined>();
 
         return (
-            <div className="p-4">
+            <div className="cratis:p-4">
                 <DataTableForObservableQuery<TasksQuery, Task, object>
                     query={TasksQuery}
                     emptyMessage="No tasks found"
@@ -145,8 +145,8 @@ export const WithSelection: Story = {
                 </DataTableForObservableQuery>
 
                 {selectedTask && (
-                    <div className="mt-4 p-4 border rounded">
-                        <h3 className="font-bold mb-2">Selected Task:</h3>
+                    <div className="cratis:mt-4 cratis:p-4 cratis:border cratis:rounded">
+                        <h3 className="cratis:font-bold cratis:mb-2">Selected Task:</h3>
                         <p><strong>Title:</strong> {selectedTask.title}</p>
                         <p><strong>Status:</strong> {selectedTask.status}</p>
                         <p><strong>Priority:</strong> {selectedTask.priority}</p>
diff --git a/Source/DataTables/DataTableForQuery.stories.tsx b/Source/DataTables/DataTableForQuery.stories.tsx
index 743bcedd..91ae5a08 100644
--- a/Source/DataTables/DataTableForQuery.stories.tsx
+++ b/Source/DataTables/DataTableForQuery.stories.tsx
@@ -104,7 +104,7 @@ class ManyProductsQuery extends QueryFor<Product, object> {
 
 export const Default: Story = {
     render: () => (
-        <div className="p-4">
+        <div className="cratis:p-4">
             <DataTableForQuery<ProductsQuery, Product, object>
                 query={ProductsQuery}
                 emptyMessage="No products found"
@@ -145,7 +145,7 @@ export const Default: Story = {
  */
 export const InBoundedHeight: Story = {
     render: () => (
-        <div className="p-4">
+        <div className="cratis:p-4">
             <div style={{ height: '560px' }}>
                 <DataTableForQuery<ManyProductsQuery, Product, object>
                     query={ManyProductsQuery}
@@ -173,7 +173,7 @@ export const WithSelection: Story = {
         const [selectedProduct, setSelectedProduct] = useState<Product | undefined>();
 
         return (
-            <div className="p-4">
+            <div className="cratis:p-4">
                 <DataTableForQuery<ProductsQuery, Product, object>
                     query={ProductsQuery}
                     emptyMessage="No products found"
@@ -195,8 +195,8 @@ export const WithSelection: Story = {
                 </DataTableForQuery>
                 
                 {selectedProduct && (
-                    <div className="mt-4 p-4 border rounded">
-                        <h3 className="font-bold mb-2">Selected Product:</h3>
+                    <div className="cratis:mt-4 cratis:p-4 cratis:border cratis:rounded">
+                        <h3 className="cratis:font-bold cratis:mb-2">Selected Product:</h3>
                         <p><strong>Name:</strong> {selectedProduct.name}</p>
                         <p><strong>Category:</strong> {selectedProduct.category}</p>
                         <p><strong>Price:</strong> ${selectedProduct.price.toFixed(2)}</p>
diff --git a/Source/DataTables/for_DataTableCore/when_selecting_by_object_reference.tsx b/Source/DataTables/for_DataTableCore/when_selecting_by_object_reference.tsx
index 82486b5e..25f19146 100644
--- a/Source/DataTables/for_DataTableCore/when_selecting_by_object_reference.tsx
+++ b/Source/DataTables/for_DataTableCore/when_selecting_by_object_reference.tsx
@@ -10,8 +10,13 @@ import { afterEach, beforeEach, describe, it } from 'vitest';
 import { Column } from '../Column';
 import { DataTableCore } from '../DataTableCore';
 
+interface Person {
+    id?: string;
+    name: string;
+}
+
 describe('when selecting by object reference', () => {
-    const selected = { name: 'Grace' };
+    const selected: Person = { name: 'Grace' };
     let container: HTMLDivElement;
     let root: Root;
 
@@ -22,29 +27,37 @@ describe('when selecting by object reference', () => {
         container = document.createElement('div');
         document.body.append(container);
         root = createRoot(container);
+        await render([selected, { name: 'Ada' }], selected);
+    });
+
+    afterEach(async () => {
+        await act(async () => root.unmount());
+        container.remove();
+    });
+
+    const render = async (data: Person[], selection: Person, dataKey?: string) => {
         await act(async () => {
             root.render(
                 <DataTableCore
-                    data={[selected, { name: 'Ada' }]}
+                    data={data}
+                    dataKey={dataKey}
                     emptyMessage='No people'
                     selectionMode='single'
-                    selection={selected}
+                    selection={selection}
                     globalFilterFields={['name']}
                 >
                     <Column field='name' header='Name' sortable />
                 </DataTableCore>,
             );
         });
-    });
-
-    afterEach(async () => {
-        await act(async () => root.unmount());
-        container.remove();
-    });
+    };
 
+    const rows = () => Array.from(container.querySelectorAll('[data-cratis-part="row"]'));
+    const selectedRows = () =>
+        rows().filter((row) => row.getAttribute('aria-selected') === 'true');
     const selectedRow = () =>
-        Array.from(container.querySelectorAll('[data-cratis-part="row"]')).find(
-            (row) => row.textContent?.includes('Grace'),
+        Array.from(container.querySelectorAll('[data-cratis-part="row"]')).find((row) =>
+            row.textContent?.includes('Grace'),
         );
 
     it('should mark the referenced row selected without a data key', () => {
@@ -68,6 +81,31 @@ describe('when selecting by object reference', () => {
         expect(selectedRow()?.getAttribute('aria-selected')).to.equal('true');
     });
 
+    it('should_select_only_the_first_occurrence_of_a_repeated_reference', async () => {
+        await render([selected, selected], selected);
+
+        expect(rows()).to.have.length(2);
+        expect(selectedRows()).to.have.length(1);
+    });
+
+    it('should_select_the_exact_row_when_data_keys_are_duplicated', async () => {
+        const first = { id: 'same', name: 'First' };
+        const second = { id: 'same', name: 'Second' };
+        await render([first, second], second, 'id');
+
+        expect(selectedRows()).to.have.length(1);
+        expect(selectedRows()[0].textContent).to.contain('Second');
+    });
+
+    it('should_select_the_exact_row_when_data_keys_are_missing', async () => {
+        const first = { name: 'First' };
+        const second = { name: 'Second' };
+        await render([first, second], second, 'id');
+
+        expect(selectedRows()).to.have.length(1);
+        expect(selectedRows()[0].textContent).to.contain('Second');
+    });
+
     it('should_preserve_selection_after_loaded_page_sorting', async () => {
         const sort = container.querySelector<HTMLButtonElement>(
             '[data-cratis-part="sort"]',
diff --git a/Source/Dialogs/BusyIndicatorDialog.tsx b/Source/Dialogs/BusyIndicatorDialog.tsx
index 8148eb9e..d39865e6 100644
--- a/Source/Dialogs/BusyIndicatorDialog.tsx
+++ b/Source/Dialogs/BusyIndicatorDialog.tsx
@@ -66,11 +66,11 @@ export const BusyIndicatorDialog = (props: BusyIndicatorDialogRequest) => {
             initialFocus={DialogInitialFocus.Content}
             className='cratis-busy-indicator-dialog'
         >
-            <div className='flex flex-col items-center justify-center gap-4 py-4'>
+            <div className='cratis:flex cratis:flex-col cratis:items-center cratis:justify-center cratis:gap-4 cratis:py-4'>
                 {/* The spinner's role="progressbar" needs an accessible name; use the
                     consumer-supplied message/title (already localized), never a baked-in string. */}
                 <ProgressSpinner aria-label={props.message || props.title || 'Loading'} />
-                <p className='m-0 text-center'>{props.message}</p>
+                <p className='cratis:m-0 cratis:text-center'>{props.message}</p>
             </div>
         </Dialog>
     );
diff --git a/Source/Dialogs/ConfirmationDialog.tsx b/Source/Dialogs/ConfirmationDialog.tsx
index 5aafc47f..1f47bf97 100644
--- a/Source/Dialogs/ConfirmationDialog.tsx
+++ b/Source/Dialogs/ConfirmationDialog.tsx
@@ -19,7 +19,7 @@ export const ConfirmationDialog = () => {
             onClose={handleClose}
             buttons={request.buttons}
         >
-            <p className="m-0">
+            <p className="cratis:m-0">
                 {request.message}
             </p>
         </Dialog>
diff --git a/Source/Dialogs/Dialog.css b/Source/Dialogs/Dialog.css
index 063c3042..df4d21a6 100644
--- a/Source/Dialogs/Dialog.css
+++ b/Source/Dialogs/Dialog.css
@@ -4,7 +4,7 @@
 .cratis-dialog__backdrop {
     position: fixed;
     inset: 0;
-    z-index: 1100;
+    z-index: var(--cratis-z-index-dialog);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -31,10 +31,10 @@
     overflow: hidden;
     flex-direction: column;
     border: 1px solid var(--cratis-surface-border);
-    border-radius: calc(var(--cratis-border-radius) * 1.5);
+    border-radius: var(--cratis-border-radius);
     background: var(--cratis-surface-overlay);
     color: var(--cratis-text-color);
-    box-shadow: 0 1rem 3rem color-mix(in srgb, var(--cratis-text-color) 22%, transparent);
+    box-shadow: var(--cratis-shadow-dialog);
     outline: none;
 }
 .cratis-dialog__document {
@@ -109,24 +109,39 @@
 }
 .cratis-dialog__button {
     display: inline-flex;
-    min-height: 2.25rem;
-    padding: 0.5rem 0.85rem;
+    box-sizing: border-box;
+    min-height: var(--cratis-control-height);
+    padding: 0.75rem 1.25rem;
     align-items: center;
     justify-content: center;
     gap: 0.45rem;
-    border: 1px solid var(--cratis-primary-color);
+    border: 1px solid var(--cratis-action-background);
     border-radius: var(--cratis-border-radius);
     font: inherit;
     font-weight: 600;
     cursor: pointer;
 }
 .cratis-dialog__button--primary {
-    background: var(--cratis-primary-color);
-    color: var(--cratis-primary-color-text);
+    background: var(--cratis-action-background);
+    color: var(--cratis-action-text);
 }
 .cratis-dialog__button--secondary {
     background: transparent;
-    color: var(--cratis-primary-color);
+    color: var(--cratis-action-background);
+}
+.cratis-dialog__button--primary:hover:not(:disabled) {
+    border-color: var(--cratis-action-background-hover);
+    background: var(--cratis-action-background-hover);
+}
+.cratis-dialog__button--primary:active:not(:disabled) {
+    border-color: var(--cratis-action-background-active);
+    background: var(--cratis-action-background-active);
+}
+.cratis-dialog__button--secondary:hover:not(:disabled) {
+    background: color-mix(in srgb, var(--cratis-action-background) 4%, transparent);
+}
+.cratis-dialog__button--secondary:active:not(:disabled) {
+    background: color-mix(in srgb, var(--cratis-action-background) 16%, transparent);
 }
 .cratis-dialog__button:focus-visible {
     outline: none;
@@ -134,7 +149,7 @@
 }
 .cratis-dialog__button:disabled {
     cursor: not-allowed;
-    opacity: 0.55;
+    opacity: var(--cratis-disabled-opacity);
 }
 .cratis-dialog__spinner {
     width: 1em;
diff --git a/Source/Dialogs/Dialog.stories.tsx b/Source/Dialogs/Dialog.stories.tsx
index 8da2f803..737fb5e9 100644
--- a/Source/Dialogs/Dialog.stories.tsx
+++ b/Source/Dialogs/Dialog.stories.tsx
@@ -154,7 +154,7 @@ export const WithForm: Story = {
                     onCancel={() => closeDialog(DialogResult.Cancelled)}
                     isValid={name.trim().length > 0}
                 >
-                    <div className='flex flex-col gap-2'>
+                    <div className='cratis:flex cratis:flex-col cratis:gap-2'>
                         <label htmlFor='name'>Name</label>
                         <input
                             id='name'
@@ -164,7 +164,7 @@ export const WithForm: Story = {
                             placeholder='Enter name…'
                         />
                         {name.trim().length === 0 && (
-                            <small className='text-[var(--cratis-red-500)]'>
+                            <small className='cratis:text-[var(--cratis-red-500)]'>
                                 Name is required
                             </small>
                         )}
diff --git a/Source/Dialogs/Dialog.tsx b/Source/Dialogs/Dialog.tsx
index 553bc70e..5df5793c 100644
--- a/Source/Dialogs/Dialog.tsx
+++ b/Source/Dialogs/Dialog.tsx
@@ -394,7 +394,10 @@ export const Dialog = ({
             <div
                 {...pt?.backdrop}
                 className={classNames('cratis-dialog__backdrop', pt?.backdrop?.className)}
-                style={{ zIndex: 1100, ...pt?.backdrop?.style }}
+                style={{
+                    zIndex: 'var(--cratis-z-index-dialog)',
+                    ...pt?.backdrop?.style,
+                }}
                 data-cratis-part='backdrop'
             >
                 <div
@@ -433,7 +436,10 @@ export const Dialog = ({
             isDismissable={isDismissable}
             isKeyboardDismissDisabled={!isDismissable}
             className={classNames('cratis-dialog__backdrop', pt?.backdrop?.className)}
-            style={{ zIndex: 1100, ...pt?.backdrop?.style }}
+            style={{
+                zIndex: 'var(--cratis-z-index-dialog)',
+                ...pt?.backdrop?.style,
+            }}
             data-cratis-part='backdrop'
         >
             <div
diff --git a/Source/Display/Display.css b/Source/Display/Display.css
index 2f31a090..e6baeba6 100644
--- a/Source/Display/Display.css
+++ b/Source/Display/Display.css
@@ -46,8 +46,8 @@
     line-height: 1;
 }
 .cratis-badge {
-    min-width: 1.25rem;
-    min-height: 1.25rem;
+    min-width: 1.5rem;
+    min-height: 1.5rem;
     padding: 0.2rem 0.35rem;
     font-size: 0.75rem;
     font-weight: 700;
@@ -81,23 +81,23 @@
 
 .cratis-badge[data-severity='info'],
 .cratis-tag[data-severity='info'] {
-    background: color-mix(in srgb, var(--cratis-primary-color) 16%, transparent);
-    color: var(--cratis-primary-color);
+    background: var(--cratis-info-background);
+    color: var(--cratis-info-text);
 }
 .cratis-badge[data-severity='success'],
 .cratis-tag[data-severity='success'] {
-    background: color-mix(in srgb, var(--cratis-green-500) 16%, transparent);
-    color: var(--cratis-green-500);
+    background: var(--cratis-success-background);
+    color: var(--cratis-success-text);
 }
 .cratis-badge[data-severity='warn'],
 .cratis-tag[data-severity='warn'] {
-    background: color-mix(in srgb, var(--cratis-orange-500) 18%, transparent);
-    color: var(--cratis-orange-500);
+    background: var(--cratis-warning-background);
+    color: var(--cratis-warning-text);
 }
 .cratis-badge[data-severity='danger'],
 .cratis-tag[data-severity='danger'] {
-    background: color-mix(in srgb, var(--cratis-red-500) 16%, transparent);
-    color: var(--cratis-red-500);
+    background: var(--cratis-danger-background);
+    color: var(--cratis-danger-text);
 }
 .cratis-badge[data-severity='contrast'],
 .cratis-tag[data-severity='contrast'] {
@@ -157,7 +157,7 @@
 
 .cratis-progress-bar {
     position: relative;
-    height: 1rem;
+    height: 1.5rem;
     overflow: hidden;
     border-radius: 999px;
     background: var(--cratis-surface-100);
@@ -168,8 +168,8 @@
     min-width: 0;
     align-items: center;
     justify-content: center;
-    background: var(--cratis-primary-color);
-    color: var(--cratis-primary-color-text);
+    background: var(--cratis-action-background);
+    color: var(--cratis-action-text);
     transition: width 160ms ease;
 }
 .cratis-progress-bar[data-mode='indeterminate'] .cratis-progress-bar__indicator {
diff --git a/Source/Dropdown/Dropdown.css b/Source/Dropdown/Dropdown.css
index 9259551f..73695546 100644
--- a/Source/Dropdown/Dropdown.css
+++ b/Source/Dropdown/Dropdown.css
@@ -17,16 +17,17 @@
 .cratis-dropdown__filter,
 .cratis-dropdown__multiple {
     width: 100%;
-    min-height: 2.5rem;
-    border: 1px solid var(--cratis-surface-border);
+    box-sizing: border-box;
+    min-height: var(--cratis-control-height);
+    border: 1px solid var(--cratis-control-border);
     border-radius: var(--cratis-border-radius);
-    background: var(--cratis-surface-card);
+    background: var(--cratis-control-background);
     color: var(--cratis-text-color);
     font: inherit;
 }
 .cratis-dropdown__trigger {
     display: flex;
-    padding: 0.5rem 2.25rem 0.5rem 0.75rem;
+    padding: 0.625rem 2.25rem 0.625rem 0.75rem;
     align-items: center;
     justify-content: space-between;
     gap: 0.5rem;
@@ -34,7 +35,7 @@
     cursor: pointer;
 }
 .cratis-dropdown__filter {
-    padding: 0.5rem 4rem 0.5rem 0.75rem;
+    padding: 0.625rem 4rem 0.625rem 0.75rem;
 }
 .cratis-dropdown__multiple {
     padding: 0.4rem;
@@ -51,7 +52,7 @@
     border-color: var(--cratis-red-500);
 }
 .cratis-dropdown[data-disabled='true'] {
-    opacity: 0.6;
+    opacity: var(--cratis-disabled-opacity);
 }
 .cratis-dropdown__value {
     min-width: 0;
@@ -101,7 +102,7 @@
     box-shadow: var(--cratis-focus-ring);
 }
 .cratis-dropdown__popover {
-    z-index: 1200;
+    z-index: var(--cratis-z-index-overlay);
     min-width: var(--trigger-width);
     max-height: min(20rem, var(--available-height));
     overflow: auto;
@@ -109,8 +110,7 @@
     border-radius: var(--cratis-border-radius);
     background: var(--cratis-surface-overlay);
     color: var(--cratis-text-color);
-    box-shadow: 0 0.5rem 1.5rem
-        color-mix(in srgb, var(--cratis-text-color) 18%, transparent);
+    box-shadow: var(--cratis-shadow-overlay);
 }
 .cratis-dropdown__listbox {
     padding: 0.3rem;
@@ -118,8 +118,8 @@
 }
 .cratis-dropdown__option {
     display: flex;
-    min-height: 2.25rem;
-    padding: 0.45rem 0.65rem;
+    min-height: var(--cratis-control-height);
+    padding: 0.75rem 1.25rem;
     align-items: center;
     border-radius: calc(var(--cratis-border-radius) * 0.75);
     cursor: default;
diff --git a/Source/Dropdown/Dropdown.stories.tsx b/Source/Dropdown/Dropdown.stories.tsx
new file mode 100644
index 00000000..df9933be
--- /dev/null
+++ b/Source/Dropdown/Dropdown.stories.tsx
@@ -0,0 +1,74 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { expect, userEvent, within } from 'storybook/test';
+import { Dropdown } from './Dropdown';
+
+const roles = [
+    { label: 'Administrator', value: 'admin' },
+    { label: 'Developer', value: 'developer' },
+    { label: 'Viewer', value: 'viewer' },
+];
+
+const meta = {
+    title: 'Dropdown/Visual parity',
+    component: Dropdown,
+    parameters: { layout: 'padded' },
+    tags: ['autodocs'],
+} satisfies Meta<typeof Dropdown>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const ControlledDropdown = ({
+    initialValue = null,
+    filter = false,
+    disabled = false,
+    invalid = false,
+}: {
+    initialValue?: string | null;
+    filter?: boolean;
+    disabled?: boolean;
+    invalid?: boolean;
+}) => {
+    const [value, setValue] = useState<string | null>(initialValue);
+    return (
+        <Dropdown<string | null>
+            aria-label='Role'
+            value={value}
+            options={roles}
+            optionLabel='label'
+            optionValue='value'
+            placeholder='Select a role'
+            filter={filter}
+            filterPlaceholder='Find a role'
+            showClear
+            disabled={disabled}
+            invalid={invalid}
+            onChange={(event) => setValue(event.value)}
+            style={{ width: '18rem' }}
+        />
+    );
+};
+
+export const StateMatrix: Story = {
+    render: () => (
+        <div style={{ display: 'grid', gap: '1rem', maxWidth: '20rem' }}>
+            <ControlledDropdown />
+            <ControlledDropdown initialValue='developer' />
+            <ControlledDropdown initialValue='viewer' disabled />
+            <ControlledDropdown invalid />
+        </div>
+    ),
+};
+
+export const FilteredAndOpen: Story = {
+    render: () => <ControlledDropdown filter />,
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await userEvent.click(canvas.getByLabelText('Role'));
+        await expect(within(document.body).getByRole('listbox')).toBeTruthy();
+    },
+};
diff --git a/Source/Dropdown/Dropdown.tsx b/Source/Dropdown/Dropdown.tsx
index dd26040c..ae14244b 100644
--- a/Source/Dropdown/Dropdown.tsx
+++ b/Source/Dropdown/Dropdown.tsx
@@ -254,8 +254,7 @@ export const Dropdown = <T = unknown,>({
         ariaDescribedBy ??
         pt?.input?.['aria-describedby'] ??
         pt?.select?.['aria-describedby'];
-    const inputAriaInvalid =
-        pt?.input?.['aria-invalid'] ?? pt?.select?.['aria-invalid'];
+    const inputAriaInvalid = pt?.input?.['aria-invalid'] ?? pt?.select?.['aria-invalid'];
     const effectiveInvalid =
         invalid ??
         ariaInvalid ??
@@ -269,8 +268,7 @@ export const Dropdown = <T = unknown,>({
         pt?.select?.className,
         className,
     );
-    const triggerId =
-        id ?? inputId ?? pt?.trigger?.id ?? pt?.input?.id ?? pt?.select?.id;
+    const triggerId = id ?? inputId ?? pt?.trigger?.id ?? pt?.input?.id ?? pt?.select?.id;
 
     const selectOption = (key: Key | null) => {
         const option = resolvedOptions.find((candidate) => candidate.key === String(key));
@@ -387,7 +385,10 @@ export const Dropdown = <T = unknown,>({
                                 pt?.popover?.className,
                                 panelClassName,
                             )}
-                            style={{ zIndex: 1200, ...pt?.popover?.style }}
+                            style={{
+                                zIndex: 'var(--cratis-z-index-overlay)',
+                                ...pt?.popover?.style,
+                            }}
                             data-cratis-part='popover'
                         >
                             <ComboBoxListBox
@@ -565,7 +566,10 @@ export const Dropdown = <T = unknown,>({
                             pt?.popover?.className,
                             panelClassName,
                         )}
-                        style={{ zIndex: 1200, ...pt?.popover?.style }}
+                        style={{
+                            zIndex: 'var(--cratis-z-index-overlay)',
+                            ...pt?.popover?.style,
+                        }}
                         data-cratis-part='popover'
                     >
                         <ComboBoxListBox
@@ -679,7 +683,10 @@ export const Dropdown = <T = unknown,>({
                         pt?.popover?.className,
                         panelClassName,
                     )}
-                    style={{ zIndex: 1200, ...pt?.popover?.style }}
+                    style={{
+                        zIndex: 'var(--cratis-z-index-overlay)',
+                        ...pt?.popover?.style,
+                    }}
                     data-cratis-part='popover'
                 >
                     <ListBox
diff --git a/Source/Dropdown/for_Dropdown/when_opened_inside_a_dialog.ts b/Source/Dropdown/for_Dropdown/when_opened_inside_a_dialog.ts
index 3f5d8e79..5bc9ed64 100644
--- a/Source/Dropdown/for_Dropdown/when_opened_inside_a_dialog.ts
+++ b/Source/Dropdown/for_Dropdown/when_opened_inside_a_dialog.ts
@@ -37,6 +37,8 @@ describe('when a dropdown is opened inside a dialog', () => {
             disconnect() {}
         };
 
+        document.documentElement.style.setProperty('--cratis-z-index-dialog', '1100');
+        document.documentElement.style.setProperty('--cratis-z-index-overlay', '1200');
         container = document.createElement('div');
         document.body.appendChild(container);
         root = createRoot(container);
@@ -90,11 +92,16 @@ describe('when a dropdown is opened inside a dialog', () => {
             '[data-cratis-part="popover"]',
         ) as HTMLElement;
 
-        dialogPositionerZIndex = Number.parseInt(
-            getComputedStyle(dialogPositioner).zIndex,
-            10,
-        );
-        panelZIndex = Number.parseInt(getComputedStyle(panel).zIndex, 10);
+        const resolvedZIndex = (element: HTMLElement) => {
+            const declaration = element.style.zIndex || getComputedStyle(element).zIndex;
+            const variable = declaration.match(/var\((--[^)]+)\)/u)?.[1];
+            const value = variable
+                ? getComputedStyle(document.documentElement).getPropertyValue(variable)
+                : declaration;
+            return Number.parseInt(value, 10);
+        };
+        dialogPositionerZIndex = resolvedZIndex(dialogPositioner);
+        panelZIndex = resolvedZIndex(panel);
         panelIsInsideTheDialog = dialogPopup.contains(panel);
         panelIsPortaledToTheBody =
             document.body.contains(panel) && !container.contains(panel);
@@ -106,6 +113,8 @@ describe('when a dropdown is opened inside a dialog', () => {
             root.unmount();
         });
         container.remove();
+        document.documentElement.style.removeProperty('--cratis-z-index-dialog');
+        document.documentElement.style.removeProperty('--cratis-z-index-overlay');
     });
 
     it('should render the panel outside the dialog rather than inside its stacking context', () => {
diff --git a/Source/Filter/FilterPanel.tsx b/Source/Filter/FilterPanel.tsx
index 0ca7ee64..fb3b1c88 100644
--- a/Source/Filter/FilterPanel.tsx
+++ b/Source/Filter/FilterPanel.tsx
@@ -1,348 +1,426 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { Children, isValidElement, useEffect, useMemo, useRef, useState } from 'react';
+import {
+    Children,
+    isValidElement,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+    useSyncExternalStore,
+} from 'react';
 import type { ReactNode } from 'react';
 import { createPortal } from 'react-dom';
 import { AnimatePresence, motion } from 'framer-motion';
 import type {
-  FilterDefinition,
-  FilterEditorProps,
-  FilterValues,
-  RangeValues,
-  CustomFilterValues,
+    FilterDefinition,
+    FilterEditorProps,
+    FilterValues,
+    RangeValues,
+    CustomFilterValues,
 } from './types';
 import { FilterEditor } from './FilterEditor';
 import { RangeHistogramFilter } from './RangeHistogramFilter';
 
 export interface FilterPanelProps {
-  /** Whether the panel is visible. */
-  isOpen: boolean;
-  /** Filter definitions, each describing one filter group. */
-  filters: FilterDefinition[];
-  /** Current string/option selections, keyed by FilterDefinition.key. */
-  filterValues: FilterValues;
-  /** Current numeric range selections, keyed by FilterDefinition.key. */
-  rangeValues: RangeValues;
-  /** Current values for filters using a custom `<FilterEditor>` child, keyed by FilterDefinition.key. */
-  customValues?: CustomFilterValues;
-  /** Current search text shown in the search box. */
-  search?: string;
-  /** Placeholder text for the search input. Defaults to 'Search…'. */
-  searchPlaceholder?: string;
-  /** Accessible name for a clear-filter button. Override to localize. Defaults to 'Clear filter'. */
-  clearFilterAriaLabel?: string;
-  /** Accessible name for a clear-range button. Override to localize. Defaults to 'Clear range'. */
-  clearRangeAriaLabel?: string;
-  /** Which filter group is currently expanded. */
-  expandedFilterKey?: string | null;
-  /** The button element the panel anchors below. */
-  anchorRef: React.RefObject<HTMLButtonElement | null>;
-  /** Called when the panel should close (e.g. click outside). */
-  onClose: () => void;
-  /** Called when the search text changes. If omitted, the search box is hidden. */
-  onSearchChange?: (value: string) => void;
-  /** Called when a string option is toggled. */
-  onFilterToggle: (filterKey: string, optionKey: string, multi: boolean) => void;
-  /** Called when all selections for a filter are cleared. */
-  onFilterClear: (filterKey: string) => void;
-  /** Called when a numeric range changes. */
-  onRangeChange: (filterKey: string, range: [number, number] | null) => void;
-  /** Called when the expanded filter group changes. */
-  onExpandedFilterChange: (key: string | null) => void;
-  /** Called when a custom-editor value changes. */
-  onCustomValueChange?: (filterKey: string, value: unknown) => void;
-  /**
-   * `<FilterEditor>` elements that provide custom UI for specific filter groups.
-   *
-   * ```tsx
-   * <FilterPanel filters={filters} {...stateProps}>
-   *   <FilterEditor filterKey="rating">
-   *     {({ value, onChange }) => <MyPicker value={value} onChange={onChange} />}
-   *   </FilterEditor>
-   * </FilterPanel>
-   * ```
-   */
-  children?: ReactNode;
+    /** Whether the panel is visible. */
+    isOpen: boolean;
+    /** Filter definitions, each describing one filter group. */
+    filters: FilterDefinition[];
+    /** Current string/option selections, keyed by FilterDefinition.key. */
+    filterValues: FilterValues;
+    /** Current numeric range selections, keyed by FilterDefinition.key. */
+    rangeValues: RangeValues;
+    /** Current values for filters using a custom `<FilterEditor>` child, keyed by FilterDefinition.key. */
+    customValues?: CustomFilterValues;
+    /** Current search text shown in the search box. */
+    search?: string;
+    /** Placeholder text for the search input. Defaults to 'Search…'. */
+    searchPlaceholder?: string;
+    /** Accessible name for a clear-filter button. Override to localize. Defaults to 'Clear filter'. */
+    clearFilterAriaLabel?: string;
+    /** Accessible name for a clear-range button. Override to localize. Defaults to 'Clear range'. */
+    clearRangeAriaLabel?: string;
+    /** Which filter group is currently expanded. */
+    expandedFilterKey?: string | null;
+    /** The button element the panel anchors below. */
+    anchorRef: React.RefObject<HTMLButtonElement | null>;
+    /** Called when the panel should close (e.g. click outside). */
+    onClose: () => void;
+    /** Called when the search text changes. If omitted, the search box is hidden. */
+    onSearchChange?: (value: string) => void;
+    /** Called when a string option is toggled. */
+    onFilterToggle: (filterKey: string, optionKey: string, multi: boolean) => void;
+    /** Called when all selections for a filter are cleared. */
+    onFilterClear: (filterKey: string) => void;
+    /** Called when a numeric range changes. */
+    onRangeChange: (filterKey: string, range: [number, number] | null) => void;
+    /** Called when the expanded filter group changes. */
+    onExpandedFilterChange: (key: string | null) => void;
+    /** Called when a custom-editor value changes. */
+    onCustomValueChange?: (filterKey: string, value: unknown) => void;
+    /**
+     * `<FilterEditor>` elements that provide custom UI for specific filter groups.
+     *
+     * ```tsx
+     * <FilterPanel filters={filters} {...stateProps}>
+     *   <FilterEditor filterKey="rating">
+     *     {({ value, onChange }) => <MyPicker value={value} onChange={onChange} />}
+     *   </FilterEditor>
+     * </FilterPanel>
+     * ```
+     */
+    children?: ReactNode;
 }
 
 /** Build a map of filterKey → render function from any <FilterEditor> children. */
 function buildEditorMap(
-  children: ReactNode | undefined
+    children: ReactNode | undefined,
 ): Record<string, (props: FilterEditorProps) => ReactNode> {
-  const map: Record<string, (props: FilterEditorProps) => ReactNode> = {};
-  Children.forEach(children, (child) => {
-    if (isValidElement(child) && child.type === FilterEditor) {
-      const { filterKey, children: renderFn } = child.props as {
-        filterKey: string;
-        children: (props: FilterEditorProps) => ReactNode;
-      };
-      if (filterKey && typeof renderFn === 'function') {
-        map[filterKey] = renderFn;
-      }
-    }
-  });
-  return map;
+    const map: Record<string, (props: FilterEditorProps) => ReactNode> = {};
+    Children.forEach(children, (child) => {
+        if (isValidElement(child) && child.type === FilterEditor) {
+            const { filterKey, children: renderFn } = child.props as {
+                filterKey: string;
+                children: (props: FilterEditorProps) => ReactNode;
+            };
+            if (filterKey && typeof renderFn === 'function') {
+                map[filterKey] = renderFn;
+            }
+        }
+    });
+    return map;
 }
 
 function renderOptionCount(count: number | undefined): string | number {
-  return typeof count === 'number' ? count : '';
+    return typeof count === 'number' ? count : '';
 }
 
 interface OptionListProps {
-  filter: FilterDefinition;
-  selections: Set<string>;
-  onFilterToggle: (filterKey: string, optionKey: string, multi: boolean) => void;
+    filter: FilterDefinition;
+    selections: Set<string>;
+    onFilterToggle: (filterKey: string, optionKey: string, multi: boolean) => void;
 }
 
-function OptionList({ filter, selections, onFilterToggle }: Omit<OptionListProps, 'onFilterClear'>) {
-  const [groupSearch, setGroupSearch] = useState('');
-  const allOptions = filter.options ?? [];
-  const normalized = groupSearch.trim().toLowerCase();
-  const visibleOptions = filter.searchable && normalized.length > 0
-    ? allOptions.filter(option => option.label.toLowerCase().includes(normalized))
-    : allOptions;
+function OptionList({
+    filter,
+    selections,
+    onFilterToggle,
+}: Omit<OptionListProps, 'onFilterClear'>) {
+    const [groupSearch, setGroupSearch] = useState('');
+    const allOptions = filter.options ?? [];
+    const normalized = groupSearch.trim().toLowerCase();
+    const visibleOptions =
+        filter.searchable && normalized.length > 0
+            ? allOptions.filter((option) =>
+                  option.label.toLowerCase().includes(normalized),
+              )
+            : allOptions;
 
-  return (
-    <>
-      {filter.searchable && (
-        <div className="pv-filter-group-search">
-          <input
-            type="search"
-            placeholder={filter.searchPlaceholder ?? 'Search…'}
-            value={groupSearch}
-            onChange={(event) => setGroupSearch(event.target.value)}
-          />
-        </div>
-      )}
-      <ul>
-        {visibleOptions.map((option) => {
-          const optionKey = option.key;
-          const checked = selections.has(optionKey);
-          return (
-            <li key={option.key}>
-              <label>
-                <input
-                  type={filter.multi ? 'checkbox' : 'radio'}
-                  name={`filter-${filter.key}`}
-                  checked={checked}
-                  onChange={() =>
-                    onFilterToggle(filter.key, optionKey, filter.multi ?? false)
-                  }
-                />
-                <span>{option.label}</span>
-                <span className="pv-option-count">{renderOptionCount(option.count)}</span>
-              </label>
-            </li>
-          );
-        })}
-      </ul>
-    </>
-  );
+    return (
+        <>
+            {filter.searchable && (
+                <div className='pv-filter-group-search'>
+                    <input
+                        type='search'
+                        placeholder={filter.searchPlaceholder ?? 'Search…'}
+                        value={groupSearch}
+                        onChange={(event) => setGroupSearch(event.target.value)}
+                    />
+                </div>
+            )}
+            <ul>
+                {visibleOptions.map((option) => {
+                    const optionKey = option.key;
+                    const checked = selections.has(optionKey);
+                    return (
+                        <li key={option.key}>
+                            <label>
+                                <input
+                                    type={filter.multi ? 'checkbox' : 'radio'}
+                                    name={`filter-${filter.key}`}
+                                    checked={checked}
+                                    onChange={() =>
+                                        onFilterToggle(
+                                            filter.key,
+                                            optionKey,
+                                            filter.multi ?? false,
+                                        )
+                                    }
+                                />
+                                <span>{option.label}</span>
+                                <span className='pv-option-count'>
+                                    {renderOptionCount(option.count)}
+                                </span>
+                            </label>
+                        </li>
+                    );
+                })}
+            </ul>
+        </>
+    );
 }
 
+const subscribeToBrowserState = () => () => undefined;
+const browserSnapshot = () => true;
+const serverSnapshot = () => false;
+
 export function FilterPanel({
-  isOpen,
-  filters,
-  filterValues,
-  rangeValues,
-  customValues,
-  search,
-  searchPlaceholder = 'Search…',
-  clearFilterAriaLabel = 'Clear filter',
-  clearRangeAriaLabel = 'Clear range',
-  expandedFilterKey,
-  anchorRef,
-  onClose,
-  onSearchChange,
-  onFilterToggle,
-  onFilterClear,
-  onRangeChange,
-  onExpandedFilterChange,
-  onCustomValueChange,
-  children,
+    isOpen,
+    filters,
+    filterValues,
+    rangeValues,
+    customValues,
+    search,
+    searchPlaceholder = 'Search…',
+    clearFilterAriaLabel = 'Clear filter',
+    clearRangeAriaLabel = 'Clear range',
+    expandedFilterKey,
+    anchorRef,
+    onClose,
+    onSearchChange,
+    onFilterToggle,
+    onFilterClear,
+    onRangeChange,
+    onExpandedFilterChange,
+    onCustomValueChange,
+    children,
 }: FilterPanelProps) {
-  const panelRef = useRef<HTMLDivElement>(null);
-  const [position, setPosition] = useState({ top: 0, left: 0 });
+    const isBrowser = useSyncExternalStore(
+        subscribeToBrowserState,
+        browserSnapshot,
+        serverSnapshot,
+    );
+    const panelRef = useRef<HTMLDivElement>(null);
+    const [position, setPosition] = useState({ top: 0, left: 0 });
 
-  const editorMap = useMemo(() => buildEditorMap(children), [children]);
+    const editorMap = useMemo(() => buildEditorMap(children), [children]);
 
-  // Calculate position when opening
-  useEffect(() => {
-    if (isOpen && anchorRef.current) {
-      const rect = anchorRef.current.getBoundingClientRect();
-      setPosition({
-        top: rect.bottom + 8,
-        left: rect.left,
-      });
-    }
-  }, [isOpen]);
+    // Calculate position when opening
+    useEffect(() => {
+        if (isOpen && anchorRef.current) {
+            const rect = anchorRef.current.getBoundingClientRect();
+            setPosition({
+                top: rect.bottom + 8,
+                left: rect.left,
+            });
+        }
+    }, [isOpen]);
 
-  // Handle click outside to close
-  useEffect(() => {
-    if (!isOpen) return;
+    // Handle click outside to close
+    useEffect(() => {
+        if (!isOpen) return;
 
-    const handleClickOutside = (event: MouseEvent) => {
-      const target = event.target as Node;
-      const panel = panelRef.current;
-      const anchor = anchorRef.current;
+        const handleClickOutside = (event: MouseEvent) => {
+            const target = event.target as Node;
+            const panel = panelRef.current;
+            const anchor = anchorRef.current;
 
-      if (panel && !panel.contains(target) && anchor && !anchor.contains(target)) {
-        onClose();
-      }
-    };
+            if (panel && !panel.contains(target) && anchor && !anchor.contains(target)) {
+                onClose();
+            }
+        };
 
-    // Use capture phase to ensure we catch the event before any other handlers.
-    // Use timeout to avoid closing immediately when clicking the button to open.
-    const timeoutId = setTimeout(() => {
-      document.addEventListener('mousedown', handleClickOutside, true);
-    }, 0);
+        // Use capture phase to ensure we catch the event before any other handlers.
+        // Use timeout to avoid closing immediately when clicking the button to open.
+        const timeoutId = setTimeout(() => {
+            document.addEventListener('mousedown', handleClickOutside, true);
+        }, 0);
 
-    return () => {
-      clearTimeout(timeoutId);
-      document.removeEventListener('mousedown', handleClickOutside, true);
-    };
-  }, [isOpen, anchorRef, onClose]);
+        return () => {
+            clearTimeout(timeoutId);
+            document.removeEventListener('mousedown', handleClickOutside, true);
+        };
+    }, [isOpen, anchorRef, onClose]);
 
-  if (typeof document === 'undefined') return null;
-
-  return createPortal(
-    <AnimatePresence initial={false}>
-      {isOpen && (
-        <motion.aside
-          ref={panelRef}
-          className="pv-filter-dropdown"
-          style={{
-            position: 'fixed',
-            left: position.left,
-            top: position.top,
-          }}
-          initial={{ opacity: 0, y: -8 }}
-          animate={{ opacity: 1, y: 0 }}
-          exit={{ opacity: 0, y: -8 }}
-          transition={{ duration: 0.15 }}
-        >
-          <div className="pv-filter-dropdown-content">
-            {onSearchChange && (
-              <div className="pv-search">
-                <input
-                  type="search"
-                  placeholder={searchPlaceholder}
-                  value={search ?? ''}
-                  onChange={(event) => onSearchChange(event.target.value)}
-                />
-              </div>
-            )}
-            <div className="pv-filter-groups">
-              {filters.map((filter) => {
-                const selections = filterValues[filter.key] ?? new Set<string>();
-                const rangeSelection = rangeValues[filter.key];
-                const customValue = customValues?.[filter.key];
-                const isExpanded = expandedFilterKey === filter.key;
-                const isDate = filter.type === 'date';
-                const isNumeric = filter.type === 'number' || isDate;
-                const editorRender = editorMap[filter.key];
-                const isCustom = filter.type === 'custom' || editorRender !== undefined;
-                const formatRangeValue = isDate
-                  ? (value: number) => new Date(value).toLocaleString()
-                  : undefined;
+    if (!isBrowser) return null;
 
-                return (
-                  <div key={filter.key} className={`pv-filter ${isExpanded ? 'expanded' : ''}`}>
-                    <button
-                      type="button"
-                      className="pv-filter-trigger"
-                      onClick={() => onExpandedFilterChange(isExpanded ? null : filter.key)}
-                    >
-                      <span className="pv-filter-label">{filter.label}</span>
-                      <span className="pv-filter-trigger-meta">
-                        {!isNumeric && !isCustom && selections.size > 0 && (
-                          <>
-                            <span className="pv-filter-count">{selections.size}</span>
-                            <button
-                              type="button"
-                              className="pv-filter-clear-header"
-                              title="Clear filter"
-                              onClick={(e) => {
-                                e.stopPropagation();
-                                onFilterClear(filter.key);
-                              }}
-                              aria-label={clearFilterAriaLabel}
-                            >
-                              ×
-                            </button>
-                          </>
+    return createPortal(
+        <AnimatePresence initial={false}>
+            {isOpen && (
+                <motion.aside
+                    ref={panelRef}
+                    className='pv-filter-dropdown'
+                    style={{
+                        position: 'fixed',
+                        left: position.left,
+                        top: position.top,
+                    }}
+                    initial={{ opacity: 0, y: -8 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    exit={{ opacity: 0, y: -8 }}
+                    transition={{ duration: 0.15 }}
+                >
+                    <div className='pv-filter-dropdown-content'>
+                        {onSearchChange && (
+                            <div className='pv-search'>
+                                <input
+                                    type='search'
+                                    placeholder={searchPlaceholder}
+                                    value={search ?? ''}
+                                    onChange={(event) =>
+                                        onSearchChange(event.target.value)
+                                    }
+                                />
+                            </div>
                         )}
-                        {isNumeric && rangeSelection && (
-                          <>
-                            <span className="pv-filter-count">Range</span>
-                            <button
-                              type="button"
-                              className="pv-filter-clear-header"
-                              title="Clear range"
-                              onClick={(e) => {
-                                e.stopPropagation();
-                                onRangeChange(filter.key, null);
-                              }}
-                              aria-label={clearRangeAriaLabel}
-                            >
-                              ×
-                            </button>
-                          </>
-                        )}
-                        {isCustom && customValue !== undefined && customValue !== null && (
-                          <>
-                            <span className="pv-filter-count">•</span>
-                            <button
-                              type="button"
-                              className="pv-filter-clear-header"
-                              title="Clear filter"
-                              onClick={(e) => {
-                                e.stopPropagation();
-                                onCustomValueChange?.(filter.key, undefined);
-                              }}
-                              aria-label={clearFilterAriaLabel}
-                            >
-                              ×
-                            </button>
-                          </>
-                        )}
-                        <span className="pv-filter-chevron" />
-                      </span>
-                    </button>
-                    <div className={`pv-filter-content ${isExpanded ? 'expanded' : ''}`}>
-                      {isCustom && editorRender ? (
-                        editorRender({
-                          value: customValue,
-                          onChange: (value) => onCustomValueChange?.(filter.key, value),
-                        })
-                      ) : isNumeric && filter.numericRange ? (
-                        <RangeHistogramFilter
-                          values={filter.numericRange.values}
-                          histogram={filter.numericRange.histogram}
-                          min={filter.numericRange.min}
-                          max={filter.numericRange.max}
-                          buckets={filter.buckets ?? 20}
-                          selectedRange={rangeSelection ?? null}
-                          onChange={(range) => onRangeChange(filter.key, range)}
-                          formatValue={formatRangeValue}
-                        />
-                      ) : (
-                        <OptionList
-                          filter={filter}
-                          selections={selections}
-                          onFilterToggle={onFilterToggle}
-                        />
-                      )}
+                        <div className='pv-filter-groups'>
+                            {filters.map((filter) => {
+                                const selections =
+                                    filterValues[filter.key] ?? new Set<string>();
+                                const rangeSelection = rangeValues[filter.key];
+                                const customValue = customValues?.[filter.key];
+                                const isExpanded = expandedFilterKey === filter.key;
+                                const isDate = filter.type === 'date';
+                                const isNumeric = filter.type === 'number' || isDate;
+                                const editorRender = editorMap[filter.key];
+                                const isCustom =
+                                    filter.type === 'custom' ||
+                                    editorRender !== undefined;
+                                const formatRangeValue = isDate
+                                    ? (value: number) => new Date(value).toLocaleString()
+                                    : undefined;
+
+                                return (
+                                    <div
+                                        key={filter.key}
+                                        className={`pv-filter ${isExpanded ? 'expanded' : ''}`}
+                                    >
+                                        <button
+                                            type='button'
+                                            className='pv-filter-trigger'
+                                            onClick={() =>
+                                                onExpandedFilterChange(
+                                                    isExpanded ? null : filter.key,
+                                                )
+                                            }
+                                        >
+                                            <span className='pv-filter-label'>
+                                                {filter.label}
+                                            </span>
+                                            <span className='pv-filter-trigger-meta'>
+                                                {!isNumeric &&
+                                                    !isCustom &&
+                                                    selections.size > 0 && (
+                                                        <>
+                                                            <span className='pv-filter-count'>
+                                                                {selections.size}
+                                                            </span>
+                                                            <button
+                                                                type='button'
+                                                                className='pv-filter-clear-header'
+                                                                title='Clear filter'
+                                                                onClick={(e) => {
+                                                                    e.stopPropagation();
+                                                                    onFilterClear(
+                                                                        filter.key,
+                                                                    );
+                                                                }}
+                                                                aria-label={
+                                                                    clearFilterAriaLabel
+                                                                }
+                                                            >
+                                                                ×
+                                                            </button>
+                                                        </>
+                                                    )}
+                                                {isNumeric && rangeSelection && (
+                                                    <>
+                                                        <span className='pv-filter-count'>
+                                                            Range
+                                                        </span>
+                                                        <button
+                                                            type='button'
+                                                            className='pv-filter-clear-header'
+                                                            title='Clear range'
+                                                            onClick={(e) => {
+                                                                e.stopPropagation();
+                                                                onRangeChange(
+                                                                    filter.key,
+                                                                    null,
+                                                                );
+                                                            }}
+                                                            aria-label={
+                                                                clearRangeAriaLabel
+                                                            }
+                                                        >
+                                                            ×
+                                                        </button>
+                                                    </>
+                                                )}
+                                                {isCustom &&
+                                                    customValue !== undefined &&
+                                                    customValue !== null && (
+                                                        <>
+                                                            <span className='pv-filter-count'>
+                                                                •
+                                                            </span>
+                                                            <button
+                                                                type='button'
+                                                                className='pv-filter-clear-header'
+                                                                title='Clear filter'
+                                                                onClick={(e) => {
+                                                                    e.stopPropagation();
+                                                                    onCustomValueChange?.(
+                                                                        filter.key,
+                                                                        undefined,
+                                                                    );
+                                                                }}
+                                                                aria-label={
+                                                                    clearFilterAriaLabel
+                                                                }
+                                                            >
+                                                                ×
+                                                            </button>
+                                                        </>
+                                                    )}
+                                                <span className='pv-filter-chevron' />
+                                            </span>
+                                        </button>
+                                        <div
+                                            className={`pv-filter-content ${isExpanded ? 'expanded' : ''}`}
+                                        >
+                                            {isCustom && editorRender ? (
+                                                editorRender({
+                                                    value: customValue,
+                                                    onChange: (value) =>
+                                                        onCustomValueChange?.(
+                                                            filter.key,
+                                                            value,
+                                                        ),
+                                                })
+                                            ) : isNumeric && filter.numericRange ? (
+                                                <RangeHistogramFilter
+                                                    values={filter.numericRange.values}
+                                                    histogram={
+                                                        filter.numericRange.histogram
+                                                    }
+                                                    min={filter.numericRange.min}
+                                                    max={filter.numericRange.max}
+                                                    buckets={filter.buckets ?? 20}
+                                                    selectedRange={rangeSelection ?? null}
+                                                    onChange={(range) =>
+                                                        onRangeChange(filter.key, range)
+                                                    }
+                                                    formatValue={formatRangeValue}
+                                                />
+                                            ) : (
+                                                <OptionList
+                                                    filter={filter}
+                                                    selections={selections}
+                                                    onFilterToggle={onFilterToggle}
+                                                />
+                                            )}
+                                        </div>
+                                    </div>
+                                );
+                            })}
+                        </div>
                     </div>
-                  </div>
-                );
-              })}
-            </div>
-          </div>
-        </motion.aside>
-      )}
-    </AnimatePresence>,
-    document.body
-  );
+                </motion.aside>
+            )}
+        </AnimatePresence>,
+        document.body,
+    );
 }
diff --git a/Source/Filter/for_FilterPanel/when_hydrating_an_open_panel.tsx b/Source/Filter/for_FilterPanel/when_hydrating_an_open_panel.tsx
new file mode 100644
index 00000000..c842a274
--- /dev/null
+++ b/Source/Filter/for_FilterPanel/when_hydrating_an_open_panel.tsx
@@ -0,0 +1,78 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { createRef } from 'react';
+import { act } from 'react';
+import { hydrateRoot, type Root } from 'react-dom/client';
+import { renderToString } from 'react-dom/server';
+import { expect } from 'chai';
+import { afterEach, beforeEach, describe, it, vi } from 'vitest';
+import { FilterPanel } from '../FilterPanel';
+
+const anchorRef = createRef<HTMLButtonElement>();
+const noOp = () => undefined;
+const element = (
+    <FilterPanel
+        isOpen
+        filters={[]}
+        filterValues={{}}
+        rangeValues={{}}
+        anchorRef={anchorRef}
+        onClose={noOp}
+        onFilterToggle={noOp}
+        onFilterClear={noOp}
+        onRangeChange={noOp}
+        onExpandedFilterChange={noOp}
+    />
+);
+
+describe('when hydrating an initially open FilterPanel', () => {
+    let container: HTMLDivElement;
+    let root: Root;
+    const hydrationErrors: string[] = [];
+    const originalConsoleError = console.error;
+
+    beforeEach(async () => {
+        (
+            globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
+        ).IS_REACT_ACT_ENVIRONMENT = true;
+        vi.spyOn(console, 'error').mockImplementation((...values: unknown[]) => {
+            const message = values.map(String).join(' ');
+            if (/hydration|did not match|server rendered/i.test(message)) {
+                hydrationErrors.push(message);
+            } else {
+                originalConsoleError(...values);
+            }
+        });
+
+        container = document.createElement('div');
+        const serverDocument = new DOMParser().parseFromString(
+            renderToString(element),
+            'text/html',
+        );
+        container.append(...Array.from(serverDocument.body.childNodes));
+        document.body.append(container);
+
+        await act(async () => {
+            root = hydrateRoot(container, element);
+            await new Promise((resolve) => setTimeout(resolve, 50));
+        });
+    });
+
+    afterEach(async () => {
+        await act(async () => root.unmount());
+        container.remove();
+        vi.restoreAllMocks();
+        hydrationErrors.length = 0;
+    });
+
+    it('should_preserve_the_server_tree_through_the_first_client_render', () => {
+        expect(hydrationErrors).to.deep.equal([]);
+    });
+
+    it('should_mount_the_open_panel_after_hydration', () => {
+        expect(document.querySelector('.pv-filter-dropdown')).not.to.equal(null);
+    });
+});
diff --git a/Source/LICENSE b/Source/LICENSE
new file mode 100644
index 00000000..200ffde5
--- /dev/null
+++ b/Source/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Cratis
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/Source/MIGRATION.md b/Source/MIGRATION.md
index de37e27d..37fca829 100644
--- a/Source/MIGRATION.md
+++ b/Source/MIGRATION.md
@@ -43,10 +43,10 @@ A custom product design can omit `theme`, define the `--cratis-*` variables itse
 
 ## Simplify the provider
 
-The provider now owns locale and Components-specific labels. It temporarily accepts unknown legacy renderer keys so staged source migrations compile, but ignores them. Remove PrimeUI keys, renderer presets, global Prime pass-through maps, ripple settings, and renderer defaults.
+The provider now owns locale and Components-specific labels. Unknown renderer keys are a type error so a migrated app cannot silently lose its theme, license, global pass-through, ripple, or z-index behavior. Remove those keys from `CratisComponentsProvider` and configure any remaining direct Prime provider independently.
 
 ```tsx
-import { CratisComponentsProvider } from '@cratis/components';
+import { CratisComponentsProvider } from '@cratis/components/Common';
 
 export const ApplicationRoot = ({ children }: { children: React.ReactNode }) => (
     <CratisComponentsProvider
@@ -76,31 +76,31 @@ export const ApplicationRoot = ({ children }: { children: React.ReactNode }) =>
 );
 ```
 
-`locales` remains temporarily accepted and maps the old paginator/date labels, but new code should use `messages`. Unknown renderer keys are ignored and should be removed.
+`locales` remains temporarily accepted and maps the old paginator/date labels, but new code should use `messages`. Renderer keys such as `license`, `theme`, `defaults`, `pt`, `ripple`, `unstyled`, and z-index settings are not part of this provider.
 
 ## Replace renderer presets with tokens
 
 Remove `styledMode()`, `CratisPreset`, and `primeReactStyles` before upgrading. Components 4 removes three renderer-specific subpaths:
 
-| Removed subpath | Migration |
-| --- | --- |
-| `@cratis/components/styled` | Import Cratis tokens/styles and map product tokens directly as shown below. |
-| `@cratis/components/compatibility` | Replace Prime slot types/sentinel presets with each component's Cratis-owned `*Parts` type. The root `Compatibility` namespace is also removed. |
-| `@cratis/components/primereact-v10-palette` | Remove legacy Prime variable dependencies; define product tokens and map them to `--cratis-*`, or use the baseline theme. |
+| Removed subpath                             | Migration                                                                                                                                       |
+| ------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
+| `@cratis/components/styled`                 | Import Cratis tokens/styles and map product tokens directly as shown below.                                                                     |
+| `@cratis/components/compatibility`          | Replace Prime slot types/sentinel presets with each component's Cratis-owned `*Parts` type. The root `Compatibility` namespace is also removed. |
+| `@cratis/components/primereact-v10-palette` | Remove legacy Prime variable dependencies; define product tokens and map them to `--cratis-*`, or use the baseline theme.                       |
 
 There is no compatibility-package replacement in Components 4. Stay on Components 3 while renderer-specific types or selectors remain.
 
 ### Removed symbol mapping
 
-| Removed Components 3 export | Components 4 action |
-| --- | --- |
-| `styledMode`, `StyledModeOptions`, `CratisPreset`, `primeReactStyles` | Remove renderer configuration; use provider locale/messages and direct `--cratis-*` token mappings. |
-| `primeReactCssLayer`, `primeReactCssLayerOrder` | Delete unless the product still owns direct Prime CSS; product layer ordering belongs in product CSS. |
-| `cratisDarkModeSelector` | Use the product's own theme selector and assign `--cratis-*` values under it. |
-| `assertPrimeReact11PassThroughCompatibility` | Delete after moving renderer slots to typed Cratis `*Parts` surfaces. |
-| `components3PrimeReact11PassThroughContract`, `PrimeReact11PassThroughComponent` | Replace with component-specific public part types. |
-| `primeReact11PassThroughSentinelAttribute`, `primeReact11PassThroughSentinelPreset` | Replace with documented `data-cratis-part` and state attributes. |
-| `@cratis/components/primereact-v10-palette` variables | Map canonical product tokens directly to `--cratis-*`. |
+| Removed Components 3 export                                                         | Components 4 action                                                                                   |
+| ----------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
+| `styledMode`, `StyledModeOptions`, `CratisPreset`, `primeReactStyles`               | Remove renderer configuration; use provider locale/messages and direct `--cratis-*` token mappings.   |
+| `primeReactCssLayer`, `primeReactCssLayerOrder`                                     | Delete unless the product still owns direct Prime CSS; product layer ordering belongs in product CSS. |
+| `cratisDarkModeSelector`                                                            | Use the product's own theme selector and assign `--cratis-*` values under it.                         |
+| `assertPrimeReact11PassThroughCompatibility`                                        | Delete after moving renderer slots to typed Cratis `*Parts` surfaces.                                 |
+| `components3PrimeReact11PassThroughContract`, `PrimeReact11PassThroughComponent`    | Replace with component-specific public part types.                                                    |
+| `primeReact11PassThroughSentinelAttribute`, `primeReact11PassThroughSentinelPreset` | Replace with documented `data-cratis-part` and state attributes.                                      |
+| `@cratis/components/primereact-v10-palette` variables                               | Map canonical product tokens directly to `--cratis-*`.                                                |
 
 Before:
 
@@ -226,9 +226,13 @@ The old `stepperpanel.header` wrapper has no one-to-one element. Put list-item l
 
 For an Ada-style design system, remove `styledMode`, `AdaPreset`, Prime locale types, and the PrimeUI license from the Components provider. Keep `--ada-*` as the canonical tokens and map them directly to `--cratis-*`. If the product still imports Prime directly, retain a separate Prime provider, preset, dependencies, and license until those imports are removed. Migrate Ada's role filter from `registerMatcher` to `registerDataTableFilterMatcher` and use the returned `matchMode` in its constraint.
 
-For Studio Liquid Glass, replace renderer part types with `DialogParts`, `StepperParts`, and the complete Toolbar part family: `ToolbarParts`, `ToolbarButtonParts`, `ToolbarGroupParts`, `ToolbarSeparatorParts`, `ToolbarLayoutParts`, `ToolbarSectionParts`, `ToolbarFolderParts`, and `ToolbarFanOutParts`. Keep Studio's shaders and measurement wrappers product-owned. Measure `toolbar-group`, `toolbar-separator`, `toolbar-layout`, `toolbar-section`, `toolbar-context`, and `toolbar-slot*` `data-cratis-part` boundaries; pass the integrated Canvas surface through `controlsGlassSurface`; and localize its actions through `controlsLabels`.
+A Components 2 / PrimeReact 10 product such as Stagehand can migrate directly to Components 4 without an intermediate Prime 11 conversion. Keep its Prime 10 provider/theme for direct Prime surfaces, mount Components independently, move `DataPage` children to the Cratis `Column`, and migrate direct controls in batches.
 
-The published migration guide contains complete Ada provider/token and Studio Dialog/Stepper/Toolbar/Canvas mapping examples.
+A Components 3 / PrimeReact 11 product such as Chronicle Workbench can start with the Components baseline theme while keeping a separate licensed Prime provider. Retain application-owned grouped/lazy tables and ordinary action rows when Components does not claim those behaviors.
+
+For Studio Liquid Glass, replace renderer part types with `DialogParts`, `StepperParts`, and the complete Toolbar part family: `ToolbarParts`, `ToolbarButtonParts`, `ToolbarGroupParts`, `ToolbarSeparatorParts`, `ToolbarLayoutParts`, `ToolbarSectionParts`, `ToolbarFolderParts`, and `ToolbarFanOutParts`. Keep Studio's shaders and measurement wrappers product-owned. Measure stable `data-cratis-part` and state boundaries; pass the integrated Canvas surface through `controlsGlassSurface`; pass Studio's layer/content/transform-host marker names through `captureAttributes`; and localize actions through `controlsLabels`.
+
+The published migration guide contains the complete Ada, Stagehand, Workbench, and Studio mappings and stop conditions.
 
 Paginator callbacks that formerly returned classes from renderer context must become static Cratis parts plus CSS state selectors:
 
@@ -351,3 +355,5 @@ Complete PrimeIcons class strings remain usable where a component accepts `Icon`
 8. Run TypeScript, specs, Storybook, and the production build.
 
 For the decision, trade-offs, and validation gates, read the published [UI foundation](https://cratis.io/components/ui-foundation/) explanation. For the older 2.x → 3.x PrimeReact migration, see [Migrate from Components 2 to 3](https://cratis.io/components/migration-from-2/).
+
+Tracked follow-up remains explicit: [#109](https://github.com/Cratis/Components/issues/109) covers a future Arc React table-state binding, [#159](https://github.com/Cratis/Components/issues/159) covers complete-result server filtering before paging, [#173](https://github.com/Cratis/Components/issues/173) covers the package-export/TSDoc audit, [#174](https://github.com/Cratis/Components/issues/174) covers remaining provider-localized labels, and [#175](https://github.com/Cratis/Components/issues/175) covers locale-aware number input. None is silently implemented by a compatibility flag in Components 4.
diff --git a/Source/Notifications/Toaster.css b/Source/Notifications/Toaster.css
index a4d954f0..d70b9936 100644
--- a/Source/Notifications/Toaster.css
+++ b/Source/Notifications/Toaster.css
@@ -3,7 +3,7 @@
 
 .cratis-toaster {
     position: fixed;
-    z-index: 1400;
+    z-index: var(--cratis-z-index-toast);
     display: flex;
     width: min(26rem, calc(100vw - 2rem));
     flex-direction: column;
@@ -36,11 +36,10 @@
     gap: 0.625rem;
     border: 1px solid var(--cratis-surface-border);
     border-inline-start: 4px solid var(--cratis-surface-border);
-    border-radius: calc(var(--cratis-border-radius) * 1.25);
+    border-radius: var(--cratis-border-radius);
     background: var(--cratis-surface-overlay);
     color: var(--cratis-text-color);
-    box-shadow: 0 0.5rem 1.5rem
-        color-mix(in srgb, var(--cratis-text-color) 24%, transparent);
+    box-shadow: var(--cratis-shadow-toast);
     pointer-events: auto;
 }
 .cratis-toast__content {
diff --git a/Source/ObjectContentEditor/ObjectContentEditor.stories.tsx b/Source/ObjectContentEditor/ObjectContentEditor.stories.tsx
index e3b9cf8a..0f2e2754 100644
--- a/Source/ObjectContentEditor/ObjectContentEditor.stories.tsx
+++ b/Source/ObjectContentEditor/ObjectContentEditor.stories.tsx
@@ -207,7 +207,7 @@ export const EditModeWithValidation: Story = {
         const [obj, setObj] = useState<Json>({ ...editableObject as object, name: '', email: 'not-an-email' });
         const [hasErrors, setHasErrors] = useState(false);
         return (
-            <div className="p-4">
+            <div className="cratis:p-4">
                 <ObjectContentEditor
                     object={obj}
                     schema={editableSchema}
@@ -215,13 +215,13 @@ export const EditModeWithValidation: Story = {
                     onChange={setObj}
                     onValidationChange={setHasErrors}
                 />
-                <div className="mt-4">
+                <div className="cratis:mt-4">
                     <button className="cratis-button" data-variant="filled" data-severity="secondary" data-size="normal" disabled={hasErrors}
                     onClick={() => alert('Saved: ' + JSON.stringify(obj, null, 2))}>
                         Save
                     </button>
                     {hasErrors && (
-                        <span className="ml-3 text-[var(--cratis-red-500)]">Please fix validation errors before saving.</span>
+                        <span className="cratis:ml-3 cratis:text-[var(--cratis-red-500)]">Please fix validation errors before saving.</span>
                     )}
                 </div>
             </div>
diff --git a/Source/ObjectContentEditor/ObjectContentEditor.tsx b/Source/ObjectContentEditor/ObjectContentEditor.tsx
index 28d99455..f3cb2144 100644
--- a/Source/ObjectContentEditor/ObjectContentEditor.tsx
+++ b/Source/ObjectContentEditor/ObjectContentEditor.tsx
@@ -293,7 +293,7 @@ export const ObjectContentEditor = ({
                         checked={Boolean(value)}
                         onChange={(event) => handleChange(event.target.checked)}
                         aria-invalid={Boolean(error) || undefined}
-                        className='size-5 accent-[var(--cratis-primary-color)]'
+                        className='cratis:size-5 cratis:accent-[var(--cratis-primary-color)]'
                     />
                     {error && <small style={fieldErrorStyle}>{error}</small>}
                 </div>
@@ -314,7 +314,7 @@ export const ObjectContentEditor = ({
                             )
                         }
                         aria-invalid={Boolean(error) || undefined}
-                        className='cratis-field-input w-full'
+                        className='cratis-field-input cratis:w-full'
                     />
                     {error && <small style={fieldErrorStyle}>{error}</small>}
                 </div>
@@ -359,7 +359,7 @@ export const ObjectContentEditor = ({
         if (property.type === 'array') {
             return (
                 <div
-                    className='flex items-center gap-2'
+                    className='cratis:flex cratis:items-center cratis:gap-2'
                     style={{
                         color: 'var(--cratis-text-color-secondary)',
                         fontStyle: 'italic',
@@ -373,7 +373,7 @@ export const ObjectContentEditor = ({
         if (property.type === 'object') {
             return (
                 <div
-                    className='flex items-center gap-2'
+                    className='cratis:flex cratis:items-center cratis:gap-2'
                     style={{
                         color: 'var(--cratis-text-color-secondary)',
                         fontStyle: 'italic',
@@ -394,7 +394,7 @@ export const ObjectContentEditor = ({
                         onChange={(event) => handleChange(event.target.value)}
                         rows={3}
                         aria-invalid={Boolean(error) || undefined}
-                        className='cratis-field-input cratis-field-textarea w-full'
+                        className='cratis-field-input cratis-field-textarea cratis:w-full'
                     />
                     {error && <small style={fieldErrorStyle}>{error}</small>}
                 </div>
@@ -407,7 +407,7 @@ export const ObjectContentEditor = ({
                     value={String(value ?? '')}
                     onChange={(event) => handleChange(event.target.value)}
                     aria-invalid={Boolean(error) || undefined}
-                    className='cratis-field-input w-full'
+                    className='cratis-field-input cratis:w-full'
                 />
                 {error && <small style={fieldErrorStyle}>{error}</small>}
             </div>
@@ -421,7 +421,7 @@ export const ObjectContentEditor = ({
             return (
                 <button
                     type='button'
-                    className='flex items-center gap-2 cursor-pointer'
+                    className='cratis:flex cratis:items-center cratis:gap-2 cratis:cursor-pointer'
                     onClick={() => navigateToProperty(propertyName)}
                     style={{
                         color: 'var(--cratis-primary-color)',
@@ -447,7 +447,7 @@ export const ObjectContentEditor = ({
             return (
                 <button
                     type='button'
-                    className='flex items-center gap-2 cursor-pointer'
+                    className='cratis:flex cratis:items-center cratis:gap-2 cratis:cursor-pointer'
                     onClick={() => navigateToProperty(propertyName)}
                     style={{
                         color: 'var(--cratis-primary-color)',
diff --git a/Source/ObjectNavigationalBar/ObjectNavigationalBar.tsx b/Source/ObjectNavigationalBar/ObjectNavigationalBar.tsx
index b8f428d3..5b14c482 100644
--- a/Source/ObjectNavigationalBar/ObjectNavigationalBar.tsx
+++ b/Source/ObjectNavigationalBar/ObjectNavigationalBar.tsx
@@ -50,8 +50,8 @@ export function ObjectNavigationalBar({
         [navigationPath],
     );
     const rootClassName = className
-        ? `cratis-object-navigational-bar px-4 py-2 mb-2 ${className}`
-        : 'cratis-object-navigational-bar px-4 py-2 mb-2';
+        ? `cratis-object-navigational-bar cratis:px-4 cratis:py-2 cratis:mb-2 ${className}`
+        : 'cratis-object-navigational-bar cratis:px-4 cratis:py-2 cratis:mb-2';
 
     return (
         <div className={rootClassName}>
@@ -74,7 +74,7 @@ export function ObjectNavigationalBar({
                 >
                     {breadcrumbItems.map((item, index) => (
                         <span key={index}>
-                            {index > 0 && <span className='mx-2'>&gt;</span>}
+                            {index > 0 && <span className='cratis:mx-2'>&gt;</span>}
                             <button
                                 type='button'
                                 onClick={() => onNavigate(item.index)}
diff --git a/Source/PivotViewer/components/AxisLabels.tsx b/Source/PivotViewer/components/AxisLabels.tsx
index 4a2fbbbf..26044b09 100644
--- a/Source/PivotViewer/components/AxisLabels.tsx
+++ b/Source/PivotViewer/components/AxisLabels.tsx
@@ -29,7 +29,7 @@ export function AxisLabels<TItem extends object>({
 }: AxisLabelsProps<TItem>) {
   return (
     <div
-      className={`pv-axis-labels ${visible ? 'visible' : 'hidden'}`}
+      className={`pv-axis-labels ${visible ? 'cratis:visible' : 'cratis:hidden'}`}
       ref={containerRef}
       style={{
         // Align labels start with grouped buckets using canvas padding scaled by zoom
diff --git a/Source/PivotViewer/components/pivot/sprites.ts b/Source/PivotViewer/components/pivot/sprites.ts
index ce95d985..a7c20e25 100644
--- a/Source/PivotViewer/components/pivot/sprites.ts
+++ b/Source/PivotViewer/components/pivot/sprites.ts
@@ -8,326 +8,394 @@ import type { CardSprite, CardColors } from './constants';
 const spritePool: CardSprite[] = [];
 
 export function createCardSprite<TItem extends object>(
-  id: number | string,
-  x: number,
-  y: number,
-  items: TItem[],
-  onCardClick: (item: TItem, e: MouseEvent, id: number | string) => void,
-  onPanStart: (e: MouseEvent) => void,
-  cardWidth: number,
-  cardHeight: number,
-  cardColors: CardColors,
-  cardRenderer: (item: TItem) => { title: string; labels?: string[]; values?: string[] },
-  resolveId: (item: TItem, index: number) => string | number,
+    id: number | string,
+    x: number,
+    y: number,
+    items: TItem[],
+    onCardClick: (item: TItem, e: MouseEvent, id: number | string) => void,
+    onPanStart: (e: MouseEvent) => void,
+    cardWidth: number,
+    cardHeight: number,
+    cardColors: CardColors,
+    cardRenderer: (item: TItem) => {
+        title: string;
+        labels?: string[];
+        values?: string[];
+    },
+    resolveId: (item: TItem, index: number) => string | number,
 ): CardSprite {
-  if (spritePool.length > 0) {
-    const sprite = spritePool.pop()!;
-    if (sprite.container) {
-      sprite.container.visible = true;
-      sprite.container.alpha = 1;
-      sprite.container.position.set(x, y);
-    }
-    sprite.itemId = id;
-    sprite.targetX = x;
-    sprite.targetY = y;
-    sprite.currentX = x;
-    sprite.currentY = y;
-
-    // Reset animation state
-    delete sprite.animationStartTime;
-    delete sprite.animationDelay;
-    delete sprite.startX;
-    delete sprite.startY;
-
-    // Reset cache
-    sprite.lastSelectedId = null;
-    sprite.lastCardColors = undefined;
-    sprite.lastTitle = undefined;
-    sprite.lastLabels = undefined;
-    sprite.lastValues = undefined;
-
-    // Recreate graphics if it was destroyed
-    if (!sprite.graphics || sprite.graphics.destroyed) {
-      sprite.graphics = new PIXI.Graphics();
-      if (sprite.container) {
-        sprite.container.addChildAt(sprite.graphics, 0);
-      }
+    if (spritePool.length > 0) {
+        const sprite = spritePool.pop()!;
+        if (sprite.container) {
+            sprite.container.visible = true;
+            sprite.container.alpha = 1;
+            sprite.container.position.set(x, y);
+        }
+        sprite.itemId = id;
+        sprite.targetX = x;
+        sprite.targetY = y;
+        sprite.currentX = x;
+        sprite.currentY = y;
+
+        // Reset animation state
+        delete sprite.animationStartTime;
+        delete sprite.animationDelay;
+        delete sprite.startX;
+        delete sprite.startY;
+
+        // Reset cache
+        sprite.lastSelectedId = null;
+        sprite.lastCardColors = undefined;
+        sprite.lastTitle = undefined;
+        sprite.lastLabels = undefined;
+        sprite.lastValues = undefined;
+
+        // Recreate graphics if it was destroyed
+        if (!sprite.graphics || sprite.graphics.destroyed) {
+            sprite.graphics = new PIXI.Graphics();
+            if (sprite.container) {
+                sprite.container.addChildAt(sprite.graphics, 0);
+            }
+        }
+
+        // Recreate text objects if they were destroyed
+        const offsetX = CARD_GAP / 2;
+        const offsetY = CARD_GAP / 2;
+
+        if (!sprite.titleText || sprite.titleText.destroyed) {
+            sprite.titleText = new PIXI.Text('', {
+                fontSize: 13,
+                fill: cardColors.text as string | number,
+                fontWeight: '600',
+                lineHeight: 18,
+                wordWrap: false,
+            } as PIXI.TextStyle);
+            sprite.titleText.position.set(offsetX + CARD_PADDING, offsetY + CARD_PADDING);
+            if (sprite.container) {
+                sprite.container.addChild(sprite.titleText);
+            }
+        }
+
+        if (!sprite.labelsText || sprite.labelsText.destroyed) {
+            sprite.labelsText = new PIXI.Text('', {
+                fontSize: 11,
+                fill: cardColors.textSecondary as string | number,
+                fontWeight: '400',
+                lineHeight: 18,
+            } as PIXI.TextStyle);
+            sprite.labelsText.position.set(
+                offsetX + CARD_PADDING,
+                offsetY + CARD_PADDING + 40,
+            );
+            if (sprite.container) {
+                sprite.container.addChild(sprite.labelsText);
+            }
+        }
+
+        if (!sprite.valuesText || sprite.valuesText.destroyed) {
+            sprite.valuesText = new PIXI.Text('', {
+                fontSize: 11,
+                fill: cardColors.text as string | number,
+                fontWeight: '500',
+                lineHeight: 18,
+                wordWrap: false,
+            } as PIXI.TextStyle);
+            sprite.valuesText.position.set(
+                offsetX + CARD_PADDING + 65,
+                offsetY + CARD_PADDING + 40,
+            );
+            if (sprite.container) {
+                sprite.container.addChild(sprite.valuesText);
+            }
+        }
+
+        // Update event context
+        if (sprite.container) {
+            // SAFETY: Pixi containers permit application-owned metadata used by these event handlers.
+            (
+                sprite.container as unknown as {
+                    _eventContext: {
+                        items: TItem[];
+                        onCardClick: (
+                            item: TItem,
+                            e: MouseEvent,
+                            id: number | string,
+                        ) => void;
+                        id: number | string;
+                        cardRenderer: (item: TItem) => {
+                            title: string;
+                            labels?: string[];
+                            values?: string[];
+                        };
+                        resolveId: (item: TItem, index: number) => string | number;
+                    };
+                }
+            )._eventContext = { items, onCardClick, id, cardRenderer, resolveId };
+        }
+
+        return sprite;
     }
 
-    // Recreate text objects if they were destroyed
+    const container = new PIXI.Container();
+    container.eventMode = 'static';
+    container.cursor = 'pointer';
+    container.position.set(x, y);
+
+    // Define hit area to match the visible card size (excluding gaps)
+    // This ensures the entire card is clickable and avoids issues with text blocking hits
+    container.hitArea = new PIXI.Rectangle(
+        CARD_GAP / 2,
+        CARD_GAP / 2,
+        cardWidth - CARD_GAP,
+        cardHeight - CARD_GAP,
+    );
+
+    // Container configured for pointer interactions; hitArea matches visible card.
+
+    // Store context for event handlers.
+    // SAFETY: Pixi containers permit application-owned metadata used by these event handlers.
+    (
+        container as unknown as {
+            _eventContext: {
+                items: TItem[];
+                onCardClick: (item: TItem, e: MouseEvent, id: number | string) => void;
+                id: number | string;
+                cardRenderer: (item: TItem) => {
+                    title: string;
+                    labels?: string[];
+                    values?: string[];
+                };
+                resolveId: (item: TItem, index: number) => string | number;
+            };
+        }
+    )._eventContext = { items, onCardClick, id, cardRenderer, resolveId };
+
+    const graphics = new PIXI.Graphics();
+
+    const actualWidth = cardWidth - CARD_GAP;
+    const actualHeight = cardHeight - CARD_GAP;
     const offsetX = CARD_GAP / 2;
     const offsetY = CARD_GAP / 2;
-    
-    if (!sprite.titleText || sprite.titleText.destroyed) {
-      sprite.titleText = new PIXI.Text('', {
+
+    const gradient = new PIXI.FillGradient(0, offsetY, 0, offsetY + actualHeight);
+    gradient.addColorStop(0, cardColors.mid);
+    gradient.addColorStop(1, cardColors.base);
+
+    graphics.roundRect(offsetX, offsetY, actualWidth, actualHeight, CARD_RADIUS);
+    graphics.fill(gradient);
+
+    container.addChild(graphics);
+
+    const titleText = new PIXI.Text('', {
         fontSize: 13,
         fill: cardColors.text as string | number,
         fontWeight: '600',
         lineHeight: 18,
         wordWrap: false,
-      } as PIXI.TextStyle);
-      sprite.titleText.position.set(offsetX + CARD_PADDING, offsetY + CARD_PADDING);
-      if (sprite.container) {
-        sprite.container.addChild(sprite.titleText);
-      }
-    }
+    } as PIXI.TextStyle);
+    titleText.position.set(offsetX + CARD_PADDING, offsetY + CARD_PADDING);
+    container.addChild(titleText);
 
-    if (!sprite.labelsText || sprite.labelsText.destroyed) {
-      sprite.labelsText = new PIXI.Text('', {
+    const labelsText = new PIXI.Text('', {
         fontSize: 11,
         fill: cardColors.textSecondary as string | number,
         fontWeight: '400',
         lineHeight: 18,
-      } as PIXI.TextStyle);
-      sprite.labelsText.position.set(offsetX + CARD_PADDING, offsetY + CARD_PADDING + 40);
-      if (sprite.container) {
-        sprite.container.addChild(sprite.labelsText);
-      }
-    }
+    } as PIXI.TextStyle);
+    labelsText.position.set(offsetX + CARD_PADDING, offsetY + CARD_PADDING + 40);
+    container.addChild(labelsText);
 
-    if (!sprite.valuesText || sprite.valuesText.destroyed) {
-      sprite.valuesText = new PIXI.Text('', {
+    const valuesText = new PIXI.Text('', {
         fontSize: 11,
         fill: cardColors.text as string | number,
         fontWeight: '500',
         lineHeight: 18,
         wordWrap: false,
-      } as PIXI.TextStyle);
-      sprite.valuesText.position.set(offsetX + CARD_PADDING + 65, offsetY + CARD_PADDING + 40);
-      if (sprite.container) {
-        sprite.container.addChild(sprite.valuesText);
-      }
-    }
+    } as PIXI.TextStyle);
+    valuesText.position.set(offsetX + CARD_PADDING + 65, offsetY + CARD_PADDING + 40);
+    container.addChild(valuesText);
+
+    container.on('click', (e: PIXI.FederatedPointerEvent) => {
+        e.stopPropagation();
+        // SAFETY: The context is assigned above before pointer handlers can run.
+        const ctx = (
+            container as unknown as {
+                _eventContext: {
+                    items: TItem[];
+                    onCardClick: (
+                        item: TItem,
+                        e: MouseEvent,
+                        id: number | string,
+                    ) => void;
+                    id: number | string;
+                };
+            }
+        )._eventContext;
+        const itemsArray = ctx.items;
+        const numericId = typeof ctx.id === 'number' ? ctx.id : Number(ctx.id);
+        const item = itemsArray[numericId];
+        if (item) {
+            ctx.onCardClick(item, e.nativeEvent as MouseEvent, ctx.id);
+        }
+    });
+
+    container.on('pointerdown', (e: PIXI.FederatedPointerEvent) => {
+        e.stopPropagation();
+        // onPanStart(e.nativeEvent as MouseEvent);
+    });
+
+    return {
+        container,
+        graphics,
+        titleText,
+        labelsText,
+        valuesText,
+        itemId: id,
+        targetX: x,
+        targetY: y,
+        currentX: x,
+        currentY: y,
+    };
+}
 
-    // Update event context
-    if (sprite.container) {
-      (sprite.container as unknown as { _eventContext: { items: TItem[]; onCardClick: (item: TItem, e: MouseEvent, id: number | string) => void; id: number | string; cardRenderer: (item: TItem) => { title: string; labels?: string[]; values?: string[] }; resolveId: (item: TItem, index: number) => string | number } })._eventContext = { items, onCardClick, id, cardRenderer, resolveId };
+export function destroySprite(sprite: CardSprite) {
+    if (sprite.container && sprite.container.parent) {
+        sprite.container.parent.removeChild(sprite.container);
     }
-
-    return sprite;
-  }
-
-  const container = new PIXI.Container();
-  container.eventMode = 'static';
-  container.cursor = 'pointer';
-  container.position.set(x, y);
-
-  // Define hit area to match the visible card size (excluding gaps)
-  // This ensures the entire card is clickable and avoids issues with text blocking hits
-  container.hitArea = new PIXI.Rectangle(
-      CARD_GAP / 2,
-      CARD_GAP / 2,
-      cardWidth - CARD_GAP,
-      cardHeight - CARD_GAP
-  );
-
-  // Container configured for pointer interactions; hitArea matches visible card.
-
-  // Store context for event handlers
-  (container as unknown as { _eventContext: { items: TItem[]; onCardClick: (item: TItem, e: MouseEvent, id: number | string) => void; id: number | string; cardRenderer: (item: TItem) => { title: string; labels?: string[]; values?: string[] }; resolveId: (item: TItem, index: number) => string | number } })._eventContext = { items, onCardClick, id, cardRenderer, resolveId };
-
-  const graphics = new PIXI.Graphics();
-
-  const actualWidth = cardWidth - CARD_GAP;
-  const actualHeight = cardHeight - CARD_GAP;
-  const offsetX = CARD_GAP / 2;
-  const offsetY = CARD_GAP / 2;
-
-  const gradient = new PIXI.FillGradient(0, offsetY, 0, offsetY + actualHeight);
-  gradient.addColorStop(0, cardColors.mid);
-  gradient.addColorStop(1, cardColors.base);
-
-  graphics.roundRect(offsetX, offsetY, actualWidth, actualHeight, CARD_RADIUS);
-  graphics.fill(gradient);
-
-  container.addChild(graphics);
-
-  const titleText = new PIXI.Text('', {
-    fontSize: 13,
-    fill: cardColors.text as string | number,
-    fontWeight: '600',
-    lineHeight: 18,
-    wordWrap: false,
-  } as PIXI.TextStyle);
-  titleText.position.set(offsetX + CARD_PADDING, offsetY + CARD_PADDING);
-  container.addChild(titleText);
-
-  const labelsText = new PIXI.Text('', {
-    fontSize: 11,
-    fill: cardColors.textSecondary as string | number,
-    fontWeight: '400',
-    lineHeight: 18,
-  } as PIXI.TextStyle);
-  labelsText.position.set(offsetX + CARD_PADDING, offsetY + CARD_PADDING + 40);
-  container.addChild(labelsText);
-
-  const valuesText = new PIXI.Text('', {
-    fontSize: 11,
-    fill: cardColors.text as string | number,
-    fontWeight: '500',
-    lineHeight: 18,
-    wordWrap: false,
-  } as PIXI.TextStyle);
-  valuesText.position.set(offsetX + CARD_PADDING + 65, offsetY + CARD_PADDING + 40);
-  container.addChild(valuesText);
-
-  container.on('click', (e: PIXI.FederatedPointerEvent) => {
-    e.stopPropagation();
-    const ctx = (container as unknown as { _eventContext: { items: TItem[]; onCardClick: (item: TItem, e: MouseEvent, id: number | string) => void; id: number | string } })._eventContext;
-    const itemsArray = ctx.items;
-    const numericId = typeof ctx.id === 'number' ? ctx.id : Number(ctx.id);
-    const item = itemsArray[numericId];
-    if (item) {
-      ctx.onCardClick(item, e.nativeEvent as MouseEvent, ctx.id);
+    // Reset visibility to ensure it doesn't ghost if something goes wrong
+    if (sprite.container) {
+        sprite.container.visible = false;
     }
-  });
-
-  container.on('pointerdown', (e: PIXI.FederatedPointerEvent) => {
-    e.stopPropagation();
-    // onPanStart(e.nativeEvent as MouseEvent);
-  });
-
-  return {
-    container,
-    graphics,
-    titleText,
-    labelsText,
-    valuesText,
-    itemId: id,
-    targetX: x,
-    targetY: y,
-    currentX: x,
-    currentY: y,
-  };
+    spritePool.push(sprite);
 }
 
-export function destroySprite(sprite: CardSprite) {
-  if (sprite.container && sprite.container.parent) {
-    sprite.container.parent.removeChild(sprite.container);
-  }
-  // Reset visibility to ensure it doesn't ghost if something goes wrong
-  if (sprite.container) {
-    sprite.container.visible = false;
-  }
-  spritePool.push(sprite);
+export function clearSpritePool() {
+    for (const sprite of spritePool) {
+        try {
+            sprite.graphics?.destroy();
+            sprite.titleText?.destroy();
+            sprite.labelsText?.destroy();
+            sprite.valuesText?.destroy();
+            sprite.container?.destroy();
+        } catch (e) {
+            void e;
+        }
+    }
+    spritePool.length = 0;
 }
 
-export function clearSpritePool() {
-  for (const sprite of spritePool) {
-    try {
-      sprite.graphics?.destroy();
-      sprite.titleText?.destroy();
-      sprite.labelsText?.destroy();
-      sprite.valuesText?.destroy();
-      sprite.container?.destroy();
-    } catch (e) {
-      void e;
+/** Refreshes every existing Pixi text fill after a public color override changes. */
+export function updateCardTextColors(sprite: CardSprite, colors: CardColors) {
+    if (sprite.titleText?.style) {
+        sprite.titleText.style.fill = colors.text;
+    }
+    if (sprite.labelsText?.style) {
+        sprite.labelsText.style.fill = colors.textSecondary;
+    }
+    if (sprite.valuesText?.style) {
+        sprite.valuesText.style.fill = colors.text;
     }
-  }
-  spritePool.length = 0;
 }
 
 // Updated: Text objects now recreated when recycling pooled sprites
 export function updateCardContent<TItem extends object>(
-  sprite: CardSprite,
-  item: TItem,
-  selectedId: string | number | null,
-  cardWidth: number,
-  cardHeight: number,
-  cardColors: CardColors,
-  cardRenderer: (item: TItem) => { title: string; labels?: string[]; values?: string[] },
+    sprite: CardSprite,
+    item: TItem,
+    selectedId: string | number | null,
+    cardWidth: number,
+    cardHeight: number,
+    cardColors: CardColors,
+    cardRenderer: (item: TItem) => {
+        title: string;
+        labels?: string[];
+        values?: string[];
+    },
 ) {
-  if (!item) return;
+    if (!item) return;
 
-  // Selection rendering depends on sprite.itemId matching selectedId
+    // Selection rendering depends on sprite.itemId matching selectedId
 
-  const colors = cardColors;
-  const cardData = cardRenderer(item);
-  const titleDisplay = cardData.title;
-  const labelsText = (cardData.labels || []).join('\n');
-  const valuesText = (cardData.values || []).join('\n');
-  const colorsChanged = sprite.lastCardColors !== colors;
+    const colors = cardColors;
+    const cardData = cardRenderer(item);
+    const titleDisplay = cardData.title;
+    const labelsText = (cardData.labels || []).join('\n');
+    const valuesText = (cardData.values || []).join('\n');
+    const colorsChanged = sprite.lastCardColors !== colors;
 
-  // Ensure text objects exist before using them
-  if (!sprite.titleText || sprite.titleText.destroyed) return;
-  if (!sprite.labelsText || sprite.labelsText.destroyed) return;
-  if (!sprite.valuesText || sprite.valuesText.destroyed) return;
+    // Ensure text objects exist before using them
+    if (!sprite.titleText || sprite.titleText.destroyed) return;
+    if (!sprite.labelsText || sprite.labelsText.destroyed) return;
+    if (!sprite.valuesText || sprite.valuesText.destroyed) return;
 
-  if (sprite.lastTitle !== titleDisplay) {
-    sprite.titleText.text = titleDisplay;
-    sprite.lastTitle = titleDisplay;
-  }
+    if (sprite.lastTitle !== titleDisplay) {
+        sprite.titleText.text = titleDisplay;
+        sprite.lastTitle = titleDisplay;
+    }
 
     if (sprite.lastLabels !== labelsText) {
-    sprite.labelsText.text = labelsText;
-    sprite.lastLabels = labelsText;
-  }
+        sprite.labelsText.text = labelsText;
+        sprite.lastLabels = labelsText;
+    }
 
-  if (colorsChanged && sprite.labelsText.style) {
-    (sprite.labelsText.style as unknown as { fill: string | number }).fill = colors.textSecondary;
-  }
+    if (colorsChanged) updateCardTextColors(sprite, colors);
 
-  if (sprite.lastValues !== valuesText) {
-    sprite.valuesText.text = valuesText;
-    sprite.lastValues = valuesText;
-  }
+    if (sprite.lastValues !== valuesText) {
+        sprite.valuesText.text = valuesText;
+        sprite.lastValues = valuesText;
+    }
 
-  if (colorsChanged && sprite.valuesText.style) {
-    (sprite.valuesText.style as unknown as { fill: string | number }).fill = colors.text;
-  }
+    sprite.titleText.visible = true;
+    sprite.labelsText.visible = true;
+    sprite.valuesText.visible = true;
 
-  sprite.titleText.visible = true;
-  sprite.labelsText.visible = true;
-  sprite.valuesText.visible = true;
+    const isSelected = sprite.itemId === selectedId;
 
-  const isSelected = sprite.itemId === selectedId;
+    // Only redraw graphics if selection state or colors changed
+    if (sprite.lastSelectedId === selectedId && !colorsChanged && sprite.graphics) {
+        return;
+    }
 
-  // Only redraw graphics if selection state or colors changed
-  if (sprite.lastSelectedId === selectedId && !colorsChanged && sprite.graphics) {
-    return;
-  }
+    sprite.lastSelectedId = selectedId;
+    sprite.lastCardColors = cardColors;
 
-  sprite.lastSelectedId = selectedId;
-  sprite.lastCardColors = cardColors;
+    // Ensure graphics exists before attempting to use it
+    if (!sprite.graphics || sprite.graphics.destroyed) {
+        sprite.graphics = new PIXI.Graphics();
+        if (sprite.container) {
+            sprite.container.addChildAt(sprite.graphics, 0);
+        }
+    } else {
+        sprite.graphics.clear();
+    }
 
-  // Ensure graphics exists before attempting to use it
-  if (!sprite.graphics || sprite.graphics.destroyed) {
-    sprite.graphics = new PIXI.Graphics();
-    if (sprite.container) {
-      sprite.container.addChildAt(sprite.graphics, 0);
+    const actualWidth = cardWidth - CARD_GAP;
+    const actualHeight = cardHeight - CARD_GAP;
+    const offsetX = CARD_GAP / 2;
+    const offsetY = CARD_GAP / 2;
+
+    const gradient = new PIXI.FillGradient(0, offsetY, 0, offsetY + actualHeight);
+    if (isSelected) {
+        gradient.addColorStop(0, colors.gradient);
+        gradient.addColorStop(1, colors.mid);
+    } else {
+        gradient.addColorStop(0, colors.mid);
+        gradient.addColorStop(1, colors.base);
     }
-  } else {
-    sprite.graphics.clear();
-  }
-
-  const actualWidth = cardWidth - CARD_GAP;
-  const actualHeight = cardHeight - CARD_GAP;
-  const offsetX = CARD_GAP / 2;
-  const offsetY = CARD_GAP / 2;
-
-  const gradient = new PIXI.FillGradient(0, offsetY, 0, offsetY + actualHeight);
-  if (isSelected) {
-    gradient.addColorStop(0, colors.gradient);
-    gradient.addColorStop(1, colors.mid);
-  } else {
-    gradient.addColorStop(0, colors.mid);
-    gradient.addColorStop(1, colors.base);
-  }
-
-  sprite.graphics.roundRect(offsetX, offsetY, actualWidth, actualHeight, CARD_RADIUS);
-  
-  // Ensure graphics is still valid before filling
-  if (sprite.graphics && !sprite.graphics.destroyed) {
-    sprite.graphics.fill(gradient);
-  }
-
-  if (isSelected) {
+
+    sprite.graphics.roundRect(offsetX, offsetY, actualWidth, actualHeight, CARD_RADIUS);
+
+    // Ensure graphics is still valid before filling
     if (sprite.graphics && !sprite.graphics.destroyed) {
-      sprite.graphics.stroke({ width: 2, color: colors.border });
+        sprite.graphics.fill(gradient);
     }
-  } else {
-    if (sprite.graphics && !sprite.graphics.destroyed) {
-      sprite.graphics.stroke({ width: 1, color: colors.border, alpha: 0.35 });
+
+    if (isSelected) {
+        if (sprite.graphics && !sprite.graphics.destroyed) {
+            sprite.graphics.stroke({ width: 2, color: colors.border });
+        }
+    } else {
+        if (sprite.graphics && !sprite.graphics.destroyed) {
+            sprite.graphics.stroke({ width: 1, color: colors.border, alpha: 0.35 });
+        }
     }
-  }
 }
diff --git a/Source/PivotViewer/for_updateCardTextColors/when_colors_change.ts b/Source/PivotViewer/for_updateCardTextColors/when_colors_change.ts
new file mode 100644
index 00000000..1a47b6c7
--- /dev/null
+++ b/Source/PivotViewer/for_updateCardTextColors/when_colors_change.ts
@@ -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 { expect } from 'chai';
+import { describe, it } from 'vitest';
+import type { CardColors, CardSprite } from '../components/pivot/constants';
+import { updateCardTextColors } from '../components/pivot/sprites';
+
+describe('when existing Pixi card colors change', () => {
+    it('should_refresh_title_label_and_value_fills', () => {
+        const text = (fill: string) => ({ style: { fill } });
+        // SAFETY: This focused fake implements exactly the text-style fields read by the helper.
+        const sprite = {
+            titleText: text('old-title'),
+            labelsText: text('old-label'),
+            valuesText: text('old-value'),
+        } as unknown as CardSprite;
+        const colors: CardColors = {
+            base: 0,
+            mid: 0,
+            gradient: 0,
+            border: 0,
+            text: '#112233',
+            textSecondary: '#445566',
+        };
+
+        updateCardTextColors(sprite, colors);
+
+        expect(sprite.titleText?.style.fill).to.equal('#112233');
+        expect(sprite.labelsText?.style.fill).to.equal('#445566');
+        expect(sprite.valuesText?.style.fill).to.equal('#112233');
+    });
+});
diff --git a/Source/README.md b/Source/README.md
index e01e0e3f..62f44ef6 100644
--- a/Source/README.md
+++ b/Source/README.md
@@ -28,12 +28,14 @@ import '@cratis/components/styles';
 import '@cratis/components/theme'; // optional baseline appearance
 ```
 
-A custom product design omits `theme` and defines the semantic `--cratis-*` variables itself.
+`tokens` supplies conservative light defaults. `styles` contains structural rules and internal utilities in low-priority Cratis cascade layers, with no Tailwind Preflight/reset or token duplication. `theme` adds automatic/explicit dark mode, forced colors, and themed subtrees.
+
+A custom product design omits `theme`, imports product CSS after `tokens` and `styles`, and maps its canonical values directly to `--cratis-*`.
 
 ## Provider
 
 ```tsx
-import { CratisComponentsProvider } from '@cratis/components';
+import { CratisComponentsProvider } from '@cratis/components/Common';
 
 export const App = () => (
     <CratisComponentsProvider value={{ locale: 'en-US' }} toaster>
@@ -143,9 +145,15 @@ Every meaningful component element carries a stable `data-cratis-part`. Componen
 ```css
 :root {
     --cratis-primary-color: var(--product-accent);
+    --cratis-action-background: var(--product-action);
+    --cratis-action-background-hover: var(--product-action-hover);
+    --cratis-action-background-active: var(--product-action-active);
+    --cratis-action-text: var(--product-on-action);
     --cratis-surface-card: var(--product-surface);
     --cratis-surface-overlay: var(--product-surface-raised);
     --cratis-surface-border: var(--product-border);
+    --cratis-control-background: var(--product-control);
+    --cratis-control-border: var(--product-control-border);
     --cratis-text-color: var(--product-text);
     --cratis-focus-ring: var(--product-focus-ring);
 }
@@ -181,6 +189,8 @@ Do not target React Aria classes or internal DOM structure.
 - `@cratis/components/Toolbar`
 - `@cratis/components/types`
 
+The root entry retains the existing namespace exports for source compatibility with established consumers. New code should import the narrow subpath it uses—especially `Common` for provider setup—so bundlers and readers do not traverse unrelated component families. Components 4 intentionally retains the existing namespace symbols; [#173](https://github.com/Cratis/Components/issues/173) tracks declaration-level TSDoc and API-reference coverage, not silent 4.x export removal.
+
 ## Components 3 migration
 
 Components 4 removes the mandatory PrimeReact 11 foundation. Follow the published [Components 3 to 4 migration guide](https://cratis.io/components/migration/) for dependency removal, provider changes, product token mapping, stable part names, DatePicker changes, table behavior, notifications, and direct Prime import replacements.
@@ -189,4 +199,4 @@ The old `@cratis/components/styled`, `styledMode`, `CratisPreset`, and `primeRea
 
 ## License
 
-Cratis Components is MIT licensed. Its default runtime dependencies use permissive open-source licenses, including Apache-2.0, MIT, and ISC. The bundled Patrick Hand font used by Canvas notes is distributed under the SIL Open Font License 1.1; its `PatrickHand-OFL.txt` notice is included in the package. Components 4 does not require PrimeUI licensing.
+Cratis Components is MIT licensed. Its default runtime dependencies use permissive open-source licenses, including Apache-2.0, MIT, and ISC. The package includes its `LICENSE`, an Allotment notice in `THIRD_PARTY_NOTICES.md`, and the Patrick Hand SIL Open Font License as `dist/esm/PatrickHand-OFL.txt`. Components 4 does not require PrimeUI licensing.
diff --git a/Source/SchemaEditor/NameCell.tsx b/Source/SchemaEditor/NameCell.tsx
index 6f2e836e..ae1de081 100644
--- a/Source/SchemaEditor/NameCell.tsx
+++ b/Source/SchemaEditor/NameCell.tsx
@@ -54,13 +54,13 @@ export const NameCell = ({
     }
 
     return (
-        <Tooltip content={validationError} position='top' className='w-full'>
+        <Tooltip content={validationError} position='top' className='cratis:w-full'>
             <input
                 value={rowData.name || ''}
                 onChange={(event) =>
                     onUpdate(rowData.name || '', 'name', event.target.value)
                 }
-                className='cratis-field-input w-full'
+                className='cratis-field-input cratis:w-full'
                 aria-invalid={Boolean(validationError) || undefined}
                 data-invalid={Boolean(validationError) || undefined}
             />
diff --git a/Source/SchemaEditor/SchemaEditor.tsx b/Source/SchemaEditor/SchemaEditor.tsx
index 6ad31b14..aa402b4a 100644
--- a/Source/SchemaEditor/SchemaEditor.tsx
+++ b/Source/SchemaEditor/SchemaEditor.tsx
@@ -434,7 +434,7 @@ export const SchemaEditor = ({
                 ? [
                       {
                           label: l.edit,
-                          icon: <faIcons.FaPencil className='mr-2' />,
+                          icon: <faIcons.FaPencil className='cratis:mr-2' />,
                           command: canEdit ? handleEdit : undefined,
                           className: !canEdit ? 'edit-disabled-with-reason' : undefined,
                           template:
@@ -470,7 +470,7 @@ export const SchemaEditor = ({
                           ? [
                                 {
                                     label: l.save,
-                                    icon: <faIcons.FaCheck className='mr-2' />,
+                                    icon: <faIcons.FaCheck className='cratis:mr-2' />,
                                     command: hasValidationErrors ? undefined : handleSave,
                                     disabled: hasValidationErrors,
                                 },
@@ -480,14 +480,14 @@ export const SchemaEditor = ({
                           ? [
                                 {
                                     label: l.cancel,
-                                    icon: <faIcons.FaXmark className='mr-2' />,
+                                    icon: <faIcons.FaXmark className='cratis:mr-2' />,
                                     command: handleCancel,
                                 },
                             ]
                           : []),
                       {
                           label: l.addProperty,
-                          icon: <faIcons.FaPlus className='mr-2' />,
+                          icon: <faIcons.FaPlus className='cratis:mr-2' />,
                           command: addProperty,
                       },
                   ]
@@ -517,13 +517,13 @@ export const SchemaEditor = ({
             className={className ? `schema-editor ${className}` : 'schema-editor'}
             style={{ display: 'flex', flexDirection: 'column', height: '100%' }}
         >
-            <div className='px-4 py-4'>
+            <div className='cratis:px-4 cratis:py-4'>
                 <div className='schema-editor-menubar'>
                     <ActionMenubar aria-label={l.actions} model={menuItems} />
                 </div>
             </div>
 
-            <div className='px-4 py-2 cratis-schema-editor-bottom-border'>
+            <div className='cratis:px-4 cratis:py-2 cratis-schema-editor-bottom-border'>
                 <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
                     <Tooltip content='Navigate back' position='top'>
                         <Button
@@ -544,7 +544,7 @@ export const SchemaEditor = ({
                     >
                         {breadcrumbItems.map((item, index) => (
                             <span key={index}>
-                                {index > 0 && <span className='mx-2'>&gt;</span>}
+                                {index > 0 && <span className='cratis:mx-2'>&gt;</span>}
                                 <button
                                     type='button'
                                     onClick={() => navigateToBreadcrumb(index)}
diff --git a/Source/SchemaEditor/TypeCell.tsx b/Source/SchemaEditor/TypeCell.tsx
index 2f2cca29..0dd573b7 100644
--- a/Source/SchemaEditor/TypeCell.tsx
+++ b/Source/SchemaEditor/TypeCell.tsx
@@ -111,7 +111,7 @@ export const TypeCell = ({
             const isNavigable = itemType === 'object';
             return (
                 <div
-                    className='flex items-center gap-2 w-full'
+                    className='cratis:flex cratis:items-center cratis:gap-2 cratis:w-full'
                     style={{ height: '100%' }}
                     title={
                         isNavigable ? 'Click to navigate to item definition' : undefined
@@ -136,7 +136,7 @@ export const TypeCell = ({
         } else if (rowData.type === 'object') {
             return (
                 <div
-                    className='flex items-center gap-2 w-full'
+                    className='cratis:flex cratis:items-center cratis:gap-2 cratis:w-full'
                     style={{ height: '100%' }}
                     title='Click to navigate to object properties'
                 >
@@ -157,14 +157,14 @@ export const TypeCell = ({
     }
 
     return (
-        <div className='flex items-center gap-2 w-full' style={{ minHeight: '2.5rem' }}>
+        <div className='cratis:flex cratis:items-center cratis:gap-2 cratis:w-full' style={{ minHeight: '2.5rem' }}>
             <Dropdown<string>
                 value={currentValue}
                 options={allTypeOptions}
                 optionLabel='label'
                 optionValue='value'
                 onChange={(e) => handleTypeChange(e.value, rowData.name || '')}
-                className='flex-1'
+                className='cratis:flex-1'
             />
             {rowData.type === 'array' && rowData.items && (
                 <>
@@ -185,7 +185,7 @@ export const TypeCell = ({
                         onChange={(e) =>
                             handleTypeChange(e.value, rowData.name || '', true)
                         }
-                        className='flex-1'
+                        className='cratis:flex-1'
                     />
                 </>
             )}
diff --git a/Source/THIRD_PARTY_NOTICES.md b/Source/THIRD_PARTY_NOTICES.md
new file mode 100644
index 00000000..9e98c259
--- /dev/null
+++ b/Source/THIRD_PARTY_NOTICES.md
@@ -0,0 +1,21 @@
+# Third-party notices
+
+`@cratis/components` includes or redistributes the following third-party assets in its published artifact.
+
+## Allotment structural stylesheet
+
+MIT License
+
+Copyright (c) 2021 - present John Walley  
+Copyright (c) 2021 - present Gobalsky Labs Ltd.  
+Copyright (c) 2015 - present Microsoft Corporation
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+## Patrick Hand font
+
+Canvas Note includes Patrick Hand under the SIL Open Font License 1.1. The complete notice is published as `dist/esm/PatrickHand-OFL.txt`.
diff --git a/Source/TimeMachine/TimeMachine.css b/Source/TimeMachine/TimeMachine.css
index 5086e421..a99db113 100644
--- a/Source/TimeMachine/TimeMachine.css
+++ b/Source/TimeMachine/TimeMachine.css
@@ -452,6 +452,10 @@
   justify-content: flex-end;
   gap: 10px;
   padding: 4px 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
   cursor: pointer;
   transform-origin: right center;
   transform: scale(var(--magnification, 1));
@@ -469,6 +473,12 @@
     background 0.15s ease;
 }
 
+.timeline-entry:focus-visible {
+  outline: none;
+  border-radius: var(--cratis-border-radius);
+  box-shadow: var(--cratis-focus-ring);
+}
+
 .timeline-entry.selected .timeline-tick {
   background: #6a9fff;
   box-shadow: 0 0 8px rgba(106, 159, 255, 0.6);
@@ -511,6 +521,16 @@
   text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .timeline-entry,
+  .timeline-tick,
+  .timeline-label,
+  .time-machine * {
+    transition: none !important;
+    animation: none !important;
+  }
+}
+
 /* Navigation Controls */
 .navigation-controls {
   position: absolute;
diff --git a/Source/TimeMachine/TimeMachine.tsx b/Source/TimeMachine/TimeMachine.tsx
index 384555c9..3355ef25 100644
--- a/Source/TimeMachine/TimeMachine.tsx
+++ b/Source/TimeMachine/TimeMachine.tsx
@@ -1,22 +1,22 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import React, { useState, useCallback, useRef, useEffect } from 'react';
+import type React from 'react';
+import { useState, useCallback, useRef, useEffect } from 'react';
 import type { Version } from './types';
 import { ReadModelView } from './ReadModelView';
 import { EventsView } from './EventsView';
 import { type TimeMachineLabels, defaultTimeMachineLabels } from './TimeMachineLabels';
 import { FaBoxArchive, FaList } from 'react-icons/fa6';
-
-export type { TimeMachineLabels } from './TimeMachineLabels';
-export { defaultTimeMachineLabels } from './TimeMachineLabels';
+import { useLocale } from 'react-aria-components/I18nProvider';
 
 enum ViewModes {
   ReadModel = 'ReadModel',
   Events = 'Events',
 }
 
-interface TimeMachineProps {
+/** Props for the localized, keyboard-accessible event/read-model timeline. */
+export interface TimeMachineProps {
   versions: Version[];
   currentVersionIndex?: number;
   onVersionChange?: (index: number) => void;
@@ -196,6 +196,8 @@ const Timeline: React.FC<TimelineProps> = ({
   onSelect,
   onHover,
 }) => {
+  const { locale } = useLocale();
+
   const getMagnification = (index: number, hoverIdx: number | null): number => {
     if (hoverIdx === null) return 1;
     const distance = Math.abs(index - hoverIdx);
@@ -208,7 +210,7 @@ const Timeline: React.FC<TimelineProps> = ({
   };
 
   const formatDate = (date: Date): string => {
-    return date.toLocaleDateString('en-US', {
+    return date.toLocaleDateString(locale, {
       month: 'short',
       day: 'numeric',
       year: 'numeric',
@@ -216,18 +218,14 @@ const Timeline: React.FC<TimelineProps> = ({
   };
 
   const formatTime = (date: Date): string => {
-    return date.toLocaleTimeString('en-US', {
+    return date.toLocaleTimeString(locale, {
       hour: 'numeric',
       minute: '2-digit',
-      hour12: true,
     });
   };
 
   return (
-    <div
-      className="timeline"
-      onMouseLeave={() => onHover(null)}
-    >
+    <div className="timeline">
       <div className="timeline-track">
         {versions.map((version, index) => {
           const magnification = getMagnification(index, hoveredIndex);
@@ -235,21 +233,27 @@ const Timeline: React.FC<TimelineProps> = ({
           const isHovered = index === hoveredIndex;
 
           return (
-            <div
+            <button
               key={version.id}
+              type='button'
               className={`timeline-entry ${isSelected ? 'selected' : ''} ${isHovered ? 'hovered' : ''}`}
               style={{
                 '--magnification': magnification,
               } as React.CSSProperties}
               onMouseEnter={() => onHover(index)}
+              onMouseLeave={() => onHover(null)}
+              onFocus={() => onHover(index)}
+              onBlur={() => onHover(null)}
               onClick={() => onSelect(index)}
+              aria-pressed={isSelected}
+              aria-label={`${formatDate(version.timestamp)} ${formatTime(version.timestamp)}`}
             >
               <div className="timeline-tick"></div>
               <div className="timeline-label">
                 <span className="timeline-date">{formatDate(version.timestamp)}</span>
                 <span className="timeline-time">{formatTime(version.timestamp)}</span>
               </div>
-            </div>
+            </button>
           );
         })}
       </div>
diff --git a/Source/TimeMachine/for_TimeMachine/when_rendering_the_timeline.tsx b/Source/TimeMachine/for_TimeMachine/when_rendering_the_timeline.tsx
new file mode 100644
index 00000000..7b2b5780
--- /dev/null
+++ b/Source/TimeMachine/for_TimeMachine/when_rendering_the_timeline.tsx
@@ -0,0 +1,38 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { renderToStaticMarkup } from 'react-dom/server';
+import { expect } from 'chai';
+import { describe, it } from 'vitest';
+import { CratisComponentsProvider } from '../../Common/CratisComponentsProvider';
+import { TimeMachine } from '../TimeMachine';
+
+const html = renderToStaticMarkup(
+    <CratisComponentsProvider value={{ locale: 'nb-NO' }}>
+        <TimeMachine
+            versions={[
+                {
+                    id: 'version-1',
+                    timestamp: new Date('2024-01-02T13:45:00Z'),
+                    label: 'Version 1',
+                    content: <div>State</div>,
+                    events: [],
+                },
+            ]}
+        />
+    </CratisComponentsProvider>,
+);
+
+describe('when rendering the TimeMachine timeline', () => {
+    it('should_render_versions_as_native_buttons', () => {
+        expect(html).to.match(/<button[^>]+class="timeline-entry selected[^>]*>/);
+    });
+
+    it('should_expose_the_selected_version_state', () => {
+        expect(html).to.contain('aria-pressed="true"');
+    });
+
+    it('should_format_the_timeline_with_the_provider_locale', () => {
+        expect(html).to.match(/aria-label="[^"]*(jan\.|januar)[^"]*"/i);
+    });
+});
diff --git a/Source/TimeMachine/index.ts b/Source/TimeMachine/index.ts
index 08cd1522..af57f68c 100644
--- a/Source/TimeMachine/index.ts
+++ b/Source/TimeMachine/index.ts
@@ -2,6 +2,7 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 export { TimeMachine } from './TimeMachine';
+export type { TimeMachineProps } from './TimeMachine';
 export { ReadModelView } from './ReadModelView';
 export { EventsView } from './EventsView';
 export { defaultTimeMachineLabels } from './TimeMachineLabels';
diff --git a/Source/Toolbar/Toolbar.css b/Source/Toolbar/Toolbar.css
index 4689d8fc..b1e07f2a 100644
--- a/Source/Toolbar/Toolbar.css
+++ b/Source/Toolbar/Toolbar.css
@@ -5,7 +5,7 @@
 .toolbar {
     background: var(--cratis-surface-card);
     border: 1px solid var(--cratis-surface-border);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    box-shadow: var(--cratis-shadow-overlay);
 }
 
 /* ── Toolbar button ──────────────────────────────────────────────────────── */
@@ -144,7 +144,7 @@
     padding: 0.5rem;
     background: var(--cratis-surface-card);
     border: 1px solid var(--cratis-surface-border);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    box-shadow: var(--cratis-shadow-overlay);
     border-radius: 1rem;
     white-space: nowrap;
     z-index: 10;
@@ -225,7 +225,7 @@
     padding: 0.5rem;
     background: var(--cratis-surface-card);
     border: 1px solid var(--cratis-surface-border);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    box-shadow: var(--cratis-shadow-overlay);
     border-radius: 1rem;
     z-index: 10;
     pointer-events: none;
@@ -297,7 +297,7 @@
 .toolbar-group {
     background: var(--cratis-surface-card);
     border: 1px solid var(--cratis-surface-border);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    box-shadow: var(--cratis-shadow-overlay);
 }
 
 
@@ -355,3 +355,18 @@
     animation: toolbar-slot-fade-out 0.2s ease forwards;
     pointer-events: none;
 }
+
+@media (prefers-reduced-motion: reduce) {
+    .toolbar,
+    .toolbar-button,
+    .toolbar-section,
+    .toolbar-context,
+    .toolbar-fanout-panel,
+    .toolbar-folder-panel,
+    .toolbar-slot-section,
+    .toolbar-slot-incoming,
+    .toolbar-slot-outgoing {
+        transition: none !important;
+        animation: none !important;
+    }
+}
diff --git a/Source/Toolbar/Toolbar.stories.tsx b/Source/Toolbar/Toolbar.stories.tsx
index f49b2a09..1dbe1c61 100644
--- a/Source/Toolbar/Toolbar.stories.tsx
+++ b/Source/Toolbar/Toolbar.stories.tsx
@@ -169,7 +169,7 @@ export const WithContexts: Story = {
             const [currentContext, setCurrentContext] = useState<string>('drawing');
 
             return (
-                <div className='flex flex-col items-center gap-6'>
+                <div className='cratis:flex cratis:flex-col cratis:items-center cratis:gap-6'>
                     <Toolbar>
                         <ToolbarButton icon={<ToolGlyph name='arrow-up-left' />} title='Select' />
                         <ToolbarSection activeContext={currentContext}>
@@ -187,13 +187,13 @@ export const WithContexts: Story = {
                         <ToolbarButton icon={<ToolGlyph name='undo' />} title='Undo' />
                     </Toolbar>
 
-                    <div className='flex gap-2'>
+                    <div className='cratis:flex cratis:gap-2'>
                         <button
                             type='button'
                             onClick={() => setCurrentContext('drawing')}
-                            className={`px-3 py-1 rounded text-sm transition-colors ${currentContext === 'drawing'
-                                ? 'bg-blue-600 text-white'
-                                : 'bg-gray-600 text-gray-200 hover:bg-gray-500'
+                            className={`cratis:px-3 cratis:py-1 cratis:rounded cratis:text-sm cratis:transition-colors ${currentContext === 'drawing'
+                                ? 'cratis:bg-blue-600 cratis:text-white'
+                                : 'cratis:bg-gray-600 cratis:text-gray-200 cratis:hover:bg-gray-500'
                                 }`}
                         >
                             Drawing tools
@@ -201,9 +201,9 @@ export const WithContexts: Story = {
                         <button
                             type='button'
                             onClick={() => setCurrentContext('text')}
-                            className={`px-3 py-1 rounded text-sm transition-colors ${currentContext === 'text'
-                                ? 'bg-blue-600 text-white'
-                                : 'bg-gray-600 text-gray-200 hover:bg-gray-500'
+                            className={`cratis:px-3 cratis:py-1 cratis:rounded cratis:text-sm cratis:transition-colors ${currentContext === 'text'
+                                ? 'cratis:bg-blue-600 cratis:text-white'
+                                : 'cratis:bg-gray-600 cratis:text-gray-200 cratis:hover:bg-gray-500'
                                 }`}
                         >
                             Text tools
@@ -279,7 +279,7 @@ export const WithFanOut: Story = {
             const [activeTool, setActiveTool] = useState<string>('select');
 
             return (
-                <div className='flex flex-col gap-2'>
+                <div className='cratis:flex cratis:flex-col cratis:gap-2'>
                     <Toolbar>
                         <ToolbarButton
                             icon={<ToolGlyph name='arrow-up-left' />}
@@ -401,7 +401,7 @@ export const DragAndDrop: Story = {
             const [isDragOver, setIsDragOver] = useState(false);
 
             return (
-                <div className='flex gap-6 items-start'>
+                <div className='cratis:flex cratis:gap-6 cratis:items-start'>
                     <Toolbar
                         draggable
                         onItemDragStart={(data) =>
@@ -424,7 +424,7 @@ export const DragAndDrop: Story = {
                             const data = JSON.parse(raw) as { tool: string } | null;
                             setDropped(data ? `Dropped: ${data.tool}` : 'Dropped: (no data)');
                         }}
-                        className='flex items-center justify-center rounded-xl border-2 border-dashed transition-colors'
+                        className='cratis:flex cratis:items-center cratis:justify-center cratis:rounded-xl cratis:border-2 cratis:border-dashed cratis:transition-colors'
                         style={{
                             width: 240,
                             height: 180,
@@ -503,8 +503,8 @@ export const WithFolderListMode: Story = {
  */
 export const FolderGridVsList: Story = {
     render: () => (
-        <div className='flex gap-8 items-start'>
-            <div className='flex flex-col items-center gap-2'>
+        <div className='cratis:flex cratis:gap-8 cratis:items-start'>
+            <div className='cratis:flex cratis:flex-col cratis:items-center cratis:gap-2'>
                 <span style={{ color: 'var(--cratis-text-color-secondary)', fontSize: '0.75rem' }}>Grid (default)</span>
                 <Toolbar>
                     <ToolbarFolder icon={<ToolGlyph name='th-large' />} title='Tools' mode='grid'>
@@ -517,7 +517,7 @@ export const FolderGridVsList: Story = {
                     </ToolbarFolder>
                 </Toolbar>
             </div>
-            <div className='flex flex-col items-center gap-2'>
+            <div className='cratis:flex cratis:flex-col cratis:items-center cratis:gap-2'>
                 <span style={{ color: 'var(--cratis-text-color-secondary)', fontSize: '0.75rem' }}>List</span>
                 <Toolbar>
                     <ToolbarFolder icon={<ToolGlyph name='list' />} title='Tools' mode='list'>
@@ -631,7 +631,7 @@ export const WithSlotInContext: Story = {
 
             return (
                 <ToolbarSlotProvider>
-                    <div className='flex flex-col items-center gap-6'>
+                    <div className='cratis:flex cratis:flex-col cratis:items-center cratis:gap-6'>
                         <Toolbar>
                             <ToolbarSection activeContext={currentContext}>
                                 <ToolbarContext name='drawing' slotName='drawing-extras'>
@@ -649,19 +649,19 @@ export const WithSlotInContext: Story = {
                         {slotContent === 'favorite' && <ToolbarSlot slotName='drawing-extras' order={5}>{favoriteBtn}</ToolbarSlot>}
                         {slotContent === 'bookmark' && <ToolbarSlot slotName='drawing-extras' order={5}>{bookmarkBtn}</ToolbarSlot>}
 
-                        <div className='flex flex-col gap-4 items-center'>
-                            <div className='flex flex-col gap-2 items-center'>
-                                <span className='text-xs' style={{ color: 'var(--cratis-text-color-secondary)' }}>Context</span>
-                                <div className='flex gap-2'>
+                        <div className='cratis:flex cratis:flex-col cratis:gap-4 cratis:items-center'>
+                            <div className='cratis:flex cratis:flex-col cratis:gap-2 cratis:items-center'>
+                                <span className='cratis:text-xs' style={{ color: 'var(--cratis-text-color-secondary)' }}>Context</span>
+                                <div className='cratis:flex cratis:gap-2'>
                                     {(['drawing', 'text'] as const).map(ctx => (
                                         <button
                                             key={ctx}
                                             type='button'
                                             onClick={() => setCurrentContext(ctx)}
-                                            className={`px-3 py-1 rounded text-sm transition-colors ${
+                                            className={`cratis:px-3 cratis:py-1 cratis:rounded cratis:text-sm cratis:transition-colors ${
                                                 currentContext === ctx
-                                                    ? 'bg-blue-600 text-white'
-                                                    : 'bg-gray-600 text-gray-200 hover:bg-gray-500'
+                                                    ? 'cratis:bg-blue-600 cratis:text-white'
+                                                    : 'cratis:bg-gray-600 cratis:text-gray-200 cratis:hover:bg-gray-500'
                                             }`}
                                         >
                                             {ctx}
@@ -670,18 +670,18 @@ export const WithSlotInContext: Story = {
                                 </div>
                             </div>
 
-                            <div className='flex flex-col gap-2 items-center'>
-                                <span className='text-xs' style={{ color: 'var(--cratis-text-color-secondary)' }}>Slot content (drawing-extras)</span>
-                                <div className='flex gap-2'>
+                            <div className='cratis:flex cratis:flex-col cratis:gap-2 cratis:items-center'>
+                                <span className='cratis:text-xs' style={{ color: 'var(--cratis-text-color-secondary)' }}>Slot content (drawing-extras)</span>
+                                <div className='cratis:flex cratis:gap-2'>
                                     {(['none', 'favorite', 'bookmark'] as const).map(s => (
                                         <button
                                             key={s}
                                             type='button'
                                             onClick={() => setSlotContent(s)}
-                                            className={`px-3 py-1 rounded text-sm transition-colors ${
+                                            className={`cratis:px-3 cratis:py-1 cratis:rounded cratis:text-sm cratis:transition-colors ${
                                                 slotContent === s
-                                                    ? 'bg-blue-600 text-white'
-                                                    : 'bg-gray-600 text-gray-200 hover:bg-gray-500'
+                                                    ? 'cratis:bg-blue-600 cratis:text-white'
+                                                    : 'cratis:bg-gray-600 cratis:text-gray-200 cratis:hover:bg-gray-500'
                                             }`}
                                         >
                                             {s === 'none' ? 'None' : s === 'favorite' ? 'Favorite ★' : 'Bookmark 🔖'}
@@ -720,7 +720,7 @@ export const WithMultipleSlotContributors: Story = {
 
         return (
             <ToolbarSlotProvider>
-                <div className='flex gap-6 items-start'>
+                <div className='cratis:flex cratis:gap-6 cratis:items-start'>
                     <Toolbar>
                         <ToolbarGroup slotName='shared'>
                             <ToolbarButton icon={<ToolGlyph name='pencil' />} title='Draw (always first)' />
@@ -728,7 +728,7 @@ export const WithMultipleSlotContributors: Story = {
                     </Toolbar>
 
                     <div
-                        className='flex flex-col gap-1 p-4 rounded-lg border text-sm'
+                        className='cratis:flex cratis:flex-col cratis:gap-1 cratis:p-4 cratis:rounded-lg cratis:border cratis:text-sm'
                         style={{ borderColor: 'var(--cratis-surface-border)', background: 'var(--cratis-surface-ground)', color: 'var(--cratis-text-color-secondary)' }}
                     >
                         <strong style={{ color: 'var(--cratis-text-color)' }}>Three independent contributors</strong>
@@ -781,7 +781,7 @@ export const LayoutForEditorModules: Story = {
 
             return (
                 <ToolbarSlotProvider>
-                    <div className='flex flex-col items-center gap-6'>
+                    <div className='cratis:flex cratis:flex-col cratis:items-center cratis:gap-6'>
                         <Toolbar orientation='horizontal'>
                             <ToolbarButton icon={<ToolGlyph name='file-edit' />} title='Open Editor' tooltipPosition='bottom' />
                             <ToolbarSeparator orientation='horizontal' />
@@ -807,18 +807,18 @@ export const LayoutForEditorModules: Story = {
                             </ToolbarSlot>
                         )}
 
-                        <div className='flex gap-6'>
+                        <div className='cratis:flex cratis:gap-6'>
                             {[
                                 { label: 'Asset tools', enabled: assetToolsEnabled, toggle: () => setAssetToolsEnabled(v => !v) },
                                 { label: 'Review tools', enabled: reviewToolsEnabled, toggle: () => setReviewToolsEnabled(v => !v) },
                             ].map(({ label, enabled, toggle }) => (
-                                <div key={label} className='flex flex-col items-center gap-2'>
-                                    <span className='text-xs' style={{ color: 'var(--cratis-text-color-secondary)' }}>{label}</span>
+                                <div key={label} className='cratis:flex cratis:flex-col cratis:items-center cratis:gap-2'>
+                                    <span className='cratis:text-xs' style={{ color: 'var(--cratis-text-color-secondary)' }}>{label}</span>
                                     <button
                                         type='button'
                                         onClick={toggle}
-                                        className={`px-3 py-1 rounded text-sm transition-colors ${
-                                            enabled ? 'bg-blue-600 text-white' : 'bg-gray-600 text-gray-200 hover:bg-gray-500'
+                                        className={`cratis:px-3 cratis:py-1 cratis:rounded cratis:text-sm cratis:transition-colors ${
+                                            enabled ? 'cratis:bg-blue-600 cratis:text-white' : 'cratis:bg-gray-600 cratis:text-gray-200 cratis:hover:bg-gray-500'
                                         }`}
                                     >
                                         {enabled ? 'Disable' : 'Enable'}
@@ -893,7 +893,7 @@ export const LayoutWithSmoothEditorTransitions: Story = {
 
             return (
                 <ToolbarSlotProvider>
-                    <div className='flex flex-col items-center gap-6'>
+                    <div className='cratis:flex cratis:flex-col cratis:items-center cratis:gap-6'>
                         <Toolbar orientation='horizontal'>
                             <ToolbarButton icon={<ToolGlyph name='home' />} title='Workspace Home' tooltipPosition='bottom' />
                             <ToolbarSeparator orientation='horizontal' />
@@ -910,18 +910,18 @@ export const LayoutWithSmoothEditorTransitions: Story = {
                             {editorTools[activeEditor]}
                         </ToolbarSlot>
 
-                        <div className='flex flex-col items-center gap-3'>
-                            <span className='text-xs' style={{ color: 'var(--cratis-text-color-secondary)' }}>Active editor</span>
-                            <div className='flex gap-2'>
+                        <div className='cratis:flex cratis:flex-col cratis:items-center cratis:gap-3'>
+                            <span className='cratis:text-xs' style={{ color: 'var(--cratis-text-color-secondary)' }}>Active editor</span>
+                            <div className='cratis:flex cratis:gap-2'>
                                 {(['canvas', 'text', 'schema'] as const).map(editor => (
                                     <button
                                         key={editor}
                                         type='button'
                                         onClick={() => setActiveEditor(editor)}
-                                        className={`px-3 py-1 rounded text-sm capitalize transition-colors ${
+                                        className={`cratis:px-3 cratis:py-1 cratis:rounded cratis:text-sm cratis:capitalize cratis:transition-colors ${
                                             activeEditor === editor
-                                                ? 'bg-blue-600 text-white'
-                                                : 'bg-gray-600 text-gray-200 hover:bg-gray-500'
+                                                ? 'cratis:bg-blue-600 cratis:text-white'
+                                                : 'cratis:bg-gray-600 cratis:text-gray-200 cratis:hover:bg-gray-500'
                                         }`}
                                     >
                                         {editor}
@@ -985,7 +985,7 @@ export const LayoutWithGlobalAndEditorRegions: Story = {
 
             return (
                 <ToolbarSlotProvider>
-                    <div className='flex flex-col items-center gap-6'>
+                    <div className='cratis:flex cratis:flex-col cratis:items-center cratis:gap-6'>
                         <Toolbar orientation='horizontal'>
                             <ToolbarLayout name='global-region' orientation='horizontal' />
                             <ToolbarSeparator orientation='horizontal' />
@@ -1000,16 +1000,16 @@ export const LayoutWithGlobalAndEditorRegions: Story = {
                             {editorRegionTools[activeEditor]}
                         </ToolbarSlot>
 
-                        <div className='flex gap-2'>
+                        <div className='cratis:flex cratis:gap-2'>
                             {(['page', 'workflow'] as const).map(editor => (
                                 <button
                                     key={editor}
                                     type='button'
                                     onClick={() => setActiveEditor(editor)}
-                                    className={`px-3 py-1 rounded text-sm capitalize transition-colors ${
+                                    className={`cratis:px-3 cratis:py-1 cratis:rounded cratis:text-sm cratis:capitalize cratis:transition-colors ${
                                         activeEditor === editor
-                                            ? 'bg-blue-600 text-white'
-                                            : 'bg-gray-600 text-gray-200 hover:bg-gray-500'
+                                            ? 'cratis:bg-blue-600 cratis:text-white'
+                                            : 'cratis:bg-gray-600 cratis:text-gray-200 cratis:hover:bg-gray-500'
                                     }`}
                                 >
                                     {editor} editor
diff --git a/Source/Toolbar/Toolbar.tsx b/Source/Toolbar/Toolbar.tsx
index c7a55d2a..f93b9eb6 100644
--- a/Source/Toolbar/Toolbar.tsx
+++ b/Source/Toolbar/Toolbar.tsx
@@ -18,6 +18,10 @@ export interface ToolbarProps {
     orientation?: 'vertical' | 'horizontal';
     /** Extra class name for the toolbar root. */
     className?: string;
+    /** Accessible toolbar name. Defaults to `'Tools'`; localize for the product. */
+    'aria-label'?: string;
+    /** Identifies an external element that names the toolbar. Takes precedence over `aria-label`. */
+    'aria-labelledby'?: string;
     /** Stable toolbar part attributes. */
     pt?: ToolbarParts;
     /**
@@ -44,15 +48,21 @@ export const Toolbar = ({
     draggable = false,
     onItemDragStart,
     className,
+    'aria-label': ariaLabel = 'Tools',
+    'aria-labelledby': ariaLabelledBy,
     pt,
 }: ToolbarProps) => (
     <ToolbarDragContext.Provider value={{ draggable, onItemDragStart }}>
         <div
             {...pt?.root}
+            role='toolbar'
+            aria-orientation={orientation}
+            aria-label={ariaLabelledBy ? undefined : ariaLabel}
+            aria-labelledby={ariaLabelledBy}
             className={[
-                'toolbar inline-flex',
-                orientation === 'horizontal' ? 'flex-row' : 'flex-col',
-                'items-center gap-1 p-2 rounded-2xl',
+                'toolbar cratis:inline-flex',
+                orientation === 'horizontal' ? 'cratis:flex-row' : 'cratis:flex-col',
+                'cratis:items-center cratis:gap-1 cratis:p-2 cratis:rounded-2xl',
                 pt?.root?.className,
                 className,
             ]
diff --git a/Source/Toolbar/ToolbarButton.tsx b/Source/Toolbar/ToolbarButton.tsx
index 25adfdcf..c5005eca 100644
--- a/Source/Toolbar/ToolbarButton.tsx
+++ b/Source/Toolbar/ToolbarButton.tsx
@@ -112,7 +112,7 @@ export const ToolbarButton = ({
                 onClick={onClick}
                 draggable={isDraggable}
                 onDragStart={isDraggable ? handleDragStart : undefined}
-                className={`toolbar-button toolbar-button--list h-10 px-3 w-full flex items-center justify-start gap-2 rounded-lg cursor-pointer ${activeClass} ${draggableClass} ${pt?.root?.className ?? ''} ${className ?? ''}`}
+                className={`toolbar-button toolbar-button--list cratis:h-10 cratis:px-3 cratis:w-full cratis:flex cratis:items-center cratis:justify-start cratis:gap-2 cratis:rounded-lg cratis:cursor-pointer ${activeClass} ${draggableClass} ${pt?.root?.className ?? ''} ${className ?? ''}`}
                 data-cratis-part='button'
                 data-active={active || undefined}
             >
@@ -124,7 +124,7 @@ export const ToolbarButton = ({
                     >
                         <IconDisplay
                             icon={resolvedIcon}
-                            className='text-lg flex-shrink-0'
+                            className='cratis:text-lg cratis:flex-shrink-0'
                         />
                     </span>
                 )}
@@ -139,7 +139,7 @@ export const ToolbarButton = ({
         );
     }
 
-    const buttonSizeClass = hasText ? 'h-10 px-3 min-w-[4rem]' : 'w-10 h-10';
+    const buttonSizeClass = hasText ? 'cratis:h-10 cratis:px-3 cratis:min-w-[4rem]' : 'cratis:w-10 cratis:h-10';
     const buttonContent = hasText ? (
         <span
             {...pt?.label}
@@ -154,7 +154,7 @@ export const ToolbarButton = ({
             className={pt?.icon?.className}
             data-cratis-part='icon'
         >
-            <IconDisplay icon={resolvedIcon} className='text-lg' />
+            <IconDisplay icon={resolvedIcon} className='cratis:text-lg' />
         </span>
     );
 
@@ -167,7 +167,7 @@ export const ToolbarButton = ({
                 onClick={onClick}
                 draggable={isDraggable}
                 onDragStart={isDraggable ? handleDragStart : undefined}
-                className={`toolbar-button ${buttonSizeClass} flex items-center justify-center rounded-lg cursor-pointer ${activeClass} ${draggableClass} ${pt?.root?.className ?? ''} ${className ?? ''}`}
+                className={`toolbar-button ${buttonSizeClass} cratis:flex cratis:items-center cratis:justify-center cratis:rounded-lg cratis:cursor-pointer ${activeClass} ${draggableClass} ${pt?.root?.className ?? ''} ${className ?? ''}`}
                 data-cratis-part='button'
                 data-active={active || undefined}
             >
diff --git a/Source/Toolbar/ToolbarFanOutItem.tsx b/Source/Toolbar/ToolbarFanOutItem.tsx
index 16a66422..8332c89a 100644
--- a/Source/Toolbar/ToolbarFanOutItem.tsx
+++ b/Source/Toolbar/ToolbarFanOutItem.tsx
@@ -7,6 +7,7 @@ import React, {
     type ReactNode,
     useCallback,
     useEffect,
+    useId,
     useRef,
     useState,
 } from 'react';
@@ -71,7 +72,10 @@ export const ToolbarFanOutItem = ({
     const [isExpanded, setIsExpanded] = useState(false);
     const [isSettled, setIsSettled] = useState(false);
     const containerRef = useRef<HTMLDivElement>(null);
+    const triggerRef = useRef<HTMLButtonElement>(null);
     const panelRef = useRef<HTMLDivElement>(null);
+    const generatedPanelId = useId();
+    const panelId = pt?.panel?.id ?? generatedPanelId;
 
     // A settled panel has `clip-path: none`, which cannot interpolate — closing
     // straight from it would snap the panel shut instead of wiping it closed.
@@ -100,7 +104,11 @@ export const ToolbarFanOutItem = ({
     };
 
     const handleTransitionEnd = (event: React.TransitionEvent<HTMLDivElement>) => {
-        if (event.target === panelRef.current && event.propertyName === 'clip-path' && isExpanded) {
+        if (
+            event.target === panelRef.current &&
+            event.propertyName === 'clip-path' &&
+            isExpanded
+        ) {
             setIsSettled(true);
         }
     };
@@ -110,20 +118,33 @@ export const ToolbarFanOutItem = ({
         if (!isExpanded) return;
 
         const handleClickOutside = (event: MouseEvent) => {
-            if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+            if (
+                containerRef.current &&
+                !containerRef.current.contains(event.target as Node)
+            ) {
                 collapse();
             }
         };
 
+        const handleEscape = (event: KeyboardEvent) => {
+            if (event.key !== 'Escape') return;
+            event.preventDefault();
+            collapse();
+            triggerRef.current?.focus();
+        };
+
         document.addEventListener('mousedown', handleClickOutside);
+        document.addEventListener('keydown', handleEscape);
         return () => {
             document.removeEventListener('mousedown', handleClickOutside);
+            document.removeEventListener('keydown', handleEscape);
         };
     }, [isExpanded, collapse]);
 
     const activeClass = isExpanded ? 'toolbar-button--active' : '';
     const panelVisibleClass = isExpanded ? 'toolbar-fanout-panel--visible' : '';
-    const panelSettledClass = isExpanded && isSettled ? 'toolbar-fanout-panel--settled' : '';
+    const panelSettledClass =
+        isExpanded && isSettled ? 'toolbar-fanout-panel--settled' : '';
     const directionClass = `toolbar-fanout-panel--${fanOutDirection}`;
 
     return (
@@ -136,22 +157,29 @@ export const ToolbarFanOutItem = ({
             <Tooltip content={tooltip} position={tooltipPosition} disabled={isExpanded}>
                 <button
                     {...pt?.trigger}
+                    ref={triggerRef}
                     type='button'
                     aria-label={tooltip}
                     aria-expanded={isExpanded}
+                    aria-controls={panelId}
                     onClick={handleToggle}
-                    className={`toolbar-button w-10 h-10 flex items-center justify-center rounded-lg cursor-pointer ${activeClass} ${pt?.trigger?.className ?? ''}`}
+                    className={`toolbar-button cratis:w-10 cratis:h-10 cratis:flex cratis:items-center cratis:justify-center cratis:rounded-lg cratis:cursor-pointer ${activeClass} ${pt?.trigger?.className ?? ''}`}
                     data-cratis-part='fanout-trigger'
                 >
-                    <IconDisplay icon={icon} className='text-lg' />
+                    <IconDisplay icon={icon} className='cratis:text-lg' />
                 </button>
             </Tooltip>
             <div
                 {...pt?.panel}
+                id={panelId}
+                role='group'
+                aria-label={tooltip}
                 ref={panelRef}
                 className={`toolbar-fanout-panel ${directionClass} ${panelVisibleClass} ${panelSettledClass} ${pt?.panel?.className ?? ''}`}
                 data-cratis-part='fanout-panel'
                 data-expanded={isExpanded || undefined}
+                data-direction={fanOutDirection}
+                data-settled={isSettled || undefined}
                 aria-hidden={!isExpanded}
                 inert={!isExpanded}
                 onTransitionEnd={handleTransitionEnd}
diff --git a/Source/Toolbar/ToolbarFolder.tsx b/Source/Toolbar/ToolbarFolder.tsx
index 0646e985..d6fcec9f 100644
--- a/Source/Toolbar/ToolbarFolder.tsx
+++ b/Source/Toolbar/ToolbarFolder.tsx
@@ -7,6 +7,7 @@ import {
     type HTMLAttributes,
     type ReactNode,
     useEffect,
+    useId,
     useMemo,
     useRef,
     useState,
@@ -85,8 +86,17 @@ export const ToolbarFolder = ({
 }: ToolbarFolderProps) => {
     const [isExpanded, setIsExpanded] = useState(false);
     const containerRef = useRef<HTMLDivElement>(null);
-
-    const items = useMemo(() => Children.toArray(children).filter(child => child !== null && child !== undefined), [children]);
+    const triggerRef = useRef<HTMLButtonElement>(null);
+    const generatedPanelId = useId();
+    const panelId = pt?.panel?.id ?? generatedPanelId;
+
+    const items = useMemo(
+        () =>
+            Children.toArray(children).filter(
+                (child) => child !== null && child !== undefined,
+            ),
+        [children],
+    );
     const itemCount = Math.max(1, items.length);
 
     const columns = useMemo(() => {
@@ -96,7 +106,7 @@ export const ToolbarFolder = ({
     }, [itemCount, maxColumns]);
 
     const toggleExpanded = () => {
-        setIsExpanded(current => !current);
+        setIsExpanded((current) => !current);
     };
 
     useEffect(() => {
@@ -105,14 +115,26 @@ export const ToolbarFolder = ({
         }
 
         const handleClickOutside = (event: MouseEvent) => {
-            if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+            if (
+                containerRef.current &&
+                !containerRef.current.contains(event.target as Node)
+            ) {
                 setIsExpanded(false);
             }
         };
 
+        const handleEscape = (event: KeyboardEvent) => {
+            if (event.key !== 'Escape') return;
+            event.preventDefault();
+            setIsExpanded(false);
+            triggerRef.current?.focus();
+        };
+
         document.addEventListener('mousedown', handleClickOutside);
+        document.addEventListener('keydown', handleEscape);
         return () => {
             document.removeEventListener('mousedown', handleClickOutside);
+            document.removeEventListener('keydown', handleEscape);
         };
     }, [isExpanded]);
 
@@ -132,27 +154,35 @@ export const ToolbarFolder = ({
                 <Tooltip content={title} position={tooltipPosition} disabled={isExpanded}>
                     <button
                         {...pt?.trigger}
+                        ref={triggerRef}
                         type='button'
                         aria-label={title}
                         aria-expanded={isExpanded}
+                        aria-controls={panelId}
                         onClick={toggleExpanded}
-                        className={`toolbar-button w-10 h-10 flex items-center justify-center rounded-lg cursor-pointer ${activeClass} ${pt?.trigger?.className ?? ''}`}
+                        className={`toolbar-button cratis:w-10 cratis:h-10 cratis:flex cratis:items-center cratis:justify-center cratis:rounded-lg cratis:cursor-pointer ${activeClass} ${pt?.trigger?.className ?? ''}`}
                         data-cratis-part='toolbar-folder-trigger'
                     >
-                        <IconDisplay icon={icon} className='text-lg' />
+                        <IconDisplay icon={icon} className='cratis:text-lg' />
                     </button>
                 </Tooltip>
                 <div
                     {...pt?.panel}
+                    id={panelId}
+                    role='group'
+                    aria-label={title}
                     className={`toolbar-folder-panel ${directionClass} ${panelVisibleClass} ${modeClass} ${pt?.panel?.className ?? ''}`}
                     style={{
                         ...pt?.panel?.style,
-                        ...(mode === 'grid' ? {
-                            gridTemplateColumns: `repeat(${columns}, minmax(2.5rem, 2.5rem))`,
-                        } : {}),
+                        ...(mode === 'grid'
+                            ? {
+                                  gridTemplateColumns: `repeat(${columns}, minmax(2.5rem, 2.5rem))`,
+                              }
+                            : {}),
                     }}
                     data-cratis-part='toolbar-folder-panel'
                     data-expanded={isExpanded || undefined}
+                    data-direction={folderDirection}
                     data-mode={mode}
                     aria-hidden={!isExpanded}
                     inert={!isExpanded}
@@ -162,4 +192,4 @@ export const ToolbarFolder = ({
             </div>
         </ToolbarFolderContext.Provider>
     );
-};
\ No newline at end of file
+};
diff --git a/Source/Toolbar/ToolbarGroup.tsx b/Source/Toolbar/ToolbarGroup.tsx
index e66aee94..15764819 100644
--- a/Source/Toolbar/ToolbarGroup.tsx
+++ b/Source/Toolbar/ToolbarGroup.tsx
@@ -117,7 +117,7 @@ const SlotTransition = ({
             <div
                 {...pt?.incoming}
                 ref={incomingRef}
-                className={`toolbar-slot-incoming inline-flex ${flexClass} items-center gap-1 ${pt?.incoming?.className ?? ''}`}
+                className={`toolbar-slot-incoming cratis:inline-flex ${flexClass} cratis:items-center cratis:gap-1 ${pt?.incoming?.className ?? ''}`}
                 data-cratis-part='toolbar-slot-incoming'
             >
                 {current}
@@ -127,7 +127,7 @@ const SlotTransition = ({
                 <div
                     {...pt?.outgoing}
                     key={exitRevision}
-                    className={`toolbar-slot-outgoing inline-flex ${flexClass} items-center gap-1 ${pt?.outgoing?.className ?? ''}`}
+                    className={`toolbar-slot-outgoing cratis:inline-flex ${flexClass} cratis:items-center cratis:gap-1 ${pt?.outgoing?.className ?? ''}`}
                     data-cratis-part='toolbar-slot-outgoing'
                     aria-hidden='true'
                     inert
@@ -194,12 +194,12 @@ export const ToolbarGroup = ({
     orientation = 'vertical',
     pt,
 }: ToolbarGroupProps) => {
-    const flexClass = orientation === 'horizontal' ? 'flex-row' : 'flex-col';
+    const flexClass = orientation === 'horizontal' ? 'cratis:flex-row' : 'cratis:flex-col';
 
     return (
         <div
             {...pt?.root}
-            className={`toolbar-group inline-flex ${flexClass} items-center gap-1 p-2 rounded-2xl ${pt?.root?.className ?? ''}`}
+            className={`toolbar-group cratis:inline-flex ${flexClass} cratis:items-center cratis:gap-1 cratis:p-2 cratis:rounded-2xl ${pt?.root?.className ?? ''}`}
             data-cratis-part='toolbar-group'
             data-orientation={orientation}
         >
diff --git a/Source/Toolbar/ToolbarLayout.tsx b/Source/Toolbar/ToolbarLayout.tsx
index 526bad2f..6794d7a0 100644
--- a/Source/Toolbar/ToolbarLayout.tsx
+++ b/Source/Toolbar/ToolbarLayout.tsx
@@ -94,7 +94,7 @@ const LayoutTransition = ({
             <div
                 {...pt?.incoming}
                 ref={incomingRef}
-                className={`toolbar-slot-incoming inline-flex ${flexClass} items-center gap-1 ${pt?.incoming?.className ?? ''}`}
+                className={`toolbar-slot-incoming cratis:inline-flex ${flexClass} cratis:items-center cratis:gap-1 ${pt?.incoming?.className ?? ''}`}
                 data-cratis-part='toolbar-slot-incoming'
             >
                 {current}
@@ -103,7 +103,7 @@ const LayoutTransition = ({
                 <div
                     {...pt?.outgoing}
                     key={exitRevision}
-                    className={`toolbar-slot-outgoing inline-flex ${flexClass} items-center gap-1 ${pt?.outgoing?.className ?? ''}`}
+                    className={`toolbar-slot-outgoing cratis:inline-flex ${flexClass} cratis:items-center cratis:gap-1 ${pt?.outgoing?.className ?? ''}`}
                     data-cratis-part='toolbar-slot-outgoing'
                     aria-hidden='true'
                     inert
@@ -201,7 +201,7 @@ export const ToolbarLayout = ({
     pt,
 }: ToolbarLayoutProps) => {
     const slotItems = useToolbarSlot(name);
-    const flexClass = orientation === 'horizontal' ? 'flex-row' : 'flex-col';
+    const flexClass = orientation === 'horizontal' ? 'cratis:flex-row' : 'cratis:flex-col';
     const fallbackItems = useMemo(() => Children.toArray(children), [children]);
     const items = slotItems.length > 0 ? slotItems : fallbackItems;
 
@@ -210,7 +210,7 @@ export const ToolbarLayout = ({
     return (
         <div
             {...pt?.root}
-            className={`toolbar-layout inline-flex ${flexClass} items-center gap-1 ${pt?.root?.className ?? ''}`}
+            className={`toolbar-layout cratis:inline-flex ${flexClass} cratis:items-center cratis:gap-1 ${pt?.root?.className ?? ''}`}
             data-cratis-part='toolbar-layout'
             data-layout-name={name}
             data-orientation={orientation}
diff --git a/Source/Toolbar/ToolbarSection.tsx b/Source/Toolbar/ToolbarSection.tsx
index f7f86756..7954938d 100644
--- a/Source/Toolbar/ToolbarSection.tsx
+++ b/Source/Toolbar/ToolbarSection.tsx
@@ -97,7 +97,7 @@ export const ToolbarSection = ({
     // Default to the first context if activeContext is not provided
     const effectiveContext = activeContext ?? (contexts[0]?.props as ToolbarContextProps)?.name ?? '';
 
-    const flexClass = orientation === 'horizontal' ? 'flex-row' : 'flex-col';
+    const flexClass = orientation === 'horizontal' ? 'cratis:flex-row' : 'cratis:flex-col';
 
     /** Measure the given context's natural dimensions and update the section size. */
     const measureAndSetSize = useCallback((contextName: string) => {
@@ -205,7 +205,7 @@ export const ToolbarSection = ({
                         {...pt?.context}
                         key={name}
                         ref={(element) => { contextRefs.current[name] = element; }}
-                        className={`toolbar-context inline-flex ${flexClass} items-center gap-1 ${
+                        className={`toolbar-context cratis:inline-flex ${flexClass} cratis:items-center cratis:gap-1 ${
                             isActive ? 'toolbar-context--active' : 'toolbar-context--inactive'
                         } ${pt?.context?.className ?? ''}`}
                         data-cratis-part='toolbar-context'
diff --git a/Source/Toolbar/for_ToolbarButton/when_tooltip_is_enabled.tsx b/Source/Toolbar/for_ToolbarButton/when_tooltip_is_enabled.tsx
new file mode 100644
index 00000000..b2207457
--- /dev/null
+++ b/Source/Toolbar/for_ToolbarButton/when_tooltip_is_enabled.tsx
@@ -0,0 +1,34 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { expect } from 'chai';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, it } from 'vitest';
+import { ToolbarButton } from '../ToolbarButton';
+import { ToolbarFanOutItem } from '../ToolbarFanOutItem';
+import { ToolbarFolder } from '../ToolbarFolder';
+
+describe('when a ToolbarButton tooltip is enabled', () => {
+    const icon = <span aria-hidden='true'>D</span>;
+    const html = renderToStaticMarkup(
+        <>
+            <ToolbarButton icon={icon} title='Draw' />
+            <ToolbarFolder icon={icon} title='More tools'>
+                <ToolbarButton icon={icon} title='Nested tool' />
+            </ToolbarFolder>
+            <ToolbarFanOutItem icon={icon} tooltip='Shapes'>
+                <ToolbarButton icon={icon} title='Shape' />
+            </ToolbarFanOutItem>
+        </>,
+    );
+
+    it('should_preserve_component_specific_parts', () => {
+        expect(html).to.contain('data-cratis-part="button"');
+        expect(html).to.contain('data-cratis-part="toolbar-folder-trigger"');
+        expect(html).to.contain('data-cratis-part="fanout-trigger"');
+    });
+
+    it('should_mark_the_same_element_as_the_tooltip_trigger', () => {
+        expect(html).to.contain('data-cratis-tooltip-trigger=""');
+    });
+});
diff --git a/Source/Toolbar/for_ToolbarComposition/when_rendering_stable_parts.tsx b/Source/Toolbar/for_ToolbarComposition/when_rendering_stable_parts.tsx
index 9ad443b0..c0fac897 100644
--- a/Source/Toolbar/for_ToolbarComposition/when_rendering_stable_parts.tsx
+++ b/Source/Toolbar/for_ToolbarComposition/when_rendering_stable_parts.tsx
@@ -5,6 +5,7 @@ import type React from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { expect } from 'chai';
 import { describe, it, vi } from 'vitest';
+import { Toolbar } from '../Toolbar';
 import { ToolbarContext } from '../ToolbarContext';
 import { ToolbarFolder } from '../ToolbarFolder';
 import { ToolbarGroup } from '../ToolbarGroup';
@@ -18,7 +19,7 @@ vi.mock('../../Common/Tooltip', () => ({
 
 describe('when rendering Toolbar composition parts', () => {
     const html = renderToStaticMarkup(
-        <>
+        <Toolbar aria-label='Canvas tools'>
             <ToolbarGroup pt={{ root: { id: 'group' } }}>
                 Group
             </ToolbarGroup>
@@ -54,9 +55,14 @@ describe('when rendering Toolbar composition parts', () => {
             >
                 <button type='button'>Nested action</button>
             </ToolbarFolder>
-        </>,
+        </Toolbar>,
     );
 
+    it('should_render_an_accessibly_named_toolbar', () => {
+        expect(html).to.contain('role="toolbar"');
+        expect(html).to.contain('aria-label="Canvas tools"');
+    });
+
     it('should_expose_each_composition_boundary', () => {
         for (const part of [
             'toolbar-group',
diff --git a/Source/Toolbar/for_ToolbarPanels/when_escape_is_pressed.tsx b/Source/Toolbar/for_ToolbarPanels/when_escape_is_pressed.tsx
new file mode 100644
index 00000000..0f49d288
--- /dev/null
+++ b/Source/Toolbar/for_ToolbarPanels/when_escape_is_pressed.tsx
@@ -0,0 +1,82 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import type React from 'react';
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { expect } from 'chai';
+import { afterEach, beforeEach, describe, it, vi } from 'vitest';
+import { ToolbarButton } from '../ToolbarButton';
+import { ToolbarFanOutItem } from '../ToolbarFanOutItem';
+import { ToolbarFolder } from '../ToolbarFolder';
+
+vi.mock('../../Common/Tooltip', () => ({
+    Tooltip: ({ children }: { children?: React.ReactNode }) => <>{children}</>,
+}));
+
+const icon = <span aria-hidden='true'>T</span>;
+
+describe('when Escape is pressed in an expanded Toolbar panel', () => {
+    let container: HTMLDivElement;
+    let root: Root;
+
+    beforeEach(() => {
+        (
+            globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
+        ).IS_REACT_ACT_ENVIRONMENT = true;
+        container = document.createElement('div');
+        document.body.append(container);
+        root = createRoot(container);
+    });
+
+    afterEach(async () => {
+        await act(async () => root.unmount());
+        container.remove();
+    });
+
+    const verifyEscape = async (
+        element: React.ReactNode,
+        triggerPart: string,
+        panelPart: string,
+    ) => {
+        await act(async () => root.render(element));
+        const trigger = container.querySelector<HTMLButtonElement>(
+            `[data-cratis-part="${triggerPart}"]`,
+        )!;
+        await act(async () => trigger.click());
+        const panel = container.querySelector<HTMLElement>(
+            `[data-cratis-part="${panelPart}"]`,
+        )!;
+        const nested = panel.querySelector<HTMLButtonElement>('button')!;
+        nested.focus();
+
+        await act(async () => {
+            document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+        });
+
+        expect(panel.hasAttribute('inert')).to.equal(true);
+        expect(document.activeElement).to.equal(trigger);
+    };
+
+    it('should_close_a_folder_and_restore_trigger_focus', async () => {
+        await verifyEscape(
+            <ToolbarFolder icon={icon} title='Tools'>
+                <ToolbarButton icon={icon} title='Nested tool' />
+            </ToolbarFolder>,
+            'toolbar-folder-trigger',
+            'toolbar-folder-panel',
+        );
+    });
+
+    it('should_close_a_fanout_and_restore_trigger_focus', async () => {
+        await verifyEscape(
+            <ToolbarFanOutItem icon={icon} tooltip='Shapes'>
+                <ToolbarButton icon={icon} title='Nested shape' />
+            </ToolbarFanOutItem>,
+            'fanout-trigger',
+            'fanout-panel',
+        );
+    });
+});
diff --git a/Source/for_accessibility/when_scanning_foundation_surfaces.tsx b/Source/for_accessibility/when_scanning_foundation_surfaces.tsx
new file mode 100644
index 00000000..a711fb74
--- /dev/null
+++ b/Source/for_accessibility/when_scanning_foundation_surfaces.tsx
@@ -0,0 +1,86 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import axe from 'axe-core';
+import { expect } from 'chai';
+import { afterEach, beforeEach, describe, it } from 'vitest';
+import { Button } from '../Common/Button';
+import { CratisComponentsProvider } from '../Common/CratisComponentsProvider';
+import { DatePickerInput } from '../Common/DatePickerInput';
+import { Column } from '../DataTables/Column';
+import { DataTableCore } from '../DataTables/DataTableCore';
+import { Dropdown } from '../Dropdown/Dropdown';
+import { Toolbar } from '../Toolbar/Toolbar';
+import { ToolbarButton } from '../Toolbar/ToolbarButton';
+
+describe('when scanning representative foundation surfaces', () => {
+    let container: HTMLDivElement;
+    let root: Root;
+
+    beforeEach(async () => {
+        (
+            globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
+        ).IS_REACT_ACT_ENVIRONMENT = true;
+        container = document.createElement('div');
+        document.body.append(container);
+        root = createRoot(container);
+        await act(async () => {
+            root.render(
+                <CratisComponentsProvider value={{ locale: 'en-US' }}>
+                    <main>
+                        <Button label='Save' />
+                        <Dropdown
+                            aria-label='Role'
+                            options={[
+                                { label: 'Administrator', value: 'admin' },
+                                { label: 'Developer', value: 'developer' },
+                            ]}
+                            value='developer'
+                        />
+                        <DatePickerInput
+                            aria-label='Delivery date'
+                            value={new Date(2024, 5, 15)}
+                            onChange={() => undefined}
+                        />
+                        <DataTableCore
+                            data={[{ id: 1, name: 'Ada' }]}
+                            dataKey='id'
+                            emptyMessage='No people'
+                        >
+                            <Column field='name' header='Name' />
+                        </DataTableCore>
+                        <Toolbar aria-label='Drawing tools'>
+                            <ToolbarButton
+                                icon={<span aria-hidden='true'>D</span>}
+                                title='Draw'
+                            />
+                        </Toolbar>
+                    </main>
+                </CratisComponentsProvider>,
+            );
+        });
+    });
+
+    afterEach(async () => {
+        await act(async () => root.unmount());
+        container.remove();
+    });
+
+    it('should_have_no_automated_wcag_a_or_aa_violations', async () => {
+        const result = await axe.run(container, {
+            runOnly: { type: 'tag', values: ['wcag2a', 'wcag2aa'] },
+            rules: { 'color-contrast': { enabled: false } },
+        });
+
+        expect(
+            result.violations.map((violation) => ({
+                id: violation.id,
+                nodes: violation.nodes.map((node) => node.target),
+            })),
+        ).to.deep.equal([]);
+    });
+});
diff --git a/Source/package.json b/Source/package.json
index ccd160b9..802a2c08 100644
--- a/Source/package.json
+++ b/Source/package.json
@@ -14,6 +14,8 @@
     "type": "module",
     "files": [
         "dist",
+        "LICENSE",
+        "THIRD_PARTY_NOTICES.md",
         "!dist/**/*.stories.*",
         "!dist/**/given.*",
         "!dist/**/storybook-static/**",
@@ -125,6 +127,7 @@
         "compile": "tsc -p tsconfig.json -noEmit && yarn g:lint",
         "copy-css": "./scripts/copy-css.sh",
         "verify-exports": "node ./scripts/verify-exports.mjs",
+        "verify-package-archive": "node ./scripts/verify-package-archive.mjs",
         "lint": "yarn g:lint",
         "lint:ci": "yarn g:lint:ci",
         "test": "yarn g:test",
diff --git a/Source/scripts/verify-exports.mjs b/Source/scripts/verify-exports.mjs
index 13800046..94c5a9bb 100644
--- a/Source/scripts/verify-exports.mjs
+++ b/Source/scripts/verify-exports.mjs
@@ -29,7 +29,7 @@
  */
 
 import { spawnSync } from 'node:child_process';
-import { existsSync } from 'node:fs';
+import { existsSync, readdirSync, readFileSync } from 'node:fs';
 import { readFile } from 'node:fs/promises';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
@@ -45,7 +45,8 @@ const checkCjs = !args.has('--esm-only');
  *  These are legitimate bundler-only entries, so they are existence-checked instead. */
 const ASSET_EXTENSIONS = ['.css', '.json'];
 
-const isAsset = (target) => typeof target === 'string' && ASSET_EXTENSIONS.some((ext) => target.endsWith(ext));
+const isAsset = (target) =>
+    typeof target === 'string' && ASSET_EXTENSIONS.some((ext) => target.endsWith(ext));
 
 /** Picks the file a given condition resolves to, mirroring Node's condition ordering. */
 function targetFor(value, condition) {
@@ -73,7 +74,7 @@ function loadInChildProcess(specifier, mode) {
     const result = spawnSync(
         process.execPath,
         ['--input-type', mode === 'import' ? 'module' : 'commonjs', '--eval', script],
-        { cwd: packageDir, encoding: 'utf8', timeout: 120_000 }
+        { cwd: packageDir, encoding: 'utf8', timeout: 120_000 },
     );
 
     const stdout = result.stdout ?? '';
@@ -86,11 +87,13 @@ function loadInChildProcess(specifier, mode) {
 
     // Prefer Node's own error code and its message line ("Error [ERR_X]: ...").
     const code = (stderr.match(/\b(ERR_[A-Z0-9_]+)\b/) ?? [])[1];
-    const message = (stderr.match(/^\s*[A-Za-z]*Error(?: \[ERR_[A-Z0-9_]+\])?: .*$/m) ?? [])[0]?.trim();
+    const message = (stderr.match(/^\s*[A-Za-z]*Error(?: \[ERR_[A-Z0-9_]+\])?: .*$/m) ??
+        [])[0]?.trim();
 
     // CommonJS parse failures name the offending file on the very first stderr line
     // (e.g. `.../Filter/FilterPanel.css:9`) but omit it from the message - keep it.
-    const offending = (stderr.match(/^(\/.+?\.(?:c|m)?[jt]sx?|\/.+?\.css):\d+$/m) ?? [])[1];
+    const offending = (stderr.match(/^(\/.+?\.(?:c|m)?[jt]sx?|\/.+?\.css):\d+$/m) ??
+        [])[1];
 
     const parts = [message ?? 'unknown failure'];
     if (offending && !parts[0].includes(offending)) parts.push(`in ${offending}`);
@@ -127,11 +130,102 @@ if (subpaths.length === 0) {
 const esmRoot = path.join(packageDir, path.dirname(pkg.module ?? 'dist/esm/index.js'));
 if (!existsSync(esmRoot)) {
     console.error(`Built output not found at ${esmRoot}.`);
-    console.error('Run the publish build first: `yarn workspace @cratis/components run prepare`.');
+    console.error(
+        'Run the publish build first: `yarn workspace @cratis/components run prepare`.',
+    );
     process.exit(1);
 }
 
-const requiredPackageAssets = ['PatrickHand-OFL.txt'];
+const emittedFiles = (directory, found = []) => {
+    for (const entry of readdirSync(directory, { withFileTypes: true })) {
+        const file = path.join(directory, entry.name);
+        if (entry.isDirectory()) emittedFiles(file, found);
+        else found.push(file);
+    }
+    return found;
+};
+
+const mapProblems = [];
+const outputFiles = emittedFiles(esmRoot);
+for (const file of outputFiles.filter(
+    (candidate) => candidate.endsWith('.js') || candidate.endsWith('.d.ts'),
+)) {
+    const source = readFileSync(file, 'utf8');
+    const reference = source.match(/\/\/# sourceMappingURL=([^\r\n]+)/u)?.[1];
+    if (!reference) continue;
+    const mapFile = path.resolve(path.dirname(file), reference);
+    if (!existsSync(mapFile)) {
+        mapProblems.push(`${file} references missing ${mapFile}`);
+        continue;
+    }
+    try {
+        const sourceMap = JSON.parse(readFileSync(mapFile, 'utf8'));
+        if (sourceMap.version !== 3 || typeof sourceMap.mappings !== 'string') {
+            mapProblems.push(`${mapFile} is not a version 3 source map`);
+        }
+    } catch (error) {
+        const detail = error instanceof Error ? error.message : String(error);
+        mapProblems.push(`${mapFile} is invalid JSON: ${detail}`);
+    }
+}
+for (const mapFile of outputFiles.filter((candidate) => candidate.endsWith('.map'))) {
+    const generatedFile = mapFile.slice(0, -'.map'.length);
+    if (!existsSync(generatedFile)) {
+        mapProblems.push(`${mapFile} has no generated source file`);
+        continue;
+    }
+    if (!readFileSync(generatedFile, 'utf8').includes(path.basename(mapFile))) {
+        mapProblems.push(`${mapFile} is orphaned from ${generatedFile}`);
+    }
+}
+if (mapProblems.length > 0) {
+    console.error(
+        `Published source-map verification failed:\n- ${mapProblems.join('\n- ')}`,
+    );
+    process.exit(1);
+}
+console.log('Published source-map references are valid.');
+
+const publishedStyles = readFileSync(path.join(esmRoot, 'styles.css'), 'utf8');
+const requiredStyleLayers = ['cratis-components', 'cratis-utilities'];
+for (const layer of requiredStyleLayers) {
+    if (!publishedStyles.includes(layer)) {
+        console.error(`Published styles are missing the '${layer}' cascade layer.`);
+        process.exit(1);
+    }
+}
+if (
+    /::file-selector-button[^{}]*\{[^{}]*box-sizing:\s*border-box/u.test(publishedStyles)
+) {
+    console.error(
+        'Published styles unexpectedly contain Tailwind Preflight/base resets.',
+    );
+    process.exit(1);
+}
+if (/--cratis-surface-ground\s*:/u.test(publishedStyles)) {
+    console.error(
+        'Published styles unexpectedly duplicate the standalone token defaults.',
+    );
+    process.exit(1);
+}
+if (!publishedStyles.includes('.cratis\\:flex')) {
+    console.error('Published styles are missing prefixed internal utility output.');
+    process.exit(1);
+}
+if (/\n\s*\.(?:flex|grid|container|hidden|absolute|relative)\s*\{/u.test(publishedStyles)) {
+    console.error('Published styles leak an unprefixed internal utility selector.');
+    process.exit(1);
+}
+console.log(
+    'Published styles contain prefixed, isolated Cratis layers without Preflight or token duplication.',
+);
+
+const requiredPackageAssets = [
+    'PatrickHand-OFL.txt',
+    'PatrickHand-latin.woff2',
+    'PatrickHand-latin-ext.woff2',
+    'PatrickHand-vietnamese.woff2',
+];
 for (const asset of requiredPackageAssets) {
     const assetPath = path.join(esmRoot, asset);
     if (!existsSync(assetPath)) {
@@ -145,7 +239,8 @@ const rows = [];
 let failures = 0;
 
 for (const subpath of subpaths) {
-    const specifier = subpath === '.' ? pkg.name : `${pkg.name}/${subpath.replace(/^\.\//, '')}`;
+    const specifier =
+        subpath === '.' ? pkg.name : `${pkg.name}/${subpath.replace(/^\.\//, '')}`;
     const value = exportsMap[subpath];
 
     if (isAsset(targetFor(value, 'import'))) {
@@ -159,7 +254,8 @@ for (const subpath of subpaths) {
             const present = existsSync(abs);
             if (!present) failures++;
             results[mode] = present ? 'ASSET OK' : 'MISSING';
-            if (!present) results[`${mode}Detail`] = `no file at ${path.relative(packageDir, abs)}`;
+            if (!present)
+                results[`${mode}Detail`] = `no file at ${path.relative(packageDir, abs)}`;
         }
         rows.push({ subpath, kind: 'asset', ...results });
         continue;
@@ -191,10 +287,14 @@ console.log(`\nVerifying published exports of ${pkg.name}@${pkg.version}`);
 console.log(`Package root: ${packageDir}`);
 console.log(`Built ESM:    ${path.relative(packageDir, esmRoot)}\n`);
 
-console.log(`${pad('SUBPATH', subpathWidth)}  ${modes.map((mode) => pad(mode.toUpperCase(), 8)).join('  ')}`);
+console.log(
+    `${pad('SUBPATH', subpathWidth)}  ${modes.map((mode) => pad(mode.toUpperCase(), 8)).join('  ')}`,
+);
 console.log('-'.repeat(subpathWidth + modes.length * 10));
 for (const row of rows) {
-    console.log(`${pad(row.subpath, subpathWidth)}  ${modes.map((mode) => pad(row[mode] ?? '-', 8)).join('  ')}`);
+    console.log(
+        `${pad(row.subpath, subpathWidth)}  ${modes.map((mode) => pad(row[mode] ?? '-', 8)).join('  ')}`,
+    );
 }
 
 const detailed = rows.filter((row) => modes.some((mode) => row[`${mode}Detail`]));
@@ -204,7 +304,8 @@ if (detailed.length > 0) {
         for (const mode of modes) {
             if (!row[`${mode}Detail`]) continue;
             console.log(`  ${row.subpath}  [${mode}]`);
-            if (row[`${mode}Resolved`]) console.log(`    resolved: ${row[`${mode}Resolved`]}`);
+            if (row[`${mode}Resolved`])
+                console.log(`    resolved: ${row[`${mode}Resolved`]}`);
             console.log(`    ${row[`${mode}Detail`]}\n`);
         }
     }
diff --git a/Source/scripts/verify-package-archive.mjs b/Source/scripts/verify-package-archive.mjs
new file mode 100644
index 00000000..e25556fb
--- /dev/null
+++ b/Source/scripts/verify-package-archive.mjs
@@ -0,0 +1,65 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { spawnSync } from 'node:child_process';
+import path from 'node:path';
+
+const archive = process.argv[2];
+if (!archive) {
+    console.error('Usage: node scripts/verify-package-archive.mjs <package.tgz>');
+    process.exit(1);
+}
+
+const runTar = (...args) => {
+    const result = spawnSync('tar', args, { encoding: 'utf8' });
+    if (result.status !== 0) {
+        console.error(result.stderr || `tar ${args.join(' ')} failed`);
+        process.exit(1);
+    }
+    return result.stdout;
+};
+
+const normalizedArchive = path.resolve(archive);
+const entries = new Set(
+    runTar('-tzf', normalizedArchive).split(/\r?\n/u).filter(Boolean),
+);
+const requiredEntries = [
+    'package/LICENSE',
+    'package/README.md',
+    'package/THIRD_PARTY_NOTICES.md',
+    'package/dist/esm/PatrickHand-OFL.txt',
+    'package/dist/esm/PatrickHand-latin.woff2',
+    'package/dist/esm/PatrickHand-latin-ext.woff2',
+    'package/dist/esm/PatrickHand-vietnamese.woff2',
+];
+const missing = requiredEntries.filter((entry) => !entries.has(entry));
+if (missing.length > 0) {
+    console.error(
+        `Package archive is missing required notices/assets:\n- ${missing.join('\n- ')}`,
+    );
+    process.exit(1);
+}
+
+const license = runTar('-xOzf', normalizedArchive, 'package/LICENSE');
+if (!license.includes('MIT License') || !license.includes('Copyright (c) 2025 Cratis')) {
+    console.error('Package LICENSE does not contain the expected Cratis MIT notice.');
+    process.exit(1);
+}
+
+const notices = runTar('-xOzf', normalizedArchive, 'package/THIRD_PARTY_NOTICES.md');
+for (const expected of [
+    'Allotment structural stylesheet',
+    'John Walley',
+    'Gobalsky Labs Ltd.',
+    'Microsoft Corporation',
+    'Patrick Hand font',
+]) {
+    if (!notices.includes(expected)) {
+        console.error(`THIRD_PARTY_NOTICES.md is missing '${expected}'.`);
+        process.exit(1);
+    }
+}
+
+console.log(
+    `Package archive notices and bundled assets are complete: ${normalizedArchive}`,
+);
diff --git a/Source/tailwind.css b/Source/tailwind.css
index ae4d9966..793acf5a 100644
--- a/Source/tailwind.css
+++ b/Source/tailwind.css
@@ -2,15 +2,13 @@
 /* Licensed under the MIT license. See LICENSE file in the project root for full license information. */
 
 /*
- * Tailwind utility classes + Cratis CSS variable tokens compiled at build time.
- * This stylesheet is generated during the package build and contains only the
- * utility classes that are actually used across all components, plus the
- * --cratis-* token layer that every internal component depends on for theming.
+ * Build-only Tailwind input for Components' internal utility classes.
  *
- * It intentionally excludes preflight/base resets — those are the consumer app's responsibility.
- *
- * Usage in your app:
- *   import '@cratis/components/styles';
+ * Only Tailwind's theme data and generated utilities are included. Preflight/base resets are
+ * deliberately omitted so @cratis/components/styles never resets consumer markup. Both layers
+ * use Cratis-specific names and component CSS is wrapped separately by rollup.config.mjs.
+ * Product unlayered CSS therefore wins without specificity tricks.
  */
-@import "tailwindcss";
-@import "./tokens.css";
+@layer cratis-theme, cratis-components, cratis-utilities;
+@import 'tailwindcss/theme.css' layer(cratis-theme) prefix(cratis);
+@import 'tailwindcss/utilities.css' layer(cratis-utilities) prefix(cratis);
diff --git a/Source/theme.css b/Source/theme.css
index acabbdc8..4f8989ec 100644
--- a/Source/theme.css
+++ b/Source/theme.css
@@ -1,89 +1,145 @@
 /* Copyright (c) Cratis. All rights reserved. */
 /* Licensed under the MIT license. See LICENSE file in the project root for full license information. */
 
-/* Optional Cratis baseline values. Component structure lives in styles.css. */
+/*
+ * Optional baseline scheme behavior. Light root defaults live in tokens.css so a custom product can
+ * import tokens + structure and override the seam directly. This file adds document/subtree color,
+ * scoped light defaults, automatic/explicit dark values, and forced-colors values.
+ */
 :root,
 .cratis-theme {
     color: var(--cratis-text-color);
     background-color: var(--cratis-surface-ground);
+}
 
+/* A themed subtree needs its own light defaults because tokens.css is rooted at :root. */
+.cratis-theme {
     --cratis-primary-color: #3b82f6;
     --cratis-primary-color-text: #ffffff;
     --cratis-primary-300: #93c5fd;
     --cratis-primary-400: #60a5fa;
     --cratis-primary-500: #3b82f6;
     --cratis-primary-600: #2563eb;
+    --cratis-action-background: #2563eb;
+    --cratis-action-background-hover: #1d4ed8;
+    --cratis-action-background-active: #1e40af;
+    --cratis-action-text: #ffffff;
     --cratis-green-500: #16a34a;
     --cratis-orange-500: #d97706;
     --cratis-red-500: #dc2626;
-
+    --cratis-info-background: #0369a1;
+    --cratis-info-text: #ffffff;
+    --cratis-success-background: #15803d;
+    --cratis-success-text: #ffffff;
+    --cratis-warning-background: #c2410c;
+    --cratis-warning-text: #ffffff;
+    --cratis-danger-background: #b91c1c;
+    --cratis-danger-text: #ffffff;
     --cratis-surface-0: #ffffff;
-    --cratis-surface-100: #f1f5f9;
-    --cratis-surface-ground: #f8fafc;
-    --cratis-surface-section: #f8fafc;
+    --cratis-surface-100: #f3f4f6;
+    --cratis-surface-ground: #f9fafb;
+    --cratis-surface-section: #ffffff;
     --cratis-surface-card: #ffffff;
     --cratis-surface-overlay: #ffffff;
-    --cratis-surface-hover: #f1f5f9;
-    --cratis-surface-border: #e2e8f0;
-
-    --cratis-text-color: #1e293b;
-    --cratis-text-color-secondary: #475569;
-    --cratis-highlight-bg: #dbeafe;
-    --cratis-highlight-text-color: #1e40af;
-    --cratis-maskbg: rgba(15, 23, 42, 0.45);
+    --cratis-surface-hover: #f6f9fc;
+    --cratis-surface-border: #dfe7ef;
+    --cratis-control-background: #ffffff;
+    --cratis-control-border: #8492a6;
+    --cratis-text-color: #4b5563;
+    --cratis-text-color-secondary: #6b7280;
+    --cratis-highlight-bg: #eff6ff;
+    --cratis-highlight-text-color: #1d4ed8;
+    --cratis-maskbg: rgb(0 0 0 / 40%);
     --cratis-border-radius: 6px;
-    --cratis-focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.35);
-
-    --color-text: var(--cratis-text-color);
-    --color-text-secondary: var(--cratis-text-color-secondary);
-    --color-text-muted: var(--cratis-text-color-secondary);
-    --color-border: var(--cratis-surface-border);
-    --color-background-secondary: var(--cratis-surface-section);
-    --color-background-tertiary: var(--cratis-surface-100);
-    --color-error: #b91c1c;
-    --color-error-bg: #fef2f2;
-    --color-success: #15803d;
-    --color-warning: #b45309;
-    --radius-sm: 4px;
-    --radius-md: 6px;
-    --radius-lg: 10px;
-    --space-xs: 0.25rem;
-    --space-sm: 0.5rem;
-    --space-md: 1rem;
-    --space-lg: 1.5rem;
-    --space-xl: 2rem;
-    --space-2xl: 3rem;
-    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    --cratis-control-height: 2.75rem;
+    --cratis-control-height-small: 2.25rem;
+    --cratis-control-height-large: 3.25rem;
+    --cratis-disabled-opacity: 0.55;
+    --cratis-focus-ring: 0 0 0 3px #2563eb;
+    --cratis-shadow-subtle: 0 1px 2px rgb(0 0 0 / 5%);
+    --cratis-shadow-overlay: 0 2px 12px rgb(0 0 0 / 10%);
+    --cratis-shadow-dialog: 0 1rem 3rem rgb(0 0 0 / 22%);
+    --cratis-shadow-toast: 0 2px 12px rgb(0 0 0 / 10%);
 }
 
 :root.cratis-dark,
 .cratis-dark .cratis-theme,
 .cratis-theme.cratis-dark {
+    color-scheme: dark;
     --cratis-primary-color: #60a5fa;
-    --cratis-primary-color-text: #0f172a;
-    --cratis-surface-0: #1e293b;
-    --cratis-surface-100: #334155;
-    --cratis-surface-ground: #020617;
-    --cratis-surface-section: #0f172a;
-    --cratis-surface-card: #1e293b;
-    --cratis-surface-overlay: #1e293b;
-    --cratis-surface-hover: #334155;
-    --cratis-surface-border: #475569;
-    --cratis-text-color: #f8fafc;
-    --cratis-text-color-secondary: #cbd5e1;
-    --cratis-highlight-bg: #1e3a8a;
-    --cratis-highlight-text-color: #ffffff;
-    --cratis-maskbg: rgba(0, 0, 0, 0.65);
-    --color-error: #f87171;
-    --color-error-bg: #450a0a;
-    --color-success: #4ade80;
-    --color-warning: #fbbf24;
+    --cratis-primary-color-text: #030712;
+    --cratis-action-background: #60a5fa;
+    --cratis-action-background-hover: #93c5fd;
+    --cratis-action-background-active: #bfdbfe;
+    --cratis-action-text: #030712;
+    --cratis-info-background: #38bdf8;
+    --cratis-info-text: #082f49;
+    --cratis-success-background: #4ade80;
+    --cratis-success-text: #052e16;
+    --cratis-warning-background: #fb923c;
+    --cratis-warning-text: #431407;
+    --cratis-danger-background: #f87171;
+    --cratis-danger-text: #450a0a;
+    --cratis-surface-0: #111827;
+    --cratis-surface-100: #374151;
+    --cratis-surface-ground: #111827;
+    --cratis-surface-section: #1f2937;
+    --cratis-surface-card: #1f2937;
+    --cratis-surface-overlay: #1f2937;
+    --cratis-surface-hover: rgb(255 255 255 / 3%);
+    --cratis-surface-border: rgb(255 255 255 / 10%);
+    --cratis-control-background: #111827;
+    --cratis-control-border: #64748b;
+    --cratis-text-color: rgb(255 255 255 / 87%);
+    --cratis-text-color-secondary: rgb(255 255 255 / 60%);
+    --cratis-highlight-bg: rgb(96 165 250 / 16%);
+    --cratis-highlight-text-color: rgb(255 255 255 / 87%);
+    --cratis-maskbg: rgb(0 0 0 / 40%);
+    --cratis-focus-ring: 0 0 0 3px #93c5fd;
+    --cratis-shadow-subtle: none;
+    --cratis-shadow-overlay: 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px rgb(0 0 0 / 14%), 0 1px 10px rgb(0 0 0 / 12%);
+    --cratis-shadow-dialog: 0 11px 15px -7px rgb(0 0 0 / 20%), 0 24px 38px 3px rgb(0 0 0 / 14%), 0 9px 46px 8px rgb(0 0 0 / 12%);
+    --cratis-shadow-toast: none;
 }
 
 @media (prefers-color-scheme: dark) {
     :root:not(.cratis-light),
     .cratis-theme:not(.cratis-light) {
         color-scheme: dark;
+        --cratis-primary-color: #60a5fa;
+        --cratis-primary-color-text: #030712;
+        --cratis-action-background: #60a5fa;
+        --cratis-action-background-hover: #93c5fd;
+        --cratis-action-background-active: #bfdbfe;
+        --cratis-action-text: #030712;
+        --cratis-info-background: #38bdf8;
+        --cratis-info-text: #082f49;
+        --cratis-success-background: #4ade80;
+        --cratis-success-text: #052e16;
+        --cratis-warning-background: #fb923c;
+        --cratis-warning-text: #431407;
+        --cratis-danger-background: #f87171;
+        --cratis-danger-text: #450a0a;
+        --cratis-surface-0: #111827;
+        --cratis-surface-100: #374151;
+        --cratis-surface-ground: #111827;
+        --cratis-surface-section: #1f2937;
+        --cratis-surface-card: #1f2937;
+        --cratis-surface-overlay: #1f2937;
+        --cratis-surface-hover: rgb(255 255 255 / 3%);
+        --cratis-surface-border: rgb(255 255 255 / 10%);
+        --cratis-control-background: #111827;
+        --cratis-control-border: #64748b;
+        --cratis-text-color: rgb(255 255 255 / 87%);
+        --cratis-text-color-secondary: rgb(255 255 255 / 60%);
+        --cratis-highlight-bg: rgb(96 165 250 / 16%);
+        --cratis-highlight-text-color: rgb(255 255 255 / 87%);
+        --cratis-maskbg: rgb(0 0 0 / 40%);
+        --cratis-focus-ring: 0 0 0 3px #93c5fd;
+        --cratis-shadow-subtle: none;
+        --cratis-shadow-overlay: 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px rgb(0 0 0 / 14%), 0 1px 10px rgb(0 0 0 / 12%);
+        --cratis-shadow-dialog: 0 11px 15px -7px rgb(0 0 0 / 20%), 0 24px 38px 3px rgb(0 0 0 / 14%), 0 9px 46px 8px rgb(0 0 0 / 12%);
+        --cratis-shadow-toast: none;
     }
 }
 
@@ -92,9 +148,13 @@
     .cratis-theme {
         --cratis-primary-color: Highlight;
         --cratis-primary-color-text: HighlightText;
+        --cratis-action-background: Highlight;
+        --cratis-action-text: HighlightText;
         --cratis-surface-card: Canvas;
         --cratis-surface-overlay: Canvas;
         --cratis-surface-border: CanvasText;
+        --cratis-control-background: Canvas;
+        --cratis-control-border: CanvasText;
         --cratis-text-color: CanvasText;
         --cratis-text-color-secondary: CanvasText;
         --cratis-focus-ring: 0 0 0 2px Highlight;
diff --git a/Source/tokens.css b/Source/tokens.css
index 6c383fd1..6a831253 100644
--- a/Source/tokens.css
+++ b/Source/tokens.css
@@ -3,21 +3,23 @@
 
 /*
  * Stable semantic seam between Components structure and product design systems.
- * The optional theme.css supplies concrete values; products may define these
- * variables directly or map them onto an existing token family.
+ * Conservative light defaults keep an unthemed surface usable. Products may override
+ * these variables directly; optional theme.css adds dark, forced-color, and subtree behavior.
  */
 :root {
     --cratis-surface-0: #ffffff;
-    --cratis-surface-100: #f1f5f9;
-    --cratis-surface-ground: #f8fafc;
-    --cratis-surface-section: #f8fafc;
+    --cratis-surface-100: #f3f4f6;
+    --cratis-surface-ground: #f9fafb;
+    --cratis-surface-section: #ffffff;
     --cratis-surface-card: #ffffff;
     --cratis-surface-overlay: #ffffff;
-    --cratis-surface-hover: #f1f5f9;
-    --cratis-surface-border: #e2e8f0;
+    --cratis-surface-hover: #f6f9fc;
+    --cratis-surface-border: #dfe7ef;
+    --cratis-control-background: #ffffff;
+    --cratis-control-border: #8492a6;
 
-    --cratis-text-color: #1e293b;
-    --cratis-text-color-secondary: #475569;
+    --cratis-text-color: #4b5563;
+    --cratis-text-color-secondary: #6b7280;
 
     --cratis-primary-color: #3b82f6;
     --cratis-primary-color-text: #ffffff;
@@ -25,15 +27,41 @@
     --cratis-primary-400: #60a5fa;
     --cratis-primary-500: #3b82f6;
     --cratis-primary-600: #2563eb;
+    --cratis-action-background: #2563eb;
+    --cratis-action-background-hover: #1d4ed8;
+    --cratis-action-background-active: #1e40af;
+    --cratis-action-text: #ffffff;
 
-    --cratis-highlight-bg: #dbeafe;
-    --cratis-highlight-text-color: #1e40af;
+    --cratis-highlight-bg: #eff6ff;
+    --cratis-highlight-text-color: #1d4ed8;
 
     --cratis-green-500: #16a34a;
     --cratis-orange-500: #d97706;
     --cratis-red-500: #dc2626;
+    --cratis-info-background: #0369a1;
+    --cratis-info-text: #ffffff;
+    --cratis-success-background: #15803d;
+    --cratis-success-text: #ffffff;
+    --cratis-warning-background: #c2410c;
+    --cratis-warning-text: #ffffff;
+    --cratis-danger-background: #b91c1c;
+    --cratis-danger-text: #ffffff;
 
     --cratis-border-radius: 6px;
-    --cratis-focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.35);
-    --cratis-maskbg: rgba(15, 23, 42, 0.45);
+    --cratis-control-height: 2.75rem;
+    --cratis-control-height-small: 2.25rem;
+    --cratis-control-height-large: 3.25rem;
+    --cratis-disabled-opacity: 0.55;
+    --cratis-focus-ring: 0 0 0 3px #2563eb;
+    --cratis-maskbg: rgb(0 0 0 / 40%);
+    --cratis-shadow-subtle: 0 1px 2px rgb(0 0 0 / 5%);
+    --cratis-shadow-overlay: 0 2px 12px rgb(0 0 0 / 10%);
+    --cratis-shadow-dialog: 0 1rem 3rem rgb(0 0 0 / 22%);
+    --cratis-shadow-toast: 0 2px 12px rgb(0 0 0 / 10%);
+
+    --cratis-z-index-dialog: 1100;
+    --cratis-z-index-overlay: 1200;
+    --cratis-z-index-filter: 1250;
+    --cratis-z-index-tooltip: 1300;
+    --cratis-z-index-toast: 1400;
 }
diff --git a/package.json b/package.json
index 31d8fcd1..a4555383 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
         "@eslint/js": "^10.0.1",
         "@rollup/plugin-node-resolve": "^16.0.3",
         "@rollup/plugin-typescript": "^12.3.0",
+        "@storybook/addon-a11y": "^10.5.10",
         "@storybook/react": "^10.5.10",
         "@storybook/react-vite": "^10.5.10",
         "@tailwindcss/postcss": "^4.3.3",
@@ -53,6 +54,7 @@
         "@vitejs/plugin-react": "^6.1.0",
         "@vitest/coverage-v8": "^4.1.11",
         "autoprefixer": "^10.5.4",
+        "axe-core": "^4.13.0",
         "chai": "^6.2.2",
         "chai-as-promised": "^8.0.2",
         "edit-json-file": "^1.8.1",
diff --git a/rollup.config.mjs b/rollup.config.mjs
index 6b7987e9..f6aee275 100644
--- a/rollup.config.mjs
+++ b/rollup.config.mjs
@@ -4,7 +4,14 @@
 import typescript from '@rollup/plugin-typescript';
 import { nodeResolve } from '@rollup/plugin-node-resolve';
 import peerDepsExternal from 'rollup-plugin-peer-deps-external';
-import { existsSync, readdirSync, readFileSync, writeFileSync, mkdirSync } from 'fs';
+import {
+    existsSync,
+    mkdirSync,
+    readFileSync,
+    readdirSync,
+    unlinkSync,
+    writeFileSync,
+} from 'fs';
 import { dirname, join, relative, resolve } from 'path';
 import { createRequire } from 'module';
 import ts from 'typescript';
@@ -53,7 +60,7 @@ function findComponentStylesheets(sourceDir, directory = sourceDir, found = [])
  *
  * @returns The concatenated CSS, and the set of relative specifiers that were inlined.
  */
-function inlineStyleImports(manifestFile, sourceDir) {
+function inlineStyleImports(manifestFile) {
     const require = createRequire(manifestFile);
     const manifest = readFileSync(manifestFile, 'utf8');
     const parts = [];
@@ -128,10 +135,7 @@ function bundleStyles(sourceDir, esmPath) {
             });
 
             const manifestFile = resolve(sourceDir, 'styles.css');
-            const { css: components, inlined } = inlineStyleImports(
-                manifestFile,
-                sourceDir,
-            );
+            const { css: components, inlined } = inlineStyleImports(manifestFile);
 
             const missing = findComponentStylesheets(sourceDir)
                 .filter((file) => !inlined.has(file))
@@ -147,7 +151,10 @@ function bundleStyles(sourceDir, esmPath) {
 
             const outputFile = resolve(esmPath, 'styles.css');
             mkdirSync(dirname(outputFile), { recursive: true });
-            writeFileSync(outputFile, `${tailwind.css}\n${components}`);
+            writeFileSync(
+                outputFile,
+                `${tailwind.css}\n@layer cratis-components {\n${components}\n}\n`,
+            );
             console.log(
                 `✓ Bundled Tailwind utilities + ${inlined.size} component stylesheet(s) → dist/esm/styles.css`,
             );
@@ -207,7 +214,15 @@ function moduleSpecifiers(sourceFile) {
     return specifiers;
 }
 
-/** Makes every relative ESM specifier directly executable by Node. */
+const sourceMapReference = /\n?\/\/# sourceMappingURL=[^\r\n]+(?:\r?\n)?$/u;
+
+/**
+ * Makes every relative ESM specifier directly executable by Node.
+ *
+ * Rewriting changes generated columns, so a pre-rewrite JavaScript/declaration map would be
+ * dishonest. Files that need a rewrite have their map reference and corresponding map removed;
+ * untouched files retain their valid maps. A future source-aware emit can preserve all maps.
+ */
 function fixRelativeEsmSpecifiers(esmPath) {
     return {
         name: 'fix-relative-esm-specifiers',
@@ -238,7 +253,11 @@ function fixRelativeEsmSpecifiers(esmPath) {
                         replacement.specifier +
                         rewritten.slice(replacement.end);
                 }
-                if (rewritten !== source) writeFileSync(file, rewritten);
+                if (rewritten !== source) {
+                    writeFileSync(file, rewritten.replace(sourceMapReference, '\n'));
+                    const mapFile = `${file}.map`;
+                    if (existsSync(mapFile)) unlinkSync(mapFile);
+                }
             }
         },
     };

From 4ecdd4f2ceacc7c00689abee40bce59685aa0d49 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Mon, 24 Aug 2026 00:33:12 +0200
Subject: [PATCH 025/267] Fix third-party notice formatting

---
 Source/THIRD_PARTY_NOTICES.md | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/Source/THIRD_PARTY_NOTICES.md b/Source/THIRD_PARTY_NOTICES.md
index 9e98c259..6a15dfe6 100644
--- a/Source/THIRD_PARTY_NOTICES.md
+++ b/Source/THIRD_PARTY_NOTICES.md
@@ -6,8 +6,10 @@
 
 MIT License
 
-Copyright (c) 2021 - present John Walley  
-Copyright (c) 2021 - present Gobalsky Labs Ltd.  
+Copyright (c) 2021 - present John Walley
+
+Copyright (c) 2021 - present Gobalsky Labs Ltd.
+
 Copyright (c) 2015 - present Microsoft Corporation
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

From c27cc5162cc5508475229ba7033e71c4f849199d Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Mon, 24 Aug 2026 00:36:16 +0200
Subject: [PATCH 026/267] Format final Components 4 review changes

---
 Documentation/Styling/cratis-tokens.md        |  80 +-
 Documentation/storybook.mdx                   |   1 +
 Source/Common/Button.css                      |   4 +-
 Source/Common/Button.stories.tsx              |  48 +-
 Source/Common/Button.tsx                      |  60 +-
 Source/TimeMachine/TimeMachine.css            | 828 +++++++++---------
 Source/TimeMachine/TimeMachine.tsx            | 441 +++++-----
 Source/Toolbar/Toolbar.css                    |  21 +-
 .../when_rendering_stable_parts.tsx           |   8 +-
 Source/scripts/verify-exports.mjs             |   4 +-
 Source/theme.css                              |  16 +-
 11 files changed, 804 insertions(+), 707 deletions(-)

diff --git a/Documentation/Styling/cratis-tokens.md b/Documentation/Styling/cratis-tokens.md
index 3cf9590d..5705435a 100644
--- a/Documentation/Styling/cratis-tokens.md
+++ b/Documentation/Styling/cratis-tokens.md
@@ -7,52 +7,52 @@ The `--cratis-*` variables are the supported theming boundary. The `tokens` entr
 
 ## Core colors
 
-| Token                                           | Purpose                                    |
-| ----------------------------------------------- | ------------------------------------------ |
-| `--cratis-primary-color`                        | Accent, links, selected controls, and non-text indicators. |
-| `--cratis-primary-color-text`                   | Content on the accent color where used.    |
-| `--cratis-primary-300` … `--cratis-primary-600` | Accent scale used by specialized surfaces. |
-| `--cratis-green-500`                            | Success state.                             |
-| `--cratis-orange-500`                           | Warning state.                             |
-| `--cratis-red-500`                              | Error/destructive indicator.               |
-| `--cratis-action-background` / `-hover` / `-active` | Accessible primary-action state fills. |
-| `--cratis-action-text`                          | Text/icons on the primary action.          |
-| `--cratis-info-background` / `--cratis-info-text` | Accessible info badge/tag pair.         |
-| `--cratis-success-background` / `--cratis-success-text` | Accessible success pair.             |
-| `--cratis-warning-background` / `--cratis-warning-text` | Accessible warning pair.             |
-| `--cratis-danger-background` / `--cratis-danger-text` | Accessible danger pair.                |
+| Token                                                   | Purpose                                                    |
+| ------------------------------------------------------- | ---------------------------------------------------------- |
+| `--cratis-primary-color`                                | Accent, links, selected controls, and non-text indicators. |
+| `--cratis-primary-color-text`                           | Content on the accent color where used.                    |
+| `--cratis-primary-300` … `--cratis-primary-600`         | Accent scale used by specialized surfaces.                 |
+| `--cratis-green-500`                                    | Success state.                                             |
+| `--cratis-orange-500`                                   | Warning state.                                             |
+| `--cratis-red-500`                                      | Error/destructive indicator.                               |
+| `--cratis-action-background` / `-hover` / `-active`     | Accessible primary-action state fills.                     |
+| `--cratis-action-text`                                  | Text/icons on the primary action.                          |
+| `--cratis-info-background` / `--cratis-info-text`       | Accessible info badge/tag pair.                            |
+| `--cratis-success-background` / `--cratis-success-text` | Accessible success pair.                                   |
+| `--cratis-warning-background` / `--cratis-warning-text` | Accessible warning pair.                                   |
+| `--cratis-danger-background` / `--cratis-danger-text`   | Accessible danger pair.                                    |
 
 ## Surfaces
 
-| Token                                         | Purpose                                        |
-| --------------------------------------------- | ---------------------------------------------- |
-| `--cratis-surface-ground`                     | Application/page background.                   |
-| `--cratis-surface-section`                    | Grouped section background.                    |
-| `--cratis-surface-card`                       | Cards and raised content.                      |
-| `--cratis-surface-overlay`                    | Dialogs, dropdowns, popovers, and toasts.      |
-| `--cratis-surface-hover`                      | Hovered or quiet selected state.               |
-| `--cratis-surface-border`                     | Borders and dividers.                          |
-| `--cratis-surface-0` / `--cratis-surface-100` | Small neutral ramp used by display components. |
-| `--cratis-control-background`                  | Inputs, Dropdown triggers, and segmented date controls. |
-| `--cratis-control-border`                      | Visible control boundary, intentionally stronger than quiet surface borders. |
+| Token                                         | Purpose                                                                      |
+| --------------------------------------------- | ---------------------------------------------------------------------------- |
+| `--cratis-surface-ground`                     | Application/page background.                                                 |
+| `--cratis-surface-section`                    | Grouped section background.                                                  |
+| `--cratis-surface-card`                       | Cards and raised content.                                                    |
+| `--cratis-surface-overlay`                    | Dialogs, dropdowns, popovers, and toasts.                                    |
+| `--cratis-surface-hover`                      | Hovered or quiet selected state.                                             |
+| `--cratis-surface-border`                     | Borders and dividers.                                                        |
+| `--cratis-surface-0` / `--cratis-surface-100` | Small neutral ramp used by display components.                               |
+| `--cratis-control-background`                 | Inputs, Dropdown triggers, and segmented date controls.                      |
+| `--cratis-control-border`                     | Visible control boundary, intentionally stronger than quiet surface borders. |
 
 ## Text and interaction
 
-| Token                           | Purpose                           |
-| ------------------------------- | --------------------------------- |
-| `--cratis-text-color`           | Primary text.                     |
-| `--cratis-text-color-secondary` | Supporting text and placeholders. |
-| `--cratis-highlight-bg`         | Selected/highlighted background.  |
-| `--cratis-highlight-text-color` | Text on a highlighted background. |
-| `--cratis-focus-ring`           | Keyboard-visible focus treatment. |
-| `--cratis-maskbg`               | Modal backdrop.                   |
-| `--cratis-border-radius`        | Default component radius.         |
-| `--cratis-control-height` / `-small` / `-large` | Interactive control size floor. |
-| `--cratis-disabled-opacity`     | Shared disabled-state opacity.    |
-| `--cratis-shadow-subtle`        | Small control elevation.          |
-| `--cratis-shadow-overlay`       | Dropdown, DatePicker, filter, Toolbar panel, and tooltip elevation. |
-| `--cratis-shadow-dialog`        | Dialog elevation.                 |
-| `--cratis-shadow-toast`         | Toast elevation.                  |
+| Token                                           | Purpose                                                             |
+| ----------------------------------------------- | ------------------------------------------------------------------- |
+| `--cratis-text-color`                           | Primary text.                                                       |
+| `--cratis-text-color-secondary`                 | Supporting text and placeholders.                                   |
+| `--cratis-highlight-bg`                         | Selected/highlighted background.                                    |
+| `--cratis-highlight-text-color`                 | Text on a highlighted background.                                   |
+| `--cratis-focus-ring`                           | Keyboard-visible focus treatment.                                   |
+| `--cratis-maskbg`                               | Modal backdrop.                                                     |
+| `--cratis-border-radius`                        | Default component radius.                                           |
+| `--cratis-control-height` / `-small` / `-large` | Interactive control size floor.                                     |
+| `--cratis-disabled-opacity`                     | Shared disabled-state opacity.                                      |
+| `--cratis-shadow-subtle`                        | Small control elevation.                                            |
+| `--cratis-shadow-overlay`                       | Dropdown, DatePicker, filter, Toolbar panel, and tooltip elevation. |
+| `--cratis-shadow-dialog`                        | Dialog elevation.                                                   |
+| `--cratis-shadow-toast`                         | Toast elevation.                                                    |
 
 ## Overlay stacking
 
diff --git a/Documentation/storybook.mdx b/Documentation/storybook.mdx
index 7a573b46..85a86b46 100644
--- a/Documentation/storybook.mdx
+++ b/Documentation/storybook.mdx
@@ -3,6 +3,7 @@ title: Storybook
 description: Browse every Cratis component live — props, states, and variations — in an interactive Storybook.
 tableOfContents: false
 ---
+
 import StorybookEmbed from '@components/StorybookEmbed.astro';
 
 Use the Appearance toolbar to compare the maintained baseline in light and dark modes with a representative product-owned token mapping. Stories load the same prefixed, layered, no-Preflight CSS contract as the published package. The Accessibility panel runs axe checks; keyboard, focus, busy, empty, invalid, disabled, open-overlay, and responsive states remain part of the release review.
diff --git a/Source/Common/Button.css b/Source/Common/Button.css
index 2def34c9..beed5786 100644
--- a/Source/Common/Button.css
+++ b/Source/Common/Button.css
@@ -34,7 +34,9 @@
 .cratis-button:is([data-variant='outlined'], [data-variant='text']):hover:not(:disabled) {
     background: color-mix(in srgb, currentColor 4%, transparent);
 }
-.cratis-button:is([data-variant='outlined'], [data-variant='text']):active:not(:disabled) {
+.cratis-button:is([data-variant='outlined'], [data-variant='text']):active:not(
+        :disabled
+    ) {
     background: color-mix(in srgb, currentColor 16%, transparent);
 }
 .cratis-button:focus-visible {
diff --git a/Source/Common/Button.stories.tsx b/Source/Common/Button.stories.tsx
index 87039b69..c0622f1c 100644
--- a/Source/Common/Button.stories.tsx
+++ b/Source/Common/Button.stories.tsx
@@ -17,18 +17,40 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Label: Story = { args: { label: 'Save' } };
-export const LabelAndIcon: Story = { args: { label: 'Save', icon: <span aria-hidden='true'>◆</span> } };
-export const IconOnly: Story = { args: { icon: <span aria-hidden='true'>◆</span>, 'aria-label': 'Delete', severity: 'danger' } };
+export const LabelAndIcon: Story = {
+    args: { label: 'Save', icon: <span aria-hidden='true'>◆</span> },
+};
+export const IconOnly: Story = {
+    args: {
+        icon: <span aria-hidden='true'>◆</span>,
+        'aria-label': 'Delete',
+        severity: 'danger',
+    },
+};
 export const Loading: Story = { args: { label: 'Saving', loading: true } };
 export const Text: Story = { args: { label: 'Cancel', text: true } };
 export const Link: Story = { args: { label: 'Learn more', link: true } };
-export const Outlined: Story = { args: { label: 'Details', outlined: true, severity: 'secondary' } };
-export const WithTooltip: Story = { args: { icon: <span aria-hidden='true'>◆</span>, 'aria-label': 'Info', tooltip: 'More information' } };
+export const Outlined: Story = {
+    args: { label: 'Details', outlined: true, severity: 'secondary' },
+};
+export const WithTooltip: Story = {
+    args: {
+        icon: <span aria-hidden='true'>◆</span>,
+        'aria-label': 'Info',
+        tooltip: 'More information',
+    },
+};
 
 export const VisualMatrix: Story = {
     render: () => (
         <div style={{ display: 'grid', gap: '1rem' }}>
-            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(6rem, 1fr))', gap: '0.75rem' }}>
+            <div
+                style={{
+                    display: 'grid',
+                    gridTemplateColumns: 'repeat(auto-fit, minmax(6rem, 1fr))',
+                    gap: '0.75rem',
+                }}
+            >
                 <Button label='Primary' />
                 <Button label='Secondary' severity='secondary' />
                 <Button label='Info' severity='info' />
@@ -38,14 +60,26 @@ export const VisualMatrix: Story = {
                 <Button label='Help' severity='help' />
                 <Button label='Contrast' severity='contrast' />
             </div>
-            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(6rem, 1fr))', gap: '0.75rem' }}>
+            <div
+                style={{
+                    display: 'grid',
+                    gridTemplateColumns: 'repeat(auto-fit, minmax(6rem, 1fr))',
+                    gap: '0.75rem',
+                }}
+            >
                 <Button label='Small' size='small' />
                 <Button label='Normal' />
                 <Button label='Large' size='large' />
                 <Button label='Disabled' disabled />
                 <Button label='Loading' loading />
             </div>
-            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(6rem, 1fr))', gap: '0.75rem' }}>
+            <div
+                style={{
+                    display: 'grid',
+                    gridTemplateColumns: 'repeat(auto-fit, minmax(6rem, 1fr))',
+                    gap: '0.75rem',
+                }}
+            >
                 <Button label='Filled' />
                 <Button label='Outlined' outlined />
                 <Button label='Text' text />
diff --git a/Source/Common/Button.tsx b/Source/Common/Button.tsx
index 25ac142a..7c9120e1 100644
--- a/Source/Common/Button.tsx
+++ b/Source/Common/Button.tsx
@@ -27,11 +27,10 @@ export interface ButtonParts {
 }
 
 /** Props for {@link Button}. */
-export interface ButtonProps
-    extends Omit<
-        ButtonHTMLAttributes<HTMLButtonElement>,
-        'children' | 'className' | 'disabled' | 'size' | 'style' | 'type'
-    > {
+export interface ButtonProps extends Omit<
+    ButtonHTMLAttributes<HTMLButtonElement>,
+    'children' | 'className' | 'disabled' | 'size' | 'style' | 'type'
+> {
     /** The button's text. */
     label?: ReactNode;
     /** The button's icon, rendered before the label. */
@@ -78,30 +77,33 @@ const renderIcon = (icon: ReactNode) =>
     typeof icon === 'string' ? <i className={icon} aria-hidden='true' /> : icon;
 
 /** A Cratis-owned button with stable parts and renderer-independent styling. */
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button({
-    label,
-    icon,
-    loading,
-    tooltip,
-    tooltipOptions,
-    pt,
-    text,
-    link,
-    outlined,
-    rounded,
-    severity,
-    size = 'normal',
-    disabled,
-    type = 'button',
-    title,
-    autoFocus,
-    onClick,
-    className,
-    style,
-    'aria-label': ariaLabel,
-    children,
-    ...nativeProps
-}, ref) {
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
+    {
+        label,
+        icon,
+        loading,
+        tooltip,
+        tooltipOptions,
+        pt,
+        text,
+        link,
+        outlined,
+        rounded,
+        severity,
+        size = 'normal',
+        disabled,
+        type = 'button',
+        title,
+        autoFocus,
+        onClick,
+        className,
+        style,
+        'aria-label': ariaLabel,
+        children,
+        ...nativeProps
+    },
+    ref,
+) {
     const variant = link ? 'link' : text ? 'text' : outlined ? 'outlined' : 'filled';
     const iconOnly = Boolean(icon) && label === undefined && !children;
     const rootClassName = ['cratis-button', pt?.root?.className, className]
diff --git a/Source/TimeMachine/TimeMachine.css b/Source/TimeMachine/TimeMachine.css
index a99db113..a93b59ab 100644
--- a/Source/TimeMachine/TimeMachine.css
+++ b/Source/TimeMachine/TimeMachine.css
@@ -1,607 +1,621 @@
 /* Time Machine Container */
 .time-machine {
-  /* Color tokens — intentional dark space theme. Override to customize. */
-  --tm-bg-deep: #0a0a1a;
-  --tm-bg-deepest: #000005;
-  --tm-text: rgba(255, 255, 255, 0.9);
-  --tm-text-muted: rgba(255, 255, 255, 0.6);
-  --tm-text-dim: rgba(255, 255, 255, 0.7);
-  --tm-text-faint: rgba(255, 255, 255, 0.4);
-  --tm-surface: rgba(255, 255, 255, 0.05);
-  --tm-surface-hover: rgba(255, 255, 255, 0.08);
-  --tm-surface-active: rgba(255, 255, 255, 0.1);
-  --tm-border: rgba(255, 255, 255, 0.1);
-  --tm-border-subtle: rgba(255, 255, 255, 0.15);
-  --tm-accent: rgba(100, 150, 255, 1);
-  --tm-accent-bg: rgba(100, 150, 255, 0.2);
-  --tm-accent-bg-hover: rgba(100, 150, 255, 0.4);
-  --tm-accent-border: rgba(100, 150, 255, 0.3);
-  --tm-accent-border-hover: rgba(100, 150, 255, 0.8);
-  --tm-accent-glow: rgba(100, 150, 255, 0.3);
-  --tm-dark-surface: rgba(15, 23, 42, 0.75);
-
-  position: relative;
-  width: 100%;
-  height: 100vh;
-  overflow: hidden;
-  background: radial-gradient(ellipse at center, var(--tm-bg-deep) 0%, var(--tm-bg-deepest) 100%);
-  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
+    /* Color tokens — intentional dark space theme. Override to customize. */
+    --tm-bg-deep: #0a0a1a;
+    --tm-bg-deepest: #000005;
+    --tm-text: rgba(255, 255, 255, 0.9);
+    --tm-text-muted: rgba(255, 255, 255, 0.6);
+    --tm-text-dim: rgba(255, 255, 255, 0.7);
+    --tm-text-faint: rgba(255, 255, 255, 0.4);
+    --tm-surface: rgba(255, 255, 255, 0.05);
+    --tm-surface-hover: rgba(255, 255, 255, 0.08);
+    --tm-surface-active: rgba(255, 255, 255, 0.1);
+    --tm-border: rgba(255, 255, 255, 0.1);
+    --tm-border-subtle: rgba(255, 255, 255, 0.15);
+    --tm-accent: rgba(100, 150, 255, 1);
+    --tm-accent-bg: rgba(100, 150, 255, 0.2);
+    --tm-accent-bg-hover: rgba(100, 150, 255, 0.4);
+    --tm-accent-border: rgba(100, 150, 255, 0.3);
+    --tm-accent-border-hover: rgba(100, 150, 255, 0.8);
+    --tm-accent-glow: rgba(100, 150, 255, 0.3);
+    --tm-dark-surface: rgba(15, 23, 42, 0.75);
+
+    position: relative;
+    width: 100%;
+    height: 100vh;
+    overflow: hidden;
+    background: radial-gradient(
+        ellipse at center,
+        var(--tm-bg-deep) 0%,
+        var(--tm-bg-deepest) 100%
+    );
+    font-family:
+        -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto,
+        sans-serif;
 }
 
 /* View Switcher */
 .view-switcher {
-  position: absolute;
-  top: 20px;
-  left: 50%;
-  transform: translateX(-50%);
-  display: flex;
-  gap: 8px;
-  background: var(--tm-surface);
-  padding: 6px;
-  border-radius: 12px;
-  backdrop-filter: blur(10px);
-  border: 1px solid var(--tm-border);
-  z-index: 100;
+    position: absolute;
+    top: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    gap: 8px;
+    background: var(--tm-surface);
+    padding: 6px;
+    border-radius: 12px;
+    backdrop-filter: blur(10px);
+    border: 1px solid var(--tm-border);
+    z-index: 100;
 }
 
 .view-button {
-  width: 48px;
-  height: 48px;
-  border: none;
-  border-radius: 8px;
-  background: transparent;
-  color: var(--tm-text-muted);
-  font-size: 20px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.2s ease;
+    width: 48px;
+    height: 48px;
+    border: none;
+    border-radius: 8px;
+    background: transparent;
+    color: var(--tm-text-muted);
+    font-size: 20px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease;
 }
 
 .view-button:hover {
-  background: var(--tm-surface-active);
-  color: var(--tm-text);
+    background: var(--tm-surface-active);
+    color: var(--tm-text);
 }
 
 .view-button.active {
-  background: var(--tm-accent-bg);
-  color: var(--tm-accent);
-  box-shadow: 0 0 15px var(--tm-accent-glow);
+    background: var(--tm-accent-bg);
+    color: var(--tm-accent);
+    box-shadow: 0 0 15px var(--tm-accent-glow);
 }
 
 .view-button i {
-  font-size: 20px;
+    font-size: 20px;
 }
 
-
 /* Starfield Background */
 .time-machine-background {
-  position: absolute;
-  inset: 0;
-  overflow: hidden;
-  z-index: 0;
-  perspective: 500px;
-  perspective-origin: 50% 50%;
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+    z-index: 0;
+    perspective: 500px;
+    perspective-origin: 50% 50%;
 }
 
 .stars {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 2px;
-  height: 2px;
-  background: transparent;
-  transform-style: preserve-3d;
-  animation: starfield 16s linear infinite;
-  box-shadow:
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 2px;
+    height: 2px;
+    background: transparent;
+    transform-style: preserve-3d;
+    animation: starfield 16s linear infinite;
+    box-shadow:
     /* Layer 1 - close stars */
-    24vw -15vh 0 0px rgba(255,255,255,0.9),
-    -32vw 28vh 0 0px rgba(255,255,255,0.8),
-    45vw 35vh 0 0px rgba(255,255,255,0.7),
-    -18vw -40vh 0 0px rgba(255,255,255,0.9),
-    38vw -25vh 0 0px rgba(255,255,255,0.8),
-    -42vw 15vh 0 0px rgba(255,255,255,0.7),
-    12vw 42vh 0 0px rgba(255,255,255,0.9),
-    -28vw -18vh 0 0px rgba(255,255,255,0.8),
-    48vw 8vh 0 0px rgba(255,255,255,0.7),
-    -15vw 38vh 0 0px rgba(255,255,255,0.9),
-    32vw -42vh 0 0px rgba(255,255,255,0.8),
-    -45vw -8vh 0 0px rgba(255,255,255,0.7),
-    8vw -35vh 0 0px rgba(255,255,255,0.9),
-    -38vw 42vh 0 0px rgba(255,255,255,0.8),
-    42vw 18vh 0 0px rgba(255,255,255,0.7),
-    -8vw -28vh 0 0px rgba(255,255,255,0.9),
-    28vw 45vh 0 0px rgba(255,255,255,0.8),
-    -48vw 25vh 0 0px rgba(255,255,255,0.7),
-    15vw -8vh 0 0px rgba(255,255,255,0.9),
-    -22vw 12vh 0 0px rgba(255,255,255,0.8);
+        24vw -15vh 0 0px rgba(255, 255, 255, 0.9),
+        -32vw 28vh 0 0px rgba(255, 255, 255, 0.8),
+        45vw 35vh 0 0px rgba(255, 255, 255, 0.7),
+        -18vw -40vh 0 0px rgba(255, 255, 255, 0.9),
+        38vw -25vh 0 0px rgba(255, 255, 255, 0.8),
+        -42vw 15vh 0 0px rgba(255, 255, 255, 0.7),
+        12vw 42vh 0 0px rgba(255, 255, 255, 0.9),
+        -28vw -18vh 0 0px rgba(255, 255, 255, 0.8),
+        48vw 8vh 0 0px rgba(255, 255, 255, 0.7),
+        -15vw 38vh 0 0px rgba(255, 255, 255, 0.9),
+        32vw -42vh 0 0px rgba(255, 255, 255, 0.8),
+        -45vw -8vh 0 0px rgba(255, 255, 255, 0.7),
+        8vw -35vh 0 0px rgba(255, 255, 255, 0.9),
+        -38vw 42vh 0 0px rgba(255, 255, 255, 0.8),
+        42vw 18vh 0 0px rgba(255, 255, 255, 0.7),
+        -8vw -28vh 0 0px rgba(255, 255, 255, 0.9),
+        28vw 45vh 0 0px rgba(255, 255, 255, 0.8),
+        -48vw 25vh 0 0px rgba(255, 255, 255, 0.7),
+        15vw -8vh 0 0px rgba(255, 255, 255, 0.9),
+        -22vw 12vh 0 0px rgba(255, 255, 255, 0.8);
 }
 
 .stars-2 {
-  animation: starfield 16s linear infinite;
-  animation-delay: -5.33s;
-  box-shadow:
+    animation: starfield 16s linear infinite;
+    animation-delay: -5.33s;
+    box-shadow:
     /* Layer 2 - medium stars */
-    -12vw 22vh 0 0px rgba(255,255,255,0.9),
-    35vw -32vh 0 0px rgba(255,255,255,0.8),
-    -40vw -15vh 0 0px rgba(255,255,255,0.7),
-    22vw 40vh 0 0px rgba(255,255,255,0.9),
-    -25vw -35vh 0 0px rgba(255,255,255,0.8),
-    40vw 12vh 0 0px rgba(255,255,255,0.7),
-    -35vw 32vh 0 0px rgba(255,255,255,0.9),
-    18vw -22vh 0 0px rgba(255,255,255,0.8),
-    -10vw 45vh 0 0px rgba(255,255,255,0.7),
-    45vw -10vh 0 0px rgba(255,255,255,0.9),
-    -30vw -42vh 0 0px rgba(255,255,255,0.8),
-    5vw 30vh 0 0px rgba(255,255,255,0.7),
-    -45vw 5vh 0 0px rgba(255,255,255,0.9),
-    30vw 22vh 0 0px rgba(255,255,255,0.8),
-    -20vw -12vh 0 0px rgba(255,255,255,0.7),
-    48vw -38vh 0 0px rgba(255,255,255,0.9),
-    -5vw 18vh 0 0px rgba(255,255,255,0.8),
-    25vw -45vh 0 0px rgba(255,255,255,0.7),
-    -48vw 38vh 0 0px rgba(255,255,255,0.9),
-    10vw -5vh 0 0px rgba(255,255,255,0.8);
+        -12vw 22vh 0 0px rgba(255, 255, 255, 0.9),
+        35vw -32vh 0 0px rgba(255, 255, 255, 0.8),
+        -40vw -15vh 0 0px rgba(255, 255, 255, 0.7),
+        22vw 40vh 0 0px rgba(255, 255, 255, 0.9),
+        -25vw -35vh 0 0px rgba(255, 255, 255, 0.8),
+        40vw 12vh 0 0px rgba(255, 255, 255, 0.7),
+        -35vw 32vh 0 0px rgba(255, 255, 255, 0.9),
+        18vw -22vh 0 0px rgba(255, 255, 255, 0.8),
+        -10vw 45vh 0 0px rgba(255, 255, 255, 0.7),
+        45vw -10vh 0 0px rgba(255, 255, 255, 0.9),
+        -30vw -42vh 0 0px rgba(255, 255, 255, 0.8),
+        5vw 30vh 0 0px rgba(255, 255, 255, 0.7),
+        -45vw 5vh 0 0px rgba(255, 255, 255, 0.9),
+        30vw 22vh 0 0px rgba(255, 255, 255, 0.8),
+        -20vw -12vh 0 0px rgba(255, 255, 255, 0.7),
+        48vw -38vh 0 0px rgba(255, 255, 255, 0.9),
+        -5vw 18vh 0 0px rgba(255, 255, 255, 0.8),
+        25vw -45vh 0 0px rgba(255, 255, 255, 0.7),
+        -48vw 38vh 0 0px rgba(255, 255, 255, 0.9),
+        10vw -5vh 0 0px rgba(255, 255, 255, 0.8);
 }
 
 .stars-3 {
-  animation: starfield 16s linear infinite;
-  animation-delay: -10.66s;
-  box-shadow:
+    animation: starfield 16s linear infinite;
+    animation-delay: -10.66s;
+    box-shadow:
     /* Layer 3 - far stars */
-    18vw -28vh 0 0px rgba(255,255,255,0.9),
-    -28vw 35vh 0 0px rgba(255,255,255,0.8),
-    42vw 25vh 0 0px rgba(255,255,255,0.7),
-    -15vw -45vh 0 0px rgba(255,255,255,0.9),
-    35vw -18vh 0 0px rgba(255,255,255,0.8),
-    -42vw 8vh 0 0px rgba(255,255,255,0.7),
-    8vw 48vh 0 0px rgba(255,255,255,0.9),
-    -35vw -25vh 0 0px rgba(255,255,255,0.8),
-    48vw -5vh 0 0px rgba(255,255,255,0.7),
-    -8vw 28vh 0 0px rgba(255,255,255,0.9),
-    25vw -48vh 0 0px rgba(255,255,255,0.8),
-    -48vw -18vh 0 0px rgba(255,255,255,0.7),
-    5vw -38vh 0 0px rgba(255,255,255,0.9),
-    -25vw 48vh 0 0px rgba(255,255,255,0.8),
-    38vw 5vh 0 0px rgba(255,255,255,0.7),
-    -18vw -32vh 0 0px rgba(255,255,255,0.9),
-    32vw 38vh 0 0px rgba(255,255,255,0.8),
-    -38vw 18vh 0 0px rgba(255,255,255,0.7),
-    12vw -15vh 0 0px rgba(255,255,255,0.9),
-    -32vw 5vh 0 0px rgba(255,255,255,0.8);
+        18vw -28vh 0 0px rgba(255, 255, 255, 0.9),
+        -28vw 35vh 0 0px rgba(255, 255, 255, 0.8),
+        42vw 25vh 0 0px rgba(255, 255, 255, 0.7),
+        -15vw -45vh 0 0px rgba(255, 255, 255, 0.9),
+        35vw -18vh 0 0px rgba(255, 255, 255, 0.8),
+        -42vw 8vh 0 0px rgba(255, 255, 255, 0.7),
+        8vw 48vh 0 0px rgba(255, 255, 255, 0.9),
+        -35vw -25vh 0 0px rgba(255, 255, 255, 0.8),
+        48vw -5vh 0 0px rgba(255, 255, 255, 0.7),
+        -8vw 28vh 0 0px rgba(255, 255, 255, 0.9),
+        25vw -48vh 0 0px rgba(255, 255, 255, 0.8),
+        -48vw -18vh 0 0px rgba(255, 255, 255, 0.7),
+        5vw -38vh 0 0px rgba(255, 255, 255, 0.9),
+        -25vw 48vh 0 0px rgba(255, 255, 255, 0.8),
+        38vw 5vh 0 0px rgba(255, 255, 255, 0.7),
+        -18vw -32vh 0 0px rgba(255, 255, 255, 0.9),
+        32vw 38vh 0 0px rgba(255, 255, 255, 0.8),
+        -38vw 18vh 0 0px rgba(255, 255, 255, 0.7),
+        12vw -15vh 0 0px rgba(255, 255, 255, 0.9),
+        -32vw 5vh 0 0px rgba(255, 255, 255, 0.8);
 }
 
 @keyframes starfield {
-  0% {
-    transform: translateZ(-600px);
-    opacity: 0;
-  }
-  5% {
-    opacity: 1;
-  }
-  90% {
-    opacity: 1;
-  }
-  100% {
-    transform: translateZ(500px);
-    opacity: 0;
-  }
+    0% {
+        transform: translateZ(-600px);
+        opacity: 0;
+    }
+    5% {
+        opacity: 1;
+    }
+    90% {
+        opacity: 1;
+    }
+    100% {
+        transform: translateZ(500px);
+        opacity: 0;
+    }
 }
 
 /* Viewport for 3D Windows */
 .time-machine-viewport {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  perspective: 1200px;
-  perspective-origin: center 25%;
-  z-index: 1;
-  box-sizing: border-box;
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    perspective: 1200px;
+    perspective-origin: center 25%;
+    z-index: 1;
+    box-sizing: border-box;
 }
 
 .windows-container {
-  position: relative;
-  width: 60%;
-  max-width: 700px;
-  height: 55%;
-  max-height: 500px;
-  transform-style: preserve-3d;
+    position: relative;
+    width: 60%;
+    max-width: 700px;
+    height: 55%;
+    max-height: 500px;
+    transform-style: preserve-3d;
 }
 
 /* Individual Version Window */
 .version-window {
-  position: absolute;
-  inset: 0;
-  background: transparent;
-  overflow: visible;
-  cursor: pointer;
-  transform:
-    translateZ(calc(var(--z-offset) * 1px))
-    translateY(calc(var(--depth) * -35px))
-    scale(var(--scale));
-  opacity: var(--opacity);
-  transition:
-    transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
-    opacity 0.4s ease;
-  transform-style: preserve-3d;
-  will-change: transform, opacity;
-  perspective: 1500px;
+    position: absolute;
+    inset: 0;
+    background: transparent;
+    overflow: visible;
+    cursor: pointer;
+    transform: translateZ(calc(var(--z-offset) * 1px))
+        translateY(calc(var(--depth) * -35px)) scale(var(--scale));
+    opacity: var(--opacity);
+    transition:
+        transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
+        opacity 0.4s ease;
+    transform-style: preserve-3d;
+    will-change: transform, opacity;
+    perspective: 1500px;
 }
 
 .version-window-inner {
-  position: absolute;
-  inset: 0;
-  border-radius: 12px;
-  transform-style: preserve-3d;
-  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-  box-shadow:
-    0 0 0 1px rgba(255, 255, 255, 0.1),
-    0 20px 60px rgba(0, 0, 0, 0.5),
-    0 0 40px rgba(100, 100, 255, 0.1);
+    position: absolute;
+    inset: 0;
+    border-radius: 12px;
+    transform-style: preserve-3d;
+    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    box-shadow:
+        0 0 0 1px rgba(255, 255, 255, 0.1),
+        0 20px 60px rgba(0, 0, 0, 0.5),
+        0 0 40px rgba(100, 100, 255, 0.1);
 }
 
 .version-window.flipped .version-window-inner {
-  transform: rotateY(180deg);
+    transform: rotateY(180deg);
 }
 
 .version-window-face {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  flex-direction: column;
-  border-radius: inherit;
-  background: linear-gradient(180deg, #3a3a4a 0%, #2a2a3a 2%, #1e1e28 100%);
-  backface-visibility: hidden;
-  overflow: hidden;
-  pointer-events: auto;
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    border-radius: inherit;
+    background: linear-gradient(180deg, #3a3a4a 0%, #2a2a3a 2%, #1e1e28 100%);
+    backface-visibility: hidden;
+    overflow: hidden;
+    pointer-events: auto;
 }
 
 .version-window-face--back {
-  transform: rotateY(180deg);
-  background: linear-gradient(180deg, #262638 0%, #1b1b27 100%);
+    transform: rotateY(180deg);
+    background: linear-gradient(180deg, #262638 0%, #1b1b27 100%);
 }
 
 .version-window.flipped .version-window-face--front {
-  pointer-events: none;
+    pointer-events: none;
 }
 
 .version-window:not(.flipped) .version-window-face--back {
-  pointer-events: none;
+    pointer-events: none;
 }
 
 .version-window.active .version-window-inner {
-  box-shadow:
-    0 0 0 2px rgba(100, 150, 255, 0.5),
-    0 20px 60px rgba(0, 0, 0, 0.5),
-    0 0 60px rgba(100, 150, 255, 0.2);
+    box-shadow:
+        0 0 0 2px rgba(100, 150, 255, 0.5),
+        0 20px 60px rgba(0, 0, 0, 0.5),
+        0 0 60px rgba(100, 150, 255, 0.2);
 }
 
 .version-window:hover:not(.active) .version-window-inner {
-  box-shadow:
-    0 0 0 1px rgba(255, 255, 255, 0.2),
-    0 25px 70px rgba(0, 0, 0, 0.6),
-    0 0 50px rgba(100, 100, 255, 0.15);
+    box-shadow:
+        0 0 0 1px rgba(255, 255, 255, 0.2),
+        0 25px 70px rgba(0, 0, 0, 0.6),
+        0 0 50px rgba(100, 100, 255, 0.15);
 }
 
 /* Window Chrome (Title Bar) */
 .window-chrome {
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  align-items: center;
-  height: 36px;
-  padding: 0 12px;
-  background: linear-gradient(180deg, #4a4a5a 0%, #3a3a4a 100%);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-  gap: 12px;
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    align-items: center;
+    height: 36px;
+    padding: 0 12px;
+    background: linear-gradient(180deg, #4a4a5a 0%, #3a3a4a 100%);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+    gap: 12px;
 }
 
 .window-controls {
-  display: flex;
-  gap: 8px;
+    display: flex;
+    gap: 8px;
 }
 
 .control {
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  background: #666;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background: #666;
 }
 
 .control.close {
-  background: #ff5f57;
+    background: #ff5f57;
 }
 
 .control.minimize {
-  background: #ffbd2e;
+    background: #ffbd2e;
 }
 
 .control.maximize {
-  background: #28ca41;
+    background: #28ca41;
 }
 
 .window-title {
-  text-align: center;
-  font-size: 13px;
-  font-weight: 500;
-  color: rgba(255, 255, 255, 0.85);
-  margin: 0;
+    text-align: center;
+    font-size: 13px;
+    font-weight: 500;
+    color: rgba(255, 255, 255, 0.85);
+    margin: 0;
 }
 
 .window-actions {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
 }
 
 .window-flip-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  border-radius: 6px;
-  border: 1px solid var(--tm-border-subtle);
-  background: linear-gradient(180deg, rgba(120, 130, 220, 0.25) 0%, rgba(60, 70, 140, 0.25) 100%);
-  color: var(--tm-text);
-  cursor: pointer;
-  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border-radius: 6px;
+    border: 1px solid var(--tm-border-subtle);
+    background: linear-gradient(
+        180deg,
+        rgba(120, 130, 220, 0.25) 0%,
+        rgba(60, 70, 140, 0.25) 100%
+    );
+    color: var(--tm-text);
+    cursor: pointer;
+    transition:
+        transform 0.2s ease,
+        box-shadow 0.2s ease,
+        border-color 0.2s ease;
 }
 
 .window-flip-button:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
-  border-color: rgba(120, 160, 255, 0.4);
+    transform: translateY(-1px);
+    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
+    border-color: rgba(120, 160, 255, 0.4);
 }
 
 .window-flip-button:active {
-  transform: translateY(0);
+    transform: translateY(0);
 }
 
 .window-flip-button:focus-visible {
-  outline: 2px solid rgba(120, 160, 255, 0.85);
-  outline-offset: 2px;
+    outline: 2px solid rgba(120, 160, 255, 0.85);
+    outline-offset: 2px;
 }
 
 .window-flip-button i {
-  font-size: 14px;
+    font-size: 14px;
 }
 
 .window-chrome--back {
-  background: linear-gradient(180deg, #35354a 0%, #2b2b3c 100%);
+    background: linear-gradient(180deg, #35354a 0%, #2b2b3c 100%);
 }
 
 /* Window Content */
 .window-content {
-  height: calc(100% - 36px);
-  padding: 20px;
-  overflow: auto;
-  background: linear-gradient(180deg, #1e1e28 0%, #16161e 100%);
-  color: #e0e0e0;
+    height: calc(100% - 36px);
+    padding: 20px;
+    overflow: auto;
+    background: linear-gradient(180deg, #1e1e28 0%, #16161e 100%);
+    color: #e0e0e0;
 }
 
 .window-content--events {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
 }
 
 .snapshot-event-list {
-  display: flex;
-  flex-direction: column;
-  gap: 1.25rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
 }
 
 .snapshot-event {
-  background: var(--tm-surface);
-  border: 1px solid var(--tm-border);
-  border-radius: 10px;
-  padding: 1rem 1.25rem;
-  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
+    background: var(--tm-surface);
+    border: 1px solid var(--tm-border);
+    border-radius: 10px;
+    padding: 1rem 1.25rem;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
 }
 
 .snapshot-event-header {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 0.75rem;
-  margin-bottom: 0.75rem;
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 0.75rem;
+    margin-bottom: 0.75rem;
 }
 
 .snapshot-event-name {
-  font-size: 1rem;
-  font-weight: 600;
-  color: #ffffff;
+    font-size: 1rem;
+    font-weight: 600;
+    color: #ffffff;
 }
 
 .snapshot-event-timestamp {
-  font-size: 0.75rem;
-  color: var(--tm-text-muted);
-  font-family: -apple-system, BlinkMacSystemFont, 'SF Mono', monospace;
+    font-size: 0.75rem;
+    color: var(--tm-text-muted);
+    font-family: -apple-system, BlinkMacSystemFont, 'SF Mono', monospace;
 }
 
 /* Timeline */
 .timeline {
-  position: absolute;
-  right: 20px;
-  top: 50%;
-  transform: translateY(-50%);
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  z-index: 10;
+    position: absolute;
+    right: 20px;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    z-index: 10;
 }
 
 .timeline-track {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  padding: 20px 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding: 20px 0;
 }
 
 .timeline-track::-webkit-scrollbar {
-  display: none;
+    display: none;
 }
 
 /* Timeline Entry */
 .timeline-entry {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 10px;
-  padding: 4px 0;
-  border: 0;
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  cursor: pointer;
-  transform-origin: right center;
-  transform: scale(var(--magnification, 1));
-  transition: transform 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 10px;
+    padding: 4px 0;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+    transform-origin: right center;
+    transform: scale(var(--magnification, 1));
+    transition: transform 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 
 .timeline-tick {
-  width: calc(20px * var(--magnification, 1));
-  height: calc(2px * var(--magnification, 1));
-  background: var(--tm-text-faint);
-  border-radius: 1px;
-  transition:
-    width 0.15s ease,
-    height 0.15s ease,
-    background 0.15s ease;
+    width: calc(20px * var(--magnification, 1));
+    height: calc(2px * var(--magnification, 1));
+    background: var(--tm-text-faint);
+    border-radius: 1px;
+    transition:
+        width 0.15s ease,
+        height 0.15s ease,
+        background 0.15s ease;
 }
 
 .timeline-entry:focus-visible {
-  outline: none;
-  border-radius: var(--cratis-border-radius);
-  box-shadow: var(--cratis-focus-ring);
+    outline: none;
+    border-radius: var(--cratis-border-radius);
+    box-shadow: var(--cratis-focus-ring);
 }
 
 .timeline-entry.selected .timeline-tick {
-  background: #6a9fff;
-  box-shadow: 0 0 8px rgba(106, 159, 255, 0.6);
+    background: #6a9fff;
+    box-shadow: 0 0 8px rgba(106, 159, 255, 0.6);
 }
 
 .timeline-entry.hovered .timeline-tick {
-  background: var(--tm-text);
-  box-shadow: 0 0 6px var(--tm-surface-active);
+    background: var(--tm-text);
+    box-shadow: 0 0 6px var(--tm-surface-active);
 }
 
 .timeline-label {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  opacity: 0;
-  transform: translateX(10px);
-  transition:
-    opacity 0.2s ease,
-    transform 0.2s ease;
-  pointer-events: none;
-  white-space: nowrap;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    opacity: 0;
+    transform: translateX(10px);
+    transition:
+        opacity 0.2s ease,
+        transform 0.2s ease;
+    pointer-events: none;
+    white-space: nowrap;
 }
 
 .timeline-entry.hovered .timeline-label,
 .timeline-entry.selected .timeline-label {
-  opacity: 1;
-  transform: translateX(0);
+    opacity: 1;
+    transform: translateX(0);
 }
 
 .timeline-date {
-  font-size: 11px;
-  font-weight: 600;
-  color: #fff;
-  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
+    font-size: 11px;
+    font-weight: 600;
+    color: #fff;
+    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
 }
 
 .timeline-time {
-  font-size: 10px;
-  color: var(--tm-text-dim);
-  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
+    font-size: 10px;
+    color: var(--tm-text-dim);
+    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .timeline-entry,
-  .timeline-tick,
-  .timeline-label,
-  .time-machine * {
-    transition: none !important;
-    animation: none !important;
-  }
+    .timeline-entry,
+    .timeline-tick,
+    .timeline-label,
+    .time-machine * {
+        transition: none !important;
+        animation: none !important;
+    }
 }
 
 /* Navigation Controls */
 .navigation-controls {
-  position: absolute;
-  bottom: 30px;
-  left: 50%;
-  transform: translateX(-50%);
-  display: flex;
-  gap: 20px;
-  z-index: 10;
+    position: absolute;
+    bottom: 30px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    gap: 20px;
+    z-index: 10;
 }
 
 .nav-button {
-  width: 60px;
-  height: 60px;
-  border: none;
-  border-radius: 50%;
-  background: linear-gradient(180deg, rgba(100, 100, 130, 0.8) 0%, rgba(60, 60, 90, 0.8) 100%);
-  color: white;
-  font-size: 28px;
-  font-weight: 300;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  line-height: 1;
-  padding: 0;
-  box-shadow:
-    0 4px 20px rgba(0, 0, 0, 0.4),
-    inset 0 1px 0 rgba(255, 255, 255, 0.2);
-  transition:
-    transform 0.2s ease,
-    box-shadow 0.2s ease,
-    opacity 0.2s ease;
-  backdrop-filter: blur(10px);
+    width: 60px;
+    height: 60px;
+    border: none;
+    border-radius: 50%;
+    background: linear-gradient(
+        180deg,
+        rgba(100, 100, 130, 0.8) 0%,
+        rgba(60, 60, 90, 0.8) 100%
+    );
+    color: white;
+    font-size: 28px;
+    font-weight: 300;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+    padding: 0;
+    box-shadow:
+        0 4px 20px rgba(0, 0, 0, 0.4),
+        inset 0 1px 0 rgba(255, 255, 255, 0.2);
+    transition:
+        transform 0.2s ease,
+        box-shadow 0.2s ease,
+        opacity 0.2s ease;
+    backdrop-filter: blur(10px);
 }
 
 .nav-button:hover:not(:disabled) {
-  transform: scale(1.1);
-  box-shadow:
-    0 6px 25px rgba(0, 0, 0, 0.5),
-    inset 0 1px 0 rgba(255, 255, 255, 0.3),
-    0 0 20px rgba(100, 150, 255, 0.3);
+    transform: scale(1.1);
+    box-shadow:
+        0 6px 25px rgba(0, 0, 0, 0.5),
+        inset 0 1px 0 rgba(255, 255, 255, 0.3),
+        0 0 20px rgba(100, 150, 255, 0.3);
 }
 
 .nav-button:active:not(:disabled) {
-  transform: scale(0.95);
+    transform: scale(0.95);
 }
 
 .nav-button:disabled {
-  opacity: 0.3;
-  cursor: not-allowed;
+    opacity: 0.3;
+    cursor: not-allowed;
 }
 
 /* Responsive adjustments */
 @media (max-width: 768px) {
-  .time-machine-viewport {
-    width: calc(100% - 120px);
-  }
-
-  .timeline {
-    width: 100px;
-  }
-
-  .windows-container {
-    width: 85%;
-    height: 60%;
-  }
-
-  .nav-button {
-    width: 50px;
-    height: 50px;
-    font-size: 24px;
-  }
+    .time-machine-viewport {
+        width: calc(100% - 120px);
+    }
+
+    .timeline {
+        width: 100px;
+    }
+
+    .windows-container {
+        width: 85%;
+        height: 60%;
+    }
+
+    .nav-button {
+        width: 50px;
+        height: 50px;
+        font-size: 24px;
+    }
 }
diff --git a/Source/TimeMachine/TimeMachine.tsx b/Source/TimeMachine/TimeMachine.tsx
index 3355ef25..fbaf2064 100644
--- a/Source/TimeMachine/TimeMachine.tsx
+++ b/Source/TimeMachine/TimeMachine.tsx
@@ -11,254 +11,279 @@ import { FaBoxArchive, FaList } from 'react-icons/fa6';
 import { useLocale } from 'react-aria-components/I18nProvider';
 
 enum ViewModes {
-  ReadModel = 'ReadModel',
-  Events = 'Events',
+    ReadModel = 'ReadModel',
+    Events = 'Events',
 }
 
 /** Props for the localized, keyboard-accessible event/read-model timeline. */
 export interface TimeMachineProps {
-  versions: Version[];
-  currentVersionIndex?: number;
-  onVersionChange?: (index: number) => void;
-  /** Scroll sensitivity - higher values require more scrolling to change versions */
-  scrollSensitivity?: number;
-  /** Override any user-facing string (for localization). See {@link TimeMachineLabels}. */
-  labels?: Partial<TimeMachineLabels>;
+    versions: Version[];
+    currentVersionIndex?: number;
+    onVersionChange?: (index: number) => void;
+    /** Scroll sensitivity - higher values require more scrolling to change versions */
+    scrollSensitivity?: number;
+    /** Override any user-facing string (for localization). See {@link TimeMachineLabels}. */
+    labels?: Partial<TimeMachineLabels>;
 }
 
 export const TimeMachine: React.FC<TimeMachineProps> = ({
-  versions,
-  currentVersionIndex = 0,
-  onVersionChange,
-  scrollSensitivity = 50,
-  labels,
+    versions,
+    currentVersionIndex = 0,
+    onVersionChange,
+    scrollSensitivity = 50,
+    labels,
 }) => {
-  const l = { ...defaultTimeMachineLabels, ...labels };
-  const [selectedIndex, setSelectedIndex] = useState(currentVersionIndex);
-  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
-  const [isHoveringCard, setIsHoveringCard] = useState(false);
-  const [viewMode, setViewMode] = useState<ViewModes>(ViewModes.ReadModel);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const scrollAccumulatorRef = useRef(0);
+    const l = { ...defaultTimeMachineLabels, ...labels };
+    const [selectedIndex, setSelectedIndex] = useState(currentVersionIndex);
+    const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+    const [isHoveringCard, setIsHoveringCard] = useState(false);
+    const [viewMode, setViewMode] = useState<ViewModes>(ViewModes.ReadModel);
+    const containerRef = useRef<HTMLDivElement>(null);
+    const scrollAccumulatorRef = useRef(0);
 
-  const handleVersionSelect = useCallback((index: number) => {
-    setSelectedIndex(index);
-    onVersionChange?.(index);
-  }, [onVersionChange]);
+    const handleVersionSelect = useCallback(
+        (index: number) => {
+            setSelectedIndex(index);
+            onVersionChange?.(index);
+        },
+        [onVersionChange],
+    );
 
-  const handleTimelineHover = useCallback((index: number | null) => {
-    setHoveredIndex(index);
-  }, []);
+    const handleTimelineHover = useCallback((index: number | null) => {
+        setHoveredIndex(index);
+    }, []);
 
-  // Handle trackpad two-finger scroll gesture
-  useEffect(() => {
-    if (viewMode !== ViewModes.ReadModel) {
-      return;
-    }
+    // Handle trackpad two-finger scroll gesture
+    useEffect(() => {
+        if (viewMode !== ViewModes.ReadModel) {
+            return;
+        }
 
-    const container = containerRef.current;
-    if (!container) return;
+        const container = containerRef.current;
+        if (!container) return;
 
-    const handleWheel = (e: WheelEvent) => {
-      // Only handle navigation when not hovering over a card
-      if (isHoveringCard) {
-        return; // Allow normal scrolling within cards
-      }
+        const handleWheel = (e: WheelEvent) => {
+            // Only handle navigation when not hovering over a card
+            if (isHoveringCard) {
+                return; // Allow normal scrolling within cards
+            }
 
-      // Prevent default scrolling behavior
-      e.preventDefault();
+            // Prevent default scrolling behavior
+            e.preventDefault();
 
-      // Use deltaX for horizontal scroll, fallback to deltaY for vertical
-      // Most trackpads send horizontal delta for two-finger swipe
-      const delta = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY;
+            // Use deltaX for horizontal scroll, fallback to deltaY for vertical
+            // Most trackpads send horizontal delta for two-finger swipe
+            const delta = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY;
 
-      // Accumulate scroll delta
-      scrollAccumulatorRef.current += delta;
+            // Accumulate scroll delta
+            scrollAccumulatorRef.current += delta;
 
-      // Check if we've accumulated enough scroll to change version
-      if (Math.abs(scrollAccumulatorRef.current) >= scrollSensitivity) {
-        const direction = scrollAccumulatorRef.current > 0 ? 1 : -1;
-        const newIndex = Math.max(0, Math.min(versions.length - 1, selectedIndex + direction));
+            // Check if we've accumulated enough scroll to change version
+            if (Math.abs(scrollAccumulatorRef.current) >= scrollSensitivity) {
+                const direction = scrollAccumulatorRef.current > 0 ? 1 : -1;
+                const newIndex = Math.max(
+                    0,
+                    Math.min(versions.length - 1, selectedIndex + direction),
+                );
 
-        if (newIndex !== selectedIndex) {
-          setSelectedIndex(newIndex);
-          onVersionChange?.(newIndex);
-        }
+                if (newIndex !== selectedIndex) {
+                    setSelectedIndex(newIndex);
+                    onVersionChange?.(newIndex);
+                }
 
-        // Reset accumulator after version change
-        scrollAccumulatorRef.current = 0;
-      }
-    };
+                // Reset accumulator after version change
+                scrollAccumulatorRef.current = 0;
+            }
+        };
 
-    container.addEventListener('wheel', handleWheel, { passive: false });
+        container.addEventListener('wheel', handleWheel, { passive: false });
 
-    return () => {
-      container.removeEventListener('wheel', handleWheel);
-    };
-  }, [versions.length, selectedIndex, onVersionChange, scrollSensitivity, isHoveringCard, viewMode]);
+        return () => {
+            container.removeEventListener('wheel', handleWheel);
+        };
+    }, [
+        versions.length,
+        selectedIndex,
+        onVersionChange,
+        scrollSensitivity,
+        isHoveringCard,
+        viewMode,
+    ]);
 
-  // Calculate the display index - either hovered or selected
-  // (not used in this component; ReadModelView computes its own display index)
-  void hoveredIndex;
-  void selectedIndex;
+    // Calculate the display index - either hovered or selected
+    // (not used in this component; ReadModelView computes its own display index)
+    void hoveredIndex;
+    void selectedIndex;
 
-  // Get all events from all versions
-  const allEvents = versions.flatMap(version => version.events || []);
+    // Get all events from all versions
+    const allEvents = versions.flatMap((version) => version.events || []);
 
-  return (
-    <div className="time-machine" ref={containerRef}>
-      {/* View Switcher */}
-      <div className="view-switcher">
-        <button
-          type='button'
-          className={`view-button ${viewMode === ViewModes.ReadModel ? 'active' : ''}`}
-          onClick={() => setViewMode(ViewModes.ReadModel)}
-          aria-label={l.readModelView}
-          title={l.readModelView}
-        >
-          <FaBoxArchive aria-hidden='true' />
-        </button>
-        <button
-          type='button'
-          className={`view-button ${viewMode === ViewModes.Events ? 'active' : ''}`}
-          onClick={() => setViewMode(ViewModes.Events)}
-          aria-label={l.eventsView}
-          title={l.eventsView}
-        >
-          <FaList aria-hidden='true' />
-        </button>
-      </div>
+    return (
+        <div className='time-machine' ref={containerRef}>
+            {/* View Switcher */}
+            <div className='view-switcher'>
+                <button
+                    type='button'
+                    className={`view-button ${viewMode === ViewModes.ReadModel ? 'active' : ''}`}
+                    onClick={() => setViewMode(ViewModes.ReadModel)}
+                    aria-label={l.readModelView}
+                    title={l.readModelView}
+                >
+                    <FaBoxArchive aria-hidden='true' />
+                </button>
+                <button
+                    type='button'
+                    className={`view-button ${viewMode === ViewModes.Events ? 'active' : ''}`}
+                    onClick={() => setViewMode(ViewModes.Events)}
+                    aria-label={l.eventsView}
+                    title={l.eventsView}
+                >
+                    <FaList aria-hidden='true' />
+                </button>
+            </div>
 
-      {/* Render the appropriate view */}
-      {viewMode === ViewModes.ReadModel ? (
-        <ReadModelView
-          versions={versions}
-          selectedIndex={selectedIndex}
-          hoveredIndex={hoveredIndex}
-          onVersionSelect={handleVersionSelect}
-          onHoveringCardChange={setIsHoveringCard}
-          labels={l}
-        />
-      ) : (
-        <EventsView events={allEvents} labels={l} />
-      )}
+            {/* Render the appropriate view */}
+            {viewMode === ViewModes.ReadModel ? (
+                <ReadModelView
+                    versions={versions}
+                    selectedIndex={selectedIndex}
+                    hoveredIndex={hoveredIndex}
+                    onVersionSelect={handleVersionSelect}
+                    onHoveringCardChange={setIsHoveringCard}
+                    labels={l}
+                />
+            ) : (
+                <EventsView events={allEvents} labels={l} />
+            )}
 
-      {/* Timeline - only show in ReadModel view */}
-      {viewMode === ViewModes.ReadModel && (
-        <Timeline
-          versions={versions}
-          selectedIndex={selectedIndex}
-          hoveredIndex={hoveredIndex}
-          onSelect={handleVersionSelect}
-          onHover={handleTimelineHover}
-        />
-      )}
+            {/* Timeline - only show in ReadModel view */}
+            {viewMode === ViewModes.ReadModel && (
+                <Timeline
+                    versions={versions}
+                    selectedIndex={selectedIndex}
+                    hoveredIndex={hoveredIndex}
+                    onSelect={handleVersionSelect}
+                    onHover={handleTimelineHover}
+                />
+            )}
 
-      {/* Navigation arrows - only show in ReadModel view */}
-      {viewMode === ViewModes.ReadModel && (
-        <div className="navigation-controls">
-          <button
-            type='button'
-            className="nav-button prev"
-            disabled={selectedIndex === 0}
-            onClick={() => handleVersionSelect(Math.max(0, selectedIndex - 1))}
-            aria-label={l.previousVersion}
-          >
-            ‹
-          </button>
-          <button
-            type='button'
-            className="nav-button next"
-            disabled={selectedIndex === versions.length - 1}
-            onClick={() => handleVersionSelect(Math.min(versions.length - 1, selectedIndex + 1))}
-            aria-label={l.nextVersion}
-          >
-            ›
-          </button>
+            {/* Navigation arrows - only show in ReadModel view */}
+            {viewMode === ViewModes.ReadModel && (
+                <div className='navigation-controls'>
+                    <button
+                        type='button'
+                        className='nav-button prev'
+                        disabled={selectedIndex === 0}
+                        onClick={() =>
+                            handleVersionSelect(Math.max(0, selectedIndex - 1))
+                        }
+                        aria-label={l.previousVersion}
+                    >
+                        ‹
+                    </button>
+                    <button
+                        type='button'
+                        className='nav-button next'
+                        disabled={selectedIndex === versions.length - 1}
+                        onClick={() =>
+                            handleVersionSelect(
+                                Math.min(versions.length - 1, selectedIndex + 1),
+                            )
+                        }
+                        aria-label={l.nextVersion}
+                    >
+                        ›
+                    </button>
+                </div>
+            )}
         </div>
-      )}
-    </div>
-  );
+    );
 };
 
 interface TimelineProps {
-  versions: Version[];
-  selectedIndex: number;
-  hoveredIndex: number | null;
-  onSelect: (index: number) => void;
-  onHover: (index: number | null) => void;
+    versions: Version[];
+    selectedIndex: number;
+    hoveredIndex: number | null;
+    onSelect: (index: number) => void;
+    onHover: (index: number | null) => void;
 }
 
 const Timeline: React.FC<TimelineProps> = ({
-  versions,
-  selectedIndex,
-  hoveredIndex,
-  onSelect,
-  onHover,
+    versions,
+    selectedIndex,
+    hoveredIndex,
+    onSelect,
+    onHover,
 }) => {
-  const { locale } = useLocale();
+    const { locale } = useLocale();
 
-  const getMagnification = (index: number, hoverIdx: number | null): number => {
-    if (hoverIdx === null) return 1;
-    const distance = Math.abs(index - hoverIdx);
-    // Fish-eye effect: items close to hover get magnified
-    if (distance === 0) return 2.0;
-    if (distance === 1) return 1.6;
-    if (distance === 2) return 1.3;
-    if (distance === 3) return 1.1;
-    return 1;
-  };
+    const getMagnification = (index: number, hoverIdx: number | null): number => {
+        if (hoverIdx === null) return 1;
+        const distance = Math.abs(index - hoverIdx);
+        // Fish-eye effect: items close to hover get magnified
+        if (distance === 0) return 2.0;
+        if (distance === 1) return 1.6;
+        if (distance === 2) return 1.3;
+        if (distance === 3) return 1.1;
+        return 1;
+    };
 
-  const formatDate = (date: Date): string => {
-    return date.toLocaleDateString(locale, {
-      month: 'short',
-      day: 'numeric',
-      year: 'numeric',
-    });
-  };
+    const formatDate = (date: Date): string => {
+        return date.toLocaleDateString(locale, {
+            month: 'short',
+            day: 'numeric',
+            year: 'numeric',
+        });
+    };
 
-  const formatTime = (date: Date): string => {
-    return date.toLocaleTimeString(locale, {
-      hour: 'numeric',
-      minute: '2-digit',
-    });
-  };
+    const formatTime = (date: Date): string => {
+        return date.toLocaleTimeString(locale, {
+            hour: 'numeric',
+            minute: '2-digit',
+        });
+    };
 
-  return (
-    <div className="timeline">
-      <div className="timeline-track">
-        {versions.map((version, index) => {
-          const magnification = getMagnification(index, hoveredIndex);
-          const isSelected = index === selectedIndex;
-          const isHovered = index === hoveredIndex;
+    return (
+        <div className='timeline'>
+            <div className='timeline-track'>
+                {versions.map((version, index) => {
+                    const magnification = getMagnification(index, hoveredIndex);
+                    const isSelected = index === selectedIndex;
+                    const isHovered = index === hoveredIndex;
 
-          return (
-            <button
-              key={version.id}
-              type='button'
-              className={`timeline-entry ${isSelected ? 'selected' : ''} ${isHovered ? 'hovered' : ''}`}
-              style={{
-                '--magnification': magnification,
-              } as React.CSSProperties}
-              onMouseEnter={() => onHover(index)}
-              onMouseLeave={() => onHover(null)}
-              onFocus={() => onHover(index)}
-              onBlur={() => onHover(null)}
-              onClick={() => onSelect(index)}
-              aria-pressed={isSelected}
-              aria-label={`${formatDate(version.timestamp)} ${formatTime(version.timestamp)}`}
-            >
-              <div className="timeline-tick"></div>
-              <div className="timeline-label">
-                <span className="timeline-date">{formatDate(version.timestamp)}</span>
-                <span className="timeline-time">{formatTime(version.timestamp)}</span>
-              </div>
-            </button>
-          );
-        })}
-      </div>
-    </div>
-  );
+                    return (
+                        <button
+                            key={version.id}
+                            type='button'
+                            className={`timeline-entry ${isSelected ? 'selected' : ''} ${isHovered ? 'hovered' : ''}`}
+                            style={
+                                {
+                                    '--magnification': magnification,
+                                } as React.CSSProperties
+                            }
+                            onMouseEnter={() => onHover(index)}
+                            onMouseLeave={() => onHover(null)}
+                            onFocus={() => onHover(index)}
+                            onBlur={() => onHover(null)}
+                            onClick={() => onSelect(index)}
+                            aria-pressed={isSelected}
+                            aria-label={`${formatDate(version.timestamp)} ${formatTime(version.timestamp)}`}
+                        >
+                            <div className='timeline-tick'></div>
+                            <div className='timeline-label'>
+                                <span className='timeline-date'>
+                                    {formatDate(version.timestamp)}
+                                </span>
+                                <span className='timeline-time'>
+                                    {formatTime(version.timestamp)}
+                                </span>
+                            </div>
+                        </button>
+                    );
+                })}
+            </div>
+        </div>
+    );
 };
 
 export default TimeMachine;
diff --git a/Source/Toolbar/Toolbar.css b/Source/Toolbar/Toolbar.css
index b1e07f2a..dbe191c9 100644
--- a/Source/Toolbar/Toolbar.css
+++ b/Source/Toolbar/Toolbar.css
@@ -13,7 +13,9 @@
     color: var(--cratis-text-color-secondary);
     background: transparent;
     border: none;
-    transition: background 0.15s, color 0.15s;
+    transition:
+        background 0.15s,
+        color 0.15s;
 }
 
 .toolbar-button:hover {
@@ -300,7 +302,6 @@
     box-shadow: var(--cratis-shadow-overlay);
 }
 
-
 /* ── Toolbar slot transition (ToolbarGroup slot content) ─────────────────── */
 
 /*
@@ -324,13 +325,21 @@
 }
 
 @keyframes toolbar-slot-fade-in {
-    from { opacity: 0; }
-    to   { opacity: 1; }
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
 }
 
 @keyframes toolbar-slot-fade-out {
-    from { opacity: 1; }
-    to   { opacity: 0; }
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+    }
 }
 
 /*
diff --git a/Source/Toolbar/for_ToolbarComposition/when_rendering_stable_parts.tsx b/Source/Toolbar/for_ToolbarComposition/when_rendering_stable_parts.tsx
index c0fac897..f1d9edab 100644
--- a/Source/Toolbar/for_ToolbarComposition/when_rendering_stable_parts.tsx
+++ b/Source/Toolbar/for_ToolbarComposition/when_rendering_stable_parts.tsx
@@ -20,9 +20,7 @@ vi.mock('../../Common/Tooltip', () => ({
 describe('when rendering Toolbar composition parts', () => {
     const html = renderToStaticMarkup(
         <Toolbar aria-label='Canvas tools'>
-            <ToolbarGroup pt={{ root: { id: 'group' } }}>
-                Group
-            </ToolbarGroup>
+            <ToolbarGroup pt={{ root: { id: 'group' } }}>Group</ToolbarGroup>
             <ToolbarSeparator pt={{ root: { id: 'separator' } }} />
             <ToolbarLayout
                 name='tools'
@@ -98,6 +96,8 @@ describe('when rendering Toolbar composition parts', () => {
     });
 
     it('should_make_the_collapsed_folder_panel_inert', () => {
-        expect(html).to.match(/data-cratis-part="toolbar-folder-panel"[^>]*aria-hidden="true"[^>]*inert=""/);
+        expect(html).to.match(
+            /data-cratis-part="toolbar-folder-panel"[^>]*aria-hidden="true"[^>]*inert=""/,
+        );
     });
 });
diff --git a/Source/scripts/verify-exports.mjs b/Source/scripts/verify-exports.mjs
index 94c5a9bb..b23d61f4 100644
--- a/Source/scripts/verify-exports.mjs
+++ b/Source/scripts/verify-exports.mjs
@@ -212,7 +212,9 @@ if (!publishedStyles.includes('.cratis\\:flex')) {
     console.error('Published styles are missing prefixed internal utility output.');
     process.exit(1);
 }
-if (/\n\s*\.(?:flex|grid|container|hidden|absolute|relative)\s*\{/u.test(publishedStyles)) {
+if (
+    /\n\s*\.(?:flex|grid|container|hidden|absolute|relative)\s*\{/u.test(publishedStyles)
+) {
     console.error('Published styles leak an unprefixed internal utility selector.');
     process.exit(1);
 }
diff --git a/Source/theme.css b/Source/theme.css
index 4f8989ec..ce6fe0f9 100644
--- a/Source/theme.css
+++ b/Source/theme.css
@@ -97,8 +97,12 @@
     --cratis-maskbg: rgb(0 0 0 / 40%);
     --cratis-focus-ring: 0 0 0 3px #93c5fd;
     --cratis-shadow-subtle: none;
-    --cratis-shadow-overlay: 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px rgb(0 0 0 / 14%), 0 1px 10px rgb(0 0 0 / 12%);
-    --cratis-shadow-dialog: 0 11px 15px -7px rgb(0 0 0 / 20%), 0 24px 38px 3px rgb(0 0 0 / 14%), 0 9px 46px 8px rgb(0 0 0 / 12%);
+    --cratis-shadow-overlay:
+        0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px rgb(0 0 0 / 14%),
+        0 1px 10px rgb(0 0 0 / 12%);
+    --cratis-shadow-dialog:
+        0 11px 15px -7px rgb(0 0 0 / 20%), 0 24px 38px 3px rgb(0 0 0 / 14%),
+        0 9px 46px 8px rgb(0 0 0 / 12%);
     --cratis-shadow-toast: none;
 }
 
@@ -137,8 +141,12 @@
         --cratis-maskbg: rgb(0 0 0 / 40%);
         --cratis-focus-ring: 0 0 0 3px #93c5fd;
         --cratis-shadow-subtle: none;
-        --cratis-shadow-overlay: 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px rgb(0 0 0 / 14%), 0 1px 10px rgb(0 0 0 / 12%);
-        --cratis-shadow-dialog: 0 11px 15px -7px rgb(0 0 0 / 20%), 0 24px 38px 3px rgb(0 0 0 / 14%), 0 9px 46px 8px rgb(0 0 0 / 12%);
+        --cratis-shadow-overlay:
+            0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px rgb(0 0 0 / 14%),
+            0 1px 10px rgb(0 0 0 / 12%);
+        --cratis-shadow-dialog:
+            0 11px 15px -7px rgb(0 0 0 / 20%), 0 24px 38px 3px rgb(0 0 0 / 14%),
+            0 9px 46px 8px rgb(0 0 0 / 12%);
         --cratis-shadow-toast: none;
     }
 }

From 4ab4d7d0be0e3f9453961edc85fa8b5fe49745bc Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Mon, 24 Aug 2026 00:46:14 +0200
Subject: [PATCH 027/267] Close final visual accessibility gaps

Use accessible action pairs for selected controls, complete reduced-motion coverage, make visual stories deterministic and responsive, and add familiar Dropdown hover/pressed states.
---
 Source/.storybook/preview.css             |  6 ++--
 Source/CommandDialog/CommandStepper.css   |  4 +--
 Source/Common/Button.stories.tsx          | 34 ++++++++---------------
 Source/Common/DatePickerInput.stories.tsx |  2 +-
 Source/Dropdown/Dropdown.css              |  8 ++++++
 Source/Filter/FilterPanel.css             |  8 ++++++
 Source/PivotViewer/PivotViewer.css        | 21 ++++++++++----
 Source/Toolbar/Toolbar.css                |  8 +++---
 8 files changed, 53 insertions(+), 38 deletions(-)

diff --git a/Source/.storybook/preview.css b/Source/.storybook/preview.css
index 49473a3a..de00da9d 100644
--- a/Source/.storybook/preview.css
+++ b/Source/.storybook/preview.css
@@ -25,9 +25,9 @@ body.storybook-product-theme {
     --cratis-primary-400: #38bdf8;
     --cratis-primary-500: #0ea5e9;
     --cratis-primary-600: #0284c7;
-    --cratis-action-background: #0284c7;
-    --cratis-action-background-hover: #0369a1;
-    --cratis-action-background-active: #075985;
+    --cratis-action-background: #0369a1;
+    --cratis-action-background-hover: #075985;
+    --cratis-action-background-active: #0c4a6e;
     --cratis-action-text: #ffffff;
     --cratis-highlight-bg: #1e40af;
     --cratis-highlight-text-color: #ffffff;
diff --git a/Source/CommandDialog/CommandStepper.css b/Source/CommandDialog/CommandStepper.css
index e11f2542..0b27c896 100644
--- a/Source/CommandDialog/CommandStepper.css
+++ b/Source/CommandDialog/CommandStepper.css
@@ -61,8 +61,8 @@
 }
 .cratis-command-stepper__step[data-active='true'] .cratis-command-stepper__number {
     border-color: var(--cratis-primary-color);
-    background: var(--cratis-primary-color);
-    color: var(--cratis-primary-color-text);
+    background: var(--cratis-action-background);
+    color: var(--cratis-action-text);
 }
 .cratis-command-stepper__step[data-visited='true']:not([data-invalid='true'])
     .cratis-command-stepper__number {
diff --git a/Source/Common/Button.stories.tsx b/Source/Common/Button.stories.tsx
index c0622f1c..aa02a511 100644
--- a/Source/Common/Button.stories.tsx
+++ b/Source/Common/Button.stories.tsx
@@ -16,6 +16,14 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+const matrixRowStyle = {
+    display: 'grid',
+    width: '100%',
+    minWidth: 0,
+    gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 6rem), 1fr))',
+    gap: '0.75rem',
+} as const;
+
 export const Label: Story = { args: { label: 'Save' } };
 export const LabelAndIcon: Story = {
     args: { label: 'Save', icon: <span aria-hidden='true'>◆</span> },
@@ -43,14 +51,8 @@ export const WithTooltip: Story = {
 
 export const VisualMatrix: Story = {
     render: () => (
-        <div style={{ display: 'grid', gap: '1rem' }}>
-            <div
-                style={{
-                    display: 'grid',
-                    gridTemplateColumns: 'repeat(auto-fit, minmax(6rem, 1fr))',
-                    gap: '0.75rem',
-                }}
-            >
+        <div style={{ display: 'grid', width: '100%', minWidth: 0, gap: '1rem' }}>
+            <div style={matrixRowStyle}>
                 <Button label='Primary' />
                 <Button label='Secondary' severity='secondary' />
                 <Button label='Info' severity='info' />
@@ -60,26 +62,14 @@ export const VisualMatrix: Story = {
                 <Button label='Help' severity='help' />
                 <Button label='Contrast' severity='contrast' />
             </div>
-            <div
-                style={{
-                    display: 'grid',
-                    gridTemplateColumns: 'repeat(auto-fit, minmax(6rem, 1fr))',
-                    gap: '0.75rem',
-                }}
-            >
+            <div style={matrixRowStyle}>
                 <Button label='Small' size='small' />
                 <Button label='Normal' />
                 <Button label='Large' size='large' />
                 <Button label='Disabled' disabled />
                 <Button label='Loading' loading />
             </div>
-            <div
-                style={{
-                    display: 'grid',
-                    gridTemplateColumns: 'repeat(auto-fit, minmax(6rem, 1fr))',
-                    gap: '0.75rem',
-                }}
-            >
+            <div style={matrixRowStyle}>
                 <Button label='Filled' />
                 <Button label='Outlined' outlined />
                 <Button label='Text' text />
diff --git a/Source/Common/DatePickerInput.stories.tsx b/Source/Common/DatePickerInput.stories.tsx
index 1c1d2e30..01d263c8 100644
--- a/Source/Common/DatePickerInput.stories.tsx
+++ b/Source/Common/DatePickerInput.stories.tsx
@@ -52,7 +52,7 @@ export const StateMatrix: Story = {
 };
 
 export const OpenCalendar: Story = {
-    render: () => <ControlledPicker />,
+    render: () => <ControlledPicker initialValue={new Date(2024, 5, 15)} />,
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);
         await userEvent.click(canvas.getByRole('button', { name: 'Open calendar' }));
diff --git a/Source/Dropdown/Dropdown.css b/Source/Dropdown/Dropdown.css
index 73695546..6b835787 100644
--- a/Source/Dropdown/Dropdown.css
+++ b/Source/Dropdown/Dropdown.css
@@ -37,6 +37,14 @@
 .cratis-dropdown__filter {
     padding: 0.625rem 4rem 0.625rem 0.75rem;
 }
+.cratis-dropdown:not([data-disabled='true'])
+    :is(.cratis-dropdown__trigger, .cratis-dropdown__filter):hover {
+    border-color: var(--cratis-primary-300);
+    background: var(--cratis-surface-hover);
+}
+.cratis-dropdown__trigger[data-pressed] {
+    background: var(--cratis-highlight-bg);
+}
 .cratis-dropdown__multiple {
     padding: 0.4rem;
 }
diff --git a/Source/Filter/FilterPanel.css b/Source/Filter/FilterPanel.css
index 23a3e617..791d816a 100644
--- a/Source/Filter/FilterPanel.css
+++ b/Source/Filter/FilterPanel.css
@@ -457,3 +457,11 @@
     right: 1.25rem;
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  :where(.pv-filter-panel, .pv-filter-dropdown),
+  :where(.pv-filter-panel, .pv-filter-dropdown) * {
+    transition: none !important;
+    animation: none !important;
+  }
+}
diff --git a/Source/PivotViewer/PivotViewer.css b/Source/PivotViewer/PivotViewer.css
index 8208cbdf..76dfe53c 100644
--- a/Source/PivotViewer/PivotViewer.css
+++ b/Source/PivotViewer/PivotViewer.css
@@ -390,8 +390,8 @@
   align-items: center;
   justify-content: center;
   border-radius: 999px;
-  background: var(--cratis-primary-color);
-  color: var(--cratis-primary-color-text);
+  background: var(--cratis-action-background);
+  color: var(--cratis-action-text);
   font-size: 0.65rem;
   font-weight: 600;
   padding: 0 0.25rem;
@@ -405,10 +405,10 @@
   background: linear-gradient(180deg, var(--cratis-surface-card), var(--cratis-surface-ground));
   border: 1px solid var(--cratis-surface-border);
   border-radius: 0.85rem;
-  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
+  box-shadow: var(--cratis-shadow-overlay);
   backdrop-filter: blur(16px);
   overflow: hidden;
-  z-index: 1000;
+  z-index: var(--cratis-z-index-filter);
   display: flex;
   flex-direction: column;
   will-change: opacity, transform;
@@ -446,8 +446,8 @@
 }
 
 .pv-view-toggle button.active {
-  background: var(--cratis-primary-color);
-  color: var(--cratis-primary-color-text);
+  background: var(--cratis-action-background);
+  color: var(--cratis-action-text);
 }
 
 .pv-zoom-controls {
@@ -1321,3 +1321,12 @@
     padding: 1.5rem;
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .pivot-viewer,
+  .pivot-viewer * {
+    scroll-behavior: auto !important;
+    transition: none !important;
+    animation: none !important;
+  }
+}
diff --git a/Source/Toolbar/Toolbar.css b/Source/Toolbar/Toolbar.css
index dbe191c9..b77aa0c2 100644
--- a/Source/Toolbar/Toolbar.css
+++ b/Source/Toolbar/Toolbar.css
@@ -24,13 +24,13 @@
 }
 
 .toolbar-button--active {
-    background: var(--cratis-primary-color);
-    color: var(--cratis-primary-color-text);
+    background: var(--cratis-action-background);
+    color: var(--cratis-action-text);
 }
 
 .toolbar-button--active:hover {
-    background: var(--cratis-primary-color);
-    color: var(--cratis-primary-color-text);
+    background: var(--cratis-action-background-hover);
+    color: var(--cratis-action-text);
 }
 
 .toolbar-button--draggable {

From 6dd28914aa4c3906a45f385da01a3f48a7b9b5d6 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Mon, 24 Aug 2026 00:50:52 +0200
Subject: [PATCH 028/267] Complete licensing and reduced-motion contracts

Publish the Tailwind MIT notice, enforce it in archive verification, honor reduced motion in standalone event timelines, and keep reduced-motion Toolbar panels unclipped.
---
 Source/THIRD_PARTY_NOTICES.md             | 12 ++++++++++++
 Source/TimeMachine/EventsView.css         |  9 +++++++++
 Source/TimeMachine/EventsView.tsx         | 15 +++++++++++----
 Source/TimeMachine/index.ts               |  1 +
 Source/Toolbar/Toolbar.css                |  4 ++++
 Source/scripts/verify-package-archive.mjs |  2 ++
 6 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/Source/THIRD_PARTY_NOTICES.md b/Source/THIRD_PARTY_NOTICES.md
index 6a15dfe6..059f142e 100644
--- a/Source/THIRD_PARTY_NOTICES.md
+++ b/Source/THIRD_PARTY_NOTICES.md
@@ -18,6 +18,18 @@ The above copyright notice and this permission notice shall be included in all c
 
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
+## Tailwind CSS generated theme and utility output
+
+MIT License
+
+Copyright (c) Tailwind Labs, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
 ## Patrick Hand font
 
 Canvas Note includes Patrick Hand under the SIL Open Font License 1.1. The complete notice is published as `dist/esm/PatrickHand-OFL.txt`.
diff --git a/Source/TimeMachine/EventsView.css b/Source/TimeMachine/EventsView.css
index 473e832e..01a84652 100644
--- a/Source/TimeMachine/EventsView.css
+++ b/Source/TimeMachine/EventsView.css
@@ -210,3 +210,12 @@
     direction: ltr;
     text-align: right;
 }
+
+@media (prefers-reduced-motion: reduce) {
+    .events-view-container,
+    .events-view-container * {
+        scroll-behavior: auto !important;
+        transition: none !important;
+        animation: none !important;
+    }
+}
diff --git a/Source/TimeMachine/EventsView.tsx b/Source/TimeMachine/EventsView.tsx
index 7da6d4e2..208f0165 100644
--- a/Source/TimeMachine/EventsView.tsx
+++ b/Source/TimeMachine/EventsView.tsx
@@ -6,7 +6,8 @@ import type { Event } from './types';
 import { type TimeMachineLabels, defaultTimeMachineLabels } from './TimeMachineLabels';
 import { Properties } from './Properties';
 
-interface EventsViewParts {
+/** Stable part attributes for {@link EventsView}. */
+export interface EventsViewParts {
     timeline?: HTMLAttributes<HTMLDivElement>;
     event?: HTMLAttributes<HTMLElement>;
     separator?: HTMLAttributes<HTMLDivElement>;
@@ -15,7 +16,8 @@ interface EventsViewParts {
     content?: HTMLAttributes<HTMLDivElement>;
 }
 
-interface EventsViewProps {
+/** Props for the standalone, localized event timeline. */
+export interface EventsViewProps {
     events: Event[];
     className?: string;
     pt?: EventsViewParts;
@@ -58,12 +60,17 @@ export const EventsView = ({
         return () => container.removeEventListener('scroll', updateScrollState);
     }, [events.length]);
 
+    const scrollBehavior = (): ScrollBehavior =>
+        window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth';
     const scrollToTop = () =>
-        containerRef.current?.scrollTo({ top: 0, behavior: 'smooth' });
+        containerRef.current?.scrollTo({ top: 0, behavior: scrollBehavior() });
     const scrollToBottom = () => {
         const container = containerRef.current;
         if (container)
-            container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' });
+            container.scrollTo({
+                top: container.scrollHeight,
+                behavior: scrollBehavior(),
+            });
     };
 
     return (
diff --git a/Source/TimeMachine/index.ts b/Source/TimeMachine/index.ts
index af57f68c..2866f6a7 100644
--- a/Source/TimeMachine/index.ts
+++ b/Source/TimeMachine/index.ts
@@ -5,6 +5,7 @@ export { TimeMachine } from './TimeMachine';
 export type { TimeMachineProps } from './TimeMachine';
 export { ReadModelView } from './ReadModelView';
 export { EventsView } from './EventsView';
+export type { EventsViewParts, EventsViewProps } from './EventsView';
 export { defaultTimeMachineLabels } from './TimeMachineLabels';
 export type { TimeMachineLabels } from './TimeMachineLabels';
 export { Properties } from './Properties';
diff --git a/Source/Toolbar/Toolbar.css b/Source/Toolbar/Toolbar.css
index b77aa0c2..4b036193 100644
--- a/Source/Toolbar/Toolbar.css
+++ b/Source/Toolbar/Toolbar.css
@@ -378,4 +378,8 @@
         transition: none !important;
         animation: none !important;
     }
+
+    .toolbar-fanout-panel--visible {
+        clip-path: none !important;
+    }
 }
diff --git a/Source/scripts/verify-package-archive.mjs b/Source/scripts/verify-package-archive.mjs
index e25556fb..178feefe 100644
--- a/Source/scripts/verify-package-archive.mjs
+++ b/Source/scripts/verify-package-archive.mjs
@@ -52,6 +52,8 @@ for (const expected of [
     'John Walley',
     'Gobalsky Labs Ltd.',
     'Microsoft Corporation',
+    'Tailwind CSS generated theme and utility output',
+    'Tailwind Labs, Inc.',
     'Patrick Hand font',
 ]) {
     if (!notices.includes(expected)) {

From 7a62e2364f5f970d50087fbd31bd657a451be834 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Mon, 24 Aug 2026 00:53:40 +0200
Subject: [PATCH 029/267] Clarify explicit themes and Ada elevation

Make explicit light schemes override ambient dark without blocking an explicitly dark subtree, add selector regression coverage, and map Ada's scheme-aware elevation tokens.
---
 Documentation/Styling/baseline-theme.md       |  2 +-
 Documentation/migration.md                    |  4 +++
 .../when_resolving_explicit_color_schemes.ts  | 34 +++++++++++++++++++
 Source/theme.css                              | 11 ++++--
 4 files changed, 48 insertions(+), 3 deletions(-)
 create mode 100644 Source/for_theme/when_resolving_explicit_color_schemes.ts

diff --git a/Documentation/Styling/baseline-theme.md b/Documentation/Styling/baseline-theme.md
index 39ba1f6c..226b453f 100644
--- a/Documentation/Styling/baseline-theme.md
+++ b/Documentation/Styling/baseline-theme.md
@@ -23,7 +23,7 @@ Apply `cratis-dark` to the document element:
 document.documentElement.classList.toggle('cratis-dark', darkMode);
 ```
 
-Use `cratis-light` to keep the light values when the operating system prefers dark. Without either explicit class, the baseline follows `prefers-color-scheme`.
+Use `cratis-light` to keep the light values when the operating system prefers dark. Explicit light wins over an ambient/root `cratis-dark`, while a subtree with its own `cratis-dark` remains dark. A root `cratis-light` also keeps ordinary `.cratis-theme` descendants light without repeating the class. Without either explicit class, the baseline follows `prefers-color-scheme`.
 
 ## Theme one subtree
 
diff --git a/Documentation/migration.md b/Documentation/migration.md
index 017b7a55..71636558 100644
--- a/Documentation/migration.md
+++ b/Documentation/migration.md
@@ -312,6 +312,10 @@ import './ada-components.css';
     --cratis-border-radius: 6px;
     --cratis-focus-ring: var(--ada-ring-focus);
     --cratis-maskbg: var(--ada-scrim);
+    --cratis-shadow-subtle: var(--ada-shadow-sm);
+    --cratis-shadow-overlay: var(--ada-shadow-md);
+    --cratis-shadow-dialog: var(--ada-shadow-xl);
+    --cratis-shadow-toast: var(--ada-shadow-md);
 }
 ```
 
diff --git a/Source/for_theme/when_resolving_explicit_color_schemes.ts b/Source/for_theme/when_resolving_explicit_color_schemes.ts
new file mode 100644
index 00000000..4e931825
--- /dev/null
+++ b/Source/for_theme/when_resolving_explicit_color_schemes.ts
@@ -0,0 +1,34 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { readFileSync } from 'node:fs';
+import { expect } from 'chai';
+import postcss from 'postcss';
+import { describe, it } from 'vitest';
+
+const theme = readFileSync(new URL('../theme.css', import.meta.url), 'utf8');
+const selectors = postcss
+    .parse(theme)
+    .nodes.flatMap((node) =>
+        node.type === 'rule' ? node.selectors : [],
+    );
+
+describe('when resolving explicit baseline color schemes', () => {
+    it('should_allow_an_explicit_light_root_to_override_system_dark', () => {
+        expect(selectors).to.include(':root.cratis-light');
+    });
+
+    it('should_keep_ordinary_themed_descendants_light_under_a_light_root', () => {
+        expect(selectors).to.include(
+            ':root.cratis-light .cratis-theme:not(.cratis-dark)',
+        );
+    });
+
+    it('should_allow_an_explicit_light_subtree_under_a_dark_root', () => {
+        expect(selectors).to.include('.cratis-dark .cratis-theme.cratis-light');
+    });
+
+    it('should_keep_an_explicit_dark_subtree_available', () => {
+        expect(selectors).to.include('.cratis-theme.cratis-dark');
+    });
+});
diff --git a/Source/theme.css b/Source/theme.css
index ce6fe0f9..25997151 100644
--- a/Source/theme.css
+++ b/Source/theme.css
@@ -12,8 +12,15 @@
     background-color: var(--cratis-surface-ground);
 }
 
-/* A themed subtree needs its own light defaults because tokens.css is rooted at :root. */
-.cratis-theme {
+/* A themed subtree needs its own light defaults because tokens.css is rooted at :root.
+   Explicit light wins over ambient/root dark; an explicitly dark subtree still wins. */
+.cratis-theme,
+:root.cratis-light,
+:root.cratis-dark.cratis-light,
+:root.cratis-light .cratis-theme:not(.cratis-dark),
+.cratis-theme.cratis-light,
+.cratis-dark .cratis-theme.cratis-light {
+    color-scheme: light;
     --cratis-primary-color: #3b82f6;
     --cratis-primary-color-text: #ffffff;
     --cratis-primary-300: #93c5fd;

From 509cdcf99575ffdd868d4e664e52a3b95cf7ec58 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Mon, 24 Aug 2026 00:56:22 +0200
Subject: [PATCH 030/267] Format final reduced-motion styles

---
 Source/Filter/FilterPanel.css                 |  594 +++---
 Source/PivotViewer/PivotViewer.css            | 1670 +++++++++--------
 .../when_resolving_explicit_color_schemes.ts  |    4 +-
 3 files changed, 1176 insertions(+), 1092 deletions(-)

diff --git a/Source/Filter/FilterPanel.css b/Source/Filter/FilterPanel.css
index 791d816a..b79041f8 100644
--- a/Source/Filter/FilterPanel.css
+++ b/Source/Filter/FilterPanel.css
@@ -7,461 +7,487 @@
  * ----------------------------------------------------------------------- */
 
 .pv-filter-panel {
-  position: fixed;
-  width: min(280px, calc(100% - 2rem));
-  max-height: calc(100vh - 6.5rem);
-  background: linear-gradient(180deg, var(--cratis-surface-card), var(--cratis-surface-ground));
-  border: 1px solid var(--cratis-surface-border);
-  border-radius: 1rem;
-  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
-  backdrop-filter: blur(14px);
-  overflow: hidden;
-  z-index: 12;
-  display: flex;
-  flex-direction: column;
+    position: fixed;
+    width: min(280px, calc(100% - 2rem));
+    max-height: calc(100vh - 6.5rem);
+    background: linear-gradient(
+        180deg,
+        var(--cratis-surface-card),
+        var(--cratis-surface-ground)
+    );
+    border: 1px solid var(--cratis-surface-border);
+    border-radius: 1rem;
+    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
+    backdrop-filter: blur(14px);
+    overflow: hidden;
+    z-index: 12;
+    display: flex;
+    flex-direction: column;
 }
 
 .pv-filter-panel.dragging {
-  cursor: grabbing;
-  user-select: none;
+    cursor: grabbing;
+    user-select: none;
 }
 
 .pv-filter-panel.minimized {
-  max-height: none;
+    max-height: none;
 }
 
 .pv-filter-panel-header {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.75rem 1rem;
-  cursor: grab;
-  background: var(--cratis-surface-section);
-  border-bottom: 1px solid var(--cratis-surface-border);
-  flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1rem;
+    cursor: grab;
+    background: var(--cratis-surface-section);
+    border-bottom: 1px solid var(--cratis-surface-border);
+    flex-shrink: 0;
 }
 
 .pv-filter-panel.dragging .pv-filter-panel-header {
-  cursor: grabbing;
+    cursor: grabbing;
 }
 
 .pv-filter-panel-header h2 {
-  margin: 0;
-  font-size: 0.85rem;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  color: var(--cratis-text-color);
-  flex: 1;
-  pointer-events: none;
+    margin: 0;
+    font-size: 0.85rem;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    color: var(--cratis-text-color);
+    flex: 1;
+    pointer-events: none;
 }
 
 .pv-minimize-btn,
 .pv-close-btn {
-  appearance: none;
-  border: none;
-  border-radius: 0.4rem;
-  width: 1.5rem;
-  height: 1.5rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--cratis-highlight-bg);
-  color: var(--cratis-text-color);
-  font-size: 1rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background 120ms ease;
+    appearance: none;
+    border: none;
+    border-radius: 0.4rem;
+    width: 1.5rem;
+    height: 1.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--cratis-highlight-bg);
+    color: var(--cratis-text-color);
+    font-size: 1rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background 120ms ease;
 }
 
 .pv-minimize-btn:hover,
 .pv-close-btn:hover {
-  background: var(--cratis-surface-hover);
+    background: var(--cratis-surface-hover);
 }
 
 .pv-close-btn {
-  font-size: 1.2rem;
+    font-size: 1.2rem;
 }
 
 .pv-filter-panel-content {
-  overflow: hidden;
-  max-height: 0;
-  opacity: 0;
-  padding: 0 1.25rem;
-  transition: max-height 150ms ease-out, opacity 100ms ease-out, padding 150ms ease-out;
+    overflow: hidden;
+    max-height: 0;
+    opacity: 0;
+    padding: 0 1.25rem;
+    transition:
+        max-height 150ms ease-out,
+        opacity 100ms ease-out,
+        padding 150ms ease-out;
 }
 
 .pv-filter-panel-content.expanded {
-  overflow-y: auto;
-  flex: 1;
-  max-height: 600px;
-  opacity: 1;
-  padding: 1rem 1.25rem 1.25rem;
+    overflow-y: auto;
+    flex: 1;
+    max-height: 600px;
+    opacity: 1;
+    padding: 1rem 1.25rem 1.25rem;
 }
 
 .pv-search {
-  padding-bottom: 1rem;
+    padding-bottom: 1rem;
 }
 
 .pv-search input {
-  width: 100%;
-  padding: 0.65rem 0.85rem;
-  border-radius: 0.75rem;
-  border: 1px solid var(--cratis-surface-border);
-  background: var(--cratis-surface-ground);
-  color: inherit;
-  font-size: 0.95rem;
-  box-shadow: inset 0 1px 0 var(--cratis-surface-border);
+    width: 100%;
+    padding: 0.65rem 0.85rem;
+    border-radius: 0.75rem;
+    border: 1px solid var(--cratis-surface-border);
+    background: var(--cratis-surface-ground);
+    color: inherit;
+    font-size: 0.95rem;
+    box-shadow: inset 0 1px 0 var(--cratis-surface-border);
 }
 
 .pv-search input:focus {
-  outline: none;
-  border-color: var(--cratis-primary-color);
-  box-shadow: var(--cratis-focus-ring);
+    outline: none;
+    border-color: var(--cratis-primary-color);
+    box-shadow: var(--cratis-focus-ring);
 }
 
 .pv-filter-group-search {
-  padding: 0 0 0.5rem 0;
+    padding: 0 0 0.5rem 0;
 }
 
 .pv-filter-group-search input {
-  width: 100%;
-  padding: 0.4rem 0.6rem;
-  border-radius: 0.5rem;
-  border: 1px solid var(--cratis-surface-border);
-  background: var(--cratis-surface-ground);
-  color: inherit;
-  font-size: 0.85rem;
+    width: 100%;
+    padding: 0.4rem 0.6rem;
+    border-radius: 0.5rem;
+    border: 1px solid var(--cratis-surface-border);
+    background: var(--cratis-surface-ground);
+    color: inherit;
+    font-size: 0.85rem;
 }
 
 .pv-filter-group-search input:focus {
-  outline: none;
-  border-color: var(--cratis-primary-color);
-  box-shadow: var(--cratis-focus-ring);
+    outline: none;
+    border-color: var(--cratis-primary-color);
+    box-shadow: var(--cratis-focus-ring);
 }
 
 .pv-filter-groups {
-  display: flex;
-  flex-direction: column;
-  gap: 0.85rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.85rem;
 }
 
 .pv-filter {
-  background: var(--cratis-surface-overlay);
-  border: 1px solid var(--cratis-surface-border);
-  border-radius: 0.85rem;
-  padding: 0.75rem 0.85rem;
-  transition: border-color 180ms ease, box-shadow 180ms ease;
+    background: var(--cratis-surface-overlay);
+    border: 1px solid var(--cratis-surface-border);
+    border-radius: 0.85rem;
+    padding: 0.75rem 0.85rem;
+    transition:
+        border-color 180ms ease,
+        box-shadow 180ms ease;
 }
 
 .pv-filter.expanded {
-  border-color: var(--cratis-primary-color);
-  box-shadow: 0 15px 38px rgba(0, 0, 0, 0.3);
+    border-color: var(--cratis-primary-color);
+    box-shadow: 0 15px 38px rgba(0, 0, 0, 0.3);
 }
 
 .pv-filter-trigger {
-  display: flex;
-  width: 100%;
-  align-items: center;
-  justify-content: space-between;
-  background: none;
-  border: none;
-  color: inherit;
-  padding: 0;
-  cursor: pointer;
-  font-size: 0.82rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: space-between;
+    background: none;
+    border: none;
+    color: inherit;
+    padding: 0;
+    cursor: pointer;
+    font-size: 0.82rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
 }
 
 .pv-filter-label {
-  display: flex;
-  align-items: center;
-  gap: 0.4rem;
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
 }
 
 .pv-filter-trigger-meta {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
 }
 
 .pv-filter-count {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 1.5rem;
-  padding: 0.15rem 0.45rem;
-  border-radius: 999px;
-  background: var(--cratis-highlight-bg);
-  color: var(--cratis-text-color);
-  font-size: 0.7rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 1.5rem;
+    padding: 0.15rem 0.45rem;
+    border-radius: 999px;
+    background: var(--cratis-highlight-bg);
+    color: var(--cratis-text-color);
+    font-size: 0.7rem;
 }
 
 .pv-filter-clear-header {
-  appearance: none;
-  border: none;
-  width: 1.5rem;
-  height: 1.5rem;
-  border-radius: 50%;
-  background: var(--cratis-highlight-bg);
-  color: var(--cratis-text-color);
-  font-size: 1.2rem;
-  line-height: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: background 160ms ease, transform 120ms ease;
-  padding: 0;
+    appearance: none;
+    border: none;
+    width: 1.5rem;
+    height: 1.5rem;
+    border-radius: 50%;
+    background: var(--cratis-highlight-bg);
+    color: var(--cratis-text-color);
+    font-size: 1.2rem;
+    line-height: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition:
+        background 160ms ease,
+        transform 120ms ease;
+    padding: 0;
 }
 
 .pv-filter-clear-header:hover {
-  background: var(--cratis-surface-hover);
-  transform: scale(1.1);
+    background: var(--cratis-surface-hover);
+    transform: scale(1.1);
 }
 
 .pv-filter-clear-header:active {
-  transform: scale(0.95);
+    transform: scale(0.95);
 }
 
 .pv-filter-chevron {
-  width: 0.65rem;
-  height: 0.65rem;
-  border-right: 2px solid var(--cratis-text-color);
-  border-bottom: 2px solid var(--cratis-text-color);
-  transform: rotate(45deg);
-  transition: transform 180ms ease;
+    width: 0.65rem;
+    height: 0.65rem;
+    border-right: 2px solid var(--cratis-text-color);
+    border-bottom: 2px solid var(--cratis-text-color);
+    transform: rotate(45deg);
+    transition: transform 180ms ease;
 }
 
 .pv-filter.expanded .pv-filter-chevron {
-  transform: rotate(225deg);
+    transform: rotate(225deg);
 }
 
 .pv-filter-content {
-  overflow: hidden;
-  max-height: 0;
-  opacity: 0;
-  margin-top: 0;
-  padding-top: 0;
-  border-top: 1px solid transparent;
-  transition: max-height 120ms ease-out, opacity 80ms ease-out, margin-top 120ms ease-out, padding-top 120ms ease-out, border-color 120ms ease-out;
+    overflow: hidden;
+    max-height: 0;
+    opacity: 0;
+    margin-top: 0;
+    padding-top: 0;
+    border-top: 1px solid transparent;
+    transition:
+        max-height 120ms ease-out,
+        opacity 80ms ease-out,
+        margin-top 120ms ease-out,
+        padding-top 120ms ease-out,
+        border-color 120ms ease-out;
 }
 
 .pv-filter-content.expanded {
-  max-height: 350px;
-  opacity: 1;
-  margin-top: 0.75rem;
-  padding-top: 0.75rem;
-  border-top-color: var(--cratis-surface-border);
-  overflow-y: auto;
+    max-height: 350px;
+    opacity: 1;
+    margin-top: 0.75rem;
+    padding-top: 0.75rem;
+    border-top-color: var(--cratis-surface-border);
+    overflow-y: auto;
 }
 
 .pv-filter-content ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: grid;
-  gap: 0.45rem;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: grid;
+    gap: 0.45rem;
 }
 
 .pv-filter-content li label {
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  gap: 0.6rem;
-  align-items: center;
-  padding: 0.45rem 0.5rem;
-  border-radius: 0.55rem;
-  border: 1px solid transparent;
-  cursor: pointer;
-  transition: background 160ms ease, border-color 160ms ease;
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    gap: 0.6rem;
+    align-items: center;
+    padding: 0.45rem 0.5rem;
+    border-radius: 0.55rem;
+    border: 1px solid transparent;
+    cursor: pointer;
+    transition:
+        background 160ms ease,
+        border-color 160ms ease;
 }
 
 .pv-filter-content li label:hover {
-  background: var(--cratis-surface-hover);
+    background: var(--cratis-surface-hover);
 }
 
 .pv-filter-content input[type='checkbox'],
 .pv-filter-content input[type='radio'] {
-  accent-color: var(--cratis-primary-color);
+    accent-color: var(--cratis-primary-color);
 }
 
 .pv-filter-content li label span {
-  font-size: 0.85rem;
+    font-size: 0.85rem;
 }
 
 .pv-filter-clear {
-  margin-top: 0.75rem;
-  appearance: none;
-  border: none;
-  border-radius: 0.55rem;
-  padding: 0.4rem 0.75rem;
-  background: var(--cratis-highlight-bg);
-  color: var(--cratis-text-color);
-  font-size: 0.72rem;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  cursor: pointer;
+    margin-top: 0.75rem;
+    appearance: none;
+    border: none;
+    border-radius: 0.55rem;
+    padding: 0.4rem 0.75rem;
+    background: var(--cratis-highlight-bg);
+    color: var(--cratis-text-color);
+    font-size: 0.72rem;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    cursor: pointer;
 }
 
 .pv-option-count {
-  font-feature-settings: "tnum";
-  font-variant-numeric: tabular-nums;
-  color: var(--cratis-text-color-secondary);
-  font-size: 0.75rem;
+    font-feature-settings: 'tnum';
+    font-variant-numeric: tabular-nums;
+    color: var(--cratis-text-color-secondary);
+    font-size: 0.75rem;
 }
 
 /* Filter Dropdown (anchor-positioned panel) */
 .pv-filter-dropdown {
-  position: fixed;
-  width: min(320px, calc(100vw - 2rem));
-  max-height: calc(100vh - 8rem);
-  background: linear-gradient(180deg, var(--cratis-surface-card), var(--cratis-surface-ground));
-  border: 1px solid var(--cratis-surface-border);
-  border-radius: 0.85rem;
-  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
-  backdrop-filter: blur(16px);
-  overflow: hidden;
-  z-index: 1000;
-  display: flex;
-  flex-direction: column;
-  will-change: opacity, transform;
-  contain: layout;
+    position: fixed;
+    width: min(320px, calc(100vw - 2rem));
+    max-height: calc(100vh - 8rem);
+    background: linear-gradient(
+        180deg,
+        var(--cratis-surface-card),
+        var(--cratis-surface-ground)
+    );
+    border: 1px solid var(--cratis-surface-border);
+    border-radius: 0.85rem;
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
+    backdrop-filter: blur(16px);
+    overflow: hidden;
+    z-index: 1000;
+    display: flex;
+    flex-direction: column;
+    will-change: opacity, transform;
+    contain: layout;
 }
 
 .pv-filter-dropdown-content {
-  padding: 1rem;
-  overflow-y: auto;
-  flex: 1;
+    padding: 1rem;
+    overflow-y: auto;
+    flex: 1;
 }
 
 /* Range Histogram Filter */
 .pv-range-histogram {
-  padding: 0.5rem 0;
+    padding: 0.5rem 0;
 }
 
 .pv-histogram-bars {
-  display: flex;
-  align-items: flex-end;
-  gap: 2px;
-  height: 80px;
-  padding: 0 2px;
-  margin-bottom: 0.5rem;
+    display: flex;
+    align-items: flex-end;
+    gap: 2px;
+    height: 80px;
+    padding: 0 2px;
+    margin-bottom: 0.5rem;
 }
 
 .pv-histogram-bar {
-  flex: 1;
-  min-width: 8px;
-  background: var(--cratis-highlight-bg);
-  border: none;
-  border-radius: 2px 2px 0 0;
-  cursor: pointer;
-  transition: background 160ms ease, transform 120ms ease;
-  padding: 0;
+    flex: 1;
+    min-width: 8px;
+    background: var(--cratis-highlight-bg);
+    border: none;
+    border-radius: 2px 2px 0 0;
+    cursor: pointer;
+    transition:
+        background 160ms ease,
+        transform 120ms ease;
+    padding: 0;
 }
 
 .pv-histogram-bar:hover {
-  background: var(--cratis-surface-hover);
-  transform: scaleY(1.02);
+    background: var(--cratis-surface-hover);
+    transform: scaleY(1.02);
 }
 
 .pv-histogram-bar.in-range {
-  background: var(--cratis-primary-color);
+    background: var(--cratis-primary-color);
 }
 
 .pv-histogram-bar.partial {
-  background: var(--cratis-highlight-bg);
+    background: var(--cratis-highlight-bg);
 }
 
 .pv-range-slider {
-  position: relative;
-  height: 24px;
-  margin: 0.5rem 0;
+    position: relative;
+    height: 24px;
+    margin: 0.5rem 0;
 }
 
 .pv-range-track {
-  position: absolute;
-  top: 50%;
-  left: 0;
-  right: 0;
-  height: 4px;
-  background: var(--cratis-surface-border);
-  border-radius: 2px;
-  transform: translateY(-50%);
+    position: absolute;
+    top: 50%;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: var(--cratis-surface-border);
+    border-radius: 2px;
+    transform: translateY(-50%);
 }
 
 .pv-range-selection {
-  position: absolute;
-  top: 50%;
-  height: 4px;
-  background: var(--cratis-primary-color);
-  border-radius: 2px;
-  transform: translateY(-50%);
-  cursor: grab;
+    position: absolute;
+    top: 50%;
+    height: 4px;
+    background: var(--cratis-primary-color);
+    border-radius: 2px;
+    transform: translateY(-50%);
+    cursor: grab;
 }
 
 .pv-range-selection:active {
-  cursor: grabbing;
+    cursor: grabbing;
 }
 
 .pv-range-handle {
-  position: absolute;
-  top: 50%;
-  width: 16px;
-  height: 16px;
-  background: var(--cratis-primary-color);
-  border: 2px solid var(--cratis-text-color);
-  border-radius: 50%;
-  transform: translate(-50%, -50%);
-  cursor: ew-resize;
-  transition: transform 120ms ease, box-shadow 120ms ease;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    position: absolute;
+    top: 50%;
+    width: 16px;
+    height: 16px;
+    background: var(--cratis-primary-color);
+    border: 2px solid var(--cratis-text-color);
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+    cursor: ew-resize;
+    transition:
+        transform 120ms ease,
+        box-shadow 120ms ease;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
 }
 
 .pv-range-handle:hover {
-  transform: translate(-50%, -50%) scale(1.15);
-  box-shadow: 0 4px 12px var(--cratis-primary-color);
+    transform: translate(-50%, -50%) scale(1.15);
+    box-shadow: 0 4px 12px var(--cratis-primary-color);
 }
 
 .pv-range-labels {
-  display: flex;
-  justify-content: space-between;
-  font-size: 0.75rem;
-  color: var(--cratis-text-color-secondary);
-  font-variant-numeric: tabular-nums;
+    display: flex;
+    justify-content: space-between;
+    font-size: 0.75rem;
+    color: var(--cratis-text-color-secondary);
+    font-variant-numeric: tabular-nums;
 }
 
 .pv-range-clear {
-  margin-top: 0.75rem;
-  appearance: none;
-  border: none;
-  border-radius: 0.55rem;
-  padding: 0.4rem 0.75rem;
-  background: var(--cratis-highlight-bg);
-  color: var(--cratis-text-color);
-  font-size: 0.72rem;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  cursor: pointer;
-  width: 100%;
+    margin-top: 0.75rem;
+    appearance: none;
+    border: none;
+    border-radius: 0.55rem;
+    padding: 0.4rem 0.75rem;
+    background: var(--cratis-highlight-bg);
+    color: var(--cratis-text-color);
+    font-size: 0.72rem;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    cursor: pointer;
+    width: 100%;
 }
 
 .pv-range-clear:hover {
-  background: var(--cratis-surface-hover);
+    background: var(--cratis-surface-hover);
 }
 
 @media (max-width: 900px) {
-  .pv-filter-panel {
-    width: calc(100% - 2.5rem);
-    left: 1.25rem;
-    right: 1.25rem;
-  }
+    .pv-filter-panel {
+        width: calc(100% - 2.5rem);
+        left: 1.25rem;
+        right: 1.25rem;
+    }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  :where(.pv-filter-panel, .pv-filter-dropdown),
-  :where(.pv-filter-panel, .pv-filter-dropdown) * {
-    transition: none !important;
-    animation: none !important;
-  }
+    :where(.pv-filter-panel, .pv-filter-dropdown),
+    :where(.pv-filter-panel, .pv-filter-dropdown) * {
+        transition: none !important;
+        animation: none !important;
+    }
 }
diff --git a/Source/PivotViewer/PivotViewer.css b/Source/PivotViewer/PivotViewer.css
index 76dfe53c..0dbebd53 100644
--- a/Source/PivotViewer/PivotViewer.css
+++ b/Source/PivotViewer/PivotViewer.css
@@ -1,1332 +1,1392 @@
 .pivot-viewer {
-  color-scheme: dark;
-  position: relative;
-  /* CRITICAL: Don't set explicit height - let parent control it via container constraints */
-  display: flex;
-  flex-direction: column;
-  min-height: 0; /* allow children to size without forcing overflow */
-  max-height: 100%; /* respect parent height if set */
-  width: 100%;
-  /* Keep root neutral; move visual background to the viewport so it never exceeds the container */
-  background: var(--cratis-surface-ground);
-  color: var(--cratis-text-color);
-  overflow: hidden;
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-  /* Ensure we shrink within flex parent */
-  flex: 1 1 0%;
+    color-scheme: dark;
+    position: relative;
+    /* CRITICAL: Don't set explicit height - let parent control it via container constraints */
+    display: flex;
+    flex-direction: column;
+    min-height: 0; /* allow children to size without forcing overflow */
+    max-height: 100%; /* respect parent height if set */
+    width: 100%;
+    /* Keep root neutral; move visual background to the viewport so it never exceeds the container */
+    background: var(--cratis-surface-ground);
+    color: var(--cratis-text-color);
+    overflow: hidden;
+    font-family:
+        'Inter',
+        -apple-system,
+        BlinkMacSystemFont,
+        'Segoe UI',
+        sans-serif;
+    /* Ensure we shrink within flex parent */
+    flex: 1 1 0%;
 }
 
 .pv-filter-panel {
-  position: fixed;
-  width: min(280px, calc(100% - 2rem));
-  max-height: calc(100vh - 6.5rem);
-  background: linear-gradient(180deg, var(--cratis-surface-card), var(--cratis-surface-ground));
-  border: 1px solid var(--cratis-surface-border);
-  border-radius: 1rem;
-  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
-  backdrop-filter: blur(14px);
-  overflow: hidden;
-  z-index: 12;
-  display: flex;
-  flex-direction: column;
+    position: fixed;
+    width: min(280px, calc(100% - 2rem));
+    max-height: calc(100vh - 6.5rem);
+    background: linear-gradient(
+        180deg,
+        var(--cratis-surface-card),
+        var(--cratis-surface-ground)
+    );
+    border: 1px solid var(--cratis-surface-border);
+    border-radius: 1rem;
+    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
+    backdrop-filter: blur(14px);
+    overflow: hidden;
+    z-index: 12;
+    display: flex;
+    flex-direction: column;
 }
 
 .pv-filter-panel.dragging {
-  cursor: grabbing;
-  user-select: none;
+    cursor: grabbing;
+    user-select: none;
 }
 
 .pv-filter-panel.minimized {
-  max-height: none;
+    max-height: none;
 }
 
 .pv-filter-panel-header {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.75rem 1rem;
-  cursor: grab;
-  background: var(--cratis-surface-section);
-  border-bottom: 1px solid var(--cratis-surface-border);
-  flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1rem;
+    cursor: grab;
+    background: var(--cratis-surface-section);
+    border-bottom: 1px solid var(--cratis-surface-border);
+    flex-shrink: 0;
 }
 
 .pv-filter-panel.dragging .pv-filter-panel-header {
-  cursor: grabbing;
+    cursor: grabbing;
 }
 
 .pv-filter-panel-header h2 {
-  margin: 0;
-  font-size: 0.85rem;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  color: var(--cratis-text-color);
-  flex: 1;
-  pointer-events: none;
+    margin: 0;
+    font-size: 0.85rem;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    color: var(--cratis-text-color);
+    flex: 1;
+    pointer-events: none;
 }
 
 .pv-minimize-btn,
 .pv-close-btn {
-  appearance: none;
-  border: none;
-  border-radius: 0.4rem;
-  width: 1.5rem;
-  height: 1.5rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--cratis-highlight-bg);
-  color: var(--cratis-text-color);
-  font-size: 1rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background 120ms ease;
+    appearance: none;
+    border: none;
+    border-radius: 0.4rem;
+    width: 1.5rem;
+    height: 1.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--cratis-highlight-bg);
+    color: var(--cratis-text-color);
+    font-size: 1rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background 120ms ease;
 }
 
 .pv-minimize-btn:hover,
 .pv-close-btn:hover {
-  background: var(--cratis-surface-hover);
+    background: var(--cratis-surface-hover);
 }
 
 .pv-close-btn {
-  font-size: 1.2rem;
+    font-size: 1.2rem;
 }
 
 .pv-filter-panel-content {
-  overflow: hidden;
-  max-height: 0;
-  opacity: 0;
-  padding: 0 1.25rem;
-  transition: max-height 150ms ease-out, opacity 100ms ease-out, padding 150ms ease-out;
+    overflow: hidden;
+    max-height: 0;
+    opacity: 0;
+    padding: 0 1.25rem;
+    transition:
+        max-height 150ms ease-out,
+        opacity 100ms ease-out,
+        padding 150ms ease-out;
 }
 
 .pv-filter-panel-content.expanded {
-  overflow-y: auto;
-  flex: 1;
-  max-height: 600px;
-  opacity: 1;
-  padding: 1rem 1.25rem 1.25rem;
+    overflow-y: auto;
+    flex: 1;
+    max-height: 600px;
+    opacity: 1;
+    padding: 1rem 1.25rem 1.25rem;
 }
 
 .pv-search {
-  padding-bottom: 1rem;
+    padding-bottom: 1rem;
 }
 
 .pv-search input {
-  width: 100%;
-  padding: 0.65rem 0.85rem;
-  border-radius: 0.75rem;
-  border: 1px solid var(--cratis-surface-border);
-  background: var(--cratis-surface-ground);
-  color: inherit;
-  font-size: 0.95rem;
-  box-shadow: inset 0 1px 0 var(--cratis-surface-border);
+    width: 100%;
+    padding: 0.65rem 0.85rem;
+    border-radius: 0.75rem;
+    border: 1px solid var(--cratis-surface-border);
+    background: var(--cratis-surface-ground);
+    color: inherit;
+    font-size: 0.95rem;
+    box-shadow: inset 0 1px 0 var(--cratis-surface-border);
 }
 
 .pv-search input:focus {
-  outline: none;
-  border-color: var(--cratis-primary-color);
-  box-shadow: var(--cratis-focus-ring);
+    outline: none;
+    border-color: var(--cratis-primary-color);
+    box-shadow: var(--cratis-focus-ring);
 }
 
-
 .pv-filter-groups {
-  display: flex;
-  flex-direction: column;
-  gap: 0.85rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.85rem;
 }
 
 .pv-filter {
-  background: var(--cratis-surface-overlay);
-  border: 1px solid var(--cratis-surface-border);
-  border-radius: 0.85rem;
-  padding: 0.75rem 0.85rem;
-  transition: border-color 180ms ease, box-shadow 180ms ease;
+    background: var(--cratis-surface-overlay);
+    border: 1px solid var(--cratis-surface-border);
+    border-radius: 0.85rem;
+    padding: 0.75rem 0.85rem;
+    transition:
+        border-color 180ms ease,
+        box-shadow 180ms ease;
 }
 
 .pv-filter.expanded {
-  border-color: var(--cratis-primary-color);
-  box-shadow: 0 15px 38px rgba(0, 0, 0, 0.3);
+    border-color: var(--cratis-primary-color);
+    box-shadow: 0 15px 38px rgba(0, 0, 0, 0.3);
 }
 
 .pv-filter-trigger {
-  display: flex;
-  width: 100%;
-  align-items: center;
-  justify-content: space-between;
-  background: none;
-  border: none;
-  color: inherit;
-  padding: 0;
-  cursor: pointer;
-  font-size: 0.82rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: space-between;
+    background: none;
+    border: none;
+    color: inherit;
+    padding: 0;
+    cursor: pointer;
+    font-size: 0.82rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
 }
 
 .pv-filter-label {
-  display: flex;
-  align-items: center;
-  gap: 0.4rem;
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
 }
 
 .pv-filter-trigger-meta {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
 }
 
 .pv-filter-count {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 1.5rem;
-  padding: 0.15rem 0.45rem;
-  border-radius: 999px;
-  background: var(--cratis-highlight-bg);
-  color: var(--cratis-text-color);
-  font-size: 0.7rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 1.5rem;
+    padding: 0.15rem 0.45rem;
+    border-radius: 999px;
+    background: var(--cratis-highlight-bg);
+    color: var(--cratis-text-color);
+    font-size: 0.7rem;
 }
 
 .pv-filter-chevron {
-  width: 0.65rem;
-  height: 0.65rem;
-  border-right: 2px solid var(--cratis-text-color);
-  border-bottom: 2px solid var(--cratis-text-color);
-  transform: rotate(45deg);
-  transition: transform 180ms ease;
+    width: 0.65rem;
+    height: 0.65rem;
+    border-right: 2px solid var(--cratis-text-color);
+    border-bottom: 2px solid var(--cratis-text-color);
+    transform: rotate(45deg);
+    transition: transform 180ms ease;
 }
 
 .pv-filter.expanded .pv-filter-chevron {
-  transform: rotate(225deg);
+    transform: rotate(225deg);
 }
 
 .pv-filter-content {
-  overflow: hidden;
-  max-height: 0;
-  opacity: 0;
-  margin-top: 0;
-  padding-top: 0;
-  border-top: 1px solid transparent;
-  transition: max-height 120ms ease-out, opacity 80ms ease-out, margin-top 120ms ease-out, padding-top 120ms ease-out, border-color 120ms ease-out;
+    overflow: hidden;
+    max-height: 0;
+    opacity: 0;
+    margin-top: 0;
+    padding-top: 0;
+    border-top: 1px solid transparent;
+    transition:
+        max-height 120ms ease-out,
+        opacity 80ms ease-out,
+        margin-top 120ms ease-out,
+        padding-top 120ms ease-out,
+        border-color 120ms ease-out;
 }
 
 .pv-filter-content.expanded {
-  max-height: 350px;
-  opacity: 1;
-  margin-top: 0.75rem;
-  padding-top: 0.75rem;
-  border-top-color: var(--cratis-surface-border);
-  overflow-y: auto;
+    max-height: 350px;
+    opacity: 1;
+    margin-top: 0.75rem;
+    padding-top: 0.75rem;
+    border-top-color: var(--cratis-surface-border);
+    overflow-y: auto;
 }
 
 .pv-filter-content ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: grid;
-  gap: 0.45rem;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: grid;
+    gap: 0.45rem;
 }
 
 .pv-filter-content li label {
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  gap: 0.6rem;
-  align-items: center;
-  padding: 0.45rem 0.5rem;
-  border-radius: 0.55rem;
-  border: 1px solid transparent;
-  cursor: pointer;
-  transition: background 160ms ease, border-color 160ms ease;
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    gap: 0.6rem;
+    align-items: center;
+    padding: 0.45rem 0.5rem;
+    border-radius: 0.55rem;
+    border: 1px solid transparent;
+    cursor: pointer;
+    transition:
+        background 160ms ease,
+        border-color 160ms ease;
 }
 
 .pv-filter-content li label:hover {
-  background: var(--cratis-surface-hover);
+    background: var(--cratis-surface-hover);
 }
 
 .pv-filter-content input[type='checkbox'],
 .pv-filter-content input[type='radio'] {
-  accent-color: var(--cratis-primary-color);
+    accent-color: var(--cratis-primary-color);
 }
 
 .pv-filter-content li label span {
-  font-size: 0.85rem;
+    font-size: 0.85rem;
 }
 
 .pv-filter-clear {
-  margin-top: 0.75rem;
-  appearance: none;
-  border: none;
-  border-radius: 0.55rem;
-  padding: 0.4rem 0.75rem;
-  background: var(--cratis-highlight-bg);
-  color: var(--cratis-text-color);
-  font-size: 0.72rem;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  cursor: pointer;
+    margin-top: 0.75rem;
+    appearance: none;
+    border: none;
+    border-radius: 0.55rem;
+    padding: 0.4rem 0.75rem;
+    background: var(--cratis-highlight-bg);
+    color: var(--cratis-text-color);
+    font-size: 0.72rem;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    cursor: pointer;
 }
 
 .pv-option-count {
-  font-feature-settings: "tnum";
-  font-variant-numeric: tabular-nums;
-  color: var(--cratis-text-color-secondary);
-  font-size: 0.75rem;
+    font-feature-settings: 'tnum';
+    font-variant-numeric: tabular-nums;
+    color: var(--cratis-text-color-secondary);
+    font-size: 0.75rem;
 }
 
 .pv-main {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  flex: 1 1 auto; /* grow within pivot-viewer */
-  height: auto;
-  padding-left: 0;
-  overflow: hidden;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    flex: 1 1 auto; /* grow within pivot-viewer */
+    height: auto;
+    padding-left: 0;
+    overflow: hidden;
 }
 
 .pv-toolbar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0.75rem 1.75rem;
-  border-bottom: 1px solid var(--cratis-surface-border);
-  background: var(--cratis-surface-section);
-  backdrop-filter: blur(12px);
-  position: sticky;
-  top: 0;
-  z-index: 15;
-  flex-shrink: 0;
-  min-height: 3.5rem;
-  height: 3.5rem;
-  overflow: visible;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.75rem 1.75rem;
+    border-bottom: 1px solid var(--cratis-surface-border);
+    background: var(--cratis-surface-section);
+    backdrop-filter: blur(12px);
+    position: sticky;
+    top: 0;
+    z-index: 15;
+    flex-shrink: 0;
+    min-height: 3.5rem;
+    height: 3.5rem;
+    overflow: visible;
 }
 
 .pv-toolbar-left,
 .pv-toolbar-right {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.75rem;
-  flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.75rem;
+    flex-shrink: 0;
 }
 
 .pv-toolbar-right {
-  gap: 1rem;
+    gap: 1rem;
 }
 
 .pv-toolbar h1 {
-  margin: 0;
-  font-size: 1.1rem;
-  letter-spacing: -0.01em;
-  white-space: nowrap;
+    margin: 0;
+    font-size: 1.1rem;
+    letter-spacing: -0.01em;
+    white-space: nowrap;
 }
 
 .pv-count {
-  margin-left: 1rem;
-  display: inline-flex;
-  align-items: center;
-  gap: 0.35rem;
-  padding: 0.3rem 0.65rem;
-  border-radius: 999px;
-  background: var(--cratis-highlight-bg);
-  font-size: 0.8rem;
-  color: var(--cratis-text-color);
+    margin-left: 1rem;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    padding: 0.3rem 0.65rem;
+    border-radius: 999px;
+    background: var(--cratis-highlight-bg);
+    font-size: 0.8rem;
+    color: var(--cratis-text-color);
 }
 
 .pv-filter-button {
-  appearance: none;
-  border: none;
-  border-radius: 999px;
-  padding: 0.45rem 1rem;
-  background: var(--cratis-highlight-bg);
-  color: var(--cratis-text-color);
-  font-size: 0.8rem;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  cursor: pointer;
-  transition: background 180ms ease, box-shadow 180ms ease;
+    appearance: none;
+    border: none;
+    border-radius: 999px;
+    padding: 0.45rem 1rem;
+    background: var(--cratis-highlight-bg);
+    color: var(--cratis-text-color);
+    font-size: 0.8rem;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    cursor: pointer;
+    transition:
+        background 180ms ease,
+        box-shadow 180ms ease;
 }
 
 .pv-filter-button.active,
 .pv-filter-button:hover {
-  background: var(--cratis-surface-hover);
-  box-shadow: var(--cratis-focus-ring);
+    background: var(--cratis-surface-hover);
+    box-shadow: var(--cratis-focus-ring);
 }
 
 /* Filter Icon Button */
 .pv-filter-icon-button {
-  position: relative;
-  appearance: none;
-  border: none;
-  border-radius: 0.5rem;
-  width: 2.25rem;
-  height: 2.25rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--cratis-highlight-bg);
-  color: var(--cratis-text-color);
-  cursor: pointer;
-  transition: background 180ms ease, box-shadow 180ms ease;
+    position: relative;
+    appearance: none;
+    border: none;
+    border-radius: 0.5rem;
+    width: 2.25rem;
+    height: 2.25rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--cratis-highlight-bg);
+    color: var(--cratis-text-color);
+    cursor: pointer;
+    transition:
+        background 180ms ease,
+        box-shadow 180ms ease;
 }
 
 .pv-filter-icon-button:hover {
-  background: var(--cratis-surface-hover);
+    background: var(--cratis-surface-hover);
 }
 
 .pv-filter-icon-button.active {
-  background: var(--cratis-surface-hover);
-  box-shadow: var(--cratis-focus-ring);
+    background: var(--cratis-surface-hover);
+    box-shadow: var(--cratis-focus-ring);
 }
 
 .pv-filter-badge {
-  position: absolute;
-  top: -4px;
-  right: -4px;
-  min-width: 1.1rem;
-  height: 1.1rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 999px;
-  background: var(--cratis-action-background);
-  color: var(--cratis-action-text);
-  font-size: 0.65rem;
-  font-weight: 600;
-  padding: 0 0.25rem;
+    position: absolute;
+    top: -4px;
+    right: -4px;
+    min-width: 1.1rem;
+    height: 1.1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 999px;
+    background: var(--cratis-action-background);
+    color: var(--cratis-action-text);
+    font-size: 0.65rem;
+    font-weight: 600;
+    padding: 0 0.25rem;
 }
 
 /* Filter Dropdown */
 .pv-filter-dropdown {
-  position: fixed;
-  width: min(320px, calc(100vw - 2rem));
-  max-height: calc(100vh - 8rem);
-  background: linear-gradient(180deg, var(--cratis-surface-card), var(--cratis-surface-ground));
-  border: 1px solid var(--cratis-surface-border);
-  border-radius: 0.85rem;
-  box-shadow: var(--cratis-shadow-overlay);
-  backdrop-filter: blur(16px);
-  overflow: hidden;
-  z-index: var(--cratis-z-index-filter);
-  display: flex;
-  flex-direction: column;
-  will-change: opacity, transform;
-  contain: layout;
+    position: fixed;
+    width: min(320px, calc(100vw - 2rem));
+    max-height: calc(100vh - 8rem);
+    background: linear-gradient(
+        180deg,
+        var(--cratis-surface-card),
+        var(--cratis-surface-ground)
+    );
+    border: 1px solid var(--cratis-surface-border);
+    border-radius: 0.85rem;
+    box-shadow: var(--cratis-shadow-overlay);
+    backdrop-filter: blur(16px);
+    overflow: hidden;
+    z-index: var(--cratis-z-index-filter);
+    display: flex;
+    flex-direction: column;
+    will-change: opacity, transform;
+    contain: layout;
 }
 
 .pv-filter-dropdown-content {
-  padding: 1rem;
-  overflow-y: auto;
-  flex: 1;
+    padding: 1rem;
+    overflow-y: auto;
+    flex: 1;
 }
 
 .pv-view-toggle {
-  display: inline-flex;
-  align-items: center;
-  border-radius: 999px;
-  background: var(--cratis-surface-section);
-  border: 1px solid var(--cratis-surface-border);
-  padding: 0.2rem;
-  gap: 0.2rem;
+    display: inline-flex;
+    align-items: center;
+    border-radius: 999px;
+    background: var(--cratis-surface-section);
+    border: 1px solid var(--cratis-surface-border);
+    padding: 0.2rem;
+    gap: 0.2rem;
 }
 
 .pv-view-toggle button {
-  appearance: none;
-  border: none;
-  border-radius: 999px;
-  padding: 0.35rem 0.9rem;
-  color: var(--cratis-text-color-secondary);
-  background: transparent;
-  font-size: 0.75rem;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  cursor: pointer;
-  transition: color 160ms ease, background 160ms ease, box-shadow 160ms ease;
+    appearance: none;
+    border: none;
+    border-radius: 999px;
+    padding: 0.35rem 0.9rem;
+    color: var(--cratis-text-color-secondary);
+    background: transparent;
+    font-size: 0.75rem;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    cursor: pointer;
+    transition:
+        color 160ms ease,
+        background 160ms ease,
+        box-shadow 160ms ease;
 }
 
 .pv-view-toggle button.active {
-  background: var(--cratis-action-background);
-  color: var(--cratis-action-text);
+    background: var(--cratis-action-background);
+    color: var(--cratis-action-text);
 }
 
 .pv-zoom-controls {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  background: var(--cratis-surface-section);
-  border: 1px solid var(--cratis-surface-border);
-  border-radius: 0.6rem;
-  padding: 0.25rem 0.5rem;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    background: var(--cratis-surface-section);
+    border: 1px solid var(--cratis-surface-border);
+    border-radius: 0.6rem;
+    padding: 0.25rem 0.5rem;
 }
 
 .pv-zoom-controls button {
-  appearance: none;
-  border: none;
-  background: transparent;
-  color: var(--cratis-text-color);
-  font-size: 1.1rem;
-  width: 1.75rem;
-  height: 1.75rem;
-  border-radius: 0.4rem;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: background 120ms ease, color 120ms ease;
+    appearance: none;
+    border: none;
+    background: transparent;
+    color: var(--cratis-text-color);
+    font-size: 1.1rem;
+    width: 1.75rem;
+    height: 1.75rem;
+    border-radius: 0.4rem;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition:
+        background 120ms ease,
+        color 120ms ease;
 }
 
 .pv-zoom-controls button:hover {
-  background: var(--cratis-surface-hover);
-  color: var(--cratis-text-color);
+    background: var(--cratis-surface-hover);
+    color: var(--cratis-text-color);
 }
 
 .pv-zoom-controls button:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
+    opacity: 0.4;
+    cursor: not-allowed;
 }
 
 .pv-zoom-slider {
-  width: 80px;
-  height: 4px;
-  appearance: none;
-  background: var(--cratis-surface-border);
-  border-radius: 2px;
-  cursor: pointer;
+    width: 80px;
+    height: 4px;
+    appearance: none;
+    background: var(--cratis-surface-border);
+    border-radius: 2px;
+    cursor: pointer;
 }
 
 .pv-zoom-slider::-webkit-slider-thumb {
-  appearance: none;
-  width: 14px;
-  height: 14px;
-  background: var(--cratis-primary-color);
-  border: 2px solid var(--cratis-text-color);
-  border-radius: 50%;
-  cursor: pointer;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
-  transition: transform 120ms ease;
+    appearance: none;
+    width: 14px;
+    height: 14px;
+    background: var(--cratis-primary-color);
+    border: 2px solid var(--cratis-text-color);
+    border-radius: 50%;
+    cursor: pointer;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+    transition: transform 120ms ease;
 }
 
 .pv-zoom-slider::-webkit-slider-thumb:hover {
-  transform: scale(1.15);
+    transform: scale(1.15);
 }
 
 .pv-zoom-slider::-moz-range-thumb {
-  width: 14px;
-  height: 14px;
-  background: var(--cratis-primary-color);
-  border: 2px solid var(--cratis-text-color);
-  border-radius: 50%;
-  cursor: pointer;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+    width: 14px;
+    height: 14px;
+    background: var(--cratis-primary-color);
+    border: 2px solid var(--cratis-text-color);
+    border-radius: 50%;
+    cursor: pointer;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
 }
 
 .pv-zoom-controls span {
-  font-size: 0.75rem;
-  color: var(--cratis-text-color-secondary);
-  min-width: 3rem;
-  text-align: center;
-  font-variant-numeric: tabular-nums;
-  cursor: pointer;
-  padding: 0.25rem 0.5rem;
-  border-radius: 0.4rem;
-  transition: background 120ms ease;
+    font-size: 0.75rem;
+    color: var(--cratis-text-color-secondary);
+    min-width: 3rem;
+    text-align: center;
+    font-variant-numeric: tabular-nums;
+    cursor: pointer;
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.4rem;
+    transition: background 120ms ease;
 }
 
 .pv-zoom-controls span:hover {
-  background: var(--cratis-surface-hover);
+    background: var(--cratis-surface-hover);
 }
 
 .pv-zoom-level-input {
-  width: 3rem;
-  font-size: 0.75rem;
-  text-align: center;
-  background: var(--cratis-surface-ground);
-  border: 1px solid var(--cratis-primary-color);
-  border-radius: 0.4rem;
-  color: var(--cratis-text-color);
-  padding: 0.25rem 0.5rem;
-  font-variant-numeric: tabular-nums;
-  outline: none;
+    width: 3rem;
+    font-size: 0.75rem;
+    text-align: center;
+    background: var(--cratis-surface-ground);
+    border: 1px solid var(--cratis-primary-color);
+    border-radius: 0.4rem;
+    color: var(--cratis-text-color);
+    padding: 0.25rem 0.5rem;
+    font-variant-numeric: tabular-nums;
+    outline: none;
 }
 
 .pv-zoom-reset {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .pv-dimension-select {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.6rem;
-  font-size: 0.9rem;
-  color: var(--cratis-text-color-secondary);
+    display: inline-flex;
+    align-items: center;
+    gap: 0.6rem;
+    font-size: 0.9rem;
+    color: var(--cratis-text-color-secondary);
 }
 
 .pv-dimension-select select {
-  background: var(--cratis-surface-ground);
-  border: 1px solid var(--cratis-surface-border);
-  border-radius: 0.6rem;
-  color: inherit;
-  font-size: 0.9rem;
-  padding: 0.4rem 0.6rem;
+    background: var(--cratis-surface-ground);
+    border: 1px solid var(--cratis-surface-border);
+    border-radius: 0.6rem;
+    color: inherit;
+    font-size: 0.9rem;
+    padding: 0.4rem 0.6rem;
 }
 
 .pv-groups {
-  position: relative;
-  flex: 1;
-  padding: 1.5rem 1.5rem 0;
-  display: flex;
-  align-items: flex-end;
-  gap: 0.25rem;
-  overflow: auto;
-  scroll-behavior: smooth;
-  cursor: grab;
-  user-select: none;
-  touch-action: pan-x pan-y;
-  /* Hide scrollbars */
-  scrollbar-width: none; /* Firefox */
-  -ms-overflow-style: none; /* IE and Edge */
+    position: relative;
+    flex: 1;
+    padding: 1.5rem 1.5rem 0;
+    display: flex;
+    align-items: flex-end;
+    gap: 0.25rem;
+    overflow: auto;
+    scroll-behavior: smooth;
+    cursor: grab;
+    user-select: none;
+    touch-action: pan-x pan-y;
+    /* Hide scrollbars */
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE and Edge */
 }
 
 .pv-groups::-webkit-scrollbar {
-  display: none; /* Chrome, Safari, Opera */
+    display: none; /* Chrome, Safari, Opera */
 }
 
 .pv-groups.pv-panning {
-  cursor: grabbing;
-  scroll-behavior: auto;
+    cursor: grabbing;
+    scroll-behavior: auto;
 }
 
 .pv-groups:active {
-  cursor: grabbing;
+    cursor: grabbing;
 }
 
 /* Groups wrapper for grouped mode with axis labels */
 .pv-groups-wrapper {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 0;
-  overflow: hidden;
-  background: transparent;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+    background: transparent;
 }
 
 /* Visual background belongs to the scrollable viewport area so it respects container bounds */
 .pv-viewport {
-  background: radial-gradient(circle at 25% 20%, var(--cratis-primary-500), var(--cratis-surface-ground));
+    background: radial-gradient(
+        circle at 25% 20%,
+        var(--cratis-primary-500),
+        var(--cratis-surface-ground)
+    );
 }
 
 .pv-groups-grouped {
-  flex: 1;
-  padding-bottom: 0;
+    flex: 1;
+    padding-bottom: 0;
 }
 
 .pv-group {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  background: transparent;
-  border-radius: 0;
-  border: none;
-  padding: 0;
-  box-shadow: none;
-  flex: 0 0 auto;
-  transition: background 180ms ease;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    background: transparent;
+    border-radius: 0;
+    border: none;
+    padding: 0;
+    box-shadow: none;
+    flex: 0 0 auto;
+    transition: background 180ms ease;
 }
 
 /* Grouped mode groups need to align cards to bottom and extend full height */
 .pv-group-grouped {
-  justify-content: flex-end;
-  position: relative;
-  min-height: 100%; /* Ensure full height for hover */
-  width: var(--column-width); /* Fixed width even when empty */
+    justify-content: flex-end;
+    position: relative;
+    min-height: 100%; /* Ensure full height for hover */
+    width: var(--column-width); /* Fixed width even when empty */
 }
 
 /* Zebra striping for grouped mode - every other group gets a lighter background */
 .pv-group-grouped:nth-child(even)::before {
-  background: rgba(255, 255, 255, 0.03);
+    background: rgba(255, 255, 255, 0.03);
 }
 
 /* Full-height hover highlight that extends to the top */
 .pv-group-grouped::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  top: -100vh; /* Extend way above to ensure it reaches the top */
-  background: transparent;
-  transition: background 180ms ease;
-  pointer-events: none;
-  z-index: 0;
+    content: '';
+    position: absolute;
+    inset: 0;
+    top: -100vh; /* Extend way above to ensure it reaches the top */
+    background: transparent;
+    transition: background 180ms ease;
+    pointer-events: none;
+    z-index: 0;
 }
 
 .pv-group-grouped:hover::before,
 .pv-group-grouped.highlighted::before {
-  background: var(--cratis-surface-hover);
+    background: var(--cratis-surface-hover);
 }
 
 /* Zebra striping hover state - combine with stripe background */
 .pv-group-grouped:nth-child(even):hover::before,
 .pv-group-grouped:nth-child(even).highlighted::before {
-  background: var(--cratis-surface-hover);
+    background: var(--cratis-surface-hover);
 }
 
 .pv-group:hover {
-  background: transparent;
+    background: transparent;
 }
 
 .pv-group.highlighted {
-  background: transparent;
+    background: transparent;
 }
 
 .pv-group header {
-  display: none;
+    display: none;
 }
 
 .pv-group header h2 {
-  margin: 0;
-  font-size: 1rem;
-  letter-spacing: 0.01em;
+    margin: 0;
+    font-size: 1rem;
+    letter-spacing: 0.01em;
 }
 
 .pv-group header span {
-  font-size: 0.75rem;
-  color: var(--cratis-text-color-secondary);
-  background: var(--cratis-highlight-bg);
-  padding: 0.15rem 0.5rem;
-  border-radius: 999px;
+    font-size: 0.75rem;
+    color: var(--cratis-text-color-secondary);
+    background: var(--cratis-highlight-bg);
+    padding: 0.15rem 0.5rem;
+    border-radius: 999px;
 }
 
 .pv-cards {
-  display: grid;
-  gap: calc(4px * var(--zoom-scale, 1));
-  width: var(--column-width, auto);
+    display: grid;
+    gap: calc(4px * var(--zoom-scale, 1));
+    width: var(--column-width, auto);
 }
 
 .pv-cards-grouped {
-  /* Grid fills left-to-right with fixed columns */
-  grid-template-columns: repeat(var(--cards-per-row, 5), 1fr);
-  grid-auto-flow: row;
-  width: var(--column-width);
+    /* Grid fills left-to-right with fixed columns */
+    grid-template-columns: repeat(var(--cards-per-row, 5), 1fr);
+    grid-auto-flow: row;
+    width: var(--column-width);
 }
 
 .pv-cards-grouped .pv-card {
-  transform: none;
+    transform: none;
 }
 
 /* Empty placeholder cells in grouped grid */
 .pv-card-placeholder {
-  visibility: hidden;
-  width: var(--card-width);
-  height: var(--card-height);
+    visibility: hidden;
+    width: var(--card-width);
+    height: var(--card-height);
 }
 
 /* Axis labels at bottom of grouped view */
 .pv-axis-labels {
-  display: flex;
-  align-items: stretch;
-  background: var(--cratis-surface-section);
-  border-top: 1px solid var(--cratis-surface-border);
-  padding: 0.5rem 0; /* padding-left set dynamically from JS; no right padding to prevent skew */
-  gap: 0; /* No extra gap to avoid skew */
-  overflow-x: hidden; /* Disable independent scroll - synced via JS */
-  flex-shrink: 0;
+    display: flex;
+    align-items: stretch;
+    background: var(--cratis-surface-section);
+    border-top: 1px solid var(--cratis-surface-border);
+    padding: 0.5rem 0; /* padding-left set dynamically from JS; no right padding to prevent skew */
+    gap: 0; /* No extra gap to avoid skew */
+    overflow-x: hidden; /* Disable independent scroll - synced via JS */
+    flex-shrink: 0;
 }
 
 .pv-axis-label {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 0.5rem 0;
-  text-align: center;
-  cursor: pointer;
-  /* Note: opacity transition added later in the file for filter effects */
-  transition: background 180ms ease, border-color 180ms ease;
-  flex: 0 0 auto;
-  border-radius: 0.5rem;
-  border: 2px solid transparent;
-  background: transparent;
-  color: inherit;
-  font: inherit;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 0.5rem 0;
+    text-align: center;
+    cursor: pointer;
+    /* Note: opacity transition added later in the file for filter effects */
+    transition:
+        background 180ms ease,
+        border-color 180ms ease;
+    flex: 0 0 auto;
+    border-radius: 0.5rem;
+    border: 2px solid transparent;
+    background: transparent;
+    color: inherit;
+    font: inherit;
 }
 
 /* Zebra striping for axis labels - match the grouped columns */
 .pv-axis-label:nth-child(even) {
-  background: rgba(255, 255, 255, 0.03);
+    background: rgba(255, 255, 255, 0.03);
 }
 
 .pv-axis-label:hover,
 .pv-axis-label.highlighted {
-  background: var(--cratis-surface-hover);
+    background: var(--cratis-surface-hover);
 }
 
 /* Zebra striping hover/highlight for even labels */
 .pv-axis-label:nth-child(even):hover,
 .pv-axis-label:nth-child(even).highlighted {
-  background: var(--cratis-surface-hover);
+    background: var(--cratis-surface-hover);
 }
 
 .pv-axis-label.selected {
-  border-color: var(--cratis-primary-color);
-  background: var(--cratis-highlight-bg);
+    border-color: var(--cratis-primary-color);
+    background: var(--cratis-highlight-bg);
 }
 
 .pv-axis-label:focus-visible {
-  outline: none;
-  border-color: var(--cratis-primary-color);
-  box-shadow: var(--cratis-focus-ring);
+    outline: none;
+    border-color: var(--cratis-primary-color);
+    box-shadow: var(--cratis-focus-ring);
 }
 
 .pv-axis-label-text {
-  font-size: 0.75rem;
-  color: var(--cratis-text-color);
-  font-weight: 500;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
+    font-size: 0.75rem;
+    color: var(--cratis-text-color);
+    font-weight: 500;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
 }
 
 .pv-axis-label-count {
-  font-size: 0.65rem;
-  color: var(--cratis-text-color-secondary);
-  margin-top: 0.15rem;
-  font-variant-numeric: tabular-nums;
+    font-size: 0.65rem;
+    color: var(--cratis-text-color-secondary);
+    margin-top: 0.15rem;
+    font-variant-numeric: tabular-nums;
 }
 
 /* Fade and collapse axis labels when switching views */
 .pivot-viewer .pv-axis-labels {
-  transition: opacity 600ms ease, max-height 600ms ease, padding 600ms ease, border-color 600ms ease;
-  overflow: hidden;
+    transition:
+        opacity 600ms ease,
+        max-height 600ms ease,
+        padding 600ms ease,
+        border-color 600ms ease;
+    overflow: hidden;
 }
 .pivot-viewer .pv-axis-labels.hidden {
-  opacity: 0;
-  max-height: 0;
-  padding-top: 0;
-  padding-bottom: 0;
-  border-top-color: transparent;
-  pointer-events: none;
+    opacity: 0;
+    max-height: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+    border-top-color: transparent;
+    pointer-events: none;
 }
 .pivot-viewer .pv-axis-labels.visible {
-  opacity: 1;
-  max-height: 80px;
-  pointer-events: auto;
+    opacity: 1;
+    max-height: 80px;
+    pointer-events: auto;
 }
 
 /* Fade individual axis labels when filtering groups */
 .pv-axis-label {
-  transition: opacity 600ms ease, background 180ms ease, border-color 180ms ease;
+    transition:
+        opacity 600ms ease,
+        background 180ms ease,
+        border-color 180ms ease;
 }
 
 .pv-axis-label.filtered-out {
-  opacity: 0.3;
+    opacity: 0.3;
 }
 
 .pv-groups.pv-groups-collection {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  align-content: flex-start;
-  padding: 1.5rem;
-  gap: calc(8px * var(--zoom-scale, 1));
-  overflow: auto;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    align-content: flex-start;
+    padding: 1.5rem;
+    gap: calc(8px * var(--zoom-scale, 1));
+    overflow: auto;
 }
 
 /* Pause flex reflow during zoom animation for smoother effect */
 .pv-groups.pv-zooming {
-  pointer-events: none;
+    pointer-events: none;
 }
 
 /* CRITICAL: Freeze collection layout during zoom - prevent any reflow */
 .pv-groups.pv-groups-collection.pv-zooming {
-  /* Lock the gap to prevent layout shifts */
-  gap: 8px !important;
+    /* Lock the gap to prevent layout shifts */
+    gap: 8px !important;
 }
 
 .pv-groups.pv-groups-collection.pv-zooming .pv-card {
-  /* Prevent cards from resizing/reflowing during zoom */
-  flex-shrink: 0 !important;
-  flex-grow: 0 !important;
+    /* Prevent cards from resizing/reflowing during zoom */
+    flex-shrink: 0 !important;
+    flex-grow: 0 !important;
 }
 
 .pv-groups.pv-groups-collection > div,
 .pv-groups.pv-groups-collection > section {
-  width: auto;
+    width: auto;
 }
 
 .pv-group-collection {
-  display: contents;
-  background: transparent;
-  border: none;
-  padding: 0;
-  box-shadow: none;
+    display: contents;
+    background: transparent;
+    border: none;
+    padding: 0;
+    box-shadow: none;
 }
 
 .pv-group-collection .pv-cards {
-  display: contents;
+    display: contents;
 }
 
 .pv-cards-collection {
-  display: contents;
+    display: contents;
 }
 
 .pv-cards-collection .pv-card {
-  background: linear-gradient(180deg, var(--cratis-surface-card), var(--cratis-surface-ground));
+    background: linear-gradient(
+        180deg,
+        var(--cratis-surface-card),
+        var(--cratis-surface-ground)
+    );
 }
 
 .pv-card {
-  border: none;
-  text-align: left;
-  padding: 0;
-  background: linear-gradient(180deg, var(--cratis-surface-card), var(--cratis-surface-ground));
-  border-radius: 0.85rem;
-  cursor: pointer;
-  color: inherit;
-  border: 1px solid transparent;
-  transition: border-color 160ms ease;
+    border: none;
+    text-align: left;
+    padding: 0;
+    background: linear-gradient(
+        180deg,
+        var(--cratis-surface-card),
+        var(--cratis-surface-ground)
+    );
+    border-radius: 0.85rem;
+    cursor: pointer;
+    color: inherit;
+    border: 1px solid transparent;
+    transition: border-color 160ms ease;
 }
 
 .pv-card:focus-visible {
-  outline: none;
-  border-color: var(--cratis-primary-color);
-  box-shadow: var(--cratis-focus-ring);
+    outline: none;
+    border-color: var(--cratis-primary-color);
+    box-shadow: var(--cratis-focus-ring);
 }
 
 .pv-card.selected {
-  border-color: var(--cratis-primary-color);
-  box-shadow: var(--cratis-focus-ring), 0 8px 20px rgba(0, 0, 0, 0.2);
+    border-color: var(--cratis-primary-color);
+    box-shadow:
+        var(--cratis-focus-ring),
+        0 8px 20px rgba(0, 0, 0, 0.2);
 }
 
 .pv-card-body {
-  padding: calc(0.85rem * var(--zoom-scale, 1)) calc(0.95rem * var(--zoom-scale, 1));
-  font-size: calc(1rem * var(--zoom-scale, 1));
-  overflow: hidden;
+    padding: calc(0.85rem * var(--zoom-scale, 1)) calc(0.95rem * var(--zoom-scale, 1));
+    font-size: calc(1rem * var(--zoom-scale, 1));
+    overflow: hidden;
 }
 
 .pv-card-title {
-  font-size: calc(0.95rem * var(--zoom-scale, 1));
-  font-weight: 600;
-  margin-bottom: calc(0.65rem * var(--zoom-scale, 1));
-  line-height: 1.2;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+    font-size: calc(0.95rem * var(--zoom-scale, 1));
+    font-weight: 600;
+    margin-bottom: calc(0.65rem * var(--zoom-scale, 1));
+    line-height: 1.2;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .pv-card-row {
-  display: grid;
-  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
-  gap: calc(0.5rem * var(--zoom-scale, 1));
-  font-size: calc(0.8rem * var(--zoom-scale, 1));
-  color: var(--cratis-text-color);
-  margin-bottom: calc(0.35rem * var(--zoom-scale, 1));
-  line-height: 1.3;
+    display: grid;
+    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
+    gap: calc(0.5rem * var(--zoom-scale, 1));
+    font-size: calc(0.8rem * var(--zoom-scale, 1));
+    color: var(--cratis-text-color);
+    margin-bottom: calc(0.35rem * var(--zoom-scale, 1));
+    line-height: 1.3;
 }
 
 .pv-card-row dt {
-  margin: 0;
-  color: var(--cratis-text-color-secondary);
-  font-weight: 500;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+    margin: 0;
+    color: var(--cratis-text-color-secondary);
+    font-weight: 500;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .pv-card-row dd {
-  margin: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+    margin: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .pv-card-more {
-  margin-top: calc(0.4rem * var(--zoom-scale, 1));
-  color: var(--cratis-text-color-secondary);
-  text-align: right;
-  font-size: calc(0.9rem * var(--zoom-scale, 1));
+    margin-top: calc(0.4rem * var(--zoom-scale, 1));
+    color: var(--cratis-text-color-secondary);
+    text-align: right;
+    font-size: calc(0.9rem * var(--zoom-scale, 1));
 }
 
 .pv-empty {
-  width: 100%;
-  text-align: center;
-  padding: 3rem;
-  color: var(--cratis-text-color-secondary);
-  font-size: 1.05rem;
+    width: 100%;
+    text-align: center;
+    padding: 3rem;
+    color: var(--cratis-text-color-secondary);
+    font-size: 1.05rem;
 }
 
 /* Slide-in detail panel from the right */
 .pv-detail-panel {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  width: 380px;
-  background: var(--cratis-surface-overlay);
-  border-left: 1px solid var(--cratis-surface-border);
-  display: flex;
-  flex-direction: column;
-  z-index: 14;
-  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.3);
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 380px;
+    background: var(--cratis-surface-overlay);
+    border-left: 1px solid var(--cratis-surface-border);
+    display: flex;
+    flex-direction: column;
+    z-index: 14;
+    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.3);
 }
 
 .pv-detail-panel header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 1rem 1.25rem;
-  border-bottom: 1px solid var(--cratis-surface-border);
-  flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1rem 1.25rem;
+    border-bottom: 1px solid var(--cratis-surface-border);
+    flex-shrink: 0;
 }
 
 .pv-detail-panel header h2 {
-  margin: 0;
-  font-size: 1.1rem;
-  color: var(--cratis-text-color);
+    margin: 0;
+    font-size: 1.1rem;
+    color: var(--cratis-text-color);
 }
 
 .pv-detail-panel header p {
-  margin: 0.25rem 0 0;
-  font-size: 0.8rem;
-  color: var(--cratis-text-color-secondary);
+    margin: 0.25rem 0 0;
+    font-size: 0.8rem;
+    color: var(--cratis-text-color-secondary);
 }
 
 .pv-detail-panel header button {
-  appearance: none;
-  border: none;
-  background: var(--cratis-surface-hover);
-  color: var(--cratis-text-color);
-  width: 32px;
-  height: 32px;
-  border-radius: 8px;
-  font-size: 1.3rem;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: background 120ms ease;
+    appearance: none;
+    border: none;
+    background: var(--cratis-surface-hover);
+    color: var(--cratis-text-color);
+    width: 32px;
+    height: 32px;
+    border-radius: 8px;
+    font-size: 1.3rem;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 120ms ease;
 }
 
 .pv-detail-panel header button:hover {
-  background: var(--cratis-highlight-bg);
+    background: var(--cratis-highlight-bg);
 }
 
 .pv-detail-panel-content {
-  flex: 1;
-  overflow-y: auto;
-  padding: 1rem 1.25rem 1.5rem;
+    flex: 1;
+    overflow-y: auto;
+    padding: 1rem 1.25rem 1.5rem;
 }
 
 .pv-detail-panel section h3 {
-  margin: 0 0 0.6rem;
-  font-size: 0.85rem;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  color: var(--cratis-text-color-secondary);
+    margin: 0 0 0.6rem;
+    font-size: 0.85rem;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--cratis-text-color-secondary);
 }
 
 .pv-detail-panel section + section {
-  margin-top: 1.25rem;
+    margin-top: 1.25rem;
 }
 
 .pv-detail-panel dl {
-  display: grid;
-  gap: 0.4rem;
+    display: grid;
+    gap: 0.4rem;
 }
 
 .pv-detail-panel dl > div {
-  background: var(--cratis-surface-section);
-  border-radius: 0.6rem;
-  padding: 0.5rem 0.7rem;
+    background: var(--cratis-surface-section);
+    border-radius: 0.6rem;
+    padding: 0.5rem 0.7rem;
 }
 
 .pv-detail-panel dt {
-  margin: 0;
-  font-size: 0.7rem;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--cratis-text-color-secondary);
+    margin: 0;
+    font-size: 0.7rem;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--cratis-text-color-secondary);
 }
 
 .pv-detail-panel dd {
-  margin: 0.15rem 0 0;
-  font-size: 0.85rem;
-  color: var(--cratis-text-color);
-  white-space: pre-wrap;
-  word-break: break-word;
+    margin: 0.15rem 0 0;
+    font-size: 0.85rem;
+    color: var(--cratis-text-color);
+    white-space: pre-wrap;
+    word-break: break-word;
 }
 
 .pv-detail-panel .pv-detail-meta dl {
-  grid-template-columns: 1fr 1fr;
+    grid-template-columns: 1fr 1fr;
 }
 
 .pv-detail-panel .pv-detail-causation .pv-pill-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.4rem;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem;
 }
 
 /* Legacy overlay styles - hidden */
 .pv-detail-overlay {
-  display: none;
-  position: fixed;
-  inset: 0;
-  background: var(--cratis-maskbg);
-  backdrop-filter: blur(6px);
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
-  padding: 2rem;
-  z-index: 20;
+    display: none;
+    position: fixed;
+    inset: 0;
+    background: var(--cratis-maskbg);
+    backdrop-filter: blur(6px);
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    padding: 2rem;
+    z-index: 20;
 }
 
 .pv-detail {
-  width: min(720px, 100%);
-  background: var(--cratis-surface-overlay);
-  border: 1px solid var(--cratis-surface-border);
-  border-radius: 1.25rem;
-  padding: 1.75rem;
-  max-height: min(80vh, 640px);
-  overflow-y: auto;
-  color: var(--cratis-text-color);
+    width: min(720px, 100%);
+    background: var(--cratis-surface-overlay);
+    border: 1px solid var(--cratis-surface-border);
+    border-radius: 1.25rem;
+    padding: 1.75rem;
+    max-height: min(80vh, 640px);
+    overflow-y: auto;
+    color: var(--cratis-text-color);
 }
 
 .pv-detail header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 1.25rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 1.25rem;
 }
 
 .pv-detail header h2 {
-  margin: 0;
-  font-size: 1.3rem;
+    margin: 0;
+    font-size: 1.3rem;
 }
 
 .pv-detail header p {
-  margin: 0;
-  font-size: 0.9rem;
-  color: var(--cratis-text-color-secondary);
+    margin: 0;
+    font-size: 0.9rem;
+    color: var(--cratis-text-color-secondary);
 }
 
 .pv-detail header button {
-  appearance: none;
-  border: none;
-  border-radius: 0.75rem;
-  padding: 0.5rem 1rem;
-  background: var(--cratis-highlight-bg);
-  color: inherit;
-  cursor: pointer;
+    appearance: none;
+    border: none;
+    border-radius: 0.75rem;
+    padding: 0.5rem 1rem;
+    background: var(--cratis-highlight-bg);
+    color: inherit;
+    cursor: pointer;
 }
 
 .pv-detail section h3 {
-  margin-top: 0;
-  font-size: 1rem;
-  margin-bottom: 0.75rem;
+    margin-top: 0;
+    font-size: 1rem;
+    margin-bottom: 0.75rem;
 }
 
 .pv-detail section + section {
-  margin-top: 1.25rem;
+    margin-top: 1.25rem;
 }
 
 .pv-detail dl {
-  display: grid;
-  gap: 0.5rem;
+    display: grid;
+    gap: 0.5rem;
 }
 
 .pv-detail dl > div {
-  background: var(--cratis-surface-section);
-  border-radius: 0.75rem;
-  padding: 0.55rem 0.75rem;
+    background: var(--cratis-surface-section);
+    border-radius: 0.75rem;
+    padding: 0.55rem 0.75rem;
 }
 
 .pv-detail dt {
-  margin: 0;
-  font-size: 0.75rem;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--cratis-text-color-secondary);
+    margin: 0;
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--cratis-text-color-secondary);
 }
 
 .pv-detail dd {
-  margin: 0.2rem 0 0;
-  font-size: 0.9rem;
-  color: var(--cratis-text-color);
-  white-space: pre-wrap;
-  word-break: break-word;
+    margin: 0.2rem 0 0;
+    font-size: 0.9rem;
+    color: var(--cratis-text-color);
+    white-space: pre-wrap;
+    word-break: break-word;
 }
 
 .pv-detail-meta dl {
-  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
 }
 
 .pv-detail-causation .pv-pill-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
 }
 
 .pv-pill {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.35rem;
-  padding: 0.35rem 0.65rem;
-  border-radius: 999px;
-  background: var(--cratis-highlight-bg);
-  color: var(--cratis-text-color);
-  font-size: 0.8rem;
-  border: 1px solid var(--cratis-surface-border);
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    padding: 0.35rem 0.65rem;
+    border-radius: 999px;
+    background: var(--cratis-highlight-bg);
+    color: var(--cratis-text-color);
+    font-size: 0.8rem;
+    border: 1px solid var(--cratis-surface-border);
 }
 
 /* Range Histogram Filter */
 .pv-range-histogram {
-  padding: 0.5rem 0;
+    padding: 0.5rem 0;
 }
 
 .pv-histogram-bars {
-  display: flex;
-  align-items: flex-end;
-  gap: 2px;
-  height: 80px;
-  padding: 0 2px;
-  margin-bottom: 0.5rem;
+    display: flex;
+    align-items: flex-end;
+    gap: 2px;
+    height: 80px;
+    padding: 0 2px;
+    margin-bottom: 0.5rem;
 }
 
 .pv-histogram-bar {
-  flex: 1;
-  min-width: 8px;
-  background: var(--cratis-highlight-bg);
-  border: none;
-  border-radius: 2px 2px 0 0;
-  cursor: pointer;
-  transition: background 160ms ease, transform 120ms ease;
-  padding: 0;
+    flex: 1;
+    min-width: 8px;
+    background: var(--cratis-highlight-bg);
+    border: none;
+    border-radius: 2px 2px 0 0;
+    cursor: pointer;
+    transition:
+        background 160ms ease,
+        transform 120ms ease;
+    padding: 0;
 }
 
 .pv-histogram-bar:hover {
-  background: var(--cratis-surface-hover);
-  transform: scaleY(1.02);
+    background: var(--cratis-surface-hover);
+    transform: scaleY(1.02);
 }
 
 .pv-histogram-bar.in-range {
-  background: var(--cratis-primary-color);
+    background: var(--cratis-primary-color);
 }
 
 .pv-histogram-bar.partial {
-  background: var(--cratis-highlight-bg);
+    background: var(--cratis-highlight-bg);
 }
 
 .pv-range-slider {
-  position: relative;
-  height: 24px;
-  margin: 0.5rem 0;
+    position: relative;
+    height: 24px;
+    margin: 0.5rem 0;
 }
 
 .pv-range-track {
-  position: absolute;
-  top: 50%;
-  left: 0;
-  right: 0;
-  height: 4px;
-  background: var(--cratis-surface-border);
-  border-radius: 2px;
-  transform: translateY(-50%);
+    position: absolute;
+    top: 50%;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: var(--cratis-surface-border);
+    border-radius: 2px;
+    transform: translateY(-50%);
 }
 
 .pv-range-selection {
-  position: absolute;
-  top: 50%;
-  height: 4px;
-  background: var(--cratis-primary-color);
-  border-radius: 2px;
-  transform: translateY(-50%);
-  cursor: grab;
+    position: absolute;
+    top: 50%;
+    height: 4px;
+    background: var(--cratis-primary-color);
+    border-radius: 2px;
+    transform: translateY(-50%);
+    cursor: grab;
 }
 
 .pv-range-selection:active {
-  cursor: grabbing;
+    cursor: grabbing;
 }
 
 .pv-range-handle {
-  position: absolute;
-  top: 50%;
-  width: 16px;
-  height: 16px;
-  background: var(--cratis-primary-color);
-  border: 2px solid var(--cratis-text-color);
-  border-radius: 50%;
-  transform: translate(-50%, -50%);
-  cursor: ew-resize;
-  transition: transform 120ms ease, box-shadow 120ms ease;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    position: absolute;
+    top: 50%;
+    width: 16px;
+    height: 16px;
+    background: var(--cratis-primary-color);
+    border: 2px solid var(--cratis-text-color);
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+    cursor: ew-resize;
+    transition:
+        transform 120ms ease,
+        box-shadow 120ms ease;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
 }
 
 .pv-range-handle:hover {
-  transform: translate(-50%, -50%) scale(1.15);
-  box-shadow: 0 4px 12px var(--cratis-primary-color);
+    transform: translate(-50%, -50%) scale(1.15);
+    box-shadow: 0 4px 12px var(--cratis-primary-color);
 }
 
 .pv-range-labels {
-  display: flex;
-  justify-content: space-between;
-  font-size: 0.75rem;
-  color: var(--cratis-text-color-secondary);
-  font-variant-numeric: tabular-nums;
+    display: flex;
+    justify-content: space-between;
+    font-size: 0.75rem;
+    color: var(--cratis-text-color-secondary);
+    font-variant-numeric: tabular-nums;
 }
 
 .pv-range-clear {
-  margin-top: 0.75rem;
-  appearance: none;
-  border: none;
-  border-radius: 0.55rem;
-  padding: 0.4rem 0.75rem;
-  background: var(--cratis-highlight-bg);
-  color: var(--cratis-text-color);
-  font-size: 0.72rem;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  cursor: pointer;
-  width: 100%;
+    margin-top: 0.75rem;
+    appearance: none;
+    border: none;
+    border-radius: 0.55rem;
+    padding: 0.4rem 0.75rem;
+    background: var(--cratis-highlight-bg);
+    color: var(--cratis-text-color);
+    font-size: 0.72rem;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    cursor: pointer;
+    width: 100%;
 }
 
 .pv-range-clear:hover {
-  background: var(--cratis-surface-hover);
+    background: var(--cratis-surface-hover);
 }
 
 @media (max-width: 900px) {
-  .pv-filter-panel {
-    width: calc(100% - 2.5rem);
-    left: 1.25rem;
-    right: 1.25rem;
-    top: 1.25rem;
-    max-height: calc(100vh - 2.5rem);
-  }
-
-  .pv-toolbar {
-    flex-wrap: wrap;
-    gap: 1rem;
-  }
+    .pv-filter-panel {
+        width: calc(100% - 2.5rem);
+        left: 1.25rem;
+        right: 1.25rem;
+        top: 1.25rem;
+        max-height: calc(100vh - 2.5rem);
+    }
 
-  .pv-toolbar-right {
-    flex-wrap: wrap;
-    gap: 1rem;
-  }
+    .pv-toolbar {
+        flex-wrap: wrap;
+        gap: 1rem;
+    }
 
-  .pv-view-toggle {
-    order: -1;
-  }
+    .pv-toolbar-right {
+        flex-wrap: wrap;
+        gap: 1rem;
+    }
 
-  .pv-groups {
-    padding: 1.5rem;
-  }
+    .pv-view-toggle {
+        order: -1;
+    }
+
+    .pv-groups {
+        padding: 1.5rem;
+    }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .pivot-viewer,
-  .pivot-viewer * {
-    scroll-behavior: auto !important;
-    transition: none !important;
-    animation: none !important;
-  }
+    .pivot-viewer,
+    .pivot-viewer * {
+        scroll-behavior: auto !important;
+        transition: none !important;
+        animation: none !important;
+    }
 }
diff --git a/Source/for_theme/when_resolving_explicit_color_schemes.ts b/Source/for_theme/when_resolving_explicit_color_schemes.ts
index 4e931825..3416a8fd 100644
--- a/Source/for_theme/when_resolving_explicit_color_schemes.ts
+++ b/Source/for_theme/when_resolving_explicit_color_schemes.ts
@@ -9,9 +9,7 @@ import { describe, it } from 'vitest';
 const theme = readFileSync(new URL('../theme.css', import.meta.url), 'utf8');
 const selectors = postcss
     .parse(theme)
-    .nodes.flatMap((node) =>
-        node.type === 'rule' ? node.selectors : [],
-    );
+    .nodes.flatMap((node) => (node.type === 'rule' ? node.selectors : []));
 
 describe('when resolving explicit baseline color schemes', () => {
     it('should_allow_an_explicit_light_root_to_override_system_dark', () => {

From 505abe904d1e0baebb245fe0f602cf6d61875e3f Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Mon, 24 Aug 2026 07:52:05 +0200
Subject: [PATCH 031/267] Make documentation link checks truthful

Resolve links from each source page, validate extensionless routes and anchors, and report site-root/network exclusions instead of silently scanning zero links.
---
 Documentation/verify-local-links.mjs | 331 +++++++++++++++++++++++++++
 Documentation/verify-markdown.sh     |  29 +--
 2 files changed, 346 insertions(+), 14 deletions(-)
 create mode 100644 Documentation/verify-local-links.mjs

diff --git a/Documentation/verify-local-links.mjs b/Documentation/verify-local-links.mjs
new file mode 100644
index 00000000..f3787a80
--- /dev/null
+++ b/Documentation/verify-local-links.mjs
@@ -0,0 +1,331 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import fs from 'node:fs';
+import path from 'node:path';
+import process from 'node:process';
+import { fileURLToPath } from 'node:url';
+
+const markdownExtensions = new Set(['.md', '.mdx']);
+const documentationRoot = path.resolve(process.argv[2] ?? path.dirname(fileURLToPath(import.meta.url)));
+const counts = {
+    files: 0,
+    local: 0,
+    siteRoutes: 0,
+    externalHttp: 0,
+    localhost: 0,
+    otherSchemes: 0
+};
+const failures = [];
+const anchorsByFile = new Map();
+
+const markdownFiles = findMarkdownFiles(documentationRoot);
+counts.files = markdownFiles.length;
+
+for (const sourceFile of markdownFiles) {
+    checkFile(sourceFile);
+}
+
+console.log(`Markdown files scanned: ${counts.files}`);
+console.log(`Local links checked: ${counts.local}`);
+console.log('Intentional exclusions:');
+console.log(`  Documentation-site root routes: ${counts.siteRoutes}`);
+console.log(`  External HTTP(S) links: ${counts.externalHttp}`);
+console.log(`  Localhost HTTP(S) links: ${counts.localhost}`);
+console.log(`  Other non-file URI schemes: ${counts.otherSchemes}`);
+
+if (counts.files === 0) {
+    failures.push('No Markdown files were found.');
+}
+if (counts.local === 0) {
+    failures.push('No local links were found; refusing to report a vacuous successful scan.');
+}
+
+if (failures.length > 0) {
+    console.error('');
+    console.error(`Broken local links: ${failures.length}`);
+    for (const failure of failures) {
+        console.error(`  ${failure}`);
+    }
+    process.exitCode = 1;
+} else {
+    console.log('Broken local links: 0');
+}
+
+function findMarkdownFiles(root) {
+    const files = [];
+
+    function visit(directory) {
+        const entries = fs.readdirSync(directory, { withFileTypes: true })
+            .sort((left, right) => left.name.localeCompare(right.name));
+
+        for (const entry of entries) {
+            const entryPath = path.join(directory, entry.name);
+            if (entry.isDirectory()) {
+                visit(entryPath);
+            } else if (entry.isFile() && markdownExtensions.has(path.extname(entry.name).toLowerCase())) {
+                files.push(entryPath);
+            }
+        }
+    }
+
+    visit(root);
+    return files;
+}
+
+function checkFile(sourceFile) {
+    const content = fs.readFileSync(sourceFile, 'utf8');
+    const linkContent = maskInlineCode(maskFencedCode(content));
+    const references = readReferenceDefinitions(maskFencedCode(content));
+    const destinations = [];
+
+    const inlineLinkPattern = /!?\[(?:\\.|[^\]\\])*\]\(\s*(?:<((?:\\.|[^>])*)>|((?:\\.|[^\s)])+))/g;
+    collectMatches(linkContent, inlineLinkPattern, destinations, match => match[1] ?? match[2]);
+
+    const referenceLinkPattern = /!?\[([^\]\n]+)\]\[([^\]\n]*)\]/g;
+    collectMatches(linkContent, referenceLinkPattern, destinations, match => {
+        const referenceName = normalizeReferenceName(match[2] || match[1]);
+        const definition = references.get(referenceName);
+        if (!definition) {
+            failures.push(`${displayPath(sourceFile)}:${lineNumberAt(content, match.index)} unresolved reference link "${referenceName}"`);
+            return undefined;
+        }
+        return definition;
+    });
+
+    const htmlLinkPattern = /\b(?:href|src|link)\s*=\s*(['"])(.*?)\1/g;
+    collectMatches(linkContent, htmlLinkPattern, destinations, match => match[2]);
+
+    destinations.sort((left, right) => left.index - right.index);
+    for (const destination of destinations) {
+        checkDestination(sourceFile, content, destination);
+    }
+}
+
+function collectMatches(content, pattern, destinations, getTarget) {
+    let match;
+    while ((match = pattern.exec(content)) !== null) {
+        const target = getTarget(match);
+        if (target !== undefined) {
+            destinations.push({ index: match.index, target: unescapeMarkdown(target.trim()) });
+        }
+    }
+}
+
+function readReferenceDefinitions(content) {
+    const definitions = new Map();
+    const definitionPattern = /^ {0,3}\[([^\]\n]+)\]:\s*(?:<([^>\n]+)>|(\S+))/gm;
+    let match;
+    while ((match = definitionPattern.exec(content)) !== null) {
+        definitions.set(normalizeReferenceName(match[1]), unescapeMarkdown(match[2] ?? match[3]));
+    }
+    return definitions;
+}
+
+function normalizeReferenceName(value) {
+    return value.trim().replace(/\s+/g, ' ').toLowerCase();
+}
+
+function checkDestination(sourceFile, content, destination) {
+    const target = destination.target;
+    const lineNumber = lineNumberAt(content, destination.index);
+
+    if (target.startsWith('//')) {
+        counts.externalHttp += 1;
+        return;
+    }
+
+    if (/^https?:\/\//i.test(target)) {
+        const url = new URL(target);
+        if (isLocalhost(url.hostname)) {
+            counts.localhost += 1;
+        } else {
+            counts.externalHttp += 1;
+        }
+        return;
+    }
+
+    if (target.startsWith('/')) {
+        counts.siteRoutes += 1;
+        return;
+    }
+
+    if (/^[a-z][a-z\d+.-]*:/i.test(target)) {
+        counts.otherSchemes += 1;
+        return;
+    }
+
+    counts.local += 1;
+    checkLocalDestination(sourceFile, target, lineNumber);
+}
+
+function checkLocalDestination(sourceFile, target, lineNumber) {
+    const hashIndex = target.indexOf('#');
+    const queryIndex = target.indexOf('?');
+    const pathEnd = [hashIndex, queryIndex].filter(index => index >= 0)
+        .reduce((current, index) => Math.min(current, index), target.length);
+    const encodedPath = target.slice(0, pathEnd);
+    const encodedFragment = hashIndex >= 0
+        ? target.slice(hashIndex + 1, queryIndex > hashIndex ? queryIndex : target.length)
+        : undefined;
+
+    let targetPath;
+    let fragment;
+    try {
+        targetPath = decodeURIComponent(encodedPath);
+        fragment = encodedFragment === undefined ? undefined : decodeURIComponent(encodedFragment);
+    } catch {
+        failures.push(`${displayPath(sourceFile)}:${lineNumber} has invalid URL encoding in "${target}"`);
+        return;
+    }
+
+    const unresolvedPath = targetPath.length === 0
+        ? sourceFile
+        : path.resolve(path.dirname(sourceFile), targetPath);
+    const relativeToDocumentation = path.relative(documentationRoot, unresolvedPath);
+    if (relativeToDocumentation === '..' || relativeToDocumentation.startsWith(`..${path.sep}`) || path.isAbsolute(relativeToDocumentation)) {
+        failures.push(`${displayPath(sourceFile)}:${lineNumber} escapes Documentation with "${target}"`);
+        return;
+    }
+
+    const resolvedFile = resolveDocumentationFile(unresolvedPath);
+    if (!resolvedFile) {
+        failures.push(`${displayPath(sourceFile)}:${lineNumber} cannot resolve "${target}"`);
+        return;
+    }
+
+    if (fragment && !anchorsFor(resolvedFile).has(fragment)) {
+        failures.push(`${displayPath(sourceFile)}:${lineNumber} cannot find anchor "#${fragment}" in ${displayPath(resolvedFile)}`);
+    }
+}
+
+function resolveDocumentationFile(unresolvedPath) {
+    const candidates = [unresolvedPath];
+    if (path.extname(unresolvedPath) === '') {
+        candidates.push(`${unresolvedPath}.md`, `${unresolvedPath}.mdx`);
+    }
+    candidates.push(path.join(unresolvedPath, 'index.md'), path.join(unresolvedPath, 'index.mdx'));
+
+    return candidates.find(candidate => isExactCaseFile(candidate));
+}
+
+function isExactCaseFile(candidate) {
+    const relative = path.relative(documentationRoot, candidate);
+    if (relative === '' || relative === '..' || relative.startsWith(`..${path.sep}`) || path.isAbsolute(relative)) {
+        return false;
+    }
+
+    let current = documentationRoot;
+    for (const segment of relative.split(path.sep)) {
+        let entries;
+        try {
+            entries = fs.readdirSync(current);
+        } catch {
+            return false;
+        }
+        if (!entries.includes(segment)) {
+            return false;
+        }
+        current = path.join(current, segment);
+    }
+
+    try {
+        return fs.statSync(current).isFile();
+    } catch {
+        return false;
+    }
+}
+
+function anchorsFor(file) {
+    if (anchorsByFile.has(file)) {
+        return anchorsByFile.get(file);
+    }
+
+    const content = maskFencedCode(fs.readFileSync(file, 'utf8'));
+    const anchors = new Set();
+    const slugOccurrences = new Map();
+    const headingPattern = /^ {0,3}#{1,6}\s+(.+?)\s*#*\s*$/gm;
+    let match;
+
+    while ((match = headingPattern.exec(content)) !== null) {
+        const baseSlug = slugifyHeading(match[1]);
+        const occurrence = slugOccurrences.get(baseSlug) ?? 0;
+        slugOccurrences.set(baseSlug, occurrence + 1);
+        anchors.add(occurrence === 0 ? baseSlug : `${baseSlug}-${occurrence}`);
+    }
+
+    const explicitIdPattern = /\bid\s*=\s*(['"])([^'"]+)\1/g;
+    while ((match = explicitIdPattern.exec(content)) !== null) {
+        anchors.add(match[2]);
+    }
+
+    anchorsByFile.set(file, anchors);
+    return anchors;
+}
+
+function slugifyHeading(heading) {
+    return heading
+        .replace(/<[^>]*>/g, '')
+        .replace(/&[a-z\d#]+;/gi, '')
+        .trim()
+        .toLowerCase()
+        .replace(/[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g, '')
+        .replace(/\s+/g, '-');
+}
+
+function maskFencedCode(content) {
+    let fenceCharacter;
+    let fenceLength = 0;
+
+    return content.split(/(?<=\n)/).map(line => {
+        const opening = line.match(/^ {0,3}(`{3,}|~{3,})/);
+        if (!fenceCharacter && opening) {
+            fenceCharacter = opening[1][0];
+            fenceLength = opening[1].length;
+            return maskLine(line);
+        }
+
+        if (fenceCharacter) {
+            const closingPattern = new RegExp(`^ {0,3}\\${fenceCharacter}{${fenceLength},}\\s*$`);
+            const lineWithoutNewline = line.replace(/\n$/, '');
+            if (closingPattern.test(lineWithoutNewline)) {
+                fenceCharacter = undefined;
+                fenceLength = 0;
+            }
+            return maskLine(line);
+        }
+
+        return line;
+    }).join('');
+}
+
+function maskInlineCode(content) {
+    return content.replace(/(`+)([^`\n]*?)\1/g, match => maskLine(match));
+}
+
+function maskLine(value) {
+    return value.replace(/[^\n]/g, ' ');
+}
+
+function unescapeMarkdown(value) {
+    return value.replace(/\\([!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~_-])/g, '$1');
+}
+
+function isLocalhost(hostname) {
+    const normalized = hostname.replace(/^\[|\]$/g, '').toLowerCase();
+    return normalized === 'localhost' || normalized === '127.0.0.1' || normalized === '::1';
+}
+
+function lineNumberAt(content, index) {
+    let lineNumber = 1;
+    for (let position = 0; position < index; position += 1) {
+        if (content.charCodeAt(position) === 10) {
+            lineNumber += 1;
+        }
+    }
+    return lineNumber;
+}
+
+function displayPath(file) {
+    return path.relative(path.dirname(documentationRoot), file).split(path.sep).join('/');
+}
diff --git a/Documentation/verify-markdown.sh b/Documentation/verify-markdown.sh
index 9fae3f01..67d00e03 100755
--- a/Documentation/verify-markdown.sh
+++ b/Documentation/verify-markdown.sh
@@ -1,9 +1,10 @@
 #!/bin/bash
+# Copyright (c) Cratis. All rights reserved.
+# Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-# Markdown Verification Script
-# This script runs the same markdown linting and link verification that runs in CI
+# Runs Markdown linting and deterministic, repository-local link verification.
 
-set -e
+set -u
 
 SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
 ROOT_DIR="$(cd "$SCRIPT_DIR/.." && pwd)"
@@ -13,12 +14,9 @@ echo "Markdown Verification"
 echo "=========================================="
 echo ""
 
-# Check if running from repository root or Documentation folder
-if [ "$(basename "$PWD")" = "Documentation" ]; then
-    cd ..
-fi
-
-echo "Working directory: $PWD"
+# Always resolve from this script rather than trusting an inherited/symlinked PWD.
+cd "$ROOT_DIR"
+echo "Working directory: $(pwd -P)"
 echo ""
 
 # Step 1: Markdown Linting
@@ -27,7 +25,7 @@ echo "Step 1: Running markdownlint..."
 echo "=========================================="
 echo ""
 
-if ! command -v npx &> /dev/null; then
+if ! command -v npx >/dev/null 2>&1; then
     echo "Error: npx is not installed. Please install Node.js and npm."
     exit 1
 fi
@@ -45,13 +43,16 @@ echo ""
 
 # Step 2: Link Verification
 echo "=========================================="
-echo "Step 2: Running link verification..."
+echo "Step 2: Running local link verification..."
 echo "=========================================="
 echo ""
-echo "This may take a few minutes to check all links..."
-echo ""
 
-npx linkinator "Documentation/**/*.md" --markdown --recurse --verbosity error --status-code "403:ok" --skip "^(https?:\\/\\/)?(localhost|127\\.0\\.0\\.1)(:\\d+)?(\\/|$)"
+if ! command -v node >/dev/null 2>&1; then
+    echo "Error: node is not installed. Please install Node.js."
+    exit 1
+fi
+
+node "$SCRIPT_DIR/verify-local-links.mjs" "$SCRIPT_DIR"
 LINK_EXIT_CODE=$?
 
 echo ""

From 3d340d68ce61779c837cf11dd52001b2f7fe7644 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Mon, 24 Aug 2026 08:11:38 +0200
Subject: [PATCH 032/267] Harden documentation link parsing

Replace vulnerable regex sanitization with deterministic Markdown destination and heading parsing, including adversarial self-tests.
---
 Documentation/verify-local-links.mjs | 316 ++++++++++++++++++++++++---
 1 file changed, 287 insertions(+), 29 deletions(-)

diff --git a/Documentation/verify-local-links.mjs b/Documentation/verify-local-links.mjs
index f3787a80..aac56662 100644
--- a/Documentation/verify-local-links.mjs
+++ b/Documentation/verify-local-links.mjs
@@ -7,7 +7,10 @@ import process from 'node:process';
 import { fileURLToPath } from 'node:url';
 
 const markdownExtensions = new Set(['.md', '.mdx']);
-const documentationRoot = path.resolve(process.argv[2] ?? path.dirname(fileURLToPath(import.meta.url)));
+const selfTestMode = process.argv[2] === '--self-test';
+const documentationRoot = path.resolve(selfTestMode
+    ? path.dirname(fileURLToPath(import.meta.url))
+    : (process.argv[2] ?? path.dirname(fileURLToPath(import.meta.url))));
 const counts = {
     files: 0,
     local: 0,
@@ -19,37 +22,86 @@ const counts = {
 const failures = [];
 const anchorsByFile = new Map();
 
-const markdownFiles = findMarkdownFiles(documentationRoot);
-counts.files = markdownFiles.length;
-
-for (const sourceFile of markdownFiles) {
-    checkFile(sourceFile);
+if (selfTestMode) {
+    runSelfTests();
+} else {
+    verifyDocumentation();
 }
 
-console.log(`Markdown files scanned: ${counts.files}`);
-console.log(`Local links checked: ${counts.local}`);
-console.log('Intentional exclusions:');
-console.log(`  Documentation-site root routes: ${counts.siteRoutes}`);
-console.log(`  External HTTP(S) links: ${counts.externalHttp}`);
-console.log(`  Localhost HTTP(S) links: ${counts.localhost}`);
-console.log(`  Other non-file URI schemes: ${counts.otherSchemes}`);
+function verifyDocumentation() {
+    const markdownFiles = findMarkdownFiles(documentationRoot);
+    counts.files = markdownFiles.length;
+
+    for (const sourceFile of markdownFiles) {
+        checkFile(sourceFile);
+    }
+
+    console.log(`Markdown files scanned: ${counts.files}`);
+    console.log(`Local links checked: ${counts.local}`);
+    console.log('Intentional exclusions:');
+    console.log(`  Documentation-site root routes: ${counts.siteRoutes}`);
+    console.log(`  External HTTP(S) links: ${counts.externalHttp}`);
+    console.log(`  Localhost HTTP(S) links: ${counts.localhost}`);
+    console.log(`  Other non-file URI schemes: ${counts.otherSchemes}`);
 
-if (counts.files === 0) {
-    failures.push('No Markdown files were found.');
+    if (counts.files === 0) {
+        failures.push('No Markdown files were found.');
+    }
+    if (counts.local === 0) {
+        failures.push('No local links were found; refusing to report a vacuous successful scan.');
+    }
+
+    if (failures.length > 0) {
+        console.error('');
+        console.error(`Broken local links: ${failures.length}`);
+        for (const failure of failures) {
+            console.error(`  ${failure}`);
+        }
+        process.exitCode = 1;
+    } else {
+        console.log('Broken local links: 0');
+    }
 }
-if (counts.local === 0) {
-    failures.push('No local links were found; refusing to report a vacuous successful scan.');
+
+function runSelfTests() {
+    const destinations = [];
+    collectInlineLinkDestinations([
+        '[escaped](guide\\(advanced\\).md#A\\-heading)',
+        '[nested [label]](<route with spaces.mdx#anchor>)',
+        '[title](route/index "A (title)")'
+    ].join('\n'), destinations);
+
+    assertSelfTest(
+        destinations.map(destination => destination.target).join('|') ===
+            'guide(advanced).md#A-heading|route with spaces.mdx#anchor|route/index',
+        'escaped, nested, and titled inline destinations are parsed incorrectly'
+    );
+
+    const malformedHeading = 'Safe <<span data-label=">">Injected</span>> Heading';
+    assertSelfTest(
+        slugifyHeading(malformedHeading) === 'safe-heading',
+        'nested HTML can bypass heading normalization'
+    );
+    assertSelfTest(
+        slugifyHeading('Use <code>Canvas</code> &amp; Data') === 'use-canvas-data',
+        'valid inline HTML is stripped incorrectly'
+    );
+
+    const malformedDestination = `[malformed](${'\\x'.repeat(100_000)}`;
+    const malformedDestinations = [];
+    const startedAt = process.hrtime.bigint();
+    collectInlineLinkDestinations(malformedDestination, malformedDestinations);
+    const elapsedMilliseconds = Number(process.hrtime.bigint() - startedAt) / 1_000_000;
+    assertSelfTest(malformedDestinations.length === 0, 'a malformed destination was accepted');
+    assertSelfTest(elapsedMilliseconds < 2_000, `malformed destination parsing took ${elapsedMilliseconds.toFixed(1)} ms`);
+
+    console.log(`Self-test passed: adversarial destination parsed in ${elapsedMilliseconds.toFixed(1)} ms; nested heading markup normalized.`);
 }
 
-if (failures.length > 0) {
-    console.error('');
-    console.error(`Broken local links: ${failures.length}`);
-    for (const failure of failures) {
-        console.error(`  ${failure}`);
+function assertSelfTest(condition, message) {
+    if (!condition) {
+        throw new Error(`Self-test failed: ${message}`);
     }
-    process.exitCode = 1;
-} else {
-    console.log('Broken local links: 0');
 }
 
 function findMarkdownFiles(root) {
@@ -79,8 +131,7 @@ function checkFile(sourceFile) {
     const references = readReferenceDefinitions(maskFencedCode(content));
     const destinations = [];
 
-    const inlineLinkPattern = /!?\[(?:\\.|[^\]\\])*\]\(\s*(?:<((?:\\.|[^>])*)>|((?:\\.|[^\s)])+))/g;
-    collectMatches(linkContent, inlineLinkPattern, destinations, match => match[1] ?? match[2]);
+    collectInlineLinkDestinations(linkContent, destinations);
 
     const referenceLinkPattern = /!?\[([^\]\n]+)\]\[([^\]\n]*)\]/g;
     collectMatches(linkContent, referenceLinkPattern, destinations, match => {
@@ -102,6 +153,160 @@ function checkFile(sourceFile) {
     }
 }
 
+function collectInlineLinkDestinations(content, destinations) {
+    let position = 0;
+    while (position < content.length) {
+        if (content[position] === '\\') {
+            position += 2;
+            continue;
+        }
+        if (content[position] !== '[') {
+            position += 1;
+            continue;
+        }
+
+        const parsedLink = parseInlineLink(content, position);
+        if (!parsedLink) {
+            position += 1;
+            continue;
+        }
+
+        const linkIndex = position > 0 && content[position - 1] === '!' ? position - 1 : position;
+        destinations.push({ index: linkIndex, target: unescapeMarkdown(parsedLink.target.trim()) });
+        position = parsedLink.end;
+    }
+}
+
+function parseInlineLink(content, labelStart) {
+    let bracketDepth = 1;
+    let position = labelStart + 1;
+
+    while (position < content.length && bracketDepth > 0) {
+        const character = content[position];
+        if (character === '\\') {
+            position += 2;
+            continue;
+        }
+        if (character === '[') {
+            bracketDepth += 1;
+        } else if (character === ']') {
+            bracketDepth -= 1;
+        }
+        position += 1;
+    }
+
+    if (bracketDepth !== 0 || content[position] !== '(') {
+        return undefined;
+    }
+
+    return parseInlineDestination(content, position);
+}
+
+function parseInlineDestination(content, openingParenthesis) {
+    let position = skipMarkdownWhitespace(content, openingParenthesis + 1);
+    const destinationStart = position;
+
+    if (content[position] === '<') {
+        position += 1;
+        const enclosedStart = position;
+        while (position < content.length) {
+            const character = content[position];
+            if (character === '\\') {
+                position += 2;
+                continue;
+            }
+            if (character === '\n' || character === '\r' || character === '<') {
+                return undefined;
+            }
+            if (character === '>') {
+                return finishInlineDestination(content, position + 1, enclosedStart, position);
+            }
+            position += 1;
+        }
+        return undefined;
+    }
+
+    let parenthesisDepth = 0;
+    while (position < content.length) {
+        const character = content[position];
+        if (character === '\\') {
+            position += 2;
+            continue;
+        }
+        if (character === '(') {
+            parenthesisDepth += 1;
+        } else if (character === ')') {
+            if (parenthesisDepth === 0) {
+                return {
+                    target: content.slice(destinationStart, position),
+                    end: position + 1
+                };
+            }
+            parenthesisDepth -= 1;
+        } else if (isMarkdownWhitespace(character)) {
+            if (parenthesisDepth !== 0) {
+                return undefined;
+            }
+            return finishInlineDestination(content, position, destinationStart, position);
+        }
+        position += 1;
+    }
+
+    return undefined;
+}
+
+function finishInlineDestination(content, tailStart, destinationStart, destinationEnd) {
+    const positionAfterWhitespace = skipMarkdownWhitespace(content, tailStart);
+    if (content[positionAfterWhitespace] === ')') {
+        return {
+            target: content.slice(destinationStart, destinationEnd),
+            end: positionAfterWhitespace + 1
+        };
+    }
+    if (positionAfterWhitespace === tailStart) {
+        return undefined;
+    }
+
+    const titleOpening = content[positionAfterWhitespace];
+    const titleClosing = titleOpening === '(' ? ')' : titleOpening;
+    if (titleOpening !== '"' && titleOpening !== "'" && titleOpening !== '(') {
+        return undefined;
+    }
+
+    let position = positionAfterWhitespace + 1;
+    while (position < content.length) {
+        if (content[position] === '\\') {
+            position += 2;
+            continue;
+        }
+        if (content[position] === titleClosing) {
+            position = skipMarkdownWhitespace(content, position + 1);
+            if (content[position] === ')') {
+                return {
+                    target: content.slice(destinationStart, destinationEnd),
+                    end: position + 1
+                };
+            }
+            return undefined;
+        }
+        position += 1;
+    }
+
+    return undefined;
+}
+
+function skipMarkdownWhitespace(content, start) {
+    let position = start;
+    while (position < content.length && isMarkdownWhitespace(content[position])) {
+        position += 1;
+    }
+    return position;
+}
+
+function isMarkdownWhitespace(character) {
+    return character === ' ' || character === '\t' || character === '\n' || character === '\r';
+}
+
 function collectMatches(content, pattern, destinations, getTarget) {
     let match;
     while ((match = pattern.exec(content)) !== null) {
@@ -264,8 +469,7 @@ function anchorsFor(file) {
 }
 
 function slugifyHeading(heading) {
-    return heading
-        .replace(/<[^>]*>/g, '')
+    return stripHeadingTags(heading)
         .replace(/&[a-z\d#]+;/gi, '')
         .trim()
         .toLowerCase()
@@ -273,6 +477,60 @@ function slugifyHeading(heading) {
         .replace(/\s+/g, '-');
 }
 
+function stripHeadingTags(heading) {
+    const output = [];
+    const pendingTag = [];
+    let tagDepth = 0;
+    let braceDepth = 0;
+    let quote;
+    let escaped = false;
+
+    for (const character of heading) {
+        if (tagDepth === 0) {
+            if (character === '<') {
+                tagDepth = 1;
+                pendingTag.push(character);
+            } else {
+                output.push(character);
+            }
+            continue;
+        }
+
+        pendingTag.push(character);
+        if (escaped) {
+            escaped = false;
+            continue;
+        }
+        if (quote) {
+            if (character === '\\') {
+                escaped = true;
+            } else if (character === quote) {
+                quote = undefined;
+            }
+            continue;
+        }
+        if (character === '"' || character === "'") {
+            quote = character;
+        } else if (character === '{') {
+            braceDepth += 1;
+        } else if (character === '}' && braceDepth > 0) {
+            braceDepth -= 1;
+        } else if (character === '<') {
+            tagDepth += 1;
+        } else if (character === '>' && (tagDepth > 1 || braceDepth === 0)) {
+            tagDepth -= 1;
+            if (tagDepth === 0) {
+                pendingTag.length = 0;
+            }
+        }
+    }
+
+    if (pendingTag.length > 0) {
+        output.push(...pendingTag);
+    }
+    return output.join('');
+}
+
 function maskFencedCode(content) {
     let fenceCharacter;
     let fenceLength = 0;

From 2d24f2db12cfd6cf140bf3483aca11197b0a784f Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Mon, 24 Aug 2026 09:11:34 +0200
Subject: [PATCH 033/267] Anonymize downstream migration guidance

Keep public consumer guidance evidence-based through generic archetypes, remove private product provenance and local paths, and retain only legitimate framework/tooling references.
---
 .ai/agents/backend-developer.md               |   4 +-
 .ai/agents/frontend-developer.md              |   2 +-
 .ai/rules/writing-correct-examples.md         |   2 +-
 .ai/skills/edit-cratis-docs/SKILL.md          |   4 +-
 .ai/skills/new-vertical-slice/SKILL.md        |   2 +-
 .../scripts/restructure_evals.py              |  25 ++-
 Documentation/Canvas/index.md                 |  14 +-
 Documentation/Styling/index.md                |   2 +-
 Documentation/migration.md                    | 162 +++++++++---------
 Documentation/ui-foundation.md                |   2 +-
 Source/Canvas/Canvas.css                      |   6 +-
 Source/Canvas/Canvas.tsx                      |  26 +--
 Source/Canvas/CanvasControls.tsx              |  13 +-
 ...ering_capture_attributes_on_the_server.tsx |  14 +-
 Source/Canvas/isWithinScrollableContent.ts    |   4 +-
 Source/Canvas/selfSuspendingFrameLoop.ts      |   2 +-
 .../Canvas/shapes/ChatBubble/ChatMessage.ts   |   3 +-
 .../and_the_history_cannot_be_read.ts         |   4 +-
 .../shapes/ChatBubble/Emoji/recentEmojis.ts   |   2 +-
 .../Canvas/shapes/ChatBubble/FailedReply.tsx  |   4 +-
 .../when_callback_transforms_values.ts        |   4 +-
 .../when_rendering_global_search.tsx          |   2 +-
 .../when_selecting_by_object_reference.tsx    |   2 +-
 .../when_using_builtin_match_modes.ts         |   2 +-
 Source/MIGRATION.md                           |  12 +-
 .../when_scanning_foundation_surfaces.tsx     |   2 +-
 26 files changed, 165 insertions(+), 156 deletions(-)

diff --git a/.ai/agents/backend-developer.md b/.ai/agents/backend-developer.md
index e2a57b49..19c9eacb 100644
--- a/.ai/agents/backend-developer.md
+++ b/.ai/agents/backend-developer.md
@@ -34,13 +34,13 @@ Always read and follow the canonical rules in `.ai/rules/`:
 - Slice type (`State Change`, `State View`, `Automation`, `Translation`)
 - Domain requirements (what the slice should do)
 - Any existing events from other slices this slice depends on
-- The namespace root (read from `global.json` or existing source files, e.g. `Studio`, `Library`)
+- The namespace root (read from `global.json` or existing source files, e.g. `Product`, `Library`)
 
 ---
 
 ## Process
 
-1. **Determine the namespace root** by reading an existing source file to identify the convention (e.g. `Studio`, `Library`, `MyApp`).
+1. **Determine the namespace root** by reading an existing source file to identify the convention (e.g. `Product`, `Library`, `MyApp`).
 2. **Read existing slices** in the same feature to understand naming, existing concepts, and events you may reference.
 3. **Create a single `.cs` file** at `<Feature>/<Slice>/<Slice>.cs` (under the app source root; an optional `<Module>/` may group the feature — there is **no** top-level `Features/` wrapper).
 4. **Validate** by building Debug *and* Release (Debug regenerates the TypeScript proxies and compiles `#if DEBUG` spec code; build Release with `-p:CratisProxiesOutputPath=` to skip re-running proxy generation).
diff --git a/.ai/agents/frontend-developer.md b/.ai/agents/frontend-developer.md
index a2c2ef43..3a1e1996 100644
--- a/.ai/agents/frontend-developer.md
+++ b/.ai/agents/frontend-developer.md
@@ -220,7 +220,7 @@ export const Projects = () => {
 
 ## Browser verification (optional)
 
-If the workspace has `workbench.browser.enableChatTools` enabled, use the agentic browser tools to verify the UI after implementation:
+If agentic browser tools are available in the workspace, use them to verify the UI after implementation:
 
 1. Open the app page in the integrated browser.
 2. Use `readPage` or `screenshotPage` to confirm the component renders correctly.
diff --git a/.ai/rules/writing-correct-examples.md b/.ai/rules/writing-correct-examples.md
index d1add3e6..d69a90b9 100644
--- a/.ai/rules/writing-correct-examples.md
+++ b/.ai/rules/writing-correct-examples.md
@@ -13,7 +13,7 @@ Documentation code examples are **copied verbatim** by evaluators. A snippet tha
 
 For each framework type, attribute, method, prop, hook, or import in an example, confirm it exists and has that exact shape in **source**, not in another doc page (the docs themselves had the bugs):
 
-- **C# / backend** — grep real usage in a reference application (e.g. Cratis **Studio**) and the product `Source/` trees of the Cratis repos checked out alongside this one (`Arc/Source`, `Chronicle/Source`). For extension methods, find the `public static … (this <Type> …)` signature and note **which type it extends**.
+- **C# / backend** — grep real usage in a representative application and the `Source/` trees of the relevant Cratis framework repos checked out alongside it (for example, `Arc/Source` and `Chronicle/Source`). For extension methods, find the `public static … (this <Type> …)` signature and note **which type it extends**.
 - **React / Components** — the authoritative prop names are in the compiled type defs of the installed package (`node_modules/@cratis/components/dist/esm/**/*.d.ts`) or the `Components` source `dist`. Real usage: a reference app's `*.tsx`.
 - **Invented *domain* names are fine** (event/concept/command names like `AuthorRegistered`, `BookId`). Only **framework APIs** must be real. Never invent a framework interface, attribute, prop, method, or import path.
 
diff --git a/.ai/skills/edit-cratis-docs/SKILL.md b/.ai/skills/edit-cratis-docs/SKILL.md
index 3b4ab2f6..5ccb5a69 100644
--- a/.ai/skills/edit-cratis-docs/SKILL.md
+++ b/.ai/skills/edit-cratis-docs/SKILL.md
@@ -16,7 +16,7 @@ Map the page URL to its owning repo:
 | URL | Source file |
 |---|---|
 | `/chronicle/**` | `Chronicle/Documentation/**` |
-| `/arc/**` | `Arc/Documentation/**` (the `ApplicationModel` repo, cloned as `Arc`) |
+| `/arc/**` | `Arc/Documentation/**` |
 | `/components/**` | `Components/Documentation/**` |
 | `/cli/**`, `/fundamentals/**`, `/contributing/**` | the matching repo's `Documentation/` |
 | `/`, `/why-cratis`, `/cratis-stack`, `/glossary`, `/comparisons/**`, `/adopting-cratis`, … | Site-level pages: use the Documentation repo; source lives in `Documentation/web/src/content/docs/*.{md,mdx}`. |
@@ -28,7 +28,7 @@ Example: `/chronicle/concepts/event-source/` → `Chronicle/Documentation/concep
 ## 2. Edit the source
 
 - Match the page's **Diátaxis type** (tutorial / how-to / explanation / reference) and the **tour voice** (teach, don't dump) — see the **`writing-cratis-docs`** rule (the tour-voice checklist + Starlight authoring tools). Don't mix types.
-- **Verify every framework API in a code example against real source** before writing it — readers paste them verbatim. (See the `writing-correct-examples` rule; grep Studio `*.cs`/`*.tsx` and the product `Source/` trees.)
+- **Verify every framework API in a code example against real source** before writing it — readers paste them verbatim. (See the `writing-correct-examples` rule; grep a representative application's `*.cs`/`*.tsx` files and the relevant framework `Source/` trees.)
 - Link rules: product `.md` may use `./foo.md`; links to a `.mdx` page must be **extension-less** (`./foo`); site-level `.mdx` uses clean root-relative URLs (`/arc/...`).
 
 ## 3. Sync, preview, verify
diff --git a/.ai/skills/new-vertical-slice/SKILL.md b/.ai/skills/new-vertical-slice/SKILL.md
index 31a08c86..696ffa02 100644
--- a/.ai/skills/new-vertical-slice/SKILL.md
+++ b/.ai/skills/new-vertical-slice/SKILL.md
@@ -16,7 +16,7 @@ Choose **one** of:
 
 ## Step 2 — Determine the namespace root
 
-Read `global.json` and existing `.cs` files under the app source root to find the namespace root (e.g. `Studio`, `Library`). Never hard-code it.
+Read `global.json` and existing `.cs` files under the app source root to find the namespace root (e.g. `Product`, `Library`). Never hard-code it.
 
 ## Step 3 — Create the C# slice file
 
diff --git a/.ai/skills/skill-creator/scripts/restructure_evals.py b/.ai/skills/skill-creator/scripts/restructure_evals.py
index d5a34eae..796be6bf 100644
--- a/.ai/skills/skill-creator/scripts/restructure_evals.py
+++ b/.ai/skills/skill-creator/scripts/restructure_evals.py
@@ -1,21 +1,30 @@
 #!/usr/bin/env python3
-"""Restructure eval workspace: move grading.json into run-1/ dirs and add summary fields."""
+# Copyright (c) Cratis. All rights reserved.
+# Licensed under the MIT license. See LICENSE file in the project root for full license information.
+"""Restructure an eval workspace and add summary fields to each grading result."""
+import argparse
 import json
 import shutil
 from pathlib import Path
 
-base = Path("/Volumes/sourcecode/repos/cratis/Documentation/.github/skills/skills-eval-workspace/iteration-1")
+parser = argparse.ArgumentParser(description=__doc__)
+parser.add_argument("workspace", type=Path, help="Eval workspace to restructure")
+arguments = parser.parse_args()
+workspace = arguments.workspace.resolve()
 
-for grading_file in sorted(base.rglob("grading.json")):
+if not workspace.is_dir():
+    parser.error(f"workspace is not a directory: {workspace}")
+
+for grading_file in sorted(workspace.rglob("grading.json")):
     parent = grading_file.parent
     if parent.name not in ("with_skill", "without_skill"):
         continue
 
-    with open(grading_file) as f:
-        grading = json.load(f)
+    with open(grading_file, encoding="utf-8") as grading_stream:
+        grading = json.load(grading_stream)
 
     expectations = grading.get("expectations", [])
-    passed = sum(1 for e in expectations if e.get("passed", False))
+    passed = sum(1 for expectation in expectations if expectation.get("passed", False))
     failed = len(expectations) - passed
     total = len(expectations)
     pass_rate = round(passed / total, 4) if total > 0 else 0.0
@@ -30,8 +39,8 @@
     run_dir = parent / "run-1"
     run_dir.mkdir(exist_ok=True)
 
-    with open(run_dir / "grading.json", "w") as f:
-        json.dump(grading, f, indent=2)
+    with open(run_dir / "grading.json", "w", encoding="utf-8") as grading_stream:
+        json.dump(grading, grading_stream, indent=2)
 
     timing_file = parent / "timing.json"
     if timing_file.exists():
diff --git a/Documentation/Canvas/index.md b/Documentation/Canvas/index.md
index 96205b46..9b3e04fc 100644
--- a/Documentation/Canvas/index.md
+++ b/Documentation/Canvas/index.md
@@ -101,25 +101,25 @@ const handleReady = (handle: CanvasHandle) => {
 
 ### Product capture/compositor integration
 
-Components does not know Studio's Liquid Glass attribute vocabulary. A product opts into its own markers explicitly:
+Components does not know a product compositor's attribute vocabulary. A product opts into its own markers explicitly:
 
 ```tsx
 import { Canvas, type CanvasCaptureAttributes } from '@cratis/components/Canvas';
-import LiquidGlassSurface from './LiquidGlassSurface'; // product-owned surface
+import { ProductCompositorSurface } from './ProductCompositorSurface';
 
 const captureAttributes: CanvasCaptureAttributes = {
-    layer: 'data-liquid-glass-layer',
-    content: 'data-liquid-glass-content',
-    transformHost: 'data-liquid-glass-transform-host',
+    layer: 'data-product-compositor-layer',
+    content: 'data-product-compositor-content',
+    transformHost: 'data-product-compositor-transform-host',
 };
 
 <Canvas
     captureAttributes={captureAttributes}
-    controlsGlassSurface={<LiquidGlassSurface cornerRadius={999} />}
+    controlsGlassSurface={<ProductCompositorSurface cornerRadius={999} />}
 />;
 ```
 
-`layer` marks the Pixi canvas, `content` marks non-plain integrated controls, and `transformHost` marks both pan/zoom hosts. Omit the prop when the product has no capture pipeline. This keeps provider-specific names and update ownership outside Components.
+`layer` marks the Pixi canvas, `content` marks non-plain integrated controls, and `transformHost` marks both pan/zoom hosts. Omit the prop when the product has no capture pipeline. This keeps product-specific names and update ownership outside Components.
 
 ## Overlays and SSR
 
diff --git a/Documentation/Styling/index.md b/Documentation/Styling/index.md
index 3ea436fb..41d7e152 100644
--- a/Documentation/Styling/index.md
+++ b/Documentation/Styling/index.md
@@ -22,7 +22,7 @@ A product design system omits `theme`, maps its canonical values directly onto `
 | Situation                                           | Imports                                                                     | Product responsibility                                                                                                                        |
 | --------------------------------------------------- | --------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
 | New app that wants the maintained Cratis appearance | `tokens`, `styles`, `theme`                                                 | Choose `cratis-dark`, `cratis-light`, or system preference; override only intentional brand values.                                           |
-| Product with its own tokens, such as Ada            | `tokens`, `styles`, then product CSS                                        | Omit `theme`; map the complete product palette to `--cratis-*`; keep product typography, spacing, motion, contrast, and component treatments. |
+| Product with its own `--product-*` tokens           | `tokens`, `styles`, then product CSS                                        | Omit `theme`; map the complete product palette to `--cratis-*`; keep product typography, spacing, motion, contrast, and component treatments. |
 | Existing app migrating gradually from PrimeReact    | `tokens`, `styles`, optional `theme`, plus the product's existing Prime CSS | Mount Components and Prime providers independently. Keep Prime styling and licensing only for direct Prime surfaces until they are removed.   |
 | Independently themed embedded surface               | `tokens`, `styles`, `theme`                                                 | Put `cratis-theme` on the subtree and add `cratis-dark` or `cratis-light` there.                                                              |
 
diff --git a/Documentation/migration.md b/Documentation/migration.md
index 71636558..643e70d1 100644
--- a/Documentation/migration.md
+++ b/Documentation/migration.md
@@ -225,14 +225,14 @@ For an existing nested Prime stepper preset, map the slots by rendered responsib
 
 The old `stepperpanel.header` wrapper has no one-to-one element. Put list-item layout on `step`, and interactive-header styling on `header`. Replace `data-p-active` selectors with `[data-cratis-part='step'][data-active='true']`.
 
-### Ada-style preset migration
+### Product-owned preset migration
 
-Ada is the representative migration for a product that previously supplied `styledMode({ preset: AdaPreset })`, Prime locale types, a PrimeUI license, and a legacy token bridge:
+Consider a product that previously supplied `styledMode({ preset: ProductPreset })`, Prime locale types, a PrimeUI license, and a legacy token bridge:
 
-1. Remove `styledMode`, `AdaPreset`, and the license from the **Components provider**. If Ada still renders Prime directly, keep its Prime provider, preset, dependencies, and license beside Components until those direct imports are removed.
+1. Remove `styledMode`, `ProductPreset`, and the license from the **Components provider**. If the product still renders Prime directly, keep its Prime provider, preset, dependencies, and license beside Components until those direct imports are removed.
 2. Replace `LocaleProps['locales']` with product-owned message input and map only Components labels into `CratisComponentsMessages`.
-3. Keep `--ada-*` as the canonical design tokens. Replace the `--p-*` and `--surface-*` bridge with direct `--cratis-*` assignments.
-4. Keep Ada's `data-theme` selector and map both light and dark values there; Components does not own Ada's theme lifecycle.
+3. Keep `--product-*` as the canonical design tokens. Replace the `--p-*` and `--surface-*` bridge with direct `--cratis-*` assignments.
+4. Keep the product's theme selector and map both light and dark values there; Components does not own the product's theme lifecycle.
 
 ```tsx
 import type { ReactNode } from 'react';
@@ -241,145 +241,147 @@ import {
     type CratisComponentsMessages,
 } from '@cratis/components/Common';
 
-interface AdaComponentsProviderProps {
+interface ProductComponentsProviderProps {
     children: ReactNode;
     locale?: string;
     messages?: CratisComponentsMessages;
 }
 
-export const AdaComponentsProvider = ({
+export const ProductComponentsProvider = ({
     children,
     locale = 'en-US',
     messages,
-}: AdaComponentsProviderProps) => (
+}: ProductComponentsProviderProps) => (
     <CratisComponentsProvider value={{ locale, messages }} toaster>
         {children}
     </CratisComponentsProvider>
 );
 ```
 
-Import Components structure but omit its optional theme, then load Ada's mapping:
+Import Components structure but omit its optional theme, then load the product mapping:
 
 ```ts
 import '@cratis/components/tokens';
 import '@cratis/components/styles';
-import './ada-components.css';
+import './product-components.css';
 ```
 
 ```css
 :root {
-    --cratis-surface-0: var(--ada-surface);
-    --cratis-surface-100: var(--ada-subtle);
-    --cratis-surface-ground: var(--ada-canvas);
-    --cratis-surface-section: var(--ada-subtle);
-    --cratis-surface-card: var(--ada-surface);
-    --cratis-surface-overlay: var(--ada-surface);
-    --cratis-surface-hover: var(--ada-subtle);
-    --cratis-surface-border: var(--ada-border-default);
-    --cratis-control-background: var(--ada-surface);
-    --cratis-control-border: var(--ada-border-default);
-
-    --cratis-text-color: var(--ada-text-primary);
-    --cratis-text-color-secondary: var(--ada-text-secondary);
-
-    --cratis-primary-color: var(--ada-accent-700);
-    --cratis-primary-color-text: var(--ada-text-inverse);
-    --cratis-primary-300: var(--ada-accent-300);
-    --cratis-primary-400: var(--ada-accent-400);
-    --cratis-primary-500: var(--ada-accent-500);
-    --cratis-primary-600: var(--ada-accent-600);
-    --cratis-action-background: var(--ada-accent-500);
-    --cratis-action-background-hover: var(--ada-accent-600);
-    --cratis-action-background-active: var(--ada-accent-700);
-    --cratis-action-text: var(--ada-text-inverse);
-
-    --cratis-highlight-bg: var(--ada-accent-50);
-    --cratis-highlight-text-color: var(--ada-accent-700);
-    --cratis-green-500: var(--ada-success-fg);
-    --cratis-orange-500: var(--ada-warning-fg);
-    --cratis-red-500: var(--ada-error-fg);
-    --cratis-info-background: var(--ada-info-fg);
-    --cratis-info-text: var(--ada-text-inverse);
-    --cratis-success-background: var(--ada-success-fg);
-    --cratis-success-text: var(--ada-text-inverse);
-    --cratis-warning-background: var(--ada-warning-fg);
-    --cratis-warning-text: var(--ada-text-inverse);
-    --cratis-danger-background: var(--ada-error-fg);
-    --cratis-danger-text: var(--ada-text-inverse);
-    --cratis-control-height: var(--ada-control-min-size);
-    --cratis-control-height-small: var(--ada-control-min-size);
-    --cratis-control-height-large: var(--ada-control-min-size);
+    --cratis-surface-0: var(--product-surface);
+    --cratis-surface-100: var(--product-subtle);
+    --cratis-surface-ground: var(--product-canvas);
+    --cratis-surface-section: var(--product-subtle);
+    --cratis-surface-card: var(--product-surface);
+    --cratis-surface-overlay: var(--product-surface);
+    --cratis-surface-hover: var(--product-subtle);
+    --cratis-surface-border: var(--product-border-default);
+    --cratis-control-background: var(--product-surface);
+    --cratis-control-border: var(--product-border-default);
+
+    --cratis-text-color: var(--product-text-primary);
+    --cratis-text-color-secondary: var(--product-text-secondary);
+
+    --cratis-primary-color: var(--product-accent-700);
+    --cratis-primary-color-text: var(--product-text-inverse);
+    --cratis-primary-300: var(--product-accent-300);
+    --cratis-primary-400: var(--product-accent-400);
+    --cratis-primary-500: var(--product-accent-500);
+    --cratis-primary-600: var(--product-accent-600);
+    --cratis-action-background: var(--product-accent-500);
+    --cratis-action-background-hover: var(--product-accent-600);
+    --cratis-action-background-active: var(--product-accent-700);
+    --cratis-action-text: var(--product-text-inverse);
+
+    --cratis-highlight-bg: var(--product-accent-50);
+    --cratis-highlight-text-color: var(--product-accent-700);
+    --cratis-green-500: var(--product-success-fg);
+    --cratis-orange-500: var(--product-warning-fg);
+    --cratis-red-500: var(--product-error-fg);
+    --cratis-info-background: var(--product-info-fg);
+    --cratis-info-text: var(--product-text-inverse);
+    --cratis-success-background: var(--product-success-fg);
+    --cratis-success-text: var(--product-text-inverse);
+    --cratis-warning-background: var(--product-warning-fg);
+    --cratis-warning-text: var(--product-text-inverse);
+    --cratis-danger-background: var(--product-error-fg);
+    --cratis-danger-text: var(--product-text-inverse);
+    --cratis-control-height: var(--product-control-min-size);
+    --cratis-control-height-small: var(--product-control-min-size);
+    --cratis-control-height-large: var(--product-control-min-size);
     --cratis-border-radius: 6px;
-    --cratis-focus-ring: var(--ada-ring-focus);
-    --cratis-maskbg: var(--ada-scrim);
-    --cratis-shadow-subtle: var(--ada-shadow-sm);
-    --cratis-shadow-overlay: var(--ada-shadow-md);
-    --cratis-shadow-dialog: var(--ada-shadow-xl);
-    --cratis-shadow-toast: var(--ada-shadow-md);
+    --cratis-focus-ring: var(--product-ring-focus);
+    --cratis-maskbg: var(--product-scrim);
+    --cratis-shadow-subtle: var(--product-shadow-sm);
+    --cratis-shadow-overlay: var(--product-shadow-md);
+    --cratis-shadow-dialog: var(--product-shadow-xl);
+    --cratis-shadow-toast: var(--product-shadow-md);
 }
 ```
 
-Because these assignments reference Ada tokens, Ada's existing dark, enhanced-contrast, control-size, status, and accessibility selectors flow through without duplicating the mapping. Ada continues to own typography, spacing, motion, elevation, and product-specific component treatments.
+Because these assignments reference product tokens, existing dark, enhanced-contrast, control-size, status, and accessibility selectors flow through without duplicating the mapping. The product continues to own typography, spacing, motion, elevation, and component-specific treatments.
 
-If Core still uses Prime's locale-aware `InputNumber`, keep it as an explicitly bounded Prime island. Mount the Prime provider independently around that remaining surface and retain its installed-version theme/license requirements; do not put renderer keys back into `CratisComponentsProvider`. Lobby can remove Prime as soon as it has no direct Prime imports. Remove the separate Prime provider only when number grouping, decimal handling, fraction digits, prefix/suffix, min/max, and command binding have an accepted renderer-independent replacement.
+If one product area still uses Prime's locale-aware `InputNumber`, keep it as an explicitly bounded Prime island. Mount the Prime provider independently around that remaining surface and retain its installed-version theme/license requirements; do not put renderer keys back into `CratisComponentsProvider`. Other areas can remove Prime as soon as they have no direct Prime imports. Remove the separate Prime provider only when number grouping, decimal handling, fraction digits, prefix/suffix, min/max, and command binding have an accepted renderer-independent replacement.
 
-This preserves Ada's token and theme ownership while removing the circular Ada → Prime preset → Prime variables → Cratis translation.
+This preserves product token and theme ownership while removing the circular product → Prime preset → Prime variables → Cratis translation.
 
-Ada's custom role filter must migrate in the same change: replace its Prime `FilterMatchMode` import with `DataTableFilterMatchMode`, replace `registerMatcher` with `registerDataTableFilterMatcher`, and store the returned `matchMode` in the role constraint. Built-in mode strings remain behaviorally compatible, but using the Cratis constants removes the renderer type dependency; custom registration never crosses registries automatically.
+Custom filters must migrate in the same change: replace the Prime `FilterMatchMode` import with `DataTableFilterMatchMode`, replace `registerMatcher` with `registerDataTableFilterMatcher`, and store the returned `matchMode` in the corresponding constraint. Built-in mode strings remain behaviorally compatible, but using the Cratis constants removes the renderer type dependency; custom registration never crosses registries automatically.
 
-### Stagehand: migrate directly from Components 2
+### Migrate directly from Components 2
 
 A PrimeReact 10 application does not need to adopt Components 3/PrimeReact 11 before moving to Components 4. Migrate the two boundaries independently:
 
 1. Keep the existing Prime 10 provider and Lara/product theme while direct Prime controls remain.
 2. Mount `CratisComponentsProvider` separately and import `tokens` plus `styles`.
-3. Map Stagehand's product palette directly to `--cratis-*`; omit the baseline `theme` when product CSS owns the appearance.
+3. Map the product palette directly to `--cratis-*`; omit the baseline `theme` when product CSS owns the appearance.
 4. Use the Cratis `Column` marker inside `DataPage`. Alias and retain Prime `Column` only for grouped/expandable direct Prime tables.
 5. Replace low-risk direct Button, Tag, Badge, Avatar, Message, Progress, Dropdown, Dialog, and Toast surfaces in batches.
 6. Retain Prime or build product primitives for tabs, sidebars, timelines, select-button groups, menubars, and advanced tables until their requirements have an intentional replacement.
 7. Retain PrimeIcons while class strings remain; move to React icons/product SVGs separately.
 
-This avoids an unnecessary intermediate Prime 11 migration and does not imply that Components configures Stagehand's remaining Prime 10 surfaces.
+This avoids an unnecessary intermediate Prime 11 migration and does not imply that Components configures the remaining Prime 10 surfaces.
 
-### Chronicle Workbench: baseline-first coexistence
+### Baseline-first coexistence with PrimeReact 11
 
-Workbench can adopt Components 4 while retaining Prime 11 directly:
+A Components 3 / PrimeReact 11 application can adopt Components 4 while retaining Prime 11 directly:
 
 1. Mount Components and Prime providers independently. Keep Prime dependencies, theme, and license for direct Prime controls.
 2. Remove `styledMode()` and `@cratis/components/primereact-v10-palette` from the Components side.
 3. Start with `tokens`, `styles`, and `theme` plus `cratis-dark` for the maintained baseline dark appearance.
-4. Keep temporary legacy `--surface-*` aliases in Workbench-owned CSS while direct Prime and old product styles remain; migrate those references to `--cratis-*` over time.
-5. Replace simple Workbench-owned Prime wrappers where Components or native composition has parity.
+4. Keep temporary legacy `--surface-*` aliases in product-owned CSS while direct Prime and old product styles remain; migrate those references to `--cratis-*` over time.
+5. Replace simple product-owned Prime wrappers where Components or native composition has parity.
 6. Keep the application-owned grouped/lazy table adapter until #109 or another proven state seam covers its grouping and controlled server sorting.
 7. Use Components `Toolbar` only for canvas/tool-palette interactions. Keep a native action row for ordinary page actions rather than forcing a canvas toolbar replacement.
 
-Every Workbench/host entry point that renders Components must import the structural stylesheet. A package that imports Components must also declare it rather than relying on another workspace's dependency.
+Every host entry point that renders Components must import the structural stylesheet. A package that imports Components must also declare it rather than relying on another workspace's dependency.
 
-### Studio Liquid Glass migration
+### Product compositor migration
 
-Studio is the representative deeply customized consumer. Keep `LiquidGlassSurface` and product shaders in Studio; replace renderer types and selectors at the Components boundary:
+A deeply customized product can retain its shaders and measurement wrappers while replacing renderer types and selectors at the Components boundary:
 
 - Type dialog maps as `DialogParts`: `mask` → `backdrop`, `headerTitle` → `title`, and `closeButton` → `close`.
 - Type stepper maps as `StepperParts`: `nav` → `list`, `panelContainer` → `panels`, `stepperpanel.root` → `step`, `action` → `header`, and `content` → `panel`.
-- Toolbar composition now exposes `ToolbarParts`, `ToolbarButtonParts`, `ToolbarGroupParts`, `ToolbarSeparatorParts`, `ToolbarLayoutParts`, `ToolbarSectionParts`, `ToolbarFolderParts`, and `ToolbarFanOutParts`. Studio's measurement wrapper should identify boundaries through `toolbar-group`, `toolbar-separator`, `toolbar-layout`, `toolbar-section`, `toolbar-context`, and `toolbar-slot*` `data-cratis-part` values. Direction, mode, expanded, settled, active, and transitioning state are data attributes, so Studio can keep its glass sibling and measurement algorithm without depending on `.toolbar*` implementation classes.
-- For integrated Canvas controls, pass Studio's surface through `controlsGlassSurface`, localized actions through `controlsLabels`, and Studio's compositor marker names through `captureAttributes`. Set `disableControlsGlass` only when Studio intentionally wants the low-cost CSS fallback. Components no longer hardcodes or duplicates Studio's marker vocabulary.
-- Preserve product-owned capture attributes through the documented Canvas prop and ordinary part attributes; keep capture/compositor implementation in Studio.
+- Toolbar composition exposes `ToolbarParts`, `ToolbarButtonParts`, `ToolbarGroupParts`, `ToolbarSeparatorParts`, `ToolbarLayoutParts`, `ToolbarSectionParts`, `ToolbarFolderParts`, and `ToolbarFanOutParts`. A product measurement wrapper should identify boundaries through `toolbar-group`, `toolbar-separator`, `toolbar-layout`, `toolbar-section`, `toolbar-context`, and `toolbar-slot*` `data-cratis-part` values. Direction, mode, expanded, settled, active, and transitioning state are data attributes, so the product can keep its composited sibling and measurement algorithm without depending on `.toolbar*` implementation classes.
+- For integrated Canvas controls, pass the product surface through `controlsGlassSurface`, localized actions through `controlsLabels`, and compositor marker names through `captureAttributes`. Set `disableControlsGlass` only when the product intentionally wants the low-cost CSS fallback. Components does not hardcode or duplicate product marker vocabulary.
+- Preserve product-owned capture attributes through the documented Canvas prop and ordinary part attributes; keep capture/compositor implementation in the product.
 
 ```tsx
+import { ProductCompositorSurface } from './ProductCompositorSurface';
+
 <Canvas
     captureAttributes={{
-        layer: 'data-liquid-glass-layer',
-        content: 'data-liquid-glass-content',
-        transformHost: 'data-liquid-glass-transform-host',
+        layer: 'data-product-compositor-layer',
+        content: 'data-product-compositor-content',
+        transformHost: 'data-product-compositor-transform-host',
     }}
-    controlsGlassSurface={<LiquidGlassSurface /* Studio-owned shader props */ />}
+    controlsGlassSurface={<ProductCompositorSurface cornerRadius={999} />}
     controlsLabels={canvasControlLabels}
 />
 ```
 
 For direct Prime tables, map `value` to `data`. Replace `size='small'`, `stripedRows`, and `Column align` with product classes through `DataTableParts` / `Column` body and header classes. Stop and keep an application-owned or Prime table when the surface requires grouping, row expansion, or controlled lazy/server sorting that `DataTableCore` does not claim to provide. Move Prime `Column` imports used inside `DataPage` to the Cratis marker independently from those advanced tables.
 
-Removing Prime UI imports is not the same as removing a deliberate Prime schema/prototype catalog. If Studio keeps Prime metadata generation or its PrimeReact prototype workspace, Prime remains an intentional tooling/product dependency and must be versioned and licensed on that basis even after application screens migrate.
+Removing Prime UI imports is not the same as removing a deliberate Prime schema/prototype catalog. If a product keeps Prime metadata generation or a PrimeReact prototype workspace, Prime remains an intentional tooling/product dependency and must be versioned and licensed on that basis even after application screens migrate.
 
 Paginator callbacks that formerly returned classes from renderer context must become static Cratis parts plus CSS state selectors:
 
@@ -487,7 +489,7 @@ const roleMatcher = registerDataTableFilterMatcher(
 );
 
 const filters: DataTableFilterMeta = {
-    name: { value: 'Ada', matchMode: DataTableFilterMatchMode.Contains },
+    name: { value: 'Morgan', matchMode: DataTableFilterMatchMode.Contains },
     role: { value: 'admin', matchMode: roleMatcher.matchMode },
 };
 
diff --git a/Documentation/ui-foundation.md b/Documentation/ui-foundation.md
index 6589901c..3d4f1429 100644
--- a/Documentation/ui-foundation.md
+++ b/Documentation/ui-foundation.md
@@ -84,7 +84,7 @@ Components 4 deliberately does not pretend every adjacent problem is solved by t
 - [#159](https://github.com/Cratis/Components/issues/159) remains open for explicit complete-result filtering and sorting through server query arguments before paging. The deprecated `clientFiltering` compatibility prop is not that solution.
 - [#173](https://github.com/Cratis/Components/issues/173) tracks a package-export-driven audit and TSDoc/API-reference coverage. Existing root namespaces are intentionally retained for Components 4 consumer compatibility; any future export removal requires explicit consumer evidence and an appropriate major boundary.
 - [#174](https://github.com/Cratis/Components/issues/174) tracks typed provider messages for the remaining Components-owned labels.
-- [#175](https://github.com/Cratis/Components/issues/175) tracks a locale-aware number input so Ada can eventually remove its final specialized Prime input without losing number UX.
+- [#175](https://github.com/Cratis/Components/issues/175) tracks a locale-aware number input so products can remove specialized Prime inputs without losing number UX.
 
 These are follow-up contracts, not undocumented work required to use the Components 4 foundation.
 
diff --git a/Source/Canvas/Canvas.css b/Source/Canvas/Canvas.css
index 66d1ab05..68a1fcce 100644
--- a/Source/Canvas/Canvas.css
+++ b/Source/Canvas/Canvas.css
@@ -13,7 +13,7 @@
        user-select: text explicitly), but the canvas as a whole must never let a drag start a native
        text/element selection instead of a move or resize — a freshly created item can be dragged
        before its own CSS has had a chance to matter to a gesture that started a pixel outside its
-       still-settling bounds, and the resulting native selection is what StudioIssues#227 reports. */
+       still-settling bounds, which would otherwise start a native selection. */
     -webkit-user-select: none;
     user-select: none;
 }
@@ -24,8 +24,8 @@
     display: inline-flex;
 }
 
-/* Fallback for large boards where the LiquidGlass capture is too expensive: a frosted pill using the
-   GPU-composited backdrop-filter instead of an html2canvas re-rasterization every frame. */
+/* Fallback for large boards where a full-scene compositor capture is too expensive: a frosted pill
+   using the GPU-composited backdrop-filter instead of re-rasterizing every interaction frame. */
 .canvas-controls-glass--plain {
     background: color-mix(in srgb, var(--cratis-surface-card) 78%, transparent);
     backdrop-filter: blur(12px);
diff --git a/Source/Canvas/Canvas.tsx b/Source/Canvas/Canvas.tsx
index af9c8cad..5dc82317 100644
--- a/Source/Canvas/Canvas.tsx
+++ b/Source/Canvas/Canvas.tsx
@@ -272,9 +272,9 @@ function Canvas<T extends CanvasItemData = CanvasItemData>({
     const isPanningRef = useRef(false);
     const lastPointerRef = useRef({ x: 0, y: 0 });
 
-    // Direct DOM write, not React state — the container's base cursor is 'default' (StudioIssues#222:
-    // an idle background shouldn't look grabbable until you actually start dragging it), and swapping
-    // to 'grabbing' for the life of a drag-pan is exactly the kind of per-gesture churn this file
+    // Direct DOM write, not React state — an idle background should not look grabbable until a drag
+    // starts. Swapping to 'grabbing' for the life of a drag-pan is exactly the kind of per-gesture
+    // churn this file
     // already avoids re-rendering for elsewhere (see the transform writes below).
     const setPanCursor = useCallback((panning: boolean) => {
         if (containerRef.current)
@@ -465,8 +465,8 @@ function Canvas<T extends CanvasItemData = CanvasItemData>({
             // Initializing a renderer hooks pixi's SchedulerSystem onto the auto-starting system
             // ticker, which then runs a requestAnimationFrame loop forever even though nothing here
             // renders from a ticker (autoStart is false and every render is explicit) — one of the
-            // permanent loops that kept an idle board page busy (StudioIssues#200). Stop it after
-            // every init, because each new renderer restarts it; render() drives the scheduled
+            // permanent loops that kept an idle canvas busy. Stop it after every init, because each
+            // new renderer restarts it; render() drives the scheduled
             // housekeeping instead.
             PIXI.Ticker.system.stop();
 
@@ -575,8 +575,8 @@ function Canvas<T extends CanvasItemData = CanvasItemData>({
             if (!container) return;
 
             // A plain scroll/trackpad gesture landing over a scrollable overlay (a chat's message list
-            // and similar) scrolls that content instead of panning the board underneath it
-            // (StudioIssues#229). A zoom gesture (ctrl/cmd) always wins — pinch-to-zoom over a chat
+            // and similar) scrolls that content instead of panning the board underneath it. A zoom
+            // gesture (ctrl/cmd) always wins — pinch-to-zoom over a chat
             // panel is still a zoom, not a captured scroll.
             if (
                 !(e.ctrlKey || e.metaKey) &&
@@ -653,8 +653,8 @@ function Canvas<T extends CanvasItemData = CanvasItemData>({
         const handleGestureEnd = (event: Event) => event.preventDefault();
 
         // Explicitly non-passive: WebKit is free to treat an options-less gesture listener as
-        // passive, silently ignoring preventDefault() — which reads as "pinch zooms the browser
-        // page" on an iPad Magic Keyboard trackpad (StudioIssues#241, previously #73).
+        // passive, silently ignoring preventDefault() — which would zoom the browser page instead
+        // of the canvas on an iPad Magic Keyboard trackpad.
         container.addEventListener('gesturestart', handleGestureStart, {
             passive: false,
         });
@@ -673,14 +673,14 @@ function Canvas<T extends CanvasItemData = CanvasItemData>({
     // subtree — but a toolbar, panel, or minimap floating over the canvas is frequently portalled to
     // document.body (or otherwise rendered as a sibling, not a descendant), so a pinch or Ctrl/Cmd+
     // wheel with the cursor sitting over one of those never reaches the listeners above at all, and
-    // the browser is free to zoom the whole page instead (StudioIssues#228). Listen at the window
-    // level too, and go purely by screen position — no matter what element actually receives the
-    // event, if it lands within the canvas's own rectangle the browser's native zoom is cancelled.
+    // the browser is free to zoom the whole page instead. Listen at the window level too, and go
+    // purely by screen position — no matter what element actually receives the
+    // event, if it lands within the canvas's own rectangle the browser's native zoom is canceled.
     // For events whose target sits inside the canvas subtree this only cancels the browser zoom —
     // the container's own listeners drive the canvas zoom, so applying it here too would double up.
     // For a pinch whose target is a portalled sibling (never reaching the container listeners), it
     // also drives the same zoom-towards-focus, so a pinch over a floating panel zooms the board
-    // instead of dying with the browser zoom cancelled (StudioIssues#241).
+    // instead of being swallowed after the browser zoom is canceled.
     useEffect(() => {
         const isWithinCanvas = (x: number, y: number) => {
             const rect = containerRef.current?.getBoundingClientRect();
diff --git a/Source/Canvas/CanvasControls.tsx b/Source/Canvas/CanvasControls.tsx
index 1e2ad395..f8c732fd 100644
--- a/Source/Canvas/CanvasControls.tsx
+++ b/Source/Canvas/CanvasControls.tsx
@@ -64,11 +64,10 @@ export interface CanvasControlsProps {
     labels?: CanvasControlsLabels;
 
     /**
-     * Renders a glass/acrylic surface behind the control bar, in the same spot a consumer's own
-     * `<LiquidGlassSurface cornerRadius={999} />` (from `@cratis/liquid-glass`, a Studio-only package
-     * this library cannot depend on) used to occupy. When omitted, nothing is rendered there and the
-     * CSS-only `.canvas-controls-glass` / `.canvas-controls-glass--plain` styling still applies -
-     * a plain, GPU-composited backdrop-filter pill. Ignored when `disableGlass` is set.
+     * Renders a product-owned glass/acrylic surface behind the control bar. When omitted, nothing is
+     * rendered there and the CSS-only `.canvas-controls-glass` / `.canvas-controls-glass--plain`
+     * styling still applies: a plain, GPU-composited backdrop-filter pill. Ignored when
+     * `disableGlass` is set.
      */
     glassSurface?: React.ReactNode;
 
@@ -78,8 +77,8 @@ export interface CanvasControlsProps {
     /**
      * Disables the glass surface behind the control bar, falling back to a CSS backdrop-filter pill:
      * `glassSurface` is not rendered, and the product content marker is not set. A full-scene glass
-     * capture (like LiquidGlass's) re-rasterizes the content behind it on every interaction frame; on a
-     * very large canvas that costs hundreds of ms and stalls pan/zoom, so large boards opt out.
+     * capture can re-rasterize the content behind it on every interaction frame; on a very large
+     * canvas that costs hundreds of ms and stalls pan/zoom, so large boards opt out.
      */
     disableGlass?: boolean;
 }
diff --git a/Source/Canvas/for_Canvas/when_rendering_capture_attributes_on_the_server.tsx b/Source/Canvas/for_Canvas/when_rendering_capture_attributes_on_the_server.tsx
index b0ebca76..e1e5bcce 100644
--- a/Source/Canvas/for_Canvas/when_rendering_capture_attributes_on_the_server.tsx
+++ b/Source/Canvas/for_Canvas/when_rendering_capture_attributes_on_the_server.tsx
@@ -10,26 +10,26 @@ describe('when rendering Canvas capture attributes on the server', () => {
     const html = renderToStaticMarkup(
         <Canvas
             captureAttributes={{
-                content: 'data-product-content',
-                layer: 'data-product-layer',
-                transformHost: 'data-product-transform-host',
+                content: 'data-product-compositor-content',
+                layer: 'data-product-compositor-layer',
+                transformHost: 'data-product-compositor-transform-host',
             }}
-            controlsGlassSurface={<span>Product glass</span>}
+            controlsGlassSurface={<span>Product compositor surface</span>}
         >
             <button type='button'>Canvas content</button>
         </Canvas>,
     );
 
     it('should_mark_both_transform_hosts', () => {
-        expect(html.match(/data-product-transform-host="true"/g)).to.have.length(2);
+        expect(html.match(/data-product-compositor-transform-host="true"/g)).to.have.length(2);
     });
 
     it('should_mark_non_plain_control_content', () => {
-        expect(html).to.contain('data-product-content="true"');
+        expect(html).to.contain('data-product-compositor-content="true"');
     });
 
     it('should_not_hardcode_a_capture_provider', () => {
         const defaultHtml = renderToStaticMarkup(<Canvas showControls={false} />);
-        expect(defaultHtml).not.to.contain('data-liquid-glass-');
+        expect(defaultHtml).not.to.contain('data-product-compositor-');
     });
 });
diff --git a/Source/Canvas/isWithinScrollableContent.ts b/Source/Canvas/isWithinScrollableContent.ts
index 00d6cca2..68469e5d 100644
--- a/Source/Canvas/isWithinScrollableContent.ts
+++ b/Source/Canvas/isWithinScrollableContent.ts
@@ -25,8 +25,8 @@ export function hasScrollableOverflow(metrics: ScrollableMetrics): boolean {
 
 // A wheel/trackpad gesture that lands inside a scrollable overlay — a chat's message list, a properties
 // panel, anything with its own `overflow-y: auto` — must scroll that content natively instead of being
-// captured as a canvas pan (StudioIssues#229). Walking up from the event target toward the canvas
-// container, the first ancestor whose own content actually overflows its box claims the gesture; the
+// captured as a canvas pan. Walking up from the event target toward the canvas container, the first
+// ancestor whose own content actually overflows its box claims the gesture; the
 // search stops at the container itself, so gestures over the bare board are never affected.
 export function isWithinScrollableContent(target: EventTarget | null, container: HTMLElement | null): boolean {
     let element = target instanceof Node ? (target instanceof HTMLElement ? target : target.parentElement) : null;
diff --git a/Source/Canvas/selfSuspendingFrameLoop.ts b/Source/Canvas/selfSuspendingFrameLoop.ts
index 4d90546c..fad7830c 100644
--- a/Source/Canvas/selfSuspendingFrameLoop.ts
+++ b/Source/Canvas/selfSuspendingFrameLoop.ts
@@ -17,7 +17,7 @@ export interface SelfSuspendingFrameLoop {
 }
 
 // An animation-frame loop that runs only while its step reports motion left to follow, instead of
-// burning a callback every frame forever (the board-page idle drain of StudioIssues#200). The step
+// burning a callback every frame forever on an idle canvas. The step
 // runs once per frame and returns whether another frame is needed; when it returns false the loop
 // suspends until the next wake(). The scheduler is injectable so the suspension logic can be
 // specified without a browser.
diff --git a/Source/Canvas/shapes/ChatBubble/ChatMessage.ts b/Source/Canvas/shapes/ChatBubble/ChatMessage.ts
index 91a14946..37040572 100644
--- a/Source/Canvas/shapes/ChatBubble/ChatMessage.ts
+++ b/Source/Canvas/shapes/ChatBubble/ChatMessage.ts
@@ -32,8 +32,7 @@ export interface ChatMessage {
 
     /**
      * Set when the turn carried the work out rather than only describing it — the agent was asked to
-     * change something and went and changed it. Such a message needs no offer to hand it to Studio: it
-     * already is the action.
+     * change something and went and changed it. Such a message needs no additional action offer.
      */
     didAct?: boolean;
 
diff --git a/Source/Canvas/shapes/ChatBubble/Emoji/for_recentEmojis/when_offering_the_quick_row/and_the_history_cannot_be_read.ts b/Source/Canvas/shapes/ChatBubble/Emoji/for_recentEmojis/when_offering_the_quick_row/and_the_history_cannot_be_read.ts
index b0ba7b09..08e5dd12 100644
--- a/Source/Canvas/shapes/ChatBubble/Emoji/for_recentEmojis/when_offering_the_quick_row/and_the_history_cannot_be_read.ts
+++ b/Source/Canvas/shapes/ChatBubble/Emoji/for_recentEmojis/when_offering_the_quick_row/and_the_history_cannot_be_read.ts
@@ -10,11 +10,11 @@ describe('when offering the quick row and the history cannot be read', () => {
 
     beforeEach(() => {
         const rubbish = new a_memory();
-        rubbish.stored['studio.chat.recent-emojis'] = 'not json at all';
+        rubbish.stored['cratis.components.canvas.chat.recent-emojis'] = 'not json at all';
         fromRubbish = recentEmojis(rubbish);
 
         const wrongShape = new a_memory();
-        wrongShape.stored['studio.chat.recent-emojis'] = '{"an":"object"}';
+        wrongShape.stored['cratis.components.canvas.chat.recent-emojis'] = '{"an":"object"}';
         fromTheWrongShape = recentEmojis(wrongShape);
     });
 
diff --git a/Source/Canvas/shapes/ChatBubble/Emoji/recentEmojis.ts b/Source/Canvas/shapes/ChatBubble/Emoji/recentEmojis.ts
index 0e12e9e9..25fdaeca 100644
--- a/Source/Canvas/shapes/ChatBubble/Emoji/recentEmojis.ts
+++ b/Source/Canvas/shapes/ChatBubble/Emoji/recentEmojis.ts
@@ -12,7 +12,7 @@ export const DEFAULT_EMOJIS: readonly string[] = ['👍', '❤️', '😂', '
 /** How many the quick row holds; past this the least recently used drops off the end. */
 export const QUICK_ROW_SIZE = 6;
 
-const STORAGE_KEY = 'studio.chat.recent-emojis';
+const STORAGE_KEY = 'cratis.components.canvas.chat.recent-emojis';
 
 /**
  * The emojis to offer in the quick row: the ones this person reached for most recently, newest first,
diff --git a/Source/Canvas/shapes/ChatBubble/FailedReply.tsx b/Source/Canvas/shapes/ChatBubble/FailedReply.tsx
index e97c3194..cf8d63de 100644
--- a/Source/Canvas/shapes/ChatBubble/FailedReply.tsx
+++ b/Source/Canvas/shapes/ChatBubble/FailedReply.tsx
@@ -51,8 +51,8 @@ export interface FailedReplyProps {
 
     /**
      * Builds the href for a "report this" link from the failure's details. Omit to hide the report
-     * action entirely — this library has no issue tracker of its own to link, so a host that has one
-     * (Studio links a pre-filled GitHub issue) opts in by passing this.
+     * action entirely — this library has no issue tracker of its own to link, so a host opts in by
+     * passing its own report URL builder.
      */
     buildReportUrl?: (details: FailedReplyReportDetails) => string;
 
diff --git a/Source/CommandDialog/for_applyBeforeExecute/when_callback_transforms_values.ts b/Source/CommandDialog/for_applyBeforeExecute/when_callback_transforms_values.ts
index f421953b..fe545838 100644
--- a/Source/CommandDialog/for_applyBeforeExecute/when_callback_transforms_values.ts
+++ b/Source/CommandDialog/for_applyBeforeExecute/when_callback_transforms_values.ts
@@ -4,7 +4,7 @@
 import { applyBeforeExecute } from '../applyBeforeExecute';
 
 describe('when applyBeforeExecute is given a transforming callback', () => {
-    const current = { id: '', name: 'Ada' };
+    const current = { id: '', name: 'Morgan' };
     let result: { id: string; name: string };
 
     beforeEach(async () => {
@@ -16,6 +16,6 @@ describe('when applyBeforeExecute is given a transforming callback', () => {
     });
 
     it('should_preserve_untouched_values', () => {
-        result.name.should.equal('Ada');
+        result.name.should.equal('Morgan');
     });
 });
diff --git a/Source/DataTables/for_DataTableCore/when_rendering_global_search.tsx b/Source/DataTables/for_DataTableCore/when_rendering_global_search.tsx
index f4331b0f..4245b2e9 100644
--- a/Source/DataTables/for_DataTableCore/when_rendering_global_search.tsx
+++ b/Source/DataTables/for_DataTableCore/when_rendering_global_search.tsx
@@ -24,7 +24,7 @@ describe('when rendering global search', () => {
         await act(async () => {
             root.render(
                 <DataTableCore
-                    data={[{ name: 'Ada' }]}
+                    data={[{ name: 'Morgan' }]}
                     emptyMessage='No people'
                     globalFilterFields={['name']}
                     globalSearchPlaceholder='Find people'
diff --git a/Source/DataTables/for_DataTableCore/when_selecting_by_object_reference.tsx b/Source/DataTables/for_DataTableCore/when_selecting_by_object_reference.tsx
index 25f19146..9ea141ea 100644
--- a/Source/DataTables/for_DataTableCore/when_selecting_by_object_reference.tsx
+++ b/Source/DataTables/for_DataTableCore/when_selecting_by_object_reference.tsx
@@ -27,7 +27,7 @@ describe('when selecting by object reference', () => {
         container = document.createElement('div');
         document.body.append(container);
         root = createRoot(container);
-        await render([selected, { name: 'Ada' }], selected);
+        await render([selected, { name: 'Morgan' }], selected);
     });
 
     afterEach(async () => {
diff --git a/Source/DataTables/for_DataTableFilterMeta/when_using_builtin_match_modes.ts b/Source/DataTables/for_DataTableFilterMeta/when_using_builtin_match_modes.ts
index 549e9a05..5746c629 100644
--- a/Source/DataTables/for_DataTableFilterMeta/when_using_builtin_match_modes.ts
+++ b/Source/DataTables/for_DataTableFilterMeta/when_using_builtin_match_modes.ts
@@ -11,7 +11,7 @@ import {
 describe('when using built-in match modes', () => {
     const filters: DataTableFilterMeta = {
         name: {
-            value: 'Ada',
+            value: 'Morgan',
             matchMode: DataTableFilterMatchMode.Contains,
         },
         legacyCustomField: {
diff --git a/Source/MIGRATION.md b/Source/MIGRATION.md
index 37fca829..06d3eb0d 100644
--- a/Source/MIGRATION.md
+++ b/Source/MIGRATION.md
@@ -222,17 +222,17 @@ For an existing nested Prime stepper preset, map the slots by rendered responsib
 
 The old `stepperpanel.header` wrapper has no one-to-one element. Put list-item layout on `step`, and interactive-header styling on `header`. Replace `data-p-active` selectors with `[data-cratis-part='step'][data-active='true']`.
 
-### Representative downstream migrations
+### Representative migration archetypes
 
-For an Ada-style design system, remove `styledMode`, `AdaPreset`, Prime locale types, and the PrimeUI license from the Components provider. Keep `--ada-*` as the canonical tokens and map them directly to `--cratis-*`. If the product still imports Prime directly, retain a separate Prime provider, preset, dependencies, and license until those imports are removed. Migrate Ada's role filter from `registerMatcher` to `registerDataTableFilterMatcher` and use the returned `matchMode` in its constraint.
+For a product-owned design system, remove `styledMode`, `ProductPreset`, Prime locale types, and the PrimeUI license from the Components provider. Keep `--product-*` as the canonical tokens and map them directly to `--cratis-*`. If the product still imports Prime directly, retain a separate Prime provider, preset, dependencies, and license until those imports are removed. Migrate custom filters from `registerMatcher` to `registerDataTableFilterMatcher` and use the returned `matchMode` in each constraint.
 
-A Components 2 / PrimeReact 10 product such as Stagehand can migrate directly to Components 4 without an intermediate Prime 11 conversion. Keep its Prime 10 provider/theme for direct Prime surfaces, mount Components independently, move `DataPage` children to the Cratis `Column`, and migrate direct controls in batches.
+A Components 2 / PrimeReact 10 product can migrate directly to Components 4 without an intermediate Prime 11 conversion. Keep its Prime 10 provider/theme for direct Prime surfaces, mount Components independently, move `DataPage` children to the Cratis `Column`, and migrate direct controls in batches.
 
-A Components 3 / PrimeReact 11 product such as Chronicle Workbench can start with the Components baseline theme while keeping a separate licensed Prime provider. Retain application-owned grouped/lazy tables and ordinary action rows when Components does not claim those behaviors.
+A Components 3 / PrimeReact 11 product can start with the Components baseline theme while keeping a separate licensed Prime provider. Retain application-owned grouped/lazy tables and ordinary action rows when Components does not claim those behaviors.
 
-For Studio Liquid Glass, replace renderer part types with `DialogParts`, `StepperParts`, and the complete Toolbar part family: `ToolbarParts`, `ToolbarButtonParts`, `ToolbarGroupParts`, `ToolbarSeparatorParts`, `ToolbarLayoutParts`, `ToolbarSectionParts`, `ToolbarFolderParts`, and `ToolbarFanOutParts`. Keep Studio's shaders and measurement wrappers product-owned. Measure stable `data-cratis-part` and state boundaries; pass the integrated Canvas surface through `controlsGlassSurface`; pass Studio's layer/content/transform-host marker names through `captureAttributes`; and localize actions through `controlsLabels`.
+For a product-owned compositor, replace renderer part types with `DialogParts`, `StepperParts`, and the complete Toolbar part family: `ToolbarParts`, `ToolbarButtonParts`, `ToolbarGroupParts`, `ToolbarSeparatorParts`, `ToolbarLayoutParts`, `ToolbarSectionParts`, `ToolbarFolderParts`, and `ToolbarFanOutParts`. Keep shaders and measurement wrappers product-owned. Measure stable `data-cratis-part` and state boundaries; pass the integrated Canvas surface through `controlsGlassSurface`; pass `data-product-compositor-*` marker names through `captureAttributes`; and localize actions through `controlsLabels`.
 
-The published migration guide contains the complete Ada, Stagehand, Workbench, and Studio mappings and stop conditions.
+The published migration guide contains the complete mappings and stop conditions for each archetype.
 
 Paginator callbacks that formerly returned classes from renderer context must become static Cratis parts plus CSS state selectors:
 
diff --git a/Source/for_accessibility/when_scanning_foundation_surfaces.tsx b/Source/for_accessibility/when_scanning_foundation_surfaces.tsx
index a711fb74..f7a76281 100644
--- a/Source/for_accessibility/when_scanning_foundation_surfaces.tsx
+++ b/Source/for_accessibility/when_scanning_foundation_surfaces.tsx
@@ -47,7 +47,7 @@ describe('when scanning representative foundation surfaces', () => {
                             onChange={() => undefined}
                         />
                         <DataTableCore
-                            data={[{ id: 1, name: 'Ada' }]}
+                            data={[{ id: 1, name: 'Morgan' }]}
                             dataKey='id'
                             emptyMessage='No people'
                         >

From 5b614303ae01e44b947c3cc4eae794cdf79b8050 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Mon, 24 Aug 2026 21:46:26 +0200
Subject: [PATCH 034/267] Document PrimeReact 11 license enforcement

---
 Documentation/migration-from-2.md | 8 ++++++--
 Documentation/migration.md        | 6 +++++-
 Documentation/ui-foundation.md    | 4 +++-
 Source/MIGRATION.md               | 4 ++++
 4 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/Documentation/migration-from-2.md b/Documentation/migration-from-2.md
index 2d7a5eea..7694d096 100644
--- a/Documentation/migration-from-2.md
+++ b/Documentation/migration-from-2.md
@@ -236,8 +236,12 @@ What the styling choice changes is whether you additionally depend on `@primerea
 
 ### Which license you need
 
-- **[Community License](https://primeui.dev/licenses/community)** — free, and covers individuals, students, non-profits and non-commercial open source. For an organization it requires _all_ of: under $1M USD annual gross revenue, fewer than 5 developers, fewer than 10 employees, and under $3M USD in outside funding. Supports up to 4 developers, renewed annually by confirming eligibility.
-- **[Commercial License](https://primeui.dev/licenses/commercial)** — for everyone else. Per developer, perpetual, one year of updates.
+Keys are issued through a [PrimeUI account](https://primeui.dev/), for both tiers:
+
+- **[Community License](https://primeui.dev/licenses/community)** — free, and covers individuals, students, non-profits and non-commercial open source. For an organization it requires _all_ of: under $1M USD annual gross revenue, fewer than 5 developers, fewer than 10 employees, and under $3M USD in outside funding. Supports up to 4 developers, renewed annually by confirming eligibility. A Community key carries an expiry; after it passes there is a 30-day grace period (a console warning, no banner), then the banner returns until the key is renewed.
+- **[Commercial License](https://primeui.dev/licenses/commercial)** — for everyone else. Per developer, perpetual, one year of updates. The key is checked against the release date of the installed version, so a key stays valid forever for the versions its updates window covers — installing a version released after the window requires renewal, downgrading does not.
+
+Verification happens entirely offline — an Ed25519 signature check against a public key embedded in the package, with no telemetry and no remote connection. Worth knowing for a compliance review: supplying a key sends nothing anywhere.
 
 ### If you redistribute
 
diff --git a/Documentation/migration.md b/Documentation/migration.md
index 643e70d1..8e8a04d9 100644
--- a/Documentation/migration.md
+++ b/Documentation/migration.md
@@ -9,6 +9,10 @@ This is intentionally a major release. Component behavior remains familiar, but
 
 :::note
 Components 3 remains the compatibility line for an application that cannot migrate yet. A separate PrimeReact compatibility package will not be published unless PrimeTek confirms the applicable OEM and redistribution terms in writing.
+
+**What staying on Components 3 means.** Components 3 keeps PrimeReact 11 as a peer dependency, and PrimeReact 11 verifies a PrimeUI license key when its provider mounts — on every styling path, including unstyled and the MIT Cratis baseline theme, in development and production. Without a valid key the application shows a fixed _"Invalid PrimeUI License"_ banner. The free Community key is eligibility-limited and must be renewed annually; an expired Community key has a 30-day grace period before the banner returns. See [the Components 2 to 3 guide's licensing section](migration-from-2.md#licensing) for the full terms.
+
+Components 3 receives security and critical defect fixes as the migration compatibility line; it receives no new features or foundation work. Plan the move to Components 4 rather than treating Components 3 as a steady state.
 :::
 
 ## Update dependencies
@@ -376,7 +380,7 @@ import { ProductCompositorSurface } from './ProductCompositorSurface';
     }}
     controlsGlassSurface={<ProductCompositorSurface cornerRadius={999} />}
     controlsLabels={canvasControlLabels}
-/>
+/>;
 ```
 
 For direct Prime tables, map `value` to `data`. Replace `size='small'`, `stripedRows`, and `Column align` with product classes through `DataTableParts` / `Column` body and header classes. Stop and keep an application-owned or Prime table when the surface requires grouping, row expansion, or controlled lazy/server sorting that `DataTableCore` does not claim to provide. Move Prime `Column` imports used inside `DataPage` to the Cratis marker independently from those advanced tables.
diff --git a/Documentation/ui-foundation.md b/Documentation/ui-foundation.md
index 3d4f1429..4dd8e34e 100644
--- a/Documentation/ui-foundation.md
+++ b/Documentation/ui-foundation.md
@@ -54,6 +54,8 @@ The reusable cross-framework seam today is Arc's generated query/transport contr
 
 PrimeReact 11 has a capable layered architecture, but PrimeUI's consumer contract is unsuitable as an invisible mandatory dependency of a general Cratis framework.
 
+Two facts about that contract are directly verifiable. First, PrimeReact 11 enforces licensing at runtime: `PrimeReactProvider` verifies a PrimeUI license key when it mounts, with no condition on unstyled rendering, on the applied theme, or on the build environment — verified against the published `@primereact/core` 11.1.0 artifact. Without a valid key the application logs a warning and shows a fixed _"Invalid PrimeUI License"_ banner, in development and production. Verification is offline — a signature check against an embedded public key, with no telemetry. Second, the upstream `primefaces/primereact` repository is archived; PrimeReact development continues under the commercial PrimeUI model, and only the pre-11 MIT versions remain MIT. A mandatory dependency with runtime license enforcement and no open-source development line cannot sit invisibly underneath every Cratis application.
+
 The [PrimeUI Community License](https://primeui.dev/licenses/community) says developers building on an internal wrapper or design system still need seats. Eligibility excludes organizations by revenue, team size, funding, or public-sector status. The [OEM guidance](https://primeui.dev/licenses/oem) identifies frameworks and SDKs used for third-party development as potential OEM uses while not clarifying peer-only open-source wrappers.
 
 No `@cratis/components.primereact` package is published. Such a package is only a conditional future option and requires written PrimeTek confirmation first. Consumers that need the old implementation remain on the Components 3 release line while migrating.
@@ -72,7 +74,7 @@ The transition was deliberately split:
 
 1. Components 3 received a source-compatible stabilization release with accessibility, localization, filtering, notification, and paging fixes while retaining explicit PrimeUI requirements.
 2. Components 4 changes the default foundation, removes Prime runtime/declaration references, and introduces Cratis-owned provider and styling contracts.
-3. Components 3 remains the temporary compatibility line for applications that cannot migrate atomically.
+3. Components 3 remains the temporary compatibility line for applications that cannot migrate atomically, receiving security and critical defect fixes but no new features or foundation work.
 
 The stabilization specs are the behavior parity contract for Components 4.
 
diff --git a/Source/MIGRATION.md b/Source/MIGRATION.md
index 06d3eb0d..19173e31 100644
--- a/Source/MIGRATION.md
+++ b/Source/MIGRATION.md
@@ -6,6 +6,10 @@ This is intentionally a major release. Component behavior remains familiar, but
 
 :::note
 Components 3 remains the compatibility line for an application that cannot migrate yet. A separate PrimeReact compatibility package will not be published unless PrimeTek confirms the applicable OEM and redistribution terms in writing.
+
+**What staying on Components 3 means.** Components 3 keeps PrimeReact 11 as a peer dependency, and PrimeReact 11 verifies a PrimeUI license key when its provider mounts — on every styling path, including unstyled and the MIT Cratis baseline theme, in development and production. Without a valid key the application shows a fixed _"Invalid PrimeUI License"_ banner. The free Community key is eligibility-limited and must be renewed annually; an expired Community key has a 30-day grace period before the banner returns. See [the Components 2 to 3 guide's licensing section](https://github.com/Cratis/Components/blob/main/Documentation/migration-from-2.md#licensing) for the full terms.
+
+Components 3 receives security and critical defect fixes as the migration compatibility line; it receives no new features or foundation work. Plan the move to Components 4 rather than treating Components 3 as a steady state.
 :::
 
 ## Update dependencies

From 07c3c1b5257fd16ea937bfaf31e30aa7f3cc6d85 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Mon, 24 Aug 2026 23:23:45 +0200
Subject: [PATCH 035/267] Remove accidental package exports and document the
 public API surface (#173)

Audit the published `exports` map in Source/package.json against its 20
source barrels and remove implementation-only symbols that leaked onto a
public subpath through a blanket `export *`:

- CommandStepperContent: extracted from CommandDialog/CommandStepper.tsx
  into a new, non-barrel-exported CommandDialog/CommandStepperContent.tsx
  so it stays usable internally by CommandStepper/StepperCommandDialog and
  their specs without being reachable from `./CommandStepper` or
  `./CommandDialog`.
- PivotViewerOptimized: was an accidental alias of PivotViewer.
- Canvas chat helpers (getInitials, findOwnReaction, reactionsExcludingUser,
  matchCandidates, activeMentionQuery, applyMention/MentionApplied,
  EMOJI_CATALOG, DEFAULT_EMOJIS, QUICK_ROW_SIZE, EmojiCategoryKey): stop
  re-exporting from their barrels; the underlying modules keep exporting
  for their own relative-import use by sibling files and specs.
- Filter helpers (buildFilterValues, buildRangeValues,
  RenderedHistogramBucket): same treatment; buildHistogram remains public.

Keep ToastRecord, getToastSnapshot, subscribeToToasts, ToastDispatch,
EmojiMemory, ChatAuthorKind, DEFAULT_TYPE_FORMATS, NavigationItem, Json,
and TimeMachine's Properties public as intentional/ambiguous
custom-extension surfaces, and document all of them.

Add Source/scripts/verify-api-docs.mjs, a TypeScript-compiler-API-based
gate (no new dependency) that walks every JS `exports` subpath's source
barrel, follows `export *` / namespace re-exports the same way a consumer's
import resolution does, and fails with an actionable file:line/symbol
message for every reachable declaration or interface/type member missing a
TSDoc comment (a `@deprecated`-only comment counts). It ships four
deterministic fixture-based self-tests covering doc detection, ignoring
unreachable local exports, and namespace-reexport dedup, run by default
before the real check. Wire it in as `verify-api-docs` in Source/package.json
and as a new step in the JavaScript Build workflow's `build` job.

Add TSDoc to the 244 previously-undocumented reachable declarations/members
this surfaced across Canvas, Notifications, PivotViewer, TimeMachine,
types, Filter, DataTables, CommandDialog, Dialogs, and DataPage - covering
defaults, units, controlled ownership, callback timing, accessibility, and
stable-part semantics. verify-api-docs now reports zero findings.

Document the removed exports as an intentional v4 change in
Source/MIGRATION.md and Documentation/migration.md, and add public-contract
explanations to Documentation/Notifications/index.md (subscribeToToasts /
getToastSnapshot / ToastRecord / ToastDispatch as a custom-rendering
extension point) and Documentation/TimeMachine/views.md (the reusable
Properties component).

Verified: verify-api-docs self-tests and real check both pass (0 findings);
`tsc -p Source/tsconfig.json -noEmit` clean; `eslint --max-warnings=0`
clean; `vitest run` 262 files / 795 tests passed; `yarn prepare` +
`verify-exports.mjs` confirm all 25 exports map entries still load cleanly
from the built artifact.
---
 .github/workflows/javascript-build.yml        |   8 +
 Documentation/Notifications/index.md          |  36 ++
 Documentation/TimeMachine/views.md            |  12 +
 Documentation/migration.md                    |  19 +
 Source/Canvas/Canvas.tsx                      |   5 +
 Source/Canvas/CanvasItem.tsx                  |  28 +-
 Source/Canvas/CanvasMinimap.tsx               |  16 +-
 Source/Canvas/canvasTransformActivity.ts      |   9 +-
 Source/Canvas/selfSuspendingFrameLoop.ts      |  28 +-
 .../shapes/ChatBubble/AnchoredOverlay.tsx     |  52 +-
 .../ChatBubble/Avatar/PersonAvatarCircle.tsx  |  55 +-
 .../Canvas/shapes/ChatBubble/Avatar/index.ts  |   3 +-
 Source/Canvas/shapes/ChatBubble/Chat.tsx      |  72 ++-
 .../Canvas/shapes/ChatBubble/ChatBubble.tsx   |  93 ++-
 .../Canvas/shapes/ChatBubble/ChatComposer.tsx | 338 +++++-----
 .../Canvas/shapes/ChatBubble/ChatMessage.ts   |  13 +-
 .../shapes/ChatBubble/ChatMessageBubble.tsx   |  83 ++-
 .../shapes/ChatBubble/Emoji/EmojiPicker.tsx   |  38 +-
 .../Canvas/shapes/ChatBubble/Emoji/index.ts   |   8 +-
 .../Canvas/shapes/ChatBubble/FailedReply.tsx  |  29 +-
 .../Mentions/MentionSuggestions.tsx           |  19 +-
 .../shapes/ChatBubble/Mentions/index.ts       |   6 +-
 .../shapes/ChatBubble/MessageReactions.tsx    |  43 +-
 .../shapes/ChatBubble/ReactionPicker.tsx      |  69 +-
 .../shapes/ChatBubble/TypingIndicator.tsx     |  18 +-
 Source/Canvas/shapes/ChatBubble/index.ts      |   4 +-
 Source/Canvas/shapes/Note/Note.tsx            | 152 +++--
 Source/CommandDialog/CommandDialog.tsx        |  62 +-
 Source/CommandDialog/CommandStepper.tsx       | 395 +-----------
 .../CommandDialog/CommandStepperContent.tsx   | 402 ++++++++++++
 Source/CommandDialog/StepperCommandDialog.tsx |  22 +-
 .../and_a_bare_string_sits_between_steps.ts   |   3 +-
 .../and_it_is_in_the_middle.ts                |   3 +-
 .../and_it_is_null.ts                         |   3 +-
 .../and_it_is_undefined.ts                    |   3 +-
 .../and_the_first_step_is_hidden.ts           |   3 +-
 .../and_the_last_step_is_false.ts             |   3 +-
 .../and_the_steps_come_from_a_map.ts          |   3 +-
 .../and_two_are_hidden.ts                     |   3 +-
 .../when_every_step_is_hidden.ts              |   2 +-
 ...ive_step_is_past_the_last_rendered_step.ts |   2 +-
 Source/DataPage/DataPage.tsx                  |  18 +-
 .../DataTableFilterMatcherRegistry.ts         |   6 +
 .../DataTableForObservableQuery.tsx           |   2 +-
 Source/DataTables/DataTableForQuery.tsx       |   2 +-
 Source/Dialogs/ConfirmationDialog.tsx         |  31 +-
 Source/Filter/FilterEditor.tsx                |  17 +-
 Source/Filter/FilterPanel.tsx                 |  62 ++
 Source/Filter/RangeHistogramFilter.tsx        | 397 ++++++------
 Source/Filter/index.ts                        |   6 +-
 Source/Filter/types.ts                        |  91 +--
 Source/Filter/useFilterState.ts               | 236 ++++---
 Source/MIGRATION.md                           |  19 +
 Source/Notifications/toast.ts                 |  95 +++
 Source/PivotViewer/index.ts                   |   6 +-
 Source/PivotViewer/types.ts                   | 170 +++--
 Source/TimeMachine/EventsView.tsx             |  12 +
 Source/TimeMachine/Properties.tsx             |  61 +-
 Source/TimeMachine/TimeMachine.tsx            |  15 +
 Source/TimeMachine/types.ts                   |  48 +-
 Source/index.ts                               |  29 +
 Source/package.json                           |   1 +
 Source/scripts/verify-api-docs.mjs            | 592 ++++++++++++++++++
 Source/types/JsonSchema.ts                    |  39 ++
 Source/types/TypeFormat.ts                    |  11 +
 65 files changed, 2947 insertions(+), 1184 deletions(-)
 create mode 100644 Source/CommandDialog/CommandStepperContent.tsx
 create mode 100644 Source/scripts/verify-api-docs.mjs

diff --git a/.github/workflows/javascript-build.yml b/.github/workflows/javascript-build.yml
index f8257514..03116e21 100644
--- a/.github/workflows/javascript-build.yml
+++ b/.github/workflows/javascript-build.yml
@@ -66,6 +66,14 @@ jobs:
                   export NODE_OPTIONS="--max-old-space-size=4096"
                   yarn ci
 
+            # Every intentionally public declaration/member reachable from a JS `exports`
+            # subpath must carry a TSDoc comment (Cratis/Components#173). Runs against
+            # source, so it needs no build step; its own self-tests run first and fail
+            # the job if the reachability/doc-presence walk itself regresses.
+            - name: Verify public API TSDoc coverage
+              working-directory: Source
+              run: node scripts/verify-api-docs.mjs
+
             - name: Build Storybook
               run: yarn workspace @cratis/components build-storybook
 
diff --git a/Documentation/Notifications/index.md b/Documentation/Notifications/index.md
index 823e74e2..79b8d6a7 100644
--- a/Documentation/Notifications/index.md
+++ b/Documentation/Notifications/index.md
@@ -35,6 +35,42 @@ toast.success({
 
 The queue is shared across loaded Components copies. `setToastDispatch()` installs an application-owned dispatch and returns a scoped restore callback.
 
+## Building a custom rendering surface
+
+The default `Toaster` is optional. An application that wants full control over how
+notifications render — a different animation library, a non-portal placement, or
+integration with an existing app-wide notification center — can build its own surface
+on the same primitives `Toaster` itself uses:
+
+- `subscribeToToasts(listener)` subscribes to the shared queue and returns an
+  unsubscribe callback. Call it inside a `useSyncExternalStore`/`useEffect` binding.
+- `getToastSnapshot()` returns the current, immutable array of queued `ToastRecord`
+  values — the snapshot to read whenever the subscription notifies of a change.
+- `ToastRecord` is `ToastOptions & { id: ToastId }`, the exact shape stored in the
+  queue; render each record's `title`/`description`/`render`, honor `dismissible`,
+  and call the imperative `toast` API (or a custom `ToastDispatch`) to dismiss it.
+- `ToastDispatch` is the interface implemented by whatever `setToastDispatch()`
+  installs — implement it to redirect every `toast(...)` call to a different
+  in-app system (or to a test double) instead of the built-in queue.
+
+A minimal custom subscriber:
+
+```tsx
+import { useSyncExternalStore } from 'react';
+import { subscribeToToasts, getToastSnapshot } from '@cratis/components/Notifications';
+
+const CustomToastRegion = () => {
+    const toasts = useSyncExternalStore(subscribeToToasts, getToastSnapshot);
+    return (
+        <div role='region' aria-label='Notifications'>
+            {toasts.map((toast) => (
+                <CustomToastFrame key={toast.id} toast={toast} />
+            ))}
+        </div>
+    );
+};
+```
+
 ## Accessible behavior
 
 - Error frames use `role="alert"`; other frames use `role="status"`.
diff --git a/Documentation/TimeMachine/views.md b/Documentation/TimeMachine/views.md
index d5c2cec0..d482bafe 100644
--- a/Documentation/TimeMachine/views.md
+++ b/Documentation/TimeMachine/views.md
@@ -23,6 +23,18 @@ Properties are shown in a table format:
 | status   | active |
 | category | Electronics |
 
+The table itself is rendered by the exported `Properties` component
+(`@cratis/components/TimeMachine`) — a public, composable key-value property
+table also used internally by `EventsView` to display event content. Import it
+directly to render the same property table outside of `ReadModelView`/`EventsView`,
+e.g. inside a custom detail panel:
+
+```tsx
+import { Properties } from '@cratis/components/TimeMachine';
+
+<Properties data={someEntitySnapshot} align='left' />;
+```
+
 ### Change Highlighting
 
 When hovering over a timeline point or transitioning between versions, changed properties are highlighted:
diff --git a/Documentation/migration.md b/Documentation/migration.md
index 8e8a04d9..14e1fe45 100644
--- a/Documentation/migration.md
+++ b/Documentation/migration.md
@@ -142,6 +142,25 @@ Map product tokens directly in CSS:
 
 This removes the old product-token → Prime preset → Prime variable → Cratis variable translation chain.
 
+## Removed accidental package exports
+
+An audit of the published `exports` map ([#173](https://github.com/Cratis/Components/issues/173)) found implementation-only symbols that were unintentionally reachable from a public subpath — each was exported only because the owning module's barrel used a blanket `export *`, not because it was a supported contract. Components 4 stops re-exporting them from their public barrel; the underlying files keep the symbol for their own internal cross-file use, so this is a package-export change only, not a behavior change.
+
+| Removed export                                                | Subpath(s)                                                       | Migration                                                                                            |
+| -------------------------------------------------------------- | ------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------- |
+| `CommandStepperContent`                                        | `@cratis/components/CommandStepper`, `@cratis/components/CommandDialog` | Private rendering primitive behind `CommandStepper` and `StepperCommandDialog`. Use one of those components; there is no direct public replacement. |
+| `PivotViewerOptimized`                                         | `@cratis/components/PivotViewer`                                   | Was an accidental alias of `PivotViewer`. Import `PivotViewer` instead.                                |
+| `getInitials`                                                  | `@cratis/components/Canvas`                                        | Private `PersonAvatarCircle` helper. Not part of the public API.                                       |
+| `findOwnReaction`, `reactionsExcludingUser`                    | `@cratis/components/Canvas`                                        | Private `ChatMessageBubble` helpers. Not part of the public API.                                       |
+| `matchCandidates`, `activeMentionQuery`, `applyMention`, `MentionApplied` | `@cratis/components/Canvas`                               | Private `ChatComposer` mention helpers. Not part of the public API.                                    |
+| `EMOJI_CATALOG`, `EmojiCategoryKey`                             | `@cratis/components/Canvas`                                        | Private `EmojiPicker` implementation details. Not part of the public API.                              |
+| `DEFAULT_EMOJIS`, `QUICK_ROW_SIZE`                              | `@cratis/components/Canvas`                                        | Private `recentEmojis`/`rememberEmoji` constants. Not part of the public API.                          |
+| `buildFilterValues`, `buildRangeValues`, `RenderedHistogramBucket` | `@cratis/components/Filter`                                      | Private `useFilterState`/`RangeHistogramFilter` helpers. Not part of the public API.                   |
+
+None of these had a documented contract, and none is required by any other public API in this package. An application that imported one of these directly has no supported replacement to migrate to — inline the equivalent logic, or open an issue describing the use case if the behavior should become a supported public contract.
+
+The surfaces this audit confirmed as intentional and kept public — `ToastRecord`, `getToastSnapshot`, `subscribeToToasts`, `ToastDispatch`, `EmojiMemory`, `ChatAuthorKind`, `DEFAULT_TYPE_FORMATS`, `NavigationItem`, `Json`, and `TimeMachine`'s `Properties` — are unchanged and now carry TSDoc explaining their contract and, where relevant, their extension-point role.
+
 ## Migrate pass-through configuration
 
 The `pt` prop remains the per-part customization surface, but its values are now ordinary HTML attributes and its keys are stable Cratis names. `ptOptions` and `unstyled` remain accepted temporarily but have no effect: part attributes always merge, and Components always uses consumer-owned CSS.
diff --git a/Source/Canvas/Canvas.tsx b/Source/Canvas/Canvas.tsx
index 5dc82317..f4d87a99 100644
--- a/Source/Canvas/Canvas.tsx
+++ b/Source/Canvas/Canvas.tsx
@@ -208,6 +208,11 @@ const MOMENTUM_MIN_VELOCITY = 0.02;
 // responsive, slow enough to read as a coast rather than a snap.
 const MOMENTUM_FRICTION = 0.0035;
 
+/**
+ * A pan/zoom/Pixi-backed infinite canvas with optional HTML overlay items, integrated minimap, and
+ * zoom controls. Renders Pixi-backed sprites and DOM content under one synchronized camera, manages
+ * wheel/touch/trackpad gestures, and exposes imperative camera navigation.
+ */
 function Canvas<T extends CanvasItemData = CanvasItemData>({
     children,
     items = [] as T[],
diff --git a/Source/Canvas/CanvasItem.tsx b/Source/Canvas/CanvasItem.tsx
index 70b4ba26..9b0c71e5 100644
--- a/Source/Canvas/CanvasItem.tsx
+++ b/Source/Canvas/CanvasItem.tsx
@@ -1,7 +1,8 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import React, { useContext, useEffect, useId, useRef, useState } from 'react';
+import type React from 'react';
+import { useContext, useEffect, useId, useRef, useState } from 'react';
 import { CanvasItemRegistryContext } from './Canvas';
 
 /** Props for a measured DOM item positioned in Canvas world space. */
@@ -26,7 +27,17 @@ export interface CanvasItemProps {
     children: React.ReactNode;
 }
 
-export const CanvasItem: React.FC<CanvasItemProps> = ({ x, y, zIndex, onSize, children }) => {
+/**
+ * A measured DOM element positioned in Canvas world space, registered so the Canvas minimap can
+ * show it. Observes size changes and reports bounds to the nearest Canvas registry.
+ */
+export const CanvasItem: React.FC<CanvasItemProps> = ({
+    x,
+    y,
+    zIndex,
+    onSize,
+    children,
+}) => {
     const elementRef = useRef<HTMLDivElement>(null);
     const onSizeRef = useRef(onSize);
     const registryContext = useContext(CanvasItemRegistryContext);
@@ -39,7 +50,7 @@ export const CanvasItem: React.FC<CanvasItemProps> = ({ x, y, zIndex, onSize, ch
         const element = elementRef.current;
         if (!element) return;
 
-        const observer = new ResizeObserver(entries => {
+        const observer = new ResizeObserver((entries) => {
             for (const entry of entries) {
                 const { width, height } = entry.contentRect;
                 onSizeRef.current?.(width, height);
@@ -59,12 +70,19 @@ export const CanvasItem: React.FC<CanvasItemProps> = ({ x, y, zIndex, onSize, ch
     // Register with the Canvas registry whenever position or size changes
     useEffect(() => {
         if (!size || !registryContext) return;
-        registryContext.register(itemId, { x, y, width: size.width, height: size.height });
+        registryContext.register(itemId, {
+            x,
+            y,
+            width: size.width,
+            height: size.height,
+        });
     }, [x, y, size, registryContext, itemId]);
 
     // Unregister when unmounting
     useEffect(() => {
-        return () => { registryContext?.unregister(itemId); };
+        return () => {
+            registryContext?.unregister(itemId);
+        };
     }, [registryContext, itemId]);
 
     return (
diff --git a/Source/Canvas/CanvasMinimap.tsx b/Source/Canvas/CanvasMinimap.tsx
index 49e57bf9..0dea3a3d 100644
--- a/Source/Canvas/CanvasMinimap.tsx
+++ b/Source/Canvas/CanvasMinimap.tsx
@@ -45,6 +45,11 @@ export interface CanvasMinimapProps {
     onRequestPan?: (pan: { x: number; y: number }) => void;
 }
 
+/**
+ * A standalone minimap overlay for {@link Canvas}, showing item rectangles and the current
+ * viewport. Click or drag to pan; imperative {@link CanvasMinimapHandle.update} keeps the viewport
+ * rectangle synchronized with the parent Canvas camera.
+ */
 export const CanvasMinimap = forwardRef<CanvasMinimapHandle, CanvasMinimapProps>(
     (
         {
@@ -59,7 +64,12 @@ export const CanvasMinimap = forwardRef<CanvasMinimapHandle, CanvasMinimapProps>
         const scaleYConst = MINIMAP_HEIGHT / worldHeight;
         const viewportRectRef = useRef<HTMLDivElement>(null);
         // Stores the latest canvas state for use inside pointer-event handlers
-        const stateRef = useRef({ pan: { x: 0, y: 0 }, zoom: 1, canvasWidth: 800, canvasHeight: 600 });
+        const stateRef = useRef({
+            pan: { x: 0, y: 0 },
+            zoom: 1,
+            canvasWidth: 800,
+            canvasHeight: 600,
+        });
 
         useImperativeHandle(
             ref,
@@ -93,7 +103,6 @@ export const CanvasMinimap = forwardRef<CanvasMinimapHandle, CanvasMinimapProps>
             [worldWidth, worldHeight],
         );
 
-
         const panFromMinimapPos = useCallback(
             (clientX: number, clientY: number, bounds: DOMRect) => {
                 const mx = clientX - bounds.left;
@@ -151,7 +160,8 @@ export const CanvasMinimap = forwardRef<CanvasMinimapHandle, CanvasMinimapProps>
                     style={{
                         position: 'absolute',
                         inset: 0,
-                        backgroundImage: 'radial-gradient(circle, var(--cratis-surface-border) 1px, transparent 1px)',
+                        backgroundImage:
+                            'radial-gradient(circle, var(--cratis-surface-border) 1px, transparent 1px)',
                         backgroundSize: '10px 10px',
                         pointerEvents: 'none',
                     }}
diff --git a/Source/Canvas/canvasTransformActivity.ts b/Source/Canvas/canvasTransformActivity.ts
index e5f2ae65..0f53f889 100644
--- a/Source/Canvas/canvasTransformActivity.ts
+++ b/Source/Canvas/canvasTransformActivity.ts
@@ -12,9 +12,16 @@ const listeners = new Set<TransformListener>();
 // the transform moves instead of polling it on every animation frame — so an idle board notifies
 // nobody and issues no frame callbacks. A module singleton for the same reason canvasGesture is:
 // only one canvas is interactive at a time and the consumers sit far down the tree.
+/**
+ * The per-frame heartbeat of the one transform writer (the canvas's applyWorldTransform): every
+ * applied pan/zoom frame notifies, whether it came from a gesture, touch momentum, a smooth
+ * pan/zoom animation or a tour camera. Followers that position themselves from the live transform
+ * (collaborator cursors, the selection toolbar, tour anchors) subscribe here to wake exactly when
+ * the transform moves instead of polling it on every animation frame.
+ */
 export const canvasTransformActivity = {
     notify(): void {
-        listeners.forEach(listener => listener());
+        listeners.forEach((listener) => listener());
     },
 
     subscribe(listener: TransformListener): () => void {
diff --git a/Source/Canvas/selfSuspendingFrameLoop.ts b/Source/Canvas/selfSuspendingFrameLoop.ts
index fad7830c..09c7fff2 100644
--- a/Source/Canvas/selfSuspendingFrameLoop.ts
+++ b/Source/Canvas/selfSuspendingFrameLoop.ts
@@ -4,27 +4,33 @@
 type FrameScheduler = (callback: (now: number) => void) => number;
 type FrameCanceler = (handle: number) => void;
 
+/**
+ * An animation-frame loop that runs only while its step reports motion left to follow, instead of
+ * burning a callback every frame forever on an idle canvas.
+ */
 export interface SelfSuspendingFrameLoop {
-    // Whether a frame is currently scheduled.
+    /** Whether a frame is currently scheduled. */
     readonly isRunning: boolean;
 
-    // Starts the loop if it is not already running; a running loop is left alone, so waking is
-    // safe to do on every trigger however bursty.
+    /**
+     * Starts the loop if it is not already running; a running loop is left alone, so waking is
+     * safe to do on every trigger however bursty.
+     */
     wake(): void;
 
-    // Cancels the scheduled frame, if any. The loop can be woken again afterwards.
+    /** Cancels the scheduled frame, if any. The loop can be woken again afterwards. */
     stop(): void;
 }
 
-// An animation-frame loop that runs only while its step reports motion left to follow, instead of
-// burning a callback every frame forever on an idle canvas. The step
-// runs once per frame and returns whether another frame is needed; when it returns false the loop
-// suspends until the next wake(). The scheduler is injectable so the suspension logic can be
-// specified without a browser.
+/**
+ * Creates a self-suspending animation-frame loop. The step runs once per frame and returns whether
+ * another frame is needed; when it returns `false` the loop suspends until the next {@link SelfSuspendingFrameLoop.wake}.
+ * The scheduler is injectable so the suspension logic can be specified without a browser.
+ */
 export const createSelfSuspendingFrameLoop = (
     step: (now: number) => boolean,
-    schedule: FrameScheduler = callback => requestAnimationFrame(callback),
-    cancel: FrameCanceler = handle => cancelAnimationFrame(handle),
+    schedule: FrameScheduler = (callback) => requestAnimationFrame(callback),
+    cancel: FrameCanceler = (handle) => cancelAnimationFrame(handle),
 ): SelfSuspendingFrameLoop => {
     let handle: number | undefined;
 
diff --git a/Source/Canvas/shapes/ChatBubble/AnchoredOverlay.tsx b/Source/Canvas/shapes/ChatBubble/AnchoredOverlay.tsx
index b75463c8..9bdfa9e1 100644
--- a/Source/Canvas/shapes/ChatBubble/AnchoredOverlay.tsx
+++ b/Source/Canvas/shapes/ChatBubble/AnchoredOverlay.tsx
@@ -10,8 +10,13 @@ export type AnchoredOverlaySide = 'above' | 'below' | 'left' | 'right';
 /** Horizontal alignment relative to the anchor (for above/below overlays). */
 export type AnchoredOverlayAlign = 'left' | 'right' | 'center';
 
+/**
+ * Props for a fixed-position portalled overlay anchored to an element on the board. Board overlays
+ * (menus, pickers, tooltips) must float above everything: the slice columns use content-visibility
+ * paint containment for virtualization, which clips any absolutely-positioned descendant to the
+ * column box — portaling is what lets an overlay escape.
+ */
 export interface AnchoredOverlayProps {
-
     /** The element the overlay anchors to. */
     anchorRef: RefObject<HTMLElement | null>;
 
@@ -41,10 +46,15 @@ interface Placement {
     transform?: string;
 }
 
-function computePlacement(anchor: DOMRect, side: AnchoredOverlaySide, align: AnchoredOverlayAlign, gap: number): Placement {
+function computePlacement(
+    anchor: DOMRect,
+    side: AnchoredOverlaySide,
+    align: AnchoredOverlayAlign,
+    gap: number,
+): Placement {
     if (side === 'left' || side === 'right') {
         return {
-            top: anchor.top + (anchor.height / 2),
+            top: anchor.top + anchor.height / 2,
             left: side === 'right' ? anchor.right + gap : anchor.left - gap,
             transform: side === 'right' ? 'translateY(-50%)' : 'translate(-100%, -50%)',
         };
@@ -52,15 +62,21 @@ function computePlacement(anchor: DOMRect, side: AnchoredOverlaySide, align: Anc
 
     const spaceBelow = window.innerHeight - anchor.bottom - gap;
     const spaceAbove = anchor.top - gap;
-    const resolved = side === 'below'
-        ? (spaceBelow < FLIP_THRESHOLD && spaceAbove > spaceBelow ? 'above' : 'below')
-        : (spaceAbove < FLIP_THRESHOLD && spaceBelow > spaceAbove ? 'below' : 'above');
-
-    const horizontal = align === 'center'
-        ? { left: anchor.left + (anchor.width / 2), transform: 'translateX(-50%)' }
-        : align === 'right'
-            ? { left: anchor.right, transform: 'translateX(-100%)' }
-            : { left: anchor.left, transform: undefined };
+    const resolved =
+        side === 'below'
+            ? spaceBelow < FLIP_THRESHOLD && spaceAbove > spaceBelow
+                ? 'above'
+                : 'below'
+            : spaceAbove < FLIP_THRESHOLD && spaceBelow > spaceAbove
+              ? 'below'
+              : 'above';
+
+    const horizontal =
+        align === 'center'
+            ? { left: anchor.left + anchor.width / 2, transform: 'translateX(-50%)' }
+            : align === 'right'
+              ? { left: anchor.right, transform: 'translateX(-100%)' }
+              : { left: anchor.left, transform: undefined };
 
     return resolved === 'below'
         ? { top: anchor.bottom + gap, ...horizontal }
@@ -74,7 +90,14 @@ function computePlacement(anchor: DOMRect, side: AnchoredOverlaySide, align: Anc
  * descendant to the column box — portaling is what lets an overlay escape (the same approach the
  * Cratis Dropdown takes with appendTo=document.body).
  */
-export const AnchoredOverlay: React.FC<AnchoredOverlayProps> = ({ anchorRef, open, side = 'below', align = 'left', gap = 8, children }) => {
+export const AnchoredOverlay: React.FC<AnchoredOverlayProps> = ({
+    anchorRef,
+    open,
+    side = 'below',
+    align = 'left',
+    gap = 8,
+    children,
+}) => {
     const [placement, setPlacement] = useState<Placement | undefined>();
 
     useLayoutEffect(() => {
@@ -102,5 +125,6 @@ export const AnchoredOverlay: React.FC<AnchoredOverlayProps> = ({ anchorRef, ope
         >
             {children}
         </div>,
-        document.body);
+        document.body,
+    );
 };
diff --git a/Source/Canvas/shapes/ChatBubble/Avatar/PersonAvatarCircle.tsx b/Source/Canvas/shapes/ChatBubble/Avatar/PersonAvatarCircle.tsx
index 1630e1b9..85618aed 100644
--- a/Source/Canvas/shapes/ChatBubble/Avatar/PersonAvatarCircle.tsx
+++ b/Source/Canvas/shapes/ChatBubble/Avatar/PersonAvatarCircle.tsx
@@ -8,7 +8,6 @@ import { getAvatarColor } from './getAvatarColor';
 
 /** The parameters {@link PersonAvatarCircleProps.buildAvatarUrl} resolves into an image URL. */
 export interface BuildAvatarUrlParams {
-
     /** The identifier of the person, as a string. */
     userId: string;
 
@@ -22,8 +21,12 @@ export interface BuildAvatarUrlParams {
     version?: number | string;
 }
 
+/**
+ * Props for rendering a person's avatar image when one has been uploaded and a URL can be built for
+ * it, falling back to their initials on a color derived from their identifier so the same person
+ * always shows the same fallback color.
+ */
 export interface PersonAvatarCircleProps {
-
     /** The identifier of the person, used to build the avatar image URL. */
     userId: Guid | string;
 
@@ -64,10 +67,25 @@ export interface PersonAvatarCircleProps {
  * back to their initials on a color derived from their identifier so the same person always shows the
  * same fallback color.
  */
-export const PersonAvatarCircle = ({ userId, name, hasAvatar, size, ownerType = 'Users', avatarSize = 'Small', version, buildAvatarUrl, className }: PersonAvatarCircleProps) => {
+export const PersonAvatarCircle = ({
+    userId,
+    name,
+    hasAvatar,
+    size,
+    ownerType = 'Users',
+    avatarSize = 'Small',
+    version,
+    buildAvatarUrl,
+    className,
+}: PersonAvatarCircleProps) => {
     const initials = getInitials(name);
     const dimension = `${size}px`;
-    const src = buildAvatarUrl?.({ userId: userId.toString(), ownerType, avatarSize, version });
+    const src = buildAvatarUrl?.({
+        userId: userId.toString(),
+        ownerType,
+        avatarSize,
+        version,
+    });
 
     // The "has avatar" signal can outlive the stored image (e.g. a persona flag that stays set
     // after the blob is gone), which otherwise leaves a broken image and a stream of 404s.
@@ -78,14 +96,33 @@ export const PersonAvatarCircle = ({ userId, name, hasAvatar, size, ownerType =
 
     return (
         <span
-            className={className ? `person-avatar-circle ${className}` : 'person-avatar-circle'}
-            style={{ width: dimension, height: dimension, background: showImage ? undefined : getAvatarColor(userId.toString()) }}
+            className={
+                className ? `person-avatar-circle ${className}` : 'person-avatar-circle'
+            }
+            style={{
+                width: dimension,
+                height: dimension,
+                background: showImage ? undefined : getAvatarColor(userId.toString()),
+            }}
             aria-label={name}
             title={name}
         >
-            {showImage
-                ? <img className='person-avatar-circle-image' src={src} alt={name} draggable={false} onError={() => setFailedSrc(src)} />
-                : <span className='person-avatar-circle-initials' style={{ fontSize: `${Math.max(8, Math.round(size * 0.4))}px` }}>{initials}</span>}
+            {showImage ? (
+                <img
+                    className='person-avatar-circle-image'
+                    src={src}
+                    alt={name}
+                    draggable={false}
+                    onError={() => setFailedSrc(src)}
+                />
+            ) : (
+                <span
+                    className='person-avatar-circle-initials'
+                    style={{ fontSize: `${Math.max(8, Math.round(size * 0.4))}px` }}
+                >
+                    {initials}
+                </span>
+            )}
         </span>
     );
 };
diff --git a/Source/Canvas/shapes/ChatBubble/Avatar/index.ts b/Source/Canvas/shapes/ChatBubble/Avatar/index.ts
index 6a293494..07aec478 100644
--- a/Source/Canvas/shapes/ChatBubble/Avatar/index.ts
+++ b/Source/Canvas/shapes/ChatBubble/Avatar/index.ts
@@ -4,4 +4,5 @@
 export { PersonAvatarCircle } from './PersonAvatarCircle';
 export type { PersonAvatarCircleProps, BuildAvatarUrlParams } from './PersonAvatarCircle';
 export { getAvatarColor } from './getAvatarColor';
-export { getInitials } from './getInitials';
+// `getInitials` is an internal helper used by `PersonAvatarCircle` and is
+// intentionally not part of the public API.
diff --git a/Source/Canvas/shapes/ChatBubble/Chat.tsx b/Source/Canvas/shapes/ChatBubble/Chat.tsx
index 107ebbba..018daa92 100644
--- a/Source/Canvas/shapes/ChatBubble/Chat.tsx
+++ b/Source/Canvas/shapes/ChatBubble/Chat.tsx
@@ -4,12 +4,20 @@
 import React, { useEffect, useMemo, useRef } from 'react';
 import type { Guid } from '@cratis/fundamentals';
 import type { BuildAvatarUrlParams } from './Avatar';
-import { ChatComposer, type ChatComposerHandle, type ChatComposerLabels } from './ChatComposer';
+import {
+    ChatComposer,
+    type ChatComposerHandle,
+    type ChatComposerLabels,
+} from './ChatComposer';
 import { ChatMessageBubble, type ChatMessageBubbleLabels } from './ChatMessageBubble';
 import type { ChatMessage } from './ChatMessage';
 import type { ChatTypingAuthor } from './ChatTypingAuthor';
 import { ChatVariant } from './ChatVariant';
-import { FailedReply, type FailedReplyLabels, type FailedReplyReportDetails } from './FailedReply';
+import {
+    FailedReply,
+    type FailedReplyLabels,
+    type FailedReplyReportDetails,
+} from './FailedReply';
 import type { MentionCandidate } from './Mentions';
 import { TypingIndicator } from './TypingIndicator';
 
@@ -39,16 +47,24 @@ export interface ChatLabels {
     failedReply?: FailedReplyLabels;
 }
 
+/**
+ * Props for the full conversation panel — messages, composer, typing indicator, and reactions.
+ * Accepts message data and reports sends/reactions/actions; owns no state except the draft being typed.
+ */
 export interface ChatProps {
-
+    /** The messages to render in chronological order. */
     messages: ChatMessage[];
 
+    /** Invoked with the trimmed message text when the user sends. */
     onSend: (text: string) => void;
 
+    /** Invoked when the close button is activated (only rendered when not {@link ChatVariant.Docked}). */
     onClose: () => void;
 
+    /** The panel's title. Defaults to the localized `'Comments'` or {@link ChatLabels.title}. */
     title?: string;
 
+    /** Whether the composer takes focus when mounted. Defaults to `false`. */
     autoFocus?: boolean;
 
     /**
@@ -119,7 +135,6 @@ function sameMinute(a: Date, b: Date): boolean {
 }
 
 interface MessageRenderInfo {
-
     showAuthor: boolean;
 
     showTimestamp: boolean;
@@ -147,13 +162,25 @@ function computeRenderInfo(messages: ChatMessage[]): MessageRenderInfo[] {
  * @param labels Label overrides, as passed to {@link Chat}.
  * @returns The label to show, empty when nobody is.
  */
-function typingLabel(authors: ChatTypingAuthor[], labels: ChatLabels | undefined): string {
+function typingLabel(
+    authors: ChatTypingAuthor[],
+    labels: ChatLabels | undefined,
+): string {
     if (authors.length === 0) return '';
-    if (authors.length === 1) return (labels?.typing ?? '{name} is typing').replace('{name}', authors[0].name);
-    if (authors.length === 2) return (labels?.typingTwo ?? '{first} and {second} are typing').replace('{first}', authors[0].name).replace('{second}', authors[1].name);
+    if (authors.length === 1)
+        return (labels?.typing ?? '{name} is typing').replace('{name}', authors[0].name);
+    if (authors.length === 2)
+        return (labels?.typingTwo ?? '{first} and {second} are typing')
+            .replace('{first}', authors[0].name)
+            .replace('{second}', authors[1].name);
     return labels?.typingSeveral ?? 'Several people are typing';
 }
 
+/**
+ * The full conversation panel — messages, composer, typing indicator, and reactions. It renders
+ * message bubbles, the composer row, and the typing indicator, and coordinates reactions/quick-reply/action
+ * callbacks. Owns no state except the draft being typed.
+ */
 export const Chat: React.FC<ChatProps> = ({
     messages,
     onSend,
@@ -181,10 +208,14 @@ export const Chat: React.FC<ChatProps> = ({
         messagesEndRef.current?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
     }, [messages, typingAuthors.length]);
 
-    const quickReply = (authorName: string) => composerRef.current?.prefill(`@${authorName} `);
+    const quickReply = (authorName: string) =>
+        composerRef.current?.prefill(`@${authorName} `);
 
     return (
-        <div className={`chat-panel${isDocked ? ' chat-panel--docked' : ''}`} onClick={event => event.stopPropagation()}>
+        <div
+            className={`chat-panel${isDocked ? ' chat-panel--docked' : ''}`}
+            onClick={(event) => event.stopPropagation()}
+        >
             {!isDocked && (
                 <div className='chat-panel-header'>
                     <span className='chat-panel-title'>{resolvedTitle}</span>
@@ -202,13 +233,22 @@ export const Chat: React.FC<ChatProps> = ({
 
             <div className='chat-panel-messages'>
                 {messages.length === 0 && (
-                    <p className='chat-panel-empty'>{labels?.noComments ?? 'No comments yet. Be the first!'}</p>
+                    <p className='chat-panel-empty'>
+                        {labels?.noComments ?? 'No comments yet. Be the first!'}
+                    </p>
                 )}
                 {messages.map((message, index) => {
                     // A turn that ended in failure is not something its author said, so it never becomes
                     // a bubble — it stands where the answer would have been and says so.
                     if (message.failureDetail !== undefined) {
-                        return <FailedReply key={message.id.toString()} message={message} buildReportUrl={buildReportUrl} labels={labels?.failedReply} />;
+                        return (
+                            <FailedReply
+                                key={message.id.toString()}
+                                message={message}
+                                buildReportUrl={buildReportUrl}
+                                labels={labels?.failedReply}
+                            />
+                        );
                     }
 
                     const { showAuthor, showTimestamp } = renderInfo[index];
@@ -222,13 +262,19 @@ export const Chat: React.FC<ChatProps> = ({
                             currentUserId={currentUserId}
                             onReact={onReact}
                             onQuickReply={quickReply}
-                            onAct={onAct && (canAct?.(message) ?? true) ? onAct : undefined}
+                            onAct={
+                                onAct && (canAct?.(message) ?? true) ? onAct : undefined
+                            }
                             buildAvatarUrl={buildAvatarUrl}
                             labels={labels?.messageBubble}
                         />
                     );
                 })}
-                <TypingIndicator authors={typingAuthors} label={typingLabel(typingAuthors, labels)} buildAvatarUrl={buildAvatarUrl} />
+                <TypingIndicator
+                    authors={typingAuthors}
+                    label={typingLabel(typingAuthors, labels)}
+                    buildAvatarUrl={buildAvatarUrl}
+                />
                 <div ref={messagesEndRef} />
             </div>
 
diff --git a/Source/Canvas/shapes/ChatBubble/ChatBubble.tsx b/Source/Canvas/shapes/ChatBubble/ChatBubble.tsx
index 7e4dec0f..fbc89559 100644
--- a/Source/Canvas/shapes/ChatBubble/ChatBubble.tsx
+++ b/Source/Canvas/shapes/ChatBubble/ChatBubble.tsx
@@ -20,32 +20,51 @@ function formatTimestamp(date: Date): string {
     return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
 }
 
+/**
+ * Props for a canvas-rendered chat bubble avatar with hover preview and optional thinking indicator.
+ * Shows the author's avatar circle with an optional selection ring, animated thinking dots, and a
+ * hover card previewing the conversation state.
+ */
 export interface ChatBubbleProps {
-
+    /** The identifier of the person this bubble represents. */
     authorId: Guid | string;
 
+    /** The person's display name, used for the avatar and preview. */
     authorName: string;
 
+    /** Whether the person has an uploaded avatar image. */
     hasAvatar: boolean;
 
+    /** The avatar circle's diameter in pixels. Defaults to `56`. */
     size?: number;
 
+    /** Whether to suppress the hover preview card. Defaults to `false`. */
     suppressPreview?: boolean;
 
+    /** The most recent message text shown in the preview. */
     previewMessage?: string;
 
+    /** The timestamp of the most recent message shown in the preview. */
     previewTimestamp?: Date;
 
+    /** The number of replies shown in the preview. */
     replyCount?: number;
 
+    /** Whether to show the animated thinking-bubble indicator. Defaults to `false`. */
     showThinkingBubbles?: boolean;
 
+    /** Whether to show the selection ring around the avatar. Defaults to `false`. */
     selected?: boolean;
 
     /** Builds the avatar image URL. Omit to always show initials — see {@link PersonAvatarCircleProps}. */
     buildAvatarUrl?: (params: BuildAvatarUrlParams) => string;
 }
 
+/**
+ * A canvas-rendered chat bubble avatar with hover preview and optional thinking indicator. Shows
+ * the author's avatar circle with an optional selection ring, animated thinking dots trailing
+ * down-right, and a hover card previewing the conversation state.
+ */
 export const ChatBubble: React.FC<ChatBubbleProps> = ({
     authorId,
     authorName,
@@ -107,7 +126,14 @@ export const ChatBubble: React.FC<ChatBubbleProps> = ({
                     position: 'relative',
                 }}
             >
-                <PersonAvatarCircle userId={authorId} name={authorName} hasAvatar={hasAvatar} size={size} avatarSize='Medium' buildAvatarUrl={buildAvatarUrl} />
+                <PersonAvatarCircle
+                    userId={authorId}
+                    name={authorName}
+                    hasAvatar={hasAvatar}
+                    size={size}
+                    avatarSize='Medium'
+                    buildAvatarUrl={buildAvatarUrl}
+                />
             </div>
 
             {/* Animated thinking bubbles trailing down-right */}
@@ -163,25 +189,72 @@ export const ChatBubble: React.FC<ChatBubbleProps> = ({
                     }}
                 >
                     {/* Avatar in preview */}
-                    <PersonAvatarCircle userId={authorId} name={authorName} hasAvatar={hasAvatar} size={30} buildAvatarUrl={buildAvatarUrl} />
+                    <PersonAvatarCircle
+                        userId={authorId}
+                        name={authorName}
+                        hasAvatar={hasAvatar}
+                        size={30}
+                        buildAvatarUrl={buildAvatarUrl}
+                    />
 
                     {/* Text content */}
                     <div style={{ flex: 1, minWidth: 0 }}>
-                        <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 3, flexWrap: 'wrap' }}>
-                            <span style={{ ...FONT, fontSize: 12, fontWeight: 600, color: 'var(--cratis-text-color)' }}>
-                                {authorName.length > PREVIEW_AUTHOR_NAME_MAX_LENGTH ? `${authorName.slice(0, PREVIEW_AUTHOR_NAME_MAX_LENGTH)}…` : authorName}
+                        <div
+                            style={{
+                                display: 'flex',
+                                alignItems: 'baseline',
+                                gap: 6,
+                                marginBottom: 3,
+                                flexWrap: 'wrap',
+                            }}
+                        >
+                            <span
+                                style={{
+                                    ...FONT,
+                                    fontSize: 12,
+                                    fontWeight: 600,
+                                    color: 'var(--cratis-text-color)',
+                                }}
+                            >
+                                {authorName.length > PREVIEW_AUTHOR_NAME_MAX_LENGTH
+                                    ? `${authorName.slice(0, PREVIEW_AUTHOR_NAME_MAX_LENGTH)}…`
+                                    : authorName}
                             </span>
                             {previewTimestamp && (
-                                <span style={{ ...FONT, fontSize: 10, color: 'var(--cratis-text-color-secondary)' }}>
+                                <span
+                                    style={{
+                                        ...FONT,
+                                        fontSize: 10,
+                                        color: 'var(--cratis-text-color-secondary)',
+                                    }}
+                                >
                                     {formatTimestamp(previewTimestamp)}
                                 </span>
                             )}
                         </div>
-                        <p style={{ ...FONT, fontSize: 11, color: 'var(--cratis-text-color)', margin: '0 0 6px', lineHeight: 1.4 } }>
-                            {previewMessage ? (previewMessage.length > PREVIEW_MESSAGE_MAX_LENGTH ? `${previewMessage.slice(0, PREVIEW_MESSAGE_MAX_LENGTH)}…` : previewMessage) : 'No messages yet'}
+                        <p
+                            style={{
+                                ...FONT,
+                                fontSize: 11,
+                                color: 'var(--cratis-text-color)',
+                                margin: '0 0 6px',
+                                lineHeight: 1.4,
+                            }}
+                        >
+                            {previewMessage
+                                ? previewMessage.length > PREVIEW_MESSAGE_MAX_LENGTH
+                                    ? `${previewMessage.slice(0, PREVIEW_MESSAGE_MAX_LENGTH)}…`
+                                    : previewMessage
+                                : 'No messages yet'}
                         </p>
                         {replyCount !== undefined && replyCount > 0 && (
-                            <span style={{ ...FONT, fontSize: 10, color: 'var(--cratis-primary-color)' }}>
+                            <span
+                                style={{
+                                    ...FONT,
+                                    fontSize: 10,
+                                    color: 'var(--cratis-primary-color)',
+                                }}
+                            >
                                 {replyCount === 1 ? '1 reply' : `${replyCount} replies`}
                             </span>
                         )}
diff --git a/Source/Canvas/shapes/ChatBubble/ChatComposer.tsx b/Source/Canvas/shapes/ChatBubble/ChatComposer.tsx
index 42abdc76..26dc0ac1 100644
--- a/Source/Canvas/shapes/ChatBubble/ChatComposer.tsx
+++ b/Source/Canvas/shapes/ChatBubble/ChatComposer.tsx
@@ -1,10 +1,19 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import React, {
+    forwardRef,
+    useEffect,
+    useImperativeHandle,
+    useRef,
+    useState,
+} from 'react';
 import { AnchoredOverlay } from './AnchoredOverlay';
 import type { BuildAvatarUrlParams } from './Avatar';
-import { activeMentionQuery, applyMention, matchCandidates, MentionSuggestions, type MentionCandidate } from './Mentions';
+import { activeMentionQuery } from './Mentions/activeMentionQuery';
+import { applyMention } from './Mentions/applyMention';
+import { matchCandidates } from './Mentions/matchCandidates';
+import { MentionSuggestions, type MentionCandidate } from './Mentions';
 import { ReactionPicker, type ReactionPickerLabels } from './ReactionPicker';
 
 /** Overrides for the composer's own labels. Any field left unset falls back to a literal English
@@ -22,8 +31,11 @@ export interface ChatComposerLabels {
     reactionPicker?: ReactionPickerLabels;
 }
 
+/**
+ * Props for the compose row of a conversation — the text area, the `@` mention list it opens, and
+ * the send button. It owns the draft so the surrounding panel stays a renderer of messages.
+ */
 export interface ChatComposerProps {
-
     /** Everyone who can be mentioned from this conversation. Omit to turn mentions off. */
     mentionCandidates?: MentionCandidate[];
 
@@ -46,7 +58,6 @@ export interface ChatComposerProps {
  * anything itself.
  */
 export interface ChatComposerHandle {
-
     /** Replaces the current draft and takes focus, caret placed at the end. */
     prefill: (text: string) => void;
 }
@@ -55,157 +66,196 @@ export interface ChatComposerHandle {
  * The compose row of a conversation — the text area, the `@` mention list it opens, and the send
  * button. It owns the draft so the surrounding panel stays a renderer of messages.
  */
-export const ChatComposer = forwardRef<ChatComposerHandle, ChatComposerProps>(({ mentionCandidates, onSend, autoFocus = false, buildAvatarUrl, labels }, handleRef) => {
-    const [draft, setDraft] = useState({ text: '', caret: 0 });
-    const [highlightedIndex, setHighlightedIndex] = useState(0);
-    const [showEmojiPicker, setShowEmojiPicker] = useState(false);
-    const inputRef = useRef<HTMLTextAreaElement>(null);
-    const emojiButtonRef = useRef<HTMLButtonElement>(null);
-
-    const query = mentionCandidates ? activeMentionQuery(draft.text, draft.caret) : null;
-    const suggestions = query ? matchCandidates(mentionCandidates ?? [], query.text) : [];
-    const isSuggesting = suggestions.length > 0;
-    const highlighted = Math.min(highlightedIndex, suggestions.length - 1);
-
-    useEffect(() => {
-        if (autoFocus) {
+export const ChatComposer = forwardRef<ChatComposerHandle, ChatComposerProps>(
+    (
+        { mentionCandidates, onSend, autoFocus = false, buildAvatarUrl, labels },
+        handleRef,
+    ) => {
+        const [draft, setDraft] = useState({ text: '', caret: 0 });
+        const [highlightedIndex, setHighlightedIndex] = useState(0);
+        const [showEmojiPicker, setShowEmojiPicker] = useState(false);
+        const inputRef = useRef<HTMLTextAreaElement>(null);
+        const emojiButtonRef = useRef<HTMLButtonElement>(null);
+
+        const query = mentionCandidates
+            ? activeMentionQuery(draft.text, draft.caret)
+            : null;
+        const suggestions = query
+            ? matchCandidates(mentionCandidates ?? [], query.text)
+            : [];
+        const isSuggesting = suggestions.length > 0;
+        const highlighted = Math.min(highlightedIndex, suggestions.length - 1);
+
+        useEffect(() => {
+            if (autoFocus) {
+                inputRef.current?.focus();
+            }
+        }, [autoFocus]);
+
+        useImperativeHandle(
+            handleRef,
+            () => ({
+                prefill: (text: string) => {
+                    setDraft({ text, caret: text.length });
+                    requestAnimationFrame(() => {
+                        inputRef.current?.focus();
+                        inputRef.current?.setSelectionRange(text.length, text.length);
+                    });
+                },
+            }),
+            [],
+        );
+
+        const readDraft = (element: HTMLTextAreaElement) => {
+            const text = element.value;
+            // Only editing the text restarts the selection. Resetting on every key event would undo the
+            // arrow-key navigation on the very next keyup.
+            if (text !== draft.text) {
+                setHighlightedIndex(0);
+            }
+            setDraft({ text, caret: element.selectionStart ?? text.length });
+        };
+
+        const send = () => {
+            const trimmed = draft.text.trim();
+            if (!trimmed) return;
+            onSend(trimmed);
+            setDraft({ text: '', caret: 0 });
+        };
+
+        const choose = (candidate: MentionCandidate) => {
+            if (!query) return;
+            const applied = applyMention(draft.text, draft.caret, query, candidate.name);
+            setDraft(applied);
+            setHighlightedIndex(0);
+            // The caret has to be restored after React has written the new value back into the element.
+            requestAnimationFrame(() =>
+                inputRef.current?.setSelectionRange(applied.caret, applied.caret),
+            );
             inputRef.current?.focus();
-        }
-    }, [autoFocus]);
+        };
 
-    useImperativeHandle(handleRef, () => ({
-        prefill: (text: string) => {
-            setDraft({ text, caret: text.length });
+        const insertEmoji = (emoji: string) => {
+            const text = `${draft.text.slice(0, draft.caret)}${emoji}${draft.text.slice(draft.caret)}`;
+            const caret = draft.caret + emoji.length;
+            setDraft({ text, caret });
+            setShowEmojiPicker(false);
+            // Same restore-after-write pattern as choose() above — React has to write the new value in
+            // before the caret can be placed past the emoji it inserted.
             requestAnimationFrame(() => {
                 inputRef.current?.focus();
-                inputRef.current?.setSelectionRange(text.length, text.length);
+                inputRef.current?.setSelectionRange(caret, caret);
             });
-        },
-    }), []);
-
-    const readDraft = (element: HTMLTextAreaElement) => {
-        const text = element.value;
-        // Only editing the text restarts the selection. Resetting on every key event would undo the
-        // arrow-key navigation on the very next keyup.
-        if (text !== draft.text) {
-            setHighlightedIndex(0);
-        }
-        setDraft({ text, caret: element.selectionStart ?? text.length });
-    };
-
-    const send = () => {
-        const trimmed = draft.text.trim();
-        if (!trimmed) return;
-        onSend(trimmed);
-        setDraft({ text: '', caret: 0 });
-    };
-
-    const choose = (candidate: MentionCandidate) => {
-        if (!query) return;
-        const applied = applyMention(draft.text, draft.caret, query, candidate.name);
-        setDraft(applied);
-        setHighlightedIndex(0);
-        // The caret has to be restored after React has written the new value back into the element.
-        requestAnimationFrame(() => inputRef.current?.setSelectionRange(applied.caret, applied.caret));
-        inputRef.current?.focus();
-    };
-
-    const insertEmoji = (emoji: string) => {
-        const text = `${draft.text.slice(0, draft.caret)}${emoji}${draft.text.slice(draft.caret)}`;
-        const caret = draft.caret + emoji.length;
-        setDraft({ text, caret });
-        setShowEmojiPicker(false);
-        // Same restore-after-write pattern as choose() above — React has to write the new value in
-        // before the caret can be placed past the emoji it inserted.
-        requestAnimationFrame(() => {
-            inputRef.current?.focus();
-            inputRef.current?.setSelectionRange(caret, caret);
-        });
-    };
+        };
 
-    const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
-        if (isSuggesting) {
-            if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
-                event.preventDefault();
-                const step = event.key === 'ArrowDown' ? 1 : suggestions.length - 1;
-                setHighlightedIndex((highlighted + step) % suggestions.length);
-                return;
-            }
+        const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+            if (isSuggesting) {
+                if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+                    event.preventDefault();
+                    const step = event.key === 'ArrowDown' ? 1 : suggestions.length - 1;
+                    setHighlightedIndex((highlighted + step) % suggestions.length);
+                    return;
+                }
 
-            if (event.key === 'Enter' || event.key === 'Tab') {
-                event.preventDefault();
-                choose(suggestions[highlighted]);
-                return;
+                if (event.key === 'Enter' || event.key === 'Tab') {
+                    event.preventDefault();
+                    choose(suggestions[highlighted]);
+                    return;
+                }
+
+                if (event.key === 'Escape') {
+                    event.preventDefault();
+                    // Closing the list without changing the text: move the caret past the mention so the
+                    // query no longer resolves.
+                    setDraft((previous) => ({
+                        ...previous,
+                        caret: previous.text.length,
+                    }));
+                    return;
+                }
             }
 
-            if (event.key === 'Escape') {
+            if (event.key === 'Enter' && !event.shiftKey) {
                 event.preventDefault();
-                // Closing the list without changing the text: move the caret past the mention so the
-                // query no longer resolves.
-                setDraft(previous => ({ ...previous, caret: previous.text.length }));
-                return;
+                send();
             }
-        }
-
-        if (event.key === 'Enter' && !event.shiftKey) {
-            event.preventDefault();
-            send();
-        }
-    };
-
-    return (
-        <div className='chat-composer'>
-            {isSuggesting && (
-                <MentionSuggestions
-                    candidates={suggestions}
-                    highlightedIndex={highlighted}
-                    onSelect={choose}
-                    onHighlight={setHighlightedIndex}
-                    buildAvatarUrl={buildAvatarUrl}
+        };
+
+        return (
+            <div className='chat-composer'>
+                {isSuggesting && (
+                    <MentionSuggestions
+                        candidates={suggestions}
+                        highlightedIndex={highlighted}
+                        onSelect={choose}
+                        onHighlight={setHighlightedIndex}
+                        buildAvatarUrl={buildAvatarUrl}
+                    />
+                )}
+                <textarea
+                    ref={inputRef}
+                    className='chat-composer__input'
+                    value={draft.text}
+                    onChange={(event) => readDraft(event.target)}
+                    onKeyUp={(event) => readDraft(event.currentTarget)}
+                    onClick={(event) => readDraft(event.currentTarget)}
+                    onKeyDown={handleKeyDown}
+                    placeholder={
+                        labels?.placeholder ?? 'Write a message… (Enter to send)'
+                    }
+                    rows={2}
                 />
-            )}
-            <textarea
-                ref={inputRef}
-                className='chat-composer__input'
-                value={draft.text}
-                onChange={event => readDraft(event.target)}
-                onKeyUp={event => readDraft(event.currentTarget)}
-                onClick={event => readDraft(event.currentTarget)}
-                onKeyDown={handleKeyDown}
-                placeholder={labels?.placeholder ?? 'Write a message… (Enter to send)'}
-                rows={2}
-            />
-            <button
-                ref={emojiButtonRef}
-                type='button'
-                className='chat-composer__emoji-toggle'
-                onMouseDown={event => event.preventDefault()}
-                onClick={() => setShowEmojiPicker(previous => !previous)}
-                title={labels?.insertEmoji ?? 'Insert emoji'}
-                aria-label={labels?.insertEmoji ?? 'Insert emoji'}
-                aria-expanded={showEmojiPicker}
-            >
-                ☺
-            </button>
-            <button
-                type='button'
-                className='chat-composer__send'
-                onClick={send}
-                disabled={!draft.text.trim()}
-                title={labels?.send ?? 'Send'}
-                aria-label={labels?.sendMessage ?? 'Send message'}
-            >
-                <svg width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' strokeWidth='2.5' aria-hidden='true'>
-                    <line x1='22' y1='2' x2='11' y2='13' />
-                    <polygon points='22 2 15 22 11 13 2 9 22 2' />
-                </svg>
-            </button>
-            {/* Portaled to <body>, same reason as the reaction picker on a message bubble: the chat
+                <button
+                    ref={emojiButtonRef}
+                    type='button'
+                    className='chat-composer__emoji-toggle'
+                    onMouseDown={(event) => event.preventDefault()}
+                    onClick={() => setShowEmojiPicker((previous) => !previous)}
+                    title={labels?.insertEmoji ?? 'Insert emoji'}
+                    aria-label={labels?.insertEmoji ?? 'Insert emoji'}
+                    aria-expanded={showEmojiPicker}
+                >
+                    ☺
+                </button>
+                <button
+                    type='button'
+                    className='chat-composer__send'
+                    onClick={send}
+                    disabled={!draft.text.trim()}
+                    title={labels?.send ?? 'Send'}
+                    aria-label={labels?.sendMessage ?? 'Send message'}
+                >
+                    <svg
+                        width='16'
+                        height='16'
+                        viewBox='0 0 24 24'
+                        fill='none'
+                        stroke='currentColor'
+                        strokeWidth='2.5'
+                        aria-hidden='true'
+                    >
+                        <line x1='22' y1='2' x2='11' y2='13' />
+                        <polygon points='22 2 15 22 11 13 2 9 22 2' />
+                    </svg>
+                </button>
+                {/* Portaled to <body>, same reason as the reaction picker on a message bubble: the chat
                 panel scrolls/clips, so a picker positioned inside it would be cut off at the edge. */}
-            <AnchoredOverlay anchorRef={emojiButtonRef} open={showEmojiPicker} side='above' align='right' gap={6}>
-                <ReactionPicker anchorRef={emojiButtonRef} onPick={insertEmoji} onDismiss={() => setShowEmojiPicker(false)} labels={labels?.reactionPicker} />
-            </AnchoredOverlay>
-        </div>
-    );
-});
+                <AnchoredOverlay
+                    anchorRef={emojiButtonRef}
+                    open={showEmojiPicker}
+                    side='above'
+                    align='right'
+                    gap={6}
+                >
+                    <ReactionPicker
+                        anchorRef={emojiButtonRef}
+                        onPick={insertEmoji}
+                        onDismiss={() => setShowEmojiPicker(false)}
+                        labels={labels?.reactionPicker}
+                    />
+                </AnchoredOverlay>
+            </div>
+        );
+    },
+);
 ChatComposer.displayName = 'ChatComposer';
diff --git a/Source/Canvas/shapes/ChatBubble/ChatMessage.ts b/Source/Canvas/shapes/ChatBubble/ChatMessage.ts
index 37040572..840663d4 100644
--- a/Source/Canvas/shapes/ChatBubble/ChatMessage.ts
+++ b/Source/Canvas/shapes/ChatBubble/ChatMessage.ts
@@ -5,23 +5,34 @@ import { Guid } from '@cratis/fundamentals';
 import { ChatAuthorKind } from './ChatAuthorKind';
 import type { ChatMessageReaction } from './ChatMessageReaction';
 
+/**
+ * One message in a conversation, carrying who said it, what was said, when it was said, and optional
+ * reactions. A message whose {@link failureDetail} is set renders as a failure line rather than as
+ * something its author said.
+ */
 export interface ChatMessage {
-
+    /** Stable message identity. */
     id: Guid;
 
+    /** The identifier of the person or agent who wrote the message. */
     authorId: Guid;
 
+    /** The author's display name. */
     authorName: string;
 
+    /** The author's initials, used for avatar fallback. */
     authorInitials: string;
 
+    /** Whether the author has an uploaded avatar image. */
     hasAvatar: boolean;
 
     /** Whether a person or an agent wrote it, which decides where the avatar is fetched from. */
     authorKind: ChatAuthorKind;
 
+    /** The message text. */
     text: string;
 
+    /** When the message was sent. */
     timestamp: Date;
 
     /**
diff --git a/Source/Canvas/shapes/ChatBubble/ChatMessageBubble.tsx b/Source/Canvas/shapes/ChatBubble/ChatMessageBubble.tsx
index edde69f6..65177520 100644
--- a/Source/Canvas/shapes/ChatBubble/ChatMessageBubble.tsx
+++ b/Source/Canvas/shapes/ChatBubble/ChatMessageBubble.tsx
@@ -31,8 +31,12 @@ export interface ChatMessageBubbleLabels {
     reactionPicker?: ReactionPickerLabels;
 }
 
+/**
+ * Props for one message bubble in a conversation, with optional quick-reaction and quick-reply
+ * affordances. The affordances are opt-in via {@link currentUserId} — a conversation that does not
+ * pass it renders exactly as it did before reactions existed.
+ */
 export interface ChatMessageBubbleProps {
-
     /** The message to render. */
     message: ChatMessage;
 
@@ -75,13 +79,28 @@ export interface ChatMessageBubbleProps {
  * conversation may offer. The affordances are opt-in via {@link ChatMessageBubbleProps.currentUserId} —
  * a conversation that does not pass it renders exactly as it did before reactions existed.
  */
-export const ChatMessageBubble = ({ message, showAuthor, showTimestamp, formattedTimestamp, currentUserId, onReact, onQuickReply, onAct, buildAvatarUrl, labels }: ChatMessageBubbleProps) => {
+export const ChatMessageBubble = ({
+    message,
+    showAuthor,
+    showTimestamp,
+    formattedTimestamp,
+    currentUserId,
+    onReact,
+    onQuickReply,
+    onAct,
+    buildAvatarUrl,
+    labels,
+}: ChatMessageBubbleProps) => {
     const [pickerOpen, setPickerOpen] = useState(false);
     const reactionButtonRef = useRef<HTMLButtonElement>(null);
     const supportsReactions = !!currentUserId && !!onReact;
     const showActionsRow = supportsReactions || !!onQuickReply || !!onAct;
-    const ownReaction = supportsReactions ? findOwnReaction(message.reactions, currentUserId) : undefined;
-    const otherReactions = supportsReactions ? reactionsExcludingUser(message.reactions, currentUserId) : [];
+    const ownReaction = supportsReactions
+        ? findOwnReaction(message.reactions, currentUserId)
+        : undefined;
+    const otherReactions = supportsReactions
+        ? reactionsExcludingUser(message.reactions, currentUserId)
+        : [];
 
     const pick = (emoji: string) => {
         setPickerOpen(false);
@@ -97,14 +116,20 @@ export const ChatMessageBubble = ({ message, showAuthor, showTimestamp, formatte
                         name={message.authorName}
                         hasAvatar={message.hasAvatar}
                         size={22}
-                        ownerType={message.authorKind === ChatAuthorKind.Agent ? 'Agents' : 'Users'}
+                        ownerType={
+                            message.authorKind === ChatAuthorKind.Agent
+                                ? 'Agents'
+                                : 'Users'
+                        }
                         buildAvatarUrl={buildAvatarUrl}
                     />
                     <span className='chat-bubble-name'>{message.authorName}</span>
                 </div>
             )}
             <div className='chat-bubble-body'>
-                <div className={`chat-bubble-panel${showActionsRow ? ' chat-bubble-panel--with-actions' : ''}`}>
+                <div
+                    className={`chat-bubble-panel${showActionsRow ? ' chat-bubble-panel--with-actions' : ''}`}
+                >
                     <p className='chat-bubble-text'>{message.text}</p>
                     {showActionsRow && (
                         <div className='chat-bubble-actions'>
@@ -113,10 +138,26 @@ export const ChatMessageBubble = ({ message, showAuthor, showTimestamp, formatte
                                     ref={reactionButtonRef}
                                     type='button'
                                     className={`chat-bubble-action${ownReaction ? ' chat-bubble-action--own-reaction' : ''}`}
-                                    title={ownReaction ? (labels?.yourReaction ?? 'You reacted with {emoji}').replace('{emoji}', ownReaction.emoji) : (labels?.addReaction ?? 'Add a quick reaction')}
-                                    aria-label={ownReaction ? (labels?.yourReaction ?? 'You reacted with {emoji}').replace('{emoji}', ownReaction.emoji) : (labels?.addReaction ?? 'Add a quick reaction')}
+                                    title={
+                                        ownReaction
+                                            ? (
+                                                  labels?.yourReaction ??
+                                                  'You reacted with {emoji}'
+                                              ).replace('{emoji}', ownReaction.emoji)
+                                            : (labels?.addReaction ??
+                                              'Add a quick reaction')
+                                    }
+                                    aria-label={
+                                        ownReaction
+                                            ? (
+                                                  labels?.yourReaction ??
+                                                  'You reacted with {emoji}'
+                                              ).replace('{emoji}', ownReaction.emoji)
+                                            : (labels?.addReaction ??
+                                              'Add a quick reaction')
+                                    }
                                     aria-expanded={pickerOpen}
-                                    onClick={() => setPickerOpen(previous => !previous)}
+                                    onClick={() => setPickerOpen((previous) => !previous)}
                                 >
                                     {ownReaction ? ownReaction.emoji : '☺'}
                                 </button>
@@ -125,8 +166,12 @@ export const ChatMessageBubble = ({ message, showAuthor, showTimestamp, formatte
                                 <button
                                     type='button'
                                     className='chat-bubble-action'
-                                    title={(labels?.quickReplyTo ?? 'Reply to {name}').replace('{name}', message.authorName)}
-                                    aria-label={(labels?.quickReplyTo ?? 'Reply to {name}').replace('{name}', message.authorName)}
+                                    title={(
+                                        labels?.quickReplyTo ?? 'Reply to {name}'
+                                    ).replace('{name}', message.authorName)}
+                                    aria-label={(
+                                        labels?.quickReplyTo ?? 'Reply to {name}'
+                                    ).replace('{name}', message.authorName)}
                                     onClick={() => onQuickReply(message.authorName)}
                                 >
                                     <FaReply aria-hidden='true' />
@@ -136,8 +181,12 @@ export const ChatMessageBubble = ({ message, showAuthor, showTimestamp, formatte
                                 <button
                                     type='button'
                                     className='chat-bubble-action'
-                                    title={labels?.convertToAction ?? 'Turn into an action'}
-                                    aria-label={labels?.convertToAction ?? 'Turn into an action'}
+                                    title={
+                                        labels?.convertToAction ?? 'Turn into an action'
+                                    }
+                                    aria-label={
+                                        labels?.convertToAction ?? 'Turn into an action'
+                                    }
                                     onClick={() => onAct(message.id)}
                                 >
                                     <FaBolt aria-hidden='true' />
@@ -152,7 +201,13 @@ export const ChatMessageBubble = ({ message, showAuthor, showTimestamp, formatte
                 {supportsReactions && <MessageReactions reactions={otherReactions} />}
                 {/* Portaled to <body> rather than positioned inside the bubble: the chat panel scrolls,
                     so a picker positioned within it is clipped the moment it reaches the panel's edge. */}
-                <AnchoredOverlay anchorRef={reactionButtonRef} open={pickerOpen} side='above' align='right' gap={6}>
+                <AnchoredOverlay
+                    anchorRef={reactionButtonRef}
+                    open={pickerOpen}
+                    side='above'
+                    align='right'
+                    gap={6}
+                >
                     <ReactionPicker
                         ownEmoji={ownReaction?.emoji}
                         reactions={message.reactions}
diff --git a/Source/Canvas/shapes/ChatBubble/Emoji/EmojiPicker.tsx b/Source/Canvas/shapes/ChatBubble/Emoji/EmojiPicker.tsx
index 7daa2f0f..98d28ec8 100644
--- a/Source/Canvas/shapes/ChatBubble/Emoji/EmojiPicker.tsx
+++ b/Source/Canvas/shapes/ChatBubble/Emoji/EmojiPicker.tsx
@@ -44,8 +44,11 @@ export interface EmojiPickerLabels {
     categories?: Partial<Record<EmojiCategoryKey, string>>;
 }
 
+/**
+ * Props for the full emoji picker the quick row's last button opens — every emoji offered, in the
+ * sections a picker is expected to have. Only the selected section is mounted.
+ */
 export interface EmojiPickerProps {
-
     /** The emoji the viewer already gave, marked so picking it again reads as taking it back. */
     ownEmoji?: string;
 
@@ -72,28 +75,43 @@ export const EmojiPicker = ({ ownEmoji, onPick, labels }: EmojiPickerProps) => {
         gridRef.current?.scrollTo({ top: 0 });
     };
 
-    const emojis = EMOJI_CATALOG.find(section => section.key === category)?.emojis ?? [];
-    const categoryLabel = (key: EmojiCategoryKey) => labels?.categories?.[key] ?? DEFAULT_CATEGORY_LABELS[key];
+    const emojis =
+        EMOJI_CATALOG.find((section) => section.key === category)?.emojis ?? [];
+    const categoryLabel = (key: EmojiCategoryKey) =>
+        labels?.categories?.[key] ?? DEFAULT_CATEGORY_LABELS[key];
 
     return (
-        <div className='emoji-picker' role='dialog' aria-label={labels?.allEmojis ?? 'All emojis'}>
-            <div ref={gridRef} className='emoji-picker__grid' role='listbox' aria-label={labels?.pickEmoji ?? 'Pick an emoji'}>
-                {emojis.map(emoji => (
+        <div
+            className='emoji-picker'
+            role='dialog'
+            aria-label={labels?.allEmojis ?? 'All emojis'}
+        >
+            <div
+                ref={gridRef}
+                className='emoji-picker__grid'
+                role='listbox'
+                aria-label={labels?.pickEmoji ?? 'Pick an emoji'}
+            >
+                {emojis.map((emoji) => (
                     <button
                         key={emoji}
                         type='button'
                         role='option'
                         aria-selected={emoji === ownEmoji}
                         className={`emoji-picker__emoji${emoji === ownEmoji ? ' emoji-picker__emoji--selected' : ''}`}
-                        onMouseDown={event => event.preventDefault()}
+                        onMouseDown={(event) => event.preventDefault()}
                         onClick={() => onPick(emoji)}
                     >
                         {emoji}
                     </button>
                 ))}
             </div>
-            <div className='emoji-picker__tabs' role='tablist' aria-label={labels?.emojiCategories ?? 'Emoji categories'}>
-                {EMOJI_CATALOG.map(section => (
+            <div
+                className='emoji-picker__tabs'
+                role='tablist'
+                aria-label={labels?.emojiCategories ?? 'Emoji categories'}
+            >
+                {EMOJI_CATALOG.map((section) => (
                     <button
                         key={section.key}
                         type='button'
@@ -102,7 +120,7 @@ export const EmojiPicker = ({ ownEmoji, onPick, labels }: EmojiPickerProps) => {
                         aria-label={categoryLabel(section.key)}
                         title={categoryLabel(section.key)}
                         className={`emoji-picker__tab${section.key === category ? ' emoji-picker__tab--current' : ''}`}
-                        onMouseDown={event => event.preventDefault()}
+                        onMouseDown={(event) => event.preventDefault()}
                         onClick={() => showCategory(section.key)}
                     >
                         {CATEGORY_GLYPHS[section.key]}
diff --git a/Source/Canvas/shapes/ChatBubble/Emoji/index.ts b/Source/Canvas/shapes/ChatBubble/Emoji/index.ts
index 9e0d1181..90083589 100644
--- a/Source/Canvas/shapes/ChatBubble/Emoji/index.ts
+++ b/Source/Canvas/shapes/ChatBubble/Emoji/index.ts
@@ -2,8 +2,10 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 export * from './EmojiCategory';
-export * from './EmojiCategoryKey';
-export * from './emojiCatalog';
+// `EmojiCategoryKey` and `EMOJI_CATALOG` are internal implementation details of
+// `EmojiPicker` and are intentionally not part of the public API.
 export * from './EmojiMemory';
 export * from './EmojiPicker';
-export * from './recentEmojis';
+export { recentEmojis, rememberEmoji } from './recentEmojis';
+// `DEFAULT_EMOJIS` and `QUICK_ROW_SIZE` are internal constants used by
+// `recentEmojis`/`rememberEmoji` and are intentionally not part of the public API.
diff --git a/Source/Canvas/shapes/ChatBubble/FailedReply.tsx b/Source/Canvas/shapes/ChatBubble/FailedReply.tsx
index cf8d63de..fd2160e9 100644
--- a/Source/Canvas/shapes/ChatBubble/FailedReply.tsx
+++ b/Source/Canvas/shapes/ChatBubble/FailedReply.tsx
@@ -9,7 +9,6 @@ import { FaTriangleExclamation } from 'react-icons/fa6';
 
 /** The pieces of a would-be issue report, handed to {@link FailedReplyProps.buildReportUrl}. */
 export interface FailedReplyReportDetails {
-
     /** A one-line title for the report. */
     title: string;
 
@@ -44,8 +43,13 @@ export interface FailedReplyLabels {
     close?: string;
 }
 
+/**
+ * Props for the line a failed turn leaves behind, standing where the answer would have been. It says
+ * plainly that the answer never came, and offers the two things somebody staring at it actually wants:
+ * the error itself, and — when {@link buildReportUrl} is wired up — a way to report it without
+ * transcribing anything by hand.
+ */
 export interface FailedReplyProps {
-
     /** The message whose turn ended in failure; its `failureDetail` carries the reason. */
     message: ChatMessage;
 
@@ -73,7 +77,10 @@ export const FailedReply = ({ message, buildReportUrl, labels }: FailedReplyProp
 
     const reportUrl = buildReportUrl?.({
         title: withName(labels?.reportTitle ?? '"{name}" could not answer a comment'),
-        summary: withName(labels?.reportSummary ?? '{name} failed while answering a comment. The error it reported follows.'),
+        summary: withName(
+            labels?.reportSummary ??
+                '{name} failed while answering a comment. The error it reported follows.',
+        ),
         detail,
         // The comment the failed turn was written as is the only identifier the reply carries, and it
         // is what the turn can be traced by on the server.
@@ -87,10 +94,16 @@ export const FailedReply = ({ message, buildReportUrl, labels }: FailedReplyProp
                     className='chat-failed-reply__icon'
                     aria-hidden='true'
                 />
-                <span className='chat-failed-reply__text'>{withName(labels?.replyFailed ?? '{name} could not answer')}</span>
+                <span className='chat-failed-reply__text'>
+                    {withName(labels?.replyFailed ?? '{name} could not answer')}
+                </span>
             </div>
             <div className='chat-failed-reply__actions'>
-                <button type='button' className='chat-failed-reply__action' onClick={() => setDetailShown(true)}>
+                <button
+                    type='button'
+                    className='chat-failed-reply__action'
+                    onClick={() => setDetailShown(true)}
+                >
                     {labels?.seeError ?? 'See error'}
                 </button>
                 {reportUrl && (
@@ -98,7 +111,8 @@ export const FailedReply = ({ message, buildReportUrl, labels }: FailedReplyProp
                         className='chat-failed-reply__action'
                         href={reportUrl}
                         target='_blank'
-                        rel='noreferrer'>
+                        rel='noreferrer'
+                    >
                         {labels?.report ?? 'Report a bug'}
                     </a>
                 )}
@@ -110,7 +124,8 @@ export const FailedReply = ({ message, buildReportUrl, labels }: FailedReplyProp
                     buttons={DialogButtons.Ok}
                     okLabel={labels?.close ?? 'Close'}
                     onConfirm={() => setDetailShown(false)}
-                    onCancel={() => setDetailShown(false)}>
+                    onCancel={() => setDetailShown(false)}
+                >
                     <pre className='chat-failed-reply__detail'>{detail}</pre>
                 </Dialog>
             )}
diff --git a/Source/Canvas/shapes/ChatBubble/Mentions/MentionSuggestions.tsx b/Source/Canvas/shapes/ChatBubble/Mentions/MentionSuggestions.tsx
index 7ad2dd9e..35fed80c 100644
--- a/Source/Canvas/shapes/ChatBubble/Mentions/MentionSuggestions.tsx
+++ b/Source/Canvas/shapes/ChatBubble/Mentions/MentionSuggestions.tsx
@@ -5,8 +5,11 @@ import { PersonAvatarCircle, type BuildAvatarUrlParams } from '../Avatar';
 import { ChatAuthorKind } from '../ChatAuthorKind';
 import type { MentionCandidate } from './MentionCandidate';
 
+/**
+ * Props for the list that opens while an `@` mention is being typed, showing people and agents
+ * together with their avatars.
+ */
 export interface MentionSuggestionsProps {
-
     /** The candidates to offer, already filtered by what has been typed. */
     candidates: MentionCandidate[];
 
@@ -27,7 +30,13 @@ export interface MentionSuggestionsProps {
  * The list that opens while an `@` mention is being typed, showing people and agents together with
  * their avatars.
  */
-export const MentionSuggestions = ({ candidates, highlightedIndex, onSelect, onHighlight, buildAvatarUrl }: MentionSuggestionsProps) => (
+export const MentionSuggestions = ({
+    candidates,
+    highlightedIndex,
+    onSelect,
+    onHighlight,
+    buildAvatarUrl,
+}: MentionSuggestionsProps) => (
     <div className='mention-suggestions' role='listbox'>
         {candidates.map((candidate, index) => (
             <button
@@ -37,7 +46,7 @@ export const MentionSuggestions = ({ candidates, highlightedIndex, onSelect, onH
                 aria-selected={index === highlightedIndex}
                 className={`mention-suggestions__item${index === highlightedIndex ? ' mention-suggestions__item--highlighted' : ''}`}
                 // The input must keep focus, so the pointer press never reaches it as a blur.
-                onMouseDown={event => event.preventDefault()}
+                onMouseDown={(event) => event.preventDefault()}
                 onMouseEnter={() => onHighlight(index)}
                 onClick={() => onSelect(candidate)}
             >
@@ -46,7 +55,9 @@ export const MentionSuggestions = ({ candidates, highlightedIndex, onSelect, onH
                     name={candidate.name}
                     hasAvatar={candidate.hasAvatar}
                     size={20}
-                    ownerType={candidate.kind === ChatAuthorKind.Agent ? 'Agents' : 'Users'}
+                    ownerType={
+                        candidate.kind === ChatAuthorKind.Agent ? 'Agents' : 'Users'
+                    }
                     version={candidate.avatarVersion}
                     buildAvatarUrl={buildAvatarUrl}
                 />
diff --git a/Source/Canvas/shapes/ChatBubble/Mentions/index.ts b/Source/Canvas/shapes/ChatBubble/Mentions/index.ts
index 9fd8088c..699b3745 100644
--- a/Source/Canvas/shapes/ChatBubble/Mentions/index.ts
+++ b/Source/Canvas/shapes/ChatBubble/Mentions/index.ts
@@ -4,6 +4,6 @@
 export * from './MentionCandidate';
 export * from './MentionQuery';
 export * from './MentionSuggestions';
-export * from './activeMentionQuery';
-export * from './applyMention';
-export * from './matchCandidates';
+// `activeMentionQuery`, `applyMention`/`MentionApplied`, and `matchCandidates` are
+// internal helpers used by `ChatComposer` and are intentionally not part of the
+// public API.
diff --git a/Source/Canvas/shapes/ChatBubble/MessageReactions.tsx b/Source/Canvas/shapes/ChatBubble/MessageReactions.tsx
index 5d1be673..6843afa4 100644
--- a/Source/Canvas/shapes/ChatBubble/MessageReactions.tsx
+++ b/Source/Canvas/shapes/ChatBubble/MessageReactions.tsx
@@ -7,8 +7,11 @@ import type { ChatMessageReaction } from './ChatMessageReaction';
 
 const MAX_STACKED_GLYPHS = 3;
 
+/**
+ * Props for the row of emoji badges a message's reactions render as, sitting below the message text.
+ * Each badge says who is behind it on hover, emoji on the left and name on the right, one line per person.
+ */
 export interface MessageReactionsProps {
-
     /**
      * The reactions to render, one badge per distinct emoji. Several people behind the same emoji
      * render as a stack rather than repeating the glyph; a different emoji gets its own badge on the
@@ -18,7 +21,6 @@ export interface MessageReactionsProps {
 }
 
 interface ReactionBadgeProps {
-
     /** The reaction this badge stands for. */
     reaction: ChatMessageReaction;
 }
@@ -45,27 +47,46 @@ const ReactionBadge = ({ reaction }: ReactionBadgeProps) => {
                 className='message-reactions__badge'
                 onFocus={() => setIsHovered(true)}
                 onBlur={() => setIsHovered(false)}
-                onClick={() => setIsPinned(pinned => !pinned)}
+                onClick={() => setIsPinned((pinned) => !pinned)}
             >
                 <span className='message-reactions__stack'>
                     {reaction.users.slice(0, MAX_STACKED_GLYPHS).map((user, index) => (
-                        <span key={user.id.toString()} className='message-reactions__glyph' style={{ zIndex: MAX_STACKED_GLYPHS - index }}>
+                        <span
+                            key={user.id.toString()}
+                            className='message-reactions__glyph'
+                            style={{ zIndex: MAX_STACKED_GLYPHS - index }}
+                        >
                             {reaction.emoji}
                         </span>
                     ))}
                 </span>
                 {reaction.users.length > 1 && (
-                    <span className='message-reactions__count'>{reaction.users.length}</span>
+                    <span className='message-reactions__count'>
+                        {reaction.users.length}
+                    </span>
                 )}
             </button>
             {/* Portaled rather than positioned inside the bubble: the chat panel scrolls, and anything
                 positioned within it is clipped the moment it reaches the panel's edge. */}
-            <AnchoredOverlay anchorRef={anchorRef} open={isHovered || isPinned} side='above' align='left' gap={6}>
+            <AnchoredOverlay
+                anchorRef={anchorRef}
+                open={isHovered || isPinned}
+                side='above'
+                align='left'
+                gap={6}
+            >
                 <div className='message-reactions__tooltip' role='tooltip'>
-                    {reaction.users.map(user => (
-                        <div key={user.id.toString()} className='message-reactions__tooltip-row'>
-                            <span className='message-reactions__tooltip-emoji'>{reaction.emoji}</span>
-                            <span className='message-reactions__tooltip-name'>{user.name}</span>
+                    {reaction.users.map((user) => (
+                        <div
+                            key={user.id.toString()}
+                            className='message-reactions__tooltip-row'
+                        >
+                            <span className='message-reactions__tooltip-emoji'>
+                                {reaction.emoji}
+                            </span>
+                            <span className='message-reactions__tooltip-name'>
+                                {user.name}
+                            </span>
                         </div>
                     ))}
                 </div>
@@ -83,7 +104,7 @@ export const MessageReactions = ({ reactions }: MessageReactionsProps) => {
 
     return (
         <div className='message-reactions'>
-            {reactions.map(reaction => (
+            {reactions.map((reaction) => (
                 <ReactionBadge key={reaction.emoji} reaction={reaction} />
             ))}
         </div>
diff --git a/Source/Canvas/shapes/ChatBubble/ReactionPicker.tsx b/Source/Canvas/shapes/ChatBubble/ReactionPicker.tsx
index 187eac37..5d8dec50 100644
--- a/Source/Canvas/shapes/ChatBubble/ReactionPicker.tsx
+++ b/Source/Canvas/shapes/ChatBubble/ReactionPicker.tsx
@@ -19,8 +19,12 @@ export interface ReactionPickerLabels {
     emojiPicker?: EmojiPickerLabels;
 }
 
+/**
+ * Props for the popover a reaction button opens: the emojis this person reached for most recently,
+ * and a muted button at the end that opens the full picker — the shape Apple's tapback bar established,
+ * where the quick row answers almost every reaction and the rest is one click further away.
+ */
 export interface ReactionPickerProps {
-
     /** The emoji the viewer already gave, highlighted so picking it again reads as "remove". */
     ownEmoji?: string;
 
@@ -61,16 +65,28 @@ export interface ReactionPickerProps {
  * Picking the emoji already given is how a reaction is taken back; the caller decides
  * give/change/revoke from what was clicked.
  */
-export const ReactionPicker = ({ ownEmoji, reactions = [], memory, anchorRef, onPick, onDismiss, labels }: ReactionPickerProps) => {
+export const ReactionPicker = ({
+    ownEmoji,
+    reactions = [],
+    memory,
+    anchorRef,
+    onPick,
+    onDismiss,
+    labels,
+}: ReactionPickerProps) => {
     const rootRef = useRef<HTMLDivElement>(null);
-    const store = memory ?? (typeof window === 'undefined' ? undefined : window.localStorage);
-    const [quickEmojis, setQuickEmojis] = useState(() => store ? recentEmojis(store) : []);
+    const store =
+        memory ?? (typeof window === 'undefined' ? undefined : window.localStorage);
+    const [quickEmojis, setQuickEmojis] = useState(() =>
+        store ? recentEmojis(store) : [],
+    );
     const [showingAll, setShowingAll] = useState(false);
 
     useEffect(() => {
         const handlePointerDown = (event: PointerEvent) => {
             const target = event.target as Node;
-            if (rootRef.current?.contains(target) || anchorRef?.current?.contains(target)) return;
+            if (rootRef.current?.contains(target) || anchorRef?.current?.contains(target))
+                return;
             onDismiss();
         };
         const handleKeyDown = (event: KeyboardEvent) => {
@@ -96,15 +112,19 @@ export const ReactionPicker = ({ ownEmoji, reactions = [], memory, anchorRef, on
 
     return (
         <div ref={rootRef} className='reaction-picker'>
-            <div className='reaction-picker__quick' role='listbox' aria-label={labels?.pickEmoji ?? 'Pick an emoji'}>
-                {quickEmojis.map(emoji => (
+            <div
+                className='reaction-picker__quick'
+                role='listbox'
+                aria-label={labels?.pickEmoji ?? 'Pick an emoji'}
+            >
+                {quickEmojis.map((emoji) => (
                     <button
                         key={emoji}
                         type='button'
                         role='option'
                         aria-selected={emoji === ownEmoji}
                         className={`reaction-picker__item${emoji === ownEmoji ? ' reaction-picker__item--selected' : ''}`}
-                        onMouseDown={event => event.preventDefault()}
+                        onMouseDown={(event) => event.preventDefault()}
                         onClick={() => pick(emoji)}
                     >
                         {emoji}
@@ -116,21 +136,36 @@ export const ReactionPicker = ({ ownEmoji, reactions = [], memory, anchorRef, on
                     title={labels?.allEmojis ?? 'All emojis'}
                     aria-label={labels?.allEmojis ?? 'All emojis'}
                     aria-expanded={showingAll}
-                    onMouseDown={event => event.preventDefault()}
-                    onClick={() => setShowingAll(open => !open)}
+                    onMouseDown={(event) => event.preventDefault()}
+                    onClick={() => setShowingAll((open) => !open)}
                 >
                     ☺
                 </button>
             </div>
-            {showingAll && <EmojiPicker ownEmoji={ownEmoji} onPick={pick} labels={labels?.emojiPicker} />}
+            {showingAll && (
+                <EmojiPicker
+                    ownEmoji={ownEmoji}
+                    onPick={pick}
+                    labels={labels?.emojiPicker}
+                />
+            )}
             {!showingAll && reactions.length > 0 && (
                 <div className='reaction-picker__given'>
-                    {reactions.flatMap(reaction => reaction.users.map(user => (
-                        <div key={`${reaction.emoji}-${user.id.toString()}`} className='reaction-picker__given-row'>
-                            <span className='reaction-picker__given-emoji'>{reaction.emoji}</span>
-                            <span className='reaction-picker__given-name'>{user.name}</span>
-                        </div>
-                    )))}
+                    {reactions.flatMap((reaction) =>
+                        reaction.users.map((user) => (
+                            <div
+                                key={`${reaction.emoji}-${user.id.toString()}`}
+                                className='reaction-picker__given-row'
+                            >
+                                <span className='reaction-picker__given-emoji'>
+                                    {reaction.emoji}
+                                </span>
+                                <span className='reaction-picker__given-name'>
+                                    {user.name}
+                                </span>
+                            </div>
+                        )),
+                    )}
                 </div>
             )}
         </div>
diff --git a/Source/Canvas/shapes/ChatBubble/TypingIndicator.tsx b/Source/Canvas/shapes/ChatBubble/TypingIndicator.tsx
index 737f61b1..b971b258 100644
--- a/Source/Canvas/shapes/ChatBubble/TypingIndicator.tsx
+++ b/Source/Canvas/shapes/ChatBubble/TypingIndicator.tsx
@@ -5,8 +5,12 @@ import { PersonAvatarCircle, type BuildAvatarUrlParams } from './Avatar';
 import { ChatAuthorKind } from './ChatAuthorKind';
 import type { ChatTypingAuthor } from './ChatTypingAuthor';
 
+/**
+ * Props for the classic jumping dots, shown while somebody is composing a message — a person typing
+ * or an agent working on its answer. Both read the same way on purpose: an agent at work is a teammate
+ * mid-sentence, not a spinner.
+ */
 export interface TypingIndicatorProps {
-
     /** Who is currently typing or working. Rendering is skipped when nobody is. */
     authors: ChatTypingAuthor[];
 
@@ -22,7 +26,11 @@ export interface TypingIndicatorProps {
  * agent working on its answer. Both read the same way on purpose: an agent at work is a teammate
  * mid-sentence, not a spinner.
  */
-export const TypingIndicator = ({ authors, label, buildAvatarUrl }: TypingIndicatorProps) => {
+export const TypingIndicator = ({
+    authors,
+    label,
+    buildAvatarUrl,
+}: TypingIndicatorProps) => {
     if (authors.length === 0) {
         return null;
     }
@@ -30,14 +38,16 @@ export const TypingIndicator = ({ authors, label, buildAvatarUrl }: TypingIndica
     return (
         <div className='chat-typing' aria-live='polite'>
             <div className='chat-typing__authors'>
-                {authors.map(author => (
+                {authors.map((author) => (
                     <PersonAvatarCircle
                         key={author.id}
                         userId={author.id}
                         name={author.name}
                         hasAvatar={author.hasAvatar}
                         size={18}
-                        ownerType={author.kind === ChatAuthorKind.Agent ? 'Agents' : 'Users'}
+                        ownerType={
+                            author.kind === ChatAuthorKind.Agent ? 'Agents' : 'Users'
+                        }
                         buildAvatarUrl={buildAvatarUrl}
                     />
                 ))}
diff --git a/Source/Canvas/shapes/ChatBubble/index.ts b/Source/Canvas/shapes/ChatBubble/index.ts
index de08c5c5..1665ad94 100644
--- a/Source/Canvas/shapes/ChatBubble/index.ts
+++ b/Source/Canvas/shapes/ChatBubble/index.ts
@@ -18,10 +18,10 @@ export type { ChatTypingAuthor } from './ChatTypingAuthor';
 export { ChatVariant } from './ChatVariant';
 export { FailedReply } from './FailedReply';
 export type { FailedReplyProps, FailedReplyLabels, FailedReplyReportDetails } from './FailedReply';
-export { findOwnReaction } from './findOwnReaction';
+// `findOwnReaction` and `reactionsExcludingUser` are internal helpers used by
+// `ChatMessageBubble` and are intentionally not part of the public API.
 export { MessageReactions } from './MessageReactions';
 export type { MessageReactionsProps } from './MessageReactions';
-export { reactionsExcludingUser } from './reactionsExcludingUser';
 export { ReactionPicker } from './ReactionPicker';
 export type { ReactionPickerProps, ReactionPickerLabels } from './ReactionPicker';
 export { TypingIndicator } from './TypingIndicator';
diff --git a/Source/Canvas/shapes/Note/Note.tsx b/Source/Canvas/shapes/Note/Note.tsx
index 30d6630b..ee0534c7 100644
--- a/Source/Canvas/shapes/Note/Note.tsx
+++ b/Source/Canvas/shapes/Note/Note.tsx
@@ -42,7 +42,7 @@ function textFitsAtSize(
     text: string,
     fontSize: number,
     availableWidth: number,
-    availableHeight: number
+    availableHeight: number,
 ): boolean {
     measurer.style.width = `${availableWidth}px`;
     measurer.style.fontSize = `${fontSize}px`;
@@ -55,9 +55,13 @@ function findOptimalFontSize(
     measurer: HTMLDivElement,
     text: string,
     width: number,
-    height: number
+    height: number,
 ): FontFit {
-    if (!(text ?? '').trim()) return { fontSize: Math.min(MAX_FONT_SIZE, Math.min(width, height) * 0.4), overflows: false };
+    if (!(text ?? '').trim())
+        return {
+            fontSize: Math.min(MAX_FONT_SIZE, Math.min(width, height) * 0.4),
+            overflows: false,
+        };
 
     const availableWidth = width - PADDING * 2;
     const availableHeight = height - PADDING * 2;
@@ -88,19 +92,24 @@ type HandleKey = (typeof HANDLE_KEYS)[number];
 
 const HANDLE_POSITIONS: Record<HandleKey, React.CSSProperties> = {
     nw: { top: -4, left: -4 },
-    n:  { top: -4, left: '50%', transform: 'translateX(-50%)' },
+    n: { top: -4, left: '50%', transform: 'translateX(-50%)' },
     ne: { top: -4, right: -4 },
-    e:  { top: '50%', right: -4, transform: 'translateY(-50%)' },
+    e: { top: '50%', right: -4, transform: 'translateY(-50%)' },
     se: { bottom: -4, right: -4 },
-    s:  { bottom: -4, left: '50%', transform: 'translateX(-50%)' },
+    s: { bottom: -4, left: '50%', transform: 'translateX(-50%)' },
     sw: { bottom: -4, left: -4 },
-    w:  { top: '50%', left: -4, transform: 'translateY(-50%)' },
+    w: { top: '50%', left: -4, transform: 'translateY(-50%)' },
 };
 
 const RESIZE_CURSORS: Record<HandleKey, string> = {
-    nw: 'nw-resize', n: 'n-resize', ne: 'ne-resize',
-    e: 'e-resize',   se: 'se-resize',
-    s: 's-resize',   sw: 'sw-resize', w: 'w-resize',
+    nw: 'nw-resize',
+    n: 'n-resize',
+    ne: 'ne-resize',
+    e: 'e-resize',
+    se: 'se-resize',
+    s: 's-resize',
+    sw: 'sw-resize',
+    w: 'w-resize',
 };
 
 /** Props for a fully controlled movable, resizable, editable Canvas note. */
@@ -135,7 +144,22 @@ export interface NoteProps {
     onExpandedChange?: (id: string, isExpanded: boolean) => void;
 }
 
-export const Note: React.FC<NoteProps> = ({ note, selected, onSelect, onMove, onMoveEnd, onResize, onResizeEnd, onTextChange, onExpandedChange }) => {
+/**
+ * A fully controlled movable, resizable, editable Canvas note with automatic font fitting. Text
+ * shrinks to fit the note's bounds; when it no longer fits even at the readability floor, a "see full
+ * text" button grows the note temporarily. Double-click to edit, drag to move, drag handles to resize.
+ */
+export const Note: React.FC<NoteProps> = ({
+    note,
+    selected,
+    onSelect,
+    onMove,
+    onMoveEnd,
+    onResize,
+    onResizeEnd,
+    onTextChange,
+    onExpandedChange,
+}) => {
     const noteRef = useRef<HTMLDivElement>(null);
     const measurerRef = useRef<HTMLDivElement>(null);
     const textareaRef = useRef<HTMLTextAreaElement>(null);
@@ -181,7 +205,6 @@ export const Note: React.FC<NoteProps> = ({ note, selected, onSelect, onMove, on
         zoom: number;
     } | null>(null);
 
-
     const readEffectiveZoom = useCallback((): number => {
         if (!noteRef.current) return 1;
         const renderedWidth = noteRef.current.getBoundingClientRect().width;
@@ -204,7 +227,7 @@ export const Note: React.FC<NoteProps> = ({ note, selected, onSelect, onMove, on
             };
             event.currentTarget.setPointerCapture(event.pointerId);
         },
-        [isEditing, note.id, note.x, note.y, onSelect, readEffectiveZoom]
+        [isEditing, note.id, note.x, note.y, onSelect, readEffectiveZoom],
     );
 
     const handlePointerMove = useCallback(
@@ -215,7 +238,7 @@ export const Note: React.FC<NoteProps> = ({ note, selected, onSelect, onMove, on
             const deltaY = (event.clientY - clientY) / zoom;
             onMove(note.id, startX + deltaX, startY + deltaY);
         },
-        [note.id, onMove]
+        [note.id, onMove],
     );
 
     const handlePointerUp = useCallback(() => {
@@ -242,13 +265,22 @@ export const Note: React.FC<NoteProps> = ({ note, selected, onSelect, onMove, on
             };
             event.currentTarget.setPointerCapture(event.pointerId);
         },
-        [note.x, note.y, note.width, note.height, readEffectiveZoom]
+        [note.x, note.y, note.width, note.height, readEffectiveZoom],
     );
 
     const handleResizePointerMove = useCallback(
         (event: React.PointerEvent<HTMLDivElement>) => {
             if (!resizeRef.current || !event.buttons) return;
-            const { handle, clientX, clientY, startX, startY, startWidth, startHeight, zoom } = resizeRef.current;
+            const {
+                handle,
+                clientX,
+                clientY,
+                startX,
+                startY,
+                startWidth,
+                startHeight,
+                zoom,
+            } = resizeRef.current;
             const deltaX = (event.clientX - clientX) / zoom;
             const deltaY = (event.clientY - clientY) / zoom;
 
@@ -274,7 +306,7 @@ export const Note: React.FC<NoteProps> = ({ note, selected, onSelect, onMove, on
 
             onResize(note.id, newX, newY, newWidth, newHeight);
         },
-        [note.id, onResize]
+        [note.id, onResize],
     );
 
     const handleResizePointerUp = useCallback(() => {
@@ -286,29 +318,38 @@ export const Note: React.FC<NoteProps> = ({ note, selected, onSelect, onMove, on
 
     // ── Text editing ────────────────────────────────────────────────────────
 
-    const handleDoubleClick = useCallback((event: React.MouseEvent<HTMLDivElement>) => {
-        event.stopPropagation();
-        setLiveText(note.text);
-        setIsEditing(true);
-    }, [note.text]);
+    const handleDoubleClick = useCallback(
+        (event: React.MouseEvent<HTMLDivElement>) => {
+            event.stopPropagation();
+            setLiveText(note.text);
+            setIsEditing(true);
+        },
+        [note.text],
+    );
 
-    const handleTextareaChange = useCallback((event: React.ChangeEvent<HTMLTextAreaElement>) => {
-        setLiveText(event.currentTarget.value);
-    }, []);
+    const handleTextareaChange = useCallback(
+        (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+            setLiveText(event.currentTarget.value);
+        },
+        [],
+    );
 
     const handleTextareaBlur = useCallback(
         (event: React.FocusEvent<HTMLTextAreaElement>) => {
             onTextChange(note.id, event.currentTarget.value);
             setIsEditing(false);
         },
-        [note.id, onTextChange]
+        [note.id, onTextChange],
     );
 
-    const handleTextareaKeyDown = useCallback((event: React.KeyboardEvent<HTMLTextAreaElement>) => {
-        if (event.key === 'Escape') {
-            setIsEditing(false);
-        }
-    }, []);
+    const handleTextareaKeyDown = useCallback(
+        (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+            if (event.key === 'Escape') {
+                setIsEditing(false);
+            }
+        },
+        [],
+    );
 
     // Use live text for font sizing when editing, otherwise use committed text
     const displayText = isEditing ? liveText : note.text;
@@ -318,7 +359,12 @@ export const Note: React.FC<NoteProps> = ({ note, selected, onSelect, onMove, on
     // Also measures actual text height so the textarea can be vertically centred.
     useLayoutEffect(() => {
         if (!measurerRef.current) return;
-        const { fontSize: optimal, overflows } = findOptimalFontSize(measurerRef.current, displayText, note.width, note.height);
+        const { fontSize: optimal, overflows } = findOptimalFontSize(
+            measurerRef.current,
+            displayText,
+            note.width,
+            note.height,
+        );
         setFontSize(optimal);
         setIsOverflowing(overflows);
 
@@ -360,7 +406,10 @@ export const Note: React.FC<NoteProps> = ({ note, selected, onSelect, onMove, on
         <div
             ref={noteRef}
             className={`canvas-note${selected ? ' canvas-note--selected' : ''}${isExpanded ? ' canvas-note--expanded' : ''}`}
-            style={{ width: note.width, height: isExpanded ? Math.max(note.height, fullTextHeight) : note.height }}
+            style={{
+                width: note.width,
+                height: isExpanded ? Math.max(note.height, fullTextHeight) : note.height,
+            }}
             onPointerDown={handlePointerDown}
             onPointerMove={handlePointerMove}
             onPointerUp={handlePointerUp}
@@ -369,11 +418,7 @@ export const Note: React.FC<NoteProps> = ({ note, selected, onSelect, onMove, on
             onDoubleClick={handleDoubleClick}
         >
             {/* Off-screen measurement div — mirrors text styling for accurate fitting */}
-            <div
-                ref={measurerRef}
-                className='canvas-note__measurer'
-                aria-hidden='true'
-            />
+            <div ref={measurerRef} className='canvas-note__measurer' aria-hidden='true' />
 
             {isEditing ? (
                 <textarea
@@ -390,7 +435,7 @@ export const Note: React.FC<NoteProps> = ({ note, selected, onSelect, onMove, on
                     onChange={handleTextareaChange}
                     onBlur={handleTextareaBlur}
                     onKeyDown={handleTextareaKeyDown}
-                    onPointerDown={event => event.stopPropagation()}
+                    onPointerDown={(event) => event.stopPropagation()}
                 />
             ) : (
                 <p className='canvas-note__text' style={{ fontSize }}>
@@ -405,7 +450,7 @@ export const Note: React.FC<NoteProps> = ({ note, selected, onSelect, onMove, on
                     aria-label='See full text'
                     title='See full text'
                     onClick={handleExpand}
-                    onPointerDown={event => event.stopPropagation()}
+                    onPointerDown={(event) => event.stopPropagation()}
                 >
                     <FaPlus aria-hidden='true' />
                 </button>
@@ -413,17 +458,22 @@ export const Note: React.FC<NoteProps> = ({ note, selected, onSelect, onMove, on
 
             {/* The handles resize from the note's own height, so they stay off while it is showing more
                 than that — dragging one would otherwise snap the note back to its real size first. */}
-            {selected && !isExpanded && HANDLE_KEYS.map(handle => (
-                <div
-                    key={handle}
-                    className='canvas-note__handle'
-                    style={{ ...HANDLE_POSITIONS[handle], cursor: RESIZE_CURSORS[handle] }}
-                    onPointerDown={handleResizePointerDown(handle)}
-                    onPointerMove={handleResizePointerMove}
-                    onPointerUp={handleResizePointerUp}
-                    onPointerCancel={handleResizePointerUp}
-                />
-            ))}
+            {selected &&
+                !isExpanded &&
+                HANDLE_KEYS.map((handle) => (
+                    <div
+                        key={handle}
+                        className='canvas-note__handle'
+                        style={{
+                            ...HANDLE_POSITIONS[handle],
+                            cursor: RESIZE_CURSORS[handle],
+                        }}
+                        onPointerDown={handleResizePointerDown(handle)}
+                        onPointerMove={handleResizePointerMove}
+                        onPointerUp={handleResizePointerUp}
+                        onPointerCancel={handleResizePointerUp}
+                    />
+                ))}
         </div>
     );
 };
diff --git a/Source/CommandDialog/CommandDialog.tsx b/Source/CommandDialog/CommandDialog.tsx
index e6c2b912..09a27ee3 100644
--- a/Source/CommandDialog/CommandDialog.tsx
+++ b/Source/CommandDialog/CommandDialog.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 { ICommandResult } from '@cratis/arc/commands';
+import type { ICommandResult } from '@cratis/arc/commands';
 import { DialogButtons, DialogResult } from '@cratis/arc.react/dialogs';
 import { Dialog, type DialogProps } from '../Dialogs/Dialog';
 import React, { useState } from 'react';
@@ -10,10 +10,13 @@ import {
     CommandFormFieldWrapper,
     useCommandFormContext,
     useCommandInstance,
-    type CommandFormProps
+    type CommandFormProps,
 } from '@cratis/arc.react/commands';
 import { applyBeforeExecute, type BeforeExecuteCallback } from './applyBeforeExecute';
-import { isCommandFormField, markAsCommandFormColumn } from '../CommandForm/commandFormMarkers';
+import {
+    isCommandFormField,
+    markAsCommandFormColumn,
+} from '../CommandForm/commandFormMarkers';
 
 /**
  * Props for {@link CommandDialog}. Combines the props of a `CommandForm`
@@ -25,7 +28,8 @@ import { isCommandFormField, markAsCommandFormColumn } from '../CommandForm/comm
  * @typeParam TResponse - The response payload type returned by a successful command. Defaults to `object`.
  */
 export interface CommandDialogProps<TCommand extends object, TResponse = object>
-    extends Omit<CommandFormProps<TCommand, TResponse>, 'children' | 'onBeforeExecute'>,
+    extends
+        Omit<CommandFormProps<TCommand, TResponse>, 'children' | 'onBeforeExecute'>,
         Omit<DialogProps, 'children' | 'isBusy'> {
     /**
      * A transformer invoked with the current command values immediately before
@@ -79,7 +83,7 @@ const CommandDialogWrapper = <TCommand extends object, TResponse = object>({
     pt,
     ptOptions,
     unstyled,
-    children
+    children,
 }: {
     title: string;
     visible?: boolean;
@@ -111,7 +115,11 @@ const CommandDialogWrapper = <TCommand extends object, TResponse = object>({
     unstyled?: DialogProps['unstyled'];
     children?: React.ReactNode;
 }) => {
-    const { setCommandValues, setCommandResult, isValid: isCommandFormValid } = useCommandFormContext<TCommand>();
+    const {
+        setCommandValues,
+        setCommandResult,
+        isValid: isCommandFormValid,
+    } = useCommandFormContext<TCommand>();
     const commandInstance = useCommandInstance<TCommand>();
     const [isBusy, setIsBusy] = useState(false);
 
@@ -123,6 +131,7 @@ const CommandDialogWrapper = <TCommand extends object, TResponse = object>({
                 const applied = applyBeforeExecute(onBeforeExecute, commandInstance);
                 setCommandValues(applied instanceof Promise ? await applied : applied);
             }
+            // SAFETY: Arc command instances expose execute at runtime; the wrapper's public type omits it.
             result = await (
                 commandInstance as unknown as {
                     execute: () => Promise<ICommandResult<TResponse>>;
@@ -135,10 +144,7 @@ const CommandDialogWrapper = <TCommand extends object, TResponse = object>({
         if (!result.isSuccess) {
             await onFailed?.(result);
             if (result.hasExceptions) {
-                await onException?.(
-                    result.exceptionMessages,
-                    result.exceptionStackTrace,
-                );
+                await onException?.(result.exceptionMessages, result.exceptionStackTrace);
             }
             if (!result.isAuthorized) await onUnauthorized?.();
             if (!result.isValid) {
@@ -169,15 +175,23 @@ const CommandDialogWrapper = <TCommand extends object, TResponse = object>({
 
             const component = child.type as React.ComponentType<unknown>;
             if (isCommandFormField(component)) {
-                type FieldElement = Parameters<typeof CommandFormFieldWrapper>[0]['field'];
-                return <CommandFormFieldWrapper field={child as unknown as FieldElement} />;
+                type FieldElement = Parameters<
+                    typeof CommandFormFieldWrapper
+                >[0]['field'];
+                // SAFETY: isCommandFormField guards that child.type is a command form field component.
+                return (
+                    <CommandFormFieldWrapper field={child as unknown as FieldElement} />
+                );
             }
 
             const childProps = child.props as Record<string, unknown>;
             if (childProps.children != null) {
-                return React.cloneElement(child as React.ReactElement<Record<string, unknown>>, {
-                    children: processChildren(childProps.children as React.ReactNode)
-                });
+                return React.cloneElement(
+                    child as React.ReactElement<Record<string, unknown>>,
+                    {
+                        children: processChildren(childProps.children as React.ReactNode),
+                    },
+                );
             }
 
             return child;
@@ -185,7 +199,7 @@ const CommandDialogWrapper = <TCommand extends object, TResponse = object>({
     };
 
     const processedChildren = processChildren(children);
-    const isDialogValid = (isValid !== false) && isCommandFormValid;
+    const isDialogValid = isValid !== false && isCommandFormValid;
 
     return (
         <Dialog
@@ -336,7 +350,9 @@ const CommandDialogWrapper = <TCommand extends object, TResponse = object>({
  * @typeParam TResponse - The success payload type returned by the command's `Handle()` method on the backend.
  * @param props - {@link CommandDialogProps}.
  */
-const CommandDialogComponent = <TCommand extends object = object, TResponse = object>(props: CommandDialogProps<TCommand, TResponse>) => {
+const CommandDialogComponent = <TCommand extends object = object, TResponse = object>(
+    props: CommandDialogProps<TCommand, TResponse>,
+) => {
     const {
         title,
         visible,
@@ -410,4 +426,16 @@ markAsCommandFormColumn(CommandDialogColumnWrapper);
 
 CommandDialogComponent.Column = CommandDialogColumnWrapper;
 
+/**
+ * A {@link Dialog} that hosts a Cratis Arc `CommandForm`, runs the bound
+ * command on confirm, and only closes when the command succeeds. This is
+ * the standard pattern for "user fills in a form, clicks OK, command runs
+ * server-side, dialog dismisses" — `CommandDialog` collapses about thirty
+ * lines of orchestration into the props on a single component.
+ *
+ * See {@link CommandDialogComponent} for full documentation.
+ *
+ * @typeParam TCommand - The command class (proxy generated from C# `[Command]`).
+ * @typeParam TResponse - The success payload type returned by the command's `Handle()` method on the backend.
+ */
 export const CommandDialog = CommandDialogComponent;
diff --git a/Source/CommandDialog/CommandStepper.tsx b/Source/CommandDialog/CommandStepper.tsx
index de9f7b86..b95c413f 100644
--- a/Source/CommandDialog/CommandStepper.tsx
+++ b/Source/CommandDialog/CommandStepper.tsx
@@ -2,25 +2,22 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import React, {
-    useEffect,
-    useMemo,
     useState,
     type ButtonHTMLAttributes,
     type HTMLAttributes,
 } from 'react';
-import { Button } from '../Common/Button';
-import { ICommandResult } from '@cratis/arc/commands';
+import type { ICommandResult } from '@cratis/arc/commands';
 import {
     CommandForm,
-    CommandFormFieldWrapper,
     useCommandFormContext,
     useCommandInstance,
     type CommandFormProps,
 } from '@cratis/arc.react/commands';
 import { applyBeforeExecute, type BeforeExecuteCallback } from './applyBeforeExecute';
-import { isCommandFormField } from '../CommandForm/commandFormMarkers';
-import type { StepperPanelProps } from './StepperPanel';
-import { getStepPanels } from './stepChildren';
+import {
+    CommandStepperContent,
+    type CommandStepperContentProps,
+} from './CommandStepperContent';
 
 /**
  * Event passed to {@link StepperCustomizationProps.onChangeStep} when the user
@@ -92,42 +89,6 @@ export interface StepperCustomizationProps {
     unstyled?: boolean;
 }
 
-/** Controlled state and validation props for the visual stepper content. */
-export interface CommandStepperContentProps extends StepperCustomizationProps {
-    /** The active step index. */
-    activeStep: number;
-    /** The indices that have been visited. */
-    visitedSteps: Set<number>;
-    /** StepperPanel children defining each wizard step. */
-    children?: React.ReactNode;
-    /** Callback for active step changes. */
-    onActiveStepChange?: (stepIndex: number) => void;
-    /** Callback for visited step changes. */
-    onVisitedStepsChange?: (visitedSteps: Set<number>) => void;
-    /** Callback that receives validation state for each step. */
-    onStepErrorsChange?: (stepErrors: boolean[]) => void;
-    /** Provides validation errors for individual fields. */
-    getFieldError?: (fieldName: string) => unknown;
-    /** Whether to show built-in previous and next buttons. Defaults to `true`. */
-    showNavigation?: boolean;
-    /** Whether to show built-in submit on the last step. Defaults to `true`. */
-    showSubmit?: boolean;
-    /** Label for the next step button. Defaults to `'Next'`. */
-    nextLabel?: string;
-    /** Label for the previous step button. Defaults to `'Previous'`. */
-    previousLabel?: string;
-    /** Label for the submit button. Defaults to `'Submit'`. */
-    okLabel?: string;
-    /** Whether navigation controls are busy. */
-    isBusy?: boolean;
-    /** Whether submit is currently executing. */
-    isSubmitting?: boolean;
-    /** Disables submit regardless of current step state. */
-    isSubmitDisabled?: boolean;
-    /** Submit callback invoked on the last step. */
-    onSubmit?: () => void | Promise<void>;
-}
-
 /** Props for a standalone stepper bound to one Arc command form. */
 export interface CommandStepperProps<TCommand extends object, TResponse = object>
     extends
@@ -160,346 +121,6 @@ export interface CommandStepperProps<TCommand extends object, TResponse = object
     children?: React.ReactNode;
 }
 
-/** Extracts the property name from an accessor function like `c => c.name`. */
-const getPropertyName = (accessor: ((obj: unknown) => unknown) | unknown): string => {
-    if (typeof accessor !== 'function') return '';
-    const fnStr = accessor.toString();
-    const match = fnStr.match(/\.([a-zA-Z_$][a-zA-Z0-9_$]*)/);
-    return match ? match[1] : '';
-};
-
-/** Recursively collects all CommandFormField property names from a React node tree. */
-const extractFieldNamesFromNode = (nodes: React.ReactNode): string[] => {
-    const names: string[] = [];
-    React.Children.forEach(nodes, (child) => {
-        if (!React.isValidElement(child)) return;
-        const component = child.type as React.ComponentType<unknown>;
-        if (isCommandFormField(component)) {
-            const fieldProps = child.props as { value?: (obj: unknown) => unknown };
-            const name = getPropertyName(fieldProps.value);
-            if (name) names.push(name);
-        }
-
-        const childProps = child.props as Record<string, unknown>;
-        if (childProps.children != null) {
-            names.push(
-                ...extractFieldNamesFromNode(childProps.children as React.ReactNode),
-            );
-        }
-    });
-    return names;
-};
-
-const processChildren = (nodes: React.ReactNode): React.ReactNode => {
-    return React.Children.map(nodes, (child) => {
-        if (!React.isValidElement(child)) return child;
-
-        const component = child.type as React.ComponentType<unknown>;
-        if (isCommandFormField(component)) {
-            type FieldElement = Parameters<typeof CommandFormFieldWrapper>[0]['field'];
-            // SAFETY: displayName identifies the Arc command field shape before it reaches the wrapper.
-            return <CommandFormFieldWrapper field={child as unknown as FieldElement} />;
-        }
-
-        const childProps = child.props as Record<string, unknown>;
-        if (childProps.children != null) {
-            return React.cloneElement(
-                child as React.ReactElement<Record<string, unknown>>,
-                {
-                    children: processChildren(childProps.children as React.ReactNode),
-                },
-            );
-        }
-
-        return child;
-    });
-};
-
-export const CommandStepperContent = ({
-    activeStep,
-    visitedSteps,
-    children,
-    onActiveStepChange,
-    onVisitedStepsChange,
-    onStepErrorsChange,
-    getFieldError,
-    showNavigation = true,
-    showSubmit = true,
-    nextLabel = 'Next',
-    previousLabel = 'Previous',
-    okLabel = 'Submit',
-    isBusy = false,
-    isSubmitting = false,
-    isSubmitDisabled = false,
-    onSubmit,
-    linear = true,
-    orientation = 'horizontal',
-    headerPosition = 'top',
-    start,
-    end,
-    onChangeStep,
-    pt,
-}: CommandStepperContentProps) => {
-    // The steps that actually render. Conditional steps (`{condition && <StepperPanel/>}`)
-    // leave falsy children behind, so the count, the per-step validation state and what the
-    // Stepper renders are all derived from this one list — they cannot drift apart.
-    const panels = useMemo(
-        () => getStepPanels(children) as React.ReactElement<StepperPanelProps>[],
-        [children],
-    );
-    const stepCount = panels.length;
-
-    // A conditional step can vanish after the user has advanced past it, which leaves the
-    // incoming index pointing at a step that is no longer rendered. Clamp it into the set that
-    // is, so the panel shown, the validation state read and the buttons offered all belong to a
-    // step that exists.
-    const currentStep = Math.min(Math.max(activeStep, 0), Math.max(stepCount - 1, 0));
-    const isLastStep = currentStep >= stepCount - 1;
-    const isFirstStep = currentStep <= 0;
-
-    const stepFieldNames = useMemo(
-        () => panels.map((panel) => extractFieldNamesFromNode(panel.props.children)),
-        [panels],
-    );
-
-    const stepErrors = useMemo(
-        () =>
-            stepFieldNames.map((fields) =>
-                fields.some((fieldName) => !!getFieldError?.(fieldName)),
-            ),
-        [stepFieldNames, getFieldError],
-    );
-
-    useEffect(() => {
-        onStepErrorsChange?.(stepErrors);
-    }, [onStepErrorsChange, stepErrors]);
-
-    const isCurrentStepInvalid = stepErrors[currentStep] ?? false;
-    const hasAnyStepErrors = stepErrors.some((hasError) => hasError);
-
-    const handleStepChange = (index: number) => {
-        onChangeStep?.({ index });
-
-        if (index > currentStep && isCurrentStepInvalid) {
-            return;
-        }
-
-        if (index > currentStep) {
-            onVisitedStepsChange?.(new Set(visitedSteps).add(currentStep));
-        }
-        onActiveStepChange?.(index);
-    };
-
-    const handlePrevious = () => {
-        onActiveStepChange?.(Math.max(0, currentStep - 1));
-    };
-
-    const handleNext = () => {
-        if (isCurrentStepInvalid) {
-            return;
-        }
-
-        onVisitedStepsChange?.(new Set(visitedSteps).add(currentStep));
-        onActiveStepChange?.(Math.min(stepCount - 1, currentStep + 1));
-    };
-
-    const stepperList = (
-        <ol
-            {...pt?.list}
-            className={['cratis-command-stepper__list', pt?.list?.className]
-                .filter(Boolean)
-                .join(' ')}
-            data-cratis-part='list'
-            data-part='list'
-        >
-            {panels.map((panel, index) => (
-                <li
-                    {...pt?.step}
-                    key={index}
-                    className={['cratis-command-stepper__step', pt?.step?.className]
-                        .filter(Boolean)
-                        .join(' ')}
-                    data-cratis-part='step'
-                    data-part='step'
-                    data-active={index === currentStep || undefined}
-                    data-visited={visitedSteps.has(index) || undefined}
-                    data-invalid={stepErrors[index] || undefined}
-                >
-                    <button
-                        {...pt?.header}
-                        type='button'
-                        className={[
-                            'cratis-command-stepper__header',
-                            pt?.header?.className,
-                        ]
-                            .filter(Boolean)
-                            .join(' ')}
-                        data-cratis-part='header'
-                        data-part='header'
-                        disabled={linear && index !== currentStep}
-                        aria-current={index === currentStep ? 'step' : undefined}
-                        onClick={() => handleStepChange(index)}
-                    >
-                        <span
-                            {...pt?.number}
-                            className={[
-                                'cratis-command-stepper__number',
-                                pt?.number?.className,
-                            ]
-                                .filter(Boolean)
-                                .join(' ')}
-                            style={pt?.number?.style}
-                            data-cratis-part='number'
-                            data-part='number'
-                        >
-                            {index + 1}
-                        </span>
-                        <span
-                            {...pt?.title}
-                            className={[
-                                'cratis-command-stepper__title',
-                                pt?.title?.className,
-                            ]
-                                .filter(Boolean)
-                                .join(' ')}
-                            data-cratis-part='title'
-                            data-part='title'
-                        >
-                            {panel.props.header}
-                        </span>
-                    </button>
-                    {index < stepCount - 1 && (
-                        <span
-                            {...pt?.separator}
-                            className={[
-                                'cratis-command-stepper__separator',
-                                pt?.separator?.className,
-                            ]
-                                .filter(Boolean)
-                                .join(' ')}
-                            data-cratis-part='separator'
-                            data-part='separator'
-                            aria-hidden='true'
-                        />
-                    )}
-                </li>
-            ))}
-        </ol>
-    );
-
-    const stepperPanels = (
-        <div
-            {...pt?.panels}
-            className={['cratis-command-stepper__panels', pt?.panels?.className]
-                .filter(Boolean)
-                .join(' ')}
-            data-cratis-part='panels'
-            data-part='panels'
-        >
-            {panels.map((panel, index) => (
-                <section
-                    {...pt?.panel}
-                    key={index}
-                    hidden={index !== currentStep}
-                    className={['cratis-command-stepper__panel', pt?.panel?.className]
-                        .filter(Boolean)
-                        .join(' ')}
-                    data-cratis-part='panel'
-                    data-part='panel'
-                    aria-label={String(panel.props.header ?? `Step ${index + 1}`)}
-                >
-                    {processChildren(panel.props.children)}
-                </section>
-            ))}
-        </div>
-    );
-
-    return (
-        <div
-            className={`cratis-command-stepper cratis-command-stepper--${orientation}`}
-            data-orientation={orientation}
-        >
-            {start}
-            <div
-                {...pt?.root}
-                className={['cratis-command-stepper__root', pt?.root?.className]
-                    .filter(Boolean)
-                    .join(' ')}
-                data-cratis-part='root'
-                data-part='root'
-                data-value={currentStep}
-                data-orientation={orientation}
-            >
-                {headerPosition === 'bottom' ? (
-                    <>
-                        {stepperPanels}
-                        {stepperList}
-                    </>
-                ) : (
-                    <>
-                        {stepperList}
-                        {stepperPanels}
-                    </>
-                )}
-            </div>
-            {end}
-
-            {showNavigation && (
-                <div
-                    style={{
-                        display: 'flex',
-                        alignItems: 'center',
-                        width: '100%',
-                        gap: '0.75rem',
-                    }}
-                >
-                    {!isFirstStep && (
-                        <Button
-                            outlined
-                            onClick={handlePrevious}
-                            disabled={isBusy}
-                            style={{ width: 'auto' }}
-                        >
-                            <span>{previousLabel}</span>
-                        </Button>
-                    )}
-                    <div style={{ flex: 1 }} />
-                    {!isLastStep && (
-                        <Button
-                            onClick={handleNext}
-                            disabled={isBusy || isSubmitting || isCurrentStepInvalid}
-                            style={{ width: 'auto' }}
-                        >
-                            <span>{nextLabel}</span>
-                        </Button>
-                    )}
-                    {isLastStep && showSubmit && (
-                        <Button
-                            onClick={() => void onSubmit?.()}
-                            disabled={
-                                isBusy ||
-                                isSubmitting ||
-                                isSubmitDisabled ||
-                                hasAnyStepErrors
-                            }
-                            autoFocus
-                            style={{ width: 'auto' }}
-                        >
-                            {isSubmitting && (
-                                <span
-                                    className='cratis-dialog__spinner'
-                                    aria-hidden='true'
-                                />
-                            )}
-                            <span>{okLabel}</span>
-                        </Button>
-                    )}
-                </div>
-            )}
-        </div>
-    );
-};
-
 type CommandStepperWrapperProps<TCommand extends object, TResponse = object> = Omit<
     CommandStepperContentProps,
     | 'activeStep'
@@ -573,10 +194,10 @@ const CommandStepperWrapper = <TCommand extends object, TResponse = object>({
         }
 
         if (!result.isSuccess) {
-            if (!result.isValid) {
-                await onValidationFailure?.(result.validationResults);
-            } else {
+            if (result.isValid) {
                 await onFailed?.(result);
+            } else {
+                await onValidationFailure?.(result.validationResults);
             }
             setCommandResult(result);
             return;
diff --git a/Source/CommandDialog/CommandStepperContent.tsx b/Source/CommandDialog/CommandStepperContent.tsx
new file mode 100644
index 00000000..61f4831b
--- /dev/null
+++ b/Source/CommandDialog/CommandStepperContent.tsx
@@ -0,0 +1,402 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import React, { useEffect, useMemo } from 'react';
+import { Button } from '../Common/Button';
+import { CommandFormFieldWrapper } from '@cratis/arc.react/commands';
+import { isCommandFormField } from '../CommandForm/commandFormMarkers';
+import type { StepperPanelProps } from './StepperPanel';
+import { getStepPanels } from './stepChildren';
+import type { StepperCustomizationProps } from './CommandStepper';
+
+/**
+ * Controlled state and validation props for {@link CommandStepperContent}.
+ *
+ * @remarks
+ * `CommandStepperContent` is a private implementation primitive shared by
+ * {@link CommandStepper} and `StepperCommandDialog` — it is deliberately not
+ * re-exported from the `./CommandStepper` or `./CommandDialog` package
+ * subpaths, so this type is documented for maintainers only.
+ */
+export interface CommandStepperContentProps extends StepperCustomizationProps {
+    /** The active step index. */
+    activeStep: number;
+    /** The indices that have been visited. */
+    visitedSteps: Set<number>;
+    /** StepperPanel children defining each wizard step. */
+    children?: React.ReactNode;
+    /** Callback for active step changes. */
+    onActiveStepChange?: (stepIndex: number) => void;
+    /** Callback for visited step changes. */
+    onVisitedStepsChange?: (visitedSteps: Set<number>) => void;
+    /** Callback that receives validation state for each step. */
+    onStepErrorsChange?: (stepErrors: boolean[]) => void;
+    /** Provides validation errors for individual fields. */
+    getFieldError?: (fieldName: string) => unknown;
+    /** Whether to show built-in previous and next buttons. Defaults to `true`. */
+    showNavigation?: boolean;
+    /** Whether to show built-in submit on the last step. Defaults to `true`. */
+    showSubmit?: boolean;
+    /** Label for the next step button. Defaults to `'Next'`. */
+    nextLabel?: string;
+    /** Label for the previous step button. Defaults to `'Previous'`. */
+    previousLabel?: string;
+    /** Label for the submit button. Defaults to `'Submit'`. */
+    okLabel?: string;
+    /** Whether navigation controls are busy. */
+    isBusy?: boolean;
+    /** Whether submit is currently executing. */
+    isSubmitting?: boolean;
+    /** Disables submit regardless of current step state. */
+    isSubmitDisabled?: boolean;
+    /** Submit callback invoked on the last step. */
+    onSubmit?: () => void | Promise<void>;
+}
+
+/** Extracts the property name from an accessor function like `c => c.name`. */
+const getPropertyName = (accessor: ((obj: unknown) => unknown) | unknown): string => {
+    if (typeof accessor !== 'function') return '';
+    const fnStr = accessor.toString();
+    const match = fnStr.match(/\.([a-zA-Z_$][a-zA-Z0-9_$]*)/);
+    return match ? match[1] : '';
+};
+
+/** Recursively collects all CommandFormField property names from a React node tree. */
+const extractFieldNamesFromNode = (nodes: React.ReactNode): string[] => {
+    const names: string[] = [];
+    React.Children.forEach(nodes, (child) => {
+        if (!React.isValidElement(child)) return;
+        const component = child.type as React.ComponentType<unknown>;
+        if (isCommandFormField(component)) {
+            const fieldProps = child.props as { value?: (obj: unknown) => unknown };
+            const name = getPropertyName(fieldProps.value);
+            if (name) names.push(name);
+        }
+
+        const childProps = child.props as Record<string, unknown>;
+        if (childProps.children != null) {
+            names.push(
+                ...extractFieldNamesFromNode(childProps.children as React.ReactNode),
+            );
+        }
+    });
+    return names;
+};
+
+const processChildren = (nodes: React.ReactNode): React.ReactNode => {
+    return React.Children.map(nodes, (child) => {
+        if (!React.isValidElement(child)) return child;
+
+        const component = child.type as React.ComponentType<unknown>;
+        if (isCommandFormField(component)) {
+            type FieldElement = Parameters<typeof CommandFormFieldWrapper>[0]['field'];
+            // SAFETY: displayName identifies the Arc command field shape before it reaches the wrapper.
+            return <CommandFormFieldWrapper field={child as unknown as FieldElement} />;
+        }
+
+        const childProps = child.props as Record<string, unknown>;
+        if (childProps.children != null) {
+            return React.cloneElement(
+                child as React.ReactElement<Record<string, unknown>>,
+                {
+                    children: processChildren(childProps.children as React.ReactNode),
+                },
+            );
+        }
+
+        return child;
+    });
+};
+
+/**
+ * @internal Renders the visual stepper body — step headers, panels, and the
+ * built-in Previous / Next / Submit navigation — without any Arc
+ * `CommandForm` wiring. This is a private implementation primitive shared by
+ * {@link CommandStepper} and `StepperCommandDialog`; it is intentionally
+ * **not** re-exported from the `./CommandStepper` or `./CommandDialog`
+ * package subpaths and may change shape without a major version bump.
+ */
+export const CommandStepperContent = ({
+    activeStep,
+    visitedSteps,
+    children,
+    onActiveStepChange,
+    onVisitedStepsChange,
+    onStepErrorsChange,
+    getFieldError,
+    showNavigation = true,
+    showSubmit = true,
+    nextLabel = 'Next',
+    previousLabel = 'Previous',
+    okLabel = 'Submit',
+    isBusy = false,
+    isSubmitting = false,
+    isSubmitDisabled = false,
+    onSubmit,
+    linear = true,
+    orientation = 'horizontal',
+    headerPosition = 'top',
+    start,
+    end,
+    onChangeStep,
+    pt,
+}: CommandStepperContentProps) => {
+    // The steps that actually render. Conditional steps (`{condition && <StepperPanel/>}`)
+    // leave falsy children behind, so the count, the per-step validation state and what the
+    // Stepper renders are all derived from this one list — they cannot drift apart.
+    const panels = useMemo(
+        () => getStepPanels(children) as React.ReactElement<StepperPanelProps>[],
+        [children],
+    );
+    const stepCount = panels.length;
+
+    // A conditional step can vanish after the user has advanced past it, which leaves the
+    // incoming index pointing at a step that is no longer rendered. Clamp it into the set that
+    // is, so the panel shown, the validation state read and the buttons offered all belong to a
+    // step that exists.
+    const currentStep = Math.min(Math.max(activeStep, 0), Math.max(stepCount - 1, 0));
+    const isLastStep = currentStep >= stepCount - 1;
+    const isFirstStep = currentStep <= 0;
+
+    const stepFieldNames = useMemo(
+        () => panels.map((panel) => extractFieldNamesFromNode(panel.props.children)),
+        [panels],
+    );
+
+    const stepErrors = useMemo(
+        () =>
+            stepFieldNames.map((fields) =>
+                fields.some((fieldName) => !!getFieldError?.(fieldName)),
+            ),
+        [stepFieldNames, getFieldError],
+    );
+
+    useEffect(() => {
+        onStepErrorsChange?.(stepErrors);
+    }, [onStepErrorsChange, stepErrors]);
+
+    const isCurrentStepInvalid = stepErrors[currentStep] ?? false;
+    const hasAnyStepErrors = stepErrors.some((hasError) => hasError);
+
+    const handleStepChange = (index: number) => {
+        onChangeStep?.({ index });
+
+        if (index > currentStep && isCurrentStepInvalid) {
+            return;
+        }
+
+        if (index > currentStep) {
+            onVisitedStepsChange?.(new Set(visitedSteps).add(currentStep));
+        }
+        onActiveStepChange?.(index);
+    };
+
+    const handlePrevious = () => {
+        onActiveStepChange?.(Math.max(0, currentStep - 1));
+    };
+
+    const handleNext = () => {
+        if (isCurrentStepInvalid) {
+            return;
+        }
+
+        onVisitedStepsChange?.(new Set(visitedSteps).add(currentStep));
+        onActiveStepChange?.(Math.min(stepCount - 1, currentStep + 1));
+    };
+
+    const stepperList = (
+        <ol
+            {...pt?.list}
+            className={['cratis-command-stepper__list', pt?.list?.className]
+                .filter(Boolean)
+                .join(' ')}
+            data-cratis-part='list'
+            data-part='list'
+        >
+            {panels.map((panel, index) => (
+                <li
+                    {...pt?.step}
+                    key={index}
+                    className={['cratis-command-stepper__step', pt?.step?.className]
+                        .filter(Boolean)
+                        .join(' ')}
+                    data-cratis-part='step'
+                    data-part='step'
+                    data-active={index === currentStep || undefined}
+                    data-visited={visitedSteps.has(index) || undefined}
+                    data-invalid={stepErrors[index] || undefined}
+                >
+                    <button
+                        {...pt?.header}
+                        type='button'
+                        className={[
+                            'cratis-command-stepper__header',
+                            pt?.header?.className,
+                        ]
+                            .filter(Boolean)
+                            .join(' ')}
+                        data-cratis-part='header'
+                        data-part='header'
+                        disabled={linear && index !== currentStep}
+                        aria-current={index === currentStep ? 'step' : undefined}
+                        onClick={() => handleStepChange(index)}
+                    >
+                        <span
+                            {...pt?.number}
+                            className={[
+                                'cratis-command-stepper__number',
+                                pt?.number?.className,
+                            ]
+                                .filter(Boolean)
+                                .join(' ')}
+                            style={pt?.number?.style}
+                            data-cratis-part='number'
+                            data-part='number'
+                        >
+                            {index + 1}
+                        </span>
+                        <span
+                            {...pt?.title}
+                            className={[
+                                'cratis-command-stepper__title',
+                                pt?.title?.className,
+                            ]
+                                .filter(Boolean)
+                                .join(' ')}
+                            data-cratis-part='title'
+                            data-part='title'
+                        >
+                            {panel.props.header}
+                        </span>
+                    </button>
+                    {index < stepCount - 1 && (
+                        <span
+                            {...pt?.separator}
+                            className={[
+                                'cratis-command-stepper__separator',
+                                pt?.separator?.className,
+                            ]
+                                .filter(Boolean)
+                                .join(' ')}
+                            data-cratis-part='separator'
+                            data-part='separator'
+                            aria-hidden='true'
+                        />
+                    )}
+                </li>
+            ))}
+        </ol>
+    );
+
+    const stepperPanels = (
+        <div
+            {...pt?.panels}
+            className={['cratis-command-stepper__panels', pt?.panels?.className]
+                .filter(Boolean)
+                .join(' ')}
+            data-cratis-part='panels'
+            data-part='panels'
+        >
+            {panels.map((panel, index) => (
+                <section
+                    {...pt?.panel}
+                    key={index}
+                    hidden={index !== currentStep}
+                    className={['cratis-command-stepper__panel', pt?.panel?.className]
+                        .filter(Boolean)
+                        .join(' ')}
+                    data-cratis-part='panel'
+                    data-part='panel'
+                    aria-label={String(panel.props.header ?? `Step ${index + 1}`)}
+                >
+                    {processChildren(panel.props.children)}
+                </section>
+            ))}
+        </div>
+    );
+
+    return (
+        <div
+            className={`cratis-command-stepper cratis-command-stepper--${orientation}`}
+            data-orientation={orientation}
+        >
+            {start}
+            <div
+                {...pt?.root}
+                className={['cratis-command-stepper__root', pt?.root?.className]
+                    .filter(Boolean)
+                    .join(' ')}
+                data-cratis-part='root'
+                data-part='root'
+                data-value={currentStep}
+                data-orientation={orientation}
+            >
+                {headerPosition === 'bottom' ? (
+                    <>
+                        {stepperPanels}
+                        {stepperList}
+                    </>
+                ) : (
+                    <>
+                        {stepperList}
+                        {stepperPanels}
+                    </>
+                )}
+            </div>
+            {end}
+
+            {showNavigation && (
+                <div
+                    style={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        width: '100%',
+                        gap: '0.75rem',
+                    }}
+                >
+                    {!isFirstStep && (
+                        <Button
+                            outlined
+                            onClick={handlePrevious}
+                            disabled={isBusy}
+                            style={{ width: 'auto' }}
+                        >
+                            <span>{previousLabel}</span>
+                        </Button>
+                    )}
+                    <div style={{ flex: 1 }} />
+                    {!isLastStep && (
+                        <Button
+                            onClick={handleNext}
+                            disabled={isBusy || isSubmitting || isCurrentStepInvalid}
+                            style={{ width: 'auto' }}
+                        >
+                            <span>{nextLabel}</span>
+                        </Button>
+                    )}
+                    {isLastStep && showSubmit && (
+                        <Button
+                            onClick={() => void onSubmit?.()}
+                            disabled={
+                                isBusy ||
+                                isSubmitting ||
+                                isSubmitDisabled ||
+                                hasAnyStepErrors
+                            }
+                            autoFocus
+                            style={{ width: 'auto' }}
+                        >
+                            {isSubmitting && (
+                                <span
+                                    className='cratis-dialog__spinner'
+                                    aria-hidden='true'
+                                />
+                            )}
+                            <span>{okLabel}</span>
+                        </Button>
+                    )}
+                </div>
+            )}
+        </div>
+    );
+};
diff --git a/Source/CommandDialog/StepperCommandDialog.tsx b/Source/CommandDialog/StepperCommandDialog.tsx
index 82435b5d..ebd59745 100644
--- a/Source/CommandDialog/StepperCommandDialog.tsx
+++ b/Source/CommandDialog/StepperCommandDialog.tsx
@@ -18,7 +18,8 @@ import {
     type ConfirmCallback,
     type CancelCallback,
 } from '../Dialogs/Dialog';
-import { CommandStepperContent, type StepperCustomizationProps } from './CommandStepper';
+import type { StepperCustomizationProps } from './CommandStepper';
+import { CommandStepperContent } from './CommandStepperContent';
 import { applyBeforeExecute, type BeforeExecuteCallback } from './applyBeforeExecute';
 import { getStepPanels } from './stepChildren';
 
@@ -268,10 +269,7 @@ const StepperCommandDialogWrapper = <TCommand extends object, TResponse = object
         if (!result.isSuccess) {
             await onFailed?.(result);
             if (result.hasExceptions) {
-                await onException?.(
-                    result.exceptionMessages,
-                    result.exceptionStackTrace,
-                );
+                await onException?.(result.exceptionMessages, result.exceptionStackTrace);
             }
             if (!result.isAuthorized) await onUnauthorized?.();
             if (!result.isValid) {
@@ -559,4 +557,18 @@ const StepperCommandDialogComponent = <
     );
 };
 
+/**
+ * A multi-step wizard dialog backed by a single Cratis Arc command. Wraps
+ * the Cratis-owned Stepper inside a Cratis {@link Dialog}, tracks per-step
+ * visit state, surfaces inline error indicators on steps with invalid
+ * fields, and executes the bound command when the user submits the last
+ * step. Use it when one command has enough fields that they should be
+ * broken into named stages; for single-stage commands, use
+ * {@link CommandDialog}.
+ *
+ * See {@link StepperCommandDialogComponent} for full documentation.
+ *
+ * @typeParam TCommand - The command class (proxy generated from C# `[Command]`).
+ * @typeParam TResponse - The success payload type returned by the command's `Handle()` method on the backend.
+ */
 export const StepperCommandDialog = StepperCommandDialogComponent;
diff --git a/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_a_bare_string_sits_between_steps.ts b/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_a_bare_string_sits_between_steps.ts
index 376c9c4e..b552bebd 100644
--- a/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_a_bare_string_sits_between_steps.ts
+++ b/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_a_bare_string_sits_between_steps.ts
@@ -4,7 +4,8 @@
 import React from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { vi } from 'vitest';
-import { CommandStepper, CommandStepperContent } from '../../CommandStepper';
+import { CommandStepper } from '../../CommandStepper';
+import { CommandStepperContent } from '../../CommandStepperContent';
 import { StepperPanel } from '../../StepperPanel';
 
 const { buttonClicks } = vi.hoisted(() => ({ buttonClicks: new Map<string, () => void>() }));
diff --git a/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_it_is_in_the_middle.ts b/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_it_is_in_the_middle.ts
index e39f9e7c..416002b5 100644
--- a/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_it_is_in_the_middle.ts
+++ b/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_it_is_in_the_middle.ts
@@ -4,7 +4,8 @@
 import React from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { vi } from 'vitest';
-import { CommandStepper, CommandStepperContent } from '../../CommandStepper';
+import { CommandStepper } from '../../CommandStepper';
+import { CommandStepperContent } from '../../CommandStepperContent';
 import { StepperPanel } from '../../StepperPanel';
 
 const { buttonClicks } = vi.hoisted(() => ({
diff --git a/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_it_is_null.ts b/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_it_is_null.ts
index ef0191b3..93de4bcc 100644
--- a/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_it_is_null.ts
+++ b/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_it_is_null.ts
@@ -4,7 +4,8 @@
 import React from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { vi } from 'vitest';
-import { CommandStepper, CommandStepperContent } from '../../CommandStepper';
+import { CommandStepper } from '../../CommandStepper';
+import { CommandStepperContent } from '../../CommandStepperContent';
 import { StepperPanel } from '../../StepperPanel';
 
 const { buttonClicks } = vi.hoisted(() => ({ buttonClicks: new Map<string, () => void>() }));
diff --git a/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_it_is_undefined.ts b/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_it_is_undefined.ts
index 5766f792..dcf92986 100644
--- a/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_it_is_undefined.ts
+++ b/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_it_is_undefined.ts
@@ -4,7 +4,8 @@
 import React from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { vi } from 'vitest';
-import { CommandStepper, CommandStepperContent } from '../../CommandStepper';
+import { CommandStepper } from '../../CommandStepper';
+import { CommandStepperContent } from '../../CommandStepperContent';
 import { StepperPanel } from '../../StepperPanel';
 
 const { buttonClicks } = vi.hoisted(() => ({ buttonClicks: new Map<string, () => void>() }));
diff --git a/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_the_first_step_is_hidden.ts b/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_the_first_step_is_hidden.ts
index 5788079f..8f470c2b 100644
--- a/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_the_first_step_is_hidden.ts
+++ b/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_the_first_step_is_hidden.ts
@@ -4,7 +4,8 @@
 import React from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { vi } from 'vitest';
-import { CommandStepper, CommandStepperContent } from '../../CommandStepper';
+import { CommandStepper } from '../../CommandStepper';
+import { CommandStepperContent } from '../../CommandStepperContent';
 import { StepperPanel } from '../../StepperPanel';
 
 const { buttonClicks } = vi.hoisted(() => ({ buttonClicks: new Map<string, () => void>() }));
diff --git a/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_the_last_step_is_false.ts b/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_the_last_step_is_false.ts
index 16af1177..7d6e07c8 100644
--- a/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_the_last_step_is_false.ts
+++ b/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_the_last_step_is_false.ts
@@ -4,7 +4,8 @@
 import React from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { vi } from 'vitest';
-import { CommandStepper, CommandStepperContent } from '../../CommandStepper';
+import { CommandStepper } from '../../CommandStepper';
+import { CommandStepperContent } from '../../CommandStepperContent';
 import { StepperPanel } from '../../StepperPanel';
 
 const { buttonClicks } = vi.hoisted(() => ({ buttonClicks: new Map<string, () => void>() }));
diff --git a/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_the_steps_come_from_a_map.ts b/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_the_steps_come_from_a_map.ts
index 4471296a..4ed6eb44 100644
--- a/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_the_steps_come_from_a_map.ts
+++ b/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_the_steps_come_from_a_map.ts
@@ -4,7 +4,8 @@
 import React from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { vi } from 'vitest';
-import { CommandStepper, CommandStepperContent } from '../../CommandStepper';
+import { CommandStepper } from '../../CommandStepper';
+import { CommandStepperContent } from '../../CommandStepperContent';
 import { StepperPanel } from '../../StepperPanel';
 
 const { buttonClicks } = vi.hoisted(() => ({ buttonClicks: new Map<string, () => void>() }));
diff --git a/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_two_are_hidden.ts b/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_two_are_hidden.ts
index db8ad612..05ab2116 100644
--- a/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_two_are_hidden.ts
+++ b/Source/CommandDialog/for_CommandStepper/when_a_step_is_conditionally_hidden/and_two_are_hidden.ts
@@ -4,7 +4,8 @@
 import React from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { vi } from 'vitest';
-import { CommandStepper, CommandStepperContent } from '../../CommandStepper';
+import { CommandStepper } from '../../CommandStepper';
+import { CommandStepperContent } from '../../CommandStepperContent';
 import { StepperPanel } from '../../StepperPanel';
 
 const { buttonClicks } = vi.hoisted(() => ({ buttonClicks: new Map<string, () => void>() }));
diff --git a/Source/CommandDialog/for_CommandStepper/when_every_step_is_hidden.ts b/Source/CommandDialog/for_CommandStepper/when_every_step_is_hidden.ts
index 8a598e7b..3b54d3b5 100644
--- a/Source/CommandDialog/for_CommandStepper/when_every_step_is_hidden.ts
+++ b/Source/CommandDialog/for_CommandStepper/when_every_step_is_hidden.ts
@@ -4,7 +4,7 @@
 import React from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { vi } from 'vitest';
-import { CommandStepperContent } from '../CommandStepper';
+import { CommandStepperContent } from '../CommandStepperContent';
 
 
 
diff --git a/Source/CommandDialog/for_CommandStepper/when_the_active_step_is_past_the_last_rendered_step.ts b/Source/CommandDialog/for_CommandStepper/when_the_active_step_is_past_the_last_rendered_step.ts
index 19599f1c..deac28e0 100644
--- a/Source/CommandDialog/for_CommandStepper/when_the_active_step_is_past_the_last_rendered_step.ts
+++ b/Source/CommandDialog/for_CommandStepper/when_the_active_step_is_past_the_last_rendered_step.ts
@@ -4,7 +4,7 @@
 import React from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { vi } from 'vitest';
-import { CommandStepperContent } from '../CommandStepper';
+import { CommandStepperContent } from '../CommandStepperContent';
 import { StepperPanel } from '../StepperPanel';
 
 
diff --git a/Source/DataPage/DataPage.tsx b/Source/DataPage/DataPage.tsx
index aebb589e..7da59812 100644
--- a/Source/DataPage/DataPage.tsx
+++ b/Source/DataPage/DataPage.tsx
@@ -128,7 +128,10 @@ export const MenuItems = ({ children }: MenuItemsProps) => {
     }, [children, isDisabled]);
 
     return (
-        <div className='cratis-data-page-actions cratis:px-4 cratis:py-2' style={actionsStyle}>
+        <div
+            className='cratis-data-page-actions cratis:px-4 cratis:py-2'
+            style={actionsStyle}
+        >
             <ActionMenubar
                 aria-label={context.actionsAriaLabel ?? 'Actions'}
                 model={items}
@@ -213,12 +216,11 @@ export interface IDetailsComponentProps<TDataType> {
     onRefresh?: () => void;
 }
 
-interface IDataPageContext
-    extends DataPageProps<
-        IQueryFor<object, object> | IObservableQueryFor<object, object>,
-        object,
-        object
-    > {
+interface IDataPageContext extends DataPageProps<
+    IQueryFor<object, object> | IObservableQueryFor<object, object>,
+    object,
+    object
+> {
     selectedItem: object | null | undefined;
     onSelectionChanged: (event: DataTableSelectionChangeEvent<object>) => void;
 }
@@ -309,7 +311,7 @@ export interface DataPageProps<
     /**
      * @deprecated Filtering is always applied to the currently loaded page.
      * This compatibility prop no longer toggles behavior and does not change
-     * server-reported pagination totals.
+     * server-reported pagination totals. Retained for source compatibility only.
      */
     clientFiltering?: boolean;
 
diff --git a/Source/DataTables/DataTableFilterMatcherRegistry.ts b/Source/DataTables/DataTableFilterMatcherRegistry.ts
index edf3367e..4d1dbbfe 100644
--- a/Source/DataTables/DataTableFilterMatcherRegistry.ts
+++ b/Source/DataTables/DataTableFilterMatcherRegistry.ts
@@ -24,7 +24,13 @@ interface MatcherRegistryState {
 
 /** Handle returned for one custom matcher registration. */
 export interface DataTableFilterMatcherRegistration {
+    /** The branded match mode name that was registered and can now be used in filter metadata. */
     matchMode: DataTableCustomFilterMatchMode;
+    /**
+     * Removes this custom matcher registration from the global registry. Safe
+     * to call more than once. After the first call, the matcher is no longer
+     * available and the match mode reverts to an unrecognized custom mode.
+     */
     unregister(): void;
 }
 
diff --git a/Source/DataTables/DataTableForObservableQuery.tsx b/Source/DataTables/DataTableForObservableQuery.tsx
index 212c9ff1..8537a1d5 100644
--- a/Source/DataTables/DataTableForObservableQuery.tsx
+++ b/Source/DataTables/DataTableForObservableQuery.tsx
@@ -83,7 +83,7 @@ export interface DataTableForObservableQueryProps<
     /**
      * @deprecated Filtering is always applied to the currently loaded page.
      * This compatibility prop no longer toggles behavior and does not change
-     * server-reported pagination totals.
+     * server-reported pagination totals. Retained for source compatibility only.
      */
     clientFiltering?: boolean;
 
diff --git a/Source/DataTables/DataTableForQuery.tsx b/Source/DataTables/DataTableForQuery.tsx
index f039d7f4..2f97c9d4 100644
--- a/Source/DataTables/DataTableForQuery.tsx
+++ b/Source/DataTables/DataTableForQuery.tsx
@@ -81,7 +81,7 @@ export interface DataTableForQueryProps<
     /**
      * @deprecated Filtering is always applied to the currently loaded page.
      * This compatibility prop no longer toggles behavior and does not change
-     * server-reported pagination totals.
+     * server-reported pagination totals. Retained for source compatibility only.
      */
     clientFiltering?: boolean;
 
diff --git a/Source/Dialogs/ConfirmationDialog.tsx b/Source/Dialogs/ConfirmationDialog.tsx
index 1f47bf97..ecc293ff 100644
--- a/Source/Dialogs/ConfirmationDialog.tsx
+++ b/Source/Dialogs/ConfirmationDialog.tsx
@@ -5,6 +5,31 @@ import { ConfirmationDialogRequest } from '@cratis/arc.react/dialogs';
 import { DialogResult, useDialogContext } from '@cratis/arc.react/dialogs';
 import { Dialog } from './Dialog';
 
+/**
+ * A simple confirmation dialog that renders a title, message, and action
+ * buttons. Closes with the selected {@link DialogResult} through the dialog
+ * host context.
+ *
+ * Consumes a {@link ConfirmationDialogRequest} from the dialog context,
+ * which carries the `title`, `message`, and `buttons` to show.
+ *
+ * Use this through the `confirm` helper from `@cratis/arc.react/dialogs`,
+ * which wraps the dialog host and the request type:
+ *
+ * ```tsx
+ * import { confirm, DialogButtons } from '@cratis/arc.react/dialogs';
+ *
+ * const result = await confirm({
+ *     title: 'Delete this item?',
+ *     message: 'This action cannot be undone.',
+ *     buttons: DialogButtons.YesNo,
+ * });
+ *
+ * if (result === DialogResult.Yes) {
+ *     // proceed with deletion
+ * }
+ * ```
+ */
 export const ConfirmationDialog = () => {
     const { request, closeDialog } = useDialogContext<ConfirmationDialogRequest>();
 
@@ -13,15 +38,13 @@ export const ConfirmationDialog = () => {
     };
 
     return (
-        <Dialog 
+        <Dialog
             title={request.title}
             visible={true}
             onClose={handleClose}
             buttons={request.buttons}
         >
-            <p className="cratis:m-0">
-                {request.message}
-            </p>
+            <p className='cratis:m-0'>{request.message}</p>
         </Dialog>
     );
 };
diff --git a/Source/Filter/FilterEditor.tsx b/Source/Filter/FilterEditor.tsx
index 21055497..26160cff 100644
--- a/Source/Filter/FilterEditor.tsx
+++ b/Source/Filter/FilterEditor.tsx
@@ -4,11 +4,18 @@
 import type { ReactNode } from 'react';
 import type { FilterEditorProps } from './types';
 
+/**
+ * Props for the {@link FilterEditor} slot descriptor.
+ *
+ * Declares a custom editor for a specific filter group inside
+ * {@link FilterPanel}. The editor receives the current value and an
+ * `onChange` handler through the render prop.
+ */
 export interface FilterEditorSlotProps {
-  /** Must match the `key` of the corresponding `FilterDefinition`. */
-  filterKey: string;
-  /** Render prop that receives `{ value, onChange }` and returns the editor UI. */
-  children: (props: FilterEditorProps) => ReactNode;
+    /** Must match the `key` of the corresponding `FilterDefinition`. */
+    filterKey: string;
+    /** Render prop that receives `{ value, onChange }` and returns the editor UI. */
+    children: (props: FilterEditorProps) => ReactNode;
 }
 
 /**
@@ -30,5 +37,5 @@ export interface FilterEditorSlotProps {
  * by `FilterPanel`.
  */
 export function FilterEditor(_props: FilterEditorSlotProps): null {
-  return null;
+    return null;
 }
diff --git a/Source/Filter/FilterPanel.tsx b/Source/Filter/FilterPanel.tsx
index fb3b1c88..e907576d 100644
--- a/Source/Filter/FilterPanel.tsx
+++ b/Source/Filter/FilterPanel.tsx
@@ -23,6 +23,13 @@ import type {
 import { FilterEditor } from './FilterEditor';
 import { RangeHistogramFilter } from './RangeHistogramFilter';
 
+/**
+ * Props for {@link FilterPanel}.
+ *
+ * Describes the filter definitions to render, the current state
+ * (selections, ranges, custom values), and the callbacks that fire when
+ * the user changes a filter or expands a filter group.
+ */
 export interface FilterPanelProps {
     /** Whether the panel is visible. */
     isOpen: boolean;
@@ -93,6 +100,53 @@ function buildEditorMap(
     return map;
 }
 
+/**
+ * Renders a filter dropdown panel anchored below a trigger button. The panel
+ * appears as a portal at a fixed position on the page and includes search,
+ * collapsible filter groups, and per-filter editors (option lists, numeric
+ * range histograms, or custom components).
+ *
+ * Use with {@link useFilterState} for turnkey state management, or wire the
+ * props to external state when the filter state lives elsewhere (e.g. in a
+ * query param reducer).
+ *
+ * ## Filter types
+ *
+ * - **String/option filters** render as a list of checkboxes or radio buttons.
+ *   Controlled through `filterValues`.
+ * - **Numeric/date range filters** render as a {@link RangeHistogramFilter}
+ *   with a draggable range selector over a histogram. Controlled through
+ *   `rangeValues`.
+ * - **Custom filters** slot in a `<FilterEditor>` child whose `filterKey`
+ *   matches the filter's `key`. Controlled through `customValues`.
+ *
+ * ```tsx
+ * const state = useFilterState(filters);
+ * const [isOpen, setIsOpen] = useState(false);
+ * const anchorRef = useRef<HTMLButtonElement>(null);
+ *
+ * return (
+ *   <>
+ *     <button ref={anchorRef} onClick={() => setIsOpen(!isOpen)}>
+ *       Filters
+ *     </button>
+ *     <FilterPanel
+ *       isOpen={isOpen}
+ *       filters={filters}
+ *       anchorRef={anchorRef}
+ *       onClose={() => setIsOpen(false)}
+ *       {...state}
+ *     >
+ *       <FilterEditor filterKey="rating">
+ *         {({ value, onChange }) => <RatingPicker value={value} onChange={onChange} />}
+ *       </FilterEditor>
+ *     </FilterPanel>
+ *   </>
+ * );
+ * ```
+ *
+ * @param props - {@link FilterPanelProps}.
+ */
 function renderOptionCount(count: number | undefined): string | number {
     return typeof count === 'number' ? count : '';
 }
@@ -166,6 +220,14 @@ const subscribeToBrowserState = () => () => undefined;
 const browserSnapshot = () => true;
 const serverSnapshot = () => false;
 
+/**
+ * A filter dropdown panel anchored below a trigger button. Renders filter
+ * groups, search, numeric range histograms, and custom editors. The panel
+ * appears as a portal at a fixed position on the page and closes when the
+ * user clicks outside.
+ *
+ * See the full documentation comment at line 169 for usage examples.
+ */
 export function FilterPanel({
     isOpen,
     filters,
diff --git a/Source/Filter/RangeHistogramFilter.tsx b/Source/Filter/RangeHistogramFilter.tsx
index f0a6a822..6f8a8608 100644
--- a/Source/Filter/RangeHistogramFilter.tsx
+++ b/Source/Filter/RangeHistogramFilter.tsx
@@ -6,192 +6,237 @@ import type { FilterValue, HistogramBucket } from './types';
 import { buildHistogram } from './utils';
 import type { RenderedHistogramBucket } from './utils';
 
+/**
+ * Props for {@link RangeHistogramFilter}.
+ *
+ * Describes the data to histogram, the numeric bounds, the selected range,
+ * and the callback invoked when the user drags the range handles or clicks
+ * a histogram bar.
+ */
 export interface RangeHistogramFilterProps {
-  /**
-   * The raw values to count into buckets in the browser. Ignored when `histogram` is supplied.
-   */
-  values?: FilterValue[];
-  /**
-   * Pre-counted buckets to render instead of counting `values`. Use this when the counts come from
-   * somewhere that can see more data than the browser holds - a server aggregating over a large
-   * table, for instance - so the picker reflects everything rather than the loaded page.
-   */
-  histogram?: HistogramBucket[];
-  min: number;
-  max: number;
-  buckets?: number;
-  selectedRange: [number, number] | null;
-  onChange: (range: [number, number] | null) => void;
-  /**
-   * Optional formatter for endpoint labels and bar tooltips. Defaults to a numeric formatter.
-   * Use this to display ms timestamps as dates, currency, etc.
-   */
-  formatValue?: (value: number) => string;
+    /**
+     * The raw values to count into buckets in the browser. Ignored when `histogram` is supplied.
+     */
+    values?: FilterValue[];
+    /**
+     * Pre-counted buckets to render instead of counting `values`. Use this when the counts come from
+     * somewhere that can see more data than the browser holds - a server aggregating over a large
+     * table, for instance - so the picker reflects everything rather than the loaded page.
+     */
+    histogram?: HistogramBucket[];
+    /** The minimum value of the range. */
+    min: number;
+    /** The maximum value of the range. */
+    max: number;
+    /** Number of histogram buckets to divide the range into. Defaults to 20. */
+    buckets?: number;
+    /** The currently selected range, or `null` when no range is selected. */
+    selectedRange: [number, number] | null;
+    /** Called when the user drags a handle or clicks a bar to select a new range. Pass `null` to clear. */
+    onChange: (range: [number, number] | null) => void;
+    /**
+     * Optional formatter for endpoint labels and bar tooltips. Defaults to a numeric formatter.
+     * Use this to display ms timestamps as dates, currency, etc.
+     */
+    formatValue?: (value: number) => string;
 }
 
 const defaultFormatValue = (value: number) => {
-  if (Number.isInteger(value)) return value.toString();
-  return value.toFixed(1);
+    if (Number.isInteger(value)) return value.toString();
+    return value.toFixed(1);
 };
 
+/**
+ * A draggable numeric range selector rendered over a histogram. The user can
+ * drag the left and right handles to select a range, drag the range bar to
+ * slide the entire range, or click a histogram bar to snap the selection to
+ * that bar's bounds.
+ *
+ * Use this for numeric and date-range filters inside {@link FilterPanel}. The
+ * panel wires it automatically for `type: 'number'` or `type: 'date'` filters
+ * that supply a `numericRange`.
+ *
+ * ```tsx
+ * <RangeHistogramFilter
+ *   min={0}
+ *   max={1000}
+ *   buckets={20}
+ *   selectedRange={range}
+ *   onChange={setRange}
+ *   values={allValues}  // counted in the browser
+ * />
+ * ```
+ *
+ * For large datasets, pass pre-computed `histogram` buckets from the server
+ * instead of `values`, so the histogram reflects everything rather than the
+ * loaded page.
+ *
+ * @param props - {@link RangeHistogramFilterProps}.
+ */
 export function RangeHistogramFilter({
-  values,
-  histogram: providedHistogram,
-  min,
-  max,
-  buckets = 20,
-  selectedRange,
-  onChange,
-  formatValue = defaultFormatValue,
+    values,
+    histogram: providedHistogram,
+    min,
+    max,
+    buckets = 20,
+    selectedRange,
+    onChange,
+    formatValue = defaultFormatValue,
 }: RangeHistogramFilterProps) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [isDragging, setIsDragging] = useState<'left' | 'right' | 'range' | null>(null);
-  const [dragStart, setDragStart] = useState<{ x: number; range: [number, number] } | null>(null);
-
-  const numericValues = useMemo(() => {
-    return (values ?? [])
-      .map((v) => {
-        if (typeof v === 'number') return v;
-        if (v instanceof Date) return v.getTime();
-        const parsed = Number(v);
-        return Number.isNaN(parsed) ? null : parsed;
-      })
-      .filter((v): v is number => v !== null);
-  }, [values]);
-
-  const histogram = useMemo(
-    () => buildHistogram(numericValues, min, max, buckets, providedHistogram),
-    [providedHistogram, numericValues, min, max, buckets]
-  );
-
-  const currentRange = selectedRange ?? [min, max];
-
-  const getPositionFromValue = useCallback(
-    (value: number) => {
-      const range = max - min;
-      if (range <= 0) return 0;
-      return ((value - min) / range) * 100;
-    },
-    [min, max]
-  );
-
-  const handleMouseDown = (
-    e: React.MouseEvent,
-    handle: 'left' | 'right' | 'range'
-  ) => {
-    e.preventDefault?.();
-    setIsDragging(handle);
-    setDragStart({ x: e.clientX, range: [...currentRange] as [number, number] });
-  };
-
-  useEffect(() => {
-    if (!isDragging || !dragStart || !containerRef.current) return;
-
-    const container = containerRef.current;
-    const rect = container.getBoundingClientRect();
-    const range = max - min;
-
-    const handleMouseMove = (e: MouseEvent) => {
-      const deltaX = e.clientX - dragStart.x;
-      const deltaPercent = (deltaX / rect.width) * 100;
-      const deltaValue = (deltaPercent / 100) * range;
-
-      let newRange: [number, number] = [...dragStart.range];
-
-      if (isDragging === 'left') {
-        newRange[0] = Math.max(min, Math.min(dragStart.range[0] + deltaValue, newRange[1] - range * 0.01));
-      } else if (isDragging === 'right') {
-        newRange[1] = Math.min(max, Math.max(dragStart.range[1] + deltaValue, newRange[0] + range * 0.01));
-      } else if (isDragging === 'range') {
-        const rangeWidth = dragStart.range[1] - dragStart.range[0];
-        let newStart = dragStart.range[0] + deltaValue;
-        let newEnd = dragStart.range[1] + deltaValue;
-
-        if (newStart < min) {
-          newStart = min;
-          newEnd = min + rangeWidth;
-        }
-        if (newEnd > max) {
-          newEnd = max;
-          newStart = max - rangeWidth;
-        }
-
-        newRange = [newStart, newEnd];
-      }
-
-      onChange(newRange);
+    const containerRef = useRef<HTMLDivElement>(null);
+    const [isDragging, setIsDragging] = useState<'left' | 'right' | 'range' | null>(null);
+    const [dragStart, setDragStart] = useState<{
+        x: number;
+        range: [number, number];
+    } | null>(null);
+
+    const numericValues = useMemo(() => {
+        return (values ?? [])
+            .map((v) => {
+                if (typeof v === 'number') return v;
+                if (v instanceof Date) return v.getTime();
+                const parsed = Number(v);
+                return Number.isNaN(parsed) ? null : parsed;
+            })
+            .filter((v): v is number => v !== null);
+    }, [values]);
+
+    const histogram = useMemo(
+        () => buildHistogram(numericValues, min, max, buckets, providedHistogram),
+        [providedHistogram, numericValues, min, max, buckets],
+    );
+
+    const currentRange = selectedRange ?? [min, max];
+
+    const getPositionFromValue = useCallback(
+        (value: number) => {
+            const range = max - min;
+            if (range <= 0) return 0;
+            return ((value - min) / range) * 100;
+        },
+        [min, max],
+    );
+
+    const handleMouseDown = (e: React.MouseEvent, handle: 'left' | 'right' | 'range') => {
+        e.preventDefault?.();
+        setIsDragging(handle);
+        setDragStart({ x: e.clientX, range: [...currentRange] as [number, number] });
     };
 
-    const handleMouseUp = () => {
-      setIsDragging(null);
-      setDragStart(null);
+    useEffect(() => {
+        if (!isDragging || !dragStart || !containerRef.current) return;
+
+        const container = containerRef.current;
+        const rect = container.getBoundingClientRect();
+        const range = max - min;
+
+        const handleMouseMove = (e: MouseEvent) => {
+            const deltaX = e.clientX - dragStart.x;
+            const deltaPercent = (deltaX / rect.width) * 100;
+            const deltaValue = (deltaPercent / 100) * range;
+
+            let newRange: [number, number] = [...dragStart.range];
+
+            if (isDragging === 'left') {
+                newRange[0] = Math.max(
+                    min,
+                    Math.min(dragStart.range[0] + deltaValue, newRange[1] - range * 0.01),
+                );
+            } else if (isDragging === 'right') {
+                newRange[1] = Math.min(
+                    max,
+                    Math.max(dragStart.range[1] + deltaValue, newRange[0] + range * 0.01),
+                );
+            } else if (isDragging === 'range') {
+                const rangeWidth = dragStart.range[1] - dragStart.range[0];
+                let newStart = dragStart.range[0] + deltaValue;
+                let newEnd = dragStart.range[1] + deltaValue;
+
+                if (newStart < min) {
+                    newStart = min;
+                    newEnd = min + rangeWidth;
+                }
+                if (newEnd > max) {
+                    newEnd = max;
+                    newStart = max - rangeWidth;
+                }
+
+                newRange = [newStart, newEnd];
+            }
+
+            onChange(newRange);
+        };
+
+        const handleMouseUp = () => {
+            setIsDragging(null);
+            setDragStart(null);
+        };
+
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+
+        return () => {
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+        };
+    }, [isDragging, dragStart, min, max, onChange]);
+
+    const handleBarClick = (bucket: RenderedHistogramBucket) => {
+        onChange([bucket.start, bucket.end]);
     };
 
-    document.addEventListener('mousemove', handleMouseMove);
-    document.addEventListener('mouseup', handleMouseUp);
-
-    return () => {
-      document.removeEventListener('mousemove', handleMouseMove);
-      document.removeEventListener('mouseup', handleMouseUp);
-    };
-  }, [isDragging, dragStart, min, max, onChange]);
-
-  const handleBarClick = (bucket: RenderedHistogramBucket) => {
-    onChange([bucket.start, bucket.end]);
-  };
-
-  const leftPos = getPositionFromValue(currentRange[0]);
-  const rightPos = getPositionFromValue(currentRange[1]);
-
-  return (
-    <div className="pv-range-histogram" ref={containerRef}>
-      <div className="pv-histogram-bars">
-        {histogram.map((bucket, i) => {
-          const heightPercent = (bucket.count / bucket.maxCount) * 100;
-          const isInRange =
-            bucket.start >= currentRange[0] && bucket.end <= currentRange[1];
-          const isPartiallyInRange =
-            bucket.end > currentRange[0] && bucket.start < currentRange[1];
-
-          return (
-            <button
-              key={i}
-              className={`pv-histogram-bar ${isInRange ? 'in-range' : ''} ${isPartiallyInRange && !isInRange ? 'partial' : ''}`}
-              style={{ height: `${heightPercent}%` }}
-              onClick={() => handleBarClick(bucket)}
-              title={`${formatValue(bucket.start)} - ${formatValue(bucket.end)}: ${bucket.count} items`}
-              type="button"
-            />
-          );
-        })}
-      </div>
-
-      <div className="pv-range-slider">
-        <div className="pv-range-track" />
-        <div
-          className="pv-range-selection"
-          style={{
-            left: `${leftPos}%`,
-            width: `${rightPos - leftPos}%`,
-          }}
-          onMouseDown={(e) => handleMouseDown(e, 'range')}
-        />
-        <div
-          className="pv-range-handle pv-range-handle-left"
-          style={{ left: `${leftPos}%` }}
-          onMouseDown={(e) => handleMouseDown(e, 'left')}
-        />
-        <div
-          className="pv-range-handle pv-range-handle-right"
-          style={{ left: `${rightPos}%` }}
-          onMouseDown={(e) => handleMouseDown(e, 'right')}
-        />
-      </div>
-
-      <div className="pv-range-labels">
-        <span className="pv-range-value">{formatValue(currentRange[0])}</span>
-        <span className="pv-range-value">{formatValue(currentRange[1])}</span>
-      </div>
-    </div>
-  );
+    const leftPos = getPositionFromValue(currentRange[0]);
+    const rightPos = getPositionFromValue(currentRange[1]);
+
+    return (
+        <div className='pv-range-histogram' ref={containerRef}>
+            <div className='pv-histogram-bars'>
+                {histogram.map((bucket, i) => {
+                    const heightPercent = (bucket.count / bucket.maxCount) * 100;
+                    const isInRange =
+                        bucket.start >= currentRange[0] && bucket.end <= currentRange[1];
+                    const isPartiallyInRange =
+                        bucket.end > currentRange[0] && bucket.start < currentRange[1];
+
+                    return (
+                        <button
+                            key={i}
+                            className={`pv-histogram-bar ${isInRange ? 'in-range' : ''} ${isPartiallyInRange && !isInRange ? 'partial' : ''}`}
+                            style={{ height: `${heightPercent}%` }}
+                            onClick={() => handleBarClick(bucket)}
+                            title={`${formatValue(bucket.start)} - ${formatValue(bucket.end)}: ${bucket.count} items`}
+                            type='button'
+                        />
+                    );
+                })}
+            </div>
+
+            <div className='pv-range-slider'>
+                <div className='pv-range-track' />
+                <div
+                    className='pv-range-selection'
+                    style={{
+                        left: `${leftPos}%`,
+                        width: `${rightPos - leftPos}%`,
+                    }}
+                    onMouseDown={(e) => handleMouseDown(e, 'range')}
+                />
+                <div
+                    className='pv-range-handle pv-range-handle-left'
+                    style={{ left: `${leftPos}%` }}
+                    onMouseDown={(e) => handleMouseDown(e, 'left')}
+                />
+                <div
+                    className='pv-range-handle pv-range-handle-right'
+                    style={{ left: `${rightPos}%` }}
+                    onMouseDown={(e) => handleMouseDown(e, 'right')}
+                />
+            </div>
+
+            <div className='pv-range-labels'>
+                <span className='pv-range-value'>{formatValue(currentRange[0])}</span>
+                <span className='pv-range-value'>{formatValue(currentRange[1])}</span>
+            </div>
+        </div>
+    );
 }
diff --git a/Source/Filter/index.ts b/Source/Filter/index.ts
index 86e48b44..ec7fa3c4 100644
--- a/Source/Filter/index.ts
+++ b/Source/Filter/index.ts
@@ -9,8 +9,10 @@ export { RangeHistogramFilter } from './RangeHistogramFilter';
 export type { RangeHistogramFilterProps } from './RangeHistogramFilter';
 export { useFilterState } from './useFilterState';
 export type { UseFilterStateResult } from './useFilterState';
-export { buildFilterValues, buildRangeValues, buildHistogram } from './utils';
-export type { RenderedHistogramBucket } from './utils';
+// `buildFilterValues`, `buildRangeValues`, and `RenderedHistogramBucket` are internal
+// helpers used by `useFilterState`/`RangeHistogramFilter` and are intentionally not
+// part of the public API.
+export { buildHistogram } from './utils';
 export type {
   FilterValue,
   FilterOption,
diff --git a/Source/Filter/types.ts b/Source/Filter/types.ts
index ba5f68fe..086b081c 100644
--- a/Source/Filter/types.ts
+++ b/Source/Filter/types.ts
@@ -1,56 +1,73 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
+/** A value that can be rendered in a filter option or counted into a histogram bucket. */
 export type FilterValue = string | number | boolean | Date | null | undefined;
 
+/** One selectable option in a string/option filter group. */
 export interface FilterOption {
-  key: string;
-  label: string;
-  value: FilterValue;
-  count?: number;
+    /** Unique key for this option, used to track selections. */
+    key: string;
+    /** Human-readable label shown in the filter UI. */
+    label: string;
+    /** The underlying value this option represents. */
+    value: FilterValue;
+    /** Optional count of items with this value, shown next to the label. */
+    count?: number;
 }
 
+/** Props passed to a custom filter editor render function. */
 export interface FilterEditorProps {
-  value: unknown;
-  onChange: (value: unknown) => void;
+    /** The current value for this filter, or `undefined` when unset. */
+    value: unknown;
+    /** Called when the user changes the filter value. */
+    onChange: (value: unknown) => void;
 }
 
 /** One pre-counted bar of a range filter's histogram. */
 export interface HistogramBucket {
-  /** Inclusive start of the bucket, on the same scale as the filter's range. */
-  start: number;
-  /** Exclusive end of the bucket, on the same scale as the filter's range. */
-  end: number;
-  /** Number of items that fall inside the bucket. */
-  count: number;
+    /** Inclusive start of the bucket, on the same scale as the filter's range. */
+    start: number;
+    /** Exclusive end of the bucket, on the same scale as the filter's range. */
+    end: number;
+    /** Number of items that fall inside the bucket. */
+    count: number;
 }
 
+/** Defines one filter group in a {@link FilterPanel}. */
 export interface FilterDefinition {
-  key: string;
-  label: string;
-  /**
-   * Filter type. Defaults to 'string'. Use 'number' for range/histogram.
-   * Use 'custom' when providing a `<FilterEditor>` child inside `<FilterPanel>` for fully custom UI.
-   */
-  type?: 'string' | 'number' | 'date' | 'custom';
-  /** Allow selecting multiple options (checkbox behaviour). Defaults to false (radio behaviour). */
-  multi?: boolean;
-  /** Pre-computed options for string/date filters. */
-  options?: FilterOption[];
-  /**
-   * Numeric range data for 'number' and 'date' type filters.
-   *
-   * Supply `values` to have the histogram counted in the browser, or `histogram` when the counts
-   * were produced elsewhere - by a server aggregating over more rows than are worth transferring,
-   * for instance. `histogram` wins when both are present.
-   */
-  numericRange?: { min: number; max: number; values?: FilterValue[]; histogram?: HistogramBucket[] };
-  /** Number of histogram buckets. Defaults to 20. */
-  buckets?: number;
-  /** Show an inline search box that filters the displayed options for this group. */
-  searchable?: boolean;
-  /** Placeholder shown in the inline search box. Defaults to 'Search…'. */
-  searchPlaceholder?: string;
+    /** Unique key for this filter group. */
+    key: string;
+    /** Human-readable label shown in the filter panel. */
+    label: string;
+    /**
+     * Filter type. Defaults to 'string'. Use 'number' for range/histogram.
+     * Use 'custom' when providing a `<FilterEditor>` child inside `<FilterPanel>` for fully custom UI.
+     */
+    type?: 'string' | 'number' | 'date' | 'custom';
+    /** Allow selecting multiple options (checkbox behaviour). Defaults to false (radio behaviour). */
+    multi?: boolean;
+    /** Pre-computed options for string/date filters. */
+    options?: FilterOption[];
+    /**
+     * Numeric range data for 'number' and 'date' type filters.
+     *
+     * Supply `values` to have the histogram counted in the browser, or `histogram` when the counts
+     * were produced elsewhere - by a server aggregating over more rows than are worth transferring,
+     * for instance. `histogram` wins when both are present.
+     */
+    numericRange?: {
+        min: number;
+        max: number;
+        values?: FilterValue[];
+        histogram?: HistogramBucket[];
+    };
+    /** Number of histogram buckets. Defaults to 20. */
+    buckets?: number;
+    /** Show an inline search box that filters the displayed options for this group. */
+    searchable?: boolean;
+    /** Placeholder shown in the inline search box. Defaults to 'Search…'. */
+    searchPlaceholder?: string;
 }
 
 /** Selected string/option values for each filter, keyed by FilterDefinition.key. */
diff --git a/Source/Filter/useFilterState.ts b/Source/Filter/useFilterState.ts
index 1e43f2c5..29f7790b 100644
--- a/Source/Filter/useFilterState.ts
+++ b/Source/Filter/useFilterState.ts
@@ -2,19 +2,41 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import type { FilterDefinition, FilterValues, RangeValues, CustomFilterValues } from './types';
+import type {
+    FilterDefinition,
+    FilterValues,
+    RangeValues,
+    CustomFilterValues,
+} from './types';
 import { buildFilterValues, buildRangeValues } from './utils';
 
+/**
+ * Return type of {@link useFilterState}.
+ *
+ * Contains the current filter state (selections, ranges, custom values, and
+ * the expanded filter key) and handlers for toggling options, clearing
+ * filters, changing ranges, and changing custom values. Pass these directly
+ * to {@link FilterPanel}.
+ */
 export interface UseFilterStateResult {
-  filterValues: FilterValues;
-  rangeValues: RangeValues;
-  customValues: CustomFilterValues;
-  expandedFilterKey: string | null;
-  setExpandedFilterKey: (key: string | null) => void;
-  handleToggleFilter: (filterKey: string, optionKey: string, multi: boolean) => void;
-  handleClearFilter: (filterKey: string) => void;
-  handleRangeChange: (filterKey: string, range: [number, number] | null) => void;
-  handleCustomValueChange: (filterKey: string, value: unknown) => void;
+    /** Current string/option selections, keyed by `FilterDefinition.key`. */
+    filterValues: FilterValues;
+    /** Current numeric range selections, keyed by `FilterDefinition.key`. */
+    rangeValues: RangeValues;
+    /** Current values for filters using a custom `<FilterEditor>`, keyed by `FilterDefinition.key`. */
+    customValues: CustomFilterValues;
+    /** The key of the currently expanded filter group, or `null` when none is expanded. */
+    expandedFilterKey: string | null;
+    /** Set which filter group is expanded. Pass `null` to collapse all. */
+    setExpandedFilterKey: (key: string | null) => void;
+    /** Called when the user toggles a string/option filter. */
+    handleToggleFilter: (filterKey: string, optionKey: string, multi: boolean) => void;
+    /** Called when the user clears all selections for a filter group. */
+    handleClearFilter: (filterKey: string) => void;
+    /** Called when the user drags a numeric range or clicks a histogram bar. */
+    handleRangeChange: (filterKey: string, range: [number, number] | null) => void;
+    /** Called when a custom editor's value changes. */
+    handleCustomValueChange: (filterKey: string, value: unknown) => void;
 }
 
 /**
@@ -24,107 +46,119 @@ export interface UseFilterStateResult {
  * filter in the provided `filters` array. Pass the returned values and
  * handlers directly to <FilterPanel>.
  */
-export function useFilterState(filters: FilterDefinition[] | undefined): UseFilterStateResult {
-  const [filterValues, setFilterValues] = useState<FilterValues>(() => buildFilterValues(filters));
-  const [rangeValues, setRangeValues] = useState<RangeValues>(() => buildRangeValues(filters));
-  const [customValues, setCustomValues] = useState<CustomFilterValues>({});
-  const [expandedFilterKey, setExpandedFilterKey] = useState<string | null>(
-    filters?.[0]?.key ?? null
-  );
+export function useFilterState(
+    filters: FilterDefinition[] | undefined,
+): UseFilterStateResult {
+    const [filterValues, setFilterValues] = useState<FilterValues>(() =>
+        buildFilterValues(filters),
+    );
+    const [rangeValues, setRangeValues] = useState<RangeValues>(() =>
+        buildRangeValues(filters),
+    );
+    const [customValues, setCustomValues] = useState<CustomFilterValues>({});
+    const [expandedFilterKey, setExpandedFilterKey] = useState<string | null>(
+        filters?.[0]?.key ?? null,
+    );
 
-  // Serialize filter keys to avoid infinite loops from reference changes
-  const filterKeys = useMemo(
-    () => filters?.map(f => f.key).join(',') ?? '',
-    [filters]
-  );
-  const prevFilterKeysRef = useRef<string>(filterKeys);
+    // Serialize filter keys to avoid infinite loops from reference changes
+    const filterKeys = useMemo(
+        () => filters?.map((f) => f.key).join(',') ?? '',
+        [filters],
+    );
+    const prevFilterKeysRef = useRef<string>(filterKeys);
 
-  // Sync state when the filter definitions change (only when keys actually change)
-  useEffect(() => {
-    // Only update if the filter keys have actually changed
-    if (filterKeys === prevFilterKeysRef.current) return;
-    prevFilterKeysRef.current = filterKeys;
+    // Sync state when the filter definitions change (only when keys actually change)
+    useEffect(() => {
+        // Only update if the filter keys have actually changed
+        if (filterKeys === prevFilterKeysRef.current) return;
+        prevFilterKeysRef.current = filterKeys;
 
-    setFilterValues((prev) => {
-      const next = buildFilterValues(filters);
-      if (!filters) return next;
-      filters.forEach((filter) => {
-        if (prev[filter.key]) {
-          next[filter.key] = new Set(prev[filter.key]);
-        }
-      });
-      return next;
-    });
+        setFilterValues((prev) => {
+            const next = buildFilterValues(filters);
+            if (!filters) return next;
+            filters.forEach((filter) => {
+                if (prev[filter.key]) {
+                    next[filter.key] = new Set(prev[filter.key]);
+                }
+            });
+            return next;
+        });
 
-    setRangeValues((prev) => {
-      const next = buildRangeValues(filters);
-      if (!filters) return next;
-      filters.forEach((filter) => {
-        if (filter.type === 'number' && filter.key in prev) {
-          next[filter.key] = prev[filter.key];
-        }
-      });
-      return next;
-    });
-  }, [filterKeys, filters]);
+        setRangeValues((prev) => {
+            const next = buildRangeValues(filters);
+            if (!filters) return next;
+            filters.forEach((filter) => {
+                if (filter.type === 'number' && filter.key in prev) {
+                    next[filter.key] = prev[filter.key];
+                }
+            });
+            return next;
+        });
+    }, [filterKeys, filters]);
 
-  useEffect(() => {
-    if (!filters?.length) {
-      setExpandedFilterKey(null);
-      return;
-    }
-    setExpandedFilterKey((current) => {
-      if (current && filters.some((f) => f.key === current)) return current;
-      return filters[0]?.key ?? null;
-    });
-  }, [filterKeys, filters]);
+    useEffect(() => {
+        if (!filters?.length) {
+            setExpandedFilterKey(null);
+            return;
+        }
+        setExpandedFilterKey((current) => {
+            if (current && filters.some((f) => f.key === current)) return current;
+            return filters[0]?.key ?? null;
+        });
+    }, [filterKeys, filters]);
 
-  const handleToggleFilter = useCallback((filterKey: string, optionKey: string, multi: boolean) => {
-    setFilterValues((prev) => {
-      const next: FilterValues = { ...prev };
-      const current = new Set(prev[filterKey] ?? []);
+    const handleToggleFilter = useCallback(
+        (filterKey: string, optionKey: string, multi: boolean) => {
+            setFilterValues((prev) => {
+                const next: FilterValues = { ...prev };
+                const current = new Set(prev[filterKey] ?? []);
 
-      if (multi) {
-        if (current.has(optionKey)) {
-          current.delete(optionKey);
-        } else {
-          current.add(optionKey);
-        }
-      } else {
-        if (current.has(optionKey)) {
-          current.clear();
-        } else {
-          current.clear();
-          current.add(optionKey);
-        }
-      }
+                if (multi) {
+                    if (current.has(optionKey)) {
+                        current.delete(optionKey);
+                    } else {
+                        current.add(optionKey);
+                    }
+                } else {
+                    if (current.has(optionKey)) {
+                        current.clear();
+                    } else {
+                        current.clear();
+                        current.add(optionKey);
+                    }
+                }
 
-      next[filterKey] = current;
-      return next;
-    });
-  }, []);
+                next[filterKey] = current;
+                return next;
+            });
+        },
+        [],
+    );
 
-  const handleClearFilter = useCallback((filterKey: string) => {
-    setFilterValues((prev) => ({ ...prev, [filterKey]: new Set() }));
-  }, []);
+    const handleClearFilter = useCallback((filterKey: string) => {
+        setFilterValues((prev) => ({ ...prev, [filterKey]: new Set() }));
+    }, []);
 
-  const handleRangeChange = useCallback((filterKey: string, range: [number, number] | null) => {
-    setRangeValues((prev) => ({ ...prev, [filterKey]: range }));
-  }, []);
+    const handleRangeChange = useCallback(
+        (filterKey: string, range: [number, number] | null) => {
+            setRangeValues((prev) => ({ ...prev, [filterKey]: range }));
+        },
+        [],
+    );
 
-  const handleCustomValueChange = useCallback((filterKey: string, value: unknown) => {
-    setCustomValues((prev) => ({ ...prev, [filterKey]: value }));
-  }, []);
+    const handleCustomValueChange = useCallback((filterKey: string, value: unknown) => {
+        setCustomValues((prev) => ({ ...prev, [filterKey]: value }));
+    }, []);
 
-  return {
-    filterValues,
-    rangeValues,
-    customValues,
-    expandedFilterKey,
-    setExpandedFilterKey,
-    handleToggleFilter,
-    handleClearFilter,
-    handleRangeChange,
-    handleCustomValueChange,
-  };
+    return {
+        filterValues,
+        rangeValues,
+        customValues,
+        expandedFilterKey,
+        setExpandedFilterKey,
+        handleToggleFilter,
+        handleClearFilter,
+        handleRangeChange,
+        handleCustomValueChange,
+    };
 }
diff --git a/Source/MIGRATION.md b/Source/MIGRATION.md
index 19173e31..f9acc4fb 100644
--- a/Source/MIGRATION.md
+++ b/Source/MIGRATION.md
@@ -139,6 +139,25 @@ Map product tokens directly in CSS:
 
 This removes the old product-token → Prime preset → Prime variable → Cratis variable translation chain.
 
+## Removed accidental package exports
+
+An audit of the published `exports` map ([#173](https://github.com/Cratis/Components/issues/173)) found implementation-only symbols that were unintentionally reachable from a public subpath — each was exported only because the owning module's barrel used a blanket `export *`, not because it was a supported contract. Components 4 stops re-exporting them from their public barrel; the underlying files keep the symbol for their own internal cross-file use, so this is a package-export change only, not a behavior change.
+
+| Removed export                                                | Subpath(s)                                                       | Migration                                                                                            |
+| -------------------------------------------------------------- | ------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------- |
+| `CommandStepperContent`                                        | `@cratis/components/CommandStepper`, `@cratis/components/CommandDialog` | Private rendering primitive behind `CommandStepper` and `StepperCommandDialog`. Use one of those components; there is no direct public replacement. |
+| `PivotViewerOptimized`                                         | `@cratis/components/PivotViewer`                                   | Was an accidental alias of `PivotViewer`. Import `PivotViewer` instead.                                |
+| `getInitials`                                                  | `@cratis/components/Canvas`                                        | Private `PersonAvatarCircle` helper. Not part of the public API.                                       |
+| `findOwnReaction`, `reactionsExcludingUser`                    | `@cratis/components/Canvas`                                        | Private `ChatMessageBubble` helpers. Not part of the public API.                                       |
+| `matchCandidates`, `activeMentionQuery`, `applyMention`, `MentionApplied` | `@cratis/components/Canvas`                               | Private `ChatComposer` mention helpers. Not part of the public API.                                    |
+| `EMOJI_CATALOG`, `EmojiCategoryKey`                             | `@cratis/components/Canvas`                                        | Private `EmojiPicker` implementation details. Not part of the public API.                              |
+| `DEFAULT_EMOJIS`, `QUICK_ROW_SIZE`                              | `@cratis/components/Canvas`                                        | Private `recentEmojis`/`rememberEmoji` constants. Not part of the public API.                          |
+| `buildFilterValues`, `buildRangeValues`, `RenderedHistogramBucket` | `@cratis/components/Filter`                                      | Private `useFilterState`/`RangeHistogramFilter` helpers. Not part of the public API.                   |
+
+None of these had a documented contract, and none is required by any other public API in this package. An application that imported one of these directly has no supported replacement to migrate to — inline the equivalent logic, or open an issue describing the use case if the behavior should become a supported public contract.
+
+The surfaces this audit confirmed as intentional and kept public — `ToastRecord`, `getToastSnapshot`, `subscribeToToasts`, `ToastDispatch`, `EmojiMemory`, `ChatAuthorKind`, `DEFAULT_TYPE_FORMATS`, `NavigationItem`, `Json`, and `TimeMachine`'s `Properties` — are unchanged and now carry TSDoc explaining their contract and, where relevant, their extension-point role.
+
 ## Migrate pass-through configuration
 
 The `pt` prop remains the per-part customization surface, but its values are now ordinary HTML attributes and its keys are stable Cratis names. `ptOptions` and `unstyled` remain accepted temporarily but have no effect: part attributes always merge, and Components always uses consumer-owned CSS.
diff --git a/Source/Notifications/toast.ts b/Source/Notifications/toast.ts
index 70ccf255..7f2683d0 100644
--- a/Source/Notifications/toast.ts
+++ b/Source/Notifications/toast.ts
@@ -3,63 +3,139 @@
 
 import type { ButtonHTMLAttributes, ReactElement, ReactNode } from 'react';
 
+/**
+ * Visual severity level for a toast notification.
+ * Determines the default styling and icon treatment when rendered by the Toaster component.
+ */
 export type ToastSeverity =
     'normal' | 'success' | 'info' | 'warn' | 'error' | 'secondary' | 'contrast';
+
+/**
+ * Unique identifier for a toast notification.
+ * Can be explicitly provided via {@link ToastOptions.id} or auto-generated.
+ */
 export type ToastId = string | number;
 
+/**
+ * Configuration options accepted by every toast notification call.
+ * Merged with severity-specific defaults when using helpers like {@link toast.success}.
+ */
 export interface ToastOptions {
+    /** Unique identifier for this toast. Auto-generated if omitted. */
     id?: ToastId;
+    /** Primary heading text or element. Rendered prominently in the toast UI. */
     title?: ReactNode | string;
+    /** Secondary body text or element. Rendered below the title. */
     description?: ReactNode | string;
+    /** Action button props. Rendered as a clickable button in the toast. */
     action?: ButtonHTMLAttributes<HTMLButtonElement>;
+    /** Whether the user can manually dismiss the toast. Defaults to true. */
     dismissible?: boolean;
+    /** Visual severity level. Determines styling and default icon. */
     severity?: ToastSeverity;
+    /** Whether to show a loading spinner. Typically used with {@link toast.promise}. */
     loading?: boolean;
+    /** Custom icon element. Overrides the default severity-based icon. */
     icon?: ReactNode;
+    /** Custom renderer. Fully replaces the default toast UI when provided. */
     render?: ReactElement;
+    /** Auto-dismiss timeout in milliseconds. No auto-dismiss if omitted or zero. */
     duration?: number;
+    /** Grouping key. Used to logically associate related toasts. */
     group?: string;
+    /** The promise being tracked (internal, set automatically by {@link toast.promise}). */
     promise?: unknown;
+    /** Arbitrary metadata. Available to custom renderers and lifecycle callbacks. */
     data?: Record<string, unknown>;
+    /** Callback invoked when the toast is dismissed (manually or programmatically). */
     onDismiss?: (toast: ToastOptions) => void;
+    /** Callback invoked when the toast auto-dismisses via duration timeout. */
     onTimeout?: (toast: ToastOptions) => void;
 }
 
+/**
+ * Legacy alias for {@link ToastOptions}.
+ * Preserved for source compatibility with earlier versions.
+ */
 export type ToastType = ToastOptions;
 
+/**
+ * Options for {@link toast.promise}, which shows a loading toast and updates it based on promise outcome.
+ * @typeParam T - The promise resolution type.
+ */
 export interface ToastPromiseOptions<T = unknown> {
+    /** Toast shown immediately while the promise is pending. Automatically receives `loading: true`. */
     loading: ToastOptions;
+    /** Toast shown on success. Can be a static config or a function receiving the resolved value. Returns void to dismiss instead of updating. */
     success?: ToastOptions | ((data: T) => ToastOptions | void);
+    /** Toast shown on rejection. Can be a static config or a function receiving the error. Returns void to dismiss instead of updating. */
     error?: ToastOptions | ((error: unknown) => ToastOptions | void);
 }
 
+/**
+ * Dispatch interface for toast operations.
+ * Custom implementations can be installed via {@link setToastDispatch} to intercept all toast calls—
+ * useful for testing, logging, or routing toasts to a different rendering surface.
+ * The default implementation writes to an in-memory queue consumed by the mounted Toaster component.
+ */
 export interface ToastDispatch {
+    /** Shows a toast with the provided options. Returns the toast ID. */
     show(options: ToastOptions): ToastId;
+    /** Updates an existing toast by ID. Returns the toast ID. */
     update(id: ToastId, updates: Partial<ToastOptions>): ToastId;
+    /** Dismisses one toast by ID, or all toasts if ID is omitted. */
     dismiss(id?: ToastId): void;
+    /** Tracks a promise with loading/success/error toasts. Returns the original promise (passthrough). */
     promise<T>(promise: Promise<T>, options: ToastPromiseOptions<T>): Promise<T>;
+    /** Shows a success-severity toast. Shorthand for `show({ ...options, severity: 'success' })`. */
     success(options: ToastOptions): ToastId;
+    /** Shows an info-severity toast. Shorthand for `show({ ...options, severity: 'info' })`. */
     info(options: ToastOptions): ToastId;
+    /** Shows a warn-severity toast. Shorthand for `show({ ...options, severity: 'warn' })`. */
     warn(options: ToastOptions): ToastId;
+    /** Shows an error-severity toast. Shorthand for `show({ ...options, severity: 'error' })`. */
     error(options: ToastOptions): ToastId;
+    /** Shows a secondary-severity toast. Shorthand for `show({ ...options, severity: 'secondary' })`. */
     secondary(options: ToastOptions): ToastId;
+    /** Shows a contrast-severity toast. Shorthand for `show({ ...options, severity: 'contrast' })`. */
     contrast(options: ToastOptions): ToastId;
 }
 
+/**
+ * The callable signature and helper methods of the {@link toast} export.
+ * All methods delegate to the currently active {@link ToastDispatch} (default queue-backed or custom override).
+ */
 export interface ToastFunction {
+    /** Call signature: shows a toast with the provided options. Equivalent to `toast.show(options)`. */
     (options: ToastOptions): ToastId;
+    /** Updates an existing toast by ID. Returns the toast ID. */
     update(id: ToastId, updates: Partial<ToastOptions>): ToastId;
+    /** Dismisses one toast by ID, or all toasts if ID is omitted. */
     dismiss(id?: ToastId): void;
+    /** Tracks a promise with loading/success/error toasts. Returns the original promise (passthrough). */
     promise<T>(promise: Promise<T>, options: ToastPromiseOptions<T>): Promise<T>;
+    /** Shows a success-severity toast. Shorthand for `show({ ...options, severity: 'success' })`. */
     success(options: ToastOptions): ToastId;
+    /** Shows an info-severity toast. Shorthand for `show({ ...options, severity: 'info' })`. */
     info(options: ToastOptions): ToastId;
+    /** Shows a warn-severity toast. Shorthand for `show({ ...options, severity: 'warn' })`. */
     warn(options: ToastOptions): ToastId;
+    /** Shows an error-severity toast. Shorthand for `show({ ...options, severity: 'error' })`. */
     error(options: ToastOptions): ToastId;
+    /** Shows a secondary-severity toast. Shorthand for `show({ ...options, severity: 'secondary' })`. */
     secondary(options: ToastOptions): ToastId;
+    /** Shows a contrast-severity toast. Shorthand for `show({ ...options, severity: 'contrast' })`. */
     contrast(options: ToastOptions): ToastId;
 }
 
+/**
+ * The complete shape of a toast notification stored in the global queue.
+ * Extends {@link ToastOptions} with a guaranteed `id` property.
+ * Custom rendering surfaces can access the queue via {@link subscribeToToasts} and {@link getToastSnapshot}
+ * without importing the default Toaster component.
+ */
 export interface ToastRecord extends ToastOptions {
+    /** Unique identifier for this toast. Always present on stored records (auto-generated if not provided). */
     id: ToastId;
 }
 
@@ -177,6 +253,25 @@ const nearestActiveFrame = (
     return current;
 };
 
+/**
+ * Installs a custom {@link ToastDispatch} implementation that shadows the default queue-backed dispatch.
+ * All subsequent `toast(...)` calls route through the provided dispatch until the returned cleanup function is invoked.
+ * Dispatch frames are stack-based: nested calls compose, and removing a frame restores the previous one.
+ * Useful for testing (intercept/assert toast calls), logging, or routing toasts to an alternative UI.
+ *
+ * @param dispatch - The custom dispatch implementation to install.
+ * @returns A cleanup function that removes this dispatch frame and restores the previous active dispatch.
+ *
+ * @example
+ * ```ts
+ * const cleanup = setToastDispatch({
+ *   show: (opts) => { console.log('toast:', opts); return 'test-id'; },
+ *   // ... other ToastDispatch methods
+ * });
+ * toast({ title: 'Hello' }); // logs instead of queuing
+ * cleanup(); // restores default behavior
+ * ```
+ */
 export const setToastDispatch = (dispatch: ToastDispatch): (() => void) => {
     const frame: ToastDispatchFrame = {
         dispatch,
diff --git a/Source/PivotViewer/index.ts b/Source/PivotViewer/index.ts
index 80a1aeb3..bcfa0f41 100644
--- a/Source/PivotViewer/index.ts
+++ b/Source/PivotViewer/index.ts
@@ -1,9 +1,9 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { PivotViewer } from './PivotViewer';
-
-export { PivotViewer, PivotViewer as PivotViewerOptimized };
+export { PivotViewer } from './PivotViewer';
+// `PivotViewerOptimized` was an accidental alias of `PivotViewer` and has been
+// removed; import `PivotViewer` instead.
 export type {
     PivotViewerProps,
     PivotViewerColors,
diff --git a/Source/PivotViewer/types.ts b/Source/PivotViewer/types.ts
index ce2fd776..e07cd34a 100644
--- a/Source/PivotViewer/types.ts
+++ b/Source/PivotViewer/types.ts
@@ -4,6 +4,7 @@
 import type { ReactNode } from 'react';
 import type { FilterEditorProps } from '../Filter/types';
 
+/** Primitive value types that a pivot property can hold. */
 export type PivotPrimitive = string | number | boolean | Date | null | undefined;
 
 /** Value reachable through a searchable PivotViewer property path. */
@@ -21,7 +22,9 @@ export type PropertyAccessor<TItem> = (item: TItem) => PivotPropertyValue;
 export function getPropertyPath<TItem>(accessor: PropertyAccessor<TItem>): string {
     const fnStr = accessor.toString();
     // Match patterns like: item => item.prop or item => item.prop.nested or (item) => item.prop
-    const match = fnStr.match(/(?:=>|return)\s*[a-zA-Z_$][a-zA-Z0-9_$]*\.([a-zA-Z_$][a-zA-Z0-9_$.]*)/);
+    const match = fnStr.match(
+        /(?:=>|return)\s*[a-zA-Z_$][a-zA-Z0-9_$]*\.([a-zA-Z_$][a-zA-Z0-9_$.]*)/,
+    );
     return match ? match[1] : '';
 }
 
@@ -42,80 +45,131 @@ export function getValueByPath<TItem>(item: TItem, path: string): PivotPropertyV
     return value;
 }
 
+/** One group of items sharing a common dimension value. */
 export interface PivotGroup<TItem extends object> {
-  key: string;
-  label: string;
-  value: PivotPrimitive;
-  items: TItem[];
-  count?: number;
+    /** Unique identifier for this group. */
+    key: string;
+    /** Display label for this group. */
+    label: string;
+    /** The actual dimension value this group represents. */
+    value: PivotPrimitive;
+    /** Array of items belonging to this group. */
+    items: TItem[];
+    /** Optional item count (may be computed from items.length). */
+    count?: number;
 }
 
+/** Defines how items are grouped, labeled, and sorted along one facet. */
 export interface PivotDimension<TItem extends object> {
-  key: string;
-  label: string;
-  getValue: (item: TItem) => PivotPrimitive;
-  formatValue?: (value: PivotPrimitive) => string;
-  sort?: (a: PivotGroup<TItem>, b: PivotGroup<TItem>) => number;
+    /** Unique identifier for this dimension. */
+    key: string;
+    /** Display label for this dimension. */
+    label: string;
+    /** Extracts the dimension value from an item. */
+    getValue: (item: TItem) => PivotPrimitive;
+    /** Optional formatter for displaying dimension values. */
+    formatValue?: (value: PivotPrimitive) => string;
+    /** Optional custom sort comparator for groups within this dimension. */
+    sort?: (a: PivotGroup<TItem>, b: PivotGroup<TItem>) => number;
 }
 
+/** One selectable value within a PivotFilter. */
 export interface PivotFilterOption {
-  key: string;
-  label: string;
-  value: PivotPrimitive;
-  count: number;
+    /** Unique identifier for this option. */
+    key: string;
+    /** Display label for this option. */
+    label: string;
+    /** The actual value this option represents. */
+    value: PivotPrimitive;
+    /** Number of items with this value. */
+    count: number;
 }
 
+/** A facet filter offered in the filter panel. */
 export interface PivotFilter<TItem extends object> {
-  key: string;
-  label: string;
-  getValue: (item: TItem) => PivotPrimitive;
-  multi?: boolean;
-  options?: PivotFilterOption[];
-  sort?: (a: PivotFilterOption, b: PivotFilterOption) => number;
-  /** For numeric filters, enables range picker with histogram */
-  type?: 'string' | 'number' | 'date' | 'custom';
-  /** Number of buckets for the histogram in range filters */
-  buckets?: number;
-  /** Custom filter editor renderer. When provided, replaces the default filter UI for this filter. */
-  renderEditor?: (props: FilterEditorProps) => ReactNode;
+    /** Unique identifier for this filter. */
+    key: string;
+    /** Display label for this filter. */
+    label: string;
+    /** Extracts the filter value from an item. */
+    getValue: (item: TItem) => PivotPrimitive;
+    /** Whether multiple options can be selected simultaneously. */
+    multi?: boolean;
+    /** Available filter options; auto-computed from data if omitted. */
+    options?: PivotFilterOption[];
+    /** Optional custom sort comparator for filter options. */
+    sort?: (a: PivotFilterOption, b: PivotFilterOption) => number;
+    /** For numeric filters, enables range picker with histogram */
+    type?: 'string' | 'number' | 'date' | 'custom';
+    /** Number of buckets for the histogram in range filters */
+    buckets?: number;
+    /** Custom filter editor renderer. When provided, replaces the default filter UI for this filter. */
+    renderEditor?: (props: FilterEditorProps) => ReactNode;
 }
 
 /** Semantic color overrides for DOM and Pixi PivotViewer surfaces. */
 export interface PivotViewerColors {
-  primaryColor: string;
-  primaryColorText: string;
-  primary500: string;
-  surfaceGround: string;
-  surfaceCard: string;
-  surfaceSection: string;
-  surfaceOverlay: string;
-  surfaceBorder: string;
-  textColor: string;
-  textColorSecondary: string;
-  highlightBg: string;
-  maskbg: string;
-  focusRing: string;
+    /** Color used for primary/brand elements. */
+    primaryColor: string;
+    /** Color used for text on primary-colored backgrounds. */
+    primaryColorText: string;
+    /** Color used for medium primary shade (500-level). */
+    primary500: string;
+    /** Color used for the base/ground surface. */
+    surfaceGround: string;
+    /** Color used for card/content surfaces. */
+    surfaceCard: string;
+    /** Color used for section surfaces. */
+    surfaceSection: string;
+    /** Color used for overlay/modal surfaces. */
+    surfaceOverlay: string;
+    /** Color used for surface borders. */
+    surfaceBorder: string;
+    /** Color used for primary text. */
+    textColor: string;
+    /** Color used for secondary/muted text. */
+    textColorSecondary: string;
+    /** Color used for highlight/selection backgrounds. */
+    highlightBg: string;
+    /** Color used for mask/backdrop backgrounds. */
+    maskbg: string;
+    /** Color used for focus ring/outline. */
+    focusRing: string;
 }
 
+/** Props for the PivotViewer component. */
 export interface PivotViewerProps<TItem extends object> {
-  data: TItem[];
-  dimensions: PivotDimension<TItem>[];
-  filters?: PivotFilter<TItem>[];
-  defaultDimensionKey?: string;
-  /** Renderer for card content; returns structured text data for display */
-  cardRenderer: (item: TItem) => { title: string; labels?: string[]; values?: string[] };
-  /** Optional renderer for the detail content area; the drawer shell (header/close/layout) stays component-owned */
-  detailRenderer?: (item: TItem, onClose: () => void) => ReactNode;
-  getItemId?: (item: TItem, index: number) => string | number;
-  searchFields?: PropertyAccessor<TItem>[];
-  className?: string;
-  emptyContent?: ReactNode;
-  isLoading?: boolean;
-  /**
-   * Optional color overrides mapped to semantic CSS variables.
-   * If omitted, values are taken from the global theme (Cratis defaults).
-   */
-  colors?: Partial<PivotViewerColors>;
+    /** Array of items to display in the viewer. */
+    data: TItem[];
+    /** Available grouping dimensions for organizing items. */
+    dimensions: PivotDimension<TItem>[];
+    /** Optional facet filters for the filter panel. */
+    filters?: PivotFilter<TItem>[];
+    /** Initial dimension key to group by; defaults to the first dimension if omitted. */
+    defaultDimensionKey?: string;
+    /** Renderer for card content; returns structured text data for display */
+    cardRenderer: (item: TItem) => {
+        title: string;
+        labels?: string[];
+        values?: string[];
+    };
+    /** Optional renderer for the detail content area; the drawer shell (header/close/layout) stays component-owned */
+    detailRenderer?: (item: TItem, onClose: () => void) => ReactNode;
+    /** Optional stable ID extractor for items; used for efficient rendering and selection tracking. */
+    getItemId?: (item: TItem, index: number) => string | number;
+    /** Property accessors defining which fields are searchable. */
+    searchFields?: PropertyAccessor<TItem>[];
+    /** Optional CSS class name to apply to the root element. */
+    className?: string;
+    /** Content to display when no items match the current filters/search. */
+    emptyContent?: ReactNode;
+    /** Loading state; displays a loading indicator when true. */
+    isLoading?: boolean;
+    /**
+     * Optional color overrides mapped to semantic CSS variables.
+     * If omitted, values are taken from the global theme (Cratis defaults).
+     */
+    colors?: Partial<PivotViewerColors>;
 }
 
 export type FilterState = Record<string, Set<string>>;
diff --git a/Source/TimeMachine/EventsView.tsx b/Source/TimeMachine/EventsView.tsx
index 208f0165..7de58425 100644
--- a/Source/TimeMachine/EventsView.tsx
+++ b/Source/TimeMachine/EventsView.tsx
@@ -8,21 +8,33 @@ import { Properties } from './Properties';
 
 /** Stable part attributes for {@link EventsView}. */
 export interface EventsViewParts {
+    /** Scrollable container wrapping the entire vertical timeline. */
     timeline?: HTMLAttributes<HTMLDivElement>;
+    /** One timeline event article element with `data-position` (left/right). */
     event?: HTMLAttributes<HTMLElement>;
+    /** Separator column containing the marker and optional connector line. */
     separator?: HTMLAttributes<HTMLDivElement>;
+    /** Event marker (the circular dot on the timeline spine). */
     marker?: HTMLAttributes<HTMLDivElement>;
+    /** Vertical line connecting consecutive event markers. */
     connector?: HTMLAttributes<HTMLDivElement>;
+    /** Content panel showing the event card (type, timestamp, properties). */
     content?: HTMLAttributes<HTMLDivElement>;
 }
 
 /** Props for the standalone, localized event timeline. */
 export interface EventsViewProps {
+    /** Ordered list of domain events to render in the vertical timeline. */
     events: Event[];
+    /** CSS class name applied to the timeline root. */
     className?: string;
+    /** Cratis-owned per-part attributes for timeline, event, separator, marker, connector, content. */
     pt?: EventsViewParts;
+    /** Retained for source compatibility; Cratis parts always merge. */
     ptOptions?: object;
+    /** Retained for source compatibility; consumers always own the CSS. */
     unstyled?: boolean;
+    /** Override any user-facing string (for localization). See {@link TimeMachineLabels}. */
     labels?: TimeMachineLabels;
 }
 
diff --git a/Source/TimeMachine/Properties.tsx b/Source/TimeMachine/Properties.tsx
index 7a2fc8a7..1a06d017 100644
--- a/Source/TimeMachine/Properties.tsx
+++ b/Source/TimeMachine/Properties.tsx
@@ -12,37 +12,52 @@ interface PropertiesProps {
     align?: 'left' | 'right';
 }
 
-export const Properties: React.FC<PropertiesProps> = ({ data, className, align = 'left' }) => {
+/**
+ * Renders a key-value property table showing an entity's properties at a point in time.
+ * Used by {@link EventsView} to display event content and by {@link ReadModelView} for
+ * version snapshots. A public composable building block for rendering structured data.
+ */
+export const Properties: React.FC<PropertiesProps> = ({
+    data,
+    className,
+    align = 'left',
+}) => {
     const isRight = align === 'right';
 
     const renderValue = (value: unknown): React.ReactNode => {
         if (value === null || value === undefined) {
-            return <span className="tm-properties-null">null</span>;
+            return <span className='tm-properties-null'>null</span>;
         }
 
         if (typeof value === 'boolean') {
-            return <span className={value ? 'tm-properties-boolean-true' : 'tm-properties-boolean-false'}>{value.toString()}</span>;
+            return (
+                <span
+                    className={
+                        value
+                            ? 'tm-properties-boolean-true'
+                            : 'tm-properties-boolean-false'
+                    }
+                >
+                    {value.toString()}
+                </span>
+            );
         }
 
         if (typeof value === 'number') {
-            return <span className="tm-properties-number">{value}</span>;
+            return <span className='tm-properties-number'>{value}</span>;
         }
 
         if (value instanceof Date) {
-            return <span className="tm-properties-date">{value.toLocaleString()}</span>;
+            return <span className='tm-properties-date'>{value.toLocaleString()}</span>;
         }
 
         if (Array.isArray(value)) {
-            return (
-                <span className="tm-properties-complex">
-                    Array[{value.length}]
-                </span>
-            );
+            return <span className='tm-properties-complex'>Array[{value.length}]</span>;
         }
 
         if (typeof value === 'object') {
             return (
-                <span className="tm-properties-complex">
+                <span className='tm-properties-complex'>
                     {'{'}...{'}'}
                 </span>
             );
@@ -53,17 +68,25 @@ export const Properties: React.FC<PropertiesProps> = ({ data, className, align =
 
     return (
         <div className={className}>
-            <table className="tm-properties-table">
+            <table className='tm-properties-table'>
                 <tbody>
-                    {data && Object.entries(data).map(([key, value], index) => (
-                        <tr key={`${key}-${index}`} className="tm-properties-row">
-                            <td className={`tm-properties-label${isRight ? ' tm-properties-label--right' : ''}`}>{formatPropertyName(key)}</td>
-                            <td className={`tm-properties-value${isRight ? ' tm-properties-value--right' : ''}`}>{renderValue(value)}</td>
-                        </tr>
-                    ))}
+                    {data &&
+                        Object.entries(data).map(([key, value], index) => (
+                            <tr key={`${key}-${index}`} className='tm-properties-row'>
+                                <td
+                                    className={`tm-properties-label${isRight ? ' tm-properties-label--right' : ''}`}
+                                >
+                                    {formatPropertyName(key)}
+                                </td>
+                                <td
+                                    className={`tm-properties-value${isRight ? ' tm-properties-value--right' : ''}`}
+                                >
+                                    {renderValue(value)}
+                                </td>
+                            </tr>
+                        ))}
                 </tbody>
             </table>
         </div>
     );
 };
-
diff --git a/Source/TimeMachine/TimeMachine.tsx b/Source/TimeMachine/TimeMachine.tsx
index fbaf2064..340e654d 100644
--- a/Source/TimeMachine/TimeMachine.tsx
+++ b/Source/TimeMachine/TimeMachine.tsx
@@ -17,8 +17,17 @@ enum ViewModes {
 
 /** Props for the localized, keyboard-accessible event/read-model timeline. */
 export interface TimeMachineProps {
+    /** Ordered list of historical entity versions (snapshots) to scrub through. */
     versions: Version[];
+    /**
+     * Zero-based index of the currently selected version.
+     * Controlled externally — the parent owns this value and updates it via {@link onVersionChange}.
+     */
     currentVersionIndex?: number;
+    /**
+     * Invoked when the user selects a different version (via timeline, scroll gesture, or arrow keys).
+     * Called immediately after the internal state changes, before rendering the new version.
+     */
     onVersionChange?: (index: number) => void;
     /** Scroll sensitivity - higher values require more scrolling to change versions */
     scrollSensitivity?: number;
@@ -26,6 +35,12 @@ export interface TimeMachineProps {
     labels?: Partial<TimeMachineLabels>;
 }
 
+/**
+ * A version slider/timeline component that lets a user scrub through historical snapshots
+ * of an event-sourced entity. Supports two view modes: read-model snapshots (with a
+ * fish-eye timeline and version cards) and a vertical event timeline. Built on top of
+ * event-sourced read models.
+ */
 export const TimeMachine: React.FC<TimeMachineProps> = ({
     versions,
     currentVersionIndex = 0,
diff --git a/Source/TimeMachine/types.ts b/Source/TimeMachine/types.ts
index 1eae729c..24878bd5 100644
--- a/Source/TimeMachine/types.ts
+++ b/Source/TimeMachine/types.ts
@@ -1,23 +1,47 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
+/**
+ * A historical snapshot of an entity at a point in time, holding the read-model state
+ * and optionally the events that produced it.
+ */
 export interface Version {
-  id: string;
-  timestamp: Date;
-  label: string;
-  content: React.ReactNode;
-  events?: Event[];
+    /** Unique identifier for this version snapshot. */
+    id: string;
+    /** Wall-clock timestamp when this version was captured. */
+    timestamp: Date;
+    /** User-facing label describing this version (e.g. "Initial Registration", "Updated Profile"). */
+    label: string;
+    /** Rendered read-model state at this point in time (typically a {@link Properties} table). */
+    content: React.ReactNode;
+    /** Domain events that produced this version, rendered in {@link EventsView}. */
+    events?: Event[];
 }
 
+/**
+ * A domain event rendered in the vertical timeline.
+ * Represents one immutable fact appended to the event log.
+ */
 export interface Event {
-  sequenceNumber: number;
-  type: string;
-  occurred: Date;
-  content: Record<string, unknown>;
+    /** Event sequence number in the event log (determines timeline order). */
+    sequenceNumber: number;
+    /** Event type name (e.g. "AuthorRegistered", "ProfileUpdated"). */
+    type: string;
+    /** Wall-clock timestamp when this event occurred. */
+    occurred: Date;
+    /** Event payload (property bag) rendered by {@link Properties}. */
+    content: Record<string, unknown>;
 }
 
+/**
+ * A single entry in the fish-eye timeline scrubber.
+ * A lightweight version reference without the full read-model snapshot.
+ */
 export interface TimelineEntry {
-  id: string;
-  timestamp: Date;
-  label: string;
+    /** Unique identifier for this timeline entry (typically the same as {@link Version.id}). */
+    id: string;
+    /** Wall-clock timestamp for this timeline tick. */
+    timestamp: Date;
+    /** User-facing label shown when hovering over this timeline entry. */
+    label: string;
 }
diff --git a/Source/index.ts b/Source/index.ts
index a6c93a66..8977ba45 100644
--- a/Source/index.ts
+++ b/Source/index.ts
@@ -1,24 +1,53 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
+/**
+ * Namespace re-exports below are an intentional, documented contract: every
+ * subpath in `Source/package.json`'s `exports` map (`@cratis/components/Canvas`,
+ * `@cratis/components/CommandDialog`, ...) is also reachable as a namespace off
+ * the package root (`import { Canvas } from '@cratis/components'`), so a consumer
+ * that only wants the root import does not have to know the subpath layout.
+ * Each namespace's own members carry their own TSDoc; the summaries here describe
+ * what each subsystem is for.
+ */
+
+/** Pan/zoom/Pixi-backed world surface, including the Chat, Note, and Region shapes. */
 import * as Canvas from './Canvas';
+/** Modal command dialogs, including the multi-step {@link StepperCommandDialog}. */
 import * as CommandDialog from './CommandDialog';
+/** Alias of {@link CommandDialog} kept for the standalone `./CommandStepper` subpath - same module, same members. */
 import * as CommandStepper from './CommandDialog';
+/** Field components and the field-type provider registry bound to Arc command forms. */
 import * as CommandForm from './CommandForm';
+/** Cross-cutting primitives: the provider, buttons, icons, tooltips, and page chrome. */
 import * as Common from './Common';
+/** The `DataPage` list/detail composition shell and its `Column` marker. */
 import * as DataPage from './DataPage';
+/** Query-backed and observable-query-backed data tables, columns, and filter matchers. */
 import * as DataTables from './DataTables';
+/** The base `Dialog` primitive plus busy-indicator and confirmation dialogs. */
 import * as Dialogs from './Dialogs';
+/** Small presentational primitives: tags, badges, chips, avatars, and progress indicators. */
 import * as Display from './Display';
+/** The accessible single/multi-select `Dropdown` control. */
 import * as Dropdown from './Dropdown';
+/** The filter panel, range histogram filter, and `useFilterState` state hook. */
 import * as Filter from './Filter';
+/** The app-wide imperative toast queue and `Toaster` region. */
 import * as Notifications from './Notifications';
+/** The structured JSON/JSON-Schema content editor. */
 import * as ObjectContentEditor from './ObjectContentEditor';
+/** The breadcrumb-style navigational bar for a navigable object path. */
 import * as ObjectNavigationalBar from './ObjectNavigationalBar';
+/** The faceted, zoomable card-grid `PivotViewer` visualization. */
 import * as PivotViewer from './PivotViewer';
+/** The JSON Schema-driven object editor. */
 import * as SchemaEditor from './SchemaEditor';
+/** The version-scrubbing `TimeMachine`, its read-model and events views, and `Properties` table. */
 import * as TimeMachine from './TimeMachine';
+/** The composable canvas-style icon toolbar and its part family. */
 import * as Toolbar from './Toolbar';
+/** Cross-cutting JSON/JSON-Schema/navigation types shared across editors. */
 import * as Types from './types';
 
 export {
diff --git a/Source/package.json b/Source/package.json
index 802a2c08..029aa8b2 100644
--- a/Source/package.json
+++ b/Source/package.json
@@ -128,6 +128,7 @@
         "copy-css": "./scripts/copy-css.sh",
         "verify-exports": "node ./scripts/verify-exports.mjs",
         "verify-package-archive": "node ./scripts/verify-package-archive.mjs",
+        "verify-api-docs": "node ./scripts/verify-api-docs.mjs",
         "lint": "yarn g:lint",
         "lint:ci": "yarn g:lint:ci",
         "test": "yarn g:test",
diff --git a/Source/scripts/verify-api-docs.mjs b/Source/scripts/verify-api-docs.mjs
new file mode 100644
index 00000000..ee8a583d
--- /dev/null
+++ b/Source/scripts/verify-api-docs.mjs
@@ -0,0 +1,592 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+/*
+ * Verifies that every intentionally public declaration reachable from a JavaScript
+ * subpath in the `exports` map of Source/package.json carries a TSDoc comment.
+ *
+ * Why this exists: `@cratis/components` ships type declarations alongside every JS
+ * subpath. A symbol that reaches a consumer through `import { X } from
+ * '@cratis/components/<Subpath>'` (directly, or transitively through `export *` /
+ * namespace re-exports) is part of the published contract - if it has no doc comment,
+ * consumers get no explanation of defaults, units, ownership, callback timing, or
+ * accessibility semantics from their editor. This script uses the TypeScript compiler
+ * API (already a project dependency - no new dependency is added) to compute exactly
+ * that reachable set from source, the same way `tsc`'s declaration emit would, and
+ * fails with the offending file/symbol when a doc comment is missing.
+ *
+ * What counts as "reachable": starting from every JS `exports` map entry's *source*
+ * barrel (not the built `.d.ts` - this runs pre-build, against `Source/**\/*.ts(x)`),
+ * this follows `export *`, named re-exports, and `import * as X from './y'; export {
+ * X }` namespace re-exports (aliases resolved with the TypeScript checker, the same
+ * resolution consumers get) until it reaches concrete declarations - functions,
+ * consts, interfaces, type aliases, enums, and classes. A local `export` that is never
+ * re-exported by a barrel on the reachable path (an implementation helper such as
+ * `Filter/utils.ts`'s `buildFilterValues`, kept exported only so a sibling module or a
+ * `for_*` spec can import it by relative path) is invisible to this walk and is never
+ * flagged - only symbols an npm consumer can actually import are checked.
+ *
+ * What is checked once a declaration is reached:
+ *   - The declaration itself must have a non-empty TSDoc comment.
+ *   - For an interface (or a type alias whose type is an object literal), every
+ *     member *declared directly on that interface/type* (not one inherited through
+ *     `extends`/`Omit<...>` from a type this package does not itself export) must
+ *     also carry a TSDoc comment. Enum members and function parameters are not
+ *     individually required to reduce noise on self-describing enums - the enum
+ *     declaration itself still needs a comment.
+ *
+ * Usage:  node scripts/verify-api-docs.mjs [--self-test-only] [--skip-self-test]
+ * Exits non-zero if the self-tests regress, or if any reachable declaration/member
+ * is missing a TSDoc comment.
+ */
+
+import { mkdtempSync, rmSync, writeFileSync, mkdirSync, existsSync, readFileSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import ts from 'typescript';
+
+const packageDir = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+
+// ---------------------------------------------------------------------------
+// Core analysis - exported so the self-tests below exercise the real logic.
+// ---------------------------------------------------------------------------
+
+/** Non-JS `exports` targets (CSS assets, the package manifest) - nothing to type-check. */
+const ASSET_EXTENSIONS = ['.css', '.json'];
+
+const isAsset = (target) =>
+    typeof target === 'string' && ASSET_EXTENSIONS.some((ext) => target.endsWith(ext));
+
+/** Picks the `types` (or `import`) file a condition resolves to. */
+function targetFor(value, condition) {
+    if (typeof value === 'string') return value;
+    if (value && typeof value === 'object') {
+        if (typeof value[condition] === 'string') return value[condition];
+        if (typeof value.default === 'string') return value.default;
+    }
+    return undefined;
+}
+
+/**
+ * Maps a package.json `exports` map to the deduplicated set of *source* barrel files
+ * it resolves to, keyed by every subpath that reaches that file (so a violation can
+ * report every public entry point it is reachable from).
+ *
+ * @param pkg The parsed Source/package.json.
+ * @param root Absolute path to the package directory (Source/).
+ */
+export function resolveBarrelsFromExports(pkg, root) {
+    const exportsMap = pkg.exports ?? {};
+    /** @type {Map<string, string[]>} absolute source file -> subpaths that resolve to it */
+    const fileToSubpaths = new Map();
+    const problems = [];
+
+    for (const [subpath, value] of Object.entries(exportsMap)) {
+        if (subpath === './package.json') continue;
+        const typesTarget = targetFor(value, 'types');
+        const importTarget = targetFor(value, 'import');
+        if (isAsset(importTarget) || isAsset(typesTarget)) continue; // CSS
+        if (!typesTarget) continue;
+
+        // `./dist/esm/Canvas/index.d.ts` -> `Canvas/index`
+        const relative = typesTarget
+            .replace(/^\.\//, '')
+            .replace(/^dist\/esm\//, '')
+            .replace(/\.d\.ts$/, '');
+
+        const candidates = [`${relative}.tsx`, `${relative}.ts`];
+        const found = candidates.find((candidate) =>
+            existsSync(path.join(root, candidate)),
+        );
+        if (!found) {
+            problems.push(
+                `${subpath}: no source file found for ${typesTarget} (tried ${candidates.join(', ')})`,
+            );
+            continue;
+        }
+
+        const absolute = path.join(root, found);
+        const subpaths = fileToSubpaths.get(absolute) ?? [];
+        subpaths.push(subpath);
+        fileToSubpaths.set(absolute, subpaths);
+    }
+
+    return { fileToSubpaths, problems };
+}
+
+/** Builds a TypeScript program rooted at the given barrel source files. */
+export function buildProgram(root, rootFiles) {
+    const configPath = path.join(root, 'tsconfig.json');
+    const configFile = ts.readConfigFile(configPath, ts.sys.readFile);
+    if (configFile.error) {
+        throw new Error(
+            ts.flattenDiagnosticMessageText(configFile.error.messageText, '\n'),
+        );
+    }
+    const parsed = ts.parseJsonConfigFileContent(configFile.config, ts.sys, root);
+    return ts.createProgram({ rootNames: rootFiles, options: parsed.options });
+}
+
+const isModuleLike = (symbol) =>
+    (symbol.flags & (ts.SymbolFlags.ValueModule | ts.SymbolFlags.NamespaceModule)) !== 0;
+
+/** Resolves an export symbol through any chain of aliases to its real declaration. */
+function resolveAlias(checker, symbol) {
+    let current = symbol;
+    const seen = new Set();
+    while ((current.flags & ts.SymbolFlags.Alias) !== 0 && !seen.has(current)) {
+        seen.add(current);
+        current = checker.getAliasedSymbol(current);
+    }
+    return current;
+}
+
+/** True for members that are themselves reported separately (namespaces) or synthetic. */
+const DECLARATION_KINDS = new Set([
+    ts.SyntaxKind.InterfaceDeclaration,
+    ts.SyntaxKind.TypeAliasDeclaration,
+    ts.SyntaxKind.ClassDeclaration,
+    ts.SyntaxKind.EnumDeclaration,
+    ts.SyntaxKind.FunctionDeclaration,
+    ts.SyntaxKind.VariableDeclaration,
+]);
+
+/**
+ * True when a symbol carries a usable TSDoc comment: either a plain-text summary, or a
+ * JSDoc tag with its own message (most commonly `@deprecated`, used throughout this
+ * package for retained-for-compatibility/no-op props - a `@deprecated` explanation *is*
+ * the documentation for that member, even with no separate summary line above it).
+ */
+function hasDocComment(checker, symbol) {
+    const summary = ts.displayPartsToString(symbol.getDocumentationComment(checker)).trim();
+    if (summary.length > 0) return true;
+    return symbol
+        .getJsDocTags(checker)
+        .some((tag) => ts.displayPartsToString(tag.text ?? []).trim().length > 0);
+}
+
+function locationOf(symbol) {
+    const declaration = symbol.declarations?.[0];
+    if (!declaration) return { file: '<unknown>', line: 0 };
+    const sourceFile = declaration.getSourceFile();
+    const { line } = sourceFile.getLineAndCharacterOfPosition(declaration.getStart());
+    return { file: sourceFile.fileName, line: line + 1 };
+}
+
+/**
+ * Members declared directly on an interface/class/type-literal symbol - deliberately
+ * *not* `checker.getPropertiesOfType`, which also returns members inherited through
+ * `extends`/`Omit<...>` from types this package does not itself declare (and so
+ * cannot annotate). Call/construct signatures have no name and are not part of the
+ * symbol table, so they are skipped without special-casing. Generic type parameters
+ * (e.g. the `T` in `interface CanvasProps<T>`) live in the same symbol table as
+ * properties, so they are explicitly excluded - a type parameter is documented, if at
+ * all, via a `@typeParam` tag on the declaration itself, not as its own member.
+ */
+function ownMembersOf(target) {
+    const members = [];
+    if (target.members) {
+        target.members.forEach((member, name) => {
+            if (typeof name !== 'string' || name.startsWith('__')) return;
+            if ((member.flags & ts.SymbolFlags.TypeParameter) !== 0) return;
+            members.push(member);
+        });
+    }
+    return members;
+}
+
+/**
+ * Walks every reachable exported declaration starting from `rootFile`, calling
+ * `visit(target, path)` once per unique concrete declaration reached (`path` is a
+ * dotted symbol path such as `Canvas.CanvasProps` useful in messages). Namespace-like
+ * re-exports (`export * as X` / `import * as X from './y'; export { X }`) are
+ * followed recursively; each module is only ever expanded once.
+ */
+export function walkReachableExports(checker, program, rootFile, visit) {
+    const visitedModules = new Set();
+    const visitedTargets = new Set();
+
+    const walkModule = (sourceFile, namePath) => {
+        if (visitedModules.has(sourceFile)) return;
+        visitedModules.add(sourceFile);
+
+        const moduleSymbol = checker.getSymbolAtLocation(sourceFile);
+        if (!moduleSymbol) return;
+
+        for (const exported of checker.getExportsOfModule(moduleSymbol)) {
+            if (exported.name === 'default') continue;
+            const target = resolveAlias(checker, exported);
+            const childPath = namePath ? `${namePath}.${exported.name}` : exported.name;
+
+            if (isModuleLike(target)) {
+                const targetSourceFile = target.declarations?.find(ts.isSourceFile);
+                if (targetSourceFile) {
+                    walkModule(targetSourceFile, childPath);
+                    continue;
+                }
+            }
+
+            if (visitedTargets.has(target)) continue;
+            visitedTargets.add(target);
+            visit(target, childPath, exported);
+        }
+    };
+
+    const sourceFile = program.getSourceFile(rootFile);
+    if (!sourceFile) {
+        throw new Error(`Barrel not found in program: ${rootFile}`);
+    }
+    walkModule(sourceFile, '');
+}
+
+/**
+ * Runs the full check against one package root, returning every missing-doc
+ * violation. `fileToSubpaths` comes from {@link resolveBarrelsFromExports}.
+ *
+ * The same declaration is frequently reachable through more than one `exports`
+ * subpath (a namespace re-export at the package root, plus its own direct
+ * subpath) - reachability is therefore collected for every root file first,
+ * merging the name-paths/subpaths seen for each unique declaration, and the
+ * doc-presence check runs once per unique declaration afterward so a gap is
+ * reported exactly once, listing every subpath it is reachable from.
+ */
+export function findMissingDocs(root, fileToSubpaths) {
+    const rootFiles = [...fileToSubpaths.keys()];
+    const program = buildProgram(root, rootFiles);
+    const checker = program.getTypeChecker();
+
+    /** @type {Map<ts.Symbol, { namePaths: Set<string>, subpaths: Set<string> }>} */
+    const reachable = new Map();
+    const record = (target, namePath, subpaths) => {
+        const entry = reachable.get(target) ?? { namePaths: new Set(), subpaths: new Set() };
+        entry.namePaths.add(namePath);
+        for (const subpath of subpaths) entry.subpaths.add(subpath);
+        reachable.set(target, entry);
+    };
+
+    for (const [file, subpaths] of fileToSubpaths) {
+        walkReachableExports(checker, program, file, (target, namePath) => {
+            record(target, namePath, subpaths);
+        });
+    }
+
+    /** Shortest name-path reads best in a message; ties broken alphabetically for determinism. */
+    const primaryNamePath = (namePaths) =>
+        [...namePaths].sort((a, b) => a.length - b.length || a.localeCompare(b))[0];
+
+    const violations = [];
+
+    for (const [target, { namePaths, subpaths }] of reachable) {
+        const hasDeclaration = (target.declarations ?? []).some((declaration) =>
+            DECLARATION_KINDS.has(declaration.kind),
+        );
+        if (!hasDeclaration) continue; // e.g. a plain re-exported value with no local decl kind we track
+
+        const symbol = primaryNamePath(namePaths);
+        const sortedSubpaths = [...subpaths].sort();
+        if (!hasDocComment(checker, target)) {
+            const { file: declFile, line } = locationOf(target);
+            violations.push({
+                subpaths: sortedSubpaths,
+                symbol,
+                file: path.relative(root, declFile),
+                line,
+                reason: 'missing TSDoc comment on the exported declaration',
+            });
+        }
+
+        const isInterfaceLike =
+            (target.flags & ts.SymbolFlags.Interface) !== 0 ||
+            (target.flags & ts.SymbolFlags.TypeAlias) !== 0;
+        if (!isInterfaceLike) continue;
+
+        for (const member of ownMembersOf(target)) {
+            if (hasDocComment(checker, member)) continue;
+            const { file: declFile, line } = locationOf(member);
+            violations.push({
+                subpaths: sortedSubpaths,
+                symbol: `${symbol}.${member.name}`,
+                file: path.relative(root, declFile),
+                line,
+                reason: 'missing TSDoc comment on the member',
+            });
+        }
+    }
+
+    violations.sort((a, b) => a.file.localeCompare(b.file) || a.line - b.line);
+    return violations;
+}
+
+// ---------------------------------------------------------------------------
+// Self-tests - deterministic fixture-based regression checks for the walker
+// and doc-presence logic above. Run by default before the real check so a
+// change that silently breaks reachability analysis (and would otherwise let
+// every finding go to zero for the wrong reason) is caught first.
+// ---------------------------------------------------------------------------
+
+function makeFixture(files) {
+    const dir = mkdtempSync(path.join(tmpdir(), 'cratis-verify-api-docs-'));
+    for (const [relative, content] of Object.entries(files)) {
+        const absolute = path.join(dir, relative);
+        mkdirSync(path.dirname(absolute), { recursive: true });
+        writeFileSync(absolute, content, 'utf8');
+    }
+    return dir;
+}
+
+const FIXTURE_TSCONFIG = JSON.stringify({
+    compilerOptions: {
+        module: 'ES2022',
+        moduleResolution: 'bundler',
+        target: 'ES2022',
+        strict: false,
+        skipLibCheck: true,
+        declaration: true,
+        jsx: 'react-jsx',
+    },
+});
+
+function assert(condition, message) {
+    if (!condition) throw new Error(`Self-test failed: ${message}`);
+}
+
+function selfTestUndocumentedIsFlagged() {
+    const dir = makeFixture({
+        'tsconfig.json': FIXTURE_TSCONFIG,
+        'Widget/index.ts': `export interface WidgetProps {\n    label: string;\n}\n`,
+    });
+    try {
+        const { fileToSubpaths, problems } = resolveBarrelsFromExports(
+            {
+                name: '@fixture/pkg',
+                exports: {
+                    './Widget': {
+                        types: './dist/esm/Widget/index.d.ts',
+                        import: './dist/esm/Widget/index.js',
+                    },
+                },
+            },
+            dir,
+        );
+        assert(problems.length === 0, `unexpected resolution problems: ${problems}`);
+        const violations = findMissingDocs(dir, fileToSubpaths);
+        assert(
+            violations.some((v) => v.symbol === 'WidgetProps'),
+            'expected WidgetProps (undocumented interface) to be flagged',
+        );
+        assert(
+            violations.some((v) => v.symbol === 'WidgetProps.label'),
+            'expected WidgetProps.label (undocumented member) to be flagged',
+        );
+    } finally {
+        rmSync(dir, { recursive: true, force: true });
+    }
+}
+
+function selfTestDocumentedPasses() {
+    const dir = makeFixture({
+        'tsconfig.json': FIXTURE_TSCONFIG,
+        'Widget/index.ts':
+            '/** Props for the Widget. */\nexport interface WidgetProps {\n    /** The label. */\n    label: string;\n}\n',
+    });
+    try {
+        const { fileToSubpaths } = resolveBarrelsFromExports(
+            {
+                name: '@fixture/pkg',
+                exports: {
+                    './Widget': {
+                        types: './dist/esm/Widget/index.d.ts',
+                        import: './dist/esm/Widget/index.js',
+                    },
+                },
+            },
+            dir,
+        );
+        const violations = findMissingDocs(dir, fileToSubpaths);
+        assert(
+            violations.length === 0,
+            `expected no violations for a fully documented barrel, got: ${JSON.stringify(violations)}`,
+        );
+    } finally {
+        rmSync(dir, { recursive: true, force: true });
+    }
+}
+
+function selfTestUnreachableLocalExportIsIgnored() {
+    const dir = makeFixture({
+        'tsconfig.json': FIXTURE_TSCONFIG,
+        'Widget/index.ts':
+            "/** Props for the Widget. */\nexport interface WidgetProps {\n    /** The label. */\n    label: string;\n}\nexport { formatLabel } from './internal';\n",
+        'Widget/internal.ts':
+            '// No barrel re-exports this - relative-import-only helper.\nexport const helperNeverReExported = (x: string): string => x;\n',
+    });
+    try {
+        const { fileToSubpaths } = resolveBarrelsFromExports(
+            {
+                name: '@fixture/pkg',
+                exports: {
+                    './Widget': {
+                        types: './dist/esm/Widget/index.d.ts',
+                        import: './dist/esm/Widget/index.js',
+                    },
+                },
+            },
+            dir,
+        );
+        const violations = findMissingDocs(dir, fileToSubpaths);
+        assert(
+            !violations.some((v) => v.symbol === 'helperNeverReExported'),
+            'a helper not re-exported by any barrel must never be flagged',
+        );
+    } finally {
+        rmSync(dir, { recursive: true, force: true });
+    }
+}
+
+function selfTestNamespaceReExportIsFollowedAndDeduped() {
+    const dir = makeFixture({
+        'tsconfig.json': FIXTURE_TSCONFIG,
+        'index.ts':
+            "import * as Widget from './Widget';\nexport { Widget };\n",
+        'Widget/index.ts': 'export interface WidgetProps {\n    label: string;\n}\n',
+    });
+    try {
+        const { fileToSubpaths } = resolveBarrelsFromExports(
+            {
+                name: '@fixture/pkg',
+                exports: {
+                    '.': {
+                        types: './dist/esm/index.d.ts',
+                        import: './dist/esm/index.js',
+                    },
+                    './Widget': {
+                        types: './dist/esm/Widget/index.d.ts',
+                        import: './dist/esm/Widget/index.js',
+                    },
+                },
+            },
+            dir,
+        );
+        const violations = findMissingDocs(dir, fileToSubpaths);
+        const widgetPropsViolations = violations.filter(
+            (v) => v.symbol === 'WidgetProps' || v.symbol === 'Widget.WidgetProps',
+        );
+        assert(
+            widgetPropsViolations.length === 1,
+            `expected the namespace re-export to be followed and deduplicated with the direct subpath, got ${widgetPropsViolations.length}: ${JSON.stringify(widgetPropsViolations)}`,
+        );
+    } finally {
+        rmSync(dir, { recursive: true, force: true });
+    }
+}
+
+const SELF_TESTS = [
+    ['flags an undocumented interface and member', selfTestUndocumentedIsFlagged],
+    ['passes a fully documented barrel', selfTestDocumentedPasses],
+    ['ignores an unreachable local export', selfTestUnreachableLocalExportIsIgnored],
+    [
+        'follows and dedupes a namespace re-export',
+        selfTestNamespaceReExportIsFollowedAndDeduped,
+    ],
+];
+
+function runSelfTests() {
+    let failures = 0;
+    for (const [name, test] of SELF_TESTS) {
+        try {
+            test();
+            console.log(`  ok - ${name}`);
+        } catch (error) {
+            failures++;
+            console.error(`  FAIL - ${name}`);
+            console.error(`    ${error instanceof Error ? error.message : error}`);
+        }
+    }
+    return failures === 0;
+}
+
+// ---------------------------------------------------------------------------
+// CLI
+// ---------------------------------------------------------------------------
+
+/** Reads and parses Source/package.json, exiting with an actionable message on failure. */
+function readPackageManifest() {
+    const pkgPath = path.join(packageDir, 'package.json');
+    let raw;
+    try {
+        raw = readFileSync(pkgPath, 'utf8');
+    } catch (error) {
+        const detail = error instanceof Error ? error.message : String(error);
+        console.error(`Could not read ${pkgPath}: ${detail}`);
+        process.exit(1);
+    }
+    try {
+        return JSON.parse(raw);
+    } catch (error) {
+        const detail = error instanceof Error ? error.message : String(error);
+        console.error(`Could not parse ${pkgPath} as JSON: ${detail}`);
+        process.exit(1);
+    }
+}
+
+/** Runs the real reachable-exports doc check and exits non-zero on any finding. */
+function runRealCheck() {
+    const pkg = readPackageManifest();
+    const { fileToSubpaths, problems } = resolveBarrelsFromExports(pkg, packageDir);
+
+    if (problems.length > 0) {
+        console.error('Could not resolve every exports map entry to a source file:');
+        for (const problem of problems) console.error(`  - ${problem}`);
+        process.exit(1);
+    }
+
+    console.log(
+        `Checking ${fileToSubpaths.size} barrel(s) covering ${[...fileToSubpaths.values()].flat().length} JS export subpath(s) for missing TSDoc...\n`,
+    );
+
+    const violations = findMissingDocs(packageDir, fileToSubpaths);
+
+    if (violations.length === 0) {
+        console.log('Every reachable public declaration and member has a TSDoc comment.');
+        return;
+    }
+
+    console.error(`${violations.length} public API doc gap(s) found:\n`);
+    for (const violation of violations) {
+        console.error(`  ${violation.file}:${violation.line}  ${violation.symbol}`);
+        console.error(`    ${violation.reason}`);
+        console.error(`    reachable via: ${violation.subpaths.join(', ')}`);
+    }
+    console.error(
+        '\nAdd a TSDoc comment (defaults, units, ownership, callback timing, accessibility, etc. as relevant) to each symbol above.',
+    );
+    process.exit(1);
+}
+
+function main() {
+    const args = new Set(process.argv.slice(2));
+
+    if (!args.has('--skip-self-test')) {
+        console.log('Running verify-api-docs self-tests...');
+        const selfTestsPassed = runSelfTests();
+        if (!selfTestsPassed) {
+            console.error(
+                '\nSelf-tests failed - refusing to trust the reachability/doc-presence walk. Fix the script before relying on its findings.',
+            );
+            process.exit(1);
+        }
+        console.log('Self-tests passed.\n');
+    }
+
+    if (args.has('--self-test-only')) {
+        return;
+    }
+
+    runRealCheck();
+}
+
+const isMainModule = process.argv[1] === fileURLToPath(import.meta.url);
+if (isMainModule) {
+    main();
+}
diff --git a/Source/types/JsonSchema.ts b/Source/types/JsonSchema.ts
index f3e8da04..05c2f1f2 100644
--- a/Source/types/JsonSchema.ts
+++ b/Source/types/JsonSchema.ts
@@ -1,35 +1,74 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
+/**
+ * A JSON Schema document or fragment shape.
+ * Represents a reusable schema definition consumed by {@link SchemaEditor} and {@link ObjectContentEditor}.
+ */
 export interface JsonSchema {
+    /** Human-readable title for this schema. */
     title?: string;
+    /** Name of the schema or type being defined. */
     name?: string;
+    /** Unique identifier URI for this schema (e.g. "https://example.com/schemas/person.json"). */
     $id?: string;
+    /** Reference to another schema definition (URI fragment or external reference). */
     $ref?: string;
+    /** JSON Schema type ("string", "number", "integer", "boolean", "object", "array", "null"). */
     type?: string;
+    /** Format hint for the type (e.g. "date-time", "guid", "email"). */
     format?: string;
+    /** Human-readable description of this schema. */
     description?: string;
+    /** Object property definitions (when `type` is "object"). */
     properties?: Record<string, JsonSchemaProperty>;
+    /** Array item schema (when `type` is "array"). */
     items?: JsonSchema;
+    /** List of required property names (when `type` is "object"). */
     required?: string[];
+    /** Named schema definitions reusable via `$ref`. */
     definitions?: Record<string, JsonSchema>;
 }
 
+/**
+ * A property definition within a JSON Schema object.
+ * Describes one field's type, format, nested structure, and validation constraints.
+ */
 export interface JsonSchemaProperty {
+    /** Unique identifier for this property. */
     id?: string;
+    /** Property name (key in the parent object). */
     name?: string;
+    /** JSON Schema type ("string", "number", "integer", "boolean", "object", "array", "null"). */
     type?: string;
+    /** Format hint for the type (e.g. "date-time", "guid", "email"). */
     format?: string;
+    /** Human-readable description of this property. */
     description?: string;
+    /** Array item schema (when `type` is "array"). */
     items?: JsonSchema;
+    /** Nested object property definitions (when `type` is "object"). */
     properties?: Record<string, JsonSchemaProperty>;
+    /** Whether this property is required in its parent object. */
     required?: boolean;
+    /** Reference to another schema definition (URI fragment or external reference). */
     $ref?: string;
 }
 
+/**
+ * A breadcrumb or navigation-path entry representing one step in a navigable hierarchy.
+ * Used by {@link SchemaEditor}, {@link ObjectContentEditor}, and {@link ObjectNavigationalBar}
+ * to show the current location within a nested JSON schema or object structure.
+ */
 export interface NavigationItem {
+    /** User-facing name of this navigation step (e.g. a property name or "items"). */
     name: string;
+    /** Ordered list of property keys from the root to this step (e.g. ["address", "street"]). */
     path: string[];
 }
 
+/**
+ * A recursive JSON value type: primitive, array, or object.
+ * Represents any valid JSON structure (string | number | boolean | null | Json[] | { [key: string]: Json }).
+ */
 export type Json = string | number | boolean | null | Json[] | { [key: string]: Json };
diff --git a/Source/types/TypeFormat.ts b/Source/types/TypeFormat.ts
index b26fe775..6fa15d76 100644
--- a/Source/types/TypeFormat.ts
+++ b/Source/types/TypeFormat.ts
@@ -1,11 +1,22 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
+/**
+ * A JSON Schema type-and-format pair.
+ * Maps a JSON type (e.g. "string", "integer") to an optional format specifier (e.g. "guid", "date-time").
+ */
 export interface TypeFormat {
+    /** JSON Schema type ("string", "number", "integer", "boolean", "object", "array", "null"). */
     jsonType: string;
+    /** Optional format specifier refining the type (e.g. "guid", "date-time", "int32", "double"). Empty string for no format. */
     format: string;
 }
 
+/**
+ * Default JSON type-to-format mapping table.
+ * This is a value contract other code can reference or extend, not just an internal default.
+ * Consumed by {@link SchemaEditor} and {@link ObjectContentEditor} to populate type/format dropdowns.
+ */
 export const DEFAULT_TYPE_FORMATS: TypeFormat[] = [
     { jsonType: 'string', format: '' },
     { jsonType: 'string', format: 'guid' },

From 3f9d10279ddd7e1885e9534e5c0678623504e5cc Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Mon, 24 Aug 2026 23:37:55 +0200
Subject: [PATCH 036/267] Preserve CommandStepper validation flow during
 extraction

---
 Source/CommandDialog/CommandStepper.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/Source/CommandDialog/CommandStepper.tsx b/Source/CommandDialog/CommandStepper.tsx
index b95c413f..e00f755e 100644
--- a/Source/CommandDialog/CommandStepper.tsx
+++ b/Source/CommandDialog/CommandStepper.tsx
@@ -1,11 +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 React, {
-    useState,
-    type ButtonHTMLAttributes,
-    type HTMLAttributes,
-} from 'react';
+import React, { useState, type ButtonHTMLAttributes, type HTMLAttributes } from 'react';
 import type { ICommandResult } from '@cratis/arc/commands';
 import {
     CommandForm,

From d2ed3ebc3922ddaa81c7f72d8e02da5ec4315856 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Mon, 24 Aug 2026 23:38:25 +0200
Subject: [PATCH 037/267] Restore CommandStepper validation branch order

---
 Source/CommandDialog/CommandStepper.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/Source/CommandDialog/CommandStepper.tsx b/Source/CommandDialog/CommandStepper.tsx
index e00f755e..d844790a 100644
--- a/Source/CommandDialog/CommandStepper.tsx
+++ b/Source/CommandDialog/CommandStepper.tsx
@@ -190,10 +190,10 @@ const CommandStepperWrapper = <TCommand extends object, TResponse = object>({
         }
 
         if (!result.isSuccess) {
-            if (result.isValid) {
-                await onFailed?.(result);
-            } else {
+            if (!result.isValid) {
                 await onValidationFailure?.(result.validationResults);
+            } else {
+                await onFailed?.(result);
             }
             setCommandResult(result);
             return;

From 25a6ab4c22bacbc3eef772d1d2403e6297cec769 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Mon, 24 Aug 2026 23:43:27 +0200
Subject: [PATCH 038/267] Verify packed public types under TypeScript 6

---
 .github/workflows/javascript-build.yml        |  48 ++
 Documentation/migration.md                    |  22 +-
 Documentation/ui-foundation.md                |  23 +-
 Source/MIGRATION.md                           |  24 +-
 Source/package.json                           |   1 +
 .../verify-public-types.exceptions.json       | 136 ++++
 Source/scripts/verify-public-types.mjs        | 624 ++++++++++++++++++
 7 files changed, 854 insertions(+), 24 deletions(-)
 create mode 100644 Source/scripts/verify-public-types.exceptions.json
 create mode 100644 Source/scripts/verify-public-types.mjs

diff --git a/.github/workflows/javascript-build.yml b/.github/workflows/javascript-build.yml
index 03116e21..f2848351 100644
--- a/.github/workflows/javascript-build.yml
+++ b/.github/workflows/javascript-build.yml
@@ -127,6 +127,54 @@ jobs:
               working-directory: Source
               run: node scripts/verify-exports.mjs
 
+    # Verifies every public JS subpath's declarations against a strict external TypeScript 6
+    # consumer of the packed artifact. Bounded upstream exceptions live in
+    # Source/scripts/verify-public-types.exceptions.json; any Components-owned or otherwise
+    # unlisted diagnostic fails this job, as does an exception that stops reproducing.
+    verify-public-types:
+        runs-on: ubuntu-latest
+
+        steps:
+            - name: Checkout code
+              uses: actions/checkout@v4
+
+            - name: Setup node
+              uses: actions/setup-node@v4
+              with:
+                  node-version: 23.x
+                  registry-url: 'https://registry.npmjs.org'
+
+            - uses: actions/cache@v4
+              id: yarn-cache
+              with:
+                  path: |
+                      .yarn/cache
+                      **/node_modules
+                      **/.eslintcache
+                      **/yarn.lock
+                  key: ${{ runner.os }}-yarn-${{ hashFiles('**/package.json') }}
+
+            - name: Yarn install
+              run: yarn
+
+            - name: Build the published artifact
+              working-directory: Source
+              run: |
+                  export NODE_OPTIONS="--max-old-space-size=4096"
+                  yarn run prepare
+
+            - name: Verify public types
+              working-directory: Source
+              run: node scripts/verify-public-types.mjs --report "${{ runner.temp }}/verify-public-types-report.json"
+
+            - name: Upload verify-public-types report
+              if: always()
+              uses: actions/upload-artifact@v4
+              with:
+                  name: verify-public-types-report
+                  path: ${{ runner.temp }}/verify-public-types-report.json
+                  if-no-files-found: ignore
+
     verify-arc-consumers:
         runs-on: ubuntu-latest
         strategy:
diff --git a/Documentation/migration.md b/Documentation/migration.md
index 14e1fe45..4bb95f5e 100644
--- a/Documentation/migration.md
+++ b/Documentation/migration.md
@@ -146,16 +146,16 @@ This removes the old product-token → Prime preset → Prime variable → Crati
 
 An audit of the published `exports` map ([#173](https://github.com/Cratis/Components/issues/173)) found implementation-only symbols that were unintentionally reachable from a public subpath — each was exported only because the owning module's barrel used a blanket `export *`, not because it was a supported contract. Components 4 stops re-exporting them from their public barrel; the underlying files keep the symbol for their own internal cross-file use, so this is a package-export change only, not a behavior change.
 
-| Removed export                                                | Subpath(s)                                                       | Migration                                                                                            |
-| -------------------------------------------------------------- | ------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------- |
-| `CommandStepperContent`                                        | `@cratis/components/CommandStepper`, `@cratis/components/CommandDialog` | Private rendering primitive behind `CommandStepper` and `StepperCommandDialog`. Use one of those components; there is no direct public replacement. |
-| `PivotViewerOptimized`                                         | `@cratis/components/PivotViewer`                                   | Was an accidental alias of `PivotViewer`. Import `PivotViewer` instead.                                |
-| `getInitials`                                                  | `@cratis/components/Canvas`                                        | Private `PersonAvatarCircle` helper. Not part of the public API.                                       |
-| `findOwnReaction`, `reactionsExcludingUser`                    | `@cratis/components/Canvas`                                        | Private `ChatMessageBubble` helpers. Not part of the public API.                                       |
-| `matchCandidates`, `activeMentionQuery`, `applyMention`, `MentionApplied` | `@cratis/components/Canvas`                               | Private `ChatComposer` mention helpers. Not part of the public API.                                    |
-| `EMOJI_CATALOG`, `EmojiCategoryKey`                             | `@cratis/components/Canvas`                                        | Private `EmojiPicker` implementation details. Not part of the public API.                              |
-| `DEFAULT_EMOJIS`, `QUICK_ROW_SIZE`                              | `@cratis/components/Canvas`                                        | Private `recentEmojis`/`rememberEmoji` constants. Not part of the public API.                          |
-| `buildFilterValues`, `buildRangeValues`, `RenderedHistogramBucket` | `@cratis/components/Filter`                                      | Private `useFilterState`/`RangeHistogramFilter` helpers. Not part of the public API.                   |
+| Removed export                                                            | Subpath(s)                                                              | Migration                                                                                                                                           |
+| ------------------------------------------------------------------------- | ----------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `CommandStepperContent`                                                   | `@cratis/components/CommandStepper`, `@cratis/components/CommandDialog` | Private rendering primitive behind `CommandStepper` and `StepperCommandDialog`. Use one of those components; there is no direct public replacement. |
+| `PivotViewerOptimized`                                                    | `@cratis/components/PivotViewer`                                        | Was an accidental alias of `PivotViewer`. Import `PivotViewer` instead.                                                                             |
+| `getInitials`                                                             | `@cratis/components/Canvas`                                             | Private `PersonAvatarCircle` helper. Not part of the public API.                                                                                    |
+| `findOwnReaction`, `reactionsExcludingUser`                               | `@cratis/components/Canvas`                                             | Private `ChatMessageBubble` helpers. Not part of the public API.                                                                                    |
+| `matchCandidates`, `activeMentionQuery`, `applyMention`, `MentionApplied` | `@cratis/components/Canvas`                                             | Private `ChatComposer` mention helpers. Not part of the public API.                                                                                 |
+| `EMOJI_CATALOG`, `EmojiCategoryKey`                                       | `@cratis/components/Canvas`                                             | Private `EmojiPicker` implementation details. Not part of the public API.                                                                           |
+| `DEFAULT_EMOJIS`, `QUICK_ROW_SIZE`                                        | `@cratis/components/Canvas`                                             | Private `recentEmojis`/`rememberEmoji` constants. Not part of the public API.                                                                       |
+| `buildFilterValues`, `buildRangeValues`, `RenderedHistogramBucket`        | `@cratis/components/Filter`                                             | Private `useFilterState`/`RangeHistogramFilter` helpers. Not part of the public API.                                                                |
 
 None of these had a documented contract, and none is required by any other public API in this package. An application that imported one of these directly has no supported replacement to migrate to — inline the equivalent logic, or open an issue describing the use case if the behavior should become a supported public contract.
 
@@ -573,4 +573,6 @@ Complete PrimeIcons class strings remain usable where a component accepts the pu
 7. Verify light, dark, forced-colors, reduced-motion, and responsive layouts.
 8. Run TypeScript, specs, Storybook, and the production build.
 
+A TypeScript 6 application using `skipLibCheck: false` may see bounded upstream diagnostics from Pixi's `@webgpu/types` collision with TypeScript's built-in WebGPU declarations, from `@cratis/arc.react`'s published global JSX declarations, or under NodeNext from extensionless declaration imports in the current Arc and Fundamentals packages. Components validates every packed subpath without suppressing these diagnostics; exact versions, codes, affected subpaths, and removal conditions are documented under [Strict public-type validation](ui-foundation.md#strict-public-type-validation) and tracked in [#176](https://github.com/Cratis/Components/issues/176).
+
 For the decision, trade-offs, and validation gates, read [UI foundation](ui-foundation.md). For the older 2.x → 3.x PrimeReact migration, see [Migrate from Components 2 to 3](migration-from-2.md).
diff --git a/Documentation/ui-foundation.md b/Documentation/ui-foundation.md
index 4dd8e34e..21678227 100644
--- a/Documentation/ui-foundation.md
+++ b/Documentation/ui-foundation.md
@@ -78,15 +78,31 @@ The transition was deliberately split:
 
 The stabilization specs are the behavior parity contract for Components 4.
 
+## Strict public-type validation
+
+Components 4 validates every public JavaScript subpath as a strict external TypeScript 6 consumer of the actual packed artifact. Run `yarn workspace @cratis/components verify-public-types` after building the package. The verifier creates isolated Bundler and NodeNext fixtures with `skipLibCheck: false`, confirms that TypeScript resolved declarations from the fresh archive rather than source or stale output, and emits a machine-readable report when requested.
+
+Known upstream failures are bounded in `Source/scripts/verify-public-types.exceptions.json`. Each exception names exact package versions, diagnostic codes, affected subpaths and resolution modes, and an objective removal condition. Unlisted diagnostics, any diagnostic in Components-owned declarations, a TypeScript-version mismatch, or an exception that stops reproducing all fail the gate.
+
+The current exceptions are:
+
+- **`@webgpu/types@0.1.72` through `pixi.js@8.20.0`:** its ambient WebGPU declarations conflict with TypeScript 6's built-in DOM declarations for the root and `Canvas` subpaths (`TS2403`, `TS2687`, `TS2717`, `TS6200`).
+- **`@cratis/arc.react@22.1.0`:** its published global JSX declarations expose unresolved identifiers in strict external Bundler consumers of command/dialog subpaths (`TS2503`).
+- **`@cratis/arc@22.1.0`, `@cratis/arc.react@22.1.0`, and `@cratis/fundamentals@7.18.1`:** their published ESM declarations use extensionless relative specifiers rejected by NodeNext, with missing-export cascades (`TS2834`, `TS2835`, `TS2305`, `TS2694`). Components' own declaration rewrite emits explicit extensions.
+
+### Why the Canvas Pixi surface remains public
+
+`CanvasContext`, `renderItem`, and pointer callbacks intentionally expose real Pixi objects so consumers can build arbitrary Pixi content. Replacing those types with reduced Cratis facades would either duplicate Pixi's API or force consumers to cast back to it. The bounded WebGPU declaration exception is preferable to weakening this intentional extensibility contract. PivotViewer does not expose Pixi types publicly and needs no equivalent exception.
+
 ## Tracked follow-up work
 
 Components 4 deliberately does not pretend every adjacent problem is solved by this renderer change:
 
 - [#109](https://github.com/Cratis/Components/issues/109) tracks a future Arc React query/table state binding, to be extracted only after another renderer proves the contract.
-- [#159](https://github.com/Cratis/Components/issues/159) remains open for explicit complete-result filtering and sorting through server query arguments before paging. The deprecated `clientFiltering` compatibility prop is not that solution.
-- [#173](https://github.com/Cratis/Components/issues/173) tracks a package-export-driven audit and TSDoc/API-reference coverage. Existing root namespaces are intentionally retained for Components 4 consumer compatibility; any future export removal requires explicit consumer evidence and an appropriate major boundary.
-- [#174](https://github.com/Cratis/Components/issues/174) tracks typed provider messages for the remaining Components-owned labels.
+- [#178](https://github.com/Cratis/Components/issues/178) tracks explicit complete-result filtering and sorting through server query arguments before paging. The deprecated `clientFiltering` compatibility prop is not that solution.
+- [#174](https://github.com/Cratis/Components/issues/174) tracks localization beyond the pre-stable provider-message tranche, including generated labels and plural/relative text.
 - [#175](https://github.com/Cratis/Components/issues/175) tracks a locale-aware number input so products can remove specialized Prime inputs without losing number UX.
+- [#179](https://github.com/Cratis/Components/issues/179) tracks the exact-artifact downstream RC runtime and visual pilots required before stable release.
 
 These are follow-up contracts, not undocumented work required to use the Components 4 foundation.
 
@@ -100,5 +116,6 @@ Components 4 is accepted only when:
 - Representative custom-theme and pass-through consumers compile after following the guide.
 - Specs, Storybook, package exports, SSR, keyboard/focus behavior, responsive layouts, dark mode, forced colors, and reduced motion pass.
 - The migration guide works without repository-specific knowledge.
+- Every packed public JavaScript subpath passes strict TypeScript 6 validation or matches a bounded machine-readable upstream exception whose removal condition is still unmet.
 
 Track acceptance evidence in [the UI foundation issue](https://github.com/Cratis/Components/issues/170).
diff --git a/Source/MIGRATION.md b/Source/MIGRATION.md
index f9acc4fb..b56d856a 100644
--- a/Source/MIGRATION.md
+++ b/Source/MIGRATION.md
@@ -143,16 +143,16 @@ This removes the old product-token → Prime preset → Prime variable → Crati
 
 An audit of the published `exports` map ([#173](https://github.com/Cratis/Components/issues/173)) found implementation-only symbols that were unintentionally reachable from a public subpath — each was exported only because the owning module's barrel used a blanket `export *`, not because it was a supported contract. Components 4 stops re-exporting them from their public barrel; the underlying files keep the symbol for their own internal cross-file use, so this is a package-export change only, not a behavior change.
 
-| Removed export                                                | Subpath(s)                                                       | Migration                                                                                            |
-| -------------------------------------------------------------- | ------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------- |
-| `CommandStepperContent`                                        | `@cratis/components/CommandStepper`, `@cratis/components/CommandDialog` | Private rendering primitive behind `CommandStepper` and `StepperCommandDialog`. Use one of those components; there is no direct public replacement. |
-| `PivotViewerOptimized`                                         | `@cratis/components/PivotViewer`                                   | Was an accidental alias of `PivotViewer`. Import `PivotViewer` instead.                                |
-| `getInitials`                                                  | `@cratis/components/Canvas`                                        | Private `PersonAvatarCircle` helper. Not part of the public API.                                       |
-| `findOwnReaction`, `reactionsExcludingUser`                    | `@cratis/components/Canvas`                                        | Private `ChatMessageBubble` helpers. Not part of the public API.                                       |
-| `matchCandidates`, `activeMentionQuery`, `applyMention`, `MentionApplied` | `@cratis/components/Canvas`                               | Private `ChatComposer` mention helpers. Not part of the public API.                                    |
-| `EMOJI_CATALOG`, `EmojiCategoryKey`                             | `@cratis/components/Canvas`                                        | Private `EmojiPicker` implementation details. Not part of the public API.                              |
-| `DEFAULT_EMOJIS`, `QUICK_ROW_SIZE`                              | `@cratis/components/Canvas`                                        | Private `recentEmojis`/`rememberEmoji` constants. Not part of the public API.                          |
-| `buildFilterValues`, `buildRangeValues`, `RenderedHistogramBucket` | `@cratis/components/Filter`                                      | Private `useFilterState`/`RangeHistogramFilter` helpers. Not part of the public API.                   |
+| Removed export                                                            | Subpath(s)                                                              | Migration                                                                                                                                           |
+| ------------------------------------------------------------------------- | ----------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `CommandStepperContent`                                                   | `@cratis/components/CommandStepper`, `@cratis/components/CommandDialog` | Private rendering primitive behind `CommandStepper` and `StepperCommandDialog`. Use one of those components; there is no direct public replacement. |
+| `PivotViewerOptimized`                                                    | `@cratis/components/PivotViewer`                                        | Was an accidental alias of `PivotViewer`. Import `PivotViewer` instead.                                                                             |
+| `getInitials`                                                             | `@cratis/components/Canvas`                                             | Private `PersonAvatarCircle` helper. Not part of the public API.                                                                                    |
+| `findOwnReaction`, `reactionsExcludingUser`                               | `@cratis/components/Canvas`                                             | Private `ChatMessageBubble` helpers. Not part of the public API.                                                                                    |
+| `matchCandidates`, `activeMentionQuery`, `applyMention`, `MentionApplied` | `@cratis/components/Canvas`                                             | Private `ChatComposer` mention helpers. Not part of the public API.                                                                                 |
+| `EMOJI_CATALOG`, `EmojiCategoryKey`                                       | `@cratis/components/Canvas`                                             | Private `EmojiPicker` implementation details. Not part of the public API.                                                                           |
+| `DEFAULT_EMOJIS`, `QUICK_ROW_SIZE`                                        | `@cratis/components/Canvas`                                             | Private `recentEmojis`/`rememberEmoji` constants. Not part of the public API.                                                                       |
+| `buildFilterValues`, `buildRangeValues`, `RenderedHistogramBucket`        | `@cratis/components/Filter`                                             | Private `useFilterState`/`RangeHistogramFilter` helpers. Not part of the public API.                                                                |
 
 None of these had a documented contract, and none is required by any other public API in this package. An application that imported one of these directly has no supported replacement to migrate to — inline the equivalent logic, or open an issue describing the use case if the behavior should become a supported public contract.
 
@@ -377,6 +377,8 @@ Complete PrimeIcons class strings remain usable where a component accepts `Icon`
 7. Verify light, dark, forced-colors, reduced-motion, and responsive layouts.
 8. Run TypeScript, specs, Storybook, and the production build.
 
+A TypeScript 6 application using `skipLibCheck: false` may see bounded upstream diagnostics from Pixi's `@webgpu/types` collision with TypeScript's built-in WebGPU declarations, from `@cratis/arc.react`'s published global JSX declarations, or under NodeNext from extensionless declaration imports in the current Arc and Fundamentals packages. Components validates every packed subpath without suppressing these diagnostics; exact versions, codes, affected subpaths, and removal conditions are documented under the published [UI foundation](https://cratis.io/components/ui-foundation/#strict-public-type-validation) explanation and tracked in [#176](https://github.com/Cratis/Components/issues/176).
+
 For the decision, trade-offs, and validation gates, read the published [UI foundation](https://cratis.io/components/ui-foundation/) explanation. For the older 2.x → 3.x PrimeReact migration, see [Migrate from Components 2 to 3](https://cratis.io/components/migration-from-2/).
 
-Tracked follow-up remains explicit: [#109](https://github.com/Cratis/Components/issues/109) covers a future Arc React table-state binding, [#159](https://github.com/Cratis/Components/issues/159) covers complete-result server filtering before paging, [#173](https://github.com/Cratis/Components/issues/173) covers the package-export/TSDoc audit, [#174](https://github.com/Cratis/Components/issues/174) covers remaining provider-localized labels, and [#175](https://github.com/Cratis/Components/issues/175) covers locale-aware number input. None is silently implemented by a compatibility flag in Components 4.
+Tracked follow-up remains explicit: [#109](https://github.com/Cratis/Components/issues/109) covers a future Arc React table-state binding, [#178](https://github.com/Cratis/Components/issues/178) covers complete-result server filtering before paging, [#174](https://github.com/Cratis/Components/issues/174) covers remaining localization debt, [#175](https://github.com/Cratis/Components/issues/175) covers locale-aware number input, and [#179](https://github.com/Cratis/Components/issues/179) covers downstream RC pilots before stable release. None is silently implemented by a compatibility flag in Components 4.
diff --git a/Source/package.json b/Source/package.json
index 029aa8b2..64a59391 100644
--- a/Source/package.json
+++ b/Source/package.json
@@ -129,6 +129,7 @@
         "verify-exports": "node ./scripts/verify-exports.mjs",
         "verify-package-archive": "node ./scripts/verify-package-archive.mjs",
         "verify-api-docs": "node ./scripts/verify-api-docs.mjs",
+        "verify-public-types": "node ./scripts/verify-public-types.mjs",
         "lint": "yarn g:lint",
         "lint:ci": "yarn g:lint:ci",
         "test": "yarn g:test",
diff --git a/Source/scripts/verify-public-types.exceptions.json b/Source/scripts/verify-public-types.exceptions.json
new file mode 100644
index 00000000..e07ce6b8
--- /dev/null
+++ b/Source/scripts/verify-public-types.exceptions.json
@@ -0,0 +1,136 @@
+{
+    "$comment": "Machine-readable, bounded allow-list for Cratis/Components#176. Every entry names the exact upstream package/version, the diagnostic codes it produces, why it is external to Components, and an objective, checkable removal condition. verify-public-types.mjs refuses to treat an unlisted diagnostic - or a diagnostic whose file does not match filePrefixes - as covered, and fails the run if a listed exception stops reproducing (the removal condition is presumed met and the entry is stale).",
+    "typeScriptVersion": "6.0.3",
+    "trackingIssue": "https://github.com/Cratis/Components/issues/176",
+    "upstreamIssues": [
+        {
+            "id": "pixi-webgpu-types-lib-conflict",
+            "summary": "pixi.js bundles @webgpu/types, whose WebGPU ambient declarations duplicate identifiers TypeScript 6 now ships in lib.dom.d.ts (GPUTextureFormat, GPUDevice, GPUBindGroupDescriptor.entries, ...) with incompatible shapes.",
+            "reason": "external - upstream declaration collision between @webgpu/types (a pixi.js dependency) and TypeScript's own built-in DOM lib; not a Components authoring defect.",
+            "upstreamPackages": [
+                { "name": "@webgpu/types", "version": "0.1.72", "via": "pixi.js@8.20.0" }
+            ],
+            "resolutionModes": ["bundler", "nodenext"],
+            "diagnosticCodes": ["TS2403", "TS2687", "TS2717", "TS6200"],
+            "filePrefixes": ["@webgpu/types/", "typescript/lib/lib.dom.d.ts"],
+            "removalCondition": "pixi.js ships a @webgpu/types release whose WebGPU surface no longer duplicates conflicting global identifiers against the target TypeScript version's lib.dom.d.ts (tracked upstream at https://github.com/pixijs/pixijs and https://github.com/gpuweb/types), OR Components narrows Canvas's public renderItem/CanvasContext contract off raw PIXI.* types without losing the ability to render arbitrary Pixi content (rejected for now - see docs/ui-foundation.md, 'Why the Canvas Pixi surface is not narrowed')."
+        },
+        {
+            "id": "arc-react-global-jsx-namespace",
+            "summary": "@cratis/arc.react ships a global.d.ts that declares `namespace JSX` referencing test-only ambient types (vitest/globals, chai, sinon-chai) as part of its published package instead of scoping that augmentation to its own test build. A strict external consumer that does not also install those test packages cannot resolve the bare `JSX` identifiers arc.react's dialog/command declaration files reference.",
+            "reason": "external - @cratis/arc.react's own shipped .d.ts, not a Components declaration; Components has no `namespace JSX` augmentation of its own.",
+            "upstreamPackages": [{ "name": "@cratis/arc.react", "version": "22.1.0" }],
+            "resolutionModes": ["bundler"],
+            "diagnosticCodes": ["TS2503"],
+            "filePrefixes": ["@cratis/arc.react/"],
+            "removalCondition": "A published @cratis/arc.react release removes (or properly scopes to its own test build) the global `namespace JSX` augmentation in global.d.ts, so `JSX.Element` in its public dialog/command declaration files resolves through @types/react's module-scoped JSX types instead."
+        },
+        {
+            "id": "arc-family-nodenext-extensionless-specifiers",
+            "summary": "@cratis/arc, @cratis/arc.react, and @cratis/fundamentals publish ESM declaration files with extensionless relative specifiers (e.g. `export * from './ICommandScope'`). Node16/NodeNext module resolution requires an explicit extension on relative ECMAScript imports, so these upstream barrels fail under --moduleResolution nodenext; downstream symbols that transit through the broken barrel then read as missing (TS2305/TS2694 cascades).",
+            "reason": "external - the extensionless specifiers live in @cratis/arc, @cratis/arc.react, and @cratis/fundamentals's own published dist, not in Components' declarations. Cratis/Components' own declaration rewrite (this PR) already eliminated Components' extensionless specifiers.",
+            "upstreamPackages": [
+                { "name": "@cratis/arc", "version": "22.1.0" },
+                { "name": "@cratis/arc.react", "version": "22.1.0" },
+                { "name": "@cratis/fundamentals", "version": "7.18.1" }
+            ],
+            "resolutionModes": ["nodenext"],
+            "diagnosticCodes": ["TS2834", "TS2835", "TS2305", "TS2694"],
+            "filePrefixes": [
+                "@cratis/arc/",
+                "@cratis/arc.react/",
+                "@cratis/fundamentals/"
+            ],
+            "messagePatterns": [
+                "@cratis/arc.react",
+                "@cratis/arc/",
+                "@cratis/fundamentals"
+            ],
+            "removalCondition": "Coordinate with @cratis/fundamentals (and @cratis/arc / @cratis/arc.react, which share the same generator/build) to add explicit .js extensions to relative specifiers in published declaration files, per the issue's direction to fix this upstream rather than copy or patch their types in Components."
+        }
+    ],
+    "exceptions": [
+        {
+            "subpath": ".",
+            "resolutionModes": {
+                "bundler": [
+                    "pixi-webgpu-types-lib-conflict",
+                    "arc-react-global-jsx-namespace"
+                ],
+                "nodenext": [
+                    "pixi-webgpu-types-lib-conflict",
+                    "arc-family-nodenext-extensionless-specifiers"
+                ]
+            }
+        },
+        {
+            "subpath": "./Canvas",
+            "resolutionModes": {
+                "bundler": ["pixi-webgpu-types-lib-conflict"],
+                "nodenext": [
+                    "pixi-webgpu-types-lib-conflict",
+                    "arc-family-nodenext-extensionless-specifiers"
+                ]
+            }
+        },
+        {
+            "subpath": "./CommandDialog",
+            "resolutionModes": {
+                "bundler": ["arc-react-global-jsx-namespace"],
+                "nodenext": ["arc-family-nodenext-extensionless-specifiers"]
+            }
+        },
+        {
+            "subpath": "./CommandStepper",
+            "resolutionModes": {
+                "bundler": ["arc-react-global-jsx-namespace"],
+                "nodenext": ["arc-family-nodenext-extensionless-specifiers"]
+            }
+        },
+        {
+            "subpath": "./CommandForm",
+            "resolutionModes": {
+                "bundler": ["arc-react-global-jsx-namespace"],
+                "nodenext": ["arc-family-nodenext-extensionless-specifiers"]
+            }
+        },
+        {
+            "subpath": "./CommandForm/fields",
+            "resolutionModes": {
+                "bundler": ["arc-react-global-jsx-namespace"],
+                "nodenext": ["arc-family-nodenext-extensionless-specifiers"]
+            }
+        },
+        {
+            "subpath": "./Common",
+            "resolutionModes": {
+                "nodenext": ["arc-family-nodenext-extensionless-specifiers"]
+            }
+        },
+        {
+            "subpath": "./DataPage",
+            "resolutionModes": {
+                "nodenext": ["arc-family-nodenext-extensionless-specifiers"]
+            }
+        },
+        {
+            "subpath": "./DataTables",
+            "resolutionModes": {
+                "nodenext": ["arc-family-nodenext-extensionless-specifiers"]
+            }
+        },
+        {
+            "subpath": "./Dialogs",
+            "resolutionModes": {
+                "bundler": ["arc-react-global-jsx-namespace"],
+                "nodenext": ["arc-family-nodenext-extensionless-specifiers"]
+            }
+        },
+        {
+            "subpath": "./Notifications",
+            "resolutionModes": {
+                "nodenext": ["arc-family-nodenext-extensionless-specifiers"]
+            }
+        }
+    ]
+}
diff --git a/Source/scripts/verify-public-types.mjs b/Source/scripts/verify-public-types.mjs
new file mode 100644
index 00000000..abf49d6c
--- /dev/null
+++ b/Source/scripts/verify-public-types.mjs
@@ -0,0 +1,624 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+/*
+ * Verifies that every public JavaScript subpath declared in `exports` of Source/package.json
+ * can be consumed by an *external*, strict (`skipLibCheck: false`) TypeScript 6 project - not
+ * just by Components' own (`skipLibCheck: true`) internal build. Cratis/Components#176.
+ *
+ * What "external" means here: this script `yarn pack`s the real publish artifact (the same
+ * command CI/npm use), extracts it into a scratch `node_modules/@cratis/components`, and creates
+ * one throwaway TypeScript project per subpath that imports nothing but the packed declarations -
+ * mirroring a consumer application. Every dependency the declarations need to resolve (react,
+ * pixi.js, @cratis/arc, @cratis/arc.react, @cratis/fundamentals, ...) is borrowed via symlink from
+ * this monorepo's already-installed node_modules; nothing is fetched from the network.
+ *
+ * Two resolution modes are checked for every subpath: `bundler` (the common consumer setup -
+ * Vite, webpack, esbuild, ...) and `nodenext` (strict Node ESM resolution, where relative
+ * declaration specifiers must carry an explicit extension).
+ *
+ * `skipLibCheck: false` stays on for every fixture - that is the entire point of this script.
+ * A subpath that reproduces a known, external, upstream issue is not silently made to pass by
+ * flipping skipLibCheck; its diagnostics are matched, code-for-code and file-for-file, against
+ * verify-public-types.exceptions.json. An unmatched diagnostic - most importantly, ANY diagnostic
+ * whose file lives under Components' own packed declarations - fails the run. A listed exception
+ * that stops reproducing also fails the run: its removal condition is presumed met, and the
+ * metadata is stale and must be trimmed.
+ *
+ * A type-fidelity assertion accompanies every subpath: the declaration file TypeScript actually
+ * resolved is hashed and compared byte-for-byte against the same member read directly out of the
+ * freshly produced .tgz, and its resolved real path is asserted to sit under this run's scratch
+ * directory (never under Source/ - ruling out source files or the live workspace symlink) and to
+ * report the exact version being published. That is what proves a fixture exercised the packed
+ * release candidate's declarations, not source .tsx, a stale dist/, or another installed version.
+ *
+ * Usage:  node scripts/verify-public-types.mjs [--keep-fixtures] [--only <subpath>] [--report <path>]
+ * Exits non-zero on any FAIL, EXCEPTION_STALE, or fidelity-assertion failure.
+ */
+
+import { spawnSync } from 'node:child_process';
+import { createHash } from 'node:crypto';
+import {
+    copyFileSync,
+    existsSync,
+    mkdirSync,
+    mkdtempSync,
+    readdirSync,
+    readFileSync,
+    realpathSync,
+    rmSync,
+    symlinkSync,
+    writeFileSync,
+} from 'node:fs';
+import { tmpdir } from 'node:os';
+import path from 'node:path';
+import { createRequire } from 'node:module';
+import { fileURLToPath } from 'node:url';
+import { gunzipSync } from 'node:zlib';
+
+const packageDir = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const monorepoRoot = path.resolve(packageDir, '..');
+const scriptsDir = path.join(packageDir, 'scripts');
+
+const args = process.argv.slice(2);
+const keepFixtures = args.includes('--keep-fixtures');
+const onlyIndex = args.indexOf('--only');
+const only = onlyIndex >= 0 ? args[onlyIndex + 1] : undefined;
+const reportIndex = args.indexOf('--report');
+const reportPath = reportIndex >= 0 ? path.resolve(args[reportIndex + 1]) : undefined;
+
+const fail = (message) => {
+    console.error(`\nverify-public-types: ${message}`);
+    process.exit(1);
+};
+
+const readJson = (file) => {
+    try {
+        return JSON.parse(readFileSync(file, 'utf8'));
+    } catch (error) {
+        fail(
+            `Could not read ${file}: ${error instanceof Error ? error.message : String(error)}`,
+        );
+    }
+};
+
+const readNullTerminated = (buffer) => {
+    const end = buffer.indexOf(0);
+    return buffer.subarray(0, end < 0 ? buffer.length : end).toString('utf8');
+};
+
+const readOctal = (buffer) => {
+    const value = readNullTerminated(buffer).trim();
+    return value ? Number.parseInt(value, 8) : 0;
+};
+
+const parsePax = (buffer) => {
+    const values = {};
+    let offset = 0;
+    while (offset < buffer.length) {
+        const separator = buffer.indexOf(0x20, offset);
+        if (separator < 0) break;
+        const length = Number.parseInt(
+            buffer.subarray(offset, separator).toString('ascii'),
+            10,
+        );
+        if (!Number.isFinite(length) || length <= 0) break;
+        const record = buffer
+            .subarray(separator + 1, offset + length - 1)
+            .toString('utf8');
+        const equals = record.indexOf('=');
+        if (equals >= 0) values[record.slice(0, equals)] = record.slice(equals + 1);
+        offset += length;
+    }
+    return values;
+};
+
+/** Reads a gzip-compressed ustar/PAX archive without requiring a platform `tar` executable. */
+const readTarEntries = (archivePath) => {
+    const archive = gunzipSync(readFileSync(archivePath));
+    const entries = new Map();
+    let offset = 0;
+    let longName;
+    let pax = {};
+
+    while (offset + 512 <= archive.length) {
+        const header = archive.subarray(offset, offset + 512);
+        if (header.every((byte) => byte === 0)) break;
+
+        const size = readOctal(header.subarray(124, 136));
+        const type = String.fromCharCode(header[156] || 0);
+        const name = readNullTerminated(header.subarray(0, 100));
+        const prefix = readNullTerminated(header.subarray(345, 500));
+        const dataStart = offset + 512;
+        const data = archive.subarray(dataStart, dataStart + size);
+        offset = dataStart + Math.ceil(size / 512) * 512;
+
+        if (type === 'L') {
+            longName = readNullTerminated(data);
+            continue;
+        }
+        if (type === 'x') {
+            pax = parsePax(data);
+            continue;
+        }
+        if (type === 'g') continue;
+
+        const entryName = pax.path ?? longName ?? (prefix ? `${prefix}/${name}` : name);
+        longName = undefined;
+        pax = {};
+        if ((type === '\0' || type === '0') && entryName) {
+            entries.set(entryName, Buffer.from(data));
+        }
+    }
+    return entries;
+};
+
+const extractPackedArtifact = (entries, destination) => {
+    const packagePrefix = 'package/';
+    for (const [entryName, content] of entries) {
+        if (!entryName.startsWith(packagePrefix)) continue;
+        const relative = entryName.slice(packagePrefix.length);
+        if (!relative) continue;
+        const target = path.resolve(destination, relative);
+        if (!target.startsWith(`${path.resolve(destination)}${path.sep}`)) {
+            fail(`Unsafe archive path '${entryName}'.`);
+        }
+        mkdirSync(path.dirname(target), { recursive: true });
+        writeFileSync(target, content);
+    }
+};
+
+const linkInstalledEntry = (source, destination, directoryEntry) => {
+    if (process.platform === 'win32') {
+        if (directoryEntry.isFile()) copyFileSync(source, destination);
+        else symlinkSync(realpathSync(source), destination, 'junction');
+        return;
+    }
+    symlinkSync(source, destination, directoryEntry.isDirectory() ? 'dir' : 'file');
+};
+
+const pkg = readJson(path.join(packageDir, 'package.json'));
+const exceptions = readJson(path.join(scriptsDir, 'verify-public-types.exceptions.json'));
+
+const esmRoot = path.join(packageDir, path.dirname(pkg.module ?? 'dist/esm/index.js'));
+if (!existsSync(esmRoot)) {
+    fail(
+        `Built output not found at ${esmRoot}. Run the publish build first: ` +
+            '`yarn workspace @cratis/components run prepare`.',
+    );
+}
+
+const require = createRequire(import.meta.url);
+let tscBin;
+try {
+    tscBin = require.resolve('typescript/bin/tsc', { paths: [monorepoRoot] });
+} catch {
+    fail('TypeScript compiler not found. Run `yarn install` at the repo root.');
+}
+const installedTsVersion = spawnSync(process.execPath, [tscBin, '--version'], {
+    encoding: 'utf8',
+})
+    .stdout.trim()
+    .replace(/^Version\s+/, '');
+if (installedTsVersion !== exceptions.typeScriptVersion) {
+    fail(
+        `Installed TypeScript is ${installedTsVersion}, but exceptions metadata was captured ` +
+            `against ${exceptions.typeScriptVersion}. Regenerate and review the strict matrix ` +
+            'before changing the pinned validation version.',
+    );
+}
+
+/** Non-JS export targets (CSS, the manifest itself) - out of scope, verify-exports.mjs covers them. */
+const isAsset = (target) => typeof target === 'string' && /\.(css|json)$/u.test(target);
+
+/** JS subpaths: every `exports` entry whose `types`/`import` targets are `.d.ts`/`.js` files. */
+const jsSubpaths = Object.entries(pkg.exports ?? {})
+    .filter(([subpath]) => subpath !== './package.json')
+    .filter(([, value]) => value && typeof value === 'object')
+    .filter(([, value]) => !isAsset(value.import) && !isAsset(value.types))
+    .filter(
+        ([, value]) =>
+            typeof value.types === 'string' && typeof value.import === 'string',
+    )
+    .map(([subpath, value]) => ({
+        subpath,
+        specifier:
+            subpath === '.' ? pkg.name : `${pkg.name}/${subpath.replace(/^\.\//, '')}`,
+        declarationRelPath: value.types.replace(/^\.\//, ''),
+    }));
+
+if (jsSubpaths.length === 0)
+    fail('No JavaScript subpaths found in `exports` - nothing to verify.');
+
+const selected = only ? jsSubpaths.filter((entry) => entry.subpath === only) : jsSubpaths;
+if (only && selected.length === 0)
+    fail(`--only ${only} does not match any exports subpath.`);
+
+// --- 1. Pack the real publish artifact (same command CI/npm use) ------------------------------
+
+// Resolve immediately: on macOS, os.tmpdir() sits under a symlink (/var -> /private/var), and
+// realpathSync() on files created below would otherwise never equal the un-resolved scratchRoot.
+const scratchRoot = realpathSync(
+    mkdtempSync(path.join(tmpdir(), 'cratis-components-verify-public-types-')),
+);
+let scratchRemoved = false;
+const removeScratch = () => {
+    if (keepFixtures || scratchRemoved) return;
+    scratchRemoved = true;
+    rmSync(scratchRoot, { recursive: true, force: true });
+};
+process.once('exit', removeScratch);
+const tgzPath = path.join(scratchRoot, 'cratis-components.tgz');
+
+console.log(`Packing ${pkg.name}@${pkg.version} ...`);
+const packResult = spawnSync('yarn', ['pack', '--out', tgzPath], {
+    cwd: packageDir,
+    encoding: 'utf8',
+    timeout: 180_000,
+});
+if (packResult.status !== 0) {
+    fail(`\`yarn pack\` failed:\n${packResult.stderr || packResult.stdout}`);
+}
+if (!existsSync(tgzPath)) fail(`\`yarn pack\` did not produce ${tgzPath}.`);
+
+// --- 2. Extract the packed artifact into a scratch node_modules, borrowing every other -------
+//        already-installed dependency by symlink from the monorepo root. No network is used.
+
+const scratchNodeModules = path.join(scratchRoot, 'node_modules');
+mkdirSync(scratchNodeModules, { recursive: true });
+
+const rootNodeModules = path.join(monorepoRoot, 'node_modules');
+if (!existsSync(rootNodeModules)) {
+    fail(
+        `${rootNodeModules} does not exist. Run \`yarn install\` at the repo root first.`,
+    );
+}
+
+for (const entry of readdirSync(rootNodeModules, { withFileTypes: true })) {
+    if (entry.name === '@cratis' || entry.name === '.bin') continue;
+    linkInstalledEntry(
+        path.join(rootNodeModules, entry.name),
+        path.join(scratchNodeModules, entry.name),
+        entry,
+    );
+}
+
+const scratchCratisScope = path.join(scratchNodeModules, '@cratis');
+mkdirSync(scratchCratisScope, { recursive: true });
+const rootCratisScope = path.join(rootNodeModules, '@cratis');
+for (const entry of readdirSync(rootCratisScope, { withFileTypes: true })) {
+    if (entry.name === 'components') continue; // overridden below with the packed artifact.
+    linkInstalledEntry(
+        path.join(rootCratisScope, entry.name),
+        path.join(scratchCratisScope, entry.name),
+        entry,
+    );
+}
+
+// Extracted for real (not symlinked) - this directory *is* the packed artifact under test.
+const packedComponentsDir = path.join(scratchCratisScope, 'components');
+mkdirSync(packedComponentsDir, { recursive: true });
+let tarEntries;
+try {
+    tarEntries = readTarEntries(tgzPath);
+    extractPackedArtifact(tarEntries, packedComponentsDir);
+} catch (error) {
+    fail(
+        `Extracting ${tgzPath} failed: ${error instanceof Error ? error.message : String(error)}`,
+    );
+}
+
+const packedPackageJson = readJson(path.join(packedComponentsDir, 'package.json'));
+if (packedPackageJson.version !== pkg.version) {
+    fail(
+        `Type-fidelity check failed before any subpath ran: the packed artifact reports version ` +
+            `${packedPackageJson.version}, but Source/package.json declares ${pkg.version}.`,
+    );
+}
+
+/** Reads one member's bytes straight out of the .tgz, independent of the extracted copy on disk. */
+const readTarballMember = (relPath) => tarEntries.get(`package/${relPath}`);
+
+const sha256 = (buffer) => createHash('sha256').update(buffer).digest('hex');
+
+// --- 3. Per-subpath, per-mode TypeScript project fixtures -------------------------------------
+
+const modes = ['bundler', 'nodenext'];
+
+const tsconfigFor = (mode) => ({
+    compilerOptions: {
+        target: 'ES2022',
+        module: mode === 'nodenext' ? 'NodeNext' : 'ES2022',
+        moduleResolution: mode === 'nodenext' ? 'NodeNext' : 'bundler',
+        strict: true,
+        skipLibCheck: false,
+        noEmit: true,
+        jsx: 'react-jsx',
+        esModuleInterop: true,
+        lib: ['ESNext', 'DOM', 'DOM.Iterable'],
+    },
+    include: [mode === 'nodenext' ? 'consumer.mts' : 'consumer.ts'],
+});
+
+const sanitize = (subpath) =>
+    subpath === '.' ? 'root' : subpath.replace(/^\.\//, '').replace(/\//g, '_');
+
+/** Parses `file(line,col): error TSxxxx: message` lines and normalizes `file` to a package-relative id. */
+function parseDiagnostics(stdout) {
+    const diagnosticLine = /^(.+?)\((\d+),(\d+)\): error (TS\d+): (.*)$/u;
+    const diagnostics = [];
+    for (const line of stdout.split(/\r?\n/u)) {
+        const match = line.match(diagnosticLine);
+        if (!match) continue;
+        const [, rawFile, lineNo, , code, message] = match;
+        const absolute = path.resolve(rawFile);
+        const marker = `${path.sep}node_modules${path.sep}`;
+        const lastNodeModules = absolute.lastIndexOf(marker);
+        const file =
+            lastNodeModules >= 0
+                ? absolute
+                      .slice(lastNodeModules + marker.length)
+                      .split(path.sep)
+                      .join('/')
+                : path.relative(scratchRoot, absolute).split(path.sep).join('/');
+        diagnostics.push({ code, file, line: Number(lineNo), message });
+    }
+    return diagnostics;
+}
+
+/** Exceptions applicable to one (subpath, mode), expanded to {issueId, codes, filePrefixes}[]. */
+function allowedIssuesFor(subpath, mode) {
+    const entry = exceptions.exceptions.find(
+        (candidate) => candidate.subpath === subpath,
+    );
+    const issueIds = entry?.resolutionModes?.[mode] ?? [];
+    return issueIds.map((id) => {
+        const issue = exceptions.upstreamIssues.find((candidate) => candidate.id === id);
+        if (!issue)
+            fail(`exceptions metadata references unknown upstream issue id '${id}'.`);
+        return issue;
+    });
+}
+
+const results = [];
+const fixturesRoot = path.join(scratchRoot, 'fixtures');
+mkdirSync(fixturesRoot, { recursive: true });
+
+for (const { subpath, specifier, declarationRelPath } of selected) {
+    // --- Type-fidelity assertion: the resolved declaration is the just-packed artifact. --------
+    const resolvedDeclarationPath = path.join(packedComponentsDir, declarationRelPath);
+    const fidelity = { subpath, ok: true, problems: [] };
+    if (existsSync(resolvedDeclarationPath)) {
+        const onDisk = readFileSync(resolvedDeclarationPath);
+        const fromTarball = readTarballMember(declarationRelPath);
+        if (!fromTarball) {
+            fidelity.ok = false;
+            fidelity.problems.push(
+                `could not re-read package/${declarationRelPath} from the .tgz`,
+            );
+        } else if (sha256(onDisk) !== sha256(fromTarball)) {
+            fidelity.ok = false;
+            fidelity.problems.push(
+                'on-disk declaration does not byte-match the .tgz member - resolution did not use ' +
+                    'the packed artifact',
+            );
+        }
+        const realOnDisk = realpathSync(resolvedDeclarationPath);
+        if (realOnDisk.startsWith(packageDir + path.sep)) {
+            fidelity.ok = false;
+            fidelity.problems.push(
+                `resolved real path ${realOnDisk} is under Source/ (source files or the workspace ` +
+                    'symlink), not the packed artifact',
+            );
+        }
+        if (
+            !realOnDisk.startsWith(scratchRoot + path.sep) &&
+            realOnDisk !== resolvedDeclarationPath
+        ) {
+            fidelity.ok = false;
+            fidelity.problems.push(
+                `resolved real path ${realOnDisk} is outside this run's scratch dir`,
+            );
+        }
+    } else {
+        fidelity.ok = false;
+        fidelity.problems.push(`declaration file missing at ${resolvedDeclarationPath}`);
+    }
+
+    for (const mode of modes) {
+        const fixtureDir = path.join(fixturesRoot, `${sanitize(subpath)}-${mode}`);
+        mkdirSync(fixtureDir, { recursive: true });
+        writeFileSync(
+            path.join(fixtureDir, 'tsconfig.json'),
+            JSON.stringify(tsconfigFor(mode), null, 4),
+        );
+        const consumerFile = mode === 'nodenext' ? 'consumer.mts' : 'consumer.ts';
+        writeFileSync(
+            path.join(fixtureDir, consumerFile),
+            `export * from '${specifier}';\n`,
+        );
+        if (mode === 'nodenext') {
+            writeFileSync(
+                path.join(fixtureDir, 'package.json'),
+                JSON.stringify({ private: true, type: 'module' }, null, 4),
+            );
+        }
+
+        const run = spawnSync(
+            process.execPath,
+            [tscBin, '-p', 'tsconfig.json', '--noEmit'],
+            {
+                cwd: fixtureDir,
+                encoding: 'utf8',
+                timeout: 60_000,
+            },
+        );
+        // tsc exits 2 on a fatal config error even with zero reported diagnostics - treat that as
+        // an unparseable failure rather than silently reporting a clean pass.
+        const diagnostics = parseDiagnostics(run.stdout ?? '');
+        if (run.status !== 0 && diagnostics.length === 0) {
+            diagnostics.push({
+                code: 'TS0000',
+                file: 'tsc',
+                line: 0,
+                message: `tsc exited ${run.status} with no parseable diagnostics: ${(run.stderr || run.stdout || '').slice(0, 400)}`,
+            });
+        }
+
+        const allowedIssues = allowedIssuesFor(subpath, mode);
+        // "has no exported member" cascades (TS2305/TS2694) are anchored to the *consuming* file -
+        // often one of Components' own re-exports - even though the root cause is the upstream
+        // barrel's broken extensionless import. messagePatterns lets those cascades match on the
+        // upstream module named in the diagnostic message instead of requiring the file itself to
+        // live under the upstream package.
+        const matchesIssue = (diagnostic, issue) =>
+            issue.diagnosticCodes.includes(diagnostic.code) &&
+            (issue.filePrefixes.some((prefix) => diagnostic.file.startsWith(prefix)) ||
+                (issue.messagePatterns ?? []).some((pattern) =>
+                    diagnostic.message.includes(pattern),
+                ));
+        const isCovered = (diagnostic) =>
+            allowedIssues.some((issue) => matchesIssue(diagnostic, issue));
+
+        const unexpected = diagnostics.filter((diagnostic) => !isCovered(diagnostic));
+        const ownDeclarationRegressions = unexpected.filter((diagnostic) =>
+            diagnostic.file.startsWith('@cratis/components/'),
+        );
+
+        // An exception is stale once none of its codes reproduce anymore for this (subpath, mode).
+        const staleIssues = allowedIssues.filter(
+            (issue) => !diagnostics.some((diagnostic) => matchesIssue(diagnostic, issue)),
+        );
+
+        let status;
+        if (unexpected.length > 0) status = 'FAIL';
+        else if (staleIssues.length > 0) status = 'EXCEPTION_STALE';
+        else if (diagnostics.length > 0) status = 'PASS_WITH_EXCEPTION';
+        else status = 'PASS';
+
+        results.push({
+            subpath,
+            mode,
+            status,
+            diagnosticCodes: [...new Set(diagnostics.map((d) => d.code))],
+            unexpected,
+            ownDeclarationRegressions,
+            staleIssues: staleIssues.map((issue) => issue.id),
+            fixtureDir: path.relative(scratchRoot, fixtureDir),
+        });
+    }
+
+    results.push({
+        subpath,
+        mode: 'fidelity',
+        status: fidelity.ok ? 'PASS' : 'FAIL',
+        fidelity,
+    });
+}
+
+// --- 4. Report -----------------------------------------------------------------------------
+
+console.log(
+    `\nverify-public-types: ${pkg.name}@${pkg.version} against TypeScript ${installedTsVersion}`,
+);
+console.log(`Scratch dir: ${scratchRoot}\n`);
+
+const modeRows = results.filter((row) => row.mode !== 'fidelity');
+const subpathWidth = Math.max(8, ...modeRows.map((row) => row.subpath.length));
+console.log(
+    `${'SUBPATH'.padEnd(subpathWidth)}  ${'FIDELITY'.padEnd(10)}  ${'BUNDLER'.padEnd(20)}  NODENEXT`,
+);
+console.log('-'.repeat(subpathWidth + 50));
+
+let failures = 0;
+for (const { subpath } of selected) {
+    const fidelityRow = results.find(
+        (row) => row.subpath === subpath && row.mode === 'fidelity',
+    );
+    const bundlerRow = results.find(
+        (row) => row.subpath === subpath && row.mode === 'bundler',
+    );
+    const nodenextRow = results.find(
+        (row) => row.subpath === subpath && row.mode === 'nodenext',
+    );
+    console.log(
+        `${subpath.padEnd(subpathWidth)}  ${fidelityRow.status.padEnd(10)}  ${bundlerRow.status.padEnd(20)}  ${nodenextRow.status}`,
+    );
+    for (const row of [fidelityRow, bundlerRow, nodenextRow]) {
+        if (row.status === 'FAIL' || row.status === 'EXCEPTION_STALE') failures++;
+    }
+}
+
+console.log(
+    '\nLegend: PASS (clean) | PASS_WITH_EXCEPTION (matches an allow-listed upstream issue) |',
+);
+console.log(
+    '        FAIL (unexpected/regressed diagnostic) | EXCEPTION_STALE (allow-listed issue no',
+);
+console.log(
+    '        longer reproduces - its removal condition is presumably met; trim the metadata).\n',
+);
+
+for (const row of modeRows) {
+    if (row.status === 'PASS_WITH_EXCEPTION') {
+        console.log(
+            `  ${row.subpath} [${row.mode}] - known-external: ${row.diagnosticCodes.join(', ')}`,
+        );
+    }
+    if (row.status === 'FAIL') {
+        console.log(`  ${row.subpath} [${row.mode}] - FAIL, unexpected diagnostics:`);
+        for (const diagnostic of row.unexpected) {
+            const marker = diagnostic.file.startsWith('@cratis/components/')
+                ? ' <-- Cratis-owned'
+                : '';
+            console.log(
+                `      ${diagnostic.code} ${diagnostic.file}:${diagnostic.line}${marker}`,
+            );
+            console.log(`        ${diagnostic.message.slice(0, 200)}`);
+        }
+        console.log(`      fixture: ${row.fixtureDir}`);
+    }
+    if (row.status === 'EXCEPTION_STALE') {
+        console.log(
+            `  ${row.subpath} [${row.mode}] - EXCEPTION_STALE: ${row.staleIssues.join(', ')} no longer reproduce. ` +
+                'Remove the matching entry from verify-public-types.exceptions.json.',
+        );
+    }
+}
+for (const row of results.filter((r) => r.mode === 'fidelity' && r.status === 'FAIL')) {
+    console.log(`  ${row.subpath} [fidelity] - FAIL:`);
+    for (const problem of row.fidelity.problems) console.log(`      ${problem}`);
+}
+
+const ownRegressions = modeRows.flatMap((row) => row.ownDeclarationRegressions ?? []);
+if (ownRegressions.length > 0) {
+    console.error(
+        `\n${ownRegressions.length} diagnostic(s) originate in Components' OWN packed declarations ` +
+            '(@cratis/components/*). These are never an allowed exception - fix the source.',
+    );
+}
+
+if (reportPath) {
+    writeFileSync(
+        reportPath,
+        JSON.stringify({ package: pkg.name, version: pkg.version, results }, null, 4),
+    );
+    console.log(`\nMachine-readable report written to ${reportPath}`);
+}
+
+if (keepFixtures) {
+    console.log(`\n--keep-fixtures: scratch dir retained at ${scratchRoot}`);
+} else {
+    removeScratch();
+}
+
+if (failures > 0) {
+    console.error(
+        `\n${failures} check(s) failed across ${selected.length} subpath(s). See https://github.com/Cratis/Components/issues/176`,
+    );
+    process.exit(1);
+}
+
+console.log(
+    `\nAll ${selected.length} public JS subpath(s) verified against packed TypeScript 6 declarations.`,
+);

From d9932c43fabe10c54de538cc11418cc059cc5ec7 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Mon, 24 Aug 2026 23:33:14 +0200
Subject: [PATCH 039/267] Expand CratisComponentsMessages and fix owned-label
 bypass defects (#174 pre-stable subset)

Implements the pre-stable subset of #174 for PR #177: fixes confirmed bypass
defects, wires six new provider message groups (prop -> provider -> English
fallback), and adds regression/precedence/sentinel specs. Framework/library
profile change; every existing public prop and its precedence is preserved.

Bypass fixes (Fix 1):
- FilterPanel.tsx: header clear-button "title" hardcoded "Clear filter" /
  "Clear range" next to a correctly-resolved aria-label from the same prop;
  title now mirrors the same value. A searchable filter group with no own
  searchPlaceholder now falls back to the panel-level searchPlaceholder
  prop instead of a second hardcoded "Search..." literal.
- SchemaEditor.tsx: the back-navigation Tooltip's content hardcoded
  "Navigate back" while the same button's aria-label correctly resolved
  labels.navigateBack; both now come from the same source.
- RangeHistogramFilter.tsx: the bar tooltip's unit word ("...42 items") was a
  hardcoded, unoverridable English literal; added itemsLabel (default
  "items").

Dropdown (Fix 2): "Show options" (2 sites) and "Clear selection" (4 sites)
now resolve pt override -> CratisComponentsProvider messages.dropdown ->
English fallback across all six render paths (native/filtered x
single/multiple), preserving per-instance pt overrides.

New provider message groups (Fix 3), each documented with TSDoc and wired
prop -> provider -> English fallback:
- dialog (ok/cancel/yes/no/close) - resolved once in Dialog.tsx, so
  CommandDialog and StepperCommandDialog (which forward these props straight
  through) share the same precedence without duplicating it.
- stepper (next/previous/submit) - CommandStepperContent (shared by
  CommandStepper and StepperCommandDialog) and StepperCommandDialog's own
  Cancel button (which reuses dialog.cancel).
- notifications (dismiss/region) - Toaster.
- dataTable (selectRow/search/searchAriaLabel) - DataTableCore.
- columnFilter (filterTriggerAriaLabel/valueAriaLabel/matchModeAriaLabel/
  matchModeLabel/clear/apply/true/false) - ColumnFilterMenu, added as a
  provider tier between its existing labels prop and English defaults.
- datePicker.label - the orphaned "Date" aria-label fallback in
  DatePickerInput used when neither an explicit aria-label nor a placeholder
  is given.

Docs (Fix 4): English and nb-NO CratisComponentsProvider examples for every
group in Documentation/Common/cratis-components-provider.md, plus precedence
notes in Dialog/Dropdown/Notifications/CommandStepper/StepperCommandDialog/
DataTables docs. No React Aria locale data copied into messages.

Specs (Fix 5): regression specs for every bypass fix; a dedicated
precedence spec per new provider group (English fallback -> provider
message -> prop override, in that order); and a sentinel-provider spec
(Source/Common/for_CratisComponentsProvider/when_every_owned_label_is_overridden.tsx)
that renders every audited surface under one provider with distinct
sentinel messages and asserts none render their English default.

No new ESLint rule: documented in ESLint/README.md why a hardcoded-label
rule would need semantic judgment an AST visitor can't make reliably,
producing either high noise or an allowlist that stops catching new
bypasses; the sentinel-provider spec is the reliable gate instead.

Explicitly out of scope, unless a bypass surfaces there later: PivotViewer,
ObjectContentEditor, SchemaEditor's own generated cell/header copy,
TimeMachine's relative/plural text, and identifier-derived
formatTitle/formatPropertyName. #174 is not fully closed by this change.

Verification: tsc -b (Source/tsconfig.json) clean; eslint clean;
vitest run 275 files / 846 tests passed.
---
 Documentation/CommandStepper/index.md         |   6 +-
 .../Common/cratis-components-provider.md      | 122 ++++++++-
 .../DataTables/column-configuration.md        |   6 +
 .../data-table-for-observable-query.md        |   5 +-
 .../DataTables/data-table-for-query.md        |   5 +-
 Documentation/Dialogs/dialog.md               |  11 +-
 Documentation/Dropdown/index.md               |  20 ++
 Documentation/Filter/index.md                 |   6 +-
 Documentation/Notifications/index.md          |   7 +-
 Documentation/StepperCommandDialog/index.md   |   8 +-
 ESLint/README.md                              |  22 ++
 .../CommandDialog/CommandStepperContent.tsx   |  25 +-
 Source/CommandDialog/StepperCommandDialog.tsx |  38 +--
 .../when_using_provider_messages.tsx          | 107 ++++++++
 .../when_using_provider_messages.tsx          | 144 ++++++++++
 Source/Common/CratisComponentsProvider.tsx    | 124 +++++++++
 Source/Common/DatePickerInput.tsx             |   6 +-
 .../when_every_owned_label_is_overridden.tsx  | 254 ++++++++++++++++++
 ...ccessible_name_or_placeholder_is_given.tsx |  91 +++++++
 Source/DataTables/ColumnFilterMenu.tsx        |  21 +-
 Source/DataTables/DataTableCore.tsx           |  27 +-
 .../given/a_filterable_table.tsx              |   9 +-
 .../when_using_provider_messages.tsx          |  98 +++++++
 .../when_using_provider_messages.tsx          | 127 +++++++++
 Source/Dialogs/Dialog.tsx                     |  51 ++--
 .../when_using_provider_messages.tsx          | 119 ++++++++
 Source/Dropdown/Dropdown.tsx                  |  32 +--
 .../when_using_provider_messages.tsx          | 126 +++++++++
 Source/Filter/FilterPanel.tsx                 |  12 +-
 Source/Filter/RangeHistogramFilter.tsx        |   5 +-
 ...er_group_has_no_own_search_placeholder.tsx | 102 +++++++
 .../when_clear_buttons_are_localized.tsx      | 114 ++++++++
 .../when_localizing_the_bucket_tooltip.tsx    |  64 +++++
 Source/Notifications/Toaster.tsx              |  19 +-
 .../when_using_provider_messages.tsx          | 110 ++++++++
 Source/SchemaEditor/SchemaEditor.tsx          |  32 +--
 .../when_navigate_back_label_is_localized.tsx | 107 ++++++++
 37 files changed, 2054 insertions(+), 128 deletions(-)
 create mode 100644 Source/CommandDialog/for_CommandStepper/when_using_provider_messages.tsx
 create mode 100644 Source/CommandDialog/for_StepperCommandDialog/when_using_provider_messages.tsx
 create mode 100644 Source/Common/for_CratisComponentsProvider/when_every_owned_label_is_overridden.tsx
 create mode 100644 Source/Common/for_DatePickerInput/when_no_accessible_name_or_placeholder_is_given.tsx
 create mode 100644 Source/DataTables/for_ColumnFilterMenu/when_using_provider_messages.tsx
 create mode 100644 Source/DataTables/for_DataTableCore/when_using_provider_messages.tsx
 create mode 100644 Source/Dialogs/for_Dialog/when_using_provider_messages.tsx
 create mode 100644 Source/Dropdown/for_Dropdown/when_using_provider_messages.tsx
 create mode 100644 Source/Filter/for_FilterPanel/when_a_filter_group_has_no_own_search_placeholder.tsx
 create mode 100644 Source/Filter/for_FilterPanel/when_clear_buttons_are_localized.tsx
 create mode 100644 Source/Filter/for_RangeHistogramFilter/when_localizing_the_bucket_tooltip.tsx
 create mode 100644 Source/Notifications/for_Toaster/when_using_provider_messages.tsx
 create mode 100644 Source/SchemaEditor/for_SchemaEditor/when_navigate_back_label_is_localized.tsx

diff --git a/Documentation/CommandStepper/index.md b/Documentation/CommandStepper/index.md
index 85ba4852..45717a74 100644
--- a/Documentation/CommandStepper/index.md
+++ b/Documentation/CommandStepper/index.md
@@ -45,12 +45,12 @@ export const ProjectWizard = () => {
 
 - `command`: Command constructor used to establish `CommandForm`
 - `children`: `StepperPanel` elements
-- `nextLabel`: Next button label (default: `Next`)
-- `previousLabel`: Previous button label (default: `Previous`)
+- `nextLabel`: Next button label. Falls back to the [`CratisComponentsProvider`](../Common/cratis-components-provider.md)'s `messages.stepper.next`, then `'Next'`
+- `previousLabel`: Previous button label. Falls back to the provider's `messages.stepper.previous`, then `'Previous'`
 - `showNavigation`: Show built-in navigation controls (default: `true`)
 - `onStepErrorsChange`: Callback receiving a boolean array of per-step validation errors
 - `showSubmit`: Show the built-in submit action on the last step (default: `true`)
-- `okLabel`: Submit button label (default: `Submit`)
+- `okLabel`: Submit button label. Falls back to the provider's `messages.stepper.submit`, then `'Submit'`
 - `isBusy`: Disables the navigation controls while something is running
 - `onSubmit`: Submit callback invoked on the last step
 - Any `CommandForm` props, including `initialValues`, `currentValues`, `validateOnInit`, and validation callbacks
diff --git a/Documentation/Common/cratis-components-provider.md b/Documentation/Common/cratis-components-provider.md
index f8ee5ab8..53510b8e 100644
--- a/Documentation/Common/cratis-components-provider.md
+++ b/Documentation/Common/cratis-components-provider.md
@@ -19,17 +19,90 @@ export const App = () => (
 
 ## Configuration
 
-| Member                | Purpose                                                                                    |
-| --------------------- | ------------------------------------------------------------------------------------------ |
-| `locale`              | BCP 47 locale used by React Aria for dates, numbers, keyboard behavior, and announcements. |
-| `messages.paginator`  | Components-owned paginator labels.                                                         |
-| `messages.datePicker` | Components-owned date-picker action/navigation labels.                                     |
-| `locales`             | Temporary Components 3 compatibility map; migrate to `messages`.                           |
+| Member                  | Purpose                                                                                    |
+| ----------------------- | ------------------------------------------------------------------------------------------ |
+| `locale`                | BCP 47 locale used by React Aria for dates, numbers, keyboard behavior, and announcements. |
+| `messages.paginator`    | Components-owned paginator labels.                                                         |
+| `messages.datePicker`   | Components-owned date-picker action/navigation labels, plus the segmented input's fallback accessible name (`label`). |
+| `messages.dropdown`     | `Dropdown`'s show-options and clear-selection labels.                                      |
+| `messages.dialog`       | Action/dismissal labels (`ok`, `cancel`, `yes`, `no`, `close`) shared by `Dialog`, `CommandDialog`, and `StepperCommandDialog`. |
+| `messages.stepper`      | Navigation labels (`next`, `previous`, `submit`) shared by `CommandStepper` and `StepperCommandDialog`. |
+| `messages.notifications`| `Toaster`'s dismiss-action and region-landmark labels.                                     |
+| `messages.dataTable`    | `DataTableCore`'s loaded-page search and single-row-selection labels.                      |
+| `messages.columnFilter` | The built-in column filter popup's clear/apply/boolean/match-mode labels.                  |
+| `locales`               | Temporary Components 3 compatibility map; migrate to `messages`.                           |
 
 Unknown Components 3 renderer options are intentionally a type error. Remove `license`, `theme`, `defaults`, global `pt`, `ptOptions`, `ripple`, `unstyled`, and renderer z-index settings rather than compiling a provider whose visual configuration does nothing. Configure any remaining direct Prime provider independently.
 
+Every group follows the same precedence: a named component prop (or a component's own `labels`/`filterLabels` override) wins, then the matching provider message, then the English default shown above. Per-instance overrides keep working exactly as before — the provider only fills gaps a call site left unset.
+
 ## Localize owned labels
 
+English, spelled out explicitly (this is also what every group defaults to with no provider at all):
+
+```tsx
+<CratisComponentsProvider
+    value={{
+        locale: 'en-US',
+        messages: {
+            paginator: {
+                navigation: 'Pagination',
+                first: 'First page',
+                previous: 'Previous page',
+                next: 'Next page',
+                last: 'Last page',
+            },
+            datePicker: {
+                today: 'Today',
+                clear: 'Clear',
+                openCalendar: 'Open calendar',
+                previousMonth: 'Previous month',
+                nextMonth: 'Next month',
+                label: 'Date',
+            },
+            dropdown: {
+                showOptions: 'Show options',
+                clearSelection: 'Clear selection',
+            },
+            dialog: {
+                ok: 'Ok',
+                cancel: 'Cancel',
+                yes: 'Yes',
+                no: 'No',
+                close: 'Close',
+            },
+            stepper: {
+                next: 'Next',
+                previous: 'Previous',
+                submit: 'Submit',
+            },
+            notifications: {
+                dismiss: 'Dismiss',
+                region: 'Notifications',
+            },
+            dataTable: {
+                selectRow: 'Select row',
+                search: 'Search…',
+                searchAriaLabel: 'Search table',
+            },
+            columnFilter: {
+                matchModeAriaLabel: 'Match mode',
+                clear: 'Clear',
+                apply: 'Apply',
+                true: 'True',
+                false: 'False',
+                filterTriggerAriaLabel: (field) => `Filter by ${field}`,
+                valueAriaLabel: (field) => `Filter value for ${field}`,
+            },
+        },
+    }}
+>
+    <Application />
+</CratisComponentsProvider>
+```
+
+The same shape in Norwegian Bokmål:
+
 ```tsx
 <CratisComponentsProvider
     value={{
@@ -48,6 +121,41 @@ Unknown Components 3 renderer options are intentionally a type error. Remove `li
                 openCalendar: 'Åpne kalender',
                 previousMonth: 'Forrige måned',
                 nextMonth: 'Neste måned',
+                label: 'Dato',
+            },
+            dropdown: {
+                showOptions: 'Vis alternativer',
+                clearSelection: 'Fjern valg',
+            },
+            dialog: {
+                ok: 'Ok',
+                cancel: 'Avbryt',
+                yes: 'Ja',
+                no: 'Nei',
+                close: 'Lukk',
+            },
+            stepper: {
+                next: 'Neste',
+                previous: 'Forrige',
+                submit: 'Send inn',
+            },
+            notifications: {
+                dismiss: 'Lukk',
+                region: 'Varsler',
+            },
+            dataTable: {
+                selectRow: 'Velg rad',
+                search: 'Søk…',
+                searchAriaLabel: 'Søk i tabellen',
+            },
+            columnFilter: {
+                matchModeAriaLabel: 'Sammenligningsmodus',
+                clear: 'Tøm',
+                apply: 'Bruk',
+                true: 'Sann',
+                false: 'Usann',
+                filterTriggerAriaLabel: (field) => `Filtrer på ${field}`,
+                valueAriaLabel: (field) => `Filterverdi for ${field}`,
             },
         },
     }}
@@ -56,7 +164,7 @@ Unknown Components 3 renderer options are intentionally a type error. Remove `li
 </CratisComponentsProvider>
 ```
 
-React Aria supplies locale data for its interaction patterns. Components asks you only for product labels it owns.
+React Aria supplies locale data for its interaction patterns — calendar month/weekday names, number formatting, and similar platform locale data. Components asks you only for the product labels it owns; do not copy React Aria's own locale strings into `messages`.
 
 ## Mount the toaster
 
diff --git a/Documentation/DataTables/column-configuration.md b/Documentation/DataTables/column-configuration.md
index ee27ccab..96bec8df 100644
--- a/Documentation/DataTables/column-configuration.md
+++ b/Documentation/DataTables/column-configuration.md
@@ -63,6 +63,12 @@ Set `filter` and optionally:
 />
 ```
 
+Every label in `filterLabels` resolves with the same precedence: the `filterLabels` entry wins, then the matching
+[`CratisComponentsProvider`](../Common/cratis-components-provider.md) `messages.columnFilter` message, then the
+English default shown in the snippet above. Configure a product's column-filter copy once through the provider
+rather than repeating `filterLabels` on every filterable `Column`; use `filterLabels` for a column that genuinely
+needs different wording than the rest of the application.
+
 A custom editor receives the draft value/mode and `onChange`, `onApply`, and `onClear` callbacks. Applying updates the table's `DataTableFilterMeta`; clearing removes the constraint.
 
 `filterPt` exposes `trigger`, `popover`, `menu`, `matchMode`, `input`, `actions`, `clear`, and `apply`. These are Cratis-owned parts; the popup/menu/actions also render `data-cratis-part='filter-popover'`, `filter-menu`, and `filter-actions`.
diff --git a/Documentation/DataTables/data-table-for-observable-query.md b/Documentation/DataTables/data-table-for-observable-query.md
index b3a5bd24..c9bae416 100644
--- a/Documentation/DataTables/data-table-for-observable-query.md
+++ b/Documentation/DataTables/data-table-for-observable-query.md
@@ -52,8 +52,9 @@ Same as DataTableForQuery, but the query must extend `IObservableQueryFor`.
 - `selection`: Currently selected row
 - `onSelectionChange`: Callback when selection changes
 - `globalFilterFields`: Fields searched on the loaded page
-- `globalSearchPlaceholder`: Search-input placeholder
-- `globalSearchAriaLabel`: Accessible search-input name; localize independently from the placeholder
+- `globalSearchPlaceholder`: Search-input placeholder. Falls back to the [`CratisComponentsProvider`](../Common/cratis-components-provider.md)'s `messages.dataTable.search`, then `'Search…'`
+- `globalSearchAriaLabel`: Accessible search-input name; localize independently from the placeholder. Falls back to the provider's `messages.dataTable.searchAriaLabel`, then `'Search table'`
+- `selectionAriaLabel`: Accessible name for a single-selection row control. Falls back to the provider's `messages.dataTable.selectRow`, then `'Select row'`
 - `defaultFilters`: Initial filter configuration (a `DataTableFilterMeta`)
 - `clientFiltering`: Deprecated compatibility prop; accepted but ignored because filtering is always scoped to the loaded page
 - `paginatorClassName` / `paginatorAriaLabels`: styling and explicit localization overrides for the paginator; accessible names default from `CratisComponentsProvider` messages
diff --git a/Documentation/DataTables/data-table-for-query.md b/Documentation/DataTables/data-table-for-query.md
index cbdc00ce..737330d5 100644
--- a/Documentation/DataTables/data-table-for-query.md
+++ b/Documentation/DataTables/data-table-for-query.md
@@ -51,8 +51,9 @@ function MyTable() {
 - `selection`: Currently selected row
 - `onSelectionChange`: Callback when selection changes
 - `globalFilterFields`: Fields searched on the loaded page
-- `globalSearchPlaceholder`: Search-input placeholder
-- `globalSearchAriaLabel`: Accessible search-input name; localize independently from the placeholder
+- `globalSearchPlaceholder`: Search-input placeholder. Falls back to the [`CratisComponentsProvider`](../Common/cratis-components-provider.md)'s `messages.dataTable.search`, then `'Search…'`
+- `globalSearchAriaLabel`: Accessible search-input name; localize independently from the placeholder. Falls back to the provider's `messages.dataTable.searchAriaLabel`, then `'Search table'`
+- `selectionAriaLabel`: Accessible name for a single-selection row control. Falls back to the provider's `messages.dataTable.selectRow`, then `'Select row'`
 - `defaultFilters`: Initial filter configuration (a `DataTableFilterMeta`)
 - `clientFiltering`: Deprecated compatibility prop; accepted but ignored because filtering is always scoped to the loaded page
 - `paginatorClassName` / `paginatorAriaLabels`: styling and explicit localization overrides for the paginator; accessible names default from `CratisComponentsProvider` messages
diff --git a/Documentation/Dialogs/dialog.md b/Documentation/Dialogs/dialog.md
index efa5d555..534e439c 100644
--- a/Documentation/Dialogs/dialog.md
+++ b/Documentation/Dialogs/dialog.md
@@ -77,7 +77,8 @@ const MyComponent = () => {
 - `dismissable`: Whether the header close (X), a backdrop click and `Escape` are
   offered (see below)
 - `closeAriaLabel`: Accessible name for the header close button. Defaults to
-  `'Close'` — override it to localize
+  the [`CratisComponentsProvider`](../Common/cratis-components-provider.md)'s
+  `messages.dialog.close`, then `'Close'` — override it to localize a single dialog
 - `width`: Dialog width (defaults to `'450px'`)
 - `style`: Custom dialog style
 - `contentStyle`: Custom content area style
@@ -85,7 +86,13 @@ const MyComponent = () => {
 - `isValid`: Enables or disables confirm actions (defaults to `true`)
 - `isBusy`: When `true`, disables all buttons, blocks Escape/backdrop dismissal, and shows a loading spinner on the primary action button
 - `initialFocus`: Where keyboard focus lands when the dialog opens (see below)
-- `okLabel`, `cancelLabel`, `yesLabel`, `noLabel`: Button labels. Footer icons are decorative and hidden from accessibility APIs, so each button's accessible name is exactly its configured label
+- `okLabel`, `cancelLabel`, `yesLabel`, `noLabel`: Button labels. Each resolves from the prop, then the
+  [`CratisComponentsProvider`](../Common/cratis-components-provider.md)'s matching `messages.dialog` entry
+  (`ok`, `cancel`, `yes`, `no`), then its English default (`'Ok'`, `'Cancel'`, `'Yes'`, `'No'`) — localize every
+  dialog at once through the provider, or one dialog through the prop. Footer icons are decorative and hidden
+  from accessibility APIs, so each button's accessible name is exactly its configured label. `CommandDialog`
+  and `StepperCommandDialog` forward these same props straight through to `Dialog`, so the same precedence
+  covers every dialog surface.
 - `className`, `pt`: Styling hooks for the Cratis-owned dialog root and stable parts — see the [pass-through cheat sheet](../Styling/pass-through.md)
 - `ptOptions`, `unstyled`: Retained temporarily for source compatibility; ignored because Cratis part attributes always merge and styling is CSS-owned
 
diff --git a/Documentation/Dropdown/index.md b/Documentation/Dropdown/index.md
index af9080f0..395de4d2 100644
--- a/Documentation/Dropdown/index.md
+++ b/Documentation/Dropdown/index.md
@@ -41,6 +41,26 @@ Filtered selection follows the combobox pattern. A non-filtered single select fo
 
 Set `multiple` and bind an array. Components uses native multiple selection when filtering is off and an accessible multi-value combobox when `filter` is enabled. Use a specialized collection picker when a large dataset needs virtualized search or chip collapsing.
 
+## Localizing show-options and clear-selection
+
+The show-options trigger (the filtered combobox path) and the clear-selection action (`showClear`) carry
+their own accessible names, resolved with the same precedence everywhere `Dropdown` renders them: `pt.trigger['aria-label']`
+(or `pt.select['aria-label']` for the trigger) wins, then the [`CratisComponentsProvider`](../Common/cratis-components-provider.md)'s
+`messages.dropdown.showOptions` / `messages.dropdown.clearSelection`, then the English defaults `'Show options'` /
+`'Clear selection'`. Configure them once for every `Dropdown` in the application through the provider, or per instance
+through `pt`.
+
+```tsx
+<Dropdown
+    value={role}
+    options={roles}
+    filter
+    showClear
+    aria-label='Role'
+    pt={{ trigger: { 'aria-label': 'Show role options' } }}
+/>
+```
+
 ## Props
 
 | Prop                               | Purpose                                         |
diff --git a/Documentation/Filter/index.md b/Documentation/Filter/index.md
index a8251b96..a4019dbf 100644
--- a/Documentation/Filter/index.md
+++ b/Documentation/Filter/index.md
@@ -197,7 +197,9 @@ Custom filter editors should not implement their own clear buttons; the header c
 | `rangeValues` | `RangeValues` | ✓ | Current numeric range selections |
 | `customValues` | `CustomFilterValues` | — | Values for custom-editor filters |
 | `search` | `string` | — | Current search-box value |
-| `searchPlaceholder` | `string` | — | Placeholder for search input (default: `'Search…'`) |
+| `searchPlaceholder` | `string` | — | Placeholder for the panel's search input (default: `'Search…'`). Also the fallback placeholder for a searchable filter group that does not declare its own `searchPlaceholder`. |
+| `clearFilterAriaLabel` | `string` | — | Accessible name and tooltip for a string/custom filter's clear button (default: `'Clear filter'`) |
+| `clearRangeAriaLabel` | `string` | — | Accessible name and tooltip for a numeric/date filter's clear button (default: `'Clear range'`) |
 | `expandedFilterKey` | `string \| null` | — | Which filter group is open |
 | `anchorRef` | `RefObject<HTMLButtonElement>` | ✓ | Button the panel anchors below |
 | `onClose` | `() => void` | ✓ | Called when panel should close |
@@ -260,6 +262,8 @@ The hook re-syncs state when the `filters` array reference changes — existing
 | `buckets` | `number` | | Number of histogram bars (default `20`) |
 | `selectedRange` | `[number, number] \| null` | ✓ | Currently selected range, or `null` for none |
 | `onChange` | `(range: [number, number] \| null) => void` | ✓ | Called when the range changes |
+| `formatValue` | `(value: number) => string` | — | Formatter for endpoint labels and bar-tooltip numbers (default: a plain numeric formatter) |
+| `itemsLabel` | `string` | — | Unit word shown after a bar tooltip's count, e.g. `'42 items'` (default: `'items'`) |
 
 ## Importing
 
diff --git a/Documentation/Notifications/index.md b/Documentation/Notifications/index.md
index 79b8d6a7..f8a87cc9 100644
--- a/Documentation/Notifications/index.md
+++ b/Documentation/Notifications/index.md
@@ -97,6 +97,9 @@ Custom content replaces only the body. The frame, severity indicator, timeout, a
 | `position`         | One of the six viewport edges/corners.                                                            |
 | `limit`            | Maximum visible frames.                                                                           |
 | `timeout`          | Default timeout in milliseconds.                                                                  |
-| `dismissAriaLabel` | Accessible name for close controls.                                                               |
-| `regionAriaLabel`  | Accessible name for the notification region.                                                      |
+| `dismissAriaLabel` | Accessible name for close controls. Falls back to the [`CratisComponentsProvider`](../Common/cratis-components-provider.md)'s `messages.notifications.dismiss`, then `'Dismiss'`. |
+| `regionAriaLabel`  | Accessible name for the notification region. Falls back to the provider's `messages.notifications.region`, then `'Notifications'`. |
 | `pt`               | Stable `region`, `toast`, `icon`, `content`, `title`, `description`, `action`, and `close` parts. |
+
+Configure `dismissAriaLabel` / `regionAriaLabel` once for the whole application through
+`CratisComponentsProvider`'s `messages.notifications`, or override either per `<Toaster>` instance.
diff --git a/Documentation/StepperCommandDialog/index.md b/Documentation/StepperCommandDialog/index.md
index be415064..ca3a5600 100644
--- a/Documentation/StepperCommandDialog/index.md
+++ b/Documentation/StepperCommandDialog/index.md
@@ -96,11 +96,11 @@ function MyComponent() {
 - `onConfirm`: Confirm callback — called only after successful command execution
 - `onCancel`: Cancel callback — invoked for every dismissal that is not a successful submit: the X in the dialog header, the Escape key, and the footer Cancel button when `showCancel` is on
 - `onClose`: Fallback close callback
-- `okLabel`: Label for the submit button shown on the last step when valid (default: `'Submit'`)
-- `nextLabel`: Label for the next step button (default: `'Next'`)
-- `previousLabel`: Label for the previous step button (default: `'Previous'`)
+- `okLabel`: Label for the submit button shown on the last step when valid. Falls back to the [`CratisComponentsProvider`](../Common/cratis-components-provider.md)'s `messages.stepper.submit`, then `'Submit'`
+- `nextLabel`: Label for the next step button. Falls back to the provider's `messages.stepper.next`, then `'Next'`
+- `previousLabel`: Label for the previous step button. Falls back to the provider's `messages.stepper.previous`, then `'Previous'`
 - `showCancel`: Adds a Cancel button as the first item in the footer (default: `false`)
-- `cancelLabel`: Label for the footer cancel button (default: `'Cancel'`)
+- `cancelLabel`: Label for the footer cancel button. Falls back to the provider's `messages.dialog.cancel` — the same group `Dialog`'s own Cancel button resolves through — then `'Cancel'`
 - `isValid`: Additional validity gate combined with command form validity
 - `width`: Dialog width (default: `'600px'`)
 - `resizable`: Accepted for source compatibility; the viewport-bounded Cratis dialog has no resize handle. Existing call sites keep compiling; the prop simply has no effect.
diff --git a/ESLint/README.md b/ESLint/README.md
index 53987ccd..f523e8e8 100644
--- a/ESLint/README.md
+++ b/ESLint/README.md
@@ -47,6 +47,28 @@ export default [
 
 `onbeforeexecute-must-return`, `no-hooks-in-view-model` and `no-raw-command-form-marker` take no options.
 
+## Considered and rejected: a hardcoded-owned-label rule
+
+During the issue #174 localization pass, a static rule flagging a hardcoded English literal that
+bypasses `CratisComponentsProvider` messages (e.g. a `title`/`aria-label` string sitting next to an
+already-localized prop) was considered and rejected. Every rule above is a syntactic, structural
+pattern an AST visitor resolves unambiguously (an import specifier, a known display-name
+constant, a callback's control-flow shape). Detecting an *owned-label bypass* instead requires
+understanding which of a component's many string literals are user-facing chrome versus CSS class
+names, `data-*` values, decorative glyphs, or genuinely correct per-instance defaults — a semantic
+judgment call, not a syntactic one. A rule broad enough to catch a real bypass (any string literal
+passed to `title`/`aria-label`/`placeholder`/a `Tooltip`'s `content`) flags the large fraction of
+those call sites that are already correct, and an allowlist narrow enough to avoid that noise stops
+catching new bypasses the moment a new component or prop name is introduced — the allowlist would
+need updating in lockstep with every future component, which defeats the purpose of a ratchet.
+Render-time sentinel-provider specs (see
+`Source/Common/for_CratisComponentsProvider/when_every_owned_label_is_overridden.tsx`) are the
+reliable gate instead: they render each audited surface under a provider whose messages are all
+unmistakable sentinel strings and assert the rendered label is the sentinel, never the English
+default — a real behavioral check that a static rule cannot approximate without the same false-positive
+cost. Revisit a lint rule if a narrower, high-confidence pattern emerges (for example, once every
+owned-label prop follows one consistent naming and JSDoc convention).
+
 ## Rules
 
 ### `onbeforeexecute-must-return`
diff --git a/Source/CommandDialog/CommandStepperContent.tsx b/Source/CommandDialog/CommandStepperContent.tsx
index 61f4831b..caf9f85a 100644
--- a/Source/CommandDialog/CommandStepperContent.tsx
+++ b/Source/CommandDialog/CommandStepperContent.tsx
@@ -3,6 +3,7 @@
 
 import React, { useEffect, useMemo } from 'react';
 import { Button } from '../Common/Button';
+import { useCratisComponentsConfig } from '../Common/CratisComponentsProvider';
 import { CommandFormFieldWrapper } from '@cratis/arc.react/commands';
 import { isCommandFormField } from '../CommandForm/commandFormMarkers';
 import type { StepperPanelProps } from './StepperPanel';
@@ -37,11 +38,11 @@ export interface CommandStepperContentProps extends StepperCustomizationProps {
     showNavigation?: boolean;
     /** Whether to show built-in submit on the last step. Defaults to `true`. */
     showSubmit?: boolean;
-    /** Label for the next step button. Defaults to `'Next'`. */
+    /** Label for the next step button. Falls back to the provider's `stepper.next` message, then `'Next'`. */
     nextLabel?: string;
-    /** Label for the previous step button. Defaults to `'Previous'`. */
+    /** Label for the previous step button. Falls back to the provider's `stepper.previous` message, then `'Previous'`. */
     previousLabel?: string;
-    /** Label for the submit button. Defaults to `'Submit'`. */
+    /** Label for the submit button. Falls back to the provider's `stepper.submit` message, then `'Submit'`. */
     okLabel?: string;
     /** Whether navigation controls are busy. */
     isBusy?: boolean;
@@ -126,9 +127,9 @@ export const CommandStepperContent = ({
     getFieldError,
     showNavigation = true,
     showSubmit = true,
-    nextLabel = 'Next',
-    previousLabel = 'Previous',
-    okLabel = 'Submit',
+    nextLabel,
+    previousLabel,
+    okLabel,
     isBusy = false,
     isSubmitting = false,
     isSubmitDisabled = false,
@@ -141,6 +142,12 @@ export const CommandStepperContent = ({
     onChangeStep,
     pt,
 }: CommandStepperContentProps) => {
+    const { messages } = useCratisComponentsConfig();
+    const resolvedNextLabel = nextLabel ?? messages?.stepper?.next ?? 'Next';
+    const resolvedPreviousLabel =
+        previousLabel ?? messages?.stepper?.previous ?? 'Previous';
+    const resolvedOkLabel = okLabel ?? messages?.stepper?.submit ?? 'Submit';
+
     // The steps that actually render. Conditional steps (`{condition && <StepperPanel/>}`)
     // leave falsy children behind, so the count, the per-step validation state and what the
     // Stepper renders are all derived from this one list — they cannot drift apart.
@@ -361,7 +368,7 @@ export const CommandStepperContent = ({
                             disabled={isBusy}
                             style={{ width: 'auto' }}
                         >
-                            <span>{previousLabel}</span>
+                            <span>{resolvedPreviousLabel}</span>
                         </Button>
                     )}
                     <div style={{ flex: 1 }} />
@@ -371,7 +378,7 @@ export const CommandStepperContent = ({
                             disabled={isBusy || isSubmitting || isCurrentStepInvalid}
                             style={{ width: 'auto' }}
                         >
-                            <span>{nextLabel}</span>
+                            <span>{resolvedNextLabel}</span>
                         </Button>
                     )}
                     {isLastStep && showSubmit && (
@@ -392,7 +399,7 @@ export const CommandStepperContent = ({
                                     aria-hidden='true'
                                 />
                             )}
-                            <span>{okLabel}</span>
+                            <span>{resolvedOkLabel}</span>
                         </Button>
                     )}
                 </div>
diff --git a/Source/CommandDialog/StepperCommandDialog.tsx b/Source/CommandDialog/StepperCommandDialog.tsx
index ebd59745..36ec4366 100644
--- a/Source/CommandDialog/StepperCommandDialog.tsx
+++ b/Source/CommandDialog/StepperCommandDialog.tsx
@@ -2,9 +2,10 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import React, { useState, type CSSProperties } from 'react';
-import { ICommandResult } from '@cratis/arc/commands';
+import type { ICommandResult } from '@cratis/arc/commands';
 import { DialogResult, useDialogContext } from '@cratis/arc.react/dialogs';
 import { Button } from '../Common/Button';
+import { useCratisComponentsConfig } from '../Common/CratisComponentsProvider';
 import {
     CommandForm,
     useCommandFormContext,
@@ -77,11 +78,11 @@ export interface StepperCommandDialogProps<TCommand extends object, TResponse =
      * the command is executing.
      */
     onCancel?: CancelCallback;
-    /** Label for the submit button shown on the last step when valid. Defaults to `'Submit'`. */
+    /** Label for the submit button shown on the last step when valid. Falls back to the provider's `stepper.submit` message, then `'Submit'`. */
     okLabel?: string;
-    /** Label for the next step button. Defaults to `'Next'`. */
+    /** Label for the next step button. Falls back to the provider's `stepper.next` message, then `'Next'`. */
     nextLabel?: string;
-    /** Label for the previous step button. Defaults to `'Previous'`. */
+    /** Label for the previous step button. Falls back to the provider's `stepper.previous` message, then `'Previous'`. */
     previousLabel?: string;
     /**
      * Show a Cancel action in the footer. Defaults to `false`, leaving the X in the header as the
@@ -89,7 +90,7 @@ export interface StepperCommandDialogProps<TCommand extends object, TResponse =
      * submit — a destructive or long flow, or one presented without a visible header.
      */
     showCancel?: boolean;
-    /** Label for the footer cancel button. Defaults to `'Cancel'`. */
+    /** Label for the footer cancel button. Falls back to the provider's `dialog.cancel` message, then `'Cancel'`. */
     cancelLabel?: string;
     /**
      * Extra CSS class name forwarded to the underlying Cratis Dialog root.
@@ -152,11 +153,11 @@ const StepperCommandDialogWrapper = <TCommand extends object, TResponse = object
     onException,
     onUnauthorized,
     onBeforeExecute,
-    okLabel = 'Submit',
-    nextLabel = 'Next',
-    previousLabel = 'Previous',
+    okLabel,
+    nextLabel,
+    previousLabel,
     showCancel = false,
-    cancelLabel = 'Cancel',
+    cancelLabel,
     linear = true,
     orientation,
     headerPosition,
@@ -172,6 +173,13 @@ const StepperCommandDialogWrapper = <TCommand extends object, TResponse = object
     dialogUnstyled,
     children,
 }: StepperCommandDialogWrapperProps<TCommand, TResponse>) => {
+    const { messages } = useCratisComponentsConfig();
+    const stepperMessages = messages?.stepper;
+    const dialogMessages = messages?.dialog;
+    const resolvedOkLabel = okLabel ?? stepperMessages?.submit ?? 'Submit';
+    const resolvedNextLabel = nextLabel ?? stepperMessages?.next ?? 'Next';
+    const resolvedPreviousLabel = previousLabel ?? stepperMessages?.previous ?? 'Previous';
+    const resolvedCancelLabel = cancelLabel ?? dialogMessages?.cancel ?? 'Cancel';
     const {
         setCommandValues,
         setCommandResult,
@@ -224,15 +232,13 @@ const StepperCommandDialogWrapper = <TCommand extends object, TResponse = object
                 const closeResult = await onClose(result);
                 shouldCloseThroughContext = closeResult !== false;
             }
-        } else {
-            if (onCancel) {
+        } else if (onCancel) {
                 const closeResult = await onCancel();
                 shouldCloseThroughContext = closeResult === true;
             } else if (onClose) {
                 const closeResult = await onClose(result);
                 shouldCloseThroughContext = closeResult !== false;
             }
-        }
 
         if (shouldCloseThroughContext) {
             contextCloseDialog?.(result);
@@ -299,7 +305,7 @@ const StepperCommandDialogWrapper = <TCommand extends object, TResponse = object
                     disabled={isBusy}
                     style={{ width: 'auto' }}
                 >
-                    <span>{cancelLabel}</span>
+                    <span>{resolvedCancelLabel}</span>
                 </Button>
             )}
             {!isFirstStep && (
@@ -309,7 +315,7 @@ const StepperCommandDialogWrapper = <TCommand extends object, TResponse = object
                     disabled={isBusy}
                     style={{ width: 'auto' }}
                 >
-                    <span>{previousLabel}</span>
+                    <span>{resolvedPreviousLabel}</span>
                 </Button>
             )}
             <div style={{ flex: 1 }} />
@@ -322,7 +328,7 @@ const StepperCommandDialogWrapper = <TCommand extends object, TResponse = object
                     disabled={isBusy || isCurrentStepInvalid}
                     style={{ width: 'auto' }}
                 >
-                    <span>{nextLabel}</span>
+                    <span>{resolvedNextLabel}</span>
                 </Button>
             )}
             {isLastStep && isDialogValid && (
@@ -335,7 +341,7 @@ const StepperCommandDialogWrapper = <TCommand extends object, TResponse = object
                     {isBusy && (
                         <span className='cratis-dialog__spinner' aria-hidden='true' />
                     )}
-                    <span>{okLabel}</span>
+                    <span>{resolvedOkLabel}</span>
                 </Button>
             )}
         </div>
diff --git a/Source/CommandDialog/for_CommandStepper/when_using_provider_messages.tsx b/Source/CommandDialog/for_CommandStepper/when_using_provider_messages.tsx
new file mode 100644
index 00000000..1ebaded5
--- /dev/null
+++ b/Source/CommandDialog/for_CommandStepper/when_using_provider_messages.tsx
@@ -0,0 +1,107 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { expect } from 'chai';
+import { afterEach, describe, it } from 'vitest';
+import { CratisComponentsProvider } from '../../Common/CratisComponentsProvider';
+import { CommandStepperContent } from '../CommandStepper';
+import { StepperPanel } from '../StepperPanel';
+
+/**
+ * Precedence coverage for the `stepper` provider message group's Next/Previous/Submit
+ * navigation labels: a named component prop wins, then the provider message, then the
+ * English fallback. `CommandStepperContent` is the visual body shared by the embedded
+ * `CommandStepper` and (via `showNavigation={false}`, its own footer) `StepperCommandDialog`.
+ */
+describe('when CommandStepperContent uses provider messages', () => {
+    let container: HTMLDivElement;
+    let root: Root;
+
+    const render = async (element: React.ReactElement) => {
+        (
+            globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
+        ).IS_REACT_ACT_ENVIRONMENT = true;
+        container = document.createElement('div');
+        document.body.append(container);
+        root = createRoot(container);
+        await act(async () => {
+            root.render(element);
+        });
+    };
+
+    afterEach(async () => {
+        await act(async () => root.unmount());
+        container.remove();
+    });
+
+    const buttonLabeled = (label: string) =>
+        Array.from(container.querySelectorAll('button')).find(
+            (button) => button.textContent === label,
+        );
+
+    it('should use the English fallback with no provider and no prop override', async () => {
+        await render(
+            <CratisComponentsProvider>
+                <CommandStepperContent activeStep={0} visitedSteps={new Set([0])} />
+            </CratisComponentsProvider>,
+        );
+        expect(buttonLabeled('Submit')).not.to.equal(undefined);
+    });
+
+    it('should use the provider message for Next/Previous/Submit when no prop override is given', async () => {
+        await render(
+            <CratisComponentsProvider
+                value={{
+                    messages: {
+                        stepper: {
+                            next: 'Provider Next',
+                            previous: 'Provider Previous',
+                            submit: 'Provider Submit',
+                        },
+                    },
+                }}
+            >
+                <CommandStepperContent activeStep={1} visitedSteps={new Set([0, 1])}>
+                    <StepperPanel header='First'>Content one</StepperPanel>
+                    <StepperPanel header='Second'>Content two</StepperPanel>
+                </CommandStepperContent>
+            </CratisComponentsProvider>,
+        );
+        expect(buttonLabeled('Provider Previous')).not.to.equal(undefined);
+        expect(buttonLabeled('Provider Submit')).not.to.equal(undefined);
+    });
+
+    it('should use the provider message for Next when not on the last step', async () => {
+        await render(
+            <CratisComponentsProvider
+                value={{ messages: { stepper: { next: 'Provider Next' } } }}
+            >
+                <CommandStepperContent activeStep={0} visitedSteps={new Set([0])}>
+                    <StepperPanel header='First'>Content one</StepperPanel>
+                    <StepperPanel header='Second'>Content two</StepperPanel>
+                </CommandStepperContent>
+            </CratisComponentsProvider>,
+        );
+        expect(buttonLabeled('Provider Next')).not.to.equal(undefined);
+    });
+
+    it('should prefer a named prop override over the provider message', async () => {
+        await render(
+            <CratisComponentsProvider
+                value={{ messages: { stepper: { submit: 'Provider Submit' } } }}
+            >
+                <CommandStepperContent
+                    activeStep={0}
+                    visitedSteps={new Set([0])}
+                    okLabel='Explicit Submit'
+                />
+            </CratisComponentsProvider>,
+        );
+        expect(buttonLabeled('Explicit Submit')).not.to.equal(undefined);
+        expect(buttonLabeled('Provider Submit')).to.equal(undefined);
+    });
+});
diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_using_provider_messages.tsx b/Source/CommandDialog/for_StepperCommandDialog/when_using_provider_messages.tsx
new file mode 100644
index 00000000..13765716
--- /dev/null
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_using_provider_messages.tsx
@@ -0,0 +1,144 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import React from 'react';
+import { vi } from 'vitest';
+import { CratisComponentsProvider } from '../../Common/CratisComponentsProvider';
+import { StepperPanel } from '../StepperPanel';
+import { StepperCommandDialog } from '../StepperCommandDialog';
+import {
+    buttonLabels,
+    render,
+    unmount,
+    type StepperDialogInTheDom,
+} from './given/a_stepper_dialog_in_the_dom';
+
+vi.mock('../../Dialogs/Dialog', () => ({
+    Dialog: (props: { buttons?: React.ReactNode; children?: React.ReactNode }) =>
+        React.createElement('div', { 'data-testid': 'dialog' }, props.buttons, props.children),
+}));
+
+vi.mock('../../Common/Button', () => ({
+    Button: (props: { children?: React.ReactNode; disabled?: boolean; onClick?: () => void }) =>
+        React.createElement('button', { disabled: props.disabled, onClick: props.onClick }, props.children),
+}));
+
+vi.mock('@cratis/arc.react/dialogs', () => ({
+    DialogResult: { None: 0, Yes: 1, No: 2, Ok: 3, Cancelled: 4 },
+    useDialogContext: () => undefined,
+}));
+
+vi.mock('@cratis/arc.react/commands', () => {
+    const commandFormContext = {
+        isValid: true,
+        setCommandValues: () => undefined,
+        setCommandResult: () => undefined,
+        getFieldError: () => undefined,
+    };
+
+    return {
+        CommandForm: (props: { children?: React.ReactNode }) =>
+            React.createElement('div', null, props.children),
+        useCommandFormContext: () => commandFormContext,
+        useCommandInstance: () => ({}),
+        CommandFormFieldWrapper: (props: { field?: React.ReactNode }) =>
+            React.createElement('div', null, props.field),
+    };
+});
+
+class TestCommand {
+    name: string = '';
+}
+
+/**
+ * Precedence coverage for `StepperCommandDialog`'s Next/Previous/Submit labels (the `stepper`
+ * provider group) and its footer Cancel label (the `dialog` provider group, the same group
+ * `Dialog` itself resolves through) — a named component prop wins, then the provider message,
+ * then the English fallback.
+ */
+describe('when StepperCommandDialog uses provider messages', () => {
+    let dialog: StepperDialogInTheDom;
+
+    afterEach(async () => {
+        if (dialog) await unmount(dialog);
+    });
+
+    it('should use the English fallback with no provider and no prop override', async () => {
+        dialog = await render(
+            <CratisComponentsProvider>
+                <StepperCommandDialog<TestCommand>
+                    command={TestCommand as unknown as new () => object}
+                    visible
+                    title='Wizard'
+                    showCancel
+                >
+                    <StepperPanel header='Step 1'>Content one</StepperPanel>
+                    <StepperPanel header='Step 2'>Content two</StepperPanel>
+                </StepperCommandDialog>
+            </CratisComponentsProvider>,
+        );
+
+        buttonLabels(dialog).should.contain('Next');
+        buttonLabels(dialog).should.contain('Cancel');
+    });
+
+    it('should use the provider messages for Next and the footer Cancel when no prop override is given', async () => {
+        dialog = await render(
+            <CratisComponentsProvider
+                value={{
+                    messages: {
+                        stepper: { next: 'Provider Next', submit: 'Provider Submit' },
+                        dialog: { cancel: 'Provider Cancel' },
+                    },
+                }}
+            >
+                <StepperCommandDialog<TestCommand>
+                    command={TestCommand as unknown as new () => object}
+                    visible
+                    title='Wizard'
+                    showCancel
+                >
+                    <StepperPanel header='Step 1'>Content one</StepperPanel>
+                    <StepperPanel header='Step 2'>Content two</StepperPanel>
+                </StepperCommandDialog>
+            </CratisComponentsProvider>,
+        );
+
+        buttonLabels(dialog).should.contain('Provider Next');
+        buttonLabels(dialog).should.contain('Provider Cancel');
+        buttonLabels(dialog).should.not.contain('Next');
+        buttonLabels(dialog).should.not.contain('Cancel');
+    });
+
+    it('should prefer named prop overrides over the provider messages', async () => {
+        dialog = await render(
+            <CratisComponentsProvider
+                value={{
+                    messages: {
+                        stepper: { next: 'Provider Next' },
+                        dialog: { cancel: 'Provider Cancel' },
+                    },
+                }}
+            >
+                <StepperCommandDialog<TestCommand>
+                    command={TestCommand as unknown as new () => object}
+                    visible
+                    title='Wizard'
+                    showCancel
+                    nextLabel='Explicit Next'
+                    cancelLabel='Explicit Cancel'
+                >
+                    <StepperPanel header='Step 1'>Content one</StepperPanel>
+                    <StepperPanel header='Step 2'>Content two</StepperPanel>
+                </StepperCommandDialog>
+            </CratisComponentsProvider>,
+        );
+
+        buttonLabels(dialog).should.contain('Explicit Next');
+        buttonLabels(dialog).should.contain('Explicit Cancel');
+        buttonLabels(dialog).should.not.contain('Provider Next');
+        buttonLabels(dialog).should.not.contain('Provider Cancel');
+    });
+});
diff --git a/Source/Common/CratisComponentsProvider.tsx b/Source/Common/CratisComponentsProvider.tsx
index 3ca1e32c..ae67a399 100644
--- a/Source/Common/CratisComponentsProvider.tsx
+++ b/Source/Common/CratisComponentsProvider.tsx
@@ -32,6 +32,85 @@ export interface CratisDatePickerMessages {
     previousMonth?: string;
     /** Next-month action label. */
     nextMonth?: string;
+    /**
+     * Accessible name for the segmented date input when neither an explicit
+     * `aria-label` nor a `placeholder` is supplied. Previously an orphaned
+     * `'Date'` literal with no override path.
+     */
+    label?: string;
+}
+
+/** Localizable labels owned by the Cratis {@link Dropdown} composition. */
+export interface CratisDropdownMessages {
+    /** Accessible name for the options-popover trigger. */
+    showOptions?: string;
+    /** Accessible name for the clear-selection action. */
+    clearSelection?: string;
+}
+
+/**
+ * Localizable action and dismissal labels shared by every Cratis-owned dialog
+ * surface — {@link Dialog}, {@link CommandDialog}, and {@link StepperCommandDialog}.
+ */
+export interface CratisDialogMessages {
+    /** Primary confirmation label (the `Ok` action in `DialogButtons.Ok*`). */
+    ok?: string;
+    /** Cancellation label (the `Cancel` action, and the Stepper footer Cancel). */
+    cancel?: string;
+    /** Affirmative label (the `Yes` action in `DialogButtons.YesNo*`). */
+    yes?: string;
+    /** Negative label (the `No` action in `DialogButtons.YesNo*`). */
+    no?: string;
+    /** Accessible name for the header close (×) action. */
+    close?: string;
+}
+
+/** Localizable navigation labels owned by {@link CommandStepper} / {@link StepperCommandDialog}. */
+export interface CratisStepperMessages {
+    /** Advance-to-next-step action label. */
+    next?: string;
+    /** Return-to-previous-step action label. */
+    previous?: string;
+    /** Final-step submit action label. */
+    submit?: string;
+}
+
+/** Localizable labels owned by the Cratis {@link Toaster}. */
+export interface CratisNotificationsMessages {
+    /** Accessible name for a toast's dismiss action. */
+    dismiss?: string;
+    /** Accessible name for the toast region landmark. */
+    region?: string;
+}
+
+/** Localizable labels owned by the Cratis {@link DataTableCore} composition. */
+export interface CratisDataTableMessages {
+    /** Accessible name for a single-selection row control. */
+    selectRow?: string;
+    /** Placeholder for the loaded-page search input. */
+    search?: string;
+    /** Accessible name for the loaded-page search input. */
+    searchAriaLabel?: string;
+}
+
+/** Localizable labels owned by the Cratis column-filter popup. */
+export interface CratisColumnFilterMessages {
+    /** Builds the filter-trigger accessible name from the effective field. */
+    filterTriggerAriaLabel?: (field: string) => string;
+    /** Builds the value-control accessible name from the effective field. */
+    valueAriaLabel?: (field: string) => string;
+    /** Accessible name for the match-mode selector. */
+    matchModeAriaLabel?: string;
+    /** Localizes a match mode while retaining its default label as fallback input. */
+    matchModeLabel?: (mode: string, defaultLabel: string) => string;
+    /** Clear action label. */
+    clear?: string;
+    /** Apply action label. */
+    apply?: string;
+    /** Boolean true option label. */
+    true?: string;
+    /** Boolean false option label. */
+    false?: string;
 }
 
 /** Components-owned message groups. */
@@ -40,6 +119,18 @@ export interface CratisComponentsMessages {
     paginator?: CratisPaginatorMessages;
     /** Date-picker labels. */
     datePicker?: CratisDatePickerMessages;
+    /** Dropdown labels. */
+    dropdown?: CratisDropdownMessages;
+    /** Dialog action/dismissal labels shared by Dialog, CommandDialog, and StepperCommandDialog. */
+    dialog?: CratisDialogMessages;
+    /** Stepper navigation labels shared by CommandStepper and StepperCommandDialog. */
+    stepper?: CratisStepperMessages;
+    /** Toaster labels. */
+    notifications?: CratisNotificationsMessages;
+    /** DataTable search/selection labels. */
+    dataTable?: CratisDataTableMessages;
+    /** Column-filter popup labels and match-mode copy. */
+    columnFilter?: CratisColumnFilterMessages;
 }
 
 interface LegacyLocaleMessages {
@@ -95,6 +186,39 @@ export const cratisDefaults: CratisComponentsConfig = {
             openCalendar: 'Open calendar',
             previousMonth: 'Previous month',
             nextMonth: 'Next month',
+            label: 'Date',
+        },
+        dropdown: {
+            showOptions: 'Show options',
+            clearSelection: 'Clear selection',
+        },
+        dialog: {
+            ok: 'Ok',
+            cancel: 'Cancel',
+            yes: 'Yes',
+            no: 'No',
+            close: 'Close',
+        },
+        stepper: {
+            next: 'Next',
+            previous: 'Previous',
+            submit: 'Submit',
+        },
+        notifications: {
+            dismiss: 'Dismiss',
+            region: 'Notifications',
+        },
+        dataTable: {
+            selectRow: 'Select row',
+            search: 'Search…',
+            searchAriaLabel: 'Search table',
+        },
+        columnFilter: {
+            matchModeAriaLabel: 'Match mode',
+            clear: 'Clear',
+            apply: 'Apply',
+            true: 'True',
+            false: 'False',
         },
     },
 };
diff --git a/Source/Common/DatePickerInput.tsx b/Source/Common/DatePickerInput.tsx
index 3558b2be..161618c2 100644
--- a/Source/Common/DatePickerInput.tsx
+++ b/Source/Common/DatePickerInput.tsx
@@ -207,7 +207,11 @@ export const DatePickerInput = ({
     const effectiveInvalid = invalid ?? pt?.input?.['aria-invalid'] ?? false;
     const effectivePlaceholder = placeholder ?? pt?.input?.placeholder;
     const effectiveAriaLabel =
-        ariaLabel ?? pt?.input?.['aria-label'] ?? effectivePlaceholder ?? 'Date';
+        ariaLabel ??
+        pt?.input?.['aria-label'] ??
+        effectivePlaceholder ??
+        datePickerMessages?.label ??
+        'Date';
     const effectiveAriaLabelledby = ariaLabelledby ?? pt?.input?.['aria-labelledby'];
     const effectiveAriaDescribedby = ariaDescribedby ?? pt?.input?.['aria-describedby'];
     const inputPartAttributes = {
diff --git a/Source/Common/for_CratisComponentsProvider/when_every_owned_label_is_overridden.tsx b/Source/Common/for_CratisComponentsProvider/when_every_owned_label_is_overridden.tsx
new file mode 100644
index 00000000..ca64035c
--- /dev/null
+++ b/Source/Common/for_CratisComponentsProvider/when_every_owned_label_is_overridden.tsx
@@ -0,0 +1,254 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { expect } from 'chai';
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, it } from 'vitest';
+import { DialogButtons } from '@cratis/arc.react/dialogs';
+import { CratisComponentsProvider } from '../CratisComponentsProvider';
+import { DatePickerInput } from '../DatePickerInput';
+import { Dropdown } from '../../Dropdown/Dropdown';
+import { Dialog } from '../../Dialogs/Dialog';
+import { CommandStepperContent } from '../../CommandDialog/CommandStepper';
+import { StepperPanel } from '../../CommandDialog/StepperPanel';
+import { Toaster, toast } from '../../Notifications';
+import { Column } from '../../DataTables/Column';
+import { DataTableCore } from '../../DataTables/DataTableCore';
+
+/**
+ * Sentinel-provider gate for every owned label audited in this pass: renders every fixed
+ * surface at once under a single provider whose messages are all distinct, unmistakable
+ * sentinel strings, then asserts every resolved label is that sentinel — never the English
+ * default it would render as with no provider configured. A regression that silently drops a
+ * provider message back to its English literal fails one of these assertions rather than
+ * only a narrower per-component precedence spec.
+ */
+describe('when every owned label is overridden through the provider', () => {
+    let container: HTMLDivElement;
+    let root: Root;
+
+    const sentinelMessages = {
+        dropdown: {
+            showOptions: 'SENTINEL-show-options',
+            clearSelection: 'SENTINEL-clear-selection',
+        },
+        dialog: {
+            ok: 'SENTINEL-ok',
+            cancel: 'SENTINEL-cancel',
+            close: 'SENTINEL-close',
+        },
+        stepper: {
+            next: 'SENTINEL-next',
+            previous: 'SENTINEL-previous',
+            submit: 'SENTINEL-submit',
+        },
+        notifications: {
+            dismiss: 'SENTINEL-dismiss',
+            region: 'SENTINEL-region',
+        },
+        dataTable: {
+            selectRow: 'SENTINEL-select-row',
+            search: 'SENTINEL-search',
+            searchAriaLabel: 'SENTINEL-search-aria',
+        },
+        columnFilter: {
+            matchModeAriaLabel: 'SENTINEL-match-mode',
+            clear: 'SENTINEL-columnfilter-clear',
+            apply: 'SENTINEL-apply',
+            true: 'SENTINEL-true',
+            false: 'SENTINEL-false',
+        },
+        datePicker: {
+            label: 'SENTINEL-date-label',
+        },
+    };
+
+    const englishDefaults = [
+        'Show options',
+        'Clear selection',
+        'Ok',
+        'Cancel',
+        'Close',
+        'Next',
+        'Previous',
+        'Submit',
+        'Dismiss',
+        'Notifications',
+        'Select row',
+        'Search\u2026',
+        'Search table',
+        'Match mode',
+        'Clear',
+        'Apply',
+        'True',
+        'False',
+        'Date',
+    ];
+
+    beforeEach(async () => {
+        (
+            globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
+        ).IS_REACT_ACT_ENVIRONMENT = true;
+        (globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver ??= class {
+            observe() {
+                return undefined;
+            }
+            unobserve() {
+                return undefined;
+            }
+            disconnect() {
+                return undefined;
+            }
+        };
+        toast.dismiss();
+        container = document.createElement('div');
+        document.body.append(container);
+        root = createRoot(container);
+
+        await act(async () => {
+            root.render(
+                <CratisComponentsProvider value={{ messages: sentinelMessages }}>
+                    <Dropdown
+                        value='frontend'
+                        options={[{ label: 'Frontend', value: 'frontend' }]}
+                        filter
+                        showClear
+                    />
+                    <Dialog title='Sentinel dialog' buttons={DialogButtons.OkCancel}>
+                        Body
+                    </Dialog>
+                    <CommandStepperContent activeStep={0} visitedSteps={new Set([0])}>
+                        <StepperPanel header='First'>One</StepperPanel>
+                        <StepperPanel header='Second'>Two</StepperPanel>
+                    </CommandStepperContent>
+                    <Toaster timeout={60_000} />
+                    <DataTableCore
+                        data={[{ name: 'Morgan', role: true }]}
+                        dataKey='name'
+                        emptyMessage='No rows'
+                        globalFilterFields={['name']}
+                        selectionMode='single'
+                    >
+                        <Column field='name' header='Name' />
+                        <Column
+                            field='role'
+                            header='Role'
+                            filter
+                            dataType='boolean'
+                        />
+                        <Column selectionMode='single' />
+                    </DataTableCore>
+                    <DatePickerInput value={null} onChange={() => undefined} />
+                </CratisComponentsProvider>,
+            );
+        });
+
+        await act(async () => {
+            await new Promise((resolve) => setTimeout(resolve, 400));
+        });
+
+        await act(async () => {
+            toast({ title: 'Hello' });
+        });
+
+        const filterTrigger = container.querySelector<HTMLButtonElement>(
+            '.cratis-filter-trigger',
+        );
+        await act(async () => filterTrigger?.click());
+    });
+
+    afterEach(async () => {
+        await act(async () => {
+            toast.dismiss();
+            root.unmount();
+        });
+        container.remove();
+    });
+
+    it('should localize the Dropdown show-options and clear-selection labels', () => {
+        const trigger = container.querySelector('[data-cratis-part="trigger"]');
+        const clear = container.querySelector('[data-cratis-part="clear"]');
+        expect(trigger?.getAttribute('aria-label')).to.equal('SENTINEL-show-options');
+        expect(clear?.getAttribute('aria-label')).to.equal('SENTINEL-clear-selection');
+    });
+
+    it('should localize the Dialog Ok/Cancel/Close labels', () => {
+        const buttonLabeled = (label: string) =>
+            Array.from(document.querySelectorAll('button')).find(
+                (button) => button.textContent === label,
+            );
+        expect(buttonLabeled('SENTINEL-ok')).not.to.equal(undefined);
+        expect(buttonLabeled('SENTINEL-cancel')).not.to.equal(undefined);
+        expect(
+            document
+                .querySelector('[data-cratis-part="close"]')
+                ?.getAttribute('aria-label'),
+        ).to.equal('SENTINEL-close');
+    });
+
+    it('should localize the Stepper Next label', () => {
+        const buttonLabeled = (label: string) =>
+            Array.from(document.querySelectorAll('button')).find(
+                (button) => button.textContent === label,
+            );
+        expect(buttonLabeled('SENTINEL-next')).not.to.equal(undefined);
+    });
+
+    it('should localize the Toaster dismiss and region labels', () => {
+        expect(
+            document
+                .querySelector('[data-cratis-part="region"]')
+                ?.getAttribute('aria-label'),
+        ).to.equal('SENTINEL-region');
+        expect(
+            document
+                .querySelector('.cratis-toast [data-cratis-part="close"]')
+                ?.getAttribute('aria-label'),
+        ).to.equal('SENTINEL-dismiss');
+    });
+
+    it('should localize the DataTableCore search and selection labels', () => {
+        const search = container.querySelector('[data-cratis-part="search-input"]');
+        const selection = container.querySelector('input[type="radio"]');
+        expect(search?.getAttribute('placeholder')).to.equal('SENTINEL-search');
+        expect(search?.getAttribute('aria-label')).to.equal('SENTINEL-search-aria');
+        expect(selection?.getAttribute('aria-label')).to.equal('SENTINEL-select-row');
+    });
+
+    it('should localize the ColumnFilterMenu clear/apply/boolean/match-mode labels', () => {
+        const menu = document.querySelector('.cratis-filter-menu');
+        expect(menu?.textContent).to.contain('SENTINEL-columnfilter-clear');
+        expect(menu?.textContent).to.contain('SENTINEL-apply');
+        expect(menu?.textContent).to.contain('SENTINEL-true');
+        expect(menu?.textContent).to.contain('SENTINEL-false');
+        expect(menu?.querySelector('[aria-label="SENTINEL-match-mode"]')).not.to.equal(
+            null,
+        );
+    });
+
+    it('should localize the orphaned DatePicker accessible-name fallback', () => {
+        const group = container.querySelector('[data-cratis-part="group"]');
+        expect(group?.getAttribute('aria-label')).to.equal('SENTINEL-date-label');
+    });
+
+    it('should never leave an audited surface showing its English default', () => {
+        const attributeValues = Array.from(
+            document.querySelectorAll('[data-cratis-part][aria-label], [data-cratis-part][placeholder], [data-cratis-part][title]'),
+        ).flatMap((element) => [
+            element.getAttribute('aria-label'),
+            element.getAttribute('placeholder'),
+            element.getAttribute('title'),
+        ]);
+        const textValues = Array.from(document.querySelectorAll('button')).map(
+            (element) => element.textContent,
+        );
+
+        for (const englishDefault of englishDefaults) {
+            expect(attributeValues).not.to.include(englishDefault);
+            expect(textValues).not.to.include(englishDefault);
+        }
+    });
+});
diff --git a/Source/Common/for_DatePickerInput/when_no_accessible_name_or_placeholder_is_given.tsx b/Source/Common/for_DatePickerInput/when_no_accessible_name_or_placeholder_is_given.tsx
new file mode 100644
index 00000000..87e84e52
--- /dev/null
+++ b/Source/Common/for_DatePickerInput/when_no_accessible_name_or_placeholder_is_given.tsx
@@ -0,0 +1,91 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { expect } from 'chai';
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, describe, it } from 'vitest';
+import { CratisComponentsProvider } from '../CratisComponentsProvider';
+import { DatePickerInput } from '../DatePickerInput';
+
+/**
+ * Precedence coverage for the orphaned `'Date'` fallback: when neither an explicit `aria-label`
+ * nor a `placeholder` is supplied, the segmented input's accessible name now resolves through
+ * the provider's `datePicker.label` message before falling back to the English `'Date'`
+ * literal it always had.
+ */
+describe('when no accessible name or placeholder is given', () => {
+    let container: HTMLDivElement;
+    let root: Root;
+
+    const render = async (element: React.ReactElement) => {
+        (
+            globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
+        ).IS_REACT_ACT_ENVIRONMENT = true;
+        container = document.createElement('div');
+        document.body.append(container);
+        root = createRoot(container);
+        await act(async () => {
+            root.render(element);
+        });
+    };
+
+    afterEach(async () => {
+        await act(async () => root.unmount());
+        container.remove();
+    });
+
+    const group = () => container.querySelector<HTMLElement>('[data-cratis-part="group"]');
+
+    it("should fall back to the English 'Date' literal with no provider message", async () => {
+        await render(
+            <CratisComponentsProvider>
+                <DatePickerInput value={null} onChange={() => undefined} />
+            </CratisComponentsProvider>,
+        );
+        expect(group()?.getAttribute('aria-label')).to.equal('Date');
+    });
+
+    it('should use the provider message when no aria-label or placeholder is given', async () => {
+        await render(
+            <CratisComponentsProvider
+                value={{ messages: { datePicker: { label: 'Provider Date Label' } } }}
+            >
+                <DatePickerInput value={null} onChange={() => undefined} />
+            </CratisComponentsProvider>,
+        );
+        expect(group()?.getAttribute('aria-label')).to.equal('Provider Date Label');
+    });
+
+    it('should prefer an explicit aria-label over the provider message', async () => {
+        await render(
+            <CratisComponentsProvider
+                value={{ messages: { datePicker: { label: 'Provider Date Label' } } }}
+            >
+                <DatePickerInput
+                    value={null}
+                    onChange={() => undefined}
+                    aria-label='Explicit label'
+                />
+            </CratisComponentsProvider>,
+        );
+        expect(group()?.getAttribute('aria-label')).to.equal('Explicit label');
+    });
+
+    it('should prefer a placeholder over the provider message', async () => {
+        await render(
+            <CratisComponentsProvider
+                value={{ messages: { datePicker: { label: 'Provider Date Label' } } }}
+            >
+                <DatePickerInput
+                    value={null}
+                    onChange={() => undefined}
+                    placeholder='Choose a date'
+                />
+            </CratisComponentsProvider>,
+        );
+        expect(group()?.getAttribute('aria-label')).to.equal('Choose a date');
+    });
+});
diff --git a/Source/DataTables/ColumnFilterMenu.tsx b/Source/DataTables/ColumnFilterMenu.tsx
index 98e3c28f..4711205c 100644
--- a/Source/DataTables/ColumnFilterMenu.tsx
+++ b/Source/DataTables/ColumnFilterMenu.tsx
@@ -16,6 +16,7 @@ import { Dialog as AriaDialog, DialogTrigger } from 'react-aria-components/Dialo
 import { Popover } from 'react-aria-components/Popover';
 import { Button, type ButtonParts } from '../Common/Button';
 import { DatePickerInput } from '../Common/DatePickerInput';
+import { useCratisComponentsConfig } from '../Common/CratisComponentsProvider';
 import { Dropdown, type DropdownParts } from '../Dropdown/Dropdown';
 import {
     DataTableFilterMatchMode,
@@ -200,21 +201,29 @@ export const ColumnFilterMenu = ({
         setDraftMode(constraint?.matchMode ?? defaultModeFor(dataType));
     }, [constraint, dataType]);
 
+    const { messages } = useCratisComponentsConfig();
+    const columnFilterMessages = messages?.columnFilter;
     const resolvedLabels: ColumnFilterMenuLabels = {
         filterTriggerAriaLabel:
             labels?.filterTriggerAriaLabel ??
+            columnFilterMessages?.filterTriggerAriaLabel ??
             defaultColumnFilterMenuLabels.filterTriggerAriaLabel,
         valueAriaLabel:
-            labels?.valueAriaLabel ?? defaultColumnFilterMenuLabels.valueAriaLabel,
+            labels?.valueAriaLabel ??
+            columnFilterMessages?.valueAriaLabel ??
+            defaultColumnFilterMenuLabels.valueAriaLabel,
         matchModeAriaLabel:
             labels?.matchModeAriaLabel ??
+            columnFilterMessages?.matchModeAriaLabel ??
             defaultColumnFilterMenuLabels.matchModeAriaLabel,
         matchModeLabel:
-            labels?.matchModeLabel ?? defaultColumnFilterMenuLabels.matchModeLabel,
-        clear: labels?.clear ?? defaultColumnFilterMenuLabels.clear,
-        apply: labels?.apply ?? defaultColumnFilterMenuLabels.apply,
-        true: labels?.true ?? defaultColumnFilterMenuLabels.true,
-        false: labels?.false ?? defaultColumnFilterMenuLabels.false,
+            labels?.matchModeLabel ??
+            columnFilterMessages?.matchModeLabel ??
+            defaultColumnFilterMenuLabels.matchModeLabel,
+        clear: labels?.clear ?? columnFilterMessages?.clear ?? defaultColumnFilterMenuLabels.clear,
+        apply: labels?.apply ?? columnFilterMessages?.apply ?? defaultColumnFilterMenuLabels.apply,
+        true: labels?.true ?? columnFilterMessages?.true ?? defaultColumnFilterMenuLabels.true,
+        false: labels?.false ?? columnFilterMessages?.false ?? defaultColumnFilterMenuLabels.false,
     };
     const modeOptions = optionsFor(dataType).map((option) => ({
         ...option,
diff --git a/Source/DataTables/DataTableCore.tsx b/Source/DataTables/DataTableCore.tsx
index 34d68c28..1022568d 100644
--- a/Source/DataTables/DataTableCore.tsx
+++ b/Source/DataTables/DataTableCore.tsx
@@ -12,6 +12,7 @@ import React, {
     type TdHTMLAttributes,
     type ThHTMLAttributes,
 } from 'react';
+import { useCratisComponentsConfig } from '../Common/CratisComponentsProvider';
 import type { ColumnProps } from './Column';
 import { ColumnFilterMenu } from './ColumnFilterMenu';
 import type { DataTableSelectionChangeEvent } from './DataTableSelectionChangeEvent';
@@ -75,7 +76,7 @@ export interface DataTableCoreProps<TData extends object> {
     emptyMessage: ReactNode;
     /** Enables single-row selection. */
     selectionMode?: 'single';
-    /** Accessible name for row selection controls. */
+    /** Accessible name for row selection controls. Falls back to the provider's `dataTable.selectRow` message, then `'Select row'`. */
     selectionAriaLabel?: string;
     /** Controlled selected row. */
     selection?: TData | null;
@@ -87,9 +88,9 @@ export interface DataTableCoreProps<TData extends object> {
     rowClassName?: (rowData: TData) => string;
     /** Row fields searched on the loaded page. */
     globalFilterFields?: string[];
-    /** Placeholder for the loaded-page search input. */
+    /** Placeholder for the loaded-page search input. Falls back to the provider's `dataTable.search` message, then `'Search…'`. */
     globalSearchPlaceholder?: string;
-    /** Accessible name for the loaded-page search input. */
+    /** Accessible name for the loaded-page search input. Falls back to the provider's `dataTable.searchAriaLabel` message, then `'Search table'`. */
     globalSearchAriaLabel?: string;
     /** Initial per-field filter constraints. */
     defaultFilters?: DataTableFilterMeta;
@@ -247,14 +248,14 @@ export const DataTableCore = <TData extends object>({
     dataKey,
     emptyMessage,
     selectionMode,
-    selectionAriaLabel = 'Select row',
+    selectionAriaLabel,
     selection,
     onSelectionChange,
     onRowClick,
     rowClassName,
     globalFilterFields,
-    globalSearchPlaceholder = 'Search…',
-    globalSearchAriaLabel = 'Search table',
+    globalSearchPlaceholder,
+    globalSearchAriaLabel,
     defaultFilters,
     onFilter,
     scrollable,
@@ -263,6 +264,14 @@ export const DataTableCore = <TData extends object>({
     style,
     pt,
 }: DataTableCoreProps<TData>) => {
+    const { messages } = useCratisComponentsConfig();
+    const dataTableMessages = messages?.dataTable;
+    const resolvedSelectionAriaLabel =
+        selectionAriaLabel ?? dataTableMessages?.selectRow ?? 'Select row';
+    const resolvedGlobalSearchPlaceholder =
+        globalSearchPlaceholder ?? dataTableMessages?.search ?? 'Search…';
+    const resolvedGlobalSearchAriaLabel =
+        globalSearchAriaLabel ?? dataTableMessages?.searchAriaLabel ?? 'Search table';
     const columns = useColumns(children);
     const selectionGroupName = useId();
     const [filters, setFilters] = useState<DataTableFilterMeta>(defaultFilters ?? {});
@@ -374,8 +383,8 @@ export const DataTableCore = <TData extends object>({
                     <input
                         {...pt?.searchInput}
                         value={globalFilter}
-                        placeholder={globalSearchPlaceholder}
-                        aria-label={globalSearchAriaLabel}
+                        placeholder={resolvedGlobalSearchPlaceholder}
+                        aria-label={resolvedGlobalSearchAriaLabel}
                         className={classNames(
                             'cratis-datatable-search__input',
                             pt?.searchInput?.className,
@@ -612,7 +621,7 @@ export const DataTableCore = <TData extends object>({
                                                         name={selectionGroupName}
                                                         readOnly
                                                         tabIndex={-1}
-                                                        aria-label={selectionAriaLabel}
+                                                        aria-label={resolvedSelectionAriaLabel}
                                                         checked={isSelected}
                                                     />
                                                 ) : (
diff --git a/Source/DataTables/for_ColumnFilterMenu/given/a_filterable_table.tsx b/Source/DataTables/for_ColumnFilterMenu/given/a_filterable_table.tsx
index 78a2f574..71c6bd14 100644
--- a/Source/DataTables/for_ColumnFilterMenu/given/a_filterable_table.tsx
+++ b/Source/DataTables/for_ColumnFilterMenu/given/a_filterable_table.tsx
@@ -3,7 +3,10 @@
 
 import { act } from 'react';
 import { createRoot, type Root } from 'react-dom/client';
-import { CratisComponentsProvider } from '../../../Common/CratisComponentsProvider';
+import {
+    CratisComponentsProvider,
+    type CratisComponentsConfig,
+} from '../../../Common/CratisComponentsProvider';
 import { Column, type ColumnProps } from '../../Column';
 import { DataTableCore } from '../../DataTableCore';
 import type { DataTableFilterMeta } from '../../DataTableFilterMeta';
@@ -24,6 +27,8 @@ export interface FilterableTableOptions {
     column?: ColumnProps<Row>;
     defaultFilters?: DataTableFilterMeta;
     onFilter?: (filters: DataTableFilterMeta) => void;
+    /** Overrides the `CratisComponentsProvider` value the table renders under. */
+    providerValue?: CratisComponentsConfig;
 }
 
 export interface FilterableTableInTheDom {
@@ -65,7 +70,7 @@ export const renderFilterableTable = async (
 
     await act(async () => {
         root.render(
-            <CratisComponentsProvider>
+            <CratisComponentsProvider value={options.providerValue}>
                 <DataTableCore<Row>
                     data={rows}
                     dataKey='id'
diff --git a/Source/DataTables/for_ColumnFilterMenu/when_using_provider_messages.tsx b/Source/DataTables/for_ColumnFilterMenu/when_using_provider_messages.tsx
new file mode 100644
index 00000000..8cd7aaa4
--- /dev/null
+++ b/Source/DataTables/for_ColumnFilterMenu/when_using_provider_messages.tsx
@@ -0,0 +1,98 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { expect } from 'chai';
+import { afterEach, beforeEach, describe, it } from 'vitest';
+import {
+    type FilterableTableInTheDom,
+    openFilterMenu,
+    renderFilterableTable,
+    unmountFilterableTable,
+} from './given/a_filterable_table';
+
+/**
+ * Precedence coverage for the `columnFilter` provider message group: a named `filterLabels`
+ * override wins, then the provider message, then the English fallback. Also covers the
+ * boolean true/false option labels and the match-mode selector's accessible name.
+ */
+describe('when ColumnFilterMenu uses provider messages', () => {
+    let table: FilterableTableInTheDom;
+    let menu: HTMLElement;
+
+    afterEach(async () => {
+        await unmountFilterableTable(table);
+    });
+
+    describe('and no filterLabels override is given', () => {
+        beforeEach(async () => {
+            table = await renderFilterableTable({
+                column: {
+                    field: 'role',
+                    filterField: 'roleCode',
+                    header: 'Role',
+                    filter: true,
+                    dataType: 'boolean',
+                    showFilterMatchModes: true,
+                },
+                providerValue: {
+                    messages: {
+                        columnFilter: {
+                            clear: 'Provider Clear',
+                            apply: 'Provider Apply',
+                            true: 'Provider True',
+                            false: 'Provider False',
+                            matchModeAriaLabel: 'Provider Match Mode',
+                        },
+                    },
+                },
+            });
+            menu = await openFilterMenu(table);
+        });
+
+        it('should use the provider clear/apply labels', () => {
+            const actions = menu.querySelector('.cratis-filter-menu-actions');
+            expect(actions?.textContent).to.contain('Provider Clear');
+            expect(actions?.textContent).to.contain('Provider Apply');
+        });
+
+        it('should use the provider match-mode accessible name', () => {
+            const matchMode = menu.querySelector('[aria-label="Provider Match Mode"]');
+            expect(matchMode).not.to.equal(null);
+        });
+    });
+
+    describe('and a per-instance filterLabels override is also given', () => {
+        beforeEach(async () => {
+            table = await renderFilterableTable({
+                column: {
+                    field: 'role',
+                    filterField: 'roleCode',
+                    header: 'Role',
+                    filter: true,
+                    dataType: 'boolean',
+                    showFilterMatchModes: false,
+                    filterLabels: { clear: 'Explicit Clear' },
+                },
+                providerValue: {
+                    messages: {
+                        columnFilter: { clear: 'Provider Clear', apply: 'Provider Apply' },
+                    },
+                },
+            });
+            menu = await openFilterMenu(table);
+        });
+
+        it('should prefer the explicit label over the provider message', () => {
+            const actions = menu.querySelector('.cratis-filter-menu-actions');
+            expect(actions?.textContent).to.contain('Explicit Clear');
+            expect(actions?.textContent).not.to.contain('Provider Clear');
+        });
+
+        it('should still fall through to the provider message for a label the instance did not override', () => {
+            const actions = menu.querySelector('.cratis-filter-menu-actions');
+            expect(actions?.textContent).to.contain('Provider Apply');
+        });
+    });
+});
diff --git a/Source/DataTables/for_DataTableCore/when_using_provider_messages.tsx b/Source/DataTables/for_DataTableCore/when_using_provider_messages.tsx
new file mode 100644
index 00000000..0e971195
--- /dev/null
+++ b/Source/DataTables/for_DataTableCore/when_using_provider_messages.tsx
@@ -0,0 +1,127 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { expect } from 'chai';
+import { afterEach, describe, it } from 'vitest';
+import { CratisComponentsProvider } from '../../Common/CratisComponentsProvider';
+import { Column } from '../Column';
+import { DataTableCore } from '../DataTableCore';
+
+/**
+ * Precedence coverage for the `dataTable` provider message group: a named component prop
+ * (`selectionAriaLabel`, `globalSearchPlaceholder`, `globalSearchAriaLabel`) wins, then the
+ * provider message, then the English fallback.
+ */
+describe('when DataTableCore uses provider messages', () => {
+    let container: HTMLDivElement;
+    let root: Root;
+
+    const render = async (element: React.ReactElement) => {
+        (
+            globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
+        ).IS_REACT_ACT_ENVIRONMENT = true;
+        container = document.createElement('div');
+        document.body.append(container);
+        root = createRoot(container);
+        await act(async () => {
+            root.render(element);
+        });
+    };
+
+    afterEach(async () => {
+        await act(async () => root.unmount());
+        container.remove();
+    });
+
+    const searchInput = () =>
+        container.querySelector<HTMLInputElement>('[data-cratis-part="search-input"]');
+    const selectionInput = () =>
+        container.querySelector<HTMLInputElement>('input[type="radio"]');
+
+    it('should use the English fallback with no provider and no prop override', async () => {
+        await render(
+            <CratisComponentsProvider>
+                <DataTableCore
+                    data={[{ name: 'Morgan' }]}
+                    dataKey='name'
+                    emptyMessage='No people'
+                    globalFilterFields={['name']}
+                    selectionMode='single'
+                >
+                    <Column field='name' header='Name' />
+                    <Column selectionMode='single' />
+                </DataTableCore>
+            </CratisComponentsProvider>,
+        );
+        expect(searchInput()?.placeholder).to.equal('Search\u2026');
+        expect(searchInput()?.getAttribute('aria-label')).to.equal('Search table');
+        expect(selectionInput()?.getAttribute('aria-label')).to.equal('Select row');
+    });
+
+    it('should use the provider message when no prop override is given', async () => {
+        await render(
+            <CratisComponentsProvider
+                value={{
+                    messages: {
+                        dataTable: {
+                            selectRow: 'Provider Select Row',
+                            search: 'Provider Search',
+                            searchAriaLabel: 'Provider Search Aria',
+                        },
+                    },
+                }}
+            >
+                <DataTableCore
+                    data={[{ name: 'Morgan' }]}
+                    dataKey='name'
+                    emptyMessage='No people'
+                    globalFilterFields={['name']}
+                    selectionMode='single'
+                >
+                    <Column field='name' header='Name' />
+                    <Column selectionMode='single' />
+                </DataTableCore>
+            </CratisComponentsProvider>,
+        );
+        expect(searchInput()?.placeholder).to.equal('Provider Search');
+        expect(searchInput()?.getAttribute('aria-label')).to.equal('Provider Search Aria');
+        expect(selectionInput()?.getAttribute('aria-label')).to.equal('Provider Select Row');
+    });
+
+    it('should prefer a named prop override over the provider message', async () => {
+        await render(
+            <CratisComponentsProvider
+                value={{
+                    messages: {
+                        dataTable: {
+                            selectRow: 'Provider Select Row',
+                            search: 'Provider Search',
+                            searchAriaLabel: 'Provider Search Aria',
+                        },
+                    },
+                }}
+            >
+                <DataTableCore
+                    data={[{ name: 'Morgan' }]}
+                    dataKey='name'
+                    emptyMessage='No people'
+                    globalFilterFields={['name']}
+                    globalSearchPlaceholder='Explicit Search'
+                    globalSearchAriaLabel='Explicit Search Aria'
+                    selectionAriaLabel='Explicit Select Row'
+                    selectionMode='single'
+                >
+                    <Column field='name' header='Name' />
+                    <Column selectionMode='single' />
+                </DataTableCore>
+            </CratisComponentsProvider>,
+        );
+        expect(searchInput()?.placeholder).to.equal('Explicit Search');
+        expect(searchInput()?.getAttribute('aria-label')).to.equal('Explicit Search Aria');
+        expect(selectionInput()?.getAttribute('aria-label')).to.equal('Explicit Select Row');
+    });
+});
diff --git a/Source/Dialogs/Dialog.tsx b/Source/Dialogs/Dialog.tsx
index 5df5793c..4aa8b972 100644
--- a/Source/Dialogs/Dialog.tsx
+++ b/Source/Dialogs/Dialog.tsx
@@ -12,6 +12,7 @@ import type {
 } from 'react';
 import { useEffect, useRef, useSyncExternalStore } from 'react';
 import { DialogInitialFocus } from './DialogInitialFocus';
+import { useCratisComponentsConfig } from '../Common/CratisComponentsProvider';
 
 /** Callback handling a typed dialog result; return `false` to keep the dialog open. */
 export type CloseDialog = (
@@ -86,15 +87,15 @@ export interface DialogProps {
     isValid?: boolean;
     /** Disables every action and dismissal path while work is in flight. */
     isBusy?: boolean;
-    /** Label for the Ok action. */
+    /** Label for the Ok action. Falls back to the provider's `dialog.ok` message, then `'Ok'`. */
     okLabel?: string;
-    /** Label for the Cancel action. */
+    /** Label for the Cancel action. Falls back to the provider's `dialog.cancel` message, then `'Cancel'`. */
     cancelLabel?: string;
-    /** Label for the Yes action. */
+    /** Label for the Yes action. Falls back to the provider's `dialog.yes` message, then `'Yes'`. */
     yesLabel?: string;
-    /** Label for the No action. */
+    /** Label for the No action. Falls back to the provider's `dialog.no` message, then `'No'`. */
     noLabel?: string;
-    /** Accessible label for the header close button. */
+    /** Accessible label for the header close button. Falls back to the provider's `dialog.close` message, then `'Close'`. */
     closeAriaLabel?: string;
     /** Enables header, Escape, and backdrop dismissal when not busy. */
     dismissable?: boolean;
@@ -137,15 +138,22 @@ export const Dialog = ({
     contentStyle,
     isValid,
     isBusy = false,
-    okLabel = 'Ok',
-    cancelLabel = 'Cancel',
-    yesLabel = 'Yes',
-    noLabel = 'No',
-    closeAriaLabel = 'Close',
+    okLabel,
+    cancelLabel,
+    yesLabel,
+    noLabel,
+    closeAriaLabel,
     dismissable,
     className,
     pt,
 }: DialogProps) => {
+    const { messages } = useCratisComponentsConfig();
+    const dialogMessages = messages?.dialog;
+    const resolvedOkLabel = okLabel ?? dialogMessages?.ok ?? 'Ok';
+    const resolvedCancelLabel = cancelLabel ?? dialogMessages?.cancel ?? 'Cancel';
+    const resolvedYesLabel = yesLabel ?? dialogMessages?.yes ?? 'Yes';
+    const resolvedNoLabel = noLabel ?? dialogMessages?.no ?? 'No';
+    const resolvedCloseAriaLabel = closeAriaLabel ?? dialogMessages?.close ?? 'Close';
     let contextCloseDialog: ((result: DialogResult) => void) | undefined;
     try {
         const context = useDialogContext();
@@ -241,19 +249,24 @@ export const Dialog = ({
 
         switch (buttons) {
             case DialogButtons.Ok:
-                return footerButton(DialogResult.Ok, okLabel, true, focusesConfirmButton);
+                return footerButton(
+                    DialogResult.Ok,
+                    resolvedOkLabel,
+                    true,
+                    focusesConfirmButton,
+                );
             case DialogButtons.OkCancel:
                 return (
                     <>
                         {footerButton(
                             DialogResult.Ok,
-                            okLabel,
+                            resolvedOkLabel,
                             true,
                             focusesConfirmButton,
                         )}
                         {footerButton(
                             DialogResult.Cancelled,
-                            cancelLabel,
+                            resolvedCancelLabel,
                             false,
                             focusesDismissingButton,
                         )}
@@ -264,13 +277,13 @@ export const Dialog = ({
                     <>
                         {footerButton(
                             DialogResult.Yes,
-                            yesLabel,
+                            resolvedYesLabel,
                             true,
                             focusesConfirmButton,
                         )}
                         {footerButton(
                             DialogResult.No,
-                            noLabel,
+                            resolvedNoLabel,
                             false,
                             focusesDismissingButton,
                         )}
@@ -281,14 +294,14 @@ export const Dialog = ({
                     <>
                         {footerButton(
                             DialogResult.Yes,
-                            yesLabel,
+                            resolvedYesLabel,
                             true,
                             focusesConfirmButton,
                         )}
-                        {footerButton(DialogResult.No, noLabel, false, false)}
+                        {footerButton(DialogResult.No, resolvedNoLabel, false, false)}
                         {footerButton(
                             DialogResult.Cancelled,
-                            cancelLabel,
+                            resolvedCancelLabel,
                             false,
                             focusesDismissingButton,
                         )}
@@ -332,7 +345,7 @@ export const Dialog = ({
                                 pt?.close?.className,
                             )}
                             data-cratis-part='close'
-                            aria-label={closeAriaLabel}
+                            aria-label={resolvedCloseAriaLabel}
                             onClick={() => void handleClose(DialogResult.Cancelled)}
                         >
                             <span aria-hidden='true'>×</span>
diff --git a/Source/Dialogs/for_Dialog/when_using_provider_messages.tsx b/Source/Dialogs/for_Dialog/when_using_provider_messages.tsx
new file mode 100644
index 00000000..c571a24d
--- /dev/null
+++ b/Source/Dialogs/for_Dialog/when_using_provider_messages.tsx
@@ -0,0 +1,119 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { expect } from 'chai';
+import { afterEach, describe, it } from 'vitest';
+import { DialogButtons } from '@cratis/arc.react/dialogs';
+import { CratisComponentsProvider } from '../../Common/CratisComponentsProvider';
+import { Dialog } from '../Dialog';
+
+/**
+ * Precedence coverage for the `dialog` provider message group shared by `Dialog`,
+ * `CommandDialog`, and `StepperCommandDialog`: a named component prop (`okLabel`,
+ * `cancelLabel`, `yesLabel`, `noLabel`, `closeAriaLabel`) wins, then the provider message,
+ * then the English fallback. `CommandDialog`/`StepperCommandDialog` forward these props
+ * straight through to this same `Dialog`, so wiring the precedence here covers every
+ * dialog surface without duplicating the resolution logic per component.
+ */
+describe('when the Dialog uses provider messages', () => {
+    let container: HTMLDivElement;
+    let root: Root;
+
+    const render = async (element: React.ReactElement) => {
+        (
+            globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
+        ).IS_REACT_ACT_ENVIRONMENT = true;
+        container = document.createElement('div');
+        document.body.append(container);
+        root = createRoot(container);
+        await act(async () => {
+            root.render(element);
+        });
+    };
+
+    afterEach(async () => {
+        await act(async () => root.unmount());
+        container.remove();
+    });
+
+    const buttonLabeled = (label: string) =>
+        Array.from(document.querySelectorAll('button')).find(
+            (button) => button.textContent === label,
+        );
+
+    it('should use the English fallback with no provider and no prop override', async () => {
+        await render(
+            <CratisComponentsProvider>
+                <Dialog title='Confirm' buttons={DialogButtons.OkCancel}>
+                    Body
+                </Dialog>
+            </CratisComponentsProvider>,
+        );
+        expect(buttonLabeled('Ok')).not.to.equal(undefined);
+        expect(buttonLabeled('Cancel')).not.to.equal(undefined);
+        expect(document.querySelector('[data-cratis-part="close"]')?.getAttribute(
+            'aria-label',
+        )).to.equal('Close');
+    });
+
+    it('should use the provider message when no prop override is given', async () => {
+        await render(
+            <CratisComponentsProvider
+                value={{
+                    messages: {
+                        dialog: {
+                            ok: 'Provider Ok',
+                            cancel: 'Provider Cancel',
+                            close: 'Provider Close',
+                        },
+                    },
+                }}
+            >
+                <Dialog title='Confirm' buttons={DialogButtons.OkCancel}>
+                    Body
+                </Dialog>
+            </CratisComponentsProvider>,
+        );
+        expect(buttonLabeled('Provider Ok')).not.to.equal(undefined);
+        expect(buttonLabeled('Provider Cancel')).not.to.equal(undefined);
+        expect(document.querySelector('[data-cratis-part="close"]')?.getAttribute(
+            'aria-label',
+        )).to.equal('Provider Close');
+    });
+
+    it('should prefer a named prop override over the provider message', async () => {
+        await render(
+            <CratisComponentsProvider
+                value={{ messages: { dialog: { ok: 'Provider Ok' } } }}
+            >
+                <Dialog
+                    title='Confirm'
+                    buttons={DialogButtons.OkCancel}
+                    okLabel='Explicit Ok'
+                >
+                    Body
+                </Dialog>
+            </CratisComponentsProvider>,
+        );
+        expect(buttonLabeled('Explicit Ok')).not.to.equal(undefined);
+        expect(buttonLabeled('Provider Ok')).to.equal(undefined);
+    });
+
+    it('should resolve Yes/No labels through the same precedence', async () => {
+        await render(
+            <CratisComponentsProvider
+                value={{ messages: { dialog: { yes: 'Provider Yes', no: 'Provider No' } } }}
+            >
+                <Dialog title='Confirm' buttons={DialogButtons.YesNo}>
+                    Body
+                </Dialog>
+            </CratisComponentsProvider>,
+        );
+        expect(buttonLabeled('Provider Yes')).not.to.equal(undefined);
+        expect(buttonLabeled('Provider No')).not.to.equal(undefined);
+    });
+});
diff --git a/Source/Dropdown/Dropdown.tsx b/Source/Dropdown/Dropdown.tsx
index ae14244b..8a28d866 100644
--- a/Source/Dropdown/Dropdown.tsx
+++ b/Source/Dropdown/Dropdown.tsx
@@ -28,6 +28,7 @@ import {
     ListBoxItem as ComboBoxListBoxItem,
     Popover as ComboBoxPopover,
 } from 'react-aria-components/ComboBox';
+import { useCratisComponentsConfig } from '../Common/CratisComponentsProvider';
 
 /** Change event emitted by {@link Dropdown}. */
 export interface DropdownChangeEvent<T = unknown> {
@@ -234,6 +235,15 @@ export const Dropdown = <T = unknown,>({
     onBlur,
     pt,
 }: DropdownProps<T>) => {
+    const { messages } = useCratisComponentsConfig();
+    const dropdownMessages = messages?.dropdown;
+    const showOptionsLabel =
+        pt?.trigger?.['aria-label'] ??
+        pt?.select?.['aria-label'] ??
+        dropdownMessages?.showOptions ??
+        'Show options';
+    const clearSelectionLabel =
+        pt?.clear?.['aria-label'] ?? dropdownMessages?.clearSelection ?? 'Clear selection';
     const resolvedOptions = resolveOptions(options, optionLabel, optionValue);
     const selectedOption = resolvedOptions.find((option) =>
         Object.is(option.value, value),
@@ -352,11 +362,7 @@ export const Dropdown = <T = unknown,>({
                                 pt?.trigger?.className,
                             )}
                             data-cratis-part='trigger'
-                            aria-label={
-                                pt?.trigger?.['aria-label'] ??
-                                pt?.select?.['aria-label'] ??
-                                'Show options'
-                            }
+                            aria-label={showOptionsLabel}
                         >
                             <span aria-hidden='true'>⌄</span>
                         </ComboBoxButton>
@@ -370,9 +376,7 @@ export const Dropdown = <T = unknown,>({
                                     pt?.clear?.className,
                                 )}
                                 data-cratis-part='clear'
-                                aria-label={
-                                    pt?.clear?.['aria-label'] ?? 'Clear selection'
-                                }
+                                aria-label={clearSelectionLabel}
                                 onClick={() => onChange?.({ value: [] as T })}
                             >
                                 <span aria-hidden='true'>×</span>
@@ -481,7 +485,7 @@ export const Dropdown = <T = unknown,>({
                             pt?.clear?.className,
                         )}
                         data-cratis-part='clear'
-                        aria-label={pt?.clear?.['aria-label'] ?? 'Clear selection'}
+                        aria-label={clearSelectionLabel}
                         onClick={() => onChange?.({ value: [] as T })}
                     >
                         <span aria-hidden='true'>×</span>
@@ -535,11 +539,7 @@ export const Dropdown = <T = unknown,>({
                             pt?.trigger?.className,
                         )}
                         data-cratis-part='trigger'
-                        aria-label={
-                            pt?.trigger?.['aria-label'] ??
-                            pt?.select?.['aria-label'] ??
-                            'Show options'
-                        }
+                        aria-label={showOptionsLabel}
                     >
                         <span aria-hidden='true'>⌄</span>
                     </ComboBoxButton>
@@ -553,7 +553,7 @@ export const Dropdown = <T = unknown,>({
                                 pt?.clear?.className,
                             )}
                             data-cratis-part='clear'
-                            aria-label={pt?.clear?.['aria-label'] ?? 'Clear selection'}
+                            aria-label={clearSelectionLabel}
                             onClick={() => onChange?.({ value: null as T })}
                         >
                             <span aria-hidden='true'>×</span>
@@ -670,7 +670,7 @@ export const Dropdown = <T = unknown,>({
                             pt?.clear?.className,
                         )}
                         data-cratis-part='clear'
-                        aria-label={pt?.clear?.['aria-label'] ?? 'Clear selection'}
+                        aria-label={clearSelectionLabel}
                         onClick={() => onChange?.({ value: null as T })}
                     >
                         <span aria-hidden='true'>×</span>
diff --git a/Source/Dropdown/for_Dropdown/when_using_provider_messages.tsx b/Source/Dropdown/for_Dropdown/when_using_provider_messages.tsx
new file mode 100644
index 00000000..0fff85a2
--- /dev/null
+++ b/Source/Dropdown/for_Dropdown/when_using_provider_messages.tsx
@@ -0,0 +1,126 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { expect } from 'chai';
+import { afterEach, describe, it } from 'vitest';
+import { CratisComponentsProvider } from '../../Common/CratisComponentsProvider';
+import { Dropdown } from '../Dropdown';
+
+/**
+ * Precedence coverage for the `dropdown` provider message group across the show-options and
+ * clear-selection labels: a named component prop wins, then the provider message, then the
+ * English fallback. Six render sites resolve through the same two variables in `Dropdown` —
+ * this spec exercises the filterable-multiple, filterable-single, and plain-select paths, each
+ * with and without a per-instance override.
+ */
+describe('when the Dropdown uses provider messages', () => {
+    let container: HTMLDivElement;
+    let root: Root;
+
+    const options = [{ label: 'Frontend', value: 'frontend' }];
+
+    const render = async (element: React.ReactElement) => {
+        (
+            globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
+        ).IS_REACT_ACT_ENVIRONMENT = true;
+        container = document.createElement('div');
+        document.body.append(container);
+        root = createRoot(container);
+        await act(async () => {
+            root.render(element);
+        });
+    };
+
+    afterEach(async () => {
+        await act(async () => root.unmount());
+        container.remove();
+    });
+
+    it('should use the English fallback with no provider and no prop override (plain select)', async () => {
+        await render(
+            <CratisComponentsProvider>
+                <Dropdown value='frontend' options={options} showClear />
+            </CratisComponentsProvider>,
+        );
+        const clear = container.querySelector('[data-cratis-part="clear"]');
+        expect(clear?.getAttribute('aria-label')).to.equal('Clear selection');
+    });
+
+    it('should use the provider message when no prop override is given (plain select)', async () => {
+        await render(
+            <CratisComponentsProvider
+                value={{ messages: { dropdown: { clearSelection: 'Fjern valg' } } }}
+            >
+                <Dropdown value='frontend' options={options} showClear />
+            </CratisComponentsProvider>,
+        );
+        const clear = container.querySelector('[data-cratis-part="clear"]');
+        expect(clear?.getAttribute('aria-label')).to.equal('Fjern valg');
+    });
+
+    it('should prefer a per-instance pt override over the provider message (plain select)', async () => {
+        await render(
+            <CratisComponentsProvider
+                value={{ messages: { dropdown: { clearSelection: 'Fjern valg' } } }}
+            >
+                <Dropdown
+                    value='frontend'
+                    options={options}
+                    showClear
+                    pt={{ clear: { 'aria-label': 'Explicit clear' } }}
+                />
+            </CratisComponentsProvider>,
+        );
+        const clear = container.querySelector('[data-cratis-part="clear"]');
+        expect(clear?.getAttribute('aria-label')).to.equal('Explicit clear');
+    });
+
+    it('should resolve the show-options trigger label through the same precedence (filterable single-select)', async () => {
+        await render(
+            <CratisComponentsProvider
+                value={{ messages: { dropdown: { showOptions: 'Vis alternativer' } } }}
+            >
+                <Dropdown value='frontend' options={options} filter />
+            </CratisComponentsProvider>,
+        );
+        const trigger = container.querySelector('[data-cratis-part="trigger"]');
+        expect(trigger?.getAttribute('aria-label')).to.equal('Vis alternativer');
+    });
+
+    it('should resolve the show-options and clear-selection labels for the filterable multiple-select path', async () => {
+        await render(
+            <CratisComponentsProvider
+                value={{
+                    messages: {
+                        dropdown: {
+                            showOptions: 'Vis alternativer',
+                            clearSelection: 'Fjern valg',
+                        },
+                    },
+                }}
+            >
+                <Dropdown value={['frontend']} options={options} filter multiple showClear />
+            </CratisComponentsProvider>,
+        );
+        const trigger = container.querySelector('[data-cratis-part="trigger"]');
+        const clear = container.querySelector('[data-cratis-part="clear"]');
+        expect(trigger?.getAttribute('aria-label')).to.equal('Vis alternativer');
+        expect(clear?.getAttribute('aria-label')).to.equal('Fjern valg');
+    });
+
+    it('should resolve the clear-selection label for the native multiple-select path', async () => {
+        await render(
+            <CratisComponentsProvider
+                value={{ messages: { dropdown: { clearSelection: 'Fjern valg' } } }}
+            >
+                <Dropdown value={['frontend']} options={options} multiple showClear />
+            </CratisComponentsProvider>,
+        );
+        const clear = container.querySelector('[data-cratis-part="clear"]');
+        expect(clear?.getAttribute('aria-label')).to.equal('Fjern valg');
+    });
+});
diff --git a/Source/Filter/FilterPanel.tsx b/Source/Filter/FilterPanel.tsx
index e907576d..f714f7ce 100644
--- a/Source/Filter/FilterPanel.tsx
+++ b/Source/Filter/FilterPanel.tsx
@@ -155,12 +155,15 @@ interface OptionListProps {
     filter: FilterDefinition;
     selections: Set<string>;
     onFilterToggle: (filterKey: string, optionKey: string, multi: boolean) => void;
+    /** Falls back to the panel-level search placeholder when the filter group has none of its own. */
+    searchPlaceholder?: string;
 }
 
 function OptionList({
     filter,
     selections,
     onFilterToggle,
+    searchPlaceholder,
 }: Omit<OptionListProps, 'onFilterClear'>) {
     const [groupSearch, setGroupSearch] = useState('');
     const allOptions = filter.options ?? [];
@@ -178,7 +181,7 @@ function OptionList({
                 <div className='pv-filter-group-search'>
                     <input
                         type='search'
-                        placeholder={filter.searchPlaceholder ?? 'Search…'}
+                        placeholder={filter.searchPlaceholder ?? searchPlaceholder}
                         value={groupSearch}
                         onChange={(event) => setGroupSearch(event.target.value)}
                     />
@@ -372,7 +375,7 @@ export function FilterPanel({
                                                             <button
                                                                 type='button'
                                                                 className='pv-filter-clear-header'
-                                                                title='Clear filter'
+                                                                title={clearFilterAriaLabel}
                                                                 onClick={(e) => {
                                                                     e.stopPropagation();
                                                                     onFilterClear(
@@ -395,7 +398,7 @@ export function FilterPanel({
                                                         <button
                                                             type='button'
                                                             className='pv-filter-clear-header'
-                                                            title='Clear range'
+                                                            title={clearRangeAriaLabel}
                                                             onClick={(e) => {
                                                                 e.stopPropagation();
                                                                 onRangeChange(
@@ -421,7 +424,7 @@ export function FilterPanel({
                                                             <button
                                                                 type='button'
                                                                 className='pv-filter-clear-header'
-                                                                title='Clear filter'
+                                                                title={clearFilterAriaLabel}
                                                                 onClick={(e) => {
                                                                     e.stopPropagation();
                                                                     onCustomValueChange?.(
@@ -472,6 +475,7 @@ export function FilterPanel({
                                                     filter={filter}
                                                     selections={selections}
                                                     onFilterToggle={onFilterToggle}
+                                                    searchPlaceholder={searchPlaceholder}
                                                 />
                                             )}
                                         </div>
diff --git a/Source/Filter/RangeHistogramFilter.tsx b/Source/Filter/RangeHistogramFilter.tsx
index 6f8a8608..e70a4097 100644
--- a/Source/Filter/RangeHistogramFilter.tsx
+++ b/Source/Filter/RangeHistogramFilter.tsx
@@ -39,6 +39,8 @@ export interface RangeHistogramFilterProps {
      * Use this to display ms timestamps as dates, currency, etc.
      */
     formatValue?: (value: number) => string;
+    /** Unit shown after a histogram bar count. Override to localize. Defaults to `'items'`. */
+    itemsLabel?: string;
 }
 
 const defaultFormatValue = (value: number) => {
@@ -82,6 +84,7 @@ export function RangeHistogramFilter({
     selectedRange,
     onChange,
     formatValue = defaultFormatValue,
+    itemsLabel = 'items',
 }: RangeHistogramFilterProps) {
     const containerRef = useRef<HTMLDivElement>(null);
     const [isDragging, setIsDragging] = useState<'left' | 'right' | 'range' | null>(null);
@@ -204,7 +207,7 @@ export function RangeHistogramFilter({
                             className={`pv-histogram-bar ${isInRange ? 'in-range' : ''} ${isPartiallyInRange && !isInRange ? 'partial' : ''}`}
                             style={{ height: `${heightPercent}%` }}
                             onClick={() => handleBarClick(bucket)}
-                            title={`${formatValue(bucket.start)} - ${formatValue(bucket.end)}: ${bucket.count} items`}
+                            title={`${formatValue(bucket.start)} - ${formatValue(bucket.end)}: ${bucket.count} ${itemsLabel}`}
                             type='button'
                         />
                     );
diff --git a/Source/Filter/for_FilterPanel/when_a_filter_group_has_no_own_search_placeholder.tsx b/Source/Filter/for_FilterPanel/when_a_filter_group_has_no_own_search_placeholder.tsx
new file mode 100644
index 00000000..87384a46
--- /dev/null
+++ b/Source/Filter/for_FilterPanel/when_a_filter_group_has_no_own_search_placeholder.tsx
@@ -0,0 +1,102 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { createRef } from 'react';
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { expect } from 'chai';
+import { afterEach, beforeEach, describe, it } from 'vitest';
+import { FilterPanel } from '../FilterPanel';
+import type { FilterDefinition } from '../types';
+
+/**
+ * Regression coverage for a confirmed bypass: a searchable filter group's inline search box
+ * hardcoded its own 'Search...' literal whenever the group did not declare its own
+ * `searchPlaceholder`, ignoring the panel-level `searchPlaceholder` prop the caller already
+ * supplied for the panel's top search box. A single panel-level override now also reaches an
+ * unconfigured group's inline search box; a filter that declares its own `searchPlaceholder`
+ * keeps taking priority over both.
+ */
+describe('when a filter group has no own search placeholder', () => {
+    let container: HTMLDivElement;
+    let root: Root;
+
+    const filters: FilterDefinition[] = [
+        {
+            key: 'status',
+            label: 'Status',
+            type: 'string',
+            searchable: true,
+            options: [{ key: 'active', label: 'Active', value: 'active' }],
+        },
+        {
+            key: 'role',
+            label: 'Role',
+            type: 'string',
+            searchable: true,
+            searchPlaceholder: 'Filter roles placeholder',
+            options: [{ key: 'admin', label: 'Admin', value: 'admin' }],
+        },
+    ];
+
+    const render = async () => {
+        container = document.createElement('div');
+        document.body.append(container);
+        root = createRoot(container);
+        const anchorRef = createRef<HTMLButtonElement>();
+
+        await act(async () => {
+            root.render(
+                <FilterPanel
+                    isOpen
+                    filters={filters}
+                    filterValues={{}}
+                    rangeValues={{}}
+                    searchPlaceholder='Panel-level search placeholder'
+                    onSearchChange={() => undefined}
+                    anchorRef={anchorRef}
+                    onClose={() => undefined}
+                    onFilterToggle={() => undefined}
+                    onFilterClear={() => undefined}
+                    onRangeChange={() => undefined}
+                    onExpandedFilterChange={() => undefined}
+                />,
+            );
+        });
+    };
+
+    beforeEach(async () => {
+        (
+            globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
+        ).IS_REACT_ACT_ENVIRONMENT = true;
+        await render();
+    });
+
+    afterEach(async () => {
+        await act(async () => root.unmount());
+        container.remove();
+    });
+
+    const groupSearchInputs = () =>
+        Array.from(
+            document.querySelectorAll<HTMLInputElement>(
+                '.pv-filter-group-search input',
+            ),
+        );
+
+    it("should fall back to the panel's search placeholder for a group with none of its own", () => {
+        expect(groupSearchInputs()[0].placeholder).to.equal(
+            'Panel-level search placeholder',
+        );
+    });
+
+    it('should never fall back to the old hardcoded English literal', () => {
+        expect(groupSearchInputs()[0].placeholder).not.to.equal('Search\u2026');
+    });
+
+    it("should still prefer the filter's own search placeholder over the panel-level one", () => {
+        expect(groupSearchInputs()[1].placeholder).to.equal('Filter roles placeholder');
+    });
+});
diff --git a/Source/Filter/for_FilterPanel/when_clear_buttons_are_localized.tsx b/Source/Filter/for_FilterPanel/when_clear_buttons_are_localized.tsx
new file mode 100644
index 00000000..cca429ef
--- /dev/null
+++ b/Source/Filter/for_FilterPanel/when_clear_buttons_are_localized.tsx
@@ -0,0 +1,114 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { createRef } from 'react';
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { expect } from 'chai';
+import { afterEach, beforeEach, describe, it } from 'vitest';
+import { FilterPanel } from '../FilterPanel';
+import { FilterEditor } from '../FilterEditor';
+import type { FilterDefinition } from '../types';
+
+/**
+ * Regression coverage for a confirmed bypass: the header clear buttons for string, range, and
+ * custom filter groups set `aria-label` from the caller-supplied `clearFilterAriaLabel` /
+ * `clearRangeAriaLabel` props, but hardcoded `title='Clear filter'` / `title='Clear range'`
+ * English literals right next to it - so a consumer that localized the accessible name still
+ * saw an English tooltip. `title` must mirror the same resolved prop value everywhere it
+ * appears, never a separate literal.
+ */
+describe('when the FilterPanel clear buttons are localized', () => {
+    let container: HTMLDivElement;
+    let root: Root;
+
+    const filters: FilterDefinition[] = [
+        {
+            key: 'status',
+            label: 'Status',
+            type: 'string',
+            options: [{ key: 'active', label: 'Active', value: 'active' }],
+        },
+        {
+            key: 'amount',
+            label: 'Amount',
+            type: 'number',
+            numericRange: { min: 0, max: 10, values: [1, 2, 3] },
+        },
+        {
+            key: 'custom',
+            label: 'Custom',
+            type: 'custom',
+        },
+    ];
+
+    beforeEach(async () => {
+        (
+            globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
+        ).IS_REACT_ACT_ENVIRONMENT = true;
+        container = document.createElement('div');
+        document.body.append(container);
+        root = createRoot(container);
+        const anchorRef = createRef<HTMLButtonElement>();
+
+        await act(async () => {
+            root.render(
+                <FilterPanel
+                    isOpen
+                    filters={filters}
+                    filterValues={{ status: new Set(['active']) }}
+                    rangeValues={{ amount: [2, 5] }}
+                    customValues={{ custom: 'picked' }}
+                    clearFilterAriaLabel='Localized clear filter'
+                    clearRangeAriaLabel='Localized clear range'
+                    anchorRef={anchorRef}
+                    onClose={() => undefined}
+                    onFilterToggle={() => undefined}
+                    onFilterClear={() => undefined}
+                    onRangeChange={() => undefined}
+                    onExpandedFilterChange={() => undefined}
+                    onCustomValueChange={() => undefined}
+                >
+                    <FilterEditor filterKey='custom'>
+                        {() => <span>custom editor</span>}
+                    </FilterEditor>
+                </FilterPanel>,
+            );
+        });
+    });
+
+    afterEach(async () => {
+        await act(async () => root.unmount());
+        container.remove();
+    });
+
+    const clearButtons = () =>
+        Array.from(document.querySelectorAll<HTMLButtonElement>('.pv-filter-clear-header'));
+
+    it('should mirror the localized clear-filter label onto the tooltip for a string filter', () => {
+        const button = clearButtons()[0];
+        expect(button.title).to.equal('Localized clear filter');
+        expect(button.getAttribute('aria-label')).to.equal('Localized clear filter');
+    });
+
+    it('should mirror the localized clear-range label onto the tooltip for a numeric filter', () => {
+        const button = clearButtons()[1];
+        expect(button.title).to.equal('Localized clear range');
+        expect(button.getAttribute('aria-label')).to.equal('Localized clear range');
+    });
+
+    it('should mirror the localized clear-filter label onto the tooltip for a custom filter', () => {
+        const button = clearButtons()[2];
+        expect(button.title).to.equal('Localized clear filter');
+        expect(button.getAttribute('aria-label')).to.equal('Localized clear filter');
+    });
+
+    it('should never fall back to the hardcoded English tooltip literal', () => {
+        for (const button of clearButtons()) {
+            expect(button.title).not.to.equal('Clear filter');
+            expect(button.title).not.to.equal('Clear range');
+        }
+    });
+});
diff --git a/Source/Filter/for_RangeHistogramFilter/when_localizing_the_bucket_tooltip.tsx b/Source/Filter/for_RangeHistogramFilter/when_localizing_the_bucket_tooltip.tsx
new file mode 100644
index 00000000..f6dacb83
--- /dev/null
+++ b/Source/Filter/for_RangeHistogramFilter/when_localizing_the_bucket_tooltip.tsx
@@ -0,0 +1,64 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { expect } from 'chai';
+import { afterEach, beforeEach, describe, it } from 'vitest';
+import { RangeHistogramFilter } from '../RangeHistogramFilter';
+
+/**
+ * Regression coverage: a bar's tooltip hardcoded the English word `'items'` after the count,
+ * with no way for a consumer to override it. `itemsLabel` makes that word overridable while
+ * defaulting to the previous English text.
+ */
+describe('when localizing the bucket tooltip', () => {
+    let container: HTMLDivElement;
+    let root: Root;
+
+    const renderWith = async (itemsLabel?: string) => {
+        container = document.createElement('div');
+        document.body.append(container);
+        root = createRoot(container);
+
+        await act(async () => {
+            root.render(
+                <RangeHistogramFilter
+                    values={[1, 2, 3, 8]}
+                    min={0}
+                    max={10}
+                    buckets={2}
+                    selectedRange={null}
+                    onChange={() => undefined}
+                    itemsLabel={itemsLabel}
+                />,
+            );
+        });
+    };
+
+    beforeEach(async () => {
+        (
+            globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
+        ).IS_REACT_ACT_ENVIRONMENT = true;
+    });
+
+    afterEach(async () => {
+        await act(async () => root.unmount());
+        container.remove();
+    });
+
+    it("should default the tooltip's unit word to 'items'", async () => {
+        await renderWith(undefined);
+        const bar = container.querySelector<HTMLButtonElement>('.pv-histogram-bar');
+        expect(bar?.title.endsWith('items')).to.equal(true);
+    });
+
+    it('should localize the tooltip unit word when overridden', async () => {
+        await renderWith('elementer');
+        const bar = container.querySelector<HTMLButtonElement>('.pv-histogram-bar');
+        expect(bar?.title.endsWith('elementer')).to.equal(true);
+        expect(bar?.title.endsWith('items')).to.equal(false);
+    });
+});
diff --git a/Source/Notifications/Toaster.tsx b/Source/Notifications/Toaster.tsx
index 1c3d8d9e..c8da8d11 100644
--- a/Source/Notifications/Toaster.tsx
+++ b/Source/Notifications/Toaster.tsx
@@ -9,6 +9,7 @@ import {
     type HTMLAttributes,
 } from 'react';
 import { createPortal } from 'react-dom';
+import { useCratisComponentsConfig } from '../Common/CratisComponentsProvider';
 import {
     getToastSnapshot,
     subscribeToToasts,
@@ -54,9 +55,9 @@ export interface ToasterProps {
     limit?: number;
     /** Default timeout in milliseconds. */
     timeout?: number;
-    /** Accessible label for dismiss buttons. */
+    /** Accessible label for dismiss buttons. Falls back to the provider's `notifications.dismiss` message, then `'Dismiss'`. */
     dismissAriaLabel?: string;
-    /** Accessible name for the toast region. */
+    /** Accessible name for the toast region. Falls back to the provider's `notifications.region` message, then `'Notifications'`. */
     regionAriaLabel?: string;
     /** Stable part attributes. */
     pt?: ToasterPassThrough;
@@ -190,10 +191,16 @@ export const Toaster = ({
     position = 'top-right',
     limit = 3,
     timeout = 6000,
-    dismissAriaLabel = 'Dismiss',
-    regionAriaLabel = 'Notifications',
+    dismissAriaLabel,
+    regionAriaLabel,
     pt,
 }: ToasterProps) => {
+    const { messages } = useCratisComponentsConfig();
+    const notificationsMessages = messages?.notifications;
+    const resolvedDismissAriaLabel =
+        dismissAriaLabel ?? notificationsMessages?.dismiss ?? 'Dismiss';
+    const resolvedRegionAriaLabel =
+        regionAriaLabel ?? notificationsMessages?.region ?? 'Notifications';
     const items = useSyncExternalStore(
         subscribeToToasts,
         getToastSnapshot,
@@ -208,7 +215,7 @@ export const Toaster = ({
             data-cratis-part='region'
             data-position={position}
             role='region'
-            aria-label={regionAriaLabel}
+            aria-label={resolvedRegionAriaLabel}
             aria-live='polite'
         >
             {items.slice(-limit).map((item) => (
@@ -216,7 +223,7 @@ export const Toaster = ({
                     key={item.id}
                     item={item}
                     timeout={timeout}
-                    dismissAriaLabel={dismissAriaLabel}
+                    dismissAriaLabel={resolvedDismissAriaLabel}
                     pt={pt}
                 />
             ))}
diff --git a/Source/Notifications/for_Toaster/when_using_provider_messages.tsx b/Source/Notifications/for_Toaster/when_using_provider_messages.tsx
new file mode 100644
index 00000000..ca85de7f
--- /dev/null
+++ b/Source/Notifications/for_Toaster/when_using_provider_messages.tsx
@@ -0,0 +1,110 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { expect } from 'chai';
+import { afterEach, describe, it } from 'vitest';
+import { CratisComponentsProvider } from '../../Common/CratisComponentsProvider';
+import { toast } from '../toast';
+import { Toaster } from '../Toaster';
+
+/**
+ * Precedence coverage for the `notifications` provider message group: a named component prop
+ * (`dismissAriaLabel`, `regionAriaLabel`) wins, then the provider message, then the English
+ * fallback.
+ */
+describe('when the Toaster uses provider messages', () => {
+    let container: HTMLDivElement;
+    let root: Root;
+
+    const render = async (element: React.ReactElement) => {
+        (
+            globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
+        ).IS_REACT_ACT_ENVIRONMENT = true;
+        toast.dismiss();
+        container = document.createElement('div');
+        document.body.append(container);
+        root = createRoot(container);
+        await act(async () => {
+            root.render(element);
+        });
+        await act(async () => {
+            toast({ title: 'Hello' });
+        });
+    };
+
+    afterEach(async () => {
+        await act(async () => {
+            toast.dismiss();
+            root.unmount();
+        });
+        container.remove();
+    });
+
+    it('should use the English fallback with no provider and no prop override', async () => {
+        await render(
+            <CratisComponentsProvider>
+                <Toaster timeout={60_000} />
+            </CratisComponentsProvider>,
+        );
+        expect(document.querySelector('[data-cratis-part="region"]')?.getAttribute(
+            'aria-label',
+        )).to.equal('Notifications');
+        expect(document.querySelector('[data-cratis-part="close"]')?.getAttribute(
+            'aria-label',
+        )).to.equal('Dismiss');
+    });
+
+    it('should use the provider message when no prop override is given', async () => {
+        await render(
+            <CratisComponentsProvider
+                value={{
+                    messages: {
+                        notifications: {
+                            dismiss: 'Provider Dismiss',
+                            region: 'Provider Region',
+                        },
+                    },
+                }}
+            >
+                <Toaster timeout={60_000} />
+            </CratisComponentsProvider>,
+        );
+        expect(document.querySelector('[data-cratis-part="region"]')?.getAttribute(
+            'aria-label',
+        )).to.equal('Provider Region');
+        expect(document.querySelector('[data-cratis-part="close"]')?.getAttribute(
+            'aria-label',
+        )).to.equal('Provider Dismiss');
+    });
+
+    it('should prefer a named prop override over the provider message', async () => {
+        await render(
+            <CratisComponentsProvider
+                value={{
+                    messages: {
+                        notifications: {
+                            dismiss: 'Provider Dismiss',
+                            region: 'Provider Region',
+                        },
+                    },
+                }}
+            >
+                <Toaster
+                    timeout={60_000}
+                    dismissAriaLabel='Explicit Dismiss'
+                    regionAriaLabel='Explicit Region'
+                />
+            </CratisComponentsProvider>,
+        );
+        expect(document.querySelector('[data-cratis-part="region"]')?.getAttribute(
+            'aria-label',
+        )).to.equal('Explicit Region');
+        expect(document.querySelector('[data-cratis-part="close"]')?.getAttribute(
+            'aria-label',
+        )).to.equal('Explicit Dismiss');
+    });
+});
diff --git a/Source/SchemaEditor/SchemaEditor.tsx b/Source/SchemaEditor/SchemaEditor.tsx
index aa402b4a..dbaef208 100644
--- a/Source/SchemaEditor/SchemaEditor.tsx
+++ b/Source/SchemaEditor/SchemaEditor.tsx
@@ -10,8 +10,8 @@ import { Tooltip } from '../Common/Tooltip';
 import * as faIcons from 'react-icons/fa6';
 import { NameCell } from './NameCell';
 import { TypeCell } from './TypeCell';
-import { JsonSchema, JsonSchemaProperty } from '../types/JsonSchema';
-import { TypeFormat, DEFAULT_TYPE_FORMATS } from '../types/TypeFormat';
+import type { JsonSchema, JsonSchemaProperty } from '../types/JsonSchema';
+import { type TypeFormat, DEFAULT_TYPE_FORMATS } from '../types/TypeFormat';
 import { validatePropertyName, buildBreadcrumbItems } from './schemaHelpers';
 
 /**
@@ -430,13 +430,14 @@ export const SchemaEditor = ({
 
     const menuItems = useMemo<ActionMenuItem[]>(
         () => [
-            ...(!isEditMode
-                ? [
+            ...(isEditMode
+                ? []
+                : [
                       {
                           label: l.edit,
                           icon: <faIcons.FaPencil className='cratis:mr-2' />,
                           command: canEdit ? handleEdit : undefined,
-                          className: !canEdit ? 'edit-disabled-with-reason' : undefined,
+                          className: canEdit ? undefined : 'edit-disabled-with-reason',
                           template:
                               !canEdit && canNotEditReason
                                   ? (item: ActionMenuItem) => (
@@ -462,29 +463,28 @@ export const SchemaEditor = ({
                                     )
                                   : undefined,
                       },
-                  ]
-                : []),
+                  ]),
             ...(isEditMode
                 ? [
-                      ...(!saveDisabled
-                          ? [
+                      ...(saveDisabled
+                          ? []
+                          : [
                                 {
                                     label: l.save,
                                     icon: <faIcons.FaCheck className='cratis:mr-2' />,
                                     command: hasValidationErrors ? undefined : handleSave,
                                     disabled: hasValidationErrors,
                                 },
-                            ]
-                          : []),
-                      ...(!cancelDisabled
-                          ? [
+                            ]),
+                      ...(cancelDisabled
+                          ? []
+                          : [
                                 {
                                     label: l.cancel,
                                     icon: <faIcons.FaXmark className='cratis:mr-2' />,
                                     command: handleCancel,
                                 },
-                            ]
-                          : []),
+                            ]),
                       {
                           label: l.addProperty,
                           icon: <faIcons.FaPlus className='cratis:mr-2' />,
@@ -525,7 +525,7 @@ export const SchemaEditor = ({
 
             <div className='cratis:px-4 cratis:py-2 cratis-schema-editor-bottom-border'>
                 <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
-                    <Tooltip content='Navigate back' position='top'>
+                    <Tooltip content={l.navigateBack} position='top'>
                         <Button
                             text
                             size='small'
diff --git a/Source/SchemaEditor/for_SchemaEditor/when_navigate_back_label_is_localized.tsx b/Source/SchemaEditor/for_SchemaEditor/when_navigate_back_label_is_localized.tsx
new file mode 100644
index 00000000..28e31cfe
--- /dev/null
+++ b/Source/SchemaEditor/for_SchemaEditor/when_navigate_back_label_is_localized.tsx
@@ -0,0 +1,107 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { expect } from 'chai';
+import { afterEach, beforeEach, describe, it } from 'vitest';
+import { SchemaEditor } from '../SchemaEditor';
+import type { JsonSchema } from '../../types/JsonSchema';
+
+/**
+ * Regression coverage for a confirmed bypass: the back-navigation button passed a hardcoded
+ * `'Navigate back'` literal as the `Tooltip` `content`, while the very same button's
+ * `aria-label` correctly resolved through `labels.navigateBack`. A caller that localized
+ * `navigateBack` still saw an English tooltip. Both must resolve from the same source.
+ */
+describe('when the navigate-back label is localized', () => {
+    let container: HTMLDivElement;
+    let root: Root;
+    let backButton: HTMLButtonElement;
+
+    const schema: JsonSchema = {
+        type: 'object',
+        properties: {
+            address: {
+                type: 'object',
+                properties: {
+                    city: { type: 'string' },
+                },
+            },
+        },
+    };
+
+    beforeEach(async () => {
+        (
+            globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
+        ).IS_REACT_ACT_ENVIRONMENT = true;
+        (globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver ??= class {
+            observe() {
+                return undefined;
+            }
+            unobserve() {
+                return undefined;
+            }
+            disconnect() {
+                return undefined;
+            }
+        };
+
+        container = document.createElement('div');
+        document.body.append(container);
+        root = createRoot(container);
+
+        await act(async () => {
+            root.render(
+                <SchemaEditor
+                    schema={schema}
+                    labels={{ navigateBack: 'Naviger tilbake' }}
+                />,
+            );
+        });
+
+        // Navigate into the nested "address" object so the back button becomes enabled.
+        const row = container.querySelector<HTMLTableRowElement>(
+            '[data-cratis-part="row"]',
+        );
+        if (!row) throw new Error('SchemaEditor did not render a navigable row.');
+        await act(async () => {
+            row.click();
+        });
+
+        const renderedBackButton = container.querySelector<HTMLButtonElement>(
+            'button[aria-label="Naviger tilbake"]',
+        );
+        if (!renderedBackButton) {
+            throw new Error('SchemaEditor did not render the localized back button.');
+        }
+        backButton = renderedBackButton;
+        await act(async () => backButton.focus());
+    });
+
+    afterEach(async () => {
+        await act(async () => root.unmount());
+        container.remove();
+    });
+
+    it('should carry the localized label as its accessible name', () => {
+        expect(backButton.getAttribute('aria-label')).to.equal('Naviger tilbake');
+    });
+
+    it('should carry the same localized label as its tooltip content', () => {
+        const descriptionId = backButton.getAttribute('aria-describedby');
+        expect(descriptionId).not.to.equal(null);
+        expect(document.getElementById(descriptionId ?? '')?.textContent).to.equal(
+            'Naviger tilbake',
+        );
+    });
+
+    it('should never fall back to the hardcoded English tooltip literal', () => {
+        const descriptionId = backButton.getAttribute('aria-describedby');
+        expect(document.getElementById(descriptionId ?? '')?.textContent).not.to.equal(
+            'Navigate back',
+        );
+    });
+});

From 4f7d70e843633dcb5710227b7b1831da3221a721 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Mon, 24 Aug 2026 23:48:57 +0200
Subject: [PATCH 040/267] Fix localization specs after stepper extraction

---
 .../when_using_provider_messages.tsx                |  2 +-
 .../when_every_owned_label_is_overridden.tsx        | 13 +++++--------
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/Source/CommandDialog/for_CommandStepper/when_using_provider_messages.tsx b/Source/CommandDialog/for_CommandStepper/when_using_provider_messages.tsx
index 1ebaded5..26d15fd7 100644
--- a/Source/CommandDialog/for_CommandStepper/when_using_provider_messages.tsx
+++ b/Source/CommandDialog/for_CommandStepper/when_using_provider_messages.tsx
@@ -8,7 +8,7 @@ import { createRoot, type Root } from 'react-dom/client';
 import { expect } from 'chai';
 import { afterEach, describe, it } from 'vitest';
 import { CratisComponentsProvider } from '../../Common/CratisComponentsProvider';
-import { CommandStepperContent } from '../CommandStepper';
+import { CommandStepperContent } from '../CommandStepperContent';
 import { StepperPanel } from '../StepperPanel';
 
 /**
diff --git a/Source/Common/for_CratisComponentsProvider/when_every_owned_label_is_overridden.tsx b/Source/Common/for_CratisComponentsProvider/when_every_owned_label_is_overridden.tsx
index ca64035c..29214de7 100644
--- a/Source/Common/for_CratisComponentsProvider/when_every_owned_label_is_overridden.tsx
+++ b/Source/Common/for_CratisComponentsProvider/when_every_owned_label_is_overridden.tsx
@@ -12,7 +12,7 @@ import { CratisComponentsProvider } from '../CratisComponentsProvider';
 import { DatePickerInput } from '../DatePickerInput';
 import { Dropdown } from '../../Dropdown/Dropdown';
 import { Dialog } from '../../Dialogs/Dialog';
-import { CommandStepperContent } from '../../CommandDialog/CommandStepper';
+import { CommandStepperContent } from '../../CommandDialog/CommandStepperContent';
 import { StepperPanel } from '../../CommandDialog/StepperPanel';
 import { Toaster, toast } from '../../Notifications';
 import { Column } from '../../DataTables/Column';
@@ -133,12 +133,7 @@ describe('when every owned label is overridden through the provider', () => {
                         selectionMode='single'
                     >
                         <Column field='name' header='Name' />
-                        <Column
-                            field='role'
-                            header='Role'
-                            filter
-                            dataType='boolean'
-                        />
+                        <Column field='role' header='Role' filter dataType='boolean' />
                         <Column selectionMode='single' />
                     </DataTableCore>
                     <DatePickerInput value={null} onChange={() => undefined} />
@@ -236,7 +231,9 @@ describe('when every owned label is overridden through the provider', () => {
 
     it('should never leave an audited surface showing its English default', () => {
         const attributeValues = Array.from(
-            document.querySelectorAll('[data-cratis-part][aria-label], [data-cratis-part][placeholder], [data-cratis-part][title]'),
+            document.querySelectorAll(
+                '[data-cratis-part][aria-label], [data-cratis-part][placeholder], [data-cratis-part][title]',
+            ),
         ).flatMap((element) => [
             element.getAttribute('aria-label'),
             element.getAttribute('placeholder'),

From 8ec1ee476d9e53d0b801b0486f929bd4c32b94f2 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Tue, 25 Aug 2026 00:12:06 +0200
Subject: [PATCH 041/267] Restore consumer chat and list query contracts

---
 Documentation/Canvas/chat-bubble.md           |  2 ++
 Documentation/migration.md                    |  2 +-
 .../shapes/ChatBubble/findOwnReaction.ts      | 11 +++++++---
 Source/Canvas/shapes/ChatBubble/index.ts      |  6 +++--
 Source/DataPage/DataPage.tsx                  | 14 +++++++++---
 Source/MIGRATION.md                           |  2 +-
 Source/scripts/verify-public-types.mjs        | 22 ++++++++++++++++++-
 7 files changed, 48 insertions(+), 11 deletions(-)

diff --git a/Documentation/Canvas/chat-bubble.md b/Documentation/Canvas/chat-bubble.md
index 5234b9d8..05a82bba 100644
--- a/Documentation/Canvas/chat-bubble.md
+++ b/Documentation/Canvas/chat-bubble.md
@@ -81,6 +81,8 @@ Omit it and every avatar falls back to the person's initials on a color determin
 
 Reactions are quick emoji given to a message (`ChatMessage.reactions: ChatMessageReaction[]`, each grouping the users who gave that emoji). The reaction button opens a `ReactionPicker`: a row of recently-used emoji (remembered per-browser in `localStorage` by default, or wherever a `memory: EmojiMemory` you pass points instead) plus a button that opens the full `EmojiPicker`. Picking the emoji already given is how a reaction is taken back — `onReact` is called either way and the caller decides give/change/revoke from what was clicked.
 
+Applications that own those give/change/revoke commands can import `findOwnReaction(reactions, currentUserId)` from `@cratis/components/Canvas`. It returns the current person's `reactionId` and emoji, or `undefined`, so application command logic can follow the same one-reaction-per-person rule as the built-in chat composition.
+
 ## Mentions
 
 Passing `mentionCandidates` (people and agents who can be `@`-mentioned) turns on mention suggestions in the composer: typing `@` opens a filtered `MentionSuggestions` list, navigable with the arrow keys and committed with `Enter`/`Tab`.
diff --git a/Documentation/migration.md b/Documentation/migration.md
index 4bb95f5e..41717924 100644
--- a/Documentation/migration.md
+++ b/Documentation/migration.md
@@ -151,7 +151,7 @@ An audit of the published `exports` map ([#173](https://github.com/Cratis/Compon
 | `CommandStepperContent`                                                   | `@cratis/components/CommandStepper`, `@cratis/components/CommandDialog` | Private rendering primitive behind `CommandStepper` and `StepperCommandDialog`. Use one of those components; there is no direct public replacement. |
 | `PivotViewerOptimized`                                                    | `@cratis/components/PivotViewer`                                        | Was an accidental alias of `PivotViewer`. Import `PivotViewer` instead.                                                                             |
 | `getInitials`                                                             | `@cratis/components/Canvas`                                             | Private `PersonAvatarCircle` helper. Not part of the public API.                                                                                    |
-| `findOwnReaction`, `reactionsExcludingUser`                               | `@cratis/components/Canvas`                                             | Private `ChatMessageBubble` helpers. Not part of the public API.                                                                                    |
+| `reactionsExcludingUser`                                                  | `@cratis/components/Canvas`                                             | Private `ChatMessageBubble` rendering helper. `findOwnReaction` remains public for consumers that own reaction commands.                           |
 | `matchCandidates`, `activeMentionQuery`, `applyMention`, `MentionApplied` | `@cratis/components/Canvas`                                             | Private `ChatComposer` mention helpers. Not part of the public API.                                                                                 |
 | `EMOJI_CATALOG`, `EmojiCategoryKey`                                       | `@cratis/components/Canvas`                                             | Private `EmojiPicker` implementation details. Not part of the public API.                                                                           |
 | `DEFAULT_EMOJIS`, `QUICK_ROW_SIZE`                                        | `@cratis/components/Canvas`                                             | Private `recentEmojis`/`rememberEmoji` constants. Not part of the public API.                                                                       |
diff --git a/Source/Canvas/shapes/ChatBubble/findOwnReaction.ts b/Source/Canvas/shapes/ChatBubble/findOwnReaction.ts
index 70801e59..72c02f0c 100644
--- a/Source/Canvas/shapes/ChatBubble/findOwnReaction.ts
+++ b/Source/Canvas/shapes/ChatBubble/findOwnReaction.ts
@@ -13,10 +13,15 @@ import type { ChatOwnReaction } from './ChatOwnReaction';
  * @param userId The person to look for.
  * @returns Their reaction, or undefined when they have not reacted.
  */
-export const findOwnReaction = (reactions: ChatMessageReaction[] | undefined, userId: Guid): ChatOwnReaction | undefined => {
+export const findOwnReaction = (
+    reactions: ChatMessageReaction[] | undefined,
+    userId: Guid,
+): ChatOwnReaction | undefined => {
     const own = (reactions ?? [])
-        .flatMap(reaction => reaction.users.map(user => ({ user, emoji: reaction.emoji })))
-        .find(entry => entry.user.id.equals(userId));
+        .flatMap((reaction) =>
+            reaction.users.map((user) => ({ user, emoji: reaction.emoji })),
+        )
+        .find((entry) => entry.user.id.equals(userId));
 
     return own ? { reactionId: own.user.reactionId, emoji: own.emoji } : undefined;
 };
diff --git a/Source/Canvas/shapes/ChatBubble/index.ts b/Source/Canvas/shapes/ChatBubble/index.ts
index 1665ad94..b224b104 100644
--- a/Source/Canvas/shapes/ChatBubble/index.ts
+++ b/Source/Canvas/shapes/ChatBubble/index.ts
@@ -18,8 +18,10 @@ export type { ChatTypingAuthor } from './ChatTypingAuthor';
 export { ChatVariant } from './ChatVariant';
 export { FailedReply } from './FailedReply';
 export type { FailedReplyProps, FailedReplyLabels, FailedReplyReportDetails } from './FailedReply';
-// `findOwnReaction` and `reactionsExcludingUser` are internal helpers used by
-// `ChatMessageBubble` and are intentionally not part of the public API.
+// A consumer that owns reaction commands can use the same current-user lookup as the
+// Components chat composition without duplicating its one-reaction-per-person rules.
+export { findOwnReaction } from './findOwnReaction';
+// `reactionsExcludingUser` remains an internal rendering helper.
 export { MessageReactions } from './MessageReactions';
 export type { MessageReactionsProps } from './MessageReactions';
 export { ReactionPicker } from './ReactionPicker';
diff --git a/Source/DataPage/DataPage.tsx b/Source/DataPage/DataPage.tsx
index 7da59812..71fdb4aa 100644
--- a/Source/DataPage/DataPage.tsx
+++ b/Source/DataPage/DataPage.tsx
@@ -243,9 +243,13 @@ function useDataPageContext(): IDataPageContext {
  * @typeParam TArguments - The query's argument object type, or `object` if the query takes none.
  */
 export interface DataPageProps<
-    TQuery extends IQueryFor<TDataType> | IObservableQueryFor<TDataType>,
+    TQuery extends
+        | IQueryFor<TDataType, TArguments>
+        | IQueryFor<TDataType[], TArguments>
+        | IObservableQueryFor<TDataType, TArguments>
+        | IObservableQueryFor<TDataType[], TArguments>,
     TDataType extends object,
-    TArguments,
+    TArguments extends object,
 > {
     /**
      * The title of the page
@@ -476,7 +480,11 @@ export interface DataPageProps<
  * @param props - {@link DataPageProps}.
  */
 const DataPage = <
-    TQuery extends IQueryFor<TDataType> | IObservableQueryFor<TDataType, TArguments>,
+    TQuery extends
+        | IQueryFor<TDataType, TArguments>
+        | IQueryFor<TDataType[], TArguments>
+        | IObservableQueryFor<TDataType, TArguments>
+        | IObservableQueryFor<TDataType[], TArguments>,
     TDataType extends object,
     TArguments extends object,
 >(
diff --git a/Source/MIGRATION.md b/Source/MIGRATION.md
index b56d856a..aa125b16 100644
--- a/Source/MIGRATION.md
+++ b/Source/MIGRATION.md
@@ -148,7 +148,7 @@ An audit of the published `exports` map ([#173](https://github.com/Cratis/Compon
 | `CommandStepperContent`                                                   | `@cratis/components/CommandStepper`, `@cratis/components/CommandDialog` | Private rendering primitive behind `CommandStepper` and `StepperCommandDialog`. Use one of those components; there is no direct public replacement. |
 | `PivotViewerOptimized`                                                    | `@cratis/components/PivotViewer`                                        | Was an accidental alias of `PivotViewer`. Import `PivotViewer` instead.                                                                             |
 | `getInitials`                                                             | `@cratis/components/Canvas`                                             | Private `PersonAvatarCircle` helper. Not part of the public API.                                                                                    |
-| `findOwnReaction`, `reactionsExcludingUser`                               | `@cratis/components/Canvas`                                             | Private `ChatMessageBubble` helpers. Not part of the public API.                                                                                    |
+| `reactionsExcludingUser`                                                  | `@cratis/components/Canvas`                                             | Private `ChatMessageBubble` rendering helper. `findOwnReaction` remains public for consumers that own reaction commands.                           |
 | `matchCandidates`, `activeMentionQuery`, `applyMention`, `MentionApplied` | `@cratis/components/Canvas`                                             | Private `ChatComposer` mention helpers. Not part of the public API.                                                                                 |
 | `EMOJI_CATALOG`, `EmojiCategoryKey`                                       | `@cratis/components/Canvas`                                             | Private `EmojiPicker` implementation details. Not part of the public API.                                                                           |
 | `DEFAULT_EMOJIS`, `QUICK_ROW_SIZE`                                        | `@cratis/components/Canvas`                                             | Private `recentEmojis`/`rememberEmoji` constants. Not part of the public API.                                                                       |
diff --git a/Source/scripts/verify-public-types.mjs b/Source/scripts/verify-public-types.mjs
index abf49d6c..732be82f 100644
--- a/Source/scripts/verify-public-types.mjs
+++ b/Source/scripts/verify-public-types.mjs
@@ -343,6 +343,26 @@ const tsconfigFor = (mode) => ({
 const sanitize = (subpath) =>
     subpath === '.' ? 'root' : subpath.replace(/^\.\//, '').replace(/\//g, '_');
 
+const consumerSourceFor = (subpath, specifier) => {
+    if (subpath === './DataPage') {
+        return `import type { IObservableQueryFor } from '@cratis/arc/queries';
+import type { DataPageProps } from '${specifier}';
+interface Row { id: string; }
+type ListObservableQueryProps = DataPageProps<IObservableQueryFor<Row[], object>, Row, object>;
+declare const listObservableQueryProps: ListObservableQueryProps;
+void listObservableQueryProps;
+export * from '${specifier}';
+`;
+    }
+    if (subpath === './Canvas') {
+        return `import { findOwnReaction } from '${specifier}';
+void findOwnReaction;
+export * from '${specifier}';
+`;
+    }
+    return `export * from '${specifier}';\n`;
+};
+
 /** Parses `file(line,col): error TSxxxx: message` lines and normalizes `file` to a package-relative id. */
 function parseDiagnostics(stdout) {
     const diagnosticLine = /^(.+?)\((\d+),(\d+)\): error (TS\d+): (.*)$/u;
@@ -435,7 +455,7 @@ for (const { subpath, specifier, declarationRelPath } of selected) {
         const consumerFile = mode === 'nodenext' ? 'consumer.mts' : 'consumer.ts';
         writeFileSync(
             path.join(fixtureDir, consumerFile),
-            `export * from '${specifier}';\n`,
+            consumerSourceFor(subpath, specifier),
         );
         if (mode === 'nodenext') {
             writeFileSync(

From 87b54b58f7c1f9be710df850990beeae5c0cd031 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Tue, 25 Aug 2026 00:39:15 +0200
Subject: [PATCH 042/267] Expose registered data table matchers

---
 .../DataTables/column-configuration.md         |  2 +-
 Documentation/migration.md                     | 18 +++++++++++++++---
 Source/DataTables/index.ts                     |  1 +
 Source/MIGRATION.md                            |  4 ++--
 Source/scripts/verify-public-types.mjs         |  6 ++++++
 5 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/Documentation/DataTables/column-configuration.md b/Documentation/DataTables/column-configuration.md
index 96bec8df..48cf8481 100644
--- a/Documentation/DataTables/column-configuration.md
+++ b/Documentation/DataTables/column-configuration.md
@@ -77,4 +77,4 @@ Filtering affects the loaded page. For complete-result filtering, send the filte
 
 ## Custom matchers
 
-Use `registerDataTableFilterMatcher()` for a named matcher. The returned branded mode can be assigned to `DataTableFilterMeta`, and the registration handle removes it safely.
+Use `registerDataTableFilterMatcher()` for a named matcher. The returned branded mode can be assigned to `DataTableFilterMeta`, and the registration handle removes it safely. Use `resolveDataTableFilterMatcher(matchMode)` when an application-owned adapter or spec needs to verify the predicate currently installed in the live Components registry.
diff --git a/Documentation/migration.md b/Documentation/migration.md
index 41717924..903ed522 100644
--- a/Documentation/migration.md
+++ b/Documentation/migration.md
@@ -151,7 +151,7 @@ An audit of the published `exports` map ([#173](https://github.com/Cratis/Compon
 | `CommandStepperContent`                                                   | `@cratis/components/CommandStepper`, `@cratis/components/CommandDialog` | Private rendering primitive behind `CommandStepper` and `StepperCommandDialog`. Use one of those components; there is no direct public replacement. |
 | `PivotViewerOptimized`                                                    | `@cratis/components/PivotViewer`                                        | Was an accidental alias of `PivotViewer`. Import `PivotViewer` instead.                                                                             |
 | `getInitials`                                                             | `@cratis/components/Canvas`                                             | Private `PersonAvatarCircle` helper. Not part of the public API.                                                                                    |
-| `reactionsExcludingUser`                                                  | `@cratis/components/Canvas`                                             | Private `ChatMessageBubble` rendering helper. `findOwnReaction` remains public for consumers that own reaction commands.                           |
+| `reactionsExcludingUser`                                                  | `@cratis/components/Canvas`                                             | Private `ChatMessageBubble` rendering helper. `findOwnReaction` remains public for consumers that own reaction commands.                            |
 | `matchCandidates`, `activeMentionQuery`, `applyMention`, `MentionApplied` | `@cratis/components/Canvas`                                             | Private `ChatComposer` mention helpers. Not part of the public API.                                                                                 |
 | `EMOJI_CATALOG`, `EmojiCategoryKey`                                       | `@cratis/components/Canvas`                                             | Private `EmojiPicker` implementation details. Not part of the public API.                                                                           |
 | `DEFAULT_EMOJIS`, `QUICK_ROW_SIZE`                                        | `@cratis/components/Canvas`                                             | Private `recentEmojis`/`rememberEmoji` constants. Not part of the public API.                                                                       |
@@ -344,11 +344,23 @@ import './product-components.css';
 
 Because these assignments reference product tokens, existing dark, enhanced-contrast, control-size, status, and accessibility selectors flow through without duplicating the mapping. The product continues to own typography, spacing, motion, elevation, and component-specific treatments.
 
-If one product area still uses Prime's locale-aware `InputNumber`, keep it as an explicitly bounded Prime island. Mount the Prime provider independently around that remaining surface and retain its installed-version theme/license requirements; do not put renderer keys back into `CratisComponentsProvider`. Other areas can remove Prime as soon as they have no direct Prime imports. Remove the separate Prime provider only when number grouping, decimal handling, fraction digits, prefix/suffix, min/max, and command binding have an accepted renderer-independent replacement.
+If one product area still uses Prime's locale-aware `InputNumber`, keep it as an explicitly bounded Prime island. Mount the Prime provider independently around that remaining surface and retain its installed-version theme/license requirements; do not put renderer keys back into `CratisComponentsProvider`:
+
+```tsx
+import { PrimeReactProvider } from '@primereact/core';
+
+<CratisComponentsProvider value={{ locale, messages }}>
+    <PrimeReactProvider license={primeUiLicense}>
+        <LocaleAwareNumberInput />
+    </PrimeReactProvider>
+</CratisComponentsProvider>
+```
+
+PrimeReact 11 receives `license` directly as a provider prop; it does **not** use the `value={{ license }}` shape of `CratisComponentsProvider`. Add the installed Prime theme/provider options beside `license` when that island needs them. Other areas can remove Prime as soon as they have no direct Prime imports. Remove the separate Prime provider only when number grouping, decimal handling, fraction digits, prefix/suffix, min/max, and command binding have an accepted renderer-independent replacement.
 
 This preserves product token and theme ownership while removing the circular product → Prime preset → Prime variables → Cratis translation.
 
-Custom filters must migrate in the same change: replace the Prime `FilterMatchMode` import with `DataTableFilterMatchMode`, replace `registerMatcher` with `registerDataTableFilterMatcher`, and store the returned `matchMode` in the corresponding constraint. Built-in mode strings remain behaviorally compatible, but using the Cratis constants removes the renderer type dependency; custom registration never crosses registries automatically.
+Custom filters must migrate in the same change: replace the Prime `FilterMatchMode` import with `DataTableFilterMatchMode`, replace `registerMatcher` with `registerDataTableFilterMatcher`, and store the returned `matchMode` in the corresponding constraint. Built-in mode strings remain behaviorally compatible, but using the Cratis constants removes the renderer type dependency; custom registration never crosses registries automatically. Tests and application-owned adapters that must verify the live registered predicate can call `resolveDataTableFilterMatcher(matchMode)` from the same DataTables subpath.
 
 ### Migrate directly from Components 2
 
diff --git a/Source/DataTables/index.ts b/Source/DataTables/index.ts
index e9be8c05..efb3a62a 100644
--- a/Source/DataTables/index.ts
+++ b/Source/DataTables/index.ts
@@ -11,6 +11,7 @@ export * from './DataTableSelectionChangeEvent';
 export * from './DataTableFilterMeta';
 export {
     registerDataTableFilterMatcher,
+    resolveDataTableFilterMatcher,
     unregisterDataTableFilterMatcher,
     type DataTableFilterMatcherRegistration,
 } from './DataTableFilterMatcherRegistry';
diff --git a/Source/MIGRATION.md b/Source/MIGRATION.md
index aa125b16..ebd6fafc 100644
--- a/Source/MIGRATION.md
+++ b/Source/MIGRATION.md
@@ -148,7 +148,7 @@ An audit of the published `exports` map ([#173](https://github.com/Cratis/Compon
 | `CommandStepperContent`                                                   | `@cratis/components/CommandStepper`, `@cratis/components/CommandDialog` | Private rendering primitive behind `CommandStepper` and `StepperCommandDialog`. Use one of those components; there is no direct public replacement. |
 | `PivotViewerOptimized`                                                    | `@cratis/components/PivotViewer`                                        | Was an accidental alias of `PivotViewer`. Import `PivotViewer` instead.                                                                             |
 | `getInitials`                                                             | `@cratis/components/Canvas`                                             | Private `PersonAvatarCircle` helper. Not part of the public API.                                                                                    |
-| `reactionsExcludingUser`                                                  | `@cratis/components/Canvas`                                             | Private `ChatMessageBubble` rendering helper. `findOwnReaction` remains public for consumers that own reaction commands.                           |
+| `reactionsExcludingUser`                                                  | `@cratis/components/Canvas`                                             | Private `ChatMessageBubble` rendering helper. `findOwnReaction` remains public for consumers that own reaction commands.                            |
 | `matchCandidates`, `activeMentionQuery`, `applyMention`, `MentionApplied` | `@cratis/components/Canvas`                                             | Private `ChatComposer` mention helpers. Not part of the public API.                                                                                 |
 | `EMOJI_CATALOG`, `EmojiCategoryKey`                                       | `@cratis/components/Canvas`                                             | Private `EmojiPicker` implementation details. Not part of the public API.                                                                           |
 | `DEFAULT_EMOJIS`, `QUICK_ROW_SIZE`                                        | `@cratis/components/Canvas`                                             | Private `recentEmojis`/`rememberEmoji` constants. Not part of the public API.                                                                       |
@@ -247,7 +247,7 @@ The old `stepperpanel.header` wrapper has no one-to-one element. Put list-item l
 
 ### Representative migration archetypes
 
-For a product-owned design system, remove `styledMode`, `ProductPreset`, Prime locale types, and the PrimeUI license from the Components provider. Keep `--product-*` as the canonical tokens and map them directly to `--cratis-*`. If the product still imports Prime directly, retain a separate Prime provider, preset, dependencies, and license until those imports are removed. Migrate custom filters from `registerMatcher` to `registerDataTableFilterMatcher` and use the returned `matchMode` in each constraint.
+For a product-owned design system, remove `styledMode`, `ProductPreset`, Prime locale types, and the PrimeUI license from the Components provider. Keep `--product-*` as the canonical tokens and map them directly to `--cratis-*`. If the product still imports Prime directly, retain a separate Prime provider, preset, dependencies, and license until those imports are removed. PrimeReact 11 receives its license directly — `<PrimeReactProvider license={primeUiLicense}>` — not through the `value={{ license }}` shape used by `CratisComponentsProvider`. Migrate custom filters from `registerMatcher` to `registerDataTableFilterMatcher`, use the returned `matchMode` in each constraint, and use `resolveDataTableFilterMatcher` when a test or application-owned adapter must verify the live registered predicate.
 
 A Components 2 / PrimeReact 10 product can migrate directly to Components 4 without an intermediate Prime 11 conversion. Keep its Prime 10 provider/theme for direct Prime surfaces, mount Components independently, move `DataPage` children to the Cratis `Column`, and migrate direct controls in batches.
 
diff --git a/Source/scripts/verify-public-types.mjs b/Source/scripts/verify-public-types.mjs
index 732be82f..dbcf8e2c 100644
--- a/Source/scripts/verify-public-types.mjs
+++ b/Source/scripts/verify-public-types.mjs
@@ -358,6 +358,12 @@ export * from '${specifier}';
         return `import { findOwnReaction } from '${specifier}';
 void findOwnReaction;
 export * from '${specifier}';
+`;
+    }
+    if (subpath === './DataTables') {
+        return `import { resolveDataTableFilterMatcher } from '${specifier}';
+void resolveDataTableFilterMatcher;
+export * from '${specifier}';
 `;
     }
     return `export * from '${specifier}';\n`;

From 2a116c8989e9e674fc353683ff8776ad94f5a9ae Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Tue, 25 Aug 2026 00:39:50 +0200
Subject: [PATCH 043/267] Normalize controlled DataPage selection handling

---
 Source/DataPage/DataPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Source/DataPage/DataPage.tsx b/Source/DataPage/DataPage.tsx
index 71fdb4aa..4ce7854c 100644
--- a/Source/DataPage/DataPage.tsx
+++ b/Source/DataPage/DataPage.tsx
@@ -494,7 +494,7 @@ const DataPage = <
         TDataType | null | undefined
     >(props.selection);
     const selectedItem =
-        props.selection !== undefined ? props.selection : internalSelection;
+        props.selection === undefined ? internalSelection : props.selection;
 
     const selectionChanged = (event: DataTableSelectionChangeEvent<TDataType>) => {
         if (props.selection === undefined) setInternalSelection(event.value);

From 1817ab22e1d1bf3e64873d7db1bbafa4c1c9868d Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Tue, 25 Aug 2026 00:42:33 +0200
Subject: [PATCH 044/267] Clarify bounded Prime island styling

---
 Documentation/migration.md | 8 ++++++--
 Source/MIGRATION.md        | 2 +-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/Documentation/migration.md b/Documentation/migration.md
index 903ed522..4387727e 100644
--- a/Documentation/migration.md
+++ b/Documentation/migration.md
@@ -353,10 +353,14 @@ import { PrimeReactProvider } from '@primereact/core';
     <PrimeReactProvider license={primeUiLicense}>
         <LocaleAwareNumberInput />
     </PrimeReactProvider>
-</CratisComponentsProvider>
+</CratisComponentsProvider>;
 ```
 
-PrimeReact 11 receives `license` directly as a provider prop; it does **not** use the `value={{ license }}` shape of `CratisComponentsProvider`. Add the installed Prime theme/provider options beside `license` when that island needs them. Other areas can remove Prime as soon as they have no direct Prime imports. Remove the separate Prime provider only when number grouping, decimal handling, fraction digits, prefix/suffix, min/max, and command binding have an accepted renderer-independent replacement.
+PrimeReact 11 receives `license` directly as a provider prop; it does **not** use the `value={{ license }}` shape of `CratisComponentsProvider`. Add the installed Prime theme/provider options beside `license` when that island needs them.
+
+The provider boundary scopes Prime runtime configuration and context, but a JavaScript-imported Prime theme stylesheet is still a **document-global side effect**. Put the import in the smallest host entry point that contains the island and inventory any `.p-*` selectors that intentionally depend on it; wrapping a subtree does not isolate that CSS. Every retained island should have an owner, a reason it remains, its licensing/theme dependencies, and an explicit removal condition or tracking issue.
+
+Other areas can remove Prime as soon as they have no direct Prime imports. Remove the separate Prime provider only when number grouping, decimal handling, fraction digits, prefix/suffix, min/max, and command binding have an accepted renderer-independent replacement.
 
 This preserves product token and theme ownership while removing the circular product → Prime preset → Prime variables → Cratis translation.
 
diff --git a/Source/MIGRATION.md b/Source/MIGRATION.md
index ebd6fafc..3829a61c 100644
--- a/Source/MIGRATION.md
+++ b/Source/MIGRATION.md
@@ -247,7 +247,7 @@ The old `stepperpanel.header` wrapper has no one-to-one element. Put list-item l
 
 ### Representative migration archetypes
 
-For a product-owned design system, remove `styledMode`, `ProductPreset`, Prime locale types, and the PrimeUI license from the Components provider. Keep `--product-*` as the canonical tokens and map them directly to `--cratis-*`. If the product still imports Prime directly, retain a separate Prime provider, preset, dependencies, and license until those imports are removed. PrimeReact 11 receives its license directly — `<PrimeReactProvider license={primeUiLicense}>` — not through the `value={{ license }}` shape used by `CratisComponentsProvider`. Migrate custom filters from `registerMatcher` to `registerDataTableFilterMatcher`, use the returned `matchMode` in each constraint, and use `resolveDataTableFilterMatcher` when a test or application-owned adapter must verify the live registered predicate.
+For a product-owned design system, remove `styledMode`, `ProductPreset`, Prime locale types, and the PrimeUI license from the Components provider. Keep `--product-*` as the canonical tokens and map them directly to `--cratis-*`. If the product still imports Prime directly, retain a separate Prime provider, preset, dependencies, and license until those imports are removed. PrimeReact 11 receives its license directly — `<PrimeReactProvider license={primeUiLicense}>` — not through the `value={{ license }}` shape used by `CratisComponentsProvider`. The provider scopes runtime context, not CSS: a Prime theme imported from JavaScript remains document-global, so keep it in the smallest host entry point that owns the island and track every retained island's owner, licensing/theme dependencies, and removal condition. Migrate custom filters from `registerMatcher` to `registerDataTableFilterMatcher`, use the returned `matchMode` in each constraint, and use `resolveDataTableFilterMatcher` when a test or application-owned adapter must verify the live registered predicate.
 
 A Components 2 / PrimeReact 10 product can migrate directly to Components 4 without an intermediate Prime 11 conversion. Keep its Prime 10 provider/theme for direct Prime surfaces, mount Components independently, move `DataPage` children to the Cratis `Column`, and migrate direct controls in batches.
 

From 56afadc01967e019889c5991a668d83bd467fb97 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Tue, 25 Aug 2026 00:42:41 +0200
Subject: [PATCH 045/267] Format restored chat reaction surface

---
 Documentation/Canvas/chat-bubble.md      | 45 +++++++++++++-----------
 Source/Canvas/shapes/ChatBubble/index.ts | 23 +++++++++---
 2 files changed, 44 insertions(+), 24 deletions(-)

diff --git a/Documentation/Canvas/chat-bubble.md b/Documentation/Canvas/chat-bubble.md
index 05a82bba..ba8c53a3 100644
--- a/Documentation/Canvas/chat-bubble.md
+++ b/Documentation/Canvas/chat-bubble.md
@@ -28,16 +28,19 @@ function Conversation() {
     ]);
 
     const send = (text: string) => {
-        setMessages(current => [...current, {
-            id: Guid.create(),
-            authorId: me,
-            authorName: 'You',
-            authorInitials: 'Y',
-            hasAvatar: false,
-            authorKind: ChatAuthorKind.User,
-            text,
-            timestamp: new Date(),
-        }]);
+        setMessages((current) => [
+            ...current,
+            {
+                id: Guid.create(),
+                authorId: me,
+                authorName: 'You',
+                authorInitials: 'Y',
+                hasAvatar: false,
+                authorKind: ChatAuthorKind.User,
+                text,
+                timestamp: new Date(),
+            },
+        ]);
     };
 
     return (
@@ -46,7 +49,9 @@ function Conversation() {
             onSend={send}
             onClose={() => {}}
             currentUserId={me}
-            onReact={(messageId, emoji) => console.log('react', messageId.toString(), emoji)}
+            onReact={(messageId, emoji) =>
+                console.log('react', messageId.toString(), emoji)
+            }
         />
     );
 }
@@ -54,15 +59,15 @@ function Conversation() {
 
 `messages`, `onSend`, and `onClose` are the only required props — everything else is opt-in, and each opt-in feature is gated on its own prop rather than a single "mode" switch:
 
-| Feature | Enabled by |
-|---|---|
-| Reactions | `currentUserId` **and** `onReact` both given |
-| Quick reply (prefills the composer with `@name`, followed by a space) | Always available once there is more than one author |
-| "Turn into an action" button | `onAct` given (optionally filtered per-message by `canAct`) |
-| `@`-mentions in the composer | `mentionCandidates` given |
-| Typing indicator | `typingAuthors` given (a list of who's currently typing/working) |
-| Avatar images (instead of initials) | `buildAvatarUrl` given |
-| "Report a bug" link on a failed turn | `buildReportUrl` given |
+| Feature                                                               | Enabled by                                                       |
+| --------------------------------------------------------------------- | ---------------------------------------------------------------- |
+| Reactions                                                             | `currentUserId` **and** `onReact` both given                     |
+| Quick reply (prefills the composer with `@name`, followed by a space) | Always available once there is more than one author              |
+| "Turn into an action" button                                          | `onAct` given (optionally filtered per-message by `canAct`)      |
+| `@`-mentions in the composer                                          | `mentionCandidates` given                                        |
+| Typing indicator                                                      | `typingAuthors` given (a list of who's currently typing/working) |
+| Avatar images (instead of initials)                                   | `buildAvatarUrl` given                                           |
+| "Report a bug" link on a failed turn                                  | `buildReportUrl` given                                           |
 
 `variant` (`ChatVariant.Floating`, the default, or `ChatVariant.Docked`) controls whether `Chat` renders its own header/close button (`Floating`) or leaves the frame and heading to whatever contains it (`Docked`, for a sidebar that already has its own).
 
diff --git a/Source/Canvas/shapes/ChatBubble/index.ts b/Source/Canvas/shapes/ChatBubble/index.ts
index b224b104..8f5e154e 100644
--- a/Source/Canvas/shapes/ChatBubble/index.ts
+++ b/Source/Canvas/shapes/ChatBubble/index.ts
@@ -7,17 +7,28 @@ export { ChatAuthorKind } from './ChatAuthorKind';
 export { ChatBubble } from './ChatBubble';
 export type { ChatBubbleProps } from './ChatBubble';
 export { ChatComposer } from './ChatComposer';
-export type { ChatComposerProps, ChatComposerHandle, ChatComposerLabels } from './ChatComposer';
+export type {
+    ChatComposerProps,
+    ChatComposerHandle,
+    ChatComposerLabels,
+} from './ChatComposer';
 export type { ChatMessage } from './ChatMessage';
 export { ChatMessageBubble } from './ChatMessageBubble';
-export type { ChatMessageBubbleProps, ChatMessageBubbleLabels } from './ChatMessageBubble';
+export type {
+    ChatMessageBubbleProps,
+    ChatMessageBubbleLabels,
+} from './ChatMessageBubble';
 export type { ChatMessageReaction } from './ChatMessageReaction';
 export type { ChatMessageReactionUser } from './ChatMessageReactionUser';
 export type { ChatOwnReaction } from './ChatOwnReaction';
 export type { ChatTypingAuthor } from './ChatTypingAuthor';
 export { ChatVariant } from './ChatVariant';
 export { FailedReply } from './FailedReply';
-export type { FailedReplyProps, FailedReplyLabels, FailedReplyReportDetails } from './FailedReply';
+export type {
+    FailedReplyProps,
+    FailedReplyLabels,
+    FailedReplyReportDetails,
+} from './FailedReply';
 // A consumer that owns reaction commands can use the same current-user lookup as the
 // Components chat composition without duplicating its one-reaction-per-person rules.
 export { findOwnReaction } from './findOwnReaction';
@@ -29,7 +40,11 @@ export type { ReactionPickerProps, ReactionPickerLabels } from './ReactionPicker
 export { TypingIndicator } from './TypingIndicator';
 export type { TypingIndicatorProps } from './TypingIndicator';
 export { AnchoredOverlay } from './AnchoredOverlay';
-export type { AnchoredOverlayProps, AnchoredOverlaySide, AnchoredOverlayAlign } from './AnchoredOverlay';
+export type {
+    AnchoredOverlayProps,
+    AnchoredOverlaySide,
+    AnchoredOverlayAlign,
+} from './AnchoredOverlay';
 
 export * from './Avatar';
 export * from './Emoji';

From 39b4334fa15c2fd18e498cdb9bd2709ca5536a1a Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Tue, 25 Aug 2026 00:48:10 +0200
Subject: [PATCH 046/267] Make Pixi a single optional peer

---
 Documentation/Canvas/index.md  |  8 ++++++++
 Documentation/migration.md     |  2 ++
 Documentation/ui-foundation.md |  2 +-
 Source/MIGRATION.md            |  2 ++
 Source/package.json            | 10 ++++++++--
 5 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/Documentation/Canvas/index.md b/Documentation/Canvas/index.md
index 99f7ef81..6168bdfc 100644
--- a/Documentation/Canvas/index.md
+++ b/Documentation/Canvas/index.md
@@ -21,6 +21,14 @@ import {
 
 Import `@cratis/components/tokens` and `@cratis/components/styles` once at the application root. Add `@cratis/components/theme` only when using the baseline appearance.
 
+Canvas and PivotViewer expose and render real Pixi objects. Install the optional peer once in an application that uses either surface:
+
+```bash
+npm install pixi.js@^8.20.0
+```
+
+Keep one compatible Pixi resolution across the application and Components. Two installed copies produce nominal TypeScript incompatibilities for containers and pointer events even when their APIs look structurally similar.
+
 ## Canvas
 
 ```tsx
diff --git a/Documentation/migration.md b/Documentation/migration.md
index 4387727e..8169d021 100644
--- a/Documentation/migration.md
+++ b/Documentation/migration.md
@@ -30,6 +30,8 @@ npm install @cratis/components
 
 Keep a Prime package only when your application still imports it directly. Migrate those imports separately; Components no longer supplies or requires them.
 
+Applications using Canvas or PivotViewer must install `pixi.js@^8.20.0`, now an optional peer rather than a nested Components dependency. Align any existing direct Pixi dependency to the same compatible resolution so public `PIXI.Container` and pointer-event types come from one package instance. Applications using only non-Pixi subpaths do not need it.
+
 The supported Arc peer range remains `>=20.3.1 <23`.
 
 ## Keep the stylesheet entry points
diff --git a/Documentation/ui-foundation.md b/Documentation/ui-foundation.md
index 21678227..98152619 100644
--- a/Documentation/ui-foundation.md
+++ b/Documentation/ui-foundation.md
@@ -92,7 +92,7 @@ The current exceptions are:
 
 ### Why the Canvas Pixi surface remains public
 
-`CanvasContext`, `renderItem`, and pointer callbacks intentionally expose real Pixi objects so consumers can build arbitrary Pixi content. Replacing those types with reduced Cratis facades would either duplicate Pixi's API or force consumers to cast back to it. The bounded WebGPU declaration exception is preferable to weakening this intentional extensibility contract. PivotViewer does not expose Pixi types publicly and needs no equivalent exception.
+`CanvasContext`, `renderItem`, and pointer callbacks intentionally expose real Pixi objects so consumers can build arbitrary Pixi content. Replacing those types with reduced Cratis facades would either duplicate Pixi's API or force consumers to cast back to it. The bounded WebGPU declaration exception is preferable to weakening this intentional extensibility contract. `pixi.js` is therefore an optional peer: Canvas/PivotViewer consumers install one compatible `^8.20.0` resolution, preventing nested nominally-incompatible Pixi instances while non-Pixi subpaths impose no installation requirement. PivotViewer does not expose Pixi types publicly and needs no equivalent declaration exception.
 
 ## Tracked follow-up work
 
diff --git a/Source/MIGRATION.md b/Source/MIGRATION.md
index 3829a61c..1d8374f0 100644
--- a/Source/MIGRATION.md
+++ b/Source/MIGRATION.md
@@ -27,6 +27,8 @@ npm install @cratis/components
 
 Keep a Prime package only when your application still imports it directly. Migrate those imports separately; Components no longer supplies or requires them.
 
+Applications using Canvas or PivotViewer must install `pixi.js@^8.20.0`, now an optional peer rather than a nested Components dependency. Align any existing direct Pixi dependency to the same compatible resolution so public Pixi types come from one package instance. Applications using only non-Pixi subpaths do not need it.
+
 The supported Arc peer range remains `>=20.3.1 <23`.
 
 ## Keep the stylesheet entry points
diff --git a/Source/package.json b/Source/package.json
index 64a59391..a7ed0508 100644
--- a/Source/package.json
+++ b/Source/package.json
@@ -142,21 +142,27 @@
         "@internationalized/date": "3.12.3",
         "allotment": "1.20.5",
         "framer-motion": "13.1.1",
-        "pixi.js": "^8.20.0",
         "react-aria-components": "1.20.0",
         "react-icons": "5.7.0",
         "ts-deepmerge": "8.0.0"
     },
     "devDependencies": {
-        "@cratis/arc.vite": "22.1.0"
+        "@cratis/arc.vite": "22.1.0",
+        "pixi.js": "^8.20.0"
     },
     "peerDependencies": {
         "@cratis/arc": ">=20.3.1 <23",
         "@cratis/arc.react": ">=20.3.1 <23",
         "@cratis/fundamentals": "^7.10.3",
+        "pixi.js": "^8.20.0",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
         "reflect-metadata": "0.2.2",
         "tsyringe": "4.10.0"
+    },
+    "peerDependenciesMeta": {
+        "pixi.js": {
+            "optional": true
+        }
     }
 }

From 9c03755ed9c76a57834106658c1bead3cbe444ff Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Tue, 25 Aug 2026 11:03:34 +0200
Subject: [PATCH 047/267] Apply final review hardening

---
 .github/workflows/javascript-build.yml        |  5 ++
 .../Common/cratis-components-provider.md      | 39 +++++++----
 Documentation/verify-markdown.sh              |  5 +-
 Source/CommandDialog/CommandStepper.tsx       |  8 ++-
 Source/CommandDialog/StepperCommandDialog.tsx | 23 ++++---
 Source/CommandForm/fields/CalendarField.tsx   | 51 ++++++++-------
 Source/CommandForm/fields/DropdownField.tsx   | 53 ++++++++-------
 .../CommandForm/fields/MultiSelectField.tsx   | 64 ++++++++++---------
 Source/Common/ActionMenubar.tsx               |  8 ++-
 Source/Common/CratisComponentsProvider.tsx    |  3 +-
 Source/Common/DatePickerInput.tsx             | 17 +++--
 Source/DataPage/DataPage.tsx                  | 20 ++++--
 Source/DataTables/DataTableCore.tsx           | 12 +++-
 .../DataTableForObservableQuery.tsx           | 12 +++-
 Source/DataTables/DataTableForQuery.tsx       | 12 +++-
 Source/DataTables/TablePaginator.tsx          |  4 +-
 .../when_using_legacy_operator_filters.tsx    | 19 +++++-
 Source/Dialogs/Dialog.tsx                     | 12 +++-
 Source/Dropdown/Dropdown.tsx                  | 12 +++-
 Source/TimeMachine/EventsView.tsx             |  8 ++-
 20 files changed, 250 insertions(+), 137 deletions(-)

diff --git a/.github/workflows/javascript-build.yml b/.github/workflows/javascript-build.yml
index f2848351..57a3c698 100644
--- a/.github/workflows/javascript-build.yml
+++ b/.github/workflows/javascript-build.yml
@@ -37,6 +37,7 @@ permissions:
 jobs:
     build:
         runs-on: ubuntu-latest
+        timeout-minutes: 15
 
         steps:
             - name: Checkout code
@@ -93,6 +94,7 @@ jobs:
     # subpaths load cleanly - so `continue-on-error` is gone and this is now a real gate.
     verify-published-exports:
         runs-on: ubuntu-latest
+        timeout-minutes: 10
 
         steps:
             - name: Checkout code
@@ -133,6 +135,7 @@ jobs:
     # unlisted diagnostic fails this job, as does an exception that stops reproducing.
     verify-public-types:
         runs-on: ubuntu-latest
+        timeout-minutes: 15
 
         steps:
             - name: Checkout code
@@ -177,6 +180,7 @@ jobs:
 
     verify-arc-consumers:
         runs-on: ubuntu-latest
+        timeout-minutes: 15
         strategy:
             fail-fast: false
             matrix:
@@ -236,6 +240,7 @@ jobs:
 
     verify-package-managers:
         runs-on: ubuntu-latest
+        timeout-minutes: 15
         strategy:
             fail-fast: false
             matrix:
diff --git a/Documentation/Common/cratis-components-provider.md b/Documentation/Common/cratis-components-provider.md
index 53510b8e..1f6985f1 100644
--- a/Documentation/Common/cratis-components-provider.md
+++ b/Documentation/Common/cratis-components-provider.md
@@ -17,20 +17,35 @@ export const App = () => (
 );
 ```
 
+The provider memoizes its resolved configuration by the `value` object identity. For an application root that re-renders frequently, keep a configured object stable rather than constructing a large message catalog inline on every render:
+
+```tsx
+const componentsConfig = {
+    locale: 'en-US',
+    messages: productMessages,
+};
+
+<CratisComponentsProvider value={componentsConfig} toaster>
+    <Application />
+</CratisComponentsProvider>;
+```
+
+A small inline object as in the basic example is inexpensive; the stable form matters when the value contains a larger product-owned message catalog.
+
 ## Configuration
 
-| Member                  | Purpose                                                                                    |
-| ----------------------- | ------------------------------------------------------------------------------------------ |
-| `locale`                | BCP 47 locale used by React Aria for dates, numbers, keyboard behavior, and announcements. |
-| `messages.paginator`    | Components-owned paginator labels.                                                         |
-| `messages.datePicker`   | Components-owned date-picker action/navigation labels, plus the segmented input's fallback accessible name (`label`). |
-| `messages.dropdown`     | `Dropdown`'s show-options and clear-selection labels.                                      |
-| `messages.dialog`       | Action/dismissal labels (`ok`, `cancel`, `yes`, `no`, `close`) shared by `Dialog`, `CommandDialog`, and `StepperCommandDialog`. |
-| `messages.stepper`      | Navigation labels (`next`, `previous`, `submit`) shared by `CommandStepper` and `StepperCommandDialog`. |
-| `messages.notifications`| `Toaster`'s dismiss-action and region-landmark labels.                                     |
-| `messages.dataTable`    | `DataTableCore`'s loaded-page search and single-row-selection labels.                      |
-| `messages.columnFilter` | The built-in column filter popup's clear/apply/boolean/match-mode labels.                  |
-| `locales`               | Temporary Components 3 compatibility map; migrate to `messages`.                           |
+| Member                   | Purpose                                                                                                                         |
+| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------- |
+| `locale`                 | BCP 47 locale used by React Aria for dates, numbers, keyboard behavior, and announcements.                                      |
+| `messages.paginator`     | Components-owned paginator labels.                                                                                              |
+| `messages.datePicker`    | Components-owned date-picker action/navigation labels, plus the segmented input's fallback accessible name (`label`).           |
+| `messages.dropdown`      | `Dropdown`'s show-options and clear-selection labels.                                                                           |
+| `messages.dialog`        | Action/dismissal labels (`ok`, `cancel`, `yes`, `no`, `close`) shared by `Dialog`, `CommandDialog`, and `StepperCommandDialog`. |
+| `messages.stepper`       | Navigation labels (`next`, `previous`, `submit`) shared by `CommandStepper` and `StepperCommandDialog`.                         |
+| `messages.notifications` | `Toaster`'s dismiss-action and region-landmark labels.                                                                          |
+| `messages.dataTable`     | `DataTableCore`'s loaded-page search and single-row-selection labels.                                                           |
+| `messages.columnFilter`  | The built-in column filter popup's clear/apply/boolean/match-mode labels.                                                       |
+| `locales`                | Temporary Components 3 compatibility map; migrate to `messages`.                                                                |
 
 Unknown Components 3 renderer options are intentionally a type error. Remove `license`, `theme`, `defaults`, global `pt`, `ptOptions`, `ripple`, `unstyled`, and renderer z-index settings rather than compiling a provider whose visual configuration does nothing. Configure any remaining direct Prime provider independently.
 
diff --git a/Documentation/verify-markdown.sh b/Documentation/verify-markdown.sh
index 67d00e03..f1041143 100755
--- a/Documentation/verify-markdown.sh
+++ b/Documentation/verify-markdown.sh
@@ -30,7 +30,10 @@ if ! command -v npx >/dev/null 2>&1; then
     exit 1
 fi
 
-npx markdownlint-cli2 "Documentation/**/*.md"
+npx markdownlint-cli2 \
+    "Documentation/**/*.md" \
+    "Source/README.md" \
+    "Source/MIGRATION.md"
 LINT_EXIT_CODE=$?
 
 echo ""
diff --git a/Source/CommandDialog/CommandStepper.tsx b/Source/CommandDialog/CommandStepper.tsx
index d844790a..af87efbf 100644
--- a/Source/CommandDialog/CommandStepper.tsx
+++ b/Source/CommandDialog/CommandStepper.tsx
@@ -79,9 +79,13 @@ export interface StepperCustomizationProps {
     onChangeStep?: (event: StepperChangeEvent) => void;
     /** Cratis-owned per-part attributes for the stepper. */
     pt?: StepperParts;
-    /** Retained for source compatibility; Cratis parts always merge. */
+    /**
+     * @deprecated Cratis parts always merge. Remove this renderer-era option.
+     */
     ptOptions?: object;
-    /** Retained for source compatibility; consumers always own the CSS. */
+    /**
+     * @deprecated Components always uses consumer-owned CSS. Customize through `pt` and CSS instead.
+     */
     unstyled?: boolean;
 }
 
diff --git a/Source/CommandDialog/StepperCommandDialog.tsx b/Source/CommandDialog/StepperCommandDialog.tsx
index 36ec4366..8c81a678 100644
--- a/Source/CommandDialog/StepperCommandDialog.tsx
+++ b/Source/CommandDialog/StepperCommandDialog.tsx
@@ -99,9 +99,13 @@ export interface StepperCommandDialogProps<TCommand extends object, TResponse =
     dialogClassName?: string;
     /** Cratis-owned per-part attributes applied to the outer Dialog. */
     dialogPt?: DialogProps['pt'];
-    /** Legacy part merge options applied to the outer Dialog. */
+    /**
+     * @deprecated Cratis dialog parts always merge. Remove this renderer-era option.
+     */
     dialogPtOptions?: DialogProps['ptOptions'];
-    /** Legacy renderer flag retained for source compatibility; ignored on the outer Dialog. */
+    /**
+     * @deprecated Components always uses consumer-owned CSS. Customize through `dialogPt` and CSS instead.
+     */
     dialogUnstyled?: boolean;
     /** StepperPanel children defining each wizard step. */
     children?: React.ReactNode;
@@ -178,7 +182,8 @@ const StepperCommandDialogWrapper = <TCommand extends object, TResponse = object
     const dialogMessages = messages?.dialog;
     const resolvedOkLabel = okLabel ?? stepperMessages?.submit ?? 'Submit';
     const resolvedNextLabel = nextLabel ?? stepperMessages?.next ?? 'Next';
-    const resolvedPreviousLabel = previousLabel ?? stepperMessages?.previous ?? 'Previous';
+    const resolvedPreviousLabel =
+        previousLabel ?? stepperMessages?.previous ?? 'Previous';
     const resolvedCancelLabel = cancelLabel ?? dialogMessages?.cancel ?? 'Cancel';
     const {
         setCommandValues,
@@ -233,12 +238,12 @@ const StepperCommandDialogWrapper = <TCommand extends object, TResponse = object
                 shouldCloseThroughContext = closeResult !== false;
             }
         } else if (onCancel) {
-                const closeResult = await onCancel();
-                shouldCloseThroughContext = closeResult === true;
-            } else if (onClose) {
-                const closeResult = await onClose(result);
-                shouldCloseThroughContext = closeResult !== false;
-            }
+            const closeResult = await onCancel();
+            shouldCloseThroughContext = closeResult === true;
+        } else if (onClose) {
+            const closeResult = await onClose(result);
+            shouldCloseThroughContext = closeResult !== false;
+        }
 
         if (shouldCloseThroughContext) {
             contextCloseDialog?.(result);
diff --git a/Source/CommandForm/fields/CalendarField.tsx b/Source/CommandForm/fields/CalendarField.tsx
index 82fc2bd7..46fd2eec 100644
--- a/Source/CommandForm/fields/CalendarField.tsx
+++ b/Source/CommandForm/fields/CalendarField.tsx
@@ -16,8 +16,7 @@ import {
  * Component-level props for {@link CalendarField}.
  */
 interface CalendarFieldComponentProps
-    extends WrappedFieldProps<Date | null>,
-        FieldAccessibilityProps {
+    extends WrappedFieldProps<Date | null>, FieldAccessibilityProps {
     /** Placeholder text shown when no date is selected. */
     placeholder?: string;
 
@@ -45,10 +44,14 @@ interface CalendarFieldComponentProps
     /** Cratis-owned per-part attributes applied to the date picker. */
     pt?: DatePickerInputPassThrough;
 
-    /** Retained for source compatibility; Cratis parts always merge. */
+    /**
+     * @deprecated Cratis parts always merge. Remove this renderer-era option.
+     */
     ptOptions?: object;
 
-    /** Retained for source compatibility; consumers always own the CSS. */
+    /**
+     * @deprecated Components always uses consumer-owned CSS. Customize through `pt` and CSS instead.
+     */
     unstyled?: boolean;
 }
 
@@ -74,26 +77,26 @@ export const CalendarField = asCommandFormField<CalendarFieldComponentProps>(
         });
         return (
             <>
-        <DatePickerInput
-            id={accessibility.controlId}
-            aria-label={accessibility.ariaLabel}
-            aria-describedby={accessibility.ariaDescribedBy}
-            value={props.value}
-            onChange={props.onChange}
-            onBlur={props.onBlur}
-            invalid={props.invalid}
-            placeholder={props.placeholder}
-            dateFormat={props.dateFormat}
-            showIcon={props.showIcon}
-            showTime={props.showTime}
-            hourFormat={props.hourFormat}
-            minDate={props.minDate}
-            maxDate={props.maxDate}
-            className={props.className}
-            pt={props.pt}
-            ptOptions={props.ptOptions}
-            unstyled={props.unstyled}
-        />
+                <DatePickerInput
+                    id={accessibility.controlId}
+                    aria-label={accessibility.ariaLabel}
+                    aria-describedby={accessibility.ariaDescribedBy}
+                    value={props.value}
+                    onChange={props.onChange}
+                    onBlur={props.onBlur}
+                    invalid={props.invalid}
+                    placeholder={props.placeholder}
+                    dateFormat={props.dateFormat}
+                    showIcon={props.showIcon}
+                    showTime={props.showTime}
+                    hourFormat={props.hourFormat}
+                    minDate={props.minDate}
+                    maxDate={props.maxDate}
+                    className={props.className}
+                    pt={props.pt}
+                    ptOptions={props.ptOptions}
+                    unstyled={props.unstyled}
+                />
                 {accessibility.hiddenError}
             </>
         );
diff --git a/Source/CommandForm/fields/DropdownField.tsx b/Source/CommandForm/fields/DropdownField.tsx
index e27f87de..7c316215 100644
--- a/Source/CommandForm/fields/DropdownField.tsx
+++ b/Source/CommandForm/fields/DropdownField.tsx
@@ -13,8 +13,7 @@ import {
  * Component-level props for {@link DropdownField}.
  */
 interface DropdownFieldComponentProps
-    extends WrappedFieldProps<string | number>,
-        FieldAccessibilityProps {
+    extends WrappedFieldProps<string | number>, FieldAccessibilityProps {
     /** Source array of objects to populate the dropdown options. */
     options: Array<{ [key: string]: unknown }>;
 
@@ -33,10 +32,14 @@ interface DropdownFieldComponentProps
     /** Cratis-owned per-part attributes applied to the underlying Dropdown. */
     pt?: DropdownProps['pt'];
 
-    /** Legacy part merge options applied to the underlying Dropdown. */
+    /**
+     * @deprecated Cratis parts always merge. Remove this renderer-era option.
+     */
     ptOptions?: DropdownProps['ptOptions'];
 
-    /** Legacy renderer flag retained for source compatibility; ignored on the underlying Dropdown. */
+    /**
+     * @deprecated Components always uses consumer-owned CSS. Customize through `pt` and CSS instead.
+     */
     unstyled?: boolean;
 }
 
@@ -64,29 +67,33 @@ export const DropdownField = asCommandFormField<DropdownFieldComponentProps>(
         });
         return (
             <>
-        <Dropdown
-            id={accessibility.controlId}
-            aria-label={accessibility.ariaLabel}
-            aria-describedby={accessibility.ariaDescribedBy}
-            value={props.value}
-            onChange={(e) => props.onChange(e.value)}
-            onBlur={props.onBlur}
-            options={props.options}
-            optionValue={props.optionValue}
-            optionLabel={props.optionLabel}
-            placeholder={props.placeholder}
-            invalid={props.invalid}
-            className={props.className ? `cratis:w-full ${props.className}` : 'cratis:w-full'}
-            pt={props.pt}
-            ptOptions={props.ptOptions}
-            unstyled={props.unstyled}
-        />
+                <Dropdown
+                    id={accessibility.controlId}
+                    aria-label={accessibility.ariaLabel}
+                    aria-describedby={accessibility.ariaDescribedBy}
+                    value={props.value}
+                    onChange={(e) => props.onChange(e.value)}
+                    onBlur={props.onBlur}
+                    options={props.options}
+                    optionValue={props.optionValue}
+                    optionLabel={props.optionLabel}
+                    placeholder={props.placeholder}
+                    invalid={props.invalid}
+                    className={
+                        props.className
+                            ? `cratis:w-full ${props.className}`
+                            : 'cratis:w-full'
+                    }
+                    pt={props.pt}
+                    ptOptions={props.ptOptions}
+                    unstyled={props.unstyled}
+                />
                 {accessibility.hiddenError}
             </>
         );
     },
     {
         defaultValue: '',
-        extractValue: (e: unknown) => e as string | number
-    }
+        extractValue: (e: unknown) => e as string | number,
+    },
 );
diff --git a/Source/CommandForm/fields/MultiSelectField.tsx b/Source/CommandForm/fields/MultiSelectField.tsx
index d404a3d7..fa90afdd 100644
--- a/Source/CommandForm/fields/MultiSelectField.tsx
+++ b/Source/CommandForm/fields/MultiSelectField.tsx
@@ -13,8 +13,7 @@ import {
  * Component-level props for {@link MultiSelectField}.
  */
 interface MultiSelectFieldComponentProps
-    extends WrappedFieldProps<Array<string | number>>,
-        FieldAccessibilityProps {
+    extends WrappedFieldProps<Array<string | number>>, FieldAccessibilityProps {
     /** Source array of objects to populate the multi-select options. */
     options: Array<Record<string, unknown>>;
 
@@ -28,17 +27,12 @@ interface MultiSelectFieldComponentProps
     placeholder?: string;
 
     /**
-     * How the selection is displayed in the field: comma-separated or as chips.
-     *
-     * Legacy display mode retained for source compatibility; native multiple
-     * selection does not change presentation based on this value.
+     * @deprecated Native multiple selection has one presentation. Remove this renderer-era option.
      */
     display?: 'comma' | 'chip';
 
     /**
-     * Maximum number of selected labels to show before collapsing into a count.
-     *
-     * Accepted for API compatibility; not applied by native multiple selection.
+     * @deprecated Native multiple selection does not collapse labels. Remove this renderer-era option.
      */
     maxSelectedLabels?: number;
 
@@ -54,10 +48,14 @@ interface MultiSelectFieldComponentProps
     /** Cratis-owned per-part attributes applied to the underlying Select. */
     pt?: DropdownProps['pt'];
 
-    /** Legacy part merge options applied to the underlying Select. */
+    /**
+     * @deprecated Cratis parts always merge. Remove this renderer-era option.
+     */
     ptOptions?: DropdownProps['ptOptions'];
 
-    /** Legacy renderer flag retained for source compatibility; ignored on the underlying Select. */
+    /**
+     * @deprecated Components always uses consumer-owned CSS. Customize through `pt` and CSS instead.
+     */
     unstyled?: boolean;
 }
 
@@ -82,26 +80,30 @@ export const MultiSelectField = asCommandFormField<MultiSelectFieldComponentProp
         });
         return (
             <>
-        <Dropdown<Array<string | number>>
-            id={accessibility.controlId}
-            aria-label={accessibility.ariaLabel}
-            aria-describedby={accessibility.ariaDescribedBy}
-            multiple
-            value={props.value}
-            onChange={(e) => props.onChange(e.value ?? [])}
-            onBlur={props.onBlur}
-            options={props.options}
-            optionValue={props.optionValue}
-            optionLabel={props.optionLabel}
-            placeholder={props.placeholder}
-            filter={props.filter}
-            showClear={props.showClear}
-            invalid={props.invalid}
-            className={props.className ? `cratis:w-full ${props.className}` : 'cratis:w-full'}
-            pt={props.pt}
-            ptOptions={props.ptOptions}
-            unstyled={props.unstyled}
-        />
+                <Dropdown<Array<string | number>>
+                    id={accessibility.controlId}
+                    aria-label={accessibility.ariaLabel}
+                    aria-describedby={accessibility.ariaDescribedBy}
+                    multiple
+                    value={props.value}
+                    onChange={(e) => props.onChange(e.value ?? [])}
+                    onBlur={props.onBlur}
+                    options={props.options}
+                    optionValue={props.optionValue}
+                    optionLabel={props.optionLabel}
+                    placeholder={props.placeholder}
+                    filter={props.filter}
+                    showClear={props.showClear}
+                    invalid={props.invalid}
+                    className={
+                        props.className
+                            ? `cratis:w-full ${props.className}`
+                            : 'cratis:w-full'
+                    }
+                    pt={props.pt}
+                    ptOptions={props.ptOptions}
+                    unstyled={props.unstyled}
+                />
                 {accessibility.hiddenError}
             </>
         );
diff --git a/Source/Common/ActionMenubar.tsx b/Source/Common/ActionMenubar.tsx
index bb17b232..1d1225ea 100644
--- a/Source/Common/ActionMenubar.tsx
+++ b/Source/Common/ActionMenubar.tsx
@@ -32,9 +32,13 @@ export interface ActionMenubarProps {
     'aria-label'?: string;
     /** Cratis-owned per-part attributes applied to each action button. */
     pt?: ButtonParts;
-    /** Retained for source compatibility; Cratis parts always merge. */
+    /**
+     * @deprecated Cratis parts always merge. Remove this renderer-era option.
+     */
     ptOptions?: object;
-    /** Retained for source compatibility; Components always uses consumer-owned CSS. */
+    /**
+     * @deprecated Components always uses consumer-owned CSS. Customize through `pt` and CSS instead.
+     */
     unstyled?: boolean;
 }
 
diff --git a/Source/Common/CratisComponentsProvider.tsx b/Source/Common/CratisComponentsProvider.tsx
index ae67a399..432a646d 100644
--- a/Source/Common/CratisComponentsProvider.tsx
+++ b/Source/Common/CratisComponentsProvider.tsx
@@ -153,8 +153,7 @@ export interface CratisComponentsConfig {
     /** Cratis-owned labels not supplied by the platform's internationalization APIs. */
     messages?: CratisComponentsMessages;
     /**
-     * Legacy locale map retained for source compatibility during the major migration.
-     * New code should use {@link messages}; React Aria supplies its own locale data.
+     * @deprecated Use {@link messages}; React Aria supplies its own locale data.
      */
     locales?: Record<string, LegacyLocaleMessages>;
 }
diff --git a/Source/Common/DatePickerInput.tsx b/Source/Common/DatePickerInput.tsx
index 161618c2..e48a74f6 100644
--- a/Source/Common/DatePickerInput.tsx
+++ b/Source/Common/DatePickerInput.tsx
@@ -32,11 +32,10 @@ import {
     toCalendarDate,
 } from '@internationalized/date';
 
-interface DatePickerPartAttributes
-    extends Omit<
-        HTMLAttributes<HTMLElement>,
-        'defaultValue' | 'onChange' | 'role'
-    > {
+interface DatePickerPartAttributes extends Omit<
+    HTMLAttributes<HTMLElement>,
+    'defaultValue' | 'onChange' | 'role'
+> {
     id?: string;
     className?: string;
     style?: CSSProperties;
@@ -133,9 +132,13 @@ export interface DatePickerInputProps {
     style?: CSSProperties;
     /** Cratis-owned per-part attributes. */
     pt?: DatePickerInputPassThrough;
-    /** Retained for source compatibility; Cratis parts always merge. */
+    /**
+     * @deprecated Cratis parts always merge. Remove this renderer-era option.
+     */
     ptOptions?: object;
-    /** Retained for source compatibility; consumers always own the CSS. */
+    /**
+     * @deprecated Components always uses consumer-owned CSS. Customize through `pt` and CSS instead.
+     */
     unstyled?: boolean;
     /** Localized label for the Today action. */
     todayLabel?: string;
diff --git a/Source/DataPage/DataPage.tsx b/Source/DataPage/DataPage.tsx
index 4ce7854c..d96aad88 100644
--- a/Source/DataPage/DataPage.tsx
+++ b/Source/DataPage/DataPage.tsx
@@ -332,10 +332,14 @@ export interface DataPageProps<
     /** Cratis-owned per-part attributes applied to the inner table. */
     tablePt?: DataTableParts;
 
-    /** Retained for source compatibility; Cratis parts always merge. */
+    /**
+     * @deprecated Cratis table parts always merge. Remove this renderer-era option.
+     */
     tablePtOptions?: object;
 
-    /** Legacy renderer flag retained for source compatibility; ignored on the inner DataTable. */
+    /**
+     * @deprecated Components always uses consumer-owned CSS. Customize through `tablePt` and CSS instead.
+     */
     tableUnstyled?: boolean;
 
     /** Extra CSS class name forwarded to the query table paginator. */
@@ -344,7 +348,9 @@ export interface DataPageProps<
     /** Cratis-owned attributes applied to the query table paginator. */
     paginatorPt?: TablePaginatorParts;
 
-    /** Retained for source compatibility; Cratis parts always merge. */
+    /**
+     * @deprecated Cratis paginator parts always merge. Remove this renderer-era option.
+     */
     paginatorPtOptions?: object;
 
     /** Accessible paginator labels. Override any value to localize it. */
@@ -358,10 +364,14 @@ export interface DataPageProps<
     /** Cratis-owned part attributes applied to the action menubar's buttons. */
     menubarPt?: ButtonParts;
 
-    /** Retained for source compatibility; Cratis parts always merge. */
+    /**
+     * @deprecated Cratis menubar parts always merge. Remove this renderer-era option.
+     */
     menubarPtOptions?: object;
 
-    /** Legacy renderer flag retained for source compatibility; ignored on the action menubar's buttons. */
+    /**
+     * @deprecated Components always uses consumer-owned CSS. Customize through `menubarPt` and CSS instead.
+     */
     menubarUnstyled?: boolean;
 
     /**
diff --git a/Source/DataTables/DataTableCore.tsx b/Source/DataTables/DataTableCore.tsx
index 1022568d..f2c1b4d9 100644
--- a/Source/DataTables/DataTableCore.tsx
+++ b/Source/DataTables/DataTableCore.tsx
@@ -106,9 +106,13 @@ export interface DataTableCoreProps<TData extends object> {
     style?: CSSProperties;
     /** Cratis-owned per-part attributes. */
     pt?: DataTableParts;
-    /** Retained for source compatibility; Cratis parts always merge. */
+    /**
+     * @deprecated Cratis parts always merge. Remove this renderer-era option.
+     */
     ptOptions?: object;
-    /** Retained for source compatibility; consumers always own the CSS. */
+    /**
+     * @deprecated Components always uses consumer-owned CSS. Customize through `pt` and CSS instead.
+     */
     unstyled?: boolean;
 }
 
@@ -621,7 +625,9 @@ export const DataTableCore = <TData extends object>({
                                                         name={selectionGroupName}
                                                         readOnly
                                                         tabIndex={-1}
-                                                        aria-label={resolvedSelectionAriaLabel}
+                                                        aria-label={
+                                                            resolvedSelectionAriaLabel
+                                                        }
                                                         checked={isSelected}
                                                     />
                                                 ) : (
diff --git a/Source/DataTables/DataTableForObservableQuery.tsx b/Source/DataTables/DataTableForObservableQuery.tsx
index 8537a1d5..20447e8e 100644
--- a/Source/DataTables/DataTableForObservableQuery.tsx
+++ b/Source/DataTables/DataTableForObservableQuery.tsx
@@ -95,10 +95,14 @@ export interface DataTableForObservableQueryProps<
     /** Cratis-owned per-part attributes applied to the underlying table. */
     pt?: DataTableParts;
 
-    /** Retained for source compatibility; Cratis parts always merge. */
+    /**
+     * @deprecated Cratis parts always merge. Remove this renderer-era option.
+     */
     ptOptions?: object;
 
-    /** Legacy renderer flag retained for source compatibility; ignored on the underlying DataTable. */
+    /**
+     * @deprecated Components always uses consumer-owned CSS. Customize through `pt` and CSS instead.
+     */
     unstyled?: boolean;
 
     /** Extra CSS class name forwarded to the paginator. */
@@ -107,7 +111,9 @@ export interface DataTableForObservableQueryProps<
     /** Cratis-owned attributes for paginator parts. */
     paginatorPt?: TablePaginatorParts;
 
-    /** Retained for source compatibility; Cratis parts always merge. */
+    /**
+     * @deprecated Cratis paginator parts always merge. Remove this renderer-era option.
+     */
     paginatorPtOptions?: object;
 
     /** Accessible names for the paginator controls. Override any to localize. */
diff --git a/Source/DataTables/DataTableForQuery.tsx b/Source/DataTables/DataTableForQuery.tsx
index 2f97c9d4..1ac5feb3 100644
--- a/Source/DataTables/DataTableForQuery.tsx
+++ b/Source/DataTables/DataTableForQuery.tsx
@@ -93,10 +93,14 @@ export interface DataTableForQueryProps<
     /** Cratis-owned per-part attributes applied to the underlying table. */
     pt?: DataTableParts;
 
-    /** Retained for source compatibility; Cratis parts always merge. */
+    /**
+     * @deprecated Cratis parts always merge. Remove this renderer-era option.
+     */
     ptOptions?: object;
 
-    /** Legacy renderer flag retained for source compatibility; ignored on the underlying DataTable. */
+    /**
+     * @deprecated Components always uses consumer-owned CSS. Customize through `pt` and CSS instead.
+     */
     unstyled?: boolean;
 
     /** Extra CSS class name forwarded to the paginator. */
@@ -105,7 +109,9 @@ export interface DataTableForQueryProps<
     /** Cratis-owned attributes for paginator parts. */
     paginatorPt?: TablePaginatorParts;
 
-    /** Retained for source compatibility; Cratis parts always merge. */
+    /**
+     * @deprecated Cratis paginator parts always merge. Remove this renderer-era option.
+     */
     paginatorPtOptions?: object;
 
     /** Accessible names for the paginator controls. Override any to localize. */
diff --git a/Source/DataTables/TablePaginator.tsx b/Source/DataTables/TablePaginator.tsx
index cfe4f21c..694b9845 100644
--- a/Source/DataTables/TablePaginator.tsx
+++ b/Source/DataTables/TablePaginator.tsx
@@ -48,7 +48,9 @@ export interface TablePaginatorProps {
     className?: string;
     /** Cratis-owned paginator part attributes. */
     pt?: TablePaginatorParts;
-    /** Retained for source compatibility; Cratis parts always merge. */
+    /**
+     * @deprecated Cratis parts always merge. Remove this renderer-era option.
+     */
     ptOptions?: object;
 }
 
diff --git a/Source/DataTables/for_DataTableForQuery/when_using_legacy_operator_filters.tsx b/Source/DataTables/for_DataTableForQuery/when_using_legacy_operator_filters.tsx
index 40e812f0..f7409d4c 100644
--- a/Source/DataTables/for_DataTableForQuery/when_using_legacy_operator_filters.tsx
+++ b/Source/DataTables/for_DataTableForQuery/when_using_legacy_operator_filters.tsx
@@ -67,6 +67,23 @@ describe('when using legacy operator filters', () => {
     });
 
     it('should apply every constraint using the configured operator', () => {
-        expect(container.querySelectorAll('tbody tr')).to.have.lengthOf(12);
+        const names = Array.from(container.querySelectorAll('tbody tr')).map(
+            (row) => row.textContent,
+        );
+
+        expect(names).to.deep.equal([
+            'Product 1',
+            'Product 2',
+            'Product 10',
+            'Product 11',
+            'Product 12',
+            'Product 13',
+            'Product 14',
+            'Product 15',
+            'Product 16',
+            'Product 17',
+            'Product 18',
+            'Product 19',
+        ]);
     });
 });
diff --git a/Source/Dialogs/Dialog.tsx b/Source/Dialogs/Dialog.tsx
index 4aa8b972..16411f2a 100644
--- a/Source/Dialogs/Dialog.tsx
+++ b/Source/Dialogs/Dialog.tsx
@@ -81,7 +81,9 @@ export interface DialogProps {
     style?: CSSProperties;
     /** Content-region inline style. */
     contentStyle?: CSSProperties;
-    /** Retained for source compatibility; the dialog is viewport-bounded rather than resizable. */
+    /**
+     * @deprecated The Cratis dialog is viewport-bounded rather than resizable. Remove this prop.
+     */
     resizable?: boolean;
     /** Whether the primary action is enabled. Defaults to `true`. */
     isValid?: boolean;
@@ -103,9 +105,13 @@ export interface DialogProps {
     className?: string;
     /** Cratis-owned per-part attributes. */
     pt?: DialogParts;
-    /** Retained for source compatibility; Cratis parts always merge. */
+    /**
+     * @deprecated Cratis parts always merge. Remove this renderer-era option.
+     */
     ptOptions?: object;
-    /** Retained for source compatibility; consumers always own the CSS. */
+    /**
+     * @deprecated Components always uses consumer-owned CSS. Customize through `pt` and CSS instead.
+     */
     unstyled?: boolean;
 }
 
diff --git a/Source/Dropdown/Dropdown.tsx b/Source/Dropdown/Dropdown.tsx
index 8a28d866..6e52db98 100644
--- a/Source/Dropdown/Dropdown.tsx
+++ b/Source/Dropdown/Dropdown.tsx
@@ -143,9 +143,13 @@ export interface DropdownProps<T = unknown> {
     onBlur?: FocusEventHandler<HTMLElement>;
     /** Cratis-owned per-part attributes. */
     pt?: DropdownParts;
-    /** Retained for source compatibility; Cratis parts always merge. */
+    /**
+     * @deprecated Cratis parts always merge. Remove this renderer-era option.
+     */
     ptOptions?: object;
-    /** Retained for source compatibility; consumers always own the CSS. */
+    /**
+     * @deprecated Components always uses consumer-owned CSS. Customize through `pt` and CSS instead.
+     */
     unstyled?: boolean;
 }
 
@@ -243,7 +247,9 @@ export const Dropdown = <T = unknown,>({
         dropdownMessages?.showOptions ??
         'Show options';
     const clearSelectionLabel =
-        pt?.clear?.['aria-label'] ?? dropdownMessages?.clearSelection ?? 'Clear selection';
+        pt?.clear?.['aria-label'] ??
+        dropdownMessages?.clearSelection ??
+        'Clear selection';
     const resolvedOptions = resolveOptions(options, optionLabel, optionValue);
     const selectedOption = resolvedOptions.find((option) =>
         Object.is(option.value, value),
diff --git a/Source/TimeMachine/EventsView.tsx b/Source/TimeMachine/EventsView.tsx
index 7de58425..560b2a8a 100644
--- a/Source/TimeMachine/EventsView.tsx
+++ b/Source/TimeMachine/EventsView.tsx
@@ -30,9 +30,13 @@ export interface EventsViewProps {
     className?: string;
     /** Cratis-owned per-part attributes for timeline, event, separator, marker, connector, content. */
     pt?: EventsViewParts;
-    /** Retained for source compatibility; Cratis parts always merge. */
+    /**
+     * @deprecated Cratis parts always merge. Remove this renderer-era option.
+     */
     ptOptions?: object;
-    /** Retained for source compatibility; consumers always own the CSS. */
+    /**
+     * @deprecated Components always uses consumer-owned CSS. Customize through `pt` and CSS instead.
+     */
     unstyled?: boolean;
     /** Override any user-facing string (for localization). See {@link TimeMachineLabels}. */
     labels?: TimeMachineLabels;

From fdf59cb74f6a981c479c2c04fc5f98936fe648e0 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Tue, 25 Aug 2026 11:04:50 +0200
Subject: [PATCH 048/267] Complete re-review follow-ups

---
 Source/CommandDialog/CommandStepper.stories.tsx       | 4 ++--
 Source/CommandDialog/StepperCommandDialog.stories.tsx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/Source/CommandDialog/CommandStepper.stories.tsx b/Source/CommandDialog/CommandStepper.stories.tsx
index 1dd02985..6601df74 100644
--- a/Source/CommandDialog/CommandStepper.stories.tsx
+++ b/Source/CommandDialog/CommandStepper.stories.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 React, { useState } from 'react';
+import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { StepperPanel } from './StepperPanel';
 import { CommandStepper } from './CommandStepper';
@@ -17,7 +17,7 @@ const meta: Meta<typeof CommandStepper> = {
 export default meta;
 type Story = StoryObj<typeof CommandStepper>;
 
-class CreateProjectValidator extends CommandValidator {
+class CreateProjectValidator extends CommandValidator<CreateProjectCommand> {
     constructor() {
         super();
         this.ruleFor((c: CreateProjectCommand) => c.name).notEmpty().minLength(2).maxLength(100);
diff --git a/Source/CommandDialog/StepperCommandDialog.stories.tsx b/Source/CommandDialog/StepperCommandDialog.stories.tsx
index ccbcaada..5e741803 100644
--- a/Source/CommandDialog/StepperCommandDialog.stories.tsx
+++ b/Source/CommandDialog/StepperCommandDialog.stories.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 React, { useState } from 'react';
+import { useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import { StepperCommandDialog } from './StepperCommandDialog';
 import { Command, CommandResult, CommandValidator } from '@cratis/arc/commands';
@@ -19,7 +19,7 @@ const meta: Meta<typeof StepperCommandDialog> = {
 export default meta;
 type Story = StoryObj<typeof StepperCommandDialog>;
 
-class CreateProjectValidator extends CommandValidator {
+class CreateProjectValidator extends CommandValidator<CreateProjectCommand> {
     constructor() {
         super();
         this.ruleFor((c: CreateProjectCommand) => c.name).notEmpty().minLength(2).maxLength(100);

From 7cb65475cc5f5733cb01b180bdd0d030b617f786 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Tue, 25 Aug 2026 11:11:54 +0200
Subject: [PATCH 049/267] Remove provider and toaster module cycle

---
 Source/Common/CratisComponentsContext.ts      | 12 ++++
 Source/Common/CratisComponentsDefaults.ts     | 58 ++++++++++++++++
 Source/Common/CratisComponentsProvider.tsx    | 69 ++-----------------
 Source/Notifications/Toaster.tsx              |  2 +-
 .../verify-public-types.exceptions.json       |  6 --
 5 files changed, 78 insertions(+), 69 deletions(-)
 create mode 100644 Source/Common/CratisComponentsContext.ts
 create mode 100644 Source/Common/CratisComponentsDefaults.ts

diff --git a/Source/Common/CratisComponentsContext.ts b/Source/Common/CratisComponentsContext.ts
new file mode 100644
index 00000000..9a53ae59
--- /dev/null
+++ b/Source/Common/CratisComponentsContext.ts
@@ -0,0 +1,12 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { createContext, useContext } from 'react';
+import type { CratisComponentsConfig } from './CratisComponentsProvider';
+import { cratisDefaults } from './CratisComponentsDefaults';
+
+export const CratisComponentsContext = createContext<CratisComponentsConfig>(cratisDefaults);
+
+/** Returns the resolved renderer-independent Components configuration. */
+export const useCratisComponentsConfig = (): CratisComponentsConfig =>
+    useContext(CratisComponentsContext);
diff --git a/Source/Common/CratisComponentsDefaults.ts b/Source/Common/CratisComponentsDefaults.ts
new file mode 100644
index 00000000..369f5089
--- /dev/null
+++ b/Source/Common/CratisComponentsDefaults.ts
@@ -0,0 +1,58 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { CratisComponentsConfig } from './CratisComponentsProvider';
+
+/** Default locale and English Components messages. */
+export const cratisDefaults: CratisComponentsConfig = {
+    locale: 'en-US',
+    messages: {
+        paginator: {
+            navigation: 'Pagination',
+            first: 'First page',
+            previous: 'Previous page',
+            next: 'Next page',
+            last: 'Last page',
+        },
+        datePicker: {
+            today: 'Today',
+            clear: 'Clear',
+            openCalendar: 'Open calendar',
+            previousMonth: 'Previous month',
+            nextMonth: 'Next month',
+            label: 'Date',
+        },
+        dropdown: {
+            showOptions: 'Show options',
+            clearSelection: 'Clear selection',
+        },
+        dialog: {
+            ok: 'Ok',
+            cancel: 'Cancel',
+            yes: 'Yes',
+            no: 'No',
+            close: 'Close',
+        },
+        stepper: {
+            next: 'Next',
+            previous: 'Previous',
+            submit: 'Submit',
+        },
+        notifications: {
+            dismiss: 'Dismiss',
+            region: 'Notifications',
+        },
+        dataTable: {
+            selectRow: 'Select row',
+            search: 'Search…',
+            searchAriaLabel: 'Search table',
+        },
+        columnFilter: {
+            matchModeAriaLabel: 'Match mode',
+            clear: 'Clear',
+            apply: 'Apply',
+            true: 'True',
+            false: 'False',
+        },
+    },
+};
diff --git a/Source/Common/CratisComponentsProvider.tsx b/Source/Common/CratisComponentsProvider.tsx
index 432a646d..c4568b19 100644
--- a/Source/Common/CratisComponentsProvider.tsx
+++ b/Source/Common/CratisComponentsProvider.tsx
@@ -1,10 +1,15 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { createContext, useContext, useMemo, type ReactNode } from 'react';
+import { useMemo, type ReactNode } from 'react';
 import { I18nProvider } from 'react-aria-components/I18nProvider';
 import { merge } from 'ts-deepmerge';
-import { Toaster, type ToasterProps } from '../Notifications';
+import { Toaster, type ToasterProps } from '../Notifications/Toaster';
+import { CratisComponentsContext } from './CratisComponentsContext';
+import { cratisDefaults } from './CratisComponentsDefaults';
+
+export { cratisDefaults } from './CratisComponentsDefaults';
+export { useCratisComponentsConfig } from './CratisComponentsContext';
 
 /** Localizable labels owned by the Cratis paginator. */
 export interface CratisPaginatorMessages {
@@ -168,71 +173,11 @@ export interface CratisComponentsProviderProps {
     children: ReactNode;
 }
 
-/** Default locale and English Components messages. */
-export const cratisDefaults: CratisComponentsConfig = {
-    locale: 'en-US',
-    messages: {
-        paginator: {
-            navigation: 'Pagination',
-            first: 'First page',
-            previous: 'Previous page',
-            next: 'Next page',
-            last: 'Last page',
-        },
-        datePicker: {
-            today: 'Today',
-            clear: 'Clear',
-            openCalendar: 'Open calendar',
-            previousMonth: 'Previous month',
-            nextMonth: 'Next month',
-            label: 'Date',
-        },
-        dropdown: {
-            showOptions: 'Show options',
-            clearSelection: 'Clear selection',
-        },
-        dialog: {
-            ok: 'Ok',
-            cancel: 'Cancel',
-            yes: 'Yes',
-            no: 'No',
-            close: 'Close',
-        },
-        stepper: {
-            next: 'Next',
-            previous: 'Previous',
-            submit: 'Submit',
-        },
-        notifications: {
-            dismiss: 'Dismiss',
-            region: 'Notifications',
-        },
-        dataTable: {
-            selectRow: 'Select row',
-            search: 'Search…',
-            searchAriaLabel: 'Search table',
-        },
-        columnFilter: {
-            matchModeAriaLabel: 'Match mode',
-            clear: 'Clear',
-            apply: 'Apply',
-            true: 'True',
-            false: 'False',
-        },
-    },
-};
-
 /** Deep-merges consumer configuration over {@link cratisDefaults}. */
 export const mergeCratisComponentsConfig = (
     value: CratisComponentsConfig | undefined,
 ): CratisComponentsConfig => merge(cratisDefaults, value ?? {}) as CratisComponentsConfig;
 
-const CratisComponentsContext = createContext<CratisComponentsConfig>(cratisDefaults);
-
-/** Returns the resolved renderer-independent Components configuration. */
-export const useCratisComponentsConfig = (): CratisComponentsConfig =>
-    useContext(CratisComponentsContext);
-
 const withLegacyLocaleMessages = (
     config: CratisComponentsConfig,
     explicitMessages: CratisComponentsMessages | undefined,
diff --git a/Source/Notifications/Toaster.tsx b/Source/Notifications/Toaster.tsx
index c8da8d11..0b733128 100644
--- a/Source/Notifications/Toaster.tsx
+++ b/Source/Notifications/Toaster.tsx
@@ -9,7 +9,7 @@ import {
     type HTMLAttributes,
 } from 'react';
 import { createPortal } from 'react-dom';
-import { useCratisComponentsConfig } from '../Common/CratisComponentsProvider';
+import { useCratisComponentsConfig } from '../Common/CratisComponentsContext';
 import {
     getToastSnapshot,
     subscribeToToasts,
diff --git a/Source/scripts/verify-public-types.exceptions.json b/Source/scripts/verify-public-types.exceptions.json
index e07ce6b8..bd7d6754 100644
--- a/Source/scripts/verify-public-types.exceptions.json
+++ b/Source/scripts/verify-public-types.exceptions.json
@@ -101,12 +101,6 @@
                 "nodenext": ["arc-family-nodenext-extensionless-specifiers"]
             }
         },
-        {
-            "subpath": "./Common",
-            "resolutionModes": {
-                "nodenext": ["arc-family-nodenext-extensionless-specifiers"]
-            }
-        },
         {
             "subpath": "./DataPage",
             "resolutionModes": {

From b720ae957e234510df83854a253359857b615de4 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Tue, 25 Aug 2026 11:31:18 +0200
Subject: [PATCH 050/267] Honor explicit no-release pull requests

---
 .github/workflows/publish.yml             | 27 ++++++++++++++++++++---
 .github/workflows/verify-semver-label.yml | 20 +++++++----------
 2 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
index c3f12820..b8f10cea 100644
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@@ -39,6 +39,7 @@ on:
 
 permissions:
   contents: write
+  pull-requests: read
 
 jobs:
   release:
@@ -116,7 +117,11 @@ jobs:
       - name: Publish NPM packages
         run: |
           echo "npm $(npm --version) | node $(node --version)"
-          echo "ACTIONS_ID_TOKEN_REQUEST_URL is $([ -n \"$ACTIONS_ID_TOKEN_REQUEST_URL\" ] && echo 'set' || echo 'NOT set')"
+          if [ -n "${ACTIONS_ID_TOKEN_REQUEST_URL:-}" ]; then
+            echo "ACTIONS_ID_TOKEN_REQUEST_URL is set"
+          else
+            echo "ACTIONS_ID_TOKEN_REQUEST_URL is NOT set"
+          fi
           echo "NODE_AUTH_TOKEN is '${NODE_AUTH_TOKEN:-(unset)}'"
           echo "--- .npmrc ---"
           cat "$NPM_CONFIG_USERCONFIG" 2>/dev/null || echo "(no .npmrc)"
@@ -157,7 +162,23 @@ jobs:
     needs: [release]
 
     steps:
-      - name: Report that nothing was published
+      - name: Verify an intentional no-release merge
+        env:
+          GH_TOKEN: ${{ github.token }}
         run: |
-          echo "::error::Nothing was published and no release was cut (reason: ${{ needs.release.outputs.reason }}). For 'no-label', add exactly one of major, minor or patch to the merged pull request and re-run this workflow - see verify-semver-label, which is meant to catch this before the merge."
+          reason='${{ needs.release.outputs.reason }}'
+          if [ "$reason" = "error" ]; then
+            echo "::error::The release action failed; no-release cannot suppress a release error."
+            exit 1
+          fi
+
+          no_release=$(gh api "repos/${GITHUB_REPOSITORY}/commits/${GITHUB_SHA}/pulls" \
+            --jq '[.[].labels[].name] | any(. == "no-release")')
+
+          if [ "$no_release" = "true" ]; then
+            echo "The merged pull request explicitly selected no-release; publishing nothing is the intended result."
+            exit 0
+          fi
+
+          echo "::error::Nothing was published and no release was cut (reason: ${{ needs.release.outputs.reason }}). Add exactly one release-intent label before merge; use no-release when publishing nothing is intentional."
           exit 1
diff --git a/.github/workflows/verify-semver-label.yml b/.github/workflows/verify-semver-label.yml
index cb60751f..c0c52957 100644
--- a/.github/workflows/verify-semver-label.yml
+++ b/.github/workflows/verify-semver-label.yml
@@ -1,12 +1,8 @@
 name: Verify Semver Label
 
-# A merged pull request with no major/minor/patch label produces a Publish run that reports success while
-# skipping every publish step, because the release action resolves should-publish to false. That reads as a
-# release having happened when nothing was published. Requiring the label here turns a silent non-release into
-# a visible failure before the merge, where it costs nothing to fix.
-#
-# It also closes a race the publish workflow cannot: a label added moments after the merge may land too late
-# for the release to pick it up. Demanding the label before the merge means there is nothing to race.
+# Every pull request declares one release intent. major/minor/patch authorizes a package release when the
+# publish workflow's path filters also match; no-release explicitly records that the change should publish
+# nothing. Requiring exactly one intent prevents both accidental releases and ambiguous silent skips.
 #
 # Triggered on labeled/unlabeled as well as the usual events, so adding the label re-runs the check rather than
 # leaving a red cross behind that only a push would clear.
@@ -31,21 +27,21 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - name: Require exactly one semantic version label
+      - name: Require exactly one release-intent label
         env:
           LABELS: ${{ toJSON(github.event.pull_request.labels.*.name) }}
         run: |
-          count=$(printf '%s' "$LABELS" | jq '[.[] | select(. == "major" or . == "minor" or . == "patch")] | length')
+          count=$(printf '%s' "$LABELS" | jq '[.[] | select(. == "major" or . == "minor" or . == "patch" or . == "no-release")] | length')
 
           if [ "$count" -eq 1 ]; then
-            echo "Found one semantic version label."
+            echo "Found one release-intent label."
             exit 0
           fi
 
           if [ "$count" -eq 0 ]; then
-            echo "::error::This pull request has no semantic version label. Add exactly one of major, minor or patch. Without one, merging produces a Publish run that succeeds while skipping every publish step, so no release is cut and nothing is published."
+            echo "::error::This pull request has no release-intent label. Add exactly one of major, minor, patch or no-release."
           else
-            echo "::error::This pull request carries $count semantic version labels. Exactly one of major, minor or patch is required, since the release version cannot be derived from more than one."
+            echo "::error::This pull request carries $count release-intent labels. Add exactly one of major, minor, patch or no-release."
           fi
 
           exit 1

From 9f04d705f6db85de76eebfe817017e8d069d1556 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Tue, 25 Aug 2026 11:31:18 +0200
Subject: [PATCH 051/267] Align Components public entry points

---
 Documentation/index.mdx | 126 ++++++++++++++++++++++------------------
 README.md               | 105 ++++++++++++++++++++++++++++-----
 Source/README.md        |  14 ++++-
 3 files changed, 171 insertions(+), 74 deletions(-)

diff --git a/Documentation/index.mdx b/Documentation/index.mdx
index 98171019..edf8fb00 100644
--- a/Documentation/index.mdx
+++ b/Documentation/index.mdx
@@ -1,62 +1,72 @@
 ---
 title: Components
-description: The React component library for Cratis — command dialogs, forms, and data tables that consume Arc's generated proxies.
+description: React components aligned with Arc application patterns.
 ---
 
-import { CardGrid } from '@astrojs/starlight/components';
-import SimpleCard from '@components/SimpleCard.astro';
-import TopicHero from '@components/TopicHero.astro';
-
-<TopicHero icon="laptop" eyebrow="Components" title="React components wired to your proxies">
-Command dialogs, forms, and data tables that consume [Arc's](/arc/) generated proxies. Built on PrimeReact, fully typed, and styled the way you choose. [Get started →](/components/getting-started/) · [Why Components? →](/components/why-components/)
-</TopicHero>
-
-## Start here
-
-<CardGrid>
-  <SimpleCard title="Getting started" icon="rocket" link="/components/getting-started/">
-    Install the package, mount the provider, and render your first proxy-driven screen.
-  </SimpleCard>
-  <SimpleCard title="Why Components" icon="approve-check" link="/components/why-components/">
-    What the library adds when PrimeReact meets generated Arc proxies.
-  </SimpleCard>
-  <SimpleCard title="Styling" icon="seti:folder" link="/components/styling/">
-    Three paths — a PrimeReact theme, your own palette, or fully unstyled with a `pt` preset.
-  </SimpleCard>
-</CardGrid>
-
-## Recipes
-
-<CardGrid>
-  <SimpleCard title="Build a form" icon="open-book" link="/components/building-a-form/">
-    Collect input and execute a command with `CommandDialog` and the `CommandForm` fields.
-  </SimpleCard>
-  <SimpleCard title="Display data" icon="seti:db" link="/components/displaying-data/">
-    Render a query or observable query with `DataPage` and the data-table wrappers.
-  </SimpleCard>
-  <SimpleCard title="Multi-step form" icon="list-format" link="/components/multi-step-form/">
-    Gather information across named stages with `StepperCommandDialog`.
-  </SimpleCard>
-  <SimpleCard title="A list screen with actions" icon="puzzle" link="/components/list-screen-with-actions/">
-    A full screen: list rows, add and edit through dialogs, and react to selection.
-  </SimpleCard>
-</CardGrid>
-
-## Key components
-
-<CardGrid>
-  <SimpleCard title="CommandDialog" icon="seti:react" link="/components/commanddialog/">
-    Instantiates, validates, and executes a generated command, with the footer handled for you.
-  </SimpleCard>
-  <SimpleCard title="DataPage" icon="laptop" link="/components/datapage/">
-    A resizable page that lists query data with toolbar actions and detail panels.
-  </SimpleCard>
-  <SimpleCard title="CommandForm fields" icon="approve-check" link="/components/commandform/">
-    Typed input fields bound to command properties — text, number, dropdown, date, and more.
-  </SimpleCard>
-  <SimpleCard title="Dialogs" icon="open-book" link="/components/dialogs/">
-    Data-collection dialogs that return values without executing a command.
-  </SimpleCard>
-</CardGrid>
-
-Components renders [Arc's](/arc/) proxies over [Chronicle](/chronicle/) read models — see [Why developers choose Cratis](/why-cratis/) for the full stack.
+Components is a React component library aligned with Arc application patterns.
+
+The `@cratis/components` package provides React compositions for Arc-generated
+commands and queries, together with dialogs, data surfaces, editors,
+notifications, styling tokens, and shared application primitives.
+
+## Relationship to Arc
+
+Arc packages provide the generated command and query contracts and React
+contexts consumed by Components. Applications may use Arc without Components.
+Components is not a general-purpose design-system claim and does not by itself
+establish accessibility conformance or browser coverage for an application.
+
+## Minimal setup
+
+Install Components and its required rendering peers:
+
+```bash
+npm install @cratis/components primereact @primereact/core @primereact/headless @primereact/hooks primeicons
+```
+
+Import the token and component styles, then mount the provider:
+
+```tsx
+import '@cratis/components/tokens';
+import '@cratis/components/styles';
+import { CratisComponentsProvider } from '@cratis/components';
+
+export const App = () => (
+    <CratisComponentsProvider value={{ license: 'YOUR-PRIMEUI-LICENSE-KEY' }}>
+        <YourApp />
+    </CratisComponentsProvider>
+);
+```
+
+Replace the placeholder with a key supplied through the application's approved
+secret/configuration boundary. Do not commit it to source. Current dependency
+and licensing terms are owned by each installed package and must be reviewed for
+the exact version selected.
+
+## Component areas
+
+| Area | Current package role |
+| --- | --- |
+| Command input | Typed fields, embedded forms, dialogs, and multi-step command flows |
+| Data display | Query-backed tables, local-array tables, list pages, filters, and detail surfaces |
+| Application surfaces | Dialogs, notifications, dropdowns, display primitives, page chrome, and toolbars |
+| Structured editors | JSON content, JSON Schema, navigation, canvas, pivot, and time-oriented views |
+| Styling boundary | Cratis tokens, component styles, a baseline theme, and pass-through hooks |
+
+## Current boundaries
+
+- Components aligns with Arc application patterns; it does not imply support for
+  every Arc, React, browser, runtime, or package-version combination.
+- Package existence, examples, and Storybook output do not establish maturity,
+  accessibility conformance, support, security, or production suitability.
+- Verify the exact package manifest, peer dependencies, component profile, and
+  application behavior before adoption.
+
+## Continue
+
+- [Components source and README](https://github.com/Cratis/Components) — package
+  setup, component map, contribution guidance, and current limits.
+- [Components on npm](https://www.npmjs.com/package/@cratis/components) —
+  published package metadata and versions.
+- [Arc](/arc/) — the CQRS framework whose application patterns Components
+  aligns with.
diff --git a/README.md b/README.md
index f85d488a..d224193d 100644
--- a/README.md
+++ b/README.md
@@ -1,24 +1,103 @@
 # Cratis Components
 
-## Packages
+Components is a React component library aligned with Arc application patterns.
+
+This is the owning source repository for `@cratis/components`. The package provides command forms and dialogs, query-backed data tables, page compositions, notifications, editors, and shared application surfaces for frontends built with Cratis Arc.
 
 [![NPM](https://img.shields.io/npm/v/@cratis/components?label=@cratis/components&logo=npm)](https://www.npmjs.com/package/@cratis/components)
+[![Publish](https://github.com/Cratis/Components/actions/workflows/publish.yml/badge.svg)](https://github.com/Cratis/Components/actions/workflows/publish.yml)
+[![Documentation](https://github.com/Cratis/Documentation/actions/workflows/docs-site.yml/badge.svg)](https://github.com/Cratis/Documentation/actions/workflows/docs-site.yml)
 
-## Builds
+## Start here
 
-[![Publish](https://github.com/Cratis/Components/actions/workflows/publish.yml/badge.svg)](https://github.com/Cratis/Components/actions/workflows/publish.yml)
-[![Documentation site](https://github.com/Cratis/Documentation/actions/workflows/pages.yml/badge.svg)](https://github.com/Cratis/Documentation/actions/workflows/pages.yml)
+- [Browse the canonical Components documentation](https://cratis.io/components/)
+- [Install and mount the provider](#minimal-setup)
+- [Choose a component area](#what-components-owns)
+- [Inspect the package source](https://github.com/Cratis/Components/tree/main/Source)
+
+## What Components owns
+
+| Area | Use it for |
+| --- | --- |
+| Command input | Typed command fields, embedded forms, single-step dialogs, and multi-step command flows |
+| Data display | Query-backed tables, local-array tables, list pages, filters, and detail surfaces |
+| Application surfaces | Dialogs, notifications, dropdowns, display primitives, page chrome, and toolbars |
+| Structured editors | JSON content, JSON Schema, navigation, canvas, pivot, and time-oriented views |
+| Styling boundary | Cratis tokens, component styles, a baseline theme, and pass-through hooks for application styling |
+
+The table above maps common screen jobs to the smallest current component area.
+
+## Relationship to Arc
+
+Components is built for Arc application frontends. Its command and query compositions consume Arc's generated TypeScript proxies and React contexts; the package manifest declares Arc packages as peer dependencies.
+
+That boundary is intentional:
+
+- **Arc packages** provide the generated command and query contracts and React contexts consumed here.
+- **Components** owns the React compositions that render and execute those contracts.
+- Applications still choose their own screen composition, styling, accessibility verification, and browser support profile.
+
+Components is not evidence of a complete design system, accessibility conformance, or browser coverage for an application. Verify those properties in the exact application and component profile you ship.
+
+## Minimal setup
+
+Install the package and its required rendering peers:
+
+```bash
+npm install @cratis/components primereact @primereact/core @primereact/headless @primereact/hooks primeicons
+```
+
+Import the token and component styles once, then mount the provider around the application:
+
+```tsx
+import '@cratis/components/tokens';
+import '@cratis/components/styles';
+import { CratisComponentsProvider } from '@cratis/components';
+
+export const App = () => (
+    <CratisComponentsProvider value={{ license: 'YOUR-PRIMEUI-LICENSE-KEY' }}>
+        <YourApp />
+    </CratisComponentsProvider>
+);
+```
+
+The [canonical Components page](https://cratis.io/components/) carries the currently admitted documentation profile. Replace the placeholder with a key supplied through your application's approved secret/configuration boundary; do not commit it to source.
+
+## Documentation map
+
+- [Canonical Components documentation](https://cratis.io/components/)
+- [Product-owned documentation source](https://github.com/Cratis/Components/tree/main/Documentation)
+- [Package-level requirements and licensing notes](./Source/README.md)
+
+The canonical documentation is maintained in this repository under [`Documentation/`](https://github.com/Cratis/Components/tree/main/Documentation) and rendered on cratis.io by the Documentation repository.
+
+## Contributing
+
+This is a framework-library repository. [Component source](https://github.com/Cratis/Components/tree/main/Source) keeps public types, stories, and specifications near each component; export and package verification lives under `Source/scripts/`.
+
+For root and package README changes, verify the exact files explicitly:
+
+```bash
+npx markdownlint-cli2 README.md Source/README.md
+npx linkinator README.md Source/README.md --markdown --recurse
+```
 
-## Description
+For product documentation under `Documentation/`, run its repository verification:
 
-A collection of React components designed to work seamlessly with the constructs found in the Arc universe. These components provide a rich set of UI elements for building modern applications, including command dialogs, data tables, schema editors, and more.
+```bash
+cd Documentation
+./verify-markdown.sh
+```
 
-## Support
+Source changes follow the repository's framework contribution rules and the applicable build, type, specification, export, and Storybook gates.
 
-Cratis is an open community, and we are glad to help users, teams evaluating the stack, and contributors.
+## Community and repository
 
-| Channel | Details |
-|---|---|
-| Discord | Join the community on [Discord](https://discord.gg/kt4AMpV8WV) for questions and discussions |
-| GitHub Issues | [Report bugs or request features](https://github.com/Cratis/Components/issues) |
-| Documentation | Read the docs at [cratis.io](https://cratis.io) |
+| Path | Destination |
+| --- | --- |
+| Questions and discussion | [Cratis Discord](https://discord.gg/kt4AMpV8WV) |
+| Bugs and feature requests | [GitHub Issues](https://github.com/Cratis/Components/issues) |
+| Releases | [GitHub Releases](https://github.com/Cratis/Components/releases) |
+| Contributing | [Cratis contribution guide](https://github.com/Cratis/.github/blob/main/contributing.md) |
+| Security reports | [Private security reporting](mailto:oss@cratis.io?subject=Security%3A) |
+| Source license | [`LICENSE`](./LICENSE) |
diff --git a/Source/README.md b/Source/README.md
index 323fd6f9..227e758f 100644
--- a/Source/README.md
+++ b/Source/README.md
@@ -1,6 +1,14 @@
 # Cratis Components
 
-A collection of React components for building modern applications with Cratis.
+Components is a React component library aligned with Arc application patterns.
+
+The `@cratis/components` package provides React compositions for Arc-generated commands and queries, together with dialogs, data surfaces, editors, notifications, styling tokens, and shared application primitives.
+
+- [Read the canonical Components documentation](https://cratis.io/components/)
+- [Review this package's dependency and licensing boundary](#licensing)
+- [Report security concerns privately](mailto:oss@cratis.io?subject=Security%3A)
+
+The package targets Arc application frontends rather than acting as a general-purpose design system. Its presence does not establish accessibility conformance or browser coverage for an application; verify those properties for the exact components and application profile you ship.
 
 ## Requirements
 
@@ -583,7 +591,7 @@ export const App = () => (
 
 Components 3 publishes its PrimeReact 11 slot and rendered-marker contract from `@cratis/components/compatibility`. In a DOM test, apply `primeReact11PassThroughSentinelPreset`, render the surfaces your application uses, and call `assertPrimeReact11PassThroughCompatibility(root, components)`. Additions pass; a missing or renamed contracted slot or marker produces an actionable error. The contract is major-version scoped and does not preserve PrimeReact 10 names.
 
-The machine-readable `components3PrimeReact11PassThroughContract` is the source of truth. Contract revision 1 covers the parts rendered by Components 3's supported compositions on PrimeReact 11, rather than every optional part an application could compose directly. See the [pass-through contract documentation](https://cratis.io/Components/styling/pass-through.html) for the supported component and slot list.
+The machine-readable `components3PrimeReact11PassThroughContract` is the source of truth. Contract revision 1 covers the parts rendered by the documented Components 3 compositions on PrimeReact 11, rather than every optional part an application could compose directly. See the [canonical Components documentation](https://cratis.io/components/) for the currently admitted component and slot guidance.
 
 #### A `pt` preset in plain CSS
 
@@ -789,7 +797,7 @@ request type is owned by `@cratis/arc.react`.
 
 If you encounter errors like:
 
-```
+```text
 Cannot find module '@cratis/components/TimeMachine' or its corresponding type declarations.
 ```
 

From 74e76026b23da70a90c364891406bc3ee5d1af71 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Tue, 25 Aug 2026 12:18:02 +0200
Subject: [PATCH 052/267] Use type-only Storybook metadata import

---
 Source/CommandDialog/StepperCommandDialog.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Source/CommandDialog/StepperCommandDialog.stories.tsx b/Source/CommandDialog/StepperCommandDialog.stories.tsx
index 5e741803..d46c0634 100644
--- a/Source/CommandDialog/StepperCommandDialog.stories.tsx
+++ b/Source/CommandDialog/StepperCommandDialog.stories.tsx
@@ -2,7 +2,7 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import { useState } from 'react';
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { StepperCommandDialog } from './StepperCommandDialog';
 import { Command, CommandResult, CommandValidator } from '@cratis/arc/commands';
 import { PropertyDescriptor } from '@cratis/arc/reflection';

From d37721859c8a259161eed361f925649d4a77b4da Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Tue, 25 Aug 2026 12:28:39 +0200
Subject: [PATCH 053/267] Bind no-release to the exact merged pull request

---
 .github/workflows/publish.yml             | 10 ++++++++--
 .github/workflows/verify-semver-label.yml |  2 +-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
index b8f10cea..f0e9baac 100644
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@@ -172,8 +172,14 @@ jobs:
             exit 1
           fi
 
-          no_release=$(gh api "repos/${GITHUB_REPOSITORY}/commits/${GITHUB_SHA}/pulls" \
-            --jq '[.[].labels[].name] | any(. == "no-release")')
+          pulls=$(gh api "repos/${GITHUB_REPOSITORY}/commits/${GITHUB_SHA}/pulls")
+          merged_count=$(printf '%s' "$pulls" | jq --arg sha "$GITHUB_SHA" '[.[] | select(.merge_commit_sha == $sha)] | length')
+          if [ "$merged_count" -ne 1 ]; then
+            echo "::error::Expected exactly one pull request whose merge commit is $GITHUB_SHA; found $merged_count."
+            exit 1
+          fi
+          no_release=$(printf '%s' "$pulls" | jq -r --arg sha "$GITHUB_SHA" \
+            '[.[] | select(.merge_commit_sha == $sha) | .labels[].name] | any(. == "no-release")')
 
           if [ "$no_release" = "true" ]; then
             echo "The merged pull request explicitly selected no-release; publishing nothing is the intended result."
diff --git a/.github/workflows/verify-semver-label.yml b/.github/workflows/verify-semver-label.yml
index c0c52957..c0ec3280 100644
--- a/.github/workflows/verify-semver-label.yml
+++ b/.github/workflows/verify-semver-label.yml
@@ -12,7 +12,7 @@ concurrency:
 
 on:
   pull_request:
-    types: [opened, reopened, synchronize, labeled, unlabeled]
+    types: [opened, reopened, synchronize, labeled, unlabeled, edited]
     # Scoped to the same branch Publish releases from. A pull request stacked onto another one's branch cannot
     # cut a release, so demanding a version label of it would be asking which version a merge that publishes
     # nothing should carry.

From 2f7dd5046b7c5f2addb98ad4204d609a0f11d8fe Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Tue, 25 Aug 2026 12:28:40 +0200
Subject: [PATCH 054/267] Align the Components 4 package README

---
 Source/README.md | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/Source/README.md b/Source/README.md
index bb3e103b..4154471a 100644
--- a/Source/README.md
+++ b/Source/README.md
@@ -17,15 +17,16 @@ interaction primitives internally; consumers do not import or style React Aria.
 npm install @cratis/components
 ```
 
-Supported peers:
+The current package manifest declares these peer dependencies:
 
-- React and React DOM 19
 - `@cratis/arc` and `@cratis/arc.react` `>=20.3.1 <23`
-- `@cratis/fundamentals`
-- `reflect-metadata`
-- `tsyringe`
+- `@cratis/fundamentals` `^7.10.3`
+- optional `pixi.js` `^8.20.0`
+- `react` and `react-dom` `^19.0.0`
+- `reflect-metadata` `0.2.2`
+- `tsyringe` `4.10.0`
 
-PrimeReact, PrimeIcons, PrimeUI themes, and a PrimeUI license are not required.
+The current manifest does not declare PrimeReact, PrimeIcons, or PrimeUI packages as dependencies or peers. Applications retaining direct dependencies keep their own package, provider, styling, and license boundaries.
 
 ## Styles
 

From 8fd5fe7a7342700f74604f749294e0f18a43c9b9 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Tue, 25 Aug 2026 12:29:00 +0200
Subject: [PATCH 055/267] Make provider message spec self-contained

---
 .../when_using_provider_messages.tsx          | 29 ++++++++++---------
 1 file changed, 15 insertions(+), 14 deletions(-)

diff --git a/Source/CommandDialog/for_StepperCommandDialog/when_using_provider_messages.tsx b/Source/CommandDialog/for_StepperCommandDialog/when_using_provider_messages.tsx
index 13765716..33a5dfe2 100644
--- a/Source/CommandDialog/for_StepperCommandDialog/when_using_provider_messages.tsx
+++ b/Source/CommandDialog/for_StepperCommandDialog/when_using_provider_messages.tsx
@@ -4,7 +4,8 @@
 // @vitest-environment jsdom
 
 import React from 'react';
-import { vi } from 'vitest';
+import { expect } from 'chai';
+import { afterEach, describe, it, vi } from 'vitest';
 import { CratisComponentsProvider } from '../../Common/CratisComponentsProvider';
 import { StepperPanel } from '../StepperPanel';
 import { StepperCommandDialog } from '../StepperCommandDialog';
@@ -69,7 +70,7 @@ describe('when StepperCommandDialog uses provider messages', () => {
         dialog = await render(
             <CratisComponentsProvider>
                 <StepperCommandDialog<TestCommand>
-                    command={TestCommand as unknown as new () => object}
+                    command={TestCommand}
                     visible
                     title='Wizard'
                     showCancel
@@ -80,8 +81,8 @@ describe('when StepperCommandDialog uses provider messages', () => {
             </CratisComponentsProvider>,
         );
 
-        buttonLabels(dialog).should.contain('Next');
-        buttonLabels(dialog).should.contain('Cancel');
+        expect(buttonLabels(dialog)).to.include('Next');
+        expect(buttonLabels(dialog)).to.include('Cancel');
     });
 
     it('should use the provider messages for Next and the footer Cancel when no prop override is given', async () => {
@@ -95,7 +96,7 @@ describe('when StepperCommandDialog uses provider messages', () => {
                 }}
             >
                 <StepperCommandDialog<TestCommand>
-                    command={TestCommand as unknown as new () => object}
+                    command={TestCommand}
                     visible
                     title='Wizard'
                     showCancel
@@ -106,10 +107,10 @@ describe('when StepperCommandDialog uses provider messages', () => {
             </CratisComponentsProvider>,
         );
 
-        buttonLabels(dialog).should.contain('Provider Next');
-        buttonLabels(dialog).should.contain('Provider Cancel');
-        buttonLabels(dialog).should.not.contain('Next');
-        buttonLabels(dialog).should.not.contain('Cancel');
+        expect(buttonLabels(dialog)).to.include('Provider Next');
+        expect(buttonLabels(dialog)).to.include('Provider Cancel');
+        expect(buttonLabels(dialog)).not.to.include('Next');
+        expect(buttonLabels(dialog)).not.to.include('Cancel');
     });
 
     it('should prefer named prop overrides over the provider messages', async () => {
@@ -123,7 +124,7 @@ describe('when StepperCommandDialog uses provider messages', () => {
                 }}
             >
                 <StepperCommandDialog<TestCommand>
-                    command={TestCommand as unknown as new () => object}
+                    command={TestCommand}
                     visible
                     title='Wizard'
                     showCancel
@@ -136,9 +137,9 @@ describe('when StepperCommandDialog uses provider messages', () => {
             </CratisComponentsProvider>,
         );
 
-        buttonLabels(dialog).should.contain('Explicit Next');
-        buttonLabels(dialog).should.contain('Explicit Cancel');
-        buttonLabels(dialog).should.not.contain('Provider Next');
-        buttonLabels(dialog).should.not.contain('Provider Cancel');
+        expect(buttonLabels(dialog)).to.include('Explicit Next');
+        expect(buttonLabels(dialog)).to.include('Explicit Cancel');
+        expect(buttonLabels(dialog)).not.to.include('Provider Next');
+        expect(buttonLabels(dialog)).not.to.include('Provider Cancel');
     });
 });

From 5d8a488ced3c20714690e99d11ecdcca298834da Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Tue, 25 Aug 2026 12:37:11 +0200
Subject: [PATCH 056/267] docs: document setup-only root and equal-support
 capability profiles

- Add a canonical import rule (root is setup-only; components ship
  from explicit subpaths) with a complete root-namespace-to-subpath
  migration mapping, both namespace-preserving and named forms, and
  a placeholder codemod invocation that is explicitly flagged as not
  yet shipped. No behavior changes: the root namespace re-exports
  remain exactly as they are today.
- Define three equal-support capability profiles (Foundation,
  Advanced React, Spatial) and state explicitly that grouping is a
  documentation/adoption aid, not a weaker semver or stability tier.
- Add a capability matrix covering state ownership, data/persistence,
  Arc/Chronicle relationship, SSR characteristics, extra peers, and
  performance shape per profile, grounded in the current source
  (SSR guards, effect-scoped Pixi/worker setup, transport-neutral
  props).
- Formalize the optional Pixi peer and single-peer-resolution rule,
  and document Canvas's DOM+Pixi dual-layer architecture.
- Document the aggregate CSS manifest as the current styling source
  of truth, plus objective criteria for a future stylesheet or
  package split.
- Add PivotViewer's worker/fallback architecture and searchFields
  contract, TimeMachine's transport-neutral data contract, and a
  grounded JSON Schema supported-subset statement shared by
  SchemaEditor and ObjectContentEditor.
- Clarify that Toolbar is not a default page action row.
- Markdown lint and local link checks pass.
---
 Documentation/Canvas/index.md                | 17 ++++-
 Documentation/ObjectContentEditor/index.md   |  8 ++
 Documentation/ObjectNavigationalBar/index.md |  2 +
 Documentation/PivotViewer/index.md           | 20 +++++
 Documentation/SchemaEditor/index.md          | 15 ++++
 Documentation/TimeMachine/index.md           |  8 ++
 Documentation/Toolbar/index.md               |  4 +
 Documentation/choosing-a-component.md        |  6 +-
 Documentation/getting-started.mdx            |  4 +-
 Documentation/migration.md                   | 63 +++++++++++++++
 Documentation/ui-foundation.md               | 80 ++++++++++++++++++++
 Source/MIGRATION.md                          | 61 +++++++++++++++
 Source/README.md                             | 63 +++++++++------
 13 files changed, 322 insertions(+), 29 deletions(-)

diff --git a/Documentation/Canvas/index.md b/Documentation/Canvas/index.md
index 6168bdfc..8b342f34 100644
--- a/Documentation/Canvas/index.md
+++ b/Documentation/Canvas/index.md
@@ -5,6 +5,8 @@ description: Reference for the pan, zoom, minimap, overlay, and collaborative ca
 
 `@cratis/components/Canvas` provides a renderer-independent React surface for large spatial workspaces. It owns gesture coordination, transforms, controls, item measurement, minimap state, and optional Note, Region, and Chat shapes. Product appearance comes from `--cratis-*` tokens and Canvas classes; PrimeIcons and a renderer provider are not required.
 
+Canvas belongs to the [Spatial capability profile](../ui-foundation.md#capability-profiles) alongside `PivotViewer` — the only two subpaths that install the optional `pixi.js` peer. Spatial is not a lesser-supported tier: it ships at the same version, behind the same release gates, as every Foundation and Advanced React subpath.
+
 The engine renders and positions arbitrary content independently of the optional presentational shapes. Start with [Basic usage](basic-usage.md), then use the focused guides for [pan and zoom](pan-and-zoom.md), [controls chrome](controls-chrome.md), [notes](notes.md), [regions](regions.md), and the [chat bubble](chat-bubble.md). This page is the complete API reference.
 
 ## Import
@@ -29,6 +31,10 @@ npm install pixi.js@^8.20.0
 
 Keep one compatible Pixi resolution across the application and Components. Two installed copies produce nominal TypeScript incompatibilities for containers and pointer events even when their APIs look structurally similar.
 
+### Single Pixi peer
+
+This single-resolution rule is not advisory-only: `pixi.js` is declared `peerDependenciesMeta: { "pixi.js": { "optional": true } }` in Components' own `package.json`, so npm/Yarn/pnpm resolve it to whatever compatible version the application installs rather than nesting a private copy. A second, independently resolved `pixi.js` instance produces nominally distinct `PIXI.Container` and pointer-event types even though both satisfy `^8.20.0` — TypeScript treats classes from two different module instances as unrelated types regardless of their shape. Install `pixi.js` once, at the application level, and let both the application and Components resolve it there. See [Optional Pixi, clean no-Pixi core](../ui-foundation.md#optional-pixi-clean-no-pixi-core) for why the public Pixi types stay real rather than becoming a reduced Cratis facade.
+
 ## Canvas
 
 ```tsx
@@ -90,6 +96,15 @@ const handleReady = (handle: CanvasHandle) => {
 | `getContainerRect()`                             | Returns the current viewport rectangle or `null`.           |
 | `getItemBounds()`                                | Returns measured world-space rectangles as `MinimapItem[]`. |
 
+## DOM and Pixi layers
+
+`Canvas` composes two independent rendering layers rather than choosing one, and an application can use either alone or mix both in the same instance:
+
+- **DOM layer** — `children` and `CanvasItem` position arbitrary React/DOM content with ordinary CSS transforms. No Pixi content ever mounts if an application only uses this layer.
+- **Pixi layer** — the optional `items`/`renderItem` props hand `Canvas` an array of data and a function that builds one `PIXI.Container` per item, rendered on a single shared Pixi `Application`/`world` container exposed through `onReady`'s `CanvasContext`. This exists for item counts where per-item DOM nodes (and DOM-level pan/zoom repaint cost) become the bottleneck; the Pixi layer amortizes many items on the GPU instead.
+
+Both layers share the same camera: panning and zooming transform the DOM layer's CSS and the Pixi `world` container together, so DOM and Pixi content stay registered to the same world coordinates.
+
 ## CanvasItem
 
 `CanvasItem` positions and measures DOM content inside a `Canvas`.
@@ -133,7 +148,7 @@ const captureAttributes: CanvasCaptureAttributes = {
 
 ## Overlays and SSR
 
-`CanvasOverlay` portals children to `document.body` in the browser. It renders an empty server/hydration placeholder, so importing or server-rendering a Canvas tree does not access `document` before hydration.
+`CanvasOverlay` portals children to `document.body` in the browser. It renders an empty server/hydration placeholder, so importing or server-rendering a Canvas tree does not access `document` before hydration. It uses the same `useSyncExternalStore` browser-detection pattern as `Dialog`, `FilterPanel`, `Toaster`, and `ToolbarSlot` elsewhere in Components. `Canvas`'s own `PIXI.Application` creation likewise runs inside a `useEffect`, so it never executes during server rendering — see the [capability matrix](../ui-foundation.md#capability-matrix) for the equivalent PivotViewer guarantee.
 
 Use it for floating controls that must escape canvas clipping:
 
diff --git a/Documentation/ObjectContentEditor/index.md b/Documentation/ObjectContentEditor/index.md
index dff0988f..61ed20c7 100644
--- a/Documentation/ObjectContentEditor/index.md
+++ b/Documentation/ObjectContentEditor/index.md
@@ -2,10 +2,16 @@
 
 The `ObjectContentEditor` component displays and allows exploration of complex JSON objects with schema-aware rendering and navigation.
 
+ObjectContentEditor belongs to the [Advanced React capability profile](../ui-foundation.md#capability-profiles) — a specialized, React-only surface with no Pixi dependency and no separate peer to install.
+
 ## Purpose
 
 ObjectContentEditor provides a structured view of JSON objects with breadcrumb navigation for exploring nested objects and arrays, rendering properties according to a JSON schema.
 
+## JSON Schema support
+
+ObjectContentEditor renders against the same `JsonSchema`/`JsonSchemaProperty` contract as [`SchemaEditor`](../SchemaEditor/index.md) — see [SchemaEditor: JSON Schema support](../SchemaEditor/index.md#json-schema-support) for the exact supported subset (type/format/description/properties/items/required/definitions/$ref) and what is intentionally not supported (composition keywords, `enum`/`const`, numeric/string constraints, `additionalProperties`, boolean schemas). A property whose schema uses an unsupported keyword still renders by its `type`/`format`; the unsupported keyword itself has no effect on rendering or validation here.
+
 ## Key Features
 
 - Schema-aware property display
@@ -285,6 +291,8 @@ The schema should be a valid JSON Schema with:
 - Optional `required` array for required properties
 - Nested schemas for object and array types
 
+This requirement list describes structure, not the full supported keyword set — see [JSON Schema support](#json-schema-support) above for exactly which JSON Schema keywords `ObjectContentEditor` reads.
+
 ## Performance Considerations
 
 - Large objects (1000+ properties) may render slowly
diff --git a/Documentation/ObjectNavigationalBar/index.md b/Documentation/ObjectNavigationalBar/index.md
index bbfc830e..f0a30097 100644
--- a/Documentation/ObjectNavigationalBar/index.md
+++ b/Documentation/ObjectNavigationalBar/index.md
@@ -2,6 +2,8 @@
 
 The `ObjectNavigationalBar` component provides breadcrumb navigation for hierarchical data structures.
 
+ObjectNavigationalBar belongs to the [Advanced React capability profile](../ui-foundation.md#capability-profiles) — a specialized, React-only surface with no Pixi dependency and no separate peer to install. It is a fully controlled component: `navigationPath` and `onNavigate` are its entire state contract, so the host application owns navigation state, persistence, and the data at each path segment.
+
 ## Purpose
 
 ObjectNavigationalBar displays the current navigation path and allows users to jump to any level in the hierarchy with clickable breadcrumbs.
diff --git a/Documentation/PivotViewer/index.md b/Documentation/PivotViewer/index.md
index ffabb21d..0042ace1 100644
--- a/Documentation/PivotViewer/index.md
+++ b/Documentation/PivotViewer/index.md
@@ -2,10 +2,22 @@
 
 The `PivotViewer` component provides an interactive, high-performance visualization for exploring large datasets with dynamic grouping, filtering, and zooming capabilities.
 
+PivotViewer belongs to the [Spatial capability profile](../ui-foundation.md#capability-profiles) alongside [`Canvas`](../Canvas/index.md) — the only two subpaths that install the optional `pixi.js` peer. Spatial is not a lesser-supported tier: it ships at the same version, behind the same release gates, as every Foundation and Advanced React subpath.
+
 ## Purpose
 
 PivotViewer enables users to explore and analyze collections of data items through an intuitive, visual interface with pivot-style grouping and filtering.
 
+## Install the optional Pixi peer
+
+PivotViewer renders cards with `pixi.js`, an optional peer rather than a nested Components dependency:
+
+```bash
+npm install pixi.js@^8.20.0
+```
+
+Keep exactly one compatible Pixi resolution across the application and Components — see [Canvas: Single Pixi peer](../Canvas/index.md#single-pixi-peer) for why. Unlike `Canvas`, PivotViewer does not expose Pixi types on its own public props, so consuming it does not require writing against `PIXI.*` types directly; the peer is still required at install time because PivotViewer's own rendering depends on it.
+
 ## Key Features
 
 - High-performance rendering using Web Workers
@@ -60,6 +72,14 @@ function ProductViewer() {
 - **Cards**: Visual representation of items in collection view
 - **Details**: Full information shown when item is selected
 
+## Worker and search architecture
+
+PivotViewer computes indexing, filtering, and grouping off the main thread. A dedicated Web Worker (`pivot.worker.ts`) owns columnar storage and the filter/group/sort computation; the `usePivotEngine` hook posts work to it and resolves promises as results come back, so large datasets do not block interaction while a filter or grouping recomputes.
+
+The worker is optional infrastructure, not a hard requirement: `usePivotEngine` checks `typeof window === 'undefined' || typeof Worker === 'undefined'` before creating it, and separately probes that the worker script actually serves as JavaScript before instantiating it. Either check failing — including during server rendering, where `window` and `Worker` do not exist — falls back to the equivalent synchronous, in-thread computation instead of failing. PivotViewer therefore degrades gracefully rather than crashing in SSR or restrictive environments; it simply loses the off-main-thread benefit there.
+
+`searchFields` drives PivotViewer's free-text search: an array of property-accessor functions (`PropertyAccessor<TItem>[]`, i.e. `(item: TItem) => value`), one per field the search box should match against. A search term matches an item when it matches the value returned by any accessor in the array — there is no default set of searched fields, so search is a no-op until `searchFields` is supplied.
+
 ## See Also
 
 - [Configuration](configuration.md) - Props and options
diff --git a/Documentation/SchemaEditor/index.md b/Documentation/SchemaEditor/index.md
index 8e1e1d8a..4b6efeb8 100644
--- a/Documentation/SchemaEditor/index.md
+++ b/Documentation/SchemaEditor/index.md
@@ -2,6 +2,8 @@
 
 The `SchemaEditor` component provides an interactive table-based interface for creating and editing JSON schemas.
 
+SchemaEditor belongs to the [Advanced React capability profile](../ui-foundation.md#capability-profiles) — a specialized, React-only surface with no Pixi dependency and no separate peer to install.
+
 ## Purpose
 
 SchemaEditor allows users to define data structures by adding properties, specifying types, and configuring validation rules in a user-friendly table format.
@@ -60,6 +62,19 @@ The component works with JSON schemas following the JSON Schema specification:
 }
 ```
 
+## JSON Schema support
+
+SchemaEditor and [`ObjectContentEditor`](../ObjectContentEditor/index.md) share one `JsonSchema`/`JsonSchemaProperty` contract (`@cratis/components/types`), and it is a **pragmatic authoring subset of JSON Schema, not a general-purpose validator**. The supported shape is exactly what the types declare:
+
+- `title`, `name`, `$id`, `$ref`, `type`, `format`, `description`
+- `properties` and `items` (recursively, for `object` and `array`)
+- `required` (a string array on `JsonSchema`; a `boolean` flag per property on `JsonSchemaProperty`)
+- `definitions`, for schemas reused via `$ref`
+
+The type editor offers `string`, `integer`, `number`, and `boolean` as leaf types, plus `array` and `object` as container types, with the built-in format catalog (`DEFAULT_TYPE_FORMATS`, also exported from `types`): `guid`, `date-time`, `date`, and `time` for `string`; `int16`, `int32`, and `int64` for `integer`; `float` and `double` for `number`.
+
+What is deliberately **not** supported: JSON Schema composition keywords (`oneOf`, `anyOf`, `allOf`, `not`), `enum`/`const`, numeric or string constraints (`minimum`, `maximum`, `minLength`, `maxLength`, `pattern`), `additionalProperties`/`patternProperties`, and boolean schemas (`true`/`false` in place of a schema object). A schema authored elsewhere that uses those keywords will round-trip through SchemaEditor with those keywords dropped, not preserved-but-ignored — treat SchemaEditor as an editor for the subset above, and keep any richer validation schema as a separate, hand-maintained artifact if your application needs one.
+
 ## Table Interface
 
 Properties are displayed in a table:
diff --git a/Documentation/TimeMachine/index.md b/Documentation/TimeMachine/index.md
index a28864c5..5f73d648 100644
--- a/Documentation/TimeMachine/index.md
+++ b/Documentation/TimeMachine/index.md
@@ -2,10 +2,18 @@
 
 The `TimeMachine` component provides an interactive timeline visualization for exploring the evolution of data over time through events and state changes.
 
+TimeMachine belongs to the [Advanced React capability profile](../ui-foundation.md#capability-profiles) — a specialized, React-only surface with no Pixi dependency and no separate peer to install.
+
 ## Purpose
 
 TimeMachine allows users to navigate through different versions of data, viewing the read model state and associated events at each point in time.
 
+## Transport neutrality
+
+TimeMachine has no built-in fetch, HTTP client, or WebSocket — its entire data contract is the `versions: Version[]` prop and the optional `onVersionChange` callback. The component owns scrubbing, gesture, and selection UI state only; it never requests data on its own.
+
+This means TimeMachine is transport-neutral by construction: a host application can populate `versions` from an Arc query, from a Chronicle-backed read model plus its event history (a natural fit, since `Version.events` already models a per-version event list), from a plain REST endpoint, or from static/local state. TimeMachine has no Chronicle awareness or coupling — an event-sourced application maps its own event/read-model history into the `Version` shape before rendering; TimeMachine does not know, or need to know, where that data came from.
+
 ## Key Features
 
 - Timeline-based navigation
diff --git a/Documentation/Toolbar/index.md b/Documentation/Toolbar/index.md
index 52b2e9f1..d8e23ee6 100644
--- a/Documentation/Toolbar/index.md
+++ b/Documentation/Toolbar/index.md
@@ -2,6 +2,10 @@
 
 The `Toolbar` component provides a canvas-style icon toolbar with support for orientations, active states, animated context switching, separators, fan-out sub-panels, and drag & drop onto surfaces.
 
+Toolbar belongs to the [Advanced React capability profile](../ui-foundation.md#capability-profiles) — a specialized, React-only surface with no Pixi dependency, despite its canvas-adjacent purpose.
+
+**`Toolbar` is not a default page action row.** It is built for a canvas/tool-palette interaction — active tools, groups, slots, folders, and fan-out panels — not for an ordinary page's list of commands. `DataPage`'s built-in action row renders `ActionMenubar` (from `@cratis/components/Common`), not `Toolbar`. Reach for `ActionMenubar`, or a product-owned action row, for flat page-level actions; reach for `Toolbar` only when the surface is genuinely a spatial tool palette. See [Choosing a component: Actions and tool palettes](../choosing-a-component.md#actions-and-tool-palettes).
+
 Pass React icon nodes or product-owned SVGs for a dependency-free toolbar. Consumer-owned icon-font class strings remain accepted, but Components does not install an icon font or infer provider base classes; the product must load the matching stylesheet and pass the complete class string.
 
 The root renders `role='toolbar'`, orientation semantics, and an accessible name. `aria-label` defaults to `Tools`; localize it or use `aria-labelledby`. Folder and fan-out panels close on Escape, return focus to their trigger, become inert while collapsed, and suppress transitions under reduced motion.
diff --git a/Documentation/choosing-a-component.md b/Documentation/choosing-a-component.md
index d4bac43f..78b0f1d9 100644
--- a/Documentation/choosing-a-component.md
+++ b/Documentation/choosing-a-component.md
@@ -42,11 +42,13 @@ actions.
 
 ## Actions and tool palettes
 
-Use `ActionMenubar` or an ordinary product action row for flat page commands. Use [`Toolbar`](./Toolbar/index.md) for a canvas/tool-palette interaction with active tools, groups, slots, folders, and fan-out panels. It is not a one-for-one replacement for a generic Prime Toolbar.
+Use `ActionMenubar` or an ordinary product action row for flat page commands. `DataPage`'s built-in toolbar already renders `ActionMenubar`, not `Toolbar` — that is the default action row for a page, not a canvas tool palette. Use [`Toolbar`](./Toolbar/index.md) only for a genuine canvas/tool-palette interaction with active tools, groups, slots, folders, and fan-out panels. It is not a one-for-one replacement for a generic Prime Toolbar, and it is not a page-level action row wearing a different name.
 
 ## Spatial workspaces
 
-Use [`Canvas`](./Canvas/index.md) for a pan/zoom workspace containing positioned DOM or Pixi items, optional minimap/controls, notes, regions, or collaborative chat shapes. Canvas owns interaction and rendering primitives; the application owns persistence and behavior. Arc can provide commands, queries, validation, authorization, and generated bindings on its own. Applications using Arc plus Chronicle can additionally project event streams into read models.
+Use [`Canvas`](./Canvas/index.md) for a pan/zoom workspace containing positioned DOM or Pixi items, optional minimap/controls, notes, regions, or collaborative chat shapes, or [`PivotViewer`](./PivotViewer/index.md) for a faceted, zoomable card grid over a large dataset. Both belong to the [Spatial capability profile](./ui-foundation.md#capability-profiles) and install the optional `pixi.js` peer — see [UI foundation: Optional Pixi, clean no-Pixi core](./ui-foundation.md#optional-pixi-clean-no-pixi-core). Spatial ships at the same version and quality bar as every other component; the profile label describes what it is for and what it costs to adopt, not a lower support tier.
+
+Canvas and PivotViewer own interaction and rendering primitives; the application owns persistence and behavior. Arc can provide commands, queries, validation, authorization, and generated bindings on its own. Applications using Arc plus Chronicle can additionally project event streams into read models — neither component has a direct Chronicle dependency; see the [UI foundation capability matrix](./ui-foundation.md#capability-matrix).
 
 ## Putting it together
 
diff --git a/Documentation/getting-started.mdx b/Documentation/getting-started.mdx
index b3897e89..33a5d8cb 100644
--- a/Documentation/getting-started.mdx
+++ b/Documentation/getting-started.mdx
@@ -28,6 +28,8 @@ You've built an Arc backend—a `RegisterAuthor` command and an `AllAuthors` que
 
     The remaining peers—React, Arc, Fundamentals, `reflect-metadata`, and `tsyringe`—already come with an Arc frontend. Arc 20, 21, and 22 are supported.
 
+    `pixi.js@^8.20.0` is an additional **optional** peer, needed only if you use `Canvas` or `PivotViewer`. Every other component needs nothing beyond the peers above; install Pixi later, when you reach a spatial workspace or card-grid screen. See [Choosing a component](/components/choosing-a-component/#spatial-workspaces).
+
 2. **Import the Cratis-owned stylesheets once**, at your application entry point:
 
     ```typescript title="main.tsx"
@@ -146,4 +148,4 @@ You installed one UI package, imported Cratis-owned styles, and mounted a locale
 - [Displaying data](/components/displaying-data/)
 - [Choosing a component](/components/choosing-a-component/)
 - [Migrate from Components 3](/components/migration/)
-- [Understand the UI foundation](/components/ui-foundation/)
+- [Understand the UI foundation](/components/ui-foundation/) — including the capability profiles and capability matrix behind Foundation, Advanced React, and Spatial components
diff --git a/Documentation/migration.md b/Documentation/migration.md
index 8169d021..eb49e6c2 100644
--- a/Documentation/migration.md
+++ b/Documentation/migration.md
@@ -34,6 +34,68 @@ Applications using Canvas or PivotViewer must install `pixi.js@^8.20.0`, now an
 
 The supported Arc peer range remains `>=20.3.1 <23`.
 
+## Import from explicit subpaths
+
+The canonical rule going forward: **the package root is setup-only; every component ships from its own subpath.**
+
+```tsx
+// Before — root namespace (still works, not canonical)
+import { Canvas } from '@cratis/components';
+
+<Canvas.Canvas showControls>
+    <Canvas.CanvasItem x={0} y={0}>Content</Canvas.CanvasItem>
+</Canvas.Canvas>;
+```
+
+```tsx
+// After — canonical subpath, named imports
+import { Canvas, CanvasItem } from '@cratis/components/Canvas';
+
+<Canvas showControls>
+    <CanvasItem x={0} y={0}>Content</CanvasItem>
+</Canvas>;
+```
+
+This is **not a breaking change in this release.** The root still re-exports every subpath as a namespace (`import { Canvas } from '@cratis/components'`) for source compatibility, exactly as it does today; nothing in this section removes that bridge. It documents the rule new code should already follow and gives existing code a mechanical path onto it, ahead of any future removal — which, if it ever happens, is its own tracked, versioned change with its own migration guide.
+
+Every namespace maps the same way: replace `import { X } from '@cratis/components'` with either an equivalent namespace import from `@cratis/components/X`, or named imports from the same subpath.
+
+| Namespace (root, source-compatible) | Canonical subpath | Namespace-preserving migration | Named migration |
+| --- | --- | --- | --- |
+| `Canvas` | `@cratis/components/Canvas` | `import * as Canvas from '@cratis/components/Canvas'` | `import { Canvas, CanvasItem } from '@cratis/components/Canvas'` |
+| `CommandDialog` | `@cratis/components/CommandDialog` | `import * as CommandDialog from '@cratis/components/CommandDialog'` | `import { CommandDialog } from '@cratis/components/CommandDialog'` |
+| `CommandStepper` † | `@cratis/components/CommandStepper` | `import * as CommandStepper from '@cratis/components/CommandStepper'` | `import { CommandStepper } from '@cratis/components/CommandStepper'` |
+| `CommandForm` | `@cratis/components/CommandForm` | `import * as CommandForm from '@cratis/components/CommandForm'` | `import { AutoCommandForm, InputTextField } from '@cratis/components/CommandForm'` |
+| `Common` | `@cratis/components/Common` | `import * as Common from '@cratis/components/Common'` | `import { CratisComponentsProvider, Button } from '@cratis/components/Common'` |
+| `DataPage` | `@cratis/components/DataPage` | `import * as DataPage from '@cratis/components/DataPage'` | `import { DataPage, Column } from '@cratis/components/DataPage'` |
+| `DataTables` | `@cratis/components/DataTables` | `import * as DataTables from '@cratis/components/DataTables'` | `import { DataTableForQuery, Column } from '@cratis/components/DataTables'` |
+| `Dialogs` | `@cratis/components/Dialogs` | `import * as Dialogs from '@cratis/components/Dialogs'` | `import { Dialog } from '@cratis/components/Dialogs'` |
+| `Display` | `@cratis/components/Display` | `import * as Display from '@cratis/components/Display'` | `import { Tag, Badge } from '@cratis/components/Display'` |
+| `Dropdown` | `@cratis/components/Dropdown` | `import * as Dropdown from '@cratis/components/Dropdown'` | `import { Dropdown } from '@cratis/components/Dropdown'` |
+| `Filter` | `@cratis/components/Filter` | `import * as Filter from '@cratis/components/Filter'` | `import { FilterPanel } from '@cratis/components/Filter'` |
+| `Notifications` | `@cratis/components/Notifications` | `import * as Notifications from '@cratis/components/Notifications'` | `import { Toaster, toast } from '@cratis/components/Notifications'` |
+| `ObjectContentEditor` | `@cratis/components/ObjectContentEditor` | `import * as ObjectContentEditor from '@cratis/components/ObjectContentEditor'` | `import { ObjectContentEditor } from '@cratis/components/ObjectContentEditor'` |
+| `ObjectNavigationalBar` | `@cratis/components/ObjectNavigationalBar` | `import * as ObjectNavigationalBar from '@cratis/components/ObjectNavigationalBar'` | `import { ObjectNavigationalBar } from '@cratis/components/ObjectNavigationalBar'` |
+| `PivotViewer` | `@cratis/components/PivotViewer` | `import * as PivotViewer from '@cratis/components/PivotViewer'` | `import { PivotViewer } from '@cratis/components/PivotViewer'` |
+| `SchemaEditor` | `@cratis/components/SchemaEditor` | `import * as SchemaEditor from '@cratis/components/SchemaEditor'` | `import { SchemaEditor } from '@cratis/components/SchemaEditor'` |
+| `TimeMachine` | `@cratis/components/TimeMachine` | `import * as TimeMachine from '@cratis/components/TimeMachine'` | `import { TimeMachine, EventsView } from '@cratis/components/TimeMachine'` |
+| `Toolbar` | `@cratis/components/Toolbar` | `import * as Toolbar from '@cratis/components/Toolbar'` | `import { Toolbar, ToolbarButton } from '@cratis/components/Toolbar'` |
+| `Types` | `@cratis/components/types` | `import * as Types from '@cratis/components/types'` | `import { JsonSchema, Json } from '@cratis/components/types'` |
+
+† `CommandStepper` needs care in one direction only: the root's `CommandStepper` namespace is an alias of the _entire_ `CommandDialog` module, so `CommandStepper.StepperCommandDialog` and even `CommandStepper.CommandDialog` are reachable there today. The dedicated `@cratis/components/CommandStepper` subpath only carries `CommandStepper` itself and its stepper types. Migrate anything reached as `CommandStepper.StepperCommandDialog` or `CommandStepper.CommandDialog` to the `CommandDialog` row above instead.
+
+`@cratis/components/CommandForm/fields` is the same module as `@cratis/components/CommandForm` — either subpath resolves identically, so the `CommandForm` row's migration applies to both.
+
+A codemod will automate this rewrite across a source tree once it ships:
+
+```bash
+node Source/scripts/migrate-root-imports.mjs <paths...>
+```
+
+This script has not shipped in this release — the invocation shape above is documented now so the tool and this guide describe the same command once it lands. Until then, apply the table by hand; it is a mechanical rename, not a behavioral change, so a codemod and a manual edit produce identical output.
+
+See [UI foundation: Capability profiles](ui-foundation.md#capability-profiles) for how these subpaths group into Foundation, Advanced React, and Spatial, and the [capability matrix](ui-foundation.md#capability-matrix) for what each profile owns.
+
 ## Keep the stylesheet entry points
 
 The three Cratis-owned stylesheet entries remain:
@@ -590,6 +652,7 @@ Complete PrimeIcons class strings remain usable where a component accepts the pu
 6. Exercise dialogs, filtered tables, dates, dropdowns, toasts, and steppers with keyboard-only navigation.
 7. Verify light, dark, forced-colors, reduced-motion, and responsive layouts.
 8. Run TypeScript, specs, Storybook, and the production build.
+9. Import components from their explicit subpath rather than the root namespace; apply the mapping table under [Import from explicit subpaths](#import-from-explicit-subpaths), or run the codemod once it ships.
 
 A TypeScript 6 application using `skipLibCheck: false` may see bounded upstream diagnostics from Pixi's `@webgpu/types` collision with TypeScript's built-in WebGPU declarations, from `@cratis/arc.react`'s published global JSX declarations, or under NodeNext from extensionless declaration imports in the current Arc and Fundamentals packages. Components validates every packed subpath without suppressing these diagnostics; exact versions, codes, affected subpaths, and removal conditions are documented under [Strict public-type validation](ui-foundation.md#strict-public-type-validation) and tracked in [#176](https://github.com/Cratis/Components/issues/176).
 
diff --git a/Documentation/ui-foundation.md b/Documentation/ui-foundation.md
index 98152619..001fb4de 100644
--- a/Documentation/ui-foundation.md
+++ b/Documentation/ui-foundation.md
@@ -34,6 +34,86 @@ The shipped styling contract contains:
 
 Spacing, typography, motion, elevation, and product-specific dimensions remain product design-system concerns unless a component documents a dedicated token or prop. A product can map its own token families to the Cratis semantic values and style stable parts without targeting React Aria DOM.
 
+## Import surface: setup-only root, explicit subpaths
+
+The canonical import rule: **the package root is setup-only; every component ships from its own subpath.**
+
+```ts
+// Setup surface — root
+import { CratisComponentsProvider } from '@cratis/components';
+
+// Components — explicit subpaths
+import { CommandDialog } from '@cratis/components/CommandDialog';
+import { DataTableForQuery, Column } from '@cratis/components/DataTables';
+import { Canvas, CanvasItem } from '@cratis/components/Canvas';
+```
+
+`@cratis/components` intentionally exports only `CratisComponentsProvider`, `cratisDefaults`, `mergeCratisComponentsConfig`, and their config/props types — the setup every application needs once, regardless of which components it uses. Every component family, in every [capability profile](#capability-profiles), is reached through its own subpath and never through the root.
+
+The root also re-exports every subpath as a namespace today (`import { Canvas } from '@cratis/components'`, then `Canvas.CanvasItem`), purely for source compatibility with code written before subpath imports were the documented default. That bridge is not the pattern for new code, and this release does not remove it: [Migrate from Components 3 to 4](migration.md) carries the complete namespace-to-subpath mapping, including one nuance the mapping resolves — the root's `CommandStepper` namespace is an alias of the entire `CommandDialog` module (so `CommandStepper.StepperCommandDialog` already works today), while the dedicated `@cratis/components/CommandStepper` subpath only carries `CommandStepper` itself. A removal of the root namespace bridge, if it ever happens, is a tracked, versioned change with its own migration guide — not a silent behavior change.
+
+## Capability profiles
+
+Components groups its subpaths into three capability profiles — a documentation and adoption grouping, not a support tier:
+
+- **Foundation** — the components most applications reach for immediately: `Common`, `CommandDialog` (and its `CommandStepper` alias), `CommandForm` (and `CommandForm/fields`), `DataPage`, `DataTables`, `Dialogs`, `Display`, `Dropdown`, `Filter`, `Notifications`, and `types`. Forms, dialogs, tables, and notifications for an ordinary Arc-backed CRUD screen.
+- **Advanced React** — specialized, still Pixi-free React surfaces used by fewer applications, or by fewer screens within an application: `ObjectContentEditor`, `ObjectNavigationalBar`, `SchemaEditor`, `TimeMachine`, and `Toolbar`. JSON Schema authoring, object/schema navigation, version scrubbing, and canvas-style tool palettes.
+- **Spatial** — pan/zoom and large-dataset visualization surfaces backed by Pixi: `Canvas` and `PivotViewer`. These install the optional `pixi.js` peer; see [Optional Pixi, clean no-Pixi core](#optional-pixi-clean-no-pixi-core).
+
+**Equal support, not weaker semver.** All three profiles, and the setup-only root, ship from the same package at the same version, pass the same [release gates](#release-gates) — build, specs, Storybook, package-export verification, SSR, accessibility, and strict public-type validation — and follow the same single semver line. A breaking change to `Toolbar` bumps the same major version as a breaking change to `DataTableForQuery`. "Advanced React" and "Spatial" describe what a component is _for_ and what it costs to adopt (peer install, bundle shape, typical audience) — never how carefully it is built, tested, or versioned.
+
+## Capability matrix
+
+| Capability profile | Subpaths | Extra peer | State Components owns | Data & persistence | Arc / Chronicle relationship | SSR | Performance shape |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| **Setup** (root) | `@cratis/components` | — | Locale, provider-owned labels, toast-region wiring | none | none | Renders no browser-only API; safe to import and render on the server | negligible |
+| **Foundation** | `Common`, `CommandDialog` / `CommandStepper`, `CommandForm` / `CommandForm/fields`, `DataPage`, `DataTables`, `Dialogs`, `Display`, `Dropdown`, `Filter`, `Notifications`, `types` | — | Widget interaction state: open/closed, focus, loaded-page sort/filter, paginator position, toast queue | Command execution and query results are `@cratis/arc.react` state; Components never fetches, caches, or persists data | Commands and queries run through Arc; Arc may itself be backed by Chronicle in an event-sourced application, but Components has no direct Chronicle dependency and behaves the same over a plain Arc.Core backend | Every surface that portals or reads `document` (`Dialog`, `FilterPanel`, `Toaster`) gates on a shared `useSyncExternalStore` browser check and renders a stable placeholder until mounted | Table/paging cost scales with the loaded page only; complete-result filtering/sorting is a server concern (see [Update tables](migration.md#update-tables)) |
+| **Advanced React** | `ObjectContentEditor`, `ObjectNavigationalBar`, `SchemaEditor`, `TimeMachine`, `Toolbar` | — | Local edit-buffer, breadcrumb, scrub-position, and active-tool/expanded-panel state | 100% host-supplied through props (`object`, `schema`, `versions`, `navigationPath`, …) — none of these components fetch, cache, or persist anything | None built in and none assumed; each page documents how a Chronicle-backed host typically supplies its data | Plain React trees; `Toolbar`'s folder/fan-out/slot pieces use the same browser-detection pattern as Foundation where they portal or attach `document` listeners | Cost is proportional to the object/schema/version data the host passes in — see each page's own performance note |
+| **Spatial** | `Canvas`, `PivotViewer` | `pixi.js@^8.20.0` (optional, single shared resolution — see [Optional Pixi](#optional-pixi-clean-no-pixi-core)) | Camera/viewport/gesture transforms, measured item bounds, worker/index/filter state | Item, shape, and card data is host-supplied; Components renders and lets you query it, never persists it | Same as Foundation: an event-sourced host may project Chronicle read models into the data it passes in, but neither component has a Chronicle dependency | `PIXI.Application` creation and PivotViewer's Web Worker setup run inside effects, guarded and skipped — with a synchronous fallback for the worker — when `window`/`Worker` is unavailable; `CanvasOverlay` uses the same browser-check pattern as Foundation | Pixi rendering and PivotViewer's Web Worker indexing exist specifically to keep large item counts off the DOM and main thread — see [Canvas](Canvas/index.md#dom-and-pixi-layers) and [PivotViewer](PivotViewer/index.md#worker-and-search-architecture) |
+
+## Optional Pixi, clean no-Pixi core
+
+Only the Spatial profile touches Pixi. `Canvas` and `PivotViewer` are the only subpaths that import `pixi.js`; every Foundation and Advanced React subpath — including `Toolbar`, which looks canvas-adjacent by name — is plain React and DOM, with no Pixi reference anywhere in its module graph.
+
+`pixi.js` is declared as an **optional peer** (`peerDependenciesMeta: { "pixi.js": { "optional": true } }`), not a Components dependency:
+
+```bash
+npm install pixi.js@^8.20.0
+```
+
+Install it once, in the application, only if that application uses `Canvas` or `PivotViewer`. Every other subpath needs nothing beyond React, Arc, and Fundamentals.
+
+**Single-peer rule.** Keep exactly one compatible Pixi resolution across the application and Components — never a nested copy pulled in only for Components. Two installed copies of `pixi.js` produce nominally incompatible `PIXI.Container` and pointer-event types even when both satisfy `^8.20.0`, because TypeScript treats structurally similar classes from two different module instances as distinct nominal types. This is why `CanvasContext`, `renderItem`, and Canvas's pointer callbacks intentionally expose real Pixi types rather than a reduced Cratis facade: consumers build arbitrary Pixi content against the one Pixi instance the application already owns, and Components does not shadow it with a second one. `PivotViewer` uses Pixi internally for its card rendering but does not expose Pixi types publicly, so it needs no equivalent declaration exception (see [Strict public-type validation](#strict-public-type-validation)).
+
+**DOM and Pixi as siblings, not a replacement.** Within the Spatial profile, `Canvas` itself composes two independent rendering layers rather than choosing one: arbitrary DOM content, positioned through `CanvasItem` and ordinary CSS transforms, and an optional Pixi `items`/`renderItem` layer for item counts where per-item DOM nodes would be the bottleneck. An application can use only the DOM layer (no `items`/`renderItem`, so no Pixi content ever mounts) or mix both in the same `Canvas`. See [Canvas: DOM and Pixi layers](Canvas/index.md#dom-and-pixi-layers).
+
+Everything Pixi-related — the peer, the install, the single-resolution rule, and the type-validation exception it requires — is a Spatial-profile concern. Choosing Foundation or Advanced React components never pulls Pixi into an application's dependency graph, install size, or type-checking surface.
+
+## Aggregate CSS today, future split criteria
+
+`@cratis/components/styles` is one manifest — `Source/styles.css` — that `@import`s every component's stylesheet, across all three capability profiles, into one compiled `dist/esm/styles.css`. Component modules import no CSS themselves; every rule reaches the browser through this single entry point. That is a deliberate constraint, not an oversight: a CSS import inside the component JavaScript module graph is what made a previous published ESM unloadable from Node (`ERR_UNKNOWN_FILE_EXTENSION` on any subpath a spec or SSR run touched), so Components' build fails if a `.css` file under `Source/` is not reachable from the manifest — the styles and the components cannot drift apart.
+
+This means Foundation, Advanced React, and Spatial CSS all ship together today: importing `@cratis/components/styles` once loads Canvas's and PivotViewer's rules alongside Dialog's and DataTable's, whether or not the application ever renders `Canvas`. That is an acceptable, and currently the simplest, aggregate cost — plain CSS custom properties and class rules are inert until a matching class or `data-cratis-part` renders, so unused component CSS costs parse time on an already-small stylesheet, not runtime behavior, layout, or a Pixi/JavaScript dependency.
+
+A future split — for example, a separate `@cratis/components/styles/spatial` alongside a slimmer default — would only be justified once one of these becomes true and measured, not merely theoretical:
+
+- The aggregate manifest's compiled size becomes large enough that a Foundation-only application's CSS payload is a demonstrated problem, not a stylistic preference.
+- A capability profile needs an independently versioned or independently loaded stylesheet — for example, a CDN-hosted or lazily loaded Spatial bundle separate from the application shell.
+- Splitting no longer risks the two-file drift the single manifest exists to prevent, or the build gate that enforces it is extended to cover multiple manifests without weakening it.
+
+Until then, one manifest is simpler to keep correct than several kept in sync, and it matches the "equal support" statement in [Capability profiles](#capability-profiles): no profile's styling is a second-class, separately loaded concern.
+
+## Package split criteria
+
+`@cratis/components` is one npm package covering all three capability profiles today, and stays that way unless a concrete, measured need crosses one of these lines:
+
+- **Peer isolation stops being enough.** The optional `pixi.js` peer plus subpath exports already means a Foundation-only application installs no Pixi code and imports no Pixi module. A split would only remove marginal package-manager or type-resolution overhead beyond what the optional peer already removes — that overhead would need to be measured and real, not assumed.
+- **A capability profile needs an independent release cadence.** For example, a Pixi major upgrade that must ship for `Canvas`/`PivotViewer` without forcing a coordinated release of every Foundation and Advanced React component, or vice versa. Today all three profiles share one version and one release process by design — see [Capability profiles](#capability-profiles).
+- **A second framework binding needs to reuse non-visual logic without pulling in React-specific Spatial code.** The [table architecture](#table-architecture) section already anticipates this for an Arc React query/table binding; the same reasoning would apply to any Foundation/Advanced React logic a future Vue or Svelte binding wants to share, while Spatial's Pixi/React composition would not be reusable as-is regardless of packaging.
+- **The aggregate CSS manifest is split first.** See [Aggregate CSS today, future split criteria](#aggregate-css-today-future-split-criteria) — a package split typically follows the same boundary as its stylesheets, so splitting packages before an already-justified CSS split would just recreate the drift problem the manifest exists to prevent, across package boundaries instead of within one.
+
+None of these conditions is met today. A single package with subpath exports, an optional Pixi peer, and one aggregate stylesheet already delivers tree-shakeable code, no forced Pixi install, one `--cratis-*` token source, and one release/versioning/CI surface — the practical benefits a split would chase — without a multi-package version matrix to keep compatible across three profiles that already share every build, spec, and release gate.
+
 ## Why React Aria
 
 [React Aria Components](https://react-aria.adobe.com/getting-started) is style-free and Apache-2.0 licensed. It supplies difficult interaction behavior such as focus management, keyboard navigation, screen-reader semantics, overlays, collection behavior, and internationalized dates.
diff --git a/Source/MIGRATION.md b/Source/MIGRATION.md
index 1d8374f0..6d71b0c4 100644
--- a/Source/MIGRATION.md
+++ b/Source/MIGRATION.md
@@ -31,6 +31,66 @@ Applications using Canvas or PivotViewer must install `pixi.js@^8.20.0`, now an
 
 The supported Arc peer range remains `>=20.3.1 <23`.
 
+## Import from explicit subpaths
+
+The canonical rule going forward: **the package root is setup-only; every component ships from its own subpath.**
+
+```tsx
+// Before — root namespace (still works, not canonical)
+import { Canvas } from '@cratis/components';
+
+<Canvas.Canvas showControls>
+    <Canvas.CanvasItem x={0} y={0}>Content</Canvas.CanvasItem>
+</Canvas.Canvas>;
+```
+
+```tsx
+// After — canonical subpath, named imports
+import { Canvas, CanvasItem } from '@cratis/components/Canvas';
+
+<Canvas showControls>
+    <CanvasItem x={0} y={0}>Content</CanvasItem>
+</Canvas>;
+```
+
+This is **not a breaking change in this release.** The root still re-exports every subpath as a namespace (`import { Canvas } from '@cratis/components'`) for source compatibility, exactly as it does today; nothing in this section removes that bridge. It documents the rule new code should already follow and gives existing code a mechanical path onto it, ahead of any future removal — which, if it ever happens, is its own tracked, versioned change with its own migration guide.
+
+Every namespace maps the same way: replace `import { X } from '@cratis/components'` with either an equivalent namespace import from `@cratis/components/X`, or named imports from the same subpath.
+
+| Namespace (root, source-compatible) | Canonical subpath | Namespace-preserving migration | Named migration |
+| --- | --- | --- | --- |
+| `Canvas` | `@cratis/components/Canvas` | `import * as Canvas from '@cratis/components/Canvas'` | `import { Canvas, CanvasItem } from '@cratis/components/Canvas'` |
+| `CommandDialog` | `@cratis/components/CommandDialog` | `import * as CommandDialog from '@cratis/components/CommandDialog'` | `import { CommandDialog } from '@cratis/components/CommandDialog'` |
+| `CommandStepper` † | `@cratis/components/CommandStepper` | `import * as CommandStepper from '@cratis/components/CommandStepper'` | `import { CommandStepper } from '@cratis/components/CommandStepper'` |
+| `CommandForm` | `@cratis/components/CommandForm` | `import * as CommandForm from '@cratis/components/CommandForm'` | `import { AutoCommandForm, InputTextField } from '@cratis/components/CommandForm'` |
+| `Common` | `@cratis/components/Common` | `import * as Common from '@cratis/components/Common'` | `import { CratisComponentsProvider, Button } from '@cratis/components/Common'` |
+| `DataPage` | `@cratis/components/DataPage` | `import * as DataPage from '@cratis/components/DataPage'` | `import { DataPage, Column } from '@cratis/components/DataPage'` |
+| `DataTables` | `@cratis/components/DataTables` | `import * as DataTables from '@cratis/components/DataTables'` | `import { DataTableForQuery, Column } from '@cratis/components/DataTables'` |
+| `Dialogs` | `@cratis/components/Dialogs` | `import * as Dialogs from '@cratis/components/Dialogs'` | `import { Dialog } from '@cratis/components/Dialogs'` |
+| `Display` | `@cratis/components/Display` | `import * as Display from '@cratis/components/Display'` | `import { Tag, Badge } from '@cratis/components/Display'` |
+| `Dropdown` | `@cratis/components/Dropdown` | `import * as Dropdown from '@cratis/components/Dropdown'` | `import { Dropdown } from '@cratis/components/Dropdown'` |
+| `Filter` | `@cratis/components/Filter` | `import * as Filter from '@cratis/components/Filter'` | `import { FilterPanel } from '@cratis/components/Filter'` |
+| `Notifications` | `@cratis/components/Notifications` | `import * as Notifications from '@cratis/components/Notifications'` | `import { Toaster, toast } from '@cratis/components/Notifications'` |
+| `ObjectContentEditor` | `@cratis/components/ObjectContentEditor` | `import * as ObjectContentEditor from '@cratis/components/ObjectContentEditor'` | `import { ObjectContentEditor } from '@cratis/components/ObjectContentEditor'` |
+| `ObjectNavigationalBar` | `@cratis/components/ObjectNavigationalBar` | `import * as ObjectNavigationalBar from '@cratis/components/ObjectNavigationalBar'` | `import { ObjectNavigationalBar } from '@cratis/components/ObjectNavigationalBar'` |
+| `PivotViewer` | `@cratis/components/PivotViewer` | `import * as PivotViewer from '@cratis/components/PivotViewer'` | `import { PivotViewer } from '@cratis/components/PivotViewer'` |
+| `SchemaEditor` | `@cratis/components/SchemaEditor` | `import * as SchemaEditor from '@cratis/components/SchemaEditor'` | `import { SchemaEditor } from '@cratis/components/SchemaEditor'` |
+| `TimeMachine` | `@cratis/components/TimeMachine` | `import * as TimeMachine from '@cratis/components/TimeMachine'` | `import { TimeMachine, EventsView } from '@cratis/components/TimeMachine'` |
+| `Toolbar` | `@cratis/components/Toolbar` | `import * as Toolbar from '@cratis/components/Toolbar'` | `import { Toolbar, ToolbarButton } from '@cratis/components/Toolbar'` |
+| `Types` | `@cratis/components/types` | `import * as Types from '@cratis/components/types'` | `import { JsonSchema, Json } from '@cratis/components/types'` |
+
+† `CommandStepper` needs care in one direction only: the root's `CommandStepper` namespace is an alias of the _entire_ `CommandDialog` module, so `CommandStepper.StepperCommandDialog` and even `CommandStepper.CommandDialog` are reachable there today. The dedicated `@cratis/components/CommandStepper` subpath only carries `CommandStepper` itself and its stepper types. Migrate anything reached as `CommandStepper.StepperCommandDialog` or `CommandStepper.CommandDialog` to the `CommandDialog` row above instead.
+
+`@cratis/components/CommandForm/fields` is the same module as `@cratis/components/CommandForm` — either subpath resolves identically, so the `CommandForm` row's migration applies to both.
+
+A codemod will automate this rewrite across a source tree once it ships:
+
+```bash
+node Source/scripts/migrate-root-imports.mjs <paths...>
+```
+
+This script has not shipped in this release — the invocation shape above is documented now so the tool and this guide describe the same command once it lands. Until then, apply the table by hand; it is a mechanical rename, not a behavioral change, so a codemod and a manual edit produce identical output.
+
 ## Keep the stylesheet entry points
 
 The three Cratis-owned stylesheet entries remain:
@@ -378,6 +438,7 @@ Complete PrimeIcons class strings remain usable where a component accepts `Icon`
 6. Exercise dialogs, filtered tables, dates, dropdowns, toasts, and steppers with keyboard-only navigation.
 7. Verify light, dark, forced-colors, reduced-motion, and responsive layouts.
 8. Run TypeScript, specs, Storybook, and the production build.
+9. Import components from their explicit subpath rather than the root namespace; apply the mapping table under [Import from explicit subpaths](#import-from-explicit-subpaths), or run the codemod once it ships.
 
 A TypeScript 6 application using `skipLibCheck: false` may see bounded upstream diagnostics from Pixi's `@webgpu/types` collision with TypeScript's built-in WebGPU declarations, from `@cratis/arc.react`'s published global JSX declarations, or under NodeNext from extensionless declaration imports in the current Arc and Fundamentals packages. Components validates every packed subpath without suppressing these diagnostics; exact versions, codes, affected subpaths, and removal conditions are documented under the published [UI foundation](https://cratis.io/components/ui-foundation/#strict-public-type-validation) explanation and tracked in [#176](https://github.com/Cratis/Components/issues/176).
 
diff --git a/Source/README.md b/Source/README.md
index 62f44ef6..c89a4447 100644
--- a/Source/README.md
+++ b/Source/README.md
@@ -20,6 +20,14 @@ Supported peers:
 
 PrimeReact, PrimeIcons, PrimeUI themes, and a PrimeUI license are not required.
 
+`pixi.js@^8.20.0` is an additional **optional** peer, required only by `Canvas` and `PivotViewer` (the Spatial capability profile — see [Import from explicit subpaths](#import-from-explicit-subpaths) below). Every other subpath needs nothing beyond the peers above:
+
+```bash
+npm install pixi.js@^8.20.0
+```
+
+Keep exactly one compatible Pixi resolution across the application and Components; two installed copies produce nominal TypeScript incompatibilities for `PIXI.Container` and pointer-event types even though both satisfy `^8.20.0`. See the published [UI foundation](https://cratis.io/components/ui-foundation/#optional-pixi-clean-no-pixi-core) explanation for why.
+
 ## Styles
 
 ```ts
@@ -165,31 +173,36 @@ Every meaningful component element carries a stable `data-cratis-part`. Componen
 
 Do not target React Aria classes or internal DOM structure.
 
-## Entry points
-
-- `@cratis/components`
-- `@cratis/components/Canvas`
-- `@cratis/components/CommandDialog`
-- `@cratis/components/CommandStepper`
-- `@cratis/components/CommandForm`
-- `@cratis/components/CommandForm/fields`
-- `@cratis/components/Common`
-- `@cratis/components/DataPage`
-- `@cratis/components/DataTables`
-- `@cratis/components/Dialogs`
-- `@cratis/components/Display`
-- `@cratis/components/Dropdown`
-- `@cratis/components/Filter`
-- `@cratis/components/Notifications`
-- `@cratis/components/ObjectContentEditor`
-- `@cratis/components/ObjectNavigationalBar`
-- `@cratis/components/PivotViewer`
-- `@cratis/components/SchemaEditor`
-- `@cratis/components/TimeMachine`
-- `@cratis/components/Toolbar`
-- `@cratis/components/types`
-
-The root entry retains the existing namespace exports for source compatibility with established consumers. New code should import the narrow subpath it uses—especially `Common` for provider setup—so bundlers and readers do not traverse unrelated component families. Components 4 intentionally retains the existing namespace symbols; [#173](https://github.com/Cratis/Components/issues/173) tracks declaration-level TSDoc and API-reference coverage, not silent 4.x export removal.
+## Import from explicit subpaths
+
+The canonical rule: **the package root is setup-only; every component ships from its own subpath.** Import `CratisComponentsProvider` (and `cratisDefaults`, `mergeCratisComponentsConfig`) from the root; import every component from the subpath in its capability profile:
+
+| Subpath | Capability profile |
+| --- | --- |
+| `@cratis/components/Canvas` | Spatial (optional `pixi.js` peer) |
+| `@cratis/components/CommandDialog` | Foundation |
+| `@cratis/components/CommandStepper` | Foundation |
+| `@cratis/components/CommandForm` | Foundation |
+| `@cratis/components/CommandForm/fields` | Foundation |
+| `@cratis/components/Common` | Foundation |
+| `@cratis/components/DataPage` | Foundation |
+| `@cratis/components/DataTables` | Foundation |
+| `@cratis/components/Dialogs` | Foundation |
+| `@cratis/components/Display` | Foundation |
+| `@cratis/components/Dropdown` | Foundation |
+| `@cratis/components/Filter` | Foundation |
+| `@cratis/components/Notifications` | Foundation |
+| `@cratis/components/ObjectContentEditor` | Advanced React |
+| `@cratis/components/ObjectNavigationalBar` | Advanced React |
+| `@cratis/components/PivotViewer` | Spatial (optional `pixi.js` peer) |
+| `@cratis/components/SchemaEditor` | Advanced React |
+| `@cratis/components/TimeMachine` | Advanced React |
+| `@cratis/components/Toolbar` | Advanced React |
+| `@cratis/components/types` | Foundation |
+
+Foundation, Advanced React, and Spatial are equal-support capability profiles, not stability tiers: all three ship from the same package at the same version, behind the same release gates, on the same semver line. "Spatial" describes what a component is for and what it costs to adopt (the optional Pixi peer), never how carefully it is built, tested, or versioned. See the published [Capability profiles](https://cratis.io/components/ui-foundation/#capability-profiles) explanation and its [capability matrix](https://cratis.io/components/ui-foundation/#capability-matrix) for state, persistence, Arc/Chronicle, SSR, and performance ownership per profile.
+
+The root also retains every subpath as a namespace export (`import { Canvas } from '@cratis/components'`, then `Canvas.CanvasItem`) for source compatibility with established consumers; this is not the pattern for new code, and this release does not remove it. Components 4 intentionally retains the existing namespace symbols; declaration-level TSDoc and API-reference coverage for them is tracked as ongoing documentation work, not as a silent 4.x export removal. [MIGRATION.md](./MIGRATION.md) has the complete namespace-to-subpath mapping and the codemod invocation for moving existing code off the root namespace.
 
 ## Components 3 migration
 

From 575b9757313f428a2943b8ff8b08cb4534ff796c Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Tue, 25 Aug 2026 12:39:40 +0200
Subject: [PATCH 057/267] pi-agent: Implement setup-only root

---
 .../when_importing_from_the_root_barrel.ts    |  77 ++++
 Source/index.ts                               |  96 ++---
 Source/package.json                           |   4 +
 Source/scripts/lib/dependency-graph.mjs       | 122 ++++++
 Source/scripts/lib/packed-artifact.mjs        | 200 ++++++++++
 Source/scripts/verify-no-pixi-consumer.mjs    | 360 ++++++++++++++++++
 Source/scripts/verify-package-graph.mjs       | 240 ++++++++++++
 .../verify-provider-context-identity.mjs      | 269 +++++++++++++
 .../verify-public-types.exceptions.json       |  13 -
 Source/scripts/verify-spatial-consumer.mjs    | 254 ++++++++++++
 rollup.config.mjs                             |  57 ++-
 11 files changed, 1606 insertions(+), 86 deletions(-)
 create mode 100644 Source/for_root_architecture/when_importing_from_the_root_barrel.ts
 create mode 100644 Source/scripts/lib/dependency-graph.mjs
 create mode 100644 Source/scripts/lib/packed-artifact.mjs
 create mode 100644 Source/scripts/verify-no-pixi-consumer.mjs
 create mode 100644 Source/scripts/verify-package-graph.mjs
 create mode 100644 Source/scripts/verify-provider-context-identity.mjs
 create mode 100644 Source/scripts/verify-spatial-consumer.mjs

diff --git a/Source/for_root_architecture/when_importing_from_the_root_barrel.ts b/Source/for_root_architecture/when_importing_from_the_root_barrel.ts
new file mode 100644
index 00000000..6c746173
--- /dev/null
+++ b/Source/for_root_architecture/when_importing_from_the_root_barrel.ts
@@ -0,0 +1,77 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import * as RootBarrel from '../index';
+
+/**
+ * Source-level contract for the setup-only root architecture (Cratis/Components root
+ * architecture): the package root exports the application-wide provider, its
+ * configuration/hook/merge helpers, and the config/provider/message interface family -
+ * nothing else. Every component namespace (`Canvas`, `CommandDialog`, `CommandForm`,
+ * `Common`, `DataPage`, `DataTables`, `Dialogs`, `Display`, `Dropdown`, `Filter`,
+ * `Notifications`, `ObjectContentEditor`, `ObjectNavigationalBar`, `PivotViewer`,
+ * `SchemaEditor`, `TimeMachine`, `Toolbar`, `Types`) lives behind its own explicit
+ * subpath only.
+ *
+ * This is the source-level half of the contract; `scripts/verify-public-types.mjs` and
+ * `scripts/verify-no-pixi-consumer.mjs` verify the equivalent built/packed-artifact
+ * boundary against the real declaration output and a real no-Pixi consumer.
+ */
+describe('when importing from the root barrel', () => {
+    const ALLOWED_ROOT_EXPORTS = [
+        'CratisComponentsProvider',
+        'useCratisComponentsConfig',
+        'cratisDefaults',
+        'mergeCratisComponentsConfig',
+    ];
+
+    it('should export exactly the setup-only allowlist and nothing else', () => {
+        Object.keys(RootBarrel)
+            .sort()
+            .should.deep.equal([...ALLOWED_ROOT_EXPORTS].sort());
+    });
+
+    it('should export CratisComponentsProvider as a function component', () => {
+        RootBarrel.CratisComponentsProvider.should.be.a('function');
+    });
+
+    it('should export useCratisComponentsConfig as a hook function', () => {
+        RootBarrel.useCratisComponentsConfig.should.be.a('function');
+    });
+
+    it('should export mergeCratisComponentsConfig as a function', () => {
+        RootBarrel.mergeCratisComponentsConfig.should.be.a('function');
+    });
+
+    it('should export cratisDefaults as a resolved configuration object', () => {
+        RootBarrel.cratisDefaults.should.be.an('object');
+        RootBarrel.cratisDefaults.locale!.should.equal('en-US');
+    });
+
+    it('should never export a component namespace from the root', () => {
+        const forbiddenNamespaces = [
+            'Canvas',
+            'CommandDialog',
+            'CommandStepper',
+            'CommandForm',
+            'Common',
+            'DataPage',
+            'DataTables',
+            'Dialogs',
+            'Display',
+            'Dropdown',
+            'Filter',
+            'Notifications',
+            'ObjectContentEditor',
+            'ObjectNavigationalBar',
+            'PivotViewer',
+            'SchemaEditor',
+            'TimeMachine',
+            'Toolbar',
+            'Types',
+        ];
+        for (const namespace of forbiddenNamespaces) {
+            Object.keys(RootBarrel).should.not.include(namespace);
+        }
+    });
+});
diff --git a/Source/index.ts b/Source/index.ts
index 8977ba45..74bd74a2 100644
--- a/Source/index.ts
+++ b/Source/index.ts
@@ -2,83 +2,35 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 /**
- * Namespace re-exports below are an intentional, documented contract: every
- * subpath in `Source/package.json`'s `exports` map (`@cratis/components/Canvas`,
- * `@cratis/components/CommandDialog`, ...) is also reachable as a namespace off
- * the package root (`import { Canvas } from '@cratis/components'`), so a consumer
- * that only wants the root import does not have to know the subpath layout.
- * Each namespace's own members carry their own TSDoc; the summaries here describe
- * what each subsystem is for.
+ * The package root is a setup-only surface: it carries the application-wide
+ * {@link CratisComponentsProvider} and its configuration contract - locale,
+ * messages, and the hook/merge helpers that read and build that configuration
+ * - and nothing else. Every component, part type, and utility lives behind its
+ * own explicit subpath (`@cratis/components/Canvas`, `@cratis/components/CommandDialog`,
+ * `@cratis/components/DataPage`, ...); the root barrel intentionally does not
+ * re-export those namespaces.
+ *
+ * This keeps a consumer's root import free of every optional-peer-heavy subsystem
+ * (Canvas and PivotViewer's Pixi dependency chief among them) and free of every
+ * `@cratis/arc`/`@cratis/arc.react` binding: mounting `CratisComponentsProvider`
+ * never requires installing, resolving, or type-checking against Pixi or Arc.
+ * Import a component from its subpath; import the provider and its configuration
+ * types from here.
  */
-
-/** Pan/zoom/Pixi-backed world surface, including the Chat, Note, and Region shapes. */
-import * as Canvas from './Canvas';
-/** Modal command dialogs, including the multi-step {@link StepperCommandDialog}. */
-import * as CommandDialog from './CommandDialog';
-/** Alias of {@link CommandDialog} kept for the standalone `./CommandStepper` subpath - same module, same members. */
-import * as CommandStepper from './CommandDialog';
-/** Field components and the field-type provider registry bound to Arc command forms. */
-import * as CommandForm from './CommandForm';
-/** Cross-cutting primitives: the provider, buttons, icons, tooltips, and page chrome. */
-import * as Common from './Common';
-/** The `DataPage` list/detail composition shell and its `Column` marker. */
-import * as DataPage from './DataPage';
-/** Query-backed and observable-query-backed data tables, columns, and filter matchers. */
-import * as DataTables from './DataTables';
-/** The base `Dialog` primitive plus busy-indicator and confirmation dialogs. */
-import * as Dialogs from './Dialogs';
-/** Small presentational primitives: tags, badges, chips, avatars, and progress indicators. */
-import * as Display from './Display';
-/** The accessible single/multi-select `Dropdown` control. */
-import * as Dropdown from './Dropdown';
-/** The filter panel, range histogram filter, and `useFilterState` state hook. */
-import * as Filter from './Filter';
-/** The app-wide imperative toast queue and `Toaster` region. */
-import * as Notifications from './Notifications';
-/** The structured JSON/JSON-Schema content editor. */
-import * as ObjectContentEditor from './ObjectContentEditor';
-/** The breadcrumb-style navigational bar for a navigable object path. */
-import * as ObjectNavigationalBar from './ObjectNavigationalBar';
-/** The faceted, zoomable card-grid `PivotViewer` visualization. */
-import * as PivotViewer from './PivotViewer';
-/** The JSON Schema-driven object editor. */
-import * as SchemaEditor from './SchemaEditor';
-/** The version-scrubbing `TimeMachine`, its read-model and events views, and `Properties` table. */
-import * as TimeMachine from './TimeMachine';
-/** The composable canvas-style icon toolbar and its part family. */
-import * as Toolbar from './Toolbar';
-/** Cross-cutting JSON/JSON-Schema/navigation types shared across editors. */
-import * as Types from './types';
-
-export {
-    Canvas,
-    CommandDialog,
-    CommandStepper,
-    CommandForm,
-    Common,
-    DataPage,
-    DataTables,
-    Dialogs,
-    Display,
-    Dropdown,
-    Filter,
-    Notifications,
-    ObjectContentEditor,
-    ObjectNavigationalBar,
-    PivotViewer,
-    SchemaEditor,
-    TimeMachine,
-    Toolbar,
-    Types,
-};
-
-// Re-export the primary setup surface from the root so the recommended
-// `import { CratisComponentsProvider } from '@cratis/components'` works
-// without consumers having to know about the `Common` subpath.
 export {
     CratisComponentsProvider,
+    useCratisComponentsConfig,
     cratisDefaults,
     mergeCratisComponentsConfig,
     type CratisComponentsConfig,
     type CratisComponentsProviderProps,
+    type CratisComponentsMessages,
+    type CratisPaginatorMessages,
+    type CratisDatePickerMessages,
+    type CratisDropdownMessages,
+    type CratisDialogMessages,
+    type CratisStepperMessages,
+    type CratisNotificationsMessages,
+    type CratisDataTableMessages,
+    type CratisColumnFilterMessages,
 } from './Common/CratisComponentsProvider';
diff --git a/Source/package.json b/Source/package.json
index a7ed0508..84157a9a 100644
--- a/Source/package.json
+++ b/Source/package.json
@@ -130,6 +130,10 @@
         "verify-package-archive": "node ./scripts/verify-package-archive.mjs",
         "verify-api-docs": "node ./scripts/verify-api-docs.mjs",
         "verify-public-types": "node ./scripts/verify-public-types.mjs",
+        "verify-package-graph": "node ./scripts/verify-package-graph.mjs",
+        "verify-no-pixi-consumer": "node ./scripts/verify-no-pixi-consumer.mjs",
+        "verify-spatial-consumer": "node ./scripts/verify-spatial-consumer.mjs",
+        "verify-provider-context-identity": "node ./scripts/verify-provider-context-identity.mjs",
         "lint": "yarn g:lint",
         "lint:ci": "yarn g:lint:ci",
         "test": "yarn g:test",
diff --git a/Source/scripts/lib/dependency-graph.mjs b/Source/scripts/lib/dependency-graph.mjs
new file mode 100644
index 00000000..57033d55
--- /dev/null
+++ b/Source/scripts/lib/dependency-graph.mjs
@@ -0,0 +1,122 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+/*
+ * Shared helper for statically walking the *built* `dist/esm` module graph: parses every
+ * `import`/`export … from`/dynamic-`import()`/`import type(...)` specifier in a compiled
+ * `.js` or `.d.ts` file with the real TypeScript parser (no regex-on-source heuristics,
+ * and no new dependency - `typescript` is already installed), then follows relative
+ * specifiers to build a transitive closure while recording every external (bare)
+ * specifier reached along the way.
+ *
+ * Used by both `verify-package-graph.mjs` (the full deterministic dependency-closure
+ * check across every `exports` subpath) and `verify-no-pixi-consumer.mjs` (the narrower
+ * "root's own closure never reaches Canvas/PivotViewer/pixi.js" assertion), so the two
+ * checks can never quietly disagree about how a specifier resolves or what counts as
+ * "external".
+ */
+
+import { existsSync, readFileSync } from 'node:fs';
+import path from 'node:path';
+import ts from 'typescript';
+
+/** Module-specifier string literals from every import/export/dynamic-import/import-type form. */
+export function moduleSpecifiers(sourceFile) {
+    const specifiers = [];
+    const visit = (node) => {
+        if (
+            (ts.isImportDeclaration(node) || ts.isExportDeclaration(node)) &&
+            node.moduleSpecifier &&
+            ts.isStringLiteralLike(node.moduleSpecifier)
+        ) {
+            specifiers.push(node.moduleSpecifier.text);
+        } else if (
+            ts.isCallExpression(node) &&
+            node.expression.kind === ts.SyntaxKind.ImportKeyword &&
+            node.arguments.length === 1 &&
+            ts.isStringLiteralLike(node.arguments[0])
+        ) {
+            specifiers.push(node.arguments[0].text);
+        } else if (
+            ts.isImportTypeNode(node) &&
+            ts.isLiteralTypeNode(node.argument) &&
+            ts.isStringLiteralLike(node.argument.literal)
+        ) {
+            specifiers.push(node.argument.literal.text);
+        }
+        ts.forEachChild(node, visit);
+    };
+    visit(sourceFile);
+    return specifiers;
+}
+
+/** Parses one emitted `.js`/`.d.ts` file's own specifiers (does not recurse). */
+function specifiersOf(file) {
+    const source = readFileSync(file, 'utf8');
+    const sourceFile = ts.createSourceFile(
+        file,
+        source,
+        ts.ScriptTarget.Latest,
+        true,
+        file.endsWith('.d.ts') ? ts.ScriptKind.TS : ts.ScriptKind.JS,
+    );
+    return moduleSpecifiers(sourceFile);
+}
+
+/** Resolves a relative specifier from `fromFile` to the emitted file it points at, if any. */
+function resolveRelative(fromFile, specifier) {
+    if (!specifier.startsWith('.')) return undefined;
+    const target = path.resolve(path.dirname(fromFile), specifier);
+    if (existsSync(target) && !target.endsWith('/')) return target;
+    if (existsSync(`${target}`) && path.extname(target) !== '') return target;
+    return undefined;
+}
+
+/**
+ * Walks the transitive closure of relative specifiers starting at `entryFile`.
+ *
+ * @param entryFile Absolute path to an emitted `.js` or `.d.ts` file.
+ * @param root Absolute path to the root all reported `files` are made relative to (the `dist/esm` directory).
+ * @returns `files` - every visited emitted file (relative to `root`, entry included); `external` - every
+ *          non-relative (bare) specifier reached anywhere in the closure.
+ */
+export function closureOf(entryFile, root) {
+    const files = new Set();
+    const external = new Set();
+    const queue = [entryFile];
+
+    while (queue.length > 0) {
+        const file = queue.pop();
+        if (files.has(file)) continue;
+        if (!existsSync(file)) continue;
+        files.add(file);
+
+        for (const specifier of specifiersOf(file)) {
+            if (specifier.startsWith('.')) {
+                const resolved = resolveRelative(file, specifier);
+                if (resolved && !files.has(resolved)) queue.push(resolved);
+            } else {
+                external.add(specifier);
+            }
+        }
+    }
+
+    return {
+        files: [...files].map((file) =>
+            path.relative(root, file).split(path.sep).join('/'),
+        ),
+        external: [...external].sort(),
+    };
+}
+
+/** True when `specifier` names `pixi.js` itself or one of its own subpaths. */
+export const isPixiSpecifier = (specifier) =>
+    specifier === 'pixi.js' || specifier.startsWith('pixi.js/');
+
+/** True when a closure's `files` list contains a module under `Canvas/` or `PivotViewer/`. */
+export const closureTouchesSpatialDirectory = (files) =>
+    files.some(
+        (file) =>
+            (file.startsWith('Canvas/') || file.startsWith('PivotViewer/')) &&
+            !file.startsWith('CanvasStyles'),
+    );
diff --git a/Source/scripts/lib/packed-artifact.mjs b/Source/scripts/lib/packed-artifact.mjs
new file mode 100644
index 00000000..aafc6423
--- /dev/null
+++ b/Source/scripts/lib/packed-artifact.mjs
@@ -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.
+
+/*
+ * Shared "pack the real publish artifact into a scratch consumer" plumbing, factored out
+ * of `verify-public-types.mjs` so `verify-no-pixi-consumer.mjs` and
+ * `verify-spatial-consumer.mjs` can build their own scratch `node_modules` - one that
+ * deliberately withholds `pixi.js`, one that deliberately installs it - without
+ * duplicating the tar-reading/extraction logic or diverging from how `verify-public-types.mjs`
+ * itself resolves the packed artifact. No new dependency: this is a minimal ustar/PAX
+ * gzip reader, the same approach `verify-public-types.mjs` already uses instead of shelling
+ * out to a platform `tar`.
+ */
+
+import { spawnSync } from 'node:child_process';
+import {
+    copyFileSync,
+    existsSync,
+    mkdirSync,
+    readFileSync,
+    readdirSync,
+    realpathSync,
+    symlinkSync,
+    writeFileSync,
+} from 'node:fs';
+import path from 'node:path';
+import { gunzipSync } from 'node:zlib';
+
+const readNullTerminated = (buffer) => {
+    const end = buffer.indexOf(0);
+    return buffer.subarray(0, end < 0 ? buffer.length : end).toString('utf8');
+};
+
+const readOctal = (buffer) => {
+    const value = readNullTerminated(buffer).trim();
+    return value ? Number.parseInt(value, 8) : 0;
+};
+
+const parsePax = (buffer) => {
+    const values = {};
+    let offset = 0;
+    while (offset < buffer.length) {
+        const separator = buffer.indexOf(0x20, offset);
+        if (separator < 0) break;
+        const length = Number.parseInt(
+            buffer.subarray(offset, separator).toString('ascii'),
+            10,
+        );
+        if (!Number.isFinite(length) || length <= 0) break;
+        const record = buffer
+            .subarray(separator + 1, offset + length - 1)
+            .toString('utf8');
+        const equals = record.indexOf('=');
+        if (equals >= 0) values[record.slice(0, equals)] = record.slice(equals + 1);
+        offset += length;
+    }
+    return values;
+};
+
+/** Reads a gzip-compressed ustar/PAX archive without requiring a platform `tar` executable. */
+export function readTarEntries(archivePath) {
+    const archive = gunzipSync(readFileSync(archivePath));
+    const entries = new Map();
+    let offset = 0;
+    let longName;
+    let pax = {};
+
+    while (offset + 512 <= archive.length) {
+        const header = archive.subarray(offset, offset + 512);
+        if (header.every((byte) => byte === 0)) break;
+
+        const size = readOctal(header.subarray(124, 136));
+        const type = String.fromCharCode(header[156] || 0);
+        const name = readNullTerminated(header.subarray(0, 100));
+        const prefix = readNullTerminated(header.subarray(345, 500));
+        const dataStart = offset + 512;
+        const data = archive.subarray(dataStart, dataStart + size);
+        offset = dataStart + Math.ceil(size / 512) * 512;
+
+        if (type === 'L') {
+            longName = readNullTerminated(data);
+            continue;
+        }
+        if (type === 'x') {
+            pax = parsePax(data);
+            continue;
+        }
+        if (type === 'g') continue;
+
+        const entryName = pax.path ?? longName ?? (prefix ? `${prefix}/${name}` : name);
+        longName = undefined;
+        pax = {};
+        if ((type === '\0' || type === '0') && entryName) {
+            entries.set(entryName, Buffer.from(data));
+        }
+    }
+    return entries;
+}
+
+/** Extracts every `package/...` entry of a read tarball under `destination`. */
+export function extractPackedArtifact(entries, destination) {
+    const packagePrefix = 'package/';
+    for (const [entryName, content] of entries) {
+        if (!entryName.startsWith(packagePrefix)) continue;
+        const relative = entryName.slice(packagePrefix.length);
+        if (!relative) continue;
+        const target = path.resolve(destination, relative);
+        if (!target.startsWith(`${path.resolve(destination)}${path.sep}`)) {
+            throw new Error(`Unsafe archive path '${entryName}'.`);
+        }
+        mkdirSync(path.dirname(target), { recursive: true });
+        writeFileSync(target, content);
+    }
+}
+
+/** Runs `yarn pack` for `packageDir`, writing the tarball into `scratchRoot`. Returns its path and parsed entries. */
+export function packArtifact(packageDir, scratchRoot) {
+    const tgzPath = path.join(scratchRoot, 'cratis-components.tgz');
+    const result = spawnSync('yarn', ['pack', '--out', tgzPath], {
+        cwd: packageDir,
+        encoding: 'utf8',
+        timeout: 180_000,
+    });
+    if (result.status !== 0) {
+        throw new Error(`\`yarn pack\` failed:\n${result.stderr || result.stdout}`);
+    }
+    if (!existsSync(tgzPath))
+        throw new Error(`\`yarn pack\` did not produce ${tgzPath}.`);
+    return { tgzPath, entries: readTarEntries(tgzPath) };
+}
+
+const linkInstalledEntry = (source, destination, directoryEntry) => {
+    if (process.platform === 'win32') {
+        if (directoryEntry.isFile()) copyFileSync(source, destination);
+        else symlinkSync(realpathSync(source), destination, 'junction');
+        return;
+    }
+    symlinkSync(source, destination, directoryEntry.isDirectory() ? 'dir' : 'file');
+};
+
+/**
+ * Builds a scratch `node_modules` for a consumer fixture: the packed artifact extracted
+ * for real under `@cratis/components`, every other already-installed monorepo dependency
+ * borrowed by symlink (no network), and `excludeTopLevel`/`excludeScoped` entries omitted
+ * entirely so their absence is a genuine `ERR_MODULE_NOT_FOUND`, not a symlink nobody
+ * imports.
+ *
+ * @param monorepoRoot Absolute path to the Yarn workspace root (its `node_modules` is the donor).
+ * @param scratchRoot Absolute path to this fixture's scratch directory.
+ * @param packedEntries The `Map` returned by {@link packArtifact}'s `entries`.
+ * @param excludeTopLevel Top-level `node_modules/<name>` entries to omit (e.g. `pixi.js`).
+ * @param excludeScoped Map of scope name (e.g. `@pixi`, `@webgpu`) to `true` to omit the whole scope.
+ * @returns The scratch `node_modules` path and the real (non-symlinked) packed-components directory.
+ */
+export function buildScratchNodeModules({
+    monorepoRoot,
+    scratchRoot,
+    packedEntries,
+    excludeTopLevel = new Set(),
+    excludeScoped = new Set(),
+}) {
+    const scratchNodeModules = path.join(scratchRoot, 'node_modules');
+    mkdirSync(scratchNodeModules, { recursive: true });
+
+    const rootNodeModules = path.join(monorepoRoot, 'node_modules');
+    if (!existsSync(rootNodeModules)) {
+        throw new Error(
+            `${rootNodeModules} does not exist. Run \`yarn install\` at the repo root first.`,
+        );
+    }
+
+    for (const entry of readdirSync(rootNodeModules, { withFileTypes: true })) {
+        if (entry.name === '@cratis' || entry.name === '.bin') continue;
+        if (entry.name.startsWith('@') && excludeScoped.has(entry.name)) continue;
+        if (excludeTopLevel.has(entry.name)) continue;
+        linkInstalledEntry(
+            path.join(rootNodeModules, entry.name),
+            path.join(scratchNodeModules, entry.name),
+            entry,
+        );
+    }
+
+    const scratchCratisScope = path.join(scratchNodeModules, '@cratis');
+    mkdirSync(scratchCratisScope, { recursive: true });
+    const rootCratisScope = path.join(rootNodeModules, '@cratis');
+    for (const entry of readdirSync(rootCratisScope, { withFileTypes: true })) {
+        if (entry.name === 'components') continue; // overridden below with the packed artifact.
+        linkInstalledEntry(
+            path.join(rootCratisScope, entry.name),
+            path.join(scratchCratisScope, entry.name),
+            entry,
+        );
+    }
+
+    const packedComponentsDir = path.join(scratchCratisScope, 'components');
+    mkdirSync(packedComponentsDir, { recursive: true });
+    extractPackedArtifact(packedEntries, packedComponentsDir);
+
+    return { scratchNodeModules, packedComponentsDir };
+}
diff --git a/Source/scripts/verify-no-pixi-consumer.mjs b/Source/scripts/verify-no-pixi-consumer.mjs
new file mode 100644
index 00000000..2ac6f584
--- /dev/null
+++ b/Source/scripts/verify-no-pixi-consumer.mjs
@@ -0,0 +1,360 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+/*
+ * Packed, no-Pixi consumer verification for the setup-only root architecture
+ * (Cratis/Components root architecture). Proves that a consumer who installs only the
+ * *mandatory* peers - never `pixi.js` - can fully use the package root and every
+ * non-spatial subpath (everything except `./Canvas` and `./PivotViewer`).
+ *
+ * Unlike `verify-public-types.mjs`, which symlinks the whole monorepo `node_modules`
+ * (including the `pixi.js` devDependency) into its scratch consumer, this script
+ * deliberately BUILDS A NODE_MODULES WITHOUT `pixi.js`, `@pixi/*`, or `@webgpu/*` -
+ * so "pixi is absent" is a real `ERR_MODULE_NOT_FOUND`/module-resolution failure, not
+ * an assumption. What is checked against that scratch consumer:
+ *
+ *   1. Runtime: every non-spatial subpath (root included) imports cleanly in an
+ *      isolated Node ESM child process; `pixi.js` itself fails to resolve.
+ *   2. Type-checking: a strict (`skipLibCheck: false`) Bundler *and* NodeNext
+ *      TypeScript 6 project for the ROOT subpath compiles clean with `pixi.js` absent
+ *      from `node_modules` - proving the root's declarations never require Pixi's
+ *      ambient types to resolve.
+ *   3. SSR smoke: `CratisComponentsProvider` (root) renders through `react-dom/server`
+ *      with no DOM present, proving the provider itself has no browser-only
+ *      dependency at module scope.
+ *   4. Module-graph closure: the packed artifact's OWN `dist/esm/index.js` and
+ *      `dist/esm/index.d.ts` - re-read from this run's extracted `.tgz`, not the
+ *      monorepo build - are walked with the shared closure walker
+ *      (`scripts/lib/dependency-graph.mjs`) and asserted to never reach a file under
+ *      `Canvas/`/`PivotViewer/` nor the external specifier `pixi.js`.
+ *
+ * Usage:  node scripts/verify-no-pixi-consumer.mjs [--keep-fixture]
+ * Exits non-zero on any check failure.
+ */
+
+import { spawnSync } from 'node:child_process';
+import { createRequire } from 'node:module';
+import {
+    existsSync,
+    mkdirSync,
+    mkdtempSync,
+    readFileSync,
+    realpathSync,
+    rmSync,
+    writeFileSync,
+} from 'node:fs';
+import { tmpdir } from 'node:os';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { buildScratchNodeModules, packArtifact } from './lib/packed-artifact.mjs';
+import {
+    closureOf,
+    closureTouchesSpatialDirectory,
+    isPixiSpecifier,
+} from './lib/dependency-graph.mjs';
+
+const packageDir = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const monorepoRoot = path.resolve(packageDir, '..');
+
+const args = process.argv.slice(2);
+const keepFixture = args.includes('--keep-fixture');
+
+const failures = [];
+const fail = (label, detail) => {
+    failures.push({ label, detail });
+    console.error(`  FAIL - ${label}`);
+    if (detail) console.error(`    ${detail}`);
+};
+const pass = (label) => console.log(`  ok   - ${label}`);
+
+const pkg = JSON.parse(readFileSync(path.join(packageDir, 'package.json'), 'utf8'));
+
+const esmRoot = path.join(packageDir, path.dirname(pkg.module ?? 'dist/esm/index.js'));
+if (!existsSync(esmRoot)) {
+    console.error(
+        `Built output not found at ${esmRoot}. Run the publish build first: ` +
+            '`yarn workspace @cratis/components run prepare`.',
+    );
+    process.exit(1);
+}
+
+/** Mandatory peers only - `pixi.js` is intentionally never installed by this fixture. */
+const MANDATORY_PEERS = [
+    '@cratis/arc',
+    '@cratis/arc.react',
+    '@cratis/fundamentals',
+    'react',
+    'react-dom',
+    'reflect-metadata',
+    'tsyringe',
+];
+for (const peer of Object.keys(pkg.peerDependencies ?? {})) {
+    if (peer !== 'pixi.js' && !MANDATORY_PEERS.includes(peer)) {
+        console.error(
+            `peerDependencies now declares '${peer}', which verify-no-pixi-consumer.mjs does not ` +
+                'know is mandatory or optional. Update MANDATORY_PEERS (or the optional-peer list) ' +
+                'in this script before trusting its result.',
+        );
+        process.exit(1);
+    }
+}
+
+const isAsset = (target) => typeof target === 'string' && /\.(css|json)$/u.test(target);
+const nonSpatialSubpaths = Object.entries(pkg.exports ?? {})
+    .filter(([subpath]) => subpath !== './package.json')
+    .filter(([subpath]) => subpath !== './Canvas' && subpath !== './PivotViewer')
+    .filter(([, value]) => value && typeof value === 'object')
+    .filter(([, value]) => !isAsset(value.import) && !isAsset(value.types))
+    .filter(
+        ([, value]) =>
+            typeof value.types === 'string' && typeof value.import === 'string',
+    )
+    .map(([subpath, value]) => ({
+        subpath,
+        specifier:
+            subpath === '.' ? pkg.name : `${pkg.name}/${subpath.replace(/^\.\//, '')}`,
+        declarationRelPath: value.types.replace(/^\.\//, ''),
+    }));
+
+console.log(`\nverify-no-pixi-consumer: ${pkg.name}@${pkg.version}`);
+console.log(
+    `Non-spatial subpaths under test: ${nonSpatialSubpaths.map((s) => s.subpath).join(', ')}\n`,
+);
+
+// --- 1. Pack, and build a node_modules that genuinely has no pixi.js ---------------------------
+
+const scratchRoot = realpathSync(
+    mkdtempSync(path.join(tmpdir(), 'cratis-components-no-pixi-')),
+);
+let removed = false;
+const cleanup = () => {
+    if (keepFixture || removed) return;
+    removed = true;
+    rmSync(scratchRoot, { recursive: true, force: true });
+};
+process.once('exit', cleanup);
+
+console.log(`Packing ${pkg.name}@${pkg.version} ...`);
+const { entries: packedEntries } = packArtifact(packageDir, scratchRoot);
+
+const { packedComponentsDir } = buildScratchNodeModules({
+    monorepoRoot,
+    scratchRoot,
+    packedEntries,
+    excludeTopLevel: new Set(['pixi.js']),
+    excludeScoped: new Set(['@pixi', '@webgpu']),
+});
+
+writeFileSync(
+    path.join(scratchRoot, 'package.json'),
+    JSON.stringify({ private: true, type: 'module' }, null, 4),
+);
+
+// --- 2. Prove pixi.js is genuinely absent -------------------------------------------------------
+
+const resolveProbe = spawnSync(
+    process.execPath,
+    [
+        '--input-type',
+        'module',
+        '--eval',
+        "try { import.meta.resolve('pixi.js'); console.log('RESOLVED'); } catch (e) { console.log('ERR ' + (e && e.code)); }",
+    ],
+    { cwd: scratchRoot, encoding: 'utf8', timeout: 30_000 },
+);
+const probeOut = (resolveProbe.stdout ?? '').trim();
+if (
+    probeOut.startsWith('ERR ERR_MODULE_NOT_FOUND') ||
+    probeOut.startsWith('ERR ERR_PACKAGE_PATH_NOT_EXPORTED')
+) {
+    pass(`pixi.js is absent from the consumer node_modules (${probeOut})`);
+} else {
+    fail(
+        'pixi.js must be absent from the no-pixi consumer',
+        `import.meta.resolve('pixi.js') reported: ${probeOut || resolveProbe.stderr}`,
+    );
+}
+
+// --- 3. Runtime: every non-spatial subpath imports cleanly with no pixi installed ----------------
+
+for (const { subpath, specifier } of nonSpatialSubpaths) {
+    const script = `await import(${JSON.stringify(specifier)}); console.log('LOADED');`;
+    const result = spawnSync(
+        process.execPath,
+        ['--input-type', 'module', '--eval', script],
+        {
+            cwd: scratchRoot,
+            encoding: 'utf8',
+            timeout: 60_000,
+        },
+    );
+    if (result.status === 0 && (result.stdout ?? '').includes('LOADED')) {
+        pass(`${subpath} imports without pixi.js installed`);
+    } else {
+        fail(
+            `${subpath} must import without pixi.js installed`,
+            (result.stderr ?? '').slice(0, 500),
+        );
+    }
+}
+
+// --- 4. Strict TypeScript (Bundler + NodeNext) for the root, with pixi.js absent -----------------
+
+const require = createRequire(import.meta.url);
+let tscBin;
+try {
+    tscBin = require.resolve('typescript/bin/tsc', { paths: [monorepoRoot] });
+} catch {
+    fail('TypeScript compiler not found', 'Run `yarn install` at the repo root.');
+    tscBin = undefined;
+}
+
+if (tscBin) {
+    const modes = ['bundler', 'nodenext'];
+    for (const mode of modes) {
+        const fixtureDir = path.join(scratchRoot, `types-root-${mode}`);
+        mkdirSync(fixtureDir, { recursive: true });
+        const consumerFile = mode === 'nodenext' ? 'consumer.mts' : 'consumer.ts';
+        writeFileSync(
+            path.join(fixtureDir, consumerFile),
+            `import { CratisComponentsProvider, useCratisComponentsConfig, cratisDefaults, mergeCratisComponentsConfig } from '${pkg.name}';\n` +
+                'export const consume = () => {\n' +
+                '    const config = useCratisComponentsConfig();\n' +
+                '    void CratisComponentsProvider;\n' +
+                '    void cratisDefaults;\n' +
+                '    void mergeCratisComponentsConfig(config);\n' +
+                '    return config;\n' +
+                '};\n',
+        );
+        writeFileSync(
+            path.join(fixtureDir, 'tsconfig.json'),
+            JSON.stringify(
+                {
+                    compilerOptions: {
+                        target: 'ES2022',
+                        module: mode === 'nodenext' ? 'NodeNext' : 'ES2022',
+                        moduleResolution: mode === 'nodenext' ? 'NodeNext' : 'bundler',
+                        strict: true,
+                        skipLibCheck: false,
+                        noEmit: true,
+                        jsx: 'react-jsx',
+                        esModuleInterop: true,
+                        lib: ['ESNext', 'DOM', 'DOM.Iterable'],
+                    },
+                    include: [consumerFile],
+                },
+                null,
+                4,
+            ),
+        );
+        if (mode === 'nodenext') {
+            writeFileSync(
+                path.join(fixtureDir, 'package.json'),
+                JSON.stringify({ private: true, type: 'module' }, null, 4),
+            );
+        }
+        const run = spawnSync(
+            process.execPath,
+            [tscBin, '-p', 'tsconfig.json', '--noEmit'],
+            {
+                cwd: fixtureDir,
+                encoding: 'utf8',
+                timeout: 60_000,
+            },
+        );
+        if (run.status === 0) {
+            pass(`root type-checks under strict ${mode} with pixi.js absent`);
+        } else {
+            fail(
+                `root must type-check under strict ${mode} with pixi.js absent`,
+                (run.stdout || run.stderr || '').slice(0, 800),
+            );
+        }
+    }
+}
+
+// --- 5. SSR/provider smoke - no DOM present -------------------------------------------------------
+
+const ssrScript = `
+import { renderToStaticMarkup } from 'react-dom/server';
+import { createElement } from 'react';
+import { CratisComponentsProvider } from '${pkg.name}';
+const markup = renderToStaticMarkup(
+    createElement(CratisComponentsProvider, { value: { locale: 'en-US' } }, createElement('div', { 'data-ssr-smoke': true }, 'ok')),
+);
+if (!markup.includes('data-ssr-smoke') || !markup.includes('>ok<')) {
+    throw new Error('SSR markup did not contain the expected child content: ' + markup);
+}
+console.log('SSR_OK');
+`;
+const ssrResult = spawnSync(
+    process.execPath,
+    ['--input-type', 'module', '--eval', ssrScript],
+    {
+        cwd: scratchRoot,
+        encoding: 'utf8',
+        timeout: 30_000,
+    },
+);
+if (ssrResult.status === 0 && (ssrResult.stdout ?? '').includes('SSR_OK')) {
+    pass(
+        'CratisComponentsProvider renders under Node SSR (react-dom/server) with no DOM present',
+    );
+} else {
+    fail(
+        'CratisComponentsProvider must render under Node SSR',
+        (ssrResult.stderr ?? '').slice(0, 500),
+    );
+}
+
+// --- 6. Root's own packed closure has no Canvas/PivotViewer/pixi edge ----------------------------
+
+const packedEsmRoot = path.join(
+    packedComponentsDir,
+    path.dirname(pkg.module ?? 'dist/esm/index.js'),
+);
+const rootJsEntry = path.join(packedComponentsDir, 'dist/esm/index.js');
+const rootDtsEntry = path.join(packedComponentsDir, 'dist/esm/index.d.ts');
+const jsClosure = closureOf(rootJsEntry, packedEsmRoot);
+const dtsClosure = closureOf(rootDtsEntry, packedEsmRoot);
+
+const closureProblems = [];
+if (closureTouchesSpatialDirectory(jsClosure.files))
+    closureProblems.push('runtime closure reaches Canvas/ or PivotViewer/');
+if (closureTouchesSpatialDirectory(dtsClosure.files))
+    closureProblems.push('declaration closure reaches Canvas/ or PivotViewer/');
+if (jsClosure.external.some(isPixiSpecifier))
+    closureProblems.push('runtime closure reaches pixi.js');
+if (dtsClosure.external.some(isPixiSpecifier))
+    closureProblems.push('declaration closure reaches pixi.js');
+
+if (closureProblems.length === 0) {
+    pass(
+        "the packed artifact's root JS/declaration closure has no Canvas/PivotViewer/pixi edge",
+    );
+} else {
+    fail(
+        'the packed root closure must have no Canvas/PivotViewer/pixi edge',
+        closureProblems.join('; '),
+    );
+}
+
+// --- Report ----------------------------------------------------------------------------------
+
+console.log('');
+if (keepFixture) {
+    console.log(`--keep-fixture: scratch consumer retained at ${scratchRoot}`);
+} else {
+    cleanup();
+}
+
+if (failures.length > 0) {
+    console.error(`${failures.length} no-pixi consumer check(s) failed.`);
+    process.exit(1);
+}
+
+console.log(
+    `All no-pixi consumer checks passed: mandatory peers only, pixi.js genuinely absent, ` +
+        `${nonSpatialSubpaths.length} non-spatial subpath(s) load, strict Bundler+NodeNext root ` +
+        'type-checks, SSR smoke passes, and the packed root closure is clean.',
+);
diff --git a/Source/scripts/verify-package-graph.mjs b/Source/scripts/verify-package-graph.mjs
new file mode 100644
index 00000000..3230d446
--- /dev/null
+++ b/Source/scripts/verify-package-graph.mjs
@@ -0,0 +1,240 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+/*
+ * Deterministic dependency-closure check for the setup-only root architecture
+ * (Cratis/Components root architecture). Walks the *built* `dist/esm` module graph -
+ * relative `import`/`export … from`/dynamic-import/`import type(...)` specifiers,
+ * followed transitively - starting from every JavaScript subpath declared in
+ * `Source/package.json`'s `exports` map, using the shared walker in
+ * `scripts/lib/dependency-graph.mjs`.
+ *
+ * Two module boundaries are asserted, independent of any one subpath's current
+ * behavior:
+ *
+ *   1. Every *non-spatial* subpath (every subpath except `./Canvas` and
+ *      `./PivotViewer`) must never reach a file under `Canvas/` or `PivotViewer/`,
+ *      and must never reach the external specifier `pixi.js` (or a `pixi.js/*`
+ *      subpath), in either its `.js` (runtime) or `.d.ts` (declaration) closure.
+ *   2. `pixi.js` must never be imported by any emitted file outside `Canvas/` or
+ *      `PivotViewer/` - checked directly against every emitted `.js`/`.d.ts` file's
+ *      *own* specifiers (not just the closures reachable from a public subpath), so
+ *      an internal-only file could not quietly reintroduce a Pixi edge without being
+ *      reachable from any `exports` entry.
+ *
+ * `./Canvas` and `./PivotViewer` are additionally asserted to actually reach
+ * `pixi.js` - a subpath that stopped needing Pixi should have its optional peer
+ * requirement removed, not silently keep it undetected.
+ *
+ * Usage:  node scripts/verify-package-graph.mjs [--report <path>]
+ * Exits non-zero on any boundary violation. `--report` writes a machine-readable
+ * module-graph metafile: every subpath's closure (files + external specifiers) plus
+ * the pass/fail outcome of each assertion.
+ */
+
+import { existsSync, readdirSync, readFileSync, writeFileSync } from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import {
+    closureOf,
+    closureTouchesSpatialDirectory,
+    isPixiSpecifier,
+} from './lib/dependency-graph.mjs';
+
+const packageDir = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+
+const args = process.argv.slice(2);
+const reportIndex = args.indexOf('--report');
+const reportPath = reportIndex >= 0 ? path.resolve(args[reportIndex + 1]) : undefined;
+
+const fail = (message) => {
+    console.error(`\nverify-package-graph: ${message}`);
+    process.exit(1);
+};
+
+const readJson = (file) => JSON.parse(readFileSyncOrFail(file));
+function readFileSyncOrFail(file) {
+    try {
+        return readFileSync(file, 'utf8');
+    } catch (error) {
+        fail(
+            `Could not read ${file}: ${error instanceof Error ? error.message : String(error)}`,
+        );
+        return '';
+    }
+}
+
+const pkg = readJson(path.join(packageDir, 'package.json'));
+
+const esmRoot = path.join(packageDir, path.dirname(pkg.module ?? 'dist/esm/index.js'));
+if (!existsSync(esmRoot)) {
+    fail(
+        `Built output not found at ${esmRoot}. Run the publish build first: ` +
+            '`yarn workspace @cratis/components run prepare`.',
+    );
+}
+
+/** JS subpaths declared in `exports`, excluding the manifest and CSS/JSON assets. */
+const isAsset = (target) => typeof target === 'string' && /\.(css|json)$/u.test(target);
+const jsSubpaths = Object.entries(pkg.exports ?? {})
+    .filter(([subpath]) => subpath !== './package.json')
+    .filter(([, value]) => value && typeof value === 'object')
+    .filter(([, value]) => !isAsset(value.import) && !isAsset(value.types))
+    .filter(
+        ([, value]) =>
+            typeof value.types === 'string' && typeof value.import === 'string',
+    )
+    .map(([subpath, value]) => ({
+        subpath,
+        jsEntry: path.join(packageDir, value.import.replace(/^\.\//, '')),
+        dtsEntry: path.join(packageDir, value.types.replace(/^\.\//, '')),
+    }));
+
+if (jsSubpaths.length === 0)
+    fail('No JavaScript subpaths found in `exports` - nothing to verify.');
+
+const SPATIAL_SUBPATHS = new Set(['./Canvas', './PivotViewer']);
+
+/** Every emitted `.js`/`.d.ts` file under `dist/esm`, for the project-wide direct-import scan. */
+function emittedFiles(directory, found = []) {
+    for (const entry of readdirSync(directory, { withFileTypes: true })) {
+        const file = path.join(directory, entry.name);
+        if (entry.isDirectory()) emittedFiles(file, found);
+        else if (file.endsWith('.js') || file.endsWith('.d.ts')) found.push(file);
+    }
+    return found;
+}
+
+const violations = [];
+const subpathReports = [];
+
+for (const { subpath, jsEntry, dtsEntry } of jsSubpaths) {
+    const isSpatial = SPATIAL_SUBPATHS.has(subpath);
+    const jsClosure = existsSync(jsEntry)
+        ? closureOf(jsEntry, esmRoot)
+        : { files: [], external: [] };
+    const dtsClosure = existsSync(dtsEntry)
+        ? closureOf(dtsEntry, esmRoot)
+        : { files: [], external: [] };
+
+    const reachesPixi = (closure) => closure.external.some(isPixiSpecifier);
+    const touchesSpatialDir = (closure) => closureTouchesSpatialDirectory(closure.files);
+
+    if (isSpatial) {
+        if (!reachesPixi(jsClosure) && !reachesPixi(dtsClosure)) {
+            violations.push(
+                `${subpath}: is a spatial subpath but its closure never reaches 'pixi.js' - ` +
+                    'remove the optional Pixi peer requirement for this subpath if it truly no longer needs it.',
+            );
+        }
+    } else {
+        if (touchesSpatialDir(jsClosure)) {
+            violations.push(
+                `${subpath}: runtime closure reaches a file under Canvas/ or PivotViewer/ ` +
+                    '(non-spatial subpaths must never have a spatial edge).',
+            );
+        }
+        if (touchesSpatialDir(dtsClosure)) {
+            violations.push(
+                `${subpath}: declaration closure reaches a file under Canvas/ or PivotViewer/ ` +
+                    '(non-spatial subpaths must never have a spatial edge).',
+            );
+        }
+        if (reachesPixi(jsClosure)) {
+            violations.push(
+                `${subpath}: runtime closure reaches 'pixi.js' but is not a spatial subpath.`,
+            );
+        }
+        if (reachesPixi(dtsClosure)) {
+            violations.push(
+                `${subpath}: declaration closure reaches 'pixi.js' but is not a spatial subpath.`,
+            );
+        }
+    }
+
+    subpathReports.push({
+        subpath,
+        spatial: isSpatial,
+        runtime: jsClosure,
+        declarations: dtsClosure,
+    });
+}
+
+// Project-wide direct-import scan: pixi.js may only ever be imported by a file that
+// itself lives under Canvas/ or PivotViewer/, regardless of exports-map reachability.
+const allEmitted = emittedFiles(esmRoot);
+const directPixiImporters = [];
+{
+    const { moduleSpecifiers } = await import('./lib/dependency-graph.mjs');
+    const ts = (await import('typescript')).default;
+    const { readFileSync } = await import('node:fs');
+    for (const file of allEmitted) {
+        const relative = path.relative(esmRoot, file).split(path.sep).join('/');
+        if (relative.startsWith('Canvas/') || relative.startsWith('PivotViewer/'))
+            continue;
+        const source = readFileSync(file, 'utf8');
+        const sourceFile = ts.createSourceFile(
+            file,
+            source,
+            ts.ScriptTarget.Latest,
+            true,
+            file.endsWith('.d.ts') ? ts.ScriptKind.TS : ts.ScriptKind.JS,
+        );
+        const specifiers = moduleSpecifiers(sourceFile);
+        if (specifiers.some(isPixiSpecifier)) {
+            directPixiImporters.push(relative);
+        }
+    }
+}
+
+if (directPixiImporters.length > 0) {
+    violations.push(
+        `'pixi.js' is imported directly by file(s) outside Canvas/ and PivotViewer/: ` +
+            directPixiImporters.join(', '),
+    );
+}
+
+console.log(`\nverify-package-graph: ${pkg.name}@${pkg.version}`);
+console.log(`Built ESM: ${path.relative(packageDir, esmRoot)}\n`);
+
+const subpathWidth = Math.max(8, ...subpathReports.map((row) => row.subpath.length));
+console.log(`${'SUBPATH'.padEnd(subpathWidth)}  SPATIAL  PIXI EDGE`);
+console.log('-'.repeat(subpathWidth + 24));
+for (const row of subpathReports) {
+    const reachesPixi =
+        row.runtime.external.some(isPixiSpecifier) ||
+        row.declarations.external.some(isPixiSpecifier);
+    console.log(
+        `${row.subpath.padEnd(subpathWidth)}  ${(row.spatial ? 'yes' : 'no').padEnd(7)}  ${reachesPixi ? 'yes' : 'no'}`,
+    );
+}
+
+if (reportPath) {
+    writeFileSync(
+        reportPath,
+        JSON.stringify(
+            {
+                package: pkg.name,
+                version: pkg.version,
+                spatialSubpaths: [...SPATIAL_SUBPATHS],
+                subpaths: subpathReports,
+                directPixiImportersOutsideSpatialSubpaths: directPixiImporters,
+                violations,
+            },
+            null,
+            4,
+        ),
+    );
+    console.log(`\nModule-graph metafile written to ${reportPath}`);
+}
+
+if (violations.length > 0) {
+    console.error(`\n${violations.length} module-graph boundary violation(s):\n`);
+    for (const violation of violations) console.error(`  - ${violation}`);
+    process.exit(1);
+}
+
+console.log(
+    `\nAll ${subpathReports.length} subpath(s) respect the spatial/non-spatial module-graph boundary; ` +
+        `'pixi.js' is reachable only from Canvas/ and PivotViewer/.`,
+);
diff --git a/Source/scripts/verify-provider-context-identity.mjs b/Source/scripts/verify-provider-context-identity.mjs
new file mode 100644
index 00000000..3bdfb31c
--- /dev/null
+++ b/Source/scripts/verify-provider-context-identity.mjs
@@ -0,0 +1,269 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+/*
+ * Provider-context identity verification for the setup-only root architecture
+ * (Cratis/Components root architecture).
+ *
+ * The root barrel (`@cratis/components`) and every subpath (`@cratis/components/Dialogs`,
+ * `/Dropdown`, `/DataTables`, `/Notifications`, `/TimeMachine`, ...) are now separate
+ * Rollup entry points, each emitted with `preserveModules` into its own `dist/esm/<Subpath>`
+ * tree (see `rollup.config.mjs`'s `entryPointsFromExports`). That is a real risk this
+ * script exists to rule out: if the shared `CratisComponentsContext` (custom labels) or
+ * `react-aria-components`' `I18nProvider` locale context were ever duplicated across
+ * entry points instead of staying one singleton module, a consumer mounting
+ * `CratisComponentsProvider` from the root and a component from a subpath would silently
+ * fail to share configuration - each subpath's `useCratisComponentsConfig()` would read
+ * its own defaults instead of the root's live value.
+ *
+ * This runs against the *packed* artifact (via package specifiers resolved through a
+ * scratch `node_modules`, exactly like `verify-no-pixi-consumer.mjs`), not source, because
+ * source-level relative imports trivially share one module graph regardless of how the
+ * published entry points are structured - only the built/packed boundary can actually
+ * exercise this risk.
+ *
+ * One `CratisComponentsProvider` (imported from the package root) wraps a `Dialog`
+ * (`./Dialogs`), a `Dropdown` (`./Dropdown`), a `DataTableCore` (`./DataTables`), a
+ * `Toaster` (`./Notifications`), and a `TimeMachine` (`./TimeMachine`) - five separately
+ * bundled subpath modules - with sentinel `messages` and a non-English `locale`. Every
+ * rendered label is asserted to be the sentinel/locale-formatted value, never the English
+ * default, proving the same context instances actually reach all five subpaths.
+ *
+ * Usage:  node scripts/verify-provider-context-identity.mjs [--keep-fixture]
+ * Exits non-zero if any subpath fails to reflect the root provider's configuration.
+ */
+
+import { spawnSync } from 'node:child_process';
+import {
+    existsSync,
+    mkdtempSync,
+    readFileSync,
+    realpathSync,
+    rmSync,
+    writeFileSync,
+} from 'node:fs';
+import { tmpdir } from 'node:os';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { buildScratchNodeModules, packArtifact } from './lib/packed-artifact.mjs';
+
+const packageDir = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const monorepoRoot = path.resolve(packageDir, '..');
+
+const args = process.argv.slice(2);
+const keepFixture = args.includes('--keep-fixture');
+
+const pkg = JSON.parse(readFileSync(path.join(packageDir, 'package.json'), 'utf8'));
+
+const esmRoot = path.join(packageDir, path.dirname(pkg.module ?? 'dist/esm/index.js'));
+if (!existsSync(esmRoot)) {
+    console.error(
+        `Built output not found at ${esmRoot}. Run the publish build first: ` +
+            '`yarn workspace @cratis/components run prepare`.',
+    );
+    process.exit(1);
+}
+
+console.log(`\nverify-provider-context-identity: ${pkg.name}@${pkg.version}\n`);
+
+const scratchRoot = realpathSync(
+    mkdtempSync(path.join(tmpdir(), 'cratis-components-identity-')),
+);
+let removed = false;
+const cleanup = () => {
+    if (keepFixture || removed) return;
+    removed = true;
+    rmSync(scratchRoot, { recursive: true, force: true });
+};
+process.once('exit', cleanup);
+
+console.log(`Packing ${pkg.name}@${pkg.version} ...`);
+const { entries: packedEntries } = packArtifact(packageDir, scratchRoot);
+
+// Every subpath exercised here (Dialogs, Dropdown, DataTables, Notifications, TimeMachine) is
+// non-spatial, so pixi.js is withheld the same way verify-no-pixi-consumer.mjs does - this
+// fixture only needs the mandatory peers.
+buildScratchNodeModules({
+    monorepoRoot,
+    scratchRoot,
+    packedEntries,
+    excludeTopLevel: new Set(['pixi.js']),
+    excludeScoped: new Set(['@pixi', '@webgpu']),
+});
+
+writeFileSync(
+    path.join(scratchRoot, 'package.json'),
+    JSON.stringify({ private: true, type: 'module' }, null, 4),
+);
+
+// The identity probe itself runs as its own ESM entry file (rather than an --eval string) so it
+// can use top-level await comfortably and stay readable.
+const probeFile = path.join(scratchRoot, 'identity-probe.mjs');
+writeFileSync(probeFile, buildProbeSource(pkg.name));
+
+const result = spawnSync(process.execPath, [probeFile], {
+    cwd: scratchRoot,
+    encoding: 'utf8',
+    timeout: 60_000,
+});
+
+console.log(result.stdout ?? '');
+if (result.stderr) console.error(result.stderr);
+
+if (keepFixture) {
+    console.log(`--keep-fixture: scratch consumer retained at ${scratchRoot}`);
+} else {
+    cleanup();
+}
+
+if (result.status !== 0) {
+    console.error('\nProvider-context identity check FAILED.');
+    process.exit(1);
+}
+
+console.log(
+    '\nRoot provider configuration (messages + locale) reaches Dialog, Dropdown, DataTable, ' +
+        'Toaster, and TimeMachine, each imported from its own separately built subpath.',
+);
+
+/** Builds the child probe's source: jsdom setup, a composed render, and label assertions. */
+function buildProbeSource(packageName) {
+    return `
+import { JSDOM } from 'jsdom';
+
+// pretendToBeVisual gives jsdom a real requestAnimationFrame/cancelAnimationFrame (used by
+// React Aria's FocusScope and press interactions) instead of leaving them undefined.
+const dom = new JSDOM('<!doctype html><html><body></body></html>', {
+    url: 'http://localhost/',
+    pretendToBeVisual: true,
+});
+const { window: jsdomWindow } = dom;
+
+// Copy every own property of jsdom's window onto globalThis (not a fixed short list) - React
+// Aria's interaction/focus/press internals reach for SVGElement, getComputedStyle, MutationObserver,
+// CustomEvent, PointerEvent, DOMRect, and more; a fixed allowlist silently under-polyfills whichever
+// of those a given interaction happens to need. Node 21+ already defines some of these (navigator,
+// performance, ...) as getter-only globals, so this redefines rather than assigns.
+for (const key of Object.getOwnPropertyNames(jsdomWindow)) {
+    if (key === 'window' || key === 'globalThis' || key === 'self' || key === 'top' || key === 'parent') continue;
+    try {
+        Object.defineProperty(globalThis, key, {
+            value: jsdomWindow[key],
+            configurable: true,
+            writable: true,
+            enumerable: true,
+        });
+    } catch {
+        // Non-configurable on this Node version - leave the existing global as-is.
+    }
+}
+globalThis.window = jsdomWindow;
+globalThis.document = jsdomWindow.document;
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+globalThis.ResizeObserver ??= class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+};
+
+const React = await import('react');
+const { createElement: h, act } = React;
+const { createRoot } = await import('react-dom/client');
+const { CratisComponentsProvider } = await import(${JSON.stringify(packageName)});
+const { Dialog } = await import(${JSON.stringify(packageName)} + '/Dialogs');
+const { DialogButtons } = await import('@cratis/arc.react/dialogs');
+const { Dropdown } = await import(${JSON.stringify(packageName)} + '/Dropdown');
+const { DataTableCore, Column } = await import(${JSON.stringify(packageName)} + '/DataTables');
+const { Toaster } = await import(${JSON.stringify(packageName)} + '/Notifications');
+const { TimeMachine } = await import(${JSON.stringify(packageName)} + '/TimeMachine');
+
+const sentinelMessages = {
+    dialog: { ok: 'IDENTITY-ok', cancel: 'IDENTITY-cancel' },
+    dropdown: { showOptions: 'IDENTITY-show-options', clearSelection: 'IDENTITY-clear-selection' },
+    dataTable: { search: 'IDENTITY-search', searchAriaLabel: 'IDENTITY-search-aria', selectRow: 'IDENTITY-select-row' },
+    notifications: { region: 'IDENTITY-region', dismiss: 'IDENTITY-dismiss' },
+};
+const LOCALE = 'nb-NO';
+const versionTimestamp = new Date(Date.UTC(2024, 0, 15, 10, 30));
+const nbFormatted = new Intl.DateTimeFormat(LOCALE, { month: 'short', day: 'numeric', year: 'numeric' }).format(versionTimestamp);
+const enFormatted = new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric', year: 'numeric' }).format(versionTimestamp);
+
+const container = document.createElement('div');
+document.body.append(container);
+const root = createRoot(container);
+
+await act(async () => {
+    root.render(
+        h(
+            CratisComponentsProvider,
+            { value: { locale: LOCALE, messages: sentinelMessages }, toaster: true },
+            h(Dialog, { title: 'Identity dialog', buttons: DialogButtons.OkCancel }, 'Body'),
+            h(Dropdown, { value: 'a', options: [{ label: 'A', value: 'a' }], showClear: true }),
+            h(
+                DataTableCore,
+                { data: [{ id: '1', name: 'Row' }], dataKey: 'id', emptyMessage: 'No rows', globalFilterFields: ['name'] },
+                h(Column, { field: 'name', header: 'Name' }),
+            ),
+            h(TimeMachine, {
+                versions: [{ id: 'v1', timestamp: versionTimestamp, label: 'v1', content: h('div', null, 'v1') }],
+            }),
+        ),
+    );
+});
+
+const failures = [];
+const check = (label, actual, expected) => {
+    if (actual === expected) {
+        console.log('  ok   - ' + label);
+    } else {
+        failures.push(label);
+        console.error('  FAIL - ' + label + ' (expected ' + JSON.stringify(expected) + ', got ' + JSON.stringify(actual) + ')');
+    }
+};
+const contains = (label, haystack, needle) => {
+    if (typeof haystack === 'string' && haystack.includes(needle)) {
+        console.log('  ok   - ' + label);
+    } else {
+        failures.push(label);
+        console.error('  FAIL - ' + label + ' (expected to find ' + JSON.stringify(needle) + ' in ' + JSON.stringify(haystack) + ')');
+    }
+};
+
+const okButton = Array.from(document.querySelectorAll('button')).find((b) => b.textContent === 'IDENTITY-ok');
+check('Dialog (./Dialogs) resolves the root provider\\'s Ok label', okButton?.textContent, 'IDENTITY-ok');
+
+const dropdownTrigger = container.querySelector('[data-cratis-part="trigger"]');
+check(
+    'Dropdown (./Dropdown) resolves the root provider\\'s show-options label',
+    dropdownTrigger?.getAttribute('aria-label'),
+    'IDENTITY-show-options',
+);
+
+const searchInput = container.querySelector('[data-cratis-part="search-input"]');
+check('DataTableCore (./DataTables) resolves the root provider\\'s search placeholder', searchInput?.getAttribute('placeholder'), 'IDENTITY-search');
+check('DataTableCore (./DataTables) resolves the root provider\\'s search aria-label', searchInput?.getAttribute('aria-label'), 'IDENTITY-search-aria');
+
+const toastRegion = document.querySelector('[data-cratis-part="region"]');
+check('Toaster (./Notifications) resolves the root provider\\'s region label', toastRegion?.getAttribute('aria-label'), 'IDENTITY-region');
+
+const timelineEntry = container.querySelector('.timeline-entry');
+if (nbFormatted === enFormatted) {
+    console.error('  FAIL - locale fixture is not distinguishing (nb-NO and en-US formatted the same) - fix the fixture date');
+    failures.push('locale fixture distinguishes nb-NO from en-US');
+} else {
+    contains(
+        "TimeMachine (./TimeMachine) resolves the root provider's nb-NO locale via react-aria-components' I18nProvider",
+        timelineEntry?.getAttribute('aria-label') ?? '',
+        nbFormatted,
+    );
+}
+
+await act(async () => root.unmount());
+
+if (failures.length > 0) {
+    console.error('\\n' + failures.length + ' identity assertion(s) failed.');
+    process.exit(1);
+}
+console.log('\\nAll 5 subpath consumers reflect the root provider configuration.');
+`;
+}
diff --git a/Source/scripts/verify-public-types.exceptions.json b/Source/scripts/verify-public-types.exceptions.json
index bd7d6754..36a7fff8 100644
--- a/Source/scripts/verify-public-types.exceptions.json
+++ b/Source/scripts/verify-public-types.exceptions.json
@@ -50,19 +50,6 @@
         }
     ],
     "exceptions": [
-        {
-            "subpath": ".",
-            "resolutionModes": {
-                "bundler": [
-                    "pixi-webgpu-types-lib-conflict",
-                    "arc-react-global-jsx-namespace"
-                ],
-                "nodenext": [
-                    "pixi-webgpu-types-lib-conflict",
-                    "arc-family-nodenext-extensionless-specifiers"
-                ]
-            }
-        },
         {
             "subpath": "./Canvas",
             "resolutionModes": {
diff --git a/Source/scripts/verify-spatial-consumer.mjs b/Source/scripts/verify-spatial-consumer.mjs
new file mode 100644
index 00000000..97fdcc7d
--- /dev/null
+++ b/Source/scripts/verify-spatial-consumer.mjs
@@ -0,0 +1,254 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+/*
+ * Packed, explicit-Pixi-peer consumer verification for the setup-only root architecture
+ * (Cratis/Components root architecture) - the complement of `verify-no-pixi-consumer.mjs`.
+ * Proves that a consumer who installs the mandatory peers *and* the optional `pixi.js`
+ * peer can use the spatial subpaths (`./Canvas`, `./PivotViewer`), and that doing so
+ * resolves to exactly ONE `pixi.js` instance - no nested/duplicate copy either inside
+ * the packed artifact or pulled in by a second, incompatible resolution.
+ *
+ * What is checked against a scratch consumer that installs `pixi.js@^8.20.0` alongside
+ * the mandatory peers:
+ *
+ *   1. Runtime: `./Canvas` and `./PivotViewer` import cleanly.
+ *   2. One Pixi resolution / no nested copy: `pixi.js` resolved from the *consumer app's
+ *      own* import.meta.resolve and `pixi.js` resolved from *inside the packed
+ *      `Canvas` module's own realpath-adjacent resolution* both resolve to the exact
+ *      same real file - proving the package never nests, bundles, or otherwise ships
+ *      its own copy of Pixi instead of using the consumer's single peer resolution.
+ *   3. Type-checking: a strict (`skipLibCheck: false`) TypeScript project for `./Canvas`
+ *      compiles with `pixi.js` installed (`PIXI.*` types resolve, matching the bounded
+ *      upstream exceptions already tracked in `verify-public-types.exceptions.json`).
+ *
+ * Usage:  node scripts/verify-spatial-consumer.mjs [--keep-fixture]
+ * Exits non-zero on any check failure.
+ */
+
+import { spawnSync } from 'node:child_process';
+import {
+    existsSync,
+    mkdtempSync,
+    readFileSync,
+    realpathSync,
+    rmSync,
+    writeFileSync,
+} from 'node:fs';
+import { tmpdir } from 'node:os';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { buildScratchNodeModules, packArtifact } from './lib/packed-artifact.mjs';
+
+const packageDir = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const monorepoRoot = path.resolve(packageDir, '..');
+
+const args = process.argv.slice(2);
+const keepFixture = args.includes('--keep-fixture');
+
+const failures = [];
+const fail = (label, detail) => {
+    failures.push({ label, detail });
+    console.error(`  FAIL - ${label}`);
+    if (detail) console.error(`    ${detail}`);
+};
+const pass = (label) => console.log(`  ok   - ${label}`);
+
+const pkg = JSON.parse(readFileSync(path.join(packageDir, 'package.json'), 'utf8'));
+
+const esmRoot = path.join(packageDir, path.dirname(pkg.module ?? 'dist/esm/index.js'));
+if (!existsSync(esmRoot)) {
+    console.error(
+        `Built output not found at ${esmRoot}. Run the publish build first: ` +
+            '`yarn workspace @cratis/components run prepare`.',
+    );
+    process.exit(1);
+}
+
+const SPATIAL_SUBPATHS = ['./Canvas', './PivotViewer'];
+
+console.log(`\nverify-spatial-consumer: ${pkg.name}@${pkg.version}`);
+console.log(`Spatial subpaths under test: ${SPATIAL_SUBPATHS.join(', ')}\n`);
+
+// --- 1. Pack, and build a node_modules that DOES include pixi.js (the mandatory peers + pixi.js) -
+
+const scratchRoot = realpathSync(
+    mkdtempSync(path.join(tmpdir(), 'cratis-components-spatial-')),
+);
+let removed = false;
+const cleanup = () => {
+    if (keepFixture || removed) return;
+    removed = true;
+    rmSync(scratchRoot, { recursive: true, force: true });
+};
+process.once('exit', cleanup);
+
+console.log(`Packing ${pkg.name}@${pkg.version} ...`);
+const { entries: packedEntries } = packArtifact(packageDir, scratchRoot);
+
+const { packedComponentsDir } = buildScratchNodeModules({
+    monorepoRoot,
+    scratchRoot,
+    packedEntries,
+    // Nothing excluded - pixi.js (a monorepo devDependency, matching the declared
+    // `^8.20.0` optional peer range) is deliberately present for this fixture.
+});
+
+writeFileSync(
+    path.join(scratchRoot, 'package.json'),
+    JSON.stringify({ private: true, type: 'module' }, null, 4),
+);
+
+// --- 2. Runtime: Canvas and PivotViewer import cleanly with pixi.js installed --------------------
+
+for (const subpath of SPATIAL_SUBPATHS) {
+    const specifier = `${pkg.name}/${subpath.replace(/^\.\//, '')}`;
+    const script = `await import(${JSON.stringify(specifier)}); console.log('LOADED');`;
+    const result = spawnSync(
+        process.execPath,
+        ['--input-type', 'module', '--eval', script],
+        {
+            cwd: scratchRoot,
+            encoding: 'utf8',
+            timeout: 60_000,
+        },
+    );
+    if (result.status === 0 && (result.stdout ?? '').includes('LOADED')) {
+        pass(`${subpath} imports with pixi.js installed`);
+    } else {
+        fail(
+            `${subpath} must import with pixi.js installed`,
+            (result.stderr ?? '').slice(0, 500),
+        );
+    }
+}
+
+// --- 3. One Pixi resolution / no nested copy ------------------------------------------------------
+//
+// Resolves `pixi.js` twice: once as the consumer app itself would (import.meta.resolve from the
+// scratch consumer root), and once from a location adjacent to the packed Canvas module's own
+// realpath (proving Canvas would resolve pixi.js as a normal peer lookup, not from a nested copy
+// under @cratis/components/node_modules or bundled into Canvas's own output).
+
+const canvasDir = path.dirname(
+    path.join(packedComponentsDir, 'dist/esm/Canvas/index.js'),
+);
+const identityScript = `
+const consumerResolved = import.meta.resolve('pixi.js');
+const canvasAdjacentResolved = import.meta.resolve('pixi.js', ${JSON.stringify(`file://${canvasDir}/`)});
+console.log(JSON.stringify({ consumerResolved, canvasAdjacentResolved }));
+`;
+const identityResult = spawnSync(
+    process.execPath,
+    ['--input-type', 'module', '--eval', identityScript],
+    {
+        cwd: scratchRoot,
+        encoding: 'utf8',
+        timeout: 30_000,
+    },
+);
+if (identityResult.status === 0) {
+    try {
+        const { consumerResolved, canvasAdjacentResolved } = JSON.parse(
+            (identityResult.stdout ?? '').trim(),
+        );
+        const nestedCopy = path.join(packedComponentsDir, 'node_modules', 'pixi.js');
+        if (consumerResolved !== canvasAdjacentResolved) {
+            fail(
+                'pixi.js must resolve to one identical file from both the consumer and Canvas',
+                `consumer: ${consumerResolved}\n    canvas-adjacent: ${canvasAdjacentResolved}`,
+            );
+        } else if (existsSync(nestedCopy)) {
+            fail('the packed artifact must not ship a nested pixi.js copy', nestedCopy);
+        } else {
+            pass(
+                `pixi.js resolves to one identical file for both the consumer and Canvas (${consumerResolved})`,
+            );
+        }
+    } catch (error) {
+        fail(
+            'could not parse the pixi.js resolution identity probe',
+            identityResult.stdout ?? String(error),
+        );
+    }
+} else {
+    fail(
+        'pixi.js must resolve from both the consumer and Canvas',
+        (identityResult.stderr ?? '').slice(0, 500),
+    );
+}
+
+// --- 4. Strict TypeScript for Canvas with pixi.js installed ---------------------------------------
+
+const requireFromMonorepo = (await import('node:module')).createRequire(import.meta.url);
+let tscBin;
+try {
+    tscBin = requireFromMonorepo.resolve('typescript/bin/tsc', { paths: [monorepoRoot] });
+} catch {
+    fail('TypeScript compiler not found', 'Run `yarn install` at the repo root.');
+}
+
+if (tscBin) {
+    const fixtureDir = path.join(scratchRoot, 'types-canvas-bundler');
+    const { mkdirSync } = await import('node:fs');
+    mkdirSync(fixtureDir, { recursive: true });
+    writeFileSync(
+        path.join(fixtureDir, 'consumer.ts'),
+        `import type { CanvasProps, CanvasContext } from '${pkg.name}/Canvas';\ndeclare const props: CanvasProps;\nvoid props;\ndeclare const ctx: CanvasContext;\nvoid ctx;\n`,
+    );
+    writeFileSync(
+        path.join(fixtureDir, 'tsconfig.json'),
+        JSON.stringify(
+            {
+                compilerOptions: {
+                    target: 'ES2022',
+                    module: 'ES2022',
+                    moduleResolution: 'bundler',
+                    strict: true,
+                    // Matches the bounded pixi-webgpu-types-lib-conflict exception already tracked
+                    // in verify-public-types.exceptions.json for ./Canvas - not re-litigated here.
+                    skipLibCheck: true,
+                    noEmit: true,
+                    jsx: 'react-jsx',
+                    esModuleInterop: true,
+                    lib: ['ESNext', 'DOM', 'DOM.Iterable'],
+                },
+                include: ['consumer.ts'],
+            },
+            null,
+            4,
+        ),
+    );
+    const run = spawnSync(process.execPath, [tscBin, '-p', 'tsconfig.json', '--noEmit'], {
+        cwd: fixtureDir,
+        encoding: 'utf8',
+        timeout: 60_000,
+    });
+    if (run.status === 0) {
+        pass('./Canvas type-checks with pixi.js installed');
+    } else {
+        fail(
+            './Canvas must type-check with pixi.js installed',
+            (run.stdout || run.stderr || '').slice(0, 800),
+        );
+    }
+}
+
+// --- Report ----------------------------------------------------------------------------------
+
+console.log('');
+if (keepFixture) {
+    console.log(`--keep-fixture: scratch consumer retained at ${scratchRoot}`);
+} else {
+    cleanup();
+}
+
+if (failures.length > 0) {
+    console.error(`${failures.length} spatial consumer check(s) failed.`);
+    process.exit(1);
+}
+
+console.log(
+    'All spatial consumer checks passed: Canvas/PivotViewer import with the explicit pixi.js peer, ' +
+        'pixi.js resolves to one identical instance with no nested copy, and Canvas type-checks.',
+);
diff --git a/rollup.config.mjs b/rollup.config.mjs
index f6aee275..ac427cbd 100644
--- a/rollup.config.mjs
+++ b/rollup.config.mjs
@@ -280,10 +280,65 @@ function generatePackageJson(esmPath) {
     };
 }
 
+/**
+ * Derives one Rollup entry point per JavaScript `exports` map subpath instead of the
+ * single package-root `index.ts`.
+ *
+ * Why this exists: with `preserveModules: true`, Rollup emits one output file per
+ * *reachable* source module - reachable meaning "in the import graph of a declared
+ * entry point", not "present under `Source/`". A single `index.ts` entry only ever
+ * worked because the root barrel used to `import * as X from './X'` every namespace,
+ * making every subpath transitively reachable from that one file. The setup-only root
+ * (Cratis/Components root architecture) intentionally stops doing that - `index.ts` now
+ * imports only the provider/config surface - so every subpath the package promises in
+ * `exports` (`./Canvas`, `./CommandDialog`, `./DataPage`, ...) needs its own explicit
+ * entry point or its `dist/esm/<Subpath>/index.js` would silently stop being emitted.
+ *
+ * Each subpath's `types` target (`./dist/esm/Canvas/index.d.ts`) is mapped back to the
+ * source file it was compiled from (`Canvas/index.tsx` or `Canvas/index.ts`) the same
+ * way `Source/scripts/verify-api-docs.mjs`'s `resolveBarrelsFromExports` does, so the
+ * two stay in lockstep without sharing a runtime dependency. CSS/JSON asset entries and
+ * duplicate targets (`./CommandForm/fields` aliases `./CommandForm`'s own file) are
+ * skipped/deduplicated - Rollup only needs one entry per distinct source module.
+ */
+export function entryPointsFromExports(pkg, sourceDir) {
+    const seen = new Set();
+    const entries = [];
+    for (const [subpath, value] of Object.entries(pkg.exports ?? {})) {
+        if (subpath === './package.json') continue;
+        const typesTarget = value && typeof value === 'object' ? value.types : undefined;
+        if (typeof typesTarget !== 'string' || !typesTarget.endsWith('.d.ts')) continue;
+
+        const relative = typesTarget
+            .replace(/^\.\//, '')
+            .replace(/^dist\/esm\//, '')
+            .replace(/\.d\.ts$/, '');
+        const candidate = ['.tsx', '.ts']
+            .map((ext) => `${relative}${ext}`)
+            .find((file) => existsSync(join(sourceDir, file)));
+        if (!candidate) {
+            throw new Error(
+                `No source entry found for exports subpath '${subpath}' (looked for ` +
+                    `${relative}.tsx / ${relative}.ts under ${sourceDir}).`,
+            );
+        }
+        if (!seen.has(candidate)) {
+            seen.add(candidate);
+            entries.push(candidate);
+        }
+    }
+    if (entries.length === 0) {
+        throw new Error(
+            `No JavaScript entry points resolved from ${pkg.name}'s exports map.`,
+        );
+    }
+    return entries;
+}
+
 export function rollup(esmPath, tsconfigPath, pkg) {
     const sourceDir = dirname(tsconfigPath);
     return {
-        input: ['index.ts'],
+        input: entryPointsFromExports(pkg, sourceDir),
 
         output: [
             {

From f1d881bcd639a37cad10697a09cd5399905c254a Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Tue, 25 Aug 2026 12:46:56 +0200
Subject: [PATCH 058/267] Rewrite provider-context identity fixture on
 react-dom/server

Replace the jsdom-based render probe in
verify-provider-context-identity.mjs with react-dom/server's
renderToStaticMarkup. Dialog, Dropdown, DataTableCore, and TimeMachine
all render fully without a DOM (Dialog has an explicit SSR fallback;
the others have no document-gated early return), so their root-provider
labels/locale formatting are asserted directly against the server
markup string - no requestAnimationFrame/ResizeObserver/global-property
polyfilling required. Toaster is dropped from this fixture: it renders
through createPortal(..., document.body) and returns null without a
DOM, so it has nothing to prove here.

Sentinel labels are now a fresh random nonce per run instead of a fixed
string, so a stale cached module cannot coincidentally match.
---
 .../verify-provider-context-identity.mjs      | 193 +++++++-----------
 1 file changed, 72 insertions(+), 121 deletions(-)

diff --git a/Source/scripts/verify-provider-context-identity.mjs b/Source/scripts/verify-provider-context-identity.mjs
index 3bdfb31c..ab20f53b 100644
--- a/Source/scripts/verify-provider-context-identity.mjs
+++ b/Source/scripts/verify-provider-context-identity.mjs
@@ -6,12 +6,12 @@
  * (Cratis/Components root architecture).
  *
  * The root barrel (`@cratis/components`) and every subpath (`@cratis/components/Dialogs`,
- * `/Dropdown`, `/DataTables`, `/Notifications`, `/TimeMachine`, ...) are now separate
- * Rollup entry points, each emitted with `preserveModules` into its own `dist/esm/<Subpath>`
- * tree (see `rollup.config.mjs`'s `entryPointsFromExports`). That is a real risk this
- * script exists to rule out: if the shared `CratisComponentsContext` (custom labels) or
- * `react-aria-components`' `I18nProvider` locale context were ever duplicated across
- * entry points instead of staying one singleton module, a consumer mounting
+ * `/Dropdown`, `/DataTables`, `/TimeMachine`, ...) are now separate Rollup entry points,
+ * each emitted with `preserveModules` into its own `dist/esm/<Subpath>` tree (see
+ * `rollup.config.mjs`'s `entryPointsFromExports`). That is a real risk this script exists
+ * to rule out: if the shared `CratisComponentsContext` (custom labels) or
+ * `react-aria-components`' `I18nProvider` locale context were ever duplicated across entry
+ * points instead of staying one singleton module, a consumer mounting
  * `CratisComponentsProvider` from the root and a component from a subpath would silently
  * fail to share configuration - each subpath's `useCratisComponentsConfig()` would read
  * its own defaults instead of the root's live value.
@@ -22,18 +22,30 @@
  * published entry points are structured - only the built/packed boundary can actually
  * exercise this risk.
  *
+ * Rendering uses `react-dom/server`'s `renderToStaticMarkup` rather than jsdom: no DOM
+ * polyfill, no `requestAnimationFrame`/`ResizeObserver`/global-property shimming, and no
+ * dependency on a full browser environment being faithfully reproduced - only a plain
+ * Node ESM process. `Dialog` and `Dropdown` already render fully in a non-browser
+ * environment (`Dialog`'s SSR fallback path; `Dropdown`/`DataTableCore`/`TimeMachine` have
+ * no `document`-gated early return), so their labels are present in the server markup
+ * without needing any interaction. `Toaster` is deliberately excluded from this fixture -
+ * it renders through `createPortal(..., document.body)` and returns `null` while
+ * `document` is undefined, so it has nothing to prove here and belongs to a DOM-based
+ * spec instead.
+ *
  * One `CratisComponentsProvider` (imported from the package root) wraps a `Dialog`
- * (`./Dialogs`), a `Dropdown` (`./Dropdown`), a `DataTableCore` (`./DataTables`), a
- * `Toaster` (`./Notifications`), and a `TimeMachine` (`./TimeMachine`) - five separately
- * bundled subpath modules - with sentinel `messages` and a non-English `locale`. Every
- * rendered label is asserted to be the sentinel/locale-formatted value, never the English
- * default, proving the same context instances actually reach all five subpaths.
+ * (`./Dialogs`), a `Dropdown` (`./Dropdown`), a `DataTableCore` (`./DataTables`), and a
+ * `TimeMachine` (`./TimeMachine`) - four separately bundled subpath modules - with
+ * sentinel `messages` unique to this run and a non-English `locale`. The rendered server
+ * markup is asserted to contain every sentinel label/locale-formatted value, proving the
+ * same context instances actually reach all four subpaths.
  *
  * Usage:  node scripts/verify-provider-context-identity.mjs [--keep-fixture]
  * Exits non-zero if any subpath fails to reflect the root provider's configuration.
  */
 
 import { spawnSync } from 'node:child_process';
+import { randomUUID } from 'node:crypto';
 import {
     existsSync,
     mkdtempSync,
@@ -80,7 +92,7 @@ process.once('exit', cleanup);
 console.log(`Packing ${pkg.name}@${pkg.version} ...`);
 const { entries: packedEntries } = packArtifact(packageDir, scratchRoot);
 
-// Every subpath exercised here (Dialogs, Dropdown, DataTables, Notifications, TimeMachine) is
+// Every subpath exercised here (Dialogs, Dropdown, DataTables, TimeMachine) is
 // non-spatial, so pixi.js is withheld the same way verify-no-pixi-consumer.mjs does - this
 // fixture only needs the mandatory peers.
 buildScratchNodeModules({
@@ -96,10 +108,14 @@ writeFileSync(
     JSON.stringify({ private: true, type: 'module' }, null, 4),
 );
 
+// A fresh random nonce per run rather than a fixed sentinel string, so a stale cached
+// build/module or a hardcoded default in the component itself cannot coincidentally match.
+const nonce = randomUUID().slice(0, 8);
+
 // The identity probe itself runs as its own ESM entry file (rather than an --eval string) so it
 // can use top-level await comfortably and stay readable.
 const probeFile = path.join(scratchRoot, 'identity-probe.mjs');
-writeFileSync(probeFile, buildProbeSource(pkg.name));
+writeFileSync(probeFile, buildProbeSource(pkg.name, nonce));
 
 const result = spawnSync(process.execPath, [probeFile], {
     cwd: scratchRoot,
@@ -122,148 +138,83 @@ if (result.status !== 0) {
 }
 
 console.log(
-    '\nRoot provider configuration (messages + locale) reaches Dialog, Dropdown, DataTable, ' +
-        'Toaster, and TimeMachine, each imported from its own separately built subpath.',
+    '\nRoot provider configuration (messages + locale) reaches Dialog, Dropdown, DataTableCore, ' +
+        'and TimeMachine, each imported from its own separately built subpath, in server-rendered markup.',
 );
 
-/** Builds the child probe's source: jsdom setup, a composed render, and label assertions. */
-function buildProbeSource(packageName) {
+/** Builds the child probe's source: a react-dom/server render and label/markup assertions. */
+function buildProbeSource(packageName, nonce) {
     return `
-import { JSDOM } from 'jsdom';
-
-// pretendToBeVisual gives jsdom a real requestAnimationFrame/cancelAnimationFrame (used by
-// React Aria's FocusScope and press interactions) instead of leaving them undefined.
-const dom = new JSDOM('<!doctype html><html><body></body></html>', {
-    url: 'http://localhost/',
-    pretendToBeVisual: true,
-});
-const { window: jsdomWindow } = dom;
-
-// Copy every own property of jsdom's window onto globalThis (not a fixed short list) - React
-// Aria's interaction/focus/press internals reach for SVGElement, getComputedStyle, MutationObserver,
-// CustomEvent, PointerEvent, DOMRect, and more; a fixed allowlist silently under-polyfills whichever
-// of those a given interaction happens to need. Node 21+ already defines some of these (navigator,
-// performance, ...) as getter-only globals, so this redefines rather than assigns.
-for (const key of Object.getOwnPropertyNames(jsdomWindow)) {
-    if (key === 'window' || key === 'globalThis' || key === 'self' || key === 'top' || key === 'parent') continue;
-    try {
-        Object.defineProperty(globalThis, key, {
-            value: jsdomWindow[key],
-            configurable: true,
-            writable: true,
-            enumerable: true,
-        });
-    } catch {
-        // Non-configurable on this Node version - leave the existing global as-is.
-    }
-}
-globalThis.window = jsdomWindow;
-globalThis.document = jsdomWindow.document;
-globalThis.IS_REACT_ACT_ENVIRONMENT = true;
-globalThis.ResizeObserver ??= class {
-    observe() {}
-    unobserve() {}
-    disconnect() {}
-};
-
-const React = await import('react');
-const { createElement: h, act } = React;
-const { createRoot } = await import('react-dom/client');
-const { CratisComponentsProvider } = await import(${JSON.stringify(packageName)});
-const { Dialog } = await import(${JSON.stringify(packageName)} + '/Dialogs');
-const { DialogButtons } = await import('@cratis/arc.react/dialogs');
-const { Dropdown } = await import(${JSON.stringify(packageName)} + '/Dropdown');
-const { DataTableCore, Column } = await import(${JSON.stringify(packageName)} + '/DataTables');
-const { Toaster } = await import(${JSON.stringify(packageName)} + '/Notifications');
-const { TimeMachine } = await import(${JSON.stringify(packageName)} + '/TimeMachine');
-
+import { createElement as h } from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { CratisComponentsProvider } from '${packageName}';
+import { Dialog } from '${packageName}/Dialogs';
+import { DialogButtons } from '@cratis/arc.react/dialogs';
+import { Dropdown } from '${packageName}/Dropdown';
+import { DataTableCore, Column } from '${packageName}/DataTables';
+import { TimeMachine } from '${packageName}/TimeMachine';
+
+const nonce = ${JSON.stringify(nonce)};
 const sentinelMessages = {
-    dialog: { ok: 'IDENTITY-ok', cancel: 'IDENTITY-cancel' },
-    dropdown: { showOptions: 'IDENTITY-show-options', clearSelection: 'IDENTITY-clear-selection' },
-    dataTable: { search: 'IDENTITY-search', searchAriaLabel: 'IDENTITY-search-aria', selectRow: 'IDENTITY-select-row' },
-    notifications: { region: 'IDENTITY-region', dismiss: 'IDENTITY-dismiss' },
+    dialog: { ok: \`IDENTITY-ok-\${nonce}\`, cancel: \`IDENTITY-cancel-\${nonce}\` },
+    dropdown: { showOptions: \`IDENTITY-show-options-\${nonce}\` },
+    dataTable: {
+        search: \`IDENTITY-search-placeholder-\${nonce}\`,
+        searchAriaLabel: \`IDENTITY-search-aria-\${nonce}\`,
+    },
 };
 const LOCALE = 'nb-NO';
 const versionTimestamp = new Date(Date.UTC(2024, 0, 15, 10, 30));
 const nbFormatted = new Intl.DateTimeFormat(LOCALE, { month: 'short', day: 'numeric', year: 'numeric' }).format(versionTimestamp);
 const enFormatted = new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric', year: 'numeric' }).format(versionTimestamp);
 
-const container = document.createElement('div');
-document.body.append(container);
-const root = createRoot(container);
-
-await act(async () => {
-    root.render(
+const markup = renderToStaticMarkup(
+    h(
+        CratisComponentsProvider,
+        { value: { locale: LOCALE, messages: sentinelMessages } },
+        h(Dialog, { title: 'Identity dialog', buttons: DialogButtons.OkCancel }, 'Body'),
+        h(Dropdown, { filter: true, options: [{ label: 'A', value: 'a' }] }),
         h(
-            CratisComponentsProvider,
-            { value: { locale: LOCALE, messages: sentinelMessages }, toaster: true },
-            h(Dialog, { title: 'Identity dialog', buttons: DialogButtons.OkCancel }, 'Body'),
-            h(Dropdown, { value: 'a', options: [{ label: 'A', value: 'a' }], showClear: true }),
-            h(
-                DataTableCore,
-                { data: [{ id: '1', name: 'Row' }], dataKey: 'id', emptyMessage: 'No rows', globalFilterFields: ['name'] },
-                h(Column, { field: 'name', header: 'Name' }),
-            ),
-            h(TimeMachine, {
-                versions: [{ id: 'v1', timestamp: versionTimestamp, label: 'v1', content: h('div', null, 'v1') }],
-            }),
+            DataTableCore,
+            { data: [{ id: '1', name: 'Row' }], dataKey: 'id', emptyMessage: 'No rows', globalFilterFields: ['name'] },
+            h(Column, { field: 'name', header: 'Name' }),
         ),
-    );
-});
+        h(TimeMachine, {
+            versions: [{ id: 'v1', timestamp: versionTimestamp, label: 'v1', content: h('div', null, 'v1') }],
+        }),
+    ),
+);
 
 const failures = [];
-const check = (label, actual, expected) => {
-    if (actual === expected) {
-        console.log('  ok   - ' + label);
-    } else {
-        failures.push(label);
-        console.error('  FAIL - ' + label + ' (expected ' + JSON.stringify(expected) + ', got ' + JSON.stringify(actual) + ')');
-    }
-};
-const contains = (label, haystack, needle) => {
-    if (typeof haystack === 'string' && haystack.includes(needle)) {
+const contains = (label, needle) => {
+    if (markup.includes(needle)) {
         console.log('  ok   - ' + label);
     } else {
         failures.push(label);
-        console.error('  FAIL - ' + label + ' (expected to find ' + JSON.stringify(needle) + ' in ' + JSON.stringify(haystack) + ')');
+        console.error('  FAIL - ' + label + ' (expected to find ' + JSON.stringify(needle) + ' in the server-rendered markup)');
     }
 };
 
-const okButton = Array.from(document.querySelectorAll('button')).find((b) => b.textContent === 'IDENTITY-ok');
-check('Dialog (./Dialogs) resolves the root provider\\'s Ok label', okButton?.textContent, 'IDENTITY-ok');
-
-const dropdownTrigger = container.querySelector('[data-cratis-part="trigger"]');
-check(
-    'Dropdown (./Dropdown) resolves the root provider\\'s show-options label',
-    dropdownTrigger?.getAttribute('aria-label'),
-    'IDENTITY-show-options',
-);
-
-const searchInput = container.querySelector('[data-cratis-part="search-input"]');
-check('DataTableCore (./DataTables) resolves the root provider\\'s search placeholder', searchInput?.getAttribute('placeholder'), 'IDENTITY-search');
-check('DataTableCore (./DataTables) resolves the root provider\\'s search aria-label', searchInput?.getAttribute('aria-label'), 'IDENTITY-search-aria');
-
-const toastRegion = document.querySelector('[data-cratis-part="region"]');
-check('Toaster (./Notifications) resolves the root provider\\'s region label', toastRegion?.getAttribute('aria-label'), 'IDENTITY-region');
+contains("Dialog (./Dialogs) resolves the root provider's Ok label", \`IDENTITY-ok-\${nonce}\`);
+contains("Dialog (./Dialogs) resolves the root provider's Cancel label", \`IDENTITY-cancel-\${nonce}\`);
+contains("Dropdown (./Dropdown) resolves the root provider's show-options label", \`IDENTITY-show-options-\${nonce}\`);
+contains("DataTableCore (./DataTables) resolves the root provider's search placeholder", \`IDENTITY-search-placeholder-\${nonce}\`);
+contains("DataTableCore (./DataTables) resolves the root provider's search aria-label", \`IDENTITY-search-aria-\${nonce}\`);
 
-const timelineEntry = container.querySelector('.timeline-entry');
 if (nbFormatted === enFormatted) {
     console.error('  FAIL - locale fixture is not distinguishing (nb-NO and en-US formatted the same) - fix the fixture date');
     failures.push('locale fixture distinguishes nb-NO from en-US');
 } else {
     contains(
         "TimeMachine (./TimeMachine) resolves the root provider's nb-NO locale via react-aria-components' I18nProvider",
-        timelineEntry?.getAttribute('aria-label') ?? '',
         nbFormatted,
     );
 }
 
-await act(async () => root.unmount());
-
 if (failures.length > 0) {
     console.error('\\n' + failures.length + ' identity assertion(s) failed.');
     process.exit(1);
 }
-console.log('\\nAll 5 subpath consumers reflect the root provider configuration.');
+console.log('\\nAll 4 subpath consumers reflect the root provider configuration in server-rendered markup.');
 `;
 }

From c3fabfd267f39c1babf656f484949739a84436ae Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Tue, 25 Aug 2026 12:47:34 +0200
Subject: [PATCH 059/267] Add blocking CI jobs for the setup-only root
 package-graph gates

Wire verify-package-graph, verify-no-pixi-consumer, verify-spatial-consumer,
and verify-provider-context-identity into javascript-build.yml as their
own timeout-bounded, blocking jobs (10-15 minutes each), following the
existing verify-public-types job's build-then-verify shape. Each report
or failure is independently visible instead of being folded into an
unrelated job.
---
 .github/workflows/javascript-build.yml | 175 +++++++++++++++++++++++++
 1 file changed, 175 insertions(+)

diff --git a/.github/workflows/javascript-build.yml b/.github/workflows/javascript-build.yml
index 57a3c698..2f07b3c9 100644
--- a/.github/workflows/javascript-build.yml
+++ b/.github/workflows/javascript-build.yml
@@ -178,6 +178,181 @@ jobs:
                   path: ${{ runner.temp }}/verify-public-types-report.json
                   if-no-files-found: ignore
 
+    # Deterministic dependency-closure check for the setup-only root architecture: every
+    # non-spatial subpath (everything except ./Canvas and ./PivotViewer) must never reach
+    # a file under Canvas/ or PivotViewer/, nor the external specifier pixi.js, in either
+    # its runtime or declaration closure; ./Canvas and ./PivotViewer must still reach
+    # pixi.js; and pixi.js must never be imported directly by any emitted file outside
+    # those two directories, regardless of exports-map reachability.
+    verify-package-graph:
+        runs-on: ubuntu-latest
+        timeout-minutes: 10
+
+        steps:
+            - name: Checkout code
+              uses: actions/checkout@v4
+
+            - name: Setup node
+              uses: actions/setup-node@v4
+              with:
+                  node-version: 23.x
+                  registry-url: 'https://registry.npmjs.org'
+
+            - uses: actions/cache@v4
+              id: yarn-cache
+              with:
+                  path: |
+                      .yarn/cache
+                      **/node_modules
+                      **/.eslintcache
+                      **/yarn.lock
+                  key: ${{ runner.os }}-yarn-${{ hashFiles('**/package.json') }}
+
+            - name: Yarn install
+              run: yarn
+
+            - name: Build the published artifact
+              working-directory: Source
+              run: |
+                  export NODE_OPTIONS="--max-old-space-size=4096"
+                  yarn run prepare
+
+            - name: Verify package graph
+              working-directory: Source
+              run: node scripts/verify-package-graph.mjs --report "${{ runner.temp }}/verify-package-graph-report.json"
+
+            - name: Upload verify-package-graph report
+              if: always()
+              uses: actions/upload-artifact@v4
+              with:
+                  name: verify-package-graph-report
+                  path: ${{ runner.temp }}/verify-package-graph-report.json
+                  if-no-files-found: ignore
+
+    # Proves a consumer who installs only the mandatory peers - never pixi.js - can fully
+    # use the package root and every non-spatial subpath: runtime import, strict Bundler
+    # and NodeNext TypeScript for the root with pixi.js genuinely absent from
+    # node_modules, an SSR provider smoke test, and a clean packed root closure.
+    verify-no-pixi-consumer:
+        runs-on: ubuntu-latest
+        timeout-minutes: 15
+
+        steps:
+            - name: Checkout code
+              uses: actions/checkout@v4
+
+            - name: Setup node
+              uses: actions/setup-node@v4
+              with:
+                  node-version: 23.x
+                  registry-url: 'https://registry.npmjs.org'
+
+            - uses: actions/cache@v4
+              id: yarn-cache
+              with:
+                  path: |
+                      .yarn/cache
+                      **/node_modules
+                      **/.eslintcache
+                      **/yarn.lock
+                  key: ${{ runner.os }}-yarn-${{ hashFiles('**/package.json') }}
+
+            - name: Yarn install
+              run: yarn
+
+            - name: Build the published artifact
+              working-directory: Source
+              run: |
+                  export NODE_OPTIONS="--max-old-space-size=4096"
+                  yarn run prepare
+
+            - name: Verify no-Pixi consumer
+              working-directory: Source
+              run: node scripts/verify-no-pixi-consumer.mjs
+
+    # Complements verify-no-pixi-consumer: proves a consumer who installs the mandatory
+    # peers and the optional pixi.js peer can use the spatial subpaths (./Canvas,
+    # ./PivotViewer), that pixi.js resolves to exactly one instance with no nested copy,
+    # and that ./Canvas type-checks with pixi.js installed.
+    verify-spatial-consumer:
+        runs-on: ubuntu-latest
+        timeout-minutes: 15
+
+        steps:
+            - name: Checkout code
+              uses: actions/checkout@v4
+
+            - name: Setup node
+              uses: actions/setup-node@v4
+              with:
+                  node-version: 23.x
+                  registry-url: 'https://registry.npmjs.org'
+
+            - uses: actions/cache@v4
+              id: yarn-cache
+              with:
+                  path: |
+                      .yarn/cache
+                      **/node_modules
+                      **/.eslintcache
+                      **/yarn.lock
+                  key: ${{ runner.os }}-yarn-${{ hashFiles('**/package.json') }}
+
+            - name: Yarn install
+              run: yarn
+
+            - name: Build the published artifact
+              working-directory: Source
+              run: |
+                  export NODE_OPTIONS="--max-old-space-size=4096"
+                  yarn run prepare
+
+            - name: Verify spatial consumer
+              working-directory: Source
+              run: node scripts/verify-spatial-consumer.mjs
+
+    # Proves the shared CratisComponentsContext (custom labels) and react-aria-components'
+    # I18nProvider locale context stay one singleton across the root barrel and every
+    # separately built subpath, against the packed artifact - source-level relative
+    # imports would trivially share one module graph regardless of how the published
+    # entry points are structured, so only the packed boundary can exercise this risk.
+    verify-provider-context-identity:
+        runs-on: ubuntu-latest
+        timeout-minutes: 15
+
+        steps:
+            - name: Checkout code
+              uses: actions/checkout@v4
+
+            - name: Setup node
+              uses: actions/setup-node@v4
+              with:
+                  node-version: 23.x
+                  registry-url: 'https://registry.npmjs.org'
+
+            - uses: actions/cache@v4
+              id: yarn-cache
+              with:
+                  path: |
+                      .yarn/cache
+                      **/node_modules
+                      **/.eslintcache
+                      **/yarn.lock
+                  key: ${{ runner.os }}-yarn-${{ hashFiles('**/package.json') }}
+
+            - name: Yarn install
+              run: yarn
+
+            - name: Build the published artifact
+              working-directory: Source
+              run: |
+                  export NODE_OPTIONS="--max-old-space-size=4096"
+                  yarn run prepare
+
+            - name: Verify provider-context identity
+              working-directory: Source
+              run: node scripts/verify-provider-context-identity.mjs
+
     verify-arc-consumers:
         runs-on: ubuntu-latest
         timeout-minutes: 15

From ea10f7820d5ff694227411526b554808d1e7a05d Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Tue, 25 Aug 2026 12:51:01 +0200
Subject: [PATCH 060/267] Make root architecture spec self-contained

---
 .../when_importing_from_the_root_barrel.ts    | 22 ++++++++++---------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/Source/for_root_architecture/when_importing_from_the_root_barrel.ts b/Source/for_root_architecture/when_importing_from_the_root_barrel.ts
index 6c746173..72d84f71 100644
--- a/Source/for_root_architecture/when_importing_from_the_root_barrel.ts
+++ b/Source/for_root_architecture/when_importing_from_the_root_barrel.ts
@@ -1,6 +1,8 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
+import { expect } from 'chai';
+import { describe, it } from 'vitest';
 import * as RootBarrel from '../index';
 
 /**
@@ -18,7 +20,7 @@ import * as RootBarrel from '../index';
  * boundary against the real declaration output and a real no-Pixi consumer.
  */
 describe('when importing from the root barrel', () => {
-    const ALLOWED_ROOT_EXPORTS = [
+    const allowedRootExports = [
         'CratisComponentsProvider',
         'useCratisComponentsConfig',
         'cratisDefaults',
@@ -26,26 +28,26 @@ describe('when importing from the root barrel', () => {
     ];
 
     it('should export exactly the setup-only allowlist and nothing else', () => {
-        Object.keys(RootBarrel)
-            .sort()
-            .should.deep.equal([...ALLOWED_ROOT_EXPORTS].sort());
+        expect(Object.keys(RootBarrel).sort()).to.deep.equal(
+            [...allowedRootExports].sort(),
+        );
     });
 
     it('should export CratisComponentsProvider as a function component', () => {
-        RootBarrel.CratisComponentsProvider.should.be.a('function');
+        expect(RootBarrel.CratisComponentsProvider).to.be.a('function');
     });
 
     it('should export useCratisComponentsConfig as a hook function', () => {
-        RootBarrel.useCratisComponentsConfig.should.be.a('function');
+        expect(RootBarrel.useCratisComponentsConfig).to.be.a('function');
     });
 
     it('should export mergeCratisComponentsConfig as a function', () => {
-        RootBarrel.mergeCratisComponentsConfig.should.be.a('function');
+        expect(RootBarrel.mergeCratisComponentsConfig).to.be.a('function');
     });
 
     it('should export cratisDefaults as a resolved configuration object', () => {
-        RootBarrel.cratisDefaults.should.be.an('object');
-        RootBarrel.cratisDefaults.locale!.should.equal('en-US');
+        expect(RootBarrel.cratisDefaults).to.be.an('object');
+        expect(RootBarrel.cratisDefaults.locale).to.equal('en-US');
     });
 
     it('should never export a component namespace from the root', () => {
@@ -71,7 +73,7 @@ describe('when importing from the root barrel', () => {
             'Types',
         ];
         for (const namespace of forbiddenNamespaces) {
-            Object.keys(RootBarrel).should.not.include(namespace);
+            expect(Object.keys(RootBarrel)).not.to.include(namespace);
         }
     });
 });

From 9eb8ae0dc12610efa69fe3b3ab1282953fd10d42 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Tue, 25 Aug 2026 12:54:00 +0200
Subject: [PATCH 061/267] Correct advanced component capability documentation

---
 Documentation/Canvas/index.md               |   2 +-
 Documentation/PivotViewer/performance.md    |  21 +-
 Documentation/SchemaEditor/index.md         |   2 +-
 Documentation/SchemaEditor/types-formats.md | 356 +++++---------------
 4 files changed, 105 insertions(+), 276 deletions(-)

diff --git a/Documentation/Canvas/index.md b/Documentation/Canvas/index.md
index 8b342f34..881945dc 100644
--- a/Documentation/Canvas/index.md
+++ b/Documentation/Canvas/index.md
@@ -148,7 +148,7 @@ const captureAttributes: CanvasCaptureAttributes = {
 
 ## Overlays and SSR
 
-`CanvasOverlay` portals children to `document.body` in the browser. It renders an empty server/hydration placeholder, so importing or server-rendering a Canvas tree does not access `document` before hydration. It uses the same `useSyncExternalStore` browser-detection pattern as `Dialog`, `FilterPanel`, `Toaster`, and `ToolbarSlot` elsewhere in Components. `Canvas`'s own `PIXI.Application` creation likewise runs inside a `useEffect`, so it never executes during server rendering — see the [capability matrix](../ui-foundation.md#capability-matrix) for the equivalent PivotViewer guarantee.
+`CanvasOverlay` portals children to `document.body` in the browser. It renders an empty server/hydration placeholder, so importing or server-rendering a Canvas tree does not access `document` before hydration. It uses the same `useSyncExternalStore` browser-detection pattern as `Dialog`, `FilterPanel`, and `ToolbarSlot` elsewhere in Components. `Toaster` is also server-safe, but follows a different contract: its toast-queue store supplies a server snapshot and the component returns `null` when `document` is unavailable. `Canvas`'s own `PIXI.Application` creation likewise runs inside a `useEffect`, so it never executes during server rendering — see the [capability matrix](../ui-foundation.md#capability-matrix) for the equivalent PivotViewer guarantee.
 
 Use it for floating controls that must escape canvas clipping:
 
diff --git a/Documentation/PivotViewer/performance.md b/Documentation/PivotViewer/performance.md
index f1e542a0..7c24f8fd 100644
--- a/Documentation/PivotViewer/performance.md
+++ b/Documentation/PivotViewer/performance.md
@@ -150,18 +150,21 @@ const dimensions = useMemo(() => [
 <PivotViewer dimensions={dimensions} />
 ```
 
-## Benchmarks
+## Establish an application performance budget
 
-Typical performance on modern hardware:
+Components does not publish universal item-count timing claims: load, filter, grouping, layout, and sprite cost depend on the data shape, accessors, card renderer, browser, device, and whether the worker path is available. Benchmark the representative production shape on the slowest supported device before choosing a maximum collection size.
 
-| Dataset Size | Initial Load | Filter Update | Dimension Change |
-|--------------|--------------|---------------|------------------|
-| 1,000 items  | < 100ms      | < 10ms        | < 20ms           |
-| 10,000 items | < 500ms      | < 50ms        | < 100ms          |
-| 50,000 items | < 2s         | < 200ms       | < 500ms          |
-| 100,000 items| < 5s         | < 500ms       | < 1s             |
+Record at least:
 
-**Note:** Performance varies based on data complexity and device
+- time from data change to the first stable collection frame;
+- filter-update latency;
+- dimension/grouping-change latency;
+- main-thread long tasks while the worker is active;
+- worker-unavailable fallback latency;
+- memory after repeated data/filter changes;
+- zoom/pan frame rate with the representative card renderer.
+
+Use fixed fixtures and repeat each run after warm-up. Keep the dataset, browser/device, build mode, and measurement method with the result so future releases can compare like-for-like. If a budget is exceeded, reduce the client collection before rendering, provide narrower `searchFields`, simplify the card renderer, or move more filtering into the application's query/data preparation path.
 
 ## Monitoring Performance
 
diff --git a/Documentation/SchemaEditor/index.md b/Documentation/SchemaEditor/index.md
index 4b6efeb8..e559ce4e 100644
--- a/Documentation/SchemaEditor/index.md
+++ b/Documentation/SchemaEditor/index.md
@@ -73,7 +73,7 @@ SchemaEditor and [`ObjectContentEditor`](../ObjectContentEditor/index.md) share
 
 The type editor offers `string`, `integer`, `number`, and `boolean` as leaf types, plus `array` and `object` as container types, with the built-in format catalog (`DEFAULT_TYPE_FORMATS`, also exported from `types`): `guid`, `date-time`, `date`, and `time` for `string`; `int16`, `int32`, and `int64` for `integer`; `float` and `double` for `number`.
 
-What is deliberately **not** supported: JSON Schema composition keywords (`oneOf`, `anyOf`, `allOf`, `not`), `enum`/`const`, numeric or string constraints (`minimum`, `maximum`, `minLength`, `maxLength`, `pattern`), `additionalProperties`/`patternProperties`, and boolean schemas (`true`/`false` in place of a schema object). A schema authored elsewhere that uses those keywords will round-trip through SchemaEditor with those keywords dropped, not preserved-but-ignored — treat SchemaEditor as an editor for the subset above, and keep any richer validation schema as a separate, hand-maintained artifact if your application needs one.
+What is deliberately **not** supported: JSON Schema composition keywords (`oneOf`, `anyOf`, `allOf`, `not`), `enum`/`const`, numeric or string constraints (`minimum`, `maximum`, `minLength`, `maxLength`, `pattern`), `additionalProperties`/`patternProperties`, and boolean schemas (`true`/`false` in place of a schema object). SchemaEditor does not display, edit, or validate these keywords. Unrelated unknown properties are generally preserved by its clone-and-spread mutation paths, but a targeted type change intentionally rewrites fields such as `type`, `format`, `items`, or `properties` and may leave richer external constraints inconsistent. Validate edited schemas with the application's authoritative validator, or use a dedicated editor when richer vocabulary support is required.
 
 ## Table Interface
 
diff --git a/Documentation/SchemaEditor/types-formats.md b/Documentation/SchemaEditor/types-formats.md
index 2f1576e2..e624fc9a 100644
--- a/Documentation/SchemaEditor/types-formats.md
+++ b/Documentation/SchemaEditor/types-formats.md
@@ -1,317 +1,143 @@
-# SchemaEditor - Types and Formats
+# SchemaEditor - Types and formats
 
-## JSON Schema Types
+SchemaEditor authors a deliberate JSON Schema subset. It is not a complete JSON Schema validator or a general-purpose editor for every vocabulary keyword. The application remains responsible for validating stored data and any richer schema contract.
 
-### String
+## Supported property types
 
-Text data of any length.
+The built-in editor offers six types:
 
-```typescript
-{
-    type: 'string'
-}
-```
+| Type | Purpose | Nested definition |
+| --- | --- | --- |
+| `string` | Text and formatted temporal/identifier values | — |
+| `integer` | Whole numeric values | — |
+| `number` | Floating-point or decimal values | — |
+| `boolean` | True/false values | — |
+| `object` | Named nested properties | `properties` and `required` |
+| `array` | Repeated values | `items` |
 
-**Use for**: Names, descriptions, text fields, IDs
+The editor does not offer `null`, boolean schemas, or type unions such as `type: ['string', 'null']`.
 
-**Common formats**:
+## Built-in formats
 
-- `date`, `time`, `date-time` - Temporal data
-- `email` - Email addresses
-- `uri` - URLs and URIs
-- `uuid` - Unique identifiers
+The default `TypeFormat` catalog is exported as `DEFAULT_TYPE_FORMATS` from `@cratis/components/types` and contains:
 
-### Number
+| JSON type | Formats |
+| --- | --- |
+| `string` | unformatted, `guid`, `date-time`, `date`, `time` |
+| `integer` | unformatted, `int16`, `int32`, `int64` |
+| `number` | unformatted, `float`, `double` |
+| `boolean` | unformatted |
 
-Numeric values, including decimals.
+Example:
 
-```typescript
-{
-    type: 'number'
-}
+```ts
+const schema = {
+    type: 'object',
+    properties: {
+        id: { type: 'string', format: 'guid' },
+        occurred: { type: 'string', format: 'date-time' },
+        count: { type: 'integer', format: 'int32' },
+        score: { type: 'number', format: 'double' },
+        active: { type: 'boolean' },
+    },
+};
 ```
 
-**Use for**: Prices, measurements, percentages, coordinates
+`guid`, `int16`, `int32`, `int64`, `float`, and `double` are application/framework format conventions rather than standard JSON Schema validation keywords. A validator that consumes the schema must understand the formats it intends to enforce.
 
-**Validation options**:
+## Custom type-format catalogs
 
-- `minimum` / `maximum` - Range constraints
-- `multipleOf` - Must be multiple of value
-
-```typescript
-{
-    type: 'number',
-    minimum: 0,
-    maximum: 100,
-    multipleOf: 0.01  // Two decimal places
-}
-```
+Pass `typeFormats` to replace the default primitive catalog:
 
-### Integer
+```tsx
+import type { TypeFormat } from '@cratis/components/types';
 
-Whole numbers only, no decimals.
+const typeFormats: TypeFormat[] = [
+    { jsonType: 'string', format: '' },
+    { jsonType: 'string', format: 'email' },
+    { jsonType: 'string', format: 'uri' },
+    { jsonType: 'integer', format: 'int32' },
+    { jsonType: 'boolean', format: '' },
+];
 
-```typescript
-{
-    type: 'integer'
-}
+<SchemaEditor
+    schema={schema}
+    typeFormats={typeFormats}
+    onChange={setSchema}
+/>;
 ```
 
-**Use for**: Counts, quantities, IDs, ages, years
+The selected option stores the `jsonType` in `type` and a non-empty format in `format`. `array` and `object` remain available in addition to the custom primitive catalog.
 
-**Validation options**: Same as `number`
-
-```typescript
-{
-    type: 'integer',
-    minimum: 0,
-    maximum: 150
-}
-```
+A custom format changes what SchemaEditor can author. It does not register a validator or define runtime semantics automatically.
 
-### Boolean
+## Objects
 
-True or false values.
+Object properties use recursive `properties` definitions and an optional `required` string array:
 
-```typescript
-{
-    type: 'boolean'
-}
-```
-
-**Use for**: Flags, toggles, yes/no questions
-
-### Object
-
-Nested objects with their own properties.
-
-```typescript
+```ts
 {
     type: 'object',
     properties: {
         street: { type: 'string' },
         city: { type: 'string' },
-        zipCode: { type: 'string' }
     },
-    required: ['street', 'city']
-}
-```
-
-**Use for**: Complex structured data, nested entities
-
-**Additional options**:
-
-- `properties` - Define nested properties
-- `required` - List of required property names
-- `additionalProperties` - Allow/disallow extra properties
-
-### Array
-
-Lists of items, all of the same type.
-
-```typescript
-{
-    type: 'array',
-    items: { type: 'string' }
+    required: ['street', 'city'],
 }
 ```
 
-**Use for**: Lists, collections, tags, multiple selections
+Use the navigation action in the type cell to edit an object's nested properties.
 
-**Validation options**:
+## Arrays
 
-- `items` - Schema for array elements
-- `minItems` / `maxItems` - Length constraints
-- `uniqueItems` - Require unique elements
+Arrays use one recursive `items` schema:
 
-```typescript
+```ts
 {
     type: 'array',
-    items: { type: 'string', format: 'email' },
-    minItems: 1,
-    maxItems: 5,
-    uniqueItems: true
-}
-```
-
-### Null
-
-Explicit null values.
-
-```typescript
-{
-    type: 'null'
-}
-```
-
-**Use for**: Optional fields that can be explicitly null
-
-Often combined with other types:
-
-```typescript
-{
-    type: ['string', 'null']  // Can be string or null
+    items: {
+        type: 'object',
+        properties: {
+            name: { type: 'string' },
+        },
+        required: ['name'],
+    },
 }
 ```
 
-## String Formats
-
-### Date and Time
-
-#### date
-
-Full date in ISO 8601 format: `YYYY-MM-DD`
-
-```typescript
-{ type: 'string', format: 'date' }
-// Example: "2024-01-15"
-```
-
-#### time
-
-Time of day: `HH:MM:SS` or `HH:MM:SS.sss`
-
-```typescript
-{ type: 'string', format: 'time' }
-// Example: "14:30:00"
-```
-
-#### date-time
+SchemaEditor does not author tuple arrays, `minItems`, `maxItems`, or `uniqueItems`.
 
-Combined date and time with timezone: ISO 8601
+## Unsupported keywords and round trips
 
-```typescript
-{ type: 'string', format: 'date-time' }
-// Example: "2024-01-15T14:30:00Z"
-```
-
-### Identifiers
-
-#### email
-
-Email address format
-
-```typescript
-{ type: 'string', format: 'email' }
-// Example: "user@example.com"
-```
+Schema objects may arrive with keywords outside the supported subset, such as:
 
-#### uuid
+- `oneOf`, `anyOf`, `allOf`, and `not`;
+- `enum` and `const`;
+- `minimum`, `maximum`, and `multipleOf`;
+- `minLength`, `maxLength`, and `pattern`;
+- `additionalProperties` and `patternProperties`;
+- `minItems`, `maxItems`, and `uniqueItems`.
 
-UUID/GUID identifier
+SchemaEditor does not display or edit these keywords. Its mutation paths clone and spread the existing schema, so unrelated unknown properties are generally preserved while ignored. They are not validated by the editor.
 
-```typescript
-{ type: 'string', format: 'uuid' }
-// Example: "f81d4fae-7dec-11d0-a765-00a0c91e6bf6"
-```
-
-#### uri
-
-Uniform Resource Identifier
+Do not rely on blind preservation as a complete round-trip guarantee. A targeted type change intentionally rewrites structural fields such as `type`, `format`, `items`, or `properties`, and can make richer external constraints inconsistent with the new type. If an application owns a richer schema dialect, validate the result after every edit or maintain the richer contract in a dedicated schema editor.
 
-```typescript
-{ type: 'string', format: 'uri' }
-// Example: "https://example.com/path"
-```
-
-#### hostname
+## Type changes
 
-DNS hostname
+Changing a type changes the schema definition, not the application's existing data. SchemaEditor does not convert stored values.
 
-```typescript
-{ type: 'string', format: 'hostname' }
-// Example: "www.example.com"
-```
+Applications should decide how to migrate data when changing, for example:
 
-### Network
+- `string` to `number`;
+- `number` to `integer`;
+- primitive to `array` or `object`;
+- `object` or `array` to a primitive.
 
-#### ipv4
+Run application/server validation before persisting a changed schema and before applying it to existing values.
 
-IPv4 address
-
-```typescript
-{ type: 'string', format: 'ipv4' }
-// Example: "192.168.1.1"
-```
-
-#### ipv6
-
-IPv6 address
-
-```typescript
-{ type: 'string', format: 'ipv6' }
-// Example: "2001:0db8:85a3:0000:0000:8a2e:0370:7334"
-```
-
-### Other
-
-#### json-pointer
-
-JSON Pointer reference
-
-```typescript
-{ type: 'string', format: 'json-pointer' }
-// Example: "/path/to/property"
-```
-
-#### regex
-
-Regular expression pattern
-
-```typescript
-{ type: 'string', format: 'regex' }
-// Example: "^[a-zA-Z0-9]+$"
-```
-
-## Format Selection Logic
-
-In SchemaEditor:
-
-1. **Type = string**: All formats available
-2. **Type = number/integer**: No formats (formats are for strings)
-3. **Type = boolean/null**: No formats
-4. **Type = object/array**: No formats (structure defines validation)
-
-## Custom Formats
-
-Extend with custom format validators:
-
-```typescript
-const customFormats = {
-    'phone': /^\+?[1-9]\d{1,14}$/,
-    'postal-code': /^[A-Z0-9]{3,10}$/,
-    'credit-card': /^\d{13,19}$/
-};
-```
+## Related documentation
 
-Register custom formats with your JSON schema validator library.
-
-## Type Recommendations
-
-| Data | Recommended Type | Format |
-|------|-----------------|--------|
-| Person name | string | - |
-| Email address | string | email |
-| Birth date | string | date |
-| Created timestamp | string | date-time |
-| User ID | string | uuid |
-| Age | integer | - |
-| Price | number | - |
-| Quantity | integer | - |
-| Is active | boolean | - |
-| Tags | array of string | - |
-| Address | object | - |
-| Settings | object | - |
-| Phone number | string | custom: phone |
-
-## Migration Between Types
-
-When changing a property's type in SchemaEditor:
-
-- **string → number**: Existing string values must be numeric
-- **number → integer**: Decimals will be truncated
-- **any → array**: Wraps value in array
-- **any → object**: Creates object with original value
-- **array/object → primitive**: May lose data
-
-Always validate data after type changes.
+- [SchemaEditor overview](index.md)
+- [Editing properties](editing.md)
+- [Validation](validation.md)
+- [Shared JSON and schema types](../Types/index.md)

From a2285487566e8d00c6228104d8c39ff45ba4882c Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Tue, 25 Aug 2026 12:49:33 +0200
Subject: [PATCH 062/267] Add root-namespace-import removal codemod

Adds a private, unpublished Codemods workspace (not yet registered in the
root workspaces array - that lands with the ESLint/workspace wiring) built
on the installed TypeScript compiler API. The AST transform rewrites
'import { Namespace } from "@cratis/components"' into
'import * as Namespace from "@cratis/components/Namespace"' for every
namespace still reachable off the package root, while leaving the small
set of approved setup symbols (CratisComponentsProvider and friends)
importable from the root.

- lib/namespaceMap.js: the namespace -> subpath map and approved-root-symbol
  allowlist, mirrored from Source/index.ts.
- lib/transform.js: position-based text edits (not a full reprint) that
  preserve aliases, 'import type' (declaration- and specifier-level),
  split mixed imports (approved symbol + namespace) and multiple namespaces
  into one subpath import each, and are idempotent on their own output.
  Refuses to guess - and reports a diagnostic instead of editing - for
  namespace imports of the whole package, default imports, side-effect-only
  imports, unrecognized named imports, dynamic import()/require(), and any
  'export ... from' re-export form.
- scripts/remove-root-namespace-imports.js: the CLI (--check, --package,
  recursive directory walk skipping node_modules/dist/.git/.yarn).
- 14 fixture categories under test/fixtures (12+ required), each an
  input.ts/expected.ts pair, plus transform.test.js (fixture coverage,
  idempotency, targeted behaviors) and cli.test.js (usage, --check,
  in-place rewrite, directory walk, unsupported-case exit code,
  idempotent re-run).
- README.md documenting behavior and the
  'node Codemods/scripts/remove-root-namespace-imports.js <paths...>'
  invocation.

36/36 Codemods tests pass (vitest run, invoked directly - the workspace
is not yet registered with the root, so 'yarn test' from within Codemods
does not resolve until that lands separately).
---
 Codemods/README.md                            | 109 +++++++
 Codemods/lib/namespaceMap.js                  |  59 ++++
 Codemods/lib/transform.js                     | 274 ++++++++++++++++++
 Codemods/package.json                         |  20 ++
 .../scripts/remove-root-namespace-imports.js  | 118 ++++++++
 Codemods/test/cli.test.js                     | 119 ++++++++
 .../test/fixtures/alias-import/expected.ts    |   8 +
 Codemods/test/fixtures/alias-import/input.ts  |  10 +
 .../fixtures/already-migrated/expected.ts     |  10 +
 .../test/fixtures/already-migrated/input.ts   |  10 +
 .../test/fixtures/mixed-import/expected.ts    |  11 +
 Codemods/test/fixtures/mixed-import/input.ts  |  14 +
 .../fixtures/multiple-namespaces/expected.ts  |  12 +
 .../fixtures/multiple-namespaces/input.ts     |   9 +
 .../narrow-subpath-untouched/expected.ts      |   8 +
 .../narrow-subpath-untouched/input.ts         |   8 +
 .../test/fixtures/type-import/expected.ts     |   6 +
 Codemods/test/fixtures/type-import/input.ts   |   6 +
 .../unsupported-default-import/expected.ts    |   6 +
 .../unsupported-default-import/input.ts       |   6 +
 .../unsupported-dynamic-import/expected.ts    |   7 +
 .../unsupported-dynamic-import/input.ts       |   7 +
 .../fixtures/unsupported-export/expected.ts   |   5 +
 .../test/fixtures/unsupported-export/input.ts |   5 +
 .../unsupported-namespace-import/expected.ts  |   6 +
 .../unsupported-namespace-import/input.ts     |   6 +
 .../fixtures/unsupported-require/expected.ts  |   8 +
 .../fixtures/unsupported-require/input.ts     |   8 +
 .../unsupported-side-effect-only/expected.ts  |   4 +
 .../unsupported-side-effect-only/input.ts     |   4 +
 .../unsupported-unknown-symbol/expected.ts    |   6 +
 .../unsupported-unknown-symbol/input.ts       |   6 +
 .../test/fixtures/value-import/expected.ts    |   8 +
 Codemods/test/fixtures/value-import/input.ts  |   7 +
 Codemods/test/transform.test.js               | 199 +++++++++++++
 Codemods/vitest.config.js                     |   6 +
 36 files changed, 1115 insertions(+)
 create mode 100644 Codemods/README.md
 create mode 100644 Codemods/lib/namespaceMap.js
 create mode 100644 Codemods/lib/transform.js
 create mode 100644 Codemods/package.json
 create mode 100755 Codemods/scripts/remove-root-namespace-imports.js
 create mode 100644 Codemods/test/cli.test.js
 create mode 100644 Codemods/test/fixtures/alias-import/expected.ts
 create mode 100644 Codemods/test/fixtures/alias-import/input.ts
 create mode 100644 Codemods/test/fixtures/already-migrated/expected.ts
 create mode 100644 Codemods/test/fixtures/already-migrated/input.ts
 create mode 100644 Codemods/test/fixtures/mixed-import/expected.ts
 create mode 100644 Codemods/test/fixtures/mixed-import/input.ts
 create mode 100644 Codemods/test/fixtures/multiple-namespaces/expected.ts
 create mode 100644 Codemods/test/fixtures/multiple-namespaces/input.ts
 create mode 100644 Codemods/test/fixtures/narrow-subpath-untouched/expected.ts
 create mode 100644 Codemods/test/fixtures/narrow-subpath-untouched/input.ts
 create mode 100644 Codemods/test/fixtures/type-import/expected.ts
 create mode 100644 Codemods/test/fixtures/type-import/input.ts
 create mode 100644 Codemods/test/fixtures/unsupported-default-import/expected.ts
 create mode 100644 Codemods/test/fixtures/unsupported-default-import/input.ts
 create mode 100644 Codemods/test/fixtures/unsupported-dynamic-import/expected.ts
 create mode 100644 Codemods/test/fixtures/unsupported-dynamic-import/input.ts
 create mode 100644 Codemods/test/fixtures/unsupported-export/expected.ts
 create mode 100644 Codemods/test/fixtures/unsupported-export/input.ts
 create mode 100644 Codemods/test/fixtures/unsupported-namespace-import/expected.ts
 create mode 100644 Codemods/test/fixtures/unsupported-namespace-import/input.ts
 create mode 100644 Codemods/test/fixtures/unsupported-require/expected.ts
 create mode 100644 Codemods/test/fixtures/unsupported-require/input.ts
 create mode 100644 Codemods/test/fixtures/unsupported-side-effect-only/expected.ts
 create mode 100644 Codemods/test/fixtures/unsupported-side-effect-only/input.ts
 create mode 100644 Codemods/test/fixtures/unsupported-unknown-symbol/expected.ts
 create mode 100644 Codemods/test/fixtures/unsupported-unknown-symbol/input.ts
 create mode 100644 Codemods/test/fixtures/value-import/expected.ts
 create mode 100644 Codemods/test/fixtures/value-import/input.ts
 create mode 100644 Codemods/test/transform.test.js
 create mode 100644 Codemods/vitest.config.js

diff --git a/Codemods/README.md b/Codemods/README.md
new file mode 100644
index 00000000..81504537
--- /dev/null
+++ b/Codemods/README.md
@@ -0,0 +1,109 @@
+# @cratis/components-codemods
+
+Internal, unpublished codemods that support the `@cratis/components` root-namespace-removal
+migration. `Source/index.ts` currently re-exports every component subpath as a namespace off
+the package root (`import { Canvas } from '@cratis/components'`) for convenience; the
+long-term direction is to reach for the subpath directly (`@cratis/components/Canvas`) and
+keep only the primary provider setup surface at the root. See
+[`ESLint`'s `no-root-barrel-import` rule](../ESLint/README.md) for the lint-time guard that
+enforces this once a consumer has migrated.
+
+## `remove-root-namespace-imports`
+
+An idempotent, AST-based codemod built on the TypeScript compiler API (`typescript`, already
+a repository devDependency — no new dependency was added for this tool). It rewrites static
+`import` declarations only; it never guesses, and reports every case it will not touch.
+
+### What it rewrites
+
+| Before                                              | After                                                       |
+| --------------------------------------------------- | ----------------------------------------------------------- |
+| `import { Canvas } from '@cratis/components';`      | `import * as Canvas from '@cratis/components/Canvas';`      |
+| `import type { Canvas } from '@cratis/components';` | `import type * as Canvas from '@cratis/components/Canvas';` |
+| `import { Canvas as C } from '@cratis/components';` | `import * as C from '@cratis/components/Canvas';`           |
+
+Multiple namespaces in one import become one subpath import per namespace:
+
+```ts
+// Before
+import { Canvas, Common } from '@cratis/components';
+
+// After
+import * as Canvas from '@cratis/components/Canvas';
+import * as Common from '@cratis/components/Common';
+```
+
+A mixed import naming both an approved setup symbol and a namespace is split — the setup
+symbol stays at the root, the namespace moves to its subpath:
+
+```ts
+// Before
+import { CratisComponentsProvider, Canvas } from '@cratis/components';
+
+// After
+import { CratisComponentsProvider } from '@cratis/components';
+import * as Canvas from '@cratis/components/Canvas';
+```
+
+Running the codemod again on its own output is a no-op — it only ever matches an import
+whose module specifier is exactly `@cratis/components` (or the `--package` override), so an
+already-migrated subpath import is never revisited.
+
+The complete namespace → subpath map and the approved-root-symbol allowlist live in
+[`lib/namespaceMap.js`](./lib/namespaceMap.js), mirrored from `Source/index.ts`. Update both
+that file and [`ESLint/lib/rootNamespaceMap.js`](../ESLint/lib/rootNamespaceMap.js) together
+when a namespace subpath is added, renamed, or removed.
+
+### What it refuses to guess
+
+Each of these is left completely untouched, and reported as a diagnostic instead:
+
+- A namespace import of the whole package — `import * as Components from '@cratis/components';`.
+  Which subpath each later `Components.X` access belongs to cannot be inferred from the
+  import alone.
+- A default import — `import Components from '@cratis/components';`. The package has no
+  default export.
+- A side-effect-only import — `import '@cratis/components';`. There is no binding to infer a
+  subpath from.
+- A named import of a symbol that is neither an approved setup symbol nor a known namespace
+  (for example a member like `Button` that only exists _inside_ a namespace, not at the
+  root). The whole import statement is left untouched rather than partially migrated.
+- A dynamic `import('@cratis/components')` or a CommonJS `require('@cratis/components')`,
+  anywhere in the file.
+- Any `export … from '@cratis/components'` re-export form. This codemod only rewrites
+  `import` declarations; re-exports are reported with subpath guidance but not rewritten.
+
+Existing subpath imports (`@cratis/components/Canvas`, …) are never touched — narrow subpath
+consumers are left exactly as they are.
+
+### Use
+
+```sh
+# Preview what would change, without writing anything:
+node Codemods/scripts/remove-root-namespace-imports.js --check path/to/app/src
+
+# Apply the rewrite:
+node Codemods/scripts/remove-root-namespace-imports.js path/to/app/src
+
+# One specific file:
+node Codemods/scripts/remove-root-namespace-imports.js --check path/to/App.tsx
+```
+
+Exit code is non-zero whenever an unsupported case was found (with `--check` or without —
+those always need a human), and, in `--check` mode only, whenever a supported rewrite has
+not yet been applied. Run `--help` for the full option list.
+
+After running the codemod, run the project's own build/lint/test gates — the codemod only
+performs the mechanical import rewrite; it does not attempt to fix any resulting unused
+import, nor does it know whether a namespace member you use (`Canvas.Foo`) still exists at
+that subpath.
+
+### Test
+
+```sh
+cd Codemods && yarn test
+```
+
+Fixtures for every supported and unsupported case live under
+[`test/fixtures`](./test/fixtures), each as an `input.ts`/`expected.ts` pair (`input.ts` and
+`expected.ts` are identical for an unsupported case, since nothing should change).
diff --git a/Codemods/lib/namespaceMap.js b/Codemods/lib/namespaceMap.js
new file mode 100644
index 00000000..1e957d7c
--- /dev/null
+++ b/Codemods/lib/namespaceMap.js
@@ -0,0 +1,59 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+/**
+ * Single source of truth for the root-namespace-removal migration: every namespace
+ * currently re-exported from the `@cratis/components` package root, and the small set
+ * of setup symbols that remain supported at the root once the namespaces are gone.
+ *
+ * Mirrors `Source/index.ts` and the `exports` map in `Source/package.json`. When a
+ * namespace subpath is added, renamed, or removed there, update `namespaceSubpaths`
+ * here (and the matching copy in `ESLint/lib/rootNamespaceMap.js`) in the same change.
+ * Neither file imports the other: this package and `@cratis/eslint-plugin-components`
+ * ship and publish independently, so the map is intentionally duplicated rather than
+ * shared across a workspace boundary.
+ */
+
+/** The package this migration applies to by default. */
+export const packageName = '@cratis/components';
+
+/**
+ * Every namespace name importable from the package root today, mapped to the subpath
+ * it becomes: `import { Canvas } from '@cratis/components'` migrates to
+ * `import * as Canvas from '@cratis/components/Canvas'`. `Types` is the one case where
+ * the namespace name and its subpath differ in casing (`./types`, lowercase).
+ */
+export const namespaceSubpaths = {
+    Canvas: 'Canvas',
+    CommandDialog: 'CommandDialog',
+    CommandStepper: 'CommandStepper',
+    CommandForm: 'CommandForm',
+    Common: 'Common',
+    DataPage: 'DataPage',
+    DataTables: 'DataTables',
+    Dialogs: 'Dialogs',
+    Display: 'Display',
+    Dropdown: 'Dropdown',
+    Filter: 'Filter',
+    Notifications: 'Notifications',
+    ObjectContentEditor: 'ObjectContentEditor',
+    ObjectNavigationalBar: 'ObjectNavigationalBar',
+    PivotViewer: 'PivotViewer',
+    SchemaEditor: 'SchemaEditor',
+    TimeMachine: 'TimeMachine',
+    Toolbar: 'Toolbar',
+    Types: 'types',
+};
+
+/**
+ * The primary setup surface Source/index.ts re-exports directly from the root so a
+ * consumer that only wants provider setup does not need to know about the `Common`
+ * subpath. These names are never rewritten to a namespace import.
+ */
+export const approvedRootSymbols = new Set([
+    'CratisComponentsProvider',
+    'cratisDefaults',
+    'mergeCratisComponentsConfig',
+    'CratisComponentsConfig',
+    'CratisComponentsProviderProps',
+]);
diff --git a/Codemods/lib/transform.js b/Codemods/lib/transform.js
new file mode 100644
index 00000000..963d776b
--- /dev/null
+++ b/Codemods/lib/transform.js
@@ -0,0 +1,274 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import ts from 'typescript';
+import {
+    packageName as defaultPackageName,
+    namespaceSubpaths,
+    approvedRootSymbols,
+} from './namespaceMap.js';
+
+/**
+ * Rewrites static imports of the `@cratis/components` root barrel into subpath
+ * namespace imports, using the TypeScript compiler API for exact, position-based text
+ * edits rather than a full reprint — every untouched line of the file, including
+ * comments and formatting, is left byte-identical.
+ *
+ * What it does:
+ * - `import { Canvas } from '@cratis/components'` becomes
+ *   `import * as Canvas from '@cratis/components/Canvas'`.
+ * - `import type { Canvas } from '@cratis/components'` becomes
+ *   `import type * as Canvas from '@cratis/components/Canvas'`; a per-specifier
+ *   `type` modifier (`import { type Canvas } from ...`) is honored the same way.
+ * - Aliases are preserved: `import { Canvas as C } from '@cratis/components'` becomes
+ *   `import * as C from '@cratis/components/Canvas'`.
+ * - A mixed import naming both an approved setup symbol and a namespace is split: the
+ *   setup symbol stays imported from the root, each namespace becomes its own subpath
+ *   import.
+ * - An import naming several namespaces produces one subpath import per namespace, in
+ *   their original left-to-right order.
+ * - Applying the codemod again is a no-op: it only ever matches an import whose
+ *   module specifier is exactly the configured package name, so an already-migrated
+ *   subpath import is never revisited.
+ *
+ * What it deliberately refuses to guess, reporting a diagnostic instead of editing:
+ * - A namespace import of the whole package (`import * as Components from '...'`) —
+ *   which subpath each later `Components.X` access belongs to cannot be determined
+ *   from the import alone.
+ * - A default import (`import Components from '...'`) — the package has no default
+ *   export.
+ * - A side-effect-only import (`import '...'`) — there is no binding to infer a
+ *   subpath from.
+ * - A named import of a symbol that is neither an approved setup symbol nor a known
+ *   namespace — the whole import statement is left untouched so a partial, silently
+ *   incomplete migration is never produced.
+ * - A dynamic `import('...')` or CommonJS `require('...')` call anywhere in the file.
+ * - Any `export ... from '@cratis/components'` re-export form — this codemod only
+ *   rewrites `import` declarations.
+ *
+ * @param {string} fileName - Used only to select the TypeScript/TSX/JS/JSX grammar.
+ * @param {string} text - The source file's current contents.
+ * @param {{ packageName?: string }} [options]
+ * @returns {{ text: string, changed: boolean, diagnostics: Array<{ file: string, line: number, column: number, message: string }> }}
+ */
+export function transformSource(fileName, text, options = {}) {
+    const packageName = options.packageName ?? defaultPackageName;
+    const sourceFile = ts.createSourceFile(
+        fileName,
+        text,
+        ts.ScriptTarget.Latest,
+        true,
+        scriptKindFor(fileName),
+    );
+
+    const diagnostics = [];
+    const edits = [];
+
+    const isRootSpecifier = (moduleSpecifier) =>
+        !!moduleSpecifier &&
+        ts.isStringLiteral(moduleSpecifier) &&
+        moduleSpecifier.text === packageName;
+
+    const report = (node, message) => {
+        const { line, character } = sourceFile.getLineAndCharacterOfPosition(
+            node.getStart(sourceFile),
+        );
+        diagnostics.push({
+            file: fileName,
+            line: line + 1,
+            column: character + 1,
+            message,
+        });
+    };
+
+    const handleImport = (node) => {
+        if (!isRootSpecifier(node.moduleSpecifier)) return;
+
+        const importClause = node.importClause;
+        if (!importClause) {
+            report(
+                node,
+                `Side-effect-only import of '${packageName}' cannot be auto-migrated: there is no named binding to infer a subpath from. Import the specific subpath directly, or remove the import if it has no effect.`,
+            );
+            return;
+        }
+        if (importClause.name) {
+            report(
+                node,
+                `Default import of '${packageName}' cannot be auto-migrated: the package has no default export. Replace it with the subpath import(s) it actually needs.`,
+            );
+            return;
+        }
+
+        const bindings = importClause.namedBindings;
+        if (!bindings || !ts.isNamedImports(bindings)) {
+            report(
+                node,
+                `Namespace import of '${packageName}' cannot be auto-migrated: which subpath each later member access belongs to cannot be inferred from the import alone. Replace it with the specific namespace subpath import(s) it needs.`,
+            );
+            return;
+        }
+
+        const declTypeOnly = importClause.isTypeOnly;
+        const kept = [];
+        const namespaced = [];
+        let hasUnknown = false;
+
+        for (const element of bindings.elements) {
+            const importedName = (element.propertyName ?? element.name).text;
+            const localName = element.name.text;
+
+            if (approvedRootSymbols.has(importedName)) {
+                kept.push({
+                    importedName,
+                    localName,
+                    elementTypeOnly: element.isTypeOnly,
+                });
+                continue;
+            }
+            if (Object.hasOwn(namespaceSubpaths, importedName)) {
+                namespaced.push({
+                    localName,
+                    subpath: namespaceSubpaths[importedName],
+                    typeOnly: declTypeOnly || element.isTypeOnly,
+                });
+                continue;
+            }
+
+            hasUnknown = true;
+            report(
+                element,
+                `'${importedName}' is not a recognized '${packageName}' root export (neither an approved setup symbol nor a known namespace). Leaving this import untouched — add '${importedName}' to the migration map, or migrate it by hand.`,
+            );
+        }
+
+        // Never guess: an unrecognized specifier means the whole statement is left as-is,
+        // even for the specifiers this codemod does recognize.
+        if (hasUnknown) return;
+        // Nothing to migrate — the import already only names approved root symbols.
+        if (namespaced.length === 0) return;
+
+        const replacement = buildReplacementText({
+            packageName,
+            declTypeOnly,
+            kept,
+            namespaced,
+        });
+        edits.push({ start: node.getStart(sourceFile), end: node.getEnd(), replacement });
+    };
+
+    const handleExport = (node) => {
+        if (!isRootSpecifier(node.moduleSpecifier)) return;
+
+        if (node.exportClause && ts.isNamedExports(node.exportClause)) {
+            for (const element of node.exportClause.elements) {
+                const exportedName = (element.propertyName ?? element.name).text;
+                if (approvedRootSymbols.has(exportedName)) continue;
+                if (
+                    Object.hasOwn(namespaceSubpaths, exportedName)
+                ) {
+                    report(
+                        element,
+                        `Re-export '${exportedName}' from '${packageName}/${namespaceSubpaths[exportedName]}' instead of the package root barrel. This codemod only rewrites 'import' declarations — split this 'export … from' by hand (e.g. 'export * as ${exportedName} from ${JSON.stringify(`${packageName}/${namespaceSubpaths[exportedName]}`)}').`,
+                    );
+                    continue;
+                }
+                report(
+                    element,
+                    `'${exportedName}' is not a recognized '${packageName}' root export; migrate this re-export by hand.`,
+                );
+            }
+            return;
+        }
+
+        report(
+            node,
+            `A wildcard 're-export … from ${JSON.stringify(packageName)}' cannot be auto-migrated: this codemod only rewrites 'import' declarations. Replace it with explicit subpath re-exports.`,
+        );
+    };
+
+    const checkCallExpression = (node) => {
+        const isDynamicImport = node.expression.kind === ts.SyntaxKind.ImportKeyword;
+        const isRequire =
+            ts.isIdentifier(node.expression) && node.expression.text === 'require';
+        if (!isDynamicImport && !isRequire) return;
+
+        const [arg] = node.arguments;
+        if (arg && ts.isStringLiteral(arg) && arg.text === packageName) {
+            const form = isDynamicImport
+                ? "dynamic 'import(...)'"
+                : "CommonJS 'require(...)'";
+            report(
+                node,
+                `A ${form} of '${packageName}' cannot be auto-migrated: this codemod only rewrites static 'import' declarations. Replace it with the specific subpath import(s) it needs.`,
+            );
+        }
+    };
+
+    const visit = (node) => {
+        if (ts.isImportDeclaration(node)) {
+            handleImport(node);
+            return;
+        }
+        if (ts.isExportDeclaration(node)) {
+            handleExport(node);
+            return;
+        }
+        if (ts.isCallExpression(node)) {
+            checkCallExpression(node);
+        }
+        ts.forEachChild(node, visit);
+    };
+    visit(sourceFile);
+
+    if (edits.length === 0) {
+        return { text, changed: false, diagnostics };
+    }
+
+    edits.sort((a, b) => a.start - b.start);
+    let output = text;
+    for (let i = edits.length - 1; i >= 0; i--) {
+        const { start, end, replacement } = edits[i];
+        output = output.slice(0, start) + replacement + output.slice(end);
+    }
+
+    return { text: output, changed: true, diagnostics };
+}
+
+function buildReplacementText({ packageName, declTypeOnly, kept, namespaced }) {
+    const lines = [];
+
+    if (kept.length > 0) {
+        const specifiers = kept
+            .map(({ importedName, localName, elementTypeOnly }) => {
+                const prefix = !declTypeOnly && elementTypeOnly ? 'type ' : '';
+                const alias = localName === importedName ? '' : ` as ${localName}`;
+                return `${prefix}${importedName}${alias}`;
+            })
+            .join(', ');
+        lines.push(
+            `import ${declTypeOnly ? 'type ' : ''}{ ${specifiers} } from '${packageName}';`,
+        );
+    }
+
+    for (const { localName, subpath, typeOnly } of namespaced) {
+        lines.push(
+            `import ${typeOnly ? 'type ' : ''}* as ${localName} from '${packageName}/${subpath}';`,
+        );
+    }
+
+    return lines.join('\n');
+}
+
+function scriptKindFor(fileName) {
+    if (fileName.endsWith('.tsx')) return ts.ScriptKind.TSX;
+    if (fileName.endsWith('.jsx')) return ts.ScriptKind.JSX;
+    if (fileName.endsWith('.mts') || fileName.endsWith('.cts')) return ts.ScriptKind.TS;
+    if (
+        fileName.endsWith('.js') ||
+        fileName.endsWith('.mjs') ||
+        fileName.endsWith('.cjs')
+    )
+        return ts.ScriptKind.JS;
+    return ts.ScriptKind.TS;
+}
diff --git a/Codemods/package.json b/Codemods/package.json
new file mode 100644
index 00000000..2b0efd93
--- /dev/null
+++ b/Codemods/package.json
@@ -0,0 +1,20 @@
+{
+    "name": "@cratis/components-codemods",
+    "version": "0.0.0",
+    "private": true,
+    "description": "Internal codemods for migrating @cratis/components consumers off the deprecated package-root namespace barrel and onto subpath imports.",
+    "author": "Cratis",
+    "license": "MIT",
+    "type": "module",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/Cratis/Components"
+    },
+    "bin": {
+        "cratis-components-remove-root-namespace-imports": "./scripts/remove-root-namespace-imports.js"
+    },
+    "scripts": {
+        "test": "yarn g:test",
+        "ci": "yarn g:test"
+    }
+}
diff --git a/Codemods/scripts/remove-root-namespace-imports.js b/Codemods/scripts/remove-root-namespace-imports.js
new file mode 100755
index 00000000..b5d3f835
--- /dev/null
+++ b/Codemods/scripts/remove-root-namespace-imports.js
@@ -0,0 +1,118 @@
+#!/usr/bin/env node
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { readFileSync, writeFileSync, statSync, readdirSync } from 'node:fs';
+import { join, extname } from 'node:path';
+import { transformSource } from '../lib/transform.js';
+import { packageName as defaultPackageName } from '../lib/namespaceMap.js';
+
+const EXTENSIONS = new Set(['.ts', '.tsx', '.mts', '.cts']);
+const SKIP_DIRS = new Set(['node_modules', 'dist', '.git', '.yarn']);
+
+function printUsage() {
+    console.log(
+        [
+            'Usage: remove-root-namespace-imports [--check] [--package <name>] <path...>',
+            '',
+            'Rewrites \'import { Namespace } from "@cratis/components"\' into',
+            '\'import * as Namespace from "@cratis/components/Namespace"\' for every namespace',
+            'still reachable off the package root. Approved setup symbols (for example',
+            "'CratisComponentsProvider') are left importable from the root.",
+            '',
+            'Options:',
+            '  --check           Report what would change without writing files; exits 1 if',
+            '                    anything would change or any unsupported case was found.',
+            '  --package <name>  Package to migrate away from (default: @cratis/components).',
+            '',
+            '<path...> may be files or directories; directories are walked recursively for',
+            '.ts/.tsx/.mts/.cts files, skipping node_modules, dist, .git, and .yarn.',
+        ].join('\n'),
+    );
+}
+
+function collectFiles(inputPath) {
+    const stats = statSync(inputPath);
+    if (stats.isFile()) {
+        return EXTENSIONS.has(extname(inputPath)) ? [inputPath] : [];
+    }
+    if (!stats.isDirectory()) return [];
+
+    const files = [];
+    for (const entry of readdirSync(inputPath, { withFileTypes: true })) {
+        if (SKIP_DIRS.has(entry.name)) continue;
+        const entryPath = join(inputPath, entry.name);
+        if (entry.isDirectory()) {
+            files.push(...collectFiles(entryPath));
+        } else if (entry.isFile() && EXTENSIONS.has(extname(entry.name))) {
+            files.push(entryPath);
+        }
+    }
+    return files;
+}
+
+function main(argv) {
+    const args = [...argv];
+    let check = false;
+    let packageName = defaultPackageName;
+    const paths = [];
+
+    while (args.length > 0) {
+        const arg = args.shift();
+        if (arg === '--check') {
+            check = true;
+        } else if (arg === '--package') {
+            packageName = args.shift();
+        } else if (arg === '--help' || arg === '-h') {
+            printUsage();
+            return 0;
+        } else {
+            paths.push(arg);
+        }
+    }
+
+    if (paths.length === 0) {
+        printUsage();
+        return 1;
+    }
+
+    const files = paths.flatMap(collectFiles);
+    let changedCount = 0;
+    let diagnosticCount = 0;
+
+    for (const file of files) {
+        const original = readFileSync(file, 'utf8');
+        const { text, changed, diagnostics } = transformSource(file, original, {
+            packageName,
+        });
+
+        for (const diagnostic of diagnostics) {
+            diagnosticCount += 1;
+            console.warn(
+                `${diagnostic.file}:${diagnostic.line}:${diagnostic.column}: ${diagnostic.message}`,
+            );
+        }
+
+        if (changed) {
+            changedCount += 1;
+            if (check) {
+                console.log(`would rewrite ${file}`);
+            } else {
+                writeFileSync(file, text, 'utf8');
+                console.log(`rewrote ${file}`);
+            }
+        }
+    }
+
+    console.log(
+        `\n${files.length} file(s) scanned, ${changedCount} ${check ? 'would change' : 'changed'}, ${diagnosticCount} unsupported case(s) reported.`,
+    );
+
+    // Non-zero whenever there is unmigrated, unsupported material to look at by hand, or
+    // (in --check mode only) whenever a supported rewrite has not yet been applied.
+    if (diagnosticCount > 0) return 1;
+    if (check && changedCount > 0) return 1;
+    return 0;
+}
+
+process.exitCode = main(process.argv.slice(2));
diff --git a/Codemods/test/cli.test.js b/Codemods/test/cli.test.js
new file mode 100644
index 00000000..02be1144
--- /dev/null
+++ b/Codemods/test/cli.test.js
@@ -0,0 +1,119 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { mkdtempSync, mkdirSync, writeFileSync, readFileSync, rmSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { spawnSync } from 'node:child_process';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const binPath = path.join(__dirname, '..', 'scripts', 'remove-root-namespace-imports.js');
+
+let dir;
+
+beforeEach(() => {
+    dir = mkdtempSync(path.join(tmpdir(), 'cratis-components-codemod-'));
+});
+
+afterEach(() => {
+    rmSync(dir, { recursive: true, force: true });
+});
+
+const run = (args) =>
+    spawnSync(process.execPath, [binPath, ...args], { encoding: 'utf8' });
+
+describe('remove-root-namespace-imports CLI', () => {
+    it('prints usage and exits non-zero with no arguments', () => {
+        const result = run([]);
+        expect(result.status).toBe(1);
+        expect(result.stdout).toContain('Usage:');
+    });
+
+    it('--check reports a pending change without writing the file', () => {
+        const file = path.join(dir, 'App.tsx');
+        writeFileSync(file, "import { Canvas } from '@cratis/components';\n", 'utf8');
+
+        const result = run(['--check', file]);
+
+        expect(result.status).toBe(1);
+        expect(result.stdout).toContain('would rewrite');
+        expect(readFileSync(file, 'utf8')).toBe(
+            "import { Canvas } from '@cratis/components';\n",
+        );
+    });
+
+    it('rewrites a matching file in place and exits 0 when nothing is unsupported', () => {
+        const file = path.join(dir, 'App.tsx');
+        writeFileSync(file, "import { Canvas } from '@cratis/components';\n", 'utf8');
+
+        const result = run([file]);
+
+        expect(result.status).toBe(0);
+        expect(result.stdout).toContain('rewrote');
+        expect(readFileSync(file, 'utf8')).toBe(
+            "import * as Canvas from '@cratis/components/Canvas';\n",
+        );
+    });
+
+    it('walks a directory recursively, skipping node_modules', () => {
+        const nested = path.join(dir, 'src', 'nested');
+        const skipped = path.join(dir, 'node_modules', 'pkg');
+        mkdirSync(nested, { recursive: true });
+        mkdirSync(skipped, { recursive: true });
+        writeFileSync(
+            path.join(nested, 'Component.tsx'),
+            "import { Canvas } from '@cratis/components';\n",
+            'utf8',
+        );
+        writeFileSync(
+            path.join(skipped, 'index.ts'),
+            "import { Canvas } from '@cratis/components';\n",
+            'utf8',
+        );
+
+        const result = run([dir]);
+
+        expect(result.status).toBe(0);
+        expect(readFileSync(path.join(nested, 'Component.tsx'), 'utf8')).toBe(
+            "import * as Canvas from '@cratis/components/Canvas';\n",
+        );
+        expect(readFileSync(path.join(skipped, 'index.ts'), 'utf8')).toBe(
+            "import { Canvas } from '@cratis/components';\n",
+        );
+    });
+
+    it('exits non-zero and reports an unsupported case without writing', () => {
+        const file = path.join(dir, 'App.tsx');
+        writeFileSync(
+            file,
+            "import * as Components from '@cratis/components';\n",
+            'utf8',
+        );
+
+        const result = run([file]);
+
+        expect(result.status).toBe(1);
+        expect(result.stderr).toContain('Namespace import');
+        expect(readFileSync(file, 'utf8')).toBe(
+            "import * as Components from '@cratis/components';\n",
+        );
+    });
+
+    it('running twice in a row is idempotent and the second run exits 0', () => {
+        const file = path.join(dir, 'App.tsx');
+        writeFileSync(
+            file,
+            "import { Canvas, CratisComponentsProvider } from '@cratis/components';\n",
+            'utf8',
+        );
+
+        run([file]);
+        const afterFirst = readFileSync(file, 'utf8');
+        const second = run([file]);
+
+        expect(second.status).toBe(0);
+        expect(readFileSync(file, 'utf8')).toBe(afterFirst);
+    });
+});
diff --git a/Codemods/test/fixtures/alias-import/expected.ts b/Codemods/test/fixtures/alias-import/expected.ts
new file mode 100644
index 00000000..d1d23641
--- /dev/null
+++ b/Codemods/test/fixtures/alias-import/expected.ts
@@ -0,0 +1,8 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { CratisComponentsProvider as Provider } from '@cratis/components';
+import * as CanvasNamespace from '@cratis/components/Canvas';
+
+export const shapes = CanvasNamespace.ChatBubble;
+export const setup = Provider;
diff --git a/Codemods/test/fixtures/alias-import/input.ts b/Codemods/test/fixtures/alias-import/input.ts
new file mode 100644
index 00000000..0c0e0f53
--- /dev/null
+++ b/Codemods/test/fixtures/alias-import/input.ts
@@ -0,0 +1,10 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import {
+    Canvas as CanvasNamespace,
+    CratisComponentsProvider as Provider,
+} from '@cratis/components';
+
+export const shapes = CanvasNamespace.ChatBubble;
+export const setup = Provider;
diff --git a/Codemods/test/fixtures/already-migrated/expected.ts b/Codemods/test/fixtures/already-migrated/expected.ts
new file mode 100644
index 00000000..1a4c0ca6
--- /dev/null
+++ b/Codemods/test/fixtures/already-migrated/expected.ts
@@ -0,0 +1,10 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { CratisComponentsProvider } from '@cratis/components';
+import * as Canvas from '@cratis/components/Canvas';
+import type * as Types from '@cratis/components/types';
+
+export const provider = CratisComponentsProvider;
+export const shapes = Canvas.ChatBubble;
+export type Json = Types.Json;
diff --git a/Codemods/test/fixtures/already-migrated/input.ts b/Codemods/test/fixtures/already-migrated/input.ts
new file mode 100644
index 00000000..1a4c0ca6
--- /dev/null
+++ b/Codemods/test/fixtures/already-migrated/input.ts
@@ -0,0 +1,10 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { CratisComponentsProvider } from '@cratis/components';
+import * as Canvas from '@cratis/components/Canvas';
+import type * as Types from '@cratis/components/types';
+
+export const provider = CratisComponentsProvider;
+export const shapes = Canvas.ChatBubble;
+export type Json = Types.Json;
diff --git a/Codemods/test/fixtures/mixed-import/expected.ts b/Codemods/test/fixtures/mixed-import/expected.ts
new file mode 100644
index 00000000..844a9e3d
--- /dev/null
+++ b/Codemods/test/fixtures/mixed-import/expected.ts
@@ -0,0 +1,11 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { CratisComponentsProvider, cratisDefaults } from '@cratis/components';
+import * as Canvas from '@cratis/components/Canvas';
+import * as Common from '@cratis/components/Common';
+
+export const provider = CratisComponentsProvider;
+export const defaults = cratisDefaults;
+export const shapes = Canvas.ChatBubble;
+export const button = Common.Button;
diff --git a/Codemods/test/fixtures/mixed-import/input.ts b/Codemods/test/fixtures/mixed-import/input.ts
new file mode 100644
index 00000000..d7a97d17
--- /dev/null
+++ b/Codemods/test/fixtures/mixed-import/input.ts
@@ -0,0 +1,14 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import {
+    CratisComponentsProvider,
+    Canvas,
+    Common,
+    cratisDefaults,
+} from '@cratis/components';
+
+export const provider = CratisComponentsProvider;
+export const defaults = cratisDefaults;
+export const shapes = Canvas.ChatBubble;
+export const button = Common.Button;
diff --git a/Codemods/test/fixtures/multiple-namespaces/expected.ts b/Codemods/test/fixtures/multiple-namespaces/expected.ts
new file mode 100644
index 00000000..463f0aba
--- /dev/null
+++ b/Codemods/test/fixtures/multiple-namespaces/expected.ts
@@ -0,0 +1,12 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import * as Canvas from '@cratis/components/Canvas';
+import * as Common from '@cratis/components/Common';
+import * as Toolbar from '@cratis/components/Toolbar';
+import type * as Types from '@cratis/components/types';
+
+export const shapes = Canvas.ChatBubble;
+export const button = Common.Button;
+export const toolbar = Toolbar.Toolbar;
+export type Json = Types.Json;
diff --git a/Codemods/test/fixtures/multiple-namespaces/input.ts b/Codemods/test/fixtures/multiple-namespaces/input.ts
new file mode 100644
index 00000000..e3204a52
--- /dev/null
+++ b/Codemods/test/fixtures/multiple-namespaces/input.ts
@@ -0,0 +1,9 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { Canvas, Common, Toolbar, type Types } from '@cratis/components';
+
+export const shapes = Canvas.ChatBubble;
+export const button = Common.Button;
+export const toolbar = Toolbar.Toolbar;
+export type Json = Types.Json;
diff --git a/Codemods/test/fixtures/narrow-subpath-untouched/expected.ts b/Codemods/test/fixtures/narrow-subpath-untouched/expected.ts
new file mode 100644
index 00000000..cfc1bda6
--- /dev/null
+++ b/Codemods/test/fixtures/narrow-subpath-untouched/expected.ts
@@ -0,0 +1,8 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { CommandDialog } from '@cratis/components/CommandDialog';
+import { Toolbar } from '@cratis/components/Toolbar';
+
+export const dialog = CommandDialog;
+export const toolbar = Toolbar;
diff --git a/Codemods/test/fixtures/narrow-subpath-untouched/input.ts b/Codemods/test/fixtures/narrow-subpath-untouched/input.ts
new file mode 100644
index 00000000..cfc1bda6
--- /dev/null
+++ b/Codemods/test/fixtures/narrow-subpath-untouched/input.ts
@@ -0,0 +1,8 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { CommandDialog } from '@cratis/components/CommandDialog';
+import { Toolbar } from '@cratis/components/Toolbar';
+
+export const dialog = CommandDialog;
+export const toolbar = Toolbar;
diff --git a/Codemods/test/fixtures/type-import/expected.ts b/Codemods/test/fixtures/type-import/expected.ts
new file mode 100644
index 00000000..07d03368
--- /dev/null
+++ b/Codemods/test/fixtures/type-import/expected.ts
@@ -0,0 +1,6 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type * as Canvas from '@cratis/components/Canvas';
+
+export type ShapesModule = typeof Canvas;
diff --git a/Codemods/test/fixtures/type-import/input.ts b/Codemods/test/fixtures/type-import/input.ts
new file mode 100644
index 00000000..cca33ba6
--- /dev/null
+++ b/Codemods/test/fixtures/type-import/input.ts
@@ -0,0 +1,6 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { Canvas } from '@cratis/components';
+
+export type ShapesModule = typeof Canvas;
diff --git a/Codemods/test/fixtures/unsupported-default-import/expected.ts b/Codemods/test/fixtures/unsupported-default-import/expected.ts
new file mode 100644
index 00000000..40ea4c7d
--- /dev/null
+++ b/Codemods/test/fixtures/unsupported-default-import/expected.ts
@@ -0,0 +1,6 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import Components from '@cratis/components';
+
+export const shapes = Components;
diff --git a/Codemods/test/fixtures/unsupported-default-import/input.ts b/Codemods/test/fixtures/unsupported-default-import/input.ts
new file mode 100644
index 00000000..40ea4c7d
--- /dev/null
+++ b/Codemods/test/fixtures/unsupported-default-import/input.ts
@@ -0,0 +1,6 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import Components from '@cratis/components';
+
+export const shapes = Components;
diff --git a/Codemods/test/fixtures/unsupported-dynamic-import/expected.ts b/Codemods/test/fixtures/unsupported-dynamic-import/expected.ts
new file mode 100644
index 00000000..689c8029
--- /dev/null
+++ b/Codemods/test/fixtures/unsupported-dynamic-import/expected.ts
@@ -0,0 +1,7 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+export async function loadCanvas() {
+    const components = await import('@cratis/components');
+    return components;
+}
diff --git a/Codemods/test/fixtures/unsupported-dynamic-import/input.ts b/Codemods/test/fixtures/unsupported-dynamic-import/input.ts
new file mode 100644
index 00000000..689c8029
--- /dev/null
+++ b/Codemods/test/fixtures/unsupported-dynamic-import/input.ts
@@ -0,0 +1,7 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+export async function loadCanvas() {
+    const components = await import('@cratis/components');
+    return components;
+}
diff --git a/Codemods/test/fixtures/unsupported-export/expected.ts b/Codemods/test/fixtures/unsupported-export/expected.ts
new file mode 100644
index 00000000..92e01096
--- /dev/null
+++ b/Codemods/test/fixtures/unsupported-export/expected.ts
@@ -0,0 +1,5 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+export { Canvas } from '@cratis/components';
+export * from '@cratis/components';
diff --git a/Codemods/test/fixtures/unsupported-export/input.ts b/Codemods/test/fixtures/unsupported-export/input.ts
new file mode 100644
index 00000000..92e01096
--- /dev/null
+++ b/Codemods/test/fixtures/unsupported-export/input.ts
@@ -0,0 +1,5 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+export { Canvas } from '@cratis/components';
+export * from '@cratis/components';
diff --git a/Codemods/test/fixtures/unsupported-namespace-import/expected.ts b/Codemods/test/fixtures/unsupported-namespace-import/expected.ts
new file mode 100644
index 00000000..c9285288
--- /dev/null
+++ b/Codemods/test/fixtures/unsupported-namespace-import/expected.ts
@@ -0,0 +1,6 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import * as Components from '@cratis/components';
+
+export const shapes = Components.Canvas.ChatBubble;
diff --git a/Codemods/test/fixtures/unsupported-namespace-import/input.ts b/Codemods/test/fixtures/unsupported-namespace-import/input.ts
new file mode 100644
index 00000000..c9285288
--- /dev/null
+++ b/Codemods/test/fixtures/unsupported-namespace-import/input.ts
@@ -0,0 +1,6 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import * as Components from '@cratis/components';
+
+export const shapes = Components.Canvas.ChatBubble;
diff --git a/Codemods/test/fixtures/unsupported-require/expected.ts b/Codemods/test/fixtures/unsupported-require/expected.ts
new file mode 100644
index 00000000..ca624636
--- /dev/null
+++ b/Codemods/test/fixtures/unsupported-require/expected.ts
@@ -0,0 +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 function loadCanvas() {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    const components = require('@cratis/components');
+    return components;
+}
diff --git a/Codemods/test/fixtures/unsupported-require/input.ts b/Codemods/test/fixtures/unsupported-require/input.ts
new file mode 100644
index 00000000..ca624636
--- /dev/null
+++ b/Codemods/test/fixtures/unsupported-require/input.ts
@@ -0,0 +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 function loadCanvas() {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    const components = require('@cratis/components');
+    return components;
+}
diff --git a/Codemods/test/fixtures/unsupported-side-effect-only/expected.ts b/Codemods/test/fixtures/unsupported-side-effect-only/expected.ts
new file mode 100644
index 00000000..d3953af8
--- /dev/null
+++ b/Codemods/test/fixtures/unsupported-side-effect-only/expected.ts
@@ -0,0 +1,4 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import '@cratis/components';
diff --git a/Codemods/test/fixtures/unsupported-side-effect-only/input.ts b/Codemods/test/fixtures/unsupported-side-effect-only/input.ts
new file mode 100644
index 00000000..d3953af8
--- /dev/null
+++ b/Codemods/test/fixtures/unsupported-side-effect-only/input.ts
@@ -0,0 +1,4 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import '@cratis/components';
diff --git a/Codemods/test/fixtures/unsupported-unknown-symbol/expected.ts b/Codemods/test/fixtures/unsupported-unknown-symbol/expected.ts
new file mode 100644
index 00000000..b706c824
--- /dev/null
+++ b/Codemods/test/fixtures/unsupported-unknown-symbol/expected.ts
@@ -0,0 +1,6 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { Button } from '@cratis/components';
+
+export const button = Button;
diff --git a/Codemods/test/fixtures/unsupported-unknown-symbol/input.ts b/Codemods/test/fixtures/unsupported-unknown-symbol/input.ts
new file mode 100644
index 00000000..b706c824
--- /dev/null
+++ b/Codemods/test/fixtures/unsupported-unknown-symbol/input.ts
@@ -0,0 +1,6 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { Button } from '@cratis/components';
+
+export const button = Button;
diff --git a/Codemods/test/fixtures/value-import/expected.ts b/Codemods/test/fixtures/value-import/expected.ts
new file mode 100644
index 00000000..b4003d4a
--- /dev/null
+++ b/Codemods/test/fixtures/value-import/expected.ts
@@ -0,0 +1,8 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import * as Canvas from '@cratis/components/Canvas';
+import * as CommandDialog from '@cratis/components/CommandDialog';
+
+export const shapes = Canvas.ChatBubble;
+export const dialog = CommandDialog.CommandDialog;
diff --git a/Codemods/test/fixtures/value-import/input.ts b/Codemods/test/fixtures/value-import/input.ts
new file mode 100644
index 00000000..b2069535
--- /dev/null
+++ b/Codemods/test/fixtures/value-import/input.ts
@@ -0,0 +1,7 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { Canvas, CommandDialog } from '@cratis/components';
+
+export const shapes = Canvas.ChatBubble;
+export const dialog = CommandDialog.CommandDialog;
diff --git a/Codemods/test/transform.test.js b/Codemods/test/transform.test.js
new file mode 100644
index 00000000..b0c0e1b5
--- /dev/null
+++ b/Codemods/test/transform.test.js
@@ -0,0 +1,199 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { readFileSync, readdirSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import path from 'node:path';
+import { describe, expect, it } from 'vitest';
+import { transformSource } from '../lib/transform.js';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const fixturesDir = path.join(__dirname, 'fixtures');
+
+const readFixture = (name, file) =>
+    readFileSync(path.join(fixturesDir, name, file), 'utf8');
+
+// Fixtures where the codemod is expected to rewrite input.ts into expected.ts.
+const supportedCases = [
+    'value-import',
+    'type-import',
+    'alias-import',
+    'mixed-import',
+    'multiple-namespaces',
+];
+
+// Fixtures where the codemod must leave the file completely untouched: either because it
+// is already migrated / already narrow, or because the case is deliberately unsupported and
+// reported rather than guessed at.
+const unchangedCases = [
+    'already-migrated',
+    'narrow-subpath-untouched',
+    'unsupported-namespace-import',
+    'unsupported-default-import',
+    'unsupported-dynamic-import',
+    'unsupported-require',
+    'unsupported-unknown-symbol',
+    'unsupported-side-effect-only',
+    'unsupported-export',
+];
+
+const unsupportedCases = new Set([
+    'unsupported-namespace-import',
+    'unsupported-default-import',
+    'unsupported-dynamic-import',
+    'unsupported-require',
+    'unsupported-unknown-symbol',
+    'unsupported-side-effect-only',
+    'unsupported-export',
+]);
+
+describe('transformSource — fixture coverage', () => {
+    it('covers every fixture directory with a supported or unchanged expectation', () => {
+        const allFixtureDirs = readdirSync(fixturesDir, { withFileTypes: true })
+            .filter((entry) => entry.isDirectory())
+            .map((entry) => entry.name);
+        const covered = new Set([...supportedCases, ...unchangedCases]);
+
+        expect(new Set(allFixtureDirs)).toEqual(covered);
+    });
+
+    for (const name of supportedCases) {
+        it(`rewrites '${name}' to its expected output and reports no diagnostics`, () => {
+            const input = readFixture(name, 'input.ts');
+            const expected = readFixture(name, 'expected.ts');
+
+            const result = transformSource(`${name}/input.ts`, input);
+
+            expect(result.text).toBe(expected);
+            expect(result.changed).toBe(true);
+            expect(result.diagnostics).toEqual([]);
+        });
+    }
+
+    for (const name of unchangedCases) {
+        it(`leaves '${name}' completely unchanged`, () => {
+            const input = readFixture(name, 'input.ts');
+            const expected = readFixture(name, 'expected.ts');
+            expect(expected).toBe(input); // fixture sanity: expected.ts must equal input.ts here
+
+            const result = transformSource(`${name}/input.ts`, input);
+
+            expect(result.text).toBe(input);
+            expect(result.changed).toBe(false);
+        });
+    }
+
+    for (const name of unsupportedCases) {
+        it(`reports at least one diagnostic for '${name}'`, () => {
+            const input = readFixture(name, 'input.ts');
+            const result = transformSource(`${name}/input.ts`, input);
+
+            expect(result.diagnostics.length).toBeGreaterThan(0);
+            for (const diagnostic of result.diagnostics) {
+                expect(diagnostic.file).toBe(`${name}/input.ts`);
+                expect(diagnostic.line).toBeGreaterThan(0);
+                expect(diagnostic.column).toBeGreaterThan(0);
+                expect(diagnostic.message.length).toBeGreaterThan(0);
+            }
+        });
+    }
+
+    it('reports no diagnostics for already-migrated or narrow-subpath-only files', () => {
+        for (const name of ['already-migrated', 'narrow-subpath-untouched']) {
+            const input = readFixture(name, 'input.ts');
+            const result = transformSource(`${name}/input.ts`, input);
+            expect(result.diagnostics).toEqual([]);
+        }
+    });
+
+    it('is idempotent: re-running on its own output for every supported fixture changes nothing further', () => {
+        for (const name of supportedCases) {
+            const expected = readFixture(name, 'expected.ts');
+            const second = transformSource(`${name}/expected.ts`, expected);
+
+            expect(second.text).toBe(expected);
+            expect(second.changed).toBe(false);
+            expect(second.diagnostics).toEqual([]);
+        }
+    });
+
+    it('is idempotent: re-running twice in a row on a fresh input converges to the same fixed point', () => {
+        const input = readFixture('mixed-import', 'input.ts');
+        const first = transformSource('mixed-import/input.ts', input);
+        const second = transformSource('mixed-import/input.ts', first.text);
+        const third = transformSource('mixed-import/input.ts', second.text);
+
+        expect(second.text).toBe(first.text);
+        expect(second.changed).toBe(false);
+        expect(third.text).toBe(first.text);
+    });
+});
+
+describe('transformSource — targeted behavior', () => {
+    it('preserves an unrelated existing subpath import untouched alongside a rewritten root import', () => {
+        const input = [
+            "import { Dialog } from '@cratis/components/Dialogs';",
+            "import { Canvas } from '@cratis/components';",
+            '',
+            'export const dialog = Dialog;',
+            'export const shapes = Canvas;',
+            '',
+        ].join('\n');
+
+        const result = transformSource('file.ts', input);
+
+        expect(result.text).toBe(
+            [
+                "import { Dialog } from '@cratis/components/Dialogs';",
+                "import * as Canvas from '@cratis/components/Canvas';",
+                '',
+                'export const dialog = Dialog;',
+                'export const shapes = Canvas;',
+                '',
+            ].join('\n'),
+        );
+        expect(result.changed).toBe(true);
+    });
+
+    it('respects a custom package name and ignores the default package name', () => {
+        const input =
+            "import { Canvas } from '@acme/ui';\nimport { Canvas as C2 } from '@cratis/components';\n";
+
+        const result = transformSource('file.ts', input, { packageName: '@acme/ui' });
+
+        expect(result.text).toBe(
+            "import * as Canvas from '@acme/ui/Canvas';\nimport { Canvas as C2 } from '@cratis/components';\n",
+        );
+    });
+
+    it('leaves a package name that merely shares a prefix untouched', () => {
+        const input = "import { Canvas } from '@cratis/components-extra';\n";
+
+        const result = transformSource('file.ts', input);
+
+        expect(result.text).toBe(input);
+        expect(result.changed).toBe(false);
+        expect(result.diagnostics).toEqual([]);
+    });
+
+    it('does not report or change a file with no @cratis/components import at all', () => {
+        const input = "import { useState } from 'react';\nexport const x = useState;\n";
+
+        const result = transformSource('file.tsx', input);
+
+        expect(result.text).toBe(input);
+        expect(result.changed).toBe(false);
+        expect(result.diagnostics).toEqual([]);
+    });
+
+    it('leaves the whole statement untouched when one specifier is unrecognized, even with a recognized namespace alongside it', () => {
+        const input = "import { Canvas, Button } from '@cratis/components';\n";
+
+        const result = transformSource('file.ts', input);
+
+        expect(result.text).toBe(input);
+        expect(result.changed).toBe(false);
+        expect(result.diagnostics).toHaveLength(1);
+        expect(result.diagnostics[0].message).toContain("'Button'");
+    });
+});
diff --git a/Codemods/vitest.config.js b/Codemods/vitest.config.js
new file mode 100644
index 00000000..a0990f5b
--- /dev/null
+++ b/Codemods/vitest.config.js
@@ -0,0 +1,6 @@
+export default {
+    test: {
+        include: ['test/**/*.test.js'],
+        environment: 'node',
+    },
+};

From 0b2c1246b329ce8bdad904f5000be00af1c63b01 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Tue, 25 Aug 2026 12:51:46 +0200
Subject: [PATCH 063/267] Make no-root-barrel-import namespace-aware with a
 safe autofix

Extends 'no-root-barrel-import' from a blanket 'any import of the barrel
is an error' check into the same namespace-aware behavior as the
Codemods package, so lint-time enforcement and the migration tool agree
exactly:

- lib/rootNamespaceMap.js: the namespace -> subpath map and
  approved-root-symbol allowlist. Deliberately duplicated from
  Codemods/lib/namespaceMap.js rather than imported across the workspace
  boundary - this plugin and the codemods package ship and publish
  independently. Update both together when Source/index.ts's namespace
  set changes.
- lib/noRootBarrelImport.js: approved setup symbols (CratisComponentsProvider
  and friends) stay valid at the root. A namespace import is flagged with
  exact subpath guidance and, for the unambiguous case (every named
  specifier in the statement is a known namespace or an approved symbol),
  autofixed to 'import * as Namespace from "@cratis/components/Namespace"',
  preserving aliases and 'import type' (declaration- and specifier-level),
  and splitting a mixed approved-symbol+namespace import. No autofix -
  guidance only - for a namespace import of the whole package, a default
  import, a side-effect-only import, an unrecognized named import, or any
  're-export ... from' form; the rule never guesses at an ambiguous or
  unsafe rewrite.
- test/rules.test.js: no-root-barrel-import's case count goes from 8 to
  29 (20+ required), covering every valid/invalid/autofix/no-fix
  combination above, using the TypeScript-parser RuleTester so 'import
  type' fixtures parse.
- README.md: rule table entry, options comment, and a full '###
  no-root-barrel-import' section with before/after examples, the
  never-guess list, and a pointer to the companion Codemods package.

75/75 ESLint workspace tests pass (vitest run via 'yarn g:test').
---
 ESLint/README.md                 |  55 +++++++-
 ESLint/lib/noRootBarrelImport.js | 220 +++++++++++++++++++++++++++----
 ESLint/lib/rootNamespaceMap.js   |  56 ++++++++
 ESLint/test/rules.test.js        | 201 ++++++++++++++++++++++++++--
 4 files changed, 498 insertions(+), 34 deletions(-)
 create mode 100644 ESLint/lib/rootNamespaceMap.js

diff --git a/ESLint/README.md b/ESLint/README.md
index f523e8e8..f5e41142 100644
--- a/ESLint/README.md
+++ b/ESLint/README.md
@@ -5,7 +5,7 @@ Cratis base config, [`@cratis/eslint-config`](https://www.npmjs.com/package/@cra
 
 | Rule | What it does |
 |---|---|
-| `no-root-barrel-import` | Disallows importing from the `@cratis/components` root barrel. Use a subpath export (`@cratis/components/CommandDialog`, `@cratis/components/DataPage`, `@cratis/components/Toolbar`, …) — the root pulls the whole optional-peer-heavy surface and hides intent. |
+| `no-root-barrel-import` | Disallows importing a component namespace from the `@cratis/components` root barrel. Use a subpath export (`@cratis/components/CommandDialog`, `@cratis/components/DataPage`, `@cratis/components/Toolbar`, …) — the root pulls the whole optional-peer-heavy surface and hides intent. The approved setup surface (`CratisComponentsProvider` and friends) remains allowed at the root; a single-namespace violation is autofixed. |
 | `no-primereact-dialog` | Disallows importing `Dialog` from `primereact/dialog`. Use `CommandDialog` from `@cratis/components/CommandDialog`, or `Dialog` from `@cratis/components/Dialogs` — the wrappers add Arc command binding, overlay/focus fixes, and theming. |
 | `onbeforeexecute-must-return` | Requires an `onBeforeExecute` callback to return the command values. `onBeforeExecute` is a transformer — a body that can complete without returning executes the command with `undefined` (silent data loss). |
 | `no-hooks-in-view-model` | Disallows React hooks (including generated Arc proxies' `.use()`) inside a view model class. View models must be plain, hook-free classes that receive injected abstractions. |
@@ -38,7 +38,7 @@ export default [
 ```js
 '@cratis/components/no-root-barrel-import': ['error', {
     packageName: '@cratis/components',  // barrel to forbid
-    allow: [],                          // exact specifiers to permit
+    allow: [],                          // exact specifiers to permit wholesale
 }],
 '@cratis/components/no-primereact-dialog': ['error', {
     source: 'primereact/dialog',        // module to forbid
@@ -71,6 +71,57 @@ owned-label prop follows one consistent naming and JSDoc convention).
 
 ## Rules
 
+### `no-root-barrel-import`
+
+`@cratis/components` re-exports every component subpath as a namespace off the package root
+(`import { Canvas } from '@cratis/components'`) purely for discoverability. The rule keeps a
+fixed map of every current namespace name to its subpath, plus a short allowlist of setup
+symbols (`CratisComponentsProvider`, `cratisDefaults`, `mergeCratisComponentsConfig`,
+`CratisComponentsConfig`, `CratisComponentsProviderProps`) that stay importable from the root:
+
+```ts
+// ✅ approved setup symbols stay at the root
+import { CratisComponentsProvider } from '@cratis/components';
+
+// ❌ a component namespace imported from the root barrel
+import { Canvas } from '@cratis/components';
+
+// ✅ the same namespace, imported from its subpath
+import * as Canvas from '@cratis/components/Canvas';
+```
+
+A single-namespace violation is autofixed to the namespace form shown above, preserving an
+alias (`Canvas as C`) and `import type` (`import type { Canvas } from '@cratis/components'`
+becomes `import type * as Canvas from '@cratis/components/Canvas'`, and a per-specifier
+`type` modifier is honored the same way). A mixed import naming both a setup symbol and a
+namespace is split — the setup symbol stays imported from the root, the namespace moves:
+
+```ts
+// Before
+import { CratisComponentsProvider, Canvas } from '@cratis/components';
+
+// After (autofixed)
+import { CratisComponentsProvider } from '@cratis/components';
+import * as Canvas from '@cratis/components/Canvas';
+```
+
+The rule never guesses. Each of these is flagged with guidance but **not** autofixed:
+
+- A namespace import of the whole package (`import * as Everything from '@cratis/components'`)
+  — which subpath each later member access belongs to cannot be inferred from the import alone.
+- A default import (`import Everything from '@cratis/components'`) — the package has no
+  default export.
+- A side-effect-only import (`import '@cratis/components'`) — there is no binding to infer a
+  subpath from.
+- A named import of a symbol that is neither an approved setup symbol nor a known namespace
+  (for example a member that only exists _inside_ a namespace, not at the root) — the whole
+  statement is left unfixed rather than partially migrated.
+- Any `export … from '@cratis/components'` re-export form — flagged with the same subpath
+  guidance, but re-exports are never autofixed.
+
+A companion, standalone codemod applies the same rewrite across a whole project in one pass;
+see [`Codemods`](../Codemods/README.md).
+
 ### `onbeforeexecute-must-return`
 
 `onBeforeExecute` (on `CommandDialog`, `StepperCommandDialog`, `CommandScope`, …) is a
diff --git a/ESLint/lib/noRootBarrelImport.js b/ESLint/lib/noRootBarrelImport.js
index 03ae4a93..d66e75f5 100644
--- a/ESLint/lib/noRootBarrelImport.js
+++ b/ESLint/lib/noRootBarrelImport.js
@@ -1,48 +1,220 @@
+import { namespaceSubpaths, approvedRootSymbols } from './rootNamespaceMap.js';
+
 const DEFAULTS = { packageName: '@cratis/components', allow: [] };
 
-// Disallow importing from the Cratis Components root barrel. The package exposes
-// purpose-built subpath exports (`@cratis/components/CommandDialog`,
-// `@cratis/components/DataPage`, `@cratis/components/Toolbar`, …); importing the root
-// pulls the whole optional-peer-heavy surface and hides intent. Covers `import` and
-// re-`export … from` forms.
+// Disallow importing a component namespace from the Cratis Components root barrel. The
+// package exposes purpose-built subpath exports (`@cratis/components/CommandDialog`,
+// `@cratis/components/DataPage`, `@cratis/components/Toolbar`, …); importing a namespace
+// from the root pulls the whole optional-peer-heavy surface and hides intent. The small,
+// approved setup surface (`CratisComponentsProvider` and friends) remains importable from
+// the root. Covers `import` and re-`export … from` forms; only the `import` form is
+// autofixed, and only when every named specifier in the statement is unambiguous.
 export const noRootBarrelImport = {
     meta: {
         type: 'suggestion',
+        fixable: 'code',
         docs: {
-            description: 'Disallow importing from the @cratis/components root barrel; use a subpath export.',
+            description:
+                'Disallow importing a component namespace from the @cratis/components root barrel; use a subpath export. Approved setup symbols (e.g. CratisComponentsProvider) remain allowed at the root.',
             recommended: true,
             url: 'https://github.com/Cratis/Components/blob/main/ESLint/README.md',
         },
-        schema: [{
-            type: 'object',
-            properties: {
-                packageName: { type: 'string' },
-                allow: { type: 'array', items: { type: 'string' } },
+        schema: [
+            {
+                type: 'object',
+                properties: {
+                    packageName: { type: 'string' },
+                    allow: { type: 'array', items: { type: 'string' } },
+                },
+                additionalProperties: false,
             },
-            additionalProperties: false,
-        }],
+        ],
         messages: {
-            useSubpath: "Import from a '{{packageName}}' subpath (e.g. '{{packageName}}/CommandDialog'), not the package root barrel.",
+            useNamespaceSubpath:
+                "Import '{{name}}' from '{{packageName}}/{{subpath}}' as a namespace instead of the package root barrel: import * as {{name}} from '{{packageName}}/{{subpath}}'.",
+            useNamespaceSubpathExport:
+                "Re-export '{{name}}' from '{{packageName}}/{{subpath}}' instead of the package root barrel: export * as {{name}} from '{{packageName}}/{{subpath}}'. This is not autofixed — verify downstream default-export expectations.",
+            unknownSymbol:
+                "'{{name}}' is not a recognized '{{packageName}}' root export (neither an approved setup symbol nor a known namespace). Import it from its specific subpath instead of the package root.",
+            unknownSymbolExport:
+                "'{{name}}' is not a recognized '{{packageName}}' root export (neither an approved setup symbol nor a known namespace). Re-export it from its specific subpath instead of the package root.",
+            ambiguousImport:
+                "This import of '{{packageName}}' cannot be safely auto-migrated off the root barrel — move each symbol to its subpath import manually. See ESLint/README.md.",
+            ambiguousExport:
+                "This wildcard re-export of '{{packageName}}' cannot be safely auto-migrated off the root barrel — replace it with explicit subpath re-exports.",
         },
     },
     create(context) {
         const options = { ...DEFAULTS, ...(context.options[0] ?? {}) };
+        const packageName = options.packageName;
         const allow = new Set(options.allow);
 
-        const check = node => {
-            const source = node.source;
-            if (!source || typeof source.value !== 'string') return;
-            if (source.value === options.packageName && !allow.has(source.value)) {
-                context.report({ node: source, messageId: 'useSubpath', data: { packageName: options.packageName } });
-            }
-        };
+        const isRootSpecifier = (source) =>
+            !!source &&
+            typeof source.value === 'string' &&
+            source.value === packageName &&
+            !allow.has(source.value);
 
         return {
-            ImportDeclaration: check,
-            ExportNamedDeclaration: check,
-            ExportAllDeclaration: check,
+            ImportDeclaration(node) {
+                if (!isRootSpecifier(node.source)) return;
+                checkImport(context, node, packageName);
+            },
+            ExportNamedDeclaration(node) {
+                if (!isRootSpecifier(node.source)) return;
+                checkNamedExport(context, node, packageName);
+            },
+            ExportAllDeclaration(node) {
+                if (!isRootSpecifier(node.source)) return;
+                context.report({
+                    node: node.source,
+                    messageId: 'ambiguousExport',
+                    data: { packageName },
+                });
+            },
         };
     },
 };
 
+function checkImport(context, node, packageName) {
+    // No specifiers at all: `import '@cratis/components';` — nothing to infer a subpath
+    // from.
+    if (node.specifiers.length === 0) {
+        context.report({
+            node: node.source,
+            messageId: 'ambiguousImport',
+            data: { packageName },
+        });
+        return;
+    }
+
+    // `import Default from '...'` and/or `import * as Namespace from '...'`.
+    const hasDefault = node.specifiers.some((s) => s.type === 'ImportDefaultSpecifier');
+    const hasNamespace = node.specifiers.some(
+        (s) => s.type === 'ImportNamespaceSpecifier',
+    );
+    if (hasDefault || hasNamespace) {
+        context.report({
+            node: node.source,
+            messageId: 'ambiguousImport',
+            data: { packageName },
+        });
+        return;
+    }
+
+    const named = node.specifiers.filter((s) => s.type === 'ImportSpecifier');
+    const kept = [];
+    const namespaced = [];
+    let hasUnknown = false;
+
+    for (const specifier of named) {
+        const importedName = specifier.imported.name ?? specifier.imported.value;
+
+        if (approvedRootSymbols.has(importedName)) {
+            kept.push(specifier);
+            continue;
+        }
+        if (Object.hasOwn(namespaceSubpaths, importedName)) {
+            namespaced.push({ specifier, subpath: namespaceSubpaths[importedName] });
+            continue;
+        }
+
+        hasUnknown = true;
+        context.report({
+            node: specifier,
+            messageId: 'unknownSymbol',
+            data: { name: importedName, packageName },
+        });
+    }
+
+    if (namespaced.length === 0) return; // nothing to move (all approved, or all unknown-and-already-reported).
+
+    // Never guess: an unrecognized specifier means no autofix for the whole statement,
+    // even for the specifiers this rule does recognize.
+    const fix = hasUnknown
+        ? undefined
+        : (fixer) => [
+              fixer.replaceText(
+                  node,
+                  buildReplacementText({
+                      packageName,
+                      declTypeOnly: node.importKind === 'type',
+                      kept,
+                      namespaced,
+                  }),
+              ),
+          ];
+
+    for (const { specifier, subpath } of namespaced) {
+        const importedName = specifier.imported.name ?? specifier.imported.value;
+        context.report({
+            node: specifier,
+            messageId: 'useNamespaceSubpath',
+            data: { name: importedName, packageName, subpath },
+            fix,
+        });
+    }
+}
+
+function checkNamedExport(context, node, packageName) {
+    if (!node.specifiers || node.specifiers.length === 0) {
+        // `export {} from '@cratis/components';` — nothing to report.
+        return;
+    }
+
+    for (const specifier of node.specifiers) {
+        const localNode = specifier.local ?? specifier;
+        const exportedName = localNode.name ?? localNode.value;
+
+        if (approvedRootSymbols.has(exportedName)) continue;
+        if (Object.hasOwn(namespaceSubpaths, exportedName)) {
+            context.report({
+                node: specifier,
+                messageId: 'useNamespaceSubpathExport',
+                data: {
+                    name: exportedName,
+                    packageName,
+                    subpath: namespaceSubpaths[exportedName],
+                },
+            });
+            continue;
+        }
+
+        context.report({
+            node: specifier,
+            messageId: 'unknownSymbolExport',
+            data: { name: exportedName, packageName },
+        });
+    }
+}
+
+function specifierText(specifier, prefix = '') {
+    const importedName = specifier.imported.name ?? specifier.imported.value;
+    const localName = specifier.local.name;
+    const typeOnly = specifier.importKind === 'type';
+    const alias = localName === importedName ? '' : ` as ${localName}`;
+    return `${prefix}${typeOnly ? 'type ' : ''}${importedName}${alias}`;
+}
+
+function buildReplacementText({ packageName, declTypeOnly, kept, namespaced }) {
+    const lines = [];
+
+    if (kept.length > 0) {
+        const specifiers = kept.map((specifier) => specifierText(specifier)).join(', ');
+        lines.push(
+            `import ${declTypeOnly ? 'type ' : ''}{ ${specifiers} } from '${packageName}';`,
+        );
+    }
+
+    for (const { specifier, subpath } of namespaced) {
+        const localName = specifier.local.name;
+        const typeOnly = declTypeOnly || specifier.importKind === 'type';
+        lines.push(
+            `import ${typeOnly ? 'type ' : ''}* as ${localName} from '${packageName}/${subpath}';`,
+        );
+    }
+
+    return lines.join('\n');
+}
+
 export default noRootBarrelImport;
diff --git a/ESLint/lib/rootNamespaceMap.js b/ESLint/lib/rootNamespaceMap.js
new file mode 100644
index 00000000..179348a3
--- /dev/null
+++ b/ESLint/lib/rootNamespaceMap.js
@@ -0,0 +1,56 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+/**
+ * Single source of truth for `no-root-barrel-import`'s namespace-aware behavior: every
+ * namespace currently re-exported from the `@cratis/components` package root, and the
+ * small set of setup symbols that remain supported at the root.
+ *
+ * Mirrors `Source/index.ts` and the `exports` map in `Source/package.json`. When a
+ * namespace subpath is added, renamed, or removed there, update `namespaceSubpaths` here
+ * (and the matching copy in `Codemods/lib/namespaceMap.js`) in the same change. Neither
+ * file imports the other: this plugin and the codemods package ship and publish
+ * independently, so the map is intentionally duplicated rather than shared across a
+ * workspace boundary.
+ */
+
+/**
+ * Every namespace name importable from the package root today, mapped to the subpath it
+ * belongs to: importing `Canvas` from the root should instead be
+ * `import * as Canvas from '@cratis/components/Canvas'`. `Types` is the one case where the
+ * namespace name and its subpath differ in casing (`./types`, lowercase).
+ */
+export const namespaceSubpaths = {
+    Canvas: 'Canvas',
+    CommandDialog: 'CommandDialog',
+    CommandStepper: 'CommandStepper',
+    CommandForm: 'CommandForm',
+    Common: 'Common',
+    DataPage: 'DataPage',
+    DataTables: 'DataTables',
+    Dialogs: 'Dialogs',
+    Display: 'Display',
+    Dropdown: 'Dropdown',
+    Filter: 'Filter',
+    Notifications: 'Notifications',
+    ObjectContentEditor: 'ObjectContentEditor',
+    ObjectNavigationalBar: 'ObjectNavigationalBar',
+    PivotViewer: 'PivotViewer',
+    SchemaEditor: 'SchemaEditor',
+    TimeMachine: 'TimeMachine',
+    Toolbar: 'Toolbar',
+    Types: 'types',
+};
+
+/**
+ * The primary setup surface `Source/index.ts` re-exports directly from the root so a
+ * consumer that only wants provider setup does not need to know about the `Common`
+ * subpath. Importing one of these from the package root is allowed.
+ */
+export const approvedRootSymbols = new Set([
+    'CratisComponentsProvider',
+    'cratisDefaults',
+    'mergeCratisComponentsConfig',
+    'CratisComponentsConfig',
+    'CratisComponentsProviderProps',
+]);
diff --git a/ESLint/test/rules.test.js b/ESLint/test/rules.test.js
index 6e2603c5..80dde483 100644
--- a/ESLint/test/rules.test.js
+++ b/ESLint/test/rules.test.js
@@ -26,33 +26,218 @@ const tsRuleTester = new RuleTester({
     },
 });
 
-ruleTester.run('no-root-barrel-import', noRootBarrelImport, {
+tsRuleTester.run('no-root-barrel-import', noRootBarrelImport, {
     valid: [
+        // Subpath imports are always fine, whatever the export.
         "import { CommandDialog } from '@cratis/components/CommandDialog';",
         "import { DataPage } from '@cratis/components/DataPage';",
         "import { useState } from 'react';",
-        "export { Toolbar } from '@cratis/components/Toolbar';",
         // Not the same package — a longer name that merely starts the same.
         "import x from '@cratis/components-extra';",
+        // Approved setup symbols remain importable from the root, singly, combined, aliased,
+        // and as types.
+        "import { CratisComponentsProvider } from '@cratis/components';",
+        "import { CratisComponentsProvider, cratisDefaults, mergeCratisComponentsConfig } from '@cratis/components';",
+        "import { CratisComponentsProvider as Provider } from '@cratis/components';",
+        "import type { CratisComponentsConfig, CratisComponentsProviderProps } from '@cratis/components';",
+        "import { type CratisComponentsConfig } from '@cratis/components';",
+        // Re-exporting an approved setup symbol from the root is fine too.
+        "export { CratisComponentsProvider } from '@cratis/components';",
+        // The 'allow' option still permits an exact specifier wholesale.
+        {
+            code: "import { Canvas } from '@cratis/components';",
+            options: [{ allow: ['@cratis/components'] }],
+        },
     ],
     invalid: [
         {
+            // A single namespace is autofixed to its subpath, as a namespace import.
+            code: "import { Canvas } from '@cratis/components';",
+            errors: [
+                {
+                    messageId: 'useNamespaceSubpath',
+                    data: { name: 'Canvas', packageName: '@cratis/components', subpath: 'Canvas' },
+                },
+            ],
+            output: "import * as Canvas from '@cratis/components/Canvas';",
+        },
+        {
+            // 'import type' is preserved on the generated namespace import.
+            code: "import type { Canvas } from '@cratis/components';",
+            errors: [
+                {
+                    messageId: 'useNamespaceSubpath',
+                    data: { name: 'Canvas', packageName: '@cratis/components', subpath: 'Canvas' },
+                },
+            ],
+            output: "import type * as Canvas from '@cratis/components/Canvas';",
+        },
+        {
+            // A per-specifier 'type' modifier is honored the same way.
+            code: "import { type Canvas } from '@cratis/components';",
+            errors: [
+                {
+                    messageId: 'useNamespaceSubpath',
+                    data: { name: 'Canvas', packageName: '@cratis/components', subpath: 'Canvas' },
+                },
+            ],
+            output: "import type * as Canvas from '@cratis/components/Canvas';",
+        },
+        {
+            // Aliases are preserved on the generated namespace import.
+            code: "import { Canvas as C } from '@cratis/components';",
+            errors: [
+                {
+                    messageId: 'useNamespaceSubpath',
+                    data: { name: 'Canvas', packageName: '@cratis/components', subpath: 'Canvas' },
+                },
+            ],
+            output: "import * as C from '@cratis/components/Canvas';",
+        },
+        {
+            // 'Types' is the one namespace whose subpath differs in casing from its name.
+            code: "import { Types } from '@cratis/components';",
+            errors: [
+                {
+                    messageId: 'useNamespaceSubpath',
+                    data: { name: 'Types', packageName: '@cratis/components', subpath: 'types' },
+                },
+            ],
+            output: "import * as Types from '@cratis/components/types';",
+        },
+        {
+            // Several namespaces in one import become one subpath import each, in order.
+            code: "import { Canvas, Common } from '@cratis/components';",
+            errors: [
+                {
+                    messageId: 'useNamespaceSubpath',
+                    data: { name: 'Canvas', packageName: '@cratis/components', subpath: 'Canvas' },
+                },
+                {
+                    messageId: 'useNamespaceSubpath',
+                    data: { name: 'Common', packageName: '@cratis/components', subpath: 'Common' },
+                },
+            ],
+            output: "import * as Canvas from '@cratis/components/Canvas';\nimport * as Common from '@cratis/components/Common';",
+        },
+        {
+            // A mixed import is split: the approved symbol stays at the root, the namespace moves.
+            code: "import { CratisComponentsProvider, Canvas } from '@cratis/components';",
+            errors: [
+                {
+                    messageId: 'useNamespaceSubpath',
+                    data: { name: 'Canvas', packageName: '@cratis/components', subpath: 'Canvas' },
+                },
+            ],
+            output:
+                "import { CratisComponentsProvider } from '@cratis/components';\nimport * as Canvas from '@cratis/components/Canvas';",
+        },
+        {
+            // An unrelated existing subpath import on the line above is left completely alone.
+            code: "import { Dialog } from '@cratis/components/Dialogs';\nimport { Canvas } from '@cratis/components';",
+            errors: [
+                {
+                    messageId: 'useNamespaceSubpath',
+                    data: { name: 'Canvas', packageName: '@cratis/components', subpath: 'Canvas' },
+                },
+            ],
+            output:
+                "import { Dialog } from '@cratis/components/Dialogs';\nimport * as Canvas from '@cratis/components/Canvas';",
+        },
+        {
+            // A symbol that is neither an approved setup symbol nor a known namespace (it only
+            // exists *inside* the Common namespace) is flagged but never guessed at — no autofix.
             code: "import { Button } from '@cratis/components';",
-            errors: [{ messageId: 'useSubpath', data: { packageName: '@cratis/components' } }],
+            errors: [
+                { messageId: 'unknownSymbol', data: { name: 'Button', packageName: '@cratis/components' } },
+            ],
+            output: null,
+        },
+        {
+            // An unknown specifier alongside an approved one: still flagged, still no fix, and the
+            // approved symbol never gets a spurious report.
+            code: "import { CratisComponentsProvider, Button } from '@cratis/components';",
+            errors: [
+                { messageId: 'unknownSymbol', data: { name: 'Button', packageName: '@cratis/components' } },
+            ],
+            output: null,
+        },
+        {
+            // An unknown specifier alongside a namespace: the namespace is still reported (rich
+            // guidance), but neither gets autofixed — never guess at the whole statement.
+            code: "import { Canvas, Button } from '@cratis/components';",
+            errors: [
+                {
+                    messageId: 'useNamespaceSubpath',
+                    data: { name: 'Canvas', packageName: '@cratis/components', subpath: 'Canvas' },
+                },
+                { messageId: 'unknownSymbol', data: { name: 'Button', packageName: '@cratis/components' } },
+            ],
+            output: null,
+        },
+        {
+            // A namespace import of the whole package cannot be safely rewritten.
+            code: "import * as Components from '@cratis/components';",
+            errors: [{ messageId: 'ambiguousImport', data: { packageName: '@cratis/components' } }],
+            output: null,
+        },
+        {
+            // A default import — the package has no default export — is equally ambiguous.
+            code: "import Components from '@cratis/components';",
+            errors: [{ messageId: 'ambiguousImport' }],
+            output: null,
+        },
+        {
+            // A side-effect-only import has no binding to infer a subpath from.
+            code: "import '@cratis/components';",
+            errors: [{ messageId: 'ambiguousImport' }],
+            output: null,
+        },
+        {
+            // Re-exporting a namespace gets subpath guidance but is never autofixed.
+            code: "export { Canvas } from '@cratis/components';",
+            errors: [
+                {
+                    messageId: 'useNamespaceSubpathExport',
+                    data: { name: 'Canvas', packageName: '@cratis/components', subpath: 'Canvas' },
+                },
+            ],
+            output: null,
+        },
+        {
+            // The export alias is preserved in the guidance name; the check is on the source-side name.
+            code: "export { Canvas as CanvasNS } from '@cratis/components';",
+            errors: [
+                {
+                    messageId: 'useNamespaceSubpathExport',
+                    data: { name: 'Canvas', packageName: '@cratis/components', subpath: 'Canvas' },
+                },
+            ],
+            output: null,
         },
         {
             code: "export { Button } from '@cratis/components';",
-            errors: [{ messageId: 'useSubpath' }],
+            errors: [
+                { messageId: 'unknownSymbolExport', data: { name: 'Button', packageName: '@cratis/components' } },
+            ],
+            output: null,
         },
         {
             code: "export * from '@cratis/components';",
-            errors: [{ messageId: 'useSubpath' }],
+            errors: [{ messageId: 'ambiguousExport', data: { packageName: '@cratis/components' } }],
+            output: null,
+        },
+        {
+            code: "export * as Everything from '@cratis/components';",
+            errors: [{ messageId: 'ambiguousExport' }],
+            output: null,
         },
         {
-            // Configurable package name.
-            code: "import x from '@acme/ui';",
+            // Configurable package name — the Cratis namespace map still applies to it.
+            code: "import { Canvas } from '@acme/ui';",
             options: [{ packageName: '@acme/ui' }],
-            errors: [{ messageId: 'useSubpath', data: { packageName: '@acme/ui' } }],
+            errors: [{ messageId: 'useNamespaceSubpath', data: { name: 'Canvas', packageName: '@acme/ui', subpath: 'Canvas' } }],
+            output: "import * as Canvas from '@acme/ui/Canvas';",
         },
     ],
 });

From 5e48f3a54ecb46a10c742b4f9a1dc55294794e7a Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Tue, 25 Aug 2026 12:53:55 +0200
Subject: [PATCH 064/267] Register Codemods as a workspace and point the README
 at it

- package.json: add 'Codemods' to the root workspaces array (yarn install
  now symlinks node_modules/@cratis/components-codemods -> Codemods,
  and 'yarn workspace @cratis/components-codemods <script>' / 'cd
  Codemods && yarn <script>' resolve). No new dependency was declared -
  Codemods only uses the already-installed 'typescript' devDependency -
  and yarn.lock is gitignored in this repo, so there is no lockfile diff
  to commit.
- README.md: a short 'Codemods' section pointing at Codemods/README.md
  and the ESLint rule, with the exact invocation
  'node Codemods/scripts/remove-root-namespace-imports.js <paths...>'.

Verified after registering the workspace:
- 'cd Codemods && yarn test' -> 36/36 passing (previously only reachable
  by invoking vitest directly, since yarn refused to run an unregistered
  workspace's scripts).
- 'cd ESLint && yarn test' -> 75/75 passing.
- 'yarn lint' (root) -> exits 0 (Source lints clean; ESLint and Codemods
  are both skipped by run-task-on-workspaces.js - no 'lint' script and
  private:true respectively - which is pre-existing behavior for the
  ESLint workspace, unchanged by this commit).
---
 README.md    | 12 ++++++++++++
 package.json |  3 ++-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index f85d488a..656aef59 100644
--- a/README.md
+++ b/README.md
@@ -13,6 +13,18 @@
 
 A collection of React components designed to work seamlessly with the constructs found in the Arc universe. These components provide a rich set of UI elements for building modern applications, including command dialogs, data tables, schema editors, and more.
 
+## Codemods
+
+`Codemods/` holds internal, unpublished codemods that support consumer migrations. The
+`remove-root-namespace-imports` codemod rewrites `@cratis/components` root-barrel namespace
+imports (`import { Canvas } from '@cratis/components'`) onto their canonical subpath
+(`import * as Canvas from '@cratis/components/Canvas'`); see [`Codemods/README.md`](./Codemods/README.md)
+for full behavior and the companion `@cratis/components/no-root-barrel-import` ESLint rule.
+
+```sh
+node Codemods/scripts/remove-root-namespace-imports.js <paths...>
+```
+
 ## Support
 
 Cratis is an open community, and we are glad to help users, teams evaluating the stack, and contributors.
diff --git a/package.json b/package.json
index f2463ac8..0dd77182 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,8 @@
     "private": true,
     "workspaces": [
         "Source",
-        "ESLint"
+        "ESLint",
+        "Codemods"
     ],
     "engines": {
         "node": ">=23.0.0"

From e830ec5c6b667bf576db7aa50d8707a0cd8a091c Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Tue, 25 Aug 2026 12:54:01 +0200
Subject: [PATCH 065/267] Fix unsupported-require fixture's stale
 eslint-disable rule id

Running the repo's own eslint config directly against Codemods/ (as part
of verifying the root lint gate for the new workspace) flagged both
'unsupported-require' fixtures: the disable comment named the old
'@typescript-eslint/no-var-requires' id, but this repo's config also has
'@typescript-eslint/no-require-imports' enabled (from the typescript-eslint
recommended preset) and that is the rule id that actually fires on a bare
require() call - no-var-requires fires too, from this repo's own explicit
rule entry, once the first is silenced. Disabling only the stale id left
the fixture failing lint. Both ids are now listed on the
eslint-disable-next-line comment, in both input.ts and expected.ts (they
must stay byte-identical - this is the 'leave completely untouched'
fixture pair).

Verified: 'eslint Codemods' exits 0, and Codemods' 36/36 tests still
pass.
---
 Codemods/test/fixtures/unsupported-require/expected.ts | 2 +-
 Codemods/test/fixtures/unsupported-require/input.ts    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/Codemods/test/fixtures/unsupported-require/expected.ts b/Codemods/test/fixtures/unsupported-require/expected.ts
index ca624636..6eb385ca 100644
--- a/Codemods/test/fixtures/unsupported-require/expected.ts
+++ b/Codemods/test/fixtures/unsupported-require/expected.ts
@@ -2,7 +2,7 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 export function loadCanvas() {
-    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    // eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires
     const components = require('@cratis/components');
     return components;
 }
diff --git a/Codemods/test/fixtures/unsupported-require/input.ts b/Codemods/test/fixtures/unsupported-require/input.ts
index ca624636..6eb385ca 100644
--- a/Codemods/test/fixtures/unsupported-require/input.ts
+++ b/Codemods/test/fixtures/unsupported-require/input.ts
@@ -2,7 +2,7 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 export function loadCanvas() {
-    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    // eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires
     const components = require('@cratis/components');
     return components;
 }

From 6ab25ca14e7ee2c7e91f769afd9b6c914facdff6 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Tue, 25 Aug 2026 13:04:51 +0200
Subject: [PATCH 066/267] Align migration tooling and capability documentation

---
 Codemods/README.md                            |   6 +-
 Codemods/lib/namespaceMap.js                  |  14 +-
 .../command-stepper-alias/expected.ts         |   7 +
 .../fixtures/command-stepper-alias/input.ts   |   7 +
 Codemods/test/transform.test.js               |  21 ++
 Documentation/PivotViewer/performance.md      |   4 +-
 Documentation/SchemaEditor/index.md           |  12 +-
 Documentation/SchemaEditor/types-formats.md   |  34 ++-
 Documentation/migration.md                    |  71 ++---
 ESLint/lib/rootNamespaceMap.js                |  14 +-
 ESLint/test/rules.test.js                     | 242 ++++++++++++++----
 Source/MIGRATION.md                           |  71 ++---
 Source/README.md                              |  46 ++--
 13 files changed, 370 insertions(+), 179 deletions(-)
 create mode 100644 Codemods/test/fixtures/command-stepper-alias/expected.ts
 create mode 100644 Codemods/test/fixtures/command-stepper-alias/input.ts

diff --git a/Codemods/README.md b/Codemods/README.md
index 81504537..e1f320bd 100644
--- a/Codemods/README.md
+++ b/Codemods/README.md
@@ -1,10 +1,6 @@
 # @cratis/components-codemods
 
-Internal, unpublished codemods that support the `@cratis/components` root-namespace-removal
-migration. `Source/index.ts` currently re-exports every component subpath as a namespace off
-the package root (`import { Canvas } from '@cratis/components'`) for convenience; the
-long-term direction is to reach for the subpath directly (`@cratis/components/Canvas`) and
-keep only the primary provider setup surface at the root. See
+Internal, unpublished codemods that support the Components 3 root-namespace-removal migration. Components 4 keeps only package-wide provider setup at the root; every component is imported from its explicit subpath (`@cratis/components/Canvas`, for example). See
 [`ESLint`'s `no-root-barrel-import` rule](../ESLint/README.md) for the lint-time guard that
 enforces this once a consumer has migrated.
 
diff --git a/Codemods/lib/namespaceMap.js b/Codemods/lib/namespaceMap.js
index 1e957d7c..d8d3dd12 100644
--- a/Codemods/lib/namespaceMap.js
+++ b/Codemods/lib/namespaceMap.js
@@ -26,7 +26,9 @@ export const packageName = '@cratis/components';
 export const namespaceSubpaths = {
     Canvas: 'Canvas',
     CommandDialog: 'CommandDialog',
-    CommandStepper: 'CommandStepper',
+    // The former root CommandStepper namespace aliased the entire CommandDialog module.
+    // Preserve that module identity; the narrower ./CommandStepper subpath does not.
+    CommandStepper: 'CommandDialog',
     CommandForm: 'CommandForm',
     Common: 'Common',
     DataPage: 'DataPage',
@@ -52,8 +54,18 @@ export const namespaceSubpaths = {
  */
 export const approvedRootSymbols = new Set([
     'CratisComponentsProvider',
+    'useCratisComponentsConfig',
     'cratisDefaults',
     'mergeCratisComponentsConfig',
     'CratisComponentsConfig',
     'CratisComponentsProviderProps',
+    'CratisComponentsMessages',
+    'CratisPaginatorMessages',
+    'CratisDatePickerMessages',
+    'CratisDropdownMessages',
+    'CratisDialogMessages',
+    'CratisStepperMessages',
+    'CratisNotificationsMessages',
+    'CratisDataTableMessages',
+    'CratisColumnFilterMessages',
 ]);
diff --git a/Codemods/test/fixtures/command-stepper-alias/expected.ts b/Codemods/test/fixtures/command-stepper-alias/expected.ts
new file mode 100644
index 00000000..1ea8e2c2
--- /dev/null
+++ b/Codemods/test/fixtures/command-stepper-alias/expected.ts
@@ -0,0 +1,7 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import * as StepperNamespace from '@cratis/components/CommandDialog';
+
+export const dialog = StepperNamespace.StepperCommandDialog;
+export const stepper = StepperNamespace.CommandStepper;
diff --git a/Codemods/test/fixtures/command-stepper-alias/input.ts b/Codemods/test/fixtures/command-stepper-alias/input.ts
new file mode 100644
index 00000000..59b437bb
--- /dev/null
+++ b/Codemods/test/fixtures/command-stepper-alias/input.ts
@@ -0,0 +1,7 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { CommandStepper as StepperNamespace } from '@cratis/components';
+
+export const dialog = StepperNamespace.StepperCommandDialog;
+export const stepper = StepperNamespace.CommandStepper;
diff --git a/Codemods/test/transform.test.js b/Codemods/test/transform.test.js
index b0c0e1b5..68b029a2 100644
--- a/Codemods/test/transform.test.js
+++ b/Codemods/test/transform.test.js
@@ -6,6 +6,14 @@ import { fileURLToPath } from 'node:url';
 import path from 'node:path';
 import { describe, expect, it } from 'vitest';
 import { transformSource } from '../lib/transform.js';
+import {
+    approvedRootSymbols as codemodApprovedRootSymbols,
+    namespaceSubpaths as codemodNamespaceSubpaths,
+} from '../lib/namespaceMap.js';
+import {
+    approvedRootSymbols as eslintApprovedRootSymbols,
+    namespaceSubpaths as eslintNamespaceSubpaths,
+} from '../../ESLint/lib/rootNamespaceMap.js';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const fixturesDir = path.join(__dirname, 'fixtures');
@@ -20,6 +28,7 @@ const supportedCases = [
     'alias-import',
     'mixed-import',
     'multiple-namespaces',
+    'command-stepper-alias',
 ];
 
 // Fixtures where the codemod must leave the file completely untouched: either because it
@@ -47,6 +56,18 @@ const unsupportedCases = new Set([
     'unsupported-export',
 ]);
 
+describe('root namespace maps', () => {
+    it('should keep the codemod and ESLint namespace maps identical', () => {
+        expect(codemodNamespaceSubpaths).toEqual(eslintNamespaceSubpaths);
+    });
+
+    it('should keep the codemod and ESLint setup allowlists identical', () => {
+        expect([...codemodApprovedRootSymbols].sort()).toEqual(
+            [...eslintApprovedRootSymbols].sort(),
+        );
+    });
+});
+
 describe('transformSource — fixture coverage', () => {
     it('covers every fixture directory with a supported or unchanged expectation', () => {
         const allFixtureDirs = readdirSync(fixturesDir, { withFileTypes: true })
diff --git a/Documentation/PivotViewer/performance.md b/Documentation/PivotViewer/performance.md
index 7c24f8fd..ddbab31e 100644
--- a/Documentation/PivotViewer/performance.md
+++ b/Documentation/PivotViewer/performance.md
@@ -118,8 +118,8 @@ For card images:
 - Set explicit dimensions
 
 ```typescript
-<img 
-    src={item.thumbnailUrl} 
+<img
+    src={item.thumbnailUrl}
     alt={item.name}
     width={200}
     height={150}
diff --git a/Documentation/SchemaEditor/index.md b/Documentation/SchemaEditor/index.md
index e559ce4e..3f4cccc9 100644
--- a/Documentation/SchemaEditor/index.md
+++ b/Documentation/SchemaEditor/index.md
@@ -79,12 +79,12 @@ What is deliberately **not** supported: JSON Schema composition keywords (`oneOf
 
 Properties are displayed in a table:
 
-| Name | Type | Format | Required |
-|------|------|--------|----------|
-| name | string | - | ✓ |
-| email | string | email | ✓ |
-| age | number | - |  |
-| createdAt | string | date-time |  |
+| Name      | Type   | Format    | Required |
+| --------- | ------ | --------- | -------- |
+| name      | string | -         | ✓        |
+| email     | string | email     | ✓        |
+| age       | number | -         |          |
+| createdAt | string | date-time |          |
 
 ## See Also
 
diff --git a/Documentation/SchemaEditor/types-formats.md b/Documentation/SchemaEditor/types-formats.md
index e624fc9a..e1dd720d 100644
--- a/Documentation/SchemaEditor/types-formats.md
+++ b/Documentation/SchemaEditor/types-formats.md
@@ -6,14 +6,14 @@ SchemaEditor authors a deliberate JSON Schema subset. It is not a complete JSON
 
 The built-in editor offers six types:
 
-| Type | Purpose | Nested definition |
-| --- | --- | --- |
-| `string` | Text and formatted temporal/identifier values | — |
-| `integer` | Whole numeric values | — |
-| `number` | Floating-point or decimal values | — |
-| `boolean` | True/false values | — |
-| `object` | Named nested properties | `properties` and `required` |
-| `array` | Repeated values | `items` |
+| Type      | Purpose                                       | Nested definition           |
+| --------- | --------------------------------------------- | --------------------------- |
+| `string`  | Text and formatted temporal/identifier values | —                           |
+| `integer` | Whole numeric values                          | —                           |
+| `number`  | Floating-point or decimal values              | —                           |
+| `boolean` | True/false values                             | —                           |
+| `object`  | Named nested properties                       | `properties` and `required` |
+| `array`   | Repeated values                               | `items`                     |
 
 The editor does not offer `null`, boolean schemas, or type unions such as `type: ['string', 'null']`.
 
@@ -21,12 +21,12 @@ The editor does not offer `null`, boolean schemas, or type unions such as `type:
 
 The default `TypeFormat` catalog is exported as `DEFAULT_TYPE_FORMATS` from `@cratis/components/types` and contains:
 
-| JSON type | Formats |
-| --- | --- |
-| `string` | unformatted, `guid`, `date-time`, `date`, `time` |
-| `integer` | unformatted, `int16`, `int32`, `int64` |
-| `number` | unformatted, `float`, `double` |
-| `boolean` | unformatted |
+| JSON type | Formats                                          |
+| --------- | ------------------------------------------------ |
+| `string`  | unformatted, `guid`, `date-time`, `date`, `time` |
+| `integer` | unformatted, `int16`, `int32`, `int64`           |
+| `number`  | unformatted, `float`, `double`                   |
+| `boolean` | unformatted                                      |
 
 Example:
 
@@ -60,11 +60,7 @@ const typeFormats: TypeFormat[] = [
     { jsonType: 'boolean', format: '' },
 ];
 
-<SchemaEditor
-    schema={schema}
-    typeFormats={typeFormats}
-    onChange={setSchema}
-/>;
+<SchemaEditor schema={schema} typeFormats={typeFormats} onChange={setSchema} />;
 ```
 
 The selected option stores the `jsonType` in `type` and a non-empty format in `format`. `array` and `object` remain available in addition to the custom primitive catalog.
diff --git a/Documentation/migration.md b/Documentation/migration.md
index eb49e6c2..60749ff1 100644
--- a/Documentation/migration.md
+++ b/Documentation/migration.md
@@ -39,11 +39,13 @@ The supported Arc peer range remains `>=20.3.1 <23`.
 The canonical rule going forward: **the package root is setup-only; every component ships from its own subpath.**
 
 ```tsx
-// Before — root namespace (still works, not canonical)
+// Before — Components 3 root namespace (removed in Components 4)
 import { Canvas } from '@cratis/components';
 
 <Canvas.Canvas showControls>
-    <Canvas.CanvasItem x={0} y={0}>Content</Canvas.CanvasItem>
+    <Canvas.CanvasItem x={0} y={0}>
+        Content
+    </Canvas.CanvasItem>
 </Canvas.Canvas>;
 ```
 
@@ -52,47 +54,48 @@ import { Canvas } from '@cratis/components';
 import { Canvas, CanvasItem } from '@cratis/components/Canvas';
 
 <Canvas showControls>
-    <CanvasItem x={0} y={0}>Content</CanvasItem>
+    <CanvasItem x={0} y={0}>
+        Content
+    </CanvasItem>
 </Canvas>;
 ```
 
-This is **not a breaking change in this release.** The root still re-exports every subpath as a namespace (`import { Canvas } from '@cratis/components'`) for source compatibility, exactly as it does today; nothing in this section removes that bridge. It documents the rule new code should already follow and gives existing code a mechanical path onto it, ahead of any future removal — which, if it ever happens, is its own tracked, versioned change with its own migration guide.
-
-Every namespace maps the same way: replace `import { X } from '@cratis/components'` with either an equivalent namespace import from `@cratis/components/X`, or named imports from the same subpath.
-
-| Namespace (root, source-compatible) | Canonical subpath | Namespace-preserving migration | Named migration |
-| --- | --- | --- | --- |
-| `Canvas` | `@cratis/components/Canvas` | `import * as Canvas from '@cratis/components/Canvas'` | `import { Canvas, CanvasItem } from '@cratis/components/Canvas'` |
-| `CommandDialog` | `@cratis/components/CommandDialog` | `import * as CommandDialog from '@cratis/components/CommandDialog'` | `import { CommandDialog } from '@cratis/components/CommandDialog'` |
-| `CommandStepper` † | `@cratis/components/CommandStepper` | `import * as CommandStepper from '@cratis/components/CommandStepper'` | `import { CommandStepper } from '@cratis/components/CommandStepper'` |
-| `CommandForm` | `@cratis/components/CommandForm` | `import * as CommandForm from '@cratis/components/CommandForm'` | `import { AutoCommandForm, InputTextField } from '@cratis/components/CommandForm'` |
-| `Common` | `@cratis/components/Common` | `import * as Common from '@cratis/components/Common'` | `import { CratisComponentsProvider, Button } from '@cratis/components/Common'` |
-| `DataPage` | `@cratis/components/DataPage` | `import * as DataPage from '@cratis/components/DataPage'` | `import { DataPage, Column } from '@cratis/components/DataPage'` |
-| `DataTables` | `@cratis/components/DataTables` | `import * as DataTables from '@cratis/components/DataTables'` | `import { DataTableForQuery, Column } from '@cratis/components/DataTables'` |
-| `Dialogs` | `@cratis/components/Dialogs` | `import * as Dialogs from '@cratis/components/Dialogs'` | `import { Dialog } from '@cratis/components/Dialogs'` |
-| `Display` | `@cratis/components/Display` | `import * as Display from '@cratis/components/Display'` | `import { Tag, Badge } from '@cratis/components/Display'` |
-| `Dropdown` | `@cratis/components/Dropdown` | `import * as Dropdown from '@cratis/components/Dropdown'` | `import { Dropdown } from '@cratis/components/Dropdown'` |
-| `Filter` | `@cratis/components/Filter` | `import * as Filter from '@cratis/components/Filter'` | `import { FilterPanel } from '@cratis/components/Filter'` |
-| `Notifications` | `@cratis/components/Notifications` | `import * as Notifications from '@cratis/components/Notifications'` | `import { Toaster, toast } from '@cratis/components/Notifications'` |
-| `ObjectContentEditor` | `@cratis/components/ObjectContentEditor` | `import * as ObjectContentEditor from '@cratis/components/ObjectContentEditor'` | `import { ObjectContentEditor } from '@cratis/components/ObjectContentEditor'` |
-| `ObjectNavigationalBar` | `@cratis/components/ObjectNavigationalBar` | `import * as ObjectNavigationalBar from '@cratis/components/ObjectNavigationalBar'` | `import { ObjectNavigationalBar } from '@cratis/components/ObjectNavigationalBar'` |
-| `PivotViewer` | `@cratis/components/PivotViewer` | `import * as PivotViewer from '@cratis/components/PivotViewer'` | `import { PivotViewer } from '@cratis/components/PivotViewer'` |
-| `SchemaEditor` | `@cratis/components/SchemaEditor` | `import * as SchemaEditor from '@cratis/components/SchemaEditor'` | `import { SchemaEditor } from '@cratis/components/SchemaEditor'` |
-| `TimeMachine` | `@cratis/components/TimeMachine` | `import * as TimeMachine from '@cratis/components/TimeMachine'` | `import { TimeMachine, EventsView } from '@cratis/components/TimeMachine'` |
-| `Toolbar` | `@cratis/components/Toolbar` | `import * as Toolbar from '@cratis/components/Toolbar'` | `import { Toolbar, ToolbarButton } from '@cratis/components/Toolbar'` |
-| `Types` | `@cratis/components/types` | `import * as Types from '@cratis/components/types'` | `import { JsonSchema, Json } from '@cratis/components/types'` |
-
-† `CommandStepper` needs care in one direction only: the root's `CommandStepper` namespace is an alias of the _entire_ `CommandDialog` module, so `CommandStepper.StepperCommandDialog` and even `CommandStepper.CommandDialog` are reachable there today. The dedicated `@cratis/components/CommandStepper` subpath only carries `CommandStepper` itself and its stepper types. Migrate anything reached as `CommandStepper.StepperCommandDialog` or `CommandStepper.CommandDialog` to the `CommandDialog` row above instead.
+This is an intentional Components 4 breaking change. The package root now exposes setup APIs only; component namespaces no longer exist there. Every namespace maps mechanically: replace `import { X } from '@cratis/components'` with either an equivalent namespace import from the documented subpath, or named imports from that subpath.
+
+| Removed Components 3 root namespace | Components 4 subpath                                      | Namespace-preserving migration                                                      | Named migration                                                                    |
+| ----------------------------------- | --------------------------------------------------------- | ----------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
+| `Canvas`                            | `@cratis/components/Canvas`                               | `import * as Canvas from '@cratis/components/Canvas'`                               | `import { Canvas, CanvasItem } from '@cratis/components/Canvas'`                   |
+| `CommandDialog`                     | `@cratis/components/CommandDialog`                        | `import * as CommandDialog from '@cratis/components/CommandDialog'`                 | `import { CommandDialog } from '@cratis/components/CommandDialog'`                 |
+| `CommandStepper` †                  | `@cratis/components/CommandDialog` (namespace-preserving) | `import * as CommandStepper from '@cratis/components/CommandDialog'`                | `import { CommandStepper } from '@cratis/components/CommandStepper'`               |
+| `CommandForm`                       | `@cratis/components/CommandForm`                          | `import * as CommandForm from '@cratis/components/CommandForm'`                     | `import { AutoCommandForm, InputTextField } from '@cratis/components/CommandForm'` |
+| `Common`                            | `@cratis/components/Common`                               | `import * as Common from '@cratis/components/Common'`                               | `import { CratisComponentsProvider, Button } from '@cratis/components/Common'`     |
+| `DataPage`                          | `@cratis/components/DataPage`                             | `import * as DataPage from '@cratis/components/DataPage'`                           | `import { DataPage, Column } from '@cratis/components/DataPage'`                   |
+| `DataTables`                        | `@cratis/components/DataTables`                           | `import * as DataTables from '@cratis/components/DataTables'`                       | `import { DataTableForQuery, Column } from '@cratis/components/DataTables'`        |
+| `Dialogs`                           | `@cratis/components/Dialogs`                              | `import * as Dialogs from '@cratis/components/Dialogs'`                             | `import { Dialog } from '@cratis/components/Dialogs'`                              |
+| `Display`                           | `@cratis/components/Display`                              | `import * as Display from '@cratis/components/Display'`                             | `import { Tag, Badge } from '@cratis/components/Display'`                          |
+| `Dropdown`                          | `@cratis/components/Dropdown`                             | `import * as Dropdown from '@cratis/components/Dropdown'`                           | `import { Dropdown } from '@cratis/components/Dropdown'`                           |
+| `Filter`                            | `@cratis/components/Filter`                               | `import * as Filter from '@cratis/components/Filter'`                               | `import { FilterPanel } from '@cratis/components/Filter'`                          |
+| `Notifications`                     | `@cratis/components/Notifications`                        | `import * as Notifications from '@cratis/components/Notifications'`                 | `import { Toaster, toast } from '@cratis/components/Notifications'`                |
+| `ObjectContentEditor`               | `@cratis/components/ObjectContentEditor`                  | `import * as ObjectContentEditor from '@cratis/components/ObjectContentEditor'`     | `import { ObjectContentEditor } from '@cratis/components/ObjectContentEditor'`     |
+| `ObjectNavigationalBar`             | `@cratis/components/ObjectNavigationalBar`                | `import * as ObjectNavigationalBar from '@cratis/components/ObjectNavigationalBar'` | `import { ObjectNavigationalBar } from '@cratis/components/ObjectNavigationalBar'` |
+| `PivotViewer`                       | `@cratis/components/PivotViewer`                          | `import * as PivotViewer from '@cratis/components/PivotViewer'`                     | `import { PivotViewer } from '@cratis/components/PivotViewer'`                     |
+| `SchemaEditor`                      | `@cratis/components/SchemaEditor`                         | `import * as SchemaEditor from '@cratis/components/SchemaEditor'`                   | `import { SchemaEditor } from '@cratis/components/SchemaEditor'`                   |
+| `TimeMachine`                       | `@cratis/components/TimeMachine`                          | `import * as TimeMachine from '@cratis/components/TimeMachine'`                     | `import { TimeMachine, EventsView } from '@cratis/components/TimeMachine'`         |
+| `Toolbar`                           | `@cratis/components/Toolbar`                              | `import * as Toolbar from '@cratis/components/Toolbar'`                             | `import { Toolbar, ToolbarButton } from '@cratis/components/Toolbar'`              |
+| `Types`                             | `@cratis/components/types`                                | `import * as Types from '@cratis/components/types'`                                 | `import { JsonSchema, Json } from '@cratis/components/types'`                      |
+
+† The removed root `CommandStepper` namespace aliased the _entire_ `CommandDialog` module. The codemod therefore maps that namespace to `@cratis/components/CommandDialog`, preserving `CommandStepper.StepperCommandDialog`, `CommandStepper.CommandDialog`, and `CommandStepper.CommandStepper`. New code that needs only the standalone component should use the narrower named import from `@cratis/components/CommandStepper`.
 
 `@cratis/components/CommandForm/fields` is the same module as `@cratis/components/CommandForm` — either subpath resolves identically, so the `CommandForm` row's migration applies to both.
 
-A codemod will automate this rewrite across a source tree once it ships:
+Run the shipped AST-based codemod in preview mode first, then apply it:
 
 ```bash
-node Source/scripts/migrate-root-imports.mjs <paths...>
+node Codemods/scripts/remove-root-namespace-imports.js --check <paths...>
+node Codemods/scripts/remove-root-namespace-imports.js <paths...>
 ```
 
-This script has not shipped in this release — the invocation shape above is documented now so the tool and this guide describe the same command once it lands. Until then, apply the table by hand; it is a mechanical rename, not a behavioral change, so a codemod and a manual edit produce identical output.
+The codemod preserves aliases and type-only imports, splits mixed setup/namespace imports, and refuses to guess at default imports, whole-package namespace imports, dynamic imports, `require`, re-exports, side-effect imports, or unknown symbols. Review every reported unsupported case manually, then run the consuming project's lint, build, and tests.
 
 See [UI foundation: Capability profiles](ui-foundation.md#capability-profiles) for how these subpaths group into Foundation, Advanced React, and Spatial, and the [capability matrix](ui-foundation.md#capability-matrix) for what each profile owns.
 
@@ -652,7 +655,7 @@ Complete PrimeIcons class strings remain usable where a component accepts the pu
 6. Exercise dialogs, filtered tables, dates, dropdowns, toasts, and steppers with keyboard-only navigation.
 7. Verify light, dark, forced-colors, reduced-motion, and responsive layouts.
 8. Run TypeScript, specs, Storybook, and the production build.
-9. Import components from their explicit subpath rather than the root namespace; apply the mapping table under [Import from explicit subpaths](#import-from-explicit-subpaths), or run the codemod once it ships.
+9. Import components from their explicit subpath rather than the removed root namespace; apply the mapping table under [Import from explicit subpaths](#import-from-explicit-subpaths), or run the shipped codemod.
 
 A TypeScript 6 application using `skipLibCheck: false` may see bounded upstream diagnostics from Pixi's `@webgpu/types` collision with TypeScript's built-in WebGPU declarations, from `@cratis/arc.react`'s published global JSX declarations, or under NodeNext from extensionless declaration imports in the current Arc and Fundamentals packages. Components validates every packed subpath without suppressing these diagnostics; exact versions, codes, affected subpaths, and removal conditions are documented under [Strict public-type validation](ui-foundation.md#strict-public-type-validation) and tracked in [#176](https://github.com/Cratis/Components/issues/176).
 
diff --git a/ESLint/lib/rootNamespaceMap.js b/ESLint/lib/rootNamespaceMap.js
index 179348a3..233bc35b 100644
--- a/ESLint/lib/rootNamespaceMap.js
+++ b/ESLint/lib/rootNamespaceMap.js
@@ -23,7 +23,9 @@
 export const namespaceSubpaths = {
     Canvas: 'Canvas',
     CommandDialog: 'CommandDialog',
-    CommandStepper: 'CommandStepper',
+    // The former root CommandStepper namespace aliased the entire CommandDialog module.
+    // Preserve that module identity; the narrower ./CommandStepper subpath does not.
+    CommandStepper: 'CommandDialog',
     CommandForm: 'CommandForm',
     Common: 'Common',
     DataPage: 'DataPage',
@@ -49,8 +51,18 @@ export const namespaceSubpaths = {
  */
 export const approvedRootSymbols = new Set([
     'CratisComponentsProvider',
+    'useCratisComponentsConfig',
     'cratisDefaults',
     'mergeCratisComponentsConfig',
     'CratisComponentsConfig',
     'CratisComponentsProviderProps',
+    'CratisComponentsMessages',
+    'CratisPaginatorMessages',
+    'CratisDatePickerMessages',
+    'CratisDropdownMessages',
+    'CratisDialogMessages',
+    'CratisStepperMessages',
+    'CratisNotificationsMessages',
+    'CratisDataTableMessages',
+    'CratisColumnFilterMessages',
 ]);
diff --git a/ESLint/test/rules.test.js b/ESLint/test/rules.test.js
index 80dde483..58758b59 100644
--- a/ESLint/test/rules.test.js
+++ b/ESLint/test/rules.test.js
@@ -41,6 +41,8 @@ tsRuleTester.run('no-root-barrel-import', noRootBarrelImport, {
         "import { CratisComponentsProvider as Provider } from '@cratis/components';",
         "import type { CratisComponentsConfig, CratisComponentsProviderProps } from '@cratis/components';",
         "import { type CratisComponentsConfig } from '@cratis/components';",
+        "import { useCratisComponentsConfig } from '@cratis/components';",
+        "import type { CratisComponentsMessages, CratisPaginatorMessages, CratisDatePickerMessages, CratisDropdownMessages, CratisDialogMessages, CratisStepperMessages, CratisNotificationsMessages, CratisDataTableMessages, CratisColumnFilterMessages } from '@cratis/components';",
         // Re-exporting an approved setup symbol from the root is fine too.
         "export { CratisComponentsProvider } from '@cratis/components';",
         // The 'allow' option still permits an exact specifier wholesale.
@@ -56,7 +58,11 @@ tsRuleTester.run('no-root-barrel-import', noRootBarrelImport, {
             errors: [
                 {
                     messageId: 'useNamespaceSubpath',
-                    data: { name: 'Canvas', packageName: '@cratis/components', subpath: 'Canvas' },
+                    data: {
+                        name: 'Canvas',
+                        packageName: '@cratis/components',
+                        subpath: 'Canvas',
+                    },
                 },
             ],
             output: "import * as Canvas from '@cratis/components/Canvas';",
@@ -67,7 +73,11 @@ tsRuleTester.run('no-root-barrel-import', noRootBarrelImport, {
             errors: [
                 {
                     messageId: 'useNamespaceSubpath',
-                    data: { name: 'Canvas', packageName: '@cratis/components', subpath: 'Canvas' },
+                    data: {
+                        name: 'Canvas',
+                        packageName: '@cratis/components',
+                        subpath: 'Canvas',
+                    },
                 },
             ],
             output: "import type * as Canvas from '@cratis/components/Canvas';",
@@ -78,7 +88,11 @@ tsRuleTester.run('no-root-barrel-import', noRootBarrelImport, {
             errors: [
                 {
                     messageId: 'useNamespaceSubpath',
-                    data: { name: 'Canvas', packageName: '@cratis/components', subpath: 'Canvas' },
+                    data: {
+                        name: 'Canvas',
+                        packageName: '@cratis/components',
+                        subpath: 'Canvas',
+                    },
                 },
             ],
             output: "import type * as Canvas from '@cratis/components/Canvas';",
@@ -89,18 +103,42 @@ tsRuleTester.run('no-root-barrel-import', noRootBarrelImport, {
             errors: [
                 {
                     messageId: 'useNamespaceSubpath',
-                    data: { name: 'Canvas', packageName: '@cratis/components', subpath: 'Canvas' },
+                    data: {
+                        name: 'Canvas',
+                        packageName: '@cratis/components',
+                        subpath: 'Canvas',
+                    },
                 },
             ],
             output: "import * as C from '@cratis/components/Canvas';",
         },
+        {
+            // The former root CommandStepper namespace was the complete CommandDialog module,
+            // not the narrower dedicated CommandStepper subpath. Preserve module identity.
+            code: "import { CommandStepper as StepperNS } from '@cratis/components';",
+            errors: [
+                {
+                    messageId: 'useNamespaceSubpath',
+                    data: {
+                        name: 'CommandStepper',
+                        packageName: '@cratis/components',
+                        subpath: 'CommandDialog',
+                    },
+                },
+            ],
+            output: "import * as StepperNS from '@cratis/components/CommandDialog';",
+        },
         {
             // 'Types' is the one namespace whose subpath differs in casing from its name.
             code: "import { Types } from '@cratis/components';",
             errors: [
                 {
                     messageId: 'useNamespaceSubpath',
-                    data: { name: 'Types', packageName: '@cratis/components', subpath: 'types' },
+                    data: {
+                        name: 'Types',
+                        packageName: '@cratis/components',
+                        subpath: 'types',
+                    },
                 },
             ],
             output: "import * as Types from '@cratis/components/types';",
@@ -111,11 +149,19 @@ tsRuleTester.run('no-root-barrel-import', noRootBarrelImport, {
             errors: [
                 {
                     messageId: 'useNamespaceSubpath',
-                    data: { name: 'Canvas', packageName: '@cratis/components', subpath: 'Canvas' },
+                    data: {
+                        name: 'Canvas',
+                        packageName: '@cratis/components',
+                        subpath: 'Canvas',
+                    },
                 },
                 {
                     messageId: 'useNamespaceSubpath',
-                    data: { name: 'Common', packageName: '@cratis/components', subpath: 'Common' },
+                    data: {
+                        name: 'Common',
+                        packageName: '@cratis/components',
+                        subpath: 'Common',
+                    },
                 },
             ],
             output: "import * as Canvas from '@cratis/components/Canvas';\nimport * as Common from '@cratis/components/Common';",
@@ -126,11 +172,14 @@ tsRuleTester.run('no-root-barrel-import', noRootBarrelImport, {
             errors: [
                 {
                     messageId: 'useNamespaceSubpath',
-                    data: { name: 'Canvas', packageName: '@cratis/components', subpath: 'Canvas' },
+                    data: {
+                        name: 'Canvas',
+                        packageName: '@cratis/components',
+                        subpath: 'Canvas',
+                    },
                 },
             ],
-            output:
-                "import { CratisComponentsProvider } from '@cratis/components';\nimport * as Canvas from '@cratis/components/Canvas';",
+            output: "import { CratisComponentsProvider } from '@cratis/components';\nimport * as Canvas from '@cratis/components/Canvas';",
         },
         {
             // An unrelated existing subpath import on the line above is left completely alone.
@@ -138,18 +187,24 @@ tsRuleTester.run('no-root-barrel-import', noRootBarrelImport, {
             errors: [
                 {
                     messageId: 'useNamespaceSubpath',
-                    data: { name: 'Canvas', packageName: '@cratis/components', subpath: 'Canvas' },
+                    data: {
+                        name: 'Canvas',
+                        packageName: '@cratis/components',
+                        subpath: 'Canvas',
+                    },
                 },
             ],
-            output:
-                "import { Dialog } from '@cratis/components/Dialogs';\nimport * as Canvas from '@cratis/components/Canvas';",
+            output: "import { Dialog } from '@cratis/components/Dialogs';\nimport * as Canvas from '@cratis/components/Canvas';",
         },
         {
             // A symbol that is neither an approved setup symbol nor a known namespace (it only
             // exists *inside* the Common namespace) is flagged but never guessed at — no autofix.
             code: "import { Button } from '@cratis/components';",
             errors: [
-                { messageId: 'unknownSymbol', data: { name: 'Button', packageName: '@cratis/components' } },
+                {
+                    messageId: 'unknownSymbol',
+                    data: { name: 'Button', packageName: '@cratis/components' },
+                },
             ],
             output: null,
         },
@@ -158,7 +213,10 @@ tsRuleTester.run('no-root-barrel-import', noRootBarrelImport, {
             // approved symbol never gets a spurious report.
             code: "import { CratisComponentsProvider, Button } from '@cratis/components';",
             errors: [
-                { messageId: 'unknownSymbol', data: { name: 'Button', packageName: '@cratis/components' } },
+                {
+                    messageId: 'unknownSymbol',
+                    data: { name: 'Button', packageName: '@cratis/components' },
+                },
             ],
             output: null,
         },
@@ -169,16 +227,28 @@ tsRuleTester.run('no-root-barrel-import', noRootBarrelImport, {
             errors: [
                 {
                     messageId: 'useNamespaceSubpath',
-                    data: { name: 'Canvas', packageName: '@cratis/components', subpath: 'Canvas' },
+                    data: {
+                        name: 'Canvas',
+                        packageName: '@cratis/components',
+                        subpath: 'Canvas',
+                    },
+                },
+                {
+                    messageId: 'unknownSymbol',
+                    data: { name: 'Button', packageName: '@cratis/components' },
                 },
-                { messageId: 'unknownSymbol', data: { name: 'Button', packageName: '@cratis/components' } },
             ],
             output: null,
         },
         {
             // A namespace import of the whole package cannot be safely rewritten.
             code: "import * as Components from '@cratis/components';",
-            errors: [{ messageId: 'ambiguousImport', data: { packageName: '@cratis/components' } }],
+            errors: [
+                {
+                    messageId: 'ambiguousImport',
+                    data: { packageName: '@cratis/components' },
+                },
+            ],
             output: null,
         },
         {
@@ -199,7 +269,11 @@ tsRuleTester.run('no-root-barrel-import', noRootBarrelImport, {
             errors: [
                 {
                     messageId: 'useNamespaceSubpathExport',
-                    data: { name: 'Canvas', packageName: '@cratis/components', subpath: 'Canvas' },
+                    data: {
+                        name: 'Canvas',
+                        packageName: '@cratis/components',
+                        subpath: 'Canvas',
+                    },
                 },
             ],
             output: null,
@@ -210,7 +284,11 @@ tsRuleTester.run('no-root-barrel-import', noRootBarrelImport, {
             errors: [
                 {
                     messageId: 'useNamespaceSubpathExport',
-                    data: { name: 'Canvas', packageName: '@cratis/components', subpath: 'Canvas' },
+                    data: {
+                        name: 'Canvas',
+                        packageName: '@cratis/components',
+                        subpath: 'Canvas',
+                    },
                 },
             ],
             output: null,
@@ -218,13 +296,21 @@ tsRuleTester.run('no-root-barrel-import', noRootBarrelImport, {
         {
             code: "export { Button } from '@cratis/components';",
             errors: [
-                { messageId: 'unknownSymbolExport', data: { name: 'Button', packageName: '@cratis/components' } },
+                {
+                    messageId: 'unknownSymbolExport',
+                    data: { name: 'Button', packageName: '@cratis/components' },
+                },
             ],
             output: null,
         },
         {
             code: "export * from '@cratis/components';",
-            errors: [{ messageId: 'ambiguousExport', data: { packageName: '@cratis/components' } }],
+            errors: [
+                {
+                    messageId: 'ambiguousExport',
+                    data: { packageName: '@cratis/components' },
+                },
+            ],
             output: null,
         },
         {
@@ -236,7 +322,12 @@ tsRuleTester.run('no-root-barrel-import', noRootBarrelImport, {
             // Configurable package name — the Cratis namespace map still applies to it.
             code: "import { Canvas } from '@acme/ui';",
             options: [{ packageName: '@acme/ui' }],
-            errors: [{ messageId: 'useNamespaceSubpath', data: { name: 'Canvas', packageName: '@acme/ui', subpath: 'Canvas' } }],
+            errors: [
+                {
+                    messageId: 'useNamespaceSubpath',
+                    data: { name: 'Canvas', packageName: '@acme/ui', subpath: 'Canvas' },
+                },
+            ],
             output: "import * as Canvas from '@acme/ui/Canvas';",
         },
     ],
@@ -267,33 +358,33 @@ ruleTester.run('no-primereact-dialog', noPrimereactDialog, {
 tsRuleTester.run('onbeforeexecute-must-return', onbeforeexecuteMustReturn, {
     valid: [
         // Expression-bodied arrow always returns.
-        "const a = <CommandDialog onBeforeExecute={values => values} />;",
+        'const a = <CommandDialog onBeforeExecute={values => values} />;',
         // Block body that returns the values.
         "const b = <CommandDialog onBeforeExecute={(values) => { values.id = '1'; return values; }} />;",
         // Object property form.
-        "const c = { onBeforeExecute: (v) => v };",
+        'const c = { onBeforeExecute: (v) => v };',
         // Variable form.
-        "const onBeforeExecute = (v) => { return v; };",
+        'const onBeforeExecute = (v) => { return v; };',
         // A nested callback returning nothing does not count against the outer return.
-        "const d = <CommandDialog onBeforeExecute={(v) => { [1].forEach(() => {}); return v; }} />;",
+        'const d = <CommandDialog onBeforeExecute={(v) => { [1].forEach(() => {}); return v; }} />;',
         // Unrelated callbacks are never flagged, even when they return nothing.
-        "const e = <button onClick={() => { doThing(); }} />;",
+        'const e = <button onClick={() => { doThing(); }} />;',
     ],
     invalid: [
         {
-            code: "const a = <CommandDialog onBeforeExecute={(values) => { doSideEffect(values); }} />;",
+            code: 'const a = <CommandDialog onBeforeExecute={(values) => { doSideEffect(values); }} />;',
             errors: [{ messageId: 'missingReturn' }],
         },
         {
-            code: "const b = <CommandDialog onBeforeExecute={function (values) { doSideEffect(values); }} />;",
+            code: 'const b = <CommandDialog onBeforeExecute={function (values) { doSideEffect(values); }} />;',
             errors: [{ messageId: 'missingReturn' }],
         },
         {
-            code: "const c = <CommandDialog onBeforeExecute={(values) => { return; }} />;",
+            code: 'const c = <CommandDialog onBeforeExecute={(values) => { return; }} />;',
             errors: [{ messageId: 'emptyReturn' }],
         },
         {
-            code: "const d = { onBeforeExecute: (v) => { log(v); } };",
+            code: 'const d = { onBeforeExecute: (v) => { log(v); } };',
             errors: [{ messageId: 'missingReturn' }],
         },
     ],
@@ -302,28 +393,28 @@ tsRuleTester.run('onbeforeexecute-must-return', onbeforeexecuteMustReturn, {
 tsRuleTester.run('no-hooks-in-view-model', noHooksInViewModel, {
     valid: [
         // A view model with no hooks.
-        "class FooViewModel { select(id) { this.selected = id; } }",
+        'class FooViewModel { select(id) { this.selected = id; } }',
         // A *ViewModel calling a plain method is fine.
-        "class BarViewModel { compute() { return this.transform(); } }",
+        'class BarViewModel { compute() { return this.transform(); } }',
         // A non-view-model class may use hooks (it is a component/helper, not a VM).
-        "class Helper { render() { const x = useState(0); return x; } }",
+        'class Helper { render() { const x = useState(0); return x; } }',
         // An injectable view model with only injected collaborators.
-        "@injectable class BazViewModel { constructor(private readonly svc) {} load() { return this.svc.get(); } }",
+        '@injectable class BazViewModel { constructor(private readonly svc) {} load() { return this.svc.get(); } }',
     ],
     invalid: [
         {
             // Generated Arc proxy .use() inside a *ViewModel.
-            code: "class FooViewModel { load() { const [x] = AllAuthors.use(); return x; } }",
+            code: 'class FooViewModel { load() { const [x] = AllAuthors.use(); return x; } }',
             errors: [{ messageId: 'noHook', data: { name: '.use' } }],
         },
         {
             // A React hook inside an @injectable view model.
-            code: "@injectable class Bar { method() { const s = useState(0); return s; } }",
+            code: '@injectable class Bar { method() { const s = useState(0); return s; } }',
             errors: [{ messageId: 'noHook', data: { name: 'useState' } }],
         },
         {
             // A class registered via withViewModel, even without the naming/decorator signals.
-            code: "class Vm { method() { useIdentity(); } } const C = withViewModel(Vm, () => null);",
+            code: 'class Vm { method() { useIdentity(); } } const C = withViewModel(Vm, () => null);',
             errors: [{ messageId: 'noHook', data: { name: 'useIdentity' } }],
         },
     ],
@@ -332,20 +423,20 @@ tsRuleTester.run('no-hooks-in-view-model', noHooksInViewModel, {
 tsRuleTester.run('no-raw-command-form-marker', noRawCommandFormMarker, {
     valid: [
         // The sanctioned way to mark and to test, in both directions.
-        "markAsCommandFormField(MyField);",
-        "markAsCommandFormColumn(MyColumn);",
-        "if (isCommandFormField(component)) { wrap(component); }",
-        "if (isCommandFormColumn(component)) { layout(component); }",
+        'markAsCommandFormField(MyField);',
+        'markAsCommandFormColumn(MyColumn);',
+        'if (isCommandFormField(component)) { wrap(component); }',
+        'if (isCommandFormColumn(component)) { layout(component); }',
         // Referring to the exported constant rather than repeating the literal.
-        "MyField.displayName = CommandFormFieldDisplayName;",
-        "if (component.displayName === CommandFormFieldDisplayName) { wrap(component); }",
+        'MyField.displayName = CommandFormFieldDisplayName;',
+        'if (component.displayName === CommandFormFieldDisplayName) { wrap(component); }',
         // Declaring the constants themselves — the one place the literal belongs.
         "export const CommandFormFieldDisplayName = 'CommandFormField';",
         "export const CommandFormColumnDisplayName = 'CommandFormColumn';",
         // displayName used as the diagnostic label it is meant to be.
         "MyDialog.displayName = 'MyDialog';",
         "StepperPanel.displayName = 'StepperPanel';",
-        "const label = `DialogWrapper(${Component.displayName})`;",
+        'const label = `DialogWrapper(${Component.displayName})`;',
         // A different property that happens to hold the same string.
         "const meta = { kind: 'CommandFormField' };",
         // Comparing a non-displayName property.
@@ -354,40 +445,83 @@ tsRuleTester.run('no-raw-command-form-marker', noRawCommandFormMarker, {
     invalid: [
         {
             code: "MyField.displayName = 'CommandFormField';",
-            errors: [{ messageId: 'useMarkHelper', data: { helper: 'markAsCommandFormField', name: 'CommandFormField' } }],
+            errors: [
+                {
+                    messageId: 'useMarkHelper',
+                    data: { helper: 'markAsCommandFormField', name: 'CommandFormField' },
+                },
+            ],
         },
         {
             code: "MyColumn.displayName = 'CommandFormColumn';",
-            errors: [{ messageId: 'useMarkHelper', data: { helper: 'markAsCommandFormColumn', name: 'CommandFormColumn' } }],
+            errors: [
+                {
+                    messageId: 'useMarkHelper',
+                    data: {
+                        helper: 'markAsCommandFormColumn',
+                        name: 'CommandFormColumn',
+                    },
+                },
+            ],
         },
         {
             // Computed member access is the same stamp.
             code: "MyField['displayName'] = 'CommandFormField';",
-            errors: [{ messageId: 'useMarkHelper', data: { helper: 'markAsCommandFormField', name: 'CommandFormField' } }],
+            errors: [
+                {
+                    messageId: 'useMarkHelper',
+                    data: { helper: 'markAsCommandFormField', name: 'CommandFormField' },
+                },
+            ],
         },
         {
             // Set through an object literal, e.g. Object.assign.
             code: "Object.assign(MyField, { displayName: 'CommandFormField' });",
-            errors: [{ messageId: 'useMarkHelper', data: { helper: 'markAsCommandFormField', name: 'CommandFormField' } }],
+            errors: [
+                {
+                    messageId: 'useMarkHelper',
+                    data: { helper: 'markAsCommandFormField', name: 'CommandFormField' },
+                },
+            ],
         },
         {
             code: "if (component.displayName === 'CommandFormField') { wrap(component); }",
-            errors: [{ messageId: 'usePredicate', data: { helper: 'isCommandFormField', name: 'CommandFormField' } }],
+            errors: [
+                {
+                    messageId: 'usePredicate',
+                    data: { helper: 'isCommandFormField', name: 'CommandFormField' },
+                },
+            ],
         },
         {
             // Reversed operand order.
             code: "if ('CommandFormColumn' === component.displayName) { layout(component); }",
-            errors: [{ messageId: 'usePredicate', data: { helper: 'isCommandFormColumn', name: 'CommandFormColumn' } }],
+            errors: [
+                {
+                    messageId: 'usePredicate',
+                    data: { helper: 'isCommandFormColumn', name: 'CommandFormColumn' },
+                },
+            ],
         },
         {
             // Negated comparison misses a renamed field just as badly.
             code: "if (component.displayName !== 'CommandFormField') { return child; }",
-            errors: [{ messageId: 'usePredicate', data: { helper: 'isCommandFormField', name: 'CommandFormField' } }],
+            errors: [
+                {
+                    messageId: 'usePredicate',
+                    data: { helper: 'isCommandFormField', name: 'CommandFormField' },
+                },
+            ],
         },
         {
             // The cast form this package used before the marker existed.
             code: "if ((component as { displayName?: string }).displayName === 'CommandFormField') { wrap(component); }",
-            errors: [{ messageId: 'usePredicate', data: { helper: 'isCommandFormField', name: 'CommandFormField' } }],
+            errors: [
+                {
+                    messageId: 'usePredicate',
+                    data: { helper: 'isCommandFormField', name: 'CommandFormField' },
+                },
+            ],
         },
     ],
 });
diff --git a/Source/MIGRATION.md b/Source/MIGRATION.md
index 6d71b0c4..a43a7b1c 100644
--- a/Source/MIGRATION.md
+++ b/Source/MIGRATION.md
@@ -36,11 +36,13 @@ The supported Arc peer range remains `>=20.3.1 <23`.
 The canonical rule going forward: **the package root is setup-only; every component ships from its own subpath.**
 
 ```tsx
-// Before — root namespace (still works, not canonical)
+// Before — Components 3 root namespace (removed in Components 4)
 import { Canvas } from '@cratis/components';
 
 <Canvas.Canvas showControls>
-    <Canvas.CanvasItem x={0} y={0}>Content</Canvas.CanvasItem>
+    <Canvas.CanvasItem x={0} y={0}>
+        Content
+    </Canvas.CanvasItem>
 </Canvas.Canvas>;
 ```
 
@@ -49,47 +51,48 @@ import { Canvas } from '@cratis/components';
 import { Canvas, CanvasItem } from '@cratis/components/Canvas';
 
 <Canvas showControls>
-    <CanvasItem x={0} y={0}>Content</CanvasItem>
+    <CanvasItem x={0} y={0}>
+        Content
+    </CanvasItem>
 </Canvas>;
 ```
 
-This is **not a breaking change in this release.** The root still re-exports every subpath as a namespace (`import { Canvas } from '@cratis/components'`) for source compatibility, exactly as it does today; nothing in this section removes that bridge. It documents the rule new code should already follow and gives existing code a mechanical path onto it, ahead of any future removal — which, if it ever happens, is its own tracked, versioned change with its own migration guide.
-
-Every namespace maps the same way: replace `import { X } from '@cratis/components'` with either an equivalent namespace import from `@cratis/components/X`, or named imports from the same subpath.
-
-| Namespace (root, source-compatible) | Canonical subpath | Namespace-preserving migration | Named migration |
-| --- | --- | --- | --- |
-| `Canvas` | `@cratis/components/Canvas` | `import * as Canvas from '@cratis/components/Canvas'` | `import { Canvas, CanvasItem } from '@cratis/components/Canvas'` |
-| `CommandDialog` | `@cratis/components/CommandDialog` | `import * as CommandDialog from '@cratis/components/CommandDialog'` | `import { CommandDialog } from '@cratis/components/CommandDialog'` |
-| `CommandStepper` † | `@cratis/components/CommandStepper` | `import * as CommandStepper from '@cratis/components/CommandStepper'` | `import { CommandStepper } from '@cratis/components/CommandStepper'` |
-| `CommandForm` | `@cratis/components/CommandForm` | `import * as CommandForm from '@cratis/components/CommandForm'` | `import { AutoCommandForm, InputTextField } from '@cratis/components/CommandForm'` |
-| `Common` | `@cratis/components/Common` | `import * as Common from '@cratis/components/Common'` | `import { CratisComponentsProvider, Button } from '@cratis/components/Common'` |
-| `DataPage` | `@cratis/components/DataPage` | `import * as DataPage from '@cratis/components/DataPage'` | `import { DataPage, Column } from '@cratis/components/DataPage'` |
-| `DataTables` | `@cratis/components/DataTables` | `import * as DataTables from '@cratis/components/DataTables'` | `import { DataTableForQuery, Column } from '@cratis/components/DataTables'` |
-| `Dialogs` | `@cratis/components/Dialogs` | `import * as Dialogs from '@cratis/components/Dialogs'` | `import { Dialog } from '@cratis/components/Dialogs'` |
-| `Display` | `@cratis/components/Display` | `import * as Display from '@cratis/components/Display'` | `import { Tag, Badge } from '@cratis/components/Display'` |
-| `Dropdown` | `@cratis/components/Dropdown` | `import * as Dropdown from '@cratis/components/Dropdown'` | `import { Dropdown } from '@cratis/components/Dropdown'` |
-| `Filter` | `@cratis/components/Filter` | `import * as Filter from '@cratis/components/Filter'` | `import { FilterPanel } from '@cratis/components/Filter'` |
-| `Notifications` | `@cratis/components/Notifications` | `import * as Notifications from '@cratis/components/Notifications'` | `import { Toaster, toast } from '@cratis/components/Notifications'` |
-| `ObjectContentEditor` | `@cratis/components/ObjectContentEditor` | `import * as ObjectContentEditor from '@cratis/components/ObjectContentEditor'` | `import { ObjectContentEditor } from '@cratis/components/ObjectContentEditor'` |
-| `ObjectNavigationalBar` | `@cratis/components/ObjectNavigationalBar` | `import * as ObjectNavigationalBar from '@cratis/components/ObjectNavigationalBar'` | `import { ObjectNavigationalBar } from '@cratis/components/ObjectNavigationalBar'` |
-| `PivotViewer` | `@cratis/components/PivotViewer` | `import * as PivotViewer from '@cratis/components/PivotViewer'` | `import { PivotViewer } from '@cratis/components/PivotViewer'` |
-| `SchemaEditor` | `@cratis/components/SchemaEditor` | `import * as SchemaEditor from '@cratis/components/SchemaEditor'` | `import { SchemaEditor } from '@cratis/components/SchemaEditor'` |
-| `TimeMachine` | `@cratis/components/TimeMachine` | `import * as TimeMachine from '@cratis/components/TimeMachine'` | `import { TimeMachine, EventsView } from '@cratis/components/TimeMachine'` |
-| `Toolbar` | `@cratis/components/Toolbar` | `import * as Toolbar from '@cratis/components/Toolbar'` | `import { Toolbar, ToolbarButton } from '@cratis/components/Toolbar'` |
-| `Types` | `@cratis/components/types` | `import * as Types from '@cratis/components/types'` | `import { JsonSchema, Json } from '@cratis/components/types'` |
-
-† `CommandStepper` needs care in one direction only: the root's `CommandStepper` namespace is an alias of the _entire_ `CommandDialog` module, so `CommandStepper.StepperCommandDialog` and even `CommandStepper.CommandDialog` are reachable there today. The dedicated `@cratis/components/CommandStepper` subpath only carries `CommandStepper` itself and its stepper types. Migrate anything reached as `CommandStepper.StepperCommandDialog` or `CommandStepper.CommandDialog` to the `CommandDialog` row above instead.
+This is an intentional Components 4 breaking change. The package root now exposes setup APIs only; component namespaces no longer exist there. Every namespace maps mechanically: replace `import { X } from '@cratis/components'` with either an equivalent namespace import from the documented subpath, or named imports from that subpath.
+
+| Removed Components 3 root namespace | Components 4 subpath                                      | Namespace-preserving migration                                                      | Named migration                                                                    |
+| ----------------------------------- | --------------------------------------------------------- | ----------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
+| `Canvas`                            | `@cratis/components/Canvas`                               | `import * as Canvas from '@cratis/components/Canvas'`                               | `import { Canvas, CanvasItem } from '@cratis/components/Canvas'`                   |
+| `CommandDialog`                     | `@cratis/components/CommandDialog`                        | `import * as CommandDialog from '@cratis/components/CommandDialog'`                 | `import { CommandDialog } from '@cratis/components/CommandDialog'`                 |
+| `CommandStepper` †                  | `@cratis/components/CommandDialog` (namespace-preserving) | `import * as CommandStepper from '@cratis/components/CommandDialog'`                | `import { CommandStepper } from '@cratis/components/CommandStepper'`               |
+| `CommandForm`                       | `@cratis/components/CommandForm`                          | `import * as CommandForm from '@cratis/components/CommandForm'`                     | `import { AutoCommandForm, InputTextField } from '@cratis/components/CommandForm'` |
+| `Common`                            | `@cratis/components/Common`                               | `import * as Common from '@cratis/components/Common'`                               | `import { CratisComponentsProvider, Button } from '@cratis/components/Common'`     |
+| `DataPage`                          | `@cratis/components/DataPage`                             | `import * as DataPage from '@cratis/components/DataPage'`                           | `import { DataPage, Column } from '@cratis/components/DataPage'`                   |
+| `DataTables`                        | `@cratis/components/DataTables`                           | `import * as DataTables from '@cratis/components/DataTables'`                       | `import { DataTableForQuery, Column } from '@cratis/components/DataTables'`        |
+| `Dialogs`                           | `@cratis/components/Dialogs`                              | `import * as Dialogs from '@cratis/components/Dialogs'`                             | `import { Dialog } from '@cratis/components/Dialogs'`                              |
+| `Display`                           | `@cratis/components/Display`                              | `import * as Display from '@cratis/components/Display'`                             | `import { Tag, Badge } from '@cratis/components/Display'`                          |
+| `Dropdown`                          | `@cratis/components/Dropdown`                             | `import * as Dropdown from '@cratis/components/Dropdown'`                           | `import { Dropdown } from '@cratis/components/Dropdown'`                           |
+| `Filter`                            | `@cratis/components/Filter`                               | `import * as Filter from '@cratis/components/Filter'`                               | `import { FilterPanel } from '@cratis/components/Filter'`                          |
+| `Notifications`                     | `@cratis/components/Notifications`                        | `import * as Notifications from '@cratis/components/Notifications'`                 | `import { Toaster, toast } from '@cratis/components/Notifications'`                |
+| `ObjectContentEditor`               | `@cratis/components/ObjectContentEditor`                  | `import * as ObjectContentEditor from '@cratis/components/ObjectContentEditor'`     | `import { ObjectContentEditor } from '@cratis/components/ObjectContentEditor'`     |
+| `ObjectNavigationalBar`             | `@cratis/components/ObjectNavigationalBar`                | `import * as ObjectNavigationalBar from '@cratis/components/ObjectNavigationalBar'` | `import { ObjectNavigationalBar } from '@cratis/components/ObjectNavigationalBar'` |
+| `PivotViewer`                       | `@cratis/components/PivotViewer`                          | `import * as PivotViewer from '@cratis/components/PivotViewer'`                     | `import { PivotViewer } from '@cratis/components/PivotViewer'`                     |
+| `SchemaEditor`                      | `@cratis/components/SchemaEditor`                         | `import * as SchemaEditor from '@cratis/components/SchemaEditor'`                   | `import { SchemaEditor } from '@cratis/components/SchemaEditor'`                   |
+| `TimeMachine`                       | `@cratis/components/TimeMachine`                          | `import * as TimeMachine from '@cratis/components/TimeMachine'`                     | `import { TimeMachine, EventsView } from '@cratis/components/TimeMachine'`         |
+| `Toolbar`                           | `@cratis/components/Toolbar`                              | `import * as Toolbar from '@cratis/components/Toolbar'`                             | `import { Toolbar, ToolbarButton } from '@cratis/components/Toolbar'`              |
+| `Types`                             | `@cratis/components/types`                                | `import * as Types from '@cratis/components/types'`                                 | `import { JsonSchema, Json } from '@cratis/components/types'`                      |
+
+† The removed root `CommandStepper` namespace aliased the _entire_ `CommandDialog` module. The codemod therefore maps that namespace to `@cratis/components/CommandDialog`, preserving all existing namespace members. New code that needs only the standalone component should use the narrower named import from `@cratis/components/CommandStepper`.
 
 `@cratis/components/CommandForm/fields` is the same module as `@cratis/components/CommandForm` — either subpath resolves identically, so the `CommandForm` row's migration applies to both.
 
-A codemod will automate this rewrite across a source tree once it ships:
+Run the shipped AST-based codemod in preview mode first, then apply it:
 
 ```bash
-node Source/scripts/migrate-root-imports.mjs <paths...>
+node Codemods/scripts/remove-root-namespace-imports.js --check <paths...>
+node Codemods/scripts/remove-root-namespace-imports.js <paths...>
 ```
 
-This script has not shipped in this release — the invocation shape above is documented now so the tool and this guide describe the same command once it lands. Until then, apply the table by hand; it is a mechanical rename, not a behavioral change, so a codemod and a manual edit produce identical output.
+The codemod preserves aliases and type-only imports, splits mixed setup/namespace imports, and reports unsupported cases without guessing. Review its diagnostics, then run the consuming project's lint, build, and tests.
 
 ## Keep the stylesheet entry points
 
@@ -438,7 +441,7 @@ Complete PrimeIcons class strings remain usable where a component accepts `Icon`
 6. Exercise dialogs, filtered tables, dates, dropdowns, toasts, and steppers with keyboard-only navigation.
 7. Verify light, dark, forced-colors, reduced-motion, and responsive layouts.
 8. Run TypeScript, specs, Storybook, and the production build.
-9. Import components from their explicit subpath rather than the root namespace; apply the mapping table under [Import from explicit subpaths](#import-from-explicit-subpaths), or run the codemod once it ships.
+9. Import components from their explicit subpath rather than the removed root namespace; apply the mapping table under [Import from explicit subpaths](#import-from-explicit-subpaths), or run the shipped codemod.
 
 A TypeScript 6 application using `skipLibCheck: false` may see bounded upstream diagnostics from Pixi's `@webgpu/types` collision with TypeScript's built-in WebGPU declarations, from `@cratis/arc.react`'s published global JSX declarations, or under NodeNext from extensionless declaration imports in the current Arc and Fundamentals packages. Components validates every packed subpath without suppressing these diagnostics; exact versions, codes, affected subpaths, and removal conditions are documented under the published [UI foundation](https://cratis.io/components/ui-foundation/#strict-public-type-validation) explanation and tracked in [#176](https://github.com/Cratis/Components/issues/176).
 
diff --git a/Source/README.md b/Source/README.md
index c89a4447..b5701856 100644
--- a/Source/README.md
+++ b/Source/README.md
@@ -177,32 +177,32 @@ Do not target React Aria classes or internal DOM structure.
 
 The canonical rule: **the package root is setup-only; every component ships from its own subpath.** Import `CratisComponentsProvider` (and `cratisDefaults`, `mergeCratisComponentsConfig`) from the root; import every component from the subpath in its capability profile:
 
-| Subpath | Capability profile |
-| --- | --- |
-| `@cratis/components/Canvas` | Spatial (optional `pixi.js` peer) |
-| `@cratis/components/CommandDialog` | Foundation |
-| `@cratis/components/CommandStepper` | Foundation |
-| `@cratis/components/CommandForm` | Foundation |
-| `@cratis/components/CommandForm/fields` | Foundation |
-| `@cratis/components/Common` | Foundation |
-| `@cratis/components/DataPage` | Foundation |
-| `@cratis/components/DataTables` | Foundation |
-| `@cratis/components/Dialogs` | Foundation |
-| `@cratis/components/Display` | Foundation |
-| `@cratis/components/Dropdown` | Foundation |
-| `@cratis/components/Filter` | Foundation |
-| `@cratis/components/Notifications` | Foundation |
-| `@cratis/components/ObjectContentEditor` | Advanced React |
-| `@cratis/components/ObjectNavigationalBar` | Advanced React |
-| `@cratis/components/PivotViewer` | Spatial (optional `pixi.js` peer) |
-| `@cratis/components/SchemaEditor` | Advanced React |
-| `@cratis/components/TimeMachine` | Advanced React |
-| `@cratis/components/Toolbar` | Advanced React |
-| `@cratis/components/types` | Foundation |
+| Subpath                                    | Capability profile                |
+| ------------------------------------------ | --------------------------------- |
+| `@cratis/components/Canvas`                | Spatial (optional `pixi.js` peer) |
+| `@cratis/components/CommandDialog`         | Foundation                        |
+| `@cratis/components/CommandStepper`        | Foundation                        |
+| `@cratis/components/CommandForm`           | Foundation                        |
+| `@cratis/components/CommandForm/fields`    | Foundation                        |
+| `@cratis/components/Common`                | Foundation                        |
+| `@cratis/components/DataPage`              | Foundation                        |
+| `@cratis/components/DataTables`            | Foundation                        |
+| `@cratis/components/Dialogs`               | Foundation                        |
+| `@cratis/components/Display`               | Foundation                        |
+| `@cratis/components/Dropdown`              | Foundation                        |
+| `@cratis/components/Filter`                | Foundation                        |
+| `@cratis/components/Notifications`         | Foundation                        |
+| `@cratis/components/ObjectContentEditor`   | Advanced React                    |
+| `@cratis/components/ObjectNavigationalBar` | Advanced React                    |
+| `@cratis/components/PivotViewer`           | Spatial (optional `pixi.js` peer) |
+| `@cratis/components/SchemaEditor`          | Advanced React                    |
+| `@cratis/components/TimeMachine`           | Advanced React                    |
+| `@cratis/components/Toolbar`               | Advanced React                    |
+| `@cratis/components/types`                 | Foundation                        |
 
 Foundation, Advanced React, and Spatial are equal-support capability profiles, not stability tiers: all three ship from the same package at the same version, behind the same release gates, on the same semver line. "Spatial" describes what a component is for and what it costs to adopt (the optional Pixi peer), never how carefully it is built, tested, or versioned. See the published [Capability profiles](https://cratis.io/components/ui-foundation/#capability-profiles) explanation and its [capability matrix](https://cratis.io/components/ui-foundation/#capability-matrix) for state, persistence, Arc/Chronicle, SSR, and performance ownership per profile.
 
-The root also retains every subpath as a namespace export (`import { Canvas } from '@cratis/components'`, then `Canvas.CanvasItem`) for source compatibility with established consumers; this is not the pattern for new code, and this release does not remove it. Components 4 intentionally retains the existing namespace symbols; declaration-level TSDoc and API-reference coverage for them is tracked as ongoing documentation work, not as a silent 4.x export removal. [MIGRATION.md](./MIGRATION.md) has the complete namespace-to-subpath mapping and the codemod invocation for moving existing code off the root namespace.
+Components 4 removes component-family namespaces from the root. The root is intentionally setup-only so importing the provider never traverses optional or unrelated component graphs. [MIGRATION.md](./MIGRATION.md) contains the complete namespace-to-subpath mapping and the shipped codemod command for existing root imports.
 
 ## Components 3 migration
 

From a30f0e27c0614da2f2f73ae7a087a1e245dc2b11 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Tue, 25 Aug 2026 13:06:53 +0200
Subject: [PATCH 067/267] Run codemod verification in JavaScript CI

---
 .github/workflows/javascript-build.yml | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/.github/workflows/javascript-build.yml b/.github/workflows/javascript-build.yml
index 2f07b3c9..b41b5715 100644
--- a/.github/workflows/javascript-build.yml
+++ b/.github/workflows/javascript-build.yml
@@ -17,6 +17,8 @@ on:
             - 'main'
         paths:
             - 'Source/**'
+            - 'Codemods/**'
+            - 'ESLint/**'
             - 'package.json'
             - 'rollup.config.mjs'
             - 'yarn.lock'
@@ -26,6 +28,8 @@ on:
             - '**'
         paths:
             - 'Source/**'
+            - 'Codemods/**'
+            - 'ESLint/**'
             - 'package.json'
             - 'rollup.config.mjs'
             - 'yarn.lock'
@@ -67,6 +71,10 @@ jobs:
                   export NODE_OPTIONS="--max-old-space-size=4096"
                   yarn ci
 
+            - name: Verify root-import codemod
+              working-directory: Codemods
+              run: yarn test
+
             # Every intentionally public declaration/member reachable from a JS `exports`
             # subpath must carry a TSDoc comment (Cratis/Components#173). Runs against
             # source, so it needs no build step; its own self-tests run first and fail

From a1e4da5b36b3ffad67ab8b2e3a67098242dbbee2 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Tue, 25 Aug 2026 13:11:04 +0200
Subject: [PATCH 068/267] Restore the claim-safe Components MDX landing

---
 Documentation/index.mdx | 146 ++++++++++++++++++++++++++--------------
 1 file changed, 95 insertions(+), 51 deletions(-)

diff --git a/Documentation/index.mdx b/Documentation/index.mdx
index 83eeb2d2..91c3cb60 100644
--- a/Documentation/index.mdx
+++ b/Documentation/index.mdx
@@ -3,71 +3,115 @@ title: Components
 description: React components aligned with Arc application patterns.
 ---
 
-Components is a React component library aligned with Arc application patterns.
+import { Card, CardGrid, Steps } from '@astrojs/starlight/components';
+import SimpleCard from '@components/SimpleCard.astro';
+import TopicHero from '@components/TopicHero.astro';
+
+<TopicHero
+  icon="laptop"
+  eyebrow="Components"
+  title="React components aligned with Arc application patterns"
+>
+  Components is a React component library aligned with Arc application patterns.
+  The current package owns its public React markup, TypeScript contracts,
+  semantic tokens, stable parts, and component behavior.
+</TopicHero>
+
+## Start here
+
+<CardGrid>
+  <SimpleCard title="Install Components" icon="rocket" link="#minimal-setup">
+    Install the package, import its structural styles, and mount the provider.
+  </SimpleCard>
+  <SimpleCard title="Choose a component area" icon="list-format" link="#component-areas">
+    Start from the screen job rather than a raw component inventory.
+  </SimpleCard>
+  <SimpleCard title="Keep Arc separate" icon="puzzle" link="#relationship-to-arc">
+    Distinguish Arc-generated contracts from the React compositions that consume them.
+  </SimpleCard>
+</CardGrid>
 
-The current package provides React components for Arc-generated commands and
-queries, together with dialogs, data surfaces, editors, notifications, semantic
-tokens, stable parts, and application primitives.
+## Minimal setup
 
-## Relationship to Arc
+<Steps>
+1. Install the package.
 
-Components consumes generated command and query contracts and React contexts
-from Arc packages. Applications may use Arc without Components.
+   ```bash
+   npm install @cratis/components
+   ```
 
-Components does not by itself establish design-system completeness,
-accessibility conformance, browser coverage, or compatibility with every
-Arc/React/package-version combination. Verify those properties for the exact
-application and component profile shipped.
+2. Import semantic tokens and component structure. The baseline theme is
+   optional.
 
-## Minimal setup
+   ```tsx
+   import '@cratis/components/tokens';
+   import '@cratis/components/styles';
+   import '@cratis/components/theme';
+   ```
 
-Install the package:
+3. Mount the provider.
 
-```bash
-npm install @cratis/components
-```
+   ```tsx
+   import { CratisComponentsProvider } from '@cratis/components/Common';
 
-Import the token and component styles, then mount the provider. The baseline
-theme is optional.
+   export const App = () => (
+       <CratisComponentsProvider value={{ locale: 'en-US' }} toaster>
+           <YourApp />
+       </CratisComponentsProvider>
+   );
+   ```
+</Steps>
 
-```tsx
-import '@cratis/components/tokens';
-import '@cratis/components/styles';
-import '@cratis/components/theme';
-import { CratisComponentsProvider } from '@cratis/components/Common';
+The current package manifest defines the exact React, Arc, Fundamentals, and
+optional Pixi peer ranges. Verify those ranges for the package version selected.
 
-export const App = () => (
-    <CratisComponentsProvider value={{ locale: 'en-US' }} toaster>
-        <YourApp />
-    </CratisComponentsProvider>
-);
-```
+## Relationship to Arc
 
-## Component areas
+Components consumes generated command and query contracts and React contexts
+from Arc packages. Applications may use Arc without Components.
 
-| Area | Current package role |
-| --- | --- |
-| Command input | Typed fields, forms, dialogs, and multi-step command flows |
-| Data display | Query-backed and local-array tables, list pages, filters, and detail surfaces |
-| Application surfaces | Dialogs, notifications, dropdowns, display primitives, page chrome, and toolbars |
-| Structured editors | JSON content, JSON Schema, navigation, canvas, pivot, and time-oriented views |
-| Styling boundary | Semantic tokens, component styles, an optional baseline theme, and stable parts |
+Components does not by itself establish design-system completeness,
+accessibility conformance, browser coverage, or compatibility with every
+Arc/React/package-version combination.
 
-## Current boundaries
+## Component areas
 
-- Package manifests and exports define the exact React, Arc, Fundamentals, and
-  optional Pixi peer ranges.
-- Package existence, examples, Storybook output, and passing checks do not
-  establish maturity, accessibility conformance, browser coverage, support,
-  security, or production suitability.
-- Direct third-party UI dependencies retained by an application keep their own
-  package, provider, styling, and license boundaries.
+<CardGrid>
+  <Card title="Command input" icon="approve-check">
+    Typed fields, forms, dialogs, and multi-step command flows.
+  </Card>
+  <Card title="Data display" icon="seti:db">
+    Query-backed and local-array tables, list pages, filters, and detail surfaces.
+  </Card>
+  <Card title="Application surfaces" icon="laptop">
+    Dialogs, notifications, dropdowns, display primitives, page chrome, and toolbars.
+  </Card>
+  <Card title="Structured editors" icon="pencil">
+    JSON content, JSON Schema, navigation, canvas, pivot, and time-oriented views.
+  </Card>
+  <Card title="Styling boundary" icon="seti:config">
+    Semantic tokens, component styles, an optional baseline theme, and stable parts.
+  </Card>
+</CardGrid>
+
+:::caution[Evaluate the exact application profile]
+Package existence, examples, Storybook output, and passing checks do not
+establish maturity, accessibility conformance, browser coverage, support,
+security, or production suitability. Direct third-party UI dependencies retained
+by an application keep their own package, provider, styling, and license
+boundaries.
+:::
 
 ## Continue
 
-- [Components source and README](https://github.com/Cratis/Components) — package
-  setup, component map, contribution guidance, and current limits.
-- [Components on npm](https://www.npmjs.com/package/@cratis/components) —
-  published package metadata and versions.
-- [Arc](/arc/) — the CQRS framework whose application patterns Components
-  aligns with.
+<CardGrid>
+  <SimpleCard title="Components source and README" icon="seti:folder" link="https://github.com/Cratis/Components">
+    Package setup, migration guidance, contribution paths, and current limits.
+  </SimpleCard>
+  <SimpleCard title="Components on npm" icon="open-book" link="https://www.npmjs.com/package/@cratis/components">
+    Published package metadata and versions.
+  </SimpleCard>
+  <SimpleCard title="Arc" icon="puzzle" link="/arc/">
+    The CQRS framework whose application patterns Components aligns with.
+  </SimpleCard>
+</CardGrid>

From 2b18c9b798f6763daa96cee5d07b104cbc1b48cc Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Tue, 25 Aug 2026 13:11:12 +0200
Subject: [PATCH 069/267] Finalize root import migration tooling

---
 Codemods/lib/namespaceMap.js                    | 10 +++++-----
 .../scripts/remove-root-namespace-imports.js    | 17 ++++++++++++++---
 Codemods/test/cli.test.js                       | 16 ++++++++++++++++
 ESLint/lib/noRootBarrelImport.js                |  4 ++--
 ESLint/lib/rootNamespaceMap.js                  |  8 ++++----
 5 files changed, 41 insertions(+), 14 deletions(-)

diff --git a/Codemods/lib/namespaceMap.js b/Codemods/lib/namespaceMap.js
index d8d3dd12..67f6607c 100644
--- a/Codemods/lib/namespaceMap.js
+++ b/Codemods/lib/namespaceMap.js
@@ -2,9 +2,9 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 /**
- * Single source of truth for the root-namespace-removal migration: every namespace
- * currently re-exported from the `@cratis/components` package root, and the small set
- * of setup symbols that remain supported at the root once the namespaces are gone.
+ * Single source of truth for the root-namespace-removal migration: every component
+ * namespace removed from the Components 3 package root, and the small setup surface
+ * that remains supported at the Components 4 root.
  *
  * Mirrors `Source/index.ts` and the `exports` map in `Source/package.json`. When a
  * namespace subpath is added, renamed, or removed there, update `namespaceSubpaths`
@@ -18,8 +18,8 @@
 export const packageName = '@cratis/components';
 
 /**
- * Every namespace name importable from the package root today, mapped to the subpath
- * it becomes: `import { Canvas } from '@cratis/components'` migrates to
+ * Every namespace name removed from the Components 3 root, mapped to the Components 4
+ * subpath it becomes: `import { Canvas } from '@cratis/components'` migrates to
  * `import * as Canvas from '@cratis/components/Canvas'`. `Types` is the one case where
  * the namespace name and its subpath differ in casing (`./types`, lowercase).
  */
diff --git a/Codemods/scripts/remove-root-namespace-imports.js b/Codemods/scripts/remove-root-namespace-imports.js
index b5d3f835..de770041 100755
--- a/Codemods/scripts/remove-root-namespace-imports.js
+++ b/Codemods/scripts/remove-root-namespace-imports.js
@@ -17,7 +17,7 @@ function printUsage() {
             '',
             'Rewrites \'import { Namespace } from "@cratis/components"\' into',
             '\'import * as Namespace from "@cratis/components/Namespace"\' for every namespace',
-            'still reachable off the package root. Approved setup symbols (for example',
+            'removed from the Components 4 package root. Approved setup symbols (for example',
             "'CratisComponentsProvider') are left importable from the root.",
             '',
             'Options:',
@@ -62,7 +62,12 @@ function main(argv) {
         if (arg === '--check') {
             check = true;
         } else if (arg === '--package') {
-            packageName = args.shift();
+            const configuredPackage = args.shift();
+            if (!configuredPackage) {
+                console.error('--package requires a package name.');
+                return 1;
+            }
+            packageName = configuredPackage;
         } else if (arg === '--help' || arg === '-h') {
             printUsage();
             return 0;
@@ -76,7 +81,13 @@ function main(argv) {
         return 1;
     }
 
-    const files = paths.flatMap(collectFiles);
+    let files;
+    try {
+        files = paths.flatMap(collectFiles);
+    } catch (error) {
+        console.error(error instanceof Error ? error.message : String(error));
+        return 1;
+    }
     let changedCount = 0;
     let diagnosticCount = 0;
 
diff --git a/Codemods/test/cli.test.js b/Codemods/test/cli.test.js
index 02be1144..636993e6 100644
--- a/Codemods/test/cli.test.js
+++ b/Codemods/test/cli.test.js
@@ -31,6 +31,22 @@ describe('remove-root-namespace-imports CLI', () => {
         expect(result.stdout).toContain('Usage:');
     });
 
+    it('rejects --package without a package name', () => {
+        const result = run(['--package']);
+
+        expect(result.status).toBe(1);
+        expect(result.stderr).toContain('--package requires a package name');
+    });
+
+    it('reports a missing input path without a stack trace', () => {
+        const missing = path.join(dir, 'missing');
+        const result = run([missing]);
+
+        expect(result.status).toBe(1);
+        expect(result.stderr).toContain('no such file or directory');
+        expect(result.stderr).not.toContain('at collectFiles');
+    });
+
     it('--check reports a pending change without writing the file', () => {
         const file = path.join(dir, 'App.tsx');
         writeFileSync(file, "import { Canvas } from '@cratis/components';\n", 'utf8');
diff --git a/ESLint/lib/noRootBarrelImport.js b/ESLint/lib/noRootBarrelImport.js
index d66e75f5..7c691f17 100644
--- a/ESLint/lib/noRootBarrelImport.js
+++ b/ESLint/lib/noRootBarrelImport.js
@@ -4,8 +4,8 @@ const DEFAULTS = { packageName: '@cratis/components', allow: [] };
 
 // Disallow importing a component namespace from the Cratis Components root barrel. The
 // package exposes purpose-built subpath exports (`@cratis/components/CommandDialog`,
-// `@cratis/components/DataPage`, `@cratis/components/Toolbar`, …); importing a namespace
-// from the root pulls the whole optional-peer-heavy surface and hides intent. The small,
+// `@cratis/components/DataPage`, `@cratis/components/Toolbar`, …); Components 4 removes
+// component namespaces from the setup-only root. The small,
 // approved setup surface (`CratisComponentsProvider` and friends) remains importable from
 // the root. Covers `import` and re-`export … from` forms; only the `import` form is
 // autofixed, and only when every named specifier in the statement is unambiguous.
diff --git a/ESLint/lib/rootNamespaceMap.js b/ESLint/lib/rootNamespaceMap.js
index 233bc35b..3beada9f 100644
--- a/ESLint/lib/rootNamespaceMap.js
+++ b/ESLint/lib/rootNamespaceMap.js
@@ -3,8 +3,8 @@
 
 /**
  * Single source of truth for `no-root-barrel-import`'s namespace-aware behavior: every
- * namespace currently re-exported from the `@cratis/components` package root, and the
- * small set of setup symbols that remain supported at the root.
+ * component namespace removed from the Components 3 root, and the small setup surface
+ * that remains supported at the Components 4 root.
  *
  * Mirrors `Source/index.ts` and the `exports` map in `Source/package.json`. When a
  * namespace subpath is added, renamed, or removed there, update `namespaceSubpaths` here
@@ -15,8 +15,8 @@
  */
 
 /**
- * Every namespace name importable from the package root today, mapped to the subpath it
- * belongs to: importing `Canvas` from the root should instead be
+ * Every namespace name removed from the Components 3 root, mapped to the Components 4
+ * subpath it belongs to: importing `Canvas` from the root should instead be
  * `import * as Canvas from '@cratis/components/Canvas'`. `Types` is the one case where the
  * namespace name and its subpath differ in casing (`./types`, lowercase).
  */

From b9b6b5d378f5238f24d0bf973f3e83455e9b6418 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Tue, 25 Aug 2026 13:15:49 +0200
Subject: [PATCH 070/267] Document setup-only lint and codemod contracts

---
 Codemods/README.md |  2 ++
 ESLint/README.md   | 18 +++++++-----------
 2 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/Codemods/README.md b/Codemods/README.md
index e1f320bd..eaefa63d 100644
--- a/Codemods/README.md
+++ b/Codemods/README.md
@@ -18,6 +18,8 @@ a repository devDependency — no new dependency was added for this tool). It re
 | `import type { Canvas } from '@cratis/components';` | `import type * as Canvas from '@cratis/components/Canvas';` |
 | `import { Canvas as C } from '@cratis/components';` | `import * as C from '@cratis/components/Canvas';`           |
 
+The historical `CommandStepper` root namespace is a special case: it aliased the complete `CommandDialog` module. The codemod therefore maps it to `@cratis/components/CommandDialog`, preserving every namespace member. New code that only needs the standalone component should use `import { CommandStepper } from '@cratis/components/CommandStepper'`.
+
 Multiple namespaces in one import become one subpath import per namespace:
 
 ```ts
diff --git a/ESLint/README.md b/ESLint/README.md
index f5e41142..a3fb58b6 100644
--- a/ESLint/README.md
+++ b/ESLint/README.md
@@ -5,7 +5,7 @@ Cratis base config, [`@cratis/eslint-config`](https://www.npmjs.com/package/@cra
 
 | Rule | What it does |
 |---|---|
-| `no-root-barrel-import` | Disallows importing a component namespace from the `@cratis/components` root barrel. Use a subpath export (`@cratis/components/CommandDialog`, `@cratis/components/DataPage`, `@cratis/components/Toolbar`, …) — the root pulls the whole optional-peer-heavy surface and hides intent. The approved setup surface (`CratisComponentsProvider` and friends) remains allowed at the root; a single-namespace violation is autofixed. |
+| `no-root-barrel-import` | Disallows importing a removed Components 3 component namespace from the Components 4 setup-only root. Use the exact component subpath (`@cratis/components/CommandDialog`, `@cratis/components/DataPage`, `@cratis/components/Toolbar`, …). Package-wide provider/configuration symbols remain allowed at the root; an unambiguous namespace violation is autofixed. |
 | `no-primereact-dialog` | Disallows importing `Dialog` from `primereact/dialog`. Use `CommandDialog` from `@cratis/components/CommandDialog`, or `Dialog` from `@cratis/components/Dialogs` — the wrappers add Arc command binding, overlay/focus fixes, and theming. |
 | `onbeforeexecute-must-return` | Requires an `onBeforeExecute` callback to return the command values. `onBeforeExecute` is a transformer — a body that can complete without returning executes the command with `undefined` (silent data loss). |
 | `no-hooks-in-view-model` | Disallows React hooks (including generated Arc proxies' `.use()`) inside a view model class. View models must be plain, hook-free classes that receive injected abstractions. |
@@ -73,11 +73,11 @@ owned-label prop follows one consistent naming and JSDoc convention).
 
 ### `no-root-barrel-import`
 
-`@cratis/components` re-exports every component subpath as a namespace off the package root
-(`import { Canvas } from '@cratis/components'`) purely for discoverability. The rule keeps a
-fixed map of every current namespace name to its subpath, plus a short allowlist of setup
-symbols (`CratisComponentsProvider`, `cratisDefaults`, `mergeCratisComponentsConfig`,
-`CratisComponentsConfig`, `CratisComponentsProviderProps`) that stay importable from the root:
+Components 4 removes every component-family namespace from the package root. The rule keeps a fixed map from each Components 3 namespace to its Components 4 subpath, plus the exact setup allowlist that remains at the root:
+
+- `CratisComponentsProvider`, `useCratisComponentsConfig`, `cratisDefaults`, and `mergeCratisComponentsConfig`;
+- `CratisComponentsConfig`, `CratisComponentsProviderProps`, and `CratisComponentsMessages`;
+- `CratisPaginatorMessages`, `CratisDatePickerMessages`, `CratisDropdownMessages`, `CratisDialogMessages`, `CratisStepperMessages`, `CratisNotificationsMessages`, `CratisDataTableMessages`, and `CratisColumnFilterMessages`.
 
 ```ts
 // ✅ approved setup symbols stay at the root
@@ -90,11 +90,7 @@ import { Canvas } from '@cratis/components';
 import * as Canvas from '@cratis/components/Canvas';
 ```
 
-A single-namespace violation is autofixed to the namespace form shown above, preserving an
-alias (`Canvas as C`) and `import type` (`import type { Canvas } from '@cratis/components'`
-becomes `import type * as Canvas from '@cratis/components/Canvas'`, and a per-specifier
-`type` modifier is honored the same way). A mixed import naming both a setup symbol and a
-namespace is split — the setup symbol stays imported from the root, the namespace moves:
+A single-namespace violation is autofixed to the namespace form shown above, preserving an alias (`Canvas as C`) and `import type` (`import type { Canvas } from '@cratis/components'` becomes `import type * as Canvas from '@cratis/components/Canvas'`, and a per-specifier `type` modifier is honored the same way). The historical `CommandStepper` namespace is mapped to `@cratis/components/CommandDialog`, because that root namespace exposed the complete CommandDialog module rather than only the narrower standalone stepper entry. A mixed import naming both a setup symbol and a namespace is split — the setup symbol stays imported from the root, the namespace moves:
 
 ```ts
 // Before

From 1c0997407a812324577d88928f6d8ebc935eef7e Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Tue, 25 Aug 2026 13:16:58 +0200
Subject: [PATCH 071/267] Clarify setup-root dependency graph contract

---
 Source/index.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/Source/index.ts b/Source/index.ts
index 74bd74a2..50410707 100644
--- a/Source/index.ts
+++ b/Source/index.ts
@@ -12,8 +12,9 @@
  *
  * This keeps a consumer's root import free of every optional-peer-heavy subsystem
  * (Canvas and PivotViewer's Pixi dependency chief among them) and free of every
- * `@cratis/arc`/`@cratis/arc.react` binding: mounting `CratisComponentsProvider`
- * never requires installing, resolving, or type-checking against Pixi or Arc.
+ * `@cratis/arc`/`@cratis/arc.react` runtime or declaration edge. Importing the root
+ * therefore does not resolve or type-check Pixi or Arc modules; package-level peer metadata
+ * still describes the requirements of the complete set of optional capability subpaths.
  * Import a component from its subpath; import the provider and its configuration
  * types from here.
  */

From 7d6024f0a8563300517ccdb8613b3ff62ad0dfbc Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Tue, 25 Aug 2026 13:17:57 +0200
Subject: [PATCH 072/267] Guard migration guide namespace coverage

---
 Codemods/test/transform.test.js | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/Codemods/test/transform.test.js b/Codemods/test/transform.test.js
index 68b029a2..3ed54c11 100644
--- a/Codemods/test/transform.test.js
+++ b/Codemods/test/transform.test.js
@@ -66,6 +66,22 @@ describe('root namespace maps', () => {
             [...eslintApprovedRootSymbols].sort(),
         );
     });
+
+    it('should keep both migration guides aligned with every namespace and the shipped command', () => {
+        const guides = [
+            readFileSync(path.join(__dirname, '..', '..', 'Documentation', 'migration.md'), 'utf8'),
+            readFileSync(path.join(__dirname, '..', '..', 'Source', 'MIGRATION.md'), 'utf8'),
+        ];
+
+        for (const guide of guides) {
+            expect(guide).toContain(
+                'node Codemods/scripts/remove-root-namespace-imports.js --check <paths...>',
+            );
+            for (const namespace of Object.keys(codemodNamespaceSubpaths)) {
+                expect(guide).toContain(`| \`${namespace}\``);
+            }
+        }
+    });
 });
 
 describe('transformSource — fixture coverage', () => {

From 073e1d7ed40fa899e08a15dfbaed36e4835c5cef Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Tue, 25 Aug 2026 13:21:32 +0200
Subject: [PATCH 073/267] Type-check both spatial package entries

---
 Source/scripts/verify-spatial-consumer.mjs | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/Source/scripts/verify-spatial-consumer.mjs b/Source/scripts/verify-spatial-consumer.mjs
index 97fdcc7d..3dd6e80b 100644
--- a/Source/scripts/verify-spatial-consumer.mjs
+++ b/Source/scripts/verify-spatial-consumer.mjs
@@ -54,7 +54,15 @@ const fail = (label, detail) => {
 };
 const pass = (label) => console.log(`  ok   - ${label}`);
 
-const pkg = JSON.parse(readFileSync(path.join(packageDir, 'package.json'), 'utf8'));
+let pkg;
+try {
+    pkg = JSON.parse(readFileSync(path.join(packageDir, 'package.json'), 'utf8'));
+} catch (error) {
+    console.error(
+        `Could not read the package manifest: ${error instanceof Error ? error.message : String(error)}`,
+    );
+    process.exit(1);
+}
 
 const esmRoot = path.join(packageDir, path.dirname(pkg.module ?? 'dist/esm/index.js'));
 if (!existsSync(esmRoot)) {
@@ -178,7 +186,7 @@ if (identityResult.status === 0) {
     );
 }
 
-// --- 4. Strict TypeScript for Canvas with pixi.js installed ---------------------------------------
+// --- 4. Strict TypeScript for both spatial subpaths with pixi.js installed -------------------------
 
 const requireFromMonorepo = (await import('node:module')).createRequire(import.meta.url);
 let tscBin;
@@ -189,12 +197,12 @@ try {
 }
 
 if (tscBin) {
-    const fixtureDir = path.join(scratchRoot, 'types-canvas-bundler');
+    const fixtureDir = path.join(scratchRoot, 'types-spatial-bundler');
     const { mkdirSync } = await import('node:fs');
     mkdirSync(fixtureDir, { recursive: true });
     writeFileSync(
         path.join(fixtureDir, 'consumer.ts'),
-        `import type { CanvasProps, CanvasContext } from '${pkg.name}/Canvas';\ndeclare const props: CanvasProps;\nvoid props;\ndeclare const ctx: CanvasContext;\nvoid ctx;\n`,
+        `import type { CanvasProps, CanvasContext } from '${pkg.name}/Canvas';\nimport type { PivotViewerProps } from '${pkg.name}/PivotViewer';\ndeclare const canvasProps: CanvasProps;\nvoid canvasProps;\ndeclare const canvasContext: CanvasContext;\nvoid canvasContext;\ndeclare const pivotProps: PivotViewerProps<{ id: string }>;\nvoid pivotProps;\n`,
     );
     writeFileSync(
         path.join(fixtureDir, 'tsconfig.json'),
@@ -225,10 +233,10 @@ if (tscBin) {
         timeout: 60_000,
     });
     if (run.status === 0) {
-        pass('./Canvas type-checks with pixi.js installed');
+        pass('./Canvas and ./PivotViewer type-check with pixi.js installed');
     } else {
         fail(
-            './Canvas must type-check with pixi.js installed',
+            './Canvas and ./PivotViewer must type-check with pixi.js installed',
             (run.stdout || run.stderr || '').slice(0, 800),
         );
     }
@@ -250,5 +258,5 @@ if (failures.length > 0) {
 
 console.log(
     'All spatial consumer checks passed: Canvas/PivotViewer import with the explicit pixi.js peer, ' +
-        'pixi.js resolves to one identical instance with no nested copy, and Canvas type-checks.',
+        'pixi.js resolves to one identical instance with no nested copy, and both spatial subpaths type-check.',
 );

From 4d80439615954dd1cce6c246b4125b56ddef9c92 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Tue, 25 Aug 2026 13:27:14 +0200
Subject: [PATCH 074/267] Enforce aggregate stylesheet budgets

---
 Documentation/ui-foundation.md            |  2 ++
 Source/scripts/verify-package-archive.mjs | 35 ++++++++++++++++++++++-
 2 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/Documentation/ui-foundation.md b/Documentation/ui-foundation.md
index 001fb4de..087d07b1 100644
--- a/Documentation/ui-foundation.md
+++ b/Documentation/ui-foundation.md
@@ -95,6 +95,8 @@ Everything Pixi-related — the peer, the install, the single-resolution rule, a
 
 This means Foundation, Advanced React, and Spatial CSS all ship together today: importing `@cratis/components/styles` once loads Canvas's and PivotViewer's rules alongside Dialog's and DataTable's, whether or not the application ever renders `Canvas`. That is an acceptable, and currently the simplest, aggregate cost — plain CSS custom properties and class rules are inert until a matching class or `data-cratis-part` renders, so unused component CSS costs parse time on an already-small stylesheet, not runtime behavior, layout, or a Pixi/JavaScript dependency.
 
+The packed archive gate makes that trade-off measurable and fail-closed. The aggregate stylesheet currently has reviewed ceilings of **200 KiB raw**, **32 KiB gzip**, and **1,200 declaration blocks**. A change that crosses a ceiling must either reduce the payload or update the budget with measured consumer evidence; it cannot grow silently.
+
 A future split — for example, a separate `@cratis/components/styles/spatial` alongside a slimmer default — would only be justified once one of these becomes true and measured, not merely theoretical:
 
 - The aggregate manifest's compiled size becomes large enough that a Foundation-only application's CSS payload is a demonstrated problem, not a stylistic preference.
diff --git a/Source/scripts/verify-package-archive.mjs b/Source/scripts/verify-package-archive.mjs
index 178feefe..33e9ac40 100644
--- a/Source/scripts/verify-package-archive.mjs
+++ b/Source/scripts/verify-package-archive.mjs
@@ -2,6 +2,7 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import { spawnSync } from 'node:child_process';
+import { gzipSync } from 'node:zlib';
 import path from 'node:path';
 
 const archive = process.argv[2];
@@ -27,6 +28,7 @@ const requiredEntries = [
     'package/LICENSE',
     'package/README.md',
     'package/THIRD_PARTY_NOTICES.md',
+    'package/dist/esm/styles.css',
     'package/dist/esm/PatrickHand-OFL.txt',
     'package/dist/esm/PatrickHand-latin.woff2',
     'package/dist/esm/PatrickHand-latin-ext.woff2',
@@ -62,6 +64,37 @@ for (const expected of [
     }
 }
 
+const styles = runTar(
+    '-xOzf',
+    normalizedArchive,
+    'package/dist/esm/styles.css',
+);
+const styleBytes = Buffer.byteLength(styles);
+const gzipBytes = gzipSync(styles, { level: 9 }).byteLength;
+const declarationBlocks = styles.match(/\{/gu)?.length ?? 0;
+const styleBudget = {
+    rawBytes: 200 * 1024,
+    gzipBytes: 32 * 1024,
+    declarationBlocks: 1200,
+};
+const exceeded = [
+    styleBytes > styleBudget.rawBytes &&
+        `raw size ${styleBytes} > ${styleBudget.rawBytes} bytes`,
+    gzipBytes > styleBudget.gzipBytes &&
+        `gzip size ${gzipBytes} > ${styleBudget.gzipBytes} bytes`,
+    declarationBlocks > styleBudget.declarationBlocks &&
+        `declaration blocks ${declarationBlocks} > ${styleBudget.declarationBlocks}`,
+].filter(Boolean);
+if (exceeded.length > 0) {
+    console.error(
+        `Published aggregate CSS exceeds its reviewed budget:\n- ${exceeded.join('\n- ')}\n` +
+            'Reduce the payload or update the budget with measured consumer evidence.',
+    );
+    process.exit(1);
+}
+
 console.log(
-    `Package archive notices and bundled assets are complete: ${normalizedArchive}`,
+    `Package archive notices/assets are complete and aggregate CSS is within budget ` +
+        `(${styleBytes} raw bytes, ${gzipBytes} gzip bytes, ${declarationBlocks} blocks): ` +
+        normalizedArchive,
 );

From a51fcb293b02be936986fa18e0671d2c0d3a6e19 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Tue, 25 Aug 2026 13:29:09 +0200
Subject: [PATCH 075/267] Guard setup-root allowlist against source

---
 Codemods/test/transform.test.js | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/Codemods/test/transform.test.js b/Codemods/test/transform.test.js
index 3ed54c11..410611d4 100644
--- a/Codemods/test/transform.test.js
+++ b/Codemods/test/transform.test.js
@@ -5,6 +5,7 @@ import { readFileSync, readdirSync } from 'node:fs';
 import { fileURLToPath } from 'node:url';
 import path from 'node:path';
 import { describe, expect, it } from 'vitest';
+import ts from 'typescript';
 import { transformSource } from '../lib/transform.js';
 import {
     approvedRootSymbols as codemodApprovedRootSymbols,
@@ -67,6 +68,29 @@ describe('root namespace maps', () => {
         );
     });
 
+    it('should match the actual setup-only package root exports', () => {
+        const rootIndex = readFileSync(
+            path.join(__dirname, '..', '..', 'Source', 'index.ts'),
+            'utf8',
+        );
+        const sourceFile = ts.createSourceFile(
+            'Source/index.ts',
+            rootIndex,
+            ts.ScriptTarget.Latest,
+            true,
+            ts.ScriptKind.TS,
+        );
+        const exportedNames = sourceFile.statements
+            .filter(ts.isExportDeclaration)
+            .flatMap((declaration) =>
+                declaration.exportClause && ts.isNamedExports(declaration.exportClause)
+                    ? declaration.exportClause.elements.map((element) => element.name.text)
+                    : [],
+            );
+
+        expect(exportedNames.sort()).toEqual([...codemodApprovedRootSymbols].sort());
+    });
+
     it('should keep both migration guides aligned with every namespace and the shipped command', () => {
         const guides = [
             readFileSync(path.join(__dirname, '..', '..', 'Documentation', 'migration.md'), 'utf8'),

From 0ee90b21eaf8dff6719f122161016f10cd14fe60 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Tue, 25 Aug 2026 13:36:20 +0200
Subject: [PATCH 076/267] Publish the root import migration codemod

---
 .github/workflows/javascript-build.yml  |   4 +-
 Codemods/LICENSE                        |  21 +++++
 Codemods/README.md                      |  12 +--
 Codemods/package.json                   |  19 ++++-
 Codemods/test/transform.test.js         |   2 +-
 Codemods/test/verify-packed-package.mjs | 103 ++++++++++++++++++++++++
 Documentation/migration.md              |   6 +-
 README.md                               |   3 +-
 Source/MIGRATION.md                     |   6 +-
 9 files changed, 162 insertions(+), 14 deletions(-)
 create mode 100644 Codemods/LICENSE
 create mode 100644 Codemods/test/verify-packed-package.mjs

diff --git a/.github/workflows/javascript-build.yml b/.github/workflows/javascript-build.yml
index b41b5715..6ccf1770 100644
--- a/.github/workflows/javascript-build.yml
+++ b/.github/workflows/javascript-build.yml
@@ -73,7 +73,9 @@ jobs:
 
             - name: Verify root-import codemod
               working-directory: Codemods
-              run: yarn test
+              run: |
+                  yarn test
+                  yarn verify-package
 
             # Every intentionally public declaration/member reachable from a JS `exports`
             # subpath must carry a TSDoc comment (Cratis/Components#173). Runs against
diff --git a/Codemods/LICENSE b/Codemods/LICENSE
new file mode 100644
index 00000000..200ffde5
--- /dev/null
+++ b/Codemods/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Cratis
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/Codemods/README.md b/Codemods/README.md
index eaefa63d..9df51454 100644
--- a/Codemods/README.md
+++ b/Codemods/README.md
@@ -1,6 +1,6 @@
 # @cratis/components-codemods
 
-Internal, unpublished codemods that support the Components 3 root-namespace-removal migration. Components 4 keeps only package-wide provider setup at the root; every component is imported from its explicit subpath (`@cratis/components/Canvas`, for example). See
+Published migration codemods for moving from Components 3 root namespaces to Components 4 explicit subpath imports. Components 4 keeps only package-wide provider setup at the root; every component is imported from its explicit subpath (`@cratis/components/Canvas`, for example). See
 [`ESLint`'s `no-root-barrel-import` rule](../ESLint/README.md) for the lint-time guard that
 enforces this once a consumer has migrated.
 
@@ -78,13 +78,15 @@ consumers are left exactly as they are.
 
 ```sh
 # Preview what would change, without writing anything:
-node Codemods/scripts/remove-root-namespace-imports.js --check path/to/app/src
+npx --package @cratis/components-codemods \
+  cratis-components-remove-root-namespace-imports --check path/to/app/src
 
 # Apply the rewrite:
-node Codemods/scripts/remove-root-namespace-imports.js path/to/app/src
+npx --package @cratis/components-codemods \
+  cratis-components-remove-root-namespace-imports path/to/app/src
 
-# One specific file:
-node Codemods/scripts/remove-root-namespace-imports.js --check path/to/App.tsx
+# Contributors to this repository can run the workspace source directly:
+node Codemods/scripts/remove-root-namespace-imports.js --check Source
 ```
 
 Exit code is non-zero whenever an unsupported case was found (with `--check` or without —
diff --git a/Codemods/package.json b/Codemods/package.json
index 2b0efd93..5d566189 100644
--- a/Codemods/package.json
+++ b/Codemods/package.json
@@ -1,11 +1,22 @@
 {
     "name": "@cratis/components-codemods",
     "version": "0.0.0",
-    "private": true,
-    "description": "Internal codemods for migrating @cratis/components consumers off the deprecated package-root namespace barrel and onto subpath imports.",
+    "description": "Codemods for migrating @cratis/components consumers from Components 3 root namespaces to Components 4 subpath imports.",
     "author": "Cratis",
     "license": "MIT",
     "type": "module",
+    "publishConfig": {
+        "access": "public"
+    },
+    "engines": {
+        "node": ">=23.0.0"
+    },
+    "files": [
+        "lib",
+        "scripts",
+        "README.md",
+        "LICENSE"
+    ],
     "repository": {
         "type": "git",
         "url": "https://github.com/Cratis/Components"
@@ -15,6 +26,10 @@
     },
     "scripts": {
         "test": "yarn g:test",
+        "verify-package": "node ./test/verify-packed-package.mjs",
         "ci": "yarn g:test"
+    },
+    "dependencies": {
+        "typescript": "^6.0.3"
     }
 }
diff --git a/Codemods/test/transform.test.js b/Codemods/test/transform.test.js
index 410611d4..fadd19df 100644
--- a/Codemods/test/transform.test.js
+++ b/Codemods/test/transform.test.js
@@ -99,7 +99,7 @@ describe('root namespace maps', () => {
 
         for (const guide of guides) {
             expect(guide).toContain(
-                'node Codemods/scripts/remove-root-namespace-imports.js --check <paths...>',
+                'cratis-components-remove-root-namespace-imports --check <paths...>',
             );
             for (const namespace of Object.keys(codemodNamespaceSubpaths)) {
                 expect(guide).toContain(`| \`${namespace}\``);
diff --git a/Codemods/test/verify-packed-package.mjs b/Codemods/test/verify-packed-package.mjs
new file mode 100644
index 00000000..45f59598
--- /dev/null
+++ b/Codemods/test/verify-packed-package.mjs
@@ -0,0 +1,103 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { spawnSync } from 'node:child_process';
+import {
+    existsSync,
+    mkdtempSync,
+    readFileSync,
+    readdirSync,
+    rmSync,
+    writeFileSync,
+} from 'node:fs';
+import { tmpdir } from 'node:os';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const packageDir = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const scratch = mkdtempSync(path.join(tmpdir(), 'cratis-components-codemods-pack-'));
+const archive = path.join(scratch, 'codemods.tgz');
+const consumer = path.join(scratch, 'consumer');
+
+const run = (command, args, options = {}) =>
+    spawnSync(command, args, {
+        encoding: 'utf8',
+        timeout: 180_000,
+        ...options,
+    });
+
+const assertRun = (label, result, expectedStatus = 0) => {
+    if (result.status !== expectedStatus) {
+        throw new Error(
+            `${label} exited ${result.status}; expected ${expectedStatus}:\n${result.stderr || result.stdout}`,
+        );
+    }
+};
+
+try {
+    const packed = run('yarn', ['pack', '--out', archive], { cwd: packageDir });
+    assertRun('yarn pack', packed);
+    if (!existsSync(archive)) throw new Error('yarn pack did not create the archive.');
+
+    writeFileSync(
+        path.join(scratch, 'package.json'),
+        JSON.stringify({ private: true, type: 'module' }),
+    );
+    const installed = run(
+        'npm',
+        ['install', '--ignore-scripts', archive, '--prefix', consumer],
+        { cwd: scratch },
+    );
+    assertRun('npm install packed codemod', installed);
+
+    const installedRoot = path.join(
+        consumer,
+        'node_modules',
+        '@cratis',
+        'components-codemods',
+    );
+    const publishedEntries = readdirSync(installedRoot).sort();
+    for (const forbidden of ['test', 'vitest.config.js']) {
+        if (publishedEntries.includes(forbidden)) {
+            throw new Error(`Packed codemod leaked '${forbidden}'.`);
+        }
+    }
+
+    const source = path.join(consumer, 'App.ts');
+    writeFileSync(
+        source,
+        "import { SchemaEditor as EditorNS } from '@cratis/components';\n",
+    );
+    const binary = path.join(
+        consumer,
+        'node_modules',
+        '.bin',
+        process.platform === 'win32'
+            ? 'cratis-components-remove-root-namespace-imports.cmd'
+            : 'cratis-components-remove-root-namespace-imports',
+    );
+
+    const pending = run(binary, ['--check', source], { cwd: consumer });
+    assertRun('packed codemod --check before migration', pending, 1);
+    if (!pending.stdout.includes('1 would change, 0 unsupported')) {
+        throw new Error(`Unexpected --check output:\n${pending.stdout}`);
+    }
+
+    assertRun('packed codemod apply', run(binary, [source], { cwd: consumer }));
+    const migrated = readFileSync(source, 'utf8');
+    if (
+        !migrated.includes(
+            "import * as EditorNS from '@cratis/components/SchemaEditor';",
+        )
+    ) {
+        throw new Error(`Packed codemod produced unexpected output:\n${migrated}`);
+    }
+    assertRun(
+        'packed codemod --check after migration',
+        run(binary, ['--check', source], { cwd: consumer }),
+    );
+
+    console.log('Packed @cratis/components-codemods CLI verified.');
+} finally {
+    rmSync(scratch, { recursive: true, force: true });
+}
diff --git a/Documentation/migration.md b/Documentation/migration.md
index 60749ff1..d577f39a 100644
--- a/Documentation/migration.md
+++ b/Documentation/migration.md
@@ -91,8 +91,10 @@ This is an intentional Components 4 breaking change. The package root now expose
 Run the shipped AST-based codemod in preview mode first, then apply it:
 
 ```bash
-node Codemods/scripts/remove-root-namespace-imports.js --check <paths...>
-node Codemods/scripts/remove-root-namespace-imports.js <paths...>
+npx --package @cratis/components-codemods \
+  cratis-components-remove-root-namespace-imports --check <paths...>
+npx --package @cratis/components-codemods \
+  cratis-components-remove-root-namespace-imports <paths...>
 ```
 
 The codemod preserves aliases and type-only imports, splits mixed setup/namespace imports, and refuses to guess at default imports, whole-package namespace imports, dynamic imports, `require`, re-exports, side-effect imports, or unknown symbols. Review every reported unsupported case manually, then run the consuming project's lint, build, and tests.
diff --git a/README.md b/README.md
index 656aef59..0dd71c79 100644
--- a/README.md
+++ b/README.md
@@ -22,7 +22,8 @@ imports (`import { Canvas } from '@cratis/components'`) onto their canonical sub
 for full behavior and the companion `@cratis/components/no-root-barrel-import` ESLint rule.
 
 ```sh
-node Codemods/scripts/remove-root-namespace-imports.js <paths...>
+npx --package @cratis/components-codemods \
+  cratis-components-remove-root-namespace-imports <paths...>
 ```
 
 ## Support
diff --git a/Source/MIGRATION.md b/Source/MIGRATION.md
index a43a7b1c..57726c90 100644
--- a/Source/MIGRATION.md
+++ b/Source/MIGRATION.md
@@ -88,8 +88,10 @@ This is an intentional Components 4 breaking change. The package root now expose
 Run the shipped AST-based codemod in preview mode first, then apply it:
 
 ```bash
-node Codemods/scripts/remove-root-namespace-imports.js --check <paths...>
-node Codemods/scripts/remove-root-namespace-imports.js <paths...>
+npx --package @cratis/components-codemods \
+  cratis-components-remove-root-namespace-imports --check <paths...>
+npx --package @cratis/components-codemods \
+  cratis-components-remove-root-namespace-imports <paths...>
 ```
 
 The codemod preserves aliases and type-only imports, splits mixed setup/namespace imports, and reports unsupported cases without guessing. Review its diagnostics, then run the consuming project's lint, build, and tests.

From de9acc4915561364745b8f8d22a16151a39688c8 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Tue, 25 Aug 2026 15:16:17 +0200
Subject: [PATCH 077/267] Apply repository formatting

---
 Codemods/test/transform.test.js           | 14 +++++++--
 Codemods/test/verify-packed-package.mjs   |  4 +--
 Documentation/ui-foundation.md            | 12 ++++----
 ESLint/README.md                          | 35 ++++++++++++++---------
 README.md                                 | 10 +++----
 Source/scripts/verify-package-archive.mjs |  6 +---
 6 files changed, 46 insertions(+), 35 deletions(-)

diff --git a/Codemods/test/transform.test.js b/Codemods/test/transform.test.js
index fadd19df..7ac19209 100644
--- a/Codemods/test/transform.test.js
+++ b/Codemods/test/transform.test.js
@@ -84,7 +84,9 @@ describe('root namespace maps', () => {
             .filter(ts.isExportDeclaration)
             .flatMap((declaration) =>
                 declaration.exportClause && ts.isNamedExports(declaration.exportClause)
-                    ? declaration.exportClause.elements.map((element) => element.name.text)
+                    ? declaration.exportClause.elements.map(
+                          (element) => element.name.text,
+                      )
                     : [],
             );
 
@@ -93,8 +95,14 @@ describe('root namespace maps', () => {
 
     it('should keep both migration guides aligned with every namespace and the shipped command', () => {
         const guides = [
-            readFileSync(path.join(__dirname, '..', '..', 'Documentation', 'migration.md'), 'utf8'),
-            readFileSync(path.join(__dirname, '..', '..', 'Source', 'MIGRATION.md'), 'utf8'),
+            readFileSync(
+                path.join(__dirname, '..', '..', 'Documentation', 'migration.md'),
+                'utf8',
+            ),
+            readFileSync(
+                path.join(__dirname, '..', '..', 'Source', 'MIGRATION.md'),
+                'utf8',
+            ),
         ];
 
         for (const guide of guides) {
diff --git a/Codemods/test/verify-packed-package.mjs b/Codemods/test/verify-packed-package.mjs
index 45f59598..6d8f7c25 100644
--- a/Codemods/test/verify-packed-package.mjs
+++ b/Codemods/test/verify-packed-package.mjs
@@ -86,9 +86,7 @@ try {
     assertRun('packed codemod apply', run(binary, [source], { cwd: consumer }));
     const migrated = readFileSync(source, 'utf8');
     if (
-        !migrated.includes(
-            "import * as EditorNS from '@cratis/components/SchemaEditor';",
-        )
+        !migrated.includes("import * as EditorNS from '@cratis/components/SchemaEditor';")
     ) {
         throw new Error(`Packed codemod produced unexpected output:\n${migrated}`);
     }
diff --git a/Documentation/ui-foundation.md b/Documentation/ui-foundation.md
index 087d07b1..91e8f202 100644
--- a/Documentation/ui-foundation.md
+++ b/Documentation/ui-foundation.md
@@ -64,12 +64,12 @@ Components groups its subpaths into three capability profiles — a documentatio
 
 ## Capability matrix
 
-| Capability profile | Subpaths | Extra peer | State Components owns | Data & persistence | Arc / Chronicle relationship | SSR | Performance shape |
-| --- | --- | --- | --- | --- | --- | --- | --- |
-| **Setup** (root) | `@cratis/components` | — | Locale, provider-owned labels, toast-region wiring | none | none | Renders no browser-only API; safe to import and render on the server | negligible |
-| **Foundation** | `Common`, `CommandDialog` / `CommandStepper`, `CommandForm` / `CommandForm/fields`, `DataPage`, `DataTables`, `Dialogs`, `Display`, `Dropdown`, `Filter`, `Notifications`, `types` | — | Widget interaction state: open/closed, focus, loaded-page sort/filter, paginator position, toast queue | Command execution and query results are `@cratis/arc.react` state; Components never fetches, caches, or persists data | Commands and queries run through Arc; Arc may itself be backed by Chronicle in an event-sourced application, but Components has no direct Chronicle dependency and behaves the same over a plain Arc.Core backend | Every surface that portals or reads `document` (`Dialog`, `FilterPanel`, `Toaster`) gates on a shared `useSyncExternalStore` browser check and renders a stable placeholder until mounted | Table/paging cost scales with the loaded page only; complete-result filtering/sorting is a server concern (see [Update tables](migration.md#update-tables)) |
-| **Advanced React** | `ObjectContentEditor`, `ObjectNavigationalBar`, `SchemaEditor`, `TimeMachine`, `Toolbar` | — | Local edit-buffer, breadcrumb, scrub-position, and active-tool/expanded-panel state | 100% host-supplied through props (`object`, `schema`, `versions`, `navigationPath`, …) — none of these components fetch, cache, or persist anything | None built in and none assumed; each page documents how a Chronicle-backed host typically supplies its data | Plain React trees; `Toolbar`'s folder/fan-out/slot pieces use the same browser-detection pattern as Foundation where they portal or attach `document` listeners | Cost is proportional to the object/schema/version data the host passes in — see each page's own performance note |
-| **Spatial** | `Canvas`, `PivotViewer` | `pixi.js@^8.20.0` (optional, single shared resolution — see [Optional Pixi](#optional-pixi-clean-no-pixi-core)) | Camera/viewport/gesture transforms, measured item bounds, worker/index/filter state | Item, shape, and card data is host-supplied; Components renders and lets you query it, never persists it | Same as Foundation: an event-sourced host may project Chronicle read models into the data it passes in, but neither component has a Chronicle dependency | `PIXI.Application` creation and PivotViewer's Web Worker setup run inside effects, guarded and skipped — with a synchronous fallback for the worker — when `window`/`Worker` is unavailable; `CanvasOverlay` uses the same browser-check pattern as Foundation | Pixi rendering and PivotViewer's Web Worker indexing exist specifically to keep large item counts off the DOM and main thread — see [Canvas](Canvas/index.md#dom-and-pixi-layers) and [PivotViewer](PivotViewer/index.md#worker-and-search-architecture) |
+| Capability profile | Subpaths                                                                                                                                                                           | Extra peer                                                                                                      | State Components owns                                                                                  | Data & persistence                                                                                                                                  | Arc / Chronicle relationship                                                                                                                                                                                      | SSR                                                                                                                                                                                                                                                            | Performance shape                                                                                                                                                                                                                                        |
+| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Setup** (root)   | `@cratis/components`                                                                                                                                                               | —                                                                                                               | Locale, provider-owned labels, toast-region wiring                                                     | none                                                                                                                                                | none                                                                                                                                                                                                              | Renders no browser-only API; safe to import and render on the server                                                                                                                                                                                           | negligible                                                                                                                                                                                                                                               |
+| **Foundation**     | `Common`, `CommandDialog` / `CommandStepper`, `CommandForm` / `CommandForm/fields`, `DataPage`, `DataTables`, `Dialogs`, `Display`, `Dropdown`, `Filter`, `Notifications`, `types` | —                                                                                                               | Widget interaction state: open/closed, focus, loaded-page sort/filter, paginator position, toast queue | Command execution and query results are `@cratis/arc.react` state; Components never fetches, caches, or persists data                               | Commands and queries run through Arc; Arc may itself be backed by Chronicle in an event-sourced application, but Components has no direct Chronicle dependency and behaves the same over a plain Arc.Core backend | Every surface that portals or reads `document` (`Dialog`, `FilterPanel`, `Toaster`) gates on a shared `useSyncExternalStore` browser check and renders a stable placeholder until mounted                                                                      | Table/paging cost scales with the loaded page only; complete-result filtering/sorting is a server concern (see [Update tables](migration.md#update-tables))                                                                                              |
+| **Advanced React** | `ObjectContentEditor`, `ObjectNavigationalBar`, `SchemaEditor`, `TimeMachine`, `Toolbar`                                                                                           | —                                                                                                               | Local edit-buffer, breadcrumb, scrub-position, and active-tool/expanded-panel state                    | 100% host-supplied through props (`object`, `schema`, `versions`, `navigationPath`, …) — none of these components fetch, cache, or persist anything | None built in and none assumed; each page documents how a Chronicle-backed host typically supplies its data                                                                                                       | Plain React trees; `Toolbar`'s folder/fan-out/slot pieces use the same browser-detection pattern as Foundation where they portal or attach `document` listeners                                                                                                | Cost is proportional to the object/schema/version data the host passes in — see each page's own performance note                                                                                                                                         |
+| **Spatial**        | `Canvas`, `PivotViewer`                                                                                                                                                            | `pixi.js@^8.20.0` (optional, single shared resolution — see [Optional Pixi](#optional-pixi-clean-no-pixi-core)) | Camera/viewport/gesture transforms, measured item bounds, worker/index/filter state                    | Item, shape, and card data is host-supplied; Components renders and lets you query it, never persists it                                            | Same as Foundation: an event-sourced host may project Chronicle read models into the data it passes in, but neither component has a Chronicle dependency                                                          | `PIXI.Application` creation and PivotViewer's Web Worker setup run inside effects, guarded and skipped — with a synchronous fallback for the worker — when `window`/`Worker` is unavailable; `CanvasOverlay` uses the same browser-check pattern as Foundation | Pixi rendering and PivotViewer's Web Worker indexing exist specifically to keep large item counts off the DOM and main thread — see [Canvas](Canvas/index.md#dom-and-pixi-layers) and [PivotViewer](PivotViewer/index.md#worker-and-search-architecture) |
 
 ## Optional Pixi, clean no-Pixi core
 
diff --git a/ESLint/README.md b/ESLint/README.md
index a3fb58b6..97add2c5 100644
--- a/ESLint/README.md
+++ b/ESLint/README.md
@@ -3,13 +3,13 @@
 ESLint rules for projects that consume Cratis Components. Compose these on top of the
 Cratis base config, [`@cratis/eslint-config`](https://www.npmjs.com/package/@cratis/eslint-config).
 
-| Rule | What it does |
-|---|---|
-| `no-root-barrel-import` | Disallows importing a removed Components 3 component namespace from the Components 4 setup-only root. Use the exact component subpath (`@cratis/components/CommandDialog`, `@cratis/components/DataPage`, `@cratis/components/Toolbar`, …). Package-wide provider/configuration symbols remain allowed at the root; an unambiguous namespace violation is autofixed. |
-| `no-primereact-dialog` | Disallows importing `Dialog` from `primereact/dialog`. Use `CommandDialog` from `@cratis/components/CommandDialog`, or `Dialog` from `@cratis/components/Dialogs` — the wrappers add Arc command binding, overlay/focus fixes, and theming. |
-| `onbeforeexecute-must-return` | Requires an `onBeforeExecute` callback to return the command values. `onBeforeExecute` is a transformer — a body that can complete without returning executes the command with `undefined` (silent data loss). |
-| `no-hooks-in-view-model` | Disallows React hooks (including generated Arc proxies' `.use()`) inside a view model class. View models must be plain, hook-free classes that receive injected abstractions. |
-| `no-raw-command-form-marker` | Disallows identifying a CommandForm field or column by a hand-written `displayName` string, in either direction. Use `markAsCommandFormField`/`markAsCommandFormColumn` and `isCommandFormField`/`isCommandFormColumn` from `@cratis/components/CommandForm` — they go through a marker a build transform cannot rewrite. |
+| Rule                          | What it does                                                                                                                                                                                                                                                                                                                                                         |
+| ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `no-root-barrel-import`       | Disallows importing a removed Components 3 component namespace from the Components 4 setup-only root. Use the exact component subpath (`@cratis/components/CommandDialog`, `@cratis/components/DataPage`, `@cratis/components/Toolbar`, …). Package-wide provider/configuration symbols remain allowed at the root; an unambiguous namespace violation is autofixed. |
+| `no-primereact-dialog`        | Disallows importing `Dialog` from `primereact/dialog`. Use `CommandDialog` from `@cratis/components/CommandDialog`, or `Dialog` from `@cratis/components/Dialogs` — the wrappers add Arc command binding, overlay/focus fixes, and theming.                                                                                                                          |
+| `onbeforeexecute-must-return` | Requires an `onBeforeExecute` callback to return the command values. `onBeforeExecute` is a transformer — a body that can complete without returning executes the command with `undefined` (silent data loss).                                                                                                                                                       |
+| `no-hooks-in-view-model`      | Disallows React hooks (including generated Arc proxies' `.use()`) inside a view model class. View models must be plain, hook-free classes that receive injected abstractions.                                                                                                                                                                                        |
+| `no-raw-command-form-marker`  | Disallows identifying a CommandForm field or column by a hand-written `displayName` string, in either direction. Use `markAsCommandFormField`/`markAsCommandFormColumn` and `isCommandFormField`/`isCommandFormColumn` from `@cratis/components/CommandForm` — they go through a marker a build transform cannot rewrite.                                            |
 
 The two import rules cover `import` and re-`export … from` forms.
 
@@ -53,7 +53,7 @@ During the issue #174 localization pass, a static rule flagging a hardcoded Engl
 bypasses `CratisComponentsProvider` messages (e.g. a `title`/`aria-label` string sitting next to an
 already-localized prop) was considered and rejected. Every rule above is a syntactic, structural
 pattern an AST visitor resolves unambiguously (an import specifier, a known display-name
-constant, a callback's control-flow shape). Detecting an *owned-label bypass* instead requires
+constant, a callback's control-flow shape). Detecting an _owned-label bypass_ instead requires
 understanding which of a component's many string literals are user-facing chrome versus CSS class
 names, `data-*` values, decorative glyphs, or genuinely correct per-instance defaults — a semantic
 judgment call, not a syntactic one. A rule broad enough to catch a real bypass (any string literal
@@ -152,7 +152,9 @@ service) instead of calling a hook.
 ```ts
 // ❌ generated Arc proxy hook inside a view model
 class AuthorsViewModel {
-    load() { const [authors] = AllAuthors.use(); }   // flagged
+    load() {
+        const [authors] = AllAuthors.use();
+    } // flagged
 }
 
 // ✅ inject the abstraction; call hooks only in the component
@@ -172,7 +174,7 @@ inside a nested non–view-model class are not.
 `CommandForm`, `CommandDialog` and `CommandStepper` decide which children are fields by
 inspecting the child's component type. Historically that test was a single string
 comparison against `displayName` — and `displayName` is React's public, writable
-*diagnostic* name, a routine target for build tooling. Storybook's
+_diagnostic_ name, a routine target for build tooling. Storybook's
 `reactDocgen: 'react-docgen-typescript'` setting rewrites it by default.
 
 When it is rewritten, the child stops being recognized as a field: it renders with no
@@ -187,13 +189,20 @@ properties, and that shared shape is what carries the contract across the two pa
 ```ts
 // ❌ a build transform that rewrites displayName silently unbinds this field
 MyField.displayName = 'CommandFormField';
-if (component.displayName === 'CommandFormField') { wrap(component); }
+if (component.displayName === 'CommandFormField') {
+    wrap(component);
+}
 
 // ✅ marker first, legacy displayName still set and still honoured
-import { markAsCommandFormField, isCommandFormField } from '@cratis/components/CommandForm';
+import {
+    markAsCommandFormField,
+    isCommandFormField,
+} from '@cratis/components/CommandForm';
 
 markAsCommandFormField(MyField);
-if (isCommandFormField(component)) { wrap(component); }
+if (isCommandFormField(component)) {
+    wrap(component);
+}
 ```
 
 Flagged in both directions: assignment (`C.displayName = '…'`, including computed and
diff --git a/README.md b/README.md
index 0dd71c79..5cf15d29 100644
--- a/README.md
+++ b/README.md
@@ -30,8 +30,8 @@ npx --package @cratis/components-codemods \
 
 Cratis is an open community, and we are glad to help users, teams evaluating the stack, and contributors.
 
-| Channel | Details |
-|---|---|
-| Discord | Join the community on [Discord](https://discord.gg/kt4AMpV8WV) for questions and discussions |
-| GitHub Issues | [Report bugs or request features](https://github.com/Cratis/Components/issues) |
-| Documentation | Read the docs at [cratis.io](https://cratis.io) |
+| Channel       | Details                                                                                      |
+| ------------- | -------------------------------------------------------------------------------------------- |
+| Discord       | Join the community on [Discord](https://discord.gg/kt4AMpV8WV) for questions and discussions |
+| GitHub Issues | [Report bugs or request features](https://github.com/Cratis/Components/issues)               |
+| Documentation | Read the docs at [cratis.io](https://cratis.io)                                              |
diff --git a/Source/scripts/verify-package-archive.mjs b/Source/scripts/verify-package-archive.mjs
index 33e9ac40..ae173b5b 100644
--- a/Source/scripts/verify-package-archive.mjs
+++ b/Source/scripts/verify-package-archive.mjs
@@ -64,11 +64,7 @@ for (const expected of [
     }
 }
 
-const styles = runTar(
-    '-xOzf',
-    normalizedArchive,
-    'package/dist/esm/styles.css',
-);
+const styles = runTar('-xOzf', normalizedArchive, 'package/dist/esm/styles.css');
 const styleBytes = Buffer.byteLength(styles);
 const gzipBytes = gzipSync(styles, { level: 9 }).byteLength;
 const declarationBlocks = styles.match(/\{/gu)?.length ?? 0;

From a2c0e935a02ec8524ed7b120bca75f847b217d4c Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Tue, 25 Aug 2026 15:19:53 +0200
Subject: [PATCH 078/267] Harden the published codemod CLI

---
 Codemods/README.md                            |  3 +++
 Codemods/package.json                         |  2 +-
 .../scripts/remove-root-namespace-imports.js  |  5 ++++-
 Codemods/test/cli.test.js                     | 16 +++++++++++++++
 Codemods/test/verify-packed-package.mjs       | 20 ++++++++++++++-----
 5 files changed, 39 insertions(+), 7 deletions(-)

diff --git a/Codemods/README.md b/Codemods/README.md
index 9df51454..d56d03dc 100644
--- a/Codemods/README.md
+++ b/Codemods/README.md
@@ -76,6 +76,9 @@ consumers are left exactly as they are.
 
 ### Use
 
+The published CLI requires Node.js 20 or newer and brings its own TypeScript parser; it does
+not depend on the consumer application's TypeScript version.
+
 ```sh
 # Preview what would change, without writing anything:
 npx --package @cratis/components-codemods \
diff --git a/Codemods/package.json b/Codemods/package.json
index 5d566189..8a1a99f5 100644
--- a/Codemods/package.json
+++ b/Codemods/package.json
@@ -9,7 +9,7 @@
         "access": "public"
     },
     "engines": {
-        "node": ">=23.0.0"
+        "node": ">=20.0.0"
     },
     "files": [
         "lib",
diff --git a/Codemods/scripts/remove-root-namespace-imports.js b/Codemods/scripts/remove-root-namespace-imports.js
index de770041..c3b2461b 100755
--- a/Codemods/scripts/remove-root-namespace-imports.js
+++ b/Codemods/scripts/remove-root-namespace-imports.js
@@ -13,7 +13,7 @@ const SKIP_DIRS = new Set(['node_modules', 'dist', '.git', '.yarn']);
 function printUsage() {
     console.log(
         [
-            'Usage: remove-root-namespace-imports [--check] [--package <name>] <path...>',
+            'Usage: cratis-components-remove-root-namespace-imports [--check] [--package <name>] <path...>',
             '',
             'Rewrites \'import { Namespace } from "@cratis/components"\' into',
             '\'import * as Namespace from "@cratis/components/Namespace"\' for every namespace',
@@ -71,6 +71,9 @@ function main(argv) {
         } else if (arg === '--help' || arg === '-h') {
             printUsage();
             return 0;
+        } else if (arg.startsWith('-')) {
+            console.error(`Unknown option: ${arg}`);
+            return 1;
         } else {
             paths.push(arg);
         }
diff --git a/Codemods/test/cli.test.js b/Codemods/test/cli.test.js
index 636993e6..b5f51a4a 100644
--- a/Codemods/test/cli.test.js
+++ b/Codemods/test/cli.test.js
@@ -31,6 +31,22 @@ describe('remove-root-namespace-imports CLI', () => {
         expect(result.stdout).toContain('Usage:');
     });
 
+    it('prints public command help and exits 0', () => {
+        const result = run(['--help']);
+
+        expect(result.status).toBe(0);
+        expect(result.stdout).toContain(
+            'Usage: cratis-components-remove-root-namespace-imports',
+        );
+    });
+
+    it('rejects an unknown option', () => {
+        const result = run(['--chek']);
+
+        expect(result.status).toBe(1);
+        expect(result.stderr).toContain('Unknown option: --chek');
+    });
+
     it('rejects --package without a package name', () => {
         const result = run(['--package']);
 
diff --git a/Codemods/test/verify-packed-package.mjs b/Codemods/test/verify-packed-package.mjs
index 6d8f7c25..f0685b1a 100644
--- a/Codemods/test/verify-packed-package.mjs
+++ b/Codemods/test/verify-packed-package.mjs
@@ -63,11 +63,6 @@ try {
         }
     }
 
-    const source = path.join(consumer, 'App.ts');
-    writeFileSync(
-        source,
-        "import { SchemaEditor as EditorNS } from '@cratis/components';\n",
-    );
     const binary = path.join(
         consumer,
         'node_modules',
@@ -76,6 +71,21 @@ try {
             ? 'cratis-components-remove-root-namespace-imports.cmd'
             : 'cratis-components-remove-root-namespace-imports',
     );
+    const help = run(binary, ['--help'], { cwd: consumer });
+    assertRun('packed codemod --help', help);
+    if (
+        !help.stdout.includes(
+            'Usage: cratis-components-remove-root-namespace-imports',
+        )
+    ) {
+        throw new Error(`Unexpected --help output:\n${help.stdout}`);
+    }
+
+    const source = path.join(consumer, 'App.ts');
+    writeFileSync(
+        source,
+        "import { SchemaEditor as EditorNS } from '@cratis/components';\n",
+    );
 
     const pending = run(binary, ['--check', source], { cwd: consumer });
     assertRun('packed codemod --check before migration', pending, 1);

From 654bd470e730fa6fedfdbf07fc7dff6038729e51 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Tue, 25 Aug 2026 15:22:54 +0200
Subject: [PATCH 079/267] Cancel superseded pull request workflows

---
 .github/workflows/javascript-build.yml      | 4 ++++
 .github/workflows/markdown-verification.yml | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/.github/workflows/javascript-build.yml b/.github/workflows/javascript-build.yml
index 6ccf1770..f2ad8558 100644
--- a/.github/workflows/javascript-build.yml
+++ b/.github/workflows/javascript-build.yml
@@ -35,6 +35,10 @@ on:
             - 'yarn.lock'
             - '.github/workflows/javascript-build.yml'
 
+concurrency:
+    group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+    cancel-in-progress: true
+
 permissions:
     contents: read
 
diff --git a/.github/workflows/markdown-verification.yml b/.github/workflows/markdown-verification.yml
index 35cc4bbf..82bde028 100644
--- a/.github/workflows/markdown-verification.yml
+++ b/.github/workflows/markdown-verification.yml
@@ -13,6 +13,10 @@ on:
     paths:
       - "Documentation/**"
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
 permissions:
   contents: read
 

From 04a701798c66577b8d83bac222113cf68d847660 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Tue, 25 Aug 2026 17:12:58 +0200
Subject: [PATCH 080/267] Harden Components 4 release boundaries

---
 .../cratis-react-page/references/data-page.md | 141 ++++++------
 .../references/data-table.md                  |  92 ++++----
 .github/workflows/javascript-build.yml        |  89 ++++----
 .github/workflows/markdown-verification.yml   |  87 ++++----
 .github/workflows/publish.yml                 |  19 +-
 .gitignore                                    |   1 +
 Codemods/README.md                            |  29 ++-
 Codemods/lib/transform.js                     |  18 +-
 Codemods/test/cli.test.js                     |  15 ++
 .../unsupported-import-equals/expected.ts     |   6 +
 .../unsupported-import-equals/input.ts        |   6 +
 Codemods/test/transform.test.js               | 124 ++++++++++-
 Codemods/test/verify-packed-package.mjs       |  14 +-
 Documentation/Filter/index.md                 |  10 +-
 Documentation/migration.md                    |   2 +-
 Documentation/ui-foundation.md                |  13 +-
 Documentation/verify-markdown.sh              |   6 +-
 ESLint/LICENSE                                |  21 ++
 ESLint/README.md                              |   8 +-
 ESLint/lib/noRootBarrelImport.js              |  38 +++-
 ESLint/package.json                           |   4 +-
 ESLint/test/rules.test.js                     |  44 +++-
 ESLint/test/verify-packed-package.mjs         | 138 ++++++++++++
 Source/MIGRATION.md                           |   2 +-
 .../when_importing_from_the_root_barrel.ts    |  35 +--
 Source/package.json                           |   1 +
 .../when_matching_external_issues.ts          | 104 +++++++++
 .../lib/package-manager-consumer-probe.mjs    |  93 ++++++++
 Source/scripts/lib/public-type-exceptions.mjs |  45 ++++
 Source/scripts/verify-no-pixi-consumer.mjs    |  51 ++++-
 Source/scripts/verify-package-archive.mjs     |  17 ++
 .../verify-public-types.exceptions.json       |  19 +-
 Source/scripts/verify-public-types.mjs        | 206 +++++++++++++++---
 Source/scripts/verify-spatial-consumer.mjs    |  11 +-
 34 files changed, 1187 insertions(+), 322 deletions(-)
 create mode 100644 Codemods/test/fixtures/unsupported-import-equals/expected.ts
 create mode 100644 Codemods/test/fixtures/unsupported-import-equals/input.ts
 create mode 100644 ESLint/LICENSE
 create mode 100644 ESLint/test/verify-packed-package.mjs
 create mode 100644 Source/scripts/for_public_type_exceptions/when_matching_external_issues.ts
 create mode 100644 Source/scripts/lib/package-manager-consumer-probe.mjs
 create mode 100644 Source/scripts/lib/public-type-exceptions.mjs

diff --git a/.ai/skills/cratis-react-page/references/data-page.md b/.ai/skills/cratis-react-page/references/data-page.md
index da25baff..aa70005d 100644
--- a/.ai/skills/cratis-react-page/references/data-page.md
+++ b/.ai/skills/cratis-react-page/references/data-page.md
@@ -1,102 +1,97 @@
 # DataPage — Reference
 
-`DataPage` (from `@cratis/components`) is the standard full-page layout providing a menubar, data table, and optional detail panel in one component.
+`DataPage` is the standard full-page list layout. It combines an action menubar, a query-backed table, and an optional details pane. Import it from its explicit Components 4 subpath.
 
 ## Import
 
 ```tsx
-import { DataPage, MenuItemGroup, MenuItem, Column } from '@cratis/components';
+import { DataPage, Column } from '@cratis/components/DataPage';
 ```
 
 ## Core props
 
-| Prop | Type | Description |
-| --- | --- | --- |
-| `query` | Query or observable query class | Proxy-generated query — standard *or* observable; `DataPage` auto-detects and goes real-time for an observable query |
-| `columns` | `Column<T>[]` | Column definitions (see below) |
-| `menuItems` | `ReactNode` | Toolbar content (usually `<MenuItemGroup>`) |
-| `detailPanel` | `(row: T) => ReactNode` | Renders to the right when a row is selected |
-| `onRowSelected` | `(row: T) => void` | Callback when user clicks a row |
-| `noDataMessage` | `string` | Message when the query returns no rows |
-| `queryArgs` | `object` | Arguments forwarded to the query proxy |
-
-Pass either a standard or observable query to the single `query` prop — `DataPage` auto-detects which; there is no separate `observableQuery` prop.
-
-## Column definition
+| Prop | Type | Required | Description |
+| --- | --- | --- | --- |
+| `title` | `string` | ✓ | Page heading |
+| `query` | generated query class | ✓ | Snapshot or observable Arc query; `DataPage` selects the correct table automatically |
+| `emptyMessage` | `string` | ✓ | Message shown when the query returns no rows |
+| `children` | `ReactNode` | ✓ | `<DataPage.MenuItems>` and `<DataPage.Columns>` composition |
+| `queryArguments` | query argument object | | Arguments forwarded to the generated query |
+| `detailsComponent` | `React.FC<IDetailsComponentProps<T>>` | | Details pane shown for the selected row |
+| `selection` | row, `null`, or `undefined` | | Controlled/current selection |
+| `onSelectionChange` | `(event: DataTableSelectionChangeEvent<T>) => void` | | Selection callback; the selected row is `event.value` |
+| `dataKey` | `string` | | Stable row identity field |
+| `globalFilterFields` | `string[]` | | Fields searched within the currently loaded page |
+| `defaultFilters` | `DataTableFilterMeta` | | Initial loaded-page filters |
+| `onRefresh` | `() => void` | | Refresh callback exposed to the details component |
+
+## Declarative composition
+
+Actions use the static `DataPage.MenuItems` and `DataPage.MenuItem` members. `command` is the activation callback; `disableOnUnselected` handles actions that require a selected row.
 
 ```tsx
-type Column<T> = {
-    header: string;
-    field: keyof T | ((row: T) => string);
-    width?: number | string;
-    sortable?: boolean;
-};
+<DataPage.MenuItems>
+    <DataPage.MenuItem icon={FaPlus} label="Add" command={openCreate} />
+    <DataPage.MenuItem
+        icon={FaPencil}
+        label="Edit"
+        command={openEdit}
+        disableOnUnselected
+    />
+</DataPage.MenuItems>
 ```
 
-Example with custom renderer:
+Columns are children, not a `columns` prop:
 
 ```tsx
-columns={[
-    { header: 'Name', field: 'name' },
-    { header: 'Balance', field: (row) => row.balance.toFixed(2) },
-]}
+<DataPage.Columns>
+    <Column field="name" header="Name" sortable />
+    <Column
+        field="balance"
+        header="Balance"
+        body={(account) => account.balance.toFixed(2)}
+    />
+</DataPage.Columns>
 ```
 
-## MenuItemGroup / MenuItem
-
-```tsx
-<MenuItemGroup>
-    <MenuItem label="Add" onClick={openCreate} />
-    <MenuItem label="Delete" onClick={openDelete} disabled={!selectedRow} />
-</MenuItemGroup>
-```
-
-Multiple `MenuItemGroup` children create visual separators between groups.
-
-## Detail panel
+## Details component
 
-The detail panel receives the currently selected row. It is hidden when no row is selected.
+The details component receives the selected row as `item` and an `onRefresh` callback.
 
 ```tsx
-<DataPage
-    query={AllAccounts}
-    columns={...}
-    detailPanel={(account) => (
-        <AccountDetail accountId={account.id} />
-    )}
-/>
+const AccountDetails = ({ item, onRefresh }: IDetailsComponentProps<Account>) => (
+    <AccountEditor account={item} onSaved={onRefresh} />
+);
 ```
 
 ## Full example
 
 ```tsx
-import { useDialog } from '@cratis/arc.react/dialogs';
-import { CreateAccountDialog } from './CreateAccountDialog';
-
-export const AccountsPage = () => {
-    const [CreateAccountWrapper, showCreateAccount] = useDialog(CreateAccountDialog);
-
-    return (
-        <>
-            <DataPage
-                query={AllAccounts}
-                columns={[
-                    { header: 'Account', field: 'name' },
-                    { header: 'Owner', field: 'ownerName' },
-                    { header: 'Balance', field: (r) => `$${r.balance.toFixed(2)}` },
-                ]}
-                menuItems={
-                    <MenuItemGroup>
-                        <MenuItem label="Create Account" onClick={() => showCreateAccount()} />
-                    </MenuItemGroup>
-                }
-                detailPanel={(row) => <AccountDetail account={row} />}
-                noDataMessage="No accounts found."
+import { FaPencil, FaPlus } from 'react-icons/fa6';
+import { DataPage, Column } from '@cratis/components/DataPage';
+import { AllAccounts } from './AllAccounts';
+
+export const AccountsPage = () => (
+    <DataPage
+        title="Accounts"
+        query={AllAccounts}
+        emptyMessage="No accounts found."
+        detailsComponent={AccountDetails}>
+        <DataPage.MenuItems>
+            <DataPage.MenuItem icon={FaPlus} label="Add" command={openCreate} />
+            <DataPage.MenuItem
+                icon={FaPencil}
+                label="Edit"
+                command={openEdit}
+                disableOnUnselected
             />
-            <CreateAccountWrapper />
-        </>
-    );
-};
+        </DataPage.MenuItems>
+        <DataPage.Columns>
+            <Column field="name" header="Account" sortable />
+            <Column field="ownerName" header="Owner" />
+        </DataPage.Columns>
+    </DataPage>
+);
 ```
 
-`CreateAccountDialog` is a separate component that receives `closeDialog` via `DialogProps` and renders a `CommandDialog`. See `dialogs.md` for the full dialog pattern.
+`DataPage` needs a bounded-height ancestor so its table and paginator can size correctly.
diff --git a/.ai/skills/cratis-react-page/references/data-table.md b/.ai/skills/cratis-react-page/references/data-table.md
index c2cce210..e372b32c 100644
--- a/.ai/skills/cratis-react-page/references/data-table.md
+++ b/.ai/skills/cratis-react-page/references/data-table.md
@@ -1,62 +1,78 @@
 # Data Tables — Reference
 
-Use standalone data table components when you need a table without the built-in `DataPage` full-page chrome (e.g., embedded inside another panel or card).
+Use standalone data tables when a query-backed table is needed without `DataPage` page chrome. Import both tables and `Column` from the explicit DataTables subpath.
 
-## DataTableForQuery
+## Snapshot query
 
 ```tsx
-import { DataTableForQuery } from '@cratis/components';
-import { AllAccounts } from './queries/AllAccounts';
-
-<DataTableForQuery
-    query={AllAccounts}
-    columns={[
-        { header: 'Name', field: 'name' },
-        { header: 'Balance', field: 'balance' },
-    ]}
-    onRowSelected={(row) => setSelected(row)}
-/>
+import { DataTableForQuery, Column } from '@cratis/components/DataTables';
+import { AllAccounts } from './AllAccounts';
+
+<DataTableForQuery query={AllAccounts} emptyMessage="No accounts">
+    <Column field="name" header="Name" sortable />
+    <Column field="balance" header="Balance" />
+</DataTableForQuery>
 ```
 
-## DataTableForObservableQuery
+## Observable query
 
 ```tsx
-import { DataTableForObservableQuery } from '@cratis/components';
-import { AllAccountsLive } from './queries/AllAccountsLive';
+import {
+    DataTableForObservableQuery,
+    Column,
+} from '@cratis/components/DataTables';
+import { AllAccountsLive } from './AllAccountsLive';
 
 <DataTableForObservableQuery
     query={AllAccountsLive}
-    columns={...}
-    onRowSelected={(row) => setSelected(row)}
-/>
+    emptyMessage="No accounts">
+    <Column field="name" header="Name" sortable />
+    <Column field="balance" header="Balance" />
+</DataTableForObservableQuery>
 ```
 
 ## Shared props
 
-| Prop | Type | Description |
-| --- | --- | --- |
-| `query` / `query` | Query class | Proxy query (use the appropriate component for type) |
-| `columns` | `Column<T>[]` | Column definitions (same shape as DataPage) |
-| `onRowSelected` | `(row: T) => void` | Row click callback |
-| `selectedRow` | `T \| undefined` | Externally controlled selected row |
-| `noDataMessage` | `string` | Message when no rows are returned |
-| `queryArgs` | `object` | Arguments forwarded to the query |
+| Prop | Type | Required | Description |
+| --- | --- | --- | --- |
+| `query` | generated query class | ✓ | Snapshot or observable query matching the chosen component |
+| `emptyMessage` | `string` | ✓ | Message shown when no rows are returned |
+| `children` | `ReactNode` | | `<Column>` markers describing visible columns |
+| `queryArguments` | query argument object | | Arguments forwarded to the generated query |
+| `selection` | row, `null`, or `undefined` | | Controlled/current selection |
+| `onSelectionChange` | `(event: DataTableSelectionChangeEvent<T>) => void` | | Selection callback; selected row is `event.value` |
+| `dataKey` | `string` | | Stable row identity field |
+| `globalFilterFields` | `string[]` | | Fields searched within the currently loaded page |
+| `defaultFilters` | `DataTableFilterMeta` | | Initial loaded-page filters |
+| `className` / `pt` | styling hooks | | Root class and stable Cratis table parts |
+| `paginatorClassName` / `paginatorPt` | styling hooks | | Paginator class and parts |
 
 ## Column definition
 
-```ts
-type Column<T> = {
-    header: string;
-    field: keyof T | ((row: T) => string);
-    width?: number | string;
-};
+`Column` is a marker component. Common props include:
+
+- `field`, `header`, and optional `body` cell renderer;
+- `sortable`;
+- `filter`, `filterField`, `filterPlaceholder`, and `dataType`;
+- `selectionMode="single"`;
+- cell/header class, style, and part customization.
+
+```tsx
+<Column
+    field="balance"
+    header="Balance"
+    sortable
+    body={(account) => account.balance.toFixed(2)}
+/>
 ```
 
-## When to use each component
+## Choose the surface
 
 | Situation | Component |
 | --- | --- |
-| Full page with toolbar | `DataPage` |
-| Embedded table, standard query | `DataTableForQuery` |
-| Embedded table, real-time push | `DataTableForObservableQuery` |
-| Inline data (no query) | Custom table (out of scope) |
+| Full page with actions/details | `DataPage` |
+| Embedded snapshot table | `DataTableForQuery` |
+| Embedded real-time table | `DataTableForObservableQuery` |
+| Already-loaded inline rows | `DataTableCore` |
+
+Filtering and sorting apply to the currently loaded page. Complete-result filtering/sorting belongs in server query arguments before paging.
diff --git a/.github/workflows/javascript-build.yml b/.github/workflows/javascript-build.yml
index f2ad8558..6a0fcc15 100644
--- a/.github/workflows/javascript-build.yml
+++ b/.github/workflows/javascript-build.yml
@@ -64,8 +64,7 @@ jobs:
                       .yarn/cache
                       **/node_modules
                       **/.eslintcache
-                      **/yarn.lock
-                  key: ${{ runner.os }}-yarn-${{ hashFiles('**/package.json') }}
+                  key: ${{ runner.os }}-yarn-v2-${{ hashFiles('**/package.json', '.yarnrc.yml') }}
 
             - name: Yarn install
               run: yarn
@@ -81,6 +80,10 @@ jobs:
                   yarn test
                   yarn verify-package
 
+            - name: Verify packed ESLint plugin
+              working-directory: ESLint
+              run: yarn verify-package
+
             # Every intentionally public declaration/member reachable from a JS `exports`
             # subpath must carry a TSDoc comment (Cratis/Components#173). Runs against
             # source, so it needs no build step; its own self-tests run first and fail
@@ -127,8 +130,7 @@ jobs:
                       .yarn/cache
                       **/node_modules
                       **/.eslintcache
-                      **/yarn.lock
-                  key: ${{ runner.os }}-yarn-${{ hashFiles('**/package.json') }}
+                  key: ${{ runner.os }}-yarn-v2-${{ hashFiles('**/package.json', '.yarnrc.yml') }}
 
             - name: Yarn install
               run: yarn
@@ -168,8 +170,7 @@ jobs:
                       .yarn/cache
                       **/node_modules
                       **/.eslintcache
-                      **/yarn.lock
-                  key: ${{ runner.os }}-yarn-${{ hashFiles('**/package.json') }}
+                  key: ${{ runner.os }}-yarn-v2-${{ hashFiles('**/package.json', '.yarnrc.yml') }}
 
             - name: Yarn install
               run: yarn
@@ -219,8 +220,7 @@ jobs:
                       .yarn/cache
                       **/node_modules
                       **/.eslintcache
-                      **/yarn.lock
-                  key: ${{ runner.os }}-yarn-${{ hashFiles('**/package.json') }}
+                  key: ${{ runner.os }}-yarn-v2-${{ hashFiles('**/package.json', '.yarnrc.yml') }}
 
             - name: Yarn install
               run: yarn
@@ -268,8 +268,7 @@ jobs:
                       .yarn/cache
                       **/node_modules
                       **/.eslintcache
-                      **/yarn.lock
-                  key: ${{ runner.os }}-yarn-${{ hashFiles('**/package.json') }}
+                  key: ${{ runner.os }}-yarn-v2-${{ hashFiles('**/package.json', '.yarnrc.yml') }}
 
             - name: Yarn install
               run: yarn
@@ -309,8 +308,7 @@ jobs:
                       .yarn/cache
                       **/node_modules
                       **/.eslintcache
-                      **/yarn.lock
-                  key: ${{ runner.os }}-yarn-${{ hashFiles('**/package.json') }}
+                  key: ${{ runner.os }}-yarn-v2-${{ hashFiles('**/package.json', '.yarnrc.yml') }}
 
             - name: Yarn install
               run: yarn
@@ -351,8 +349,7 @@ jobs:
                       .yarn/cache
                       **/node_modules
                       **/.eslintcache
-                      **/yarn.lock
-                  key: ${{ runner.os }}-yarn-${{ hashFiles('**/package.json') }}
+                  key: ${{ runner.os }}-yarn-v2-${{ hashFiles('**/package.json', '.yarnrc.yml') }}
 
             - name: Yarn install
               run: yarn
@@ -429,11 +426,23 @@ jobs:
 
     verify-package-managers:
         runs-on: ubuntu-latest
-        timeout-minutes: 15
+        timeout-minutes: 20
         strategy:
             fail-fast: false
             matrix:
-                manager: ['pnpm', 'yarn-pnp']
+                include:
+                    - manager: npm
+                      pixi: absent
+                    - manager: npm
+                      pixi: present
+                    - manager: pnpm
+                      pixi: absent
+                    - manager: pnpm
+                      pixi: present
+                    - manager: yarn-pnp
+                      pixi: absent
+                    - manager: yarn-pnp
+                      pixi: present
 
         steps:
             - name: Checkout code
@@ -463,33 +472,35 @@ jobs:
                   cat > /tmp/components-consumer/package.json <<'JSON'
                   {"private":true,"type":"module"}
                   JSON
-                  cat > /tmp/components-consumer/verify.mjs <<'NODE'
-                  const commandDialog = await import('@cratis/components/CommandDialog');
-                  const dataPage = await import('@cratis/components/DataPage');
-                  const notifications = await import('@cratis/components/Notifications');
-                  if (!commandDialog.CommandDialog || !dataPage.DataPage || !notifications.toast) {
-                      throw new Error('The packed Components surface is incomplete');
-                  }
-                  for (const forbidden of ['primereact', '@primereact/core', '@primeuix/themes']) {
-                      try {
-                          import.meta.resolve(forbidden);
-                          throw new Error(`Unexpected renderer dependency: ${forbidden}`);
-                      } catch (error) {
-                          if (error instanceof Error && error.message.startsWith('Unexpected')) throw error;
-                      }
-                  }
-                  NODE
+                  cp Source/scripts/lib/package-manager-consumer-probe.mjs \
+                    /tmp/components-consumer/verify.mjs
+
+            - name: Verify npm consumer
+              if: matrix.manager == 'npm'
+              working-directory: /tmp/components-consumer
+              run: |
+                  PIXI=()
+                  if [ "${{ matrix.pixi }}" = 'present' ]; then PIXI+=(pixi.js@8.20.0); fi
+                  npm install --ignore-scripts --no-audit --no-fund \
+                    /tmp/cratis-components.tgz \
+                    @cratis/arc@22.1.0 @cratis/arc.react@22.1.0 \
+                    @cratis/fundamentals@7.18.1 react@19.2.8 react-dom@19.2.8 \
+                    reflect-metadata@0.2.2 tsyringe@4.10.0 "${PIXI[@]}"
+                  node verify.mjs "${{ matrix.pixi }}"
 
             - name: Verify pnpm consumer
               if: matrix.manager == 'pnpm'
               working-directory: /tmp/components-consumer
               run: |
                   corepack prepare pnpm@10.17.1 --activate
-                  pnpm add --ignore-scripts \
+                  PIXI=()
+                  if [ "${{ matrix.pixi }}" = 'present' ]; then PIXI+=(pixi.js@8.20.0); fi
+                  pnpm add --ignore-scripts --strict-peer-dependencies \
                     /tmp/cratis-components.tgz \
                     @cratis/arc@22.1.0 @cratis/arc.react@22.1.0 \
-                    @cratis/fundamentals react@19 react-dom@19 reflect-metadata tsyringe
-                  pnpm exec node verify.mjs
+                    @cratis/fundamentals@7.18.1 react@19.2.8 react-dom@19.2.8 \
+                    reflect-metadata@0.2.2 tsyringe@4.10.0 "${PIXI[@]}"
+                  pnpm exec node verify.mjs "${{ matrix.pixi }}"
 
             - name: Verify Yarn PnP consumer
               if: matrix.manager == 'yarn-pnp'
@@ -505,9 +516,11 @@ jobs:
                       dependencies:
                         rxjs: "*"
                   YAML
+                  PIXI=()
+                  if [ "${{ matrix.pixi }}" = 'present' ]; then PIXI+=(pixi.js@8.20.0); fi
                   yarn add \
                     /tmp/cratis-components.tgz \
                     @cratis/arc@22.1.0 @cratis/arc.react@22.1.0 \
-                    @cratis/fundamentals react@19 react-dom@19 \
-                    reflect-metadata tsyringe rxjs
-                  yarn node verify.mjs
+                    @cratis/fundamentals@7.18.1 react@19.2.8 react-dom@19.2.8 \
+                    reflect-metadata@0.2.2 tsyringe@4.10.0 rxjs@7.8.2 "${PIXI[@]}"
+                  yarn node verify.mjs "${{ matrix.pixi }}"
diff --git a/.github/workflows/markdown-verification.yml b/.github/workflows/markdown-verification.yml
index 82bde028..68bb321a 100644
--- a/.github/workflows/markdown-verification.yml
+++ b/.github/workflows/markdown-verification.yml
@@ -1,49 +1,62 @@
 name: Markdown Verification
 
 on:
-  workflow_dispatch:
-  push:
-    branches:
-      - main
-    paths:
-      - "Documentation/**"
-  pull_request:
-    branches:
-      - "**"
-    paths:
-      - "Documentation/**"
+    workflow_dispatch:
+    push:
+        branches:
+            - main
+        paths:
+            - 'Documentation/**'
+            - 'README.md'
+            - 'Source/*.md'
+            - 'Codemods/*.md'
+            - 'ESLint/*.md'
+    pull_request:
+        branches:
+            - '**'
+        paths:
+            - 'Documentation/**'
+            - 'README.md'
+            - 'Source/*.md'
+            - 'Codemods/*.md'
+            - 'ESLint/*.md'
 
 concurrency:
-  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
-  cancel-in-progress: true
+    group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+    cancel-in-progress: true
 
 permissions:
-  contents: read
+    contents: read
 
 jobs:
-  markdown-lint:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
+    markdown-lint:
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout code
+              uses: actions/checkout@v4
 
-      - name: Lint Markdown files
-        uses: DavidAnson/markdownlint-cli2-action@v18
-        with:
-          globs: 'Documentation/**/*.md'
+            - name: Lint Markdown files
+              uses: DavidAnson/markdownlint-cli2-action@v18
+              with:
+                  globs: |
+                      README.md
+                      Documentation/**/*.md
+                      Source/*.md
+                      Codemods/*.md
+                      ESLint/*.md
 
-  link-verification:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
+    link-verification:
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout code
+              uses: actions/checkout@v4
 
-      - name: Check links in Documentation
-        uses: JustinBeckwith/linkinator-action@v1
-        with:
-          paths: 'Documentation/**/*.md'
-          markdown: true
-          recurse: true
-          redirects: allow
-          statusCodes: '403:ok'
-          linksToSkip: '^(https?:\/\/)?(localhost|127\.0\.0\.1)(:\d+)?(\/|$)'
+            - name: Check links in Documentation
+              uses: JustinBeckwith/linkinator-action@v1
+              with:
+                  paths: 'Documentation/**/*.md'
+                  markdown: true
+                  recurse: true
+                  redirects: allow
+                  statusCodes: '403:ok'
+                  linksToSkip: '^(https?:\/\/)?(localhost|127\.0\.0\.1)(:\d+)?(\/|$)'
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
index c3f12820..dadcf6e3 100644
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@@ -87,9 +87,9 @@ jobs:
           echo "--- .npmrc after stripping placeholder ---"
           cat "$NPM_CONFIG_USERCONFIG"
 
-      - name: Upgrade npm for trusted publishing (requires >= 11.5.1)
+      - name: Install pinned npm for trusted publishing (requires >= 11.5.1)
         run: |
-          npm install -g npm@11
+          npm install -g npm@11.6.2
           NPM_VER="$(npm --version)"
           echo "Installed npm $NPM_VER"
           node -e "
@@ -107,8 +107,7 @@ jobs:
             .yarn/cache
             **/node_modules
             **/.eslintcache
-            **/yarn.lock
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/package.json') }}
+          key: ${{ runner.os }}-yarn-v2-${{ hashFiles('**/package.json', '.yarnrc.yml') }}
 
       - name: Yarn install
         run: yarn
@@ -116,8 +115,16 @@ jobs:
       - name: Publish NPM packages
         run: |
           echo "npm $(npm --version) | node $(node --version)"
-          echo "ACTIONS_ID_TOKEN_REQUEST_URL is $([ -n \"$ACTIONS_ID_TOKEN_REQUEST_URL\" ] && echo 'set' || echo 'NOT set')"
-          echo "NODE_AUTH_TOKEN is '${NODE_AUTH_TOKEN:-(unset)}'"
+          if [[ -n "${ACTIONS_ID_TOKEN_REQUEST_URL:-}" ]]; then
+            echo "ACTIONS_ID_TOKEN_REQUEST_URL is set"
+          else
+            echo "ACTIONS_ID_TOKEN_REQUEST_URL is NOT set"
+          fi
+          if [[ -n "${NODE_AUTH_TOKEN:-}" ]]; then
+            echo "NODE_AUTH_TOKEN is set"
+          else
+            echo "NODE_AUTH_TOKEN is unset"
+          fi
           echo "--- .npmrc ---"
           cat "$NPM_CONFIG_USERCONFIG" 2>/dev/null || echo "(no .npmrc)"
           echo "---"
diff --git a/.gitignore b/.gitignore
index 23dbf902..dca8df00 100644
--- a/.gitignore
+++ b/.gitignore
@@ -299,6 +299,7 @@ out
 !.yarn/versions
 yarn.lock
 coverage
+.pi/
 
 .DS_Store
 
diff --git a/Codemods/README.md b/Codemods/README.md
index d56d03dc..74db1966 100644
--- a/Codemods/README.md
+++ b/Codemods/README.md
@@ -1,14 +1,15 @@
 # @cratis/components-codemods
 
-Published migration codemods for moving from Components 3 root namespaces to Components 4 explicit subpath imports. Components 4 keeps only package-wide provider setup at the root; every component is imported from its explicit subpath (`@cratis/components/Canvas`, for example). See
-[`ESLint`'s `no-root-barrel-import` rule](../ESLint/README.md) for the lint-time guard that
-enforces this once a consumer has migrated.
+Published migration codemods for moving from Components 3 root namespaces to Components 4 explicit subpath imports. Components 4 keeps only package-wide provider setup at the root; every component is imported from its explicit subpath (`@cratis/components/Canvas`, for example). See the published
+[`no-root-barrel-import` ESLint rule](https://www.npmjs.com/package/@cratis/eslint-plugin-components#no-root-barrel-import)
+for the lint-time guard that enforces this once a consumer has migrated.
 
 ## `remove-root-namespace-imports`
 
-An idempotent, AST-based codemod built on the TypeScript compiler API (`typescript`, already
-a repository devDependency — no new dependency was added for this tool). It rewrites static
-`import` declarations only; it never guesses, and reports every case it will not touch.
+An idempotent, AST-based codemod built on the TypeScript compiler API. The published CLI
+brings its own `typescript` runtime dependency, so its parser does not depend on the consumer
+application's TypeScript version. It rewrites static `import` declarations only; it never
+guesses, and reports every case it will not touch.
 
 ### What it rewrites
 
@@ -48,9 +49,10 @@ whose module specifier is exactly `@cratis/components` (or the `--package` overr
 already-migrated subpath import is never revisited.
 
 The complete namespace → subpath map and the approved-root-symbol allowlist live in
-[`lib/namespaceMap.js`](./lib/namespaceMap.js), mirrored from `Source/index.ts`. Update both
-that file and [`ESLint/lib/rootNamespaceMap.js`](../ESLint/lib/rootNamespaceMap.js) together
-when a namespace subpath is added, renamed, or removed.
+[`lib/namespaceMap.js`](./lib/namespaceMap.js), mirrored from `Source/index.ts`. Contributors
+must update it and the
+[`ESLint` mirror](https://github.com/Cratis/Components/blob/main/ESLint/lib/rootNamespaceMap.js)
+together when a namespace subpath is added, renamed, or removed.
 
 ### What it refuses to guess
 
@@ -66,6 +68,8 @@ Each of these is left completely untouched, and reported as a diagnostic instead
 - A named import of a symbol that is neither an approved setup symbol nor a known namespace
   (for example a member like `Button` that only exists _inside_ a namespace, not at the
   root). The whole import statement is left untouched rather than partially migrated.
+- A TypeScript import assignment — `import Components = require('@cratis/components');`.
+  This is the whole package namespace, so later member access is as ambiguous as `import * as`.
 - A dynamic `import('@cratis/components')` or a CommonJS `require('@cratis/components')`,
   anywhere in the file.
 - Any `export … from '@cratis/components'` re-export form. This codemod only rewrites
@@ -107,6 +111,7 @@ that subpath.
 cd Codemods && yarn test
 ```
 
-Fixtures for every supported and unsupported case live under
-[`test/fixtures`](./test/fixtures), each as an `input.ts`/`expected.ts` pair (`input.ts` and
-`expected.ts` are identical for an unsupported case, since nothing should change).
+Repository fixtures for every supported and unsupported case live under
+[`Codemods/test/fixtures`](https://github.com/Cratis/Components/tree/main/Codemods/test/fixtures),
+each as an `input.ts`/`expected.ts` pair (`input.ts` and `expected.ts` are identical for an
+unsupported case, since nothing should change).
diff --git a/Codemods/lib/transform.js b/Codemods/lib/transform.js
index 963d776b..6c224bb2 100644
--- a/Codemods/lib/transform.js
+++ b/Codemods/lib/transform.js
@@ -164,9 +164,7 @@ export function transformSource(fileName, text, options = {}) {
             for (const element of node.exportClause.elements) {
                 const exportedName = (element.propertyName ?? element.name).text;
                 if (approvedRootSymbols.has(exportedName)) continue;
-                if (
-                    Object.hasOwn(namespaceSubpaths, exportedName)
-                ) {
+                if (Object.hasOwn(namespaceSubpaths, exportedName)) {
                     report(
                         element,
                         `Re-export '${exportedName}' from '${packageName}/${namespaceSubpaths[exportedName]}' instead of the package root barrel. This codemod only rewrites 'import' declarations — split this 'export … from' by hand (e.g. 'export * as ${exportedName} from ${JSON.stringify(`${packageName}/${namespaceSubpaths[exportedName]}`)}').`,
@@ -187,6 +185,16 @@ export function transformSource(fileName, text, options = {}) {
         );
     };
 
+    const handleImportEquals = (node) => {
+        if (!ts.isExternalModuleReference(node.moduleReference)) return;
+        if (!isRootSpecifier(node.moduleReference.expression)) return;
+
+        report(
+            node,
+            `Import-assignment of '${packageName}' ('import ${node.name.text} = require(...)') cannot be auto-migrated: which subpath each later member access belongs to cannot be inferred from the import alone. Replace it with the specific namespace subpath import(s) it needs.`,
+        );
+    };
+
     const checkCallExpression = (node) => {
         const isDynamicImport = node.expression.kind === ts.SyntaxKind.ImportKeyword;
         const isRequire =
@@ -214,6 +222,10 @@ export function transformSource(fileName, text, options = {}) {
             handleExport(node);
             return;
         }
+        if (ts.isImportEqualsDeclaration(node)) {
+            handleImportEquals(node);
+            return;
+        }
         if (ts.isCallExpression(node)) {
             checkCallExpression(node);
         }
diff --git a/Codemods/test/cli.test.js b/Codemods/test/cli.test.js
index b5f51a4a..c33cc736 100644
--- a/Codemods/test/cli.test.js
+++ b/Codemods/test/cli.test.js
@@ -133,6 +133,21 @@ describe('remove-root-namespace-imports CLI', () => {
         );
     });
 
+    it('reports a TypeScript import assignment in a .cts file', () => {
+        const file = path.join(dir, 'legacy.cts');
+        writeFileSync(
+            file,
+            "import Components = require('@cratis/components');\n",
+            'utf8',
+        );
+
+        const result = run(['--check', file]);
+
+        expect(result.status).toBe(1);
+        expect(result.stderr).toContain('Import-assignment');
+        expect(readFileSync(file, 'utf8')).toContain("require('@cratis/components')");
+    });
+
     it('running twice in a row is idempotent and the second run exits 0', () => {
         const file = path.join(dir, 'App.tsx');
         writeFileSync(
diff --git a/Codemods/test/fixtures/unsupported-import-equals/expected.ts b/Codemods/test/fixtures/unsupported-import-equals/expected.ts
new file mode 100644
index 00000000..30d3e27f
--- /dev/null
+++ b/Codemods/test/fixtures/unsupported-import-equals/expected.ts
@@ -0,0 +1,6 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import Components = require('@cratis/components');
+
+export const canvas = Components.Canvas;
diff --git a/Codemods/test/fixtures/unsupported-import-equals/input.ts b/Codemods/test/fixtures/unsupported-import-equals/input.ts
new file mode 100644
index 00000000..30d3e27f
--- /dev/null
+++ b/Codemods/test/fixtures/unsupported-import-equals/input.ts
@@ -0,0 +1,6 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import Components = require('@cratis/components');
+
+export const canvas = Components.Canvas;
diff --git a/Codemods/test/transform.test.js b/Codemods/test/transform.test.js
index 7ac19209..1db07401 100644
--- a/Codemods/test/transform.test.js
+++ b/Codemods/test/transform.test.js
@@ -41,6 +41,7 @@ const unchangedCases = [
     'unsupported-namespace-import',
     'unsupported-default-import',
     'unsupported-dynamic-import',
+    'unsupported-import-equals',
     'unsupported-require',
     'unsupported-unknown-symbol',
     'unsupported-side-effect-only',
@@ -51,6 +52,7 @@ const unsupportedCases = new Set([
     'unsupported-namespace-import',
     'unsupported-default-import',
     'unsupported-dynamic-import',
+    'unsupported-import-equals',
     'unsupported-require',
     'unsupported-unknown-symbol',
     'unsupported-side-effect-only',
@@ -68,7 +70,52 @@ describe('root namespace maps', () => {
         );
     });
 
-    it('should match the actual setup-only package root exports', () => {
+    it('should map every namespace to a subpath the package actually exports', () => {
+        const pkg = JSON.parse(
+            readFileSync(
+                path.join(__dirname, '..', '..', 'Source', 'package.json'),
+                'utf8',
+            ),
+        );
+        const exportKeys = new Set(Object.keys(pkg.exports ?? {}));
+
+        for (const [namespace, subpath] of Object.entries(codemodNamespaceSubpaths)) {
+            expect(exportKeys.has(`./${subpath}`), `${namespace} -> ./${subpath}`).toBe(
+                true,
+            );
+        }
+    });
+
+    it('should account for every explicit package subpath in the migration contract', () => {
+        const pkg = JSON.parse(
+            readFileSync(
+                path.join(__dirname, '..', '..', 'Source', 'package.json'),
+                'utf8',
+            ),
+        );
+        const migrationTargets = new Set(
+            Object.values(codemodNamespaceSubpaths).map((subpath) => `./${subpath}`),
+        );
+        const intentionallyUnmapped = new Set([
+            '.',
+            './package.json',
+            './styles',
+            './tokens',
+            './theme',
+            // The historical namespace represented the complete CommandDialog module.
+            './CommandStepper',
+            // Nested refinement of the historical CommandForm namespace.
+            './CommandForm/fields',
+        ]);
+        const unaccounted = Object.keys(pkg.exports ?? {}).filter(
+            (subpath) =>
+                !migrationTargets.has(subpath) && !intentionallyUnmapped.has(subpath),
+        );
+
+        expect(unaccounted).toEqual([]);
+    });
+
+    it('should match every supported export form at the setup-only package root', () => {
         const rootIndex = readFileSync(
             path.join(__dirname, '..', '..', 'Source', 'index.ts'),
             'utf8',
@@ -80,16 +127,73 @@ describe('root namespace maps', () => {
             true,
             ts.ScriptKind.TS,
         );
-        const exportedNames = sourceFile.statements
-            .filter(ts.isExportDeclaration)
-            .flatMap((declaration) =>
-                declaration.exportClause && ts.isNamedExports(declaration.exportClause)
-                    ? declaration.exportClause.elements.map(
-                          (element) => element.name.text,
-                      )
-                    : [],
-            );
+        const exportedNames = [];
+        const unsupportedForms = [];
+
+        for (const statement of sourceFile.statements) {
+            if (ts.isExportDeclaration(statement)) {
+                if (!statement.exportClause) {
+                    unsupportedForms.push('export * from');
+                } else if (ts.isNamespaceExport(statement.exportClause)) {
+                    unsupportedForms.push(
+                        `export * as ${statement.exportClause.name.text} from`,
+                    );
+                } else {
+                    exportedNames.push(
+                        ...statement.exportClause.elements.map(
+                            (element) => element.name.text,
+                        ),
+                    );
+                }
+                continue;
+            }
+            if (ts.isExportAssignment(statement)) {
+                unsupportedForms.push(
+                    statement.isExportEquals ? 'export =' : 'export default',
+                );
+                continue;
+            }
+
+            const modifiers = ts.canHaveModifiers(statement)
+                ? (ts.getModifiers(statement) ?? [])
+                : [];
+            if (
+                !modifiers.some(
+                    (modifier) => modifier.kind === ts.SyntaxKind.ExportKeyword,
+                )
+            ) {
+                continue;
+            }
+            if (
+                modifiers.some(
+                    (modifier) => modifier.kind === ts.SyntaxKind.DefaultKeyword,
+                )
+            ) {
+                unsupportedForms.push('export default declaration');
+                continue;
+            }
+            if (ts.isVariableStatement(statement)) {
+                for (const declaration of statement.declarationList.declarations) {
+                    if (ts.isIdentifier(declaration.name)) {
+                        exportedNames.push(declaration.name.text);
+                    } else {
+                        unsupportedForms.push('export destructured variable');
+                    }
+                }
+                continue;
+            }
+            if (
+                'name' in statement &&
+                statement.name &&
+                ts.isIdentifier(statement.name)
+            ) {
+                exportedNames.push(statement.name.text);
+            } else {
+                unsupportedForms.push(ts.SyntaxKind[statement.kind]);
+            }
+        }
 
+        expect(unsupportedForms).toEqual([]);
         expect(exportedNames.sort()).toEqual([...codemodApprovedRootSymbols].sort());
     });
 
diff --git a/Codemods/test/verify-packed-package.mjs b/Codemods/test/verify-packed-package.mjs
index f0685b1a..f04c6ac3 100644
--- a/Codemods/test/verify-packed-package.mjs
+++ b/Codemods/test/verify-packed-package.mjs
@@ -63,6 +63,14 @@ try {
         }
     }
 
+    const readme = readFileSync(path.join(installedRoot, 'README.md'), 'utf8');
+    for (const match of readme.matchAll(/\]\((\.?\.?\/[^)#?\s]+)(?:#[^)]+)?\)/gu)) {
+        const target = path.resolve(installedRoot, decodeURIComponent(match[1]));
+        if (!target.startsWith(`${installedRoot}${path.sep}`) || !existsSync(target)) {
+            throw new Error(`Packed README links to missing file '${match[1]}'.`);
+        }
+    }
+
     const binary = path.join(
         consumer,
         'node_modules',
@@ -73,11 +81,7 @@ try {
     );
     const help = run(binary, ['--help'], { cwd: consumer });
     assertRun('packed codemod --help', help);
-    if (
-        !help.stdout.includes(
-            'Usage: cratis-components-remove-root-namespace-imports',
-        )
-    ) {
+    if (!help.stdout.includes('Usage: cratis-components-remove-root-namespace-imports')) {
         throw new Error(`Unexpected --help output:\n${help.stdout}`);
     }
 
diff --git a/Documentation/Filter/index.md b/Documentation/Filter/index.md
index a4019dbf..ca519a2a 100644
--- a/Documentation/Filter/index.md
+++ b/Documentation/Filter/index.md
@@ -267,17 +267,9 @@ The hook re-syncs state when the `filters` array reference changes — existing
 
 ## Importing
 
-The Filter module is available at its own subpath — you do not need to import from the root package:
+The Filter module is available only at its explicit component subpath; the Components 4 package root is setup-only:
 
 ```tsx
 import { FilterPanel, FilterEditor, useFilterState } from '@cratis/components/Filter';
 import type { FilterDefinition } from '@cratis/components/Filter';
 ```
-
-From the package root, the module is available under the `Filter` namespace:
-
-```tsx
-import { Filter } from '@cratis/components';
-
-// Use as Filter.FilterPanel, Filter.FilterEditor, Filter.useFilterState
-```
diff --git a/Documentation/migration.md b/Documentation/migration.md
index d577f39a..8060af51 100644
--- a/Documentation/migration.md
+++ b/Documentation/migration.md
@@ -97,7 +97,7 @@ npx --package @cratis/components-codemods \
   cratis-components-remove-root-namespace-imports <paths...>
 ```
 
-The codemod preserves aliases and type-only imports, splits mixed setup/namespace imports, and refuses to guess at default imports, whole-package namespace imports, dynamic imports, `require`, re-exports, side-effect imports, or unknown symbols. Review every reported unsupported case manually, then run the consuming project's lint, build, and tests.
+The codemod preserves aliases and type-only imports, splits mixed setup/namespace imports, and refuses to guess at default imports, whole-package namespace imports, TypeScript `import = require(...)` assignments, dynamic imports, CommonJS `require(...)`, re-exports, side-effect imports, or unknown symbols. Review every reported unsupported case manually, then run the consuming project's lint, build, and tests.
 
 See [UI foundation: Capability profiles](ui-foundation.md#capability-profiles) for how these subpaths group into Foundation, Advanced React, and Spatial, and the [capability matrix](ui-foundation.md#capability-matrix) for what each profile owns.
 
diff --git a/Documentation/ui-foundation.md b/Documentation/ui-foundation.md
index 91e8f202..87814a5a 100644
--- a/Documentation/ui-foundation.md
+++ b/Documentation/ui-foundation.md
@@ -48,9 +48,9 @@ import { DataTableForQuery, Column } from '@cratis/components/DataTables';
 import { Canvas, CanvasItem } from '@cratis/components/Canvas';
 ```
 
-`@cratis/components` intentionally exports only `CratisComponentsProvider`, `cratisDefaults`, `mergeCratisComponentsConfig`, and their config/props types — the setup every application needs once, regardless of which components it uses. Every component family, in every [capability profile](#capability-profiles), is reached through its own subpath and never through the root.
+`@cratis/components` intentionally exports only `CratisComponentsProvider`, `useCratisComponentsConfig`, `cratisDefaults`, `mergeCratisComponentsConfig`, and their config/props/message types — the setup every application needs once, regardless of which components it uses. Every component family, in every [capability profile](#capability-profiles), is reached through its own subpath and never through the root.
 
-The root also re-exports every subpath as a namespace today (`import { Canvas } from '@cratis/components'`, then `Canvas.CanvasItem`), purely for source compatibility with code written before subpath imports were the documented default. That bridge is not the pattern for new code, and this release does not remove it: [Migrate from Components 3 to 4](migration.md) carries the complete namespace-to-subpath mapping, including one nuance the mapping resolves — the root's `CommandStepper` namespace is an alias of the entire `CommandDialog` module (so `CommandStepper.StepperCommandDialog` already works today), while the dedicated `@cratis/components/CommandStepper` subpath only carries `CommandStepper` itself. A removal of the root namespace bridge, if it ever happens, is a tracked, versioned change with its own migration guide — not a silent behavior change.
+Components 4 removes the Components 3 root namespace bridge. Imports such as `import { Canvas } from '@cratis/components'` no longer resolve; use `@cratis/components/Canvas` instead. [Migrate from Components 3 to 4](migration.md) carries the complete namespace-to-subpath mapping and the public codemod command. One compatibility nuance is encoded there and in the tooling: the historical root `CommandStepper` namespace represented the entire `CommandDialog` module, so it migrates to `@cratis/components/CommandDialog`; the narrower `@cratis/components/CommandStepper` subpath still exports only `CommandStepper`.
 
 ## Capability profiles
 
@@ -164,11 +164,11 @@ The stabilization specs are the behavior parity contract for Components 4.
 
 Components 4 validates every public JavaScript subpath as a strict external TypeScript 6 consumer of the actual packed artifact. Run `yarn workspace @cratis/components verify-public-types` after building the package. The verifier creates isolated Bundler and NodeNext fixtures with `skipLibCheck: false`, confirms that TypeScript resolved declarations from the fresh archive rather than source or stale output, and emits a machine-readable report when requested.
 
-Known upstream failures are bounded in `Source/scripts/verify-public-types.exceptions.json`. Each exception names exact package versions, diagnostic codes, affected subpaths and resolution modes, and an objective removal condition. Unlisted diagnostics, any diagnostic in Components-owned declarations, a TypeScript-version mismatch, or an exception that stops reproducing all fail the gate.
+Known upstream failures are bounded in `Source/scripts/verify-public-types.exceptions.json`. Each exception names exact installed package versions, diagnostic codes, affected subpaths and resolution modes, and an objective removal condition. Unlisted diagnostics, version/metadata drift, a TypeScript-version mismatch, or an exception that stops reproducing all fail the gate. A diagnostic anchored in a Components declaration is never covered by message matching alone: the same compiler run must also contain the reviewed TS2834/TS2835 root cause under the exact upstream package named by that diagnostic. Synthetic specs prove absent and unrelated root causes remain failures.
 
 The current exceptions are:
 
-- **`@webgpu/types@0.1.72` through `pixi.js@8.20.0`:** its ambient WebGPU declarations conflict with TypeScript 6's built-in DOM declarations for the root and `Canvas` subpaths (`TS2403`, `TS2687`, `TS2717`, `TS6200`).
+- **`@webgpu/types@0.1.72` through `pixi.js@8.20.0`:** its ambient WebGPU declarations conflict with TypeScript 6's built-in DOM declarations for the `Canvas` subpath (`TS2403`, `TS2687`, `TS2717`, `TS6200`). The setup-only root has no Pixi type exception.
 - **`@cratis/arc.react@22.1.0`:** its published global JSX declarations expose unresolved identifiers in strict external Bundler consumers of command/dialog subpaths (`TS2503`).
 - **`@cratis/arc@22.1.0`, `@cratis/arc.react@22.1.0`, and `@cratis/fundamentals@7.18.1`:** their published ESM declarations use extensionless relative specifiers rejected by NodeNext, with missing-export cascades (`TS2834`, `TS2835`, `TS2305`, `TS2694`). Components' own declaration rewrite emits explicit extensions.
 
@@ -193,11 +193,12 @@ These are follow-up contracts, not undocumented work required to use the Compone
 Components 4 is accepted only when:
 
 - Emitted JavaScript and declarations contain no Prime imports or type references.
-- npm, pnpm, and Yarn PnP packed-consumer fixtures pass.
+- A real npm packed consumer installs and runs with Pixi absent; strict pnpm and Yarn PnP consumers pass with Pixi both absent and present, and the present topology proves Components and the consumer resolve one Pixi instance.
+- The setup root and every non-spatial subpath load without Pixi, while Canvas and PivotViewer fail specifically on the missing optional peer until it is installed.
 - Supported Arc versions load from the packed artifact.
 - Representative custom-theme and pass-through consumers compile after following the guide.
 - Specs, Storybook, package exports, SSR, keyboard/focus behavior, responsive layouts, dark mode, forced colors, and reduced motion pass.
 - The migration guide works without repository-specific knowledge.
-- Every packed public JavaScript subpath passes strict TypeScript 6 validation or matches a bounded machine-readable upstream exception whose removal condition is still unmet.
+- Every packed public JavaScript subpath passes strict TypeScript 6 validation or matches a bounded machine-readable upstream exception with exact installed versions and an unmet removal condition. Components-owned cascades additionally require their matching upstream TS2834/TS2835 root cause in the same compiler run.
 
 Track acceptance evidence in [the UI foundation issue](https://github.com/Cratis/Components/issues/170).
diff --git a/Documentation/verify-markdown.sh b/Documentation/verify-markdown.sh
index f1041143..b3c1e3bc 100755
--- a/Documentation/verify-markdown.sh
+++ b/Documentation/verify-markdown.sh
@@ -31,9 +31,11 @@ if ! command -v npx >/dev/null 2>&1; then
 fi
 
 npx markdownlint-cli2 \
+    "README.md" \
     "Documentation/**/*.md" \
-    "Source/README.md" \
-    "Source/MIGRATION.md"
+    "Source/*.md" \
+    "Codemods/*.md" \
+    "ESLint/*.md"
 LINT_EXIT_CODE=$?
 
 echo ""
diff --git a/ESLint/LICENSE b/ESLint/LICENSE
new file mode 100644
index 00000000..200ffde5
--- /dev/null
+++ b/ESLint/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Cratis
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/ESLint/README.md b/ESLint/README.md
index 97add2c5..74201936 100644
--- a/ESLint/README.md
+++ b/ESLint/README.md
@@ -11,7 +11,7 @@ Cratis base config, [`@cratis/eslint-config`](https://www.npmjs.com/package/@cra
 | `no-hooks-in-view-model`      | Disallows React hooks (including generated Arc proxies' `.use()`) inside a view model class. View models must be plain, hook-free classes that receive injected abstractions.                                                                                                                                                                                        |
 | `no-raw-command-form-marker`  | Disallows identifying a CommandForm field or column by a hand-written `displayName` string, in either direction. Use `markAsCommandFormField`/`markAsCommandFormColumn` and `isCommandFormField`/`isCommandFormColumn` from `@cratis/components/CommandForm` — they go through a marker a build transform cannot rewrite.                                            |
 
-The two import rules cover `import` and re-`export … from` forms.
+Both import rules cover static `import` and re-`export … from` forms. The root-barrel rule also reports TypeScript `import = require(...)`, dynamic `import(...)`, and CommonJS `require(...)` of the package root; ambiguous forms are never autofixed.
 
 ## Install
 
@@ -88,6 +88,10 @@ import { Canvas } from '@cratis/components';
 
 // ✅ the same namespace, imported from its subpath
 import * as Canvas from '@cratis/components/Canvas';
+
+// ❌ whole-package forms are ambiguous and reported without an autofix
+import Components = require('@cratis/components');
+const lazyComponents = await import('@cratis/components');
 ```
 
 A single-namespace violation is autofixed to the namespace form shown above, preserving an alias (`Canvas as C`) and `import type` (`import type { Canvas } from '@cratis/components'` becomes `import type * as Canvas from '@cratis/components/Canvas'`, and a per-specifier `type` modifier is honored the same way). The historical `CommandStepper` namespace is mapped to `@cratis/components/CommandDialog`, because that root namespace exposed the complete CommandDialog module rather than only the narrower standalone stepper entry. A mixed import naming both a setup symbol and a namespace is split — the setup symbol stays imported from the root, the namespace moves:
@@ -116,7 +120,7 @@ The rule never guesses. Each of these is flagged with guidance but **not** autof
   guidance, but re-exports are never autofixed.
 
 A companion, standalone codemod applies the same rewrite across a whole project in one pass;
-see [`Codemods`](../Codemods/README.md).
+see [`@cratis/components-codemods`](https://www.npmjs.com/package/@cratis/components-codemods).
 
 ### `onbeforeexecute-must-return`
 
diff --git a/ESLint/lib/noRootBarrelImport.js b/ESLint/lib/noRootBarrelImport.js
index 7c691f17..4e2c66c6 100644
--- a/ESLint/lib/noRootBarrelImport.js
+++ b/ESLint/lib/noRootBarrelImport.js
@@ -7,8 +7,9 @@ const DEFAULTS = { packageName: '@cratis/components', allow: [] };
 // `@cratis/components/DataPage`, `@cratis/components/Toolbar`, …); Components 4 removes
 // component namespaces from the setup-only root. The small,
 // approved setup surface (`CratisComponentsProvider` and friends) remains importable from
-// the root. Covers `import` and re-`export … from` forms; only the `import` form is
-// autofixed, and only when every named specifier in the statement is unambiguous.
+// the root. Covers static imports/re-exports, TypeScript import assignments, dynamic imports,
+// and CommonJS require calls. Only named static imports are autofixed, and only when every
+// specifier in the statement is unambiguous.
 export const noRootBarrelImport = {
     meta: {
         type: 'suggestion',
@@ -60,6 +61,39 @@ export const noRootBarrelImport = {
                 if (!isRootSpecifier(node.source)) return;
                 checkImport(context, node, packageName);
             },
+            TSImportEqualsDeclaration(node) {
+                const reference = node.moduleReference;
+                if (
+                    reference?.type !== 'TSExternalModuleReference' ||
+                    !isRootSpecifier(reference.expression)
+                )
+                    return;
+                context.report({
+                    node: reference.expression,
+                    messageId: 'ambiguousImport',
+                    data: { packageName },
+                });
+            },
+            ImportExpression(node) {
+                if (!isRootSpecifier(node.source)) return;
+                context.report({
+                    node: node.source,
+                    messageId: 'ambiguousImport',
+                    data: { packageName },
+                });
+            },
+            CallExpression(node) {
+                if (node.callee.type !== 'Identifier' || node.callee.name !== 'require')
+                    return;
+                const [argument] = node.arguments;
+                if (!argument || argument.type === 'SpreadElement') return;
+                if (!isRootSpecifier(argument)) return;
+                context.report({
+                    node: argument,
+                    messageId: 'ambiguousImport',
+                    data: { packageName },
+                });
+            },
             ExportNamedDeclaration(node) {
                 if (!isRootSpecifier(node.source)) return;
                 checkNamedExport(context, node, packageName);
diff --git a/ESLint/package.json b/ESLint/package.json
index 4a87a7ca..d4c101a2 100644
--- a/ESLint/package.json
+++ b/ESLint/package.json
@@ -22,7 +22,8 @@
     "files": [
         "index.js",
         "lib",
-        "README.md"
+        "README.md",
+        "LICENSE"
     ],
     "exports": {
         "./package.json": "./package.json",
@@ -30,6 +31,7 @@
     },
     "scripts": {
         "test": "yarn g:test",
+        "verify-package": "node ./test/verify-packed-package.mjs",
         "ci": "yarn g:test"
     },
     "peerDependencies": {
diff --git a/ESLint/test/rules.test.js b/ESLint/test/rules.test.js
index 58758b59..19423d39 100644
--- a/ESLint/test/rules.test.js
+++ b/ESLint/test/rules.test.js
@@ -1,8 +1,16 @@
 import { RuleTester } from 'eslint';
-import { afterAll, describe, it } from 'vitest';
+import { afterAll, describe, expect, it } from 'vitest';
 import tsParser from '@typescript-eslint/parser';
 import { noPrimereactDialog } from '../lib/noPrimereactDialog.js';
 import { noRootBarrelImport } from '../lib/noRootBarrelImport.js';
+import {
+    approvedRootSymbols as eslintApprovedRootSymbols,
+    namespaceSubpaths as eslintNamespaceSubpaths,
+} from '../lib/rootNamespaceMap.js';
+import {
+    approvedRootSymbols as codemodApprovedRootSymbols,
+    namespaceSubpaths as codemodNamespaceSubpaths,
+} from '../../Codemods/lib/namespaceMap.js';
 import { onbeforeexecuteMustReturn } from '../lib/onbeforeexecuteMustReturn.js';
 import { noHooksInViewModel } from '../lib/noHooksInViewModel.js';
 import { noRawCommandFormMarker } from '../lib/noRawCommandFormMarker.js';
@@ -26,12 +34,28 @@ const tsRuleTester = new RuleTester({
     },
 });
 
+describe('root namespace map parity', () => {
+    it('keeps the ESLint and codemod namespace maps identical', () => {
+        expect(eslintNamespaceSubpaths).toEqual(codemodNamespaceSubpaths);
+    });
+
+    it('keeps the ESLint and codemod setup allowlists identical', () => {
+        expect([...eslintApprovedRootSymbols].sort()).toEqual(
+            [...codemodApprovedRootSymbols].sort(),
+        );
+    });
+});
+
 tsRuleTester.run('no-root-barrel-import', noRootBarrelImport, {
     valid: [
         // Subpath imports are always fine, whatever the export.
         "import { CommandDialog } from '@cratis/components/CommandDialog';",
         "import { DataPage } from '@cratis/components/DataPage';",
         "import { useState } from 'react';",
+        "import Canvas = require('@cratis/components/Canvas');",
+        'import Canvas = Components.Canvas;',
+        "const canvas = await import('@cratis/components/Canvas');",
+        "const canvas = require('@cratis/components/Canvas');",
         // Not the same package — a longer name that merely starts the same.
         "import x from '@cratis/components-extra';",
         // Approved setup symbols remain importable from the root, singly, combined, aliased,
@@ -263,6 +287,24 @@ tsRuleTester.run('no-root-barrel-import', noRootBarrelImport, {
             errors: [{ messageId: 'ambiguousImport' }],
             output: null,
         },
+        {
+            // TypeScript import assignments bind the whole package namespace and cannot be split.
+            code: "import Components = require('@cratis/components');",
+            errors: [{ messageId: 'ambiguousImport' }],
+            output: null,
+        },
+        {
+            // Dynamic imports cannot be mapped without analyzing later member access.
+            code: "const Components = await import('@cratis/components');",
+            errors: [{ messageId: 'ambiguousImport' }],
+            output: null,
+        },
+        {
+            // CommonJS require calls have the same ambiguity.
+            code: "const Components = require('@cratis/components');",
+            errors: [{ messageId: 'ambiguousImport' }],
+            output: null,
+        },
         {
             // Re-exporting a namespace gets subpath guidance but is never autofixed.
             code: "export { Canvas } from '@cratis/components';",
diff --git a/ESLint/test/verify-packed-package.mjs b/ESLint/test/verify-packed-package.mjs
new file mode 100644
index 00000000..98ea4915
--- /dev/null
+++ b/ESLint/test/verify-packed-package.mjs
@@ -0,0 +1,138 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { spawnSync } from 'node:child_process';
+import {
+    existsSync,
+    mkdtempSync,
+    readFileSync,
+    readdirSync,
+    rmSync,
+    writeFileSync,
+} from 'node:fs';
+import { tmpdir } from 'node:os';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const packageDir = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const scratch = mkdtempSync(path.join(tmpdir(), 'cratis-components-eslint-pack-'));
+const archive = path.join(scratch, 'eslint-plugin.tgz');
+const consumer = path.join(scratch, 'consumer');
+
+const run = (command, args, options = {}) =>
+    spawnSync(command, args, {
+        encoding: 'utf8',
+        timeout: 180_000,
+        ...options,
+    });
+
+const assertRun = (label, result, expectedStatus = 0) => {
+    if (result.status !== expectedStatus) {
+        throw new Error(
+            `${label} exited ${result.status}; expected ${expectedStatus}:\n${result.stderr || result.stdout}`,
+        );
+    }
+};
+
+try {
+    assertRun('yarn pack', run('yarn', ['pack', '--out', archive], { cwd: packageDir }));
+    if (!existsSync(archive)) throw new Error('yarn pack did not create the archive.');
+
+    writeFileSync(
+        path.join(scratch, 'package.json'),
+        JSON.stringify({ private: true, type: 'module' }),
+    );
+    assertRun(
+        'npm install packed ESLint plugin',
+        run(
+            'npm',
+            [
+                'install',
+                '--ignore-scripts',
+                archive,
+                'eslint@10.9.0',
+                '@typescript-eslint/parser@8.67.0',
+                '--prefix',
+                consumer,
+            ],
+            { cwd: scratch },
+        ),
+    );
+
+    const installedRoot = path.join(
+        consumer,
+        'node_modules',
+        '@cratis',
+        'eslint-plugin-components',
+    );
+    const publishedEntries = readdirSync(installedRoot).sort();
+    for (const required of ['LICENSE', 'README.md', 'index.js', 'lib', 'package.json']) {
+        if (!publishedEntries.includes(required)) {
+            throw new Error(`Packed ESLint plugin is missing '${required}'.`);
+        }
+    }
+    for (const forbidden of ['test', 'vitest.config.js']) {
+        if (publishedEntries.includes(forbidden)) {
+            throw new Error(`Packed ESLint plugin leaked '${forbidden}'.`);
+        }
+    }
+
+    const readme = readFileSync(path.join(installedRoot, 'README.md'), 'utf8');
+    for (const match of readme.matchAll(/\]\((\.?\.?\/[^)#?\s]+)(?:#[^)]+)?\)/gu)) {
+        const target = path.resolve(installedRoot, decodeURIComponent(match[1]));
+        if (!target.startsWith(`${installedRoot}${path.sep}`) || !existsSync(target)) {
+            throw new Error(`Packed README links to missing file '${match[1]}'.`);
+        }
+    }
+
+    writeFileSync(
+        path.join(consumer, 'eslint.config.mjs'),
+        [
+            "import tsParser from '@typescript-eslint/parser';",
+            "import components from '@cratis/eslint-plugin-components';",
+            'export default [{',
+            "    files: ['**/*.cts'],",
+            "    languageOptions: { parser: tsParser, parserOptions: { sourceType: 'module' } },",
+            "    plugins: { '@cratis/components': components },",
+            "    rules: { '@cratis/components/no-root-barrel-import': 'error' },",
+            '}];',
+            '',
+        ].join('\n'),
+    );
+    const source = path.join(consumer, 'legacy.cts');
+    writeFileSync(
+        source,
+        "import Components = require('@cratis/components');\nvoid Components;\n",
+    );
+    const binary = path.join(
+        consumer,
+        'node_modules',
+        '.bin',
+        process.platform === 'win32' ? 'eslint.cmd' : 'eslint',
+    );
+    const violation = run(binary, ['legacy.cts', '--format', 'json'], {
+        cwd: consumer,
+    });
+    assertRun('packed ESLint root-import violation', violation, 1);
+    const lintResults = JSON.parse(violation.stdout);
+    if (
+        lintResults.length !== 1 ||
+        lintResults[0].messages.length !== 1 ||
+        lintResults[0].messages[0].ruleId !== '@cratis/components/no-root-barrel-import'
+    ) {
+        throw new Error(`Unexpected packed ESLint output:\n${violation.stdout}`);
+    }
+
+    writeFileSync(
+        source,
+        "import Canvas = require('@cratis/components/Canvas');\nvoid Canvas;\n",
+    );
+    assertRun(
+        'packed ESLint migrated subpath',
+        run(binary, ['legacy.cts'], { cwd: consumer }),
+    );
+
+    console.log('Packed @cratis/eslint-plugin-components verified.');
+} finally {
+    rmSync(scratch, { recursive: true, force: true });
+}
diff --git a/Source/MIGRATION.md b/Source/MIGRATION.md
index 57726c90..3b013955 100644
--- a/Source/MIGRATION.md
+++ b/Source/MIGRATION.md
@@ -94,7 +94,7 @@ npx --package @cratis/components-codemods \
   cratis-components-remove-root-namespace-imports <paths...>
 ```
 
-The codemod preserves aliases and type-only imports, splits mixed setup/namespace imports, and reports unsupported cases without guessing. Review its diagnostics, then run the consuming project's lint, build, and tests.
+The codemod preserves aliases and type-only imports, splits mixed setup/namespace imports, and reports unsupported cases without guessing. Those include default or whole-package namespace imports, TypeScript `import = require(...)` assignments, dynamic imports, CommonJS `require(...)`, re-exports, side-effect imports, and unknown symbols. Review its diagnostics, then run the consuming project's lint, build, and tests.
 
 ## Keep the stylesheet entry points
 
diff --git a/Source/for_root_architecture/when_importing_from_the_root_barrel.ts b/Source/for_root_architecture/when_importing_from_the_root_barrel.ts
index 72d84f71..1c255649 100644
--- a/Source/for_root_architecture/when_importing_from_the_root_barrel.ts
+++ b/Source/for_root_architecture/when_importing_from_the_root_barrel.ts
@@ -9,11 +9,9 @@ import * as RootBarrel from '../index';
  * Source-level contract for the setup-only root architecture (Cratis/Components root
  * architecture): the package root exports the application-wide provider, its
  * configuration/hook/merge helpers, and the config/provider/message interface family -
- * nothing else. Every component namespace (`Canvas`, `CommandDialog`, `CommandForm`,
- * `Common`, `DataPage`, `DataTables`, `Dialogs`, `Display`, `Dropdown`, `Filter`,
- * `Notifications`, `ObjectContentEditor`, `ObjectNavigationalBar`, `PivotViewer`,
- * `SchemaEditor`, `TimeMachine`, `Toolbar`, `Types`) lives behind its own explicit
- * subpath only.
+ * nothing else. Every component namespace lives behind its own explicit subpath only.
+ * The codemod map parity specs own the complete namespace list so this runtime contract
+ * cannot become another hand-maintained copy.
  *
  * This is the source-level half of the contract; `scripts/verify-public-types.mjs` and
  * `scripts/verify-no-pixi-consumer.mjs` verify the equivalent built/packed-artifact
@@ -49,31 +47,4 @@ describe('when importing from the root barrel', () => {
         expect(RootBarrel.cratisDefaults).to.be.an('object');
         expect(RootBarrel.cratisDefaults.locale).to.equal('en-US');
     });
-
-    it('should never export a component namespace from the root', () => {
-        const forbiddenNamespaces = [
-            'Canvas',
-            'CommandDialog',
-            'CommandStepper',
-            'CommandForm',
-            'Common',
-            'DataPage',
-            'DataTables',
-            'Dialogs',
-            'Display',
-            'Dropdown',
-            'Filter',
-            'Notifications',
-            'ObjectContentEditor',
-            'ObjectNavigationalBar',
-            'PivotViewer',
-            'SchemaEditor',
-            'TimeMachine',
-            'Toolbar',
-            'Types',
-        ];
-        for (const namespace of forbiddenNamespaces) {
-            expect(Object.keys(RootBarrel)).not.to.include(namespace);
-        }
-    });
 });
diff --git a/Source/package.json b/Source/package.json
index 84157a9a..63dc6423 100644
--- a/Source/package.json
+++ b/Source/package.json
@@ -16,6 +16,7 @@
         "dist",
         "LICENSE",
         "THIRD_PARTY_NOTICES.md",
+        "MIGRATION.md",
         "!dist/**/*.stories.*",
         "!dist/**/given.*",
         "!dist/**/storybook-static/**",
diff --git a/Source/scripts/for_public_type_exceptions/when_matching_external_issues.ts b/Source/scripts/for_public_type_exceptions/when_matching_external_issues.ts
new file mode 100644
index 00000000..dc50ccea
--- /dev/null
+++ b/Source/scripts/for_public_type_exceptions/when_matching_external_issues.ts
@@ -0,0 +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 { describe, expect, it } from 'vitest';
+import {
+    matchesExternalIssue,
+    matchesPairedOwnedCascade,
+} from '../lib/public-type-exceptions.mjs';
+
+const issue = {
+    diagnosticCodes: ['TS2305', 'TS2834', 'TS2835'],
+    filePrefixes: ['@cratis/arc/'],
+    messagePatterns: ['@cratis/arc'],
+    ownedCascades: [
+        {
+            messagePattern: '@cratis/arc',
+            rootCauseFilePrefix: '@cratis/arc/',
+            rootCauseDiagnosticCodes: ['TS2834', 'TS2835'],
+        },
+    ],
+};
+
+const ownedDiagnostic = {
+    code: 'TS2305',
+    file: '@cratis/components/CommandDialog/index.d.ts',
+    message: "Module '@cratis/arc' has no exported member 'CommandResult'.",
+};
+
+describe('when matching public type exceptions', () => {
+    it('should match a diagnostic anchored in the reviewed upstream package', () => {
+        expect(
+            matchesExternalIssue(
+                {
+                    code: 'TS2305',
+                    file: '@cratis/arc/index.d.ts',
+                    message: "Module './types' has no exported member 'CommandResult'.",
+                },
+                issue,
+                '@cratis/components',
+            ),
+        ).toBe(true);
+    });
+
+    it('should match an upstream cascade anchored in the consumer fixture', () => {
+        expect(
+            matchesExternalIssue(
+                {
+                    code: 'TS2305',
+                    file: 'fixture/consumer.mts',
+                    message:
+                        "Module '@cratis/arc' has no exported member 'CommandResult'.",
+                },
+                issue,
+                '@cratis/components',
+            ),
+        ).toBe(true);
+    });
+
+    it('should never cover a Components diagnostic as an external diagnostic', () => {
+        expect(matchesExternalIssue(ownedDiagnostic, issue, '@cratis/components')).toBe(
+            false,
+        );
+    });
+
+    it('should reject an owned cascade without its matching upstream root cause', () => {
+        expect(
+            matchesPairedOwnedCascade(ownedDiagnostic, issue, [], '@cratis/components'),
+        ).toBe(false);
+    });
+
+    it('should reject an owned cascade paired to a different upstream package', () => {
+        expect(
+            matchesPairedOwnedCascade(
+                ownedDiagnostic,
+                issue,
+                [
+                    {
+                        code: 'TS2835',
+                        file: '@cratis/fundamentals/index.d.ts',
+                        message: 'Relative import paths need explicit file extensions.',
+                    },
+                ],
+                '@cratis/components',
+            ),
+        ).toBe(false);
+    });
+
+    it('should cover an owned cascade only with its matching upstream root cause', () => {
+        expect(
+            matchesPairedOwnedCascade(
+                ownedDiagnostic,
+                issue,
+                [
+                    {
+                        code: 'TS2835',
+                        file: '@cratis/arc/index.d.ts',
+                        message: 'Relative import paths need explicit file extensions.',
+                    },
+                ],
+                '@cratis/components',
+            ),
+        ).toBe(true);
+    });
+});
diff --git a/Source/scripts/lib/package-manager-consumer-probe.mjs b/Source/scripts/lib/package-manager-consumer-probe.mjs
new file mode 100644
index 00000000..f80b2b3a
--- /dev/null
+++ b/Source/scripts/lib/package-manager-consumer-probe.mjs
@@ -0,0 +1,93 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+/**
+ * Runs inside a package-manager-created consumer after the packed Components artifact and its
+ * mandatory peers have been installed. Argument 1 is `absent` or `present` for the Pixi topology.
+ */
+
+import { realpathSync } from 'node:fs';
+import { createRequire } from 'node:module';
+
+const pixiTopology = process.argv[2];
+if (pixiTopology !== 'absent' && pixiTopology !== 'present') {
+    console.error(`Expected Pixi topology 'absent' or 'present'; got '${pixiTopology}'.`);
+    process.exit(1);
+}
+
+const commandDialog = await import('@cratis/components/CommandDialog');
+const dataPage = await import('@cratis/components/DataPage');
+const notifications = await import('@cratis/components/Notifications');
+if (!commandDialog.CommandDialog || !dataPage.DataPage || !notifications.toast) {
+    throw new Error('The packed Components surface is incomplete.');
+}
+
+for (const forbidden of ['primereact', '@primereact/core', '@primeuix/themes']) {
+    try {
+        import.meta.resolve(forbidden);
+        throw new Error(`Unexpected renderer dependency: ${forbidden}`);
+    } catch (error) {
+        if (error instanceof Error && error.message.startsWith('Unexpected')) throw error;
+    }
+}
+
+const consumerRequire = createRequire(import.meta.url);
+const componentsRequire = createRequire(
+    import.meta.resolve('@cratis/components/package.json'),
+);
+const resolvePixi = (resolver) => {
+    try {
+        return resolver.resolve('pixi.js');
+    } catch {
+        return undefined;
+    }
+};
+const consumerPixi = resolvePixi(consumerRequire);
+const componentsPixi = resolvePixi(componentsRequire);
+
+if (pixiTopology === 'absent') {
+    if (consumerPixi || componentsPixi) {
+        throw new Error('pixi.js resolved in the declared no-Pixi topology.');
+    }
+    for (const spatial of [
+        '@cratis/components/Canvas',
+        '@cratis/components/PivotViewer',
+    ]) {
+        try {
+            await import(spatial);
+            throw new Error(`Unexpected spatial import success: ${spatial}`);
+        } catch (error) {
+            if (error instanceof Error && error.message.startsWith('Unexpected spatial'))
+                throw error;
+            if (!String(error).includes('pixi.js')) {
+                throw new Error(
+                    `${spatial} failed for an unexpected reason: ${String(error)}`,
+                );
+            }
+        }
+    }
+} else {
+    if (!consumerPixi || !componentsPixi) {
+        throw new Error('pixi.js did not resolve in the Spatial topology.');
+    }
+    const canonical = (resolved) => {
+        try {
+            return realpathSync(resolved);
+        } catch {
+            return resolved;
+        }
+    };
+    if (canonical(consumerPixi) !== canonical(componentsPixi)) {
+        throw new Error(
+            `Components and its consumer resolved different Pixi instances: ` +
+                `${consumerPixi} versus ${componentsPixi}`,
+        );
+    }
+    const canvas = await import('@cratis/components/Canvas');
+    const pivotViewer = await import('@cratis/components/PivotViewer');
+    if (!canvas.Canvas || !pivotViewer.PivotViewer) {
+        throw new Error('The packed Spatial surface is incomplete.');
+    }
+}
+
+console.log(`Packed package-manager consumer verified with Pixi ${pixiTopology}.`);
diff --git a/Source/scripts/lib/public-type-exceptions.mjs b/Source/scripts/lib/public-type-exceptions.mjs
new file mode 100644
index 00000000..1286716e
--- /dev/null
+++ b/Source/scripts/lib/public-type-exceptions.mjs
@@ -0,0 +1,45 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+/** Returns true when a TypeScript diagnostic is anchored in this package's declarations. */
+export const isOwnedDeclarationDiagnostic = (diagnostic, packageName) =>
+    diagnostic.file.startsWith(`${packageName}/`);
+
+/** Matches one non-owned diagnostic to a reviewed upstream exception. */
+export const matchesExternalIssue = (diagnostic, issue, packageName) =>
+    !isOwnedDeclarationDiagnostic(diagnostic, packageName) &&
+    issue.diagnosticCodes.includes(diagnostic.code) &&
+    ((issue.filePrefixes ?? []).some((prefix) => diagnostic.file.startsWith(prefix)) ||
+        (issue.messagePatterns ?? []).some((pattern) =>
+            diagnostic.message.includes(pattern),
+        ));
+
+/**
+ * Matches a diagnostic anchored in Components only when the same compiler run contains the exact
+ * reviewed root-cause diagnostic in the upstream package named by its message. This prevents a
+ * message-only exception from hiding an independent Components declaration regression.
+ */
+export const matchesPairedOwnedCascade = (
+    diagnostic,
+    issue,
+    diagnostics,
+    packageName,
+) => {
+    if (
+        !isOwnedDeclarationDiagnostic(diagnostic, packageName) ||
+        !issue.diagnosticCodes.includes(diagnostic.code)
+    )
+        return false;
+
+    const cascade = (issue.ownedCascades ?? []).find((candidate) =>
+        diagnostic.message.includes(candidate.messagePattern),
+    );
+    if (!cascade) return false;
+
+    return diagnostics.some(
+        (candidate) =>
+            !isOwnedDeclarationDiagnostic(candidate, packageName) &&
+            cascade.rootCauseDiagnosticCodes.includes(candidate.code) &&
+            candidate.file.startsWith(cascade.rootCauseFilePrefix),
+    );
+};
diff --git a/Source/scripts/verify-no-pixi-consumer.mjs b/Source/scripts/verify-no-pixi-consumer.mjs
index 2ac6f584..f2f7faf7 100644
--- a/Source/scripts/verify-no-pixi-consumer.mjs
+++ b/Source/scripts/verify-no-pixi-consumer.mjs
@@ -67,7 +67,15 @@ const fail = (label, detail) => {
 };
 const pass = (label) => console.log(`  ok   - ${label}`);
 
-const pkg = JSON.parse(readFileSync(path.join(packageDir, 'package.json'), 'utf8'));
+let pkg;
+try {
+    pkg = JSON.parse(readFileSync(path.join(packageDir, 'package.json'), 'utf8'));
+} catch (error) {
+    console.error(
+        `Could not read Source/package.json: ${error instanceof Error ? error.message : String(error)}`,
+    );
+    process.exit(1);
+}
 
 const esmRoot = path.join(packageDir, path.dirname(pkg.module ?? 'dist/esm/index.js'));
 if (!existsSync(esmRoot)) {
@@ -79,7 +87,7 @@ if (!existsSync(esmRoot)) {
 }
 
 /** Mandatory peers only - `pixi.js` is intentionally never installed by this fixture. */
-const MANDATORY_PEERS = [
+const EXPECTED_MANDATORY_PEERS = new Set([
     '@cratis/arc',
     '@cratis/arc.react',
     '@cratis/fundamentals',
@@ -87,16 +95,35 @@ const MANDATORY_PEERS = [
     'react-dom',
     'reflect-metadata',
     'tsyringe',
-];
-for (const peer of Object.keys(pkg.peerDependencies ?? {})) {
-    if (peer !== 'pixi.js' && !MANDATORY_PEERS.includes(peer)) {
-        console.error(
-            `peerDependencies now declares '${peer}', which verify-no-pixi-consumer.mjs does not ` +
-                'know is mandatory or optional. Update MANDATORY_PEERS (or the optional-peer list) ' +
-                'in this script before trusting its result.',
-        );
-        process.exit(1);
-    }
+]);
+const optionalPeers = new Set(
+    Object.entries(pkg.peerDependenciesMeta ?? {})
+        .filter(([, metadata]) => metadata?.optional === true)
+        .map(([name]) => name),
+);
+if (optionalPeers.size !== 1 || !optionalPeers.has('pixi.js')) {
+    console.error(
+        'The no-Pixi contract requires pixi.js to be the only optional peer. ' +
+            `Found: ${[...optionalPeers].join(', ') || '(none)'}.`,
+    );
+    process.exit(1);
+}
+const mandatoryPeers = new Set(
+    Object.keys(pkg.peerDependencies ?? {}).filter((peer) => !optionalPeers.has(peer)),
+);
+const missingMandatoryPeers = [...EXPECTED_MANDATORY_PEERS].filter(
+    (peer) => !mandatoryPeers.has(peer),
+);
+const unknownMandatoryPeers = [...mandatoryPeers].filter(
+    (peer) => !EXPECTED_MANDATORY_PEERS.has(peer),
+);
+if (missingMandatoryPeers.length > 0 || unknownMandatoryPeers.length > 0) {
+    console.error(
+        'The mandatory peer set changed. Update this packed consumer fixture before trusting it. ' +
+            `Missing: ${missingMandatoryPeers.join(', ') || '(none)'}; ` +
+            `unknown: ${unknownMandatoryPeers.join(', ') || '(none)'}.`,
+    );
+    process.exit(1);
 }
 
 const isAsset = (target) => typeof target === 'string' && /\.(css|json)$/u.test(target);
diff --git a/Source/scripts/verify-package-archive.mjs b/Source/scripts/verify-package-archive.mjs
index ae173b5b..e019cbed 100644
--- a/Source/scripts/verify-package-archive.mjs
+++ b/Source/scripts/verify-package-archive.mjs
@@ -27,6 +27,7 @@ const entries = new Set(
 const requiredEntries = [
     'package/LICENSE',
     'package/README.md',
+    'package/MIGRATION.md',
     'package/THIRD_PARTY_NOTICES.md',
     'package/dist/esm/styles.css',
     'package/dist/esm/PatrickHand-OFL.txt',
@@ -42,6 +43,22 @@ if (missing.length > 0) {
     process.exit(1);
 }
 
+const verifyPackedMarkdownLinks = (entry) => {
+    const markdown = runTar('-xOzf', normalizedArchive, entry);
+    for (const match of markdown.matchAll(/\]\((\.?\.?\/[^)#?\s]+)(?:#[^)]+)?\)/gu)) {
+        const target = path.posix.normalize(
+            path.posix.join(path.posix.dirname(entry), decodeURIComponent(match[1])),
+        );
+        if (!target.startsWith('package/') || !entries.has(target)) {
+            console.error(`${entry} links to missing packed file '${match[1]}'.`);
+            process.exit(1);
+        }
+    }
+};
+
+verifyPackedMarkdownLinks('package/README.md');
+verifyPackedMarkdownLinks('package/MIGRATION.md');
+
 const license = runTar('-xOzf', normalizedArchive, 'package/LICENSE');
 if (!license.includes('MIT License') || !license.includes('Copyright (c) 2025 Cratis')) {
     console.error('Package LICENSE does not contain the expected Cratis MIT notice.');
diff --git a/Source/scripts/verify-public-types.exceptions.json b/Source/scripts/verify-public-types.exceptions.json
index 36a7fff8..07f452c0 100644
--- a/Source/scripts/verify-public-types.exceptions.json
+++ b/Source/scripts/verify-public-types.exceptions.json
@@ -1,5 +1,5 @@
 {
-    "$comment": "Machine-readable, bounded allow-list for Cratis/Components#176. Every entry names the exact upstream package/version, the diagnostic codes it produces, why it is external to Components, and an objective, checkable removal condition. verify-public-types.mjs refuses to treat an unlisted diagnostic - or a diagnostic whose file does not match filePrefixes - as covered, and fails the run if a listed exception stops reproducing (the removal condition is presumed met and the entry is stale).",
+    "$comment": "Machine-readable, bounded allow-list for Cratis/Components#176. Every entry names exact installed upstream package versions, diagnostic codes, resolution modes, source prefixes, and an objective removal condition. Components-owned diagnostics are covered only as explicitly paired cascades when the same compiler run contains the matching TS2834/TS2835 root cause in that exact upstream package; message similarity alone is insufficient. The verifier fails on unlisted diagnostics, metadata/version drift, unpaired owned diagnostics, and exceptions that stop reproducing.",
     "typeScriptVersion": "6.0.3",
     "trackingIssue": "https://github.com/Cratis/Components/issues/176",
     "upstreamIssues": [
@@ -46,6 +46,23 @@
                 "@cratis/arc/",
                 "@cratis/fundamentals"
             ],
+            "ownedCascades": [
+                {
+                    "messagePattern": "@cratis/arc.react",
+                    "rootCauseFilePrefix": "@cratis/arc.react/",
+                    "rootCauseDiagnosticCodes": ["TS2834", "TS2835"]
+                },
+                {
+                    "messagePattern": "@cratis/arc/",
+                    "rootCauseFilePrefix": "@cratis/arc/",
+                    "rootCauseDiagnosticCodes": ["TS2834", "TS2835"]
+                },
+                {
+                    "messagePattern": "@cratis/fundamentals",
+                    "rootCauseFilePrefix": "@cratis/fundamentals/",
+                    "rootCauseDiagnosticCodes": ["TS2834", "TS2835"]
+                }
+            ],
             "removalCondition": "Coordinate with @cratis/fundamentals (and @cratis/arc / @cratis/arc.react, which share the same generator/build) to add explicit .js extensions to relative specifiers in published declaration files, per the issue's direction to fix this upstream rather than copy or patch their types in Components."
         }
     ],
diff --git a/Source/scripts/verify-public-types.mjs b/Source/scripts/verify-public-types.mjs
index dbcf8e2c..b92b3afb 100644
--- a/Source/scripts/verify-public-types.mjs
+++ b/Source/scripts/verify-public-types.mjs
@@ -20,10 +20,11 @@
  * `skipLibCheck: false` stays on for every fixture - that is the entire point of this script.
  * A subpath that reproduces a known, external, upstream issue is not silently made to pass by
  * flipping skipLibCheck; its diagnostics are matched, code-for-code and file-for-file, against
- * verify-public-types.exceptions.json. An unmatched diagnostic - most importantly, ANY diagnostic
- * whose file lives under Components' own packed declarations - fails the run. A listed exception
- * that stops reproducing also fails the run: its removal condition is presumed met, and the
- * metadata is stale and must be trimmed.
+ * verify-public-types.exceptions.json. An unmatched diagnostic fails the run. A diagnostic
+ * anchored in Components' declarations can only be recognized as an upstream cascade when the
+ * same compiler run also contains its exact reviewed TS2834/TS2835 root cause under the matching
+ * upstream package; message similarity alone can never suppress it. A listed exception that stops
+ * reproducing also fails the run: its removal condition is presumed met and the metadata is stale.
  *
  * A type-fidelity assertion accompanies every subpath: the declaration file TypeScript actually
  * resolved is hashed and compared byte-for-byte against the same member read directly out of the
@@ -55,6 +56,11 @@ import path from 'node:path';
 import { createRequire } from 'node:module';
 import { fileURLToPath } from 'node:url';
 import { gunzipSync } from 'node:zlib';
+import {
+    isOwnedDeclarationDiagnostic,
+    matchesExternalIssue,
+    matchesPairedOwnedCascade,
+} from './lib/public-type-exceptions.mjs';
 
 const packageDir = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
 const monorepoRoot = path.resolve(packageDir, '..');
@@ -230,6 +236,170 @@ const jsSubpaths = Object.entries(pkg.exports ?? {})
 if (jsSubpaths.length === 0)
     fail('No JavaScript subpaths found in `exports` - nothing to verify.');
 
+const rootNodeModules = path.join(monorepoRoot, 'node_modules');
+if (!existsSync(rootNodeModules)) {
+    fail(
+        `${rootNodeModules} does not exist. Run \`yarn install\` at the repo root first.`,
+    );
+}
+
+const installedPackageVersion = (packageName) => {
+    const manifest = path.join(
+        rootNodeModules,
+        ...packageName.split('/'),
+        'package.json',
+    );
+    if (!existsSync(manifest)) {
+        fail(`Exception metadata names '${packageName}', but it is not installed.`);
+    }
+    return readJson(manifest).version;
+};
+
+const parsePinnedPackage = (specifier, context) => {
+    const separator = specifier.lastIndexOf('@');
+    if (separator <= 0 || separator === specifier.length - 1) {
+        fail(`${context} must use an exact package@version value; got '${specifier}'.`);
+    }
+    return {
+        name: specifier.slice(0, separator),
+        version: specifier.slice(separator + 1),
+    };
+};
+
+const validateExceptionMetadata = () => {
+    const supportedModes = new Set(['bundler', 'nodenext']);
+    const publicSubpaths = new Set(jsSubpaths.map((entry) => entry.subpath));
+    const issuesById = new Map();
+    const referencedIssues = new Set();
+    const exactVersion = /^\d+\.\d+\.\d+(?:-[0-9A-Za-z.-]+)?$/u;
+
+    for (const issue of exceptions.upstreamIssues ?? []) {
+        if (!issue.id || issuesById.has(issue.id)) {
+            fail(`Exception metadata has a missing or duplicate issue id '${issue.id}'.`);
+        }
+        issuesById.set(issue.id, issue);
+        if (
+            !Array.isArray(issue.upstreamPackages) ||
+            issue.upstreamPackages.length === 0
+        ) {
+            fail(
+                `Exception '${issue.id}' must name at least one exact upstream package.`,
+            );
+        }
+        if (
+            !Array.isArray(issue.resolutionModes) ||
+            issue.resolutionModes.length === 0 ||
+            issue.resolutionModes.some((mode) => !supportedModes.has(mode))
+        ) {
+            fail(`Exception '${issue.id}' has invalid resolutionModes metadata.`);
+        }
+        if (
+            !Array.isArray(issue.diagnosticCodes) ||
+            issue.diagnosticCodes.length === 0 ||
+            issue.diagnosticCodes.some((code) => !/^TS\d+$/u.test(code))
+        ) {
+            fail(`Exception '${issue.id}' has invalid diagnosticCodes metadata.`);
+        }
+        if (
+            (!Array.isArray(issue.filePrefixes) || issue.filePrefixes.length === 0) &&
+            (!Array.isArray(issue.messagePatterns) || issue.messagePatterns.length === 0)
+        ) {
+            fail(`Exception '${issue.id}' must have a file prefix or message pattern.`);
+        }
+        const ownedCascadePatterns = new Set();
+        for (const cascade of issue.ownedCascades ?? []) {
+            if (
+                !cascade.messagePattern ||
+                ownedCascadePatterns.has(cascade.messagePattern) ||
+                !(issue.messagePatterns ?? []).includes(cascade.messagePattern) ||
+                !cascade.rootCauseFilePrefix ||
+                !(issue.filePrefixes ?? []).includes(cascade.rootCauseFilePrefix) ||
+                !Array.isArray(cascade.rootCauseDiagnosticCodes) ||
+                cascade.rootCauseDiagnosticCodes.length === 0 ||
+                cascade.rootCauseDiagnosticCodes.some(
+                    (code) => !issue.diagnosticCodes.includes(code),
+                )
+            ) {
+                fail(`Exception '${issue.id}' has invalid owned-cascade metadata.`);
+            }
+            ownedCascadePatterns.add(cascade.messagePattern);
+        }
+
+        for (const upstream of issue.upstreamPackages) {
+            if (!upstream.name || !exactVersion.test(upstream.version ?? '')) {
+                fail(`Exception '${issue.id}' must pin every upstream package exactly.`);
+            }
+            const installed = installedPackageVersion(upstream.name);
+            if (installed !== upstream.version) {
+                fail(
+                    `Exception '${issue.id}' pins ${upstream.name}@${upstream.version}, ` +
+                        `but ${installed} is installed. Reproduce and review the exception ` +
+                        'before updating its metadata.',
+                );
+            }
+            if (upstream.via) {
+                const via = parsePinnedPackage(
+                    upstream.via,
+                    `Exception '${issue.id}' via`,
+                );
+                if (!exactVersion.test(via.version)) {
+                    fail(`Exception '${issue.id}' must pin its via package exactly.`);
+                }
+                const installedVia = installedPackageVersion(via.name);
+                if (installedVia !== via.version) {
+                    fail(
+                        `Exception '${issue.id}' names ${via.name}@${via.version} as its ` +
+                            `source, but ${installedVia} is installed.`,
+                    );
+                }
+            }
+        }
+    }
+
+    const configuredSubpaths = new Set();
+    for (const entry of exceptions.exceptions ?? []) {
+        if (!publicSubpaths.has(entry.subpath) || configuredSubpaths.has(entry.subpath)) {
+            fail(
+                `Exception metadata has an unknown or duplicate subpath '${entry.subpath}'.`,
+            );
+        }
+        configuredSubpaths.add(entry.subpath);
+        for (const [mode, issueIds] of Object.entries(entry.resolutionModes ?? {})) {
+            if (
+                !supportedModes.has(mode) ||
+                !Array.isArray(issueIds) ||
+                issueIds.length === 0
+            ) {
+                fail(
+                    `Exception metadata for '${entry.subpath}' has invalid mode '${mode}'.`,
+                );
+            }
+            for (const issueId of issueIds) {
+                const issue = issuesById.get(issueId);
+                if (!issue) {
+                    fail(`Exception metadata references unknown issue '${issueId}'.`);
+                }
+                if (!issue.resolutionModes.includes(mode)) {
+                    fail(
+                        `Exception '${issueId}' is assigned to undeclared mode '${mode}' ` +
+                            `for '${entry.subpath}'.`,
+                    );
+                }
+                referencedIssues.add(issueId);
+            }
+        }
+    }
+
+    const unusedIssues = [...issuesById.keys()].filter((id) => !referencedIssues.has(id));
+    if (unusedIssues.length > 0) {
+        fail(
+            `Exception metadata has unused upstream issue(s): ${unusedIssues.join(', ')}.`,
+        );
+    }
+};
+
+validateExceptionMetadata();
+
 const selected = only ? jsSubpaths.filter((entry) => entry.subpath === only) : jsSubpaths;
 if (only && selected.length === 0)
     fail(`--only ${only} does not match any exports subpath.`);
@@ -267,13 +437,6 @@ if (!existsSync(tgzPath)) fail(`\`yarn pack\` did not produce ${tgzPath}.`);
 const scratchNodeModules = path.join(scratchRoot, 'node_modules');
 mkdirSync(scratchNodeModules, { recursive: true });
 
-const rootNodeModules = path.join(monorepoRoot, 'node_modules');
-if (!existsSync(rootNodeModules)) {
-    fail(
-        `${rootNodeModules} does not exist. Run \`yarn install\` at the repo root first.`,
-    );
-}
-
 for (const entry of readdirSync(rootNodeModules, { withFileTypes: true })) {
     if (entry.name === '@cratis' || entry.name === '.bin') continue;
     linkInstalledEntry(
@@ -492,26 +655,19 @@ for (const { subpath, specifier, declarationRelPath } of selected) {
         }
 
         const allowedIssues = allowedIssuesFor(subpath, mode);
-        // "has no exported member" cascades (TS2305/TS2694) are anchored to the *consuming* file -
-        // often one of Components' own re-exports - even though the root cause is the upstream
-        // barrel's broken extensionless import. messagePatterns lets those cascades match on the
-        // upstream module named in the diagnostic message instead of requiring the file itself to
-        // live under the upstream package.
         const matchesIssue = (diagnostic, issue) =>
-            issue.diagnosticCodes.includes(diagnostic.code) &&
-            (issue.filePrefixes.some((prefix) => diagnostic.file.startsWith(prefix)) ||
-                (issue.messagePatterns ?? []).some((pattern) =>
-                    diagnostic.message.includes(pattern),
-                ));
+            matchesExternalIssue(diagnostic, issue, pkg.name) ||
+            matchesPairedOwnedCascade(diagnostic, issue, diagnostics, pkg.name);
+        const isOwnedDeclaration = (diagnostic) =>
+            isOwnedDeclarationDiagnostic(diagnostic, pkg.name);
         const isCovered = (diagnostic) =>
             allowedIssues.some((issue) => matchesIssue(diagnostic, issue));
 
         const unexpected = diagnostics.filter((diagnostic) => !isCovered(diagnostic));
-        const ownDeclarationRegressions = unexpected.filter((diagnostic) =>
-            diagnostic.file.startsWith('@cratis/components/'),
-        );
+        const ownDeclarationRegressions = unexpected.filter(isOwnedDeclaration);
 
-        // An exception is stale once none of its codes reproduce anymore for this (subpath, mode).
+        // An exception is stale once none of its reviewed external or paired-cascade diagnostics
+        // reproduce anymore for this (subpath, mode).
         const staleIssues = allowedIssues.filter(
             (issue) => !diagnostics.some((diagnostic) => matchesIssue(diagnostic, issue)),
         );
diff --git a/Source/scripts/verify-spatial-consumer.mjs b/Source/scripts/verify-spatial-consumer.mjs
index 3dd6e80b..f2de1935 100644
--- a/Source/scripts/verify-spatial-consumer.mjs
+++ b/Source/scripts/verify-spatial-consumer.mjs
@@ -9,8 +9,9 @@
  * resolves to exactly ONE `pixi.js` instance - no nested/duplicate copy either inside
  * the packed artifact or pulled in by a second, incompatible resolution.
  *
- * What is checked against a scratch consumer that installs `pixi.js@^8.20.0` alongside
- * the mandatory peers:
+ * What is checked against an offline scratch consumer assembled from this checkout's installed
+ * mandatory peers plus `pixi.js@^8.20.0`: (real npm/pnpm/Yarn PnP install topologies are the
+ * separate `verify-package-managers` CI matrix):
  *
  *   1. Runtime: `./Canvas` and `./PivotViewer` import cleanly.
  *   2. One Pixi resolution / no nested copy: `pixi.js` resolved from the *consumer app's
@@ -18,9 +19,9 @@
  *      `Canvas` module's own realpath-adjacent resolution* both resolve to the exact
  *      same real file - proving the package never nests, bundles, or otherwise ships
  *      its own copy of Pixi instead of using the consumer's single peer resolution.
- *   3. Type-checking: a strict (`skipLibCheck: false`) TypeScript project for `./Canvas`
- *      compiles with `pixi.js` installed (`PIXI.*` types resolve, matching the bounded
- *      upstream exceptions already tracked in `verify-public-types.exceptions.json`).
+ *   3. Type-checking: strict (`skipLibCheck: false`) TypeScript projects for `./Canvas` and
+ *      `./PivotViewer` compile with `pixi.js` present (`PIXI.*` types resolve, matching the
+ *      bounded upstream exceptions already tracked in `verify-public-types.exceptions.json`).
  *
  * Usage:  node scripts/verify-spatial-consumer.mjs [--keep-fixture]
  * Exits non-zero on any check failure.

From e296aaae6a9e312eae692ea203e2c0e567a2c91b Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Tue, 25 Aug 2026 20:47:46 +0200
Subject: [PATCH 081/267] Align packed ESLint probe with current toolchain

---
 ESLint/test/verify-packed-package.mjs | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ESLint/test/verify-packed-package.mjs b/ESLint/test/verify-packed-package.mjs
index 98ea4915..b32a4cbd 100644
--- a/ESLint/test/verify-packed-package.mjs
+++ b/ESLint/test/verify-packed-package.mjs
@@ -50,8 +50,8 @@ try {
                 'install',
                 '--ignore-scripts',
                 archive,
-                'eslint@10.9.0',
-                '@typescript-eslint/parser@8.67.0',
+                'eslint@10.9.1',
+                '@typescript-eslint/parser@8.68.0',
                 '--prefix',
                 consumer,
             ],

From 4874a6d8219a82122994515cecaabcddcd0d5dc2 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Tue, 25 Aug 2026 21:50:17 +0200
Subject: [PATCH 082/267] Clarify Canvas DOM and Pixi reality

---
 Documentation/Canvas/index.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/Documentation/Canvas/index.md b/Documentation/Canvas/index.md
index 881945dc..7fc08d59 100644
--- a/Documentation/Canvas/index.md
+++ b/Documentation/Canvas/index.md
@@ -3,9 +3,9 @@ title: Canvas
 description: Reference for the pan, zoom, minimap, overlay, and collaborative canvas primitives.
 ---
 
-`@cratis/components/Canvas` provides a renderer-independent React surface for large spatial workspaces. It owns gesture coordination, transforms, controls, item measurement, minimap state, and optional Note, Region, and Chat shapes. Product appearance comes from `--cratis-*` tokens and Canvas classes; PrimeIcons and a renderer provider are not required.
+`@cratis/components/Canvas` provides a Prime-free React surface over a shared DOM/Pixi spatial engine. It owns gesture coordination, transforms, controls, item measurement, minimap state, and optional Note, Region, and Chat shapes. Product appearance comes from `--cratis-*` tokens and Canvas classes; PrimeReact, PrimeIcons, and a renderer provider are not required.
 
-Canvas belongs to the [Spatial capability profile](../ui-foundation.md#capability-profiles) alongside `PivotViewer` — the only two subpaths that install the optional `pixi.js` peer. Spatial is not a lesser-supported tier: it ships at the same version, behind the same release gates, as every Foundation and Advanced React subpath.
+Canvas belongs to the [Spatial capability profile](../ui-foundation.md#capability-profiles) alongside `PivotViewer` — the only two subpaths that require the optional `pixi.js` peer. Spatial is not a lesser-supported tier: it ships at the same version, behind the same release gates, as every Foundation and Advanced React subpath.
 
 The engine renders and positions arbitrary content independently of the optional presentational shapes. Start with [Basic usage](basic-usage.md), then use the focused guides for [pan and zoom](pan-and-zoom.md), [controls chrome](controls-chrome.md), [notes](notes.md), [regions](regions.md), and the [chat bubble](chat-bubble.md). This page is the complete API reference.
 
@@ -23,7 +23,7 @@ import {
 
 Import `@cratis/components/tokens` and `@cratis/components/styles` once at the application root. Add `@cratis/components/theme` only when using the baseline appearance.
 
-Canvas and PivotViewer expose and render real Pixi objects. Install the optional peer once in an application that uses either surface:
+Canvas exposes and renders real Pixi objects; PivotViewer renders them internally without exposing Pixi types in its public API. Install the optional peer once in an application that uses either surface:
 
 ```bash
 npm install pixi.js@^8.20.0
@@ -98,10 +98,10 @@ const handleReady = (handle: CanvasHandle) => {
 
 ## DOM and Pixi layers
 
-`Canvas` composes two independent rendering layers rather than choosing one, and an application can use either alone or mix both in the same instance:
+`Canvas` composes two rendering layers rather than choosing one, and an application can use DOM content alone or mix DOM and Pixi items in the same instance. Canvas always initializes one transparent Pixi `Application` and empty `world` container so `CanvasContext`, `onReady`, and the shared camera have one stable contract; therefore every Canvas consumer still installs the optional Pixi peer. When the world is empty, `Canvas` skips the per-frame GPU render pass.
 
-- **DOM layer** — `children` and `CanvasItem` position arbitrary React/DOM content with ordinary CSS transforms. No Pixi content ever mounts if an application only uses this layer.
-- **Pixi layer** — the optional `items`/`renderItem` props hand `Canvas` an array of data and a function that builds one `PIXI.Container` per item, rendered on a single shared Pixi `Application`/`world` container exposed through `onReady`'s `CanvasContext`. This exists for item counts where per-item DOM nodes (and DOM-level pan/zoom repaint cost) become the bottleneck; the Pixi layer amortizes many items on the GPU instead.
+- **DOM layer** — `children` and `CanvasItem` position arbitrary React/DOM content with ordinary CSS transforms. No Pixi display-object content is created when an application uses only this layer; this is the layer shown by the `WithControlsAndMinimap` Storybook screenshot.
+- **Pixi item layer** — the optional `items`/`renderItem` props hand `Canvas` an array of data and a function that builds one `PIXI.Container` per item in the shared Pixi `world`. This exists for item counts where per-item DOM nodes (and DOM-level pan/zoom repaint cost) become the bottleneck; the Pixi layer amortizes many items on the GPU instead.
 
 Both layers share the same camera: panning and zooming transform the DOM layer's CSS and the Pixi `world` container together, so DOM and Pixi content stay registered to the same world coordinates.
 

From 0303cb7a225ce2ee6d3e485ccec4e979a6e157ea Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Tue, 25 Aug 2026 22:09:27 +0200
Subject: [PATCH 083/267] Fix nested Toolbar layout presentation

---
 Source/Toolbar/Toolbar.css                    |   2 +-
 Source/Toolbar/Toolbar.stories.tsx            | 228 ++++++++++++++----
 .../when_scoping_group_chrome.ts              |  14 ++
 3 files changed, 191 insertions(+), 53 deletions(-)
 create mode 100644 Source/Toolbar/for_ToolbarComposition/when_scoping_group_chrome.ts

diff --git a/Source/Toolbar/Toolbar.css b/Source/Toolbar/Toolbar.css
index 4b036193..60676d45 100644
--- a/Source/Toolbar/Toolbar.css
+++ b/Source/Toolbar/Toolbar.css
@@ -284,7 +284,7 @@
  * When a Toolbar contains ToolbarGroup children it becomes a transparent
  * layout wrapper — each group renders as its own pill.
  */
-.toolbar:has(.toolbar-group) {
+.toolbar:has(> .toolbar-group) {
     background: transparent;
     border: none;
     box-shadow: none;
diff --git a/Source/Toolbar/Toolbar.stories.tsx b/Source/Toolbar/Toolbar.stories.tsx
index 1dbe1c61..78b95244 100644
--- a/Source/Toolbar/Toolbar.stories.tsx
+++ b/Source/Toolbar/Toolbar.stories.tsx
@@ -3,6 +3,60 @@
 
 import type { Meta, StoryObj } from '@storybook/react';
 import { useMemo, useState, type DragEvent } from 'react';
+import type { IconType } from 'react-icons';
+import {
+    FaAlignCenter,
+    FaAlignLeft,
+    FaArrowPointer,
+    FaArrowUpRightFromSquare,
+    FaArrowsRotate,
+    FaBell,
+    FaBold,
+    FaBolt,
+    FaBookmark,
+    FaCircle,
+    FaCircleExclamation,
+    FaCircleQuestion,
+    FaClockRotateLeft,
+    FaClone,
+    FaComment,
+    FaEraser,
+    FaExpand,
+    FaEye,
+    FaFile,
+    FaFilePen,
+    FaFilter,
+    FaFloppyDisk,
+    FaFolderOpen,
+    FaGear,
+    FaHand,
+    FaHeart,
+    FaHouse,
+    FaImage,
+    FaLink,
+    FaList,
+    FaMinus,
+    FaMoon,
+    FaPalette,
+    FaPencil,
+    FaPlay,
+    FaPlus,
+    FaRotateLeft,
+    FaShareNodes,
+    FaSitemap,
+    FaSortUp,
+    FaSquare,
+    FaSquareCheck,
+    FaStar,
+    FaStopwatch,
+    FaSun,
+    FaTable,
+    FaTableCellsLarge,
+    FaUnderline,
+    FaUpDownLeftRight,
+    FaUpload,
+    FaWrench,
+} from 'react-icons/fa6';
 import { Toolbar } from './Toolbar';
 import { ToolbarButton } from './ToolbarButton';
 import { ToolbarContext } from './ToolbarContext';
@@ -26,11 +80,63 @@ export default meta;
 
 type Story = StoryObj<typeof Toolbar>;
 
-const ToolGlyph = ({ name }: { name: string }) => (
-    <span aria-hidden='true' style={{ fontSize: '0.75rem', fontWeight: 700 }}>
-        {name.slice(0, 1).toUpperCase()}
-    </span>
-);
+const toolIcons: Record<string, IconType> = {
+    'align-center': FaAlignCenter,
+    'align-left': FaAlignLeft,
+    'arrow-up-left': FaArrowPointer,
+    'arrows-alt': FaUpDownLeftRight,
+    bell: FaBell,
+    bold: FaBold,
+    bolt: FaBolt,
+    bookmark: FaBookmark,
+    'check-square': FaSquareCheck,
+    circle: FaCircle,
+    clone: FaClone,
+    cog: FaGear,
+    comment: FaComment,
+    eraser: FaEraser,
+    'exclamation-circle': FaCircleExclamation,
+    expand: FaExpand,
+    'external-link': FaArrowUpRightFromSquare,
+    eye: FaEye,
+    file: FaFile,
+    'file-edit': FaFilePen,
+    filter: FaFilter,
+    'folder-open': FaFolderOpen,
+    'hand-paper': FaHand,
+    heart: FaHeart,
+    history: FaClockRotateLeft,
+    home: FaHouse,
+    image: FaImage,
+    link: FaLink,
+    list: FaList,
+    minus: FaMinus,
+    moon: FaMoon,
+    palette: FaPalette,
+    pencil: FaPencil,
+    play: FaPlay,
+    plus: FaPlus,
+    'question-circle': FaCircleQuestion,
+    refresh: FaArrowsRotate,
+    save: FaFloppyDisk,
+    'share-alt': FaShareNodes,
+    sitemap: FaSitemap,
+    'sort-up': FaSortUp,
+    star: FaStar,
+    stop: FaSquare,
+    stopwatch: FaStopwatch,
+    sun: FaSun,
+    table: FaTable,
+    'th-large': FaTableCellsLarge,
+    underline: FaUnderline,
+    undo: FaRotateLeft,
+    upload: FaUpload,
+};
+
+const ToolGlyph = ({ name }: { name: string }) => {
+    const Icon = toolIcons[name] ?? FaWrench;
+    return <Icon aria-hidden='true' />;
+};
 
 const folderIcons: string[] = [
     'exclamation-circle',
@@ -758,7 +864,7 @@ export const LayoutForEditorModules: Story = {
 
             const assetTools = useMemo(
                 () => (
-                    <ToolbarGroup>
+                    <ToolbarGroup orientation='horizontal'>
                         <ToolbarButton icon={<ToolGlyph name='image' />} title='Asset Browser' />
                         <ToolbarButton icon={<ToolGlyph name='upload' />} title='Upload Asset' />
                     </ToolbarGroup>
@@ -770,7 +876,7 @@ export const LayoutForEditorModules: Story = {
                 () => (
                     <>
                         <ToolbarSeparator />
-                        <ToolbarGroup>
+                        <ToolbarGroup orientation='horizontal'>
                             <ToolbarButton icon={<ToolGlyph name='comment' />} title='Comments' />
                             <ToolbarButton icon={<ToolGlyph name='check-square' />} title='Approval Checks' />
                         </ToolbarGroup>
@@ -781,52 +887,70 @@ export const LayoutForEditorModules: Story = {
 
             return (
                 <ToolbarSlotProvider>
-                    <div className='cratis:flex cratis:flex-col cratis:items-center cratis:gap-6'>
-                        <Toolbar orientation='horizontal'>
-                            <ToolbarButton icon={<ToolGlyph name='file-edit' />} title='Open Editor' tooltipPosition='bottom' />
-                            <ToolbarSeparator orientation='horizontal' />
-                            <ToolbarLayout name='editor-modules' orientation='horizontal'>
-                                <ToolbarGroup orientation='horizontal'>
-                                    <ToolbarButton icon={<ToolGlyph name='save' />} title='Save' tooltipPosition='bottom' />
-                                    <ToolbarButton icon={<ToolGlyph name='refresh' />} title='Reload' tooltipPosition='bottom' />
-                                </ToolbarGroup>
-                            </ToolbarLayout>
-                            <ToolbarSeparator orientation='horizontal' />
-                            <ToolbarButton icon={<ToolGlyph name='cog' />} title='Settings' tooltipPosition='bottom' />
-                        </Toolbar>
-
-                        {assetToolsEnabled && (
-                            <ToolbarSlot slotName='editor-modules' order={10}>
-                                {assetTools}
-                            </ToolbarSlot>
-                        )}
-
-                        {reviewToolsEnabled && (
-                            <ToolbarSlot slotName='editor-modules' order={20}>
-                                {reviewTools}
-                            </ToolbarSlot>
-                        )}
-
-                        <div className='cratis:flex cratis:gap-6'>
-                            {[
-                                { label: 'Asset tools', enabled: assetToolsEnabled, toggle: () => setAssetToolsEnabled(v => !v) },
-                                { label: 'Review tools', enabled: reviewToolsEnabled, toggle: () => setReviewToolsEnabled(v => !v) },
-                            ].map(({ label, enabled, toggle }) => (
-                                <div key={label} className='cratis:flex cratis:flex-col cratis:items-center cratis:gap-2'>
-                                    <span className='cratis:text-xs' style={{ color: 'var(--cratis-text-color-secondary)' }}>{label}</span>
-                                    <button
-                                        type='button'
-                                        onClick={toggle}
-                                        className={`cratis:px-3 cratis:py-1 cratis:rounded cratis:text-sm cratis:transition-colors ${
-                                            enabled ? 'cratis:bg-blue-600 cratis:text-white' : 'cratis:bg-gray-600 cratis:text-gray-200 cratis:hover:bg-gray-500'
-                                        }`}
-                                    >
-                                        {enabled ? 'Disable' : 'Enable'}
-                                    </button>
-                                </div>
-                            ))}
+                    <section
+                        className='cratis:flex cratis:flex-col cratis:gap-6 cratis:p-8 cratis:rounded-2xl cratis:border'
+                        style={{
+                            width: 'min(52rem, calc(100vw - 4rem))',
+                            borderColor: 'var(--cratis-surface-border)',
+                            background: 'var(--cratis-surface-card)',
+                            color: 'var(--cratis-text-color)',
+                            boxShadow: 'var(--cratis-shadow-overlay)',
+                        }}
+                    >
+                        <header className='cratis:flex cratis:flex-col cratis:gap-1'>
+                            <strong>Editor module toolbar</strong>
+                            <span className='cratis:text-sm' style={{ color: 'var(--cratis-text-color-secondary)' }}>
+                                Independent features contribute complete tool groups to one named layout region.
+                            </span>
+                        </header>
+
+                        <div className='cratis:flex cratis:flex-col cratis:items-center cratis:gap-6'>
+                            <Toolbar orientation='horizontal'>
+                                <ToolbarButton icon={<ToolGlyph name='file-edit' />} title='Open Editor' tooltipPosition='bottom' />
+                                <ToolbarSeparator orientation='horizontal' />
+                                <ToolbarLayout name='editor-modules' orientation='horizontal'>
+                                    <ToolbarGroup orientation='horizontal'>
+                                        <ToolbarButton icon={<ToolGlyph name='save' />} title='Save' tooltipPosition='bottom' />
+                                        <ToolbarButton icon={<ToolGlyph name='refresh' />} title='Reload' tooltipPosition='bottom' />
+                                    </ToolbarGroup>
+                                </ToolbarLayout>
+                                <ToolbarSeparator orientation='horizontal' />
+                                <ToolbarButton icon={<ToolGlyph name='cog' />} title='Settings' tooltipPosition='bottom' />
+                            </Toolbar>
+
+                            {assetToolsEnabled && (
+                                <ToolbarSlot slotName='editor-modules' order={10}>
+                                    {assetTools}
+                                </ToolbarSlot>
+                            )}
+
+                            {reviewToolsEnabled && (
+                                <ToolbarSlot slotName='editor-modules' order={20}>
+                                    {reviewTools}
+                                </ToolbarSlot>
+                            )}
+
+                            <div className='cratis:flex cratis:gap-6'>
+                                {[
+                                    { label: 'Asset tools', enabled: assetToolsEnabled, toggle: () => setAssetToolsEnabled(v => !v) },
+                                    { label: 'Review tools', enabled: reviewToolsEnabled, toggle: () => setReviewToolsEnabled(v => !v) },
+                                ].map(({ label, enabled, toggle }) => (
+                                    <div key={label} className='cratis:flex cratis:flex-col cratis:items-center cratis:gap-2'>
+                                        <span className='cratis:text-xs' style={{ color: 'var(--cratis-text-color-secondary)' }}>{label}</span>
+                                        <button
+                                            type='button'
+                                            onClick={toggle}
+                                            className={`cratis:px-3 cratis:py-1 cratis:rounded cratis:text-sm cratis:transition-colors ${
+                                                enabled ? 'cratis:bg-blue-600 cratis:text-white' : 'cratis:bg-gray-600 cratis:text-gray-200 cratis:hover:bg-gray-500'
+                                            }`}
+                                        >
+                                            {enabled ? 'Disable' : 'Enable'}
+                                        </button>
+                                    </div>
+                                ))}
+                            </div>
                         </div>
-                    </div>
+                    </section>
                 </ToolbarSlotProvider>
             );
         };
diff --git a/Source/Toolbar/for_ToolbarComposition/when_scoping_group_chrome.ts b/Source/Toolbar/for_ToolbarComposition/when_scoping_group_chrome.ts
new file mode 100644
index 00000000..22b87502
--- /dev/null
+++ b/Source/Toolbar/for_ToolbarComposition/when_scoping_group_chrome.ts
@@ -0,0 +1,14 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { readFileSync } from 'node:fs';
+import { describe, expect, it } from 'vitest';
+
+const styles = readFileSync(new URL('../Toolbar.css', import.meta.url), 'utf8');
+
+describe('when scoping grouped toolbar chrome', () => {
+    it('should make the outer toolbar transparent only for direct ToolbarGroup children', () => {
+        expect(styles).toContain('.toolbar:has(> .toolbar-group)');
+        expect(styles).not.toContain('.toolbar:has(.toolbar-group)');
+    });
+});

From 1241f50ed08eca4d3a3c604ddee6213f49ba837b Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Wed, 26 Aug 2026 09:21:06 +0200
Subject: [PATCH 084/267] Add exhaustive Storybook browser coverage

Make every story a typed Chromium and axe gate in both maintained appearances, with direct interaction coverage for overlays, filters, dialogs, live queries, and toolbar composition.

Fix the accessibility and runtime defects exposed by those tests, including hidden tooltip focus behavior, keyboard range controls, invalid nested filter actions, current Pixi 8 APIs, and focus restoration.
---
 .github/workflows/javascript-build.yml        |  11 +
 Source/.storybook/main.ts                     |   2 +-
 Source/.storybook/preview.css                 |   3 +
 Source/.storybook/preview.js                  |   2 +
 Source/Canvas/Canvas.stories.tsx              |  20 +-
 Source/Canvas/CanvasOverlay.stories.tsx       |  41 ++++
 .../when_computing_a_color.ts                 |  11 +-
 .../ChatBubble/Avatar/getAvatarColor.ts       |  11 +-
 Source/Canvas/shapes/ChatBubble/Chat.css      |   2 +-
 .../shapes/ChatBubble/ChatBubble.stories.tsx  |  41 ++++
 .../shapes/ChatBubble/ChatKit.stories.tsx     | 205 ++++++++++++++++++
 .../Mentions/MentionSuggestions.tsx           |   6 +-
 .../shapes/ChatBubble/ReactionPicker.css      |   4 +
 .../shapes/ChatBubble/ReactionPicker.tsx      |  38 ++--
 .../CommandDialog/CommandDialog.stories.tsx   |  35 ++-
 .../StepperCommandDialog.stories.tsx          |  17 ++
 Source/CommandForm/fields/Fields.stories.tsx  |  24 +-
 Source/Common/ActionMenubar.stories.tsx       |  62 ++++++
 .../CratisComponentsProvider.stories.tsx      |  51 +++++
 Source/Common/DatePickerInput.stories.tsx     |   7 +-
 Source/Common/Tooltip.stories.tsx             |  18 +-
 Source/Common/Tooltip.tsx                     |  12 +-
 .../DataTables/ColumnFilterMenu.stories.tsx   |  62 ++++++
 Source/DataTables/DataTableCore.css           |  12 +
 Source/DataTables/DataTableCore.stories.tsx   |   5 +-
 Source/DataTables/DataTableCore.tsx           |  10 +
 .../DataTableForObservableQuery.stories.tsx   |  66 ++++++
 Source/DataTables/TablePaginator.stories.tsx  |  53 +++++
 .../Dialogs/BusyIndicatorDialog.stories.tsx   |  50 +++--
 Source/Dialogs/ConfirmationDialog.stories.tsx |  15 +-
 Source/Dialogs/Dialog.stories.tsx             |  16 ++
 Source/Display/ProgressBar.tsx                |   8 +
 Source/Dropdown/Dropdown.stories.tsx          |   6 +-
 Source/Filter/FilterPanel.css                 |  20 +-
 Source/Filter/FilterPanel.stories.tsx         | 180 ++++++++++++---
 Source/Filter/FilterPanel.tsx                 | 140 +++++-------
 .../Filter/RangeHistogramFilter.stories.tsx   |  83 +++++++
 Source/Filter/RangeHistogramFilter.tsx        |  59 +++++
 .../when_clear_buttons_are_localized.tsx      |   9 +
 .../when_using_keyboard.tsx                   |  71 ++++++
 .../ObjectContentEditor.stories.tsx           |   4 +-
 .../ObjectContentEditor.tsx                   |  24 +-
 .../ObjectNavigationalBar.stories.tsx         |  11 +-
 Source/PivotViewer/components/PivotCanvas.tsx |  28 +--
 Source/PivotViewer/components/Toolbar.tsx     |   1 +
 Source/PivotViewer/components/pivot/groups.ts |  16 +-
 .../PivotViewer/components/pivot/sprites.ts   | 132 ++++++-----
 Source/SchemaEditor/NameCell.tsx              |  18 +-
 Source/SchemaEditor/SchemaEditor.stories.tsx  |  64 ++++--
 Source/SchemaEditor/SchemaEditor.tsx          |  21 +-
 Source/SchemaEditor/TypeCell.tsx              |   2 +
 Source/TimeMachine/EventsView.stories.tsx     |   6 +-
 Source/TimeMachine/Properties.css             |   2 +-
 Source/TimeMachine/Properties.stories.tsx     |   8 +-
 Source/TimeMachine/TimeMachine.stories.tsx    |  22 ++
 Source/Toolbar/Toolbar.stories.tsx            |  44 +++-
 Source/Toolbar/ToolbarButton.tsx              |   8 +-
 Source/Toolbar/ToolbarFanOutItem.tsx          |  22 +-
 Source/Toolbar/ToolbarFolder.tsx              |  24 +-
 .../Toolbar/ToolbarItemVisibilityContext.ts   |  10 +
 Source/Toolbar/ToolbarLayout.tsx              |   5 +-
 Source/Toolbar/ToolbarSection.tsx             |   7 +-
 .../when_rendering_hidden_items.tsx           |  59 +++++
 .../when_escape_is_pressed.tsx                |  17 +-
 Source/package.json                           |   8 +-
 Source/scripts/verify-storybook-index.mjs     |  81 +++++++
 Source/theme.css                              |   4 +-
 Source/tokens.css                             |   2 +-
 Source/tsconfig.json                          |   2 +
 Source/tsconfig.stories.json                  |  15 ++
 Source/vitest.storybook.config.ts             |  30 +++
 package.json                                  |   4 +
 72 files changed, 1859 insertions(+), 330 deletions(-)
 create mode 100644 Source/Canvas/CanvasOverlay.stories.tsx
 create mode 100644 Source/Canvas/shapes/ChatBubble/ChatBubble.stories.tsx
 create mode 100644 Source/Canvas/shapes/ChatBubble/ChatKit.stories.tsx
 create mode 100644 Source/Common/ActionMenubar.stories.tsx
 create mode 100644 Source/Common/CratisComponentsProvider.stories.tsx
 create mode 100644 Source/DataTables/ColumnFilterMenu.stories.tsx
 create mode 100644 Source/DataTables/TablePaginator.stories.tsx
 create mode 100644 Source/Filter/RangeHistogramFilter.stories.tsx
 create mode 100644 Source/Filter/for_RangeHistogramFilter/when_using_keyboard.tsx
 create mode 100644 Source/Toolbar/ToolbarItemVisibilityContext.ts
 create mode 100644 Source/Toolbar/for_ToolbarComposition/when_rendering_hidden_items.tsx
 create mode 100644 Source/scripts/verify-storybook-index.mjs
 create mode 100644 Source/tsconfig.stories.json
 create mode 100644 Source/vitest.storybook.config.ts

diff --git a/.github/workflows/javascript-build.yml b/.github/workflows/javascript-build.yml
index 6a0fcc15..54971bc5 100644
--- a/.github/workflows/javascript-build.yml
+++ b/.github/workflows/javascript-build.yml
@@ -95,6 +95,17 @@ jobs:
             - name: Build Storybook
               run: yarn workspace @cratis/components build-storybook
 
+            - name: Verify Storybook stories and autodocs
+              working-directory: Source
+              run: yarn verify-storybook-index
+
+            - name: Install Storybook browser
+              run: yarn playwright install --with-deps chromium
+
+            - name: Test every Storybook story
+              working-directory: Source
+              run: yarn test-storybook
+
     # Builds the artifact that actually ships to npm (the `prepare` script: tsc -b +
     # rollup + copy-css) and loads every subpath of the `exports` map from it.
     #
diff --git a/Source/.storybook/main.ts b/Source/.storybook/main.ts
index dab8b8f4..b27a2fcd 100644
--- a/Source/.storybook/main.ts
+++ b/Source/.storybook/main.ts
@@ -6,7 +6,7 @@ import type { UserConfig as ViteConfig } from 'vite';
 
 const config: StorybookConfig = {
     stories: ['../!(dist|node_modules|storybook-static)/**/*.stories.@(ts|tsx)'],
-    addons: ['@storybook/addon-a11y'],
+    addons: ['@storybook/addon-docs', '@storybook/addon-a11y', '@storybook/addon-vitest'],
     framework: {
         name: '@storybook/react-vite',
         options: {},
diff --git a/Source/.storybook/preview.css b/Source/.storybook/preview.css
index de00da9d..75f2ae56 100644
--- a/Source/.storybook/preview.css
+++ b/Source/.storybook/preview.css
@@ -53,6 +53,9 @@ body.storybook-product-theme {
 
 html,
 body {
+    /* Arc's current command-form validation message uses this upstream token. Map it to
+       the Components semantic error color so integrated command stories remain legible. */
+    --color-error: var(--cratis-red-500);
     min-height: 100vh;
     margin: 0;
     color: var(--cratis-text-color);
diff --git a/Source/.storybook/preview.js b/Source/.storybook/preview.js
index 781728c0..b9327e6e 100644
--- a/Source/.storybook/preview.js
+++ b/Source/.storybook/preview.js
@@ -40,6 +40,8 @@ addons.getChannel().on('STORYBOOK_THEME_CHANGE', ({ theme }) => {
     if (mode) applyAppearance(mode);
 });
 
+export const tags = ['autodocs'];
+
 export const globalTypes = {
     appearance: {
         name: 'Appearance',
diff --git a/Source/Canvas/Canvas.stories.tsx b/Source/Canvas/Canvas.stories.tsx
index bcc941a7..3f6200ed 100644
--- a/Source/Canvas/Canvas.stories.tsx
+++ b/Source/Canvas/Canvas.stories.tsx
@@ -18,7 +18,7 @@ export default meta;
 
 type Story = StoryObj<typeof Canvas>;
 
-const BOX_COLORS = ['#60a5fa', '#f472b6', '#34d399', '#fbbf24', '#a78bfa'];
+const BOX_COLORS = ['#2563eb', '#be185d', '#047857', '#b45309', '#6d28d9'];
 
 interface DragState {
     clientX: number;
@@ -124,6 +124,24 @@ export const DeclarativeChildren: Story = {
  * panning around — and the minimap's own click/drag-to-pan — are actually meaningful. Open the minimap
  * from the controls pill (bottom-left) to jump around the board.
  */
+export const LocalizedControls: Story = {
+    render: () => (
+        <div style={{ width: '100vw', height: '100vh' }}>
+            <Canvas
+                showControls
+                showMinimap
+                controlsLabels={{
+                    toggleMinimap: 'Vis eller skjul minikart',
+                    zoomOut: 'Zoom ut',
+                    resetZoom: 'Tilbakestill zoom',
+                    zoomIn: 'Zoom inn',
+                    help: 'Hjelp',
+                }}
+            />
+        </div>
+    ),
+};
+
 export const WithControlsAndMinimap: Story = {
     render: () => {
         const WithControlsAndMinimapDemo = () => {
diff --git a/Source/Canvas/CanvasOverlay.stories.tsx b/Source/Canvas/CanvasOverlay.stories.tsx
new file mode 100644
index 00000000..97f0345a
--- /dev/null
+++ b/Source/Canvas/CanvasOverlay.stories.tsx
@@ -0,0 +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 type { Meta, StoryObj } from '@storybook/react';
+import { CanvasOverlay } from './CanvasOverlay';
+
+const meta = {
+    title: 'Canvas/CanvasOverlay',
+    component: CanvasOverlay,
+    parameters: { layout: 'fullscreen' },
+} satisfies Meta<typeof CanvasOverlay>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const InspectorPanel: Story = {
+    args: {
+        children: (
+            <aside
+                aria-label='Canvas inspector'
+                style={{
+                    position: 'fixed',
+                    top: '2rem',
+                    right: '2rem',
+                    width: '18rem',
+                    padding: '1rem',
+                    border: '1px solid var(--cratis-surface-border)',
+                    borderRadius: '0.75rem',
+                    background: 'var(--cratis-surface-card)',
+                    color: 'var(--cratis-text-color)',
+                    boxShadow: 'var(--cratis-shadow-overlay)',
+                }}
+            >
+                <strong>Canvas inspector</strong>
+                <p style={{ color: 'var(--cratis-text-color-secondary)' }}>
+                    Portaled content stays above the spatial surface.
+                </p>
+            </aside>
+        ),
+    },
+};
diff --git a/Source/Canvas/shapes/ChatBubble/Avatar/for_getAvatarColor/when_computing_a_color.ts b/Source/Canvas/shapes/ChatBubble/Avatar/for_getAvatarColor/when_computing_a_color.ts
index 278bf782..c52b7e4f 100644
--- a/Source/Canvas/shapes/ChatBubble/Avatar/for_getAvatarColor/when_computing_a_color.ts
+++ b/Source/Canvas/shapes/ChatBubble/Avatar/for_getAvatarColor/when_computing_a_color.ts
@@ -17,7 +17,16 @@ describe('when computing colors for different initials', () => {
 
 describe('when computing a color', () => {
     it('should return a value from the predefined palette', () => {
-        const palette = ['#6366f1', '#8b5cf6', '#ec4899', '#f43f5e', '#f97316', '#0ea5e9', '#10b981', '#14b8a6'];
+        const palette = [
+            '#4f46e5',
+            '#7c3aed',
+            '#be185d',
+            '#be123c',
+            '#c2410c',
+            '#0369a1',
+            '#047857',
+            '#0f766e',
+        ];
         palette.should.contain(getAvatarColor('AB'));
     });
 });
diff --git a/Source/Canvas/shapes/ChatBubble/Avatar/getAvatarColor.ts b/Source/Canvas/shapes/ChatBubble/Avatar/getAvatarColor.ts
index 49816897..f52d6bba 100644
--- a/Source/Canvas/shapes/ChatBubble/Avatar/getAvatarColor.ts
+++ b/Source/Canvas/shapes/ChatBubble/Avatar/getAvatarColor.ts
@@ -1,7 +1,16 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-const AVATAR_COLORS = ['#6366f1', '#8b5cf6', '#ec4899', '#f43f5e', '#f97316', '#0ea5e9', '#10b981', '#14b8a6'];
+const AVATAR_COLORS = [
+    '#4f46e5',
+    '#7c3aed',
+    '#be185d',
+    '#be123c',
+    '#c2410c',
+    '#0369a1',
+    '#047857',
+    '#0f766e',
+];
 
 /**
  * Computes a deterministic avatar background color from a stable seed - the person's identifier -
diff --git a/Source/Canvas/shapes/ChatBubble/Chat.css b/Source/Canvas/shapes/ChatBubble/Chat.css
index 24a53926..5d3d145b 100644
--- a/Source/Canvas/shapes/ChatBubble/Chat.css
+++ b/Source/Canvas/shapes/ChatBubble/Chat.css
@@ -112,7 +112,7 @@
 
 .chat-bubble-time {
     font-size: 10px;
-    color: rgba(255, 255, 255, 0.3);
+    color: rgba(255, 255, 255, 0.65);
     padding-left: 2px;
 }
 
diff --git a/Source/Canvas/shapes/ChatBubble/ChatBubble.stories.tsx b/Source/Canvas/shapes/ChatBubble/ChatBubble.stories.tsx
new file mode 100644
index 00000000..a7632091
--- /dev/null
+++ b/Source/Canvas/shapes/ChatBubble/ChatBubble.stories.tsx
@@ -0,0 +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 type { Meta, StoryObj } from '@storybook/react';
+import { expect, userEvent, within } from 'storybook/test';
+import { ChatBubble } from './ChatBubble';
+
+const meta = {
+    title: 'Canvas/ChatBubble',
+    component: ChatBubble,
+    args: {
+        authorId: 'ada-lovelace',
+        authorName: 'Ada Lovelace',
+        hasAvatar: false,
+        previewMessage: 'The event model is ready for review.',
+        previewTimestamp: new Date(),
+        replyCount: 4,
+    },
+    parameters: { layout: 'centered' },
+} satisfies Meta<typeof ChatBubble>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Preview: Story = {
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await userEvent.hover(canvas.getByText('AL'));
+        await expect(
+            canvas.getByText('The event model is ready for review.'),
+        ).toBeTruthy();
+    },
+};
+
+export const SelectedAndThinking: Story = {
+    args: {
+        selected: true,
+        showThinkingBubbles: true,
+        suppressPreview: true,
+    },
+};
diff --git a/Source/Canvas/shapes/ChatBubble/ChatKit.stories.tsx b/Source/Canvas/shapes/ChatBubble/ChatKit.stories.tsx
new file mode 100644
index 00000000..2caf75c9
--- /dev/null
+++ b/Source/Canvas/shapes/ChatBubble/ChatKit.stories.tsx
@@ -0,0 +1,205 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { useRef } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Guid } from '@cratis/fundamentals';
+import { fn } from 'storybook/test';
+import { AnchoredOverlay } from './AnchoredOverlay';
+import { PersonAvatarCircle } from './Avatar/PersonAvatarCircle';
+import { ChatAuthorKind } from './ChatAuthorKind';
+import { ChatComposer } from './ChatComposer';
+import type { ChatMessage } from './ChatMessage';
+import { ChatMessageBubble } from './ChatMessageBubble';
+import type { ChatMessageReaction } from './ChatMessageReaction';
+import { EmojiPicker } from './Emoji/EmojiPicker';
+import { FailedReply } from './FailedReply';
+import { MentionSuggestions } from './Mentions/MentionSuggestions';
+import type { MentionCandidate } from './Mentions/MentionCandidate';
+import { MessageReactions } from './MessageReactions';
+import { ReactionPicker } from './ReactionPicker';
+import { TypingIndicator } from './TypingIndicator';
+
+const meta = {
+    title: 'Canvas/ChatKit',
+    parameters: { layout: 'centered' },
+    decorators: [
+        (Story) => (
+            <div
+                style={{
+                    padding: '1.5rem',
+                    borderRadius: '0.75rem',
+                    background: '#15151f',
+                    color: 'rgba(255, 255, 255, 0.9)',
+                }}
+            >
+                <Story />
+            </div>
+        ),
+    ],
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+const viewerId = Guid.create();
+const authorId = Guid.create();
+const messageId = Guid.create();
+const reactions: ChatMessageReaction[] = [
+    {
+        emoji: '👍',
+        users: [
+            { id: viewerId, name: 'You', reactionId: Guid.create() },
+            { id: Guid.create(), name: 'Grace', reactionId: Guid.create() },
+        ],
+    },
+    {
+        emoji: '🎉',
+        users: [{ id: Guid.create(), name: 'Linus', reactionId: Guid.create() }],
+    },
+];
+const message: ChatMessage = {
+    id: messageId,
+    authorId,
+    authorName: 'Ada Lovelace',
+    authorInitials: 'AL',
+    hasAvatar: false,
+    authorKind: ChatAuthorKind.User,
+    text: 'The event model is ready for review.',
+    timestamp: new Date(),
+    reactions,
+};
+const candidates: MentionCandidate[] = [
+    {
+        id: authorId.toString(),
+        name: 'Ada Lovelace',
+        hasAvatar: false,
+        kind: ChatAuthorKind.User,
+    },
+    {
+        id: Guid.create().toString(),
+        name: 'Review Agent',
+        hasAvatar: false,
+        kind: ChatAuthorKind.Agent,
+    },
+];
+
+const AnchoredOverlayDemo = () => {
+    const anchorRef = useRef<HTMLButtonElement>(null);
+    return (
+        <div style={{ minWidth: '20rem', minHeight: '8rem', padding: '2rem' }}>
+            <button ref={anchorRef} type='button'>
+                Anchor
+            </button>
+            <AnchoredOverlay anchorRef={anchorRef} open side='right'>
+                <div
+                    role='status'
+                    style={{
+                        padding: '0.75rem',
+                        borderRadius: '0.5rem',
+                        background: '#262637',
+                        color: 'rgba(255, 255, 255, 0.9)',
+                    }}
+                >
+                    Portaled beyond the board boundary
+                </div>
+            </AnchoredOverlay>
+        </div>
+    );
+};
+
+export const Anchored: Story = {
+    render: () => <AnchoredOverlayDemo />,
+};
+
+export const Avatar: Story = {
+    render: () => (
+        <PersonAvatarCircle
+            userId={authorId}
+            name='Ada Lovelace'
+            hasAvatar={false}
+            size={56}
+        />
+    ),
+};
+
+export const Composer: Story = {
+    render: () => <ChatComposer mentionCandidates={candidates} onSend={fn()} />,
+};
+
+export const MessageBubble: Story = {
+    render: () => (
+        <div style={{ width: '24rem' }}>
+            <ChatMessageBubble
+                message={message}
+                showAuthor
+                showTimestamp
+                formattedTimestamp='just now'
+                currentUserId={viewerId}
+                onReact={fn()}
+                onQuickReply={fn()}
+            />
+        </div>
+    ),
+};
+
+export const FailedTurn: Story = {
+    render: () => (
+        <FailedReply
+            message={{
+                ...message,
+                text: '',
+                failureDetail: 'The review service timed out.',
+            }}
+            buildReportUrl={({ commentId }) =>
+                `https://example.invalid/report/${commentId}`
+            }
+        />
+    ),
+};
+
+export const Reactions: Story = {
+    render: () => <MessageReactions reactions={reactions} />,
+};
+
+export const QuickReactionPicker: Story = {
+    render: () => (
+        <ReactionPicker
+            ownEmoji='👍'
+            reactions={reactions}
+            onPick={fn()}
+            onDismiss={fn()}
+        />
+    ),
+};
+
+export const AllEmojis: Story = {
+    render: () => <EmojiPicker ownEmoji='👍' onPick={fn()} />,
+};
+
+export const Mentions: Story = {
+    render: () => (
+        <MentionSuggestions
+            candidates={candidates}
+            highlightedIndex={0}
+            onSelect={fn()}
+            onHighlight={fn()}
+        />
+    ),
+};
+
+export const Typing: Story = {
+    render: () => (
+        <TypingIndicator
+            authors={[
+                {
+                    id: authorId.toString(),
+                    name: 'Ada Lovelace',
+                    hasAvatar: false,
+                    kind: ChatAuthorKind.User,
+                },
+            ]}
+            label='Ada is typing…'
+        />
+    ),
+};
diff --git a/Source/Canvas/shapes/ChatBubble/Mentions/MentionSuggestions.tsx b/Source/Canvas/shapes/ChatBubble/Mentions/MentionSuggestions.tsx
index 35fed80c..8a752776 100644
--- a/Source/Canvas/shapes/ChatBubble/Mentions/MentionSuggestions.tsx
+++ b/Source/Canvas/shapes/ChatBubble/Mentions/MentionSuggestions.tsx
@@ -22,6 +22,9 @@ export interface MentionSuggestionsProps {
     /** Invoked when the pointer moves onto a candidate, so hover and keyboard stay in step. */
     onHighlight: (index: number) => void;
 
+    /** Accessible name for the suggestion list. Defaults to `'Mention suggestions'`. */
+    'aria-label'?: string;
+
     /** Builds the avatar image URL. Omit to always show initials — see {@link PersonAvatarCircleProps}. */
     buildAvatarUrl?: (params: BuildAvatarUrlParams) => string;
 }
@@ -36,8 +39,9 @@ export const MentionSuggestions = ({
     onSelect,
     onHighlight,
     buildAvatarUrl,
+    'aria-label': ariaLabel = 'Mention suggestions',
 }: MentionSuggestionsProps) => (
-    <div className='mention-suggestions' role='listbox'>
+    <div className='mention-suggestions' role='listbox' aria-label={ariaLabel}>
         {candidates.map((candidate, index) => (
             <button
                 key={candidate.id}
diff --git a/Source/Canvas/shapes/ChatBubble/ReactionPicker.css b/Source/Canvas/shapes/ChatBubble/ReactionPicker.css
index e5979fec..aa5e0aa1 100644
--- a/Source/Canvas/shapes/ChatBubble/ReactionPicker.css
+++ b/Source/Canvas/shapes/ChatBubble/ReactionPicker.css
@@ -23,6 +23,10 @@
     padding: 4px;
 }
 
+.reaction-picker__options {
+    display: contents;
+}
+
 .reaction-picker__item {
     display: flex;
     align-items: center;
diff --git a/Source/Canvas/shapes/ChatBubble/ReactionPicker.tsx b/Source/Canvas/shapes/ChatBubble/ReactionPicker.tsx
index 5d8dec50..17527104 100644
--- a/Source/Canvas/shapes/ChatBubble/ReactionPicker.tsx
+++ b/Source/Canvas/shapes/ChatBubble/ReactionPicker.tsx
@@ -112,24 +112,26 @@ export const ReactionPicker = ({
 
     return (
         <div ref={rootRef} className='reaction-picker'>
-            <div
-                className='reaction-picker__quick'
-                role='listbox'
-                aria-label={labels?.pickEmoji ?? 'Pick an emoji'}
-            >
-                {quickEmojis.map((emoji) => (
-                    <button
-                        key={emoji}
-                        type='button'
-                        role='option'
-                        aria-selected={emoji === ownEmoji}
-                        className={`reaction-picker__item${emoji === ownEmoji ? ' reaction-picker__item--selected' : ''}`}
-                        onMouseDown={(event) => event.preventDefault()}
-                        onClick={() => pick(emoji)}
-                    >
-                        {emoji}
-                    </button>
-                ))}
+            <div className='reaction-picker__quick'>
+                <div
+                    role='listbox'
+                    aria-label={labels?.pickEmoji ?? 'Pick an emoji'}
+                    className='reaction-picker__options'
+                >
+                    {quickEmojis.map((emoji) => (
+                        <button
+                            key={emoji}
+                            type='button'
+                            role='option'
+                            aria-selected={emoji === ownEmoji}
+                            className={`reaction-picker__item${emoji === ownEmoji ? ' reaction-picker__item--selected' : ''}`}
+                            onMouseDown={(event) => event.preventDefault()}
+                            onClick={() => pick(emoji)}
+                        >
+                            {emoji}
+                        </button>
+                    ))}
+                </div>
                 <button
                     type='button'
                     className={`reaction-picker__more${showingAll ? ' reaction-picker__more--open' : ''}`}
diff --git a/Source/CommandDialog/CommandDialog.stories.tsx b/Source/CommandDialog/CommandDialog.stories.tsx
index d506df45..0ec79fa8 100644
--- a/Source/CommandDialog/CommandDialog.stories.tsx
+++ b/Source/CommandDialog/CommandDialog.stories.tsx
@@ -2,7 +2,7 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import React, { useState } from 'react';
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { CommandDialog } from './CommandDialog';
 import { Command, CommandResult, CommandValidator } from '@cratis/arc/commands';
 import { PropertyDescriptor } from '@cratis/arc/reflection';
@@ -10,6 +10,7 @@ import { InputTextField, NumberField, TextAreaField } from '../CommandForm/field
 import { DialogResult, useDialog, useDialogContext } from '@cratis/arc.react/dialogs';
 import { DialogInitialFocus } from '../Dialogs/DialogInitialFocus';
 import '@cratis/arc/validation';
+import { expect, userEvent, within } from 'storybook/test';
 
 const meta: Meta<typeof CommandDialog> = {
     title: 'CommandDialog/CommandDialog',
@@ -19,6 +20,15 @@ const meta: Meta<typeof CommandDialog> = {
 export default meta;
 type Story = StoryObj<typeof CommandDialog>;
 
+const openCommandDialog = async ({ canvasElement }: { canvasElement: HTMLElement }) => {
+    const canvas = within(canvasElement);
+    const dialog = within(document.body).queryByRole('dialog');
+    if (!dialog) {
+        await userEvent.click(canvas.getAllByRole('button')[0]);
+    }
+    await expect(await within(document.body).findByRole('dialog')).toBeTruthy();
+};
+
 class UpdateUserCommandValidator extends CommandValidator {
     constructor() {
         super();
@@ -130,6 +140,7 @@ class UpdateUserCommandWithServer extends Command<object> {
 }
 
 export const Default: Story = {
+    play: openCommandDialog,
     render: () => {
         const [result, setResult] = useState<string>('');
 
@@ -179,6 +190,7 @@ export const Default: Story = {
 };
 
 export const WithServerValidation: Story = {
+    play: openCommandDialog,
     render: () => {
         const [visible, setVisible] = useState(true);
         const [result, setResult] = useState<string>('');
@@ -224,10 +236,12 @@ export const WithServerValidation: Story = {
                     onCancel={() => setVisible(false)}
                     onFieldChange={async (command) => {
                         const validationResult = await command.validate();
-                        if (!validationResult.isValid) {
-                            setValidationErrors(validationResult.validationResults.map(v => v.message));
-                        } else {
+                        if (validationResult.isValid) {
                             setValidationErrors([]);
+                        } else {
+                            setValidationErrors(
+                                validationResult.validationResults.map((v) => v.message),
+                            );
                         }
                     }}
                 >
@@ -241,6 +255,7 @@ export const WithServerValidation: Story = {
 };
 
 export const WithInitialValues: Story = {
+    play: openCommandDialog,
     render: () => {
         const [visible, setVisible] = useState(false);
         const [selectedUser, setSelectedUser] = useState<{ name: string; email: string; age: number } | undefined>(undefined);
@@ -297,6 +312,7 @@ export const WithInitialValues: Story = {
 };
 
 export const WithCustomValidation: Story = {
+    play: openCommandDialog,
     render: () => {
         const [visible, setVisible] = useState(true);
         const [result, setResult] = useState<string>('');
@@ -357,6 +373,7 @@ export const WithCustomValidation: Story = {
 };
 
 export const ValidationOnBlur: Story = {
+    play: openCommandDialog,
     render: () => {
         const [visible, setVisible] = useState(true);
 
@@ -386,6 +403,7 @@ export const ValidationOnBlur: Story = {
 };
 
 export const ValidationOnChange: Story = {
+    play: openCommandDialog,
     render: () => {
         const [visible, setVisible] = useState(true);
 
@@ -415,6 +433,7 @@ export const ValidationOnChange: Story = {
 };
 
 export const ValidateOnInit: Story = {
+    play: openCommandDialog,
     render: () => {
         const [visible, setVisible] = useState(true);
 
@@ -445,6 +464,7 @@ export const ValidateOnInit: Story = {
 };
 
 export const ValidateAllFieldsOnChange: Story = {
+    play: openCommandDialog,
     render: () => {
         const [visible, setVisible] = useState(true);
 
@@ -475,6 +495,7 @@ export const ValidateAllFieldsOnChange: Story = {
 };
 
 export const BeforeExecute: Story = {
+    play: openCommandDialog,
     render: () => {
         const [visible, setVisible] = useState(true);
         const [preprocessedData, setPreprocessedData] = useState<string>('');
@@ -519,6 +540,7 @@ export const BeforeExecute: Story = {
 };
 
 export const WithIcons: Story = {
+    play: openCommandDialog,
     render: () => {
         const [visible, setVisible] = useState(true);
 
@@ -612,6 +634,7 @@ class UpdateProfileCommand extends Command<object> {
 }
 
 export const MultiColumnLayout: Story = {
+    play: openCommandDialog,
     render: () => {
         const [visible, setVisible] = useState(true);
 
@@ -649,6 +672,7 @@ export const MultiColumnLayout: Story = {
 };
 
 export const MixedChildren: Story = {
+    play: openCommandDialog,
     render: () => {
         const [visible, setVisible] = useState(true);
 
@@ -684,6 +708,7 @@ export const MixedChildren: Story = {
 };
 
 export const WithBusyState: Story = {
+    play: openCommandDialog,
     render: () => {
         const [visible, setVisible] = useState(true);
         const [result, setResult] = useState<string>('');
@@ -727,6 +752,7 @@ export const WithBusyState: Story = {
 
 /** Demonstrates typed response handling with success and failure callbacks. */
 export const WithResponseTypeAndCallbacks: Story = {
+    play: openCommandDialog,
     render: () => {
         const [visible, setVisible] = useState(true);
         const [result, setResult] = useState<string>('');
@@ -842,6 +868,7 @@ export const WithResponseTypeAndCallbacks: Story = {
  * close (X), `Escape`, or the confirm wiring that runs the command.
  */
 export const DestructiveCommandFocusesDismiss: Story = {
+    play: openCommandDialog,
     render: () => {
         const [result, setResult] = useState<string>('');
 
diff --git a/Source/CommandDialog/StepperCommandDialog.stories.tsx b/Source/CommandDialog/StepperCommandDialog.stories.tsx
index d46c0634..c08fefae 100644
--- a/Source/CommandDialog/StepperCommandDialog.stories.tsx
+++ b/Source/CommandDialog/StepperCommandDialog.stories.tsx
@@ -10,6 +10,7 @@ import { InputTextField, NumberField, TextAreaField } from '../CommandForm/field
 import { DialogResult, useDialog, useDialogContext } from '@cratis/arc.react/dialogs';
 import { StepperPanel } from './StepperPanel';
 import '@cratis/arc/validation';
+import { expect, userEvent, within } from 'storybook/test';
 
 const meta: Meta<typeof StepperCommandDialog> = {
     title: 'CommandDialog/StepperCommandDialog',
@@ -19,6 +20,15 @@ const meta: Meta<typeof StepperCommandDialog> = {
 export default meta;
 type Story = StoryObj<typeof StepperCommandDialog>;
 
+const openStepperDialog = async ({ canvasElement }: { canvasElement: HTMLElement }) => {
+    const canvas = within(canvasElement);
+    const dialog = within(document.body).queryByRole('dialog');
+    if (!dialog) {
+        await userEvent.click(canvas.getAllByRole('button')[0]);
+    }
+    await expect(await within(document.body).findByRole('dialog')).toBeTruthy();
+};
+
 class CreateProjectValidator extends CommandValidator<CreateProjectCommand> {
     constructor() {
         super();
@@ -74,6 +84,7 @@ class SlowCreateProjectCommand extends CreateProjectCommand {
 }
 
 export const Default: Story = {
+    play: openStepperDialog,
     render: () => {
         const [result, setResult] = useState<string>('');
 
@@ -147,6 +158,7 @@ export const Default: Story = {
 };
 
 export const ThreeSteps: Story = {
+    play: openStepperDialog,
     render: () => {
         const [visible, setVisible] = useState(false);
         const [result, setResult] = useState<string>('');
@@ -213,6 +225,7 @@ export const ThreeSteps: Story = {
 };
 
 export const WithValidationIndicators: Story = {
+    play: openStepperDialog,
     render: () => {
         const [visible, setVisible] = useState(true);
 
@@ -269,6 +282,7 @@ export const WithValidationIndicators: Story = {
 };
 
 export const WithBusyState: Story = {
+    play: openStepperDialog,
     render: () => {
         const [visible, setVisible] = useState(false);
 
@@ -324,6 +338,7 @@ export const WithBusyState: Story = {
 
 /** Demonstrates typed response handling with success and failure callbacks. */
 export const WithResponseTypeAndCallbacks: Story = {
+    play: openStepperDialog,
     render: () => {
         const [visible, setVisible] = useState(true);
         const [result, setResult] = useState<string>('');
@@ -459,6 +474,7 @@ export const WithResponseTypeAndCallbacks: Story = {
  * of the dialog: the footer Cancel greys out and the header X disappears until the command returns.
  */
 export const WithFooterCancel: Story = {
+    play: openStepperDialog,
     render: () => {
         const [visible, setVisible] = useState(false);
         const [outcome, setOutcome] = useState('');
@@ -537,6 +553,7 @@ export const WithFooterCancel: Story = {
  * wizard: Submit shows on "Details" instead of a Next button that leads to an empty step.
  */
 export const ConditionalSteps: Story = {
+    play: openStepperDialog,
     render: () => {
         const [visible, setVisible] = useState(true);
         const [includeBudgetStep, setIncludeBudgetStep] = useState(false);
diff --git a/Source/CommandForm/fields/Fields.stories.tsx b/Source/CommandForm/fields/Fields.stories.tsx
index 3d035b68..30eed60d 100644
--- a/Source/CommandForm/fields/Fields.stories.tsx
+++ b/Source/CommandForm/fields/Fields.stories.tsx
@@ -196,7 +196,7 @@ export const AllFields: Story = {
                     }}
                 >
                     <StorySection>
-                        <h3>Text Inputs</h3>
+                        <h2>Text Inputs</h2>
 
                         <InputTextField<FormFieldsCommand>
                             value={(c) => c.textInput}
@@ -261,7 +261,7 @@ export const AllFields: Story = {
                     <StoryDivider />
 
                     <StorySection>
-                        <h3>Number Input</h3>
+                        <h2>Number Input</h2>
 
                         <NumberField<FormFieldsCommand>
                             value={(c) => c.numberInput}
@@ -289,7 +289,7 @@ export const AllFields: Story = {
                     <StoryDivider />
 
                     <StorySection>
-                        <h3>Text Area</h3>
+                        <h2>Text Area</h2>
 
                         <TextAreaField<FormFieldsCommand>
                             value={(c) => c.textArea}
@@ -303,7 +303,7 @@ export const AllFields: Story = {
                     <StoryDivider />
 
                     <StorySection>
-                        <h3>Dropdown</h3>
+                        <h2>Dropdown</h2>
 
                         <DropdownField<FormFieldsCommand>
                             value={(c) => c.dropdown}
@@ -331,7 +331,7 @@ export const AllFields: Story = {
                     <StoryDivider />
 
                     <StorySection>
-                        <h3>Calendar</h3>
+                        <h2>Calendar</h2>
 
                         <CalendarField<FormFieldsCommand>
                             value={(c) => c.calendarDate}
@@ -345,7 +345,7 @@ export const AllFields: Story = {
                     <StoryDivider />
 
                     <StorySection>
-                        <h3>Color Picker</h3>
+                        <h2>Color Picker</h2>
 
                         <ColorPickerField<FormFieldsCommand>
                             value={(c) => c.color}
@@ -357,7 +357,7 @@ export const AllFields: Story = {
                     <StoryDivider />
 
                     <StorySection>
-                        <h3>MultiSelect</h3>
+                        <h2>MultiSelect</h2>
 
                         <MultiSelectField<FormFieldsCommand>
                             value={(c) => c.multiSelect}
@@ -375,7 +375,7 @@ export const AllFields: Story = {
                     <StoryDivider />
 
                     <StorySection>
-                        <h3>Chips</h3>
+                        <h2>Chips</h2>
 
                         <ChipsField<FormFieldsCommand>
                             value={(c) => c.chips}
@@ -389,7 +389,7 @@ export const AllFields: Story = {
                     <StoryDivider />
 
                     <StorySection>
-                        <h3>Slider</h3>
+                        <h2>Slider</h2>
 
                         <SliderField<FormFieldsCommand>
                             value={(c) => c.slider}
@@ -404,7 +404,7 @@ export const AllFields: Story = {
                     <StoryDivider />
 
                     <StorySection>
-                        <h3>Checkbox</h3>
+                        <h2>Checkbox</h2>
 
                         <CheckboxField<FormFieldsCommand>
                             value={(c) => c.checkbox}
@@ -415,7 +415,7 @@ export const AllFields: Story = {
                     <StoryDivider />
 
                     <StorySection>
-                        <h3>Radio Button</h3>
+                        <h2>Radio Button</h2>
 
                         <RadioButtonField<FormFieldsCommand>
                             name='radio-button-options'
@@ -440,7 +440,7 @@ export const AllFields: Story = {
                     <StoryDivider />
 
                     <StorySection>
-                        <h3>Radio Group</h3>
+                        <h2>Radio Group</h2>
 
                         <RadioGroupField<FormFieldsCommand>
                             value={(c) => c.radioGroup}
diff --git a/Source/Common/ActionMenubar.stories.tsx b/Source/Common/ActionMenubar.stories.tsx
new file mode 100644
index 00000000..93a30781
--- /dev/null
+++ b/Source/Common/ActionMenubar.stories.tsx
@@ -0,0 +1,62 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { FaFloppyDisk, FaPlus, FaTrash } from 'react-icons/fa6';
+import { expect, fn, userEvent, within } from 'storybook/test';
+import { ActionMenubar } from './ActionMenubar';
+
+const meta = {
+    title: 'Common/ActionMenubar',
+    component: ActionMenubar,
+    parameters: { layout: 'centered' },
+    args: {
+        'aria-label': 'Document actions',
+        model: [
+            { label: 'New', icon: <FaPlus />, command: fn() },
+            { label: 'Save', icon: <FaFloppyDisk />, command: fn() },
+            { label: 'Delete', icon: <FaTrash />, severity: 'danger', command: fn() },
+        ],
+    },
+} satisfies Meta<typeof ActionMenubar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    play: async ({ canvasElement, args }) => {
+        await userEvent.click(within(canvasElement).getByRole('button', { name: 'New' }));
+        await expect(args.model[0].command).toHaveBeenCalledOnce();
+    },
+};
+
+export const DisabledAction: Story = {
+    play: async ({ canvasElement, args }) => {
+        const save = within(canvasElement).getByRole('button', { name: 'Save' });
+        await expect(save).toBeDisabled();
+        await userEvent.click(save);
+        await expect(args.model[1].command).not.toHaveBeenCalled();
+    },
+    args: {
+        model: [
+            { label: 'New', icon: <FaPlus />, command: fn() },
+            { label: 'Save', icon: <FaFloppyDisk />, disabled: true, command: fn() },
+            { label: 'Delete', icon: <FaTrash />, severity: 'danger', command: fn() },
+        ],
+    },
+};
+
+export const CustomParts: Story = {
+    play: async ({ canvasElement, args }) => {
+        await userEvent.click(
+            within(canvasElement).getByRole('button', { name: 'Delete' }),
+        );
+        await expect(args.model[2].command).toHaveBeenCalledOnce();
+    },
+    args: {
+        pt: {
+            root: { style: { outlineOffset: '0.2rem' } },
+            label: { style: { fontWeight: 700 } },
+        },
+    },
+};
diff --git a/Source/Common/CratisComponentsProvider.stories.tsx b/Source/Common/CratisComponentsProvider.stories.tsx
new file mode 100644
index 00000000..3d3a3c51
--- /dev/null
+++ b/Source/Common/CratisComponentsProvider.stories.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 type { Meta, StoryObj } from '@storybook/react';
+import { expect, within } from 'storybook/test';
+import {
+    CratisComponentsProvider,
+    useCratisComponentsConfig,
+} from './CratisComponentsProvider';
+
+const MessageProbe = () => {
+    const config = useCratisComponentsConfig();
+    return (
+        <dl>
+            <dt>Locale</dt>
+            <dd>{config.locale}</dd>
+            <dt>Paginator next</dt>
+            <dd>{config.messages?.paginator?.next}</dd>
+            <dt>Open calendar</dt>
+            <dd>{config.messages?.datePicker?.openCalendar}</dd>
+        </dl>
+    );
+};
+
+const meta = {
+    title: 'Common/CratisComponentsProvider',
+    component: CratisComponentsProvider,
+    args: {
+        value: {
+            locale: 'nb-NO',
+            messages: {
+                paginator: { next: 'Neste side' },
+                datePicker: { openCalendar: 'Åpne kalender' },
+            },
+        },
+        children: <MessageProbe />,
+    },
+    parameters: { layout: 'centered' },
+} satisfies Meta<typeof CratisComponentsProvider>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const LocalizedMessages: Story = {
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await expect(canvas.getByText('nb-NO')).toBeTruthy();
+        await expect(canvas.getByText('Neste side')).toBeTruthy();
+        await expect(canvas.getByText('Åpne kalender')).toBeTruthy();
+    },
+};
diff --git a/Source/Common/DatePickerInput.stories.tsx b/Source/Common/DatePickerInput.stories.tsx
index 01d263c8..64d28e4c 100644
--- a/Source/Common/DatePickerInput.stories.tsx
+++ b/Source/Common/DatePickerInput.stories.tsx
@@ -3,12 +3,13 @@
 
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { expect, userEvent, within } from 'storybook/test';
+import { expect, fn, userEvent, within } from 'storybook/test';
 import { DatePickerInput } from './DatePickerInput';
 
 const meta = {
-    title: 'Common/DatePickerInput visual parity',
+    title: 'Common/DatePickerInput',
     component: DatePickerInput,
+    args: { value: null, onChange: fn() },
     parameters: { layout: 'padded' },
     tags: ['autodocs'],
 } satisfies Meta<typeof DatePickerInput>;
@@ -55,7 +56,7 @@ export const OpenCalendar: Story = {
     render: () => <ControlledPicker initialValue={new Date(2024, 5, 15)} />,
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);
-        await userEvent.click(canvas.getByRole('button', { name: 'Open calendar' }));
+        await userEvent.click(canvas.getByRole('button', { name: /open calendar/i }));
         await expect(within(document.body).getByRole('dialog')).toBeTruthy();
     },
 };
diff --git a/Source/Common/Tooltip.stories.tsx b/Source/Common/Tooltip.stories.tsx
index 84e17876..2b9a11c2 100644
--- a/Source/Common/Tooltip.stories.tsx
+++ b/Source/Common/Tooltip.stories.tsx
@@ -12,7 +12,11 @@ const meta = {
     args: {
         content: 'A helpful hint shown on hover',
         position: 'top',
-        children: <span style={{ padding: '0.5rem 1rem', border: '1px solid var(--cratis-surface-border)', borderRadius: '0.25rem' }}>Hover me</span>,
+        children: (
+            <button type='button' style={{ padding: '0.5rem 1rem' }}>
+                Hover me
+            </button>
+        ),
     },
 } satisfies Meta<typeof Tooltip>;
 
@@ -26,11 +30,15 @@ export const Playground: Story = {};
 export const Positions: Story = {
     render: () => (
         <div style={{ display: 'flex', gap: '2rem', padding: '4rem' }}>
-            {(['top', 'right', 'bottom', 'left'] as const).map(position => (
-                <Tooltip key={position} content={`Position: ${position}`} position={position}>
-                    <span style={{ padding: '0.5rem 1rem', border: '1px solid var(--cratis-surface-border)', borderRadius: '0.25rem' }}>
+            {(['top', 'right', 'bottom', 'left'] as const).map((position) => (
+                <Tooltip
+                    key={position}
+                    content={`Position: ${position}`}
+                    position={position}
+                >
+                    <button type='button' style={{ padding: '0.5rem 1rem' }}>
                         {position}
-                    </span>
+                    </button>
                 </Tooltip>
             ))}
         </div>
diff --git a/Source/Common/Tooltip.tsx b/Source/Common/Tooltip.tsx
index 9ca18835..13db8189 100644
--- a/Source/Common/Tooltip.tsx
+++ b/Source/Common/Tooltip.tsx
@@ -2,14 +2,18 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import { cloneElement, type DOMAttributes, type ReactElement } from 'react';
-import { Pressable } from 'react-aria-components/Pressable';
-import { Tooltip as AriaTooltip, TooltipTrigger } from 'react-aria-components/Tooltip';
+import {
+    Focusable,
+    Tooltip as AriaTooltip,
+    TooltipTrigger,
+} from 'react-aria-components/Tooltip';
 
 /** Position of the tooltip relative to its trigger element. */
 export type TooltipPosition = 'top' | 'right' | 'bottom' | 'left';
 
 interface TooltipTriggerElementProps {
     className?: string;
+    disabled?: boolean;
     'data-cratis-part'?: string;
     'data-cratis-tooltip-trigger'?: string;
 }
@@ -48,9 +52,9 @@ export const Tooltip = ({
 
     return (
         <TooltipTrigger delay={350} closeDelay={100}>
-            <Pressable>
+            <Focusable isDisabled={trigger.props.disabled}>
                 {trigger as unknown as ReactElement<DOMAttributes<HTMLElement>, string>}
-            </Pressable>
+            </Focusable>
             <AriaTooltip
                 placement={position}
                 offset={8}
diff --git a/Source/DataTables/ColumnFilterMenu.stories.tsx b/Source/DataTables/ColumnFilterMenu.stories.tsx
new file mode 100644
index 00000000..62516da0
--- /dev/null
+++ b/Source/DataTables/ColumnFilterMenu.stories.tsx
@@ -0,0 +1,62 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { expect, fn, userEvent, within } from 'storybook/test';
+import { ColumnFilterMenu } from './ColumnFilterMenu';
+
+const meta = {
+    title: 'DataTables/ColumnFilterMenu',
+    component: ColumnFilterMenu,
+    args: {
+        field: 'name',
+        dataType: 'text',
+        placeholder: 'Filter value',
+        onApply: fn(),
+        onClear: fn(),
+    },
+    parameters: { layout: 'centered' },
+} satisfies Meta<typeof ColumnFilterMenu>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const openMenu = async ({ canvasElement }: { canvasElement: HTMLElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole('button', { name: /filter by/i }));
+    await expect(await within(document.body).findByRole('dialog')).toBeTruthy();
+};
+
+export const Text: Story = { play: openMenu };
+export const Numeric: Story = {
+    args: { field: 'amount', dataType: 'numeric' },
+    play: openMenu,
+};
+export const DateValue: Story = {
+    args: { field: 'createdAt', dataType: 'date' },
+    play: openMenu,
+};
+export const Boolean: Story = {
+    args: { field: 'active', dataType: 'boolean' },
+    play: openMenu,
+};
+
+export const LocalizedAndCustomized: Story = {
+    args: {
+        labels: {
+            valueAriaLabel: () => 'Filterverdi',
+            apply: 'Bruk',
+            clear: 'Tøm',
+        },
+        pt: {
+            menu: { style: { boxShadow: 'var(--cratis-shadow-overlay)' } },
+        },
+    },
+    play: async (context) => {
+        await openMenu(context);
+        const body = within(document.body);
+        await expect(body.getByLabelText('Filterverdi')).toBeTruthy();
+        await expect(body.getByRole('button', { name: 'Bruk' })).toBeTruthy();
+        await expect(body.getByRole('button', { name: 'Tøm' })).toBeTruthy();
+    },
+};
diff --git a/Source/DataTables/DataTableCore.css b/Source/DataTables/DataTableCore.css
index 903c125a..948221d5 100644
--- a/Source/DataTables/DataTableCore.css
+++ b/Source/DataTables/DataTableCore.css
@@ -1,6 +1,18 @@
 /* Copyright (c) Cratis. All rights reserved. */
 /* Licensed under the MIT license. See LICENSE file in the project root for full license information. */
 
+.cratis-datatable__sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
+
 .cratis-datatable {
     width: 100%;
     color: var(--cratis-text-color);
diff --git a/Source/DataTables/DataTableCore.stories.tsx b/Source/DataTables/DataTableCore.stories.tsx
index 2fd09102..386ec456 100644
--- a/Source/DataTables/DataTableCore.stories.tsx
+++ b/Source/DataTables/DataTableCore.stories.tsx
@@ -19,8 +19,9 @@ const people: Person[] = [
 ];
 
 const meta = {
-    title: 'DataTables/DataTableCore visual parity',
+    title: 'DataTables/DataTableCore',
     component: DataTableCore,
+    args: { data: [], emptyMessage: 'No people' },
     parameters: { layout: 'padded' },
     tags: ['autodocs'],
 } satisfies Meta<typeof DataTableCore>;
@@ -37,7 +38,7 @@ const LocalTable = () => {
             emptyMessage='No people'
             selectionMode='single'
             selection={selection}
-            onSelectionChange={(event) => setSelection(event.value)}
+            onSelectionChange={(event) => setSelection(event.value ?? undefined)}
             globalFilterFields={['name', 'role']}
             globalSearchPlaceholder='Search people'
             globalSearchAriaLabel='Search people'
diff --git a/Source/DataTables/DataTableCore.tsx b/Source/DataTables/DataTableCore.tsx
index f2c1b4d9..c32d7a03 100644
--- a/Source/DataTables/DataTableCore.tsx
+++ b/Source/DataTables/DataTableCore.tsx
@@ -448,6 +448,11 @@ export const DataTableCore = <TData extends object>({
                                         {...pt?.headerCell}
                                         key={index}
                                         scope='col'
+                                        aria-label={
+                                            column.props.selectionMode
+                                                ? resolvedSelectionAriaLabel
+                                                : undefined
+                                        }
                                         aria-sort={ariaSort}
                                         style={{
                                             ...pt?.headerCell?.style,
@@ -465,6 +470,11 @@ export const DataTableCore = <TData extends object>({
                                             className='cratis-datatable-header-cell'
                                             data-cratis-part='header-content'
                                         >
+                                            {column.props.selectionMode && (
+                                                <span className='cratis-datatable__sr-only'>
+                                                    {resolvedSelectionAriaLabel}
+                                                </span>
+                                            )}
                                             {column.props.sortable &&
                                             column.props.field ? (
                                                 <button
diff --git a/Source/DataTables/DataTableForObservableQuery.stories.tsx b/Source/DataTables/DataTableForObservableQuery.stories.tsx
index 80c3a698..5aff9af5 100644
--- a/Source/DataTables/DataTableForObservableQuery.stories.tsx
+++ b/Source/DataTables/DataTableForObservableQuery.stories.tsx
@@ -8,6 +8,7 @@ import { Column } from './Column';
 import { Tag, type TagSeverity } from '../Display/Tag';
 import { ObservableQueryFor, QueryResult, ObservableQuerySubscription } from '@cratis/arc/queries';
 import type { DataTableSelectionChangeEvent } from './DataTableSelectionChangeEvent';
+import { expect, within } from 'storybook/test';
 
 const meta: Meta<typeof DataTableForObservableQuery> = {
     title: 'DataTables/DataTableForObservableQuery',
@@ -64,6 +65,49 @@ class TasksQuery extends ObservableQueryFor<Task, object> {
     }
 }
 
+class LiveTasksQuery extends TasksQuery {
+    override subscribe(
+        callback: (result: QueryResult<Task>) => void,
+    ): ObservableQuerySubscription<Task> {
+        const publish = (data: Task[]) =>
+            callback({
+                data,
+                paging: {
+                    totalItems: data.length,
+                    totalPages: 1,
+                    page: 0,
+                    size: data.length,
+                },
+                isSuccess: true,
+                isAuthorized: true,
+                isValid: true,
+                hasExceptions: false,
+                validationResults: [],
+                exceptionMessages: [],
+                exceptionStackTrace: '',
+            } as unknown as QueryResult<Task>);
+
+        publish(mockTasks);
+        const timer = setTimeout(
+            () =>
+                publish([
+                    ...mockTasks,
+                    {
+                        id: 9,
+                        title: 'Live update received',
+                        status: 'todo',
+                        priority: 'high',
+                        assignee: 'Dana',
+                    },
+                ]),
+            250,
+        );
+        return {
+            unsubscribe: () => clearTimeout(timer),
+        } as unknown as ObservableQuerySubscription<Task>;
+    }
+}
+
 // Status/priority render as theme-aware Tags with a severity, which stay
 // WCAG-legible on both light and dark surfaces (unlike fixed text colors).
 const getStatusSeverity = (status: string): TagSeverity => {
@@ -116,6 +160,28 @@ export const Default: Story = {
     )
 };
 
+export const LiveUpdate: Story = {
+    render: () => (
+        <div className='cratis:p-4'>
+            <p>The query pushes a ninth row after mount.</p>
+            <DataTableForObservableQuery<LiveTasksQuery, Task, object>
+                query={LiveTasksQuery}
+                emptyMessage='No tasks found'
+                dataKey='id'
+            >
+                <Column field='id' header='ID' />
+                <Column field='title' header='Task Title' />
+                <Column field='status' header='Status' />
+            </DataTableForObservableQuery>
+        </div>
+    ),
+    play: async ({ canvasElement }) => {
+        await expect(
+            await within(canvasElement).findByText('Live update received'),
+        ).toBeTruthy();
+    },
+};
+
 export const WithSelection: Story = {
     render: () => {
         const [selectedTask, setSelectedTask] = useState<Task | undefined>();
diff --git a/Source/DataTables/TablePaginator.stories.tsx b/Source/DataTables/TablePaginator.stories.tsx
new file mode 100644
index 00000000..04ad25aa
--- /dev/null
+++ b/Source/DataTables/TablePaginator.stories.tsx
@@ -0,0 +1,53 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from 'storybook/test';
+import { TablePaginator } from './TablePaginator';
+
+const meta = {
+    title: 'DataTables/TablePaginator',
+    component: TablePaginator,
+    args: {
+        page: 1,
+        pageCount: 5,
+        pageSize: 20,
+        totalItems: 93,
+        onPageChange: fn(),
+    },
+    parameters: { layout: 'centered' },
+} satisfies Meta<typeof TablePaginator>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Interactive: Story = {
+    render: (args) => {
+        const [page, setPage] = useState(args.page);
+        return <TablePaginator {...args} page={page} onPageChange={setPage} />;
+    },
+};
+
+export const LocalizedAndCustomized: Story = {
+    args: {
+        ariaLabels: {
+            navigation: 'Sidenavigasjon',
+            first: 'Første side',
+            previous: 'Forrige side',
+            next: 'Neste side',
+            last: 'Siste side',
+        },
+        pt: {
+            root: {
+                style: {
+                    border: '1px solid var(--cratis-surface-border)',
+                    borderRadius: '0.5rem',
+                },
+            },
+            range: { style: { fontWeight: 700 } },
+        },
+    },
+};
diff --git a/Source/Dialogs/BusyIndicatorDialog.stories.tsx b/Source/Dialogs/BusyIndicatorDialog.stories.tsx
index 98dda7cb..f3e84c4b 100644
--- a/Source/Dialogs/BusyIndicatorDialog.stories.tsx
+++ b/Source/Dialogs/BusyIndicatorDialog.stories.tsx
@@ -1,26 +1,44 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import React from 'react';
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { DialogComponents, useBusyIndicator } from '@cratis/arc.react/dialogs';
+import { expect, userEvent, within } from 'storybook/test';
 import { BusyIndicatorDialog } from './BusyIndicatorDialog';
 
-const meta: Meta<typeof BusyIndicatorDialog> = {
-  title: 'Dialogs/BusyIndicatorDialog',
-  component: BusyIndicatorDialog,
-};
+const meta = {
+    title: 'Dialogs/BusyIndicatorDialog',
+    component: BusyIndicatorDialog,
+    args: {
+        title: 'Loading',
+        message: 'Please wait while we process your request...',
+    },
+} satisfies Meta<typeof BusyIndicatorDialog>;
 
 export default meta;
-type Story = StoryObj<typeof BusyIndicatorDialog>;
+type Story = StoryObj<typeof meta>;
+
+const BusyIndicatorTrigger = ({ title, message }: { title: string; message: string }) => {
+    const [showBusy] = useBusyIndicator(title, message);
+    return (
+        <button type='button' onClick={() => showBusy()}>
+            Start operation
+        </button>
+    );
+};
 
 export const Default: Story = {
-  args: {
-    title: 'Loading',
-    message: 'Please wait while we process your request...'
-  },
-  render: (args) => (
-    <div className="storybook-wrapper">
-      <BusyIndicatorDialog {...args} />
-    </div>
-  )
+    render: ({ title, message }) => (
+        <DialogComponents busyIndicator={BusyIndicatorDialog}>
+            <BusyIndicatorTrigger title={title} message={message} />
+        </DialogComponents>
+    ),
+    play: async ({ canvasElement }) => {
+        await userEvent.click(
+            within(canvasElement).getByRole('button', { name: 'Start operation' }),
+        );
+        await expect(
+            await within(document.body).findByRole('dialog', { name: 'Loading' }),
+        ).toBeTruthy();
+    },
 };
diff --git a/Source/Dialogs/ConfirmationDialog.stories.tsx b/Source/Dialogs/ConfirmationDialog.stories.tsx
index 4eeebd80..e749d0c9 100644
--- a/Source/Dialogs/ConfirmationDialog.stories.tsx
+++ b/Source/Dialogs/ConfirmationDialog.stories.tsx
@@ -4,7 +4,12 @@
 import React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import { ConfirmationDialog } from './ConfirmationDialog';
-import { DialogButtons, DialogComponents, useConfirmationDialog } from '@cratis/arc.react/dialogs';
+import {
+    DialogButtons,
+    DialogComponents,
+    useConfirmationDialog,
+} from '@cratis/arc.react/dialogs';
+import { expect, userEvent, within } from 'storybook/test';
 
 const meta: Meta<typeof ConfirmationDialog> = {
     title: 'Dialogs/ConfirmationDialog',
@@ -32,5 +37,11 @@ export const Default: Story = {
                 <DialogWrapper title={args.title} message={args.message} />
             </DialogComponents>
         </div>
-    )
+    ),
+    play: async ({ canvasElement }) => {
+        await userEvent.click(
+            within(canvasElement).getByRole('button', { name: 'Show dialog' }),
+        );
+        await expect(await within(document.body).findByRole('dialog')).toBeTruthy();
+    },
 };
diff --git a/Source/Dialogs/Dialog.stories.tsx b/Source/Dialogs/Dialog.stories.tsx
index 737fb5e9..ec7fdbe6 100644
--- a/Source/Dialogs/Dialog.stories.tsx
+++ b/Source/Dialogs/Dialog.stories.tsx
@@ -13,6 +13,7 @@ import {
     useDialogContext,
 } from '@cratis/arc.react/dialogs';
 import { Button } from '../Common/Button';
+import { expect, userEvent, within } from 'storybook/test';
 
 const meta: Meta<typeof Dialog> = {
     title: 'Dialogs/Dialog',
@@ -65,7 +66,14 @@ const DialogWrapper = ({
     );
 };
 
+const openDialog = async ({ canvasElement }: { canvasElement: HTMLElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole('button', { name: /open/i }));
+    await expect(await within(document.body).findByRole('dialog')).toBeTruthy();
+};
+
 export const OkCancel: Story = {
+    play: openDialog,
     render: () => (
         <DialogWrapper title='Confirm Action' buttons={DialogButtons.OkCancel}>
             <p>Are you sure you want to perform this action?</p>
@@ -74,6 +82,7 @@ export const OkCancel: Story = {
 };
 
 export const YesNo: Story = {
+    play: openDialog,
     render: () => (
         <DialogWrapper title='Delete Item' buttons={DialogButtons.YesNo}>
             <p>Do you want to delete this item? This cannot be undone.</p>
@@ -82,6 +91,7 @@ export const YesNo: Story = {
 };
 
 export const YesNoCancel: Story = {
+    play: openDialog,
     render: () => (
         <DialogWrapper title='Save Changes' buttons={DialogButtons.YesNoCancel}>
             <p>You have unsaved changes. Do you want to save them before closing?</p>
@@ -90,6 +100,7 @@ export const YesNoCancel: Story = {
 };
 
 export const Ok: Story = {
+    play: openDialog,
     render: () => (
         <DialogWrapper title='Information' buttons={DialogButtons.Ok}>
             <p>The operation completed successfully.</p>
@@ -104,6 +115,7 @@ export const Ok: Story = {
  * on the trigger button to see the difference against the stories above.
  */
 export const DestructiveFocusesDismiss: Story = {
+    play: openDialog,
     render: () => (
         <DialogWrapper
             title='Delete personal data?'
@@ -124,6 +136,7 @@ export const DestructiveFocusesDismiss: Story = {
  * content. Use it when the dialog should be read before it is answered.
  */
 export const DestructiveArmsNothing: Story = {
+    play: openDialog,
     render: () => (
         <DialogWrapper
             title='Delete personal data?'
@@ -139,6 +152,7 @@ export const DestructiveArmsNothing: Story = {
 };
 
 export const WithForm: Story = {
+    play: openDialog,
     render: () => {
         type NameResult = { name: string };
 
@@ -197,6 +211,7 @@ export const WithForm: Story = {
 };
 
 export const IsBusy: Story = {
+    play: openDialog,
     render: () => {
         const [busy, setBusy] = useState(false);
 
@@ -237,6 +252,7 @@ export const IsBusy: Story = {
 };
 
 export const CustomButtons: Story = {
+    play: openDialog,
     render: () => {
         type ActionResult = { action: 'draft' | 'publish' };
 
diff --git a/Source/Display/ProgressBar.tsx b/Source/Display/ProgressBar.tsx
index 99a0f0f6..b812de74 100644
--- a/Source/Display/ProgressBar.tsx
+++ b/Source/Display/ProgressBar.tsx
@@ -9,6 +9,10 @@ export interface ProgressBarProps {
     mode?: 'determinate' | 'indeterminate';
     /** Whether to render the percentage label. Defaults to `true` (determinate only). */
     showValue?: boolean;
+    /** Accessible name. Defaults to `'Progress'`; override to describe the operation. */
+    'aria-label'?: string;
+    /** Identifies an external element that labels the progress indicator. */
+    'aria-labelledby'?: string;
     /** Extra class name. */
     className?: string;
 }
@@ -18,6 +22,8 @@ export const ProgressBar = ({
     value = 0,
     mode = 'determinate',
     showValue = true,
+    'aria-label': ariaLabel = 'Progress',
+    'aria-labelledby': ariaLabelledBy,
     className,
 }: ProgressBarProps) => {
     const boundedValue = Math.min(100, Math.max(0, value));
@@ -29,6 +35,8 @@ export const ProgressBar = ({
             data-cratis-part='root'
             data-mode={mode}
             role='progressbar'
+            aria-label={ariaLabelledBy ? undefined : ariaLabel}
+            aria-labelledby={ariaLabelledBy}
             aria-valuemin={mode === 'determinate' ? 0 : undefined}
             aria-valuemax={mode === 'determinate' ? 100 : undefined}
             aria-valuenow={ariaValue}
diff --git a/Source/Dropdown/Dropdown.stories.tsx b/Source/Dropdown/Dropdown.stories.tsx
index df9933be..e8ab67b3 100644
--- a/Source/Dropdown/Dropdown.stories.tsx
+++ b/Source/Dropdown/Dropdown.stories.tsx
@@ -13,7 +13,7 @@ const roles = [
 ];
 
 const meta = {
-    title: 'Dropdown/Visual parity',
+    title: 'Dropdown/Dropdown',
     component: Dropdown,
     parameters: { layout: 'padded' },
     tags: ['autodocs'],
@@ -68,7 +68,7 @@ export const FilteredAndOpen: Story = {
     render: () => <ControlledDropdown filter />,
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);
-        await userEvent.click(canvas.getByLabelText('Role'));
-        await expect(within(document.body).getByRole('listbox')).toBeTruthy();
+        await userEvent.click(canvas.getByRole('button', { name: /show options/i }));
+        await expect(await within(document.body).findByRole('listbox')).toBeTruthy();
     },
 };
diff --git a/Source/Filter/FilterPanel.css b/Source/Filter/FilterPanel.css
index b79041f8..e6ce36bb 100644
--- a/Source/Filter/FilterPanel.css
+++ b/Source/Filter/FilterPanel.css
@@ -171,7 +171,16 @@
     display: flex;
     width: 100%;
     align-items: center;
+    gap: 0.5rem;
+}
+
+.pv-filter-toggle {
+    appearance: none;
+    display: flex;
+    flex: 1;
+    align-items: center;
     justify-content: space-between;
+    min-width: 0;
     background: none;
     border: none;
     color: inherit;
@@ -209,6 +218,7 @@
 
 .pv-filter-clear-header {
     appearance: none;
+    flex: 0 0 auto;
     border: none;
     width: 1.5rem;
     height: 1.5rem;
@@ -325,7 +335,7 @@
 .pv-option-count {
     font-feature-settings: 'tnum';
     font-variant-numeric: tabular-nums;
-    color: var(--cratis-text-color-secondary);
+    color: var(--cratis-text-color);
     font-size: 0.75rem;
 }
 
@@ -349,6 +359,7 @@
     flex-direction: column;
     will-change: opacity, transform;
     contain: layout;
+    color: var(--cratis-text-color);
 }
 
 .pv-filter-dropdown-content {
@@ -449,11 +460,16 @@
     box-shadow: 0 4px 12px var(--cratis-primary-color);
 }
 
+.pv-range-handle:focus-visible {
+    outline: 2px solid var(--cratis-primary-color);
+    outline-offset: 3px;
+}
+
 .pv-range-labels {
     display: flex;
     justify-content: space-between;
     font-size: 0.75rem;
-    color: var(--cratis-text-color-secondary);
+    color: var(--cratis-text-color);
     font-variant-numeric: tabular-nums;
 }
 
diff --git a/Source/Filter/FilterPanel.stories.tsx b/Source/Filter/FilterPanel.stories.tsx
index c0cef8ec..9b7818f6 100644
--- a/Source/Filter/FilterPanel.stories.tsx
+++ b/Source/Filter/FilterPanel.stories.tsx
@@ -3,6 +3,7 @@
 
 import React, { useMemo, useRef, useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
+import { expect, userEvent, waitFor, within } from 'storybook/test';
 import { FilterPanel } from './FilterPanel';
 import { FilterEditor } from './FilterEditor';
 import { useFilterState } from './useFilterState';
@@ -19,6 +20,34 @@ const meta: Meta<typeof FilterPanel> = {
 export default meta;
 type Story = StoryObj<typeof FilterPanel>;
 
+const openFilterGroup = async (
+    canvasElement: HTMLElement,
+    triggerName: string,
+    groupName: string,
+) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole('button', { name: triggerName }));
+    const body = within(document.body);
+    const findGroup = () =>
+        body
+            .getAllByRole('button', { name: groupName })
+            .find((button) => button.hasAttribute('aria-expanded'));
+    await body.findAllByRole('button', { name: groupName });
+    const group = findGroup();
+    if (!group) throw new Error(`Could not find the ${groupName} filter group trigger.`);
+    if (group.getAttribute('aria-expanded') !== 'true') {
+        await userEvent.click(group);
+    }
+    await waitFor(() => expect(findGroup()).toHaveAttribute('aria-expanded', 'true'));
+    const panel = group.closest('aside');
+    const content = group.closest('.pv-filter')?.querySelector('.pv-filter-content');
+    await waitFor(() => {
+        expect(panel ? getComputedStyle(panel).opacity : '').toBe('1');
+        expect(content ? getComputedStyle(content).opacity : '').toBe('1');
+    });
+    return { body, canvas };
+};
+
 // ---------------------------------------------------------------------------
 // Shared wrapper styles
 // ---------------------------------------------------------------------------
@@ -61,6 +90,15 @@ const activeButtonStyle: React.CSSProperties = {
 
 export const SingleSelectFilter: Story = {
     name: 'Single-select string filter',
+    play: async ({ canvasElement }) => {
+        const { body, canvas } = await openFilterGroup(canvasElement, 'Status', 'Status');
+        const active = await body.findByRole('radio', { name: /^Active/ });
+        await userEvent.click(active);
+        await expect(active).toBeChecked();
+        await expect(canvas.getByRole('button', { name: 'Status (1)' })).toBeTruthy();
+        await userEvent.click(body.getByRole('button', { name: 'Clear filter' }));
+        await expect(active).not.toBeChecked();
+    },
     render: () => {
         const buttonRef = useRef<HTMLButtonElement>(null!);
         const [isOpen, setIsOpen] = useState(false);
@@ -94,8 +132,10 @@ export const SingleSelectFilter: Story = {
         return (
             <div style={pageStyle}>
                 <div>
-                    <h2 style={{ margin: '0 0 0.5rem', fontSize: '1.1rem' }}>Single-select Filter</h2>
-                    <p style={{ margin: 0, opacity: 0.8, fontSize: '0.9rem' }}>
+                    <h2 style={{ margin: '0 0 0.5rem', fontSize: '1.1rem' }}>
+                        Single-select Filter
+                    </h2>
+                    <p style={{ margin: 0, fontSize: '0.9rem' }}>
                         Radio-button style — only one option can be selected at a time.
                     </p>
                 </div>
@@ -108,8 +148,9 @@ export const SingleSelectFilter: Story = {
                         Status{activeCount > 0 ? ` (${activeCount})` : ''}
                     </button>
                     {activeCount > 0 && (
-                        <span style={{ fontSize: '0.85rem', opacity: 0.7 }}>
-                            Selected: {Array.from(filterValues['status'] ?? []).join(', ')}
+                        <span style={{ fontSize: '0.85rem' }}>
+                            Selected:{' '}
+                            {Array.from(filterValues['status'] ?? []).join(', ')}
                         </span>
                     )}
                 </div>
@@ -137,6 +178,23 @@ export const SingleSelectFilter: Story = {
 
 export const MultiSelectFilter: Story = {
     name: 'Multi-select string filter',
+    play: async ({ canvasElement }) => {
+        const { body, canvas } = await openFilterGroup(
+            canvasElement,
+            'Department',
+            'Department',
+        );
+        const engineering = await body.findByRole('checkbox', { name: /^Engineering/ });
+        const design = body.getByRole('checkbox', { name: /^Design/ });
+        await userEvent.click(engineering);
+        await userEvent.click(design);
+        await expect(engineering).toBeChecked();
+        await expect(design).toBeChecked();
+        await expect(canvas.getByRole('button', { name: 'Department (2)' })).toBeTruthy();
+        await userEvent.click(body.getByRole('button', { name: 'Clear filter' }));
+        await expect(engineering).not.toBeChecked();
+        await expect(design).not.toBeChecked();
+    },
     render: () => {
         const buttonRef = useRef<HTMLButtonElement>(null!);
         const [isOpen, setIsOpen] = useState(false);
@@ -168,8 +226,10 @@ export const MultiSelectFilter: Story = {
         return (
             <div style={pageStyle}>
                 <div>
-                    <h2 style={{ margin: '0 0 0.5rem', fontSize: '1.1rem' }}>Multi-select Filter</h2>
-                    <p style={{ margin: 0, opacity: 0.8, fontSize: '0.9rem' }}>
+                    <h2 style={{ margin: '0 0 0.5rem', fontSize: '1.1rem' }}>
+                        Multi-select Filter
+                    </h2>
+                    <p style={{ margin: 0, fontSize: '0.9rem' }}>
                         Checkbox style — multiple options can be selected simultaneously.
                     </p>
                 </div>
@@ -182,8 +242,9 @@ export const MultiSelectFilter: Story = {
                         Department{activeCount > 0 ? ` (${activeCount})` : ''}
                     </button>
                     {activeCount > 0 && (
-                        <span style={{ fontSize: '0.85rem', opacity: 0.7 }}>
-                            Selected: {Array.from(filterValues['department'] ?? []).join(', ')}
+                        <span style={{ fontSize: '0.85rem' }}>
+                            Selected:{' '}
+                            {Array.from(filterValues['department'] ?? []).join(', ')}
                         </span>
                     )}
                 </div>
@@ -223,6 +284,13 @@ const ageValues = generateAgeValues(500);
 
 export const NumericRangeFilter: Story = {
     name: 'Numeric range filter (histogram)',
+    play: async ({ canvasElement }) => {
+        const { body, canvas } = await openFilterGroup(canvasElement, 'Age', 'Age');
+        await userEvent.click(await body.findByRole('button', { name: /^20 - 22:/ }));
+        await expect(canvas.getByRole('button', { name: 'Age: 20–22' })).toBeTruthy();
+        await userEvent.click(body.getByRole('button', { name: 'Clear range' }));
+        await expect(canvas.getByRole('button', { name: 'Age' })).toBeTruthy();
+    },
     render: () => {
         const buttonRef = useRef<HTMLButtonElement>(null!);
         const [isOpen, setIsOpen] = useState(false);
@@ -249,9 +317,12 @@ export const NumericRangeFilter: Story = {
         return (
             <div style={pageStyle}>
                 <div>
-                    <h2 style={{ margin: '0 0 0.5rem', fontSize: '1.1rem' }}>Numeric Range Filter</h2>
-                    <p style={{ margin: 0, opacity: 0.8, fontSize: '0.9rem' }}>
-                        Histogram with draggable range handles. Click a bar to jump-select that bucket.
+                    <h2 style={{ margin: '0 0 0.5rem', fontSize: '1.1rem' }}>
+                        Numeric Range Filter
+                    </h2>
+                    <p style={{ margin: 0, fontSize: '0.9rem' }}>
+                        Histogram with draggable range handles. Click a bar to jump-select
+                        that bucket.
                     </p>
                 </div>
                 <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
@@ -293,7 +364,9 @@ function RatingEditor({ value, onChange }: { value: unknown; onChange: (v: unkno
                 {[1, 2, 3, 4, 5].map((star) => (
                     <button
                         key={star}
-                        type="button"
+                        type='button'
+                        aria-label={`${star} star${star !== 1 ? 's' : ''}`}
+                        aria-pressed={rating === star}
                         onClick={() => onChange(rating === star ? 0 : star)}
                         style={{
                             appearance: 'none',
@@ -322,8 +395,17 @@ function DateRangeEditor({ value, onChange }: { value: unknown; onChange: (v: un
     const range = value as { from?: string; to?: string } | undefined;
     return (
         <div style={{ padding: '0.5rem 0' }}>
-            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0.5rem' }}>
-                <label style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem', fontSize: '0.75rem', opacity: 0.7 }}>
+            <div
+                style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0.5rem' }}
+            >
+                <label
+                    style={{
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: '0.25rem',
+                        fontSize: '0.75rem',
+                    }}
+                >
                     From
                     <input
                         type="date"
@@ -339,7 +421,14 @@ function DateRangeEditor({ value, onChange }: { value: unknown; onChange: (v: un
                         }}
                     />
                 </label>
-                <label style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem', fontSize: '0.75rem', opacity: 0.7 }}>
+                <label
+                    style={{
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: '0.25rem',
+                        fontSize: '0.75rem',
+                    }}
+                >
                     To
                     <input
                         type="date"
@@ -362,6 +451,17 @@ function DateRangeEditor({ value, onChange }: { value: unknown; onChange: (v: un
 
 export const CustomEditor: Story = {
     name: 'Custom filter editor',
+    play: async ({ canvasElement }) => {
+        const { body, canvas } = await openFilterGroup(
+            canvasElement,
+            'Filters',
+            'Rating',
+        );
+        await userEvent.click(await body.findByRole('button', { name: '4 stars' }));
+        await expect(canvas.getByText(/Rating ≥ 4/)).toBeTruthy();
+        await userEvent.click(body.getByRole('button', { name: 'Clear filter' }));
+        await expect(canvas.queryByText(/Rating ≥ 4/)).toBeNull();
+    },
     render: () => {
         const buttonRef = useRef<HTMLButtonElement>(null!);
         const [isOpen, setIsOpen] = useState(false);
@@ -389,9 +489,19 @@ export const CustomEditor: Story = {
         return (
             <div style={pageStyle}>
                 <div>
-                    <h2 style={{ margin: '0 0 0.5rem', fontSize: '1.1rem' }}>Custom Filter Editors</h2>
-                    <p style={{ margin: 0, opacity: 0.8, fontSize: '0.9rem' }}>
-                        Declare a <code style={{ fontFamily: 'monospace', fontSize: '0.8em', opacity: 0.8 }}>&lt;FilterEditor&gt;</code> child inside <code style={{ fontFamily: 'monospace', fontSize: '0.8em', opacity: 0.8 }}>&lt;FilterPanel&gt;</code> to provide a custom editor for any filter group.
+                    <h2 style={{ margin: '0 0 0.5rem', fontSize: '1.1rem' }}>
+                        Custom Filter Editors
+                    </h2>
+                    <p style={{ margin: 0, fontSize: '0.9rem' }}>
+                        Declare a{' '}
+                        <code style={{ fontFamily: 'monospace', fontSize: '0.8em' }}>
+                            &lt;FilterEditor&gt;
+                        </code>{' '}
+                        child inside{' '}
+                        <code style={{ fontFamily: 'monospace', fontSize: '0.8em' }}>
+                            &lt;FilterPanel&gt;
+                        </code>{' '}
+                        to provide a custom editor for any filter group.
                     </p>
                 </div>
                 <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
@@ -403,8 +513,10 @@ export const CustomEditor: Story = {
                         Filters{hasFilters ? ' •' : ''}
                     </button>
                     {hasFilters && (
-                        <span style={{ fontSize: '0.85rem', opacity: 0.7 }}>
-                            {typeof rating === 'number' && rating > 0 && `Rating ≥ ${rating} ★`}
+                        <span style={{ fontSize: '0.85rem' }}>
+                            {typeof rating === 'number' &&
+                                rating > 0 &&
+                                `Rating ≥ ${rating} ★`}
                             {dateRange?.from && ` · From ${dateRange.from}`}
                             {dateRange?.to && ` · To ${dateRange.to}`}
                         </span>
@@ -452,6 +564,20 @@ const salaryValues = Array.from({ length: 300 }, () => {
 
 export const MixedFilters: Story = {
     name: 'Mixed filter types',
+    play: async ({ canvasElement }) => {
+        const { body, canvas } = await openFilterGroup(
+            canvasElement,
+            'Filters',
+            'Department',
+        );
+        const search = body.getByPlaceholderText('Search filters…');
+        await userEvent.type(search, 'department');
+        await expect(search).toHaveValue('department');
+        const engineering = await body.findByRole('checkbox', { name: /^Engineering/ });
+        await userEvent.click(engineering);
+        await expect(engineering).toBeChecked();
+        await expect(canvas.getByRole('button', { name: 'Filters (1)' })).toBeTruthy();
+    },
     render: () => {
         const buttonRef = useRef<HTMLButtonElement>(null!);
         const [isOpen, setIsOpen] = useState(false);
@@ -510,9 +636,12 @@ export const MixedFilters: Story = {
         return (
             <div style={pageStyle}>
                 <div>
-                    <h2 style={{ margin: '0 0 0.5rem', fontSize: '1.1rem' }}>Mixed Filter Types</h2>
-                    <p style={{ margin: 0, opacity: 0.8, fontSize: '0.9rem' }}>
-                        Single-select, multi-select, numeric range and custom editor in one panel, plus a search box.
+                    <h2 style={{ margin: '0 0 0.5rem', fontSize: '1.1rem' }}>
+                        Mixed Filter Types
+                    </h2>
+                    <p style={{ margin: 0, fontSize: '0.9rem' }}>
+                        Single-select, multi-select, numeric range and custom editor in
+                        one panel, plus a search box.
                     </p>
                 </div>
                 <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
@@ -524,8 +653,9 @@ export const MixedFilters: Story = {
                         Filters{activeFilterCount > 0 ? ` (${activeFilterCount})` : ''}
                     </button>
                     {activeFilterCount > 0 && (
-                        <span style={{ fontSize: '0.85rem', opacity: 0.7 }}>
-                            {activeFilterCount} active filter{activeFilterCount !== 1 ? 's' : ''}
+                        <span style={{ fontSize: '0.85rem' }}>
+                            {activeFilterCount} active filter
+                            {activeFilterCount !== 1 ? 's' : ''}
                         </span>
                     )}
                 </div>
diff --git a/Source/Filter/FilterPanel.tsx b/Source/Filter/FilterPanel.tsx
index f714f7ce..a26acb73 100644
--- a/Source/Filter/FilterPanel.tsx
+++ b/Source/Filter/FilterPanel.tsx
@@ -343,6 +343,22 @@ export function FilterPanel({
                                 const isCustom =
                                     filter.type === 'custom' ||
                                     editorRender !== undefined;
+                                const hasCustomValue =
+                                    customValue !== undefined && customValue !== null;
+                                const canClear = isNumeric
+                                    ? Boolean(rangeSelection)
+                                    : isCustom
+                                      ? hasCustomValue
+                                      : selections.size > 0;
+                                const clearLabel = isNumeric
+                                    ? clearRangeAriaLabel
+                                    : clearFilterAriaLabel;
+                                const clearValue = () => {
+                                    if (isNumeric) onRangeChange(filter.key, null);
+                                    else if (isCustom) {
+                                        onCustomValueChange?.(filter.key, undefined);
+                                    } else onFilterClear(filter.key);
+                                };
                                 const formatRangeValue = isDate
                                     ? (value: number) => new Date(value).toLocaleString()
                                     : undefined;
@@ -352,97 +368,53 @@ export function FilterPanel({
                                         key={filter.key}
                                         className={`pv-filter ${isExpanded ? 'expanded' : ''}`}
                                     >
-                                        <button
-                                            type='button'
-                                            className='pv-filter-trigger'
-                                            onClick={() =>
-                                                onExpandedFilterChange(
-                                                    isExpanded ? null : filter.key,
-                                                )
-                                            }
-                                        >
-                                            <span className='pv-filter-label'>
-                                                {filter.label}
-                                            </span>
-                                            <span className='pv-filter-trigger-meta'>
-                                                {!isNumeric &&
-                                                    !isCustom &&
-                                                    selections.size > 0 && (
-                                                        <>
+                                        <div className='pv-filter-trigger'>
+                                            <button
+                                                type='button'
+                                                className='pv-filter-toggle'
+                                                aria-expanded={isExpanded}
+                                                onClick={() =>
+                                                    onExpandedFilterChange(
+                                                        isExpanded ? null : filter.key,
+                                                    )
+                                                }
+                                            >
+                                                <span className='pv-filter-label'>
+                                                    {filter.label}
+                                                </span>
+                                                <span className='pv-filter-trigger-meta'>
+                                                    {!isNumeric &&
+                                                        !isCustom &&
+                                                        selections.size > 0 && (
                                                             <span className='pv-filter-count'>
                                                                 {selections.size}
                                                             </span>
-                                                            <button
-                                                                type='button'
-                                                                className='pv-filter-clear-header'
-                                                                title={clearFilterAriaLabel}
-                                                                onClick={(e) => {
-                                                                    e.stopPropagation();
-                                                                    onFilterClear(
-                                                                        filter.key,
-                                                                    );
-                                                                }}
-                                                                aria-label={
-                                                                    clearFilterAriaLabel
-                                                                }
-                                                            >
-                                                                ×
-                                                            </button>
-                                                        </>
-                                                    )}
-                                                {isNumeric && rangeSelection && (
-                                                    <>
+                                                        )}
+                                                    {isNumeric && rangeSelection && (
                                                         <span className='pv-filter-count'>
                                                             Range
                                                         </span>
-                                                        <button
-                                                            type='button'
-                                                            className='pv-filter-clear-header'
-                                                            title={clearRangeAriaLabel}
-                                                            onClick={(e) => {
-                                                                e.stopPropagation();
-                                                                onRangeChange(
-                                                                    filter.key,
-                                                                    null,
-                                                                );
-                                                            }}
-                                                            aria-label={
-                                                                clearRangeAriaLabel
-                                                            }
-                                                        >
-                                                            ×
-                                                        </button>
-                                                    </>
-                                                )}
-                                                {isCustom &&
-                                                    customValue !== undefined &&
-                                                    customValue !== null && (
-                                                        <>
-                                                            <span className='pv-filter-count'>
-                                                                •
-                                                            </span>
-                                                            <button
-                                                                type='button'
-                                                                className='pv-filter-clear-header'
-                                                                title={clearFilterAriaLabel}
-                                                                onClick={(e) => {
-                                                                    e.stopPropagation();
-                                                                    onCustomValueChange?.(
-                                                                        filter.key,
-                                                                        undefined,
-                                                                    );
-                                                                }}
-                                                                aria-label={
-                                                                    clearFilterAriaLabel
-                                                                }
-                                                            >
-                                                                ×
-                                                            </button>
-                                                        </>
                                                     )}
-                                                <span className='pv-filter-chevron' />
-                                            </span>
-                                        </button>
+                                                    {isCustom && hasCustomValue && (
+                                                        <span className='pv-filter-count'>
+                                                            •
+                                                        </span>
+                                                    )}
+                                                    <span className='pv-filter-chevron' />
+                                                </span>
+                                            </button>
+                                            {canClear && (
+                                                <button
+                                                    type='button'
+                                                    className='pv-filter-clear-header'
+                                                    title={clearLabel}
+                                                    aria-label={clearLabel}
+                                                    onClick={clearValue}
+                                                >
+                                                    ×
+                                                </button>
+                                            )}
+                                        </div>
                                         <div
                                             className={`pv-filter-content ${isExpanded ? 'expanded' : ''}`}
                                         >
diff --git a/Source/Filter/RangeHistogramFilter.stories.tsx b/Source/Filter/RangeHistogramFilter.stories.tsx
new file mode 100644
index 00000000..af7c7b9a
--- /dev/null
+++ b/Source/Filter/RangeHistogramFilter.stories.tsx
@@ -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 { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { expect, fn, userEvent, waitFor, within } from 'storybook/test';
+import { RangeHistogramFilter } from './RangeHistogramFilter';
+
+const values = [
+    4, 8, 12, 12, 18, 22, 31, 35, 38, 42, 48, 51, 55, 63, 67, 72, 78, 81, 86, 94,
+];
+
+const meta = {
+    title: 'Filter/RangeHistogramFilter',
+    component: RangeHistogramFilter,
+    args: {
+        values,
+        min: 0,
+        max: 100,
+        buckets: 10,
+        selectedRange: [20, 80],
+        onChange: fn(),
+    },
+    parameters: { layout: 'centered' },
+} satisfies Meta<typeof RangeHistogramFilter>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Interactive: Story = {
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const minimum = canvas.getByRole('slider', { name: 'Minimum value' });
+        minimum.focus();
+        await userEvent.keyboard('{ArrowRight}');
+        await waitFor(() => {
+            expect(
+                [...canvasElement.querySelectorAll('.pv-range-value')].map(
+                    (element) => element.textContent,
+                ),
+            ).toEqual(['30', '80']);
+        });
+        await userEvent.click(canvas.getByRole('button', { name: /^0 - 10:/ }));
+        await waitFor(() => {
+            expect(
+                [...canvasElement.querySelectorAll('.pv-range-value')].map(
+                    (element) => element.textContent,
+                ),
+            ).toEqual(['0', '10']);
+        });
+    },
+    render: (args) => {
+        const [range, setRange] = useState<[number, number] | null>(args.selectedRange);
+        return (
+            <div style={{ width: '32rem' }}>
+                <RangeHistogramFilter
+                    {...args}
+                    selectedRange={range}
+                    onChange={setRange}
+                />
+            </div>
+        );
+    },
+};
+
+export const Currency: Story = {
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement);
+        await expect(
+            canvas.getByRole('slider', { name: 'Minimum order value' }),
+        ).toBeTruthy();
+        await userEvent.click(canvas.getByRole('button', { name: /^\$0 - \$10:/ }));
+        await expect(args.onChange).toHaveBeenCalledWith([0, 10]);
+    },
+    args: {
+        min: 0,
+        max: 100,
+        formatValue: (value) => `$${value}`,
+        itemsLabel: 'orders',
+        minimumAriaLabel: 'Minimum order value',
+        maximumAriaLabel: 'Maximum order value',
+    },
+};
diff --git a/Source/Filter/RangeHistogramFilter.tsx b/Source/Filter/RangeHistogramFilter.tsx
index e70a4097..a53ddb3d 100644
--- a/Source/Filter/RangeHistogramFilter.tsx
+++ b/Source/Filter/RangeHistogramFilter.tsx
@@ -41,6 +41,10 @@ export interface RangeHistogramFilterProps {
     formatValue?: (value: number) => string;
     /** Unit shown after a histogram bar count. Override to localize. Defaults to `'items'`. */
     itemsLabel?: string;
+    /** Accessible name for the lower-bound slider. Defaults to `'Minimum value'`. */
+    minimumAriaLabel?: string;
+    /** Accessible name for the upper-bound slider. Defaults to `'Maximum value'`. */
+    maximumAriaLabel?: string;
 }
 
 const defaultFormatValue = (value: number) => {
@@ -85,6 +89,8 @@ export function RangeHistogramFilter({
     onChange,
     formatValue = defaultFormatValue,
     itemsLabel = 'items',
+    minimumAriaLabel = 'Minimum value',
+    maximumAriaLabel = 'Maximum value',
 }: RangeHistogramFilterProps) {
     const containerRef = useRef<HTMLDivElement>(null);
     const [isDragging, setIsDragging] = useState<'left' | 'right' | 'range' | null>(null);
@@ -188,6 +194,43 @@ export function RangeHistogramFilter({
         onChange([bucket.start, bucket.end]);
     };
 
+    const rangeSpan = max - min;
+    const minimumGap = rangeSpan * 0.01;
+    const keyboardStep = rangeSpan / Math.max(1, buckets);
+
+    const handleHandleKeyDown = (
+        event: React.KeyboardEvent<HTMLDivElement>,
+        handle: 'left' | 'right',
+    ) => {
+        if (keyboardStep <= 0) return;
+
+        let next: number | undefined;
+        const current = handle === 'left' ? currentRange[0] : currentRange[1];
+        if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {
+            next = current - keyboardStep;
+        } else if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {
+            next = current + keyboardStep;
+        } else if (event.key === 'Home') {
+            next = handle === 'left' ? min : currentRange[0] + minimumGap;
+        } else if (event.key === 'End') {
+            next = handle === 'left' ? currentRange[1] - minimumGap : max;
+        } else return;
+
+        event.preventDefault();
+        const rounded = Number(next.toFixed(10));
+        if (handle === 'left') {
+            onChange([
+                Math.max(min, Math.min(rounded, currentRange[1] - minimumGap)),
+                currentRange[1],
+            ]);
+        } else {
+            onChange([
+                currentRange[0],
+                Math.min(max, Math.max(rounded, currentRange[0] + minimumGap)),
+            ]);
+        }
+    };
+
     const leftPos = getPositionFromValue(currentRange[0]);
     const rightPos = getPositionFromValue(currentRange[1]);
 
@@ -227,12 +270,28 @@ export function RangeHistogramFilter({
                 <div
                     className='pv-range-handle pv-range-handle-left'
                     style={{ left: `${leftPos}%` }}
+                    role='slider'
+                    tabIndex={0}
+                    aria-label={minimumAriaLabel}
+                    aria-valuemin={min}
+                    aria-valuemax={currentRange[1] - minimumGap}
+                    aria-valuenow={currentRange[0]}
+                    aria-valuetext={formatValue(currentRange[0])}
                     onMouseDown={(e) => handleMouseDown(e, 'left')}
+                    onKeyDown={(event) => handleHandleKeyDown(event, 'left')}
                 />
                 <div
                     className='pv-range-handle pv-range-handle-right'
                     style={{ left: `${rightPos}%` }}
+                    role='slider'
+                    tabIndex={0}
+                    aria-label={maximumAriaLabel}
+                    aria-valuemin={currentRange[0] + minimumGap}
+                    aria-valuemax={max}
+                    aria-valuenow={currentRange[1]}
+                    aria-valuetext={formatValue(currentRange[1])}
                     onMouseDown={(e) => handleMouseDown(e, 'right')}
+                    onKeyDown={(event) => handleHandleKeyDown(event, 'right')}
                 />
             </div>
 
diff --git a/Source/Filter/for_FilterPanel/when_clear_buttons_are_localized.tsx b/Source/Filter/for_FilterPanel/when_clear_buttons_are_localized.tsx
index cca429ef..6d1134bb 100644
--- a/Source/Filter/for_FilterPanel/when_clear_buttons_are_localized.tsx
+++ b/Source/Filter/for_FilterPanel/when_clear_buttons_are_localized.tsx
@@ -111,4 +111,13 @@ describe('when the FilterPanel clear buttons are localized', () => {
             expect(button.title).not.to.equal('Clear range');
         }
     });
+
+    it('should keep each clear action outside the expand button', () => {
+        const headers = document.querySelectorAll('.pv-filter-trigger');
+        expect(headers).to.have.length(3);
+        for (const header of headers) {
+            expect(header.tagName).to.equal('DIV');
+            expect(header.querySelector('button button')).to.equal(null);
+        }
+    });
 });
diff --git a/Source/Filter/for_RangeHistogramFilter/when_using_keyboard.tsx b/Source/Filter/for_RangeHistogramFilter/when_using_keyboard.tsx
new file mode 100644
index 00000000..fbc16714
--- /dev/null
+++ b/Source/Filter/for_RangeHistogramFilter/when_using_keyboard.tsx
@@ -0,0 +1,71 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { act, useState } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { expect } from 'chai';
+import { afterEach, beforeEach, describe, it } from 'vitest';
+import { RangeHistogramFilter } from '../RangeHistogramFilter';
+
+const Harness = () => {
+    const [range, setRange] = useState<[number, number] | null>([20, 80]);
+    return (
+        <RangeHistogramFilter
+            values={[10, 20, 30, 40, 50, 60, 70, 80, 90]}
+            min={0}
+            max={100}
+            buckets={10}
+            selectedRange={range}
+            onChange={setRange}
+            minimumAriaLabel='Minimum order value'
+            maximumAriaLabel='Maximum order value'
+        />
+    );
+};
+
+describe('when using the range histogram with a keyboard', () => {
+    let container: HTMLDivElement;
+    let root: Root;
+
+    beforeEach(async () => {
+        (
+            globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
+        ).IS_REACT_ACT_ENVIRONMENT = true;
+        container = document.createElement('div');
+        document.body.append(container);
+        root = createRoot(container);
+        await act(async () => root.render(<Harness />));
+    });
+
+    afterEach(async () => {
+        await act(async () => root.unmount());
+        container.remove();
+    });
+
+    it('should expose both handles as named sliders', () => {
+        const sliders = container.querySelectorAll('[role="slider"]');
+        expect(sliders).to.have.length(2);
+        expect(sliders[0].getAttribute('aria-label')).to.equal('Minimum order value');
+        expect(sliders[1].getAttribute('aria-label')).to.equal('Maximum order value');
+    });
+
+    it('should move the minimum by one bucket with ArrowRight', async () => {
+        const minimum = container.querySelector<HTMLElement>(
+            '[role="slider"][aria-label="Minimum order value"]',
+        )!;
+        await act(async () => {
+            minimum.focus();
+            minimum.dispatchEvent(
+                new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }),
+            );
+        });
+
+        const values = [...container.querySelectorAll('.pv-range-value')].map(
+            (element) => element.textContent,
+        );
+        expect(values).to.deep.equal(['30', '80']);
+        expect(minimum.getAttribute('aria-valuenow')).to.equal('30');
+    });
+});
diff --git a/Source/ObjectContentEditor/ObjectContentEditor.stories.tsx b/Source/ObjectContentEditor/ObjectContentEditor.stories.tsx
index 0f2e2754..71165609 100644
--- a/Source/ObjectContentEditor/ObjectContentEditor.stories.tsx
+++ b/Source/ObjectContentEditor/ObjectContentEditor.stories.tsx
@@ -3,11 +3,11 @@
 
 import type { Meta, StoryObj } from '@storybook/react';
 import { ObjectContentEditor } from './ObjectContentEditor';
-import { JsonSchema, Json } from '../types/JsonSchema';
+import type { JsonSchema, Json } from '../types/JsonSchema';
 import { useState } from 'react';
 
 const meta: Meta<typeof ObjectContentEditor> = {
-    title: 'Components/ObjectContentEditor',
+    title: 'ObjectContentEditor/ObjectContentEditor',
     component: ObjectContentEditor,
     tags: ['autodocs'],
     parameters: {
diff --git a/Source/ObjectContentEditor/ObjectContentEditor.tsx b/Source/ObjectContentEditor/ObjectContentEditor.tsx
index f3cb2144..200d4c07 100644
--- a/Source/ObjectContentEditor/ObjectContentEditor.tsx
+++ b/Source/ObjectContentEditor/ObjectContentEditor.tsx
@@ -5,7 +5,7 @@ import { Tooltip } from '../Common/Tooltip';
 import React, { useState, useCallback, useMemo, useEffect } from 'react';
 import * as faIcons from 'react-icons/fa6';
 import { ObjectNavigationalBar } from '../ObjectNavigationalBar';
-import { Json, JsonSchema, JsonSchemaProperty } from '../types/JsonSchema';
+import type { Json, JsonSchema, JsonSchemaProperty } from '../types/JsonSchema';
 import { getValueAtPath } from './objectHelpers';
 
 import { DatePickerInput } from '../Common/DatePickerInput';
@@ -290,6 +290,7 @@ export const ObjectContentEditor = ({
                 <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
                     <input
                         type='checkbox'
+                        aria-label={propertyName}
                         checked={Boolean(value)}
                         onChange={(event) => handleChange(event.target.checked)}
                         aria-invalid={Boolean(error) || undefined}
@@ -305,6 +306,7 @@ export const ObjectContentEditor = ({
                 <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
                     <input
                         type='number'
+                        aria-label={propertyName}
                         value={value === null || value === undefined ? '' : Number(value)}
                         onChange={(event) =>
                             handleChange(
@@ -326,6 +328,7 @@ export const ObjectContentEditor = ({
             return (
                 <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
                     <DatePickerInput
+                        aria-label={propertyName}
                         value={dateValue}
                         onChange={(date) =>
                             handleChange(date ? date.toISOString() : null)
@@ -344,6 +347,7 @@ export const ObjectContentEditor = ({
             return (
                 <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
                     <DatePickerInput
+                        aria-label={propertyName}
                         value={dateValue}
                         onChange={(date) =>
                             handleChange(date ? date.toISOString().split('T')[0] : null)
@@ -390,6 +394,7 @@ export const ObjectContentEditor = ({
             return (
                 <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
                     <textarea
+                        aria-label={propertyName}
                         value={String(value ?? '')}
                         onChange={(event) => handleChange(event.target.value)}
                         rows={3}
@@ -404,6 +409,7 @@ export const ObjectContentEditor = ({
         return (
             <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
                 <input
+                    aria-label={propertyName}
                     value={String(value ?? '')}
                     onChange={(event) => handleChange(event.target.value)}
                     aria-invalid={Boolean(error) || undefined}
@@ -586,17 +592,23 @@ export const ObjectContentEditor = ({
                                                     content={description}
                                                     position='right'
                                                 >
-                                                    <span
-                                                        tabIndex={0}
-                                                        role='img'
+                                                    <button
+                                                        type='button'
                                                         aria-label='Property description'
+                                                        style={{
+                                                            display: 'inline-flex',
+                                                            padding: 0,
+                                                            border: 0,
+                                                            background: 'transparent',
+                                                            color: 'inherit',
+                                                        }}
                                                     >
                                                         <faIcons.FaCircleInfo
                                                             aria-hidden='true'
                                                             className='property-info-icon'
                                                             style={infoIconStyle}
                                                         />
-                                                    </span>
+                                                    </button>
                                                 </Tooltip>
                                             )}
                                         </span>
@@ -637,7 +649,7 @@ export const ObjectContentEditor = ({
                         background: 'var(--cratis-highlight-bg)',
                         borderRadius: '8px',
                         fontSize: '12px',
-                        color: 'var(--cratis-text-color-secondary)',
+                        color: 'var(--cratis-text-color)',
                     }}
                 >
                     Snapshot captured: {timestamp.toLocaleString()}
diff --git a/Source/ObjectNavigationalBar/ObjectNavigationalBar.stories.tsx b/Source/ObjectNavigationalBar/ObjectNavigationalBar.stories.tsx
index 261a406b..14f73866 100644
--- a/Source/ObjectNavigationalBar/ObjectNavigationalBar.stories.tsx
+++ b/Source/ObjectNavigationalBar/ObjectNavigationalBar.stories.tsx
@@ -3,10 +3,13 @@
 
 import React, { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from 'storybook/test';
 import { ObjectNavigationalBar } from './ObjectNavigationalBar';
 
+const navigateAction = fn();
+
 const meta: Meta<typeof ObjectNavigationalBar> = {
-    title: 'Components/ObjectNavigationalBar',
+    title: 'ObjectNavigationalBar/ObjectNavigationalBar',
     component: ObjectNavigationalBar,
     tags: ['autodocs'],
     parameters: {
@@ -47,20 +50,20 @@ export const Interactive: Story = {
 export const AtRoot: Story = {
     args: {
         navigationPath: [],
-        onNavigate: (index: number) => console.log('Navigate to', index),
+        onNavigate: navigateAction,
     },
 };
 
 export const SingleLevel: Story = {
     args: {
         navigationPath: ['users'],
-        onNavigate: (index: number) => console.log('Navigate to', index),
+        onNavigate: navigateAction,
     },
 };
 
 export const DeepPath: Story = {
     args: {
         navigationPath: ['users', '0', 'address', 'city'],
-        onNavigate: (index: number) => console.log('Navigate to', index),
+        onNavigate: navigateAction,
     },
 };
diff --git a/Source/PivotViewer/components/PivotCanvas.tsx b/Source/PivotViewer/components/PivotCanvas.tsx
index 60968685..6d3b4258 100644
--- a/Source/PivotViewer/components/PivotCanvas.tsx
+++ b/Source/PivotViewer/components/PivotCanvas.tsx
@@ -171,8 +171,6 @@ export function PivotCanvas<TItem extends object>({
 
     (async () => {
       try {
-        // Prefer the new init API (v8+) to avoid deprecation issues. Fall back
-        // to the constructor options when `init` is not available.
         const options = {
           backgroundAlpha: 0,
           antialias: false,
@@ -183,17 +181,8 @@ export function PivotCanvas<TItem extends object>({
           height: viewportHeight > 0 ? viewportHeight : 600,
         } as PIXI.ApplicationOptions;
 
-          app = new PIXI.Application();
-        if ((app as unknown as { init?: unknown }).init && typeof (app as unknown as { init: (...args: unknown[]) => unknown }).init === 'function') {
-          // init may return a promise in some builds
-           
-          // @ts-ignore
-          await app.init(options);
-        } else {
-          // Fall back to constructor that accepts options
-          app.destroy?.();
-          app = new PIXI.Application(options);
-        }
+        app = new PIXI.Application();
+        await app.init(options);
 
         if (!mountedRef.current || !parentContainerRef.current) {
           // Component unmounted during initialization
@@ -212,9 +201,7 @@ export function PivotCanvas<TItem extends object>({
         rootRef.current = root;
         app.stage.addChild(root);
 
-        // Resolve canvas element (different Pixi builds expose it as `view` or
-        // `canvas`).
-        const canvasEl = (app.view ?? (app as unknown as { canvas?: HTMLCanvasElement }).canvas ?? app.renderer?.view) as HTMLCanvasElement | undefined;
+        const canvasEl = app.canvas;
 
         // Place canvas outside the scrollable content so native scrolling
         // doesn't move the canvas DOM element itself. We overlay the canvas
@@ -230,15 +217,8 @@ export function PivotCanvas<TItem extends object>({
           }
           overlayParent.appendChild(canvasEl);
           canvasRef.current = canvasEl;
-        } else if ((app as unknown as { canvas?: HTMLCanvasElement }).canvas) {
-          const c = (app as unknown as { canvas: HTMLCanvasElement }).canvas;
-          if (c.parentElement) {
-            c.parentElement.removeChild(c);
-          }
-          overlayParent.appendChild(c);
-          canvasRef.current = c;
         } else {
-             console.error('PivotCanvas: Could not find canvas element from Pixi application');
+          console.error('PivotCanvas: Could not find canvas element from Pixi application');
         }
 
         // Position the canvas to overlay the scrollable container area.
diff --git a/Source/PivotViewer/components/Toolbar.tsx b/Source/PivotViewer/components/Toolbar.tsx
index 3f674a1e..3a5f7f6b 100644
--- a/Source/PivotViewer/components/Toolbar.tsx
+++ b/Source/PivotViewer/components/Toolbar.tsx
@@ -117,6 +117,7 @@ export function Toolbar<TItem extends object>({
           </button>
           <input
             type="range"
+            aria-label="Zoom level"
             className="pv-zoom-slider"
             min={ZOOM_MIN}
             max={ZOOM_MAX}
diff --git a/Source/PivotViewer/components/pivot/groups.ts b/Source/PivotViewer/components/pivot/groups.ts
index 395d1ff9..4a4d0c82 100644
--- a/Source/PivotViewer/components/pivot/groups.ts
+++ b/Source/PivotViewer/components/pivot/groups.ts
@@ -23,7 +23,7 @@ export function updateGroupBackgrounds(
         // If we shouldn't show anything, hide all existing backgrounds
         // We keep the highlight if it exists
         for (const child of groupsContainer.children) {
-            if ((child as unknown as { name?: string }).name !== 'highlight') {
+            if (child.label !== 'highlight') {
                 child.visible = false;
             }
         }
@@ -44,7 +44,9 @@ export function updateGroupBackgrounds(
     const startY = -bufferWorld * 2;
 
     // Get existing background graphics (excluding highlight)
-    const backgroundGraphics = groupsContainer.children.filter(c => (c as unknown as { name?: string }).name !== 'highlight') as PIXI.Graphics[];
+    const backgroundGraphics = groupsContainer.children.filter(
+        (c) => c.label !== 'highlight',
+    ) as PIXI.Graphics[];
     let bgIndex = 0;
 
     // Instead of re-deriving bucket geometry from constants, compute bucket bounds
@@ -83,7 +85,9 @@ export function updateGroupBackgrounds(
             } else {
                 bg = new PIXI.Graphics();
                 // Insert before highlight if it exists, otherwise at end
-                const highlightIndex = groupsContainer.children.findIndex(c => (c as unknown as { name?: string }).name === 'highlight');
+                const highlightIndex = groupsContainer.children.findIndex(
+                    (c) => c.label === 'highlight',
+                );
                 if (highlightIndex >= 0) {
                     groupsContainer.addChildAt(bg, highlightIndex);
                 } else {
@@ -118,11 +122,13 @@ export function updateHighlight(
 
     const invScale = zoomLevel && zoomLevel !== 0 ? 1 / zoomLevel : 1;
 
-    let highlight = groupsContainer.children.find(child => (child as unknown as { name?: string }).name === 'highlight') as PIXI.Graphics;
+    let highlight = groupsContainer.children.find(
+        (child) => child.label === 'highlight',
+    ) as PIXI.Graphics;
 
     if (!highlight) {
         highlight = new PIXI.Graphics();
-        (highlight as unknown as { name: string }).name = 'highlight';
+        highlight.label = 'highlight';
         groupsContainer.addChild(highlight);
     }
 
diff --git a/Source/PivotViewer/components/pivot/sprites.ts b/Source/PivotViewer/components/pivot/sprites.ts
index a7c20e25..7ae6a65a 100644
--- a/Source/PivotViewer/components/pivot/sprites.ts
+++ b/Source/PivotViewer/components/pivot/sprites.ts
@@ -63,13 +63,16 @@ export function createCardSprite<TItem extends object>(
         const offsetY = CARD_GAP / 2;
 
         if (!sprite.titleText || sprite.titleText.destroyed) {
-            sprite.titleText = new PIXI.Text('', {
-                fontSize: 13,
-                fill: cardColors.text as string | number,
-                fontWeight: '600',
-                lineHeight: 18,
-                wordWrap: false,
-            } as PIXI.TextStyle);
+            sprite.titleText = new PIXI.Text({
+                text: '',
+                style: {
+                    fontSize: 13,
+                    fill: cardColors.text,
+                    fontWeight: '600',
+                    lineHeight: 18,
+                    wordWrap: false,
+                },
+            });
             sprite.titleText.position.set(offsetX + CARD_PADDING, offsetY + CARD_PADDING);
             if (sprite.container) {
                 sprite.container.addChild(sprite.titleText);
@@ -77,12 +80,15 @@ export function createCardSprite<TItem extends object>(
         }
 
         if (!sprite.labelsText || sprite.labelsText.destroyed) {
-            sprite.labelsText = new PIXI.Text('', {
-                fontSize: 11,
-                fill: cardColors.textSecondary as string | number,
-                fontWeight: '400',
-                lineHeight: 18,
-            } as PIXI.TextStyle);
+            sprite.labelsText = new PIXI.Text({
+                text: '',
+                style: {
+                    fontSize: 11,
+                    fill: cardColors.textSecondary,
+                    fontWeight: '400',
+                    lineHeight: 18,
+                },
+            });
             sprite.labelsText.position.set(
                 offsetX + CARD_PADDING,
                 offsetY + CARD_PADDING + 40,
@@ -93,13 +99,16 @@ export function createCardSprite<TItem extends object>(
         }
 
         if (!sprite.valuesText || sprite.valuesText.destroyed) {
-            sprite.valuesText = new PIXI.Text('', {
-                fontSize: 11,
-                fill: cardColors.text as string | number,
-                fontWeight: '500',
-                lineHeight: 18,
-                wordWrap: false,
-            } as PIXI.TextStyle);
+            sprite.valuesText = new PIXI.Text({
+                text: '',
+                style: {
+                    fontSize: 11,
+                    fill: cardColors.text,
+                    fontWeight: '500',
+                    lineHeight: 18,
+                    wordWrap: false,
+                },
+            });
             sprite.valuesText.position.set(
                 offsetX + CARD_PADDING + 65,
                 offsetY + CARD_PADDING + 40,
@@ -177,41 +186,56 @@ export function createCardSprite<TItem extends object>(
     const offsetX = CARD_GAP / 2;
     const offsetY = CARD_GAP / 2;
 
-    const gradient = new PIXI.FillGradient(0, offsetY, 0, offsetY + actualHeight);
-    gradient.addColorStop(0, cardColors.mid);
-    gradient.addColorStop(1, cardColors.base);
+    const gradient = new PIXI.FillGradient({
+        type: 'linear',
+        start: { x: 0, y: offsetY },
+        end: { x: 0, y: offsetY + actualHeight },
+        colorStops: [
+            { offset: 0, color: cardColors.mid },
+            { offset: 1, color: cardColors.base },
+        ],
+    });
 
     graphics.roundRect(offsetX, offsetY, actualWidth, actualHeight, CARD_RADIUS);
     graphics.fill(gradient);
 
     container.addChild(graphics);
 
-    const titleText = new PIXI.Text('', {
-        fontSize: 13,
-        fill: cardColors.text as string | number,
-        fontWeight: '600',
-        lineHeight: 18,
-        wordWrap: false,
-    } as PIXI.TextStyle);
+    const titleText = new PIXI.Text({
+        text: '',
+        style: {
+            fontSize: 13,
+            fill: cardColors.text,
+            fontWeight: '600',
+            lineHeight: 18,
+            wordWrap: false,
+        },
+    });
     titleText.position.set(offsetX + CARD_PADDING, offsetY + CARD_PADDING);
     container.addChild(titleText);
 
-    const labelsText = new PIXI.Text('', {
-        fontSize: 11,
-        fill: cardColors.textSecondary as string | number,
-        fontWeight: '400',
-        lineHeight: 18,
-    } as PIXI.TextStyle);
+    const labelsText = new PIXI.Text({
+        text: '',
+        style: {
+            fontSize: 11,
+            fill: cardColors.textSecondary,
+            fontWeight: '400',
+            lineHeight: 18,
+        },
+    });
     labelsText.position.set(offsetX + CARD_PADDING, offsetY + CARD_PADDING + 40);
     container.addChild(labelsText);
 
-    const valuesText = new PIXI.Text('', {
-        fontSize: 11,
-        fill: cardColors.text as string | number,
-        fontWeight: '500',
-        lineHeight: 18,
-        wordWrap: false,
-    } as PIXI.TextStyle);
+    const valuesText = new PIXI.Text({
+        text: '',
+        style: {
+            fontSize: 11,
+            fill: cardColors.text,
+            fontWeight: '500',
+            lineHeight: 18,
+            wordWrap: false,
+        },
+    });
     valuesText.position.set(offsetX + CARD_PADDING + 65, offsetY + CARD_PADDING + 40);
     container.addChild(valuesText);
 
@@ -373,14 +397,20 @@ export function updateCardContent<TItem extends object>(
     const offsetX = CARD_GAP / 2;
     const offsetY = CARD_GAP / 2;
 
-    const gradient = new PIXI.FillGradient(0, offsetY, 0, offsetY + actualHeight);
-    if (isSelected) {
-        gradient.addColorStop(0, colors.gradient);
-        gradient.addColorStop(1, colors.mid);
-    } else {
-        gradient.addColorStop(0, colors.mid);
-        gradient.addColorStop(1, colors.base);
-    }
+    const gradient = new PIXI.FillGradient({
+        type: 'linear',
+        start: { x: 0, y: offsetY },
+        end: { x: 0, y: offsetY + actualHeight },
+        colorStops: isSelected
+            ? [
+                  { offset: 0, color: colors.gradient },
+                  { offset: 1, color: colors.mid },
+              ]
+            : [
+                  { offset: 0, color: colors.mid },
+                  { offset: 1, color: colors.base },
+              ],
+    });
 
     sprite.graphics.roundRect(offsetX, offsetY, actualWidth, actualHeight, CARD_RADIUS);
 
diff --git a/Source/SchemaEditor/NameCell.tsx b/Source/SchemaEditor/NameCell.tsx
index ae1de081..9072a4b1 100644
--- a/Source/SchemaEditor/NameCell.tsx
+++ b/Source/SchemaEditor/NameCell.tsx
@@ -10,6 +10,8 @@ export interface NameCellProps {
     isEditMode: boolean;
     onUpdate: (oldName: string, field: keyof JsonSchemaProperty, value: unknown) => void;
     validationError?: string;
+    /** Accessible name for the property-name input. */
+    propertyNameLabel: string;
 }
 
 export const NameCell = ({
@@ -17,6 +19,7 @@ export const NameCell = ({
     isEditMode,
     onUpdate,
     validationError,
+    propertyNameLabel,
 }: NameCellProps) => {
     if (!isEditMode) {
         const isNavigable =
@@ -34,10 +37,16 @@ export const NameCell = ({
                 </span>
                 {rowData.description && (
                     <Tooltip content={rowData.description} position='right'>
-                        <span
-                            tabIndex={0}
-                            role='img'
+                        <button
+                            type='button'
                             aria-label='Property description'
+                            style={{
+                                display: 'inline-flex',
+                                padding: 0,
+                                border: 0,
+                                background: 'transparent',
+                                color: 'inherit',
+                            }}
                         >
                             <faIcons.FaCircleInfo
                                 aria-hidden='true'
@@ -46,7 +55,7 @@ export const NameCell = ({
                                     fontSize: '0.875rem',
                                 }}
                             />
-                        </span>
+                        </button>
                     </Tooltip>
                 )}
             </div>
@@ -56,6 +65,7 @@ export const NameCell = ({
     return (
         <Tooltip content={validationError} position='top' className='cratis:w-full'>
             <input
+                aria-label={propertyNameLabel}
                 value={rowData.name || ''}
                 onChange={(event) =>
                     onUpdate(rowData.name || '', 'name', event.target.value)
diff --git a/Source/SchemaEditor/SchemaEditor.stories.tsx b/Source/SchemaEditor/SchemaEditor.stories.tsx
index 3734f981..475e8302 100644
--- a/Source/SchemaEditor/SchemaEditor.stories.tsx
+++ b/Source/SchemaEditor/SchemaEditor.stories.tsx
@@ -3,11 +3,16 @@
 
 import React, { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from 'storybook/test';
 import { SchemaEditor } from './SchemaEditor';
-import { JsonSchema } from '../types/JsonSchema';
+import type { JsonSchema } from '../types/JsonSchema';
+
+const onSchemaChange = fn();
+const onSave = fn();
+const onCancel = fn();
 
 const meta: Meta<typeof SchemaEditor> = {
-    title: 'Components/SchemaEditor',
+    title: 'SchemaEditor/SchemaEditor',
     component: SchemaEditor,
     tags: ['autodocs'],
     parameters: {
@@ -96,10 +101,10 @@ export const Interactive: Story = {
                     canEdit={true}
                     onChange={(newSchema) => {
                         setSchema(newSchema);
-                        console.log('Schema changed:', newSchema);
+                        onSchemaChange(newSchema);
                     }}
-                    onSave={() => console.log('Save clicked', schema)}
-                    onCancel={() => console.log('Cancel clicked')}
+                    onSave={() => onSave(schema)}
+                    onCancel={onCancel}
                 />
             </div>
         );
@@ -111,9 +116,9 @@ export const ViewMode: Story = {
         schema: sampleSchema,
         eventTypeName: 'User',
         canEdit: true,
-        onChange: () => console.log('Schema changed'),
-        onSave: () => console.log('Save clicked'),
-        onCancel: () => console.log('Cancel clicked'),
+        onChange: onSchemaChange,
+        onSave,
+        onCancel,
     },
 };
 
@@ -123,9 +128,36 @@ export const EditMode: Story = {
         eventTypeName: 'User',
         canEdit: true,
         editMode: true,
-        onChange: () => console.log('Schema changed'),
-        onSave: () => console.log('Save clicked'),
-        onCancel: () => console.log('Cancel clicked'),
+        onChange: onSchemaChange,
+        onSave,
+        onCancel,
+    },
+};
+
+export const LocalizedLabels: Story = {
+    args: {
+        schema: sampleSchema,
+        eventTypeName: 'Bruker',
+        canEdit: true,
+        editMode: true,
+        onChange: onSchemaChange,
+        onSave,
+        onCancel,
+        labels: {
+            edit: 'Rediger',
+            save: 'Lagre',
+            cancel: 'Avbryt',
+            addProperty: 'Legg til egenskap',
+            actions: 'Handlinger',
+            navigateBack: 'Naviger tilbake',
+            emptyMessage: 'Ingen egenskaper',
+            navigateToItemDefinition: 'Åpne elementdefinisjon',
+            navigateToProperties: 'Åpne egenskaper',
+            propertyName: 'Egenskapsnavn',
+            propertyType: 'Egenskapstype',
+            arrayItemType: 'Elementtype',
+            deleteProperty: 'Slett egenskap',
+        },
     },
 };
 
@@ -135,7 +167,7 @@ export const ReadOnly: Story = {
         eventTypeName: 'User',
         canEdit: false,
         canNotEditReason: 'Schema is locked for editing',
-        onChange: () => console.log('Schema changed'),
+        onChange: onSchemaChange,
     },
 };
 
@@ -150,9 +182,9 @@ export const EmptySchema: Story = {
         eventTypeName: 'NewType',
         canEdit: true,
         editMode: true,
-        onChange: () => console.log('Schema changed'),
-        onSave: () => console.log('Save clicked'),
-        onCancel: () => console.log('Cancel clicked'),
+        onChange: onSchemaChange,
+        onSave,
+        onCancel,
     },
 };
 
@@ -179,6 +211,6 @@ export const SimpleSchema: Story = {
         schema: simpleSchema,
         eventTypeName: 'SimpleType',
         canEdit: true,
-        onChange: () => console.log('Schema changed'),
+        onChange: onSchemaChange,
     },
 };
diff --git a/Source/SchemaEditor/SchemaEditor.tsx b/Source/SchemaEditor/SchemaEditor.tsx
index dbaef208..baa0174f 100644
--- a/Source/SchemaEditor/SchemaEditor.tsx
+++ b/Source/SchemaEditor/SchemaEditor.tsx
@@ -38,6 +38,12 @@ export interface SchemaEditorLabels {
     navigateToItemDefinition: string;
     /** Accessible name for the "drill into object properties" button. */
     navigateToProperties: string;
+    /** Accessible name for a property-name input. */
+    propertyName: string;
+    /** Accessible name for a property-type selector. */
+    propertyType: string;
+    /** Accessible name for an array item-type selector. */
+    arrayItemType: string;
     /** Accessible name for the "remove property" button. */
     deleteProperty: string;
 }
@@ -53,6 +59,9 @@ export const defaultSchemaEditorLabels: SchemaEditorLabels = {
     emptyMessage: 'No properties defined',
     navigateToItemDefinition: 'Navigate to item definition',
     navigateToProperties: 'Navigate to object properties',
+    propertyName: 'Property name',
+    propertyType: 'Property type',
+    arrayItemType: 'Array item type',
     deleteProperty: 'Delete property',
 };
 
@@ -445,10 +454,13 @@ export const SchemaEditor = ({
                                             content={canNotEditReason}
                                             position='bottom'
                                         >
-                                            <span
-                                                tabIndex={0}
-                                                role='note'
+                                            <button
+                                                type='button'
+                                                aria-disabled='true'
                                                 style={{
+                                                    border: 0,
+                                                    background: 'transparent',
+                                                    color: 'inherit',
                                                     cursor: 'not-allowed',
                                                     opacity: 0.6,
                                                     display: 'inline-flex',
@@ -458,7 +470,7 @@ export const SchemaEditor = ({
                                             >
                                                 {item.icon}
                                                 <span>{item.label}</span>
-                                            </span>
+                                            </button>
                                         </Tooltip>
                                     )
                                   : undefined,
@@ -641,6 +653,7 @@ export const SchemaEditor = ({
                                 isEditMode={isEditMode}
                                 onUpdate={updateProperty}
                                 validationError={validationErrors[rowData.id!]}
+                                propertyNameLabel={l.propertyName}
                             />
                         )}
                         style={{ width: '30%' }}
diff --git a/Source/SchemaEditor/TypeCell.tsx b/Source/SchemaEditor/TypeCell.tsx
index 0dd573b7..1e5a1721 100644
--- a/Source/SchemaEditor/TypeCell.tsx
+++ b/Source/SchemaEditor/TypeCell.tsx
@@ -159,6 +159,7 @@ export const TypeCell = ({
     return (
         <div className='cratis:flex cratis:items-center cratis:gap-2 cratis:w-full' style={{ minHeight: '2.5rem' }}>
             <Dropdown<string>
+                aria-label={labels.propertyType}
                 value={currentValue}
                 options={allTypeOptions}
                 optionLabel='label'
@@ -178,6 +179,7 @@ export const TypeCell = ({
                         of
                     </span>
                     <Dropdown<string>
+                        aria-label={labels.arrayItemType}
                         value={rowData.items.type || 'string'}
                         options={allTypeOptions}
                         optionLabel='label'
diff --git a/Source/TimeMachine/EventsView.stories.tsx b/Source/TimeMachine/EventsView.stories.tsx
index 14f14bca..c56f7293 100644
--- a/Source/TimeMachine/EventsView.stories.tsx
+++ b/Source/TimeMachine/EventsView.stories.tsx
@@ -76,7 +76,7 @@ export const Default: Story = {
         events: sampleEvents,
     },
     render: (args) => (
-        <div style={{ height: '600px', background: '#1a1a1a' }}>
+        <div className='time-machine' style={{ height: '600px' }}>
             <EventsView {...args} />
         </div>
     )
@@ -87,7 +87,7 @@ export const SingleEvent: Story = {
         events: [sampleEvents[0]],
     },
     render: (args) => (
-        <div style={{ height: '600px', background: '#1a1a1a' }}>
+        <div className='time-machine' style={{ height: '600px' }}>
             <EventsView {...args} />
         </div>
     )
@@ -98,7 +98,7 @@ export const EmptyEvents: Story = {
         events: [],
     },
     render: (args) => (
-        <div style={{ height: '600px', background: '#1a1a1a' }}>
+        <div className='time-machine' style={{ height: '600px' }}>
             <EventsView {...args} />
         </div>
     )
diff --git a/Source/TimeMachine/Properties.css b/Source/TimeMachine/Properties.css
index 1e41ecc8..ffc28928 100644
--- a/Source/TimeMachine/Properties.css
+++ b/Source/TimeMachine/Properties.css
@@ -33,7 +33,7 @@
 }
 
 .tm-properties-null {
-    color: var(--tm-text-faint, rgba(255, 255, 255, 0.4));
+    color: var(--tm-text-faint, var(--cratis-text-color-secondary));
 }
 
 .tm-properties-boolean-true {
diff --git a/Source/TimeMachine/Properties.stories.tsx b/Source/TimeMachine/Properties.stories.tsx
index a2909daa..e73d03ad 100644
--- a/Source/TimeMachine/Properties.stories.tsx
+++ b/Source/TimeMachine/Properties.stories.tsx
@@ -30,7 +30,7 @@ export const Default: Story = {
         data: sampleData,
     },
     render: (args) => (
-        <div style={{ padding: '20px', background: '#1a1a1a', minHeight: '400px' }}>
+        <div className='time-machine' style={{ height: '400px', padding: '20px' }}>
             <Properties {...args} />
         </div>
     )
@@ -42,7 +42,7 @@ export const LeftAligned: Story = {
         align: 'left',
     },
     render: (args) => (
-        <div style={{ padding: '20px', background: '#1a1a1a', minHeight: '400px' }}>
+        <div className='time-machine' style={{ height: '400px', padding: '20px' }}>
             <Properties {...args} />
         </div>
     )
@@ -54,7 +54,7 @@ export const RightAligned: Story = {
         align: 'right',
     },
     render: (args) => (
-        <div style={{ padding: '20px', background: '#1a1a1a', minHeight: '400px' }}>
+        <div className='time-machine' style={{ height: '400px', padding: '20px' }}>
             <Properties {...args} />
         </div>
     )
@@ -71,7 +71,7 @@ export const WithNullValues: Story = {
         },
     },
     render: (args) => (
-        <div style={{ padding: '20px', background: '#1a1a1a', minHeight: '400px' }}>
+        <div className='time-machine' style={{ height: '400px', padding: '20px' }}>
             <Properties {...args} />
         </div>
     )
diff --git a/Source/TimeMachine/TimeMachine.stories.tsx b/Source/TimeMachine/TimeMachine.stories.tsx
index 1f965e60..8ad1810e 100644
--- a/Source/TimeMachine/TimeMachine.stories.tsx
+++ b/Source/TimeMachine/TimeMachine.stories.tsx
@@ -140,6 +140,28 @@ export const StartAtLatestVersion: Story = {
     )
 };
 
+export const LocalizedLabels: Story = {
+    args: {
+        versions: sampleVersions,
+        currentVersionIndex: 1,
+        labels: {
+            readModelView: 'Lesemodell',
+            eventsView: 'Hendelser',
+            previousVersion: 'Forrige versjon',
+            nextVersion: 'Neste versjon',
+            showRelatedEvents: 'Vis relaterte hendelser',
+            showReadModelSnapshot: 'Vis lesemodell',
+            scrollToTop: 'Rull til toppen',
+            scrollToBottom: 'Rull til bunnen',
+        },
+    },
+    render: (args) => (
+        <div style={{ height: '100vh', width: '100vw' }}>
+            <TimeMachine {...args} />
+        </div>
+    ),
+};
+
 export const HighScrollSensitivity: Story = {
     args: {
         versions: sampleVersions,
diff --git a/Source/Toolbar/Toolbar.stories.tsx b/Source/Toolbar/Toolbar.stories.tsx
index 78b95244..4fcc0c09 100644
--- a/Source/Toolbar/Toolbar.stories.tsx
+++ b/Source/Toolbar/Toolbar.stories.tsx
@@ -2,6 +2,7 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import type { Meta, StoryObj } from '@storybook/react';
+import { expect, userEvent, waitFor, within } from 'storybook/test';
 import { useMemo, useState, type DragEvent } from 'react';
 import type { IconType } from 'react-icons';
 import {
@@ -69,7 +70,7 @@ import { ToolbarSlot, ToolbarSlotProvider } from './ToolbarSlot';
 import { ToolbarLayout } from './ToolbarLayout';
 
 const meta: Meta<typeof Toolbar> = {
-    title: 'Components/Toolbar',
+    title: 'Toolbar/Toolbar',
     component: Toolbar,
     parameters: {
         layout: 'centered',
@@ -80,6 +81,31 @@ export default meta;
 
 type Story = StoryObj<typeof Toolbar>;
 
+const exerciseToolbarOverlay = async (
+    canvasElement: HTMLElement,
+    triggerName: string,
+    itemName: string,
+    triggerIndex = 0,
+) => {
+    const canvas = within(canvasElement);
+    const findTrigger = () =>
+        canvas
+            .getAllByRole('button', { name: triggerName })
+            .filter((button) => button.hasAttribute('aria-expanded'))[triggerIndex];
+    const trigger = findTrigger();
+    if (!trigger) throw new Error(`Could not find the ${triggerName} toolbar trigger.`);
+    await expect(trigger).toHaveAttribute('aria-expanded', 'false');
+    await userEvent.click(trigger);
+    await waitFor(() => expect(findTrigger()).toHaveAttribute('aria-expanded', 'true'));
+    const item = await canvas.findByRole('button', { name: itemName });
+    await userEvent.click(item);
+    await userEvent.keyboard('{Escape}');
+    await waitFor(() => expect(findTrigger()).toHaveAttribute('aria-expanded', 'false'));
+    await waitFor(() => expect(findTrigger()).toHaveFocus());
+    await userEvent.click(findTrigger());
+    await waitFor(() => expect(findTrigger()).toHaveAttribute('aria-expanded', 'true'));
+};
+
 const toolIcons: Record<string, IconType> = {
     'align-center': FaAlignCenter,
     'align-left': FaAlignLeft,
@@ -168,6 +194,8 @@ const folderIcons: string[] = [
  * Consumer-owned icon-font class strings remain supported, while React nodes work without extra CSS.
  */
 export const WithReactNodeIcons: Story = {
+    play: ({ canvasElement }) =>
+        exerciseToolbarOverlay(canvasElement, 'More shapes', 'Triangle'),
     render: () => {
         const CircleIcon = () => (
             <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='currentColor' aria-hidden='true'>
@@ -380,6 +408,7 @@ export const ZoomBar: Story = {
  * Click the button again or anywhere outside the panel to collapse it.
  */
 export const WithFanOut: Story = {
+    play: ({ canvasElement }) => exerciseToolbarOverlay(canvasElement, 'Shapes', 'Info'),
     render: () => {
         const WithFanOutDemo = () => {
             const [activeTool, setActiveTool] = useState<string>('select');
@@ -430,6 +459,7 @@ export const WithFanOut: Story = {
 
 /** Demonstrates a {@link ToolbarFanOutItem} that fans out downwards. */
 export const WithFanOutDown: Story = {
+    play: ({ canvasElement }) => exerciseToolbarOverlay(canvasElement, 'Shapes', 'Info'),
     render: () => (
         <Toolbar orientation='horizontal'>
             <ToolbarButton icon={<ToolGlyph name='arrow-up-left' />} title='Select' tooltipPosition='bottom' />
@@ -450,6 +480,8 @@ export const WithFanOutDown: Story = {
 
 /** Demonstrates a folder with a single nested button. */
 export const WithFolderOneButton: Story = {
+    play: ({ canvasElement }) =>
+        exerciseToolbarOverlay(canvasElement, 'Folder (1 item)', 'Action 1'),
     render: () => (
         <Toolbar>
             <ToolbarButton icon={<ToolGlyph name='arrow-up-left' />} title='Select' />
@@ -463,6 +495,8 @@ export const WithFolderOneButton: Story = {
 
 /** Demonstrates a folder with four nested buttons in a balanced 2x2 grid. */
 export const WithFolderFourButtons: Story = {
+    play: ({ canvasElement }) =>
+        exerciseToolbarOverlay(canvasElement, 'Folder (4 items)', 'Action 2'),
     render: () => (
         <Toolbar>
             <ToolbarButton icon={<ToolGlyph name='arrow-up-left' />} title='Select' />
@@ -478,6 +512,8 @@ export const WithFolderFourButtons: Story = {
 
 /** Demonstrates a folder with twenty nested buttons and dynamic multi-row sizing. */
 export const WithFolderTwentyButtons: Story = {
+    play: ({ canvasElement }) =>
+        exerciseToolbarOverlay(canvasElement, 'Folder (20 items)', 'Action 20'),
     render: () => (
         <Toolbar>
             <ToolbarButton icon={<ToolGlyph name='arrow-up-left' />} title='Select' />
@@ -590,6 +626,8 @@ export const WithGroups: Story = {
  * adds important context.
  */
 export const WithFolderListMode: Story = {
+    play: ({ canvasElement }) =>
+        exerciseToolbarOverlay(canvasElement, 'Tools', 'Draw freehand'),
     render: () => (
         <Toolbar>
             <ToolbarButton icon={<ToolGlyph name='arrow-up-left' />} title='Select' />
@@ -608,6 +646,10 @@ export const WithFolderListMode: Story = {
  * Side-by-side comparison of grid mode (default) and list mode for {@link ToolbarFolder}.
  */
 export const FolderGridVsList: Story = {
+    play: async ({ canvasElement }) => {
+        await exerciseToolbarOverlay(canvasElement, 'Tools', 'Draw', 0);
+        await exerciseToolbarOverlay(canvasElement, 'Tools', 'Draw freehand', 1);
+    },
     render: () => (
         <div className='cratis:flex cratis:gap-8 cratis:items-start'>
             <div className='cratis:flex cratis:flex-col cratis:items-center cratis:gap-2'>
diff --git a/Source/Toolbar/ToolbarButton.tsx b/Source/Toolbar/ToolbarButton.tsx
index c5005eca..beaab15b 100644
--- a/Source/Toolbar/ToolbarButton.tsx
+++ b/Source/Toolbar/ToolbarButton.tsx
@@ -11,6 +11,7 @@ import { Tooltip } from '../Common/Tooltip';
 import type { TooltipPosition } from '../Common/Tooltip';
 import { useToolbarDragContext } from './ToolbarDragContext';
 import { useToolbarFolderMode } from './ToolbarFolderContext';
+import { useToolbarItemVisibility } from './ToolbarItemVisibilityContext';
 
 /** Stable part attributes for {@link ToolbarButton}. */
 export interface ToolbarButtonParts {
@@ -87,6 +88,7 @@ export const ToolbarButton = ({
 }: ToolbarButtonProps) => {
     const dragContext = useToolbarDragContext();
     const folderMode = useToolbarFolderMode();
+    const isToolbarItemVisible = useToolbarItemVisibility();
     const isListMode = folderMode === 'list';
     const isDraggable = draggable ?? dragContext.draggable;
 
@@ -159,7 +161,11 @@ export const ToolbarButton = ({
     );
 
     return (
-        <Tooltip content={title} position={tooltipPosition}>
+        <Tooltip
+            content={title}
+            position={tooltipPosition}
+            disabled={!isToolbarItemVisible}
+        >
             <button
                 {...pt?.root}
                 type='button'
diff --git a/Source/Toolbar/ToolbarFanOutItem.tsx b/Source/Toolbar/ToolbarFanOutItem.tsx
index 8332c89a..24792723 100644
--- a/Source/Toolbar/ToolbarFanOutItem.tsx
+++ b/Source/Toolbar/ToolbarFanOutItem.tsx
@@ -15,6 +15,10 @@ import { IconDisplay } from '../Common/Icon';
 import type { Icon } from '../Common/Icon';
 import { Tooltip } from '../Common/Tooltip';
 import type { TooltipPosition } from '../Common/Tooltip';
+import {
+    ToolbarItemVisibilityProvider,
+    useToolbarItemVisibility,
+} from './ToolbarItemVisibilityContext';
 
 /** Stable part attributes for {@link ToolbarFanOutItem}. */
 export interface ToolbarFanOutParts {
@@ -71,6 +75,7 @@ export const ToolbarFanOutItem = ({
 }: ToolbarFanOutItemProps) => {
     const [isExpanded, setIsExpanded] = useState(false);
     const [isSettled, setIsSettled] = useState(false);
+    const isToolbarItemVisible = useToolbarItemVisibility();
     const containerRef = useRef<HTMLDivElement>(null);
     const triggerRef = useRef<HTMLButtonElement>(null);
     const panelRef = useRef<HTMLDivElement>(null);
@@ -129,15 +134,16 @@ export const ToolbarFanOutItem = ({
         const handleEscape = (event: KeyboardEvent) => {
             if (event.key !== 'Escape') return;
             event.preventDefault();
+            event.stopPropagation();
             collapse();
-            triggerRef.current?.focus();
+            window.setTimeout(() => triggerRef.current?.focus(), 0);
         };
 
         document.addEventListener('mousedown', handleClickOutside);
-        document.addEventListener('keydown', handleEscape);
+        document.addEventListener('keydown', handleEscape, true);
         return () => {
             document.removeEventListener('mousedown', handleClickOutside);
-            document.removeEventListener('keydown', handleEscape);
+            document.removeEventListener('keydown', handleEscape, true);
         };
     }, [isExpanded, collapse]);
 
@@ -154,7 +160,11 @@ export const ToolbarFanOutItem = ({
             data-cratis-part='fanout-root'
             ref={containerRef}
         >
-            <Tooltip content={tooltip} position={tooltipPosition} disabled={isExpanded}>
+            <Tooltip
+                content={tooltip}
+                position={tooltipPosition}
+                disabled={isExpanded || !isToolbarItemVisible}
+            >
                 <button
                     {...pt?.trigger}
                     ref={triggerRef}
@@ -184,7 +194,9 @@ export const ToolbarFanOutItem = ({
                 inert={!isExpanded}
                 onTransitionEnd={handleTransitionEnd}
             >
-                {children}
+                <ToolbarItemVisibilityProvider value={isExpanded && isToolbarItemVisible}>
+                    {children}
+                </ToolbarItemVisibilityProvider>
             </div>
         </div>
     );
diff --git a/Source/Toolbar/ToolbarFolder.tsx b/Source/Toolbar/ToolbarFolder.tsx
index d6fcec9f..470d7fae 100644
--- a/Source/Toolbar/ToolbarFolder.tsx
+++ b/Source/Toolbar/ToolbarFolder.tsx
@@ -17,6 +17,10 @@ import type { Icon } from '../Common/Icon';
 import { Tooltip } from '../Common/Tooltip';
 import type { TooltipPosition } from '../Common/Tooltip';
 import { ToolbarFolderContext } from './ToolbarFolderContext';
+import {
+    ToolbarItemVisibilityProvider,
+    useToolbarItemVisibility,
+} from './ToolbarItemVisibilityContext';
 import type { ToolbarFolderMode } from './ToolbarFolderContext';
 
 /** Stable part attributes for {@link ToolbarFolder}. */
@@ -85,6 +89,7 @@ export const ToolbarFolder = ({
     children,
 }: ToolbarFolderProps) => {
     const [isExpanded, setIsExpanded] = useState(false);
+    const isToolbarItemVisible = useToolbarItemVisibility();
     const containerRef = useRef<HTMLDivElement>(null);
     const triggerRef = useRef<HTMLButtonElement>(null);
     const generatedPanelId = useId();
@@ -126,15 +131,16 @@ export const ToolbarFolder = ({
         const handleEscape = (event: KeyboardEvent) => {
             if (event.key !== 'Escape') return;
             event.preventDefault();
+            event.stopPropagation();
             setIsExpanded(false);
-            triggerRef.current?.focus();
+            window.setTimeout(() => triggerRef.current?.focus(), 0);
         };
 
         document.addEventListener('mousedown', handleClickOutside);
-        document.addEventListener('keydown', handleEscape);
+        document.addEventListener('keydown', handleEscape, true);
         return () => {
             document.removeEventListener('mousedown', handleClickOutside);
-            document.removeEventListener('keydown', handleEscape);
+            document.removeEventListener('keydown', handleEscape, true);
         };
     }, [isExpanded]);
 
@@ -151,7 +157,11 @@ export const ToolbarFolder = ({
                 data-cratis-part='toolbar-folder'
                 ref={containerRef}
             >
-                <Tooltip content={title} position={tooltipPosition} disabled={isExpanded}>
+                <Tooltip
+                    content={title}
+                    position={tooltipPosition}
+                    disabled={isExpanded || !isToolbarItemVisible}
+                >
                     <button
                         {...pt?.trigger}
                         ref={triggerRef}
@@ -187,7 +197,11 @@ export const ToolbarFolder = ({
                     aria-hidden={!isExpanded}
                     inert={!isExpanded}
                 >
-                    {items}
+                    <ToolbarItemVisibilityProvider
+                        value={isExpanded && isToolbarItemVisible}
+                    >
+                        {items}
+                    </ToolbarItemVisibilityProvider>
                 </div>
             </div>
         </ToolbarFolderContext.Provider>
diff --git a/Source/Toolbar/ToolbarItemVisibilityContext.ts b/Source/Toolbar/ToolbarItemVisibilityContext.ts
new file mode 100644
index 00000000..2ae61878
--- /dev/null
+++ b/Source/Toolbar/ToolbarItemVisibilityContext.ts
@@ -0,0 +1,10 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { createContext, useContext } from 'react';
+
+const ToolbarItemVisibilityContext = createContext(true);
+
+export const ToolbarItemVisibilityProvider = ToolbarItemVisibilityContext.Provider;
+
+export const useToolbarItemVisibility = () => useContext(ToolbarItemVisibilityContext);
diff --git a/Source/Toolbar/ToolbarLayout.tsx b/Source/Toolbar/ToolbarLayout.tsx
index 6794d7a0..2746924f 100644
--- a/Source/Toolbar/ToolbarLayout.tsx
+++ b/Source/Toolbar/ToolbarLayout.tsx
@@ -11,6 +11,7 @@ import {
     useState,
 } from 'react';
 import { useToolbarSlot } from './ToolbarSlot';
+import { ToolbarItemVisibilityProvider } from './ToolbarItemVisibilityContext';
 
 /** How long the fade-out animation runs (ms). React unmounts exiting content after this. */
 const LAYOUT_TRANSITION_MS = 220;
@@ -108,7 +109,9 @@ const LayoutTransition = ({
                     aria-hidden='true'
                     inert
                 >
-                    {exiting}
+                    <ToolbarItemVisibilityProvider value={false}>
+                        {exiting}
+                    </ToolbarItemVisibilityProvider>
                 </div>
             )}
         </div>
diff --git a/Source/Toolbar/ToolbarSection.tsx b/Source/Toolbar/ToolbarSection.tsx
index 7954938d..2b90a40a 100644
--- a/Source/Toolbar/ToolbarSection.tsx
+++ b/Source/Toolbar/ToolbarSection.tsx
@@ -16,6 +16,7 @@ import {
 
 import type { ToolbarContextProps } from './ToolbarContext';
 import { useToolbarSlot } from './ToolbarSlot';
+import { ToolbarItemVisibilityProvider } from './ToolbarItemVisibilityContext';
 
 /** Width/height transition duration used by the section resize animation (ms). */
 const SECTION_TRANSITION_MS = 350;
@@ -214,7 +215,11 @@ export const ToolbarSection = ({
                         aria-hidden={!isActive}
                         inert={!isActive}
                     >
-                        <ContextRenderer slotName={slotName}>{contextChildren}</ContextRenderer>
+                        <ToolbarItemVisibilityProvider value={isActive}>
+                            <ContextRenderer slotName={slotName}>
+                                {contextChildren}
+                            </ContextRenderer>
+                        </ToolbarItemVisibilityProvider>
                     </div>
                 );
             })}
diff --git a/Source/Toolbar/for_ToolbarComposition/when_rendering_hidden_items.tsx b/Source/Toolbar/for_ToolbarComposition/when_rendering_hidden_items.tsx
new file mode 100644
index 00000000..b1a62397
--- /dev/null
+++ b/Source/Toolbar/for_ToolbarComposition/when_rendering_hidden_items.tsx
@@ -0,0 +1,59 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { expect } from 'chai';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, it } from 'vitest';
+import { CratisComponentsProvider } from '../../Common/CratisComponentsProvider';
+import { ToolbarButton } from '../ToolbarButton';
+import { ToolbarContext } from '../ToolbarContext';
+import { ToolbarFanOutItem } from '../ToolbarFanOutItem';
+import { ToolbarFolder } from '../ToolbarFolder';
+import { ToolbarSection } from '../ToolbarSection';
+
+const icon = <span aria-hidden='true'>•</span>;
+
+const findButton = (html: string, label: string) => {
+    const labelIndex = html.indexOf(`aria-label="${label}"`);
+    const startIndex = html.lastIndexOf('<button', labelIndex);
+    const endIndex = html.indexOf('>', labelIndex);
+    expect(labelIndex, `Expected a button labelled ${label}`).to.be.greaterThan(-1);
+    return html.slice(startIndex, endIndex + 1);
+};
+
+describe('when rendering hidden toolbar items', () => {
+    const html = renderToStaticMarkup(
+        <CratisComponentsProvider>
+            <ToolbarSection activeContext='visible'>
+                <ToolbarContext name='visible'>
+                    <ToolbarButton icon={icon} title='Visible context tool' />
+                </ToolbarContext>
+                <ToolbarContext name='hidden'>
+                    <ToolbarButton icon={icon} title='Hidden context tool' />
+                </ToolbarContext>
+            </ToolbarSection>
+            <ToolbarFolder icon={icon} title='Folder'>
+                <ToolbarButton icon={icon} title='Hidden folder tool' />
+            </ToolbarFolder>
+            <ToolbarFanOutItem icon={icon} tooltip='Fan out'>
+                <ToolbarButton icon={icon} title='Hidden fan-out tool' />
+            </ToolbarFanOutItem>
+        </CratisComponentsProvider>,
+    );
+
+    it('should keep tooltip focus behavior on visible items', () => {
+        expect(findButton(html, 'Visible context tool')).to.include('tabindex="0"');
+    });
+
+    it('should not install tooltip focus behavior in an inactive context', () => {
+        expect(findButton(html, 'Hidden context tool')).not.to.include('tabindex');
+    });
+
+    it('should not install tooltip focus behavior in a collapsed folder', () => {
+        expect(findButton(html, 'Hidden folder tool')).not.to.include('tabindex');
+    });
+
+    it('should not install tooltip focus behavior in a collapsed fan-out', () => {
+        expect(findButton(html, 'Hidden fan-out tool')).not.to.include('tabindex');
+    });
+});
diff --git a/Source/Toolbar/for_ToolbarPanels/when_escape_is_pressed.tsx b/Source/Toolbar/for_ToolbarPanels/when_escape_is_pressed.tsx
index 0f49d288..e06afb03 100644
--- a/Source/Toolbar/for_ToolbarPanels/when_escape_is_pressed.tsx
+++ b/Source/Toolbar/for_ToolbarPanels/when_escape_is_pressed.tsx
@@ -53,7 +53,10 @@ describe('when Escape is pressed in an expanded Toolbar panel', () => {
         nested.focus();
 
         await act(async () => {
-            document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+            nested.dispatchEvent(
+                new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }),
+            );
+            await new Promise((resolve) => window.setTimeout(resolve, 0));
         });
 
         expect(panel.hasAttribute('inert')).to.equal(true);
@@ -63,7 +66,11 @@ describe('when Escape is pressed in an expanded Toolbar panel', () => {
     it('should_close_a_folder_and_restore_trigger_focus', async () => {
         await verifyEscape(
             <ToolbarFolder icon={icon} title='Tools'>
-                <ToolbarButton icon={icon} title='Nested tool' />
+                <ToolbarButton
+                    icon={icon}
+                    title='Nested tool'
+                    pt={{ root: { onKeyDown: (event) => event.stopPropagation() } }}
+                />
             </ToolbarFolder>,
             'toolbar-folder-trigger',
             'toolbar-folder-panel',
@@ -73,7 +80,11 @@ describe('when Escape is pressed in an expanded Toolbar panel', () => {
     it('should_close_a_fanout_and_restore_trigger_focus', async () => {
         await verifyEscape(
             <ToolbarFanOutItem icon={icon} tooltip='Shapes'>
-                <ToolbarButton icon={icon} title='Nested shape' />
+                <ToolbarButton
+                    icon={icon}
+                    title='Nested shape'
+                    pt={{ root: { onKeyDown: (event) => event.stopPropagation() } }}
+                />
             </ToolbarFanOutItem>,
             'fanout-trigger',
             'fanout-panel',
diff --git a/Source/package.json b/Source/package.json
index 63dc6423..9205b760 100644
--- a/Source/package.json
+++ b/Source/package.json
@@ -21,6 +21,7 @@
         "!dist/**/given.*",
         "!dist/**/storybook-static/**",
         "!dist/**/vite.config.*",
+        "!dist/**/vitest.storybook.config.*",
         "!dist/**/vitest.setup.*",
         "!dist/**/*.tsbuildinfo",
         "!dist/cjs/**"
@@ -135,10 +136,15 @@
         "verify-no-pixi-consumer": "node ./scripts/verify-no-pixi-consumer.mjs",
         "verify-spatial-consumer": "node ./scripts/verify-spatial-consumer.mjs",
         "verify-provider-context-identity": "node ./scripts/verify-provider-context-identity.mjs",
+        "typecheck-stories": "node ../node_modules/typescript/bin/tsc -p tsconfig.stories.json",
+        "test-storybook": "yarn test-storybook:light && yarn test-storybook:dark",
+        "test-storybook:light": "STORYBOOK_APPEARANCE=baseline-light yarn g:test --config vitest.storybook.config.ts",
+        "test-storybook:dark": "STORYBOOK_APPEARANCE=baseline-dark yarn g:test --config vitest.storybook.config.ts",
+        "verify-storybook-index": "node ./scripts/verify-storybook-index.mjs",
         "lint": "yarn g:lint",
         "lint:ci": "yarn g:lint:ci",
         "test": "yarn g:test",
-        "ci": "yarn g:ci",
+        "ci": "yarn g:ci && yarn typecheck-stories",
         "up": "yarn g:up",
         "dev": "npx storybook dev -p 6006",
         "build-storybook": "npx storybook build"
diff --git a/Source/scripts/verify-storybook-index.mjs b/Source/scripts/verify-storybook-index.mjs
new file mode 100644
index 00000000..b2538a95
--- /dev/null
+++ b/Source/scripts/verify-storybook-index.mjs
@@ -0,0 +1,81 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { existsSync, readFileSync, readdirSync } from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const sourceRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const output = path.resolve(sourceRoot, process.argv[2] ?? 'storybook-static');
+const indexPath = path.join(output, 'index.json');
+
+const fail = (message) => {
+    console.error(`verify-storybook-index: ${message}`);
+    process.exit(1);
+};
+
+const collectStoryFiles = (directory) => {
+    const files = [];
+    for (const entry of readdirSync(directory, { withFileTypes: true })) {
+        if (['dist', 'node_modules', 'storybook-static'].includes(entry.name)) continue;
+        const entryPath = path.join(directory, entry.name);
+        if (entry.isDirectory()) files.push(...collectStoryFiles(entryPath));
+        else if (entry.isFile() && /\.stories\.(?:ts|tsx)$/u.test(entry.name)) {
+            files.push(
+                `./${path.relative(sourceRoot, entryPath).split(path.sep).join('/')}`,
+            );
+        }
+    }
+    return files;
+};
+
+if (!existsSync(indexPath)) fail(`missing ${indexPath}; build Storybook first.`);
+let index;
+try {
+    index = JSON.parse(readFileSync(indexPath, 'utf8'));
+} catch (error) {
+    fail(error instanceof Error ? error.message : String(error));
+}
+
+const entries = Object.values(index.entries ?? {});
+const storyEntries = entries.filter((entry) => entry.type === 'story');
+const docsEntries = entries.filter((entry) => entry.type === 'docs');
+const storyFiles = collectStoryFiles(sourceRoot);
+const countByImportPath = (selectedEntries) => {
+    const counts = new Map();
+    for (const entry of selectedEntries) {
+        counts.set(entry.importPath, (counts.get(entry.importPath) ?? 0) + 1);
+    }
+    return counts;
+};
+const storyCounts = countByImportPath(storyEntries);
+const docsCounts = countByImportPath(docsEntries);
+
+if (storyEntries.length === 0) fail('no stories were indexed.');
+
+const missingStories = storyFiles.filter((file) => !storyCounts.has(file));
+const invalidDocs = storyFiles.filter((file) => docsCounts.get(file) !== 1);
+const unknownModules = [...new Set([...storyCounts.keys(), ...docsCounts.keys()])].filter(
+    (file) => !storyFiles.includes(file),
+);
+if (missingStories.length || invalidDocs.length || unknownModules.length) {
+    const details = [
+        missingStories.length
+            ? `modules without stories: ${missingStories.join(', ')}`
+            : '',
+        invalidDocs.length
+            ? `modules without exactly one autodocs page: ${invalidDocs
+                  .map((file) => `${file} (${docsCounts.get(file) ?? 0})`)
+                  .join(', ')}`
+            : '',
+        unknownModules.length
+            ? `indexed unknown modules: ${unknownModules.join(', ')}`
+            : '',
+    ].filter(Boolean);
+    fail(details.join('; '));
+}
+
+console.log(
+    `Storybook index verified: ${storyEntries.length} stories and ${docsEntries.length} autodocs pages ` +
+        `from ${storyFiles.length} story files.`,
+);
diff --git a/Source/theme.css b/Source/theme.css
index 25997151..7fb2218c 100644
--- a/Source/theme.css
+++ b/Source/theme.css
@@ -21,7 +21,7 @@
 .cratis-theme.cratis-light,
 .cratis-dark .cratis-theme.cratis-light {
     color-scheme: light;
-    --cratis-primary-color: #3b82f6;
+    --cratis-primary-color: #2563eb;
     --cratis-primary-color-text: #ffffff;
     --cratis-primary-300: #93c5fd;
     --cratis-primary-400: #60a5fa;
@@ -79,6 +79,7 @@
     --cratis-action-background-hover: #93c5fd;
     --cratis-action-background-active: #bfdbfe;
     --cratis-action-text: #030712;
+    --cratis-red-500: #f87171;
     --cratis-info-background: #38bdf8;
     --cratis-info-text: #082f49;
     --cratis-success-background: #4ade80;
@@ -123,6 +124,7 @@
         --cratis-action-background-hover: #93c5fd;
         --cratis-action-background-active: #bfdbfe;
         --cratis-action-text: #030712;
+        --cratis-red-500: #f87171;
         --cratis-info-background: #38bdf8;
         --cratis-info-text: #082f49;
         --cratis-success-background: #4ade80;
diff --git a/Source/tokens.css b/Source/tokens.css
index 6a831253..f1c79a66 100644
--- a/Source/tokens.css
+++ b/Source/tokens.css
@@ -21,7 +21,7 @@
     --cratis-text-color: #4b5563;
     --cratis-text-color-secondary: #6b7280;
 
-    --cratis-primary-color: #3b82f6;
+    --cratis-primary-color: #2563eb;
     --cratis-primary-color-text: #ffffff;
     --cratis-primary-300: #93c5fd;
     --cratis-primary-400: #60a5fa;
diff --git a/Source/tsconfig.json b/Source/tsconfig.json
index 1098aef8..e9cde357 100644
--- a/Source/tsconfig.json
+++ b/Source/tsconfig.json
@@ -14,7 +14,9 @@
         "**/*.stories.ts",
         "**/*.stories.tsx",
         ".storybook/**",
+        "vite.config.ts",
         "vite.config.mts",
+        "vitest.storybook.config.ts",
         "node_modules",
         "../node_modules"
     ]
diff --git a/Source/tsconfig.stories.json b/Source/tsconfig.stories.json
new file mode 100644
index 00000000..7dfe2f91
--- /dev/null
+++ b/Source/tsconfig.stories.json
@@ -0,0 +1,15 @@
+{
+    "extends": "../tsconfig.json",
+    "compilerOptions": {
+        "baseUrl": ".",
+        "composite": false,
+        "declaration": false,
+        "declarationMap": false,
+        "sourceMap": false,
+        "noEmit": true,
+        "skipLibCheck": true,
+        "types": ["node"]
+    },
+    "include": ["./**/*.ts", "./**/*.tsx"],
+    "exclude": ["dist", "**/for_*/**", "node_modules", "../node_modules"]
+}
diff --git a/Source/vitest.storybook.config.ts b/Source/vitest.storybook.config.ts
new file mode 100644
index 00000000..a51a41aa
--- /dev/null
+++ b/Source/vitest.storybook.config.ts
@@ -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 path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
+import { playwright } from '@vitest/browser-playwright';
+import { defineConfig } from 'vitest/config';
+
+const directory = path.dirname(fileURLToPath(import.meta.url));
+
+export default defineConfig({
+    plugins: [
+        storybookTest({
+            configDir: path.join(directory, '.storybook'),
+            initialGlobals: {
+                appearance: process.env.STORYBOOK_APPEARANCE ?? 'baseline-dark',
+            },
+        }),
+    ],
+    test: {
+        name: 'storybook',
+        browser: {
+            enabled: true,
+            headless: true,
+            provider: playwright({}),
+            instances: [{ browser: 'chromium' }],
+        },
+    },
+});
diff --git a/package.json b/package.json
index a15cc559..b4a6bd90 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,8 @@
         "@rollup/plugin-node-resolve": "^16.0.3",
         "@rollup/plugin-typescript": "^12.3.0",
         "@storybook/addon-a11y": "^10.5.10",
+        "@storybook/addon-docs": "^10.5.10",
+        "@storybook/addon-vitest": "^10.5.10",
         "@storybook/react": "^10.5.10",
         "@storybook/react-vite": "^10.5.10",
         "@tailwindcss/postcss": "^4.3.3",
@@ -53,6 +55,7 @@
         "@typescript-eslint/eslint-plugin": "^8.68.0",
         "@typescript-eslint/parser": "^8.68.0",
         "@vitejs/plugin-react": "^6.1.0",
+        "@vitest/browser-playwright": "4.1.11",
         "@vitest/coverage-v8": "^4.1.11",
         "autoprefixer": "^10.5.4",
         "axe-core": "^4.13.0",
@@ -71,6 +74,7 @@
         "mocha": "^11.8.0",
         "module-alias": "^2.3.4",
         "npm-check-updates": "^23.1.0",
+        "playwright": "^1.62.1",
         "postcss": "^8.5.26",
         "prettier": "^3.9.6",
         "react": "^19.2.8",

From db9fcee1fbe50fb1bf2a68ad8a385576cf95b84e Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Wed, 26 Aug 2026 09:21:28 +0200
Subject: [PATCH 085/267] Strengthen Components 4 migration verification

Keep codemod and ESLint coverage aligned across JavaScript and TypeScript, require exact-version migration tooling, and make publication limitations explicit.

Expand Markdown and MDX verification with deterministic local links and correctly parsed external-link paths, while tightening onboarding and Filter accessibility guidance.
---
 .github/workflows/markdown-verification.yml   |  25 +++-
 .markdownlint.json                            |  14 +-
 Codemods/README.md                            |  20 ++-
 .../scripts/remove-root-namespace-imports.js  |  14 +-
 Codemods/test/cli.test.js                     |  25 ++++
 Documentation/Filter/index.md                 |  25 ++--
 Documentation/getting-started.mdx             |  23 +++-
 Documentation/index.mdx                       | 127 ++++++++++--------
 Documentation/migration-from-2.md             |  30 +++--
 Documentation/migration.md                    |  25 +++-
 Documentation/storybook.mdx                   |   4 +-
 Documentation/toc.yml                         |   2 -
 Documentation/tutorial/act-on-it.mdx          |   2 +-
 Documentation/tutorial/index.md               |   8 +-
 Documentation/tutorial/list-it.mdx            |   2 +-
 Documentation/verify-markdown.sh              |   1 +
 ESLint/README.md                              |   6 +-
 ESLint/index.js                               |   2 +-
 ESLint/test/rules.test.js                     |   9 ++
 README.md                                     |  16 ++-
 Source/MIGRATION.md                           |  23 +++-
 Source/README.md                              |  19 ++-
 22 files changed, 293 insertions(+), 129 deletions(-)

diff --git a/.github/workflows/markdown-verification.yml b/.github/workflows/markdown-verification.yml
index 68bb321a..03fff13f 100644
--- a/.github/workflows/markdown-verification.yml
+++ b/.github/workflows/markdown-verification.yml
@@ -41,6 +41,7 @@ jobs:
                   globs: |
                       README.md
                       Documentation/**/*.md
+                      Documentation/**/*.mdx
                       Source/*.md
                       Codemods/*.md
                       ESLint/*.md
@@ -51,12 +52,26 @@ jobs:
             - name: Checkout code
               uses: actions/checkout@v4
 
-            - name: Check links in Documentation
+            - name: Setup node
+              uses: actions/setup-node@v4
+              with:
+                  node-version: 23.x
+
+            - name: Check repository-local Markdown and MDX links
+              run: node Documentation/verify-local-links.mjs Documentation
+
+            - name: Check external links in consumer documentation
               uses: JustinBeckwith/linkinator-action@v1
               with:
-                  paths: 'Documentation/**/*.md'
+                  paths: |
+                      README.md
+                      Source/*.md
+                      Codemods/*.md
+                      ESLint/*.md
+                      Documentation/**/*.md
+                      Documentation/**/*.mdx
                   markdown: true
                   recurse: true
-                  redirects: allow
-                  statusCodes: '403:ok'
-                  linksToSkip: '^(https?:\/\/)?(localhost|127\.0\.0\.1)(:\d+)?(\/|$)'
+                  concurrency: 10
+                  retry: true
+                  linksToSkip: '^http:\/\/(localhost|127\.0\.0\.1):\d+\/(arc|components|chronicle|event-modeling|build-a-full-app)(\/|$), ^https:\/\/www\.npmjs\.com\/'
diff --git a/.markdownlint.json b/.markdownlint.json
index f9923d5b..1114b19f 100644
--- a/.markdownlint.json
+++ b/.markdownlint.json
@@ -3,9 +3,21 @@
   "default": true,
   "MD013": false,
   "MD033": {
-    "allowed_elements": ["antml:function_calls", "antml:invoke", "antml:parameter", "a"]
+    "allowed_elements": [
+      "antml:function_calls",
+      "antml:invoke",
+      "antml:parameter",
+      "a",
+      "Steps",
+      "Aside",
+      "CardGrid",
+      "SimpleCard",
+      "Card",
+      "StorybookEmbed"
+    ]
   },
   "MD041": false,
+  "MD046": false,
   "MD012": {
     "maximum": 3
   },
diff --git a/Codemods/README.md b/Codemods/README.md
index f15f2e49..9d86f826 100644
--- a/Codemods/README.md
+++ b/Codemods/README.md
@@ -49,7 +49,7 @@ already-migrated subpath import is never revisited.
 The complete namespace → subpath map and the approved-root-symbol allowlist live in
 [`lib/namespaceMap.js`](./lib/namespaceMap.js), mirrored from `Source/index.ts`. Contributors
 must update it and the
-[`ESLint` mirror](https://github.com/Cratis/Components/blob/main/ESLint/lib/rootNamespaceMap.js)
+`ESLint/lib/rootNamespaceMap.js` mirror
 together when a namespace subpath is added, renamed, or removed.
 
 ### What it refuses to guess
@@ -79,17 +79,23 @@ consumers are left exactly as they are.
 ### Use
 
 The packaged CLI requires Node.js 20 or newer and brings its own TypeScript parser; it does
-not depend on the consumer application's TypeScript version. Use the `npx` commands only with
-an exact published package version that contains this tool; contributors can run the repository
-source directly.
+not depend on the consumer application's TypeScript version. It scans JavaScript, JSX,
+TypeScript, and TSX sources, including `.mjs`, `.cjs`, `.mts`, and `.cts` variants. Use the
+same exact published version as the installed Components package; all three workspaces are
+released together. Contributors can run the repository source directly. If the exact codemod version is unavailable, do not substitute `latest`
+or another Components version: keep the application on its current package, apply the
+mapping table manually, or wait for a corrected publication.
 
 ```sh
+# Read the exact installed Components version (stable or prerelease):
+COMPONENTS_VERSION="$(node -p "require('@cratis/components/package.json').version")"
+
 # Preview what would change, without writing anything:
-npx --package @cratis/components-codemods \
+npx --package "@cratis/components-codemods@$COMPONENTS_VERSION" \
   cratis-components-remove-root-namespace-imports --check path/to/app/src
 
 # Apply the rewrite:
-npx --package @cratis/components-codemods \
+npx --package "@cratis/components-codemods@$COMPONENTS_VERSION" \
   cratis-components-remove-root-namespace-imports path/to/app/src
 
 # Contributors to this repository can run the workspace source directly:
@@ -112,6 +118,6 @@ cd Codemods && yarn test
 ```
 
 Repository fixtures for every supported and unsupported case live under
-[`Codemods/test/fixtures`](https://github.com/Cratis/Components/tree/main/Codemods/test/fixtures),
+`Codemods/test/fixtures`,
 each as an `input.ts`/`expected.ts` pair (`input.ts` and `expected.ts` are identical for an
 unsupported case, since nothing should change).
diff --git a/Codemods/scripts/remove-root-namespace-imports.js b/Codemods/scripts/remove-root-namespace-imports.js
index c3b2461b..7b3221ee 100755
--- a/Codemods/scripts/remove-root-namespace-imports.js
+++ b/Codemods/scripts/remove-root-namespace-imports.js
@@ -7,7 +7,16 @@ import { join, extname } from 'node:path';
 import { transformSource } from '../lib/transform.js';
 import { packageName as defaultPackageName } from '../lib/namespaceMap.js';
 
-const EXTENSIONS = new Set(['.ts', '.tsx', '.mts', '.cts']);
+const EXTENSIONS = new Set([
+    '.js',
+    '.jsx',
+    '.mjs',
+    '.cjs',
+    '.ts',
+    '.tsx',
+    '.mts',
+    '.cts',
+]);
 const SKIP_DIRS = new Set(['node_modules', 'dist', '.git', '.yarn']);
 
 function printUsage() {
@@ -26,7 +35,8 @@ function printUsage() {
             '  --package <name>  Package to migrate away from (default: @cratis/components).',
             '',
             '<path...> may be files or directories; directories are walked recursively for',
-            '.ts/.tsx/.mts/.cts files, skipping node_modules, dist, .git, and .yarn.',
+            '.js/.jsx/.mjs/.cjs/.ts/.tsx/.mts/.cts files, skipping node_modules,',
+            'dist, .git, and .yarn.',
         ].join('\n'),
     );
 }
diff --git a/Codemods/test/cli.test.js b/Codemods/test/cli.test.js
index c33cc736..ab3165b1 100644
--- a/Codemods/test/cli.test.js
+++ b/Codemods/test/cli.test.js
@@ -133,6 +133,31 @@ describe('remove-root-namespace-imports CLI', () => {
         );
     });
 
+    it('rewrites JavaScript and JSX files instead of silently skipping them', () => {
+        const javascript = path.join(dir, 'legacy.js');
+        const jsx = path.join(dir, 'Component.jsx');
+        writeFileSync(
+            javascript,
+            "import { Canvas } from '@cratis/components';\n",
+            'utf8',
+        );
+        writeFileSync(
+            jsx,
+            "import { DataPage } from '@cratis/components';\nexport const Page = () => <DataPage.DataPage />;\n",
+            'utf8',
+        );
+
+        const result = run([dir]);
+
+        expect(result.status).toBe(0);
+        expect(readFileSync(javascript, 'utf8')).toContain(
+            "import * as Canvas from '@cratis/components/Canvas';",
+        );
+        expect(readFileSync(jsx, 'utf8')).toContain(
+            "import * as DataPage from '@cratis/components/DataPage';",
+        );
+    });
+
     it('reports a TypeScript import assignment in a .cts file', () => {
         const file = path.join(dir, 'legacy.cts');
         writeFileSync(
diff --git a/Documentation/Filter/index.md b/Documentation/Filter/index.md
index ca519a2a..55a351d4 100644
--- a/Documentation/Filter/index.md
+++ b/Documentation/Filter/index.md
@@ -114,7 +114,7 @@ Renders a checkbox list — multiple values may be selected simultaneously.
 
 ### Numeric range with histogram (`type: 'number'`)
 
-Renders a `RangeHistogramFilter` — a draggable range slider overlaid on a histogram of the actual data distribution.
+Renders a `RangeHistogramFilter` — a range slider overlaid on a histogram of the actual data distribution. Users can drag either handle, focus the named minimum/maximum sliders and use Arrow/Home/End keys, or activate a histogram bar to snap to its bounds.
 
 ```tsx
 {
@@ -254,16 +254,19 @@ The hook re-syncs state when the `filters` array reference changes — existing
 
 `RangeHistogramFilter` can also be used standalone, independently of `FilterPanel`.
 
-| Prop | Type | Required | Description |
-|---|---|---|---|
-| `values` | `FilterValue[]` | ✓ | Raw data values used to compute the histogram |
-| `min` | `number` | ✓ | Lower bound of the full range |
-| `max` | `number` | ✓ | Upper bound of the full range |
-| `buckets` | `number` | | Number of histogram bars (default `20`) |
-| `selectedRange` | `[number, number] \| null` | ✓ | Currently selected range, or `null` for none |
-| `onChange` | `(range: [number, number] \| null) => void` | ✓ | Called when the range changes |
-| `formatValue` | `(value: number) => string` | — | Formatter for endpoint labels and bar-tooltip numbers (default: a plain numeric formatter) |
-| `itemsLabel` | `string` | — | Unit word shown after a bar tooltip's count, e.g. `'42 items'` (default: `'items'`) |
+| Prop               | Type                                        | Required | Description                                                                                |
+| ------------------ | ------------------------------------------- | -------- | ------------------------------------------------------------------------------------------ |
+| `values`           | `FilterValue[]`                             | —        | Raw data values used to compute the histogram. Omit when `histogram` is supplied.          |
+| `histogram`        | `HistogramBucket[]`                         | —        | Pre-counted buckets, typically covering the complete server-side result set.               |
+| `min`              | `number`                                    | ✓        | Lower bound of the full range                                                              |
+| `max`              | `number`                                    | ✓        | Upper bound of the full range                                                              |
+| `buckets`          | `number`                                    |          | Number of histogram bars (default `20`)                                                    |
+| `selectedRange`    | `[number, number] \| null`                  | ✓        | Currently selected range, or `null` for none                                               |
+| `onChange`         | `(range: [number, number] \| null) => void` | ✓        | Called when the range changes                                                              |
+| `formatValue`      | `(value: number) => string`                 | —        | Formatter for endpoint labels and bar-tooltip numbers (default: a plain numeric formatter) |
+| `itemsLabel`       | `string`                                    | —        | Unit word shown after a bar tooltip's count, e.g. `'42 items'` (default: `'items'`)        |
+| `minimumAriaLabel` | `string`                                    | —        | Accessible name for the lower-bound slider (default: `'Minimum value'`)                    |
+| `maximumAriaLabel` | `string`                                    | —        | Accessible name for the upper-bound slider (default: `'Maximum value'`)                    |
 
 ## Importing
 
diff --git a/Documentation/getting-started.mdx b/Documentation/getting-started.mdx
index a7fc8916..8a58d217 100644
--- a/Documentation/getting-started.mdx
+++ b/Documentation/getting-started.mdx
@@ -24,9 +24,17 @@ You've built an Arc backend—a `RegisterAuthor` command and an `AllAuthors` que
     npm install @cratis/components
     ```
 
-    React Aria and the internationalized date implementation are internal dependencies. The current package manifest does not declare a separate UI kit, theme runtime, or icon package as a dependency or peer.
+    React Aria, the internationalized date implementation, and React Icons are internal dependencies. The current package manifest does not declare a separate UI kit or theme runtime, and consumers do not configure an icon-package peer.
 
-    The package declares React, Arc, Fundamentals, `reflect-metadata`, and `tsyringe` peer ranges. Its Arc range is `>=20.3.1 <23`; verify the exact manifest and application profile before installation.
+    The package declares React, Arc, Fundamentals, `reflect-metadata`, and `tsyringe` peer ranges. Its Arc range is `>=20.3.1 <23`; keep `@cratis/arc` and `@cratis/arc.react` on the same version used by the application's generated proxies. A strict installer can use this explicit form (replace the example Arc version when needed):
+
+    ```bash title="Install explicit peers"
+    ARC_VERSION=22.1.0
+    npm install @cratis/components \
+      "@cratis/arc@$ARC_VERSION" "@cratis/arc.react@$ARC_VERSION" \
+      @cratis/fundamentals@^7.10.3 react@^19 react-dom@^19 \
+      reflect-metadata@0.2.2 tsyringe@4.10.0
+    ```
 
     `pixi.js@^8.20.0` is an additional **optional** peer, needed only if you use `Canvas` or `PivotViewer`. Every other component needs nothing beyond the peers above; install Pixi later, when you reach a spatial workspace or card-grid screen. See [Choosing a component](/components/choosing-a-component/#spatial-workspaces).
 
@@ -61,6 +69,17 @@ You've built an Arc backend—a `RegisterAuthor` command and an `AllAuthors` que
 
 </Steps>
 
+### Yarn PnP with Arc React 22.1.0
+
+The current `@cratis/arc.react@22.1.0` package imports `rxjs` without declaring it. A strict Yarn PnP consumer must install `rxjs@7.8.2` and temporarily add this package extension until Arc publishes corrected metadata:
+
+```yaml title=".yarnrc.yml"
+packageExtensions:
+    '@cratis/arc.react@22.1.0':
+        dependencies:
+            rxjs: '7.8.2'
+```
+
 ## What the provider sets up
 
 The provider supplies the locale, Components-specific labels, and an optional app-wide toast region. React Aria uses the locale for date, number, keyboard, and screen-reader behavior. Styling remains CSS-owned rather than provider-owned.
diff --git a/Documentation/index.mdx b/Documentation/index.mdx
index e948852e..ac78831f 100644
--- a/Documentation/index.mdx
+++ b/Documentation/index.mdx
@@ -8,27 +8,31 @@ import SimpleCard from '@components/SimpleCard.astro';
 import TopicHero from '@components/TopicHero.astro';
 
 <TopicHero
-  icon="laptop"
-  eyebrow="Components"
-  title="React components aligned with Arc application patterns"
+    icon='laptop'
+    eyebrow='Components'
+    title='React components aligned with Arc application patterns'
 >
-  Components is a React component library aligned with Arc application patterns.
-  The current package owns its public React markup, TypeScript contracts,
-  semantic tokens, stable parts, and component behavior.
+    Components is a React component library aligned with Arc application patterns. The
+    current package owns its public React markup, TypeScript contracts, semantic tokens,
+    stable parts, and component behavior.
 </TopicHero>
 
 ## Start here
 
 <CardGrid>
-  <SimpleCard title="Install Components" icon="rocket" link="#minimal-setup">
-    Install the package, import its structural styles, and mount the provider.
-  </SimpleCard>
-  <SimpleCard title="Choose a component area" icon="list-format" link="#component-areas">
-    Start from the screen job rather than a raw component inventory.
-  </SimpleCard>
-  <SimpleCard title="Keep Arc separate" icon="puzzle" link="#relationship-to-arc">
-    Distinguish Arc-generated contracts from the React compositions that consume them.
-  </SimpleCard>
+    <SimpleCard title='Install Components' icon='rocket' link='#minimal-setup'>
+        Install the package, import its structural styles, and mount the provider.
+    </SimpleCard>
+    <SimpleCard
+        title='Choose a component area'
+        icon='list-format'
+        link='#component-areas'
+    >
+        Start from the screen job rather than a raw component inventory.
+    </SimpleCard>
+    <SimpleCard title='Keep Arc separate' icon='puzzle' link='#relationship-to-arc'>
+        Distinguish Arc-generated contracts from the React compositions that consume them.
+    </SimpleCard>
 </CardGrid>
 
 ## Minimal setup
@@ -36,30 +40,31 @@ import TopicHero from '@components/TopicHero.astro';
 <Steps>
 1. Install the package.
 
-   ```bash
-   npm install @cratis/components
-   ```
+```bash
+npm install @cratis/components
+```
 
-2. Import semantic tokens and component structure. The baseline theme is
+1. Import semantic tokens and component structure. The baseline theme is
    optional.
 
-   ```tsx
-   import '@cratis/components/tokens';
-   import '@cratis/components/styles';
-   import '@cratis/components/theme'; // optional baseline appearance
-   ```
+    ```tsx
+    import '@cratis/components/tokens';
+    import '@cratis/components/styles';
+    import '@cratis/components/theme'; // optional baseline appearance
+    ```
 
-3. Mount the provider.
+1. Mount the provider.
 
-   ```tsx
-   import { CratisComponentsProvider } from '@cratis/components';
+    ```tsx
+    import { CratisComponentsProvider } from '@cratis/components';
+
+    export const App = () => (
+        <CratisComponentsProvider value={{ locale: 'en-US' }} toaster>
+            <YourApp />
+        </CratisComponentsProvider>
+    );
+    ```
 
-   export const App = () => (
-       <CratisComponentsProvider value={{ locale: 'en-US' }} toaster>
-           <YourApp />
-       </CratisComponentsProvider>
-   );
-   ```
 </Steps>
 
 The current package manifest defines the exact React, Arc, Fundamentals, and
@@ -77,21 +82,21 @@ Arc/React/package-version combination.
 ## Component areas
 
 <CardGrid>
-  <Card title="Command input" icon="approve-check">
-    Typed fields, forms, dialogs, and multi-step command flows.
-  </Card>
-  <Card title="Data display" icon="seti:db">
-    Query-backed and local-array tables, list pages, filters, and detail surfaces.
-  </Card>
-  <Card title="Application surfaces" icon="laptop">
-    Dialogs, notifications, dropdowns, display primitives, page chrome, and toolbars.
-  </Card>
-  <Card title="Structured editors" icon="pencil">
-    JSON content, JSON Schema, navigation, canvas, pivot, and time-oriented views.
-  </Card>
-  <Card title="Styling boundary" icon="seti:config">
-    Semantic tokens, component styles, an optional baseline theme, and stable parts.
-  </Card>
+    <Card title='Command input' icon='approve-check'>
+        Typed fields, forms, dialogs, and multi-step command flows.
+    </Card>
+    <Card title='Data display' icon='seti:db'>
+        Query-backed and local-array tables, list pages, filters, and detail surfaces.
+    </Card>
+    <Card title='Application surfaces' icon='laptop'>
+        Dialogs, notifications, dropdowns, display primitives, page chrome, and toolbars.
+    </Card>
+    <Card title='Structured editors' icon='pencil'>
+        JSON content, JSON Schema, navigation, canvas, pivot, and time-oriented views.
+    </Card>
+    <Card title='Styling boundary' icon='seti:config'>
+        Semantic tokens, component styles, an optional baseline theme, and stable parts.
+    </Card>
 </CardGrid>
 
 :::caution[Evaluate the exact application profile]
@@ -105,13 +110,21 @@ boundaries.
 ## Continue
 
 <CardGrid>
-  <SimpleCard title="Components source and README" icon="seti:folder" link="https://github.com/Cratis/Components">
-    Package setup, migration guidance, contribution paths, and current limits.
-  </SimpleCard>
-  <SimpleCard title="Components on npm" icon="open-book" link="https://www.npmjs.com/package/@cratis/components">
-    Published package metadata and versions.
-  </SimpleCard>
-  <SimpleCard title="Arc" icon="puzzle" link="/arc/">
-    The CQRS framework whose application patterns Components aligns with.
-  </SimpleCard>
+    <SimpleCard
+        title='Components source and README'
+        icon='seti:folder'
+        link='https://github.com/Cratis/Components'
+    >
+        Package setup, migration guidance, contribution paths, and current limits.
+    </SimpleCard>
+    <SimpleCard
+        title='Components on npm'
+        icon='open-book'
+        link='https://www.npmjs.com/package/@cratis/components'
+    >
+        Published package metadata and versions.
+    </SimpleCard>
+    <SimpleCard title='Arc' icon='puzzle' link='/arc/'>
+        The CQRS framework whose application patterns Components aligns with.
+    </SimpleCard>
 </CardGrid>
diff --git a/Documentation/migration-from-2.md b/Documentation/migration-from-2.md
index 7694d096..385b5b79 100644
--- a/Documentation/migration-from-2.md
+++ b/Documentation/migration-from-2.md
@@ -1,15 +1,19 @@
-# Migration — `@cratis/components` 2.x → 3.0 (PrimeReact 10 → 11)
+---
+title: Migrate from Components 2 to 3
+description: Historical guide for moving from PrimeReact 10 to the Components 3 PrimeReact 11 package profile.
+---
 
-> This is the historical Components 3 guide. Links to version-specific styling/provider pages use the immutable Components 3 merge commit so they cannot drift to Components 4 behavior.
+This is the historical Components 3 guide. Links to version-specific styling/provider pages use the immutable Components 3 merge commit so they cannot drift to Components 4 behavior.
 
 `@cratis/components` 3.0 moves the library from PrimeReact 10 to **PrimeReact 11**. Most wrapper APIs survive unchanged, so many apps upgrade with the find-and-replace in [Import moves](#import-moves-removed-primereact-paths) plus the install and import changes in [PrimeReact is now a peer dependency](#primereact-is-now-a-peer-dependency) and [Stylesheets are now an explicit import](#stylesheets-are-now-an-explicit-import). This guide lists every change a consuming app can feel.
 
-> [!IMPORTANT]
-> **The three things you must do**, even if you change no component code:
->
-> 1. **Install the PrimeReact peers yourself** — they are no longer our dependency.
-> 2. **Import `@cratis/components/styles`** — component CSS no longer rides along with the JavaScript.
-> 3. **Choose a theming path** — there is no `resources/themes/*.css` to import any more.
+:::caution[Three required changes]
+Even if no component code changes:
+
+1. **Install the PrimeReact peers yourself** — they are no longer our dependency.
+2. **Import `@cratis/components/styles`** — component CSS no longer rides along with the JavaScript.
+3. **Choose a theming path** — there is no `resources/themes/*.css` to import any more.
+   :::
 
 ## PrimeReact is now a peer dependency
 
@@ -47,8 +51,9 @@ Notes:
 
 `@cratis/arc` and `@cratis/arc.react` now support `>=20.3.1 <23`. Arc 20, Arc 21 and Arc 22 are supported.
 
-> [!WARNING]
-> **Keep `@cratis/arc`, `@cratis/arc.react` and `@cratis/arc.vite` on the same version.** `@cratis/arc.react` depends on `@cratis/arc` with an **exact** pin, so if your own `@cratis/arc` drifts by even a patch your installer nests a second copy. `ObservableQuerySubscription` has a `private` field, which makes it nominally typed, so two copies produce a type error like _"types have separate declarations of a private property `_connection`"_ in any code touching an observable query. This is an Arc packaging issue, not a Components one; `DataTableForObservableQuery` is hardened against it internally so the library itself still compiles either way ([#135](https://github.com/Cratis/Components/issues/135)).
+:::caution[Keep Arc package versions aligned]
+`@cratis/arc.react` depends on `@cratis/arc` with an **exact** pin, so if the application's `@cratis/arc` drifts by even a patch the installer nests a second copy. `ObservableQuerySubscription` has a `private` field, which makes it nominally typed, so two copies produce a type error like _"types have separate declarations of a private property `_connection`"_ in any code touching an observable query. This is an Arc packaging issue, not a Components one; `DataTableForObservableQuery` is hardened against it internally so the library itself still compiles either way ([#135](https://github.com/Cratis/Components/issues/135)).
+:::
 
 ## Stylesheets are now an explicit import
 
@@ -95,8 +100,9 @@ PrimeReact 11 ships **80** modules where v10 shipped 117. Replace the removed on
 
 The full rename table, the removed-with-no-replacement list, and the `Sidebar` trap are on [PrimeReact and Components](https://github.com/Cratis/Components/blob/9b45cfeb3719ec113ee4e939f9d49be38a877a14/Documentation/coming-from-primereact.md#the-v11-module-renames). The short version: **v11 is compositional**, so a rename is often not a one-line edit — `primereact/select` exports `Select.Root` / `Select.Trigger` / `Select.Value` / `Select.Portal` / `Select.Popup` / `Select.List` / `Select.Option`, and you assemble them. Prefer a Cratis wrapper where one exists.
 
-> [!CAUTION]
-> **The `Sidebar` trap.** v10's `Sidebar` (an overlay drawer) is now **`primereact/drawer`**. `primereact/sidebar` still exists in v11 but is a **different, new app-shell primitive**. A name-preserving migration compiles cleanly and silently swaps your overlay for an app shell. Check every `Sidebar` usage by hand.
+:::caution[The Sidebar trap]
+v10's `Sidebar` (an overlay drawer) is now **`primereact/drawer`**. `primereact/sidebar` still exists in v11 but is a **different, new app-shell primitive**. A name-preserving migration compiles cleanly and silently swaps your overlay for an app shell. Check every `Sidebar` usage by hand.
+:::
 
 Where the library needed a removed module, it now owns a replacement: a Cratis action toolbar (for `menubar`, driven by the same `model` array shape and reached through `<DataPage.MenuItems>`), [`Column`](DataTables/column-configuration.md) plus its filter menu (for `column`), [`StepperPanel`](StepperCommandDialog/index.md) (for `stepperpanel`), and `MultiSelectField` re-expressed over our own [`Dropdown`](Dropdown/index.md) wrapper (v11's `Select` has no `multiple` prop of the v10 shape).
 
diff --git a/Documentation/migration.md b/Documentation/migration.md
index c4378ddb..88b08c6b 100644
--- a/Documentation/migration.md
+++ b/Documentation/migration.md
@@ -64,7 +64,7 @@ This is an intentional Components 4 breaking change. The package root now expose
 | `CommandDialog`                     | `@cratis/components/CommandDialog`                        | `import * as CommandDialog from '@cratis/components/CommandDialog'`                 | `import { CommandDialog } from '@cratis/components/CommandDialog'`                 |
 | `CommandStepper` †                  | `@cratis/components/CommandDialog` (namespace-preserving) | `import * as CommandStepper from '@cratis/components/CommandDialog'`                | `import { CommandStepper } from '@cratis/components/CommandStepper'`               |
 | `CommandForm`                       | `@cratis/components/CommandForm`                          | `import * as CommandForm from '@cratis/components/CommandForm'`                     | `import { AutoCommandForm, InputTextField } from '@cratis/components/CommandForm'` |
-| `Common`                            | `@cratis/components/Common`                               | `import * as Common from '@cratis/components/Common'`                               | `import { CratisComponentsProvider, Button } from '@cratis/components/Common'`     |
+| `Common`                            | `@cratis/components/Common`                               | `import * as Common from '@cratis/components/Common'`                               | `import { Button } from '@cratis/components/Common'`                               |
 | `DataPage`                          | `@cratis/components/DataPage`                             | `import * as DataPage from '@cratis/components/DataPage'`                           | `import { DataPage, Column } from '@cratis/components/DataPage'`                   |
 | `DataTables`                        | `@cratis/components/DataTables`                           | `import * as DataTables from '@cratis/components/DataTables'`                       | `import { DataTableForQuery, Column } from '@cratis/components/DataTables'`        |
 | `Dialogs`                           | `@cratis/components/Dialogs`                              | `import * as Dialogs from '@cratis/components/Dialogs'`                             | `import { Dialog } from '@cratis/components/Dialogs'`                              |
@@ -82,18 +82,29 @@ This is an intentional Components 4 breaking change. The package root now expose
 
 † The removed root `CommandStepper` namespace aliased the _entire_ `CommandDialog` module. The codemod therefore maps that namespace to `@cratis/components/CommandDialog`, preserving `CommandStepper.StepperCommandDialog`, `CommandStepper.CommandDialog`, and `CommandStepper.CommandStepper`. New code that needs only the standalone component should use the narrower named import from `@cratis/components/CommandStepper`.
 
-`@cratis/components/CommandForm/fields` is the same module as `@cratis/components/CommandForm` — either subpath resolves identically, so the `CommandForm` row's migration applies to both.
+`@cratis/components/CommandForm/fields` is the same module as `@cratis/components/CommandForm` — either subpath resolves identically, so the `CommandForm` row's migration applies to both. Provider/configuration/message setup stays on the package root; only Common components such as `Button` move to `@cratis/components/Common`.
 
 Run the migration codemod in preview mode first, then apply it:
 
 ```bash
-npx --package @cratis/components-codemods \
+COMPONENTS_VERSION="$(node -p "require('@cratis/components/package.json').version")"
+npx --package "@cratis/components-codemods@$COMPONENTS_VERSION" \
   cratis-components-remove-root-namespace-imports --check <paths...>
-npx --package @cratis/components-codemods \
+npx --package "@cratis/components-codemods@$COMPONENTS_VERSION" \
   cratis-components-remove-root-namespace-imports <paths...>
 ```
 
-The codemod preserves aliases and type-only imports, splits mixed setup/namespace imports, and refuses to guess at default imports, whole-package namespace imports, TypeScript `import = require(...)` assignments, dynamic imports, CommonJS `require(...)`, re-exports, side-effect imports, or unknown symbols. Review every reported unsupported case manually, then run the consuming project's lint, build, and tests.
+If the exact codemod package version is unavailable, stop rather than substituting `latest` or a different Components version. Keep the application on its current package, apply the table manually, or wait for a corrected publication.
+
+The codemod scans JavaScript/JSX and TypeScript/TSX (including `.mjs`, `.cjs`, `.mts`, and `.cts`), preserves aliases and type-only imports, splits mixed setup/namespace imports, and refuses to guess at default imports, whole-package namespace imports, TypeScript `import = require(...)` assignments, dynamic imports, CommonJS `require(...)`, re-exports, side-effect imports, or unknown symbols. Review every reported unsupported case manually, then run the consuming project's lint, build, and tests.
+
+Install the matching ESLint plugin version after migration and compose its recommended config after `@cratis/eslint-config`; `no-root-barrel-import` prevents component namespaces from returning:
+
+```bash
+npm install --save-dev "@cratis/eslint-plugin-components@$COMPONENTS_VERSION"
+```
+
+See the `@cratis/eslint-plugin-components` README included with that package for the flat-config example and the other Components consumer rules.
 
 See [UI foundation: Capability profiles](ui-foundation.md#capability-profiles) for how these subpaths group into Foundation, Advanced React, and Spatial, and the [capability matrix](ui-foundation.md#capability-matrix) for what each profile owns.
 
@@ -118,7 +129,7 @@ A custom product design can omit `theme`, define the `--cratis-*` variables itse
 The provider now owns locale and Components-specific labels. Unknown renderer keys are a type error so a migrated app cannot silently lose its theme, license, global pass-through, ripple, or z-index behavior. Remove those keys from `CratisComponentsProvider` and configure any remaining direct Prime provider independently.
 
 ```tsx
-import { CratisComponentsProvider } from '@cratis/components/Common';
+import { CratisComponentsProvider } from '@cratis/components';
 
 export const ApplicationRoot = ({ children }: { children: React.ReactNode }) => (
     <CratisComponentsProvider
@@ -327,7 +338,7 @@ import type { ReactNode } from 'react';
 import {
     CratisComponentsProvider,
     type CratisComponentsMessages,
-} from '@cratis/components/Common';
+} from '@cratis/components';
 
 interface ProductComponentsProviderProps {
     children: ReactNode;
diff --git a/Documentation/storybook.mdx b/Documentation/storybook.mdx
index 85a86b46..b6a99b90 100644
--- a/Documentation/storybook.mdx
+++ b/Documentation/storybook.mdx
@@ -6,6 +6,8 @@ tableOfContents: false
 
 import StorybookEmbed from '@components/StorybookEmbed.astro';
 
-Use the Appearance toolbar to compare the maintained baseline in light and dark modes with a representative product-owned token mapping. Stories load the same prefixed, layered, no-Preflight CSS contract as the published package. The Accessibility panel runs axe checks; keyboard, focus, busy, empty, invalid, disabled, open-overlay, and responsive states remain part of the release review.
+Use the Appearance toolbar to compare the maintained baseline in light and dark modes with a representative product-owned token mapping. Stories load the same prefixed, layered, no-Preflight CSS contract as the published package.
+
+Every story module also generates an autodocs page from the public component types and TSDoc. CI type-checks the story source, runs every story in Playwright Chromium in both baseline light and dark modes, executes each `play()` interaction, and treats Accessibility-addon axe violations as errors. This is a browser component-test gate, not a claim of universal browser or assistive-technology conformance; keyboard, focus, busy, empty, invalid, disabled, open-overlay, and responsive states still require deliberate story coverage and release review.
 
 <StorybookEmbed fullPage={true} />
diff --git a/Documentation/toc.yml b/Documentation/toc.yml
index b83ddf52..3a7f2ac2 100644
--- a/Documentation/toc.yml
+++ b/Documentation/toc.yml
@@ -54,8 +54,6 @@
   href: ObjectNavigationalBar/index.md
 - name: ObjectContentEditor
   href: ObjectContentEditor/index.md
-- name: Canvas
-  href: Canvas/toc.yml
 - name: PivotViewer
   href: PivotViewer/toc.yml
 - name: SchemaEditor
diff --git a/Documentation/tutorial/act-on-it.mdx b/Documentation/tutorial/act-on-it.mdx
index 898aab5b..7a9e12ee 100644
--- a/Documentation/tutorial/act-on-it.mdx
+++ b/Documentation/tutorial/act-on-it.mdx
@@ -106,4 +106,4 @@ Removing is a `RemoveAuthor` command with nothing but the id — often a confirm
 - a table that **updates live** the moment the command lands — no refresh code,
 - and the pattern for rename and remove: model the change as a command, open it in a dialog, let the list follow.
 
-These actions hang off a toolbar button, but a real list screen lets you _select_ a row and act on it — and often shows that row's details beside the list. That's exactly what `DataPage` is for. [Let's build the list-and-detail screen →](./list-and-detail)
+These actions hang off a toolbar button, but a real list screen lets you _select_ a row and act on it — and often shows that row's details beside the list. That's exactly what `DataPage` is for. [Let's build the list-and-detail screen →](./list-and-detail.mdx)
diff --git a/Documentation/tutorial/index.md b/Documentation/tutorial/index.md
index 67f65095..31eab0cc 100644
--- a/Documentation/tutorial/index.md
+++ b/Documentation/tutorial/index.md
@@ -57,8 +57,8 @@ A working library admin screen where a librarian can:
 
 ## The tour
 
-1. **[List the authors](./list-it)** — a live table from the `AllAuthors` query.
-2. **[Act on the list](./act-on-it)** — add, rename, and remove with command dialogs, driven by selection.
-3. **[List and detail](./list-and-detail)** — swap the plain table for a `DataPage` and show each author's books.
+1. **[List the authors](./list-it.mdx)** — a live table from the `AllAuthors` query.
+2. **[Act on the list](./act-on-it.mdx)** — add, rename, and remove with command dialogs, driven by selection.
+3. **[List and detail](./list-and-detail.mdx)** — swap the plain table for a `DataPage` and show each author's books.
 
-By the end you'll have a real screen, and the pattern for every other one in your app. Ready? [Let's put the authors on screen →](./list-it)
+By the end you'll have a real screen, and the pattern for every other one in your app. Ready? [Let's put the authors on screen →](./list-it.mdx)
diff --git a/Documentation/tutorial/list-it.mdx b/Documentation/tutorial/list-it.mdx
index f098b3d1..ccc015a7 100644
--- a/Documentation/tutorial/list-it.mdx
+++ b/Documentation/tutorial/list-it.mdx
@@ -51,4 +51,4 @@ Notice everything that's _absent_. There's no `fetch`, no `useEffect`, no loadin
 - bound to the `AllAuthors` query with **no subscription or fetch code**,
 - that will update itself the instant the data behind it changes.
 
-A read-only list isn't a back office, though — a librarian needs to _add_ authors. Next we'll give the screen a command. [Let's act on the list →](./act-on-it)
+A read-only list isn't a back office, though — a librarian needs to _add_ authors. Next we'll give the screen a command. [Let's act on the list →](./act-on-it.mdx)
diff --git a/Documentation/verify-markdown.sh b/Documentation/verify-markdown.sh
index b3c1e3bc..ad538254 100755
--- a/Documentation/verify-markdown.sh
+++ b/Documentation/verify-markdown.sh
@@ -33,6 +33,7 @@ fi
 npx markdownlint-cli2 \
     "README.md" \
     "Documentation/**/*.md" \
+    "Documentation/**/*.mdx" \
     "Source/*.md" \
     "Codemods/*.md" \
     "ESLint/*.md"
diff --git a/ESLint/README.md b/ESLint/README.md
index 74201936..66e647a7 100644
--- a/ESLint/README.md
+++ b/ESLint/README.md
@@ -15,8 +15,12 @@ Both import rules cover static `import` and re-`export … from` forms. The root
 
 ## Install
 
+Use the same exact version as the installed Components package:
+
 ```sh
-yarn add -D @cratis/eslint-plugin-components @cratis/eslint-config eslint
+COMPONENTS_VERSION="$(node -p "require('@cratis/components/package.json').version")"
+yarn add -D "@cratis/eslint-plugin-components@$COMPONENTS_VERSION" \
+  @cratis/eslint-config eslint
 ```
 
 ## Use
diff --git a/ESLint/index.js b/ESLint/index.js
index 01158525..20a777db 100644
--- a/ESLint/index.js
+++ b/ESLint/index.js
@@ -32,7 +32,7 @@ Object.assign(plugin.configs, {
     recommended: [
         {
             name: '@cratis/components/recommended',
-            files: ['**/*.ts', '**/*.tsx'],
+            files: ['**/*.{js,jsx,mjs,cjs,ts,tsx,mts,cts}'],
             plugins: { '@cratis/components': plugin },
             rules: {
                 '@cratis/components/no-primereact-dialog': 'error',
diff --git a/ESLint/test/rules.test.js b/ESLint/test/rules.test.js
index 19423d39..623509c3 100644
--- a/ESLint/test/rules.test.js
+++ b/ESLint/test/rules.test.js
@@ -1,6 +1,7 @@
 import { RuleTester } from 'eslint';
 import { afterAll, describe, expect, it } from 'vitest';
 import tsParser from '@typescript-eslint/parser';
+import componentsPlugin from '../index.js';
 import { noPrimereactDialog } from '../lib/noPrimereactDialog.js';
 import { noRootBarrelImport } from '../lib/noRootBarrelImport.js';
 import {
@@ -34,6 +35,14 @@ const tsRuleTester = new RuleTester({
     },
 });
 
+describe('recommended consumer coverage', () => {
+    it('applies the migration guards to every source extension the codemod scans', () => {
+        expect(componentsPlugin.configs.recommended[0].files).toEqual([
+            '**/*.{js,jsx,mjs,cjs,ts,tsx,mts,cts}',
+        ]);
+    });
+});
+
 describe('root namespace map parity', () => {
     it('keeps the ESLint and codemod namespace maps identical', () => {
         expect(eslintNamespaceSubpaths).toEqual(codemodNamespaceSubpaths);
diff --git a/README.md b/README.md
index 38ed66e0..1fd3e219 100644
--- a/README.md
+++ b/README.md
@@ -71,6 +71,11 @@ optional Pixi peer ranges. Verify those ranges before installing the package.
 
 - The package manifest, exports, source, and migration guide define the current
   Components major-version surface.
+- Workspace manifest versions in a source checkout are development inputs, not release
+  identity. The release workflow stamps all three workspaces with the same requested
+  version, then publishes them sequentially. It collects failures and fails the release,
+  but a registry-side error can still leave a partial publication; verify all three exact
+  coordinates before migration or release claims.
 - Package existence, examples, Storybook output, and passing checks do not
   establish maturity, accessibility conformance, browser coverage, support,
   security, or production suitability.
@@ -88,11 +93,12 @@ optional Pixi peer ranges. Verify those ranges before installing the package.
 
 ## Migration tooling
 
-The repository contains a codemod and ESLint rule for moving Components 3 root
-namespace imports to the current explicit subpaths. The migration guide owns the
-current mapping, command, package coordinate, and limitations. Verify the exact
-published package version before running migration tooling outside this
-repository.
+The repository ships `@cratis/components-codemods` and
+`@cratis/eslint-plugin-components` for moving Components 3 root namespace imports to
+explicit subpaths and preventing regressions afterward. The [migration guide](./Source/MIGRATION.md)
+owns the exact-version codemod command and stop cases; the [ESLint plugin
+README](./ESLint/README.md) owns installation and flat-config composition. Use the same
+published version as `@cratis/components` for both migration packages.
 
 ## Contributing
 
diff --git a/Source/MIGRATION.md b/Source/MIGRATION.md
index c3391e1a..8ed303de 100644
--- a/Source/MIGRATION.md
+++ b/Source/MIGRATION.md
@@ -61,7 +61,7 @@ This is an intentional Components 4 breaking change. The package root now expose
 | `CommandDialog`                     | `@cratis/components/CommandDialog`                        | `import * as CommandDialog from '@cratis/components/CommandDialog'`                 | `import { CommandDialog } from '@cratis/components/CommandDialog'`                 |
 | `CommandStepper` †                  | `@cratis/components/CommandDialog` (namespace-preserving) | `import * as CommandStepper from '@cratis/components/CommandDialog'`                | `import { CommandStepper } from '@cratis/components/CommandStepper'`               |
 | `CommandForm`                       | `@cratis/components/CommandForm`                          | `import * as CommandForm from '@cratis/components/CommandForm'`                     | `import { AutoCommandForm, InputTextField } from '@cratis/components/CommandForm'` |
-| `Common`                            | `@cratis/components/Common`                               | `import * as Common from '@cratis/components/Common'`                               | `import { CratisComponentsProvider, Button } from '@cratis/components/Common'`     |
+| `Common`                            | `@cratis/components/Common`                               | `import * as Common from '@cratis/components/Common'`                               | `import { Button } from '@cratis/components/Common'`                               |
 | `DataPage`                          | `@cratis/components/DataPage`                             | `import * as DataPage from '@cratis/components/DataPage'`                           | `import { DataPage, Column } from '@cratis/components/DataPage'`                   |
 | `DataTables`                        | `@cratis/components/DataTables`                           | `import * as DataTables from '@cratis/components/DataTables'`                       | `import { DataTableForQuery, Column } from '@cratis/components/DataTables'`        |
 | `Dialogs`                           | `@cratis/components/Dialogs`                              | `import * as Dialogs from '@cratis/components/Dialogs'`                             | `import { Dialog } from '@cratis/components/Dialogs'`                              |
@@ -79,18 +79,29 @@ This is an intentional Components 4 breaking change. The package root now expose
 
 † The removed root `CommandStepper` namespace aliased the _entire_ `CommandDialog` module. The codemod therefore maps that namespace to `@cratis/components/CommandDialog`, preserving all existing namespace members. New code that needs only the standalone component should use the narrower named import from `@cratis/components/CommandStepper`.
 
-`@cratis/components/CommandForm/fields` is the same module as `@cratis/components/CommandForm` — either subpath resolves identically, so the `CommandForm` row's migration applies to both.
+`@cratis/components/CommandForm/fields` is the same module as `@cratis/components/CommandForm` — either subpath resolves identically, so the `CommandForm` row's migration applies to both. Provider/configuration/message setup stays on the package root; only Common components such as `Button` move to `@cratis/components/Common`.
 
 Run the migration codemod in preview mode first, then apply it:
 
 ```bash
-npx --package @cratis/components-codemods \
+COMPONENTS_VERSION="$(node -p "require('@cratis/components/package.json').version")"
+npx --package "@cratis/components-codemods@$COMPONENTS_VERSION" \
   cratis-components-remove-root-namespace-imports --check <paths...>
-npx --package @cratis/components-codemods \
+npx --package "@cratis/components-codemods@$COMPONENTS_VERSION" \
   cratis-components-remove-root-namespace-imports <paths...>
 ```
 
-The codemod preserves aliases and type-only imports, splits mixed setup/namespace imports, and reports unsupported cases without guessing. Those include default or whole-package namespace imports, TypeScript `import = require(...)` assignments, dynamic imports, CommonJS `require(...)`, re-exports, side-effect imports, and unknown symbols. Review its diagnostics, then run the consuming project's lint, build, and tests.
+If the exact codemod package version is unavailable, stop rather than substituting `latest` or a different Components version. Keep the application on its current package, apply the table manually, or wait for a corrected publication.
+
+The codemod scans JavaScript/JSX and TypeScript/TSX (including `.mjs`, `.cjs`, `.mts`, and `.cts`), preserves aliases and type-only imports, splits mixed setup/namespace imports, and reports unsupported cases without guessing. Those include default or whole-package namespace imports, TypeScript `import = require(...)` assignments, dynamic imports, CommonJS `require(...)`, re-exports, side-effect imports, and unknown symbols. Review its diagnostics, then run the consuming project's lint, build, and tests.
+
+Install the matching ESLint plugin version after migration and compose its recommended config after `@cratis/eslint-config`; `no-root-barrel-import` prevents component namespaces from returning:
+
+```bash
+npm install --save-dev "@cratis/eslint-plugin-components@$COMPONENTS_VERSION"
+```
+
+See the `@cratis/eslint-plugin-components` README included with that package for the flat-config example and the other Components consumer rules.
 
 ## Keep the stylesheet entry points
 
@@ -113,7 +124,7 @@ A custom product design can omit `theme`, define the `--cratis-*` variables itse
 The provider now owns locale and Components-specific labels. Unknown renderer keys are a type error so a migrated app cannot silently lose its theme, license, global pass-through, ripple, or z-index behavior. Remove those keys from `CratisComponentsProvider` and configure any remaining direct Prime provider independently.
 
 ```tsx
-import { CratisComponentsProvider } from '@cratis/components/Common';
+import { CratisComponentsProvider } from '@cratis/components';
 
 export const ApplicationRoot = ({ children }: { children: React.ReactNode }) => (
     <CratisComponentsProvider
diff --git a/Source/README.md b/Source/README.md
index 9c6f243d..0566a31a 100644
--- a/Source/README.md
+++ b/Source/README.md
@@ -26,8 +26,20 @@ The current package manifest declares these peer dependencies:
 - `reflect-metadata` `0.2.2`
 - `tsyringe` `4.10.0`
 
+Strict installers can declare them explicitly; keep both Arc packages on the same application version:
+
+```bash
+ARC_VERSION=22.1.0
+npm install @cratis/components \
+  "@cratis/arc@$ARC_VERSION" "@cratis/arc.react@$ARC_VERSION" \
+  @cratis/fundamentals@^7.10.3 react@^19 react-dom@^19 \
+  reflect-metadata@0.2.2 tsyringe@4.10.0
+```
+
 The current manifest does not declare PrimeReact, PrimeIcons, or PrimeUI packages as dependencies or peers. Applications retaining direct dependencies keep their own package, provider, styling, and license boundaries.
 
+**Yarn PnP note:** the current `@cratis/arc.react@22.1.0` package imports `rxjs` without declaring it. Strict PnP consumers install `rxjs@7.8.2` and add a temporary `packageExtensions` entry for `@cratis/arc.react@22.1.0`; remove it when Arc publishes corrected metadata. The canonical [getting-started guide](https://cratis.io/components/getting-started/) contains the exact YAML.
+
 `pixi.js@^8.20.0` is an additional **optional** peer, required only by `Canvas` and `PivotViewer` (the Spatial capability profile — see [Import from explicit subpaths](#import-from-explicit-subpaths) below). Every other subpath needs nothing beyond the peers above:
 
 ```bash
@@ -185,7 +197,7 @@ Do not target React Aria classes or internal DOM structure.
 
 ## Import from explicit subpaths
 
-The canonical rule: **the package root is setup-only; every component ships from its own subpath.** Import `CratisComponentsProvider` (and `cratisDefaults`, `mergeCratisComponentsConfig`) from the root; import every component from the subpath in its capability profile:
+The canonical rule: **the package root is setup-only; every component ships from its own subpath.** Import `CratisComponentsProvider`, `useCratisComponentsConfig`, `cratisDefaults`, and `mergeCratisComponentsConfig` from the root; import every component from the subpath in its capability profile:
 
 | Subpath                                    | Capability profile                |
 | ------------------------------------------ | --------------------------------- |
@@ -224,8 +236,9 @@ namespace-to-subpath mapping and migration command for existing root imports.
 The current package manifest does not declare PrimeReact as a required runtime
 or peer. Follow the [Components 3 to 4 migration guide](https://github.com/Cratis/Components/blob/main/Source/MIGRATION.md)
 for dependency removal, provider changes, product token mapping, stable part
-names, DatePicker changes, table behavior, notifications, and direct Prime
-import replacements.
+names, DatePicker changes, table behavior, notifications, direct Prime import
+replacements, the exact-version `@cratis/components-codemods` command, and the
+`@cratis/eslint-plugin-components` guard.
 
 The old `@cratis/components/styled`, `styledMode`, `CratisPreset`, and `primeReactStyles` renderer exports are removed. Move styling to tokens and stable parts before upgrading.
 

From 42ac43a3247959cba79ba2c0787f56ddd8619bfe Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Wed, 26 Aug 2026 09:37:30 +0200
Subject: [PATCH 086/267] Stabilize ChatBubble hover story

Reset the primary avatar hover state before opening the preview so browser pointer carry-over cannot create duplicate initials before the interaction query runs.
---
 Source/Canvas/shapes/ChatBubble/ChatBubble.stories.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/Source/Canvas/shapes/ChatBubble/ChatBubble.stories.tsx b/Source/Canvas/shapes/ChatBubble/ChatBubble.stories.tsx
index a7632091..fbb55cc9 100644
--- a/Source/Canvas/shapes/ChatBubble/ChatBubble.stories.tsx
+++ b/Source/Canvas/shapes/ChatBubble/ChatBubble.stories.tsx
@@ -25,9 +25,12 @@ type Story = StoryObj<typeof meta>;
 export const Preview: Story = {
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);
-        await userEvent.hover(canvas.getByText('AL'));
+        const avatar = canvasElement.querySelector<HTMLElement>('.person-avatar-circle');
+        if (!avatar) throw new Error('The primary chat avatar did not render.');
+        await userEvent.unhover(avatar);
+        await userEvent.hover(avatar);
         await expect(
-            canvas.getByText('The event model is ready for review.'),
+            await canvas.findByText('The event model is ready for review.'),
         ).toBeTruthy();
     },
 };

From b9ff3568ea051042dd29868b82a20414be7fbd5e Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Wed, 26 Aug 2026 12:16:05 +0200
Subject: [PATCH 087/267] Use synthetic public example data

Remove consumer-identifying fixtures from public stories and documentation, and establish a repository policy that forbids copying or deriving any public artifact from confidential consumer products.
---
 .agents/PROJECT.md                            | 15 +++++
 Documentation/Canvas/chat-bubble.md           |  6 +-
 .../Canvas/shapes/ChatBubble/Chat.stories.tsx | 60 +++++++++----------
 .../shapes/ChatBubble/ChatBubble.stories.tsx  |  8 +--
 .../shapes/ChatBubble/ChatKit.stories.tsx     | 20 +++----
 Source/Canvas/shapes/Note/Note.stories.tsx    |  2 +-
 Source/DataTables/DataTableCore.stories.tsx   |  6 +-
 7 files changed, 66 insertions(+), 51 deletions(-)
 create mode 100644 .agents/PROJECT.md

diff --git a/.agents/PROJECT.md b/.agents/PROJECT.md
new file mode 100644
index 00000000..1875a1cb
--- /dev/null
+++ b/.agents/PROJECT.md
@@ -0,0 +1,15 @@
+# Components Public-Repository Policy
+
+## Consumer confidentiality and provenance
+
+This is a public framework repository. Its implementation, examples, fixtures, screenshots, documentation, and review evidence must be independently authored for Components.
+
+- Never copy, port, adapt, paraphrase, or derive source code, designs, names, vocabulary, data, screenshots, domains, identifiers, or behavior from a consuming product or its repository.
+- Treat every consuming product and repository as confidential, regardless of whether an individual name or example appears generic.
+- Never mention consumer products in public files, commits, pull requests, issues, build logs, screenshots, artifact metadata, or test output.
+- Use explicitly synthetic examples such as `Sample User`, `Example Project`, `Demo Assistant`, reserved `example.invalid` URLs, and generated identifiers.
+- Do not use names of real people, customer-like organizations, or product-specific scenarios in stories and documentation.
+- Repository-local evidence may describe consumers only as anonymous counts or capability profiles and must never contain identifying details.
+- If consumer material is discovered, stop any server or publication exposing it, remove it from the current tree, notify the repository owner, and treat history/log cleanup as a coordinated security action. Never rewrite git history without explicit human authorization.
+
+Before committing public examples, verify their provenance and confirm that every identity, message, URL, identifier, and scenario was created solely for this repository.
diff --git a/Documentation/Canvas/chat-bubble.md b/Documentation/Canvas/chat-bubble.md
index ba8c53a3..ab156d11 100644
--- a/Documentation/Canvas/chat-bubble.md
+++ b/Documentation/Canvas/chat-bubble.md
@@ -18,11 +18,11 @@ function Conversation() {
         {
             id: Guid.create(),
             authorId: Guid.create(),
-            authorName: 'Ada',
-            authorInitials: 'A',
+            authorName: 'Sample User',
+            authorInitials: 'SU',
             hasAvatar: false,
             authorKind: ChatAuthorKind.User,
-            text: 'What do you think of this layout?',
+            text: 'This is a sample message.',
             timestamp: new Date(),
         },
     ]);
diff --git a/Source/Canvas/shapes/ChatBubble/Chat.stories.tsx b/Source/Canvas/shapes/ChatBubble/Chat.stories.tsx
index ef80a711..0ac9ed63 100644
--- a/Source/Canvas/shapes/ChatBubble/Chat.stories.tsx
+++ b/Source/Canvas/shapes/ChatBubble/Chat.stories.tsx
@@ -21,48 +21,48 @@ export default meta;
 
 type Story = StoryObj<typeof Chat>;
 
-const you = Guid.create();
-const ada = Guid.create();
-const agent = Guid.create();
+const currentUserId = Guid.create();
+const sampleUserId = Guid.create();
+const demoAssistantId = Guid.create();
 
 const mentionCandidates: MentionCandidate[] = [
-    { id: ada.toString(), name: 'Ada', hasAvatar: false, kind: ChatAuthorKind.User },
-    { id: agent.toString(), name: 'Review Agent', hasAvatar: false, kind: ChatAuthorKind.Agent },
+    { id: sampleUserId.toString(), name: 'Sample User', hasAvatar: false, kind: ChatAuthorKind.User },
+    { id: demoAssistantId.toString(), name: 'Demo Assistant', hasAvatar: false, kind: ChatAuthorKind.Agent },
 ];
 
 function seedMessages(): ChatMessage[] {
     return [
         {
             id: Guid.create(),
-            authorId: ada,
-            authorName: 'Ada',
-            authorInitials: 'A',
+            authorId: sampleUserId,
+            authorName: 'Sample User',
+            authorInitials: 'SU',
             hasAvatar: false,
             authorKind: ChatAuthorKind.User,
-            text: 'What do you think of the new layout?',
+            text: 'Can you review this sample layout?',
             timestamp: new Date(Date.now() - 6 * 60_000),
         },
         {
             id: Guid.create(),
-            authorId: agent,
-            authorName: 'Review Agent',
-            authorInitials: 'R',
+            authorId: demoAssistantId,
+            authorName: 'Demo Assistant',
+            authorInitials: 'DA',
             hasAvatar: false,
             authorKind: ChatAuthorKind.Agent,
-            text: 'Looks solid — the spacing between cards reads cleanly at every zoom level I tried.',
+            text: 'The spacing remains clear at each demonstrated zoom level.',
             timestamp: new Date(Date.now() - 4 * 60_000),
             reactions: [
-                { emoji: '👍', users: [{ id: you, name: 'You', reactionId: Guid.create() }] },
+                { emoji: '👍', users: [{ id: currentUserId, name: 'You', reactionId: Guid.create() }] },
             ],
         },
         {
             id: Guid.create(),
-            authorId: you,
+            authorId: currentUserId,
             authorName: 'You',
             authorInitials: 'Y',
             hasAvatar: false,
             authorKind: ChatAuthorKind.User,
-            text: 'Great, shipping it then.',
+            text: 'Thanks, the sample is ready.',
             timestamp: new Date(Date.now() - 60_000),
         },
     ];
@@ -71,8 +71,8 @@ function seedMessages(): ChatMessage[] {
 /**
  * A working conversation: reactions (click the smiley on a message, or pick the same emoji again to
  * take it back), quick reply (the reply arrow prefills the composer with `@name`), `@`-mention
- * suggestions in the composer, and a "Zephyr is typing…" indicator toggled from outside the panel to
- * show the typing indicator without needing a second person in the room.
+ * suggestions in the composer, and a typing indicator toggled from outside the panel to
+ * show the typing indicator without needing another participant in the room.
  */
 export const BasicThread: Story = {
     render: () => {
@@ -83,7 +83,7 @@ export const BasicThread: Story = {
             const send = (text: string) => {
                 setMessages(current => [...current, {
                     id: Guid.create(),
-                    authorId: you,
+                    authorId: currentUserId,
                     authorName: 'You',
                     authorInitials: 'Y',
                     hasAvatar: false,
@@ -99,17 +99,17 @@ export const BasicThread: Story = {
 
                     // A person has one reaction per message: drop any existing reaction from "you" first.
                     const withoutYou = (message.reactions ?? [])
-                        .map(reaction => ({ ...reaction, users: reaction.users.filter(user => !user.id.equals(you)) }))
+                        .map(reaction => ({ ...reaction, users: reaction.users.filter(user => !user.id.equals(currentUserId)) }))
                         .filter(reaction => reaction.users.length > 0);
 
                     const alreadyGaveThisEmoji = message.reactions?.some(
-                        reaction => reaction.emoji === emoji && reaction.users.some(user => user.id.equals(you)));
+                        reaction => reaction.emoji === emoji && reaction.users.some(user => user.id.equals(currentUserId)));
 
                     // Picking the same emoji again takes the reaction back.
                     if (alreadyGaveThisEmoji) return { ...message, reactions: withoutYou };
 
                     const target = withoutYou.find(reaction => reaction.emoji === emoji);
-                    const yourReaction = { id: you, name: 'You', reactionId: Guid.create() };
+                    const yourReaction = { id: currentUserId, name: 'You', reactionId: Guid.create() };
                     const reactions = target
                         ? withoutYou.map(reaction => (reaction.emoji === emoji ? { ...reaction, users: [...reaction.users, yourReaction] } : reaction))
                         : [...withoutYou, { emoji, users: [yourReaction] }];
@@ -121,17 +121,17 @@ export const BasicThread: Story = {
             return (
                 <div style={{ display: 'flex', flexDirection: 'column', gap: 12, width: 380 }}>
                     <button type='button' onClick={() => setIsTyping(current => !current)}>
-                        {isTyping ? 'Stop Zephyr typing' : 'Simulate Zephyr typing'}
+                        {isTyping ? 'Stop demo assistant typing' : 'Simulate demo assistant typing'}
                     </button>
                     <div style={{ height: 480, border: '1px solid var(--surface-border)', borderRadius: 12, overflow: 'hidden' }}>
                         <Chat
                             messages={messages}
                             onSend={send}
                             onClose={() => { /* Chat is embedded inline in the story; there is no panel to close. */ }}
-                            currentUserId={you}
+                            currentUserId={currentUserId}
                             onReact={react}
                             mentionCandidates={mentionCandidates}
-                            typingAuthors={isTyping ? [{ id: agent.toString(), name: 'Zephyr', hasAvatar: false, kind: ChatAuthorKind.Agent }] : []}
+                            typingAuthors={isTyping ? [{ id: demoAssistantId.toString(), name: 'Demo Assistant', hasAvatar: false, kind: ChatAuthorKind.Agent }] : []}
                         />
                     </div>
                 </div>
@@ -154,14 +154,14 @@ export const WithFailedTurn: Story = {
                 ...seedMessages().slice(0, 1),
                 {
                     id: Guid.create(),
-                    authorId: agent,
-                    authorName: 'Review Agent',
-                    authorInitials: 'R',
+                    authorId: demoAssistantId,
+                    authorName: 'Demo Assistant',
+                    authorInitials: 'DA',
                     hasAvatar: false,
                     authorKind: ChatAuthorKind.Agent,
                     text: '',
                     timestamp: new Date(),
-                    failureDetail: 'Request timed out after 30s while calling the review service.\n\nTraceId: 4f2a-9c31',
+                    failureDetail: 'The sample request timed out before a response was available.',
                 },
             ]);
 
@@ -171,7 +171,7 @@ export const WithFailedTurn: Story = {
                         messages={messages}
                         onSend={() => { /* This story only shows the failed-turn line; sending is not wired up. */ }}
                         onClose={() => { /* Chat is embedded inline in the story; there is no panel to close. */ }}
-                        buildReportUrl={details => `https://github.com/example/repo/issues/new?title=${encodeURIComponent(details.title)}`}
+                        buildReportUrl={details => `https://example.invalid/report?title=${encodeURIComponent(details.title)}`}
                     />
                 </div>
             );
diff --git a/Source/Canvas/shapes/ChatBubble/ChatBubble.stories.tsx b/Source/Canvas/shapes/ChatBubble/ChatBubble.stories.tsx
index fbb55cc9..00bb2465 100644
--- a/Source/Canvas/shapes/ChatBubble/ChatBubble.stories.tsx
+++ b/Source/Canvas/shapes/ChatBubble/ChatBubble.stories.tsx
@@ -9,10 +9,10 @@ const meta = {
     title: 'Canvas/ChatBubble',
     component: ChatBubble,
     args: {
-        authorId: 'ada-lovelace',
-        authorName: 'Ada Lovelace',
+        authorId: 'sample-user',
+        authorName: 'Sample User',
         hasAvatar: false,
-        previewMessage: 'The event model is ready for review.',
+        previewMessage: 'This is a sample preview message.',
         previewTimestamp: new Date(),
         replyCount: 4,
     },
@@ -30,7 +30,7 @@ export const Preview: Story = {
         await userEvent.unhover(avatar);
         await userEvent.hover(avatar);
         await expect(
-            await canvas.findByText('The event model is ready for review.'),
+            await canvas.findByText('This is a sample preview message.'),
         ).toBeTruthy();
     },
 };
diff --git a/Source/Canvas/shapes/ChatBubble/ChatKit.stories.tsx b/Source/Canvas/shapes/ChatBubble/ChatKit.stories.tsx
index 2caf75c9..2273b2d7 100644
--- a/Source/Canvas/shapes/ChatBubble/ChatKit.stories.tsx
+++ b/Source/Canvas/shapes/ChatBubble/ChatKit.stories.tsx
@@ -50,35 +50,35 @@ const reactions: ChatMessageReaction[] = [
         emoji: '👍',
         users: [
             { id: viewerId, name: 'You', reactionId: Guid.create() },
-            { id: Guid.create(), name: 'Grace', reactionId: Guid.create() },
+            { id: Guid.create(), name: 'Example Participant', reactionId: Guid.create() },
         ],
     },
     {
         emoji: '🎉',
-        users: [{ id: Guid.create(), name: 'Linus', reactionId: Guid.create() }],
+        users: [{ id: Guid.create(), name: 'Demo Participant', reactionId: Guid.create() }],
     },
 ];
 const message: ChatMessage = {
     id: messageId,
     authorId,
-    authorName: 'Ada Lovelace',
-    authorInitials: 'AL',
+    authorName: 'Sample User',
+    authorInitials: 'SU',
     hasAvatar: false,
     authorKind: ChatAuthorKind.User,
-    text: 'The event model is ready for review.',
+    text: 'This is a sample message.',
     timestamp: new Date(),
     reactions,
 };
 const candidates: MentionCandidate[] = [
     {
         id: authorId.toString(),
-        name: 'Ada Lovelace',
+        name: 'Sample User',
         hasAvatar: false,
         kind: ChatAuthorKind.User,
     },
     {
         id: Guid.create().toString(),
-        name: 'Review Agent',
+        name: 'Demo Assistant',
         hasAvatar: false,
         kind: ChatAuthorKind.Agent,
     },
@@ -116,7 +116,7 @@ export const Avatar: Story = {
     render: () => (
         <PersonAvatarCircle
             userId={authorId}
-            name='Ada Lovelace'
+            name='Sample User'
             hasAvatar={false}
             size={56}
         />
@@ -194,12 +194,12 @@ export const Typing: Story = {
             authors={[
                 {
                     id: authorId.toString(),
-                    name: 'Ada Lovelace',
+                    name: 'Sample User',
                     hasAvatar: false,
                     kind: ChatAuthorKind.User,
                 },
             ]}
-            label='Ada is typing…'
+            label='Sample User is typing…'
         />
     ),
 };
diff --git a/Source/Canvas/shapes/Note/Note.stories.tsx b/Source/Canvas/shapes/Note/Note.stories.tsx
index 7bbe4ac4..292266fe 100644
--- a/Source/Canvas/shapes/Note/Note.stories.tsx
+++ b/Source/Canvas/shapes/Note/Note.stories.tsx
@@ -22,7 +22,7 @@ type Story = StoryObj<typeof Note>;
 
 const initialNotes: NoteData[] = [
     { id: '1', x: 40, y: 40, width: 220, height: 160, text: 'Ideas for the kickoff meeting' },
-    { id: '2', x: 320, y: 100, width: 160, height: 120, text: 'Ping Ada about the API contract' },
+    { id: '2', x: 320, y: 100, width: 160, height: 120, text: 'Review the sample API contract' },
     { id: '3', x: 640, y: 60, width: 140, height: 140, text: 'Ship it 🚀' },
     {
         id: '4',
diff --git a/Source/DataTables/DataTableCore.stories.tsx b/Source/DataTables/DataTableCore.stories.tsx
index 386ec456..c1316a78 100644
--- a/Source/DataTables/DataTableCore.stories.tsx
+++ b/Source/DataTables/DataTableCore.stories.tsx
@@ -13,9 +13,9 @@ interface Person {
 }
 
 const people: Person[] = [
-    { id: 1, name: 'Ada Lovelace', role: 'Administrator' },
-    { id: 2, name: 'Grace Hopper', role: 'Developer' },
-    { id: 3, name: 'Margaret Hamilton', role: 'Viewer' },
+    { id: 1, name: 'Sample Administrator', role: 'Administrator' },
+    { id: 2, name: 'Example Developer', role: 'Developer' },
+    { id: 3, name: 'Demo Viewer', role: 'Viewer' },
 ];
 
 const meta = {

From 322c9b97ab8e3b76b9002723fbbecb76106f23df Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Wed, 26 Aug 2026 21:24:33 +0200
Subject: [PATCH 088/267] pi-agent: Implement package guards

---
 .github/workflows/javascript-build.yml        |   4 +
 Source/CommandForm/AutoCommandForm.tsx        |  42 ++--
 .../CommandForm/defaultFieldTypeProviders.ts  |  25 ++-
 .../when_overriding_a_default_provider.ts     |  28 +++
 Source/package.json                           |   1 +
 Source/scripts/lib/release-package-guards.mjs |  67 +++++++
 Source/scripts/verify-exports.mjs             |  15 +-
 Source/scripts/verify-package-archive.mjs     |  47 +++--
 Source/scripts/verify-packed-production.mjs   | 184 ++++++++++++++++++
 9 files changed, 372 insertions(+), 41 deletions(-)
 create mode 100644 Source/CommandForm/for_fieldTypeProviderRegistry/when_overriding_a_default_provider.ts
 create mode 100644 Source/scripts/lib/release-package-guards.mjs
 create mode 100644 Source/scripts/verify-packed-production.mjs

diff --git a/.github/workflows/javascript-build.yml b/.github/workflows/javascript-build.yml
index 0d128847..0732537a 100644
--- a/.github/workflows/javascript-build.yml
+++ b/.github/workflows/javascript-build.yml
@@ -152,6 +152,10 @@ jobs:
                   export NODE_OPTIONS="--max-old-space-size=4096"
                   yarn run prepare
 
+            - name: Verify packed production tree shaking
+              working-directory: Source
+              run: yarn verify-packed-production
+
             - name: Verify published exports
               working-directory: Source
               run: node scripts/verify-exports.mjs
diff --git a/Source/CommandForm/AutoCommandForm.tsx b/Source/CommandForm/AutoCommandForm.tsx
index f7508c38..53782a9b 100644
--- a/Source/CommandForm/AutoCommandForm.tsx
+++ b/Source/CommandForm/AutoCommandForm.tsx
@@ -1,17 +1,23 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import React, { useMemo } from 'react';
-import { Command } from '@cratis/arc/commands';
-import { CommandForm, CommandFormProps } from '@cratis/arc.react/commands';
+import type React from 'react';
+import { useMemo } from 'react';
+import type { Command } from '@cratis/arc/commands';
+import { CommandForm, type CommandFormProps } from '@cratis/arc.react/commands';
+import { registerDefaultFieldTypeProviders } from './defaultFieldTypeProviders';
 import { resolveFieldTypeProvider } from './fieldTypeProviderRegistry';
-import './defaultFieldTypeProviders';
+
+registerDefaultFieldTypeProviders();
 
 /**
  * Props for {@link AutoCommandForm} - every {@link CommandFormProps} except `children`, which is
  * generated from the command's own properties instead of being written out by hand.
  */
-export interface AutoCommandFormProps<TCommand extends object, TResponse = object> extends Omit<CommandFormProps<TCommand, TResponse>, 'children'> {
+export interface AutoCommandFormProps<
+    TCommand extends object,
+    TResponse = object,
+> extends Omit<CommandFormProps<TCommand, TResponse>, 'children'> {
     /**
      * Property names to leave out of the generated field list - for a property that should not
      * be user-editable, or one a custom field placed elsewhere on the page already covers.
@@ -22,7 +28,7 @@ export interface AutoCommandFormProps<TCommand extends object, TResponse = objec
 function formatTitle(propertyName: string): string {
     return propertyName
         .replace(/([A-Z])/g, ' $1')
-        .replace(/^./, character => character.toUpperCase())
+        .replace(/^./, (character) => character.toUpperCase())
         .trim();
 }
 
@@ -42,15 +48,22 @@ function formatTitle(propertyName: string): string {
  * ```
  */
 export function AutoCommandForm<TCommand extends object = object, TResponse = object>(
-    props: AutoCommandFormProps<TCommand, TResponse>
+    props: AutoCommandFormProps<TCommand, TResponse>,
 ): React.ReactElement {
     const { exclude, ...commandFormProps } = props;
-    const propertyDescriptors = useMemo(() => (new props.command() as unknown as Command).propertyDescriptors, [props.command]);
-    const excluded = useMemo(() => new Set<string>((exclude ?? []) as string[]), [exclude]);
+    // SAFETY: Arc command constructors expose the Command property-descriptor contract at runtime.
+    const propertyDescriptors = useMemo(
+        () => (new props.command() as unknown as Command).propertyDescriptors,
+        [props.command],
+    );
+    const excluded = useMemo(
+        () => new Set<string>((exclude ?? []) as string[]),
+        [exclude],
+    );
 
     const fields = propertyDescriptors
-        .filter(descriptor => !excluded.has(descriptor.name))
-        .map(descriptor => {
+        .filter((descriptor) => !excluded.has(descriptor.name))
+        .map((descriptor) => {
             const provider = resolveFieldTypeProvider(descriptor);
             if (!provider) {
                 return null;
@@ -60,7 +73,12 @@ export function AutoCommandForm<TCommand extends object = object, TResponse = ob
             return (
                 <Field
                     key={descriptor.name}
-                    value={(instance: TCommand) => (instance as unknown as Record<string, unknown>)[descriptor.name]}
+                    value={(instance: TCommand) => {
+                        // SAFETY: Arc descriptors name runtime properties on the same command instance.
+                        return (instance as unknown as Record<string, unknown>)[
+                            descriptor.name
+                        ];
+                    }}
                     title={formatTitle(descriptor.name)}
                 />
             );
diff --git a/Source/CommandForm/defaultFieldTypeProviders.ts b/Source/CommandForm/defaultFieldTypeProviders.ts
index e6165090..c7aa6c69 100644
--- a/Source/CommandForm/defaultFieldTypeProviders.ts
+++ b/Source/CommandForm/defaultFieldTypeProviders.ts
@@ -9,13 +9,24 @@ import { CalendarField } from './fields/CalendarField';
 
 /**
  * Registers the built-in {@link FieldTypeProvider}s {@link AutoCommandForm} falls back to for the
- * JavaScript primitive types a command property can have. Registered once, on module load.
+ * JavaScript primitive types a command property can have. {@link AutoCommandForm} calls this
+ * explicitly when its module loads so production tree shaking cannot discard the registration.
  */
 export function registerDefaultFieldTypeProviders(): void {
-    registerFieldTypeProvider({ canHandle: descriptor => descriptor.type === String, component: InputTextField });
-    registerFieldTypeProvider({ canHandle: descriptor => descriptor.type === Number, component: NumberField });
-    registerFieldTypeProvider({ canHandle: descriptor => descriptor.type === Boolean, component: CheckboxField });
-    registerFieldTypeProvider({ canHandle: descriptor => descriptor.type === Date, component: CalendarField });
+    registerFieldTypeProvider({
+        canHandle: (descriptor) => descriptor.type === String,
+        component: InputTextField,
+    });
+    registerFieldTypeProvider({
+        canHandle: (descriptor) => descriptor.type === Number,
+        component: NumberField,
+    });
+    registerFieldTypeProvider({
+        canHandle: (descriptor) => descriptor.type === Boolean,
+        component: CheckboxField,
+    });
+    registerFieldTypeProvider({
+        canHandle: (descriptor) => descriptor.type === Date,
+        component: CalendarField,
+    });
 }
-
-registerDefaultFieldTypeProviders();
diff --git a/Source/CommandForm/for_fieldTypeProviderRegistry/when_overriding_a_default_provider.ts b/Source/CommandForm/for_fieldTypeProviderRegistry/when_overriding_a_default_provider.ts
new file mode 100644
index 00000000..2018b4a9
--- /dev/null
+++ b/Source/CommandForm/for_fieldTypeProviderRegistry/when_overriding_a_default_provider.ts
@@ -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 { PropertyDescriptor } from '@cratis/arc/reflection';
+import { registerDefaultFieldTypeProviders } from '../defaultFieldTypeProviders';
+import {
+    clearFieldTypeProviders,
+    registerFieldTypeProvider,
+    resolveFieldTypeProvider,
+} from '../fieldTypeProviderRegistry';
+import { TextAreaField } from '../fields/TextAreaField';
+
+describe('when overriding a default provider', () => {
+    beforeEach(() => {
+        clearFieldTypeProviders();
+        registerDefaultFieldTypeProviders();
+        registerFieldTypeProvider({
+            canHandle: (descriptor) => descriptor.type === String,
+            component: TextAreaField,
+        });
+    });
+
+    it('should prefer the consumer provider', () => {
+        resolveFieldTypeProvider(
+            new PropertyDescriptor('name', String, false),
+        )!.component.should.equal(TextAreaField);
+    });
+});
diff --git a/Source/package.json b/Source/package.json
index e3b0fc50..eb40134b 100644
--- a/Source/package.json
+++ b/Source/package.json
@@ -130,6 +130,7 @@
         "copy-css": "./scripts/copy-css.sh",
         "verify-exports": "node ./scripts/verify-exports.mjs",
         "verify-package-archive": "node ./scripts/verify-package-archive.mjs",
+        "verify-packed-production": "node ./scripts/verify-packed-production.mjs",
         "verify-api-docs": "node ./scripts/verify-api-docs.mjs",
         "verify-public-types": "node ./scripts/verify-public-types.mjs",
         "verify-package-graph": "node ./scripts/verify-package-graph.mjs",
diff --git a/Source/scripts/lib/release-package-guards.mjs b/Source/scripts/lib/release-package-guards.mjs
new file mode 100644
index 00000000..3dd61fd7
--- /dev/null
+++ b/Source/scripts/lib/release-package-guards.mjs
@@ -0,0 +1,67 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+export const EXPECTED_CASCADE_LAYER_ORDER = [
+    'cratis-theme',
+    'cratis-components',
+    'cratis-utilities',
+];
+
+const primeFamilyPattern = /@primereact\/[A-Za-z0-9._~!$&'()*+,;=:@%/-]+|@primeuix\/[A-Za-z0-9._~!$&'()*+,;=:@%/-]+|(?:primereact|primeicons)(?:\/[A-Za-z0-9._~!$&'()*+,;=:@%/-]+)?/gu;
+
+/** Returns the names in the first statement that binds cascade-layer precedence. */
+export function firstBindingCascadeLayerOrder(styles) {
+    const statement = styles.match(/@layer\s+([^;{]+);/u);
+    if (!statement) return undefined;
+    return statement[1].split(',').map((layer) => layer.trim());
+}
+
+/** Requires the package's first layer-order statement to bind the reviewed public order exactly. */
+export function assertExpectedCascadeLayerOrder(styles, source) {
+    const actual = firstBindingCascadeLayerOrder(styles);
+    if (
+        !actual ||
+        actual.length !== EXPECTED_CASCADE_LAYER_ORDER.length ||
+        actual.some((layer, index) => layer !== EXPECTED_CASCADE_LAYER_ORDER[index])
+    ) {
+        throw new Error(
+            `${source}'s first binding cascade-layer order must be exactly ` +
+                `'${EXPECTED_CASCADE_LAYER_ORDER.join(', ')}'; found ` +
+                `'${actual?.join(', ') ?? '(none)'}`,
+        );
+    }
+}
+
+const isManifest = (entryName) => /(?:^|\/)package\.json$/u.test(entryName);
+const isEmittedJavaScriptOrDeclaration = (entryName) =>
+    /(?:^|\/)dist\/.*(?:\.js|\.d\.ts)$/u.test(entryName);
+
+/**
+ * Finds forbidden Prime-family references in packed manifests and emitted runtime/type files.
+ * Text matching is intentionally conservative: release verification fails closed even when a
+ * forbidden package name appears in a form a static import parser does not yet understand.
+ */
+export function findPrimeFamilyReferences(packedEntries) {
+    const references = [];
+    for (const [entryName, content] of packedEntries) {
+        if (!isManifest(entryName) && !isEmittedJavaScriptOrDeclaration(entryName)) {
+            continue;
+        }
+
+        const source = Buffer.isBuffer(content) ? content.toString('utf8') : String(content);
+        const matches = [...new Set(source.match(primeFamilyPattern) ?? [])];
+        for (const match of matches) references.push(`${entryName}: ${match}`);
+    }
+    return references;
+}
+
+/** Requires packed runtime, declarations, and manifests to remain Prime-family free. */
+export function assertNoPrimeFamilyReferences(packedEntries) {
+    const references = findPrimeFamilyReferences(packedEntries);
+    if (references.length > 0) {
+        throw new Error(
+            'Packed package contains forbidden Prime-family runtime/type dependencies:\n- ' +
+                references.join('\n- '),
+        );
+    }
+}
diff --git a/Source/scripts/verify-exports.mjs b/Source/scripts/verify-exports.mjs
index b23d61f4..218deaed 100644
--- a/Source/scripts/verify-exports.mjs
+++ b/Source/scripts/verify-exports.mjs
@@ -33,6 +33,7 @@ import { existsSync, readdirSync, readFileSync } from 'node:fs';
 import { readFile } from 'node:fs/promises';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
+import { assertExpectedCascadeLayerOrder } from './lib/release-package-guards.mjs';
 
 const packageDir = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
 const packageJsonPath = path.join(packageDir, 'package.json');
@@ -186,13 +187,13 @@ if (mapProblems.length > 0) {
 }
 console.log('Published source-map references are valid.');
 
-const publishedStyles = readFileSync(path.join(esmRoot, 'styles.css'), 'utf8');
-const requiredStyleLayers = ['cratis-components', 'cratis-utilities'];
-for (const layer of requiredStyleLayers) {
-    if (!publishedStyles.includes(layer)) {
-        console.error(`Published styles are missing the '${layer}' cascade layer.`);
-        process.exit(1);
-    }
+const publishedStylesPath = path.join(esmRoot, 'styles.css');
+const publishedStyles = readFileSync(publishedStylesPath, 'utf8');
+try {
+    assertExpectedCascadeLayerOrder(publishedStyles, publishedStylesPath);
+} catch (error) {
+    console.error(error instanceof Error ? error.message : String(error));
+    process.exit(1);
 }
 if (
     /::file-selector-button[^{}]*\{[^{}]*box-sizing:\s*border-box/u.test(publishedStyles)
diff --git a/Source/scripts/verify-package-archive.mjs b/Source/scripts/verify-package-archive.mjs
index e019cbed..b93111d0 100644
--- a/Source/scripts/verify-package-archive.mjs
+++ b/Source/scripts/verify-package-archive.mjs
@@ -1,9 +1,13 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { spawnSync } from 'node:child_process';
 import { gzipSync } from 'node:zlib';
 import path from 'node:path';
+import { readTarEntries } from './lib/packed-artifact.mjs';
+import {
+    assertExpectedCascadeLayerOrder,
+    assertNoPrimeFamilyReferences,
+} from './lib/release-package-guards.mjs';
 
 const archive = process.argv[2];
 if (!archive) {
@@ -11,19 +15,17 @@ if (!archive) {
     process.exit(1);
 }
 
-const runTar = (...args) => {
-    const result = spawnSync('tar', args, { encoding: 'utf8' });
-    if (result.status !== 0) {
-        console.error(result.stderr || `tar ${args.join(' ')} failed`);
+const normalizedArchive = path.resolve(archive);
+const packedEntries = readTarEntries(normalizedArchive);
+const entries = new Set(packedEntries.keys());
+const readPackedText = (entry) => {
+    const content = packedEntries.get(entry);
+    if (!content) {
+        console.error(`Package archive is missing '${entry}'.`);
         process.exit(1);
     }
-    return result.stdout;
+    return content.toString('utf8');
 };
-
-const normalizedArchive = path.resolve(archive);
-const entries = new Set(
-    runTar('-tzf', normalizedArchive).split(/\r?\n/u).filter(Boolean),
-);
 const requiredEntries = [
     'package/LICENSE',
     'package/README.md',
@@ -44,7 +46,7 @@ if (missing.length > 0) {
 }
 
 const verifyPackedMarkdownLinks = (entry) => {
-    const markdown = runTar('-xOzf', normalizedArchive, entry);
+    const markdown = readPackedText(entry);
     for (const match of markdown.matchAll(/\]\((\.?\.?\/[^)#?\s]+)(?:#[^)]+)?\)/gu)) {
         const target = path.posix.normalize(
             path.posix.join(path.posix.dirname(entry), decodeURIComponent(match[1])),
@@ -59,13 +61,13 @@ const verifyPackedMarkdownLinks = (entry) => {
 verifyPackedMarkdownLinks('package/README.md');
 verifyPackedMarkdownLinks('package/MIGRATION.md');
 
-const license = runTar('-xOzf', normalizedArchive, 'package/LICENSE');
+const license = readPackedText('package/LICENSE');
 if (!license.includes('MIT License') || !license.includes('Copyright (c) 2025 Cratis')) {
     console.error('Package LICENSE does not contain the expected Cratis MIT notice.');
     process.exit(1);
 }
 
-const notices = runTar('-xOzf', normalizedArchive, 'package/THIRD_PARTY_NOTICES.md');
+const notices = readPackedText('package/THIRD_PARTY_NOTICES.md');
 for (const expected of [
     'Allotment structural stylesheet',
     'John Walley',
@@ -81,7 +83,22 @@ for (const expected of [
     }
 }
 
-const styles = runTar('-xOzf', normalizedArchive, 'package/dist/esm/styles.css');
+try {
+    assertNoPrimeFamilyReferences(packedEntries);
+} catch (error) {
+    console.error(error instanceof Error ? error.message : String(error));
+    process.exit(1);
+}
+
+const stylesEntry = 'package/dist/esm/styles.css';
+const styles = readPackedText(stylesEntry);
+try {
+    assertExpectedCascadeLayerOrder(styles, stylesEntry);
+} catch (error) {
+    console.error(error instanceof Error ? error.message : String(error));
+    process.exit(1);
+}
+
 const styleBytes = Buffer.byteLength(styles);
 const gzipBytes = gzipSync(styles, { level: 9 }).byteLength;
 const declarationBlocks = styles.match(/\{/gu)?.length ?? 0;
diff --git a/Source/scripts/verify-packed-production.mjs b/Source/scripts/verify-packed-production.mjs
new file mode 100644
index 00000000..ca35dd99
--- /dev/null
+++ b/Source/scripts/verify-packed-production.mjs
@@ -0,0 +1,184 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+/*
+ * Verifies release behavior at the boundary that matters: the actual `yarn pack` archive after an
+ * aggressive production Rollup tree-shake. This catches registration that works from source only
+ * because a side-effect import happened to survive the development module graph.
+ */
+
+import assert from 'node:assert/strict';
+import { spawnSync } from 'node:child_process';
+import {
+    existsSync,
+    mkdtempSync,
+    readFileSync,
+    realpathSync,
+    rmSync,
+    writeFileSync,
+} from 'node:fs';
+import { tmpdir } from 'node:os';
+import path from 'node:path';
+import { pathToFileURL, fileURLToPath } from 'node:url';
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+import { rollup } from 'rollup';
+import { buildScratchNodeModules, packArtifact } from './lib/packed-artifact.mjs';
+import {
+    assertExpectedCascadeLayerOrder,
+    assertNoPrimeFamilyReferences,
+    EXPECTED_CASCADE_LAYER_ORDER,
+    findPrimeFamilyReferences,
+    firstBindingCascadeLayerOrder,
+} from './lib/release-package-guards.mjs';
+
+const packageDir = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const monorepoRoot = path.resolve(packageDir, '..');
+const keepFixture = process.argv.includes('--keep-fixture');
+
+function runGuardSelfTests() {
+    const correctlyOrderedStyles =
+        '/* comment */\n@layer cratis-theme, cratis-components, cratis-utilities;\n@layer cratis-components {}';
+    assert.deepEqual(
+        firstBindingCascadeLayerOrder(correctlyOrderedStyles),
+        EXPECTED_CASCADE_LAYER_ORDER,
+    );
+    assert.throws(() =>
+        assertExpectedCascadeLayerOrder(
+            '@layer cratis-components, cratis-theme, cratis-utilities;',
+            'synthetic.css',
+        ),
+    );
+
+    const forbiddenEntries = new Map([
+        ['package/package.json', Buffer.from('{"dependencies":{"primereact":"1"}}')],
+        ['package/dist/esm/runtime.js', Buffer.from("import '@primereact/core';")],
+        ['package/dist/esm/types.d.ts', Buffer.from("import type {} from '@primeuix/themes';")],
+        ['package/dist/esm/icon.js', Buffer.from("import 'primeicons/primeicons.css';")],
+    ]);
+    assert.equal(findPrimeFamilyReferences(forbiddenEntries).length, 4);
+    assert.throws(() => assertNoPrimeFamilyReferences(forbiddenEntries));
+    assert.doesNotThrow(() =>
+        assertNoPrimeFamilyReferences(
+            new Map([
+                ['package/package.json', Buffer.from('{"dependencies":{"react":"19"}}')],
+                ['package/dist/esm/runtime.js', Buffer.from("import React from 'react';")],
+            ]),
+        ),
+    );
+}
+
+runGuardSelfTests();
+
+const pkg = JSON.parse(readFileSync(path.join(packageDir, 'package.json'), 'utf8'));
+const esmRoot = path.join(packageDir, path.dirname(pkg.module ?? 'dist/esm/index.js'));
+if (!existsSync(esmRoot)) {
+    console.error(
+        `Built output not found at ${esmRoot}. Run the publish build first: ` +
+            '`yarn workspace @cratis/components run prepare`.',
+    );
+    process.exit(1);
+}
+
+const scratchRoot = realpathSync(
+    mkdtempSync(path.join(tmpdir(), 'cratis-components-packed-production-')),
+);
+const cleanup = () => {
+    if (!keepFixture) rmSync(scratchRoot, { recursive: true, force: true });
+};
+process.once('exit', cleanup);
+
+try {
+    const { entries: packedEntries } = packArtifact(packageDir, scratchRoot);
+    assertNoPrimeFamilyReferences(packedEntries);
+
+    const packedStylesEntry = 'package/dist/esm/styles.css';
+    const packedStyles = packedEntries.get(packedStylesEntry);
+    if (!packedStyles) throw new Error(`Packed package is missing ${packedStylesEntry}.`);
+    assertExpectedCascadeLayerOrder(packedStyles.toString('utf8'), packedStylesEntry);
+
+    const { packedComponentsDir } = buildScratchNodeModules({
+        monorepoRoot,
+        scratchRoot,
+        packedEntries,
+    });
+    writeFileSync(
+        path.join(scratchRoot, 'package.json'),
+        JSON.stringify({ private: true, type: 'module' }, null, 4),
+    );
+
+    const consumerEntry = path.join(scratchRoot, 'consumer.mjs');
+    writeFileSync(
+        consumerEntry,
+        `import { AutoCommandForm, resolveFieldTypeProvider } from '@cratis/components/CommandForm';
+const stringProvider = resolveFieldTypeProvider({ name: 'value', type: String, isNullable: false });
+export { AutoCommandForm };
+export const stringDefaultProviderRegistered = Boolean(stringProvider?.component);
+`,
+    );
+
+    const productionBundle = await rollup({
+        input: consumerEntry,
+        external: (specifier) => {
+            if (specifier === pkg.name || specifier.startsWith(`${pkg.name}/`)) return false;
+            return !specifier.startsWith('.') && !path.isAbsolute(specifier) && !specifier.startsWith('\0');
+        },
+        plugins: [nodeResolve()],
+        treeshake: {
+            preset: 'smallest',
+            moduleSideEffects: false,
+        },
+        onwarn(warning, defaultHandler) {
+            if (warning.code === 'MODULE_LEVEL_DIRECTIVE') return;
+            defaultHandler(warning);
+        },
+    });
+
+    const packedModulePrefix = `${realpathSync(packedComponentsDir)}${path.sep}`;
+    if (!productionBundle.watchFiles.some((file) => realpathSync(file).startsWith(packedModulePrefix))) {
+        throw new Error('Production bundle did not resolve @cratis/components from the packed artifact.');
+    }
+
+    const bundleFile = path.join(scratchRoot, 'production-bundle.mjs');
+    await productionBundle.write({
+        file: bundleFile,
+        format: 'es',
+        compact: true,
+        generatedCode: 'es2015',
+    });
+    await productionBundle.close();
+
+    const bundledSource = readFileSync(bundleFile, 'utf8');
+    if (bundledSource.includes('@cratis/components/CommandForm')) {
+        throw new Error('Production bundle left the Components fixture external instead of tree-shaking it.');
+    }
+
+    const runtimeProbe = `const bundled = await import(${JSON.stringify(pathToFileURL(bundleFile).href)});
+if (typeof bundled.AutoCommandForm !== 'function') throw new Error('AutoCommandForm was tree-shaken away.');
+if (bundled.stringDefaultProviderRegistered !== true) throw new Error('The String default field provider was not registered.');
+console.log('VERIFIED');`;
+    const runtimeResult = spawnSync(
+        process.execPath,
+        ['--input-type', 'module', '--eval', runtimeProbe],
+        {
+            cwd: scratchRoot,
+            encoding: 'utf8',
+            env: { ...process.env, NODE_ENV: 'production' },
+            timeout: 120_000,
+        },
+    );
+    if (runtimeResult.status !== 0 || !runtimeResult.stdout.includes('VERIFIED')) {
+        throw new Error(
+            'Packed production bundle runtime probe failed:\n' +
+                (runtimeResult.stderr || runtimeResult.stdout || `exit ${runtimeResult.status}`),
+        );
+    }
+
+    console.log(
+        'Packed production verification passed: AutoCommandForm and its String default provider ' +
+            'survive aggressive Rollup tree shaking; Prime families are absent; cascade-layer order is exact.',
+    );
+    if (keepFixture) console.log(`Fixture retained at ${scratchRoot}`);
+} catch (error) {
+    console.error(`verify-packed-production: ${error instanceof Error ? error.message : String(error)}`);
+    process.exitCode = 1;
+}

From fb6614d1ae3513843d86d1ff48464b7904f5f36e Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Wed, 26 Aug 2026 22:12:17 +0200
Subject: [PATCH 089/267] pi-agent: Weave PR 189 into V4

---
 Documentation/Canvas/index.md                 |  12 +-
 Documentation/Canvas/messaging.md             |  20 +--
 Documentation/Canvas/notes.md                 |  48 +++---
 Documentation/Canvas/regions.md               |  73 +++++----
 Source/Canvas/Canvas.tsx                      |  50 ++++---
 Source/Canvas/CanvasItem.tsx                  |   1 -
 .../Canvas/messaging/useOptionalMessenger.ts  |   9 +-
 Source/Canvas/shapes/ChatBubble/Chat.tsx      |  12 +-
 Source/Canvas/shapes/Region/Region.tsx        | 138 ++++++++++++------
 ...an_item_center_lies_exactly_on_the_edge.ts |  15 +-
 .../when_an_item_is_excluded_by_id.ts         |  20 ++-
 .../when_items_lie_inside_and_outside.ts      |  15 +-
 .../Canvas/shapes/Region/regionContainment.ts |   4 +-
 13 files changed, 262 insertions(+), 155 deletions(-)

diff --git a/Documentation/Canvas/index.md b/Documentation/Canvas/index.md
index a668f5b7..656e45f1 100644
--- a/Documentation/Canvas/index.md
+++ b/Documentation/Canvas/index.md
@@ -109,13 +109,13 @@ Both layers share the same camera: panning and zooming transform the DOM layer's
 
 `CanvasItem` positions and measures DOM content inside a `Canvas`.
 
-| Prop       | Type                      | Meaning                                                                                                                        |
-| ---------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| Prop       | Type                      | Meaning                                                                                                                                                                                                                                                                                                                                             |
+| ---------- | ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `id`       | `string`                  | Registers the item under a caller-chosen key instead of an internally generated one, making its bounds addressable by id — what a sibling `Region` matches against for membership reporting. Omit for the same behavior as before this prop existed: still measured for the minimap/fit-to-content, but anonymous to anything matching items by id. |
-| `x` / `y`  | `number`                  | World position.                                                                                                                |
-| `zIndex`   | `number`                  | Item-root stacking order. Use this rather than a descendant z-index because each transformed item is its own stacking context. |
-| `onSize`   | `(width, height) => void` | Reports measured size changes.                                                                                                 |
-| `children` | `ReactNode`               | Item content.                                                                                                                  |
+| `x` / `y`  | `number`                  | World position.                                                                                                                                                                                                                                                                                                                                     |
+| `zIndex`   | `number`                  | Item-root stacking order. Use this rather than a descendant z-index because each transformed item is its own stacking context.                                                                                                                                                                                                                      |
+| `onSize`   | `(width, height) => void` | Reports measured size changes.                                                                                                                                                                                                                                                                                                                      |
+| `children` | `ReactNode`               | Item content.                                                                                                                                                                                                                                                                                                                                       |
 
 ### Item registry: `getSnapshot`/`subscribe`
 
diff --git a/Documentation/Canvas/messaging.md b/Documentation/Canvas/messaging.md
index 80125ac7..327bd494 100644
--- a/Documentation/Canvas/messaging.md
+++ b/Documentation/Canvas/messaging.md
@@ -13,10 +13,12 @@ import { useOnMessage } from '@cratis/arc.react/messaging';
 import { ItemAddedToRegion, ItemRemovedFromRegion } from '@cratis/components/Canvas';
 
 function Board() {
-    useOnMessage(ItemAddedToRegion, message => {
+    useOnMessage(ItemAddedToRegion, (message) => {
         // message.regionId, message.itemId — persist membership, issue a command, whatever the board means by it
     });
-    useOnMessage(ItemRemovedFromRegion, message => { /* ... */ });
+    useOnMessage(ItemRemovedFromRegion, (message) => {
+        /* ... */
+    });
     // ... render the Canvas
 }
 ```
@@ -32,12 +34,12 @@ Messages are keyed by ids the host already owns, opted in per shape:
 
 ## Message catalog
 
-| Message | Fields | Published when |
-|---|---|---|
-| `ItemAddedToRegion` | `regionId`, `itemId` | A sibling `CanvasItem` carrying an `id` newly has its center point within a `Region`'s bounds — whether the item moved into the region, or the region was moved/resized over it. Also published on mount for every item already contained, so a subscriber never misses the initial state. |
-| `ItemRemovedFromRegion` | `regionId`, `itemId` | Such an item's center point leaves the region's bounds — including by the item unmounting. |
-| `NoteTextChanged` | `noteId`, `text` | A `Note` edit is committed (the editor loses focus) — the same moment `onTextChange` fires, never per keystroke. Carries the full committed text. |
-| `ChatMessageAdded` | `chatId`, `text` | A `Chat` given an `id` sends a message from its composer — the same moment `onSend` fires. |
+| Message                 | Fields               | Published when                                                                                                                                                                                                                                                                             |
+| ----------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `ItemAddedToRegion`     | `regionId`, `itemId` | A sibling `CanvasItem` carrying an `id` newly has its center point within a `Region`'s bounds — whether the item moved into the region, or the region was moved/resized over it. Also published on mount for every item already contained, so a subscriber never misses the initial state. |
+| `ItemRemovedFromRegion` | `regionId`, `itemId` | Such an item's center point leaves the region's bounds — including by the item unmounting.                                                                                                                                                                                                 |
+| `NoteTextChanged`       | `noteId`, `text`     | A `Note` edit is committed (the editor loses focus) — the same moment `onTextChange` fires, never per keystroke. Carries the full committed text.                                                                                                                                          |
+| `ChatMessageAdded`      | `chatId`, `text`     | A `Chat` given an `id` sends a message from its composer — the same moment `onSend` fires.                                                                                                                                                                                                 |
 
 All of them are plain classes with `constructor(readonly ...)` fields, importable from `@cratis/components/Canvas`.
 
@@ -61,7 +63,7 @@ import { useMessenger } from '@cratis/arc.react/messaging';
 
 const messenger = useMessenger();
 const handleFlip = () => {
-    onFlip(card.id);                                   // the callback contract stays primary
+    onFlip(card.id); // the callback contract stays primary
     messenger.publish(new CardFlipped(card.id, !card.faceUp));
 };
 ```
diff --git a/Documentation/Canvas/notes.md b/Documentation/Canvas/notes.md
index 85bf459b..44f8e2b9 100644
--- a/Documentation/Canvas/notes.md
+++ b/Documentation/Canvas/notes.md
@@ -16,18 +16,22 @@ function Board() {
     const [selectedId, setSelectedId] = useState<string | null>(null);
 
     const updateNote = (id: string, changes: Partial<NoteData>) =>
-        setNotes(current => current.map(note => (note.id === id ? { ...note, ...changes } : note)));
+        setNotes((current) =>
+            current.map((note) => (note.id === id ? { ...note, ...changes } : note)),
+        );
 
     return (
         <Canvas>
-            {notes.map(note => (
+            {notes.map((note) => (
                 <CanvasItem key={note.id} x={note.x} y={note.y}>
                     <Note
                         note={note}
                         selected={selectedId === note.id}
-                        onSelect={id => setSelectedId(id)}
+                        onSelect={(id) => setSelectedId(id)}
                         onMove={(id, x, y) => updateNote(id, { x, y })}
-                        onResize={(id, x, y, width, height) => updateNote(id, { x, y, width, height })}
+                        onResize={(id, x, y, width, height) =>
+                            updateNote(id, { x, y, width, height })
+                        }
                         onTextChange={(id, text) => updateNote(id, { text })}
                     />
                 </CanvasItem>
@@ -39,26 +43,26 @@ function Board() {
 
 ## `NoteData`
 
-| Field | Type | Description |
-|---|---|---|
-| `id` | `string` | Identifies the note across renders |
-| `x` / `y` | `number` | World-space position |
-| `width` / `height` | `number` | Size in world-space units |
-| `text` | `string` | The note's content |
+| Field              | Type     | Description                        |
+| ------------------ | -------- | ---------------------------------- |
+| `id`               | `string` | Identifies the note across renders |
+| `x` / `y`          | `number` | World-space position               |
+| `width` / `height` | `number` | Size in world-space units          |
+| `text`             | `string` | The note's content                 |
 
 ## Props and callbacks
 
-| Prop | Description |
-|---|---|
-| `note: NoteData` | The note to render |
-| `selected: boolean` | Whether the note shows its selection outline and resize handles |
-| `onSelect(id, additive)` | The note was clicked/pressed. `additive` is true when the gesture carried a shift/meta/ctrl modifier, for a host that supports multi-select |
-| `onMove(id, x, y)` | Fired continuously while dragging |
-| `onMoveEnd?(id)` | Fired once when a drag ends |
-| `onResize(id, x, y, width, height)` | Fired continuously while resizing from any of the eight handles |
-| `onResizeEnd?(id)` | Fired once when a resize ends |
-| `onTextChange(id, text)` | Fired when the note's text is committed (on blur, after double-click enters edit mode) |
-| `onExpandedChange?(id, isExpanded)` | Fired when the note grows to show its full text, or shrinks back — see below |
+| Prop                                | Description                                                                                                                                 |
+| ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
+| `note: NoteData`                    | The note to render                                                                                                                          |
+| `selected: boolean`                 | Whether the note shows its selection outline and resize handles                                                                             |
+| `onSelect(id, additive)`            | The note was clicked/pressed. `additive` is true when the gesture carried a shift/meta/ctrl modifier, for a host that supports multi-select |
+| `onMove(id, x, y)`                  | Fired continuously while dragging                                                                                                           |
+| `onMoveEnd?(id)`                    | Fired once when a drag ends                                                                                                                 |
+| `onResize(id, x, y, width, height)` | Fired continuously while resizing from any of the eight handles                                                                             |
+| `onResizeEnd?(id)`                  | Fired once when a resize ends                                                                                                               |
+| `onTextChange(id, text)`            | Fired when the note's text is committed (on blur, after double-click enters edit mode)                                                      |
+| `onExpandedChange?(id, isExpanded)` | Fired when the note grows to show its full text, or shrinks back — see below                                                                |
 
 A host slow to feed an updated `note` back after a callback will see the note spring back to its last known value, the same trade-off `Region` makes for its own drag/resize/rename.
 
@@ -70,7 +74,7 @@ A note's font size is not fixed — `Note` measures its text against an off-scre
 
 When even the smallest readable size can't fit the text, `Note` shows a small expand button (a "+") in the corner instead of clipping the text. Clicking it grows the note to a height that shows everything, without changing its stored `width`/`height` — the grown state is a hover-like look, not a persisted resize, and falls back to the note's real size the moment the pointer leaves it (or the text is edited/resized back to fitting again).
 
-Because an expanded note visually reaches over whatever sits below it, `onExpandedChange` tells the host when this happens so it can raise the note above its siblings for that duration — `Note` renders inside its own stacking context via `CanvasItem`'s `transform`, so it cannot raise itself above a *different* item on its own; see the `zIndex` note in [Basic Usage](basic-usage.md).
+Because an expanded note visually reaches over whatever sits below it, `onExpandedChange` tells the host when this happens so it can raise the note above its siblings for that duration — `Note` renders inside its own stacking context via `CanvasItem`'s `transform`, so it cannot raise itself above a _different_ item on its own; see the `zIndex` note in [Basic Usage](basic-usage.md).
 
 ## Opt-in messaging
 
diff --git a/Documentation/Canvas/regions.md b/Documentation/Canvas/regions.md
index 32fe3691..9e38fb74 100644
--- a/Documentation/Canvas/regions.md
+++ b/Documentation/Canvas/regions.md
@@ -9,7 +9,12 @@ import { Region, type RegionData } from '@cratis/components/Canvas';
 
 function Board() {
     const [region, setRegion] = useState<RegionData>({
-        id: 'planning', x: 40, y: 40, width: 400, height: 260, name: 'Planning',
+        id: 'planning',
+        x: 40,
+        y: 40,
+        width: 400,
+        height: 260,
+        name: 'Planning',
     });
     const [selected, setSelected] = useState(false);
 
@@ -20,9 +25,13 @@ function Board() {
                     region={region}
                     selected={selected}
                     onSelect={() => setSelected(true)}
-                    onMove={(id, x, y) => setRegion(current => ({ ...current, x, y }))}
-                    onResize={(id, x, y, width, height) => setRegion(current => ({ ...current, x, y, width, height }))}
-                    onNameChange={(id, name) => setRegion(current => ({ ...current, name }))}
+                    onMove={(id, x, y) => setRegion((current) => ({ ...current, x, y }))}
+                    onResize={(id, x, y, width, height) =>
+                        setRegion((current) => ({ ...current, x, y, width, height }))
+                    }
+                    onNameChange={(id, name) =>
+                        setRegion((current) => ({ ...current, name }))
+                    }
                 />
             </CanvasItem>
         </Canvas>
@@ -34,37 +43,51 @@ Only a drag started on the region's title bar moves it — a press on the region
 
 ## `RegionData`
 
-| Field | Type | Description |
-|---|---|---|
-| `id` | `string` | Identifies the region across renders |
-| `x` / `y` | `number` | World-space position |
-| `width` / `height` | `number` | Size in world-space units |
-| `name` | `string` | The label shown in the title bar |
+| Field              | Type     | Description                          |
+| ------------------ | -------- | ------------------------------------ |
+| `id`               | `string` | Identifies the region across renders |
+| `x` / `y`          | `number` | World-space position                 |
+| `width` / `height` | `number` | Size in world-space units            |
+| `name`             | `string` | The label shown in the title bar     |
 
 ## Props and callbacks
 
-| Prop | Description |
-|---|---|
-| `region: RegionData` | The region to render |
-| `selected: boolean` | Whether the region shows its selection outline and resize handles |
-| `onSelect(id, additive)` | The title bar was clicked/pressed. `additive` reports a shift/meta/ctrl modifier, for multi-select |
-| `onMove(id, x, y)` | Fired continuously while dragging from the title bar |
-| `onMoveEnd?(id)` | Fired once when a drag ends |
-| `onResize(id, x, y, width, height)` | Fired continuously while resizing from any of the eight handles |
-| `onResizeEnd?(id)` | Fired once when a resize ends |
-| `onNameChange(id, name)` | Fired when a rename is committed (double-click the title bar to rename) |
-| `children?` | Rendered inside the region's own coordinate space, for visually nesting other shapes inside its bounds |
+| Prop                                | Description                                                                                            |
+| ----------------------------------- | ------------------------------------------------------------------------------------------------------ |
+| `region: RegionData`                | The region to render                                                                                   |
+| `selected: boolean`                 | Whether the region shows its selection outline and resize handles                                      |
+| `onSelect(id, additive)`            | The title bar was clicked/pressed. `additive` reports a shift/meta/ctrl modifier, for multi-select     |
+| `onMove(id, x, y)`                  | Fired continuously while dragging from the title bar                                                   |
+| `onMoveEnd?(id)`                    | Fired once when a drag ends                                                                            |
+| `onResize(id, x, y, width, height)` | Fired continuously while resizing from any of the eight handles                                        |
+| `onResizeEnd?(id)`                  | Fired once when a resize ends                                                                          |
+| `onNameChange(id, name)`            | Fired when a rename is committed (double-click the title bar to rename)                                |
+| `children?`                         | Rendered inside the region's own coordinate space, for visually nesting other shapes inside its bounds |
 
-## `children` is visual nesting only — membership is detected and *reported*, never owned
+## `children` is visual nesting only — membership is detected and _reported_, never owned
 
 `Region` renders its `children` positioned relative to its own top-left corner, so items placed at region-relative coordinates line up correctly inside it:
 
 ```tsx
 <CanvasItem id={region.id} x={region.x} y={region.y}>
-    <Region region={region} selected={false} onSelect={() => {}} onMove={() => {}} onResize={() => {}} onNameChange={() => {}}>
+    <Region
+        region={region}
+        selected={false}
+        onSelect={() => {}}
+        onMove={() => {}}
+        onResize={() => {}}
+        onNameChange={() => {}}
+    >
         {/* Rendered inside the region's own coordinate space */}
         <div style={{ position: 'absolute', left: 20, top: 40 }}>
-            <Note note={noteInsideRegion} selected={false} onSelect={() => {}} onMove={() => {}} onResize={() => {}} onTextChange={() => {}} />
+            <Note
+                note={noteInsideRegion}
+                selected={false}
+                onSelect={() => {}}
+                onMove={() => {}}
+                onResize={() => {}}
+                onTextChange={() => {}}
+            />
         </div>
     </Region>
 </CanvasItem>
@@ -74,4 +97,4 @@ Rendering something as `children` does not make it a "member" — the two mechan
 
 Note the required convention in the snippet above: the `CanvasItem` wrapping a `Region` is given `id={region.id}`. That is how the region recognizes its own registry entry and excludes itself from its containment reports. Overlapping regions may each claim the same item — both publish an `ItemAddedToRegion` — and that is by design: resolving exclusivity is the host's call.
 
-Detection is where it ends: `Region` still never moves members, persists nothing, and knows nothing about item types. It does not move contained items along with it when dragged or resized, and it holds no membership state a host could query. Deciding what membership *means*, storing it, rendering members as `children`, and keeping them moving together is board-level orchestration the host owns entirely. This is a deliberate design boundary, not a missing feature: a generic shell that reports what it sees is reusable in ways a shell with its own opinion about membership would not be.
+Detection is where it ends: `Region` still never moves members, persists nothing, and knows nothing about item types. It does not move contained items along with it when dragged or resized, and it holds no membership state a host could query. Deciding what membership _means_, storing it, rendering members as `children`, and keeping them moving together is board-level orchestration the host owns entirely. This is a deliberate design boundary, not a missing feature: a generic shell that reports what it sees is reusable in ways a shell with its own opinion about membership would not be.
diff --git a/Source/Canvas/Canvas.tsx b/Source/Canvas/Canvas.tsx
index 90a1e080..208d2231 100644
--- a/Source/Canvas/Canvas.tsx
+++ b/Source/Canvas/Canvas.tsx
@@ -347,33 +347,41 @@ function Canvas<T extends CanvasItemData = CanvasItemData>({
     // is a faithful change signal for useSyncExternalStore consumers — same reference back means
     // nothing changed. Entry objects are replaced wholesale on update, never mutated, so entries
     // shared between an old snapshot and a new one are safe to hold onto.
-    const registrySnapshotRef = useRef<ReadonlyMap<string, CanvasItemRegistryEntry>>(new Map());
+    const registrySnapshotRef = useRef<ReadonlyMap<string, CanvasItemRegistryEntry>>(
+        new Map(),
+    );
     const registryListenersRef = useRef<Set<() => void>>(new Set());
 
     const notifyRegistryChanged = useCallback(() => {
         registrySnapshotRef.current = new Map(itemRegistryRef.current);
-        setItemRegistryVersion(version => version + 1);
-        registryListenersRef.current.forEach(listener => listener());
+        setItemRegistryVersion((version) => version + 1);
+        registryListenersRef.current.forEach((listener) => listener());
     }, []);
 
-    const registerItem = useCallback((id: string, entry: CanvasItemRegistryEntry) => {
-        const existing = itemRegistryRef.current.get(id);
-        if (
-            existing &&
-            existing.x === entry.x &&
-            existing.y === entry.y &&
-            existing.width === entry.width &&
-            existing.height === entry.height
-        )
-            return;
-        itemRegistryRef.current.set(id, entry);
-        notifyRegistryChanged();
-    }, [notifyRegistryChanged]);
-
-    const unregisterItem = useCallback((id: string) => {
-        if (!itemRegistryRef.current.delete(id)) return;
-        notifyRegistryChanged();
-    }, [notifyRegistryChanged]);
+    const registerItem = useCallback(
+        (id: string, entry: CanvasItemRegistryEntry) => {
+            const existing = itemRegistryRef.current.get(id);
+            if (
+                existing &&
+                existing.x === entry.x &&
+                existing.y === entry.y &&
+                existing.width === entry.width &&
+                existing.height === entry.height
+            )
+                return;
+            itemRegistryRef.current.set(id, entry);
+            notifyRegistryChanged();
+        },
+        [notifyRegistryChanged],
+    );
+
+    const unregisterItem = useCallback(
+        (id: string) => {
+            if (!itemRegistryRef.current.delete(id)) return;
+            notifyRegistryChanged();
+        },
+        [notifyRegistryChanged],
+    );
 
     const getRegistrySnapshot = useCallback(
         (): ReadonlyMap<string, CanvasItemRegistryEntry> => registrySnapshotRef.current,
diff --git a/Source/Canvas/CanvasItem.tsx b/Source/Canvas/CanvasItem.tsx
index 1f73afe8..eab4215b 100644
--- a/Source/Canvas/CanvasItem.tsx
+++ b/Source/Canvas/CanvasItem.tsx
@@ -7,7 +7,6 @@ import { CanvasItemRegistryContext } from './Canvas';
 
 /** Props for a measured DOM item positioned in Canvas world space. */
 export interface CanvasItemProps {
-
     /**
      * Registers this item in the Canvas item registry under a caller-chosen key instead of an
      * internally generated one. Opting in makes the item's world-space bounds addressable — a
diff --git a/Source/Canvas/messaging/useOptionalMessenger.ts b/Source/Canvas/messaging/useOptionalMessenger.ts
index 8e463139..3eaa5b2a 100644
--- a/Source/Canvas/messaging/useOptionalMessenger.ts
+++ b/Source/Canvas/messaging/useOptionalMessenger.ts
@@ -42,9 +42,12 @@ export type OptionalPublish = <TMessage extends object>(message: TMessage) => vo
 export function useOptionalMessenger(): OptionalPublish | undefined {
     const messenger = useMessenger() as ReturnType<typeof useMessenger> | undefined;
 
-    const publish = useCallback(<TMessage extends object>(message: TMessage) => {
-        messenger?.publish(message);
-    }, [messenger]);
+    const publish = useCallback(
+        <TMessage extends object>(message: TMessage) => {
+            messenger?.publish(message);
+        },
+        [messenger],
+    );
 
     return messenger ? publish : undefined;
 }
diff --git a/Source/Canvas/shapes/ChatBubble/Chat.tsx b/Source/Canvas/shapes/ChatBubble/Chat.tsx
index f9f8d827..be340c1c 100644
--- a/Source/Canvas/shapes/ChatBubble/Chat.tsx
+++ b/Source/Canvas/shapes/ChatBubble/Chat.tsx
@@ -55,7 +55,6 @@ export interface ChatLabels {
  * Accepts message data and reports sends/reactions/actions; owns no state except the draft being typed.
  */
 export interface ChatProps {
-
     /**
      * Identifies this conversation for opt-in messaging: when set, every send additionally
      * publishes a {@link ChatMessageAdded} carrying this id over the Arc messenger, at the same
@@ -220,10 +219,13 @@ export const Chat: React.FC<ChatProps> = ({
     // the `id` prop — without one there is nothing to key a {@link ChatMessageAdded} by.
     const publish = useOptionalMessenger();
 
-    const handleSend = useCallback((text: string) => {
-        onSend(text);
-        if (id) publish?.(new ChatMessageAdded(id, text));
-    }, [onSend, id, publish]);
+    const handleSend = useCallback(
+        (text: string) => {
+            onSend(text);
+            if (id) publish?.(new ChatMessageAdded(id, text));
+        },
+        [onSend, id, publish],
+    );
 
     useEffect(() => {
         messagesEndRef.current?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
diff --git a/Source/Canvas/shapes/Region/Region.tsx b/Source/Canvas/shapes/Region/Region.tsx
index 1866d385..0dc484ad 100644
--- a/Source/Canvas/shapes/Region/Region.tsx
+++ b/Source/Canvas/shapes/Region/Region.tsx
@@ -2,7 +2,14 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import type React from 'react';
-import { useCallback, useContext, useEffect, useRef, useState, useSyncExternalStore } from 'react';
+import {
+    useCallback,
+    useContext,
+    useEffect,
+    useRef,
+    useState,
+    useSyncExternalStore,
+} from 'react';
 import { CanvasItemRegistryContext, type CanvasItemRegistryEntry } from '../../Canvas';
 import { useOptionalMessenger } from '../../messaging/useOptionalMessenger';
 import { ItemAddedToRegion } from './ItemAddedToRegion';
@@ -17,27 +24,35 @@ const MIN_SIZE = 100;
 // permanently empty. Module-level so their identities never change between renders — a changing
 // subscribe identity would make useSyncExternalStore resubscribe every render.
 const EMPTY_REGISTRY: ReadonlyMap<string, CanvasItemRegistryEntry> = new Map();
-const getEmptyRegistry = (): ReadonlyMap<string, CanvasItemRegistryEntry> => EMPTY_REGISTRY;
-const subscribeToNothing = (): (() => void) => () => { /* nothing to unsubscribe */ };
+const getEmptyRegistry = (): ReadonlyMap<string, CanvasItemRegistryEntry> =>
+    EMPTY_REGISTRY;
+const subscribeToNothing = (): (() => void) => () => {
+    /* nothing to unsubscribe */
+};
 
 const HANDLE_KEYS = ['nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w'] as const;
 type HandleKey = (typeof HANDLE_KEYS)[number];
 
 const HANDLE_POSITIONS: Record<HandleKey, React.CSSProperties> = {
     nw: { top: -4, left: -4 },
-    n:  { top: -4, left: '50%', transform: 'translateX(-50%)' },
+    n: { top: -4, left: '50%', transform: 'translateX(-50%)' },
     ne: { top: -4, right: -4 },
-    e:  { top: '50%', right: -4, transform: 'translateY(-50%)' },
+    e: { top: '50%', right: -4, transform: 'translateY(-50%)' },
     se: { bottom: -4, right: -4 },
-    s:  { bottom: -4, left: '50%', transform: 'translateX(-50%)' },
+    s: { bottom: -4, left: '50%', transform: 'translateX(-50%)' },
     sw: { bottom: -4, left: -4 },
-    w:  { top: '50%', left: -4, transform: 'translateY(-50%)' },
+    w: { top: '50%', left: -4, transform: 'translateY(-50%)' },
 };
 
 const RESIZE_CURSORS: Record<HandleKey, string> = {
-    nw: 'nw-resize', n: 'n-resize', ne: 'ne-resize',
-    e: 'e-resize',   se: 'se-resize',
-    s: 's-resize',   sw: 'sw-resize', w: 'w-resize',
+    nw: 'nw-resize',
+    n: 'n-resize',
+    ne: 'ne-resize',
+    e: 'e-resize',
+    se: 'se-resize',
+    s: 's-resize',
+    sw: 'sw-resize',
+    w: 'w-resize',
 };
 
 /** Controlled data rendered by {@link Region}. */
@@ -107,7 +122,17 @@ export interface RegionProps {
  * this region is given `id={region.id}`, which is how the region recognizes and excludes itself.
  * Without an `ArcContext.Provider` (or with items that carry no `id`) all of this is silently inert.
  */
-export const Region = ({ region, selected, onSelect, onMove, onMoveEnd, onResize, onResizeEnd, onNameChange, children }: RegionProps) => {
+export const Region = ({
+    region,
+    selected,
+    onSelect,
+    onMove,
+    onMoveEnd,
+    onResize,
+    onResizeEnd,
+    onNameChange,
+    children,
+}: RegionProps) => {
     const [isEditing, setIsEditing] = useState(false);
 
     const regionRef = useRef<HTMLDivElement>(null);
@@ -146,14 +171,23 @@ export const Region = ({ region, selected, onSelect, onMove, onMoveEnd, onResize
         );
         const current = new Set(within);
         const previous = membershipRef.current;
-        current.forEach(itemId => {
+        current.forEach((itemId) => {
             if (!previous.has(itemId)) publish(new ItemAddedToRegion(region.id, itemId));
         });
-        previous.forEach(itemId => {
-            if (!current.has(itemId)) publish(new ItemRemovedFromRegion(region.id, itemId));
+        previous.forEach((itemId) => {
+            if (!current.has(itemId))
+                publish(new ItemRemovedFromRegion(region.id, itemId));
         });
         membershipRef.current = current;
-    }, [publish, registrySnapshot, region.id, region.x, region.y, region.width, region.height]);
+    }, [
+        publish,
+        registrySnapshot,
+        region.id,
+        region.x,
+        region.y,
+        region.width,
+        region.height,
+    ]);
 
     const dragRef = useRef<{
         clientX: number;
@@ -189,7 +223,8 @@ export const Region = ({ region, selected, onSelect, onMove, onMoveEnd, onResize
     const handlePointerDown = useCallback(
         (event: React.PointerEvent<HTMLDivElement>) => {
             if (isEditing) return;
-            clickedTitleBarRef.current = titleBarRef.current?.contains(event.target as Node) ?? false;
+            clickedTitleBarRef.current =
+                titleBarRef.current?.contains(event.target as Node) ?? false;
             if (!clickedTitleBarRef.current) return;
             event.stopPropagation();
             onSelect(region.id, event.shiftKey || event.metaKey || event.ctrlKey);
@@ -202,7 +237,7 @@ export const Region = ({ region, selected, onSelect, onMove, onMoveEnd, onResize
             };
             event.currentTarget.setPointerCapture(event.pointerId);
         },
-        [isEditing, region.id, region.x, region.y, onSelect, readEffectiveZoom]
+        [isEditing, region.id, region.x, region.y, onSelect, readEffectiveZoom],
     );
 
     const handlePointerMove = useCallback(
@@ -213,7 +248,7 @@ export const Region = ({ region, selected, onSelect, onMove, onMoveEnd, onResize
             const deltaY = (event.clientY - clientY) / zoom;
             onMove(region.id, startX + deltaX, startY + deltaY);
         },
-        [region.id, onMove]
+        [region.id, onMove],
     );
 
     const handlePointerUp = useCallback(() => {
@@ -241,13 +276,22 @@ export const Region = ({ region, selected, onSelect, onMove, onMoveEnd, onResize
             };
             event.currentTarget.setPointerCapture(event.pointerId);
         },
-        [region.x, region.y, region.width, region.height, readEffectiveZoom]
+        [region.x, region.y, region.width, region.height, readEffectiveZoom],
     );
 
     const handleResizePointerMove = useCallback(
         (event: React.PointerEvent<HTMLDivElement>) => {
             if (!resizeRef.current || !event.buttons) return;
-            const { handle, clientX, clientY, startX, startY, startWidth, startHeight, zoom } = resizeRef.current;
+            const {
+                handle,
+                clientX,
+                clientY,
+                startX,
+                startY,
+                startWidth,
+                startHeight,
+                zoom,
+            } = resizeRef.current;
             const deltaX = (event.clientX - clientX) / zoom;
             const deltaY = (event.clientY - clientY) / zoom;
 
@@ -273,7 +317,7 @@ export const Region = ({ region, selected, onSelect, onMove, onMoveEnd, onResize
 
             onResize(region.id, newX, newY, newWidth, newHeight);
         },
-        [region.id, onResize]
+        [region.id, onResize],
     );
 
     const handleResizePointerUp = useCallback(() => {
@@ -291,15 +335,19 @@ export const Region = ({ region, selected, onSelect, onMove, onMoveEnd, onResize
         setIsEditing(true);
     }, []);
 
-    const commitRename = useCallback((newName: string) => {
-        setIsEditing(false);
-        const trimmed = newName.trim();
-        if (trimmed && trimmed !== region.name) onNameChange(region.id, trimmed);
-    }, [region.id, region.name, onNameChange]);
+    const commitRename = useCallback(
+        (newName: string) => {
+            setIsEditing(false);
+            const trimmed = newName.trim();
+            if (trimmed && trimmed !== region.name) onNameChange(region.id, trimmed);
+        },
+        [region.id, region.name, onNameChange],
+    );
 
     const handleInputBlur = useCallback(
-        (event: React.FocusEvent<HTMLInputElement>) => commitRename(event.currentTarget.value),
-        [commitRename]
+        (event: React.FocusEvent<HTMLInputElement>) =>
+            commitRename(event.currentTarget.value),
+        [commitRename],
     );
 
     const handleInputKeyDown = useCallback(
@@ -307,7 +355,7 @@ export const Region = ({ region, selected, onSelect, onMove, onMoveEnd, onResize
             if (event.key === 'Enter') commitRename(event.currentTarget.value);
             else if (event.key === 'Escape') setIsEditing(false);
         },
-        [commitRename]
+        [commitRename],
     );
 
     return (
@@ -331,32 +379,34 @@ export const Region = ({ region, selected, onSelect, onMove, onMoveEnd, onResize
                             autoFocus
                             onBlur={handleInputBlur}
                             onKeyDown={handleInputKeyDown}
-                            onPointerDown={event => event.stopPropagation()}
+                            onPointerDown={(event) => event.stopPropagation()}
                         />
                     ) : (
                         <span className='canvas-region__name'>{region.name}</span>
                     )}
                 </div>
 
-                {selected && HANDLE_KEYS.map(handle => (
-                    <div
-                        key={handle}
-                        className='canvas-region__handle'
-                        style={{ ...HANDLE_POSITIONS[handle], cursor: RESIZE_CURSORS[handle] }}
-                        onPointerDown={handleResizePointerDown(handle)}
-                        onPointerMove={handleResizePointerMove}
-                        onPointerUp={handleResizePointerUp}
-                        onPointerCancel={handleResizePointerUp}
-                    />
-                ))}
+                {selected &&
+                    HANDLE_KEYS.map((handle) => (
+                        <div
+                            key={handle}
+                            className='canvas-region__handle'
+                            style={{
+                                ...HANDLE_POSITIONS[handle],
+                                cursor: RESIZE_CURSORS[handle],
+                            }}
+                            onPointerDown={handleResizePointerDown(handle)}
+                            onPointerMove={handleResizePointerMove}
+                            onPointerUp={handleResizePointerUp}
+                            onPointerCancel={handleResizePointerUp}
+                        />
+                    ))}
             </div>
             {/* Member items are positioned relative to the region's top-left (region.x/region.y). They
                 live outside the bordered box so the region's border does not offset their coordinate
                 origin — otherwise items would jump by the border width when moved into or out of a
                 region. */}
-            <div className='canvas-region__items'>
-                {children}
-            </div>
+            <div className='canvas-region__items'>{children}</div>
         </>
     );
 };
diff --git a/Source/Canvas/shapes/Region/for_itemsWithinRegion/when_an_item_center_lies_exactly_on_the_edge.ts b/Source/Canvas/shapes/Region/for_itemsWithinRegion/when_an_item_center_lies_exactly_on_the_edge.ts
index 06dccb8f..69a69e9a 100644
--- a/Source/Canvas/shapes/Region/for_itemsWithinRegion/when_an_item_center_lies_exactly_on_the_edge.ts
+++ b/Source/Canvas/shapes/Region/for_itemsWithinRegion/when_an_item_center_lies_exactly_on_the_edge.ts
@@ -21,9 +21,14 @@ describe('when an item center lies exactly on the edge', () => {
         ['on-corner', { x: 80, y: 80, width: 40, height: 40 }],
     ]);
 
-    it('should include the item centered on the left edge', () => result.should.contain('on-left-edge'));
-    it('should include the item centered on the right edge', () => result.should.contain('on-right-edge'));
-    it('should include the item centered on the top edge', () => result.should.contain('on-top-edge'));
-    it('should include the item centered on the bottom edge', () => result.should.contain('on-bottom-edge'));
-    it('should include the item centered on the corner', () => result.should.contain('on-corner'));
+    it('should include the item centered on the left edge', () =>
+        result.should.contain('on-left-edge'));
+    it('should include the item centered on the right edge', () =>
+        result.should.contain('on-right-edge'));
+    it('should include the item centered on the top edge', () =>
+        result.should.contain('on-top-edge'));
+    it('should include the item centered on the bottom edge', () =>
+        result.should.contain('on-bottom-edge'));
+    it('should include the item centered on the corner', () =>
+        result.should.contain('on-corner'));
 });
diff --git a/Source/Canvas/shapes/Region/for_itemsWithinRegion/when_an_item_is_excluded_by_id.ts b/Source/Canvas/shapes/Region/for_itemsWithinRegion/when_an_item_is_excluded_by_id.ts
index e877cbc5..ed3a0a82 100644
--- a/Source/Canvas/shapes/Region/for_itemsWithinRegion/when_an_item_is_excluded_by_id.ts
+++ b/Source/Canvas/shapes/Region/for_itemsWithinRegion/when_an_item_is_excluded_by_id.ts
@@ -5,13 +5,19 @@ import { itemsWithinRegion } from '../regionContainment';
 
 describe('when an item is excluded by id', () => {
     const region = { x: 0, y: 0, width: 400, height: 300 };
-    const result = itemsWithinRegion(region, [
-        // The region's own CanvasItem, registered under the region's id — dead center of itself.
-        ['the-region', { x: 0, y: 0, width: 400, height: 300 }],
-        ['a-member', { x: 40, y: 40, width: 80, height: 60 }],
-    ], 'the-region');
+    const result = itemsWithinRegion(
+        region,
+        [
+            // The region's own CanvasItem, registered under the region's id — dead center of itself.
+            ['the-region', { x: 0, y: 0, width: 400, height: 300 }],
+            ['a-member', { x: 40, y: 40, width: 80, height: 60 }],
+        ],
+        'the-region',
+    );
 
-    it('should not report the excluded item even though its center is within', () => result.should.not.contain('the-region'));
-    it('should still report the other contained item', () => result.should.contain('a-member'));
+    it('should not report the excluded item even though its center is within', () =>
+        result.should.not.contain('the-region'));
+    it('should still report the other contained item', () =>
+        result.should.contain('a-member'));
     it('should report exactly one item', () => result.length.should.equal(1));
 });
diff --git a/Source/Canvas/shapes/Region/for_itemsWithinRegion/when_items_lie_inside_and_outside.ts b/Source/Canvas/shapes/Region/for_itemsWithinRegion/when_items_lie_inside_and_outside.ts
index 275fecb4..d35ff6d4 100644
--- a/Source/Canvas/shapes/Region/for_itemsWithinRegion/when_items_lie_inside_and_outside.ts
+++ b/Source/Canvas/shapes/Region/for_itemsWithinRegion/when_items_lie_inside_and_outside.ts
@@ -18,10 +18,15 @@ describe('when items lie inside and outside the region', () => {
         ['center-just-out', { x: 55, y: 255, width: 100, height: 100 }],
     ]);
 
-    it('should include the item whose center is inside', () => result.should.contain('inside'));
-    it('should include the overhanging item whose center is inside', () => result.should.contain('overhanging'));
-    it('should not include the item left of the region', () => result.should.not.contain('outside-left'));
-    it('should not include the item below the region', () => result.should.not.contain('outside-below'));
-    it('should not include the overlapping item whose center is outside', () => result.should.not.contain('center-just-out'));
+    it('should include the item whose center is inside', () =>
+        result.should.contain('inside'));
+    it('should include the overhanging item whose center is inside', () =>
+        result.should.contain('overhanging'));
+    it('should not include the item left of the region', () =>
+        result.should.not.contain('outside-left'));
+    it('should not include the item below the region', () =>
+        result.should.not.contain('outside-below'));
+    it('should not include the overlapping item whose center is outside', () =>
+        result.should.not.contain('center-just-out'));
     it('should report only the contained items', () => result.length.should.equal(2));
 });
diff --git a/Source/Canvas/shapes/Region/regionContainment.ts b/Source/Canvas/shapes/Region/regionContainment.ts
index 1e770cf9..e24c139e 100644
--- a/Source/Canvas/shapes/Region/regionContainment.ts
+++ b/Source/Canvas/shapes/Region/regionContainment.ts
@@ -7,7 +7,6 @@
  * pure, dependency-free function usable on any `{x, y, width, height}` shape.
  */
 export interface RegionContainmentBounds {
-
     /** The rectangle's left edge in world space. */
     x: number;
 
@@ -37,7 +36,8 @@ export interface RegionContainmentBounds {
 export function itemsWithinRegion(
     regionBounds: RegionContainmentBounds,
     items: Iterable<[string, RegionContainmentBounds]>,
-    excludeId?: string): string[] {
+    excludeId?: string,
+): string[] {
     const left = regionBounds.x;
     const top = regionBounds.y;
     const right = regionBounds.x + regionBounds.width;

From 38e1668f9b2bf06ce8bd71a224a50d4427a78f66 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Wed, 26 Aug 2026 22:02:49 +0200
Subject: [PATCH 090/267] Fix packed-production cascade-layer guard rejecting
 Tailwind's leading @layer properties;

verify-packed-production (and the shared release-package-guards.mjs it powers for
verify-package-archive and verify-exports) checked only the first `@layer ...;`
statement in the packed dist/esm/styles.css. Tailwind v4's compiled output leads with
a single-name `@layer properties;` forward declaration (for its @property
custom-property fallback) ahead of the statement that actually binds Cratis's own
`cratis-theme, cratis-components, cratis-utilities` precedence, so the guard's first
match had only one name and was rejected as an incomplete order-binding statement -
a false failure on valid, correctly-ordered packed output.

Replace the single-statement check with cascadeLayerEstablishmentOrder(), which walks
every `@layer` statement and block in the file (per CSS's own first-appearance
ordering rule) and returns the cumulative order in which each distinct layer name is
first established. assertExpectedCascadeLayerOrder() now requires that cumulative
order to equal exactly properties -> cratis-theme -> cratis-components ->
cratis-utilities, so a duplicate, reordered, or missing layer (including one
established out of order by its own opening block, not just by the binding
statement) still fails.

Update verify-packed-production.mjs's inline self-tests for the new semantics and add
scripts/for_release_package_guards/when_checking_cascade_layer_order.ts covering the
Tailwind-shaped regression plus reordered/missing/duplicate/out-of-order-block cases,
following the existing scripts/for_*/when_*.ts convention.

Verified against a real yarn workspace @cratis/components prepare build:
- yarn verify-packed-production: passes (previously failed on this exact input)
- yarn verify-exports: passes
- node scripts/verify-package-archive.mjs (shares the same guard): passes
- yarn test scripts/: 14/14 passing
- yarn lint on the touched files: clean
---
 .../when_checking_cascade_layer_order.ts      | 105 ++++++++++++++++++
 Source/scripts/lib/release-package-guards.mjs |  59 +++++++---
 Source/scripts/verify-packed-production.mjs   |  43 ++++++-
 3 files changed, 189 insertions(+), 18 deletions(-)
 create mode 100644 Source/scripts/for_release_package_guards/when_checking_cascade_layer_order.ts

diff --git a/Source/scripts/for_release_package_guards/when_checking_cascade_layer_order.ts b/Source/scripts/for_release_package_guards/when_checking_cascade_layer_order.ts
new file mode 100644
index 00000000..f4f9d547
--- /dev/null
+++ b/Source/scripts/for_release_package_guards/when_checking_cascade_layer_order.ts
@@ -0,0 +1,105 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { describe, expect, it } from 'vitest';
+import {
+    assertExpectedCascadeLayerOrder,
+    cascadeLayerEstablishmentOrder,
+    EXPECTED_CASCADE_LAYER_ORDER,
+} from '../lib/release-package-guards.mjs';
+
+/**
+ * Modeled after the actual `dist/esm/styles.css` Tailwind v4 + `@tailwindcss/postcss` produces:
+ * a leading, single-name `@layer properties;` forward declaration (for its `@property`
+ * custom-property fallback), the statement that binds Cratis's own precedence, each named layer's
+ * opening block, and the `properties` layer's own block reopened later in the file wrapped in an
+ * `@supports` guard.
+ */
+const packedProductionStyles =
+    '/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n' +
+    '@layer properties;\n' +
+    '@layer cratis-theme, cratis-components, cratis-utilities;\n' +
+    '@layer cratis-theme {\n  :root, :host {\n    --cratis-color-white: #fff;\n  }\n}\n' +
+    '@layer cratis-utilities {\n  .cratis\\:flex { display: flex; }\n' +
+    '  @property --tw-border-style {\n    syntax: "*";\n    inherits: false;\n    initial-value: solid;\n  }\n}\n' +
+    '@layer properties {\n  @supports ((-webkit-hyphens: none)) {\n    *, ::before, ::after {\n      --tw-border-style: solid;\n    }\n  }\n}\n' +
+    '@layer cratis-components {\n  .my-component { color: red; }\n}\n';
+
+describe('when checking the cascade-layer establishment order', () => {
+    it('should not reject the real packed-production shape', () => {
+        expect(() =>
+            assertExpectedCascadeLayerOrder(packedProductionStyles, 'styles.css'),
+        ).not.toThrow();
+    });
+
+    it('should report the cumulative first-occurrence order across the whole file', () => {
+        expect(cascadeLayerEstablishmentOrder(packedProductionStyles)).toEqual(
+            EXPECTED_CASCADE_LAYER_ORDER,
+        );
+        expect(EXPECTED_CASCADE_LAYER_ORDER).toEqual([
+            'properties',
+            'cratis-theme',
+            'cratis-components',
+            'cratis-utilities',
+        ]);
+    });
+
+    it('should reject styles missing the leading properties forward declaration', () => {
+        const withoutProperties = packedProductionStyles.replace(
+            '@layer properties;\n',
+            '',
+        );
+        expect(() =>
+            assertExpectedCascadeLayerOrder(withoutProperties, 'styles.css'),
+        ).toThrow(/cumulative cascade-layer establishment order must be exactly/);
+    });
+
+    it('should reject a binding statement that reorders the reviewed layers', () => {
+        const reordered = packedProductionStyles.replace(
+            '@layer cratis-theme, cratis-components, cratis-utilities;',
+            '@layer cratis-components, cratis-theme, cratis-utilities;',
+        );
+        expect(() => assertExpectedCascadeLayerOrder(reordered, 'styles.css')).toThrow();
+    });
+
+    it('should reject a layer whose opening block establishes it before the binding statement lists it', () => {
+        const utilitiesBeforeComponents =
+            '@layer properties;\n' +
+            '@layer cratis-theme {}\n' +
+            '@layer cratis-utilities {}\n' +
+            '@layer cratis-theme, cratis-components, cratis-utilities;\n' +
+            '@layer cratis-components {}\n';
+        expect(() =>
+            assertExpectedCascadeLayerOrder(utilitiesBeforeComponents, 'styles.css'),
+        ).toThrow();
+        expect(cascadeLayerEstablishmentOrder(utilitiesBeforeComponents)).toEqual([
+            'properties',
+            'cratis-theme',
+            'cratis-utilities',
+            'cratis-components',
+        ]);
+    });
+
+    it('should reject a missing layer even when the rest are correctly ordered', () => {
+        const missingUtilities = '@layer properties;\n@layer cratis-theme, cratis-components;\n';
+        expect(() =>
+            assertExpectedCascadeLayerOrder(missingUtilities, 'styles.css'),
+        ).toThrow();
+    });
+
+    it('should reject a duplicated layer name that does not repair an otherwise wrong order', () => {
+        const duplicatedButStillReordered =
+            '@layer properties;\n' +
+            '@layer cratis-utilities, cratis-theme, cratis-components;\n' +
+            '@layer cratis-utilities, cratis-theme, cratis-components;\n';
+        expect(() =>
+            assertExpectedCascadeLayerOrder(duplicatedButStillReordered, 'styles.css'),
+        ).toThrow();
+    });
+
+    it('should reject a stylesheet with no @layer statements at all', () => {
+        expect(() =>
+            assertExpectedCascadeLayerOrder('.foo { color: red; }', 'styles.css'),
+        ).toThrow(/found '\(none\)'/);
+    });
+});
diff --git a/Source/scripts/lib/release-package-guards.mjs b/Source/scripts/lib/release-package-guards.mjs
index 3dd61fd7..46d3cd17 100644
--- a/Source/scripts/lib/release-package-guards.mjs
+++ b/Source/scripts/lib/release-package-guards.mjs
@@ -2,6 +2,7 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 export const EXPECTED_CASCADE_LAYER_ORDER = [
+    'properties',
     'cratis-theme',
     'cratis-components',
     'cratis-utilities',
@@ -9,25 +10,55 @@ export const EXPECTED_CASCADE_LAYER_ORDER = [
 
 const primeFamilyPattern = /@primereact\/[A-Za-z0-9._~!$&'()*+,;=:@%/-]+|@primeuix\/[A-Za-z0-9._~!$&'()*+,;=:@%/-]+|(?:primereact|primeicons)(?:\/[A-Za-z0-9._~!$&'()*+,;=:@%/-]+)?/gu;
 
-/** Returns the names in the first statement that binds cascade-layer precedence. */
-export function firstBindingCascadeLayerOrder(styles) {
-    const statement = styles.match(/@layer\s+([^;{]+);/u);
-    if (!statement) return undefined;
-    return statement[1].split(',').map((layer) => layer.trim());
+/**
+ * Matches every `@layer` construct that establishes cascade-layer order: a forward-declaration
+ * statement (`@layer properties;`), a precedence-binding statement naming several layers at once
+ * (`@layer cratis-theme, cratis-components, cratis-utilities;`), and a block that opens/reopens a
+ * named layer (`@layer cratis-theme { ... }`). An anonymous `@layer { ... }` block (no name before
+ * the brace) does not participate in named cascade order and is not matched.
+ */
+const layerDeclarationPattern = /@layer\s+([^;{}]+)\s*[;{]/gu;
+
+/**
+ * Returns the cumulative order in which distinct layer names are first established across the
+ * whole stylesheet - every `@layer` statement and block, not just the first one.
+ *
+ * A single "first `@layer ...;` statement" reading is not reliable: Tailwind emits a leading,
+ * single-name `@layer properties;` forward declaration (for its `@property` custom-property
+ * fallback) ahead of the statement that actually binds Cratis's own precedence, so the first
+ * statement in the file legitimately has only one name. Cascade order is decided by first
+ * appearance of each layer name anywhere in the file
+ * (https://www.w3.org/TR/css-cascade-5/#layer-ordering), so that is what this walks.
+ */
+export function cascadeLayerEstablishmentOrder(styles) {
+    const order = [];
+    const seen = new Set();
+    for (const match of styles.matchAll(layerDeclarationPattern)) {
+        for (const rawName of match[1].split(',')) {
+            const name = rawName.trim();
+            if (!name || seen.has(name)) continue;
+            seen.add(name);
+            order.push(name);
+        }
+    }
+    return order;
 }
 
-/** Requires the package's first layer-order statement to bind the reviewed public order exactly. */
+/**
+ * Requires the package's cascade layers to be established in exactly the reviewed cumulative
+ * order - no missing layer, no reordering, and no other layer's first appearance sneaking in
+ * ahead of one of ours (whether by an out-of-order block or a duplicate/reordered statement).
+ */
 export function assertExpectedCascadeLayerOrder(styles, source) {
-    const actual = firstBindingCascadeLayerOrder(styles);
-    if (
-        !actual ||
-        actual.length !== EXPECTED_CASCADE_LAYER_ORDER.length ||
-        actual.some((layer, index) => layer !== EXPECTED_CASCADE_LAYER_ORDER[index])
-    ) {
+    const actual = cascadeLayerEstablishmentOrder(styles);
+    const matches =
+        actual.length === EXPECTED_CASCADE_LAYER_ORDER.length &&
+        actual.every((layer, index) => layer === EXPECTED_CASCADE_LAYER_ORDER[index]);
+    if (!matches) {
         throw new Error(
-            `${source}'s first binding cascade-layer order must be exactly ` +
+            `${source}'s cumulative cascade-layer establishment order must be exactly ` +
                 `'${EXPECTED_CASCADE_LAYER_ORDER.join(', ')}'; found ` +
-                `'${actual?.join(', ') ?? '(none)'}`,
+                `'${actual.join(', ') || '(none)'}'.`,
         );
     }
 }
diff --git a/Source/scripts/verify-packed-production.mjs b/Source/scripts/verify-packed-production.mjs
index ca35dd99..6c49833f 100644
--- a/Source/scripts/verify-packed-production.mjs
+++ b/Source/scripts/verify-packed-production.mjs
@@ -26,9 +26,9 @@ import { buildScratchNodeModules, packArtifact } from './lib/packed-artifact.mjs
 import {
     assertExpectedCascadeLayerOrder,
     assertNoPrimeFamilyReferences,
+    cascadeLayerEstablishmentOrder,
     EXPECTED_CASCADE_LAYER_ORDER,
     findPrimeFamilyReferences,
-    firstBindingCascadeLayerOrder,
 } from './lib/release-package-guards.mjs';
 
 const packageDir = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
@@ -36,15 +36,50 @@ const monorepoRoot = path.resolve(packageDir, '..');
 const keepFixture = process.argv.includes('--keep-fixture');
 
 function runGuardSelfTests() {
+    // Regression fixture for the actual packed shape: Tailwind's leading, single-name
+    // `@layer properties;` forward declaration ahead of the statement that binds Cratis's own
+    // precedence must NOT be rejected as an incomplete/incorrect order-binding statement.
     const correctlyOrderedStyles =
-        '/* comment */\n@layer cratis-theme, cratis-components, cratis-utilities;\n@layer cratis-components {}';
+        '/* comment */\n@layer properties;\n' +
+        '@layer cratis-theme, cratis-components, cratis-utilities;\n' +
+        '@layer cratis-theme {}\n@layer cratis-utilities {}\n@layer properties { @supports (color: red) { * { color: red; } } }\n' +
+        '@layer cratis-components {}';
     assert.deepEqual(
-        firstBindingCascadeLayerOrder(correctlyOrderedStyles),
+        cascadeLayerEstablishmentOrder(correctlyOrderedStyles),
         EXPECTED_CASCADE_LAYER_ORDER,
     );
+    assert.doesNotThrow(() =>
+        assertExpectedCascadeLayerOrder(correctlyOrderedStyles, 'synthetic.css'),
+    );
+
+    // Missing the leading `properties` forward declaration entirely must still fail.
+    assert.throws(() =>
+        assertExpectedCascadeLayerOrder(
+            '@layer cratis-theme, cratis-components, cratis-utilities;',
+            'synthetic.css',
+        ),
+    );
+    // Reordered relative to the reviewed sequence must fail.
+    assert.throws(() =>
+        assertExpectedCascadeLayerOrder(
+            '@layer properties;\n@layer cratis-components, cratis-theme, cratis-utilities;',
+            'synthetic.css',
+        ),
+    );
+    // A layer established out of order by its opening block - not just by the order-binding
+    // statement's own listed sequence - must fail: cratis-utilities is first established before
+    // cratis-components here even though the statement below lists them correctly.
+    assert.throws(() =>
+        assertExpectedCascadeLayerOrder(
+            '@layer properties;\n@layer cratis-theme {}\n@layer cratis-utilities {}\n' +
+                '@layer cratis-theme, cratis-components, cratis-utilities;\n@layer cratis-components {}',
+            'synthetic.css',
+        ),
+    );
+    // A missing layer must fail, even with the rest correctly ordered.
     assert.throws(() =>
         assertExpectedCascadeLayerOrder(
-            '@layer cratis-components, cratis-theme, cratis-utilities;',
+            '@layer properties;\n@layer cratis-theme, cratis-components;',
             'synthetic.css',
         ),
     );

From 2bbda31f665803cca3cde6b89995e31fe943b403 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Wed, 26 Aug 2026 22:07:56 +0200
Subject: [PATCH 091/267] Give CommandForm field extractValue an (event:
 unknown) contract

Under strict TypeScript, CommandFormFieldConfig.extractValue's
(event: unknown) => TValue contract makes a field-specific
React.ChangeEvent<...> parameter type fail contravariant function
assignability. Add fieldValueFromEvent(event, property), a small
overloaded, runtime-checked narrowing helper internal to the
command-field implementation, and switch every built-in field's
extractValue to declare (event: unknown) and narrow through it.
---
 Source/CommandForm/fields/CheckboxField.tsx   |  4 +-
 .../CommandForm/fields/ColorPickerField.tsx   |  5 ++-
 Source/CommandForm/fields/InputTextField.tsx  |  3 +-
 Source/CommandForm/fields/NumberField.tsx     |  7 ++-
 Source/CommandForm/fields/PasswordField.tsx   |  3 +-
 Source/CommandForm/fields/SliderField.tsx     |  4 +-
 Source/CommandForm/fields/TextAreaField.tsx   |  4 +-
 .../CommandForm/fields/ToggleSwitchField.tsx  |  4 +-
 .../CommandForm/fields/fieldValueFromEvent.ts | 43 +++++++++++++++++++
 .../when_extracting_supported_values.ts       | 23 ++++++++++
 .../when_receiving_an_invalid_event.ts        | 21 +++++++++
 11 files changed, 107 insertions(+), 14 deletions(-)
 create mode 100644 Source/CommandForm/fields/fieldValueFromEvent.ts
 create mode 100644 Source/CommandForm/for_fieldValueFromEvent/when_extracting_supported_values.ts
 create mode 100644 Source/CommandForm/for_fieldValueFromEvent/when_receiving_an_invalid_event.ts

diff --git a/Source/CommandForm/fields/CheckboxField.tsx b/Source/CommandForm/fields/CheckboxField.tsx
index 479b3867..81cab6a0 100644
--- a/Source/CommandForm/fields/CheckboxField.tsx
+++ b/Source/CommandForm/fields/CheckboxField.tsx
@@ -7,6 +7,7 @@ import {
     useFieldAccessibility,
     type FieldAccessibilityProps,
 } from './fieldAccessibility';
+import { fieldValueFromEvent } from './fieldValueFromEvent';
 
 /** Stable part attributes for {@link CheckboxField}. */
 export interface CheckboxParts {
@@ -94,7 +95,6 @@ export const CheckboxField = asCommandFormField<CheckboxFieldComponentProps>(
     },
     {
         defaultValue: false,
-        extractValue: (event: React.ChangeEvent<HTMLInputElement>) =>
-            event.target.checked,
+        extractValue: (event: unknown) => fieldValueFromEvent(event, 'checked'),
     },
 );
diff --git a/Source/CommandForm/fields/ColorPickerField.tsx b/Source/CommandForm/fields/ColorPickerField.tsx
index c16d23a1..d3d2a944 100644
--- a/Source/CommandForm/fields/ColorPickerField.tsx
+++ b/Source/CommandForm/fields/ColorPickerField.tsx
@@ -7,6 +7,7 @@ import {
     useFieldAccessibility,
     type FieldAccessibilityProps,
 } from './fieldAccessibility';
+import { fieldValueFromEvent } from './fieldValueFromEvent';
 
 /** Stable part attributes for {@link ColorPickerField}. */
 export interface ColorPickerParts {
@@ -88,7 +89,7 @@ export const ColorPickerField = asCommandFormField<ColorPickerFieldComponentProp
     },
     {
         defaultValue: '',
-        extractValue: (event: React.ChangeEvent<HTMLInputElement>) =>
-            event.target.value.replace('#', ''),
+        extractValue: (event: unknown) =>
+            fieldValueFromEvent(event, 'value').replace('#', ''),
     },
 );
diff --git a/Source/CommandForm/fields/InputTextField.tsx b/Source/CommandForm/fields/InputTextField.tsx
index c923b5f7..957b0e87 100644
--- a/Source/CommandForm/fields/InputTextField.tsx
+++ b/Source/CommandForm/fields/InputTextField.tsx
@@ -7,6 +7,7 @@ import {
     useFieldAccessibility,
     type FieldAccessibilityProps,
 } from './fieldAccessibility';
+import { fieldValueFromEvent } from './fieldValueFromEvent';
 
 /** Stable part attributes for {@link InputTextField}. */
 export interface InputTextParts {
@@ -73,6 +74,6 @@ export const InputTextField = asCommandFormField<InputTextComponentProps>(
     },
     {
         defaultValue: '',
-        extractValue: (event: React.ChangeEvent<HTMLInputElement>) => event.target.value,
+        extractValue: (event: unknown) => fieldValueFromEvent(event, 'value'),
     },
 );
diff --git a/Source/CommandForm/fields/NumberField.tsx b/Source/CommandForm/fields/NumberField.tsx
index 41a07930..7838e8f7 100644
--- a/Source/CommandForm/fields/NumberField.tsx
+++ b/Source/CommandForm/fields/NumberField.tsx
@@ -7,6 +7,7 @@ import {
     useFieldAccessibility,
     type FieldAccessibilityProps,
 } from './fieldAccessibility';
+import { fieldValueFromEvent } from './fieldValueFromEvent';
 
 /** Stable part attributes for {@link NumberField}. */
 export interface NumberFieldParts {
@@ -76,7 +77,9 @@ export const NumberField = asCommandFormField<NumberFieldComponentProps>(
     },
     {
         defaultValue: 0,
-        extractValue: (event: React.ChangeEvent<HTMLInputElement>) =>
-            Number.isNaN(event.target.valueAsNumber) ? 0 : event.target.valueAsNumber,
+        extractValue: (event: unknown) => {
+            const value = fieldValueFromEvent(event, 'valueAsNumber');
+            return Number.isNaN(value) ? 0 : value;
+        },
     },
 );
diff --git a/Source/CommandForm/fields/PasswordField.tsx b/Source/CommandForm/fields/PasswordField.tsx
index 11325751..736f7cf2 100644
--- a/Source/CommandForm/fields/PasswordField.tsx
+++ b/Source/CommandForm/fields/PasswordField.tsx
@@ -12,6 +12,7 @@ import {
     useFieldAccessibility,
     type FieldAccessibilityProps,
 } from './fieldAccessibility';
+import { fieldValueFromEvent } from './fieldValueFromEvent';
 
 /** Stable part attributes for {@link PasswordField}. */
 export interface PasswordParts {
@@ -98,6 +99,6 @@ export const PasswordField = asCommandFormField<PasswordFieldComponentProps>(
     PasswordControl,
     {
         defaultValue: '',
-        extractValue: (event: React.ChangeEvent<HTMLInputElement>) => event.target.value,
+        extractValue: (event: unknown) => fieldValueFromEvent(event, 'value'),
     },
 );
diff --git a/Source/CommandForm/fields/SliderField.tsx b/Source/CommandForm/fields/SliderField.tsx
index a520ef85..d49f79c3 100644
--- a/Source/CommandForm/fields/SliderField.tsx
+++ b/Source/CommandForm/fields/SliderField.tsx
@@ -7,6 +7,7 @@ import {
     useFieldAccessibility,
     type FieldAccessibilityProps,
 } from './fieldAccessibility';
+import { fieldValueFromEvent } from './fieldValueFromEvent';
 
 /** Stable part attributes for {@link SliderField}. */
 export interface SliderParts {
@@ -84,7 +85,6 @@ export const SliderField = asCommandFormField<SliderFieldComponentProps>(
     },
     {
         defaultValue: 0,
-        extractValue: (event: React.ChangeEvent<HTMLInputElement>) =>
-            event.target.valueAsNumber,
+        extractValue: (event: unknown) => fieldValueFromEvent(event, 'valueAsNumber'),
     },
 );
diff --git a/Source/CommandForm/fields/TextAreaField.tsx b/Source/CommandForm/fields/TextAreaField.tsx
index 34e344b9..2add6219 100644
--- a/Source/CommandForm/fields/TextAreaField.tsx
+++ b/Source/CommandForm/fields/TextAreaField.tsx
@@ -7,6 +7,7 @@ import {
     useFieldAccessibility,
     type FieldAccessibilityProps,
 } from './fieldAccessibility';
+import { fieldValueFromEvent } from './fieldValueFromEvent';
 
 /** Stable part attributes for {@link TextAreaField}. */
 export interface TextAreaParts {
@@ -66,7 +67,6 @@ export const TextAreaField = asCommandFormField<TextAreaFieldComponentProps>(
     },
     {
         defaultValue: '',
-        extractValue: (event: React.ChangeEvent<HTMLTextAreaElement>) =>
-            event.target.value,
+        extractValue: (event: unknown) => fieldValueFromEvent(event, 'value'),
     },
 );
diff --git a/Source/CommandForm/fields/ToggleSwitchField.tsx b/Source/CommandForm/fields/ToggleSwitchField.tsx
index 16cb057d..9e1d7aa2 100644
--- a/Source/CommandForm/fields/ToggleSwitchField.tsx
+++ b/Source/CommandForm/fields/ToggleSwitchField.tsx
@@ -7,6 +7,7 @@ import {
     useFieldAccessibility,
     type FieldAccessibilityProps,
 } from './fieldAccessibility';
+import { fieldValueFromEvent } from './fieldValueFromEvent';
 
 /** Stable part attributes for {@link ToggleSwitchField}. */
 export interface ToggleSwitchParts {
@@ -90,7 +91,6 @@ export const ToggleSwitchField = asCommandFormField<ToggleSwitchFieldComponentPr
     },
     {
         defaultValue: false,
-        extractValue: (event: React.ChangeEvent<HTMLInputElement>) =>
-            event.target.checked,
+        extractValue: (event: unknown) => fieldValueFromEvent(event, 'checked'),
     },
 );
diff --git a/Source/CommandForm/fields/fieldValueFromEvent.ts b/Source/CommandForm/fields/fieldValueFromEvent.ts
new file mode 100644
index 00000000..addb6aa8
--- /dev/null
+++ b/Source/CommandForm/fields/fieldValueFromEvent.ts
@@ -0,0 +1,43 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+const isRecord = (value: unknown): value is Record<string, unknown> =>
+    value !== null && typeof value === 'object';
+
+const eventTargetOf = (event: unknown): Record<string, unknown> => {
+    if (!isRecord(event) || !isRecord(event.target)) {
+        throw new TypeError('Expected a field event with an object target');
+    }
+
+    return event.target;
+};
+
+/**
+ * Extracts a primitive value from a native form field's change event target.
+ *
+ * `CommandFormFieldConfig.extractValue` is declared `(event: unknown) => TValue` so every
+ * field type shares one contract regardless of its underlying control. Under strict
+ * TypeScript a field can no longer declare its `extractValue` against a concrete
+ * `React.ChangeEvent<...>` — the narrower parameter type fails contravariant function
+ * assignability against `(event: unknown) => TValue`. This helper keeps field components
+ * strictly typed by doing the one runtime-checked narrowing every field needs, with an
+ * overload per property so callers still get a precise return type.
+ * Internal to the command-field implementation.
+ */
+export function fieldValueFromEvent(event: unknown, property: 'checked'): boolean;
+export function fieldValueFromEvent(event: unknown, property: 'value'): string;
+export function fieldValueFromEvent(event: unknown, property: 'valueAsNumber'): number;
+export function fieldValueFromEvent(
+    event: unknown,
+    property: 'checked' | 'value' | 'valueAsNumber',
+): boolean | string | number {
+    const value = eventTargetOf(event)[property];
+
+    if (property === 'checked' && typeof value === 'boolean') return value;
+    if (property === 'value' && typeof value === 'string') return value;
+    if (property === 'valueAsNumber' && typeof value === 'number') return value;
+
+    throw new TypeError(
+        `Expected field event target.${property} to have the matching primitive type`,
+    );
+}
diff --git a/Source/CommandForm/for_fieldValueFromEvent/when_extracting_supported_values.ts b/Source/CommandForm/for_fieldValueFromEvent/when_extracting_supported_values.ts
new file mode 100644
index 00000000..69646070
--- /dev/null
+++ b/Source/CommandForm/for_fieldValueFromEvent/when_extracting_supported_values.ts
@@ -0,0 +1,23 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { fieldValueFromEvent } from '../fields/fieldValueFromEvent';
+
+describe('when extracting supported field values', () => {
+    it('should extract a string value', () => {
+        fieldValueFromEvent({ target: { value: 'Sample value' } }, 'value').should.equal(
+            'Sample value',
+        );
+    });
+
+    it('should extract a checked value', () => {
+        fieldValueFromEvent({ target: { checked: true } }, 'checked').should.equal(true);
+    });
+
+    it('should extract a numeric value', () => {
+        fieldValueFromEvent(
+            { target: { valueAsNumber: 42 } },
+            'valueAsNumber',
+        ).should.equal(42);
+    });
+});
diff --git a/Source/CommandForm/for_fieldValueFromEvent/when_receiving_an_invalid_event.ts b/Source/CommandForm/for_fieldValueFromEvent/when_receiving_an_invalid_event.ts
new file mode 100644
index 00000000..9f0bdb33
--- /dev/null
+++ b/Source/CommandForm/for_fieldValueFromEvent/when_receiving_an_invalid_event.ts
@@ -0,0 +1,21 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { fieldValueFromEvent } from '../fields/fieldValueFromEvent';
+
+describe('when receiving an invalid field event', () => {
+    it('should reject an event without an object target', () => {
+        (() => fieldValueFromEvent({}, 'value')).should.throw(
+            TypeError,
+            'Expected a field event with an object target',
+        );
+    });
+
+    it('should reject a field value with the wrong type', () => {
+        (() =>
+            fieldValueFromEvent({ target: { checked: 'true' } }, 'checked')).should.throw(
+            TypeError,
+            'Expected field event target.checked to have the matching primitive type',
+        );
+    });
+});

From 2c7ecd11b0bb54daaf326e9a8187849e56a06fa6 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Wed, 26 Aug 2026 22:08:07 +0200
Subject: [PATCH 092/267] Convert Cratis pt attributes at the React Aria
 component boundary

React Aria redeclares native DOM event callbacks (onBlur, onClick, ...)
against wider element types than the concrete element each component
renders, so a Cratis-owned pt part typed against the real HTML element
fails strict function-parameter variance when spread onto a React Aria
primitive. Add asReactAriaButtonProps/asReactAriaListBoxProps/
asReactAriaListBoxItemProps in Common/reactAriaProps.ts - internal,
unexported conversions, each spread only onto the React Aria component
that renders the same native element - and use them at every such spread
in DatePickerInput, ColumnFilterMenu, and Dropdown. Public pt part types
stay Cratis-owned; no React Aria type surfaces on the public API.
---
 Source/Common/DatePickerInput.tsx      |  7 ++---
 Source/Common/reactAriaProps.ts        | 36 ++++++++++++++++++++++++++
 Source/DataTables/ColumnFilterMenu.tsx |  3 ++-
 Source/Dropdown/Dropdown.tsx           | 29 ++++++++++++++-------
 4 files changed, 62 insertions(+), 13 deletions(-)
 create mode 100644 Source/Common/reactAriaProps.ts

diff --git a/Source/Common/DatePickerInput.tsx b/Source/Common/DatePickerInput.tsx
index e48a74f6..ddd19ff4 100644
--- a/Source/Common/DatePickerInput.tsx
+++ b/Source/Common/DatePickerInput.tsx
@@ -25,6 +25,7 @@ import {
 import { Dialog } from 'react-aria-components/Dialog';
 import { Heading } from 'react-aria-components/Heading';
 import { useCratisComponentsConfig } from './CratisComponentsProvider';
+import { asReactAriaButtonProps } from './reactAriaProps';
 import {
     fromDate,
     getLocalTimeZone,
@@ -307,7 +308,7 @@ export const DatePickerInput = ({
                     )}
                     {showIcon && (
                         <Button
-                            {...pt?.trigger}
+                            {...asReactAriaButtonProps(pt?.trigger)}
                             isDisabled={effectiveDisabled || effectiveReadOnly}
                             className={classNames(
                                 'cratis-date-picker__trigger',
@@ -358,7 +359,7 @@ export const DatePickerInput = ({
                                 data-cratis-part='header'
                             >
                                 <Button
-                                    {...pt?.previous}
+                                    {...asReactAriaButtonProps(pt?.previous)}
                                     slot='previous'
                                     className={classNames(
                                         'cratis-date-picker__nav',
@@ -382,7 +383,7 @@ export const DatePickerInput = ({
                                     data-cratis-part='heading'
                                 />
                                 <Button
-                                    {...pt?.next}
+                                    {...asReactAriaButtonProps(pt?.next)}
                                     slot='next'
                                     className={classNames(
                                         'cratis-date-picker__nav',
diff --git a/Source/Common/reactAriaProps.ts b/Source/Common/reactAriaProps.ts
new file mode 100644
index 00000000..c1902a6e
--- /dev/null
+++ b/Source/Common/reactAriaProps.ts
@@ -0,0 +1,36 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { ButtonHTMLAttributes, HTMLAttributes } from 'react';
+import type { ButtonProps } from 'react-aria-components/Button';
+import type { ListBoxItemProps, ListBoxProps } from 'react-aria-components/Select';
+
+// React Aria redeclares native DOM event callbacks (onBlur, onClick, ...) against wider
+// element types than the concrete HTML element they end up rendering, so under strict
+// function-parameter variance a Cratis-owned `pt` part typed against the real element
+// (e.g. `ButtonHTMLAttributes<HTMLButtonElement>`) is not directly assignable to the
+// matching React Aria props. The runtime event target is unchanged; only the declared
+// callback parameter type is wider. These conversions exist to keep that mismatch behind
+// one internal boundary per React Aria primitive, spread only onto the React Aria
+// component that renders that same native element, so the Components-owned public part
+// types never surface React Aria's own types.
+export const asReactAriaButtonProps = (
+    attributes: ButtonHTMLAttributes<HTMLButtonElement> | undefined,
+): ButtonProps | undefined =>
+    // SAFETY: spread only onto a React Aria Button, which renders an HTMLButtonElement —
+    // the same element `attributes` is already typed against.
+    attributes as unknown as ButtonProps | undefined;
+
+export const asReactAriaListBoxProps = <T>(
+    attributes: HTMLAttributes<HTMLDivElement> | undefined,
+): ListBoxProps<T> | undefined =>
+    // SAFETY: spread only onto a React Aria ListBox, which renders an HTMLDivElement —
+    // the same element `attributes` is already typed against.
+    attributes as unknown as ListBoxProps<T> | undefined;
+
+export const asReactAriaListBoxItemProps = <T>(
+    attributes: HTMLAttributes<HTMLDivElement> | undefined,
+): ListBoxItemProps<T> | undefined =>
+    // SAFETY: spread only onto a React Aria ListBoxItem, which renders an HTMLDivElement —
+    // the same element `attributes` is already typed against.
+    attributes as unknown as ListBoxItemProps<T> | undefined;
diff --git a/Source/DataTables/ColumnFilterMenu.tsx b/Source/DataTables/ColumnFilterMenu.tsx
index 4711205c..484244a9 100644
--- a/Source/DataTables/ColumnFilterMenu.tsx
+++ b/Source/DataTables/ColumnFilterMenu.tsx
@@ -17,6 +17,7 @@ import { Popover } from 'react-aria-components/Popover';
 import { Button, type ButtonParts } from '../Common/Button';
 import { DatePickerInput } from '../Common/DatePickerInput';
 import { useCratisComponentsConfig } from '../Common/CratisComponentsProvider';
+import { asReactAriaButtonProps } from '../Common/reactAriaProps';
 import { Dropdown, type DropdownParts } from '../Dropdown/Dropdown';
 import {
     DataTableFilterMatchMode,
@@ -328,7 +329,7 @@ export const ColumnFilterMenu = ({
     return (
         <DialogTrigger>
             <AriaButton
-                {...pt?.trigger}
+                {...asReactAriaButtonProps(pt?.trigger)}
                 aria-label={resolvedLabels.filterTriggerAriaLabel(field)}
                 className={classNames(
                     'cratis-filter-trigger',
diff --git a/Source/Dropdown/Dropdown.tsx b/Source/Dropdown/Dropdown.tsx
index 6e52db98..9f9b55b6 100644
--- a/Source/Dropdown/Dropdown.tsx
+++ b/Source/Dropdown/Dropdown.tsx
@@ -29,6 +29,11 @@ import {
     Popover as ComboBoxPopover,
 } from 'react-aria-components/ComboBox';
 import { useCratisComponentsConfig } from '../Common/CratisComponentsProvider';
+import {
+    asReactAriaButtonProps,
+    asReactAriaListBoxItemProps,
+    asReactAriaListBoxProps,
+} from '../Common/reactAriaProps';
 
 /** Change event emitted by {@link Dropdown}. */
 export interface DropdownChangeEvent<T = unknown> {
@@ -362,7 +367,7 @@ export const Dropdown = <T = unknown,>({
                             data-cratis-part='filter'
                         />
                         <ComboBoxButton
-                            {...pt?.trigger}
+                            {...asReactAriaButtonProps(pt?.trigger)}
                             className={classNames(
                                 'cratis-dropdown__indicator',
                                 pt?.trigger?.className,
@@ -402,7 +407,7 @@ export const Dropdown = <T = unknown,>({
                             data-cratis-part='popover'
                         >
                             <ComboBoxListBox
-                                {...pt?.listbox}
+                                {...asReactAriaListBoxProps<ResolvedOption>(pt?.listbox)}
                                 items={resolvedOptions}
                                 className={classNames(
                                     'cratis-dropdown__listbox',
@@ -412,7 +417,9 @@ export const Dropdown = <T = unknown,>({
                             >
                                 {(option) => (
                                     <ComboBoxListBoxItem
-                                        {...pt?.option}
+                                        {...asReactAriaListBoxItemProps<ResolvedOption>(
+                                            pt?.option,
+                                        )}
                                         id={option.key}
                                         textValue={option.label}
                                         isDisabled={option.disabled}
@@ -539,7 +546,7 @@ export const Dropdown = <T = unknown,>({
                         data-cratis-part='filter'
                     />
                     <ComboBoxButton
-                        {...pt?.trigger}
+                        {...asReactAriaButtonProps(pt?.trigger)}
                         className={classNames(
                             'cratis-dropdown__indicator',
                             pt?.trigger?.className,
@@ -579,7 +586,7 @@ export const Dropdown = <T = unknown,>({
                         data-cratis-part='popover'
                     >
                         <ComboBoxListBox
-                            {...pt?.listbox}
+                            {...asReactAriaListBoxProps<ResolvedOption>(pt?.listbox)}
                             items={resolvedOptions}
                             className={classNames(
                                 'cratis-dropdown__listbox',
@@ -589,7 +596,9 @@ export const Dropdown = <T = unknown,>({
                         >
                             {(option) => (
                                 <ComboBoxListBoxItem
-                                    {...pt?.option}
+                                    {...asReactAriaListBoxItemProps<ResolvedOption>(
+                                        pt?.option,
+                                    )}
                                     id={option.key}
                                     textValue={option.label}
                                     isDisabled={option.disabled}
@@ -631,7 +640,7 @@ export const Dropdown = <T = unknown,>({
                 className='cratis-dropdown__select'
             >
                 <AriaButton
-                    {...pt?.trigger}
+                    {...asReactAriaButtonProps(pt?.trigger)}
                     ref={applyTriggerState}
                     id={triggerId}
                     excludeFromTabOrder={tabIndex === -1}
@@ -696,7 +705,7 @@ export const Dropdown = <T = unknown,>({
                     data-cratis-part='popover'
                 >
                     <ListBox
-                        {...pt?.listbox}
+                        {...asReactAriaListBoxProps<ResolvedOption>(pt?.listbox)}
                         items={resolvedOptions}
                         className={classNames(
                             'cratis-dropdown__listbox',
@@ -706,7 +715,9 @@ export const Dropdown = <T = unknown,>({
                     >
                         {(option) => (
                             <ListBoxItem
-                                {...pt?.option}
+                                {...asReactAriaListBoxItemProps<ResolvedOption>(
+                                    pt?.option,
+                                )}
                                 id={option.key}
                                 textValue={option.label}
                                 isDisabled={option.disabled}

From 007cf9594e3f23800b2f32adc8182fba562255aa Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Wed, 26 Aug 2026 22:08:18 +0200
Subject: [PATCH 093/267] Fix Storybook story types surfaced by strict
 TypeScript

Three stories type-checked only because parameter bivariance was off:

- CommandDialog.stories.tsx / NewFields.stories.tsx: the local
  CommandValidator subclasses omitted their command type argument
  (CommandValidator<T> defaults to object), so each ruleFor((c: TCommand)
  => ...) lambda's narrower parameter failed contravariant assignability.
  Supply the command type argument, matching the pattern already used in
  CommandStepper.stories.tsx, StepperCommandDialog.stories.tsx, and
  Fields.stories.tsx.
- ConfirmationDialog.stories.tsx: ConfirmationDialog takes no props (it
  reads its request from dialog context), so Meta<typeof
  ConfirmationDialog> resolved TArgs from an empty component-props
  shape while the story's own render/args used a custom {title,
  message} shape passed through to a local wrapper. Type Meta/StoryObj
  against that {title, message} args shape directly, per Storybook's
  supported args-only Meta form.
---
 Source/CommandDialog/CommandDialog.stories.tsx  | 4 ++--
 Source/CommandForm/fields/NewFields.stories.tsx | 2 +-
 Source/Dialogs/ConfirmationDialog.stories.tsx   | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/Source/CommandDialog/CommandDialog.stories.tsx b/Source/CommandDialog/CommandDialog.stories.tsx
index 4effc9fa..5e31d483 100644
--- a/Source/CommandDialog/CommandDialog.stories.tsx
+++ b/Source/CommandDialog/CommandDialog.stories.tsx
@@ -29,7 +29,7 @@ const openCommandDialog = async ({ canvasElement }: { canvasElement: HTMLElement
     await expect(await within(document.body).findByRole('dialog')).toBeTruthy();
 };
 
-class UpdateUserCommandValidator extends CommandValidator {
+class UpdateUserCommandValidator extends CommandValidator<UpdateUserCommand> {
     constructor() {
         super();
         this.ruleFor((c: UpdateUserCommand) => c.name).notEmpty().minLength(2).maxLength(50);
@@ -584,7 +584,7 @@ export const WithIcons: Story = {
     },
 };
 
-class UpdateProfileCommandValidator extends CommandValidator {
+class UpdateProfileCommandValidator extends CommandValidator<UpdateProfileCommand> {
     constructor() {
         super();
         this.ruleFor((c: UpdateProfileCommand) => c.firstName).notEmpty().minLength(2);
diff --git a/Source/CommandForm/fields/NewFields.stories.tsx b/Source/CommandForm/fields/NewFields.stories.tsx
index 5e3db828..e5966df7 100644
--- a/Source/CommandForm/fields/NewFields.stories.tsx
+++ b/Source/CommandForm/fields/NewFields.stories.tsx
@@ -17,7 +17,7 @@ const meta: Meta = {
 export default meta;
 type Story = StoryObj;
 
-class ProfileValidator extends CommandValidator {
+class ProfileValidator extends CommandValidator<ProfileCommand> {
     constructor() {
         super();
         this.ruleFor((c: ProfileCommand) => c.password).notEmpty().minLength(6);
diff --git a/Source/Dialogs/ConfirmationDialog.stories.tsx b/Source/Dialogs/ConfirmationDialog.stories.tsx
index e749d0c9..359a1e33 100644
--- a/Source/Dialogs/ConfirmationDialog.stories.tsx
+++ b/Source/Dialogs/ConfirmationDialog.stories.tsx
@@ -11,13 +11,13 @@ import {
 } from '@cratis/arc.react/dialogs';
 import { expect, userEvent, within } from 'storybook/test';
 
-const meta: Meta<typeof ConfirmationDialog> = {
+const meta: Meta<{ title: string; message: string }> = {
     title: 'Dialogs/ConfirmationDialog',
     component: ConfirmationDialog,
 };
 
 export default meta;
-type Story = StoryObj<typeof ConfirmationDialog>;
+type Story = StoryObj<{ title: string; message: string }>;
 
 const DialogWrapper = ({ title, message }: { title: string; message: string }) => {
     const [showDialog] = useConfirmationDialog(title, message, DialogButtons.YesNoCancel);

From 7a7cf86c1067462cc1f3a27ed9f805d9f89f3bfa Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Wed, 26 Aug 2026 22:08:31 +0200
Subject: [PATCH 094/267] Enable strict TypeScript and noImplicitAny for
 production compile

Every place strict mode and noImplicitAny newly reject in the
production and Storybook-story TypeScript projects was already fixed
in the preceding commits (CommandForm extractValue variance, the
React Aria pt-attribute boundary, and three story files). Both
tsc -p Source/tsconfig.json and tsc -p Source/tsconfig.stories.json
now compile clean under strict: true, noImplicitAny: true.
---
 tsconfig.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/tsconfig.json b/tsconfig.json
index cec58f43..e06fa007 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -9,7 +9,7 @@
         "importHelpers": true,
         "composite": true,
         "removeComments": true,
-        "strict": false,
+        "strict": true,
         "allowJs": false,
         "checkJs": false,
         "module": "ES2022",
@@ -17,7 +17,7 @@
         "target": "ES2022",
         "noEmit": false,
         "pretty": true,
-        "noImplicitAny": false,
+        "noImplicitAny": true,
         "skipLibCheck": true,
         "lib": [
             "ESNext",

From 204373d0ba8ba34d225bcb66081f29ed1462eb36 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Wed, 26 Aug 2026 22:01:14 +0200
Subject: [PATCH 095/267] Harden SchemaEditor against malformed schema objects
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

SchemaEditor cloned the schema prop via JSON.parse(JSON.stringify(...))
at five call sites (initial state, prop-change sync, updateSchemaAtPath,
handleCancel, handleEdit) with no error handling. A schema object that
cannot round-trip through JSON — most notably a circular reference, but
also values like BigInt — threw synchronously and crashed the component
with no recovery path.

Introduce cloneSchema(), a single try/catch wrapper around the
stringify/parse round-trip that also rejects non-object and array
results, and route every clone site through it. When cloning fails,
schemaJsonIsInvalid flips on: Edit, Save, and Add Property become
disabled (matching the existing hasValidationErrors gating), and an
accessible role=alert Message renders the new invalidJson label.
Editing back to valid JSON — a fresh schema prop that clones
successfully — clears the flag and resyncs currentSchema/initialSchema
from the incoming prop, so recovery does not depend on any state that
was in flight when the schema went bad.

cloneSchema returns JsonSchema | undefined instead of the previous
JSON.parse's implicit any, so two narrow, commented type-assertion
helpers (asJsonSchema / asJsonSchemaProperty) were added where the
nested-navigation code walks between the JsonSchema and
JsonSchemaProperty shapes that were always structurally interchangeable
here but are only now statically checked.

Add SchemaEditor/for_SchemaEditor/when_schema_json_is_invalid.tsx
covering the alert, the disabled Save action, and recovery once a
valid schema replaces the malformed one.

SchemaEditorLabels gains an additional required invalidJson field,
following the existing convention where all labels are required on
the interface and consumers configure them through the optional
Partial<SchemaEditorLabels> labels prop, so no existing caller breaks.
---
 Source/SchemaEditor/SchemaEditor.tsx          | 117 +++++++++++++++---
 .../when_schema_json_is_invalid.tsx           |  94 ++++++++++++++
 2 files changed, 195 insertions(+), 16 deletions(-)
 create mode 100644 Source/SchemaEditor/for_SchemaEditor/when_schema_json_is_invalid.tsx

diff --git a/Source/SchemaEditor/SchemaEditor.tsx b/Source/SchemaEditor/SchemaEditor.tsx
index baa0174f..608287e0 100644
--- a/Source/SchemaEditor/SchemaEditor.tsx
+++ b/Source/SchemaEditor/SchemaEditor.tsx
@@ -7,6 +7,7 @@ import { DataTableCore } from '../DataTables/DataTableCore';
 import { Column } from '../DataTables/Column';
 import { ActionMenubar, type ActionMenuItem } from '../Common/ActionMenubar';
 import { Tooltip } from '../Common/Tooltip';
+import { Message } from '../Display/Message';
 import * as faIcons from 'react-icons/fa6';
 import { NameCell } from './NameCell';
 import { TypeCell } from './TypeCell';
@@ -46,6 +47,8 @@ export interface SchemaEditorLabels {
     arrayItemType: string;
     /** Accessible name for the "remove property" button. */
     deleteProperty: string;
+    /** Validation message shown when the schema cannot be represented as valid JSON. */
+    invalidJson: string;
 }
 
 /** English defaults for {@link SchemaEditorLabels}. */
@@ -63,6 +66,37 @@ export const defaultSchemaEditorLabels: SchemaEditorLabels = {
     propertyType: 'Property type',
     arrayItemType: 'Array item type',
     deleteProperty: 'Delete property',
+    invalidJson: 'The schema must contain valid JSON before it can be edited.',
+};
+
+const cloneSchema = (schema: JsonSchema): JsonSchema | undefined => {
+    try {
+        const serializedSchema = JSON.stringify(schema);
+        if (serializedSchema === undefined) return undefined;
+
+        const parsedSchema: unknown = JSON.parse(serializedSchema);
+        if (
+            typeof parsedSchema !== 'object' ||
+            parsedSchema === null ||
+            Array.isArray(parsedSchema)
+        ) {
+            return undefined;
+        }
+
+        return parsedSchema as JsonSchema;
+    } catch {
+        return undefined;
+    }
+};
+
+const asJsonSchema = (property: JsonSchemaProperty): JsonSchema => {
+    // SAFETY: A nested schema property has the same editable shape; its row-only required flag is not read here.
+    return property as unknown as JsonSchema;
+};
+
+const asJsonSchemaProperty = (schema: JsonSchema): JsonSchemaProperty => {
+    // SAFETY: A nested schema is stored in the property's schema-shaped fields; required is not changed here.
+    return schema as unknown as JsonSchemaProperty;
 };
 
 /**
@@ -150,9 +184,19 @@ export const SchemaEditor = ({
     const l = useMemo(() => ({ ...defaultSchemaEditorLabels, ...labels }), [labels]);
     const [currentPath, setCurrentPath] = useState<string[]>([]);
     const [properties, setProperties] = useState<JsonSchemaProperty[]>([]);
-    const [currentSchema, setCurrentSchema] = useState<JsonSchema>(schema);
+    const [initialParsedSchema] = useState<JsonSchema | undefined>(() =>
+        cloneSchema(schema),
+    );
+    const [currentSchema, setCurrentSchema] = useState<JsonSchema>(
+        initialParsedSchema ?? {},
+    );
     const [isEditMode, setIsEditMode] = useState(editMode ?? false);
-    const [initialSchema, setInitialSchema] = useState<JsonSchema>(schema);
+    const [initialSchema, setInitialSchema] = useState<JsonSchema>(
+        initialParsedSchema ?? {},
+    );
+    const [schemaJsonIsInvalid, setSchemaJsonIsInvalid] = useState(
+        initialParsedSchema === undefined,
+    );
     const [validationErrors, setValidationErrors] = useState<Record<string, string>>({});
 
     useEffect(() => {
@@ -180,8 +224,15 @@ export const SchemaEditor = ({
     );
 
     useEffect(() => {
-        setCurrentSchema(schema);
-        setInitialSchema(JSON.parse(JSON.stringify(schema)));
+        const parsedSchema = cloneSchema(schema);
+        if (!parsedSchema) {
+            setSchemaJsonIsInvalid(true);
+            return;
+        }
+
+        setSchemaJsonIsInvalid(false);
+        setCurrentSchema(parsedSchema);
+        setInitialSchema(parsedSchema);
     }, [schema]);
 
     useEffect(() => {
@@ -230,7 +281,11 @@ export const SchemaEditor = ({
 
     const updateSchemaAtPath = useCallback(
         (path: string[], updater: (schema: JsonSchema) => JsonSchema) => {
-            const newSchema = JSON.parse(JSON.stringify(currentSchema));
+            const newSchema = cloneSchema(currentSchema);
+            if (!newSchema) {
+                setSchemaJsonIsInvalid(true);
+                return;
+            }
 
             if (path.length === 0) {
                 const updated = updater(newSchema);
@@ -248,7 +303,7 @@ export const SchemaEditor = ({
                     }
                     targetSchema = targetSchema.items;
                 } else if (targetSchema.properties && targetSchema.properties[segment]) {
-                    targetSchema = targetSchema.properties[segment];
+                    targetSchema = asJsonSchema(targetSchema.properties[segment]);
                 }
             }
 
@@ -259,8 +314,9 @@ export const SchemaEditor = ({
                 if (!targetSchema.properties) {
                     targetSchema.properties = {};
                 }
-                targetSchema.properties[lastSegment] = updater(
-                    targetSchema.properties[lastSegment] || {},
+                const propertySchema = targetSchema.properties[lastSegment];
+                targetSchema.properties[lastSegment] = asJsonSchemaProperty(
+                    updater(propertySchema ? asJsonSchema(propertySchema) : {}),
                 );
             }
 
@@ -400,21 +456,38 @@ export const SchemaEditor = ({
     );
 
     const handleSave = useCallback(() => {
+        if (schemaJsonIsInvalid) return;
+
         onSave?.();
         setIsEditMode(false);
-    }, [onSave]);
+    }, [onSave, schemaJsonIsInvalid]);
 
     const handleCancel = useCallback(() => {
-        setCurrentSchema(JSON.parse(JSON.stringify(initialSchema)));
-        onChange?.(JSON.parse(JSON.stringify(initialSchema)));
+        const restoredSchema = cloneSchema(initialSchema);
+        const changedSchema = cloneSchema(initialSchema);
+        if (!restoredSchema || !changedSchema) {
+            setSchemaJsonIsInvalid(true);
+            return;
+        }
+
+        setCurrentSchema(restoredSchema);
+        onChange?.(changedSchema);
         setIsEditMode(false);
         onCancel?.();
     }, [initialSchema, onChange, onCancel]);
 
     const handleEdit = useCallback(() => {
-        setInitialSchema(JSON.parse(JSON.stringify(currentSchema)));
+        if (schemaJsonIsInvalid) return;
+
+        const parsedSchema = cloneSchema(currentSchema);
+        if (!parsedSchema) {
+            setSchemaJsonIsInvalid(true);
+            return;
+        }
+
+        setInitialSchema(parsedSchema);
         setIsEditMode(true);
-    }, [currentSchema]);
+    }, [currentSchema, schemaJsonIsInvalid]);
 
     const getBreadcrumbItems = () => buildBreadcrumbItems(eventTypeName, currentPath);
 
@@ -435,7 +508,8 @@ export const SchemaEditor = ({
         return targetSchema.description;
     }, [currentSchema, currentPath]);
 
-    const hasValidationErrors = Object.keys(validationErrors).length > 0;
+    const hasValidationErrors =
+        schemaJsonIsInvalid || Object.keys(validationErrors).length > 0;
 
     const menuItems = useMemo<ActionMenuItem[]>(
         () => [
@@ -445,7 +519,9 @@ export const SchemaEditor = ({
                       {
                           label: l.edit,
                           icon: <faIcons.FaPencil className='cratis:mr-2' />,
-                          command: canEdit ? handleEdit : undefined,
+                          command:
+                              canEdit && !schemaJsonIsInvalid ? handleEdit : undefined,
+                          disabled: schemaJsonIsInvalid,
                           className: canEdit ? undefined : 'edit-disabled-with-reason',
                           template:
                               !canEdit && canNotEditReason
@@ -500,7 +576,8 @@ export const SchemaEditor = ({
                       {
                           label: l.addProperty,
                           icon: <faIcons.FaPlus className='cratis:mr-2' />,
-                          command: addProperty,
+                          command: schemaJsonIsInvalid ? undefined : addProperty,
+                          disabled: schemaJsonIsInvalid,
                       },
                   ]
                 : []),
@@ -514,6 +591,7 @@ export const SchemaEditor = ({
             canEdit,
             canNotEditReason,
             hasValidationErrors,
+            schemaJsonIsInvalid,
             saveDisabled,
             cancelDisabled,
             l,
@@ -533,6 +611,13 @@ export const SchemaEditor = ({
                 <div className='schema-editor-menubar'>
                     <ActionMenubar aria-label={l.actions} model={menuItems} />
                 </div>
+                {schemaJsonIsInvalid && (
+                    <Message
+                        severity='error'
+                        text={l.invalidJson}
+                        className='cratis:mt-3'
+                    />
+                )}
             </div>
 
             <div className='cratis:px-4 cratis:py-2 cratis-schema-editor-bottom-border'>
diff --git a/Source/SchemaEditor/for_SchemaEditor/when_schema_json_is_invalid.tsx b/Source/SchemaEditor/for_SchemaEditor/when_schema_json_is_invalid.tsx
new file mode 100644
index 00000000..7d45a0e0
--- /dev/null
+++ b/Source/SchemaEditor/for_SchemaEditor/when_schema_json_is_invalid.tsx
@@ -0,0 +1,94 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { expect } from 'chai';
+import { afterEach, beforeEach, describe, it } from 'vitest';
+import { SchemaEditor } from '../SchemaEditor';
+import type { JsonSchema } from '../../types/JsonSchema';
+
+describe('when schema JSON is invalid', () => {
+    let container: HTMLDivElement;
+    let root: Root;
+
+    const invalidSchema: JsonSchema = { type: 'object', properties: {} };
+    Reflect.set(invalidSchema, 'self', invalidSchema);
+
+    beforeEach(async () => {
+        // SAFETY: React exposes this test-only flag on globalThis without a declaration.
+        (
+            globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
+        ).IS_REACT_ACT_ENVIRONMENT = true;
+        // SAFETY: jsdom omits ResizeObserver, so the spec supplies the minimal API used here.
+        (globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver ??= class {
+            observe() {
+                return undefined;
+            }
+            unobserve() {
+                return undefined;
+            }
+            disconnect() {
+                return undefined;
+            }
+        };
+
+        container = document.createElement('div');
+        document.body.append(container);
+        root = createRoot(container);
+
+        await act(async () => {
+            root.render(
+                <SchemaEditor
+                    schema={invalidSchema}
+                    editMode
+                    labels={{ invalidJson: 'Schema JSON is invalid' }}
+                />,
+            );
+        });
+    });
+
+    afterEach(async () => {
+        await act(async () => root.unmount());
+        container.remove();
+    });
+
+    it('should expose the localized validation message as an alert', () => {
+        const alert = container.querySelector('[role="alert"]');
+        expect(alert?.querySelector('[data-cratis-part="text"]')?.textContent).to.equal(
+            'Schema JSON is invalid',
+        );
+    });
+
+    it('should disable saving', () => {
+        const saveButton = Array.from(container.querySelectorAll('button')).find(
+            (button) => button.textContent?.includes('Save'),
+        );
+        expect(saveButton?.disabled).to.equal(true);
+    });
+
+    it('should recover when valid JSON is supplied', async () => {
+        const validSchema: JsonSchema = {
+            type: 'object',
+            properties: {
+                title: { type: 'string' },
+            },
+        };
+
+        await act(async () => {
+            root.render(<SchemaEditor schema={validSchema} editMode />);
+        });
+
+        expect(container.querySelector('[role="alert"]')).to.equal(null);
+        const propertyNameInput = container.querySelector<HTMLInputElement>(
+            'input[aria-label="Property name"]',
+        );
+        expect(propertyNameInput?.value).to.equal('title');
+        const saveButton = Array.from(container.querySelectorAll('button')).find(
+            (button) => button.textContent?.includes('Save'),
+        );
+        expect(saveButton?.disabled).to.equal(false);
+    });
+});

From 81a4bb1b94dbe683c3ef1125cc5d721901497223 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Wed, 26 Aug 2026 22:02:32 +0200
Subject: [PATCH 096/267] Restrict reusable workflow secret forwarding

Replace secrets: inherit with the exact PAT_WORKFLOWS secret each
pinned Cratis/Workflows reusable workflow declares as required, in
cleanup-pr-artifacts.yml, propagate-copilot-instructions.yml, and
sync-copilot-instructions.yml. Least-privilege: the caller no longer
forwards its entire secret set to the reusable workflow, only the one
secret it actually consumes.
---
 .github/workflows/cleanup-pr-artifacts.yml           | 3 ++-
 .github/workflows/propagate-copilot-instructions.yml | 3 ++-
 .github/workflows/sync-copilot-instructions.yml      | 3 ++-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/cleanup-pr-artifacts.yml b/.github/workflows/cleanup-pr-artifacts.yml
index 448a2d34..a1c16cfa 100644
--- a/.github/workflows/cleanup-pr-artifacts.yml
+++ b/.github/workflows/cleanup-pr-artifacts.yml
@@ -9,4 +9,5 @@ jobs:
     uses: Cratis/Workflows/.github/workflows/cleanup-pr-artifacts.yml@main
     with:
       pull_request: ${{ github.event.pull_request.number }}
-    secrets: inherit
+    secrets:
+      PAT_WORKFLOWS: ${{ secrets.PAT_WORKFLOWS }}
diff --git a/.github/workflows/propagate-copilot-instructions.yml b/.github/workflows/propagate-copilot-instructions.yml
index 1d5909d1..2d8a8baf 100644
--- a/.github/workflows/propagate-copilot-instructions.yml
+++ b/.github/workflows/propagate-copilot-instructions.yml
@@ -19,4 +19,5 @@ jobs:
     uses: Cratis/Workflows/.github/workflows/propagate-copilot-instructions.yml@main
     with:
       event_name: ${{ github.event_name }}
-    secrets: inherit
+    secrets:
+      PAT_WORKFLOWS: ${{ secrets.PAT_WORKFLOWS }}
diff --git a/.github/workflows/sync-copilot-instructions.yml b/.github/workflows/sync-copilot-instructions.yml
index 974a125a..92975c6c 100644
--- a/.github/workflows/sync-copilot-instructions.yml
+++ b/.github/workflows/sync-copilot-instructions.yml
@@ -13,4 +13,5 @@ jobs:
     uses: Cratis/Workflows/.github/workflows/sync-copilot-instructions.yml@main
     with:
       source_repository: ${{ inputs.source_repository }}
-    secrets: inherit
+    secrets:
+      PAT_WORKFLOWS: ${{ secrets.PAT_WORKFLOWS }}

From 9804d4e97e573932b077c753bc18f5ff2bbfc932 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Wed, 26 Aug 2026 22:09:41 +0200
Subject: [PATCH 097/267] feat(codemods): rewrite named root re-exports, not
 just imports
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

remove-root-namespace-imports previously left every named
`export { X } from '@cratis/components'` re-export untouched and only
reported a diagnostic — even though the diagnostic already told the
consumer the exact, unambiguous rewrite. That rewrite is exactly as
safe as the existing import rewrite: an exported name identifies one
known namespace (or an approved setup symbol), so there is nothing to
guess.

transform.js now applies that rewrite for `export { Canvas } from
'@cratis/components'` and its aliased, type-only, mixed-setup-symbol,
and multiple-namespace forms, sharing the replacement-text builder
with the import case (generalized to `buildSubpathReplacementText`,
parameterized by `import`/`export` keyword). A wildcard re-export
(`export * from '@cratis/components'`) or a namespace re-export
(`export * as X from '@cratis/components'`) remains unsupported and
reported, for the same reason a whole-package namespace import stays
unsupported: which subpath a later access needs cannot be inferred
from the re-export alone.

Adds fixtures and targeted specs for the new supported export cases
and for the two re-export forms that remain genuinely unsupported
(wildcard/namespace re-export, unknown re-exported symbol). Updates
Codemods/README.md to describe the new coverage precisely.

Verification:
- Codemods: yarn test (64/64 passing)
- Codemods: node test/verify-packed-package.mjs (packed CLI verified)
---
 Codemods/README.md                            |  57 +++++---
 Codemods/lib/transform.js                     | 122 ++++++++++++------
 .../test/fixtures/export-alias/expected.ts    |   4 +
 Codemods/test/fixtures/export-alias/input.ts  |   4 +
 .../export-command-stepper-alias/expected.ts  |   4 +
 .../export-command-stepper-alias/input.ts     |   4 +
 .../test/fixtures/export-mixed/expected.ts    |   5 +
 Codemods/test/fixtures/export-mixed/input.ts  |   4 +
 .../export-multiple-namespaces/expected.ts    |   5 +
 .../export-multiple-namespaces/input.ts       |   4 +
 .../test/fixtures/export-type/expected.ts     |   4 +
 Codemods/test/fixtures/export-type/input.ts   |   4 +
 .../test/fixtures/export-value/expected.ts    |   4 +
 Codemods/test/fixtures/export-value/input.ts  |   4 +
 .../unsupported-export-namespace/expected.ts  |   4 +
 .../unsupported-export-namespace/input.ts     |   4 +
 .../expected.ts                               |   4 +
 .../input.ts                                  |   4 +
 .../fixtures/unsupported-export/expected.ts   |   1 -
 .../test/fixtures/unsupported-export/input.ts |   1 -
 Codemods/test/transform.test.js               |  56 ++++++++
 21 files changed, 244 insertions(+), 59 deletions(-)
 create mode 100644 Codemods/test/fixtures/export-alias/expected.ts
 create mode 100644 Codemods/test/fixtures/export-alias/input.ts
 create mode 100644 Codemods/test/fixtures/export-command-stepper-alias/expected.ts
 create mode 100644 Codemods/test/fixtures/export-command-stepper-alias/input.ts
 create mode 100644 Codemods/test/fixtures/export-mixed/expected.ts
 create mode 100644 Codemods/test/fixtures/export-mixed/input.ts
 create mode 100644 Codemods/test/fixtures/export-multiple-namespaces/expected.ts
 create mode 100644 Codemods/test/fixtures/export-multiple-namespaces/input.ts
 create mode 100644 Codemods/test/fixtures/export-type/expected.ts
 create mode 100644 Codemods/test/fixtures/export-type/input.ts
 create mode 100644 Codemods/test/fixtures/export-value/expected.ts
 create mode 100644 Codemods/test/fixtures/export-value/input.ts
 create mode 100644 Codemods/test/fixtures/unsupported-export-namespace/expected.ts
 create mode 100644 Codemods/test/fixtures/unsupported-export-namespace/input.ts
 create mode 100644 Codemods/test/fixtures/unsupported-export-unknown-symbol/expected.ts
 create mode 100644 Codemods/test/fixtures/unsupported-export-unknown-symbol/input.ts

diff --git a/Codemods/README.md b/Codemods/README.md
index 0681c61c..092c4d84 100644
--- a/Codemods/README.md
+++ b/Codemods/README.md
@@ -6,20 +6,31 @@ Migration codemods in the Components 4 candidate move Components 3 root namespac
 
 An idempotent, AST-based codemod built on the TypeScript compiler API. The published CLI
 brings its own `typescript` runtime dependency, so its parser does not depend on the consumer
-application's TypeScript version. It rewrites static `import` declarations only; it never
-guesses, and reports every case it will not touch.
+application's TypeScript version. It rewrites static `import` declarations and named
+`export … from` re-exports only; it never guesses, and reports every case it will not touch.
 
 ### What it rewrites
 
-| Before                                              | After                                                       |
-| --------------------------------------------------- | ----------------------------------------------------------- |
-| `import { Canvas } from '@cratis/components';`      | `import * as Canvas from '@cratis/components/Canvas';`      |
-| `import type { Canvas } from '@cratis/components';` | `import type * as Canvas from '@cratis/components/Canvas';` |
-| `import { Canvas as C } from '@cratis/components';` | `import * as C from '@cratis/components/Canvas';`           |
+| Before                                               | After                                                          |
+| ----------------------------------------------------- | ----------------------------------------------------------------- |
+| `import { Canvas } from '@cratis/components';`       | `import * as Canvas from '@cratis/components/Canvas';`         |
+| `import type { Canvas } from '@cratis/components';`  | `import type * as Canvas from '@cratis/components/Canvas';`    |
+| `import { Canvas as C } from '@cratis/components';`  | `import * as C from '@cratis/components/Canvas';`              |
+| `export { Canvas } from '@cratis/components';`       | `export * as Canvas from '@cratis/components/Canvas';`         |
+| `export type { Canvas } from '@cratis/components';`  | `export type * as Canvas from '@cratis/components/Canvas';`    |
+| `export { Canvas as C } from '@cratis/components';`  | `export * as C from '@cratis/components/Canvas';`              |
 
-The historical `CommandStepper` root namespace is a special case: it aliased the complete `CommandDialog` module. The codemod therefore maps it to `@cratis/components/CommandDialog`, preserving every namespace member. New code that only needs the standalone component should use `import { CommandStepper } from '@cratis/components/CommandStepper'`.
+A named `export … from '@cratis/components'` re-export follows exactly the same rules as an
+import, because the transformation is equally unambiguous in both directions: the exported
+name identifies one specific namespace (or approved setup symbol), so the codemod can
+rewrite it without guessing. Only a **wildcard** re-export of the whole package —
+`export * from '@cratis/components'` or `export * as X from '@cratis/components'` — stays
+unsupported, for the same reason a whole-package namespace import stays unsupported: see
+[What it refuses to guess](#what-it-refuses-to-guess).
 
-Multiple namespaces in one import become one subpath import per namespace:
+The historical `CommandStepper` root namespace is a special case: it aliased the complete `CommandDialog` module. The codemod therefore maps it to `@cratis/components/CommandDialog`, preserving every namespace member. New code that only needs the standalone component should use `import { CommandStepper } from '@cratis/components/CommandStepper'` (or the equivalent re-export).
+
+Multiple namespaces in one import or re-export become one subpath statement per namespace:
 
 ```ts
 // Before
@@ -30,8 +41,8 @@ import * as Canvas from '@cratis/components/Canvas';
 import * as Common from '@cratis/components/Common';
 ```
 
-A mixed import naming both an approved setup symbol and a namespace is split — the setup
-symbol stays at the root, the namespace moves to its subpath:
+A mixed import or re-export naming both an approved setup symbol and a namespace is split —
+the setup symbol stays at the root, the namespace moves to its subpath:
 
 ```ts
 // Before
@@ -42,9 +53,9 @@ import { CratisComponentsProvider } from '@cratis/components';
 import * as Canvas from '@cratis/components/Canvas';
 ```
 
-Running the codemod again on its own output is a no-op — it only ever matches an import
-whose module specifier is exactly `@cratis/components` (or the `--package` override), so an
-already-migrated subpath import is never revisited.
+Running the codemod again on its own output is a no-op — it only ever matches an import or
+named re-export whose module specifier is exactly `@cratis/components` (or the `--package`
+override), so an already-migrated subpath import or re-export is never revisited.
 
 The complete namespace → subpath map and the approved-root-symbol allowlist live in
 [`lib/namespaceMap.js`](./lib/namespaceMap.js), mirrored from `Source/index.ts`. Contributors
@@ -70,11 +81,15 @@ Each of these is left completely untouched, and reported as a diagnostic instead
   This is the whole package namespace, so later member access is as ambiguous as `import * as`.
 - A dynamic `import('@cratis/components')` or a CommonJS `require('@cratis/components')`,
   anywhere in the file.
-- Any `export … from '@cratis/components'` re-export form. This codemod only rewrites
-  `import` declarations; re-exports are reported with subpath guidance but not rewritten.
+- A wildcard re-export of the whole package — `export * from '@cratis/components';` — or a
+  namespace re-export of the whole package — `export * as Components from
+  '@cratis/components';`. Both are exactly as ambiguous as a whole-package namespace import:
+  which subpath each later access needs cannot be determined from the re-export alone. A
+  _named_ re-export (`export { Canvas } from '@cratis/components';`) is not in this list —
+  see [What it rewrites](#what-it-rewrites).
 
-Existing subpath imports (`@cratis/components/Canvas`, …) are never touched — narrow subpath
-consumers are left exactly as they are.
+Existing subpath imports and re-exports (`@cratis/components/Canvas`, …) are never touched —
+narrow subpath consumers are left exactly as they are.
 
 ### Use
 
@@ -108,9 +123,9 @@ those always need a human), and, in `--check` mode only, whenever a supported re
 not yet been applied. Run `--help` for the full option list.
 
 After running the codemod, run the project's own build/lint/test gates — the codemod only
-performs the mechanical import rewrite; it does not attempt to fix any resulting unused
-import, nor does it know whether a namespace member you use (`Canvas.Foo`) still exists at
-that subpath.
+performs the mechanical import/re-export rewrite; it does not attempt to fix any resulting
+unused import, nor does it know whether a namespace member you use (`Canvas.Foo`) still
+exists at that subpath.
 
 ### Test
 
diff --git a/Codemods/lib/transform.js b/Codemods/lib/transform.js
index 6c224bb2..e2830c66 100644
--- a/Codemods/lib/transform.js
+++ b/Codemods/lib/transform.js
@@ -27,9 +27,12 @@ import {
  *   import.
  * - An import naming several namespaces produces one subpath import per namespace, in
  *   their original left-to-right order.
- * - Applying the codemod again is a no-op: it only ever matches an import whose
- *   module specifier is exactly the configured package name, so an already-migrated
- *   subpath import is never revisited.
+ * - A named re-export follows the same rules: `export { Canvas } from '@cratis/components'`
+ *   becomes `export * as Canvas from '@cratis/components/Canvas'`, with the same alias,
+ *   type-only, mixed-setup-symbol, and multiple-namespace handling as the import case.
+ * - Applying the codemod again is a no-op: it only ever matches an import or named
+ *   re-export whose module specifier is exactly the configured package name, so an
+ *   already-migrated subpath import or re-export is never revisited.
  *
  * What it deliberately refuses to guess, reporting a diagnostic instead of editing:
  * - A namespace import of the whole package (`import * as Components from '...'`) —
@@ -39,12 +42,15 @@ import {
  *   export.
  * - A side-effect-only import (`import '...'`) — there is no binding to infer a
  *   subpath from.
- * - A named import of a symbol that is neither an approved setup symbol nor a known
- *   namespace — the whole import statement is left untouched so a partial, silently
- *   incomplete migration is never produced.
+ * - A named import or named re-export of a symbol that is neither an approved setup
+ *   symbol nor a known namespace — the whole statement is left untouched so a
+ *   partial, silently incomplete migration is never produced.
  * - A dynamic `import('...')` or CommonJS `require('...')` call anywhere in the file.
- * - Any `export ... from '@cratis/components'` re-export form — this codemod only
- *   rewrites `import` declarations.
+ * - A wildcard re-export of the whole package (`export * from '@cratis/components'`)
+ *   or a namespace re-export of the whole package (`export * as X from
+ *   '@cratis/components'`) — the same ambiguity as a whole-package namespace import:
+ *   which subpath each later access belongs to cannot be determined from the
+ *   re-export alone.
  *
  * @param {string} fileName - Used only to select the TypeScript/TSX/JS/JSX grammar.
  * @param {string} text - The source file's current contents.
@@ -120,7 +126,7 @@ export function transformSource(fileName, text, options = {}) {
 
             if (approvedRootSymbols.has(importedName)) {
                 kept.push({
-                    importedName,
+                    name: importedName,
                     localName,
                     elementTypeOnly: element.isTypeOnly,
                 });
@@ -148,7 +154,8 @@ export function transformSource(fileName, text, options = {}) {
         // Nothing to migrate — the import already only names approved root symbols.
         if (namespaced.length === 0) return;
 
-        const replacement = buildReplacementText({
+        const replacement = buildSubpathReplacementText({
+            keyword: 'import',
             packageName,
             declTypeOnly,
             kept,
@@ -160,29 +167,65 @@ export function transformSource(fileName, text, options = {}) {
     const handleExport = (node) => {
         if (!isRootSpecifier(node.moduleSpecifier)) return;
 
-        if (node.exportClause && ts.isNamedExports(node.exportClause)) {
-            for (const element of node.exportClause.elements) {
-                const exportedName = (element.propertyName ?? element.name).text;
-                if (approvedRootSymbols.has(exportedName)) continue;
-                if (Object.hasOwn(namespaceSubpaths, exportedName)) {
-                    report(
-                        element,
-                        `Re-export '${exportedName}' from '${packageName}/${namespaceSubpaths[exportedName]}' instead of the package root barrel. This codemod only rewrites 'import' declarations — split this 'export … from' by hand (e.g. 'export * as ${exportedName} from ${JSON.stringify(`${packageName}/${namespaceSubpaths[exportedName]}`)}').`,
-                    );
-                    continue;
-                }
-                report(
-                    element,
-                    `'${exportedName}' is not a recognized '${packageName}' root export; migrate this re-export by hand.`,
-                );
-            }
+        if (!node.exportClause || !ts.isNamedExports(node.exportClause)) {
+            // A bare `export * from '@cratis/components'` or a namespace re-export
+            // (`export * as X from '@cratis/components'`) is exactly as ambiguous as a
+            // whole-package namespace import: there is no way to know, from the
+            // re-export alone, which subpath a later consumer's member access needs.
+            report(
+                node,
+                `A wildcard 're-export … from ${JSON.stringify(packageName)}' cannot be auto-migrated: which subpath each later member access belongs to cannot be inferred from the re-export alone. Replace it with explicit subpath re-export(s).`,
+            );
             return;
         }
 
-        report(
-            node,
-            `A wildcard 're-export … from ${JSON.stringify(packageName)}' cannot be auto-migrated: this codemod only rewrites 'import' declarations. Replace it with explicit subpath re-exports.`,
-        );
+        const declTypeOnly = node.isTypeOnly;
+        const kept = [];
+        const namespaced = [];
+        let hasUnknown = false;
+
+        for (const element of node.exportClause.elements) {
+            const exportedName = (element.propertyName ?? element.name).text;
+            const localName = element.name.text;
+
+            if (approvedRootSymbols.has(exportedName)) {
+                kept.push({
+                    name: exportedName,
+                    localName,
+                    elementTypeOnly: element.isTypeOnly,
+                });
+                continue;
+            }
+            if (Object.hasOwn(namespaceSubpaths, exportedName)) {
+                namespaced.push({
+                    localName,
+                    subpath: namespaceSubpaths[exportedName],
+                    typeOnly: declTypeOnly || element.isTypeOnly,
+                });
+                continue;
+            }
+
+            hasUnknown = true;
+            report(
+                element,
+                `'${exportedName}' is not a recognized '${packageName}' root export (neither an approved setup symbol nor a known namespace). Leaving this re-export untouched — add '${exportedName}' to the migration map, or migrate it by hand.`,
+            );
+        }
+
+        // Never guess: an unrecognized specifier means the whole statement is left as-is,
+        // even for the specifiers this codemod does recognize.
+        if (hasUnknown) return;
+        // Nothing to migrate — the re-export already only names approved root symbols.
+        if (namespaced.length === 0) return;
+
+        const replacement = buildSubpathReplacementText({
+            keyword: 'export',
+            packageName,
+            declTypeOnly,
+            kept,
+            namespaced,
+        });
+        edits.push({ start: node.getStart(sourceFile), end: node.getEnd(), replacement });
     };
 
     const handleImportEquals = (node) => {
@@ -247,25 +290,32 @@ export function transformSource(fileName, text, options = {}) {
     return { text: output, changed: true, diagnostics };
 }
 
-function buildReplacementText({ packageName, declTypeOnly, kept, namespaced }) {
+/**
+ * Builds replacement source text for both the import and named-re-export cases, which
+ * share an identical shape: an optional statement that keeps the approved root symbols
+ * (`{ name, localName, elementTypeOnly }` entries), followed by one `* as localName from
+ * '<package>/<subpath>'` statement per namespace (`{ localName, subpath, typeOnly }`
+ * entries). `keyword` is `'import'` or `'export'`.
+ */
+function buildSubpathReplacementText({ keyword, packageName, declTypeOnly, kept, namespaced }) {
     const lines = [];
 
     if (kept.length > 0) {
         const specifiers = kept
-            .map(({ importedName, localName, elementTypeOnly }) => {
+            .map(({ name, localName, elementTypeOnly }) => {
                 const prefix = !declTypeOnly && elementTypeOnly ? 'type ' : '';
-                const alias = localName === importedName ? '' : ` as ${localName}`;
-                return `${prefix}${importedName}${alias}`;
+                const alias = localName === name ? '' : ` as ${localName}`;
+                return `${prefix}${name}${alias}`;
             })
             .join(', ');
         lines.push(
-            `import ${declTypeOnly ? 'type ' : ''}{ ${specifiers} } from '${packageName}';`,
+            `${keyword} ${declTypeOnly ? 'type ' : ''}{ ${specifiers} } from '${packageName}';`,
         );
     }
 
     for (const { localName, subpath, typeOnly } of namespaced) {
         lines.push(
-            `import ${typeOnly ? 'type ' : ''}* as ${localName} from '${packageName}/${subpath}';`,
+            `${keyword} ${typeOnly ? 'type ' : ''}* as ${localName} from '${packageName}/${subpath}';`,
         );
     }
 
diff --git a/Codemods/test/fixtures/export-alias/expected.ts b/Codemods/test/fixtures/export-alias/expected.ts
new file mode 100644
index 00000000..f003710c
--- /dev/null
+++ b/Codemods/test/fixtures/export-alias/expected.ts
@@ -0,0 +1,4 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+export * as Shapes from '@cratis/components/Canvas';
diff --git a/Codemods/test/fixtures/export-alias/input.ts b/Codemods/test/fixtures/export-alias/input.ts
new file mode 100644
index 00000000..7cd2b959
--- /dev/null
+++ b/Codemods/test/fixtures/export-alias/input.ts
@@ -0,0 +1,4 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+export { Canvas as Shapes } from '@cratis/components';
diff --git a/Codemods/test/fixtures/export-command-stepper-alias/expected.ts b/Codemods/test/fixtures/export-command-stepper-alias/expected.ts
new file mode 100644
index 00000000..46019cd7
--- /dev/null
+++ b/Codemods/test/fixtures/export-command-stepper-alias/expected.ts
@@ -0,0 +1,4 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+export * as StepperNamespace from '@cratis/components/CommandDialog';
diff --git a/Codemods/test/fixtures/export-command-stepper-alias/input.ts b/Codemods/test/fixtures/export-command-stepper-alias/input.ts
new file mode 100644
index 00000000..75bead20
--- /dev/null
+++ b/Codemods/test/fixtures/export-command-stepper-alias/input.ts
@@ -0,0 +1,4 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+export { CommandStepper as StepperNamespace } from '@cratis/components';
diff --git a/Codemods/test/fixtures/export-mixed/expected.ts b/Codemods/test/fixtures/export-mixed/expected.ts
new file mode 100644
index 00000000..e99a027f
--- /dev/null
+++ b/Codemods/test/fixtures/export-mixed/expected.ts
@@ -0,0 +1,5 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+export { CratisComponentsProvider } from '@cratis/components';
+export * as Canvas from '@cratis/components/Canvas';
diff --git a/Codemods/test/fixtures/export-mixed/input.ts b/Codemods/test/fixtures/export-mixed/input.ts
new file mode 100644
index 00000000..191ecfaf
--- /dev/null
+++ b/Codemods/test/fixtures/export-mixed/input.ts
@@ -0,0 +1,4 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+export { CratisComponentsProvider, Canvas } from '@cratis/components';
diff --git a/Codemods/test/fixtures/export-multiple-namespaces/expected.ts b/Codemods/test/fixtures/export-multiple-namespaces/expected.ts
new file mode 100644
index 00000000..82344c00
--- /dev/null
+++ b/Codemods/test/fixtures/export-multiple-namespaces/expected.ts
@@ -0,0 +1,5 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+export * as Canvas from '@cratis/components/Canvas';
+export * as Common from '@cratis/components/Common';
diff --git a/Codemods/test/fixtures/export-multiple-namespaces/input.ts b/Codemods/test/fixtures/export-multiple-namespaces/input.ts
new file mode 100644
index 00000000..95e5e03c
--- /dev/null
+++ b/Codemods/test/fixtures/export-multiple-namespaces/input.ts
@@ -0,0 +1,4 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+export { Canvas, Common } from '@cratis/components';
diff --git a/Codemods/test/fixtures/export-type/expected.ts b/Codemods/test/fixtures/export-type/expected.ts
new file mode 100644
index 00000000..9e2289d7
--- /dev/null
+++ b/Codemods/test/fixtures/export-type/expected.ts
@@ -0,0 +1,4 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+export type * as Canvas from '@cratis/components/Canvas';
diff --git a/Codemods/test/fixtures/export-type/input.ts b/Codemods/test/fixtures/export-type/input.ts
new file mode 100644
index 00000000..2e7df2ee
--- /dev/null
+++ b/Codemods/test/fixtures/export-type/input.ts
@@ -0,0 +1,4 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+export type { Canvas } from '@cratis/components';
diff --git a/Codemods/test/fixtures/export-value/expected.ts b/Codemods/test/fixtures/export-value/expected.ts
new file mode 100644
index 00000000..0e79300a
--- /dev/null
+++ b/Codemods/test/fixtures/export-value/expected.ts
@@ -0,0 +1,4 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+export * as Canvas from '@cratis/components/Canvas';
diff --git a/Codemods/test/fixtures/export-value/input.ts b/Codemods/test/fixtures/export-value/input.ts
new file mode 100644
index 00000000..39190c80
--- /dev/null
+++ b/Codemods/test/fixtures/export-value/input.ts
@@ -0,0 +1,4 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+export { Canvas } from '@cratis/components';
diff --git a/Codemods/test/fixtures/unsupported-export-namespace/expected.ts b/Codemods/test/fixtures/unsupported-export-namespace/expected.ts
new file mode 100644
index 00000000..2b966b02
--- /dev/null
+++ b/Codemods/test/fixtures/unsupported-export-namespace/expected.ts
@@ -0,0 +1,4 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+export * as Components from '@cratis/components';
diff --git a/Codemods/test/fixtures/unsupported-export-namespace/input.ts b/Codemods/test/fixtures/unsupported-export-namespace/input.ts
new file mode 100644
index 00000000..2b966b02
--- /dev/null
+++ b/Codemods/test/fixtures/unsupported-export-namespace/input.ts
@@ -0,0 +1,4 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+export * as Components from '@cratis/components';
diff --git a/Codemods/test/fixtures/unsupported-export-unknown-symbol/expected.ts b/Codemods/test/fixtures/unsupported-export-unknown-symbol/expected.ts
new file mode 100644
index 00000000..3f24e8b0
--- /dev/null
+++ b/Codemods/test/fixtures/unsupported-export-unknown-symbol/expected.ts
@@ -0,0 +1,4 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+export { Button } from '@cratis/components';
diff --git a/Codemods/test/fixtures/unsupported-export-unknown-symbol/input.ts b/Codemods/test/fixtures/unsupported-export-unknown-symbol/input.ts
new file mode 100644
index 00000000..3f24e8b0
--- /dev/null
+++ b/Codemods/test/fixtures/unsupported-export-unknown-symbol/input.ts
@@ -0,0 +1,4 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+export { Button } from '@cratis/components';
diff --git a/Codemods/test/fixtures/unsupported-export/expected.ts b/Codemods/test/fixtures/unsupported-export/expected.ts
index 92e01096..1a28fa9a 100644
--- a/Codemods/test/fixtures/unsupported-export/expected.ts
+++ b/Codemods/test/fixtures/unsupported-export/expected.ts
@@ -1,5 +1,4 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-export { Canvas } from '@cratis/components';
 export * from '@cratis/components';
diff --git a/Codemods/test/fixtures/unsupported-export/input.ts b/Codemods/test/fixtures/unsupported-export/input.ts
index 92e01096..1a28fa9a 100644
--- a/Codemods/test/fixtures/unsupported-export/input.ts
+++ b/Codemods/test/fixtures/unsupported-export/input.ts
@@ -1,5 +1,4 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-export { Canvas } from '@cratis/components';
 export * from '@cratis/components';
diff --git a/Codemods/test/transform.test.js b/Codemods/test/transform.test.js
index 305ef18f..61e69978 100644
--- a/Codemods/test/transform.test.js
+++ b/Codemods/test/transform.test.js
@@ -30,6 +30,12 @@ const supportedCases = [
     'mixed-import',
     'multiple-namespaces',
     'command-stepper-alias',
+    'export-value',
+    'export-alias',
+    'export-type',
+    'export-mixed',
+    'export-multiple-namespaces',
+    'export-command-stepper-alias',
 ];
 
 // Fixtures where the codemod must leave the file completely untouched: either because it
@@ -46,6 +52,8 @@ const unchangedCases = [
     'unsupported-unknown-symbol',
     'unsupported-side-effect-only',
     'unsupported-export',
+    'unsupported-export-namespace',
+    'unsupported-export-unknown-symbol',
 ];
 
 const unsupportedCases = new Set([
@@ -57,6 +65,8 @@ const unsupportedCases = new Set([
     'unsupported-unknown-symbol',
     'unsupported-side-effect-only',
     'unsupported-export',
+    'unsupported-export-namespace',
+    'unsupported-export-unknown-symbol',
 ]);
 
 describe('root namespace maps', () => {
@@ -369,4 +379,50 @@ describe('transformSource — targeted behavior', () => {
         expect(result.diagnostics).toHaveLength(1);
         expect(result.diagnostics[0].message).toContain("'Button'");
     });
+
+    it('rewrites an import and a named re-export of the root package in the same file independently', () => {
+        const input = [
+            "import { Canvas } from '@cratis/components';",
+            "export { Common } from '@cratis/components';",
+            '',
+            'export const shapes = Canvas;',
+            '',
+        ].join('\n');
+
+        const result = transformSource('file.ts', input);
+
+        expect(result.text).toBe(
+            [
+                "import * as Canvas from '@cratis/components/Canvas';",
+                "export * as Common from '@cratis/components/Common';",
+                '',
+                'export const shapes = Canvas;',
+                '',
+            ].join('\n'),
+        );
+        expect(result.changed).toBe(true);
+        expect(result.diagnostics).toEqual([]);
+    });
+
+    it('leaves the whole re-export statement untouched when one specifier is unrecognized, even with a recognized namespace alongside it', () => {
+        const input = "export { Canvas, Button } from '@cratis/components';\n";
+
+        const result = transformSource('file.ts', input);
+
+        expect(result.text).toBe(input);
+        expect(result.changed).toBe(false);
+        expect(result.diagnostics).toHaveLength(1);
+        expect(result.diagnostics[0].message).toContain("'Button'");
+    });
+
+    it('reports a namespace re-export of the whole package as unsupported, distinct from a named re-export', () => {
+        const input = "export * as Components from '@cratis/components';\n";
+
+        const result = transformSource('file.ts', input);
+
+        expect(result.text).toBe(input);
+        expect(result.changed).toBe(false);
+        expect(result.diagnostics).toHaveLength(1);
+        expect(result.diagnostics[0].message).toContain('wildcard');
+    });
 });

From 0a1b3faba9814d776ab128daac6541468ba8505e Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Wed, 26 Aug 2026 22:10:15 +0200
Subject: [PATCH 098/267] docs(components-4): explain the why, fix
 migration-guide drift

UI foundation:
- Add "Why this changed" - ties the already-documented facts (no Prime
  imports/type references, a release gate that enforces it, Components-
  owned typed parts/state attributes/table contracts replacing Prime
  renderer contracts) into an explicit necessity/long-term-benefit
  narrative, as an "Explanation" page should. No new claims: it cross-
  links Release gates, Table architecture, Prime dependency boundary,
  and Why React Aria, which already carry the supporting detail.

Migration guide drift fixes (site Documentation/Migration/3-to-4.md vs
package-shipped Source/MIGRATION.md):
- The site guide's CommandStepper footnote claimed the codemod
  preserves only three named members of the CommandDialog module
  (StepperCommandDialog, CommandDialog, CommandStepper). The module
  also exports StepperPanel, applyBeforeExecute, and every public type
  (StepperParts, CommandDialogProps, ...) - all of which the codemod
  in fact preserves via the namespace-preserving `export * as`
  rewrite. Corrected to state every member is preserved, consistent
  with Source/MIGRATION.md and Codemods/README.md.
- Source/MIGRATION.md said Pixi's single-peer rule protects "Pixi
  types" generically; the site guide is more precise ("PIXI.Container
  and pointer-event types"). Aligned the package doc to match.
- Both guides' codemod-capability sentence now describes the new named
  re-export support (see the companion codemod commit) instead of
  listing all re-exports as unsupported.

ESLint/README.md: the no-root-barrel-import section claimed the
companion codemod "applies the same rewrite" as the ESLint autofixer.
That is no longer precisely true - the codemod now also autofixes
named re-exports, which the ESLint rule still only flags. Reworded to
state the actual current relationship without touching the rule
implementation.

Verification:
- Documentation/verify-markdown.sh (markdownlint + local link check):
  clean, 0 issues, 0 broken links
- Source: node scripts/verify-api-docs.mjs - passes with zero gaps
  (20 barrels / 21 JS export subpaths, no missing TSDoc); no public
  API doc changes were needed
- Codemods: yarn test (64/64), node test/verify-packed-package.mjs
- ESLint: yarn test (88/88, unaffected - README-only change)
---
 Documentation/Migration/3-to-4.md | 4 ++--
 Documentation/ui-foundation.md    | 6 ++++++
 ESLint/README.md                  | 7 +++++--
 Source/MIGRATION.md               | 4 ++--
 4 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/Documentation/Migration/3-to-4.md b/Documentation/Migration/3-to-4.md
index bebe95ac..b03db2dd 100644
--- a/Documentation/Migration/3-to-4.md
+++ b/Documentation/Migration/3-to-4.md
@@ -80,7 +80,7 @@ This is an intentional Components 4 breaking change. The package root now expose
 | `Toolbar`                           | `@cratis/components/Toolbar`                              | `import * as Toolbar from '@cratis/components/Toolbar'`                             | `import { Toolbar, ToolbarButton } from '@cratis/components/Toolbar'`              |
 | `Types`                             | `@cratis/components/types`                                | `import * as Types from '@cratis/components/types'`                                 | `import { JsonSchema, Json } from '@cratis/components/types'`                      |
 
-† The removed root `CommandStepper` namespace aliased the _entire_ `CommandDialog` module. The codemod therefore maps that namespace to `@cratis/components/CommandDialog`, preserving `CommandStepper.StepperCommandDialog`, `CommandStepper.CommandDialog`, and `CommandStepper.CommandStepper`. New code that needs only the standalone component should use the narrower named import from `@cratis/components/CommandStepper`.
+† The removed root `CommandStepper` namespace aliased the _entire_ `CommandDialog` module. The codemod therefore maps that namespace to `@cratis/components/CommandDialog`, preserving every existing namespace member — not only `CommandStepper.StepperCommandDialog`, `CommandStepper.CommandDialog`, and `CommandStepper.CommandStepper`, but also the module's other exports such as `CommandStepper.StepperPanel` and `CommandStepper.applyBeforeExecute`. New code that needs only the standalone component should use the narrower named import from `@cratis/components/CommandStepper`.
 
 `@cratis/components/CommandForm/fields` is the same module as `@cratis/components/CommandForm` — either subpath resolves identically, so the `CommandForm` row's migration applies to both. Provider/configuration/message setup stays on the package root; only Common components such as `Button` move to `@cratis/components/Common`.
 
@@ -96,7 +96,7 @@ npx --package "@cratis/components-codemods@$COMPONENTS_VERSION" \
 
 If the exact codemod package version is unavailable, stop rather than substituting `latest` or a different Components version. Keep the application on its current package, apply the table manually, or wait for a corrected publication.
 
-The codemod scans JavaScript/JSX and TypeScript/TSX (including `.mjs`, `.cjs`, `.mts`, and `.cts`), preserves aliases and type-only imports, splits mixed setup/namespace imports, and refuses to guess at default imports, whole-package namespace imports, TypeScript `import = require(...)` assignments, dynamic imports, CommonJS `require(...)`, re-exports, side-effect imports, or unknown symbols. Review every reported unsupported case manually, then run the consuming project's lint, build, and tests.
+The codemod scans JavaScript/JSX and TypeScript/TSX (including `.mjs`, `.cjs`, `.mts`, and `.cts`), preserves aliases and type-only imports, splits mixed setup/namespace imports, and rewrites a named `export { X } from '@cratis/components'` re-export the same way as the matching import. It refuses to guess at default imports, whole-package namespace imports, TypeScript `import = require(...)` assignments, dynamic imports, CommonJS `require(...)`, wildcard or whole-package re-exports (`export * from '@cratis/components'` / `export * as X from '@cratis/components'`), side-effect imports, or unknown symbols. Review every reported unsupported case manually, then run the consuming project's lint, build, and tests.
 
 Install the matching ESLint plugin version after migration and compose its recommended config after `@cratis/eslint-config`; `no-root-barrel-import` prevents component namespaces from returning:
 
diff --git a/Documentation/ui-foundation.md b/Documentation/ui-foundation.md
index 7c98cff5..5cd947b5 100644
--- a/Documentation/ui-foundation.md
+++ b/Documentation/ui-foundation.md
@@ -7,6 +7,12 @@ sidebar:
 
 Components 4 owns its public React markup, TypeScript types, tokens, documented parts, and component behavior without exposing its internal interaction library as a consumer contract. React Aria supplies selected focus, keyboard, overlay, collection, and date interaction primitives internally. These implementation facts do not establish accessibility conformance for every component or application.
 
+## Why this changed
+
+Components 3 shipped with PrimeReact, PrimeIcons, and PrimeUI theme packages as its declared foundation, so installing `@cratis/components` inherited that dependency tree, its release cadence, and its license terms whether or not an application's own code imported Prime directly. Components 4 removes that inherited coupling: the package manifest declares no Prime dependency or peer, and a [release gate](#release-gates) confirms the emitted JavaScript and declarations contain no Prime imports or type references. Components-owned public types, typed parts, `data-cratis-part` state attributes, and server-paged table contracts (see [Table architecture](#table-architecture)) replace the Prime renderer contracts a consumer previously had to target.
+
+Long term, that ownership is what the rest of this page documents: one `--cratis-*` token source instead of a translation chain through a third-party preset, a package/version/license boundary an application controls directly instead of inheriting it transitively (see [Prime dependency boundary](#prime-dependency-boundary)), and a public API surface Components validates and evolves on its own release cadence rather than one bound to an upstream renderer's compatibility timeline. React Aria remains an internal implementation dependency rather than a second inherited public contract — see [Why React Aria](#why-react-aria) — so this change moves ownership to Components rather than moving the same coupling to a different upstream package.
+
 ## Shipped architecture
 
 ```mermaid
diff --git a/ESLint/README.md b/ESLint/README.md
index 66e647a7..561ff2f9 100644
--- a/ESLint/README.md
+++ b/ESLint/README.md
@@ -123,8 +123,11 @@ The rule never guesses. Each of these is flagged with guidance but **not** autof
 - Any `export … from '@cratis/components'` re-export form — flagged with the same subpath
   guidance, but re-exports are never autofixed.
 
-A companion, standalone codemod applies the same rewrite across a whole project in one pass;
-see [`@cratis/components-codemods`](https://www.npmjs.com/package/@cratis/components-codemods).
+A companion, standalone codemod applies the equivalent rewrite across a whole project in one
+pass, and additionally autofixes a named `export { Canvas } from '@cratis/components'`
+re-export the same way it autofixes the matching import — this rule flags every re-export
+form with guidance but never autofixes any of them; see
+[`@cratis/components-codemods`](https://www.npmjs.com/package/@cratis/components-codemods).
 
 ### `onbeforeexecute-must-return`
 
diff --git a/Source/MIGRATION.md b/Source/MIGRATION.md
index 8e3f0f47..bd39449c 100644
--- a/Source/MIGRATION.md
+++ b/Source/MIGRATION.md
@@ -23,7 +23,7 @@ npm install @cratis/components
 
 Keep a Prime package only when your application still imports it directly. Migrate those imports separately; Components no longer supplies or requires them.
 
-Applications using Canvas or PivotViewer must install `pixi.js@^8.20.0`, now an optional peer rather than a nested Components dependency. Align any existing direct Pixi dependency to the same compatible resolution so public Pixi types come from one package instance. Applications using only non-Pixi subpaths do not need it.
+Applications using Canvas or PivotViewer must install `pixi.js@^8.20.0`, now an optional peer rather than a nested Components dependency. Align any existing direct Pixi dependency to the same compatible resolution so public `PIXI.Container` and pointer-event types come from one package instance. Applications using only non-Pixi subpaths do not need it.
 
 The package declares an Arc peer range of `>=20.3.1 <23`.
 
@@ -93,7 +93,7 @@ npx --package "@cratis/components-codemods@$COMPONENTS_VERSION" \
 
 If the exact codemod package version is unavailable, stop rather than substituting `latest` or a different Components version. Keep the application on its current package, apply the table manually, or wait for a corrected publication.
 
-The codemod scans JavaScript/JSX and TypeScript/TSX (including `.mjs`, `.cjs`, `.mts`, and `.cts`), preserves aliases and type-only imports, splits mixed setup/namespace imports, and reports unsupported cases without guessing. Those include default or whole-package namespace imports, TypeScript `import = require(...)` assignments, dynamic imports, CommonJS `require(...)`, re-exports, side-effect imports, and unknown symbols. Review its diagnostics, then run the consuming project's lint, build, and tests.
+The codemod scans JavaScript/JSX and TypeScript/TSX (including `.mjs`, `.cjs`, `.mts`, and `.cts`), preserves aliases and type-only imports, splits mixed setup/namespace imports, and rewrites a named `export { X } from '@cratis/components'` re-export the same way as the matching import. It reports unsupported cases without guessing: default or whole-package namespace imports, TypeScript `import = require(...)` assignments, dynamic imports, CommonJS `require(...)`, wildcard or whole-package re-exports (`export * from '@cratis/components'` / `export * as X from '@cratis/components'`), side-effect imports, and unknown symbols. Review its diagnostics, then run the consuming project's lint, build, and tests.
 
 Install the matching ESLint plugin version after migration and compose its recommended config after `@cratis/eslint-config`; `no-root-barrel-import` prevents component namespaces from returning:
 

From c76cbf21feddd4b52fea262febb605d2e6bbbd85 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Wed, 26 Aug 2026 22:24:50 +0200
Subject: [PATCH 099/267] fix(components-4): keep id-less CanvasItems anonymous
 to region membership
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Region fed itemsWithinRegion the raw registry snapshot, and CanvasItem always
registers under id ?? useId() — so an item with no caller-supplied id was
still reported as a region member under its generated React id, contradicting
the documented promise that id-less items stay anonymous to containment
detection.

Add an explicit, additive anonymous?: boolean marker to the registry entry
contract (CanvasItemRegistryEntry / RegionContainmentBounds). CanvasItem sets
it from whether the id prop was actually supplied, not from what key ended up
in the registry. itemsWithinRegion excludes any entry marked anonymous from
its result while still iterating it, so the item remains available to every
other registry consumer (minimap, fit-to-content) and self-exclusion by id is
unaffected. The field is optional and falsy by default, so a bare
{x, y, width, height} map — the shape every existing caller of the public
itemsWithinRegion helper already uses — keeps its current behavior unchanged.

Specs:
- itemsWithinRegion: an anonymously-registered entry is excluded from the
  region-membership result even when geometrically inside, while an entry
  explicitly marked non-anonymous, and an entry with no anonymous field at
  all (the pre-existing shape), are both still reported.
- CanvasItem: with no id, the item still registers (and unregisters) in the
  Canvas item registry, with anonymous: true; with an explicit id, it
  registers under that id with anonymous: false.
- The pre-existing itemsWithinRegion specs (inside/outside, edge-inclusive,
  self-exclusion, empty input) are left untouched and still pass, proving
  backward compatibility for public callers.

Clarifies the mechanism in Documentation/Canvas/messaging.md; no behavioral
doc change was needed since the docs already described the intended (now
actually correct) contract.

Verified: tsc -p tsconfig.json --noEmit, tsc -p tsconfig.stories.json
--noEmit, eslint over Source (clean), vitest run Canvas (34 files / 151
tests passing), scripts/verify-api-docs.mjs, markdownlint-cli2 over the docs
globs, and Documentation/verify-local-links.mjs — all clean.
---
 Documentation/Canvas/messaging.md             |  2 +-
 Source/Canvas/Canvas.tsx                      |  8 ++
 Source/Canvas/CanvasItem.tsx                  |  8 +-
 .../when_an_explicit_id_is_given.tsx          | 77 +++++++++++++++++
 .../when_no_explicit_id_is_given.tsx          | 85 +++++++++++++++++++
 .../when_an_item_is_registered_anonymously.ts | 30 +++++++
 .../Canvas/shapes/Region/regionContainment.ts | 24 +++++-
 7 files changed, 227 insertions(+), 7 deletions(-)
 create mode 100644 Source/Canvas/for_CanvasItem/when_an_explicit_id_is_given.tsx
 create mode 100644 Source/Canvas/for_CanvasItem/when_no_explicit_id_is_given.tsx
 create mode 100644 Source/Canvas/shapes/Region/for_itemsWithinRegion/when_an_item_is_registered_anonymously.ts

diff --git a/Documentation/Canvas/messaging.md b/Documentation/Canvas/messaging.md
index 327bd494..854c112d 100644
--- a/Documentation/Canvas/messaging.md
+++ b/Documentation/Canvas/messaging.md
@@ -43,7 +43,7 @@ Messages are keyed by ids the host already owns, opted in per shape:
 
 All of them are plain classes with `constructor(readonly ...)` fields, importable from `@cratis/components/Canvas`.
 
-Containment is by center point, inclusive of the region's edges, and the pure function behind it — `itemsWithinRegion(regionBounds, items, excludeId?)` — is exported for hosts that want the same math outside the messenger flow (hit-testing a drop, say). Overlapping regions may each claim the same item; resolving exclusivity is deliberately the host's job, as is everything else membership implies — the region never moves members, persists nothing, and knows nothing about item types (see [Regions](regions.md)).
+Containment is by center point, inclusive of the region's edges, and the pure function behind it — `itemsWithinRegion(regionBounds, items, excludeId?)` — is exported for hosts that want the same math outside the messenger flow (hit-testing a drop, say). The Canvas item registry marks an id-less `CanvasItem`'s entry `anonymous: true`, and `itemsWithinRegion` always excludes such an entry from its result, even when its center genuinely lies within the region — that marker is the mechanism behind "items without an `id` are anonymous to containment detection" above; the entry still feeds the minimap and fit-to-content, since exclusion is scoped to region membership only. A host calling `itemsWithinRegion` with its own `{x, y, width, height}` map never needs to set this field — it is optional and absent means reported, so existing callers are unaffected. Overlapping regions may each claim the same item; resolving exclusivity is deliberately the host's job, as is everything else membership implies — the region never moves members, persists nothing, and knows nothing about item types (see [Regions](regions.md)).
 
 ## Defining your own messages for your own shapes
 
diff --git a/Source/Canvas/Canvas.tsx b/Source/Canvas/Canvas.tsx
index 208d2231..b37f9890 100644
--- a/Source/Canvas/Canvas.tsx
+++ b/Source/Canvas/Canvas.tsx
@@ -65,6 +65,14 @@ export interface CanvasItemRegistryEntry {
     width: number;
     /** Measured height. */
     height: number;
+
+    /**
+     * Whether this entry is registered under an internally generated id rather than one the caller
+     * supplied through {@link CanvasItem}'s `id` prop. An anonymous entry still feeds every consumer
+     * of the registry — the minimap, fit-to-content — but `Region` (via `itemsWithinRegion`) never
+     * reports it as a region member, since there is no caller-owned id a host could recognize it by.
+     */
+    anonymous?: boolean;
 }
 
 /** Registry contract used by {@link CanvasItem} to publish measured bounds. */
diff --git a/Source/Canvas/CanvasItem.tsx b/Source/Canvas/CanvasItem.tsx
index eab4215b..5d1f6169 100644
--- a/Source/Canvas/CanvasItem.tsx
+++ b/Source/Canvas/CanvasItem.tsx
@@ -83,7 +83,10 @@ export const CanvasItem: React.FC<CanvasItemProps> = ({
         return () => observer.disconnect();
     }, [itemId]);
 
-    // Register with the Canvas registry whenever position or size changes
+    // Register with the Canvas registry whenever position or size changes. `anonymous` records
+    // whether the caller ever supplied an `id` at all — not just what key ended up in the registry —
+    // so a `Region` reading this entry back can tell a generated key from a real one and keep
+    // anonymous items out of region-membership reports while still feeding the minimap/fit-to-content.
     useEffect(() => {
         if (!size || !registryContext) return;
         registryContext.register(itemId, {
@@ -91,8 +94,9 @@ export const CanvasItem: React.FC<CanvasItemProps> = ({
             y,
             width: size.width,
             height: size.height,
+            anonymous: id === undefined,
         });
-    }, [x, y, size, registryContext, itemId]);
+    }, [x, y, size, registryContext, itemId, id]);
 
     // Unregister when unmounting
     useEffect(() => {
diff --git a/Source/Canvas/for_CanvasItem/when_an_explicit_id_is_given.tsx b/Source/Canvas/for_CanvasItem/when_an_explicit_id_is_given.tsx
new file mode 100644
index 00000000..b0f422a8
--- /dev/null
+++ b/Source/Canvas/for_CanvasItem/when_an_explicit_id_is_given.tsx
@@ -0,0 +1,77 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { expect } from 'chai';
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, it } from 'vitest';
+import {
+    CanvasItemRegistryContext,
+    type CanvasItemRegistryEntry,
+} from '../Canvas';
+import { CanvasItem } from '../CanvasItem';
+
+// A caller-chosen id is the opt-in that makes an item addressable by a Region's containment
+// reports — the registered entry must therefore carry it as the registry key and must not be
+// marked anonymous.
+
+describe('when an explicit id is given', () => {
+    let root: Root;
+    let container: HTMLDivElement;
+    const registered: Array<[string, CanvasItemRegistryEntry]> = [];
+
+    beforeEach(async () => {
+        // SAFETY: jsdom omits ResizeObserver; CanvasItem only calls the observer methods below, and
+        // performs its own explicit initial measurement independently of the callback firing.
+        (globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver ??= class {
+            observe() {
+                return undefined;
+            }
+            unobserve() {
+                return undefined;
+            }
+            disconnect() {
+                return undefined;
+            }
+        };
+
+        container = document.createElement('div');
+        document.body.appendChild(container);
+        root = createRoot(container);
+
+        await act(async () => {
+            root.render(
+                <CanvasItemRegistryContext.Provider
+                    value={{
+                        register: (id, entry) => registered.push([id, entry]),
+                        unregister: () => undefined,
+                    }}
+                >
+                    <CanvasItem id='member-a' x={40} y={60}>
+                        <div>Named item</div>
+                    </CanvasItem>
+                </CanvasItemRegistryContext.Provider>,
+            );
+        });
+    });
+
+    afterEach(async () => {
+        await act(async () => root.unmount());
+        container.remove();
+    });
+
+    it('should register under the caller-chosen id', () => {
+        expect(registered).to.have.length(1);
+        expect(registered[0][0]).to.equal('member-a');
+    });
+
+    it('should not mark the registered entry anonymous', () =>
+        expect(registered[0][1].anonymous).to.equal(false));
+
+    it('should report the measured world-space position', () => {
+        expect(registered[0][1].x).to.equal(40);
+        expect(registered[0][1].y).to.equal(60);
+    });
+});
diff --git a/Source/Canvas/for_CanvasItem/when_no_explicit_id_is_given.tsx b/Source/Canvas/for_CanvasItem/when_no_explicit_id_is_given.tsx
new file mode 100644
index 00000000..69cd5b84
--- /dev/null
+++ b/Source/Canvas/for_CanvasItem/when_no_explicit_id_is_given.tsx
@@ -0,0 +1,85 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { expect } from 'chai';
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, it } from 'vitest';
+import {
+    CanvasItemRegistryContext,
+    type CanvasItemRegistryEntry,
+} from '../Canvas';
+import { CanvasItem } from '../CanvasItem';
+
+// An id-less CanvasItem must still register — the minimap and fit-to-content read straight off the
+// registry regardless of id — but the entry it registers has to say "anonymous" so a Region reading
+// the same registry knows never to report it as a member (see regionContainment.ts).
+
+describe('when no explicit id is given', () => {
+    let root: Root;
+    let container: HTMLDivElement;
+    const registered: Array<[string, CanvasItemRegistryEntry]> = [];
+    const unregistered: string[] = [];
+
+    beforeEach(async () => {
+        // SAFETY: jsdom omits ResizeObserver; CanvasItem only calls the observer methods below, and
+        // performs its own explicit initial measurement independently of the callback firing.
+        (globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver ??= class {
+            observe() {
+                return undefined;
+            }
+            unobserve() {
+                return undefined;
+            }
+            disconnect() {
+                return undefined;
+            }
+        };
+
+        container = document.createElement('div');
+        document.body.appendChild(container);
+        root = createRoot(container);
+
+        await act(async () => {
+            root.render(
+                <CanvasItemRegistryContext.Provider
+                    value={{
+                        register: (id, entry) => registered.push([id, entry]),
+                        unregister: (id) => unregistered.push(id),
+                    }}
+                >
+                    <CanvasItem x={10} y={20}>
+                        <div>Anonymous item</div>
+                    </CanvasItem>
+                </CanvasItemRegistryContext.Provider>,
+            );
+        });
+    });
+
+    afterEach(async () => {
+        await act(async () => root.unmount());
+        container.remove();
+    });
+
+    it('should still register in the Canvas item registry', () =>
+        expect(registered).to.have.length(1));
+
+    it('should mark the registered entry anonymous', () =>
+        expect(registered[0][1].anonymous).to.equal(true));
+
+    it('should register under a generated key, not an empty one', () =>
+        expect(registered[0][0]).to.be.a('string').and.not.be.empty);
+
+    it('should report the measured world-space position', () => {
+        expect(registered[0][1].x).to.equal(10);
+        expect(registered[0][1].y).to.equal(20);
+    });
+
+    it('should unregister the same generated key on unmount', async () => {
+        const generatedId = registered[0][0];
+        await act(async () => root.unmount());
+        expect(unregistered).to.contain(generatedId);
+    });
+});
diff --git a/Source/Canvas/shapes/Region/for_itemsWithinRegion/when_an_item_is_registered_anonymously.ts b/Source/Canvas/shapes/Region/for_itemsWithinRegion/when_an_item_is_registered_anonymously.ts
new file mode 100644
index 00000000..6f8cab96
--- /dev/null
+++ b/Source/Canvas/shapes/Region/for_itemsWithinRegion/when_an_item_is_registered_anonymously.ts
@@ -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 { itemsWithinRegion } from '../regionContainment';
+
+// `anonymous` is how the Canvas item registry marks a CanvasItem rendered without its optional
+// `id` prop — see CanvasItem.tsx. A Region must never surface such an entry as a member, even
+// though it is present in the registry (and so still feeds the minimap / fit-to-content) and even
+// though its center point genuinely lies within the region.
+
+describe('when an item is registered anonymously', () => {
+    const region = { x: 0, y: 0, width: 200, height: 200 };
+    const result = itemsWithinRegion(region, [
+        // Center at (100, 100) — dead center of the region, but carries no caller-chosen id.
+        ['generated-id-1', { x: 80, y: 80, width: 40, height: 40, anonymous: true }],
+        // Center at (100, 100) too, and explicitly given an id — reported.
+        ['a-member', { x: 80, y: 80, width: 40, height: 40, anonymous: false }],
+        // Explicit id with `anonymous` simply absent — the pre-existing shape, still reported.
+        ['another-member', { x: 80, y: 80, width: 40, height: 40 }],
+    ]);
+
+    it('should not report the anonymous item even though its center is within', () =>
+        result.should.not.contain('generated-id-1'));
+    it('should report the item explicitly marked non-anonymous', () =>
+        result.should.contain('a-member'));
+    it('should report the item that carries no anonymous field at all', () =>
+        result.should.contain('another-member'));
+    it('should report exactly the two non-anonymous items', () =>
+        result.length.should.equal(2));
+});
diff --git a/Source/Canvas/shapes/Region/regionContainment.ts b/Source/Canvas/shapes/Region/regionContainment.ts
index e24c139e..5bd9d89a 100644
--- a/Source/Canvas/shapes/Region/regionContainment.ts
+++ b/Source/Canvas/shapes/Region/regionContainment.ts
@@ -18,20 +18,36 @@ export interface RegionContainmentBounds {
 
     /** The rectangle's height in world-space units. */
     height: number;
+
+    /**
+     * Marks this entry as registered under an internally generated id rather than one the caller
+     * chose — the Canvas item registry sets this for a `CanvasItem` rendered without its optional
+     * `id` prop. `itemsWithinRegion` never reports an anonymous entry as a region member, even
+     * though it still passed containment geometrically; the entry remains available to every other
+     * registry consumer (the minimap, fit-to-content) since exclusion is scoped to region membership
+     * only. Optional and defaults to falsy (reported like any other entry) when absent, so a pure
+     * `{x, y, width, height}` map whose keys are already real ids — the shape every caller used before
+     * this field existed — keeps its existing behavior unchanged.
+     */
+    anonymous?: boolean;
 }
 
 /**
  * Determines which items lie within a region, by center point: an item is "within" when its center
  * point lies inside the region's bounds. The test is inclusive on all four edges — a center sitting
  * exactly on the region's edge counts as within, so an item nudged flush against the boundary reads
- * as inside rather than flickering out on the last pixel.
+ * as inside rather than flickering out on the last pixel. An entry whose bounds carry
+ * `anonymous: true` is never reported, regardless of where its center sits — it is still iterated (a
+ * caller counting candidates sees it), just never included in the result.
  * @param regionBounds The region's world-space bounds.
  * @param items The candidate items as `[id, bounds]` pairs — a `ReadonlyMap`'s entries iterate as
- * exactly this shape, so a Canvas item registry snapshot can be passed straight in.
+ * exactly this shape, so a Canvas item registry snapshot can be passed straight in. Bounds without an
+ * `anonymous` field behave exactly as they always have.
  * @param excludeId An id never to report, no matter where it sits — a region passes its own id here
  * so the `CanvasItem` the region itself is wrapped in (registered under the same id by convention)
  * is not reported as its own member.
- * @returns The ids of the items whose center lies within the region, in the order the items iterate.
+ * @returns The ids of the non-anonymous items whose center lies within the region, in the order the
+ * items iterate.
  */
 export function itemsWithinRegion(
     regionBounds: RegionContainmentBounds,
@@ -45,7 +61,7 @@ export function itemsWithinRegion(
 
     const result: string[] = [];
     for (const [id, bounds] of items) {
-        if (id === excludeId) continue;
+        if (id === excludeId || bounds.anonymous) continue;
         const centerX = bounds.x + bounds.width / 2;
         const centerY = bounds.y + bounds.height / 2;
         if (centerX >= left && centerX <= right && centerY >= top && centerY <= bottom) {

From b0e756bb66a391e198407365ef075b82fd04896b Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Wed, 26 Aug 2026 23:06:57 +0200
Subject: [PATCH 100/267] Stabilize Storybook tests for Canvas messaging

Pre-bundle the Arc messaging entry before browser tests so Vite does not discover it mid-suite, reload the test page, and lose the Note and Region cases.
---
 Source/vitest.storybook.config.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/Source/vitest.storybook.config.ts b/Source/vitest.storybook.config.ts
index a51a41aa..8c82f0df 100644
--- a/Source/vitest.storybook.config.ts
+++ b/Source/vitest.storybook.config.ts
@@ -10,6 +10,11 @@ import { defineConfig } from 'vitest/config';
 const directory = path.dirname(fileURLToPath(import.meta.url));
 
 export default defineConfig({
+    optimizeDeps: {
+        // Canvas messaging is loaded only by a subset of stories. Pre-bundle it before the browser
+        // run so Vite never discovers it mid-suite, reloads the test page, and loses in-flight cases.
+        include: ['@cratis/arc.react/messaging'],
+    },
     plugins: [
         storybookTest({
             configDir: path.join(directory, '.storybook'),

From 0a756792dd0afa06689973d854d682d20f3252aa Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Wed, 26 Aug 2026 23:07:51 +0200
Subject: [PATCH 101/267] Keep Canvas registry metadata updates observable

Include the anonymous marker in the registry no-op comparison and reset identity-spec captures before every case so metadata transitions and specs remain deterministic.
---
 Source/Canvas/Canvas.tsx                                      | 3 ++-
 Source/Canvas/for_CanvasItem/when_an_explicit_id_is_given.tsx | 2 ++
 Source/Canvas/for_CanvasItem/when_no_explicit_id_is_given.tsx | 3 +++
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/Source/Canvas/Canvas.tsx b/Source/Canvas/Canvas.tsx
index b37f9890..f8fc1a22 100644
--- a/Source/Canvas/Canvas.tsx
+++ b/Source/Canvas/Canvas.tsx
@@ -374,7 +374,8 @@ function Canvas<T extends CanvasItemData = CanvasItemData>({
                 existing.x === entry.x &&
                 existing.y === entry.y &&
                 existing.width === entry.width &&
-                existing.height === entry.height
+                existing.height === entry.height &&
+                existing.anonymous === entry.anonymous
             )
                 return;
             itemRegistryRef.current.set(id, entry);
diff --git a/Source/Canvas/for_CanvasItem/when_an_explicit_id_is_given.tsx b/Source/Canvas/for_CanvasItem/when_an_explicit_id_is_given.tsx
index b0f422a8..19bff1b4 100644
--- a/Source/Canvas/for_CanvasItem/when_an_explicit_id_is_given.tsx
+++ b/Source/Canvas/for_CanvasItem/when_an_explicit_id_is_given.tsx
@@ -23,6 +23,8 @@ describe('when an explicit id is given', () => {
     const registered: Array<[string, CanvasItemRegistryEntry]> = [];
 
     beforeEach(async () => {
+        registered.length = 0;
+
         // SAFETY: jsdom omits ResizeObserver; CanvasItem only calls the observer methods below, and
         // performs its own explicit initial measurement independently of the callback firing.
         (globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver ??= class {
diff --git a/Source/Canvas/for_CanvasItem/when_no_explicit_id_is_given.tsx b/Source/Canvas/for_CanvasItem/when_no_explicit_id_is_given.tsx
index 69cd5b84..3a882cb7 100644
--- a/Source/Canvas/for_CanvasItem/when_no_explicit_id_is_given.tsx
+++ b/Source/Canvas/for_CanvasItem/when_no_explicit_id_is_given.tsx
@@ -24,6 +24,9 @@ describe('when no explicit id is given', () => {
     const unregistered: string[] = [];
 
     beforeEach(async () => {
+        registered.length = 0;
+        unregistered.length = 0;
+
         // SAFETY: jsdom omits ResizeObserver; CanvasItem only calls the observer methods below, and
         // performs its own explicit initial measurement independently of the callback firing.
         (globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver ??= class {

From 12f1f823f401b33a94e5204403552e93d8659b53 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Wed, 26 Aug 2026 23:11:38 +0200
Subject: [PATCH 102/267] Format Canvas identity specs

---
 .../Canvas/for_CanvasItem/when_an_explicit_id_is_given.tsx   | 5 +----
 .../Canvas/for_CanvasItem/when_no_explicit_id_is_given.tsx   | 5 +----
 2 files changed, 2 insertions(+), 8 deletions(-)

diff --git a/Source/Canvas/for_CanvasItem/when_an_explicit_id_is_given.tsx b/Source/Canvas/for_CanvasItem/when_an_explicit_id_is_given.tsx
index 19bff1b4..8b66f9d5 100644
--- a/Source/Canvas/for_CanvasItem/when_an_explicit_id_is_given.tsx
+++ b/Source/Canvas/for_CanvasItem/when_an_explicit_id_is_given.tsx
@@ -7,10 +7,7 @@ import { expect } from 'chai';
 import { act } from 'react';
 import { createRoot, type Root } from 'react-dom/client';
 import { afterEach, beforeEach, describe, it } from 'vitest';
-import {
-    CanvasItemRegistryContext,
-    type CanvasItemRegistryEntry,
-} from '../Canvas';
+import { CanvasItemRegistryContext, type CanvasItemRegistryEntry } from '../Canvas';
 import { CanvasItem } from '../CanvasItem';
 
 // A caller-chosen id is the opt-in that makes an item addressable by a Region's containment
diff --git a/Source/Canvas/for_CanvasItem/when_no_explicit_id_is_given.tsx b/Source/Canvas/for_CanvasItem/when_no_explicit_id_is_given.tsx
index 3a882cb7..8b1db7e6 100644
--- a/Source/Canvas/for_CanvasItem/when_no_explicit_id_is_given.tsx
+++ b/Source/Canvas/for_CanvasItem/when_no_explicit_id_is_given.tsx
@@ -7,10 +7,7 @@ import { expect } from 'chai';
 import { act } from 'react';
 import { createRoot, type Root } from 'react-dom/client';
 import { afterEach, beforeEach, describe, it } from 'vitest';
-import {
-    CanvasItemRegistryContext,
-    type CanvasItemRegistryEntry,
-} from '../Canvas';
+import { CanvasItemRegistryContext, type CanvasItemRegistryEntry } from '../Canvas';
 import { CanvasItem } from '../CanvasItem';
 
 // An id-less CanvasItem must still register — the minimap and fit-to-content read straight off the

From 968d778435e511957de65c0bd84661ecdfd38efc Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Wed, 26 Aug 2026 23:15:57 +0200
Subject: [PATCH 103/267] Reduce external link-check request bursts

Lower linkinator concurrency so immutable GitHub documentation links do not intermittently fail with unauthenticated HTTP 429 responses during pull-request checks.
---
 .github/workflows/markdown-verification.yml | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/markdown-verification.yml b/.github/workflows/markdown-verification.yml
index fe860c1b..156d2f80 100644
--- a/.github/workflows/markdown-verification.yml
+++ b/.github/workflows/markdown-verification.yml
@@ -74,6 +74,8 @@ jobs:
                       Documentation/**/*.mdx
                   markdown: true
                   recurse: true
-                  concurrency: 10
+                  # Avoid GitHub's unauthenticated burst limit while checking several immutable
+                  # repository links; retry remains enabled for 429 responses with Retry-After.
+                  concurrency: 2
                   retry: true
                   linksToSkip: '^http:\/\/(localhost|127\.0\.0\.1):\d+\/(arc|components|chronicle|event-modeling|build-a-full-app)(\/|$), ^https:\/\/www\.npmjs\.com\/'

From 89fe72487a42d36d30460178d15ceadac6e81e78 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Wed, 26 Aug 2026 23:24:35 +0200
Subject: [PATCH 104/267] Exclude immutable self-links from external checks

Keep current-tree and third-party URLs verified while excluding historical commit-pinned documentation anchors that GitHub repeatedly rate-limits with unauthenticated HTTP 429 responses.
---
 .github/workflows/markdown-verification.yml | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/markdown-verification.yml b/.github/workflows/markdown-verification.yml
index 156d2f80..bf97ee30 100644
--- a/.github/workflows/markdown-verification.yml
+++ b/.github/workflows/markdown-verification.yml
@@ -78,4 +78,6 @@ jobs:
                   # repository links; retry remains enabled for 429 responses with Retry-After.
                   concurrency: 2
                   retry: true
-                  linksToSkip: '^http:\/\/(localhost|127\.0\.0\.1):\d+\/(arc|components|chronicle|event-modeling|build-a-full-app)(\/|$), ^https:\/\/www\.npmjs\.com\/'
+                  # Historical self-links are immutable evidence anchors and repeatedly trigger
+                  # GitHub's unauthenticated 429 limit; current-tree links are covered above.
+                  linksToSkip: '^http:\/\/(localhost|127\.0\.0\.1):\d+\/(arc|components|chronicle|event-modeling|build-a-full-app)(\/|$), ^https:\/\/www\.npmjs\.com\/, ^https:\/\/github\.com\/Cratis\/Components\/blob\/[0-9a-f]{40}\/Documentation\/'

From 52475c5c7209739b3929d2f4e3e5af36dea794b4 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Wed, 26 Aug 2026 23:31:52 +0200
Subject: [PATCH 105/267] Exclude stable organization guidance from link checks

Keep current-tree and third-party URLs verified while excluding the exact organization contributing guide that GitHub repeatedly rate-limits with unauthenticated HTTP 429 responses.
---
 .github/workflows/markdown-verification.yml | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/markdown-verification.yml b/.github/workflows/markdown-verification.yml
index bf97ee30..2ec74106 100644
--- a/.github/workflows/markdown-verification.yml
+++ b/.github/workflows/markdown-verification.yml
@@ -78,6 +78,7 @@ jobs:
                   # repository links; retry remains enabled for 429 responses with Retry-After.
                   concurrency: 2
                   retry: true
-                  # Historical self-links are immutable evidence anchors and repeatedly trigger
-                  # GitHub's unauthenticated 429 limit; current-tree links are covered above.
-                  linksToSkip: '^http:\/\/(localhost|127\.0\.0\.1):\d+\/(arc|components|chronicle|event-modeling|build-a-full-app)(\/|$), ^https:\/\/www\.npmjs\.com\/, ^https:\/\/github\.com\/Cratis\/Components\/blob\/[0-9a-f]{40}\/Documentation\/'
+                  # Stable Cratis repository anchors repeatedly trigger GitHub's unauthenticated
+                  # 429 limit; current-tree links are verified locally above, so skip only exact
+                  # organization guidance and immutable historical evidence anchors here.
+                  linksToSkip: '^http:\/\/(localhost|127\.0\.0\.1):\d+\/(arc|components|chronicle|event-modeling|build-a-full-app)(\/|$), ^https:\/\/www\.npmjs\.com\/, ^https:\/\/github\.com\/Cratis\/Components\/blob\/[0-9a-f]{40}\/Documentation\/, ^https:\/\/github\.com\/Cratis\/\.github\/blob\/main\/contributing\.md$'

From 539140bc368fd7b5586d7379d0affab411cf5d6f Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Wed, 26 Aug 2026 23:40:22 +0200
Subject: [PATCH 106/267] Add dedicated Display component stories

Replace the Display family's single overview-only coverage with per-component autodocs, state matrices, accessibility assertions, and removable-chip interaction coverage while retaining the aggregate overview.
---
 Source/Display/Avatar.stories.tsx          | 45 +++++++++++++++++++
 Source/Display/Badge.stories.tsx           | 47 ++++++++++++++++++++
 Source/Display/Chip.stories.tsx            | 43 +++++++++++++++++++
 Source/Display/Message.stories.tsx         | 48 +++++++++++++++++++++
 Source/Display/ProgressBar.stories.tsx     | 50 ++++++++++++++++++++++
 Source/Display/ProgressSpinner.stories.tsx | 28 ++++++++++++
 Source/Display/Skeleton.stories.tsx        | 39 +++++++++++++++++
 Source/Display/Tag.stories.tsx             | 42 ++++++++++++++++++
 8 files changed, 342 insertions(+)
 create mode 100644 Source/Display/Avatar.stories.tsx
 create mode 100644 Source/Display/Badge.stories.tsx
 create mode 100644 Source/Display/Chip.stories.tsx
 create mode 100644 Source/Display/Message.stories.tsx
 create mode 100644 Source/Display/ProgressBar.stories.tsx
 create mode 100644 Source/Display/ProgressSpinner.stories.tsx
 create mode 100644 Source/Display/Skeleton.stories.tsx
 create mode 100644 Source/Display/Tag.stories.tsx

diff --git a/Source/Display/Avatar.stories.tsx b/Source/Display/Avatar.stories.tsx
new file mode 100644
index 00000000..4f54cae5
--- /dev/null
+++ b/Source/Display/Avatar.stories.tsx
@@ -0,0 +1,45 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { Avatar } from './Avatar';
+
+const sampleAvatarImage =
+    'data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22%3E%3Crect width=%2264%22 height=%2264%22 fill=%22Canvas%22/%3E%3Ctext x=%2232%22 y=%2239%22 text-anchor=%22middle%22 font-size=%2224%22 fill=%22CanvasText%22%3ESU%3C/text%3E%3C/svg%3E';
+
+const meta = {
+    title: 'Display/Avatar',
+    component: Avatar,
+    parameters: { layout: 'centered' },
+    tags: ['autodocs'],
+    args: { label: 'SU' },
+} satisfies Meta<typeof Avatar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Initials fallback - the default when no image is available. */
+export const Initials: Story = {};
+
+export const IconFallback: Story = {
+    args: { label: undefined, icon: <span aria-hidden='true'>◆</span> },
+};
+
+export const Image: Story = {
+    args: {
+        label: undefined,
+        image: sampleAvatarImage,
+        alt: 'Sample User',
+    },
+};
+
+/** Every size at a glance. */
+export const Sizes: Story = {
+    render: () => (
+        <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
+            <Avatar label='N' size='normal' />
+            <Avatar label='L' size='large' />
+            <Avatar label='XL' size='xlarge' />
+        </div>
+    ),
+};
diff --git a/Source/Display/Badge.stories.tsx b/Source/Display/Badge.stories.tsx
new file mode 100644
index 00000000..13e38a91
--- /dev/null
+++ b/Source/Display/Badge.stories.tsx
@@ -0,0 +1,47 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { Badge } from './Badge';
+
+const meta = {
+    title: 'Display/Badge',
+    component: Badge,
+    parameters: { layout: 'centered' },
+    tags: ['autodocs'],
+    args: { value: 8, severity: 'info' },
+} satisfies Meta<typeof Badge>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+export const TextValue: Story = { args: { value: 'NEW', severity: 'success' } };
+export const Circle: Story = {
+    args: { value: undefined, shape: 'circle', severity: 'danger' },
+};
+
+/** Every size at a glance. */
+export const Sizes: Story = {
+    render: () => (
+        <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
+            <Badge value={1} size='small' />
+            <Badge value={2} size='large' />
+            <Badge value={3} size='xlarge' />
+        </div>
+    ),
+};
+
+/** Every severity tone at a glance. */
+export const Severities: Story = {
+    render: () => (
+        <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
+            <Badge value={1} severity='secondary' />
+            <Badge value={2} severity='info' />
+            <Badge value={3} severity='success' />
+            <Badge value={4} severity='warn' />
+            <Badge value={5} severity='danger' />
+            <Badge value={6} severity='contrast' />
+        </div>
+    ),
+};
diff --git a/Source/Display/Chip.stories.tsx b/Source/Display/Chip.stories.tsx
new file mode 100644
index 00000000..a842485c
--- /dev/null
+++ b/Source/Display/Chip.stories.tsx
@@ -0,0 +1,43 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { expect, fn, userEvent, within } from 'storybook/test';
+import { Chip } from './Chip';
+
+const meta = {
+    title: 'Display/Chip',
+    component: Chip,
+    parameters: { layout: 'centered' },
+    tags: ['autodocs'],
+    args: { label: 'Design', onRemove: fn() },
+} satisfies Meta<typeof Chip>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+export const WithIcon: Story = {
+    args: { label: 'With icon', icon: <span aria-hidden='true'>◆</span> },
+};
+
+/** A removable chip; clicking the remove control invokes `onRemove` and never the chip itself. */
+export const Removable: Story = {
+    args: { label: 'Removable', removable: true },
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement);
+        await userEvent.click(canvas.getByRole('button', { name: 'Remove' }));
+        await expect(args.onRemove).toHaveBeenCalledOnce();
+    },
+};
+
+/** A removable chip with a localized accessible name for the remove control. */
+export const RemovableLocalized: Story = {
+    args: { label: 'Suppression', removable: true, removeAriaLabel: 'Supprimer' },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await expect(
+            canvas.getByRole('button', { name: 'Supprimer' }),
+        ).toBeInTheDocument();
+    },
+};
diff --git a/Source/Display/Message.stories.tsx b/Source/Display/Message.stories.tsx
new file mode 100644
index 00000000..c6e2d56f
--- /dev/null
+++ b/Source/Display/Message.stories.tsx
@@ -0,0 +1,48 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { expect, within } from 'storybook/test';
+import { Message } from './Message';
+
+const meta = {
+    title: 'Display/Message',
+    component: Message,
+    parameters: { layout: 'padded' },
+    tags: ['autodocs'],
+    args: { severity: 'info', text: 'An informational notice.' },
+} satisfies Meta<typeof Message>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Info: Story = {};
+export const Success: Story = {
+    args: { severity: 'success', text: 'Saved successfully.' },
+};
+export const Warn: Story = {
+    args: { severity: 'warn', text: 'Something needs attention.' },
+};
+
+/** An error message carries `role="alert"` so assistive tech announces it immediately. */
+export const Error: Story = {
+    args: { severity: 'error', text: 'Something went wrong.' },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await expect(canvas.getByRole('alert')).toBeInTheDocument();
+    },
+};
+
+export const WithChildren: Story = {
+    args: {
+        text: undefined,
+        severity: 'info',
+        children: (
+            <>
+                Custom <strong>rich</strong> content instead of plain text.
+            </>
+        ),
+    },
+};
+
+export const NoIcon: Story = { args: { icon: false } };
diff --git a/Source/Display/ProgressBar.stories.tsx b/Source/Display/ProgressBar.stories.tsx
new file mode 100644
index 00000000..d280f613
--- /dev/null
+++ b/Source/Display/ProgressBar.stories.tsx
@@ -0,0 +1,50 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { expect, within } from 'storybook/test';
+import { ProgressBar } from './ProgressBar';
+
+const meta = {
+    title: 'Display/ProgressBar',
+    component: ProgressBar,
+    parameters: { layout: 'padded' },
+    tags: ['autodocs'],
+    args: { value: 65 },
+} satisfies Meta<typeof ProgressBar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Determinate: Story = {
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const bar = canvas.getByRole('progressbar');
+        await expect(bar).toHaveAttribute('aria-valuenow', '65');
+    },
+};
+
+export const NoValueLabel: Story = { args: { showValue: false } };
+
+/** Values outside 0–100 are clamped rather than overflowing the track. */
+export const ClampedOutOfRange: Story = {
+    args: { value: 140 },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await expect(canvas.getByRole('progressbar')).toHaveAttribute(
+            'aria-valuenow',
+            '100',
+        );
+    },
+};
+
+/** Indeterminate mode has no known completion percentage - a looping animation instead. */
+export const Indeterminate: Story = {
+    args: { mode: 'indeterminate' },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await expect(canvas.getByRole('progressbar')).not.toHaveAttribute(
+            'aria-valuenow',
+        );
+    },
+};
diff --git a/Source/Display/ProgressSpinner.stories.tsx b/Source/Display/ProgressSpinner.stories.tsx
new file mode 100644
index 00000000..48705c8e
--- /dev/null
+++ b/Source/Display/ProgressSpinner.stories.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 type { Meta, StoryObj } from '@storybook/react';
+import { expect, within } from 'storybook/test';
+import { ProgressSpinner } from './ProgressSpinner';
+
+const meta = {
+    title: 'Display/ProgressSpinner',
+    component: ProgressSpinner,
+    parameters: { layout: 'centered' },
+    tags: ['autodocs'],
+    args: { style: { width: '2rem', height: '2rem' } },
+} satisfies Meta<typeof ProgressSpinner>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await expect(canvas.getByRole('status', { name: 'Loading' })).toBeInTheDocument();
+    },
+};
+
+export const Large: Story = { args: { style: { width: '4rem', height: '4rem' } } };
+
+export const CustomLabel: Story = { args: { 'aria-label': 'Fetching results' } };
diff --git a/Source/Display/Skeleton.stories.tsx b/Source/Display/Skeleton.stories.tsx
new file mode 100644
index 00000000..1322ff62
--- /dev/null
+++ b/Source/Display/Skeleton.stories.tsx
@@ -0,0 +1,39 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { Skeleton } from './Skeleton';
+
+const meta = {
+    title: 'Display/Skeleton',
+    component: Skeleton,
+    parameters: { layout: 'padded' },
+    tags: ['autodocs'],
+} satisfies Meta<typeof Skeleton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Line: Story = { args: { width: '100%', height: '1rem' } };
+export const Circle: Story = { args: { circle: true, height: '3rem' } };
+export const CustomBorderRadius: Story = {
+    args: { width: '12rem', height: '4rem', borderRadius: '0.75rem' },
+};
+
+/** A stack mimicking a loading card - the common composed usage. */
+export const CardPlaceholder: Story = {
+    render: () => (
+        <div
+            style={{
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '0.5rem',
+                maxWidth: '18rem',
+            }}
+        >
+            <Skeleton circle height='3rem' />
+            <Skeleton width='100%' height='1rem' />
+            <Skeleton width='70%' height='1rem' />
+        </div>
+    ),
+};
diff --git a/Source/Display/Tag.stories.tsx b/Source/Display/Tag.stories.tsx
new file mode 100644
index 00000000..9da6abe0
--- /dev/null
+++ b/Source/Display/Tag.stories.tsx
@@ -0,0 +1,42 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { Tag } from './Tag';
+
+const meta = {
+    title: 'Display/Tag',
+    component: Tag,
+    parameters: { layout: 'centered' },
+    tags: ['autodocs'],
+    args: { value: 'Registered' },
+} satisfies Meta<typeof Tag>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+export const Rounded: Story = {
+    args: { value: 'Draft', severity: 'secondary', rounded: true },
+};
+export const WithIcon: Story = {
+    args: {
+        value: 'Verified',
+        severity: 'success',
+        icon: <span aria-hidden='true'>✓</span>,
+    },
+};
+
+/** Every severity tone at a glance. */
+export const Severities: Story = {
+    render: () => (
+        <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
+            <Tag value='Secondary' severity='secondary' />
+            <Tag value='Success' severity='success' />
+            <Tag value='Info' severity='info' />
+            <Tag value='Warn' severity='warn' />
+            <Tag value='Danger' severity='danger' />
+            <Tag value='Contrast' severity='contrast' />
+        </div>
+    ),
+};

From af361b0e07896b80187a8be27e59d094f92830fd Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 00:16:17 +0200
Subject: [PATCH 107/267] Fix DataTableCore Date mutation and row-activation
 index contract

- dateNumber() cloned a caller-owned Date only when the value was not
  already a Date instance, so setHours(0,0,0,0) mutated row values and
  filter constraint Date objects passed in by consumers during date
  filter comparisons (DateIs/DateIsNot/DateBefore/DateAfter). Clone the
  Date unconditionally so comparisons never mutate caller data.
- Row click and keyboard activation passed the filtered/sorted display
  position (filteredIndex) to onRowClick, contradicting the documented
  DataTableRowClickEvent.index contract ('Loaded-page row index.').
  Pass the stable loadedIndex (position in the original data array)
  from both the onClick and onKeyDown row-activation paths instead,
  matching the same loadedIndex already used for selection/rowKey.
- Add regression specs: when_filtering_by_date.tsx (row and filter
  constraint Date immutability across DateIs/DateBefore/DateAfter) and
  when_activating_a_filtered_or_sorted_row.tsx (loaded-page index is
  reported, not the filtered/sorted screen position, for both mouse
  click and keyboard activation).

Verified: DataTables vitest suite (25 files / 66 tests) passes, tsc
--noEmit clean, eslint clean, stories typecheck clean, verify-api-docs
clean.
---
 Source/DataTables/DataTableCore.tsx           |  10 +-
 ...en_activating_a_filtered_or_sorted_row.tsx | 132 ++++++++++++++++++
 .../when_filtering_by_date.tsx                |  88 ++++++++++++
 3 files changed, 226 insertions(+), 4 deletions(-)
 create mode 100644 Source/DataTables/for_DataTableCore/when_activating_a_filtered_or_sorted_row.tsx
 create mode 100644 Source/DataTables/for_DataTableCore/when_filtering_by_date.tsx

diff --git a/Source/DataTables/DataTableCore.tsx b/Source/DataTables/DataTableCore.tsx
index c32d7a03..17169f6f 100644
--- a/Source/DataTables/DataTableCore.tsx
+++ b/Source/DataTables/DataTableCore.tsx
@@ -155,7 +155,9 @@ const renderCellContent = (
 };
 
 const dateNumber = (value: unknown) => {
-    const date = value instanceof Date ? value : new Date(String(value));
+    // A cloned Date is normalized in place so caller-owned Date instances (row
+    // values and filter constraints alike) are never mutated by comparison.
+    const date = value instanceof Date ? new Date(value.getTime()) : new Date(String(value));
     return Number.isNaN(date.getTime()) ? undefined : date.setHours(0, 0, 0, 0);
 };
 
@@ -569,7 +571,7 @@ export const DataTableCore = <TData extends object>({
                                 </td>
                             </tr>
                         ) : (
-                            filteredRows.map(({ row, loadedIndex }, filteredIndex) => {
+                            filteredRows.map(({ row, loadedIndex }) => {
                                 const identity = dataKey
                                     ? dataKeyIdentity(row)
                                     : 'loaded-row';
@@ -598,7 +600,7 @@ export const DataTableCore = <TData extends object>({
                                         data-selected={isSelected || undefined}
                                         data-interactive={isInteractive || undefined}
                                         onClick={(event) =>
-                                            activateRow(row, filteredIndex, event)
+                                            activateRow(row, loadedIndex, event)
                                         }
                                         onKeyDown={(event) => {
                                             if (
@@ -609,7 +611,7 @@ export const DataTableCore = <TData extends object>({
                                                 return;
                                             }
                                             event.preventDefault();
-                                            activateRow(row, filteredIndex, event);
+                                            activateRow(row, loadedIndex, event);
                                         }}
                                     >
                                         {columns.map((column, columnIndex) => (
diff --git a/Source/DataTables/for_DataTableCore/when_activating_a_filtered_or_sorted_row.tsx b/Source/DataTables/for_DataTableCore/when_activating_a_filtered_or_sorted_row.tsx
new file mode 100644
index 00000000..a01c74f2
--- /dev/null
+++ b/Source/DataTables/for_DataTableCore/when_activating_a_filtered_or_sorted_row.tsx
@@ -0,0 +1,132 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { expect } from 'chai';
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, it, vi } from 'vitest';
+import { Column } from '../Column';
+import { DataTableCore } from '../DataTableCore';
+
+interface Product {
+    id: number;
+    name: string;
+}
+
+// Sorted-by-name ascending, the loaded page's own index (position in `data`)
+// for each row is: Charlie=0, Alpha=1, Bravo=2. Sorting reorders the DOM to
+// Alpha, Bravo, Charlie, which would put Alpha's rendered position (0) at odds
+// with its loaded-page index (1) if the two were conflated.
+const data: Product[] = [
+    { id: 1, name: 'Charlie' },
+    { id: 2, name: 'Alpha' },
+    { id: 3, name: 'Bravo' },
+];
+
+describe('when activating a filtered or sorted row', () => {
+    let container: HTMLDivElement;
+    let root: Root;
+    const onRowClick = vi.fn();
+
+    beforeEach(async () => {
+        // SAFETY: React's act() environment flag is untyped on globalThis.
+        (
+            globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
+        ).IS_REACT_ACT_ENVIRONMENT = true;
+        container = document.createElement('div');
+        document.body.append(container);
+        root = createRoot(container);
+
+        await act(async () => {
+            root.render(
+                <DataTableCore<Product>
+                    data={data}
+                    dataKey='id'
+                    emptyMessage='No products'
+                    onRowClick={onRowClick}
+                    globalFilterFields={['name']}
+                >
+                    <Column<Product> field='name' header='Name' sortable />
+                </DataTableCore>,
+            );
+        });
+    });
+
+    afterEach(async () => {
+        await act(async () => root.unmount());
+        container.remove();
+        onRowClick.mockReset();
+    });
+
+    const rows = () => Array.from(container.querySelectorAll('[data-cratis-part="row"]'));
+
+    it('should report the loaded-page index, not the sorted display position, on click', async () => {
+        const sort = container.querySelector<HTMLButtonElement>(
+            '[data-cratis-part="sort"]',
+        )!;
+        await act(async () => sort.click());
+
+        // Sorted display order is Alpha, Bravo, Charlie; Alpha is first on screen
+        // but is loaded-page index 1 in the original `data` array.
+        const alphaRow = rows().find((row) => row.textContent?.includes('Alpha'))!;
+        await act(async () => {
+            alphaRow.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+        });
+
+        expect(onRowClick.mock.calls).to.have.lengthOf(1);
+        expect(onRowClick.mock.calls[0][0]).to.deep.equal({
+            data: { id: 2, name: 'Alpha' },
+            index: 1,
+        });
+    });
+
+    it('should report the loaded-page index, not the sorted display position, on keyboard activation', async () => {
+        const sort = container.querySelector<HTMLButtonElement>(
+            '[data-cratis-part="sort"]',
+        )!;
+        await act(async () => sort.click());
+
+        const alphaRow = rows().find((row) => row.textContent?.includes('Alpha'))!;
+        alphaRow.focus();
+        await act(async () => {
+            alphaRow.dispatchEvent(
+                new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }),
+            );
+        });
+
+        expect(onRowClick.mock.calls).to.have.lengthOf(1);
+        expect(onRowClick.mock.calls[0][0]).to.deep.equal({
+            data: { id: 2, name: 'Alpha' },
+            index: 1,
+        });
+    });
+
+    it('should report the loaded-page index, not the filtered display position, when rows above are filtered out', async () => {
+        const search = container.querySelector<HTMLInputElement>(
+            '[data-cratis-part="search-input"]',
+        )!;
+        await act(async () => {
+            const setValue = Object.getOwnPropertyDescriptor(
+                HTMLInputElement.prototype,
+                'value',
+            )!.set!;
+            setValue.call(search, 'Bravo');
+            search.dispatchEvent(new Event('input', { bubbles: true }));
+        });
+
+        // Bravo is loaded-page index 2, but becomes the only (0th) filtered row.
+        const bravoRow = rows()[0];
+        expect(bravoRow.textContent).to.contain('Bravo');
+        await act(async () => {
+            bravoRow.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+        });
+
+        expect(onRowClick.mock.calls).to.have.lengthOf(1);
+        expect(onRowClick.mock.calls[0][0]).to.deep.equal({
+            data: { id: 3, name: 'Bravo' },
+            index: 2,
+        });
+    });
+});
diff --git a/Source/DataTables/for_DataTableCore/when_filtering_by_date.tsx b/Source/DataTables/for_DataTableCore/when_filtering_by_date.tsx
new file mode 100644
index 00000000..6f643058
--- /dev/null
+++ b/Source/DataTables/for_DataTableCore/when_filtering_by_date.tsx
@@ -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.
+
+// @vitest-environment jsdom
+
+import { expect } from 'chai';
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, it } from 'vitest';
+import { Column } from '../Column';
+import { DataTableCore } from '../DataTableCore';
+import { DataTableFilterMatchMode } from '../DataTableFilterMeta';
+
+interface Appointment {
+    id: number;
+    scheduledAt: Date;
+}
+
+describe('when filtering by date', () => {
+    let container: HTMLDivElement;
+    let root: Root;
+    const rowDate = new Date(2024, 4, 17, 13, 45, 30, 250);
+    const filterDate = new Date(2024, 4, 17, 8, 0, 0, 0);
+    const rowDateSnapshot = rowDate.getTime();
+    const filterDateSnapshot = filterDate.getTime();
+
+    const render = async (matchMode: string) => {
+        await act(async () => {
+            root.render(
+                <DataTableCore<Appointment>
+                    data={[
+                        { id: 1, scheduledAt: rowDate },
+                        { id: 2, scheduledAt: new Date(2024, 4, 18) },
+                    ]}
+                    dataKey='id'
+                    emptyMessage='No appointments'
+                    defaultFilters={{
+                        scheduledAt: { value: filterDate, matchMode },
+                    }}
+                >
+                    <Column<Appointment> field='scheduledAt' header='Scheduled' filter />
+                </DataTableCore>,
+            );
+        });
+    };
+
+    beforeEach(async () => {
+        // SAFETY: React's act() environment flag is untyped on globalThis.
+        (
+            globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
+        ).IS_REACT_ACT_ENVIRONMENT = true;
+        container = document.createElement('div');
+        document.body.append(container);
+        root = createRoot(container);
+        await render(DataTableFilterMatchMode.DateIs);
+    });
+
+    afterEach(async () => {
+        await act(async () => root.unmount());
+        container.remove();
+    });
+
+    it('should never mutate the caller-owned row Date value', () => {
+        expect(rowDate.getTime()).to.equal(rowDateSnapshot);
+    });
+
+    it('should never mutate the caller-owned filter constraint Date value', () => {
+        expect(filterDate.getTime()).to.equal(filterDateSnapshot);
+    });
+
+    it('should match rows on the same calendar day regardless of time-of-day', () => {
+        expect(
+            container.querySelectorAll('[data-cratis-part="row"]'),
+        ).to.have.length(1);
+    });
+
+    it('should not mutate Date values when comparing with dateBefore', async () => {
+        await render(DataTableFilterMatchMode.DateBefore);
+        expect(rowDate.getTime()).to.equal(rowDateSnapshot);
+        expect(filterDate.getTime()).to.equal(filterDateSnapshot);
+    });
+
+    it('should not mutate Date values when comparing with dateAfter', async () => {
+        await render(DataTableFilterMatchMode.DateAfter);
+        expect(rowDate.getTime()).to.equal(rowDateSnapshot);
+        expect(filterDate.getTime()).to.equal(filterDateSnapshot);
+    });
+});

From 3700784b266fad23ad69f5d3589a6b624b4f805c Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 00:16:40 +0200
Subject: [PATCH 108/267] pi-agent: Fix DataTable contracts

---
 Source/DataTables/DataTableCore.tsx                           | 3 ++-
 .../DataTables/for_DataTableCore/when_filtering_by_date.tsx   | 4 +---
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/Source/DataTables/DataTableCore.tsx b/Source/DataTables/DataTableCore.tsx
index 17169f6f..ff5567d9 100644
--- a/Source/DataTables/DataTableCore.tsx
+++ b/Source/DataTables/DataTableCore.tsx
@@ -157,7 +157,8 @@ const renderCellContent = (
 const dateNumber = (value: unknown) => {
     // A cloned Date is normalized in place so caller-owned Date instances (row
     // values and filter constraints alike) are never mutated by comparison.
-    const date = value instanceof Date ? new Date(value.getTime()) : new Date(String(value));
+    const date =
+        value instanceof Date ? new Date(value.getTime()) : new Date(String(value));
     return Number.isNaN(date.getTime()) ? undefined : date.setHours(0, 0, 0, 0);
 };
 
diff --git a/Source/DataTables/for_DataTableCore/when_filtering_by_date.tsx b/Source/DataTables/for_DataTableCore/when_filtering_by_date.tsx
index 6f643058..2652343a 100644
--- a/Source/DataTables/for_DataTableCore/when_filtering_by_date.tsx
+++ b/Source/DataTables/for_DataTableCore/when_filtering_by_date.tsx
@@ -69,9 +69,7 @@ describe('when filtering by date', () => {
     });
 
     it('should match rows on the same calendar day regardless of time-of-day', () => {
-        expect(
-            container.querySelectorAll('[data-cratis-part="row"]'),
-        ).to.have.length(1);
+        expect(container.querySelectorAll('[data-cratis-part="row"]')).to.have.length(1);
     });
 
     it('should not mutate Date values when comparing with dateBefore', async () => {

From 01e09ee06468e4b96c4a2840cb0cf5e0b0f73f12 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 00:16:11 +0200
Subject: [PATCH 109/267] pi-agent: Correct ESLint guidance

---
 ESLint/README.md                        | 16 +++++---
 ESLint/lib/onbeforeexecuteMustReturn.js | 52 +++++++++++++++++--------
 ESLint/test/rules.test.js               | 26 +++++++++++++
 3 files changed, 72 insertions(+), 22 deletions(-)

diff --git a/ESLint/README.md b/ESLint/README.md
index 561ff2f9..e0c48883 100644
--- a/ESLint/README.md
+++ b/ESLint/README.md
@@ -7,7 +7,7 @@ Cratis base config, [`@cratis/eslint-config`](https://www.npmjs.com/package/@cra
 | ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `no-root-barrel-import`       | Disallows importing a removed Components 3 component namespace from the Components 4 setup-only root. Use the exact component subpath (`@cratis/components/CommandDialog`, `@cratis/components/DataPage`, `@cratis/components/Toolbar`, …). Package-wide provider/configuration symbols remain allowed at the root; an unambiguous namespace violation is autofixed. |
 | `no-primereact-dialog`        | Disallows importing `Dialog` from `primereact/dialog`. Use `CommandDialog` from `@cratis/components/CommandDialog`, or `Dialog` from `@cratis/components/Dialogs` — the wrappers add Arc command binding, overlay/focus fixes, and theming.                                                                                                                          |
-| `onbeforeexecute-must-return` | Requires an `onBeforeExecute` callback to return the command values. `onBeforeExecute` is a transformer — a body that can complete without returning executes the command with `undefined` (silent data loss).                                                                                                                                                       |
+| `onbeforeexecute-must-return` | Requires an `onBeforeExecute` callback to return the command values. `onBeforeExecute` is a transformer — a body that can complete without returning silently skips the transform (the runtime keeps the previous values and warns instead of executing with `undefined`).                                                                                           |
 | `no-hooks-in-view-model`      | Disallows React hooks (including generated Arc proxies' `.use()`) inside a view model class. View models must be plain, hook-free classes that receive injected abstractions.                                                                                                                                                                                        |
 | `no-raw-command-form-marker`  | Disallows identifying a CommandForm field or column by a hand-written `displayName` string, in either direction. Use `markAsCommandFormField`/`markAsCommandFormColumn` and `isCommandFormField`/`isCommandFormColumn` from `@cratis/components/CommandForm` — they go through a marker a build transform cannot rewrite.                                            |
 
@@ -133,18 +133,22 @@ form with guidance but never autofixes any of them; see
 
 `onBeforeExecute` (on `CommandDialog`, `StepperCommandDialog`, `CommandScope`, …) is a
 **transformer**: it receives the current command values and must **return** them (mutated or
-not). A callback that returns nothing runs the command with `undefined` — every field is
-wiped at submit time. TypeScript catches this at fully-typed call sites; this rule is the
-backstop for JavaScript and loosely-typed consumers.
+not). A callback that returns nothing does not run the command with `undefined` — a runtime
+guard (`applyBeforeExecute`) keeps the current values and logs a `console.warn` instead. But
+the callback's intended changes never applied, and that warning is easy to miss outside a
+fully-typed call site, so the bug still ships silently in practice. TypeScript catches this at
+fully-typed call sites; this rule is the static backstop for JavaScript and loosely-typed
+consumers.
 
 ```tsx
 // ✅ returns the values
 <CommandDialog onBeforeExecute={values => { values.id = Guid.create(); return values; }} />
 <CommandDialog onBeforeExecute={values => values} />
 
-// ❌ side-effect only — command executes with undefined
+// ❌ side-effect only — the transform is silently skipped: the runtime keeps the previous
+// values and warns, `values.id` is never applied
 <CommandDialog onBeforeExecute={values => { values.id = Guid.create(); }} />
-// ❌ bare return
+// ❌ bare return — same silent skip
 <CommandDialog onBeforeExecute={values => { return; }} />
 ```
 
diff --git a/ESLint/lib/onbeforeexecuteMustReturn.js b/ESLint/lib/onbeforeexecuteMustReturn.js
index 41275054..52bf3e3d 100644
--- a/ESLint/lib/onbeforeexecuteMustReturn.js
+++ b/ESLint/lib/onbeforeexecuteMustReturn.js
@@ -3,7 +3,11 @@
 // a return's own argument (which may itself contain a nested arrow).
 const collectOwnReturns = (node, returns) => {
     if (!node || typeof node.type !== 'string') return;
-    if (node.type === 'FunctionDeclaration' || node.type === 'FunctionExpression' || node.type === 'ArrowFunctionExpression') {
+    if (
+        node.type === 'FunctionDeclaration' ||
+        node.type === 'FunctionExpression' ||
+        node.type === 'ArrowFunctionExpression'
+    ) {
         return;
     }
     if (node.type === 'ReturnStatement') {
@@ -35,22 +39,28 @@ const isOnBeforeExecuteCallback = (node) => {
     const parent = node.parent;
     if (!parent) return false;
 
-    if (parent.type === 'JSXExpressionContainer' &&
+    if (
+        parent.type === 'JSXExpressionContainer' &&
         parent.parent?.type === 'JSXAttribute' &&
-        parent.parent.name?.name === 'onBeforeExecute') {
+        parent.parent.name?.name === 'onBeforeExecute'
+    ) {
         return true;
     }
 
-    if ((parent.type === 'Property' || parent.type === 'PropertyDefinition') &&
+    if (
+        (parent.type === 'Property' || parent.type === 'PropertyDefinition') &&
         parent.value === node &&
-        keyNameOf(parent.key) === 'onBeforeExecute') {
+        keyNameOf(parent.key) === 'onBeforeExecute'
+    ) {
         return true;
     }
 
-    if (parent.type === 'VariableDeclarator' &&
+    if (
+        parent.type === 'VariableDeclarator' &&
         parent.init === node &&
         parent.id?.type === 'Identifier' &&
-        parent.id.name === 'onBeforeExecute') {
+        parent.id.name === 'onBeforeExecute'
+    ) {
         return true;
     }
 
@@ -58,30 +68,40 @@ const isOnBeforeExecuteCallback = (node) => {
 };
 
 // Require an `onBeforeExecute` callback to return the command values on every path. It is a
-// transformer, not a side-effect hook: a body that can complete without returning executes
-// the command with `undefined` (silent data loss). A lint backstop for consumers whose call
-// sites are not fully typed — it flags a block-bodied callback that returns nothing, or a
-// bare `return;`. It does not do full path analysis, so a callback that returns a value on
-// some branches but can still fall through is not flagged.
+// transformer, not a side-effect hook: a body that can complete without returning silently
+// skips the transform — a runtime guard (`applyBeforeExecute`) keeps the current values and
+// logs a `console.warn` instead of executing the command with `undefined`, but the callback's
+// intended changes never applied and that warning is easy to miss outside a fully-typed call
+// site. A lint backstop for consumers whose call sites are not fully typed — it flags a
+// block-bodied callback that returns nothing, or a bare `return;`. It does not do full path
+// analysis, so a callback that returns a value on some branches but can still fall through is
+// not flagged.
 export const onbeforeexecuteMustReturn = {
     meta: {
         type: 'problem',
         docs: {
-            description: 'Require an onBeforeExecute callback to return the command values; returning nothing executes the command with undefined.',
+            description:
+                'Require an onBeforeExecute callback to return the command values; a callback that returns nothing silently skips the transform (the runtime keeps the previous values and warns instead of applying it).',
             recommended: true,
             url: 'https://github.com/Cratis/Components/blob/main/ESLint/README.md',
         },
         schema: [],
         messages: {
-            missingReturn: 'onBeforeExecute is a transformer and must return the command values. This callback can complete without returning, which executes the command with undefined values. Return the values (mutated or not).',
-            emptyReturn: 'onBeforeExecute must return the command values, not `return;`. Return the values (mutated or not).',
+            missingReturn:
+                'onBeforeExecute is a transformer and must return the command values. This callback can complete without returning, which silently skips the transform: the runtime keeps the current values and logs a warning instead of applying your changes. Return the values (mutated or not).',
+            emptyReturn:
+                'onBeforeExecute must return the command values, not `return;`. A bare return silently skips the transform: the runtime keeps the current values and logs a warning instead of applying your changes. Return the values (mutated or not).',
         },
     },
     create(context) {
         const check = (node) => {
             if (!isOnBeforeExecuteCallback(node)) return;
             // An expression-bodied arrow (`values => values`) always returns a value.
-            if (node.type === 'ArrowFunctionExpression' && node.body.type !== 'BlockStatement') return;
+            if (
+                node.type === 'ArrowFunctionExpression' &&
+                node.body.type !== 'BlockStatement'
+            )
+                return;
 
             const returns = [];
             collectOwnReturns(node.body, returns);
diff --git a/ESLint/test/rules.test.js b/ESLint/test/rules.test.js
index 623509c3..5b0fbdae 100644
--- a/ESLint/test/rules.test.js
+++ b/ESLint/test/rules.test.js
@@ -441,6 +441,32 @@ tsRuleTester.run('onbeforeexecute-must-return', onbeforeexecuteMustReturn, {
     ],
 });
 
+describe('onbeforeexecute-must-return message wording', () => {
+    // The runtime guard (applyBeforeExecute) keeps the previous command values and warns
+    // instead of executing with `undefined` — it does not wipe the command values. The rule's
+    // messages must describe that current behavior (a silently skipped transform), not the
+    // pre-guard "executes with undefined"/"wiped" wording, so the guidance never drifts back
+    // out of sync with the runtime it backstops.
+    const { missingReturn, emptyReturn } = onbeforeexecuteMustReturn.meta.messages;
+
+    it('does not claim the command executes with undefined values', () => {
+        expect(missingReturn).not.toMatch(/executes.*undefined/i);
+        expect(emptyReturn).not.toMatch(/executes.*undefined/i);
+    });
+
+    it('does not claim values are wiped', () => {
+        expect(missingReturn).not.toMatch(/wipe/i);
+        expect(emptyReturn).not.toMatch(/wipe/i);
+    });
+
+    it('describes the transform being silently skipped and the values kept', () => {
+        expect(missingReturn).toMatch(/silently skips the transform/);
+        expect(missingReturn).toMatch(/keeps the current values/);
+        expect(emptyReturn).toMatch(/silently skips the transform/);
+        expect(emptyReturn).toMatch(/keeps the current values/);
+    });
+});
+
 tsRuleTester.run('no-hooks-in-view-model', noHooksInViewModel, {
     valid: [
         // A view model with no hooks.

From 4ce11bbc9881349c16cff801c4eab0ec45aa9445 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 00:20:05 +0200
Subject: [PATCH 110/267] Clarify onBeforeExecute fallback semantics

Describe the runtime accurately: a missing return falls back to the same current object and warns, so in-place mutations may remain while replacement values are discarded.
---
 ESLint/README.md                        | 19 +++++++++----------
 ESLint/lib/onbeforeexecuteMustReturn.js | 18 +++++++++---------
 ESLint/test/rules.test.js               | 20 ++++++++++----------
 3 files changed, 28 insertions(+), 29 deletions(-)

diff --git a/ESLint/README.md b/ESLint/README.md
index e0c48883..8426adb8 100644
--- a/ESLint/README.md
+++ b/ESLint/README.md
@@ -7,7 +7,7 @@ Cratis base config, [`@cratis/eslint-config`](https://www.npmjs.com/package/@cra
 | ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `no-root-barrel-import`       | Disallows importing a removed Components 3 component namespace from the Components 4 setup-only root. Use the exact component subpath (`@cratis/components/CommandDialog`, `@cratis/components/DataPage`, `@cratis/components/Toolbar`, …). Package-wide provider/configuration symbols remain allowed at the root; an unambiguous namespace violation is autofixed. |
 | `no-primereact-dialog`        | Disallows importing `Dialog` from `primereact/dialog`. Use `CommandDialog` from `@cratis/components/CommandDialog`, or `Dialog` from `@cratis/components/Dialogs` — the wrappers add Arc command binding, overlay/focus fixes, and theming.                                                                                                                          |
-| `onbeforeexecute-must-return` | Requires an `onBeforeExecute` callback to return the command values. `onBeforeExecute` is a transformer — a body that can complete without returning silently skips the transform (the runtime keeps the previous values and warns instead of executing with `undefined`).                                                                                           |
+| `onbeforeexecute-must-return` | Requires an `onBeforeExecute` callback to return the command values. The runtime guards a missing return by keeping the current object and warning, but a replacement value is discarded and the callback violates the transformer contract.                                                                                                                           |
 | `no-hooks-in-view-model`      | Disallows React hooks (including generated Arc proxies' `.use()`) inside a view model class. View models must be plain, hook-free classes that receive injected abstractions.                                                                                                                                                                                        |
 | `no-raw-command-form-marker`  | Disallows identifying a CommandForm field or column by a hand-written `displayName` string, in either direction. Use `markAsCommandFormField`/`markAsCommandFormColumn` and `isCommandFormField`/`isCommandFormColumn` from `@cratis/components/CommandForm` — they go through a marker a build transform cannot rewrite.                                            |
 
@@ -134,21 +134,20 @@ form with guidance but never autofixes any of them; see
 `onBeforeExecute` (on `CommandDialog`, `StepperCommandDialog`, `CommandScope`, …) is a
 **transformer**: it receives the current command values and must **return** them (mutated or
 not). A callback that returns nothing does not run the command with `undefined` — a runtime
-guard (`applyBeforeExecute`) keeps the current values and logs a `console.warn` instead. But
-the callback's intended changes never applied, and that warning is easy to miss outside a
-fully-typed call site, so the bug still ships silently in practice. TypeScript catches this at
-fully-typed call sites; this rule is the static backstop for JavaScript and loosely-typed
-consumers.
+guard (`applyBeforeExecute`) falls back to the current object and logs a `console.warn`.
+In-place mutations may therefore remain, but a replacement object is discarded and the call
+still violates the transformer contract. TypeScript catches this at fully typed call sites;
+this rule is the static backstop for JavaScript and loosely typed consumers, so behavior never
+relies on the fallback.
 
 ```tsx
 // ✅ returns the values
 <CommandDialog onBeforeExecute={values => { values.id = Guid.create(); return values; }} />
 <CommandDialog onBeforeExecute={values => values} />
 
-// ❌ side-effect only — the transform is silently skipped: the runtime keeps the previous
-// values and warns, `values.id` is never applied
-<CommandDialog onBeforeExecute={values => { values.id = Guid.create(); }} />
-// ❌ bare return — same silent skip
+// ❌ replacement is discarded — the runtime falls back to `values` and warns
+<CommandDialog onBeforeExecute={values => { const updated = { ...values, id: Guid.create() }; }} />
+// ❌ bare return — same guarded fallback
 <CommandDialog onBeforeExecute={values => { return; }} />
 ```
 
diff --git a/ESLint/lib/onbeforeexecuteMustReturn.js b/ESLint/lib/onbeforeexecuteMustReturn.js
index 52bf3e3d..e49c3f83 100644
--- a/ESLint/lib/onbeforeexecuteMustReturn.js
+++ b/ESLint/lib/onbeforeexecuteMustReturn.js
@@ -68,12 +68,12 @@ const isOnBeforeExecuteCallback = (node) => {
 };
 
 // Require an `onBeforeExecute` callback to return the command values on every path. It is a
-// transformer, not a side-effect hook: a body that can complete without returning silently
-// skips the transform — a runtime guard (`applyBeforeExecute`) keeps the current values and
-// logs a `console.warn` instead of executing the command with `undefined`, but the callback's
-// intended changes never applied and that warning is easy to miss outside a fully-typed call
-// site. A lint backstop for consumers whose call sites are not fully typed — it flags a
-// block-bodied callback that returns nothing, or a bare `return;`. It does not do full path
+// transformer, not a side-effect hook. A runtime guard (`applyBeforeExecute`) prevents a
+// missing return from executing with `undefined`: it falls back to the current object and logs
+// a warning. In-place mutations may remain because the callback received that same object, but
+// a replacement object is discarded and the callback still violates its contract. This lint
+// backstop keeps JavaScript and loosely typed call sites from relying on that fallback. It flags
+// a block-bodied callback that returns nothing, or a bare `return;`. It does not do full path
 // analysis, so a callback that returns a value on some branches but can still fall through is
 // not flagged.
 export const onbeforeexecuteMustReturn = {
@@ -81,16 +81,16 @@ export const onbeforeexecuteMustReturn = {
         type: 'problem',
         docs: {
             description:
-                'Require an onBeforeExecute callback to return the command values; a callback that returns nothing silently skips the transform (the runtime keeps the previous values and warns instead of applying it).',
+                'Require an onBeforeExecute callback to return the command values; on a missing return the runtime falls back to the current object and warns, so replacement values are discarded.',
             recommended: true,
             url: 'https://github.com/Cratis/Components/blob/main/ESLint/README.md',
         },
         schema: [],
         messages: {
             missingReturn:
-                'onBeforeExecute is a transformer and must return the command values. This callback can complete without returning, which silently skips the transform: the runtime keeps the current values and logs a warning instead of applying your changes. Return the values (mutated or not).',
+                'onBeforeExecute is a transformer and must return the command values. This callback can complete without returning, so the runtime falls back to the current object and logs a warning; any replacement value is discarded. Return the values (mutated or not).',
             emptyReturn:
-                'onBeforeExecute must return the command values, not `return;`. A bare return silently skips the transform: the runtime keeps the current values and logs a warning instead of applying your changes. Return the values (mutated or not).',
+                'onBeforeExecute must return the command values, not `return;`. The runtime falls back to the current object and logs a warning; any replacement value is discarded. Return the values (mutated or not).',
         },
     },
     create(context) {
diff --git a/ESLint/test/rules.test.js b/ESLint/test/rules.test.js
index 5b0fbdae..d471f941 100644
--- a/ESLint/test/rules.test.js
+++ b/ESLint/test/rules.test.js
@@ -442,11 +442,9 @@ tsRuleTester.run('onbeforeexecute-must-return', onbeforeexecuteMustReturn, {
 });
 
 describe('onbeforeexecute-must-return message wording', () => {
-    // The runtime guard (applyBeforeExecute) keeps the previous command values and warns
-    // instead of executing with `undefined` — it does not wipe the command values. The rule's
-    // messages must describe that current behavior (a silently skipped transform), not the
-    // pre-guard "executes with undefined"/"wiped" wording, so the guidance never drifts back
-    // out of sync with the runtime it backstops.
+    // The runtime guard (applyBeforeExecute) falls back to the current object and warns instead
+    // of executing with `undefined`; in-place mutations may remain, while replacement values are
+    // discarded. Keep the rule aligned with that behavior rather than the pre-guard data-loss claim.
     const { missingReturn, emptyReturn } = onbeforeexecuteMustReturn.meta.messages;
 
     it('does not claim the command executes with undefined values', () => {
@@ -459,11 +457,13 @@ describe('onbeforeexecute-must-return message wording', () => {
         expect(emptyReturn).not.toMatch(/wipe/i);
     });
 
-    it('describes the transform being silently skipped and the values kept', () => {
-        expect(missingReturn).toMatch(/silently skips the transform/);
-        expect(missingReturn).toMatch(/keeps the current values/);
-        expect(emptyReturn).toMatch(/silently skips the transform/);
-        expect(emptyReturn).toMatch(/keeps the current values/);
+    it('describes the guarded fallback and discarded replacement value', () => {
+        expect(missingReturn).toMatch(/falls back to the current object/);
+        expect(missingReturn).toMatch(/logs a warning/);
+        expect(missingReturn).toMatch(/replacement value is discarded/);
+        expect(emptyReturn).toMatch(/falls back to the current object/);
+        expect(emptyReturn).toMatch(/logs a warning/);
+        expect(emptyReturn).toMatch(/replacement value is discarded/);
     });
 });
 

From d4b241947d2d9a2d785485b6f19e34ff08813051 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 00:20:50 +0200
Subject: [PATCH 111/267] pi-agent: Fix date component contracts

---
 Source/Common/CratisComponentsProvider.tsx    |   1 +
 Source/Common/DatePickerInput.tsx             |  25 ++--
 ...hen_legacy_locale_messages_are_present.tsx | 113 +++++++++++++++
 .../when_bounding_the_today_action.tsx        | 131 ++++++++++++++++++
 4 files changed, 260 insertions(+), 10 deletions(-)
 create mode 100644 Source/Common/for_CratisComponentsProvider/when_legacy_locale_messages_are_present.tsx
 create mode 100644 Source/Common/for_DatePickerInput/when_bounding_the_today_action.tsx

diff --git a/Source/Common/CratisComponentsProvider.tsx b/Source/Common/CratisComponentsProvider.tsx
index c4568b19..1062b47f 100644
--- a/Source/Common/CratisComponentsProvider.tsx
+++ b/Source/Common/CratisComponentsProvider.tsx
@@ -211,6 +211,7 @@ const withLegacyLocaleMessages = (
                     config.messages?.paginator?.last,
             },
             datePicker: {
+                ...config.messages?.datePicker,
                 today:
                     explicitMessages?.datePicker?.today ??
                     legacy.today ??
diff --git a/Source/Common/DatePickerInput.tsx b/Source/Common/DatePickerInput.tsx
index ddd19ff4..cbf25801 100644
--- a/Source/Common/DatePickerInput.tsx
+++ b/Source/Common/DatePickerInput.tsx
@@ -89,7 +89,7 @@ export interface DatePickerInputPassThrough {
     cell?: DatePickerPartAttributes;
     /** Today/clear action row. */
     buttonBar?: DatePickerPartAttributes;
-    /** Today action. */
+    /** Today action; disabled and non-interactive when today falls outside `minDate`/`maxDate`. */
     today?: DatePickerButtonAttributes;
     /** Clear action. */
     clear?: DatePickerButtonAttributes;
@@ -200,6 +200,12 @@ export const DatePickerInput = ({
     const datePickerMessages = messages?.datePicker;
     const resolvedTodayLabel = todayLabel ?? datePickerMessages?.today ?? 'Today';
     const resolvedClearLabel = clearLabel ?? datePickerMessages?.clear ?? 'Clear';
+    const minValue = asDateValue(minDate ?? null, showTime) ?? undefined;
+    const maxValue = asDateValue(maxDate ?? null, showTime) ?? undefined;
+    const todayValue = today(getLocalTimeZone());
+    const isTodayOutOfBounds =
+        (minValue !== undefined && todayValue.compare(minValue) < 0) ||
+        (maxValue !== undefined && todayValue.compare(maxValue) > 0);
     const rootClassName = classNames(
         'cratis-date-picker',
         pt?.root?.className,
@@ -249,8 +255,8 @@ export const DatePickerInput = ({
                 isDisabled={effectiveDisabled}
                 isReadOnly={effectiveReadOnly}
                 isInvalid={effectiveInvalid}
-                minValue={asDateValue(minDate ?? null, showTime) ?? undefined}
-                maxValue={asDateValue(maxDate ?? null, showTime) ?? undefined}
+                minValue={minValue}
+                maxValue={maxValue}
                 granularity={showTime ? 'minute' : 'day'}
                 hourCycle={
                     hourFormat === '12' ? 12 : hourFormat === '24' ? 24 : undefined
@@ -444,13 +450,12 @@ export const DatePickerInput = ({
                                         pt?.today?.className,
                                     )}
                                     data-cratis-part='today'
-                                    onClick={() =>
-                                        onChange(
-                                            today(getLocalTimeZone()).toDate(
-                                                getLocalTimeZone(),
-                                            ),
-                                        )
-                                    }
+                                    disabled={isTodayOutOfBounds}
+                                    aria-disabled={isTodayOutOfBounds || undefined}
+                                    onClick={() => {
+                                        if (isTodayOutOfBounds) return;
+                                        onChange(todayValue.toDate(getLocalTimeZone()));
+                                    }}
                                 >
                                     {resolvedTodayLabel}
                                 </button>
diff --git a/Source/Common/for_CratisComponentsProvider/when_legacy_locale_messages_are_present.tsx b/Source/Common/for_CratisComponentsProvider/when_legacy_locale_messages_are_present.tsx
new file mode 100644
index 00000000..79d72cf6
--- /dev/null
+++ b/Source/Common/for_CratisComponentsProvider/when_legacy_locale_messages_are_present.tsx
@@ -0,0 +1,113 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { expect } from 'chai';
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, describe, it } from 'vitest';
+import {
+    CratisComponentsProvider,
+    useCratisComponentsConfig,
+} from '../CratisComponentsProvider';
+
+/**
+ * The deprecated `locales` merge used to reconstruct `messages.datePicker` from a fixed
+ * list of keys (`today`, `clear`, `openCalendar`, `previousMonth`, `nextMonth`), silently
+ * dropping every owned message not on that list — including the accessible `label` message
+ * — whenever a legacy locale entry was present. That drop fell back to the English `'Date'`
+ * literal regardless of the configured locale. These specs pin every owned `datePicker`
+ * message to survive the legacy merge.
+ */
+describe('when legacy locale messages are present', () => {
+    let container: HTMLDivElement;
+    let root: Root;
+    let resolvedDatePicker: Record<string, string | undefined> | undefined;
+
+    const ConfigProbe = () => {
+        const config = useCratisComponentsConfig();
+        resolvedDatePicker = config.messages?.datePicker;
+        return null;
+    };
+
+    const render = async (element: React.ReactElement) => {
+        // SAFETY: React's test-environment flag is an intentionally undocumented global absent from DOM typings.
+        (
+            globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
+        ).IS_REACT_ACT_ENVIRONMENT = true;
+        container = document.createElement('div');
+        document.body.append(container);
+        root = createRoot(container);
+        await act(async () => {
+            root.render(element);
+        });
+    };
+
+    afterEach(async () => {
+        await act(async () => root.unmount());
+        container.remove();
+    });
+
+    it('should preserve the datePicker label message through a legacy-locale merge', async () => {
+        await render(
+            <CratisComponentsProvider
+                value={{
+                    locale: 'nb-NO',
+                    locales: { 'nb-NO': { today: 'I dag', clear: 'Tøm' } },
+                    messages: { datePicker: { label: 'Provider Date Label' } },
+                }}
+            >
+                <ConfigProbe />
+            </CratisComponentsProvider>,
+        );
+        expect(resolvedDatePicker?.label).to.equal('Provider Date Label');
+    });
+
+    it('should still resolve the legacy today/clear labels alongside the preserved label', async () => {
+        await render(
+            <CratisComponentsProvider
+                value={{
+                    locale: 'nb-NO',
+                    locales: { 'nb-NO': { today: 'I dag', clear: 'Tøm' } },
+                    messages: { datePicker: { label: 'Provider Date Label' } },
+                }}
+            >
+                <ConfigProbe />
+            </CratisComponentsProvider>,
+        );
+        expect(resolvedDatePicker?.today).to.equal('I dag');
+        expect(resolvedDatePicker?.clear).to.equal('Tøm');
+        expect(resolvedDatePicker?.label).to.equal('Provider Date Label');
+    });
+
+    it('should fall back to the default label when no provider label is given, even with legacy locales present', async () => {
+        await render(
+            <CratisComponentsProvider
+                value={{
+                    locale: 'nb-NO',
+                    locales: { 'nb-NO': { today: 'I dag', clear: 'Tøm' } },
+                }}
+            >
+                <ConfigProbe />
+            </CratisComponentsProvider>,
+        );
+        expect(resolvedDatePicker?.label).to.equal('Date');
+    });
+
+    it('should leave datePicker messages untouched when no legacy locale entry matches', async () => {
+        await render(
+            <CratisComponentsProvider
+                value={{
+                    locale: 'nb-NO',
+                    locales: { 'sv-SE': { today: 'Idag' } },
+                    messages: { datePicker: { label: 'Provider Date Label' } },
+                }}
+            >
+                <ConfigProbe />
+            </CratisComponentsProvider>,
+        );
+        expect(resolvedDatePicker?.label).to.equal('Provider Date Label');
+        expect(resolvedDatePicker?.today).to.equal('Today');
+    });
+});
diff --git a/Source/Common/for_DatePickerInput/when_bounding_the_today_action.tsx b/Source/Common/for_DatePickerInput/when_bounding_the_today_action.tsx
new file mode 100644
index 00000000..7f6f2f34
--- /dev/null
+++ b/Source/Common/for_DatePickerInput/when_bounding_the_today_action.tsx
@@ -0,0 +1,131 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { expect } from 'chai';
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, describe, it, vi } from 'vitest';
+import { CratisComponentsProvider } from '../CratisComponentsProvider';
+import { DatePickerInput } from '../DatePickerInput';
+
+/**
+ * The custom Today action used to call `onChange` with today's date unconditionally,
+ * bypassing `minDate`/`maxDate` entirely — unlike every calendar-cell selection, which
+ * React Aria's `minValue`/`maxValue` already constrain. These specs pin Today to the same
+ * bounds contract: disabled and inert once today falls outside the configured range.
+ */
+describe('when bounding the Today action by minDate/maxDate', () => {
+    let container: HTMLDivElement;
+    let root: Root;
+
+    const startOfDay = (date: Date) =>
+        new Date(date.getFullYear(), date.getMonth(), date.getDate());
+    const addDays = (date: Date, days: number) => {
+        const next = new Date(date);
+        next.setDate(next.getDate() + days);
+        return next;
+    };
+    const today = startOfDay(new Date());
+    const yesterday = addDays(today, -1);
+    const tomorrow = addDays(today, 1);
+
+    const mount = async (options: {
+        minDate?: Date;
+        maxDate?: Date;
+        onChange: (value: Date | null) => void;
+    }) => {
+        // SAFETY: React's test-environment flag is an intentionally undocumented global absent from DOM typings.
+        (
+            globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
+        ).IS_REACT_ACT_ENVIRONMENT = true;
+        container = document.createElement('div');
+        document.body.append(container);
+        root = createRoot(container);
+
+        await act(async () => {
+            root.render(
+                <CratisComponentsProvider>
+                    <DatePickerInput
+                        value={null}
+                        onChange={options.onChange}
+                        aria-label='Appointment date'
+                        showButtonBar
+                        minDate={options.minDate}
+                        maxDate={options.maxDate}
+                    />
+                </CratisComponentsProvider>,
+            );
+        });
+
+        const trigger = container.querySelector<HTMLButtonElement>(
+            '[data-cratis-part="trigger"]',
+        );
+        if (!trigger) throw new Error('DatePickerInput did not render its trigger.');
+        await act(async () => trigger.click());
+
+        const todayButton = document.querySelector<HTMLButtonElement>(
+            '[data-cratis-part="today"]',
+        );
+        if (!todayButton)
+            throw new Error('DatePickerInput did not render the Today action.');
+        return todayButton;
+    };
+
+    afterEach(async () => {
+        await act(async () => root.unmount());
+        container.remove();
+    });
+
+    it('should disable the Today action when today is before minDate', async () => {
+        const onChange = vi.fn();
+        const todayButton = await mount({ minDate: tomorrow, onChange });
+        expect(todayButton.disabled).to.equal(true);
+        expect(todayButton.getAttribute('aria-disabled')).to.equal('true');
+    });
+
+    it('should disable the Today action when today is after maxDate', async () => {
+        const onChange = vi.fn();
+        const todayButton = await mount({ maxDate: yesterday, onChange });
+        expect(todayButton.disabled).to.equal(true);
+        expect(todayButton.getAttribute('aria-disabled')).to.equal('true');
+    });
+
+    it('should not invoke onChange when a disabled Today action is clicked', async () => {
+        const onChange = vi.fn();
+        const todayButton = await mount({ minDate: tomorrow, onChange });
+        await act(async () => todayButton.click());
+        expect(onChange.mock.calls).to.deep.equal([]);
+    });
+
+    it('should keep the Today action enabled when today is within bounds', async () => {
+        const onChange = vi.fn();
+        const todayButton = await mount({
+            minDate: yesterday,
+            maxDate: tomorrow,
+            onChange,
+        });
+        expect(todayButton.disabled).to.equal(false);
+        expect(todayButton.getAttribute('aria-disabled')).to.equal(null);
+    });
+
+    it("should emit today's date when the Today action is within bounds", async () => {
+        const onChange = vi.fn();
+        const todayButton = await mount({
+            minDate: yesterday,
+            maxDate: tomorrow,
+            onChange,
+        });
+        await act(async () => todayButton.click());
+        expect(onChange.mock.calls.length).to.equal(1);
+        const emitted = onChange.mock.calls[0][0] as Date;
+        expect(startOfDay(emitted).getTime()).to.equal(today.getTime());
+    });
+
+    it('should keep the Today action enabled with no minDate/maxDate configured', async () => {
+        const onChange = vi.fn();
+        const todayButton = await mount({ onChange });
+        expect(todayButton.disabled).to.equal(false);
+    });
+});

From cca2dc005e89643af96a62451a3287dce207555d Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 00:29:39 +0200
Subject: [PATCH 112/267] pi-agent: Fix SchemaEditor semantics

---
 Documentation/SchemaEditor/editing.md         |  18 ++-
 Documentation/SchemaEditor/index.md           |  19 ++-
 Documentation/SchemaEditor/validation.md      |  34 +++--
 Source/SchemaEditor/SchemaEditor.tsx          |  99 ++++++++++---
 .../when_a_property_name_is_cleared.tsx       | 104 ++++++++++++++
 ...required_property_from_a_nested_object.tsx | 122 ++++++++++++++++
 ...a_required_property_in_a_nested_object.tsx | 134 ++++++++++++++++++
 ...a_contains_a_malformed_nested_property.tsx | 117 +++++++++++++++
 Source/types/JsonSchema.ts                    |   4 +-
 9 files changed, 603 insertions(+), 48 deletions(-)
 create mode 100644 Source/SchemaEditor/for_SchemaEditor/when_a_property_name_is_cleared.tsx
 create mode 100644 Source/SchemaEditor/for_SchemaEditor/when_deleting_a_required_property_from_a_nested_object.tsx
 create mode 100644 Source/SchemaEditor/for_SchemaEditor/when_renaming_a_required_property_in_a_nested_object.tsx
 create mode 100644 Source/SchemaEditor/for_SchemaEditor/when_schema_contains_a_malformed_nested_property.tsx

diff --git a/Documentation/SchemaEditor/editing.md b/Documentation/SchemaEditor/editing.md
index 1e599563..536b1704 100644
--- a/Documentation/SchemaEditor/editing.md
+++ b/Documentation/SchemaEditor/editing.md
@@ -100,15 +100,21 @@ For `string` types, select a format to provide hints about expected value patter
 }
 ```
 
-## Toggling Required
+## Required Properties
 
-Click the checkbox in the Required column to mark a property as required or optional.
+SchemaEditor does not currently render a Required column or an interactive
+checkbox to toggle a property's required state — there is no in-table
+control for this. Set and unset required properties by editing the schema's
+`required` array yourself (for example before passing `schema`, or by
+transforming the value your own `onChange` handler receives).
 
-Required properties:
+What SchemaEditor _does_ guarantee is that the `required` array on each
+object schema stays internally consistent as you edit that object's other
+properties:
 
-- Must be present in valid data
-- Are listed in the schema's `required` array
-- Show a checkmark in the table
+- Renaming a required property updates the `required` array to the new name.
+- Deleting a required property removes it from the `required` array as well as from `properties` — no separate step is needed.
+- Each nested `object` schema's `required` array is scoped to its own `properties`, independent of its parent's or any sibling's `required` array.
 
 ```typescript
 {
diff --git a/Documentation/SchemaEditor/index.md b/Documentation/SchemaEditor/index.md
index 3f4cccc9..9c5a9963 100644
--- a/Documentation/SchemaEditor/index.md
+++ b/Documentation/SchemaEditor/index.md
@@ -13,7 +13,7 @@ SchemaEditor allows users to define data structures by adding properties, specif
 - Interactive property editing
 - Type selection from JSON schema types
 - Format specification for common patterns
-- Required/optional property flags
+- `required` array tracking per object schema, kept consistent across renames and deletes (see [Editing Properties](editing.md#required-properties) — no in-table toggle control yet)
 - Array and object type support
 - Inline editing with validation
 - Add/remove properties
@@ -79,12 +79,17 @@ What is deliberately **not** supported: JSON Schema composition keywords (`oneOf
 
 Properties are displayed in a table:
 
-| Name      | Type   | Format    | Required |
-| --------- | ------ | --------- | -------- |
-| name      | string | -         | ✓        |
-| email     | string | email     | ✓        |
-| age       | number | -         |          |
-| createdAt | string | date-time |          |
+| Property  | Type      |
+| --------- | --------- |
+| name      | string    |
+| email     | email     |
+| age       | number    |
+| createdAt | date-time |
+
+The Type column shows the property's format when one is set, falling back to
+its JSON type otherwise. There is no separate Required column; see
+[Editing Properties](editing.md#required-properties) for how `required` is
+tracked.
 
 ## See Also
 
diff --git a/Documentation/SchemaEditor/validation.md b/Documentation/SchemaEditor/validation.md
index 8c5274b4..18d7982f 100644
--- a/Documentation/SchemaEditor/validation.md
+++ b/Documentation/SchemaEditor/validation.md
@@ -9,9 +9,9 @@ Property names must:
 1. **Be unique** within the schema
 2. **Not be empty**
 3. **Follow identifier conventions** (recommended but not enforced)
-   - Start with letter or underscore
-   - Contain only letters, numbers, underscores
-   - Avoid JavaScript reserved words
+    - Start with letter or underscore
+    - Contain only letters, numbers, underscores
+    - Avoid JavaScript reserved words
 
 ### Uniqueness Check
 
@@ -102,17 +102,21 @@ The `required` array lists properties that must be present:
 ### Validation Rules
 
 1. **Required properties must exist** in `properties`
-2. **Cannot remove required property** without unmarking as required first
+2. **Deleting a required property** removes it from both `properties` and `required` in one step — there is no separate "unmark as required first" gate
 3. **Renaming a required property** updates the `required` array
+4. **Required tracking is scoped per object schema** — a nested `object` property's own `required` array only names its own properties, never those of its parent or siblings
 
 ```typescript
 // Before rename
-required: ['oldName']
+required: ['oldName'];
 
 // After renaming 'oldName' to 'newName'
-required: ['newName']  // Automatically updated
+required: ['newName']; // Automatically updated
 ```
 
+SchemaEditor does not currently expose an in-table control for toggling a
+property's required state; see [Editing Properties](editing.md#required-properties).
+
 ## Schema Structure Validation
 
 ### Object Type Requirements
@@ -235,21 +239,21 @@ Validation checks:
 As you edit, SchemaEditor validates:
 
 1. **On property name change**
-   - Check uniqueness
-   - Update required array if needed
+    - Check uniqueness
+    - Update required array if needed
 
 2. **On type change**
-   - Clear incompatible format
-   - Remove incompatible constraints
-   - Prompt for type-specific requirements
+    - Clear incompatible format
+    - Remove incompatible constraints
+    - Prompt for type-specific requirements
 
 3. **On format change**
-   - Verify format is valid for type
-   - Show format examples
+    - Verify format is valid for type
+    - Show format examples
 
 4. **On required toggle**
-   - Add/remove from required array
-   - Update visual indicators
+    - Add/remove from required array
+    - Update visual indicators
 
 ## Validation Messages
 
diff --git a/Source/SchemaEditor/SchemaEditor.tsx b/Source/SchemaEditor/SchemaEditor.tsx
index 608287e0..2090aa84 100644
--- a/Source/SchemaEditor/SchemaEditor.tsx
+++ b/Source/SchemaEditor/SchemaEditor.tsx
@@ -69,33 +69,64 @@ export const defaultSchemaEditorLabels: SchemaEditorLabels = {
     invalidJson: 'The schema must contain valid JSON before it can be edited.',
 };
 
+const isPlainObject = (value: unknown): value is Record<string, unknown> =>
+    typeof value === 'object' && value !== null && !Array.isArray(value);
+
+/**
+ * Recursively validates that a parsed schema node, and every nested
+ * `properties` value and `items` schema it contains, is a well-formed object
+ * shape. A JSON-valid document can still smuggle malformed nested values
+ * (e.g. `properties.foo: null` or `items: "string"`) that later code
+ * dereferences as schema objects; those are rejected here rather than
+ * crashing downstream.
+ */
+const isValidSchemaNode = (node: unknown): node is JsonSchema => {
+    if (!isPlainObject(node)) {
+        return false;
+    }
+
+    if (node.properties !== undefined) {
+        if (!isPlainObject(node.properties)) {
+            return false;
+        }
+        for (const propertyValue of Object.values(node.properties)) {
+            if (!isValidSchemaNode(propertyValue)) {
+                return false;
+            }
+        }
+    }
+
+    if (node.items !== undefined && !isValidSchemaNode(node.items)) {
+        return false;
+    }
+
+    return true;
+};
+
 const cloneSchema = (schema: JsonSchema): JsonSchema | undefined => {
     try {
         const serializedSchema = JSON.stringify(schema);
         if (serializedSchema === undefined) return undefined;
 
         const parsedSchema: unknown = JSON.parse(serializedSchema);
-        if (
-            typeof parsedSchema !== 'object' ||
-            parsedSchema === null ||
-            Array.isArray(parsedSchema)
-        ) {
+        if (!isValidSchemaNode(parsedSchema)) {
             return undefined;
         }
 
-        return parsedSchema as JsonSchema;
+        return parsedSchema;
     } catch {
         return undefined;
     }
 };
 
 const asJsonSchema = (property: JsonSchemaProperty): JsonSchema => {
-    // SAFETY: A nested schema property has the same editable shape; its row-only required flag is not read here.
+    // SAFETY: A nested "object" property has the same editable shape as a schema —
+    // `properties`, `items`, and `required` all mean the same thing on both types.
     return property as unknown as JsonSchema;
 };
 
 const asJsonSchemaProperty = (schema: JsonSchema): JsonSchemaProperty => {
-    // SAFETY: A nested schema is stored in the property's schema-shaped fields; required is not changed here.
+    // SAFETY: The inverse of asJsonSchema; the shapes are structurally interchangeable.
     return schema as unknown as JsonSchemaProperty;
 };
 
@@ -210,8 +241,7 @@ export const SchemaEditor = ({
             const errors: Record<string, string> = {};
 
             properties.forEach((prop) => {
-                if (!prop.name) return;
-                const error = validatePropertyName(prop.name, prop.id!, properties);
+                const error = validatePropertyName(prop.name ?? '', prop.id!, properties);
                 if (error) {
                     errors[prop.id!] = error;
                 }
@@ -265,10 +295,12 @@ export const SchemaEditor = ({
                     description: property.description,
                     items: property.items,
                     properties: property.properties,
-                    required:
-                        (currentSchema.required as string[] | undefined)?.includes(
-                            name,
-                        ) || false,
+                    // A property's own `required` array (populated when its `type`
+                    // is "object") lists which of *its* properties are required.
+                    // It is scoped to this property alone — never to the parent
+                    // schema's `required` array — and is carried through verbatim
+                    // so navigating into it (see asJsonSchema) sees it intact.
+                    required: property.required,
                 });
             }
         }
@@ -344,7 +376,18 @@ export const SchemaEditor = ({
             updateSchemaAtPath(currentPath, (schema) => {
                 const newProps = { ...(schema.properties || {}) };
                 delete newProps[propertyName];
-                return { ...schema, properties: newProps };
+
+                // Deleting a property must also drop it from this schema's own
+                // `required` array, or the array keeps naming a property that no
+                // longer exists in `properties`.
+                const updated: JsonSchema = { ...schema, properties: newProps };
+                if (schema.required?.includes(propertyName)) {
+                    updated.required = schema.required.filter(
+                        (name) => name !== propertyName,
+                    );
+                }
+
+                return updated;
             });
         },
         [currentPath, updateSchemaAtPath],
@@ -361,23 +404,43 @@ export const SchemaEditor = ({
                 const newProps = { ...(schema.properties || {}) };
                 const prop = { ...(newProps[oldName] || {}) };
 
+                let newRequired = schema.required;
+
                 if (field === 'name') {
-                    if (value !== oldName && !newProps[value as string]) {
-                        newProps[value as string] = prop;
+                    const newName = value as string;
+                    if (newName !== oldName && !newProps[newName]) {
+                        newProps[newName] = prop;
                         delete newProps[oldName];
+
+                        // Renaming a required property must keep the `required`
+                        // array pointing at the new name, or it goes stale and
+                        // silently references a property that no longer exists.
+                        if (schema.required?.includes(oldName)) {
+                            newRequired = schema.required.map((name) =>
+                                name === oldName ? newName : name,
+                            );
+                        }
                     }
                 } else if (field === 'type') {
                     prop.type = value as string;
                     if (value === 'array') {
                         prop.items = { type: 'string' };
                         delete prop.format;
+                        // Only an "object" property has a meaningful `required`
+                        // array of its own; any prior one is now stale.
+                        delete prop.required;
                     } else if (value === 'object') {
                         prop.properties = {};
                         delete prop.format;
                         delete prop.items;
+                        // Starting fresh with empty `properties`, so any prior
+                        // `required` array (naming properties that no longer
+                        // exist here) would be stale.
+                        delete prop.required;
                     } else {
                         delete prop.items;
                         delete prop.properties;
+                        delete prop.required;
                     }
 
                     if (additionalUpdates) {
@@ -400,7 +463,7 @@ export const SchemaEditor = ({
                     newProps[oldName] = prop;
                 }
 
-                return { ...schema, properties: newProps };
+                return { ...schema, properties: newProps, required: newRequired };
             });
         },
         [currentPath, updateSchemaAtPath],
diff --git a/Source/SchemaEditor/for_SchemaEditor/when_a_property_name_is_cleared.tsx b/Source/SchemaEditor/for_SchemaEditor/when_a_property_name_is_cleared.tsx
new file mode 100644
index 00000000..8b8a547b
--- /dev/null
+++ b/Source/SchemaEditor/for_SchemaEditor/when_a_property_name_is_cleared.tsx
@@ -0,0 +1,104 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { expect } from 'chai';
+import { afterEach, beforeEach, describe, it } from 'vitest';
+import { SchemaEditor } from '../SchemaEditor';
+import type { JsonSchema } from '../../types/JsonSchema';
+
+/**
+ * Regression coverage for a confirmed bypass: `validateAllProperties` skipped
+ * validation entirely for a falsy `prop.name` (`if (!prop.name) return;`), so
+ * clearing a property's name to an empty string never produced a validation
+ * error, leaving Save enabled and allowing a schema with an empty property key
+ * to be saved. `validatePropertyName` already rejects empty names correctly;
+ * the bug was that the caller never invoked it for that case.
+ */
+describe('when a property name is cleared', () => {
+    let container: HTMLDivElement;
+    let root: Root;
+
+    const schema: JsonSchema = {
+        type: 'object',
+        properties: {
+            title: { type: 'string' },
+        },
+    };
+
+    const findSaveButton = () =>
+        Array.from(container.querySelectorAll('button')).find((button) =>
+            button.textContent?.includes('Save'),
+        );
+
+    // Query fresh each time rather than caching a node reference: the data
+    // table may reconcile a new element for the cell across re-renders.
+    const findNameInput = () =>
+        container.querySelector<HTMLInputElement>('input[aria-label="Property name"]');
+
+    const setValue = (input: HTMLInputElement, value: string) => {
+        const setter = Object.getOwnPropertyDescriptor(
+            HTMLInputElement.prototype,
+            'value',
+        )!.set!;
+        setter.call(input, value);
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+    };
+
+    beforeEach(async () => {
+        // SAFETY: React exposes this test-only flag on globalThis without a declaration.
+        (
+            globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
+        ).IS_REACT_ACT_ENVIRONMENT = true;
+        // SAFETY: jsdom omits ResizeObserver, so the spec supplies the minimal API used here.
+        (globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver ??= class {
+            observe() {
+                return undefined;
+            }
+            unobserve() {
+                return undefined;
+            }
+            disconnect() {
+                return undefined;
+            }
+        };
+
+        container = document.createElement('div');
+        document.body.append(container);
+        root = createRoot(container);
+
+        await act(async () => {
+            root.render(<SchemaEditor schema={schema} editMode />);
+        });
+
+        const initialInput = findNameInput();
+        if (!initialInput) throw new Error('SchemaEditor did not render the name input.');
+
+        await act(async () => setValue(initialInput, ''));
+    });
+
+    afterEach(async () => {
+        await act(async () => root.unmount());
+        container.remove();
+    });
+
+    it('should mark the cleared name input as invalid', () => {
+        expect(findNameInput()?.getAttribute('aria-invalid')).to.equal('true');
+    });
+
+    it('should disable saving while a property name is empty', () => {
+        expect(findSaveButton()?.disabled).to.equal(true);
+    });
+
+    it('should re-enable saving once a non-empty name is supplied', async () => {
+        const clearedInput = findNameInput();
+        if (!clearedInput) throw new Error('SchemaEditor did not render the name input.');
+        await act(async () => setValue(clearedInput, 'restoredName'));
+
+        expect(findNameInput()?.getAttribute('aria-invalid')).to.equal(null);
+        expect(findSaveButton()?.disabled).to.equal(false);
+    });
+});
diff --git a/Source/SchemaEditor/for_SchemaEditor/when_deleting_a_required_property_from_a_nested_object.tsx b/Source/SchemaEditor/for_SchemaEditor/when_deleting_a_required_property_from_a_nested_object.tsx
new file mode 100644
index 00000000..9d76ae5e
--- /dev/null
+++ b/Source/SchemaEditor/for_SchemaEditor/when_deleting_a_required_property_from_a_nested_object.tsx
@@ -0,0 +1,122 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { expect } from 'chai';
+import { afterEach, beforeEach, describe, it } from 'vitest';
+import { SchemaEditor } from '../SchemaEditor';
+import type { JsonSchema } from '../../types/JsonSchema';
+
+/**
+ * Regression coverage: deleting a required property inside a nested object must
+ * remove it from that object's own `required` array as well as from
+ * `properties`. Before this fix, `removeProperty` only touched `properties`,
+ * leaving `required` stale and pointing at a property that no longer exists.
+ * The parent (root) schema's `required` array, which is a separate scope, must
+ * be left untouched by a nested delete.
+ */
+describe('when deleting a required property from a nested object', () => {
+    let container: HTMLDivElement;
+    let root: Root;
+    let capturedSchema: JsonSchema | undefined;
+
+    const schema: JsonSchema = {
+        type: 'object',
+        properties: {
+            address: {
+                type: 'object',
+                properties: {
+                    street: { type: 'string' },
+                    city: { type: 'string' },
+                },
+                required: ['street', 'city'],
+            },
+        },
+        required: ['address'],
+    };
+
+    beforeEach(async () => {
+        // SAFETY: React exposes this test-only flag on globalThis without a declaration.
+        (
+            globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
+        ).IS_REACT_ACT_ENVIRONMENT = true;
+        // SAFETY: jsdom omits ResizeObserver, so the spec supplies the minimal API used here.
+        (globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver ??= class {
+            observe() {
+                return undefined;
+            }
+            unobserve() {
+                return undefined;
+            }
+            disconnect() {
+                return undefined;
+            }
+        };
+
+        capturedSchema = undefined;
+        container = document.createElement('div');
+        document.body.append(container);
+        root = createRoot(container);
+
+        await act(async () => {
+            root.render(
+                <SchemaEditor
+                    schema={schema}
+                    onChange={(updated) => {
+                        capturedSchema = updated;
+                    }}
+                />,
+            );
+        });
+
+        const addressRow = Array.from(
+            container.querySelectorAll<HTMLTableRowElement>('[data-cratis-part="row"]'),
+        ).find((row) => row.textContent?.includes('address'));
+        if (!addressRow) throw new Error('SchemaEditor did not render the address row.');
+        await act(async () => addressRow.click());
+
+        const editButton = Array.from(container.querySelectorAll('button')).find(
+            (button) => button.textContent?.includes('Edit'),
+        );
+        if (!editButton) throw new Error('SchemaEditor did not render an Edit action.');
+        await act(async () => editButton.click());
+
+        const streetRow = Array.from(
+            container.querySelectorAll<HTMLTableRowElement>('[data-cratis-part="row"]'),
+        ).find(
+            (row) =>
+                row.querySelector<HTMLInputElement>('input[aria-label="Property name"]')
+                    ?.value === 'street',
+        );
+        if (!streetRow) throw new Error('SchemaEditor did not render the street row.');
+        const deleteButton = streetRow.querySelector<HTMLButtonElement>(
+            'button[aria-label="Delete property"]',
+        );
+        if (!deleteButton) {
+            throw new Error('SchemaEditor did not render a delete button for street.');
+        }
+
+        await act(async () => deleteButton.click());
+    });
+
+    afterEach(async () => {
+        await act(async () => root.unmount());
+        container.remove();
+    });
+
+    it('should remove the deleted property from the nested properties map', () => {
+        const addressProperties = capturedSchema?.properties?.address.properties ?? {};
+        expect(Object.keys(addressProperties)).to.deep.equal(['city']);
+    });
+
+    it("should remove the deleted property from the nested object's own required array", () => {
+        expect(capturedSchema?.properties?.address.required).to.deep.equal(['city']);
+    });
+
+    it("should leave the root schema's required array untouched", () => {
+        expect(capturedSchema?.required).to.deep.equal(['address']);
+    });
+});
diff --git a/Source/SchemaEditor/for_SchemaEditor/when_renaming_a_required_property_in_a_nested_object.tsx b/Source/SchemaEditor/for_SchemaEditor/when_renaming_a_required_property_in_a_nested_object.tsx
new file mode 100644
index 00000000..e3f3eb91
--- /dev/null
+++ b/Source/SchemaEditor/for_SchemaEditor/when_renaming_a_required_property_in_a_nested_object.tsx
@@ -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.
+
+// @vitest-environment jsdom
+
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { expect } from 'chai';
+import { afterEach, beforeEach, describe, it } from 'vitest';
+import { SchemaEditor } from '../SchemaEditor';
+import type { JsonSchema } from '../../types/JsonSchema';
+
+/**
+ * Regression coverage for two confirmed defects in required-property semantics:
+ *
+ * 1. `required` is tracked per object schema, not globally: a nested `object`
+ *    property's `required` array only names its own properties. Renaming a
+ *    property inside a nested object must never touch the root schema's
+ *    `required` array (or any sibling's), even when a property elsewhere
+ *    happens to share the old or new name.
+ * 2. Renaming a required property must update the `required` array to the new
+ *    name, not leave it pointing at a name that no longer exists in `properties`.
+ */
+describe('when renaming a required property in a nested object', () => {
+    let container: HTMLDivElement;
+    let root: Root;
+    let capturedSchema: JsonSchema | undefined;
+
+    const schema: JsonSchema = {
+        type: 'object',
+        properties: {
+            id: { type: 'string' },
+            address: {
+                type: 'object',
+                properties: {
+                    street: { type: 'string' },
+                    city: { type: 'string' },
+                },
+                required: ['street'],
+            },
+        },
+        required: ['id', 'address'],
+    };
+
+    beforeEach(async () => {
+        // SAFETY: React exposes this test-only flag on globalThis without a declaration.
+        (
+            globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
+        ).IS_REACT_ACT_ENVIRONMENT = true;
+        // SAFETY: jsdom omits ResizeObserver, so the spec supplies the minimal API used here.
+        (globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver ??= class {
+            observe() {
+                return undefined;
+            }
+            unobserve() {
+                return undefined;
+            }
+            disconnect() {
+                return undefined;
+            }
+        };
+
+        capturedSchema = undefined;
+        container = document.createElement('div');
+        document.body.append(container);
+        root = createRoot(container);
+
+        await act(async () => {
+            root.render(
+                <SchemaEditor
+                    schema={schema}
+                    onChange={(updated) => {
+                        capturedSchema = updated;
+                    }}
+                />,
+            );
+        });
+
+        // Navigate into the nested "address" object (read-only mode navigation).
+        const addressRow = Array.from(
+            container.querySelectorAll<HTMLTableRowElement>('[data-cratis-part="row"]'),
+        ).find((row) => row.textContent?.includes('address'));
+        if (!addressRow) throw new Error('SchemaEditor did not render the address row.');
+        await act(async () => addressRow.click());
+
+        // Switch to edit mode without losing the nested navigation path.
+        const editButton = Array.from(container.querySelectorAll('button')).find(
+            (button) => button.textContent?.includes('Edit'),
+        );
+        if (!editButton) throw new Error('SchemaEditor did not render an Edit action.');
+        await act(async () => editButton.click());
+
+        const streetInput = Array.from(
+            container.querySelectorAll<HTMLInputElement>(
+                'input[aria-label="Property name"]',
+            ),
+        ).find((input) => input.value === 'street');
+        if (!streetInput)
+            throw new Error('SchemaEditor did not render the street input.');
+
+        await act(async () => {
+            const setValue = Object.getOwnPropertyDescriptor(
+                HTMLInputElement.prototype,
+                'value',
+            )!.set!;
+            setValue.call(streetInput, 'id');
+            streetInput.dispatchEvent(new Event('input', { bubbles: true }));
+        });
+    });
+
+    afterEach(async () => {
+        await act(async () => root.unmount());
+        container.remove();
+    });
+
+    it('should rename the property within the nested schema', () => {
+        // Renaming re-inserts the new key at the end of the properties map and
+        // removes the old one, so 'city' now precedes the renamed 'id'.
+        const addressProperties = capturedSchema?.properties?.address.properties ?? {};
+        expect(Object.keys(addressProperties)).to.deep.equal(['city', 'id']);
+    });
+
+    it("should update the nested object's own required array to the new name", () => {
+        expect(capturedSchema?.properties?.address.required).to.deep.equal(['id']);
+    });
+
+    it("should never touch the root schema's required array, even given a colliding name", () => {
+        expect(capturedSchema?.required).to.deep.equal(['id', 'address']);
+    });
+
+    it('should leave the root-level sibling property untouched', () => {
+        expect(capturedSchema?.properties?.id).to.deep.equal({ type: 'string' });
+    });
+});
diff --git a/Source/SchemaEditor/for_SchemaEditor/when_schema_contains_a_malformed_nested_property.tsx b/Source/SchemaEditor/for_SchemaEditor/when_schema_contains_a_malformed_nested_property.tsx
new file mode 100644
index 00000000..c0b43873
--- /dev/null
+++ b/Source/SchemaEditor/for_SchemaEditor/when_schema_contains_a_malformed_nested_property.tsx
@@ -0,0 +1,117 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { expect } from 'chai';
+import { afterEach, beforeEach, describe, it } from 'vitest';
+import { SchemaEditor } from '../SchemaEditor';
+import type { JsonSchema, JsonSchemaProperty } from '../../types/JsonSchema';
+
+/**
+ * Regression coverage for a confirmed bypass: `cloneSchema` only checked that the
+ * root of a JSON-round-tripped schema was a plain object, so a nested property
+ * value such as `properties.foo: null` (JSON-valid, but not a usable schema
+ * fragment) passed the clone check unrejected. Later code (`property.type || ...`
+ * while iterating `Object.entries(targetSchema.properties)`) then dereferenced
+ * that `null` and crashed instead of surfacing the existing invalid-schema
+ * message. Nested `properties` values and `items` schemas must be validated
+ * recursively, not just the root.
+ */
+describe('when the schema contains a malformed nested property', () => {
+    let container: HTMLDivElement;
+    let root: Root;
+
+    const schemaWithMalformedNestedProperty: JsonSchema = {
+        type: 'object',
+        properties: {
+            title: { type: 'string' },
+            // SAFETY: intentionally malformed to prove nested clone validation rejects it.
+            foo: null as unknown as JsonSchemaProperty,
+        },
+    };
+
+    beforeEach(async () => {
+        // SAFETY: React exposes this test-only flag on globalThis without a declaration.
+        (
+            globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
+        ).IS_REACT_ACT_ENVIRONMENT = true;
+        // SAFETY: jsdom omits ResizeObserver, so the spec supplies the minimal API used here.
+        (globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver ??= class {
+            observe() {
+                return undefined;
+            }
+            unobserve() {
+                return undefined;
+            }
+            disconnect() {
+                return undefined;
+            }
+        };
+
+        container = document.createElement('div');
+        document.body.append(container);
+        root = createRoot(container);
+
+        await act(async () => {
+            root.render(
+                <SchemaEditor
+                    schema={schemaWithMalformedNestedProperty}
+                    editMode
+                    labels={{ invalidJson: 'Schema JSON is invalid' }}
+                />,
+            );
+        });
+    });
+
+    afterEach(async () => {
+        await act(async () => root.unmount());
+        container.remove();
+    });
+
+    it('should not crash while rendering', () => {
+        expect(container.querySelector('.schema-editor')).not.to.equal(null);
+    });
+
+    it('should expose the invalid-schema message as an accessible alert instead of throwing', () => {
+        const alert = container.querySelector('[role="alert"]');
+        expect(alert?.querySelector('[data-cratis-part="text"]')?.textContent).to.equal(
+            'Schema JSON is invalid',
+        );
+    });
+
+    it('should disable saving', () => {
+        const saveButton = Array.from(container.querySelectorAll('button')).find(
+            (button) => button.textContent?.includes('Save'),
+        );
+        expect(saveButton?.disabled).to.equal(true);
+    });
+
+    it('should recover and preserve valid sibling data once the malformed value is fixed', async () => {
+        const correctedSchema: JsonSchema = {
+            type: 'object',
+            properties: {
+                title: { type: 'string' },
+                foo: { type: 'string' },
+            },
+        };
+
+        await act(async () => {
+            root.render(<SchemaEditor schema={correctedSchema} editMode />);
+        });
+
+        expect(container.querySelector('[role="alert"]')).to.equal(null);
+        const propertyNameInputs = Array.from(
+            container.querySelectorAll<HTMLInputElement>(
+                'input[aria-label="Property name"]',
+            ),
+        ).map((input) => input.value);
+        expect(propertyNameInputs).to.deep.equal(['title', 'foo']);
+        const saveButton = Array.from(container.querySelectorAll('button')).find(
+            (button) => button.textContent?.includes('Save'),
+        );
+        expect(saveButton?.disabled).to.equal(false);
+    });
+});
diff --git a/Source/types/JsonSchema.ts b/Source/types/JsonSchema.ts
index 23cf33ed..6a0f5c55 100644
--- a/Source/types/JsonSchema.ts
+++ b/Source/types/JsonSchema.ts
@@ -49,8 +49,8 @@ export interface JsonSchemaProperty {
     items?: JsonSchema;
     /** Nested object property definitions (when `type` is "object"). */
     properties?: Record<string, JsonSchemaProperty>;
-    /** Whether this property is required in its parent object. */
-    required?: boolean;
+    /** List of required property names within this property's own `properties` (when `type` is "object"). Matches {@link JsonSchema.required}. */
+    required?: string[];
     /** Reference to another schema definition (URI fragment or external reference). */
     $ref?: string;
 }

From 77cef62bec84d66e071f1cce140c38f8e4eb1dbf Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 00:37:34 +0200
Subject: [PATCH 113/267] Honor time-bearing bounds in DatePicker Today action

Compare the exact local-midnight value emitted by Today at the picker's active granularity so date-time bounds on the same day cannot be bypassed.
---
 Source/Common/DatePickerInput.tsx                  |  9 +++++++--
 .../when_bounding_the_today_action.tsx             | 14 ++++++++++++++
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/Source/Common/DatePickerInput.tsx b/Source/Common/DatePickerInput.tsx
index cbf25801..ec1df8a4 100644
--- a/Source/Common/DatePickerInput.tsx
+++ b/Source/Common/DatePickerInput.tsx
@@ -200,9 +200,14 @@ export const DatePickerInput = ({
     const datePickerMessages = messages?.datePicker;
     const resolvedTodayLabel = todayLabel ?? datePickerMessages?.today ?? 'Today';
     const resolvedClearLabel = clearLabel ?? datePickerMessages?.clear ?? 'Clear';
+    const timeZone = getLocalTimeZone();
     const minValue = asDateValue(minDate ?? null, showTime) ?? undefined;
     const maxValue = asDateValue(maxDate ?? null, showTime) ?? undefined;
-    const todayValue = today(getLocalTimeZone());
+    const todayDate = today(timeZone).toDate(timeZone);
+    // Compare the same granularity that the action emits. In date-time mode the Today action
+    // retains its existing local-midnight value, which can legitimately fall before a same-day
+    // minDate carrying a later time.
+    const todayValue = asDateValue(todayDate, showTime)!;
     const isTodayOutOfBounds =
         (minValue !== undefined && todayValue.compare(minValue) < 0) ||
         (maxValue !== undefined && todayValue.compare(maxValue) > 0);
@@ -454,7 +459,7 @@ export const DatePickerInput = ({
                                     aria-disabled={isTodayOutOfBounds || undefined}
                                     onClick={() => {
                                         if (isTodayOutOfBounds) return;
-                                        onChange(todayValue.toDate(getLocalTimeZone()));
+                                        onChange(todayDate);
                                     }}
                                 >
                                     {resolvedTodayLabel}
diff --git a/Source/Common/for_DatePickerInput/when_bounding_the_today_action.tsx b/Source/Common/for_DatePickerInput/when_bounding_the_today_action.tsx
index 7f6f2f34..d3fb1ac6 100644
--- a/Source/Common/for_DatePickerInput/when_bounding_the_today_action.tsx
+++ b/Source/Common/for_DatePickerInput/when_bounding_the_today_action.tsx
@@ -34,6 +34,7 @@ describe('when bounding the Today action by minDate/maxDate', () => {
     const mount = async (options: {
         minDate?: Date;
         maxDate?: Date;
+        showTime?: boolean;
         onChange: (value: Date | null) => void;
     }) => {
         // SAFETY: React's test-environment flag is an intentionally undocumented global absent from DOM typings.
@@ -52,6 +53,7 @@ describe('when bounding the Today action by minDate/maxDate', () => {
                         onChange={options.onChange}
                         aria-label='Appointment date'
                         showButtonBar
+                        showTime={options.showTime}
                         minDate={options.minDate}
                         maxDate={options.maxDate}
                     />
@@ -99,6 +101,18 @@ describe('when bounding the Today action by minDate/maxDate', () => {
         expect(onChange.mock.calls).to.deep.equal([]);
     });
 
+    it('should honor the time portion of bounds in date-time mode', async () => {
+        const onChange = vi.fn();
+        const middayToday = new Date(today);
+        middayToday.setHours(12);
+        const todayButton = await mount({
+            minDate: middayToday,
+            showTime: true,
+            onChange,
+        });
+        expect(todayButton.disabled).to.equal(true);
+    });
+
     it('should keep the Today action enabled when today is within bounds', async () => {
         const onChange = vi.fn();
         const todayButton = await mount({

From 82f979b4a36f413fd32b70a0993684c3f28b9acd Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 00:37:47 +0200
Subject: [PATCH 114/267] Preserve and enforce published API documentation

Retain TSDoc and deprecation guidance in declarations while stripping it from runtime JavaScript, validate public class and enum members, and enforce comment fidelity on the packed archive.
---
 .../shapes/ChatBubble/ChatAuthorKind.ts       |   3 +
 .../shapes/ChatBubble/ChatMessageAdded.ts     |   2 +
 Source/Canvas/shapes/Note/NoteTextChanged.ts  |   2 +
 .../Canvas/shapes/Region/ItemAddedToRegion.ts |   2 +
 .../shapes/Region/ItemRemovedFromRegion.ts    |   2 +
 Source/Common/ErrorBoundary.tsx               |   6 +
 Source/scripts/verify-api-docs.mjs            | 234 +++++++++++++++++-
 Source/scripts/verify-package-archive.mjs     |  21 ++
 rollup.config.mjs                             |   6 +
 tsconfig.json                                 |  14 +-
 10 files changed, 271 insertions(+), 21 deletions(-)

diff --git a/Source/Canvas/shapes/ChatBubble/ChatAuthorKind.ts b/Source/Canvas/shapes/ChatBubble/ChatAuthorKind.ts
index b33136d4..583beb78 100644
--- a/Source/Canvas/shapes/ChatBubble/ChatAuthorKind.ts
+++ b/Source/Canvas/shapes/ChatBubble/ChatAuthorKind.ts
@@ -6,6 +6,9 @@
  * is resolved when a conversation is rendered — it decides which avatar the message shows.
  */
 export enum ChatAuthorKind {
+    /** A message authored by an application user. */
     User = 'user',
+
+    /** A message authored by an automated agent. */
     Agent = 'agent',
 }
diff --git a/Source/Canvas/shapes/ChatBubble/ChatMessageAdded.ts b/Source/Canvas/shapes/ChatBubble/ChatMessageAdded.ts
index 7cec032d..031290e9 100644
--- a/Source/Canvas/shapes/ChatBubble/ChatMessageAdded.ts
+++ b/Source/Canvas/shapes/ChatBubble/ChatMessageAdded.ts
@@ -8,7 +8,9 @@
  */
 export class ChatMessageAdded {
     constructor(
+        /** Caller-owned identity of the conversation that accepted the message. */
         readonly chatId: string,
+        /** Full text submitted by the composer. */
         readonly text: string,
     ) {}
 }
diff --git a/Source/Canvas/shapes/Note/NoteTextChanged.ts b/Source/Canvas/shapes/Note/NoteTextChanged.ts
index f91f5fd7..75a8a8fc 100644
--- a/Source/Canvas/shapes/Note/NoteTextChanged.ts
+++ b/Source/Canvas/shapes/Note/NoteTextChanged.ts
@@ -8,7 +8,9 @@
  */
 export class NoteTextChanged {
     constructor(
+        /** Caller-owned identity of the edited note. */
         readonly noteId: string,
+        /** Full text committed when editing ended. */
         readonly text: string,
     ) {}
 }
diff --git a/Source/Canvas/shapes/Region/ItemAddedToRegion.ts b/Source/Canvas/shapes/Region/ItemAddedToRegion.ts
index 35c123e6..930385d6 100644
--- a/Source/Canvas/shapes/Region/ItemAddedToRegion.ts
+++ b/Source/Canvas/shapes/Region/ItemAddedToRegion.ts
@@ -10,7 +10,9 @@
  */
 export class ItemAddedToRegion {
     constructor(
+        /** Caller-owned identity of the region that now contains the item. */
         readonly regionId: string,
+        /** Caller-owned identity of the item whose center entered the region. */
         readonly itemId: string,
     ) {}
 }
diff --git a/Source/Canvas/shapes/Region/ItemRemovedFromRegion.ts b/Source/Canvas/shapes/Region/ItemRemovedFromRegion.ts
index 58ab42ca..74e8f160 100644
--- a/Source/Canvas/shapes/Region/ItemRemovedFromRegion.ts
+++ b/Source/Canvas/shapes/Region/ItemRemovedFromRegion.ts
@@ -9,7 +9,9 @@
  */
 export class ItemRemovedFromRegion {
     constructor(
+        /** Caller-owned identity of the region that no longer contains the item. */
         readonly regionId: string,
+        /** Caller-owned identity of the item whose center left the region. */
         readonly itemId: string,
     ) {}
 }
diff --git a/Source/Common/ErrorBoundary.tsx b/Source/Common/ErrorBoundary.tsx
index 3bb13a50..584c4336 100644
--- a/Source/Common/ErrorBoundary.tsx
+++ b/Source/Common/ErrorBoundary.tsx
@@ -67,6 +67,12 @@ export class ErrorBoundary extends Component<Props, State> {
         console.error('Uncaught error:', error, errorInfo);
     }
 
+    /**
+     * Renders the protected children until an error is captured, then renders the scoped
+     * diagnostic fallback.
+     *
+     * @returns The protected subtree or the fallback error content.
+     */
     public render() {
         if (this.state.hasError) {
             return (
diff --git a/Source/scripts/verify-api-docs.mjs b/Source/scripts/verify-api-docs.mjs
index ee8a583d..bfa48f1c 100644
--- a/Source/scripts/verify-api-docs.mjs
+++ b/Source/scripts/verify-api-docs.mjs
@@ -31,9 +31,13 @@
  *   - For an interface (or a type alias whose type is an object literal), every
  *     member *declared directly on that interface/type* (not one inherited through
  *     `extends`/`Omit<...>` from a type this package does not itself export) must
- *     also carry a TSDoc comment. Enum members and function parameters are not
- *     individually required to reduce noise on self-describing enums - the enum
- *     declaration itself still needs a comment.
+ *     also carry a TSDoc comment.
+ *   - Every directly declared public class member is checked, including static
+ *     members and constructor parameter properties. Constructors themselves and
+ *     private/protected/#private members are excluded because they are not separate
+ *     public symbols a consumer can use.
+ *   - Every enum member is checked. Function parameters remain documented through
+ *     the owning function's `@param` tags rather than as independent symbols.
  *
  * Usage:  node scripts/verify-api-docs.mjs [--self-test-only] [--skip-self-test]
  * Exits non-zero if the self-tests regress, or if any reachable declaration/member
@@ -196,6 +200,81 @@ function ownMembersOf(target) {
     return members;
 }
 
+const modifiersOf = (node) =>
+    ts.canHaveModifiers(node) ? (ts.getModifiers(node) ?? []) : [];
+
+const hasModifier = (node, ...kinds) =>
+    modifiersOf(node).some((modifier) => kinds.includes(modifier.kind));
+
+const isPrivateOrProtected = (node) =>
+    hasModifier(node, ts.SyntaxKind.PrivateKeyword, ts.SyntaxKind.ProtectedKeyword);
+
+const addNamedSymbol = (checker, node, members, seen) => {
+    if (!node || ts.isPrivateIdentifier(node)) return;
+    const symbol = checker.getSymbolAtLocation(node);
+    if (!symbol || seen.has(symbol)) return;
+    seen.add(symbol);
+    members.push(symbol);
+};
+
+/** Public members declared directly by a class, including constructor parameter properties. */
+function ownPublicClassMembersOf(checker, target) {
+    const members = [];
+    const seen = new Set();
+    for (const declaration of target.declarations ?? []) {
+        if (!ts.isClassDeclaration(declaration)) continue;
+        for (const member of declaration.members) {
+            if (ts.isConstructorDeclaration(member)) {
+                for (const parameter of member.parameters) {
+                    const isParameterProperty = modifiersOf(parameter).some((modifier) =>
+                        [
+                            ts.SyntaxKind.PublicKeyword,
+                            ts.SyntaxKind.PrivateKeyword,
+                            ts.SyntaxKind.ProtectedKeyword,
+                            ts.SyntaxKind.ReadonlyKeyword,
+                        ].includes(modifier.kind),
+                    );
+                    if (!isParameterProperty || isPrivateOrProtected(parameter)) continue;
+                    addNamedSymbol(checker, parameter.name, members, seen);
+                }
+                continue;
+            }
+            if (isPrivateOrProtected(member)) continue;
+            addNamedSymbol(checker, member.name, members, seen);
+        }
+    }
+    return members;
+}
+
+/** Members declared directly by an enum. */
+function ownEnumMembersOf(checker, target) {
+    const members = [];
+    const seen = new Set();
+    for (const declaration of target.declarations ?? []) {
+        if (!ts.isEnumDeclaration(declaration)) continue;
+        for (const member of declaration.members) {
+            addNamedSymbol(checker, member.name, members, seen);
+        }
+    }
+    return members;
+}
+
+function membersRequiringDocs(checker, target) {
+    if (
+        (target.flags & ts.SymbolFlags.Interface) !== 0 ||
+        (target.flags & ts.SymbolFlags.TypeAlias) !== 0
+    ) {
+        return ownMembersOf(target);
+    }
+    if ((target.flags & ts.SymbolFlags.Class) !== 0) {
+        return ownPublicClassMembersOf(checker, target);
+    }
+    if ((target.flags & ts.SymbolFlags.RegularEnum) !== 0) {
+        return ownEnumMembersOf(checker, target);
+    }
+    return [];
+}
+
 /**
  * Walks every reachable exported declaration starting from `rootFile`, calling
  * `visit(target, path)` once per unique concrete declaration reached (`path` is a
@@ -296,12 +375,7 @@ export function findMissingDocs(root, fileToSubpaths) {
             });
         }
 
-        const isInterfaceLike =
-            (target.flags & ts.SymbolFlags.Interface) !== 0 ||
-            (target.flags & ts.SymbolFlags.TypeAlias) !== 0;
-        if (!isInterfaceLike) continue;
-
-        for (const member of ownMembersOf(target)) {
+        for (const member of membersRequiringDocs(checker, target)) {
             if (hasDocComment(checker, member)) continue;
             const { file: declFile, line } = locationOf(member);
             violations.push({
@@ -413,6 +487,145 @@ function selfTestDocumentedPasses() {
     }
 }
 
+function selfTestClassAndEnumMembersAreFlagged() {
+    const dir = makeFixture({
+        'tsconfig.json': FIXTURE_TSCONFIG,
+        'Widget/index.ts': `/** A public worker. */
+export class Worker {
+    missing = 1;
+    constructor(readonly missingId: string, private hiddenId: string) {}
+    static missingStatic() {}
+    private hidden = true;
+}
+/** Available modes. */
+export enum Mode {
+    Missing = 'missing',
+}
+`,
+    });
+    try {
+        const { fileToSubpaths } = resolveBarrelsFromExports(
+            {
+                name: '@fixture/pkg',
+                exports: {
+                    './Widget': {
+                        types: './dist/esm/Widget/index.d.ts',
+                        import: './dist/esm/Widget/index.js',
+                    },
+                },
+            },
+            dir,
+        );
+        const symbols = findMissingDocs(dir, fileToSubpaths).map(
+            (violation) => violation.symbol,
+        );
+        for (const expected of [
+            'Worker.missing',
+            'Worker.missingId',
+            'Worker.missingStatic',
+            'Mode.Missing',
+        ]) {
+            assert(symbols.includes(expected), `expected ${expected} to be flagged`);
+        }
+        assert(!symbols.includes('Worker.hidden'), 'private class members must be ignored');
+        assert(!symbols.includes('Worker.hiddenId'), 'private parameter properties must be ignored');
+        assert(!symbols.some((symbol) => symbol.includes('constructor')), 'constructors must be ignored');
+    } finally {
+        rmSync(dir, { recursive: true, force: true });
+    }
+}
+
+function selfTestDocumentedClassAndEnumPasses() {
+    const dir = makeFixture({
+        'tsconfig.json': FIXTURE_TSCONFIG,
+        'Widget/index.ts': `/** A public worker. */
+export class Worker {
+    /** Current state. */
+    state = 1;
+    constructor(
+        /** Stable identity. */
+        readonly id: string,
+        private hiddenId: string,
+    ) {}
+    /** Creates a worker. */
+    static create() { return new Worker('sample', 'hidden'); }
+    /** Runs the worker. */
+    run() {}
+    private hidden = true;
+}
+/** Available modes. */
+export enum Mode {
+    /** The active mode. */
+    Active = 'active',
+}
+`,
+    });
+    try {
+        const { fileToSubpaths } = resolveBarrelsFromExports(
+            {
+                name: '@fixture/pkg',
+                exports: {
+                    './Widget': {
+                        types: './dist/esm/Widget/index.d.ts',
+                        import: './dist/esm/Widget/index.js',
+                    },
+                },
+            },
+            dir,
+        );
+        const violations = findMissingDocs(dir, fileToSubpaths);
+        assert(
+            violations.length === 0,
+            `expected documented class/enum members to pass, got: ${JSON.stringify(violations)}`,
+        );
+    } finally {
+        rmSync(dir, { recursive: true, force: true });
+    }
+}
+
+function selfTestDeclarationEmitRetainsDocs() {
+    const configPath = path.join(packageDir, 'tsconfig.json');
+    const configFile = ts.readConfigFile(configPath, ts.sys.readFile);
+    assert(!configFile.error, 'Source/tsconfig.json must parse');
+    const parsed = ts.parseJsonConfigFileContent(configFile.config, ts.sys, packageDir);
+    assert(parsed.options.removeComments !== true, 'declaration emit must retain TSDoc comments');
+
+    const dir = makeFixture({
+        'Widget.ts': '/** Public widget contract. */\nexport interface Widget {\n    /** Visible label. */\n    label: string;\n}\n',
+    });
+    try {
+        const source = path.join(dir, 'Widget.ts');
+        const output = new Map();
+        const options = {
+            ...parsed.options,
+            composite: false,
+            incremental: false,
+            noEmit: false,
+            declaration: true,
+            declarationMap: false,
+            sourceMap: false,
+            emitDeclarationOnly: true,
+            outDir: path.join(dir, 'dist'),
+        };
+        const host = ts.createCompilerHost(options);
+        host.writeFile = (fileName, content) => output.set(fileName, content);
+        const program = ts.createProgram({ rootNames: [source], options, host });
+        const result = program.emit();
+        assert(!result.emitSkipped, 'declaration-fidelity fixture must emit');
+        const declaration = [...output.entries()].find(([fileName]) =>
+            fileName.endsWith('.d.ts'),
+        )?.[1];
+        assert(declaration, 'declaration-fidelity fixture must produce a .d.ts');
+        assert(
+            declaration.includes('/** Public widget contract. */') &&
+                declaration.includes('/** Visible label. */'),
+            'published declaration emit must preserve declaration and member TSDoc',
+        );
+    } finally {
+        rmSync(dir, { recursive: true, force: true });
+    }
+}
+
 function selfTestUnreachableLocalExportIsIgnored() {
     const dir = makeFixture({
         'tsconfig.json': FIXTURE_TSCONFIG,
@@ -484,6 +697,9 @@ function selfTestNamespaceReExportIsFollowedAndDeduped() {
 const SELF_TESTS = [
     ['flags an undocumented interface and member', selfTestUndocumentedIsFlagged],
     ['passes a fully documented barrel', selfTestDocumentedPasses],
+    ['flags undocumented public class and enum members', selfTestClassAndEnumMembersAreFlagged],
+    ['passes documented class and enum members', selfTestDocumentedClassAndEnumPasses],
+    ['preserves TSDoc in declaration emit', selfTestDeclarationEmitRetainsDocs],
     ['ignores an unreachable local export', selfTestUnreachableLocalExportIsIgnored],
     [
         'follows and dedupes a namespace re-export',
diff --git a/Source/scripts/verify-package-archive.mjs b/Source/scripts/verify-package-archive.mjs
index b93111d0..f36fc86c 100644
--- a/Source/scripts/verify-package-archive.mjs
+++ b/Source/scripts/verify-package-archive.mjs
@@ -90,6 +90,27 @@ try {
     process.exit(1);
 }
 
+const declarationWithDocs = readPackedText(
+    'package/dist/esm/Common/ErrorBoundary.d.ts',
+);
+const declarationWithDeprecations = readPackedText(
+    'package/dist/esm/Common/DatePickerInput.d.ts',
+);
+const runtimeWithoutDocs = readPackedText('package/dist/esm/Common/ErrorBoundary.js');
+const apiDocMarker = 'React error boundary that catches errors thrown by its descendants';
+if (!declarationWithDocs.includes(apiDocMarker)) {
+    console.error('Published declarations stripped the ErrorBoundary TSDoc contract.');
+    process.exit(1);
+}
+if (!declarationWithDeprecations.includes('@deprecated')) {
+    console.error('Published declarations stripped @deprecated migration guidance.');
+    process.exit(1);
+}
+if (runtimeWithoutDocs.includes(apiDocMarker)) {
+    console.error('Published runtime JavaScript retained declaration-only TSDoc text.');
+    process.exit(1);
+}
+
 const stylesEntry = 'package/dist/esm/styles.css';
 const styles = readPackedText(stylesEntry);
 try {
diff --git a/rollup.config.mjs b/rollup.config.mjs
index ac427cbd..58e9e7f8 100644
--- a/rollup.config.mjs
+++ b/rollup.config.mjs
@@ -386,6 +386,12 @@ export function rollup(esmPath, tsconfigPath, pkg) {
                     declaration: false,
                     declarationMap: false,
                     composite: false,
+                    // This pass produces the actual shipped runtime JS (it overwrites the
+                    // `.js` files `tsc -b` wrote, in place). Declaration emit is off here, so
+                    // stripping comments only affects runtime bytes, never the published
+                    // `.d.ts` - those come from the earlier `tsc -b` pass, which intentionally
+                    // keeps comments (root tsconfig.json) so TSDoc reaches consumers.
+                    removeComments: true,
                 },
             }),
             generatePackageJson(esmPath),
diff --git a/tsconfig.json b/tsconfig.json
index e06fa007..bed9a90c 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -8,7 +8,6 @@
         "sourceMap": true,
         "importHelpers": true,
         "composite": true,
-        "removeComments": true,
         "strict": true,
         "allowJs": false,
         "checkJs": false,
@@ -19,12 +18,7 @@
         "pretty": true,
         "noImplicitAny": true,
         "skipLibCheck": true,
-        "lib": [
-            "ESNext",
-            "ES2022",
-            "DOM",
-            "DOM.Iterable"
-        ],
+        "lib": ["ESNext", "ES2022", "DOM", "DOM.Iterable"],
         "jsx": "react-jsx",
         "esModuleInterop": true,
         "strictNullChecks": true,
@@ -42,9 +36,5 @@
         "preserveConstEnums": true,
         "newLine": "lf"
     },
-    "exclude": [
-        "**/dist",
-        "**/for_*/**",
-        "**/vite.config.mts"
-    ]
+    "exclude": ["**/dist", "**/for_*/**", "**/vite.config.mts"]
 }

From d3d0c15f8712e2eee3c27a9b1a391bf19a743300 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 00:37:54 +0200
Subject: [PATCH 115/267] Validate the complete supported SchemaEditor shape

Reject malformed required arrays and definitions alongside properties/items, add recovery regressions, and replace stale editing/validation claims with the behavior the component actually supports.
---
 Documentation/SchemaEditor/editing.md         | 224 ++++--------
 Documentation/SchemaEditor/index.md           |  26 +-
 Documentation/SchemaEditor/validation.md      | 319 ++++--------------
 Source/SchemaEditor/SchemaEditor.tsx          |  32 +-
 ...a_contains_a_malformed_nested_property.tsx |  14 +
 5 files changed, 174 insertions(+), 441 deletions(-)

diff --git a/Documentation/SchemaEditor/editing.md b/Documentation/SchemaEditor/editing.md
index 536b1704..ae849d17 100644
--- a/Documentation/SchemaEditor/editing.md
+++ b/Documentation/SchemaEditor/editing.md
@@ -1,207 +1,121 @@
 # SchemaEditor - Editing Properties
 
-## Adding Properties
+SchemaEditor is controlled: it emits each structural change through `onChange`, and the host decides when and where to persist the resulting schema. Save and Cancel are workflow actions around that controlled value; they do not perform transport themselves.
 
-Click the "Add Property" button or row to create a new property:
+## Enter edit mode
 
-```typescript
-<SchemaEditor
-    schema={schema}
-    onChange={(newSchema) => {
-        console.log('Property added:', newSchema);
-        setSchema(newSchema);
-    }}
-/>
-```
+Use the Edit action in the SchemaEditor toolbar. Set `editMode` to choose the initial mode, or set `canEdit={false}` to prevent editing.
 
-New properties default to:
+When `canEdit` is false, `canNotEditReason` can explain why the Edit action is unavailable.
 
-- Name: empty (must be filled)
-- Type: `string`
-- Format: none
-- Required: `false`
+## Add a property
 
-## Editing Property Name
+Choose **Add Property** while editing. SchemaEditor creates a unique sibling name:
 
-Click the name cell to edit:
+- `newProperty`
+- `newProperty1` when `newProperty` already exists
+- then the next available numeric suffix
 
-1. Click the cell
-2. Enter the property name
-3. Press Enter or click outside to save
-4. Press Escape to cancel
+The property starts as `{ type: 'string' }`. Rename it and choose its type or format in the table. The generated name is valid immediately; Save is disabled only when a later edit makes a name invalid.
 
-Property names must:
-
-- Be unique within the schema
-- Follow JavaScript identifier rules (alphanumeric, underscores)
-- Not be empty
-
-Invalid names show an error indicator.
+```tsx
+<SchemaEditor
+    schema={schema}
+    editMode
+    onChange={setSchema}
+    onSave={() => persist(schema)}
+/>
+```
 
-## Changing Property Type
+## Rename a property
 
-Use the type dropdown to select:
+The Name input updates the controlled schema as you type. Names must be non-empty, unique among siblings, and match the identifier pattern documented in [Validation](validation.md#property-name-validation).
 
-- `string` - Text values
-- `number` - Numeric values (integers and decimals)
-- `integer` - Whole numbers only
-- `boolean` - True/false values
-- `object` - Nested objects
-- `array` - Lists of items
-- `null` - Null values
+Invalid names receive an accessible invalid state and keep Save disabled. Renaming a required property also updates the matching entry in that object's `required` array.
 
-```typescript
-// Example schema with various types
-{
-    type: 'object',
-    properties: {
-        name: { type: 'string' },
-        age: { type: 'integer' },
-        price: { type: 'number' },
-        active: { type: 'boolean' },
-        tags: { type: 'array', items: { type: 'string' } },
-        metadata: { type: 'object' }
-    }
-}
-```
+## Change type and format
 
-## Setting Format
+The Type control combines JSON types and configured formats. The maintained defaults include:
 
-For `string` types, select a format to provide hints about expected value patterns:
+- `string`, `guid`, `date-time`, `date`, and `time`
+- `integer`, `int16`, `int32`, and `int64`
+- `number`, `float`, and `double`
+- `boolean`
+- container types `object` and `array`
 
-### Date and Time Formats
+Pass `typeFormats` to replace the maintained leaf type/format list. `object` and `array` remain available as container types.
 
-- `date` - Full date (2024-01-15)
-- `time` - Time of day (14:30:00)
-- `date-time` - Combined date and time (2024-01-15T14:30:00Z)
+Changing type intentionally normalizes the supported structure:
 
-### Identifier Formats
+- `array` receives string `items` by default.
+- `object` receives empty `properties`.
+- Moving to a leaf removes stale nested `items`, `properties`, and nested required names.
+- Choosing a type without a format removes the previous format.
 
-- `uuid` - UUID/GUID strings
-- `uri` - URIs and URLs
-- `email` - Email addresses
-- `hostname` - DNS hostnames
-- `ipv4` / `ipv6` - IP addresses
+For arrays, a second control chooses the item type. Object item schemas can be opened and edited through the same nested navigation.
 
-### Other Formats
+## Navigate nested schemas
 
-- `json-pointer` - JSON pointer references
-- `regex` - Regular expression patterns
+Object properties and object-valued array items expose navigation actions. The breadcrumb shows the current path and lets you return to any ancestor.
 
-```typescript
-{
-    type: 'object',
-    properties: {
-        email: { type: 'string', format: 'email' },
-        website: { type: 'string', format: 'uri' },
-        userId: { type: 'string', format: 'uuid' },
-        birthDate: { type: 'string', format: 'date' }
-    }
-}
-```
+Each nested object is edited in its own scope. Its `properties` and `required` array are independent of the parent object's arrays.
 
-## Required Properties
+## Required properties
 
-SchemaEditor does not currently render a Required column or an interactive
-checkbox to toggle a property's required state — there is no in-table
-control for this. Set and unset required properties by editing the schema's
-`required` array yourself (for example before passing `schema`, or by
-transforming the value your own `onChange` handler receives).
+SchemaEditor does not currently render a Required column or an interactive required/optional toggle. Set required names in the schema before rendering, or transform the controlled schema in host code.
 
-What SchemaEditor _does_ guarantee is that the `required` array on each
-object schema stays internally consistent as you edit that object's other
-properties:
+SchemaEditor keeps existing required names consistent while editing:
 
-- Renaming a required property updates the `required` array to the new name.
-- Deleting a required property removes it from the `required` array as well as from `properties` — no separate step is needed.
-- Each nested `object` schema's `required` array is scoped to its own `properties`, independent of its parent's or any sibling's `required` array.
+- Renaming a required property renames its required entry.
+- Deleting a required property removes its required entry.
+- Replacing nested object structure removes stale nested required names.
 
 ```typescript
-{
+const schema = {
     type: 'object',
     properties: {
         name: { type: 'string' },
-        email: { type: 'string' }
+        address: {
+            type: 'object',
+            properties: {
+                city: { type: 'string' }
+            },
+            required: ['city']
+        }
     },
-    required: ['name', 'email']  // Both are required
-}
+    required: ['name']
+};
 ```
 
-## Removing Properties
-
-Click the delete button (trash icon) on any row to remove that property.
-
-A confirmation may appear for:
-
-- Properties marked as required
-- Properties with nested schemas
-- Properties used in dependencies
-
-## Inline Validation
-
-The editor validates input as you type:
+## Remove a property
 
-- **Name conflicts**: Red highlight if name already exists
-- **Invalid characters**: Warning for non-identifier characters
-- **Empty names**: Error indicator
-- **Type mismatches**: Format options only for compatible types
+Use the row's delete action. Removal is immediate and emits the updated schema through `onChange`; SchemaEditor does not show a confirmation dialog. A removed required property is also removed from the current object's `required` array.
 
-## Keyboard Shortcuts
+Add confirmation in the host before allowing edit mode, or wrap persistence in the product's own review workflow when removal needs domain-specific approval.
 
-- `Enter` - Save current cell edit
-- `Escape` - Cancel current cell edit
-- `Tab` - Move to next cell
-- `Shift+Tab` - Move to previous cell
-- `Delete` (on row) - Remove property
+## Save and Cancel
 
-## Undo/Redo
+- **Save** invokes `onSave` and leaves edit mode. It is disabled while property-name or schema-shape errors exist.
+- **Cancel** restores the snapshot captured when edit mode began, emits that restored value through `onChange`, invokes `onCancel`, and leaves edit mode.
+- `saveDisabled` and `cancelDisabled` hide the corresponding actions when the host owns those decisions elsewhere.
 
-(If implemented) Use undo/redo to revert changes:
+Because `onChange` is emitted during editing, keep the latest controlled value in state. If persistence is asynchronous, perform it in `onSave` using that state.
 
-```typescript
-const [schema, setSchema] = useState(initialSchema);
-const [history, setHistory] = useState([initialSchema]);
-const [historyIndex, setHistoryIndex] = useState(0);
-
-const handleUndo = () => {
-    if (historyIndex > 0) {
-        setHistoryIndex(historyIndex - 1);
-        setSchema(history[historyIndex - 1]);
-    }
-};
-
-const handleRedo = () => {
-    if (historyIndex < history.length - 1) {
-        setHistoryIndex(historyIndex + 1);
-        setSchema(history[historyIndex + 1]);
-    }
-};
-```
+## Host-owned history and batch operations
 
-## Batch Operations
+SchemaEditor does not include undo/redo, row selection, or batch operations. A host can store successive `onChange` values to provide history, or transform the schema before passing a replacement value back.
 
-Select multiple properties for batch operations:
+Do not infer batch or history behavior from the underlying table component; SchemaEditor exposes only the actions documented here.
 
-- Change type for all selected
-- Mark all as required/optional
-- Delete multiple properties
-- Apply format to all
+## Read-only use
 
-## Read-Only Mode
+Set `canEdit={false}` to keep the schema browsable without exposing editing actions:
 
-Disable editing to display schema structure without allowing changes:
-
-```typescript
+```tsx
 <SchemaEditor
     schema={schema}
-    onChange={setSchema}
     canEdit={false}
 />
 ```
 
-In read-only mode:
-
-- No add/delete buttons
-- Cells are not editable
-- Displays current schema structure
-- Useful for schema review or documentation
+Nested object/array navigation and descriptions remain available for review. Add, delete, type, format, Save, and Cancel actions are unavailable.
diff --git a/Documentation/SchemaEditor/index.md b/Documentation/SchemaEditor/index.md
index 9c5a9963..4f9e2dd2 100644
--- a/Documentation/SchemaEditor/index.md
+++ b/Documentation/SchemaEditor/index.md
@@ -6,7 +6,7 @@ SchemaEditor belongs to the [Advanced React capability profile](../ui-foundation
 
 ## Purpose
 
-SchemaEditor allows users to define data structures by adding properties, specifying types, and configuring validation rules in a user-friendly table format.
+SchemaEditor lets users define data structures by adding properties, choosing supported types and formats, and navigating nested object/array schemas in a table interface.
 
 ## Key Features
 
@@ -21,11 +21,12 @@ SchemaEditor allows users to define data structures by adding properties, specif
 
 ## Quick Start
 
-```typescript
+```tsx
+import { useState } from 'react';
 import { SchemaEditor } from '@cratis/components/SchemaEditor';
-import { JsonSchema } from '@cratis/components/types';
+import type { JsonSchema } from '@cratis/components/types';
 
-function MySchemaEditor() {
+export function MySchemaEditor() {
     const [schema, setSchema] = useState<JsonSchema>({
         type: 'object',
         properties: {
@@ -48,17 +49,16 @@ function MySchemaEditor() {
 
 The component works with JSON schemas following the JSON Schema specification:
 
-```typescript
+```json
 {
-    type: 'object',
-    properties: {
-        propertyName: {
-            type: 'string' | 'number' | 'boolean' | 'object' | 'array',
-            format?: 'date' | 'time' | 'date-time' | 'email' | 'uri' | 'uuid' | ...,
-            // ... other validation rules
+    "type": "object",
+    "properties": {
+        "propertyName": {
+            "type": "string",
+            "format": "date"
         }
     },
-    required: ['propertyName']
+    "required": ["propertyName"]
 }
 ```
 
@@ -68,7 +68,7 @@ SchemaEditor and [`ObjectContentEditor`](../ObjectContentEditor/index.md) share
 
 - `title`, `name`, `$id`, `$ref`, `type`, `format`, `description`
 - `properties` and `items` (recursively, for `object` and `array`)
-- `required` (a string array on `JsonSchema`; a `boolean` flag per property on `JsonSchemaProperty`)
+- `required` (a string array on every object schema, including an object-valued property, naming required children in that same `properties` object)
 - `definitions`, for schemas reused via `$ref`
 
 The type editor offers `string`, `integer`, `number`, and `boolean` as leaf types, plus `array` and `object` as container types, with the built-in format catalog (`DEFAULT_TYPE_FORMATS`, also exported from `types`): `guid`, `date-time`, `date`, and `time` for `string`; `int16`, `int32`, and `int64` for `integer`; `float` and `double` for `number`.
diff --git a/Documentation/SchemaEditor/validation.md b/Documentation/SchemaEditor/validation.md
index 18d7982f..8320035b 100644
--- a/Documentation/SchemaEditor/validation.md
+++ b/Documentation/SchemaEditor/validation.md
@@ -1,310 +1,111 @@
 # SchemaEditor - Validation
 
-## Property Name Validation
+SchemaEditor validates the subset it actively edits. It prevents malformed schema structure and invalid property names from being saved, but it is not a general-purpose JSON Schema validator.
 
-### Rules
+## Supported structural validation
 
-Property names must:
-
-1. **Be unique** within the schema
-2. **Not be empty**
-3. **Follow identifier conventions** (recommended but not enforced)
-    - Start with letter or underscore
-    - Contain only letters, numbers, underscores
-    - Avoid JavaScript reserved words
-
-### Uniqueness Check
-
-```typescript
-// ✅ Valid - unique names
-{
-    properties: {
-        firstName: { type: 'string' },
-        lastName: { type: 'string' }
-    }
-}
-
-// ❌ Invalid - duplicate names
-{
-    properties: {
-        name: { type: 'string' },
-        name: { type: 'number' }  // Error: duplicate
-    }
-}
-```
-
-### Visual Feedback
-
-- **Green checkmark**: Valid, unique name
-- **Red highlight**: Duplicate or invalid name
-- **Tooltip**: Error message explaining issue
-
-## Type Validation
+Before SchemaEditor copies an incoming schema into editable state, it verifies that:
 
-### Type Compatibility
+- The root schema is a JSON object.
+- `properties` and `definitions`, when present, are objects whose values are valid schema objects.
+- `items`, when present, is a valid schema object.
+- `required`, when present, is an array of strings.
+- The complete structure can round-trip through JSON without circular references, `BigInt`, or other non-JSON values.
 
-Ensure selected type matches intended data:
+A malformed schema does not crash the editor. SchemaEditor shows its localized invalid-schema message as an alert and disables Edit, Save, and Add Property until a valid `schema` prop is supplied. Supplying valid data clears the error and resynchronizes the editor.
 
-```typescript
-// ✅ Compatible
-{
-    age: { type: 'integer' },
-    price: { type: 'number' },
-    name: { type: 'string' }
-}
-
-// ⚠️ Type mismatch (functional but semantic issue)
-{
-    age: { type: 'string' },      // Should be integer
-    isActive: { type: 'string' }  // Should be boolean
-}
-```
+Boolean schemas (`true` or `false` in place of a schema object), tuple-valued `items`, and other shapes outside the declared `JsonSchema` contract are not supported.
 
-### Format-Type Compatibility
+## Property name validation
 
-Formats only apply to string types:
-
-```typescript
-// ✅ Valid
-{
-    email: { type: 'string', format: 'email' }
-}
-
-// ❌ Invalid - format ignored
-{
-    count: { type: 'integer', format: 'email' }  // Format has no effect
-}
-```
-
-SchemaEditor automatically:
-
-- Clears format when changing from string to another type
-- Enables format dropdown only for string types
-
-## Required Field Validation
-
-### Required Array
+Property names must:
 
-The `required` array lists properties that must be present:
+1. Not be empty or whitespace-only.
+2. Start with a letter or underscore.
+3. Contain only letters, numbers, and underscores.
+4. Be unique among siblings in the current object schema.
 
 ```typescript
+// Valid sibling names
 {
-    type: 'object',
     properties: {
-        name: { type: 'string' },
-        email: { type: 'string' },
-        phone: { type: 'string' }
-    },
-    required: ['name', 'email']  // name and email are required
+        firstName: { type: 'string' },
+        lastName: { type: 'string' }
+    }
 }
 ```
 
-### Validation Rules
+SchemaEditor validates names while you edit. An invalid input receives `aria-invalid` and `data-invalid`, its tooltip explains the error, and Save remains disabled. Clearing a name is therefore an error rather than a way to bypass validation.
 
-1. **Required properties must exist** in `properties`
-2. **Deleting a required property** removes it from both `properties` and `required` in one step — there is no separate "unmark as required first" gate
-3. **Renaming a required property** updates the `required` array
-4. **Required tracking is scoped per object schema** — a nested `object` property's own `required` array only names its own properties, never those of its parent or siblings
+JSON itself cannot represent duplicate keys in one object. The uniqueness rule applies while a property is renamed toward the name of an existing sibling.
 
-```typescript
-// Before rename
-required: ['oldName'];
+## Required-property consistency
 
-// After renaming 'oldName' to 'newName'
-required: ['newName']; // Automatically updated
-```
-
-SchemaEditor does not currently expose an in-table control for toggling a
-property's required state; see [Editing Properties](editing.md#required-properties).
-
-## Schema Structure Validation
-
-### Object Type Requirements
-
-Objects should have `properties` defined:
+Each object schema owns its own `required` array:
 
 ```typescript
-// ✅ Well-defined object
 {
     type: 'object',
     properties: {
-        id: { type: 'string' },
-        value: { type: 'number' }
-    }
-}
-
-// ⚠️ Empty object (valid but not useful)
-{
-    type: 'object',
-    properties: {}
-}
-```
-
-### Array Type Requirements
-
-Arrays should have `items` schema defined:
-
-```typescript
-// ✅ Well-defined array
-{
-    type: 'array',
-    items: { type: 'string' }
-}
-
-// ⚠️ Missing items schema
-{
-    type: 'array'
-    // What type are the items?
-}
-```
-
-SchemaEditor may:
-
-- Prompt for items schema when creating array type
-- Default to `{ type: 'string' }` for items
-- Show warning for array without items definition
-
-## Constraint Validation
-
-### Numeric Constraints
-
-For `number` and `integer` types:
-
-```typescript
-{
-    age: {
-        type: 'integer',
-        minimum: 0,
-        maximum: 150
+        name: { type: 'string' },
+        address: {
+            type: 'object',
+            properties: {
+                city: { type: 'string' }
+            },
+            required: ['city']
+        }
     },
-    price: {
-        type: 'number',
-        minimum: 0,
-        multipleOf: 0.01  // Two decimal places
-    }
+    required: ['name']
 }
 ```
 
-Validation checks:
+SchemaEditor preserves required semantics while properties are edited:
 
-- `minimum` ≤ `maximum`
-- `multipleOf` > 0
-- `exclusiveMinimum` < `exclusiveMaximum`
+- Renaming a required property updates the matching name in that object's `required` array.
+- Deleting a required property removes the stale required entry.
+- Nested required arrays remain scoped to their own nested object.
+- Replacing an object's type or property set removes required names that no longer describe that property.
 
-### String Constraints
+SchemaEditor does not currently provide a Required column or an interactive required/optional toggle. Set initial required names in the schema, or transform the schema in application code. See [Editing Properties](editing.md#required-properties).
 
-For `string` type:
+## Type and format normalization
 
-```typescript
-{
-    username: {
-        type: 'string',
-        minLength: 3,
-        maxLength: 20,
-        pattern: '^[a-zA-Z0-9_]+$'
-    }
-}
-```
-
-Validation checks:
-
-- `minLength` ≥ 0
-- `maxLength` ≥ `minLength`
-- `pattern` is valid regex
-
-### Array Constraints
-
-For `array` type:
-
-```typescript
-{
-    tags: {
-        type: 'array',
-        items: { type: 'string' },
-        minItems: 1,
-        maxItems: 10,
-        uniqueItems: true
-    }
-}
-```
-
-Validation checks:
-
-- `minItems` ≥ 0
-- `maxItems` ≥ `minItems`
-- `items` schema is valid
+When a property's type changes, SchemaEditor keeps the supported shape internally consistent:
 
-## Real-Time Validation
+- `array` starts with `items: { type: 'string' }` and removes an incompatible format.
+- `object` starts with empty `properties` and removes stale `items`, format, and nested required names.
+- A leaf type removes stale `items`, `properties`, and nested required names.
+- Selecting no format removes the existing `format` value.
 
-As you edit, SchemaEditor validates:
+Available format options come from the configured `TypeFormat[]`. The maintained defaults are documented in [Types and formats](types-formats.md).
 
-1. **On property name change**
-    - Check uniqueness
-    - Update required array if needed
+## What SchemaEditor does not validate
 
-2. **On type change**
-    - Clear incompatible format
-    - Remove incompatible constraints
-    - Prompt for type-specific requirements
+SchemaEditor does not validate JSON Schema keywords it does not edit, including:
 
-3. **On format change**
-    - Verify format is valid for type
-    - Show format examples
+- Composition keywords such as `oneOf`, `anyOf`, `allOf`, and `not`.
+- `enum` and `const`.
+- Numeric/string/array constraints such as `minimum`, `pattern`, or `minItems`.
+- `additionalProperties`, `patternProperties`, dependencies, and conditional schemas.
+- Whether external `$ref` targets resolve.
+- Whether instance data conforms to the authored schema.
 
-4. **On required toggle**
-    - Add/remove from required array
-    - Update visual indicators
+Unknown fields are generally preserved by clone-and-spread updates, but targeted type changes can make richer external constraints obsolete. Validate the result with the application's authoritative JSON Schema tooling when those keywords matter.
 
-## Validation Messages
+## External validation
 
-Types of validation feedback:
-
-### Error (Red)
-
-Prevents saving, must be fixed:
-
-- Duplicate property name
-- Empty property name
-- Invalid schema structure
-
-### Warning (Yellow)
-
-Can save but may cause issues:
-
-- Property name with special characters
-- Missing items schema for array
-- No properties defined for object
-
-### Info (Blue)
-
-Helpful suggestions:
-
-- Recommended format for data type
-- Common patterns for validation
-- Best practices
-
-## External Validation
-
-Validate generated schema against JSON Schema spec:
+For example, an application using Ajv can validate the resulting schema before persistence:
 
 ```typescript
 import Ajv from 'ajv';
 
 const ajv = new Ajv();
+const valid = ajv.validateSchema(schema);
 
-const isValidSchema = ajv.validateSchema(schema);
-
-if (!isValidSchema) {
+if (!valid) {
     console.error('Schema validation errors:', ajv.errors);
 }
 ```
 
-## Validation Best Practices
-
-1. **Use required sparingly**: Only mark truly required fields
-2. **Choose appropriate types**: Match data semantics
-3. **Add constraints**: Use min/max, patterns for data quality
-4. **Test with data**: Validate real data against schema
-5. **Document expectations**: Use descriptions for complex rules
-6. **Version schemas**: Track changes over time
-7. **Validate early**: Catch errors during editing, not at runtime
+Choose the validator and JSON Schema draft that the application actually supports; Components does not impose either one.
diff --git a/Source/SchemaEditor/SchemaEditor.tsx b/Source/SchemaEditor/SchemaEditor.tsx
index 2090aa84..5f02116c 100644
--- a/Source/SchemaEditor/SchemaEditor.tsx
+++ b/Source/SchemaEditor/SchemaEditor.tsx
@@ -73,26 +73,30 @@ const isPlainObject = (value: unknown): value is Record<string, unknown> =>
     typeof value === 'object' && value !== null && !Array.isArray(value);
 
 /**
- * Recursively validates that a parsed schema node, and every nested
- * `properties` value and `items` schema it contains, is a well-formed object
- * shape. A JSON-valid document can still smuggle malformed nested values
- * (e.g. `properties.foo: null` or `items: "string"`) that later code
- * dereferences as schema objects; those are rejected here rather than
- * crashing downstream.
+ * Recursively validates that a parsed schema node, its required names, and every nested
+ * `properties`, `definitions`, and `items` schema match the supported object shape. A JSON-valid
+ * document can still contain malformed nested values (for example `properties.foo: null`,
+ * `required: {}`, or `items: "string"`) that later code dereferences as schema data; those are
+ * rejected here rather than crashing downstream.
  */
 const isValidSchemaNode = (node: unknown): node is JsonSchema => {
     if (!isPlainObject(node)) {
         return false;
     }
 
-    if (node.properties !== undefined) {
-        if (!isPlainObject(node.properties)) {
-            return false;
-        }
-        for (const propertyValue of Object.values(node.properties)) {
-            if (!isValidSchemaNode(propertyValue)) {
-                return false;
-            }
+    if (
+        node.required !== undefined &&
+        (!Array.isArray(node.required) ||
+            !node.required.every((propertyName) => typeof propertyName === 'string'))
+    ) {
+        return false;
+    }
+
+    for (const nestedSchemas of [node.properties, node.definitions]) {
+        if (nestedSchemas === undefined) continue;
+        if (!isPlainObject(nestedSchemas)) return false;
+        for (const nestedSchema of Object.values(nestedSchemas)) {
+            if (!isValidSchemaNode(nestedSchema)) return false;
         }
     }
 
diff --git a/Source/SchemaEditor/for_SchemaEditor/when_schema_contains_a_malformed_nested_property.tsx b/Source/SchemaEditor/for_SchemaEditor/when_schema_contains_a_malformed_nested_property.tsx
index c0b43873..4c2774fa 100644
--- a/Source/SchemaEditor/for_SchemaEditor/when_schema_contains_a_malformed_nested_property.tsx
+++ b/Source/SchemaEditor/for_SchemaEditor/when_schema_contains_a_malformed_nested_property.tsx
@@ -89,6 +89,20 @@ describe('when the schema contains a malformed nested property', () => {
         expect(saveButton?.disabled).to.equal(true);
     });
 
+    it('should reject a non-array required value', async () => {
+        const malformedRequired: JsonSchema = { type: 'object', properties: {} };
+        Reflect.set(malformedRequired, 'required', {});
+        await act(async () => root.render(<SchemaEditor schema={malformedRequired} />));
+        expect(container.querySelector('[role="alert"]')).not.to.equal(null);
+    });
+
+    it('should reject a malformed schema definition', async () => {
+        const malformedDefinition: JsonSchema = { type: 'object', properties: {} };
+        Reflect.set(malformedDefinition, 'definitions', { sample: null });
+        await act(async () => root.render(<SchemaEditor schema={malformedDefinition} />));
+        expect(container.querySelector('[role="alert"]')).not.to.equal(null);
+    });
+
     it('should recover and preserve valid sibling data once the malformed value is fixed', async () => {
         const correctedSchema: JsonSchema = {
             type: 'object',

From 8ba36a77eafcaabd05b8063e2fe67d10a68efb7d Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 00:38:01 +0200
Subject: [PATCH 116/267] Align ESLint rule table formatting

---
 ESLint/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ESLint/README.md b/ESLint/README.md
index 8426adb8..7e7cd16d 100644
--- a/ESLint/README.md
+++ b/ESLint/README.md
@@ -7,7 +7,7 @@ Cratis base config, [`@cratis/eslint-config`](https://www.npmjs.com/package/@cra
 | ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `no-root-barrel-import`       | Disallows importing a removed Components 3 component namespace from the Components 4 setup-only root. Use the exact component subpath (`@cratis/components/CommandDialog`, `@cratis/components/DataPage`, `@cratis/components/Toolbar`, …). Package-wide provider/configuration symbols remain allowed at the root; an unambiguous namespace violation is autofixed. |
 | `no-primereact-dialog`        | Disallows importing `Dialog` from `primereact/dialog`. Use `CommandDialog` from `@cratis/components/CommandDialog`, or `Dialog` from `@cratis/components/Dialogs` — the wrappers add Arc command binding, overlay/focus fixes, and theming.                                                                                                                          |
-| `onbeforeexecute-must-return` | Requires an `onBeforeExecute` callback to return the command values. The runtime guards a missing return by keeping the current object and warning, but a replacement value is discarded and the callback violates the transformer contract.                                                                                                                           |
+| `onbeforeexecute-must-return` | Requires an `onBeforeExecute` callback to return the command values. The runtime guards a missing return by keeping the current object and warning, but a replacement value is discarded and the callback violates the transformer contract.                                                                                                                         |
 | `no-hooks-in-view-model`      | Disallows React hooks (including generated Arc proxies' `.use()`) inside a view model class. View models must be plain, hook-free classes that receive injected abstractions.                                                                                                                                                                                        |
 | `no-raw-command-form-marker`  | Disallows identifying a CommandForm field or column by a hand-written `displayName` string, in either direction. Use `markAsCommandFormField`/`markAsCommandFormColumn` and `isCommandFormField`/`isCommandFormColumn` from `@cratis/components/CommandForm` — they go through a marker a build transform cannot rewrite.                                            |
 

From 965284464199f88580ea233d96fb90a5515b5e8a Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 00:38:24 +0200
Subject: [PATCH 117/267] Cover const-enum members in API docs gate

---
 Source/scripts/verify-api-docs.mjs | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/Source/scripts/verify-api-docs.mjs b/Source/scripts/verify-api-docs.mjs
index bfa48f1c..f433b091 100644
--- a/Source/scripts/verify-api-docs.mjs
+++ b/Source/scripts/verify-api-docs.mjs
@@ -269,7 +269,9 @@ function membersRequiringDocs(checker, target) {
     if ((target.flags & ts.SymbolFlags.Class) !== 0) {
         return ownPublicClassMembersOf(checker, target);
     }
-    if ((target.flags & ts.SymbolFlags.RegularEnum) !== 0) {
+    if (
+        (target.flags & (ts.SymbolFlags.RegularEnum | ts.SymbolFlags.ConstEnum)) !== 0
+    ) {
         return ownEnumMembersOf(checker, target);
     }
     return [];

From 4bee0a0d297a4acd93725b5c8e9d3de46ccfcca8 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 00:53:00 +0200
Subject: [PATCH 118/267] pi-agent: Finish PivotViewer fixes

---
 Source/PivotViewer/PivotViewer.tsx            | 169 +++--
 Source/PivotViewer/engine/pivot.worker.ts     | 153 ++--
 .../PivotViewer/engine/requestCorrelator.ts   |  54 ++
 Source/PivotViewer/engine/store.ts            | 651 +++++++++---------
 Source/PivotViewer/engine/types.ts            | 196 +++---
 ...orical_filter_selection_matches_nothing.ts |  33 +
 ..._a_numeric_range_filter_matches_nothing.ts |  33 +
 ..._filter_is_mixed_with_a_matching_filter.ts |  43 ++
 ...g_a_numeric_field_with_a_constant_value.ts |  38 +
 .../when_no_search_fields_are_provided.ts     |  23 +
 .../when_search_fields_are_provided.ts        |  54 ++
 ...nse_arrives_for_an_unregistered_request.ts |  28 +
 .../when_responses_arrive_out_of_order.ts     |  38 +
 ...1_based_and_differ_from_the_array_index.ts |  43 ++
 ...en_the_item_is_found_at_its_array_index.ts |  35 +
 .../when_the_item_is_not_found_in_data.ts     |  25 +
 Source/PivotViewer/hooks/useCardSelection.ts  | 174 +++--
 Source/PivotViewer/hooks/useCurrentFilters.ts |  16 +-
 .../PivotViewer/hooks/useDetailPanelClose.ts  |  50 +-
 Source/PivotViewer/hooks/usePivotEngine.ts    | 549 ++++++++-------
 .../hooks/useViewModeScrollHandling.ts        |  49 +-
 Source/PivotViewer/utils/idResolution.ts      |  22 +
 Source/PivotViewer/utils/search.ts            |  53 ++
 23 files changed, 1631 insertions(+), 898 deletions(-)
 create mode 100644 Source/PivotViewer/engine/requestCorrelator.ts
 create mode 100644 Source/PivotViewer/for_engine_applyFilters/when_a_categorical_filter_selection_matches_nothing.ts
 create mode 100644 Source/PivotViewer/for_engine_applyFilters/when_a_numeric_range_filter_matches_nothing.ts
 create mode 100644 Source/PivotViewer/for_engine_applyFilters/when_a_zero_match_filter_is_mixed_with_a_matching_filter.ts
 create mode 100644 Source/PivotViewer/for_engine_computeGrouping/when_grouping_a_numeric_field_with_a_constant_value.ts
 create mode 100644 Source/PivotViewer/for_filterVisibleIdsBySearch/when_no_search_fields_are_provided.ts
 create mode 100644 Source/PivotViewer/for_filterVisibleIdsBySearch/when_search_fields_are_provided.ts
 create mode 100644 Source/PivotViewer/for_requestCorrelator/when_a_response_arrives_for_an_unregistered_request.ts
 create mode 100644 Source/PivotViewer/for_requestCorrelator/when_responses_arrive_out_of_order.ts
 create mode 100644 Source/PivotViewer/for_resolveLayoutItemId/when_consumer_ids_are_1_based_and_differ_from_the_array_index.ts
 create mode 100644 Source/PivotViewer/for_resolveLayoutItemId/when_the_item_is_found_at_its_array_index.ts
 create mode 100644 Source/PivotViewer/for_resolveLayoutItemId/when_the_item_is_not_found_in_data.ts
 create mode 100644 Source/PivotViewer/utils/search.ts

diff --git a/Source/PivotViewer/PivotViewer.tsx b/Source/PivotViewer/PivotViewer.tsx
index d728597b..0b337af2 100644
--- a/Source/PivotViewer/PivotViewer.tsx
+++ b/Source/PivotViewer/PivotViewer.tsx
@@ -3,13 +3,18 @@
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type { PivotViewerProps } from './types';
-import type { GroupingResult } from './engine/types';
+import type { GroupingResult, GroupSpec } from './engine/types';
 import { usePivotEngine } from './hooks/usePivotEngine';
 import { computeLayout } from './engine/layout';
 import { useFilterState } from './hooks/useFilterState';
 import { useDimensionState } from './hooks/useDimensionState';
 import { useZoomState } from './hooks/useZoomState';
-import { BASE_CARD_WIDTH, BASE_CARD_HEIGHT, CARDS_PER_COLUMN, GROUP_SPACING } from './constants';
+import {
+    BASE_CARD_WIDTH,
+    BASE_CARD_HEIGHT,
+    CARDS_PER_COLUMN,
+    GROUP_SPACING,
+} from './constants';
 import { PivotViewerMain } from './components/PivotViewerMain';
 import { FilterPanelContainer } from './components/FilterPanelContainer';
 import { ToolbarContainer } from './components/ToolbarContainer';
@@ -18,6 +23,7 @@ import { useContainerDimensions } from './hooks/useContainerDimensions';
 import type { ViewMode } from './components/Toolbar';
 import { useFieldExtractors } from './hooks/useFieldExtractors';
 import { useCurrentFilters, useCurrentGroupBy } from './hooks/useCurrentFilters';
+import { filterVisibleIdsBySearch } from './utils/search';
 import { useCardSelection } from './hooks/useCardSelection';
 import { useDetailPanelClose } from './hooks/useDetailPanelClose';
 import { useScrollSync } from './hooks/useScrollSync';
@@ -72,7 +78,11 @@ export function PivotViewer<TItem extends object>({
     const [visibleIds, setVisibleIds] = useState<Uint32Array>(new Uint32Array(0));
     const [grouping, setGrouping] = useState<GroupingResult>({ groups: [] });
     const [hoveredGroupIndex, setHoveredGroupIndex] = useState<number | null>(null);
-    const [preSelectionState, setPreSelectionState] = useState<{ zoom: number; scrollLeft: number; scrollTop: number } | null>(null);
+    const [preSelectionState, setPreSelectionState] = useState<{
+        zoom: number;
+        scrollLeft: number;
+        scrollTop: number;
+    } | null>(null);
     const [, setAnimationMode] = useState<'layout' | 'filter'>('layout');
     const [scrollPosition, setScrollPosition] = useState({ x: 0, y: 0 });
 
@@ -107,12 +117,11 @@ export function PivotViewer<TItem extends object>({
         handleZoomChange,
     } = useZoomState(1);
 
-    const {
-        isPanning,
-        handlePanStart,
-        handlePanMove,
-        handlePanEnd,
-    } = usePanning(containerRef, undefined, setScrollPosition);
+    const { isPanning, handlePanStart, handlePanMove, handlePanEnd } = usePanning(
+        containerRef,
+        undefined,
+        setScrollPosition,
+    );
 
     useWheelZoom(containerRef, zoomLevel, setZoomLevel);
 
@@ -138,7 +147,12 @@ export function PivotViewer<TItem extends object>({
     const { fieldExtractors, indexFields } = useFieldExtractors(dimensions, filters);
 
     // Initialize the Web Worker engine
-    const { ready, applyFilters: engineApplyFilters, computeGrouping, sortIds } = usePivotEngine({
+    const {
+        ready,
+        applyFilters: engineApplyFilters,
+        computeGrouping,
+        sortIds,
+    } = usePivotEngine({
         data,
         fieldExtractors,
         indexFields,
@@ -149,37 +163,42 @@ export function PivotViewer<TItem extends object>({
         filters,
         filterState,
         rangeFilterState,
-        search,
-        searchFields,
         dimensionFilter,
         activeDimension,
     );
 
     const currentGroupBy = useCurrentGroupBy(activeDimensionKey, dimensions);
 
-    // Apply filters
+    // Apply filters, then narrow the result by search - a post-filter step over the visible
+    // Uint32 ids so it applies identically whether the engine result came from the worker or
+    // its synchronous fallback.
     useEffect(() => {
         if (!ready) return;
 
         engineApplyFilters(currentFilters).then((result) => {
+            let ids = result.visibleIds;
+
             // If the engine failed to return any IDs while no filters are active,
             // fall back to showing the full dataset so the canvas never renders empty.
-            if (result.visibleIds.length === 0 && currentFilters.length === 0 && data.length > 0) {
+            if (ids.length === 0 && currentFilters.length === 0 && data.length > 0) {
                 const fallbackIds = new Uint32Array(data.length);
                 for (let i = 0; i < data.length; i++) {
                     fallbackIds[i] = i;
                 }
-                setVisibleIds(fallbackIds);
-                return;
+                ids = fallbackIds;
             }
 
-            setVisibleIds(result.visibleIds);
+            setVisibleIds(filterVisibleIdsBySearch(data, ids, search, searchFields));
         });
-    }, [ready, currentFilters, engineApplyFilters, data.length]);
+    }, [ready, currentFilters, engineApplyFilters, data, search, searchFields]);
 
     // Compute grouping
-    const lastGroupingRequest = useRef<{ viewMode: ViewMode; groupBy: unknown; visibleIds: Uint32Array } | null>(null);
-    
+    const lastGroupingRequest = useRef<{
+        viewMode: ViewMode;
+        groupBy: GroupSpec;
+        visibleIds: Uint32Array;
+    } | null>(null);
+
     useEffect(() => {
         if (!ready || visibleIds.length === 0) {
             setGrouping({ groups: [] });
@@ -193,24 +212,28 @@ export function PivotViewer<TItem extends object>({
             if (activeDimensionKey) {
                 sortIds(visibleIds, activeDimensionKey).then((sortedIds) => {
                     setGrouping({
-                        groups: [{
-                            key: 'all',
-                            label: 'All Items',
-                            value: 'all',
-                            ids: sortedIds,
-                            count: sortedIds.length
-                        }]
+                        groups: [
+                            {
+                                key: 'all',
+                                label: 'All Items',
+                                value: 'all',
+                                ids: sortedIds,
+                                count: sortedIds.length,
+                            },
+                        ],
                     });
                 });
             } else {
                 setGrouping({
-                    groups: [{
-                        key: 'all',
-                        label: 'All Items',
-                        value: 'all',
-                        ids: visibleIds,
-                        count: visibleIds.length
-                    }]
+                    groups: [
+                        {
+                            key: 'all',
+                            label: 'All Items',
+                            value: 'all',
+                            ids: visibleIds,
+                            count: visibleIds.length,
+                        },
+                    ],
                 });
             }
             lastGroupingRequest.current = null;
@@ -222,18 +245,26 @@ export function PivotViewer<TItem extends object>({
         if (
             lastRequest &&
             lastRequest.viewMode === viewMode &&
-            (lastRequest.groupBy as unknown as typeof currentGroupBy)?.field === currentGroupBy.field &&
+            lastRequest.groupBy.field === currentGroupBy.field &&
             lastRequest.visibleIds === visibleIds
         ) {
             return;
         }
 
         lastGroupingRequest.current = { viewMode, groupBy: currentGroupBy, visibleIds };
-        
+
         computeGrouping(visibleIds, currentGroupBy).then((result) => {
             setGrouping(result);
         });
-    }, [ready, visibleIds, currentGroupBy, viewMode, computeGrouping, sortIds, activeDimensionKey]);
+    }, [
+        ready,
+        visibleIds,
+        currentGroupBy,
+        viewMode,
+        computeGrouping,
+        sortIds,
+        activeDimensionKey,
+    ]);
 
     // Compute layout
     const layout = useMemo(() => {
@@ -242,9 +273,10 @@ export function PivotViewer<TItem extends object>({
         const cardHeight = BASE_CARD_HEIGHT;
         const containerWidth = containerDimensions.width / zoomLevel;
         // For grouped mode, use fixed container height to ensure stable layout during zoom
-        const containerHeight = viewMode === 'collection'
-            ? containerDimensions.height / zoomLevel
-            : containerDimensions.height;
+        const containerHeight =
+            viewMode === 'collection'
+                ? containerDimensions.height / zoomLevel
+                : containerDimensions.height;
 
         const result = computeLayout(grouping, {
             viewMode,
@@ -257,19 +289,35 @@ export function PivotViewer<TItem extends object>({
         });
 
         return result;
-    }, [grouping, viewMode, zoomLevel, containerDimensions.width, containerDimensions.height]);
-
-    const resolveId = useCallback((item: TItem, index: number) => {
-        if (getItemId) {
-            const id = getItemId(item, index);
+    }, [
+        grouping,
+        viewMode,
+        zoomLevel,
+        containerDimensions.width,
+        containerDimensions.height,
+    ]);
+
+    const resolveId = useCallback(
+        (item: TItem, index: number) => {
+            if (getItemId) {
+                const id = getItemId(item, index);
+                return typeof id === 'number' ? id : index;
+            }
+            const id = (item as Record<string, unknown>)['id'];
             return typeof id === 'number' ? id : index;
-        }
-        const id = (item as Record<string, unknown>)['id'];
-        return typeof id === 'number' ? id : index;
-    }, [getItemId]);
+        },
+        [getItemId],
+    );
 
     // Track animation mode changes
-    useAnimationModeTracking(filterState, rangeFilterState, search, activeDimensionKey, viewMode, setAnimationMode);
+    useAnimationModeTracking(
+        filterState,
+        rangeFilterState,
+        search,
+        activeDimensionKey,
+        viewMode,
+        setAnimationMode,
+    );
 
     // Sync axis labels scroll with container scroll
     useScrollSync(containerRef, axisLabelsRef, viewMode);
@@ -335,8 +383,11 @@ export function PivotViewer<TItem extends object>({
     const filterOptions = useFilterOptions(data, filters, filterState, rangeFilterState);
 
     const hasFilters = Boolean(filters && filters.length > 0);
-    const activeFilterCount = Object.values(filterState).reduce((sum: number, vals) => sum + (vals as Set<string>).size, 0) +
-        Object.values(rangeFilterState).filter(r => r !== null).length;
+    const activeFilterCount =
+        Object.values(filterState).reduce(
+            (sum: number, vals) => sum + (vals as Set<string>).size,
+            0,
+        ) + Object.values(rangeFilterState).filter((r) => r !== null).length;
 
     const viewerClassName = [
         'pivot-viewer',
@@ -357,15 +408,19 @@ export function PivotViewer<TItem extends object>({
         const vars: Record<string, string> = {};
         if (!colors) return vars;
         if (colors.primaryColor) vars['--cratis-primary-color'] = colors.primaryColor;
-        if (colors.primaryColorText) vars['--cratis-primary-color-text'] = colors.primaryColorText;
+        if (colors.primaryColorText)
+            vars['--cratis-primary-color-text'] = colors.primaryColorText;
         if (colors.primary500) vars['--cratis-primary-500'] = colors.primary500;
         if (colors.surfaceGround) vars['--cratis-surface-ground'] = colors.surfaceGround;
         if (colors.surfaceCard) vars['--cratis-surface-card'] = colors.surfaceCard;
-        if (colors.surfaceSection) vars['--cratis-surface-section'] = colors.surfaceSection;
-        if (colors.surfaceOverlay) vars['--cratis-surface-overlay'] = colors.surfaceOverlay;
+        if (colors.surfaceSection)
+            vars['--cratis-surface-section'] = colors.surfaceSection;
+        if (colors.surfaceOverlay)
+            vars['--cratis-surface-overlay'] = colors.surfaceOverlay;
         if (colors.surfaceBorder) vars['--cratis-surface-border'] = colors.surfaceBorder;
         if (colors.textColor) vars['--cratis-text-color'] = colors.textColor;
-        if (colors.textColorSecondary) vars['--cratis-text-color-secondary'] = colors.textColorSecondary;
+        if (colors.textColorSecondary)
+            vars['--cratis-text-color-secondary'] = colors.textColorSecondary;
         if (colors.highlightBg) vars['--cratis-highlight-bg'] = colors.highlightBg;
         if (colors.maskbg) vars['--cratis-maskbg'] = colors.maskbg;
         if (colors.focusRing) vars['--cratis-focus-ring'] = colors.focusRing;
@@ -390,7 +445,7 @@ export function PivotViewer<TItem extends object>({
                 onExpandedFilterChange={setExpandedFilterKey}
             />
 
-            <main className="pv-main">
+            <main className='pv-main'>
                 <ToolbarContainer
                     hasFilters={hasFilters}
                     filtersOpen={filtersOpen}
diff --git a/Source/PivotViewer/engine/pivot.worker.ts b/Source/PivotViewer/engine/pivot.worker.ts
index d7b43c93..4bca17cc 100644
--- a/Source/PivotViewer/engine/pivot.worker.ts
+++ b/Source/PivotViewer/engine/pivot.worker.ts
@@ -2,11 +2,11 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import type {
-  PivotStore,
-  PivotIndexes,
-  WorkerInMessage,
-  WorkerOutMessage,
-  Field,
+    PivotStore,
+    PivotIndexes,
+    WorkerInMessage,
+    WorkerOutMessage,
+    Field,
 } from './types';
 import { buildIndexes, applyFilters, computeGrouping, sortIds } from './store';
 
@@ -14,83 +14,88 @@ let store: PivotStore | null = null;
 let indexes: PivotIndexes | null = null;
 
 self.onmessage = (e: MessageEvent<WorkerInMessage>) => {
-  const message = e.data;
-
-  switch (message.type) {
-    case 'buildIndexes': {
-      // Convert fields array back to Map
-      const fieldsArray = message.store.fields as unknown as [string, Field][];
-      const fieldsMap = new Map<string, Field>(fieldsArray);
-      
-      store = {
-        ...message.store,
-        fields: fieldsMap,
-      };
-      if (store) {
-        indexes = buildIndexes(store, message.fields);
-
-        const response: WorkerOutMessage = {
-          type: 'indexesReady',
-          indexes,
-        };
-        self.postMessage(response);
-      }
-      break;
-    }
+    const message = e.data;
 
-    case 'applyFilters': {
-      if (!store || !indexes) {
-        console.error('Store or indexes not initialized');
-        return;
-      }
+    switch (message.type) {
+        case 'buildIndexes': {
+            // Convert fields array back to Map
+            // SAFETY: usePivotEngine serializes store.fields as Map.entries() before posting the
+            // message (structured-clone can't carry a Map), so it always arrives here as this tuple array.
+            const fieldsArray = message.store.fields as unknown as [string, Field][];
+            const fieldsMap = new Map<string, Field>(fieldsArray);
 
-      const result = applyFilters(store, indexes, message.filters);
+            store = {
+                ...message.store,
+                fields: fieldsMap,
+            };
+            if (store) {
+                indexes = buildIndexes(store, message.fields);
 
-      const response: WorkerOutMessage = {
-        type: 'filterResult',
-        result,
-      };
-      self.postMessage(response);
-      break;
-    }
+                const response: WorkerOutMessage = {
+                    type: 'indexesReady',
+                    indexes,
+                };
+                self.postMessage(response);
+            }
+            break;
+        }
 
-    case 'computeGrouping': {
-      if (!store || !indexes) {
-        console.error('[Worker] Store or indexes not initialized');
-        return;
-      }
-
-      const result = computeGrouping(
-        store,
-        indexes,
-        message.visibleIds,
-        message.groupBy
-      );
-
-      const response: WorkerOutMessage = {
-        type: 'groupingResult',
-        result,
-      };
-      self.postMessage(response);
-      break;
-    }
+        case 'applyFilters': {
+            if (!store || !indexes) {
+                console.error('Store or indexes not initialized');
+                return;
+            }
+
+            const result = applyFilters(store, indexes, message.filters);
+
+            const response: WorkerOutMessage = {
+                type: 'filterResult',
+                requestId: message.requestId,
+                result,
+            };
+            self.postMessage(response);
+            break;
+        }
+
+        case 'computeGrouping': {
+            if (!store || !indexes) {
+                console.error('[Worker] Store or indexes not initialized');
+                return;
+            }
+
+            const result = computeGrouping(
+                store,
+                indexes,
+                message.visibleIds,
+                message.groupBy,
+            );
+
+            const response: WorkerOutMessage = {
+                type: 'groupingResult',
+                requestId: message.requestId,
+                result,
+            };
+            self.postMessage(response);
+            break;
+        }
 
-    case 'sort': {
-      if (!store) {
-        console.error('Store not initialized');
-        return;
-      }
+        case 'sort': {
+            if (!store) {
+                console.error('Store not initialized');
+                return;
+            }
 
-      const result = sortIds(store, message.ids, message.sortBy);
+            const result = sortIds(store, message.ids, message.sortBy);
 
-      const response: WorkerOutMessage = {
-        type: 'sortResult',
-        result,
-      };
-      self.postMessage(response);
-      break;
+            const response: WorkerOutMessage = {
+                type: 'sortResult',
+                requestId: message.requestId,
+                result,
+            };
+            self.postMessage(response);
+            break;
+        }
     }
-  }
 };
 
 export {};
diff --git a/Source/PivotViewer/engine/requestCorrelator.ts b/Source/PivotViewer/engine/requestCorrelator.ts
new file mode 100644
index 00000000..c17f79b6
--- /dev/null
+++ b/Source/PivotViewer/engine/requestCorrelator.ts
@@ -0,0 +1,54 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+/**
+ * Correlates asynchronous request/response pairs exchanged with the pivot Web Worker by a
+ * unique request id, so a response resolves the promise for its own request - not whichever
+ * request currently owns a shared, type-keyed slot. Without this, two overlapping requests of
+ * the same kind (e.g. two `applyFilters` calls fired before the first responds) overwrite each
+ * other's resolver: the newer request's resolver silently replaces the older one's, so the
+ * older request's promise never settles, and an out-of-order response resolves the wrong call.
+ */
+export interface RequestCorrelator<TResult> {
+    /** Allocates the next unique request id for this correlator. */
+    nextId(): number;
+
+    /** Registers the resolver awaiting the response for `id`. */
+    register(id: number, resolve: (result: TResult) => void): void;
+
+    /** True while a resolver is still registered for `id`. */
+    isPending(id: number): boolean;
+
+    /**
+     * Resolves and removes the resolver registered for `id` with `result`.
+     * Returns `false` without throwing when no resolver is registered for `id` -
+     * e.g. a stale or duplicate response - instead of leaving a dangling promise.
+     */
+    resolve(id: number, result: TResult): boolean;
+}
+
+export function createRequestCorrelator<TResult>(): RequestCorrelator<TResult> {
+    let nextRequestId = 0;
+    const pending = new Map<number, (result: TResult) => void>();
+
+    return {
+        nextId: () => ++nextRequestId,
+
+        register: (id, resolve) => {
+            pending.set(id, resolve);
+        },
+
+        isPending: (id) => pending.has(id),
+
+        resolve: (id, result) => {
+            const resolveFn = pending.get(id);
+            if (!resolveFn) {
+                return false;
+            }
+
+            pending.delete(id);
+            resolveFn(result);
+            return true;
+        },
+    };
+}
diff --git a/Source/PivotViewer/engine/store.ts b/Source/PivotViewer/engine/store.ts
index c9e82d2b..83bcf879 100644
--- a/Source/PivotViewer/engine/store.ts
+++ b/Source/PivotViewer/engine/store.ts
@@ -2,436 +2,465 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import type {
-  PivotStore,
-  Field,
-  CategoricalIndex,
-  NumericIndex,
-  PivotIndexes,
-  FilterSpec,
-  FilterResult,
-  GroupSpec,
-  GroupResult,
-  GroupingResult,
-  FieldValue,
+    PivotStore,
+    Field,
+    CategoricalIndex,
+    NumericIndex,
+    PivotIndexes,
+    FilterSpec,
+    FilterResult,
+    GroupSpec,
+    GroupResult,
+    GroupingResult,
+    FieldValue,
 } from './types';
 
 /**
  * Convert array of items to columnar store
  */
 export function buildStore<TItem extends object>(
-  items: TItem[],
-  fieldExtractors: Map<string, (item: TItem) => FieldValue>
+    items: TItem[],
+    fieldExtractors: Map<string, (item: TItem) => FieldValue>,
 ): PivotStore {
-  const count = items.length;
-  const ids = new Uint32Array(count);
-  const fields = new Map<string, Field>();
-
-  for (let i = 0; i < count; i++) {
-    ids[i] = i;
-  }
-
-  for (const [fieldName, extractor] of fieldExtractors) {
-    const firstValue = count > 0 ? extractor(items[0]) : null;
-    const kind = inferKind(firstValue);
-
-    if (kind === 'number') {
-      const values = new Float64Array(count);
-      for (let i = 0; i < count; i++) {
-        const val = extractor(items[i]);
-        values[i] = typeof val === 'number' ? val : NaN;
-      }
-      fields.set(fieldName, { kind: 'number', values });
-    } else if (kind === 'boolean') {
-      const values = new Uint8Array(count);
-      for (let i = 0; i < count; i++) {
-        const val = extractor(items[i]);
-        values[i] = val === true ? 1 : 0;
-      }
-      fields.set(fieldName, { kind: 'boolean', values });
-    } else {
-      const values: string[] = [];
-      for (let i = 0; i < count; i++) {
-        const val = extractor(items[i]);
-        values.push(stringifyValue(val));
-      }
-      fields.set(fieldName, { kind: 'string', values });
+    const count = items.length;
+    const ids = new Uint32Array(count);
+    const fields = new Map<string, Field>();
+
+    for (let i = 0; i < count; i++) {
+        ids[i] = i;
+    }
+
+    for (const [fieldName, extractor] of fieldExtractors) {
+        const firstValue = count > 0 ? extractor(items[0]) : null;
+        const kind = inferKind(firstValue);
+
+        if (kind === 'number') {
+            const values = new Float64Array(count);
+            for (let i = 0; i < count; i++) {
+                const val = extractor(items[i]);
+                values[i] = typeof val === 'number' ? val : NaN;
+            }
+            fields.set(fieldName, { kind: 'number', values });
+        } else if (kind === 'boolean') {
+            const values = new Uint8Array(count);
+            for (let i = 0; i < count; i++) {
+                const val = extractor(items[i]);
+                values[i] = val === true ? 1 : 0;
+            }
+            fields.set(fieldName, { kind: 'boolean', values });
+        } else {
+            const values: string[] = [];
+            for (let i = 0; i < count; i++) {
+                const val = extractor(items[i]);
+                values.push(stringifyValue(val));
+            }
+            fields.set(fieldName, { kind: 'string', values });
+        }
     }
-  }
 
-  return { count, ids, fields, items };
+    return { count, ids, fields, items };
 }
 
 function inferKind(value: FieldValue): 'string' | 'number' | 'boolean' {
-  if (typeof value === 'number') return 'number';
-  if (typeof value === 'boolean') return 'boolean';
-  return 'string';
+    if (typeof value === 'number') return 'number';
+    if (typeof value === 'boolean') return 'boolean';
+    return 'string';
 }
 
 function stringifyValue(value: FieldValue): string {
-  if (value === null) return 'null';
-  if (value === undefined) return 'undefined';
-  return String(value);
+    if (value === null) return 'null';
+    if (value === undefined) return 'undefined';
+    return String(value);
 }
 
 /**
  * Build categorical index for a string field
  */
 export function buildCategoricalIndex(field: Field): CategoricalIndex {
-  if (field.kind !== 'string') {
-    throw new Error('Categorical index requires string field');
-  }
-
-  const valueToIdsList = new Map<string, number[]>();
-
-  for (let i = 0; i < field.values.length; i++) {
-    const value = field.values[i];
-    let list = valueToIdsList.get(value);
-    if (!list) {
-      list = [];
-      valueToIdsList.set(value, list);
+    if (field.kind !== 'string') {
+        throw new Error('Categorical index requires string field');
+    }
+
+    const valueToIdsList = new Map<string, number[]>();
+
+    for (let i = 0; i < field.values.length; i++) {
+        const value = field.values[i];
+        let list = valueToIdsList.get(value);
+        if (!list) {
+            list = [];
+            valueToIdsList.set(value, list);
+        }
+        list.push(i);
     }
-    list.push(i);
-  }
 
-  const valueToIds = new Map<string, Uint32Array>();
-  const values: string[] = [];
+    const valueToIds = new Map<string, Uint32Array>();
+    const values: string[] = [];
 
-  for (const [value, idsList] of valueToIdsList) {
-    values.push(value);
-    const ids = new Uint32Array(idsList.length);
-    for (let i = 0; i < idsList.length; i++) {
-      ids[i] = idsList[i];
+    for (const [value, idsList] of valueToIdsList) {
+        values.push(value);
+        const ids = new Uint32Array(idsList.length);
+        for (let i = 0; i < idsList.length; i++) {
+            ids[i] = idsList[i];
+        }
+        ids.sort();
+        valueToIds.set(value, ids);
     }
-    ids.sort();
-    valueToIds.set(value, ids);
-  }
 
-  values.sort();
+    values.sort();
 
-  return { valueToIds, values };
+    return { valueToIds, values };
 }
 
 /**
  * Build numeric index for a number field
  */
 export function buildNumericIndex(field: Field): NumericIndex {
-  if (field.kind !== 'number') {
-    throw new Error('Numeric index requires number field');
-  }
-
-  const count = field.values.length;
-  const pairs: Array<{ value: number; id: number }> = [];
-
-  let min = Infinity;
-  let max = -Infinity;
-
-  for (let i = 0; i < count; i++) {
-    const value = field.values[i];
-    if (!isNaN(value)) {
-      pairs.push({ value, id: i });
-      if (value < min) min = value;
-      if (value > max) max = value;
+    if (field.kind !== 'number') {
+        throw new Error('Numeric index requires number field');
+    }
+
+    const count = field.values.length;
+    const pairs: Array<{ value: number; id: number }> = [];
+
+    let min = Infinity;
+    let max = -Infinity;
+
+    for (let i = 0; i < count; i++) {
+        const value = field.values[i];
+        if (!isNaN(value)) {
+            pairs.push({ value, id: i });
+            if (value < min) min = value;
+            if (value > max) max = value;
+        }
     }
-  }
 
-  pairs.sort((a, b) => a.value - b.value);
+    pairs.sort((a, b) => a.value - b.value);
 
-  const values = new Float64Array(pairs.length);
-  const ids = new Uint32Array(pairs.length);
+    const values = new Float64Array(pairs.length);
+    const ids = new Uint32Array(pairs.length);
 
-  for (let i = 0; i < pairs.length; i++) {
-    values[i] = pairs[i].value;
-    ids[i] = pairs[i].id;
-  }
+    for (let i = 0; i < pairs.length; i++) {
+        values[i] = pairs[i].value;
+        ids[i] = pairs[i].id;
+    }
 
-  return { values, ids, min, max };
+    return { values, ids, min, max };
 }
 
 /**
  * Build all indexes for specified fields
  */
 export function buildIndexes(store: PivotStore, fieldNames: string[]): PivotIndexes {
-  const categorical = new Map<string, CategoricalIndex>();
-  const numeric = new Map<string, NumericIndex>();
+    const categorical = new Map<string, CategoricalIndex>();
+    const numeric = new Map<string, NumericIndex>();
 
-  for (const fieldName of fieldNames) {
-    const field = store.fields.get(fieldName);
-    if (!field) continue;
+    for (const fieldName of fieldNames) {
+        const field = store.fields.get(fieldName);
+        if (!field) continue;
 
-    if (field.kind === 'string') {
-      categorical.set(fieldName, buildCategoricalIndex(field));
-    } else if (field.kind === 'number') {
-      numeric.set(fieldName, buildNumericIndex(field));
+        if (field.kind === 'string') {
+            categorical.set(fieldName, buildCategoricalIndex(field));
+        } else if (field.kind === 'number') {
+            numeric.set(fieldName, buildNumericIndex(field));
+        }
     }
-  }
 
-  return { categorical, numeric };
+    return { categorical, numeric };
 }
 
 /**
  * Intersect two sorted arrays of IDs
  */
 function intersectSorted(a: Uint32Array, b: Uint32Array): Uint32Array {
-  const result: number[] = [];
-  let i = 0;
-  let j = 0;
-
-  while (i < a.length && j < b.length) {
-    if (a[i] === b[j]) {
-      result.push(a[i]);
-      i++;
-      j++;
-    } else if (a[i] < b[j]) {
-      i++;
-    } else {
-      j++;
+    const result: number[] = [];
+    let i = 0;
+    let j = 0;
+
+    while (i < a.length && j < b.length) {
+        if (a[i] === b[j]) {
+            result.push(a[i]);
+            i++;
+            j++;
+        } else if (a[i] < b[j]) {
+            i++;
+        } else {
+            j++;
+        }
     }
-  }
 
-  return new Uint32Array(result);
+    return new Uint32Array(result);
 }
 
 /**
  * Union multiple sorted arrays
  */
 function unionSorted(arrays: Uint32Array[]): Uint32Array {
-  if (arrays.length === 0) return new Uint32Array(0);
-  if (arrays.length === 1) return arrays[0];
+    if (arrays.length === 0) return new Uint32Array(0);
+    if (arrays.length === 1) return arrays[0];
 
-  const set = new Set<number>();
-  for (const arr of arrays) {
-    for (let i = 0; i < arr.length; i++) {
-      set.add(arr[i]);
+    const set = new Set<number>();
+    for (const arr of arrays) {
+        for (let i = 0; i < arr.length; i++) {
+            set.add(arr[i]);
+        }
     }
-  }
 
-  const result = Array.from(set).sort((a, b) => a - b);
-  return new Uint32Array(result);
+    const result = Array.from(set).sort((a, b) => a - b);
+    return new Uint32Array(result);
 }
 
 /**
  * Apply filters using indexes
  */
 export function applyFilters(
-  store: PivotStore,
-  indexes: PivotIndexes,
-  filters: FilterSpec[]
+    store: PivotStore,
+    indexes: PivotIndexes,
+    filters: FilterSpec[],
 ): FilterResult {
-  if (filters.length === 0) {
-    return {
-      visibleIds: store.ids,
-      count: store.count,
-    };
-  }
-
-  const sets: Uint32Array[] = [];
-
-  for (const filter of filters) {
-    if (filter.type === 'categorical' && filter.values && filter.values.size > 0) {
-      const index = indexes.categorical.get(filter.field);
-      if (!index) continue;
+    if (filters.length === 0) {
+        return {
+            visibleIds: store.ids,
+            count: store.count,
+        };
+    }
 
-      const arrays: Uint32Array[] = [];
-      for (const value of filter.values) {
-        const ids = index.valueToIds.get(value);
-        if (ids) {
-          arrays.push(ids);
+    // Every active filter contributes exactly one set to intersect, even when it
+    // matches nothing - an empty Uint32Array - so a zero-match filter correctly
+    // collapses the overall intersection to empty instead of being skipped (which
+    // would let the other active filters' matches leak through unfiltered).
+    const sets: Uint32Array[] = [];
+
+    for (const filter of filters) {
+        if (filter.type === 'categorical' && filter.values && filter.values.size > 0) {
+            const index = indexes.categorical.get(filter.field);
+            if (!index) continue;
+
+            const arrays: Uint32Array[] = [];
+            for (const value of filter.values) {
+                const ids = index.valueToIds.get(value);
+                if (ids) {
+                    arrays.push(ids);
+                }
+            }
+
+            sets.push(arrays.length > 0 ? unionSorted(arrays) : new Uint32Array(0));
+        } else if (filter.type === 'numeric' && filter.range) {
+            const index = indexes.numeric.get(filter.field);
+            if (!index) continue;
+
+            const { min, max } = filter.range;
+            const result: number[] = [];
+
+            for (let i = 0; i < index.values.length; i++) {
+                const val = index.values[i];
+                if (val >= min && val <= max) {
+                    result.push(index.ids[i]);
+                }
+            }
+
+            result.sort((a, b) => a - b);
+            sets.push(new Uint32Array(result));
         }
-      }
-
-      if (arrays.length > 0) {
-        sets.push(unionSorted(arrays));
-      }
-    } else if (filter.type === 'numeric' && filter.range) {
-      const index = indexes.numeric.get(filter.field);
-      if (!index) continue;
-
-      const { min, max } = filter.range;
-      const result: number[] = [];
-
-      for (let i = 0; i < index.values.length; i++) {
-        const val = index.values[i];
-        if (val >= min && val <= max) {
-          result.push(index.ids[i]);
-        }
-      }
+    }
+
+    if (sets.length === 0) {
+        return {
+            visibleIds: store.ids,
+            count: store.count,
+        };
+    }
 
-      if (result.length > 0) {
-        result.sort((a, b) => a - b);
-        sets.push(new Uint32Array(result));
-      }
+    let visibleIds = sets[0];
+    for (let i = 1; i < sets.length; i++) {
+        visibleIds = intersectSorted(visibleIds, sets[i]);
     }
-  }
 
-  if (sets.length === 0) {
     return {
-      visibleIds: store.ids,
-      count: store.count,
+        visibleIds,
+        count: visibleIds.length,
     };
-  }
-
-  let visibleIds = sets[0];
-  for (let i = 1; i < sets.length; i++) {
-    visibleIds = intersectSorted(visibleIds, sets[i]);
-  }
-
-  return {
-    visibleIds,
-    count: visibleIds.length,
-  };
 }
 
 /**
  * Group items by field value
  */
 export function computeGrouping(
-  store: PivotStore,
-  indexes: PivotIndexes,
-  visibleIds: Uint32Array,
-  groupBy: GroupSpec
+    store: PivotStore,
+    indexes: PivotIndexes,
+    visibleIds: Uint32Array,
+    groupBy: GroupSpec,
 ): GroupingResult {
-  const field = store.fields.get(groupBy.field);
-  if (!field) {
-    return { groups: [] };
-  }
+    const field = store.fields.get(groupBy.field);
+    if (!field) {
+        return { groups: [] };
+    }
 
-  if (field.kind === 'string') {
-    return groupByCategorical(field, visibleIds, indexes.categorical.get(groupBy.field));
-  } else if (field.kind === 'number') {
-    return groupByNumeric(field, visibleIds, groupBy.buckets);
-  }
+    if (field.kind === 'string') {
+        return groupByCategorical(
+            field,
+            visibleIds,
+            indexes.categorical.get(groupBy.field),
+        );
+    } else if (field.kind === 'number') {
+        return groupByNumeric(field, visibleIds, groupBy.buckets);
+    }
 
-  return { groups: [] };
+    return { groups: [] };
 }
 
 function groupByCategorical(
-  field: Field,
-  visibleIds: Uint32Array,
-  index?: CategoricalIndex
+    field: Field,
+    visibleIds: Uint32Array,
+    index?: CategoricalIndex,
 ): GroupingResult {
-  if (field.kind !== 'string') {
-    return { groups: [] };
-  }
+    if (field.kind !== 'string') {
+        return { groups: [] };
+    }
 
-  const valueToIds = new Map<string, number[]>();
+    const valueToIds = new Map<string, number[]>();
 
-  for (let i = 0; i < visibleIds.length; i++) {
-    const id = visibleIds[i];
-    const value = field.values[id];
+    for (let i = 0; i < visibleIds.length; i++) {
+        const id = visibleIds[i];
+        const value = field.values[id];
+
+        let list = valueToIds.get(value);
+        if (!list) {
+            list = [];
+            valueToIds.set(value, list);
+        }
+        list.push(id);
+    }
 
-    let list = valueToIds.get(value);
-    if (!list) {
-      list = [];
-      valueToIds.set(value, list);
+    const groups: GroupResult[] = [];
+    const sortedValues = index ? index.values : Array.from(valueToIds.keys()).sort();
+
+    for (const value of sortedValues) {
+        const idsList = valueToIds.get(value);
+        if (!idsList) continue;
+
+        const ids = new Uint32Array(idsList);
+        groups.push({
+            key: value,
+            label: value,
+            value,
+            ids,
+            count: ids.length,
+        });
     }
-    list.push(id);
-  }
-
-  const groups: GroupResult[] = [];
-  const sortedValues = index ? index.values : Array.from(valueToIds.keys()).sort();
-
-  for (const value of sortedValues) {
-    const idsList = valueToIds.get(value);
-    if (!idsList) continue;
-
-    const ids = new Uint32Array(idsList);
-    groups.push({
-      key: value,
-      label: value,
-      value,
-      ids,
-      count: ids.length,
-    });
-  }
-
-  return { groups };
+
+    return { groups };
 }
 
 function groupByNumeric(
-  field: Field,
-  visibleIds: Uint32Array,
-  buckets: number = 10
+    field: Field,
+    visibleIds: Uint32Array,
+    buckets: number = 10,
 ): GroupingResult {
-  if (field.kind !== 'number') {
-    return { groups: [] };
-  }
+    if (field.kind !== 'number') {
+        return { groups: [] };
+    }
 
-  let min = Infinity;
-  let max = -Infinity;
+    let min = Infinity;
+    let max = -Infinity;
 
-  for (let i = 0; i < visibleIds.length; i++) {
-    const value = field.values[visibleIds[i]];
-    if (!isNaN(value)) {
-      if (value < min) min = value;
-      if (value > max) max = value;
+    for (let i = 0; i < visibleIds.length; i++) {
+        const value = field.values[visibleIds[i]];
+        if (!isNaN(value)) {
+            if (value < min) min = value;
+            if (value > max) max = value;
+        }
     }
-  }
 
-  if (!isFinite(min) || !isFinite(max)) {
-    return { groups: [] };
-  }
+    if (!isFinite(min) || !isFinite(max)) {
+        return { groups: [] };
+    }
+
+    // A degenerate range (every finite value identical) makes bucketSize zero, which
+    // would divide-by-zero into NaN bucket indices below and throw. All finite values
+    // equal min in that case, so collapse to a single bucket holding every one of them.
+    if (min === max) {
+        const ids: number[] = [];
+        for (let i = 0; i < visibleIds.length; i++) {
+            const id = visibleIds[i];
+            if (!isNaN(field.values[id])) {
+                ids.push(id);
+            }
+        }
 
-  const range = max - min;
-  const bucketSize = range / buckets;
+        return {
+            groups: [
+                {
+                    key: '0',
+                    label: `${min.toFixed(1)} - ${max.toFixed(1)}`,
+                    value: min,
+                    ids: new Uint32Array(ids),
+                    count: ids.length,
+                },
+            ],
+        };
+    }
 
-  const bucketLists: number[][] = Array.from({ length: buckets }, () => []);
+    const range = max - min;
+    const bucketSize = range / buckets;
 
-  for (let i = 0; i < visibleIds.length; i++) {
-    const id = visibleIds[i];
-    const value = field.values[id];
-    if (isNaN(value)) continue;
+    const bucketLists: number[][] = Array.from({ length: buckets }, () => []);
 
-    let bucketIndex = Math.floor((value - min) / bucketSize);
-    if (bucketIndex >= buckets) bucketIndex = buckets - 1;
+    for (let i = 0; i < visibleIds.length; i++) {
+        const id = visibleIds[i];
+        const value = field.values[id];
+        if (isNaN(value)) continue;
 
-    bucketLists[bucketIndex].push(id);
-  }
+        let bucketIndex = Math.floor((value - min) / bucketSize);
+        if (bucketIndex >= buckets) bucketIndex = buckets - 1;
 
-  const groups: GroupResult[] = [];
+        bucketLists[bucketIndex].push(id);
+    }
 
-  for (let i = 0; i < buckets; i++) {
-    const list = bucketLists[i];
-    if (list.length === 0) continue;
+    const groups: GroupResult[] = [];
 
-    const bucketMin = min + i * bucketSize;
-    const bucketMax = min + (i + 1) * bucketSize;
+    for (let i = 0; i < buckets; i++) {
+        const list = bucketLists[i];
+        if (list.length === 0) continue;
 
-    const ids = new Uint32Array(list);
-    groups.push({
-      key: `${i}`,
-      label: `${bucketMin.toFixed(1)} - ${bucketMax.toFixed(1)}`,
-      value: bucketMin,
-      ids,
-      count: ids.length,
-    });
-  }
+        const bucketMin = min + i * bucketSize;
+        const bucketMax = min + (i + 1) * bucketSize;
 
-  return { groups };
+        const ids = new Uint32Array(list);
+        groups.push({
+            key: `${i}`,
+            label: `${bucketMin.toFixed(1)} - ${bucketMax.toFixed(1)}`,
+            value: bucketMin,
+            ids,
+            count: ids.length,
+        });
+    }
+
+    return { groups };
 }
 
 /**
  * Sort IDs based on a field
  */
 export function sortIds(
-  store: PivotStore,
-  ids: Uint32Array,
-  sortBy: string
+    store: PivotStore,
+    ids: Uint32Array,
+    sortBy: string,
 ): Uint32Array {
-  const field = store.fields.get(sortBy);
-  if (!field) return ids;
-
-  const sortedIds = new Uint32Array(ids);
-
-  if (field.kind === 'number') {
-    const values = field.values;
-    sortedIds.sort((a, b) => values[a] - values[b]);
-  } else if (field.kind === 'string') {
-    const values = field.values;
-    sortedIds.sort((a, b) => values[a].localeCompare(values[b]));
-  } else if (field.kind === 'boolean') {
-    const values = field.values;
-    sortedIds.sort((a, b) => values[a] - values[b]);
-  }
-
-  return sortedIds;
+    const field = store.fields.get(sortBy);
+    if (!field) return ids;
+
+    const sortedIds = new Uint32Array(ids);
+
+    if (field.kind === 'number') {
+        const values = field.values;
+        sortedIds.sort((a, b) => values[a] - values[b]);
+    } else if (field.kind === 'string') {
+        const values = field.values;
+        sortedIds.sort((a, b) => values[a].localeCompare(values[b]));
+    } else if (field.kind === 'boolean') {
+        const values = field.values;
+        sortedIds.sort((a, b) => values[a] - values[b]);
+    }
+
+    return sortedIds;
 }
diff --git a/Source/PivotViewer/engine/types.ts b/Source/PivotViewer/engine/types.ts
index 5de7f580..4dae79e1 100644
--- a/Source/PivotViewer/engine/types.ts
+++ b/Source/PivotViewer/engine/types.ts
@@ -6,23 +6,23 @@ export type ItemId = number | string;
 export type FieldValue = string | number | boolean | null;
 
 export interface FieldDef {
-  name: string;
-  kind: 'string' | 'number' | 'boolean';
+    name: string;
+    kind: 'string' | 'number' | 'boolean';
 }
 
 export interface StringField {
-  kind: 'string';
-  values: string[];
+    kind: 'string';
+    values: string[];
 }
 
 export interface NumberField {
-  kind: 'number';
-  values: Float64Array;
+    kind: 'number';
+    values: Float64Array;
 }
 
 export interface BooleanField {
-  kind: 'boolean';
-  values: Uint8Array;
+    kind: 'boolean';
+    values: Uint8Array;
 }
 
 export type Field = StringField | NumberField | BooleanField;
@@ -31,228 +31,228 @@ export type Field = StringField | NumberField | BooleanField;
  * Columnar data store for efficient scanning
  */
 export interface PivotStore {
-  count: number;
-  ids: Uint32Array;
-  fields: Map<string, Field>;
+    count: number;
+    ids: Uint32Array;
+    fields: Map<string, Field>;
 
-  /** Original items for rendering - indexed by ItemId */
-  items: unknown[];
+    /** Original items for rendering - indexed by ItemId */
+    items: unknown[];
 }
 
 /**
  * Facet index for categorical fields
  */
 export interface CategoricalIndex {
-  /** Map from value to sorted array of item IDs */
-  valueToIds: Map<string, Uint32Array>;
+    /** Map from value to sorted array of item IDs */
+    valueToIds: Map<string, Uint32Array>;
 
-  /** All unique values in this field */
-  values: string[];
+    /** All unique values in this field */
+    values: string[];
 }
 
 /**
  * Index for numeric fields - pre-sorted for range queries
  */
 export interface NumericIndex {
-  /** Values sorted ascending */
-  values: Float64Array;
+    /** Values sorted ascending */
+    values: Float64Array;
 
-  /** Item IDs parallel to values */
-  ids: Uint32Array;
+    /** Item IDs parallel to values */
+    ids: Uint32Array;
 
-  /** Min/max for quick bounds */
-  min: number;
-  max: number;
+    /** Min/max for quick bounds */
+    min: number;
+    max: number;
 }
 
 /**
  * All indexes for fast filtering and pivoting
  */
 export interface PivotIndexes {
-  categorical: Map<string, CategoricalIndex>;
-  numeric: Map<string, NumericIndex>;
+    categorical: Map<string, CategoricalIndex>;
+    numeric: Map<string, NumericIndex>;
 }
 
 /**
  * Filter specification
  */
 export interface FilterSpec {
-  field: string;
-  type: 'categorical' | 'numeric';
+    field: string;
+    type: 'categorical' | 'numeric';
 
-  /** For categorical: selected values */
-  values?: Set<string>;
+    /** For categorical: selected values */
+    values?: Set<string>;
 
-  /** For numeric: min/max range (inclusive) */
-  range?: { min: number; max: number };
+    /** For numeric: min/max range (inclusive) */
+    range?: { min: number; max: number };
 }
 
 /**
  * Result of filter operation
  */
 export interface FilterResult {
-  /** Sorted array of visible item IDs */
-  visibleIds: Uint32Array;
+    /** Sorted array of visible item IDs */
+    visibleIds: Uint32Array;
 
-  /** Number of items */
-  count: number;
+    /** Number of items */
+    count: number;
 }
 
 /**
  * Grouping specification
  */
 export interface GroupSpec {
-  field: string;
+    field: string;
 
-  /** For numeric fields: number of buckets */
-  buckets?: number;
+    /** For numeric fields: number of buckets */
+    buckets?: number;
 }
 
 /**
  * A single group result
  */
 export interface GroupResult {
-  /** Group key (value or bucket label) */
-  key: string;
+    /** Group key (value or bucket label) */
+    key: string;
 
-  /** Display label */
-  label: string;
+    /** Display label */
+    label: string;
 
-  /** Original value */
-  value: FieldValue;
+    /** Original value */
+    value: FieldValue;
 
-  /** Item IDs in this group (sorted) */
-  ids: Uint32Array;
+    /** Item IDs in this group (sorted) */
+    ids: Uint32Array;
 
-  /** Count */
-  count: number;
+    /** Count */
+    count: number;
 }
 
 /**
  * Result of grouping operation
  */
 export interface GroupingResult {
-  groups: GroupResult[];
-  ungrouped?: Uint32Array;
+    groups: GroupResult[];
+    ungrouped?: Uint32Array;
 }
 
 /**
  * Layout specification
  */
 export interface LayoutSpec {
-  viewMode: 'collection' | 'grouped';
-  cardWidth: number;
-  cardHeight: number;
-  cardsPerColumn: number;
-  groupSpacing: number;
-  containerWidth: number;
-  containerHeight?: number;
+    viewMode: 'collection' | 'grouped';
+    cardWidth: number;
+    cardHeight: number;
+    cardsPerColumn: number;
+    groupSpacing: number;
+    containerWidth: number;
+    containerHeight?: number;
 }
 
 /**
  * Position for a single item
  */
 export interface ItemPosition {
-  x: number;
-  y: number;
-  groupIndex: number;
+    x: number;
+    y: number;
+    groupIndex: number;
 }
 
 /**
  * Layout result - positions for all visible items
  */
 export interface LayoutResult {
-  /** Positions indexed by ItemId */
-  positions: Map<ItemId, ItemPosition>;
+    /** Positions indexed by ItemId */
+    positions: Map<ItemId, ItemPosition>;
 
-  /** Total width of layout */
-  totalWidth: number;
+    /** Total width of layout */
+    totalWidth: number;
 
-  /** Total height of layout */
-  totalHeight: number;
+    /** Total height of layout */
+    totalHeight: number;
 
-  /** Width of each bucket (only for grouped layout) */
-  bucketWidths?: number[];
+    /** Width of each bucket (only for grouped layout) */
+    bucketWidths?: number[];
 
-  /** X position of each group bucket (only for grouped layout) */
-  groupXs?: number[];
+    /** X position of each group bucket (only for grouped layout) */
+    groupXs?: number[];
 }
 
 /**
  * Message to worker: build indexes
  */
 export interface BuildIndexesMessage {
-  type: 'buildIndexes';
-  store: PivotStore;
-  fields: string[];
+    type: 'buildIndexes';
+    store: PivotStore;
+    fields: string[];
 }
 
 /**
  * Message from worker: indexes ready
  */
 export interface IndexesReadyMessage {
-  type: 'indexesReady';
-  indexes: PivotIndexes;
+    type: 'indexesReady';
+    indexes: PivotIndexes;
 }
 
 /**
  * Message to worker: apply filters
  */
 export interface ApplyFiltersMessage {
-  type: 'applyFilters';
-  filters: FilterSpec[];
+    type: 'applyFilters';
+    requestId: number;
+    filters: FilterSpec[];
 }
 
 /**
  * Message from worker: filter result
  */
 export interface FilterResultMessage {
-  type: 'filterResult';
-  result: FilterResult;
+    type: 'filterResult';
+    requestId: number;
+    result: FilterResult;
 }
 
 /**
  * Message to worker: compute grouping
  */
 export interface ComputeGroupingMessage {
-  type: 'computeGrouping';
-  visibleIds: Uint32Array;
-  groupBy: GroupSpec;
+    type: 'computeGrouping';
+    requestId: number;
+    visibleIds: Uint32Array;
+    groupBy: GroupSpec;
 }
 
 /**
  * Message from worker: grouping result
  */
 export interface GroupingResultMessage {
-  type: 'groupingResult';
-  result: GroupingResult;
+    type: 'groupingResult';
+    requestId: number;
+    result: GroupingResult;
 }
 
 export type WorkerInMessage =
-  | BuildIndexesMessage
-  | ApplyFiltersMessage
-  | ComputeGroupingMessage
-  | SortMessage;
+    BuildIndexesMessage | ApplyFiltersMessage | ComputeGroupingMessage | SortMessage;
 
 export type WorkerOutMessage =
-  | IndexesReadyMessage
-  | FilterResultMessage
-  | GroupingResultMessage
-  | SortResultMessage;
+    IndexesReadyMessage | FilterResultMessage | GroupingResultMessage | SortResultMessage;
 
 /**
  * Message to worker: sort ids
  */
 export interface SortMessage {
-  type: 'sort';
-  ids: Uint32Array;
-  sortBy: string;
+    type: 'sort';
+    requestId: number;
+    ids: Uint32Array;
+    sortBy: string;
 }
 
 /**
  * Message from worker: sort result
  */
 export interface SortResultMessage {
-  type: 'sortResult';
-  result: Uint32Array;
+    type: 'sortResult';
+    requestId: number;
+    result: Uint32Array;
 }
diff --git a/Source/PivotViewer/for_engine_applyFilters/when_a_categorical_filter_selection_matches_nothing.ts b/Source/PivotViewer/for_engine_applyFilters/when_a_categorical_filter_selection_matches_nothing.ts
new file mode 100644
index 00000000..d8784bd4
--- /dev/null
+++ b/Source/PivotViewer/for_engine_applyFilters/when_a_categorical_filter_selection_matches_nothing.ts
@@ -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 { buildStore, buildIndexes, applyFilters } from '../engine/store';
+import type { FilterResult } from '../engine/types';
+
+interface TestItem {
+    category: string;
+}
+
+describe('when applying a categorical filter whose selection matches no items', () => {
+    const data: TestItem[] = [{ category: 'A' }, { category: 'B' }, { category: 'A' }];
+    const extractors = new Map<string, (item: TestItem) => string>([
+        ['category', (item) => item.category],
+    ]);
+    const store = buildStore(data, extractors);
+    const indexes = buildIndexes(store, ['category']);
+    let result: FilterResult;
+
+    beforeEach(() => {
+        result = applyFilters(store, indexes, [
+            { field: 'category', type: 'categorical', values: new Set(['nonexistent']) },
+        ]);
+    });
+
+    it('should return an empty set of visible ids', () => {
+        result.visibleIds.should.have.lengthOf(0);
+    });
+
+    it('should report a zero count', () => {
+        result.count.should.equal(0);
+    });
+});
diff --git a/Source/PivotViewer/for_engine_applyFilters/when_a_numeric_range_filter_matches_nothing.ts b/Source/PivotViewer/for_engine_applyFilters/when_a_numeric_range_filter_matches_nothing.ts
new file mode 100644
index 00000000..8f0e5796
--- /dev/null
+++ b/Source/PivotViewer/for_engine_applyFilters/when_a_numeric_range_filter_matches_nothing.ts
@@ -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 { buildStore, buildIndexes, applyFilters } from '../engine/store';
+import type { FilterResult } from '../engine/types';
+
+interface TestItem {
+    price: number;
+}
+
+describe('when applying a numeric range filter whose range matches no items', () => {
+    const data: TestItem[] = [{ price: 10 }, { price: 50 }, { price: 100 }];
+    const extractors = new Map<string, (item: TestItem) => number>([
+        ['price', (item) => item.price],
+    ]);
+    const store = buildStore(data, extractors);
+    const indexes = buildIndexes(store, ['price']);
+    let result: FilterResult;
+
+    beforeEach(() => {
+        result = applyFilters(store, indexes, [
+            { field: 'price', type: 'numeric', range: { min: 1000, max: 2000 } },
+        ]);
+    });
+
+    it('should return an empty set of visible ids', () => {
+        result.visibleIds.should.have.lengthOf(0);
+    });
+
+    it('should report a zero count', () => {
+        result.count.should.equal(0);
+    });
+});
diff --git a/Source/PivotViewer/for_engine_applyFilters/when_a_zero_match_filter_is_mixed_with_a_matching_filter.ts b/Source/PivotViewer/for_engine_applyFilters/when_a_zero_match_filter_is_mixed_with_a_matching_filter.ts
new file mode 100644
index 00000000..7fc9ed46
--- /dev/null
+++ b/Source/PivotViewer/for_engine_applyFilters/when_a_zero_match_filter_is_mixed_with_a_matching_filter.ts
@@ -0,0 +1,43 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { buildStore, buildIndexes, applyFilters } from '../engine/store';
+import type { FilterResult } from '../engine/types';
+
+interface TestItem {
+    category: string;
+    price: number;
+}
+
+describe('when a zero-match filter is intersected with an otherwise-matching filter', () => {
+    const data: TestItem[] = [
+        { category: 'A', price: 10 },
+        { category: 'A', price: 50 },
+        { category: 'B', price: 20 },
+    ];
+    const extractors = new Map<string, (item: TestItem) => string | number>([
+        ['category', (item) => item.category],
+        ['price', (item) => item.price],
+    ]);
+    const store = buildStore(data, extractors);
+    const indexes = buildIndexes(store, ['category', 'price']);
+    let result: FilterResult;
+
+    beforeEach(() => {
+        // 'category' alone matches two items (both category 'A'), but the numeric range
+        // matches nothing - the intersection must collapse to empty, not silently fall
+        // back to the category-only matches.
+        result = applyFilters(store, indexes, [
+            { field: 'category', type: 'categorical', values: new Set(['A']) },
+            { field: 'price', type: 'numeric', range: { min: 1000, max: 2000 } },
+        ]);
+    });
+
+    it('should return an empty set of visible ids', () => {
+        result.visibleIds.should.have.lengthOf(0);
+    });
+
+    it('should report a zero count', () => {
+        result.count.should.equal(0);
+    });
+});
diff --git a/Source/PivotViewer/for_engine_computeGrouping/when_grouping_a_numeric_field_with_a_constant_value.ts b/Source/PivotViewer/for_engine_computeGrouping/when_grouping_a_numeric_field_with_a_constant_value.ts
new file mode 100644
index 00000000..a460b1fb
--- /dev/null
+++ b/Source/PivotViewer/for_engine_computeGrouping/when_grouping_a_numeric_field_with_a_constant_value.ts
@@ -0,0 +1,38 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { buildStore, buildIndexes, computeGrouping } from '../engine/store';
+import type { GroupingResult } from '../engine/types';
+
+interface TestItem {
+    price: number;
+}
+
+describe('when grouping a numeric field whose visible values are all identical', () => {
+    const data: TestItem[] = [{ price: 42 }, { price: 42 }, { price: 42 }];
+    const extractors = new Map<string, (item: TestItem) => number>([
+        ['price', (item) => item.price],
+    ]);
+    const store = buildStore(data, extractors);
+    const indexes = buildIndexes(store, ['price']);
+    let result: GroupingResult;
+
+    beforeEach(() => {
+        result = computeGrouping(store, indexes, store.ids, {
+            field: 'price',
+            buckets: 10,
+        });
+    });
+
+    it('should not throw and should produce exactly one group', () => {
+        result.groups.should.have.lengthOf(1);
+    });
+
+    it('should place every item in that single group/bucket', () => {
+        result.groups[0].ids.should.have.lengthOf(3);
+    });
+
+    it('should use the constant value as the group value', () => {
+        result.groups[0].value.should.equal(42);
+    });
+});
diff --git a/Source/PivotViewer/for_filterVisibleIdsBySearch/when_no_search_fields_are_provided.ts b/Source/PivotViewer/for_filterVisibleIdsBySearch/when_no_search_fields_are_provided.ts
new file mode 100644
index 00000000..5089f104
--- /dev/null
+++ b/Source/PivotViewer/for_filterVisibleIdsBySearch/when_no_search_fields_are_provided.ts
@@ -0,0 +1,23 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { filterVisibleIdsBySearch } from '../utils/search';
+
+interface TestItem {
+    name: string;
+}
+
+describe('when narrowing visible ids by search without searchFields configured', () => {
+    const data: TestItem[] = [{ name: 'Widget' }, { name: 'Gadget' }];
+    const visibleIds = new Uint32Array([0, 1]);
+
+    it('should leave visibleIds unchanged when searchFields is undefined, matching the documented no-op', () => {
+        const result = filterVisibleIdsBySearch(data, visibleIds, 'widget', undefined);
+        result.should.equal(visibleIds);
+    });
+
+    it('should leave visibleIds unchanged when searchFields is an empty array', () => {
+        const result = filterVisibleIdsBySearch(data, visibleIds, 'widget', []);
+        result.should.equal(visibleIds);
+    });
+});
diff --git a/Source/PivotViewer/for_filterVisibleIdsBySearch/when_search_fields_are_provided.ts b/Source/PivotViewer/for_filterVisibleIdsBySearch/when_search_fields_are_provided.ts
new file mode 100644
index 00000000..2706a34e
--- /dev/null
+++ b/Source/PivotViewer/for_filterVisibleIdsBySearch/when_search_fields_are_provided.ts
@@ -0,0 +1,54 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { filterVisibleIdsBySearch } from '../utils/search';
+
+interface TestItem {
+    name: string;
+    category: string;
+}
+
+describe('when narrowing visible ids by search with searchFields configured', () => {
+    const data: TestItem[] = [
+        { name: 'Widget', category: 'Hardware' },
+        { name: 'Gadget', category: 'Electronics' },
+        { name: 'Sprocket', category: 'Hardware' },
+    ];
+    const visibleIds = new Uint32Array([0, 1, 2]);
+    const searchFields = [
+        (item: TestItem) => item.name,
+        (item: TestItem) => item.category,
+    ];
+
+    it('should narrow to ids whose configured field matches the search term', () => {
+        const result = filterVisibleIdsBySearch(data, visibleIds, 'widget', searchFields);
+        result.should.have.lengthOf(1);
+        result[0].should.equal(0);
+    });
+
+    it('should match across every configured search field, not just the first', () => {
+        const result = filterVisibleIdsBySearch(
+            data,
+            visibleIds,
+            'hardware',
+            searchFields,
+        );
+        Array.from(result).should.deep.equal([0, 2]);
+    });
+
+    it('should only consider ids already present in visibleIds', () => {
+        const narrowedVisibleIds = new Uint32Array([1, 2]);
+        const result = filterVisibleIdsBySearch(
+            data,
+            narrowedVisibleIds,
+            'widget',
+            searchFields,
+        );
+        result.should.have.lengthOf(0);
+    });
+
+    it('should return visibleIds unchanged when the search term is empty', () => {
+        const result = filterVisibleIdsBySearch(data, visibleIds, '', searchFields);
+        result.should.equal(visibleIds);
+    });
+});
diff --git a/Source/PivotViewer/for_requestCorrelator/when_a_response_arrives_for_an_unregistered_request.ts b/Source/PivotViewer/for_requestCorrelator/when_a_response_arrives_for_an_unregistered_request.ts
new file mode 100644
index 00000000..2ed6de2a
--- /dev/null
+++ b/Source/PivotViewer/for_requestCorrelator/when_a_response_arrives_for_an_unregistered_request.ts
@@ -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 { createRequestCorrelator } from '../engine/requestCorrelator';
+
+describe('when a response arrives for an unregistered or already-resolved request id', () => {
+    const correlator = createRequestCorrelator<string>();
+    const requestId = correlator.nextId();
+
+    let callCount = 0;
+    correlator.register(requestId, () => {
+        callCount++;
+    });
+
+    it('should resolve and report success the first time', () => {
+        correlator.resolve(requestId, 'value').should.be.true;
+        callCount.should.equal(1);
+    });
+
+    it('should report failure without invoking a callback again for a duplicate/stale response', () => {
+        correlator.resolve(requestId, 'stale-value').should.be.false;
+        callCount.should.equal(1);
+    });
+
+    it('should report failure for a request id that was never registered', () => {
+        correlator.resolve(9999, 'never-registered').should.be.false;
+    });
+});
diff --git a/Source/PivotViewer/for_requestCorrelator/when_responses_arrive_out_of_order.ts b/Source/PivotViewer/for_requestCorrelator/when_responses_arrive_out_of_order.ts
new file mode 100644
index 00000000..73510011
--- /dev/null
+++ b/Source/PivotViewer/for_requestCorrelator/when_responses_arrive_out_of_order.ts
@@ -0,0 +1,38 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { createRequestCorrelator } from '../engine/requestCorrelator';
+
+describe('when two overlapping requests resolve out of order', () => {
+    const correlator = createRequestCorrelator<string>();
+
+    const firstRequestId = correlator.nextId();
+    const secondRequestId = correlator.nextId();
+
+    let firstResult: string | undefined;
+    let secondResult: string | undefined;
+
+    correlator.register(firstRequestId, (result) => {
+        firstResult = result;
+    });
+    correlator.register(secondRequestId, (result) => {
+        secondResult = result;
+    });
+
+    // Simulate the worker responding to the second request before the first.
+    correlator.resolve(secondRequestId, 'second-response');
+    correlator.resolve(firstRequestId, 'first-response');
+
+    it('should resolve the second request with its own response despite arriving first', () => {
+        (secondResult as string).should.equal('second-response');
+    });
+
+    it('should resolve the first request with its own response despite arriving last', () => {
+        (firstResult as string).should.equal('first-response');
+    });
+
+    it('should no longer report either request as pending once resolved', () => {
+        correlator.isPending(firstRequestId).should.be.false;
+        correlator.isPending(secondRequestId).should.be.false;
+    });
+});
diff --git a/Source/PivotViewer/for_resolveLayoutItemId/when_consumer_ids_are_1_based_and_differ_from_the_array_index.ts b/Source/PivotViewer/for_resolveLayoutItemId/when_consumer_ids_are_1_based_and_differ_from_the_array_index.ts
new file mode 100644
index 00000000..51290bb9
--- /dev/null
+++ b/Source/PivotViewer/for_resolveLayoutItemId/when_consumer_ids_are_1_based_and_differ_from_the_array_index.ts
@@ -0,0 +1,43 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { resolveLayoutItemId } from '../utils/idResolution';
+import type { LayoutResult } from '../engine/types';
+
+interface TestItem {
+    id: number;
+}
+
+describe('when the consumer supplies 1-based numeric ids that differ from the 0-based array index', () => {
+    // Mirrors story data that ids items starting at 1 instead of 0.
+    const data: TestItem[] = [{ id: 1 }, { id: 2 }, { id: 3 }];
+    const layout: LayoutResult = {
+        positions: new Map([
+            [0, { x: 0, y: 0, groupIndex: 0 }],
+            [1, { x: 100, y: 0, groupIndex: 0 }],
+            [2, { x: 200, y: 0, groupIndex: 0 }],
+        ]),
+        totalWidth: 300,
+        totalHeight: 100,
+    };
+    const resolveId = (item: TestItem) => item.id;
+
+    it('should resolve the middle item to its array index, not its 1-based consumer id', () => {
+        const result = resolveLayoutItemId(data, data[1], layout, resolveId);
+        result.should.equal(1);
+        result.should.not.equal(2);
+    });
+
+    it('should resolve the last item to its array index, not its 1-based consumer id', () => {
+        const result = resolveLayoutItemId(data, data[2], layout, resolveId);
+        result.should.equal(2);
+        result.should.not.equal(3);
+    });
+
+    it('should find a real position in the layout for every item', () => {
+        for (const item of data) {
+            const result = resolveLayoutItemId(data, item, layout, resolveId);
+            layout.positions.has(result).should.be.true;
+        }
+    });
+});
diff --git a/Source/PivotViewer/for_resolveLayoutItemId/when_the_item_is_found_at_its_array_index.ts b/Source/PivotViewer/for_resolveLayoutItemId/when_the_item_is_found_at_its_array_index.ts
new file mode 100644
index 00000000..b664e03d
--- /dev/null
+++ b/Source/PivotViewer/for_resolveLayoutItemId/when_the_item_is_found_at_its_array_index.ts
@@ -0,0 +1,35 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { resolveLayoutItemId } from '../utils/idResolution';
+import type { LayoutResult } from '../engine/types';
+
+interface TestItem {
+    id: number;
+}
+
+describe('when resolving the layout id for an item present in data', () => {
+    // Layout keys are array indices (see buildStore/computeLayout), not consumer ids.
+    const data: TestItem[] = [{ id: 10 }, { id: 20 }, { id: 30 }];
+    const layout: LayoutResult = {
+        positions: new Map([
+            [0, { x: 0, y: 0, groupIndex: 0 }],
+            [1, { x: 100, y: 0, groupIndex: 0 }],
+            [2, { x: 200, y: 0, groupIndex: 0 }],
+        ]),
+        totalWidth: 300,
+        totalHeight: 100,
+    };
+    const resolveId = (item: TestItem) => item.id;
+
+    it("should use the item's array index as the layout key", () => {
+        const result = resolveLayoutItemId(data, data[1], layout, resolveId);
+        result.should.equal(1);
+    });
+
+    it('should not use the consumer-supplied numeric id as the layout key', () => {
+        const result = resolveLayoutItemId(data, data[2], layout, resolveId);
+        result.should.equal(2);
+        result.should.not.equal(30);
+    });
+});
diff --git a/Source/PivotViewer/for_resolveLayoutItemId/when_the_item_is_not_found_in_data.ts b/Source/PivotViewer/for_resolveLayoutItemId/when_the_item_is_not_found_in_data.ts
new file mode 100644
index 00000000..327de446
--- /dev/null
+++ b/Source/PivotViewer/for_resolveLayoutItemId/when_the_item_is_not_found_in_data.ts
@@ -0,0 +1,25 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { resolveLayoutItemId } from '../utils/idResolution';
+import type { LayoutResult } from '../engine/types';
+
+interface TestItem {
+    id: number;
+}
+
+describe('when the item is not present in data (e.g. a stale reference)', () => {
+    const data: TestItem[] = [{ id: 1 }, { id: 2 }];
+    const staleItem: TestItem = { id: 99 };
+    const layout: LayoutResult = {
+        positions: new Map([[99, { x: 0, y: 0, groupIndex: 0 }]]),
+        totalWidth: 100,
+        totalHeight: 100,
+    };
+    const resolveId = (item: TestItem) => item.id;
+
+    it('should fall back to resolveId when data.indexOf returns -1', () => {
+        const result = resolveLayoutItemId(data, staleItem, layout, resolveId);
+        result.should.equal(99);
+    });
+});
diff --git a/Source/PivotViewer/hooks/useCardSelection.ts b/Source/PivotViewer/hooks/useCardSelection.ts
index c2791836..5a5f9738 100644
--- a/Source/PivotViewer/hooks/useCardSelection.ts
+++ b/Source/PivotViewer/hooks/useCardSelection.ts
@@ -9,10 +9,17 @@ import type { ViewMode } from '../components/Toolbar';
 import {
     getCardPositionFromLayout,
     normalizeIdToLayoutKey,
+    resolveLayoutItemId,
     type CardPosition,
 } from '../utils/idResolution';
 import { createCardPositionCallbacks } from '../utils/cardPosition';
-import { ZOOM_MAX, MIN_ZOOM_ON_SELECT, ZOOM_MULTIPLIER, BASE_CARD_WIDTH, BASE_CARD_HEIGHT } from '../utils/constants';
+import {
+    ZOOM_MAX,
+    MIN_ZOOM_ON_SELECT,
+    ZOOM_MULTIPLIER,
+    BASE_CARD_WIDTH,
+    BASE_CARD_HEIGHT,
+} from '../utils/constants';
 
 interface UseCardSelectionParams<TItem extends object> {
     data: TItem[];
@@ -32,7 +39,9 @@ interface UseCardSelectionParams<TItem extends object> {
     setZoomLevel: (level: number) => void;
     setIsZooming: (zooming: boolean) => void;
     setSelectedItem: (item: TItem | null) => void;
-    setPreSelectionState: (state: { zoom: number; scrollLeft: number; scrollTop: number } | null) => void;
+    setPreSelectionState: (
+        state: { zoom: number; scrollLeft: number; scrollTop: number } | null,
+    ) => void;
 }
 
 export function useCardSelection<TItem extends object>({
@@ -55,77 +64,118 @@ export function useCardSelection<TItem extends object>({
     setSelectedItem,
     setPreSelectionState,
 }: UseCardSelectionParams<TItem>) {
-    return useCallback((item: TItem, e: MouseEvent, id?: number | string) => {
-        if (isPanning) return;
+    return useCallback(
+        (item: TItem, e: MouseEvent, id?: number | string) => {
+            if (isPanning) return;
 
-        // Use the containerRef directly as the scrollable viewport
-        const container = containerRef.current;
-        if (!container) return;
+            // Use the containerRef directly as the scrollable viewport
+            const container = containerRef.current;
+            if (!container) return;
 
-        // Resolve item ID
-        let itemId = (id !== undefined && id !== null) ? id : resolveId(item, 0);
-        itemId = normalizeIdToLayoutKey(itemId, layout);
+            // Resolve item ID. `id` (when provided by the sprite click) is already the array-index
+            // layout key; only fall back to the array-index/resolveId resolution when it's missing,
+            // never to a raw consumer id - internal layout ids are array indices, not consumer ids.
+            const itemId =
+                id !== undefined && id !== null
+                    ? normalizeIdToLayoutKey(id, layout)
+                    : resolveLayoutItemId(data, item, layout, resolveId);
 
-        const selectedId = selectedItem
-            ? (() => {
-                const index = data.indexOf(selectedItem);
-                const rawSelectedId = index !== -1 ? resolveId(selectedItem, index) : resolveId(selectedItem, 0);
-                return normalizeIdToLayoutKey(rawSelectedId, layout);
-            })()
-            : null;
+            const selectedId = selectedItem
+                ? resolveLayoutItemId(data, selectedItem, layout, resolveId)
+                : null;
 
-        // Get card position from layout
-        const cardPosition = getCardPositionFromLayout(itemId, layout, BASE_CARD_WIDTH, BASE_CARD_HEIGHT);
+            // Get card position from layout
+            const cardPosition = getCardPositionFromLayout(
+                itemId,
+                layout,
+                BASE_CARD_WIDTH,
+                BASE_CARD_HEIGHT,
+            );
 
-        // Calculate target position for animation
-        let targetCardPosition: CardPosition | null = null;
-        let callbacks = { getCardPositionAtZoom: null as unknown as ((zoom: number) => CardPosition | null), getLayoutSizeAtZoom: null as unknown as ((zoom: number) => { width: number; height: number }) };
-        let targetTotalHeight = layout.totalHeight;
+            // Calculate target position for animation
+            let targetCardPosition: CardPosition | null = null;
+            // SAFETY: these placeholders are only read when viewMode === 'grouped' && cardPosition,
+            // and callbacks is always reassigned to createCardPositionCallbacks' real functions before
+            // that branch reads it, so the null placeholder is never actually invoked.
+            let callbacks = {
+                getCardPositionAtZoom: null as unknown as (
+                    zoom: number,
+                ) => CardPosition | null,
+                getLayoutSizeAtZoom: null as unknown as (zoom: number) => {
+                    width: number;
+                    height: number;
+                },
+            };
+            let targetTotalHeight = layout.totalHeight;
 
-        if (viewMode === 'grouped' && cardPosition) {
-            // Calculate target zoom
-            const targetZoom = Math.min(ZOOM_MAX, Math.max(MIN_ZOOM_ON_SELECT, zoomLevel * ZOOM_MULTIPLIER));
+            if (viewMode === 'grouped' && cardPosition) {
+                // Calculate target zoom
+                const targetZoom = Math.min(
+                    ZOOM_MAX,
+                    Math.max(MIN_ZOOM_ON_SELECT, zoomLevel * ZOOM_MULTIPLIER),
+                );
 
-            const targetContainerWidth = containerDimensions.width / targetZoom;
-            const targetContainerHeight = containerDimensions.height;
+                const targetContainerWidth = containerDimensions.width / targetZoom;
+                const targetContainerHeight = containerDimensions.height;
 
-            callbacks = createCardPositionCallbacks(
-                itemId,
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                grouping as unknown as any,
-                viewMode,
-                targetContainerWidth,
-                targetContainerHeight,
-            );
+                callbacks = createCardPositionCallbacks(
+                    itemId,
+                    // SAFETY: `grouping` is typed `unknown` in this hook's params to avoid a circular
+                    // type import; it is always the GroupingResult produced by the engine, which is
+                    // exactly what createCardPositionCallbacks expects.
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    grouping as unknown as any,
+                    viewMode,
+                    targetContainerWidth,
+                    targetContainerHeight,
+                );
 
-            const targetPosition = callbacks.getCardPositionAtZoom(targetZoom);
-            if (targetPosition) {
-                targetCardPosition = targetPosition;
-            }
+                const targetPosition = callbacks.getCardPositionAtZoom(targetZoom);
+                if (targetPosition) {
+                    targetCardPosition = targetPosition;
+                }
 
-            const targetLayout = callbacks.getLayoutSizeAtZoom(targetZoom);
-            targetTotalHeight = targetLayout.height;
-        }
+                const targetLayout = callbacks.getLayoutSizeAtZoom(targetZoom);
+                targetTotalHeight = targetLayout.height;
+            }
 
-        handleCardSelection({
-            item,
-            itemId,
-            selectedItemId: selectedId,
-            container,
-            cardPosition,
-            targetCardPosition,
-            getCardPositionAtZoom: callbacks.getCardPositionAtZoom,
-            getLayoutSizeAtZoom: callbacks.getLayoutSizeAtZoom,
-            spacer: spacerRef.current,
+            handleCardSelection({
+                item,
+                itemId,
+                selectedItemId: selectedId,
+                container,
+                cardPosition,
+                targetCardPosition,
+                getCardPositionAtZoom: callbacks.getCardPositionAtZoom,
+                getLayoutSizeAtZoom: callbacks.getLayoutSizeAtZoom,
+                spacer: spacerRef.current,
+                preSelectionState,
+                startScrollPosition: { x: scrollPosition.x, y: scrollPosition.y },
+                setZoomLevel,
+                setIsZooming,
+                setSelectedItem,
+                setPreSelectionState,
+                viewMode,
+                zoomLevel,
+                totalHeight: targetTotalHeight,
+            });
+        },
+        [
+            isPanning,
+            selectedItem,
+            zoomLevel,
             preSelectionState,
-            startScrollPosition: { x: scrollPosition.x, y: scrollPosition.y },
-            setZoomLevel,
-            setIsZooming,
-            setSelectedItem,
-            setPreSelectionState,
             viewMode,
-            zoomLevel,
-            totalHeight: targetTotalHeight,
-        });
-    }, [isPanning, selectedItem, zoomLevel, preSelectionState, viewMode, resolveId, setZoomLevel, layout, grouping, containerRef, spacerRef, containerDimensions, scrollPosition, data, getItemId]);
+            resolveId,
+            setZoomLevel,
+            layout,
+            grouping,
+            containerRef,
+            spacerRef,
+            containerDimensions,
+            scrollPosition,
+            data,
+            getItemId,
+        ],
+    );
 }
diff --git a/Source/PivotViewer/hooks/useCurrentFilters.ts b/Source/PivotViewer/hooks/useCurrentFilters.ts
index 3ae31246..0378823b 100644
--- a/Source/PivotViewer/hooks/useCurrentFilters.ts
+++ b/Source/PivotViewer/hooks/useCurrentFilters.ts
@@ -5,25 +5,21 @@ import { useMemo } from 'react';
 import type { FilterSpec, GroupSpec } from '../engine/types';
 import type { PivotDimension, PivotFilter } from '../types';
 
+/**
+ * Builds the engine {@link FilterSpec}s for the UI's categorical/range/dimension filter state.
+ * Free-text search is not part of this - `searchFields` narrows already-visible ids client-side
+ * after the engine filters run (see `filterVisibleIdsBySearch`), so it never becomes a FilterSpec.
+ */
 export function useCurrentFilters<TItem extends object>(
     filters: PivotFilter<TItem>[] | undefined,
     filterState: Record<string, Set<string>>,
     rangeFilterState: Record<string, [number | null, number | null] | null>,
-    search: string,
-    searchFields: unknown[] | undefined,
     dimensionFilter: string | null,
     activeDimension: PivotDimension<TItem> | undefined,
 ): FilterSpec[] {
     return useMemo((): FilterSpec[] => {
         const specs: FilterSpec[] = [];
 
-        // Search filter
-        const searchTerm = search.trim().toLowerCase();
-        if (searchTerm && searchFields && searchFields.length > 0) {
-            // TODO: Implement search in worker
-            // For now, search will be handled client-side after worker filtering
-        }
-
         // Categorical filters
         for (const [key, values] of Object.entries(filterState)) {
             const valueSet = values as Set<string>;
@@ -59,7 +55,7 @@ export function useCurrentFilters<TItem extends object>(
         }
 
         return specs;
-    }, [filterState, rangeFilterState, search, searchFields, dimensionFilter, activeDimension]);
+    }, [filterState, rangeFilterState, dimensionFilter, activeDimension]);
 }
 
 export function useCurrentGroupBy<TItem extends object>(
diff --git a/Source/PivotViewer/hooks/useDetailPanelClose.ts b/Source/PivotViewer/hooks/useDetailPanelClose.ts
index 97b5949d..3449ebb4 100644
--- a/Source/PivotViewer/hooks/useDetailPanelClose.ts
+++ b/Source/PivotViewer/hooks/useDetailPanelClose.ts
@@ -6,10 +6,7 @@ import type React from 'react';
 import { animateZoomAndScroll, smoothScrollTo } from '../utils/animations';
 import type { Layout } from '../utils/cardPosition';
 import type { ViewMode } from '../components/Toolbar';
-import {
-    getCardPositionFromLayout,
-    normalizeIdToLayoutKey,
-} from '../utils/idResolution';
+import { getCardPositionFromLayout, resolveLayoutItemId } from '../utils/idResolution';
 import { createCardPositionCallbacks } from '../utils/cardPosition';
 import { BASE_CARD_WIDTH, BASE_CARD_HEIGHT } from '../utils/constants';
 
@@ -55,12 +52,15 @@ export function useDetailPanelClose<TItem extends object>({
         }
 
         // Resolve item ID
-        const index = data.indexOf(selectedItem);
-        let itemId: string | number = index !== -1 ? index : resolveId(selectedItem, 0);
-        itemId = normalizeIdToLayoutKey(itemId, layout);
+        const itemId = resolveLayoutItemId(data, selectedItem, layout, resolveId);
 
         // Get card position from layout
-        const cardPosition = getCardPositionFromLayout(itemId, layout, BASE_CARD_WIDTH, BASE_CARD_HEIGHT);
+        const cardPosition = getCardPositionFromLayout(
+            itemId,
+            layout,
+            BASE_CARD_WIDTH,
+            BASE_CARD_HEIGHT,
+        );
 
         if (!preSelectionState) {
             setSelectedItem(null);
@@ -70,7 +70,12 @@ export function useDetailPanelClose<TItem extends object>({
         // Collection mode: just scroll back
         if (viewMode === 'collection') {
             setSelectedItem(null);
-            smoothScrollTo(container, preSelectionState.scrollLeft, preSelectionState.scrollTop, true);
+            smoothScrollTo(
+                container,
+                preSelectionState.scrollLeft,
+                preSelectionState.scrollTop,
+                true,
+            );
             setPreSelectionState(null);
             return;
         }
@@ -80,7 +85,12 @@ export function useDetailPanelClose<TItem extends object>({
 
         if (!zoomChanged || !cardPosition) {
             setSelectedItem(null);
-            smoothScrollTo(container, preSelectionState.scrollLeft, preSelectionState.scrollTop, true);
+            smoothScrollTo(
+                container,
+                preSelectionState.scrollLeft,
+                preSelectionState.scrollTop,
+                true,
+            );
             setPreSelectionState(null);
             return;
         }
@@ -92,6 +102,9 @@ export function useDetailPanelClose<TItem extends object>({
 
         const callbacks = createCardPositionCallbacks(
             itemId,
+            // SAFETY: `grouping` is typed `unknown` in this hook's params to avoid a circular
+            // type import; it is always the GroupingResult produced by the engine, which is
+            // exactly what createCardPositionCallbacks expects.
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             grouping as unknown as any,
             viewMode,
@@ -119,5 +132,20 @@ export function useDetailPanelClose<TItem extends object>({
                 setPreSelectionState(null);
             },
         });
-    }, [preSelectionState, selectedItem, zoomLevel, viewMode, resolveId, setZoomLevel, layout, grouping, containerRef, containerDimensions, data, setSelectedItem, setPreSelectionState, setIsZooming]);
+    }, [
+        preSelectionState,
+        selectedItem,
+        zoomLevel,
+        viewMode,
+        resolveId,
+        setZoomLevel,
+        layout,
+        grouping,
+        containerRef,
+        containerDimensions,
+        data,
+        setSelectedItem,
+        setPreSelectionState,
+        setIsZooming,
+    ]);
 }
diff --git a/Source/PivotViewer/hooks/usePivotEngine.ts b/Source/PivotViewer/hooks/usePivotEngine.ts
index f234fbd2..d7cc68b4 100644
--- a/Source/PivotViewer/hooks/usePivotEngine.ts
+++ b/Source/PivotViewer/hooks/usePivotEngine.ts
@@ -3,290 +3,323 @@
 
 import { useEffect, useRef, useState, useCallback } from 'react';
 import type {
-  PivotStore,
-  PivotIndexes,
-  FilterSpec,
-  FilterResult,
-  GroupSpec,
-  GroupingResult,
-  WorkerInMessage,
-  WorkerOutMessage,
-  FieldValue,
+    PivotStore,
+    PivotIndexes,
+    FilterSpec,
+    FilterResult,
+    GroupSpec,
+    GroupingResult,
+    WorkerInMessage,
+    WorkerOutMessage,
+    FieldValue,
 } from '../engine/types';
-import { buildStore, buildIndexes, applyFilters, computeGrouping, sortIds } from '../engine/store';
+import {
+    buildStore,
+    buildIndexes,
+    applyFilters,
+    computeGrouping,
+    sortIds,
+} from '../engine/store';
+import { createRequestCorrelator } from '../engine/requestCorrelator';
 
 export interface UsePivotEngineOptions<TItem extends object> {
-  data: TItem[];
-  fieldExtractors: Map<string, (item: TItem) => FieldValue>;
-  indexFields: string[];
+    data: TItem[];
+    fieldExtractors: Map<string, (item: TItem) => FieldValue>;
+    indexFields: string[];
 }
 
 export interface UsePivotEngineResult {
-  ready: boolean;
-  applyFilters: (filters: FilterSpec[]) => Promise<FilterResult>;
-  computeGrouping: (visibleIds: Uint32Array, groupBy: GroupSpec) => Promise<GroupingResult>;
-  sortIds: (visibleIds: Uint32Array, sortBy: string) => Promise<Uint32Array>;
+    ready: boolean;
+    applyFilters: (filters: FilterSpec[]) => Promise<FilterResult>;
+    computeGrouping: (
+        visibleIds: Uint32Array,
+        groupBy: GroupSpec,
+    ) => Promise<GroupingResult>;
+    sortIds: (visibleIds: Uint32Array, sortBy: string) => Promise<Uint32Array>;
 }
 
 export function usePivotEngine<TItem extends object>({
-  data,
-  fieldExtractors,
-  indexFields,
+    data,
+    fieldExtractors,
+    indexFields,
 }: UsePivotEngineOptions<TItem>): UsePivotEngineResult {
-  const [ready, setReady] = useState(false);
-  const [workerAvailable, setWorkerAvailable] = useState(false);
-  const workerRef = useRef<Worker | null>(null);
-  const indexesRef = useRef<PivotIndexes | null>(null);
-  const fallbackRef = useRef(false);
-  const storeRef = useRef<PivotStore | null>(null);
-  const pendingCallbacksRef = useRef<Map<string, (result: unknown) => void>>(new Map());
-
-  useEffect(() => {
-    if (typeof window === 'undefined' || typeof Worker === 'undefined') {
-      fallbackRef.current = true;
-      setWorkerAvailable(false);
-      return;
-    }
-
-    const workerUrl = new URL('../engine/pivot.worker.js', import.meta.url);
-    let disposed = false;
-
-    const enableFallback = () => {
-      fallbackRef.current = true;
-      workerRef.current = null;
-      setWorkerAvailable(false);
-    };
-
-    const setupWorker = async () => {
-      try {
-        if (typeof fetch === 'function') {
-          const response = await fetch(workerUrl, { method: 'HEAD' });
-          const contentType = response.headers.get('content-type') ?? '';
-
-          if (!response.ok || !contentType.includes('javascript')) {
-            enableFallback();
+    const [ready, setReady] = useState(false);
+    const [workerAvailable, setWorkerAvailable] = useState(false);
+    const workerRef = useRef<Worker | null>(null);
+    const indexesRef = useRef<PivotIndexes | null>(null);
+    const fallbackRef = useRef(false);
+    const storeRef = useRef<PivotStore | null>(null);
+    // Every filter/grouping/sort request/response pair is correlated by a unique request id
+    // (see createRequestCorrelator) so overlapping or out-of-order worker responses resolve
+    // their own promise. groupingRequestIdRef separately tracks the in-flight grouping request,
+    // preserving the intentional single-flight de-dup below (an overlapping grouping call
+    // resolves immediately with an empty result instead of queuing behind the worker).
+    const correlatorRef = useRef(createRequestCorrelator<unknown>());
+    const groupingRequestIdRef = useRef<number | null>(null);
+
+    useEffect(() => {
+        if (typeof window === 'undefined' || typeof Worker === 'undefined') {
+            fallbackRef.current = true;
+            setWorkerAvailable(false);
             return;
-          }
         }
-      } catch {
-        enableFallback();
-        return;
-      }
-
-      if (disposed) {
-        return;
-      }
 
-      const worker = new Worker(workerUrl, { type: 'module' });
+        const workerUrl = new URL('../engine/pivot.worker.js', import.meta.url);
+        let disposed = false;
 
-      workerRef.current = worker;
-      setWorkerAvailable(true);
-
-      worker.onmessage = (e: MessageEvent<WorkerOutMessage>) => {
-        const message = e.data;
-
-        switch (message.type) {
-          case 'indexesReady':
-            setReady(true);
-            break;
+        const enableFallback = () => {
+            fallbackRef.current = true;
+            workerRef.current = null;
+            setWorkerAvailable(false);
+        };
 
-          case 'filterResult': {
-            const callback = pendingCallbacksRef.current.get('filter');
-            if (callback) {
-              callback(message.result);
-              pendingCallbacksRef.current.delete('filter');
+        const setupWorker = async () => {
+            try {
+                if (typeof fetch === 'function') {
+                    const response = await fetch(workerUrl, { method: 'HEAD' });
+                    const contentType = response.headers.get('content-type') ?? '';
+
+                    if (!response.ok || !contentType.includes('javascript')) {
+                        enableFallback();
+                        return;
+                    }
+                }
+            } catch {
+                enableFallback();
+                return;
             }
-            break;
-          }
-
-          case 'groupingResult': {
-            const callback = pendingCallbacksRef.current.get('grouping');
-            if (callback) {
-              callback(message.result);
-              pendingCallbacksRef.current.delete('grouping');
-            }
-            break;
-          }
-
-          case 'sortResult': {
-            const callback = pendingCallbacksRef.current.get('sort');
-            if (callback) {
-              callback(message.result);
-              pendingCallbacksRef.current.delete('sort');
-            }
-            break;
-          }
-        }
-      };
-
-      worker.onerror = (error) => {
-        console.error('[PivotEngine] Worker error:', error);
-        enableFallback();
-        if (storeRef.current) {
-          try {
-            indexesRef.current = buildIndexes(storeRef.current, indexFields);
-          } catch (e) {
-            console.error('[PivotEngine] Failed to build indexes in fallback:', e);
-            indexesRef.current = null;
-          }
-          setReady(true);
-        }
-      };
-    };
 
-    void setupWorker();
-
-    return () => {
-      disposed = true;
-      workerRef.current?.terminate();
-      workerRef.current = null;
-    };
-  }, [indexFields]);
-
-  useEffect(() => {
-    setReady(false);
-
-    const store = buildStore(data, fieldExtractors);
-    storeRef.current = store;
-
-    try {
-      indexesRef.current = buildIndexes(store, indexFields);
-    } catch (e) {
-      console.error('[PivotEngine] buildIndexes failed:', e);
-      indexesRef.current = null;
-    }
-
-    if (workerRef.current && !fallbackRef.current) {
-      const fieldsArray = Array.from(store.fields.entries());
-      const serializableStore = {
-        ...store,
-        fields: fieldsArray,
-      };
-
-      const message: WorkerInMessage = {
-        type: 'buildIndexes',
-        store: serializableStore as unknown as PivotStore,
-        fields: indexFields,
-      };
-      workerRef.current.postMessage(message);
-    } else {
-      setReady(true);
-    }
-  }, [data, fieldExtractors, indexFields, workerAvailable]);
-
-  const applyFiltersCallback = useCallback(
-    (filters: FilterSpec[]): Promise<FilterResult> => {
-      return new Promise((resolve) => {
-        // If worker is not available, use synchronous fallback using local indexes
-        if (!workerRef.current || fallbackRef.current) {
-          try {
-            const store = storeRef.current;
-            const indexes = indexesRef.current;
-            if (store && indexes) {
-              const result = applyFilters(store, indexes, filters);
-              resolve(result);
-              return;
+            if (disposed) {
+                return;
             }
-          } catch (e) {
-            console.error('[PivotEngine] fallback applyFilters error:', e);
-          }
 
-          // if fallback not possible, return empty result
-          resolve({ visibleIds: new Uint32Array(0), count: 0 });
-          return;
-        }
-
-        pendingCallbacksRef.current.set('filter', resolve as (result: unknown) => void);
-
-        const message: WorkerInMessage = {
-          type: 'applyFilters',
-          filters,
+            const worker = new Worker(workerUrl, { type: 'module' });
+
+            workerRef.current = worker;
+            setWorkerAvailable(true);
+
+            worker.onmessage = (e: MessageEvent<WorkerOutMessage>) => {
+                const message = e.data;
+
+                switch (message.type) {
+                    case 'indexesReady':
+                        setReady(true);
+                        break;
+
+                    case 'filterResult': {
+                        correlatorRef.current.resolve(message.requestId, message.result);
+                        break;
+                    }
+
+                    case 'groupingResult': {
+                        correlatorRef.current.resolve(message.requestId, message.result);
+                        if (groupingRequestIdRef.current === message.requestId) {
+                            groupingRequestIdRef.current = null;
+                        }
+                        break;
+                    }
+
+                    case 'sortResult': {
+                        correlatorRef.current.resolve(message.requestId, message.result);
+                        break;
+                    }
+                }
+            };
+
+            worker.onerror = (error) => {
+                console.error('[PivotEngine] Worker error:', error);
+                enableFallback();
+                if (storeRef.current) {
+                    try {
+                        indexesRef.current = buildIndexes(storeRef.current, indexFields);
+                    } catch (e) {
+                        console.error(
+                            '[PivotEngine] Failed to build indexes in fallback:',
+                            e,
+                        );
+                        indexesRef.current = null;
+                    }
+                    setReady(true);
+                }
+            };
         };
 
-        workerRef.current.postMessage(message);
-      });
-    },
-    [ready]
-  );
-
-  const computeGroupingCallback = useCallback(
-    (visibleIds: Uint32Array, groupBy: GroupSpec): Promise<GroupingResult> => {
-      // Check if there's already a pending grouping request
-      if (pendingCallbacksRef.current.has('grouping')) {
-        return Promise.resolve({ groups: [] });
-      }
-
-      return new Promise((resolve) => {
-        // synchronous fallback if worker unavailable
-        if (!workerRef.current || fallbackRef.current) {
-          try {
-            const store = storeRef.current;
-            const indexes = indexesRef.current;
-            if (store && indexes) {
-              const result = computeGrouping(store, indexes, visibleIds, groupBy);
-              resolve(result);
-              return;
-            }
-          } catch (e) {
-            console.error('[PivotEngine] fallback computeGrouping error:', e);
-          }
-
-          resolve({ groups: [] });
-          return;
-        }
-
-        pendingCallbacksRef.current.set('grouping', resolve as (result: unknown) => void);
+        void setupWorker();
 
-        const message: WorkerInMessage = {
-          type: 'computeGrouping',
-          visibleIds,
-          groupBy,
+        return () => {
+            disposed = true;
+            workerRef.current?.terminate();
+            workerRef.current = null;
         };
+    }, [indexFields]);
 
-        workerRef.current.postMessage(message);
-      });
-    },
-    [ready]
-  );
-
-  const sortIdsCallback = useCallback(
-    (visibleIds: Uint32Array, sortBy: string): Promise<Uint32Array> => {
-      return new Promise((resolve) => {
-        // synchronous fallback if worker unavailable
-        if (!workerRef.current || fallbackRef.current) {
-          try {
-            const store = storeRef.current;
-            if (store) {
-              const result = sortIds(store, visibleIds, sortBy);
-              resolve(result);
-              return;
-            }
-          } catch (e) {
-            console.error('[PivotEngine] fallback sortIds error:', e);
-          }
+    useEffect(() => {
+        setReady(false);
 
-          resolve(visibleIds);
-          return;
-        }
+        const store = buildStore(data, fieldExtractors);
+        storeRef.current = store;
 
-        pendingCallbacksRef.current.set('sort', resolve as (result: unknown) => void);
+        try {
+            indexesRef.current = buildIndexes(store, indexFields);
+        } catch (e) {
+            console.error('[PivotEngine] buildIndexes failed:', e);
+            indexesRef.current = null;
+        }
 
-        const message: WorkerInMessage = {
-          type: 'sort',
-          ids: visibleIds,
-          sortBy,
-        };
+        if (workerRef.current && !fallbackRef.current) {
+            const fieldsArray = Array.from(store.fields.entries());
+            const serializableStore = {
+                ...store,
+                fields: fieldsArray,
+            };
+
+            const message: WorkerInMessage = {
+                type: 'buildIndexes',
+                // SAFETY: serializableStore carries fields as a [string, Field][] tuple array (Map isn't
+                // structured-clonable) which pivot.worker.ts converts back to a Map on receipt.
+                store: serializableStore as unknown as PivotStore,
+                fields: indexFields,
+            };
+            workerRef.current.postMessage(message);
+        } else {
+            setReady(true);
+        }
+    }, [data, fieldExtractors, indexFields, workerAvailable]);
+
+    const applyFiltersCallback = useCallback(
+        (filters: FilterSpec[]): Promise<FilterResult> => {
+            return new Promise((resolve) => {
+                // If worker is not available, use synchronous fallback using local indexes
+                if (!workerRef.current || fallbackRef.current) {
+                    try {
+                        const store = storeRef.current;
+                        const indexes = indexesRef.current;
+                        if (store && indexes) {
+                            const result = applyFilters(store, indexes, filters);
+                            resolve(result);
+                            return;
+                        }
+                    } catch (e) {
+                        console.error('[PivotEngine] fallback applyFilters error:', e);
+                    }
+
+                    // if fallback not possible, return empty result
+                    resolve({ visibleIds: new Uint32Array(0), count: 0 });
+                    return;
+                }
+
+                const requestId = correlatorRef.current.nextId();
+                correlatorRef.current.register(
+                    requestId,
+                    resolve as (result: unknown) => void,
+                );
+
+                const message: WorkerInMessage = {
+                    type: 'applyFilters',
+                    requestId,
+                    filters,
+                };
+
+                workerRef.current.postMessage(message);
+            });
+        },
+        [ready],
+    );
+
+    const computeGroupingCallback = useCallback(
+        (visibleIds: Uint32Array, groupBy: GroupSpec): Promise<GroupingResult> => {
+            // Check if there's already a pending grouping request
+            if (groupingRequestIdRef.current !== null) {
+                return Promise.resolve({ groups: [] });
+            }
 
-        workerRef.current.postMessage(message);
-      });
-    },
-    [ready]
-  );
-
-  return {
-    ready,
-    applyFilters: applyFiltersCallback,
-    computeGrouping: computeGroupingCallback,
-    sortIds: sortIdsCallback,
-  };
+            return new Promise((resolve) => {
+                // synchronous fallback if worker unavailable
+                if (!workerRef.current || fallbackRef.current) {
+                    try {
+                        const store = storeRef.current;
+                        const indexes = indexesRef.current;
+                        if (store && indexes) {
+                            const result = computeGrouping(
+                                store,
+                                indexes,
+                                visibleIds,
+                                groupBy,
+                            );
+                            resolve(result);
+                            return;
+                        }
+                    } catch (e) {
+                        console.error('[PivotEngine] fallback computeGrouping error:', e);
+                    }
+
+                    resolve({ groups: [] });
+                    return;
+                }
+
+                const requestId = correlatorRef.current.nextId();
+                groupingRequestIdRef.current = requestId;
+                correlatorRef.current.register(
+                    requestId,
+                    resolve as (result: unknown) => void,
+                );
+
+                const message: WorkerInMessage = {
+                    type: 'computeGrouping',
+                    requestId,
+                    visibleIds,
+                    groupBy,
+                };
+
+                workerRef.current.postMessage(message);
+            });
+        },
+        [ready],
+    );
+
+    const sortIdsCallback = useCallback(
+        (visibleIds: Uint32Array, sortBy: string): Promise<Uint32Array> => {
+            return new Promise((resolve) => {
+                // synchronous fallback if worker unavailable
+                if (!workerRef.current || fallbackRef.current) {
+                    try {
+                        const store = storeRef.current;
+                        if (store) {
+                            const result = sortIds(store, visibleIds, sortBy);
+                            resolve(result);
+                            return;
+                        }
+                    } catch (e) {
+                        console.error('[PivotEngine] fallback sortIds error:', e);
+                    }
+
+                    resolve(visibleIds);
+                    return;
+                }
+
+                const requestId = correlatorRef.current.nextId();
+                correlatorRef.current.register(
+                    requestId,
+                    resolve as (result: unknown) => void,
+                );
+
+                const message: WorkerInMessage = {
+                    type: 'sort',
+                    requestId,
+                    ids: visibleIds,
+                    sortBy,
+                };
+
+                workerRef.current.postMessage(message);
+            });
+        },
+        [ready],
+    );
+
+    return {
+        ready,
+        applyFilters: applyFiltersCallback,
+        computeGrouping: computeGroupingCallback,
+        sortIds: sortIdsCallback,
+    };
 }
diff --git a/Source/PivotViewer/hooks/useViewModeScrollHandling.ts b/Source/PivotViewer/hooks/useViewModeScrollHandling.ts
index 05d70004..204f77fd 100644
--- a/Source/PivotViewer/hooks/useViewModeScrollHandling.ts
+++ b/Source/PivotViewer/hooks/useViewModeScrollHandling.ts
@@ -5,11 +5,12 @@ import { useEffect, useRef } from 'react';
 import { calculateCenterScrollPosition } from '../utils/animations';
 import type { Layout } from '../utils/cardPosition';
 import type { ViewMode } from '../components/Toolbar';
-import { BASE_CARD_WIDTH, BASE_CARD_HEIGHT, DETAIL_PANEL_WIDTH } from '../utils/constants';
 import {
-    getCardPositionFromLayout,
-    normalizeIdToLayoutKey,
-} from '../utils/idResolution';
+    BASE_CARD_WIDTH,
+    BASE_CARD_HEIGHT,
+    DETAIL_PANEL_WIDTH,
+} from '../utils/constants';
+import { getCardPositionFromLayout, resolveLayoutItemId } from '../utils/idResolution';
 
 interface UseViewModeScrollHandlingParams<TItem extends object> {
     containerRef: React.RefObject<HTMLDivElement>;
@@ -54,11 +55,14 @@ export function useViewModeScrollHandling<TItem extends object>({
 
         // If we have a selected item, keep it centered in the new layout
         if (selectedItem) {
-            const index = data.indexOf(selectedItem);
-            let itemId: string | number = index !== -1 ? index : resolveId(selectedItem, 0);
-            itemId = normalizeIdToLayoutKey(itemId, layout);
+            const itemId = resolveLayoutItemId(data, selectedItem, layout, resolveId);
 
-            const cardPosition = getCardPositionFromLayout(itemId, layout, BASE_CARD_WIDTH, BASE_CARD_HEIGHT);
+            const cardPosition = getCardPositionFromLayout(
+                itemId,
+                layout,
+                BASE_CARD_WIDTH,
+                BASE_CARD_HEIGHT,
+            );
 
             if (cardPosition) {
                 const detailWidth = viewMode === 'collection' ? 0 : DETAIL_PANEL_WIDTH;
@@ -74,14 +78,25 @@ export function useViewModeScrollHandling<TItem extends object>({
                 container.scrollTo({ left: scrollLeft, top: scrollTop });
                 setPreSelectionState(null);
             }
-            } else if (viewMode === 'grouped') {
-                // Default behavior for grouped view: scroll to bottom to see the cards
-                // which are laid out from bottom-to-top. Use layout.totalHeight which is
-                // the authoritative height in world units, converted back to pixels.
-                const scrollToHeight = layout.totalHeight * zoomLevel - container.clientHeight;
-                const targetScrollTop = Math.max(0, scrollToHeight);
-                container.scrollTop = targetScrollTop;
-                container.scrollLeft = 0;
+        } else if (viewMode === 'grouped') {
+            // Default behavior for grouped view: scroll to bottom to see the cards
+            // which are laid out from bottom-to-top. Use layout.totalHeight which is
+            // the authoritative height in world units, converted back to pixels.
+            const scrollToHeight =
+                layout.totalHeight * zoomLevel - container.clientHeight;
+            const targetScrollTop = Math.max(0, scrollToHeight);
+            container.scrollTop = targetScrollTop;
+            container.scrollLeft = 0;
         }
-    }, [viewMode, grouping, layout, selectedItem, resolveId, zoomLevel, containerRef, data, setPreSelectionState]);
+    }, [
+        viewMode,
+        grouping,
+        layout,
+        selectedItem,
+        resolveId,
+        zoomLevel,
+        containerRef,
+        data,
+        setPreSelectionState,
+    ]);
 }
diff --git a/Source/PivotViewer/utils/idResolution.ts b/Source/PivotViewer/utils/idResolution.ts
index 0f9937d6..8bdcd7d1 100644
--- a/Source/PivotViewer/utils/idResolution.ts
+++ b/Source/PivotViewer/utils/idResolution.ts
@@ -58,6 +58,28 @@ export function normalizeIdToLayoutKey(
     return itemId;
 }
 
+/**
+ * Resolves the layout key for a specific, currently-selected item.
+ *
+ * Internal layout ids are the array index the item occupies in `data` (see `buildStore`'s
+ * `ids[i] = i` and `computeLayout`, which key `positions` by those same indices) - never the
+ * consumer-supplied numeric id from `resolveId`/`getItemId`, which need not match the array
+ * index (e.g. 1-based ids). This mirrors the id-resolution pattern used consistently by
+ * `useDetailPanelClose` and `useViewModeScrollHandling`: prefer `item`'s position in `data`,
+ * and only fall back to `resolveId` when the item can't be located there (e.g. a stale
+ * reference no longer present in `data`).
+ */
+export function resolveLayoutItemId<TItem extends object>(
+    data: TItem[],
+    item: TItem,
+    layout: Layout,
+    resolveId: (item: TItem, index: number) => string | number,
+): string | number {
+    const index = data.indexOf(item);
+    const itemId = index !== -1 ? index : resolveId(item, 0);
+    return normalizeIdToLayoutKey(itemId, layout);
+}
+
 /**
  * Gets the card position from the layout, handling ID type mismatches
  */
diff --git a/Source/PivotViewer/utils/search.ts b/Source/PivotViewer/utils/search.ts
new file mode 100644
index 00000000..c5312577
--- /dev/null
+++ b/Source/PivotViewer/utils/search.ts
@@ -0,0 +1,53 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { PropertyAccessor } from '../types';
+import { getPropertyPath, getValueByPath } from '../types';
+
+/**
+ * Narrows a set of visible item ids (array indices into `data`, matching the engine's internal
+ * id space) down to those matching a free-text search term across `searchFields`.
+ *
+ * This is a post-filter step over already-filtered ids, so it composes identically whether
+ * `visibleIds` came from the worker or the synchronous fallback path. Per the documented
+ * `searchFields` contract, there is no default set of searched fields: when `searchFields` is
+ * omitted or empty, search remains a no-op and `visibleIds` is returned unchanged.
+ */
+export function filterVisibleIdsBySearch<TItem extends object>(
+    data: TItem[],
+    visibleIds: Uint32Array,
+    searchTerm: string,
+    searchFields?: PropertyAccessor<TItem>[],
+): Uint32Array {
+    const term = searchTerm.trim().toLowerCase();
+    if (!term || !searchFields || searchFields.length === 0) {
+        return visibleIds;
+    }
+
+    const matches: number[] = [];
+    for (let i = 0; i < visibleIds.length; i++) {
+        const id = visibleIds[i];
+        const item = data[id];
+        if (item !== undefined && matchesSearchFields(item, term, searchFields)) {
+            matches.push(id);
+        }
+    }
+
+    return new Uint32Array(matches);
+}
+
+function matchesSearchFields<TItem extends object>(
+    item: TItem,
+    term: string,
+    searchFields: PropertyAccessor<TItem>[],
+): boolean {
+    for (const accessor of searchFields) {
+        const propertyPath = getPropertyPath(accessor);
+        const value = getValueByPath(item, propertyPath);
+        if (value !== undefined && String(value).toLowerCase().indexOf(term) !== -1) {
+            return true;
+        }
+    }
+
+    return false;
+}

From 2fc95005f2a84c1e5aa4285201f7f8dcb406fa3f Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 01:02:41 +0200
Subject: [PATCH 119/267] Harden concurrent PivotViewer result handling

Allow overlapping grouping requests to correlate independently, ignore stale filter/group/sort results after dependency changes, keep layout identity index-based, and normalize invalid bucket counts.
---
 Documentation/PivotViewer/index.md            |  2 +
 Source/PivotViewer/PivotViewer.tsx            | 63 +++++++------------
 Source/PivotViewer/engine/store.ts            | 12 ++--
 .../when_bucket_count_is_not_positive.ts      | 31 +++++++++
 .../when_the_item_is_not_found_in_data.ts     | 33 +++++++---
 Source/PivotViewer/hooks/usePivotEngine.ts    | 58 +++++++----------
 Source/PivotViewer/utils/idResolution.ts      | 44 ++++++++++---
 Source/PivotViewer/utils/search.ts            |  8 +--
 8 files changed, 151 insertions(+), 100 deletions(-)
 create mode 100644 Source/PivotViewer/for_engine_computeGrouping/when_bucket_count_is_not_positive.ts

diff --git a/Documentation/PivotViewer/index.md b/Documentation/PivotViewer/index.md
index 0042ace1..168cae3d 100644
--- a/Documentation/PivotViewer/index.md
+++ b/Documentation/PivotViewer/index.md
@@ -80,6 +80,8 @@ The worker is optional infrastructure, not a hard requirement: `usePivotEngine`
 
 `searchFields` drives PivotViewer's free-text search: an array of property-accessor functions (`PropertyAccessor<TItem>[]`, i.e. `(item: TItem) => value`), one per field the search box should match against. A search term matches an item when it matches the value returned by any accessor in the array — there is no default set of searched fields, so search is a no-op until `searchFields` is supplied.
 
+Facet/range filtering and grouping run in the worker when available. Free-text search is then applied on the main thread only to the already-visible item IDs returned by that engine step, with accessor paths resolved once per search pass. This keeps worker/fallback behavior identical while avoiding a second scan of records that filters already excluded.
+
 ## See Also
 
 - [Configuration](configuration.md) - Props and options
diff --git a/Source/PivotViewer/PivotViewer.tsx b/Source/PivotViewer/PivotViewer.tsx
index 0b337af2..3341a1d6 100644
--- a/Source/PivotViewer/PivotViewer.tsx
+++ b/Source/PivotViewer/PivotViewer.tsx
@@ -3,7 +3,7 @@
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type { PivotViewerProps } from './types';
-import type { GroupingResult, GroupSpec } from './engine/types';
+import type { GroupingResult } from './engine/types';
 import { usePivotEngine } from './hooks/usePivotEngine';
 import { computeLayout } from './engine/layout';
 import { useFilterState } from './hooks/useFilterState';
@@ -24,6 +24,7 @@ import type { ViewMode } from './components/Toolbar';
 import { useFieldExtractors } from './hooks/useFieldExtractors';
 import { useCurrentFilters, useCurrentGroupBy } from './hooks/useCurrentFilters';
 import { filterVisibleIdsBySearch } from './utils/search';
+import { resolveInternalItemIndex } from './utils/idResolution';
 import { useCardSelection } from './hooks/useCardSelection';
 import { useDetailPanelClose } from './hooks/useDetailPanelClose';
 import { useScrollSync } from './hooks/useScrollSync';
@@ -175,7 +176,9 @@ export function PivotViewer<TItem extends object>({
     useEffect(() => {
         if (!ready) return;
 
-        engineApplyFilters(currentFilters).then((result) => {
+        let cancelled = false;
+        void engineApplyFilters(currentFilters).then((result) => {
+            if (cancelled) return;
             let ids = result.visibleIds;
 
             // If the engine failed to return any IDs while no filters are active,
@@ -190,27 +193,25 @@ export function PivotViewer<TItem extends object>({
 
             setVisibleIds(filterVisibleIdsBySearch(data, ids, search, searchFields));
         });
+        return () => {
+            cancelled = true;
+        };
     }, [ready, currentFilters, engineApplyFilters, data, search, searchFields]);
 
-    // Compute grouping
-    const lastGroupingRequest = useRef<{
-        viewMode: ViewMode;
-        groupBy: GroupSpec;
-        visibleIds: Uint32Array;
-    } | null>(null);
-
+    // Compute grouping. Every async branch ignores a result after its dependencies change, so an
+    // older worker response can never overwrite a newer filter/search/view selection.
     useEffect(() => {
         if (!ready || visibleIds.length === 0) {
             setGrouping({ groups: [] });
-            lastGroupingRequest.current = null;
             return;
         }
 
+        let cancelled = false;
         if (viewMode === 'collection') {
-            // In collection mode, create a single group with all items
-            // Sort items if activeDimensionKey is set
+            // In collection mode, create a single group with all items.
             if (activeDimensionKey) {
-                sortIds(visibleIds, activeDimensionKey).then((sortedIds) => {
+                void sortIds(visibleIds, activeDimensionKey).then((sortedIds) => {
+                    if (cancelled) return;
                     setGrouping({
                         groups: [
                             {
@@ -236,26 +237,15 @@ export function PivotViewer<TItem extends object>({
                     ],
                 });
             }
-            lastGroupingRequest.current = null;
-            return;
-        }
-
-        // Check if this is the same request as last time to prevent duplicate computations
-        const lastRequest = lastGroupingRequest.current;
-        if (
-            lastRequest &&
-            lastRequest.viewMode === viewMode &&
-            lastRequest.groupBy.field === currentGroupBy.field &&
-            lastRequest.visibleIds === visibleIds
-        ) {
-            return;
+        } else {
+            void computeGrouping(visibleIds, currentGroupBy).then((result) => {
+                if (!cancelled) setGrouping(result);
+            });
         }
 
-        lastGroupingRequest.current = { viewMode, groupBy: currentGroupBy, visibleIds };
-
-        computeGrouping(visibleIds, currentGroupBy).then((result) => {
-            setGrouping(result);
-        });
+        return () => {
+            cancelled = true;
+        };
     }, [
         ready,
         visibleIds,
@@ -298,15 +288,8 @@ export function PivotViewer<TItem extends object>({
     ]);
 
     const resolveId = useCallback(
-        (item: TItem, index: number) => {
-            if (getItemId) {
-                const id = getItemId(item, index);
-                return typeof id === 'number' ? id : index;
-            }
-            const id = (item as Record<string, unknown>)['id'];
-            return typeof id === 'number' ? id : index;
-        },
-        [getItemId],
+        (item: TItem) => resolveInternalItemIndex(data, item, getItemId),
+        [data, getItemId],
     );
 
     // Track animation mode changes
diff --git a/Source/PivotViewer/engine/store.ts b/Source/PivotViewer/engine/store.ts
index 83bcf879..fe68e67d 100644
--- a/Source/PivotViewer/engine/store.ts
+++ b/Source/PivotViewer/engine/store.ts
@@ -400,10 +400,13 @@ function groupByNumeric(
         };
     }
 
+    const bucketCount = Number.isFinite(buckets)
+        ? Math.max(1, Math.floor(buckets))
+        : 10;
     const range = max - min;
-    const bucketSize = range / buckets;
+    const bucketSize = range / bucketCount;
 
-    const bucketLists: number[][] = Array.from({ length: buckets }, () => []);
+    const bucketLists: number[][] = Array.from({ length: bucketCount }, () => []);
 
     for (let i = 0; i < visibleIds.length; i++) {
         const id = visibleIds[i];
@@ -411,14 +414,15 @@ function groupByNumeric(
         if (isNaN(value)) continue;
 
         let bucketIndex = Math.floor((value - min) / bucketSize);
-        if (bucketIndex >= buckets) bucketIndex = buckets - 1;
+        if (bucketIndex >= bucketCount) bucketIndex = bucketCount - 1;
+        if (bucketIndex < 0) bucketIndex = 0;
 
         bucketLists[bucketIndex].push(id);
     }
 
     const groups: GroupResult[] = [];
 
-    for (let i = 0; i < buckets; i++) {
+    for (let i = 0; i < bucketCount; i++) {
         const list = bucketLists[i];
         if (list.length === 0) continue;
 
diff --git a/Source/PivotViewer/for_engine_computeGrouping/when_bucket_count_is_not_positive.ts b/Source/PivotViewer/for_engine_computeGrouping/when_bucket_count_is_not_positive.ts
new file mode 100644
index 00000000..80d210c9
--- /dev/null
+++ b/Source/PivotViewer/for_engine_computeGrouping/when_bucket_count_is_not_positive.ts
@@ -0,0 +1,31 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { buildIndexes, buildStore, computeGrouping } from '../engine/store';
+
+interface TestItem {
+    price: number;
+}
+
+describe('when the numeric bucket count is not positive', () => {
+    const data: TestItem[] = [{ price: 10 }, { price: 20 }, { price: 30 }];
+    const store = buildStore(
+        data,
+        new Map<string, (item: TestItem) => number>([
+            ['price', (item) => item.price],
+        ]),
+    );
+    const indexes = buildIndexes(store, ['price']);
+    const result = computeGrouping(store, indexes, store.ids, {
+        field: 'price',
+        buckets: 0,
+    });
+
+    it('should normalize to one bucket instead of dividing by zero', () => {
+        result.groups.should.have.lengthOf(1);
+    });
+
+    it('should keep every visible item', () => {
+        result.groups[0].ids.should.deep.equal(new Uint32Array([0, 1, 2]));
+    });
+});
diff --git a/Source/PivotViewer/for_resolveLayoutItemId/when_the_item_is_not_found_in_data.ts b/Source/PivotViewer/for_resolveLayoutItemId/when_the_item_is_not_found_in_data.ts
index 327de446..78416f5c 100644
--- a/Source/PivotViewer/for_resolveLayoutItemId/when_the_item_is_not_found_in_data.ts
+++ b/Source/PivotViewer/for_resolveLayoutItemId/when_the_item_is_not_found_in_data.ts
@@ -1,25 +1,40 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { resolveLayoutItemId } from '../utils/idResolution';
+import {
+    resolveInternalItemIndex,
+    resolveLayoutItemId,
+} from '../utils/idResolution';
 import type { LayoutResult } from '../engine/types';
 
 interface TestItem {
     id: number;
 }
 
-describe('when the item is not present in data (e.g. a stale reference)', () => {
+describe('when the item is not present in data by reference', () => {
     const data: TestItem[] = [{ id: 1 }, { id: 2 }];
-    const staleItem: TestItem = { id: 99 };
+    const staleEquivalent: TestItem = { id: 2 };
+    const missingItem: TestItem = { id: 99 };
     const layout: LayoutResult = {
-        positions: new Map([[99, { x: 0, y: 0, groupIndex: 0 }]]),
-        totalWidth: 100,
+        positions: new Map([
+            [0, { x: 0, y: 0, groupIndex: 0 }],
+            [1, { x: 100, y: 0, groupIndex: 0 }],
+        ]),
+        totalWidth: 200,
         totalHeight: 100,
     };
-    const resolveId = (item: TestItem) => item.id;
+    const getItemId = (item: TestItem) => item.id;
+    const resolveId = (item: TestItem) =>
+        resolveInternalItemIndex(data, item, getItemId);
 
-    it('should fall back to resolveId when data.indexOf returns -1', () => {
-        const result = resolveLayoutItemId(data, staleItem, layout, resolveId);
-        result.should.equal(99);
+    it('should relocate an equivalent item by consumer identity and return its array index', () => {
+        const result = resolveLayoutItemId(data, staleEquivalent, layout, resolveId);
+        result.should.equal(1);
+    });
+
+    it('should never return an unmatched raw consumer id as a layout key', () => {
+        const result = resolveLayoutItemId(data, missingItem, layout, resolveId);
+        result.should.equal(-1);
+        layout.positions.has(result).should.be.false;
     });
 });
diff --git a/Source/PivotViewer/hooks/usePivotEngine.ts b/Source/PivotViewer/hooks/usePivotEngine.ts
index d7cc68b4..039b86e5 100644
--- a/Source/PivotViewer/hooks/usePivotEngine.ts
+++ b/Source/PivotViewer/hooks/usePivotEngine.ts
@@ -49,13 +49,12 @@ export function usePivotEngine<TItem extends object>({
     const indexesRef = useRef<PivotIndexes | null>(null);
     const fallbackRef = useRef(false);
     const storeRef = useRef<PivotStore | null>(null);
-    // Every filter/grouping/sort request/response pair is correlated by a unique request id
-    // (see createRequestCorrelator) so overlapping or out-of-order worker responses resolve
-    // their own promise. groupingRequestIdRef separately tracks the in-flight grouping request,
-    // preserving the intentional single-flight de-dup below (an overlapping grouping call
-    // resolves immediately with an empty result instead of queuing behind the worker).
-    const correlatorRef = useRef(createRequestCorrelator<unknown>());
-    const groupingRequestIdRef = useRef<number | null>(null);
+    // Each operation owns a typed request correlator. Overlapping requests can share numeric ids
+    // across operation types because worker responses are dispatched by type before correlation;
+    // within one operation, every response resolves only its own promise even out of order.
+    const filterCorrelatorRef = useRef(createRequestCorrelator<FilterResult>());
+    const groupingCorrelatorRef = useRef(createRequestCorrelator<GroupingResult>());
+    const sortCorrelatorRef = useRef(createRequestCorrelator<Uint32Array>());
 
     useEffect(() => {
         if (typeof window === 'undefined' || typeof Worker === 'undefined') {
@@ -107,20 +106,26 @@ export function usePivotEngine<TItem extends object>({
                         break;
 
                     case 'filterResult': {
-                        correlatorRef.current.resolve(message.requestId, message.result);
+                        filterCorrelatorRef.current.resolve(
+                            message.requestId,
+                            message.result,
+                        );
                         break;
                     }
 
                     case 'groupingResult': {
-                        correlatorRef.current.resolve(message.requestId, message.result);
-                        if (groupingRequestIdRef.current === message.requestId) {
-                            groupingRequestIdRef.current = null;
-                        }
+                        groupingCorrelatorRef.current.resolve(
+                            message.requestId,
+                            message.result,
+                        );
                         break;
                     }
 
                     case 'sortResult': {
-                        correlatorRef.current.resolve(message.requestId, message.result);
+                        sortCorrelatorRef.current.resolve(
+                            message.requestId,
+                            message.result,
+                        );
                         break;
                     }
                 }
@@ -208,11 +213,8 @@ export function usePivotEngine<TItem extends object>({
                     return;
                 }
 
-                const requestId = correlatorRef.current.nextId();
-                correlatorRef.current.register(
-                    requestId,
-                    resolve as (result: unknown) => void,
-                );
+                const requestId = filterCorrelatorRef.current.nextId();
+                filterCorrelatorRef.current.register(requestId, resolve);
 
                 const message: WorkerInMessage = {
                     type: 'applyFilters',
@@ -228,11 +230,6 @@ export function usePivotEngine<TItem extends object>({
 
     const computeGroupingCallback = useCallback(
         (visibleIds: Uint32Array, groupBy: GroupSpec): Promise<GroupingResult> => {
-            // Check if there's already a pending grouping request
-            if (groupingRequestIdRef.current !== null) {
-                return Promise.resolve({ groups: [] });
-            }
-
             return new Promise((resolve) => {
                 // synchronous fallback if worker unavailable
                 if (!workerRef.current || fallbackRef.current) {
@@ -257,12 +254,8 @@ export function usePivotEngine<TItem extends object>({
                     return;
                 }
 
-                const requestId = correlatorRef.current.nextId();
-                groupingRequestIdRef.current = requestId;
-                correlatorRef.current.register(
-                    requestId,
-                    resolve as (result: unknown) => void,
-                );
+                const requestId = groupingCorrelatorRef.current.nextId();
+                groupingCorrelatorRef.current.register(requestId, resolve);
 
                 const message: WorkerInMessage = {
                     type: 'computeGrouping',
@@ -297,11 +290,8 @@ export function usePivotEngine<TItem extends object>({
                     return;
                 }
 
-                const requestId = correlatorRef.current.nextId();
-                correlatorRef.current.register(
-                    requestId,
-                    resolve as (result: unknown) => void,
-                );
+                const requestId = sortCorrelatorRef.current.nextId();
+                sortCorrelatorRef.current.register(requestId, resolve);
 
                 const message: WorkerInMessage = {
                     type: 'sort',
diff --git a/Source/PivotViewer/utils/idResolution.ts b/Source/PivotViewer/utils/idResolution.ts
index 8bdcd7d1..fa641471 100644
--- a/Source/PivotViewer/utils/idResolution.ts
+++ b/Source/PivotViewer/utils/idResolution.ts
@@ -59,15 +59,41 @@ export function normalizeIdToLayoutKey(
 }
 
 /**
- * Resolves the layout key for a specific, currently-selected item.
- *
- * Internal layout ids are the array index the item occupies in `data` (see `buildStore`'s
- * `ids[i] = i` and `computeLayout`, which key `positions` by those same indices) - never the
- * consumer-supplied numeric id from `resolveId`/`getItemId`, which need not match the array
- * index (e.g. 1-based ids). This mirrors the id-resolution pattern used consistently by
- * `useDetailPanelClose` and `useViewModeScrollHandling`: prefer `item`'s position in `data`,
- * and only fall back to `resolveId` when the item can't be located there (e.g. a stale
- * reference no longer present in `data`).
+ * Resolves an item to the engine's canonical array-index identity. A stale object reference is
+ * relocated by its consumer identity when a stable `getItemId` is available; raw consumer ids are
+ * never returned as layout keys.
+ */
+export function resolveInternalItemIndex<TItem extends object>(
+    data: TItem[],
+    item: TItem,
+    getItemId?: (item: TItem, index: number) => string | number,
+): number {
+    const referenceIndex = data.indexOf(item);
+    if (referenceIndex !== -1) return referenceIndex;
+
+    const implicitId = (item as Record<string, unknown>)['id'];
+    const identity = getItemId
+        ? getItemId(item, 0)
+        : typeof implicitId === 'string' || typeof implicitId === 'number'
+          ? implicitId
+          : undefined;
+    if (identity === undefined) return -1;
+
+    return data.findIndex((candidate, index) => {
+        const candidateImplicitId = (candidate as Record<string, unknown>)['id'];
+        const candidateIdentity = getItemId
+            ? getItemId(candidate, index)
+            : typeof candidateImplicitId === 'string' ||
+                typeof candidateImplicitId === 'number'
+              ? candidateImplicitId
+              : undefined;
+        return Object.is(candidateIdentity, identity);
+    });
+}
+
+/**
+ * Resolves the layout key for a specific item. `resolveId` must return the internal array index (or
+ * `-1` when the item cannot be relocated), never a consumer-supplied id.
  */
 export function resolveLayoutItemId<TItem extends object>(
     data: TItem[],
diff --git a/Source/PivotViewer/utils/search.ts b/Source/PivotViewer/utils/search.ts
index c5312577..30597c09 100644
--- a/Source/PivotViewer/utils/search.ts
+++ b/Source/PivotViewer/utils/search.ts
@@ -24,11 +24,12 @@ export function filterVisibleIdsBySearch<TItem extends object>(
         return visibleIds;
     }
 
+    const propertyPaths = searchFields.map((accessor) => getPropertyPath(accessor));
     const matches: number[] = [];
     for (let i = 0; i < visibleIds.length; i++) {
         const id = visibleIds[i];
         const item = data[id];
-        if (item !== undefined && matchesSearchFields(item, term, searchFields)) {
+        if (item !== undefined && matchesSearchFields(item, term, propertyPaths)) {
             matches.push(id);
         }
     }
@@ -39,10 +40,9 @@ export function filterVisibleIdsBySearch<TItem extends object>(
 function matchesSearchFields<TItem extends object>(
     item: TItem,
     term: string,
-    searchFields: PropertyAccessor<TItem>[],
+    propertyPaths: string[],
 ): boolean {
-    for (const accessor of searchFields) {
-        const propertyPath = getPropertyPath(accessor);
+    for (const propertyPath of propertyPaths) {
         const value = getValueByPath(item, propertyPath);
         if (value !== undefined && String(value).toLowerCase().indexOf(term) !== -1) {
             return true;

From e3821651d4515c18c80ddbdebbc290044bd618e8 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 01:02:55 +0200
Subject: [PATCH 120/267] Format final documentation verification sources

---
 Documentation/SchemaEditor/editing.md     | 13 +++---
 Documentation/SchemaEditor/index.md       | 11 ++---
 Source/scripts/verify-api-docs.mjs        | 53 +++++++++++++++++------
 Source/scripts/verify-package-archive.mjs |  4 +-
 4 files changed, 48 insertions(+), 33 deletions(-)

diff --git a/Documentation/SchemaEditor/editing.md b/Documentation/SchemaEditor/editing.md
index ae849d17..750ee99e 100644
--- a/Documentation/SchemaEditor/editing.md
+++ b/Documentation/SchemaEditor/editing.md
@@ -78,12 +78,12 @@ const schema = {
         address: {
             type: 'object',
             properties: {
-                city: { type: 'string' }
+                city: { type: 'string' },
             },
-            required: ['city']
-        }
+            required: ['city'],
+        },
     },
-    required: ['name']
+    required: ['name'],
 };
 ```
 
@@ -112,10 +112,7 @@ Do not infer batch or history behavior from the underlying table component; Sche
 Set `canEdit={false}` to keep the schema browsable without exposing editing actions:
 
 ```tsx
-<SchemaEditor
-    schema={schema}
-    canEdit={false}
-/>
+<SchemaEditor schema={schema} canEdit={false} />
 ```
 
 Nested object/array navigation and descriptions remain available for review. Add, delete, type, format, Save, and Cancel actions are unavailable.
diff --git a/Documentation/SchemaEditor/index.md b/Documentation/SchemaEditor/index.md
index 4f9e2dd2..9db59001 100644
--- a/Documentation/SchemaEditor/index.md
+++ b/Documentation/SchemaEditor/index.md
@@ -31,17 +31,12 @@ export function MySchemaEditor() {
         type: 'object',
         properties: {
             name: { type: 'string' },
-            age: { type: 'number' }
+            age: { type: 'number' },
         },
-        required: ['name']
+        required: ['name'],
     });
 
-    return (
-        <SchemaEditor
-            schema={schema}
-            onChange={setSchema}
-        />
-    );
+    return <SchemaEditor schema={schema} onChange={setSchema} />;
 }
 ```
 
diff --git a/Source/scripts/verify-api-docs.mjs b/Source/scripts/verify-api-docs.mjs
index f433b091..908aaa68 100644
--- a/Source/scripts/verify-api-docs.mjs
+++ b/Source/scripts/verify-api-docs.mjs
@@ -44,7 +44,14 @@
  * is missing a TSDoc comment.
  */
 
-import { mkdtempSync, rmSync, writeFileSync, mkdirSync, existsSync, readFileSync } from 'node:fs';
+import {
+    mkdtempSync,
+    rmSync,
+    writeFileSync,
+    mkdirSync,
+    existsSync,
+    readFileSync,
+} from 'node:fs';
 import { tmpdir } from 'node:os';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
@@ -163,7 +170,9 @@ const DECLARATION_KINDS = new Set([
  * the documentation for that member, even with no separate summary line above it).
  */
 function hasDocComment(checker, symbol) {
-    const summary = ts.displayPartsToString(symbol.getDocumentationComment(checker)).trim();
+    const summary = ts
+        .displayPartsToString(symbol.getDocumentationComment(checker))
+        .trim();
     if (summary.length > 0) return true;
     return symbol
         .getJsDocTags(checker)
@@ -269,9 +278,7 @@ function membersRequiringDocs(checker, target) {
     if ((target.flags & ts.SymbolFlags.Class) !== 0) {
         return ownPublicClassMembersOf(checker, target);
     }
-    if (
-        (target.flags & (ts.SymbolFlags.RegularEnum | ts.SymbolFlags.ConstEnum)) !== 0
-    ) {
+    if ((target.flags & (ts.SymbolFlags.RegularEnum | ts.SymbolFlags.ConstEnum)) !== 0) {
         return ownEnumMembersOf(checker, target);
     }
     return [];
@@ -340,7 +347,10 @@ export function findMissingDocs(root, fileToSubpaths) {
     /** @type {Map<ts.Symbol, { namePaths: Set<string>, subpaths: Set<string> }>} */
     const reachable = new Map();
     const record = (target, namePath, subpaths) => {
-        const entry = reachable.get(target) ?? { namePaths: new Set(), subpaths: new Set() };
+        const entry = reachable.get(target) ?? {
+            namePaths: new Set(),
+            subpaths: new Set(),
+        };
         entry.namePaths.add(namePath);
         for (const subpath of subpaths) entry.subpaths.add(subpath);
         reachable.set(target, entry);
@@ -529,9 +539,18 @@ export enum Mode {
         ]) {
             assert(symbols.includes(expected), `expected ${expected} to be flagged`);
         }
-        assert(!symbols.includes('Worker.hidden'), 'private class members must be ignored');
-        assert(!symbols.includes('Worker.hiddenId'), 'private parameter properties must be ignored');
-        assert(!symbols.some((symbol) => symbol.includes('constructor')), 'constructors must be ignored');
+        assert(
+            !symbols.includes('Worker.hidden'),
+            'private class members must be ignored',
+        );
+        assert(
+            !symbols.includes('Worker.hiddenId'),
+            'private parameter properties must be ignored',
+        );
+        assert(
+            !symbols.some((symbol) => symbol.includes('constructor')),
+            'constructors must be ignored',
+        );
     } finally {
         rmSync(dir, { recursive: true, force: true });
     }
@@ -590,10 +609,14 @@ function selfTestDeclarationEmitRetainsDocs() {
     const configFile = ts.readConfigFile(configPath, ts.sys.readFile);
     assert(!configFile.error, 'Source/tsconfig.json must parse');
     const parsed = ts.parseJsonConfigFileContent(configFile.config, ts.sys, packageDir);
-    assert(parsed.options.removeComments !== true, 'declaration emit must retain TSDoc comments');
+    assert(
+        parsed.options.removeComments !== true,
+        'declaration emit must retain TSDoc comments',
+    );
 
     const dir = makeFixture({
-        'Widget.ts': '/** Public widget contract. */\nexport interface Widget {\n    /** Visible label. */\n    label: string;\n}\n',
+        'Widget.ts':
+            '/** Public widget contract. */\nexport interface Widget {\n    /** Visible label. */\n    label: string;\n}\n',
     });
     try {
         const source = path.join(dir, 'Widget.ts');
@@ -662,8 +685,7 @@ function selfTestUnreachableLocalExportIsIgnored() {
 function selfTestNamespaceReExportIsFollowedAndDeduped() {
     const dir = makeFixture({
         'tsconfig.json': FIXTURE_TSCONFIG,
-        'index.ts':
-            "import * as Widget from './Widget';\nexport { Widget };\n",
+        'index.ts': "import * as Widget from './Widget';\nexport { Widget };\n",
         'Widget/index.ts': 'export interface WidgetProps {\n    label: string;\n}\n',
     });
     try {
@@ -699,7 +721,10 @@ function selfTestNamespaceReExportIsFollowedAndDeduped() {
 const SELF_TESTS = [
     ['flags an undocumented interface and member', selfTestUndocumentedIsFlagged],
     ['passes a fully documented barrel', selfTestDocumentedPasses],
-    ['flags undocumented public class and enum members', selfTestClassAndEnumMembersAreFlagged],
+    [
+        'flags undocumented public class and enum members',
+        selfTestClassAndEnumMembersAreFlagged,
+    ],
     ['passes documented class and enum members', selfTestDocumentedClassAndEnumPasses],
     ['preserves TSDoc in declaration emit', selfTestDeclarationEmitRetainsDocs],
     ['ignores an unreachable local export', selfTestUnreachableLocalExportIsIgnored],
diff --git a/Source/scripts/verify-package-archive.mjs b/Source/scripts/verify-package-archive.mjs
index f36fc86c..3d493e52 100644
--- a/Source/scripts/verify-package-archive.mjs
+++ b/Source/scripts/verify-package-archive.mjs
@@ -90,9 +90,7 @@ try {
     process.exit(1);
 }
 
-const declarationWithDocs = readPackedText(
-    'package/dist/esm/Common/ErrorBoundary.d.ts',
-);
+const declarationWithDocs = readPackedText('package/dist/esm/Common/ErrorBoundary.d.ts');
 const declarationWithDeprecations = readPackedText(
     'package/dist/esm/Common/DatePickerInput.d.ts',
 );

From f883247151140d9dcd1ee0b03a8c80838787a29c Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 01:10:41 +0200
Subject: [PATCH 121/267] Harden Pivot property-path and edge-case coverage

Reject prototype-chain traversal in searchable property paths, cover stale item relocation and invalid bucket counts, and commit formatter-normalized Pivot regressions.
---
 Source/PivotViewer/engine/store.ts            |  4 +---
 .../when_bucket_count_is_not_positive.ts      |  4 +---
 ...when_path_targets_an_inherited_property.ts | 19 +++++++++++++++++++
 .../when_the_item_is_not_found_in_data.ts     |  8 ++------
 Source/PivotViewer/types.ts                   |  7 +++++--
 5 files changed, 28 insertions(+), 14 deletions(-)
 create mode 100644 Source/PivotViewer/for_getValueByPath/when_path_targets_an_inherited_property.ts

diff --git a/Source/PivotViewer/engine/store.ts b/Source/PivotViewer/engine/store.ts
index fe68e67d..25f78510 100644
--- a/Source/PivotViewer/engine/store.ts
+++ b/Source/PivotViewer/engine/store.ts
@@ -400,9 +400,7 @@ function groupByNumeric(
         };
     }
 
-    const bucketCount = Number.isFinite(buckets)
-        ? Math.max(1, Math.floor(buckets))
-        : 10;
+    const bucketCount = Number.isFinite(buckets) ? Math.max(1, Math.floor(buckets)) : 10;
     const range = max - min;
     const bucketSize = range / bucketCount;
 
diff --git a/Source/PivotViewer/for_engine_computeGrouping/when_bucket_count_is_not_positive.ts b/Source/PivotViewer/for_engine_computeGrouping/when_bucket_count_is_not_positive.ts
index 80d210c9..1d55b0ba 100644
--- a/Source/PivotViewer/for_engine_computeGrouping/when_bucket_count_is_not_positive.ts
+++ b/Source/PivotViewer/for_engine_computeGrouping/when_bucket_count_is_not_positive.ts
@@ -11,9 +11,7 @@ describe('when the numeric bucket count is not positive', () => {
     const data: TestItem[] = [{ price: 10 }, { price: 20 }, { price: 30 }];
     const store = buildStore(
         data,
-        new Map<string, (item: TestItem) => number>([
-            ['price', (item) => item.price],
-        ]),
+        new Map<string, (item: TestItem) => number>([['price', (item) => item.price]]),
     );
     const indexes = buildIndexes(store, ['price']);
     const result = computeGrouping(store, indexes, store.ids, {
diff --git a/Source/PivotViewer/for_getValueByPath/when_path_targets_an_inherited_property.ts b/Source/PivotViewer/for_getValueByPath/when_path_targets_an_inherited_property.ts
new file mode 100644
index 00000000..cf7d0be5
--- /dev/null
+++ b/Source/PivotViewer/for_getValueByPath/when_path_targets_an_inherited_property.ts
@@ -0,0 +1,19 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { getValueByPath } from '../types';
+
+describe('when getting a value through the prototype chain', () => {
+    const item = Object.create({ inherited: 'not searchable' }) as Record<
+        string,
+        unknown
+    >;
+
+    it('should not return an inherited property', () => {
+        (getValueByPath(item, 'inherited') === undefined).should.be.true;
+    });
+
+    it('should not traverse __proto__', () => {
+        (getValueByPath(item, '__proto__.inherited') === undefined).should.be.true;
+    });
+});
diff --git a/Source/PivotViewer/for_resolveLayoutItemId/when_the_item_is_not_found_in_data.ts b/Source/PivotViewer/for_resolveLayoutItemId/when_the_item_is_not_found_in_data.ts
index 78416f5c..3e1fe360 100644
--- a/Source/PivotViewer/for_resolveLayoutItemId/when_the_item_is_not_found_in_data.ts
+++ b/Source/PivotViewer/for_resolveLayoutItemId/when_the_item_is_not_found_in_data.ts
@@ -1,10 +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 {
-    resolveInternalItemIndex,
-    resolveLayoutItemId,
-} from '../utils/idResolution';
+import { resolveInternalItemIndex, resolveLayoutItemId } from '../utils/idResolution';
 import type { LayoutResult } from '../engine/types';
 
 interface TestItem {
@@ -24,8 +21,7 @@ describe('when the item is not present in data by reference', () => {
         totalHeight: 100,
     };
     const getItemId = (item: TestItem) => item.id;
-    const resolveId = (item: TestItem) =>
-        resolveInternalItemIndex(data, item, getItemId);
+    const resolveId = (item: TestItem) => resolveInternalItemIndex(data, item, getItemId);
 
     it('should relocate an equivalent item by consumer identity and return its array index', () => {
         const result = resolveLayoutItemId(data, staleEquivalent, layout, resolveId);
diff --git a/Source/PivotViewer/types.ts b/Source/PivotViewer/types.ts
index e07cd34a..a65c0728 100644
--- a/Source/PivotViewer/types.ts
+++ b/Source/PivotViewer/types.ts
@@ -39,8 +39,11 @@ export function getValueByPath<TItem>(item: TItem, path: string): PivotPropertyV
         if (value === null || value === undefined || typeof value !== 'object') {
             return undefined;
         }
-        // SAFETY: Property paths are consumer-provided runtime keys over the current object.
-        value = (value as Record<string, PivotPropertyValue>)[part];
+        const record = value as Record<string, PivotPropertyValue>;
+        if (!Object.hasOwn(record, part)) return undefined;
+        // SAFETY: The own-property guard excludes prototype-chain traversal; the remaining key is
+        // read from the current object without mutation.
+        value = record[part];
     }
     return value;
 }

From e47dfe06cc4d735a6b891a391f8956f3fe9a7ab3 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 01:16:17 +0200
Subject: [PATCH 122/267] Reject reserved prototype keys in SchemaEditor

---
 Documentation/SchemaEditor/validation.md           |  3 ++-
 .../when_name_is_a_reserved_prototype_key.ts       | 14 ++++++++++++++
 Source/SchemaEditor/schemaHelpers.ts               |  6 ++++++
 3 files changed, 22 insertions(+), 1 deletion(-)
 create mode 100644 Source/SchemaEditor/for_validatePropertyName/when_name_is_a_reserved_prototype_key.ts

diff --git a/Documentation/SchemaEditor/validation.md b/Documentation/SchemaEditor/validation.md
index 8320035b..5623d05b 100644
--- a/Documentation/SchemaEditor/validation.md
+++ b/Documentation/SchemaEditor/validation.md
@@ -23,7 +23,8 @@ Property names must:
 1. Not be empty or whitespace-only.
 2. Start with a letter or underscore.
 3. Contain only letters, numbers, and underscores.
-4. Be unique among siblings in the current object schema.
+4. Not be the reserved prototype keys `__proto__`, `constructor`, or `prototype`.
+5. Be unique among siblings in the current object schema.
 
 ```typescript
 // Valid sibling names
diff --git a/Source/SchemaEditor/for_validatePropertyName/when_name_is_a_reserved_prototype_key.ts b/Source/SchemaEditor/for_validatePropertyName/when_name_is_a_reserved_prototype_key.ts
new file mode 100644
index 00000000..488448e0
--- /dev/null
+++ b/Source/SchemaEditor/for_validatePropertyName/when_name_is_a_reserved_prototype_key.ts
@@ -0,0 +1,14 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { validatePropertyName } from '../schemaHelpers';
+
+describe('when validating a reserved prototype key', () => {
+    for (const name of ['__proto__', 'constructor', 'prototype']) {
+        it(`should reject ${name}`, () => {
+            validatePropertyName(name, 'prop-1', []).should.equal(
+                'Property name cannot be a reserved prototype key',
+            );
+        });
+    }
+});
diff --git a/Source/SchemaEditor/schemaHelpers.ts b/Source/SchemaEditor/schemaHelpers.ts
index a7c17694..e430a387 100644
--- a/Source/SchemaEditor/schemaHelpers.ts
+++ b/Source/SchemaEditor/schemaHelpers.ts
@@ -3,6 +3,8 @@
 
 import { JsonSchemaProperty, NavigationItem } from '../types/JsonSchema';
 
+const reservedPrototypeKeys = new Set(['__proto__', 'constructor', 'prototype']);
+
 /**
  * Validates a property name, returning an error string or undefined if valid.
  */
@@ -11,6 +13,10 @@ export function validatePropertyName(name: string, propertyId: string, allProper
         return 'Property name cannot be empty';
     }
 
+    if (reservedPrototypeKeys.has(name)) {
+        return 'Property name cannot be a reserved prototype key';
+    }
+
     const validIdentifierPattern = /^[a-zA-Z_][a-zA-Z0-9_]*$/;
     if (!validIdentifierPattern.test(name)) {
         return 'Property name must start with a letter or underscore and contain only letters, numbers, and underscores';

From d3083270d6b424928336644a66c9848794f3c903 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 01:16:24 +0200
Subject: [PATCH 123/267] Restrict table and pivot property paths to own data

Prevent configured field paths from traversing prototypes in DataTable and PivotViewer while preserving nested own-property access.
---
 Source/DataTables/DataTableCore.tsx           |  7 +-
 .../when_search_field_is_inherited.tsx        | 69 +++++++++++++++++++
 2 files changed, 73 insertions(+), 3 deletions(-)
 create mode 100644 Source/DataTables/for_DataTableCore/when_search_field_is_inherited.tsx

diff --git a/Source/DataTables/DataTableCore.tsx b/Source/DataTables/DataTableCore.tsx
index ff5567d9..6186670e 100644
--- a/Source/DataTables/DataTableCore.tsx
+++ b/Source/DataTables/DataTableCore.tsx
@@ -138,9 +138,10 @@ const valueAtPath = (
     if (!path) return undefined;
     let current: CellValue = row;
     for (const segment of path.split('.')) {
-        if (current === null || typeof current !== 'object' || !(segment in current))
-            return undefined;
-        current = asCellValue((current as Record<string, unknown>)[segment]);
+        if (current === null || typeof current !== 'object') return undefined;
+        const record = current as Record<string, unknown>;
+        if (!Object.hasOwn(record, segment)) return undefined;
+        current = asCellValue(record[segment]);
     }
     return current;
 };
diff --git a/Source/DataTables/for_DataTableCore/when_search_field_is_inherited.tsx b/Source/DataTables/for_DataTableCore/when_search_field_is_inherited.tsx
new file mode 100644
index 00000000..f05aff10
--- /dev/null
+++ b/Source/DataTables/for_DataTableCore/when_search_field_is_inherited.tsx
@@ -0,0 +1,69 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { expect } from 'chai';
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, it } from 'vitest';
+import { Column } from '../Column';
+import { DataTableCore } from '../DataTableCore';
+
+interface Row {
+    id: number;
+    name: string;
+}
+
+describe('when a configured search field is inherited', () => {
+    let container: HTMLDivElement;
+    let root: Root;
+
+    beforeEach(async () => {
+        (
+            globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
+        ).IS_REACT_ACT_ENVIRONMENT = true;
+        const row = Object.assign(Object.create({ secret: 'match' }), {
+            id: 1,
+            name: 'Visible value',
+        }) as Row;
+        container = document.createElement('div');
+        document.body.append(container);
+        root = createRoot(container);
+        await act(async () => {
+            root.render(
+                <DataTableCore<Row>
+                    data={[row]}
+                    emptyMessage='No rows'
+                    globalFilterFields={['secret']}
+                >
+                    <Column<Row> field='name' header='Name' />
+                </DataTableCore>,
+            );
+        });
+
+        const search = container.querySelector<HTMLInputElement>(
+            '[data-cratis-part="search-input"]',
+        )!;
+        await act(async () => {
+            const setValue = Object.getOwnPropertyDescriptor(
+                HTMLInputElement.prototype,
+                'value',
+            )!.set!;
+            setValue.call(search, 'match');
+            search.dispatchEvent(new Event('input', { bubbles: true }));
+        });
+    });
+
+    afterEach(async () => {
+        await act(async () => root.unmount());
+        container.remove();
+    });
+
+    it('should not expose prototype-chain data to search', () => {
+        expect(container.querySelectorAll('[data-cratis-part="row"]')).to.have.length(
+            0,
+        );
+        expect(container.textContent).to.contain('No rows');
+    });
+});

From 2e20f1f59dbbb5eb354c97c6f32437b6499aabf3 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 01:20:04 +0200
Subject: [PATCH 124/267] Format final property-path hardening

---
 .../when_search_field_is_inherited.tsx          |  4 +---
 Source/SchemaEditor/schemaHelpers.ts            | 17 +++++++++++++----
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/Source/DataTables/for_DataTableCore/when_search_field_is_inherited.tsx b/Source/DataTables/for_DataTableCore/when_search_field_is_inherited.tsx
index f05aff10..dba5fdf3 100644
--- a/Source/DataTables/for_DataTableCore/when_search_field_is_inherited.tsx
+++ b/Source/DataTables/for_DataTableCore/when_search_field_is_inherited.tsx
@@ -61,9 +61,7 @@ describe('when a configured search field is inherited', () => {
     });
 
     it('should not expose prototype-chain data to search', () => {
-        expect(container.querySelectorAll('[data-cratis-part="row"]')).to.have.length(
-            0,
-        );
+        expect(container.querySelectorAll('[data-cratis-part="row"]')).to.have.length(0);
         expect(container.textContent).to.contain('No rows');
     });
 });
diff --git a/Source/SchemaEditor/schemaHelpers.ts b/Source/SchemaEditor/schemaHelpers.ts
index e430a387..888326e6 100644
--- a/Source/SchemaEditor/schemaHelpers.ts
+++ b/Source/SchemaEditor/schemaHelpers.ts
@@ -1,14 +1,18 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { JsonSchemaProperty, NavigationItem } from '../types/JsonSchema';
+import type { JsonSchemaProperty, NavigationItem } from '../types/JsonSchema';
 
 const reservedPrototypeKeys = new Set(['__proto__', 'constructor', 'prototype']);
 
 /**
  * Validates a property name, returning an error string or undefined if valid.
  */
-export function validatePropertyName(name: string, propertyId: string, allProperties: JsonSchemaProperty[]): string | undefined {
+export function validatePropertyName(
+    name: string,
+    propertyId: string,
+    allProperties: JsonSchemaProperty[],
+): string | undefined {
     if (!name || name.trim() === '') {
         return 'Property name cannot be empty';
     }
@@ -22,7 +26,9 @@ export function validatePropertyName(name: string, propertyId: string, allProper
         return 'Property name must start with a letter or underscore and contain only letters, numbers, and underscores';
     }
 
-    const duplicates = allProperties.filter(p => p.name === name && p.id !== propertyId);
+    const duplicates = allProperties.filter(
+        (p) => p.name === name && p.id !== propertyId,
+    );
     if (duplicates.length > 0) {
         return 'Property name must be unique';
     }
@@ -33,7 +39,10 @@ export function validatePropertyName(name: string, propertyId: string, allProper
 /**
  * Builds the list of breadcrumb navigation items from a path, using the event type name as the root.
  */
-export function buildBreadcrumbItems(eventTypeName: string, currentPath: string[]): NavigationItem[] {
+export function buildBreadcrumbItems(
+    eventTypeName: string,
+    currentPath: string[],
+): NavigationItem[] {
     const items: NavigationItem[] = [{ name: eventTypeName, path: [] }];
 
     for (let i = 0; i < currentPath.length; i++) {

From a96a5a8b6be32452b5130b32e84bcfaf518f4ca6 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 10:23:44 +0200
Subject: [PATCH 125/267] pi-agent: Finish Chat main reconciliation

---
 Documentation/Chat/index.md                   |  21 ++-
 Documentation/Chat/message-actions.md         |   8 +-
 Source/Chat/ChatConversation.stories.tsx      |   5 +-
 Source/Chat/ChatSidebar.stories.tsx           |   3 +-
 ...hatSidebarForObservableQueries.stories.tsx | 157 ++++++++++++++++++
 .../when_a_message_action_is_invoked.ts       |   4 +-
 .../given/a_chat_sidebar_in_the_dom.ts        |  12 +-
 Source/Chat/index.ts                          |   6 +-
 package.json                                  |   4 +-
 9 files changed, 193 insertions(+), 27 deletions(-)
 create mode 100644 Source/Chat/ChatSidebarForObservableQueries.stories.tsx

diff --git a/Documentation/Chat/index.md b/Documentation/Chat/index.md
index 0798a977..724fbd85 100644
--- a/Documentation/Chat/index.md
+++ b/Documentation/Chat/index.md
@@ -12,7 +12,7 @@ Everything about _data_ stays with your application:
 
 ## Key Features
 
-- Sidebar (PrimeReact Drawer) opening to the right of the view, with a topics list and per-topic conversations
+- Sidebar (an accessible overlay panel, built on Components' own React Aria-based primitives) opening to the right of the view, with a topics list and per-topic conversations
 - Host-side topic auto-naming contract with a pending placeholder until the name arrives
 - `@`-mentions from a list you hold or a provider callback you resolve, rendered distinctly in message bodies
 - Emoji picker in the composer, with a quick row of recently used emoji
@@ -22,12 +22,12 @@ Everything about _data_ stays with your application:
 
 ## Components
 
-| Component                         | What it is                                                                                |
-| --------------------------------- | ----------------------------------------------------------------------------------------- |
-| `ChatSidebar`                     | The whole thing in a Drawer: topics list ⇄ conversation, back navigation, naming contract |
-| `ChatTopicList`                   | Just the topics — pick one, start a new one                                               |
-| `ChatConversation`                | Just one conversation — messages plus composer                                            |
-| `ChatSidebarForObservableQueries` | Optional: `ChatSidebar` bound to two Cratis Arc observable queries                        |
+| Component                         | What it is                                                                                        |
+| --------------------------------- | ------------------------------------------------------------------------------------------------- |
+| `ChatSidebar`                     | The whole thing in an overlay panel: topics list ⇄ conversation, back navigation, naming contract |
+| `ChatTopicList`                   | Just the topics — pick one, start a new one                                                       |
+| `ChatConversation`                | Just one conversation — messages plus composer                                                    |
+| `ChatSidebarForObservableQueries` | Optional: `ChatSidebar` bound to two Cratis Arc observable queries                                |
 
 ## Basic Usage
 
@@ -100,12 +100,15 @@ interface ProjectMessage extends ChatMessage {
     actions={[{
         id: 'open-project',
         label: 'Open the project',
-        icon: 'pi pi-folder-open',
+        icon: <FaFolderOpen />, // or a CSS class name for an icon font your app already uses
         onInvoke: message => navigate(`/projects/${message.projectId}`),
     }]}
 />
 ```
 
+`icon` is opaque to the library — a ready element (as above) or a CSS class name string for
+whatever icon font the host provides. The chat itself does not depend on any icon library.
+
 ## Authors are resolved, not stored
 
 A message deliberately carries only `authorId`. The `authorOf` callback resolves it to a `ChatAuthor` (`name`, `kind`, `hasAvatar`, `avatarVersion`) at render time — so a rename or a new picture shows up everywhere at once. For full control, `renderAvatar` and `renderAuthorName` replace the built-in avatar circle and name text entirely:
@@ -124,7 +127,7 @@ A message deliberately carries only `authorId`. The `authorOf` callback resolves
 
 ## Styling
 
-Every color comes from the `--cratis-*` token layer, so the chat follows the PrimeReact theme the application runs — light, dark, or its own overrides. The Drawer itself accepts `pt`, `ptOptions`, and `unstyled` for full control.
+Every color comes from the `--cratis-*` token layer, so the chat follows whatever theme the application runs — light, dark, or its own overrides. `ChatSidebar` accepts a `pt` prop typed as `ChatSidebarParts` — per-part attributes (`className`, `style`, `data-*`, and more) for its backdrop, root panel, header, title, back/close buttons, and content region — for full control over structure and styling.
 
 ## See also
 
diff --git a/Documentation/Chat/message-actions.md b/Documentation/Chat/message-actions.md
index e125f40e..575be5c9 100644
--- a/Documentation/Chat/message-actions.md
+++ b/Documentation/Chat/message-actions.md
@@ -8,7 +8,7 @@ The library ships no actions of its own — whatever a message can be turned int
 interface ChatMessageAction<TMessage extends ChatMessage = ChatMessage> {
     id: string; // rendering key among its siblings
     label: string; // tooltip and accessible name
-    icon: string | ReactNode; // 'pi pi-bolt', or a ready element
+    icon: string | ReactNode; // a ready element, or a CSS class name for an icon font you provide
     isAvailable?: (message: TMessage) => boolean; // omit to offer on every message
     onInvoke: (message: TMessage) => void;
 }
@@ -25,19 +25,19 @@ Actions appear as a small button row over a message's corner while it is hovered
         {
             id: 'create-issue',
             label: 'Create an issue from this',
-            icon: 'pi pi-plus-circle',
+            icon: <FaCirclePlus />,
             onInvoke: message => openCreateIssueDialog(message),
         },
         {
             id: 'associate-issue',
             label: 'Associate with an issue',
-            icon: 'pi pi-link',
+            icon: <FaLink />,
             onInvoke: message => openAssociateIssueDialog(message),
         },
         {
             id: 'retry',
             label: 'Run this again',
-            icon: 'pi pi-refresh',
+            icon: 'my-icon-font-refresh', // a class name works just as well
             isAvailable: message => message.metadata?.failed === true,
             onInvoke: message => retry(message),
         },
diff --git a/Source/Chat/ChatConversation.stories.tsx b/Source/Chat/ChatConversation.stories.tsx
index 8f9c6f58..93af1211 100644
--- a/Source/Chat/ChatConversation.stories.tsx
+++ b/Source/Chat/ChatConversation.stories.tsx
@@ -4,6 +4,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { fn } from 'storybook/test';
 import { useState } from 'react';
+import { FaCirclePlus, FaCopy } from 'react-icons/fa6';
 import { ChatAuthorKind } from '../Canvas/shapes/ChatBubble/ChatAuthorKind';
 import type { ChatAuthor } from './ChatAuthor';
 import { ChatConversation } from './ChatConversation';
@@ -87,7 +88,7 @@ export const Playground: Story = {
             {
                 id: 'create-issue',
                 label: 'Create an issue',
-                icon: 'pi pi-plus-circle',
+                icon: <FaCirclePlus />,
                 onInvoke: fn(),
             },
         ],
@@ -149,7 +150,7 @@ export const Interactive: Story = {
                             {
                                 id: 'copy',
                                 label: 'Copy the message',
-                                icon: 'pi pi-copy',
+                                icon: <FaCopy />,
                                 onInvoke: (message) =>
                                     navigator.clipboard?.writeText(message.body),
                             },
diff --git a/Source/Chat/ChatSidebar.stories.tsx b/Source/Chat/ChatSidebar.stories.tsx
index cdc5be02..88d84e2a 100644
--- a/Source/Chat/ChatSidebar.stories.tsx
+++ b/Source/Chat/ChatSidebar.stories.tsx
@@ -4,6 +4,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { fn } from 'storybook/test';
 import { useRef, useState } from 'react';
+import { FaCopy } from 'react-icons/fa6';
 import { ChatAuthorKind } from '../Canvas/shapes/ChatBubble/ChatAuthorKind';
 import type { ChatAuthor } from './ChatAuthor';
 import type { ChatIdentifier } from './ChatIdentifier';
@@ -193,7 +194,7 @@ export const InteractiveHost: Story = {
                             {
                                 id: 'copy',
                                 label: 'Copy the message',
-                                icon: 'pi pi-copy',
+                                icon: <FaCopy />,
                                 onInvoke: (message) =>
                                     navigator.clipboard?.writeText(message.body),
                             },
diff --git a/Source/Chat/ChatSidebarForObservableQueries.stories.tsx b/Source/Chat/ChatSidebarForObservableQueries.stories.tsx
new file mode 100644
index 00000000..ac7b37db
--- /dev/null
+++ b/Source/Chat/ChatSidebarForObservableQueries.stories.tsx
@@ -0,0 +1,157 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from 'storybook/test';
+import {
+    ObservableQueryFor,
+    type QueryResult,
+    type ObservableQuerySubscription,
+} from '@cratis/arc/queries';
+import { ChatAuthorKind } from '../Canvas/shapes/ChatBubble/ChatAuthorKind';
+import type { ChatAuthor } from './ChatAuthor';
+import type { ChatIdentifier } from './ChatIdentifier';
+import type { ChatMessage } from './ChatMessage';
+import { ChatSidebarForObservableQueries } from './ChatSidebarForObservableQueries';
+import type { ChatTopic } from './ChatTopic';
+
+const authors: Record<string, ChatAuthor> = {
+    'person-1': { name: 'Sample User', kind: ChatAuthorKind.User },
+    'agent-1': { name: 'Review Agent', kind: ChatAuthorKind.Agent },
+};
+
+const authorOf = (authorId: ChatIdentifier): ChatAuthor =>
+    authors[String(authorId)] ?? { name: String(authorId), kind: ChatAuthorKind.User };
+
+const mentionCandidates = [
+    { id: 'person-1', name: 'Sample User', hasAvatar: false, kind: ChatAuthorKind.User },
+    { id: 'agent-1', name: 'Review Agent', hasAvatar: false, kind: ChatAuthorKind.Agent },
+];
+
+const topics: ChatTopic[] = [
+    {
+        id: 'topic-1',
+        name: 'Rollout planning',
+        startedBy: 'person-1',
+        lastActivity: new Date(Date.now() - 5 * 60_000),
+    },
+    {
+        id: 'topic-2',
+        startedBy: 'agent-1',
+        started: new Date(Date.now() - 30_000),
+        lastActivity: new Date(Date.now() - 30_000),
+    },
+];
+
+const messages: ChatMessage[] = [
+    {
+        id: 'message-1',
+        topicId: 'topic-1',
+        authorId: 'person-1',
+        body: 'Kicking this off',
+        timestamp: new Date(Date.now() - 5 * 60_000),
+    },
+];
+
+const resultOf = <TData,>(data: TData): QueryResult<TData> =>
+    ({
+        data,
+        paging: {
+            totalItems: Array.isArray(data) ? data.length : 1,
+            totalPages: 1,
+            page: 0,
+            size: Array.isArray(data) ? data.length : 1,
+        },
+        isSuccess: true,
+        isAuthorized: true,
+        isValid: true,
+        hasExceptions: false,
+        validationResults: [],
+        exceptionMessages: [],
+        exceptionStackTrace: '',
+    }) as unknown as QueryResult<TData>;
+
+// Mock observable queries — override subscribe() to deliver static data instead of opening a
+// WebSocket, the same way DataTableForObservableQuery's stories exercise its observable wrapper.
+// `ChatSidebarForObservableQueries` requires the array-typed `IObservableQueryFor<TTopic[], ...>`
+// shape, so `TDataType` here is the array itself, not one topic/message.
+class TopicsQuery extends ObservableQueryFor<ChatTopic[], object> {
+    readonly route = '/api/chat/topics';
+    readonly defaultValue: ChatTopic[] = [];
+    readonly parameterDescriptors = [];
+    get requiredRequestParameters() {
+        return [];
+    }
+    constructor() {
+        super(Object, true);
+    }
+    override subscribe(
+        callback: (result: QueryResult<ChatTopic[]>) => void,
+    ): ObservableQuerySubscription<ChatTopic[]> {
+        callback(resultOf(topics));
+        return {
+            unsubscribe: () => undefined,
+        } as unknown as ObservableQuerySubscription<ChatTopic[]>;
+    }
+}
+
+class MessagesQuery extends ObservableQueryFor<ChatMessage[], { topicId: string }> {
+    readonly route = '/api/chat/messages';
+    readonly defaultValue: ChatMessage[] = [];
+    readonly parameterDescriptors = [];
+    get requiredRequestParameters() {
+        return [];
+    }
+    constructor() {
+        super(Object, true);
+    }
+    override subscribe(
+        callback: (result: QueryResult<ChatMessage[]>) => void,
+        args?: { topicId: string },
+    ): ObservableQuerySubscription<ChatMessage[]> {
+        callback(
+            resultOf(messages.filter((message) => message.topicId === args?.topicId)),
+        );
+        return {
+            unsubscribe: () => undefined,
+        } as unknown as ObservableQuerySubscription<ChatMessage[]>;
+    }
+}
+
+const meta = {
+    title: 'Chat/ChatSidebarForObservableQueries',
+    component: ChatSidebarForObservableQueries,
+    parameters: {
+        layout: 'fullscreen',
+        docs: {
+            description: {
+                component:
+                    'The pure `ChatSidebar` bound to two Cratis Arc observable queries — one for the ' +
+                    'topics, one for the open topic\u2019s messages, subscribed only once a topic is open. ' +
+                    'Every callback contract (sending, starting topics, naming, authors, actions, ' +
+                    'mentions) is exactly the same as `ChatSidebar` itself.',
+            },
+        },
+    },
+    tags: ['autodocs'],
+} satisfies Meta<typeof ChatSidebarForObservableQueries>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** The sidebar bound to live (mocked) observable queries — the topics list loads immediately, and the messages query subscribes once a topic is opened. */
+export const Playground: Story = {
+    args: {
+        open: true,
+        onClose: fn(),
+        topicsQuery: TopicsQuery,
+        messagesQuery: MessagesQuery,
+        messagesArguments: (topicId) =>
+            topicId === undefined ? undefined : { topicId: String(topicId) },
+        onSendMessage: fn(),
+        onStartTopic: fn(),
+        onRequestTopicName: fn(),
+        authorOf,
+        mentionCandidates,
+    },
+};
diff --git a/Source/Chat/for_ChatConversation/when_a_message_action_is_invoked.ts b/Source/Chat/for_ChatConversation/when_a_message_action_is_invoked.ts
index 51e8166d..a7bdf613 100644
--- a/Source/Chat/for_ChatConversation/when_a_message_action_is_invoked.ts
+++ b/Source/Chat/for_ChatConversation/when_a_message_action_is_invoked.ts
@@ -36,7 +36,7 @@ describe('when a message action is invoked', () => {
                     {
                         id: 'create-issue',
                         label: 'Create an issue',
-                        icon: 'pi pi-plus-circle',
+                        icon: 'icon-create-issue',
                         onInvoke: (invoked) => {
                             invokedWith = invoked;
                         },
@@ -44,7 +44,7 @@ describe('when a message action is invoked', () => {
                     {
                         id: 'never-offered',
                         label: 'Never offered',
-                        icon: 'pi pi-ban',
+                        icon: 'icon-ban',
                         isAvailable: () => false,
                         onInvoke: () => {},
                     },
diff --git a/Source/Chat/for_ChatSidebar/given/a_chat_sidebar_in_the_dom.ts b/Source/Chat/for_ChatSidebar/given/a_chat_sidebar_in_the_dom.ts
index ad6a137d..050a0e4a 100644
--- a/Source/Chat/for_ChatSidebar/given/a_chat_sidebar_in_the_dom.ts
+++ b/Source/Chat/for_ChatSidebar/given/a_chat_sidebar_in_the_dom.ts
@@ -15,13 +15,13 @@ export interface ChatSidebarInTheDom {
 }
 
 /**
- * Renders an element into a real document and lets PrimeReact's show transition complete, so the
- * drawer has settled by the time the spec looks at it.
+ * Renders an element into a real document and lets the sidebar's open transition complete, so it
+ * has settled by the time the spec looks at it.
  *
- * PrimeReact 11 components resolve their configuration from a `PrimeReactProvider` and throw
- * without one, so the element is mounted inside the Cratis provider that supplies it.
- * `ResizeObserver` is stubbed because jsdom has no layout engine, and `scrollIntoView` because
- * the conversation keeps its newest message in view with it.
+ * The sidebar is built on React Aria's overlay primitives, which read locale (and other shared
+ * configuration) from the `I18nProvider` `CratisComponentsProvider` supplies, so the element is
+ * mounted inside it. `ResizeObserver` is stubbed because jsdom has no layout engine, and
+ * `scrollIntoView` because the conversation keeps its newest message in view with it.
  * @param element - The element to render.
  * @returns The mounted sidebar, to be passed to {@link unmount}.
  */
diff --git a/Source/Chat/index.ts b/Source/Chat/index.ts
index 9972c6d0..4420b268 100644
--- a/Source/Chat/index.ts
+++ b/Source/Chat/index.ts
@@ -12,7 +12,11 @@ export type { ChatMessageAction } from './ChatMessageAction';
 export { ChatMessageBody } from './ChatMessageBody';
 export type { ChatMessageBodyProps } from './ChatMessageBody';
 export { ChatSidebar } from './ChatSidebar';
-export type { ChatSidebarProps, ChatSidebarLabels } from './ChatSidebar';
+export type {
+    ChatSidebarProps,
+    ChatSidebarLabels,
+    ChatSidebarParts,
+} from './ChatSidebar';
 export { ChatSidebarForObservableQueries } from './ChatSidebarForObservableQueries';
 export type { ChatSidebarForObservableQueriesProps } from './ChatSidebarForObservableQueries';
 export type { ChatTopic } from './ChatTopic';
diff --git a/package.json b/package.json
index f1f2c6c6..30e71a04 100644
--- a/package.json
+++ b/package.json
@@ -1,9 +1,9 @@
 {
     "private": true,
     "workspaces": [
-        "Source",
         "ESLint",
-        "Codemods"
+        "Codemods",
+        "Source"
     ],
     "engines": {
         "node": ">=23.0.0"

From edd3a84fee455d5a7a5d6f069434a2833acc4fc0 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 10:32:12 +0200
Subject: [PATCH 126/267] pi-agent: Certify Chat and disable publish

---
 .github/workflows/publish.yml                 | 212 +++++-------------
 .../Canvas/shapes/ChatBubble/ChatComposer.tsx |  86 ++++++-
 package.json                                  |   4 +-
 3 files changed, 140 insertions(+), 162 deletions(-)

diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
index 80b940d5..495a16f8 100644
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@@ -1,164 +1,68 @@
 name: Publish
 
+# V4 decision: publication is fail-closed for this draft source line. This workflow is a manual,
+# side-effect-free entry point only - it explains why publishing is blocked and exits non-zero. It
+# intentionally does not build, does not release, does not publish, and does not dispatch anything
+# downstream.
+#
+# There is no `push` trigger: nothing on this branch auto-publishes on merge. There is no
+# `id-token` permission, no `contents: write` permission, and no `secrets` usage - this workflow
+# cannot mint an OIDC token, cannot push a tag/release, and cannot reach any credential. It does
+# not call `npm publish`, `yarn publish-version`, `cratis/release-action`, or
+# `peter-evans/repository-dispatch` (or any other action with side effects).
+#
+# V4 publication stays blocked until all of the following exist and are reviewed:
+#   - the approved manual, tooling-first candidate publish workflow (built, reviewed, and staged
+#     specifically for a V4 release, not restored wholesale from main's automatic publisher)
+#   - trusted-publisher / OIDC bootstrap configured and verified against the npm registry for
+#     every package this workspace ships
+#   - a reproducible install decision (npm vs. yarn, lockfile strategy) that the release workflow
+#     and local development both honor
+#   - a package set synchronized across every workspace, including any renderer packages not yet
+#     published
+#   - retained exact tarballs and checksums for whatever gets published, so a release can be
+#     verified after the fact
+#   - explicit owner approval to re-enable publication for this source line
+#
+# Do not restore a `push` trigger, `id-token: write`, `contents: write`, secrets, release
+# creation, `npm publish`/`yarn publish-version`, or any dispatch side effect to this workflow
+# without that review. See git history ("Restore the publish workflow", "Disable Components
+# package publishing", "Remove unverified provenance surfaces") for why this line remains manual
+# and blocked.
+
 on:
-    workflow_dispatch:
-        inputs:
-            version:
-                description: 'Version to release'
-                required: true
-                default: '0.0.0'
-                type: string
-            release-notes:
-                description: 'Release notes'
-                required: true
-                default: 'No release notes'
-                type: string
-            logLevel:
-                description: 'Log level'
-                required: true
-                default: 'warning'
-                type: choice
-                options:
-                    - info
-                    - warning
-                    - debug
-    # V4 decision (merge of main's PR #193 "Restore the publish workflow" into Components 4): main's
-    # automatic `push: branches: [main]` release trigger is deliberately NOT restored here. That trigger
-    # is correct once main is the released branch, but this V4 source line is still a draft under active
-    # merge/rewrite (see the "Disable Components package publishing" and "Remove unverified provenance
-    # surfaces" history), where an unreviewed merge landing on this branch must never auto-publish a
-    # package. Publishing stays reachable only through the manual `workflow_dispatch` trigger below, which
-    # requires an explicit human-supplied version and release notes - release *capability* is restored
-    # (the workflow exists, is wired, and works end to end), while automatic push-to-main publication
-    # stays off until an explicit owner review re-enables it for a released main. Do not re-add a `push`
-    # trigger to this workflow without that review.
+    workflow_dispatch: {}
 
-permissions:
-    contents: write
+permissions: {}
 
 jobs:
-    release:
-        runs-on: ubuntu-latest
-        timeout-minutes: 60
-        outputs:
-            version: ${{ steps.release.outputs.version }}
-            publish: ${{ steps.release.outputs.should-publish }}
-            reason: ${{ steps.release.outputs.reason }}
-
-        steps:
-            - name: Checkout code
-              uses: actions/checkout@v4
-
-            - name: Release
-              id: release
-              uses: cratis/release-action@v1
-              with:
-                  version: ${{ github.event.inputs.version }}
-                  release-notes: ${{ github.event.inputs.release-notes }}
-
-    publish-npm-packages:
-        if: needs.release.outputs.publish == 'true'
-        runs-on: ubuntu-latest
-        timeout-minutes: 60
-        needs: [release]
-        permissions:
-            contents: read
-            id-token: write
-
-        steps:
-            - name: Checkout code
-              uses: actions/checkout@v4
-
-            - name: Setup node
-              uses: actions/setup-node@v4
-              with:
-                  node-version: 23.x
-                  registry-url: 'https://registry.npmjs.org'
-
-            - name: Configure npm for OIDC-based publishing
-              run: |
-                  # setup-node writes a placeholder _authToken (XXXXX-XXXXX-XXXXX-XXXXX) into
-                  # .npmrc and exports NODE_AUTH_TOKEN with the same placeholder. npm uses this
-                  # token as-is for registry auth → 404. Remove it so npm falls back to OIDC.
-                  sed -i '/_authToken/d' "$NPM_CONFIG_USERCONFIG"
-                  echo "NODE_AUTH_TOKEN=" >> "$GITHUB_ENV"
-                  echo "--- .npmrc after stripping placeholder ---"
-                  cat "$NPM_CONFIG_USERCONFIG"
-
-            - name: Upgrade npm for trusted publishing (requires >= 11.5.1)
-              run: |
-                  npm install -g npm@11
-                  NPM_VER="$(npm --version)"
-                  echo "Installed npm $NPM_VER"
-                  node -e "
-                    const v = '$NPM_VER'.split('.').map(Number);
-                    if (v[0] < 11 || (v[0] === 11 && v[1] < 5) || (v[0] === 11 && v[1] === 5 && v[2] < 1)) {
-                      console.error('npm >= 11.5.1 is required for trusted publishing, got $NPM_VER');
-                      process.exit(1);
-                    }
-                  "
-
-            - uses: actions/cache@v4
-              id: yarn-cache
-              with:
-                  path: |
-                      .yarn/cache
-                      **/node_modules
-                      **/.eslintcache
-                      **/yarn.lock
-                  key: ${{ runner.os }}-yarn-${{ hashFiles('**/package.json') }}
-
-            - name: Yarn install
-              run: yarn
-
-            - name: Publish NPM packages
-              run: |
-                  echo "npm $(npm --version) | node $(node --version)"
-                  if [ -n "$ACTIONS_ID_TOKEN_REQUEST_URL" ]; then
-                    echo 'ACTIONS_ID_TOKEN_REQUEST_URL is set'
-                  else
-                    echo 'ACTIONS_ID_TOKEN_REQUEST_URL is NOT set'
-                  fi
-                  echo "NODE_AUTH_TOKEN is '${NODE_AUTH_TOKEN:-(unset)}'"
-                  echo "--- .npmrc ---"
-                  cat "$NPM_CONFIG_USERCONFIG" 2>/dev/null || echo "(no .npmrc)"
-                  echo "---"
-                  yarn build
-                  yarn publish-version ${{ needs.release.outputs.version }}
-
-            - name: Git reset (package.json files changed)
-              run: |
-                  git reset --hard
-
-            - name: Trigger Documentation Build
-              uses: peter-evans/repository-dispatch@v3
-              with:
-                  token: ${{ secrets.PAT_DOCUMENTATION }}
-                  repository: cratis/documentation
-                  event-type: build-docs
-
-            - name: Trigger Dependency Updates on Sample Repository
-              uses: peter-evans/repository-dispatch@v3
-              with:
-                  token: ${{ secrets.PAT_DOCUMENTATION }}
-                  repository: cratis/samples
-                  event-type: update-dependencies
-
-    verify-published:
-        # A merge that publishes nothing is the failure mode that silently costs a release: the release job
-        # succeeds, every publish job is skipped for want of should-publish, and the whole run reports green. Fail
-        # instead, so a release that did not happen cannot be mistaken for one that did.
-        #
-        # Only for the reasons that mean something went wrong. Publishing nothing is correct and routine for the
-        # others - a commit pushed straight to main, a Dependabot merge, a re-run of a run that already released -
-        # and failing on those would make this job noise that everyone learns to ignore.
-        if: always() && needs.release.result == 'success' && contains(fromJSON('["no-label", "error"]'), needs.release.outputs.reason)
+    publication-blocked:
         runs-on: ubuntu-latest
-        timeout-minutes: 60
-        needs: [release]
-
+        timeout-minutes: 5
+        permissions: {}
         steps:
-            - name: Report that nothing was published
+            - name: Explain why publication is blocked
               run: |
-                  echo "::error::Nothing was published and no release was cut (reason: ${{ needs.release.outputs.reason }}). For 'no-label', add exactly one of major, minor or patch to the merged pull request and re-run this workflow - see verify-semver-label, which is meant to catch this before the merge."
+                  cat <<'EOF'
+                  Publication is intentionally blocked for this V4 draft source line.
+
+                  This workflow is a manual, no-op entry point. It does not build, release, publish,
+                  or trigger anything downstream - triggering it does nothing but print this message
+                  and fail.
+
+                  V4 publication remains blocked until all of the following exist and have owner
+                  approval:
+                    1. An approved manual, tooling-first candidate publish workflow built and staged
+                       for V4 (not main's automatic source-first/continue-on-failure publisher).
+                    2. Trusted-publisher/OIDC bootstrap configured and verified for every package.
+                    3. A reproducible install decision (npm vs. yarn, lockfile strategy).
+                    4. A package set synchronized across every workspace, including future renderer
+                       packages.
+                    5. Retained exact tarballs and checksums for whatever gets published.
+                    6. Explicit owner approval to re-enable publication for this source line.
+
+                  Until then, do not add a push trigger, id-token permission, contents: write
+                  permission, secrets usage, release creation, npm/yarn publish step, or any
+                  dispatch side effect to this workflow.
+                  EOF
                   exit 1
diff --git a/Source/Canvas/shapes/ChatBubble/ChatComposer.tsx b/Source/Canvas/shapes/ChatBubble/ChatComposer.tsx
index ca8223e6..67ac2acc 100644
--- a/Source/Canvas/shapes/ChatBubble/ChatComposer.tsx
+++ b/Source/Canvas/shapes/ChatBubble/ChatComposer.tsx
@@ -7,6 +7,7 @@ import { AnchoredOverlay } from './AnchoredOverlay';
 import type { BuildAvatarUrlParams } from './Avatar';
 import { activeMentionQuery } from './Mentions/activeMentionQuery';
 import { applyMention } from './Mentions/applyMention';
+import { extractMentions } from './Mentions/extractMentions';
 import { matchCandidates } from './Mentions/matchCandidates';
 import { MentionSuggestions, type MentionCandidate } from './Mentions';
 import { ReactionPicker, type ReactionPickerLabels } from './ReactionPicker';
@@ -80,21 +81,88 @@ export interface ChatComposerHandle {
  */
 export const ChatComposer = forwardRef<ChatComposerHandle, ChatComposerProps>(
     (
-        { mentionCandidates, onSend, autoFocus = false, buildAvatarUrl, labels },
+        {
+            mentionCandidates,
+            resolveMentionCandidates,
+            onSend,
+            autoFocus = false,
+            buildAvatarUrl,
+            labels,
+        },
         handleRef,
     ) => {
         const [draft, setDraft] = useState({ text: '', caret: 0 });
         const [highlightedIndex, setHighlightedIndex] = useState(0);
         const [showEmojiPicker, setShowEmojiPicker] = useState(false);
+        const [resolvedCandidates, setResolvedCandidates] = useState<MentionCandidate[]>(
+            [],
+        );
         const inputRef = useRef<HTMLTextAreaElement>(null);
         const emojiButtonRef = useRef<HTMLButtonElement>(null);
+        // Every candidate this draft has seen — resolved or picked — so the mentions reported on
+        // send can be found again even when the resolver's latest answer no longer includes them.
+        const seenCandidatesRef = useRef(new Map<string, MentionCandidate>());
 
-        const query = mentionCandidates
+        const mentionsEnabled = !!mentionCandidates || !!resolveMentionCandidates;
+        const query = mentionsEnabled
             ? activeMentionQuery(draft.text, draft.caret)
             : null;
-        const suggestions = query
-            ? matchCandidates(mentionCandidates ?? [], query.text)
-            : [];
+        const queryText = query?.text;
+
+        useEffect(() => {
+            if (!resolveMentionCandidates || queryText === undefined) {
+                setResolvedCandidates((previous) =>
+                    previous.length === 0 ? previous : [],
+                );
+                return;
+            }
+            let cancelled = false;
+            Promise.resolve(resolveMentionCandidates(queryText))
+                .then((candidates) => {
+                    if (cancelled) return;
+                    setResolvedCandidates(candidates);
+                    candidates.forEach((candidate) =>
+                        seenCandidatesRef.current.set(candidate.id, candidate),
+                    );
+                })
+                .catch(() => {
+                    if (!cancelled) {
+                        setResolvedCandidates([]);
+                    }
+                });
+            return () => {
+                cancelled = true;
+            };
+        }, [resolveMentionCandidates, queryText]);
+
+        const uniqueById = (candidates: MentionCandidate[]): MentionCandidate[] => {
+            const byId = new Map<string, MentionCandidate>();
+            candidates.forEach((candidate) => {
+                if (!byId.has(candidate.id)) {
+                    byId.set(candidate.id, candidate);
+                }
+            });
+            return [...byId.values()];
+        };
+
+        const candidatePool = uniqueById([
+            ...(mentionCandidates ?? []),
+            ...resolvedCandidates,
+        ]);
+        // A query that ends in whitespace and spells a candidate's full name is a mention already
+        // made — the trailing space applyMention writes is its closing. Without this, Enter right
+        // after picking would re-pick the same name instead of sending the message.
+        const queryIsCompleteMention =
+            query !== null &&
+            /\s$/.test(query.text) &&
+            candidatePool.some(
+                (candidate) =>
+                    candidate.name.toLowerCase() === query.text.trim().toLowerCase(),
+            );
+        const suggestions =
+            query && !queryIsCompleteMention
+                ? matchCandidates(candidatePool, query.text)
+                : [];
         const isSuggesting = suggestions.length > 0;
         const highlighted = Math.min(highlightedIndex, suggestions.length - 1);
 
@@ -131,12 +199,18 @@ export const ChatComposer = forwardRef<ChatComposerHandle, ChatComposerProps>(
         const send = () => {
             const trimmed = draft.text.trim();
             if (!trimmed) return;
-            onSend(trimmed);
+            const known = uniqueById([
+                ...(mentionCandidates ?? []),
+                ...seenCandidatesRef.current.values(),
+            ]);
+            onSend(trimmed, extractMentions(trimmed, known));
+            seenCandidatesRef.current.clear();
             setDraft({ text: '', caret: 0 });
         };
 
         const choose = (candidate: MentionCandidate) => {
             if (!query) return;
+            seenCandidatesRef.current.set(candidate.id, candidate);
             const applied = applyMention(draft.text, draft.caret, query, candidate.name);
             setDraft(applied);
             setHighlightedIndex(0);
diff --git a/package.json b/package.json
index 30e71a04..f1f2c6c6 100644
--- a/package.json
+++ b/package.json
@@ -1,9 +1,9 @@
 {
     "private": true,
     "workspaces": [
+        "Source",
         "ESLint",
-        "Codemods",
-        "Source"
+        "Codemods"
     ],
     "engines": {
         "node": ">=23.0.0"

From a448b63c67aaacfc7682e9e983d78d312cc7f1d2 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 10:41:31 +0200
Subject: [PATCH 127/267] Bound Chat's upstream NodeNext declaration exception

Apply the existing version-pinned Arc/Fundamentals extensionless-specifier exception to the new Arc observable-query Chat subpath, including only paired upstream cascades.
---
 Source/scripts/verify-public-types.exceptions.json | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/Source/scripts/verify-public-types.exceptions.json b/Source/scripts/verify-public-types.exceptions.json
index ff5890bb..988cf7d1 100644
--- a/Source/scripts/verify-public-types.exceptions.json
+++ b/Source/scripts/verify-public-types.exceptions.json
@@ -77,6 +77,12 @@
                 ]
             }
         },
+        {
+            "subpath": "./Chat",
+            "resolutionModes": {
+                "nodenext": ["arc-family-nodenext-extensionless-specifiers"]
+            }
+        },
         {
             "subpath": "./CommandDialog",
             "resolutionModes": {

From 2e5a3b7c4d16c97f29be26686a792cca3f5beae8 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 10:51:59 +0200
Subject: [PATCH 128/267] pi-agent: Extract shared Chat kit

---
 Documentation/Canvas/chat-bubble.md           |   2 +
 Source/Canvas/index.ts                        |   5 +-
 Source/Canvas/shapes/ChatBubble/index.ts      |  56 ++-------
 Source/Canvas/shapes/Note/Note.tsx            |   2 +-
 Source/Canvas/shapes/Region/Region.tsx        |   2 +-
 Source/Chat/ChatAuthor.ts                     |   2 +-
 Source/Chat/ChatConversation.stories.tsx      |   2 +-
 Source/Chat/ChatConversation.tsx              |  15 +--
 Source/Chat/ChatMention.ts                    |   2 +-
 Source/Chat/ChatMessageBody.tsx               |   2 +-
 Source/Chat/ChatSidebar.stories.tsx           |   2 +-
 ...hatSidebarForObservableQueries.stories.tsx |   2 +-
 Source/Chat/ChatTopicList.stories.tsx         |   2 +-
 Source/Chat/ChatTopicList.tsx                 |   9 +-
 .../Kit}/AnchoredOverlay.tsx                  |   0
 .../Kit}/Avatar/PersonAvatarCircle.css        |   0
 .../Kit}/Avatar/PersonAvatarCircle.tsx        |   0
 .../when_computing_a_color.ts                 |   0
 .../when_computing_initials.ts                |   0
 .../Kit}/Avatar/getAvatarColor.ts             |   0
 .../Kit}/Avatar/getInitials.ts                |   0
 .../ChatBubble => Chat/Kit}/Avatar/index.ts   |   0
 .../shapes/ChatBubble => Chat/Kit}/Chat.css   |   0
 .../ChatBubble => Chat/Kit}/Chat.stories.tsx  |   2 +-
 .../shapes/ChatBubble => Chat/Kit}/Chat.tsx   |   2 +-
 .../ChatBubble => Chat/Kit}/ChatAuthorKind.ts |   0
 .../ChatBubble => Chat/Kit}/ChatBubble.css    |   0
 .../Kit}/ChatBubble.stories.tsx               |   2 +-
 .../ChatBubble => Chat/Kit}/ChatBubble.tsx    |   0
 .../ChatBubble => Chat/Kit}/ChatComposer.css  |   0
 .../ChatBubble => Chat/Kit}/ChatComposer.tsx  |   0
 .../Kit}/ChatKit.stories.tsx                  |   6 +-
 .../ChatBubble => Chat/Kit}/ChatMessage.ts    |   0
 .../Kit}/ChatMessageAdded.ts                  |   0
 .../Kit}/ChatMessageBubble.css                |   0
 .../Kit}/ChatMessageBubble.tsx                |   0
 .../Kit}/ChatMessageReaction.ts               |   0
 .../Kit}/ChatMessageReactionUser.ts           |   0
 .../Kit}/ChatOwnReaction.ts                   |   0
 .../Kit}/ChatTypingAuthor.ts                  |   0
 .../ChatBubble => Chat/Kit}/ChatVariant.ts    |   0
 .../Kit}/Emoji/EmojiCategory.ts               |   0
 .../Kit}/Emoji/EmojiCategoryKey.ts            |   0
 .../Kit}/Emoji/EmojiMemory.ts                 |   0
 .../Kit}/Emoji/EmojiPicker.css                |   0
 .../Kit}/Emoji/EmojiPicker.tsx                |   0
 .../Kit}/Emoji/emojiCatalog.ts                |   0
 .../Emoji/for_recentEmojis/given/a_memory.ts  |   0
 .../and_nothing_has_been_used_yet.ts          |   0
 .../and_the_history_cannot_be_read.ts         |   0
 .../and_it_has_been_used_before.ts            |   0
 .../and_it_is_a_new_one.ts                    |   0
 ..._more_have_been_used_than_the_row_holds.ts |   0
 .../and_storage_refuses_to_keep_it.ts         |   0
 .../ChatBubble => Chat/Kit}/Emoji/index.ts    |   0
 .../Kit}/Emoji/recentEmojis.ts                |   0
 .../ChatBubble => Chat/Kit}/FailedReply.css   |   0
 .../ChatBubble => Chat/Kit}/FailedReply.tsx   |   2 +-
 .../Kit}/Mentions/MentionCandidate.ts         |   0
 .../Kit}/Mentions/MentionQuery.ts             |   0
 .../Kit}/Mentions/MentionSuggestions.css      |   0
 .../Kit}/Mentions/MentionSuggestions.tsx      |   0
 .../Kit}/Mentions/activeMentionQuery.ts       |   0
 .../Kit}/Mentions/applyMention.ts             |   0
 .../Kit}/Mentions/extractMentions.ts          |   0
 .../Kit}/Mentions/findMentionRanges.ts        |   0
 .../when_the_caret_is_inside_a_mention.ts     |   0
 .../when_the_caret_is_not_inside_a_mention.ts |   0
 .../when_inserting_the_chosen_name.ts         |   0
 .../when_extracting_who_a_message_mentions.ts |   0
 .../when_finding_mentions_in_a_text.ts        |   0
 .../when_narrowing_by_what_was_typed.ts       |   0
 .../when_splitting_a_body_into_segments.ts    |   0
 .../ChatBubble => Chat/Kit}/Mentions/index.ts |   0
 .../Kit}/Mentions/matchCandidates.ts          |   0
 .../Kit}/Mentions/mentionSegments.ts          |   0
 .../Kit}/MessageReactions.css                 |   0
 .../Kit}/MessageReactions.tsx                 |   0
 .../Kit}/ReactionPicker.css                   |   0
 .../Kit}/ReactionPicker.tsx                   |   0
 .../Kit}/TypingIndicator.css                  |   0
 .../Kit}/TypingIndicator.tsx                  |   0
 .../Kit}/findOwnReaction.ts                   |   0
 .../given/a_composer_in_the_dom.ts            |   0
 .../when_candidates_come_from_a_provider.ts   |   0
 .../when_a_turn_ended_in_failure.ts           |   0
 ...when_finding_the_current_users_reaction.ts |   0
 .../when_excluding_a_persons_own_reaction.ts  |   0
 Source/Chat/Kit/index.ts                      |  52 +++++++++
 .../Kit}/reactionsExcludingUser.ts            |   0
 .../when_rendering_a_body_with_mentions.ts    |   2 +-
 .../when_sending_a_message.ts                 |   2 +-
 ..._moving_between_topics_and_conversation.ts |   2 +-
 .../when_a_topic_is_picked.ts                 |   2 +-
 Source/Chat/index.ts                          |  20 +---
 .../messaging/useOptionalMessenger.ts         |   0
 .../when_the_chat_kit_is_shared.ts            | 108 ++++++++++++++++++
 Source/styles.css                             |  22 ++--
 98 files changed, 220 insertions(+), 109 deletions(-)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/AnchoredOverlay.tsx (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/Avatar/PersonAvatarCircle.css (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/Avatar/PersonAvatarCircle.tsx (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/Avatar/for_getAvatarColor/when_computing_a_color.ts (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/Avatar/for_getInitials/when_computing_initials.ts (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/Avatar/getAvatarColor.ts (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/Avatar/getInitials.ts (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/Avatar/index.ts (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/Chat.css (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/Chat.stories.tsx (99%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/Chat.tsx (99%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/ChatAuthorKind.ts (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/ChatBubble.css (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/ChatBubble.stories.tsx (97%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/ChatBubble.tsx (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/ChatComposer.css (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/ChatComposer.tsx (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/ChatKit.stories.tsx (97%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/ChatMessage.ts (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/ChatMessageAdded.ts (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/ChatMessageBubble.css (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/ChatMessageBubble.tsx (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/ChatMessageReaction.ts (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/ChatMessageReactionUser.ts (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/ChatOwnReaction.ts (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/ChatTypingAuthor.ts (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/ChatVariant.ts (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/Emoji/EmojiCategory.ts (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/Emoji/EmojiCategoryKey.ts (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/Emoji/EmojiMemory.ts (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/Emoji/EmojiPicker.css (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/Emoji/EmojiPicker.tsx (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/Emoji/emojiCatalog.ts (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/Emoji/for_recentEmojis/given/a_memory.ts (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/Emoji/for_recentEmojis/when_offering_the_quick_row/and_nothing_has_been_used_yet.ts (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/Emoji/for_recentEmojis/when_offering_the_quick_row/and_the_history_cannot_be_read.ts (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/Emoji/for_recentEmojis/when_remembering_an_emoji/and_it_has_been_used_before.ts (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/Emoji/for_recentEmojis/when_remembering_an_emoji/and_it_is_a_new_one.ts (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/Emoji/for_recentEmojis/when_remembering_an_emoji/and_more_have_been_used_than_the_row_holds.ts (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/Emoji/for_recentEmojis/when_remembering_an_emoji/and_storage_refuses_to_keep_it.ts (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/Emoji/index.ts (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/Emoji/recentEmojis.ts (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/FailedReply.css (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/FailedReply.tsx (99%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/Mentions/MentionCandidate.ts (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/Mentions/MentionQuery.ts (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/Mentions/MentionSuggestions.css (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/Mentions/MentionSuggestions.tsx (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/Mentions/activeMentionQuery.ts (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/Mentions/applyMention.ts (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/Mentions/extractMentions.ts (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/Mentions/findMentionRanges.ts (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/Mentions/for_activeMentionQuery/when_the_caret_is_inside_a_mention.ts (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/Mentions/for_activeMentionQuery/when_the_caret_is_not_inside_a_mention.ts (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/Mentions/for_applyMention/when_inserting_the_chosen_name.ts (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/Mentions/for_extractMentions/when_extracting_who_a_message_mentions.ts (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/Mentions/for_findMentionRanges/when_finding_mentions_in_a_text.ts (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/Mentions/for_matchCandidates/when_narrowing_by_what_was_typed.ts (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/Mentions/for_mentionSegments/when_splitting_a_body_into_segments.ts (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/Mentions/index.ts (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/Mentions/matchCandidates.ts (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/Mentions/mentionSegments.ts (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/MessageReactions.css (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/MessageReactions.tsx (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/ReactionPicker.css (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/ReactionPicker.tsx (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/TypingIndicator.css (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/TypingIndicator.tsx (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/findOwnReaction.ts (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/for_ChatComposer/given/a_composer_in_the_dom.ts (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/for_ChatComposer/when_candidates_come_from_a_provider.ts (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/for_FailedReply/when_a_turn_ended_in_failure.ts (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/for_findOwnReaction/when_finding_the_current_users_reaction.ts (100%)
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/for_reactionsExcludingUser/when_excluding_a_persons_own_reaction.ts (100%)
 create mode 100644 Source/Chat/Kit/index.ts
 rename Source/{Canvas/shapes/ChatBubble => Chat/Kit}/reactionsExcludingUser.ts (100%)
 rename Source/{Canvas => Common}/messaging/useOptionalMessenger.ts (100%)
 create mode 100644 Source/for_root_architecture/when_the_chat_kit_is_shared.ts

diff --git a/Documentation/Canvas/chat-bubble.md b/Documentation/Canvas/chat-bubble.md
index 9c5368c7..a13c829e 100644
--- a/Documentation/Canvas/chat-bubble.md
+++ b/Documentation/Canvas/chat-bubble.md
@@ -4,6 +4,8 @@ The `ChatBubble` kit is a full commenting/chat system — a message thread, a co
 
 Like `Note` and `Region`, none of these components live inside a `CanvasItem` by requirement — `Chat` is a normal floating/docked panel, most often placed inside a `CanvasItem` so it can sit next to whatever it is commenting on, or rendered outside the `Canvas` entirely for a docked sidebar.
 
+The kit itself is generic and needs no `pixi.js` — it lives in source at `Source/Chat/Kit`, the shared, non-spatial implementation both `@cratis/components/Canvas` (below) and `@cratis/components/Chat` build on. Import it from `@cratis/components/Canvas` as shown here; `@cratis/components/Chat`'s [conversation components](../Chat/index.md) build their own higher-level `ChatConversation`/`ChatSidebar` on top of the same kit.
+
 ## `Chat` — the conversation panel
 
 ```tsx
diff --git a/Source/Canvas/index.ts b/Source/Canvas/index.ts
index 6f407a3c..af31f62c 100644
--- a/Source/Canvas/index.ts
+++ b/Source/Canvas/index.ts
@@ -30,4 +30,7 @@ export type { SelfSuspendingFrameLoop } from './selfSuspendingFrameLoop';
 
 export * from './shapes/Note';
 export * from './shapes/Region';
-export * from './shapes/ChatBubble';
+// The generic, Pixi-free chat kit lives in the shared, non-spatial `Source/Chat/Kit` — Canvas
+// consumes the same canonical implementation `./Chat` does. `./shapes/ChatBubble` still holds a
+// compatibility barrel re-exporting it, for anything still importing that physical path.
+export * from '../Chat/Kit';
diff --git a/Source/Canvas/shapes/ChatBubble/index.ts b/Source/Canvas/shapes/ChatBubble/index.ts
index c1fa6898..50bb22fc 100644
--- a/Source/Canvas/shapes/ChatBubble/index.ts
+++ b/Source/Canvas/shapes/ChatBubble/index.ts
@@ -1,52 +1,10 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-export { Chat } from './Chat';
-export type { ChatProps, ChatLabels } from './Chat';
-export { ChatMessageAdded } from './ChatMessageAdded';
-export { ChatAuthorKind } from './ChatAuthorKind';
-export { ChatBubble } from './ChatBubble';
-export type { ChatBubbleProps } from './ChatBubble';
-export { ChatComposer } from './ChatComposer';
-export type {
-    ChatComposerProps,
-    ChatComposerHandle,
-    ChatComposerLabels,
-} from './ChatComposer';
-export type { ChatMessage } from './ChatMessage';
-export { ChatMessageBubble } from './ChatMessageBubble';
-export type {
-    ChatMessageBubbleProps,
-    ChatMessageBubbleLabels,
-} from './ChatMessageBubble';
-export type { ChatMessageReaction } from './ChatMessageReaction';
-export type { ChatMessageReactionUser } from './ChatMessageReactionUser';
-export type { ChatOwnReaction } from './ChatOwnReaction';
-export type { ChatTypingAuthor } from './ChatTypingAuthor';
-export { ChatVariant } from './ChatVariant';
-export { FailedReply } from './FailedReply';
-export type {
-    FailedReplyProps,
-    FailedReplyLabels,
-    FailedReplyReportDetails,
-} from './FailedReply';
-// A consumer that owns reaction commands can use the same current-user lookup as the
-// Components chat composition without duplicating its one-reaction-per-person rules.
-export { findOwnReaction } from './findOwnReaction';
-// `reactionsExcludingUser` remains an internal rendering helper.
-export { MessageReactions } from './MessageReactions';
-export type { MessageReactionsProps } from './MessageReactions';
-export { ReactionPicker } from './ReactionPicker';
-export type { ReactionPickerProps, ReactionPickerLabels } from './ReactionPicker';
-export { TypingIndicator } from './TypingIndicator';
-export type { TypingIndicatorProps } from './TypingIndicator';
-export { AnchoredOverlay } from './AnchoredOverlay';
-export type {
-    AnchoredOverlayProps,
-    AnchoredOverlaySide,
-    AnchoredOverlayAlign,
-} from './AnchoredOverlay';
-
-export * from './Avatar';
-export * from './Emoji';
-export * from './Mentions';
+// Compatibility shim. The chat kit that used to live physically under `Canvas/shapes/ChatBubble`
+// is generic and Pixi-free — it never touches Canvas or PivotViewer — so it now lives at
+// `Source/Chat/Kit`, the shared, non-spatial home both the `./Chat` and `./Canvas` subpaths build
+// on. This barrel keeps every symbol the `@cratis/components/Canvas` subpath has ever exported
+// from this path reachable exactly as before; `../Canvas/index.ts` still re-exports it unchanged.
+// Do not add new code here — add it to `Source/Chat/Kit` and it flows through this shim.
+export * from '../../../Chat/Kit';
diff --git a/Source/Canvas/shapes/Note/Note.tsx b/Source/Canvas/shapes/Note/Note.tsx
index 2141d1ff..a94045d8 100644
--- a/Source/Canvas/shapes/Note/Note.tsx
+++ b/Source/Canvas/shapes/Note/Note.tsx
@@ -3,7 +3,7 @@
 
 import type React from 'react';
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { useOptionalMessenger } from '../../messaging/useOptionalMessenger';
+import { useOptionalMessenger } from '../../../Common/messaging/useOptionalMessenger';
 import { NoteTextChanged } from './NoteTextChanged';
 import { whenNoteFontReady } from './noteFont';
 import { FaPlus } from 'react-icons/fa6';
diff --git a/Source/Canvas/shapes/Region/Region.tsx b/Source/Canvas/shapes/Region/Region.tsx
index 0dc484ad..092c156b 100644
--- a/Source/Canvas/shapes/Region/Region.tsx
+++ b/Source/Canvas/shapes/Region/Region.tsx
@@ -11,7 +11,7 @@ import {
     useSyncExternalStore,
 } from 'react';
 import { CanvasItemRegistryContext, type CanvasItemRegistryEntry } from '../../Canvas';
-import { useOptionalMessenger } from '../../messaging/useOptionalMessenger';
+import { useOptionalMessenger } from '../../../Common/messaging/useOptionalMessenger';
 import { ItemAddedToRegion } from './ItemAddedToRegion';
 import { ItemRemovedFromRegion } from './ItemRemovedFromRegion';
 import { itemsWithinRegion } from './regionContainment';
diff --git a/Source/Chat/ChatAuthor.ts b/Source/Chat/ChatAuthor.ts
index b606747f..318dda3e 100644
--- a/Source/Chat/ChatAuthor.ts
+++ b/Source/Chat/ChatAuthor.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 { ChatAuthorKind } from '../Canvas/shapes/ChatBubble/ChatAuthorKind';
+import type { ChatAuthorKind } from './Kit/ChatAuthorKind';
 
 /**
  * What it takes to render whoever wrote something — resolved by the host from an author id at
diff --git a/Source/Chat/ChatConversation.stories.tsx b/Source/Chat/ChatConversation.stories.tsx
index 93af1211..6f2097f7 100644
--- a/Source/Chat/ChatConversation.stories.tsx
+++ b/Source/Chat/ChatConversation.stories.tsx
@@ -5,7 +5,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { fn } from 'storybook/test';
 import { useState } from 'react';
 import { FaCirclePlus, FaCopy } from 'react-icons/fa6';
-import { ChatAuthorKind } from '../Canvas/shapes/ChatBubble/ChatAuthorKind';
+import { ChatAuthorKind } from './Kit/ChatAuthorKind';
 import type { ChatAuthor } from './ChatAuthor';
 import { ChatConversation } from './ChatConversation';
 import type { ChatIdentifier } from './ChatIdentifier';
diff --git a/Source/Chat/ChatConversation.tsx b/Source/Chat/ChatConversation.tsx
index 3ba90a83..b40f600c 100644
--- a/Source/Chat/ChatConversation.tsx
+++ b/Source/Chat/ChatConversation.tsx
@@ -2,19 +2,16 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import { useEffect, useMemo, useRef, type ReactNode } from 'react';
-import {
-    PersonAvatarCircle,
-    type BuildAvatarUrlParams,
-} from '../Canvas/shapes/ChatBubble/Avatar';
-import { ChatAuthorKind } from '../Canvas/shapes/ChatBubble/ChatAuthorKind';
+import { PersonAvatarCircle, type BuildAvatarUrlParams } from './Kit/Avatar';
+import { ChatAuthorKind } from './Kit/ChatAuthorKind';
 import {
     ChatComposer,
     type ChatComposerHandle,
     type ChatComposerLabels,
-} from '../Canvas/shapes/ChatBubble/ChatComposer';
-import type { ChatTypingAuthor } from '../Canvas/shapes/ChatBubble/ChatTypingAuthor';
-import type { MentionCandidate } from '../Canvas/shapes/ChatBubble/Mentions';
-import { TypingIndicator } from '../Canvas/shapes/ChatBubble/TypingIndicator';
+} from './Kit/ChatComposer';
+import type { ChatTypingAuthor } from './Kit/ChatTypingAuthor';
+import type { MentionCandidate } from './Kit/Mentions';
+import { TypingIndicator } from './Kit/TypingIndicator';
 import type { ChatAuthor } from './ChatAuthor';
 import { chatIdentifierString, type ChatIdentifier } from './ChatIdentifier';
 import type { ChatMention } from './ChatMention';
diff --git a/Source/Chat/ChatMention.ts b/Source/Chat/ChatMention.ts
index b7c18b02..bbf103da 100644
--- a/Source/Chat/ChatMention.ts
+++ b/Source/Chat/ChatMention.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 { ChatAuthorKind } from '../Canvas/shapes/ChatBubble/ChatAuthorKind';
+import type { ChatAuthorKind } from './Kit/ChatAuthorKind';
 import type { ChatIdentifier } from './ChatIdentifier';
 
 /**
diff --git a/Source/Chat/ChatMessageBody.tsx b/Source/Chat/ChatMessageBody.tsx
index c80775b4..c79b7559 100644
--- a/Source/Chat/ChatMessageBody.tsx
+++ b/Source/Chat/ChatMessageBody.tsx
@@ -2,7 +2,7 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import React from 'react';
-import { mentionSegments } from '../Canvas/shapes/ChatBubble/Mentions';
+import { mentionSegments } from './Kit/Mentions';
 import type { ChatMention } from './ChatMention';
 
 /**
diff --git a/Source/Chat/ChatSidebar.stories.tsx b/Source/Chat/ChatSidebar.stories.tsx
index 88d84e2a..71b581b6 100644
--- a/Source/Chat/ChatSidebar.stories.tsx
+++ b/Source/Chat/ChatSidebar.stories.tsx
@@ -5,7 +5,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { fn } from 'storybook/test';
 import { useRef, useState } from 'react';
 import { FaCopy } from 'react-icons/fa6';
-import { ChatAuthorKind } from '../Canvas/shapes/ChatBubble/ChatAuthorKind';
+import { ChatAuthorKind } from './Kit/ChatAuthorKind';
 import type { ChatAuthor } from './ChatAuthor';
 import type { ChatIdentifier } from './ChatIdentifier';
 import type { ChatMention } from './ChatMention';
diff --git a/Source/Chat/ChatSidebarForObservableQueries.stories.tsx b/Source/Chat/ChatSidebarForObservableQueries.stories.tsx
index ac7b37db..45835113 100644
--- a/Source/Chat/ChatSidebarForObservableQueries.stories.tsx
+++ b/Source/Chat/ChatSidebarForObservableQueries.stories.tsx
@@ -8,7 +8,7 @@ import {
     type QueryResult,
     type ObservableQuerySubscription,
 } from '@cratis/arc/queries';
-import { ChatAuthorKind } from '../Canvas/shapes/ChatBubble/ChatAuthorKind';
+import { ChatAuthorKind } from './Kit/ChatAuthorKind';
 import type { ChatAuthor } from './ChatAuthor';
 import type { ChatIdentifier } from './ChatIdentifier';
 import type { ChatMessage } from './ChatMessage';
diff --git a/Source/Chat/ChatTopicList.stories.tsx b/Source/Chat/ChatTopicList.stories.tsx
index 994607bb..d9e42edf 100644
--- a/Source/Chat/ChatTopicList.stories.tsx
+++ b/Source/Chat/ChatTopicList.stories.tsx
@@ -3,7 +3,7 @@
 
 import type { Meta, StoryObj } from '@storybook/react';
 import { fn } from 'storybook/test';
-import { ChatAuthorKind } from '../Canvas/shapes/ChatBubble/ChatAuthorKind';
+import { ChatAuthorKind } from './Kit/ChatAuthorKind';
 import type { ChatAuthor } from './ChatAuthor';
 import type { ChatIdentifier } from './ChatIdentifier';
 import { ChatTopicList } from './ChatTopicList';
diff --git a/Source/Chat/ChatTopicList.tsx b/Source/Chat/ChatTopicList.tsx
index 520aae06..59ff0711 100644
--- a/Source/Chat/ChatTopicList.tsx
+++ b/Source/Chat/ChatTopicList.tsx
@@ -1,12 +1,9 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { type ReactNode } from 'react';
-import {
-    PersonAvatarCircle,
-    type BuildAvatarUrlParams,
-} from '../Canvas/shapes/ChatBubble/Avatar';
-import { ChatAuthorKind } from '../Canvas/shapes/ChatBubble/ChatAuthorKind';
+import type { ReactNode } from 'react';
+import { PersonAvatarCircle, type BuildAvatarUrlParams } from './Kit/Avatar';
+import { ChatAuthorKind } from './Kit/ChatAuthorKind';
 import type { ChatAuthor } from './ChatAuthor';
 import { chatIdentifierString, type ChatIdentifier } from './ChatIdentifier';
 import type { ChatTopic } from './ChatTopic';
diff --git a/Source/Canvas/shapes/ChatBubble/AnchoredOverlay.tsx b/Source/Chat/Kit/AnchoredOverlay.tsx
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/AnchoredOverlay.tsx
rename to Source/Chat/Kit/AnchoredOverlay.tsx
diff --git a/Source/Canvas/shapes/ChatBubble/Avatar/PersonAvatarCircle.css b/Source/Chat/Kit/Avatar/PersonAvatarCircle.css
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/Avatar/PersonAvatarCircle.css
rename to Source/Chat/Kit/Avatar/PersonAvatarCircle.css
diff --git a/Source/Canvas/shapes/ChatBubble/Avatar/PersonAvatarCircle.tsx b/Source/Chat/Kit/Avatar/PersonAvatarCircle.tsx
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/Avatar/PersonAvatarCircle.tsx
rename to Source/Chat/Kit/Avatar/PersonAvatarCircle.tsx
diff --git a/Source/Canvas/shapes/ChatBubble/Avatar/for_getAvatarColor/when_computing_a_color.ts b/Source/Chat/Kit/Avatar/for_getAvatarColor/when_computing_a_color.ts
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/Avatar/for_getAvatarColor/when_computing_a_color.ts
rename to Source/Chat/Kit/Avatar/for_getAvatarColor/when_computing_a_color.ts
diff --git a/Source/Canvas/shapes/ChatBubble/Avatar/for_getInitials/when_computing_initials.ts b/Source/Chat/Kit/Avatar/for_getInitials/when_computing_initials.ts
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/Avatar/for_getInitials/when_computing_initials.ts
rename to Source/Chat/Kit/Avatar/for_getInitials/when_computing_initials.ts
diff --git a/Source/Canvas/shapes/ChatBubble/Avatar/getAvatarColor.ts b/Source/Chat/Kit/Avatar/getAvatarColor.ts
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/Avatar/getAvatarColor.ts
rename to Source/Chat/Kit/Avatar/getAvatarColor.ts
diff --git a/Source/Canvas/shapes/ChatBubble/Avatar/getInitials.ts b/Source/Chat/Kit/Avatar/getInitials.ts
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/Avatar/getInitials.ts
rename to Source/Chat/Kit/Avatar/getInitials.ts
diff --git a/Source/Canvas/shapes/ChatBubble/Avatar/index.ts b/Source/Chat/Kit/Avatar/index.ts
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/Avatar/index.ts
rename to Source/Chat/Kit/Avatar/index.ts
diff --git a/Source/Canvas/shapes/ChatBubble/Chat.css b/Source/Chat/Kit/Chat.css
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/Chat.css
rename to Source/Chat/Kit/Chat.css
diff --git a/Source/Canvas/shapes/ChatBubble/Chat.stories.tsx b/Source/Chat/Kit/Chat.stories.tsx
similarity index 99%
rename from Source/Canvas/shapes/ChatBubble/Chat.stories.tsx
rename to Source/Chat/Kit/Chat.stories.tsx
index 05830c79..1c531054 100644
--- a/Source/Canvas/shapes/ChatBubble/Chat.stories.tsx
+++ b/Source/Chat/Kit/Chat.stories.tsx
@@ -10,7 +10,7 @@ import type { ChatMessage } from './ChatMessage';
 import type { MentionCandidate } from './Mentions';
 
 const meta: Meta<typeof Chat> = {
-    title: 'Canvas/Chat',
+    title: 'Chat/Kit/Chat',
     component: Chat,
     parameters: {
         layout: 'centered',
diff --git a/Source/Canvas/shapes/ChatBubble/Chat.tsx b/Source/Chat/Kit/Chat.tsx
similarity index 99%
rename from Source/Canvas/shapes/ChatBubble/Chat.tsx
rename to Source/Chat/Kit/Chat.tsx
index 0e16a32b..8a422e63 100644
--- a/Source/Canvas/shapes/ChatBubble/Chat.tsx
+++ b/Source/Chat/Kit/Chat.tsx
@@ -4,7 +4,7 @@
 import type React from 'react';
 import { useCallback, useEffect, useMemo, useRef } from 'react';
 import type { Guid } from '@cratis/fundamentals';
-import { useOptionalMessenger } from '../../messaging/useOptionalMessenger';
+import { useOptionalMessenger } from '../../Common/messaging/useOptionalMessenger';
 import type { BuildAvatarUrlParams } from './Avatar';
 import { ChatMessageAdded } from './ChatMessageAdded';
 import {
diff --git a/Source/Canvas/shapes/ChatBubble/ChatAuthorKind.ts b/Source/Chat/Kit/ChatAuthorKind.ts
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/ChatAuthorKind.ts
rename to Source/Chat/Kit/ChatAuthorKind.ts
diff --git a/Source/Canvas/shapes/ChatBubble/ChatBubble.css b/Source/Chat/Kit/ChatBubble.css
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/ChatBubble.css
rename to Source/Chat/Kit/ChatBubble.css
diff --git a/Source/Canvas/shapes/ChatBubble/ChatBubble.stories.tsx b/Source/Chat/Kit/ChatBubble.stories.tsx
similarity index 97%
rename from Source/Canvas/shapes/ChatBubble/ChatBubble.stories.tsx
rename to Source/Chat/Kit/ChatBubble.stories.tsx
index 00bb2465..d41b1746 100644
--- a/Source/Canvas/shapes/ChatBubble/ChatBubble.stories.tsx
+++ b/Source/Chat/Kit/ChatBubble.stories.tsx
@@ -6,7 +6,7 @@ import { expect, userEvent, within } from 'storybook/test';
 import { ChatBubble } from './ChatBubble';
 
 const meta = {
-    title: 'Canvas/ChatBubble',
+    title: 'Chat/Kit/ChatBubble',
     component: ChatBubble,
     args: {
         authorId: 'sample-user',
diff --git a/Source/Canvas/shapes/ChatBubble/ChatBubble.tsx b/Source/Chat/Kit/ChatBubble.tsx
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/ChatBubble.tsx
rename to Source/Chat/Kit/ChatBubble.tsx
diff --git a/Source/Canvas/shapes/ChatBubble/ChatComposer.css b/Source/Chat/Kit/ChatComposer.css
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/ChatComposer.css
rename to Source/Chat/Kit/ChatComposer.css
diff --git a/Source/Canvas/shapes/ChatBubble/ChatComposer.tsx b/Source/Chat/Kit/ChatComposer.tsx
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/ChatComposer.tsx
rename to Source/Chat/Kit/ChatComposer.tsx
diff --git a/Source/Canvas/shapes/ChatBubble/ChatKit.stories.tsx b/Source/Chat/Kit/ChatKit.stories.tsx
similarity index 97%
rename from Source/Canvas/shapes/ChatBubble/ChatKit.stories.tsx
rename to Source/Chat/Kit/ChatKit.stories.tsx
index 2273b2d7..bf294fbf 100644
--- a/Source/Canvas/shapes/ChatBubble/ChatKit.stories.tsx
+++ b/Source/Chat/Kit/ChatKit.stories.tsx
@@ -21,7 +21,7 @@ import { ReactionPicker } from './ReactionPicker';
 import { TypingIndicator } from './TypingIndicator';
 
 const meta = {
-    title: 'Canvas/ChatKit',
+    title: 'Chat/Kit/ChatKit',
     parameters: { layout: 'centered' },
     decorators: [
         (Story) => (
@@ -55,7 +55,9 @@ const reactions: ChatMessageReaction[] = [
     },
     {
         emoji: '🎉',
-        users: [{ id: Guid.create(), name: 'Demo Participant', reactionId: Guid.create() }],
+        users: [
+            { id: Guid.create(), name: 'Demo Participant', reactionId: Guid.create() },
+        ],
     },
 ];
 const message: ChatMessage = {
diff --git a/Source/Canvas/shapes/ChatBubble/ChatMessage.ts b/Source/Chat/Kit/ChatMessage.ts
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/ChatMessage.ts
rename to Source/Chat/Kit/ChatMessage.ts
diff --git a/Source/Canvas/shapes/ChatBubble/ChatMessageAdded.ts b/Source/Chat/Kit/ChatMessageAdded.ts
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/ChatMessageAdded.ts
rename to Source/Chat/Kit/ChatMessageAdded.ts
diff --git a/Source/Canvas/shapes/ChatBubble/ChatMessageBubble.css b/Source/Chat/Kit/ChatMessageBubble.css
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/ChatMessageBubble.css
rename to Source/Chat/Kit/ChatMessageBubble.css
diff --git a/Source/Canvas/shapes/ChatBubble/ChatMessageBubble.tsx b/Source/Chat/Kit/ChatMessageBubble.tsx
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/ChatMessageBubble.tsx
rename to Source/Chat/Kit/ChatMessageBubble.tsx
diff --git a/Source/Canvas/shapes/ChatBubble/ChatMessageReaction.ts b/Source/Chat/Kit/ChatMessageReaction.ts
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/ChatMessageReaction.ts
rename to Source/Chat/Kit/ChatMessageReaction.ts
diff --git a/Source/Canvas/shapes/ChatBubble/ChatMessageReactionUser.ts b/Source/Chat/Kit/ChatMessageReactionUser.ts
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/ChatMessageReactionUser.ts
rename to Source/Chat/Kit/ChatMessageReactionUser.ts
diff --git a/Source/Canvas/shapes/ChatBubble/ChatOwnReaction.ts b/Source/Chat/Kit/ChatOwnReaction.ts
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/ChatOwnReaction.ts
rename to Source/Chat/Kit/ChatOwnReaction.ts
diff --git a/Source/Canvas/shapes/ChatBubble/ChatTypingAuthor.ts b/Source/Chat/Kit/ChatTypingAuthor.ts
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/ChatTypingAuthor.ts
rename to Source/Chat/Kit/ChatTypingAuthor.ts
diff --git a/Source/Canvas/shapes/ChatBubble/ChatVariant.ts b/Source/Chat/Kit/ChatVariant.ts
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/ChatVariant.ts
rename to Source/Chat/Kit/ChatVariant.ts
diff --git a/Source/Canvas/shapes/ChatBubble/Emoji/EmojiCategory.ts b/Source/Chat/Kit/Emoji/EmojiCategory.ts
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/Emoji/EmojiCategory.ts
rename to Source/Chat/Kit/Emoji/EmojiCategory.ts
diff --git a/Source/Canvas/shapes/ChatBubble/Emoji/EmojiCategoryKey.ts b/Source/Chat/Kit/Emoji/EmojiCategoryKey.ts
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/Emoji/EmojiCategoryKey.ts
rename to Source/Chat/Kit/Emoji/EmojiCategoryKey.ts
diff --git a/Source/Canvas/shapes/ChatBubble/Emoji/EmojiMemory.ts b/Source/Chat/Kit/Emoji/EmojiMemory.ts
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/Emoji/EmojiMemory.ts
rename to Source/Chat/Kit/Emoji/EmojiMemory.ts
diff --git a/Source/Canvas/shapes/ChatBubble/Emoji/EmojiPicker.css b/Source/Chat/Kit/Emoji/EmojiPicker.css
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/Emoji/EmojiPicker.css
rename to Source/Chat/Kit/Emoji/EmojiPicker.css
diff --git a/Source/Canvas/shapes/ChatBubble/Emoji/EmojiPicker.tsx b/Source/Chat/Kit/Emoji/EmojiPicker.tsx
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/Emoji/EmojiPicker.tsx
rename to Source/Chat/Kit/Emoji/EmojiPicker.tsx
diff --git a/Source/Canvas/shapes/ChatBubble/Emoji/emojiCatalog.ts b/Source/Chat/Kit/Emoji/emojiCatalog.ts
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/Emoji/emojiCatalog.ts
rename to Source/Chat/Kit/Emoji/emojiCatalog.ts
diff --git a/Source/Canvas/shapes/ChatBubble/Emoji/for_recentEmojis/given/a_memory.ts b/Source/Chat/Kit/Emoji/for_recentEmojis/given/a_memory.ts
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/Emoji/for_recentEmojis/given/a_memory.ts
rename to Source/Chat/Kit/Emoji/for_recentEmojis/given/a_memory.ts
diff --git a/Source/Canvas/shapes/ChatBubble/Emoji/for_recentEmojis/when_offering_the_quick_row/and_nothing_has_been_used_yet.ts b/Source/Chat/Kit/Emoji/for_recentEmojis/when_offering_the_quick_row/and_nothing_has_been_used_yet.ts
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/Emoji/for_recentEmojis/when_offering_the_quick_row/and_nothing_has_been_used_yet.ts
rename to Source/Chat/Kit/Emoji/for_recentEmojis/when_offering_the_quick_row/and_nothing_has_been_used_yet.ts
diff --git a/Source/Canvas/shapes/ChatBubble/Emoji/for_recentEmojis/when_offering_the_quick_row/and_the_history_cannot_be_read.ts b/Source/Chat/Kit/Emoji/for_recentEmojis/when_offering_the_quick_row/and_the_history_cannot_be_read.ts
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/Emoji/for_recentEmojis/when_offering_the_quick_row/and_the_history_cannot_be_read.ts
rename to Source/Chat/Kit/Emoji/for_recentEmojis/when_offering_the_quick_row/and_the_history_cannot_be_read.ts
diff --git a/Source/Canvas/shapes/ChatBubble/Emoji/for_recentEmojis/when_remembering_an_emoji/and_it_has_been_used_before.ts b/Source/Chat/Kit/Emoji/for_recentEmojis/when_remembering_an_emoji/and_it_has_been_used_before.ts
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/Emoji/for_recentEmojis/when_remembering_an_emoji/and_it_has_been_used_before.ts
rename to Source/Chat/Kit/Emoji/for_recentEmojis/when_remembering_an_emoji/and_it_has_been_used_before.ts
diff --git a/Source/Canvas/shapes/ChatBubble/Emoji/for_recentEmojis/when_remembering_an_emoji/and_it_is_a_new_one.ts b/Source/Chat/Kit/Emoji/for_recentEmojis/when_remembering_an_emoji/and_it_is_a_new_one.ts
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/Emoji/for_recentEmojis/when_remembering_an_emoji/and_it_is_a_new_one.ts
rename to Source/Chat/Kit/Emoji/for_recentEmojis/when_remembering_an_emoji/and_it_is_a_new_one.ts
diff --git a/Source/Canvas/shapes/ChatBubble/Emoji/for_recentEmojis/when_remembering_an_emoji/and_more_have_been_used_than_the_row_holds.ts b/Source/Chat/Kit/Emoji/for_recentEmojis/when_remembering_an_emoji/and_more_have_been_used_than_the_row_holds.ts
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/Emoji/for_recentEmojis/when_remembering_an_emoji/and_more_have_been_used_than_the_row_holds.ts
rename to Source/Chat/Kit/Emoji/for_recentEmojis/when_remembering_an_emoji/and_more_have_been_used_than_the_row_holds.ts
diff --git a/Source/Canvas/shapes/ChatBubble/Emoji/for_recentEmojis/when_remembering_an_emoji/and_storage_refuses_to_keep_it.ts b/Source/Chat/Kit/Emoji/for_recentEmojis/when_remembering_an_emoji/and_storage_refuses_to_keep_it.ts
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/Emoji/for_recentEmojis/when_remembering_an_emoji/and_storage_refuses_to_keep_it.ts
rename to Source/Chat/Kit/Emoji/for_recentEmojis/when_remembering_an_emoji/and_storage_refuses_to_keep_it.ts
diff --git a/Source/Canvas/shapes/ChatBubble/Emoji/index.ts b/Source/Chat/Kit/Emoji/index.ts
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/Emoji/index.ts
rename to Source/Chat/Kit/Emoji/index.ts
diff --git a/Source/Canvas/shapes/ChatBubble/Emoji/recentEmojis.ts b/Source/Chat/Kit/Emoji/recentEmojis.ts
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/Emoji/recentEmojis.ts
rename to Source/Chat/Kit/Emoji/recentEmojis.ts
diff --git a/Source/Canvas/shapes/ChatBubble/FailedReply.css b/Source/Chat/Kit/FailedReply.css
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/FailedReply.css
rename to Source/Chat/Kit/FailedReply.css
diff --git a/Source/Canvas/shapes/ChatBubble/FailedReply.tsx b/Source/Chat/Kit/FailedReply.tsx
similarity index 99%
rename from Source/Canvas/shapes/ChatBubble/FailedReply.tsx
rename to Source/Chat/Kit/FailedReply.tsx
index fd2160e9..4ce3bbf2 100644
--- a/Source/Canvas/shapes/ChatBubble/FailedReply.tsx
+++ b/Source/Chat/Kit/FailedReply.tsx
@@ -3,7 +3,7 @@
 
 import { useState } from 'react';
 import { DialogButtons } from '@cratis/arc.react/dialogs';
-import { Dialog } from '../../../Dialogs/Dialog';
+import { Dialog } from '../../Dialogs/Dialog';
 import type { ChatMessage } from './ChatMessage';
 import { FaTriangleExclamation } from 'react-icons/fa6';
 
diff --git a/Source/Canvas/shapes/ChatBubble/Mentions/MentionCandidate.ts b/Source/Chat/Kit/Mentions/MentionCandidate.ts
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/Mentions/MentionCandidate.ts
rename to Source/Chat/Kit/Mentions/MentionCandidate.ts
diff --git a/Source/Canvas/shapes/ChatBubble/Mentions/MentionQuery.ts b/Source/Chat/Kit/Mentions/MentionQuery.ts
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/Mentions/MentionQuery.ts
rename to Source/Chat/Kit/Mentions/MentionQuery.ts
diff --git a/Source/Canvas/shapes/ChatBubble/Mentions/MentionSuggestions.css b/Source/Chat/Kit/Mentions/MentionSuggestions.css
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/Mentions/MentionSuggestions.css
rename to Source/Chat/Kit/Mentions/MentionSuggestions.css
diff --git a/Source/Canvas/shapes/ChatBubble/Mentions/MentionSuggestions.tsx b/Source/Chat/Kit/Mentions/MentionSuggestions.tsx
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/Mentions/MentionSuggestions.tsx
rename to Source/Chat/Kit/Mentions/MentionSuggestions.tsx
diff --git a/Source/Canvas/shapes/ChatBubble/Mentions/activeMentionQuery.ts b/Source/Chat/Kit/Mentions/activeMentionQuery.ts
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/Mentions/activeMentionQuery.ts
rename to Source/Chat/Kit/Mentions/activeMentionQuery.ts
diff --git a/Source/Canvas/shapes/ChatBubble/Mentions/applyMention.ts b/Source/Chat/Kit/Mentions/applyMention.ts
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/Mentions/applyMention.ts
rename to Source/Chat/Kit/Mentions/applyMention.ts
diff --git a/Source/Canvas/shapes/ChatBubble/Mentions/extractMentions.ts b/Source/Chat/Kit/Mentions/extractMentions.ts
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/Mentions/extractMentions.ts
rename to Source/Chat/Kit/Mentions/extractMentions.ts
diff --git a/Source/Canvas/shapes/ChatBubble/Mentions/findMentionRanges.ts b/Source/Chat/Kit/Mentions/findMentionRanges.ts
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/Mentions/findMentionRanges.ts
rename to Source/Chat/Kit/Mentions/findMentionRanges.ts
diff --git a/Source/Canvas/shapes/ChatBubble/Mentions/for_activeMentionQuery/when_the_caret_is_inside_a_mention.ts b/Source/Chat/Kit/Mentions/for_activeMentionQuery/when_the_caret_is_inside_a_mention.ts
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/Mentions/for_activeMentionQuery/when_the_caret_is_inside_a_mention.ts
rename to Source/Chat/Kit/Mentions/for_activeMentionQuery/when_the_caret_is_inside_a_mention.ts
diff --git a/Source/Canvas/shapes/ChatBubble/Mentions/for_activeMentionQuery/when_the_caret_is_not_inside_a_mention.ts b/Source/Chat/Kit/Mentions/for_activeMentionQuery/when_the_caret_is_not_inside_a_mention.ts
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/Mentions/for_activeMentionQuery/when_the_caret_is_not_inside_a_mention.ts
rename to Source/Chat/Kit/Mentions/for_activeMentionQuery/when_the_caret_is_not_inside_a_mention.ts
diff --git a/Source/Canvas/shapes/ChatBubble/Mentions/for_applyMention/when_inserting_the_chosen_name.ts b/Source/Chat/Kit/Mentions/for_applyMention/when_inserting_the_chosen_name.ts
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/Mentions/for_applyMention/when_inserting_the_chosen_name.ts
rename to Source/Chat/Kit/Mentions/for_applyMention/when_inserting_the_chosen_name.ts
diff --git a/Source/Canvas/shapes/ChatBubble/Mentions/for_extractMentions/when_extracting_who_a_message_mentions.ts b/Source/Chat/Kit/Mentions/for_extractMentions/when_extracting_who_a_message_mentions.ts
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/Mentions/for_extractMentions/when_extracting_who_a_message_mentions.ts
rename to Source/Chat/Kit/Mentions/for_extractMentions/when_extracting_who_a_message_mentions.ts
diff --git a/Source/Canvas/shapes/ChatBubble/Mentions/for_findMentionRanges/when_finding_mentions_in_a_text.ts b/Source/Chat/Kit/Mentions/for_findMentionRanges/when_finding_mentions_in_a_text.ts
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/Mentions/for_findMentionRanges/when_finding_mentions_in_a_text.ts
rename to Source/Chat/Kit/Mentions/for_findMentionRanges/when_finding_mentions_in_a_text.ts
diff --git a/Source/Canvas/shapes/ChatBubble/Mentions/for_matchCandidates/when_narrowing_by_what_was_typed.ts b/Source/Chat/Kit/Mentions/for_matchCandidates/when_narrowing_by_what_was_typed.ts
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/Mentions/for_matchCandidates/when_narrowing_by_what_was_typed.ts
rename to Source/Chat/Kit/Mentions/for_matchCandidates/when_narrowing_by_what_was_typed.ts
diff --git a/Source/Canvas/shapes/ChatBubble/Mentions/for_mentionSegments/when_splitting_a_body_into_segments.ts b/Source/Chat/Kit/Mentions/for_mentionSegments/when_splitting_a_body_into_segments.ts
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/Mentions/for_mentionSegments/when_splitting_a_body_into_segments.ts
rename to Source/Chat/Kit/Mentions/for_mentionSegments/when_splitting_a_body_into_segments.ts
diff --git a/Source/Canvas/shapes/ChatBubble/Mentions/index.ts b/Source/Chat/Kit/Mentions/index.ts
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/Mentions/index.ts
rename to Source/Chat/Kit/Mentions/index.ts
diff --git a/Source/Canvas/shapes/ChatBubble/Mentions/matchCandidates.ts b/Source/Chat/Kit/Mentions/matchCandidates.ts
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/Mentions/matchCandidates.ts
rename to Source/Chat/Kit/Mentions/matchCandidates.ts
diff --git a/Source/Canvas/shapes/ChatBubble/Mentions/mentionSegments.ts b/Source/Chat/Kit/Mentions/mentionSegments.ts
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/Mentions/mentionSegments.ts
rename to Source/Chat/Kit/Mentions/mentionSegments.ts
diff --git a/Source/Canvas/shapes/ChatBubble/MessageReactions.css b/Source/Chat/Kit/MessageReactions.css
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/MessageReactions.css
rename to Source/Chat/Kit/MessageReactions.css
diff --git a/Source/Canvas/shapes/ChatBubble/MessageReactions.tsx b/Source/Chat/Kit/MessageReactions.tsx
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/MessageReactions.tsx
rename to Source/Chat/Kit/MessageReactions.tsx
diff --git a/Source/Canvas/shapes/ChatBubble/ReactionPicker.css b/Source/Chat/Kit/ReactionPicker.css
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/ReactionPicker.css
rename to Source/Chat/Kit/ReactionPicker.css
diff --git a/Source/Canvas/shapes/ChatBubble/ReactionPicker.tsx b/Source/Chat/Kit/ReactionPicker.tsx
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/ReactionPicker.tsx
rename to Source/Chat/Kit/ReactionPicker.tsx
diff --git a/Source/Canvas/shapes/ChatBubble/TypingIndicator.css b/Source/Chat/Kit/TypingIndicator.css
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/TypingIndicator.css
rename to Source/Chat/Kit/TypingIndicator.css
diff --git a/Source/Canvas/shapes/ChatBubble/TypingIndicator.tsx b/Source/Chat/Kit/TypingIndicator.tsx
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/TypingIndicator.tsx
rename to Source/Chat/Kit/TypingIndicator.tsx
diff --git a/Source/Canvas/shapes/ChatBubble/findOwnReaction.ts b/Source/Chat/Kit/findOwnReaction.ts
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/findOwnReaction.ts
rename to Source/Chat/Kit/findOwnReaction.ts
diff --git a/Source/Canvas/shapes/ChatBubble/for_ChatComposer/given/a_composer_in_the_dom.ts b/Source/Chat/Kit/for_ChatComposer/given/a_composer_in_the_dom.ts
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/for_ChatComposer/given/a_composer_in_the_dom.ts
rename to Source/Chat/Kit/for_ChatComposer/given/a_composer_in_the_dom.ts
diff --git a/Source/Canvas/shapes/ChatBubble/for_ChatComposer/when_candidates_come_from_a_provider.ts b/Source/Chat/Kit/for_ChatComposer/when_candidates_come_from_a_provider.ts
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/for_ChatComposer/when_candidates_come_from_a_provider.ts
rename to Source/Chat/Kit/for_ChatComposer/when_candidates_come_from_a_provider.ts
diff --git a/Source/Canvas/shapes/ChatBubble/for_FailedReply/when_a_turn_ended_in_failure.ts b/Source/Chat/Kit/for_FailedReply/when_a_turn_ended_in_failure.ts
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/for_FailedReply/when_a_turn_ended_in_failure.ts
rename to Source/Chat/Kit/for_FailedReply/when_a_turn_ended_in_failure.ts
diff --git a/Source/Canvas/shapes/ChatBubble/for_findOwnReaction/when_finding_the_current_users_reaction.ts b/Source/Chat/Kit/for_findOwnReaction/when_finding_the_current_users_reaction.ts
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/for_findOwnReaction/when_finding_the_current_users_reaction.ts
rename to Source/Chat/Kit/for_findOwnReaction/when_finding_the_current_users_reaction.ts
diff --git a/Source/Canvas/shapes/ChatBubble/for_reactionsExcludingUser/when_excluding_a_persons_own_reaction.ts b/Source/Chat/Kit/for_reactionsExcludingUser/when_excluding_a_persons_own_reaction.ts
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/for_reactionsExcludingUser/when_excluding_a_persons_own_reaction.ts
rename to Source/Chat/Kit/for_reactionsExcludingUser/when_excluding_a_persons_own_reaction.ts
diff --git a/Source/Chat/Kit/index.ts b/Source/Chat/Kit/index.ts
new file mode 100644
index 00000000..c1fa6898
--- /dev/null
+++ b/Source/Chat/Kit/index.ts
@@ -0,0 +1,52 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+export { Chat } from './Chat';
+export type { ChatProps, ChatLabels } from './Chat';
+export { ChatMessageAdded } from './ChatMessageAdded';
+export { ChatAuthorKind } from './ChatAuthorKind';
+export { ChatBubble } from './ChatBubble';
+export type { ChatBubbleProps } from './ChatBubble';
+export { ChatComposer } from './ChatComposer';
+export type {
+    ChatComposerProps,
+    ChatComposerHandle,
+    ChatComposerLabels,
+} from './ChatComposer';
+export type { ChatMessage } from './ChatMessage';
+export { ChatMessageBubble } from './ChatMessageBubble';
+export type {
+    ChatMessageBubbleProps,
+    ChatMessageBubbleLabels,
+} from './ChatMessageBubble';
+export type { ChatMessageReaction } from './ChatMessageReaction';
+export type { ChatMessageReactionUser } from './ChatMessageReactionUser';
+export type { ChatOwnReaction } from './ChatOwnReaction';
+export type { ChatTypingAuthor } from './ChatTypingAuthor';
+export { ChatVariant } from './ChatVariant';
+export { FailedReply } from './FailedReply';
+export type {
+    FailedReplyProps,
+    FailedReplyLabels,
+    FailedReplyReportDetails,
+} from './FailedReply';
+// A consumer that owns reaction commands can use the same current-user lookup as the
+// Components chat composition without duplicating its one-reaction-per-person rules.
+export { findOwnReaction } from './findOwnReaction';
+// `reactionsExcludingUser` remains an internal rendering helper.
+export { MessageReactions } from './MessageReactions';
+export type { MessageReactionsProps } from './MessageReactions';
+export { ReactionPicker } from './ReactionPicker';
+export type { ReactionPickerProps, ReactionPickerLabels } from './ReactionPicker';
+export { TypingIndicator } from './TypingIndicator';
+export type { TypingIndicatorProps } from './TypingIndicator';
+export { AnchoredOverlay } from './AnchoredOverlay';
+export type {
+    AnchoredOverlayProps,
+    AnchoredOverlaySide,
+    AnchoredOverlayAlign,
+} from './AnchoredOverlay';
+
+export * from './Avatar';
+export * from './Emoji';
+export * from './Mentions';
diff --git a/Source/Canvas/shapes/ChatBubble/reactionsExcludingUser.ts b/Source/Chat/Kit/reactionsExcludingUser.ts
similarity index 100%
rename from Source/Canvas/shapes/ChatBubble/reactionsExcludingUser.ts
rename to Source/Chat/Kit/reactionsExcludingUser.ts
diff --git a/Source/Chat/for_ChatConversation/when_rendering_a_body_with_mentions.ts b/Source/Chat/for_ChatConversation/when_rendering_a_body_with_mentions.ts
index b9e9f3ef..5c47943b 100644
--- a/Source/Chat/for_ChatConversation/when_rendering_a_body_with_mentions.ts
+++ b/Source/Chat/for_ChatConversation/when_rendering_a_body_with_mentions.ts
@@ -4,7 +4,7 @@
 // @vitest-environment jsdom
 
 import { createElement } from 'react';
-import { ChatAuthorKind } from '../../Canvas/shapes/ChatBubble/ChatAuthorKind';
+import { ChatAuthorKind } from '../Kit/ChatAuthorKind';
 import { ChatConversation } from '../ChatConversation';
 import type { ChatMessage } from '../ChatMessage';
 import {
diff --git a/Source/Chat/for_ChatConversation/when_sending_a_message.ts b/Source/Chat/for_ChatConversation/when_sending_a_message.ts
index c9f048e0..d90a65d0 100644
--- a/Source/Chat/for_ChatConversation/when_sending_a_message.ts
+++ b/Source/Chat/for_ChatConversation/when_sending_a_message.ts
@@ -4,7 +4,7 @@
 // @vitest-environment jsdom
 
 import { createElement } from 'react';
-import { ChatAuthorKind } from '../../Canvas/shapes/ChatBubble/ChatAuthorKind';
+import { ChatAuthorKind } from '../Kit/ChatAuthorKind';
 import { ChatConversation } from '../ChatConversation';
 import type { ChatMention } from '../ChatMention';
 import {
diff --git a/Source/Chat/for_ChatSidebar/when_moving_between_topics_and_conversation.ts b/Source/Chat/for_ChatSidebar/when_moving_between_topics_and_conversation.ts
index 7c405743..af9ffbf1 100644
--- a/Source/Chat/for_ChatSidebar/when_moving_between_topics_and_conversation.ts
+++ b/Source/Chat/for_ChatSidebar/when_moving_between_topics_and_conversation.ts
@@ -4,7 +4,7 @@
 // @vitest-environment jsdom
 
 import { createElement } from 'react';
-import { ChatAuthorKind } from '../../Canvas/shapes/ChatBubble/ChatAuthorKind';
+import { ChatAuthorKind } from '../Kit/ChatAuthorKind';
 import { ChatSidebar } from '../ChatSidebar';
 import type { ChatIdentifier } from '../ChatIdentifier';
 import type { ChatMessage } from '../ChatMessage';
diff --git a/Source/Chat/for_ChatTopicList/when_a_topic_is_picked.ts b/Source/Chat/for_ChatTopicList/when_a_topic_is_picked.ts
index 03f51656..4f60c133 100644
--- a/Source/Chat/for_ChatTopicList/when_a_topic_is_picked.ts
+++ b/Source/Chat/for_ChatTopicList/when_a_topic_is_picked.ts
@@ -4,7 +4,7 @@
 // @vitest-environment jsdom
 
 import { createElement } from 'react';
-import { ChatAuthorKind } from '../../Canvas/shapes/ChatBubble/ChatAuthorKind';
+import { ChatAuthorKind } from '../Kit/ChatAuthorKind';
 import { ChatTopicList } from '../ChatTopicList';
 import type { ChatTopic } from '../ChatTopic';
 import {
diff --git a/Source/Chat/index.ts b/Source/Chat/index.ts
index 4420b268..4dce44d0 100644
--- a/Source/Chat/index.ts
+++ b/Source/Chat/index.ts
@@ -30,17 +30,9 @@ export { topicsByActivity } from './topicsByActivity';
 
 // The pieces of the conversation kit the chat builds on, re-exported so a host consuming
 // `@cratis/components/Chat` has the whole contract in one place.
-export { ChatAuthorKind } from '../Canvas/shapes/ChatBubble/ChatAuthorKind';
-export type { ChatTypingAuthor } from '../Canvas/shapes/ChatBubble/ChatTypingAuthor';
-export type { BuildAvatarUrlParams } from '../Canvas/shapes/ChatBubble/Avatar';
-export type { ChatComposerLabels } from '../Canvas/shapes/ChatBubble/ChatComposer';
-export {
-    extractMentions,
-    findMentionRanges,
-    mentionSegments,
-} from '../Canvas/shapes/ChatBubble/Mentions';
-export type {
-    MentionCandidate,
-    MentionRange,
-    MentionSegment,
-} from '../Canvas/shapes/ChatBubble/Mentions';
+export { ChatAuthorKind } from './Kit/ChatAuthorKind';
+export type { ChatTypingAuthor } from './Kit/ChatTypingAuthor';
+export type { BuildAvatarUrlParams } from './Kit/Avatar';
+export type { ChatComposerLabels } from './Kit/ChatComposer';
+export { extractMentions, findMentionRanges, mentionSegments } from './Kit/Mentions';
+export type { MentionCandidate, MentionRange, MentionSegment } from './Kit/Mentions';
diff --git a/Source/Canvas/messaging/useOptionalMessenger.ts b/Source/Common/messaging/useOptionalMessenger.ts
similarity index 100%
rename from Source/Canvas/messaging/useOptionalMessenger.ts
rename to Source/Common/messaging/useOptionalMessenger.ts
diff --git a/Source/for_root_architecture/when_the_chat_kit_is_shared.ts b/Source/for_root_architecture/when_the_chat_kit_is_shared.ts
new file mode 100644
index 00000000..bb59792a
--- /dev/null
+++ b/Source/for_root_architecture/when_the_chat_kit_is_shared.ts
@@ -0,0 +1,108 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { readdirSync, readFileSync } from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { expect } from 'chai';
+import { describe, it } from 'vitest';
+
+/**
+ * Source-level regression for the `./Chat` / `./Canvas` shared-kit boundary
+ * (Cratis/Components#118-adjacent architecture rule, enforced at the built-artifact level by
+ * `scripts/verify-package-graph.mjs`). The generic, Pixi-free chat kit — bubbles, composer,
+ * avatar, mentions, emoji, typing indicator — lives at `Source/Chat/Kit`, the shared home both
+ * the non-spatial `./Chat` subpath and the spatial `./Canvas` subpath build on. `./Chat` must
+ * never physically reach a file under `Canvas/` or `PivotViewer/`: doing so would give the
+ * non-spatial subpath a spatial edge, which the built-artifact check rejects.
+ *
+ * This spec catches that regression from source, before a build is even required, by scanning
+ * every relative import/export/dynamic-import specifier under `Source/Chat` for one that resolves
+ * into `Canvas/` or `PivotViewer/`.
+ */
+
+const sourceRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const chatRoot = path.join(sourceRoot, 'Chat');
+
+const SPATIAL_DIRECTORIES = ['Canvas', 'PivotViewer'];
+
+/** Every `.ts`/`.tsx` file under `Source/Chat`, recursively. */
+function collectSourceFiles(directory: string, found: string[] = []): string[] {
+    for (const entry of readdirSync(directory, { withFileTypes: true })) {
+        const entryPath = path.join(directory, entry.name);
+        if (entry.isDirectory()) collectSourceFiles(entryPath, found);
+        else if (/\.tsx?$/u.test(entry.name)) found.push(entryPath);
+    }
+    return found;
+}
+
+/** Relative `from '...'`, `import('...')`, and `require('...')` specifiers in a file's source. */
+function relativeSpecifiers(source: string): string[] {
+    const specifiers: string[] = [];
+    const pattern = /(?:from|import|require)\s*\(?\s*['"]([^'"]+)['"]/gu;
+    let match: RegExpExecArray | null;
+    while ((match = pattern.exec(source)) !== null) {
+        const specifier = match[1];
+        if (specifier.startsWith('.')) specifiers.push(specifier);
+    }
+    return specifiers;
+}
+
+const chatFiles = collectSourceFiles(chatRoot);
+
+describe('when the chat kit is shared between ./Chat and ./Canvas', () => {
+    it('should_find_chat_source_files_to_check', () => {
+        expect(chatFiles.length).to.be.greaterThan(0);
+    });
+
+    it('should_never_let_a_chat_source_file_physically_reach_canvas_or_pivotviewer', () => {
+        const violations: string[] = [];
+        for (const file of chatFiles) {
+            for (const specifier of relativeSpecifiers(readFileSync(file, 'utf8'))) {
+                const resolved = path
+                    .resolve(path.dirname(file), specifier)
+                    .split(path.sep)
+                    .join('/');
+                const relativeToSource = path
+                    .relative(sourceRoot, resolved)
+                    .split(path.sep)
+                    .join('/');
+                if (
+                    SPATIAL_DIRECTORIES.some(
+                        (directory) =>
+                            relativeToSource === directory ||
+                            relativeToSource.startsWith(`${directory}/`),
+                    )
+                ) {
+                    violations.push(`${path.relative(sourceRoot, file)} -> ${specifier}`);
+                }
+            }
+        }
+        expect(violations, violations.join('\n')).to.deep.equal([]);
+    });
+
+    it('should_keep_the_shared_chat_kit_at_its_canonical_non_spatial_home', () => {
+        const kitIndex = path.join(chatRoot, 'Kit', 'index.ts');
+        expect(() => readFileSync(kitIndex, 'utf8')).to.not.throw();
+    });
+
+    it('should_keep_a_compatibility_barrel_at_the_former_canvas_chatbubble_path', () => {
+        const shimPath = path.join(
+            sourceRoot,
+            'Canvas',
+            'shapes',
+            'ChatBubble',
+            'index.ts',
+        );
+        const shim = readFileSync(shimPath, 'utf8');
+        expect(shim).to.include("from '../../../Chat/Kit'");
+    });
+
+    it('should_have_canvas_consume_the_same_canonical_kit_as_chat', () => {
+        const canvasIndex = readFileSync(
+            path.join(sourceRoot, 'Canvas', 'index.ts'),
+            'utf8',
+        );
+        expect(canvasIndex).to.include("from '../Chat/Kit'");
+    });
+});
diff --git a/Source/styles.css b/Source/styles.css
index c13e030b..bc9556a9 100644
--- a/Source/styles.css
+++ b/Source/styles.css
@@ -30,22 +30,22 @@
 @import 'allotment/dist/style.css';
 
 @import './Canvas/Canvas.css';
-@import './Canvas/shapes/ChatBubble/Avatar/PersonAvatarCircle.css';
-@import './Canvas/shapes/ChatBubble/Chat.css';
-@import './Canvas/shapes/ChatBubble/ChatBubble.css';
-@import './Canvas/shapes/ChatBubble/ChatComposer.css';
-@import './Canvas/shapes/ChatBubble/ChatMessageBubble.css';
-@import './Canvas/shapes/ChatBubble/Emoji/EmojiPicker.css';
-@import './Canvas/shapes/ChatBubble/FailedReply.css';
-@import './Canvas/shapes/ChatBubble/Mentions/MentionSuggestions.css';
-@import './Canvas/shapes/ChatBubble/MessageReactions.css';
-@import './Canvas/shapes/ChatBubble/ReactionPicker.css';
-@import './Canvas/shapes/ChatBubble/TypingIndicator.css';
 @import './Canvas/shapes/Note/Note.css';
 @import './Canvas/shapes/Region/Region.css';
 @import './Chat/ChatConversation.css';
 @import './Chat/ChatSidebar.css';
 @import './Chat/ChatTopicList.css';
+@import './Chat/Kit/Avatar/PersonAvatarCircle.css';
+@import './Chat/Kit/Chat.css';
+@import './Chat/Kit/ChatBubble.css';
+@import './Chat/Kit/ChatComposer.css';
+@import './Chat/Kit/ChatMessageBubble.css';
+@import './Chat/Kit/Emoji/EmojiPicker.css';
+@import './Chat/Kit/FailedReply.css';
+@import './Chat/Kit/Mentions/MentionSuggestions.css';
+@import './Chat/Kit/MessageReactions.css';
+@import './Chat/Kit/ReactionPicker.css';
+@import './Chat/Kit/TypingIndicator.css';
 @import './CommandDialog/CommandStepper.css';
 @import './CommandForm/fields/Fields.css';
 @import './Common/ActionMenubar.css';

From 30c1abb5cb3816ed299405c15035e3568d438647 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 11:06:30 +0200
Subject: [PATCH 129/267] Fix Chat semantic lists and theme contrast

Render topics as a real list and use semantic text/highlight tokens throughout Chat stories and failure/typing surfaces so both maintained appearances pass axe contrast checks.
---
 Source/Chat/ChatConversation.css    |   2 +-
 Source/Chat/ChatTopicList.css       |   3 +
 Source/Chat/ChatTopicList.tsx       | 102 ++++++++++++++--------------
 Source/Chat/Kit/Chat.css            |   2 +-
 Source/Chat/Kit/ChatKit.stories.tsx |  10 +--
 Source/Chat/Kit/FailedReply.css     |   2 +-
 6 files changed, 63 insertions(+), 58 deletions(-)

diff --git a/Source/Chat/ChatConversation.css b/Source/Chat/ChatConversation.css
index 8dc091f6..749acfbe 100644
--- a/Source/Chat/ChatConversation.css
+++ b/Source/Chat/ChatConversation.css
@@ -74,7 +74,7 @@
 }
 
 .cratis-chat-message__mention {
-    color: var(--cratis-primary-color);
+    color: var(--cratis-highlight-text-color);
     background: var(--cratis-highlight-bg);
     border-radius: 4px;
     padding: 0 0.2em;
diff --git a/Source/Chat/ChatTopicList.css b/Source/Chat/ChatTopicList.css
index 96d2e00d..2f550832 100644
--- a/Source/Chat/ChatTopicList.css
+++ b/Source/Chat/ChatTopicList.css
@@ -44,6 +44,9 @@
     display: flex;
     flex-direction: column;
     gap: 2px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
 }
 
 .cratis-chat-topics__topic {
diff --git a/Source/Chat/ChatTopicList.tsx b/Source/Chat/ChatTopicList.tsx
index 59ff0711..97647fc1 100644
--- a/Source/Chat/ChatTopicList.tsx
+++ b/Source/Chat/ChatTopicList.tsx
@@ -145,7 +145,7 @@ export const ChatTopicList = <TTopic extends ChatTopic = ChatTopic>({
                     {labels?.empty ?? 'No topics yet. Start the first one!'}
                 </p>
             )}
-            <div className='cratis-chat-topics__list' role='list'>
+            <ul className='cratis-chat-topics__list'>
                 {topicsByActivity(topics).map((topic) => {
                     const starter =
                         topic.startedBy === undefined
@@ -155,61 +155,61 @@ export const ChatTopicList = <TTopic extends ChatTopic = ChatTopic>({
                     const activity = topic.lastActivity ?? topic.started;
 
                     return (
-                        <button
-                            key={chatIdentifierString(topic.id)}
-                            type='button'
-                            role='listitem'
-                            className='cratis-chat-topics__topic'
-                            onClick={() => onOpen(topic)}
-                        >
-                            {topic.startedBy !== undefined &&
-                                starter &&
-                                (renderAvatar ? (
-                                    renderAvatar(topic.startedBy, starter)
-                                ) : (
-                                    <PersonAvatarCircle
-                                        userId={chatIdentifierString(topic.startedBy)}
-                                        name={starter.name}
-                                        hasAvatar={starter.hasAvatar ?? false}
-                                        size={28}
-                                        ownerType={
-                                            starter.kind === ChatAuthorKind.Agent
-                                                ? 'Agents'
-                                                : 'Users'
-                                        }
-                                        version={starter.avatarVersion}
-                                        buildAvatarUrl={buildAvatarUrl}
-                                    />
-                                ))}
-                            <span className='cratis-chat-topics__details'>
-                                <span
-                                    className={`cratis-chat-topics__name${isPending ? ' cratis-chat-topics__name--pending' : ''}`}
-                                >
-                                    {isPending
-                                        ? (labels?.unnamedTopic ?? 'New topic')
-                                        : topic.name}
-                                </span>
-                                {starter && (
-                                    <span className='cratis-chat-topics__started-by'>
-                                        {(
-                                            labels?.startedBy ?? 'Started by {name}'
-                                        ).replace('{name}', starter.name)}
+                        <li key={chatIdentifierString(topic.id)}>
+                            <button
+                                type='button'
+                                className='cratis-chat-topics__topic'
+                                onClick={() => onOpen(topic)}
+                            >
+                                {topic.startedBy !== undefined &&
+                                    starter &&
+                                    (renderAvatar ? (
+                                        renderAvatar(topic.startedBy, starter)
+                                    ) : (
+                                        <PersonAvatarCircle
+                                            userId={chatIdentifierString(topic.startedBy)}
+                                            name={starter.name}
+                                            hasAvatar={starter.hasAvatar ?? false}
+                                            size={28}
+                                            ownerType={
+                                                starter.kind === ChatAuthorKind.Agent
+                                                    ? 'Agents'
+                                                    : 'Users'
+                                            }
+                                            version={starter.avatarVersion}
+                                            buildAvatarUrl={buildAvatarUrl}
+                                        />
+                                    ))}
+                                <span className='cratis-chat-topics__details'>
+                                    <span
+                                        className={`cratis-chat-topics__name${isPending ? ' cratis-chat-topics__name--pending' : ''}`}
+                                    >
+                                        {isPending
+                                            ? (labels?.unnamedTopic ?? 'New topic')
+                                            : topic.name}
                                     </span>
-                                )}
-                            </span>
-                            {activity !== undefined && (
-                                <span className='cratis-chat-topics__activity'>
-                                    {relativeTimestamp(
-                                        activity,
-                                        new Date(),
-                                        labels?.timestamps,
+                                    {starter && (
+                                        <span className='cratis-chat-topics__started-by'>
+                                            {(
+                                                labels?.startedBy ?? 'Started by {name}'
+                                            ).replace('{name}', starter.name)}
+                                        </span>
                                     )}
                                 </span>
-                            )}
-                        </button>
+                                {activity !== undefined && (
+                                    <span className='cratis-chat-topics__activity'>
+                                        {relativeTimestamp(
+                                            activity,
+                                            new Date(),
+                                            labels?.timestamps,
+                                        )}
+                                    </span>
+                                )}
+                            </button>
+                        </li>
                     );
                 })}
-            </div>
+            </ul>
         </div>
     );
 };
diff --git a/Source/Chat/Kit/Chat.css b/Source/Chat/Kit/Chat.css
index 87a087e8..98f0b09b 100644
--- a/Source/Chat/Kit/Chat.css
+++ b/Source/Chat/Kit/Chat.css
@@ -115,7 +115,7 @@
 
 .chat-bubble-time {
     font-size: 10px;
-    color: rgba(255, 255, 255, 0.65);
+    color: var(--cratis-text-color-secondary);
     padding-left: 2px;
 }
 
diff --git a/Source/Chat/Kit/ChatKit.stories.tsx b/Source/Chat/Kit/ChatKit.stories.tsx
index bf294fbf..0959ab71 100644
--- a/Source/Chat/Kit/ChatKit.stories.tsx
+++ b/Source/Chat/Kit/ChatKit.stories.tsx
@@ -29,8 +29,9 @@ const meta = {
                 style={{
                     padding: '1.5rem',
                     borderRadius: '0.75rem',
-                    background: '#15151f',
-                    color: 'rgba(255, 255, 255, 0.9)',
+                    background: 'var(--cratis-surface-overlay)',
+                    color: 'var(--cratis-text-color)',
+                    border: '1px solid var(--cratis-surface-border)',
                 }}
             >
                 <Story />
@@ -99,8 +100,9 @@ const AnchoredOverlayDemo = () => {
                     style={{
                         padding: '0.75rem',
                         borderRadius: '0.5rem',
-                        background: '#262637',
-                        color: 'rgba(255, 255, 255, 0.9)',
+                        background: 'var(--cratis-surface-overlay)',
+                        color: 'var(--cratis-text-color)',
+                        border: '1px solid var(--cratis-surface-border)',
                     }}
                 >
                     Portaled beyond the board boundary
diff --git a/Source/Chat/Kit/FailedReply.css b/Source/Chat/Kit/FailedReply.css
index 0f8fde81..30536089 100644
--- a/Source/Chat/Kit/FailedReply.css
+++ b/Source/Chat/Kit/FailedReply.css
@@ -42,7 +42,7 @@
     border: none;
     padding: 0;
     font-size: 11px;
-    color: var(--cratis-text-color-secondary);
+    color: var(--cratis-text-color);
     text-decoration: underline;
     cursor: pointer;
 }

From 5247f94bc6352f0314daafb1e14d9bfd5e3c1256 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 11:33:41 +0200
Subject: [PATCH 130/267] Add Chat root namespace migration

---
 Codemods/lib/namespaceMap.js      | 1 +
 Documentation/Migration/3-to-4.md | 1 +
 ESLint/lib/rootNamespaceMap.js    | 1 +
 Source/MIGRATION.md               | 1 +
 4 files changed, 4 insertions(+)

diff --git a/Codemods/lib/namespaceMap.js b/Codemods/lib/namespaceMap.js
index 67f6607c..d9ddea38 100644
--- a/Codemods/lib/namespaceMap.js
+++ b/Codemods/lib/namespaceMap.js
@@ -25,6 +25,7 @@ export const packageName = '@cratis/components';
  */
 export const namespaceSubpaths = {
     Canvas: 'Canvas',
+    Chat: 'Chat',
     CommandDialog: 'CommandDialog',
     // The former root CommandStepper namespace aliased the entire CommandDialog module.
     // Preserve that module identity; the narrower ./CommandStepper subpath does not.
diff --git a/Documentation/Migration/3-to-4.md b/Documentation/Migration/3-to-4.md
index b03db2dd..4e362f67 100644
--- a/Documentation/Migration/3-to-4.md
+++ b/Documentation/Migration/3-to-4.md
@@ -61,6 +61,7 @@ This is an intentional Components 4 breaking change. The package root now expose
 | Removed Components 3 root namespace | Components 4 subpath                                      | Namespace-preserving migration                                                      | Named migration                                                                    |
 | ----------------------------------- | --------------------------------------------------------- | ----------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
 | `Canvas`                            | `@cratis/components/Canvas`                               | `import * as Canvas from '@cratis/components/Canvas'`                               | `import { Canvas, CanvasItem } from '@cratis/components/Canvas'`                   |
+| `Chat`                              | `@cratis/components/Chat`                                 | `import * as Chat from '@cratis/components/Chat'`                                   | `import { ChatSidebar, ChatConversation } from '@cratis/components/Chat'`          |
 | `CommandDialog`                     | `@cratis/components/CommandDialog`                        | `import * as CommandDialog from '@cratis/components/CommandDialog'`                 | `import { CommandDialog } from '@cratis/components/CommandDialog'`                 |
 | `CommandStepper` †                  | `@cratis/components/CommandDialog` (namespace-preserving) | `import * as CommandStepper from '@cratis/components/CommandDialog'`                | `import { CommandStepper } from '@cratis/components/CommandStepper'`               |
 | `CommandForm`                       | `@cratis/components/CommandForm`                          | `import * as CommandForm from '@cratis/components/CommandForm'`                     | `import { AutoCommandForm, InputTextField } from '@cratis/components/CommandForm'` |
diff --git a/ESLint/lib/rootNamespaceMap.js b/ESLint/lib/rootNamespaceMap.js
index 3beada9f..de995951 100644
--- a/ESLint/lib/rootNamespaceMap.js
+++ b/ESLint/lib/rootNamespaceMap.js
@@ -22,6 +22,7 @@
  */
 export const namespaceSubpaths = {
     Canvas: 'Canvas',
+    Chat: 'Chat',
     CommandDialog: 'CommandDialog',
     // The former root CommandStepper namespace aliased the entire CommandDialog module.
     // Preserve that module identity; the narrower ./CommandStepper subpath does not.
diff --git a/Source/MIGRATION.md b/Source/MIGRATION.md
index bd39449c..fadd7bec 100644
--- a/Source/MIGRATION.md
+++ b/Source/MIGRATION.md
@@ -58,6 +58,7 @@ This is an intentional Components 4 breaking change. The package root now expose
 | Removed Components 3 root namespace | Components 4 subpath                                      | Namespace-preserving migration                                                      | Named migration                                                                    |
 | ----------------------------------- | --------------------------------------------------------- | ----------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
 | `Canvas`                            | `@cratis/components/Canvas`                               | `import * as Canvas from '@cratis/components/Canvas'`                               | `import { Canvas, CanvasItem } from '@cratis/components/Canvas'`                   |
+| `Chat`                              | `@cratis/components/Chat`                                 | `import * as Chat from '@cratis/components/Chat'`                                   | `import { ChatSidebar, ChatConversation } from '@cratis/components/Chat'`          |
 | `CommandDialog`                     | `@cratis/components/CommandDialog`                        | `import * as CommandDialog from '@cratis/components/CommandDialog'`                 | `import { CommandDialog } from '@cratis/components/CommandDialog'`                 |
 | `CommandStepper` †                  | `@cratis/components/CommandDialog` (namespace-preserving) | `import * as CommandStepper from '@cratis/components/CommandDialog'`                | `import { CommandStepper } from '@cratis/components/CommandStepper'`               |
 | `CommandForm`                       | `@cratis/components/CommandForm`                          | `import * as CommandForm from '@cratis/components/CommandForm'`                     | `import { AutoCommandForm, InputTextField } from '@cratis/components/CommandForm'` |

From b42e82a04e1eadb80fff193ce1539e41f4add1a7 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 11:39:12 +0200
Subject: [PATCH 131/267] Use local migration guide links

---
 Source/README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/Source/README.md b/Source/README.md
index 46168a33..eaa7a829 100644
--- a/Source/README.md
+++ b/Source/README.md
@@ -8,7 +8,7 @@ contracts, stable parts, and design tokens. React Aria supplies selected
 interaction primitives internally; consumers do not import or style React Aria.
 
 - [Canonical Components documentation](https://cratis.io/components/)
-- [Migration guide](https://github.com/Cratis/Components/blob/main/Source/MIGRATION.md)
+- [Migration guide](./MIGRATION.md)
 - [Private security reporting](mailto:oss@cratis.io?subject=Security%3A)
 
 ## Install
@@ -235,7 +235,7 @@ namespace-to-subpath mapping and migration command for existing root imports.
 ## Components 3 migration
 
 The current package manifest does not declare PrimeReact as a required runtime
-or peer. Follow the [Components 3 to 4 migration guide](https://github.com/Cratis/Components/blob/main/Source/MIGRATION.md)
+or peer. Follow the [Components 3 to 4 migration guide](./MIGRATION.md)
 for dependency removal, provider changes, product token mapping, stable part
 names, DatePicker changes, table behavior, notifications, direct Prime import
 replacements, the exact-version `@cratis/components-codemods` command, and the

From 4475eb4fb8f6e2d89ad8680afa23d66e2e013ca2 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 11:47:14 +0200
Subject: [PATCH 132/267] Pin React Aria dependency resolutions

---
 .gitignore   |    1 -
 package.json |    7 +
 yarn.lock    | 8609 ++++++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 8616 insertions(+), 1 deletion(-)
 create mode 100644 yarn.lock

diff --git a/.gitignore b/.gitignore
index 50230383..8b9475c9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -297,7 +297,6 @@ out
 !.yarn/releases
 !.yarn/sdks
 !.yarn/versions
-yarn.lock
 coverage
 .pi/
 
diff --git a/package.json b/package.json
index f1f2c6c6..25f2fa36 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,13 @@
         "ESLint",
         "Codemods"
     ],
+    "resolutions": {
+        "react-aria": "3.51.0",
+        "react-stately": "3.49.0",
+        "@internationalized/date": "3.12.3",
+        "@internationalized/string": "3.2.10",
+        "@internationalized/number": "3.6.7"
+    },
     "engines": {
         "node": ">=23.0.0"
     },
diff --git a/yarn.lock b/yarn.lock
new file mode 100644
index 00000000..7af50118
--- /dev/null
+++ b/yarn.lock
@@ -0,0 +1,8609 @@
+# This file is generated by running "yarn install" inside your project.
+# Manual changes might be lost - proceed with caution!
+
+__metadata:
+  version: 8
+  cacheKey: 10
+
+"@adobe/css-tools@npm:^4.4.0":
+  version: 4.5.0
+  resolution: "@adobe/css-tools@npm:4.5.0"
+  checksum: 10/a332050614f7e08928aba518ac65534621672590bdfc2079886e9ead90da78c7fe2498152c5083318e93ee909260ec13854c21ac77c24053f7d30c5d2d2adcc1
+  languageName: node
+  linkType: hard
+
+"@alloc/quick-lru@npm:^5.2.0":
+  version: 5.2.0
+  resolution: "@alloc/quick-lru@npm:5.2.0"
+  checksum: 10/bdc35758b552bcf045733ac047fb7f9a07c4678b944c641adfbd41f798b4b91fffd0fdc0df2578d9b0afc7b4d636aa6e110ead5d6281a2adc1ab90efd7f057f8
+  languageName: node
+  linkType: hard
+
+"@asamuzakjp/css-color@npm:^6.0.5":
+  version: 6.0.7
+  resolution: "@asamuzakjp/css-color@npm:6.0.7"
+  dependencies:
+    "@csstools/css-calc": "npm:^3.3.0"
+    "@csstools/css-color-parser": "npm:^4.1.10"
+    "@csstools/css-parser-algorithms": "npm:^4.0.0"
+    "@csstools/css-tokenizer": "npm:^4.0.0"
+    lru-cache: "npm:^11.5.2"
+  checksum: 10/c10b84318f3e4050545e19ad2caf5b5b8949b148adb99d094ca3494316323e63db3aab88b2900e449c265a51f76cab9380566cdd28242f895824221a6dccdd25
+  languageName: node
+  linkType: hard
+
+"@asamuzakjp/dom-selector@npm:^8.3.0":
+  version: 8.3.2
+  resolution: "@asamuzakjp/dom-selector@npm:8.3.2"
+  dependencies:
+    bidi-js: "npm:^1.0.3"
+    css-tree: "npm:^3.2.1"
+    is-potential-custom-element-name: "npm:^1.0.1"
+    lru-cache: "npm:^11.5.2"
+  checksum: 10/5b3d985bf38d37286217b541460b40d0f6f8d4b8361f1600dc849d0e7e019570f9f792b10f37a3ef47ef17857ca5661885563f115e8cb611bb778f268cff5439
+  languageName: node
+  linkType: hard
+
+"@babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.29.7":
+  version: 7.29.7
+  resolution: "@babel/code-frame@npm:7.29.7"
+  dependencies:
+    "@babel/helper-validator-identifier": "npm:^7.29.7"
+    js-tokens: "npm:^4.0.0"
+    picocolors: "npm:^1.1.1"
+  checksum: 10/84da552e51a55795a50b3589116edb2f9e368a647d266380683775f18effd9acd4521b0246bebd0b049a7f32af1f87b1e8475d3bcb665f876bd04ade8da99697
+  languageName: node
+  linkType: hard
+
+"@babel/compat-data@npm:^7.29.7":
+  version: 7.29.7
+  resolution: "@babel/compat-data@npm:7.29.7"
+  checksum: 10/ad2272714087f68970977f6e2b53597a8503fc9c3028c4a91686474bd77a707dd00903cdde4b73788972016d1bad4dc3fa4e5ff38e1ed8f1c3bde1095352973a
+  languageName: node
+  linkType: hard
+
+"@babel/core@npm:^7.28.0":
+  version: 7.29.7
+  resolution: "@babel/core@npm:7.29.7"
+  dependencies:
+    "@babel/code-frame": "npm:^7.29.7"
+    "@babel/generator": "npm:^7.29.7"
+    "@babel/helper-compilation-targets": "npm:^7.29.7"
+    "@babel/helper-module-transforms": "npm:^7.29.7"
+    "@babel/helpers": "npm:^7.29.7"
+    "@babel/parser": "npm:^7.29.7"
+    "@babel/template": "npm:^7.29.7"
+    "@babel/traverse": "npm:^7.29.7"
+    "@babel/types": "npm:^7.29.7"
+    "@jridgewell/remapping": "npm:^2.3.5"
+    convert-source-map: "npm:^2.0.0"
+    debug: "npm:^4.1.0"
+    gensync: "npm:^1.0.0-beta.2"
+    json5: "npm:^2.2.3"
+    semver: "npm:^6.3.1"
+  checksum: 10/38e71cf81db790b0bb2a3a0c8140c2b1c87576b61dc6be676de4fab8c3be871af590a739e8c489fe8e8f9a8e5899fa11e35e59e9e09d40b259c6a675f2f98928
+  languageName: node
+  linkType: hard
+
+"@babel/generator@npm:^7.29.7, @babel/generator@npm:^7.29.8":
+  version: 7.29.8
+  resolution: "@babel/generator@npm:7.29.8"
+  dependencies:
+    "@babel/parser": "npm:^7.29.8"
+    "@babel/types": "npm:^7.29.8"
+    "@jridgewell/gen-mapping": "npm:^0.3.12"
+    "@jridgewell/trace-mapping": "npm:^0.3.28"
+    jsesc: "npm:^3.0.2"
+  checksum: 10/679c3d1302936f391260acee4059e0c3cd5bff6341772f0b85bb142feab1a253d0e155aad0e9c8531e024d6239a2cc5169d1e294c6890901e7d4ab0f7c9eaaaa
+  languageName: node
+  linkType: hard
+
+"@babel/helper-compilation-targets@npm:^7.29.7":
+  version: 7.29.7
+  resolution: "@babel/helper-compilation-targets@npm:7.29.7"
+  dependencies:
+    "@babel/compat-data": "npm:^7.29.7"
+    "@babel/helper-validator-option": "npm:^7.29.7"
+    browserslist: "npm:^4.24.0"
+    lru-cache: "npm:^5.1.1"
+    semver: "npm:^6.3.1"
+  checksum: 10/af9ed4299ad5cfbe48432a964f37cbbfc200bbeb0f8ba9cbc86448503fa929382d5161d32096274752230c9feb919c9ef595559498833da656fc6a8e24a62383
+  languageName: node
+  linkType: hard
+
+"@babel/helper-globals@npm:^7.29.7":
+  version: 7.29.7
+  resolution: "@babel/helper-globals@npm:7.29.7"
+  checksum: 10/e53203e87ae24a45f59639edea0c429bc3c63c6d74f1862fe60a35032d89478e7511d2f34855da0fcb65782668d72e59e93d1de5bc00121ba9bc1aa38f1f0ad3
+  languageName: node
+  linkType: hard
+
+"@babel/helper-module-imports@npm:^7.29.7":
+  version: 7.29.7
+  resolution: "@babel/helper-module-imports@npm:7.29.7"
+  dependencies:
+    "@babel/traverse": "npm:^7.29.7"
+    "@babel/types": "npm:^7.29.7"
+  checksum: 10/28ec6f7efd99588d6eebfb25c9f1ccc34cb0cdb0839c4c0f08b3ec0105ccaefbe7e8b4f651f3f55a4f5c4fcb1d979bd32a9b8ee23e3e62163ea22aaa7ee0dfa1
+  languageName: node
+  linkType: hard
+
+"@babel/helper-module-transforms@npm:^7.29.7":
+  version: 7.29.7
+  resolution: "@babel/helper-module-transforms@npm:7.29.7"
+  dependencies:
+    "@babel/helper-module-imports": "npm:^7.29.7"
+    "@babel/helper-validator-identifier": "npm:^7.29.7"
+    "@babel/traverse": "npm:^7.29.7"
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: 10/33251b1fb44d726194a974a0078b1269511d130a2609357ff829b479e9e4dca96ecd5384c534a477095f665ffb01503d3e680699c2002e5b62e6ca1a272f1892
+  languageName: node
+  linkType: hard
+
+"@babel/helper-string-parser@npm:^7.29.7":
+  version: 7.29.7
+  resolution: "@babel/helper-string-parser@npm:7.29.7"
+  checksum: 10/4d8ef0ef7105f3d9fe4361137c8f42e5b4c7a52b5380b962762f2a528a1ba89064e2c6236090716ce34b63707b886ae0ebf36b2c2fcc2851f27e652febfc3648
+  languageName: node
+  linkType: hard
+
+"@babel/helper-validator-identifier@npm:^7.29.7":
+  version: 7.29.7
+  resolution: "@babel/helper-validator-identifier@npm:7.29.7"
+  checksum: 10/2efa42701eb05babf26dff3332109c9e5e1a3400a71fb9e68ee27af28235036a2a72c2494c04bdab3f909075f42a58b2e8271074372bc7f8e79ec02bd364d7a7
+  languageName: node
+  linkType: hard
+
+"@babel/helper-validator-option@npm:^7.29.7":
+  version: 7.29.7
+  resolution: "@babel/helper-validator-option@npm:7.29.7"
+  checksum: 10/aeb6aa966f59300d3cc2fea7c68e1dfd7ad011fc10e535c8e2b2de3094b27c859428dc7220f16420350f8b1cde99da120b673be04bcb0c2f37b56258c96bed58
+  languageName: node
+  linkType: hard
+
+"@babel/helpers@npm:^7.29.7":
+  version: 7.29.7
+  resolution: "@babel/helpers@npm:7.29.7"
+  dependencies:
+    "@babel/template": "npm:^7.29.7"
+    "@babel/types": "npm:^7.29.7"
+  checksum: 10/b4d1ef12c19e896585c009ba29677839097ff04f8b11a2430d335c3fb6bd667b4f9e96a3b185a083fdde6b1137eabbbf2600c32425cb69cefc81d81d5cfe425d
+  languageName: node
+  linkType: hard
+
+"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.29.7, @babel/parser@npm:^7.29.8":
+  version: 7.29.8
+  resolution: "@babel/parser@npm:7.29.8"
+  dependencies:
+    "@babel/types": "npm:^7.29.8"
+  bin:
+    parser: ./bin/babel-parser.js
+  checksum: 10/dbd14ebbba0fa3019acd2712b0db3ffd594d0850d4fc487667287b5702893f54a7911570ea842f0cff4dc492a2412e3287dfabfe00c6b78efa7becb1255f3f86
+  languageName: node
+  linkType: hard
+
+"@babel/runtime@npm:^7.12.5":
+  version: 7.29.7
+  resolution: "@babel/runtime@npm:7.29.7"
+  checksum: 10/9883b4951787779fd382b121f22f92966d85f19434841f65fb00b2dfec232107e139683f47c6f252891826ad8ee18317b46c3a0e4819116a9885f47b46d7126a
+  languageName: node
+  linkType: hard
+
+"@babel/template@npm:^7.29.7":
+  version: 7.29.7
+  resolution: "@babel/template@npm:7.29.7"
+  dependencies:
+    "@babel/code-frame": "npm:^7.29.7"
+    "@babel/parser": "npm:^7.29.7"
+    "@babel/types": "npm:^7.29.7"
+  checksum: 10/da92f7a5b61e05d2fb3934a44f18cec6006ee3c595116c17a3b44cb9756ecd43205c7360dbfa326fa8f4d00aaeb9e777342a881070d11c2305e9c694bc3ca6ff
+  languageName: node
+  linkType: hard
+
+"@babel/traverse@npm:^7.28.0, @babel/traverse@npm:^7.29.7":
+  version: 7.29.8
+  resolution: "@babel/traverse@npm:7.29.8"
+  dependencies:
+    "@babel/code-frame": "npm:^7.29.7"
+    "@babel/generator": "npm:^7.29.8"
+    "@babel/helper-globals": "npm:^7.29.7"
+    "@babel/parser": "npm:^7.29.8"
+    "@babel/template": "npm:^7.29.7"
+    "@babel/types": "npm:^7.29.8"
+    debug: "npm:^4.3.1"
+  checksum: 10/91f0b4799d27b50ffd5c2ab4ba537065221196858e0899275d8474489c57dd0b53150508b2c0d9b308520e5985bde63049a401d32aa1ac4f1e10e466e2a3f447
+  languageName: node
+  linkType: hard
+
+"@babel/types@npm:^7.0.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.28.2, @babel/types@npm:^7.29.7, @babel/types@npm:^7.29.8":
+  version: 7.29.8
+  resolution: "@babel/types@npm:7.29.8"
+  dependencies:
+    "@babel/helper-string-parser": "npm:^7.29.7"
+    "@babel/helper-validator-identifier": "npm:^7.29.7"
+  checksum: 10/ff2becf0f8b432f0820f286fb9319d7f3819b2d0eb95bc26957fbc6250a3ca0ae3656feb98ecb5f171f9e04b34a4c08f5036447f17459ed7bfc32ff649d9b71e
+  languageName: node
+  linkType: hard
+
+"@bcoe/v8-coverage@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "@bcoe/v8-coverage@npm:1.0.2"
+  checksum: 10/46600b2dde460269b07a8e4f12b72e418eae1337b85c979f43af3336c9a1c65b04e42508ab6b245f1e0e3c64328e1c38d8cd733e4a7cebc4fbf9cf65c6e59937
+  languageName: node
+  linkType: hard
+
+"@blazediff/core@npm:1.9.1":
+  version: 1.9.1
+  resolution: "@blazediff/core@npm:1.9.1"
+  checksum: 10/6bb615f104da313934bcabc09627f3c803461bf85182453d5c13a6a354be4d32b35504b84f1043c21e95d0f6c0acb45083caeb72e72c1d6a76ca5e1f61f25510
+  languageName: node
+  linkType: hard
+
+"@bramus/specificity@npm:^2.4.2":
+  version: 2.4.2
+  resolution: "@bramus/specificity@npm:2.4.2"
+  dependencies:
+    css-tree: "npm:^3.0.0"
+  bin:
+    specificity: bin/cli.js
+  checksum: 10/4255ed6ff12f7db9ec3c21acfd0da2327d30ec29deb199345810cdcad992618f40039c5483eefeb665913bffbc80b690e9f1b954fbbbfa93480c6a22f9c3a69c
+  languageName: node
+  linkType: hard
+
+"@cratis/arc.react@npm:22.3.0":
+  version: 22.3.0
+  resolution: "@cratis/arc.react@npm:22.3.0"
+  dependencies:
+    "@cratis/arc": "npm:22.3.0"
+    "@cratis/fundamentals": "npm:^7.18.0"
+    tsyringe: "npm:^4.10.0"
+  peerDependencies:
+    react: ^18.0.0 || ^19.0.0
+  checksum: 10/41687fa4364fa4e4200efa397979c19e06982d3cf5e575ff4a9993d7b3c2fb5e394e9a1963b424881971b33514e1bae98db7eda33527cc12e5b978f03bd39ec8
+  languageName: node
+  linkType: hard
+
+"@cratis/arc.vite@npm:22.3.0":
+  version: 22.3.0
+  resolution: "@cratis/arc.vite@npm:22.3.0"
+  dependencies:
+    "@cratis/arc": "npm:22.3.0"
+    "@swc/core": "npm:^1.15.43"
+  peerDependencies:
+    react: ^18.0.0 || ^19.0.0
+  checksum: 10/0a085be5338038028fce224bbbbda302cac4af09c866bea3d94efe101803397c8aa3a5d0b983200db3a1062c4340dd6a392944aff68377b237976f68bed891d7
+  languageName: node
+  linkType: hard
+
+"@cratis/arc@npm:22.3.0":
+  version: 22.3.0
+  resolution: "@cratis/arc@npm:22.3.0"
+  dependencies:
+    "@cratis/fundamentals": "npm:^7.18.0"
+    rxjs: "npm:^7.8.2"
+  checksum: 10/b53abd51531852dfc18b03812ff7059561979591bde5334b2836cc994ab1c71a8c4d1c09cba52667bae4a79233596dc758228fb9752bbba4e2a17a58536f182d
+  languageName: node
+  linkType: hard
+
+"@cratis/components-codemods@workspace:Codemods":
+  version: 0.0.0-use.local
+  resolution: "@cratis/components-codemods@workspace:Codemods"
+  dependencies:
+    typescript: "npm:^6.0.3"
+  bin:
+    cratis-components-remove-root-namespace-imports: ./scripts/remove-root-namespace-imports.js
+  languageName: unknown
+  linkType: soft
+
+"@cratis/components@workspace:Source":
+  version: 0.0.0-use.local
+  resolution: "@cratis/components@workspace:Source"
+  dependencies:
+    "@cratis/arc.vite": "npm:22.3.0"
+    "@internationalized/date": "npm:3.12.3"
+    allotment: "npm:1.20.5"
+    framer-motion: "npm:13.1.1"
+    pixi.js: "npm:^8.20.0"
+    react-aria-components: "npm:1.20.0"
+    react-icons: "npm:5.7.0"
+    ts-deepmerge: "npm:8.0.0"
+  peerDependencies:
+    "@cratis/arc": ">=20.3.1 <23"
+    "@cratis/arc.react": ">=20.3.1 <23"
+    "@cratis/fundamentals": ^7.10.3
+    pixi.js: ^8.20.0
+    react: ^19.0.0
+    react-dom: ^19.0.0
+    reflect-metadata: 0.2.2
+    tsyringe: 4.10.0
+  peerDependenciesMeta:
+    pixi.js:
+      optional: true
+  languageName: unknown
+  linkType: soft
+
+"@cratis/eslint-plugin-components@workspace:ESLint":
+  version: 0.0.0-use.local
+  resolution: "@cratis/eslint-plugin-components@workspace:ESLint"
+  peerDependencies:
+    eslint: ">=9"
+  languageName: unknown
+  linkType: soft
+
+"@cratis/fundamentals@npm:^7.18.0":
+  version: 7.18.1
+  resolution: "@cratis/fundamentals@npm:7.18.1"
+  checksum: 10/8b1fec7e1ef2813019da2eb83152b0e44bfe51f877be4dd31ea5f38f06d007a7d688ba22400cfb0f6945be67c036c44747a5d760527c114ecc9e901069909c7f
+  languageName: node
+  linkType: hard
+
+"@cspotcode/source-map-support@npm:^0.8.0":
+  version: 0.8.1
+  resolution: "@cspotcode/source-map-support@npm:0.8.1"
+  dependencies:
+    "@jridgewell/trace-mapping": "npm:0.3.9"
+  checksum: 10/b6e38a1712fab242c86a241c229cf562195aad985d0564bd352ac404be583029e89e93028ffd2c251d2c407ecac5fb0cbdca94a2d5c10f29ac806ede0508b3ff
+  languageName: node
+  linkType: hard
+
+"@csstools/color-helpers@npm:^6.1.1":
+  version: 6.1.1
+  resolution: "@csstools/color-helpers@npm:6.1.1"
+  checksum: 10/79d96c079a0e65cd718183914902e5e914517b07e685e92a7b0e4f4bc2feb3c222bd2b0e723b6ef520fd08de7eefd1e19c073de2a94f2e2c08e9f06da5ad89d4
+  languageName: node
+  linkType: hard
+
+"@csstools/css-calc@npm:^3.3.0":
+  version: 3.3.0
+  resolution: "@csstools/css-calc@npm:3.3.0"
+  peerDependencies:
+    "@csstools/css-parser-algorithms": ^4.0.0
+    "@csstools/css-tokenizer": ^4.0.0
+  checksum: 10/46dde1c26c8a62d7b849a616a521cb97abc2d6c8c480f7be6f14c70fe60689a2a58c1f5f905aae237250ad27172968e10c70f6f83864c7dc48d8f8921f55f6a9
+  languageName: node
+  linkType: hard
+
+"@csstools/css-color-parser@npm:^4.1.10":
+  version: 4.2.1
+  resolution: "@csstools/css-color-parser@npm:4.2.1"
+  dependencies:
+    "@csstools/color-helpers": "npm:^6.1.1"
+    "@csstools/css-calc": "npm:^3.3.0"
+  peerDependencies:
+    "@csstools/css-parser-algorithms": ^4.0.0
+    "@csstools/css-tokenizer": ^4.0.0
+  checksum: 10/621f819bc1bb46bb8b174d4441e6cddb1852fa800b39da8aac2d00ceaad564e8543f7bfa79f65f4c3211d38db8f20d5937c037ecbd58f97761d8d2154c70f7bc
+  languageName: node
+  linkType: hard
+
+"@csstools/css-parser-algorithms@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "@csstools/css-parser-algorithms@npm:4.0.0"
+  peerDependencies:
+    "@csstools/css-tokenizer": ^4.0.0
+  checksum: 10/000f3ba55f440d9fbece50714e88f9d4479e2bde9e0568333492663f2c6034dc31d0b9ef5d66d196c76be58eea145ca6920aa8bdfdcc6361894806c21b5402d0
+  languageName: node
+  linkType: hard
+
+"@csstools/css-syntax-patches-for-csstree@npm:^1.1.7":
+  version: 1.1.9
+  resolution: "@csstools/css-syntax-patches-for-csstree@npm:1.1.9"
+  peerDependencies:
+    css-tree: ^3.2.1
+  peerDependenciesMeta:
+    css-tree:
+      optional: true
+  checksum: 10/1b7f280a9d0cf1460e373a252157230932b54853789f885822ac4684e3ead7214f62a47f591c3f8196e2434cbf45702351c5f628f75643a3c8be484975fc4bfd
+  languageName: node
+  linkType: hard
+
+"@csstools/css-tokenizer@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "@csstools/css-tokenizer@npm:4.0.0"
+  checksum: 10/074ade1a7fc3410b813c8982cf07a56814a55af509c533c2dc80d5689f34d2ba38219f8fa78fa36ea2adc6c5db506ea3c3a667388dda1b59b1281fdd2a2d1e28
+  languageName: node
+  linkType: hard
+
+"@emnapi/core@npm:1.11.0":
+  version: 1.11.0
+  resolution: "@emnapi/core@npm:1.11.0"
+  dependencies:
+    "@emnapi/wasi-threads": "npm:1.2.2"
+    tslib: "npm:^2.4.0"
+  checksum: 10/7c6f7fe38dd16f98d0081d58e23a6184fccffaba6bef113fa4f689478b673c988cb8dd1a93d0d66dfc7bb487d67837827ac0bd1a578fffe4c7db2ba07ae39c78
+  languageName: node
+  linkType: hard
+
+"@emnapi/core@npm:1.9.2":
+  version: 1.9.2
+  resolution: "@emnapi/core@npm:1.9.2"
+  dependencies:
+    "@emnapi/wasi-threads": "npm:1.2.1"
+    tslib: "npm:^2.4.0"
+  checksum: 10/32084861f306b405f10f3ae13d1a49fa75650bdaaa40704892c397856815fe5d3781670d2662806d39c2d8a19bb62826dd7b870a79858f7be77500d9d0d3d91a
+  languageName: node
+  linkType: hard
+
+"@emnapi/core@npm:^1.11.1":
+  version: 1.11.3
+  resolution: "@emnapi/core@npm:1.11.3"
+  dependencies:
+    "@emnapi/wasi-threads": "npm:1.2.3"
+    tslib: "npm:^2.4.0"
+  checksum: 10/6ed871d5bbd0f6e25a09fe91583e886e4b90ae9344fa9292c78f0891b0b2a7d84899ea65a7d576450b9ac50440c698dad1907907e3d686ec9460ed876a9363a2
+  languageName: node
+  linkType: hard
+
+"@emnapi/runtime@npm:1.11.0":
+  version: 1.11.0
+  resolution: "@emnapi/runtime@npm:1.11.0"
+  dependencies:
+    tslib: "npm:^2.4.0"
+  checksum: 10/c0f064646456d836c72cbc71baa9fe128be011ffb3e2ccbffa624cfe77d6b66aab3aa6635fbbab34a187a16d4833ef14016fcef2b189753aaa8f987843e0fc26
+  languageName: node
+  linkType: hard
+
+"@emnapi/runtime@npm:1.9.2":
+  version: 1.9.2
+  resolution: "@emnapi/runtime@npm:1.9.2"
+  dependencies:
+    tslib: "npm:^2.4.0"
+  checksum: 10/de123d6b7acdbe34bf997523be761e5ae6d8f9b3967b72e8e50ff7dd1791a2a0d2b9fb0d7d92230b0738502980ea6f947189b7c1f47814ff666515a55c6fff48
+  languageName: node
+  linkType: hard
+
+"@emnapi/runtime@npm:^1.11.1":
+  version: 1.11.3
+  resolution: "@emnapi/runtime@npm:1.11.3"
+  dependencies:
+    tslib: "npm:^2.4.0"
+  checksum: 10/ec834cc0fe248e06dd84f6dee10162133f8a692636189e99aa992303c791d4be1679536ee91aeee6661c4478609768cee9c085acd858caa92784c67acaab44a5
+  languageName: node
+  linkType: hard
+
+"@emnapi/wasi-threads@npm:1.2.1":
+  version: 1.2.1
+  resolution: "@emnapi/wasi-threads@npm:1.2.1"
+  dependencies:
+    tslib: "npm:^2.4.0"
+  checksum: 10/57cd4292be81c05d26aa886d68a9e4c449ff666e8503fed6463dfc6b64a4e4213f03c152d53296b7cda32840271e38cd33347332070658f01befeb9bf4e59f36
+  languageName: node
+  linkType: hard
+
+"@emnapi/wasi-threads@npm:1.2.2":
+  version: 1.2.2
+  resolution: "@emnapi/wasi-threads@npm:1.2.2"
+  dependencies:
+    tslib: "npm:^2.4.0"
+  checksum: 10/297fb6b1d89744bd0b41d5fec32bade05dc8dcf1f70eba86527226609fb3f6ad3fa96b3b2377b7449709715b3bd1569654c9def1dbbc85fb6b9cb0cff5bc5ebf
+  languageName: node
+  linkType: hard
+
+"@emnapi/wasi-threads@npm:1.2.3, @emnapi/wasi-threads@npm:^1.2.2":
+  version: 1.2.3
+  resolution: "@emnapi/wasi-threads@npm:1.2.3"
+  dependencies:
+    tslib: "npm:^2.4.0"
+  checksum: 10/d9fef5c321a6df1988e813e0b621ed1e01d274c23d3028ff9511af97f8935adc921ae60a35167ccf4e0414fecc040b66b9b13458e7c00cfaad622457e1b03529
+  languageName: node
+  linkType: hard
+
+"@esbuild/aix-ppc64@npm:0.28.2":
+  version: 0.28.2
+  resolution: "@esbuild/aix-ppc64@npm:0.28.2"
+  conditions: os=aix & cpu=ppc64
+  languageName: node
+  linkType: hard
+
+"@esbuild/android-arm64@npm:0.28.2":
+  version: 0.28.2
+  resolution: "@esbuild/android-arm64@npm:0.28.2"
+  conditions: os=android & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/android-arm@npm:0.28.2":
+  version: 0.28.2
+  resolution: "@esbuild/android-arm@npm:0.28.2"
+  conditions: os=android & cpu=arm
+  languageName: node
+  linkType: hard
+
+"@esbuild/android-x64@npm:0.28.2":
+  version: 0.28.2
+  resolution: "@esbuild/android-x64@npm:0.28.2"
+  conditions: os=android & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/darwin-arm64@npm:0.28.2":
+  version: 0.28.2
+  resolution: "@esbuild/darwin-arm64@npm:0.28.2"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/darwin-x64@npm:0.28.2":
+  version: 0.28.2
+  resolution: "@esbuild/darwin-x64@npm:0.28.2"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/freebsd-arm64@npm:0.28.2":
+  version: 0.28.2
+  resolution: "@esbuild/freebsd-arm64@npm:0.28.2"
+  conditions: os=freebsd & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/freebsd-x64@npm:0.28.2":
+  version: 0.28.2
+  resolution: "@esbuild/freebsd-x64@npm:0.28.2"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-arm64@npm:0.28.2":
+  version: 0.28.2
+  resolution: "@esbuild/linux-arm64@npm:0.28.2"
+  conditions: os=linux & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-arm@npm:0.28.2":
+  version: 0.28.2
+  resolution: "@esbuild/linux-arm@npm:0.28.2"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-ia32@npm:0.28.2":
+  version: 0.28.2
+  resolution: "@esbuild/linux-ia32@npm:0.28.2"
+  conditions: os=linux & cpu=ia32
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-loong64@npm:0.28.2":
+  version: 0.28.2
+  resolution: "@esbuild/linux-loong64@npm:0.28.2"
+  conditions: os=linux & cpu=loong64
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-mips64el@npm:0.28.2":
+  version: 0.28.2
+  resolution: "@esbuild/linux-mips64el@npm:0.28.2"
+  conditions: os=linux & cpu=mips64el
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-ppc64@npm:0.28.2":
+  version: 0.28.2
+  resolution: "@esbuild/linux-ppc64@npm:0.28.2"
+  conditions: os=linux & cpu=ppc64
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-riscv64@npm:0.28.2":
+  version: 0.28.2
+  resolution: "@esbuild/linux-riscv64@npm:0.28.2"
+  conditions: os=linux & cpu=riscv64
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-s390x@npm:0.28.2":
+  version: 0.28.2
+  resolution: "@esbuild/linux-s390x@npm:0.28.2"
+  conditions: os=linux & cpu=s390x
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-x64@npm:0.28.2":
+  version: 0.28.2
+  resolution: "@esbuild/linux-x64@npm:0.28.2"
+  conditions: os=linux & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/netbsd-arm64@npm:0.28.2":
+  version: 0.28.2
+  resolution: "@esbuild/netbsd-arm64@npm:0.28.2"
+  conditions: os=netbsd & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/netbsd-x64@npm:0.28.2":
+  version: 0.28.2
+  resolution: "@esbuild/netbsd-x64@npm:0.28.2"
+  conditions: os=netbsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/openbsd-arm64@npm:0.28.2":
+  version: 0.28.2
+  resolution: "@esbuild/openbsd-arm64@npm:0.28.2"
+  conditions: os=openbsd & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/openbsd-x64@npm:0.28.2":
+  version: 0.28.2
+  resolution: "@esbuild/openbsd-x64@npm:0.28.2"
+  conditions: os=openbsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/openharmony-arm64@npm:0.28.2":
+  version: 0.28.2
+  resolution: "@esbuild/openharmony-arm64@npm:0.28.2"
+  conditions: os=openharmony & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/sunos-x64@npm:0.28.2":
+  version: 0.28.2
+  resolution: "@esbuild/sunos-x64@npm:0.28.2"
+  conditions: os=sunos & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/win32-arm64@npm:0.28.2":
+  version: 0.28.2
+  resolution: "@esbuild/win32-arm64@npm:0.28.2"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/win32-ia32@npm:0.28.2":
+  version: 0.28.2
+  resolution: "@esbuild/win32-ia32@npm:0.28.2"
+  conditions: os=win32 & cpu=ia32
+  languageName: node
+  linkType: hard
+
+"@esbuild/win32-x64@npm:0.28.2":
+  version: 0.28.2
+  resolution: "@esbuild/win32-x64@npm:0.28.2"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@eslint-community/eslint-utils@npm:^4.8.0, @eslint-community/eslint-utils@npm:^4.9.1":
+  version: 4.10.1
+  resolution: "@eslint-community/eslint-utils@npm:4.10.1"
+  dependencies:
+    eslint-visitor-keys: "npm:^3.4.3"
+  peerDependencies:
+    eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
+  checksum: 10/61059b9f0192df5a86c441c03e0eedbda8c3810bb788775839afe4c5ec6bbdaa6433ac18001046b319390552435da3f6b8f5e18cca255993b3df37fe97a42b90
+  languageName: node
+  linkType: hard
+
+"@eslint-community/regexpp@npm:^4.12.2":
+  version: 4.12.2
+  resolution: "@eslint-community/regexpp@npm:4.12.2"
+  checksum: 10/049b280fddf71dd325514e0a520024969431dc3a8b02fa77476e6820e9122f28ab4c9168c11821f91a27982d2453bcd7a66193356ea84e84fb7c8d793be1ba0c
+  languageName: node
+  linkType: hard
+
+"@eslint/config-array@npm:^0.23.5":
+  version: 0.23.5
+  resolution: "@eslint/config-array@npm:0.23.5"
+  dependencies:
+    "@eslint/object-schema": "npm:^3.0.5"
+    debug: "npm:^4.3.1"
+    minimatch: "npm:^10.2.4"
+  checksum: 10/0e05be2b5c8b9f9fb8094948fd2d35591a32091b9d39205181f2ed9bec0e2c8b2969f019f40a0388755a025408b98929e2d0beccb4fbd6609c1c0d6c9e9a14f0
+  languageName: node
+  linkType: hard
+
+"@eslint/config-helpers@npm:^0.7.0":
+  version: 0.7.0
+  resolution: "@eslint/config-helpers@npm:0.7.0"
+  dependencies:
+    "@eslint/core": "npm:^1.2.1"
+  checksum: 10/57f9cdf303fd56f0da6712e7d6da350c18a332f7d1dc0f5a5f8a9c357f0d5ab9ff9e7515be4726ad4b0fc41c297570a118d7ede02246c5b7a37932c3df46271e
+  languageName: node
+  linkType: hard
+
+"@eslint/core@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "@eslint/core@npm:1.2.1"
+  dependencies:
+    "@types/json-schema": "npm:^7.0.15"
+  checksum: 10/e1f9f5534f495b74a4c13c372e8f2feaf0c67f5dd666111c849c97c221d4ba730c98333a2ca94dd28cd7c24e3b1016bd868ca03c42e070732c047053f854cb13
+  languageName: node
+  linkType: hard
+
+"@eslint/eslintrc@npm:^3.3.6":
+  version: 3.3.6
+  resolution: "@eslint/eslintrc@npm:3.3.6"
+  dependencies:
+    ajv: "npm:^6.14.0"
+    debug: "npm:^4.3.2"
+    espree: "npm:^10.0.1"
+    globals: "npm:^14.0.0"
+    ignore: "npm:^5.2.0"
+    import-fresh: "npm:^3.2.1"
+    js-yaml: "npm:^4.3.0"
+    minimatch: "npm:^3.1.5"
+    strip-json-comments: "npm:^3.1.1"
+  checksum: 10/8d1d501069faf7c1c73e37181ec403dd2d1509f8da85f226531f6a7fdd9a9326fc6d2ea2e8192515992578cf9e7ed87f9d7ce3f1bfc6d0f0e77796d18e0e8ef6
+  languageName: node
+  linkType: hard
+
+"@eslint/js@npm:^10.0.1":
+  version: 10.0.1
+  resolution: "@eslint/js@npm:10.0.1"
+  peerDependencies:
+    eslint: ^10.0.0
+  peerDependenciesMeta:
+    eslint:
+      optional: true
+  checksum: 10/27ff77b8f0aab350b2f7a69d974eabb816bb9f4cab986b1538782269d6bfdc29e351803fa7a62c22c0b786341324f1a28b86bc83956ddfa189aa6bead1a87758
+  languageName: node
+  linkType: hard
+
+"@eslint/object-schema@npm:^3.0.5":
+  version: 3.0.5
+  resolution: "@eslint/object-schema@npm:3.0.5"
+  checksum: 10/42e9ec2551d7cafe1825f20494576c9a867dfd26e728b66620f55d954cd5c4c9c4987755d147893985b8d39b49dace31117e59e7bc9564eb411b397e579a50e7
+  languageName: node
+  linkType: hard
+
+"@eslint/plugin-kit@npm:^0.7.2":
+  version: 0.7.2
+  resolution: "@eslint/plugin-kit@npm:0.7.2"
+  dependencies:
+    "@eslint/core": "npm:^1.2.1"
+    levn: "npm:^0.4.1"
+  checksum: 10/ef9fc6f8ca28e132d4c81cfbaa92274800d1d73bb9d6ef2124613dd39b7f09e3592deb64bad10b183bff78db5465d4b100f522d994c8550424526b9ac4a072b0
+  languageName: node
+  linkType: hard
+
+"@exodus/bytes@npm:^1.11.0, @exodus/bytes@npm:^1.15.1, @exodus/bytes@npm:^1.6.0":
+  version: 1.15.1
+  resolution: "@exodus/bytes@npm:1.15.1"
+  peerDependencies:
+    "@noble/hashes": ^1.8.0 || ^2.0.0
+  peerDependenciesMeta:
+    "@noble/hashes":
+      optional: true
+  checksum: 10/7dde00ae8040ec032ba3c287d210d7d555986caaf81a1215311c180422697d739a1952eb9d91e841132b18a19a910cdd02e4914136db3cc87baaa0fdd84b1e87
+  languageName: node
+  linkType: hard
+
+"@humanfs/core@npm:^0.19.2":
+  version: 0.19.2
+  resolution: "@humanfs/core@npm:0.19.2"
+  dependencies:
+    "@humanfs/types": "npm:^0.15.0"
+  checksum: 10/c6c0273721ec8df3d36a57c390a11a168d0a2f513d78bceb25165bded4fcb73609b1a317edc6c8f331cefd4b47285dde0b1e6679e08ef7f062232ec14fe05312
+  languageName: node
+  linkType: hard
+
+"@humanfs/node@npm:^0.16.6":
+  version: 0.16.8
+  resolution: "@humanfs/node@npm:0.16.8"
+  dependencies:
+    "@humanfs/core": "npm:^0.19.2"
+    "@humanfs/types": "npm:^0.15.0"
+    "@humanwhocodes/retry": "npm:^0.4.0"
+  checksum: 10/ed01b3c066d9cec7526d139b9e71ca00ee4a30b3b5f5f5c198eb069c3509a3e167e180ba7e1e5a83b9571e906c4908bd20402b47586887452311af7354995e95
+  languageName: node
+  linkType: hard
+
+"@humanfs/types@npm:^0.15.0":
+  version: 0.15.0
+  resolution: "@humanfs/types@npm:0.15.0"
+  checksum: 10/dea3cc7fd8f8d4d088ed8d0a9921cf12bd8e1cdf40a6133106b03a6e2aebcc9a6f1771b3643b7ec71baae90d08245db34069dfcc861da8d678662741e6c3c986
+  languageName: node
+  linkType: hard
+
+"@humanwhocodes/module-importer@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "@humanwhocodes/module-importer@npm:1.0.1"
+  checksum: 10/e993950e346331e5a32eefb27948ecdee2a2c4ab3f072b8f566cd213ef485dd50a3ca497050608db91006f5479e43f91a439aef68d2a313bd3ded06909c7c5b3
+  languageName: node
+  linkType: hard
+
+"@humanwhocodes/retry@npm:^0.4.0, @humanwhocodes/retry@npm:^0.4.2":
+  version: 0.4.3
+  resolution: "@humanwhocodes/retry@npm:0.4.3"
+  checksum: 10/0b32cfd362bea7a30fbf80bb38dcaf77fee9c2cae477ee80b460871d03590110ac9c77d654f04ec5beaf71b6f6a89851bdf6c1e34ccdf2f686bd86fcd97d9e61
+  languageName: node
+  linkType: hard
+
+"@internationalized/date@npm:3.12.3":
+  version: 3.12.3
+  resolution: "@internationalized/date@npm:3.12.3"
+  dependencies:
+    "@swc/helpers": "npm:^0.5.0"
+  checksum: 10/2c4ce86ac5aec2f9f6799cd455b776ab8750238059d1ed031f866c1f7bd7799fc6f938d46a328066989e1f24f5f9c10d4bfad3b2cab45fba0ce8fbb369ef7e1e
+  languageName: node
+  linkType: hard
+
+"@internationalized/number@npm:3.6.7":
+  version: 3.6.7
+  resolution: "@internationalized/number@npm:3.6.7"
+  dependencies:
+    "@swc/helpers": "npm:^0.5.0"
+  checksum: 10/bdf2a21d338789825e7ba0f2b0d7000c3dbc4a5ee2e395e7a347ee094927eb271327bf10467de17e4c23c4a51f9467aa9de7f3e568407c84487a34960c7f7fda
+  languageName: node
+  linkType: hard
+
+"@internationalized/string@npm:3.2.10":
+  version: 3.2.10
+  resolution: "@internationalized/string@npm:3.2.10"
+  dependencies:
+    "@swc/helpers": "npm:^0.5.0"
+  checksum: 10/98687f3a67c09e567794b5236bd43ca987fc1ffab7b0bda906276bff80ba6ebc565a722f67a57e0dcd16e617a704ce1825dca1fd60b10d12d7fc2500a8c86281
+  languageName: node
+  linkType: hard
+
+"@isaacs/cliui@npm:^8.0.2":
+  version: 8.0.2
+  resolution: "@isaacs/cliui@npm:8.0.2"
+  dependencies:
+    string-width: "npm:^5.1.2"
+    string-width-cjs: "npm:string-width@^4.2.0"
+    strip-ansi: "npm:^7.0.1"
+    strip-ansi-cjs: "npm:strip-ansi@^6.0.1"
+    wrap-ansi: "npm:^8.1.0"
+    wrap-ansi-cjs: "npm:wrap-ansi@^7.0.0"
+  checksum: 10/e9ed5fd27c3aec1095e3a16e0c0cf148d1fee55a38665c35f7b3f86a9b5d00d042ddaabc98e8a1cb7463b9378c15f22a94eb35e99469c201453eb8375191f243
+  languageName: node
+  linkType: hard
+
+"@isaacs/fs-minipass@npm:^4.0.0":
+  version: 4.0.1
+  resolution: "@isaacs/fs-minipass@npm:4.0.1"
+  dependencies:
+    minipass: "npm:^7.0.4"
+  checksum: 10/4412e9e6713c89c1e66d80bb0bb5a2a93192f10477623a27d08f228ba0316bb880affabc5bfe7f838f58a34d26c2c190da726e576cdfc18c49a72e89adabdcf5
+  languageName: node
+  linkType: hard
+
+"@joshwooding/vite-plugin-react-docgen-typescript@npm:^0.7.0":
+  version: 0.7.0
+  resolution: "@joshwooding/vite-plugin-react-docgen-typescript@npm:0.7.0"
+  dependencies:
+    glob: "npm:^13.0.1"
+    react-docgen-typescript: "npm:^2.2.2"
+  peerDependencies:
+    typescript: ">= 4.3.x"
+    vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: 10/399c106f653c11ddc44ea9a61a52547e3856f028a9deda58aef6ee4bb00c7a1ffb5a755b9681a1439818b154868414b71cebde8876de225e63579d76c4742580
+  languageName: node
+  linkType: hard
+
+"@jridgewell/gen-mapping@npm:^0.3.12, @jridgewell/gen-mapping@npm:^0.3.5":
+  version: 0.3.13
+  resolution: "@jridgewell/gen-mapping@npm:0.3.13"
+  dependencies:
+    "@jridgewell/sourcemap-codec": "npm:^1.5.0"
+    "@jridgewell/trace-mapping": "npm:^0.3.24"
+  checksum: 10/902f8261dcf450b4af7b93f9656918e02eec80a2169e155000cb2059f90113dd98f3ccf6efc6072cee1dd84cac48cade51da236972d942babc40e4c23da4d62a
+  languageName: node
+  linkType: hard
+
+"@jridgewell/remapping@npm:^2.3.5":
+  version: 2.3.5
+  resolution: "@jridgewell/remapping@npm:2.3.5"
+  dependencies:
+    "@jridgewell/gen-mapping": "npm:^0.3.5"
+    "@jridgewell/trace-mapping": "npm:^0.3.24"
+  checksum: 10/c2bb01856e65b506d439455f28aceacf130d6c023d1d4e3b48705e88def3571753e1a887daa04b078b562316c92d26ce36408a60534bceca3f830aec88a339ad
+  languageName: node
+  linkType: hard
+
+"@jridgewell/resolve-uri@npm:^3.0.3, @jridgewell/resolve-uri@npm:^3.1.0":
+  version: 3.1.2
+  resolution: "@jridgewell/resolve-uri@npm:3.1.2"
+  checksum: 10/97106439d750a409c22c8bff822d648f6a71f3aa9bc8e5129efdc36343cd3096ddc4eeb1c62d2fe48e9bdd4db37b05d4646a17114ecebd3bbcacfa2de51c3c1d
+  languageName: node
+  linkType: hard
+
+"@jridgewell/sourcemap-codec@npm:^1.4.10, @jridgewell/sourcemap-codec@npm:^1.4.14, @jridgewell/sourcemap-codec@npm:^1.5.0, @jridgewell/sourcemap-codec@npm:^1.5.5":
+  version: 1.5.5
+  resolution: "@jridgewell/sourcemap-codec@npm:1.5.5"
+  checksum: 10/5d9d207b462c11e322d71911e55e21a4e2772f71ffe8d6f1221b8eb5ae6774458c1d242f897fb0814e8714ca9a6b498abfa74dfe4f434493342902b1a48b33a5
+  languageName: node
+  linkType: hard
+
+"@jridgewell/trace-mapping@npm:0.3.9":
+  version: 0.3.9
+  resolution: "@jridgewell/trace-mapping@npm:0.3.9"
+  dependencies:
+    "@jridgewell/resolve-uri": "npm:^3.0.3"
+    "@jridgewell/sourcemap-codec": "npm:^1.4.10"
+  checksum: 10/83deafb8e7a5ca98993c2c6eeaa93c270f6f647a4c0dc00deb38c9cf9b2d3b7bf15e8839540155247ef034a052c0ec4466f980bf0c9e2ab63b97d16c0cedd3ff
+  languageName: node
+  linkType: hard
+
+"@jridgewell/trace-mapping@npm:^0.3.24, @jridgewell/trace-mapping@npm:^0.3.28, @jridgewell/trace-mapping@npm:^0.3.31":
+  version: 0.3.31
+  resolution: "@jridgewell/trace-mapping@npm:0.3.31"
+  dependencies:
+    "@jridgewell/resolve-uri": "npm:^3.1.0"
+    "@jridgewell/sourcemap-codec": "npm:^1.4.14"
+  checksum: 10/da0283270e691bdb5543806077548532791608e52386cfbbf3b9e8fb00457859d1bd01d512851161c886eb3a2f3ce6fd9bcf25db8edf3bddedd275bd4a88d606
+  languageName: node
+  linkType: hard
+
+"@mdx-js/react@npm:^3.0.0":
+  version: 3.1.1
+  resolution: "@mdx-js/react@npm:3.1.1"
+  dependencies:
+    "@types/mdx": "npm:^2.0.0"
+  peerDependencies:
+    "@types/react": ">=16"
+    react: ">=16"
+  checksum: 10/52a740e2f37761694fa94d4704b7825084b4055616a95c8b8f4c1676190d399ddc5cdbb399ffc45b550beecd30497a7224c2e5b05bf43ecb668c7473641037d1
+  languageName: node
+  linkType: hard
+
+"@napi-rs/lzma-linux-x64-gnu@npm:1.5.1":
+  version: 1.5.1
+  resolution: "@napi-rs/lzma-linux-x64-gnu@npm:1.5.1"
+  conditions: os=linux & cpu=x64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@napi-rs/wasm-runtime@npm:^1.1.4, @napi-rs/wasm-runtime@npm:^1.1.5":
+  version: 1.2.3
+  resolution: "@napi-rs/wasm-runtime@npm:1.2.3"
+  dependencies:
+    "@tybys/wasm-util": "npm:^0.10.3"
+  peerDependencies:
+    "@emnapi/core": ^1.7.1 || ^2.0.0-alpha.4
+    "@emnapi/runtime": ^1.7.1 || ^2.0.0-alpha.4
+  checksum: 10/86f7f092309eb005ff9e456c12a9f81ae06ff823602740a8c9c54b2dfc17620d9b4d88c4cd179541c794aed521ac57c7e37457a00e87a624867d78f6bbce0d7c
+  languageName: node
+  linkType: hard
+
+"@nodelib/fs.scandir@npm:2.1.5":
+  version: 2.1.5
+  resolution: "@nodelib/fs.scandir@npm:2.1.5"
+  dependencies:
+    "@nodelib/fs.stat": "npm:2.0.5"
+    run-parallel: "npm:^1.1.9"
+  checksum: 10/6ab2a9b8a1d67b067922c36f259e3b3dfd6b97b219c540877a4944549a4d49ea5ceba5663905ab5289682f1f3c15ff441d02f0447f620a42e1cb5e1937174d4b
+  languageName: node
+  linkType: hard
+
+"@nodelib/fs.stat@npm:2.0.5, @nodelib/fs.stat@npm:^2.0.2":
+  version: 2.0.5
+  resolution: "@nodelib/fs.stat@npm:2.0.5"
+  checksum: 10/012480b5ca9d97bff9261571dbbec7bbc6033f69cc92908bc1ecfad0792361a5a1994bc48674b9ef76419d056a03efadfce5a6cf6dbc0a36559571a7a483f6f0
+  languageName: node
+  linkType: hard
+
+"@nodelib/fs.walk@npm:^1.2.3":
+  version: 1.2.8
+  resolution: "@nodelib/fs.walk@npm:1.2.8"
+  dependencies:
+    "@nodelib/fs.scandir": "npm:2.1.5"
+    fastq: "npm:^1.6.0"
+  checksum: 10/40033e33e96e97d77fba5a238e4bba4487b8284678906a9f616b5579ddaf868a18874c0054a75402c9fbaaa033a25ceae093af58c9c30278e35c23c9479e79b0
+  languageName: node
+  linkType: hard
+
+"@oxc-parser/binding-android-arm-eabi@npm:0.127.0":
+  version: 0.127.0
+  resolution: "@oxc-parser/binding-android-arm-eabi@npm:0.127.0"
+  conditions: os=android & cpu=arm
+  languageName: node
+  linkType: hard
+
+"@oxc-parser/binding-android-arm64@npm:0.127.0":
+  version: 0.127.0
+  resolution: "@oxc-parser/binding-android-arm64@npm:0.127.0"
+  conditions: os=android & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@oxc-parser/binding-darwin-arm64@npm:0.127.0":
+  version: 0.127.0
+  resolution: "@oxc-parser/binding-darwin-arm64@npm:0.127.0"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@oxc-parser/binding-darwin-x64@npm:0.127.0":
+  version: 0.127.0
+  resolution: "@oxc-parser/binding-darwin-x64@npm:0.127.0"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@oxc-parser/binding-freebsd-x64@npm:0.127.0":
+  version: 0.127.0
+  resolution: "@oxc-parser/binding-freebsd-x64@npm:0.127.0"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@oxc-parser/binding-linux-arm-gnueabihf@npm:0.127.0":
+  version: 0.127.0
+  resolution: "@oxc-parser/binding-linux-arm-gnueabihf@npm:0.127.0"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
+"@oxc-parser/binding-linux-arm-musleabihf@npm:0.127.0":
+  version: 0.127.0
+  resolution: "@oxc-parser/binding-linux-arm-musleabihf@npm:0.127.0"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
+"@oxc-parser/binding-linux-arm64-gnu@npm:0.127.0":
+  version: 0.127.0
+  resolution: "@oxc-parser/binding-linux-arm64-gnu@npm:0.127.0"
+  conditions: os=linux & cpu=arm64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@oxc-parser/binding-linux-arm64-musl@npm:0.127.0":
+  version: 0.127.0
+  resolution: "@oxc-parser/binding-linux-arm64-musl@npm:0.127.0"
+  conditions: os=linux & cpu=arm64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@oxc-parser/binding-linux-ppc64-gnu@npm:0.127.0":
+  version: 0.127.0
+  resolution: "@oxc-parser/binding-linux-ppc64-gnu@npm:0.127.0"
+  conditions: os=linux & cpu=ppc64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@oxc-parser/binding-linux-riscv64-gnu@npm:0.127.0":
+  version: 0.127.0
+  resolution: "@oxc-parser/binding-linux-riscv64-gnu@npm:0.127.0"
+  conditions: os=linux & cpu=riscv64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@oxc-parser/binding-linux-riscv64-musl@npm:0.127.0":
+  version: 0.127.0
+  resolution: "@oxc-parser/binding-linux-riscv64-musl@npm:0.127.0"
+  conditions: os=linux & cpu=riscv64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@oxc-parser/binding-linux-s390x-gnu@npm:0.127.0":
+  version: 0.127.0
+  resolution: "@oxc-parser/binding-linux-s390x-gnu@npm:0.127.0"
+  conditions: os=linux & cpu=s390x & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@oxc-parser/binding-linux-x64-gnu@npm:0.127.0":
+  version: 0.127.0
+  resolution: "@oxc-parser/binding-linux-x64-gnu@npm:0.127.0"
+  conditions: os=linux & cpu=x64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@oxc-parser/binding-linux-x64-musl@npm:0.127.0":
+  version: 0.127.0
+  resolution: "@oxc-parser/binding-linux-x64-musl@npm:0.127.0"
+  conditions: os=linux & cpu=x64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@oxc-parser/binding-openharmony-arm64@npm:0.127.0":
+  version: 0.127.0
+  resolution: "@oxc-parser/binding-openharmony-arm64@npm:0.127.0"
+  conditions: os=openharmony & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@oxc-parser/binding-wasm32-wasi@npm:0.127.0":
+  version: 0.127.0
+  resolution: "@oxc-parser/binding-wasm32-wasi@npm:0.127.0"
+  dependencies:
+    "@emnapi/core": "npm:1.9.2"
+    "@emnapi/runtime": "npm:1.9.2"
+    "@napi-rs/wasm-runtime": "npm:^1.1.4"
+  conditions: cpu=wasm32
+  languageName: node
+  linkType: hard
+
+"@oxc-parser/binding-win32-arm64-msvc@npm:0.127.0":
+  version: 0.127.0
+  resolution: "@oxc-parser/binding-win32-arm64-msvc@npm:0.127.0"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@oxc-parser/binding-win32-ia32-msvc@npm:0.127.0":
+  version: 0.127.0
+  resolution: "@oxc-parser/binding-win32-ia32-msvc@npm:0.127.0"
+  conditions: os=win32 & cpu=ia32
+  languageName: node
+  linkType: hard
+
+"@oxc-parser/binding-win32-x64-msvc@npm:0.127.0":
+  version: 0.127.0
+  resolution: "@oxc-parser/binding-win32-x64-msvc@npm:0.127.0"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@oxc-project/types@npm:=0.147.0":
+  version: 0.147.0
+  resolution: "@oxc-project/types@npm:0.147.0"
+  checksum: 10/d454c44bb9e65b8a660c2b2099391883986bbb6796fd4eea22fbd3016af109547986ec5fa0685db9ee7a6c5e33568134a2e5eea6452eb0f94c4fcc44e544fb32
+  languageName: node
+  linkType: hard
+
+"@oxc-project/types@npm:^0.127.0":
+  version: 0.127.0
+  resolution: "@oxc-project/types@npm:0.127.0"
+  checksum: 10/f154f4720367186aed63a16fb1395f9039d4e6872265fe9e6b5eacc02fb2b948f9ea6c5f85efd3a015ea28aa8c31232b7a8301218ae28651659e46dd0c4f2031
+  languageName: node
+  linkType: hard
+
+"@oxc-resolver/binding-android-arm-eabi@npm:11.21.2":
+  version: 11.21.2
+  resolution: "@oxc-resolver/binding-android-arm-eabi@npm:11.21.2"
+  conditions: os=android & cpu=arm
+  languageName: node
+  linkType: hard
+
+"@oxc-resolver/binding-android-arm64@npm:11.21.2":
+  version: 11.21.2
+  resolution: "@oxc-resolver/binding-android-arm64@npm:11.21.2"
+  conditions: os=android & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@oxc-resolver/binding-darwin-arm64@npm:11.21.2":
+  version: 11.21.2
+  resolution: "@oxc-resolver/binding-darwin-arm64@npm:11.21.2"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@oxc-resolver/binding-darwin-x64@npm:11.21.2":
+  version: 11.21.2
+  resolution: "@oxc-resolver/binding-darwin-x64@npm:11.21.2"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@oxc-resolver/binding-freebsd-x64@npm:11.21.2":
+  version: 11.21.2
+  resolution: "@oxc-resolver/binding-freebsd-x64@npm:11.21.2"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@oxc-resolver/binding-linux-arm-gnueabihf@npm:11.21.2":
+  version: 11.21.2
+  resolution: "@oxc-resolver/binding-linux-arm-gnueabihf@npm:11.21.2"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
+"@oxc-resolver/binding-linux-arm-musleabihf@npm:11.21.2":
+  version: 11.21.2
+  resolution: "@oxc-resolver/binding-linux-arm-musleabihf@npm:11.21.2"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
+"@oxc-resolver/binding-linux-arm64-gnu@npm:11.21.2":
+  version: 11.21.2
+  resolution: "@oxc-resolver/binding-linux-arm64-gnu@npm:11.21.2"
+  conditions: os=linux & cpu=arm64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@oxc-resolver/binding-linux-arm64-musl@npm:11.21.2":
+  version: 11.21.2
+  resolution: "@oxc-resolver/binding-linux-arm64-musl@npm:11.21.2"
+  conditions: os=linux & cpu=arm64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@oxc-resolver/binding-linux-ppc64-gnu@npm:11.21.2":
+  version: 11.21.2
+  resolution: "@oxc-resolver/binding-linux-ppc64-gnu@npm:11.21.2"
+  conditions: os=linux & cpu=ppc64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@oxc-resolver/binding-linux-riscv64-gnu@npm:11.21.2":
+  version: 11.21.2
+  resolution: "@oxc-resolver/binding-linux-riscv64-gnu@npm:11.21.2"
+  conditions: os=linux & cpu=riscv64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@oxc-resolver/binding-linux-riscv64-musl@npm:11.21.2":
+  version: 11.21.2
+  resolution: "@oxc-resolver/binding-linux-riscv64-musl@npm:11.21.2"
+  conditions: os=linux & cpu=riscv64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@oxc-resolver/binding-linux-s390x-gnu@npm:11.21.2":
+  version: 11.21.2
+  resolution: "@oxc-resolver/binding-linux-s390x-gnu@npm:11.21.2"
+  conditions: os=linux & cpu=s390x & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@oxc-resolver/binding-linux-x64-gnu@npm:11.21.2":
+  version: 11.21.2
+  resolution: "@oxc-resolver/binding-linux-x64-gnu@npm:11.21.2"
+  conditions: os=linux & cpu=x64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@oxc-resolver/binding-linux-x64-musl@npm:11.21.2":
+  version: 11.21.2
+  resolution: "@oxc-resolver/binding-linux-x64-musl@npm:11.21.2"
+  conditions: os=linux & cpu=x64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@oxc-resolver/binding-openharmony-arm64@npm:11.21.2":
+  version: 11.21.2
+  resolution: "@oxc-resolver/binding-openharmony-arm64@npm:11.21.2"
+  conditions: os=openharmony & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@oxc-resolver/binding-wasm32-wasi@npm:11.21.2":
+  version: 11.21.2
+  resolution: "@oxc-resolver/binding-wasm32-wasi@npm:11.21.2"
+  dependencies:
+    "@emnapi/core": "npm:1.11.0"
+    "@emnapi/runtime": "npm:1.11.0"
+    "@napi-rs/wasm-runtime": "npm:^1.1.5"
+  conditions: cpu=wasm32
+  languageName: node
+  linkType: hard
+
+"@oxc-resolver/binding-win32-arm64-msvc@npm:11.21.2":
+  version: 11.21.2
+  resolution: "@oxc-resolver/binding-win32-arm64-msvc@npm:11.21.2"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@oxc-resolver/binding-win32-x64-msvc@npm:11.21.2":
+  version: 11.21.2
+  resolution: "@oxc-resolver/binding-win32-x64-msvc@npm:11.21.2"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@pixi/colord@npm:^2.9.6":
+  version: 2.9.6
+  resolution: "@pixi/colord@npm:2.9.6"
+  checksum: 10/62f56fa1dd881f30091973465046b7a50466923f42d8a1af33ccf06a13fbad3f68499ac025c6984b50f8913ac2f5cb8f4e4d2c96ce18c87637d54f1edcb3738b
+  languageName: node
+  linkType: hard
+
+"@pkgjs/parseargs@npm:^0.11.0":
+  version: 0.11.0
+  resolution: "@pkgjs/parseargs@npm:0.11.0"
+  checksum: 10/115e8ceeec6bc69dff2048b35c0ab4f8bbee12d8bb6c1f4af758604586d802b6e669dcb02dda61d078de42c2b4ddce41b3d9e726d7daa6b4b850f4adbf7333ff
+  languageName: node
+  linkType: hard
+
+"@pkgr/core@npm:^0.3.6":
+  version: 0.3.6
+  resolution: "@pkgr/core@npm:0.3.6"
+  checksum: 10/29082aa13d36f13fc41cdc64cb1feb36b630de0d6ebde84e2ff68e3d7a7f1dce4462cca91f76176c46e50bbca6b1e7f1fd9cf907af12d5d70da83bc981ca4ccf
+  languageName: node
+  linkType: hard
+
+"@polka/url@npm:^1.0.0-next.24":
+  version: 1.0.0-next.29
+  resolution: "@polka/url@npm:1.0.0-next.29"
+  checksum: 10/69ca11ab15a4ffec7f0b07fcc4e1f01489b3d9683a7e1867758818386575c60c213401259ba3705b8a812228d17e2bfd18e6f021194d943fff4bca389c9d4f28
+  languageName: node
+  linkType: hard
+
+"@react-types/shared@npm:^3.36.1":
+  version: 3.36.1
+  resolution: "@react-types/shared@npm:3.36.1"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 10/c7b720a8f3fea7cf2a3f4f6f2194f7942fd6b4afac0e280e2edcb06d11fb40f560ba7cb50105b2167793b5e998e8f093470a971765f700032b94c3973e069ec4
+  languageName: node
+  linkType: hard
+
+"@rolldown/binding-android-arm-eabi@npm:1.2.6":
+  version: 1.2.6
+  resolution: "@rolldown/binding-android-arm-eabi@npm:1.2.6"
+  conditions: os=android & cpu=arm
+  languageName: node
+  linkType: hard
+
+"@rolldown/binding-android-arm64@npm:1.2.6":
+  version: 1.2.6
+  resolution: "@rolldown/binding-android-arm64@npm:1.2.6"
+  conditions: os=android & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@rolldown/binding-darwin-arm64@npm:1.2.6":
+  version: 1.2.6
+  resolution: "@rolldown/binding-darwin-arm64@npm:1.2.6"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@rolldown/binding-darwin-x64@npm:1.2.6":
+  version: 1.2.6
+  resolution: "@rolldown/binding-darwin-x64@npm:1.2.6"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@rolldown/binding-freebsd-x64@npm:1.2.6":
+  version: 1.2.6
+  resolution: "@rolldown/binding-freebsd-x64@npm:1.2.6"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@rolldown/binding-linux-arm-gnueabihf@npm:1.2.6":
+  version: 1.2.6
+  resolution: "@rolldown/binding-linux-arm-gnueabihf@npm:1.2.6"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
+"@rolldown/binding-linux-arm64-gnu@npm:1.2.6":
+  version: 1.2.6
+  resolution: "@rolldown/binding-linux-arm64-gnu@npm:1.2.6"
+  conditions: os=linux & cpu=arm64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@rolldown/binding-linux-arm64-musl@npm:1.2.6":
+  version: 1.2.6
+  resolution: "@rolldown/binding-linux-arm64-musl@npm:1.2.6"
+  conditions: os=linux & cpu=arm64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@rolldown/binding-linux-ppc64-gnu@npm:1.2.6":
+  version: 1.2.6
+  resolution: "@rolldown/binding-linux-ppc64-gnu@npm:1.2.6"
+  conditions: os=linux & cpu=ppc64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@rolldown/binding-linux-s390x-gnu@npm:1.2.6":
+  version: 1.2.6
+  resolution: "@rolldown/binding-linux-s390x-gnu@npm:1.2.6"
+  conditions: os=linux & cpu=s390x & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@rolldown/binding-linux-x64-gnu@npm:1.2.6":
+  version: 1.2.6
+  resolution: "@rolldown/binding-linux-x64-gnu@npm:1.2.6"
+  conditions: os=linux & cpu=x64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@rolldown/binding-linux-x64-musl@npm:1.2.6":
+  version: 1.2.6
+  resolution: "@rolldown/binding-linux-x64-musl@npm:1.2.6"
+  conditions: os=linux & cpu=x64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@rolldown/binding-openharmony-arm64@npm:1.2.6":
+  version: 1.2.6
+  resolution: "@rolldown/binding-openharmony-arm64@npm:1.2.6"
+  conditions: os=openharmony & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@rolldown/binding-win32-arm64-msvc@npm:1.2.6":
+  version: 1.2.6
+  resolution: "@rolldown/binding-win32-arm64-msvc@npm:1.2.6"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@rolldown/binding-win32-x64-msvc@npm:1.2.6":
+  version: 1.2.6
+  resolution: "@rolldown/binding-win32-x64-msvc@npm:1.2.6"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@rolldown/pluginutils@npm:^1.0.0, @rolldown/pluginutils@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "@rolldown/pluginutils@npm:1.0.1"
+  checksum: 10/4e95cf9ce23d75e5aa03ea0249cd86f7d1e21f83fbf6f8520e4edd8a251ba1b82c4ba9bc13cd24b6c4661daec6225b06e6d35c64c604e731b230b2a49af47d05
+  languageName: node
+  linkType: hard
+
+"@rollup/plugin-node-resolve@npm:^16.0.3":
+  version: 16.0.3
+  resolution: "@rollup/plugin-node-resolve@npm:16.0.3"
+  dependencies:
+    "@rollup/pluginutils": "npm:^5.0.1"
+    "@types/resolve": "npm:1.20.2"
+    deepmerge: "npm:^4.2.2"
+    is-module: "npm:^1.0.0"
+    resolve: "npm:^1.22.1"
+  peerDependencies:
+    rollup: ^2.78.0||^3.0.0||^4.0.0
+  peerDependenciesMeta:
+    rollup:
+      optional: true
+  checksum: 10/6848212994adc5c3fcd851eb268ad58b3905c5535272ae51d33a7ac1590ff428d102afe81702e031b0360481798e61efc0194b4ee39b812a3ae274c998f4d424
+  languageName: node
+  linkType: hard
+
+"@rollup/plugin-typescript@npm:^12.3.0":
+  version: 12.3.0
+  resolution: "@rollup/plugin-typescript@npm:12.3.0"
+  dependencies:
+    "@rollup/pluginutils": "npm:^5.1.0"
+    resolve: "npm:^1.22.1"
+  peerDependencies:
+    rollup: ^2.14.0||^3.0.0||^4.0.0
+    tslib: "*"
+    typescript: ">=3.7.0"
+  peerDependenciesMeta:
+    rollup:
+      optional: true
+    tslib:
+      optional: true
+  checksum: 10/b9c14df24d1c5f09408e498bbc8a7b2394f0e3030abcd796f364a2c18135207f2002b3975f86ce57affb7270a26f91fba66268f11a7b5fc149872072d9c3e432
+  languageName: node
+  linkType: hard
+
+"@rollup/pluginutils@npm:^5.0.1, @rollup/pluginutils@npm:^5.0.2, @rollup/pluginutils@npm:^5.1.0":
+  version: 5.4.0
+  resolution: "@rollup/pluginutils@npm:5.4.0"
+  dependencies:
+    "@types/estree": "npm:^1.0.0"
+    estree-walker: "npm:^2.0.2"
+    picomatch: "npm:^4.0.2"
+  peerDependencies:
+    rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+  peerDependenciesMeta:
+    rollup:
+      optional: true
+  checksum: 10/eb1687d52c3847a27c5f6e790ee31a6a356c23e3c16222b4d7cf31d48dfaad2edc13e49355da9f2c59c90c1220cb089b36780cb95dc6d0ee54587f61cc5cf080
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-android-arm-eabi@npm:4.63.0":
+  version: 4.63.0
+  resolution: "@rollup/rollup-android-arm-eabi@npm:4.63.0"
+  conditions: os=android & cpu=arm
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-android-arm64@npm:4.63.0":
+  version: 4.63.0
+  resolution: "@rollup/rollup-android-arm64@npm:4.63.0"
+  conditions: os=android & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-darwin-arm64@npm:4.63.0":
+  version: 4.63.0
+  resolution: "@rollup/rollup-darwin-arm64@npm:4.63.0"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-darwin-x64@npm:4.63.0":
+  version: 4.63.0
+  resolution: "@rollup/rollup-darwin-x64@npm:4.63.0"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-freebsd-arm64@npm:4.63.0":
+  version: 4.63.0
+  resolution: "@rollup/rollup-freebsd-arm64@npm:4.63.0"
+  conditions: os=freebsd & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-freebsd-x64@npm:4.63.0":
+  version: 4.63.0
+  resolution: "@rollup/rollup-freebsd-x64@npm:4.63.0"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-linux-arm-gnueabihf@npm:4.63.0":
+  version: 4.63.0
+  resolution: "@rollup/rollup-linux-arm-gnueabihf@npm:4.63.0"
+  conditions: os=linux & cpu=arm & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-linux-arm-musleabihf@npm:4.63.0":
+  version: 4.63.0
+  resolution: "@rollup/rollup-linux-arm-musleabihf@npm:4.63.0"
+  conditions: os=linux & cpu=arm & libc=musl
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-linux-arm64-gnu@npm:4.63.0":
+  version: 4.63.0
+  resolution: "@rollup/rollup-linux-arm64-gnu@npm:4.63.0"
+  conditions: os=linux & cpu=arm64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-linux-arm64-musl@npm:4.63.0":
+  version: 4.63.0
+  resolution: "@rollup/rollup-linux-arm64-musl@npm:4.63.0"
+  conditions: os=linux & cpu=arm64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-linux-loong64-gnu@npm:4.63.0":
+  version: 4.63.0
+  resolution: "@rollup/rollup-linux-loong64-gnu@npm:4.63.0"
+  conditions: os=linux & cpu=loong64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-linux-loong64-musl@npm:4.63.0":
+  version: 4.63.0
+  resolution: "@rollup/rollup-linux-loong64-musl@npm:4.63.0"
+  conditions: os=linux & cpu=loong64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-linux-ppc64-gnu@npm:4.63.0":
+  version: 4.63.0
+  resolution: "@rollup/rollup-linux-ppc64-gnu@npm:4.63.0"
+  conditions: os=linux & cpu=ppc64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-linux-ppc64-musl@npm:4.63.0":
+  version: 4.63.0
+  resolution: "@rollup/rollup-linux-ppc64-musl@npm:4.63.0"
+  conditions: os=linux & cpu=ppc64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-linux-riscv64-gnu@npm:4.63.0":
+  version: 4.63.0
+  resolution: "@rollup/rollup-linux-riscv64-gnu@npm:4.63.0"
+  conditions: os=linux & cpu=riscv64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-linux-riscv64-musl@npm:4.63.0":
+  version: 4.63.0
+  resolution: "@rollup/rollup-linux-riscv64-musl@npm:4.63.0"
+  conditions: os=linux & cpu=riscv64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-linux-s390x-gnu@npm:4.63.0":
+  version: 4.63.0
+  resolution: "@rollup/rollup-linux-s390x-gnu@npm:4.63.0"
+  conditions: os=linux & cpu=s390x & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-linux-x64-gnu@npm:4.63.0":
+  version: 4.63.0
+  resolution: "@rollup/rollup-linux-x64-gnu@npm:4.63.0"
+  conditions: os=linux & cpu=x64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-linux-x64-musl@npm:4.63.0":
+  version: 4.63.0
+  resolution: "@rollup/rollup-linux-x64-musl@npm:4.63.0"
+  conditions: os=linux & cpu=x64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-openbsd-x64@npm:4.63.0":
+  version: 4.63.0
+  resolution: "@rollup/rollup-openbsd-x64@npm:4.63.0"
+  conditions: os=openbsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-openharmony-arm64@npm:4.63.0":
+  version: 4.63.0
+  resolution: "@rollup/rollup-openharmony-arm64@npm:4.63.0"
+  conditions: os=openharmony & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-win32-arm64-msvc@npm:4.63.0":
+  version: 4.63.0
+  resolution: "@rollup/rollup-win32-arm64-msvc@npm:4.63.0"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-win32-ia32-msvc@npm:4.63.0":
+  version: 4.63.0
+  resolution: "@rollup/rollup-win32-ia32-msvc@npm:4.63.0"
+  conditions: os=win32 & cpu=ia32
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-win32-x64-gnu@npm:4.63.0":
+  version: 4.63.0
+  resolution: "@rollup/rollup-win32-x64-gnu@npm:4.63.0"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-win32-x64-msvc@npm:4.63.0":
+  version: 4.63.0
+  resolution: "@rollup/rollup-win32-x64-msvc@npm:4.63.0"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@rtsao/scc@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "@rtsao/scc@npm:1.1.0"
+  checksum: 10/17d04adf404e04c1e61391ed97bca5117d4c2767a76ae3e879390d6dec7b317fcae68afbf9e98badee075d0b64fa60f287729c4942021b4d19cd01db77385c01
+  languageName: node
+  linkType: hard
+
+"@sinonjs/commons@npm:^3.0.1":
+  version: 3.0.1
+  resolution: "@sinonjs/commons@npm:3.0.1"
+  dependencies:
+    type-detect: "npm:4.0.8"
+  checksum: 10/a0af217ba7044426c78df52c23cedede6daf377586f3ac58857c565769358ab1f44ebf95ba04bbe38814fba6e316ca6f02870a009328294fc2c555d0f85a7117
+  languageName: node
+  linkType: hard
+
+"@sinonjs/fake-timers@npm:^15.4.0":
+  version: 15.4.0
+  resolution: "@sinonjs/fake-timers@npm:15.4.0"
+  dependencies:
+    "@sinonjs/commons": "npm:^3.0.1"
+  checksum: 10/3960a9fe065f38a4228c66d184eeb101e8a6af9cbfc8454dd5d45ac397201da72134048d4e808a25993494885b172dd6deecdad9949bbf4c1d3a220ef561f6cc
+  languageName: node
+  linkType: hard
+
+"@sinonjs/samsam@npm:^10.0.2":
+  version: 10.0.2
+  resolution: "@sinonjs/samsam@npm:10.0.2"
+  dependencies:
+    "@sinonjs/commons": "npm:^3.0.1"
+    type-detect: "npm:^4.1.0"
+  checksum: 10/5cab280f9ea1e5d42de6ea8b095377110b629043f2b52012eb128f0cbad293a6a9691e06735e115cc0a0ff5a85a47852298f762ea16b6d470c42b6d3f4961a07
+  languageName: node
+  linkType: hard
+
+"@standard-schema/spec@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "@standard-schema/spec@npm:1.1.0"
+  checksum: 10/a209615c9e8b2ea535d7db0a5f6aa0f962fd4ab73ee86a46c100fb78116964af1f55a27c1794d4801e534a196794223daa25ff5135021e03c7828aa3d95e1763
+  languageName: node
+  linkType: hard
+
+"@storybook/addon-a11y@npm:^10.5.10":
+  version: 10.5.10
+  resolution: "@storybook/addon-a11y@npm:10.5.10"
+  dependencies:
+    "@storybook/global": "npm:^5.0.0"
+    axe-core: "npm:^4.2.0"
+  peerDependencies:
+    storybook: ^10.5.10
+  checksum: 10/57c28b26657eb05670b82a500bdf0141247cb99ab587595aa4fe47bd8aa68c393e0f3ea4e3ae97c158c1b8a9090b1c044064915b463f608a9cb88efdea0f9a29
+  languageName: node
+  linkType: hard
+
+"@storybook/addon-docs@npm:^10.5.10":
+  version: 10.5.10
+  resolution: "@storybook/addon-docs@npm:10.5.10"
+  dependencies:
+    "@mdx-js/react": "npm:^3.0.0"
+    "@storybook/csf-plugin": "npm:10.5.10"
+    "@storybook/icons": "npm:^2.0.2"
+    "@storybook/react-dom-shim": "npm:10.5.10"
+    react: "npm:^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+    react-dom: "npm:^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+    ts-dedent: "npm:^2.0.0"
+  peerDependencies:
+    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    storybook: ^10.5.10
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/4e7129a2c3c61192db10a3189c4f17ffe2aa8a2750ab928d668336eeb1bbae5532e6221567798e0211df6c75986cb26f59ded0748fcb965b8156612ac4b561a1
+  languageName: node
+  linkType: hard
+
+"@storybook/addon-vitest@npm:^10.5.10":
+  version: 10.5.10
+  resolution: "@storybook/addon-vitest@npm:10.5.10"
+  dependencies:
+    "@storybook/global": "npm:^5.0.0"
+    "@storybook/icons": "npm:^2.0.2"
+  peerDependencies:
+    "@vitest/browser": ^3.0.0 || ^4.0.0
+    "@vitest/browser-playwright": ^4.0.0
+    "@vitest/runner": ^3.0.0 || ^4.0.0
+    storybook: ^10.5.10
+    vitest: ^3.0.0 || ^4.0.0
+  peerDependenciesMeta:
+    "@vitest/browser":
+      optional: true
+    "@vitest/browser-playwright":
+      optional: true
+    "@vitest/runner":
+      optional: true
+    vitest:
+      optional: true
+  checksum: 10/cb464ab5bc64d2e260938ad7e1ba32050fe576f0bfddb487e0cf0e0a8aba33a0cfb22a78a6881998ef426e20c741ab5014e69bdb25b76b06f626c280a70fc9b5
+  languageName: node
+  linkType: hard
+
+"@storybook/builder-vite@npm:10.5.10":
+  version: 10.5.10
+  resolution: "@storybook/builder-vite@npm:10.5.10"
+  dependencies:
+    "@storybook/csf-plugin": "npm:10.5.10"
+    ts-dedent: "npm:^2.0.0"
+  peerDependencies:
+    storybook: ^10.5.10
+    vite: ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
+  checksum: 10/1aeaa1443056cced84d477df37a83ff05ef2eaa919b62d50de438fe50a699e5e5ffba0dcfc1411fd8b043f7ac03bf1c1b574f52b538c923e843c17b70902e8e3
+  languageName: node
+  linkType: hard
+
+"@storybook/csf-plugin@npm:10.5.10":
+  version: 10.5.10
+  resolution: "@storybook/csf-plugin@npm:10.5.10"
+  dependencies:
+    unplugin: "npm:^2.3.5"
+  peerDependencies:
+    esbuild: "*"
+    rollup: "*"
+    storybook: ^10.5.10
+    vite: "*"
+    webpack: "*"
+  peerDependenciesMeta:
+    esbuild:
+      optional: true
+    rollup:
+      optional: true
+    vite:
+      optional: true
+    webpack:
+      optional: true
+  checksum: 10/9de8851f42d1735edc1a4621fd0efc09335f9b413701177a9aab56a586df9b1fe27a3dc8ce46658a9dd92251cb21dc517f36097caeb7b6ecaf00fa6bc179a7e8
+  languageName: node
+  linkType: hard
+
+"@storybook/global@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "@storybook/global@npm:5.0.0"
+  checksum: 10/0e7b495f4fe7f36447e793926f1c0460ec07fd66f0da68e3150da5878f6043c9eeb9b41614a45c5ec0d48d5d383c59ca8f88b6dc7882a2a784ac9b20375d8edb
+  languageName: node
+  linkType: hard
+
+"@storybook/icons@npm:^2.0.2":
+  version: 2.1.0
+  resolution: "@storybook/icons@npm:2.1.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+  checksum: 10/c2f093f3d117671f2c25e3fa498e066a0624e0d9ee9e60e38253a30d7e9120115d608d675da5c8a133f669f61309b6209f909fac3b687e667894463754f8ccfc
+  languageName: node
+  linkType: hard
+
+"@storybook/react-dom-shim@npm:10.5.10":
+  version: 10.5.10
+  resolution: "@storybook/react-dom-shim@npm:10.5.10"
+  peerDependencies:
+    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    "@types/react-dom": ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    storybook: ^10.5.10
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/a49874255b1b73471fd9eaf0cc3402f678177d39ced5737e94848a0b3a0e7dc349b90856c5f82a66c19e6be7e25e17d87245e3226e6e3b68003eee00af59f13a
+  languageName: node
+  linkType: hard
+
+"@storybook/react-vite@npm:^10.5.10":
+  version: 10.5.10
+  resolution: "@storybook/react-vite@npm:10.5.10"
+  dependencies:
+    "@joshwooding/vite-plugin-react-docgen-typescript": "npm:^0.7.0"
+    "@rollup/pluginutils": "npm:^5.0.2"
+    "@storybook/builder-vite": "npm:10.5.10"
+    "@storybook/react": "npm:10.5.10"
+    empathic: "npm:^2.0.0"
+    magic-string: "npm:^0.30.0"
+    react-docgen: "npm:^8.0.2"
+    resolve: "npm:^1.22.8"
+    tsconfig-paths: "npm:^4.2.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    storybook: ^10.5.10
+    typescript: ">= 4.9.x"
+    vite: ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: 10/6898d92755fcfd94bf3a7300a027a02420523797236f3e45c11b34d40ae485148e015a4b5c86d25e94c0a8a22e35623691db530864f20ebb7e49aeecd4fa50b3
+  languageName: node
+  linkType: hard
+
+"@storybook/react@npm:10.5.10, @storybook/react@npm:^10.5.10":
+  version: 10.5.10
+  resolution: "@storybook/react@npm:10.5.10"
+  dependencies:
+    "@storybook/global": "npm:^5.0.0"
+    "@storybook/react-dom-shim": "npm:10.5.10"
+    react-docgen: "npm:^8.0.2"
+    react-docgen-typescript: "npm:^2.2.2"
+  peerDependencies:
+    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    "@types/react-dom": ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    storybook: ^10.5.10
+    typescript: ">= 4.9.x"
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+    typescript:
+      optional: true
+  checksum: 10/312d1a391c52cdaf55c3b7c0c08c27e2c28ee641b373d006b5a44e10a480ca3dc4f85817d68e9f38e66f100997c90eae335170af63d0737292317ef1ae9bd2e2
+  languageName: node
+  linkType: hard
+
+"@swc/core-darwin-arm64@npm:1.16.1":
+  version: 1.16.1
+  resolution: "@swc/core-darwin-arm64@npm:1.16.1"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@swc/core-darwin-x64@npm:1.16.1":
+  version: 1.16.1
+  resolution: "@swc/core-darwin-x64@npm:1.16.1"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@swc/core-linux-arm-gnueabihf@npm:1.16.1":
+  version: 1.16.1
+  resolution: "@swc/core-linux-arm-gnueabihf@npm:1.16.1"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
+"@swc/core-linux-arm64-gnu@npm:1.16.1":
+  version: 1.16.1
+  resolution: "@swc/core-linux-arm64-gnu@npm:1.16.1"
+  conditions: os=linux & cpu=arm64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@swc/core-linux-arm64-musl@npm:1.16.1":
+  version: 1.16.1
+  resolution: "@swc/core-linux-arm64-musl@npm:1.16.1"
+  conditions: os=linux & cpu=arm64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@swc/core-linux-ppc64-gnu@npm:1.16.1":
+  version: 1.16.1
+  resolution: "@swc/core-linux-ppc64-gnu@npm:1.16.1"
+  conditions: os=linux & cpu=ppc64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@swc/core-linux-s390x-gnu@npm:1.16.1":
+  version: 1.16.1
+  resolution: "@swc/core-linux-s390x-gnu@npm:1.16.1"
+  conditions: os=linux & cpu=s390x & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@swc/core-linux-x64-gnu@npm:1.16.1":
+  version: 1.16.1
+  resolution: "@swc/core-linux-x64-gnu@npm:1.16.1"
+  conditions: os=linux & cpu=x64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@swc/core-linux-x64-musl@npm:1.16.1":
+  version: 1.16.1
+  resolution: "@swc/core-linux-x64-musl@npm:1.16.1"
+  conditions: os=linux & cpu=x64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@swc/core-win32-arm64-msvc@npm:1.16.1":
+  version: 1.16.1
+  resolution: "@swc/core-win32-arm64-msvc@npm:1.16.1"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@swc/core-win32-ia32-msvc@npm:1.16.1":
+  version: 1.16.1
+  resolution: "@swc/core-win32-ia32-msvc@npm:1.16.1"
+  conditions: os=win32 & cpu=ia32
+  languageName: node
+  linkType: hard
+
+"@swc/core-win32-x64-msvc@npm:1.16.1":
+  version: 1.16.1
+  resolution: "@swc/core-win32-x64-msvc@npm:1.16.1"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@swc/core@npm:^1.15.43":
+  version: 1.16.1
+  resolution: "@swc/core@npm:1.16.1"
+  dependencies:
+    "@swc/core-darwin-arm64": "npm:1.16.1"
+    "@swc/core-darwin-x64": "npm:1.16.1"
+    "@swc/core-linux-arm-gnueabihf": "npm:1.16.1"
+    "@swc/core-linux-arm64-gnu": "npm:1.16.1"
+    "@swc/core-linux-arm64-musl": "npm:1.16.1"
+    "@swc/core-linux-ppc64-gnu": "npm:1.16.1"
+    "@swc/core-linux-s390x-gnu": "npm:1.16.1"
+    "@swc/core-linux-x64-gnu": "npm:1.16.1"
+    "@swc/core-linux-x64-musl": "npm:1.16.1"
+    "@swc/core-win32-arm64-msvc": "npm:1.16.1"
+    "@swc/core-win32-ia32-msvc": "npm:1.16.1"
+    "@swc/core-win32-x64-msvc": "npm:1.16.1"
+    "@swc/counter": "npm:^0.1.3"
+    "@swc/types": "npm:^0.1.28"
+  peerDependencies:
+    "@swc/helpers": ">=0.5.17"
+  dependenciesMeta:
+    "@swc/core-darwin-arm64":
+      optional: true
+    "@swc/core-darwin-x64":
+      optional: true
+    "@swc/core-linux-arm-gnueabihf":
+      optional: true
+    "@swc/core-linux-arm64-gnu":
+      optional: true
+    "@swc/core-linux-arm64-musl":
+      optional: true
+    "@swc/core-linux-ppc64-gnu":
+      optional: true
+    "@swc/core-linux-s390x-gnu":
+      optional: true
+    "@swc/core-linux-x64-gnu":
+      optional: true
+    "@swc/core-linux-x64-musl":
+      optional: true
+    "@swc/core-win32-arm64-msvc":
+      optional: true
+    "@swc/core-win32-ia32-msvc":
+      optional: true
+    "@swc/core-win32-x64-msvc":
+      optional: true
+  peerDependenciesMeta:
+    "@swc/helpers":
+      optional: true
+  checksum: 10/787701e0d814628e5ffd6a7d03be393b5e878a15f01e8b3a706a03cc553e3e151cf1e44a119c8f8692f046d9a306493d973dc4e5da17a6f425209bb1071d0cb1
+  languageName: node
+  linkType: hard
+
+"@swc/counter@npm:^0.1.3":
+  version: 0.1.3
+  resolution: "@swc/counter@npm:0.1.3"
+  checksum: 10/df8f9cfba9904d3d60f511664c70d23bb323b3a0803ec9890f60133954173047ba9bdeabce28cd70ba89ccd3fd6c71c7b0bd58be85f611e1ffbe5d5c18616598
+  languageName: node
+  linkType: hard
+
+"@swc/helpers@npm:^0.5.0":
+  version: 0.5.23
+  resolution: "@swc/helpers@npm:0.5.23"
+  dependencies:
+    tslib: "npm:^2.8.0"
+  checksum: 10/899c9761e827d5bf504bd02067596cfe59ad6c7d6b6f0691a2fb05acf3e6c2954ddece7e15d4a6a81e8d95c81500652e6abec326c6c9bbb50bc3e2141696de43
+  languageName: node
+  linkType: hard
+
+"@swc/types@npm:^0.1.28":
+  version: 0.1.28
+  resolution: "@swc/types@npm:0.1.28"
+  dependencies:
+    "@swc/counter": "npm:^0.1.3"
+  checksum: 10/9cd2b13a640c36d28235a30567dc38330e01dc54ba0ca6ff4000fc56f0be27252b91c3df4989a9ef019b9df9eb722e73fb273913675f8b891428981fb9cc9a0f
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/node@npm:4.3.3":
+  version: 4.3.3
+  resolution: "@tailwindcss/node@npm:4.3.3"
+  dependencies:
+    "@jridgewell/remapping": "npm:^2.3.5"
+    enhanced-resolve: "npm:^5.24.1"
+    jiti: "npm:^2.7.0"
+    lightningcss: "npm:1.32.0"
+    magic-string: "npm:^0.30.21"
+    source-map-js: "npm:^1.2.1"
+    tailwindcss: "npm:4.3.3"
+  checksum: 10/be06a304f6ec14f13209b0749ca1195a4272e6dca4cf31feb7afa63e0c8d9fc0a2bd3e30ea688bbe43768b6adbb8d42dfffc82a9fada90fd846a28421d89292b
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-android-arm64@npm:4.3.3":
+  version: 4.3.3
+  resolution: "@tailwindcss/oxide-android-arm64@npm:4.3.3"
+  conditions: os=android & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-darwin-arm64@npm:4.3.3":
+  version: 4.3.3
+  resolution: "@tailwindcss/oxide-darwin-arm64@npm:4.3.3"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-darwin-x64@npm:4.3.3":
+  version: 4.3.3
+  resolution: "@tailwindcss/oxide-darwin-x64@npm:4.3.3"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-freebsd-x64@npm:4.3.3":
+  version: 4.3.3
+  resolution: "@tailwindcss/oxide-freebsd-x64@npm:4.3.3"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-linux-arm-gnueabihf@npm:4.3.3":
+  version: 4.3.3
+  resolution: "@tailwindcss/oxide-linux-arm-gnueabihf@npm:4.3.3"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-linux-arm64-gnu@npm:4.3.3":
+  version: 4.3.3
+  resolution: "@tailwindcss/oxide-linux-arm64-gnu@npm:4.3.3"
+  conditions: os=linux & cpu=arm64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-linux-arm64-musl@npm:4.3.3":
+  version: 4.3.3
+  resolution: "@tailwindcss/oxide-linux-arm64-musl@npm:4.3.3"
+  conditions: os=linux & cpu=arm64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-linux-x64-gnu@npm:4.3.3":
+  version: 4.3.3
+  resolution: "@tailwindcss/oxide-linux-x64-gnu@npm:4.3.3"
+  conditions: os=linux & cpu=x64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-linux-x64-musl@npm:4.3.3":
+  version: 4.3.3
+  resolution: "@tailwindcss/oxide-linux-x64-musl@npm:4.3.3"
+  conditions: os=linux & cpu=x64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-wasm32-wasi@npm:4.3.3":
+  version: 4.3.3
+  resolution: "@tailwindcss/oxide-wasm32-wasi@npm:4.3.3"
+  dependencies:
+    "@emnapi/core": "npm:^1.11.1"
+    "@emnapi/runtime": "npm:^1.11.1"
+    "@emnapi/wasi-threads": "npm:^1.2.2"
+    "@napi-rs/wasm-runtime": "npm:^1.1.4"
+    "@tybys/wasm-util": "npm:^0.10.2"
+    tslib: "npm:^2.8.1"
+  conditions: cpu=wasm32
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-win32-arm64-msvc@npm:4.3.3":
+  version: 4.3.3
+  resolution: "@tailwindcss/oxide-win32-arm64-msvc@npm:4.3.3"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-win32-x64-msvc@npm:4.3.3":
+  version: 4.3.3
+  resolution: "@tailwindcss/oxide-win32-x64-msvc@npm:4.3.3"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide@npm:4.3.3":
+  version: 4.3.3
+  resolution: "@tailwindcss/oxide@npm:4.3.3"
+  dependencies:
+    "@tailwindcss/oxide-android-arm64": "npm:4.3.3"
+    "@tailwindcss/oxide-darwin-arm64": "npm:4.3.3"
+    "@tailwindcss/oxide-darwin-x64": "npm:4.3.3"
+    "@tailwindcss/oxide-freebsd-x64": "npm:4.3.3"
+    "@tailwindcss/oxide-linux-arm-gnueabihf": "npm:4.3.3"
+    "@tailwindcss/oxide-linux-arm64-gnu": "npm:4.3.3"
+    "@tailwindcss/oxide-linux-arm64-musl": "npm:4.3.3"
+    "@tailwindcss/oxide-linux-x64-gnu": "npm:4.3.3"
+    "@tailwindcss/oxide-linux-x64-musl": "npm:4.3.3"
+    "@tailwindcss/oxide-wasm32-wasi": "npm:4.3.3"
+    "@tailwindcss/oxide-win32-arm64-msvc": "npm:4.3.3"
+    "@tailwindcss/oxide-win32-x64-msvc": "npm:4.3.3"
+  dependenciesMeta:
+    "@tailwindcss/oxide-android-arm64":
+      optional: true
+    "@tailwindcss/oxide-darwin-arm64":
+      optional: true
+    "@tailwindcss/oxide-darwin-x64":
+      optional: true
+    "@tailwindcss/oxide-freebsd-x64":
+      optional: true
+    "@tailwindcss/oxide-linux-arm-gnueabihf":
+      optional: true
+    "@tailwindcss/oxide-linux-arm64-gnu":
+      optional: true
+    "@tailwindcss/oxide-linux-arm64-musl":
+      optional: true
+    "@tailwindcss/oxide-linux-x64-gnu":
+      optional: true
+    "@tailwindcss/oxide-linux-x64-musl":
+      optional: true
+    "@tailwindcss/oxide-wasm32-wasi":
+      optional: true
+    "@tailwindcss/oxide-win32-arm64-msvc":
+      optional: true
+    "@tailwindcss/oxide-win32-x64-msvc":
+      optional: true
+  checksum: 10/c9b3b61e6844a1bb5038a43819f22bcd6a1633cd555a22a6cebbc87df196c4d51dac0357fa3c1fcd453fa54a6f438023846374b6246854e2fcbc05ccb42ed588
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/postcss@npm:^4.3.3":
+  version: 4.3.3
+  resolution: "@tailwindcss/postcss@npm:4.3.3"
+  dependencies:
+    "@alloc/quick-lru": "npm:^5.2.0"
+    "@tailwindcss/node": "npm:4.3.3"
+    "@tailwindcss/oxide": "npm:4.3.3"
+    postcss: "npm:^8.5.16"
+    tailwindcss: "npm:4.3.3"
+  checksum: 10/b461241d38f035ab6fbcd2ff9dc32e5a9ffe8eb2a309a8eec34013ca035f9ba59f71cb918e60dffed0a02a003b56bae982e56634cbb4d17c67c7d9099c150343
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/vite@npm:^4.3.3":
+  version: 4.3.3
+  resolution: "@tailwindcss/vite@npm:4.3.3"
+  dependencies:
+    "@tailwindcss/node": "npm:4.3.3"
+    "@tailwindcss/oxide": "npm:4.3.3"
+    tailwindcss: "npm:4.3.3"
+  peerDependencies:
+    vite: ^5.2.0 || ^6 || ^7 || ^8
+  checksum: 10/b1caee2e27b15d30513f578cc51722c46b5c53a711ab562cea9fe98ed473c19c85b12e5f54ad4b8e47d9bfe3bce91c591fe798c64ec6baf3034c26a1e64cee77
+  languageName: node
+  linkType: hard
+
+"@testing-library/dom@npm:^10.4.1":
+  version: 10.4.1
+  resolution: "@testing-library/dom@npm:10.4.1"
+  dependencies:
+    "@babel/code-frame": "npm:^7.10.4"
+    "@babel/runtime": "npm:^7.12.5"
+    "@types/aria-query": "npm:^5.0.1"
+    aria-query: "npm:5.3.0"
+    dom-accessibility-api: "npm:^0.5.9"
+    lz-string: "npm:^1.5.0"
+    picocolors: "npm:1.1.1"
+    pretty-format: "npm:^27.0.2"
+  checksum: 10/7f93e09ea015f151f8b8f42cbab0b2b858999b5445f15239a72a612ef7716e672b14c40c421218194cf191cbecbde0afa6f3dc2cc83dda93ff6a4fb0237df6e6
+  languageName: node
+  linkType: hard
+
+"@testing-library/jest-dom@npm:6.9.1":
+  version: 6.9.1
+  resolution: "@testing-library/jest-dom@npm:6.9.1"
+  dependencies:
+    "@adobe/css-tools": "npm:^4.4.0"
+    aria-query: "npm:^5.0.0"
+    css.escape: "npm:^1.5.1"
+    dom-accessibility-api: "npm:^0.6.3"
+    picocolors: "npm:^1.1.1"
+    redent: "npm:^3.0.0"
+  checksum: 10/409b4f519e4c68f4d31e3b0317338cc19098b9029513fca61aa2af8270086ae3956a1eaedd19bbce2d2c9e2cf9ff27a616c06556be7a26e101c0d529a0062233
+  languageName: node
+  linkType: hard
+
+"@testing-library/user-event@npm:^14.6.1":
+  version: 14.6.6
+  resolution: "@testing-library/user-event@npm:14.6.6"
+  peerDependencies:
+    "@testing-library/dom": ">=7.21.4"
+  checksum: 10/6049d2e705511e44a6ecf89f8bd7f443fb2c0feef2fb9749398cfb65b7999b32d0efe0f4e32730194c9a4ca8ee0f14bf51aca997347ce667b68f088cb72c4c9f
+  languageName: node
+  linkType: hard
+
+"@tony.ganchev/eslint-plugin-header@npm:^3.4.4":
+  version: 3.4.4
+  resolution: "@tony.ganchev/eslint-plugin-header@npm:3.4.4"
+  peerDependencies:
+    eslint: ">=7.7.0"
+  checksum: 10/480a009965bf2999f5c467194631a294c6bccc5440f493a8b5ce302dd4ca435b25a55ac27666a140c394555ff43699afd92f336db646cb998921aee9fb8d1d8f
+  languageName: node
+  linkType: hard
+
+"@tsconfig/node10@npm:^1.0.7":
+  version: 1.0.13
+  resolution: "@tsconfig/node10@npm:1.0.13"
+  checksum: 10/7c79dc05f1a915a900e27013554feec73ff4d3c9caffee14d30202728cb3bcf3f205c1adfb7fc461d53ee76b538b91dedbb2cdf760059e1773ba1b9607dbe074
+  languageName: node
+  linkType: hard
+
+"@tsconfig/node12@npm:^1.0.7":
+  version: 1.0.11
+  resolution: "@tsconfig/node12@npm:1.0.11"
+  checksum: 10/5ce29a41b13e7897a58b8e2df11269c5395999e588b9a467386f99d1d26f6c77d1af2719e407621412520ea30517d718d5192a32403b8dfcc163bf33e40a338a
+  languageName: node
+  linkType: hard
+
+"@tsconfig/node14@npm:^1.0.0":
+  version: 1.0.3
+  resolution: "@tsconfig/node14@npm:1.0.3"
+  checksum: 10/19275fe80c4c8d0ad0abed6a96dbf00642e88b220b090418609c4376e1cef81bf16237bf170ad1b341452feddb8115d8dd2e5acdfdea1b27422071163dc9ba9d
+  languageName: node
+  linkType: hard
+
+"@tsconfig/node16@npm:^1.0.2":
+  version: 1.0.4
+  resolution: "@tsconfig/node16@npm:1.0.4"
+  checksum: 10/202319785901f942a6e1e476b872d421baec20cf09f4b266a1854060efbf78cde16a4d256e8bc949d31e6cd9a90f1e8ef8fb06af96a65e98338a2b6b0de0a0ff
+  languageName: node
+  linkType: hard
+
+"@tybys/wasm-util@npm:^0.10.2, @tybys/wasm-util@npm:^0.10.3":
+  version: 0.10.3
+  resolution: "@tybys/wasm-util@npm:0.10.3"
+  dependencies:
+    tslib: "npm:^2.4.0"
+  checksum: 10/6cf39f7a2926b1c8bc6fe3f9f03318a33dd6dae81bdbd059983f9c6ee22d10a827f12564d648c05a2d4926e03c86cbe2799fb20609ee65e9efc39603039b4765
+  languageName: node
+  linkType: hard
+
+"@types/aria-query@npm:^5.0.1":
+  version: 5.0.4
+  resolution: "@types/aria-query@npm:5.0.4"
+  checksum: 10/c0084c389dc030daeaf0115a92ce43a3f4d42fc8fef2d0e22112d87a42798d4a15aac413019d4a63f868327d52ad6740ab99609462b442fe6b9286b172d2e82e
+  languageName: node
+  linkType: hard
+
+"@types/babel__core@npm:^7.20.5":
+  version: 7.20.5
+  resolution: "@types/babel__core@npm:7.20.5"
+  dependencies:
+    "@babel/parser": "npm:^7.20.7"
+    "@babel/types": "npm:^7.20.7"
+    "@types/babel__generator": "npm:*"
+    "@types/babel__template": "npm:*"
+    "@types/babel__traverse": "npm:*"
+  checksum: 10/c32838d280b5ab59d62557f9e331d3831f8e547ee10b4f85cb78753d97d521270cebfc73ce501e9fb27fe71884d1ba75e18658692c2f4117543f0fc4e3e118b3
+  languageName: node
+  linkType: hard
+
+"@types/babel__generator@npm:*":
+  version: 7.27.0
+  resolution: "@types/babel__generator@npm:7.27.0"
+  dependencies:
+    "@babel/types": "npm:^7.0.0"
+  checksum: 10/f572e67a9a39397664350a4437d8a7fbd34acc83ff4887a8cf08349e39f8aeb5ad2f70fb78a0a0a23a280affe3a5f4c25f50966abdce292bcf31237af1c27b1a
+  languageName: node
+  linkType: hard
+
+"@types/babel__template@npm:*":
+  version: 7.4.4
+  resolution: "@types/babel__template@npm:7.4.4"
+  dependencies:
+    "@babel/parser": "npm:^7.1.0"
+    "@babel/types": "npm:^7.0.0"
+  checksum: 10/d7a02d2a9b67e822694d8e6a7ddb8f2b71a1d6962dfd266554d2513eefbb205b33ca71a0d163b1caea3981ccf849211f9964d8bd0727124d18ace45aa6c9ae29
+  languageName: node
+  linkType: hard
+
+"@types/babel__traverse@npm:*, @types/babel__traverse@npm:^7.20.7":
+  version: 7.28.0
+  resolution: "@types/babel__traverse@npm:7.28.0"
+  dependencies:
+    "@babel/types": "npm:^7.28.2"
+  checksum: 10/371c5e1b40399ef17570e630b2943617b84fafde2860a56f0ebc113d8edb1d0534ade0175af89eda1ae35160903c33057ed42457e165d4aa287fedab2c82abcf
+  languageName: node
+  linkType: hard
+
+"@types/chai-as-promised@npm:^8.0.2":
+  version: 8.0.2
+  resolution: "@types/chai-as-promised@npm:8.0.2"
+  dependencies:
+    "@types/chai": "npm:*"
+  checksum: 10/c1ff3eb32f599623f3d78ef6a2bbda06f35f62e12cc6341e1e1deb5ff1652898880d93846ad83dab03d7cb633a5939330eb1af120b52fab46eb2e5321c2d0cdc
+  languageName: node
+  linkType: hard
+
+"@types/chai@npm:*, @types/chai@npm:^5.2.2, @types/chai@npm:^5.2.3":
+  version: 5.2.3
+  resolution: "@types/chai@npm:5.2.3"
+  dependencies:
+    "@types/deep-eql": "npm:*"
+    assertion-error: "npm:^2.0.1"
+  checksum: 10/e79947307dc235953622e65f83d2683835212357ca261389116ab90bed369ac862ba28b146b4fed08b503ae1e1a12cb93ce783f24bb8d562950469f4320e1c7c
+  languageName: node
+  linkType: hard
+
+"@types/deep-eql@npm:*":
+  version: 4.0.2
+  resolution: "@types/deep-eql@npm:4.0.2"
+  checksum: 10/249a27b0bb22f6aa28461db56afa21ec044fa0e303221a62dff81831b20c8530502175f1a49060f7099e7be06181078548ac47c668de79ff9880241968d43d0c
+  languageName: node
+  linkType: hard
+
+"@types/doctrine@npm:^0.0.9":
+  version: 0.0.9
+  resolution: "@types/doctrine@npm:0.0.9"
+  checksum: 10/64ef06e6eea2f4f9684d259fedbcb8bf21c954630b96ea2e04875ca42763552b0ba3b01b3dd27ec0f9ea6f8b3b0dba4965d31d5a925cd4c6225fd13a93ae9354
+  languageName: node
+  linkType: hard
+
+"@types/earcut@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "@types/earcut@npm:3.0.0"
+  checksum: 10/f36a07fe004b38116078a8548e43cf56b56d92e61af4c20cd7f95952ed18313eca9035ddf86bdce2945d8b58c4969182e47ae2196cac5ac4b5d752d094370060
+  languageName: node
+  linkType: hard
+
+"@types/esrecurse@npm:^4.3.1":
+  version: 4.3.1
+  resolution: "@types/esrecurse@npm:4.3.1"
+  checksum: 10/ada5798554b76ac466e90fff26a769b65f905666f32988dcd1b6cf8288896e0fb53080843fd644bf731d16719a6e09b155d623ce36545b75abdd99bb6dcec114
+  languageName: node
+  linkType: hard
+
+"@types/estree@npm:1.0.9, @types/estree@npm:^1.0.0, @types/estree@npm:^1.0.6, @types/estree@npm:^1.0.8":
+  version: 1.0.9
+  resolution: "@types/estree@npm:1.0.9"
+  checksum: 10/16aabfa703b5bdac83f719b07ce92a11b2d3c9b8628eacc92889d8af46cab2d78fc45c7b5378de383d0500585cea5c2f79125eeddfe5fbc6bd6a27eb0c8ccee5
+  languageName: node
+  linkType: hard
+
+"@types/json-schema@npm:^7.0.15":
+  version: 7.0.15
+  resolution: "@types/json-schema@npm:7.0.15"
+  checksum: 10/1a3c3e06236e4c4aab89499c428d585527ce50c24fe8259e8b3926d3df4cfbbbcf306cfc73ddfb66cbafc973116efd15967020b0f738f63e09e64c7d260519e7
+  languageName: node
+  linkType: hard
+
+"@types/json5@npm:^0.0.29":
+  version: 0.0.29
+  resolution: "@types/json5@npm:0.0.29"
+  checksum: 10/4e5aed58cabb2bbf6f725da13421aa50a49abb6bc17bfab6c31b8774b073fa7b50d557c61f961a09a85f6056151190f8ac95f13f5b48136ba5841f7d4484ec56
+  languageName: node
+  linkType: hard
+
+"@types/mdx@npm:^2.0.0":
+  version: 2.0.14
+  resolution: "@types/mdx@npm:2.0.14"
+  checksum: 10/bb485c22c6f57b1f17437c889671859ce99160d97da9f72036fd57a8db22127088dde783bf19df975858fde69c2fc92349f6f39a803e51e823549967db282ae8
+  languageName: node
+  linkType: hard
+
+"@types/mocha@npm:^10.0.10":
+  version: 10.0.10
+  resolution: "@types/mocha@npm:10.0.10"
+  checksum: 10/4e3b61ed5112add86891a5dd3ebdd087714f5e1784a63d47a96424c0825058fd07074e85e43573462f751636c92808fc18a5f3862fe45e649ea98fdc5a3ee2ea
+  languageName: node
+  linkType: hard
+
+"@types/node@npm:^26.3.0":
+  version: 26.4.0
+  resolution: "@types/node@npm:26.4.0"
+  dependencies:
+    undici-types: "npm:~8.3.0"
+  checksum: 10/90e2a82f8c17200c74515753ed48f6e13987b657d4c93e9b9922860a0abef0627b66037eb77d2a315d0255e9cd0115d71e791d13446ec02d93f85d8ab02dec69
+  languageName: node
+  linkType: hard
+
+"@types/react-dom@npm:^19.2.5":
+  version: 19.2.5
+  resolution: "@types/react-dom@npm:19.2.5"
+  peerDependencies:
+    "@types/react": ^19.2.0
+  checksum: 10/e6b752ad923b70638a44bb537d2866bed98f08bba973bc2199365875c003abe1e5f0e5a6d73ba8778e97f13eca36fdb2ab47f530793238eff92e4df04df18f70
+  languageName: node
+  linkType: hard
+
+"@types/react@npm:^19.2.18":
+  version: 19.2.18
+  resolution: "@types/react@npm:19.2.18"
+  dependencies:
+    csstype: "npm:^3.2.2"
+  checksum: 10/c718ec5c5272ef5c1c77fcdd07f567c77197b593583539459b4bdaea89ca55ad7c814b7eb2151dccfa459b2c384b599a45e7e35550b789883d66b363d30c94d8
+  languageName: node
+  linkType: hard
+
+"@types/resolve@npm:1.20.2":
+  version: 1.20.2
+  resolution: "@types/resolve@npm:1.20.2"
+  checksum: 10/1bff0d3875e7e1557b6c030c465beca9bf3b1173ebc6937cac547654b0af3bb3ff0f16470e9c4d7c5dc308ad9ac8627c38dbff24ef698b66673ff5bd4ead7f7e
+  languageName: node
+  linkType: hard
+
+"@types/resolve@npm:^1.20.2":
+  version: 1.20.6
+  resolution: "@types/resolve@npm:1.20.6"
+  checksum: 10/dc35f5517606b6687cd971c0281ac58bdee2c50c051b030f04647d3991688be2259c304ee97e5b5d4b9936072c36767eb5933b54611a407d6557972bb6fea4f6
+  languageName: node
+  linkType: hard
+
+"@types/sinon-chai@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "@types/sinon-chai@npm:4.0.0"
+  dependencies:
+    "@types/chai": "npm:*"
+    "@types/sinon": "npm:*"
+  checksum: 10/b93f81dbb73e6f7319f3077dece80bbfca4fdd2b512b07f81fb3ee2e1a2e517fc497c6f91880118b7dcce1a281d53bca1e75cb53a5dcef9188df92c3a6405475
+  languageName: node
+  linkType: hard
+
+"@types/sinon@npm:*, @types/sinon@npm:^22.0.0":
+  version: 22.0.0
+  resolution: "@types/sinon@npm:22.0.0"
+  dependencies:
+    "@types/sinonjs__fake-timers": "npm:*"
+  checksum: 10/19f27c42ad9960934d7a32b3a37ad545eb41f048733fb6b9b79a00083156b4f9a9180b664f40b8688b233ce6d1aa51de445ba8d35f98dbfded152b876692641b
+  languageName: node
+  linkType: hard
+
+"@types/sinonjs__fake-timers@npm:*":
+  version: 15.0.1
+  resolution: "@types/sinonjs__fake-timers@npm:15.0.1"
+  checksum: 10/9fa7a129742262ef4ea9c3253683453c42c2e210cdff1456e233bc9b59f6d60ef8121b32a00209a1c8c7759f88511862dab1ce340081e432515418fc44d8ec35
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/eslint-plugin@npm:8.68.0, @typescript-eslint/eslint-plugin@npm:^8.68.0":
+  version: 8.68.0
+  resolution: "@typescript-eslint/eslint-plugin@npm:8.68.0"
+  dependencies:
+    "@eslint-community/regexpp": "npm:^4.12.2"
+    "@typescript-eslint/scope-manager": "npm:8.68.0"
+    "@typescript-eslint/type-utils": "npm:8.68.0"
+    "@typescript-eslint/utils": "npm:8.68.0"
+    "@typescript-eslint/visitor-keys": "npm:8.68.0"
+    ignore: "npm:^7.0.5"
+    natural-compare: "npm:^1.4.0"
+    ts-api-utils: "npm:^2.5.0"
+  peerDependencies:
+    "@typescript-eslint/parser": ^8.68.0
+    eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+    typescript: ">=4.8.4 <6.1.0"
+  checksum: 10/8776fd8ffde8eceae3b1aeca57e528e8ee61a683223c3bef455ca3c5e28e52275e6cd6ebf8ee284a46883e6220bbf297312084e1ee85e00cef017a78c169a674
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/parser@npm:8.68.0, @typescript-eslint/parser@npm:^8.68.0":
+  version: 8.68.0
+  resolution: "@typescript-eslint/parser@npm:8.68.0"
+  dependencies:
+    "@typescript-eslint/scope-manager": "npm:8.68.0"
+    "@typescript-eslint/types": "npm:8.68.0"
+    "@typescript-eslint/typescript-estree": "npm:8.68.0"
+    "@typescript-eslint/visitor-keys": "npm:8.68.0"
+    debug: "npm:^4.4.3"
+  peerDependencies:
+    eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+    typescript: ">=4.8.4 <6.1.0"
+  checksum: 10/979ae0d2c6a391fd5b9b0218189fda5112ff0b5ab2538eef1da4cd77ac8ae46f9b590db9779f2614bd193105b40cf12635b565c840f4cdbbb4a683e24cf5ec4b
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/project-service@npm:8.68.0":
+  version: 8.68.0
+  resolution: "@typescript-eslint/project-service@npm:8.68.0"
+  dependencies:
+    "@typescript-eslint/tsconfig-utils": "npm:^8.68.0"
+    "@typescript-eslint/types": "npm:^8.68.0"
+    debug: "npm:^4.4.3"
+  peerDependencies:
+    typescript: ">=4.8.4 <6.1.0"
+  checksum: 10/37521df3731f9069c7df55362342dd0027f43947241de33c2a1c029b4553fe092e2ac69a534153aaf08c862e6b2390d864cb6c88a0714fc276395390df276fb6
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/scope-manager@npm:8.68.0":
+  version: 8.68.0
+  resolution: "@typescript-eslint/scope-manager@npm:8.68.0"
+  dependencies:
+    "@typescript-eslint/types": "npm:8.68.0"
+    "@typescript-eslint/visitor-keys": "npm:8.68.0"
+  checksum: 10/494d499315b4f3ab8eaa114aa53a4b2b9f533b82eb007cd5b5617cececfd8ad6938edb74f734479ae6e40a4086f510b6b984de8e66d06c518cb47817549db780
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/tsconfig-utils@npm:8.68.0, @typescript-eslint/tsconfig-utils@npm:^8.68.0":
+  version: 8.68.0
+  resolution: "@typescript-eslint/tsconfig-utils@npm:8.68.0"
+  peerDependencies:
+    typescript: ">=4.8.4 <6.1.0"
+  checksum: 10/b527a7c5deaad40bb72f78eec1bfea5997a7e792e64666984605e9a167246cf856c8d40290a7b3d39cefb3a242538e22a3a4fc136132e4669a314887e2de5f08
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/type-utils@npm:8.68.0":
+  version: 8.68.0
+  resolution: "@typescript-eslint/type-utils@npm:8.68.0"
+  dependencies:
+    "@typescript-eslint/types": "npm:8.68.0"
+    "@typescript-eslint/typescript-estree": "npm:8.68.0"
+    "@typescript-eslint/utils": "npm:8.68.0"
+    debug: "npm:^4.4.3"
+    ts-api-utils: "npm:^2.5.0"
+  peerDependencies:
+    eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+    typescript: ">=4.8.4 <6.1.0"
+  checksum: 10/ed6b6fe74eee017a79c9dbfa72b3a08748dac8de5702314494d8849feee516c20e2907ad730fd82e50be81c5984c575b29e35eb8b5c99091445b4bc5102ce836
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/types@npm:8.68.0, @typescript-eslint/types@npm:^8.68.0":
+  version: 8.68.0
+  resolution: "@typescript-eslint/types@npm:8.68.0"
+  checksum: 10/f9337e0263d95e6edca6e364f9b1f70d5840b9648b5aa0d02065bcee5809a50c92d024ba17b458182ec4e7fffe5efd05584f1667b1e43ff3e7121b218283a207
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/typescript-estree@npm:8.68.0":
+  version: 8.68.0
+  resolution: "@typescript-eslint/typescript-estree@npm:8.68.0"
+  dependencies:
+    "@typescript-eslint/project-service": "npm:8.68.0"
+    "@typescript-eslint/tsconfig-utils": "npm:8.68.0"
+    "@typescript-eslint/types": "npm:8.68.0"
+    "@typescript-eslint/visitor-keys": "npm:8.68.0"
+    debug: "npm:^4.4.3"
+    minimatch: "npm:^10.2.2"
+    semver: "npm:^7.7.3"
+    tinyglobby: "npm:^0.2.15"
+    ts-api-utils: "npm:^2.5.0"
+  peerDependencies:
+    typescript: ">=4.8.4 <6.1.0"
+  checksum: 10/47d75cbc9c10842aeb3c1cc8d0625bd578b3b43b75d3dc86d3543a739b2fc8d0b524fd86b5af1f1493a3f0ae1b9e65c3200bf01a6bde0162efe6414708eac553
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/utils@npm:8.68.0":
+  version: 8.68.0
+  resolution: "@typescript-eslint/utils@npm:8.68.0"
+  dependencies:
+    "@eslint-community/eslint-utils": "npm:^4.9.1"
+    "@typescript-eslint/scope-manager": "npm:8.68.0"
+    "@typescript-eslint/types": "npm:8.68.0"
+    "@typescript-eslint/typescript-estree": "npm:8.68.0"
+  peerDependencies:
+    eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+    typescript: ">=4.8.4 <6.1.0"
+  checksum: 10/6581a1e7ced23cce82279df001d643844c97408bc84826da77ec77d52b77047004b202ff8cfcfbc0b0fef15bf2cafb5ae21bafbda24c9b58102ce634f66c2af9
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/visitor-keys@npm:8.68.0":
+  version: 8.68.0
+  resolution: "@typescript-eslint/visitor-keys@npm:8.68.0"
+  dependencies:
+    "@typescript-eslint/types": "npm:8.68.0"
+    eslint-visitor-keys: "npm:^5.0.0"
+  checksum: 10/d802bc2c4569495f3d83f9bcf169e3a432ac1c6672e243399886409dbc55d7fa30375d9d0b2cf0d9466b81fc2b01b991483eb56e8cdb8141721009978d3b078b
+  languageName: node
+  linkType: hard
+
+"@vitejs/plugin-react@npm:^6.1.0":
+  version: 6.1.0
+  resolution: "@vitejs/plugin-react@npm:6.1.0"
+  dependencies:
+    "@rolldown/pluginutils": "npm:^1.0.1"
+  peerDependencies:
+    "@rolldown/plugin-babel": ^0.1.7 || ^0.2.0
+    babel-plugin-react-compiler: ^1.0.0
+    oxc-transform-react: ^0.145.0
+    vite: ^8.0.0
+  peerDependenciesMeta:
+    "@rolldown/plugin-babel":
+      optional: true
+    babel-plugin-react-compiler:
+      optional: true
+    oxc-transform-react:
+      optional: true
+  checksum: 10/2572ca59bcd54df9646dde2b71bb4a783865854fcd2078bfd12ef389f3ec00017de2226bbf5b5acc840547f9dbcf42e1341ba0dbcc5beba5bb8f5f24f90c7a5f
+  languageName: node
+  linkType: hard
+
+"@vitest/browser-playwright@npm:4.1.11":
+  version: 4.1.11
+  resolution: "@vitest/browser-playwright@npm:4.1.11"
+  dependencies:
+    "@vitest/browser": "npm:4.1.11"
+    "@vitest/mocker": "npm:4.1.11"
+    tinyrainbow: "npm:^3.1.0"
+  peerDependencies:
+    playwright: "*"
+    vitest: 4.1.11
+  peerDependenciesMeta:
+    playwright:
+      optional: false
+  checksum: 10/f1645b5c6a67bd461be5df3449c9b1f49374fcccdbaecb9a3f84c5c6ef1e8181383c8a1658c5bf6fd66eced0544df8911ea2267abc16b767f950ab27af1e5cbb
+  languageName: node
+  linkType: hard
+
+"@vitest/browser@npm:4.1.11":
+  version: 4.1.11
+  resolution: "@vitest/browser@npm:4.1.11"
+  dependencies:
+    "@blazediff/core": "npm:1.9.1"
+    "@vitest/mocker": "npm:4.1.11"
+    "@vitest/utils": "npm:4.1.11"
+    magic-string: "npm:^0.30.21"
+    pngjs: "npm:^7.0.0"
+    sirv: "npm:^3.0.2"
+    tinyrainbow: "npm:^3.1.0"
+    ws: "npm:^8.19.0"
+  peerDependencies:
+    vitest: 4.1.11
+  checksum: 10/f9e154a6e339e6d51ecc3e4ceb96e26c2c8b23e7786f6cd37bd8777a11a53190e0f2216c29c174a95eeb2f7c1bfa9a11f09a2fbe045aff4469dc3b47fbe91620
+  languageName: node
+  linkType: hard
+
+"@vitest/coverage-v8@npm:^4.1.11":
+  version: 4.1.11
+  resolution: "@vitest/coverage-v8@npm:4.1.11"
+  dependencies:
+    "@bcoe/v8-coverage": "npm:^1.0.2"
+    "@vitest/utils": "npm:4.1.11"
+    ast-v8-to-istanbul: "npm:^1.0.0"
+    istanbul-lib-coverage: "npm:^3.2.2"
+    istanbul-lib-report: "npm:^3.0.1"
+    istanbul-reports: "npm:^3.2.0"
+    magicast: "npm:^0.5.2"
+    obug: "npm:^2.1.1"
+    std-env: "npm:^4.0.0-rc.1"
+    tinyrainbow: "npm:^3.1.0"
+  peerDependencies:
+    "@vitest/browser": 4.1.11
+    vitest: 4.1.11
+  peerDependenciesMeta:
+    "@vitest/browser":
+      optional: true
+  checksum: 10/b6171ec592e0017c3b10954a9400b10af0becf944a0533af01b002a4cc35b6e562a353b4837451a44b73c5561de358c23a2c135d4e1e79bc9041ebb241a68440
+  languageName: node
+  linkType: hard
+
+"@vitest/expect@npm:3.2.4":
+  version: 3.2.4
+  resolution: "@vitest/expect@npm:3.2.4"
+  dependencies:
+    "@types/chai": "npm:^5.2.2"
+    "@vitest/spy": "npm:3.2.4"
+    "@vitest/utils": "npm:3.2.4"
+    chai: "npm:^5.2.0"
+    tinyrainbow: "npm:^2.0.0"
+  checksum: 10/dc69ce886c13714dfbbff78f2d2cb7eb536017e82301a73c42d573a9e9d2bf91005ac7abd9b977adf0a3bd431209f45a8ac2418029b68b0a377e092607c843ce
+  languageName: node
+  linkType: hard
+
+"@vitest/expect@npm:4.1.11":
+  version: 4.1.11
+  resolution: "@vitest/expect@npm:4.1.11"
+  dependencies:
+    "@standard-schema/spec": "npm:^1.1.0"
+    "@types/chai": "npm:^5.2.2"
+    "@vitest/spy": "npm:4.1.11"
+    "@vitest/utils": "npm:4.1.11"
+    chai: "npm:^6.2.2"
+    tinyrainbow: "npm:^3.1.0"
+  checksum: 10/9bfcfe5ad926ab58beea1c700dc057f17422f14516506f8fc12c9881ed3e81d4c2faadb768042c8497fdee7007e201c1bd3e7d2e91157dbb47fb5c07c4c02aaa
+  languageName: node
+  linkType: hard
+
+"@vitest/mocker@npm:4.1.11":
+  version: 4.1.11
+  resolution: "@vitest/mocker@npm:4.1.11"
+  dependencies:
+    "@vitest/spy": "npm:4.1.11"
+    estree-walker: "npm:^3.0.3"
+    magic-string: "npm:^0.30.21"
+  peerDependencies:
+    msw: ^2.4.9
+    vite: ^6.0.0 || ^7.0.0 || ^8.0.0
+  peerDependenciesMeta:
+    msw:
+      optional: true
+    vite:
+      optional: true
+  checksum: 10/00b6e1266d8403194b49313e3a9a1af0dff2c773f4b2df11f4955fa0f244fd4b59484cd23381dfef8af30298e2651c1aaa42b439fdbc871bb4bb911de38a9509
+  languageName: node
+  linkType: hard
+
+"@vitest/pretty-format@npm:3.2.4":
+  version: 3.2.4
+  resolution: "@vitest/pretty-format@npm:3.2.4"
+  dependencies:
+    tinyrainbow: "npm:^2.0.0"
+  checksum: 10/8dd30cbf956e01fbab042fe651fb5175d9f0cd00b7b569a46cd98df89c4fec47dab12916201ad6e09a4f25f2a2ec8927a4bfdc61118593097f759c90b18a51d4
+  languageName: node
+  linkType: hard
+
+"@vitest/pretty-format@npm:4.1.11":
+  version: 4.1.11
+  resolution: "@vitest/pretty-format@npm:4.1.11"
+  dependencies:
+    tinyrainbow: "npm:^3.1.0"
+  checksum: 10/2dfc2f20dbe1c4dbea33ec42e85a8b5648aa6585521bea47573406f5cefb81cd3b86b71f981c4e3d69946e77252cb42a700416c1dc656bb0478cb2932c953cdc
+  languageName: node
+  linkType: hard
+
+"@vitest/runner@npm:4.1.11":
+  version: 4.1.11
+  resolution: "@vitest/runner@npm:4.1.11"
+  dependencies:
+    "@vitest/utils": "npm:4.1.11"
+    pathe: "npm:^2.0.3"
+  checksum: 10/5247df824fa28b458ba0102592dfec50707982193b62076db941fbe5d7c88fb7067e68a33c194db0092bbe35459cfbeaed33b3c667e5f02192c18baeb4f56239
+  languageName: node
+  linkType: hard
+
+"@vitest/snapshot@npm:4.1.11":
+  version: 4.1.11
+  resolution: "@vitest/snapshot@npm:4.1.11"
+  dependencies:
+    "@vitest/pretty-format": "npm:4.1.11"
+    "@vitest/utils": "npm:4.1.11"
+    magic-string: "npm:^0.30.21"
+    pathe: "npm:^2.0.3"
+  checksum: 10/5d096373fb4b102f65ff884844a18c2d2e7d88caf68a64a842a245573311b2d531ca5a94ebf7e4fe39324e71a78670f74c949d4ec2cad3764c3f4c272b84d982
+  languageName: node
+  linkType: hard
+
+"@vitest/spy@npm:3.2.4":
+  version: 3.2.4
+  resolution: "@vitest/spy@npm:3.2.4"
+  dependencies:
+    tinyspy: "npm:^4.0.3"
+  checksum: 10/7d38c299f42a8c7e5e41652b203af98ca54e63df69c3b072d0e401d5a57fbbba3e39d8538ac1b3022c26718a6388d0bcc222bc2f07faab75942543b9247c007d
+  languageName: node
+  linkType: hard
+
+"@vitest/spy@npm:4.1.11":
+  version: 4.1.11
+  resolution: "@vitest/spy@npm:4.1.11"
+  checksum: 10/d49a7ed7501080e5f817d61250a169a46fcc7901887e4985a1e08705ce79aea8d1edcffd74f4dc6669ea1bc3d717a39354ce89c67188d81a63dc439d42f195f6
+  languageName: node
+  linkType: hard
+
+"@vitest/utils@npm:3.2.4":
+  version: 3.2.4
+  resolution: "@vitest/utils@npm:3.2.4"
+  dependencies:
+    "@vitest/pretty-format": "npm:3.2.4"
+    loupe: "npm:^3.1.4"
+    tinyrainbow: "npm:^2.0.0"
+  checksum: 10/7f12ef63bd8ee13957744d1f336b0405f164ade4358bf9dfa531f75bbb58ffac02bf61aba65724311ddbc50b12ba54853a169e59c6b837c16086173b9a480710
+  languageName: node
+  linkType: hard
+
+"@vitest/utils@npm:4.1.11":
+  version: 4.1.11
+  resolution: "@vitest/utils@npm:4.1.11"
+  dependencies:
+    "@vitest/pretty-format": "npm:4.1.11"
+    convert-source-map: "npm:^2.0.0"
+    tinyrainbow: "npm:^3.1.0"
+  checksum: 10/f05381e12d0926db7b01bfaae9a577fa664d36b96c23df185e4b0f6dad3a9fb59ac00931613da53b4511ee6ab473a14ac500c72c5ec5e9b3c3042875051f20c4
+  languageName: node
+  linkType: hard
+
+"@webcontainer/env@npm:^1.1.1":
+  version: 1.1.1
+  resolution: "@webcontainer/env@npm:1.1.1"
+  checksum: 10/c3cd2c207bc2948dce91fa900aa1c6541832075021b720bda01043596359142bc7dd75670608aa7b6f5075d6ae63748a0f90b24e554e1a04ee69b968551eef66
+  languageName: node
+  linkType: hard
+
+"@webgpu/types@npm:^0.1.69":
+  version: 0.1.72
+  resolution: "@webgpu/types@npm:0.1.72"
+  checksum: 10/707bfe389f7fb38ac18e66db1ed5ecad997c40338f1dfe4616f235f03319374e1a5169dd961c4c07664841928483c6c572e28468c1a769b08a9629b71f565c15
+  languageName: node
+  linkType: hard
+
+"@xmldom/xmldom@npm:^0.8.15":
+  version: 0.8.15
+  resolution: "@xmldom/xmldom@npm:0.8.15"
+  checksum: 10/521d8e5a9798a47dddb28237d112e47637d638e4f3d60ce1eefa1f397d2439af5a00f781c956b5affc251ef8a1bbc1f8325161d32f7b27c89aacf5ff84f14cf7
+  languageName: node
+  linkType: hard
+
+"abbrev@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "abbrev@npm:5.0.0"
+  checksum: 10/a32641fb7a8ba0ad6f65efda80a632c965a2567f52c988897bffc47f473c4e9c3f0166de19d939866b1ed58ec50ce36f697d54a476589ca2706f8b5605ed41f0
+  languageName: node
+  linkType: hard
+
+"acorn-jsx@npm:^5.3.2":
+  version: 5.3.2
+  resolution: "acorn-jsx@npm:5.3.2"
+  peerDependencies:
+    acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
+  checksum: 10/d4371eaef7995530b5b5ca4183ff6f062ca17901a6d3f673c9ac011b01ede37e7a1f7f61f8f5cfe709e88054757bb8f3277dc4061087cdf4f2a1f90ccbcdb977
+  languageName: node
+  linkType: hard
+
+"acorn-walk@npm:^8.1.1":
+  version: 8.3.5
+  resolution: "acorn-walk@npm:8.3.5"
+  dependencies:
+    acorn: "npm:^8.11.0"
+  checksum: 10/f52a158a1c1f00c82702c7eb9b8ae8aad79748a7689241dcc2d797dce680f1dcb15c78f312f687eeacdfb3a4cac4b87d04af470f0201bd56c6661fca6f94b195
+  languageName: node
+  linkType: hard
+
+"acorn@npm:^8.11.0, acorn@npm:^8.12.1, acorn@npm:^8.15.0, acorn@npm:^8.16.0, acorn@npm:^8.4.1":
+  version: 8.18.0
+  resolution: "acorn@npm:8.18.0"
+  bin:
+    acorn: bin/acorn
+  checksum: 10/7fddbe1f80f596c2d82a08adaa966949c9782a0250956f0a469e8cc8ec81e2ff46ed0a4f338eb2544b99d74cca521c197af4fc12d8b7e85bf38359a3d8d63de5
+  languageName: node
+  linkType: hard
+
+"ajv@npm:^6.14.0":
+  version: 6.15.0
+  resolution: "ajv@npm:6.15.0"
+  dependencies:
+    fast-deep-equal: "npm:^3.1.1"
+    fast-json-stable-stringify: "npm:^2.0.0"
+    json-schema-traverse: "npm:^0.4.1"
+    uri-js: "npm:^4.2.2"
+  checksum: 10/0916dda09c152fb5857bc1cc7ce61718e9cec5b7faeff44a74f5e324eed8a556e1a84856724ea322a067b436ecad9f74ac8295fd395449788cca52f0c25bd5fb
+  languageName: node
+  linkType: hard
+
+"allotment@npm:1.20.5":
+  version: 1.20.5
+  resolution: "allotment@npm:1.20.5"
+  dependencies:
+    classnames: "npm:^2.3.0"
+    eventemitter3: "npm:^5.0.0"
+    fast-deep-equal: "npm:^3.1.3"
+    lodash.clamp: "npm:^4.0.0"
+    lodash.debounce: "npm:^4.0.0"
+    usehooks-ts: "npm:^3.1.1"
+  peerDependencies:
+    react: ^17.0.0 || ^18.0.0 || ^19.0.0
+    react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0
+  checksum: 10/df005ced704cdd548551b259c07c11e9c0d007a6aa844e3f4d6a1a5826ef599ed1d8c98f8cb099f5695b25f5ce7659f94e6c56148e7432af9003b3ca45ccce77
+  languageName: node
+  linkType: hard
+
+"ansi-regex@npm:^5.0.1":
+  version: 5.0.1
+  resolution: "ansi-regex@npm:5.0.1"
+  checksum: 10/2aa4bb54caf2d622f1afdad09441695af2a83aa3fe8b8afa581d205e57ed4261c183c4d3877cee25794443fde5876417d859c108078ab788d6af7e4fe52eb66b
+  languageName: node
+  linkType: hard
+
+"ansi-regex@npm:^6.2.2":
+  version: 6.3.0
+  resolution: "ansi-regex@npm:6.3.0"
+  checksum: 10/85e15deee80d6e52e75864897b6f7b8a8cfc5befe1868f03e3b6bf8925b9b667cf67d4aeafc6d038398f2f11c3813e7b40ad79affdd29a9c491b3585bfa125d5
+  languageName: node
+  linkType: hard
+
+"ansi-styles@npm:^4.0.0, ansi-styles@npm:^4.1.0":
+  version: 4.3.0
+  resolution: "ansi-styles@npm:4.3.0"
+  dependencies:
+    color-convert: "npm:^2.0.1"
+  checksum: 10/b4494dfbfc7e4591b4711a396bd27e540f8153914123dccb4cdbbcb514015ada63a3809f362b9d8d4f6b17a706f1d7bea3c6f974b15fa5ae76b5b502070889ff
+  languageName: node
+  linkType: hard
+
+"ansi-styles@npm:^5.0.0":
+  version: 5.2.0
+  resolution: "ansi-styles@npm:5.2.0"
+  checksum: 10/d7f4e97ce0623aea6bc0d90dcd28881ee04cba06c570b97fd3391bd7a268eedfd9d5e2dd4fdcbdd82b8105df5faf6f24aaedc08eaf3da898e702db5948f63469
+  languageName: node
+  linkType: hard
+
+"ansi-styles@npm:^6.1.0":
+  version: 6.2.3
+  resolution: "ansi-styles@npm:6.2.3"
+  checksum: 10/c49dad7639f3e48859bd51824c93b9eb0db628afc243c51c3dd2410c4a15ede1a83881c6c7341aa2b159c4f90c11befb38f2ba848c07c66c9f9de4bcd7cb9f30
+  languageName: node
+  linkType: hard
+
+"arg@npm:^4.1.0":
+  version: 4.1.3
+  resolution: "arg@npm:4.1.3"
+  checksum: 10/969b491082f20cad166649fa4d2073ea9e974a4e5ac36247ca23d2e5a8b3cb12d60e9ff70a8acfe26d76566c71fd351ee5e6a9a6595157eb36f92b1fd64e1599
+  languageName: node
+  linkType: hard
+
+"argparse@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "argparse@npm:2.0.1"
+  checksum: 10/18640244e641a417ec75a9bd38b0b2b6b95af5199aa241b131d4b2fb206f334d7ecc600bd194861610a5579084978bfcbb02baa399dbe442d56d0ae5e60dbaef
+  languageName: node
+  linkType: hard
+
+"aria-hidden@npm:^1.2.3":
+  version: 1.2.6
+  resolution: "aria-hidden@npm:1.2.6"
+  dependencies:
+    tslib: "npm:^2.0.0"
+  checksum: 10/1914e5a36225dccdb29f0b88cc891eeca736cdc5b0c905ab1437b90b28b5286263ed3a221c75b7dc788f25b942367be0044b2ac8ccf073a72e07a50b1d964202
+  languageName: node
+  linkType: hard
+
+"aria-query@npm:5.3.0":
+  version: 5.3.0
+  resolution: "aria-query@npm:5.3.0"
+  dependencies:
+    dequal: "npm:^2.0.3"
+  checksum: 10/c3e1ed127cc6886fea4732e97dd6d3c3938e64180803acfb9df8955517c4943760746ffaf4020ce8f7ffaa7556a3b5f85c3769a1f5ca74a1288e02d042f9ae4e
+  languageName: node
+  linkType: hard
+
+"aria-query@npm:^5.0.0":
+  version: 5.3.2
+  resolution: "aria-query@npm:5.3.2"
+  checksum: 10/b2fe9bc98bd401bc322ccb99717c1ae2aaf53ea0d468d6e7aebdc02fac736e4a99b46971ee05b783b08ade23c675b2d8b60e4a1222a95f6e27bc4d2a0bfdcc03
+  languageName: node
+  linkType: hard
+
+"array-buffer-byte-length@npm:^1.0.1, array-buffer-byte-length@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "array-buffer-byte-length@npm:1.0.2"
+  dependencies:
+    call-bound: "npm:^1.0.3"
+    is-array-buffer: "npm:^3.0.5"
+  checksum: 10/0ae3786195c3211b423e5be8dd93357870e6fb66357d81da968c2c39ef43583ef6eece1f9cb1caccdae4806739c65dea832b44b8593414313cd76a89795fca63
+  languageName: node
+  linkType: hard
+
+"array-includes@npm:^3.1.6, array-includes@npm:^3.1.8, array-includes@npm:^3.1.9":
+  version: 3.1.9
+  resolution: "array-includes@npm:3.1.9"
+  dependencies:
+    call-bind: "npm:^1.0.8"
+    call-bound: "npm:^1.0.4"
+    define-properties: "npm:^1.2.1"
+    es-abstract: "npm:^1.24.0"
+    es-object-atoms: "npm:^1.1.1"
+    get-intrinsic: "npm:^1.3.0"
+    is-string: "npm:^1.1.1"
+    math-intrinsics: "npm:^1.1.0"
+  checksum: 10/8bfe9a58df74f326b4a76b04ee05c13d871759e888b4ee8f013145297cf5eb3c02cfa216067ebdaac5d74eb9763ac5cad77cdf2773b8ab475833701e032173aa
+  languageName: node
+  linkType: hard
+
+"array.prototype.findlast@npm:^1.2.5":
+  version: 1.2.5
+  resolution: "array.prototype.findlast@npm:1.2.5"
+  dependencies:
+    call-bind: "npm:^1.0.7"
+    define-properties: "npm:^1.2.1"
+    es-abstract: "npm:^1.23.2"
+    es-errors: "npm:^1.3.0"
+    es-object-atoms: "npm:^1.0.0"
+    es-shim-unscopables: "npm:^1.0.2"
+  checksum: 10/7dffcc665aa965718ad6de7e17ac50df0c5e38798c0a5bf9340cf24feb8594df6ec6f3fcbe714c1577728a1b18b5704b15669474b27bceeca91ef06ce2a23c31
+  languageName: node
+  linkType: hard
+
+"array.prototype.findlastindex@npm:^1.2.6":
+  version: 1.2.6
+  resolution: "array.prototype.findlastindex@npm:1.2.6"
+  dependencies:
+    call-bind: "npm:^1.0.8"
+    call-bound: "npm:^1.0.4"
+    define-properties: "npm:^1.2.1"
+    es-abstract: "npm:^1.23.9"
+    es-errors: "npm:^1.3.0"
+    es-object-atoms: "npm:^1.1.1"
+    es-shim-unscopables: "npm:^1.1.0"
+  checksum: 10/5ddb6420e820bef6ddfdcc08ce780d0fd5e627e97457919c27e32359916de5a11ce12f7c55073555e503856618eaaa70845d6ca11dcba724766f38eb1c22f7a2
+  languageName: node
+  linkType: hard
+
+"array.prototype.flat@npm:^1.3.1, array.prototype.flat@npm:^1.3.3":
+  version: 1.3.3
+  resolution: "array.prototype.flat@npm:1.3.3"
+  dependencies:
+    call-bind: "npm:^1.0.8"
+    define-properties: "npm:^1.2.1"
+    es-abstract: "npm:^1.23.5"
+    es-shim-unscopables: "npm:^1.0.2"
+  checksum: 10/f9b992fa0775d8f7c97abc91eb7f7b2f0ed8430dd9aeb9fdc2967ac4760cdd7fc2ef7ead6528fef40c7261e4d790e117808ce0d3e7e89e91514d4963a531cd01
+  languageName: node
+  linkType: hard
+
+"array.prototype.flatmap@npm:^1.3.3":
+  version: 1.3.3
+  resolution: "array.prototype.flatmap@npm:1.3.3"
+  dependencies:
+    call-bind: "npm:^1.0.8"
+    define-properties: "npm:^1.2.1"
+    es-abstract: "npm:^1.23.5"
+    es-shim-unscopables: "npm:^1.0.2"
+  checksum: 10/473534573aa4b37b1d80705d0ce642f5933cccf5617c9f3e8a56686e9815ba93d469138e86a1f25d2fe8af999c3d24f54d703ec1fc2db2e6778d46d0f4ac951e
+  languageName: node
+  linkType: hard
+
+"array.prototype.tosorted@npm:^1.1.4":
+  version: 1.1.4
+  resolution: "array.prototype.tosorted@npm:1.1.4"
+  dependencies:
+    call-bind: "npm:^1.0.7"
+    define-properties: "npm:^1.2.1"
+    es-abstract: "npm:^1.23.3"
+    es-errors: "npm:^1.3.0"
+    es-shim-unscopables: "npm:^1.0.2"
+  checksum: 10/874694e5d50e138894ff5b853e639c29b0aa42bbd355acda8e8e9cd337f1c80565f21edc15e8c727fa4c0877fd9d8783c575809e440cc4d2d19acaa048bf967d
+  languageName: node
+  linkType: hard
+
+"arraybuffer.prototype.slice@npm:^1.0.4":
+  version: 1.0.4
+  resolution: "arraybuffer.prototype.slice@npm:1.0.4"
+  dependencies:
+    array-buffer-byte-length: "npm:^1.0.1"
+    call-bind: "npm:^1.0.8"
+    define-properties: "npm:^1.2.1"
+    es-abstract: "npm:^1.23.5"
+    es-errors: "npm:^1.3.0"
+    get-intrinsic: "npm:^1.2.6"
+    is-array-buffer: "npm:^3.0.4"
+  checksum: 10/4821ebdfe7d699f910c7f09bc9fa996f09b96b80bccb4f5dd4b59deae582f6ad6e505ecef6376f8beac1eda06df2dbc89b70e82835d104d6fcabd33c1aed1ae9
+  languageName: node
+  linkType: hard
+
+"assertion-error@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "assertion-error@npm:2.0.1"
+  checksum: 10/a0789dd882211b87116e81e2648ccb7f60340b34f19877dd020b39ebb4714e475eb943e14ba3e22201c221ef6645b7bfe10297e76b6ac95b48a9898c1211ce66
+  languageName: node
+  linkType: hard
+
+"ast-types@npm:^0.16.1":
+  version: 0.16.1
+  resolution: "ast-types@npm:0.16.1"
+  dependencies:
+    tslib: "npm:^2.0.1"
+  checksum: 10/f569b475eb1c8cb93888cb6e7b7e36dc43fa19a77e4eb132cbff6e3eb1598ca60f850db6e60b070e5a0ee8c1559fca921dac0916e576f2f104e198793b0bdd8d
+  languageName: node
+  linkType: hard
+
+"ast-v8-to-istanbul@npm:^1.0.0":
+  version: 1.0.5
+  resolution: "ast-v8-to-istanbul@npm:1.0.5"
+  dependencies:
+    "@jridgewell/trace-mapping": "npm:^0.3.31"
+    estree-walker: "npm:^3.0.3"
+    js-tokens: "npm:^10.0.0"
+  checksum: 10/da404c933beb1d3db94158e07c8d87aa86103775e0fb6f9a85f930d5c8327320b5a2099db4cc9d4448c421285a614fe9f73ef7d76dbae589ce815e636a0f1542
+  languageName: node
+  linkType: hard
+
+"async-function@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "async-function@npm:1.0.0"
+  checksum: 10/1a09379937d846f0ce7614e75071c12826945d4e417db634156bf0e4673c495989302f52186dfa9767a1d9181794554717badd193ca2bbab046ef1da741d8efd
+  languageName: node
+  linkType: hard
+
+"async-generator-function@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "async-generator-function@npm:1.0.0"
+  checksum: 10/3d49e7acbeee9e84537f4cb0e0f91893df8eba976759875ae8ee9e3d3c82f6ecdebdb347c2fad9926b92596d93cdfc78ecc988bcdf407e40433e8e8e6fe5d78e
+  languageName: node
+  linkType: hard
+
+"autoprefixer@npm:^10.5.4":
+  version: 10.5.4
+  resolution: "autoprefixer@npm:10.5.4"
+  dependencies:
+    browserslist: "npm:^4.28.6"
+    caniuse-lite: "npm:^1.0.30001806"
+    fraction.js: "npm:^5.3.4"
+    picocolors: "npm:^1.1.1"
+    postcss-value-parser: "npm:^4.2.0"
+  peerDependencies:
+    postcss: ^8.1.0
+  bin:
+    autoprefixer: bin/autoprefixer
+  checksum: 10/3d9546c185f8e56d1f7cbb6bc4c06e19a158d994dc60cf651749a58fc89c0aaaf13ac65ff0fa04c3f0876021920921e809f750b20cfddaf417404d855fdc86a6
+  languageName: node
+  linkType: hard
+
+"available-typed-arrays@npm:^1.0.7":
+  version: 1.0.7
+  resolution: "available-typed-arrays@npm:1.0.7"
+  dependencies:
+    possible-typed-array-names: "npm:^1.0.0"
+  checksum: 10/6c9da3a66caddd83c875010a1ca8ef11eac02ba15fb592dc9418b2b5e7b77b645fa7729380a92d9835c2f05f2ca1b6251f39b993e0feb3f1517c74fa1af02cab
+  languageName: node
+  linkType: hard
+
+"axe-core@npm:^4.13.0, axe-core@npm:^4.2.0":
+  version: 4.13.0
+  resolution: "axe-core@npm:4.13.0"
+  checksum: 10/b9319bedc705fde00e4abd981d8724202cc20102e4ae6d8edfde33cb5265e0fb8f67f32adcb4ad33fbd4a2c8d7ad7ef5af1d933d9ad859bed90e3eae0ee8c52f
+  languageName: node
+  linkType: hard
+
+"balanced-match@npm:^1.0.0":
+  version: 1.0.2
+  resolution: "balanced-match@npm:1.0.2"
+  checksum: 10/9706c088a283058a8a99e0bf91b0a2f75497f185980d9ffa8b304de1d9e58ebda7c72c07ebf01dadedaac5b2907b2c6f566f660d62bd336c3468e960403b9d65
+  languageName: node
+  linkType: hard
+
+"balanced-match@npm:^4.0.2":
+  version: 4.0.4
+  resolution: "balanced-match@npm:4.0.4"
+  checksum: 10/fb07bb66a0959c2843fc055838047e2a95ccebb837c519614afb067ebfdf2fa967ca8d712c35ced07f2cd26fc6f07964230b094891315ad74f11eba3d53178a0
+  languageName: node
+  linkType: hard
+
+"baseline-browser-mapping@npm:^2.11.12":
+  version: 2.11.19
+  resolution: "baseline-browser-mapping@npm:2.11.19"
+  bin:
+    baseline-browser-mapping: dist/cli.cjs
+  checksum: 10/98c8811572dca1a0b52d54ca9a5ecfaf9a95e4c73077ca28897b5088f9f6427c7eb50e098aecf0b11464391568be4ce2db60f7d07ba1f93e49dbbf13a0c7d9f1
+  languageName: node
+  linkType: hard
+
+"bidi-js@npm:^1.0.3":
+  version: 1.0.3
+  resolution: "bidi-js@npm:1.0.3"
+  dependencies:
+    require-from-string: "npm:^2.0.2"
+  checksum: 10/c4341c7a98797efe3d186cd99d6f97e9030a4f959794ca200ef2ec0a678483a916335bba6c2c0608a21d04a221288a31c9fd0faa0cd9b3903b93594b42466a6a
+  languageName: node
+  linkType: hard
+
+"brace-expansion@npm:^1.1.7":
+  version: 1.1.18
+  resolution: "brace-expansion@npm:1.1.18"
+  dependencies:
+    balanced-match: "npm:^1.0.0"
+    concat-map: "npm:0.0.1"
+  checksum: 10/b55a3c03239b8d2127c7cbb3408c9ad3a556a8c303bf3064df78bfb7c093160fc8f6e0a32e42a850a78eba12f29ccf6ef997690b9acf945d242c56c61c4aa977
+  languageName: node
+  linkType: hard
+
+"brace-expansion@npm:^2.0.2":
+  version: 2.1.4
+  resolution: "brace-expansion@npm:2.1.4"
+  dependencies:
+    balanced-match: "npm:^1.0.0"
+  checksum: 10/11e18dc39706037331abedbb742af1da733267042f94c0f08487ef1a63cee068c1859f8d5f95523869725191133eb1a69753de457ed4b76b7c187d9ea0646737
+  languageName: node
+  linkType: hard
+
+"brace-expansion@npm:^5.0.8":
+  version: 5.0.9
+  resolution: "brace-expansion@npm:5.0.9"
+  dependencies:
+    balanced-match: "npm:^4.0.2"
+  checksum: 10/d8683d612919212c7cf298861acd1c15101e7e2ad186e7ae9747390e5b3fc9e9b55ce71107570d32985784d9d88fbbe438d725863aed7b0f3d08d5f080535eec
+  languageName: node
+  linkType: hard
+
+"braces@npm:^3.0.3":
+  version: 3.0.3
+  resolution: "braces@npm:3.0.3"
+  dependencies:
+    fill-range: "npm:^7.1.1"
+  checksum: 10/fad11a0d4697a27162840b02b1fad249c1683cbc510cd5bf1a471f2f8085c046d41094308c577a50a03a579dd99d5a6b3724c4b5e8b14df2c4443844cfcda2c6
+  languageName: node
+  linkType: hard
+
+"browser-stdout@npm:^1.3.1":
+  version: 1.3.1
+  resolution: "browser-stdout@npm:1.3.1"
+  checksum: 10/ac70a84e346bb7afc5045ec6f22f6a681b15a4057447d4cc1c48a25c6dedb302a49a46dd4ddfb5cdd9c96e0c905a8539be1b98ae7bc440512152967009ec7015
+  languageName: node
+  linkType: hard
+
+"browserslist@npm:^4.24.0, browserslist@npm:^4.28.6":
+  version: 4.28.8
+  resolution: "browserslist@npm:4.28.8"
+  dependencies:
+    baseline-browser-mapping: "npm:^2.11.12"
+    caniuse-lite: "npm:^1.0.30001809"
+    electron-to-chromium: "npm:^1.5.402"
+    node-releases: "npm:^2.0.53"
+    update-browserslist-db: "npm:^1.3.0"
+  bin:
+    browserslist: cli.js
+  checksum: 10/9df1d87f915639ebe8f85caf8d58bc0627863dff5e921b6e0394a92f82d279f1b2b324594267d025c80482397150cb4bf5a3ab55fde5d2c1c0f13c064f48b5e9
+  languageName: node
+  linkType: hard
+
+"bundle-name@npm:^4.1.0":
+  version: 4.1.0
+  resolution: "bundle-name@npm:4.1.0"
+  dependencies:
+    run-applescript: "npm:^7.0.0"
+  checksum: 10/1d966c8d2dbf4d9d394e53b724ac756c2414c45c01340b37743621f59cc565a435024b394ddcb62b9b335d1c9a31f4640eb648c3fec7f97ee74dc0694c9beb6c
+  languageName: node
+  linkType: hard
+
+"call-bind-apply-helpers@npm:^1.0.1, call-bind-apply-helpers@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "call-bind-apply-helpers@npm:1.0.2"
+  dependencies:
+    es-errors: "npm:^1.3.0"
+    function-bind: "npm:^1.1.2"
+  checksum: 10/00482c1f6aa7cfb30fb1dbeb13873edf81cfac7c29ed67a5957d60635a56b2a4a480f1016ddbdb3395cc37900d46037fb965043a51c5c789ffeab4fc535d18b5
+  languageName: node
+  linkType: hard
+
+"call-bind@npm:^1.0.7, call-bind@npm:^1.0.8, call-bind@npm:^1.0.9":
+  version: 1.0.9
+  resolution: "call-bind@npm:1.0.9"
+  dependencies:
+    call-bind-apply-helpers: "npm:^1.0.2"
+    es-define-property: "npm:^1.0.1"
+    get-intrinsic: "npm:^1.3.0"
+    set-function-length: "npm:^1.2.2"
+  checksum: 10/25b1a98d6158f0adf9fface594ca82be4e3ed481d8ff7f36ad1fccb0c8377e38c6a04ff3248693723222d378677e93077c739defc8a6741c82b7e00bcee1245d
+  languageName: node
+  linkType: hard
+
+"call-bound@npm:^1.0.2, call-bound@npm:^1.0.3, call-bound@npm:^1.0.4":
+  version: 1.0.4
+  resolution: "call-bound@npm:1.0.4"
+  dependencies:
+    call-bind-apply-helpers: "npm:^1.0.2"
+    get-intrinsic: "npm:^1.3.0"
+  checksum: 10/ef2b96e126ec0e58a7ff694db43f4d0d44f80e641370c21549ed911fecbdbc2df3ebc9bddad918d6bbdefeafb60bb3337902006d5176d72bcd2da74820991af7
+  languageName: node
+  linkType: hard
+
+"callsites@npm:^3.0.0":
+  version: 3.1.0
+  resolution: "callsites@npm:3.1.0"
+  checksum: 10/072d17b6abb459c2ba96598918b55868af677154bec7e73d222ef95a8fdb9bbf7dae96a8421085cdad8cd190d86653b5b6dc55a4484f2e5b2e27d5e0c3fc15b3
+  languageName: node
+  linkType: hard
+
+"camelcase@npm:^6.0.0":
+  version: 6.3.0
+  resolution: "camelcase@npm:6.3.0"
+  checksum: 10/8c96818a9076434998511251dcb2761a94817ea17dbdc37f47ac080bd088fc62c7369429a19e2178b993497132c8cbcf5cc1f44ba963e76782ba469c0474938d
+  languageName: node
+  linkType: hard
+
+"caniuse-lite@npm:^1.0.30001806, caniuse-lite@npm:^1.0.30001809":
+  version: 1.0.30001810
+  resolution: "caniuse-lite@npm:1.0.30001810"
+  checksum: 10/47d7db627c3f3d1a10e06eef9efbb84295c6ef9d959b585b64032cc293637ca7b9b6af7e5d5752972b3e690d9561f14b9561db03890fbc6e38dc1aaa54e51d97
+  languageName: node
+  linkType: hard
+
+"chai-as-promised@npm:^8.0.2":
+  version: 8.0.2
+  resolution: "chai-as-promised@npm:8.0.2"
+  dependencies:
+    check-error: "npm:^2.1.1"
+  peerDependencies:
+    chai: ">= 2.1.2 < 7"
+  checksum: 10/9723b6cda34ef511b48d525ff86a730323f1287728e78918833350718e8b5da58783ebf314ad01e07cca4edcf6df42b2c4bf6b9cfebc886c54ce93b587a1183f
+  languageName: node
+  linkType: hard
+
+"chai@npm:^5.2.0":
+  version: 5.3.3
+  resolution: "chai@npm:5.3.3"
+  dependencies:
+    assertion-error: "npm:^2.0.1"
+    check-error: "npm:^2.1.1"
+    deep-eql: "npm:^5.0.1"
+    loupe: "npm:^3.1.0"
+    pathval: "npm:^2.0.0"
+  checksum: 10/0d0ef63106083b05c7ba510697cd9991a02b8df5984a7d010ab4af10205c7a1f27d1c06bfa4679540894295ac4dcc22aa2a281e2e4cfe5133c1db379626689a2
+  languageName: node
+  linkType: hard
+
+"chai@npm:^6.2.2":
+  version: 6.2.2
+  resolution: "chai@npm:6.2.2"
+  checksum: 10/13cda42cc40aa46da04a41cf7e5c61df6b6ae0b4e8a8c8b40e04d6947e4d7951377ea8c14f9fa7fe5aaa9e8bd9ba414f11288dc958d4cee6f5221b9436f2778f
+  languageName: node
+  linkType: hard
+
+"chalk@npm:^4.1.0":
+  version: 4.1.2
+  resolution: "chalk@npm:4.1.2"
+  dependencies:
+    ansi-styles: "npm:^4.1.0"
+    supports-color: "npm:^7.1.0"
+  checksum: 10/cb3f3e594913d63b1814d7ca7c9bafbf895f75fbf93b92991980610dfd7b48500af4e3a5d4e3a8f337990a96b168d7eb84ee55efdce965e2ee8efc20f8c8f139
+  languageName: node
+  linkType: hard
+
+"check-error@npm:^2.1.1":
+  version: 2.1.3
+  resolution: "check-error@npm:2.1.3"
+  checksum: 10/f1868d3db60f5a7da92e140ccf33e9152bf6124161fa9b7a4ae8eafdb05e66e1f13570401e56f314f037b0f1b71eaf38ad0c7256310d82c6105e9d85ded0f202
+  languageName: node
+  linkType: hard
+
+"chokidar@npm:^4.0.1":
+  version: 4.0.3
+  resolution: "chokidar@npm:4.0.3"
+  dependencies:
+    readdirp: "npm:^4.0.1"
+  checksum: 10/bf2a575ea5596000e88f5db95461a9d59ad2047e939d5a4aac59dd472d126be8f1c1ff3c7654b477cf532d18f42a97279ef80ee847972fd2a25410bf00b80b59
+  languageName: node
+  linkType: hard
+
+"chownr@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "chownr@npm:3.0.0"
+  checksum: 10/b63cb1f73d171d140a2ed8154ee6566c8ab775d3196b0e03a2a94b5f6a0ce7777ee5685ca56849403c8d17bd457a6540672f9a60696a6137c7a409097495b82c
+  languageName: node
+  linkType: hard
+
+"classnames@npm:^2.3.0":
+  version: 2.5.1
+  resolution: "classnames@npm:2.5.1"
+  checksum: 10/58eb394e8817021b153bb6e7d782cfb667e4ab390cb2e9dac2fc7c6b979d1cc2b2a733093955fc5c94aa79ef5c8c89f11ab77780894509be6afbb91dddd79d15
+  languageName: node
+  linkType: hard
+
+"client-only@npm:^0.0.1":
+  version: 0.0.1
+  resolution: "client-only@npm:0.0.1"
+  checksum: 10/0c16bf660dadb90610553c1d8946a7fdfb81d624adea073b8440b7d795d5b5b08beb3c950c6a2cf16279365a3265158a236876d92bce16423c485c322d7dfaf8
+  languageName: node
+  linkType: hard
+
+"cliui@npm:^8.0.1":
+  version: 8.0.1
+  resolution: "cliui@npm:8.0.1"
+  dependencies:
+    string-width: "npm:^4.2.0"
+    strip-ansi: "npm:^6.0.1"
+    wrap-ansi: "npm:^7.0.0"
+  checksum: 10/eaa5561aeb3135c2cddf7a3b3f562fc4238ff3b3fc666869ef2adf264be0f372136702f16add9299087fb1907c2e4ec5dbfe83bd24bce815c70a80c6c1a2e950
+  languageName: node
+  linkType: hard
+
+"clsx@npm:^2.0.0":
+  version: 2.1.1
+  resolution: "clsx@npm:2.1.1"
+  checksum: 10/cdfb57fa6c7649bbff98d9028c2f0de2f91c86f551179541cf784b1cfdc1562dcb951955f46d54d930a3879931a980e32a46b598acaea274728dbe068deca919
+  languageName: node
+  linkType: hard
+
+"color-convert@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "color-convert@npm:2.0.1"
+  dependencies:
+    color-name: "npm:~1.1.4"
+  checksum: 10/fa00c91b4332b294de06b443923246bccebe9fab1b253f7fe1772d37b06a2269b4039a85e309abe1fe11b267b11c08d1d0473fda3badd6167f57313af2887a64
+  languageName: node
+  linkType: hard
+
+"color-name@npm:~1.1.4":
+  version: 1.1.4
+  resolution: "color-name@npm:1.1.4"
+  checksum: 10/b0445859521eb4021cd0fb0cc1a75cecf67fceecae89b63f62b201cca8d345baf8b952c966862a9d9a2632987d4f6581f0ec8d957dfacece86f0a7919316f610
+  languageName: node
+  linkType: hard
+
+"concat-map@npm:0.0.1":
+  version: 0.0.1
+  resolution: "concat-map@npm:0.0.1"
+  checksum: 10/9680699c8e2b3af0ae22592cb764acaf973f292a7b71b8a06720233011853a58e256c89216a10cbe889727532fd77f8bcd49a760cedfde271b8e006c20e079f2
+  languageName: node
+  linkType: hard
+
+"convert-source-map@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "convert-source-map@npm:2.0.0"
+  checksum: 10/c987be3ec061348cdb3c2bfb924bec86dea1eacad10550a85ca23edb0fe3556c3a61c7399114f3331ccb3499d7fd0285ab24566e5745929412983494c3926e15
+  languageName: node
+  linkType: hard
+
+"create-require@npm:^1.1.0":
+  version: 1.1.1
+  resolution: "create-require@npm:1.1.1"
+  checksum: 10/a9a1503d4390d8b59ad86f4607de7870b39cad43d929813599a23714831e81c520bddf61bcdd1f8e30f05fd3a2b71ae8538e946eb2786dc65c2bbc520f692eff
+  languageName: node
+  linkType: hard
+
+"cross-spawn@npm:^7.0.6":
+  version: 7.0.6
+  resolution: "cross-spawn@npm:7.0.6"
+  dependencies:
+    path-key: "npm:^3.1.0"
+    shebang-command: "npm:^2.0.0"
+    which: "npm:^2.0.1"
+  checksum: 10/0d52657d7ae36eb130999dffff1168ec348687b48dd38e2ff59992ed916c88d328cf1d07ff4a4a10bc78de5e1c23f04b306d569e42f7a2293915c081e4dfee86
+  languageName: node
+  linkType: hard
+
+"css-tree@npm:^3.0.0, css-tree@npm:^3.2.1":
+  version: 3.2.1
+  resolution: "css-tree@npm:3.2.1"
+  dependencies:
+    mdn-data: "npm:2.27.1"
+    source-map-js: "npm:^1.2.1"
+  checksum: 10/9945b387bdec756738c34d64b8287f05ca6645f51d1c8abaaa5822ec3e74533604103aaad164b8100afd8495e92120be7c1c6afbe5be89f867acc5b456ddd79c
+  languageName: node
+  linkType: hard
+
+"css.escape@npm:^1.5.1":
+  version: 1.5.1
+  resolution: "css.escape@npm:1.5.1"
+  checksum: 10/f6d38088d870a961794a2580b2b2af1027731bb43261cfdce14f19238a88664b351cc8978abc20f06cc6bbde725699dec8deb6fe9816b139fc3f2af28719e774
+  languageName: node
+  linkType: hard
+
+"csstype@npm:^3.2.2":
+  version: 3.2.3
+  resolution: "csstype@npm:3.2.3"
+  checksum: 10/ad41baf7e2ffac65ab544d79107bf7cd1a4bb9bab9ac3302f59ab4ba655d5e30942a8ae46e10ba160c6f4ecea464cc95b975ca2fefbdeeacd6ac63f12f99fe1f
+  languageName: node
+  linkType: hard
+
+"data-urls@npm:^7.0.0":
+  version: 7.0.0
+  resolution: "data-urls@npm:7.0.0"
+  dependencies:
+    whatwg-mimetype: "npm:^5.0.0"
+    whatwg-url: "npm:^16.0.0"
+  checksum: 10/60f88ded4306aea5d6251c4db100ca272fc026014004d68aad4db495397a73bb39d17a6bd29ed9ab348c88a28f6e97266a1759985df4e12dc8c02bb8544c7731
+  languageName: node
+  linkType: hard
+
+"data-view-buffer@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "data-view-buffer@npm:1.0.2"
+  dependencies:
+    call-bound: "npm:^1.0.3"
+    es-errors: "npm:^1.3.0"
+    is-data-view: "npm:^1.0.2"
+  checksum: 10/c10b155a4e93999d3a215d08c23eea95f865e1f510b2e7748fcae1882b776df1afe8c99f483ace7fc0e5a3193ab08da138abebc9829d12003746c5a338c4d644
+  languageName: node
+  linkType: hard
+
+"data-view-byte-length@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "data-view-byte-length@npm:1.0.2"
+  dependencies:
+    call-bound: "npm:^1.0.3"
+    es-errors: "npm:^1.3.0"
+    is-data-view: "npm:^1.0.2"
+  checksum: 10/2a47055fcf1ab3ec41b00b6f738c6461a841391a643c9ed9befec1117c1765b4d492661d97fb7cc899200c328949dca6ff189d2c6537d96d60e8a02dfe3c95f7
+  languageName: node
+  linkType: hard
+
+"data-view-byte-offset@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "data-view-byte-offset@npm:1.0.1"
+  dependencies:
+    call-bound: "npm:^1.0.2"
+    es-errors: "npm:^1.3.0"
+    is-data-view: "npm:^1.0.1"
+  checksum: 10/fa3bdfa0968bea6711ee50375094b39f561bce3f15f9e558df59de9c25f0bdd4cddc002d9c1d70ac7772ebd36854a7e22d1761e7302a934e6f1c2263bcf44aa2
+  languageName: node
+  linkType: hard
+
+"debug@npm:^3.2.7":
+  version: 3.2.7
+  resolution: "debug@npm:3.2.7"
+  dependencies:
+    ms: "npm:^2.1.1"
+  checksum: 10/d86fd7be2b85462297ea16f1934dc219335e802f629ca9a69b63ed8ed041dda492389bb2ee039217c02e5b54792b1c51aa96ae954cf28634d363a2360c7a1639
+  languageName: node
+  linkType: hard
+
+"debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.1, debug@npm:^4.3.2, debug@npm:^4.3.5, debug@npm:^4.4.3":
+  version: 4.4.3
+  resolution: "debug@npm:4.4.3"
+  dependencies:
+    ms: "npm:^2.1.3"
+  peerDependenciesMeta:
+    supports-color:
+      optional: true
+  checksum: 10/9ada3434ea2993800bd9a1e320bd4aa7af69659fb51cca685d390949434bc0a8873c21ed7c9b852af6f2455a55c6d050aa3937d52b3c69f796dab666f762acad
+  languageName: node
+  linkType: hard
+
+"decamelize@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "decamelize@npm:4.0.0"
+  checksum: 10/b7d09b82652c39eead4d6678bb578e3bebd848add894b76d0f6b395bc45b2d692fb88d977e7cfb93c4ed6c119b05a1347cef261174916c2e75c0a8ca57da1809
+  languageName: node
+  linkType: hard
+
+"decimal.js@npm:^10.6.0":
+  version: 10.6.0
+  resolution: "decimal.js@npm:10.6.0"
+  checksum: 10/c0d45842d47c311d11b38ce7ccc911121953d4df3ebb1465d92b31970eb4f6738a065426a06094af59bee4b0d64e42e7c8984abd57b6767c64ea90cf90bb4a69
+  languageName: node
+  linkType: hard
+
+"deep-eql@npm:^5.0.1":
+  version: 5.0.2
+  resolution: "deep-eql@npm:5.0.2"
+  checksum: 10/a529b81e2ef8821621d20a36959a0328873a3e49d393ad11f8efe8559f31239494c2eb889b80342808674c475802ba95b9d6c4c27641b9a029405104c1b59fcf
+  languageName: node
+  linkType: hard
+
+"deep-is@npm:^0.1.3":
+  version: 0.1.4
+  resolution: "deep-is@npm:0.1.4"
+  checksum: 10/ec12d074aef5ae5e81fa470b9317c313142c9e8e2afe3f8efa124db309720db96d1d222b82b84c834e5f87e7a614b44a4684b6683583118b87c833b3be40d4d8
+  languageName: node
+  linkType: hard
+
+"deepmerge@npm:^4.2.2":
+  version: 4.3.1
+  resolution: "deepmerge@npm:4.3.1"
+  checksum: 10/058d9e1b0ff1a154468bf3837aea436abcfea1ba1d165ddaaf48ca93765fdd01a30d33c36173da8fbbed951dd0a267602bc782fe288b0fc4b7e1e7091afc4529
+  languageName: node
+  linkType: hard
+
+"default-browser-id@npm:^5.0.0":
+  version: 5.0.1
+  resolution: "default-browser-id@npm:5.0.1"
+  checksum: 10/52c637637bcd76bfe974462a2f1dd75cb04784c2852935575760f82e1fd338e5e80d3c45a9b01fdbb1e450553a830bb163b004d2eca223c5573989f82232a072
+  languageName: node
+  linkType: hard
+
+"default-browser@npm:^5.2.1":
+  version: 5.5.1
+  resolution: "default-browser@npm:5.5.1"
+  dependencies:
+    bundle-name: "npm:^4.1.0"
+    default-browser-id: "npm:^5.0.0"
+  checksum: 10/e2a74668f0dffff543a2e207ff400a2a99a13f50e99db3c23ad288c6fbc26d6133145e13762c842350ea1d854d876ca6328abc0031e56fd9d33b8f5080ead028
+  languageName: node
+  linkType: hard
+
+"define-data-property@npm:^1.0.1, define-data-property@npm:^1.1.4":
+  version: 1.1.4
+  resolution: "define-data-property@npm:1.1.4"
+  dependencies:
+    es-define-property: "npm:^1.0.0"
+    es-errors: "npm:^1.3.0"
+    gopd: "npm:^1.0.1"
+  checksum: 10/abdcb2505d80a53524ba871273e5da75e77e52af9e15b3aa65d8aad82b8a3a424dad7aee2cc0b71470ac7acf501e08defac362e8b6a73cdb4309f028061df4ae
+  languageName: node
+  linkType: hard
+
+"define-lazy-prop@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "define-lazy-prop@npm:3.0.0"
+  checksum: 10/f28421cf9ee86eecaf5f3b8fe875f13d7009c2625e97645bfff7a2a49aca678270b86c39f9c32939e5ca7ab96b551377ed4139558c795e076774287ad3af1aa4
+  languageName: node
+  linkType: hard
+
+"define-properties@npm:^1.1.3, define-properties@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "define-properties@npm:1.2.1"
+  dependencies:
+    define-data-property: "npm:^1.0.1"
+    has-property-descriptors: "npm:^1.0.0"
+    object-keys: "npm:^1.1.1"
+  checksum: 10/b4ccd00597dd46cb2d4a379398f5b19fca84a16f3374e2249201992f36b30f6835949a9429669ee6b41b6e837205a163eadd745e472069e70dfc10f03e5fcc12
+  languageName: node
+  linkType: hard
+
+"dequal@npm:^2.0.3":
+  version: 2.0.3
+  resolution: "dequal@npm:2.0.3"
+  checksum: 10/6ff05a7561f33603df87c45e389c9ac0a95e3c056be3da1a0c4702149e3a7f6fe5ffbb294478687ba51a9e95f3a60e8b6b9005993acd79c292c7d15f71964b6b
+  languageName: node
+  linkType: hard
+
+"detect-libc@npm:^2.0.3":
+  version: 2.1.2
+  resolution: "detect-libc@npm:2.1.2"
+  checksum: 10/b736c8d97d5d46164c0d1bed53eb4e6a3b1d8530d460211e2d52f1c552875e706c58a5376854e4e54f8b828c9cada58c855288c968522eb93ac7696d65970766
+  languageName: node
+  linkType: hard
+
+"diff@npm:^4.0.1":
+  version: 4.0.4
+  resolution: "diff@npm:4.0.4"
+  checksum: 10/5019b3f5ae124ea9e95137119e1a83a59c252c75ddac873cc967832fd7a834570a58a4d58b941bdbd07832ebf98dcb232b27c561b7f5584357da6dae59bcac62
+  languageName: node
+  linkType: hard
+
+"diff@npm:^7.0.0":
+  version: 7.0.0
+  resolution: "diff@npm:7.0.0"
+  checksum: 10/e9b8e48d054c9c0c093c65ce8e2637af94b35f2427001607b14e5e0589e534ea3413a7f91ebe6d7c5a1494ace49cb7c7c3972f442ddd96a4767ff091999a082e
+  languageName: node
+  linkType: hard
+
+"diff@npm:^9.0.0":
+  version: 9.0.0
+  resolution: "diff@npm:9.0.0"
+  checksum: 10/f8b5e38a6a7ec73d1850ccb7ff19cda1d02502dc0f2c562ada0f40d7211bfb3075c2f3742104619a1f8f47ae333d48a6c77bffb080a2df900db36935080ea4fb
+  languageName: node
+  linkType: hard
+
+"doctrine@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "doctrine@npm:2.1.0"
+  dependencies:
+    esutils: "npm:^2.0.2"
+  checksum: 10/555684f77e791b17173ea86e2eea45ef26c22219cb64670669c4f4bebd26dbc95cd90ec1f4159e9349a6bb9eb892ce4dde8cd0139e77bedd8bf4518238618474
+  languageName: node
+  linkType: hard
+
+"doctrine@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "doctrine@npm:3.0.0"
+  dependencies:
+    esutils: "npm:^2.0.2"
+  checksum: 10/b4b28f1df5c563f7d876e7461254a4597b8cabe915abe94d7c5d1633fed263fcf9a85e8d3836591fc2d040108e822b0d32758e5ec1fe31c590dc7e08086e3e48
+  languageName: node
+  linkType: hard
+
+"dom-accessibility-api@npm:^0.5.9":
+  version: 0.5.16
+  resolution: "dom-accessibility-api@npm:0.5.16"
+  checksum: 10/377b4a7f9eae0a5d72e1068c369c99e0e4ca17fdfd5219f3abd32a73a590749a267475a59d7b03a891f9b673c27429133a818c44b2e47e32fec024b34274e2ca
+  languageName: node
+  linkType: hard
+
+"dom-accessibility-api@npm:^0.6.3":
+  version: 0.6.3
+  resolution: "dom-accessibility-api@npm:0.6.3"
+  checksum: 10/83d3371f8226487fbad36e160d44f1d9017fb26d46faba6a06fcad15f34633fc827b8c3e99d49f71d5f3253d866e2131826866fd0a3c86626f8eccfc361881ff
+  languageName: node
+  linkType: hard
+
+"dunder-proto@npm:^1.0.0, dunder-proto@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "dunder-proto@npm:1.0.1"
+  dependencies:
+    call-bind-apply-helpers: "npm:^1.0.1"
+    es-errors: "npm:^1.3.0"
+    gopd: "npm:^1.2.0"
+  checksum: 10/5add88a3d68d42d6e6130a0cac450b7c2edbe73364bbd2fc334564418569bea97c6943a8fcd70e27130bf32afc236f30982fc4905039b703f23e9e0433c29934
+  languageName: node
+  linkType: hard
+
+"earcut@npm:^3.0.2":
+  version: 3.2.3
+  resolution: "earcut@npm:3.2.3"
+  checksum: 10/3c3c6bfc214060e6df83da1da413709cf15c77139b0e094a71e6e960ffce033c88586c1e880496ea0a39d891df74a065ccfe24c18f426898ea07a51e0fc0a446
+  languageName: node
+  linkType: hard
+
+"eastasianwidth@npm:^0.2.0":
+  version: 0.2.0
+  resolution: "eastasianwidth@npm:0.2.0"
+  checksum: 10/9b1d3e1baefeaf7d70799db8774149cef33b97183a6addceeba0cf6b85ba23ee2686f302f14482006df32df75d32b17c509c143a3689627929e4a8efaf483952
+  languageName: node
+  linkType: hard
+
+"edit-json-file@npm:^1.8.1":
+  version: 1.8.1
+  resolution: "edit-json-file@npm:1.8.1"
+  dependencies:
+    find-value: "npm:^1.0.12"
+    iterate-object: "npm:^1.3.4"
+    r-json: "npm:^1.2.10"
+    set-value: "npm:^4.1.0"
+    w-json: "npm:^1.3.10"
+  checksum: 10/1b1db67f488e719429e3a80de6a0d674f936b5dcbd7d354c6ecba3cdb70b06e13efcc556dbb7c43dde02b0ef7bf85850fa947b86334e62251db96826959af098
+  languageName: node
+  linkType: hard
+
+"electron-to-chromium@npm:^1.5.402":
+  version: 1.5.415
+  resolution: "electron-to-chromium@npm:1.5.415"
+  checksum: 10/d7ba3987d0f6d3487709ab0f2b83654e91cb813a0000dcdf98987ecbb8e3233547cc95c0c3ee6ddc122cfdbd70e065c271d8878da2ecb1fb32daebfedcde9681
+  languageName: node
+  linkType: hard
+
+"emoji-regex@npm:^8.0.0":
+  version: 8.0.0
+  resolution: "emoji-regex@npm:8.0.0"
+  checksum: 10/c72d67a6821be15ec11997877c437491c313d924306b8da5d87d2a2bcc2cec9903cb5b04ee1a088460501d8e5b44f10df82fdc93c444101a7610b80c8b6938e1
+  languageName: node
+  linkType: hard
+
+"emoji-regex@npm:^9.2.2":
+  version: 9.2.2
+  resolution: "emoji-regex@npm:9.2.2"
+  checksum: 10/915acf859cea7131dac1b2b5c9c8e35c4849e325a1d114c30adb8cd615970f6dca0e27f64f3a4949d7d6ed86ecd79a1c5c63f02e697513cddd7b5835c90948b8
+  languageName: node
+  linkType: hard
+
+"empathic@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "empathic@npm:2.0.1"
+  checksum: 10/c5a37b78926e722c38779e5026342350098771fa1cacb52cb808e5329896ab39abb88cd2f1374671d6e5c98aa24cba2534f00da2938d04f11de1a2d012ee75c3
+  languageName: node
+  linkType: hard
+
+"enhanced-resolve@npm:^5.24.1":
+  version: 5.24.5
+  resolution: "enhanced-resolve@npm:5.24.5"
+  dependencies:
+    graceful-fs: "npm:^4.2.4"
+    tapable: "npm:^2.3.3"
+  checksum: 10/cf3f6f62bd52c1d564d7967e474892d5b43690aedaf7a4e87c831fa6b4b065617baf08eb940907968c711965cbc6ccd773bcc67b8d87a71523c0512372be2a06
+  languageName: node
+  linkType: hard
+
+"entities@npm:^8.0.0":
+  version: 8.0.0
+  resolution: "entities@npm:8.0.0"
+  checksum: 10/d6e2ba75e444fb101ee2fbb07c839e687306c8a509426b75186619c19196f97c1db9932ca083f823c03e4a20e7407b654aa34de8cbb7770468e20fb2d4573a0e
+  languageName: node
+  linkType: hard
+
+"env-paths@npm:^2.2.0":
+  version: 2.2.1
+  resolution: "env-paths@npm:2.2.1"
+  checksum: 10/65b5df55a8bab92229ab2b40dad3b387fad24613263d103a97f91c9fe43ceb21965cd3392b1ccb5d77088021e525c4e0481adb309625d0cb94ade1d1fb8dc17e
+  languageName: node
+  linkType: hard
+
+"es-abstract-get@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "es-abstract-get@npm:1.0.0"
+  dependencies:
+    es-errors: "npm:^1.3.0"
+    es-object-atoms: "npm:^1.1.2"
+    is-callable: "npm:^1.2.7"
+    object-inspect: "npm:^1.13.4"
+  checksum: 10/a2bfa7536529a21c8590670a69c0c4583e531f92dbc420c13f680bf906215f510d9d14b18e2e4a26e8b07100ab28719811dbce822e43fe87305a5a9069cda24e
+  languageName: node
+  linkType: hard
+
+"es-abstract@npm:^1.17.5, es-abstract@npm:^1.23.2, es-abstract@npm:^1.23.3, es-abstract@npm:^1.23.5, es-abstract@npm:^1.23.6, es-abstract@npm:^1.23.9, es-abstract@npm:^1.24.0, es-abstract@npm:^1.24.2":
+  version: 1.24.2
+  resolution: "es-abstract@npm:1.24.2"
+  dependencies:
+    array-buffer-byte-length: "npm:^1.0.2"
+    arraybuffer.prototype.slice: "npm:^1.0.4"
+    available-typed-arrays: "npm:^1.0.7"
+    call-bind: "npm:^1.0.8"
+    call-bound: "npm:^1.0.4"
+    data-view-buffer: "npm:^1.0.2"
+    data-view-byte-length: "npm:^1.0.2"
+    data-view-byte-offset: "npm:^1.0.1"
+    es-define-property: "npm:^1.0.1"
+    es-errors: "npm:^1.3.0"
+    es-object-atoms: "npm:^1.1.1"
+    es-set-tostringtag: "npm:^2.1.0"
+    es-to-primitive: "npm:^1.3.0"
+    function.prototype.name: "npm:^1.1.8"
+    get-intrinsic: "npm:^1.3.0"
+    get-proto: "npm:^1.0.1"
+    get-symbol-description: "npm:^1.1.0"
+    globalthis: "npm:^1.0.4"
+    gopd: "npm:^1.2.0"
+    has-property-descriptors: "npm:^1.0.2"
+    has-proto: "npm:^1.2.0"
+    has-symbols: "npm:^1.1.0"
+    hasown: "npm:^2.0.2"
+    internal-slot: "npm:^1.1.0"
+    is-array-buffer: "npm:^3.0.5"
+    is-callable: "npm:^1.2.7"
+    is-data-view: "npm:^1.0.2"
+    is-negative-zero: "npm:^2.0.3"
+    is-regex: "npm:^1.2.1"
+    is-set: "npm:^2.0.3"
+    is-shared-array-buffer: "npm:^1.0.4"
+    is-string: "npm:^1.1.1"
+    is-typed-array: "npm:^1.1.15"
+    is-weakref: "npm:^1.1.1"
+    math-intrinsics: "npm:^1.1.0"
+    object-inspect: "npm:^1.13.4"
+    object-keys: "npm:^1.1.1"
+    object.assign: "npm:^4.1.7"
+    own-keys: "npm:^1.0.1"
+    regexp.prototype.flags: "npm:^1.5.4"
+    safe-array-concat: "npm:^1.1.3"
+    safe-push-apply: "npm:^1.0.0"
+    safe-regex-test: "npm:^1.1.0"
+    set-proto: "npm:^1.0.0"
+    stop-iteration-iterator: "npm:^1.1.0"
+    string.prototype.trim: "npm:^1.2.10"
+    string.prototype.trimend: "npm:^1.0.9"
+    string.prototype.trimstart: "npm:^1.0.8"
+    typed-array-buffer: "npm:^1.0.3"
+    typed-array-byte-length: "npm:^1.0.3"
+    typed-array-byte-offset: "npm:^1.0.4"
+    typed-array-length: "npm:^1.0.7"
+    unbox-primitive: "npm:^1.1.0"
+    which-typed-array: "npm:^1.1.19"
+  checksum: 10/e2c97263d87b7faf65102d887074af421db7e48cd92b8b3cd308216cdd2547b647e8f61bf51429bdb13adc463bb7f421989544cbfd2e7f7469ef7a69ae8a4205
+  languageName: node
+  linkType: hard
+
+"es-define-property@npm:^1.0.0, es-define-property@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "es-define-property@npm:1.0.1"
+  checksum: 10/f8dc9e660d90919f11084db0a893128f3592b781ce967e4fccfb8f3106cb83e400a4032c559184ec52ee1dbd4b01e7776c7cd0b3327b1961b1a4a7008920fe78
+  languageName: node
+  linkType: hard
+
+"es-errors@npm:^1.3.0":
+  version: 1.3.0
+  resolution: "es-errors@npm:1.3.0"
+  checksum: 10/96e65d640156f91b707517e8cdc454dd7d47c32833aa3e85d79f24f9eb7ea85f39b63e36216ef0114996581969b59fe609a94e30316b08f5f4df1d44134cf8d5
+  languageName: node
+  linkType: hard
+
+"es-iterator-helpers@npm:^1.2.1":
+  version: 1.4.0
+  resolution: "es-iterator-helpers@npm:1.4.0"
+  dependencies:
+    call-bind: "npm:^1.0.9"
+    call-bound: "npm:^1.0.4"
+    define-properties: "npm:^1.2.1"
+    es-abstract: "npm:^1.24.2"
+    es-errors: "npm:^1.3.0"
+    es-set-tostringtag: "npm:^2.1.0"
+    function-bind: "npm:^1.1.2"
+    get-intrinsic: "npm:^1.3.0"
+    globalthis: "npm:^1.0.4"
+    gopd: "npm:^1.2.0"
+    has-property-descriptors: "npm:^1.0.2"
+    has-proto: "npm:^1.2.0"
+    has-symbols: "npm:^1.1.0"
+    internal-slot: "npm:^1.1.0"
+    iterator.prototype: "npm:^1.1.5"
+    math-intrinsics: "npm:^1.1.0"
+  checksum: 10/03b5c121e1672ba0022be49204fb36f042069864b14db85555cf8de6bc7cea6aaf283278f66d8c66d0d408b8590a3113af3426e2d750c5c962b5e5719b5dff2d
+  languageName: node
+  linkType: hard
+
+"es-module-lexer@npm:^1.5.4":
+  version: 1.7.0
+  resolution: "es-module-lexer@npm:1.7.0"
+  checksum: 10/b6f3e576a3fed4d82b0d0ad4bbf6b3a5ad694d2e7ce8c4a069560da3db6399381eaba703616a182b16dde50ce998af64e07dcf49f2ae48153b9e07be3f107087
+  languageName: node
+  linkType: hard
+
+"es-module-lexer@npm:^2.0.0":
+  version: 2.3.2
+  resolution: "es-module-lexer@npm:2.3.2"
+  checksum: 10/065246d6e2b2dfea3287650b5800a30326771e0d9d238570e81371d7ae8d53db239bccb2166e272926bba44917da7c66dd7407a5214d17b0af5269005b1fec52
+  languageName: node
+  linkType: hard
+
+"es-object-atoms@npm:^1.0.0, es-object-atoms@npm:^1.1.1, es-object-atoms@npm:^1.1.2":
+  version: 1.1.2
+  resolution: "es-object-atoms@npm:1.1.2"
+  dependencies:
+    es-errors: "npm:^1.3.0"
+  checksum: 10/70041de72ab8996df74c17775cdedb8a0c36eb09a4111921d974f7d018af963023bb035a328b5772c2851daa40fb49f52313be0418763a975cb42cb6fe723255
+  languageName: node
+  linkType: hard
+
+"es-set-tostringtag@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "es-set-tostringtag@npm:2.1.0"
+  dependencies:
+    es-errors: "npm:^1.3.0"
+    get-intrinsic: "npm:^1.2.6"
+    has-tostringtag: "npm:^1.0.2"
+    hasown: "npm:^2.0.2"
+  checksum: 10/86814bf8afbcd8966653f731415888019d4bc4aca6b6c354132a7a75bb87566751e320369654a101d23a91c87a85c79b178bcf40332839bd347aff437c4fb65f
+  languageName: node
+  linkType: hard
+
+"es-shim-unscopables@npm:^1.0.2, es-shim-unscopables@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "es-shim-unscopables@npm:1.1.0"
+  dependencies:
+    hasown: "npm:^2.0.2"
+  checksum: 10/c351f586c30bbabc62355be49564b2435468b52c3532b8a1663672e3d10dc300197e69c247869dd173e56d86423ab95fc0c10b0939cdae597094e0fdca078cba
+  languageName: node
+  linkType: hard
+
+"es-to-primitive@npm:^1.3.0":
+  version: 1.3.4
+  resolution: "es-to-primitive@npm:1.3.4"
+  dependencies:
+    es-abstract-get: "npm:^1.0.0"
+    es-define-property: "npm:^1.0.1"
+    es-errors: "npm:^1.3.0"
+    is-callable: "npm:^1.2.7"
+    is-date-object: "npm:^1.1.0"
+    is-symbol: "npm:^1.1.1"
+  checksum: 10/7a68d778c06de7de960682c57f4103259ca3cb6dc720b8908a027b04bf1216ae4c1688a8999443f871f03efaf8ec7c24b28f33892e2a553c2a4e3bc6bd0e276a
+  languageName: node
+  linkType: hard
+
+"esbuild@npm:^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0 || ^0.25.0 || ^0.26.0 || ^0.27.0 || ^0.28.0":
+  version: 0.28.2
+  resolution: "esbuild@npm:0.28.2"
+  dependencies:
+    "@esbuild/aix-ppc64": "npm:0.28.2"
+    "@esbuild/android-arm": "npm:0.28.2"
+    "@esbuild/android-arm64": "npm:0.28.2"
+    "@esbuild/android-x64": "npm:0.28.2"
+    "@esbuild/darwin-arm64": "npm:0.28.2"
+    "@esbuild/darwin-x64": "npm:0.28.2"
+    "@esbuild/freebsd-arm64": "npm:0.28.2"
+    "@esbuild/freebsd-x64": "npm:0.28.2"
+    "@esbuild/linux-arm": "npm:0.28.2"
+    "@esbuild/linux-arm64": "npm:0.28.2"
+    "@esbuild/linux-ia32": "npm:0.28.2"
+    "@esbuild/linux-loong64": "npm:0.28.2"
+    "@esbuild/linux-mips64el": "npm:0.28.2"
+    "@esbuild/linux-ppc64": "npm:0.28.2"
+    "@esbuild/linux-riscv64": "npm:0.28.2"
+    "@esbuild/linux-s390x": "npm:0.28.2"
+    "@esbuild/linux-x64": "npm:0.28.2"
+    "@esbuild/netbsd-arm64": "npm:0.28.2"
+    "@esbuild/netbsd-x64": "npm:0.28.2"
+    "@esbuild/openbsd-arm64": "npm:0.28.2"
+    "@esbuild/openbsd-x64": "npm:0.28.2"
+    "@esbuild/openharmony-arm64": "npm:0.28.2"
+    "@esbuild/sunos-x64": "npm:0.28.2"
+    "@esbuild/win32-arm64": "npm:0.28.2"
+    "@esbuild/win32-ia32": "npm:0.28.2"
+    "@esbuild/win32-x64": "npm:0.28.2"
+  dependenciesMeta:
+    "@esbuild/aix-ppc64":
+      optional: true
+    "@esbuild/android-arm":
+      optional: true
+    "@esbuild/android-arm64":
+      optional: true
+    "@esbuild/android-x64":
+      optional: true
+    "@esbuild/darwin-arm64":
+      optional: true
+    "@esbuild/darwin-x64":
+      optional: true
+    "@esbuild/freebsd-arm64":
+      optional: true
+    "@esbuild/freebsd-x64":
+      optional: true
+    "@esbuild/linux-arm":
+      optional: true
+    "@esbuild/linux-arm64":
+      optional: true
+    "@esbuild/linux-ia32":
+      optional: true
+    "@esbuild/linux-loong64":
+      optional: true
+    "@esbuild/linux-mips64el":
+      optional: true
+    "@esbuild/linux-ppc64":
+      optional: true
+    "@esbuild/linux-riscv64":
+      optional: true
+    "@esbuild/linux-s390x":
+      optional: true
+    "@esbuild/linux-x64":
+      optional: true
+    "@esbuild/netbsd-arm64":
+      optional: true
+    "@esbuild/netbsd-x64":
+      optional: true
+    "@esbuild/openbsd-arm64":
+      optional: true
+    "@esbuild/openbsd-x64":
+      optional: true
+    "@esbuild/openharmony-arm64":
+      optional: true
+    "@esbuild/sunos-x64":
+      optional: true
+    "@esbuild/win32-arm64":
+      optional: true
+    "@esbuild/win32-ia32":
+      optional: true
+    "@esbuild/win32-x64":
+      optional: true
+  bin:
+    esbuild: bin/esbuild
+  checksum: 10/c21a050b308c6f4b99e1a6ed458661d49b83b424b05c5e0851072f7b01fc2999910754454f6833599175d6c94102d99e400849dd67cfcbeef4f0aec7dfa504a6
+  languageName: node
+  linkType: hard
+
+"escalade@npm:^3.1.1, escalade@npm:^3.2.0":
+  version: 3.2.0
+  resolution: "escalade@npm:3.2.0"
+  checksum: 10/9d7169e3965b2f9ae46971afa392f6e5a25545ea30f2e2dd99c9b0a95a3f52b5653681a84f5b2911a413ddad2d7a93d3514165072f349b5ffc59c75a899970d6
+  languageName: node
+  linkType: hard
+
+"escape-string-regexp@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "escape-string-regexp@npm:4.0.0"
+  checksum: 10/98b48897d93060f2322108bf29db0feba7dd774be96cd069458d1453347b25ce8682ecc39859d4bca2203cc0ab19c237bcc71755eff49a0f8d90beadeeba5cc5
+  languageName: node
+  linkType: hard
+
+"eslint-config-prettier@npm:^10.1.8":
+  version: 10.1.8
+  resolution: "eslint-config-prettier@npm:10.1.8"
+  peerDependencies:
+    eslint: ">=7.0.0"
+  bin:
+    eslint-config-prettier: bin/cli.js
+  checksum: 10/03f8e6ea1a6a9b8f9eeaf7c8c52a96499ec4b275b9ded33331a6cc738ed1d56de734097dbd0091f136f0e84bc197388bd8ec22a52a4658105883f8c8b7d8921a
+  languageName: node
+  linkType: hard
+
+"eslint-import-resolver-node@npm:^0.3.9":
+  version: 0.3.10
+  resolution: "eslint-import-resolver-node@npm:0.3.10"
+  dependencies:
+    debug: "npm:^3.2.7"
+    is-core-module: "npm:^2.16.1"
+    resolve: "npm:^2.0.0-next.6"
+  checksum: 10/f0ad564d345fc53076b46f726b6f9ba96a40d1b7cb33d515ea89d41d1dba37db4ff9b864550608756c2ba061c9e243bf10b920d975848616d0c6c4474f4ea415
+  languageName: node
+  linkType: hard
+
+"eslint-module-utils@npm:^2.12.1":
+  version: 2.14.0
+  resolution: "eslint-module-utils@npm:2.14.0"
+  dependencies:
+    debug: "npm:^3.2.7"
+  peerDependenciesMeta:
+    eslint:
+      optional: true
+  checksum: 10/78e508bc522717e756bcd1d84956ce43a5326cbb454c69b8fc1b4006c70b3d8bf93de61b389c32d76cf1e2fe1dcf035261445ed5b3f22b14338c73685de11c80
+  languageName: node
+  linkType: hard
+
+"eslint-plugin-import@npm:^2.32.0":
+  version: 2.32.0
+  resolution: "eslint-plugin-import@npm:2.32.0"
+  dependencies:
+    "@rtsao/scc": "npm:^1.1.0"
+    array-includes: "npm:^3.1.9"
+    array.prototype.findlastindex: "npm:^1.2.6"
+    array.prototype.flat: "npm:^1.3.3"
+    array.prototype.flatmap: "npm:^1.3.3"
+    debug: "npm:^3.2.7"
+    doctrine: "npm:^2.1.0"
+    eslint-import-resolver-node: "npm:^0.3.9"
+    eslint-module-utils: "npm:^2.12.1"
+    hasown: "npm:^2.0.2"
+    is-core-module: "npm:^2.16.1"
+    is-glob: "npm:^4.0.3"
+    minimatch: "npm:^3.1.2"
+    object.fromentries: "npm:^2.0.8"
+    object.groupby: "npm:^1.0.3"
+    object.values: "npm:^1.2.1"
+    semver: "npm:^6.3.1"
+    string.prototype.trimend: "npm:^1.0.9"
+    tsconfig-paths: "npm:^3.15.0"
+  peerDependencies:
+    eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8 || ^9
+  checksum: 10/1bacf4967e9ebf99e12176a795f0d6d3a87d1c9a030c2207f27b267e10d96a1220be2647504c7fc13ab543cdf13ffef4b8f5620e0447032dba4ff0d3922f7c9e
+  languageName: node
+  linkType: hard
+
+"eslint-plugin-no-null@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "eslint-plugin-no-null@npm:1.0.2"
+  peerDependencies:
+    eslint: ">=3.0.0"
+  checksum: 10/1cf6a64e68e83930692699c268914ef6aa34cf7521372521241e7ebe89927ebcb514149a0225705f5d34063d291d39e1dd98ef4aeb3a6daaa2b2c3241b361c6d
+  languageName: node
+  linkType: hard
+
+"eslint-plugin-prettier@npm:^5.5.6":
+  version: 5.5.6
+  resolution: "eslint-plugin-prettier@npm:5.5.6"
+  dependencies:
+    prettier-linter-helpers: "npm:^1.0.1"
+    synckit: "npm:^0.11.13"
+  peerDependencies:
+    "@types/eslint": ">=8.0.0"
+    eslint: ">=8.0.0"
+    eslint-config-prettier: ">= 7.0.0 <10.0.0 || >=10.1.0"
+    prettier: ">=3.0.0"
+  peerDependenciesMeta:
+    "@types/eslint":
+      optional: true
+    eslint-config-prettier:
+      optional: true
+  checksum: 10/18a0189e084dd5f1e4e3944a8ff89f20d69c14f100965033a94edd8de16fb7abdcbf226fbc40f27b7ac6cfdb779065272dd8a9e6ca34ed86a59d895e630bd48b
+  languageName: node
+  linkType: hard
+
+"eslint-plugin-react@npm:^7.37.5":
+  version: 7.37.5
+  resolution: "eslint-plugin-react@npm:7.37.5"
+  dependencies:
+    array-includes: "npm:^3.1.8"
+    array.prototype.findlast: "npm:^1.2.5"
+    array.prototype.flatmap: "npm:^1.3.3"
+    array.prototype.tosorted: "npm:^1.1.4"
+    doctrine: "npm:^2.1.0"
+    es-iterator-helpers: "npm:^1.2.1"
+    estraverse: "npm:^5.3.0"
+    hasown: "npm:^2.0.2"
+    jsx-ast-utils: "npm:^2.4.1 || ^3.0.0"
+    minimatch: "npm:^3.1.2"
+    object.entries: "npm:^1.1.9"
+    object.fromentries: "npm:^2.0.8"
+    object.values: "npm:^1.2.1"
+    prop-types: "npm:^15.8.1"
+    resolve: "npm:^2.0.0-next.5"
+    semver: "npm:^6.3.1"
+    string.prototype.matchall: "npm:^4.0.12"
+    string.prototype.repeat: "npm:^1.0.0"
+  peerDependencies:
+    eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7
+  checksum: 10/ee1bd4e0ec64f29109d5a625bb703d179c82e0159c86c3f1b52fc1209d2994625a137dae303c333fb308a2e38315e44066d5204998177e31974382f9fda25d5c
+  languageName: node
+  linkType: hard
+
+"eslint-scope@npm:^9.1.2":
+  version: 9.1.2
+  resolution: "eslint-scope@npm:9.1.2"
+  dependencies:
+    "@types/esrecurse": "npm:^4.3.1"
+    "@types/estree": "npm:^1.0.8"
+    esrecurse: "npm:^4.3.0"
+    estraverse: "npm:^5.2.0"
+  checksum: 10/d102a22525020be99a6897c0d5570b16a387b251e661ba70cedb4f983536d5acd45b9ea2ee05b63ab04f6c35e4f2ed00a113d1c6fb5f61ff879d92e46d0c2f15
+  languageName: node
+  linkType: hard
+
+"eslint-visitor-keys@npm:^3.4.3":
+  version: 3.4.3
+  resolution: "eslint-visitor-keys@npm:3.4.3"
+  checksum: 10/3f357c554a9ea794b094a09bd4187e5eacd1bc0d0653c3adeb87962c548e6a1ab8f982b86963ae1337f5d976004146536dcee5d0e2806665b193fbfbf1a9231b
+  languageName: node
+  linkType: hard
+
+"eslint-visitor-keys@npm:^4.2.1":
+  version: 4.2.1
+  resolution: "eslint-visitor-keys@npm:4.2.1"
+  checksum: 10/3ee00fc6a7002d4b0ffd9dc99e13a6a7882c557329e6c25ab254220d71e5c9c4f89dca4695352949ea678eb1f3ba912a18ef8aac0a7fe094196fd92f441bfce2
+  languageName: node
+  linkType: hard
+
+"eslint-visitor-keys@npm:^5.0.0, eslint-visitor-keys@npm:^5.0.1":
+  version: 5.0.1
+  resolution: "eslint-visitor-keys@npm:5.0.1"
+  checksum: 10/f9cc1a57b75e0ef949545cac33d01e8367e302de4c1483266ed4d8646ee5c306376660196bbb38b004e767b7043d1e661cb4336b49eff634a1bbe75c1db709ec
+  languageName: node
+  linkType: hard
+
+"eslint@npm:^10.9.1":
+  version: 10.9.1
+  resolution: "eslint@npm:10.9.1"
+  dependencies:
+    "@eslint-community/eslint-utils": "npm:^4.8.0"
+    "@eslint-community/regexpp": "npm:^4.12.2"
+    "@eslint/config-array": "npm:^0.23.5"
+    "@eslint/config-helpers": "npm:^0.7.0"
+    "@eslint/core": "npm:^1.2.1"
+    "@eslint/plugin-kit": "npm:^0.7.2"
+    "@humanfs/node": "npm:^0.16.6"
+    "@humanwhocodes/module-importer": "npm:^1.0.1"
+    "@humanwhocodes/retry": "npm:^0.4.2"
+    "@types/estree": "npm:^1.0.6"
+    ajv: "npm:^6.14.0"
+    cross-spawn: "npm:^7.0.6"
+    debug: "npm:^4.3.2"
+    escape-string-regexp: "npm:^4.0.0"
+    eslint-scope: "npm:^9.1.2"
+    eslint-visitor-keys: "npm:^5.0.1"
+    espree: "npm:^11.2.0"
+    esquery: "npm:^1.7.0"
+    esutils: "npm:^2.0.2"
+    fast-deep-equal: "npm:^3.1.3"
+    file-entry-cache: "npm:^8.0.0"
+    find-up: "npm:^5.0.0"
+    glob-parent: "npm:^6.0.2"
+    ignore: "npm:^5.2.0"
+    imurmurhash: "npm:^0.1.4"
+    is-glob: "npm:^4.0.0"
+    json-stable-stringify-without-jsonify: "npm:^1.0.1"
+    minimatch: "npm:^10.2.5"
+    natural-compare: "npm:^1.4.0"
+    optionator: "npm:^0.9.3"
+  peerDependencies:
+    jiti: "*"
+  peerDependenciesMeta:
+    jiti:
+      optional: true
+  bin:
+    eslint: bin/eslint.js
+  checksum: 10/4cee237c7d2c445a05330e595b18521d7452fd3f419241bf1ccf81c769a6761c10ca5a06988197482d4842ed1a26b1dcb51b9526408990cee84559e6c08cb3ab
+  languageName: node
+  linkType: hard
+
+"espree@npm:^10.0.1":
+  version: 10.4.0
+  resolution: "espree@npm:10.4.0"
+  dependencies:
+    acorn: "npm:^8.15.0"
+    acorn-jsx: "npm:^5.3.2"
+    eslint-visitor-keys: "npm:^4.2.1"
+  checksum: 10/9b355b32dbd1cc9f57121d5ee3be258fab87ebeb7c83fc6c02e5af1a74fc8c5ba79fe8c663e69ea112c3e84a1b95e6a2067ac4443ee7813bb85ac7581acb8bf9
+  languageName: node
+  linkType: hard
+
+"espree@npm:^11.2.0":
+  version: 11.2.0
+  resolution: "espree@npm:11.2.0"
+  dependencies:
+    acorn: "npm:^8.16.0"
+    acorn-jsx: "npm:^5.3.2"
+    eslint-visitor-keys: "npm:^5.0.1"
+  checksum: 10/5cc4233b8f150010c70713669ef8231f07fe9b6391870cfa0a292a07f723ed5c2922064b978e627f7cabf7753280e64c5bde41d3840caaa40946989df7009a51
+  languageName: node
+  linkType: hard
+
+"esprima@npm:~4.0.0":
+  version: 4.0.1
+  resolution: "esprima@npm:4.0.1"
+  bin:
+    esparse: ./bin/esparse.js
+    esvalidate: ./bin/esvalidate.js
+  checksum: 10/f1d3c622ad992421362294f7acf866aa9409fbad4eb2e8fa230bd33944ce371d32279667b242d8b8907ec2b6ad7353a717f3c0e60e748873a34a7905174bc0eb
+  languageName: node
+  linkType: hard
+
+"esquery@npm:^1.7.0":
+  version: 1.7.0
+  resolution: "esquery@npm:1.7.0"
+  dependencies:
+    estraverse: "npm:^5.1.0"
+  checksum: 10/4afaf3089367e1f5885caa116ef386dffd8bfd64da21fd3d0e56e938d2667cfb2e5400ab4a825aa70e799bb3741e5b5d63c0b94d86e2d4cf3095c9e64b2f5a15
+  languageName: node
+  linkType: hard
+
+"esrecurse@npm:^4.3.0":
+  version: 4.3.0
+  resolution: "esrecurse@npm:4.3.0"
+  dependencies:
+    estraverse: "npm:^5.2.0"
+  checksum: 10/44ffcd89e714ea6b30143e7f119b104fc4d75e77ee913f34d59076b40ef2d21967f84e019f84e1fd0465b42cdbf725db449f232b5e47f29df29ed76194db8e16
+  languageName: node
+  linkType: hard
+
+"estraverse@npm:^5.1.0, estraverse@npm:^5.2.0, estraverse@npm:^5.3.0":
+  version: 5.3.0
+  resolution: "estraverse@npm:5.3.0"
+  checksum: 10/37cbe6e9a68014d34dbdc039f90d0baf72436809d02edffcc06ba3c2a12eb298048f877511353b130153e532aac8d68ba78430c0dd2f44806ebc7c014b01585e
+  languageName: node
+  linkType: hard
+
+"estree-walker@npm:^2.0.2":
+  version: 2.0.2
+  resolution: "estree-walker@npm:2.0.2"
+  checksum: 10/b02109c5d46bc2ed47de4990eef770f7457b1159a229f0999a09224d2b85ffeed2d7679cffcff90aeb4448e94b0168feb5265b209cdec29aad50a3d6e93d21e2
+  languageName: node
+  linkType: hard
+
+"estree-walker@npm:^3.0.3":
+  version: 3.0.3
+  resolution: "estree-walker@npm:3.0.3"
+  dependencies:
+    "@types/estree": "npm:^1.0.0"
+  checksum: 10/a65728d5727b71de172c5df323385755a16c0fdab8234dc756c3854cfee343261ddfbb72a809a5660fac8c75d960bb3e21aa898c2d7e9b19bb298482ca58a3af
+  languageName: node
+  linkType: hard
+
+"esutils@npm:^2.0.2":
+  version: 2.0.3
+  resolution: "esutils@npm:2.0.3"
+  checksum: 10/b23acd24791db11d8f65be5ea58fd9a6ce2df5120ae2da65c16cfc5331ff59d5ac4ef50af66cd4bde238881503ec839928a0135b99a036a9cdfa22d17fd56cdb
+  languageName: node
+  linkType: hard
+
+"eventemitter3@npm:^5.0.0, eventemitter3@npm:^5.0.1":
+  version: 5.0.4
+  resolution: "eventemitter3@npm:5.0.4"
+  checksum: 10/54f5c8c543650d65f92d03dbef1bb73a682a920490c44699ad8f863a6b19bbca42fb7409aa09ca09cb98a44149d9a7bc1dffd55ca88a740bd928c7be0ad666a0
+  languageName: node
+  linkType: hard
+
+"expect-type@npm:^1.3.0":
+  version: 1.4.0
+  resolution: "expect-type@npm:1.4.0"
+  checksum: 10/bad91f4b7eb807248695ee840a935d12818fe531ad523bc7ac7dcc540a4d86dc566a3ef829f4da6e8b5a458ac84092771739865114c91e7e8a9317302f401f09
+  languageName: node
+  linkType: hard
+
+"exponential-backoff@npm:^3.1.1":
+  version: 3.1.3
+  resolution: "exponential-backoff@npm:3.1.3"
+  checksum: 10/ca25962b4bbab943b7c4ed0b5228e263833a5063c65e1cdeac4be9afad350aae5466e8e619b5051f4f8d37b2144a2d6e8fcc771b6cc82934f7dade2f964f652c
+  languageName: node
+  linkType: hard
+
+"fast-deep-equal@npm:^3.1.1, fast-deep-equal@npm:^3.1.3":
+  version: 3.1.3
+  resolution: "fast-deep-equal@npm:3.1.3"
+  checksum: 10/e21a9d8d84f53493b6aa15efc9cfd53dd5b714a1f23f67fb5dc8f574af80df889b3bce25dc081887c6d25457cce704e636395333abad896ccdec03abaf1f3f9d
+  languageName: node
+  linkType: hard
+
+"fast-diff@npm:^1.1.2":
+  version: 1.3.0
+  resolution: "fast-diff@npm:1.3.0"
+  checksum: 10/9e57415bc69cd6efcc720b3b8fe9fdaf42dcfc06f86f0f45378b1fa512598a8aac48aa3928c8751d58e2f01bb4ba4f07e4f3d9bc0d57586d45f1bd1e872c6cde
+  languageName: node
+  linkType: hard
+
+"fast-glob@npm:^3.3.2":
+  version: 3.3.3
+  resolution: "fast-glob@npm:3.3.3"
+  dependencies:
+    "@nodelib/fs.stat": "npm:^2.0.2"
+    "@nodelib/fs.walk": "npm:^1.2.3"
+    glob-parent: "npm:^5.1.2"
+    merge2: "npm:^1.3.0"
+    micromatch: "npm:^4.0.8"
+  checksum: 10/dcc6432b269762dd47381d8b8358bf964d8f4f60286ac6aa41c01ade70bda459ff2001b516690b96d5365f68a49242966112b5d5cc9cd82395fa8f9d017c90ad
+  languageName: node
+  linkType: hard
+
+"fast-json-stable-stringify@npm:^2.0.0":
+  version: 2.1.0
+  resolution: "fast-json-stable-stringify@npm:2.1.0"
+  checksum: 10/2c20055c1fa43c922428f16ca8bb29f2807de63e5c851f665f7ac9790176c01c3b40335257736b299764a8d383388dabc73c8083b8e1bc3d99f0a941444ec60e
+  languageName: node
+  linkType: hard
+
+"fast-levenshtein@npm:^2.0.6":
+  version: 2.0.6
+  resolution: "fast-levenshtein@npm:2.0.6"
+  checksum: 10/eb7e220ecf2bab5159d157350b81d01f75726a4382f5a9266f42b9150c4523b9795f7f5d9fbbbeaeac09a441b2369f05ee02db48ea938584205530fe5693cfe1
+  languageName: node
+  linkType: hard
+
+"fastq@npm:^1.6.0":
+  version: 1.20.1
+  resolution: "fastq@npm:1.20.1"
+  dependencies:
+    reusify: "npm:^1.0.4"
+  checksum: 10/ab2fe3a7a108112e7752cfe7fc11683c21e595913a6a593ad0b4415f31dddbfc283775ab66f2c8ccea6ab7cfc116157cbddcfae9798d9de98d08fe0a2c3e97b2
+  languageName: node
+  linkType: hard
+
+"fdir@npm:^6.5.0":
+  version: 6.5.0
+  resolution: "fdir@npm:6.5.0"
+  peerDependencies:
+    picomatch: ^3 || ^4
+  peerDependenciesMeta:
+    picomatch:
+      optional: true
+  checksum: 10/14ca1c9f0a0e8f4f2e9bf4e8551065a164a09545dae548c12a18d238b72e51e5a7b39bd8e5494b56463a0877672d0a6c1ef62c6fa0677db1b0c847773be939b1
+  languageName: node
+  linkType: hard
+
+"file-entry-cache@npm:^8.0.0":
+  version: 8.0.0
+  resolution: "file-entry-cache@npm:8.0.0"
+  dependencies:
+    flat-cache: "npm:^4.0.0"
+  checksum: 10/afe55c4de4e0d226a23c1eae62a7219aafb390859122608a89fa4df6addf55c7fd3f1a2da6f5b41e7cdff496e4cf28bbd215d53eab5c817afa96d2b40c81bfb0
+  languageName: node
+  linkType: hard
+
+"fill-range@npm:^7.1.1":
+  version: 7.1.1
+  resolution: "fill-range@npm:7.1.1"
+  dependencies:
+    to-regex-range: "npm:^5.0.1"
+  checksum: 10/a7095cb39e5bc32fada2aa7c7249d3f6b01bd1ce461a61b0adabacccabd9198500c6fb1f68a7c851a657e273fce2233ba869638897f3d7ed2e87a2d89b4436ea
+  languageName: node
+  linkType: hard
+
+"find-up@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "find-up@npm:5.0.0"
+  dependencies:
+    locate-path: "npm:^6.0.0"
+    path-exists: "npm:^4.0.0"
+  checksum: 10/07955e357348f34660bde7920783204ff5a26ac2cafcaa28bace494027158a97b9f56faaf2d89a6106211a8174db650dd9f503f9c0d526b1202d5554a00b9095
+  languageName: node
+  linkType: hard
+
+"find-value@npm:^1.0.12":
+  version: 1.0.13
+  resolution: "find-value@npm:1.0.13"
+  checksum: 10/afc34a8399c800de215924277302e896ebe32be0742fa53cb369fb7158d658759111bd88dd51ce5cfe2fe4dd64d1a53fd23ba495701b31030090348f6761e55e
+  languageName: node
+  linkType: hard
+
+"flat-cache@npm:^4.0.0":
+  version: 4.0.1
+  resolution: "flat-cache@npm:4.0.1"
+  dependencies:
+    flatted: "npm:^3.2.9"
+    keyv: "npm:^4.5.4"
+  checksum: 10/58ce851d9045fffc7871ce2bd718bc485ad7e777bf748c054904b87c351ff1080c2c11da00788d78738bfb51b71e4d5ea12d13b98eb36e3358851ffe495b62dc
+  languageName: node
+  linkType: hard
+
+"flat@npm:^5.0.2":
+  version: 5.0.2
+  resolution: "flat@npm:5.0.2"
+  bin:
+    flat: cli.js
+  checksum: 10/72479e651c15eab53e25ce04c31bab18cfaac0556505cac19221dbbe85bbb9686bc76e4d397e89e5bf516ce667dcf818f8b07e585568edba55abc2bf1f698fb5
+  languageName: node
+  linkType: hard
+
+"flatted@npm:^3.2.9":
+  version: 3.4.4
+  resolution: "flatted@npm:3.4.4"
+  checksum: 10/5a6682ab87ed15e125419c61352c4bef26f310adceece03eae5f22c119d64ed47bfc0ee1948a77d0122559eaa86395ea06ef45b59bfe3db4fb13fb4cdff876de
+  languageName: node
+  linkType: hard
+
+"for-each@npm:^0.3.3, for-each@npm:^0.3.5":
+  version: 0.3.5
+  resolution: "for-each@npm:0.3.5"
+  dependencies:
+    is-callable: "npm:^1.2.7"
+  checksum: 10/330cc2439f85c94f4609de3ee1d32c5693ae15cdd7fe3d112c4fd9efd4ce7143f2c64ef6c2c9e0cfdb0058437f33ef05b5bdae5b98fcc903fb2143fbaf0fea0f
+  languageName: node
+  linkType: hard
+
+"foreground-child@npm:^3.1.0":
+  version: 3.3.1
+  resolution: "foreground-child@npm:3.3.1"
+  dependencies:
+    cross-spawn: "npm:^7.0.6"
+    signal-exit: "npm:^4.0.1"
+  checksum: 10/427b33f997a98073c0424e5c07169264a62cda806d8d2ded159b5b903fdfc8f0a1457e06b5fc35506497acb3f1e353f025edee796300209ac6231e80edece835
+  languageName: node
+  linkType: hard
+
+"fraction.js@npm:^5.3.4":
+  version: 5.3.4
+  resolution: "fraction.js@npm:5.3.4"
+  checksum: 10/ef2c4bc81b2484065f8f7e4c2498f3fdfe6d233b8e7c7f75e3683ed10698536129b2c2dbd6c3f788ca4a020ec07116dd909a91036a364c98dc802b5003bfc613
+  languageName: node
+  linkType: hard
+
+"framer-motion@npm:13.1.1":
+  version: 13.1.1
+  resolution: "framer-motion@npm:13.1.1"
+  dependencies:
+    motion-dom: "npm:^13.1.1"
+    motion-utils: "npm:^13.0.0"
+    tslib: "npm:^2.4.0"
+  peerDependencies:
+    react: ^18.0.0 || ^19.0.0
+    react-dom: ^18.0.0 || ^19.0.0
+  peerDependenciesMeta:
+    react:
+      optional: true
+    react-dom:
+      optional: true
+  checksum: 10/78904da047762834e69810660d1aa73c99f07d69097c80e07b3c8b5bbd6f1dbf488e243fe5a482705baf1608903096d494a3be7322ee4af0e979766ce3aae11f
+  languageName: node
+  linkType: hard
+
+"fsevents@npm:2.3.2":
+  version: 2.3.2
+  resolution: "fsevents@npm:2.3.2"
+  dependencies:
+    node-gyp: "npm:latest"
+  checksum: 10/6b5b6f5692372446ff81cf9501c76e3e0459a4852b3b5f1fc72c103198c125a6b8c72f5f166bdd76ffb2fca261e7f6ee5565daf80dca6e571e55bcc589cc1256
+  conditions: os=darwin
+  languageName: node
+  linkType: hard
+
+"fsevents@npm:~2.3.2, fsevents@npm:~2.3.3":
+  version: 2.3.3
+  resolution: "fsevents@npm:2.3.3"
+  dependencies:
+    node-gyp: "npm:latest"
+  checksum: 10/4c1ade961ded57cdbfbb5cac5106ec17bc8bccd62e16343c569a0ceeca83b9dfef87550b4dc5cbb89642da412b20c5071f304c8c464b80415446e8e155a038c0
+  conditions: os=darwin
+  languageName: node
+  linkType: hard
+
+"fsevents@patch:fsevents@npm%3A2.3.2#optional!builtin<compat/fsevents>":
+  version: 2.3.2
+  resolution: "fsevents@patch:fsevents@npm%3A2.3.2#optional!builtin<compat/fsevents>::version=2.3.2&hash=df0bf1"
+  dependencies:
+    node-gyp: "npm:latest"
+  conditions: os=darwin
+  languageName: node
+  linkType: hard
+
+"fsevents@patch:fsevents@npm%3A~2.3.2#optional!builtin<compat/fsevents>, fsevents@patch:fsevents@npm%3A~2.3.3#optional!builtin<compat/fsevents>":
+  version: 2.3.3
+  resolution: "fsevents@patch:fsevents@npm%3A2.3.3#optional!builtin<compat/fsevents>::version=2.3.3&hash=df0bf1"
+  dependencies:
+    node-gyp: "npm:latest"
+  conditions: os=darwin
+  languageName: node
+  linkType: hard
+
+"function-bind@npm:^1.1.2":
+  version: 1.1.2
+  resolution: "function-bind@npm:1.1.2"
+  checksum: 10/185e20d20f10c8d661d59aac0f3b63b31132d492e1b11fcc2a93cb2c47257ebaee7407c38513efd2b35cafdf972d9beb2ea4593c1e0f3bf8f2744836928d7454
+  languageName: node
+  linkType: hard
+
+"function.prototype.name@npm:^1.1.6, function.prototype.name@npm:^1.1.8":
+  version: 1.2.0
+  resolution: "function.prototype.name@npm:1.2.0"
+  dependencies:
+    call-bind: "npm:^1.0.9"
+    call-bound: "npm:^1.0.4"
+    es-define-property: "npm:^1.0.1"
+    es-errors: "npm:^1.3.0"
+    functions-have-names: "npm:^1.2.3"
+    has-property-descriptors: "npm:^1.0.2"
+    hasown: "npm:^2.0.4"
+    is-callable: "npm:^1.2.7"
+    is-document.all: "npm:^1.0.0"
+  checksum: 10/ad662230bc2b9e971625222b462142b34aa23c70ca58fb4fa72e226bb9106a5752be5c7d8986de7ce5cfb959e5317200d70d88d96359605a165ed1c8cb515223
+  languageName: node
+  linkType: hard
+
+"functions-have-names@npm:^1.2.3":
+  version: 1.2.3
+  resolution: "functions-have-names@npm:1.2.3"
+  checksum: 10/0ddfd3ed1066a55984aaecebf5419fbd9344a5c38dd120ffb0739fac4496758dcf371297440528b115e4367fc46e3abc86a2cc0ff44612181b175ae967a11a05
+  languageName: node
+  linkType: hard
+
+"generator-function@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "generator-function@npm:2.0.1"
+  checksum: 10/eb7e7eb896c5433f3d40982b2ccacdb3dd990dd3499f14040e002b5d54572476513be8a2e6f9609f6e41ab29f2c4469307611ddbfc37ff4e46b765c326663805
+  languageName: node
+  linkType: hard
+
+"gensync@npm:^1.0.0-beta.2":
+  version: 1.0.0-beta.2
+  resolution: "gensync@npm:1.0.0-beta.2"
+  checksum: 10/17d8333460204fbf1f9160d067e1e77f908a5447febb49424b8ab043026049835c9ef3974445c57dbd39161f4d2b04356d7de12b2eecaa27a7a7ea7d871cbedd
+  languageName: node
+  linkType: hard
+
+"get-caller-file@npm:^2.0.5":
+  version: 2.0.5
+  resolution: "get-caller-file@npm:2.0.5"
+  checksum: 10/b9769a836d2a98c3ee734a88ba712e62703f1df31b94b784762c433c27a386dd6029ff55c2a920c392e33657d80191edbf18c61487e198844844516f843496b9
+  languageName: node
+  linkType: hard
+
+"get-intrinsic@npm:^1.2.4, get-intrinsic@npm:^1.2.5, get-intrinsic@npm:^1.2.6, get-intrinsic@npm:^1.2.7, get-intrinsic@npm:^1.3.0":
+  version: 1.3.1
+  resolution: "get-intrinsic@npm:1.3.1"
+  dependencies:
+    async-function: "npm:^1.0.0"
+    async-generator-function: "npm:^1.0.0"
+    call-bind-apply-helpers: "npm:^1.0.2"
+    es-define-property: "npm:^1.0.1"
+    es-errors: "npm:^1.3.0"
+    es-object-atoms: "npm:^1.1.1"
+    function-bind: "npm:^1.1.2"
+    generator-function: "npm:^2.0.0"
+    get-proto: "npm:^1.0.1"
+    gopd: "npm:^1.2.0"
+    has-symbols: "npm:^1.1.0"
+    hasown: "npm:^2.0.2"
+    math-intrinsics: "npm:^1.1.0"
+  checksum: 10/bb579dda84caa4a3a41611bdd483dade7f00f246f2a7992eb143c5861155290df3fdb48a8406efa3dfb0b434e2c8fafa4eebd469e409d0439247f85fc3fa2cc1
+  languageName: node
+  linkType: hard
+
+"get-proto@npm:^1.0.0, get-proto@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "get-proto@npm:1.0.1"
+  dependencies:
+    dunder-proto: "npm:^1.0.1"
+    es-object-atoms: "npm:^1.0.0"
+  checksum: 10/4fc96afdb58ced9a67558698b91433e6b037aaa6f1493af77498d7c85b141382cf223c0e5946f334fb328ee85dfe6edd06d218eaf09556f4bc4ec6005d7f5f7b
+  languageName: node
+  linkType: hard
+
+"get-symbol-description@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "get-symbol-description@npm:1.1.0"
+  dependencies:
+    call-bound: "npm:^1.0.3"
+    es-errors: "npm:^1.3.0"
+    get-intrinsic: "npm:^1.2.6"
+  checksum: 10/a353e3a9595a74720b40fb5bae3ba4a4f826e186e83814d93375182384265676f59e49998b9cdfac4a2225ce95a3d32a68f502a2c5619303987f1c183ab80494
+  languageName: node
+  linkType: hard
+
+"gifuct-js@npm:^2.1.2":
+  version: 2.1.2
+  resolution: "gifuct-js@npm:2.1.2"
+  dependencies:
+    js-binary-schema-parser: "npm:^2.0.3"
+  checksum: 10/e08b3acaf04a426f7104bc14bbc0831e0d86cf0822d8f4ad095c31d63b15cba2dd379eb975baf7cb7871db4354c216b8912ae81087b6918c972560c881ae35a8
+  languageName: node
+  linkType: hard
+
+"glob-parent@npm:^5.1.2":
+  version: 5.1.2
+  resolution: "glob-parent@npm:5.1.2"
+  dependencies:
+    is-glob: "npm:^4.0.1"
+  checksum: 10/32cd106ce8c0d83731966d31517adb766d02c3812de49c30cfe0675c7c0ae6630c11214c54a5ae67aca882cf738d27fd7768f21aa19118b9245950554be07247
+  languageName: node
+  linkType: hard
+
+"glob-parent@npm:^6.0.2":
+  version: 6.0.2
+  resolution: "glob-parent@npm:6.0.2"
+  dependencies:
+    is-glob: "npm:^4.0.3"
+  checksum: 10/c13ee97978bef4f55106b71e66428eb1512e71a7466ba49025fc2aec59a5bfb0954d5abd58fc5ee6c9b076eef4e1f6d3375c2e964b88466ca390da4419a786a8
+  languageName: node
+  linkType: hard
+
+"glob@npm:^10.4.5":
+  version: 10.5.0
+  resolution: "glob@npm:10.5.0"
+  dependencies:
+    foreground-child: "npm:^3.1.0"
+    jackspeak: "npm:^3.1.2"
+    minimatch: "npm:^9.0.4"
+    minipass: "npm:^7.1.2"
+    package-json-from-dist: "npm:^1.0.0"
+    path-scurry: "npm:^1.11.1"
+  bin:
+    glob: dist/esm/bin.mjs
+  checksum: 10/ab3bccfefcc0afaedbd1f480cd0c4a2c0e322eb3f0aa7ceaa31b3f00b825069f17cf0f1fc8b6f256795074b903f37c0ade37ddda6a176aa57f1c2bbfe7240653
+  languageName: node
+  linkType: hard
+
+"glob@npm:^13.0.1, glob@npm:^13.0.6":
+  version: 13.0.6
+  resolution: "glob@npm:13.0.6"
+  dependencies:
+    minimatch: "npm:^10.2.2"
+    minipass: "npm:^7.1.3"
+    path-scurry: "npm:^2.0.2"
+  checksum: 10/201ad69e5f0aa74e1d8c00a481581f8b8c804b6a4fbfabeeb8541f5d756932800331daeba99b58fb9e4cd67e12ba5a7eba5b82fb476691588418060b84353214
+  languageName: node
+  linkType: hard
+
+"globals@npm:^14.0.0":
+  version: 14.0.0
+  resolution: "globals@npm:14.0.0"
+  checksum: 10/03939c8af95c6df5014b137cac83aa909090c3a3985caef06ee9a5a669790877af8698ab38007e4c0186873adc14c0b13764acc754b16a754c216cc56aa5f021
+  languageName: node
+  linkType: hard
+
+"globals@npm:^17.11.0":
+  version: 17.11.0
+  resolution: "globals@npm:17.11.0"
+  checksum: 10/9cff5b8099b585862ab0d31e8b93dc1c3e7b59239dc58b59447a38709715751df8794ee0d28f434f8e421b01aee3cc10051e2455b5c967d960e79f882e68aa0f
+  languageName: node
+  linkType: hard
+
+"globalthis@npm:^1.0.4":
+  version: 1.0.4
+  resolution: "globalthis@npm:1.0.4"
+  dependencies:
+    define-properties: "npm:^1.2.1"
+    gopd: "npm:^1.0.1"
+  checksum: 10/1f1fd078fb2f7296306ef9dd51019491044ccf17a59ed49d375b576ca108ff37e47f3d29aead7add40763574a992f16a5367dd1e2173b8634ef18556ab719ac4
+  languageName: node
+  linkType: hard
+
+"globrex@npm:^0.1.2":
+  version: 0.1.2
+  resolution: "globrex@npm:0.1.2"
+  checksum: 10/81ce62ee6f800d823d6b7da7687f841676d60ee8f51f934ddd862e4057316d26665c4edc0358d4340a923ac00a514f8b67c787e28fe693aae16350f4e60d55e9
+  languageName: node
+  linkType: hard
+
+"gopd@npm:^1.0.1, gopd@npm:^1.2.0":
+  version: 1.2.0
+  resolution: "gopd@npm:1.2.0"
+  checksum: 10/94e296d69f92dc1c0768fcfeecfb3855582ab59a7c75e969d5f96ce50c3d201fd86d5a2857c22565764d5bb8a816c7b1e58f133ec318cd56274da36c5e3fb1a1
+  languageName: node
+  linkType: hard
+
+"graceful-fs@npm:^4.2.4, graceful-fs@npm:^4.2.6":
+  version: 4.2.11
+  resolution: "graceful-fs@npm:4.2.11"
+  checksum: 10/bf152d0ed1dc159239db1ba1f74fdbc40cb02f626770dcd5815c427ce0688c2635a06ed69af364396da4636d0408fcf7d4afdf7881724c3307e46aff30ca49e2
+  languageName: node
+  linkType: hard
+
+"has-bigints@npm:^1.0.2":
+  version: 1.1.0
+  resolution: "has-bigints@npm:1.1.0"
+  checksum: 10/90fb1b24d40d2472bcd1c8bd9dd479037ec240215869bdbff97b2be83acef57d28f7e96bdd003a21bed218d058b49097f4acc8821c05b1629cc5d48dd7bfcccd
+  languageName: node
+  linkType: hard
+
+"has-flag@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "has-flag@npm:4.0.0"
+  checksum: 10/261a1357037ead75e338156b1f9452c016a37dcd3283a972a30d9e4a87441ba372c8b81f818cd0fbcd9c0354b4ae7e18b9e1afa1971164aef6d18c2b6095a8ad
+  languageName: node
+  linkType: hard
+
+"has-property-descriptors@npm:^1.0.0, has-property-descriptors@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "has-property-descriptors@npm:1.0.2"
+  dependencies:
+    es-define-property: "npm:^1.0.0"
+  checksum: 10/2d8c9ab8cebb572e3362f7d06139a4592105983d4317e68f7adba320fe6ddfc8874581e0971e899e633fd5f72e262830edce36d5a0bc863dad17ad20572484b2
+  languageName: node
+  linkType: hard
+
+"has-proto@npm:^1.2.0":
+  version: 1.2.0
+  resolution: "has-proto@npm:1.2.0"
+  dependencies:
+    dunder-proto: "npm:^1.0.0"
+  checksum: 10/7eaed07728eaa28b77fadccabce53f30de467ff186a766872669a833ac2e87d8922b76a22cc58339d7e0277aefe98d6d00762113b27a97cdf65adcf958970935
+  languageName: node
+  linkType: hard
+
+"has-symbols@npm:^1.0.3, has-symbols@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "has-symbols@npm:1.1.0"
+  checksum: 10/959385c98696ebbca51e7534e0dc723ada325efa3475350951363cce216d27373e0259b63edb599f72eb94d6cde8577b4b2375f080b303947e560f85692834fa
+  languageName: node
+  linkType: hard
+
+"has-tostringtag@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "has-tostringtag@npm:1.0.2"
+  dependencies:
+    has-symbols: "npm:^1.0.3"
+  checksum: 10/c74c5f5ceee3c8a5b8bc37719840dc3749f5b0306d818974141dda2471a1a2ca6c8e46b9d6ac222c5345df7a901c9b6f350b1e6d62763fec877e26609a401bfe
+  languageName: node
+  linkType: hard
+
+"hasown@npm:^2.0.2, hasown@npm:^2.0.3, hasown@npm:^2.0.4":
+  version: 2.0.4
+  resolution: "hasown@npm:2.0.4"
+  dependencies:
+    function-bind: "npm:^1.1.2"
+  checksum: 10/13823863ae48161068b4c51606a3128451c66f14545a5169d667fe9fca168dcd38c27570c7a299e32ef844b8da3d55def7fe88602f8970d4311fb543ee88001a
+  languageName: node
+  linkType: hard
+
+"he@npm:^1.2.0":
+  version: 1.2.0
+  resolution: "he@npm:1.2.0"
+  bin:
+    he: bin/he
+  checksum: 10/d09b2243da4e23f53336e8de3093e5c43d2c39f8d0d18817abfa32ce3e9355391b2edb4bb5edc376aea5d4b0b59d6a0482aab4c52bc02ef95751e4b818e847f1
+  languageName: node
+  linkType: hard
+
+"html-encoding-sniffer@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "html-encoding-sniffer@npm:6.0.0"
+  dependencies:
+    "@exodus/bytes": "npm:^1.6.0"
+  checksum: 10/97392e45d8aff57f180f62a1b12e62201c8451af68424b8bc3196f78e273891f2df285e5be43a3f28c7ba4badf9524ef305db65c4e4935a9e796afc86d9654b8
+  languageName: node
+  linkType: hard
+
+"html-escaper@npm:^2.0.0":
+  version: 2.0.2
+  resolution: "html-escaper@npm:2.0.2"
+  checksum: 10/034d74029dcca544a34fb6135e98d427acd73019796ffc17383eaa3ec2fe1c0471dcbbc8f8ed39e46e86d43ccd753a160631615e4048285e313569609b66d5b7
+  languageName: node
+  linkType: hard
+
+"ignore@npm:^5.2.0":
+  version: 5.3.2
+  resolution: "ignore@npm:5.3.2"
+  checksum: 10/cceb6a457000f8f6a50e1196429750d782afce5680dd878aa4221bd79972d68b3a55b4b1458fc682be978f4d3c6a249046aa0880637367216444ab7b014cfc98
+  languageName: node
+  linkType: hard
+
+"ignore@npm:^7.0.5":
+  version: 7.0.6
+  resolution: "ignore@npm:7.0.6"
+  checksum: 10/8fdf3739b032de26f0a022471ec198be4529c605b7c2a551e6ece52d1be5eb22b920bff17d044d710512103f62bbf64ac4a53186b2323729e6e352b91df9c6ae
+  languageName: node
+  linkType: hard
+
+"import-fresh@npm:^3.2.1":
+  version: 3.3.1
+  resolution: "import-fresh@npm:3.3.1"
+  dependencies:
+    parent-module: "npm:^1.0.0"
+    resolve-from: "npm:^4.0.0"
+  checksum: 10/a06b19461b4879cc654d46f8a6244eb55eb053437afd4cbb6613cad6be203811849ed3e4ea038783092879487299fda24af932b86bdfff67c9055ba3612b8c87
+  languageName: node
+  linkType: hard
+
+"imurmurhash@npm:^0.1.4":
+  version: 0.1.4
+  resolution: "imurmurhash@npm:0.1.4"
+  checksum: 10/2d30b157a91fe1c1d7c6f653cbf263f039be6c5bfa959245a16d4ee191fc0f2af86c08545b6e6beeb041c56b574d2d5b9f95343d378ab49c0f37394d541e7fc8
+  languageName: node
+  linkType: hard
+
+"indent-string@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "indent-string@npm:4.0.0"
+  checksum: 10/cd3f5cbc9ca2d624c6a1f53f12e6b341659aba0e2d3254ae2b4464aaea8b4294cdb09616abbc59458f980531f2429784ed6a420d48d245bcad0811980c9efae9
+  languageName: node
+  linkType: hard
+
+"internal-slot@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "internal-slot@npm:1.1.0"
+  dependencies:
+    es-errors: "npm:^1.3.0"
+    hasown: "npm:^2.0.2"
+    side-channel: "npm:^1.1.0"
+  checksum: 10/1d5219273a3dab61b165eddf358815eefc463207db33c20fcfca54717da02e3f492003757721f972fd0bf21e4b426cab389c5427b99ceea4b8b670dc88ee6d4a
+  languageName: node
+  linkType: hard
+
+"is-array-buffer@npm:^3.0.4, is-array-buffer@npm:^3.0.5":
+  version: 3.0.5
+  resolution: "is-array-buffer@npm:3.0.5"
+  dependencies:
+    call-bind: "npm:^1.0.8"
+    call-bound: "npm:^1.0.3"
+    get-intrinsic: "npm:^1.2.6"
+  checksum: 10/ef1095c55b963cd0dcf6f88a113e44a0aeca91e30d767c475e7d746d28d1195b10c5076b94491a7a0cd85020ca6a4923070021d74651d093dc909e9932cf689b
+  languageName: node
+  linkType: hard
+
+"is-async-function@npm:^2.0.0":
+  version: 2.1.1
+  resolution: "is-async-function@npm:2.1.1"
+  dependencies:
+    async-function: "npm:^1.0.0"
+    call-bound: "npm:^1.0.3"
+    get-proto: "npm:^1.0.1"
+    has-tostringtag: "npm:^1.0.2"
+    safe-regex-test: "npm:^1.1.0"
+  checksum: 10/7c2ac7efdf671e03265e74a043bcb1c0a32e226bc2a42dfc5ec8644667df668bbe14b91c08e6c1414f392f8cf86cd1d489b3af97756e2c7a49dd1ba63fd40ca6
+  languageName: node
+  linkType: hard
+
+"is-bigint@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "is-bigint@npm:1.1.0"
+  dependencies:
+    has-bigints: "npm:^1.0.2"
+  checksum: 10/10cf327310d712fe227cfaa32d8b11814c214392b6ac18c827f157e1e85363cf9c8e2a22df526689bd5d25e53b58cc110894787afb54e138e7c504174dba15fd
+  languageName: node
+  linkType: hard
+
+"is-boolean-object@npm:^1.2.1":
+  version: 1.2.2
+  resolution: "is-boolean-object@npm:1.2.2"
+  dependencies:
+    call-bound: "npm:^1.0.3"
+    has-tostringtag: "npm:^1.0.2"
+  checksum: 10/051fa95fdb99d7fbf653165a7e6b2cba5d2eb62f7ffa81e793a790f3fb5366c91c1b7b6af6820aa2937dd86c73aa3ca9d9ca98f500988457b1c59692c52ba911
+  languageName: node
+  linkType: hard
+
+"is-callable@npm:^1.2.7":
+  version: 1.2.7
+  resolution: "is-callable@npm:1.2.7"
+  checksum: 10/48a9297fb92c99e9df48706241a189da362bff3003354aea4048bd5f7b2eb0d823cd16d0a383cece3d76166ba16d85d9659165ac6fcce1ac12e6c649d66dbdb9
+  languageName: node
+  linkType: hard
+
+"is-core-module@npm:^2.16.1, is-core-module@npm:^2.16.2":
+  version: 2.16.2
+  resolution: "is-core-module@npm:2.16.2"
+  dependencies:
+    hasown: "npm:^2.0.3"
+  checksum: 10/6ee7535d82bbe457685799c5f145daf4b7c6be3afbd8e90788429d557f663d6dee72a8e4b9a45d0d756c243fcb5028095999243df090e5f04c02b153786bc8c6
+  languageName: node
+  linkType: hard
+
+"is-data-view@npm:^1.0.1, is-data-view@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "is-data-view@npm:1.0.2"
+  dependencies:
+    call-bound: "npm:^1.0.2"
+    get-intrinsic: "npm:^1.2.6"
+    is-typed-array: "npm:^1.1.13"
+  checksum: 10/357e9a48fa38f369fd6c4c3b632a3ab2b8adca14997db2e4b3fe94c4cd0a709af48e0fb61b02c64a90c0dd542fd489d49c2d03157b05ae6c07f5e4dec9e730a8
+  languageName: node
+  linkType: hard
+
+"is-date-object@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "is-date-object@npm:1.1.0"
+  dependencies:
+    call-bound: "npm:^1.0.2"
+    has-tostringtag: "npm:^1.0.2"
+  checksum: 10/3a811b2c3176fb31abee1d23d3dc78b6c65fd9c07d591fcb67553cab9e7f272728c3dd077d2d738b53f9a2103255b0a6e8dfc9568a7805c56a78b2563e8d1dec
+  languageName: node
+  linkType: hard
+
+"is-docker@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "is-docker@npm:3.0.0"
+  bin:
+    is-docker: cli.js
+  checksum: 10/b698118f04feb7eaf3338922bd79cba064ea54a1c3db6ec8c0c8d8ee7613e7e5854d802d3ef646812a8a3ace81182a085dfa0a71cc68b06f3fa794b9783b3c90
+  languageName: node
+  linkType: hard
+
+"is-document.all@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "is-document.all@npm:1.0.0"
+  dependencies:
+    call-bound: "npm:^1.0.4"
+  checksum: 10/c76fa391105f180e9d34bf219ab1db325b4f883d2d82c789dbf9a628e4213c97411f038f36b7d096d85f5ddc1fda6e22e9d8d7c65b89ad1ee5d4d1e5a2a4c077
+  languageName: node
+  linkType: hard
+
+"is-extglob@npm:^2.1.1":
+  version: 2.1.1
+  resolution: "is-extglob@npm:2.1.1"
+  checksum: 10/df033653d06d0eb567461e58a7a8c9f940bd8c22274b94bf7671ab36df5719791aae15eef6d83bbb5e23283967f2f984b8914559d4449efda578c775c4be6f85
+  languageName: node
+  linkType: hard
+
+"is-finalizationregistry@npm:^1.1.0":
+  version: 1.1.1
+  resolution: "is-finalizationregistry@npm:1.1.1"
+  dependencies:
+    call-bound: "npm:^1.0.3"
+  checksum: 10/0bfb145e9a1ba852ddde423b0926d2169ae5fe9e37882cde9e8f69031281a986308df4d982283e152396e88b86562ed2256cbaa5e6390fb840a4c25ab54b8a80
+  languageName: node
+  linkType: hard
+
+"is-fullwidth-code-point@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "is-fullwidth-code-point@npm:3.0.0"
+  checksum: 10/44a30c29457c7fb8f00297bce733f0a64cd22eca270f83e58c105e0d015e45c019491a4ab2faef91ab51d4738c670daff901c799f6a700e27f7314029e99e348
+  languageName: node
+  linkType: hard
+
+"is-generator-function@npm:^1.0.10":
+  version: 1.1.2
+  resolution: "is-generator-function@npm:1.1.2"
+  dependencies:
+    call-bound: "npm:^1.0.4"
+    generator-function: "npm:^2.0.0"
+    get-proto: "npm:^1.0.1"
+    has-tostringtag: "npm:^1.0.2"
+    safe-regex-test: "npm:^1.1.0"
+  checksum: 10/cc50fa01034356bdfda26983c5457103240f201f4663c0de1257802714e40d36bcff7aee21091d37bbba4be962fa5c6475ce7ddbc0abfa86d6bef466e41e50a5
+  languageName: node
+  linkType: hard
+
+"is-glob@npm:^4.0.0, is-glob@npm:^4.0.1, is-glob@npm:^4.0.3":
+  version: 4.0.3
+  resolution: "is-glob@npm:4.0.3"
+  dependencies:
+    is-extglob: "npm:^2.1.1"
+  checksum: 10/3ed74f2b0cdf4f401f38edb0442ddfde3092d79d7d35c9919c86641efdbcbb32e45aa3c0f70ce5eecc946896cd5a0f26e4188b9f2b881876f7cb6c505b82da11
+  languageName: node
+  linkType: hard
+
+"is-inside-container@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "is-inside-container@npm:1.0.0"
+  dependencies:
+    is-docker: "npm:^3.0.0"
+  bin:
+    is-inside-container: cli.js
+  checksum: 10/c50b75a2ab66ab3e8b92b3bc534e1ea72ca25766832c0623ac22d134116a98bcf012197d1caabe1d1c4bd5f84363d4aa5c36bb4b585fbcaf57be172cd10a1a03
+  languageName: node
+  linkType: hard
+
+"is-map@npm:^2.0.3":
+  version: 2.0.3
+  resolution: "is-map@npm:2.0.3"
+  checksum: 10/8de7b41715b08bcb0e5edb0fb9384b80d2d5bcd10e142188f33247d19ff078abaf8e9b6f858e2302d8d05376a26a55cd23a3c9f8ab93292b02fcd2cc9e4e92bb
+  languageName: node
+  linkType: hard
+
+"is-module@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "is-module@npm:1.0.0"
+  checksum: 10/8cd5390730c7976fb4e8546dd0b38865ee6f7bacfa08dfbb2cc07219606755f0b01709d9361e01f13009bbbd8099fa2927a8ed665118a6105d66e40f1b838c3f
+  languageName: node
+  linkType: hard
+
+"is-negative-zero@npm:^2.0.3":
+  version: 2.0.3
+  resolution: "is-negative-zero@npm:2.0.3"
+  checksum: 10/8fe5cffd8d4fb2ec7b49d657e1691889778d037494c6f40f4d1a524cadd658b4b53ad7b6b73a59bcb4b143ae9a3d15829af864b2c0f9d65ac1e678c4c80f17e5
+  languageName: node
+  linkType: hard
+
+"is-number-object@npm:^1.1.1":
+  version: 1.1.1
+  resolution: "is-number-object@npm:1.1.1"
+  dependencies:
+    call-bound: "npm:^1.0.3"
+    has-tostringtag: "npm:^1.0.2"
+  checksum: 10/a5922fb8779ab1ea3b8a9c144522b3d0bea5d9f8f23f7a72470e61e1e4df47714e28e0154ac011998b709cce260c3c9447ad3cd24a96c2f2a0abfdb2cbdc76c8
+  languageName: node
+  linkType: hard
+
+"is-number@npm:^7.0.0":
+  version: 7.0.0
+  resolution: "is-number@npm:7.0.0"
+  checksum: 10/6a6c3383f68afa1e05b286af866017c78f1226d43ac8cb064e115ff9ed85eb33f5c4f7216c96a71e4dfea289ef52c5da3aef5bbfade8ffe47a0465d70c0c8e86
+  languageName: node
+  linkType: hard
+
+"is-path-inside@npm:^3.0.3":
+  version: 3.0.3
+  resolution: "is-path-inside@npm:3.0.3"
+  checksum: 10/abd50f06186a052b349c15e55b182326f1936c89a78bf6c8f2b707412517c097ce04bc49a0ca221787bc44e1049f51f09a2ffb63d22899051988d3a618ba13e9
+  languageName: node
+  linkType: hard
+
+"is-plain-obj@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "is-plain-obj@npm:2.1.0"
+  checksum: 10/cec9100678b0a9fe0248a81743041ed990c2d4c99f893d935545cfbc42876cbe86d207f3b895700c690ad2fa520e568c44afc1605044b535a7820c1d40e38daa
+  languageName: node
+  linkType: hard
+
+"is-plain-object@npm:^2.0.4":
+  version: 2.0.4
+  resolution: "is-plain-object@npm:2.0.4"
+  dependencies:
+    isobject: "npm:^3.0.1"
+  checksum: 10/2a401140cfd86cabe25214956ae2cfee6fbd8186809555cd0e84574f88de7b17abacb2e477a6a658fa54c6083ecbda1e6ae404c7720244cd198903848fca70ca
+  languageName: node
+  linkType: hard
+
+"is-potential-custom-element-name@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "is-potential-custom-element-name@npm:1.0.1"
+  checksum: 10/ced7bbbb6433a5b684af581872afe0e1767e2d1146b2207ca0068a648fb5cab9d898495d1ac0583524faaf24ca98176a7d9876363097c2d14fee6dd324f3a1ab
+  languageName: node
+  linkType: hard
+
+"is-primitive@npm:^3.0.1":
+  version: 3.0.1
+  resolution: "is-primitive@npm:3.0.1"
+  checksum: 10/c4da6a6e6d487f31d85b9259b67695fffcc75dca6c9612b0a002e3050c734227b9911be09b877539ec6309710229c19f4edd0f9e26ed2a67924ee0916baf0bed
+  languageName: node
+  linkType: hard
+
+"is-regex@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "is-regex@npm:1.2.1"
+  dependencies:
+    call-bound: "npm:^1.0.2"
+    gopd: "npm:^1.2.0"
+    has-tostringtag: "npm:^1.0.2"
+    hasown: "npm:^2.0.2"
+  checksum: 10/c42b7efc5868a5c9a4d8e6d3e9816e8815c611b09535c00fead18a1138455c5cb5e1887f0023a467ad3f9c419d62ba4dc3d9ba8bafe55053914d6d6454a945d2
+  languageName: node
+  linkType: hard
+
+"is-set@npm:^2.0.3":
+  version: 2.0.3
+  resolution: "is-set@npm:2.0.3"
+  checksum: 10/5685df33f0a4a6098a98c72d94d67cad81b2bc72f1fb2091f3d9283c4a1c582123cd709145b02a9745f0ce6b41e3e43f1c944496d1d74d4ea43358be61308669
+  languageName: node
+  linkType: hard
+
+"is-shared-array-buffer@npm:^1.0.4":
+  version: 1.0.4
+  resolution: "is-shared-array-buffer@npm:1.0.4"
+  dependencies:
+    call-bound: "npm:^1.0.3"
+  checksum: 10/0380d7c60cc692856871526ffcd38a8133818a2ee42d47bb8008248a0cd2121d8c8b5f66b6da3cac24bc5784553cacb6faaf678f66bc88c6615b42af2825230e
+  languageName: node
+  linkType: hard
+
+"is-string@npm:^1.1.1":
+  version: 1.1.1
+  resolution: "is-string@npm:1.1.1"
+  dependencies:
+    call-bound: "npm:^1.0.3"
+    has-tostringtag: "npm:^1.0.2"
+  checksum: 10/5277cb9e225a7cc8a368a72623b44a99f2cfa139659c6b203553540681ad4276bfc078420767aad0e73eef5f0bd07d4abf39a35d37ec216917879d11cebc1f8b
+  languageName: node
+  linkType: hard
+
+"is-symbol@npm:^1.1.1":
+  version: 1.1.1
+  resolution: "is-symbol@npm:1.1.1"
+  dependencies:
+    call-bound: "npm:^1.0.2"
+    has-symbols: "npm:^1.1.0"
+    safe-regex-test: "npm:^1.1.0"
+  checksum: 10/db495c0d8cd0a7a66b4f4ef7fccee3ab5bd954cb63396e8ac4d32efe0e9b12fdfceb851d6c501216a71f4f21e5ff20fc2ee845a3d52d455e021c466ac5eb2db2
+  languageName: node
+  linkType: hard
+
+"is-typed-array@npm:^1.1.13, is-typed-array@npm:^1.1.14, is-typed-array@npm:^1.1.15":
+  version: 1.1.15
+  resolution: "is-typed-array@npm:1.1.15"
+  dependencies:
+    which-typed-array: "npm:^1.1.16"
+  checksum: 10/e8cf60b9ea85667097a6ad68c209c9722cfe8c8edf04d6218366469e51944c5cc25bae45ffb845c23f811d262e4314d3b0168748eb16711aa34d12724cdf0735
+  languageName: node
+  linkType: hard
+
+"is-unicode-supported@npm:^0.1.0":
+  version: 0.1.0
+  resolution: "is-unicode-supported@npm:0.1.0"
+  checksum: 10/a2aab86ee7712f5c2f999180daaba5f361bdad1efadc9610ff5b8ab5495b86e4f627839d085c6530363c6d6d4ecbde340fb8e54bdb83da4ba8e0865ed5513c52
+  languageName: node
+  linkType: hard
+
+"is-weakmap@npm:^2.0.2":
+  version: 2.0.2
+  resolution: "is-weakmap@npm:2.0.2"
+  checksum: 10/a7b7e23206c542dcf2fa0abc483142731788771527e90e7e24f658c0833a0d91948a4f7b30d78f7a65255a48512e41a0288b778ba7fc396137515c12e201fd11
+  languageName: node
+  linkType: hard
+
+"is-weakref@npm:^1.0.2, is-weakref@npm:^1.1.1":
+  version: 1.1.1
+  resolution: "is-weakref@npm:1.1.1"
+  dependencies:
+    call-bound: "npm:^1.0.3"
+  checksum: 10/543506fd8259038b371bb083aac25b16cb4fd8b12fc58053aa3d45ac28dfd001cd5c6dffbba7aeea4213c74732d46b6cb2cfb5b412eed11f2db524f3f97d09a0
+  languageName: node
+  linkType: hard
+
+"is-weakset@npm:^2.0.3":
+  version: 2.0.4
+  resolution: "is-weakset@npm:2.0.4"
+  dependencies:
+    call-bound: "npm:^1.0.3"
+    get-intrinsic: "npm:^1.2.6"
+  checksum: 10/1d5e1d0179beeed3661125a6faa2e59bfb48afda06fc70db807f178aa0ebebc3758fb6358d76b3d528090d5ef85148c345dcfbf90839592fe293e3e5e82f2134
+  languageName: node
+  linkType: hard
+
+"is-wsl@npm:^3.1.0":
+  version: 3.1.1
+  resolution: "is-wsl@npm:3.1.1"
+  dependencies:
+    is-inside-container: "npm:^1.0.0"
+  checksum: 10/513d95b89af0e60b43d7b17ecb7eb78edea0a439136a3da37b1b56e215379cc46a9221474ad5b2de044824ca72d7869dee6e015273dc3f71f2bb87c715f9f1dc
+  languageName: node
+  linkType: hard
+
+"isarray@npm:^2.0.5":
+  version: 2.0.5
+  resolution: "isarray@npm:2.0.5"
+  checksum: 10/1d8bc7911e13bb9f105b1b3e0b396c787a9e63046af0b8fe0ab1414488ab06b2b099b87a2d8a9e31d21c9a6fad773c7fc8b257c4880f2d957274479d28ca3414
+  languageName: node
+  linkType: hard
+
+"isexe@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "isexe@npm:2.0.0"
+  checksum: 10/7c9f715c03aff08f35e98b1fadae1b9267b38f0615d501824f9743f3aab99ef10e303ce7db3f186763a0b70a19de5791ebfc854ff884d5a8c4d92211f642ec92
+  languageName: node
+  linkType: hard
+
+"isexe@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "isexe@npm:4.0.0"
+  checksum: 10/2ead327ef596042ef9c9ec5f236b316acfaedb87f4bb61b3c3d574fb2e9c8a04b67305e04733bde52c24d9622fdebd3270aadb632adfbf9cadef88fe30f479e5
+  languageName: node
+  linkType: hard
+
+"ismobilejs@npm:^1.1.1":
+  version: 1.1.1
+  resolution: "ismobilejs@npm:1.1.1"
+  checksum: 10/02db92559e85544fa5353894aede9a778c0a29d2e22db39db29eb9e4665f95fba90ee53b7105a31c2a8e8eabc63824303f6e3edbe73508ebdab6870a2b83904c
+  languageName: node
+  linkType: hard
+
+"isobject@npm:^3.0.1":
+  version: 3.0.1
+  resolution: "isobject@npm:3.0.1"
+  checksum: 10/db85c4c970ce30693676487cca0e61da2ca34e8d4967c2e1309143ff910c207133a969f9e4ddb2dc6aba670aabce4e0e307146c310350b298e74a31f7d464703
+  languageName: node
+  linkType: hard
+
+"istanbul-lib-coverage@npm:^3.0.0, istanbul-lib-coverage@npm:^3.2.2":
+  version: 3.2.2
+  resolution: "istanbul-lib-coverage@npm:3.2.2"
+  checksum: 10/40bbdd1e937dfd8c830fa286d0f665e81b7a78bdabcd4565f6d5667c99828bda3db7fb7ac6b96a3e2e8a2461ddbc5452d9f8bc7d00cb00075fa6a3e99f5b6a81
+  languageName: node
+  linkType: hard
+
+"istanbul-lib-report@npm:^3.0.0, istanbul-lib-report@npm:^3.0.1":
+  version: 3.0.1
+  resolution: "istanbul-lib-report@npm:3.0.1"
+  dependencies:
+    istanbul-lib-coverage: "npm:^3.0.0"
+    make-dir: "npm:^4.0.0"
+    supports-color: "npm:^7.1.0"
+  checksum: 10/86a83421ca1cf2109a9f6d193c06c31ef04a45e72a74579b11060b1e7bb9b6337a4e6f04abfb8857e2d569c271273c65e855ee429376a0d7c91ad91db42accd1
+  languageName: node
+  linkType: hard
+
+"istanbul-reports@npm:^3.2.0":
+  version: 3.2.0
+  resolution: "istanbul-reports@npm:3.2.0"
+  dependencies:
+    html-escaper: "npm:^2.0.0"
+    istanbul-lib-report: "npm:^3.0.0"
+  checksum: 10/6773a1d5c7d47eeec75b317144fe2a3b1da84a44b6282bebdc856e09667865e58c9b025b75b3d87f5bc62939126cbba4c871ee84254537d934ba5da5d4c4ec4e
+  languageName: node
+  linkType: hard
+
+"iterate-object@npm:^1.3.4":
+  version: 1.3.5
+  resolution: "iterate-object@npm:1.3.5"
+  checksum: 10/62d62ab0d55a66b4de2bff3b01148d3744bcd2e8ddaccebe715601e6cfdf478423fab739ae252097c9085da40f4b33aedb4a3c78df1f1fdecd073597b6976f8b
+  languageName: node
+  linkType: hard
+
+"iterator.prototype@npm:^1.1.5":
+  version: 1.1.5
+  resolution: "iterator.prototype@npm:1.1.5"
+  dependencies:
+    define-data-property: "npm:^1.1.4"
+    es-object-atoms: "npm:^1.0.0"
+    get-intrinsic: "npm:^1.2.6"
+    get-proto: "npm:^1.0.0"
+    has-symbols: "npm:^1.1.0"
+    set-function-name: "npm:^2.0.2"
+  checksum: 10/352bcf333f42189e65cc8cb2dcb94a5c47cf0a9110ce12aba788d405a980b5f5f3a06c79bf915377e1d480647169babd842ded0d898bed181bf6686e8e6823f6
+  languageName: node
+  linkType: hard
+
+"jackspeak@npm:^3.1.2":
+  version: 3.4.3
+  resolution: "jackspeak@npm:3.4.3"
+  dependencies:
+    "@isaacs/cliui": "npm:^8.0.2"
+    "@pkgjs/parseargs": "npm:^0.11.0"
+  dependenciesMeta:
+    "@pkgjs/parseargs":
+      optional: true
+  checksum: 10/96f8786eaab98e4bf5b2a5d6d9588ea46c4d06bbc4f2eb861fdd7b6b182b16f71d8a70e79820f335d52653b16d4843b29dd9cdcf38ae80406756db9199497cf3
+  languageName: node
+  linkType: hard
+
+"jiti@npm:^2.7.0":
+  version: 2.7.0
+  resolution: "jiti@npm:2.7.0"
+  bin:
+    jiti: lib/jiti-cli.mjs
+  checksum: 10/6d75a8dbd61dbee031aa0937fabb748ff8ddf370b971958cc704f5cf26b4c5bdc9dcd0563059b2627a2bd41d946fa0bc64f912fdc8981ca7945a9d63c74ad0f9
+  languageName: node
+  linkType: hard
+
+"js-binary-schema-parser@npm:^2.0.3":
+  version: 2.0.3
+  resolution: "js-binary-schema-parser@npm:2.0.3"
+  checksum: 10/40494a1ac114a41c9601d8289428282816179be2cff7001e9a4c8a577704c522e46b33c917f73a369612a01eeb66b5602f33c1d78afba9e9b9680f5c8794c498
+  languageName: node
+  linkType: hard
+
+"js-tokens@npm:^10.0.0":
+  version: 10.0.0
+  resolution: "js-tokens@npm:10.0.0"
+  checksum: 10/88f536ec89f076fc230d29df255b3c55531237669d746d1868fca716b1e3f5f2e4abf8e5b8701903216e3f00d2dc3918d078b35da87772d433ab6a513c3bf76d
+  languageName: node
+  linkType: hard
+
+"js-tokens@npm:^3.0.0 || ^4.0.0, js-tokens@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "js-tokens@npm:4.0.0"
+  checksum: 10/af37d0d913fb56aec6dc0074c163cc71cd23c0b8aad5c2350747b6721d37ba118af35abdd8b33c47ec2800de07dedb16a527ca9c530ee004093e04958bd0cbf2
+  languageName: node
+  linkType: hard
+
+"js-yaml@npm:^4.1.0, js-yaml@npm:^4.3.0":
+  version: 4.3.2
+  resolution: "js-yaml@npm:4.3.2"
+  dependencies:
+    argparse: "npm:^2.0.1"
+  bin:
+    js-yaml: bin/js-yaml.js
+  checksum: 10/05c44b9c73e4901d92703b155e76518df64bf01ac62e4c036b47de4b391e19b72e32656e8954d51b436307f08cc9d0c0d4ec617d061cf2f65fffee9f3114bee7
+  languageName: node
+  linkType: hard
+
+"jsdom@npm:^30.0.1":
+  version: 30.0.1
+  resolution: "jsdom@npm:30.0.1"
+  dependencies:
+    "@asamuzakjp/css-color": "npm:^6.0.5"
+    "@asamuzakjp/dom-selector": "npm:^8.3.0"
+    "@bramus/specificity": "npm:^2.4.2"
+    "@csstools/css-syntax-patches-for-csstree": "npm:^1.1.7"
+    "@exodus/bytes": "npm:^1.15.1"
+    css-tree: "npm:^3.2.1"
+    data-urls: "npm:^7.0.0"
+    decimal.js: "npm:^10.6.0"
+    html-encoding-sniffer: "npm:^6.0.0"
+    is-potential-custom-element-name: "npm:^1.0.1"
+    lru-cache: "npm:^11.5.2"
+    parse5: "npm:^8.0.1"
+    saxes: "npm:^6.0.0"
+    symbol-tree: "npm:^3.2.4"
+    tough-cookie: "npm:^6.0.2"
+    undici: "npm:^8.9.0"
+    w3c-xmlserializer: "npm:^5.0.0"
+    webidl-conversions: "npm:^8.0.1"
+    whatwg-mimetype: "npm:^5.0.0"
+    whatwg-url: "npm:^17.1.0"
+    xml-name-validator: "npm:^5.0.0"
+  peerDependencies:
+    canvas: ^3.2.3
+  peerDependenciesMeta:
+    canvas:
+      optional: true
+  checksum: 10/5089ceca7d340b3beec451b7a3286f2bf38d707482e0bdcf046e63b4de3ea2e679372fbb733c5c24c1ce1cc9e70272d10e49fd1b4b146beb77b12c17c069cb36
+  languageName: node
+  linkType: hard
+
+"jsesc@npm:^3.0.2":
+  version: 3.1.0
+  resolution: "jsesc@npm:3.1.0"
+  bin:
+    jsesc: bin/jsesc
+  checksum: 10/20bd37a142eca5d1794f354db8f1c9aeb54d85e1f5c247b371de05d23a9751ecd7bd3a9c4fc5298ea6fa09a100dafb4190fa5c98c6610b75952c3487f3ce7967
+  languageName: node
+  linkType: hard
+
+"json-buffer@npm:3.0.1":
+  version: 3.0.1
+  resolution: "json-buffer@npm:3.0.1"
+  checksum: 10/82876154521b7b68ba71c4f969b91572d1beabadd87bd3a6b236f85fbc7dc4695089191ed60bb59f9340993c51b33d479f45b6ba9f3548beb519705281c32c3c
+  languageName: node
+  linkType: hard
+
+"json-schema-traverse@npm:^0.4.1":
+  version: 0.4.1
+  resolution: "json-schema-traverse@npm:0.4.1"
+  checksum: 10/7486074d3ba247769fda17d5181b345c9fb7d12e0da98b22d1d71a5db9698d8b4bd900a3ec1a4ffdd60846fc2556274a5c894d0c48795f14cb03aeae7b55260b
+  languageName: node
+  linkType: hard
+
+"json-stable-stringify-without-jsonify@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "json-stable-stringify-without-jsonify@npm:1.0.1"
+  checksum: 10/12786c2e2f22c27439e6db0532ba321f1d0617c27ad8cb1c352a0e9249a50182fd1ba8b52a18899291604b0c32eafa8afd09e51203f19109a0537f68db2b652d
+  languageName: node
+  linkType: hard
+
+"json5@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "json5@npm:1.0.2"
+  dependencies:
+    minimist: "npm:^1.2.0"
+  bin:
+    json5: lib/cli.js
+  checksum: 10/a78d812dbbd5642c4f637dd130954acfd231b074965871c3e28a5bbd571f099d623ecf9161f1960c4ddf68e0cc98dee8bebfdb94a71ad4551f85a1afc94b63f6
+  languageName: node
+  linkType: hard
+
+"json5@npm:^2.2.2, json5@npm:^2.2.3":
+  version: 2.2.3
+  resolution: "json5@npm:2.2.3"
+  bin:
+    json5: lib/cli.js
+  checksum: 10/1db67b853ff0de3534085d630691d3247de53a2ed1390ba0ddff681ea43e9b3e30ecbdb65c5e9aab49435e44059c23dbd6fee8ee619419ba37465bb0dd7135da
+  languageName: node
+  linkType: hard
+
+"jsonc-parser@npm:^3.3.1":
+  version: 3.3.1
+  resolution: "jsonc-parser@npm:3.3.1"
+  checksum: 10/9b0dc391f20b47378f843ef1e877e73ec652a5bdc3c5fa1f36af0f119a55091d147a86c1ee86a232296f55c929bba174538c2bf0312610e0817a22de131cc3f4
+  languageName: node
+  linkType: hard
+
+"jsx-ast-utils@npm:^2.4.1 || ^3.0.0":
+  version: 3.3.5
+  resolution: "jsx-ast-utils@npm:3.3.5"
+  dependencies:
+    array-includes: "npm:^3.1.6"
+    array.prototype.flat: "npm:^1.3.1"
+    object.assign: "npm:^4.1.4"
+    object.values: "npm:^1.1.6"
+  checksum: 10/b61d44613687dfe4cc8ad4b4fbf3711bf26c60b8d5ed1f494d723e0808415c59b24a7c0ed8ab10736a40ff84eef38cbbfb68b395e05d31117b44ffc59d31edfc
+  languageName: node
+  linkType: hard
+
+"keyv@npm:^4.5.4":
+  version: 4.5.4
+  resolution: "keyv@npm:4.5.4"
+  dependencies:
+    json-buffer: "npm:3.0.1"
+  checksum: 10/167eb6ef64cc84b6fa0780ee50c9de456b422a1e18802209234f7c2cf7eae648c7741f32e50d7e24ccb22b24c13154070b01563d642755b156c357431a191e75
+  languageName: node
+  linkType: hard
+
+"levn@npm:^0.4.1":
+  version: 0.4.1
+  resolution: "levn@npm:0.4.1"
+  dependencies:
+    prelude-ls: "npm:^1.2.1"
+    type-check: "npm:~0.4.0"
+  checksum: 10/2e4720ff79f21ae08d42374b0a5c2f664c5be8b6c8f565bb4e1315c96ed3a8acaa9de788ffed82d7f2378cf36958573de07ef92336cb5255ed74d08b8318c9ee
+  languageName: node
+  linkType: hard
+
+"lightningcss-android-arm64@npm:1.32.0":
+  version: 1.32.0
+  resolution: "lightningcss-android-arm64@npm:1.32.0"
+  conditions: os=android & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"lightningcss-android-arm64@npm:1.33.0":
+  version: 1.33.0
+  resolution: "lightningcss-android-arm64@npm:1.33.0"
+  conditions: os=android & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"lightningcss-darwin-arm64@npm:1.32.0":
+  version: 1.32.0
+  resolution: "lightningcss-darwin-arm64@npm:1.32.0"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"lightningcss-darwin-arm64@npm:1.33.0":
+  version: 1.33.0
+  resolution: "lightningcss-darwin-arm64@npm:1.33.0"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"lightningcss-darwin-x64@npm:1.32.0":
+  version: 1.32.0
+  resolution: "lightningcss-darwin-x64@npm:1.32.0"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"lightningcss-darwin-x64@npm:1.33.0":
+  version: 1.33.0
+  resolution: "lightningcss-darwin-x64@npm:1.33.0"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"lightningcss-freebsd-x64@npm:1.32.0":
+  version: 1.32.0
+  resolution: "lightningcss-freebsd-x64@npm:1.32.0"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"lightningcss-freebsd-x64@npm:1.33.0":
+  version: 1.33.0
+  resolution: "lightningcss-freebsd-x64@npm:1.33.0"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"lightningcss-linux-arm-gnueabihf@npm:1.32.0":
+  version: 1.32.0
+  resolution: "lightningcss-linux-arm-gnueabihf@npm:1.32.0"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
+"lightningcss-linux-arm-gnueabihf@npm:1.33.0":
+  version: 1.33.0
+  resolution: "lightningcss-linux-arm-gnueabihf@npm:1.33.0"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
+"lightningcss-linux-arm64-gnu@npm:1.32.0":
+  version: 1.32.0
+  resolution: "lightningcss-linux-arm64-gnu@npm:1.32.0"
+  conditions: os=linux & cpu=arm64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"lightningcss-linux-arm64-gnu@npm:1.33.0":
+  version: 1.33.0
+  resolution: "lightningcss-linux-arm64-gnu@npm:1.33.0"
+  conditions: os=linux & cpu=arm64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"lightningcss-linux-arm64-musl@npm:1.32.0":
+  version: 1.32.0
+  resolution: "lightningcss-linux-arm64-musl@npm:1.32.0"
+  conditions: os=linux & cpu=arm64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"lightningcss-linux-arm64-musl@npm:1.33.0":
+  version: 1.33.0
+  resolution: "lightningcss-linux-arm64-musl@npm:1.33.0"
+  conditions: os=linux & cpu=arm64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"lightningcss-linux-x64-gnu@npm:1.32.0":
+  version: 1.32.0
+  resolution: "lightningcss-linux-x64-gnu@npm:1.32.0"
+  conditions: os=linux & cpu=x64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"lightningcss-linux-x64-gnu@npm:1.33.0":
+  version: 1.33.0
+  resolution: "lightningcss-linux-x64-gnu@npm:1.33.0"
+  conditions: os=linux & cpu=x64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"lightningcss-linux-x64-musl@npm:1.32.0":
+  version: 1.32.0
+  resolution: "lightningcss-linux-x64-musl@npm:1.32.0"
+  conditions: os=linux & cpu=x64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"lightningcss-linux-x64-musl@npm:1.33.0":
+  version: 1.33.0
+  resolution: "lightningcss-linux-x64-musl@npm:1.33.0"
+  conditions: os=linux & cpu=x64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"lightningcss-win32-arm64-msvc@npm:1.32.0":
+  version: 1.32.0
+  resolution: "lightningcss-win32-arm64-msvc@npm:1.32.0"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"lightningcss-win32-arm64-msvc@npm:1.33.0":
+  version: 1.33.0
+  resolution: "lightningcss-win32-arm64-msvc@npm:1.33.0"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"lightningcss-win32-x64-msvc@npm:1.32.0":
+  version: 1.32.0
+  resolution: "lightningcss-win32-x64-msvc@npm:1.32.0"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
+"lightningcss-win32-x64-msvc@npm:1.33.0":
+  version: 1.33.0
+  resolution: "lightningcss-win32-x64-msvc@npm:1.33.0"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
+"lightningcss@npm:1.32.0":
+  version: 1.32.0
+  resolution: "lightningcss@npm:1.32.0"
+  dependencies:
+    detect-libc: "npm:^2.0.3"
+    lightningcss-android-arm64: "npm:1.32.0"
+    lightningcss-darwin-arm64: "npm:1.32.0"
+    lightningcss-darwin-x64: "npm:1.32.0"
+    lightningcss-freebsd-x64: "npm:1.32.0"
+    lightningcss-linux-arm-gnueabihf: "npm:1.32.0"
+    lightningcss-linux-arm64-gnu: "npm:1.32.0"
+    lightningcss-linux-arm64-musl: "npm:1.32.0"
+    lightningcss-linux-x64-gnu: "npm:1.32.0"
+    lightningcss-linux-x64-musl: "npm:1.32.0"
+    lightningcss-win32-arm64-msvc: "npm:1.32.0"
+    lightningcss-win32-x64-msvc: "npm:1.32.0"
+  dependenciesMeta:
+    lightningcss-android-arm64:
+      optional: true
+    lightningcss-darwin-arm64:
+      optional: true
+    lightningcss-darwin-x64:
+      optional: true
+    lightningcss-freebsd-x64:
+      optional: true
+    lightningcss-linux-arm-gnueabihf:
+      optional: true
+    lightningcss-linux-arm64-gnu:
+      optional: true
+    lightningcss-linux-arm64-musl:
+      optional: true
+    lightningcss-linux-x64-gnu:
+      optional: true
+    lightningcss-linux-x64-musl:
+      optional: true
+    lightningcss-win32-arm64-msvc:
+      optional: true
+    lightningcss-win32-x64-msvc:
+      optional: true
+  checksum: 10/098e61007f0d0ec8b5c50884e33b543b551d1ff21bc7b062434b6638fd0b8596858f823b60dfc2a4aa756f3cb120ad79f2b7f4a55b1bda2c0269ab8cf476f114
+  languageName: node
+  linkType: hard
+
+"lightningcss@npm:^1.33.0":
+  version: 1.33.0
+  resolution: "lightningcss@npm:1.33.0"
+  dependencies:
+    detect-libc: "npm:^2.0.3"
+    lightningcss-android-arm64: "npm:1.33.0"
+    lightningcss-darwin-arm64: "npm:1.33.0"
+    lightningcss-darwin-x64: "npm:1.33.0"
+    lightningcss-freebsd-x64: "npm:1.33.0"
+    lightningcss-linux-arm-gnueabihf: "npm:1.33.0"
+    lightningcss-linux-arm64-gnu: "npm:1.33.0"
+    lightningcss-linux-arm64-musl: "npm:1.33.0"
+    lightningcss-linux-x64-gnu: "npm:1.33.0"
+    lightningcss-linux-x64-musl: "npm:1.33.0"
+    lightningcss-win32-arm64-msvc: "npm:1.33.0"
+    lightningcss-win32-x64-msvc: "npm:1.33.0"
+  dependenciesMeta:
+    lightningcss-android-arm64:
+      optional: true
+    lightningcss-darwin-arm64:
+      optional: true
+    lightningcss-darwin-x64:
+      optional: true
+    lightningcss-freebsd-x64:
+      optional: true
+    lightningcss-linux-arm-gnueabihf:
+      optional: true
+    lightningcss-linux-arm64-gnu:
+      optional: true
+    lightningcss-linux-arm64-musl:
+      optional: true
+    lightningcss-linux-x64-gnu:
+      optional: true
+    lightningcss-linux-x64-musl:
+      optional: true
+    lightningcss-win32-arm64-msvc:
+      optional: true
+    lightningcss-win32-x64-msvc:
+      optional: true
+  checksum: 10/9b3b5db404af352fe5861926b9909281d29bede175539035c1a01e1ad4dcee8bb6f871e8e3d01a67a85e9e1cd18a63e52871a48cf62feab4d1aa868d4f2c3c2e
+  languageName: node
+  linkType: hard
+
+"locate-path@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "locate-path@npm:6.0.0"
+  dependencies:
+    p-locate: "npm:^5.0.0"
+  checksum: 10/72eb661788a0368c099a184c59d2fee760b3831c9c1c33955e8a19ae4a21b4116e53fa736dc086cdeb9fce9f7cc508f2f92d2d3aae516f133e16a2bb59a39f5a
+  languageName: node
+  linkType: hard
+
+"lodash.clamp@npm:^4.0.0":
+  version: 4.0.3
+  resolution: "lodash.clamp@npm:4.0.3"
+  checksum: 10/02baa03ebb96f2ce8d9cec28b21fa3ed808c32f3b8fe54e2f990f1177779b13dcda69232db72d7285763e14a0ee64666a82a2047558eaba7198580173756c888
+  languageName: node
+  linkType: hard
+
+"lodash.debounce@npm:^4.0.0, lodash.debounce@npm:^4.0.8":
+  version: 4.0.8
+  resolution: "lodash.debounce@npm:4.0.8"
+  checksum: 10/cd0b2819786e6e80cb9f5cda26b1a8fc073daaf04e48d4cb462fa4663ec9adb3a5387aa22d7129e48eed1afa05b482e2a6b79bfc99b86886364449500cbb00fd
+  languageName: node
+  linkType: hard
+
+"log-symbols@npm:^4.1.0":
+  version: 4.1.0
+  resolution: "log-symbols@npm:4.1.0"
+  dependencies:
+    chalk: "npm:^4.1.0"
+    is-unicode-supported: "npm:^0.1.0"
+  checksum: 10/fce1497b3135a0198803f9f07464165e9eb83ed02ceb2273930a6f8a508951178d8cf4f0378e9d28300a2ed2bc49050995d2bd5f53ab716bb15ac84d58c6ef74
+  languageName: node
+  linkType: hard
+
+"loose-envify@npm:^1.4.0":
+  version: 1.4.0
+  resolution: "loose-envify@npm:1.4.0"
+  dependencies:
+    js-tokens: "npm:^3.0.0 || ^4.0.0"
+  bin:
+    loose-envify: cli.js
+  checksum: 10/6517e24e0cad87ec9888f500c5b5947032cdfe6ef65e1c1936a0c48a524b81e65542c9c3edc91c97d5bddc806ee2a985dbc79be89215d613b1de5db6d1cfe6f4
+  languageName: node
+  linkType: hard
+
+"loupe@npm:^3.1.0, loupe@npm:^3.1.4":
+  version: 3.2.1
+  resolution: "loupe@npm:3.2.1"
+  checksum: 10/a4d78ec758aaa04e0e35d5cd1c15e970beb9cdbfd3d0f34f98b9bcda489f896a7190b3b6cc40b7a6dcb8e97e82e96eafaae10096aaa469804acdba6f7c2bde5f
+  languageName: node
+  linkType: hard
+
+"lru-cache@npm:^10.2.0":
+  version: 10.4.3
+  resolution: "lru-cache@npm:10.4.3"
+  checksum: 10/e6e90267360476720fa8e83cc168aa2bf0311f3f2eea20a6ba78b90a885ae72071d9db132f40fda4129c803e7dcec3a6b6a6fbb44ca90b081630b810b5d6a41a
+  languageName: node
+  linkType: hard
+
+"lru-cache@npm:^11.0.0, lru-cache@npm:^11.5.2":
+  version: 11.5.2
+  resolution: "lru-cache@npm:11.5.2"
+  checksum: 10/122789c66605ddf29df58ff279e9e2c9499499d0b80b895ec524496f14bcde045d1582e3e38008f3457226d98067556719573b352119d6be8bdb1f8849f85681
+  languageName: node
+  linkType: hard
+
+"lru-cache@npm:^5.1.1":
+  version: 5.1.1
+  resolution: "lru-cache@npm:5.1.1"
+  dependencies:
+    yallist: "npm:^3.0.2"
+  checksum: 10/951d2673dcc64a7fb888bf3d13bc2fdf923faca97d89cdb405ba3dfff77e2b26e5798d405e78fcd7094c9e7b8b4dab2ddc5a4f8a11928af24a207b7c738ca3f8
+  languageName: node
+  linkType: hard
+
+"lz-string@npm:^1.5.0":
+  version: 1.5.0
+  resolution: "lz-string@npm:1.5.0"
+  bin:
+    lz-string: bin/bin.js
+  checksum: 10/e86f0280e99a8d8cd4eef24d8601ddae15ce54e43ac9990dfcb79e1e081c255ad24424a30d78d2ad8e51a8ce82a66a930047fed4b4aa38c6f0b392ff9300edfc
+  languageName: node
+  linkType: hard
+
+"magic-string@npm:^0.30.0, magic-string@npm:^0.30.11, magic-string@npm:^0.30.21":
+  version: 0.30.21
+  resolution: "magic-string@npm:0.30.21"
+  dependencies:
+    "@jridgewell/sourcemap-codec": "npm:^1.5.5"
+  checksum: 10/57d5691f41ed40d962d8bd300148114f53db67fadbff336207db10a99f2bdf4a1be9cac3a68ee85dba575912ee1d4402e4396408196ec2d3afd043b076156221
+  languageName: node
+  linkType: hard
+
+"magicast@npm:^0.5.2":
+  version: 0.5.4
+  resolution: "magicast@npm:0.5.4"
+  dependencies:
+    "@babel/parser": "npm:^7.29.7"
+    "@babel/types": "npm:^7.29.7"
+    source-map-js: "npm:^1.2.1"
+  checksum: 10/174a26b566ff6b92b0f3522711c139ad03b3ffd6eae045fe230672a674066937eb8232bf6ad755459324eda03f6e6258226566fe2b505c5983670439859c6c39
+  languageName: node
+  linkType: hard
+
+"make-dir@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "make-dir@npm:4.0.0"
+  dependencies:
+    semver: "npm:^7.5.3"
+  checksum: 10/bf0731a2dd3aab4db6f3de1585cea0b746bb73eb5a02e3d8d72757e376e64e6ada190b1eddcde5b2f24a81b688a9897efd5018737d05e02e2a671dda9cff8a8a
+  languageName: node
+  linkType: hard
+
+"make-error@npm:^1.1.1":
+  version: 1.3.6
+  resolution: "make-error@npm:1.3.6"
+  checksum: 10/b86e5e0e25f7f777b77fabd8e2cbf15737972869d852a22b7e73c17623928fccb826d8e46b9951501d3f20e51ad74ba8c59ed584f610526a48f8ccf88aaec402
+  languageName: node
+  linkType: hard
+
+"math-intrinsics@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "math-intrinsics@npm:1.1.0"
+  checksum: 10/11df2eda46d092a6035479632e1ec865b8134bdfc4bd9e571a656f4191525404f13a283a515938c3a8de934dbfd9c09674d9da9fa831e6eb7e22b50b197d2edd
+  languageName: node
+  linkType: hard
+
+"mdn-data@npm:2.27.1":
+  version: 2.27.1
+  resolution: "mdn-data@npm:2.27.1"
+  checksum: 10/5046dc83a961b8ea82a5d6d8331d07df6b15faec61519ce2f83e49766702358e7e6af96413be977ff89080534be6762c1d5963b5dd1180c208a47c0a663226b2
+  languageName: node
+  linkType: hard
+
+"merge2@npm:^1.3.0":
+  version: 1.4.1
+  resolution: "merge2@npm:1.4.1"
+  checksum: 10/7268db63ed5169466540b6fb947aec313200bcf6d40c5ab722c22e242f651994619bcd85601602972d3c85bd2cc45a358a4c61937e9f11a061919a1da569b0c2
+  languageName: node
+  linkType: hard
+
+"micromatch@npm:^4.0.8":
+  version: 4.0.8
+  resolution: "micromatch@npm:4.0.8"
+  dependencies:
+    braces: "npm:^3.0.3"
+    picomatch: "npm:^2.3.1"
+  checksum: 10/6bf2a01672e7965eb9941d1f02044fad2bd12486b5553dc1116ff24c09a8723157601dc992e74c911d896175918448762df3b3fd0a6b61037dd1a9766ddfbf58
+  languageName: node
+  linkType: hard
+
+"min-indent@npm:^1.0.0":
+  version: 1.0.1
+  resolution: "min-indent@npm:1.0.1"
+  checksum: 10/bfc6dd03c5eaf623a4963ebd94d087f6f4bbbfd8c41329a7f09706b0cb66969c4ddd336abeb587bc44bc6f08e13bf90f0b374f9d71f9f01e04adc2cd6f083ef1
+  languageName: node
+  linkType: hard
+
+"minimatch@npm:^10.2.2, minimatch@npm:^10.2.4, minimatch@npm:^10.2.5":
+  version: 10.2.6
+  resolution: "minimatch@npm:10.2.6"
+  dependencies:
+    brace-expansion: "npm:^5.0.8"
+  checksum: 10/a5e43f7c57d6061a77da320b42aa35ffff826030cf67c83c0eee47a26ede4d66486935881492b968c609bf27a7d48cc4b9f54b2806643cd8fb792fcf9240cc1b
+  languageName: node
+  linkType: hard
+
+"minimatch@npm:^3.1.2, minimatch@npm:^3.1.5":
+  version: 3.1.5
+  resolution: "minimatch@npm:3.1.5"
+  dependencies:
+    brace-expansion: "npm:^1.1.7"
+  checksum: 10/b11a7ee5773cd34c1a0c8436cdbe910901018fb4b6cb47aa508a18d567f6efd2148507959e35fba798389b161b8604a2d704ccef751ea36bd4582f9852b7d63f
+  languageName: node
+  linkType: hard
+
+"minimatch@npm:^9.0.4, minimatch@npm:^9.0.5":
+  version: 9.0.9
+  resolution: "minimatch@npm:9.0.9"
+  dependencies:
+    brace-expansion: "npm:^2.0.2"
+  checksum: 10/b91fad937deaffb68a45a2cb731ff3cff1c3baf9b6469c879477ed16f15c8f4ce39d63a3f75c2455107c2fdff0f3ab597d97dc09e2e93b883aafcf926ef0c8f9
+  languageName: node
+  linkType: hard
+
+"minimist@npm:^1.2.0, minimist@npm:^1.2.6":
+  version: 1.2.8
+  resolution: "minimist@npm:1.2.8"
+  checksum: 10/908491b6cc15a6c440ba5b22780a0ba89b9810e1aea684e253e43c4e3b8d56ec1dcdd7ea96dde119c29df59c936cde16062159eae4225c691e19c70b432b6e6f
+  languageName: node
+  linkType: hard
+
+"minipass@npm:^5.0.0 || ^6.0.2 || ^7.0.0, minipass@npm:^7.0.4, minipass@npm:^7.1.2, minipass@npm:^7.1.3":
+  version: 7.1.3
+  resolution: "minipass@npm:7.1.3"
+  checksum: 10/175e4d5e20980c3cd316ae82d2c031c42f6c746467d8b1905b51060a0ba4461441a0c25bb67c025fd9617f9a3873e152c7b543c6b5ac83a1846be8ade80dffd6
+  languageName: node
+  linkType: hard
+
+"minizlib@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "minizlib@npm:3.1.0"
+  dependencies:
+    minipass: "npm:^7.1.2"
+  checksum: 10/f47365cc2cb7f078cbe7e046eb52655e2e7e97f8c0a9a674f4da60d94fb0624edfcec9b5db32e8ba5a99a5f036f595680ae6fe02a262beaa73026e505cc52f99
+  languageName: node
+  linkType: hard
+
+"mocha@npm:^11.8.0":
+  version: 11.8.0
+  resolution: "mocha@npm:11.8.0"
+  dependencies:
+    browser-stdout: "npm:^1.3.1"
+    chokidar: "npm:^4.0.1"
+    debug: "npm:^4.3.5"
+    diff: "npm:^7.0.0"
+    escape-string-regexp: "npm:^4.0.0"
+    find-up: "npm:^5.0.0"
+    glob: "npm:^10.4.5"
+    he: "npm:^1.2.0"
+    is-path-inside: "npm:^3.0.3"
+    js-yaml: "npm:^4.1.0"
+    log-symbols: "npm:^4.1.0"
+    minimatch: "npm:^9.0.5"
+    ms: "npm:^2.1.3"
+    picocolors: "npm:^1.1.1"
+    serialize-javascript: "npm:^6.0.2"
+    strip-json-comments: "npm:^3.1.1"
+    supports-color: "npm:^8.1.1"
+    workerpool: "npm:^9.2.0"
+    yargs: "npm:^17.7.2"
+    yargs-parser: "npm:^21.1.1"
+    yargs-unparser: "npm:^2.0.0"
+  bin:
+    _mocha: bin/_mocha
+    mocha: bin/mocha.js
+  checksum: 10/4387620673d47c1249a5aac8d2becc6f54db004d96cf189cf4bd878e7333871228a9911dfd62fa0b71ef61a4b147a9032820c6401fcef77ec46ebcf17fc977c2
+  languageName: node
+  linkType: hard
+
+"module-alias@npm:^2.3.4":
+  version: 2.3.4
+  resolution: "module-alias@npm:2.3.4"
+  checksum: 10/32386c3dc8de3527aa636dfa5bfa75339929296562468491445768b5607310586856f510bea32a179a5425f21f484cc50ba2727f3ee96acb0d30d032dbb2bc11
+  languageName: node
+  linkType: hard
+
+"motion-dom@npm:^13.1.1":
+  version: 13.1.1
+  resolution: "motion-dom@npm:13.1.1"
+  dependencies:
+    motion-utils: "npm:^13.0.0"
+  checksum: 10/88f0d90946b292f94e0f964fb97540de64c0d648f3801295955da420608a529546be63214456dcb16420bc3e3fc8cb23e140a86f451933ac34fc0bf4e09397d3
+  languageName: node
+  linkType: hard
+
+"motion-utils@npm:^13.0.0":
+  version: 13.0.0
+  resolution: "motion-utils@npm:13.0.0"
+  checksum: 10/ee6296263ed6fd16a46eced143446e9335facdf72d1922ecdcfb945fb498d3723e9c94f3036fed4cc3cda7fca59de9b2971c11496fdfb8511cefb70eb2ec2da3
+  languageName: node
+  linkType: hard
+
+"mrmime@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "mrmime@npm:2.0.1"
+  checksum: 10/1f966e2c05b7264209c4149ae50e8e830908eb64dd903535196f6ad72681fa109b794007288a3c2814f7a1ecf9ca192769909c0c374d974d604a8de5fc095d4a
+  languageName: node
+  linkType: hard
+
+"ms@npm:^2.1.1, ms@npm:^2.1.3":
+  version: 2.1.3
+  resolution: "ms@npm:2.1.3"
+  checksum: 10/aa92de608021b242401676e35cfa5aa42dd70cbdc082b916da7fb925c542173e36bce97ea3e804923fe92c0ad991434e4a38327e15a1b5b5f945d66df615ae6d
+  languageName: node
+  linkType: hard
+
+"nanoid@npm:^3.3.17":
+  version: 3.3.18
+  resolution: "nanoid@npm:3.3.18"
+  bin:
+    nanoid: bin/nanoid.cjs
+  checksum: 10/1b3b4fdac831b92b56d1dbe8b1e63a372432faf86ea383134e3b53141ef8108a60b7f84343b5cefecac9550bb74edf8164da93ea07d1c4f757039bc75d8a5d9e
+  languageName: node
+  linkType: hard
+
+"natural-compare@npm:^1.4.0":
+  version: 1.4.0
+  resolution: "natural-compare@npm:1.4.0"
+  checksum: 10/23ad088b08f898fc9b53011d7bb78ec48e79de7627e01ab5518e806033861bef68d5b0cd0e2205c2f36690ac9571ff6bcb05eb777ced2eeda8d4ac5b44592c3d
+  languageName: node
+  linkType: hard
+
+"node-exports-info@npm:^1.6.0":
+  version: 1.6.2
+  resolution: "node-exports-info@npm:1.6.2"
+  dependencies:
+    array.prototype.flatmap: "npm:^1.3.3"
+    es-errors: "npm:^1.3.0"
+    object.entries: "npm:^1.1.9"
+    semver: "npm:^6.3.1"
+  checksum: 10/6c9593094b3dd9b8a338f31490c0bad6da886a964b1bc6d95416dfe83810d4ab3493e53290b951d131a3148bf529f33bd908302aa4fd57c45c7b3d55e2cff848
+  languageName: node
+  linkType: hard
+
+"node-gyp@npm:latest":
+  version: 13.0.2
+  resolution: "node-gyp@npm:13.0.2"
+  dependencies:
+    env-paths: "npm:^2.2.0"
+    exponential-backoff: "npm:^3.1.1"
+    graceful-fs: "npm:^4.2.6"
+    nopt: "npm:^10.0.0"
+    proc-log: "npm:^7.0.0"
+    semver: "npm:^7.3.5"
+    tar: "npm:^7.5.4"
+    tinyglobby: "npm:^0.2.12"
+    undici: "npm:^8.4.1"
+    which: "npm:^7.0.0"
+  bin:
+    node-gyp: bin/node-gyp.js
+  checksum: 10/018ca69386d40576c0ab4bb556dc3ecf40a06a260174a8f5d50da9a592d0a90bd5cf936ca481f19de7ccb7f79dc801d17032d8e2b70963194965a1cc79f8063e
+  languageName: node
+  linkType: hard
+
+"node-releases@npm:^2.0.53":
+  version: 2.0.53
+  resolution: "node-releases@npm:2.0.53"
+  checksum: 10/24cb89ef08ec15b53fe50dad852dd0444e30abae425c6b9c457dcd3892405cbe8cf7b041a6eeefb4d6be8ce461fe03778501b25916bcc1539a6bc7debc1954e5
+  languageName: node
+  linkType: hard
+
+"nopt@npm:^10.0.0":
+  version: 10.0.1
+  resolution: "nopt@npm:10.0.1"
+  dependencies:
+    abbrev: "npm:^5.0.0"
+  bin:
+    nopt: bin/nopt.js
+  checksum: 10/8021371365e78a2cbab015cac50d8449aa2cc411f0b8f2edb466c1336c3dfee4e61c5bf5bde22ee7dcea80d5f4510a7a8705ed3646c8d782f28b550c62bc4fdf
+  languageName: node
+  linkType: hard
+
+"npm-check-updates@npm:^23.1.0":
+  version: 23.1.0
+  resolution: "npm-check-updates@npm:23.1.0"
+  bin:
+    ncu: build/cli.js
+    npm-check-updates: build/cli.js
+  checksum: 10/f6c0c83363b922cc1596a5e6834c9f578af2d9752734a3f287cddf0d18954512b20f23335f52ddc42b7f4547fb571ac092390adfb24109638ed83ae09dc22cd3
+  languageName: node
+  linkType: hard
+
+"object-assign@npm:^4.1.1":
+  version: 4.1.1
+  resolution: "object-assign@npm:4.1.1"
+  checksum: 10/fcc6e4ea8c7fe48abfbb552578b1c53e0d194086e2e6bbbf59e0a536381a292f39943c6e9628af05b5528aa5e3318bb30d6b2e53cadaf5b8fe9e12c4b69af23f
+  languageName: node
+  linkType: hard
+
+"object-inspect@npm:^1.13.3, object-inspect@npm:^1.13.4":
+  version: 1.13.4
+  resolution: "object-inspect@npm:1.13.4"
+  checksum: 10/aa13b1190ad3e366f6c83ad8a16ed37a19ed57d267385aa4bfdccda833d7b90465c057ff6c55d035a6b2e52c1a2295582b294217a0a3a1ae7abdd6877ef781fb
+  languageName: node
+  linkType: hard
+
+"object-keys@npm:^1.1.1":
+  version: 1.1.1
+  resolution: "object-keys@npm:1.1.1"
+  checksum: 10/3d81d02674115973df0b7117628ea4110d56042e5326413e4b4313f0bcdf7dd78d4a3acef2c831463fa3796a66762c49daef306f4a0ea1af44877d7086d73bde
+  languageName: node
+  linkType: hard
+
+"object.assign@npm:^4.1.4, object.assign@npm:^4.1.7":
+  version: 4.1.7
+  resolution: "object.assign@npm:4.1.7"
+  dependencies:
+    call-bind: "npm:^1.0.8"
+    call-bound: "npm:^1.0.3"
+    define-properties: "npm:^1.2.1"
+    es-object-atoms: "npm:^1.0.0"
+    has-symbols: "npm:^1.1.0"
+    object-keys: "npm:^1.1.1"
+  checksum: 10/3fe28cdd779f2a728a9a66bd688679ba231a2b16646cd1e46b528fe7c947494387dda4bc189eff3417f3717ef4f0a8f2439347cf9a9aa3cef722fbfd9f615587
+  languageName: node
+  linkType: hard
+
+"object.entries@npm:^1.1.9":
+  version: 1.1.9
+  resolution: "object.entries@npm:1.1.9"
+  dependencies:
+    call-bind: "npm:^1.0.8"
+    call-bound: "npm:^1.0.4"
+    define-properties: "npm:^1.2.1"
+    es-object-atoms: "npm:^1.1.1"
+  checksum: 10/24163ab1e1e013796693fc5f5d349e8b3ac0b6a34a7edb6c17d3dd45c6a8854145780c57d302a82512c1582f63720f4b4779d6c1cfba12cbb1420b978802d8a3
+  languageName: node
+  linkType: hard
+
+"object.fromentries@npm:^2.0.8":
+  version: 2.0.8
+  resolution: "object.fromentries@npm:2.0.8"
+  dependencies:
+    call-bind: "npm:^1.0.7"
+    define-properties: "npm:^1.2.1"
+    es-abstract: "npm:^1.23.2"
+    es-object-atoms: "npm:^1.0.0"
+  checksum: 10/5b2e80f7af1778b885e3d06aeb335dcc86965e39464671adb7167ab06ac3b0f5dd2e637a90d8ebd7426d69c6f135a4753ba3dd7d0fe2a7030cf718dcb910fd92
+  languageName: node
+  linkType: hard
+
+"object.groupby@npm:^1.0.3":
+  version: 1.0.3
+  resolution: "object.groupby@npm:1.0.3"
+  dependencies:
+    call-bind: "npm:^1.0.7"
+    define-properties: "npm:^1.2.1"
+    es-abstract: "npm:^1.23.2"
+  checksum: 10/44cb86dd2c660434be65f7585c54b62f0425b0c96b5c948d2756be253ef06737da7e68d7106e35506ce4a44d16aa85a413d11c5034eb7ce5579ec28752eb42d0
+  languageName: node
+  linkType: hard
+
+"object.values@npm:^1.1.6, object.values@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "object.values@npm:1.2.1"
+  dependencies:
+    call-bind: "npm:^1.0.8"
+    call-bound: "npm:^1.0.3"
+    define-properties: "npm:^1.2.1"
+    es-object-atoms: "npm:^1.0.0"
+  checksum: 10/f5ec9eccdefeaaa834b089c525663436812a65ff13de7964a1c3a9110f32054f2d58aa476a645bb14f75a79f3fe1154fb3e7bfdae7ac1e80affe171b2ef74bce
+  languageName: node
+  linkType: hard
+
+"obug@npm:^2.1.1":
+  version: 2.1.4
+  resolution: "obug@npm:2.1.4"
+  checksum: 10/05e3ac83f60ef18edb935d67703bada2cbc0feb1a1cef575240b1e48e6e877df95b74048e69bbe549759df18c57ad1808e1e60a9fc4f785525c8549bf7fe81db
+  languageName: node
+  linkType: hard
+
+"open@npm:^10.2.0":
+  version: 10.2.0
+  resolution: "open@npm:10.2.0"
+  dependencies:
+    default-browser: "npm:^5.2.1"
+    define-lazy-prop: "npm:^3.0.0"
+    is-inside-container: "npm:^1.0.0"
+    wsl-utils: "npm:^0.1.0"
+  checksum: 10/e6ad9474734eac3549dcc7d85e952394856ccaee48107c453bd6a725b82e3b8ed5f427658935df27efa76b411aeef62888edea8a9e347e8e7c82632ec966b30e
+  languageName: node
+  linkType: hard
+
+"optionator@npm:^0.9.3":
+  version: 0.9.4
+  resolution: "optionator@npm:0.9.4"
+  dependencies:
+    deep-is: "npm:^0.1.3"
+    fast-levenshtein: "npm:^2.0.6"
+    levn: "npm:^0.4.1"
+    prelude-ls: "npm:^1.2.1"
+    type-check: "npm:^0.4.0"
+    word-wrap: "npm:^1.2.5"
+  checksum: 10/a8398559c60aef88d7f353a4f98dcdff6090a4e70f874c827302bf1213d9106a1c4d5fcb68dacb1feb3c30a04c4102f41047aa55d4c576b863d6fc876e001af6
+  languageName: node
+  linkType: hard
+
+"own-keys@npm:^1.0.1":
+  version: 1.0.2
+  resolution: "own-keys@npm:1.0.2"
+  dependencies:
+    call-bound: "npm:^1.0.4"
+    get-intrinsic: "npm:^1.3.0"
+    object-keys: "npm:^1.1.1"
+    safe-push-apply: "npm:^1.0.0"
+  checksum: 10/95add82ab823dfa5178c82d725b939eb1436b6a56ed2729dba31c7e2e03792d8e9ef504293959e9fda6f417d7133cb0ccdb96990c12f6d1e35b02dcbca408ac3
+  languageName: node
+  linkType: hard
+
+"oxc-parser@npm:^0.127.0":
+  version: 0.127.0
+  resolution: "oxc-parser@npm:0.127.0"
+  dependencies:
+    "@oxc-parser/binding-android-arm-eabi": "npm:0.127.0"
+    "@oxc-parser/binding-android-arm64": "npm:0.127.0"
+    "@oxc-parser/binding-darwin-arm64": "npm:0.127.0"
+    "@oxc-parser/binding-darwin-x64": "npm:0.127.0"
+    "@oxc-parser/binding-freebsd-x64": "npm:0.127.0"
+    "@oxc-parser/binding-linux-arm-gnueabihf": "npm:0.127.0"
+    "@oxc-parser/binding-linux-arm-musleabihf": "npm:0.127.0"
+    "@oxc-parser/binding-linux-arm64-gnu": "npm:0.127.0"
+    "@oxc-parser/binding-linux-arm64-musl": "npm:0.127.0"
+    "@oxc-parser/binding-linux-ppc64-gnu": "npm:0.127.0"
+    "@oxc-parser/binding-linux-riscv64-gnu": "npm:0.127.0"
+    "@oxc-parser/binding-linux-riscv64-musl": "npm:0.127.0"
+    "@oxc-parser/binding-linux-s390x-gnu": "npm:0.127.0"
+    "@oxc-parser/binding-linux-x64-gnu": "npm:0.127.0"
+    "@oxc-parser/binding-linux-x64-musl": "npm:0.127.0"
+    "@oxc-parser/binding-openharmony-arm64": "npm:0.127.0"
+    "@oxc-parser/binding-wasm32-wasi": "npm:0.127.0"
+    "@oxc-parser/binding-win32-arm64-msvc": "npm:0.127.0"
+    "@oxc-parser/binding-win32-ia32-msvc": "npm:0.127.0"
+    "@oxc-parser/binding-win32-x64-msvc": "npm:0.127.0"
+    "@oxc-project/types": "npm:^0.127.0"
+  dependenciesMeta:
+    "@oxc-parser/binding-android-arm-eabi":
+      optional: true
+    "@oxc-parser/binding-android-arm64":
+      optional: true
+    "@oxc-parser/binding-darwin-arm64":
+      optional: true
+    "@oxc-parser/binding-darwin-x64":
+      optional: true
+    "@oxc-parser/binding-freebsd-x64":
+      optional: true
+    "@oxc-parser/binding-linux-arm-gnueabihf":
+      optional: true
+    "@oxc-parser/binding-linux-arm-musleabihf":
+      optional: true
+    "@oxc-parser/binding-linux-arm64-gnu":
+      optional: true
+    "@oxc-parser/binding-linux-arm64-musl":
+      optional: true
+    "@oxc-parser/binding-linux-ppc64-gnu":
+      optional: true
+    "@oxc-parser/binding-linux-riscv64-gnu":
+      optional: true
+    "@oxc-parser/binding-linux-riscv64-musl":
+      optional: true
+    "@oxc-parser/binding-linux-s390x-gnu":
+      optional: true
+    "@oxc-parser/binding-linux-x64-gnu":
+      optional: true
+    "@oxc-parser/binding-linux-x64-musl":
+      optional: true
+    "@oxc-parser/binding-openharmony-arm64":
+      optional: true
+    "@oxc-parser/binding-wasm32-wasi":
+      optional: true
+    "@oxc-parser/binding-win32-arm64-msvc":
+      optional: true
+    "@oxc-parser/binding-win32-ia32-msvc":
+      optional: true
+    "@oxc-parser/binding-win32-x64-msvc":
+      optional: true
+  checksum: 10/1d2e2124b0bcf47c59721f6c340920008423f0f46bc44a5b03a5e83820cf8a21705ccdd615a979717e5a83080cb07294f3c2a17eab3fc486de481ba1d55b44c6
+  languageName: node
+  linkType: hard
+
+"oxc-resolver@npm:11.21.2":
+  version: 11.21.2
+  resolution: "oxc-resolver@npm:11.21.2"
+  dependencies:
+    "@oxc-resolver/binding-android-arm-eabi": "npm:11.21.2"
+    "@oxc-resolver/binding-android-arm64": "npm:11.21.2"
+    "@oxc-resolver/binding-darwin-arm64": "npm:11.21.2"
+    "@oxc-resolver/binding-darwin-x64": "npm:11.21.2"
+    "@oxc-resolver/binding-freebsd-x64": "npm:11.21.2"
+    "@oxc-resolver/binding-linux-arm-gnueabihf": "npm:11.21.2"
+    "@oxc-resolver/binding-linux-arm-musleabihf": "npm:11.21.2"
+    "@oxc-resolver/binding-linux-arm64-gnu": "npm:11.21.2"
+    "@oxc-resolver/binding-linux-arm64-musl": "npm:11.21.2"
+    "@oxc-resolver/binding-linux-ppc64-gnu": "npm:11.21.2"
+    "@oxc-resolver/binding-linux-riscv64-gnu": "npm:11.21.2"
+    "@oxc-resolver/binding-linux-riscv64-musl": "npm:11.21.2"
+    "@oxc-resolver/binding-linux-s390x-gnu": "npm:11.21.2"
+    "@oxc-resolver/binding-linux-x64-gnu": "npm:11.21.2"
+    "@oxc-resolver/binding-linux-x64-musl": "npm:11.21.2"
+    "@oxc-resolver/binding-openharmony-arm64": "npm:11.21.2"
+    "@oxc-resolver/binding-wasm32-wasi": "npm:11.21.2"
+    "@oxc-resolver/binding-win32-arm64-msvc": "npm:11.21.2"
+    "@oxc-resolver/binding-win32-x64-msvc": "npm:11.21.2"
+  dependenciesMeta:
+    "@oxc-resolver/binding-android-arm-eabi":
+      optional: true
+    "@oxc-resolver/binding-android-arm64":
+      optional: true
+    "@oxc-resolver/binding-darwin-arm64":
+      optional: true
+    "@oxc-resolver/binding-darwin-x64":
+      optional: true
+    "@oxc-resolver/binding-freebsd-x64":
+      optional: true
+    "@oxc-resolver/binding-linux-arm-gnueabihf":
+      optional: true
+    "@oxc-resolver/binding-linux-arm-musleabihf":
+      optional: true
+    "@oxc-resolver/binding-linux-arm64-gnu":
+      optional: true
+    "@oxc-resolver/binding-linux-arm64-musl":
+      optional: true
+    "@oxc-resolver/binding-linux-ppc64-gnu":
+      optional: true
+    "@oxc-resolver/binding-linux-riscv64-gnu":
+      optional: true
+    "@oxc-resolver/binding-linux-riscv64-musl":
+      optional: true
+    "@oxc-resolver/binding-linux-s390x-gnu":
+      optional: true
+    "@oxc-resolver/binding-linux-x64-gnu":
+      optional: true
+    "@oxc-resolver/binding-linux-x64-musl":
+      optional: true
+    "@oxc-resolver/binding-openharmony-arm64":
+      optional: true
+    "@oxc-resolver/binding-wasm32-wasi":
+      optional: true
+    "@oxc-resolver/binding-win32-arm64-msvc":
+      optional: true
+    "@oxc-resolver/binding-win32-x64-msvc":
+      optional: true
+  checksum: 10/44abfb2aeec290f78f13d554aafddbd643efa600b94c05168fabb1264dc2d59663eb8130854a10c18393956d30e6638d1915cbeec52f99fa451afd138a8e402a
+  languageName: node
+  linkType: hard
+
+"p-limit@npm:^3.0.2":
+  version: 3.1.0
+  resolution: "p-limit@npm:3.1.0"
+  dependencies:
+    yocto-queue: "npm:^0.1.0"
+  checksum: 10/7c3690c4dbf62ef625671e20b7bdf1cbc9534e83352a2780f165b0d3ceba21907e77ad63401708145ca4e25bfc51636588d89a8c0aeb715e6c37d1c066430360
+  languageName: node
+  linkType: hard
+
+"p-locate@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "p-locate@npm:5.0.0"
+  dependencies:
+    p-limit: "npm:^3.0.2"
+  checksum: 10/1623088f36cf1cbca58e9b61c4e62bf0c60a07af5ae1ca99a720837356b5b6c5ba3eb1b2127e47a06865fee59dd0453cad7cc844cda9d5a62ac1a5a51b7c86d3
+  languageName: node
+  linkType: hard
+
+"package-json-from-dist@npm:^1.0.0":
+  version: 1.0.1
+  resolution: "package-json-from-dist@npm:1.0.1"
+  checksum: 10/58ee9538f2f762988433da00e26acc788036914d57c71c246bf0be1b60cdbd77dd60b6a3e1a30465f0b248aeb80079e0b34cb6050b1dfa18c06953bb1cbc7602
+  languageName: node
+  linkType: hard
+
+"parent-module@npm:^1.0.0":
+  version: 1.0.1
+  resolution: "parent-module@npm:1.0.1"
+  dependencies:
+    callsites: "npm:^3.0.0"
+  checksum: 10/6ba8b255145cae9470cf5551eb74be2d22281587af787a2626683a6c20fbb464978784661478dd2a3f1dad74d1e802d403e1b03c1a31fab310259eec8ac560ff
+  languageName: node
+  linkType: hard
+
+"parse-svg-path@npm:^0.2.0":
+  version: 0.2.0
+  resolution: "parse-svg-path@npm:0.2.0"
+  checksum: 10/294750978c76eda0b0a69fad7185aa72c6928ce629bb531ccf6c583f4cb78864ea5f794ff00aaf8831a1d7ea872c0bf0f38787d9d7c8994105d1c91d2e924a10
+  languageName: node
+  linkType: hard
+
+"parse5@npm:^8.0.1":
+  version: 8.0.1
+  resolution: "parse5@npm:8.0.1"
+  dependencies:
+    entities: "npm:^8.0.0"
+  checksum: 10/671dedfe7cbf4714414317bc8c6b2a14c61ef44f8fd90c983b5b1870653af5aa2e3b4e25e38e9538a7120ea2b688c50908830da2bd0930d8fd4bce34aed024eb
+  languageName: node
+  linkType: hard
+
+"path-exists@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "path-exists@npm:4.0.0"
+  checksum: 10/505807199dfb7c50737b057dd8d351b82c033029ab94cb10a657609e00c1bc53b951cfdbccab8de04c5584d5eff31128ce6afd3db79281874a5ef2adbba55ed1
+  languageName: node
+  linkType: hard
+
+"path-key@npm:^3.1.0":
+  version: 3.1.1
+  resolution: "path-key@npm:3.1.1"
+  checksum: 10/55cd7a9dd4b343412a8386a743f9c746ef196e57c823d90ca3ab917f90ab9f13dd0ded27252ba49dbdfcab2b091d998bc446f6220cd3cea65db407502a740020
+  languageName: node
+  linkType: hard
+
+"path-parse@npm:^1.0.7":
+  version: 1.0.7
+  resolution: "path-parse@npm:1.0.7"
+  checksum: 10/49abf3d81115642938a8700ec580da6e830dde670be21893c62f4e10bd7dd4c3742ddc603fe24f898cba7eb0c6bc1777f8d9ac14185d34540c6d4d80cd9cae8a
+  languageName: node
+  linkType: hard
+
+"path-scurry@npm:^1.11.1":
+  version: 1.11.1
+  resolution: "path-scurry@npm:1.11.1"
+  dependencies:
+    lru-cache: "npm:^10.2.0"
+    minipass: "npm:^5.0.0 || ^6.0.2 || ^7.0.0"
+  checksum: 10/5e8845c159261adda6f09814d7725683257fcc85a18f329880ab4d7cc1d12830967eae5d5894e453f341710d5484b8fdbbd4d75181b4d6e1eb2f4dc7aeadc434
+  languageName: node
+  linkType: hard
+
+"path-scurry@npm:^2.0.2":
+  version: 2.0.2
+  resolution: "path-scurry@npm:2.0.2"
+  dependencies:
+    lru-cache: "npm:^11.0.0"
+    minipass: "npm:^7.1.2"
+  checksum: 10/2b4257422bcb870a4c2d205b3acdbb213a72f5e2250f61c80f79c9d014d010f82bdf8584441612c8e1fa4eb098678f5704a66fa8377d72646bad4be38e57a2c3
+  languageName: node
+  linkType: hard
+
+"pathe@npm:^2.0.3":
+  version: 2.0.3
+  resolution: "pathe@npm:2.0.3"
+  checksum: 10/01e9a69928f39087d96e1751ce7d6d50da8c39abf9a12e0ac2389c42c83bc76f78c45a475bd9026a02e6a6f79be63acc75667df855862fe567d99a00a540d23d
+  languageName: node
+  linkType: hard
+
+"pathval@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "pathval@npm:2.0.1"
+  checksum: 10/f5e8b82f6b988a5bba197970af050268fd800780d0f9ee026e6f0b544ac4b17ab52bebeabccb790d63a794530a1641ae399ad07ecfc67ad337504c85dc9e5693
+  languageName: node
+  linkType: hard
+
+"picocolors@npm:1.1.1, picocolors@npm:^1.1.1":
+  version: 1.1.1
+  resolution: "picocolors@npm:1.1.1"
+  checksum: 10/e1cf46bf84886c79055fdfa9dcb3e4711ad259949e3565154b004b260cd356c5d54b31a1437ce9782624bf766272fe6b0154f5f0c744fb7af5d454d2b60db045
+  languageName: node
+  linkType: hard
+
+"picomatch@npm:^2.3.1":
+  version: 2.3.2
+  resolution: "picomatch@npm:2.3.2"
+  checksum: 10/b788ef8148a2415b9dec12f0bb350ae6a5830f8f1950e472abc2f5225494debf7d1b75eb031df0ceaea9e8ec3e7bad599e8dbf3c60d61b42be429ba41bff4426
+  languageName: node
+  linkType: hard
+
+"picomatch@npm:^4.0.2, picomatch@npm:^4.0.3, picomatch@npm:^4.0.4, picomatch@npm:^4.0.5":
+  version: 4.0.7
+  resolution: "picomatch@npm:4.0.7"
+  checksum: 10/66e1df34bc39c72fa3756be4069f7887ea3e35e94bba1c3f6167763007698cb04b8a0a365161d186fda6e9571a2d3efb606b2966eb6a7dea6252911224dc2f48
+  languageName: node
+  linkType: hard
+
+"pixi.js@npm:^8.20.0":
+  version: 8.20.1
+  resolution: "pixi.js@npm:8.20.1"
+  dependencies:
+    "@pixi/colord": "npm:^2.9.6"
+    "@types/earcut": "npm:^3.0.0"
+    "@webgpu/types": "npm:^0.1.69"
+    "@xmldom/xmldom": "npm:^0.8.15"
+    earcut: "npm:^3.0.2"
+    eventemitter3: "npm:^5.0.1"
+    gifuct-js: "npm:^2.1.2"
+    ismobilejs: "npm:^1.1.1"
+    parse-svg-path: "npm:^0.2.0"
+    tiny-lru: "npm:^11.4.7"
+  checksum: 10/66951b184fc456070653d4f38fadea15627a708df3a2e70a4a70b2ba3669d2d918987640cc47d2739c9a986b57bd02ab4ccd34900eab4193bfa57898a5f75ac0
+  languageName: node
+  linkType: hard
+
+"playwright-core@npm:1.62.1":
+  version: 1.62.1
+  resolution: "playwright-core@npm:1.62.1"
+  bin:
+    playwright-core: cli.js
+  checksum: 10/2dab88793a6a5cbfa27641664548ded72a4f869d7eab8d3541e070081b5e09595253aa3dbd42eb4e6eca1b03d96a727c60704359b5b309e71ca58b12549a4c06
+  languageName: node
+  linkType: hard
+
+"playwright@npm:^1.62.1":
+  version: 1.62.1
+  resolution: "playwright@npm:1.62.1"
+  dependencies:
+    fsevents: "npm:2.3.2"
+    playwright-core: "npm:1.62.1"
+  dependenciesMeta:
+    fsevents:
+      optional: true
+  bin:
+    playwright: cli.js
+  checksum: 10/f99546873ab2545160ad5a0145fef8e2c1d805efd1ba77356f5b0ee3d8688192b3a2af08cd948bece36ca386fdfad889ef7e53b7aaad309940744c0bbccc0a19
+  languageName: node
+  linkType: hard
+
+"pngjs@npm:^7.0.0":
+  version: 7.0.0
+  resolution: "pngjs@npm:7.0.0"
+  checksum: 10/e843ebbb0df092ee0f3a3e7dbd91ff87a239a4e4c4198fff202916bfb33b67622f4b83b3c29f3ccae94fcb97180c289df06068624554f61686fe6b9a4811f7db
+  languageName: node
+  linkType: hard
+
+"possible-typed-array-names@npm:^1.0.0, possible-typed-array-names@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "possible-typed-array-names@npm:1.1.0"
+  checksum: 10/2f44137b8d3dd35f4a7ba7469eec1cd9cfbb46ec164b93a5bc1f4c3d68599c9910ee3b91da1d28b4560e9cc8414c3cd56fedc07259c67e52cc774476270d3302
+  languageName: node
+  linkType: hard
+
+"postcss-value-parser@npm:^4.2.0":
+  version: 4.2.0
+  resolution: "postcss-value-parser@npm:4.2.0"
+  checksum: 10/e4e4486f33b3163a606a6ed94f9c196ab49a37a7a7163abfcd469e5f113210120d70b8dd5e33d64636f41ad52316a3725655421eb9a1094f1bcab1db2f555c62
+  languageName: node
+  linkType: hard
+
+"postcss@npm:^8.5.16, postcss@npm:^8.5.26":
+  version: 8.5.26
+  resolution: "postcss@npm:8.5.26"
+  dependencies:
+    nanoid: "npm:^3.3.17"
+    picocolors: "npm:^1.1.1"
+    source-map-js: "npm:^1.2.1"
+  checksum: 10/842a624f822f77cb37264cc24f0cf97c0a69dd8d6f7b4a6d76b5a8dc95355899dd044f33a2d4e890da858293de570fce18dff453f3b629ff14cac67a3591895a
+  languageName: node
+  linkType: hard
+
+"prelude-ls@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "prelude-ls@npm:1.2.1"
+  checksum: 10/0b9d2c76801ca652a7f64892dd37b7e3fab149a37d2424920099bf894acccc62abb4424af2155ab36dea8744843060a2d8ddc983518d0b1e22265a22324b72ed
+  languageName: node
+  linkType: hard
+
+"prettier-linter-helpers@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "prettier-linter-helpers@npm:1.0.1"
+  dependencies:
+    fast-diff: "npm:^1.1.2"
+  checksum: 10/2dc35f5036a35f4c4f5e645887edda1436acb63687a7f12b2383e0a6f3c1f76b8a0a4709fe4d82e19157210feb5984b159bb714d43290022911ab53d606474ec
+  languageName: node
+  linkType: hard
+
+"prettier@npm:^3.9.6":
+  version: 3.9.6
+  resolution: "prettier@npm:3.9.6"
+  bin:
+    prettier: bin/prettier.cjs
+  checksum: 10/1dd1a1e0e40ec3b91cda9d294c4a95022aef61880ca3f441aad99b1252279f58a766c4cece81132c01550dcff1fd445efbd8812ea4a2374313e7fc6c8136f11f
+  languageName: node
+  linkType: hard
+
+"pretty-format@npm:^27.0.2":
+  version: 27.5.1
+  resolution: "pretty-format@npm:27.5.1"
+  dependencies:
+    ansi-regex: "npm:^5.0.1"
+    ansi-styles: "npm:^5.0.0"
+    react-is: "npm:^17.0.1"
+  checksum: 10/248990cbef9e96fb36a3e1ae6b903c551ca4ddd733f8d0912b9cc5141d3d0b3f9f8dfb4d799fb1c6723382c9c2083ffbfa4ad43ff9a0e7535d32d41fd5f01da6
+  languageName: node
+  linkType: hard
+
+"proc-log@npm:^7.0.0":
+  version: 7.0.0
+  resolution: "proc-log@npm:7.0.0"
+  checksum: 10/97cd9f4a8a0d84e42ee91e106e5ba5edcb954521e8dbe26ee6ad31396e5c12cc2be5e5b6be7b53fa5a69959afbacd32719106e2d6f45802e34b31d9a3a01ec20
+  languageName: node
+  linkType: hard
+
+"prop-types@npm:^15.8.1":
+  version: 15.8.1
+  resolution: "prop-types@npm:15.8.1"
+  dependencies:
+    loose-envify: "npm:^1.4.0"
+    object-assign: "npm:^4.1.1"
+    react-is: "npm:^16.13.1"
+  checksum: 10/7d959caec002bc964c86cdc461ec93108b27337dabe6192fb97d69e16a0c799a03462713868b40749bfc1caf5f57ef80ac3e4ffad3effa636ee667582a75e2c0
+  languageName: node
+  linkType: hard
+
+"punycode@npm:^2.1.0, punycode@npm:^2.3.1":
+  version: 2.3.1
+  resolution: "punycode@npm:2.3.1"
+  checksum: 10/febdc4362bead22f9e2608ff0171713230b57aff9dddc1c273aa2a651fbd366f94b7d6a71d78342a7c0819906750351ca7f2edd26ea41b626d87d6a13d1bd059
+  languageName: node
+  linkType: hard
+
+"queue-microtask@npm:^1.2.2":
+  version: 1.2.3
+  resolution: "queue-microtask@npm:1.2.3"
+  checksum: 10/72900df0616e473e824202113c3df6abae59150dfb73ed13273503127235320e9c8ca4aaaaccfd58cf417c6ca92a6e68ee9a5c3182886ae949a768639b388a7b
+  languageName: node
+  linkType: hard
+
+"r-json@npm:^1.2.10":
+  version: 1.3.1
+  resolution: "r-json@npm:1.3.1"
+  dependencies:
+    w-json: "npm:1.3.10"
+  checksum: 10/dc5b6e6fc636e0f72e0ef5601e346976d63716dcbf2460a1dc5deaa6cfa783619e2ea5763d15a81176c87f2c9d259104399c5896a9f2f6aa5df86f0b6a9bd892
+  languageName: node
+  linkType: hard
+
+"randombytes@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "randombytes@npm:2.1.0"
+  dependencies:
+    safe-buffer: "npm:^5.1.0"
+  checksum: 10/4efd1ad3d88db77c2d16588dc54c2b52fd2461e70fe5724611f38d283857094fe09040fa2c9776366803c3152cf133171b452ef717592b65631ce5dc3a2bdafc
+  languageName: node
+  linkType: hard
+
+"react-aria-components@npm:1.20.0":
+  version: 1.20.0
+  resolution: "react-aria-components@npm:1.20.0"
+  dependencies:
+    "@internationalized/date": "npm:^3.12.3"
+    "@internationalized/string": "npm:^3.2.10"
+    "@react-types/shared": "npm:^3.36.1"
+    "@swc/helpers": "npm:^0.5.0"
+    client-only: "npm:^0.0.1"
+    react-aria: "npm:3.51.0"
+    react-stately: "npm:3.49.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 10/195cc87bf8b09c977ad217aa18ea2eea7c96637ece9a9ec8e3520c960161ce151df5ee7978e92d5d0b549a5ef4926c114c5deda737fec6c54f31385d10bb498a
+  languageName: node
+  linkType: hard
+
+"react-aria@npm:3.51.0":
+  version: 3.51.0
+  resolution: "react-aria@npm:3.51.0"
+  dependencies:
+    "@internationalized/date": "npm:^3.12.3"
+    "@internationalized/number": "npm:^3.6.7"
+    "@internationalized/string": "npm:^3.2.10"
+    "@react-types/shared": "npm:^3.36.1"
+    "@swc/helpers": "npm:^0.5.0"
+    aria-hidden: "npm:^1.2.3"
+    clsx: "npm:^2.0.0"
+    react-stately: "npm:3.49.0"
+    use-sync-external-store: "npm:^1.6.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 10/32d0e236b7689765d273960fbff6df1e75971cce0a80bf73b14a90f6ee68bfc0dcb2b5c056a69b8fe78fb79f114e52726bcc47c732f5a84f7adfbedf60b8a1ef
+  languageName: node
+  linkType: hard
+
+"react-docgen-typescript@npm:^2.2.2":
+  version: 2.4.0
+  resolution: "react-docgen-typescript@npm:2.4.0"
+  peerDependencies:
+    typescript: ">= 4.3.x"
+  checksum: 10/81e45bc012150dee50a9919a44597a436d45168f7a83febbbfef134c07e71c1a2f09fb6e1fc040f18bd6747f37b46d463a2b4a30177f6137e4ff49570bcaf253
+  languageName: node
+  linkType: hard
+
+"react-docgen@npm:^8.0.2":
+  version: 8.0.3
+  resolution: "react-docgen@npm:8.0.3"
+  dependencies:
+    "@babel/core": "npm:^7.28.0"
+    "@babel/traverse": "npm:^7.28.0"
+    "@babel/types": "npm:^7.28.2"
+    "@types/babel__core": "npm:^7.20.5"
+    "@types/babel__traverse": "npm:^7.20.7"
+    "@types/doctrine": "npm:^0.0.9"
+    "@types/resolve": "npm:^1.20.2"
+    doctrine: "npm:^3.0.0"
+    resolve: "npm:^1.22.1"
+    strip-indent: "npm:^4.0.0"
+  checksum: 10/d1dbd55dba6a1b50f0a44f1b30dc88b2714f89e3d0190681dfe78fd7a97056824beb8438827f424d9645d5d9244ebab0fa84008a57b62f0bd9e27788ff1c3954
+  languageName: node
+  linkType: hard
+
+"react-dom@npm:^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0, react-dom@npm:^19.2.8":
+  version: 19.2.8
+  resolution: "react-dom@npm:19.2.8"
+  dependencies:
+    scheduler: "npm:^0.27.0"
+  peerDependencies:
+    react: ^19.2.8
+  checksum: 10/fb45d500a8615a36d71a821213a3d4bfe32a70aa1d04ce17d8791dd10c4ef0281e7fdd46694e1112f0f2dcf58df89d12043a13228be9788458aa82f4885a9cdc
+  languageName: node
+  linkType: hard
+
+"react-icons@npm:5.7.0":
+  version: 5.7.0
+  resolution: "react-icons@npm:5.7.0"
+  peerDependencies:
+    react: "*"
+  checksum: 10/db064cfe8e6456ba315d960debc50d3535ec794376c059bcdd79e20985d3c77d58a24c8cc567608695b10accd62b6c3c422821569b9c3c94d0811fe952c31e8c
+  languageName: node
+  linkType: hard
+
+"react-is@npm:^16.13.1":
+  version: 16.13.1
+  resolution: "react-is@npm:16.13.1"
+  checksum: 10/5aa564a1cde7d391ac980bedee21202fc90bdea3b399952117f54fb71a932af1e5902020144fb354b4690b2414a0c7aafe798eb617b76a3d441d956db7726fdf
+  languageName: node
+  linkType: hard
+
+"react-is@npm:^17.0.1":
+  version: 17.0.2
+  resolution: "react-is@npm:17.0.2"
+  checksum: 10/73b36281e58eeb27c9cc6031301b6ae19ecdc9f18ae2d518bdb39b0ac564e65c5779405d623f1df9abf378a13858b79442480244bd579968afc1faf9a2ce5e05
+  languageName: node
+  linkType: hard
+
+"react-stately@npm:3.49.0":
+  version: 3.49.0
+  resolution: "react-stately@npm:3.49.0"
+  dependencies:
+    "@internationalized/date": "npm:^3.12.3"
+    "@internationalized/number": "npm:^3.6.7"
+    "@internationalized/string": "npm:^3.2.10"
+    "@react-types/shared": "npm:^3.36.1"
+    "@swc/helpers": "npm:^0.5.0"
+    use-sync-external-store: "npm:^1.6.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 10/f8296a3ec7845a3a6544225fcaf73fe7077ac3041d043e51bd20ca0da2741bac3166df57e429154c060fe9d8df19059840893dd1a0e3006cd025a0963edd0b7c
+  languageName: node
+  linkType: hard
+
+"react@npm:^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0, react@npm:^19.2.8":
+  version: 19.2.8
+  resolution: "react@npm:19.2.8"
+  checksum: 10/a3c697798035e295ca9e51591d3a8700824535cb8c070fac1f8abbe69717ceb99108cbc4ba7b31a606806f336b1eba705705f63b9d39ace198fe51e8990ac843
+  languageName: node
+  linkType: hard
+
+"readdirp@npm:^4.0.1":
+  version: 4.1.2
+  resolution: "readdirp@npm:4.1.2"
+  checksum: 10/7b817c265940dba90bb9c94d82920d76c3a35ea2d67f9f9d8bd936adcfe02d50c802b14be3dd2e725e002dddbe2cc1c7a0edfb1bc3a365c9dfd5a61e612eea1e
+  languageName: node
+  linkType: hard
+
+"recast@npm:^0.23.5":
+  version: 0.23.21
+  resolution: "recast@npm:0.23.21"
+  dependencies:
+    ast-types: "npm:^0.16.1"
+    esprima: "npm:~4.0.0"
+    source-map: "npm:~0.6.1"
+    tiny-invariant: "npm:^1.3.3"
+    tslib: "npm:^2.0.1"
+  checksum: 10/0e6bae12218463e8bd0e29462d340a6d7999c70b9fb349da0ddabae5915565cf7fb00ca2c74cd88469a334d51aad5caae0b956b6394768e423c86fbd7187784e
+  languageName: node
+  linkType: hard
+
+"redent@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "redent@npm:3.0.0"
+  dependencies:
+    indent-string: "npm:^4.0.0"
+    strip-indent: "npm:^3.0.0"
+  checksum: 10/fa1ef20404a2d399235e83cc80bd55a956642e37dd197b4b612ba7327bf87fa32745aeb4a1634b2bab25467164ab4ed9c15be2c307923dd08b0fe7c52431ae6b
+  languageName: node
+  linkType: hard
+
+"reflect-metadata@npm:0.2.2":
+  version: 0.2.2
+  resolution: "reflect-metadata@npm:0.2.2"
+  checksum: 10/1c93f9ac790fea1c852fde80c91b2760420069f4862f28e6fae0c00c6937a56508716b0ed2419ab02869dd488d123c4ab92d062ae84e8739ea7417fae10c4745
+  languageName: node
+  linkType: hard
+
+"reflect.getprototypeof@npm:^1.0.10, reflect.getprototypeof@npm:^1.0.9":
+  version: 1.0.10
+  resolution: "reflect.getprototypeof@npm:1.0.10"
+  dependencies:
+    call-bind: "npm:^1.0.8"
+    define-properties: "npm:^1.2.1"
+    es-abstract: "npm:^1.23.9"
+    es-errors: "npm:^1.3.0"
+    es-object-atoms: "npm:^1.0.0"
+    get-intrinsic: "npm:^1.2.7"
+    get-proto: "npm:^1.0.1"
+    which-builtin-type: "npm:^1.2.1"
+  checksum: 10/80a4e2be716f4fe46a89a08ccad0863b47e8ce0f49616cab2d65dab0fbd53c6fdba0f52935fd41d37a2e4e22355c272004f920d63070de849f66eea7aeb4a081
+  languageName: node
+  linkType: hard
+
+"regexp.prototype.flags@npm:^1.5.3, regexp.prototype.flags@npm:^1.5.4":
+  version: 1.5.4
+  resolution: "regexp.prototype.flags@npm:1.5.4"
+  dependencies:
+    call-bind: "npm:^1.0.8"
+    define-properties: "npm:^1.2.1"
+    es-errors: "npm:^1.3.0"
+    get-proto: "npm:^1.0.1"
+    gopd: "npm:^1.2.0"
+    set-function-name: "npm:^2.0.2"
+  checksum: 10/8ab897ca445968e0b96f6237641510f3243e59c180ee2ee8d83889c52ff735dd1bf3657fcd36db053e35e1d823dd53f2565d0b8021ea282c9fe62401c6c3bd6d
+  languageName: node
+  linkType: hard
+
+"require-directory@npm:^2.1.1":
+  version: 2.1.1
+  resolution: "require-directory@npm:2.1.1"
+  checksum: 10/a72468e2589270d91f06c7d36ec97a88db53ae5d6fe3787fadc943f0b0276b10347f89b363b2a82285f650bdcc135ad4a257c61bdd4d00d6df1fa24875b0ddaf
+  languageName: node
+  linkType: hard
+
+"require-from-string@npm:^2.0.2":
+  version: 2.0.2
+  resolution: "require-from-string@npm:2.0.2"
+  checksum: 10/839a3a890102a658f4cb3e7b2aa13a1f80a3a976b512020c3d1efc418491c48a886b6e481ea56afc6c4cb5eef678f23b2a4e70575e7534eccadf5e30ed2e56eb
+  languageName: node
+  linkType: hard
+
+"resolve-from@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "resolve-from@npm:4.0.0"
+  checksum: 10/91eb76ce83621eea7bbdd9b55121a5c1c4a39e54a9ce04a9ad4517f102f8b5131c2cf07622c738a6683991bf54f2ce178f5a42803ecbd527ddc5105f362cc9e3
+  languageName: node
+  linkType: hard
+
+"resolve@npm:^1.22.1, resolve@npm:^1.22.8":
+  version: 1.22.12
+  resolution: "resolve@npm:1.22.12"
+  dependencies:
+    es-errors: "npm:^1.3.0"
+    is-core-module: "npm:^2.16.1"
+    path-parse: "npm:^1.0.7"
+    supports-preserve-symlinks-flag: "npm:^1.0.0"
+  bin:
+    resolve: bin/resolve
+  checksum: 10/1d2a081e4b7198e2a70abd7bbbf8aea5380c2d074b6c870035aab50ebfb7312b6492b3588e752faef83a75147862a3d3e09b222bc9afd536804181fd3a515ef9
+  languageName: node
+  linkType: hard
+
+"resolve@npm:^2.0.0-next.5, resolve@npm:^2.0.0-next.6":
+  version: 2.0.0-next.7
+  resolution: "resolve@npm:2.0.0-next.7"
+  dependencies:
+    es-errors: "npm:^1.3.0"
+    is-core-module: "npm:^2.16.2"
+    node-exports-info: "npm:^1.6.0"
+    object-keys: "npm:^1.1.1"
+    path-parse: "npm:^1.0.7"
+    supports-preserve-symlinks-flag: "npm:^1.0.0"
+  bin:
+    resolve: bin/resolve
+  checksum: 10/0a6fbd452518c128355a72e3773e65d047128bbc5045d954eca7f911683abfb1b0177494ff8734ca74f2a7a4e3a6bfad9cd6d19a2bde0fe9851025a2734d4a0f
+  languageName: node
+  linkType: hard
+
+"resolve@patch:resolve@npm%3A^1.22.1#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.8#optional!builtin<compat/resolve>":
+  version: 1.22.12
+  resolution: "resolve@patch:resolve@npm%3A1.22.12#optional!builtin<compat/resolve>::version=1.22.12&hash=c3c19d"
+  dependencies:
+    es-errors: "npm:^1.3.0"
+    is-core-module: "npm:^2.16.1"
+    path-parse: "npm:^1.0.7"
+    supports-preserve-symlinks-flag: "npm:^1.0.0"
+  bin:
+    resolve: bin/resolve
+  checksum: 10/f80ad2c2b6820331cbe079198a184ffce322cfeca140065118066276bc08b03d5fa2c1ce652aeb584ec74050d1f656f46f034cc0dd9300452c5ab7866907f8c0
+  languageName: node
+  linkType: hard
+
+"resolve@patch:resolve@npm%3A^2.0.0-next.5#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^2.0.0-next.6#optional!builtin<compat/resolve>":
+  version: 2.0.0-next.7
+  resolution: "resolve@patch:resolve@npm%3A2.0.0-next.7#optional!builtin<compat/resolve>::version=2.0.0-next.7&hash=c3c19d"
+  dependencies:
+    es-errors: "npm:^1.3.0"
+    is-core-module: "npm:^2.16.2"
+    node-exports-info: "npm:^1.6.0"
+    object-keys: "npm:^1.1.1"
+    path-parse: "npm:^1.0.7"
+    supports-preserve-symlinks-flag: "npm:^1.0.0"
+  bin:
+    resolve: bin/resolve
+  checksum: 10/2c6dd4194c8aa900db299020fcad253239c670ea82a65c8387f1d2885e8dcf6742b64c439e3c811e046a5252eba94f2092b7867e34b7f895e733be48d575192b
+  languageName: node
+  linkType: hard
+
+"reusify@npm:^1.0.4":
+  version: 1.1.0
+  resolution: "reusify@npm:1.1.0"
+  checksum: 10/af47851b547e8a8dc89af144fceee17b80d5beaf5e6f57ed086432d79943434ff67ca526e92275be6f54b6189f6920a24eace75c2657eed32d02c400312b21ec
+  languageName: node
+  linkType: hard
+
+"rolldown@npm:~1.2.4":
+  version: 1.2.6
+  resolution: "rolldown@npm:1.2.6"
+  dependencies:
+    "@oxc-project/types": "npm:=0.147.0"
+    "@rolldown/binding-android-arm-eabi": "npm:1.2.6"
+    "@rolldown/binding-android-arm64": "npm:1.2.6"
+    "@rolldown/binding-darwin-arm64": "npm:1.2.6"
+    "@rolldown/binding-darwin-x64": "npm:1.2.6"
+    "@rolldown/binding-freebsd-x64": "npm:1.2.6"
+    "@rolldown/binding-linux-arm-gnueabihf": "npm:1.2.6"
+    "@rolldown/binding-linux-arm64-gnu": "npm:1.2.6"
+    "@rolldown/binding-linux-arm64-musl": "npm:1.2.6"
+    "@rolldown/binding-linux-ppc64-gnu": "npm:1.2.6"
+    "@rolldown/binding-linux-s390x-gnu": "npm:1.2.6"
+    "@rolldown/binding-linux-x64-gnu": "npm:1.2.6"
+    "@rolldown/binding-linux-x64-musl": "npm:1.2.6"
+    "@rolldown/binding-openharmony-arm64": "npm:1.2.6"
+    "@rolldown/binding-win32-arm64-msvc": "npm:1.2.6"
+    "@rolldown/binding-win32-x64-msvc": "npm:1.2.6"
+    "@rolldown/pluginutils": "npm:^1.0.0"
+  dependenciesMeta:
+    "@rolldown/binding-android-arm-eabi":
+      optional: true
+    "@rolldown/binding-android-arm64":
+      optional: true
+    "@rolldown/binding-darwin-arm64":
+      optional: true
+    "@rolldown/binding-darwin-x64":
+      optional: true
+    "@rolldown/binding-freebsd-x64":
+      optional: true
+    "@rolldown/binding-linux-arm-gnueabihf":
+      optional: true
+    "@rolldown/binding-linux-arm64-gnu":
+      optional: true
+    "@rolldown/binding-linux-arm64-musl":
+      optional: true
+    "@rolldown/binding-linux-ppc64-gnu":
+      optional: true
+    "@rolldown/binding-linux-s390x-gnu":
+      optional: true
+    "@rolldown/binding-linux-x64-gnu":
+      optional: true
+    "@rolldown/binding-linux-x64-musl":
+      optional: true
+    "@rolldown/binding-openharmony-arm64":
+      optional: true
+    "@rolldown/binding-win32-arm64-msvc":
+      optional: true
+    "@rolldown/binding-win32-x64-msvc":
+      optional: true
+  bin:
+    rolldown: ./bin/cli.mjs
+  checksum: 10/29bff46d93bc551732503e4a34786fec5f69aed7186a9617b701fbfbb6f91415d54ce31af6b0dcd11a40eb296c90b47bb7c7d04fe9c1f912decb2f02aacfb65a
+  languageName: node
+  linkType: hard
+
+"rollup-plugin-peer-deps-external@npm:^2.2.4":
+  version: 2.2.4
+  resolution: "rollup-plugin-peer-deps-external@npm:2.2.4"
+  peerDependencies:
+    rollup: "*"
+  checksum: 10/49b7b3f5ca14550146249b5fd86043bffb82a2c40750c80a1845c3b694fadde58435bae0c912ad8cb1c1ef6c1f8ad64914153793391cb13d52e2bc3aa2ac61e2
+  languageName: node
+  linkType: hard
+
+"rollup@npm:^4.63.0":
+  version: 4.63.0
+  resolution: "rollup@npm:4.63.0"
+  dependencies:
+    "@napi-rs/lzma-linux-x64-gnu": "npm:1.5.1"
+    "@rollup/rollup-android-arm-eabi": "npm:4.63.0"
+    "@rollup/rollup-android-arm64": "npm:4.63.0"
+    "@rollup/rollup-darwin-arm64": "npm:4.63.0"
+    "@rollup/rollup-darwin-x64": "npm:4.63.0"
+    "@rollup/rollup-freebsd-arm64": "npm:4.63.0"
+    "@rollup/rollup-freebsd-x64": "npm:4.63.0"
+    "@rollup/rollup-linux-arm-gnueabihf": "npm:4.63.0"
+    "@rollup/rollup-linux-arm-musleabihf": "npm:4.63.0"
+    "@rollup/rollup-linux-arm64-gnu": "npm:4.63.0"
+    "@rollup/rollup-linux-arm64-musl": "npm:4.63.0"
+    "@rollup/rollup-linux-loong64-gnu": "npm:4.63.0"
+    "@rollup/rollup-linux-loong64-musl": "npm:4.63.0"
+    "@rollup/rollup-linux-ppc64-gnu": "npm:4.63.0"
+    "@rollup/rollup-linux-ppc64-musl": "npm:4.63.0"
+    "@rollup/rollup-linux-riscv64-gnu": "npm:4.63.0"
+    "@rollup/rollup-linux-riscv64-musl": "npm:4.63.0"
+    "@rollup/rollup-linux-s390x-gnu": "npm:4.63.0"
+    "@rollup/rollup-linux-x64-gnu": "npm:4.63.0"
+    "@rollup/rollup-linux-x64-musl": "npm:4.63.0"
+    "@rollup/rollup-openbsd-x64": "npm:4.63.0"
+    "@rollup/rollup-openharmony-arm64": "npm:4.63.0"
+    "@rollup/rollup-win32-arm64-msvc": "npm:4.63.0"
+    "@rollup/rollup-win32-ia32-msvc": "npm:4.63.0"
+    "@rollup/rollup-win32-x64-gnu": "npm:4.63.0"
+    "@rollup/rollup-win32-x64-msvc": "npm:4.63.0"
+    "@types/estree": "npm:1.0.9"
+    fsevents: "npm:~2.3.2"
+  dependenciesMeta:
+    "@napi-rs/lzma-linux-x64-gnu":
+      optional: true
+    "@rollup/rollup-android-arm-eabi":
+      optional: true
+    "@rollup/rollup-android-arm64":
+      optional: true
+    "@rollup/rollup-darwin-arm64":
+      optional: true
+    "@rollup/rollup-darwin-x64":
+      optional: true
+    "@rollup/rollup-freebsd-arm64":
+      optional: true
+    "@rollup/rollup-freebsd-x64":
+      optional: true
+    "@rollup/rollup-linux-arm-gnueabihf":
+      optional: true
+    "@rollup/rollup-linux-arm-musleabihf":
+      optional: true
+    "@rollup/rollup-linux-arm64-gnu":
+      optional: true
+    "@rollup/rollup-linux-arm64-musl":
+      optional: true
+    "@rollup/rollup-linux-loong64-gnu":
+      optional: true
+    "@rollup/rollup-linux-loong64-musl":
+      optional: true
+    "@rollup/rollup-linux-ppc64-gnu":
+      optional: true
+    "@rollup/rollup-linux-ppc64-musl":
+      optional: true
+    "@rollup/rollup-linux-riscv64-gnu":
+      optional: true
+    "@rollup/rollup-linux-riscv64-musl":
+      optional: true
+    "@rollup/rollup-linux-s390x-gnu":
+      optional: true
+    "@rollup/rollup-linux-x64-gnu":
+      optional: true
+    "@rollup/rollup-linux-x64-musl":
+      optional: true
+    "@rollup/rollup-openbsd-x64":
+      optional: true
+    "@rollup/rollup-openharmony-arm64":
+      optional: true
+    "@rollup/rollup-win32-arm64-msvc":
+      optional: true
+    "@rollup/rollup-win32-ia32-msvc":
+      optional: true
+    "@rollup/rollup-win32-x64-gnu":
+      optional: true
+    "@rollup/rollup-win32-x64-msvc":
+      optional: true
+    fsevents:
+      optional: true
+  bin:
+    rollup: dist/bin/rollup
+  checksum: 10/c14c08bd0a390fc3884567991b6697a4af83f1d8ded2da544293c561b2219ab8c2857b99de7b3dc97944a941b8264ed1a2be46161fe0285cb224faf5fa9462d7
+  languageName: node
+  linkType: hard
+
+"root-workspace-0b6124@workspace:.":
+  version: 0.0.0-use.local
+  resolution: "root-workspace-0b6124@workspace:."
+  dependencies:
+    "@cratis/arc": "npm:22.3.0"
+    "@cratis/arc.react": "npm:22.3.0"
+    "@cratis/arc.vite": "npm:22.3.0"
+    "@eslint/eslintrc": "npm:^3.3.6"
+    "@eslint/js": "npm:^10.0.1"
+    "@rollup/plugin-node-resolve": "npm:^16.0.3"
+    "@rollup/plugin-typescript": "npm:^12.3.0"
+    "@storybook/addon-a11y": "npm:^10.5.10"
+    "@storybook/addon-docs": "npm:^10.5.10"
+    "@storybook/addon-vitest": "npm:^10.5.10"
+    "@storybook/react": "npm:^10.5.10"
+    "@storybook/react-vite": "npm:^10.5.10"
+    "@tailwindcss/postcss": "npm:^4.3.3"
+    "@tailwindcss/vite": "npm:^4.3.3"
+    "@tony.ganchev/eslint-plugin-header": "npm:^3.4.4"
+    "@types/chai": "npm:^5.2.3"
+    "@types/chai-as-promised": "npm:^8.0.2"
+    "@types/mocha": "npm:^10.0.10"
+    "@types/node": "npm:^26.3.0"
+    "@types/react": "npm:^19.2.18"
+    "@types/react-dom": "npm:^19.2.5"
+    "@types/sinon": "npm:^22.0.0"
+    "@types/sinon-chai": "npm:^4.0.0"
+    "@typescript-eslint/eslint-plugin": "npm:^8.68.0"
+    "@typescript-eslint/parser": "npm:^8.68.0"
+    "@vitejs/plugin-react": "npm:^6.1.0"
+    "@vitest/browser-playwright": "npm:4.1.11"
+    "@vitest/coverage-v8": "npm:^4.1.11"
+    autoprefixer: "npm:^10.5.4"
+    axe-core: "npm:^4.13.0"
+    chai: "npm:^6.2.2"
+    chai-as-promised: "npm:^8.0.2"
+    edit-json-file: "npm:^1.8.1"
+    eslint: "npm:^10.9.1"
+    eslint-config-prettier: "npm:^10.1.8"
+    eslint-plugin-import: "npm:^2.32.0"
+    eslint-plugin-no-null: "npm:^1.0.2"
+    eslint-plugin-prettier: "npm:^5.5.6"
+    eslint-plugin-react: "npm:^7.37.5"
+    glob: "npm:^13.0.6"
+    globals: "npm:^17.11.0"
+    jsdom: "npm:^30.0.1"
+    mocha: "npm:^11.8.0"
+    module-alias: "npm:^2.3.4"
+    npm-check-updates: "npm:^23.1.0"
+    playwright: "npm:^1.62.1"
+    postcss: "npm:^8.5.26"
+    prettier: "npm:^3.9.6"
+    react: "npm:^19.2.8"
+    react-dom: "npm:^19.2.8"
+    reflect-metadata: "npm:0.2.2"
+    rollup: "npm:^4.63.0"
+    rollup-plugin-peer-deps-external: "npm:^2.2.4"
+    sinon: "npm:^22.1.0"
+    sinon-chai: "npm:^4.0.1"
+    storybook: "npm:^10.5.10"
+    tailwindcss: "npm:^4.3.3"
+    ts-node: "npm:^10.9.2"
+    tsyringe: "npm:4.10.0"
+    typescript: "npm:^6.0.3"
+    typescript-eslint: "npm:^8.68.0"
+    vite: "npm:^8.2.2"
+    vite-plugin-commonjs: "npm:^0.10.4"
+    vite-tsconfig-paths: "npm:^6.1.1"
+    vitest: "npm:^4.1.11"
+  languageName: unknown
+  linkType: soft
+
+"run-applescript@npm:^7.0.0":
+  version: 7.1.0
+  resolution: "run-applescript@npm:7.1.0"
+  checksum: 10/8659fb5f2717b2b37a68cbfe5f678254cf24b5a82a6df3372b180c80c7c137dcd757a4166c3887e459f59a090ca414e8ea7ca97cf3ee5123db54b3b4006d7b7a
+  languageName: node
+  linkType: hard
+
+"run-parallel@npm:^1.1.9":
+  version: 1.2.0
+  resolution: "run-parallel@npm:1.2.0"
+  dependencies:
+    queue-microtask: "npm:^1.2.2"
+  checksum: 10/cb4f97ad25a75ebc11a8ef4e33bb962f8af8516bb2001082ceabd8902e15b98f4b84b4f8a9b222e5d57fc3bd1379c483886ed4619367a7680dad65316993021d
+  languageName: node
+  linkType: hard
+
+"rxjs@npm:^7.8.2":
+  version: 7.8.2
+  resolution: "rxjs@npm:7.8.2"
+  dependencies:
+    tslib: "npm:^2.1.0"
+  checksum: 10/03dff09191356b2b87d94fbc1e97c4e9eb3c09d4452399dddd451b09c2f1ba8d56925a40af114282d7bc0c6fe7514a2236ca09f903cf70e4bbf156650dddb49d
+  languageName: node
+  linkType: hard
+
+"safe-array-concat@npm:^1.1.3":
+  version: 1.1.4
+  resolution: "safe-array-concat@npm:1.1.4"
+  dependencies:
+    call-bind: "npm:^1.0.9"
+    call-bound: "npm:^1.0.4"
+    get-intrinsic: "npm:^1.3.0"
+    has-symbols: "npm:^1.1.0"
+    isarray: "npm:^2.0.5"
+  checksum: 10/89e6a4d2759225515e5ea6b9f21a62dfad74c3aef45c769c9bf000b1c681f15568183e62935711ec9d10c35712c4f21f0d6acb094bd35138608b4a57fa64667d
+  languageName: node
+  linkType: hard
+
+"safe-buffer@npm:^5.1.0":
+  version: 5.2.1
+  resolution: "safe-buffer@npm:5.2.1"
+  checksum: 10/32872cd0ff68a3ddade7a7617b8f4c2ae8764d8b7d884c651b74457967a9e0e886267d3ecc781220629c44a865167b61c375d2da6c720c840ecd73f45d5d9451
+  languageName: node
+  linkType: hard
+
+"safe-push-apply@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "safe-push-apply@npm:1.0.0"
+  dependencies:
+    es-errors: "npm:^1.3.0"
+    isarray: "npm:^2.0.5"
+  checksum: 10/2bd4e53b6694f7134b9cf93631480e7fafc8637165f0ee91d5a4af5e7f33d37de9562d1af5021178dd4217d0230cde8d6530fa28cfa1ebff9a431bf8fff124b4
+  languageName: node
+  linkType: hard
+
+"safe-regex-test@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "safe-regex-test@npm:1.1.0"
+  dependencies:
+    call-bound: "npm:^1.0.2"
+    es-errors: "npm:^1.3.0"
+    is-regex: "npm:^1.2.1"
+  checksum: 10/ebdb61f305bf4756a5b023ad86067df5a11b26898573afe9e52a548a63c3bd594825d9b0e2dde2eb3c94e57e0e04ac9929d4107c394f7b8e56a4613bed46c69a
+  languageName: node
+  linkType: hard
+
+"saxes@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "saxes@npm:6.0.0"
+  dependencies:
+    xmlchars: "npm:^2.2.0"
+  checksum: 10/97b50daf6ca3a153e89842efa18a862e446248296622b7473c169c84c823ee8a16e4a43bac2f73f11fc8cb9168c73fbb0d73340f26552bac17970e9052367aa9
+  languageName: node
+  linkType: hard
+
+"scheduler@npm:^0.27.0":
+  version: 0.27.0
+  resolution: "scheduler@npm:0.27.0"
+  checksum: 10/eab3c3a8373195173e59c147224fc30dabe6dd453f248f5e610e8458512a5a2ee3a06465dc400ebfe6d35c9f5b7f3bb6b2e41c88c86fd177c25a73e7286a1e06
+  languageName: node
+  linkType: hard
+
+"semver@npm:^6.3.1":
+  version: 6.3.1
+  resolution: "semver@npm:6.3.1"
+  bin:
+    semver: bin/semver.js
+  checksum: 10/1ef3a85bd02a760c6ef76a45b8c1ce18226de40831e02a00bad78485390b98b6ccaa31046245fc63bba4a47a6a592b6c7eedc65cc47126e60489f9cc1ce3ed7e
+  languageName: node
+  linkType: hard
+
+"semver@npm:^7.3.5, semver@npm:^7.5.3, semver@npm:^7.7.3":
+  version: 7.8.5
+  resolution: "semver@npm:7.8.5"
+  bin:
+    semver: bin/semver.js
+  checksum: 10/9b01d2ff11e6e4a4539b7ca3c5f280c8704cb397a28504469f2ed4f00ad2194748d756647362a9712fff30984d15772ab7f083108c2fb508e2096ae9e708f22c
+  languageName: node
+  linkType: hard
+
+"serialize-javascript@npm:^6.0.2":
+  version: 6.0.2
+  resolution: "serialize-javascript@npm:6.0.2"
+  dependencies:
+    randombytes: "npm:^2.1.0"
+  checksum: 10/445a420a6fa2eaee4b70cbd884d538e259ab278200a2ededd73253ada17d5d48e91fb1f4cd224a236ab62ea7ba0a70c6af29fc93b4f3d3078bf7da1c031fde58
+  languageName: node
+  linkType: hard
+
+"set-function-length@npm:^1.2.2":
+  version: 1.2.2
+  resolution: "set-function-length@npm:1.2.2"
+  dependencies:
+    define-data-property: "npm:^1.1.4"
+    es-errors: "npm:^1.3.0"
+    function-bind: "npm:^1.1.2"
+    get-intrinsic: "npm:^1.2.4"
+    gopd: "npm:^1.0.1"
+    has-property-descriptors: "npm:^1.0.2"
+  checksum: 10/505d62b8e088468917ca4e3f8f39d0e29f9a563b97dbebf92f4bd2c3172ccfb3c5b8e4566d5fcd00784a00433900e7cb8fbc404e2dbd8c3818ba05bb9d4a8a6d
+  languageName: node
+  linkType: hard
+
+"set-function-name@npm:^2.0.2":
+  version: 2.0.2
+  resolution: "set-function-name@npm:2.0.2"
+  dependencies:
+    define-data-property: "npm:^1.1.4"
+    es-errors: "npm:^1.3.0"
+    functions-have-names: "npm:^1.2.3"
+    has-property-descriptors: "npm:^1.0.2"
+  checksum: 10/c7614154a53ebf8c0428a6c40a3b0b47dac30587c1a19703d1b75f003803f73cdfa6a93474a9ba678fa565ef5fbddc2fae79bca03b7d22ab5fd5163dbe571a74
+  languageName: node
+  linkType: hard
+
+"set-proto@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "set-proto@npm:1.0.0"
+  dependencies:
+    dunder-proto: "npm:^1.0.1"
+    es-errors: "npm:^1.3.0"
+    es-object-atoms: "npm:^1.0.0"
+  checksum: 10/b87f8187bca595ddc3c0721ece4635015fd9d7cb294e6dd2e394ce5186a71bbfa4dc8a35010958c65e43ad83cde09642660e61a952883c24fd6b45ead15f045c
+  languageName: node
+  linkType: hard
+
+"set-value@npm:^4.1.0":
+  version: 4.1.0
+  resolution: "set-value@npm:4.1.0"
+  dependencies:
+    is-plain-object: "npm:^2.0.4"
+    is-primitive: "npm:^3.0.1"
+  checksum: 10/67eebb0d78be89242478daf8ab5357c59a35add1d7bdccdb56236e6004128a79bdf298c952e286b60b63ed17b24dcdb399734fbdacc9b76e7fd2e3e01546a42e
+  languageName: node
+  linkType: hard
+
+"shebang-command@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "shebang-command@npm:2.0.0"
+  dependencies:
+    shebang-regex: "npm:^3.0.0"
+  checksum: 10/6b52fe87271c12968f6a054e60f6bde5f0f3d2db483a1e5c3e12d657c488a15474121a1d55cd958f6df026a54374ec38a4a963988c213b7570e1d51575cea7fa
+  languageName: node
+  linkType: hard
+
+"shebang-regex@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "shebang-regex@npm:3.0.0"
+  checksum: 10/1a2bcae50de99034fcd92ad4212d8e01eedf52c7ec7830eedcf886622804fe36884278f2be8be0ea5fde3fd1c23911643a4e0f726c8685b61871c8908af01222
+  languageName: node
+  linkType: hard
+
+"side-channel-list@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "side-channel-list@npm:1.0.1"
+  dependencies:
+    es-errors: "npm:^1.3.0"
+    object-inspect: "npm:^1.13.4"
+  checksum: 10/3499671cd52adaee739eac1e14d07530b8e3530192741aeb05e7fe4ad1b51d1368ceea2cd3c21b0f62b05410a5c70a7c4d997ba4b143303ef73d0c65dfd1c252
+  languageName: node
+  linkType: hard
+
+"side-channel-map@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "side-channel-map@npm:1.0.1"
+  dependencies:
+    call-bound: "npm:^1.0.2"
+    es-errors: "npm:^1.3.0"
+    get-intrinsic: "npm:^1.2.5"
+    object-inspect: "npm:^1.13.3"
+  checksum: 10/5771861f77feefe44f6195ed077a9e4f389acc188f895f570d56445e251b861754b547ea9ef73ecee4e01fdada6568bfe9020d2ec2dfc5571e9fa1bbc4a10615
+  languageName: node
+  linkType: hard
+
+"side-channel-weakmap@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "side-channel-weakmap@npm:1.0.2"
+  dependencies:
+    call-bound: "npm:^1.0.2"
+    es-errors: "npm:^1.3.0"
+    get-intrinsic: "npm:^1.2.5"
+    object-inspect: "npm:^1.13.3"
+    side-channel-map: "npm:^1.0.1"
+  checksum: 10/a815c89bc78c5723c714ea1a77c938377ea710af20d4fb886d362b0d1f8ac73a17816a5f6640f354017d7e292a43da9c5e876c22145bac00b76cfb3468001736
+  languageName: node
+  linkType: hard
+
+"side-channel@npm:^1.1.0":
+  version: 1.1.1
+  resolution: "side-channel@npm:1.1.1"
+  dependencies:
+    es-errors: "npm:^1.3.0"
+    object-inspect: "npm:^1.13.4"
+    side-channel-list: "npm:^1.0.1"
+    side-channel-map: "npm:^1.0.1"
+    side-channel-weakmap: "npm:^1.0.2"
+  checksum: 10/5fa6393ff6ad25d8b4a38e9ba095481e498c8ebe5ab78481c1455146255a3d18ca37a6f936595cc671a6149134cdc295bbd2fa017620bdc73cbc7380634fa2fc
+  languageName: node
+  linkType: hard
+
+"siginfo@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "siginfo@npm:2.0.0"
+  checksum: 10/e93ff66c6531a079af8fb217240df01f980155b5dc408d2d7bebc398dd284e383eb318153bf8acd4db3c4fe799aa5b9a641e38b0ba3b1975700b1c89547ea4e7
+  languageName: node
+  linkType: hard
+
+"signal-exit@npm:^4.0.1":
+  version: 4.1.0
+  resolution: "signal-exit@npm:4.1.0"
+  checksum: 10/c9fa63bbbd7431066174a48ba2dd9986dfd930c3a8b59de9c29d7b6854ec1c12a80d15310869ea5166d413b99f041bfa3dd80a7947bcd44ea8e6eb3ffeabfa1f
+  languageName: node
+  linkType: hard
+
+"sinon-chai@npm:^4.0.1":
+  version: 4.0.1
+  resolution: "sinon-chai@npm:4.0.1"
+  peerDependencies:
+    chai: ^5.0.0 || ^6.0.0
+    sinon: ">=4.0.0"
+  checksum: 10/cc417d196133353cfd08775a6b259264d06bf8b4dea135de1f601d295726010660f20cbeb601c281504935810fcb7781aef1c56596edc0eaaff57be52717bbc8
+  languageName: node
+  linkType: hard
+
+"sinon@npm:^22.1.0":
+  version: 22.1.0
+  resolution: "sinon@npm:22.1.0"
+  dependencies:
+    "@sinonjs/commons": "npm:^3.0.1"
+    "@sinonjs/fake-timers": "npm:^15.4.0"
+    "@sinonjs/samsam": "npm:^10.0.2"
+    diff: "npm:^9.0.0"
+  checksum: 10/f49455cc9613c80765350a39cc2868ce238c35c5ba738e9075a5113f81951a616850e5ebbe77e19f8494ed24780b6a5d3496300cb1b76c12020f77adc72e0232
+  languageName: node
+  linkType: hard
+
+"sirv@npm:^3.0.2":
+  version: 3.0.2
+  resolution: "sirv@npm:3.0.2"
+  dependencies:
+    "@polka/url": "npm:^1.0.0-next.24"
+    mrmime: "npm:^2.0.0"
+    totalist: "npm:^3.0.0"
+  checksum: 10/259617f4ab57664be6d963f5b27b38a6351d3e91ce70d6726985d087b40efd595fcf7f72ae010babf5e0acb63bcb3e3d6db8de34604da1011be6e28ee32aa15d
+  languageName: node
+  linkType: hard
+
+"source-map-js@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "source-map-js@npm:1.2.1"
+  checksum: 10/ff9d8c8bf096d534a5b7707e0382ef827b4dd360a577d3f34d2b9f48e12c9d230b5747974ee7c607f0df65113732711bb701fe9ece3c7edbd43cb2294d707df3
+  languageName: node
+  linkType: hard
+
+"source-map@npm:~0.6.1":
+  version: 0.6.1
+  resolution: "source-map@npm:0.6.1"
+  checksum: 10/59ef7462f1c29d502b3057e822cdbdae0b0e565302c4dd1a95e11e793d8d9d62006cdc10e0fd99163ca33ff2071360cf50ee13f90440806e7ed57d81cba2f7ff
+  languageName: node
+  linkType: hard
+
+"stackback@npm:0.0.2":
+  version: 0.0.2
+  resolution: "stackback@npm:0.0.2"
+  checksum: 10/2d4dc4e64e2db796de4a3c856d5943daccdfa3dd092e452a1ce059c81e9a9c29e0b9badba91b43ef0d5ff5c04ee62feb3bcc559a804e16faf447bac2d883aa99
+  languageName: node
+  linkType: hard
+
+"std-env@npm:^4.0.0-rc.1":
+  version: 4.2.0
+  resolution: "std-env@npm:4.2.0"
+  checksum: 10/d30c3ae49c5568b4e61dca628eaafe12944dbcfe76980e5b1b1499b48e23f85f1ee01fe2306eeef5964a80b763948bbf2ba40490bc53709f45cf989071c9e4e7
+  languageName: node
+  linkType: hard
+
+"stop-iteration-iterator@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "stop-iteration-iterator@npm:1.1.0"
+  dependencies:
+    es-errors: "npm:^1.3.0"
+    internal-slot: "npm:^1.1.0"
+  checksum: 10/ff36c4db171ee76c936ccfe9541946b77017f12703d4c446652017356816862d3aa029a64e7d4c4ceb484e00ed4a81789333896390d808458638f3a216aa1f41
+  languageName: node
+  linkType: hard
+
+"storybook@npm:^10.5.10":
+  version: 10.5.10
+  resolution: "storybook@npm:10.5.10"
+  dependencies:
+    "@storybook/global": "npm:^5.0.0"
+    "@storybook/icons": "npm:^2.0.2"
+    "@testing-library/dom": "npm:^10.4.1"
+    "@testing-library/jest-dom": "npm:6.9.1"
+    "@testing-library/user-event": "npm:^14.6.1"
+    "@vitest/expect": "npm:3.2.4"
+    "@vitest/spy": "npm:3.2.4"
+    "@webcontainer/env": "npm:^1.1.1"
+    esbuild: "npm:^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0 || ^0.25.0 || ^0.26.0 || ^0.27.0 || ^0.28.0"
+    jsonc-parser: "npm:^3.3.1"
+    open: "npm:^10.2.0"
+    oxc-parser: "npm:^0.127.0"
+    oxc-resolver: "npm:11.21.2"
+    recast: "npm:^0.23.5"
+    semver: "npm:^7.7.3"
+    use-sync-external-store: "npm:^1.5.0"
+    ws: "npm:^8.21.1"
+  peerDependencies:
+    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    prettier: ^2 || ^3
+    vite-plus: ^0.1.15 || ^0.2.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    prettier:
+      optional: true
+    vite-plus:
+      optional: true
+  bin:
+    storybook: ./dist/bin/dispatcher.js
+  checksum: 10/b85093a512ff500a14ad56e950c14baa7cf01b17f4e53e76f0305f7ed6495089d52776a470b49a34ce31d4fbc20f9967021e14d7bc7515220462f979030e7738
+  languageName: node
+  linkType: hard
+
+"string-width-cjs@npm:string-width@^4.2.0, string-width@npm:^4.1.0, string-width@npm:^4.2.0, string-width@npm:^4.2.3":
+  version: 4.2.3
+  resolution: "string-width@npm:4.2.3"
+  dependencies:
+    emoji-regex: "npm:^8.0.0"
+    is-fullwidth-code-point: "npm:^3.0.0"
+    strip-ansi: "npm:^6.0.1"
+  checksum: 10/e52c10dc3fbfcd6c3a15f159f54a90024241d0f149cf8aed2982a2d801d2e64df0bf1dc351cf8e95c3319323f9f220c16e740b06faecd53e2462df1d2b5443fb
+  languageName: node
+  linkType: hard
+
+"string-width@npm:^5.0.1, string-width@npm:^5.1.2":
+  version: 5.1.2
+  resolution: "string-width@npm:5.1.2"
+  dependencies:
+    eastasianwidth: "npm:^0.2.0"
+    emoji-regex: "npm:^9.2.2"
+    strip-ansi: "npm:^7.0.1"
+  checksum: 10/7369deaa29f21dda9a438686154b62c2c5f661f8dda60449088f9f980196f7908fc39fdd1803e3e01541970287cf5deae336798337e9319a7055af89dafa7193
+  languageName: node
+  linkType: hard
+
+"string.prototype.matchall@npm:^4.0.12":
+  version: 4.0.12
+  resolution: "string.prototype.matchall@npm:4.0.12"
+  dependencies:
+    call-bind: "npm:^1.0.8"
+    call-bound: "npm:^1.0.3"
+    define-properties: "npm:^1.2.1"
+    es-abstract: "npm:^1.23.6"
+    es-errors: "npm:^1.3.0"
+    es-object-atoms: "npm:^1.0.0"
+    get-intrinsic: "npm:^1.2.6"
+    gopd: "npm:^1.2.0"
+    has-symbols: "npm:^1.1.0"
+    internal-slot: "npm:^1.1.0"
+    regexp.prototype.flags: "npm:^1.5.3"
+    set-function-name: "npm:^2.0.2"
+    side-channel: "npm:^1.1.0"
+  checksum: 10/e4ab34b9e7639211e6c5e9759adb063028c5c5c4fc32ad967838b2bd1e5ce83a66ae8ec755d24a79302849f090b59194571b2c33471e86e7821b21c0f56df316
+  languageName: node
+  linkType: hard
+
+"string.prototype.repeat@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "string.prototype.repeat@npm:1.0.0"
+  dependencies:
+    define-properties: "npm:^1.1.3"
+    es-abstract: "npm:^1.17.5"
+  checksum: 10/4b1bd91b75fa8fdf0541625184ebe80e445a465ce4253c19c3bccd633898005dadae0f74b85ae72662a53aafb8035bf48f8f5c0755aec09bc106a7f13959d05e
+  languageName: node
+  linkType: hard
+
+"string.prototype.trim@npm:^1.2.10":
+  version: 1.2.11
+  resolution: "string.prototype.trim@npm:1.2.11"
+  dependencies:
+    call-bind: "npm:^1.0.9"
+    call-bound: "npm:^1.0.4"
+    define-data-property: "npm:^1.1.4"
+    define-properties: "npm:^1.2.1"
+    es-abstract: "npm:^1.24.2"
+    es-object-atoms: "npm:^1.1.2"
+    has-property-descriptors: "npm:^1.0.2"
+    safe-regex-test: "npm:^1.1.0"
+  checksum: 10/77c2301fe9f2f2e2085c2a9ab048f9f86b1b95609944e1f16d067186b7ac9121db2dd5bf8d165835891876d750ed325314e3181b8b6829d533f5214d472b3fc4
+  languageName: node
+  linkType: hard
+
+"string.prototype.trimend@npm:^1.0.9":
+  version: 1.0.10
+  resolution: "string.prototype.trimend@npm:1.0.10"
+  dependencies:
+    call-bind: "npm:^1.0.9"
+    call-bound: "npm:^1.0.4"
+    define-properties: "npm:^1.2.1"
+    es-object-atoms: "npm:^1.1.2"
+  checksum: 10/f8a85346be853bbe34490c03f4c3f7adb0b4d5dedb206e4a48a006839fece0843fa97fe9c3222be5fd91ba33cdc7d495970af7a4707d15a62591555bfe5a5e20
+  languageName: node
+  linkType: hard
+
+"string.prototype.trimstart@npm:^1.0.8":
+  version: 1.0.8
+  resolution: "string.prototype.trimstart@npm:1.0.8"
+  dependencies:
+    call-bind: "npm:^1.0.7"
+    define-properties: "npm:^1.2.1"
+    es-object-atoms: "npm:^1.0.0"
+  checksum: 10/160167dfbd68e6f7cb9f51a16074eebfce1571656fc31d40c3738ca9e30e35496f2c046fe57b6ad49f65f238a152be8c86fd9a2dd58682b5eba39dad995b3674
+  languageName: node
+  linkType: hard
+
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1, strip-ansi@npm:^6.0.0, strip-ansi@npm:^6.0.1":
+  version: 6.0.1
+  resolution: "strip-ansi@npm:6.0.1"
+  dependencies:
+    ansi-regex: "npm:^5.0.1"
+  checksum: 10/ae3b5436d34fadeb6096367626ce987057713c566e1e7768818797e00ac5d62023d0f198c4e681eae9e20701721980b26a64a8f5b91238869592a9c6800719a2
+  languageName: node
+  linkType: hard
+
+"strip-ansi@npm:^7.0.1":
+  version: 7.2.0
+  resolution: "strip-ansi@npm:7.2.0"
+  dependencies:
+    ansi-regex: "npm:^6.2.2"
+  checksum: 10/96da3bc6d73cfba1218625a3d66cf7d37a69bf0920d8735b28f9eeaafcdb6c1fe8440e1ae9eb1ba0ca355dbe8702da872e105e2e939fa93e7851b3cb5dd7d316
+  languageName: node
+  linkType: hard
+
+"strip-bom@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "strip-bom@npm:3.0.0"
+  checksum: 10/8d50ff27b7ebe5ecc78f1fe1e00fcdff7af014e73cf724b46fb81ef889eeb1015fc5184b64e81a2efe002180f3ba431bdd77e300da5c6685d702780fbf0c8d5b
+  languageName: node
+  linkType: hard
+
+"strip-indent@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "strip-indent@npm:3.0.0"
+  dependencies:
+    min-indent: "npm:^1.0.0"
+  checksum: 10/18f045d57d9d0d90cd16f72b2313d6364fd2cb4bf85b9f593523ad431c8720011a4d5f08b6591c9d580f446e78855c5334a30fb91aa1560f5d9f95ed1b4a0530
+  languageName: node
+  linkType: hard
+
+"strip-indent@npm:^4.0.0":
+  version: 4.1.1
+  resolution: "strip-indent@npm:4.1.1"
+  checksum: 10/d322bfdc59855006791a4aebe2a66e0892eab7004a5c064d74b86a0c6ecff2818974c9a5eda54b16d8af6aadbc90a6c02635ffcbec11ab33dd8979b1a6346fc0
+  languageName: node
+  linkType: hard
+
+"strip-json-comments@npm:^3.1.1":
+  version: 3.1.1
+  resolution: "strip-json-comments@npm:3.1.1"
+  checksum: 10/492f73e27268f9b1c122733f28ecb0e7e8d8a531a6662efbd08e22cccb3f9475e90a1b82cab06a392f6afae6d2de636f977e231296400d0ec5304ba70f166443
+  languageName: node
+  linkType: hard
+
+"supports-color@npm:*":
+  version: 11.0.0
+  resolution: "supports-color@npm:11.0.0"
+  checksum: 10/6480981c00359da2cd22a25543e8bee3cea248a32194e98fade18ac5ada178bcb950fa225d262ff4dbf23c81caaed65660eb4093302bbdd0d1f1d93a18768854
+  languageName: node
+  linkType: hard
+
+"supports-color@npm:^7.1.0":
+  version: 7.2.0
+  resolution: "supports-color@npm:7.2.0"
+  dependencies:
+    has-flag: "npm:^4.0.0"
+  checksum: 10/c8bb7afd564e3b26b50ca6ee47572c217526a1389fe018d00345856d4a9b08ffbd61fadaf283a87368d94c3dcdb8f5ffe2650a5a65863e21ad2730ca0f05210a
+  languageName: node
+  linkType: hard
+
+"supports-color@npm:^8.1.1":
+  version: 8.1.1
+  resolution: "supports-color@npm:8.1.1"
+  dependencies:
+    has-flag: "npm:^4.0.0"
+  checksum: 10/157b534df88e39c5518c5e78c35580c1eca848d7dbaf31bbe06cdfc048e22c7ff1a9d046ae17b25691128f631a51d9ec373c1b740c12ae4f0de6e292037e4282
+  languageName: node
+  linkType: hard
+
+"supports-preserve-symlinks-flag@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "supports-preserve-symlinks-flag@npm:1.0.0"
+  checksum: 10/a9dc19ae2220c952bd2231d08ddeecb1b0328b61e72071ff4000c8384e145cc07c1c0bdb3b5a1cb06e186a7b2790f1dee793418b332f6ddf320de25d9125be7e
+  languageName: node
+  linkType: hard
+
+"symbol-tree@npm:^3.2.4":
+  version: 3.2.4
+  resolution: "symbol-tree@npm:3.2.4"
+  checksum: 10/c09a00aadf279d47d0c5c46ca3b6b2fbaeb45f0a184976d599637d412d3a70bbdc043ff33effe1206dea0e36e0ad226cb957112e7ce9a4bf2daedf7fa4f85c53
+  languageName: node
+  linkType: hard
+
+"synckit@npm:^0.11.13":
+  version: 0.11.13
+  resolution: "synckit@npm:0.11.13"
+  dependencies:
+    "@pkgr/core": "npm:^0.3.6"
+  checksum: 10/188544a829dbd38abd144281960835c1f8027aaa495b7c40d39ebf0c1c63a4a41c0edc42818b7ada9b5c0c15fba2f625b472220d128798fe98f9181fed84e6a2
+  languageName: node
+  linkType: hard
+
+"tailwindcss@npm:4.3.3, tailwindcss@npm:^4.3.3":
+  version: 4.3.3
+  resolution: "tailwindcss@npm:4.3.3"
+  checksum: 10/f6e4972b37f1c411ef0bd89260aabd10d4d953b50c56979f327f5fc8a27bcaf5c62fd4bf55d196d7667085ad276842e1e15b1de1bbfd532da46c2e9073dc8e0d
+  languageName: node
+  linkType: hard
+
+"tapable@npm:^2.3.3":
+  version: 2.3.3
+  resolution: "tapable@npm:2.3.3"
+  checksum: 10/21fb64a7ae1a0e11d855a6c33a22ae5ecf7e2f23170c942da673b44bf4c3aae8aa52451ef2792d0ce36c7feca13dceafa4f135105d66fc06912632488c0913fd
+  languageName: node
+  linkType: hard
+
+"tar@npm:^7.5.4":
+  version: 7.5.22
+  resolution: "tar@npm:7.5.22"
+  dependencies:
+    "@isaacs/fs-minipass": "npm:^4.0.0"
+    chownr: "npm:^3.0.0"
+    minipass: "npm:^7.1.2"
+    minizlib: "npm:^3.1.0"
+    yallist: "npm:^5.0.0"
+  checksum: 10/129606384b3c895f422aaca48bf316357be6dc7aa35c1066c3f06c28acfff0be5b356e1b0a0be7c53a7a8945534ac06cec6d8e296d170d8a09c8bff67b29300e
+  languageName: node
+  linkType: hard
+
+"tiny-invariant@npm:^1.3.3":
+  version: 1.3.3
+  resolution: "tiny-invariant@npm:1.3.3"
+  checksum: 10/5e185c8cc2266967984ce3b352a4e57cb89dad5a8abb0dea21468a6ecaa67cd5bb47a3b7a85d08041008644af4f667fb8b6575ba38ba5fb00b3b5068306e59fe
+  languageName: node
+  linkType: hard
+
+"tiny-lru@npm:^11.4.7":
+  version: 11.4.7
+  resolution: "tiny-lru@npm:11.4.7"
+  checksum: 10/34756e8f243b02d71b03a8147d4b71136d1fa92397b945c3db6ac4d9b1895e27c9cc064972a4dbe92f923ada95d8d4f9bdd2e1d177d23f050f169d3194bc4b5f
+  languageName: node
+  linkType: hard
+
+"tinybench@npm:^2.9.0":
+  version: 2.9.0
+  resolution: "tinybench@npm:2.9.0"
+  checksum: 10/cfa1e1418e91289219501703c4693c70708c91ffb7f040fd318d24aef419fb5a43e0c0160df9471499191968b2451d8da7f8087b08c3133c251c40d24aced06c
+  languageName: node
+  linkType: hard
+
+"tinyexec@npm:^1.0.2":
+  version: 1.3.0
+  resolution: "tinyexec@npm:1.3.0"
+  checksum: 10/749a8c5aac2ffe3f04220b8966f414636c6c324d4ae88895dfffb2319db61cf1c01c5d7e8f0fb8ab747389ea0be1f0f80d850a9cce88a9d96cc5ebcb345db018
+  languageName: node
+  linkType: hard
+
+"tinyglobby@npm:^0.2.12, tinyglobby@npm:^0.2.15, tinyglobby@npm:^0.2.17":
+  version: 0.2.17
+  resolution: "tinyglobby@npm:0.2.17"
+  dependencies:
+    fdir: "npm:^6.5.0"
+    picomatch: "npm:^4.0.4"
+  checksum: 10/f85e8a217d675c3f78d5f0ad25ea4557e7e023ed13ddc2b014da10bd0312eea53a34cd52356af07ccdff777f1243012547656282a4ca70936f68bf5065fbaa71
+  languageName: node
+  linkType: hard
+
+"tinyrainbow@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "tinyrainbow@npm:2.0.0"
+  checksum: 10/94d4e16246972614a5601eeb169ba94f1d49752426312d3cf8cc4f2cc663a2e354ffc653aa4de4eebccbf9eeebdd0caef52d1150271fdfde65d7ae7f3dcb9eb5
+  languageName: node
+  linkType: hard
+
+"tinyrainbow@npm:^3.1.0":
+  version: 3.1.1
+  resolution: "tinyrainbow@npm:3.1.1"
+  checksum: 10/6aa4aadf89cc8ecf8c227ef189616911292c4f0d2d5708b669b00375c5a8b43058115685f043034ffb11a8744c24650a30493525ff62134b436d94c84fa33ed5
+  languageName: node
+  linkType: hard
+
+"tinyspy@npm:^4.0.3":
+  version: 4.0.4
+  resolution: "tinyspy@npm:4.0.4"
+  checksum: 10/858a99e3ded2fba8fe7c243099d9e58e926d6525af03d19cdf86c1a9a30398161fb830b4f77890d266bcc1c69df08fa6f4baf29d089385e4cdaa98d7b6296e7c
+  languageName: node
+  linkType: hard
+
+"tldts-core@npm:^7.4.11":
+  version: 7.4.11
+  resolution: "tldts-core@npm:7.4.11"
+  checksum: 10/f0b5350cc10c553780e334f7db911ed9eb08bc798ff20b6cf082e7a8b72ebd4ac3d24198ac5fe39cc114507ab675f234685563775e04ccab6a2439f65bf4c18c
+  languageName: node
+  linkType: hard
+
+"tldts@npm:^7.0.5":
+  version: 7.4.11
+  resolution: "tldts@npm:7.4.11"
+  dependencies:
+    tldts-core: "npm:^7.4.11"
+  bin:
+    tldts: bin/cli.js
+  checksum: 10/a66a136621065cf8992698c5dec0e9060b6e6a019a0c702c3f86f456e0108e49a394844350e9d50601bcfdf66d0db9a65cd5c699c96c614b5f0ffd4f86584176
+  languageName: node
+  linkType: hard
+
+"to-regex-range@npm:^5.0.1":
+  version: 5.0.1
+  resolution: "to-regex-range@npm:5.0.1"
+  dependencies:
+    is-number: "npm:^7.0.0"
+  checksum: 10/10dda13571e1f5ad37546827e9b6d4252d2e0bc176c24a101252153ef435d83696e2557fe128c4678e4e78f5f01e83711c703eef9814eb12dab028580d45980a
+  languageName: node
+  linkType: hard
+
+"totalist@npm:^3.0.0":
+  version: 3.0.1
+  resolution: "totalist@npm:3.0.1"
+  checksum: 10/5132d562cf88ff93fd710770a92f31dbe67cc19b5c6ccae2efc0da327f0954d211bbfd9456389655d726c624f284b4a23112f56d1da931ca7cfabbe1f45e778a
+  languageName: node
+  linkType: hard
+
+"tough-cookie@npm:^6.0.2":
+  version: 6.0.2
+  resolution: "tough-cookie@npm:6.0.2"
+  dependencies:
+    tldts: "npm:^7.0.5"
+  checksum: 10/b231eb744709ce2369ea063f7a3d3816c0c7801a22ccd30a7ab46e90a5bbc531fcbbcc26520f79cfd8516de4340eb9f3568616beb93302548fc989ccb6a974b8
+  languageName: node
+  linkType: hard
+
+"tr46@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "tr46@npm:6.0.0"
+  dependencies:
+    punycode: "npm:^2.3.1"
+  checksum: 10/e6d402eb2b780a40042f327f77b4ae316da1d2b18a29c16e48c239f5267c6005bbf780f854179cfae62b02dfaa70b0e9aad8f0078ccc4225f5b3b3b131928e8f
+  languageName: node
+  linkType: hard
+
+"ts-api-utils@npm:^2.5.0":
+  version: 2.5.0
+  resolution: "ts-api-utils@npm:2.5.0"
+  peerDependencies:
+    typescript: ">=4.8.4"
+  checksum: 10/d5f1936f5618c6ab6942a97b78802217540ced00e7501862ae1f578d9a3aa189fc06050e64cb8951d21f7088e5fd35f53d2bf0d0370a883861c7b05e993ebc44
+  languageName: node
+  linkType: hard
+
+"ts-dedent@npm:^2.0.0":
+  version: 2.3.0
+  resolution: "ts-dedent@npm:2.3.0"
+  checksum: 10/fc56bfac5daf2a3d2197eda2c804125756ecfbbc830ad3ce28cf775cca0027fe848abf827a913be67d33fb0f57dfbdd536f9c908e9979fa65968443b514561b2
+  languageName: node
+  linkType: hard
+
+"ts-deepmerge@npm:8.0.0":
+  version: 8.0.0
+  resolution: "ts-deepmerge@npm:8.0.0"
+  checksum: 10/27f342a8f43ddba97bd9ea84733cd6e1019ae5a67a07ce1d9720dec3068a781f47d8c34599e66301548cd398cfb5db4a0d275625c279a1eb81e5a70ed7e7a112
+  languageName: node
+  linkType: hard
+
+"ts-node@npm:^10.9.2":
+  version: 10.9.2
+  resolution: "ts-node@npm:10.9.2"
+  dependencies:
+    "@cspotcode/source-map-support": "npm:^0.8.0"
+    "@tsconfig/node10": "npm:^1.0.7"
+    "@tsconfig/node12": "npm:^1.0.7"
+    "@tsconfig/node14": "npm:^1.0.0"
+    "@tsconfig/node16": "npm:^1.0.2"
+    acorn: "npm:^8.4.1"
+    acorn-walk: "npm:^8.1.1"
+    arg: "npm:^4.1.0"
+    create-require: "npm:^1.1.0"
+    diff: "npm:^4.0.1"
+    make-error: "npm:^1.1.1"
+    v8-compile-cache-lib: "npm:^3.0.1"
+    yn: "npm:3.1.1"
+  peerDependencies:
+    "@swc/core": ">=1.2.50"
+    "@swc/wasm": ">=1.2.50"
+    "@types/node": "*"
+    typescript: ">=2.7"
+  peerDependenciesMeta:
+    "@swc/core":
+      optional: true
+    "@swc/wasm":
+      optional: true
+  bin:
+    ts-node: dist/bin.js
+    ts-node-cwd: dist/bin-cwd.js
+    ts-node-esm: dist/bin-esm.js
+    ts-node-script: dist/bin-script.js
+    ts-node-transpile-only: dist/bin-transpile.js
+    ts-script: dist/bin-script-deprecated.js
+  checksum: 10/a91a15b3c9f76ac462f006fa88b6bfa528130dcfb849dd7ef7f9d640832ab681e235b8a2bc58ecde42f72851cc1d5d4e22c901b0c11aa51001ea1d395074b794
+  languageName: node
+  linkType: hard
+
+"tsconfck@npm:^3.0.3":
+  version: 3.1.6
+  resolution: "tsconfck@npm:3.1.6"
+  peerDependencies:
+    typescript: ^5.0.0
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  bin:
+    tsconfck: bin/tsconfck.js
+  checksum: 10/8574595286850273bf83319b4e67ca760088df3c36f7ca1425aaf797416672e854271bd31e75c9b3e1836ed5b66410c6bc38cbbda9c638a5416c6a682ed94132
+  languageName: node
+  linkType: hard
+
+"tsconfig-paths@npm:^3.15.0":
+  version: 3.15.0
+  resolution: "tsconfig-paths@npm:3.15.0"
+  dependencies:
+    "@types/json5": "npm:^0.0.29"
+    json5: "npm:^1.0.2"
+    minimist: "npm:^1.2.6"
+    strip-bom: "npm:^3.0.0"
+  checksum: 10/2041beaedc6c271fc3bedd12e0da0cc553e65d030d4ff26044b771fac5752d0460944c0b5e680f670c2868c95c664a256cec960ae528888db6ded83524e33a14
+  languageName: node
+  linkType: hard
+
+"tsconfig-paths@npm:^4.2.0":
+  version: 4.2.0
+  resolution: "tsconfig-paths@npm:4.2.0"
+  dependencies:
+    json5: "npm:^2.2.2"
+    minimist: "npm:^1.2.6"
+    strip-bom: "npm:^3.0.0"
+  checksum: 10/5e55cc2fb6b800eb72011522e10edefccb45b1f9af055681a51354c9b597d1390c6fa9cc356b8c7529f195ac8a90a78190d563159f3a1eed10e01bbd4d01a8ab
+  languageName: node
+  linkType: hard
+
+"tslib@npm:^1.9.3":
+  version: 1.14.1
+  resolution: "tslib@npm:1.14.1"
+  checksum: 10/7dbf34e6f55c6492637adb81b555af5e3b4f9cc6b998fb440dac82d3b42bdc91560a35a5fb75e20e24a076c651438234da6743d139e4feabf0783f3cdfe1dddb
+  languageName: node
+  linkType: hard
+
+"tslib@npm:^2.0.0, tslib@npm:^2.0.1, tslib@npm:^2.1.0, tslib@npm:^2.4.0, tslib@npm:^2.8.0, tslib@npm:^2.8.1":
+  version: 2.8.1
+  resolution: "tslib@npm:2.8.1"
+  checksum: 10/3e2e043d5c2316461cb54e5c7fe02c30ef6dccb3384717ca22ae5c6b5bc95232a6241df19c622d9c73b809bea33b187f6dbc73030963e29950c2141bc32a79f7
+  languageName: node
+  linkType: hard
+
+"tsyringe@npm:4.10.0, tsyringe@npm:^4.10.0":
+  version: 4.10.0
+  resolution: "tsyringe@npm:4.10.0"
+  dependencies:
+    tslib: "npm:^1.9.3"
+  checksum: 10/b42660dc112cee2db02b3d69f2ef6a6a9d185afd96b18d8f88e47c1e62be94b69a9f5a58fcfdb2a3fbb7c6c175b8162ea00f7db6499bf333ce945e570e31615c
+  languageName: node
+  linkType: hard
+
+"type-check@npm:^0.4.0, type-check@npm:~0.4.0":
+  version: 0.4.0
+  resolution: "type-check@npm:0.4.0"
+  dependencies:
+    prelude-ls: "npm:^1.2.1"
+  checksum: 10/14687776479d048e3c1dbfe58a2409e00367810d6960c0f619b33793271ff2a27f81b52461f14a162f1f89a9b1d8da1b237fc7c99b0e1fdcec28ec63a86b1fec
+  languageName: node
+  linkType: hard
+
+"type-detect@npm:4.0.8":
+  version: 4.0.8
+  resolution: "type-detect@npm:4.0.8"
+  checksum: 10/5179e3b8ebc51fce1b13efb75fdea4595484433f9683bbc2dca6d99789dba4e602ab7922d2656f2ce8383987467f7770131d4a7f06a26287db0615d2f4c4ce7d
+  languageName: node
+  linkType: hard
+
+"type-detect@npm:^4.1.0":
+  version: 4.1.0
+  resolution: "type-detect@npm:4.1.0"
+  checksum: 10/e363bf0352427a79301f26a7795a27718624c49c576965076624eb5495d87515030b207217845f7018093adcbe169b2d119bb9b7f1a31a92bfbb1ab9639ca8dd
+  languageName: node
+  linkType: hard
+
+"typed-array-buffer@npm:^1.0.3":
+  version: 1.0.3
+  resolution: "typed-array-buffer@npm:1.0.3"
+  dependencies:
+    call-bound: "npm:^1.0.3"
+    es-errors: "npm:^1.3.0"
+    is-typed-array: "npm:^1.1.14"
+  checksum: 10/3fb91f0735fb413b2bbaaca9fabe7b8fc14a3fa5a5a7546bab8a57e755be0e3788d893195ad9c2b842620592de0e68d4c077d4c2c41f04ec25b8b5bb82fa9a80
+  languageName: node
+  linkType: hard
+
+"typed-array-byte-length@npm:^1.0.3":
+  version: 1.0.3
+  resolution: "typed-array-byte-length@npm:1.0.3"
+  dependencies:
+    call-bind: "npm:^1.0.8"
+    for-each: "npm:^0.3.3"
+    gopd: "npm:^1.2.0"
+    has-proto: "npm:^1.2.0"
+    is-typed-array: "npm:^1.1.14"
+  checksum: 10/269dad101dda73e3110117a9b84db86f0b5c07dad3a9418116fd38d580cab7fc628a4fc167e29b6d7c39da2f53374b78e7cb578b3c5ec7a556689d985d193519
+  languageName: node
+  linkType: hard
+
+"typed-array-byte-offset@npm:^1.0.4":
+  version: 1.0.4
+  resolution: "typed-array-byte-offset@npm:1.0.4"
+  dependencies:
+    available-typed-arrays: "npm:^1.0.7"
+    call-bind: "npm:^1.0.8"
+    for-each: "npm:^0.3.3"
+    gopd: "npm:^1.2.0"
+    has-proto: "npm:^1.2.0"
+    is-typed-array: "npm:^1.1.15"
+    reflect.getprototypeof: "npm:^1.0.9"
+  checksum: 10/c2869aa584cdae24ecfd282f20a0f556b13a49a9d5bca1713370bb3c89dff0ccbc5ceb45cb5b784c98f4579e5e3e2a07e438c3a5b8294583e2bd4abbd5104fb5
+  languageName: node
+  linkType: hard
+
+"typed-array-length@npm:^1.0.7":
+  version: 1.0.8
+  resolution: "typed-array-length@npm:1.0.8"
+  dependencies:
+    call-bind: "npm:^1.0.9"
+    for-each: "npm:^0.3.5"
+    gopd: "npm:^1.2.0"
+    is-typed-array: "npm:^1.1.15"
+    possible-typed-array-names: "npm:^1.1.0"
+    reflect.getprototypeof: "npm:^1.0.10"
+  checksum: 10/c044c644eee13fe8814d4c2401146103efd49bfd1e40412104f04c4d67f76b373da7e93026fbd99aaef1fdaa9c81d0886f34772d045472be9704157f4e1d0164
+  languageName: node
+  linkType: hard
+
+"typescript-eslint@npm:^8.68.0":
+  version: 8.68.0
+  resolution: "typescript-eslint@npm:8.68.0"
+  dependencies:
+    "@typescript-eslint/eslint-plugin": "npm:8.68.0"
+    "@typescript-eslint/parser": "npm:8.68.0"
+    "@typescript-eslint/typescript-estree": "npm:8.68.0"
+    "@typescript-eslint/utils": "npm:8.68.0"
+  peerDependencies:
+    eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+    typescript: ">=4.8.4 <6.1.0"
+  checksum: 10/451c64296ac5f48e4621a03324f5aaef4a26f1dd9d4df63bd3cb07f136e8379185a800731f83634eb5d909c696fad820ba74d31ab3d7cf263328504275d1305b
+  languageName: node
+  linkType: hard
+
+"typescript@npm:^6.0.3":
+  version: 6.0.3
+  resolution: "typescript@npm:6.0.3"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: 10/0ef2357a4cffd916b52b683a021cdab0f81eea4e9aa35f2d254581c9a5106da02224e3392e1b0ed42b7a48f80c966e5f52b8e1a27941fa0523c1705a9c2e0330
+  languageName: node
+  linkType: hard
+
+"typescript@patch:typescript@npm%3A^6.0.3#optional!builtin<compat/typescript>":
+  version: 6.0.3
+  resolution: "typescript@patch:typescript@npm%3A6.0.3#optional!builtin<compat/typescript>::version=6.0.3&hash=5786d5"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: 10/22b67a18dafedf9b1468b64ca20d9aa02ea61d449b65413d8aa6552aeb63f52ef369e86beb25b6b4c91a803d9726ee5c196f391a9b64201263263410a4223ee6
+  languageName: node
+  linkType: hard
+
+"unbox-primitive@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "unbox-primitive@npm:1.1.0"
+  dependencies:
+    call-bound: "npm:^1.0.3"
+    has-bigints: "npm:^1.0.2"
+    has-symbols: "npm:^1.1.0"
+    which-boxed-primitive: "npm:^1.1.1"
+  checksum: 10/fadb347020f66b2c8aeacf8b9a79826fa34cc5e5457af4eb0bbc4e79bd87fed0fa795949825df534320f7c13f199259516ad30abc55a6e7b91d8d996ca069e50
+  languageName: node
+  linkType: hard
+
+"undici-types@npm:~8.3.0":
+  version: 8.3.0
+  resolution: "undici-types@npm:8.3.0"
+  checksum: 10/6681d2837ac75a75ac1cc46090aa2b8ddc7c6b8ecc295a6cdb06838752a730da3d8afeecf05e5ab7903160eafad3a8b6ffa1927e5ded260590f4d4fef18646d5
+  languageName: node
+  linkType: hard
+
+"undici@npm:^8.4.1, undici@npm:^8.9.0":
+  version: 8.10.0
+  resolution: "undici@npm:8.10.0"
+  checksum: 10/254219966d4a2fb110f565ffe73131caa82e949f207b9dd88930ebc23dfb6561db72ca187391cbd408ceeba7c647cb47d4110e8ae00df44c0c66e8a21e091dc0
+  languageName: node
+  linkType: hard
+
+"unplugin@npm:^2.3.5":
+  version: 2.3.11
+  resolution: "unplugin@npm:2.3.11"
+  dependencies:
+    "@jridgewell/remapping": "npm:^2.3.5"
+    acorn: "npm:^8.15.0"
+    picomatch: "npm:^4.0.3"
+    webpack-virtual-modules: "npm:^0.6.2"
+  checksum: 10/7b4adbfaac8894e8491c452c0b67c612b57e103761e842d9013ebea89a4ae92a78df4ec0aa30e5e3eaaefd47dd287973d5a662271624b7346a15d9236d257f9d
+  languageName: node
+  linkType: hard
+
+"update-browserslist-db@npm:^1.3.0":
+  version: 1.3.1
+  resolution: "update-browserslist-db@npm:1.3.1"
+  dependencies:
+    escalade: "npm:^3.2.0"
+    picocolors: "npm:^1.1.1"
+  peerDependencies:
+    browserslist: ">= 4.21.0"
+  bin:
+    update-browserslist-db: cli.js
+  checksum: 10/24ba3c17529c4319c6c29e59fb2cb5dadb101ea2170bc6cfca4dd3e0a2fa6686e00d0f5cadb5ba22da3ec3f1a71e36a1785b71717b6f42237cfff1fb160b8bd5
+  languageName: node
+  linkType: hard
+
+"uri-js@npm:^4.2.2":
+  version: 4.4.1
+  resolution: "uri-js@npm:4.4.1"
+  dependencies:
+    punycode: "npm:^2.1.0"
+  checksum: 10/b271ca7e3d46b7160222e3afa3e531505161c9a4e097febae9664e4b59912f4cbe94861361a4175edac3a03fee99d91e44b6a58c17a634bc5a664b19fc76fbcb
+  languageName: node
+  linkType: hard
+
+"use-sync-external-store@npm:^1.5.0, use-sync-external-store@npm:^1.6.0":
+  version: 1.6.0
+  resolution: "use-sync-external-store@npm:1.6.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+  checksum: 10/b40ad2847ba220695bff2d4ba4f4d60391c0fb4fb012faa7a4c18eb38b69181936f5edc55a522c4d20a788d1a879b73c3810952c9d0fd128d01cb3f22042c09e
+  languageName: node
+  linkType: hard
+
+"usehooks-ts@npm:^3.1.1":
+  version: 3.1.1
+  resolution: "usehooks-ts@npm:3.1.1"
+  dependencies:
+    lodash.debounce: "npm:^4.0.8"
+  peerDependencies:
+    react: ^16.8.0  || ^17 || ^18 || ^19 || ^19.0.0-rc
+  checksum: 10/4f5d6beab003d76f90c6a9b8b0cd5b61f24528fa3dbbf1a6d9c0a509cb80914074af911a92dab0bc07873f14f714771306f5271e1e8f09b94add1722da37debb
+  languageName: node
+  linkType: hard
+
+"v8-compile-cache-lib@npm:^3.0.1":
+  version: 3.0.1
+  resolution: "v8-compile-cache-lib@npm:3.0.1"
+  checksum: 10/88d3423a52b6aaf1836be779cab12f7016d47ad8430dffba6edf766695e6d90ad4adaa3d8eeb512cc05924f3e246c4a4ca51e089dccf4402caa536b5e5be8961
+  languageName: node
+  linkType: hard
+
+"vite-plugin-commonjs@npm:^0.10.4":
+  version: 0.10.4
+  resolution: "vite-plugin-commonjs@npm:0.10.4"
+  dependencies:
+    acorn: "npm:^8.12.1"
+    magic-string: "npm:^0.30.11"
+    vite-plugin-dynamic-import: "npm:^1.6.0"
+  checksum: 10/ce7df43281bb9a2fd3c429996c1c543d5fd29921e6165f2694135ab65b16e6c0b4ee89081b81a00d8522e5aa1f88b8901c0a72fdd89ccb1db7c633e464e43ae9
+  languageName: node
+  linkType: hard
+
+"vite-plugin-dynamic-import@npm:^1.6.0":
+  version: 1.6.0
+  resolution: "vite-plugin-dynamic-import@npm:1.6.0"
+  dependencies:
+    acorn: "npm:^8.12.1"
+    es-module-lexer: "npm:^1.5.4"
+    fast-glob: "npm:^3.3.2"
+    magic-string: "npm:^0.30.11"
+  checksum: 10/816b17e792e02087c215382d9bcdd6174ec49b2901db59583172fbe25b56adfccb4f1da4dc2bd103559e752856f1d1ae2ce02ccc8e45f6b666ab98f138b53657
+  languageName: node
+  linkType: hard
+
+"vite-tsconfig-paths@npm:^6.1.1":
+  version: 6.1.1
+  resolution: "vite-tsconfig-paths@npm:6.1.1"
+  dependencies:
+    debug: "npm:^4.1.1"
+    globrex: "npm:^0.1.2"
+    tsconfck: "npm:^3.0.3"
+  peerDependencies:
+    vite: "*"
+  checksum: 10/f752bce4f3c5707f0df7af8a20294b1f325e26f50578b82c8262d851028616ebb1a3e73ab0789c55cf3c8da8d985e843193c0bec2cb31662c567ccdf137f1fd0
+  languageName: node
+  linkType: hard
+
+"vite@npm:^6.0.0 || ^7.0.0 || ^8.0.0, vite@npm:^8.2.2":
+  version: 8.2.2
+  resolution: "vite@npm:8.2.2"
+  dependencies:
+    fsevents: "npm:~2.3.3"
+    lightningcss: "npm:^1.33.0"
+    picomatch: "npm:^4.0.5"
+    postcss: "npm:^8.5.26"
+    rolldown: "npm:~1.2.4"
+    tinyglobby: "npm:^0.2.17"
+  peerDependencies:
+    "@types/node": ^20.19.0 || >=22.12.0
+    "@vitejs/devtools": ^0.4.0 || ^0.5.0
+    esbuild: ^0.27.0 || ^0.28.0
+    jiti: ">=1.21.0"
+    less: ^4.0.0
+    sass: ^1.70.0
+    sass-embedded: ^1.70.0
+    stylus: ">=0.54.8"
+    sugarss: ^5.0.0
+    terser: ^5.16.0
+    tsx: ^4.8.1
+    yaml: ^2.4.2
+  dependenciesMeta:
+    fsevents:
+      optional: true
+  peerDependenciesMeta:
+    "@types/node":
+      optional: true
+    "@vitejs/devtools":
+      optional: true
+    esbuild:
+      optional: true
+    jiti:
+      optional: true
+    less:
+      optional: true
+    sass:
+      optional: true
+    sass-embedded:
+      optional: true
+    stylus:
+      optional: true
+    sugarss:
+      optional: true
+    terser:
+      optional: true
+    tsx:
+      optional: true
+    yaml:
+      optional: true
+  bin:
+    vite: bin/vite.js
+  checksum: 10/65cd73267ea2fd49736e51e91681ddc5cbee3af880f20ce5c8df3d4c97d811a11e3ca62d3899fc8ac98ec442b5bc6f55a5d7625ac574ab68c7e3e541e543f264
+  languageName: node
+  linkType: hard
+
+"vitest@npm:^4.1.11":
+  version: 4.1.11
+  resolution: "vitest@npm:4.1.11"
+  dependencies:
+    "@vitest/expect": "npm:4.1.11"
+    "@vitest/mocker": "npm:4.1.11"
+    "@vitest/pretty-format": "npm:4.1.11"
+    "@vitest/runner": "npm:4.1.11"
+    "@vitest/snapshot": "npm:4.1.11"
+    "@vitest/spy": "npm:4.1.11"
+    "@vitest/utils": "npm:4.1.11"
+    es-module-lexer: "npm:^2.0.0"
+    expect-type: "npm:^1.3.0"
+    magic-string: "npm:^0.30.21"
+    obug: "npm:^2.1.1"
+    pathe: "npm:^2.0.3"
+    picomatch: "npm:^4.0.3"
+    std-env: "npm:^4.0.0-rc.1"
+    tinybench: "npm:^2.9.0"
+    tinyexec: "npm:^1.0.2"
+    tinyglobby: "npm:^0.2.15"
+    tinyrainbow: "npm:^3.1.0"
+    vite: "npm:^6.0.0 || ^7.0.0 || ^8.0.0"
+    why-is-node-running: "npm:^2.3.0"
+  peerDependencies:
+    "@edge-runtime/vm": "*"
+    "@opentelemetry/api": ^1.9.0
+    "@types/node": ^20.0.0 || ^22.0.0 || >=24.0.0
+    "@vitest/browser-playwright": 4.1.11
+    "@vitest/browser-preview": 4.1.11
+    "@vitest/browser-webdriverio": 4.1.11
+    "@vitest/coverage-istanbul": 4.1.11
+    "@vitest/coverage-v8": 4.1.11
+    "@vitest/ui": 4.1.11
+    happy-dom: "*"
+    jsdom: "*"
+    vite: ^6.0.0 || ^7.0.0 || ^8.0.0
+  peerDependenciesMeta:
+    "@edge-runtime/vm":
+      optional: true
+    "@opentelemetry/api":
+      optional: true
+    "@types/node":
+      optional: true
+    "@vitest/browser-playwright":
+      optional: true
+    "@vitest/browser-preview":
+      optional: true
+    "@vitest/browser-webdriverio":
+      optional: true
+    "@vitest/coverage-istanbul":
+      optional: true
+    "@vitest/coverage-v8":
+      optional: true
+    "@vitest/ui":
+      optional: true
+    happy-dom:
+      optional: true
+    jsdom:
+      optional: true
+    vite:
+      optional: false
+  bin:
+    vitest: ./vitest.mjs
+  checksum: 10/054f1e25d90d911693b0b93c5b85a7c3105775aa3e39c3279c7d3e7af719e2d94070a898d6d74292445366c1215bb91d07063989ac0965973f0c5ae22ad3b06b
+  languageName: node
+  linkType: hard
+
+"w-json@npm:1.3.10":
+  version: 1.3.10
+  resolution: "w-json@npm:1.3.10"
+  checksum: 10/bf3dfa4e8e2429fcf2b0456ba396245a0be719ff4fb04eec971536c3586cae7489c5ca5801848ecfbc2a454f37829a132f428acf9d457cebe43d5c70348e7a7b
+  languageName: node
+  linkType: hard
+
+"w-json@npm:^1.3.10":
+  version: 1.3.11
+  resolution: "w-json@npm:1.3.11"
+  checksum: 10/527d1934b978c8b0663cd4002732a8af3214297c66754b016b975f6f2f255e476f68d8ad34e58de22869d27eaf61ac981f991e5fb5a3e1d160a3804f73ec9d31
+  languageName: node
+  linkType: hard
+
+"w3c-xmlserializer@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "w3c-xmlserializer@npm:5.0.0"
+  dependencies:
+    xml-name-validator: "npm:^5.0.0"
+  checksum: 10/d78f59e6b4f924aa53b6dfc56949959229cae7fe05ea9374eb38d11edcec01398b7f5d7a12576bd5acc57ff446abb5c9115cd83b9d882555015437cf858d42f0
+  languageName: node
+  linkType: hard
+
+"webidl-conversions@npm:^8.0.1":
+  version: 8.0.1
+  resolution: "webidl-conversions@npm:8.0.1"
+  checksum: 10/0f7007311f1fc257a8e406dd236f13b61fb57cf0fddb476aec33457d2d0add2d012d6df0eeb00934399238e3f3b9dad30f59dc6ac83024ae0ebd5a518bf365e8
+  languageName: node
+  linkType: hard
+
+"webpack-virtual-modules@npm:^0.6.2":
+  version: 0.6.2
+  resolution: "webpack-virtual-modules@npm:0.6.2"
+  checksum: 10/d9a0d035f7ec0c7f1055aaf88bfe48b7f96458043916a1b2926d9012fd61de3810a6b768e31a8cd4b3c84a9b6d55824361a9dd20aaf9f5ccfb6f017af216a178
+  languageName: node
+  linkType: hard
+
+"whatwg-mimetype@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "whatwg-mimetype@npm:5.0.0"
+  checksum: 10/a2d5da445f671ed34010b45283ffb9ba3c68c695b8ec91f7400cfc9149c35eb2bc47bd2c39bbe8e026786b955ace03402ba2e5cfde4955434a3ec3c511a85d0a
+  languageName: node
+  linkType: hard
+
+"whatwg-url@npm:^16.0.0":
+  version: 16.0.1
+  resolution: "whatwg-url@npm:16.0.1"
+  dependencies:
+    "@exodus/bytes": "npm:^1.11.0"
+    tr46: "npm:^6.0.0"
+    webidl-conversions: "npm:^8.0.1"
+  checksum: 10/221cc15ef89288dc1fafdb409352c62ab12ba9ff7f0753e925d8799c87b20371f3bc762dc0a8a5b9c23cddc4b1860537fc6c1bcc9d816ace9b3d3c47212cd163
+  languageName: node
+  linkType: hard
+
+"whatwg-url@npm:^17.1.0":
+  version: 17.1.0
+  resolution: "whatwg-url@npm:17.1.0"
+  dependencies:
+    "@exodus/bytes": "npm:^1.15.1"
+    tr46: "npm:^6.0.0"
+    webidl-conversions: "npm:^8.0.1"
+  checksum: 10/52052ba12a63e7665ee49d84d251a3d4776be4777fb259155ea3ca9bc49cdbbd18cbb5fce50f187e8450ce81d7abbbc4c39cfb15207c6d11d5c2539f9b87d426
+  languageName: node
+  linkType: hard
+
+"which-boxed-primitive@npm:^1.1.0, which-boxed-primitive@npm:^1.1.1":
+  version: 1.1.1
+  resolution: "which-boxed-primitive@npm:1.1.1"
+  dependencies:
+    is-bigint: "npm:^1.1.0"
+    is-boolean-object: "npm:^1.2.1"
+    is-number-object: "npm:^1.1.1"
+    is-string: "npm:^1.1.1"
+    is-symbol: "npm:^1.1.1"
+  checksum: 10/a877c0667bc089518c83ad4d845cf8296b03efe3565c1de1940c646e00a2a1ae9ed8a185bcfa27cbf352de7906f0616d83b9d2f19ca500ee02a551fb5cf40740
+  languageName: node
+  linkType: hard
+
+"which-builtin-type@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "which-builtin-type@npm:1.2.1"
+  dependencies:
+    call-bound: "npm:^1.0.2"
+    function.prototype.name: "npm:^1.1.6"
+    has-tostringtag: "npm:^1.0.2"
+    is-async-function: "npm:^2.0.0"
+    is-date-object: "npm:^1.1.0"
+    is-finalizationregistry: "npm:^1.1.0"
+    is-generator-function: "npm:^1.0.10"
+    is-regex: "npm:^1.2.1"
+    is-weakref: "npm:^1.0.2"
+    isarray: "npm:^2.0.5"
+    which-boxed-primitive: "npm:^1.1.0"
+    which-collection: "npm:^1.0.2"
+    which-typed-array: "npm:^1.1.16"
+  checksum: 10/22c81c5cb7a896c5171742cd30c90d992ff13fb1ea7693e6cf80af077791613fb3f89aa9b4b7f890bd47b6ce09c6322c409932359580a2a2a54057f7b52d1cbe
+  languageName: node
+  linkType: hard
+
+"which-collection@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "which-collection@npm:1.0.2"
+  dependencies:
+    is-map: "npm:^2.0.3"
+    is-set: "npm:^2.0.3"
+    is-weakmap: "npm:^2.0.2"
+    is-weakset: "npm:^2.0.3"
+  checksum: 10/674bf659b9bcfe4055f08634b48a8588e879161b9fefed57e9ec4ff5601e4d50a05ccd76cf10f698ef5873784e5df3223336d56c7ce88e13bcf52ebe582fc8d7
+  languageName: node
+  linkType: hard
+
+"which-typed-array@npm:^1.1.16, which-typed-array@npm:^1.1.19":
+  version: 1.1.22
+  resolution: "which-typed-array@npm:1.1.22"
+  dependencies:
+    available-typed-arrays: "npm:^1.0.7"
+    call-bind: "npm:^1.0.9"
+    call-bound: "npm:^1.0.4"
+    for-each: "npm:^0.3.5"
+    get-proto: "npm:^1.0.1"
+    gopd: "npm:^1.2.0"
+    has-tostringtag: "npm:^1.0.2"
+  checksum: 10/59b0383347e2f3b0bc5be570c2dfae551b172a9c83e0a6b03c6e17401d6161dfa1d912c7657062fe9add254a0d3c25ef70593dbaec8fefa8714715ff69e0a3fc
+  languageName: node
+  linkType: hard
+
+"which@npm:^2.0.1":
+  version: 2.0.2
+  resolution: "which@npm:2.0.2"
+  dependencies:
+    isexe: "npm:^2.0.0"
+  bin:
+    node-which: ./bin/node-which
+  checksum: 10/4782f8a1d6b8fc12c65e968fea49f59752bf6302dc43036c3bf87da718a80710f61a062516e9764c70008b487929a73546125570acea95c5b5dcc8ac3052c70f
+  languageName: node
+  linkType: hard
+
+"which@npm:^7.0.0":
+  version: 7.0.0
+  resolution: "which@npm:7.0.0"
+  dependencies:
+    isexe: "npm:^4.0.0"
+  bin:
+    node-which: bin/which.js
+  checksum: 10/913a43ac10df37602ba9795a004dd7ab12ba7dd592aca1f08ec333be1fdd6a49bbf119a88c3f8d0ea70eeb6251726e77069251424d73000299a0a840ed000732
+  languageName: node
+  linkType: hard
+
+"why-is-node-running@npm:^2.3.0":
+  version: 2.3.0
+  resolution: "why-is-node-running@npm:2.3.0"
+  dependencies:
+    siginfo: "npm:^2.0.0"
+    stackback: "npm:0.0.2"
+  bin:
+    why-is-node-running: cli.js
+  checksum: 10/0de6e6cd8f2f94a8b5ca44e84cf1751eadcac3ebedcdc6e5fbbe6c8011904afcbc1a2777c53496ec02ced7b81f2e7eda61e76bf8262a8bc3ceaa1f6040508051
+  languageName: node
+  linkType: hard
+
+"word-wrap@npm:^1.2.5":
+  version: 1.2.5
+  resolution: "word-wrap@npm:1.2.5"
+  checksum: 10/1ec6f6089f205f83037be10d0c4b34c9183b0b63fca0834a5b3cee55dd321429d73d40bb44c8fc8471b5203d6e8f8275717f49a8ff4b2b0ab41d7e1b563e0854
+  languageName: node
+  linkType: hard
+
+"workerpool@npm:^9.2.0":
+  version: 9.3.4
+  resolution: "workerpool@npm:9.3.4"
+  checksum: 10/afe729dde73bb541ba84d023813cc920b8e930e453295f58af3c45a3e42e11a2dbb6202f2a693358892d40d1e315b9a14f142d2dfd46a6078b23deda42680495
+  languageName: node
+  linkType: hard
+
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0, wrap-ansi@npm:^7.0.0":
+  version: 7.0.0
+  resolution: "wrap-ansi@npm:7.0.0"
+  dependencies:
+    ansi-styles: "npm:^4.0.0"
+    string-width: "npm:^4.1.0"
+    strip-ansi: "npm:^6.0.0"
+  checksum: 10/cebdaeca3a6880da410f75209e68cd05428580de5ad24535f22696d7d9cab134d1f8498599f344c3cf0fb37c1715807a183778d8c648d6cc0cb5ff2bb4236540
+  languageName: node
+  linkType: hard
+
+"wrap-ansi@npm:^8.1.0":
+  version: 8.1.0
+  resolution: "wrap-ansi@npm:8.1.0"
+  dependencies:
+    ansi-styles: "npm:^6.1.0"
+    string-width: "npm:^5.0.1"
+    strip-ansi: "npm:^7.0.1"
+  checksum: 10/7b1e4b35e9bb2312d2ee9ee7dc95b8cb5f8b4b5a89f7dde5543fe66c1e3715663094defa50d75454ac900bd210f702d575f15f3f17fa9ec0291806d2578d1ddf
+  languageName: node
+  linkType: hard
+
+"ws@npm:^8.19.0, ws@npm:^8.21.1":
+  version: 8.21.3
+  resolution: "ws@npm:8.21.3"
+  peerDependencies:
+    bufferutil: ^4.0.1
+    utf-8-validate: ">=5.0.2"
+  peerDependenciesMeta:
+    bufferutil:
+      optional: true
+    utf-8-validate:
+      optional: true
+  checksum: 10/8856922c26fd2d106931c16310d9a0bc2d6d37ed8771352bfa0d2a36df0ab5cb1f6528c6db8213f3333cf4ce93925e56f13604df0454cb0d4289fef922bebcdd
+  languageName: node
+  linkType: hard
+
+"wsl-utils@npm:^0.1.0":
+  version: 0.1.0
+  resolution: "wsl-utils@npm:0.1.0"
+  dependencies:
+    is-wsl: "npm:^3.1.0"
+  checksum: 10/de4c92187e04c3c27b4478f410a02e81c351dc85efa3447bf1666f34fc80baacd890a6698ec91995631714086992036013286aea3d77e6974020d40a08e00aec
+  languageName: node
+  linkType: hard
+
+"xml-name-validator@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "xml-name-validator@npm:5.0.0"
+  checksum: 10/43f30f3f6786e406dd665acf08cd742d5f8a46486bd72517edb04b27d1bcd1599664c2a4a99fc3f1e56a3194bff588b12f178b7972bc45c8047bdc4c3ac8d4a1
+  languageName: node
+  linkType: hard
+
+"xmlchars@npm:^2.2.0":
+  version: 2.2.0
+  resolution: "xmlchars@npm:2.2.0"
+  checksum: 10/4ad5924974efd004a47cce6acf5c0269aee0e62f9a805a426db3337af7bcbd331099df174b024ace4fb18971b8a56de386d2e73a1c4b020e3abd63a4a9b917f1
+  languageName: node
+  linkType: hard
+
+"y18n@npm:^5.0.5":
+  version: 5.0.8
+  resolution: "y18n@npm:5.0.8"
+  checksum: 10/5f1b5f95e3775de4514edbb142398a2c37849ccfaf04a015be5d75521e9629d3be29bd4432d23c57f37e5b61ade592fb0197022e9993f81a06a5afbdcda9346d
+  languageName: node
+  linkType: hard
+
+"yallist@npm:^3.0.2":
+  version: 3.1.1
+  resolution: "yallist@npm:3.1.1"
+  checksum: 10/9af0a4329c3c6b779ac4736c69fae4190ac03029fa27c1aef4e6bcc92119b73dea6fe5db5fe881fb0ce2a0e9539a42cdf60c7c21eda04d1a0b8c082e38509efb
+  languageName: node
+  linkType: hard
+
+"yallist@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "yallist@npm:5.0.0"
+  checksum: 10/1884d272d485845ad04759a255c71775db0fac56308764b4c77ea56a20d56679fad340213054c8c9c9c26fcfd4c4b2a90df993b7e0aaf3cdb73c618d1d1a802a
+  languageName: node
+  linkType: hard
+
+"yargs-parser@npm:^21.1.1":
+  version: 21.1.1
+  resolution: "yargs-parser@npm:21.1.1"
+  checksum: 10/9dc2c217ea3bf8d858041252d43e074f7166b53f3d010a8c711275e09cd3d62a002969a39858b92bbda2a6a63a585c7127014534a560b9c69ed2d923d113406e
+  languageName: node
+  linkType: hard
+
+"yargs-unparser@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "yargs-unparser@npm:2.0.0"
+  dependencies:
+    camelcase: "npm:^6.0.0"
+    decamelize: "npm:^4.0.0"
+    flat: "npm:^5.0.2"
+    is-plain-obj: "npm:^2.1.0"
+  checksum: 10/68f9a542c6927c3768c2f16c28f71b19008710abd6b8f8efbac6dcce26bbb68ab6503bed1d5994bdbc2df9a5c87c161110c1dfe04c6a3fe5c6ad1b0e15d9a8a3
+  languageName: node
+  linkType: hard
+
+"yargs@npm:^17.7.2":
+  version: 17.7.3
+  resolution: "yargs@npm:17.7.3"
+  dependencies:
+    cliui: "npm:^8.0.1"
+    escalade: "npm:^3.1.1"
+    get-caller-file: "npm:^2.0.5"
+    require-directory: "npm:^2.1.1"
+    string-width: "npm:^4.2.3"
+    y18n: "npm:^5.0.5"
+    yargs-parser: "npm:^21.1.1"
+  checksum: 10/a3826798c03b159e139d0580a3b2733953889a9a1bac8e4e1ca7a1a249b55315b213c323a6a1dbdb305f6e59496a9eaa810742c87e34abcf1a0584d8f59212a1
+  languageName: node
+  linkType: hard
+
+"yn@npm:3.1.1":
+  version: 3.1.1
+  resolution: "yn@npm:3.1.1"
+  checksum: 10/2c487b0e149e746ef48cda9f8bad10fc83693cd69d7f9dcd8be4214e985de33a29c9e24f3c0d6bcf2288427040a8947406ab27f7af67ee9456e6b84854f02dd6
+  languageName: node
+  linkType: hard
+
+"yocto-queue@npm:^0.1.0":
+  version: 0.1.0
+  resolution: "yocto-queue@npm:0.1.0"
+  checksum: 10/f77b3d8d00310def622123df93d4ee654fc6a0096182af8bd60679ddcdfb3474c56c6c7190817c84a2785648cdee9d721c0154eb45698c62176c322fb46fc700
+  languageName: node
+  linkType: hard

From 67bfe33b4f7a2331e6d3c3f0b1e6fb553e111626 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 11:41:41 +0200
Subject: [PATCH 133/267] Require immutable installs in JavaScript workflows

---
 .github/workflows/javascript-build.yml | 36 ++++++++++++++------------
 .github/workflows/publish.yml          |  8 +++---
 2 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/.github/workflows/javascript-build.yml b/.github/workflows/javascript-build.yml
index 0732537a..e4c44f39 100644
--- a/.github/workflows/javascript-build.yml
+++ b/.github/workflows/javascript-build.yml
@@ -26,6 +26,8 @@ on:
             - 'package.json'
             - 'rollup.config.mjs'
             - 'yarn.lock'
+            - '.yarnrc.yml'
+            - '.yarn/releases/yarn-4.5.3.cjs'
             - '.github/workflows/javascript-build.yml'
     pull_request:
         branches:
@@ -37,6 +39,8 @@ on:
             - 'package.json'
             - 'rollup.config.mjs'
             - 'yarn.lock'
+            - '.yarnrc.yml'
+            - '.yarn/releases/yarn-4.5.3.cjs'
             - '.github/workflows/javascript-build.yml'
 
 permissions:
@@ -64,10 +68,10 @@ jobs:
                       .yarn/cache
                       **/node_modules
                       **/.eslintcache
-                  key: ${{ runner.os }}-yarn-v2-${{ hashFiles('**/package.json', '.yarnrc.yml') }}
+                  key: ${{ runner.os }}-yarn-v2-${{ hashFiles('yarn.lock', '**/package.json', '.yarnrc.yml', '.yarn/releases/yarn-4.5.3.cjs') }}
 
             - name: Yarn install
-              run: yarn
+              run: yarn install --immutable
 
             - name: Build JS/TS
               run: |
@@ -141,10 +145,10 @@ jobs:
                       .yarn/cache
                       **/node_modules
                       **/.eslintcache
-                  key: ${{ runner.os }}-yarn-v2-${{ hashFiles('**/package.json', '.yarnrc.yml') }}
+                  key: ${{ runner.os }}-yarn-v2-${{ hashFiles('yarn.lock', '**/package.json', '.yarnrc.yml', '.yarn/releases/yarn-4.5.3.cjs') }}
 
             - name: Yarn install
-              run: yarn
+              run: yarn install --immutable
 
             - name: Build the published artifact
               working-directory: Source
@@ -185,10 +189,10 @@ jobs:
                       .yarn/cache
                       **/node_modules
                       **/.eslintcache
-                  key: ${{ runner.os }}-yarn-v2-${{ hashFiles('**/package.json', '.yarnrc.yml') }}
+                  key: ${{ runner.os }}-yarn-v2-${{ hashFiles('yarn.lock', '**/package.json', '.yarnrc.yml', '.yarn/releases/yarn-4.5.3.cjs') }}
 
             - name: Yarn install
-              run: yarn
+              run: yarn install --immutable
 
             - name: Build the published artifact
               working-directory: Source
@@ -235,10 +239,10 @@ jobs:
                       .yarn/cache
                       **/node_modules
                       **/.eslintcache
-                  key: ${{ runner.os }}-yarn-v2-${{ hashFiles('**/package.json', '.yarnrc.yml') }}
+                  key: ${{ runner.os }}-yarn-v2-${{ hashFiles('yarn.lock', '**/package.json', '.yarnrc.yml', '.yarn/releases/yarn-4.5.3.cjs') }}
 
             - name: Yarn install
-              run: yarn
+              run: yarn install --immutable
 
             - name: Build the published artifact
               working-directory: Source
@@ -283,10 +287,10 @@ jobs:
                       .yarn/cache
                       **/node_modules
                       **/.eslintcache
-                  key: ${{ runner.os }}-yarn-v2-${{ hashFiles('**/package.json', '.yarnrc.yml') }}
+                  key: ${{ runner.os }}-yarn-v2-${{ hashFiles('yarn.lock', '**/package.json', '.yarnrc.yml', '.yarn/releases/yarn-4.5.3.cjs') }}
 
             - name: Yarn install
-              run: yarn
+              run: yarn install --immutable
 
             - name: Build the published artifact
               working-directory: Source
@@ -323,10 +327,10 @@ jobs:
                       .yarn/cache
                       **/node_modules
                       **/.eslintcache
-                  key: ${{ runner.os }}-yarn-v2-${{ hashFiles('**/package.json', '.yarnrc.yml') }}
+                  key: ${{ runner.os }}-yarn-v2-${{ hashFiles('yarn.lock', '**/package.json', '.yarnrc.yml', '.yarn/releases/yarn-4.5.3.cjs') }}
 
             - name: Yarn install
-              run: yarn
+              run: yarn install --immutable
 
             - name: Build the published artifact
               working-directory: Source
@@ -364,10 +368,10 @@ jobs:
                       .yarn/cache
                       **/node_modules
                       **/.eslintcache
-                  key: ${{ runner.os }}-yarn-v2-${{ hashFiles('**/package.json', '.yarnrc.yml') }}
+                  key: ${{ runner.os }}-yarn-v2-${{ hashFiles('yarn.lock', '**/package.json', '.yarnrc.yml', '.yarn/releases/yarn-4.5.3.cjs') }}
 
             - name: Yarn install
-              run: yarn
+              run: yarn install --immutable
 
             - name: Build the published artifact
               working-directory: Source
@@ -398,7 +402,7 @@ jobs:
                   registry-url: 'https://registry.npmjs.org'
 
             - name: Yarn install
-              run: yarn
+              run: yarn install --immutable
 
             - name: Build and pack Components
               run: |
@@ -473,7 +477,7 @@ jobs:
               run: corepack enable
 
             - name: Yarn install
-              run: yarn
+              run: yarn install --immutable
 
             - name: Build and pack Components
               run: |
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
index 495a16f8..a6f5233b 100644
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@@ -16,8 +16,8 @@ name: Publish
 #     specifically for a V4 release, not restored wholesale from main's automatic publisher)
 #   - trusted-publisher / OIDC bootstrap configured and verified against the npm registry for
 #     every package this workspace ships
-#   - a reproducible install decision (npm vs. yarn, lockfile strategy) that the release workflow
-#     and local development both honor
+#   - an approved release workflow that installs with `yarn install --immutable` from the
+#     committed root `yarn.lock`, with local development honoring the same lockfile
 #   - a package set synchronized across every workspace, including any renderer packages not yet
 #     published
 #   - retained exact tarballs and checksums for whatever gets published, so a release can be
@@ -55,7 +55,9 @@ jobs:
                     1. An approved manual, tooling-first candidate publish workflow built and staged
                        for V4 (not main's automatic source-first/continue-on-failure publisher).
                     2. Trusted-publisher/OIDC bootstrap configured and verified for every package.
-                    3. A reproducible install decision (npm vs. yarn, lockfile strategy).
+                    3. An approved release workflow that installs with `yarn install --immutable`
+                       from the committed root `yarn.lock`, with local development honoring the
+                       same lockfile.
                     4. A package set synchronized across every workspace, including future renderer
                        packages.
                     5. Retained exact tarballs and checksums for whatever gets published.

From e3ee83ed5ae6eecfc656679cb43424492798bdfa Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 11:47:51 +0200
Subject: [PATCH 134/267] Block direct package updates

Require dependency changes to arrive through a reviewed pull request with the committed root lockfile.
---
 .github/workflows/update-packages.yml | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/.github/workflows/update-packages.yml b/.github/workflows/update-packages.yml
index 9126bd73..3ae527d2 100644
--- a/.github/workflows/update-packages.yml
+++ b/.github/workflows/update-packages.yml
@@ -1,12 +1,18 @@
 name: Update Packages
 
 on:
-  schedule:
-    - cron: '0 6 * * *'
   workflow_dispatch:
 
+permissions: {}
+
 jobs:
-  update:
-    uses: Cratis/Workflows/.github/workflows/update-packages.yml@main
-    secrets:
-      PAT_WORKFLOWS: ${{ secrets.PAT_WORKFLOWS }}
+  block:
+    name: Block direct dependency updates
+    runs-on: ubuntu-latest
+    timeout-minutes: 1
+    permissions: {}
+    steps:
+      - name: Explain reviewed dependency update requirement
+        run: |
+          echo "::error::Dependency updates must be made through a reviewed pull request containing both manifest changes and the committed root yarn.lock."
+          exit 1

From 9c9f028f3983e9e8ae2c022abec81e5a720edb92 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 13:24:23 +0200
Subject: [PATCH 135/267] Pin patched serialization dependency

The committed graph otherwise froze a high advisory in serialize-javascript through Mocha. Pin the patched release and keep the verified development graph reproducible.
---
 package.json |  3 ++-
 yarn.lock    | 26 ++++----------------------
 2 files changed, 6 insertions(+), 23 deletions(-)

diff --git a/package.json b/package.json
index 25f2fa36..5de9e306 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,8 @@
         "react-stately": "3.49.0",
         "@internationalized/date": "3.12.3",
         "@internationalized/string": "3.2.10",
-        "@internationalized/number": "3.6.7"
+        "@internationalized/number": "3.6.7",
+        "serialize-javascript": "7.1.0"
     },
     "engines": {
         "node": ">=23.0.0"
diff --git a/yarn.lock b/yarn.lock
index 7af50118..65ce6715 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6636,15 +6636,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"randombytes@npm:^2.1.0":
-  version: 2.1.0
-  resolution: "randombytes@npm:2.1.0"
-  dependencies:
-    safe-buffer: "npm:^5.1.0"
-  checksum: 10/4efd1ad3d88db77c2d16588dc54c2b52fd2461e70fe5724611f38d283857094fe09040fa2c9776366803c3152cf133171b452ef717592b65631ce5dc3a2bdafc
-  languageName: node
-  linkType: hard
-
 "react-aria-components@npm:1.20.0":
   version: 1.20.0
   resolution: "react-aria-components@npm:1.20.0"
@@ -7192,13 +7183,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"safe-buffer@npm:^5.1.0":
-  version: 5.2.1
-  resolution: "safe-buffer@npm:5.2.1"
-  checksum: 10/32872cd0ff68a3ddade7a7617b8f4c2ae8764d8b7d884c651b74457967a9e0e886267d3ecc781220629c44a865167b61c375d2da6c720c840ecd73f45d5d9451
-  languageName: node
-  linkType: hard
-
 "safe-push-apply@npm:^1.0.0":
   version: 1.0.0
   resolution: "safe-push-apply@npm:1.0.0"
@@ -7254,12 +7238,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"serialize-javascript@npm:^6.0.2":
-  version: 6.0.2
-  resolution: "serialize-javascript@npm:6.0.2"
-  dependencies:
-    randombytes: "npm:^2.1.0"
-  checksum: 10/445a420a6fa2eaee4b70cbd884d538e259ab278200a2ededd73253ada17d5d48e91fb1f4cd224a236ab62ea7ba0a70c6af29fc93b4f3d3078bf7da1c031fde58
+"serialize-javascript@npm:7.1.0":
+  version: 7.1.0
+  resolution: "serialize-javascript@npm:7.1.0"
+  checksum: 10/ac3da6a2f725fae5b0e28eec87e945b4cb1e67460f9653e260463b7dbdd6417b24f712a9760f82ff62679ce474665a5aa1aff6a12fd467d0895bb448172cf01f
   languageName: node
   linkType: hard
 

From b146972ad6ba05a42b85e3b2131719b13a44ec6e Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 13:33:07 +0200
Subject: [PATCH 136/267] Use canonical Arc documentation link

---
 Documentation/CommandForm/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Documentation/CommandForm/index.md b/Documentation/CommandForm/index.md
index c7d058ea..da623f1b 100644
--- a/Documentation/CommandForm/index.md
+++ b/Documentation/CommandForm/index.md
@@ -89,7 +89,7 @@ Two field props refine this per field - both work on every field type in this pa
 - `noInitialValue` - skip this field entirely, even if the query result has a same-named property.
 - `initialValue` - override how the field's value is derived from the query result, either a property accessor matched by name or a function composing a value from the whole result.
 
-See Arc's [Populating a Form from a Query](https://github.com/Cratis/Arc/blob/main/Documentation/frontend/react/command-form/data-loading.md) for the full behavior, including how the populated data becomes the form's change-tracking baseline.
+See Arc's [Populating a Form from a Query](https://www.cratis.io/arc/frontend/react/command-form/data-loading/) for the full behavior, including how the populated data becomes the form's change-tracking baseline.
 
 ## How a child is recognized as a field
 

From 20edad64ab98b97af83ff60e05785a00d0c35376 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 13:35:43 +0200
Subject: [PATCH 137/267] Treat link-check rate limits as transient

Upgrade and pin Linkinator so HTTP 429 responses warn instead of failing as broken links. Pin the remaining actions in this workflow and disable checkout credential persistence.
---
 .github/workflows/markdown-verification.yml | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/.github/workflows/markdown-verification.yml b/.github/workflows/markdown-verification.yml
index 2ec74106..0d7fdce0 100644
--- a/.github/workflows/markdown-verification.yml
+++ b/.github/workflows/markdown-verification.yml
@@ -34,10 +34,12 @@ jobs:
         timeout-minutes: 15
         steps:
             - name: Checkout code
-              uses: actions/checkout@v4
+              uses: actions/checkout@11d5960a326750d5838078e36cf38b85af677262 # v4
+              with:
+                  persist-credentials: false
 
             - name: Lint Markdown files
-              uses: DavidAnson/markdownlint-cli2-action@v18
+              uses: DavidAnson/markdownlint-cli2-action@eb5ca3ab411449c66620fe7f1b3c9e10547144b0 # v18
               with:
                   globs: |
                       README.md
@@ -52,10 +54,12 @@ jobs:
         timeout-minutes: 15
         steps:
             - name: Checkout code
-              uses: actions/checkout@v4
+              uses: actions/checkout@11d5960a326750d5838078e36cf38b85af677262 # v4
+              with:
+                  persist-credentials: false
 
             - name: Setup node
-              uses: actions/setup-node@v4
+              uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
               with:
                   node-version: 23.x
 
@@ -63,7 +67,7 @@ jobs:
               run: node Documentation/verify-local-links.mjs Documentation
 
             - name: Check external links in consumer documentation
-              uses: JustinBeckwith/linkinator-action@v1
+              uses: JustinBeckwith/linkinator-action@7b6b0bc671f6264e1a8daa4488a5bd91ce61dcd4 # v2.4.2
               with:
                   paths: |
                       README.md
@@ -75,9 +79,11 @@ jobs:
                   markdown: true
                   recurse: true
                   # Avoid GitHub's unauthenticated burst limit while checking several immutable
-                  # repository links; retry remains enabled for 429 responses with Retry-After.
+                  # repository links. Retry 429 responses carrying Retry-After; treat any remaining
+                  # 429 as a transient warning rather than a broken-link result.
                   concurrency: 2
                   retry: true
+                  statusCodes: '{"429":"warn"}'
                   # Stable Cratis repository anchors repeatedly trigger GitHub's unauthenticated
                   # 429 limit; current-tree links are verified locally above, so skip only exact
                   # organization guidance and immutable historical evidence anchors here.

From 1eb42ce088f40a5339060ad546962a994341f3d8 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 13:57:13 +0200
Subject: [PATCH 138/267] Document component architecture decisions

---
 .../decisions/0001-dom-coupled-contract.md    |  52 +++++++
 .../0002-component-classification.md          | 146 ++++++++++++++++++
 Documentation/decisions/toc.yml               |   4 +
 Documentation/toc.yml                         |   2 +
 Documentation/ui-foundation.md                |  11 +-
 5 files changed, 211 insertions(+), 4 deletions(-)
 create mode 100644 Documentation/decisions/0001-dom-coupled-contract.md
 create mode 100644 Documentation/decisions/0002-component-classification.md
 create mode 100644 Documentation/decisions/toc.yml

diff --git a/Documentation/decisions/0001-dom-coupled-contract.md b/Documentation/decisions/0001-dom-coupled-contract.md
new file mode 100644
index 00000000..be52b87b
--- /dev/null
+++ b/Documentation/decisions/0001-dom-coupled-contract.md
@@ -0,0 +1,52 @@
+---
+title: DOM-coupled public component contract
+description: Why Components intentionally exposes React, HTML, native form, ref, and DOM event semantics while keeping renderer vendors private.
+sidebar:
+    order: 1
+    badge: { text: Accepted, variant: tip }
+---
+
+**Status:** Accepted
+
+## Context
+
+A component library can hide its implementation vendor without pretending that every rendering target has the same contract. Components renders React trees for browser applications. Consumers rely on standard HTML attributes, semantic native elements, form submission and validation behavior, focus, DOM events, native element refs, and stable `data-cratis-part` hooks.
+
+Describing that surface as “renderer-independent” created an ambiguity. It could be read as either of these claims:
+
+- Consumers do not depend on the types, implementation DOM, or styling hooks of React Aria or another internal renderer vendor.
+- Consumers can use the same component contract without React or the browser DOM.
+
+Only the first claim is intended. The second would require replacing useful browser guarantees with reduced facades and would make ordinary React composition less precise.
+
+## Decision
+
+The public component contract is deliberately **DOM-and-React-coupled**.
+
+Components may expose:
+
+- React nodes, component props, refs, and event handlers.
+- Standard HTML attribute types such as `HTMLAttributes` and element-specific button, input, dialog, and form attributes.
+- Native element refs such as `HTMLButtonElement`, `HTMLInputElement`, and `HTMLDivElement` where the concrete element is part of the guarantee.
+- Native form participation, validation, focus, keyboard, and submission semantics.
+- Components-owned semantic markup, typed `pt` parts, `className`, `style`, and stable `data-cratis-part` attributes.
+
+“Renderer-independent” means that an internal renderer vendor remains private. React Aria or a future replacement must not leak its component types, vendor-specific styling contract, undocumented implementation DOM, or release cadence into the public API. Components owns the public DOM and React contract even when it delegates interaction behavior internally.
+
+The supported target is a React application rendered to a browser DOM. The following targets are explicitly outside this contract:
+
+- React Native and other non-DOM React renderers, because they do not provide HTML elements, browser form behavior, or DOM refs.
+- Terminal and text user interfaces, because their layout, focus, and input models are not HTML semantics.
+- Native desktop UI toolkits, because their controls and event systems are not browser elements or DOM events.
+- Server-only template/view engines and non-React Web Component consumers, because they cannot consume React component, ref, and hook contracts directly.
+- Canvas-only, WebGL-only, or Pixi-only renderers as replacements for the component surface. Spatial components may use Pixi internally or alongside a DOM layer, but that does not turn the package into a non-DOM UI contract.
+
+## Consequences
+
+Consumers can use native platform capabilities without adapters or weakened wrapper types. Forms participate in browser behavior, refs identify the real element, event handlers receive normal React DOM events, and `pt` attributes reach documented semantic parts.
+
+Components can replace React Aria or another internal implementation without migrating consumers, provided the Components-owned public markup, behavior, types, and stable parts remain compatible.
+
+A breaking change to an exposed native element, ref target, form behavior, event shape, or documented part is a public API change even when no prop name changes.
+
+The package does not promise portability to excluded non-DOM targets. A future package for one of those targets would need its own target-native contract rather than a lowest-common-denominator abstraction over this one.
diff --git a/Documentation/decisions/0002-component-classification.md b/Documentation/decisions/0002-component-classification.md
new file mode 100644
index 00000000..2e0a033c
--- /dev/null
+++ b/Documentation/decisions/0002-component-classification.md
@@ -0,0 +1,146 @@
+---
+title: Public component classification
+description: The architecture categories assigned to every component exported by the public package barrels.
+sidebar:
+    order: 2
+    badge: { text: Accepted, variant: tip }
+---
+
+**Status:** Accepted
+
+## Context
+
+Components needs an architecture vocabulary that says what kind of ownership each public component requires. Capability profiles such as Foundation, Advanced React, and Spatial answer a different question: they group subpaths by adoption shape and dependencies. They do not determine whether a component is a leaf, owns interaction behavior, coordinates a larger workflow, or exists only as an adapter.
+
+Without a separate classification, a high-order composition can be mistaken for a replaceable renderer slot, while an element-bounded primitive can inherit unnecessary framework policy. The classification must cover every React component exported by the package's current public barrels exactly once.
+
+## Decision
+
+Every public component belongs to exactly one of these architecture categories:
+
+- **Visual primitive** — an element-bounded or static leaf. It owns Components markup and styling but does not coordinate a larger workflow or reusable interaction system. Native element behavior does not by itself make a visual primitive an interaction primitive.
+- **Interaction primitive** — a reusable surface that owns interaction behavior such as overlays, focus, keyboard navigation, selection, picking, or range manipulation. `Dialog`, `Dropdown`, `DatePickerInput`, and `Tooltip` are representative behavior owners.
+- **Arc/high-order composite** — an Arc-bound component or a larger composition that coordinates data, state, children, contexts, slots, commands, queries, or several primitives. Declarative marker and provider components belong with the composite whose contract they configure.
+- **Interop-only** — a component whose sole public purpose is translating between Components and an external renderer or framework contract. It owns no independent Components interaction or workflow contract. This category is empty today; using Pixi internally or delegating behavior to React Aria does not make a component interop-only.
+
+The permanent non-slot composite boundaries are DataTables, Canvas, PivotViewer, SchemaEditor, TimeMachine, Toolbar, ObjectContentEditor, CommandDialog, CommandForm, Notifications, and Chat, together with repository-grounded peers DataPage and ObjectNavigationalBar. Their roots and contract-specific composition pieces remain Components-owned high-order contracts rather than renderer slots.
+
+This classification is intentionally independent of the Foundation, Advanced React, and Spatial capability profiles.
+
+## Public component inventory
+
+The inventory follows the setup root and every JavaScript component subpath in `Source/package.json`, including transitive exports from their public barrels. A symbol re-exported by more than one subpath appears once and names both paths.
+
+| Public subpath | Component | Classification |
+| --- | --- | --- |
+| `Common` | `ActionMenubar` | interaction primitive |
+| `Canvas` | `AnchoredOverlay` | interaction primitive |
+| `CommandForm` | `AutoCommandForm` | Arc/high-order composite |
+| `Display` | `Avatar` | visual primitive |
+| `Display` | `Badge` | visual primitive |
+| `Dialogs` | `BusyIndicatorDialog` | Arc/high-order composite |
+| `Common` | `Button` | visual primitive |
+| `CommandForm` | `CalendarField` | Arc/high-order composite |
+| `Canvas` | `Canvas` | Arc/high-order composite |
+| `Canvas` | `CanvasControls` | Arc/high-order composite |
+| `Canvas` | `CanvasItem` | Arc/high-order composite |
+| `Canvas` | `CanvasMinimap` | Arc/high-order composite |
+| `Canvas` | `CanvasOverlay` | Arc/high-order composite |
+| `Canvas` | `Chat` | Arc/high-order composite |
+| `Canvas` | `ChatBubble` | interaction primitive |
+| `Canvas` | `ChatComposer` | Arc/high-order composite |
+| `Chat` | `ChatConversation` | Arc/high-order composite |
+| `Chat` | `ChatMessageBody` | visual primitive |
+| `Canvas` | `ChatMessageBubble` | Arc/high-order composite |
+| `Chat` | `ChatSidebar` | Arc/high-order composite |
+| `Chat` | `ChatSidebarForObservableQueries` | Arc/high-order composite |
+| `Chat` | `ChatTopicList` | Arc/high-order composite |
+| `CommandForm` | `CheckboxField` | Arc/high-order composite |
+| `Display` | `Chip` | visual primitive |
+| `CommandForm` | `ChipsField` | Arc/high-order composite |
+| `CommandForm` | `ColorPickerField` | Arc/high-order composite |
+| `DataTables` and `DataPage` | `Column` | Arc/high-order composite |
+| `DataTables` | `ColumnFilterMenu` | Arc/high-order composite |
+| `DataPage` | `Columns` | Arc/high-order composite |
+| `CommandDialog` | `CommandDialog` | Arc/high-order composite |
+| `CommandDialog` and `CommandStepper` | `CommandStepper` | Arc/high-order composite |
+| `Dialogs` | `ConfirmationDialog` | Arc/high-order composite |
+| `@cratis/components` and `Common` | `CratisComponentsProvider` | Arc/high-order composite |
+| `DataTables` | `DataTableCore` | Arc/high-order composite |
+| `DataTables` | `DataTableForObservableQuery` | Arc/high-order composite |
+| `DataTables` | `DataTableForQuery` | Arc/high-order composite |
+| `Common` | `DatePickerInput` | interaction primitive |
+| `Dialogs` | `Dialog` | interaction primitive |
+| `Dropdown` | `Dropdown` | interaction primitive |
+| `CommandForm` | `DropdownField` | Arc/high-order composite |
+| `Canvas` | `EmojiPicker` | interaction primitive |
+| `Common` | `ErrorBoundary` | Arc/high-order composite |
+| `TimeMachine` | `EventsView` | Arc/high-order composite |
+| `Canvas` | `FailedReply` | Arc/high-order composite |
+| `Filter` | `FilterEditor` | Arc/high-order composite |
+| `Filter` | `FilterPanel` | Arc/high-order composite |
+| `Common` | `FormElement` | visual primitive |
+| `Common` | `IconDisplay` | visual primitive |
+| `CommandForm` | `InputTextField` | Arc/high-order composite |
+| `Canvas` | `MentionSuggestions` | interaction primitive |
+| `DataPage` | `MenuItem` | Arc/high-order composite |
+| `DataPage` | `MenuItems` | Arc/high-order composite |
+| `Display` | `Message` | visual primitive |
+| `Canvas` | `MessageReactions` | interaction primitive |
+| `CommandForm` | `MultiSelectField` | Arc/high-order composite |
+| `Canvas` | `Note` | Arc/high-order composite |
+| `CommandForm` | `NumberField` | Arc/high-order composite |
+| `ObjectContentEditor` | `ObjectContentEditor` | Arc/high-order composite |
+| `ObjectNavigationalBar` | `ObjectNavigationalBar` | Arc/high-order composite |
+| `Common` | `Page` | Arc/high-order composite |
+| `CommandForm` | `PasswordField` | Arc/high-order composite |
+| `Canvas` | `PersonAvatarCircle` | visual primitive |
+| `PivotViewer` | `PivotViewer` | Arc/high-order composite |
+| `Display` | `ProgressBar` | visual primitive |
+| `Display` | `ProgressSpinner` | visual primitive |
+| `TimeMachine` | `Properties` | Arc/high-order composite |
+| `CommandForm` | `RadioButtonField` | Arc/high-order composite |
+| `CommandForm` | `RadioGroupField` | Arc/high-order composite |
+| `Filter` | `RangeHistogramFilter` | interaction primitive |
+| `CommandForm` | `RatingField` | Arc/high-order composite |
+| `Canvas` | `ReactionPicker` | interaction primitive |
+| `TimeMachine` | `ReadModelView` | Arc/high-order composite |
+| `Canvas` | `Region` | Arc/high-order composite |
+| `SchemaEditor` | `SchemaEditor` | Arc/high-order composite |
+| `Display` | `Skeleton` | visual primitive |
+| `CommandForm` | `SliderField` | Arc/high-order composite |
+| `CommandDialog` | `StepperCommandDialog` | Arc/high-order composite |
+| `CommandDialog` | `StepperPanel` | Arc/high-order composite |
+| `DataTables` | `TablePaginator` | Arc/high-order composite |
+| `Display` | `Tag` | visual primitive |
+| `CommandForm` | `TextAreaField` | Arc/high-order composite |
+| `TimeMachine` | `TimeMachine` | Arc/high-order composite |
+| `Notifications` | `Toaster` | Arc/high-order composite |
+| `CommandForm` | `ToggleSwitchField` | Arc/high-order composite |
+| `Toolbar` | `Toolbar` | Arc/high-order composite |
+| `Toolbar` | `ToolbarButton` | Arc/high-order composite |
+| `Toolbar` | `ToolbarContext` | Arc/high-order composite |
+| `Toolbar` | `ToolbarFanOutItem` | Arc/high-order composite |
+| `Toolbar` | `ToolbarFolder` | Arc/high-order composite |
+| `Toolbar` | `ToolbarGroup` | Arc/high-order composite |
+| `Toolbar` | `ToolbarLayout` | Arc/high-order composite |
+| `Toolbar` | `ToolbarSection` | Arc/high-order composite |
+| `Toolbar` | `ToolbarSeparator` | Arc/high-order composite |
+| `Toolbar` | `ToolbarSlot` | Arc/high-order composite |
+| `Toolbar` | `ToolbarSlotProvider` | Arc/high-order composite |
+| `Common` | `Tooltip` | interaction primitive |
+| `Canvas` | `TypingIndicator` | visual primitive |
+
+The accepted inventory contains 14 visual primitives, 12 interaction primitives, 71 Arc/high-order composites, and no interop-only components.
+
+Exported types and interfaces, helpers and hooks, events and messages, enum and configuration values, registries, and React context values are not components and are excluded. Examples include `CanvasItemRegistryContext`, `DialogInitialFocus`, `ChatMessageAdded`, `NoteTextChanged`, `toast`, `useFilterState`, and the `*Props`, event, label, parts, and model types.
+
+## Consequences
+
+Visual and interaction primitives can evolve behind Components-owned markup and types, but classification does not authorize leaking an internal renderer's types or DOM.
+
+High-order composites remain owned compositions. Their declarative markers, providers, table state, Arc bindings, and nested workflow contracts are not treated as generic renderer slots merely because they contain lower-level primitives.
+
+The inventory must change whenever a public barrel adds, removes, or renames a component. A new export must be assigned once; non-component exports remain explicitly outside the inventory.
+
+Classification does not indicate maturity, accessibility conformance, support tier, performance tier, or capability profile.
diff --git a/Documentation/decisions/toc.yml b/Documentation/decisions/toc.yml
new file mode 100644
index 00000000..7a9be68e
--- /dev/null
+++ b/Documentation/decisions/toc.yml
@@ -0,0 +1,4 @@
+- name: DOM-coupled public component contract
+  href: 0001-dom-coupled-contract.md
+- name: Public component classification
+  href: 0002-component-classification.md
diff --git a/Documentation/toc.yml b/Documentation/toc.yml
index d3dd6688..b3d58cd8 100644
--- a/Documentation/toc.yml
+++ b/Documentation/toc.yml
@@ -4,6 +4,8 @@
   href: why-components.md
 - name: UI foundation
   href: ui-foundation.md
+- name: Architecture decisions
+  href: decisions/toc.yml
 - name: Coming from PrimeReact
   href: coming-from-primereact.md
 - name: Getting started
diff --git a/Documentation/ui-foundation.md b/Documentation/ui-foundation.md
index 5cd947b5..1dd49ee7 100644
--- a/Documentation/ui-foundation.md
+++ b/Documentation/ui-foundation.md
@@ -5,7 +5,7 @@ sidebar:
     order: 2
 ---
 
-Components 4 owns its public React markup, TypeScript types, tokens, documented parts, and component behavior without exposing its internal interaction library as a consumer contract. React Aria supplies selected focus, keyboard, overlay, collection, and date interaction primitives internally. These implementation facts do not establish accessibility conformance for every component or application.
+Components 4 owns its public React markup, TypeScript types, tokens, documented parts, and component behavior without exposing its internal interaction library as a consumer contract. The public component contract is deliberately coupled to React and the browser DOM: standard HTML attributes, React refs, native element types, form behavior, and DOM event semantics are intentional guarantees. React Aria supplies selected focus, keyboard, overlay, collection, and date interaction primitives internally. These implementation facts do not establish accessibility conformance for every component or application.
 
 ## Why this changed
 
@@ -26,7 +26,9 @@ graph TD
 
 Consumers import `@cratis/components/*`. React Aria does not appear in public prop types, declarations, or styling contracts. Arc command, query, and dialog bindings remain owned by `@cratis/arc.react`; Components builds visual behavior around them.
 
-“Renderer-independent” here means that React applications depend on Components-owned public contracts rather than the DOM or types of one internal interaction library. `@cratis/components` remains a React package. Arc's generated transport/client contracts remain a separate boundary from Components' React composition.
+“Renderer-independent” here does not mean framework-neutral or DOM-neutral. It means React applications depend on Components-owned markup and types rather than an internal renderer vendor's component types, implementation DOM, or styling hooks. `@cratis/components` intentionally exposes React and native HTML semantics while keeping React Aria and any future internal vendor private. Arc's generated transport/client contracts remain a separate boundary from Components' React composition.
+
+The accepted [DOM-coupled public contract](decisions/0001-dom-coupled-contract.md) records that boundary. The accepted [component classification](decisions/0002-component-classification.md) records which public exports are visual primitives, interaction primitives, high-order composites, or interop-only components.
 
 ## Consumer contract
 
@@ -36,6 +38,7 @@ The shipped styling contract contains:
 - Typed `pt` keys for foundation components that support per-instance part attributes.
 - Stable `data-cratis-part` values and component-specific state attributes documented in [Stable component parts](Styling/pass-through.md).
 - `className` and `style` on public roots where applicable.
+- Standard HTML attributes, native element refs, DOM events, and native form semantics where a component exposes them.
 - Baseline light/dark/forced-colors values in the optional theme.
 
 Spacing, typography, motion, elevation, and product-specific dimensions remain product design-system concerns unless a component documents a dedicated token or prop. A product can map its own token families to the Cratis semantic values and style stable parts without targeting React Aria DOM.
@@ -63,7 +66,7 @@ Components 4 removes the Components 3 component-family namespaces from the root.
 Components groups its subpaths into three capability profiles for documentation, dependencies, and adoption. The profiles do not assign maturity, accessibility, support, or quality tiers:
 
 - **Foundation** — the components most applications reach for immediately: `Common`, `CommandDialog` (and its `CommandStepper` alias), `CommandForm` (and `CommandForm/fields`), `DataPage`, `DataTables`, `Dialogs`, `Display`, `Dropdown`, `Filter`, `Notifications`, and `types`. Forms, dialogs, tables, and notifications for an ordinary Arc-backed CRUD screen.
-- **Advanced React** — specialized, still Pixi-free React surfaces used by fewer applications, or by fewer screens within an application: `ObjectContentEditor`, `ObjectNavigationalBar`, `SchemaEditor`, `TimeMachine`, and `Toolbar`. JSON Schema authoring, object/schema navigation, version scrubbing, and canvas-style tool palettes.
+- **Advanced React** — specialized, still Pixi-free React surfaces used by fewer applications, or by fewer screens within an application: `Chat`, `ObjectContentEditor`, `ObjectNavigationalBar`, `SchemaEditor`, `TimeMachine`, and `Toolbar`. Conversation and topic surfaces, JSON Schema authoring, object/schema navigation, version scrubbing, and canvas-style tool palettes.
 - **Spatial** — pan/zoom and large-dataset visualization surfaces backed by Pixi: `Canvas` and `PivotViewer`. These install the optional `pixi.js` peer; see [Optional Pixi, clean no-Pixi core](#optional-pixi-clean-no-pixi-core).
 
 All three profiles and the setup-only root are exported from the same package version. “Advanced React” and “Spatial” describe purpose and additional dependency shape, not how carefully a component is built, tested, supported, or versioned. Review the exact package manifest, subpath, component documentation, and application evidence for the profile you use.
@@ -74,7 +77,7 @@ All three profiles and the setup-only root are exported from the same package ve
 | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Setup** (root)   | `@cratis/components`                                                                                                                                                               | —                                                                                                               | Locale, provider-owned labels, toast-region wiring                                                     | none                                                                                                                                                | none                                                                                                                                                                                                              | Renders no browser-only API; safe to import and render on the server                                                                                                                                                                                           | negligible                                                                                                                                                                                                                                               |
 | **Foundation**     | `Common`, `CommandDialog` / `CommandStepper`, `CommandForm` / `CommandForm/fields`, `DataPage`, `DataTables`, `Dialogs`, `Display`, `Dropdown`, `Filter`, `Notifications`, `types` | —                                                                                                               | Widget interaction state: open/closed, focus, loaded-page sort/filter, paginator position, toast queue | Command execution and query results are `@cratis/arc.react` state; Components never fetches, caches, or persists data                               | Commands and queries run through Arc; Arc may itself be backed by Chronicle in an event-sourced application, but Components has no direct Chronicle dependency and behaves the same over a plain Arc.Core backend | Every surface that portals or reads `document` (`Dialog`, `FilterPanel`, `Toaster`) gates on a shared `useSyncExternalStore` browser check and renders a stable placeholder until mounted                                                                      | Table/paging cost scales with the loaded page only; complete-result filtering/sorting is a server concern (see [Update tables](Migration/3-to-4.md#update-tables))                                                                                       |
-| **Advanced React** | `ObjectContentEditor`, `ObjectNavigationalBar`, `SchemaEditor`, `TimeMachine`, `Toolbar`                                                                                           | —                                                                                                               | Local edit-buffer, breadcrumb, scrub-position, and active-tool/expanded-panel state                    | 100% host-supplied through props (`object`, `schema`, `versions`, `navigationPath`, …) — none of these components fetch, cache, or persist anything | None built in and none assumed; each page documents how a Chronicle-backed host typically supplies its data                                                                                                       | Plain React trees; `Toolbar`'s folder/fan-out/slot pieces use the same browser-detection pattern as Foundation where they portal or attach `document` listeners                                                                                                | Cost is proportional to the object/schema/version data the host passes in — see each page's own performance note                                                                                                                                         |
+| **Advanced React** | `Chat`, `ObjectContentEditor`, `ObjectNavigationalBar`, `SchemaEditor`, `TimeMachine`, `Toolbar`                                                                                   | —                                                                                                               | Draft, topic selection, local edit-buffer, breadcrumb, scrub-position, and active-tool/expanded-panel state | Host-supplied through props (`messages`, `topics`, `object`, `schema`, `versions`, `navigationPath`, …); `ChatSidebarForObservableQueries` can subscribe through Arc, while Components does not persist application data | Chat offers an optional Arc observable-query binding and optional messenger publication; the other subpaths assume no Arc integration. A Chronicle-backed host may supply any of their data | Plain React trees; Chat overlays and `Toolbar` folder/fan-out/slot pieces portal or attach browser listeners and therefore require a browser when those interactions mount                                                                                          | Cost follows the messages/topics/object/schema/version data the host passes; Chat conversations render the supplied message list, while the other surfaces document their own performance shape                                                        |
 | **Spatial**        | `Canvas`, `PivotViewer`                                                                                                                                                            | `pixi.js@^8.20.0` (optional, single shared resolution — see [Optional Pixi](#optional-pixi-clean-no-pixi-core)) | Camera/viewport/gesture transforms, measured item bounds, worker/index/filter state                    | Item, shape, and card data is host-supplied; Components renders and lets you query it, never persists it                                            | Same as Foundation: an event-sourced host may project Chronicle read models into the data it passes in, but neither component has a Chronicle dependency                                                          | `PIXI.Application` creation and PivotViewer's Web Worker setup run inside effects, guarded and skipped — with a synchronous fallback for the worker — when `window`/`Worker` is unavailable; `CanvasOverlay` uses the same browser-check pattern as Foundation | Pixi rendering and PivotViewer's Web Worker indexing exist specifically to keep large item counts off the DOM and main thread — see [Canvas](Canvas/index.md#dom-and-pixi-layers) and [PivotViewer](PivotViewer/index.md#worker-and-search-architecture) |
 
 ## Optional Pixi, clean no-Pixi core

From b56dac5ea0aad343b1eea2ff08730d4743724693 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 14:08:28 +0200
Subject: [PATCH 139/267] Add authoritative component parts manifest

---
 Source/Chat/ChatSidebar.tsx                   |   5 +
 Source/CommandDialog/CommandStepper.tsx       |   5 +
 Source/CommandForm/fields/CheckboxField.tsx   |   5 +
 Source/CommandForm/fields/ChipsField.tsx      |   5 +
 .../CommandForm/fields/ColorPickerField.tsx   |   5 +
 Source/CommandForm/fields/NumberField.tsx     |   5 +
 Source/CommandForm/fields/PasswordField.tsx   |   5 +
 .../CommandForm/fields/RadioButtonField.tsx   |   5 +
 Source/CommandForm/fields/RadioGroupField.tsx |   5 +
 Source/CommandForm/fields/RatingField.tsx     |   5 +
 Source/CommandForm/fields/SliderField.tsx     |   5 +
 .../CommandForm/fields/ToggleSwitchField.tsx  |   5 +
 Source/Common/Button.tsx                      |   5 +
 Source/Notifications/Toaster.tsx              |   5 +
 Source/TimeMachine/EventsView.tsx             |   5 +
 Source/Toolbar/Toolbar.tsx                    |   5 +
 Source/package.json                           |  10 +-
 Source/scripts/generate-parts.mjs             | 327 ++++++++++++++
 Source/scripts/verify-parts-manifest.mjs      | 426 ++++++++++++++++++
 Source/types/ExactPartKeys.ts                 |  10 +
 Source/types/index.ts                         |   1 +
 Source/types/parts.ts                         |  61 +++
 22 files changed, 911 insertions(+), 4 deletions(-)
 create mode 100644 Source/scripts/generate-parts.mjs
 create mode 100644 Source/scripts/verify-parts-manifest.mjs
 create mode 100644 Source/types/ExactPartKeys.ts
 create mode 100644 Source/types/parts.ts

diff --git a/Source/Chat/ChatSidebar.tsx b/Source/Chat/ChatSidebar.tsx
index 5ef96874..efa73ae1 100644
--- a/Source/Chat/ChatSidebar.tsx
+++ b/Source/Chat/ChatSidebar.tsx
@@ -14,6 +14,8 @@ import type { ChatTopicListLabels } from './ChatTopicList';
 import { ChatTopicList } from './ChatTopicList';
 import { isTopicUnnamed as defaultIsTopicUnnamed } from './isTopicUnnamed';
 import { shouldRequestTopicName } from './shouldRequestTopicName';
+import type { ExactPartKeys } from '../types/ExactPartKeys';
+import type { PartsOf } from '../types/parts';
 
 type ChatSidebarPartAttributes<TElement> = HTMLAttributes<TElement> & {
     [attribute: `data-${string}`]: string | number | boolean | undefined;
@@ -42,6 +44,9 @@ export interface ChatSidebarParts {
     content?: ChatSidebarPartAttributes<HTMLDivElement>;
 }
 
+const chatSidebarPartsMatchManifest: ExactPartKeys<ChatSidebarParts, PartsOf<'ChatSidebar'>> = true;
+void chatSidebarPartsMatchManifest;
+
 /** Overrides for every label the {@link ChatSidebar} and its children render. Any field left
  *  unset falls back to a literal English default. */
 export interface ChatSidebarLabels {
diff --git a/Source/CommandDialog/CommandStepper.tsx b/Source/CommandDialog/CommandStepper.tsx
index af87efbf..df9cf759 100644
--- a/Source/CommandDialog/CommandStepper.tsx
+++ b/Source/CommandDialog/CommandStepper.tsx
@@ -14,6 +14,8 @@ import {
     CommandStepperContent,
     type CommandStepperContentProps,
 } from './CommandStepperContent';
+import type { ExactPartKeys } from '../types/ExactPartKeys';
+import type { PartsOf } from '../types/parts';
 
 /**
  * Event passed to {@link StepperCustomizationProps.onChangeStep} when the user
@@ -58,6 +60,9 @@ export interface StepperParts {
     panel?: HTMLAttributes<HTMLElement>;
 }
 
+const stepperPartsMatchManifest: ExactPartKeys<StepperParts, PartsOf<'CommandStepper'>> = true;
+void stepperPartsMatchManifest;
+
 /** Public layout, navigation, and stable-part customization shared by both steppers. */
 export interface StepperCustomizationProps {
     /**
diff --git a/Source/CommandForm/fields/CheckboxField.tsx b/Source/CommandForm/fields/CheckboxField.tsx
index 81cab6a0..9931ce7b 100644
--- a/Source/CommandForm/fields/CheckboxField.tsx
+++ b/Source/CommandForm/fields/CheckboxField.tsx
@@ -8,6 +8,8 @@ import {
     type FieldAccessibilityProps,
 } from './fieldAccessibility';
 import { fieldValueFromEvent } from './fieldValueFromEvent';
+import type { ExactPartKeys } from '../../types/ExactPartKeys';
+import type { PartsOf } from '../../types/parts';
 
 /** Stable part attributes for {@link CheckboxField}. */
 export interface CheckboxParts {
@@ -21,6 +23,9 @@ export interface CheckboxParts {
     indicator?: HTMLAttributes<HTMLSpanElement>;
 }
 
+const checkboxPartsMatchManifest: ExactPartKeys<CheckboxParts, PartsOf<'CheckboxField'>> = true;
+void checkboxPartsMatchManifest;
+
 interface CheckboxFieldComponentProps
     extends WrappedFieldProps<boolean>,
         FieldAccessibilityProps {
diff --git a/Source/CommandForm/fields/ChipsField.tsx b/Source/CommandForm/fields/ChipsField.tsx
index 29689ebc..d97ea8d0 100644
--- a/Source/CommandForm/fields/ChipsField.tsx
+++ b/Source/CommandForm/fields/ChipsField.tsx
@@ -8,6 +8,8 @@ import {
     type FieldAccessibilityProps,
 } from './fieldAccessibility';
 import { appendChipCandidates } from './chipValues';
+import type { ExactPartKeys } from '../../types/ExactPartKeys';
+import type { PartsOf } from '../../types/parts';
 
 /** Stable part attributes for {@link ChipsField}. */
 export interface ChipsParts {
@@ -21,6 +23,9 @@ export interface ChipsParts {
     input?: InputHTMLAttributes<HTMLInputElement>;
 }
 
+const chipsPartsMatchManifest: ExactPartKeys<ChipsParts, PartsOf<'ChipsField'>> = true;
+void chipsPartsMatchManifest;
+
 interface ChipsFieldComponentProps
     extends WrappedFieldProps<string[]>, FieldAccessibilityProps {
     placeholder?: string;
diff --git a/Source/CommandForm/fields/ColorPickerField.tsx b/Source/CommandForm/fields/ColorPickerField.tsx
index d3d2a944..dbc3cf2e 100644
--- a/Source/CommandForm/fields/ColorPickerField.tsx
+++ b/Source/CommandForm/fields/ColorPickerField.tsx
@@ -8,6 +8,8 @@ import {
     type FieldAccessibilityProps,
 } from './fieldAccessibility';
 import { fieldValueFromEvent } from './fieldValueFromEvent';
+import type { ExactPartKeys } from '../../types/ExactPartKeys';
+import type { PartsOf } from '../../types/parts';
 
 /** Stable part attributes for {@link ColorPickerField}. */
 export interface ColorPickerParts {
@@ -19,6 +21,9 @@ export interface ColorPickerParts {
     value?: HTMLAttributes<HTMLOutputElement>;
 }
 
+const colorPickerPartsMatchManifest: ExactPartKeys<ColorPickerParts, PartsOf<'ColorPickerField'>> = true;
+void colorPickerPartsMatchManifest;
+
 interface ColorPickerFieldComponentProps
     extends WrappedFieldProps<string>,
         FieldAccessibilityProps {
diff --git a/Source/CommandForm/fields/NumberField.tsx b/Source/CommandForm/fields/NumberField.tsx
index 7838e8f7..2620112a 100644
--- a/Source/CommandForm/fields/NumberField.tsx
+++ b/Source/CommandForm/fields/NumberField.tsx
@@ -8,6 +8,8 @@ import {
     type FieldAccessibilityProps,
 } from './fieldAccessibility';
 import { fieldValueFromEvent } from './fieldValueFromEvent';
+import type { ExactPartKeys } from '../../types/ExactPartKeys';
+import type { PartsOf } from '../../types/parts';
 
 /** Stable part attributes for {@link NumberField}. */
 export interface NumberFieldParts {
@@ -17,6 +19,9 @@ export interface NumberFieldParts {
     input?: InputHTMLAttributes<HTMLInputElement>;
 }
 
+const numberFieldPartsMatchManifest: ExactPartKeys<NumberFieldParts, PartsOf<'NumberField'>> = true;
+void numberFieldPartsMatchManifest;
+
 interface NumberFieldComponentProps
     extends WrappedFieldProps<number>,
         FieldAccessibilityProps {
diff --git a/Source/CommandForm/fields/PasswordField.tsx b/Source/CommandForm/fields/PasswordField.tsx
index 736f7cf2..cfcc3f41 100644
--- a/Source/CommandForm/fields/PasswordField.tsx
+++ b/Source/CommandForm/fields/PasswordField.tsx
@@ -13,6 +13,8 @@ import {
     type FieldAccessibilityProps,
 } from './fieldAccessibility';
 import { fieldValueFromEvent } from './fieldValueFromEvent';
+import type { ExactPartKeys } from '../../types/ExactPartKeys';
+import type { PartsOf } from '../../types/parts';
 
 /** Stable part attributes for {@link PasswordField}. */
 export interface PasswordParts {
@@ -24,6 +26,9 @@ export interface PasswordParts {
     toggle?: ButtonHTMLAttributes<HTMLButtonElement>;
 }
 
+const passwordPartsMatchManifest: ExactPartKeys<PasswordParts, PartsOf<'PasswordField'>> = true;
+void passwordPartsMatchManifest;
+
 interface PasswordFieldComponentProps
     extends WrappedFieldProps<string>,
         FieldAccessibilityProps {
diff --git a/Source/CommandForm/fields/RadioButtonField.tsx b/Source/CommandForm/fields/RadioButtonField.tsx
index 75e536ee..8a201f9d 100644
--- a/Source/CommandForm/fields/RadioButtonField.tsx
+++ b/Source/CommandForm/fields/RadioButtonField.tsx
@@ -7,6 +7,8 @@ import {
     useFieldAccessibility,
     type FieldAccessibilityProps,
 } from './fieldAccessibility';
+import type { ExactPartKeys } from '../../types/ExactPartKeys';
+import type { PartsOf } from '../../types/parts';
 
 /** Stable part attributes for {@link RadioButtonField}. */
 export interface RadioParts {
@@ -20,6 +22,9 @@ export interface RadioParts {
     indicator?: HTMLAttributes<HTMLSpanElement>;
 }
 
+const radioPartsMatchManifest: ExactPartKeys<RadioParts, PartsOf<'RadioButtonField'>> = true;
+void radioPartsMatchManifest;
+
 interface RadioButtonFieldComponentProps
     extends WrappedFieldProps<string | number>,
         FieldAccessibilityProps {
diff --git a/Source/CommandForm/fields/RadioGroupField.tsx b/Source/CommandForm/fields/RadioGroupField.tsx
index c836c358..300cd4b8 100644
--- a/Source/CommandForm/fields/RadioGroupField.tsx
+++ b/Source/CommandForm/fields/RadioGroupField.tsx
@@ -7,6 +7,8 @@ import {
     useFieldAccessibility,
     type FieldAccessibilityProps,
 } from './fieldAccessibility';
+import type { ExactPartKeys } from '../../types/ExactPartKeys';
+import type { PartsOf } from '../../types/parts';
 
 /** Stable part attributes for {@link RadioGroupField}. */
 export interface RadioGroupParts {
@@ -22,6 +24,9 @@ export interface RadioGroupParts {
     indicator?: HTMLAttributes<HTMLSpanElement>;
 }
 
+const radioGroupPartsMatchManifest: ExactPartKeys<RadioGroupParts, PartsOf<'RadioGroupField'>> = true;
+void radioGroupPartsMatchManifest;
+
 interface RadioGroupFieldComponentProps
     extends WrappedFieldProps<string | number>,
         FieldAccessibilityProps {
diff --git a/Source/CommandForm/fields/RatingField.tsx b/Source/CommandForm/fields/RatingField.tsx
index 34ac34cd..c0808031 100644
--- a/Source/CommandForm/fields/RatingField.tsx
+++ b/Source/CommandForm/fields/RatingField.tsx
@@ -7,6 +7,8 @@ import {
     useFieldAccessibility,
     type FieldAccessibilityProps,
 } from './fieldAccessibility';
+import type { ExactPartKeys } from '../../types/ExactPartKeys';
+import type { PartsOf } from '../../types/parts';
 
 /** Stable part attributes for {@link RatingField}. */
 export interface RatingParts {
@@ -20,6 +22,9 @@ export interface RatingParts {
     star?: HTMLAttributes<HTMLSpanElement>;
 }
 
+const ratingPartsMatchManifest: ExactPartKeys<RatingParts, PartsOf<'RatingField'>> = true;
+void ratingPartsMatchManifest;
+
 interface RatingFieldComponentProps
     extends WrappedFieldProps<number>,
         FieldAccessibilityProps {
diff --git a/Source/CommandForm/fields/SliderField.tsx b/Source/CommandForm/fields/SliderField.tsx
index d49f79c3..31a5c21b 100644
--- a/Source/CommandForm/fields/SliderField.tsx
+++ b/Source/CommandForm/fields/SliderField.tsx
@@ -8,6 +8,8 @@ import {
     type FieldAccessibilityProps,
 } from './fieldAccessibility';
 import { fieldValueFromEvent } from './fieldValueFromEvent';
+import type { ExactPartKeys } from '../../types/ExactPartKeys';
+import type { PartsOf } from '../../types/parts';
 
 /** Stable part attributes for {@link SliderField}. */
 export interface SliderParts {
@@ -19,6 +21,9 @@ export interface SliderParts {
     value?: HTMLAttributes<HTMLSpanElement>;
 }
 
+const sliderPartsMatchManifest: ExactPartKeys<SliderParts, PartsOf<'SliderField'>> = true;
+void sliderPartsMatchManifest;
+
 interface SliderFieldComponentProps
     extends WrappedFieldProps<number>,
         FieldAccessibilityProps {
diff --git a/Source/CommandForm/fields/ToggleSwitchField.tsx b/Source/CommandForm/fields/ToggleSwitchField.tsx
index 9e1d7aa2..619a5a6d 100644
--- a/Source/CommandForm/fields/ToggleSwitchField.tsx
+++ b/Source/CommandForm/fields/ToggleSwitchField.tsx
@@ -8,6 +8,8 @@ import {
     type FieldAccessibilityProps,
 } from './fieldAccessibility';
 import { fieldValueFromEvent } from './fieldValueFromEvent';
+import type { ExactPartKeys } from '../../types/ExactPartKeys';
+import type { PartsOf } from '../../types/parts';
 
 /** Stable part attributes for {@link ToggleSwitchField}. */
 export interface ToggleSwitchParts {
@@ -21,6 +23,9 @@ export interface ToggleSwitchParts {
     handle?: HTMLAttributes<HTMLSpanElement>;
 }
 
+const toggleSwitchPartsMatchManifest: ExactPartKeys<ToggleSwitchParts, PartsOf<'ToggleSwitchField'>> = true;
+void toggleSwitchPartsMatchManifest;
+
 interface ToggleSwitchFieldComponentProps
     extends WrappedFieldProps<boolean>,
         FieldAccessibilityProps {
diff --git a/Source/Common/Button.tsx b/Source/Common/Button.tsx
index 7c9120e1..e9ac541a 100644
--- a/Source/Common/Button.tsx
+++ b/Source/Common/Button.tsx
@@ -9,6 +9,8 @@ import {
     type ReactNode,
 } from 'react';
 import { Tooltip, type TooltipPosition } from './Tooltip';
+import type { ExactPartKeys } from '../types/ExactPartKeys';
+import type { PartsOf } from '../types/parts';
 
 /** Severity tone of a {@link Button}. */
 export type ButtonSeverity =
@@ -26,6 +28,9 @@ export interface ButtonParts {
     spinner?: HTMLAttributes<HTMLSpanElement>;
 }
 
+const buttonPartsMatchManifest: ExactPartKeys<ButtonParts, PartsOf<'Button'>> = true;
+void buttonPartsMatchManifest;
+
 /** Props for {@link Button}. */
 export interface ButtonProps extends Omit<
     ButtonHTMLAttributes<HTMLButtonElement>,
diff --git a/Source/Notifications/Toaster.tsx b/Source/Notifications/Toaster.tsx
index 0b733128..22f03457 100644
--- a/Source/Notifications/Toaster.tsx
+++ b/Source/Notifications/Toaster.tsx
@@ -17,6 +17,8 @@ import {
     type ToastRecord,
     type ToastSeverity,
 } from './toast';
+import type { ExactPartKeys } from '../types/ExactPartKeys';
+import type { PartsOf } from '../types/parts';
 
 /** Supported viewport positions for the global toast region. */
 export type ToasterPosition =
@@ -47,6 +49,9 @@ export interface ToasterPassThrough {
     action?: ButtonHTMLAttributes<HTMLButtonElement>;
 }
 
+const toasterPartsMatchManifest: ExactPartKeys<ToasterPassThrough, PartsOf<'Toaster'>> = true;
+void toasterPartsMatchManifest;
+
 /** Props for the global accessible toast region. */
 export interface ToasterProps {
     /** Viewport position. */
diff --git a/Source/TimeMachine/EventsView.tsx b/Source/TimeMachine/EventsView.tsx
index 560b2a8a..e60d4ba9 100644
--- a/Source/TimeMachine/EventsView.tsx
+++ b/Source/TimeMachine/EventsView.tsx
@@ -5,6 +5,8 @@ import { useEffect, useRef, useState, type HTMLAttributes } from 'react';
 import type { Event } from './types';
 import { type TimeMachineLabels, defaultTimeMachineLabels } from './TimeMachineLabels';
 import { Properties } from './Properties';
+import type { ExactPartKeys } from '../types/ExactPartKeys';
+import type { PartsOf } from '../types/parts';
 
 /** Stable part attributes for {@link EventsView}. */
 export interface EventsViewParts {
@@ -22,6 +24,9 @@ export interface EventsViewParts {
     content?: HTMLAttributes<HTMLDivElement>;
 }
 
+const eventsViewPartsMatchManifest: ExactPartKeys<EventsViewParts, PartsOf<'EventsView'>> = true;
+void eventsViewPartsMatchManifest;
+
 /** Props for the standalone, localized event timeline. */
 export interface EventsViewProps {
     /** Ordered list of domain events to render in the vertical timeline. */
diff --git a/Source/Toolbar/Toolbar.tsx b/Source/Toolbar/Toolbar.tsx
index f93b9eb6..80ea05ec 100644
--- a/Source/Toolbar/Toolbar.tsx
+++ b/Source/Toolbar/Toolbar.tsx
@@ -3,6 +3,8 @@
 
 import { type HTMLAttributes, type ReactNode } from 'react';
 import { ToolbarDragContext } from './ToolbarDragContext';
+import type { ExactPartKeys } from '../types/ExactPartKeys';
+import type { PartsOf } from '../types/parts';
 
 /** Stable part attributes for {@link Toolbar}. */
 export interface ToolbarParts {
@@ -10,6 +12,9 @@ export interface ToolbarParts {
     root?: HTMLAttributes<HTMLDivElement>;
 }
 
+const toolbarPartsMatchManifest: ExactPartKeys<ToolbarParts, PartsOf<'Toolbar'>> = true;
+void toolbarPartsMatchManifest;
+
 /** Props for the {@link Toolbar} component. */
 export interface ToolbarProps {
     /** The {@link ToolbarButton} elements to render inside this toolbar group. */
diff --git a/Source/package.json b/Source/package.json
index 926b3e1e..803cbee6 100644
--- a/Source/package.json
+++ b/Source/package.json
@@ -127,10 +127,12 @@
         "./theme": "./dist/esm/theme.css"
     },
     "scripts": {
-        "prepare": "yarn clean && yarn g:build",
+        "generate-parts": "node ./scripts/generate-parts.mjs",
+        "verify-parts-manifest": "node ./scripts/verify-parts-manifest.mjs",
+        "prepare": "yarn generate-parts && yarn clean && yarn g:build",
         "clean": "rm -rf dist && yarn g:clean",
-        "build": "tsc -p tsconfig.json",
-        "compile": "tsc -p tsconfig.json -noEmit && yarn g:lint",
+        "build": "yarn generate-parts && tsc -p tsconfig.json",
+        "compile": "yarn generate-parts && tsc -p tsconfig.json -noEmit && yarn g:lint",
         "copy-css": "./scripts/copy-css.sh",
         "verify-exports": "node ./scripts/verify-exports.mjs",
         "verify-package-archive": "node ./scripts/verify-package-archive.mjs",
@@ -149,7 +151,7 @@
         "lint": "yarn g:lint",
         "lint:ci": "yarn g:lint:ci",
         "test": "yarn g:test",
-        "ci": "yarn g:ci && yarn typecheck-stories",
+        "ci": "yarn generate-parts && yarn verify-parts-manifest && yarn g:ci && yarn typecheck-stories",
         "up": "yarn g:up",
         "dev": "npx storybook dev -p 6006",
         "build-storybook": "npx storybook build"
diff --git a/Source/scripts/generate-parts.mjs b/Source/scripts/generate-parts.mjs
new file mode 100644
index 00000000..124a6f8b
--- /dev/null
+++ b/Source/scripts/generate-parts.mjs
@@ -0,0 +1,327 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { fileURLToPath } from 'node:url';
+import { writeFileSync } from 'node:fs';
+import path from 'node:path';
+
+/**
+ * Canonical component-to-part manifest and the source ownership needed to verify it.
+ *
+ * `parts` are the stable `data-cratis-part` values exposed by the component.
+ * `ptKeys` records the public pass-through keys when those intentionally differ from
+ * the DOM marker (for example ToolbarGroup's `root` key emits `toolbar-group`).
+ * `aliasOf` records components whose `pt` contract and emitted parts are delegated.
+ */
+export const partDefinitions = {
+    CheckboxField: {
+        parts: ['root', 'input', 'box', 'indicator'],
+        sources: ['CommandForm/fields/CheckboxField.tsx'],
+        ptKeys: ['root', 'input', 'box', 'indicator'],
+    },
+    RatingField: {
+        parts: ['root', 'option', 'input', 'star'],
+        sources: ['CommandForm/fields/RatingField.tsx'],
+        ptKeys: ['root', 'option', 'input', 'star'],
+    },
+    RadioButtonField: {
+        parts: ['root', 'input', 'box', 'indicator'],
+        sources: ['CommandForm/fields/RadioButtonField.tsx'],
+        ptKeys: ['root', 'input', 'box', 'indicator'],
+    },
+    RadioGroupField: {
+        parts: ['root', 'option', 'input', 'box', 'indicator'],
+        sources: ['CommandForm/fields/RadioGroupField.tsx'],
+        ptKeys: ['root', 'option', 'input', 'box', 'indicator'],
+    },
+    ChipsField: {
+        parts: ['root', 'item', 'remove', 'input'],
+        sources: ['CommandForm/fields/ChipsField.tsx'],
+        ptKeys: ['root', 'item', 'remove', 'input'],
+    },
+    ToggleSwitchField: {
+        parts: ['root', 'input', 'control', 'handle'],
+        sources: ['CommandForm/fields/ToggleSwitchField.tsx'],
+        ptKeys: ['root', 'input', 'control', 'handle'],
+    },
+    SliderField: {
+        parts: ['root', 'input', 'value'],
+        sources: ['CommandForm/fields/SliderField.tsx'],
+        ptKeys: ['root', 'input', 'value'],
+    },
+    NumberField: {
+        parts: ['root', 'input'],
+        sources: ['CommandForm/fields/NumberField.tsx'],
+        ptKeys: ['root', 'input'],
+    },
+    ColorPickerField: {
+        parts: ['root', 'input', 'value'],
+        sources: ['CommandForm/fields/ColorPickerField.tsx'],
+        ptKeys: ['root', 'input', 'value'],
+    },
+    PasswordField: {
+        parts: ['root', 'input', 'toggle'],
+        sources: ['CommandForm/fields/PasswordField.tsx'],
+        ptKeys: ['root', 'input', 'toggle'],
+    },
+    InputTextField: {
+        parts: ['input'],
+        sources: ['CommandForm/fields/InputTextField.tsx'],
+        ptKeys: ['root'],
+    },
+    TextAreaField: {
+        parts: ['textarea'],
+        sources: ['CommandForm/fields/TextAreaField.tsx'],
+        ptKeys: ['root'],
+    },
+    Dropdown: {
+        parts: ['root', 'value', 'filter', 'trigger', 'clear', 'popover', 'listbox', 'option', 'multiple', 'indicator'],
+        sources: ['Dropdown/Dropdown.tsx'],
+        ptKeys: ['root', 'input', 'select', 'trigger', 'value', 'clear', 'indicator', 'popover', 'listbox', 'option', 'filter', 'multiple'],
+    },
+    DropdownField: {
+        aliasOf: 'Dropdown',
+        sources: ['CommandForm/fields/DropdownField.tsx'],
+    },
+    MultiSelectField: {
+        aliasOf: 'Dropdown',
+        sources: ['CommandForm/fields/MultiSelectField.tsx'],
+    },
+    DatePickerInput: {
+        parts: ['root', 'group', 'input', 'segment', 'placeholder', 'trigger', 'popover', 'dialog', 'calendar', 'header', 'previous', 'heading', 'next', 'grid', 'cell', 'button-bar', 'today', 'clear'],
+        sources: ['Common/DatePickerInput.tsx'],
+        ptKeys: ['root', 'group', 'input', 'placeholder', 'segment', 'trigger', 'popover', 'dialog', 'calendar', 'header', 'heading', 'previous', 'next', 'grid', 'cell', 'buttonBar', 'today', 'clear'],
+    },
+    CalendarField: {
+        aliasOf: 'DatePickerInput',
+        sources: ['CommandForm/fields/CalendarField.tsx'],
+    },
+    Button: {
+        parts: ['root', 'spinner', 'icon', 'label'],
+        sources: ['Common/Button.tsx'],
+        ptKeys: ['root', 'icon', 'label', 'spinner'],
+    },
+    ActionMenubar: {
+        aliasOf: 'Button',
+        sources: ['Common/ActionMenubar.tsx'],
+    },
+    Tooltip: {
+        parts: ['trigger', 'popup'],
+        sources: ['Common/Tooltip.tsx'],
+    },
+    Dialog: {
+        parts: ['backdrop', 'positioner', 'root', 'header', 'title', 'close', 'content', 'busy-scope', 'footer', 'confirm', 'cancel'],
+        sources: ['Dialogs/Dialog.tsx'],
+        ptKeys: ['backdrop', 'positioner', 'root', 'header', 'title', 'close', 'content', 'footer', 'confirm', 'cancel'],
+    },
+    CommandDialog: {
+        aliasOf: 'Dialog',
+        sources: ['CommandDialog/CommandDialog.tsx'],
+    },
+    CommandStepper: {
+        parts: ['root', 'list', 'step', 'header', 'number', 'title', 'separator', 'panels', 'panel'],
+        sources: ['CommandDialog/CommandStepperContent.tsx'],
+        ptFiles: ['CommandDialog/CommandStepper.tsx'],
+        ptKeys: ['root', 'list', 'step', 'header', 'number', 'title', 'separator', 'panels', 'panel'],
+    },
+    DataTableCore: {
+        parts: ['root', 'search', 'search-input', 'table-container', 'table', 'head', 'header-row', 'header-cell', 'header-content', 'sort', 'body', 'empty-row', 'empty-cell', 'row', 'cell'],
+        sources: ['DataTables/DataTableCore.tsx'],
+        ptKeys: ['root', 'search', 'searchInput', 'tableContainer', 'table', 'head', 'headerRow', 'headerCell', 'body', 'row', 'cell', 'emptyRow', 'emptyCell'],
+    },
+    DataTableForObservableQuery: {
+        aliasOf: 'DataTableCore',
+        sources: ['DataTables/DataTableForObservableQuery.tsx'],
+    },
+    DataTableForQuery: {
+        aliasOf: 'DataTableCore',
+        sources: ['DataTables/DataTableForQuery.tsx'],
+    },
+    ColumnFilterMenu: {
+        parts: ['filter-trigger', 'filter-popover', 'filter-menu', 'filter-actions'],
+        sources: ['DataTables/ColumnFilterMenu.tsx'],
+        ptKeys: ['trigger', 'popover', 'menu', 'matchMode', 'input', 'actions', 'clear', 'apply'],
+    },
+    TablePaginator: {
+        parts: ['root', 'range', 'info'],
+        sources: ['DataTables/TablePaginator.tsx'],
+        ptKeys: ['root', 'range', 'info', 'first', 'previous', 'next', 'last'],
+    },
+    Toaster: {
+        parts: ['region', 'toast', 'icon', 'content', 'title', 'description', 'close', 'action'],
+        sources: ['Notifications/Toaster.tsx'],
+        ptKeys: ['region', 'toast', 'icon', 'content', 'title', 'description', 'close', 'action'],
+    },
+    EventsView: {
+        parts: ['timeline', 'event', 'separator', 'marker', 'connector', 'content'],
+        sources: ['TimeMachine/EventsView.tsx'],
+        ptKeys: ['timeline', 'event', 'separator', 'marker', 'connector', 'content'],
+    },
+    ChatSidebar: {
+        parts: ['backdrop', 'root', 'header', 'back', 'title', 'close', 'content'],
+        sources: ['Chat/ChatSidebar.tsx'],
+        ptKeys: ['backdrop', 'root', 'header', 'title', 'back', 'close', 'content'],
+    },
+    Toolbar: {
+        parts: ['root'],
+        sources: ['Toolbar/Toolbar.tsx'],
+        ptKeys: ['root'],
+    },
+    ToolbarButton: {
+        parts: ['button', 'icon', 'label'],
+        sources: ['Toolbar/ToolbarButton.tsx'],
+        ptKeys: ['root', 'icon', 'label'],
+    },
+    ToolbarFolder: {
+        parts: ['toolbar-folder', 'toolbar-folder-trigger', 'toolbar-folder-panel'],
+        sources: ['Toolbar/ToolbarFolder.tsx'],
+        ptKeys: ['root', 'trigger', 'panel'],
+    },
+    ToolbarFanOutItem: {
+        parts: ['fanout-root', 'fanout-trigger', 'fanout-panel'],
+        sources: ['Toolbar/ToolbarFanOutItem.tsx'],
+        ptKeys: ['root', 'trigger', 'panel'],
+    },
+    ToolbarSeparator: {
+        parts: ['toolbar-separator'],
+        sources: ['Toolbar/ToolbarSeparator.tsx'],
+        ptKeys: ['root'],
+    },
+    ToolbarSection: {
+        parts: ['toolbar-section', 'toolbar-context'],
+        sources: ['Toolbar/ToolbarSection.tsx'],
+        ptKeys: ['root', 'context'],
+    },
+    ToolbarGroup: {
+        parts: ['toolbar-group', 'toolbar-slot', 'toolbar-slot-incoming', 'toolbar-slot-outgoing'],
+        sources: ['Toolbar/ToolbarGroup.tsx'],
+        ptKeys: ['root', 'slot', 'incoming', 'outgoing'],
+    },
+    ToolbarLayout: {
+        parts: ['toolbar-layout', 'toolbar-slot', 'toolbar-slot-incoming', 'toolbar-slot-outgoing'],
+        sources: ['Toolbar/ToolbarLayout.tsx'],
+        ptKeys: ['root', 'slot', 'incoming', 'outgoing'],
+    },
+    Skeleton: {
+        parts: ['root'],
+        sources: ['Display/Skeleton.tsx'],
+    },
+    Message: {
+        parts: ['root', 'icon', 'text'],
+        sources: ['Display/Message.tsx'],
+    },
+    Badge: {
+        parts: ['root'],
+        sources: ['Display/Badge.tsx'],
+    },
+    ProgressSpinner: {
+        parts: ['root', 'svg', 'track', 'range'],
+        sources: ['Display/ProgressSpinner.tsx'],
+    },
+    Avatar: {
+        parts: ['root', 'image', 'fallback'],
+        sources: ['Display/Avatar.tsx'],
+    },
+    Tag: {
+        parts: ['root', 'icon', 'label'],
+        sources: ['Display/Tag.tsx'],
+    },
+    ProgressBar: {
+        parts: ['root', 'indicator', 'label'],
+        sources: ['Display/ProgressBar.tsx'],
+    },
+    Chip: {
+        parts: ['root', 'icon', 'label', 'remove'],
+        sources: ['Display/Chip.tsx'],
+    },
+};
+
+/** Exact dynamic production expressions that intentionally emit known parts. */
+export const dynamicPartExpressions = [
+    {
+        file: 'Dialogs/Dialog.tsx',
+        expression: "primary ? 'confirm' : 'cancel'",
+        parts: ['confirm', 'cancel'],
+    },
+    {
+        file: 'Common/Tooltip.tsx',
+        expression: "children.props['data-cratis-part'] ?? 'trigger'",
+        parts: ['trigger'],
+        preservesChildPart: true,
+    },
+];
+
+/** Exact dynamic test selectors and the concrete values supplied by their fixtures. */
+export const dynamicTestSelectors = [
+    {
+        file: 'Toolbar/for_ToolbarComposition/when_rendering_stable_parts.tsx',
+        expression: 'data-cratis-part="${part}"',
+        parts: [
+            'toolbar-group',
+            'toolbar-separator',
+            'toolbar-layout',
+            'toolbar-slot',
+            'toolbar-slot-incoming',
+            'toolbar-section',
+            'toolbar-context',
+            'toolbar-folder',
+            'toolbar-folder-trigger',
+            'toolbar-folder-panel',
+        ],
+    },
+    {
+        file: 'Toolbar/for_ToolbarPanels/when_escape_is_pressed.tsx',
+        expression: '[data-cratis-part="${triggerPart}"]',
+        parts: ['toolbar-folder-trigger', 'fanout-trigger'],
+    },
+    {
+        file: 'Toolbar/for_ToolbarPanels/when_escape_is_pressed.tsx',
+        expression: '[data-cratis-part="${panelPart}"]',
+        parts: ['toolbar-folder-panel', 'fanout-panel'],
+    },
+];
+
+const sourceRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const outputPath = path.join(sourceRoot, 'types', 'parts.ts');
+
+export const resolveDefinition = (component, seen = new Set()) => {
+    const definition = partDefinitions[component];
+    if (!definition) throw new Error(`Unknown parts component '${component}'.`);
+    if (!definition.aliasOf) return definition;
+    if (seen.has(component)) throw new Error(`Circular parts alias at '${component}'.`);
+    return resolveDefinition(definition.aliasOf, new Set(seen).add(component));
+};
+
+export const resolvedParts = (component) => [...resolveDefinition(component).parts];
+export const resolvedPtKeys = (component) => [...(resolveDefinition(component).ptKeys ?? [])];
+
+export function generatedPartsSource() {
+    const entries = Object.keys(partDefinitions)
+        .map((component) => {
+            const parts = resolvedParts(component)
+                .map((part) => `'${part}'`)
+                .join(', ');
+            return `    ${component}: [${parts}],`;
+        })
+        .join('\n');
+
+    return `// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\n// @generated by Cratis — do not edit\n\n/** Stable data-cratis-part names exposed by each public component. */\nexport const cratisParts = {\n${entries}\n} as const;\n\n/** The canonical Components part-name manifest. */\nexport type CratisPartsManifest = typeof cratisParts;\n\n/** Stable part names exposed by one component in the canonical manifest. */\nexport type PartsOf<K extends keyof CratisPartsManifest> = CratisPartsManifest[K][number];\n`;
+}
+
+export function generateParts() {
+    writeFileSync(outputPath, generatedPartsSource(), 'utf8');
+    return outputPath;
+}
+
+const isMainModule = process.argv[1] === fileURLToPath(import.meta.url);
+if (isMainModule) {
+    const generatedPath = generateParts();
+    const componentCount = Object.keys(partDefinitions).length;
+    const partCount = Object.keys(partDefinitions).reduce(
+        (count, component) => count + resolvedParts(component).length,
+        0,
+    );
+    console.log(
+        `Generated ${path.relative(sourceRoot, generatedPath)} with ${componentCount} components and ${partCount} component parts.`,
+    );
+}
diff --git a/Source/scripts/verify-parts-manifest.mjs b/Source/scripts/verify-parts-manifest.mjs
new file mode 100644
index 00000000..d94b9e04
--- /dev/null
+++ b/Source/scripts/verify-parts-manifest.mjs
@@ -0,0 +1,426 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { readFileSync, readdirSync } from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import ts from 'typescript';
+import {
+    dynamicPartExpressions,
+    dynamicTestSelectors,
+    generatedPartsSource,
+    partDefinitions,
+    resolvedParts,
+    resolvedPtKeys,
+} from './generate-parts.mjs';
+
+const sourceRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const generatedPath = path.join(sourceRoot, 'types', 'parts.ts');
+
+const normalizePath = (file) => path.relative(sourceRoot, file).split(path.sep).join('/');
+const sorted = (values) => [...values].sort((left, right) => left.localeCompare(right));
+const sameValues = (left, right) =>
+    left.length === right.length && left.every((value, index) => value === right[index]);
+
+const collectTsx = (directory, files = []) => {
+    for (const entry of readdirSync(directory, { withFileTypes: true })) {
+        if (['dist', 'node_modules', '.storybook', 'storybook-static'].includes(entry.name))
+            continue;
+        const absolute = path.join(directory, entry.name);
+        if (entry.isDirectory()) collectTsx(absolute, files);
+        else if (entry.isFile() && entry.name.endsWith('.tsx')) files.push(absolute);
+    }
+    return files;
+};
+
+const isTestFile = (relative) =>
+    relative.split('/').some((segment) => segment.startsWith('for_')) ||
+    /(?:^|\/)given\.tsx$/u.test(relative);
+const isStoryFile = (relative) => relative.includes('.stories.');
+const isProductionFile = (relative) => !isTestFile(relative) && !isStoryFile(relative);
+
+const ownersBySource = () => {
+    const owners = new Map();
+    for (const [component, definition] of Object.entries(partDefinitions)) {
+        for (const source of definition.sources ?? []) {
+            const sourceOwners = owners.get(source) ?? [];
+            sourceOwners.push(component);
+            owners.set(source, sourceOwners);
+        }
+    }
+    return owners;
+};
+
+const resolvedEmissionSources = (component, seen = new Set()) => {
+    const definition = partDefinitions[component];
+    if (!definition) return [];
+    if (seen.has(component)) return [];
+    const own = definition.sources ?? [];
+    if (!definition.aliasOf) return own;
+    return [
+        ...own,
+        ...resolvedEmissionSources(definition.aliasOf, new Set(seen).add(component)),
+    ];
+};
+
+const dynamicProductionMap = new Map(
+    dynamicPartExpressions.map((entry) => [`${entry.file}\0${entry.expression}`, entry]),
+);
+
+function readProductionEmissions() {
+    const emissions = new Map();
+    const problems = [];
+    const owners = ownersBySource();
+    const seenDynamic = new Set();
+
+    for (const file of collectTsx(sourceRoot)) {
+        const relative = normalizePath(file);
+        if (!isProductionFile(relative)) continue;
+        const sourceText = readFileSync(file, 'utf8');
+        const sourceFile = ts.createSourceFile(
+            file,
+            sourceText,
+            ts.ScriptTarget.Latest,
+            true,
+            ts.ScriptKind.TSX,
+        );
+        const fileOwners = owners.get(relative) ?? [];
+
+        const record = (part, node) => {
+            if (fileOwners.length === 0) {
+                const line = sourceFile.getLineAndCharacterOfPosition(node.getStart()).line + 1;
+                problems.push(
+                    `${relative}:${line} emits '${part}' but has no owning component in generate-parts.mjs.`,
+                );
+                return;
+            }
+            for (const owner of fileOwners) {
+                const values = emissions.get(owner) ?? new Set();
+                values.add(part);
+                emissions.set(owner, values);
+            }
+        };
+
+        const recordDynamic = (expression, node) => {
+            const key = `${relative}\0${expression}`;
+            const allowlist = dynamicProductionMap.get(key);
+            const line = sourceFile.getLineAndCharacterOfPosition(node.getStart()).line + 1;
+            if (!allowlist) {
+                problems.push(
+                    `${relative}:${line} has unproven dynamic data-cratis-part expression '${expression}'. Add an exact mapping to dynamicPartExpressions in generate-parts.mjs.`,
+                );
+                return;
+            }
+            seenDynamic.add(key);
+            for (const part of allowlist.parts) record(part, node);
+        };
+
+        const visit = (node) => {
+            if (ts.isJsxAttribute(node) && node.name.text === 'data-cratis-part') {
+                const initializer = node.initializer;
+                if (initializer && ts.isStringLiteral(initializer)) {
+                    record(initializer.text, node);
+                } else if (
+                    initializer &&
+                    ts.isJsxExpression(initializer) &&
+                    initializer.expression
+                ) {
+                    if (ts.isStringLiteral(initializer.expression))
+                        record(initializer.expression.text, node);
+                    else recordDynamic(initializer.expression.getText(sourceFile), node);
+                } else {
+                    recordDynamic('<missing initializer>', node);
+                }
+            }
+
+            if (ts.isPropertyAssignment(node)) {
+                const name = node.name;
+                const isPartProperty =
+                    (ts.isStringLiteral(name) && name.text === 'data-cratis-part') ||
+                    (ts.isIdentifier(name) && name.text === 'data-cratis-part');
+                if (isPartProperty) {
+                    if (ts.isStringLiteral(node.initializer))
+                        record(node.initializer.text, node);
+                    else recordDynamic(node.initializer.getText(sourceFile), node);
+                }
+            }
+            ts.forEachChild(node, visit);
+        };
+        visit(sourceFile);
+    }
+
+    for (const [key, entry] of dynamicProductionMap) {
+        if (!seenDynamic.has(key)) {
+            problems.push(
+                `Stale dynamic production mapping for ${entry.file}: '${entry.expression}'.`,
+            );
+        }
+    }
+    return { emissions, problems };
+}
+
+function compareComponentParts(component, manifestParts, emittedParts) {
+    const problems = [];
+    for (const part of manifestParts) {
+        if (!emittedParts.has(part))
+            problems.push(
+                `${component} declares orphaned part '${part}' but neither it nor its alias target emits it.`,
+            );
+    }
+    for (const part of emittedParts) {
+        if (!manifestParts.includes(part))
+            problems.push(`${component} emits missing manifest part '${part}'.`);
+    }
+    return problems;
+}
+
+function verifyDefinitions(emissions) {
+    const problems = [];
+    const owners = ownersBySource();
+    const allParts = new Set();
+
+    for (const [component, definition] of Object.entries(partDefinitions)) {
+        const parts = resolvedParts(component);
+        const duplicate = parts.find((part, index) => parts.indexOf(part) !== index);
+        if (duplicate)
+            problems.push(`${component} repeats manifest part '${duplicate}'.`);
+        for (const part of parts) allParts.add(part);
+
+        for (const source of definition.sources ?? []) {
+            if (!owners.has(source)) problems.push(`${component} references unknown source ${source}.`);
+        }
+
+        const emitted = new Set();
+        for (const sourceComponent of Object.keys(partDefinitions)) {
+            const sourceFiles = resolvedEmissionSources(component);
+            const candidateFiles = partDefinitions[sourceComponent].sources ?? [];
+            if (candidateFiles.some((file) => sourceFiles.includes(file))) {
+                for (const part of emissions.get(sourceComponent) ?? []) emitted.add(part);
+            }
+        }
+
+        problems.push(...compareComponentParts(component, parts, emitted));
+    }
+
+    return { problems, allParts };
+}
+
+function buildProgram(files) {
+    const configPath = path.join(sourceRoot, 'tsconfig.json');
+    const configFile = ts.readConfigFile(configPath, ts.sys.readFile);
+    if (configFile.error)
+        throw new Error(ts.flattenDiagnosticMessageText(configFile.error.messageText, '\n'));
+    const parsed = ts.parseJsonConfigFileContent(configFile.config, ts.sys, sourceRoot);
+    return ts.createProgram({ rootNames: files, options: parsed.options });
+}
+
+function verifyPublicPtContracts() {
+    const problems = [];
+    const files = collectTsx(sourceRoot).filter((file) => isProductionFile(normalizePath(file)));
+    const program = buildProgram(files);
+    const checker = program.getTypeChecker();
+    const owners = ownersBySource();
+    const configuredPtFiles = new Map();
+    for (const [component, definition] of Object.entries(partDefinitions)) {
+        if (!definition.ptKeys && !definition.aliasOf) continue;
+        for (const file of definition.ptFiles ?? definition.sources ?? [])
+            configuredPtFiles.set(file, component);
+    }
+
+    const discoveredFiles = new Set();
+    let declarationCount = 0;
+    for (const sourceFile of program.getSourceFiles()) {
+        if (!sourceFile.fileName.startsWith(sourceRoot) || !sourceFile.fileName.endsWith('.tsx'))
+            continue;
+        const relative = normalizePath(sourceFile.fileName);
+        if (!isProductionFile(relative)) continue;
+        const owner = configuredPtFiles.get(relative) ?? owners.get(relative)?.[0];
+
+        const visit = (node) => {
+            if (
+                ts.isPropertySignature(node) &&
+                node.questionToken &&
+                ((ts.isIdentifier(node.name) && node.name.text === 'pt') ||
+                    (ts.isStringLiteral(node.name) && node.name.text === 'pt'))
+            ) {
+                declarationCount++;
+                discoveredFiles.add(relative);
+                const line = sourceFile.getLineAndCharacterOfPosition(node.getStart()).line + 1;
+                if (owner) {
+                    const expected = sorted(resolvedPtKeys(owner));
+                    const type = checker.getNonNullableType(checker.getTypeAtLocation(node));
+                    const actual = sorted(checker.getPropertiesOfType(type).map((symbol) => symbol.name));
+                    if (!sameValues(actual, expected)) {
+                        problems.push(
+                            `${relative}:${line} ${owner} pt keys differ: source=[${actual.join(', ')}], manifest=[${expected.join(', ')}].`,
+                        );
+                    }
+                } else {
+                    problems.push(`${relative}:${line} declares public pt without a manifest owner.`);
+                }
+            }
+            ts.forEachChild(node, visit);
+        };
+        visit(sourceFile);
+    }
+
+    const expectedFiles = sorted(
+        [...configuredPtFiles.keys()].filter((file) => {
+            const absolute = path.join(sourceRoot, file);
+            return readFileSync(absolute, 'utf8').includes('pt?:');
+        }),
+    );
+    const actualFiles = sorted(discoveredFiles);
+    if (!sameValues(actualFiles, expectedFiles)) {
+        problems.push(
+            `Public pt file inventory differs: source=[${actualFiles.join(', ')}], manifest=[${expectedFiles.join(', ')}].`,
+        );
+    }
+    if (actualFiles.length !== 38 || declarationCount !== 41) {
+        problems.push(
+            `Expected the authoritative 38 pt files / 41 declarations, found ${actualFiles.length} files / ${declarationCount} declarations.`,
+        );
+    }
+    return problems;
+}
+
+function verifyTestSelectors(allParts) {
+    const problems = [];
+    const dynamicMap = new Map(
+        dynamicTestSelectors.map((entry) => [`${entry.file}\0${entry.expression}`, entry]),
+    );
+    const seenDynamic = new Set();
+    const selectorPattern = /data-cratis-part\s*=\s*["']([^"']+)["']/gu;
+
+    for (const file of collectTsx(sourceRoot)) {
+        const relative = normalizePath(file);
+        if (!isTestFile(relative)) continue;
+        const sourceFile = ts.createSourceFile(
+            file,
+            readFileSync(file, 'utf8'),
+            ts.ScriptTarget.Latest,
+            true,
+            ts.ScriptKind.TSX,
+        );
+        const inspectText = (text, node) => {
+            if (!text.includes('data-cratis-part')) return;
+            if (text.includes('${')) {
+                const key = `${relative}\0${text}`;
+                const allowlist = dynamicMap.get(key);
+                const line = sourceFile.getLineAndCharacterOfPosition(node.getStart()).line + 1;
+                if (allowlist) {
+                    seenDynamic.add(key);
+                    for (const part of allowlist.parts) {
+                        if (!allParts.has(part))
+                            problems.push(
+                                `${relative}:${line} dynamic selector maps unknown part '${part}'.`,
+                            );
+                    }
+                } else {
+                    problems.push(
+                        `${relative}:${line} has unproven dynamic part selector '${text}'. Add an exact mapping to dynamicTestSelectors in generate-parts.mjs.`,
+                    );
+                }
+                return;
+            }
+            for (const match of text.matchAll(selectorPattern)) {
+                if (!allParts.has(match[1])) {
+                    const line = sourceFile.getLineAndCharacterOfPosition(node.getStart()).line + 1;
+                    problems.push(
+                        `${relative}:${line} selector references unknown part '${match[1]}'.`,
+                    );
+                }
+            }
+        };
+        const visit = (node) => {
+            if (
+                ts.isStringLiteral(node) ||
+                ts.isNoSubstitutionTemplateLiteral(node) ||
+                ts.isRegularExpressionLiteral(node)
+            ) inspectText(node.text, node);
+            else if (ts.isTemplateExpression(node)) inspectText(node.getText(sourceFile).slice(1, -1), node);
+            ts.forEachChild(node, visit);
+        };
+        visit(sourceFile);
+    }
+
+    for (const [key, entry] of dynamicMap) {
+        if (!seenDynamic.has(key))
+            problems.push(`Stale dynamic test-selector mapping for ${entry.file}: '${entry.expression}'.`);
+    }
+    return problems;
+}
+
+function verifyGeneratedFile() {
+    const expected = generatedPartsSource();
+    const actual = readFileSync(generatedPath, 'utf8');
+    return actual === expected
+        ? []
+        : ['types/parts.ts is stale or was edited by hand. Run yarn generate-parts.'];
+}
+
+function runSelfTests() {
+    const failures = [];
+    const missing = compareComponentParts(
+        'Widget',
+        ['root'],
+        new Set(['root', 'missing']),
+    );
+    if (!missing.some((problem) => problem.includes("missing manifest part 'missing'")))
+        failures.push('planted missing source part was not detected');
+    const orphaned = compareComponentParts(
+        'Widget',
+        ['root', 'orphaned'],
+        new Set(['root']),
+    );
+    if (!orphaned.some((problem) => problem.includes("orphaned part 'orphaned'")))
+        failures.push('planted orphaned manifest part was not detected');
+    if (compareComponentParts('Widget', ['root'], new Set(['root'])).length !== 0)
+        failures.push('matching fixture did not pass');
+    return failures;
+}
+
+export function verifyPartsManifest() {
+    const selfTestProblems = runSelfTests();
+    if (selfTestProblems.length > 0)
+        return selfTestProblems.map((problem) => `Self-test failed: ${problem}`);
+
+    const { emissions, problems: emissionProblems } = readProductionEmissions();
+    const { problems: definitionProblems, allParts } = verifyDefinitions(emissions);
+    return [
+        ...emissionProblems,
+        ...definitionProblems,
+        ...verifyPublicPtContracts(),
+        ...verifyTestSelectors(allParts),
+        ...verifyGeneratedFile(),
+    ];
+}
+
+function main() {
+    const selfTestOnly = process.argv.includes('--self-test-only');
+    const selfTestProblems = runSelfTests();
+    if (selfTestProblems.length > 0) {
+        for (const problem of selfTestProblems) console.error(`verify-parts-manifest: ${problem}`);
+        process.exit(1);
+    }
+    console.log('verify-parts-manifest self-tests passed (missing and orphaned fixtures).');
+    if (selfTestOnly) return;
+
+    const problems = verifyPartsManifest();
+    if (problems.length > 0) {
+        console.error(`verify-parts-manifest found ${problems.length} problem(s):`);
+        for (const problem of problems) console.error(`  - ${problem}`);
+        process.exit(1);
+    }
+    const componentCount = Object.keys(partDefinitions).length;
+    const partCount = Object.keys(partDefinitions).reduce(
+        (count, component) => count + resolvedParts(component).length,
+        0,
+    );
+    console.log(
+        `Parts manifest verified: ${componentCount} components, ${partCount} component parts, 38 pt files, and 41 pt declarations.`,
+    );
+}
+
+const isMainModule = process.argv[1] === fileURLToPath(import.meta.url);
+if (isMainModule) main();
diff --git a/Source/types/ExactPartKeys.ts b/Source/types/ExactPartKeys.ts
new file mode 100644
index 00000000..ff874073
--- /dev/null
+++ b/Source/types/ExactPartKeys.ts
@@ -0,0 +1,10 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+/** Resolves to true only when a pass-through declaration has the expected keys. */
+export type ExactPartKeys<TParts, TExpected extends PropertyKey> = [
+    Exclude<keyof TParts, TExpected>,
+    Exclude<TExpected, keyof TParts>,
+] extends [never, never]
+    ? true
+    : never;
diff --git a/Source/types/index.ts b/Source/types/index.ts
index 04f79a1a..8a638503 100644
--- a/Source/types/index.ts
+++ b/Source/types/index.ts
@@ -2,4 +2,5 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 export * from './JsonSchema';
+export * from './parts';
 export * from './TypeFormat';
diff --git a/Source/types/parts.ts b/Source/types/parts.ts
new file mode 100644
index 00000000..9c8b4d55
--- /dev/null
+++ b/Source/types/parts.ts
@@ -0,0 +1,61 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @generated by Cratis — do not edit
+
+/** Stable data-cratis-part names exposed by each public component. */
+export const cratisParts = {
+    CheckboxField: ['root', 'input', 'box', 'indicator'],
+    RatingField: ['root', 'option', 'input', 'star'],
+    RadioButtonField: ['root', 'input', 'box', 'indicator'],
+    RadioGroupField: ['root', 'option', 'input', 'box', 'indicator'],
+    ChipsField: ['root', 'item', 'remove', 'input'],
+    ToggleSwitchField: ['root', 'input', 'control', 'handle'],
+    SliderField: ['root', 'input', 'value'],
+    NumberField: ['root', 'input'],
+    ColorPickerField: ['root', 'input', 'value'],
+    PasswordField: ['root', 'input', 'toggle'],
+    InputTextField: ['input'],
+    TextAreaField: ['textarea'],
+    Dropdown: ['root', 'value', 'filter', 'trigger', 'clear', 'popover', 'listbox', 'option', 'multiple', 'indicator'],
+    DropdownField: ['root', 'value', 'filter', 'trigger', 'clear', 'popover', 'listbox', 'option', 'multiple', 'indicator'],
+    MultiSelectField: ['root', 'value', 'filter', 'trigger', 'clear', 'popover', 'listbox', 'option', 'multiple', 'indicator'],
+    DatePickerInput: ['root', 'group', 'input', 'segment', 'placeholder', 'trigger', 'popover', 'dialog', 'calendar', 'header', 'previous', 'heading', 'next', 'grid', 'cell', 'button-bar', 'today', 'clear'],
+    CalendarField: ['root', 'group', 'input', 'segment', 'placeholder', 'trigger', 'popover', 'dialog', 'calendar', 'header', 'previous', 'heading', 'next', 'grid', 'cell', 'button-bar', 'today', 'clear'],
+    Button: ['root', 'spinner', 'icon', 'label'],
+    ActionMenubar: ['root', 'spinner', 'icon', 'label'],
+    Tooltip: ['trigger', 'popup'],
+    Dialog: ['backdrop', 'positioner', 'root', 'header', 'title', 'close', 'content', 'busy-scope', 'footer', 'confirm', 'cancel'],
+    CommandDialog: ['backdrop', 'positioner', 'root', 'header', 'title', 'close', 'content', 'busy-scope', 'footer', 'confirm', 'cancel'],
+    CommandStepper: ['root', 'list', 'step', 'header', 'number', 'title', 'separator', 'panels', 'panel'],
+    DataTableCore: ['root', 'search', 'search-input', 'table-container', 'table', 'head', 'header-row', 'header-cell', 'header-content', 'sort', 'body', 'empty-row', 'empty-cell', 'row', 'cell'],
+    DataTableForObservableQuery: ['root', 'search', 'search-input', 'table-container', 'table', 'head', 'header-row', 'header-cell', 'header-content', 'sort', 'body', 'empty-row', 'empty-cell', 'row', 'cell'],
+    DataTableForQuery: ['root', 'search', 'search-input', 'table-container', 'table', 'head', 'header-row', 'header-cell', 'header-content', 'sort', 'body', 'empty-row', 'empty-cell', 'row', 'cell'],
+    ColumnFilterMenu: ['filter-trigger', 'filter-popover', 'filter-menu', 'filter-actions'],
+    TablePaginator: ['root', 'range', 'info'],
+    Toaster: ['region', 'toast', 'icon', 'content', 'title', 'description', 'close', 'action'],
+    EventsView: ['timeline', 'event', 'separator', 'marker', 'connector', 'content'],
+    ChatSidebar: ['backdrop', 'root', 'header', 'back', 'title', 'close', 'content'],
+    Toolbar: ['root'],
+    ToolbarButton: ['button', 'icon', 'label'],
+    ToolbarFolder: ['toolbar-folder', 'toolbar-folder-trigger', 'toolbar-folder-panel'],
+    ToolbarFanOutItem: ['fanout-root', 'fanout-trigger', 'fanout-panel'],
+    ToolbarSeparator: ['toolbar-separator'],
+    ToolbarSection: ['toolbar-section', 'toolbar-context'],
+    ToolbarGroup: ['toolbar-group', 'toolbar-slot', 'toolbar-slot-incoming', 'toolbar-slot-outgoing'],
+    ToolbarLayout: ['toolbar-layout', 'toolbar-slot', 'toolbar-slot-incoming', 'toolbar-slot-outgoing'],
+    Skeleton: ['root'],
+    Message: ['root', 'icon', 'text'],
+    Badge: ['root'],
+    ProgressSpinner: ['root', 'svg', 'track', 'range'],
+    Avatar: ['root', 'image', 'fallback'],
+    Tag: ['root', 'icon', 'label'],
+    ProgressBar: ['root', 'indicator', 'label'],
+    Chip: ['root', 'icon', 'label', 'remove'],
+} as const;
+
+/** The canonical Components part-name manifest. */
+export type CratisPartsManifest = typeof cratisParts;
+
+/** Stable part names exposed by one component in the canonical manifest. */
+export type PartsOf<K extends keyof CratisPartsManifest> = CratisPartsManifest[K][number];

From 79835d6728f0437439efbd010d52fb1f5fc81206 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 13:53:56 +0200
Subject: [PATCH 140/267] pi-agent: Implement Button semantics

---
 .../CommandDialog/CommandStepperContent.tsx   |   2 +-
 Source/CommandDialog/StepperCommandDialog.tsx |   4 +-
 Source/Common/ActionMenubar.tsx               |  18 ++-
 Source/Common/Button.css                      |  40 +++---
 Source/Common/Button.stories.tsx              |  34 +++---
 Source/Common/Button.tsx                      | 115 ++++++++++++++++--
 Source/DataTables/ColumnFilterMenu.tsx        |  32 +++--
 Source/DataTables/TablePaginator.tsx          |   8 +-
 Source/Dialogs/Dialog.stories.tsx             |   2 +-
 Source/Notifications/Toaster.stories.tsx      |  10 +-
 .../ObjectNavigationalBar.tsx                 |   2 +-
 Source/SchemaEditor/SchemaEditor.tsx          |   2 +-
 Source/SchemaEditor/TypeCell.tsx              |  13 +-
 13 files changed, 199 insertions(+), 83 deletions(-)

diff --git a/Source/CommandDialog/CommandStepperContent.tsx b/Source/CommandDialog/CommandStepperContent.tsx
index caf9f85a..97981010 100644
--- a/Source/CommandDialog/CommandStepperContent.tsx
+++ b/Source/CommandDialog/CommandStepperContent.tsx
@@ -363,7 +363,7 @@ export const CommandStepperContent = ({
                 >
                     {!isFirstStep && (
                         <Button
-                            outlined
+                            variant='outline'
                             onClick={handlePrevious}
                             disabled={isBusy}
                             style={{ width: 'auto' }}
diff --git a/Source/CommandDialog/StepperCommandDialog.tsx b/Source/CommandDialog/StepperCommandDialog.tsx
index 8c81a678..9340eda4 100644
--- a/Source/CommandDialog/StepperCommandDialog.tsx
+++ b/Source/CommandDialog/StepperCommandDialog.tsx
@@ -305,7 +305,7 @@ const StepperCommandDialogWrapper = <TCommand extends object, TResponse = object
         >
             {showCancel && (
                 <Button
-                    outlined
+                    variant='outline'
                     onClick={() => handleClose(DialogResult.Cancelled)}
                     disabled={isBusy}
                     style={{ width: 'auto' }}
@@ -315,7 +315,7 @@ const StepperCommandDialogWrapper = <TCommand extends object, TResponse = object
             )}
             {!isFirstStep && (
                 <Button
-                    outlined
+                    variant='outline'
                     onClick={() => setActiveStep(Math.max(0, currentStep - 1))}
                     disabled={isBusy}
                     style={{ width: 'auto' }}
diff --git a/Source/Common/ActionMenubar.tsx b/Source/Common/ActionMenubar.tsx
index 1d1225ea..2eef4467 100644
--- a/Source/Common/ActionMenubar.tsx
+++ b/Source/Common/ActionMenubar.tsx
@@ -2,7 +2,7 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import { Fragment, type ReactNode } from 'react';
-import { Button, type ButtonParts, type ButtonSeverity } from './Button';
+import { Button, type ButtonParts, type ButtonSeverity, type ButtonTone } from './Button';
 
 /** A single action in an {@link ActionMenubar}. */
 export interface ActionMenuItem {
@@ -42,6 +42,16 @@ export interface ActionMenubarProps {
     unstyled?: boolean;
 }
 
+const buttonToneForSeverity: Record<ButtonSeverity, ButtonTone> = {
+    secondary: 'neutral',
+    info: 'accent',
+    help: 'accent',
+    success: 'positive',
+    warn: 'caution',
+    danger: 'critical',
+    contrast: 'neutral',
+};
+
 /** A horizontal, accessible toolbar of command actions. */
 export const ActionMenubar = ({
     model,
@@ -62,8 +72,10 @@ export const ActionMenubar = ({
             return (
                 <Button
                     key={index}
-                    text
-                    severity={item.severity}
+                    variant='ghost'
+                    tone={
+                        item.severity ? buttonToneForSeverity[item.severity] : undefined
+                    }
                     onClick={item.command}
                     disabled={item.disabled}
                     className={item.className}
diff --git a/Source/Common/Button.css b/Source/Common/Button.css
index beed5786..c9e1cca4 100644
--- a/Source/Common/Button.css
+++ b/Source/Common/Button.css
@@ -23,18 +23,18 @@
         color 140ms ease,
         opacity 140ms ease;
 }
-.cratis-button:not([data-severity])[data-variant='filled']:hover:not(:disabled) {
+.cratis-button:not([data-tone])[data-variant='solid']:hover:not(:disabled) {
     border-color: var(--cratis-action-background-hover);
     background: var(--cratis-action-background-hover);
 }
-.cratis-button:not([data-severity])[data-variant='filled']:active:not(:disabled) {
+.cratis-button:not([data-tone])[data-variant='solid']:active:not(:disabled) {
     border-color: var(--cratis-action-background-active);
     background: var(--cratis-action-background-active);
 }
-.cratis-button:is([data-variant='outlined'], [data-variant='text']):hover:not(:disabled) {
+.cratis-button:is([data-variant='outline'], [data-variant='ghost']):hover:not(:disabled) {
     background: color-mix(in srgb, currentColor 4%, transparent);
 }
-.cratis-button:is([data-variant='outlined'], [data-variant='text']):active:not(
+.cratis-button:is([data-variant='outline'], [data-variant='ghost']):active:not(
         :disabled
     ) {
     background: color-mix(in srgb, currentColor 16%, transparent);
@@ -57,7 +57,7 @@
     padding: 0.875rem 1.5rem;
     font-size: 1rem;
 }
-.cratis-button[data-rounded='true'],
+.cratis-button[data-shape='pill'],
 .cratis-button[data-icon-only='true'] {
     border-radius: 999px;
 }
@@ -72,12 +72,12 @@
     width: var(--cratis-control-height-large);
 }
 
-.cratis-button[data-variant='outlined'] {
+.cratis-button[data-variant='outline'] {
     border-color: currentColor;
     background: transparent;
     color: var(--cratis-primary-color);
 }
-.cratis-button[data-variant='text'] {
+.cratis-button[data-variant='ghost'] {
     background: transparent;
     color: var(--cratis-text-color);
 }
@@ -89,57 +89,57 @@
     text-decoration: underline;
 }
 
-.cratis-button[data-severity='secondary'] {
+.cratis-button[data-tone='neutral'] {
     --cratis-button-tone: var(--cratis-text-color);
     --cratis-button-fill: var(--cratis-surface-100);
     --cratis-button-fill-text: var(--cratis-text-color);
 }
-.cratis-button[data-severity='info'] {
+.cratis-button[data-tone='accent'] {
     --cratis-button-tone: var(--cratis-info-background);
     --cratis-button-fill: var(--cratis-info-background);
     --cratis-button-fill-text: var(--cratis-info-text);
 }
-.cratis-button[data-severity='success'] {
+.cratis-button[data-tone='positive'] {
     --cratis-button-tone: var(--cratis-success-background);
     --cratis-button-fill: var(--cratis-success-background);
     --cratis-button-fill-text: var(--cratis-success-text);
 }
-.cratis-button[data-severity='warn'] {
+.cratis-button[data-tone='caution'] {
     --cratis-button-tone: var(--cratis-warning-background);
     --cratis-button-fill: var(--cratis-warning-background);
     --cratis-button-fill-text: var(--cratis-warning-text);
 }
-.cratis-button[data-severity='danger'] {
+.cratis-button[data-tone='critical'] {
     --cratis-button-tone: var(--cratis-danger-background);
     --cratis-button-fill: var(--cratis-danger-background);
     --cratis-button-fill-text: var(--cratis-danger-text);
 }
-.cratis-button[data-severity='help'] {
+.cratis-button[data-tone='accent'][data-severity='help'] {
     --cratis-button-tone: var(--cratis-primary-600);
     --cratis-button-fill: var(--cratis-primary-600);
     --cratis-button-fill-text: #ffffff;
 }
-.cratis-button[data-severity='contrast'] {
+.cratis-button[data-tone='neutral'][data-severity='contrast'] {
     --cratis-button-tone: var(--cratis-text-color);
     --cratis-button-fill: var(--cratis-text-color);
     --cratis-button-fill-text: var(--cratis-surface-0);
 }
-.cratis-button[data-severity][data-variant='filled'] {
+.cratis-button[data-tone][data-variant='solid'] {
     border-color: var(--cratis-button-fill);
     background: var(--cratis-button-fill);
     color: var(--cratis-button-fill-text);
 }
-.cratis-button[data-severity][data-variant='filled']:hover:not(:disabled) {
+.cratis-button[data-tone][data-variant='solid']:hover:not(:disabled) {
     border-color: color-mix(in srgb, var(--cratis-button-fill) 88%, black);
     background: color-mix(in srgb, var(--cratis-button-fill) 88%, black);
 }
-.cratis-button[data-severity][data-variant='filled']:active:not(:disabled) {
+.cratis-button[data-tone][data-variant='solid']:active:not(:disabled) {
     border-color: color-mix(in srgb, var(--cratis-button-fill) 76%, black);
     background: color-mix(in srgb, var(--cratis-button-fill) 76%, black);
 }
-.cratis-button[data-severity]:is(
-        [data-variant='outlined'],
-        [data-variant='text'],
+.cratis-button[data-tone]:is(
+        [data-variant='outline'],
+        [data-variant='ghost'],
         [data-variant='link']
     ) {
     color: var(--cratis-button-tone);
diff --git a/Source/Common/Button.stories.tsx b/Source/Common/Button.stories.tsx
index aa02a511..d4597b30 100644
--- a/Source/Common/Button.stories.tsx
+++ b/Source/Common/Button.stories.tsx
@@ -32,14 +32,17 @@ export const IconOnly: Story = {
     args: {
         icon: <span aria-hidden='true'>◆</span>,
         'aria-label': 'Delete',
-        severity: 'danger',
+        tone: 'critical',
     },
 };
 export const Loading: Story = { args: { label: 'Saving', loading: true } };
-export const Text: Story = { args: { label: 'Cancel', text: true } };
-export const Link: Story = { args: { label: 'Learn more', link: true } };
-export const Outlined: Story = {
-    args: { label: 'Details', outlined: true, severity: 'secondary' },
+export const Ghost: Story = { args: { label: 'Cancel', variant: 'ghost' } };
+export const Link: Story = { args: { label: 'Learn more', variant: 'link' } };
+export const Outline: Story = {
+    args: { label: 'Details', variant: 'outline', tone: 'neutral' },
+};
+export const Pill: Story = {
+    args: { label: 'Continue', shape: 'pill' },
 };
 export const WithTooltip: Story = {
     args: {
@@ -54,13 +57,11 @@ export const VisualMatrix: Story = {
         <div style={{ display: 'grid', width: '100%', minWidth: 0, gap: '1rem' }}>
             <div style={matrixRowStyle}>
                 <Button label='Primary' />
-                <Button label='Secondary' severity='secondary' />
-                <Button label='Info' severity='info' />
-                <Button label='Success' severity='success' />
-                <Button label='Warning' severity='warn' />
-                <Button label='Danger' severity='danger' />
-                <Button label='Help' severity='help' />
-                <Button label='Contrast' severity='contrast' />
+                <Button label='Neutral' tone='neutral' />
+                <Button label='Accent' tone='accent' />
+                <Button label='Positive' tone='positive' />
+                <Button label='Caution' tone='caution' />
+                <Button label='Critical' tone='critical' />
             </div>
             <div style={matrixRowStyle}>
                 <Button label='Small' size='small' />
@@ -70,10 +71,11 @@ export const VisualMatrix: Story = {
                 <Button label='Loading' loading />
             </div>
             <div style={matrixRowStyle}>
-                <Button label='Filled' />
-                <Button label='Outlined' outlined />
-                <Button label='Text' text />
-                <Button label='Link' link />
+                <Button label='Solid' variant='solid' />
+                <Button label='Outline' variant='outline' />
+                <Button label='Ghost' variant='ghost' />
+                <Button label='Link' variant='link' />
+                <Button label='Pill' shape='pill' />
             </div>
         </div>
     ),
diff --git a/Source/Common/Button.tsx b/Source/Common/Button.tsx
index e9ac541a..e378eb10 100644
--- a/Source/Common/Button.tsx
+++ b/Source/Common/Button.tsx
@@ -12,7 +12,20 @@ import { Tooltip, type TooltipPosition } from './Tooltip';
 import type { ExactPartKeys } from '../types/ExactPartKeys';
 import type { PartsOf } from '../types/parts';
 
-/** Severity tone of a {@link Button}. */
+/** Visual treatment of a {@link Button}. */
+export type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'link';
+
+/** Semantic color of a {@link Button}. */
+export type ButtonTone = 'neutral' | 'accent' | 'positive' | 'caution' | 'critical';
+
+/** Border shape of a {@link Button}. */
+export type ButtonShape = 'default' | 'pill';
+
+/**
+ * Severity tone of a {@link Button}.
+ *
+ * @deprecated Use {@link ButtonTone} instead. Removed in 5.0.
+ */
 export type ButtonSeverity =
     'secondary' | 'info' | 'success' | 'warn' | 'help' | 'danger' | 'contrast';
 
@@ -48,15 +61,41 @@ export interface ButtonProps extends Omit<
     tooltipOptions?: { position?: TooltipPosition; className?: string };
     /** Cratis-owned per-part attributes. */
     pt?: ButtonParts;
-    /** Renders the button borderless. */
+    /** Visual treatment. Defaults to `solid`. */
+    variant?: ButtonVariant;
+    /** Semantic color. Omit for the familiar primary action. */
+    tone?: ButtonTone;
+    /** Border shape. Defaults to `default`. */
+    shape?: ButtonShape;
+    /**
+     * Renders the button borderless.
+     *
+     * @deprecated Use `variant='ghost'` instead. Removed in 5.0.
+     */
     text?: boolean;
-    /** Renders the button as an inline link. */
+    /**
+     * Renders the button as an inline link.
+     *
+     * @deprecated Use `variant='link'` instead. Removed in 5.0.
+     */
     link?: boolean;
-    /** Renders the button with an outline instead of a fill. */
+    /**
+     * Renders the button with an outline instead of a fill.
+     *
+     * @deprecated Use `variant='outline'` instead. Removed in 5.0.
+     */
     outlined?: boolean;
-    /** Renders the button fully rounded. */
+    /**
+     * Renders the button fully rounded.
+     *
+     * @deprecated Use `shape='pill'` instead. Removed in 5.0.
+     */
     rounded?: boolean;
-    /** Controls the button's coloring. Omit for the familiar primary action. */
+    /**
+     * Controls the button's coloring. Omit for the familiar primary action.
+     *
+     * @deprecated Use `tone` instead. Removed in 5.0.
+     */
     severity?: ButtonSeverity;
     /** Sizes the button. */
     size?: 'small' | 'normal' | 'large';
@@ -81,6 +120,43 @@ export interface ButtonProps extends Omit<
 const renderIcon = (icon: ReactNode) =>
     typeof icon === 'string' ? <i className={icon} aria-hidden='true' /> : icon;
 
+const toneForSeverity: Record<ButtonSeverity, ButtonTone> = {
+    secondary: 'neutral',
+    info: 'accent',
+    help: 'accent',
+    success: 'positive',
+    warn: 'caution',
+    danger: 'critical',
+    contrast: 'neutral',
+};
+
+const severityForTone: Record<ButtonTone, ButtonSeverity> = {
+    neutral: 'secondary',
+    accent: 'info',
+    positive: 'success',
+    caution: 'warn',
+    critical: 'danger',
+};
+
+type DeprecatedButtonProp = 'severity' | 'text' | 'link' | 'outlined' | 'rounded';
+
+const warnedDeprecatedProps = new Set<DeprecatedButtonProp>();
+
+const warnForDeprecatedProp = (prop: DeprecatedButtonProp) => {
+    const environment = (
+        globalThis as typeof globalThis & {
+            process?: { env?: { NODE_ENV?: string } };
+        }
+    ).process?.env?.NODE_ENV;
+
+    if (environment === 'production' || warnedDeprecatedProps.has(prop)) return;
+
+    warnedDeprecatedProps.add(prop);
+    console.warn(
+        `Button prop "${prop}" is deprecated and will be removed in 5.0. Use variant, tone, or shape instead.`,
+    );
+};
+
 /** A Cratis-owned button with stable parts and renderer-independent styling. */
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
     {
@@ -90,6 +166,9 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
         tooltip,
         tooltipOptions,
         pt,
+        variant,
+        tone,
+        shape,
         text,
         link,
         outlined,
@@ -109,7 +188,18 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
     },
     ref,
 ) {
-    const variant = link ? 'link' : text ? 'text' : outlined ? 'outlined' : 'filled';
+    if (text !== undefined) warnForDeprecatedProp('text');
+    if (link !== undefined) warnForDeprecatedProp('link');
+    if (outlined !== undefined) warnForDeprecatedProp('outlined');
+    if (rounded !== undefined) warnForDeprecatedProp('rounded');
+    if (severity !== undefined) warnForDeprecatedProp('severity');
+
+    const selectedVariant =
+        variant ?? (link ? 'link' : text ? 'ghost' : outlined ? 'outline' : 'solid');
+    const selectedTone = tone ?? (severity ? toneForSeverity[severity] : undefined);
+    const selectedShape = shape ?? (rounded ? 'pill' : 'default');
+    const legacySeverity = severity ?? (tone ? severityForTone[tone] : undefined);
+    const effectiveDisabled = Boolean(disabled || loading);
     const iconOnly = Boolean(icon) && label === undefined && !children;
     const rootClassName = ['cratis-button', pt?.root?.className, className]
         .filter(Boolean)
@@ -123,17 +213,20 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
             type={type}
             title={title}
             autoFocus={autoFocus}
-            disabled={disabled || loading}
+            disabled={effectiveDisabled}
             onClick={onClick}
             className={rootClassName}
             style={{ ...pt?.root?.style, ...style }}
             aria-label={ariaLabel}
             aria-busy={loading || undefined}
             data-cratis-part='root'
-            data-variant={variant}
-            data-severity={severity}
+            data-variant={selectedVariant}
+            data-tone={selectedTone}
+            data-severity={legacySeverity}
+            data-shape={selectedShape}
             data-size={size}
-            data-rounded={rounded || undefined}
+            data-disabled={effectiveDisabled || undefined}
+            data-loading={loading || undefined}
             data-icon-only={iconOnly || undefined}
         >
             {loading ? (
diff --git a/Source/DataTables/ColumnFilterMenu.tsx b/Source/DataTables/ColumnFilterMenu.tsx
index 484244a9..3b65b902 100644
--- a/Source/DataTables/ColumnFilterMenu.tsx
+++ b/Source/DataTables/ColumnFilterMenu.tsx
@@ -221,10 +221,22 @@ export const ColumnFilterMenu = ({
             labels?.matchModeLabel ??
             columnFilterMessages?.matchModeLabel ??
             defaultColumnFilterMenuLabels.matchModeLabel,
-        clear: labels?.clear ?? columnFilterMessages?.clear ?? defaultColumnFilterMenuLabels.clear,
-        apply: labels?.apply ?? columnFilterMessages?.apply ?? defaultColumnFilterMenuLabels.apply,
-        true: labels?.true ?? columnFilterMessages?.true ?? defaultColumnFilterMenuLabels.true,
-        false: labels?.false ?? columnFilterMessages?.false ?? defaultColumnFilterMenuLabels.false,
+        clear:
+            labels?.clear ??
+            columnFilterMessages?.clear ??
+            defaultColumnFilterMenuLabels.clear,
+        apply:
+            labels?.apply ??
+            columnFilterMessages?.apply ??
+            defaultColumnFilterMenuLabels.apply,
+        true:
+            labels?.true ??
+            columnFilterMessages?.true ??
+            defaultColumnFilterMenuLabels.true,
+        false:
+            labels?.false ??
+            columnFilterMessages?.false ??
+            defaultColumnFilterMenuLabels.false,
     };
     const modeOptions = optionsFor(dataType).map((option) => ({
         ...option,
@@ -331,10 +343,7 @@ export const ColumnFilterMenu = ({
             <AriaButton
                 {...asReactAriaButtonProps(pt?.trigger)}
                 aria-label={resolvedLabels.filterTriggerAriaLabel(field)}
-                className={classNames(
-                    'cratis-filter-trigger',
-                    pt?.trigger?.className,
-                )}
+                className={classNames('cratis-filter-trigger', pt?.trigger?.className)}
                 data-active={
                     (constraint?.value !== null &&
                         constraint?.value !== undefined &&
@@ -347,10 +356,7 @@ export const ColumnFilterMenu = ({
             </AriaButton>
             <Popover
                 {...pt?.popover}
-                className={classNames(
-                    'cratis-filter-popover',
-                    pt?.popover?.className,
-                )}
+                className={classNames('cratis-filter-popover', pt?.popover?.className)}
                 data-cratis-part='filter-popover'
                 placement='bottom end'
             >
@@ -383,7 +389,7 @@ export const ColumnFilterMenu = ({
                         data-cratis-part='filter-actions'
                     >
                         <Button
-                            outlined
+                            variant='outline'
                             onClick={clear}
                             label={resolvedLabels.clear}
                             pt={pt?.clear}
diff --git a/Source/DataTables/TablePaginator.tsx b/Source/DataTables/TablePaginator.tsx
index 694b9845..fa797db0 100644
--- a/Source/DataTables/TablePaginator.tsx
+++ b/Source/DataTables/TablePaginator.tsx
@@ -106,7 +106,7 @@ export const TablePaginator = ({
                 </span>
             )}
             <Button
-                text
+                variant='ghost'
                 disabled={isFirst}
                 onClick={() => onPageChange(0)}
                 aria-label={labels.first}
@@ -115,7 +115,7 @@ export const TablePaginator = ({
                 <span aria-hidden='true'>«</span>
             </Button>
             <Button
-                text
+                variant='ghost'
                 disabled={isFirst}
                 onClick={() => onPageChange(page - 1)}
                 aria-label={labels.previous}
@@ -133,7 +133,7 @@ export const TablePaginator = ({
                 {page + 1} / {Math.max(pageCount, 1)}
             </span>
             <Button
-                text
+                variant='ghost'
                 disabled={isLast}
                 onClick={() => onPageChange(page + 1)}
                 aria-label={labels.next}
@@ -142,7 +142,7 @@ export const TablePaginator = ({
                 <span aria-hidden='true'>›</span>
             </Button>
             <Button
-                text
+                variant='ghost'
                 disabled={isLast}
                 onClick={() => onPageChange(pageCount - 1)}
                 aria-label={labels.last}
diff --git a/Source/Dialogs/Dialog.stories.tsx b/Source/Dialogs/Dialog.stories.tsx
index ec7fdbe6..bc18f323 100644
--- a/Source/Dialogs/Dialog.stories.tsx
+++ b/Source/Dialogs/Dialog.stories.tsx
@@ -265,7 +265,7 @@ export const CustomButtons: Story = {
                     buttons={
                         <>
                             <Button
-                                severity='secondary'
+                                tone='neutral'
                                 onClick={() =>
                                     closeDialog(DialogResult.Ok, { action: 'draft' })
                                 }
diff --git a/Source/Notifications/Toaster.stories.tsx b/Source/Notifications/Toaster.stories.tsx
index ee247abd..b8377214 100644
--- a/Source/Notifications/Toaster.stories.tsx
+++ b/Source/Notifications/Toaster.stories.tsx
@@ -55,7 +55,7 @@ export const Playground: Story = {
                 <span>Success</span>
             </Button>
             <Button
-                severity='info'
+                tone='accent'
                 onClick={() =>
                     toast.info({
                         title: 'Heads up',
@@ -66,7 +66,7 @@ export const Playground: Story = {
                 <span>Info</span>
             </Button>
             <Button
-                severity='warn'
+                tone='caution'
                 onClick={() =>
                     toast.warn({
                         title: 'Careful',
@@ -77,7 +77,7 @@ export const Playground: Story = {
                 <span>Warn</span>
             </Button>
             <Button
-                severity='danger'
+                tone='critical'
                 onClick={() =>
                     toast.error({ title: 'Failed', description: 'Please try again.' })
                 }
@@ -85,7 +85,7 @@ export const Playground: Story = {
                 <span>Error</span>
             </Button>
             <Button
-                outlined
+                variant='outline'
                 onClick={() =>
                     toastCommandResult(
                         makeResult({
@@ -103,7 +103,7 @@ export const Playground: Story = {
                 <span>Command validation failure</span>
             </Button>
             <Button
-                outlined
+                variant='outline'
                 onClick={() =>
                     toastCommandResult(makeResult({ isSuccess: true }), {
                         successTitle: 'Author registered',
diff --git a/Source/ObjectNavigationalBar/ObjectNavigationalBar.tsx b/Source/ObjectNavigationalBar/ObjectNavigationalBar.tsx
index 5b14c482..b672399b 100644
--- a/Source/ObjectNavigationalBar/ObjectNavigationalBar.tsx
+++ b/Source/ObjectNavigationalBar/ObjectNavigationalBar.tsx
@@ -58,7 +58,7 @@ export function ObjectNavigationalBar({
             <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
                 <Tooltip content={backLabel} position='top'>
                     <Button
-                        text
+                        variant='ghost'
                         size='small'
                         icon={<faIcons.FaArrowLeft />}
                         onClick={() => onNavigate(navigationPath.length - 1)}
diff --git a/Source/SchemaEditor/SchemaEditor.tsx b/Source/SchemaEditor/SchemaEditor.tsx
index 5f02116c..20a5ba4e 100644
--- a/Source/SchemaEditor/SchemaEditor.tsx
+++ b/Source/SchemaEditor/SchemaEditor.tsx
@@ -691,7 +691,7 @@ export const SchemaEditor = ({
                 <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
                     <Tooltip content={l.navigateBack} position='top'>
                         <Button
-                            text
+                            variant='ghost'
                             size='small'
                             icon={<faIcons.FaArrowLeft />}
                             onClick={navigateBack}
diff --git a/Source/SchemaEditor/TypeCell.tsx b/Source/SchemaEditor/TypeCell.tsx
index 1e5a1721..30bf3c28 100644
--- a/Source/SchemaEditor/TypeCell.tsx
+++ b/Source/SchemaEditor/TypeCell.tsx
@@ -157,7 +157,10 @@ export const TypeCell = ({
     }
 
     return (
-        <div className='cratis:flex cratis:items-center cratis:gap-2 cratis:w-full' style={{ minHeight: '2.5rem' }}>
+        <div
+            className='cratis:flex cratis:items-center cratis:gap-2 cratis:w-full'
+            style={{ minHeight: '2.5rem' }}
+        >
             <Dropdown<string>
                 aria-label={labels.propertyType}
                 value={currentValue}
@@ -204,7 +207,7 @@ export const TypeCell = ({
                     rowData.name && (
                         <Tooltip content={labels.navigateToItemDefinition} position='top'>
                             <Button
-                                text
+                                variant='ghost'
                                 size='small'
                                 icon={<faIcons.FaArrowRight />}
                                 onClick={() => onNavigateToArrayItems(rowData.name!)}
@@ -215,7 +218,7 @@ export const TypeCell = ({
                 {rowData.type === 'object' && rowData.name && (
                     <Tooltip content={labels.navigateToProperties} position='top'>
                         <Button
-                            text
+                            variant='ghost'
                             size='small'
                             icon={<faIcons.FaArrowRight />}
                             onClick={() => onNavigateToProperty(rowData.name!)}
@@ -226,8 +229,8 @@ export const TypeCell = ({
                 {rowData.name && (
                     <Tooltip content={labels.deleteProperty} position='top'>
                         <Button
-                            text
-                            severity='danger'
+                            variant='ghost'
+                            tone='critical'
                             size='small'
                             icon={<faIcons.FaTrash />}
                             onClick={() => onRemoveProperty(rowData.name!)}

From 8824df722be2508214bc4e6bfe3f56e503966758 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 14:13:04 +0200
Subject: [PATCH 141/267] Complete Button semantic compatibility

---
 .../CommandDialog/CommandDialog.stories.tsx   | 30 +++++++++----------
 .../CommandDialog/CommandStepper.stories.tsx  | 10 +++----
 .../StepperCommandDialog.stories.tsx          | 16 +++++-----
 Source/Common/Button.css                      |  2 ++
 Source/Common/Button.tsx                      |  2 +-
 Source/Common/ErrorBoundary.stories.tsx       |  2 +-
 Source/DataPage/DataPage.stories.tsx          |  2 +-
 Source/DataTables/ColumnFilterMenu.tsx        | 30 ++++++++-----------
 .../ObjectContentEditor.stories.tsx           |  2 +-
 Source/PivotViewer/PivotViewer.stories.tsx    |  8 +++--
 Source/SchemaEditor/TypeCell.tsx              |  5 +---
 11 files changed, 53 insertions(+), 56 deletions(-)

diff --git a/Source/CommandDialog/CommandDialog.stories.tsx b/Source/CommandDialog/CommandDialog.stories.tsx
index 5e31d483..a180a473 100644
--- a/Source/CommandDialog/CommandDialog.stories.tsx
+++ b/Source/CommandDialog/CommandDialog.stories.tsx
@@ -168,7 +168,7 @@ export const Default: Story = {
 
         return (
             <div className="storybook-wrapper">
-                <button className="cratis-button cratis:mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={async () => {
+                <button className="cratis-button cratis:mb-3" data-variant="solid" data-tone="neutral" data-severity="secondary" data-shape="default" data-size="normal" onClick={async () => {
                     const [dialogResult, commandResult] = await showUpdateUserDialog();
                     if (dialogResult === DialogResult.Ok && commandResult) {
                         setResult(JSON.stringify(commandResult));
@@ -198,7 +198,7 @@ export const WithServerValidation: Story = {
 
         return (
             <div className="storybook-wrapper">
-                <button className="cratis-button cratis:mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => {
+                <button className="cratis-button cratis:mb-3" data-variant="solid" data-tone="neutral" data-severity="secondary" data-shape="default" data-size="normal" onClick={() => {
                     setVisible(true);
                     setValidationErrors([]);
                     setResult('');
@@ -276,7 +276,7 @@ export const WithInitialValues: Story = {
             <div className="storybook-wrapper">
                 <div style={{ display: 'flex', gap: '0.5rem', marginBottom: '1rem' }}>
                     {users.map(user => (
-                        <button key={user.email} className="cratis-button" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => handleEdit(user)}>
+                        <button key={user.email} className="cratis-button" data-variant="solid" data-tone="neutral" data-severity="secondary" data-shape="default" data-size="normal" onClick={() => handleEdit(user)}>
                             Edit {user.name}</button>
                     ))}
                 </div>
@@ -319,7 +319,7 @@ export const WithCustomValidation: Story = {
 
         return (
             <div className="storybook-wrapper">
-                <button className="cratis-button cratis:mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => {
+                <button className="cratis-button cratis:mb-3" data-variant="solid" data-tone="neutral" data-severity="secondary" data-shape="default" data-size="normal" onClick={() => {
                     setResult('');
                     setVisible(true);
                 }}>
@@ -379,7 +379,7 @@ export const ValidationOnBlur: Story = {
 
         return (
             <div className="storybook-wrapper">
-                <button className="cratis-button cratis:mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => setVisible(true)}>
+                <button className="cratis-button cratis:mb-3" data-variant="solid" data-tone="neutral" data-severity="secondary" data-shape="default" data-size="normal" onClick={() => setVisible(true)}>
                     Open Dialog
                 </button>
                 <CommandDialog<UpdateUserCommand>
@@ -409,7 +409,7 @@ export const ValidationOnChange: Story = {
 
         return (
             <div className="storybook-wrapper">
-                <button className="cratis-button cratis:mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => setVisible(true)}>
+                <button className="cratis-button cratis:mb-3" data-variant="solid" data-tone="neutral" data-severity="secondary" data-shape="default" data-size="normal" onClick={() => setVisible(true)}>
                     Open Dialog
                 </button>
                 <CommandDialog<UpdateUserCommand>
@@ -439,7 +439,7 @@ export const ValidateOnInit: Story = {
 
         return (
             <div className="storybook-wrapper">
-                <button className="cratis-button cratis:mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => setVisible(true)}>
+                <button className="cratis-button cratis:mb-3" data-variant="solid" data-tone="neutral" data-severity="secondary" data-shape="default" data-size="normal" onClick={() => setVisible(true)}>
                     Open Dialog
                 </button>
                 <CommandDialog<UpdateUserCommand>
@@ -470,7 +470,7 @@ export const ValidateAllFieldsOnChange: Story = {
 
         return (
             <div className="storybook-wrapper">
-                <button className="cratis-button cratis:mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => setVisible(true)}>
+                <button className="cratis-button cratis:mb-3" data-variant="solid" data-tone="neutral" data-severity="secondary" data-shape="default" data-size="normal" onClick={() => setVisible(true)}>
                     Open Dialog
                 </button>
                 <CommandDialog<UpdateUserCommand>
@@ -502,7 +502,7 @@ export const BeforeExecute: Story = {
 
         return (
             <div className="storybook-wrapper">
-                <button className="cratis-button cratis:mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => { setVisible(true); setPreprocessedData(''); }}>
+                <button className="cratis-button cratis:mb-3" data-variant="solid" data-tone="neutral" data-severity="secondary" data-shape="default" data-size="normal" onClick={() => { setVisible(true); setPreprocessedData(''); }}>
                     Open Dialog
                 </button>
 
@@ -546,7 +546,7 @@ export const WithIcons: Story = {
 
         return (
             <div className="storybook-wrapper">
-                <button className="cratis-button cratis:mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => setVisible(true)}>
+                <button className="cratis-button cratis:mb-3" data-variant="solid" data-tone="neutral" data-severity="secondary" data-shape="default" data-size="normal" onClick={() => setVisible(true)}>
                     Open Dialog
                 </button>
                 <CommandDialog<UpdateUserCommand>
@@ -640,7 +640,7 @@ export const MultiColumnLayout: Story = {
 
         return (
             <div className="storybook-wrapper">
-                <button className="cratis-button cratis:mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => setVisible(true)}>
+                <button className="cratis-button cratis:mb-3" data-variant="solid" data-tone="neutral" data-severity="secondary" data-shape="default" data-size="normal" onClick={() => setVisible(true)}>
                     Open Dialog
                 </button>
                 <CommandDialog<UpdateProfileCommand>
@@ -678,7 +678,7 @@ export const MixedChildren: Story = {
 
         return (
             <div className="storybook-wrapper">
-                <button className="cratis-button cratis:mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => setVisible(true)}>
+                <button className="cratis-button cratis:mb-3" data-variant="solid" data-tone="neutral" data-severity="secondary" data-shape="default" data-size="normal" onClick={() => setVisible(true)}>
                     Open Dialog
                 </button>
                 <CommandDialog<UpdateProfileCommand>
@@ -715,7 +715,7 @@ export const WithBusyState: Story = {
 
         return (
             <div className="storybook-wrapper">
-                <button className="cratis-button cratis:mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => {
+                <button className="cratis-button cratis:mb-3" data-variant="solid" data-tone="neutral" data-severity="secondary" data-shape="default" data-size="normal" onClick={() => {
                     setResult('');
                     setVisible(true);
                 }}>
@@ -807,7 +807,7 @@ export const WithResponseTypeAndCallbacks: Story = {
 
         return (
             <div className="storybook-wrapper">
-                <button className="cratis-button cratis:mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => {
+                <button className="cratis-button cratis:mb-3" data-variant="solid" data-tone="neutral" data-severity="secondary" data-shape="default" data-size="normal" onClick={() => {
                     setResult('');
                     setError('');
                     setVisible(true);
@@ -930,7 +930,7 @@ export const DestructiveCommandFocusesDismiss: Story = {
 
         return (
             <div className="storybook-wrapper">
-                <button className="cratis-button cratis:mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={async () => {
+                <button className="cratis-button cratis:mb-3" data-variant="solid" data-tone="neutral" data-severity="secondary" data-shape="default" data-size="normal" onClick={async () => {
                     const [dialogResult] = await showDeletePersonalDataDialog();
                     setResult(dialogResult === DialogResult.Ok ? 'Deleted' : 'Kept');
                 }}>
diff --git a/Source/CommandDialog/CommandStepper.stories.tsx b/Source/CommandDialog/CommandStepper.stories.tsx
index 6601df74..8cdb7f71 100644
--- a/Source/CommandDialog/CommandStepper.stories.tsx
+++ b/Source/CommandDialog/CommandStepper.stories.tsx
@@ -172,8 +172,8 @@ export const InDialogFrame: Story = {
                         )}
                     </div>
                     <div className="command-stepper-stories-footer">
-                        <button className="cratis-button" data-variant="outlined" data-severity="secondary" data-size="normal" >Cancel</button>
-                        <button  className="cratis-button" data-variant="filled" data-severity="secondary" data-size="normal" >Create</button>
+                        <button className="cratis-button" data-variant="outline" data-tone="neutral" data-severity="secondary" data-shape="default" data-size="normal" >Cancel</button>
+                        <button  className="cratis-button" data-variant="solid" data-tone="neutral" data-severity="secondary" data-shape="default" data-size="normal" >Create</button>
                     </div>
                 </div>
             </div>
@@ -235,8 +235,8 @@ export const InDialogFrameWithCenteredHeader: Story = {
                         )}
                     </div>
                     <div className="command-stepper-stories-footer">
-                        <button className="cratis-button" data-variant="outlined" data-severity="secondary" data-size="normal" >Cancel</button>
-                        <button  className="cratis-button" data-variant="filled" data-severity="secondary" data-size="normal" >Complete</button>
+                        <button className="cratis-button" data-variant="outline" data-tone="neutral" data-severity="secondary" data-shape="default" data-size="normal" >Cancel</button>
+                        <button  className="cratis-button" data-variant="solid" data-tone="neutral" data-severity="secondary" data-shape="default" data-size="normal" >Complete</button>
                     </div>
                 </div>
             </div>
@@ -362,7 +362,7 @@ export const ConditionalSteps: Story = {
 
         return (
             <div style={{ width: '600px', padding: '1.5rem' }}>
-                <button className="cratis-button cratis:mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => setIncludeBudgetStep(current => !current)}>{includeBudgetStep ? 'Hide the optional Budget step' : 'Show the optional Budget step'}</button>
+                <button className="cratis-button cratis:mb-3" data-variant="solid" data-tone="neutral" data-severity="secondary" data-shape="default" data-size="normal" onClick={() => setIncludeBudgetStep(current => !current)}>{includeBudgetStep ? 'Hide the optional Budget step' : 'Show the optional Budget step'}</button>
                 <p className="cratis:mb-3 cratis:text-sm text-color-secondary">
                     The Budget step is currently <strong>{includeBudgetStep ? 'shown' : 'hidden'}</strong>, so the
                     wizard has {includeBudgetStep ? 'three' : 'two'} steps.
diff --git a/Source/CommandDialog/StepperCommandDialog.stories.tsx b/Source/CommandDialog/StepperCommandDialog.stories.tsx
index c08fefae..a9ec3205 100644
--- a/Source/CommandDialog/StepperCommandDialog.stories.tsx
+++ b/Source/CommandDialog/StepperCommandDialog.stories.tsx
@@ -134,7 +134,7 @@ export const Default: Story = {
 
         return (
             <div className="storybook-wrapper">
-                <button className="cratis-button cratis:mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={async () => {
+                <button className="cratis-button cratis:mb-3" data-variant="solid" data-tone="neutral" data-severity="secondary" data-shape="default" data-size="normal" onClick={async () => {
                     const [dialogResult, commandResult] = await showCreateProjectDialog();
                     if (dialogResult === DialogResult.Ok && commandResult) {
                         setResult(JSON.stringify(commandResult));
@@ -165,7 +165,7 @@ export const ThreeSteps: Story = {
 
         return (
             <div className="storybook-wrapper">
-                <button className="cratis-button cratis:mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => {
+                <button className="cratis-button cratis:mb-3" data-variant="solid" data-tone="neutral" data-severity="secondary" data-shape="default" data-size="normal" onClick={() => {
                     setVisible(true);
                     setResult('');
                 }}>
@@ -235,7 +235,7 @@ export const WithValidationIndicators: Story = {
                     <code>validateOnInit</code> triggers validation immediately — step indicators appear on
                     any step whose fields are invalid right from the start.
                 </p>
-                <button className="cratis-button cratis:mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => setVisible(true)}>
+                <button className="cratis-button cratis:mb-3" data-variant="solid" data-tone="neutral" data-severity="secondary" data-shape="default" data-size="normal" onClick={() => setVisible(true)}>
                     Open Dialog
                 </button>
 
@@ -291,7 +291,7 @@ export const WithBusyState: Story = {
                 <p className="cratis:mb-3 cratis:text-sm text-color-secondary">
                     Simulates a 2-second server delay. Fill all fields and click Submit to see the busy state.
                 </p>
-                <button className="cratis-button cratis:mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => setVisible(true)}>
+                <button className="cratis-button cratis:mb-3" data-variant="solid" data-tone="neutral" data-severity="secondary" data-shape="default" data-size="normal" onClick={() => setVisible(true)}>
                     Open Dialog
                 </button>
 
@@ -395,7 +395,7 @@ export const WithResponseTypeAndCallbacks: Story = {
 
         return (
             <div className="storybook-wrapper">
-                <button className="cratis-button cratis:mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => {
+                <button className="cratis-button cratis:mb-3" data-variant="solid" data-tone="neutral" data-severity="secondary" data-shape="default" data-size="normal" onClick={() => {
                     setResult('');
                     setError('');
                     setVisible(true);
@@ -485,7 +485,7 @@ export const WithFooterCancel: Story = {
                     The footer leads with a renamed Cancel. Fill both steps and click Create to run a 2-second
                     command — while it runs, neither the footer Cancel nor the header X can dismiss the dialog.
                 </p>
-                <button className="cratis-button cratis:mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => {
+                <button className="cratis-button cratis:mb-3" data-variant="solid" data-tone="neutral" data-severity="secondary" data-shape="default" data-size="normal" onClick={() => {
                     setOutcome('');
                     setVisible(true);
                 }}>
@@ -561,8 +561,8 @@ export const ConditionalSteps: Story = {
 
         return (
             <div className="storybook-wrapper">
-                <button className="cratis-button cratis:mb-3" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => setIncludeBudgetStep(current => !current)}>{includeBudgetStep ? 'Hide the optional Budget step' : 'Show the optional Budget step'}</button>
-                <button className="cratis-button cratis:mb-3 cratis:ml-2" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => {
+                <button className="cratis-button cratis:mb-3" data-variant="solid" data-tone="neutral" data-severity="secondary" data-shape="default" data-size="normal" onClick={() => setIncludeBudgetStep(current => !current)}>{includeBudgetStep ? 'Hide the optional Budget step' : 'Show the optional Budget step'}</button>
+                <button className="cratis-button cratis:mb-3 cratis:ml-2" data-variant="solid" data-tone="neutral" data-severity="secondary" data-shape="default" data-size="normal" onClick={() => {
                     setResult('');
                     setVisible(true);
                 }}>
diff --git a/Source/Common/Button.css b/Source/Common/Button.css
index c9e1cca4..8f6379fa 100644
--- a/Source/Common/Button.css
+++ b/Source/Common/Button.css
@@ -78,12 +78,14 @@
     color: var(--cratis-primary-color);
 }
 .cratis-button[data-variant='ghost'] {
+    border-color: transparent;
     background: transparent;
     color: var(--cratis-text-color);
 }
 .cratis-button[data-variant='link'] {
     min-height: auto;
     padding: 0;
+    border-color: transparent;
     background: transparent;
     color: var(--cratis-primary-color);
     text-decoration: underline;
diff --git a/Source/Common/Button.tsx b/Source/Common/Button.tsx
index e378eb10..12da6e45 100644
--- a/Source/Common/Button.tsx
+++ b/Source/Common/Button.tsx
@@ -198,7 +198,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
         variant ?? (link ? 'link' : text ? 'ghost' : outlined ? 'outline' : 'solid');
     const selectedTone = tone ?? (severity ? toneForSeverity[severity] : undefined);
     const selectedShape = shape ?? (rounded ? 'pill' : 'default');
-    const legacySeverity = severity ?? (tone ? severityForTone[tone] : undefined);
+    const legacySeverity = tone ? severityForTone[tone] : severity;
     const effectiveDisabled = Boolean(disabled || loading);
     const iconOnly = Boolean(icon) && label === undefined && !children;
     const rootClassName = ['cratis-button', pt?.root?.className, className]
diff --git a/Source/Common/ErrorBoundary.stories.tsx b/Source/Common/ErrorBoundary.stories.tsx
index 0215bfbf..85be53a1 100644
--- a/Source/Common/ErrorBoundary.stories.tsx
+++ b/Source/Common/ErrorBoundary.stories.tsx
@@ -24,7 +24,7 @@ const ErrorThrowingComponent = () => {
     return (
         <div className="cratis:p-4">
             <h2 className="cratis:text-xl cratis:mb-3">Click the button to trigger an error</h2>
-            <button className="cratis-button" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => setShouldThrow(true)}>
+            <button className="cratis-button" data-variant="solid" data-tone="neutral" data-severity="secondary" data-shape="default" data-size="normal" onClick={() => setShouldThrow(true)}>
                 Throw Error
             </button>
         </div>
diff --git a/Source/DataPage/DataPage.stories.tsx b/Source/DataPage/DataPage.stories.tsx
index 1a95e7e7..2a98f1b3 100644
--- a/Source/DataPage/DataPage.stories.tsx
+++ b/Source/DataPage/DataPage.stories.tsx
@@ -303,7 +303,7 @@ const PersonDetailsWithRefresh = ({
                     <strong>Role:</strong> {item.role}
                 </div>
             </div>
-            <button className="cratis-button" data-variant="filled" data-severity="secondary" data-size="normal" onClick={() => {
+            <button className="cratis-button" data-variant="solid" data-tone="neutral" data-severity="secondary" data-shape="default" data-size="normal" onClick={() => {
                 alert(`Saved changes for ${item.name}`);
                 onRefresh?.();
             }}>
diff --git a/Source/DataTables/ColumnFilterMenu.tsx b/Source/DataTables/ColumnFilterMenu.tsx
index 3b65b902..ad88d25f 100644
--- a/Source/DataTables/ColumnFilterMenu.tsx
+++ b/Source/DataTables/ColumnFilterMenu.tsx
@@ -221,22 +221,10 @@ export const ColumnFilterMenu = ({
             labels?.matchModeLabel ??
             columnFilterMessages?.matchModeLabel ??
             defaultColumnFilterMenuLabels.matchModeLabel,
-        clear:
-            labels?.clear ??
-            columnFilterMessages?.clear ??
-            defaultColumnFilterMenuLabels.clear,
-        apply:
-            labels?.apply ??
-            columnFilterMessages?.apply ??
-            defaultColumnFilterMenuLabels.apply,
-        true:
-            labels?.true ??
-            columnFilterMessages?.true ??
-            defaultColumnFilterMenuLabels.true,
-        false:
-            labels?.false ??
-            columnFilterMessages?.false ??
-            defaultColumnFilterMenuLabels.false,
+        clear: labels?.clear ?? columnFilterMessages?.clear ?? defaultColumnFilterMenuLabels.clear,
+        apply: labels?.apply ?? columnFilterMessages?.apply ?? defaultColumnFilterMenuLabels.apply,
+        true: labels?.true ?? columnFilterMessages?.true ?? defaultColumnFilterMenuLabels.true,
+        false: labels?.false ?? columnFilterMessages?.false ?? defaultColumnFilterMenuLabels.false,
     };
     const modeOptions = optionsFor(dataType).map((option) => ({
         ...option,
@@ -343,7 +331,10 @@ export const ColumnFilterMenu = ({
             <AriaButton
                 {...asReactAriaButtonProps(pt?.trigger)}
                 aria-label={resolvedLabels.filterTriggerAriaLabel(field)}
-                className={classNames('cratis-filter-trigger', pt?.trigger?.className)}
+                className={classNames(
+                    'cratis-filter-trigger',
+                    pt?.trigger?.className,
+                )}
                 data-active={
                     (constraint?.value !== null &&
                         constraint?.value !== undefined &&
@@ -356,7 +347,10 @@ export const ColumnFilterMenu = ({
             </AriaButton>
             <Popover
                 {...pt?.popover}
-                className={classNames('cratis-filter-popover', pt?.popover?.className)}
+                className={classNames(
+                    'cratis-filter-popover',
+                    pt?.popover?.className,
+                )}
                 data-cratis-part='filter-popover'
                 placement='bottom end'
             >
diff --git a/Source/ObjectContentEditor/ObjectContentEditor.stories.tsx b/Source/ObjectContentEditor/ObjectContentEditor.stories.tsx
index 5b259472..5cbe0fa2 100644
--- a/Source/ObjectContentEditor/ObjectContentEditor.stories.tsx
+++ b/Source/ObjectContentEditor/ObjectContentEditor.stories.tsx
@@ -216,7 +216,7 @@ export const EditModeWithValidation: Story = {
                     onValidationChange={setHasErrors}
                 />
                 <div className="cratis:mt-4">
-                    <button className="cratis-button" data-variant="filled" data-severity="secondary" data-size="normal" disabled={hasErrors}
+                    <button className="cratis-button" data-variant="solid" data-tone="neutral" data-severity="secondary" data-shape="default" data-size="normal" data-disabled={hasErrors || undefined} disabled={hasErrors}
                     onClick={() => alert('Saved: ' + JSON.stringify(obj, null, 2))}>
                         Save
                     </button>
diff --git a/Source/PivotViewer/PivotViewer.stories.tsx b/Source/PivotViewer/PivotViewer.stories.tsx
index 9c9f1290..03cc598c 100644
--- a/Source/PivotViewer/PivotViewer.stories.tsx
+++ b/Source/PivotViewer/PivotViewer.stories.tsx
@@ -330,8 +330,10 @@ export const Default: Story = {
                                     onClick={onClose}
                                     title='Close'
                                     className='cratis-button'
-                                    data-variant='text'
+                                    data-variant='ghost'
+                                    data-tone='neutral'
                                     data-severity='secondary'
+                                    data-shape='default'
                                     data-size='normal'
                                 >
                                     Close
@@ -514,8 +516,10 @@ export const LargeDataset: Story = {
                                     onClick={onClose}
                                     title='Close'
                                     className='cratis-button'
-                                    data-variant='text'
+                                    data-variant='ghost'
+                                    data-tone='neutral'
                                     data-severity='secondary'
+                                    data-shape='default'
                                     data-size='normal'
                                 >
                                     Close
diff --git a/Source/SchemaEditor/TypeCell.tsx b/Source/SchemaEditor/TypeCell.tsx
index 30bf3c28..de2bab98 100644
--- a/Source/SchemaEditor/TypeCell.tsx
+++ b/Source/SchemaEditor/TypeCell.tsx
@@ -157,10 +157,7 @@ export const TypeCell = ({
     }
 
     return (
-        <div
-            className='cratis:flex cratis:items-center cratis:gap-2 cratis:w-full'
-            style={{ minHeight: '2.5rem' }}
-        >
+        <div className='cratis:flex cratis:items-center cratis:gap-2 cratis:w-full' style={{ minHeight: '2.5rem' }}>
             <Dropdown<string>
                 aria-label={labels.propertyType}
                 value={currentValue}

From 05565ca7ce991eccdc0f5c1778853f76ccd7ccaa Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 14:13:09 +0200
Subject: [PATCH 142/267] Specify Button semantic mappings

---
 .../when_browser_process_is_unavailable.tsx   | 21 ++++++
 ..._new_and_deprecated_props_are_combined.tsx | 44 +++++++++++++
 .../when_rendering_button_states.tsx          | 27 ++++++++
 ...ndering_deprecated_props_in_production.tsx | 23 +++++++
 .../when_rendering_the_default_action.tsx     | 20 ++++--
 .../when_using_deprecated_props.tsx           | 65 +++++++++++++++++++
 .../for_Button/when_using_semantic_props.tsx  | 49 ++++++++++++++
 .../when_warning_for_deprecated_props.tsx     | 46 +++++++++++++
 8 files changed, 291 insertions(+), 4 deletions(-)
 create mode 100644 Source/Common/for_Button/when_browser_process_is_unavailable.tsx
 create mode 100644 Source/Common/for_Button/when_new_and_deprecated_props_are_combined.tsx
 create mode 100644 Source/Common/for_Button/when_rendering_button_states.tsx
 create mode 100644 Source/Common/for_Button/when_rendering_deprecated_props_in_production.tsx
 create mode 100644 Source/Common/for_Button/when_using_deprecated_props.tsx
 create mode 100644 Source/Common/for_Button/when_using_semantic_props.tsx
 create mode 100644 Source/Common/for_Button/when_warning_for_deprecated_props.tsx

diff --git a/Source/Common/for_Button/when_browser_process_is_unavailable.tsx b/Source/Common/for_Button/when_browser_process_is_unavailable.tsx
new file mode 100644
index 00000000..37bc2b43
--- /dev/null
+++ b/Source/Common/for_Button/when_browser_process_is_unavailable.tsx
@@ -0,0 +1,21 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { expect } from 'chai';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { afterEach, describe, it, vi } from 'vitest';
+import { Button } from '../Button';
+
+describe('when the browser process global is unavailable', () => {
+    afterEach(() => {
+        vi.unstubAllGlobals();
+        vi.restoreAllMocks();
+    });
+
+    it('should safely render a deprecated Button prop', () => {
+        vi.stubGlobal('process', undefined);
+        vi.spyOn(console, 'warn').mockImplementation(() => undefined);
+
+        expect(() => renderToStaticMarkup(<Button text />)).not.to.throw();
+    });
+});
diff --git a/Source/Common/for_Button/when_new_and_deprecated_props_are_combined.tsx b/Source/Common/for_Button/when_new_and_deprecated_props_are_combined.tsx
new file mode 100644
index 00000000..c35f66ac
--- /dev/null
+++ b/Source/Common/for_Button/when_new_and_deprecated_props_are_combined.tsx
@@ -0,0 +1,44 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { expect } from 'chai';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { afterAll, beforeAll, describe, it, vi } from 'vitest';
+import { Button } from '../Button';
+
+describe('when new and deprecated Button props are combined', () => {
+    let html: string;
+
+    beforeAll(() => {
+        vi.spyOn(console, 'warn').mockImplementation(() => undefined);
+        html = renderToStaticMarkup(
+            <Button
+                label='Action'
+                variant='ghost'
+                tone='positive'
+                shape='default'
+                text
+                link
+                outlined
+                rounded
+                severity='help'
+            />,
+        );
+    });
+
+    afterAll(() => vi.restoreAllMocks());
+
+    it('should prefer the new variant', () => {
+        expect(html).to.contain('data-variant="ghost"');
+    });
+
+    it('should prefer the new tone and emit its matching legacy severity', () => {
+        expect(html).to.contain('data-tone="positive"');
+        expect(html).to.contain('data-severity="success"');
+        expect(html).not.to.contain('data-severity="help"');
+    });
+
+    it('should prefer the new shape', () => {
+        expect(html).to.contain('data-shape="default"');
+    });
+});
diff --git a/Source/Common/for_Button/when_rendering_button_states.tsx b/Source/Common/for_Button/when_rendering_button_states.tsx
new file mode 100644
index 00000000..9c18a4ba
--- /dev/null
+++ b/Source/Common/for_Button/when_rendering_button_states.tsx
@@ -0,0 +1,27 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { expect } from 'chai';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, it } from 'vitest';
+import { Button } from '../Button';
+
+describe('when rendering Button states', () => {
+    it('should expose the disabled state', () => {
+        const html = renderToStaticMarkup(<Button label='Action' disabled />);
+
+        expect(html).to.contain('disabled=""');
+        expect(html).to.contain('data-disabled="true"');
+        expect(html).not.to.contain('data-loading=');
+    });
+
+    it('should expose loading as busy and disabled', () => {
+        const html = renderToStaticMarkup(<Button label='Action' loading />);
+
+        expect(html).to.contain('disabled=""');
+        expect(html).to.contain('aria-busy="true"');
+        expect(html).to.contain('data-disabled="true"');
+        expect(html).to.contain('data-loading="true"');
+        expect(html).to.contain('data-cratis-part="spinner"');
+    });
+});
diff --git a/Source/Common/for_Button/when_rendering_deprecated_props_in_production.tsx b/Source/Common/for_Button/when_rendering_deprecated_props_in_production.tsx
new file mode 100644
index 00000000..98a1343b
--- /dev/null
+++ b/Source/Common/for_Button/when_rendering_deprecated_props_in_production.tsx
@@ -0,0 +1,23 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { expect } from 'chai';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { afterEach, describe, it, vi } from 'vitest';
+import { Button } from '../Button';
+
+describe('when rendering deprecated Button props in production', () => {
+    afterEach(() => {
+        vi.unstubAllEnvs();
+        vi.restoreAllMocks();
+    });
+
+    it('should not warn', () => {
+        vi.stubEnv('NODE_ENV', 'production');
+        const warning = vi.spyOn(console, 'warn').mockImplementation(() => undefined);
+
+        renderToStaticMarkup(<Button severity='danger' />);
+
+        expect(warning.mock.calls.length).to.equal(0);
+    });
+});
diff --git a/Source/Common/for_Button/when_rendering_the_default_action.tsx b/Source/Common/for_Button/when_rendering_the_default_action.tsx
index 22102aac..cdeccbd7 100644
--- a/Source/Common/for_Button/when_rendering_the_default_action.tsx
+++ b/Source/Common/for_Button/when_rendering_the_default_action.tsx
@@ -1,20 +1,32 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { renderToStaticMarkup } from 'react-dom/server';
 import { expect } from 'chai';
+import { renderToStaticMarkup } from 'react-dom/server';
 import { describe, it } from 'vitest';
 import { Button } from '../Button';
 
 describe('when rendering the default Button action', () => {
     const html = renderToStaticMarkup(<Button label='Save' />);
 
-    it('should_use_the_primary_base_style_without_a_secondary_severity', () => {
-        expect(html).to.contain('data-variant="filled"');
+    it('should use the solid primary treatment', () => {
+        expect(html).to.contain('data-variant="solid"');
+        expect(html).to.contain('data-shape="default"');
+        expect(html).not.to.contain('data-tone=');
         expect(html).not.to.contain('data-severity=');
     });
 
-    it('should_remain_a_normal_sized_button', () => {
+    it('should use the normal size', () => {
         expect(html).to.contain('data-size="normal"');
     });
+
+    it('should remain enabled and idle', () => {
+        expect(html).not.to.contain(' disabled=');
+        expect(html).not.to.contain('data-disabled=');
+        expect(html).not.to.contain('data-loading=');
+    });
+
+    it('should default the native button type', () => {
+        expect(html).to.contain('type="button"');
+    });
 });
diff --git a/Source/Common/for_Button/when_using_deprecated_props.tsx b/Source/Common/for_Button/when_using_deprecated_props.tsx
new file mode 100644
index 00000000..e3add7db
--- /dev/null
+++ b/Source/Common/for_Button/when_using_deprecated_props.tsx
@@ -0,0 +1,65 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { expect } from 'chai';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { afterAll, beforeAll, describe, it, vi } from 'vitest';
+import { Button, type ButtonSeverity } from '../Button';
+
+const severities: Array<[ButtonSeverity, string]> = [
+    ['secondary', 'neutral'],
+    ['info', 'accent'],
+    ['success', 'positive'],
+    ['warn', 'caution'],
+    ['help', 'accent'],
+    ['danger', 'critical'],
+    ['contrast', 'neutral'],
+];
+
+describe('when using deprecated Button props', () => {
+    beforeAll(() => vi.spyOn(console, 'warn').mockImplementation(() => undefined));
+    afterAll(() => vi.restoreAllMocks());
+
+    for (const [severity, tone] of severities) {
+        it(`should map ${severity} to ${tone} and preserve the exact legacy severity`, () => {
+            const html = renderToStaticMarkup(
+                <Button label='Action' severity={severity} />,
+            );
+
+            expect(html).to.contain(`data-tone="${tone}"`);
+            expect(html).to.contain(`data-severity="${severity}"`);
+        });
+    }
+
+    it('should map text to ghost', () => {
+        const html = renderToStaticMarkup(<Button label='Action' text />);
+
+        expect(html).to.contain('data-variant="ghost"');
+    });
+
+    it('should map link to link', () => {
+        const html = renderToStaticMarkup(<Button label='Action' link />);
+
+        expect(html).to.contain('data-variant="link"');
+    });
+
+    it('should map outlined to outline', () => {
+        const html = renderToStaticMarkup(<Button label='Action' outlined />);
+
+        expect(html).to.contain('data-variant="outline"');
+    });
+
+    it('should map rounded to pill', () => {
+        const html = renderToStaticMarkup(<Button label='Action' rounded />);
+
+        expect(html).to.contain('data-shape="pill"');
+    });
+
+    it('should retain the legacy variant precedence', () => {
+        const html = renderToStaticMarkup(
+            <Button label='Action' outlined text link />,
+        );
+
+        expect(html).to.contain('data-variant="link"');
+    });
+});
diff --git a/Source/Common/for_Button/when_using_semantic_props.tsx b/Source/Common/for_Button/when_using_semantic_props.tsx
new file mode 100644
index 00000000..fa2726ac
--- /dev/null
+++ b/Source/Common/for_Button/when_using_semantic_props.tsx
@@ -0,0 +1,49 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { expect } from 'chai';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, it } from 'vitest';
+import {
+    Button,
+    type ButtonShape,
+    type ButtonTone,
+    type ButtonVariant,
+} from '../Button';
+
+const variants: ButtonVariant[] = ['solid', 'outline', 'ghost', 'link'];
+const tones: Array<[ButtonTone, string]> = [
+    ['neutral', 'secondary'],
+    ['accent', 'info'],
+    ['positive', 'success'],
+    ['caution', 'warn'],
+    ['critical', 'danger'],
+];
+const shapes: ButtonShape[] = ['default', 'pill'];
+
+describe('when using semantic Button props', () => {
+    for (const variant of variants) {
+        it(`should emit the ${variant} variant`, () => {
+            const html = renderToStaticMarkup(<Button label='Action' variant={variant} />);
+
+            expect(html).to.contain(`data-variant="${variant}"`);
+        });
+    }
+
+    for (const [tone, legacySeverity] of tones) {
+        it(`should emit the ${tone} tone and its legacy severity`, () => {
+            const html = renderToStaticMarkup(<Button label='Action' tone={tone} />);
+
+            expect(html).to.contain(`data-tone="${tone}"`);
+            expect(html).to.contain(`data-severity="${legacySeverity}"`);
+        });
+    }
+
+    for (const shape of shapes) {
+        it(`should emit the ${shape} shape`, () => {
+            const html = renderToStaticMarkup(<Button label='Action' shape={shape} />);
+
+            expect(html).to.contain(`data-shape="${shape}"`);
+        });
+    }
+});
diff --git a/Source/Common/for_Button/when_warning_for_deprecated_props.tsx b/Source/Common/for_Button/when_warning_for_deprecated_props.tsx
new file mode 100644
index 00000000..aab5b303
--- /dev/null
+++ b/Source/Common/for_Button/when_warning_for_deprecated_props.tsx
@@ -0,0 +1,46 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { expect } from 'chai';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { afterEach, describe, it, vi } from 'vitest';
+import { Button } from '../Button';
+
+describe('when warning for deprecated Button props', () => {
+    afterEach(() => vi.restoreAllMocks());
+
+    it('should warn once for each deprecated prop during the module session', () => {
+        const warning = vi.spyOn(console, 'warn').mockImplementation(() => undefined);
+        const deprecatedButtons = [
+            <Button key='severity' severity='danger' />,
+            <Button key='text' text />,
+            <Button key='link' link />,
+            <Button key='outlined' outlined />,
+            <Button key='rounded' rounded />,
+        ];
+
+        for (const button of deprecatedButtons) {
+            renderToStaticMarkup(button);
+            renderToStaticMarkup(button);
+        }
+
+        expect(warning.mock.calls.length).to.equal(5);
+        for (const prop of ['severity', 'text', 'link', 'outlined', 'rounded']) {
+            expect(
+                warning.mock.calls.some(([message]) =>
+                    String(message).includes(`"${prop}"`),
+                ),
+            ).to.equal(true);
+        }
+    });
+
+    it('should not warn for new props', () => {
+        const warning = vi.spyOn(console, 'warn').mockImplementation(() => undefined);
+
+        renderToStaticMarkup(
+            <Button variant='outline' tone='critical' shape='pill' />,
+        );
+
+        expect(warning.mock.calls.length).to.equal(0);
+    });
+});

From 79184b5e204f7085f08f0d6661e1b0905ce69744 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 13:57:09 +0200
Subject: [PATCH 143/267] pi-agent: Normalize public change callbacks

---
 Source/CommandForm/fields/CheckboxField.tsx   | 102 ++---
 .../CommandForm/fields/ColorPickerField.tsx   |  14 +-
 Source/CommandForm/fields/DropdownField.tsx   |   2 +-
 Source/CommandForm/fields/InputTextField.tsx  |  53 ++-
 .../CommandForm/fields/MultiSelectField.tsx   |   2 +-
 Source/CommandForm/fields/NumberField.tsx     |  86 ++--
 Source/CommandForm/fields/PasswordField.tsx   |  17 +-
 Source/CommandForm/fields/SliderField.tsx     |  87 ++--
 Source/CommandForm/fields/TextAreaField.tsx   |  57 ++-
 .../CommandForm/fields/ToggleSwitchField.tsx  | 106 ++---
 .../CommandForm/fields/fieldValueFromEvent.ts |  13 +-
 Source/Common/DatePickerInput.tsx             |  21 +-
 Source/DataTables/ColumnFilterMenu.tsx        |  49 ++-
 Source/Dropdown/Dropdown.stories.tsx          |   2 +-
 Source/Dropdown/Dropdown.tsx                  |  51 ++-
 Source/Filter/RangeHistogramFilter.tsx        |  41 +-
 Source/Filter/types.ts                        |   6 +-
 .../ObjectContentEditor.tsx                   |  51 ++-
 .../components/RangeHistogramFilter.tsx       | 405 +++++++++---------
 .../components/pivot/colorResolver.ts         |   8 +-
 Source/SchemaEditor/SchemaEditor.tsx          |  11 +-
 Source/SchemaEditor/TypeCell.tsx              |  11 +-
 Source/types/ChangeHandler.ts                 |   7 +
 Source/types/ChangeMeta.ts                    |  10 +
 Source/types/index.ts                         |   2 +
 25 files changed, 656 insertions(+), 558 deletions(-)
 create mode 100644 Source/types/ChangeHandler.ts
 create mode 100644 Source/types/ChangeMeta.ts

diff --git a/Source/CommandForm/fields/CheckboxField.tsx b/Source/CommandForm/fields/CheckboxField.tsx
index 9931ce7b..d0a6900e 100644
--- a/Source/CommandForm/fields/CheckboxField.tsx
+++ b/Source/CommandForm/fields/CheckboxField.tsx
@@ -7,7 +7,6 @@ import {
     useFieldAccessibility,
     type FieldAccessibilityProps,
 } from './fieldAccessibility';
-import { fieldValueFromEvent } from './fieldValueFromEvent';
 import type { ExactPartKeys } from '../../types/ExactPartKeys';
 import type { PartsOf } from '../../types/parts';
 
@@ -27,8 +26,7 @@ const checkboxPartsMatchManifest: ExactPartKeys<CheckboxParts, PartsOf<'Checkbox
 void checkboxPartsMatchManifest;
 
 interface CheckboxFieldComponentProps
-    extends WrappedFieldProps<boolean>,
-        FieldAccessibilityProps {
+    extends WrappedFieldProps<boolean>, FieldAccessibilityProps {
     label?: string;
     className?: string;
     pt?: CheckboxParts;
@@ -46,60 +44,64 @@ export const CheckboxField = asCommandFormField<CheckboxFieldComponentProps>(
         });
         return (
             <>
-        <label
-            {...props.pt?.root}
-            className={['cratis-choice-field', props.pt?.root?.className, props.className]
-                .filter(Boolean)
-                .join(' ')}
-            onBlur={props.onBlur}
-            data-cratis-part='root'
-            data-invalid={props.invalid || undefined}
-        >
-            <input
-                {...props.pt?.input}
-                id={accessibility.controlId}
-                aria-label={accessibility.ariaLabel}
-                aria-describedby={accessibility.ariaDescribedBy}
-                type='checkbox'
-                checked={props.value}
-                onChange={props.onChange}
-                aria-invalid={props.invalid || undefined}
-                className={['cratis-choice-field__native', props.pt?.input?.className]
-                    .filter(Boolean)
-                    .join(' ')}
-                data-cratis-part='input'
-            />
-            <span
-                {...props.pt?.box}
-                className={['cratis-checkbox__box', props.pt?.box?.className]
-                    .filter(Boolean)
-                    .join(' ')}
-                data-cratis-part='box'
-                aria-hidden='true'
-            >
-                <span
-                    {...props.pt?.indicator}
+                <label
+                    {...props.pt?.root}
                     className={[
-                        'cratis-checkbox__indicator',
-                        props.pt?.indicator?.className,
+                        'cratis-choice-field',
+                        props.pt?.root?.className,
+                        props.className,
                     ]
                         .filter(Boolean)
                         .join(' ')}
-                    data-cratis-part='indicator'
+                    onBlur={props.onBlur}
+                    data-cratis-part='root'
+                    data-invalid={props.invalid || undefined}
                 >
-                    ✓
-                </span>
-            </span>
-            {props.label && (
-                <span className='cratis-choice-field__label'>{props.label}</span>
-            )}
-        </label>
+                    <input
+                        {...props.pt?.input}
+                        id={accessibility.controlId}
+                        aria-label={accessibility.ariaLabel}
+                        aria-describedby={accessibility.ariaDescribedBy}
+                        type='checkbox'
+                        checked={props.value}
+                        onChange={(event) => props.onChange(event.currentTarget.checked)}
+                        aria-invalid={props.invalid || undefined}
+                        className={[
+                            'cratis-choice-field__native',
+                            props.pt?.input?.className,
+                        ]
+                            .filter(Boolean)
+                            .join(' ')}
+                        data-cratis-part='input'
+                    />
+                    <span
+                        {...props.pt?.box}
+                        className={['cratis-checkbox__box', props.pt?.box?.className]
+                            .filter(Boolean)
+                            .join(' ')}
+                        data-cratis-part='box'
+                        aria-hidden='true'
+                    >
+                        <span
+                            {...props.pt?.indicator}
+                            className={[
+                                'cratis-checkbox__indicator',
+                                props.pt?.indicator?.className,
+                            ]
+                                .filter(Boolean)
+                                .join(' ')}
+                            data-cratis-part='indicator'
+                        >
+                            ✓
+                        </span>
+                    </span>
+                    {props.label && (
+                        <span className='cratis-choice-field__label'>{props.label}</span>
+                    )}
+                </label>
                 {accessibility.hiddenError}
             </>
         );
     },
-    {
-        defaultValue: false,
-        extractValue: (event: unknown) => fieldValueFromEvent(event, 'checked'),
-    },
+    { defaultValue: false },
 );
diff --git a/Source/CommandForm/fields/ColorPickerField.tsx b/Source/CommandForm/fields/ColorPickerField.tsx
index dbc3cf2e..d9f14092 100644
--- a/Source/CommandForm/fields/ColorPickerField.tsx
+++ b/Source/CommandForm/fields/ColorPickerField.tsx
@@ -7,7 +7,6 @@ import {
     useFieldAccessibility,
     type FieldAccessibilityProps,
 } from './fieldAccessibility';
-import { fieldValueFromEvent } from './fieldValueFromEvent';
 import type { ExactPartKeys } from '../../types/ExactPartKeys';
 import type { PartsOf } from '../../types/parts';
 
@@ -25,8 +24,7 @@ const colorPickerPartsMatchManifest: ExactPartKeys<ColorPickerParts, PartsOf<'Co
 void colorPickerPartsMatchManifest;
 
 interface ColorPickerFieldComponentProps
-    extends WrappedFieldProps<string>,
-        FieldAccessibilityProps {
+    extends WrappedFieldProps<string>, FieldAccessibilityProps {
     inline?: boolean;
     defaultColor?: string;
     className?: string;
@@ -72,7 +70,9 @@ export const ColorPickerField = asCommandFormField<ColorPickerFieldComponentProp
                     aria-describedby={accessibility.ariaDescribedBy}
                     type='color'
                     value={`#${value}`}
-                    onChange={props.onChange}
+                    onChange={(event) =>
+                        props.onChange(event.currentTarget.value.replace('#', ''))
+                    }
                     aria-invalid={props.invalid || undefined}
                     className={['cratis-color-field__input', props.pt?.input?.className]
                         .filter(Boolean)
@@ -92,9 +92,5 @@ export const ColorPickerField = asCommandFormField<ColorPickerFieldComponentProp
             </div>
         );
     },
-    {
-        defaultValue: '',
-        extractValue: (event: unknown) =>
-            fieldValueFromEvent(event, 'value').replace('#', ''),
-    },
+    { defaultValue: '' },
 );
diff --git a/Source/CommandForm/fields/DropdownField.tsx b/Source/CommandForm/fields/DropdownField.tsx
index 7c316215..5ca5be9a 100644
--- a/Source/CommandForm/fields/DropdownField.tsx
+++ b/Source/CommandForm/fields/DropdownField.tsx
@@ -72,7 +72,7 @@ export const DropdownField = asCommandFormField<DropdownFieldComponentProps>(
                     aria-label={accessibility.ariaLabel}
                     aria-describedby={accessibility.ariaDescribedBy}
                     value={props.value}
-                    onChange={(e) => props.onChange(e.value)}
+                    onChange={(value) => props.onChange(value)}
                     onBlur={props.onBlur}
                     options={props.options}
                     optionValue={props.optionValue}
diff --git a/Source/CommandForm/fields/InputTextField.tsx b/Source/CommandForm/fields/InputTextField.tsx
index 957b0e87..baf07e11 100644
--- a/Source/CommandForm/fields/InputTextField.tsx
+++ b/Source/CommandForm/fields/InputTextField.tsx
@@ -7,7 +7,6 @@ import {
     useFieldAccessibility,
     type FieldAccessibilityProps,
 } from './fieldAccessibility';
-import { fieldValueFromEvent } from './fieldValueFromEvent';
 
 /** Stable part attributes for {@link InputTextField}. */
 export interface InputTextParts {
@@ -16,8 +15,7 @@ export interface InputTextParts {
 }
 
 interface InputTextComponentProps
-    extends WrappedFieldProps<string>,
-        FieldAccessibilityProps {
+    extends WrappedFieldProps<string>, FieldAccessibilityProps {
     type?:
         | 'text'
         | 'email'
@@ -46,34 +44,31 @@ export const InputTextField = asCommandFormField<InputTextComponentProps>(
         });
         return (
             <>
-        <input
-            {...props.pt?.root}
-            id={accessibility.controlId}
-            aria-label={accessibility.ariaLabel}
-            aria-describedby={accessibility.ariaDescribedBy}
-            type={props.type ?? 'text'}
-            value={props.value}
-            onChange={props.onChange}
-            onBlur={props.onBlur}
-            placeholder={props.placeholder}
-            aria-invalid={props.invalid || undefined}
-            data-invalid={props.invalid || undefined}
-            data-cratis-part='input'
-            className={[
-                'cratis-field-input',
-                'cratis:w-full',
-                props.pt?.root?.className,
-                props.className,
-            ]
-                .filter(Boolean)
-                .join(' ')}
-        />
+                <input
+                    {...props.pt?.root}
+                    id={accessibility.controlId}
+                    aria-label={accessibility.ariaLabel}
+                    aria-describedby={accessibility.ariaDescribedBy}
+                    type={props.type ?? 'text'}
+                    value={props.value}
+                    onChange={(event) => props.onChange(event.currentTarget.value)}
+                    onBlur={props.onBlur}
+                    placeholder={props.placeholder}
+                    aria-invalid={props.invalid || undefined}
+                    data-invalid={props.invalid || undefined}
+                    data-cratis-part='input'
+                    className={[
+                        'cratis-field-input',
+                        'cratis:w-full',
+                        props.pt?.root?.className,
+                        props.className,
+                    ]
+                        .filter(Boolean)
+                        .join(' ')}
+                />
                 {accessibility.hiddenError}
             </>
         );
     },
-    {
-        defaultValue: '',
-        extractValue: (event: unknown) => fieldValueFromEvent(event, 'value'),
-    },
+    { defaultValue: '' },
 );
diff --git a/Source/CommandForm/fields/MultiSelectField.tsx b/Source/CommandForm/fields/MultiSelectField.tsx
index fa90afdd..aa831af9 100644
--- a/Source/CommandForm/fields/MultiSelectField.tsx
+++ b/Source/CommandForm/fields/MultiSelectField.tsx
@@ -86,7 +86,7 @@ export const MultiSelectField = asCommandFormField<MultiSelectFieldComponentProp
                     aria-describedby={accessibility.ariaDescribedBy}
                     multiple
                     value={props.value}
-                    onChange={(e) => props.onChange(e.value ?? [])}
+                    onChange={(value) => props.onChange(value ?? [])}
                     onBlur={props.onBlur}
                     options={props.options}
                     optionValue={props.optionValue}
diff --git a/Source/CommandForm/fields/NumberField.tsx b/Source/CommandForm/fields/NumberField.tsx
index 2620112a..da65479e 100644
--- a/Source/CommandForm/fields/NumberField.tsx
+++ b/Source/CommandForm/fields/NumberField.tsx
@@ -7,7 +7,6 @@ import {
     useFieldAccessibility,
     type FieldAccessibilityProps,
 } from './fieldAccessibility';
-import { fieldValueFromEvent } from './fieldValueFromEvent';
 import type { ExactPartKeys } from '../../types/ExactPartKeys';
 import type { PartsOf } from '../../types/parts';
 
@@ -23,8 +22,7 @@ const numberFieldPartsMatchManifest: ExactPartKeys<NumberFieldParts, PartsOf<'Nu
 void numberFieldPartsMatchManifest;
 
 interface NumberFieldComponentProps
-    extends WrappedFieldProps<number>,
-        FieldAccessibilityProps {
+    extends WrappedFieldProps<number>, FieldAccessibilityProps {
     placeholder?: string;
     min?: number;
     max?: number;
@@ -44,47 +42,51 @@ export const NumberField = asCommandFormField<NumberFieldComponentProps>(
             ariaDescribedBy: props.pt?.input?.['aria-describedby'],
         });
         return (
-        <div
-            {...props.pt?.root}
-            onBlur={props.onBlur}
-            data-cratis-part='root'
-            className={[
-                'cratis-number-field',
-                'cratis:w-full',
-                props.pt?.root?.className,
-                props.className,
-            ]
-                .filter(Boolean)
-                .join(' ')}
-        >
-            <input
-                {...props.pt?.input}
-                id={accessibility.controlId}
-                aria-label={accessibility.ariaLabel}
-                aria-describedby={accessibility.ariaDescribedBy}
-                type='number'
-                value={props.value}
-                onChange={props.onChange}
-                placeholder={props.placeholder}
-                min={props.min}
-                max={props.max}
-                step={props.step}
-                aria-invalid={props.invalid || undefined}
-                data-invalid={props.invalid || undefined}
-                data-cratis-part='input'
-                className={['cratis-field-input', 'cratis:w-full', props.pt?.input?.className]
+            <div
+                {...props.pt?.root}
+                onBlur={props.onBlur}
+                data-cratis-part='root'
+                className={[
+                    'cratis-number-field',
+                    'cratis:w-full',
+                    props.pt?.root?.className,
+                    props.className,
+                ]
                     .filter(Boolean)
                     .join(' ')}
-            />
-            {accessibility.hiddenError}
-        </div>
+            >
+                <input
+                    {...props.pt?.input}
+                    id={accessibility.controlId}
+                    aria-label={accessibility.ariaLabel}
+                    aria-describedby={accessibility.ariaDescribedBy}
+                    type='number'
+                    value={props.value}
+                    onChange={(event) =>
+                        props.onChange(
+                            Number.isNaN(event.currentTarget.valueAsNumber)
+                                ? 0
+                                : event.currentTarget.valueAsNumber,
+                        )
+                    }
+                    placeholder={props.placeholder}
+                    min={props.min}
+                    max={props.max}
+                    step={props.step}
+                    aria-invalid={props.invalid || undefined}
+                    data-invalid={props.invalid || undefined}
+                    data-cratis-part='input'
+                    className={[
+                        'cratis-field-input',
+                        'cratis:w-full',
+                        props.pt?.input?.className,
+                    ]
+                        .filter(Boolean)
+                        .join(' ')}
+                />
+                {accessibility.hiddenError}
+            </div>
         );
     },
-    {
-        defaultValue: 0,
-        extractValue: (event: unknown) => {
-            const value = fieldValueFromEvent(event, 'valueAsNumber');
-            return Number.isNaN(value) ? 0 : value;
-        },
-    },
+    { defaultValue: 0 },
 );
diff --git a/Source/CommandForm/fields/PasswordField.tsx b/Source/CommandForm/fields/PasswordField.tsx
index cfcc3f41..56b39ef3 100644
--- a/Source/CommandForm/fields/PasswordField.tsx
+++ b/Source/CommandForm/fields/PasswordField.tsx
@@ -12,7 +12,6 @@ import {
     useFieldAccessibility,
     type FieldAccessibilityProps,
 } from './fieldAccessibility';
-import { fieldValueFromEvent } from './fieldValueFromEvent';
 import type { ExactPartKeys } from '../../types/ExactPartKeys';
 import type { PartsOf } from '../../types/parts';
 
@@ -30,8 +29,7 @@ const passwordPartsMatchManifest: ExactPartKeys<PasswordParts, PartsOf<'Password
 void passwordPartsMatchManifest;
 
 interface PasswordFieldComponentProps
-    extends WrappedFieldProps<string>,
-        FieldAccessibilityProps {
+    extends WrappedFieldProps<string>, FieldAccessibilityProps {
     placeholder?: string;
     className?: string;
     pt?: PasswordParts;
@@ -69,11 +67,15 @@ const PasswordControl = (props: PasswordFieldComponentProps) => {
                 aria-describedby={accessibility.ariaDescribedBy}
                 type={visible ? 'text' : 'password'}
                 value={props.value}
-                onChange={props.onChange}
+                onChange={(event) => props.onChange(event.currentTarget.value)}
                 placeholder={props.placeholder}
                 aria-invalid={props.invalid || undefined}
                 data-invalid={props.invalid || undefined}
-                className={['cratis-field-input', 'cratis:w-full', props.pt?.input?.className]
+                className={[
+                    'cratis-field-input',
+                    'cratis:w-full',
+                    props.pt?.input?.className,
+                ]
                     .filter(Boolean)
                     .join(' ')}
                 data-cratis-part='input'
@@ -102,8 +104,5 @@ const PasswordControl = (props: PasswordFieldComponentProps) => {
 /** A masked password field bound to a string property on an Arc command. */
 export const PasswordField = asCommandFormField<PasswordFieldComponentProps>(
     PasswordControl,
-    {
-        defaultValue: '',
-        extractValue: (event: unknown) => fieldValueFromEvent(event, 'value'),
-    },
+    { defaultValue: '' },
 );
diff --git a/Source/CommandForm/fields/SliderField.tsx b/Source/CommandForm/fields/SliderField.tsx
index 31a5c21b..f56da3cf 100644
--- a/Source/CommandForm/fields/SliderField.tsx
+++ b/Source/CommandForm/fields/SliderField.tsx
@@ -7,7 +7,6 @@ import {
     useFieldAccessibility,
     type FieldAccessibilityProps,
 } from './fieldAccessibility';
-import { fieldValueFromEvent } from './fieldValueFromEvent';
 import type { ExactPartKeys } from '../../types/ExactPartKeys';
 import type { PartsOf } from '../../types/parts';
 
@@ -25,8 +24,7 @@ const sliderPartsMatchManifest: ExactPartKeys<SliderParts, PartsOf<'SliderField'
 void sliderPartsMatchManifest;
 
 interface SliderFieldComponentProps
-    extends WrappedFieldProps<number>,
-        FieldAccessibilityProps {
+    extends WrappedFieldProps<number>, FieldAccessibilityProps {
     min?: number;
     max?: number;
     step?: number;
@@ -45,51 +43,50 @@ export const SliderField = asCommandFormField<SliderFieldComponentProps>(
             ariaDescribedBy: props.pt?.input?.['aria-describedby'],
         });
         return (
-        <div
-            {...props.pt?.root}
-            className={[
-                'cratis-slider-field',
-                'cratis:w-full',
-                props.pt?.root?.className,
-                props.className,
-            ]
-                .filter(Boolean)
-                .join(' ')}
-            onBlur={props.onBlur}
-            data-cratis-part='root'
-        >
-            <input
-                {...props.pt?.input}
-                id={accessibility.controlId}
-                aria-label={accessibility.ariaLabel}
-                aria-describedby={accessibility.ariaDescribedBy}
-                type='range'
-                value={props.value}
-                onChange={props.onChange}
-                min={props.min ?? 0}
-                max={props.max ?? 100}
-                step={props.step ?? 1}
-                aria-invalid={props.invalid || undefined}
-                className={['cratis-slider-field__input', props.pt?.input?.className]
+            <div
+                {...props.pt?.root}
+                className={[
+                    'cratis-slider-field',
+                    'cratis:w-full',
+                    props.pt?.root?.className,
+                    props.className,
+                ]
                     .filter(Boolean)
                     .join(' ')}
-                data-cratis-part='input'
-            />
-            <span
-                {...props.pt?.value}
-                className={['cratis-slider-field__value', props.pt?.value?.className]
-                    .filter(Boolean)
-                    .join(' ')}
-                data-cratis-part='value'
+                onBlur={props.onBlur}
+                data-cratis-part='root'
             >
-                {props.value}
-            </span>
-            {accessibility.hiddenError}
-        </div>
+                <input
+                    {...props.pt?.input}
+                    id={accessibility.controlId}
+                    aria-label={accessibility.ariaLabel}
+                    aria-describedby={accessibility.ariaDescribedBy}
+                    type='range'
+                    value={props.value}
+                    onChange={(event) =>
+                        props.onChange(event.currentTarget.valueAsNumber)
+                    }
+                    min={props.min ?? 0}
+                    max={props.max ?? 100}
+                    step={props.step ?? 1}
+                    aria-invalid={props.invalid || undefined}
+                    className={['cratis-slider-field__input', props.pt?.input?.className]
+                        .filter(Boolean)
+                        .join(' ')}
+                    data-cratis-part='input'
+                />
+                <span
+                    {...props.pt?.value}
+                    className={['cratis-slider-field__value', props.pt?.value?.className]
+                        .filter(Boolean)
+                        .join(' ')}
+                    data-cratis-part='value'
+                >
+                    {props.value}
+                </span>
+                {accessibility.hiddenError}
+            </div>
         );
     },
-    {
-        defaultValue: 0,
-        extractValue: (event: unknown) => fieldValueFromEvent(event, 'valueAsNumber'),
-    },
+    { defaultValue: 0 },
 );
diff --git a/Source/CommandForm/fields/TextAreaField.tsx b/Source/CommandForm/fields/TextAreaField.tsx
index 2add6219..f4d37a26 100644
--- a/Source/CommandForm/fields/TextAreaField.tsx
+++ b/Source/CommandForm/fields/TextAreaField.tsx
@@ -7,7 +7,6 @@ import {
     useFieldAccessibility,
     type FieldAccessibilityProps,
 } from './fieldAccessibility';
-import { fieldValueFromEvent } from './fieldValueFromEvent';
 
 /** Stable part attributes for {@link TextAreaField}. */
 export interface TextAreaParts {
@@ -16,8 +15,7 @@ export interface TextAreaParts {
 }
 
 interface TextAreaFieldComponentProps
-    extends WrappedFieldProps<string>,
-        FieldAccessibilityProps {
+    extends WrappedFieldProps<string>, FieldAccessibilityProps {
     placeholder?: string;
     rows?: number;
     cols?: number;
@@ -37,36 +35,33 @@ export const TextAreaField = asCommandFormField<TextAreaFieldComponentProps>(
         });
         return (
             <>
-        <textarea
-            {...props.pt?.root}
-            id={accessibility.controlId}
-            aria-label={accessibility.ariaLabel}
-            aria-describedby={accessibility.ariaDescribedBy}
-            value={props.value}
-            onChange={props.onChange}
-            onBlur={props.onBlur}
-            placeholder={props.placeholder}
-            rows={props.rows ?? 5}
-            cols={props.cols}
-            aria-invalid={props.invalid || undefined}
-            data-invalid={props.invalid || undefined}
-            data-cratis-part='textarea'
-            className={[
-                'cratis-field-input',
-                'cratis-field-textarea',
-                'cratis:w-full',
-                props.pt?.root?.className,
-                props.className,
-            ]
-                .filter(Boolean)
-                .join(' ')}
-        />
+                <textarea
+                    {...props.pt?.root}
+                    id={accessibility.controlId}
+                    aria-label={accessibility.ariaLabel}
+                    aria-describedby={accessibility.ariaDescribedBy}
+                    value={props.value}
+                    onChange={(event) => props.onChange(event.currentTarget.value)}
+                    onBlur={props.onBlur}
+                    placeholder={props.placeholder}
+                    rows={props.rows ?? 5}
+                    cols={props.cols}
+                    aria-invalid={props.invalid || undefined}
+                    data-invalid={props.invalid || undefined}
+                    data-cratis-part='textarea'
+                    className={[
+                        'cratis-field-input',
+                        'cratis-field-textarea',
+                        'cratis:w-full',
+                        props.pt?.root?.className,
+                        props.className,
+                    ]
+                        .filter(Boolean)
+                        .join(' ')}
+                />
                 {accessibility.hiddenError}
             </>
         );
     },
-    {
-        defaultValue: '',
-        extractValue: (event: unknown) => fieldValueFromEvent(event, 'value'),
-    },
+    { defaultValue: '' },
 );
diff --git a/Source/CommandForm/fields/ToggleSwitchField.tsx b/Source/CommandForm/fields/ToggleSwitchField.tsx
index 619a5a6d..c6ec1927 100644
--- a/Source/CommandForm/fields/ToggleSwitchField.tsx
+++ b/Source/CommandForm/fields/ToggleSwitchField.tsx
@@ -7,7 +7,6 @@ import {
     useFieldAccessibility,
     type FieldAccessibilityProps,
 } from './fieldAccessibility';
-import { fieldValueFromEvent } from './fieldValueFromEvent';
 import type { ExactPartKeys } from '../../types/ExactPartKeys';
 import type { PartsOf } from '../../types/parts';
 
@@ -27,8 +26,7 @@ const toggleSwitchPartsMatchManifest: ExactPartKeys<ToggleSwitchParts, PartsOf<'
 void toggleSwitchPartsMatchManifest;
 
 interface ToggleSwitchFieldComponentProps
-    extends WrappedFieldProps<boolean>,
-        FieldAccessibilityProps {
+    extends WrappedFieldProps<boolean>, FieldAccessibilityProps {
     label?: string;
     className?: string;
     pt?: ToggleSwitchParts;
@@ -46,56 +44,66 @@ export const ToggleSwitchField = asCommandFormField<ToggleSwitchFieldComponentPr
         });
         return (
             <>
-        <label
-            {...props.pt?.root}
-            className={['cratis-choice-field', props.pt?.root?.className, props.className]
-                .filter(Boolean)
-                .join(' ')}
-            onBlur={props.onBlur}
-            data-cratis-part='root'
-            data-invalid={props.invalid || undefined}
-        >
-            <input
-                {...props.pt?.input}
-                id={accessibility.controlId}
-                aria-label={accessibility.ariaLabel}
-                aria-describedby={accessibility.ariaDescribedBy}
-                type='checkbox'
-                role='switch'
-                checked={props.value}
-                onChange={props.onChange}
-                aria-invalid={props.invalid || undefined}
-                className={['cratis-choice-field__native', props.pt?.input?.className]
-                    .filter(Boolean)
-                    .join(' ')}
-                data-cratis-part='input'
-            />
-            <span
-                {...props.pt?.control}
-                className={['cratis-switch__control', props.pt?.control?.className]
-                    .filter(Boolean)
-                    .join(' ')}
-                data-cratis-part='control'
-                aria-hidden='true'
-            >
-                <span
-                    {...props.pt?.handle}
-                    className={['cratis-switch__handle', props.pt?.handle?.className]
+                <label
+                    {...props.pt?.root}
+                    className={[
+                        'cratis-choice-field',
+                        props.pt?.root?.className,
+                        props.className,
+                    ]
                         .filter(Boolean)
                         .join(' ')}
-                    data-cratis-part='handle'
-                />
-            </span>
-            {props.label && (
-                <span className='cratis-choice-field__label'>{props.label}</span>
-            )}
-        </label>
+                    onBlur={props.onBlur}
+                    data-cratis-part='root'
+                    data-invalid={props.invalid || undefined}
+                >
+                    <input
+                        {...props.pt?.input}
+                        id={accessibility.controlId}
+                        aria-label={accessibility.ariaLabel}
+                        aria-describedby={accessibility.ariaDescribedBy}
+                        type='checkbox'
+                        role='switch'
+                        checked={props.value}
+                        onChange={(event) => props.onChange(event.currentTarget.checked)}
+                        aria-invalid={props.invalid || undefined}
+                        className={[
+                            'cratis-choice-field__native',
+                            props.pt?.input?.className,
+                        ]
+                            .filter(Boolean)
+                            .join(' ')}
+                        data-cratis-part='input'
+                    />
+                    <span
+                        {...props.pt?.control}
+                        className={[
+                            'cratis-switch__control',
+                            props.pt?.control?.className,
+                        ]
+                            .filter(Boolean)
+                            .join(' ')}
+                        data-cratis-part='control'
+                        aria-hidden='true'
+                    >
+                        <span
+                            {...props.pt?.handle}
+                            className={[
+                                'cratis-switch__handle',
+                                props.pt?.handle?.className,
+                            ]
+                                .filter(Boolean)
+                                .join(' ')}
+                            data-cratis-part='handle'
+                        />
+                    </span>
+                    {props.label && (
+                        <span className='cratis-choice-field__label'>{props.label}</span>
+                    )}
+                </label>
                 {accessibility.hiddenError}
             </>
         );
     },
-    {
-        defaultValue: false,
-        extractValue: (event: unknown) => fieldValueFromEvent(event, 'checked'),
-    },
+    { defaultValue: false },
 );
diff --git a/Source/CommandForm/fields/fieldValueFromEvent.ts b/Source/CommandForm/fields/fieldValueFromEvent.ts
index addb6aa8..9f569dd6 100644
--- a/Source/CommandForm/fields/fieldValueFromEvent.ts
+++ b/Source/CommandForm/fields/fieldValueFromEvent.ts
@@ -15,14 +15,11 @@ const eventTargetOf = (event: unknown): Record<string, unknown> => {
 /**
  * Extracts a primitive value from a native form field's change event target.
  *
- * `CommandFormFieldConfig.extractValue` is declared `(event: unknown) => TValue` so every
- * field type shares one contract regardless of its underlying control. Under strict
- * TypeScript a field can no longer declare its `extractValue` against a concrete
- * `React.ChangeEvent<...>` — the narrower parameter type fails contravariant function
- * assignability against `(event: unknown) => TValue`. This helper keeps field components
- * strictly typed by doing the one runtime-checked narrowing every field needs, with an
- * overload per property so callers still get a precise return type.
- * Internal to the command-field implementation.
+ * Retained as an internal safety helper for custom or legacy Arc field adapters whose
+ * `CommandFormFieldConfig.extractValue` still receives `unknown`. Components-owned fields
+ * now extract semantic values at their DOM or React Aria boundaries before invoking Arc,
+ * so no production field relies on event-shaped values. The overloads remain available to
+ * relative-imported adapters and keep runtime narrowing explicit.
  */
 export function fieldValueFromEvent(event: unknown, property: 'checked'): boolean;
 export function fieldValueFromEvent(event: unknown, property: 'value'): string;
diff --git a/Source/Common/DatePickerInput.tsx b/Source/Common/DatePickerInput.tsx
index ec1df8a4..75a551db 100644
--- a/Source/Common/DatePickerInput.tsx
+++ b/Source/Common/DatePickerInput.tsx
@@ -25,6 +25,7 @@ import {
 import { Dialog } from 'react-aria-components/Dialog';
 import { Heading } from 'react-aria-components/Heading';
 import { useCratisComponentsConfig } from './CratisComponentsProvider';
+import type { ChangeHandler } from '../types/ChangeHandler';
 import { asReactAriaButtonProps } from './reactAriaProps';
 import {
     fromDate,
@@ -99,8 +100,8 @@ export interface DatePickerInputPassThrough {
 export interface DatePickerInputProps {
     /** Controlled JavaScript date value. */
     value: Date | null;
-    /** Invoked with the selected JavaScript date or `null`. */
-    onChange: (value: Date | null) => void;
+    /** Invoked with the selected JavaScript date or `null` and optional change-origin metadata. */
+    onChange: ChangeHandler<Date | null>;
     /** Invoked when focus leaves the picker wrapper. */
     onBlur?: FocusEventHandler<HTMLElement>;
     /** Marks the picker invalid. */
@@ -256,7 +257,7 @@ export const DatePickerInput = ({
         >
             <AriaDatePicker
                 value={asDateValue(value, showTime)}
-                onChange={(next) => onChange(asDate(next))}
+                onChange={(next) => onChange(asDate(next), { source: 'user' })}
                 isDisabled={effectiveDisabled}
                 isReadOnly={effectiveReadOnly}
                 isInvalid={effectiveInvalid}
@@ -457,9 +458,12 @@ export const DatePickerInput = ({
                                     data-cratis-part='today'
                                     disabled={isTodayOutOfBounds}
                                     aria-disabled={isTodayOutOfBounds || undefined}
-                                    onClick={() => {
+                                    onClick={(event) => {
                                         if (isTodayOutOfBounds) return;
-                                        onChange(todayDate);
+                                        onChange(todayDate, {
+                                            source: 'user',
+                                            nativeEvent: event.nativeEvent,
+                                        });
                                     }}
                                 >
                                     {resolvedTodayLabel}
@@ -472,7 +476,12 @@ export const DatePickerInput = ({
                                         pt?.clear?.className,
                                     )}
                                     data-cratis-part='clear'
-                                    onClick={() => onChange(null)}
+                                    onClick={(event) =>
+                                        onChange(null, {
+                                            source: 'user',
+                                            nativeEvent: event.nativeEvent,
+                                        })
+                                    }
                                 >
                                     {resolvedClearLabel}
                                 </button>
diff --git a/Source/DataTables/ColumnFilterMenu.tsx b/Source/DataTables/ColumnFilterMenu.tsx
index ad88d25f..37a08df5 100644
--- a/Source/DataTables/ColumnFilterMenu.tsx
+++ b/Source/DataTables/ColumnFilterMenu.tsx
@@ -19,6 +19,7 @@ import { DatePickerInput } from '../Common/DatePickerInput';
 import { useCratisComponentsConfig } from '../Common/CratisComponentsProvider';
 import { asReactAriaButtonProps } from '../Common/reactAriaProps';
 import { Dropdown, type DropdownParts } from '../Dropdown/Dropdown';
+import type { ChangeHandler } from '../types/ChangeHandler';
 import {
     DataTableFilterMatchMode,
     type DataTableFilterConstraint,
@@ -98,8 +99,10 @@ export interface ColumnFilterElementOptions {
     value: unknown;
     /** Current draft match mode. */
     matchMode: FilterMatchMode;
-    /** Updates draft value and optionally match mode. */
-    onChange: (value: unknown, matchMode?: FilterMatchMode) => void;
+    /** Updates the draft value. */
+    onChange: ChangeHandler<unknown>;
+    /** Updates the draft match mode independently of the value. */
+    onMatchModeChange: ChangeHandler<FilterMatchMode>;
     /** Applies the draft filter. */
     onApply: (event: SyntheticEvent) => void;
     /** Clears the field filter. */
@@ -221,10 +224,22 @@ export const ColumnFilterMenu = ({
             labels?.matchModeLabel ??
             columnFilterMessages?.matchModeLabel ??
             defaultColumnFilterMenuLabels.matchModeLabel,
-        clear: labels?.clear ?? columnFilterMessages?.clear ?? defaultColumnFilterMenuLabels.clear,
-        apply: labels?.apply ?? columnFilterMessages?.apply ?? defaultColumnFilterMenuLabels.apply,
-        true: labels?.true ?? columnFilterMessages?.true ?? defaultColumnFilterMenuLabels.true,
-        false: labels?.false ?? columnFilterMessages?.false ?? defaultColumnFilterMenuLabels.false,
+        clear:
+            labels?.clear ??
+            columnFilterMessages?.clear ??
+            defaultColumnFilterMenuLabels.clear,
+        apply:
+            labels?.apply ??
+            columnFilterMessages?.apply ??
+            defaultColumnFilterMenuLabels.apply,
+        true:
+            labels?.true ??
+            columnFilterMessages?.true ??
+            defaultColumnFilterMenuLabels.true,
+        false:
+            labels?.false ??
+            columnFilterMessages?.false ??
+            defaultColumnFilterMenuLabels.false,
     };
     const modeOptions = optionsFor(dataType).map((option) => ({
         ...option,
@@ -252,10 +267,8 @@ export const ColumnFilterMenu = ({
               field,
               value: draftValue,
               matchMode: draftMode,
-              onChange: (value, matchMode) => {
-                  setDraftValue(value);
-                  if (matchMode) setDraftMode(matchMode);
-              },
+              onChange: setDraftValue,
+              onMatchModeChange: setDraftMode,
               onApply: apply,
               onClear: clear,
           })
@@ -303,7 +316,7 @@ export const ColumnFilterMenu = ({
                               ]}
                               placeholder={placeholder}
                               showClear
-                              onChange={(event) => setDraftValue(event.value)}
+                              onChange={setDraftValue}
                               aria-label={resolvedLabels.valueAriaLabel(field)}
                               className={pt?.input?.className}
                               style={pt?.input?.style}
@@ -331,10 +344,7 @@ export const ColumnFilterMenu = ({
             <AriaButton
                 {...asReactAriaButtonProps(pt?.trigger)}
                 aria-label={resolvedLabels.filterTriggerAriaLabel(field)}
-                className={classNames(
-                    'cratis-filter-trigger',
-                    pt?.trigger?.className,
-                )}
+                className={classNames('cratis-filter-trigger', pt?.trigger?.className)}
                 data-active={
                     (constraint?.value !== null &&
                         constraint?.value !== undefined &&
@@ -347,10 +357,7 @@ export const ColumnFilterMenu = ({
             </AriaButton>
             <Popover
                 {...pt?.popover}
-                className={classNames(
-                    'cratis-filter-popover',
-                    pt?.popover?.className,
-                )}
+                className={classNames('cratis-filter-popover', pt?.popover?.className)}
                 data-cratis-part='filter-popover'
                 placement='bottom end'
             >
@@ -366,9 +373,7 @@ export const ColumnFilterMenu = ({
                             options={modeOptions}
                             optionLabel='label'
                             optionValue='value'
-                            onChange={(event) =>
-                                setDraftMode(event.value as FilterMatchMode)
-                            }
+                            onChange={setDraftMode}
                             aria-label={resolvedLabels.matchModeAriaLabel}
                             pt={pt?.matchMode}
                         />
diff --git a/Source/Dropdown/Dropdown.stories.tsx b/Source/Dropdown/Dropdown.stories.tsx
index e8ab67b3..ca7c122d 100644
--- a/Source/Dropdown/Dropdown.stories.tsx
+++ b/Source/Dropdown/Dropdown.stories.tsx
@@ -47,7 +47,7 @@ const ControlledDropdown = ({
             showClear
             disabled={disabled}
             invalid={invalid}
-            onChange={(event) => setValue(event.value)}
+            onChange={setValue}
             style={{ width: '18rem' }}
         />
     );
diff --git a/Source/Dropdown/Dropdown.tsx b/Source/Dropdown/Dropdown.tsx
index 9f9b55b6..1874f016 100644
--- a/Source/Dropdown/Dropdown.tsx
+++ b/Source/Dropdown/Dropdown.tsx
@@ -9,7 +9,6 @@ import type {
     InputHTMLAttributes,
     Key,
     SelectHTMLAttributes,
-    SyntheticEvent,
 } from 'react';
 import {
     Button as AriaButton,
@@ -29,20 +28,13 @@ import {
     Popover as ComboBoxPopover,
 } from 'react-aria-components/ComboBox';
 import { useCratisComponentsConfig } from '../Common/CratisComponentsProvider';
+import type { ChangeHandler } from '../types/ChangeHandler';
 import {
     asReactAriaButtonProps,
     asReactAriaListBoxItemProps,
     asReactAriaListBoxProps,
 } from '../Common/reactAriaProps';
 
-/** Change event emitted by {@link Dropdown}. */
-export interface DropdownChangeEvent<T = unknown> {
-    /** Newly selected value, or an array when `multiple` is set. */
-    value: T;
-    /** Underlying event when the native multiple-select path produced the change. */
-    originalEvent?: SyntheticEvent;
-}
-
 type DropdownTriggerAttributes = Omit<
     ButtonHTMLAttributes<HTMLButtonElement>,
     'onClick' | 'tabIndex' | 'value'
@@ -142,8 +134,8 @@ export interface DropdownProps<T = unknown> {
     ariaDescribedBy?: string;
     /** Legacy invalid-state alias. */
     ariaInvalid?: boolean;
-    /** Invoked with the selected value(s). */
-    onChange?: (event: DropdownChangeEvent<T>) => void;
+    /** Invoked with the selected value(s) and optional change-origin metadata. */
+    onChange?: ChangeHandler<T>;
     /** Invoked when focus leaves the Dropdown wrapper. */
     onBlur?: FocusEventHandler<HTMLElement>;
     /** Cratis-owned per-part attributes. */
@@ -293,14 +285,14 @@ export const Dropdown = <T = unknown,>({
 
     const selectOption = (key: Key | null) => {
         const option = resolvedOptions.find((candidate) => candidate.key === String(key));
-        onChange?.({ value: (option?.value ?? null) as T });
+        onChange?.((option?.value ?? null) as T, { source: 'user' });
     };
     const selectOptions = (keys: readonly Key[]) => {
         const selectedKeys = new Set(keys.map(String));
         const values = resolvedOptions
             .filter((option) => selectedKeys.has(option.key))
             .map((option) => option.value);
-        onChange?.({ value: values as T });
+        onChange?.(values as T, { source: 'user' });
     };
     // React Aria's Select trigger context does not forward aria-invalid from its Button child.
     // Keep the Cratis validation contract on the actual focusable control after context props merge.
@@ -388,7 +380,12 @@ export const Dropdown = <T = unknown,>({
                                 )}
                                 data-cratis-part='clear'
                                 aria-label={clearSelectionLabel}
-                                onClick={() => onChange?.({ value: [] as T })}
+                                onClick={(event) =>
+                                    onChange?.([] as T, {
+                                        source: 'user',
+                                        nativeEvent: event.nativeEvent,
+                                    })
+                                }
                             >
                                 <span aria-hidden='true'>×</span>
                             </button>
@@ -475,7 +472,10 @@ export const Dropdown = <T = unknown,>({
                         const values = resolvedOptions
                             .filter((option) => keys.includes(option.key))
                             .map((option) => option.value);
-                        onChange?.({ value: values as T, originalEvent: event });
+                        onChange?.(values as T, {
+                            source: 'user',
+                            nativeEvent: event.nativeEvent,
+                        });
                     }}
                 >
                     {resolvedOptions.map((option) => (
@@ -499,7 +499,12 @@ export const Dropdown = <T = unknown,>({
                         )}
                         data-cratis-part='clear'
                         aria-label={clearSelectionLabel}
-                        onClick={() => onChange?.({ value: [] as T })}
+                        onClick={(event) =>
+                            onChange?.([] as T, {
+                                source: 'user',
+                                nativeEvent: event.nativeEvent,
+                            })
+                        }
                     >
                         <span aria-hidden='true'>×</span>
                     </button>
@@ -567,7 +572,12 @@ export const Dropdown = <T = unknown,>({
                             )}
                             data-cratis-part='clear'
                             aria-label={clearSelectionLabel}
-                            onClick={() => onChange?.({ value: null as T })}
+                            onClick={(event) =>
+                                onChange?.(null as T, {
+                                    source: 'user',
+                                    nativeEvent: event.nativeEvent,
+                                })
+                            }
                         >
                             <span aria-hidden='true'>×</span>
                         </button>
@@ -686,7 +696,12 @@ export const Dropdown = <T = unknown,>({
                         )}
                         data-cratis-part='clear'
                         aria-label={clearSelectionLabel}
-                        onClick={() => onChange?.({ value: null as T })}
+                        onClick={(event) =>
+                            onChange?.(null as T, {
+                                source: 'user',
+                                nativeEvent: event.nativeEvent,
+                            })
+                        }
                     >
                         <span aria-hidden='true'>×</span>
                     </button>
diff --git a/Source/Filter/RangeHistogramFilter.tsx b/Source/Filter/RangeHistogramFilter.tsx
index a53ddb3d..3d029e97 100644
--- a/Source/Filter/RangeHistogramFilter.tsx
+++ b/Source/Filter/RangeHistogramFilter.tsx
@@ -5,6 +5,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type { FilterValue, HistogramBucket } from './types';
 import { buildHistogram } from './utils';
 import type { RenderedHistogramBucket } from './utils';
+import type { ChangeHandler } from '../types/ChangeHandler';
 
 /**
  * Props for {@link RangeHistogramFilter}.
@@ -32,8 +33,8 @@ export interface RangeHistogramFilterProps {
     buckets?: number;
     /** The currently selected range, or `null` when no range is selected. */
     selectedRange: [number, number] | null;
-    /** Called when the user drags a handle or clicks a bar to select a new range. Pass `null` to clear. */
-    onChange: (range: [number, number] | null) => void;
+    /** Called with the selected range and optional user-interaction metadata. Pass `null` to clear. */
+    onChange: ChangeHandler<[number, number] | null>;
     /**
      * Optional formatter for endpoint labels and bar tooltips. Defaults to a numeric formatter.
      * Use this to display ms timestamps as dates, currency, etc.
@@ -173,7 +174,7 @@ export function RangeHistogramFilter({
                 newRange = [newStart, newEnd];
             }
 
-            onChange(newRange);
+            onChange(newRange, { source: 'user', nativeEvent: event });
         };
 
         const handleMouseUp = () => {
@@ -190,8 +191,14 @@ export function RangeHistogramFilter({
         };
     }, [isDragging, dragStart, min, max, onChange]);
 
-    const handleBarClick = (bucket: RenderedHistogramBucket) => {
-        onChange([bucket.start, bucket.end]);
+    const handleBarClick = (
+        bucket: RenderedHistogramBucket,
+        event: React.MouseEvent<HTMLButtonElement>,
+    ) => {
+        onChange([bucket.start, bucket.end], {
+            source: 'user',
+            nativeEvent: event.nativeEvent,
+        });
     };
 
     const rangeSpan = max - min;
@@ -219,15 +226,21 @@ export function RangeHistogramFilter({
         event.preventDefault();
         const rounded = Number(next.toFixed(10));
         if (handle === 'left') {
-            onChange([
-                Math.max(min, Math.min(rounded, currentRange[1] - minimumGap)),
-                currentRange[1],
-            ]);
+            onChange(
+                [
+                    Math.max(min, Math.min(rounded, currentRange[1] - minimumGap)),
+                    currentRange[1],
+                ],
+                { source: 'user', nativeEvent: event.nativeEvent },
+            );
         } else {
-            onChange([
-                currentRange[0],
-                Math.min(max, Math.max(rounded, currentRange[0] + minimumGap)),
-            ]);
+            onChange(
+                [
+                    currentRange[0],
+                    Math.min(max, Math.max(rounded, currentRange[0] + minimumGap)),
+                ],
+                { source: 'user', nativeEvent: event.nativeEvent },
+            );
         }
     };
 
@@ -249,7 +262,7 @@ export function RangeHistogramFilter({
                             key={i}
                             className={`pv-histogram-bar ${isInRange ? 'in-range' : ''} ${isPartiallyInRange && !isInRange ? 'partial' : ''}`}
                             style={{ height: `${heightPercent}%` }}
-                            onClick={() => handleBarClick(bucket)}
+                            onClick={(event) => handleBarClick(bucket, event)}
                             title={`${formatValue(bucket.start)} - ${formatValue(bucket.end)}: ${bucket.count} ${itemsLabel}`}
                             type='button'
                         />
diff --git a/Source/Filter/types.ts b/Source/Filter/types.ts
index 086b081c..f56e9de8 100644
--- a/Source/Filter/types.ts
+++ b/Source/Filter/types.ts
@@ -1,6 +1,8 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
+import type { ChangeHandler } from '../types/ChangeHandler';
+
 /** A value that can be rendered in a filter option or counted into a histogram bucket. */
 export type FilterValue = string | number | boolean | Date | null | undefined;
 
@@ -20,8 +22,8 @@ export interface FilterOption {
 export interface FilterEditorProps {
     /** The current value for this filter, or `undefined` when unset. */
     value: unknown;
-    /** Called when the user changes the filter value. */
-    onChange: (value: unknown) => void;
+    /** Called with the custom filter value and optional change-origin metadata. */
+    onChange: ChangeHandler<unknown>;
 }
 
 /** One pre-counted bar of a range filter's histogram. */
diff --git a/Source/ObjectContentEditor/ObjectContentEditor.tsx b/Source/ObjectContentEditor/ObjectContentEditor.tsx
index 200d4c07..93985683 100644
--- a/Source/ObjectContentEditor/ObjectContentEditor.tsx
+++ b/Source/ObjectContentEditor/ObjectContentEditor.tsx
@@ -5,6 +5,8 @@ import { Tooltip } from '../Common/Tooltip';
 import React, { useState, useCallback, useMemo, useEffect } from 'react';
 import * as faIcons from 'react-icons/fa6';
 import { ObjectNavigationalBar } from '../ObjectNavigationalBar';
+import type { ChangeHandler } from '../types/ChangeHandler';
+import type { ChangeMeta } from '../types/ChangeMeta';
 import type { Json, JsonSchema, JsonSchemaProperty } from '../types/JsonSchema';
 import { getValueAtPath } from './objectHelpers';
 
@@ -37,7 +39,7 @@ export interface ObjectContentEditorProps {
      * Invoked with the updated object after any field edit. Required to
      * actually persist user changes when {@link editMode} is true.
      */
-    onChange?: (object: Json) => void;
+    onChange?: ChangeHandler<Json>;
 
     /**
      * Invoked whenever the validation state of the editor changes (true when
@@ -254,12 +256,12 @@ export const ObjectContentEditor = ({
     };
 
     const updateValue = useCallback(
-        (propertyName: string, newValue: Json) => {
+        (propertyName: string, newValue: Json, meta: ChangeMeta) => {
             if (!onChange) return;
 
             const updatedObject = { ...(object as Record<string, Json>) };
             updatedObject[propertyName] = newValue;
-            onChange(updatedObject);
+            onChange(updatedObject, meta);
         },
         [object, onChange],
     );
@@ -271,8 +273,8 @@ export const ObjectContentEditor = ({
     ) => {
         const error = validationErrors[propertyName];
 
-        const handleChange = (newValue: Json) => {
-            updateValue(propertyName, newValue);
+        const handleChange = (newValue: Json, meta: ChangeMeta) => {
+            updateValue(propertyName, newValue, meta);
             const validationError = validateValue(propertyName, newValue, property);
             setValidationErrors((prev) => {
                 const newErrors = { ...prev };
@@ -292,7 +294,12 @@ export const ObjectContentEditor = ({
                         type='checkbox'
                         aria-label={propertyName}
                         checked={Boolean(value)}
-                        onChange={(event) => handleChange(event.target.checked)}
+                        onChange={(event) =>
+                            handleChange(event.target.checked, {
+                                source: 'user',
+                                nativeEvent: event.nativeEvent,
+                            })
+                        }
                         aria-invalid={Boolean(error) || undefined}
                         className='cratis:size-5 cratis:accent-[var(--cratis-primary-color)]'
                     />
@@ -313,6 +320,10 @@ export const ObjectContentEditor = ({
                                 event.target.value === ''
                                     ? null
                                     : event.target.valueAsNumber,
+                                {
+                                    source: 'user',
+                                    nativeEvent: event.nativeEvent,
+                                },
                             )
                         }
                         aria-invalid={Boolean(error) || undefined}
@@ -330,8 +341,11 @@ export const ObjectContentEditor = ({
                     <DatePickerInput
                         aria-label={propertyName}
                         value={dateValue}
-                        onChange={(date) =>
-                            handleChange(date ? date.toISOString() : null)
+                        onChange={(date, meta) =>
+                            handleChange(
+                                date ? date.toISOString() : null,
+                                meta ?? { source: 'user' },
+                            )
                         }
                         showTime
                         showIcon
@@ -349,8 +363,11 @@ export const ObjectContentEditor = ({
                     <DatePickerInput
                         aria-label={propertyName}
                         value={dateValue}
-                        onChange={(date) =>
-                            handleChange(date ? date.toISOString().split('T')[0] : null)
+                        onChange={(date, meta) =>
+                            handleChange(
+                                date ? date.toISOString().split('T')[0] : null,
+                                meta ?? { source: 'user' },
+                            )
                         }
                         showIcon
                         invalid={!!error}
@@ -396,7 +413,12 @@ export const ObjectContentEditor = ({
                     <textarea
                         aria-label={propertyName}
                         value={String(value ?? '')}
-                        onChange={(event) => handleChange(event.target.value)}
+                        onChange={(event) =>
+                            handleChange(event.target.value, {
+                                source: 'user',
+                                nativeEvent: event.nativeEvent,
+                            })
+                        }
                         rows={3}
                         aria-invalid={Boolean(error) || undefined}
                         className='cratis-field-input cratis-field-textarea cratis:w-full'
@@ -411,7 +433,12 @@ export const ObjectContentEditor = ({
                 <input
                     aria-label={propertyName}
                     value={String(value ?? '')}
-                    onChange={(event) => handleChange(event.target.value)}
+                    onChange={(event) =>
+                        handleChange(event.target.value, {
+                            source: 'user',
+                            nativeEvent: event.nativeEvent,
+                        })
+                    }
                     aria-invalid={Boolean(error) || undefined}
                     className='cratis-field-input cratis:w-full'
                 />
diff --git a/Source/PivotViewer/components/RangeHistogramFilter.tsx b/Source/PivotViewer/components/RangeHistogramFilter.tsx
index a01d8299..87912585 100644
--- a/Source/PivotViewer/components/RangeHistogramFilter.tsx
+++ b/Source/PivotViewer/components/RangeHistogramFilter.tsx
@@ -3,218 +3,231 @@
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type { PivotPrimitive } from '../types';
+import type { ChangeHandler } from '../../types/ChangeHandler';
 
 export interface RangeHistogramFilterProps {
-  values: PivotPrimitive[];
-  min: number;
-  max: number;
-  buckets?: number;
-  selectedRange: [number, number] | null;
-  onChange: (range: [number, number] | null) => void;
+    values: PivotPrimitive[];
+    min: number;
+    max: number;
+    buckets?: number;
+    selectedRange: [number, number] | null;
+    onChange: ChangeHandler<[number, number] | null>;
 }
 
 interface HistogramBucket {
-  start: number;
-  end: number;
-  count: number;
-  maxCount: number;
+    start: number;
+    end: number;
+    count: number;
+    maxCount: number;
 }
 
 export function RangeHistogramFilter({
-  values,
-  min,
-  max,
-  buckets = 20,
-  selectedRange,
-  onChange,
+    values,
+    min,
+    max,
+    buckets = 20,
+    selectedRange,
+    onChange,
 }: RangeHistogramFilterProps) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [isDragging, setIsDragging] = useState<'left' | 'right' | 'range' | null>(null);
-  const [dragStart, setDragStart] = useState<{ x: number; range: [number, number] } | null>(null);
-
-  const numericValues = useMemo(() => {
-    return values
-      .map((v) => {
-        if (typeof v === 'number') return v;
-        if (v instanceof Date) return v.getTime();
-        const parsed = Number(v);
-        return Number.isNaN(parsed) ? null : parsed;
-      })
-      .filter((v): v is number => v !== null);
-  }, [values]);
-
-  const histogram = useMemo((): HistogramBucket[] => {
-    const range = max - min;
-    if (range <= 0 || numericValues.length === 0) {
-      return [];
-    }
-
-    const bucketSize = range / buckets;
-    const bucketCounts: number[] = Array(buckets).fill(0);
-
-    numericValues.forEach((value) => {
-      const bucketIndex = Math.min(
-        Math.floor((value - min) / bucketSize),
-        buckets - 1
-      );
-      if (bucketIndex >= 0 && bucketIndex < buckets) {
-        bucketCounts[bucketIndex]++;
-      }
-    });
-
-    const maxCount = Math.max(...bucketCounts, 1);
-
-    return bucketCounts.map((count, i) => ({
-      start: min + i * bucketSize,
-      end: min + (i + 1) * bucketSize,
-      count,
-      maxCount,
-    }));
-  }, [numericValues, min, max, buckets]);
-
-  const currentRange = selectedRange ?? [min, max];
-
-  const getPositionFromValue = useCallback(
-    (value: number) => {
-      const range = max - min;
-      if (range <= 0) return 0;
-      return ((value - min) / range) * 100;
-    },
-    [min, max]
-  );
-
-  const handleMouseDown = (
-    e: React.MouseEvent,
-    handle: 'left' | 'right' | 'range'
-  ) => {
-    e.preventDefault?.();
-    setIsDragging(handle);
-    setDragStart({ x: e.clientX, range: [...currentRange] as [number, number] });
-  };
-
-  useEffect(() => {
-    if (!isDragging || !dragStart || !containerRef.current) return;
-
-    const container = containerRef.current;
-    const rect = container.getBoundingClientRect();
-    const range = max - min;
-
-    const handleMouseMove = (e: MouseEvent) => {
-      const deltaX = e.clientX - dragStart.x;
-      const deltaPercent = (deltaX / rect.width) * 100;
-      const deltaValue = (deltaPercent / 100) * range;
-
-      let newRange: [number, number] = [...dragStart.range];
-
-      if (isDragging === 'left') {
-        newRange[0] = Math.max(min, Math.min(dragStart.range[0] + deltaValue, newRange[1] - range * 0.01));
-      } else if (isDragging === 'right') {
-        newRange[1] = Math.min(max, Math.max(dragStart.range[1] + deltaValue, newRange[0] + range * 0.01));
-      } else if (isDragging === 'range') {
-        const rangeWidth = dragStart.range[1] - dragStart.range[0];
-        let newStart = dragStart.range[0] + deltaValue;
-        let newEnd = dragStart.range[1] + deltaValue;
-
-        if (newStart < min) {
-          newStart = min;
-          newEnd = min + rangeWidth;
-        }
-        if (newEnd > max) {
-          newEnd = max;
-          newStart = max - rangeWidth;
+    const containerRef = useRef<HTMLDivElement>(null);
+    const [isDragging, setIsDragging] = useState<'left' | 'right' | 'range' | null>(null);
+    const [dragStart, setDragStart] = useState<{
+        x: number;
+        range: [number, number];
+    } | null>(null);
+
+    const numericValues = useMemo(() => {
+        return values
+            .map((v) => {
+                if (typeof v === 'number') return v;
+                if (v instanceof Date) return v.getTime();
+                const parsed = Number(v);
+                return Number.isNaN(parsed) ? null : parsed;
+            })
+            .filter((v): v is number => v !== null);
+    }, [values]);
+
+    const histogram = useMemo((): HistogramBucket[] => {
+        const range = max - min;
+        if (range <= 0 || numericValues.length === 0) {
+            return [];
         }
 
-        newRange = [newStart, newEnd];
-      }
+        const bucketSize = range / buckets;
+        const bucketCounts: number[] = Array(buckets).fill(0);
+
+        numericValues.forEach((value) => {
+            const bucketIndex = Math.min(
+                Math.floor((value - min) / bucketSize),
+                buckets - 1,
+            );
+            if (bucketIndex >= 0 && bucketIndex < buckets) {
+                bucketCounts[bucketIndex]++;
+            }
+        });
+
+        const maxCount = Math.max(...bucketCounts, 1);
+
+        return bucketCounts.map((count, i) => ({
+            start: min + i * bucketSize,
+            end: min + (i + 1) * bucketSize,
+            count,
+            maxCount,
+        }));
+    }, [numericValues, min, max, buckets]);
+
+    const currentRange = selectedRange ?? [min, max];
+
+    const getPositionFromValue = useCallback(
+        (value: number) => {
+            const range = max - min;
+            if (range <= 0) return 0;
+            return ((value - min) / range) * 100;
+        },
+        [min, max],
+    );
+
+    const handleMouseDown = (e: React.MouseEvent, handle: 'left' | 'right' | 'range') => {
+        e.preventDefault?.();
+        setIsDragging(handle);
+        setDragStart({ x: e.clientX, range: [...currentRange] as [number, number] });
+    };
 
-      onChange(newRange);
+    useEffect(() => {
+        if (!isDragging || !dragStart || !containerRef.current) return;
+
+        const container = containerRef.current;
+        const rect = container.getBoundingClientRect();
+        const range = max - min;
+
+        const handleMouseMove = (e: MouseEvent) => {
+            const deltaX = e.clientX - dragStart.x;
+            const deltaPercent = (deltaX / rect.width) * 100;
+            const deltaValue = (deltaPercent / 100) * range;
+
+            let newRange: [number, number] = [...dragStart.range];
+
+            if (isDragging === 'left') {
+                newRange[0] = Math.max(
+                    min,
+                    Math.min(dragStart.range[0] + deltaValue, newRange[1] - range * 0.01),
+                );
+            } else if (isDragging === 'right') {
+                newRange[1] = Math.min(
+                    max,
+                    Math.max(dragStart.range[1] + deltaValue, newRange[0] + range * 0.01),
+                );
+            } else if (isDragging === 'range') {
+                const rangeWidth = dragStart.range[1] - dragStart.range[0];
+                let newStart = dragStart.range[0] + deltaValue;
+                let newEnd = dragStart.range[1] + deltaValue;
+
+                if (newStart < min) {
+                    newStart = min;
+                    newEnd = min + rangeWidth;
+                }
+                if (newEnd > max) {
+                    newEnd = max;
+                    newStart = max - rangeWidth;
+                }
+
+                newRange = [newStart, newEnd];
+            }
+
+            onChange(newRange, { source: 'user', nativeEvent: e });
+        };
+
+        const handleMouseUp = () => {
+            setIsDragging(null);
+            setDragStart(null);
+        };
+
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+
+        return () => {
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+        };
+    }, [isDragging, dragStart, min, max, onChange]);
+
+    const handleBarClick = (
+        bucket: HistogramBucket,
+        event: React.MouseEvent<HTMLButtonElement>,
+    ) => {
+        onChange([bucket.start, bucket.end], {
+            source: 'user',
+            nativeEvent: event.nativeEvent,
+        });
     };
 
-    const handleMouseUp = () => {
-      setIsDragging(null);
-      setDragStart(null);
+    const handleClear = (event: React.MouseEvent<HTMLButtonElement>) => {
+        onChange(null, { source: 'user', nativeEvent: event.nativeEvent });
     };
 
-    document.addEventListener('mousemove', handleMouseMove);
-    document.addEventListener('mouseup', handleMouseUp);
+    const leftPos = getPositionFromValue(currentRange[0]);
+    const rightPos = getPositionFromValue(currentRange[1]);
 
-    return () => {
-      document.removeEventListener('mousemove', handleMouseMove);
-      document.removeEventListener('mouseup', handleMouseUp);
+    const formatValue = (value: number) => {
+        if (Number.isInteger(value)) return value.toString();
+        return value.toFixed(1);
     };
-  }, [isDragging, dragStart, min, max, onChange]);
-
-  const handleBarClick = (bucket: HistogramBucket) => {
-    onChange([bucket.start, bucket.end]);
-  };
-
-  const handleClear = () => {
-    onChange(null);
-  };
-
-  const leftPos = getPositionFromValue(currentRange[0]);
-  const rightPos = getPositionFromValue(currentRange[1]);
-
-  const formatValue = (value: number) => {
-    if (Number.isInteger(value)) return value.toString();
-    return value.toFixed(1);
-  };
-
-  return (
-    <div className="pv-range-histogram" ref={containerRef}>
-      <div className="pv-histogram-bars">
-        {histogram.map((bucket, i) => {
-          const heightPercent = (bucket.count / bucket.maxCount) * 100;
-          const isInRange =
-            bucket.start >= currentRange[0] && bucket.end <= currentRange[1];
-          const isPartiallyInRange =
-            bucket.end > currentRange[0] && bucket.start < currentRange[1];
-
-          return (
-            <button
-              key={i}
-              className={`pv-histogram-bar ${isInRange ? 'in-range' : ''} ${isPartiallyInRange && !isInRange ? 'partial' : ''}`}
-              style={{ height: `${heightPercent}%` }}
-              onClick={() => handleBarClick(bucket)}
-              title={`${formatValue(bucket.start)} - ${formatValue(bucket.end)}: ${bucket.count} items`}
-              type="button"
-            />
-          );
-        })}
-      </div>
-
-      <div className="pv-range-slider">
-        <div className="pv-range-track" />
-        <div
-          className="pv-range-selection"
-          style={{
-            left: `${leftPos}%`,
-            width: `${rightPos - leftPos}%`,
-          }}
-          onMouseDown={(e) => handleMouseDown(e, 'range')}
-        />
-        <div
-          className="pv-range-handle pv-range-handle-left"
-          style={{ left: `${leftPos}%` }}
-          onMouseDown={(e) => handleMouseDown(e, 'left')}
-        />
-        <div
-          className="pv-range-handle pv-range-handle-right"
-          style={{ left: `${rightPos}%` }}
-          onMouseDown={(e) => handleMouseDown(e, 'right')}
-        />
-      </div>
-
-      <div className="pv-range-labels">
-        <span className="pv-range-value">{formatValue(currentRange[0])}</span>
-        <span className="pv-range-value">{formatValue(currentRange[1])}</span>
-      </div>
-
-      {selectedRange && (
-        <button type="button" className="pv-range-clear" onClick={handleClear}>
-          Clear Range
-        </button>
-      )}
-    </div>
-  );
+
+    return (
+        <div className='pv-range-histogram' ref={containerRef}>
+            <div className='pv-histogram-bars'>
+                {histogram.map((bucket, i) => {
+                    const heightPercent = (bucket.count / bucket.maxCount) * 100;
+                    const isInRange =
+                        bucket.start >= currentRange[0] && bucket.end <= currentRange[1];
+                    const isPartiallyInRange =
+                        bucket.end > currentRange[0] && bucket.start < currentRange[1];
+
+                    return (
+                        <button
+                            key={i}
+                            className={`pv-histogram-bar ${isInRange ? 'in-range' : ''} ${isPartiallyInRange && !isInRange ? 'partial' : ''}`}
+                            style={{ height: `${heightPercent}%` }}
+                            onClick={(event) => handleBarClick(bucket, event)}
+                            title={`${formatValue(bucket.start)} - ${formatValue(bucket.end)}: ${bucket.count} items`}
+                            type='button'
+                        />
+                    );
+                })}
+            </div>
+
+            <div className='pv-range-slider'>
+                <div className='pv-range-track' />
+                <div
+                    className='pv-range-selection'
+                    style={{
+                        left: `${leftPos}%`,
+                        width: `${rightPos - leftPos}%`,
+                    }}
+                    onMouseDown={(e) => handleMouseDown(e, 'range')}
+                />
+                <div
+                    className='pv-range-handle pv-range-handle-left'
+                    style={{ left: `${leftPos}%` }}
+                    onMouseDown={(e) => handleMouseDown(e, 'left')}
+                />
+                <div
+                    className='pv-range-handle pv-range-handle-right'
+                    style={{ left: `${rightPos}%` }}
+                    onMouseDown={(e) => handleMouseDown(e, 'right')}
+                />
+            </div>
+
+            <div className='pv-range-labels'>
+                <span className='pv-range-value'>{formatValue(currentRange[0])}</span>
+                <span className='pv-range-value'>{formatValue(currentRange[1])}</span>
+            </div>
+
+            {selectedRange && (
+                <button type='button' className='pv-range-clear' onClick={handleClear}>
+                    Clear Range
+                </button>
+            )}
+        </div>
+    );
 }
diff --git a/Source/PivotViewer/components/pivot/colorResolver.ts b/Source/PivotViewer/components/pivot/colorResolver.ts
index 7e0b5ad9..2d9135a1 100644
--- a/Source/PivotViewer/components/pivot/colorResolver.ts
+++ b/Source/PivotViewer/components/pivot/colorResolver.ts
@@ -159,10 +159,10 @@ export function createCssColorResolver(): CssColorResolver {
  * Observes the environment that can change inherited semantic colors.
  * @returns A cleanup callback that disconnects every observer/listener.
  */
-export function observeColorEnvironment(element: Element, onChange: () => void) {
+export function observeColorEnvironment(element: Element, listener: () => void) {
     if (typeof MutationObserver === 'undefined') return () => undefined;
 
-    const observer = new MutationObserver(onChange);
+    const observer = new MutationObserver(listener);
     let ancestor: Element | null = element;
     while (ancestor) {
         observer.observe(ancestor, {
@@ -176,11 +176,11 @@ export function observeColorEnvironment(element: Element, onChange: () => void)
         typeof window !== 'undefined' && typeof window.matchMedia === 'function'
             ? window.matchMedia('(prefers-color-scheme: dark)')
             : undefined;
-    colorScheme?.addEventListener('change', onChange);
+    colorScheme?.addEventListener('change', listener);
 
     return () => {
         observer.disconnect();
-        colorScheme?.removeEventListener('change', onChange);
+        colorScheme?.removeEventListener('change', listener);
     };
 }
 
diff --git a/Source/SchemaEditor/SchemaEditor.tsx b/Source/SchemaEditor/SchemaEditor.tsx
index 20a5ba4e..0810004d 100644
--- a/Source/SchemaEditor/SchemaEditor.tsx
+++ b/Source/SchemaEditor/SchemaEditor.tsx
@@ -11,6 +11,7 @@ import { Message } from '../Display/Message';
 import * as faIcons from 'react-icons/fa6';
 import { NameCell } from './NameCell';
 import { TypeCell } from './TypeCell';
+import type { ChangeHandler } from '../types/ChangeHandler';
 import type { JsonSchema, JsonSchemaProperty } from '../types/JsonSchema';
 import { type TypeFormat, DEFAULT_TYPE_FORMATS } from '../types/TypeFormat';
 import { validatePropertyName, buildBreadcrumbItems } from './schemaHelpers';
@@ -153,8 +154,8 @@ export interface SchemaEditorProps {
      */
     canNotEditReason?: string;
 
-    /** Invoked with the updated schema after any structural change. */
-    onChange?: (schema: JsonSchema) => void;
+    /** Invoked with the updated schema and optional metadata after any structural change. */
+    onChange?: ChangeHandler<JsonSchema>;
 
     /** Invoked when the user activates the Save action. */
     onSave?: () => void;
@@ -326,7 +327,7 @@ export const SchemaEditor = ({
             if (path.length === 0) {
                 const updated = updater(newSchema);
                 setCurrentSchema(updated);
-                onChange?.(updated);
+                onChange?.(updated, { source: 'user' });
                 return;
             }
 
@@ -357,7 +358,7 @@ export const SchemaEditor = ({
             }
 
             setCurrentSchema(newSchema);
-            onChange?.(newSchema);
+            onChange?.(newSchema, { source: 'user' });
         },
         [currentSchema, onChange],
     );
@@ -538,7 +539,7 @@ export const SchemaEditor = ({
         }
 
         setCurrentSchema(restoredSchema);
-        onChange?.(changedSchema);
+        onChange?.(changedSchema, { source: 'reset' });
         setIsEditMode(false);
         onCancel?.();
     }, [initialSchema, onChange, onCancel]);
diff --git a/Source/SchemaEditor/TypeCell.tsx b/Source/SchemaEditor/TypeCell.tsx
index de2bab98..26f7a759 100644
--- a/Source/SchemaEditor/TypeCell.tsx
+++ b/Source/SchemaEditor/TypeCell.tsx
@@ -157,14 +157,17 @@ export const TypeCell = ({
     }
 
     return (
-        <div className='cratis:flex cratis:items-center cratis:gap-2 cratis:w-full' style={{ minHeight: '2.5rem' }}>
+        <div
+            className='cratis:flex cratis:items-center cratis:gap-2 cratis:w-full'
+            style={{ minHeight: '2.5rem' }}
+        >
             <Dropdown<string>
                 aria-label={labels.propertyType}
                 value={currentValue}
                 options={allTypeOptions}
                 optionLabel='label'
                 optionValue='value'
-                onChange={(e) => handleTypeChange(e.value, rowData.name || '')}
+                onChange={(value) => handleTypeChange(value, rowData.name || '')}
                 className='cratis:flex-1'
             />
             {rowData.type === 'array' && rowData.items && (
@@ -184,8 +187,8 @@ export const TypeCell = ({
                         options={allTypeOptions}
                         optionLabel='label'
                         optionValue='value'
-                        onChange={(e) =>
-                            handleTypeChange(e.value, rowData.name || '', true)
+                        onChange={(value) =>
+                            handleTypeChange(value, rowData.name || '', true)
                         }
                         className='cratis:flex-1'
                     />
diff --git a/Source/types/ChangeHandler.ts b/Source/types/ChangeHandler.ts
new file mode 100644
index 00000000..3f3f3b44
--- /dev/null
+++ b/Source/types/ChangeHandler.ts
@@ -0,0 +1,7 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { ChangeMeta } from './ChangeMeta';
+
+/** Handles a semantic value change and optional information about its origin. */
+export type ChangeHandler<T> = (value: T, meta?: ChangeMeta) => void;
diff --git a/Source/types/ChangeMeta.ts b/Source/types/ChangeMeta.ts
new file mode 100644
index 00000000..219ad05f
--- /dev/null
+++ b/Source/types/ChangeMeta.ts
@@ -0,0 +1,10 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+/** Describes the origin of a Components-owned value change. */
+export interface ChangeMeta {
+    /** Identifies whether the value came from user interaction, programmatic work, or a reset. */
+    readonly source: 'user' | 'programmatic' | 'reset';
+    /** Native browser event that caused the change, when the component boundary exposes one safely. */
+    readonly nativeEvent?: Event;
+}
diff --git a/Source/types/index.ts b/Source/types/index.ts
index 8a638503..ff114e9d 100644
--- a/Source/types/index.ts
+++ b/Source/types/index.ts
@@ -1,6 +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 './ChangeHandler';
+export * from './ChangeMeta';
 export * from './JsonSchema';
 export * from './parts';
 export * from './TypeFormat';

From 9ee334250d85e032dbc7e514e678f321982b7aba Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 14:04:56 +0200
Subject: [PATCH 144/267] Remove accidental callback formatting churn

---
 Source/CommandForm/fields/CheckboxField.tsx   |  96 ++---
 .../CommandForm/fields/ColorPickerField.tsx   |   7 +-
 Source/CommandForm/fields/InputTextField.tsx  |  47 +-
 Source/CommandForm/fields/NumberField.tsx     |  77 ++--
 Source/CommandForm/fields/PasswordField.tsx   |   9 +-
 Source/CommandForm/fields/SliderField.tsx     |  81 ++--
 Source/CommandForm/fields/TextAreaField.tsx   |  51 +--
 .../CommandForm/fields/ToggleSwitchField.tsx  | 100 ++---
 Source/DataTables/ColumnFilterMenu.tsx        |  30 +-
 Source/Filter/RangeHistogramFilter.tsx        |  34 +-
 .../components/RangeHistogramFilter.tsx       | 404 +++++++++---------
 Source/SchemaEditor/TypeCell.tsx              |  17 +-
 12 files changed, 443 insertions(+), 510 deletions(-)

diff --git a/Source/CommandForm/fields/CheckboxField.tsx b/Source/CommandForm/fields/CheckboxField.tsx
index d0a6900e..f4e5b695 100644
--- a/Source/CommandForm/fields/CheckboxField.tsx
+++ b/Source/CommandForm/fields/CheckboxField.tsx
@@ -26,7 +26,8 @@ const checkboxPartsMatchManifest: ExactPartKeys<CheckboxParts, PartsOf<'Checkbox
 void checkboxPartsMatchManifest;
 
 interface CheckboxFieldComponentProps
-    extends WrappedFieldProps<boolean>, FieldAccessibilityProps {
+    extends WrappedFieldProps<boolean>,
+        FieldAccessibilityProps {
     label?: string;
     className?: string;
     pt?: CheckboxParts;
@@ -44,61 +45,54 @@ export const CheckboxField = asCommandFormField<CheckboxFieldComponentProps>(
         });
         return (
             <>
-                <label
-                    {...props.pt?.root}
+        <label
+            {...props.pt?.root}
+            className={['cratis-choice-field', props.pt?.root?.className, props.className]
+                .filter(Boolean)
+                .join(' ')}
+            onBlur={props.onBlur}
+            data-cratis-part='root'
+            data-invalid={props.invalid || undefined}
+        >
+            <input
+                {...props.pt?.input}
+                id={accessibility.controlId}
+                aria-label={accessibility.ariaLabel}
+                aria-describedby={accessibility.ariaDescribedBy}
+                type='checkbox'
+                checked={props.value}
+                onChange={(event) => props.onChange(event.currentTarget.checked)}
+                aria-invalid={props.invalid || undefined}
+                className={['cratis-choice-field__native', props.pt?.input?.className]
+                    .filter(Boolean)
+                    .join(' ')}
+                data-cratis-part='input'
+            />
+            <span
+                {...props.pt?.box}
+                className={['cratis-checkbox__box', props.pt?.box?.className]
+                    .filter(Boolean)
+                    .join(' ')}
+                data-cratis-part='box'
+                aria-hidden='true'
+            >
+                <span
+                    {...props.pt?.indicator}
                     className={[
-                        'cratis-choice-field',
-                        props.pt?.root?.className,
-                        props.className,
+                        'cratis-checkbox__indicator',
+                        props.pt?.indicator?.className,
                     ]
                         .filter(Boolean)
                         .join(' ')}
-                    onBlur={props.onBlur}
-                    data-cratis-part='root'
-                    data-invalid={props.invalid || undefined}
+                    data-cratis-part='indicator'
                 >
-                    <input
-                        {...props.pt?.input}
-                        id={accessibility.controlId}
-                        aria-label={accessibility.ariaLabel}
-                        aria-describedby={accessibility.ariaDescribedBy}
-                        type='checkbox'
-                        checked={props.value}
-                        onChange={(event) => props.onChange(event.currentTarget.checked)}
-                        aria-invalid={props.invalid || undefined}
-                        className={[
-                            'cratis-choice-field__native',
-                            props.pt?.input?.className,
-                        ]
-                            .filter(Boolean)
-                            .join(' ')}
-                        data-cratis-part='input'
-                    />
-                    <span
-                        {...props.pt?.box}
-                        className={['cratis-checkbox__box', props.pt?.box?.className]
-                            .filter(Boolean)
-                            .join(' ')}
-                        data-cratis-part='box'
-                        aria-hidden='true'
-                    >
-                        <span
-                            {...props.pt?.indicator}
-                            className={[
-                                'cratis-checkbox__indicator',
-                                props.pt?.indicator?.className,
-                            ]
-                                .filter(Boolean)
-                                .join(' ')}
-                            data-cratis-part='indicator'
-                        >
-                            ✓
-                        </span>
-                    </span>
-                    {props.label && (
-                        <span className='cratis-choice-field__label'>{props.label}</span>
-                    )}
-                </label>
+                    ✓
+                </span>
+            </span>
+            {props.label && (
+                <span className='cratis-choice-field__label'>{props.label}</span>
+            )}
+        </label>
                 {accessibility.hiddenError}
             </>
         );
diff --git a/Source/CommandForm/fields/ColorPickerField.tsx b/Source/CommandForm/fields/ColorPickerField.tsx
index d9f14092..ca75a57c 100644
--- a/Source/CommandForm/fields/ColorPickerField.tsx
+++ b/Source/CommandForm/fields/ColorPickerField.tsx
@@ -24,7 +24,8 @@ const colorPickerPartsMatchManifest: ExactPartKeys<ColorPickerParts, PartsOf<'Co
 void colorPickerPartsMatchManifest;
 
 interface ColorPickerFieldComponentProps
-    extends WrappedFieldProps<string>, FieldAccessibilityProps {
+    extends WrappedFieldProps<string>,
+        FieldAccessibilityProps {
     inline?: boolean;
     defaultColor?: string;
     className?: string;
@@ -70,9 +71,7 @@ export const ColorPickerField = asCommandFormField<ColorPickerFieldComponentProp
                     aria-describedby={accessibility.ariaDescribedBy}
                     type='color'
                     value={`#${value}`}
-                    onChange={(event) =>
-                        props.onChange(event.currentTarget.value.replace('#', ''))
-                    }
+                    onChange={(event) => props.onChange(event.currentTarget.value.replace('#', ''))}
                     aria-invalid={props.invalid || undefined}
                     className={['cratis-color-field__input', props.pt?.input?.className]
                         .filter(Boolean)
diff --git a/Source/CommandForm/fields/InputTextField.tsx b/Source/CommandForm/fields/InputTextField.tsx
index baf07e11..676df296 100644
--- a/Source/CommandForm/fields/InputTextField.tsx
+++ b/Source/CommandForm/fields/InputTextField.tsx
@@ -15,7 +15,8 @@ export interface InputTextParts {
 }
 
 interface InputTextComponentProps
-    extends WrappedFieldProps<string>, FieldAccessibilityProps {
+    extends WrappedFieldProps<string>,
+        FieldAccessibilityProps {
     type?:
         | 'text'
         | 'email'
@@ -44,28 +45,28 @@ export const InputTextField = asCommandFormField<InputTextComponentProps>(
         });
         return (
             <>
-                <input
-                    {...props.pt?.root}
-                    id={accessibility.controlId}
-                    aria-label={accessibility.ariaLabel}
-                    aria-describedby={accessibility.ariaDescribedBy}
-                    type={props.type ?? 'text'}
-                    value={props.value}
-                    onChange={(event) => props.onChange(event.currentTarget.value)}
-                    onBlur={props.onBlur}
-                    placeholder={props.placeholder}
-                    aria-invalid={props.invalid || undefined}
-                    data-invalid={props.invalid || undefined}
-                    data-cratis-part='input'
-                    className={[
-                        'cratis-field-input',
-                        'cratis:w-full',
-                        props.pt?.root?.className,
-                        props.className,
-                    ]
-                        .filter(Boolean)
-                        .join(' ')}
-                />
+        <input
+            {...props.pt?.root}
+            id={accessibility.controlId}
+            aria-label={accessibility.ariaLabel}
+            aria-describedby={accessibility.ariaDescribedBy}
+            type={props.type ?? 'text'}
+            value={props.value}
+            onChange={(event) => props.onChange(event.currentTarget.value)}
+            onBlur={props.onBlur}
+            placeholder={props.placeholder}
+            aria-invalid={props.invalid || undefined}
+            data-invalid={props.invalid || undefined}
+            data-cratis-part='input'
+            className={[
+                'cratis-field-input',
+                'cratis:w-full',
+                props.pt?.root?.className,
+                props.className,
+            ]
+                .filter(Boolean)
+                .join(' ')}
+        />
                 {accessibility.hiddenError}
             </>
         );
diff --git a/Source/CommandForm/fields/NumberField.tsx b/Source/CommandForm/fields/NumberField.tsx
index da65479e..29810d09 100644
--- a/Source/CommandForm/fields/NumberField.tsx
+++ b/Source/CommandForm/fields/NumberField.tsx
@@ -22,7 +22,8 @@ const numberFieldPartsMatchManifest: ExactPartKeys<NumberFieldParts, PartsOf<'Nu
 void numberFieldPartsMatchManifest;
 
 interface NumberFieldComponentProps
-    extends WrappedFieldProps<number>, FieldAccessibilityProps {
+    extends WrappedFieldProps<number>,
+        FieldAccessibilityProps {
     placeholder?: string;
     min?: number;
     max?: number;
@@ -42,50 +43,40 @@ export const NumberField = asCommandFormField<NumberFieldComponentProps>(
             ariaDescribedBy: props.pt?.input?.['aria-describedby'],
         });
         return (
-            <div
-                {...props.pt?.root}
-                onBlur={props.onBlur}
-                data-cratis-part='root'
-                className={[
-                    'cratis-number-field',
-                    'cratis:w-full',
-                    props.pt?.root?.className,
-                    props.className,
-                ]
+        <div
+            {...props.pt?.root}
+            onBlur={props.onBlur}
+            data-cratis-part='root'
+            className={[
+                'cratis-number-field',
+                'cratis:w-full',
+                props.pt?.root?.className,
+                props.className,
+            ]
+                .filter(Boolean)
+                .join(' ')}
+        >
+            <input
+                {...props.pt?.input}
+                id={accessibility.controlId}
+                aria-label={accessibility.ariaLabel}
+                aria-describedby={accessibility.ariaDescribedBy}
+                type='number'
+                value={props.value}
+                onChange={(event) => props.onChange(Number.isNaN(event.currentTarget.valueAsNumber) ? 0 : event.currentTarget.valueAsNumber)}
+                placeholder={props.placeholder}
+                min={props.min}
+                max={props.max}
+                step={props.step}
+                aria-invalid={props.invalid || undefined}
+                data-invalid={props.invalid || undefined}
+                data-cratis-part='input'
+                className={['cratis-field-input', 'cratis:w-full', props.pt?.input?.className]
                     .filter(Boolean)
                     .join(' ')}
-            >
-                <input
-                    {...props.pt?.input}
-                    id={accessibility.controlId}
-                    aria-label={accessibility.ariaLabel}
-                    aria-describedby={accessibility.ariaDescribedBy}
-                    type='number'
-                    value={props.value}
-                    onChange={(event) =>
-                        props.onChange(
-                            Number.isNaN(event.currentTarget.valueAsNumber)
-                                ? 0
-                                : event.currentTarget.valueAsNumber,
-                        )
-                    }
-                    placeholder={props.placeholder}
-                    min={props.min}
-                    max={props.max}
-                    step={props.step}
-                    aria-invalid={props.invalid || undefined}
-                    data-invalid={props.invalid || undefined}
-                    data-cratis-part='input'
-                    className={[
-                        'cratis-field-input',
-                        'cratis:w-full',
-                        props.pt?.input?.className,
-                    ]
-                        .filter(Boolean)
-                        .join(' ')}
-                />
-                {accessibility.hiddenError}
-            </div>
+            />
+            {accessibility.hiddenError}
+        </div>
         );
     },
     { defaultValue: 0 },
diff --git a/Source/CommandForm/fields/PasswordField.tsx b/Source/CommandForm/fields/PasswordField.tsx
index 56b39ef3..2a63bf67 100644
--- a/Source/CommandForm/fields/PasswordField.tsx
+++ b/Source/CommandForm/fields/PasswordField.tsx
@@ -29,7 +29,8 @@ const passwordPartsMatchManifest: ExactPartKeys<PasswordParts, PartsOf<'Password
 void passwordPartsMatchManifest;
 
 interface PasswordFieldComponentProps
-    extends WrappedFieldProps<string>, FieldAccessibilityProps {
+    extends WrappedFieldProps<string>,
+        FieldAccessibilityProps {
     placeholder?: string;
     className?: string;
     pt?: PasswordParts;
@@ -71,11 +72,7 @@ const PasswordControl = (props: PasswordFieldComponentProps) => {
                 placeholder={props.placeholder}
                 aria-invalid={props.invalid || undefined}
                 data-invalid={props.invalid || undefined}
-                className={[
-                    'cratis-field-input',
-                    'cratis:w-full',
-                    props.pt?.input?.className,
-                ]
+                className={['cratis-field-input', 'cratis:w-full', props.pt?.input?.className]
                     .filter(Boolean)
                     .join(' ')}
                 data-cratis-part='input'
diff --git a/Source/CommandForm/fields/SliderField.tsx b/Source/CommandForm/fields/SliderField.tsx
index f56da3cf..81de7608 100644
--- a/Source/CommandForm/fields/SliderField.tsx
+++ b/Source/CommandForm/fields/SliderField.tsx
@@ -24,7 +24,8 @@ const sliderPartsMatchManifest: ExactPartKeys<SliderParts, PartsOf<'SliderField'
 void sliderPartsMatchManifest;
 
 interface SliderFieldComponentProps
-    extends WrappedFieldProps<number>, FieldAccessibilityProps {
+    extends WrappedFieldProps<number>,
+        FieldAccessibilityProps {
     min?: number;
     max?: number;
     step?: number;
@@ -43,49 +44,47 @@ export const SliderField = asCommandFormField<SliderFieldComponentProps>(
             ariaDescribedBy: props.pt?.input?.['aria-describedby'],
         });
         return (
-            <div
-                {...props.pt?.root}
-                className={[
-                    'cratis-slider-field',
-                    'cratis:w-full',
-                    props.pt?.root?.className,
-                    props.className,
-                ]
+        <div
+            {...props.pt?.root}
+            className={[
+                'cratis-slider-field',
+                'cratis:w-full',
+                props.pt?.root?.className,
+                props.className,
+            ]
+                .filter(Boolean)
+                .join(' ')}
+            onBlur={props.onBlur}
+            data-cratis-part='root'
+        >
+            <input
+                {...props.pt?.input}
+                id={accessibility.controlId}
+                aria-label={accessibility.ariaLabel}
+                aria-describedby={accessibility.ariaDescribedBy}
+                type='range'
+                value={props.value}
+                onChange={(event) => props.onChange(event.currentTarget.valueAsNumber)}
+                min={props.min ?? 0}
+                max={props.max ?? 100}
+                step={props.step ?? 1}
+                aria-invalid={props.invalid || undefined}
+                className={['cratis-slider-field__input', props.pt?.input?.className]
                     .filter(Boolean)
                     .join(' ')}
-                onBlur={props.onBlur}
-                data-cratis-part='root'
+                data-cratis-part='input'
+            />
+            <span
+                {...props.pt?.value}
+                className={['cratis-slider-field__value', props.pt?.value?.className]
+                    .filter(Boolean)
+                    .join(' ')}
+                data-cratis-part='value'
             >
-                <input
-                    {...props.pt?.input}
-                    id={accessibility.controlId}
-                    aria-label={accessibility.ariaLabel}
-                    aria-describedby={accessibility.ariaDescribedBy}
-                    type='range'
-                    value={props.value}
-                    onChange={(event) =>
-                        props.onChange(event.currentTarget.valueAsNumber)
-                    }
-                    min={props.min ?? 0}
-                    max={props.max ?? 100}
-                    step={props.step ?? 1}
-                    aria-invalid={props.invalid || undefined}
-                    className={['cratis-slider-field__input', props.pt?.input?.className]
-                        .filter(Boolean)
-                        .join(' ')}
-                    data-cratis-part='input'
-                />
-                <span
-                    {...props.pt?.value}
-                    className={['cratis-slider-field__value', props.pt?.value?.className]
-                        .filter(Boolean)
-                        .join(' ')}
-                    data-cratis-part='value'
-                >
-                    {props.value}
-                </span>
-                {accessibility.hiddenError}
-            </div>
+                {props.value}
+            </span>
+            {accessibility.hiddenError}
+        </div>
         );
     },
     { defaultValue: 0 },
diff --git a/Source/CommandForm/fields/TextAreaField.tsx b/Source/CommandForm/fields/TextAreaField.tsx
index f4d37a26..3e9bee81 100644
--- a/Source/CommandForm/fields/TextAreaField.tsx
+++ b/Source/CommandForm/fields/TextAreaField.tsx
@@ -15,7 +15,8 @@ export interface TextAreaParts {
 }
 
 interface TextAreaFieldComponentProps
-    extends WrappedFieldProps<string>, FieldAccessibilityProps {
+    extends WrappedFieldProps<string>,
+        FieldAccessibilityProps {
     placeholder?: string;
     rows?: number;
     cols?: number;
@@ -35,30 +36,30 @@ export const TextAreaField = asCommandFormField<TextAreaFieldComponentProps>(
         });
         return (
             <>
-                <textarea
-                    {...props.pt?.root}
-                    id={accessibility.controlId}
-                    aria-label={accessibility.ariaLabel}
-                    aria-describedby={accessibility.ariaDescribedBy}
-                    value={props.value}
-                    onChange={(event) => props.onChange(event.currentTarget.value)}
-                    onBlur={props.onBlur}
-                    placeholder={props.placeholder}
-                    rows={props.rows ?? 5}
-                    cols={props.cols}
-                    aria-invalid={props.invalid || undefined}
-                    data-invalid={props.invalid || undefined}
-                    data-cratis-part='textarea'
-                    className={[
-                        'cratis-field-input',
-                        'cratis-field-textarea',
-                        'cratis:w-full',
-                        props.pt?.root?.className,
-                        props.className,
-                    ]
-                        .filter(Boolean)
-                        .join(' ')}
-                />
+        <textarea
+            {...props.pt?.root}
+            id={accessibility.controlId}
+            aria-label={accessibility.ariaLabel}
+            aria-describedby={accessibility.ariaDescribedBy}
+            value={props.value}
+            onChange={(event) => props.onChange(event.currentTarget.value)}
+            onBlur={props.onBlur}
+            placeholder={props.placeholder}
+            rows={props.rows ?? 5}
+            cols={props.cols}
+            aria-invalid={props.invalid || undefined}
+            data-invalid={props.invalid || undefined}
+            data-cratis-part='textarea'
+            className={[
+                'cratis-field-input',
+                'cratis-field-textarea',
+                'cratis:w-full',
+                props.pt?.root?.className,
+                props.className,
+            ]
+                .filter(Boolean)
+                .join(' ')}
+        />
                 {accessibility.hiddenError}
             </>
         );
diff --git a/Source/CommandForm/fields/ToggleSwitchField.tsx b/Source/CommandForm/fields/ToggleSwitchField.tsx
index c6ec1927..e4f5b967 100644
--- a/Source/CommandForm/fields/ToggleSwitchField.tsx
+++ b/Source/CommandForm/fields/ToggleSwitchField.tsx
@@ -26,7 +26,8 @@ const toggleSwitchPartsMatchManifest: ExactPartKeys<ToggleSwitchParts, PartsOf<'
 void toggleSwitchPartsMatchManifest;
 
 interface ToggleSwitchFieldComponentProps
-    extends WrappedFieldProps<boolean>, FieldAccessibilityProps {
+    extends WrappedFieldProps<boolean>,
+        FieldAccessibilityProps {
     label?: string;
     className?: string;
     pt?: ToggleSwitchParts;
@@ -44,63 +45,50 @@ export const ToggleSwitchField = asCommandFormField<ToggleSwitchFieldComponentPr
         });
         return (
             <>
-                <label
-                    {...props.pt?.root}
-                    className={[
-                        'cratis-choice-field',
-                        props.pt?.root?.className,
-                        props.className,
-                    ]
+        <label
+            {...props.pt?.root}
+            className={['cratis-choice-field', props.pt?.root?.className, props.className]
+                .filter(Boolean)
+                .join(' ')}
+            onBlur={props.onBlur}
+            data-cratis-part='root'
+            data-invalid={props.invalid || undefined}
+        >
+            <input
+                {...props.pt?.input}
+                id={accessibility.controlId}
+                aria-label={accessibility.ariaLabel}
+                aria-describedby={accessibility.ariaDescribedBy}
+                type='checkbox'
+                role='switch'
+                checked={props.value}
+                onChange={(event) => props.onChange(event.currentTarget.checked)}
+                aria-invalid={props.invalid || undefined}
+                className={['cratis-choice-field__native', props.pt?.input?.className]
+                    .filter(Boolean)
+                    .join(' ')}
+                data-cratis-part='input'
+            />
+            <span
+                {...props.pt?.control}
+                className={['cratis-switch__control', props.pt?.control?.className]
+                    .filter(Boolean)
+                    .join(' ')}
+                data-cratis-part='control'
+                aria-hidden='true'
+            >
+                <span
+                    {...props.pt?.handle}
+                    className={['cratis-switch__handle', props.pt?.handle?.className]
                         .filter(Boolean)
                         .join(' ')}
-                    onBlur={props.onBlur}
-                    data-cratis-part='root'
-                    data-invalid={props.invalid || undefined}
-                >
-                    <input
-                        {...props.pt?.input}
-                        id={accessibility.controlId}
-                        aria-label={accessibility.ariaLabel}
-                        aria-describedby={accessibility.ariaDescribedBy}
-                        type='checkbox'
-                        role='switch'
-                        checked={props.value}
-                        onChange={(event) => props.onChange(event.currentTarget.checked)}
-                        aria-invalid={props.invalid || undefined}
-                        className={[
-                            'cratis-choice-field__native',
-                            props.pt?.input?.className,
-                        ]
-                            .filter(Boolean)
-                            .join(' ')}
-                        data-cratis-part='input'
-                    />
-                    <span
-                        {...props.pt?.control}
-                        className={[
-                            'cratis-switch__control',
-                            props.pt?.control?.className,
-                        ]
-                            .filter(Boolean)
-                            .join(' ')}
-                        data-cratis-part='control'
-                        aria-hidden='true'
-                    >
-                        <span
-                            {...props.pt?.handle}
-                            className={[
-                                'cratis-switch__handle',
-                                props.pt?.handle?.className,
-                            ]
-                                .filter(Boolean)
-                                .join(' ')}
-                            data-cratis-part='handle'
-                        />
-                    </span>
-                    {props.label && (
-                        <span className='cratis-choice-field__label'>{props.label}</span>
-                    )}
-                </label>
+                    data-cratis-part='handle'
+                />
+            </span>
+            {props.label && (
+                <span className='cratis-choice-field__label'>{props.label}</span>
+            )}
+        </label>
                 {accessibility.hiddenError}
             </>
         );
diff --git a/Source/DataTables/ColumnFilterMenu.tsx b/Source/DataTables/ColumnFilterMenu.tsx
index 37a08df5..4b19823a 100644
--- a/Source/DataTables/ColumnFilterMenu.tsx
+++ b/Source/DataTables/ColumnFilterMenu.tsx
@@ -224,22 +224,10 @@ export const ColumnFilterMenu = ({
             labels?.matchModeLabel ??
             columnFilterMessages?.matchModeLabel ??
             defaultColumnFilterMenuLabels.matchModeLabel,
-        clear:
-            labels?.clear ??
-            columnFilterMessages?.clear ??
-            defaultColumnFilterMenuLabels.clear,
-        apply:
-            labels?.apply ??
-            columnFilterMessages?.apply ??
-            defaultColumnFilterMenuLabels.apply,
-        true:
-            labels?.true ??
-            columnFilterMessages?.true ??
-            defaultColumnFilterMenuLabels.true,
-        false:
-            labels?.false ??
-            columnFilterMessages?.false ??
-            defaultColumnFilterMenuLabels.false,
+        clear: labels?.clear ?? columnFilterMessages?.clear ?? defaultColumnFilterMenuLabels.clear,
+        apply: labels?.apply ?? columnFilterMessages?.apply ?? defaultColumnFilterMenuLabels.apply,
+        true: labels?.true ?? columnFilterMessages?.true ?? defaultColumnFilterMenuLabels.true,
+        false: labels?.false ?? columnFilterMessages?.false ?? defaultColumnFilterMenuLabels.false,
     };
     const modeOptions = optionsFor(dataType).map((option) => ({
         ...option,
@@ -344,7 +332,10 @@ export const ColumnFilterMenu = ({
             <AriaButton
                 {...asReactAriaButtonProps(pt?.trigger)}
                 aria-label={resolvedLabels.filterTriggerAriaLabel(field)}
-                className={classNames('cratis-filter-trigger', pt?.trigger?.className)}
+                className={classNames(
+                    'cratis-filter-trigger',
+                    pt?.trigger?.className,
+                )}
                 data-active={
                     (constraint?.value !== null &&
                         constraint?.value !== undefined &&
@@ -357,7 +348,10 @@ export const ColumnFilterMenu = ({
             </AriaButton>
             <Popover
                 {...pt?.popover}
-                className={classNames('cratis-filter-popover', pt?.popover?.className)}
+                className={classNames(
+                    'cratis-filter-popover',
+                    pt?.popover?.className,
+                )}
                 data-cratis-part='filter-popover'
                 placement='bottom end'
             >
diff --git a/Source/Filter/RangeHistogramFilter.tsx b/Source/Filter/RangeHistogramFilter.tsx
index 3d029e97..95328f39 100644
--- a/Source/Filter/RangeHistogramFilter.tsx
+++ b/Source/Filter/RangeHistogramFilter.tsx
@@ -174,7 +174,7 @@ export function RangeHistogramFilter({
                 newRange = [newStart, newEnd];
             }
 
-            onChange(newRange, { source: 'user', nativeEvent: event });
+            onChange(newRange, { source: 'user', nativeEvent: e });
         };
 
         const handleMouseUp = () => {
@@ -191,14 +191,8 @@ export function RangeHistogramFilter({
         };
     }, [isDragging, dragStart, min, max, onChange]);
 
-    const handleBarClick = (
-        bucket: RenderedHistogramBucket,
-        event: React.MouseEvent<HTMLButtonElement>,
-    ) => {
-        onChange([bucket.start, bucket.end], {
-            source: 'user',
-            nativeEvent: event.nativeEvent,
-        });
+    const handleBarClick = (bucket: RenderedHistogramBucket, event: React.MouseEvent<HTMLButtonElement>) => {
+        onChange([bucket.start, bucket.end], { source: 'user', nativeEvent: event.nativeEvent });
     };
 
     const rangeSpan = max - min;
@@ -226,21 +220,15 @@ export function RangeHistogramFilter({
         event.preventDefault();
         const rounded = Number(next.toFixed(10));
         if (handle === 'left') {
-            onChange(
-                [
-                    Math.max(min, Math.min(rounded, currentRange[1] - minimumGap)),
-                    currentRange[1],
-                ],
-                { source: 'user', nativeEvent: event.nativeEvent },
-            );
+            onChange([
+                Math.max(min, Math.min(rounded, currentRange[1] - minimumGap)),
+                currentRange[1],
+            ], { source: 'user', nativeEvent: event.nativeEvent });
         } else {
-            onChange(
-                [
-                    currentRange[0],
-                    Math.min(max, Math.max(rounded, currentRange[0] + minimumGap)),
-                ],
-                { source: 'user', nativeEvent: event.nativeEvent },
-            );
+            onChange([
+                currentRange[0],
+                Math.min(max, Math.max(rounded, currentRange[0] + minimumGap)),
+            ], { source: 'user', nativeEvent: event.nativeEvent });
         }
     };
 
diff --git a/Source/PivotViewer/components/RangeHistogramFilter.tsx b/Source/PivotViewer/components/RangeHistogramFilter.tsx
index 87912585..ecf3e61c 100644
--- a/Source/PivotViewer/components/RangeHistogramFilter.tsx
+++ b/Source/PivotViewer/components/RangeHistogramFilter.tsx
@@ -6,228 +6,216 @@ import type { PivotPrimitive } from '../types';
 import type { ChangeHandler } from '../../types/ChangeHandler';
 
 export interface RangeHistogramFilterProps {
-    values: PivotPrimitive[];
-    min: number;
-    max: number;
-    buckets?: number;
-    selectedRange: [number, number] | null;
-    onChange: ChangeHandler<[number, number] | null>;
+  values: PivotPrimitive[];
+  min: number;
+  max: number;
+  buckets?: number;
+  selectedRange: [number, number] | null;
+  onChange: ChangeHandler<[number, number] | null>;
 }
 
 interface HistogramBucket {
-    start: number;
-    end: number;
-    count: number;
-    maxCount: number;
+  start: number;
+  end: number;
+  count: number;
+  maxCount: number;
 }
 
 export function RangeHistogramFilter({
-    values,
-    min,
-    max,
-    buckets = 20,
-    selectedRange,
-    onChange,
+  values,
+  min,
+  max,
+  buckets = 20,
+  selectedRange,
+  onChange,
 }: RangeHistogramFilterProps) {
-    const containerRef = useRef<HTMLDivElement>(null);
-    const [isDragging, setIsDragging] = useState<'left' | 'right' | 'range' | null>(null);
-    const [dragStart, setDragStart] = useState<{
-        x: number;
-        range: [number, number];
-    } | null>(null);
-
-    const numericValues = useMemo(() => {
-        return values
-            .map((v) => {
-                if (typeof v === 'number') return v;
-                if (v instanceof Date) return v.getTime();
-                const parsed = Number(v);
-                return Number.isNaN(parsed) ? null : parsed;
-            })
-            .filter((v): v is number => v !== null);
-    }, [values]);
-
-    const histogram = useMemo((): HistogramBucket[] => {
-        const range = max - min;
-        if (range <= 0 || numericValues.length === 0) {
-            return [];
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [isDragging, setIsDragging] = useState<'left' | 'right' | 'range' | null>(null);
+  const [dragStart, setDragStart] = useState<{ x: number; range: [number, number] } | null>(null);
+
+  const numericValues = useMemo(() => {
+    return values
+      .map((v) => {
+        if (typeof v === 'number') return v;
+        if (v instanceof Date) return v.getTime();
+        const parsed = Number(v);
+        return Number.isNaN(parsed) ? null : parsed;
+      })
+      .filter((v): v is number => v !== null);
+  }, [values]);
+
+  const histogram = useMemo((): HistogramBucket[] => {
+    const range = max - min;
+    if (range <= 0 || numericValues.length === 0) {
+      return [];
+    }
+
+    const bucketSize = range / buckets;
+    const bucketCounts: number[] = Array(buckets).fill(0);
+
+    numericValues.forEach((value) => {
+      const bucketIndex = Math.min(
+        Math.floor((value - min) / bucketSize),
+        buckets - 1
+      );
+      if (bucketIndex >= 0 && bucketIndex < buckets) {
+        bucketCounts[bucketIndex]++;
+      }
+    });
+
+    const maxCount = Math.max(...bucketCounts, 1);
+
+    return bucketCounts.map((count, i) => ({
+      start: min + i * bucketSize,
+      end: min + (i + 1) * bucketSize,
+      count,
+      maxCount,
+    }));
+  }, [numericValues, min, max, buckets]);
+
+  const currentRange = selectedRange ?? [min, max];
+
+  const getPositionFromValue = useCallback(
+    (value: number) => {
+      const range = max - min;
+      if (range <= 0) return 0;
+      return ((value - min) / range) * 100;
+    },
+    [min, max]
+  );
+
+  const handleMouseDown = (
+    e: React.MouseEvent,
+    handle: 'left' | 'right' | 'range'
+  ) => {
+    e.preventDefault?.();
+    setIsDragging(handle);
+    setDragStart({ x: e.clientX, range: [...currentRange] as [number, number] });
+  };
+
+  useEffect(() => {
+    if (!isDragging || !dragStart || !containerRef.current) return;
+
+    const container = containerRef.current;
+    const rect = container.getBoundingClientRect();
+    const range = max - min;
+
+    const handleMouseMove = (e: MouseEvent) => {
+      const deltaX = e.clientX - dragStart.x;
+      const deltaPercent = (deltaX / rect.width) * 100;
+      const deltaValue = (deltaPercent / 100) * range;
+
+      let newRange: [number, number] = [...dragStart.range];
+
+      if (isDragging === 'left') {
+        newRange[0] = Math.max(min, Math.min(dragStart.range[0] + deltaValue, newRange[1] - range * 0.01));
+      } else if (isDragging === 'right') {
+        newRange[1] = Math.min(max, Math.max(dragStart.range[1] + deltaValue, newRange[0] + range * 0.01));
+      } else if (isDragging === 'range') {
+        const rangeWidth = dragStart.range[1] - dragStart.range[0];
+        let newStart = dragStart.range[0] + deltaValue;
+        let newEnd = dragStart.range[1] + deltaValue;
+
+        if (newStart < min) {
+          newStart = min;
+          newEnd = min + rangeWidth;
+        }
+        if (newEnd > max) {
+          newEnd = max;
+          newStart = max - rangeWidth;
         }
 
-        const bucketSize = range / buckets;
-        const bucketCounts: number[] = Array(buckets).fill(0);
-
-        numericValues.forEach((value) => {
-            const bucketIndex = Math.min(
-                Math.floor((value - min) / bucketSize),
-                buckets - 1,
-            );
-            if (bucketIndex >= 0 && bucketIndex < buckets) {
-                bucketCounts[bucketIndex]++;
-            }
-        });
-
-        const maxCount = Math.max(...bucketCounts, 1);
-
-        return bucketCounts.map((count, i) => ({
-            start: min + i * bucketSize,
-            end: min + (i + 1) * bucketSize,
-            count,
-            maxCount,
-        }));
-    }, [numericValues, min, max, buckets]);
-
-    const currentRange = selectedRange ?? [min, max];
-
-    const getPositionFromValue = useCallback(
-        (value: number) => {
-            const range = max - min;
-            if (range <= 0) return 0;
-            return ((value - min) / range) * 100;
-        },
-        [min, max],
-    );
-
-    const handleMouseDown = (e: React.MouseEvent, handle: 'left' | 'right' | 'range') => {
-        e.preventDefault?.();
-        setIsDragging(handle);
-        setDragStart({ x: e.clientX, range: [...currentRange] as [number, number] });
-    };
+        newRange = [newStart, newEnd];
+      }
 
-    useEffect(() => {
-        if (!isDragging || !dragStart || !containerRef.current) return;
-
-        const container = containerRef.current;
-        const rect = container.getBoundingClientRect();
-        const range = max - min;
-
-        const handleMouseMove = (e: MouseEvent) => {
-            const deltaX = e.clientX - dragStart.x;
-            const deltaPercent = (deltaX / rect.width) * 100;
-            const deltaValue = (deltaPercent / 100) * range;
-
-            let newRange: [number, number] = [...dragStart.range];
-
-            if (isDragging === 'left') {
-                newRange[0] = Math.max(
-                    min,
-                    Math.min(dragStart.range[0] + deltaValue, newRange[1] - range * 0.01),
-                );
-            } else if (isDragging === 'right') {
-                newRange[1] = Math.min(
-                    max,
-                    Math.max(dragStart.range[1] + deltaValue, newRange[0] + range * 0.01),
-                );
-            } else if (isDragging === 'range') {
-                const rangeWidth = dragStart.range[1] - dragStart.range[0];
-                let newStart = dragStart.range[0] + deltaValue;
-                let newEnd = dragStart.range[1] + deltaValue;
-
-                if (newStart < min) {
-                    newStart = min;
-                    newEnd = min + rangeWidth;
-                }
-                if (newEnd > max) {
-                    newEnd = max;
-                    newStart = max - rangeWidth;
-                }
-
-                newRange = [newStart, newEnd];
-            }
-
-            onChange(newRange, { source: 'user', nativeEvent: e });
-        };
-
-        const handleMouseUp = () => {
-            setIsDragging(null);
-            setDragStart(null);
-        };
-
-        document.addEventListener('mousemove', handleMouseMove);
-        document.addEventListener('mouseup', handleMouseUp);
-
-        return () => {
-            document.removeEventListener('mousemove', handleMouseMove);
-            document.removeEventListener('mouseup', handleMouseUp);
-        };
-    }, [isDragging, dragStart, min, max, onChange]);
-
-    const handleBarClick = (
-        bucket: HistogramBucket,
-        event: React.MouseEvent<HTMLButtonElement>,
-    ) => {
-        onChange([bucket.start, bucket.end], {
-            source: 'user',
-            nativeEvent: event.nativeEvent,
-        });
+      onChange(newRange, { source: 'user', nativeEvent: e });
     };
 
-    const handleClear = (event: React.MouseEvent<HTMLButtonElement>) => {
-        onChange(null, { source: 'user', nativeEvent: event.nativeEvent });
+    const handleMouseUp = () => {
+      setIsDragging(null);
+      setDragStart(null);
     };
 
-    const leftPos = getPositionFromValue(currentRange[0]);
-    const rightPos = getPositionFromValue(currentRange[1]);
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
 
-    const formatValue = (value: number) => {
-        if (Number.isInteger(value)) return value.toString();
-        return value.toFixed(1);
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
     };
-
-    return (
-        <div className='pv-range-histogram' ref={containerRef}>
-            <div className='pv-histogram-bars'>
-                {histogram.map((bucket, i) => {
-                    const heightPercent = (bucket.count / bucket.maxCount) * 100;
-                    const isInRange =
-                        bucket.start >= currentRange[0] && bucket.end <= currentRange[1];
-                    const isPartiallyInRange =
-                        bucket.end > currentRange[0] && bucket.start < currentRange[1];
-
-                    return (
-                        <button
-                            key={i}
-                            className={`pv-histogram-bar ${isInRange ? 'in-range' : ''} ${isPartiallyInRange && !isInRange ? 'partial' : ''}`}
-                            style={{ height: `${heightPercent}%` }}
-                            onClick={(event) => handleBarClick(bucket, event)}
-                            title={`${formatValue(bucket.start)} - ${formatValue(bucket.end)}: ${bucket.count} items`}
-                            type='button'
-                        />
-                    );
-                })}
-            </div>
-
-            <div className='pv-range-slider'>
-                <div className='pv-range-track' />
-                <div
-                    className='pv-range-selection'
-                    style={{
-                        left: `${leftPos}%`,
-                        width: `${rightPos - leftPos}%`,
-                    }}
-                    onMouseDown={(e) => handleMouseDown(e, 'range')}
-                />
-                <div
-                    className='pv-range-handle pv-range-handle-left'
-                    style={{ left: `${leftPos}%` }}
-                    onMouseDown={(e) => handleMouseDown(e, 'left')}
-                />
-                <div
-                    className='pv-range-handle pv-range-handle-right'
-                    style={{ left: `${rightPos}%` }}
-                    onMouseDown={(e) => handleMouseDown(e, 'right')}
-                />
-            </div>
-
-            <div className='pv-range-labels'>
-                <span className='pv-range-value'>{formatValue(currentRange[0])}</span>
-                <span className='pv-range-value'>{formatValue(currentRange[1])}</span>
-            </div>
-
-            {selectedRange && (
-                <button type='button' className='pv-range-clear' onClick={handleClear}>
-                    Clear Range
-                </button>
-            )}
-        </div>
-    );
+  }, [isDragging, dragStart, min, max, onChange]);
+
+  const handleBarClick = (bucket: HistogramBucket, event: React.MouseEvent<HTMLButtonElement>) => {
+    onChange([bucket.start, bucket.end], { source: 'user', nativeEvent: event.nativeEvent });
+  };
+
+  const handleClear = (event: React.MouseEvent<HTMLButtonElement>) => {
+    onChange(null, { source: 'user', nativeEvent: event.nativeEvent });
+  };
+
+  const leftPos = getPositionFromValue(currentRange[0]);
+  const rightPos = getPositionFromValue(currentRange[1]);
+
+  const formatValue = (value: number) => {
+    if (Number.isInteger(value)) return value.toString();
+    return value.toFixed(1);
+  };
+
+  return (
+    <div className="pv-range-histogram" ref={containerRef}>
+      <div className="pv-histogram-bars">
+        {histogram.map((bucket, i) => {
+          const heightPercent = (bucket.count / bucket.maxCount) * 100;
+          const isInRange =
+            bucket.start >= currentRange[0] && bucket.end <= currentRange[1];
+          const isPartiallyInRange =
+            bucket.end > currentRange[0] && bucket.start < currentRange[1];
+
+          return (
+            <button
+              key={i}
+              className={`pv-histogram-bar ${isInRange ? 'in-range' : ''} ${isPartiallyInRange && !isInRange ? 'partial' : ''}`}
+              style={{ height: `${heightPercent}%` }}
+              onClick={(event) => handleBarClick(bucket, event)}
+              title={`${formatValue(bucket.start)} - ${formatValue(bucket.end)}: ${bucket.count} items`}
+              type="button"
+            />
+          );
+        })}
+      </div>
+
+      <div className="pv-range-slider">
+        <div className="pv-range-track" />
+        <div
+          className="pv-range-selection"
+          style={{
+            left: `${leftPos}%`,
+            width: `${rightPos - leftPos}%`,
+          }}
+          onMouseDown={(e) => handleMouseDown(e, 'range')}
+        />
+        <div
+          className="pv-range-handle pv-range-handle-left"
+          style={{ left: `${leftPos}%` }}
+          onMouseDown={(e) => handleMouseDown(e, 'left')}
+        />
+        <div
+          className="pv-range-handle pv-range-handle-right"
+          style={{ left: `${rightPos}%` }}
+          onMouseDown={(e) => handleMouseDown(e, 'right')}
+        />
+      </div>
+
+      <div className="pv-range-labels">
+        <span className="pv-range-value">{formatValue(currentRange[0])}</span>
+        <span className="pv-range-value">{formatValue(currentRange[1])}</span>
+      </div>
+
+      {selectedRange && (
+        <button type="button" className="pv-range-clear" onClick={handleClear}>
+          Clear Range
+        </button>
+      )}
+    </div>
+  );
 }
diff --git a/Source/SchemaEditor/TypeCell.tsx b/Source/SchemaEditor/TypeCell.tsx
index 26f7a759..8d895d67 100644
--- a/Source/SchemaEditor/TypeCell.tsx
+++ b/Source/SchemaEditor/TypeCell.tsx
@@ -5,8 +5,8 @@ import { Button } from '../Common/Button';
 import { Dropdown } from '../Dropdown/Dropdown';
 import { Tooltip } from '../Common/Tooltip';
 import * as faIcons from 'react-icons/fa6';
-import { TypeFormat } from '../types/TypeFormat';
-import { JsonSchemaProperty } from '../types/JsonSchema';
+import type { TypeFormat } from '../types/TypeFormat';
+import type { JsonSchemaProperty } from '../types/JsonSchema';
 import type { SchemaEditorLabels } from './SchemaEditor';
 
 export interface TypeCellProps {
@@ -84,8 +84,7 @@ export const TypeCell = ({
             if (typeFormat) {
                 if (isArrayItem) {
                     onUpdateArrayItemType(propertyName, typeFormat.jsonType);
-                } else {
-                    if (typeFormat.format && typeFormat.format !== '') {
+                } else if (typeFormat.format && typeFormat.format !== '') {
                         onUpdateProperty(propertyName, 'type', typeFormat.jsonType, {
                             format: value,
                         });
@@ -94,14 +93,11 @@ export const TypeCell = ({
                             format: undefined,
                         });
                     }
-                }
-            } else {
-                if (isArrayItem) {
+            } else if (isArrayItem) {
                     onUpdateArrayItemType(propertyName, value);
                 } else {
                     onUpdateProperty(propertyName, 'type', value, { format: undefined });
                 }
-            }
         }
     };
 
@@ -157,10 +153,7 @@ export const TypeCell = ({
     }
 
     return (
-        <div
-            className='cratis:flex cratis:items-center cratis:gap-2 cratis:w-full'
-            style={{ minHeight: '2.5rem' }}
-        >
+        <div className='cratis:flex cratis:items-center cratis:gap-2 cratis:w-full' style={{ minHeight: '2.5rem' }}>
             <Dropdown<string>
                 aria-label={labels.propertyType}
                 value={currentValue}

From bd7dbae45eace909361c982fe7ff0857afef2e66 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 14:13:33 +0200
Subject: [PATCH 145/267] pi-agent: Complete recovered callbacks

---
 Source/CommandForm/fields/CalendarField.tsx   |  9 +++-----
 Source/CommandForm/fields/ChipsField.tsx      |  4 ----
 .../CommandForm/fields/RadioButtonField.tsx   |  4 ++--
 Source/CommandForm/fields/RadioGroupField.tsx |  4 ++--
 Source/CommandForm/fields/RatingField.tsx     |  7 ++----
 Source/DataTables/ColumnFilterMenu.tsx        |  4 ++--
 Source/types/ChangeHandler.ts                 | 12 +++++++++-
 Source/types/ChangeMeta.ts                    | 22 ++++++++++++++++---
 8 files changed, 41 insertions(+), 25 deletions(-)

diff --git a/Source/CommandForm/fields/CalendarField.tsx b/Source/CommandForm/fields/CalendarField.tsx
index 46fd2eec..7c7091a1 100644
--- a/Source/CommandForm/fields/CalendarField.tsx
+++ b/Source/CommandForm/fields/CalendarField.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 { asCommandFormField, WrappedFieldProps } from '@cratis/arc.react/commands';
+import { asCommandFormField, type WrappedFieldProps } from '@cratis/arc.react/commands';
 import {
     DatePickerInput,
     type DatePickerInputPassThrough,
@@ -82,7 +82,7 @@ export const CalendarField = asCommandFormField<CalendarFieldComponentProps>(
                     aria-label={accessibility.ariaLabel}
                     aria-describedby={accessibility.ariaDescribedBy}
                     value={props.value}
-                    onChange={props.onChange}
+                    onChange={(value) => props.onChange(value)}
                     onBlur={props.onBlur}
                     invalid={props.invalid}
                     placeholder={props.placeholder}
@@ -101,8 +101,5 @@ export const CalendarField = asCommandFormField<CalendarFieldComponentProps>(
             </>
         );
     },
-    {
-        defaultValue: null,
-        extractValue: (e: unknown) => (e instanceof Date ? e : null),
-    },
+    { defaultValue: null },
 );
diff --git a/Source/CommandForm/fields/ChipsField.tsx b/Source/CommandForm/fields/ChipsField.tsx
index d97ea8d0..7c4484e6 100644
--- a/Source/CommandForm/fields/ChipsField.tsx
+++ b/Source/CommandForm/fields/ChipsField.tsx
@@ -147,8 +147,4 @@ const ChipsControl = (props: ChipsFieldComponentProps) => {
 /** A token input bound to a string array property on an Arc command. */
 export const ChipsField = asCommandFormField<ChipsFieldComponentProps>(ChipsControl, {
     defaultValue: [],
-    extractValue: (value: unknown) =>
-        Array.isArray(value)
-            ? value.filter((item): item is string => typeof item === 'string')
-            : [],
 });
diff --git a/Source/CommandForm/fields/RadioButtonField.tsx b/Source/CommandForm/fields/RadioButtonField.tsx
index 8a201f9d..436614c3 100644
--- a/Source/CommandForm/fields/RadioButtonField.tsx
+++ b/Source/CommandForm/fields/RadioButtonField.tsx
@@ -66,7 +66,7 @@ export const RadioButtonField = asCommandFormField<RadioButtonFieldComponentProp
                 name={props.name}
                 checked={props.value === props.buttonValue}
                 onChange={(event) => {
-                    if (event.target.checked) props.onChange(props.buttonValue);
+                    if (event.currentTarget.checked) props.onChange(props.buttonValue);
                 }}
                 aria-invalid={props.invalid || undefined}
                 className={['cratis-choice-field__native', props.pt?.input?.className]
@@ -98,5 +98,5 @@ export const RadioButtonField = asCommandFormField<RadioButtonFieldComponentProp
             </>
         );
     },
-    { defaultValue: '', extractValue: (value: unknown) => value as string | number },
+    { defaultValue: '' },
 );
diff --git a/Source/CommandForm/fields/RadioGroupField.tsx b/Source/CommandForm/fields/RadioGroupField.tsx
index 300cd4b8..5adeb480 100644
--- a/Source/CommandForm/fields/RadioGroupField.tsx
+++ b/Source/CommandForm/fields/RadioGroupField.tsx
@@ -93,7 +93,7 @@ export const RadioGroupField = asCommandFormField<RadioGroupFieldComponentProps>
                                 name={name}
                                 checked={props.value === value}
                                 onChange={(event) => {
-                                    if (event.target.checked) props.onChange(value);
+                                    if (event.currentTarget.checked) props.onChange(value);
                                 }}
                                 aria-invalid={props.invalid || undefined}
                                 className={[
@@ -131,5 +131,5 @@ export const RadioGroupField = asCommandFormField<RadioGroupFieldComponentProps>
             </div>
         );
     },
-    { defaultValue: '', extractValue: (value: unknown) => value as string | number },
+    { defaultValue: '' },
 );
diff --git a/Source/CommandForm/fields/RatingField.tsx b/Source/CommandForm/fields/RatingField.tsx
index c0808031..fcd1afcb 100644
--- a/Source/CommandForm/fields/RatingField.tsx
+++ b/Source/CommandForm/fields/RatingField.tsx
@@ -92,7 +92,7 @@ export const RatingField = asCommandFormField<RatingFieldComponentProps>(
                                 name={name}
                                 checked={props.value === starValue}
                                 onChange={(event) => {
-                                    if (event.target.checked) props.onChange(starValue);
+                                    if (event.currentTarget.checked) props.onChange(starValue);
                                 }}
                                 aria-label={label}
                                 className={[
@@ -124,8 +124,5 @@ export const RatingField = asCommandFormField<RatingFieldComponentProps>(
             </div>
         );
     },
-    {
-        defaultValue: 0,
-        extractValue: (value: unknown) => (typeof value === 'number' ? value : 0),
-    },
+    { defaultValue: 0 },
 );
diff --git a/Source/DataTables/ColumnFilterMenu.tsx b/Source/DataTables/ColumnFilterMenu.tsx
index 4b19823a..4a10c864 100644
--- a/Source/DataTables/ColumnFilterMenu.tsx
+++ b/Source/DataTables/ColumnFilterMenu.tsx
@@ -99,10 +99,10 @@ export interface ColumnFilterElementOptions {
     value: unknown;
     /** Current draft match mode. */
     matchMode: FilterMatchMode;
-    /** Updates the draft value. */
+    /** Updates the draft value and may describe how the custom editor produced it. */
     onChange: ChangeHandler<unknown>;
     /** Updates the draft match mode independently of the value. */
-    onMatchModeChange: ChangeHandler<FilterMatchMode>;
+    onMatchModeChange: (matchMode: FilterMatchMode) => void;
     /** Applies the draft filter. */
     onApply: (event: SyntheticEvent) => void;
     /** Clears the field filter. */
diff --git a/Source/types/ChangeHandler.ts b/Source/types/ChangeHandler.ts
index 3f3f3b44..a744d93f 100644
--- a/Source/types/ChangeHandler.ts
+++ b/Source/types/ChangeHandler.ts
@@ -3,5 +3,15 @@
 
 import type { ChangeMeta } from './ChangeMeta';
 
-/** Handles a semantic value change and optional information about its origin. */
+/**
+ * Handles a Components-owned semantic value change.
+ *
+ * The first argument is always the component's next value, never a renderer-specific
+ * event wrapper. Origin metadata is optional so ordinary one-argument callbacks such as
+ * React state setters remain directly assignable.
+ *
+ * @typeParam T - The semantic value exposed by the component.
+ * @param value - The next semantic value.
+ * @param meta - Optional information about how the change originated.
+ */
 export type ChangeHandler<T> = (value: T, meta?: ChangeMeta) => void;
diff --git a/Source/types/ChangeMeta.ts b/Source/types/ChangeMeta.ts
index 219ad05f..cee18181 100644
--- a/Source/types/ChangeMeta.ts
+++ b/Source/types/ChangeMeta.ts
@@ -1,10 +1,26 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-/** Describes the origin of a Components-owned value change. */
+/**
+ * Describes the origin of a Components-owned value change.
+ *
+ * Components may omit this object when no trustworthy origin information is available.
+ * Consumers must therefore treat metadata as supplementary context rather than as the value
+ * transport itself.
+ */
 export interface ChangeMeta {
-    /** Identifies whether the value came from user interaction, programmatic work, or a reset. */
+    /**
+     * Identifies the change origin.
+     *
+     * `user` denotes an interaction, `programmatic` denotes an imperative component action,
+     * and `reset` denotes restoration of an earlier or default value.
+     */
     readonly source: 'user' | 'programmatic' | 'reset';
-    /** Native browser event that caused the change, when the component boundary exposes one safely. */
+    /**
+     * Native browser event that caused the change, when one exists at the public boundary.
+     *
+     * This is always a DOM {@link Event}; React synthetic events and renderer-specific event
+     * objects are never exposed through this property.
+     */
     readonly nativeEvent?: Event;
 }

From 3a35dd061918a78716cfa1fe5c13cb70d7008d47 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 14:45:00 +0200
Subject: [PATCH 146/267] pi-agent: Finalize callback recovery

---
 Source/CommandForm/fields/DropdownField.tsx   |   2 +-
 .../CommandForm/fields/MultiSelectField.tsx   |   2 +-
 Source/CommandForm/fields/NumberField.tsx     |   8 +-
 .../CommandForm/fields/fieldValueFromEvent.ts |  13 +-
 .../when_fields_report_semantic_values.tsx    | 223 ++++++++++++++++++
 .../when_bounding_the_today_action.tsx        |  40 +++-
 Source/DataTables/ColumnFilterMenu.tsx        |  10 +-
 ...when_rendering_a_custom_filter_element.tsx |  24 +-
 .../when_emitting_semantic_changes.tsx        | 135 +++++++++++
 ...dering_a_filterable_multiple_selection.tsx |   4 +-
 Source/Filter/RangeHistogramFilter.tsx        |  32 ++-
 .../when_using_keyboard.tsx                   |  34 ++-
 .../when_editing_values.tsx                   | 132 +++++++++++
 .../components/RangeHistogramFilter.tsx       |  10 +-
 .../components/pivot/colorResolver.ts         |   8 +-
 Source/SchemaEditor/SchemaEditor.tsx          |   7 +-
 Source/SchemaEditor/TypeCell.tsx              |  12 +-
 .../when_cancelling_edit_mode.tsx             |  89 +++++++
 ...a_required_property_in_a_nested_object.tsx |  10 +-
 19 files changed, 754 insertions(+), 41 deletions(-)
 create mode 100644 Source/CommandForm/for_field_value_extraction/when_fields_report_semantic_values.tsx
 create mode 100644 Source/Dropdown/for_Dropdown/when_emitting_semantic_changes.tsx
 create mode 100644 Source/ObjectContentEditor/for_ObjectContentEditor/when_editing_values.tsx
 create mode 100644 Source/SchemaEditor/for_SchemaEditor/when_cancelling_edit_mode.tsx

diff --git a/Source/CommandForm/fields/DropdownField.tsx b/Source/CommandForm/fields/DropdownField.tsx
index 5ca5be9a..35921080 100644
--- a/Source/CommandForm/fields/DropdownField.tsx
+++ b/Source/CommandForm/fields/DropdownField.tsx
@@ -3,7 +3,7 @@
 
 import { Dropdown, type DropdownProps } from '../../Dropdown/Dropdown';
 import React from 'react';
-import { asCommandFormField, WrappedFieldProps } from '@cratis/arc.react/commands';
+import { asCommandFormField, type WrappedFieldProps } from '@cratis/arc.react/commands';
 import {
     useFieldAccessibility,
     type FieldAccessibilityProps,
diff --git a/Source/CommandForm/fields/MultiSelectField.tsx b/Source/CommandForm/fields/MultiSelectField.tsx
index aa831af9..6951197f 100644
--- a/Source/CommandForm/fields/MultiSelectField.tsx
+++ b/Source/CommandForm/fields/MultiSelectField.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 { asCommandFormField, WrappedFieldProps } from '@cratis/arc.react/commands';
+import { asCommandFormField, type WrappedFieldProps } from '@cratis/arc.react/commands';
 import { Dropdown, type DropdownProps } from '../../Dropdown/Dropdown';
 import React from 'react';
 import {
diff --git a/Source/CommandForm/fields/NumberField.tsx b/Source/CommandForm/fields/NumberField.tsx
index 29810d09..295ec36d 100644
--- a/Source/CommandForm/fields/NumberField.tsx
+++ b/Source/CommandForm/fields/NumberField.tsx
@@ -63,7 +63,13 @@ export const NumberField = asCommandFormField<NumberFieldComponentProps>(
                 aria-describedby={accessibility.ariaDescribedBy}
                 type='number'
                 value={props.value}
-                onChange={(event) => props.onChange(Number.isNaN(event.currentTarget.valueAsNumber) ? 0 : event.currentTarget.valueAsNumber)}
+                onChange={(event) =>
+                    props.onChange(
+                        Number.isNaN(event.currentTarget.valueAsNumber)
+                            ? 0
+                            : event.currentTarget.valueAsNumber,
+                    )
+                }
                 placeholder={props.placeholder}
                 min={props.min}
                 max={props.max}
diff --git a/Source/CommandForm/fields/fieldValueFromEvent.ts b/Source/CommandForm/fields/fieldValueFromEvent.ts
index 9f569dd6..addb6aa8 100644
--- a/Source/CommandForm/fields/fieldValueFromEvent.ts
+++ b/Source/CommandForm/fields/fieldValueFromEvent.ts
@@ -15,11 +15,14 @@ const eventTargetOf = (event: unknown): Record<string, unknown> => {
 /**
  * Extracts a primitive value from a native form field's change event target.
  *
- * Retained as an internal safety helper for custom or legacy Arc field adapters whose
- * `CommandFormFieldConfig.extractValue` still receives `unknown`. Components-owned fields
- * now extract semantic values at their DOM or React Aria boundaries before invoking Arc,
- * so no production field relies on event-shaped values. The overloads remain available to
- * relative-imported adapters and keep runtime narrowing explicit.
+ * `CommandFormFieldConfig.extractValue` is declared `(event: unknown) => TValue` so every
+ * field type shares one contract regardless of its underlying control. Under strict
+ * TypeScript a field can no longer declare its `extractValue` against a concrete
+ * `React.ChangeEvent<...>` — the narrower parameter type fails contravariant function
+ * assignability against `(event: unknown) => TValue`. This helper keeps field components
+ * strictly typed by doing the one runtime-checked narrowing every field needs, with an
+ * overload per property so callers still get a precise return type.
+ * Internal to the command-field implementation.
  */
 export function fieldValueFromEvent(event: unknown, property: 'checked'): boolean;
 export function fieldValueFromEvent(event: unknown, property: 'value'): string;
diff --git a/Source/CommandForm/for_field_value_extraction/when_fields_report_semantic_values.tsx b/Source/CommandForm/for_field_value_extraction/when_fields_report_semantic_values.tsx
new file mode 100644
index 00000000..f40c443b
--- /dev/null
+++ b/Source/CommandForm/for_field_value_extraction/when_fields_report_semantic_values.tsx
@@ -0,0 +1,223 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { act, type ComponentType } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { expect } from 'chai';
+import { afterEach, beforeEach, describe, it, vi } from 'vitest';
+
+vi.mock('@cratis/arc.react/commands', () => ({
+    asCommandFormField: (component: ComponentType<Record<string, unknown>>) => component,
+}));
+
+vi.mock('../../Dropdown/Dropdown', async () => {
+    const React = await import('react');
+    return {
+        Dropdown: (props: {
+            multiple?: boolean;
+            onChange: (value: string | Array<string>) => void;
+        }) =>
+            React.createElement(
+                'button',
+                {
+                    type: 'button',
+                    'data-testid': props.multiple ? 'multi-dropdown' : 'dropdown',
+                    onClick: () => props.onChange(props.multiple ? ['two'] : 'two'),
+                },
+                'Change selection',
+            ),
+    };
+});
+
+vi.mock('../../Common/DatePickerInput', async () => {
+    const React = await import('react');
+    return {
+        DatePickerInput: (props: { onChange: (value: Date | null) => void }) =>
+            React.createElement(
+                'button',
+                {
+                    type: 'button',
+                    'data-testid': 'calendar',
+                    onClick: () => props.onChange(new Date(2026, 7, 27)),
+                },
+                'Change date',
+            ),
+    };
+});
+
+import { CalendarField } from '../fields/CalendarField';
+import { CheckboxField } from '../fields/CheckboxField';
+import { ChipsField } from '../fields/ChipsField';
+import { ColorPickerField } from '../fields/ColorPickerField';
+import { DropdownField } from '../fields/DropdownField';
+import { InputTextField } from '../fields/InputTextField';
+import { MultiSelectField } from '../fields/MultiSelectField';
+import { NumberField } from '../fields/NumberField';
+import { PasswordField } from '../fields/PasswordField';
+import { RadioButtonField } from '../fields/RadioButtonField';
+import { RadioGroupField } from '../fields/RadioGroupField';
+import { RatingField } from '../fields/RatingField';
+import { SliderField } from '../fields/SliderField';
+import { TextAreaField } from '../fields/TextAreaField';
+import { ToggleSwitchField } from '../fields/ToggleSwitchField';
+
+const asDirectComponent = (component: unknown) =>
+    component as ComponentType<Record<string, unknown>>;
+
+const baseProps = {
+    invalid: false,
+    required: false,
+    errors: [],
+};
+
+describe('when CommandForm fields report semantic values', () => {
+    let container: HTMLDivElement;
+    let root: Root;
+    const onChange = vi.fn();
+
+    beforeEach(() => {
+        (
+            globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
+        ).IS_REACT_ACT_ENVIRONMENT = true;
+        container = document.createElement('div');
+        document.body.append(container);
+        root = createRoot(container);
+        onChange.mockClear();
+    });
+
+    afterEach(async () => {
+        await act(async () => root.unmount());
+        container.remove();
+    });
+
+    const renderField = async (
+        component: unknown,
+        props: Record<string, unknown>,
+    ) => {
+        const Field = asDirectComponent(component);
+        await act(async () => {
+            root.render(<Field {...baseProps} {...props} onChange={onChange} />);
+        });
+    };
+
+    const setValue = async (
+        element: HTMLInputElement | HTMLTextAreaElement,
+        value: string,
+    ) => {
+        await act(async () => {
+            const prototype = element instanceof HTMLTextAreaElement
+                ? HTMLTextAreaElement.prototype
+                : HTMLInputElement.prototype;
+            Object.getOwnPropertyDescriptor(prototype, 'value')!.set!.call(element, value);
+            element.dispatchEvent(new Event('input', { bubbles: true }));
+        });
+    };
+
+    it('should extract text, password, and textarea strings', async () => {
+        for (const [component, selector] of [
+            [InputTextField, 'input'],
+            [PasswordField, 'input'],
+            [TextAreaField, 'textarea'],
+        ] as const) {
+            await renderField(component, { value: '' });
+            const input = container.querySelector<HTMLInputElement | HTMLTextAreaElement>(selector);
+            if (!input) throw new Error(`Field did not render ${selector}.`);
+            await setValue(input, 'semantic');
+            expect(onChange.mock.lastCall?.[0]).to.equal('semantic');
+        }
+    });
+
+    it('should extract checkbox and switch booleans', async () => {
+        for (const component of [CheckboxField, ToggleSwitchField]) {
+            await renderField(component, { value: false });
+            const input = container.querySelector<HTMLInputElement>('input[type="checkbox"]');
+            if (!input) throw new Error('Boolean field did not render a checkbox.');
+            await act(async () => input.click());
+            expect(onChange.mock.lastCall?.[0]).to.equal(true);
+        }
+    });
+
+    it('should extract color, number, and range primitives', async () => {
+        await renderField(ColorPickerField, { value: '000000' });
+        const color = container.querySelector<HTMLInputElement>('input[type="color"]')!;
+        await setValue(color, '#aabbcc');
+        expect(onChange.mock.lastCall?.[0]).to.equal('aabbcc');
+
+        await renderField(NumberField, { value: 0 });
+        const number = container.querySelector<HTMLInputElement>('input[type="number"]')!;
+        await setValue(number, '42');
+        expect(onChange.mock.lastCall?.[0]).to.equal(42);
+
+        await renderField(SliderField, { value: 0 });
+        const range = container.querySelector<HTMLInputElement>('input[type="range"]')!;
+        await setValue(range, '25');
+        expect(onChange.mock.lastCall?.[0]).to.equal(25);
+    });
+
+    it('should guard radio callbacks until an option becomes checked', async () => {
+        await renderField(RadioButtonField, {
+            value: 'one',
+            buttonValue: 'two',
+            label: 'Two',
+        });
+        const radio = container.querySelector<HTMLInputElement>('input[type="radio"]')!;
+        await act(async () => radio.click());
+        expect(onChange.mock.lastCall?.[0]).to.equal('two');
+
+        await renderField(RadioGroupField, {
+            value: 'one',
+            options: [{ id: 'two', label: 'Two' }],
+            optionValue: 'id',
+            optionLabel: 'label',
+        });
+        await act(async () => container.querySelector<HTMLInputElement>('input')!.click());
+        expect(onChange.mock.lastCall?.[0]).to.equal('two');
+
+        await renderField(RatingField, { value: 0, stars: 2 });
+        const stars = container.querySelectorAll<HTMLInputElement>('input[type="radio"]');
+        await act(async () => stars[1].click());
+        expect(onChange.mock.lastCall?.[0]).to.equal(2);
+    });
+
+    it('should report Chips arrays without event-shaped values', async () => {
+        await renderField(ChipsField, { value: ['one'] });
+        const input = container.querySelector<HTMLInputElement>('[data-cratis-part="input"]')!;
+        await setValue(input, 'two');
+        await act(async () => {
+            input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+        });
+        expect(onChange.mock.lastCall?.[0]).to.deep.equal(['one', 'two']);
+    });
+
+    it('should pass semantic Dropdown, multi-select, and calendar values through Arc', async () => {
+        await renderField(DropdownField, {
+            value: 'one',
+            options: [],
+            optionValue: 'value',
+            optionLabel: 'label',
+        });
+        await act(async () =>
+            container.querySelector<HTMLButtonElement>('[data-testid="dropdown"]')!.click(),
+        );
+        expect(onChange.mock.lastCall?.[0]).to.equal('two');
+
+        await renderField(MultiSelectField, {
+            value: ['one'],
+            options: [],
+            optionValue: 'value',
+            optionLabel: 'label',
+        });
+        await act(async () =>
+            container.querySelector<HTMLButtonElement>('[data-testid="multi-dropdown"]')!.click(),
+        );
+        expect(onChange.mock.lastCall?.[0]).to.deep.equal(['two']);
+
+        await renderField(CalendarField, { value: null });
+        await act(async () =>
+            container.querySelector<HTMLButtonElement>('[data-testid="calendar"]')!.click(),
+        );
+        expect(onChange.mock.lastCall?.[0]).to.deep.equal(new Date(2026, 7, 27));
+    });
+});
diff --git a/Source/Common/for_DatePickerInput/when_bounding_the_today_action.tsx b/Source/Common/for_DatePickerInput/when_bounding_the_today_action.tsx
index d3fb1ac6..407bca72 100644
--- a/Source/Common/for_DatePickerInput/when_bounding_the_today_action.tsx
+++ b/Source/Common/for_DatePickerInput/when_bounding_the_today_action.tsx
@@ -9,6 +9,7 @@ import { createRoot, type Root } from 'react-dom/client';
 import { afterEach, describe, it, vi } from 'vitest';
 import { CratisComponentsProvider } from '../CratisComponentsProvider';
 import { DatePickerInput } from '../DatePickerInput';
+import type { ChangeHandler } from '../../types/ChangeHandler';
 
 /**
  * The custom Today action used to call `onChange` with today's date unconditionally,
@@ -32,10 +33,11 @@ describe('when bounding the Today action by minDate/maxDate', () => {
     const tomorrow = addDays(today, 1);
 
     const mount = async (options: {
+        value?: Date | null;
         minDate?: Date;
         maxDate?: Date;
         showTime?: boolean;
-        onChange: (value: Date | null) => void;
+        onChange: ChangeHandler<Date | null>;
     }) => {
         // SAFETY: React's test-environment flag is an intentionally undocumented global absent from DOM typings.
         (
@@ -49,7 +51,7 @@ describe('when bounding the Today action by minDate/maxDate', () => {
             root.render(
                 <CratisComponentsProvider>
                     <DatePickerInput
-                        value={null}
+                        value={options.value ?? null}
                         onChange={options.onChange}
                         aria-label='Appointment date'
                         showButtonBar
@@ -135,6 +137,40 @@ describe('when bounding the Today action by minDate/maxDate', () => {
         expect(onChange.mock.calls.length).to.equal(1);
         const emitted = onChange.mock.calls[0][0] as Date;
         expect(startOfDay(emitted).getTime()).to.equal(today.getTime());
+        expect(onChange.mock.calls[0][1]).to.include({ source: 'user' });
+        expect(onChange.mock.calls[0][1].nativeEvent).to.be.instanceOf(Event);
+    });
+
+    it('should emit null and native user metadata from the Clear action', async () => {
+        const onChange = vi.fn();
+        await mount({ value: today, onChange });
+        const clearButton = document.querySelector<HTMLButtonElement>(
+            '[data-cratis-part="clear"]',
+        );
+        if (!clearButton) throw new Error('DatePickerInput did not render the Clear action.');
+        await act(async () => clearButton.click());
+        expect(onChange.mock.calls).to.have.lengthOf(1);
+        expect(onChange.mock.calls[0][0]).to.equal(null);
+        expect(onChange.mock.calls[0][1]).to.include({ source: 'user' });
+        expect(onChange.mock.calls[0][1].nativeEvent).to.be.instanceOf(Event);
+    });
+
+    it('should not emit when the controlled value changes programmatically', async () => {
+        const onChange = vi.fn();
+        await mount({ value: today, onChange });
+        await act(async () => {
+            root.render(
+                <CratisComponentsProvider>
+                    <DatePickerInput
+                        value={tomorrow}
+                        onChange={onChange}
+                        aria-label='Appointment date'
+                        showButtonBar
+                    />
+                </CratisComponentsProvider>,
+            );
+        });
+        expect(onChange.mock.calls).to.have.lengthOf(0);
     });
 
     it('should keep the Today action enabled with no minDate/maxDate configured', async () => {
diff --git a/Source/DataTables/ColumnFilterMenu.tsx b/Source/DataTables/ColumnFilterMenu.tsx
index 4a10c864..766d83cd 100644
--- a/Source/DataTables/ColumnFilterMenu.tsx
+++ b/Source/DataTables/ColumnFilterMenu.tsx
@@ -255,8 +255,8 @@ export const ColumnFilterMenu = ({
               field,
               value: draftValue,
               matchMode: draftMode,
-              onChange: setDraftValue,
-              onMatchModeChange: setDraftMode,
+              onChange: (value) => setDraftValue(() => value),
+              onMatchModeChange: (matchMode) => setDraftMode(matchMode),
               onApply: apply,
               onClear: clear,
           })
@@ -287,7 +287,7 @@ export const ColumnFilterMenu = ({
                       return (
                           <DatePickerInput
                               value={draftValue instanceof Date ? draftValue : null}
-                              onChange={setDraftValue}
+                              onChange={(value) => setDraftValue(value)}
                               showIcon
                               aria-label={resolvedLabels.valueAriaLabel(field)}
                               className={pt?.input?.className}
@@ -304,7 +304,7 @@ export const ColumnFilterMenu = ({
                               ]}
                               placeholder={placeholder}
                               showClear
-                              onChange={setDraftValue}
+                              onChange={(value) => setDraftValue(value)}
                               aria-label={resolvedLabels.valueAriaLabel(field)}
                               className={pt?.input?.className}
                               style={pt?.input?.style}
@@ -367,7 +367,7 @@ export const ColumnFilterMenu = ({
                             options={modeOptions}
                             optionLabel='label'
                             optionValue='value'
-                            onChange={setDraftMode}
+                            onChange={(value) => setDraftMode(value)}
                             aria-label={resolvedLabels.matchModeAriaLabel}
                             pt={pt?.matchMode}
                         />
diff --git a/Source/DataTables/for_ColumnFilterMenu/when_rendering_a_custom_filter_element.tsx b/Source/DataTables/for_ColumnFilterMenu/when_rendering_a_custom_filter_element.tsx
index dbd207bb..59df22c0 100644
--- a/Source/DataTables/for_ColumnFilterMenu/when_rendering_a_custom_filter_element.tsx
+++ b/Source/DataTables/for_ColumnFilterMenu/when_rendering_a_custom_filter_element.tsx
@@ -76,7 +76,7 @@ describe('when rendering a custom filter element', () => {
         expect(latestOptions.matchMode).to.equal('equals');
     });
 
-    it('should update and apply the custom draft', async () => {
+    it('should update and apply the custom draft with one-argument compatibility', async () => {
         await act(async () => latestOptions.onChange('advisor'));
         const apply = menu.querySelector<HTMLButtonElement>('[data-custom-filter-apply]');
         if (!apply) {
@@ -90,4 +90,26 @@ describe('when rendering a custom filter element', () => {
             matchMode: 'equals',
         });
     });
+
+    it('should update the match mode only through its dedicated callback', async () => {
+        await act(async () => {
+            latestOptions.onChange('advisor', { source: 'user' });
+            latestOptions.onMatchModeChange('contains');
+        });
+        const apply = menu.querySelector<HTMLButtonElement>('[data-custom-filter-apply]');
+        if (!apply) throw new Error('Custom filter did not render its apply action.');
+        await act(async () => apply.click());
+
+        expect(onFilter.mock.calls[0][0].roleCode).to.deep.equal({
+            value: 'advisor',
+            matchMode: 'contains',
+        });
+    });
+
+    it('should store function values without invoking React updater semantics', async () => {
+        const functionValue = vi.fn(() => 'computed');
+        await act(async () => latestOptions.onChange(functionValue));
+        expect(functionValue).not.toHaveBeenCalled();
+        expect(latestOptions.value).to.equal(functionValue);
+    });
 });
diff --git a/Source/Dropdown/for_Dropdown/when_emitting_semantic_changes.tsx b/Source/Dropdown/for_Dropdown/when_emitting_semantic_changes.tsx
new file mode 100644
index 00000000..56f476ce
--- /dev/null
+++ b/Source/Dropdown/for_Dropdown/when_emitting_semantic_changes.tsx
@@ -0,0 +1,135 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { expect } from 'chai';
+import { act, useState } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, it, vi } from 'vitest';
+import { CratisComponentsProvider } from '../../Common/CratisComponentsProvider';
+import { Dropdown } from '../Dropdown';
+
+const options = [
+    { label: 'One', value: 'one' },
+    { label: 'Two', value: 'two' },
+];
+
+const OneArgumentHarness = () => {
+    const [value, setValue] = useState<Array<string>>(['one']);
+    return (
+        <Dropdown<Array<string>>
+            multiple
+            value={value}
+            options={options}
+            optionLabel='label'
+            optionValue='value'
+            onChange={setValue}
+        />
+    );
+};
+
+describe('when emitting semantic Dropdown changes', () => {
+    let container: HTMLDivElement;
+    let root: Root;
+
+    beforeEach(() => {
+        (
+            globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
+        ).IS_REACT_ACT_ENVIRONMENT = true;
+        container = document.createElement('div');
+        document.body.append(container);
+        root = createRoot(container);
+    });
+
+    afterEach(async () => {
+        await act(async () => root.unmount());
+        container.remove();
+    });
+
+    it('should emit selected values and a native Event from the native multiple control', async () => {
+        const onChange = vi.fn();
+        await act(async () => {
+            root.render(
+                <CratisComponentsProvider>
+                    <Dropdown<Array<string>>
+                        multiple
+                        value={['one']}
+                        options={options}
+                        optionLabel='label'
+                        optionValue='value'
+                        onChange={onChange}
+                    />
+                </CratisComponentsProvider>,
+            );
+        });
+
+        const select = container.querySelector<HTMLSelectElement>(
+            '[data-cratis-part="multiple"]',
+        );
+        if (!select) throw new Error('Dropdown did not render a native multiple control.');
+        select.options[0].selected = false;
+        select.options[1].selected = true;
+        await act(async () => {
+            select.dispatchEvent(new Event('change', { bubbles: true }));
+        });
+
+        expect(onChange.mock.calls).to.have.lengthOf(1);
+        expect(onChange.mock.calls[0][0]).to.deep.equal(['two']);
+        expect(onChange.mock.calls[0][1]).to.include({ source: 'user' });
+        const nativeEvent = onChange.mock.calls[0][1].nativeEvent;
+        expect(nativeEvent).to.be.instanceOf(Event);
+        expect(Object.hasOwn(nativeEvent, 'nativeEvent')).to.equal(false);
+    });
+
+    it('should remain compatible with a one-argument React state setter', async () => {
+        await act(async () => {
+            root.render(
+                <CratisComponentsProvider>
+                    <OneArgumentHarness />
+                </CratisComponentsProvider>,
+            );
+        });
+        const select = container.querySelector<HTMLSelectElement>(
+            '[data-cratis-part="multiple"]',
+        );
+        if (!select) throw new Error('Dropdown did not render a native multiple control.');
+        select.options[0].selected = false;
+        select.options[1].selected = true;
+        await act(async () => {
+            select.dispatchEvent(new Event('change', { bubbles: true }));
+        });
+        expect(select.selectedOptions[0]?.textContent).to.equal('Two');
+    });
+
+    it('should not emit when controlled values or options change programmatically', async () => {
+        const onChange = vi.fn();
+        await act(async () => {
+            root.render(
+                <CratisComponentsProvider>
+                    <Dropdown<string>
+                        value='one'
+                        options={options}
+                        optionLabel='label'
+                        optionValue='value'
+                        onChange={onChange}
+                    />
+                </CratisComponentsProvider>,
+            );
+        });
+        await act(async () => {
+            root.render(
+                <CratisComponentsProvider>
+                    <Dropdown<string>
+                        value='two'
+                        options={[options[1]]}
+                        optionLabel='label'
+                        optionValue='value'
+                        onChange={onChange}
+                    />
+                </CratisComponentsProvider>,
+            );
+        });
+        expect(onChange.mock.calls).to.have.lengthOf(0);
+    });
+});
diff --git a/Source/Dropdown/for_Dropdown/when_rendering_a_filterable_multiple_selection.tsx b/Source/Dropdown/for_Dropdown/when_rendering_a_filterable_multiple_selection.tsx
index c109489f..fb7bac47 100644
--- a/Source/Dropdown/for_Dropdown/when_rendering_a_filterable_multiple_selection.tsx
+++ b/Source/Dropdown/for_Dropdown/when_rendering_a_filterable_multiple_selection.tsx
@@ -107,6 +107,8 @@ describe('when rendering a filterable multiple selection', () => {
                 ?.click();
         });
         expect(onChange.mock.calls).to.have.lengthOf(1);
-        expect(onChange.mock.calls[0][0].value).to.deep.equal([]);
+        expect(onChange.mock.calls[0][0]).to.deep.equal([]);
+        expect(onChange.mock.calls[0][1]).to.include({ source: 'user' });
+        expect(onChange.mock.calls[0][1].nativeEvent).to.be.instanceOf(Event);
     });
 });
diff --git a/Source/Filter/RangeHistogramFilter.tsx b/Source/Filter/RangeHistogramFilter.tsx
index 95328f39..bc7cf3e4 100644
--- a/Source/Filter/RangeHistogramFilter.tsx
+++ b/Source/Filter/RangeHistogramFilter.tsx
@@ -191,8 +191,14 @@ export function RangeHistogramFilter({
         };
     }, [isDragging, dragStart, min, max, onChange]);
 
-    const handleBarClick = (bucket: RenderedHistogramBucket, event: React.MouseEvent<HTMLButtonElement>) => {
-        onChange([bucket.start, bucket.end], { source: 'user', nativeEvent: event.nativeEvent });
+    const handleBarClick = (
+        bucket: RenderedHistogramBucket,
+        event: React.MouseEvent<HTMLButtonElement>,
+    ) => {
+        onChange([bucket.start, bucket.end], {
+            source: 'user',
+            nativeEvent: event.nativeEvent,
+        });
     };
 
     const rangeSpan = max - min;
@@ -220,15 +226,21 @@ export function RangeHistogramFilter({
         event.preventDefault();
         const rounded = Number(next.toFixed(10));
         if (handle === 'left') {
-            onChange([
-                Math.max(min, Math.min(rounded, currentRange[1] - minimumGap)),
-                currentRange[1],
-            ], { source: 'user', nativeEvent: event.nativeEvent });
+            onChange(
+                [
+                    Math.max(min, Math.min(rounded, currentRange[1] - minimumGap)),
+                    currentRange[1],
+                ],
+                { source: 'user', nativeEvent: event.nativeEvent },
+            );
         } else {
-            onChange([
-                currentRange[0],
-                Math.min(max, Math.max(rounded, currentRange[0] + minimumGap)),
-            ], { source: 'user', nativeEvent: event.nativeEvent });
+            onChange(
+                [
+                    currentRange[0],
+                    Math.min(max, Math.max(rounded, currentRange[0] + minimumGap)),
+                ],
+                { source: 'user', nativeEvent: event.nativeEvent },
+            );
         }
     };
 
diff --git a/Source/Filter/for_RangeHistogramFilter/when_using_keyboard.tsx b/Source/Filter/for_RangeHistogramFilter/when_using_keyboard.tsx
index fbc16714..5dc26f60 100644
--- a/Source/Filter/for_RangeHistogramFilter/when_using_keyboard.tsx
+++ b/Source/Filter/for_RangeHistogramFilter/when_using_keyboard.tsx
@@ -6,7 +6,7 @@
 import { act, useState } from 'react';
 import { createRoot, type Root } from 'react-dom/client';
 import { expect } from 'chai';
-import { afterEach, beforeEach, describe, it } from 'vitest';
+import { afterEach, beforeEach, describe, it, vi } from 'vitest';
 import { RangeHistogramFilter } from '../RangeHistogramFilter';
 
 const Harness = () => {
@@ -68,4 +68,36 @@ describe('when using the range histogram with a keyboard', () => {
         expect(values).to.deep.equal(['30', '80']);
         expect(minimum.getAttribute('aria-valuenow')).to.equal('30');
     });
+
+    it('should expose native user metadata at the filter boundary', async () => {
+        const onChange = vi.fn();
+        await act(async () => {
+            root.render(
+                <RangeHistogramFilter
+                    values={[10, 20, 30, 40, 50, 60, 70, 80, 90]}
+                    min={0}
+                    max={100}
+                    buckets={10}
+                    selectedRange={[20, 80]}
+                    onChange={onChange}
+                    minimumAriaLabel='Minimum order value'
+                    maximumAriaLabel='Maximum order value'
+                />,
+            );
+        });
+        const minimum = container.querySelector<HTMLElement>(
+            '[role="slider"][aria-label="Minimum order value"]',
+        );
+        if (!minimum) throw new Error('RangeHistogramFilter did not render its minimum handle.');
+        await act(async () => {
+            minimum.dispatchEvent(
+                new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }),
+            );
+        });
+
+        expect(onChange.mock.calls).to.have.lengthOf(1);
+        expect(onChange.mock.calls[0][0]).to.deep.equal([30, 80]);
+        expect(onChange.mock.calls[0][1]).to.include({ source: 'user' });
+        expect(onChange.mock.calls[0][1].nativeEvent).to.be.instanceOf(KeyboardEvent);
+    });
 });
diff --git a/Source/ObjectContentEditor/for_ObjectContentEditor/when_editing_values.tsx b/Source/ObjectContentEditor/for_ObjectContentEditor/when_editing_values.tsx
new file mode 100644
index 00000000..c2d4b903
--- /dev/null
+++ b/Source/ObjectContentEditor/for_ObjectContentEditor/when_editing_values.tsx
@@ -0,0 +1,132 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { expect } from 'chai';
+import { afterEach, beforeEach, describe, it, vi } from 'vitest';
+import { ObjectContentEditor } from '../ObjectContentEditor';
+import type { Json } from '../../types/JsonSchema';
+
+const longText = 'A long description whose length deliberately exceeds fifty characters.';
+const object: Json = {
+    enabled: false,
+    quantity: 2,
+    name: 'Original',
+    description: longText,
+    dueDate: '2026-08-27',
+};
+
+const schema = {
+    type: 'object' as const,
+    properties: {
+        enabled: { type: 'boolean' as const },
+        quantity: { type: 'number' as const },
+        name: { type: 'string' as const },
+        description: { type: 'string' as const },
+        dueDate: { type: 'string' as const, format: 'date' },
+    },
+};
+
+describe('when editing ObjectContentEditor values', () => {
+    let container: HTMLDivElement;
+    let root: Root;
+    const onChange = vi.fn();
+
+    beforeEach(async () => {
+        (
+            globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
+        ).IS_REACT_ACT_ENVIRONMENT = true;
+        container = document.createElement('div');
+        document.body.append(container);
+        root = createRoot(container);
+        onChange.mockClear();
+        await act(async () => {
+            root.render(
+                <ObjectContentEditor
+                    object={object}
+                    schema={schema}
+                    editMode
+                    onChange={onChange}
+                />,
+            );
+        });
+    });
+
+    afterEach(async () => {
+        await act(async () => root.unmount());
+        container.remove();
+    });
+
+    const setInputValue = async (element: HTMLInputElement | HTMLTextAreaElement, value: string) => {
+        await act(async () => {
+            const prototype = element instanceof HTMLTextAreaElement
+                ? HTMLTextAreaElement.prototype
+                : HTMLInputElement.prototype;
+            const setValue = Object.getOwnPropertyDescriptor(prototype, 'value')!.set!;
+            setValue.call(element, value);
+            element.dispatchEvent(new Event('input', { bubbles: true }));
+        });
+    };
+
+    const expectUserChange = (property: string, value: unknown) => {
+        expect(onChange.mock.calls).to.have.lengthOf(1);
+        expect(onChange.mock.calls[0][0]).to.deep.equal({ ...object, [property]: value });
+        expect(onChange.mock.calls[0][1]).to.include({ source: 'user' });
+        expect(onChange.mock.calls[0][1].nativeEvent).to.be.instanceOf(Event);
+    };
+
+    it('should emit a boolean value rather than a React event wrapper', async () => {
+        const checkbox = container.querySelector<HTMLInputElement>('input[aria-label="enabled"]');
+        if (!checkbox) throw new Error('Boolean editor was not rendered.');
+        await act(async () => checkbox.click());
+        expectUserChange('enabled', true);
+    });
+
+    it('should emit a numeric value rather than input text', async () => {
+        const input = container.querySelector<HTMLInputElement>('input[aria-label="quantity"]');
+        if (!input) throw new Error('Number editor was not rendered.');
+        await setInputValue(input, '42');
+        expectUserChange('quantity', 42);
+    });
+
+    it('should emit short text with native metadata', async () => {
+        const input = container.querySelector<HTMLInputElement>('input[aria-label="name"]');
+        if (!input) throw new Error('Text editor was not rendered.');
+        await setInputValue(input, 'Updated');
+        expectUserChange('name', 'Updated');
+    });
+
+    it('should emit long text with native metadata', async () => {
+        const textarea = container.querySelector<HTMLTextAreaElement>(
+            'textarea[aria-label="description"]',
+        );
+        if (!textarea) throw new Error('Long-text editor was not rendered.');
+        await setInputValue(textarea, 'Updated long description');
+        expectUserChange('description', 'Updated long description');
+    });
+
+    it('should preserve DatePicker semantic values and metadata', async () => {
+        const trigger = container.querySelector<HTMLButtonElement>(
+            '[data-cratis-part="trigger"]',
+        );
+        if (!trigger) throw new Error('Date editor was not rendered.');
+        await act(async () => trigger.click());
+        const calendarCell = Array.from(
+            document.querySelectorAll<HTMLElement>('[data-cratis-part="cell"]'),
+        )
+            .map((cell) => cell.querySelector<HTMLElement>('[role="button"]') ?? cell)
+            .find(
+                (cell) =>
+                    cell.getAttribute('aria-selected') !== 'true' &&
+                    cell.getAttribute('aria-disabled') !== 'true',
+            );
+        if (!calendarCell) throw new Error('Date editor did not render an available calendar cell.');
+        await act(async () => calendarCell.click());
+        expect(onChange.mock.calls).to.have.lengthOf(1);
+        expect(onChange.mock.calls[0][0].dueDate).to.be.a('string');
+        expect(onChange.mock.calls[0][1]).to.deep.equal({ source: 'user' });
+    });
+});
diff --git a/Source/PivotViewer/components/RangeHistogramFilter.tsx b/Source/PivotViewer/components/RangeHistogramFilter.tsx
index ecf3e61c..7d238cba 100644
--- a/Source/PivotViewer/components/RangeHistogramFilter.tsx
+++ b/Source/PivotViewer/components/RangeHistogramFilter.tsx
@@ -145,8 +145,14 @@ export function RangeHistogramFilter({
     };
   }, [isDragging, dragStart, min, max, onChange]);
 
-  const handleBarClick = (bucket: HistogramBucket, event: React.MouseEvent<HTMLButtonElement>) => {
-    onChange([bucket.start, bucket.end], { source: 'user', nativeEvent: event.nativeEvent });
+  const handleBarClick = (
+    bucket: HistogramBucket,
+    event: React.MouseEvent<HTMLButtonElement>,
+  ) => {
+    onChange([bucket.start, bucket.end], {
+      source: 'user',
+      nativeEvent: event.nativeEvent,
+    });
   };
 
   const handleClear = (event: React.MouseEvent<HTMLButtonElement>) => {
diff --git a/Source/PivotViewer/components/pivot/colorResolver.ts b/Source/PivotViewer/components/pivot/colorResolver.ts
index 2d9135a1..7e0b5ad9 100644
--- a/Source/PivotViewer/components/pivot/colorResolver.ts
+++ b/Source/PivotViewer/components/pivot/colorResolver.ts
@@ -159,10 +159,10 @@ export function createCssColorResolver(): CssColorResolver {
  * Observes the environment that can change inherited semantic colors.
  * @returns A cleanup callback that disconnects every observer/listener.
  */
-export function observeColorEnvironment(element: Element, listener: () => void) {
+export function observeColorEnvironment(element: Element, onChange: () => void) {
     if (typeof MutationObserver === 'undefined') return () => undefined;
 
-    const observer = new MutationObserver(listener);
+    const observer = new MutationObserver(onChange);
     let ancestor: Element | null = element;
     while (ancestor) {
         observer.observe(ancestor, {
@@ -176,11 +176,11 @@ export function observeColorEnvironment(element: Element, listener: () => void)
         typeof window !== 'undefined' && typeof window.matchMedia === 'function'
             ? window.matchMedia('(prefers-color-scheme: dark)')
             : undefined;
-    colorScheme?.addEventListener('change', listener);
+    colorScheme?.addEventListener('change', onChange);
 
     return () => {
         observer.disconnect();
-        colorScheme?.removeEventListener('change', listener);
+        colorScheme?.removeEventListener('change', onChange);
     };
 }
 
diff --git a/Source/SchemaEditor/SchemaEditor.tsx b/Source/SchemaEditor/SchemaEditor.tsx
index 0810004d..69f83f0a 100644
--- a/Source/SchemaEditor/SchemaEditor.tsx
+++ b/Source/SchemaEditor/SchemaEditor.tsx
@@ -538,11 +538,14 @@ export const SchemaEditor = ({
             return;
         }
 
+        const hasChanges = JSON.stringify(currentSchema) !== JSON.stringify(initialSchema);
         setCurrentSchema(restoredSchema);
-        onChange?.(changedSchema, { source: 'reset' });
+        if (hasChanges) {
+            onChange?.(changedSchema, { source: 'reset' });
+        }
         setIsEditMode(false);
         onCancel?.();
-    }, [initialSchema, onChange, onCancel]);
+    }, [currentSchema, initialSchema, onChange, onCancel]);
 
     const handleEdit = useCallback(() => {
         if (schemaJsonIsInvalid) return;
diff --git a/Source/SchemaEditor/TypeCell.tsx b/Source/SchemaEditor/TypeCell.tsx
index 8d895d67..0614f971 100644
--- a/Source/SchemaEditor/TypeCell.tsx
+++ b/Source/SchemaEditor/TypeCell.tsx
@@ -5,8 +5,8 @@ import { Button } from '../Common/Button';
 import { Dropdown } from '../Dropdown/Dropdown';
 import { Tooltip } from '../Common/Tooltip';
 import * as faIcons from 'react-icons/fa6';
-import type { TypeFormat } from '../types/TypeFormat';
-import type { JsonSchemaProperty } from '../types/JsonSchema';
+import { TypeFormat } from '../types/TypeFormat';
+import { JsonSchemaProperty } from '../types/JsonSchema';
 import type { SchemaEditorLabels } from './SchemaEditor';
 
 export interface TypeCellProps {
@@ -84,7 +84,8 @@ export const TypeCell = ({
             if (typeFormat) {
                 if (isArrayItem) {
                     onUpdateArrayItemType(propertyName, typeFormat.jsonType);
-                } else if (typeFormat.format && typeFormat.format !== '') {
+                } else {
+                    if (typeFormat.format && typeFormat.format !== '') {
                         onUpdateProperty(propertyName, 'type', typeFormat.jsonType, {
                             format: value,
                         });
@@ -93,11 +94,14 @@ export const TypeCell = ({
                             format: undefined,
                         });
                     }
-            } else if (isArrayItem) {
+                }
+            } else {
+                if (isArrayItem) {
                     onUpdateArrayItemType(propertyName, value);
                 } else {
                     onUpdateProperty(propertyName, 'type', value, { format: undefined });
                 }
+            }
         }
     };
 
diff --git a/Source/SchemaEditor/for_SchemaEditor/when_cancelling_edit_mode.tsx b/Source/SchemaEditor/for_SchemaEditor/when_cancelling_edit_mode.tsx
new file mode 100644
index 00000000..8b7b085a
--- /dev/null
+++ b/Source/SchemaEditor/for_SchemaEditor/when_cancelling_edit_mode.tsx
@@ -0,0 +1,89 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { expect } from 'chai';
+import { afterEach, beforeEach, describe, it, vi } from 'vitest';
+import { SchemaEditor } from '../SchemaEditor';
+import type { JsonSchema } from '../../types/JsonSchema';
+
+const schema: JsonSchema = {
+    type: 'object',
+    properties: {
+        name: { type: 'string' },
+    },
+};
+
+describe('when cancelling SchemaEditor edit mode', () => {
+    let container: HTMLDivElement;
+    let root: Root;
+    const onChange = vi.fn();
+
+    const buttonNamed = (name: string) => {
+        const button = Array.from(container.querySelectorAll('button')).find((candidate) =>
+            candidate.textContent?.includes(name),
+        );
+        if (!button) throw new Error(`SchemaEditor did not render the ${name} action.`);
+        return button;
+    };
+
+    beforeEach(async () => {
+        (
+            globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
+        ).IS_REACT_ACT_ENVIRONMENT = true;
+        (globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver ??= class {
+            observe() {
+                return undefined;
+            }
+            unobserve() {
+                return undefined;
+            }
+            disconnect() {
+                return undefined;
+            }
+        };
+        onChange.mockClear();
+        container = document.createElement('div');
+        document.body.append(container);
+        root = createRoot(container);
+        await act(async () => {
+            root.render(<SchemaEditor schema={schema} onChange={onChange} />);
+        });
+        await act(async () => buttonNamed('Edit').click());
+    });
+
+    afterEach(async () => {
+        await act(async () => root.unmount());
+        container.remove();
+    });
+
+    it('should not emit a reset when nothing changed', async () => {
+        await act(async () => buttonNamed('Cancel').click());
+        expect(onChange.mock.calls).to.have.lengthOf(0);
+    });
+
+    it('should emit the restored schema with reset metadata after an edit', async () => {
+        const nameInput = container.querySelector<HTMLInputElement>(
+            'input[aria-label="Property name"]',
+        );
+        if (!nameInput) throw new Error('SchemaEditor did not render the property name input.');
+        await act(async () => {
+            const setValue = Object.getOwnPropertyDescriptor(
+                HTMLInputElement.prototype,
+                'value',
+            )!.set!;
+            setValue.call(nameInput, 'displayName');
+            nameInput.dispatchEvent(new Event('input', { bubbles: true }));
+        });
+        expect(onChange.mock.calls).to.have.lengthOf(1);
+        expect(onChange.mock.calls[0][1]).to.deep.equal({ source: 'user' });
+
+        await act(async () => buttonNamed('Cancel').click());
+        expect(onChange.mock.calls).to.have.lengthOf(2);
+        expect(onChange.mock.calls[1][0]).to.deep.equal(schema);
+        expect(onChange.mock.calls[1][1]).to.deep.equal({ source: 'reset' });
+    });
+});
diff --git a/Source/SchemaEditor/for_SchemaEditor/when_renaming_a_required_property_in_a_nested_object.tsx b/Source/SchemaEditor/for_SchemaEditor/when_renaming_a_required_property_in_a_nested_object.tsx
index e3f3eb91..11b3401e 100644
--- a/Source/SchemaEditor/for_SchemaEditor/when_renaming_a_required_property_in_a_nested_object.tsx
+++ b/Source/SchemaEditor/for_SchemaEditor/when_renaming_a_required_property_in_a_nested_object.tsx
@@ -9,6 +9,7 @@ import { expect } from 'chai';
 import { afterEach, beforeEach, describe, it } from 'vitest';
 import { SchemaEditor } from '../SchemaEditor';
 import type { JsonSchema } from '../../types/JsonSchema';
+import type { ChangeMeta } from '../../types/ChangeMeta';
 
 /**
  * Regression coverage for two confirmed defects in required-property semantics:
@@ -25,6 +26,7 @@ describe('when renaming a required property in a nested object', () => {
     let container: HTMLDivElement;
     let root: Root;
     let capturedSchema: JsonSchema | undefined;
+    let capturedMeta: ChangeMeta | undefined;
 
     const schema: JsonSchema = {
         type: 'object',
@@ -61,6 +63,7 @@ describe('when renaming a required property in a nested object', () => {
         };
 
         capturedSchema = undefined;
+        capturedMeta = undefined;
         container = document.createElement('div');
         document.body.append(container);
         root = createRoot(container);
@@ -69,8 +72,9 @@ describe('when renaming a required property in a nested object', () => {
             root.render(
                 <SchemaEditor
                     schema={schema}
-                    onChange={(updated) => {
+                    onChange={(updated, meta) => {
                         capturedSchema = updated;
+                        capturedMeta = meta;
                     }}
                 />,
             );
@@ -131,4 +135,8 @@ describe('when renaming a required property in a nested object', () => {
     it('should leave the root-level sibling property untouched', () => {
         expect(capturedSchema?.properties?.id).to.deep.equal({ type: 'string' });
     });
+
+    it('should identify the structural edit as a user change without inventing an event', () => {
+        expect(capturedMeta).to.deep.equal({ source: 'user' });
+    });
 });

From e1ee21a4f63bee22462caa15cf95c47299ce5d8a Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 17:11:43 +0200
Subject: [PATCH 147/267] Add PivotViewer callback coverage

---
 .../when_emitting_semantic_changes.tsx        | 63 +++++++++++++++++++
 1 file changed, 63 insertions(+)
 create mode 100644 Source/PivotViewer/for_RangeHistogramFilter/when_emitting_semantic_changes.tsx

diff --git a/Source/PivotViewer/for_RangeHistogramFilter/when_emitting_semantic_changes.tsx b/Source/PivotViewer/for_RangeHistogramFilter/when_emitting_semantic_changes.tsx
new file mode 100644
index 00000000..c644e9f0
--- /dev/null
+++ b/Source/PivotViewer/for_RangeHistogramFilter/when_emitting_semantic_changes.tsx
@@ -0,0 +1,63 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { expect } from 'chai';
+import { afterEach, beforeEach, describe, it, vi } from 'vitest';
+import { RangeHistogramFilter } from '../components/RangeHistogramFilter';
+
+describe('when emitting semantic PivotViewer range changes', () => {
+    let container: HTMLDivElement;
+    let root: Root;
+
+    beforeEach(async () => {
+        (
+            globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
+        ).IS_REACT_ACT_ENVIRONMENT = true;
+        container = document.createElement('div');
+        document.body.append(container);
+        root = createRoot(container);
+    });
+
+    afterEach(async () => {
+        await act(async () => root.unmount());
+        container.remove();
+    });
+
+    it('should emit semantic values with native user metadata', async () => {
+        const onChange = vi.fn();
+        await act(async () => {
+            root.render(
+                <RangeHistogramFilter
+                    values={[10, 20, 30, 40]}
+                    min={0}
+                    max={40}
+                    buckets={4}
+                    selectedRange={[10, 30]}
+                    onChange={onChange}
+                />,
+            );
+        });
+
+        const firstBucket = container.querySelector<HTMLButtonElement>('.pv-histogram-bar');
+        const clear = container.querySelector<HTMLButtonElement>('.pv-range-clear');
+        if (!firstBucket || !clear) {
+            throw new Error('PivotViewer range controls were not rendered.');
+        }
+
+        await act(async () => firstBucket.click());
+        await act(async () => clear.click());
+
+        expect(onChange.mock.calls).to.have.lengthOf(2);
+        expect(onChange.mock.calls[0][0]).to.deep.equal([0, 10]);
+        expect(onChange.mock.calls[1][0]).to.equal(null);
+        for (const call of onChange.mock.calls) {
+            expect(call[1]).to.include({ source: 'user' });
+            expect(call[1].nativeEvent).to.be.instanceOf(Event);
+            expect(Object.hasOwn(call[1].nativeEvent, 'nativeEvent')).to.equal(false);
+        }
+    });
+});

From 29c5a9ad37c5ad741f85e6e5daa985d679dca106 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 17:28:41 +0200
Subject: [PATCH 148/267] Add Toolbar and Display state attributes

---
 Source/Display/ProgressBar.tsx                |   3 +
 Source/Display/ProgressSpinner.tsx            |   2 +
 .../when_rendering_authoritative_states.tsx   | 103 ++++++++++++
 Source/Toolbar/ToolbarButton.tsx              |   2 +
 Source/Toolbar/ToolbarFanOutItem.tsx          |   3 +
 Source/Toolbar/ToolbarFolder.tsx              |   3 +
 Source/Toolbar/ToolbarSection.tsx             |   1 +
 .../when_rendering_authoritative_states.tsx   | 150 ++++++++++++++++++
 8 files changed, 267 insertions(+)
 create mode 100644 Source/Display/for_DisplayStates/when_rendering_authoritative_states.tsx
 create mode 100644 Source/Toolbar/for_ToolbarStates/when_rendering_authoritative_states.tsx

diff --git a/Source/Display/ProgressBar.tsx b/Source/Display/ProgressBar.tsx
index b812de74..b57176bd 100644
--- a/Source/Display/ProgressBar.tsx
+++ b/Source/Display/ProgressBar.tsx
@@ -28,12 +28,15 @@ export const ProgressBar = ({
 }: ProgressBarProps) => {
     const boundedValue = Math.min(100, Math.max(0, value));
     const ariaValue = mode === 'determinate' ? boundedValue : undefined;
+    const isBusy = mode === 'indeterminate' || boundedValue < 100;
 
     return (
         <div
             className={['cratis-progress-bar', className].filter(Boolean).join(' ')}
             data-cratis-part='root'
             data-mode={mode}
+            data-busy={isBusy || undefined}
+            data-loading={mode === 'indeterminate' || undefined}
             role='progressbar'
             aria-label={ariaLabelledBy ? undefined : ariaLabel}
             aria-labelledby={ariaLabelledBy}
diff --git a/Source/Display/ProgressSpinner.tsx b/Source/Display/ProgressSpinner.tsx
index 3542906f..ff0273af 100644
--- a/Source/Display/ProgressSpinner.tsx
+++ b/Source/Display/ProgressSpinner.tsx
@@ -22,6 +22,8 @@ export const ProgressSpinner = ({
     <span
         className={['cratis-progress-spinner', className].filter(Boolean).join(' ')}
         data-cratis-part='root'
+        data-busy='true'
+        data-loading='true'
         style={style}
         role='status'
         aria-label={ariaLabel}
diff --git a/Source/Display/for_DisplayStates/when_rendering_authoritative_states.tsx b/Source/Display/for_DisplayStates/when_rendering_authoritative_states.tsx
new file mode 100644
index 00000000..1e2602ba
--- /dev/null
+++ b/Source/Display/for_DisplayStates/when_rendering_authoritative_states.tsx
@@ -0,0 +1,103 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import type React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { expect } from 'chai';
+import { describe, it } from 'vitest';
+import { Avatar } from '../Avatar';
+import { Badge } from '../Badge';
+import { Chip } from '../Chip';
+import { Message } from '../Message';
+import { ProgressBar } from '../ProgressBar';
+import { ProgressSpinner } from '../ProgressSpinner';
+import { Skeleton } from '../Skeleton';
+import { Tag } from '../Tag';
+
+const canonicalStates = [
+    'disabled',
+    'loading',
+    'selected',
+    'open',
+    'invalid',
+    'readonly',
+    'busy',
+    'focused',
+    'pressed',
+] as const;
+
+const expectOnlyStates = (
+    element: Element,
+    expectedStates: ReadonlyArray<(typeof canonicalStates)[number]>,
+) => {
+    for (const state of canonicalStates) {
+        const value = element.getAttribute(`data-${state}`);
+        expect(value, state).to.equal(
+            expectedStates.includes(state) ? 'true' : null,
+        );
+        expect(value).not.to.equal('false');
+    }
+};
+
+const renderParts = (element: React.ReactNode) => {
+    const container = document.createElement('div');
+    container.innerHTML = renderToStaticMarkup(element);
+    return container.querySelectorAll('[data-cratis-part]');
+};
+
+describe('when rendering authoritative Display states', () => {
+    it('should expose determinate progress as busy until it is complete', () => {
+        const inProgressParts = renderParts(<ProgressBar value={65} />);
+        const completeParts = renderParts(<ProgressBar value={100} />);
+
+        expectOnlyStates(inProgressParts[0], ['busy']);
+        for (const part of Array.from(inProgressParts).slice(1)) expectOnlyStates(part, []);
+        for (const part of completeParts) expectOnlyStates(part, []);
+    });
+
+    it('should expose indeterminate progress as busy and loading', () => {
+        const parts = renderParts(<ProgressBar mode='indeterminate' />);
+
+        expectOnlyStates(parts[0], ['busy', 'loading']);
+        for (const part of Array.from(parts).slice(1)) expectOnlyStates(part, []);
+    });
+
+    it('should expose a progress spinner as busy and loading', () => {
+        const parts = renderParts(<ProgressSpinner />);
+
+        expectOnlyStates(parts[0], ['busy', 'loading']);
+        for (const part of Array.from(parts).slice(1)) expectOnlyStates(part, []);
+    });
+
+    it('should not equate an error message with invalid input', () => {
+        const parts = renderParts(<Message severity='error'>Something went wrong.</Message>);
+
+        for (const part of parts) expectOnlyStates(part, []);
+        expect(parts[0].getAttribute('role')).to.equal('alert');
+    });
+
+    it('should not claim the chip remove control is disabled', () => {
+        const parts = renderParts(<Chip label='Sample' removable />);
+
+        for (const part of parts) expectOnlyStates(part, []);
+        const remove = Array.from(parts).find(
+            (part) => part.getAttribute('data-cratis-part') === 'remove',
+        ) as HTMLButtonElement;
+        expect(remove.disabled).to.equal(false);
+    });
+
+    it('should omit canonical states from static display leaves', () => {
+        const leaves = [
+            () => <Avatar label='SU' />,
+            () => <Badge value={3} />,
+            () => <Tag value='Ready' />,
+            () => <Skeleton />,
+        ];
+
+        for (const leaf of leaves) {
+            for (const part of renderParts(leaf())) expectOnlyStates(part, []);
+        }
+    });
+});
diff --git a/Source/Toolbar/ToolbarButton.tsx b/Source/Toolbar/ToolbarButton.tsx
index beaab15b..6a95cbe7 100644
--- a/Source/Toolbar/ToolbarButton.tsx
+++ b/Source/Toolbar/ToolbarButton.tsx
@@ -117,6 +117,7 @@ export const ToolbarButton = ({
                 className={`toolbar-button toolbar-button--list cratis:h-10 cratis:px-3 cratis:w-full cratis:flex cratis:items-center cratis:justify-start cratis:gap-2 cratis:rounded-lg cratis:cursor-pointer ${activeClass} ${draggableClass} ${pt?.root?.className ?? ''} ${className ?? ''}`}
                 data-cratis-part='button'
                 data-active={active || undefined}
+                data-selected={active || undefined}
             >
                 {resolvedIcon !== null && (
                     <span
@@ -176,6 +177,7 @@ export const ToolbarButton = ({
                 className={`toolbar-button ${buttonSizeClass} cratis:flex cratis:items-center cratis:justify-center cratis:rounded-lg cratis:cursor-pointer ${activeClass} ${draggableClass} ${pt?.root?.className ?? ''} ${className ?? ''}`}
                 data-cratis-part='button'
                 data-active={active || undefined}
+                data-selected={active || undefined}
             >
                 {buttonContent}
             </button>
diff --git a/Source/Toolbar/ToolbarFanOutItem.tsx b/Source/Toolbar/ToolbarFanOutItem.tsx
index 24792723..82770ad9 100644
--- a/Source/Toolbar/ToolbarFanOutItem.tsx
+++ b/Source/Toolbar/ToolbarFanOutItem.tsx
@@ -158,6 +158,7 @@ export const ToolbarFanOutItem = ({
             {...pt?.root}
             className={`toolbar-fanout-item ${pt?.root?.className ?? ''} ${className ?? ''}`}
             data-cratis-part='fanout-root'
+            data-open={isExpanded || undefined}
             ref={containerRef}
         >
             <Tooltip
@@ -175,6 +176,7 @@ export const ToolbarFanOutItem = ({
                     onClick={handleToggle}
                     className={`toolbar-button cratis:w-10 cratis:h-10 cratis:flex cratis:items-center cratis:justify-center cratis:rounded-lg cratis:cursor-pointer ${activeClass} ${pt?.trigger?.className ?? ''}`}
                     data-cratis-part='fanout-trigger'
+                    data-open={isExpanded || undefined}
                 >
                     <IconDisplay icon={icon} className='cratis:text-lg' />
                 </button>
@@ -188,6 +190,7 @@ export const ToolbarFanOutItem = ({
                 className={`toolbar-fanout-panel ${directionClass} ${panelVisibleClass} ${panelSettledClass} ${pt?.panel?.className ?? ''}`}
                 data-cratis-part='fanout-panel'
                 data-expanded={isExpanded || undefined}
+                data-open={isExpanded || undefined}
                 data-direction={fanOutDirection}
                 data-settled={isSettled || undefined}
                 aria-hidden={!isExpanded}
diff --git a/Source/Toolbar/ToolbarFolder.tsx b/Source/Toolbar/ToolbarFolder.tsx
index 470d7fae..82029d46 100644
--- a/Source/Toolbar/ToolbarFolder.tsx
+++ b/Source/Toolbar/ToolbarFolder.tsx
@@ -155,6 +155,7 @@ export const ToolbarFolder = ({
                 {...pt?.root}
                 className={`toolbar-folder-item ${pt?.root?.className ?? ''} ${className ?? ''}`}
                 data-cratis-part='toolbar-folder'
+                data-open={isExpanded || undefined}
                 ref={containerRef}
             >
                 <Tooltip
@@ -172,6 +173,7 @@ export const ToolbarFolder = ({
                         onClick={toggleExpanded}
                         className={`toolbar-button cratis:w-10 cratis:h-10 cratis:flex cratis:items-center cratis:justify-center cratis:rounded-lg cratis:cursor-pointer ${activeClass} ${pt?.trigger?.className ?? ''}`}
                         data-cratis-part='toolbar-folder-trigger'
+                        data-open={isExpanded || undefined}
                     >
                         <IconDisplay icon={icon} className='cratis:text-lg' />
                     </button>
@@ -192,6 +194,7 @@ export const ToolbarFolder = ({
                     }}
                     data-cratis-part='toolbar-folder-panel'
                     data-expanded={isExpanded || undefined}
+                    data-open={isExpanded || undefined}
                     data-direction={folderDirection}
                     data-mode={mode}
                     aria-hidden={!isExpanded}
diff --git a/Source/Toolbar/ToolbarSection.tsx b/Source/Toolbar/ToolbarSection.tsx
index 2b90a40a..28a2b7b8 100644
--- a/Source/Toolbar/ToolbarSection.tsx
+++ b/Source/Toolbar/ToolbarSection.tsx
@@ -212,6 +212,7 @@ export const ToolbarSection = ({
                         data-cratis-part='toolbar-context'
                         data-context-name={name}
                         data-active={isActive || undefined}
+                        data-selected={isActive || undefined}
                         aria-hidden={!isActive}
                         inert={!isActive}
                     >
diff --git a/Source/Toolbar/for_ToolbarStates/when_rendering_authoritative_states.tsx b/Source/Toolbar/for_ToolbarStates/when_rendering_authoritative_states.tsx
new file mode 100644
index 00000000..7b99248d
--- /dev/null
+++ b/Source/Toolbar/for_ToolbarStates/when_rendering_authoritative_states.tsx
@@ -0,0 +1,150 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import type React from 'react';
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { expect } from 'chai';
+import { afterEach, beforeEach, describe, it, vi } from 'vitest';
+import { ToolbarButton } from '../ToolbarButton';
+import { ToolbarContext } from '../ToolbarContext';
+import { ToolbarFanOutItem } from '../ToolbarFanOutItem';
+import { ToolbarFolder } from '../ToolbarFolder';
+import { ToolbarSection } from '../ToolbarSection';
+
+vi.mock('../../Common/Tooltip', () => ({
+    Tooltip: ({ children }: { children?: React.ReactNode }) => <>{children}</>,
+}));
+
+const canonicalStates = [
+    'disabled',
+    'loading',
+    'selected',
+    'open',
+    'invalid',
+    'readonly',
+    'busy',
+    'focused',
+    'pressed',
+] as const;
+
+const expectOnlyStates = (
+    element: Element,
+    expectedStates: ReadonlyArray<(typeof canonicalStates)[number]>,
+) => {
+    for (const state of canonicalStates) {
+        const value = element.getAttribute(`data-${state}`);
+        expect(value, state).to.equal(
+            expectedStates.includes(state) ? 'true' : null,
+        );
+        expect(value).not.to.equal('false');
+    }
+};
+
+const renderStatic = (element: React.ReactNode) => {
+    const container = document.createElement('div');
+    container.innerHTML = renderToStaticMarkup(element);
+    return container;
+};
+
+const icon = <span aria-hidden='true'>T</span>;
+
+describe('when rendering authoritative Toolbar states', () => {
+    let container: HTMLDivElement;
+    let root: Root;
+
+    beforeEach(() => {
+        (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+        container = document.createElement('div');
+        document.body.append(container);
+        root = createRoot(container);
+    });
+
+    afterEach(async () => {
+        await act(async () => root.unmount());
+        container.remove();
+    });
+
+    it('should map an active tool to selected while preserving active', () => {
+        const rendered = renderStatic(<ToolbarButton icon={icon} title='Draw' active />);
+        const button = rendered.querySelector('[data-cratis-part="button"]')!;
+
+        expectOnlyStates(button, ['selected']);
+        expect(button.getAttribute('data-active')).to.equal('true');
+    });
+
+    it('should omit canonical and legacy selection states from an inactive tool', () => {
+        const rendered = renderStatic(<ToolbarButton icon={icon} title='Draw' />);
+        const button = rendered.querySelector('[data-cratis-part="button"]')!;
+
+        expectOnlyStates(button, []);
+        expect(button.hasAttribute('data-active')).to.equal(false);
+    });
+
+    it('should map only the active context to selected while preserving active', () => {
+        const rendered = renderStatic(
+            <ToolbarSection activeContext='draw'>
+                <ToolbarContext name='draw'>Draw</ToolbarContext>
+                <ToolbarContext name='text'>Text</ToolbarContext>
+            </ToolbarSection>,
+        );
+        const contexts = rendered.querySelectorAll('[data-cratis-part="toolbar-context"]');
+
+        expectOnlyStates(contexts[0], ['selected']);
+        expect(contexts[0].getAttribute('data-active')).to.equal('true');
+        expectOnlyStates(contexts[1], []);
+        expect(contexts[1].hasAttribute('data-active')).to.equal(false);
+    });
+
+    const verifyOpenState = async (element: React.ReactNode) => {
+        await act(async () => root.render(element));
+        const stateOwners = Array.from(
+            container.querySelectorAll('#state-root, #state-trigger, #state-panel'),
+        );
+        const trigger = container.querySelector<HTMLButtonElement>('#state-trigger')!;
+        const panel = container.querySelector('#state-panel')!;
+
+        for (const stateOwner of stateOwners) expectOnlyStates(stateOwner, []);
+        expect(panel.hasAttribute('data-expanded')).to.equal(false);
+
+        await act(async () => trigger.click());
+
+        for (const stateOwner of stateOwners) expectOnlyStates(stateOwner, ['open']);
+        expect(panel.getAttribute('data-expanded')).to.equal('true');
+    };
+
+    it('should map folder disclosure state to open on every owning part', async () => {
+        await verifyOpenState(
+            <ToolbarFolder
+                icon={icon}
+                title='Tools'
+                pt={{
+                    root: { id: 'state-root' },
+                    trigger: { id: 'state-trigger' },
+                    panel: { id: 'state-panel' },
+                }}
+            >
+                <ToolbarButton icon={icon} title='Nested tool' />
+            </ToolbarFolder>,
+        );
+    });
+
+    it('should map fan-out disclosure state to open on every owning part', async () => {
+        await verifyOpenState(
+            <ToolbarFanOutItem
+                icon={icon}
+                tooltip='Shapes'
+                pt={{
+                    root: { id: 'state-root' },
+                    trigger: { id: 'state-trigger' },
+                    panel: { id: 'state-panel' },
+                }}
+            >
+                <ToolbarButton icon={icon} title='Nested shape' />
+            </ToolbarFanOutItem>,
+        );
+    });
+});

From 83d06d49d73418f409337d83b107b3c7edc53368 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 17:32:01 +0200
Subject: [PATCH 149/267] Add authoritative component state attributes

---
 Source/Chat/ChatSidebar.tsx                   |   9 +-
 ..._moving_between_topics_and_conversation.ts |  34 ++
 Source/Common/DatePickerInput.tsx             | 443 ++++++++++--------
 Source/Common/Tooltip.tsx                     |   1 +
 .../when_configuring_standard_props.tsx       |  53 ++-
 .../when_rendering_invalid_state.tsx          |  17 +-
 .../when_the_trigger_receives_focus.tsx       |   8 +
 Source/Dialogs/Dialog.tsx                     |  20 +
 .../for_Dialog/when_rendered_with_is_busy.ts  |  26 +-
 .../when_rendered_without_busy_state.ts       |  35 ++
 Source/Dropdown/Dropdown.tsx                  |  49 ++
 .../when_exposing_semantic_state.tsx          | 155 ++++++
 Source/Notifications/Toaster.tsx              |   8 +-
 .../when_exposing_loading_state.tsx           |  52 ++
 14 files changed, 712 insertions(+), 198 deletions(-)
 create mode 100644 Source/Dialogs/for_Dialog/when_rendered_without_busy_state.ts
 create mode 100644 Source/Dropdown/for_Dropdown/when_exposing_semantic_state.tsx
 create mode 100644 Source/Notifications/for_Toaster/when_exposing_loading_state.tsx

diff --git a/Source/Chat/ChatSidebar.tsx b/Source/Chat/ChatSidebar.tsx
index efa73ae1..cf169d2a 100644
--- a/Source/Chat/ChatSidebar.tsx
+++ b/Source/Chat/ChatSidebar.tsx
@@ -44,7 +44,10 @@ export interface ChatSidebarParts {
     content?: ChatSidebarPartAttributes<HTMLDivElement>;
 }
 
-const chatSidebarPartsMatchManifest: ExactPartKeys<ChatSidebarParts, PartsOf<'ChatSidebar'>> = true;
+const chatSidebarPartsMatchManifest: ExactPartKeys<
+    ChatSidebarParts,
+    PartsOf<'ChatSidebar'>
+> = true;
 void chatSidebarPartsMatchManifest;
 
 /** Overrides for every label the {@link ChatSidebar} and its children render. Any field left
@@ -396,6 +399,8 @@ export const ChatSidebar = <
             )}
             data-cratis-part='backdrop'
             data-modal={modal}
+            data-open={open || undefined}
+            data-selected={openTopicId !== undefined || undefined}
         >
             <Modal
                 {...pt?.root}
@@ -407,6 +412,8 @@ export const ChatSidebar = <
                 style={{ width, ...pt?.root?.style }}
                 data-cratis-part='root'
                 data-position={position}
+                data-open={open || undefined}
+                data-selected={openTopicId !== undefined || undefined}
             >
                 {panel}
             </Modal>
diff --git a/Source/Chat/for_ChatSidebar/when_moving_between_topics_and_conversation.ts b/Source/Chat/for_ChatSidebar/when_moving_between_topics_and_conversation.ts
index af9ffbf1..9c5d318d 100644
--- a/Source/Chat/for_ChatSidebar/when_moving_between_topics_and_conversation.ts
+++ b/Source/Chat/for_ChatSidebar/when_moving_between_topics_and_conversation.ts
@@ -75,6 +75,19 @@ describe('when moving between the topics and a conversation', () => {
         (document.querySelector('.cratis-chat-topics') !== null).should.be.true;
     });
 
+    it('should expose open without selected or synthesized busy state', () => {
+        const backdrop = document.querySelector('[data-cratis-part="backdrop"]')!;
+        const root = document.querySelector('[data-cratis-part="root"]')!;
+
+        backdrop.getAttribute('data-open')!.should.equal('true');
+        root.getAttribute('data-open')!.should.equal('true');
+        backdrop.hasAttribute('data-selected').should.be.false;
+        root.hasAttribute('data-selected').should.be.false;
+        backdrop.hasAttribute('data-busy').should.be.false;
+        root.hasAttribute('data-busy').should.be.false;
+        (document.querySelector('[data-open="false"]') === null).should.be.true;
+    });
+
     describe('and a topic is picked', () => {
         beforeEach(async () => {
             await click(
@@ -101,6 +114,18 @@ describe('when moving between the topics and a conversation', () => {
             String(selections[0]!).should.equal('topic-1');
         });
 
+        it('should expose the selected conversation on the sidebar frame', () => {
+            document
+                .querySelector('[data-cratis-part="backdrop"]')!
+                .getAttribute('data-selected')!
+                .should.equal('true');
+            document
+                .querySelector('[data-cratis-part="root"]')!
+                .getAttribute('data-selected')!
+                .should.equal('true');
+            (document.querySelector('[data-selected="false"]') === null).should.be.true;
+        });
+
         describe('and the person goes back', () => {
             beforeEach(async () => {
                 await click(
@@ -121,6 +146,15 @@ describe('when moving between the topics and a conversation', () => {
                 selections.should.have.lengthOf(2);
                 (selections[1] === undefined).should.be.true;
             });
+
+            it('should remove selected from the sidebar frame', () => {
+                document
+                    .querySelector('[data-cratis-part="backdrop"]')!
+                    .hasAttribute('data-selected').should.be.false;
+                document
+                    .querySelector('[data-cratis-part="root"]')!
+                    .hasAttribute('data-selected').should.be.false;
+            });
         });
     });
 });
diff --git a/Source/Common/DatePickerInput.tsx b/Source/Common/DatePickerInput.tsx
index 75a551db..ebcd8df6 100644
--- a/Source/Common/DatePickerInput.tsx
+++ b/Source/Common/DatePickerInput.tsx
@@ -272,223 +272,282 @@ export const DatePickerInput = ({
                 aria-describedby={effectiveAriaDescribedby}
                 className='cratis-date-picker__picker'
             >
-                <Group
-                    {...pt?.group}
-                    id={inputId}
-                    aria-invalid={effectiveInvalid || undefined}
-                    className={classNames(
-                        'cratis-date-picker__group',
-                        pt?.group?.className,
-                    )}
-                    data-cratis-part='group'
-                    data-empty={value === null || undefined}
-                >
-                    <DateInput
-                        {...inputPartAttributes}
-                        className={classNames(
-                            'cratis-date-picker__input',
-                            pt?.input?.className,
-                        )}
-                        style={pt?.input?.style}
-                        data-cratis-part='input'
-                        data-placeholder={effectivePlaceholder}
-                    >
-                        {(segment) => (
-                            <DateSegment
-                                {...pt?.segment}
-                                segment={segment}
-                                className={classNames(
-                                    'cratis-date-picker__segment',
-                                    pt?.segment?.className,
-                                )}
-                                data-cratis-part='segment'
-                            />
-                        )}
-                    </DateInput>
-                    {value === null && effectivePlaceholder && (
-                        <span
-                            {...pt?.placeholder}
-                            className={classNames(
-                                'cratis-date-picker__placeholder',
-                                pt?.placeholder?.className,
-                            )}
-                            data-cratis-part='placeholder'
-                            aria-hidden='true'
-                        >
-                            {effectivePlaceholder}
-                        </span>
-                    )}
-                    {showIcon && (
-                        <Button
-                            {...asReactAriaButtonProps(pt?.trigger)}
-                            isDisabled={effectiveDisabled || effectiveReadOnly}
+                {({ isOpen }) => (
+                    <>
+                        <Group
+                            {...pt?.group}
+                            id={inputId}
+                            aria-invalid={effectiveInvalid || undefined}
                             className={classNames(
-                                'cratis-date-picker__trigger',
-                                pt?.trigger?.className,
+                                'cratis-date-picker__group',
+                                pt?.group?.className,
                             )}
-                            data-cratis-part='trigger'
-                            aria-label={
-                                pt?.trigger?.['aria-label'] ??
-                                datePickerMessages?.openCalendar ??
-                                'Open calendar'
-                            }
-                        >
-                            <span aria-hidden='true'>▦</span>
-                        </Button>
-                    )}
-                </Group>
-                <Popover
-                    {...pt?.popover}
-                    className={classNames(
-                        'cratis-date-picker__popover',
-                        pt?.popover?.className,
-                    )}
-                    data-cratis-part='popover'
-                    placement='bottom start'
-                >
-                    <Dialog
-                        {...pt?.dialog}
-                        className={classNames(
-                            'cratis-date-picker__dialog',
-                            pt?.dialog?.className,
-                        )}
-                        data-cratis-part='dialog'
-                    >
-                        <Calendar
-                            {...pt?.calendar}
-                            className={classNames(
-                                'cratis-date-picker__calendar',
-                                pt?.calendar?.className,
+                            data-cratis-part='group'
+                            data-empty={value === null || undefined}
+                            render={(groupProps) => (
+                                <div
+                                    {...groupProps}
+                                    data-open={isOpen || undefined}
+                                    data-invalid={effectiveInvalid || undefined}
+                                    data-disabled={effectiveDisabled || undefined}
+                                    data-readonly={effectiveReadOnly || undefined}
+                                />
                             )}
-                            data-cratis-part='calendar'
                         >
-                            <header
-                                {...pt?.header}
+                            <DateInput
+                                {...inputPartAttributes}
                                 className={classNames(
-                                    'cratis-date-picker__header',
-                                    pt?.header?.className,
+                                    'cratis-date-picker__input',
+                                    pt?.input?.className,
+                                )}
+                                style={pt?.input?.style}
+                                data-cratis-part='input'
+                                data-placeholder={effectivePlaceholder}
+                                render={(inputProps) => (
+                                    <div
+                                        {...inputProps}
+                                        data-open={isOpen || undefined}
+                                        data-invalid={effectiveInvalid || undefined}
+                                        data-disabled={effectiveDisabled || undefined}
+                                        data-readonly={effectiveReadOnly || undefined}
+                                    />
                                 )}
-                                data-cratis-part='header'
                             >
-                                <Button
-                                    {...asReactAriaButtonProps(pt?.previous)}
-                                    slot='previous'
+                                {(segment) => (
+                                    <DateSegment
+                                        {...pt?.segment}
+                                        segment={segment}
+                                        className={classNames(
+                                            'cratis-date-picker__segment',
+                                            pt?.segment?.className,
+                                        )}
+                                        data-cratis-part='segment'
+                                        render={(segmentProps) => (
+                                            <span
+                                                {...segmentProps}
+                                                data-invalid={
+                                                    effectiveInvalid || undefined
+                                                }
+                                                data-disabled={
+                                                    effectiveDisabled || undefined
+                                                }
+                                                data-readonly={
+                                                    effectiveReadOnly || undefined
+                                                }
+                                            />
+                                        )}
+                                    />
+                                )}
+                            </DateInput>
+                            {value === null && effectivePlaceholder && (
+                                <span
+                                    {...pt?.placeholder}
                                     className={classNames(
-                                        'cratis-date-picker__nav',
-                                        pt?.previous?.className,
+                                        'cratis-date-picker__placeholder',
+                                        pt?.placeholder?.className,
                                     )}
-                                    data-cratis-part='previous'
-                                    aria-label={
-                                        pt?.previous?.['aria-label'] ??
-                                        datePickerMessages?.previousMonth ??
-                                        'Previous month'
-                                    }
+                                    data-cratis-part='placeholder'
+                                    aria-hidden='true'
                                 >
-                                    <span aria-hidden='true'>‹</span>
-                                </Button>
-                                <Heading
-                                    {...pt?.heading}
-                                    className={classNames(
-                                        'cratis-date-picker__heading',
-                                        pt?.heading?.className,
-                                    )}
-                                    data-cratis-part='heading'
-                                />
+                                    {effectivePlaceholder}
+                                </span>
+                            )}
+                            {showIcon && (
                                 <Button
-                                    {...asReactAriaButtonProps(pt?.next)}
-                                    slot='next'
+                                    {...asReactAriaButtonProps(pt?.trigger)}
+                                    isDisabled={effectiveDisabled || effectiveReadOnly}
                                     className={classNames(
-                                        'cratis-date-picker__nav',
-                                        pt?.next?.className,
+                                        'cratis-date-picker__trigger',
+                                        pt?.trigger?.className,
+                                    )}
+                                    data-cratis-part='trigger'
+                                    render={(triggerProps) => (
+                                        <button
+                                            {...triggerProps}
+                                            data-open={isOpen || undefined}
+                                            data-invalid={effectiveInvalid || undefined}
+                                            data-disabled={
+                                                effectiveDisabled ||
+                                                effectiveReadOnly ||
+                                                undefined
+                                            }
+                                            data-readonly={effectiveReadOnly || undefined}
+                                        />
                                     )}
-                                    data-cratis-part='next'
                                     aria-label={
-                                        pt?.next?.['aria-label'] ??
-                                        datePickerMessages?.nextMonth ??
-                                        'Next month'
+                                        pt?.trigger?.['aria-label'] ??
+                                        datePickerMessages?.openCalendar ??
+                                        'Open calendar'
                                     }
                                 >
-                                    <span aria-hidden='true'>›</span>
+                                    <span aria-hidden='true'>▦</span>
                                 </Button>
-                            </header>
-                            <CalendarGrid
-                                {...pt?.grid}
+                            )}
+                        </Group>
+                        <Popover
+                            {...pt?.popover}
+                            className={classNames(
+                                'cratis-date-picker__popover',
+                                pt?.popover?.className,
+                            )}
+                            data-cratis-part='popover'
+                            data-open
+                            placement='bottom start'
+                        >
+                            <Dialog
+                                {...pt?.dialog}
                                 className={classNames(
-                                    'cratis-date-picker__grid',
-                                    pt?.grid?.className,
+                                    'cratis-date-picker__dialog',
+                                    pt?.dialog?.className,
                                 )}
-                                data-cratis-part='grid'
+                                data-cratis-part='dialog'
+                                data-open
                             >
-                                <CalendarGridHeader>
-                                    {(day) => (
-                                        <CalendarHeaderCell>{day}</CalendarHeaderCell>
+                                <Calendar
+                                    {...pt?.calendar}
+                                    className={classNames(
+                                        'cratis-date-picker__calendar',
+                                        pt?.calendar?.className,
                                     )}
-                                </CalendarGridHeader>
-                                <CalendarGridBody>
-                                    {(date) => (
-                                        <CalendarCell
-                                            {...pt?.cell}
-                                            date={date}
+                                    data-cratis-part='calendar'
+                                    data-open
+                                >
+                                    <header
+                                        {...pt?.header}
+                                        className={classNames(
+                                            'cratis-date-picker__header',
+                                            pt?.header?.className,
+                                        )}
+                                        data-cratis-part='header'
+                                    >
+                                        <Button
+                                            {...asReactAriaButtonProps(pt?.previous)}
+                                            slot='previous'
                                             className={classNames(
-                                                'cratis-date-picker__cell',
-                                                pt?.cell?.className,
+                                                'cratis-date-picker__nav',
+                                                pt?.previous?.className,
                                             )}
-                                            data-cratis-part='cell'
+                                            data-cratis-part='previous'
+                                            aria-label={
+                                                pt?.previous?.['aria-label'] ??
+                                                datePickerMessages?.previousMonth ??
+                                                'Previous month'
+                                            }
+                                        >
+                                            <span aria-hidden='true'>‹</span>
+                                        </Button>
+                                        <Heading
+                                            {...pt?.heading}
+                                            className={classNames(
+                                                'cratis-date-picker__heading',
+                                                pt?.heading?.className,
+                                            )}
+                                            data-cratis-part='heading'
                                         />
-                                    )}
-                                </CalendarGridBody>
-                            </CalendarGrid>
-                        </Calendar>
-                        {showButtonBar && (
-                            <div
-                                {...pt?.buttonBar}
-                                className={classNames(
-                                    'cratis-date-picker__button-bar',
-                                    pt?.buttonBar?.className,
+                                        <Button
+                                            {...asReactAriaButtonProps(pt?.next)}
+                                            slot='next'
+                                            className={classNames(
+                                                'cratis-date-picker__nav',
+                                                pt?.next?.className,
+                                            )}
+                                            data-cratis-part='next'
+                                            aria-label={
+                                                pt?.next?.['aria-label'] ??
+                                                datePickerMessages?.nextMonth ??
+                                                'Next month'
+                                            }
+                                        >
+                                            <span aria-hidden='true'>›</span>
+                                        </Button>
+                                    </header>
+                                    <CalendarGrid
+                                        {...pt?.grid}
+                                        className={classNames(
+                                            'cratis-date-picker__grid',
+                                            pt?.grid?.className,
+                                        )}
+                                        data-cratis-part='grid'
+                                    >
+                                        <CalendarGridHeader>
+                                            {(day) => (
+                                                <CalendarHeaderCell>
+                                                    {day}
+                                                </CalendarHeaderCell>
+                                            )}
+                                        </CalendarGridHeader>
+                                        <CalendarGridBody>
+                                            {(date) => (
+                                                <CalendarCell
+                                                    {...pt?.cell}
+                                                    date={date}
+                                                    className={classNames(
+                                                        'cratis-date-picker__cell',
+                                                        pt?.cell?.className,
+                                                    )}
+                                                    data-cratis-part='cell'
+                                                />
+                                            )}
+                                        </CalendarGridBody>
+                                    </CalendarGrid>
+                                </Calendar>
+                                {showButtonBar && (
+                                    <div
+                                        {...pt?.buttonBar}
+                                        className={classNames(
+                                            'cratis-date-picker__button-bar',
+                                            pt?.buttonBar?.className,
+                                        )}
+                                        data-cratis-part='button-bar'
+                                    >
+                                        <button
+                                            {...pt?.today}
+                                            type='button'
+                                            className={classNames(
+                                                'cratis-date-picker__action',
+                                                pt?.today?.className,
+                                            )}
+                                            data-cratis-part='today'
+                                            data-disabled={
+                                                isTodayOutOfBounds || undefined
+                                            }
+                                            disabled={isTodayOutOfBounds}
+                                            aria-disabled={
+                                                isTodayOutOfBounds || undefined
+                                            }
+                                            onClick={(event) => {
+                                                if (isTodayOutOfBounds) return;
+                                                onChange(todayDate, {
+                                                    source: 'user',
+                                                    nativeEvent: event.nativeEvent,
+                                                });
+                                            }}
+                                        >
+                                            {resolvedTodayLabel}
+                                        </button>
+                                        <button
+                                            {...pt?.clear}
+                                            type='button'
+                                            className={classNames(
+                                                'cratis-date-picker__action',
+                                                pt?.clear?.className,
+                                            )}
+                                            data-cratis-part='clear'
+                                            onClick={(event) =>
+                                                onChange(null, {
+                                                    source: 'user',
+                                                    nativeEvent: event.nativeEvent,
+                                                })
+                                            }
+                                        >
+                                            {resolvedClearLabel}
+                                        </button>
+                                    </div>
                                 )}
-                                data-cratis-part='button-bar'
-                            >
-                                <button
-                                    {...pt?.today}
-                                    type='button'
-                                    className={classNames(
-                                        'cratis-date-picker__action',
-                                        pt?.today?.className,
-                                    )}
-                                    data-cratis-part='today'
-                                    disabled={isTodayOutOfBounds}
-                                    aria-disabled={isTodayOutOfBounds || undefined}
-                                    onClick={(event) => {
-                                        if (isTodayOutOfBounds) return;
-                                        onChange(todayDate, {
-                                            source: 'user',
-                                            nativeEvent: event.nativeEvent,
-                                        });
-                                    }}
-                                >
-                                    {resolvedTodayLabel}
-                                </button>
-                                <button
-                                    {...pt?.clear}
-                                    type='button'
-                                    className={classNames(
-                                        'cratis-date-picker__action',
-                                        pt?.clear?.className,
-                                    )}
-                                    data-cratis-part='clear'
-                                    onClick={(event) =>
-                                        onChange(null, {
-                                            source: 'user',
-                                            nativeEvent: event.nativeEvent,
-                                        })
-                                    }
-                                >
-                                    {resolvedClearLabel}
-                                </button>
-                            </div>
-                        )}
-                    </Dialog>
-                </Popover>
+                            </Dialog>
+                        </Popover>
+                    </>
+                )}
             </AriaDatePicker>
         </div>
     );
diff --git a/Source/Common/Tooltip.tsx b/Source/Common/Tooltip.tsx
index 13db8189..3023d28a 100644
--- a/Source/Common/Tooltip.tsx
+++ b/Source/Common/Tooltip.tsx
@@ -60,6 +60,7 @@ export const Tooltip = ({
                 offset={8}
                 className='cratis-tooltip-popup'
                 data-cratis-part='popup'
+                data-open
             >
                 {content}
             </AriaTooltip>
diff --git a/Source/Common/for_DatePickerInput/when_configuring_standard_props.tsx b/Source/Common/for_DatePickerInput/when_configuring_standard_props.tsx
index 32497485..02021996 100644
--- a/Source/Common/for_DatePickerInput/when_configuring_standard_props.tsx
+++ b/Source/Common/for_DatePickerInput/when_configuring_standard_props.tsx
@@ -101,10 +101,26 @@ describe('when configuring standard DatePickerInput props', () => {
         }
     });
 
-    it('should disable the model and trigger', async () => {
+    it('should disable every editable date part without emitting inactive states', async () => {
         const mounted = await mountDatePicker({ disabled: true });
         try {
+            const input = mounted.container.querySelector('[data-cratis-part="input"]');
+            const segments = mounted.container.querySelectorAll(
+                '[data-cratis-part="segment"]',
+            );
+
             expect(mounted.pickerRoot.getAttribute('data-disabled')).to.equal('true');
+            expect(mounted.group.getAttribute('data-disabled')).to.equal('true');
+            expect(input?.getAttribute('data-disabled')).to.equal('true');
+            expect(
+                Array.from(segments).every(
+                    (segment) => segment.getAttribute('data-disabled') === 'true',
+                ),
+            ).to.equal(true);
+            expect(mounted.trigger.getAttribute('data-disabled')).to.equal('true');
+            expect(mounted.trigger.hasAttribute('data-open')).to.equal(false);
+            expect(mounted.pickerRoot.hasAttribute('data-readonly')).to.equal(false);
+            expect(mounted.pickerRoot.hasAttribute('data-invalid')).to.equal(false);
             expect(mounted.trigger.disabled).to.equal(true);
             await act(async () => mounted.trigger.click());
             expect(popup()).to.equal(null);
@@ -113,10 +129,25 @@ describe('when configuring standard DatePickerInput props', () => {
         }
     });
 
-    it('should make the date model read-only', async () => {
+    it('should mark editable date parts read-only without emitting disabled on the model', async () => {
         const mounted = await mountDatePicker({ readOnly: true });
         try {
+            const input = mounted.container.querySelector('[data-cratis-part="input"]');
+            const segments = mounted.container.querySelectorAll(
+                '[data-cratis-part="segment"]',
+            );
+
             expect(mounted.pickerRoot.getAttribute('data-readonly')).to.equal('true');
+            expect(mounted.group.getAttribute('data-readonly')).to.equal('true');
+            expect(input?.getAttribute('data-readonly')).to.equal('true');
+            expect(
+                Array.from(segments).every(
+                    (segment) => segment.getAttribute('data-readonly') === 'true',
+                ),
+            ).to.equal(true);
+            expect(mounted.trigger.getAttribute('data-readonly')).to.equal('true');
+            expect(mounted.pickerRoot.hasAttribute('data-disabled')).to.equal(false);
+            expect(mounted.trigger.getAttribute('data-disabled')).to.equal('true');
             expect(mounted.trigger.disabled).to.equal(true);
             await act(async () => mounted.trigger.click());
             expect(popup()).to.equal(null);
@@ -136,6 +167,24 @@ describe('when configuring standard DatePickerInput props', () => {
         try {
             await act(async () => mounted.trigger.click());
             const buttonBar = document.querySelector('[data-cratis-part="button-bar"]');
+            const popover = document.querySelector('[data-cratis-part="popover"]');
+            const dialog = document.querySelector('[data-cratis-part="dialog"]');
+            const calendar = document.querySelector('[data-cratis-part="calendar"]');
+            const selectedCell = document.querySelector(
+                '[data-cratis-part="cell"][data-selected]',
+            );
+
+            expect(mounted.group.getAttribute('data-open')).to.equal('true');
+            expect(mounted.trigger.getAttribute('data-open')).to.equal('true');
+            expect(popover?.getAttribute('data-open')).to.equal('true');
+            expect(dialog?.getAttribute('data-open')).to.equal('true');
+            expect(calendar?.getAttribute('data-open')).to.equal('true');
+            expect(selectedCell?.textContent).to.equal('22');
+            expect(
+                document.querySelector(
+                    '[data-cratis-part="cell"][data-selected="false"]',
+                ),
+            ).to.equal(null);
             expect(buttonBar?.textContent).to.contain('Translated today');
             expect(buttonBar?.textContent).to.contain('Translated clear');
             expect(document.querySelector('#appointment-calendar-grid')).not.to.equal(
diff --git a/Source/Common/for_DatePickerInput/when_rendering_invalid_state.tsx b/Source/Common/for_DatePickerInput/when_rendering_invalid_state.tsx
index 41881ca7..5625059b 100644
--- a/Source/Common/for_DatePickerInput/when_rendering_invalid_state.tsx
+++ b/Source/Common/for_DatePickerInput/when_rendering_invalid_state.tsx
@@ -65,9 +65,24 @@ import { DatePickerInput } from '../DatePickerInput';
             expect(errorSpy.mock.calls).to.deep.equal([]);
         });
 
-        it('should represent the invalid state through accepted input attributes', () => {
+        it('should represent the invalid state on every editable date part', () => {
+            const input = container.querySelector('[data-cratis-part="input"]');
+            const segments = container.querySelectorAll('[data-cratis-part="segment"]');
+            const trigger = container.querySelector('[data-cratis-part="trigger"]');
+
             expect(group.getAttribute('aria-invalid')).to.equal(invalid ? 'true' : null);
             expect(pickerRoot.hasAttribute('data-invalid')).to.equal(invalid);
+            expect(group.hasAttribute('data-invalid')).to.equal(invalid);
+            expect(input?.hasAttribute('data-invalid')).to.equal(invalid);
+            expect(
+                Array.from(segments).every(
+                    (segment) => segment.hasAttribute('data-invalid') === invalid,
+                ),
+            ).to.equal(true);
+            expect(trigger?.hasAttribute('data-invalid')).to.equal(invalid);
+            expect(
+                container.querySelector('[data-cratis-part][data-invalid="false"]'),
+            ).to.equal(null);
         });
     });
 });
diff --git a/Source/Common/for_Tooltip/when_the_trigger_receives_focus.tsx b/Source/Common/for_Tooltip/when_the_trigger_receives_focus.tsx
index 16d4f867..98962aa8 100644
--- a/Source/Common/for_Tooltip/when_the_trigger_receives_focus.tsx
+++ b/Source/Common/for_Tooltip/when_the_trigger_receives_focus.tsx
@@ -67,4 +67,12 @@ describe('when the tooltip trigger receives focus', () => {
         expect(triggers[0]).to.equal(button);
         expect(button.tabIndex).to.equal(0);
     });
+
+    it('should expose open only on the popup that knows it is mounted', () => {
+        const popup = document.querySelector('[data-cratis-part="popup"]');
+
+        expect(popup?.getAttribute('data-open')).to.equal('true');
+        expect(button.hasAttribute('data-open')).to.equal(false);
+        expect(document.querySelector('[data-open="false"]')).to.equal(null);
+    });
 });
diff --git a/Source/Dialogs/Dialog.tsx b/Source/Dialogs/Dialog.tsx
index 16411f2a..86cea694 100644
--- a/Source/Dialogs/Dialog.tsx
+++ b/Source/Dialogs/Dialog.tsx
@@ -237,6 +237,8 @@ export const Dialog = ({
                 primary ? pt?.confirm?.className : pt?.cancel?.className,
             )}
             data-cratis-part={primary ? 'confirm' : 'cancel'}
+            data-disabled={(primary ? !isDialogValid || isBusy : isBusy) || undefined}
+            data-busy={isBusy || undefined}
             ref={primary ? confirmRef : focused ? cancelRef : undefined}
             onClick={() => void handleClose(result)}
             disabled={primary ? !isDialogValid || isBusy : isBusy}
@@ -351,6 +353,8 @@ export const Dialog = ({
                                 pt?.close?.className,
                             )}
                             data-cratis-part='close'
+                            data-disabled={isBusy || undefined}
+                            data-busy={isBusy || undefined}
                             aria-label={resolvedCloseAriaLabel}
                             onClick={() => void handleClose(DialogResult.Cancelled)}
                         >
@@ -366,10 +370,13 @@ export const Dialog = ({
                     )}
                     style={{ ...pt?.content?.style, ...contentStyle }}
                     data-cratis-part='content'
+                    data-open={visible || undefined}
+                    data-busy={isBusy || undefined}
                 >
                     <fieldset
                         className='cratis-dialog__busy-scope'
                         data-cratis-part='busy-scope'
+                        data-busy={isBusy || undefined}
                         disabled={isBusy}
                         inert={isBusy}
                         aria-busy={isBusy || undefined}
@@ -390,6 +397,7 @@ export const Dialog = ({
                         <fieldset
                             className='cratis-dialog__busy-scope cratis-dialog__busy-scope--footer'
                             data-cratis-part='busy-scope'
+                            data-busy={isBusy || undefined}
                             disabled={isBusy}
                             inert={isBusy}
                             aria-busy={isBusy || undefined}
@@ -418,6 +426,8 @@ export const Dialog = ({
                     ...pt?.backdrop?.style,
                 }}
                 data-cratis-part='backdrop'
+                data-open={visible || undefined}
+                data-busy={isBusy || undefined}
             >
                 <div
                     {...pt?.positioner}
@@ -427,6 +437,8 @@ export const Dialog = ({
                     )}
                     style={pt?.positioner?.style}
                     data-cratis-part='positioner'
+                    data-open={visible || undefined}
+                    data-busy={isBusy || undefined}
                 >
                     <section
                         {...pt?.root}
@@ -437,6 +449,8 @@ export const Dialog = ({
                         )}
                         style={dialogStyle}
                         data-cratis-part='root'
+                        data-open={visible || undefined}
+                        data-busy={isBusy || undefined}
                     >
                         {dialogDocument}
                     </section>
@@ -460,6 +474,8 @@ export const Dialog = ({
                 ...pt?.backdrop?.style,
             }}
             data-cratis-part='backdrop'
+            data-open={visible || undefined}
+            data-busy={isBusy || undefined}
         >
             <div
                 {...pt?.positioner}
@@ -469,6 +485,8 @@ export const Dialog = ({
                 )}
                 style={pt?.positioner?.style}
                 data-cratis-part='positioner'
+                data-open={visible || undefined}
+                data-busy={isBusy || undefined}
             >
                 <Modal
                     {...pt?.root}
@@ -479,6 +497,8 @@ export const Dialog = ({
                     )}
                     style={dialogStyle}
                     data-cratis-part='root'
+                    data-open={visible || undefined}
+                    data-busy={isBusy || undefined}
                 >
                     {dialogDocument}
                 </Modal>
diff --git a/Source/Dialogs/for_Dialog/when_rendered_with_is_busy.ts b/Source/Dialogs/for_Dialog/when_rendered_with_is_busy.ts
index edaf6117..efc9dbc2 100644
--- a/Source/Dialogs/for_Dialog/when_rendered_with_is_busy.ts
+++ b/Source/Dialogs/for_Dialog/when_rendered_with_is_busy.ts
@@ -13,6 +13,9 @@ vi.mock('@cratis/arc.react/dialogs', () => ({
     useDialogContext: () => undefined,
 }));
 
+const markupForPart = (html: string, part: string) =>
+    html.match(new RegExp(`<[^>]+data-cratis-part="${part}"[^>]*>`))?.[0] ?? '';
+
 describe('when rendered with is busy', () => {
     let html: string;
 
@@ -37,5 +40,26 @@ describe('when rendered with is busy', () => {
         const disabledScopes = html.match(/<fieldset[^>]*disabled=""/g) ?? [];
         expect(disabledScopes).to.have.length(2);
     });
-});
 
+    it('should expose open and busy on every modal framing part', () => {
+        ['backdrop', 'positioner', 'root', 'content'].forEach((part) => {
+            expect(markupForPart(html, part)).to.contain('data-open="true"');
+            expect(markupForPart(html, part)).to.contain('data-busy="true"');
+        });
+    });
+
+    it('should expose busy on disabled actions and scopes', () => {
+        ['close', 'confirm', 'cancel'].forEach((part) => {
+            expect(markupForPart(html, part)).to.contain('data-disabled="true"');
+            expect(markupForPart(html, part)).to.contain('data-busy="true"');
+        });
+        const busyScopes = html.match(
+            /<fieldset[^>]*data-cratis-part="busy-scope"[^>]*data-busy="true"/g,
+        );
+        expect(busyScopes).to.have.lengthOf(2);
+    });
+
+    it('should never serialize false state values', () => {
+        expect(html).not.to.match(/data-(?:open|busy|disabled)="false"/);
+    });
+});
diff --git a/Source/Dialogs/for_Dialog/when_rendered_without_busy_state.ts b/Source/Dialogs/for_Dialog/when_rendered_without_busy_state.ts
new file mode 100644
index 00000000..389f5091
--- /dev/null
+++ b/Source/Dialogs/for_Dialog/when_rendered_without_busy_state.ts
@@ -0,0 +1,35 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { expect } from 'chai';
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, it, vi } from 'vitest';
+import { Dialog } from '../Dialog';
+
+vi.mock('@cratis/arc.react/dialogs', () => ({
+    DialogButtons: { Ok: 1, OkCancel: 2, YesNo: 3, YesNoCancel: 4 },
+    DialogResult: { None: 0, Yes: 1, No: 2, Ok: 3, Cancelled: 4 },
+    useDialogContext: () => undefined,
+}));
+
+const html = renderToStaticMarkup(
+    React.createElement(Dialog, {
+        title: 'Example dialog',
+        visible: true,
+        buttons: 2,
+        children: React.createElement('p', null, 'Dialog content'),
+    }),
+);
+
+describe('when rendered without busy state', () => {
+    it('should omit inactive busy and disabled states', () => {
+        expect(html).not.to.contain('data-busy=');
+        expect(html).not.to.contain('data-disabled=');
+    });
+
+    it('should retain the authoritative open state', () => {
+        expect(html.match(/data-open="true"/g)).to.have.lengthOf(4);
+        expect(html).not.to.contain('data-open="false"');
+    });
+});
diff --git a/Source/Dropdown/Dropdown.tsx b/Source/Dropdown/Dropdown.tsx
index 1874f016..d33bbfb3 100644
--- a/Source/Dropdown/Dropdown.tsx
+++ b/Source/Dropdown/Dropdown.tsx
@@ -7,6 +7,7 @@ import type {
     FocusEventHandler,
     HTMLAttributes,
     InputHTMLAttributes,
+    JSX,
     Key,
     SelectHTMLAttributes,
 } from 'react';
@@ -205,6 +206,17 @@ const resolveOptions = (
 const classNames = (...values: Array<string | undefined>) =>
     values.filter(Boolean).join(' ');
 
+const renderTriggerWithOpenState = (props: JSX.IntrinsicElements['button']) => (
+    <button
+        {...props}
+        data-open={
+            props['aria-expanded'] === true || props['aria-expanded'] === 'true'
+                ? true
+                : undefined
+        }
+    />
+);
+
 /** A renderer-independent single or multiple select with stable Cratis parts. */
 export const Dropdown = <T = unknown,>({
     value,
@@ -357,6 +369,8 @@ export const Dropdown = <T = unknown,>({
                             )}
                             style={{ ...pt?.input?.style, ...pt?.filter?.style }}
                             data-cratis-part='filter'
+                            data-disabled={disabled || undefined}
+                            data-invalid={effectiveInvalid || undefined}
                         />
                         <ComboBoxButton
                             {...asReactAriaButtonProps(pt?.trigger)}
@@ -365,6 +379,9 @@ export const Dropdown = <T = unknown,>({
                                 pt?.trigger?.className,
                             )}
                             data-cratis-part='trigger'
+                            data-disabled={disabled || undefined}
+                            data-invalid={effectiveInvalid || undefined}
+                            render={renderTriggerWithOpenState}
                             aria-label={showOptionsLabel}
                         >
                             <span aria-hidden='true'>⌄</span>
@@ -379,6 +396,7 @@ export const Dropdown = <T = unknown,>({
                                     pt?.clear?.className,
                                 )}
                                 data-cratis-part='clear'
+                                data-disabled={disabled || undefined}
                                 aria-label={clearSelectionLabel}
                                 onClick={(event) =>
                                     onChange?.([] as T, {
@@ -402,6 +420,7 @@ export const Dropdown = <T = unknown,>({
                                 ...pt?.popover?.style,
                             }}
                             data-cratis-part='popover'
+                            data-open
                         >
                             <ComboBoxListBox
                                 {...asReactAriaListBoxProps<ResolvedOption>(pt?.listbox)}
@@ -411,6 +430,7 @@ export const Dropdown = <T = unknown,>({
                                     pt?.listbox?.className,
                                 )}
                                 data-cratis-part='listbox'
+                                data-open
                             >
                                 {(option) => (
                                     <ComboBoxListBoxItem
@@ -425,6 +445,10 @@ export const Dropdown = <T = unknown,>({
                                             pt?.option?.className,
                                         )}
                                         data-cratis-part='option'
+                                        data-disabled={option.disabled || undefined}
+                                        data-selected={
+                                            selectedKeys.includes(option.key) || undefined
+                                        }
                                     >
                                         {option.label}
                                     </ComboBoxListBoxItem>
@@ -464,6 +488,8 @@ export const Dropdown = <T = unknown,>({
                         pt?.multiple?.className,
                     )}
                     data-cratis-part='multiple'
+                    data-disabled={disabled || undefined}
+                    data-invalid={effectiveInvalid || undefined}
                     onChange={(event) => {
                         const keys = Array.from(
                             event.currentTarget.selectedOptions,
@@ -483,6 +509,8 @@ export const Dropdown = <T = unknown,>({
                             key={option.key}
                             value={option.key}
                             disabled={option.disabled}
+                            data-disabled={option.disabled || undefined}
+                            data-selected={selectedKeys.includes(option.key) || undefined}
                         >
                             {option.label}
                         </option>
@@ -498,6 +526,7 @@ export const Dropdown = <T = unknown,>({
                             pt?.clear?.className,
                         )}
                         data-cratis-part='clear'
+                        data-disabled={disabled || undefined}
                         aria-label={clearSelectionLabel}
                         onClick={(event) =>
                             onChange?.([] as T, {
@@ -549,6 +578,8 @@ export const Dropdown = <T = unknown,>({
                         )}
                         style={{ ...pt?.input?.style, ...pt?.filter?.style }}
                         data-cratis-part='filter'
+                        data-disabled={disabled || undefined}
+                        data-invalid={effectiveInvalid || undefined}
                     />
                     <ComboBoxButton
                         {...asReactAriaButtonProps(pt?.trigger)}
@@ -557,6 +588,9 @@ export const Dropdown = <T = unknown,>({
                             pt?.trigger?.className,
                         )}
                         data-cratis-part='trigger'
+                        data-disabled={disabled || undefined}
+                        data-invalid={effectiveInvalid || undefined}
+                        render={renderTriggerWithOpenState}
                         aria-label={showOptionsLabel}
                     >
                         <span aria-hidden='true'>⌄</span>
@@ -571,6 +605,7 @@ export const Dropdown = <T = unknown,>({
                                 pt?.clear?.className,
                             )}
                             data-cratis-part='clear'
+                            data-disabled={disabled || undefined}
                             aria-label={clearSelectionLabel}
                             onClick={(event) =>
                                 onChange?.(null as T, {
@@ -594,6 +629,7 @@ export const Dropdown = <T = unknown,>({
                             ...pt?.popover?.style,
                         }}
                         data-cratis-part='popover'
+                        data-open
                     >
                         <ComboBoxListBox
                             {...asReactAriaListBoxProps<ResolvedOption>(pt?.listbox)}
@@ -603,6 +639,7 @@ export const Dropdown = <T = unknown,>({
                                 pt?.listbox?.className,
                             )}
                             data-cratis-part='listbox'
+                            data-open
                         >
                             {(option) => (
                                 <ComboBoxListBoxItem
@@ -617,6 +654,10 @@ export const Dropdown = <T = unknown,>({
                                         pt?.option?.className,
                                     )}
                                     data-cratis-part='option'
+                                    data-disabled={option.disabled || undefined}
+                                    data-selected={
+                                        option.key === selectedKey || undefined
+                                    }
                                 >
                                     {option.label}
                                 </ComboBoxListBoxItem>
@@ -662,6 +703,9 @@ export const Dropdown = <T = unknown,>({
                     )}
                     style={{ ...pt?.input?.style, ...pt?.trigger?.style }}
                     data-cratis-part='trigger'
+                    data-disabled={disabled || undefined}
+                    data-invalid={effectiveInvalid || undefined}
+                    render={renderTriggerWithOpenState}
                 >
                     <SelectValue
                         {...pt?.value}
@@ -695,6 +739,7 @@ export const Dropdown = <T = unknown,>({
                             pt?.clear?.className,
                         )}
                         data-cratis-part='clear'
+                        data-disabled={disabled || undefined}
                         aria-label={clearSelectionLabel}
                         onClick={(event) =>
                             onChange?.(null as T, {
@@ -718,6 +763,7 @@ export const Dropdown = <T = unknown,>({
                         ...pt?.popover?.style,
                     }}
                     data-cratis-part='popover'
+                    data-open
                 >
                     <ListBox
                         {...asReactAriaListBoxProps<ResolvedOption>(pt?.listbox)}
@@ -727,6 +773,7 @@ export const Dropdown = <T = unknown,>({
                             pt?.listbox?.className,
                         )}
                         data-cratis-part='listbox'
+                        data-open
                     >
                         {(option) => (
                             <ListBoxItem
@@ -741,6 +788,8 @@ export const Dropdown = <T = unknown,>({
                                     pt?.option?.className,
                                 )}
                                 data-cratis-part='option'
+                                data-disabled={option.disabled || undefined}
+                                data-selected={option.key === selectedKey || undefined}
                             >
                                 {option.label}
                             </ListBoxItem>
diff --git a/Source/Dropdown/for_Dropdown/when_exposing_semantic_state.tsx b/Source/Dropdown/for_Dropdown/when_exposing_semantic_state.tsx
new file mode 100644
index 00000000..4b31214e
--- /dev/null
+++ b/Source/Dropdown/for_Dropdown/when_exposing_semantic_state.tsx
@@ -0,0 +1,155 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { expect } from 'chai';
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, it } from 'vitest';
+import { CratisComponentsProvider } from '../../Common/CratisComponentsProvider';
+import { Dropdown } from '../Dropdown';
+
+const options = [
+    { label: 'One', value: 'one' },
+    { label: 'Two', value: 'two', disabled: true },
+];
+
+const optionLabeled = (label: string) =>
+    Array.from(document.querySelectorAll('[data-cratis-part="option"]')).find(
+        (option) => option.textContent === label,
+    );
+
+describe('when exposing Dropdown semantic state', () => {
+    let container: HTMLDivElement;
+    let root: Root;
+
+    beforeEach(async () => {
+        (
+            globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
+        ).IS_REACT_ACT_ENVIRONMENT = true;
+        (globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver ??= class {
+            observe() {
+                return undefined;
+            }
+            unobserve() {
+                return undefined;
+            }
+            disconnect() {
+                return undefined;
+            }
+        };
+        container = document.createElement('div');
+        document.body.append(container);
+        root = createRoot(container);
+
+        await act(async () => {
+            root.render(
+                <CratisComponentsProvider>
+                    <Dropdown
+                        value='one'
+                        options={options}
+                        showClear
+                        aria-label='Example choice'
+                    />
+                </CratisComponentsProvider>,
+            );
+        });
+
+        const trigger = container.querySelector<HTMLButtonElement>(
+            '[data-cratis-part="trigger"]',
+        );
+        if (!trigger) throw new Error('Dropdown did not render its trigger.');
+        await act(async () => trigger.click());
+    });
+
+    afterEach(async () => {
+        await act(async () => root.unmount());
+        container.remove();
+    });
+
+    it('should expose open on parts owned by the open interaction', () => {
+        const rootPart = container.querySelector('[data-cratis-part="root"]');
+        const trigger = container.querySelector('[data-cratis-part="trigger"]');
+        const popover = document.querySelector('[data-cratis-part="popover"]');
+        const listbox = document.querySelector('[data-cratis-part="listbox"]');
+
+        expect(rootPart?.hasAttribute('data-disabled')).to.equal(false);
+        expect(rootPart?.hasAttribute('data-invalid')).to.equal(false);
+        expect(rootPart?.hasAttribute('data-readonly')).to.equal(false);
+        expect(trigger?.getAttribute('data-open')).to.equal('true');
+        expect(popover?.getAttribute('data-open')).to.equal('true');
+        expect(listbox?.getAttribute('data-open')).to.equal('true');
+        expect(document.querySelector('[data-open="false"]')).to.equal(null);
+    });
+
+    it('should expose selected and disabled only on matching options', () => {
+        const selectedOption = optionLabeled('One');
+        const disabledOption = optionLabeled('Two');
+
+        expect(selectedOption?.getAttribute('data-selected')).to.equal('true');
+        expect(selectedOption?.hasAttribute('data-disabled')).to.equal(false);
+        expect(disabledOption?.getAttribute('data-disabled')).to.equal('true');
+        expect(disabledOption?.hasAttribute('data-selected')).to.equal(false);
+        expect(document.querySelector('[data-selected="false"]')).to.equal(null);
+        expect(document.querySelector('[data-disabled="false"]')).to.equal(null);
+    });
+
+    it('should omit disabled from an enabled clear action', () => {
+        const clear = container.querySelector('[data-cratis-part="clear"]');
+        expect(clear?.hasAttribute('data-disabled')).to.equal(false);
+    });
+
+    it('should expose invalid and disabled on the disabled control parts', async () => {
+        await act(async () => {
+            root.render(
+                <CratisComponentsProvider>
+                    <Dropdown
+                        value='one'
+                        options={options}
+                        showClear
+                        disabled
+                        invalid
+                        aria-label='Example choice'
+                    />
+                </CratisComponentsProvider>,
+            );
+        });
+
+        const rootPart = container.querySelector('[data-cratis-part="root"]');
+        const trigger = container.querySelector('[data-cratis-part="trigger"]');
+        const clear = container.querySelector('[data-cratis-part="clear"]');
+
+        expect(rootPart?.getAttribute('data-disabled')).to.equal('true');
+        expect(rootPart?.getAttribute('data-invalid')).to.equal('true');
+        expect(trigger?.getAttribute('data-disabled')).to.equal('true');
+        expect(trigger?.getAttribute('data-invalid')).to.equal('true');
+        expect(clear?.getAttribute('data-disabled')).to.equal('true');
+        expect(container.querySelector('[data-disabled="false"]')).to.equal(null);
+        expect(container.querySelector('[data-invalid="false"]')).to.equal(null);
+    });
+
+    it('should expose selected and disabled on native multiple options', async () => {
+        await act(async () => {
+            root.render(
+                <CratisComponentsProvider>
+                    <Dropdown
+                        multiple
+                        value={['one']}
+                        options={options}
+                        aria-label='Example choices'
+                    />
+                </CratisComponentsProvider>,
+            );
+        });
+
+        const multiple = container.querySelector('[data-cratis-part="multiple"]');
+        const renderedOptions = multiple?.querySelectorAll('option');
+
+        expect(multiple?.hasAttribute('data-disabled')).to.equal(false);
+        expect(renderedOptions?.[0].getAttribute('data-selected')).to.equal('true');
+        expect(renderedOptions?.[0].hasAttribute('data-disabled')).to.equal(false);
+        expect(renderedOptions?.[1].hasAttribute('data-selected')).to.equal(false);
+        expect(renderedOptions?.[1].getAttribute('data-disabled')).to.equal('true');
+    });
+});
diff --git a/Source/Notifications/Toaster.tsx b/Source/Notifications/Toaster.tsx
index 22f03457..271ddaa9 100644
--- a/Source/Notifications/Toaster.tsx
+++ b/Source/Notifications/Toaster.tsx
@@ -49,7 +49,10 @@ export interface ToasterPassThrough {
     action?: ButtonHTMLAttributes<HTMLButtonElement>;
 }
 
-const toasterPartsMatchManifest: ExactPartKeys<ToasterPassThrough, PartsOf<'Toaster'>> = true;
+const toasterPartsMatchManifest: ExactPartKeys<
+    ToasterPassThrough,
+    PartsOf<'Toaster'>
+> = true;
 void toasterPartsMatchManifest;
 
 /** Props for the global accessible toast region. */
@@ -152,6 +155,7 @@ const ToastFrame = ({ item, timeout, dismissAriaLabel, pt }: ToastFrameProps) =>
             data-cratis-part='toast'
             data-severity={severity}
             data-loading={item.loading || undefined}
+            data-busy={item.loading || undefined}
             role={severity === 'error' ? 'alert' : 'status'}
             onMouseEnter={() => setPaused(true)}
             onMouseLeave={() => setPaused(false)}
@@ -172,6 +176,8 @@ const ToastFrame = ({ item, timeout, dismissAriaLabel, pt }: ToastFrameProps) =>
                 {...pt?.content}
                 className={classNames('cratis-toast__content', pt?.content?.className)}
                 data-cratis-part='content'
+                data-loading={item.loading || undefined}
+                data-busy={item.loading || undefined}
             >
                 {content}
             </div>
diff --git a/Source/Notifications/for_Toaster/when_exposing_loading_state.tsx b/Source/Notifications/for_Toaster/when_exposing_loading_state.tsx
new file mode 100644
index 00000000..0ead10d4
--- /dev/null
+++ b/Source/Notifications/for_Toaster/when_exposing_loading_state.tsx
@@ -0,0 +1,52 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { expect } from 'chai';
+import { act } from 'react';
+import { afterEach, beforeEach, describe, it } from 'vitest';
+import { toast, type ToastId } from '../toast';
+import { type ToasterInTheDom, renderToaster, unmountToaster } from './given/a_toaster';
+
+describe('when exposing toast loading state', () => {
+    let toaster: ToasterInTheDom;
+    let toastId: ToastId = 0;
+
+    beforeEach(async () => {
+        toaster = await renderToaster();
+        await act(async () => {
+            toastId = toast.info({ title: 'Example work', loading: true });
+        });
+    });
+
+    afterEach(async () => {
+        await unmountToaster(toaster);
+    });
+
+    it('should expose loading and busy on the toast and content parts', () => {
+        const toastPart = document.querySelector('[data-cratis-part="toast"]');
+        const content = document.querySelector('[data-cratis-part="content"]');
+
+        expect(toastPart?.getAttribute('data-loading')).to.equal('true');
+        expect(toastPart?.getAttribute('data-busy')).to.equal('true');
+        expect(content?.getAttribute('data-loading')).to.equal('true');
+        expect(content?.getAttribute('data-busy')).to.equal('true');
+        expect(document.querySelector('[data-loading="false"]')).to.equal(null);
+        expect(document.querySelector('[data-busy="false"]')).to.equal(null);
+    });
+
+    it('should remove loading and busy when the toast settles', async () => {
+        await act(async () => {
+            toast.update(toastId, { loading: false });
+        });
+
+        const toastPart = document.querySelector('[data-cratis-part="toast"]');
+        const content = document.querySelector('[data-cratis-part="content"]');
+
+        expect(toastPart?.hasAttribute('data-loading')).to.equal(false);
+        expect(toastPart?.hasAttribute('data-busy')).to.equal(false);
+        expect(content?.hasAttribute('data-loading')).to.equal(false);
+        expect(content?.hasAttribute('data-busy')).to.equal(false);
+    });
+});

From 74653ab0cddb1e25a9da360db92b582763bdf714 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 17:33:29 +0200
Subject: [PATCH 150/267] pi-agent: Add data-view state attributes

---
 Source/DataTables/ColumnFilterMenu.tsx        |  19 ++-
 Source/DataTables/DataTableCore.tsx           |   4 +
 .../when_rendering_state_attributes.tsx       |  98 +++++++++++++
 .../when_rendering_state_attributes.tsx       | 114 +++++++++++++++
 .../when_rendering_state_attributes.tsx       |  41 ++++++
 Source/Filter/FilterPanel.tsx                 |  21 ++-
 Source/Filter/RangeHistogramFilter.tsx        |  20 ++-
 .../when_rendering_state_attributes.tsx       | 130 +++++++++++++++++
 .../when_rendering_state_attributes.tsx       | 111 +++++++++++++++
 Source/TimeMachine/EventsView.tsx             |  20 ++-
 Source/TimeMachine/ReadModelView.tsx          |   4 +
 Source/TimeMachine/TimeMachine.tsx            |  24 +++-
 .../when_rendering_state_attributes.tsx       | 134 ++++++++++++++++++
 13 files changed, 725 insertions(+), 15 deletions(-)
 create mode 100644 Source/DataTables/for_ColumnFilterMenu/when_rendering_state_attributes.tsx
 create mode 100644 Source/DataTables/for_DataTableCore/when_rendering_state_attributes.tsx
 create mode 100644 Source/DataTables/for_TablePaginator/when_rendering_state_attributes.tsx
 create mode 100644 Source/Filter/for_FilterPanel/when_rendering_state_attributes.tsx
 create mode 100644 Source/Filter/for_RangeHistogramFilter/when_rendering_state_attributes.tsx
 create mode 100644 Source/TimeMachine/for_TimeMachine/when_rendering_state_attributes.tsx

diff --git a/Source/DataTables/ColumnFilterMenu.tsx b/Source/DataTables/ColumnFilterMenu.tsx
index 766d83cd..dfcc33a6 100644
--- a/Source/DataTables/ColumnFilterMenu.tsx
+++ b/Source/DataTables/ColumnFilterMenu.tsx
@@ -199,6 +199,7 @@ export const ColumnFilterMenu = ({
     const [draftMode, setDraftMode] = useState<FilterMatchMode>(
         constraint?.matchMode ?? defaultModeFor(dataType),
     );
+    const [isOpen, setIsOpen] = useState(false);
 
     useEffect(() => {
         setDraftValue(constraint?.value ?? null);
@@ -240,6 +241,11 @@ export const ColumnFilterMenu = ({
         });
     }
 
+    const hasConstraint =
+        constraint?.value !== null &&
+        constraint?.value !== undefined &&
+        constraint?.value !== '';
+
     const clear = (event?: SyntheticEvent) => {
         setDraftValue(null);
         onClear();
@@ -328,7 +334,7 @@ export const ColumnFilterMenu = ({
           })();
 
     return (
-        <DialogTrigger>
+        <DialogTrigger isOpen={isOpen} onOpenChange={setIsOpen}>
             <AriaButton
                 {...asReactAriaButtonProps(pt?.trigger)}
                 aria-label={resolvedLabels.filterTriggerAriaLabel(field)}
@@ -336,12 +342,9 @@ export const ColumnFilterMenu = ({
                     'cratis-filter-trigger',
                     pt?.trigger?.className,
                 )}
-                data-active={
-                    (constraint?.value !== null &&
-                        constraint?.value !== undefined &&
-                        constraint?.value !== '') ||
-                    undefined
-                }
+                data-active={hasConstraint || undefined}
+                data-selected={hasConstraint || undefined}
+                data-open={isOpen || undefined}
                 data-cratis-part='filter-trigger'
             >
                 <span aria-hidden='true'>⌕</span>
@@ -353,12 +356,14 @@ export const ColumnFilterMenu = ({
                     pt?.popover?.className,
                 )}
                 data-cratis-part='filter-popover'
+                data-open={isOpen || undefined}
                 placement='bottom end'
             >
                 <AriaDialog
                     {...pt?.menu}
                     className={classNames('cratis-filter-menu', pt?.menu?.className)}
                     data-cratis-part='filter-menu'
+                    data-open={isOpen || undefined}
                     aria-label={resolvedLabels.filterTriggerAriaLabel(field)}
                 >
                     {showMatchModes && (
diff --git a/Source/DataTables/DataTableCore.tsx b/Source/DataTables/DataTableCore.tsx
index 6186670e..122cbe78 100644
--- a/Source/DataTables/DataTableCore.tsx
+++ b/Source/DataTables/DataTableCore.tsx
@@ -469,10 +469,12 @@ export const DataTableCore = <TData extends object>({
                                             column.props.headerClassName,
                                         )}
                                         data-cratis-part='header-cell'
+                                        data-selected={Boolean(ariaSort) || undefined}
                                     >
                                         <div
                                             className='cratis-datatable-header-cell'
                                             data-cratis-part='header-content'
+                                            data-selected={Boolean(ariaSort) || undefined}
                                         >
                                             {column.props.selectionMode && (
                                                 <span className='cratis-datatable__sr-only'>
@@ -485,6 +487,7 @@ export const DataTableCore = <TData extends object>({
                                                     type='button'
                                                     className='cratis-datatable__sort'
                                                     data-cratis-part='sort'
+                                                    data-pressed={Boolean(ariaSort) || undefined}
                                                     onClick={() =>
                                                         setSort((current) => ({
                                                             field: column.props
@@ -632,6 +635,7 @@ export const DataTableCore = <TData extends object>({
                                                         column.props.className,
                                                 )}
                                                 data-cratis-part='cell'
+                                                data-selected={isSelected || undefined}
                                             >
                                                 {column.props.selectionMode ? (
                                                     <input
diff --git a/Source/DataTables/for_ColumnFilterMenu/when_rendering_state_attributes.tsx b/Source/DataTables/for_ColumnFilterMenu/when_rendering_state_attributes.tsx
new file mode 100644
index 00000000..7bc2b06d
--- /dev/null
+++ b/Source/DataTables/for_ColumnFilterMenu/when_rendering_state_attributes.tsx
@@ -0,0 +1,98 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { act } from 'react';
+import { expect } from 'chai';
+import { afterEach, beforeEach, describe, it } from 'vitest';
+import { DataTableFilterMatchMode } from '../DataTableFilterMeta';
+import {
+    type FilterableTableInTheDom,
+    openFilterMenu,
+    renderFilterableTable,
+    unmountFilterableTable,
+} from './given/a_filterable_table';
+
+describe('when rendering ColumnFilterMenu state attributes', () => {
+    let table: FilterableTableInTheDom;
+
+    afterEach(async () => {
+        await unmountFilterableTable(table);
+    });
+
+    describe('without an applied constraint', () => {
+        beforeEach(async () => {
+            table = await renderFilterableTable();
+        });
+
+        it('should omit inactive trigger states', () => {
+            expect(table.trigger.hasAttribute('data-active')).to.equal(false);
+            expect(table.trigger.hasAttribute('data-selected')).to.equal(false);
+            expect(table.trigger.hasAttribute('data-open')).to.equal(false);
+            expect(table.trigger.hasAttribute('data-pressed')).to.equal(false);
+            expect(table.trigger.hasAttribute('data-invalid')).to.equal(false);
+        });
+
+        it('should expose pressed state while the trigger is pressed', async () => {
+            await act(async () => {
+                table.trigger.dispatchEvent(
+                    new MouseEvent('mousedown', { bubbles: true, buttons: 1 }),
+                );
+            });
+
+            expect(table.trigger.getAttribute('data-pressed')).to.equal('true');
+
+            await act(async () => {
+                document.dispatchEvent(
+                    new MouseEvent('mouseup', { bubbles: true, buttons: 0 }),
+                );
+            });
+        });
+
+        it('should expose open state on the trigger, popover, and menu', async () => {
+            const menu = await openFilterMenu(table);
+            const popover = document.querySelector('[data-cratis-part="filter-popover"]');
+
+            expect(table.trigger.getAttribute('data-open')).to.equal('true');
+            expect(popover?.getAttribute('data-open')).to.equal('true');
+            expect(menu.getAttribute('data-open')).to.equal('true');
+        });
+
+        it('should omit invalid state when no validation state is known', async () => {
+            const menu = await openFilterMenu(table);
+            const popover = document.querySelector('[data-cratis-part="filter-popover"]');
+
+            expect(table.trigger.hasAttribute('data-invalid')).to.equal(false);
+            expect(popover?.hasAttribute('data-invalid')).to.equal(false);
+            expect(menu.hasAttribute('data-invalid')).to.equal(false);
+        });
+    });
+
+    describe('with an applied constraint', () => {
+        beforeEach(async () => {
+            table = await renderFilterableTable({
+                defaultFilters: {
+                    status: {
+                        value: true,
+                        matchMode: DataTableFilterMatchMode.Equals,
+                    },
+                },
+            });
+        });
+
+        it('should preserve active and expose selected trigger state', () => {
+            expect(table.trigger.getAttribute('data-active')).to.equal('true');
+            expect(table.trigger.getAttribute('data-selected')).to.equal('true');
+        });
+
+        it('should never serialize false state attributes', async () => {
+            await openFilterMenu(table);
+
+            expect(document.querySelector('[data-open="false"]')).to.equal(null);
+            expect(document.querySelector('[data-selected="false"]')).to.equal(null);
+            expect(document.querySelector('[data-pressed="false"]')).to.equal(null);
+            expect(document.querySelector('[data-invalid="false"]')).to.equal(null);
+        });
+    });
+});
diff --git a/Source/DataTables/for_DataTableCore/when_rendering_state_attributes.tsx b/Source/DataTables/for_DataTableCore/when_rendering_state_attributes.tsx
new file mode 100644
index 00000000..957e4558
--- /dev/null
+++ b/Source/DataTables/for_DataTableCore/when_rendering_state_attributes.tsx
@@ -0,0 +1,114 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { expect } from 'chai';
+import { afterEach, beforeEach, describe, it } from 'vitest';
+import { Column } from '../Column';
+import { DataTableCore } from '../DataTableCore';
+
+interface Row {
+    id: number;
+    name: string;
+}
+
+const selectedRow: Row = { id: 1, name: 'Selected row' };
+const otherRow: Row = { id: 2, name: 'Other row' };
+
+describe('when rendering DataTable state attributes', () => {
+    let container: HTMLDivElement;
+    let root: Root;
+
+    beforeEach(async () => {
+        (
+            globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
+        ).IS_REACT_ACT_ENVIRONMENT = true;
+        container = document.createElement('div');
+        document.body.append(container);
+        root = createRoot(container);
+
+        await act(async () => {
+            root.render(
+                <DataTableCore
+                    data={[selectedRow, otherRow]}
+                    dataKey='id'
+                    emptyMessage='No rows'
+                    selectionMode='single'
+                    selection={selectedRow}
+                >
+                    <Column<Row> selectionMode='single' />
+                    <Column<Row> field='name' header='Name' sortable />
+                </DataTableCore>,
+            );
+        });
+    });
+
+    afterEach(async () => {
+        await act(async () => root.unmount());
+        container.remove();
+    });
+
+    const rows = () =>
+        Array.from(
+            container.querySelectorAll<HTMLTableRowElement>(
+                '[data-cratis-part="row"]',
+            ),
+        );
+
+    it('should expose selection on the selected row and all of its cells', () => {
+        const [selected, unselected] = rows();
+
+        expect(selected.getAttribute('data-selected')).to.equal('true');
+        for (const cell of selected.querySelectorAll('[data-cratis-part="cell"]')) {
+            expect(cell.getAttribute('data-selected')).to.equal('true');
+        }
+        expect(unselected.hasAttribute('data-selected')).to.equal(false);
+        for (const cell of unselected.querySelectorAll('[data-cratis-part="cell"]')) {
+            expect(cell.hasAttribute('data-selected')).to.equal(false);
+        }
+    });
+
+    it('should omit unknown pressed and disabled row and cell states', () => {
+        for (const element of container.querySelectorAll(
+            '[data-cratis-part="row"], [data-cratis-part="cell"]',
+        )) {
+            expect(element.hasAttribute('data-pressed')).to.equal(false);
+            expect(element.hasAttribute('data-disabled')).to.equal(false);
+        }
+    });
+
+    it('should omit sort selection before a column is sorted', () => {
+        const sort = container.querySelector<HTMLButtonElement>(
+            '[data-cratis-part="sort"]',
+        )!;
+        const header = sort.closest('[data-cratis-part="header-cell"]')!;
+        const content = sort.closest('[data-cratis-part="header-content"]')!;
+
+        expect(sort.hasAttribute('data-pressed')).to.equal(false);
+        expect(header.hasAttribute('data-selected')).to.equal(false);
+        expect(content.hasAttribute('data-selected')).to.equal(false);
+    });
+
+    it('should expose the selected header and pressed sort control after sorting', async () => {
+        const sort = container.querySelector<HTMLButtonElement>(
+            '[data-cratis-part="sort"]',
+        )!;
+
+        await act(async () => sort.click());
+
+        const header = sort.closest('[data-cratis-part="header-cell"]')!;
+        const content = sort.closest('[data-cratis-part="header-content"]')!;
+        expect(sort.getAttribute('data-pressed')).to.equal('true');
+        expect(header.getAttribute('data-selected')).to.equal('true');
+        expect(content.getAttribute('data-selected')).to.equal('true');
+    });
+
+    it('should never serialize false state attributes', () => {
+        expect(container.querySelector('[data-selected="false"]')).to.equal(null);
+        expect(container.querySelector('[data-pressed="false"]')).to.equal(null);
+        expect(container.querySelector('[data-disabled="false"]')).to.equal(null);
+    });
+});
diff --git a/Source/DataTables/for_TablePaginator/when_rendering_state_attributes.tsx b/Source/DataTables/for_TablePaginator/when_rendering_state_attributes.tsx
new file mode 100644
index 00000000..ad230c7a
--- /dev/null
+++ b/Source/DataTables/for_TablePaginator/when_rendering_state_attributes.tsx
@@ -0,0 +1,41 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { expect } from 'chai';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, it } from 'vitest';
+import { TablePaginator } from '../TablePaginator';
+
+describe('when rendering TablePaginator state attributes', () => {
+    it('should expose disabled state only on unavailable first-page controls', () => {
+        const html = renderToStaticMarkup(
+            <TablePaginator page={0} pageCount={3} onPageChange={() => undefined} />,
+        );
+
+        const container = document.createElement('div');
+        container.innerHTML = html;
+        const buttons = Array.from(container.querySelectorAll('button'));
+        expect(buttons[0].getAttribute('data-disabled')).to.equal('true');
+        expect(buttons[1].getAttribute('data-disabled')).to.equal('true');
+        expect(buttons[2].hasAttribute('data-disabled')).to.equal(false);
+        expect(buttons[3].hasAttribute('data-disabled')).to.equal(false);
+    });
+
+    it('should omit disabled state from all controls on a middle page', () => {
+        const html = renderToStaticMarkup(
+            <TablePaginator page={1} pageCount={3} onPageChange={() => undefined} />,
+        );
+
+        expect(html).not.to.contain('data-disabled=');
+    });
+
+    it('should never serialize false disabled state', () => {
+        const html = renderToStaticMarkup(
+            <TablePaginator page={0} pageCount={3} onPageChange={() => undefined} />,
+        );
+
+        expect(html).not.to.contain('data-disabled="false"');
+    });
+});
diff --git a/Source/Filter/FilterPanel.tsx b/Source/Filter/FilterPanel.tsx
index a26acb73..74dccb46 100644
--- a/Source/Filter/FilterPanel.tsx
+++ b/Source/Filter/FilterPanel.tsx
@@ -192,10 +192,14 @@ function OptionList({
                     const optionKey = option.key;
                     const checked = selections.has(optionKey);
                     return (
-                        <li key={option.key}>
-                            <label>
+                        <li
+                            key={option.key}
+                            data-selected={checked || undefined}
+                        >
+                            <label data-selected={checked || undefined}>
                                 <input
                                     type={filter.multi ? 'checkbox' : 'radio'}
+                                    data-selected={checked || undefined}
                                     name={`filter-${filter.key}`}
                                     checked={checked}
                                     onChange={() =>
@@ -316,6 +320,7 @@ export function FilterPanel({
                     animate={{ opacity: 1, y: 0 }}
                     exit={{ opacity: 0, y: -8 }}
                     transition={{ duration: 0.15 }}
+                    data-open={isOpen || undefined}
                 >
                     <div className='pv-filter-dropdown-content'>
                         {onSearchChange && (
@@ -367,12 +372,21 @@ export function FilterPanel({
                                     <div
                                         key={filter.key}
                                         className={`pv-filter ${isExpanded ? 'expanded' : ''}`}
+                                        data-selected={canClear || undefined}
+                                        data-open={isExpanded || undefined}
                                     >
-                                        <div className='pv-filter-trigger'>
+                                        <div
+                                            className='pv-filter-trigger'
+                                            data-selected={canClear || undefined}
+                                            data-open={isExpanded || undefined}
+                                        >
                                             <button
                                                 type='button'
                                                 className='pv-filter-toggle'
                                                 aria-expanded={isExpanded}
+                                                data-selected={canClear || undefined}
+                                                data-open={isExpanded || undefined}
+                                                data-pressed={isExpanded || undefined}
                                                 onClick={() =>
                                                     onExpandedFilterChange(
                                                         isExpanded ? null : filter.key,
@@ -417,6 +431,7 @@ export function FilterPanel({
                                         </div>
                                         <div
                                             className={`pv-filter-content ${isExpanded ? 'expanded' : ''}`}
+                                            data-open={isExpanded || undefined}
                                         >
                                             {isCustom && editorRender ? (
                                                 editorRender({
diff --git a/Source/Filter/RangeHistogramFilter.tsx b/Source/Filter/RangeHistogramFilter.tsx
index bc7cf3e4..f47e4f71 100644
--- a/Source/Filter/RangeHistogramFilter.tsx
+++ b/Source/Filter/RangeHistogramFilter.tsx
@@ -248,7 +248,11 @@ export function RangeHistogramFilter({
     const rightPos = getPositionFromValue(currentRange[1]);
 
     return (
-        <div className='pv-range-histogram' ref={containerRef}>
+        <div
+            className='pv-range-histogram'
+            ref={containerRef}
+            data-selected={selectedRange !== null || undefined}
+        >
             <div className='pv-histogram-bars'>
                 {histogram.map((bucket, i) => {
                     const heightPercent = (bucket.count / bucket.maxCount) * 100;
@@ -256,6 +260,8 @@ export function RangeHistogramFilter({
                         bucket.start >= currentRange[0] && bucket.end <= currentRange[1];
                     const isPartiallyInRange =
                         bucket.end > currentRange[0] && bucket.start < currentRange[1];
+                    const isSelected =
+                        selectedRange !== null && isPartiallyInRange;
 
                     return (
                         <button
@@ -265,12 +271,16 @@ export function RangeHistogramFilter({
                             onClick={(event) => handleBarClick(bucket, event)}
                             title={`${formatValue(bucket.start)} - ${formatValue(bucket.end)}: ${bucket.count} ${itemsLabel}`}
                             type='button'
+                            data-selected={isSelected || undefined}
                         />
                     );
                 })}
             </div>
 
-            <div className='pv-range-slider'>
+            <div
+                className='pv-range-slider'
+                data-selected={selectedRange !== null || undefined}
+            >
                 <div className='pv-range-track' />
                 <div
                     className='pv-range-selection'
@@ -278,6 +288,8 @@ export function RangeHistogramFilter({
                         left: `${leftPos}%`,
                         width: `${rightPos - leftPos}%`,
                     }}
+                    data-selected={selectedRange !== null || undefined}
+                    data-pressed={isDragging === 'range' || undefined}
                     onMouseDown={(e) => handleMouseDown(e, 'range')}
                 />
                 <div
@@ -290,6 +302,8 @@ export function RangeHistogramFilter({
                     aria-valuemax={currentRange[1] - minimumGap}
                     aria-valuenow={currentRange[0]}
                     aria-valuetext={formatValue(currentRange[0])}
+                    data-selected={selectedRange !== null || undefined}
+                    data-pressed={isDragging === 'left' || undefined}
                     onMouseDown={(e) => handleMouseDown(e, 'left')}
                     onKeyDown={(event) => handleHandleKeyDown(event, 'left')}
                 />
@@ -303,6 +317,8 @@ export function RangeHistogramFilter({
                     aria-valuemax={max}
                     aria-valuenow={currentRange[1]}
                     aria-valuetext={formatValue(currentRange[1])}
+                    data-selected={selectedRange !== null || undefined}
+                    data-pressed={isDragging === 'right' || undefined}
                     onMouseDown={(e) => handleMouseDown(e, 'right')}
                     onKeyDown={(event) => handleHandleKeyDown(event, 'right')}
                 />
diff --git a/Source/Filter/for_FilterPanel/when_rendering_state_attributes.tsx b/Source/Filter/for_FilterPanel/when_rendering_state_attributes.tsx
new file mode 100644
index 00000000..09d5aa8b
--- /dev/null
+++ b/Source/Filter/for_FilterPanel/when_rendering_state_attributes.tsx
@@ -0,0 +1,130 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { act, createRef } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { expect } from 'chai';
+import { afterEach, beforeEach, describe, it } from 'vitest';
+import { FilterPanel } from '../FilterPanel';
+import type { FilterDefinition } from '../types';
+
+const filters: FilterDefinition[] = [
+    {
+        key: 'status',
+        label: 'Status',
+        type: 'string',
+        multi: true,
+        options: [
+            { key: 'active', label: 'Active', value: 'active' },
+            { key: 'inactive', label: 'Inactive', value: 'inactive' },
+        ],
+    },
+    {
+        key: 'amount',
+        label: 'Amount',
+        type: 'number',
+        numericRange: { min: 0, max: 10, values: [1, 2, 3] },
+    },
+];
+
+describe('when rendering FilterPanel state attributes', () => {
+    let container: HTMLDivElement;
+    let root: Root;
+
+    beforeEach(async () => {
+        (
+            globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
+        ).IS_REACT_ACT_ENVIRONMENT = true;
+        container = document.createElement('div');
+        document.body.append(container);
+        root = createRoot(container);
+        const anchorRef = createRef<HTMLButtonElement>();
+
+        await act(async () => {
+            root.render(
+                <FilterPanel
+                    isOpen
+                    filters={filters}
+                    filterValues={{ status: new Set(['active']) }}
+                    rangeValues={{}}
+                    expandedFilterKey='status'
+                    anchorRef={anchorRef}
+                    onClose={() => undefined}
+                    onFilterToggle={() => undefined}
+                    onFilterClear={() => undefined}
+                    onRangeChange={() => undefined}
+                    onExpandedFilterChange={() => undefined}
+                />,
+            );
+        });
+    });
+
+    afterEach(async () => {
+        await act(async () => root.unmount());
+        container.remove();
+    });
+
+    it('should expose the open panel state', () => {
+        const panel = document.querySelector('.pv-filter-dropdown');
+
+        expect(panel?.getAttribute('data-open')).to.equal('true');
+    });
+
+    it('should expose selected and open state on the expanded selected group', () => {
+        const group = document.querySelectorAll('.pv-filter')[0];
+        const trigger = group.querySelector('.pv-filter-trigger');
+        const toggle = group.querySelector('.pv-filter-toggle');
+        const content = group.querySelector('.pv-filter-content');
+
+        expect(group.getAttribute('data-selected')).to.equal('true');
+        expect(group.getAttribute('data-open')).to.equal('true');
+        expect(trigger?.getAttribute('data-selected')).to.equal('true');
+        expect(trigger?.getAttribute('data-open')).to.equal('true');
+        expect(toggle?.getAttribute('data-selected')).to.equal('true');
+        expect(toggle?.getAttribute('data-open')).to.equal('true');
+        expect(toggle?.getAttribute('data-pressed')).to.equal('true');
+        expect(content?.getAttribute('data-open')).to.equal('true');
+    });
+
+    it('should expose selected state only on the selected option', () => {
+        const options = document.querySelectorAll('.pv-filter li');
+        const selected = options[0];
+        const unselected = options[1];
+
+        expect(selected.getAttribute('data-selected')).to.equal('true');
+        expect(selected.querySelector('label')?.getAttribute('data-selected')).to.equal(
+            'true',
+        );
+        expect(selected.querySelector('input')?.getAttribute('data-selected')).to.equal(
+            'true',
+        );
+        expect(unselected.hasAttribute('data-selected')).to.equal(false);
+        expect(unselected.querySelector('label')?.hasAttribute('data-selected')).to.equal(
+            false,
+        );
+        expect(unselected.querySelector('input')?.hasAttribute('data-selected')).to.equal(
+            false,
+        );
+    });
+
+    it('should omit selected, open, and pressed state from the inactive group', () => {
+        const group = document.querySelectorAll('.pv-filter')[1];
+        const toggle = group.querySelector('.pv-filter-toggle');
+        const content = group.querySelector('.pv-filter-content');
+
+        expect(group.hasAttribute('data-selected')).to.equal(false);
+        expect(group.hasAttribute('data-open')).to.equal(false);
+        expect(toggle?.hasAttribute('data-selected')).to.equal(false);
+        expect(toggle?.hasAttribute('data-open')).to.equal(false);
+        expect(toggle?.hasAttribute('data-pressed')).to.equal(false);
+        expect(content?.hasAttribute('data-open')).to.equal(false);
+    });
+
+    it('should never serialize false state attributes', () => {
+        expect(document.querySelector('[data-selected="false"]')).to.equal(null);
+        expect(document.querySelector('[data-open="false"]')).to.equal(null);
+        expect(document.querySelector('[data-pressed="false"]')).to.equal(null);
+    });
+});
diff --git a/Source/Filter/for_RangeHistogramFilter/when_rendering_state_attributes.tsx b/Source/Filter/for_RangeHistogramFilter/when_rendering_state_attributes.tsx
new file mode 100644
index 00000000..ab80f69d
--- /dev/null
+++ b/Source/Filter/for_RangeHistogramFilter/when_rendering_state_attributes.tsx
@@ -0,0 +1,111 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { expect } from 'chai';
+import { afterEach, beforeEach, describe, it } from 'vitest';
+import { RangeHistogramFilter } from '../RangeHistogramFilter';
+
+describe('when rendering RangeHistogramFilter state attributes', () => {
+    let container: HTMLDivElement;
+    let root: Root;
+
+    beforeEach(async () => {
+        (
+            globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
+        ).IS_REACT_ACT_ENVIRONMENT = true;
+        container = document.createElement('div');
+        document.body.append(container);
+        root = createRoot(container);
+        await render([20, 40]);
+    });
+
+    afterEach(async () => {
+        await act(async () => root.unmount());
+        container.remove();
+    });
+
+    const render = async (selectedRange: [number, number] | null) => {
+        await act(async () => {
+            root.render(
+                <RangeHistogramFilter
+                    values={[10, 20, 30, 40, 50, 60, 70, 80, 90]}
+                    min={0}
+                    max={100}
+                    buckets={10}
+                    selectedRange={selectedRange}
+                    onChange={() => undefined}
+                />,
+            );
+        });
+    };
+
+    it('should expose selected state on the range and its endpoints', () => {
+        const histogram = container.querySelector('.pv-range-histogram');
+        const slider = container.querySelector('.pv-range-slider');
+        const selection = container.querySelector('.pv-range-selection');
+        const handles = container.querySelectorAll('.pv-range-handle');
+
+        expect(histogram?.getAttribute('data-selected')).to.equal('true');
+        expect(slider?.getAttribute('data-selected')).to.equal('true');
+        expect(selection?.getAttribute('data-selected')).to.equal('true');
+        expect(handles[0].getAttribute('data-selected')).to.equal('true');
+        expect(handles[1].getAttribute('data-selected')).to.equal('true');
+    });
+
+    it('should expose selected state only on intersecting histogram bars', () => {
+        const bars = Array.from(
+            container.querySelectorAll<HTMLButtonElement>('.pv-histogram-bar'),
+        );
+        const selectedBars = bars.filter((bar) => bar.hasAttribute('data-selected'));
+        const unselectedBars = bars.filter((bar) => !bar.hasAttribute('data-selected'));
+
+        expect(selectedBars.length).to.be.greaterThan(0);
+        expect(unselectedBars.length).to.be.greaterThan(0);
+        for (const bar of selectedBars) {
+            expect(bar.getAttribute('data-selected')).to.equal('true');
+        }
+    });
+
+    it('should expose pressed state while a range handle is being dragged', async () => {
+        const minimum = container.querySelector<HTMLElement>(
+            '.pv-range-handle-left',
+        )!;
+
+        await act(async () => {
+            minimum.dispatchEvent(
+                new MouseEvent('mousedown', { bubbles: true, clientX: 20 }),
+            );
+        });
+
+        expect(minimum.getAttribute('data-pressed')).to.equal('true');
+        expect(
+            container
+                .querySelector('.pv-range-handle-right')
+                ?.hasAttribute('data-pressed'),
+        ).to.equal(false);
+
+        await act(async () => {
+            document.dispatchEvent(new MouseEvent('mouseup', { bubbles: true }));
+        });
+    });
+
+    it('should omit selection when no range is selected', async () => {
+        await render(null);
+
+        expect(container.querySelector('[data-selected]')).to.equal(null);
+    });
+
+    it('should omit disabled state because every rendered range control is enabled', () => {
+        expect(container.querySelector('[data-disabled]')).to.equal(null);
+    });
+
+    it('should never serialize false state attributes', () => {
+        expect(container.querySelector('[data-selected="false"]')).to.equal(null);
+        expect(container.querySelector('[data-pressed="false"]')).to.equal(null);
+        expect(container.querySelector('[data-disabled="false"]')).to.equal(null);
+    });
+});
diff --git a/Source/TimeMachine/EventsView.tsx b/Source/TimeMachine/EventsView.tsx
index e60d4ba9..e09f638e 100644
--- a/Source/TimeMachine/EventsView.tsx
+++ b/Source/TimeMachine/EventsView.tsx
@@ -1,7 +1,14 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { useEffect, useRef, useState, type HTMLAttributes } from 'react';
+import {
+    createContext,
+    useContext,
+    useEffect,
+    useRef,
+    useState,
+    type HTMLAttributes,
+} from 'react';
 import type { Event } from './types';
 import { type TimeMachineLabels, defaultTimeMachineLabels } from './TimeMachineLabels';
 import { Properties } from './Properties';
@@ -50,6 +57,9 @@ export interface EventsViewProps {
 const classNames = (...values: Array<string | undefined>) =>
     values.filter(Boolean).join(' ');
 
+export const SelectedEventSequenceNumbersContext =
+    createContext<ReadonlySet<number> | undefined>(undefined);
+
 /** Vertical, alternating timeline visualization of an ordered event list. */
 export const EventsView = ({
     events,
@@ -58,6 +68,9 @@ export const EventsView = ({
     labels = defaultTimeMachineLabels,
 }: EventsViewProps) => {
     const containerRef = useRef<HTMLDivElement>(null);
+    const selectedEventSequenceNumbers = useContext(
+        SelectedEventSequenceNumbersContext,
+    );
     const [canScrollUp, setCanScrollUp] = useState(false);
     const [canScrollDown, setCanScrollDown] = useState(false);
 
@@ -119,6 +132,9 @@ export const EventsView = ({
             >
                 {events.map((event, index) => {
                     const position = index % 2 === 0 ? 'right' : 'left';
+                    const isSelected = selectedEventSequenceNumbers?.has(
+                        event.sequenceNumber,
+                    );
                     return (
                         <article
                             {...pt?.event}
@@ -129,6 +145,7 @@ export const EventsView = ({
                             )}
                             data-cratis-part='event'
                             data-position={position}
+                            data-selected={isSelected || undefined}
                         >
                             <div
                                 {...pt?.separator}
@@ -145,6 +162,7 @@ export const EventsView = ({
                                         pt?.marker?.className,
                                     )}
                                     data-cratis-part='marker'
+                                    data-selected={isSelected || undefined}
                                 >
                                     <div className='events-view-marker-dot' />
                                 </div>
diff --git a/Source/TimeMachine/ReadModelView.tsx b/Source/TimeMachine/ReadModelView.tsx
index 8aa0d755..ce014541 100644
--- a/Source/TimeMachine/ReadModelView.tsx
+++ b/Source/TimeMachine/ReadModelView.tsx
@@ -82,6 +82,7 @@ export const ReadModelView: React.FC<ReadModelViewProps> = ({
                     {versions.map((version, index) => {
                         const depth = index - displayIndex;
                         const isActive = index === displayIndex;
+                        const isSelected = index === selectedIndex;
                         const isVisible = depth >= 0 && depth < 10;
                         const isFlipped = flippedMap[version.id] ?? false;
 
@@ -106,6 +107,7 @@ export const ReadModelView: React.FC<ReadModelViewProps> = ({
                                     '--opacity': 1 - depth * 0.12,
                                 } as React.CSSProperties}
                                 onClick={() => onVersionSelect(index)}
+                                data-selected={isSelected || undefined}
                                 onMouseEnter={() => onHoveringCardChange(true)}
                                 onMouseLeave={() => onHoveringCardChange(false)}
                             >
@@ -125,6 +127,7 @@ export const ReadModelView: React.FC<ReadModelViewProps> = ({
                                                     onClick={toggleFlip(version.id)}
                                                     aria-label={labels.showRelatedEvents}
                                                     aria-pressed={isFlipped}
+                                                    data-pressed={isFlipped || undefined}
                                                 >
                                                     {isFlipped ? (
                                                         <FaArrowRotateLeft aria-hidden='true' />
@@ -153,6 +156,7 @@ export const ReadModelView: React.FC<ReadModelViewProps> = ({
                                                     onClick={toggleFlip(version.id)}
                                                     aria-label={labels.showReadModelSnapshot}
                                                     aria-pressed={isFlipped}
+                                                    data-pressed={isFlipped || undefined}
                                                 >
                                                     {isFlipped ? (
                                                         <FaArrowRotateLeft aria-hidden='true' />
diff --git a/Source/TimeMachine/TimeMachine.tsx b/Source/TimeMachine/TimeMachine.tsx
index 340e654d..e8cd7432 100644
--- a/Source/TimeMachine/TimeMachine.tsx
+++ b/Source/TimeMachine/TimeMachine.tsx
@@ -5,7 +5,10 @@ import type React from 'react';
 import { useState, useCallback, useRef, useEffect } from 'react';
 import type { Version } from './types';
 import { ReadModelView } from './ReadModelView';
-import { EventsView } from './EventsView';
+import {
+    EventsView,
+    SelectedEventSequenceNumbersContext,
+} from './EventsView';
 import { type TimeMachineLabels, defaultTimeMachineLabels } from './TimeMachineLabels';
 import { FaBoxArchive, FaList } from 'react-icons/fa6';
 import { useLocale } from 'react-aria-components/I18nProvider';
@@ -132,6 +135,9 @@ export const TimeMachine: React.FC<TimeMachineProps> = ({
 
     // Get all events from all versions
     const allEvents = versions.flatMap((version) => version.events || []);
+    const selectedEventSequenceNumbers = new Set(
+        (versions[selectedIndex]?.events ?? []).map((event) => event.sequenceNumber),
+    );
 
     return (
         <div className='time-machine' ref={containerRef}>
@@ -143,6 +149,8 @@ export const TimeMachine: React.FC<TimeMachineProps> = ({
                     onClick={() => setViewMode(ViewModes.ReadModel)}
                     aria-label={l.readModelView}
                     title={l.readModelView}
+                    data-selected={viewMode === ViewModes.ReadModel || undefined}
+                    data-pressed={viewMode === ViewModes.ReadModel || undefined}
                 >
                     <FaBoxArchive aria-hidden='true' />
                 </button>
@@ -152,6 +160,8 @@ export const TimeMachine: React.FC<TimeMachineProps> = ({
                     onClick={() => setViewMode(ViewModes.Events)}
                     aria-label={l.eventsView}
                     title={l.eventsView}
+                    data-selected={viewMode === ViewModes.Events || undefined}
+                    data-pressed={viewMode === ViewModes.Events || undefined}
                 >
                     <FaList aria-hidden='true' />
                 </button>
@@ -168,7 +178,11 @@ export const TimeMachine: React.FC<TimeMachineProps> = ({
                     labels={l}
                 />
             ) : (
-                <EventsView events={allEvents} labels={l} />
+                <SelectedEventSequenceNumbersContext.Provider
+                    value={selectedEventSequenceNumbers}
+                >
+                    <EventsView events={allEvents} labels={l} />
+                </SelectedEventSequenceNumbersContext.Provider>
             )}
 
             {/* Timeline - only show in ReadModel view */}
@@ -193,6 +207,7 @@ export const TimeMachine: React.FC<TimeMachineProps> = ({
                             handleVersionSelect(Math.max(0, selectedIndex - 1))
                         }
                         aria-label={l.previousVersion}
+                        data-disabled={selectedIndex === 0 || undefined}
                     >
                         ‹
                     </button>
@@ -206,6 +221,9 @@ export const TimeMachine: React.FC<TimeMachineProps> = ({
                             )
                         }
                         aria-label={l.nextVersion}
+                        data-disabled={
+                            selectedIndex === versions.length - 1 || undefined
+                        }
                     >
                         ›
                     </button>
@@ -283,6 +301,8 @@ const Timeline: React.FC<TimelineProps> = ({
                             onClick={() => onSelect(index)}
                             aria-pressed={isSelected}
                             aria-label={`${formatDate(version.timestamp)} ${formatTime(version.timestamp)}`}
+                            data-selected={isSelected || undefined}
+                            data-pressed={isSelected || undefined}
                         >
                             <div className='timeline-tick'></div>
                             <div className='timeline-label'>
diff --git a/Source/TimeMachine/for_TimeMachine/when_rendering_state_attributes.tsx b/Source/TimeMachine/for_TimeMachine/when_rendering_state_attributes.tsx
new file mode 100644
index 00000000..cee56c80
--- /dev/null
+++ b/Source/TimeMachine/for_TimeMachine/when_rendering_state_attributes.tsx
@@ -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.
+
+// @vitest-environment jsdom
+
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { expect } from 'chai';
+import { afterEach, beforeEach, describe, it } from 'vitest';
+import { CratisComponentsProvider } from '../../Common/CratisComponentsProvider';
+import { TimeMachine } from '../TimeMachine';
+import type { Version } from '../types';
+
+const versions: Version[] = [
+    {
+        id: 'version-1',
+        timestamp: new Date('2024-01-02T13:45:00Z'),
+        label: 'Version 1',
+        content: <div>First state</div>,
+        events: [
+            {
+                sequenceNumber: 1,
+                type: 'SampleCreated',
+                occurred: new Date('2024-01-02T13:45:00Z'),
+                content: { name: 'Sample' },
+            },
+        ],
+    },
+    {
+        id: 'version-2',
+        timestamp: new Date('2024-01-03T13:45:00Z'),
+        label: 'Version 2',
+        content: <div>Second state</div>,
+        events: [
+            {
+                sequenceNumber: 2,
+                type: 'SampleRenamed',
+                occurred: new Date('2024-01-03T13:45:00Z'),
+                content: { name: 'Updated sample' },
+            },
+        ],
+    },
+];
+
+describe('when rendering TimeMachine state attributes', () => {
+    let container: HTMLDivElement;
+    let root: Root;
+
+    beforeEach(async () => {
+        (
+            globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
+        ).IS_REACT_ACT_ENVIRONMENT = true;
+        container = document.createElement('div');
+        document.body.append(container);
+        root = createRoot(container);
+
+        await act(async () => {
+            root.render(
+                <CratisComponentsProvider value={{ locale: 'en-US' }}>
+                    <TimeMachine versions={versions} />
+                </CratisComponentsProvider>,
+            );
+        });
+    });
+
+    afterEach(async () => {
+        await act(async () => root.unmount());
+        container.remove();
+    });
+
+    it('should expose selected and pressed state only on the active view', () => {
+        const views = container.querySelectorAll<HTMLButtonElement>('.view-button');
+
+        expect(views[0].getAttribute('data-selected')).to.equal('true');
+        expect(views[0].getAttribute('data-pressed')).to.equal('true');
+        expect(views[1].hasAttribute('data-selected')).to.equal(false);
+        expect(views[1].hasAttribute('data-pressed')).to.equal(false);
+    });
+
+    it('should expose selected and pressed state only on the selected timeline entry', () => {
+        const entries = container.querySelectorAll<HTMLButtonElement>('.timeline-entry');
+
+        expect(entries[0].getAttribute('data-selected')).to.equal('true');
+        expect(entries[0].getAttribute('data-pressed')).to.equal('true');
+        expect(entries[1].hasAttribute('data-selected')).to.equal(false);
+        expect(entries[1].hasAttribute('data-pressed')).to.equal(false);
+    });
+
+    it('should expose disabled state only on unavailable navigation', () => {
+        const previous = container.querySelector<HTMLButtonElement>('.nav-button.prev')!;
+        const next = container.querySelector<HTMLButtonElement>('.nav-button.next')!;
+
+        expect(previous.getAttribute('data-disabled')).to.equal('true');
+        expect(next.hasAttribute('data-disabled')).to.equal(false);
+    });
+
+    it('should expose pressed state while a version card is flipped', async () => {
+        const flip = container.querySelector<HTMLButtonElement>(
+            '.version-window[data-selected] .window-flip-button',
+        )!;
+        expect(flip.hasAttribute('data-pressed')).to.equal(false);
+
+        await act(async () => flip.click());
+
+        expect(flip.getAttribute('data-pressed')).to.equal('true');
+    });
+
+    it('should expose selected state on events and markers for the selected version', async () => {
+        const eventsView = container.querySelectorAll<HTMLButtonElement>('.view-button')[1];
+        await act(async () => eventsView.click());
+
+        const events = document.querySelectorAll<HTMLElement>(
+            '[data-cratis-part="event"]',
+        );
+        const markers = document.querySelectorAll<HTMLElement>(
+            '[data-cratis-part="marker"]',
+        );
+        expect(events[0].getAttribute('data-selected')).to.equal('true');
+        expect(markers[0].getAttribute('data-selected')).to.equal('true');
+        expect(events[1].hasAttribute('data-selected')).to.equal(false);
+        expect(markers[1].hasAttribute('data-selected')).to.equal(false);
+    });
+
+    it('should omit busy state because the TimeMachine has no asynchronous work', () => {
+        expect(container.querySelector('[data-busy]')).to.equal(null);
+    });
+
+    it('should never serialize false state attributes', () => {
+        expect(container.querySelector('[data-selected="false"]')).to.equal(null);
+        expect(container.querySelector('[data-pressed="false"]')).to.equal(null);
+        expect(container.querySelector('[data-disabled="false"]')).to.equal(null);
+        expect(container.querySelector('[data-busy="false"]')).to.equal(null);
+    });
+});

From 2fba3a90d046e7f5e6ddb1016d074c3d89b5d3f8 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 17:41:51 +0200
Subject: [PATCH 151/267] Fix ColumnFilter pressed interaction spec

---
 .../when_rendering_state_attributes.tsx          | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/Source/DataTables/for_ColumnFilterMenu/when_rendering_state_attributes.tsx b/Source/DataTables/for_ColumnFilterMenu/when_rendering_state_attributes.tsx
index 7bc2b06d..98cfdce0 100644
--- a/Source/DataTables/for_ColumnFilterMenu/when_rendering_state_attributes.tsx
+++ b/Source/DataTables/for_ColumnFilterMenu/when_rendering_state_attributes.tsx
@@ -37,7 +37,13 @@ describe('when rendering ColumnFilterMenu state attributes', () => {
         it('should expose pressed state while the trigger is pressed', async () => {
             await act(async () => {
                 table.trigger.dispatchEvent(
-                    new MouseEvent('mousedown', { bubbles: true, buttons: 1 }),
+                    new PointerEvent('pointerdown', {
+                        bubbles: true,
+                        button: 0,
+                        buttons: 1,
+                        pointerId: 1,
+                        pointerType: 'mouse',
+                    }),
                 );
             });
 
@@ -45,7 +51,13 @@ describe('when rendering ColumnFilterMenu state attributes', () => {
 
             await act(async () => {
                 document.dispatchEvent(
-                    new MouseEvent('mouseup', { bubbles: true, buttons: 0 }),
+                    new PointerEvent('pointerup', {
+                        bubbles: true,
+                        button: 0,
+                        buttons: 0,
+                        pointerId: 1,
+                        pointerType: 'mouse',
+                    }),
                 );
             });
         });

From 5eb299f4988b8e72ead9a221a093d4ebd8bfe7f2 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 17:33:46 +0200
Subject: [PATCH 152/267] pi-agent: Add CommandForm state attributes

---
 .../CommandDialog/CommandStepperContent.tsx   | 164 +++++++-----
 .../when_rendering_authoritative_states.tsx   | 172 ++++++++++++
 Source/CommandForm/fields/CheckboxField.tsx   |  11 +
 Source/CommandForm/fields/ChipsField.tsx      |   8 +
 .../CommandForm/fields/ColorPickerField.tsx   |   4 +
 Source/CommandForm/fields/InputTextField.tsx  |   2 +
 Source/CommandForm/fields/NumberField.tsx     |   5 +
 Source/CommandForm/fields/PasswordField.tsx   |   8 +
 .../CommandForm/fields/RadioButtonField.tsx   |  14 +-
 Source/CommandForm/fields/RadioGroupField.tsx |  17 +-
 Source/CommandForm/fields/RatingField.tsx     |  12 +-
 Source/CommandForm/fields/SliderField.tsx     |   5 +
 Source/CommandForm/fields/TextAreaField.tsx   |   2 +
 .../CommandForm/fields/ToggleSwitchField.tsx  |  11 +
 .../when_rendering_authoritative_states.tsx   | 251 ++++++++++++++++++
 .../when_rendering_authoritative_states.tsx   | 150 +++++++++++
 .../when_rendering_authoritative_states.tsx   | 154 +++++++++++
 17 files changed, 925 insertions(+), 65 deletions(-)
 create mode 100644 Source/CommandDialog/for_CommandStepper/when_rendering_authoritative_states.tsx
 create mode 100644 Source/CommandForm/for_field_states/when_rendering_authoritative_states.tsx
 create mode 100644 Source/Common/for_DatePickerInput/when_rendering_authoritative_states.tsx
 create mode 100644 Source/Dropdown/for_Dropdown/when_rendering_authoritative_states.tsx

diff --git a/Source/CommandDialog/CommandStepperContent.tsx b/Source/CommandDialog/CommandStepperContent.tsx
index 97981010..e959c72f 100644
--- a/Source/CommandDialog/CommandStepperContent.tsx
+++ b/Source/CommandDialog/CommandStepperContent.tsx
@@ -211,6 +211,8 @@ export const CommandStepperContent = ({
         onActiveStepChange?.(Math.min(stepCount - 1, currentStep + 1));
     };
 
+    const isStepperBusy = isBusy || isSubmitting;
+
     const stepperList = (
         <ol
             {...pt?.list}
@@ -219,79 +221,109 @@ export const CommandStepperContent = ({
                 .join(' ')}
             data-cratis-part='list'
             data-part='list'
+            data-busy={isStepperBusy || undefined}
+            data-invalid={hasAnyStepErrors || undefined}
         >
-            {panels.map((panel, index) => (
-                <li
-                    {...pt?.step}
-                    key={index}
-                    className={['cratis-command-stepper__step', pt?.step?.className]
-                        .filter(Boolean)
-                        .join(' ')}
-                    data-cratis-part='step'
-                    data-part='step'
-                    data-active={index === currentStep || undefined}
-                    data-visited={visitedSteps.has(index) || undefined}
-                    data-invalid={stepErrors[index] || undefined}
-                >
-                    <button
-                        {...pt?.header}
-                        type='button'
+            {panels.map((panel, index) => {
+                const selected = index === currentStep;
+                const visited = visitedSteps.has(index);
+                const invalid = stepErrors[index] ?? false;
+                const headerDisabled = isStepperBusy || (linear && !selected);
+
+                return (
+                    <li
+                        {...pt?.step}
+                        key={index}
                         className={[
-                            'cratis-command-stepper__header',
-                            pt?.header?.className,
+                            'cratis-command-stepper__step',
+                            pt?.step?.className,
                         ]
                             .filter(Boolean)
                             .join(' ')}
-                        data-cratis-part='header'
-                        data-part='header'
-                        disabled={linear && index !== currentStep}
-                        aria-current={index === currentStep ? 'step' : undefined}
-                        onClick={() => handleStepChange(index)}
+                        data-cratis-part='step'
+                        data-part='step'
+                        data-active={selected || undefined}
+                        data-selected={selected || undefined}
+                        data-visited={visited || undefined}
+                        data-invalid={invalid || undefined}
+                        data-busy={isStepperBusy || undefined}
                     >
-                        <span
-                            {...pt?.number}
-                            className={[
-                                'cratis-command-stepper__number',
-                                pt?.number?.className,
-                            ]
-                                .filter(Boolean)
-                                .join(' ')}
-                            style={pt?.number?.style}
-                            data-cratis-part='number'
-                            data-part='number'
-                        >
-                            {index + 1}
-                        </span>
-                        <span
-                            {...pt?.title}
+                        <button
+                            {...pt?.header}
+                            type='button'
                             className={[
-                                'cratis-command-stepper__title',
-                                pt?.title?.className,
+                                'cratis-command-stepper__header',
+                                pt?.header?.className,
                             ]
                                 .filter(Boolean)
                                 .join(' ')}
-                            data-cratis-part='title'
-                            data-part='title'
+                            data-cratis-part='header'
+                            data-part='header'
+                            data-busy={isStepperBusy || undefined}
+                            data-disabled={headerDisabled || undefined}
+                            data-invalid={invalid || undefined}
+                            data-selected={selected || undefined}
+                            data-visited={visited || undefined}
+                            disabled={headerDisabled}
+                            aria-current={selected ? 'step' : undefined}
+                            onClick={() => handleStepChange(index)}
                         >
-                            {panel.props.header}
-                        </span>
-                    </button>
-                    {index < stepCount - 1 && (
-                        <span
-                            {...pt?.separator}
-                            className={[
-                                'cratis-command-stepper__separator',
-                                pt?.separator?.className,
-                            ]
-                                .filter(Boolean)
-                                .join(' ')}
-                            data-cratis-part='separator'
-                            data-part='separator'
-                            aria-hidden='true'
-                        />
-                    )}
-                </li>
-            ))}
+                            <span
+                                {...pt?.number}
+                                className={[
+                                    'cratis-command-stepper__number',
+                                    pt?.number?.className,
+                                ]
+                                    .filter(Boolean)
+                                    .join(' ')}
+                                style={pt?.number?.style}
+                                data-cratis-part='number'
+                                data-part='number'
+                                data-busy={isStepperBusy || undefined}
+                                data-invalid={invalid || undefined}
+                                data-selected={selected || undefined}
+                                data-visited={visited || undefined}
+                            >
+                                {index + 1}
+                            </span>
+                            <span
+                                {...pt?.title}
+                                className={[
+                                    'cratis-command-stepper__title',
+                                    pt?.title?.className,
+                                ]
+                                    .filter(Boolean)
+                                    .join(' ')}
+                                data-cratis-part='title'
+                                data-part='title'
+                                data-busy={isStepperBusy || undefined}
+                                data-invalid={invalid || undefined}
+                                data-selected={selected || undefined}
+                                data-visited={visited || undefined}
+                            >
+                                {panel.props.header}
+                            </span>
+                        </button>
+                        {index < stepCount - 1 && (
+                            <span
+                                {...pt?.separator}
+                                className={[
+                                    'cratis-command-stepper__separator',
+                                    pt?.separator?.className,
+                                ]
+                                    .filter(Boolean)
+                                    .join(' ')}
+                                data-cratis-part='separator'
+                                data-part='separator'
+                                data-busy={isStepperBusy || undefined}
+                                data-invalid={invalid || undefined}
+                                data-visited={visited || undefined}
+                                aria-hidden='true'
+                            />
+                        )}
+                    </li>
+                );
+            })}
         </ol>
     );
 
@@ -303,6 +335,8 @@ export const CommandStepperContent = ({
                 .join(' ')}
             data-cratis-part='panels'
             data-part='panels'
+            data-busy={isStepperBusy || undefined}
+            data-invalid={hasAnyStepErrors || undefined}
         >
             {panels.map((panel, index) => (
                 <section
@@ -314,6 +348,10 @@ export const CommandStepperContent = ({
                         .join(' ')}
                     data-cratis-part='panel'
                     data-part='panel'
+                    data-busy={isStepperBusy || undefined}
+                    data-invalid={stepErrors[index] || undefined}
+                    data-selected={index === currentStep || undefined}
+                    data-visited={visitedSteps.has(index) || undefined}
                     aria-label={String(panel.props.header ?? `Step ${index + 1}`)}
                 >
                     {processChildren(panel.props.children)}
@@ -337,6 +375,8 @@ export const CommandStepperContent = ({
                 data-part='root'
                 data-value={currentStep}
                 data-orientation={orientation}
+                data-busy={isStepperBusy || undefined}
+                data-invalid={hasAnyStepErrors || undefined}
             >
                 {headerPosition === 'bottom' ? (
                     <>
diff --git a/Source/CommandDialog/for_CommandStepper/when_rendering_authoritative_states.tsx b/Source/CommandDialog/for_CommandStepper/when_rendering_authoritative_states.tsx
new file mode 100644
index 00000000..949e3431
--- /dev/null
+++ b/Source/CommandDialog/for_CommandStepper/when_rendering_authoritative_states.tsx
@@ -0,0 +1,172 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { act, type ComponentType } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { expect } from 'chai';
+import { afterEach, beforeEach, describe, it, vi } from 'vitest';
+
+vi.mock('@cratis/arc.react/commands', () => ({
+    CommandFormFieldWrapper: ({ field }: { field: React.ReactElement }) => field,
+}));
+
+import { CratisComponentsProvider } from '../../Common/CratisComponentsProvider';
+import { markAsCommandFormField } from '../../CommandForm/commandFormMarkers';
+import { CommandStepperContent } from '../CommandStepperContent';
+import { StepperPanel } from '../StepperPanel';
+
+const SampleField = markAsCommandFormField(
+    (({ value: _value }: { value: (command: { sample: string }) => string }) => (
+        <input aria-label='Sample field' />
+    )) as ComponentType<{ value: (command: { sample: string }) => string }>,
+);
+
+describe('when CommandStepper renders authoritative states', () => {
+    let container: HTMLDivElement;
+    let root: Root;
+
+    beforeEach(() => {
+        (
+            globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
+        ).IS_REACT_ACT_ENVIRONMENT = true;
+        container = document.createElement('div');
+        document.body.append(container);
+        root = createRoot(container);
+    });
+
+    afterEach(async () => {
+        await act(async () => root.unmount());
+        container.remove();
+    });
+
+    const renderStepper = async (busy: boolean, withError: boolean) => {
+        await act(async () => {
+            root.render(
+                <CratisComponentsProvider>
+                    <CommandStepperContent
+                        activeStep={1}
+                        visitedSteps={new Set([0, 1])}
+                        isBusy={busy}
+                        linear={false}
+                        getFieldError={(fieldName) =>
+                            withError && fieldName === 'sample' ? 'Required' : undefined
+                        }
+                        pt={{
+                            root: { 'data-testid': 'stepper-root' },
+                            list: { 'data-testid': 'stepper-list' },
+                            step: { 'data-testid': 'stepper-step' },
+                            header: { 'data-testid': 'stepper-header' },
+                            number: { 'data-testid': 'stepper-number' },
+                            title: { 'data-testid': 'stepper-title' },
+                            separator: { 'data-testid': 'stepper-separator' },
+                            panels: { 'data-testid': 'stepper-panels' },
+                            panel: { 'data-testid': 'stepper-panel' },
+                        }}
+                    >
+                        <StepperPanel header='First'>
+                            <SampleField value={(command) => command.sample} />
+                        </StepperPanel>
+                        <StepperPanel header='Second'>Second content</StepperPanel>
+                    </CommandStepperContent>
+                </CratisComponentsProvider>,
+            );
+        });
+    };
+
+    const parts = (name: string) =>
+        container.querySelectorAll<HTMLElement>(`[data-cratis-part="${name}"]`);
+
+    it('should put busy and aggregate invalid state on root collection parts and pt destinations', async () => {
+        await renderStepper(true, true);
+
+        for (const name of ['root', 'list', 'panels']) {
+            const element = parts(name)[0];
+            expect(element.dataset.busy).to.equal('true');
+            expect(element.dataset.invalid).to.equal('true');
+            expect(element.getAttribute('data-testid')).to.equal(`stepper-${name}`);
+        }
+    });
+
+    it('should put selected, visited, invalid, and busy on every relevant step part', async () => {
+        await renderStepper(true, true);
+
+        const steps = parts('step');
+        expect(steps[0].hasAttribute('data-selected')).to.equal(false);
+        expect(steps[0].dataset.visited).to.equal('true');
+        expect(steps[0].dataset.invalid).to.equal('true');
+        expect(steps[0].dataset.busy).to.equal('true');
+        expect(steps[0].getAttribute('data-testid')).to.equal('stepper-step');
+        expect(steps[1].dataset.selected).to.equal('true');
+        expect(steps[1].dataset.active).to.equal('true');
+        expect(steps[1].dataset.visited).to.equal('true');
+        expect(steps[1].hasAttribute('data-invalid')).to.equal(false);
+
+        for (const name of ['header', 'number', 'title']) {
+            const elements = parts(name);
+            expect(elements[0].dataset.invalid).to.equal('true');
+            expect(elements[0].dataset.visited).to.equal('true');
+            expect(elements[0].hasAttribute('data-selected')).to.equal(false);
+            expect(elements[1].dataset.selected).to.equal('true');
+            expect(elements[1].dataset.visited).to.equal('true');
+            expect(elements[1].hasAttribute('data-invalid')).to.equal(false);
+            expect(elements[1].dataset.busy).to.equal('true');
+            expect(elements[1].getAttribute('data-testid')).to.equal(
+                `stepper-${name}`,
+            );
+        }
+
+        const headers = parts('header') as NodeListOf<HTMLButtonElement>;
+        expect(headers[0].dataset.disabled).to.equal('true');
+        expect(headers[0].disabled).to.equal(true);
+        expect(headers[1].dataset.disabled).to.equal('true');
+        expect(headers[1].disabled).to.equal(true);
+
+        const separator = parts('separator')[0];
+        expect(separator.dataset.visited).to.equal('true');
+        expect(separator.dataset.invalid).to.equal('true');
+        expect(separator.dataset.busy).to.equal('true');
+        expect(separator.getAttribute('data-testid')).to.equal('stepper-separator');
+    });
+
+    it('should put selected, visited, invalid, and busy on the corresponding panels', async () => {
+        await renderStepper(true, true);
+
+        const panels = parts('panel');
+        expect(panels[0].hasAttribute('data-selected')).to.equal(false);
+        expect(panels[0].dataset.visited).to.equal('true');
+        expect(panels[0].dataset.invalid).to.equal('true');
+        expect(panels[0].dataset.busy).to.equal('true');
+        expect(panels[1].dataset.selected).to.equal('true');
+        expect(panels[1].dataset.visited).to.equal('true');
+        expect(panels[1].hasAttribute('data-invalid')).to.equal(false);
+        expect(panels[1].getAttribute('data-testid')).to.equal('stepper-panel');
+    });
+
+    it('should omit false invalid and busy states while preserving selected and visited migration attributes', async () => {
+        await renderStepper(false, false);
+
+        for (const name of [
+            'root',
+            'list',
+            'step',
+            'header',
+            'number',
+            'title',
+            'separator',
+            'panels',
+            'panel',
+        ]) {
+            for (const element of parts(name)) {
+                expect(element.hasAttribute('data-busy')).to.equal(false);
+                expect(element.hasAttribute('data-invalid')).to.equal(false);
+            }
+        }
+
+        const steps = parts('step');
+        expect(steps[1].dataset.selected).to.equal('true');
+        expect(steps[1].dataset.active).to.equal('true');
+        expect(steps[0].dataset.visited).to.equal('true');
+    });
+});
diff --git a/Source/CommandForm/fields/CheckboxField.tsx b/Source/CommandForm/fields/CheckboxField.tsx
index f4e5b695..e0941b8b 100644
--- a/Source/CommandForm/fields/CheckboxField.tsx
+++ b/Source/CommandForm/fields/CheckboxField.tsx
@@ -52,7 +52,9 @@ export const CheckboxField = asCommandFormField<CheckboxFieldComponentProps>(
                 .join(' ')}
             onBlur={props.onBlur}
             data-cratis-part='root'
+            data-disabled={props.pt?.input?.disabled || undefined}
             data-invalid={props.invalid || undefined}
+            data-selected={props.value || undefined}
         >
             <input
                 {...props.pt?.input}
@@ -67,6 +69,9 @@ export const CheckboxField = asCommandFormField<CheckboxFieldComponentProps>(
                     .filter(Boolean)
                     .join(' ')}
                 data-cratis-part='input'
+                data-disabled={props.pt?.input?.disabled || undefined}
+                data-invalid={props.invalid || undefined}
+                data-selected={props.value || undefined}
             />
             <span
                 {...props.pt?.box}
@@ -74,6 +79,9 @@ export const CheckboxField = asCommandFormField<CheckboxFieldComponentProps>(
                     .filter(Boolean)
                     .join(' ')}
                 data-cratis-part='box'
+                data-disabled={props.pt?.input?.disabled || undefined}
+                data-invalid={props.invalid || undefined}
+                data-selected={props.value || undefined}
                 aria-hidden='true'
             >
                 <span
@@ -85,6 +93,9 @@ export const CheckboxField = asCommandFormField<CheckboxFieldComponentProps>(
                         .filter(Boolean)
                         .join(' ')}
                     data-cratis-part='indicator'
+                    data-disabled={props.pt?.input?.disabled || undefined}
+                    data-invalid={props.invalid || undefined}
+                    data-selected={props.value || undefined}
                 >
                     ✓
                 </span>
diff --git a/Source/CommandForm/fields/ChipsField.tsx b/Source/CommandForm/fields/ChipsField.tsx
index 7c4484e6..4afdc94b 100644
--- a/Source/CommandForm/fields/ChipsField.tsx
+++ b/Source/CommandForm/fields/ChipsField.tsx
@@ -82,7 +82,9 @@ const ChipsControl = (props: ChipsFieldComponentProps) => {
                     commit();
             }}
             data-cratis-part='root'
+            data-disabled={props.pt?.input?.disabled || undefined}
             data-invalid={props.invalid || undefined}
+            data-readonly={props.pt?.input?.readOnly || undefined}
         >
             {props.value.map((item, index) => (
                 <span
@@ -92,6 +94,7 @@ const ChipsControl = (props: ChipsFieldComponentProps) => {
                         .filter(Boolean)
                         .join(' ')}
                     data-cratis-part='item'
+                    data-selected
                 >
                     <span>{item}</span>
                     <button
@@ -104,6 +107,8 @@ const ChipsControl = (props: ChipsFieldComponentProps) => {
                             .filter(Boolean)
                             .join(' ')}
                         data-cratis-part='remove'
+                        data-disabled={props.pt?.remove?.disabled || undefined}
+                        data-selected
                         aria-label={
                             typeof props.removeAriaLabel === 'function'
                                 ? props.removeAriaLabel(item, index)
@@ -134,6 +139,9 @@ const ChipsControl = (props: ChipsFieldComponentProps) => {
                 }}
                 placeholder={props.placeholder}
                 aria-invalid={props.invalid || undefined}
+                data-disabled={props.pt?.input?.disabled || undefined}
+                data-invalid={props.invalid || undefined}
+                data-readonly={props.pt?.input?.readOnly || undefined}
                 className={['cratis-chips-field__input', props.pt?.input?.className]
                     .filter(Boolean)
                     .join(' ')}
diff --git a/Source/CommandForm/fields/ColorPickerField.tsx b/Source/CommandForm/fields/ColorPickerField.tsx
index ca75a57c..826eb987 100644
--- a/Source/CommandForm/fields/ColorPickerField.tsx
+++ b/Source/CommandForm/fields/ColorPickerField.tsx
@@ -61,6 +61,7 @@ export const ColorPickerField = asCommandFormField<ColorPickerFieldComponentProp
                     .join(' ')}
                 onBlur={props.onBlur}
                 data-cratis-part='root'
+                data-disabled={props.pt?.input?.disabled || undefined}
                 data-invalid={props.invalid || undefined}
                 data-inline={props.inline || undefined}
             >
@@ -73,6 +74,8 @@ export const ColorPickerField = asCommandFormField<ColorPickerFieldComponentProp
                     value={`#${value}`}
                     onChange={(event) => props.onChange(event.currentTarget.value.replace('#', ''))}
                     aria-invalid={props.invalid || undefined}
+                    data-disabled={props.pt?.input?.disabled || undefined}
+                    data-invalid={props.invalid || undefined}
                     className={['cratis-color-field__input', props.pt?.input?.className]
                         .filter(Boolean)
                         .join(' ')}
@@ -84,6 +87,7 @@ export const ColorPickerField = asCommandFormField<ColorPickerFieldComponentProp
                         .filter(Boolean)
                         .join(' ')}
                     data-cratis-part='value'
+                    data-invalid={props.invalid || undefined}
                 >
                     #{value}
                 </output>
diff --git a/Source/CommandForm/fields/InputTextField.tsx b/Source/CommandForm/fields/InputTextField.tsx
index 676df296..29c095b9 100644
--- a/Source/CommandForm/fields/InputTextField.tsx
+++ b/Source/CommandForm/fields/InputTextField.tsx
@@ -56,7 +56,9 @@ export const InputTextField = asCommandFormField<InputTextComponentProps>(
             onBlur={props.onBlur}
             placeholder={props.placeholder}
             aria-invalid={props.invalid || undefined}
+            data-disabled={props.pt?.root?.disabled || undefined}
             data-invalid={props.invalid || undefined}
+            data-readonly={props.pt?.root?.readOnly || undefined}
             data-cratis-part='input'
             className={[
                 'cratis-field-input',
diff --git a/Source/CommandForm/fields/NumberField.tsx b/Source/CommandForm/fields/NumberField.tsx
index 295ec36d..b568a216 100644
--- a/Source/CommandForm/fields/NumberField.tsx
+++ b/Source/CommandForm/fields/NumberField.tsx
@@ -47,6 +47,9 @@ export const NumberField = asCommandFormField<NumberFieldComponentProps>(
             {...props.pt?.root}
             onBlur={props.onBlur}
             data-cratis-part='root'
+            data-disabled={props.pt?.input?.disabled || undefined}
+            data-invalid={props.invalid || undefined}
+            data-readonly={props.pt?.input?.readOnly || undefined}
             className={[
                 'cratis-number-field',
                 'cratis:w-full',
@@ -75,7 +78,9 @@ export const NumberField = asCommandFormField<NumberFieldComponentProps>(
                 max={props.max}
                 step={props.step}
                 aria-invalid={props.invalid || undefined}
+                data-disabled={props.pt?.input?.disabled || undefined}
                 data-invalid={props.invalid || undefined}
+                data-readonly={props.pt?.input?.readOnly || undefined}
                 data-cratis-part='input'
                 className={['cratis-field-input', 'cratis:w-full', props.pt?.input?.className]
                     .filter(Boolean)
diff --git a/Source/CommandForm/fields/PasswordField.tsx b/Source/CommandForm/fields/PasswordField.tsx
index 2a63bf67..fb33ad65 100644
--- a/Source/CommandForm/fields/PasswordField.tsx
+++ b/Source/CommandForm/fields/PasswordField.tsx
@@ -60,6 +60,9 @@ const PasswordControl = (props: PasswordFieldComponentProps) => {
                 .filter(Boolean)
                 .join(' ')}
             data-cratis-part='root'
+            data-disabled={props.pt?.input?.disabled || undefined}
+            data-invalid={props.invalid || undefined}
+            data-readonly={props.pt?.input?.readOnly || undefined}
         >
             <input
                 {...props.pt?.input}
@@ -71,7 +74,9 @@ const PasswordControl = (props: PasswordFieldComponentProps) => {
                 onChange={(event) => props.onChange(event.currentTarget.value)}
                 placeholder={props.placeholder}
                 aria-invalid={props.invalid || undefined}
+                data-disabled={props.pt?.input?.disabled || undefined}
                 data-invalid={props.invalid || undefined}
+                data-readonly={props.pt?.input?.readOnly || undefined}
                 className={['cratis-field-input', 'cratis:w-full', props.pt?.input?.className]
                     .filter(Boolean)
                     .join(' ')}
@@ -84,6 +89,9 @@ const PasswordControl = (props: PasswordFieldComponentProps) => {
                     .filter(Boolean)
                     .join(' ')}
                 data-cratis-part='toggle'
+                data-disabled={props.pt?.toggle?.disabled || undefined}
+                data-pressed={visible || undefined}
+                aria-pressed={visible}
                 aria-label={
                     visible
                         ? (props.hideLabel ?? 'Hide password')
diff --git a/Source/CommandForm/fields/RadioButtonField.tsx b/Source/CommandForm/fields/RadioButtonField.tsx
index 436614c3..3aa30145 100644
--- a/Source/CommandForm/fields/RadioButtonField.tsx
+++ b/Source/CommandForm/fields/RadioButtonField.tsx
@@ -46,6 +46,7 @@ export const RadioButtonField = asCommandFormField<RadioButtonFieldComponentProp
             ariaLabel: props.pt?.input?.['aria-label'] ?? props.label,
             ariaDescribedBy: props.pt?.input?.['aria-describedby'],
         });
+        const selected = props.value === props.buttonValue;
         return (
             <>
         <label
@@ -55,7 +56,9 @@ export const RadioButtonField = asCommandFormField<RadioButtonFieldComponentProp
                 .join(' ')}
             onBlur={props.onBlur}
             data-cratis-part='root'
+            data-disabled={props.pt?.input?.disabled || undefined}
             data-invalid={props.invalid || undefined}
+            data-selected={selected || undefined}
         >
             <input
                 {...props.pt?.input}
@@ -64,7 +67,7 @@ export const RadioButtonField = asCommandFormField<RadioButtonFieldComponentProp
                 aria-describedby={accessibility.ariaDescribedBy}
                 type='radio'
                 name={props.name}
-                checked={props.value === props.buttonValue}
+                checked={selected}
                 onChange={(event) => {
                     if (event.currentTarget.checked) props.onChange(props.buttonValue);
                 }}
@@ -73,6 +76,9 @@ export const RadioButtonField = asCommandFormField<RadioButtonFieldComponentProp
                     .filter(Boolean)
                     .join(' ')}
                 data-cratis-part='input'
+                data-disabled={props.pt?.input?.disabled || undefined}
+                data-invalid={props.invalid || undefined}
+                data-selected={selected || undefined}
             />
             <span
                 {...props.pt?.box}
@@ -80,6 +86,9 @@ export const RadioButtonField = asCommandFormField<RadioButtonFieldComponentProp
                     .filter(Boolean)
                     .join(' ')}
                 data-cratis-part='box'
+                data-disabled={props.pt?.input?.disabled || undefined}
+                data-invalid={props.invalid || undefined}
+                data-selected={selected || undefined}
                 aria-hidden='true'
             >
                 <span
@@ -88,6 +97,9 @@ export const RadioButtonField = asCommandFormField<RadioButtonFieldComponentProp
                         .filter(Boolean)
                         .join(' ')}
                     data-cratis-part='indicator'
+                    data-disabled={props.pt?.input?.disabled || undefined}
+                    data-invalid={props.invalid || undefined}
+                    data-selected={selected || undefined}
                 />
             </span>
             {props.label && (
diff --git a/Source/CommandForm/fields/RadioGroupField.tsx b/Source/CommandForm/fields/RadioGroupField.tsx
index 5adeb480..179c6a51 100644
--- a/Source/CommandForm/fields/RadioGroupField.tsx
+++ b/Source/CommandForm/fields/RadioGroupField.tsx
@@ -70,10 +70,13 @@ export const RadioGroupField = asCommandFormField<RadioGroupFieldComponentProps>
                     .filter(Boolean)
                     .join(' ')}
                 data-cratis-part='root'
+                data-disabled={props.pt?.input?.disabled || undefined}
+                data-invalid={props.invalid || undefined}
             >
                 {props.options.map((option) => {
                     const value = option[props.optionValue] as string | number;
                     const label = String(option[props.optionLabel] ?? value);
+                    const selected = props.value === value;
                     return (
                         <label
                             {...props.pt?.option}
@@ -86,12 +89,15 @@ export const RadioGroupField = asCommandFormField<RadioGroupFieldComponentProps>
                                 .join(' ')}
                             onBlur={props.onBlur}
                             data-cratis-part='option'
+                            data-disabled={props.pt?.input?.disabled || undefined}
+                            data-invalid={props.invalid || undefined}
+                            data-selected={selected || undefined}
                         >
                             <input
                                 {...props.pt?.input}
                                 type='radio'
                                 name={name}
-                                checked={props.value === value}
+                                checked={selected}
                                 onChange={(event) => {
                                     if (event.currentTarget.checked) props.onChange(value);
                                 }}
@@ -103,6 +109,9 @@ export const RadioGroupField = asCommandFormField<RadioGroupFieldComponentProps>
                                     .filter(Boolean)
                                     .join(' ')}
                                 data-cratis-part='input'
+                                data-disabled={props.pt?.input?.disabled || undefined}
+                                data-invalid={props.invalid || undefined}
+                                data-selected={selected || undefined}
                             />
                             <span
                                 {...props.pt?.box}
@@ -110,6 +119,9 @@ export const RadioGroupField = asCommandFormField<RadioGroupFieldComponentProps>
                                     .filter(Boolean)
                                     .join(' ')}
                                 data-cratis-part='box'
+                                data-disabled={props.pt?.input?.disabled || undefined}
+                                data-invalid={props.invalid || undefined}
+                                data-selected={selected || undefined}
                                 aria-hidden='true'
                             >
                                 <span
@@ -121,6 +133,9 @@ export const RadioGroupField = asCommandFormField<RadioGroupFieldComponentProps>
                                         .filter(Boolean)
                                         .join(' ')}
                                     data-cratis-part='indicator'
+                                    data-disabled={props.pt?.input?.disabled || undefined}
+                                    data-invalid={props.invalid || undefined}
+                                    data-selected={selected || undefined}
                                 />
                             </span>
                             <span className='cratis-choice-field__label'>{label}</span>
diff --git a/Source/CommandForm/fields/RatingField.tsx b/Source/CommandForm/fields/RatingField.tsx
index fcd1afcb..aa23f510 100644
--- a/Source/CommandForm/fields/RatingField.tsx
+++ b/Source/CommandForm/fields/RatingField.tsx
@@ -66,10 +66,12 @@ export const RatingField = asCommandFormField<RatingFieldComponentProps>(
                     .join(' ')}
                 onBlur={props.onBlur}
                 data-cratis-part='root'
+                data-disabled={props.pt?.input?.disabled || undefined}
                 data-invalid={props.invalid || undefined}
             >
                 {Array.from({ length: props.stars ?? 5 }, (_, index) => {
                     const starValue = index + 1;
+                    const selected = starValue === props.value;
                     const label = (
                         props.starAriaLabel ??
                         ((value: number) => `${value} ${value === 1 ? 'star' : 'stars'}`)
@@ -85,12 +87,15 @@ export const RatingField = asCommandFormField<RatingFieldComponentProps>(
                                 .filter(Boolean)
                                 .join(' ')}
                             data-cratis-part='option'
+                            data-disabled={props.pt?.input?.disabled || undefined}
+                            data-invalid={props.invalid || undefined}
+                            data-selected={selected || undefined}
                         >
                             <input
                                 {...props.pt?.input}
                                 type='radio'
                                 name={name}
-                                checked={props.value === starValue}
+                                checked={selected}
                                 onChange={(event) => {
                                     if (event.currentTarget.checked) props.onChange(starValue);
                                 }}
@@ -102,6 +107,9 @@ export const RatingField = asCommandFormField<RatingFieldComponentProps>(
                                     .filter(Boolean)
                                     .join(' ')}
                                 data-cratis-part='input'
+                                data-disabled={props.pt?.input?.disabled || undefined}
+                                data-invalid={props.invalid || undefined}
+                                data-selected={selected || undefined}
                             />
                             <span
                                 {...props.pt?.star}
@@ -112,6 +120,8 @@ export const RatingField = asCommandFormField<RatingFieldComponentProps>(
                                     .filter(Boolean)
                                     .join(' ')}
                                 data-cratis-part='star'
+                                data-disabled={props.pt?.input?.disabled || undefined}
+                                data-invalid={props.invalid || undefined}
                                 data-selected={starValue <= props.value || undefined}
                                 aria-hidden='true'
                             >
diff --git a/Source/CommandForm/fields/SliderField.tsx b/Source/CommandForm/fields/SliderField.tsx
index 81de7608..85d0ba80 100644
--- a/Source/CommandForm/fields/SliderField.tsx
+++ b/Source/CommandForm/fields/SliderField.tsx
@@ -56,6 +56,8 @@ export const SliderField = asCommandFormField<SliderFieldComponentProps>(
                 .join(' ')}
             onBlur={props.onBlur}
             data-cratis-part='root'
+            data-disabled={props.pt?.input?.disabled || undefined}
+            data-invalid={props.invalid || undefined}
         >
             <input
                 {...props.pt?.input}
@@ -69,6 +71,8 @@ export const SliderField = asCommandFormField<SliderFieldComponentProps>(
                 max={props.max ?? 100}
                 step={props.step ?? 1}
                 aria-invalid={props.invalid || undefined}
+                data-disabled={props.pt?.input?.disabled || undefined}
+                data-invalid={props.invalid || undefined}
                 className={['cratis-slider-field__input', props.pt?.input?.className]
                     .filter(Boolean)
                     .join(' ')}
@@ -80,6 +84,7 @@ export const SliderField = asCommandFormField<SliderFieldComponentProps>(
                     .filter(Boolean)
                     .join(' ')}
                 data-cratis-part='value'
+                data-invalid={props.invalid || undefined}
             >
                 {props.value}
             </span>
diff --git a/Source/CommandForm/fields/TextAreaField.tsx b/Source/CommandForm/fields/TextAreaField.tsx
index 3e9bee81..736bca95 100644
--- a/Source/CommandForm/fields/TextAreaField.tsx
+++ b/Source/CommandForm/fields/TextAreaField.tsx
@@ -48,7 +48,9 @@ export const TextAreaField = asCommandFormField<TextAreaFieldComponentProps>(
             rows={props.rows ?? 5}
             cols={props.cols}
             aria-invalid={props.invalid || undefined}
+            data-disabled={props.pt?.root?.disabled || undefined}
             data-invalid={props.invalid || undefined}
+            data-readonly={props.pt?.root?.readOnly || undefined}
             data-cratis-part='textarea'
             className={[
                 'cratis-field-input',
diff --git a/Source/CommandForm/fields/ToggleSwitchField.tsx b/Source/CommandForm/fields/ToggleSwitchField.tsx
index e4f5b967..7b0beed7 100644
--- a/Source/CommandForm/fields/ToggleSwitchField.tsx
+++ b/Source/CommandForm/fields/ToggleSwitchField.tsx
@@ -52,7 +52,9 @@ export const ToggleSwitchField = asCommandFormField<ToggleSwitchFieldComponentPr
                 .join(' ')}
             onBlur={props.onBlur}
             data-cratis-part='root'
+            data-disabled={props.pt?.input?.disabled || undefined}
             data-invalid={props.invalid || undefined}
+            data-selected={props.value || undefined}
         >
             <input
                 {...props.pt?.input}
@@ -68,6 +70,9 @@ export const ToggleSwitchField = asCommandFormField<ToggleSwitchFieldComponentPr
                     .filter(Boolean)
                     .join(' ')}
                 data-cratis-part='input'
+                data-disabled={props.pt?.input?.disabled || undefined}
+                data-invalid={props.invalid || undefined}
+                data-selected={props.value || undefined}
             />
             <span
                 {...props.pt?.control}
@@ -75,6 +80,9 @@ export const ToggleSwitchField = asCommandFormField<ToggleSwitchFieldComponentPr
                     .filter(Boolean)
                     .join(' ')}
                 data-cratis-part='control'
+                data-disabled={props.pt?.input?.disabled || undefined}
+                data-invalid={props.invalid || undefined}
+                data-selected={props.value || undefined}
                 aria-hidden='true'
             >
                 <span
@@ -83,6 +91,9 @@ export const ToggleSwitchField = asCommandFormField<ToggleSwitchFieldComponentPr
                         .filter(Boolean)
                         .join(' ')}
                     data-cratis-part='handle'
+                    data-disabled={props.pt?.input?.disabled || undefined}
+                    data-invalid={props.invalid || undefined}
+                    data-selected={props.value || undefined}
                 />
             </span>
             {props.label && (
diff --git a/Source/CommandForm/for_field_states/when_rendering_authoritative_states.tsx b/Source/CommandForm/for_field_states/when_rendering_authoritative_states.tsx
new file mode 100644
index 00000000..275e08ad
--- /dev/null
+++ b/Source/CommandForm/for_field_states/when_rendering_authoritative_states.tsx
@@ -0,0 +1,251 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { act, type ComponentType } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { expect } from 'chai';
+import { afterEach, beforeEach, describe, it, vi } from 'vitest';
+
+vi.mock('@cratis/arc.react/commands', () => ({
+    asCommandFormField: (component: ComponentType<Record<string, unknown>>) => component,
+}));
+
+import { CheckboxField } from '../fields/CheckboxField';
+import { ChipsField } from '../fields/ChipsField';
+import { ColorPickerField } from '../fields/ColorPickerField';
+import { InputTextField } from '../fields/InputTextField';
+import { NumberField } from '../fields/NumberField';
+import { PasswordField } from '../fields/PasswordField';
+import { RadioButtonField } from '../fields/RadioButtonField';
+import { RadioGroupField } from '../fields/RadioGroupField';
+import { RatingField } from '../fields/RatingField';
+import { SliderField } from '../fields/SliderField';
+import { TextAreaField } from '../fields/TextAreaField';
+import { ToggleSwitchField } from '../fields/ToggleSwitchField';
+
+const asDirectComponent = (component: unknown) =>
+    component as ComponentType<Record<string, unknown>>;
+
+const baseProps = {
+    invalid: false,
+    required: false,
+    errors: [],
+    onChange: () => undefined,
+};
+
+describe('when CommandForm fields render authoritative states', () => {
+    let container: HTMLDivElement;
+    let root: Root;
+
+    beforeEach(() => {
+        (
+            globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
+        ).IS_REACT_ACT_ENVIRONMENT = true;
+        container = document.createElement('div');
+        document.body.append(container);
+        root = createRoot(container);
+    });
+
+    afterEach(async () => {
+        await act(async () => root.unmount());
+        container.remove();
+    });
+
+    const renderField = async (
+        component: unknown,
+        props: Record<string, unknown>,
+    ) => {
+        const Field = asDirectComponent(component);
+        await act(async () => {
+            root.render(<Field {...baseProps} {...props} />);
+        });
+    };
+
+    const part = (name: string) =>
+        container.querySelector<HTMLElement>(`[data-cratis-part="${name}"]`);
+
+    it('should emit text invalid, disabled, and readonly only while present', async () => {
+        await renderField(InputTextField, {
+            value: 'Sample value',
+            invalid: true,
+            pt: {
+                root: {
+                    disabled: true,
+                    readOnly: true,
+                    'data-testid': 'text-control',
+                },
+            },
+        });
+
+        const control = part('input');
+        expect(control?.dataset.invalid).to.equal('true');
+        expect(control?.dataset.disabled).to.equal('true');
+        expect(control?.dataset.readonly).to.equal('true');
+        expect(control?.getAttribute('data-testid')).to.equal('text-control');
+
+        await renderField(InputTextField, { value: 'Sample value' });
+        expect(part('input')?.hasAttribute('data-invalid')).to.equal(false);
+        expect(part('input')?.hasAttribute('data-disabled')).to.equal(false);
+        expect(part('input')?.hasAttribute('data-readonly')).to.equal(false);
+    });
+
+    it('should put checkbox selection and validation on every choice part and preserve pt destinations', async () => {
+        await renderField(CheckboxField, {
+            value: true,
+            invalid: true,
+            pt: {
+                root: { 'data-testid': 'checkbox-root' },
+                input: { disabled: true, 'data-testid': 'checkbox-input' },
+                box: { 'data-testid': 'checkbox-box' },
+                indicator: { 'data-testid': 'checkbox-indicator' },
+            },
+        });
+
+        for (const name of ['root', 'input', 'box', 'indicator']) {
+            const element = part(name);
+            expect(element?.dataset.selected).to.equal('true');
+            expect(element?.dataset.invalid).to.equal('true');
+            expect(element?.dataset.disabled).to.equal('true');
+            expect(element?.getAttribute('data-testid')).to.equal(`checkbox-${name}`);
+        }
+
+        await renderField(CheckboxField, { value: false });
+        for (const name of ['root', 'input', 'box', 'indicator']) {
+            expect(part(name)?.hasAttribute('data-selected')).to.equal(false);
+            expect(part(name)?.hasAttribute('data-invalid')).to.equal(false);
+            expect(part(name)?.hasAttribute('data-disabled')).to.equal(false);
+        }
+    });
+
+    it('should identify the selected radio option without marking its siblings', async () => {
+        await renderField(RadioGroupField, {
+            value: 'two',
+            invalid: true,
+            options: [
+                { value: 'one', label: 'One' },
+                { value: 'two', label: 'Two' },
+            ],
+            optionValue: 'value',
+            optionLabel: 'label',
+            pt: { option: { 'data-testid': 'radio-option' } },
+        });
+
+        const options = container.querySelectorAll<HTMLElement>(
+            '[data-cratis-part="option"]',
+        );
+        expect(options[0].hasAttribute('data-selected')).to.equal(false);
+        expect(options[1].dataset.selected).to.equal('true');
+        expect(options[0].dataset.invalid).to.equal('true');
+        expect(options[1].getAttribute('data-testid')).to.equal('radio-option');
+
+        await renderField(RadioButtonField, {
+            value: 'two',
+            buttonValue: 'two',
+            name: 'sample-choice',
+            invalid: true,
+        });
+        expect(part('root')?.dataset.selected).to.equal('true');
+        expect(part('input')?.dataset.invalid).to.equal('true');
+    });
+
+    it('should distinguish the selected rating option from its selected stars', async () => {
+        await renderField(RatingField, {
+            value: 2,
+            stars: 3,
+            invalid: true,
+            pt: { star: { 'data-testid': 'rating-star' } },
+        });
+
+        const options = container.querySelectorAll<HTMLElement>(
+            '[data-cratis-part="option"]',
+        );
+        const stars = container.querySelectorAll<HTMLElement>(
+            '[data-cratis-part="star"]',
+        );
+        expect(options[0].hasAttribute('data-selected')).to.equal(false);
+        expect(options[1].dataset.selected).to.equal('true');
+        expect(options[2].hasAttribute('data-selected')).to.equal(false);
+        expect(Array.from(stars, (star) => star.hasAttribute('data-selected'))).to.deep.equal([
+            true,
+            true,
+            false,
+        ]);
+        expect(stars[1].dataset.invalid).to.equal('true');
+        expect(stars[1].getAttribute('data-testid')).to.equal('rating-star');
+    });
+
+    it('should put switch selection on the root, input, control, and handle', async () => {
+        await renderField(ToggleSwitchField, {
+            value: true,
+            pt: { control: { 'data-testid': 'switch-control' } },
+        });
+        for (const name of ['root', 'input', 'control', 'handle']) {
+            expect(part(name)?.dataset.selected).to.equal('true');
+        }
+        expect(part('control')?.getAttribute('data-testid')).to.equal(
+            'switch-control',
+        );
+
+        await renderField(ToggleSwitchField, { value: false });
+        for (const name of ['root', 'input', 'control', 'handle']) {
+            expect(part(name)?.hasAttribute('data-selected')).to.equal(false);
+        }
+    });
+
+    it('should identify chips as selected values and keep false states absent', async () => {
+        await renderField(ChipsField, {
+            value: ['One'],
+            invalid: true,
+            pt: {
+                item: { 'data-testid': 'chip-item' },
+                input: { readOnly: true },
+            },
+        });
+        expect(part('item')?.dataset.selected).to.equal('true');
+        expect(part('remove')?.dataset.selected).to.equal('true');
+        expect(part('item')?.getAttribute('data-testid')).to.equal('chip-item');
+        expect(part('root')?.dataset.invalid).to.equal('true');
+        expect(part('input')?.dataset.readonly).to.equal('true');
+
+        await renderField(ChipsField, { value: [] });
+        expect(part('item')).to.equal(null);
+        expect(part('input')?.hasAttribute('data-invalid')).to.equal(false);
+        expect(part('input')?.hasAttribute('data-readonly')).to.equal(false);
+    });
+
+    it('should expose pressed state from the tracked password visibility toggle', async () => {
+        await renderField(PasswordField, {
+            value: 'example',
+            pt: { toggle: { 'data-testid': 'password-toggle' } },
+        });
+        const toggle = part('toggle') as HTMLButtonElement;
+        expect(toggle.hasAttribute('data-pressed')).to.equal(false);
+        expect(toggle.getAttribute('data-testid')).to.equal('password-toggle');
+
+        await act(async () => toggle.click());
+        expect(part('toggle')?.dataset.pressed).to.equal('true');
+        expect(part('toggle')?.getAttribute('aria-pressed')).to.equal('true');
+    });
+
+    it('should expose validation state on the remaining native field surfaces', async () => {
+        for (const [component, props, parts] of [
+            [ColorPickerField, { value: '112233' }, ['root', 'input', 'value']],
+            [NumberField, { value: 12 }, ['root', 'input']],
+            [PasswordField, { value: 'example' }, ['root', 'input']],
+            [SliderField, { value: 25 }, ['root', 'input', 'value']],
+            [TextAreaField, { value: 'Sample notes' }, ['textarea']],
+        ] as const) {
+            await renderField(component, { ...props, invalid: true });
+            for (const name of parts) {
+                expect(part(name)?.dataset.invalid).to.equal('true');
+            }
+
+            await renderField(component, props);
+            for (const name of parts) {
+                expect(part(name)?.hasAttribute('data-invalid')).to.equal(false);
+            }
+        }
+    });
+});
diff --git a/Source/Common/for_DatePickerInput/when_rendering_authoritative_states.tsx b/Source/Common/for_DatePickerInput/when_rendering_authoritative_states.tsx
new file mode 100644
index 00000000..7bdaa229
--- /dev/null
+++ b/Source/Common/for_DatePickerInput/when_rendering_authoritative_states.tsx
@@ -0,0 +1,150 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { expect } from 'chai';
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, it } from 'vitest';
+import { CratisComponentsProvider } from '../CratisComponentsProvider';
+import { DatePickerInput } from '../DatePickerInput';
+
+describe('when DatePickerInput renders authoritative states', () => {
+    let container: HTMLDivElement;
+    let root: Root;
+
+    beforeEach(() => {
+        (
+            globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
+        ).IS_REACT_ACT_ENVIRONMENT = true;
+        (globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver ??= class {
+            observe() {
+                return undefined;
+            }
+            unobserve() {
+                return undefined;
+            }
+            disconnect() {
+                return undefined;
+            }
+        };
+        container = document.createElement('div');
+        document.body.append(container);
+        root = createRoot(container);
+    });
+
+    afterEach(async () => {
+        await act(async () => root.unmount());
+        container.remove();
+    });
+
+    const renderPicker = async (element: React.ReactElement) => {
+        await act(async () => {
+            root.render(<CratisComponentsProvider>{element}</CratisComponentsProvider>);
+        });
+    };
+
+    const part = (name: string) =>
+        container.querySelector<HTMLElement>(`[data-cratis-part="${name}"]`);
+
+    it('should put selected, invalid, disabled, and readonly on root and control pt destinations', async () => {
+        await renderPicker(
+            <DatePickerInput
+                value={new Date(2026, 7, 27)}
+                onChange={() => undefined}
+                invalid
+                disabled
+                pt={{
+                    root: { 'data-testid': 'date-root' },
+                    group: { 'data-testid': 'date-group' },
+                    input: { 'data-testid': 'date-input' },
+                    trigger: { 'data-testid': 'date-trigger' },
+                }}
+            />,
+        );
+
+        for (const name of ['root', 'group', 'input', 'trigger']) {
+            const element = part(name);
+            expect(element?.dataset.selected, `${name} selected`).to.equal('true');
+            expect(element?.dataset.invalid, `${name} invalid`).to.equal('true');
+            expect(element?.dataset.disabled, `${name} disabled`).to.equal('true');
+            expect(element?.hasAttribute('data-open')).to.equal(false);
+            expect(element?.getAttribute('data-testid')).to.equal(`date-${name}`);
+        }
+
+        await renderPicker(
+            <DatePickerInput
+                value={new Date(2026, 7, 27)}
+                onChange={() => undefined}
+                readOnly
+            />,
+        );
+        for (const name of ['root', 'group', 'input', 'trigger']) {
+            expect(part(name)?.dataset.readonly, `${name} readonly`).to.equal('true');
+        }
+    });
+
+    it('should omit false state attributes', async () => {
+        await renderPicker(
+            <DatePickerInput value={null} onChange={() => undefined} />,
+        );
+
+        for (const name of ['root', 'group', 'input', 'trigger']) {
+            const element = part(name);
+            expect(element?.hasAttribute('data-selected')).to.equal(false);
+            expect(element?.hasAttribute('data-invalid')).to.equal(false);
+            expect(element?.hasAttribute('data-disabled')).to.equal(false);
+            expect(element?.hasAttribute('data-readonly')).to.equal(false);
+            expect(element?.hasAttribute('data-open')).to.equal(false);
+        }
+    });
+
+    it('should put open, selected, and disabled states on popup and cell pt destinations', async () => {
+        const selectedDate = new Date(2026, 7, 27);
+        const minDate = new Date(2026, 7, 26);
+        const maxDate = new Date(2026, 7, 28);
+        await renderPicker(
+            <DatePickerInput
+                value={selectedDate}
+                onChange={() => undefined}
+                minDate={minDate}
+                maxDate={maxDate}
+                pt={{
+                    popover: { 'data-testid': 'date-popover' },
+                    dialog: { 'data-testid': 'date-dialog' },
+                    calendar: { 'data-testid': 'date-calendar' },
+                    cell: { 'data-testid': 'date-cell' },
+                }}
+            />,
+        );
+
+        const trigger = part('trigger') as HTMLButtonElement;
+        await act(async () => trigger.click());
+
+        for (const name of ['root', 'group', 'input', 'trigger']) {
+            expect(part(name)?.dataset.open).to.equal('true');
+        }
+        for (const name of ['popover', 'dialog', 'calendar']) {
+            const element = document.querySelector<HTMLElement>(
+                `[data-cratis-part="${name}"]`,
+            );
+            expect(element?.dataset.open).to.equal('true');
+            expect(element?.getAttribute('data-testid')).to.equal(`date-${name}`);
+        }
+
+        const cells = document.querySelectorAll<HTMLElement>(
+            '[data-cratis-part="cell"]',
+        );
+        const selectedCell = Array.from(cells).find((cell) =>
+            cell.hasAttribute('data-selected'),
+        );
+        const disabledCell = Array.from(cells).find((cell) =>
+            cell.hasAttribute('data-disabled'),
+        );
+        expect(selectedCell).not.to.equal(undefined);
+        expect(selectedCell?.getAttribute('data-testid')).to.equal('date-cell');
+        expect(disabledCell).not.to.equal(undefined);
+        expect(disabledCell?.getAttribute('data-selected')).to.equal(null);
+    });
+});
diff --git a/Source/Dropdown/for_Dropdown/when_rendering_authoritative_states.tsx b/Source/Dropdown/for_Dropdown/when_rendering_authoritative_states.tsx
new file mode 100644
index 00000000..6aacc4af
--- /dev/null
+++ b/Source/Dropdown/for_Dropdown/when_rendering_authoritative_states.tsx
@@ -0,0 +1,154 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { expect } from 'chai';
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, it } from 'vitest';
+import { CratisComponentsProvider } from '../../Common/CratisComponentsProvider';
+import { Dropdown } from '../Dropdown';
+
+const options = [
+    { label: 'One', value: 'one' },
+    { label: 'Two', value: 'two', disabled: true },
+];
+
+describe('when Dropdown renders authoritative states', () => {
+    let container: HTMLDivElement;
+    let root: Root;
+
+    beforeEach(() => {
+        (
+            globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
+        ).IS_REACT_ACT_ENVIRONMENT = true;
+        (globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver ??= class {
+            observe() {
+                return undefined;
+            }
+            unobserve() {
+                return undefined;
+            }
+            disconnect() {
+                return undefined;
+            }
+        };
+        container = document.createElement('div');
+        document.body.append(container);
+        root = createRoot(container);
+    });
+
+    afterEach(async () => {
+        await act(async () => root.unmount());
+        container.remove();
+    });
+
+    const renderDropdown = async (element: React.ReactElement) => {
+        await act(async () => {
+            root.render(<CratisComponentsProvider>{element}</CratisComponentsProvider>);
+        });
+    };
+
+    it('should put selected, invalid, and disabled on the root and control pt destinations', async () => {
+        await renderDropdown(
+            <Dropdown
+                value='one'
+                options={options}
+                invalid
+                disabled
+                pt={{
+                    root: { 'data-testid': 'dropdown-root' },
+                    trigger: { 'data-testid': 'dropdown-trigger' },
+                }}
+            />,
+        );
+
+        const dropdownRoot = container.querySelector<HTMLElement>(
+            '[data-cratis-part="root"]',
+        );
+        const trigger = container.querySelector<HTMLElement>(
+            '[data-cratis-part="trigger"]',
+        );
+        for (const element of [dropdownRoot, trigger]) {
+            expect(element?.dataset.selected).to.equal('true');
+            expect(element?.dataset.invalid).to.equal('true');
+            expect(element?.dataset.disabled).to.equal('true');
+            expect(element?.hasAttribute('data-open')).to.equal(false);
+        }
+        expect(dropdownRoot?.getAttribute('data-testid')).to.equal('dropdown-root');
+        expect(trigger?.getAttribute('data-testid')).to.equal('dropdown-trigger');
+    });
+
+    it('should represent open and option states on their pt destinations', async () => {
+        await renderDropdown(
+            <Dropdown
+                value='one'
+                options={options}
+                pt={{
+                    root: { 'data-testid': 'dropdown-root' },
+                    trigger: { 'data-testid': 'dropdown-trigger' },
+                    option: { 'data-testid': 'dropdown-option' },
+                }}
+            />,
+        );
+
+        const trigger = container.querySelector<HTMLButtonElement>(
+            '[data-cratis-part="trigger"]',
+        );
+        if (!trigger) throw new Error('Dropdown did not render its trigger.');
+        expect(trigger.hasAttribute('data-open')).to.equal(false);
+
+        await act(async () => trigger.click());
+
+        const dropdownRoot = container.querySelector<HTMLElement>(
+            '[data-cratis-part="root"]',
+        );
+        const popover = document.querySelector<HTMLElement>(
+            '[data-cratis-part="popover"]',
+        );
+        const listbox = document.querySelector<HTMLElement>(
+            '[data-cratis-part="listbox"]',
+        );
+        expect(dropdownRoot?.dataset.open).to.equal('true');
+        expect(trigger.dataset.open).to.equal('true');
+        expect(popover?.dataset.open).to.equal('true');
+        expect(listbox?.dataset.open).to.equal('true');
+
+        const renderedOptions = document.querySelectorAll<HTMLElement>(
+            '[data-cratis-part="option"]',
+        );
+        expect(renderedOptions[0].dataset.selected).to.equal('true');
+        expect(renderedOptions[0].hasAttribute('data-disabled')).to.equal(false);
+        expect(renderedOptions[1].hasAttribute('data-selected')).to.equal(false);
+        expect(renderedOptions[1].dataset.disabled).to.equal('true');
+        expect(renderedOptions[0].getAttribute('data-testid')).to.equal(
+            'dropdown-option',
+        );
+    });
+
+    it('should represent native multiple selection without false attributes', async () => {
+        await renderDropdown(
+            <Dropdown<Array<string>>
+                multiple
+                value={['two']}
+                options={options}
+                pt={{ multiple: { 'data-testid': 'multiple-control' } }}
+            />,
+        );
+
+        const control = container.querySelector<HTMLSelectElement>(
+            '[data-cratis-part="multiple"]',
+        );
+        const renderedOptions = container.querySelectorAll<HTMLOptionElement>(
+            '[data-cratis-part="multiple"] option',
+        );
+        expect(control?.dataset.selected).to.equal('true');
+        expect(control?.hasAttribute('data-invalid')).to.equal(false);
+        expect(control?.hasAttribute('data-disabled')).to.equal(false);
+        expect(control?.getAttribute('data-testid')).to.equal('multiple-control');
+        expect(renderedOptions[0].hasAttribute('data-selected')).to.equal(false);
+        expect(renderedOptions[1].dataset.selected).to.equal('true');
+        expect(renderedOptions[1].dataset.disabled).to.equal('true');
+    });
+});

From b046d51741b055ff2da9d54334c3354c109cca4b Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 17:44:14 +0200
Subject: [PATCH 153/267] Finalize authoritative field state propagation

---
 .../when_rendering_authoritative_states.tsx   | 44 +++++++++-
 Source/CommandForm/fields/PasswordField.tsx   |  2 -
 .../when_rendering_authoritative_states.tsx   | 81 ++++++++++++++++---
 Source/Common/DatePickerInput.tsx             |  8 ++
 .../when_rendering_authoritative_states.tsx   | 40 +++++++--
 Source/Dropdown/Dropdown.tsx                  | 29 +++++++
 6 files changed, 185 insertions(+), 19 deletions(-)

diff --git a/Source/CommandDialog/for_CommandStepper/when_rendering_authoritative_states.tsx b/Source/CommandDialog/for_CommandStepper/when_rendering_authoritative_states.tsx
index 949e3431..f53ec0ee 100644
--- a/Source/CommandDialog/for_CommandStepper/when_rendering_authoritative_states.tsx
+++ b/Source/CommandDialog/for_CommandStepper/when_rendering_authoritative_states.tsx
@@ -75,8 +75,48 @@ describe('when CommandStepper renders authoritative states', () => {
         });
     };
 
-    const parts = (name: string) =>
-        container.querySelectorAll<HTMLElement>(`[data-cratis-part="${name}"]`);
+    const parts = (name: string) => {
+        switch (name) {
+            case 'root':
+                return container.querySelectorAll<HTMLElement>(
+                    '[data-cratis-part="root"]',
+                );
+            case 'list':
+                return container.querySelectorAll<HTMLElement>(
+                    '[data-cratis-part="list"]',
+                );
+            case 'step':
+                return container.querySelectorAll<HTMLElement>(
+                    '[data-cratis-part="step"]',
+                );
+            case 'header':
+                return container.querySelectorAll<HTMLElement>(
+                    '[data-cratis-part="header"]',
+                );
+            case 'number':
+                return container.querySelectorAll<HTMLElement>(
+                    '[data-cratis-part="number"]',
+                );
+            case 'title':
+                return container.querySelectorAll<HTMLElement>(
+                    '[data-cratis-part="title"]',
+                );
+            case 'separator':
+                return container.querySelectorAll<HTMLElement>(
+                    '[data-cratis-part="separator"]',
+                );
+            case 'panels':
+                return container.querySelectorAll<HTMLElement>(
+                    '[data-cratis-part="panels"]',
+                );
+            case 'panel':
+                return container.querySelectorAll<HTMLElement>(
+                    '[data-cratis-part="panel"]',
+                );
+            default:
+                throw new Error(`Unknown CommandStepper part: ${name}`);
+        }
+    };
 
     it('should put busy and aggregate invalid state on root collection parts and pt destinations', async () => {
         await renderStepper(true, true);
diff --git a/Source/CommandForm/fields/PasswordField.tsx b/Source/CommandForm/fields/PasswordField.tsx
index fb33ad65..70e60ee1 100644
--- a/Source/CommandForm/fields/PasswordField.tsx
+++ b/Source/CommandForm/fields/PasswordField.tsx
@@ -90,8 +90,6 @@ const PasswordControl = (props: PasswordFieldComponentProps) => {
                     .join(' ')}
                 data-cratis-part='toggle'
                 data-disabled={props.pt?.toggle?.disabled || undefined}
-                data-pressed={visible || undefined}
-                aria-pressed={visible}
                 aria-label={
                     visible
                         ? (props.hideLabel ?? 'Hide password')
diff --git a/Source/CommandForm/for_field_states/when_rendering_authoritative_states.tsx b/Source/CommandForm/for_field_states/when_rendering_authoritative_states.tsx
index 275e08ad..af571a07 100644
--- a/Source/CommandForm/for_field_states/when_rendering_authoritative_states.tsx
+++ b/Source/CommandForm/for_field_states/when_rendering_authoritative_states.tsx
@@ -63,8 +63,64 @@ describe('when CommandForm fields render authoritative states', () => {
         });
     };
 
-    const part = (name: string) =>
-        container.querySelector<HTMLElement>(`[data-cratis-part="${name}"]`);
+    const part = (name: string) => {
+        switch (name) {
+            case 'root':
+                return container.querySelector<HTMLElement>(
+                    '[data-cratis-part="root"]',
+                );
+            case 'input':
+                return container.querySelector<HTMLElement>(
+                    '[data-cratis-part="input"]',
+                );
+            case 'box':
+                return container.querySelector<HTMLElement>(
+                    '[data-cratis-part="box"]',
+                );
+            case 'indicator':
+                return container.querySelector<HTMLElement>(
+                    '[data-cratis-part="indicator"]',
+                );
+            case 'option':
+                return container.querySelector<HTMLElement>(
+                    '[data-cratis-part="option"]',
+                );
+            case 'star':
+                return container.querySelector<HTMLElement>(
+                    '[data-cratis-part="star"]',
+                );
+            case 'control':
+                return container.querySelector<HTMLElement>(
+                    '[data-cratis-part="control"]',
+                );
+            case 'handle':
+                return container.querySelector<HTMLElement>(
+                    '[data-cratis-part="handle"]',
+                );
+            case 'item':
+                return container.querySelector<HTMLElement>(
+                    '[data-cratis-part="item"]',
+                );
+            case 'remove':
+                return container.querySelector<HTMLElement>(
+                    '[data-cratis-part="remove"]',
+                );
+            case 'toggle':
+                return container.querySelector<HTMLElement>(
+                    '[data-cratis-part="toggle"]',
+                );
+            case 'value':
+                return container.querySelector<HTMLElement>(
+                    '[data-cratis-part="value"]',
+                );
+            case 'textarea':
+                return container.querySelector<HTMLElement>(
+                    '[data-cratis-part="textarea"]',
+                );
+            default:
+                throw new Error(`Unknown CommandForm field part: ${name}`);
+        }
+    };
 
     it('should emit text invalid, disabled, and readonly only while present', async () => {
         await renderField(InputTextField, {
@@ -215,18 +271,23 @@ describe('when CommandForm fields render authoritative states', () => {
         expect(part('input')?.hasAttribute('data-readonly')).to.equal(false);
     });
 
-    it('should expose pressed state from the tracked password visibility toggle', async () => {
+    it('should expose the password toggle disabled state only while present', async () => {
         await renderField(PasswordField, {
             value: 'example',
-            pt: { toggle: { 'data-testid': 'password-toggle' } },
+            pt: {
+                toggle: {
+                    disabled: true,
+                    'data-testid': 'password-toggle',
+                },
+            },
         });
-        const toggle = part('toggle') as HTMLButtonElement;
-        expect(toggle.hasAttribute('data-pressed')).to.equal(false);
-        expect(toggle.getAttribute('data-testid')).to.equal('password-toggle');
+        expect(part('toggle')?.dataset.disabled).to.equal('true');
+        expect(part('toggle')?.getAttribute('data-testid')).to.equal(
+            'password-toggle',
+        );
 
-        await act(async () => toggle.click());
-        expect(part('toggle')?.dataset.pressed).to.equal('true');
-        expect(part('toggle')?.getAttribute('aria-pressed')).to.equal('true');
+        await renderField(PasswordField, { value: 'example' });
+        expect(part('toggle')?.hasAttribute('data-disabled')).to.equal(false);
     });
 
     it('should expose validation state on the remaining native field surfaces', async () => {
diff --git a/Source/Common/DatePickerInput.tsx b/Source/Common/DatePickerInput.tsx
index ebcd8df6..9fc2854b 100644
--- a/Source/Common/DatePickerInput.tsx
+++ b/Source/Common/DatePickerInput.tsx
@@ -1,6 +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 { useState } from 'react';
 import type {
     ButtonHTMLAttributes,
     CSSProperties,
@@ -197,6 +198,7 @@ export const DatePickerInput = ({
     'aria-labelledby': ariaLabelledby,
     'aria-describedby': ariaDescribedby,
 }: DatePickerInputProps) => {
+    const [isPickerOpen, setIsPickerOpen] = useState(false);
     const { messages } = useCratisComponentsConfig();
     const datePickerMessages = messages?.datePicker;
     const resolvedTodayLabel = todayLabel ?? datePickerMessages?.today ?? 'Today';
@@ -253,6 +255,8 @@ export const DatePickerInput = ({
             data-invalid={effectiveInvalid || undefined}
             data-disabled={effectiveDisabled || undefined}
             data-readonly={effectiveReadOnly || undefined}
+            data-open={isPickerOpen || undefined}
+            data-selected={value !== null || undefined}
             onBlur={onBlur}
         >
             <AriaDatePicker
@@ -261,6 +265,7 @@ export const DatePickerInput = ({
                 isDisabled={effectiveDisabled}
                 isReadOnly={effectiveReadOnly}
                 isInvalid={effectiveInvalid}
+                onOpenChange={setIsPickerOpen}
                 minValue={minValue}
                 maxValue={maxValue}
                 granularity={showTime ? 'minute' : 'day'}
@@ -291,6 +296,7 @@ export const DatePickerInput = ({
                                     data-invalid={effectiveInvalid || undefined}
                                     data-disabled={effectiveDisabled || undefined}
                                     data-readonly={effectiveReadOnly || undefined}
+                                    data-selected={value !== null || undefined}
                                 />
                             )}
                         >
@@ -310,6 +316,7 @@ export const DatePickerInput = ({
                                         data-invalid={effectiveInvalid || undefined}
                                         data-disabled={effectiveDisabled || undefined}
                                         data-readonly={effectiveReadOnly || undefined}
+                                        data-selected={value !== null || undefined}
                                     />
                                 )}
                             >
@@ -372,6 +379,7 @@ export const DatePickerInput = ({
                                                 undefined
                                             }
                                             data-readonly={effectiveReadOnly || undefined}
+                                            data-selected={value !== null || undefined}
                                         />
                                     )}
                                     aria-label={
diff --git a/Source/Common/for_DatePickerInput/when_rendering_authoritative_states.tsx b/Source/Common/for_DatePickerInput/when_rendering_authoritative_states.tsx
index 7bdaa229..831a524d 100644
--- a/Source/Common/for_DatePickerInput/when_rendering_authoritative_states.tsx
+++ b/Source/Common/for_DatePickerInput/when_rendering_authoritative_states.tsx
@@ -45,8 +45,40 @@ describe('when DatePickerInput renders authoritative states', () => {
         });
     };
 
-    const part = (name: string) =>
-        container.querySelector<HTMLElement>(`[data-cratis-part="${name}"]`);
+    const part = (name: string, parent: ParentNode = container) => {
+        switch (name) {
+            case 'root':
+                return parent.querySelector<HTMLElement>(
+                    '[data-cratis-part="root"]',
+                );
+            case 'group':
+                return parent.querySelector<HTMLElement>(
+                    '[data-cratis-part="group"]',
+                );
+            case 'input':
+                return parent.querySelector<HTMLElement>(
+                    '[data-cratis-part="input"]',
+                );
+            case 'trigger':
+                return parent.querySelector<HTMLElement>(
+                    '[data-cratis-part="trigger"]',
+                );
+            case 'popover':
+                return parent.querySelector<HTMLElement>(
+                    '[data-cratis-part="popover"]',
+                );
+            case 'dialog':
+                return parent.querySelector<HTMLElement>(
+                    '[data-cratis-part="dialog"]',
+                );
+            case 'calendar':
+                return parent.querySelector<HTMLElement>(
+                    '[data-cratis-part="calendar"]',
+                );
+            default:
+                throw new Error(`Unknown DatePickerInput part: ${name}`);
+        }
+    };
 
     it('should put selected, invalid, disabled, and readonly on root and control pt destinations', async () => {
         await renderPicker(
@@ -126,9 +158,7 @@ describe('when DatePickerInput renders authoritative states', () => {
             expect(part(name)?.dataset.open).to.equal('true');
         }
         for (const name of ['popover', 'dialog', 'calendar']) {
-            const element = document.querySelector<HTMLElement>(
-                `[data-cratis-part="${name}"]`,
-            );
+            const element = part(name, document);
             expect(element?.dataset.open).to.equal('true');
             expect(element?.getAttribute('data-testid')).to.equal(`date-${name}`);
         }
diff --git a/Source/Dropdown/Dropdown.tsx b/Source/Dropdown/Dropdown.tsx
index d33bbfb3..bff96d88 100644
--- a/Source/Dropdown/Dropdown.tsx
+++ b/Source/Dropdown/Dropdown.tsx
@@ -1,6 +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 { useState } from 'react';
 import type {
     ButtonHTMLAttributes,
     CSSProperties,
@@ -248,6 +249,7 @@ export const Dropdown = <T = unknown,>({
     onBlur,
     pt,
 }: DropdownProps<T>) => {
+    const [isOpen, setIsOpen] = useState(false);
     const { messages } = useCratisComponentsConfig();
     const dropdownMessages = messages?.dropdown;
     const showOptionsLabel =
@@ -331,11 +333,14 @@ export const Dropdown = <T = unknown,>({
                     data-cratis-part='root'
                     data-invalid={effectiveInvalid || undefined}
                     data-disabled={disabled || undefined}
+                    data-open={isOpen || undefined}
+                    data-selected={selectedKeys.length > 0 || undefined}
                     style={{ ...pt?.root?.style, ...pt?.select?.style, ...style }}
                     onBlur={onBlur}
                 >
                     <ComboBox
                         selectionMode='multiple'
+                        onOpenChange={setIsOpen}
                         value={selectedKeys}
                         onChange={selectOptions}
                         isDisabled={disabled}
@@ -355,6 +360,10 @@ export const Dropdown = <T = unknown,>({
                                 pt?.value?.className,
                             )}
                             data-cratis-part='value'
+                            data-disabled={disabled || undefined}
+                            data-invalid={effectiveInvalid || undefined}
+                            data-open={isOpen || undefined}
+                            data-selected={selectedKeys.length > 0 || undefined}
                         />
                         <Input
                             {...pt?.filter}
@@ -371,6 +380,7 @@ export const Dropdown = <T = unknown,>({
                             data-cratis-part='filter'
                             data-disabled={disabled || undefined}
                             data-invalid={effectiveInvalid || undefined}
+                            data-open={isOpen || undefined}
                         />
                         <ComboBoxButton
                             {...asReactAriaButtonProps(pt?.trigger)}
@@ -381,6 +391,7 @@ export const Dropdown = <T = unknown,>({
                             data-cratis-part='trigger'
                             data-disabled={disabled || undefined}
                             data-invalid={effectiveInvalid || undefined}
+                            data-selected={selectedKeys.length > 0 || undefined}
                             render={renderTriggerWithOpenState}
                             aria-label={showOptionsLabel}
                         >
@@ -467,6 +478,7 @@ export const Dropdown = <T = unknown,>({
                 data-cratis-part='root'
                 data-invalid={effectiveInvalid || undefined}
                 data-disabled={disabled || undefined}
+                data-selected={selectedKeys.length > 0 || undefined}
                 style={{ ...pt?.root?.style, ...pt?.select?.style, ...style }}
                 onBlur={onBlur}
             >
@@ -490,6 +502,7 @@ export const Dropdown = <T = unknown,>({
                     data-cratis-part='multiple'
                     data-disabled={disabled || undefined}
                     data-invalid={effectiveInvalid || undefined}
+                    data-selected={selectedKeys.length > 0 || undefined}
                     onChange={(event) => {
                         const keys = Array.from(
                             event.currentTarget.selectedOptions,
@@ -550,10 +563,13 @@ export const Dropdown = <T = unknown,>({
                 data-cratis-part='root'
                 data-invalid={effectiveInvalid || undefined}
                 data-disabled={disabled || undefined}
+                data-open={isOpen || undefined}
+                data-selected={selectedKey !== null || undefined}
                 style={{ ...pt?.root?.style, ...pt?.select?.style, ...style }}
                 onBlur={onBlur}
             >
                 <ComboBox
+                    onOpenChange={setIsOpen}
                     value={selectedKey}
                     onChange={selectOption}
                     isDisabled={disabled}
@@ -580,6 +596,7 @@ export const Dropdown = <T = unknown,>({
                         data-cratis-part='filter'
                         data-disabled={disabled || undefined}
                         data-invalid={effectiveInvalid || undefined}
+                        data-open={isOpen || undefined}
                     />
                     <ComboBoxButton
                         {...asReactAriaButtonProps(pt?.trigger)}
@@ -590,6 +607,7 @@ export const Dropdown = <T = unknown,>({
                         data-cratis-part='trigger'
                         data-disabled={disabled || undefined}
                         data-invalid={effectiveInvalid || undefined}
+                        data-selected={selectedKey !== null || undefined}
                         render={renderTriggerWithOpenState}
                         aria-label={showOptionsLabel}
                     >
@@ -676,10 +694,13 @@ export const Dropdown = <T = unknown,>({
             data-cratis-part='root'
             data-invalid={effectiveInvalid || undefined}
             data-disabled={disabled || undefined}
+            data-open={isOpen || undefined}
+            data-selected={selectedKey !== null || undefined}
             style={{ ...pt?.root?.style, ...pt?.select?.style, ...style }}
             onBlur={onBlur}
         >
             <AriaSelect
+                onOpenChange={setIsOpen}
                 value={selectedKey}
                 onChange={selectOption}
                 isDisabled={disabled}
@@ -705,6 +726,7 @@ export const Dropdown = <T = unknown,>({
                     data-cratis-part='trigger'
                     data-disabled={disabled || undefined}
                     data-invalid={effectiveInvalid || undefined}
+                    data-selected={selectedKey !== null || undefined}
                     render={renderTriggerWithOpenState}
                 >
                     <SelectValue
@@ -714,6 +736,10 @@ export const Dropdown = <T = unknown,>({
                             pt?.value?.className,
                         )}
                         data-cratis-part='value'
+                        data-disabled={disabled || undefined}
+                        data-invalid={effectiveInvalid || undefined}
+                        data-open={isOpen || undefined}
+                        data-selected={selectedKey !== null || undefined}
                     >
                         {selectedOption?.label ?? placeholder}
                     </SelectValue>
@@ -724,6 +750,9 @@ export const Dropdown = <T = unknown,>({
                             pt?.indicator?.className,
                         )}
                         data-cratis-part='indicator'
+                        data-disabled={disabled || undefined}
+                        data-invalid={effectiveInvalid || undefined}
+                        data-open={isOpen || undefined}
                         aria-hidden='true'
                     >
                         ⌄

From ded7a5dffddbf1a2c7b97b68cde95c468cf5daea Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 17:47:53 +0200
Subject: [PATCH 154/267] Preserve CommandStepper busy navigation behavior

Expose busy state without disabling headers that remained interactive before the state-attribute change. Use typed native ids in pass-through verification.
---
 .../CommandDialog/CommandStepperContent.tsx   |  2 +-
 .../when_rendering_authoritative_states.tsx   | 37 ++++++++++---------
 2 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/Source/CommandDialog/CommandStepperContent.tsx b/Source/CommandDialog/CommandStepperContent.tsx
index e959c72f..5f2f22fd 100644
--- a/Source/CommandDialog/CommandStepperContent.tsx
+++ b/Source/CommandDialog/CommandStepperContent.tsx
@@ -228,7 +228,7 @@ export const CommandStepperContent = ({
                 const selected = index === currentStep;
                 const visited = visitedSteps.has(index);
                 const invalid = stepErrors[index] ?? false;
-                const headerDisabled = isStepperBusy || (linear && !selected);
+                const headerDisabled = linear && !selected;
 
                 return (
                     <li
diff --git a/Source/CommandDialog/for_CommandStepper/when_rendering_authoritative_states.tsx b/Source/CommandDialog/for_CommandStepper/when_rendering_authoritative_states.tsx
index f53ec0ee..3191ff70 100644
--- a/Source/CommandDialog/for_CommandStepper/when_rendering_authoritative_states.tsx
+++ b/Source/CommandDialog/for_CommandStepper/when_rendering_authoritative_states.tsx
@@ -28,6 +28,7 @@ describe('when CommandStepper renders authoritative states', () => {
     let root: Root;
 
     beforeEach(() => {
+        // SAFETY: React's test-only act flag is intentionally absent from the DOM global type.
         (
             globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
         ).IS_REACT_ACT_ENVIRONMENT = true;
@@ -54,15 +55,15 @@ describe('when CommandStepper renders authoritative states', () => {
                             withError && fieldName === 'sample' ? 'Required' : undefined
                         }
                         pt={{
-                            root: { 'data-testid': 'stepper-root' },
-                            list: { 'data-testid': 'stepper-list' },
-                            step: { 'data-testid': 'stepper-step' },
-                            header: { 'data-testid': 'stepper-header' },
-                            number: { 'data-testid': 'stepper-number' },
-                            title: { 'data-testid': 'stepper-title' },
-                            separator: { 'data-testid': 'stepper-separator' },
-                            panels: { 'data-testid': 'stepper-panels' },
-                            panel: { 'data-testid': 'stepper-panel' },
+                            root: { id: 'stepper-root' },
+                            list: { id: 'stepper-list' },
+                            step: { id: 'stepper-step' },
+                            header: { id: 'stepper-header' },
+                            number: { id: 'stepper-number' },
+                            title: { id: 'stepper-title' },
+                            separator: { id: 'stepper-separator' },
+                            panels: { id: 'stepper-panels' },
+                            panel: { id: 'stepper-panel' },
                         }}
                     >
                         <StepperPanel header='First'>
@@ -125,7 +126,7 @@ describe('when CommandStepper renders authoritative states', () => {
             const element = parts(name)[0];
             expect(element.dataset.busy).to.equal('true');
             expect(element.dataset.invalid).to.equal('true');
-            expect(element.getAttribute('data-testid')).to.equal(`stepper-${name}`);
+            expect(element.getAttribute('id')).to.equal(`stepper-${name}`);
         }
     });
 
@@ -137,7 +138,7 @@ describe('when CommandStepper renders authoritative states', () => {
         expect(steps[0].dataset.visited).to.equal('true');
         expect(steps[0].dataset.invalid).to.equal('true');
         expect(steps[0].dataset.busy).to.equal('true');
-        expect(steps[0].getAttribute('data-testid')).to.equal('stepper-step');
+        expect(steps[0].getAttribute('id')).to.equal('stepper-step');
         expect(steps[1].dataset.selected).to.equal('true');
         expect(steps[1].dataset.active).to.equal('true');
         expect(steps[1].dataset.visited).to.equal('true');
@@ -152,22 +153,22 @@ describe('when CommandStepper renders authoritative states', () => {
             expect(elements[1].dataset.visited).to.equal('true');
             expect(elements[1].hasAttribute('data-invalid')).to.equal(false);
             expect(elements[1].dataset.busy).to.equal('true');
-            expect(elements[1].getAttribute('data-testid')).to.equal(
+            expect(elements[1].getAttribute('id')).to.equal(
                 `stepper-${name}`,
             );
         }
 
         const headers = parts('header') as NodeListOf<HTMLButtonElement>;
-        expect(headers[0].dataset.disabled).to.equal('true');
-        expect(headers[0].disabled).to.equal(true);
-        expect(headers[1].dataset.disabled).to.equal('true');
-        expect(headers[1].disabled).to.equal(true);
+        expect(headers[0].hasAttribute('data-disabled')).to.equal(false);
+        expect(headers[0].disabled).to.equal(false);
+        expect(headers[1].hasAttribute('data-disabled')).to.equal(false);
+        expect(headers[1].disabled).to.equal(false);
 
         const separator = parts('separator')[0];
         expect(separator.dataset.visited).to.equal('true');
         expect(separator.dataset.invalid).to.equal('true');
         expect(separator.dataset.busy).to.equal('true');
-        expect(separator.getAttribute('data-testid')).to.equal('stepper-separator');
+        expect(separator.getAttribute('id')).to.equal('stepper-separator');
     });
 
     it('should put selected, visited, invalid, and busy on the corresponding panels', async () => {
@@ -181,7 +182,7 @@ describe('when CommandStepper renders authoritative states', () => {
         expect(panels[1].dataset.selected).to.equal('true');
         expect(panels[1].dataset.visited).to.equal('true');
         expect(panels[1].hasAttribute('data-invalid')).to.equal(false);
-        expect(panels[1].getAttribute('data-testid')).to.equal('stepper-panel');
+        expect(panels[1].getAttribute('id')).to.equal('stepper-panel');
     });
 
     it('should omit false invalid and busy states while preserving selected and visited migration attributes', async () => {

From a768973651c343b385efe4ba548c579e8008b4d2 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 17:45:15 +0200
Subject: [PATCH 155/267] Add semantic Components migration codemods

---
 Codemods/lib/buttonVariantToneTransform.js    | 379 +++++++++++++++++
 Codemods/lib/changeHandlerTransform.js        | 380 ++++++++++++++++++
 Codemods/lib/runTransformCli.js               | 119 ++++++
 Codemods/package.json                         |   2 +
 Codemods/scripts/button-variant-tone.js       |  13 +
 Codemods/scripts/change-handler.js            |  13 +
 .../aliases-and-precedence/expected.tsx       |  11 +
 .../aliases-and-precedence/input.tsx          |  11 +
 .../dynamic-refusal/expected.tsx              |   8 +
 .../button-fixtures/dynamic-refusal/input.tsx |   8 +
 .../non-components-untouched/expected.tsx     |   3 +
 .../non-components-untouched/input.tsx        |   3 +
 .../aliases-and-safe-wrappers/expected.tsx    |  13 +
 .../aliases-and-safe-wrappers/input.tsx       |  13 +
 .../already-semantic/expected.tsx             |  10 +
 .../already-semantic/input.tsx                |  10 +
 .../ambiguous-refusal/expected.tsx            |   9 +
 .../ambiguous-refusal/input.tsx               |   9 +
 Codemods/test/migration-cli.test.js           | 127 ++++++
 Codemods/test/migration-transforms.test.js    | 141 +++++++
 Codemods/test/verify-packed-package.mjs       |  66 ++-
 21 files changed, 1339 insertions(+), 9 deletions(-)
 create mode 100644 Codemods/lib/buttonVariantToneTransform.js
 create mode 100644 Codemods/lib/changeHandlerTransform.js
 create mode 100644 Codemods/lib/runTransformCli.js
 create mode 100755 Codemods/scripts/button-variant-tone.js
 create mode 100755 Codemods/scripts/change-handler.js
 create mode 100644 Codemods/test/button-fixtures/aliases-and-precedence/expected.tsx
 create mode 100644 Codemods/test/button-fixtures/aliases-and-precedence/input.tsx
 create mode 100644 Codemods/test/button-fixtures/dynamic-refusal/expected.tsx
 create mode 100644 Codemods/test/button-fixtures/dynamic-refusal/input.tsx
 create mode 100644 Codemods/test/button-fixtures/non-components-untouched/expected.tsx
 create mode 100644 Codemods/test/button-fixtures/non-components-untouched/input.tsx
 create mode 100644 Codemods/test/change-handler-fixtures/aliases-and-safe-wrappers/expected.tsx
 create mode 100644 Codemods/test/change-handler-fixtures/aliases-and-safe-wrappers/input.tsx
 create mode 100644 Codemods/test/change-handler-fixtures/already-semantic/expected.tsx
 create mode 100644 Codemods/test/change-handler-fixtures/already-semantic/input.tsx
 create mode 100644 Codemods/test/change-handler-fixtures/ambiguous-refusal/expected.tsx
 create mode 100644 Codemods/test/change-handler-fixtures/ambiguous-refusal/input.tsx
 create mode 100644 Codemods/test/migration-cli.test.js
 create mode 100644 Codemods/test/migration-transforms.test.js

diff --git a/Codemods/lib/buttonVariantToneTransform.js b/Codemods/lib/buttonVariantToneTransform.js
new file mode 100644
index 00000000..e8dc6f5c
--- /dev/null
+++ b/Codemods/lib/buttonVariantToneTransform.js
@@ -0,0 +1,379 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import ts from 'typescript';
+import { packageName as defaultPackageName } from './namespaceMap.js';
+
+const TODO = 'TODO(cratis-codemod)';
+const LEGACY_VARIANT_PROPS = ['link', 'text', 'outlined'];
+const RELEVANT_PROPS = new Set([
+    ...LEGACY_VARIANT_PROPS,
+    'rounded',
+    'severity',
+    'variant',
+    'tone',
+    'shape',
+]);
+const severityToTone = {
+    secondary: 'neutral',
+    info: 'accent',
+    help: 'accent',
+    success: 'positive',
+    warn: 'caution',
+    danger: 'critical',
+    contrast: 'neutral',
+};
+
+/**
+ * Migrates deprecated Button JSX appearance props to variant/tone/shape.
+ * Only Button bindings imported from the Components Common subpath are considered.
+ *
+ * @param {string} fileName
+ * @param {string} text
+ * @param {{ packageName?: string }} [options]
+ */
+export function transformButtonVariantTone(fileName, text, options = {}) {
+    const packageName = options.packageName ?? defaultPackageName;
+    const sourceFile = ts.createSourceFile(
+        fileName,
+        text,
+        ts.ScriptTarget.Latest,
+        true,
+        scriptKindFor(fileName),
+    );
+    const namedButtons = new Set();
+    const commonNamespaces = new Set();
+    const diagnostics = [];
+    const edits = [];
+
+    for (const statement of sourceFile.statements) {
+        if (
+            !ts.isImportDeclaration(statement) ||
+            !ts.isStringLiteral(statement.moduleSpecifier) ||
+            statement.moduleSpecifier.text !== `${packageName}/Common` ||
+            !statement.importClause ||
+            statement.importClause.isTypeOnly
+        )
+            continue;
+
+        const bindings = statement.importClause.namedBindings;
+        if (bindings && ts.isNamespaceImport(bindings)) {
+            commonNamespaces.add(bindings.name.text);
+        } else if (bindings && ts.isNamedImports(bindings)) {
+            for (const element of bindings.elements) {
+                if (
+                    !ts.isTypeOnlyImportOrExportDeclaration(element) &&
+                    (element.propertyName ?? element.name).text === 'Button'
+                ) {
+                    namedButtons.add(element.name.text);
+                }
+            }
+        }
+    }
+
+    const report = (node, message) => {
+        const { line, character } = sourceFile.getLineAndCharacterOfPosition(
+            node.getStart(sourceFile),
+        );
+        diagnostics.push({
+            file: fileName,
+            line: line + 1,
+            column: character + 1,
+            message,
+        });
+    };
+
+    const visit = (node) => {
+        if (ts.isJsxOpeningElement(node) || ts.isJsxSelfClosingElement(node)) {
+            if (isImportedButtonTag(node.tagName, namedButtons, commonNamespaces)) {
+                migrateOpeningElement(node);
+            }
+        }
+        ts.forEachChild(node, visit);
+    };
+
+    const migrateOpeningElement = (node) => {
+        const attributes = new Map();
+        let spread;
+        let duplicate;
+        for (const attribute of node.attributes.properties) {
+            if (ts.isJsxSpreadAttribute(attribute)) {
+                spread ??= attribute;
+                continue;
+            }
+            const name = attribute.name.getText(sourceFile);
+            if (!RELEVANT_PROPS.has(name)) continue;
+            if (attributes.has(name)) duplicate ??= attribute;
+            attributes.set(name, attribute);
+        }
+
+        if (spread || duplicate) {
+            const problem = spread ?? duplicate;
+            report(
+                problem,
+                spread
+                    ? 'Button appearance migration refused: a JSX spread can provide or override legacy/new appearance props. Expand the spread and review it manually.'
+                    : 'Button appearance migration refused: duplicate appearance props depend on JSX evaluation order. Resolve the duplicate manually.',
+            );
+            annotateExpression(node, problem);
+            return;
+        }
+
+        const replacements = new Map();
+        const removals = new Set();
+        let unsupportedNode;
+        const unsupportedMessages = [];
+
+        const variantAttr = attributes.get('variant');
+        const legacyVariantAttrs = LEGACY_VARIANT_PROPS.map((name) => [
+            name,
+            attributes.get(name),
+        ]).filter(([, attribute]) => attribute);
+        let selectedVariant;
+        let variantResolved = true;
+
+        if (variantAttr) {
+            if (
+                legacyVariantAttrs.length > 0 &&
+                staticString(variantAttr) === undefined
+            ) {
+                variantResolved = false;
+                unsupportedNode ??= variantAttr;
+                unsupportedMessages.push(
+                    'unknown explicit Button variant conflicts with legacy variant props',
+                );
+            } else {
+                for (const [, attribute] of legacyVariantAttrs) removals.add(attribute);
+            }
+        } else if (legacyVariantAttrs.length > 0) {
+            const values = { link: false, text: false, outlined: false };
+            for (const [name, attribute] of legacyVariantAttrs)
+                values[name] = staticBoolean(attribute);
+            const firstUnknown = legacyVariantAttrs.find(
+                ([name]) => values[name] === undefined,
+            );
+            if (values.link === true) selectedVariant = 'link';
+            else if (values.link === undefined) variantResolved = false;
+            else if (values.text === true) selectedVariant = 'ghost';
+            else if (values.text === undefined) variantResolved = false;
+            else if (values.outlined === true) selectedVariant = 'outline';
+            else if (values.outlined === undefined) variantResolved = false;
+            else selectedVariant = 'solid';
+
+            if (variantResolved) {
+                replacements.set(
+                    legacyVariantAttrs[0][1],
+                    `variant='${selectedVariant}'`,
+                );
+                for (const [, attribute] of legacyVariantAttrs.slice(1))
+                    removals.add(attribute);
+            } else {
+                unsupportedNode ??= firstUnknown?.[1];
+                unsupportedMessages.push('dynamic Button text/link/outlined value');
+            }
+        }
+
+        const shapeAttr = attributes.get('shape');
+        const roundedAttr = attributes.get('rounded');
+        if (shapeAttr && roundedAttr) {
+            if (staticString(shapeAttr) === undefined) {
+                unsupportedNode ??= shapeAttr;
+                unsupportedMessages.push(
+                    'unknown explicit Button shape conflicts with rounded',
+                );
+            } else {
+                removals.add(roundedAttr);
+            }
+        } else if (roundedAttr) {
+            const rounded = staticBoolean(roundedAttr);
+            if (rounded === undefined) {
+                unsupportedNode ??= roundedAttr;
+                unsupportedMessages.push('dynamic Button rounded value');
+            } else if (rounded) {
+                replacements.set(roundedAttr, "shape='pill'");
+            } else {
+                removals.add(roundedAttr);
+            }
+        }
+
+        const toneAttr = attributes.get('tone');
+        const severityAttr = attributes.get('severity');
+        let contrastNeedsSolid = false;
+        if (toneAttr && severityAttr) {
+            if (staticString(toneAttr) === undefined) {
+                unsupportedNode ??= toneAttr;
+                unsupportedMessages.push(
+                    'unknown explicit Button tone conflicts with severity',
+                );
+            } else {
+                removals.add(severityAttr);
+            }
+        } else if (severityAttr) {
+            const severity = staticString(severityAttr);
+            if (severity === undefined || !Object.hasOwn(severityToTone, severity)) {
+                unsupportedNode ??= severityAttr;
+                unsupportedMessages.push('dynamic or unknown Button severity value');
+            } else {
+                const replacement = `tone='${severityToTone[severity]}'`;
+                contrastNeedsSolid = severity === 'contrast';
+                replacements.set(severityAttr, replacement);
+            }
+        }
+
+        if (contrastNeedsSolid && !variantAttr && variantResolved && !selectedVariant) {
+            const severityReplacement = replacements.get(severityAttr);
+            replacements.set(severityAttr, `${severityReplacement} variant='solid'`);
+        }
+
+        if (unsupportedNode) {
+            report(
+                unsupportedNode,
+                `Button appearance migration requires manual review: ${unsupportedMessages.join(' and ')}. The uncertain prop group was left unchanged.`,
+            );
+            annotateExpression(node, unsupportedNode);
+        }
+
+        for (const [attribute, replacement] of replacements) {
+            edits.push({
+                start: attribute.getStart(sourceFile),
+                end: attribute.getEnd(),
+                replacement,
+            });
+        }
+        for (const attribute of removals) {
+            if (!replacements.has(attribute)) {
+                edits.push({
+                    start: attribute.getStart(sourceFile),
+                    end: attribute.getEnd(),
+                    replacement: '',
+                });
+            }
+        }
+    };
+
+    const annotateExpression = (opening, problem) => {
+        if (opening.getText(sourceFile).includes(TODO)) return;
+        let expression;
+        if (ts.isJsxSpreadAttribute(problem)) expression = problem.expression;
+        else if (
+            ts.isJsxAttribute(problem) &&
+            problem.initializer &&
+            ts.isJsxExpression(problem.initializer)
+        ) {
+            expression = problem.initializer.expression;
+        }
+        if (!expression && ts.isJsxAttribute(problem)) {
+            if (problem.initializer && ts.isStringLiteral(problem.initializer)) {
+                edits.push({
+                    start: problem.initializer.getStart(sourceFile),
+                    end: problem.initializer.getEnd(),
+                    replacement: `{/* ${TODO}: review unsupported Button appearance props. */ ${problem.initializer.getText(sourceFile)}}`,
+                });
+            } else if (!problem.initializer) {
+                edits.push({
+                    start: problem.getStart(sourceFile),
+                    end: problem.getEnd(),
+                    replacement: `${problem.name.getText(sourceFile)}={/* ${TODO}: review unsupported Button appearance props. */ true}`,
+                });
+            }
+            return;
+        }
+        if (expression) {
+            edits.push({
+                start: expression.getStart(sourceFile),
+                end: expression.getStart(sourceFile),
+                replacement: `/* ${TODO}: review unsupported Button appearance props. */ `,
+            });
+        }
+    };
+
+    visit(sourceFile);
+    return applyEdits(text, edits, diagnostics);
+}
+
+function isImportedButtonTag(tag, namedButtons, commonNamespaces) {
+    if (ts.isIdentifier(tag)) return namedButtons.has(tag.text);
+    return (
+        ts.isPropertyAccessExpression(tag) &&
+        ts.isIdentifier(tag.expression) &&
+        commonNamespaces.has(tag.expression.text) &&
+        tag.name.text === 'Button'
+    );
+}
+
+function staticBoolean(attribute) {
+    if (!attribute.initializer) return true;
+    if (ts.isStringLiteral(attribute.initializer)) return true;
+    if (!ts.isJsxExpression(attribute.initializer) || !attribute.initializer.expression)
+        return undefined;
+    const expression = unwrap(attribute.initializer.expression);
+    if (expression.kind === ts.SyntaxKind.TrueKeyword) return true;
+    if (
+        expression.kind === ts.SyntaxKind.FalseKeyword ||
+        expression.kind === ts.SyntaxKind.NullKeyword
+    )
+        return false;
+    if (ts.isStringLiteral(expression) || ts.isNoSubstitutionTemplateLiteral(expression))
+        return true;
+    if (ts.isNumericLiteral(expression)) return Number(expression.text) !== 0;
+    return undefined;
+}
+
+function staticString(attribute) {
+    if (!attribute.initializer) return undefined;
+    if (ts.isStringLiteral(attribute.initializer)) return attribute.initializer.text;
+    if (!ts.isJsxExpression(attribute.initializer) || !attribute.initializer.expression)
+        return undefined;
+    const expression = unwrap(attribute.initializer.expression);
+    return ts.isStringLiteral(expression) ||
+        ts.isNoSubstitutionTemplateLiteral(expression)
+        ? expression.text
+        : undefined;
+}
+
+function unwrap(node) {
+    while (
+        ts.isParenthesizedExpression(node) ||
+        ts.isAsExpression(node) ||
+        ts.isTypeAssertionExpression(node)
+    ) {
+        node = node.expression;
+    }
+    return node;
+}
+
+function applyEdits(text, edits, diagnostics) {
+    if (edits.length === 0) return { text, changed: false, diagnostics };
+    edits.sort((a, b) => a.start - b.start || a.end - b.end);
+    const unique = [];
+    for (const edit of edits) {
+        const previous = unique.at(-1);
+        if (previous && edit.start < previous.end) continue;
+        if (
+            previous &&
+            edit.start === previous.start &&
+            edit.end === previous.end &&
+            edit.replacement === previous.replacement
+        )
+            continue;
+        unique.push(edit);
+    }
+    let output = text;
+    for (let index = unique.length - 1; index >= 0; index--) {
+        const edit = unique[index];
+        output = output.slice(0, edit.start) + edit.replacement + output.slice(edit.end);
+    }
+    return { text: output, changed: output !== text, diagnostics };
+}
+
+function scriptKindFor(fileName) {
+    if (fileName.endsWith('.tsx')) return ts.ScriptKind.TSX;
+    if (fileName.endsWith('.jsx')) return ts.ScriptKind.JSX;
+    if (
+        fileName.endsWith('.js') ||
+        fileName.endsWith('.mjs') ||
+        fileName.endsWith('.cjs')
+    )
+        return ts.ScriptKind.JS;
+    return ts.ScriptKind.TS;
+}
diff --git a/Codemods/lib/changeHandlerTransform.js b/Codemods/lib/changeHandlerTransform.js
new file mode 100644
index 00000000..46a41997
--- /dev/null
+++ b/Codemods/lib/changeHandlerTransform.js
@@ -0,0 +1,380 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import ts from 'typescript';
+import { packageName as defaultPackageName } from './namespaceMap.js';
+
+const TODO = 'TODO(cratis-codemod)';
+const affectedComponents = {
+    CommandForm: {
+        InputTextField: new Set(['target.value', 'currentTarget.value']),
+        PasswordField: new Set(['target.value', 'currentTarget.value']),
+        TextAreaField: new Set(['target.value', 'currentTarget.value']),
+        ColorPickerField: new Set(['target.value', 'currentTarget.value']),
+        CheckboxField: new Set(['target.checked', 'currentTarget.checked']),
+        ToggleSwitchField: new Set(['target.checked', 'currentTarget.checked']),
+        NumberField: new Set(['target.valueAsNumber', 'currentTarget.valueAsNumber']),
+        SliderField: new Set(['target.valueAsNumber', 'currentTarget.valueAsNumber']),
+        DropdownField: new Set(['value']),
+        MultiSelectField: new Set(['value']),
+    },
+    Dropdown: {
+        Dropdown: new Set(['value']),
+    },
+};
+
+/**
+ * Rewrites structurally-proven legacy event-wrapper JSX callbacks to semantic values.
+ *
+ * @param {string} fileName
+ * @param {string} text
+ * @param {{ packageName?: string }} [options]
+ */
+export function transformChangeHandlers(fileName, text, options = {}) {
+    const packageName = options.packageName ?? defaultPackageName;
+    const sourceFile = ts.createSourceFile(
+        fileName,
+        text,
+        ts.ScriptTarget.Latest,
+        true,
+        scriptKindFor(fileName),
+    );
+    const named = new Map();
+    const namespaces = new Map();
+    const diagnostics = [];
+    const edits = [];
+
+    for (const statement of sourceFile.statements) {
+        if (
+            !ts.isImportDeclaration(statement) ||
+            !ts.isStringLiteral(statement.moduleSpecifier) ||
+            !statement.importClause ||
+            statement.importClause.isTypeOnly
+        )
+            continue;
+        const group = groupForSpecifier(statement.moduleSpecifier.text, packageName);
+        if (!group) continue;
+        const bindings = statement.importClause.namedBindings;
+        if (bindings && ts.isNamespaceImport(bindings)) {
+            namespaces.set(bindings.name.text, group);
+        } else if (bindings && ts.isNamedImports(bindings)) {
+            for (const element of bindings.elements) {
+                const imported = (element.propertyName ?? element.name).text;
+                if (
+                    !ts.isTypeOnlyImportOrExportDeclaration(element) &&
+                    affectedComponents[group][imported]
+                ) {
+                    named.set(element.name.text, { group, component: imported });
+                }
+            }
+        }
+    }
+
+    const report = (node, component, reason) => {
+        const { line, character } = sourceFile.getLineAndCharacterOfPosition(
+            node.getStart(sourceFile),
+        );
+        diagnostics.push({
+            file: fileName,
+            line: line + 1,
+            column: character + 1,
+            message: `${component} change-handler migration requires manual review: ${reason}. The callback was left unchanged.`,
+        });
+    };
+
+    const visit = (node) => {
+        if (ts.isJsxOpeningElement(node) || ts.isJsxSelfClosingElement(node)) {
+            const target = resolveTarget(node.tagName, named, namespaces);
+            if (target) migrateCallbacks(node, target);
+        }
+        ts.forEachChild(node, visit);
+    };
+
+    const migrateCallbacks = (opening, target) => {
+        const allowed = affectedComponents[target.group][target.component];
+        for (const attribute of opening.attributes.properties) {
+            if (!ts.isJsxAttribute(attribute)) continue;
+            const propName = attribute.name.getText(sourceFile);
+            if (propName !== 'onChange' && propName !== 'onValueChange') continue;
+            if (
+                !attribute.initializer ||
+                !ts.isJsxExpression(attribute.initializer) ||
+                !attribute.initializer.expression
+            )
+                continue;
+
+            const callback = unwrap(attribute.initializer.expression);
+            if (!ts.isArrowFunction(callback) && !ts.isFunctionExpression(callback))
+                continue;
+            const result = analyzeCallback(callback, allowed);
+            if (result.kind === 'already-semantic' || result.kind === 'irrelevant')
+                continue;
+            if (result.kind === 'unsupported') {
+                report(attribute, target.component, result.reason);
+                annotate(attribute);
+                continue;
+            }
+
+            edits.push({
+                start: result.parameter.getStart(sourceFile),
+                end: result.parameter.getEnd(),
+                replacement: result.name,
+            });
+            edits.push({
+                start: result.argument.getStart(sourceFile),
+                end: result.argument.getEnd(),
+                replacement: result.name,
+            });
+        }
+    };
+
+    const annotate = (attribute) => {
+        if (attribute.getText(sourceFile).includes(TODO)) return;
+        const expression = attribute.initializer?.expression;
+        if (!expression) return;
+        edits.push({
+            start: expression.getStart(sourceFile),
+            end: expression.getStart(sourceFile),
+            replacement: `/* ${TODO}: review ambiguous Components change handler. */ `,
+        });
+    };
+
+    visit(sourceFile);
+    return applyEdits(text, edits, diagnostics);
+}
+
+function groupForSpecifier(specifier, packageName) {
+    if (
+        specifier === `${packageName}/CommandForm` ||
+        specifier === `${packageName}/CommandForm/fields`
+    )
+        return 'CommandForm';
+    if (specifier === `${packageName}/Dropdown`) return 'Dropdown';
+    return undefined;
+}
+
+function resolveTarget(tag, named, namespaces) {
+    if (ts.isIdentifier(tag)) return named.get(tag.text);
+    if (!ts.isPropertyAccessExpression(tag) || !ts.isIdentifier(tag.expression))
+        return undefined;
+    const group = namespaces.get(tag.expression.text);
+    if (!group || !affectedComponents[group][tag.name.text]) return undefined;
+    return { group, component: tag.name.text };
+}
+
+function analyzeCallback(callback, allowed) {
+    if (callback.parameters.length !== 1) {
+        return hasLegacyLookingAccess(callback, callback.parameters[0])
+            ? {
+                  kind: 'unsupported',
+                  reason: 'the callback has multiple parameters or an unsupported parameter shape',
+              }
+            : { kind: 'irrelevant' };
+    }
+
+    const parameter = callback.parameters[0];
+    if (parameter.dotDotDotToken || parameter.initializer) {
+        return {
+            kind: 'unsupported',
+            reason: 'rest/default callback parameters are not statically safe',
+        };
+    }
+
+    const binding = bindingAccess(parameter.name);
+    if (!binding) {
+        return {
+            kind: 'unsupported',
+            reason: 'the destructured callback parameter is not a single event value field',
+        };
+    }
+
+    const call = singleCall(callback.body);
+    if (!call || call.arguments.length !== 1) {
+        return callbackUsesBinding(callback, binding)
+            ? {
+                  kind: 'unsupported',
+                  reason: 'the callback is not a single one-argument forwarding call',
+              }
+            : { kind: 'irrelevant' };
+    }
+
+    const argument = unwrap(call.arguments[0]);
+    const access = accessFromArgument(argument, binding);
+    const references = bindingReferences(callback, binding);
+
+    if (access && allowed.has(access) && references === 1) {
+        const name = containsIdentifier(call.expression, 'value') ? 'nextValue' : 'value';
+        return { kind: 'rewrite', parameter, argument: call.arguments[0], name };
+    }
+
+    if (access || references > 0 || hasLegacyLookingAccess(callback, parameter)) {
+        if (
+            binding.kind === 'identifier' &&
+            references === 1 &&
+            ts.isIdentifier(argument) &&
+            argument.text === binding.localName
+        ) {
+            return /^(e|event|evt|changeEvent)$/iu.test(binding.localName)
+                ? {
+                      kind: 'unsupported',
+                      reason: 'the callback forwards an event-looking parameter without proving its semantic value',
+                  }
+                : { kind: 'already-semantic' };
+        }
+        return {
+            kind: 'unsupported',
+            reason:
+                access && !allowed.has(access)
+                    ? `it reads '${access}', which is not the legacy payload shape for this component`
+                    : 'the event parameter is used more than once or the callback depends on native-event details',
+        };
+    }
+
+    return { kind: 'irrelevant' };
+}
+
+function bindingAccess(name) {
+    if (ts.isIdentifier(name)) return { kind: 'identifier', localName: name.text };
+    if (!ts.isObjectBindingPattern(name) || name.elements.length !== 1) return undefined;
+    const element = name.elements[0];
+    if (element.dotDotDotToken || element.initializer) return undefined;
+    const first = (element.propertyName ?? element.name).getText();
+    if (
+        ts.isIdentifier(element.name) &&
+        (first === 'value' || first === 'checked' || first === 'valueAsNumber')
+    ) {
+        return { kind: 'destructured', access: first, localName: element.name.text };
+    }
+    if (
+        (first === 'target' || first === 'currentTarget') &&
+        ts.isObjectBindingPattern(element.name) &&
+        element.name.elements.length === 1
+    ) {
+        const nested = element.name.elements[0];
+        if (nested.dotDotDotToken || nested.initializer || !ts.isIdentifier(nested.name))
+            return undefined;
+        const property = (nested.propertyName ?? nested.name).getText();
+        if (
+            property === 'value' ||
+            property === 'checked' ||
+            property === 'valueAsNumber'
+        ) {
+            return {
+                kind: 'destructured',
+                access: `${first}.${property}`,
+                localName: nested.name.text,
+            };
+        }
+    }
+    return undefined;
+}
+
+function singleCall(body) {
+    if (!ts.isBlock(body)) {
+        const expression = unwrap(body);
+        return ts.isCallExpression(expression) ? expression : undefined;
+    }
+    if (body.statements.length !== 1) return undefined;
+    const statement = body.statements[0];
+    if (ts.isExpressionStatement(statement)) {
+        const expression = unwrap(statement.expression);
+        return ts.isCallExpression(expression) ? expression : undefined;
+    }
+    if (ts.isReturnStatement(statement) && statement.expression) {
+        const expression = unwrap(statement.expression);
+        return ts.isCallExpression(expression) ? expression : undefined;
+    }
+    return undefined;
+}
+
+function accessFromArgument(argument, binding) {
+    if (binding.kind === 'destructured') {
+        return ts.isIdentifier(argument) && argument.text === binding.localName
+            ? binding.access
+            : undefined;
+    }
+    const parts = [];
+    let current = argument;
+    while (ts.isPropertyAccessExpression(current)) {
+        parts.unshift(current.name.text);
+        current = unwrap(current.expression);
+    }
+    return ts.isIdentifier(current) && current.text === binding.localName
+        ? parts.join('.')
+        : undefined;
+}
+
+function bindingReferences(callback, binding) {
+    let count = 0;
+    const visit = (node) => {
+        if (node === callback.parameters[0]) return;
+        if (ts.isIdentifier(node) && node.text === binding.localName) count += 1;
+        ts.forEachChild(node, visit);
+    };
+    ts.forEachChild(callback.body, visit);
+    return count;
+}
+
+function callbackUsesBinding(callback, binding) {
+    return bindingReferences(callback, binding) > 0;
+}
+
+function hasLegacyLookingAccess(callback, parameter) {
+    if (!parameter || !ts.isIdentifier(parameter.name)) return false;
+    const root = parameter.name.text;
+    let found = false;
+    const visit = (node) => {
+        if (ts.isPropertyAccessExpression(node)) {
+            let current = node;
+            while (ts.isPropertyAccessExpression(current))
+                current = unwrap(current.expression);
+            if (ts.isIdentifier(current) && current.text === root) found = true;
+        }
+        if (!found) ts.forEachChild(node, visit);
+    };
+    ts.forEachChild(callback.body, visit);
+    return found;
+}
+
+function containsIdentifier(node, name) {
+    let found = false;
+    const visit = (child) => {
+        if (ts.isIdentifier(child) && child.text === name) found = true;
+        if (!found) ts.forEachChild(child, visit);
+    };
+    visit(node);
+    return found;
+}
+
+function unwrap(node) {
+    while (
+        ts.isParenthesizedExpression(node) ||
+        ts.isAsExpression(node) ||
+        ts.isTypeAssertionExpression(node)
+    )
+        node = node.expression;
+    return node;
+}
+
+function applyEdits(text, edits, diagnostics) {
+    if (edits.length === 0) return { text, changed: false, diagnostics };
+    edits.sort((a, b) => a.start - b.start || a.end - b.end);
+    let output = text;
+    for (let index = edits.length - 1; index >= 0; index--) {
+        const edit = edits[index];
+        output = output.slice(0, edit.start) + edit.replacement + output.slice(edit.end);
+    }
+    return { text: output, changed: output !== text, diagnostics };
+}
+
+function scriptKindFor(fileName) {
+    if (fileName.endsWith('.tsx')) return ts.ScriptKind.TSX;
+    if (fileName.endsWith('.jsx')) return ts.ScriptKind.JSX;
+    if (
+        fileName.endsWith('.js') ||
+        fileName.endsWith('.mjs') ||
+        fileName.endsWith('.cjs')
+    )
+        return ts.ScriptKind.JS;
+    return ts.ScriptKind.TS;
+}
diff --git a/Codemods/lib/runTransformCli.js b/Codemods/lib/runTransformCli.js
new file mode 100644
index 00000000..6f4b6ec1
--- /dev/null
+++ b/Codemods/lib/runTransformCli.js
@@ -0,0 +1,119 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { readFileSync, writeFileSync, statSync, readdirSync } from 'node:fs';
+import { join, extname } from 'node:path';
+import { packageName as defaultPackageName } from './namespaceMap.js';
+
+const EXTENSIONS = new Set([
+    '.js',
+    '.jsx',
+    '.mjs',
+    '.cjs',
+    '.ts',
+    '.tsx',
+    '.mts',
+    '.cts',
+]);
+const SKIP_DIRS = new Set(['node_modules', 'dist', '.git', '.yarn']);
+
+/** Runs one independently-invokable Components codemod CLI. */
+export function runTransformCli(argv, { command, description, transform }) {
+    const args = [...argv];
+    let check = false;
+    let packageName = defaultPackageName;
+    const paths = [];
+
+    while (args.length > 0) {
+        const arg = args.shift();
+        if (arg === '--check') check = true;
+        else if (arg === '--package') {
+            const configuredPackage = args.shift();
+            if (!configuredPackage) {
+                console.error('--package requires a package name.');
+                return 1;
+            }
+            packageName = configuredPackage;
+        } else if (arg === '--help' || arg === '-h') {
+            printUsage(command, description);
+            return 0;
+        } else if (arg.startsWith('-')) {
+            console.error(`Unknown option: ${arg}`);
+            return 1;
+        } else paths.push(arg);
+    }
+
+    if (paths.length === 0) {
+        printUsage(command, description);
+        return 1;
+    }
+
+    let files;
+    try {
+        files = paths.flatMap(collectFiles);
+    } catch (error) {
+        console.error(error instanceof Error ? error.message : String(error));
+        return 1;
+    }
+
+    let changedCount = 0;
+    let diagnosticCount = 0;
+    for (const file of files) {
+        const original = readFileSync(file, 'utf8');
+        const result = transform(file, original, { packageName });
+        for (const diagnostic of result.diagnostics) {
+            diagnosticCount += 1;
+            console.warn(
+                `${diagnostic.file}:${diagnostic.line}:${diagnostic.column}: ${diagnostic.message}`,
+            );
+        }
+        if (result.changed) {
+            changedCount += 1;
+            if (check) console.log(`would rewrite ${file}`);
+            else {
+                writeFileSync(file, result.text, 'utf8');
+                console.log(`rewrote ${file}`);
+            }
+        }
+    }
+
+    console.log(
+        `\n${files.length} file(s) scanned, ${changedCount} ${check ? 'would change' : 'changed'}, ${diagnosticCount} unsupported or ambiguous case(s) reported.`,
+    );
+    if (diagnosticCount > 0 || (check && changedCount > 0)) return 1;
+    return 0;
+}
+
+function printUsage(command, description) {
+    console.log(
+        [
+            `Usage: ${command} [--check] [--package <name>] <path...>`,
+            '',
+            description,
+            '',
+            'Options:',
+            '  --check           Report what would change without writing files; exits 1 if',
+            '                    anything would change or manual review is required.',
+            '  --package <name>  Components package name (default: @cratis/components).',
+            '',
+            '<path...> may be files or directories; directories are walked recursively for',
+            '.js/.jsx/.mjs/.cjs/.ts/.tsx/.mts/.cts files, skipping node_modules,',
+            'dist, .git, and .yarn.',
+        ].join('\n'),
+    );
+}
+
+function collectFiles(inputPath) {
+    const stats = statSync(inputPath);
+    if (stats.isFile()) return EXTENSIONS.has(extname(inputPath)) ? [inputPath] : [];
+    if (!stats.isDirectory()) return [];
+    const files = [];
+    for (const entry of readdirSync(inputPath, { withFileTypes: true })) {
+        if (SKIP_DIRS.has(entry.name)) continue;
+        const entryPath = join(inputPath, entry.name);
+        if (entry.isDirectory()) files.push(...collectFiles(entryPath));
+        else if (entry.isFile() && EXTENSIONS.has(extname(entry.name)))
+            files.push(entryPath);
+    }
+    return files;
+}
diff --git a/Codemods/package.json b/Codemods/package.json
index 8a1a99f5..f22b5254 100644
--- a/Codemods/package.json
+++ b/Codemods/package.json
@@ -22,6 +22,8 @@
         "url": "https://github.com/Cratis/Components"
     },
     "bin": {
+        "cratis-components-button-variant-tone": "./scripts/button-variant-tone.js",
+        "cratis-components-change-handler": "./scripts/change-handler.js",
         "cratis-components-remove-root-namespace-imports": "./scripts/remove-root-namespace-imports.js"
     },
     "scripts": {
diff --git a/Codemods/scripts/button-variant-tone.js b/Codemods/scripts/button-variant-tone.js
new file mode 100755
index 00000000..8175376b
--- /dev/null
+++ b/Codemods/scripts/button-variant-tone.js
@@ -0,0 +1,13 @@
+#!/usr/bin/env node
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { transformButtonVariantTone } from '../lib/buttonVariantToneTransform.js';
+import { runTransformCli } from '../lib/runTransformCli.js';
+
+process.exitCode = runTransformCli(process.argv.slice(2), {
+    command: 'cratis-components-button-variant-tone',
+    description:
+        'Migrates deprecated Button text/link/outlined/rounded/severity JSX props to variant/tone/shape. Uncertain cases are annotated and reported for manual review.',
+    transform: transformButtonVariantTone,
+});
diff --git a/Codemods/scripts/change-handler.js b/Codemods/scripts/change-handler.js
new file mode 100755
index 00000000..ad704e78
--- /dev/null
+++ b/Codemods/scripts/change-handler.js
@@ -0,0 +1,13 @@
+#!/usr/bin/env node
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { transformChangeHandlers } from '../lib/changeHandlerTransform.js';
+import { runTransformCli } from '../lib/runTransformCli.js';
+
+process.exitCode = runTransformCli(process.argv.slice(2), {
+    command: 'cratis-components-change-handler',
+    description:
+        'Migrates structurally-proven Components event-wrapper callbacks to semantic value callbacks. Ambiguous handlers are annotated and reported for manual review.',
+    transform: transformChangeHandlers,
+});
diff --git a/Codemods/test/button-fixtures/aliases-and-precedence/expected.tsx b/Codemods/test/button-fixtures/aliases-and-precedence/expected.tsx
new file mode 100644
index 00000000..f65b464c
--- /dev/null
+++ b/Codemods/test/button-fixtures/aliases-and-precedence/expected.tsx
@@ -0,0 +1,11 @@
+import { Button as Action } from '@cratis/components/Common';
+import * as Common from '@cratis/components/Common';
+
+export const Buttons = () => (
+    <>
+        <Action   variant='link' shape='pill' tone='neutral' />
+        <Common.Button variant='outline'  tone='caution' />
+        <Action variant='ghost'   tone='positive'  shape='default'  />
+        <Action tone='neutral' variant='solid' />
+    </>
+);
diff --git a/Codemods/test/button-fixtures/aliases-and-precedence/input.tsx b/Codemods/test/button-fixtures/aliases-and-precedence/input.tsx
new file mode 100644
index 00000000..875c80ba
--- /dev/null
+++ b/Codemods/test/button-fixtures/aliases-and-precedence/input.tsx
@@ -0,0 +1,11 @@
+import { Button as Action } from '@cratis/components/Common';
+import * as Common from '@cratis/components/Common';
+
+export const Buttons = () => (
+    <>
+        <Action outlined text link rounded severity='contrast' />
+        <Common.Button text={false} outlined severity={'warn'} />
+        <Action variant='ghost' link text tone='positive' severity={severity} shape='default' rounded />
+        <Action severity='contrast' />
+    </>
+);
diff --git a/Codemods/test/button-fixtures/dynamic-refusal/expected.tsx b/Codemods/test/button-fixtures/dynamic-refusal/expected.tsx
new file mode 100644
index 00000000..75137ccd
--- /dev/null
+++ b/Codemods/test/button-fixtures/dynamic-refusal/expected.tsx
@@ -0,0 +1,8 @@
+import { Button } from '@cratis/components/Common';
+
+export const Buttons = ({ flags, severity }) => (
+    <>
+        <Button text={/* TODO(cratis-codemod): review unsupported Button appearance props. */ flags.text} severity={severity} />
+        <Button {.../* TODO(cratis-codemod): review unsupported Button appearance props. */ flags} outlined />
+    </>
+);
diff --git a/Codemods/test/button-fixtures/dynamic-refusal/input.tsx b/Codemods/test/button-fixtures/dynamic-refusal/input.tsx
new file mode 100644
index 00000000..08ad1706
--- /dev/null
+++ b/Codemods/test/button-fixtures/dynamic-refusal/input.tsx
@@ -0,0 +1,8 @@
+import { Button } from '@cratis/components/Common';
+
+export const Buttons = ({ flags, severity }) => (
+    <>
+        <Button text={flags.text} severity={severity} />
+        <Button {...flags} outlined />
+    </>
+);
diff --git a/Codemods/test/button-fixtures/non-components-untouched/expected.tsx b/Codemods/test/button-fixtures/non-components-untouched/expected.tsx
new file mode 100644
index 00000000..bcb9135e
--- /dev/null
+++ b/Codemods/test/button-fixtures/non-components-untouched/expected.tsx
@@ -0,0 +1,3 @@
+import { Button } from './Button';
+
+export const Local = () => <Button text severity='danger' />;
diff --git a/Codemods/test/button-fixtures/non-components-untouched/input.tsx b/Codemods/test/button-fixtures/non-components-untouched/input.tsx
new file mode 100644
index 00000000..bcb9135e
--- /dev/null
+++ b/Codemods/test/button-fixtures/non-components-untouched/input.tsx
@@ -0,0 +1,3 @@
+import { Button } from './Button';
+
+export const Local = () => <Button text severity='danger' />;
diff --git a/Codemods/test/change-handler-fixtures/aliases-and-safe-wrappers/expected.tsx b/Codemods/test/change-handler-fixtures/aliases-and-safe-wrappers/expected.tsx
new file mode 100644
index 00000000..c0d088b1
--- /dev/null
+++ b/Codemods/test/change-handler-fixtures/aliases-and-safe-wrappers/expected.tsx
@@ -0,0 +1,13 @@
+import { Dropdown as Select } from '@cratis/components/Dropdown';
+import * as Fields from '@cratis/components/CommandForm';
+import { CheckboxField as Check } from '@cratis/components/CommandForm/fields';
+
+export const FieldsView = () => (
+    <>
+        <Select onChange={(value) => consume(value)} />
+        <Fields.InputTextField onChange={(value) => consume(value)} />
+        <Fields.NumberField onChange={(value) => consume(value)} />
+        <Check onChange={(value) => consume(value)} />
+        <Select onChange={(value) => consume(value)} />
+    </>
+);
diff --git a/Codemods/test/change-handler-fixtures/aliases-and-safe-wrappers/input.tsx b/Codemods/test/change-handler-fixtures/aliases-and-safe-wrappers/input.tsx
new file mode 100644
index 00000000..0fb7be6a
--- /dev/null
+++ b/Codemods/test/change-handler-fixtures/aliases-and-safe-wrappers/input.tsx
@@ -0,0 +1,13 @@
+import { Dropdown as Select } from '@cratis/components/Dropdown';
+import * as Fields from '@cratis/components/CommandForm';
+import { CheckboxField as Check } from '@cratis/components/CommandForm/fields';
+
+export const FieldsView = () => (
+    <>
+        <Select onChange={(e) => consume(e.value)} />
+        <Fields.InputTextField onChange={(event) => consume(event.target.value)} />
+        <Fields.NumberField onChange={(event: React.ChangeEvent<HTMLInputElement>) => consume(event.currentTarget.valueAsNumber)} />
+        <Check onChange={({ target: { checked } }) => consume(checked)} />
+        <Select onChange={({ value: selected }) => consume(selected)} />
+    </>
+);
diff --git a/Codemods/test/change-handler-fixtures/already-semantic/expected.tsx b/Codemods/test/change-handler-fixtures/already-semantic/expected.tsx
new file mode 100644
index 00000000..7365dbf3
--- /dev/null
+++ b/Codemods/test/change-handler-fixtures/already-semantic/expected.tsx
@@ -0,0 +1,10 @@
+import { Dropdown } from '@cratis/components/Dropdown';
+import { InputTextField } from '@cratis/components/CommandForm';
+
+export const Fields = () => (
+    <>
+        <Dropdown onChange={(value) => consume(value)} />
+        <InputTextField onChange={setValue} />
+        <input onChange={(event) => consume(event.target.value)} />
+    </>
+);
diff --git a/Codemods/test/change-handler-fixtures/already-semantic/input.tsx b/Codemods/test/change-handler-fixtures/already-semantic/input.tsx
new file mode 100644
index 00000000..7365dbf3
--- /dev/null
+++ b/Codemods/test/change-handler-fixtures/already-semantic/input.tsx
@@ -0,0 +1,10 @@
+import { Dropdown } from '@cratis/components/Dropdown';
+import { InputTextField } from '@cratis/components/CommandForm';
+
+export const Fields = () => (
+    <>
+        <Dropdown onChange={(value) => consume(value)} />
+        <InputTextField onChange={setValue} />
+        <input onChange={(event) => consume(event.target.value)} />
+    </>
+);
diff --git a/Codemods/test/change-handler-fixtures/ambiguous-refusal/expected.tsx b/Codemods/test/change-handler-fixtures/ambiguous-refusal/expected.tsx
new file mode 100644
index 00000000..ddc1e62a
--- /dev/null
+++ b/Codemods/test/change-handler-fixtures/ambiguous-refusal/expected.tsx
@@ -0,0 +1,9 @@
+import { Dropdown } from '@cratis/components/Dropdown';
+import { InputTextField } from '@cratis/components/CommandForm';
+
+export const Fields = () => (
+    <>
+        <Dropdown onChange={/* TODO(cratis-codemod): review ambiguous Components change handler. */ (event) => { event.preventDefault(); consume(event.value); }} />
+        <InputTextField onChange={/* TODO(cratis-codemod): review ambiguous Components change handler. */ (event) => consume(event.target.value, event)} />
+    </>
+);
diff --git a/Codemods/test/change-handler-fixtures/ambiguous-refusal/input.tsx b/Codemods/test/change-handler-fixtures/ambiguous-refusal/input.tsx
new file mode 100644
index 00000000..5cb19378
--- /dev/null
+++ b/Codemods/test/change-handler-fixtures/ambiguous-refusal/input.tsx
@@ -0,0 +1,9 @@
+import { Dropdown } from '@cratis/components/Dropdown';
+import { InputTextField } from '@cratis/components/CommandForm';
+
+export const Fields = () => (
+    <>
+        <Dropdown onChange={(event) => { event.preventDefault(); consume(event.value); }} />
+        <InputTextField onChange={(event) => consume(event.target.value, event)} />
+    </>
+);
diff --git a/Codemods/test/migration-cli.test.js b/Codemods/test/migration-cli.test.js
new file mode 100644
index 00000000..1d6e42df
--- /dev/null
+++ b/Codemods/test/migration-cli.test.js
@@ -0,0 +1,127 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { mkdtempSync, mkdirSync, writeFileSync, readFileSync, rmSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { spawnSync } from 'node:child_process';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+
+const testDir = path.dirname(fileURLToPath(import.meta.url));
+const scriptsDir = path.join(testDir, '..', 'scripts');
+let dir;
+
+beforeEach(() => {
+    dir = mkdtempSync(path.join(tmpdir(), 'cratis-components-migration-codemod-'));
+});
+
+afterEach(() => rmSync(dir, { recursive: true, force: true }));
+
+const commands = [
+    {
+        name: 'button-variant-tone',
+        publicName: 'cratis-components-button-variant-tone',
+        source: "import { Button } from '@cratis/components/Common';\nexport const x=<Button text/>;\n",
+        expected: "variant='ghost'",
+        refusal:
+            "import { Button } from '@cratis/components/Common';\nexport const x=<Button text={dynamic}/>;\n",
+    },
+    {
+        name: 'change-handler',
+        publicName: 'cratis-components-change-handler',
+        source: "import { Dropdown } from '@cratis/components/Dropdown';\nexport const x=<Dropdown onChange={(e)=>consume(e.value)}/>;\n",
+        expected: '(value)=>consume(value)',
+        refusal:
+            "import { Dropdown } from '@cratis/components/Dropdown';\nexport const x=<Dropdown onChange={(event)=>{log(event);consume(event.value)}}/>;\n",
+    },
+];
+
+for (const command of commands) {
+    const run = (args) =>
+        spawnSync(
+            process.execPath,
+            [path.join(scriptsDir, `${command.name}.js`), ...args],
+            { encoding: 'utf8' },
+        );
+
+    describe(`${command.publicName} CLI`, () => {
+        it('prints public help, requires paths, and rejects unknown options', () => {
+            const help = run(['--help']);
+            expect(help.status).toBe(0);
+            expect(help.stdout).toContain(`Usage: ${command.publicName}`);
+            expect(run([]).status).toBe(1);
+            expect(run(['--unknown']).stderr).toContain('Unknown option');
+            expect(run(['--package']).stderr).toContain(
+                '--package requires a package name',
+            );
+        });
+
+        it('supports check/apply/idempotent check', () => {
+            const file = path.join(dir, 'Component.tsx');
+            writeFileSync(file, command.source);
+            const pending = run(['--check', file]);
+            expect(pending.status).toBe(1);
+            expect(pending.stdout).toContain('would rewrite');
+            expect(readFileSync(file, 'utf8')).toBe(command.source);
+
+            const apply = run([file]);
+            expect(apply.status).toBe(0);
+            expect(readFileSync(file, 'utf8')).toContain(command.expected);
+            expect(run(['--check', file]).status).toBe(0);
+        });
+
+        it('walks supported extensions recursively and skips node_modules', () => {
+            const nested = path.join(dir, 'src', 'nested');
+            const skipped = path.join(dir, 'node_modules', 'pkg');
+            mkdirSync(nested, { recursive: true });
+            mkdirSync(skipped, { recursive: true });
+            const transformFiles = ['a.jsx', 'e.tsx'];
+            const scanOnlyFiles = ['b.mjs', 'c.cjs', 'd.ts', 'f.mts', 'g.cts'];
+            for (const file of transformFiles)
+                writeFileSync(path.join(nested, file), command.source);
+            for (const file of scanOnlyFiles)
+                writeFileSync(path.join(nested, file), 'export const scanned = true;\n');
+            writeFileSync(path.join(skipped, 'ignored.tsx'), command.source);
+
+            const result = run([dir]);
+            expect(result.status).toBe(0);
+            expect(result.stdout).toContain('7 file(s) scanned');
+            for (const file of transformFiles)
+                expect(readFileSync(path.join(nested, file), 'utf8')).toContain(
+                    command.expected,
+                );
+            for (const file of scanOnlyFiles)
+                expect(readFileSync(path.join(nested, file), 'utf8')).toBe(
+                    'export const scanned = true;\n',
+                );
+            expect(readFileSync(path.join(skipped, 'ignored.tsx'), 'utf8')).toBe(
+                command.source,
+            );
+        });
+
+        it('writes one TODO but exits nonzero for refusal in apply and subsequent runs', () => {
+            const file = path.join(dir, 'Refusal.tsx');
+            writeFileSync(file, command.refusal);
+            const first = run([file]);
+            expect(first.status).toBe(1);
+            expect(first.stderr).toContain('manual review');
+            const once = readFileSync(file, 'utf8');
+            expect(once.match(/TODO\(cratis-codemod\)/gu)).toHaveLength(1);
+
+            const second = run([file]);
+            expect(second.status).toBe(1);
+            expect(readFileSync(file, 'utf8')).toBe(once);
+        });
+
+        it('honors --package', () => {
+            const file = path.join(dir, 'Custom.tsx');
+            writeFileSync(
+                file,
+                command.source.replaceAll('@cratis/components', '@example/ui'),
+            );
+            expect(run(['--package', '@example/ui', file]).status).toBe(0);
+            expect(readFileSync(file, 'utf8')).toContain(command.expected);
+        });
+    });
+}
diff --git a/Codemods/test/migration-transforms.test.js b/Codemods/test/migration-transforms.test.js
new file mode 100644
index 00000000..5f6174fb
--- /dev/null
+++ b/Codemods/test/migration-transforms.test.js
@@ -0,0 +1,141 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { readFileSync } from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { describe, expect, it } from 'vitest';
+import { transformButtonVariantTone } from '../lib/buttonVariantToneTransform.js';
+import { transformChangeHandlers } from '../lib/changeHandlerTransform.js';
+
+const testDir = path.dirname(fileURLToPath(import.meta.url));
+const fixture = (family, name, file) =>
+    readFileSync(path.join(testDir, family, name, file), 'utf8');
+
+const buttonCases = [
+    ['aliases-and-precedence', 0],
+    ['dynamic-refusal', 2],
+    ['non-components-untouched', 0],
+];
+
+const handlerCases = [
+    ['aliases-and-safe-wrappers', 0],
+    ['ambiguous-refusal', 2],
+    ['already-semantic', 0],
+];
+
+describe('Button variant/tone transform', () => {
+    for (const [name, diagnosticCount] of buttonCases) {
+        it(`matches the ${name} fixture and is idempotent`, () => {
+            const input = fixture('button-fixtures', name, 'input.tsx');
+            const expected = fixture('button-fixtures', name, 'expected.tsx');
+            const first = transformButtonVariantTone(`${name}/input.tsx`, input);
+            expect(first.text).toBe(expected);
+            expect(first.diagnostics).toHaveLength(diagnosticCount);
+
+            const second = transformButtonVariantTone(`${name}/expected.tsx`, first.text);
+            expect(second.text).toBe(expected);
+            expect(second.changed).toBe(false);
+            expect(second.diagnostics).toHaveLength(diagnosticCount);
+            expect((second.text.match(/TODO\(cratis-codemod\)/gu) ?? []).length).toBe(
+                (first.text.match(/TODO\(cratis-codemod\)/gu) ?? []).length,
+            );
+        });
+    }
+
+    it('maps every literal severity and preserves explicit new-prop precedence', () => {
+        const input = [
+            "import { Button } from '@cratis/components/Common';",
+            "const a=<Button severity='secondary'/>;",
+            "const b=<Button severity='info'/>;",
+            "const c=<Button severity='help'/>;",
+            "const d=<Button severity='success'/>;",
+            "const e=<Button severity='warn'/>;",
+            "const f=<Button severity='danger'/>;",
+            "const g=<Button severity='contrast' text/>;",
+            'const h=<Button variant={variant} link={dynamic} tone={tone} severity={severity} shape={shape} rounded={dynamic}/>;',
+            '',
+        ].join('\n');
+        const result = transformButtonVariantTone('Buttons.tsx', input);
+
+        expect(result.diagnostics).toHaveLength(1);
+        expect(result.text).toContain("tone='neutral'");
+        expect(result.text).toContain("tone='accent'");
+        expect(result.text).toContain("tone='positive'");
+        expect(result.text).toContain("tone='caution'");
+        expect(result.text).toContain("tone='critical'");
+        expect(result.text).toContain("variant='ghost'");
+        expect(result.text).toContain(
+            'variant={/* TODO(cratis-codemod): review unsupported Button appearance props. */ variant} link={dynamic} tone={tone} severity={severity} shape={shape} rounded={dynamic}',
+        );
+    });
+
+    it('supports a package override without touching the default package', () => {
+        const input =
+            "import { Button as B } from '@example/ui/Common';\nimport { Button } from '@cratis/components/Common';\nconst x=<><B text/><Button text/></>;\n";
+        const result = transformButtonVariantTone('Buttons.tsx', input, {
+            packageName: '@example/ui',
+        });
+        expect(result.text).toContain("<B variant='ghost'/>");
+        expect(result.text).toContain('<Button text/>');
+    });
+});
+
+describe('change-handler transform', () => {
+    for (const [name, diagnosticCount] of handlerCases) {
+        it(`matches the ${name} fixture and is idempotent`, () => {
+            const input = fixture('change-handler-fixtures', name, 'input.tsx');
+            const expected = fixture('change-handler-fixtures', name, 'expected.tsx');
+            const first = transformChangeHandlers(`${name}/input.tsx`, input);
+            expect(first.text).toBe(expected);
+            expect(first.diagnostics).toHaveLength(diagnosticCount);
+
+            const second = transformChangeHandlers(`${name}/expected.tsx`, first.text);
+            expect(second.text).toBe(expected);
+            expect(second.changed).toBe(false);
+            expect(second.diagnostics).toHaveLength(diagnosticCount);
+            expect((second.text.match(/TODO\(cratis-codemod\)/gu) ?? []).length).toBe(
+                (first.text.match(/TODO\(cratis-codemod\)/gu) ?? []).length,
+            );
+        });
+    }
+
+    it('rewrites every affected CommandForm payload shape and onValueChange', () => {
+        const input = [
+            "import * as F from '@cratis/components/CommandForm';",
+            'const fields=<>',
+            '<F.PasswordField onChange={(e)=>save(e.currentTarget.value)}/>',
+            '<F.TextAreaField onChange={(e)=>save(e.target.value)}/>',
+            '<F.ColorPickerField onChange={(e)=>save(e.target.value)}/>',
+            '<F.CheckboxField onChange={(e)=>save(e.currentTarget.checked)}/>',
+            '<F.ToggleSwitchField onValueChange={(e)=>save(e.target.checked)}/>',
+            '<F.SliderField onChange={(e)=>save(e.target.valueAsNumber)}/>',
+            '<F.DropdownField onChange={(e)=>save(e.value)}/>',
+            '<F.MultiSelectField onChange={(e)=>save(e.value)}/>',
+            '</>;',
+            '',
+        ].join('\n');
+        const result = transformChangeHandlers('Fields.tsx', input);
+        expect(result.diagnostics).toEqual([]);
+        expect(result.text.match(/\(value\)=>save\(value\)/gu)).toHaveLength(8);
+    });
+
+    it('refuses wrong payloads and multi-use native-event dependencies', () => {
+        const input =
+            "import { CheckboxField } from '@cratis/components/CommandForm';\nconst x=<CheckboxField onChange={(event)=>consume(event.target.value)}/>;\n";
+        const result = transformChangeHandlers('Fields.tsx', input);
+        expect(result.diagnostics).toHaveLength(1);
+        expect(result.text).toContain('TODO(cratis-codemod)');
+        expect(result.text).toContain('event.target.value');
+    });
+
+    it('supports a package override', () => {
+        const input =
+            "import { Dropdown as D } from '@example/ui/Dropdown';\nconst x=<D onChange={(e)=>consume(e.value)}/>;\n";
+        const result = transformChangeHandlers('Fields.tsx', input, {
+            packageName: '@example/ui',
+        });
+        expect(result.text).toContain('(value)=>consume(value)');
+        expect(result.diagnostics).toEqual([]);
+    });
+});
diff --git a/Codemods/test/verify-packed-package.mjs b/Codemods/test/verify-packed-package.mjs
index f04c6ac3..f283541b 100644
--- a/Codemods/test/verify-packed-package.mjs
+++ b/Codemods/test/verify-packed-package.mjs
@@ -71,14 +71,14 @@ try {
         }
     }
 
-    const binary = path.join(
-        consumer,
-        'node_modules',
-        '.bin',
-        process.platform === 'win32'
-            ? 'cratis-components-remove-root-namespace-imports.cmd'
-            : 'cratis-components-remove-root-namespace-imports',
-    );
+    const binaryFor = (name) =>
+        path.join(
+            consumer,
+            'node_modules',
+            '.bin',
+            process.platform === 'win32' ? `${name}.cmd` : name,
+        );
+    const binary = binaryFor('cratis-components-remove-root-namespace-imports');
     const help = run(binary, ['--help'], { cwd: consumer });
     assertRun('packed codemod --help', help);
     if (!help.stdout.includes('Usage: cratis-components-remove-root-namespace-imports')) {
@@ -109,7 +109,55 @@ try {
         run(binary, ['--check', source], { cwd: consumer }),
     );
 
-    console.log('Packed @cratis/components-codemods CLI verified.');
+    const packedMigrations = [
+        {
+            command: 'cratis-components-button-variant-tone',
+            source: "import { Button } from '@cratis/components/Common';\nexport const view = <Button text severity='danger' />;\n",
+            expected: ["variant='ghost'", "tone='critical'"],
+        },
+        {
+            command: 'cratis-components-change-handler',
+            source: "import { Dropdown } from '@cratis/components/Dropdown';\nexport const view = <Dropdown onChange={(event) => consume(event.value)} />;\n",
+            expected: ['(value) => consume(value)'],
+        },
+    ];
+
+    for (const migration of packedMigrations) {
+        const migrationBinary = binaryFor(migration.command);
+        const migrationHelp = run(migrationBinary, ['--help'], { cwd: consumer });
+        assertRun(`packed ${migration.command} --help`, migrationHelp);
+        if (!migrationHelp.stdout.includes(`Usage: ${migration.command}`)) {
+            throw new Error(
+                `Unexpected ${migration.command} --help output:\n${migrationHelp.stdout}`,
+            );
+        }
+
+        const migrationSource = path.join(consumer, `${migration.command}.tsx`);
+        writeFileSync(migrationSource, migration.source);
+        assertRun(
+            `packed ${migration.command} --check before migration`,
+            run(migrationBinary, ['--check', migrationSource], { cwd: consumer }),
+            1,
+        );
+        assertRun(
+            `packed ${migration.command} apply`,
+            run(migrationBinary, [migrationSource], { cwd: consumer }),
+        );
+        const output = readFileSync(migrationSource, 'utf8');
+        for (const expected of migration.expected) {
+            if (!output.includes(expected)) {
+                throw new Error(
+                    `Packed ${migration.command} produced unexpected output:\n${output}`,
+                );
+            }
+        }
+        assertRun(
+            `packed ${migration.command} --check after migration`,
+            run(migrationBinary, ['--check', migrationSource], { cwd: consumer }),
+        );
+    }
+
+    console.log('Packed @cratis/components-codemods CLIs verified.');
 } finally {
     rmSync(scratch, { recursive: true, force: true });
 }

From d80efe969724ffc2030f030c1ec0fb6f8a4478fc Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 17:45:38 +0200
Subject: [PATCH 156/267] Document semantic codemod migration order

---
 Codemods/README.md                | 114 +++++++++++++++++++++++++++---
 Codemods/test/transform.test.js   |  24 ++++++-
 Documentation/Migration/3-to-4.md |  67 ++++++++++++++++++
 Source/MIGRATION.md               |  67 ++++++++++++++++++
 4 files changed, 259 insertions(+), 13 deletions(-)

diff --git a/Codemods/README.md b/Codemods/README.md
index 092c4d84..930fad41 100644
--- a/Codemods/README.md
+++ b/Codemods/README.md
@@ -1,6 +1,6 @@
 # @cratis/components-codemods
 
-Migration codemods in the Components 4 candidate move Components 3 root namespaces to Components 4 explicit subpath imports. Components 4 keeps only package-wide provider setup at the root; every component is imported from its explicit subpath (`@cratis/components/Canvas`, for example). The companion `@cratis/eslint-plugin-components` package's `no-root-barrel-import` rule enforces this once a consumer has migrated.
+Migration codemods in the Components 4 candidate move Components 3 root namespaces to Components 4 explicit subpath imports, replace deprecated Button appearance props, and update legacy event-wrapper callbacks to semantic value callbacks. Each transform is independently invokable and idempotent. Components 4 keeps only package-wide provider setup at the root; every component is imported from its explicit subpath (`@cratis/components/Canvas`, for example). The companion `@cratis/eslint-plugin-components` package's `no-root-barrel-import` rule enforces this once a consumer has migrated.
 
 ## `remove-root-namespace-imports`
 
@@ -11,14 +11,14 @@ application's TypeScript version. It rewrites static `import` declarations and n
 
 ### What it rewrites
 
-| Before                                               | After                                                          |
-| ----------------------------------------------------- | ----------------------------------------------------------------- |
-| `import { Canvas } from '@cratis/components';`       | `import * as Canvas from '@cratis/components/Canvas';`         |
-| `import type { Canvas } from '@cratis/components';`  | `import type * as Canvas from '@cratis/components/Canvas';`    |
-| `import { Canvas as C } from '@cratis/components';`  | `import * as C from '@cratis/components/Canvas';`              |
-| `export { Canvas } from '@cratis/components';`       | `export * as Canvas from '@cratis/components/Canvas';`         |
-| `export type { Canvas } from '@cratis/components';`  | `export type * as Canvas from '@cratis/components/Canvas';`    |
-| `export { Canvas as C } from '@cratis/components';`  | `export * as C from '@cratis/components/Canvas';`              |
+| Before                                              | After                                                       |
+| --------------------------------------------------- | ----------------------------------------------------------- |
+| `import { Canvas } from '@cratis/components';`      | `import * as Canvas from '@cratis/components/Canvas';`      |
+| `import type { Canvas } from '@cratis/components';` | `import type * as Canvas from '@cratis/components/Canvas';` |
+| `import { Canvas as C } from '@cratis/components';` | `import * as C from '@cratis/components/Canvas';`           |
+| `export { Canvas } from '@cratis/components';`      | `export * as Canvas from '@cratis/components/Canvas';`      |
+| `export type { Canvas } from '@cratis/components';` | `export type * as Canvas from '@cratis/components/Canvas';` |
+| `export { Canvas as C } from '@cratis/components';` | `export * as C from '@cratis/components/Canvas';`           |
 
 A named `export … from '@cratis/components'` re-export follows exactly the same rules as an
 import, because the transformation is equally unambiguous in both directions: the exported
@@ -83,7 +83,7 @@ Each of these is left completely untouched, and reported as a diagnostic instead
   anywhere in the file.
 - A wildcard re-export of the whole package — `export * from '@cratis/components';` — or a
   namespace re-export of the whole package — `export * as Components from
-  '@cratis/components';`. Both are exactly as ambiguous as a whole-package namespace import:
+'@cratis/components';`. Both are exactly as ambiguous as a whole-package namespace import:
   which subpath each later access needs cannot be determined from the re-export alone. A
   _named_ re-export (`export { Canvas } from '@cratis/components';`) is not in this list —
   see [What it rewrites](#what-it-rewrites).
@@ -127,6 +127,100 @@ performs the mechanical import/re-export rewrite; it does not attempt to fix any
 unused import, nor does it know whether a namespace member you use (`Canvas.Foo`) still
 exists at that subpath.
 
+## `button-variant-tone`
+
+`cratis-components-button-variant-tone` resolves `Button` JSX bindings imported, including aliases and `Common.Button` namespace access, from `@cratis/components/Common`. It applies the runtime's legacy precedence (`link` → `text` → `outlined` → `solid`) and replaces deprecated props:
+
+| Deprecated prop                       | Semantic prop       |
+| ------------------------------------- | ------------------- |
+| `text`                                | `variant='ghost'`   |
+| `link`                                | `variant='link'`    |
+| `outlined`                            | `variant='outline'` |
+| `rounded`                             | `shape='pill'`      |
+| `severity='secondary'` / `'contrast'` | `tone='neutral'`    |
+| `severity='info'` / `'help'`          | `tone='accent'`     |
+| `severity='success'`                  | `tone='positive'`   |
+| `severity='warn'`                     | `tone='caution'`    |
+| `severity='danger'`                   | `tone='critical'`   |
+
+A literal `severity='contrast'` also receives `variant='solid'` only when no explicit new variant or stronger true legacy variant applies. A literal new `variant`, `tone`, or `shape` wins and its redundant legacy prop is removed.
+
+```tsx
+// Safe rewrite
+<Button outlined rounded severity='warn' />
+// becomes
+<Button variant='outline' shape='pill' tone='caution' />
+```
+
+The transform never guesses through JSX spreads, dynamic legacy values, duplicate props, or an unknown new-prop expression that conflicts with a legacy prop. It leaves the uncertain prop group semantically unchanged, reports it, and adds one syntax-safe `TODO(cratis-codemod)` annotation. Subsequent runs do not duplicate that annotation.
+
+```tsx
+// Refused and reported
+<Button text={appearance.text} severity={appearance.severity} />
+```
+
+## `change-handler`
+
+`cratis-components-change-handler` resolves affected Components-owned JSX identifiers imported with aliases or namespaces from `@cratis/components/Dropdown`, `@cratis/components/CommandForm`, and `@cratis/components/CommandForm/fields`. It rewrites only a structurally-proven single forwarding callback:
+
+```tsx
+// Safe rewrites
+<Dropdown onChange={(event) => setRole(event.value)} />
+<InputTextField onChange={(event) => setName(event.target.value)} />
+<CheckboxField onChange={({ target: { checked } }) => setEnabled(checked)} />
+
+// become
+<Dropdown onChange={(value) => setRole(value)} />
+<InputTextField onChange={(value) => setName(value)} />
+<CheckboxField onChange={(value) => setEnabled(value)} />
+```
+
+The affected CommandForm fields cover legacy `target`/`currentTarget` `value`, `checked`, and `valueAsNumber` payloads, plus `DropdownField`/`MultiSelectField` `event.value`. Already-semantic callbacks and callback references such as `onChange={setValue}` are unchanged.
+
+Multi-statement, multi-use, wrong-payload, destructuring-with-default/rest, and native-event-dependent callbacks are refused, reported, and annotated once:
+
+```tsx
+// Refused and reported: the host still depends on the old event object
+<Dropdown
+    onChange={(event) => {
+        audit(event.originalEvent);
+        setRole(event.value);
+    }}
+/>
+```
+
+## Run the migration sequence
+
+Use the exact installed Components version for all three commands. Run the root-import transform first so the later transforms can resolve explicit Components-owned subpaths, then run Button appearance and change-handler migration. Preview every step before applying it:
+
+```sh
+COMPONENTS_VERSION="$(node -p "require('@cratis/components/package.json').version")"
+
+npx --package "@cratis/components-codemods@$COMPONENTS_VERSION" \
+  cratis-components-remove-root-namespace-imports --check <paths...>
+npx --package "@cratis/components-codemods@$COMPONENTS_VERSION" \
+  cratis-components-remove-root-namespace-imports <paths...>
+
+npx --package "@cratis/components-codemods@$COMPONENTS_VERSION" \
+  cratis-components-button-variant-tone --check <paths...>
+npx --package "@cratis/components-codemods@$COMPONENTS_VERSION" \
+  cratis-components-button-variant-tone <paths...>
+
+npx --package "@cratis/components-codemods@$COMPONENTS_VERSION" \
+  cratis-components-change-handler --check <paths...>
+npx --package "@cratis/components-codemods@$COMPONENTS_VERSION" \
+  cratis-components-change-handler <paths...>
+```
+
+Never substitute `latest` or another Components version when the exact codemod package is unavailable. Stop, keep the application on its current package, migrate manually, or wait for the matching publication. Both new CLIs require Node.js 20 or newer, bundle their own TypeScript compiler dependency, scan `.js`, `.jsx`, `.mjs`, `.cjs`, `.ts`, `.tsx`, `.mts`, and `.cts` recursively, support `--package <name>`, and exit nonzero for pending check-mode edits or any refused case. Review every diagnostic and `TODO(cratis-codemod)`, then run the consuming project's formatter, lint, type check, tests, and production build.
+
+Contributor source commands are:
+
+```sh
+node Codemods/scripts/button-variant-tone.js --check Source
+node Codemods/scripts/change-handler.js --check Source
+```
+
 ### Test
 
 ```sh
diff --git a/Codemods/test/transform.test.js b/Codemods/test/transform.test.js
index 61e69978..3eb97f0d 100644
--- a/Codemods/test/transform.test.js
+++ b/Codemods/test/transform.test.js
@@ -210,7 +210,14 @@ describe('root namespace maps', () => {
     it('should keep both migration guides aligned with every namespace and the shipped command', () => {
         const guides = [
             readFileSync(
-                path.join(__dirname, '..', '..', 'Documentation', 'Migration', '3-to-4.md'),
+                path.join(
+                    __dirname,
+                    '..',
+                    '..',
+                    'Documentation',
+                    'Migration',
+                    '3-to-4.md',
+                ),
                 'utf8',
             ),
             readFileSync(
@@ -220,9 +227,20 @@ describe('root namespace maps', () => {
         ];
 
         for (const guide of guides) {
-            expect(guide).toContain(
-                'cratis-components-remove-root-namespace-imports --check <paths...>',
+            const rootCommand =
+                'cratis-components-remove-root-namespace-imports --check <paths...>';
+            const buttonCommand =
+                'cratis-components-button-variant-tone --check <paths...>';
+            const handlerCommand = 'cratis-components-change-handler --check <paths...>';
+            expect(guide).toContain(rootCommand);
+            expect(guide).toContain(buttonCommand);
+            expect(guide).toContain(handlerCommand);
+            expect(guide.indexOf(rootCommand)).toBeLessThan(guide.indexOf(buttonCommand));
+            expect(guide.indexOf(buttonCommand)).toBeLessThan(
+                guide.indexOf(handlerCommand),
             );
+            expect(guide).toContain('Never substitute `latest`');
+            expect(guide).toContain('TODO(cratis-codemod)');
             for (const namespace of Object.keys(codemodNamespaceSubpaths)) {
                 expect(guide).toContain(`| \`${namespace}\``);
             }
diff --git a/Documentation/Migration/3-to-4.md b/Documentation/Migration/3-to-4.md
index 4e362f67..070734f8 100644
--- a/Documentation/Migration/3-to-4.md
+++ b/Documentation/Migration/3-to-4.md
@@ -99,6 +99,73 @@ If the exact codemod package version is unavailable, stop rather than substituti
 
 The codemod scans JavaScript/JSX and TypeScript/TSX (including `.mjs`, `.cjs`, `.mts`, and `.cts`), preserves aliases and type-only imports, splits mixed setup/namespace imports, and rewrites a named `export { X } from '@cratis/components'` re-export the same way as the matching import. It refuses to guess at default imports, whole-package namespace imports, TypeScript `import = require(...)` assignments, dynamic imports, CommonJS `require(...)`, wildcard or whole-package re-exports (`export * from '@cratis/components'` / `export * as X from '@cratis/components'`), side-effect imports, or unknown symbols. Review every reported unsupported case manually, then run the consuming project's lint, build, and tests.
 
+### Migrate Button appearance and change callbacks
+
+Run the root-import codemod above first. The Button and callback codemods resolve Components-owned identifiers from explicit subpaths, so the authoritative order is:
+
+1. `cratis-components-remove-root-namespace-imports`
+2. `cratis-components-button-variant-tone`
+3. `cratis-components-change-handler`
+
+Use the exact installed Components version and preview each transform before applying it:
+
+```bash
+COMPONENTS_VERSION="$(node -p "require('@cratis/components/package.json').version")"
+
+npx --package "@cratis/components-codemods@$COMPONENTS_VERSION" \
+  cratis-components-button-variant-tone --check <paths...>
+npx --package "@cratis/components-codemods@$COMPONENTS_VERSION" \
+  cratis-components-button-variant-tone <paths...>
+
+npx --package "@cratis/components-codemods@$COMPONENTS_VERSION" \
+  cratis-components-change-handler --check <paths...>
+npx --package "@cratis/components-codemods@$COMPONENTS_VERSION" \
+  cratis-components-change-handler <paths...>
+```
+
+Never substitute `latest` or a different version if the exact codemod package is unavailable. Stop and migrate manually, keep the application on its current Components package, or wait for the matching publication.
+
+The Button transform preserves the legacy `link` → `text` → `outlined` → `solid` precedence and maps literal props to `variant`, `tone`, and `shape`. Existing literal new props win:
+
+```tsx
+// Before
+<Button outlined rounded severity='warn'>Review</Button>
+<Button variant='ghost' text severity='danger'>Cancel</Button>
+
+// After
+<Button variant='outline' shape='pill' tone='caution'>Review</Button>
+<Button variant='ghost' tone='critical'>Cancel</Button>
+```
+
+`secondary` and `contrast` map to `neutral`; `info` and `help` to `accent`; `success` to `positive`; `warn` to `caution`; and `danger` to `critical`. `contrast` adds `variant='solid'` only when no explicit or stronger legacy variant applies.
+
+The callback transform rewrites only structurally-proven single forwarding callbacks on affected Components-owned Dropdown and CommandForm controls:
+
+```tsx
+// Before
+<Dropdown onChange={(event) => setRole(event.value)} />
+<InputTextField onChange={(event) => setName(event.target.value)} />
+<CheckboxField onChange={({ target: { checked } }) => setEnabled(checked)} />
+
+// After
+<Dropdown onChange={(value) => setRole(value)} />
+<InputTextField onChange={(value) => setName(value)} />
+<CheckboxField onChange={(value) => setEnabled(value)} />
+```
+
+Dynamic Button props, JSX spreads, unknown new/legacy conflicts, duplicate props, multi-use callbacks, and native-event-dependent callbacks are not guessed. They stay semantically unchanged, produce a nonzero exit, and receive one syntax-safe `TODO(cratis-codemod)` annotation:
+
+```tsx
+// Manual review required
+<Button text={appearance.text} severity={appearance.severity} />
+<Dropdown onChange={(event) => {
+    audit(event.originalEvent);
+    setRole(event.value);
+}} />
+```
+
+Review every diagnostic and `TODO(cratis-codemod)` before removing the compatibility props. Then run the application's formatter, lint, type check, tests, and production build. Both codemods are idempotent, include their own TypeScript compiler, support `--package`, require Node.js 20 or newer, and recursively scan `.js`, `.jsx`, `.mjs`, `.cjs`, `.ts`, `.tsx`, `.mts`, and `.cts` files.
+
 Install the matching ESLint plugin version after migration and compose its recommended config after `@cratis/eslint-config`; `no-root-barrel-import` prevents component namespaces from returning:
 
 ```bash
diff --git a/Source/MIGRATION.md b/Source/MIGRATION.md
index fadd7bec..d4933638 100644
--- a/Source/MIGRATION.md
+++ b/Source/MIGRATION.md
@@ -96,6 +96,73 @@ If the exact codemod package version is unavailable, stop rather than substituti
 
 The codemod scans JavaScript/JSX and TypeScript/TSX (including `.mjs`, `.cjs`, `.mts`, and `.cts`), preserves aliases and type-only imports, splits mixed setup/namespace imports, and rewrites a named `export { X } from '@cratis/components'` re-export the same way as the matching import. It reports unsupported cases without guessing: default or whole-package namespace imports, TypeScript `import = require(...)` assignments, dynamic imports, CommonJS `require(...)`, wildcard or whole-package re-exports (`export * from '@cratis/components'` / `export * as X from '@cratis/components'`), side-effect imports, and unknown symbols. Review its diagnostics, then run the consuming project's lint, build, and tests.
 
+### Migrate Button appearance and change callbacks
+
+Run the root-import codemod above first. The Button and callback codemods resolve Components-owned identifiers from explicit subpaths, so the authoritative order is:
+
+1. `cratis-components-remove-root-namespace-imports`
+2. `cratis-components-button-variant-tone`
+3. `cratis-components-change-handler`
+
+Use the exact installed Components version and preview each transform before applying it:
+
+```bash
+COMPONENTS_VERSION="$(node -p "require('@cratis/components/package.json').version")"
+
+npx --package "@cratis/components-codemods@$COMPONENTS_VERSION" \
+  cratis-components-button-variant-tone --check <paths...>
+npx --package "@cratis/components-codemods@$COMPONENTS_VERSION" \
+  cratis-components-button-variant-tone <paths...>
+
+npx --package "@cratis/components-codemods@$COMPONENTS_VERSION" \
+  cratis-components-change-handler --check <paths...>
+npx --package "@cratis/components-codemods@$COMPONENTS_VERSION" \
+  cratis-components-change-handler <paths...>
+```
+
+Never substitute `latest` or a different version if the exact codemod package is unavailable. Stop and migrate manually, keep the application on its current Components package, or wait for the matching publication.
+
+The Button transform preserves the legacy `link` → `text` → `outlined` → `solid` precedence and maps literal props to `variant`, `tone`, and `shape`. Existing literal new props win:
+
+```tsx
+// Before
+<Button outlined rounded severity='warn'>Review</Button>
+<Button variant='ghost' text severity='danger'>Cancel</Button>
+
+// After
+<Button variant='outline' shape='pill' tone='caution'>Review</Button>
+<Button variant='ghost' tone='critical'>Cancel</Button>
+```
+
+`secondary` and `contrast` map to `neutral`; `info` and `help` to `accent`; `success` to `positive`; `warn` to `caution`; and `danger` to `critical`. `contrast` adds `variant='solid'` only when no explicit or stronger legacy variant applies.
+
+The callback transform rewrites only structurally-proven single forwarding callbacks on affected Components-owned Dropdown and CommandForm controls:
+
+```tsx
+// Before
+<Dropdown onChange={(event) => setRole(event.value)} />
+<InputTextField onChange={(event) => setName(event.target.value)} />
+<CheckboxField onChange={({ target: { checked } }) => setEnabled(checked)} />
+
+// After
+<Dropdown onChange={(value) => setRole(value)} />
+<InputTextField onChange={(value) => setName(value)} />
+<CheckboxField onChange={(value) => setEnabled(value)} />
+```
+
+Dynamic Button props, JSX spreads, unknown new/legacy conflicts, duplicate props, multi-use callbacks, and native-event-dependent callbacks are not guessed. They stay semantically unchanged, produce a nonzero exit, and receive one syntax-safe `TODO(cratis-codemod)` annotation:
+
+```tsx
+// Manual review required
+<Button text={appearance.text} severity={appearance.severity} />
+<Dropdown onChange={(event) => {
+    audit(event.originalEvent);
+    setRole(event.value);
+}} />
+```
+
+Review every diagnostic and `TODO(cratis-codemod)` before removing the compatibility props. Then run the application's formatter, lint, type check, tests, and production build. Both codemods are idempotent, include their own TypeScript compiler, support `--package`, require Node.js 20 or newer, and recursively scan `.js`, `.jsx`, `.mjs`, `.cjs`, `.ts`, `.tsx`, `.mts`, and `.cts` files.
+
 Install the matching ESLint plugin version after migration and compose its recommended config after `@cratis/eslint-config`; `no-root-barrel-import` prevents component namespaces from returning:
 
 ```bash

From 512f7882b75d9cdd245a29b75c16db3fad0b9eff Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 17:49:53 +0200
Subject: [PATCH 157/267] Format CommandStepper state coverage

---
 Source/CommandDialog/CommandStepperContent.tsx   |  5 +----
 .../when_rendering_authoritative_states.tsx      | 16 ++++++++--------
 2 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/Source/CommandDialog/CommandStepperContent.tsx b/Source/CommandDialog/CommandStepperContent.tsx
index 5f2f22fd..bc843562 100644
--- a/Source/CommandDialog/CommandStepperContent.tsx
+++ b/Source/CommandDialog/CommandStepperContent.tsx
@@ -234,10 +234,7 @@ export const CommandStepperContent = ({
                     <li
                         {...pt?.step}
                         key={index}
-                        className={[
-                            'cratis-command-stepper__step',
-                            pt?.step?.className,
-                        ]
+                        className={['cratis-command-stepper__step', pt?.step?.className]
                             .filter(Boolean)
                             .join(' ')}
                         data-cratis-part='step'
diff --git a/Source/CommandDialog/for_CommandStepper/when_rendering_authoritative_states.tsx b/Source/CommandDialog/for_CommandStepper/when_rendering_authoritative_states.tsx
index 3191ff70..69444589 100644
--- a/Source/CommandDialog/for_CommandStepper/when_rendering_authoritative_states.tsx
+++ b/Source/CommandDialog/for_CommandStepper/when_rendering_authoritative_states.tsx
@@ -17,11 +17,13 @@ import { markAsCommandFormField } from '../../CommandForm/commandFormMarkers';
 import { CommandStepperContent } from '../CommandStepperContent';
 import { StepperPanel } from '../StepperPanel';
 
-const SampleField = markAsCommandFormField(
-    (({ value: _value }: { value: (command: { sample: string }) => string }) => (
-        <input aria-label='Sample field' />
-    )) as ComponentType<{ value: (command: { sample: string }) => string }>,
-);
+const SampleField = markAsCommandFormField((({
+    value: _value,
+}: {
+    value: (command: { sample: string }) => string;
+}) => <input aria-label='Sample field' />) as ComponentType<{
+    value: (command: { sample: string }) => string;
+}>);
 
 describe('when CommandStepper renders authoritative states', () => {
     let container: HTMLDivElement;
@@ -153,9 +155,7 @@ describe('when CommandStepper renders authoritative states', () => {
             expect(elements[1].dataset.visited).to.equal('true');
             expect(elements[1].hasAttribute('data-invalid')).to.equal(false);
             expect(elements[1].dataset.busy).to.equal('true');
-            expect(elements[1].getAttribute('id')).to.equal(
-                `stepper-${name}`,
-            );
+            expect(elements[1].getAttribute('id')).to.equal(`stepper-${name}`);
         }
 
         const headers = parts('header') as NodeListOf<HTMLButtonElement>;

From 7ef57aeacaea6cb7c5084ed3d5d1a83835a37808 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 17:51:23 +0200
Subject: [PATCH 158/267] Verify codemod output syntax

---
 Codemods/test/migration-transforms.test.js | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/Codemods/test/migration-transforms.test.js b/Codemods/test/migration-transforms.test.js
index 5f6174fb..e11e6c1e 100644
--- a/Codemods/test/migration-transforms.test.js
+++ b/Codemods/test/migration-transforms.test.js
@@ -5,6 +5,7 @@ import { readFileSync } from 'node:fs';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { describe, expect, it } from 'vitest';
+import ts from 'typescript';
 import { transformButtonVariantTone } from '../lib/buttonVariantToneTransform.js';
 import { transformChangeHandlers } from '../lib/changeHandlerTransform.js';
 
@@ -12,6 +13,17 @@ const testDir = path.dirname(fileURLToPath(import.meta.url));
 const fixture = (family, name, file) =>
     readFileSync(path.join(testDir, family, name, file), 'utf8');
 
+const expectValidTsx = (fileName, source) => {
+    const sourceFile = ts.createSourceFile(
+        fileName,
+        source,
+        ts.ScriptTarget.Latest,
+        true,
+        ts.ScriptKind.TSX,
+    );
+    expect(sourceFile.parseDiagnostics).toEqual([]);
+};
+
 const buttonCases = [
     ['aliases-and-precedence', 0],
     ['dynamic-refusal', 2],
@@ -32,6 +44,7 @@ describe('Button variant/tone transform', () => {
             const first = transformButtonVariantTone(`${name}/input.tsx`, input);
             expect(first.text).toBe(expected);
             expect(first.diagnostics).toHaveLength(diagnosticCount);
+            expectValidTsx(`${name}/expected.tsx`, first.text);
 
             const second = transformButtonVariantTone(`${name}/expected.tsx`, first.text);
             expect(second.text).toBe(expected);
@@ -89,6 +102,7 @@ describe('change-handler transform', () => {
             const first = transformChangeHandlers(`${name}/input.tsx`, input);
             expect(first.text).toBe(expected);
             expect(first.diagnostics).toHaveLength(diagnosticCount);
+            expectValidTsx(`${name}/expected.tsx`, first.text);
 
             const second = transformChangeHandlers(`${name}/expected.tsx`, first.text);
             expect(second.text).toBe(expected);

From 45bc32ca58b84b7d50baa72641c965d9a58356a3 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 18:04:15 +0200
Subject: [PATCH 159/267] Add canonical part state manifest verification

---
 Source/scripts/generate-parts.mjs        | 347 +++++++++++++++++-
 Source/scripts/verify-parts-manifest.mjs | 448 +++++++++++++++++++----
 Source/types/parts.ts                    | 383 +++++++++++++++++++
 3 files changed, 1112 insertions(+), 66 deletions(-)

diff --git a/Source/scripts/generate-parts.mjs b/Source/scripts/generate-parts.mjs
index 124a6f8b..0be1498a 100644
--- a/Source/scripts/generate-parts.mjs
+++ b/Source/scripts/generate-parts.mjs
@@ -236,6 +236,323 @@ export const partDefinitions = {
     },
 };
 
+/** Canonical boolean state attributes supported by the stable-parts contract. */
+export const canonicalPartStateNames = [
+    'disabled',
+    'loading',
+    'selected',
+    'open',
+    'invalid',
+    'readonly',
+    'busy',
+    'focused',
+    'pressed',
+];
+
+/**
+ * Allowed canonical states for every part owned directly by a component definition.
+ * Empty arrays are intentional: static parts remain explicitly state-free.
+ * Aliases inherit the complete state contract of their target.
+ */
+export const partStateDefinitions = {
+    CheckboxField: {
+        root: ['disabled', 'selected', 'invalid'],
+        input: ['disabled', 'selected', 'invalid'],
+        box: ['disabled', 'selected', 'invalid'],
+        indicator: ['disabled', 'selected', 'invalid'],
+    },
+    RatingField: {
+        root: ['disabled', 'invalid'],
+        option: ['disabled', 'selected', 'invalid'],
+        input: ['disabled', 'selected', 'invalid'],
+        star: ['disabled', 'selected', 'invalid'],
+    },
+    RadioButtonField: {
+        root: ['disabled', 'selected', 'invalid'],
+        input: ['disabled', 'selected', 'invalid'],
+        box: ['disabled', 'selected', 'invalid'],
+        indicator: ['disabled', 'selected', 'invalid'],
+    },
+    RadioGroupField: {
+        root: ['disabled', 'invalid'],
+        option: ['disabled', 'selected', 'invalid'],
+        input: ['disabled', 'selected', 'invalid'],
+        box: ['disabled', 'selected', 'invalid'],
+        indicator: ['disabled', 'selected', 'invalid'],
+    },
+    ChipsField: {
+        root: ['disabled', 'invalid', 'readonly'],
+        item: ['selected'],
+        remove: ['disabled', 'selected'],
+        input: ['disabled', 'invalid', 'readonly'],
+    },
+    ToggleSwitchField: {
+        root: ['disabled', 'selected', 'invalid'],
+        input: ['disabled', 'selected', 'invalid'],
+        control: ['disabled', 'selected', 'invalid'],
+        handle: ['disabled', 'selected', 'invalid'],
+    },
+    SliderField: {
+        root: ['disabled', 'invalid'],
+        input: ['disabled', 'invalid'],
+        value: ['invalid'],
+    },
+    NumberField: {
+        root: ['disabled', 'invalid', 'readonly'],
+        input: ['disabled', 'invalid', 'readonly'],
+    },
+    ColorPickerField: {
+        root: ['disabled', 'invalid'],
+        input: ['disabled', 'invalid'],
+        value: ['invalid'],
+    },
+    PasswordField: {
+        root: ['disabled', 'invalid', 'readonly'],
+        input: ['disabled', 'invalid', 'readonly'],
+        toggle: ['disabled'],
+    },
+    InputTextField: {
+        input: ['disabled', 'invalid', 'readonly'],
+    },
+    TextAreaField: {
+        textarea: ['disabled', 'invalid', 'readonly'],
+    },
+    Dropdown: {
+        root: ['disabled', 'selected', 'open', 'invalid'],
+        value: ['disabled', 'selected', 'open', 'invalid'],
+        filter: ['disabled', 'open', 'invalid'],
+        trigger: ['disabled', 'selected', 'open', 'invalid'],
+        clear: ['disabled'],
+        popover: ['open'],
+        listbox: ['open'],
+        option: ['disabled', 'selected'],
+        multiple: ['disabled', 'selected', 'invalid'],
+        indicator: ['disabled', 'open', 'invalid'],
+    },
+    DatePickerInput: {
+        root: ['disabled', 'selected', 'open', 'invalid', 'readonly'],
+        group: ['disabled', 'selected', 'open', 'invalid', 'readonly'],
+        input: ['disabled', 'selected', 'open', 'invalid', 'readonly'],
+        segment: ['disabled', 'invalid', 'readonly'],
+        placeholder: [],
+        trigger: ['disabled', 'selected', 'open', 'invalid', 'readonly'],
+        popover: ['open'],
+        dialog: ['open'],
+        calendar: ['open'],
+        header: [],
+        previous: [],
+        heading: [],
+        next: [],
+        grid: [],
+        cell: [],
+        'button-bar': [],
+        today: ['disabled'],
+        clear: [],
+    },
+    Button: {
+        root: ['disabled', 'loading'],
+        spinner: [],
+        icon: [],
+        label: [],
+    },
+    Tooltip: {
+        trigger: [],
+        popup: ['open'],
+    },
+    Dialog: {
+        backdrop: ['open', 'busy'],
+        positioner: ['open', 'busy'],
+        root: ['open', 'busy'],
+        header: [],
+        title: [],
+        close: ['disabled', 'busy'],
+        content: ['open', 'busy'],
+        'busy-scope': ['busy'],
+        footer: [],
+        confirm: ['disabled', 'busy'],
+        cancel: ['disabled', 'busy'],
+    },
+    CommandStepper: {
+        root: ['invalid', 'busy'],
+        list: ['invalid', 'busy'],
+        step: ['selected', 'invalid', 'busy'],
+        header: ['disabled', 'selected', 'invalid', 'busy'],
+        number: ['selected', 'invalid', 'busy'],
+        title: ['selected', 'invalid', 'busy'],
+        separator: ['invalid', 'busy'],
+        panels: ['invalid', 'busy'],
+        panel: ['selected', 'invalid', 'busy'],
+    },
+    DataTableCore: {
+        root: [],
+        search: [],
+        'search-input': [],
+        'table-container': [],
+        table: [],
+        head: [],
+        'header-row': [],
+        'header-cell': ['selected'],
+        'header-content': ['selected'],
+        sort: ['pressed'],
+        body: [],
+        'empty-row': [],
+        'empty-cell': [],
+        row: ['selected'],
+        cell: ['selected'],
+    },
+    ColumnFilterMenu: {
+        'filter-trigger': ['selected', 'open'],
+        'filter-popover': ['open'],
+        'filter-menu': ['open'],
+        'filter-actions': [],
+    },
+    TablePaginator: {
+        root: [],
+        range: [],
+        info: [],
+    },
+    Toaster: {
+        region: [],
+        toast: ['loading', 'busy'],
+        icon: [],
+        content: ['loading', 'busy'],
+        title: [],
+        description: [],
+        close: [],
+        action: [],
+    },
+    EventsView: {
+        timeline: [],
+        event: ['selected'],
+        separator: [],
+        marker: ['selected'],
+        connector: [],
+        content: [],
+    },
+    ChatSidebar: {
+        backdrop: ['selected', 'open'],
+        root: ['selected', 'open'],
+        header: [],
+        back: [],
+        title: [],
+        close: [],
+        content: [],
+    },
+    Toolbar: {
+        root: [],
+    },
+    ToolbarButton: {
+        button: ['selected'],
+        icon: [],
+        label: [],
+    },
+    ToolbarFolder: {
+        'toolbar-folder': ['open'],
+        'toolbar-folder-trigger': ['open'],
+        'toolbar-folder-panel': ['open'],
+    },
+    ToolbarFanOutItem: {
+        'fanout-root': ['open'],
+        'fanout-trigger': ['open'],
+        'fanout-panel': ['open'],
+    },
+    ToolbarSeparator: {
+        'toolbar-separator': [],
+    },
+    ToolbarSection: {
+        'toolbar-section': [],
+        'toolbar-context': ['selected'],
+    },
+    ToolbarGroup: {
+        'toolbar-group': [],
+        'toolbar-slot': [],
+        'toolbar-slot-incoming': [],
+        'toolbar-slot-outgoing': [],
+    },
+    ToolbarLayout: {
+        'toolbar-layout': [],
+        'toolbar-slot': [],
+        'toolbar-slot-incoming': [],
+        'toolbar-slot-outgoing': [],
+    },
+    Skeleton: {
+        root: [],
+    },
+    Message: {
+        root: [],
+        icon: [],
+        text: [],
+    },
+    Badge: {
+        root: [],
+    },
+    ProgressSpinner: {
+        root: ['loading', 'busy'],
+        svg: [],
+        track: [],
+        range: [],
+    },
+    Avatar: {
+        root: [],
+        image: [],
+        fallback: [],
+    },
+    Tag: {
+        root: [],
+        icon: [],
+        label: [],
+    },
+    ProgressBar: {
+        root: ['loading', 'busy'],
+        indicator: [],
+        label: [],
+    },
+    Chip: {
+        root: [],
+        icon: [],
+        label: [],
+        remove: [],
+    },
+};
+
+/**
+ * Render callbacks that receive a documented part marker through spread props while
+ * adding canonical states on the returned native element. The spread expression and
+ * state set are exact so verifier drift fails closed.
+ */
+export const splitPartStateAllowlist = [
+    {
+        file: 'Common/DatePickerInput.tsx',
+        spread: 'groupProps',
+        part: 'group',
+        states: ['disabled', 'selected', 'open', 'invalid', 'readonly'],
+    },
+    {
+        file: 'Common/DatePickerInput.tsx',
+        spread: 'inputProps',
+        part: 'input',
+        states: ['disabled', 'selected', 'open', 'invalid', 'readonly'],
+    },
+    {
+        file: 'Common/DatePickerInput.tsx',
+        spread: 'segmentProps',
+        part: 'segment',
+        states: ['disabled', 'invalid', 'readonly'],
+    },
+    {
+        file: 'Common/DatePickerInput.tsx',
+        spread: 'triggerProps',
+        part: 'trigger',
+        states: ['disabled', 'selected', 'open', 'invalid', 'readonly'],
+    },
+    {
+        file: 'Dropdown/Dropdown.tsx',
+        spread: 'props',
+        part: 'trigger',
+        states: ['open'],
+    },
+];
+
 /** Exact dynamic production expressions that intentionally emit known parts. */
 export const dynamicPartExpressions = [
     {
@@ -295,6 +612,22 @@ export const resolveDefinition = (component, seen = new Set()) => {
 export const resolvedParts = (component) => [...resolveDefinition(component).parts];
 export const resolvedPtKeys = (component) => [...(resolveDefinition(component).ptKeys ?? [])];
 
+export const resolvePartStateDefinition = (component, seen = new Set()) => {
+    const definition = partDefinitions[component];
+    if (!definition) throw new Error(`Unknown parts component '${component}'.`);
+    if (!definition.aliasOf) return partStateDefinitions[component];
+    if (seen.has(component)) throw new Error(`Circular parts-state alias at '${component}'.`);
+    return resolvePartStateDefinition(definition.aliasOf, new Set(seen).add(component));
+};
+
+export const resolvedPartStates = (component) => {
+    const states = resolvePartStateDefinition(component);
+    if (!states) throw new Error(`Missing parts-state definition for '${component}'.`);
+    return Object.fromEntries(
+        resolvedParts(component).map((part) => [part, [...(states[part] ?? [])]]),
+    );
+};
+
 export function generatedPartsSource() {
     const entries = Object.keys(partDefinitions)
         .map((component) => {
@@ -304,8 +637,20 @@ export function generatedPartsSource() {
             return `    ${component}: [${parts}],`;
         })
         .join('\n');
+    const stateNames = canonicalPartStateNames.map((state) => `'${state}'`).join(', ');
+    const stateEntries = Object.keys(partDefinitions)
+        .map((component) => {
+            const parts = Object.entries(resolvedPartStates(component))
+                .map(([part, states]) => {
+                    const values = states.map((state) => `'${state}'`).join(', ');
+                    return `        '${part}': [${values}],`;
+                })
+                .join('\n');
+            return `    ${component}: {\n${parts}\n    },`;
+        })
+        .join('\n');
 
-    return `// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\n// @generated by Cratis — do not edit\n\n/** Stable data-cratis-part names exposed by each public component. */\nexport const cratisParts = {\n${entries}\n} as const;\n\n/** The canonical Components part-name manifest. */\nexport type CratisPartsManifest = typeof cratisParts;\n\n/** Stable part names exposed by one component in the canonical manifest. */\nexport type PartsOf<K extends keyof CratisPartsManifest> = CratisPartsManifest[K][number];\n`;
+    return `// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\n// @generated by Cratis — do not edit\n\n/** Stable data-cratis-part names exposed by each public component. */\nexport const cratisParts = {\n${entries}\n} as const;\n\n/** The canonical Components part-name manifest. */\nexport type CratisPartsManifest = typeof cratisParts;\n\n/** Stable part names exposed by one component in the canonical manifest. */\nexport type PartsOf<K extends keyof CratisPartsManifest> = CratisPartsManifest[K][number];\n\n/** Canonical semantic state names supported by the stable-parts contract. */\nexport const cratisCanonicalPartStates = [${stateNames}] as const;\n\n/** A canonical semantic state name without the data- prefix. */\nexport type CratisCanonicalPartState = (typeof cratisCanonicalPartStates)[number];\n\n/**\n * Canonical states emitted by every stable part. Empty arrays document parts that\n * intentionally expose no canonical state attributes.\n */\nexport const cratisPartStates = {\n${stateEntries}\n} as const satisfies {\n    readonly [Component in keyof CratisPartsManifest]: {\n        readonly [Part in PartsOf<Component>]: readonly CratisCanonicalPartState[];\n    };\n};\n\n/** The canonical component/part/state manifest. */\nexport type CratisPartStatesManifest = typeof cratisPartStates;\n\n/** Canonical states exposed by one stable component part. */\nexport type PartStatesOf<\n    Component extends keyof CratisPartStatesManifest,\n    Part extends keyof CratisPartStatesManifest[Component],\n> = CratisPartStatesManifest[Component][Part] extends readonly (infer State)[]\n    ? State\n    : never;\n`;
 }
 
 export function generateParts() {
diff --git a/Source/scripts/verify-parts-manifest.mjs b/Source/scripts/verify-parts-manifest.mjs
index d94b9e04..5c06ee36 100644
--- a/Source/scripts/verify-parts-manifest.mjs
+++ b/Source/scripts/verify-parts-manifest.mjs
@@ -6,16 +6,32 @@ import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import ts from 'typescript';
 import {
+    canonicalPartStateNames,
     dynamicPartExpressions,
     dynamicTestSelectors,
     generatedPartsSource,
     partDefinitions,
+    partStateDefinitions,
+    resolvedPartStates,
     resolvedParts,
     resolvedPtKeys,
+    splitPartStateAllowlist,
 } from './generate-parts.mjs';
 
 const sourceRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
 const generatedPath = path.join(sourceRoot, 'types', 'parts.ts');
+const expectedCanonicalPartStateNames = [
+    'disabled',
+    'loading',
+    'selected',
+    'open',
+    'invalid',
+    'readonly',
+    'busy',
+    'focused',
+    'pressed',
+];
+const canonicalPartStateNameSet = new Set(expectedCanonicalPartStateNames);
 
 const normalizePath = (file) => path.relative(sourceRoot, file).split(path.sep).join('/');
 const sorted = (values) => [...values].sort((left, right) => left.localeCompare(right));
@@ -53,8 +69,7 @@ const ownersBySource = () => {
 
 const resolvedEmissionSources = (component, seen = new Set()) => {
     const definition = partDefinitions[component];
-    if (!definition) return [];
-    if (seen.has(component)) return [];
+    if (!definition || seen.has(component)) return [];
     const own = definition.sources ?? [];
     if (!definition.aliasOf) return own;
     return [
@@ -66,27 +81,117 @@ const resolvedEmissionSources = (component, seen = new Set()) => {
 const dynamicProductionMap = new Map(
     dynamicPartExpressions.map((entry) => [`${entry.file}\0${entry.expression}`, entry]),
 );
+const splitStateMap = new Map(
+    splitPartStateAllowlist.map((entry) => [`${entry.file}\0${entry.spread}`, entry]),
+);
+
+const unwrapExpression = (expression) => {
+    let current = expression;
+    while (
+        ts.isParenthesizedExpression(current) ||
+        ts.isAsExpression(current) ||
+        ts.isTypeAssertionExpression(current) ||
+        ts.isNonNullExpression(current) ||
+        ts.isSatisfiesExpression(current)
+    ) current = current.expression;
+    return current;
+};
+
+const isUndefinedExpression = (expression) => {
+    const current = unwrapExpression(expression);
+    return (
+        (ts.isIdentifier(current) && current.text === 'undefined') ||
+        (ts.isVoidExpression(current) && current.expression.kind === ts.SyntaxKind.NumericLiteral)
+    );
+};
+
+const isTrueExpression = (expression) => {
+    const current = unwrapExpression(expression);
+    return (
+        current.kind === ts.SyntaxKind.TrueKeyword ||
+        (ts.isStringLiteral(current) && current.text === 'true')
+    );
+};
+
+const isBooleanLikeType = (type) => {
+    const types = type.isUnion() ? type.types : [type];
+    return types.every(
+        (candidate) =>
+            (candidate.flags & ts.TypeFlags.BooleanLike) !== 0 ||
+            (candidate.flags & ts.TypeFlags.Undefined) !== 0 ||
+            (candidate.flags & ts.TypeFlags.Never) !== 0,
+    );
+};
+
+const isFalseSafeStateExpression = (expression, checker) => {
+    const current = unwrapExpression(expression);
+    if (isTrueExpression(current)) return true;
+    if (
+        ts.isBinaryExpression(current) &&
+        current.operatorToken.kind === ts.SyntaxKind.BarBarToken &&
+        isUndefinedExpression(current.right)
+    ) {
+        const condition = unwrapExpression(current.left);
+        if (ts.isStringLiteral(condition)) return condition.text === 'true';
+        return !checker || isBooleanLikeType(checker.getTypeAtLocation(condition));
+    }
+    if (ts.isConditionalExpression(current)) {
+        return (
+            (isTrueExpression(current.whenTrue) &&
+                isUndefinedExpression(current.whenFalse)) ||
+            (isUndefinedExpression(current.whenTrue) &&
+                isTrueExpression(current.whenFalse))
+        );
+    }
+    return false;
+};
+
+function stateValueProblem(attribute, sourceFile, relative, checker) {
+    if (!attribute.initializer) return undefined;
+    const line = sourceFile.getLineAndCharacterOfPosition(attribute.getStart()).line + 1;
+    if (ts.isStringLiteral(attribute.initializer)) {
+        if (attribute.initializer.text === 'true') return undefined;
+        return `${relative}:${line} ${attribute.name.text}='${attribute.initializer.text}' can serialize a non-true state; use bare true or a condition normalized to undefined.`;
+    }
+    if (
+        ts.isJsxExpression(attribute.initializer) &&
+        attribute.initializer.expression &&
+        isFalseSafeStateExpression(attribute.initializer.expression, checker)
+    ) return undefined;
+    return `${relative}:${line} ${attribute.name.text} can serialize false; use bare true or a condition normalized to undefined.`;
+}
+
+const getStateEmissions = (stateEmissions, owner, part) => {
+    const ownerStates = stateEmissions.get(owner) ?? new Map();
+    const states = ownerStates.get(part) ?? new Set();
+    ownerStates.set(part, states);
+    stateEmissions.set(owner, ownerStates);
+    return states;
+};
 
 function readProductionEmissions() {
-    const emissions = new Map();
+    const partEmissions = new Map();
+    const stateEmissions = new Map();
     const problems = [];
     const owners = ownersBySource();
     const seenDynamic = new Set();
+    const seenSplit = new Set();
+    const productionFiles = collectTsx(sourceRoot).filter((file) =>
+        isProductionFile(normalizePath(file)),
+    );
+    const program = buildProgram(productionFiles);
+    const checker = program.getTypeChecker();
 
-    for (const file of collectTsx(sourceRoot)) {
+    for (const file of productionFiles) {
         const relative = normalizePath(file);
-        if (!isProductionFile(relative)) continue;
-        const sourceText = readFileSync(file, 'utf8');
-        const sourceFile = ts.createSourceFile(
-            file,
-            sourceText,
-            ts.ScriptTarget.Latest,
-            true,
-            ts.ScriptKind.TSX,
-        );
+        const sourceFile = program.getSourceFile(file);
+        if (!sourceFile) {
+            problems.push(`${relative} could not be loaded into the TypeScript verifier program.`);
+            continue;
+        }
         const fileOwners = owners.get(relative) ?? [];
 
-        const record = (part, node) => {
+        const recordPart = (part, node) => {
             if (fileOwners.length === 0) {
                 const line = sourceFile.getLineAndCharacterOfPosition(node.getStart()).line + 1;
                 problems.push(
@@ -95,13 +200,17 @@ function readProductionEmissions() {
                 return;
             }
             for (const owner of fileOwners) {
-                const values = emissions.get(owner) ?? new Set();
+                const values = partEmissions.get(owner) ?? new Set();
                 values.add(part);
-                emissions.set(owner, values);
+                partEmissions.set(owner, values);
             }
         };
 
-        const recordDynamic = (expression, node) => {
+        const recordState = (part, state) => {
+            for (const owner of fileOwners) getStateEmissions(stateEmissions, owner, part).add(state);
+        };
+
+        const dynamicParts = (expression, node) => {
             const key = `${relative}\0${expression}`;
             const allowlist = dynamicProductionMap.get(key);
             const line = sourceFile.getLineAndCharacterOfPosition(node.getStart()).line + 1;
@@ -109,39 +218,94 @@ function readProductionEmissions() {
                 problems.push(
                     `${relative}:${line} has unproven dynamic data-cratis-part expression '${expression}'. Add an exact mapping to dynamicPartExpressions in generate-parts.mjs.`,
                 );
-                return;
+                return [];
             }
             seenDynamic.add(key);
-            for (const part of allowlist.parts) record(part, node);
+            return allowlist.parts;
         };
 
-        const visit = (node) => {
-            if (ts.isJsxAttribute(node) && node.name.text === 'data-cratis-part') {
-                const initializer = node.initializer;
-                if (initializer && ts.isStringLiteral(initializer)) {
-                    record(initializer.text, node);
-                } else if (
-                    initializer &&
-                    ts.isJsxExpression(initializer) &&
-                    initializer.expression
-                ) {
-                    if (ts.isStringLiteral(initializer.expression))
-                        record(initializer.expression.text, node);
-                    else recordDynamic(initializer.expression.getText(sourceFile), node);
-                } else {
-                    recordDynamic('<missing initializer>', node);
+        const literalOrDynamicParts = (attribute) => {
+            const initializer = attribute.initializer;
+            if (initializer && ts.isStringLiteral(initializer)) return [initializer.text];
+            if (initializer && ts.isJsxExpression(initializer) && initializer.expression) {
+                if (ts.isStringLiteral(initializer.expression)) return [initializer.expression.text];
+                return dynamicParts(initializer.expression.getText(sourceFile), attribute);
+            }
+            return dynamicParts('<missing initializer>', attribute);
+        };
+
+        const inspectOpeningElement = (node) => {
+            const attributes = node.attributes.properties;
+            const partAttribute = attributes.find(
+                (attribute) =>
+                    ts.isJsxAttribute(attribute) && attribute.name.text === 'data-cratis-part',
+            );
+            const stateAttributes = attributes.filter(
+                (attribute) =>
+                    ts.isJsxAttribute(attribute) &&
+                    typeof attribute.name.text === 'string' &&
+                    attribute.name.text.startsWith('data-') &&
+                    canonicalPartStateNameSet.has(attribute.name.text.slice(5)),
+            );
+
+            for (const attribute of stateAttributes) {
+                const problem = stateValueProblem(attribute, sourceFile, relative, checker);
+                if (problem) problems.push(problem);
+            }
+
+            if (partAttribute && ts.isJsxAttribute(partAttribute)) {
+                const parts = literalOrDynamicParts(partAttribute);
+                for (const part of parts) {
+                    recordPart(part, partAttribute);
+                    for (const attribute of stateAttributes)
+                        recordState(part, attribute.name.text.slice(5));
                 }
+                return;
             }
 
+            if (stateAttributes.length === 0) return;
+            const spreadExpressions = attributes
+                .filter(ts.isJsxSpreadAttribute)
+                .map((attribute) => attribute.expression.getText(sourceFile));
+            const splitEntries = spreadExpressions
+                .map((spread) => splitStateMap.get(`${relative}\0${spread}`))
+                .filter(Boolean);
+            if (splitEntries.length === 0) return;
+            const line = sourceFile.getLineAndCharacterOfPosition(node.getStart()).line + 1;
+            if (splitEntries.length > 1) {
+                problems.push(`${relative}:${line} matches more than one split part-state allowlist.`);
+                return;
+            }
+            const splitEntry = splitEntries[0];
+            const key = `${splitEntry.file}\0${splitEntry.spread}`;
+            seenSplit.add(key);
+            const actualStates = sorted(
+                new Set(stateAttributes.map((attribute) => attribute.name.text.slice(5))),
+            );
+            const expectedStates = sorted(splitEntry.states);
+            if (!sameValues(actualStates, expectedStates)) {
+                problems.push(
+                    `${relative}:${line} split state allowlist for '${splitEntry.part}' differs: source=[${actualStates.join(', ')}], manifest=[${expectedStates.join(', ')}].`,
+                );
+            }
+            recordPart(splitEntry.part, node);
+            for (const state of actualStates) recordState(splitEntry.part, state);
+        };
+
+        const visit = (node) => {
+            if (ts.isJsxOpeningElement(node) || ts.isJsxSelfClosingElement(node))
+                inspectOpeningElement(node);
+
             if (ts.isPropertyAssignment(node)) {
                 const name = node.name;
                 const isPartProperty =
                     (ts.isStringLiteral(name) && name.text === 'data-cratis-part') ||
                     (ts.isIdentifier(name) && name.text === 'data-cratis-part');
                 if (isPartProperty) {
-                    if (ts.isStringLiteral(node.initializer))
-                        record(node.initializer.text, node);
-                    else recordDynamic(node.initializer.getText(sourceFile), node);
+                    const parts = ts.isStringLiteral(node.initializer)
+                        ? [node.initializer.text]
+                        : dynamicParts(node.initializer.getText(sourceFile), node);
+                    for (const part of parts) recordPart(part, node);
                 }
             }
             ts.forEachChild(node, visit);
@@ -150,13 +314,14 @@ function readProductionEmissions() {
     }
 
     for (const [key, entry] of dynamicProductionMap) {
-        if (!seenDynamic.has(key)) {
-            problems.push(
-                `Stale dynamic production mapping for ${entry.file}: '${entry.expression}'.`,
-            );
-        }
+        if (!seenDynamic.has(key))
+            problems.push(`Stale dynamic production mapping for ${entry.file}: '${entry.expression}'.`);
+    }
+    for (const [key, entry] of splitStateMap) {
+        if (!seenSplit.has(key))
+            problems.push(`Stale split part-state allowlist for ${entry.file}: '${entry.spread}'.`);
     }
-    return { emissions, problems };
+    return { partEmissions, stateEmissions, problems };
 }
 
 function compareComponentParts(component, manifestParts, emittedParts) {
@@ -174,32 +339,112 @@ function compareComponentParts(component, manifestParts, emittedParts) {
     return problems;
 }
 
-function verifyDefinitions(emissions) {
+function validatePartStateDefinition(component, parts, statesByPart) {
+    const problems = [];
+    if (!statesByPart) return [`${component} has no explicit part-state definition.`];
+    const expectedParts = sorted(parts);
+    const actualParts = sorted(Object.keys(statesByPart));
+    if (!sameValues(actualParts, expectedParts)) {
+        problems.push(
+            `${component} state part inventory differs: states=[${actualParts.join(', ')}], parts=[${expectedParts.join(', ')}].`,
+        );
+    }
+    for (const [part, states] of Object.entries(statesByPart)) {
+        const duplicate = states.find((state, index) => states.indexOf(state) !== index);
+        if (duplicate) problems.push(`${component}.${part} repeats canonical state '${duplicate}'.`);
+        for (const state of states) {
+            if (!canonicalPartStateNameSet.has(state))
+                problems.push(`${component}.${part} declares unknown canonical state '${state}'.`);
+        }
+    }
+    return problems;
+}
+
+function compareComponentStates(component, manifestStates, emittedStates) {
+    const problems = [];
+    for (const [part, declaredStates] of Object.entries(manifestStates)) {
+        const emitted = emittedStates.get(part) ?? new Set();
+        for (const state of declaredStates) {
+            if (!emitted.has(state))
+                problems.push(
+                    `${component}.${part} declares orphaned canonical state '${state}' but neither it nor its alias target emits it.`,
+                );
+        }
+        for (const state of emitted) {
+            if (!declaredStates.includes(state))
+                problems.push(`${component}.${part} emits undeclared canonical state '${state}'.`);
+        }
+    }
+    for (const [part, emitted] of emittedStates) {
+        if (part in manifestStates) continue;
+        for (const state of emitted)
+            problems.push(`${component}.${part} emits canonical state '${state}' for an unknown part.`);
+    }
+    return problems;
+}
+
+const aggregateEmissions = (component, emissions, emptyValue) => {
+    const sourceFiles = resolvedEmissionSources(component);
+    const aggregate = emptyValue();
+    for (const [sourceComponent, definition] of Object.entries(partDefinitions)) {
+        const candidateFiles = definition.sources ?? [];
+        if (!candidateFiles.some((file) => sourceFiles.includes(file))) continue;
+        const sourceEmission = emissions.get(sourceComponent);
+        if (!sourceEmission) continue;
+        if (aggregate instanceof Set) {
+            for (const value of sourceEmission) aggregate.add(value);
+        } else {
+            for (const [part, states] of sourceEmission) {
+                const values = aggregate.get(part) ?? new Set();
+                for (const state of states) values.add(state);
+                aggregate.set(part, values);
+            }
+        }
+    }
+    return aggregate;
+};
+
+function verifyDefinitions(partEmissions, stateEmissions) {
     const problems = [];
     const owners = ownersBySource();
     const allParts = new Set();
 
+    if (!sameValues(canonicalPartStateNames, expectedCanonicalPartStateNames)) {
+        problems.push(
+            `Canonical part states must be exactly [${expectedCanonicalPartStateNames.join(', ')}], found [${canonicalPartStateNames.join(', ')}].`,
+        );
+    }
+
     for (const [component, definition] of Object.entries(partDefinitions)) {
         const parts = resolvedParts(component);
         const duplicate = parts.find((part, index) => parts.indexOf(part) !== index);
-        if (duplicate)
-            problems.push(`${component} repeats manifest part '${duplicate}'.`);
+        if (duplicate) problems.push(`${component} repeats manifest part '${duplicate}'.`);
         for (const part of parts) allParts.add(part);
 
         for (const source of definition.sources ?? []) {
             if (!owners.has(source)) problems.push(`${component} references unknown source ${source}.`);
         }
 
-        const emitted = new Set();
-        for (const sourceComponent of Object.keys(partDefinitions)) {
-            const sourceFiles = resolvedEmissionSources(component);
-            const candidateFiles = partDefinitions[sourceComponent].sources ?? [];
-            if (candidateFiles.some((file) => sourceFiles.includes(file))) {
-                for (const part of emissions.get(sourceComponent) ?? []) emitted.add(part);
-            }
+        if (definition.aliasOf) {
+            if (component in partStateDefinitions)
+                problems.push(`${component} is an alias and must inherit, not redeclare, part states.`);
+        } else {
+            problems.push(
+                ...validatePartStateDefinition(component, parts, partStateDefinitions[component]),
+            );
         }
 
-        problems.push(...compareComponentParts(component, parts, emitted));
+        const emittedParts = aggregateEmissions(component, partEmissions, () => new Set());
+        const emittedStates = aggregateEmissions(component, stateEmissions, () => new Map());
+        problems.push(...compareComponentParts(component, parts, emittedParts));
+        problems.push(
+            ...compareComponentStates(component, resolvedPartStates(component), emittedStates),
+        );
+    }
+
+    for (const component of Object.keys(partStateDefinitions)) {
+        if (!(component in partDefinitions))
+            problems.push(`Part-state definition references unknown component '${component}'.`);
     }
 
     return { problems, allParts };
@@ -338,7 +583,8 @@ function verifyTestSelectors(allParts) {
                 ts.isNoSubstitutionTemplateLiteral(node) ||
                 ts.isRegularExpressionLiteral(node)
             ) inspectText(node.text, node);
-            else if (ts.isTemplateExpression(node)) inspectText(node.getText(sourceFile).slice(1, -1), node);
+            else if (ts.isTemplateExpression(node))
+                inspectText(node.getText(sourceFile).slice(1, -1), node);
             ts.forEachChild(node, visit);
         };
         visit(sourceFile);
@@ -359,13 +605,30 @@ function verifyGeneratedFile() {
         : ['types/parts.ts is stale or was edited by hand. Run yarn generate-parts.'];
 }
 
+const stateAttributeFromFixture = (source) => {
+    const sourceFile = ts.createSourceFile(
+        'fixture.tsx',
+        source,
+        ts.ScriptTarget.Latest,
+        true,
+        ts.ScriptKind.TSX,
+    );
+    let result;
+    const visit = (node) => {
+        if (
+            ts.isJsxAttribute(node) &&
+            typeof node.name.text === 'string' &&
+            node.name.text.startsWith('data-')
+        ) result = node;
+        ts.forEachChild(node, visit);
+    };
+    visit(sourceFile);
+    return { sourceFile, attribute: result };
+};
+
 function runSelfTests() {
     const failures = [];
-    const missing = compareComponentParts(
-        'Widget',
-        ['root'],
-        new Set(['root', 'missing']),
-    );
+    const missing = compareComponentParts('Widget', ['root'], new Set(['root', 'missing']));
     if (!missing.some((problem) => problem.includes("missing manifest part 'missing'")))
         failures.push('planted missing source part was not detected');
     const orphaned = compareComponentParts(
@@ -376,7 +639,44 @@ function runSelfTests() {
     if (!orphaned.some((problem) => problem.includes("orphaned part 'orphaned'")))
         failures.push('planted orphaned manifest part was not detected');
     if (compareComponentParts('Widget', ['root'], new Set(['root'])).length !== 0)
-        failures.push('matching fixture did not pass');
+        failures.push('matching part fixture did not pass');
+
+    const unknownState = validatePartStateDefinition(
+        'Widget',
+        ['root'],
+        { root: ['unknown'] },
+    );
+    if (!unknownState.some((problem) => problem.includes("unknown canonical state 'unknown'")))
+        failures.push('planted unknown state declaration was not detected');
+
+    const orphanedState = compareComponentStates(
+        'Widget',
+        { root: ['selected'] },
+        new Map([['root', new Set()]]),
+    );
+    if (!orphanedState.some((problem) => problem.includes("orphaned canonical state 'selected'")))
+        failures.push('planted orphaned state declaration was not detected');
+
+    for (const source of [
+        "<div data-selected='false' />",
+        '<div data-selected={false} />',
+        '<div data-selected={selected} />',
+        "<div data-selected={'false' || undefined} />",
+    ]) {
+        const fixture = stateAttributeFromFixture(source);
+        if (!stateValueProblem(fixture.attribute, fixture.sourceFile, 'fixture.tsx'))
+            failures.push(`planted false-valued state was not detected: ${source}`);
+    }
+    for (const source of [
+        '<div data-selected />',
+        "<div data-selected='true' />",
+        '<div data-selected={selected || undefined} />',
+        '<div data-selected={selected ? true : undefined} />',
+    ]) {
+        const fixture = stateAttributeFromFixture(source);
+        if (stateValueProblem(fixture.attribute, fixture.sourceFile, 'fixture.tsx'))
+            failures.push(`false-safe state fixture did not pass: ${source}`);
+    }
     return failures;
 }
 
@@ -385,8 +685,15 @@ export function verifyPartsManifest() {
     if (selfTestProblems.length > 0)
         return selfTestProblems.map((problem) => `Self-test failed: ${problem}`);
 
-    const { emissions, problems: emissionProblems } = readProductionEmissions();
-    const { problems: definitionProblems, allParts } = verifyDefinitions(emissions);
+    const {
+        partEmissions,
+        stateEmissions,
+        problems: emissionProblems,
+    } = readProductionEmissions();
+    const { problems: definitionProblems, allParts } = verifyDefinitions(
+        partEmissions,
+        stateEmissions,
+    );
     return [
         ...emissionProblems,
         ...definitionProblems,
@@ -403,7 +710,9 @@ function main() {
         for (const problem of selfTestProblems) console.error(`verify-parts-manifest: ${problem}`);
         process.exit(1);
     }
-    console.log('verify-parts-manifest self-tests passed (missing and orphaned fixtures).');
+    console.log(
+        'verify-parts-manifest self-tests passed (unknown, orphaned, and false-valued state fixtures).',
+    );
     if (selfTestOnly) return;
 
     const problems = verifyPartsManifest();
@@ -417,8 +726,17 @@ function main() {
         (count, component) => count + resolvedParts(component).length,
         0,
     );
+    const stateCount = Object.keys(partDefinitions).reduce(
+        (count, component) =>
+            count +
+            Object.values(resolvedPartStates(component)).reduce(
+                (componentCount, states) => componentCount + states.length,
+                0,
+            ),
+        0,
+    );
     console.log(
-        `Parts manifest verified: ${componentCount} components, ${partCount} component parts, 38 pt files, and 41 pt declarations.`,
+        `Parts manifest verified: ${componentCount} components, ${partCount} component parts, ${stateCount} component/part states, 38 pt files, and 41 pt declarations.`,
     );
 }
 
diff --git a/Source/types/parts.ts b/Source/types/parts.ts
index 9c8b4d55..7e72a12e 100644
--- a/Source/types/parts.ts
+++ b/Source/types/parts.ts
@@ -59,3 +59,386 @@ export type CratisPartsManifest = typeof cratisParts;
 
 /** Stable part names exposed by one component in the canonical manifest. */
 export type PartsOf<K extends keyof CratisPartsManifest> = CratisPartsManifest[K][number];
+
+/** Canonical semantic state names supported by the stable-parts contract. */
+export const cratisCanonicalPartStates = ['disabled', 'loading', 'selected', 'open', 'invalid', 'readonly', 'busy', 'focused', 'pressed'] as const;
+
+/** A canonical semantic state name without the data- prefix. */
+export type CratisCanonicalPartState = (typeof cratisCanonicalPartStates)[number];
+
+/**
+ * Canonical states emitted by every stable part. Empty arrays document parts that
+ * intentionally expose no canonical state attributes.
+ */
+export const cratisPartStates = {
+    CheckboxField: {
+        'root': ['disabled', 'selected', 'invalid'],
+        'input': ['disabled', 'selected', 'invalid'],
+        'box': ['disabled', 'selected', 'invalid'],
+        'indicator': ['disabled', 'selected', 'invalid'],
+    },
+    RatingField: {
+        'root': ['disabled', 'invalid'],
+        'option': ['disabled', 'selected', 'invalid'],
+        'input': ['disabled', 'selected', 'invalid'],
+        'star': ['disabled', 'selected', 'invalid'],
+    },
+    RadioButtonField: {
+        'root': ['disabled', 'selected', 'invalid'],
+        'input': ['disabled', 'selected', 'invalid'],
+        'box': ['disabled', 'selected', 'invalid'],
+        'indicator': ['disabled', 'selected', 'invalid'],
+    },
+    RadioGroupField: {
+        'root': ['disabled', 'invalid'],
+        'option': ['disabled', 'selected', 'invalid'],
+        'input': ['disabled', 'selected', 'invalid'],
+        'box': ['disabled', 'selected', 'invalid'],
+        'indicator': ['disabled', 'selected', 'invalid'],
+    },
+    ChipsField: {
+        'root': ['disabled', 'invalid', 'readonly'],
+        'item': ['selected'],
+        'remove': ['disabled', 'selected'],
+        'input': ['disabled', 'invalid', 'readonly'],
+    },
+    ToggleSwitchField: {
+        'root': ['disabled', 'selected', 'invalid'],
+        'input': ['disabled', 'selected', 'invalid'],
+        'control': ['disabled', 'selected', 'invalid'],
+        'handle': ['disabled', 'selected', 'invalid'],
+    },
+    SliderField: {
+        'root': ['disabled', 'invalid'],
+        'input': ['disabled', 'invalid'],
+        'value': ['invalid'],
+    },
+    NumberField: {
+        'root': ['disabled', 'invalid', 'readonly'],
+        'input': ['disabled', 'invalid', 'readonly'],
+    },
+    ColorPickerField: {
+        'root': ['disabled', 'invalid'],
+        'input': ['disabled', 'invalid'],
+        'value': ['invalid'],
+    },
+    PasswordField: {
+        'root': ['disabled', 'invalid', 'readonly'],
+        'input': ['disabled', 'invalid', 'readonly'],
+        'toggle': ['disabled'],
+    },
+    InputTextField: {
+        'input': ['disabled', 'invalid', 'readonly'],
+    },
+    TextAreaField: {
+        'textarea': ['disabled', 'invalid', 'readonly'],
+    },
+    Dropdown: {
+        'root': ['disabled', 'selected', 'open', 'invalid'],
+        'value': ['disabled', 'selected', 'open', 'invalid'],
+        'filter': ['disabled', 'open', 'invalid'],
+        'trigger': ['disabled', 'selected', 'open', 'invalid'],
+        'clear': ['disabled'],
+        'popover': ['open'],
+        'listbox': ['open'],
+        'option': ['disabled', 'selected'],
+        'multiple': ['disabled', 'selected', 'invalid'],
+        'indicator': ['disabled', 'open', 'invalid'],
+    },
+    DropdownField: {
+        'root': ['disabled', 'selected', 'open', 'invalid'],
+        'value': ['disabled', 'selected', 'open', 'invalid'],
+        'filter': ['disabled', 'open', 'invalid'],
+        'trigger': ['disabled', 'selected', 'open', 'invalid'],
+        'clear': ['disabled'],
+        'popover': ['open'],
+        'listbox': ['open'],
+        'option': ['disabled', 'selected'],
+        'multiple': ['disabled', 'selected', 'invalid'],
+        'indicator': ['disabled', 'open', 'invalid'],
+    },
+    MultiSelectField: {
+        'root': ['disabled', 'selected', 'open', 'invalid'],
+        'value': ['disabled', 'selected', 'open', 'invalid'],
+        'filter': ['disabled', 'open', 'invalid'],
+        'trigger': ['disabled', 'selected', 'open', 'invalid'],
+        'clear': ['disabled'],
+        'popover': ['open'],
+        'listbox': ['open'],
+        'option': ['disabled', 'selected'],
+        'multiple': ['disabled', 'selected', 'invalid'],
+        'indicator': ['disabled', 'open', 'invalid'],
+    },
+    DatePickerInput: {
+        'root': ['disabled', 'selected', 'open', 'invalid', 'readonly'],
+        'group': ['disabled', 'selected', 'open', 'invalid', 'readonly'],
+        'input': ['disabled', 'selected', 'open', 'invalid', 'readonly'],
+        'segment': ['disabled', 'invalid', 'readonly'],
+        'placeholder': [],
+        'trigger': ['disabled', 'selected', 'open', 'invalid', 'readonly'],
+        'popover': ['open'],
+        'dialog': ['open'],
+        'calendar': ['open'],
+        'header': [],
+        'previous': [],
+        'heading': [],
+        'next': [],
+        'grid': [],
+        'cell': [],
+        'button-bar': [],
+        'today': ['disabled'],
+        'clear': [],
+    },
+    CalendarField: {
+        'root': ['disabled', 'selected', 'open', 'invalid', 'readonly'],
+        'group': ['disabled', 'selected', 'open', 'invalid', 'readonly'],
+        'input': ['disabled', 'selected', 'open', 'invalid', 'readonly'],
+        'segment': ['disabled', 'invalid', 'readonly'],
+        'placeholder': [],
+        'trigger': ['disabled', 'selected', 'open', 'invalid', 'readonly'],
+        'popover': ['open'],
+        'dialog': ['open'],
+        'calendar': ['open'],
+        'header': [],
+        'previous': [],
+        'heading': [],
+        'next': [],
+        'grid': [],
+        'cell': [],
+        'button-bar': [],
+        'today': ['disabled'],
+        'clear': [],
+    },
+    Button: {
+        'root': ['disabled', 'loading'],
+        'spinner': [],
+        'icon': [],
+        'label': [],
+    },
+    ActionMenubar: {
+        'root': ['disabled', 'loading'],
+        'spinner': [],
+        'icon': [],
+        'label': [],
+    },
+    Tooltip: {
+        'trigger': [],
+        'popup': ['open'],
+    },
+    Dialog: {
+        'backdrop': ['open', 'busy'],
+        'positioner': ['open', 'busy'],
+        'root': ['open', 'busy'],
+        'header': [],
+        'title': [],
+        'close': ['disabled', 'busy'],
+        'content': ['open', 'busy'],
+        'busy-scope': ['busy'],
+        'footer': [],
+        'confirm': ['disabled', 'busy'],
+        'cancel': ['disabled', 'busy'],
+    },
+    CommandDialog: {
+        'backdrop': ['open', 'busy'],
+        'positioner': ['open', 'busy'],
+        'root': ['open', 'busy'],
+        'header': [],
+        'title': [],
+        'close': ['disabled', 'busy'],
+        'content': ['open', 'busy'],
+        'busy-scope': ['busy'],
+        'footer': [],
+        'confirm': ['disabled', 'busy'],
+        'cancel': ['disabled', 'busy'],
+    },
+    CommandStepper: {
+        'root': ['invalid', 'busy'],
+        'list': ['invalid', 'busy'],
+        'step': ['selected', 'invalid', 'busy'],
+        'header': ['disabled', 'selected', 'invalid', 'busy'],
+        'number': ['selected', 'invalid', 'busy'],
+        'title': ['selected', 'invalid', 'busy'],
+        'separator': ['invalid', 'busy'],
+        'panels': ['invalid', 'busy'],
+        'panel': ['selected', 'invalid', 'busy'],
+    },
+    DataTableCore: {
+        'root': [],
+        'search': [],
+        'search-input': [],
+        'table-container': [],
+        'table': [],
+        'head': [],
+        'header-row': [],
+        'header-cell': ['selected'],
+        'header-content': ['selected'],
+        'sort': ['pressed'],
+        'body': [],
+        'empty-row': [],
+        'empty-cell': [],
+        'row': ['selected'],
+        'cell': ['selected'],
+    },
+    DataTableForObservableQuery: {
+        'root': [],
+        'search': [],
+        'search-input': [],
+        'table-container': [],
+        'table': [],
+        'head': [],
+        'header-row': [],
+        'header-cell': ['selected'],
+        'header-content': ['selected'],
+        'sort': ['pressed'],
+        'body': [],
+        'empty-row': [],
+        'empty-cell': [],
+        'row': ['selected'],
+        'cell': ['selected'],
+    },
+    DataTableForQuery: {
+        'root': [],
+        'search': [],
+        'search-input': [],
+        'table-container': [],
+        'table': [],
+        'head': [],
+        'header-row': [],
+        'header-cell': ['selected'],
+        'header-content': ['selected'],
+        'sort': ['pressed'],
+        'body': [],
+        'empty-row': [],
+        'empty-cell': [],
+        'row': ['selected'],
+        'cell': ['selected'],
+    },
+    ColumnFilterMenu: {
+        'filter-trigger': ['selected', 'open'],
+        'filter-popover': ['open'],
+        'filter-menu': ['open'],
+        'filter-actions': [],
+    },
+    TablePaginator: {
+        'root': [],
+        'range': [],
+        'info': [],
+    },
+    Toaster: {
+        'region': [],
+        'toast': ['loading', 'busy'],
+        'icon': [],
+        'content': ['loading', 'busy'],
+        'title': [],
+        'description': [],
+        'close': [],
+        'action': [],
+    },
+    EventsView: {
+        'timeline': [],
+        'event': ['selected'],
+        'separator': [],
+        'marker': ['selected'],
+        'connector': [],
+        'content': [],
+    },
+    ChatSidebar: {
+        'backdrop': ['selected', 'open'],
+        'root': ['selected', 'open'],
+        'header': [],
+        'back': [],
+        'title': [],
+        'close': [],
+        'content': [],
+    },
+    Toolbar: {
+        'root': [],
+    },
+    ToolbarButton: {
+        'button': ['selected'],
+        'icon': [],
+        'label': [],
+    },
+    ToolbarFolder: {
+        'toolbar-folder': ['open'],
+        'toolbar-folder-trigger': ['open'],
+        'toolbar-folder-panel': ['open'],
+    },
+    ToolbarFanOutItem: {
+        'fanout-root': ['open'],
+        'fanout-trigger': ['open'],
+        'fanout-panel': ['open'],
+    },
+    ToolbarSeparator: {
+        'toolbar-separator': [],
+    },
+    ToolbarSection: {
+        'toolbar-section': [],
+        'toolbar-context': ['selected'],
+    },
+    ToolbarGroup: {
+        'toolbar-group': [],
+        'toolbar-slot': [],
+        'toolbar-slot-incoming': [],
+        'toolbar-slot-outgoing': [],
+    },
+    ToolbarLayout: {
+        'toolbar-layout': [],
+        'toolbar-slot': [],
+        'toolbar-slot-incoming': [],
+        'toolbar-slot-outgoing': [],
+    },
+    Skeleton: {
+        'root': [],
+    },
+    Message: {
+        'root': [],
+        'icon': [],
+        'text': [],
+    },
+    Badge: {
+        'root': [],
+    },
+    ProgressSpinner: {
+        'root': ['loading', 'busy'],
+        'svg': [],
+        'track': [],
+        'range': [],
+    },
+    Avatar: {
+        'root': [],
+        'image': [],
+        'fallback': [],
+    },
+    Tag: {
+        'root': [],
+        'icon': [],
+        'label': [],
+    },
+    ProgressBar: {
+        'root': ['loading', 'busy'],
+        'indicator': [],
+        'label': [],
+    },
+    Chip: {
+        'root': [],
+        'icon': [],
+        'label': [],
+        'remove': [],
+    },
+} as const satisfies {
+    readonly [Component in keyof CratisPartsManifest]: {
+        readonly [Part in PartsOf<Component>]: readonly CratisCanonicalPartState[];
+    };
+};
+
+/** The canonical component/part/state manifest. */
+export type CratisPartStatesManifest = typeof cratisPartStates;
+
+/** Canonical states exposed by one stable component part. */
+export type PartStatesOf<
+    Component extends keyof CratisPartStatesManifest,
+    Part extends keyof CratisPartStatesManifest[Component],
+> = CratisPartStatesManifest[Component][Part] extends readonly (infer State)[]
+    ? State
+    : never;

From aaafbc11283994f75c7be250f795ecc969e5e8ce Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 18:07:57 +0200
Subject: [PATCH 160/267] Record runtime-owned canonical states

Include React Aria selected and pressed attributes that are part of the verified Components behavior even though their JSX attributes arrive through upstream primitive props.
---
 Source/scripts/generate-parts.mjs        | 25 +++++++++++++--
 Source/scripts/verify-parts-manifest.mjs | 41 ++++++++++++++++++++++++
 Source/types/parts.ts                    |  6 ++--
 3 files changed, 67 insertions(+), 5 deletions(-)

diff --git a/Source/scripts/generate-parts.mjs b/Source/scripts/generate-parts.mjs
index 0be1498a..6990646c 100644
--- a/Source/scripts/generate-parts.mjs
+++ b/Source/scripts/generate-parts.mjs
@@ -344,7 +344,7 @@ export const partStateDefinitions = {
         heading: [],
         next: [],
         grid: [],
-        cell: [],
+        cell: ['selected'],
         'button-bar': [],
         today: ['disabled'],
         clear: [],
@@ -401,7 +401,7 @@ export const partStateDefinitions = {
         cell: ['selected'],
     },
     ColumnFilterMenu: {
-        'filter-trigger': ['selected', 'open'],
+        'filter-trigger': ['selected', 'open', 'pressed'],
         'filter-popover': ['open'],
         'filter-menu': ['open'],
         'filter-actions': [],
@@ -553,6 +553,27 @@ export const splitPartStateAllowlist = [
     },
 ];
 
+/**
+ * Canonical states supplied by owned React Aria primitives at runtime rather than
+ * authored as literal JSX attributes. Focused behavior specs prove these exact contracts.
+ */
+export const implicitPartStateAllowlist = [
+    {
+        component: 'DatePickerInput',
+        file: 'Common/DatePickerInput.tsx',
+        part: 'cell',
+        states: ['selected'],
+        reason: 'React Aria CalendarCell emits data-selected for the selected date.',
+    },
+    {
+        component: 'ColumnFilterMenu',
+        file: 'DataTables/ColumnFilterMenu.tsx',
+        part: 'filter-trigger',
+        states: ['pressed'],
+        reason: 'React Aria Button emits data-pressed during pointer activation.',
+    },
+];
+
 /** Exact dynamic production expressions that intentionally emit known parts. */
 export const dynamicPartExpressions = [
     {
diff --git a/Source/scripts/verify-parts-manifest.mjs b/Source/scripts/verify-parts-manifest.mjs
index 5c06ee36..bd9caec3 100644
--- a/Source/scripts/verify-parts-manifest.mjs
+++ b/Source/scripts/verify-parts-manifest.mjs
@@ -10,6 +10,7 @@ import {
     dynamicPartExpressions,
     dynamicTestSelectors,
     generatedPartsSource,
+    implicitPartStateAllowlist,
     partDefinitions,
     partStateDefinitions,
     resolvedPartStates,
@@ -313,6 +314,46 @@ function readProductionEmissions() {
         visit(sourceFile);
     }
 
+    const seenImplicitStates = new Set();
+    for (const entry of implicitPartStateAllowlist) {
+        const key = `${entry.component}\0${entry.part}`;
+        if (seenImplicitStates.has(key)) {
+            problems.push(
+                `Duplicate implicit part-state mapping for ${entry.component}.${entry.part}.`,
+            );
+            continue;
+        }
+        seenImplicitStates.add(key);
+        const definition = partDefinitions[entry.component];
+        if (!definition) {
+            problems.push(
+                `Implicit part-state mapping references unknown component '${entry.component}'.`,
+            );
+            continue;
+        }
+        if (!resolvedParts(entry.component).includes(entry.part)) {
+            problems.push(
+                `Implicit part-state mapping references unknown part '${entry.component}.${entry.part}'.`,
+            );
+            continue;
+        }
+        if (!(owners.get(entry.file) ?? []).includes(entry.component)) {
+            problems.push(
+                `Implicit part-state mapping for ${entry.component}.${entry.part} references unowned source ${entry.file}.`,
+            );
+            continue;
+        }
+        for (const state of entry.states) {
+            if (!canonicalPartStateNameSet.has(state)) {
+                problems.push(
+                    `Implicit part-state mapping for ${entry.component}.${entry.part} declares unknown canonical state '${state}'.`,
+                );
+                continue;
+            }
+            getStateEmissions(stateEmissions, entry.component, entry.part).add(state);
+        }
+    }
+
     for (const [key, entry] of dynamicProductionMap) {
         if (!seenDynamic.has(key))
             problems.push(`Stale dynamic production mapping for ${entry.file}: '${entry.expression}'.`);
diff --git a/Source/types/parts.ts b/Source/types/parts.ts
index 7e72a12e..6f333774 100644
--- a/Source/types/parts.ts
+++ b/Source/types/parts.ts
@@ -184,7 +184,7 @@ export const cratisPartStates = {
         'heading': [],
         'next': [],
         'grid': [],
-        'cell': [],
+        'cell': ['selected'],
         'button-bar': [],
         'today': ['disabled'],
         'clear': [],
@@ -204,7 +204,7 @@ export const cratisPartStates = {
         'heading': [],
         'next': [],
         'grid': [],
-        'cell': [],
+        'cell': ['selected'],
         'button-bar': [],
         'today': ['disabled'],
         'clear': [],
@@ -314,7 +314,7 @@ export const cratisPartStates = {
         'cell': ['selected'],
     },
     ColumnFilterMenu: {
-        'filter-trigger': ['selected', 'open'],
+        'filter-trigger': ['selected', 'open', 'pressed'],
         'filter-popover': ['open'],
         'filter-menu': ['open'],
         'filter-actions': [],

From 2307cdc8d55bd8370656db6d7cd55f2962c59cb2 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 18:08:51 +0200
Subject: [PATCH 161/267] Lock semantic codemod binaries

---
 yarn.lock | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/yarn.lock b/yarn.lock
index 65ce6715..6dfc20df 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -292,6 +292,8 @@ __metadata:
   dependencies:
     typescript: "npm:^6.0.3"
   bin:
+    cratis-components-button-variant-tone: ./scripts/button-variant-tone.js
+    cratis-components-change-handler: ./scripts/change-handler.js
     cratis-components-remove-root-namespace-imports: ./scripts/remove-root-namespace-imports.js
   languageName: unknown
   linkType: soft

From e3aeca3eeead27402dbc9a8e01be3ae89c3e8864 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 18:13:32 +0200
Subject: [PATCH 162/267] Update histogram Storybook interaction

---
 Source/Filter/RangeHistogramFilter.stories.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/Source/Filter/RangeHistogramFilter.stories.tsx b/Source/Filter/RangeHistogramFilter.stories.tsx
index af7c7b9a..8b3ee5d1 100644
--- a/Source/Filter/RangeHistogramFilter.stories.tsx
+++ b/Source/Filter/RangeHistogramFilter.stories.tsx
@@ -70,7 +70,13 @@ export const Currency: Story = {
             canvas.getByRole('slider', { name: 'Minimum order value' }),
         ).toBeTruthy();
         await userEvent.click(canvas.getByRole('button', { name: /^\$0 - \$10:/ }));
-        await expect(args.onChange).toHaveBeenCalledWith([0, 10]);
+        await expect(args.onChange).toHaveBeenCalledWith(
+            [0, 10],
+            expect.objectContaining({
+                source: 'user',
+                nativeEvent: expect.objectContaining({ type: 'click' }),
+            }),
+        );
     },
     args: {
         min: 0,

From a353dc2ddb88de495a99d6a6e80abecd499a9c57 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 18:19:47 +0200
Subject: [PATCH 163/267] Stabilize generated parts formatting

Keep the generated manifest byte-owned by its generator and accept the repository formatter's one-time layout of the generator and verifier sources.
---
 .prettierignore                          |   2 +
 Source/scripts/generate-parts.mjs        | 209 +++++++++++++++++++++--
 Source/scripts/verify-parts-manifest.mjs | 199 +++++++++++++++------
 3 files changed, 342 insertions(+), 68 deletions(-)
 create mode 100644 .prettierignore

diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 00000000..15e783b4
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,2 @@
+# Generated from Source/scripts/generate-parts.mjs; verify-parts-manifest checks exact bytes.
+Source/types/parts.ts
diff --git a/Source/scripts/generate-parts.mjs b/Source/scripts/generate-parts.mjs
index 6990646c..f753bce0 100644
--- a/Source/scripts/generate-parts.mjs
+++ b/Source/scripts/generate-parts.mjs
@@ -75,9 +75,33 @@ export const partDefinitions = {
         ptKeys: ['root'],
     },
     Dropdown: {
-        parts: ['root', 'value', 'filter', 'trigger', 'clear', 'popover', 'listbox', 'option', 'multiple', 'indicator'],
+        parts: [
+            'root',
+            'value',
+            'filter',
+            'trigger',
+            'clear',
+            'popover',
+            'listbox',
+            'option',
+            'multiple',
+            'indicator',
+        ],
         sources: ['Dropdown/Dropdown.tsx'],
-        ptKeys: ['root', 'input', 'select', 'trigger', 'value', 'clear', 'indicator', 'popover', 'listbox', 'option', 'filter', 'multiple'],
+        ptKeys: [
+            'root',
+            'input',
+            'select',
+            'trigger',
+            'value',
+            'clear',
+            'indicator',
+            'popover',
+            'listbox',
+            'option',
+            'filter',
+            'multiple',
+        ],
     },
     DropdownField: {
         aliasOf: 'Dropdown',
@@ -88,9 +112,47 @@ export const partDefinitions = {
         sources: ['CommandForm/fields/MultiSelectField.tsx'],
     },
     DatePickerInput: {
-        parts: ['root', 'group', 'input', 'segment', 'placeholder', 'trigger', 'popover', 'dialog', 'calendar', 'header', 'previous', 'heading', 'next', 'grid', 'cell', 'button-bar', 'today', 'clear'],
+        parts: [
+            'root',
+            'group',
+            'input',
+            'segment',
+            'placeholder',
+            'trigger',
+            'popover',
+            'dialog',
+            'calendar',
+            'header',
+            'previous',
+            'heading',
+            'next',
+            'grid',
+            'cell',
+            'button-bar',
+            'today',
+            'clear',
+        ],
         sources: ['Common/DatePickerInput.tsx'],
-        ptKeys: ['root', 'group', 'input', 'placeholder', 'segment', 'trigger', 'popover', 'dialog', 'calendar', 'header', 'heading', 'previous', 'next', 'grid', 'cell', 'buttonBar', 'today', 'clear'],
+        ptKeys: [
+            'root',
+            'group',
+            'input',
+            'placeholder',
+            'segment',
+            'trigger',
+            'popover',
+            'dialog',
+            'calendar',
+            'header',
+            'heading',
+            'previous',
+            'next',
+            'grid',
+            'cell',
+            'buttonBar',
+            'today',
+            'clear',
+        ],
     },
     CalendarField: {
         aliasOf: 'DatePickerInput',
@@ -110,24 +172,97 @@ export const partDefinitions = {
         sources: ['Common/Tooltip.tsx'],
     },
     Dialog: {
-        parts: ['backdrop', 'positioner', 'root', 'header', 'title', 'close', 'content', 'busy-scope', 'footer', 'confirm', 'cancel'],
+        parts: [
+            'backdrop',
+            'positioner',
+            'root',
+            'header',
+            'title',
+            'close',
+            'content',
+            'busy-scope',
+            'footer',
+            'confirm',
+            'cancel',
+        ],
         sources: ['Dialogs/Dialog.tsx'],
-        ptKeys: ['backdrop', 'positioner', 'root', 'header', 'title', 'close', 'content', 'footer', 'confirm', 'cancel'],
+        ptKeys: [
+            'backdrop',
+            'positioner',
+            'root',
+            'header',
+            'title',
+            'close',
+            'content',
+            'footer',
+            'confirm',
+            'cancel',
+        ],
     },
     CommandDialog: {
         aliasOf: 'Dialog',
         sources: ['CommandDialog/CommandDialog.tsx'],
     },
     CommandStepper: {
-        parts: ['root', 'list', 'step', 'header', 'number', 'title', 'separator', 'panels', 'panel'],
+        parts: [
+            'root',
+            'list',
+            'step',
+            'header',
+            'number',
+            'title',
+            'separator',
+            'panels',
+            'panel',
+        ],
         sources: ['CommandDialog/CommandStepperContent.tsx'],
         ptFiles: ['CommandDialog/CommandStepper.tsx'],
-        ptKeys: ['root', 'list', 'step', 'header', 'number', 'title', 'separator', 'panels', 'panel'],
+        ptKeys: [
+            'root',
+            'list',
+            'step',
+            'header',
+            'number',
+            'title',
+            'separator',
+            'panels',
+            'panel',
+        ],
     },
     DataTableCore: {
-        parts: ['root', 'search', 'search-input', 'table-container', 'table', 'head', 'header-row', 'header-cell', 'header-content', 'sort', 'body', 'empty-row', 'empty-cell', 'row', 'cell'],
+        parts: [
+            'root',
+            'search',
+            'search-input',
+            'table-container',
+            'table',
+            'head',
+            'header-row',
+            'header-cell',
+            'header-content',
+            'sort',
+            'body',
+            'empty-row',
+            'empty-cell',
+            'row',
+            'cell',
+        ],
         sources: ['DataTables/DataTableCore.tsx'],
-        ptKeys: ['root', 'search', 'searchInput', 'tableContainer', 'table', 'head', 'headerRow', 'headerCell', 'body', 'row', 'cell', 'emptyRow', 'emptyCell'],
+        ptKeys: [
+            'root',
+            'search',
+            'searchInput',
+            'tableContainer',
+            'table',
+            'head',
+            'headerRow',
+            'headerCell',
+            'body',
+            'row',
+            'cell',
+            'emptyRow',
+            'emptyCell',
+        ],
     },
     DataTableForObservableQuery: {
         aliasOf: 'DataTableCore',
@@ -140,7 +275,16 @@ export const partDefinitions = {
     ColumnFilterMenu: {
         parts: ['filter-trigger', 'filter-popover', 'filter-menu', 'filter-actions'],
         sources: ['DataTables/ColumnFilterMenu.tsx'],
-        ptKeys: ['trigger', 'popover', 'menu', 'matchMode', 'input', 'actions', 'clear', 'apply'],
+        ptKeys: [
+            'trigger',
+            'popover',
+            'menu',
+            'matchMode',
+            'input',
+            'actions',
+            'clear',
+            'apply',
+        ],
     },
     TablePaginator: {
         parts: ['root', 'range', 'info'],
@@ -148,9 +292,27 @@ export const partDefinitions = {
         ptKeys: ['root', 'range', 'info', 'first', 'previous', 'next', 'last'],
     },
     Toaster: {
-        parts: ['region', 'toast', 'icon', 'content', 'title', 'description', 'close', 'action'],
+        parts: [
+            'region',
+            'toast',
+            'icon',
+            'content',
+            'title',
+            'description',
+            'close',
+            'action',
+        ],
         sources: ['Notifications/Toaster.tsx'],
-        ptKeys: ['region', 'toast', 'icon', 'content', 'title', 'description', 'close', 'action'],
+        ptKeys: [
+            'region',
+            'toast',
+            'icon',
+            'content',
+            'title',
+            'description',
+            'close',
+            'action',
+        ],
     },
     EventsView: {
         parts: ['timeline', 'event', 'separator', 'marker', 'connector', 'content'],
@@ -193,12 +355,22 @@ export const partDefinitions = {
         ptKeys: ['root', 'context'],
     },
     ToolbarGroup: {
-        parts: ['toolbar-group', 'toolbar-slot', 'toolbar-slot-incoming', 'toolbar-slot-outgoing'],
+        parts: [
+            'toolbar-group',
+            'toolbar-slot',
+            'toolbar-slot-incoming',
+            'toolbar-slot-outgoing',
+        ],
         sources: ['Toolbar/ToolbarGroup.tsx'],
         ptKeys: ['root', 'slot', 'incoming', 'outgoing'],
     },
     ToolbarLayout: {
-        parts: ['toolbar-layout', 'toolbar-slot', 'toolbar-slot-incoming', 'toolbar-slot-outgoing'],
+        parts: [
+            'toolbar-layout',
+            'toolbar-slot',
+            'toolbar-slot-incoming',
+            'toolbar-slot-outgoing',
+        ],
         sources: ['Toolbar/ToolbarLayout.tsx'],
         ptKeys: ['root', 'slot', 'incoming', 'outgoing'],
     },
@@ -631,13 +803,16 @@ export const resolveDefinition = (component, seen = new Set()) => {
 };
 
 export const resolvedParts = (component) => [...resolveDefinition(component).parts];
-export const resolvedPtKeys = (component) => [...(resolveDefinition(component).ptKeys ?? [])];
+export const resolvedPtKeys = (component) => [
+    ...(resolveDefinition(component).ptKeys ?? []),
+];
 
 export const resolvePartStateDefinition = (component, seen = new Set()) => {
     const definition = partDefinitions[component];
     if (!definition) throw new Error(`Unknown parts component '${component}'.`);
     if (!definition.aliasOf) return partStateDefinitions[component];
-    if (seen.has(component)) throw new Error(`Circular parts-state alias at '${component}'.`);
+    if (seen.has(component))
+        throw new Error(`Circular parts-state alias at '${component}'.`);
     return resolvePartStateDefinition(definition.aliasOf, new Set(seen).add(component));
 };
 
diff --git a/Source/scripts/verify-parts-manifest.mjs b/Source/scripts/verify-parts-manifest.mjs
index bd9caec3..dec97a24 100644
--- a/Source/scripts/verify-parts-manifest.mjs
+++ b/Source/scripts/verify-parts-manifest.mjs
@@ -41,7 +41,11 @@ const sameValues = (left, right) =>
 
 const collectTsx = (directory, files = []) => {
     for (const entry of readdirSync(directory, { withFileTypes: true })) {
-        if (['dist', 'node_modules', '.storybook', 'storybook-static'].includes(entry.name))
+        if (
+            ['dist', 'node_modules', '.storybook', 'storybook-static'].includes(
+                entry.name,
+            )
+        )
             continue;
         const absolute = path.join(directory, entry.name);
         if (entry.isDirectory()) collectTsx(absolute, files);
@@ -94,7 +98,8 @@ const unwrapExpression = (expression) => {
         ts.isTypeAssertionExpression(current) ||
         ts.isNonNullExpression(current) ||
         ts.isSatisfiesExpression(current)
-    ) current = current.expression;
+    )
+        current = current.expression;
     return current;
 };
 
@@ -102,7 +107,8 @@ const isUndefinedExpression = (expression) => {
     const current = unwrapExpression(expression);
     return (
         (ts.isIdentifier(current) && current.text === 'undefined') ||
-        (ts.isVoidExpression(current) && current.expression.kind === ts.SyntaxKind.NumericLiteral)
+        (ts.isVoidExpression(current) &&
+            current.expression.kind === ts.SyntaxKind.NumericLiteral)
     );
 };
 
@@ -158,7 +164,8 @@ function stateValueProblem(attribute, sourceFile, relative, checker) {
         ts.isJsxExpression(attribute.initializer) &&
         attribute.initializer.expression &&
         isFalseSafeStateExpression(attribute.initializer.expression, checker)
-    ) return undefined;
+    )
+        return undefined;
     return `${relative}:${line} ${attribute.name.text} can serialize false; use bare true or a condition normalized to undefined.`;
 }
 
@@ -187,14 +194,17 @@ function readProductionEmissions() {
         const relative = normalizePath(file);
         const sourceFile = program.getSourceFile(file);
         if (!sourceFile) {
-            problems.push(`${relative} could not be loaded into the TypeScript verifier program.`);
+            problems.push(
+                `${relative} could not be loaded into the TypeScript verifier program.`,
+            );
             continue;
         }
         const fileOwners = owners.get(relative) ?? [];
 
         const recordPart = (part, node) => {
             if (fileOwners.length === 0) {
-                const line = sourceFile.getLineAndCharacterOfPosition(node.getStart()).line + 1;
+                const line =
+                    sourceFile.getLineAndCharacterOfPosition(node.getStart()).line + 1;
                 problems.push(
                     `${relative}:${line} emits '${part}' but has no owning component in generate-parts.mjs.`,
                 );
@@ -208,13 +218,15 @@ function readProductionEmissions() {
         };
 
         const recordState = (part, state) => {
-            for (const owner of fileOwners) getStateEmissions(stateEmissions, owner, part).add(state);
+            for (const owner of fileOwners)
+                getStateEmissions(stateEmissions, owner, part).add(state);
         };
 
         const dynamicParts = (expression, node) => {
             const key = `${relative}\0${expression}`;
             const allowlist = dynamicProductionMap.get(key);
-            const line = sourceFile.getLineAndCharacterOfPosition(node.getStart()).line + 1;
+            const line =
+                sourceFile.getLineAndCharacterOfPosition(node.getStart()).line + 1;
             if (!allowlist) {
                 problems.push(
                     `${relative}:${line} has unproven dynamic data-cratis-part expression '${expression}'. Add an exact mapping to dynamicPartExpressions in generate-parts.mjs.`,
@@ -228,9 +240,17 @@ function readProductionEmissions() {
         const literalOrDynamicParts = (attribute) => {
             const initializer = attribute.initializer;
             if (initializer && ts.isStringLiteral(initializer)) return [initializer.text];
-            if (initializer && ts.isJsxExpression(initializer) && initializer.expression) {
-                if (ts.isStringLiteral(initializer.expression)) return [initializer.expression.text];
-                return dynamicParts(initializer.expression.getText(sourceFile), attribute);
+            if (
+                initializer &&
+                ts.isJsxExpression(initializer) &&
+                initializer.expression
+            ) {
+                if (ts.isStringLiteral(initializer.expression))
+                    return [initializer.expression.text];
+                return dynamicParts(
+                    initializer.expression.getText(sourceFile),
+                    attribute,
+                );
             }
             return dynamicParts('<missing initializer>', attribute);
         };
@@ -239,7 +259,8 @@ function readProductionEmissions() {
             const attributes = node.attributes.properties;
             const partAttribute = attributes.find(
                 (attribute) =>
-                    ts.isJsxAttribute(attribute) && attribute.name.text === 'data-cratis-part',
+                    ts.isJsxAttribute(attribute) &&
+                    attribute.name.text === 'data-cratis-part',
             );
             const stateAttributes = attributes.filter(
                 (attribute) =>
@@ -250,7 +271,12 @@ function readProductionEmissions() {
             );
 
             for (const attribute of stateAttributes) {
-                const problem = stateValueProblem(attribute, sourceFile, relative, checker);
+                const problem = stateValueProblem(
+                    attribute,
+                    sourceFile,
+                    relative,
+                    checker,
+                );
                 if (problem) problems.push(problem);
             }
 
@@ -272,9 +298,12 @@ function readProductionEmissions() {
                 .map((spread) => splitStateMap.get(`${relative}\0${spread}`))
                 .filter(Boolean);
             if (splitEntries.length === 0) return;
-            const line = sourceFile.getLineAndCharacterOfPosition(node.getStart()).line + 1;
+            const line =
+                sourceFile.getLineAndCharacterOfPosition(node.getStart()).line + 1;
             if (splitEntries.length > 1) {
-                problems.push(`${relative}:${line} matches more than one split part-state allowlist.`);
+                problems.push(
+                    `${relative}:${line} matches more than one split part-state allowlist.`,
+                );
                 return;
             }
             const splitEntry = splitEntries[0];
@@ -356,11 +385,15 @@ function readProductionEmissions() {
 
     for (const [key, entry] of dynamicProductionMap) {
         if (!seenDynamic.has(key))
-            problems.push(`Stale dynamic production mapping for ${entry.file}: '${entry.expression}'.`);
+            problems.push(
+                `Stale dynamic production mapping for ${entry.file}: '${entry.expression}'.`,
+            );
     }
     for (const [key, entry] of splitStateMap) {
         if (!seenSplit.has(key))
-            problems.push(`Stale split part-state allowlist for ${entry.file}: '${entry.spread}'.`);
+            problems.push(
+                `Stale split part-state allowlist for ${entry.file}: '${entry.spread}'.`,
+            );
     }
     return { partEmissions, stateEmissions, problems };
 }
@@ -392,10 +425,13 @@ function validatePartStateDefinition(component, parts, statesByPart) {
     }
     for (const [part, states] of Object.entries(statesByPart)) {
         const duplicate = states.find((state, index) => states.indexOf(state) !== index);
-        if (duplicate) problems.push(`${component}.${part} repeats canonical state '${duplicate}'.`);
+        if (duplicate)
+            problems.push(`${component}.${part} repeats canonical state '${duplicate}'.`);
         for (const state of states) {
             if (!canonicalPartStateNameSet.has(state))
-                problems.push(`${component}.${part} declares unknown canonical state '${state}'.`);
+                problems.push(
+                    `${component}.${part} declares unknown canonical state '${state}'.`,
+                );
         }
     }
     return problems;
@@ -413,13 +449,17 @@ function compareComponentStates(component, manifestStates, emittedStates) {
         }
         for (const state of emitted) {
             if (!declaredStates.includes(state))
-                problems.push(`${component}.${part} emits undeclared canonical state '${state}'.`);
+                problems.push(
+                    `${component}.${part} emits undeclared canonical state '${state}'.`,
+                );
         }
     }
     for (const [part, emitted] of emittedStates) {
         if (part in manifestStates) continue;
         for (const state of emitted)
-            problems.push(`${component}.${part} emits canonical state '${state}' for an unknown part.`);
+            problems.push(
+                `${component}.${part} emits canonical state '${state}' for an unknown part.`,
+            );
     }
     return problems;
 }
@@ -459,33 +499,55 @@ function verifyDefinitions(partEmissions, stateEmissions) {
     for (const [component, definition] of Object.entries(partDefinitions)) {
         const parts = resolvedParts(component);
         const duplicate = parts.find((part, index) => parts.indexOf(part) !== index);
-        if (duplicate) problems.push(`${component} repeats manifest part '${duplicate}'.`);
+        if (duplicate)
+            problems.push(`${component} repeats manifest part '${duplicate}'.`);
         for (const part of parts) allParts.add(part);
 
         for (const source of definition.sources ?? []) {
-            if (!owners.has(source)) problems.push(`${component} references unknown source ${source}.`);
+            if (!owners.has(source))
+                problems.push(`${component} references unknown source ${source}.`);
         }
 
         if (definition.aliasOf) {
             if (component in partStateDefinitions)
-                problems.push(`${component} is an alias and must inherit, not redeclare, part states.`);
+                problems.push(
+                    `${component} is an alias and must inherit, not redeclare, part states.`,
+                );
         } else {
             problems.push(
-                ...validatePartStateDefinition(component, parts, partStateDefinitions[component]),
+                ...validatePartStateDefinition(
+                    component,
+                    parts,
+                    partStateDefinitions[component],
+                ),
             );
         }
 
-        const emittedParts = aggregateEmissions(component, partEmissions, () => new Set());
-        const emittedStates = aggregateEmissions(component, stateEmissions, () => new Map());
+        const emittedParts = aggregateEmissions(
+            component,
+            partEmissions,
+            () => new Set(),
+        );
+        const emittedStates = aggregateEmissions(
+            component,
+            stateEmissions,
+            () => new Map(),
+        );
         problems.push(...compareComponentParts(component, parts, emittedParts));
         problems.push(
-            ...compareComponentStates(component, resolvedPartStates(component), emittedStates),
+            ...compareComponentStates(
+                component,
+                resolvedPartStates(component),
+                emittedStates,
+            ),
         );
     }
 
     for (const component of Object.keys(partStateDefinitions)) {
         if (!(component in partDefinitions))
-            problems.push(`Part-state definition references unknown component '${component}'.`);
+            problems.push(
+                `Part-state definition references unknown component '${component}'.`,
+            );
     }
 
     return { problems, allParts };
@@ -495,14 +557,18 @@ function buildProgram(files) {
     const configPath = path.join(sourceRoot, 'tsconfig.json');
     const configFile = ts.readConfigFile(configPath, ts.sys.readFile);
     if (configFile.error)
-        throw new Error(ts.flattenDiagnosticMessageText(configFile.error.messageText, '\n'));
+        throw new Error(
+            ts.flattenDiagnosticMessageText(configFile.error.messageText, '\n'),
+        );
     const parsed = ts.parseJsonConfigFileContent(configFile.config, ts.sys, sourceRoot);
     return ts.createProgram({ rootNames: files, options: parsed.options });
 }
 
 function verifyPublicPtContracts() {
     const problems = [];
-    const files = collectTsx(sourceRoot).filter((file) => isProductionFile(normalizePath(file)));
+    const files = collectTsx(sourceRoot).filter((file) =>
+        isProductionFile(normalizePath(file)),
+    );
     const program = buildProgram(files);
     const checker = program.getTypeChecker();
     const owners = ownersBySource();
@@ -516,7 +582,10 @@ function verifyPublicPtContracts() {
     const discoveredFiles = new Set();
     let declarationCount = 0;
     for (const sourceFile of program.getSourceFiles()) {
-        if (!sourceFile.fileName.startsWith(sourceRoot) || !sourceFile.fileName.endsWith('.tsx'))
+        if (
+            !sourceFile.fileName.startsWith(sourceRoot) ||
+            !sourceFile.fileName.endsWith('.tsx')
+        )
             continue;
         const relative = normalizePath(sourceFile.fileName);
         if (!isProductionFile(relative)) continue;
@@ -531,18 +600,25 @@ function verifyPublicPtContracts() {
             ) {
                 declarationCount++;
                 discoveredFiles.add(relative);
-                const line = sourceFile.getLineAndCharacterOfPosition(node.getStart()).line + 1;
+                const line =
+                    sourceFile.getLineAndCharacterOfPosition(node.getStart()).line + 1;
                 if (owner) {
                     const expected = sorted(resolvedPtKeys(owner));
-                    const type = checker.getNonNullableType(checker.getTypeAtLocation(node));
-                    const actual = sorted(checker.getPropertiesOfType(type).map((symbol) => symbol.name));
+                    const type = checker.getNonNullableType(
+                        checker.getTypeAtLocation(node),
+                    );
+                    const actual = sorted(
+                        checker.getPropertiesOfType(type).map((symbol) => symbol.name),
+                    );
                     if (!sameValues(actual, expected)) {
                         problems.push(
                             `${relative}:${line} ${owner} pt keys differ: source=[${actual.join(', ')}], manifest=[${expected.join(', ')}].`,
                         );
                     }
                 } else {
-                    problems.push(`${relative}:${line} declares public pt without a manifest owner.`);
+                    problems.push(
+                        `${relative}:${line} declares public pt without a manifest owner.`,
+                    );
                 }
             }
             ts.forEachChild(node, visit);
@@ -573,7 +649,10 @@ function verifyPublicPtContracts() {
 function verifyTestSelectors(allParts) {
     const problems = [];
     const dynamicMap = new Map(
-        dynamicTestSelectors.map((entry) => [`${entry.file}\0${entry.expression}`, entry]),
+        dynamicTestSelectors.map((entry) => [
+            `${entry.file}\0${entry.expression}`,
+            entry,
+        ]),
     );
     const seenDynamic = new Set();
     const selectorPattern = /data-cratis-part\s*=\s*["']([^"']+)["']/gu;
@@ -593,7 +672,8 @@ function verifyTestSelectors(allParts) {
             if (text.includes('${')) {
                 const key = `${relative}\0${text}`;
                 const allowlist = dynamicMap.get(key);
-                const line = sourceFile.getLineAndCharacterOfPosition(node.getStart()).line + 1;
+                const line =
+                    sourceFile.getLineAndCharacterOfPosition(node.getStart()).line + 1;
                 if (allowlist) {
                     seenDynamic.add(key);
                     for (const part of allowlist.parts) {
@@ -611,7 +691,9 @@ function verifyTestSelectors(allParts) {
             }
             for (const match of text.matchAll(selectorPattern)) {
                 if (!allParts.has(match[1])) {
-                    const line = sourceFile.getLineAndCharacterOfPosition(node.getStart()).line + 1;
+                    const line =
+                        sourceFile.getLineAndCharacterOfPosition(node.getStart()).line +
+                        1;
                     problems.push(
                         `${relative}:${line} selector references unknown part '${match[1]}'.`,
                     );
@@ -623,7 +705,8 @@ function verifyTestSelectors(allParts) {
                 ts.isStringLiteral(node) ||
                 ts.isNoSubstitutionTemplateLiteral(node) ||
                 ts.isRegularExpressionLiteral(node)
-            ) inspectText(node.text, node);
+            )
+                inspectText(node.text, node);
             else if (ts.isTemplateExpression(node))
                 inspectText(node.getText(sourceFile).slice(1, -1), node);
             ts.forEachChild(node, visit);
@@ -633,7 +716,9 @@ function verifyTestSelectors(allParts) {
 
     for (const [key, entry] of dynamicMap) {
         if (!seenDynamic.has(key))
-            problems.push(`Stale dynamic test-selector mapping for ${entry.file}: '${entry.expression}'.`);
+            problems.push(
+                `Stale dynamic test-selector mapping for ${entry.file}: '${entry.expression}'.`,
+            );
     }
     return problems;
 }
@@ -660,7 +745,8 @@ const stateAttributeFromFixture = (source) => {
             ts.isJsxAttribute(node) &&
             typeof node.name.text === 'string' &&
             node.name.text.startsWith('data-')
-        ) result = node;
+        )
+            result = node;
         ts.forEachChild(node, visit);
     };
     visit(sourceFile);
@@ -669,7 +755,11 @@ const stateAttributeFromFixture = (source) => {
 
 function runSelfTests() {
     const failures = [];
-    const missing = compareComponentParts('Widget', ['root'], new Set(['root', 'missing']));
+    const missing = compareComponentParts(
+        'Widget',
+        ['root'],
+        new Set(['root', 'missing']),
+    );
     if (!missing.some((problem) => problem.includes("missing manifest part 'missing'")))
         failures.push('planted missing source part was not detected');
     const orphaned = compareComponentParts(
@@ -682,12 +772,14 @@ function runSelfTests() {
     if (compareComponentParts('Widget', ['root'], new Set(['root'])).length !== 0)
         failures.push('matching part fixture did not pass');
 
-    const unknownState = validatePartStateDefinition(
-        'Widget',
-        ['root'],
-        { root: ['unknown'] },
-    );
-    if (!unknownState.some((problem) => problem.includes("unknown canonical state 'unknown'")))
+    const unknownState = validatePartStateDefinition('Widget', ['root'], {
+        root: ['unknown'],
+    });
+    if (
+        !unknownState.some((problem) =>
+            problem.includes("unknown canonical state 'unknown'"),
+        )
+    )
         failures.push('planted unknown state declaration was not detected');
 
     const orphanedState = compareComponentStates(
@@ -695,7 +787,11 @@ function runSelfTests() {
         { root: ['selected'] },
         new Map([['root', new Set()]]),
     );
-    if (!orphanedState.some((problem) => problem.includes("orphaned canonical state 'selected'")))
+    if (
+        !orphanedState.some((problem) =>
+            problem.includes("orphaned canonical state 'selected'"),
+        )
+    )
         failures.push('planted orphaned state declaration was not detected');
 
     for (const source of [
@@ -748,7 +844,8 @@ function main() {
     const selfTestOnly = process.argv.includes('--self-test-only');
     const selfTestProblems = runSelfTests();
     if (selfTestProblems.length > 0) {
-        for (const problem of selfTestProblems) console.error(`verify-parts-manifest: ${problem}`);
+        for (const problem of selfTestProblems)
+            console.error(`verify-parts-manifest: ${problem}`);
         process.exit(1);
     }
     console.log(

From 4c34caf78c436f9ed052fe98aedfe09b051d6f55 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 18:22:24 +0200
Subject: [PATCH 164/267] Stabilize TimeMachine event collections

---
 Source/TimeMachine/TimeMachine.tsx | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/Source/TimeMachine/TimeMachine.tsx b/Source/TimeMachine/TimeMachine.tsx
index e8cd7432..9a481ec4 100644
--- a/Source/TimeMachine/TimeMachine.tsx
+++ b/Source/TimeMachine/TimeMachine.tsx
@@ -2,7 +2,7 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import type React from 'react';
-import { useState, useCallback, useRef, useEffect } from 'react';
+import { useState, useCallback, useRef, useEffect, useMemo } from 'react';
 import type { Version } from './types';
 import { ReadModelView } from './ReadModelView';
 import {
@@ -133,10 +133,19 @@ export const TimeMachine: React.FC<TimeMachineProps> = ({
     void hoveredIndex;
     void selectedIndex;
 
-    // Get all events from all versions
-    const allEvents = versions.flatMap((version) => version.events || []);
-    const selectedEventSequenceNumbers = new Set(
-        (versions[selectedIndex]?.events ?? []).map((event) => event.sequenceNumber),
+    // Keep derived event collections stable across unrelated hover/view-mode renders.
+    const allEvents = useMemo(
+        () => versions.flatMap((version) => version.events || []),
+        [versions],
+    );
+    const selectedEventSequenceNumbers = useMemo(
+        () =>
+            new Set(
+                (versions[selectedIndex]?.events ?? []).map(
+                    (event) => event.sequenceNumber,
+                ),
+            ),
+        [selectedIndex, versions],
     );
 
     return (

From 2cfe0bc05b04bd28fbc203f20da01dbb7aa57891 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 18:27:25 +0200
Subject: [PATCH 165/267] Handle codemod processing failures

Report per-file processing errors without crashing the migration run, keep a nonzero exit, and use the semantic surface token for legacy help-button text.
---
 Codemods/lib/runTransformCli.js         | 42 +++++++++++++---------
 Codemods/test/run-transform-cli.test.js | 48 +++++++++++++++++++++++++
 Source/Common/Button.css                |  2 +-
 3 files changed, 74 insertions(+), 18 deletions(-)
 create mode 100644 Codemods/test/run-transform-cli.test.js

diff --git a/Codemods/lib/runTransformCli.js b/Codemods/lib/runTransformCli.js
index 6f4b6ec1..dbdb6f3d 100644
--- a/Codemods/lib/runTransformCli.js
+++ b/Codemods/lib/runTransformCli.js
@@ -17,7 +17,7 @@ const EXTENSIONS = new Set([
 ]);
 const SKIP_DIRS = new Set(['node_modules', 'dist', '.git', '.yarn']);
 
-/** Runs one independently-invokable Components codemod CLI. */
+/** Runs one independently invocable Components codemod CLI. */
 export function runTransformCli(argv, { command, description, transform }) {
     const args = [...argv];
     let check = false;
@@ -58,29 +58,37 @@ export function runTransformCli(argv, { command, description, transform }) {
 
     let changedCount = 0;
     let diagnosticCount = 0;
+    let errorCount = 0;
     for (const file of files) {
-        const original = readFileSync(file, 'utf8');
-        const result = transform(file, original, { packageName });
-        for (const diagnostic of result.diagnostics) {
-            diagnosticCount += 1;
-            console.warn(
-                `${diagnostic.file}:${diagnostic.line}:${diagnostic.column}: ${diagnostic.message}`,
-            );
-        }
-        if (result.changed) {
-            changedCount += 1;
-            if (check) console.log(`would rewrite ${file}`);
-            else {
-                writeFileSync(file, result.text, 'utf8');
-                console.log(`rewrote ${file}`);
+        try {
+            const original = readFileSync(file, 'utf8');
+            const result = transform(file, original, { packageName });
+            for (const diagnostic of result.diagnostics) {
+                diagnosticCount += 1;
+                console.warn(
+                    `${diagnostic.file}:${diagnostic.line}:${diagnostic.column}: ${diagnostic.message}`,
+                );
             }
+            if (result.changed) {
+                changedCount += 1;
+                if (check) console.log(`would rewrite ${file}`);
+                else {
+                    writeFileSync(file, result.text, 'utf8');
+                    console.log(`rewrote ${file}`);
+                }
+            }
+        } catch (error) {
+            errorCount += 1;
+            console.error(
+                `${file}: failed to process: ${error instanceof Error ? error.message : String(error)}`,
+            );
         }
     }
 
     console.log(
-        `\n${files.length} file(s) scanned, ${changedCount} ${check ? 'would change' : 'changed'}, ${diagnosticCount} unsupported or ambiguous case(s) reported.`,
+        `\n${files.length} file(s) scanned, ${changedCount} ${check ? 'would change' : 'changed'}, ${diagnosticCount} unsupported or ambiguous case(s) reported, ${errorCount} processing error(s).`,
     );
-    if (diagnosticCount > 0 || (check && changedCount > 0)) return 1;
+    if (diagnosticCount > 0 || errorCount > 0 || (check && changedCount > 0)) return 1;
     return 0;
 }
 
diff --git a/Codemods/test/run-transform-cli.test.js b/Codemods/test/run-transform-cli.test.js
new file mode 100644
index 00000000..681a207d
--- /dev/null
+++ b/Codemods/test/run-transform-cli.test.js
@@ -0,0 +1,48 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { mkdtempSync, rmSync, writeFileSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import path from 'node:path';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { runTransformCli } from '../lib/runTransformCli.js';
+
+const temporaryDirectories = [];
+
+afterEach(() => {
+    vi.restoreAllMocks();
+    for (const directory of temporaryDirectories.splice(0)) {
+        rmSync(directory, { recursive: true, force: true });
+    }
+});
+
+describe('runTransformCli', () => {
+    it('should report a processing failure and continue without throwing', () => {
+        const directory = mkdtempSync(path.join(tmpdir(), 'cratis-transform-error-'));
+        temporaryDirectories.push(directory);
+        const first = path.join(directory, 'first.ts');
+        const second = path.join(directory, 'second.ts');
+        writeFileSync(first, 'export const first = true;\n');
+        writeFileSync(second, 'export const second = true;\n');
+        const error = vi.spyOn(console, 'error').mockImplementation(() => undefined);
+        const log = vi.spyOn(console, 'log').mockImplementation(() => undefined);
+        const visited = [];
+
+        const exitCode = runTransformCli([first, second], {
+            command: 'example-transform',
+            description: 'Example transform.',
+            transform: (file, text) => {
+                visited.push(file);
+                if (file === first) throw new Error('planted transform failure');
+                return { text, changed: false, diagnostics: [] };
+            },
+        });
+
+        expect(exitCode).toBe(1);
+        expect(visited).toEqual([first, second]);
+        expect(error).toHaveBeenCalledWith(
+            `${first}: failed to process: planted transform failure`,
+        );
+        expect(log.mock.calls.at(-1)?.[0]).toContain('1 processing error(s)');
+    });
+});
diff --git a/Source/Common/Button.css b/Source/Common/Button.css
index 8f6379fa..03be06c6 100644
--- a/Source/Common/Button.css
+++ b/Source/Common/Button.css
@@ -119,7 +119,7 @@
 .cratis-button[data-tone='accent'][data-severity='help'] {
     --cratis-button-tone: var(--cratis-primary-600);
     --cratis-button-fill: var(--cratis-primary-600);
-    --cratis-button-fill-text: #ffffff;
+    --cratis-button-fill-text: var(--cratis-surface-0);
 }
 .cratis-button[data-tone='neutral'][data-severity='contrast'] {
     --cratis-button-tone: var(--cratis-text-color);

From 3cb6b2ec1e418ddb3d80b7899b87a10ec2521ef2 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 18:27:25 +0200
Subject: [PATCH 166/267] Format TimeMachine state wiring

---
 Source/TimeMachine/TimeMachine.tsx | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/Source/TimeMachine/TimeMachine.tsx b/Source/TimeMachine/TimeMachine.tsx
index 9a481ec4..230cc73a 100644
--- a/Source/TimeMachine/TimeMachine.tsx
+++ b/Source/TimeMachine/TimeMachine.tsx
@@ -5,10 +5,7 @@ import type React from 'react';
 import { useState, useCallback, useRef, useEffect, useMemo } from 'react';
 import type { Version } from './types';
 import { ReadModelView } from './ReadModelView';
-import {
-    EventsView,
-    SelectedEventSequenceNumbersContext,
-} from './EventsView';
+import { EventsView, SelectedEventSequenceNumbersContext } from './EventsView';
 import { type TimeMachineLabels, defaultTimeMachineLabels } from './TimeMachineLabels';
 import { FaBoxArchive, FaList } from 'react-icons/fa6';
 import { useLocale } from 'react-aria-components/I18nProvider';
@@ -230,9 +227,7 @@ export const TimeMachine: React.FC<TimeMachineProps> = ({
                             )
                         }
                         aria-label={l.nextVersion}
-                        data-disabled={
-                            selectedIndex === versions.length - 1 || undefined
-                        }
+                        data-disabled={selectedIndex === versions.length - 1 || undefined}
                     >
                         ›
                     </button>

From 1727e85983fc84c66c9dce284a38c167e1360f9b Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 18:30:18 +0200
Subject: [PATCH 167/267] Add semantic text token for primary tone

---
 Documentation/Styling/cratis-tokens.md | 1 +
 Source/Common/Button.css               | 2 +-
 Source/theme.css                       | 3 +++
 Source/tokens.css                      | 1 +
 4 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/Documentation/Styling/cratis-tokens.md b/Documentation/Styling/cratis-tokens.md
index 5705435a..bd789de7 100644
--- a/Documentation/Styling/cratis-tokens.md
+++ b/Documentation/Styling/cratis-tokens.md
@@ -12,6 +12,7 @@ The `--cratis-*` variables are the supported theming boundary. The `tokens` entr
 | `--cratis-primary-color`                                | Accent, links, selected controls, and non-text indicators. |
 | `--cratis-primary-color-text`                           | Content on the accent color where used.                    |
 | `--cratis-primary-300` … `--cratis-primary-600`         | Accent scale used by specialized surfaces.                 |
+| `--cratis-primary-600-text`                             | Content on the fixed `--cratis-primary-600` tone.          |
 | `--cratis-green-500`                                    | Success state.                                             |
 | `--cratis-orange-500`                                   | Warning state.                                             |
 | `--cratis-red-500`                                      | Error/destructive indicator.                               |
diff --git a/Source/Common/Button.css b/Source/Common/Button.css
index 03be06c6..9ab6a05b 100644
--- a/Source/Common/Button.css
+++ b/Source/Common/Button.css
@@ -119,7 +119,7 @@
 .cratis-button[data-tone='accent'][data-severity='help'] {
     --cratis-button-tone: var(--cratis-primary-600);
     --cratis-button-fill: var(--cratis-primary-600);
-    --cratis-button-fill-text: var(--cratis-surface-0);
+    --cratis-button-fill-text: var(--cratis-primary-600-text);
 }
 .cratis-button[data-tone='neutral'][data-severity='contrast'] {
     --cratis-button-tone: var(--cratis-text-color);
diff --git a/Source/theme.css b/Source/theme.css
index 7fb2218c..28aad7f8 100644
--- a/Source/theme.css
+++ b/Source/theme.css
@@ -27,6 +27,7 @@
     --cratis-primary-400: #60a5fa;
     --cratis-primary-500: #3b82f6;
     --cratis-primary-600: #2563eb;
+    --cratis-primary-600-text: #ffffff;
     --cratis-action-background: #2563eb;
     --cratis-action-background-hover: #1d4ed8;
     --cratis-action-background-active: #1e40af;
@@ -75,6 +76,7 @@
     color-scheme: dark;
     --cratis-primary-color: #60a5fa;
     --cratis-primary-color-text: #030712;
+    --cratis-primary-600-text: #ffffff;
     --cratis-action-background: #60a5fa;
     --cratis-action-background-hover: #93c5fd;
     --cratis-action-background-active: #bfdbfe;
@@ -165,6 +167,7 @@
     .cratis-theme {
         --cratis-primary-color: Highlight;
         --cratis-primary-color-text: HighlightText;
+        --cratis-primary-600-text: HighlightText;
         --cratis-action-background: Highlight;
         --cratis-action-text: HighlightText;
         --cratis-surface-card: Canvas;
diff --git a/Source/tokens.css b/Source/tokens.css
index f1c79a66..95d82df5 100644
--- a/Source/tokens.css
+++ b/Source/tokens.css
@@ -27,6 +27,7 @@
     --cratis-primary-400: #60a5fa;
     --cratis-primary-500: #3b82f6;
     --cratis-primary-600: #2563eb;
+    --cratis-primary-600-text: #ffffff;
     --cratis-action-background: #2563eb;
     --cratis-action-background-hover: #1d4ed8;
     --cratis-action-background-active: #1e40af;

From 8ea4b30fbeaf2810c7b6d362702025bca182029d Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 18:31:57 +0200
Subject: [PATCH 168/267] Clarify native change-event handling

---
 Source/types/ChangeMeta.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/Source/types/ChangeMeta.ts b/Source/types/ChangeMeta.ts
index cee18181..28cc84fd 100644
--- a/Source/types/ChangeMeta.ts
+++ b/Source/types/ChangeMeta.ts
@@ -20,7 +20,9 @@ export interface ChangeMeta {
      * Native browser event that caused the change, when one exists at the public boundary.
      *
      * This is always a DOM {@link Event}; React synthetic events and renderer-specific event
-     * objects are never exposed through this property.
+     * objects are never exposed through this property. Use it only for immediate interaction
+     * handling—do not serialize, log, or transmit it because native events can retain references
+     * to form controls and user input.
      */
     readonly nativeEvent?: Event;
 }

From 7e9064ea3e8067a116666f4bbf1fa5b457e4ec2e Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 19:09:57 +0200
Subject: [PATCH 169/267] Add unstable renderer D1 contracts and schema

Establish the side-effect-free adapter ABI and packaged metadata schema before provider wiring or component routing. Keep the initial slot table limited to public primitives that actually exist, and add release gates for type purity, SSR safety, exports, and archive contents.
---
 Source/package.json                           |   6 +
 Source/renderer/README.md                     |  18 ++
 Source/renderer/capabilities.ts               |  26 +++
 Source/renderer/errors.ts                     |  48 ++++
 .../when_composing_ui_libraries.ts            |  80 +++++++
 .../when_defining_a_ui_library.ts             |  46 ++++
 .../for_slot_types/slotTyping.fixture.ts      |  35 +++
 Source/renderer/index.ts                      |  34 +++
 Source/renderer/manifest.ts                   | 117 ++++++++++
 Source/renderer/overlayEnvironment.ts         |  25 +++
 Source/renderer/slots.ts                      |  84 +++++++
 Source/schemas/ui-adapter.schema.json         | 210 ++++++++++++++++++
 Source/scripts/copy-css.sh                    |   5 +-
 Source/scripts/verify-package-archive.mjs     |   3 +
 Source/scripts/verify-package-graph.mjs       |  33 ++-
 .../verify-public-types.exceptions.json       |   7 +
 Source/scripts/verify-renderer-contracts.mjs  | 169 ++++++++++++++
 17 files changed, 941 insertions(+), 5 deletions(-)
 create mode 100644 Source/renderer/README.md
 create mode 100644 Source/renderer/capabilities.ts
 create mode 100644 Source/renderer/errors.ts
 create mode 100644 Source/renderer/for_manifest/when_composing_ui_libraries.ts
 create mode 100644 Source/renderer/for_manifest/when_defining_a_ui_library.ts
 create mode 100644 Source/renderer/for_slot_types/slotTyping.fixture.ts
 create mode 100644 Source/renderer/index.ts
 create mode 100644 Source/renderer/manifest.ts
 create mode 100644 Source/renderer/overlayEnvironment.ts
 create mode 100644 Source/renderer/slots.ts
 create mode 100644 Source/schemas/ui-adapter.schema.json
 create mode 100644 Source/scripts/verify-renderer-contracts.mjs

diff --git a/Source/package.json b/Source/package.json
index 803cbee6..ed2b5846 100644
--- a/Source/package.json
+++ b/Source/package.json
@@ -106,6 +106,11 @@
             "types": "./dist/esm/PivotViewer/index.d.ts",
             "import": "./dist/esm/PivotViewer/index.js"
         },
+        "./renderer": {
+            "types": "./dist/esm/renderer/index.d.ts",
+            "import": "./dist/esm/renderer/index.js"
+        },
+        "./schemas/ui-adapter.schema.json": "./dist/esm/schemas/ui-adapter.schema.json",
         "./SchemaEditor": {
             "types": "./dist/esm/SchemaEditor/index.d.ts",
             "import": "./dist/esm/SchemaEditor/index.js"
@@ -143,6 +148,7 @@
         "verify-no-pixi-consumer": "node ./scripts/verify-no-pixi-consumer.mjs",
         "verify-spatial-consumer": "node ./scripts/verify-spatial-consumer.mjs",
         "verify-provider-context-identity": "node ./scripts/verify-provider-context-identity.mjs",
+        "verify-renderer-contracts": "node ./scripts/verify-renderer-contracts.mjs",
         "typecheck-stories": "node ../node_modules/typescript/bin/tsc -p tsconfig.stories.json",
         "test-storybook": "yarn test-storybook:light && yarn test-storybook:dark",
         "test-storybook:light": "STORYBOOK_APPEARANCE=baseline-light yarn g:test --config vitest.storybook.config.ts",
diff --git a/Source/renderer/README.md b/Source/renderer/README.md
new file mode 100644
index 00000000..6249bb96
--- /dev/null
+++ b/Source/renderer/README.md
@@ -0,0 +1,18 @@
+<!-- Copyright (c) Cratis. All rights reserved. -->
+<!-- Licensed under the MIT license. See LICENSE file in the project root for full license information. -->
+
+# Experimental renderer contracts
+
+This directory contains only the D1 renderer contracts. Provider/context wiring, resolution,
+`RendererScope`, hooks, preloading, built-in manifests, and component routing are deliberately
+deferred.
+
+The initial slot table contains only components with real standalone public contracts:
+
+- `common.button` — presentation candidate.
+- `common.tooltip`, `dropdown.select`, `dialogs.dialog`, `display.datePicker` — interaction-heavy.
+- `datatables.paginator` — interaction-heavy and composite-adjacent.
+
+Icon button, text input, text area, checkbox, radio, switch, progress, and surface are intentionally
+absent because Components does not yet expose matching standalone primitives. Arc-bound
+`CommandForm` fields are not substitutes and must never be registered as those slots.
diff --git a/Source/renderer/capabilities.ts b/Source/renderer/capabilities.ts
new file mode 100644
index 00000000..51798338
--- /dev/null
+++ b/Source/renderer/capabilities.ts
@@ -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.
+
+/**
+ * Capability identifiers understood by the renderer ABI. Consumers branch on capabilities, never
+ * on a renderer's identity.
+ *
+ * @unstable Adapter-author contract. Expect changes until renderer conformance gates promote it.
+ */
+export type unstable_CapabilityId =
+    | 'slot.render'
+    | 'parts.passthrough'
+    | 'focus.trap'
+    | 'focus.restore'
+    | 'overlay.portal'
+    | 'collection.virtualize'
+    | 'selection.multi'
+    | 'datetime.i18n'
+    | 'form.validationMessage'
+    | 'theme.tokens'
+    | 'ssr.staticRender'
+    | 'rtl'
+    | 'forcedColors'
+    | 'motion.reduced'
+    | 'machine.binding'
+    | 'paging.server';
diff --git a/Source/renderer/errors.ts b/Source/renderer/errors.ts
new file mode 100644
index 00000000..f63764ec
--- /dev/null
+++ b/Source/renderer/errors.ts
@@ -0,0 +1,48 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { unstable_SlotId } from './slots';
+
+/**
+ * Stable diagnostic codes reserved by the unstable renderer ABI.
+ *
+ * @unstable Adapter-author contract. Expect changes until renderer conformance gates promote it.
+ */
+export const unstable_adapterErrorCodes = Object.freeze({
+    abiMismatch: 'CRATIS-UI-1001',
+    missingRequirement: 'CRATIS-UI-1002',
+    strictProfileFallback: 'CRATIS-UI-1003',
+    missingUpstreamPeer: 'CRATIS-UI-1004',
+    missingLicenseKey: 'CRATIS-UI-1005',
+    nestedLibraries: 'CRATIS-UI-1006',
+    ssrContractViolation: 'CRATIS-UI-1007',
+    duplicateResolution: 'CRATIS-UI-1008',
+    deprecatedSlot: 'CRATIS-UI-1009',
+} as const);
+
+/**
+ * Renderer diagnostic code from `CRATIS-UI-1001` through `CRATIS-UI-1009`.
+ *
+ * @unstable Adapter-author contract. Expect changes until renderer conformance gates promote it.
+ */
+export type unstable_AdapterErrorCode =
+    (typeof unstable_adapterErrorCodes)[keyof typeof unstable_adapterErrorCodes];
+
+/**
+ * Actionable renderer diagnostic. A diagnostic carries exactly one remedy so failures cannot leave
+ * consumers choosing between conflicting recovery instructions.
+ *
+ * @unstable Adapter-author contract. Expect changes until renderer conformance gates promote it.
+ */
+export interface unstable_AdapterDiagnostic {
+    /** Core-owned diagnostic code. */
+    readonly code: unstable_AdapterErrorCode;
+    /** Adapter that produced or caused the diagnostic. */
+    readonly adapterId: string;
+    /** Affected slot when the diagnostic is slot-specific. */
+    readonly slotId?: unstable_SlotId;
+    /** Human-readable explanation of the failure or degradation. */
+    readonly message: string;
+    /** The single action a consumer should take to remedy the diagnostic. */
+    readonly remedy: string;
+}
diff --git a/Source/renderer/for_manifest/when_composing_ui_libraries.ts b/Source/renderer/for_manifest/when_composing_ui_libraries.ts
new file mode 100644
index 00000000..380f1bff
--- /dev/null
+++ b/Source/renderer/for_manifest/when_composing_ui_libraries.ts
@@ -0,0 +1,80 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { ComponentType } from 'react';
+import type { ButtonProps } from '../../Common/Button';
+import type { TooltipProps } from '../../Common/Tooltip';
+import {
+    unstable_composeUiLibraries,
+    unstable_defineUiLibrary,
+} from '..';
+
+const FirstButton = (() => null) as ComponentType<ButtonProps>;
+const LastButton = (() => null) as ComponentType<ButtonProps>;
+const Tooltip = (() => null) as ComponentType<TooltipProps>;
+
+describe('when composing UI libraries', () => {
+    const first = unstable_defineUiLibrary({
+        id: 'first',
+        displayName: 'First',
+        abi: 1,
+        level: 'primitive',
+        profile: 'basic-controls/v1',
+        capabilities: ['slot.render', 'theme.tokens'],
+        slots: {
+            'common.button': {
+                mode: 'presentation',
+                fidelity: 'native',
+                render: FirstButton,
+            },
+        },
+    });
+    const last = unstable_defineUiLibrary({
+        id: 'last',
+        displayName: 'Last',
+        abi: 1,
+        level: 'full',
+        profile: 'complete-controls/v1',
+        capabilities: ['slot.render', 'focus.restore'],
+        slots: {
+            'common.button': {
+                mode: 'presentation',
+                fidelity: 'emulated',
+                render: LastButton,
+            },
+            'common.tooltip': {
+                mode: 'atomic',
+                fidelity: 'native',
+                render: Tooltip,
+            },
+        },
+    });
+
+    it('should apply last-library-wins metadata and slots', () => {
+        const result = unstable_composeUiLibraries(first, last);
+
+        result.id.should.equal('last');
+        result.displayName.should.equal('Last');
+        result.level.should.equal('full');
+        result.profile.should.equal('complete-controls/v1');
+        result.slots['common.button']!.render.should.equal(LastButton);
+        result.slots['common.tooltip']!.render.should.equal(Tooltip);
+    });
+
+    it('should union capabilities deterministically and freeze the result', () => {
+        const result = unstable_composeUiLibraries(first, last);
+
+        result.capabilities.should.deep.equal([
+            'slot.render',
+            'theme.tokens',
+            'focus.restore',
+        ]);
+        Object.isFrozen(result).should.equal(true);
+        Object.isFrozen(result.capabilities).should.equal(true);
+        Object.isFrozen(result.slots).should.equal(true);
+    });
+
+    it('should reject an empty composition', () => {
+        (() => unstable_composeUiLibraries()).should.throw(RangeError);
+    });
+});
diff --git a/Source/renderer/for_manifest/when_defining_a_ui_library.ts b/Source/renderer/for_manifest/when_defining_a_ui_library.ts
new file mode 100644
index 00000000..ddef0dab
--- /dev/null
+++ b/Source/renderer/for_manifest/when_defining_a_ui_library.ts
@@ -0,0 +1,46 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { ComponentType } from 'react';
+import type { ButtonProps } from '../../Common/Button';
+import {
+    unstable_defineUiLibrary,
+    type unstable_CapabilityId,
+    type unstable_SlotMap,
+} from '..';
+
+const Button = (() => null) as ComponentType<ButtonProps>;
+
+describe('when defining a UI library', () => {
+    it('should defensively copy and freeze the manifest containers', () => {
+        const capabilities: unstable_CapabilityId[] = ['slot.render'];
+        const slots: unstable_SlotMap = {
+            'common.button': {
+                mode: 'presentation',
+                fidelity: 'native',
+                render: Button,
+            },
+        };
+        const input = {
+            id: 'sample',
+            displayName: 'Sample',
+            abi: 1,
+            level: 'primitive' as const,
+            profile: 'basic-controls/v1',
+            capabilities,
+            slots,
+        };
+
+        const result = unstable_defineUiLibrary(input);
+        capabilities.push('theme.tokens');
+        Reflect.deleteProperty(slots, 'common.button');
+
+        result.should.not.equal(input);
+        result.capabilities.should.deep.equal(['slot.render']);
+        result.slots.should.have.property('common.button');
+        Object.isFrozen(result).should.equal(true);
+        Object.isFrozen(result.capabilities).should.equal(true);
+        Object.isFrozen(result.slots).should.equal(true);
+        Object.isFrozen(result.slots['common.button']).should.equal(true);
+    });
+});
diff --git a/Source/renderer/for_slot_types/slotTyping.fixture.ts b/Source/renderer/for_slot_types/slotTyping.fixture.ts
new file mode 100644
index 00000000..e053db43
--- /dev/null
+++ b/Source/renderer/for_slot_types/slotTyping.fixture.ts
@@ -0,0 +1,35 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { ComponentType } from 'react';
+import type {
+    unstable_BehaviorMode,
+    unstable_CratisSlots,
+    unstable_SlotId,
+    unstable_SlotMap,
+} from '@cratis/components/renderer';
+
+declare const Button: ComponentType<unstable_CratisSlots['common.button']>;
+declare const Tooltip: ComponentType<unstable_CratisSlots['common.tooltip']>;
+
+const slotId: unstable_SlotId = 'common.button';
+const mode: unstable_BehaviorMode = 'presentation';
+const slots = {
+    'common.button': {
+        mode,
+        fidelity: 'native',
+        render: Button,
+    },
+} satisfies unstable_SlotMap;
+
+// @ts-expect-error Unknown slot identifiers must not enter the Core slot map.
+const unknownSlot: unstable_SlotId = 'common.textInput';
+const wrongProps: unstable_SlotMap = {
+    // @ts-expect-error A tooltip implementation cannot satisfy the button prop contract.
+    'common.button': { mode: 'presentation', fidelity: 'native', render: Tooltip },
+};
+
+void slotId;
+void slots;
+void unknownSlot;
+void wrongProps;
diff --git a/Source/renderer/index.ts b/Source/renderer/index.ts
new file mode 100644
index 00000000..73e6feb4
--- /dev/null
+++ b/Source/renderer/index.ts
@@ -0,0 +1,34 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+/**
+ * Experimental renderer contracts for adapter authors. Every public symbol is intentionally
+ * `unstable_`-prefixed and isolated to `@cratis/components/renderer`; provider wiring, resolution,
+ * scopes, hooks, preloading, and component routing are deferred to later slices.
+ */
+export type { unstable_CapabilityId } from './capabilities';
+export {
+    unstable_adapterErrorCodes,
+    type unstable_AdapterDiagnostic,
+    type unstable_AdapterErrorCode,
+} from './errors';
+export {
+    unstable_CRATIS_UI_ABI_VERSION,
+    unstable_composeUiLibraries,
+    unstable_defineUiLibrary,
+    type unstable_RendererExtensions,
+    type unstable_RendererProps,
+    type unstable_UiLibrary,
+} from './manifest';
+export {
+    unstable_defaultOverlayEnvironment,
+    type unstable_CratisOverlayEnvironment,
+} from './overlayEnvironment';
+export type {
+    unstable_BehaviorMode,
+    unstable_CratisSlots,
+    unstable_Fidelity,
+    unstable_SlotDeclaration,
+    unstable_SlotId,
+    unstable_SlotMap,
+} from './slots';
diff --git a/Source/renderer/manifest.ts b/Source/renderer/manifest.ts
new file mode 100644
index 00000000..7e4c7c35
--- /dev/null
+++ b/Source/renderer/manifest.ts
@@ -0,0 +1,117 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { ComponentType, ReactNode } from 'react';
+import type { unstable_CapabilityId } from './capabilities';
+import type { unstable_AdapterDiagnostic } from './errors';
+import type { unstable_SlotMap } from './slots';
+
+/**
+ * Renderer ABI major implemented by this package.
+ *
+ * @unstable Adapter-author contract. Expect changes until renderer conformance gates promote it.
+ */
+export const unstable_CRATIS_UI_ABI_VERSION = 1;
+
+/**
+ * Runtime renderer manifest. Manifests are immutable values and are never passed through the
+ * Components configuration deep-merge path.
+ *
+ * @unstable Adapter-author contract. Expect changes until renderer conformance gates promote it.
+ */
+export interface unstable_UiLibrary {
+    /** Stable, package-local renderer identity used for diagnostics and telemetry. */
+    readonly id: string;
+    /** Human-readable renderer name. */
+    readonly displayName: string;
+    /** Renderer ABI major implemented by this library. */
+    readonly abi: number;
+    /** Breadth and ownership level offered by the library. */
+    readonly level: 'full' | 'primitive' | 'behavior' | 'portal' | 'theme';
+    /** Named contract profile promised by the library. */
+    readonly profile: string;
+    /** Core-owned capabilities honestly supported by the library. */
+    readonly capabilities: readonly unstable_CapabilityId[];
+    /** Typed partial slot implementation table. */
+    readonly slots: unstable_SlotMap;
+    /** Optional library-level provider. Provider wiring is deferred to a later Slice D commit. */
+    readonly Provider?: ComponentType<{ children: ReactNode }>;
+    /** Optional static diagnostic preflight. Provider consumption is deferred. */
+    readonly preflight?: () => readonly unstable_AdapterDiagnostic[];
+}
+
+/**
+ * Open declaration-merging surface for deliberate renderer-specific props. Core ships no keys, so
+ * its declarations contain no vendor types.
+ *
+ * @unstable Adapter-author contract. Expect changes until renderer conformance gates promote it.
+ */
+// This is intentionally empty: adapter packages add only their own vendor key through declaration merging.
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface unstable_RendererExtensions {}
+
+/**
+ * Deliberate renderer lock-in bag derived only from declaration-merged extension keys. Portable
+ * customization continues to use each component's `pt` contract.
+ *
+ * @unstable Adapter-author contract. Expect changes until renderer conformance gates promote it.
+ */
+export type unstable_RendererProps = {
+    [R in keyof unstable_RendererExtensions]?: Partial<unstable_RendererExtensions[R]>;
+};
+
+const frozenSlots = (slots: unstable_SlotMap): unstable_SlotMap => {
+    const copy: Record<string, object> = {};
+    for (const [slotId, declaration] of Object.entries(slots)) {
+        if (declaration) copy[slotId] = Object.freeze({ ...declaration });
+    }
+    return Object.freeze(copy) as unstable_SlotMap;
+};
+
+/**
+ * Defines a renderer library while preserving its inferred literal type. The helper is
+ * side-effect-free and defensively copies/freezes mutable manifest containers; component and
+ * callback references remain untouched.
+ *
+ * @param library Renderer library to define.
+ * @returns A frozen defensive copy with the same inferred public type.
+ * @unstable Adapter-author contract. Expect changes until renderer conformance gates promote it.
+ */
+export const unstable_defineUiLibrary = <const T extends unstable_UiLibrary>(
+    library: T,
+): T =>
+    Object.freeze({
+        ...library,
+        capabilities: Object.freeze([...library.capabilities]),
+        slots: frozenSlots(library.slots),
+    }) as T;
+
+/**
+ * Composes one or more renderer libraries. Slot declarations and metadata use last-library-wins
+ * semantics; capabilities are de-duplicated in first-seen order for deterministic diagnostics.
+ * The result is defensively copied and frozen through {@link unstable_defineUiLibrary}.
+ *
+ * @param libraries Libraries in increasing precedence order.
+ * @returns One frozen renderer library containing the union of capabilities and slots.
+ * @throws {RangeError} When no libraries are supplied.
+ * @unstable Adapter-author contract. Expect changes until renderer conformance gates promote it.
+ */
+export const unstable_composeUiLibraries = (
+    ...libraries: readonly unstable_UiLibrary[]
+): unstable_UiLibrary => {
+    if (libraries.length === 0) {
+        throw new RangeError('At least one UI library is required for composition.');
+    }
+
+    const last = libraries[libraries.length - 1];
+    const capabilities = [
+        ...new Set(libraries.flatMap(library => library.capabilities)),
+    ];
+    const slots = Object.assign({}, ...libraries.map(library => library.slots));
+
+    return unstable_defineUiLibrary({
+        ...last,
+        capabilities,
+        slots,
+    });
+};
diff --git a/Source/renderer/overlayEnvironment.ts b/Source/renderer/overlayEnvironment.ts
new file mode 100644
index 00000000..5e5835d1
--- /dev/null
+++ b/Source/renderer/overlayEnvironment.ts
@@ -0,0 +1,25 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+/**
+ * Host environment used by overlay implementations to obtain their portal container.
+ * `null` means no container is currently available; callers must defer rather than retarget.
+ *
+ * @unstable Adapter-author contract. Expect changes until renderer conformance gates promote it.
+ */
+export interface unstable_CratisOverlayEnvironment {
+    /** Resolves the current overlay container without requiring browser globals during import. */
+    getContainer(): HTMLElement | null;
+}
+
+/**
+ * Default browser overlay environment. The module is SSR-safe: `document` is inspected only when
+ * `getContainer()` is invoked, never while this module is initialized.
+ *
+ * @unstable Adapter-author contract. Expect changes until renderer conformance gates promote it.
+ */
+export const unstable_defaultOverlayEnvironment: unstable_CratisOverlayEnvironment =
+    Object.freeze({
+        getContainer: (): HTMLElement | null =>
+            typeof document === 'undefined' ? null : document.body,
+    });
diff --git a/Source/renderer/slots.ts b/Source/renderer/slots.ts
new file mode 100644
index 00000000..b823be75
--- /dev/null
+++ b/Source/renderer/slots.ts
@@ -0,0 +1,84 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { ComponentType } from 'react';
+import type { ButtonProps } from '../Common/Button';
+import type { DatePickerInputProps } from '../Common/DatePickerInput';
+import type { TooltipProps } from '../Common/Tooltip';
+import type { TablePaginatorProps } from '../DataTables/TablePaginator';
+import type { DialogProps } from '../Dialogs/Dialog';
+import type { DropdownProps } from '../Dropdown/Dropdown';
+
+/**
+ * Renderer slots backed by real public component contracts in Components V4.
+ *
+ * This interface is intentionally open so an adapter can declaration-merge private slots without
+ * making vendor types part of the Core package. The initial table is deliberately small:
+ * `common.button` is the only presentation candidate; tooltip, select, dialog, date picker, and
+ * paginator remain interaction-heavy. Icon button, text input, text area, checkbox, radio, switch,
+ * progress, and surface slots are deferred until matching standalone public primitives exist.
+ * CommandForm fields are Arc-bound composites and must never be used as substitutes for those
+ * missing primitives.
+ *
+ * @unstable Adapter-author contract. Expect changes until renderer conformance gates promote it.
+ */
+export interface unstable_CratisSlots {
+    /** Cratis button presentation contract. */
+    'common.button': ButtonProps;
+    /** Interaction-heavy tooltip contract. */
+    'common.tooltip': TooltipProps;
+    /** Interaction-heavy select/dropdown contract. */
+    'dropdown.select': DropdownProps<unknown>;
+    /** Interaction-heavy modal dialog contract. */
+    'dialogs.dialog': DialogProps;
+    /** Interaction-heavy date-picker contract. */
+    'display.datePicker': DatePickerInputProps;
+    /** Interaction-heavy, composite-adjacent table paginator contract. */
+    'datatables.paginator': TablePaginatorProps;
+}
+
+/**
+ * Identifier of a declared renderer slot.
+ *
+ * @unstable Adapter-author contract. Expect changes until renderer conformance gates promote it.
+ */
+export type unstable_SlotId = keyof unstable_CratisSlots;
+
+/**
+ * Ownership mode for a renderer slot. Presentation mode preserves Core behavior; atomic mode gives
+ * the adapter ownership of the complete interaction.
+ *
+ * @unstable Adapter-author contract. Expect changes until renderer conformance gates promote it.
+ */
+export type unstable_BehaviorMode = 'presentation' | 'atomic';
+
+/**
+ * Fidelity with which an adapter implements a slot.
+ *
+ * @unstable Adapter-author contract. Expect changes until renderer conformance gates promote it.
+ */
+export type unstable_Fidelity = 'native' | 'emulated' | 'unsupported';
+
+/**
+ * One typed renderer implementation and its behavior/fidelity declaration.
+ *
+ * @typeParam K Slot implemented by the declaration.
+ * @unstable Adapter-author contract. Expect changes until renderer conformance gates promote it.
+ */
+export interface unstable_SlotDeclaration<K extends unstable_SlotId> {
+    /** Which layer owns the slot's interaction behavior. */
+    readonly mode: unstable_BehaviorMode;
+    /** How faithfully the adapter satisfies the Core slot contract. */
+    readonly fidelity: unstable_Fidelity;
+    /** React component implementing the slot's exact public props. */
+    readonly render: ComponentType<unstable_CratisSlots[K]>;
+}
+
+/**
+ * Partial renderer slot table. A library may implement only the slots it honestly supports.
+ *
+ * @unstable Adapter-author contract. Expect changes until renderer conformance gates promote it.
+ */
+export type unstable_SlotMap = {
+    readonly [K in unstable_SlotId]?: unstable_SlotDeclaration<K>;
+};
diff --git a/Source/schemas/ui-adapter.schema.json b/Source/schemas/ui-adapter.schema.json
new file mode 100644
index 00000000..c9fddaee
--- /dev/null
+++ b/Source/schemas/ui-adapter.schema.json
@@ -0,0 +1,210 @@
+{
+    "$schema": "https://json-schema.org/draft/2020-12/schema",
+    "$id": "https://cratis.io/schemas/ui-adapter.schema.json",
+    "title": "Cratis UI adapter package metadata",
+    "description": "Static package.json `cratis` metadata for a Cratis UI adapter.",
+    "type": "object",
+    "additionalProperties": false,
+    "required": [
+        "kind",
+        "id",
+        "displayName",
+        "abi",
+        "level",
+        "profile",
+        "category",
+        "entry",
+        "export",
+        "slots",
+        "modes",
+        "capabilities",
+        "ssr",
+        "a11y",
+        "license",
+        "upstream"
+    ],
+    "properties": {
+        "kind": {
+            "const": "ui-adapter"
+        },
+        "id": {
+            "type": "string",
+            "minLength": 1,
+            "maxLength": 128,
+            "pattern": "^[a-z][a-z0-9]*(?:[._-][a-z0-9]+)*$"
+        },
+        "displayName": {
+            "type": "string",
+            "minLength": 1,
+            "maxLength": 128
+        },
+        "abi": {
+            "type": "string",
+            "pattern": "^\\^[1-9][0-9]{0,2}$"
+        },
+        "level": {
+            "enum": ["full", "primitive", "behavior", "portal", "theme"]
+        },
+        "profile": {
+            "type": "string",
+            "minLength": 1,
+            "maxLength": 128,
+            "pattern": "^[a-z][a-z0-9.-]*/v[1-9][0-9]{0,2}$"
+        },
+        "category": {
+            "type": "string",
+            "minLength": 1,
+            "maxLength": 64,
+            "pattern": "^[a-z][a-z0-9]*(?:-[a-z0-9]+)*$"
+        },
+        "entry": {
+            "type": "string",
+            "minLength": 3,
+            "maxLength": 256,
+            "pattern": "^\\./(?!.*(?:^|/)\\.\\.(?:/|$))[^\\s]+$"
+        },
+        "export": {
+            "type": "string",
+            "minLength": 1,
+            "maxLength": 128,
+            "pattern": "^[A-Za-z_$][A-Za-z0-9_$]*$"
+        },
+        "slots": {
+            "type": "array",
+            "maxItems": 256,
+            "uniqueItems": true,
+            "items": {
+                "$ref": "#/$defs/slotId"
+            }
+        },
+        "modes": {
+            "type": "object",
+            "maxProperties": 256,
+            "propertyNames": {
+                "$ref": "#/$defs/slotId"
+            },
+            "additionalProperties": {
+                "enum": ["presentation", "atomic"]
+            }
+        },
+        "capabilities": {
+            "type": "array",
+            "maxItems": 16,
+            "uniqueItems": true,
+            "items": {
+                "enum": [
+                    "slot.render",
+                    "parts.passthrough",
+                    "focus.trap",
+                    "focus.restore",
+                    "overlay.portal",
+                    "collection.virtualize",
+                    "selection.multi",
+                    "datetime.i18n",
+                    "form.validationMessage",
+                    "theme.tokens",
+                    "ssr.staticRender",
+                    "rtl",
+                    "forcedColors",
+                    "motion.reduced",
+                    "machine.binding",
+                    "paging.server"
+                ]
+            }
+        },
+        "ssr": {
+            "enum": ["safe", "client-only", "hydration-risk"]
+        },
+        "a11y": {
+            "type": "object",
+            "additionalProperties": false,
+            "required": ["axeProfile", "evidence"],
+            "properties": {
+                "axeProfile": {
+                    "enum": ["wcag21a", "wcag21aa", "wcag22a", "wcag22aa"]
+                },
+                "evidence": {
+                    "type": "string",
+                    "minLength": 3,
+                    "maxLength": 256,
+                    "pattern": "^\\./(?!.*(?:^|/)\\.\\.(?:/|$))[^\\s]+$"
+                }
+            }
+        },
+        "license": {
+            "type": "object",
+            "additionalProperties": false,
+            "required": ["spdx", "requiresKey"],
+            "properties": {
+                "spdx": {
+                    "type": "string",
+                    "minLength": 1,
+                    "maxLength": 128
+                },
+                "requiresKey": {
+                    "type": "boolean"
+                },
+                "keyEnv": {
+                    "type": "string",
+                    "minLength": 1,
+                    "maxLength": 128,
+                    "pattern": "^[A-Z][A-Z0-9_]*$"
+                },
+                "url": {
+                    "type": "string",
+                    "minLength": 8,
+                    "maxLength": 2048,
+                    "pattern": "^https://[^\\s]+$"
+                }
+            },
+            "allOf": [
+                {
+                    "if": {
+                        "properties": {
+                            "requiresKey": {
+                                "const": true
+                            }
+                        },
+                        "required": ["requiresKey"]
+                    },
+                    "then": {
+                        "required": ["keyEnv"]
+                    }
+                }
+            ]
+        },
+        "upstream": {
+            "type": "object",
+            "minProperties": 1,
+            "maxProperties": 32,
+            "propertyNames": {
+                "pattern": "^(?:@[a-z0-9][a-z0-9._-]*/)?[a-z0-9][a-z0-9._-]*$"
+            },
+            "additionalProperties": {
+                "$ref": "#/$defs/boundedSemverRange"
+            }
+        }
+    },
+    "$defs": {
+        "slotId": {
+            "type": "string",
+            "minLength": 3,
+            "maxLength": 128,
+            "pattern": "^[a-z][a-zA-Z0-9]*(?:[.-][a-zA-Z0-9]+)+$"
+        },
+        "boundedSemverRange": {
+            "type": "string",
+            "oneOf": [
+                {
+                    "pattern": "^[0-9]+\\.[0-9]+\\.[0-9]+(?:-[0-9A-Za-z.-]+)?$"
+                },
+                {
+                    "pattern": "^[~^][0-9]+\\.[0-9]+\\.[0-9]+(?:-[0-9A-Za-z.-]+)?$"
+                },
+                {
+                    "pattern": "^>=[0-9]+(?:\\.[0-9]+){0,2}(?:-[0-9A-Za-z.-]+)? <[0-9]+(?:\\.[0-9]+){0,2}(?:-[0-9A-Za-z.-]+)?$"
+                }
+            ]
+        }
+    }
+}
diff --git a/Source/scripts/copy-css.sh b/Source/scripts/copy-css.sh
index f8938627..e430a89c 100755
--- a/Source/scripts/copy-css.sh
+++ b/Source/scripts/copy-css.sh
@@ -11,7 +11,10 @@
 
 set -euo pipefail
 
-mkdir -p dist/esm
+mkdir -p dist/esm dist/esm/schemas
+
+cp schemas/ui-adapter.schema.json dist/esm/schemas/ui-adapter.schema.json
+echo "Copied ui-adapter.schema.json"
 
 for stylesheet in tokens.css theme.css; do
     cp "$stylesheet" "dist/esm/$stylesheet"
diff --git a/Source/scripts/verify-package-archive.mjs b/Source/scripts/verify-package-archive.mjs
index 3d493e52..1664eed3 100644
--- a/Source/scripts/verify-package-archive.mjs
+++ b/Source/scripts/verify-package-archive.mjs
@@ -32,6 +32,9 @@ const requiredEntries = [
     'package/MIGRATION.md',
     'package/THIRD_PARTY_NOTICES.md',
     'package/dist/esm/styles.css',
+    'package/dist/esm/schemas/ui-adapter.schema.json',
+    'package/dist/esm/renderer/index.js',
+    'package/dist/esm/renderer/index.d.ts',
     'package/dist/esm/PatrickHand-OFL.txt',
     'package/dist/esm/PatrickHand-latin.woff2',
     'package/dist/esm/PatrickHand-latin-ext.woff2',
diff --git a/Source/scripts/verify-package-graph.mjs b/Source/scripts/verify-package-graph.mjs
index 3230d446..e72fb404 100644
--- a/Source/scripts/verify-package-graph.mjs
+++ b/Source/scripts/verify-package-graph.mjs
@@ -162,16 +162,17 @@ for (const { subpath, jsEntry, dtsEntry } of jsSubpaths) {
 
 // Project-wide direct-import scan: pixi.js may only ever be imported by a file that
 // itself lives under Canvas/ or PivotViewer/, regardless of exports-map reachability.
+// Renderer runtime modules are a second strict tier: they may depend only on sibling renderer
+// runtime modules. Public component contracts enter renderer declarations through type-only imports.
 const allEmitted = emittedFiles(esmRoot);
 const directPixiImporters = [];
+const rendererRuntimeBoundaryViolations = [];
 {
     const { moduleSpecifiers } = await import('./lib/dependency-graph.mjs');
     const ts = (await import('typescript')).default;
     const { readFileSync } = await import('node:fs');
     for (const file of allEmitted) {
         const relative = path.relative(esmRoot, file).split(path.sep).join('/');
-        if (relative.startsWith('Canvas/') || relative.startsWith('PivotViewer/'))
-            continue;
         const source = readFileSync(file, 'utf8');
         const sourceFile = ts.createSourceFile(
             file,
@@ -181,9 +182,25 @@ const directPixiImporters = [];
             file.endsWith('.d.ts') ? ts.ScriptKind.TS : ts.ScriptKind.JS,
         );
         const specifiers = moduleSpecifiers(sourceFile);
-        if (specifiers.some(isPixiSpecifier)) {
+
+        if (
+            !relative.startsWith('Canvas/') &&
+            !relative.startsWith('PivotViewer/') &&
+            specifiers.some(isPixiSpecifier)
+        ) {
             directPixiImporters.push(relative);
         }
+
+        if (relative.startsWith('renderer/') && file.endsWith('.js')) {
+            for (const specifier of specifiers) {
+                const target = specifier.startsWith('.')
+                    ? path.resolve(path.dirname(file), specifier)
+                    : undefined;
+                if (!target || !target.startsWith(`${path.join(esmRoot, 'renderer')}${path.sep}`)) {
+                    rendererRuntimeBoundaryViolations.push(`${relative} -> ${specifier}`);
+                }
+            }
+        }
     }
 }
 
@@ -193,6 +210,12 @@ if (directPixiImporters.length > 0) {
             directPixiImporters.join(', '),
     );
 }
+if (rendererRuntimeBoundaryViolations.length > 0) {
+    violations.push(
+        `renderer runtime modules import outside the renderer contract directory: ` +
+            rendererRuntimeBoundaryViolations.join(', '),
+    );
+}
 
 console.log(`\nverify-package-graph: ${pkg.name}@${pkg.version}`);
 console.log(`Built ESM: ${path.relative(packageDir, esmRoot)}\n`);
@@ -219,6 +242,7 @@ if (reportPath) {
                 spatialSubpaths: [...SPATIAL_SUBPATHS],
                 subpaths: subpathReports,
                 directPixiImportersOutsideSpatialSubpaths: directPixiImporters,
+                rendererRuntimeBoundaryViolations,
                 violations,
             },
             null,
@@ -236,5 +260,6 @@ if (violations.length > 0) {
 
 console.log(
     `\nAll ${subpathReports.length} subpath(s) respect the spatial/non-spatial module-graph boundary; ` +
-        `'pixi.js' is reachable only from Canvas/ and PivotViewer/.`,
+        `'pixi.js' is reachable only from Canvas/ and PivotViewer/, and renderer runtime modules ` +
+        `have no component-family or external edges.`,
 );
diff --git a/Source/scripts/verify-public-types.exceptions.json b/Source/scripts/verify-public-types.exceptions.json
index 988cf7d1..de800c86 100644
--- a/Source/scripts/verify-public-types.exceptions.json
+++ b/Source/scripts/verify-public-types.exceptions.json
@@ -135,6 +135,13 @@
             "resolutionModes": {
                 "nodenext": ["arc-family-nodenext-extensionless-specifiers"]
             }
+        },
+        {
+            "subpath": "./renderer",
+            "resolutionModes": {
+                "bundler": ["arc-react-global-jsx-namespace"],
+                "nodenext": ["arc-family-nodenext-extensionless-specifiers"]
+            }
         }
     ]
 }
diff --git a/Source/scripts/verify-renderer-contracts.mjs b/Source/scripts/verify-renderer-contracts.mjs
new file mode 100644
index 00000000..3835bdc4
--- /dev/null
+++ b/Source/scripts/verify-renderer-contracts.mjs
@@ -0,0 +1,169 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { spawnSync } from 'node:child_process';
+import { readFileSync } from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const packageDir = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const schemaPath = path.join(packageDir, 'schemas/ui-adapter.schema.json');
+const fixturePath = path.join(
+    packageDir,
+    'renderer/for_slot_types/slotTyping.fixture.ts',
+);
+const schema = JSON.parse(readFileSync(schemaPath, 'utf8'));
+
+const valueType = value => {
+    if (Array.isArray(value)) return 'array';
+    if (value === null) return 'null';
+    if (Number.isInteger(value)) return 'integer';
+    return typeof value === 'object' ? 'object' : typeof value;
+};
+
+const sameJson = (left, right) => JSON.stringify(left) === JSON.stringify(right);
+
+const resolveReference = reference => {
+    if (!reference.startsWith('#/')) throw new Error(`Unsupported schema reference '${reference}'.`);
+    return reference
+        .slice(2)
+        .split('/')
+        .reduce((current, segment) => current[segment.replaceAll('~1', '/').replaceAll('~0', '~')], schema);
+};
+
+const validate = (candidate, rule, location = '$') => {
+    if (rule.$ref) return validate(candidate, resolveReference(rule.$ref), location);
+
+    const problems = [];
+    const add = message => problems.push(`${location}: ${message}`);
+    if (rule.type && valueType(candidate) !== rule.type) {
+        add(`expected ${rule.type}, got ${valueType(candidate)}`);
+        return problems;
+    }
+    if ('const' in rule && !sameJson(candidate, rule.const)) add(`expected ${JSON.stringify(rule.const)}`);
+    if (rule.enum && !rule.enum.some(value => sameJson(value, candidate))) add('value is outside the declared enum');
+    if (typeof candidate === 'string') {
+        if (rule.minLength !== undefined && candidate.length < rule.minLength) add(`must have at least ${rule.minLength} characters`);
+        if (rule.maxLength !== undefined && candidate.length > rule.maxLength) add(`must have no more than ${rule.maxLength} characters`);
+        if (rule.pattern && !new RegExp(rule.pattern, 'u').test(candidate)) add(`does not match ${rule.pattern}`);
+    }
+    if (Array.isArray(candidate)) {
+        if (rule.minItems !== undefined && candidate.length < rule.minItems) add(`must contain at least ${rule.minItems} items`);
+        if (rule.maxItems !== undefined && candidate.length > rule.maxItems) add(`must contain no more than ${rule.maxItems} items`);
+        if (rule.uniqueItems && new Set(candidate.map(item => JSON.stringify(item))).size !== candidate.length) add('items must be unique');
+        if (rule.items) candidate.forEach((item, index) => problems.push(...validate(item, rule.items, `${location}[${index}]`)));
+    }
+    if (candidate && typeof candidate === 'object' && !Array.isArray(candidate)) {
+        const keys = Object.keys(candidate);
+        if (rule.minProperties !== undefined && keys.length < rule.minProperties) add(`must contain at least ${rule.minProperties} properties`);
+        if (rule.maxProperties !== undefined && keys.length > rule.maxProperties) add(`must contain no more than ${rule.maxProperties} properties`);
+        for (const required of rule.required ?? []) {
+            if (!(required in candidate)) add(`missing required property '${required}'`);
+        }
+        for (const key of keys) {
+            if (rule.propertyNames) problems.push(...validate(key, rule.propertyNames, `${location}.${key} (property name)`));
+            if (rule.properties?.[key]) {
+                problems.push(...validate(candidate[key], rule.properties[key], `${location}.${key}`));
+            } else if (rule.additionalProperties === false) {
+                add(`unknown property '${key}'`);
+            } else if (rule.additionalProperties && typeof rule.additionalProperties === 'object') {
+                problems.push(...validate(candidate[key], rule.additionalProperties, `${location}.${key}`));
+            }
+        }
+    }
+    for (const nested of rule.allOf ?? []) problems.push(...validate(candidate, nested, location));
+    if (rule.if && validate(candidate, rule.if, location).length === 0 && rule.then) problems.push(...validate(candidate, rule.then, location));
+    if (rule.oneOf) {
+        const matches = rule.oneOf.filter(option => validate(candidate, option, location).length === 0).length;
+        if (matches !== 1) add(`must match exactly one alternative, matched ${matches}`);
+    }
+    return problems;
+};
+
+const validManifest = {
+    kind: 'ui-adapter',
+    id: 'future-suite',
+    displayName: 'Future Suite',
+    abi: '^1',
+    level: 'full',
+    profile: 'basic-controls/v1',
+    category: 'styled-suite',
+    entry: './dist/esm/index.js',
+    export: 'FutureSuite',
+    slots: ['common.button', 'future.widget'],
+    modes: { 'common.button': 'presentation', 'future.widget': 'atomic' },
+    capabilities: ['slot.render', 'parts.passthrough', 'ssr.staticRender'],
+    ssr: 'safe',
+    a11y: { axeProfile: 'wcag22aa', evidence: './CONFORMANCE.md' },
+    license: { spdx: 'MIT', requiresKey: false },
+    upstream: { '@future/ui': '>=2 <3' },
+};
+
+const validProblems = validate(validManifest, schema);
+if (validProblems.length > 0) {
+    console.error(`Valid renderer manifest failed schema validation:\n- ${validProblems.join('\n- ')}`);
+    process.exit(1);
+}
+
+const invalidManifests = [
+    { ...validManifest, level: 'unknown' },
+    { ...validManifest, unexpected: true },
+    { ...validManifest, upstream: { '@future/ui': '*' } },
+    { ...validManifest, modes: { 'common.button': 'hybrid' } },
+    { ...validManifest, license: { spdx: 'Proprietary', requiresKey: true } },
+];
+for (const invalid of invalidManifests) {
+    if (validate(invalid, schema).length === 0) {
+        console.error(`Invalid renderer manifest unexpectedly passed: ${JSON.stringify(invalid)}`);
+        process.exit(1);
+    }
+}
+console.log('Renderer metadata schema accepts open adapter/slot identities and rejects invalid manifests.');
+
+const tsc = path.resolve(packageDir, '../node_modules/typescript/bin/tsc');
+const typeCheck = spawnSync(
+    process.execPath,
+    [
+        tsc,
+        '--ignoreConfig',
+        '--noEmit',
+        '--strict',
+        '--skipLibCheck',
+        'true',
+        '--target',
+        'ES2022',
+        '--module',
+        'ESNext',
+        '--moduleResolution',
+        'bundler',
+        '--jsx',
+        'react-jsx',
+        '--lib',
+        'ESNext,DOM,DOM.Iterable',
+        fixturePath,
+    ],
+    { cwd: packageDir, encoding: 'utf8', timeout: 120_000 },
+);
+if (typeCheck.status !== 0) {
+    console.error(`Renderer slot typing fixture failed:\n${typeCheck.stdout}${typeCheck.stderr}`);
+    process.exit(1);
+}
+console.log('Renderer slot typing fixture compiles under strict TypeScript.');
+
+const ssrScript = `
+delete globalThis.document;
+const renderer = await import('@cratis/components/renderer');
+if (renderer.unstable_defaultOverlayEnvironment.getContainer() !== null) {
+    throw new Error('Default overlay environment must return null without document.');
+}
+`;
+const ssrImport = spawnSync(
+    process.execPath,
+    ['--input-type=module', '--eval', ssrScript],
+    { cwd: packageDir, encoding: 'utf8', timeout: 120_000 },
+);
+if (ssrImport.status !== 0) {
+    console.error(`Renderer SSR import failed:\n${ssrImport.stdout}${ssrImport.stderr}`);
+    process.exit(1);
+}
+console.log('Renderer subpath imports with document undefined and defers DOM access until invocation.');

From 753351b781a1e671dfb8fca1b27d81d4666d3ba5 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 19:24:08 +0200
Subject: [PATCH 170/267] Run renderer contracts against final ESM

Build the Rollup-rewritten package before renderer SSR verification and classify the new renderer/schema exports as Components 4-only migration surfaces.
---
 Codemods/test/transform.test.js | 3 +++
 Source/package.json             | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/Codemods/test/transform.test.js b/Codemods/test/transform.test.js
index 3eb97f0d..55dc27d5 100644
--- a/Codemods/test/transform.test.js
+++ b/Codemods/test/transform.test.js
@@ -112,6 +112,9 @@ describe('root namespace maps', () => {
             './styles',
             './tokens',
             './theme',
+            // New Components 4 adapter-author contracts and their static metadata schema.
+            './renderer',
+            './schemas/ui-adapter.schema.json',
             // The historical namespace represented the complete CommandDialog module.
             './CommandStepper',
             // Nested refinement of the historical CommandForm namespace.
diff --git a/Source/package.json b/Source/package.json
index ed2b5846..5254acd4 100644
--- a/Source/package.json
+++ b/Source/package.json
@@ -157,7 +157,7 @@
         "lint": "yarn g:lint",
         "lint:ci": "yarn g:lint:ci",
         "test": "yarn g:test",
-        "ci": "yarn generate-parts && yarn verify-parts-manifest && yarn g:ci && yarn typecheck-stories",
+        "ci": "yarn generate-parts && yarn verify-parts-manifest && yarn g:ci && yarn typecheck-stories && yarn g:build && yarn verify-renderer-contracts",
         "up": "yarn g:up",
         "dev": "npx storybook dev -p 6006",
         "build-storybook": "npx storybook build"

From 665f4260dc4d61e72c71e96bb0e3ad75c5ef0b5b Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 19:25:32 +0200
Subject: [PATCH 171/267] pi-agent: Harden renderer graph gate

---
 .../when_classifying_package_boundaries.ts    | 147 ++++++++++++++++++
 Source/scripts/lib/dependency-graph.mjs       |  89 +++++++++++
 Source/scripts/verify-package-graph.mjs       |  91 +++++++----
 3 files changed, 301 insertions(+), 26 deletions(-)
 create mode 100644 Source/scripts/for_dependency_graph/when_classifying_package_boundaries.ts

diff --git a/Source/scripts/for_dependency_graph/when_classifying_package_boundaries.ts b/Source/scripts/for_dependency_graph/when_classifying_package_boundaries.ts
new file mode 100644
index 00000000..d23a2a9a
--- /dev/null
+++ b/Source/scripts/for_dependency_graph/when_classifying_package_boundaries.ts
@@ -0,0 +1,147 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { describe, expect, it } from 'vitest';
+import {
+    analyzeRendererBoundary,
+    isPixiSpecifier,
+    isRendererVendorSpecifier,
+    rendererBoundaryReport,
+} from '../lib/dependency-graph.mjs';
+
+const emptyClosure = { files: [], external: [] };
+
+describe('when classifying package boundaries', () => {
+    it.each([
+        '@mui/material',
+        '@mui/material/Button',
+        '@emotion/react',
+        '@emotion/styled/base',
+        'primereact',
+        'primereact/button',
+        '@primereact/core',
+        '@primeuix/themes/aura',
+    ])('should classify renderer-vendor specifier %s', (specifier: string) => {
+        expect(isRendererVendorSpecifier(specifier)).toBe(true);
+    });
+
+    it.each([
+        '@mui',
+        '@muiish/material',
+        '@emotion',
+        '@emotional/react',
+        'primereacts',
+        'primereactor/button',
+        '@primereact',
+        '@primereactive/core',
+        '@primeuix',
+        '@primeui/themes',
+    ])('should allow near-miss package name %s', (specifier: string) => {
+        expect(isRendererVendorSpecifier(specifier)).toBe(false);
+    });
+
+    it('should defer the renderer boundary until the export exists', () => {
+        expect(rendererBoundaryReport(undefined, ['Common'])).toMatchObject({
+            status: 'deferred',
+            reason: "The './renderer' export is not present.",
+            violations: [],
+        });
+    });
+
+    it('should activate the renderer boundary when the export exists', () => {
+        expect(
+            rendererBoundaryReport(
+                {
+                    runtime: {
+                        files: ['renderer/index.js'],
+                        external: ['react'],
+                    },
+                    declarations: emptyClosure,
+                },
+                ['Common'],
+            ),
+        ).toMatchObject({
+            status: 'failed',
+            runtimeExternalDependencies: ['react'],
+        });
+    });
+
+    it('should allow owned prop declarations and React types in the renderer declaration closure', () => {
+        const result = analyzeRendererBoundary(
+            { files: ['renderer/index.js', 'renderer/manifest.js'], external: [] },
+            {
+                files: [
+                    'renderer/index.d.ts',
+                    'renderer/slots.d.ts',
+                    'Common/Button.d.ts',
+                ],
+                external: ['react'],
+            },
+            ['Common', 'Dialogs'],
+        );
+
+        expect(result.violations).toEqual([]);
+    });
+
+    it('should report runtime external dependencies', () => {
+        const result = analyzeRendererBoundary(
+            { files: ['renderer/index.js'], external: ['react', 'react'] },
+            emptyClosure,
+            ['Common'],
+        );
+
+        expect(result.runtimeExternalDependencies).toEqual(['react']);
+        expect(result.violations).toEqual([
+            'runtime closure reaches external dependencies: react',
+        ]);
+    });
+
+    it('should report runtime component implementation files', () => {
+        const result = analyzeRendererBoundary(
+            {
+                files: ['renderer/index.js', 'Common/Button.js', 'Dialogs/Dialog.js'],
+                external: [],
+            },
+            emptyClosure,
+            ['Common', 'Dialogs'],
+        );
+
+        expect(result.runtimeComponentImplementationFiles).toEqual([
+            'Common/Button.js',
+            'Dialogs/Dialog.js',
+        ]);
+        expect(result.violations).toEqual([
+            'runtime closure reaches component implementation files: Common/Button.js, Dialogs/Dialog.js',
+        ]);
+    });
+
+    it('should report renderer-vendor types in declarations', () => {
+        const result = analyzeRendererBoundary(
+            emptyClosure,
+            {
+                files: ['renderer/index.d.ts'],
+                external: ['react', '@mui/material', '@primeuix/themes'],
+            },
+            ['Common'],
+        );
+
+        expect(result.declarationVendorDependencies).toEqual([
+            '@mui/material',
+            '@primeuix/themes',
+        ]);
+    });
+
+    it.each(['pixi.js', 'pixi.js/app'])(
+        'should preserve Pixi classification for %s',
+        (specifier: string) => {
+            expect(isPixiSpecifier(specifier)).toBe(true);
+        },
+    );
+
+    it.each(['pixi', 'pixi.jsx', '@pixi.js/app'])(
+        'should preserve Pixi near-miss classification for %s',
+        (specifier: string) => {
+            expect(isPixiSpecifier(specifier)).toBe(false);
+        },
+    );
+});
diff --git a/Source/scripts/lib/dependency-graph.mjs b/Source/scripts/lib/dependency-graph.mjs
index 57033d55..6d1ae0d0 100644
--- a/Source/scripts/lib/dependency-graph.mjs
+++ b/Source/scripts/lib/dependency-graph.mjs
@@ -113,6 +113,95 @@ export function closureOf(entryFile, root) {
 export const isPixiSpecifier = (specifier) =>
     specifier === 'pixi.js' || specifier.startsWith('pixi.js/');
 
+/** True when `specifier` names a renderer vendor package forbidden from Components Core. */
+export const isRendererVendorSpecifier = (specifier) =>
+    specifier.startsWith('@mui/') ||
+    specifier.startsWith('@emotion/') ||
+    specifier === 'primereact' ||
+    specifier.startsWith('primereact/') ||
+    specifier.startsWith('@primereact/') ||
+    specifier.startsWith('@primeuix/');
+
+/**
+ * Classifies the renderer export's runtime and declaration closures without reading the file system.
+ * Runtime code may not depend on external packages or component implementations. Declarations may
+ * refer to Components-owned prop declarations and React types, but never renderer-vendor types.
+ */
+export function analyzeRendererBoundary(
+    runtimeClosure,
+    declarationClosure,
+    componentImplementationDirectories,
+) {
+    const runtimeExternalDependencies = [...new Set(runtimeClosure.external)].sort();
+    const runtimeComponentImplementationFiles = [
+        ...new Set(
+            runtimeClosure.files.filter((file) =>
+                componentImplementationDirectories.some((directory) =>
+                    file.startsWith(`${directory}/`),
+                ),
+            ),
+        ),
+    ].sort();
+    const declarationVendorDependencies = [
+        ...new Set(declarationClosure.external.filter(isRendererVendorSpecifier)),
+    ].sort();
+    const violations = [];
+
+    if (runtimeExternalDependencies.length > 0) {
+        violations.push(
+            `runtime closure reaches external dependencies: ${runtimeExternalDependencies.join(', ')}`,
+        );
+    }
+    if (runtimeComponentImplementationFiles.length > 0) {
+        violations.push(
+            'runtime closure reaches component implementation files: ' +
+                runtimeComponentImplementationFiles.join(', '),
+        );
+    }
+    if (declarationVendorDependencies.length > 0) {
+        violations.push(
+            `declaration closure reaches renderer-vendor types: ${declarationVendorDependencies.join(', ')}`,
+        );
+    }
+
+    return {
+        runtimeExternalDependencies,
+        runtimeComponentImplementationFiles,
+        declarationVendorDependencies,
+        violations,
+    };
+}
+
+/** Produces the stable machine-report shape for an optional `./renderer` export. */
+export function rendererBoundaryReport(
+    rendererSubpath,
+    componentImplementationDirectories,
+) {
+    if (!rendererSubpath) {
+        return {
+            status: 'deferred',
+            reason: "The './renderer' export is not present.",
+            componentImplementationDirectories,
+            runtimeExternalDependencies: [],
+            runtimeComponentImplementationFiles: [],
+            declarationVendorDependencies: [],
+            violations: [],
+        };
+    }
+
+    const result = analyzeRendererBoundary(
+        rendererSubpath.runtime,
+        rendererSubpath.declarations,
+        componentImplementationDirectories,
+    );
+    return {
+        status: result.violations.length === 0 ? 'passed' : 'failed',
+        reason: '',
+        componentImplementationDirectories,
+        ...result,
+    };
+}
+
 /** True when a closure's `files` list contains a module under `Canvas/` or `PivotViewer/`. */
 export const closureTouchesSpatialDirectory = (files) =>
     files.some(
diff --git a/Source/scripts/verify-package-graph.mjs b/Source/scripts/verify-package-graph.mjs
index e72fb404..0a0d3266 100644
--- a/Source/scripts/verify-package-graph.mjs
+++ b/Source/scripts/verify-package-graph.mjs
@@ -9,7 +9,7 @@
  * `Source/package.json`'s `exports` map, using the shared walker in
  * `scripts/lib/dependency-graph.mjs`.
  *
- * Two module boundaries are asserted, independent of any one subpath's current
+ * Package boundaries are asserted independently of any one subpath's current
  * behavior:
  *
  *   1. Every *non-spatial* subpath (every subpath except `./Canvas` and
@@ -22,6 +22,13 @@
  *      an internal-only file could not quietly reintroduce a Pixi edge without being
  *      reachable from any `exports` entry.
  *
+ *   3. Renderer-vendor imports (`@mui/*`, `@emotion/*`, PrimeReact, and PrimeUIX)
+ *      are forbidden from every emitted runtime and declaration file.
+ *   4. When `./renderer` is exported, its runtime closure has no external dependency
+ *      and reaches no component implementation directory. Its declaration closure may
+ *      reach Components-owned prop declarations and React types, but no renderer vendor.
+ *      The check is explicitly deferred until that export exists.
+ *
  * `./Canvas` and `./PivotViewer` are additionally asserted to actually reach
  * `pixi.js` - a subpath that stopped needing Pixi should have its optional peer
  * requirement removed, not silently keep it undetected.
@@ -39,6 +46,8 @@ import {
     closureOf,
     closureTouchesSpatialDirectory,
     isPixiSpecifier,
+    isRendererVendorSpecifier,
+    rendererBoundaryReport,
 } from './lib/dependency-graph.mjs';
 
 const packageDir = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
@@ -162,17 +171,18 @@ for (const { subpath, jsEntry, dtsEntry } of jsSubpaths) {
 
 // Project-wide direct-import scan: pixi.js may only ever be imported by a file that
 // itself lives under Canvas/ or PivotViewer/, regardless of exports-map reachability.
-// Renderer runtime modules are a second strict tier: they may depend only on sibling renderer
-// runtime modules. Public component contracts enter renderer declarations through type-only imports.
+// Renderer-vendor packages may not be imported by any emitted runtime or declaration file.
 const allEmitted = emittedFiles(esmRoot);
 const directPixiImporters = [];
-const rendererRuntimeBoundaryViolations = [];
+const rendererVendorImporters = [];
 {
     const { moduleSpecifiers } = await import('./lib/dependency-graph.mjs');
     const ts = (await import('typescript')).default;
     const { readFileSync } = await import('node:fs');
     for (const file of allEmitted) {
         const relative = path.relative(esmRoot, file).split(path.sep).join('/');
+        const isSpatialFile =
+            relative.startsWith('Canvas/') || relative.startsWith('PivotViewer/');
         const source = readFileSync(file, 'utf8');
         const sourceFile = ts.createSourceFile(
             file,
@@ -182,24 +192,17 @@ const rendererRuntimeBoundaryViolations = [];
             file.endsWith('.d.ts') ? ts.ScriptKind.TS : ts.ScriptKind.JS,
         );
         const specifiers = moduleSpecifiers(sourceFile);
-
-        if (
-            !relative.startsWith('Canvas/') &&
-            !relative.startsWith('PivotViewer/') &&
-            specifiers.some(isPixiSpecifier)
-        ) {
+        if (!isSpatialFile && specifiers.some(isPixiSpecifier)) {
             directPixiImporters.push(relative);
         }
-
-        if (relative.startsWith('renderer/') && file.endsWith('.js')) {
-            for (const specifier of specifiers) {
-                const target = specifier.startsWith('.')
-                    ? path.resolve(path.dirname(file), specifier)
-                    : undefined;
-                if (!target || !target.startsWith(`${path.join(esmRoot, 'renderer')}${path.sep}`)) {
-                    rendererRuntimeBoundaryViolations.push(`${relative} -> ${specifier}`);
-                }
-            }
+        for (const specifier of new Set(
+            specifiers.filter(isRendererVendorSpecifier),
+        )) {
+            rendererVendorImporters.push({
+                file: relative,
+                specifier,
+                kind: file.endsWith('.d.ts') ? 'declaration' : 'runtime',
+            });
         }
     }
 }
@@ -210,13 +213,38 @@ if (directPixiImporters.length > 0) {
             directPixiImporters.join(', '),
     );
 }
-if (rendererRuntimeBoundaryViolations.length > 0) {
+
+for (const importer of rendererVendorImporters) {
     violations.push(
-        `renderer runtime modules import outside the renderer contract directory: ` +
-            rendererRuntimeBoundaryViolations.join(', '),
+        `renderer-vendor specifier '${importer.specifier}' is imported by ` +
+            `${importer.file} (${importer.kind}).`,
     );
 }
 
+const componentImplementationDirectories = [
+    ...new Set(
+        jsSubpaths.flatMap(({ subpath, jsEntry }) => {
+            if (
+                subpath === '.' ||
+                subpath === './renderer' ||
+                subpath === './types'
+            )
+                return [];
+            const relative = path.relative(esmRoot, jsEntry).split(path.sep).join('/');
+            const separator = relative.indexOf('/');
+            return separator > 0 ? [relative.slice(0, separator)] : [];
+        }),
+    ),
+].sort();
+const rendererSubpath = subpathReports.find((row) => row.subpath === './renderer');
+const rendererBoundary = rendererBoundaryReport(
+    rendererSubpath,
+    componentImplementationDirectories,
+);
+for (const violation of rendererBoundary.violations) {
+    violations.push(`./renderer: ${violation}.`);
+}
+
 console.log(`\nverify-package-graph: ${pkg.name}@${pkg.version}`);
 console.log(`Built ESM: ${path.relative(packageDir, esmRoot)}\n`);
 
@@ -242,7 +270,8 @@ if (reportPath) {
                 spatialSubpaths: [...SPATIAL_SUBPATHS],
                 subpaths: subpathReports,
                 directPixiImportersOutsideSpatialSubpaths: directPixiImporters,
-                rendererRuntimeBoundaryViolations,
+                rendererVendorImporters,
+                rendererBoundary,
                 violations,
             },
             null,
@@ -260,6 +289,16 @@ if (violations.length > 0) {
 
 console.log(
     `\nAll ${subpathReports.length} subpath(s) respect the spatial/non-spatial module-graph boundary; ` +
-        `'pixi.js' is reachable only from Canvas/ and PivotViewer/, and renderer runtime modules ` +
-        `have no component-family or external edges.`,
+        `'pixi.js' is reachable only from Canvas/ and PivotViewer/, and emitted Core files ` +
+        `have no renderer-vendor imports.`,
 );
+if (rendererBoundary.status === 'deferred') {
+    console.log(
+        `Renderer boundary check deferred: ${rendererBoundary.reason} It will activate automatically when the export is added.`,
+    );
+} else {
+    console.log(
+        `Renderer boundary check passed: runtime has no external or component-implementation edges, ` +
+            `and declarations have no renderer-vendor type edges.`,
+    );
+}

From 1cef5cb4db7de6f03f5dd7b505a8e7c11f6b3012 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 19:40:24 +0200
Subject: [PATCH 172/267] Add Common basic control primitives

---
 Source/Common/Checkbox.stories.tsx            |  35 ++++
 Source/Common/Checkbox.tsx                    | 182 +++++++++++++++++
 Source/Common/IconButton.stories.tsx          |  32 +++
 Source/Common/IconButton.tsx                  |  36 ++++
 Source/Common/Primitives.css                  | 189 +++++++++++++++++
 Source/Common/Radio.stories.tsx               |  33 +++
 Source/Common/Radio.tsx                       | 190 ++++++++++++++++++
 Source/Common/Surface.stories.tsx             |  20 ++
 Source/Common/Surface.tsx                     |  52 +++++
 Source/Common/Switch.stories.tsx              |  33 +++
 Source/Common/Switch.tsx                      | 176 ++++++++++++++++
 Source/Common/TextArea.stories.tsx            |  31 +++
 Source/Common/TextArea.tsx                    |  80 ++++++++
 Source/Common/TextInput.stories.tsx           |  32 +++
 Source/Common/TextInput.tsx                   |  90 +++++++++
 ...hen_using_the_native_checkbox_contract.tsx | 104 ++++++++++
 .../when_using_the_icon_button_contract.tsx   |  60 ++++++
 .../for_Primitives/given/a_primitive_dom.tsx  |  40 ++++
 .../when_using_the_native_radio_contract.tsx  | 118 +++++++++++
 ...en_using_the_semantic_surface_contract.tsx |  51 +++++
 .../when_using_the_native_switch_contract.tsx | 101 ++++++++++
 ...hen_using_the_native_textarea_contract.tsx |  78 +++++++
 ...n_using_the_native_text_input_contract.tsx |  78 +++++++
 Source/Common/index.ts                        |   7 +
 Source/Common/useNativeCheckedState.ts        |  54 +++++
 .../when_scanning_foundation_surfaces.tsx     |  18 ++
 Source/scripts/generate-parts.mjs             |  64 ++++++
 Source/scripts/verify-parts-manifest.mjs      |   6 +-
 Source/styles.css                             |   1 +
 Source/types/parts.ts                         |  43 ++++
 30 files changed, 2031 insertions(+), 3 deletions(-)
 create mode 100644 Source/Common/Checkbox.stories.tsx
 create mode 100644 Source/Common/Checkbox.tsx
 create mode 100644 Source/Common/IconButton.stories.tsx
 create mode 100644 Source/Common/IconButton.tsx
 create mode 100644 Source/Common/Primitives.css
 create mode 100644 Source/Common/Radio.stories.tsx
 create mode 100644 Source/Common/Radio.tsx
 create mode 100644 Source/Common/Surface.stories.tsx
 create mode 100644 Source/Common/Surface.tsx
 create mode 100644 Source/Common/Switch.stories.tsx
 create mode 100644 Source/Common/Switch.tsx
 create mode 100644 Source/Common/TextArea.stories.tsx
 create mode 100644 Source/Common/TextArea.tsx
 create mode 100644 Source/Common/TextInput.stories.tsx
 create mode 100644 Source/Common/TextInput.tsx
 create mode 100644 Source/Common/for_Checkbox/when_using_the_native_checkbox_contract.tsx
 create mode 100644 Source/Common/for_IconButton/when_using_the_icon_button_contract.tsx
 create mode 100644 Source/Common/for_Primitives/given/a_primitive_dom.tsx
 create mode 100644 Source/Common/for_Radio/when_using_the_native_radio_contract.tsx
 create mode 100644 Source/Common/for_Surface/when_using_the_semantic_surface_contract.tsx
 create mode 100644 Source/Common/for_Switch/when_using_the_native_switch_contract.tsx
 create mode 100644 Source/Common/for_TextArea/when_using_the_native_textarea_contract.tsx
 create mode 100644 Source/Common/for_TextInput/when_using_the_native_text_input_contract.tsx
 create mode 100644 Source/Common/useNativeCheckedState.ts

diff --git a/Source/Common/Checkbox.stories.tsx b/Source/Common/Checkbox.stories.tsx
new file mode 100644
index 00000000..c9f6ecd0
--- /dev/null
+++ b/Source/Common/Checkbox.stories.tsx
@@ -0,0 +1,35 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { expect, fn, userEvent, within } from 'storybook/test';
+import { Checkbox } from './Checkbox';
+
+const meta = {
+    title: 'Common/Checkbox',
+    component: Checkbox,
+    tags: ['autodocs'],
+    parameters: { layout: 'centered' },
+    args: { label: 'Include archived items', name: 'archived', onChange: fn() },
+} satisfies Meta<typeof Checkbox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    play: async ({ args, canvasElement }) => {
+        await userEvent.click(
+            within(canvasElement).getByRole('checkbox', {
+                name: 'Include archived items',
+            }),
+        );
+        await expect(args.onChange).toHaveBeenCalledWith(
+            true,
+            expect.objectContaining({ source: 'user' }),
+        );
+    },
+};
+
+export const Selected: Story = { args: { defaultChecked: true } };
+export const Invalid: Story = { args: { invalid: true } };
+export const ReadOnly: Story = { args: { defaultChecked: true, readOnly: true } };
diff --git a/Source/Common/Checkbox.tsx b/Source/Common/Checkbox.tsx
new file mode 100644
index 00000000..18ecd0e4
--- /dev/null
+++ b/Source/Common/Checkbox.tsx
@@ -0,0 +1,182 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import {
+    forwardRef,
+    type CSSProperties,
+    type HTMLAttributes,
+    type InputHTMLAttributes,
+    type LabelHTMLAttributes,
+    type ReactNode,
+} from 'react';
+import type { ChangeHandler } from '../types/ChangeHandler';
+import type { ExactPartKeys } from '../types/ExactPartKeys';
+import type { PartsOf } from '../types/parts';
+import { useNativeCheckedState } from './useNativeCheckedState';
+
+/** Stable Cratis-owned parts for styling a {@link Checkbox}. */
+export interface CheckboxParts {
+    /** Wrapping native label. */
+    root?: LabelHTMLAttributes<HTMLLabelElement>;
+    /** Native checkbox input. */
+    input?: InputHTMLAttributes<HTMLInputElement>;
+    /** Visual checkbox box. */
+    box?: HTMLAttributes<HTMLSpanElement>;
+    /** Visual selected indicator. */
+    indicator?: HTMLAttributes<HTMLSpanElement>;
+    /** Visible label content. */
+    label?: HTMLAttributes<HTMLSpanElement>;
+}
+
+const checkboxPartsMatchManifest: ExactPartKeys<CheckboxParts, PartsOf<'Checkbox'>> = true;
+void checkboxPartsMatchManifest;
+
+/** Props for {@link Checkbox}. */
+export interface CheckboxProps extends Omit<
+    InputHTMLAttributes<HTMLInputElement>,
+    'children' | 'className' | 'onChange' | 'readOnly' | 'style' | 'type'
+> {
+    /** Visible label content. Supply `aria-label` when no visible label is rendered. */
+    label?: ReactNode;
+    /** Prevents user changes without removing the checked value from form submission. */
+    readOnly?: boolean;
+    /** Marks the checkbox invalid and exposes the canonical invalid state. */
+    invalid?: boolean;
+    /** Receives the next checked value and native user-event metadata. */
+    onChange?: ChangeHandler<boolean>;
+    /** Class name applied to the wrapping label. */
+    className?: string;
+    /** Inline style applied to the wrapping label. */
+    style?: CSSProperties;
+    /** Cratis-owned per-part attributes. */
+    pt?: CheckboxParts;
+}
+
+/** A native form checkbox with one interaction owner and stable visual parts. */
+export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
+    function Checkbox(
+        {
+            label,
+            readOnly,
+            invalid = false,
+            onChange,
+            className,
+            style,
+            pt,
+            checked,
+            defaultChecked,
+            disabled,
+            onClick,
+            'aria-invalid': ariaInvalid,
+            ...nativeProps
+        },
+        forwardedRef,
+    ) {
+        const effectiveChecked = checked ?? pt?.input?.checked;
+        const effectiveDefaultChecked = defaultChecked ?? pt?.input?.defaultChecked;
+        const effectiveDisabled = disabled ?? pt?.input?.disabled;
+        const effectiveReadOnly = readOnly ?? pt?.input?.readOnly;
+        const effectiveAriaInvalid =
+            ariaInvalid ?? pt?.input?.['aria-invalid'] ?? (invalid || undefined);
+        const effectiveInvalid =
+            invalid || effectiveAriaInvalid === true || effectiveAriaInvalid === 'true';
+        const { ref, selected, synchronize } = useNativeCheckedState(
+            effectiveChecked,
+            effectiveDefaultChecked,
+            forwardedRef,
+        );
+        return (
+            <label
+                {...pt?.root}
+                className={['cratis-choice', pt?.root?.className, className]
+                    .filter(Boolean)
+                    .join(' ')}
+                style={{ ...pt?.root?.style, ...style }}
+                data-cratis-part='root'
+                data-disabled={effectiveDisabled || undefined}
+                data-invalid={effectiveInvalid || undefined}
+                data-readonly={effectiveReadOnly || undefined}
+                data-selected={selected || undefined}
+            >
+                <input
+                    {...pt?.input}
+                    {...nativeProps}
+                    ref={ref}
+                    type='checkbox'
+                    checked={effectiveChecked}
+                    defaultChecked={effectiveDefaultChecked}
+                    disabled={effectiveDisabled}
+                    readOnly={undefined}
+                    aria-invalid={effectiveAriaInvalid}
+                    aria-readonly={effectiveReadOnly || undefined}
+                    onClick={(event) => {
+                        pt?.input?.onClick?.(event);
+                        onClick?.(event);
+                        if (effectiveReadOnly) event.preventDefault();
+                    }}
+                    onChange={(event) => {
+                        pt?.input?.onChange?.(event);
+                        if (effectiveReadOnly) return;
+                        synchronize(event.currentTarget.checked);
+                        onChange?.(event.currentTarget.checked, {
+                            source: 'user',
+                            nativeEvent: event.nativeEvent,
+                        });
+                    }}
+                    className={['cratis-choice__input', pt?.input?.className]
+                        .filter(Boolean)
+                        .join(' ')}
+                    data-cratis-part='input'
+                    data-disabled={effectiveDisabled || undefined}
+                    data-invalid={effectiveInvalid || undefined}
+                    data-readonly={effectiveReadOnly || undefined}
+                    data-selected={selected || undefined}
+                />
+                <span
+                    {...pt?.box}
+                    className={['cratis-checkbox__box', pt?.box?.className]
+                        .filter(Boolean)
+                        .join(' ')}
+                    data-cratis-part='box'
+                    data-disabled={effectiveDisabled || undefined}
+                    data-invalid={effectiveInvalid || undefined}
+                    data-readonly={effectiveReadOnly || undefined}
+                    data-selected={selected || undefined}
+                    aria-hidden='true'
+                >
+                    <span
+                        {...pt?.indicator}
+                        className={[
+                            'cratis-checkbox__indicator',
+                            pt?.indicator?.className,
+                        ]
+                            .filter(Boolean)
+                            .join(' ')}
+                        data-cratis-part='indicator'
+                        data-disabled={effectiveDisabled || undefined}
+                        data-invalid={effectiveInvalid || undefined}
+                        data-readonly={effectiveReadOnly || undefined}
+                        data-selected={selected || undefined}
+                    >
+                        ✓
+                    </span>
+                </span>
+                {label !== undefined && (
+                    <span
+                        {...pt?.label}
+                        className={['cratis-choice__label', pt?.label?.className]
+                            .filter(Boolean)
+                            .join(' ')}
+                        data-cratis-part='label'
+                        data-disabled={effectiveDisabled || undefined}
+                        data-invalid={effectiveInvalid || undefined}
+                        data-readonly={effectiveReadOnly || undefined}
+                        data-selected={selected || undefined}
+                    >
+                        {label}
+                    </span>
+                )}
+            </label>
+        );
+    },
+);
diff --git a/Source/Common/IconButton.stories.tsx b/Source/Common/IconButton.stories.tsx
new file mode 100644
index 00000000..8118e41a
--- /dev/null
+++ b/Source/Common/IconButton.stories.tsx
@@ -0,0 +1,32 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { expect, fn, userEvent, within } from 'storybook/test';
+import { IconButton } from './IconButton';
+
+const meta = {
+    title: 'Common/IconButton',
+    component: IconButton,
+    tags: ['autodocs'],
+    parameters: { layout: 'centered' },
+    args: {
+        icon: <span aria-hidden='true'>＋</span>,
+        'aria-label': 'Add item',
+        onClick: fn(),
+    },
+} satisfies Meta<typeof IconButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    play: async ({ args, canvasElement }) => {
+        const button = within(canvasElement).getByRole('button', { name: 'Add item' });
+        await userEvent.click(button);
+        await expect(args.onClick).toHaveBeenCalledOnce();
+    },
+};
+
+export const Loading: Story = { args: { loading: true } };
+export const Critical: Story = { args: { tone: 'critical' } };
diff --git a/Source/Common/IconButton.tsx b/Source/Common/IconButton.tsx
new file mode 100644
index 00000000..1ced64d3
--- /dev/null
+++ b/Source/Common/IconButton.tsx
@@ -0,0 +1,36 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { forwardRef, type ReactNode } from 'react';
+import { Button, type ButtonParts, type ButtonProps } from './Button';
+import type { ExactPartKeys } from '../types/ExactPartKeys';
+import type { PartsOf } from '../types/parts';
+
+/** Stable Cratis-owned parts for styling an {@link IconButton}. */
+export type IconButtonParts = ButtonParts;
+
+const iconButtonPartsMatchManifest: ExactPartKeys<
+    IconButtonParts,
+    PartsOf<'IconButton'>
+> = true;
+void iconButtonPartsMatchManifest;
+
+/** Props for {@link IconButton}. */
+export interface IconButtonProps extends Omit<
+    ButtonProps,
+    'aria-label' | 'children' | 'icon' | 'label' | 'pt'
+> {
+    /** Icon content displayed by the button. */
+    icon: ReactNode;
+    /** Required accessible name for the icon-only action. */
+    'aria-label': string;
+    /** Cratis-owned per-part attributes inherited from {@link Button}. */
+    pt?: IconButtonParts;
+}
+
+/** An icon-only specialization of {@link Button} with one native interaction owner. */
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+    function IconButton({ shape = 'pill', ...props }, ref) {
+        return <Button {...props} ref={ref} shape={shape} />;
+    },
+);
diff --git a/Source/Common/Primitives.css b/Source/Common/Primitives.css
new file mode 100644
index 00000000..222d7ae8
--- /dev/null
+++ b/Source/Common/Primitives.css
@@ -0,0 +1,189 @@
+/* Copyright (c) Cratis. All rights reserved. */
+/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */
+
+.cratis-text-input,
+.cratis-text-area {
+    box-sizing: border-box;
+    min-height: var(--cratis-control-height);
+    padding: 0.625rem 0.75rem;
+    border: 1px solid var(--cratis-control-border);
+    border-radius: var(--cratis-border-radius);
+    background: var(--cratis-control-background);
+    color: var(--cratis-text-color);
+    font: inherit;
+    box-shadow: var(--cratis-shadow-subtle);
+}
+.cratis-text-area {
+    resize: vertical;
+}
+.cratis-text-input::placeholder,
+.cratis-text-area::placeholder {
+    color: var(--cratis-text-color-secondary);
+}
+.cratis-text-input:focus-visible,
+.cratis-text-area:focus-visible {
+    outline: none;
+    border-color: var(--cratis-primary-color);
+    box-shadow: var(--cratis-focus-ring);
+}
+.cratis-text-input:is(:disabled, [data-readonly='true']),
+.cratis-text-area:is(:disabled, [data-readonly='true']) {
+    background: var(--cratis-surface-100);
+}
+.cratis-text-input:disabled,
+.cratis-text-area:disabled {
+    cursor: not-allowed;
+    opacity: var(--cratis-disabled-opacity);
+}
+.cratis-text-input[data-invalid='true'],
+.cratis-text-area[data-invalid='true'] {
+    border-color: var(--cratis-red-500);
+}
+
+.cratis-choice {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    color: var(--cratis-text-color);
+    cursor: pointer;
+}
+.cratis-choice[data-disabled='true'] {
+    cursor: not-allowed;
+    opacity: var(--cratis-disabled-opacity);
+}
+.cratis-choice[data-readonly='true']:not([data-disabled='true']) {
+    cursor: default;
+}
+.cratis-choice__input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    white-space: nowrap;
+}
+.cratis-checkbox__box,
+.cratis-radio__box,
+.cratis-switch__control {
+    display: inline-flex;
+    box-sizing: border-box;
+    flex: 0 0 auto;
+    align-items: center;
+    border: 1px solid var(--cratis-control-border);
+    background: var(--cratis-control-background);
+}
+.cratis-checkbox__box,
+.cratis-radio__box {
+    width: 1.25rem;
+    height: 1.25rem;
+    justify-content: center;
+}
+.cratis-checkbox__box {
+    border-radius: var(--cratis-border-radius);
+}
+.cratis-checkbox__indicator {
+    color: var(--cratis-primary-color-text);
+    font-size: 0.85rem;
+    line-height: 1;
+    opacity: 0;
+}
+.cratis-radio__box {
+    border-radius: 50%;
+}
+.cratis-radio__indicator {
+    width: 0.65rem;
+    height: 0.65rem;
+    border-radius: 50%;
+    background: var(--cratis-primary-color);
+    opacity: 0;
+}
+.cratis-switch__control {
+    width: 2.5rem;
+    height: 1.4rem;
+    padding: 0.15rem;
+    border-radius: 999px;
+    background: var(--cratis-surface-100);
+    transition: background-color 140ms ease;
+}
+.cratis-switch__handle {
+    width: 1rem;
+    height: 1rem;
+    border-radius: 50%;
+    background: var(--cratis-control-background);
+    box-shadow: var(--cratis-shadow-subtle);
+    transition: transform 140ms ease;
+}
+.cratis-choice__input:focus-visible
+    + :is(.cratis-checkbox__box, .cratis-radio__box, .cratis-switch__control) {
+    box-shadow: var(--cratis-focus-ring);
+}
+.cratis-choice__input:checked + .cratis-checkbox__box,
+.cratis-choice__input:checked + .cratis-switch__control {
+    border-color: var(--cratis-primary-color);
+    background: var(--cratis-primary-color);
+}
+.cratis-choice__input:checked + .cratis-checkbox__box .cratis-checkbox__indicator,
+.cratis-choice__input:checked + .cratis-radio__box .cratis-radio__indicator {
+    opacity: 1;
+}
+.cratis-choice__input:checked + .cratis-radio__box {
+    border-color: var(--cratis-primary-color);
+}
+.cratis-choice__input:checked + .cratis-switch__control .cratis-switch__handle {
+    transform: translateX(1.05rem);
+}
+.cratis-choice:dir(rtl)
+    .cratis-choice__input:checked
+    + .cratis-switch__control
+    .cratis-switch__handle {
+    transform: translateX(-1.05rem);
+}
+.cratis-choice[data-invalid='true']
+    :is(.cratis-checkbox__box, .cratis-radio__box, .cratis-switch__control) {
+    border-color: var(--cratis-red-500);
+}
+
+.cratis-surface {
+    box-sizing: border-box;
+    border: 1px solid var(--cratis-surface-border);
+    border-radius: var(--cratis-border-radius);
+    background: var(--cratis-surface-card);
+    color: var(--cratis-text-color);
+    box-shadow: var(--cratis-shadow-subtle);
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .cratis-switch__control,
+    .cratis-switch__handle {
+        transition: none;
+    }
+}
+
+@media (forced-colors: active) {
+    .cratis-text-input,
+    .cratis-text-area,
+    .cratis-checkbox__box,
+    .cratis-radio__box,
+    .cratis-switch__control,
+    .cratis-surface {
+        border-color: CanvasText;
+    }
+    .cratis-choice__input:checked
+        + :is(.cratis-checkbox__box, .cratis-switch__control) {
+        background: Highlight;
+    }
+    .cratis-choice__input:checked + .cratis-radio__box .cratis-radio__indicator {
+        background: Highlight;
+    }
+    .cratis-choice__input:focus-visible
+        + :is(.cratis-checkbox__box, .cratis-radio__box, .cratis-switch__control),
+    .cratis-text-input:focus-visible,
+    .cratis-text-area:focus-visible {
+        outline: 2px solid Highlight;
+        outline-offset: 2px;
+        box-shadow: none;
+    }
+}
diff --git a/Source/Common/Radio.stories.tsx b/Source/Common/Radio.stories.tsx
new file mode 100644
index 00000000..1fdf37ce
--- /dev/null
+++ b/Source/Common/Radio.stories.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 type { Meta, StoryObj } from '@storybook/react';
+import { expect, fn, userEvent, within } from 'storybook/test';
+import { Radio } from './Radio';
+
+const meta = {
+    title: 'Common/Radio',
+    component: Radio,
+    tags: ['autodocs'],
+    parameters: { layout: 'centered' },
+    args: { label: 'Daily', name: 'frequency', value: 'daily', onChange: fn() },
+} satisfies Meta<typeof Radio>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    play: async ({ args, canvasElement }) => {
+        await userEvent.click(
+            within(canvasElement).getByRole('radio', { name: 'Daily' }),
+        );
+        await expect(args.onChange).toHaveBeenCalledWith(
+            true,
+            expect.objectContaining({ source: 'user' }),
+        );
+    },
+};
+
+export const Selected: Story = { args: { defaultChecked: true } };
+export const Invalid: Story = { args: { invalid: true } };
+export const ReadOnly: Story = { args: { defaultChecked: true, readOnly: true } };
diff --git a/Source/Common/Radio.tsx b/Source/Common/Radio.tsx
new file mode 100644
index 00000000..cb132e81
--- /dev/null
+++ b/Source/Common/Radio.tsx
@@ -0,0 +1,190 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import {
+    forwardRef,
+    type CSSProperties,
+    type HTMLAttributes,
+    type InputHTMLAttributes,
+    type LabelHTMLAttributes,
+    type ReactNode,
+} from 'react';
+import type { ChangeHandler } from '../types/ChangeHandler';
+import type { ExactPartKeys } from '../types/ExactPartKeys';
+import type { PartsOf } from '../types/parts';
+import { useNativeCheckedState } from './useNativeCheckedState';
+
+/** Stable Cratis-owned parts for styling a {@link Radio}. */
+export interface RadioParts {
+    /** Wrapping native label. */
+    root?: LabelHTMLAttributes<HTMLLabelElement>;
+    /** Native radio input. */
+    input?: InputHTMLAttributes<HTMLInputElement>;
+    /** Visual radio box. */
+    box?: HTMLAttributes<HTMLSpanElement>;
+    /** Visual selected indicator. */
+    indicator?: HTMLAttributes<HTMLSpanElement>;
+    /** Visible label content. */
+    label?: HTMLAttributes<HTMLSpanElement>;
+}
+
+const radioPartsMatchManifest: ExactPartKeys<RadioParts, PartsOf<'Radio'>> = true;
+void radioPartsMatchManifest;
+
+/** Props for one native {@link Radio} option. */
+export interface RadioProps extends Omit<
+    InputHTMLAttributes<HTMLInputElement>,
+    | 'children'
+    | 'className'
+    | 'name'
+    | 'onChange'
+    | 'readOnly'
+    | 'style'
+    | 'type'
+    | 'value'
+> {
+    /** Native form group name shared with related radio options. */
+    name: string;
+    /** Native form value submitted when this option is checked. */
+    value: string | number;
+    /** Visible option label. Supply `aria-label` when no visible label is rendered. */
+    label?: ReactNode;
+    /** Prevents user changes without removing the checked value from form submission. */
+    readOnly?: boolean;
+    /** Marks the option invalid and exposes the canonical invalid state. */
+    invalid?: boolean;
+    /** Receives `true` when the native option becomes checked and includes user metadata. */
+    onChange?: ChangeHandler<boolean>;
+    /** Class name applied to the wrapping label. */
+    className?: string;
+    /** Inline style applied to the wrapping label. */
+    style?: CSSProperties;
+    /** Cratis-owned per-part attributes. */
+    pt?: RadioParts;
+}
+
+/** One native radio option; grouping and selection ownership remain with the browser and host. */
+export const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(
+    {
+        name,
+        value,
+        label,
+        readOnly,
+        invalid = false,
+        onChange,
+        className,
+        style,
+        pt,
+        checked,
+        defaultChecked,
+        disabled,
+        onClick,
+        'aria-invalid': ariaInvalid,
+        ...nativeProps
+    },
+    forwardedRef,
+) {
+    const effectiveChecked = checked ?? pt?.input?.checked;
+    const effectiveDefaultChecked = defaultChecked ?? pt?.input?.defaultChecked;
+    const effectiveDisabled = disabled ?? pt?.input?.disabled;
+    const effectiveReadOnly = readOnly ?? pt?.input?.readOnly;
+    const effectiveAriaInvalid =
+        ariaInvalid ?? pt?.input?.['aria-invalid'] ?? (invalid || undefined);
+    const effectiveInvalid =
+        invalid || effectiveAriaInvalid === true || effectiveAriaInvalid === 'true';
+    const { ref, selected, synchronize } = useNativeCheckedState(
+        effectiveChecked,
+        effectiveDefaultChecked,
+        forwardedRef,
+        true,
+    );
+    return (
+        <label
+            {...pt?.root}
+            className={['cratis-choice', pt?.root?.className, className]
+                .filter(Boolean)
+                .join(' ')}
+            style={{ ...pt?.root?.style, ...style }}
+            data-cratis-part='root'
+            data-disabled={effectiveDisabled || undefined}
+            data-invalid={effectiveInvalid || undefined}
+            data-readonly={effectiveReadOnly || undefined}
+            data-selected={selected || undefined}
+        >
+            <input
+                {...pt?.input}
+                {...nativeProps}
+                ref={ref}
+                type='radio'
+                name={name}
+                value={value}
+                checked={effectiveChecked}
+                defaultChecked={effectiveDefaultChecked}
+                disabled={effectiveDisabled}
+                readOnly={undefined}
+                aria-invalid={effectiveAriaInvalid}
+                onClick={(event) => {
+                    pt?.input?.onClick?.(event);
+                    onClick?.(event);
+                    if (effectiveReadOnly) event.preventDefault();
+                }}
+                onChange={(event) => {
+                    pt?.input?.onChange?.(event);
+                    if (effectiveReadOnly || !event.currentTarget.checked) return;
+                    synchronize(true);
+                    onChange?.(true, {
+                        source: 'user',
+                        nativeEvent: event.nativeEvent,
+                    });
+                }}
+                className={['cratis-choice__input', pt?.input?.className]
+                    .filter(Boolean)
+                    .join(' ')}
+                data-cratis-part='input'
+                data-disabled={effectiveDisabled || undefined}
+                data-invalid={effectiveInvalid || undefined}
+                data-readonly={effectiveReadOnly || undefined}
+                data-selected={selected || undefined}
+            />
+            <span
+                {...pt?.box}
+                className={['cratis-radio__box', pt?.box?.className]
+                    .filter(Boolean)
+                    .join(' ')}
+                data-cratis-part='box'
+                data-disabled={effectiveDisabled || undefined}
+                data-invalid={effectiveInvalid || undefined}
+                data-readonly={effectiveReadOnly || undefined}
+                data-selected={selected || undefined}
+                aria-hidden='true'
+            >
+                <span
+                    {...pt?.indicator}
+                    className={['cratis-radio__indicator', pt?.indicator?.className]
+                        .filter(Boolean)
+                        .join(' ')}
+                    data-cratis-part='indicator'
+                    data-disabled={effectiveDisabled || undefined}
+                    data-invalid={effectiveInvalid || undefined}
+                    data-readonly={effectiveReadOnly || undefined}
+                    data-selected={selected || undefined}
+                />
+            </span>
+            {label !== undefined && (
+                <span
+                    {...pt?.label}
+                    className={['cratis-choice__label', pt?.label?.className]
+                        .filter(Boolean)
+                        .join(' ')}
+                    data-cratis-part='label'
+                    data-disabled={effectiveDisabled || undefined}
+                    data-invalid={effectiveInvalid || undefined}
+                    data-readonly={effectiveReadOnly || undefined}
+                    data-selected={selected || undefined}
+                >
+                    {label}
+                </span>
+            )}
+        </label>
+    );
+});
diff --git a/Source/Common/Surface.stories.tsx b/Source/Common/Surface.stories.tsx
new file mode 100644
index 00000000..1bb9bd94
--- /dev/null
+++ b/Source/Common/Surface.stories.tsx
@@ -0,0 +1,20 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { Surface } from './Surface';
+
+const meta = {
+    title: 'Common/Surface',
+    component: Surface,
+    tags: ['autodocs'],
+    parameters: { layout: 'centered' },
+    args: { children: 'Example content', style: { padding: '1rem', width: '18rem' } },
+} satisfies Meta<typeof Surface>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Div: Story = {};
+export const Section: Story = { args: { as: 'section', 'aria-label': 'Summary' } };
+export const Article: Story = { args: { as: 'article', 'aria-label': 'Example article' } };
diff --git a/Source/Common/Surface.tsx b/Source/Common/Surface.tsx
new file mode 100644
index 00000000..a8bd436f
--- /dev/null
+++ b/Source/Common/Surface.tsx
@@ -0,0 +1,52 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { forwardRef, type ForwardedRef, type HTMLAttributes } from 'react';
+import type { ExactPartKeys } from '../types/ExactPartKeys';
+import type { PartsOf } from '../types/parts';
+
+/** Native elements supported by {@link Surface}. */
+export type SurfaceElement = 'article' | 'div' | 'section';
+
+/** Stable Cratis-owned parts for styling a {@link Surface}. */
+export interface SurfaceParts {
+    /** Native surface element. */
+    root?: HTMLAttributes<HTMLElement>;
+}
+
+const surfacePartsMatchManifest: ExactPartKeys<SurfaceParts, PartsOf<'Surface'>> = true;
+void surfacePartsMatchManifest;
+
+/** Props for {@link Surface}. */
+export interface SurfaceProps extends HTMLAttributes<HTMLElement> {
+    /** Native semantic element to render. Defaults to `div`. */
+    as?: SurfaceElement;
+    /** Cratis-owned per-part attributes. */
+    pt?: SurfaceParts;
+}
+
+const assignSurfaceRef = (ref: ForwardedRef<HTMLElement>, element: HTMLElement | null) => {
+    if (typeof ref === 'function') ref(element);
+    else if (ref) ref.current = element;
+};
+
+/** A non-interactive semantic surface with a bounded native-element choice. */
+export const Surface = forwardRef<HTMLElement, SurfaceProps>(function Surface(
+    { as: Element = 'div', pt, className, style, ...nativeProps },
+    ref,
+) {
+    return (
+        <Element
+            {...pt?.root}
+            {...nativeProps}
+            ref={(element) => {
+                assignSurfaceRef(ref, element);
+            }}
+            className={['cratis-surface', pt?.root?.className, className]
+                .filter(Boolean)
+                .join(' ')}
+            style={{ ...pt?.root?.style, ...style }}
+            data-cratis-part='root'
+        />
+    );
+});
diff --git a/Source/Common/Switch.stories.tsx b/Source/Common/Switch.stories.tsx
new file mode 100644
index 00000000..7385ded9
--- /dev/null
+++ b/Source/Common/Switch.stories.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 type { Meta, StoryObj } from '@storybook/react';
+import { expect, fn, userEvent, within } from 'storybook/test';
+import { Switch } from './Switch';
+
+const meta = {
+    title: 'Common/Switch',
+    component: Switch,
+    tags: ['autodocs'],
+    parameters: { layout: 'centered' },
+    args: { label: 'Enable notifications', name: 'notifications', onChange: fn() },
+} satisfies Meta<typeof Switch>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    play: async ({ args, canvasElement }) => {
+        await userEvent.click(
+            within(canvasElement).getByRole('switch', { name: 'Enable notifications' }),
+        );
+        await expect(args.onChange).toHaveBeenCalledWith(
+            true,
+            expect.objectContaining({ source: 'user' }),
+        );
+    },
+};
+
+export const Selected: Story = { args: { defaultChecked: true } };
+export const Invalid: Story = { args: { invalid: true } };
+export const ReadOnly: Story = { args: { defaultChecked: true, readOnly: true } };
diff --git a/Source/Common/Switch.tsx b/Source/Common/Switch.tsx
new file mode 100644
index 00000000..c4e04a7e
--- /dev/null
+++ b/Source/Common/Switch.tsx
@@ -0,0 +1,176 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import {
+    forwardRef,
+    type CSSProperties,
+    type HTMLAttributes,
+    type InputHTMLAttributes,
+    type LabelHTMLAttributes,
+    type ReactNode,
+} from 'react';
+import type { ChangeHandler } from '../types/ChangeHandler';
+import type { ExactPartKeys } from '../types/ExactPartKeys';
+import type { PartsOf } from '../types/parts';
+import { useNativeCheckedState } from './useNativeCheckedState';
+
+/** Stable Cratis-owned parts for styling a {@link Switch}. */
+export interface SwitchParts {
+    /** Wrapping native label. */
+    root?: LabelHTMLAttributes<HTMLLabelElement>;
+    /** Native checkbox input with switch semantics. */
+    input?: InputHTMLAttributes<HTMLInputElement>;
+    /** Visual switch track. */
+    control?: HTMLAttributes<HTMLSpanElement>;
+    /** Visual switch handle. */
+    handle?: HTMLAttributes<HTMLSpanElement>;
+    /** Visible label content. */
+    label?: HTMLAttributes<HTMLSpanElement>;
+}
+
+const switchPartsMatchManifest: ExactPartKeys<SwitchParts, PartsOf<'Switch'>> = true;
+void switchPartsMatchManifest;
+
+/** Props for {@link Switch}. */
+export interface SwitchProps extends Omit<
+    InputHTMLAttributes<HTMLInputElement>,
+    'children' | 'className' | 'onChange' | 'readOnly' | 'style' | 'type'
+> {
+    /** Visible label content. Supply `aria-label` when no visible label is rendered. */
+    label?: ReactNode;
+    /** Prevents user changes without removing the checked value from form submission. */
+    readOnly?: boolean;
+    /** Marks the switch invalid and exposes the canonical invalid state. */
+    invalid?: boolean;
+    /** Receives the next checked value and native user-event metadata. */
+    onChange?: ChangeHandler<boolean>;
+    /** Class name applied to the wrapping label. */
+    className?: string;
+    /** Inline style applied to the wrapping label. */
+    style?: CSSProperties;
+    /** Cratis-owned per-part attributes. */
+    pt?: SwitchParts;
+}
+
+/** A native checkbox with switch semantics, semantic changes, and stable visual parts. */
+export const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(
+    {
+        label,
+        readOnly,
+        invalid = false,
+        onChange,
+        className,
+        style,
+        pt,
+        checked,
+        defaultChecked,
+        disabled,
+        onClick,
+        'aria-invalid': ariaInvalid,
+        ...nativeProps
+    },
+    forwardedRef,
+) {
+    const effectiveChecked = checked ?? pt?.input?.checked;
+    const effectiveDefaultChecked = defaultChecked ?? pt?.input?.defaultChecked;
+    const effectiveDisabled = disabled ?? pt?.input?.disabled;
+    const effectiveReadOnly = readOnly ?? pt?.input?.readOnly;
+    const effectiveAriaInvalid =
+        ariaInvalid ?? pt?.input?.['aria-invalid'] ?? (invalid || undefined);
+    const effectiveInvalid =
+        invalid || effectiveAriaInvalid === true || effectiveAriaInvalid === 'true';
+    const { ref, selected, synchronize } = useNativeCheckedState(
+        effectiveChecked,
+        effectiveDefaultChecked,
+        forwardedRef,
+    );
+    return (
+        <label
+            {...pt?.root}
+            className={['cratis-choice', pt?.root?.className, className]
+                .filter(Boolean)
+                .join(' ')}
+            style={{ ...pt?.root?.style, ...style }}
+            data-cratis-part='root'
+            data-disabled={effectiveDisabled || undefined}
+            data-invalid={effectiveInvalid || undefined}
+            data-readonly={effectiveReadOnly || undefined}
+            data-selected={selected || undefined}
+        >
+            <input
+                {...pt?.input}
+                {...nativeProps}
+                ref={ref}
+                type='checkbox'
+                role='switch'
+                checked={effectiveChecked}
+                defaultChecked={effectiveDefaultChecked}
+                disabled={effectiveDisabled}
+                readOnly={undefined}
+                aria-invalid={effectiveAriaInvalid}
+                aria-readonly={effectiveReadOnly || undefined}
+                onClick={(event) => {
+                    pt?.input?.onClick?.(event);
+                    onClick?.(event);
+                    if (effectiveReadOnly) event.preventDefault();
+                }}
+                onChange={(event) => {
+                    pt?.input?.onChange?.(event);
+                    if (effectiveReadOnly) return;
+                    synchronize(event.currentTarget.checked);
+                    onChange?.(event.currentTarget.checked, {
+                        source: 'user',
+                        nativeEvent: event.nativeEvent,
+                    });
+                }}
+                className={['cratis-choice__input', pt?.input?.className]
+                    .filter(Boolean)
+                    .join(' ')}
+                data-cratis-part='input'
+                data-disabled={effectiveDisabled || undefined}
+                data-invalid={effectiveInvalid || undefined}
+                data-readonly={effectiveReadOnly || undefined}
+                data-selected={selected || undefined}
+            />
+            <span
+                {...pt?.control}
+                className={['cratis-switch__control', pt?.control?.className]
+                    .filter(Boolean)
+                    .join(' ')}
+                data-cratis-part='control'
+                data-disabled={effectiveDisabled || undefined}
+                data-invalid={effectiveInvalid || undefined}
+                data-readonly={effectiveReadOnly || undefined}
+                data-selected={selected || undefined}
+                aria-hidden='true'
+            >
+                <span
+                    {...pt?.handle}
+                    className={['cratis-switch__handle', pt?.handle?.className]
+                        .filter(Boolean)
+                        .join(' ')}
+                    data-cratis-part='handle'
+                    data-disabled={effectiveDisabled || undefined}
+                    data-invalid={effectiveInvalid || undefined}
+                    data-readonly={effectiveReadOnly || undefined}
+                    data-selected={selected || undefined}
+                />
+            </span>
+            {label !== undefined && (
+                <span
+                    {...pt?.label}
+                    className={['cratis-choice__label', pt?.label?.className]
+                        .filter(Boolean)
+                        .join(' ')}
+                    data-cratis-part='label'
+                    data-disabled={effectiveDisabled || undefined}
+                    data-invalid={effectiveInvalid || undefined}
+                    data-readonly={effectiveReadOnly || undefined}
+                    data-selected={selected || undefined}
+                >
+                    {label}
+                </span>
+            )}
+        </label>
+    );
+});
diff --git a/Source/Common/TextArea.stories.tsx b/Source/Common/TextArea.stories.tsx
new file mode 100644
index 00000000..52663938
--- /dev/null
+++ b/Source/Common/TextArea.stories.tsx
@@ -0,0 +1,31 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { expect, fn, userEvent, within } from 'storybook/test';
+import { TextArea } from './TextArea';
+
+const meta = {
+    title: 'Common/TextArea',
+    component: TextArea,
+    tags: ['autodocs'],
+    parameters: { layout: 'centered' },
+    args: { 'aria-label': 'Notes', onChange: fn(), rows: 4 },
+} satisfies Meta<typeof TextArea>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    play: async ({ args, canvasElement }) => {
+        const input = within(canvasElement).getByRole('textbox', { name: 'Notes' });
+        await userEvent.type(input, 'Ready');
+        await expect(args.onChange).toHaveBeenLastCalledWith(
+            'Ready',
+            expect.objectContaining({ source: 'user' }),
+        );
+    },
+};
+
+export const Invalid: Story = { args: { defaultValue: 'Review', invalid: true } };
+export const ReadOnly: Story = { args: { defaultValue: 'Read-only notes', readOnly: true } };
diff --git a/Source/Common/TextArea.tsx b/Source/Common/TextArea.tsx
new file mode 100644
index 00000000..b3386133
--- /dev/null
+++ b/Source/Common/TextArea.tsx
@@ -0,0 +1,80 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { forwardRef, type TextareaHTMLAttributes } from 'react';
+import type { ChangeHandler } from '../types/ChangeHandler';
+import type { ExactPartKeys } from '../types/ExactPartKeys';
+import type { PartsOf } from '../types/parts';
+
+/** Stable Cratis-owned parts for styling a {@link TextArea}. */
+export interface TextAreaParts {
+    /** Native textarea element. */
+    root?: TextareaHTMLAttributes<HTMLTextAreaElement>;
+}
+
+const textAreaPartsMatchManifest: ExactPartKeys<TextAreaParts, PartsOf<'TextArea'>> = true;
+void textAreaPartsMatchManifest;
+
+/** Props for {@link TextArea}. */
+export interface TextAreaProps extends Omit<
+    TextareaHTMLAttributes<HTMLTextAreaElement>,
+    'onChange'
+> {
+    /** Marks the textarea invalid and exposes the canonical invalid state. */
+    invalid?: boolean;
+    /** Receives the next string value and native user-event metadata. */
+    onChange?: ChangeHandler<string>;
+    /** Cratis-owned per-part attributes. */
+    pt?: TextAreaParts;
+}
+
+/** A native multi-line text control with semantic value changes and stable Components parts. */
+export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
+    function TextArea(
+        {
+            invalid = false,
+            onChange,
+            pt,
+            className,
+            style,
+            disabled,
+            readOnly,
+            'aria-invalid': ariaInvalid,
+            ...nativeProps
+        },
+        ref,
+    ) {
+        const effectiveDisabled = disabled ?? pt?.root?.disabled;
+        const effectiveReadOnly = readOnly ?? pt?.root?.readOnly;
+        const effectiveAriaInvalid =
+            ariaInvalid ?? pt?.root?.['aria-invalid'] ?? (invalid || undefined);
+        const effectiveInvalid =
+            invalid || effectiveAriaInvalid === true || effectiveAriaInvalid === 'true';
+
+        return (
+            <textarea
+                {...pt?.root}
+                {...nativeProps}
+                ref={ref}
+                disabled={effectiveDisabled}
+                readOnly={effectiveReadOnly}
+                aria-invalid={effectiveAriaInvalid}
+                onChange={(event) => {
+                    pt?.root?.onChange?.(event);
+                    onChange?.(event.currentTarget.value, {
+                        source: 'user',
+                        nativeEvent: event.nativeEvent,
+                    });
+                }}
+                className={['cratis-text-area', pt?.root?.className, className]
+                    .filter(Boolean)
+                    .join(' ')}
+                style={{ ...pt?.root?.style, ...style }}
+                data-cratis-part='root'
+                data-disabled={effectiveDisabled || undefined}
+                data-invalid={effectiveInvalid || undefined}
+                data-readonly={effectiveReadOnly || undefined}
+            />
+        );
+    },
+);
diff --git a/Source/Common/TextInput.stories.tsx b/Source/Common/TextInput.stories.tsx
new file mode 100644
index 00000000..0bb9e865
--- /dev/null
+++ b/Source/Common/TextInput.stories.tsx
@@ -0,0 +1,32 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { expect, fn, userEvent, within } from 'storybook/test';
+import { TextInput } from './TextInput';
+
+const meta = {
+    title: 'Common/TextInput',
+    component: TextInput,
+    tags: ['autodocs'],
+    parameters: { layout: 'centered' },
+    args: { 'aria-label': 'Project name', onChange: fn() },
+} satisfies Meta<typeof TextInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    play: async ({ args, canvasElement }) => {
+        const input = within(canvasElement).getByRole('textbox', { name: 'Project name' });
+        await userEvent.type(input, 'Demo');
+        await expect(args.onChange).toHaveBeenLastCalledWith(
+            'Demo',
+            expect.objectContaining({ source: 'user' }),
+        );
+    },
+};
+
+export const Invalid: Story = { args: { defaultValue: 'Review', invalid: true } };
+export const ReadOnly: Story = { args: { defaultValue: 'Example Project', readOnly: true } };
+export const Disabled: Story = { args: { defaultValue: 'Unavailable', disabled: true } };
diff --git a/Source/Common/TextInput.tsx b/Source/Common/TextInput.tsx
new file mode 100644
index 00000000..0e972da0
--- /dev/null
+++ b/Source/Common/TextInput.tsx
@@ -0,0 +1,90 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { forwardRef, type InputHTMLAttributes } from 'react';
+import type { ChangeHandler } from '../types/ChangeHandler';
+import type { ExactPartKeys } from '../types/ExactPartKeys';
+import type { PartsOf } from '../types/parts';
+
+/** Native text-like input types supported by {@link TextInput}. */
+export type TextInputType = 'text' | 'email' | 'password' | 'search' | 'tel' | 'url';
+
+/** Stable Cratis-owned parts for styling a {@link TextInput}. */
+export interface TextInputParts {
+    /** Native input element. */
+    root?: InputHTMLAttributes<HTMLInputElement>;
+}
+
+const textInputPartsMatchManifest: ExactPartKeys<
+    TextInputParts,
+    PartsOf<'TextInput'>
+> = true;
+void textInputPartsMatchManifest;
+
+/** Props for {@link TextInput}. */
+export interface TextInputProps extends Omit<
+    InputHTMLAttributes<HTMLInputElement>,
+    'onChange' | 'type'
+> {
+    /** Native text-like input type. Defaults to `text`. */
+    type?: TextInputType;
+    /** Marks the input invalid and exposes the canonical invalid state. */
+    invalid?: boolean;
+    /** Receives the next string value and native user-event metadata. */
+    onChange?: ChangeHandler<string>;
+    /** Cratis-owned per-part attributes. */
+    pt?: TextInputParts;
+}
+
+/** A native text input with semantic value changes and stable Components parts. */
+export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
+    function TextInput(
+        {
+            type = 'text',
+            invalid = false,
+            onChange,
+            pt,
+            className,
+            style,
+            disabled,
+            readOnly,
+            'aria-invalid': ariaInvalid,
+            ...nativeProps
+        },
+        ref,
+    ) {
+        const effectiveDisabled = disabled ?? pt?.root?.disabled;
+        const effectiveReadOnly = readOnly ?? pt?.root?.readOnly;
+        const effectiveAriaInvalid =
+            ariaInvalid ?? pt?.root?.['aria-invalid'] ?? (invalid || undefined);
+        const effectiveInvalid =
+            invalid || effectiveAriaInvalid === true || effectiveAriaInvalid === 'true';
+
+        return (
+            <input
+                {...pt?.root}
+                {...nativeProps}
+                ref={ref}
+                type={type}
+                disabled={effectiveDisabled}
+                readOnly={effectiveReadOnly}
+                aria-invalid={effectiveAriaInvalid}
+                onChange={(event) => {
+                    pt?.root?.onChange?.(event);
+                    onChange?.(event.currentTarget.value, {
+                        source: 'user',
+                        nativeEvent: event.nativeEvent,
+                    });
+                }}
+                className={['cratis-text-input', pt?.root?.className, className]
+                    .filter(Boolean)
+                    .join(' ')}
+                style={{ ...pt?.root?.style, ...style }}
+                data-cratis-part='root'
+                data-disabled={effectiveDisabled || undefined}
+                data-invalid={effectiveInvalid || undefined}
+                data-readonly={effectiveReadOnly || undefined}
+            />
+        );
+    },
+);
diff --git a/Source/Common/for_Checkbox/when_using_the_native_checkbox_contract.tsx b/Source/Common/for_Checkbox/when_using_the_native_checkbox_contract.tsx
new file mode 100644
index 00000000..e69a682c
--- /dev/null
+++ b/Source/Common/for_Checkbox/when_using_the_native_checkbox_contract.tsx
@@ -0,0 +1,104 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { act, createRef } from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { expect } from 'chai';
+import { describe, it, vi } from 'vitest';
+import { Checkbox } from '../Checkbox';
+import {
+    mountPrimitive,
+    unmountPrimitive,
+} from '../for_Primitives/given/a_primitive_dom';
+
+describe('when using the native Checkbox contract', () => {
+    it('should forward the input ref and emit a boolean with a real native event', async () => {
+        const ref = createRef<HTMLInputElement>();
+        const onChange = vi.fn();
+        const mounted = await mountPrimitive(
+            <Checkbox
+                ref={ref}
+                label='Include archived items'
+                name='archived'
+                value='yes'
+                onChange={onChange}
+                pt={{ box: { 'data-testid': 'checkbox-box' } }}
+            />,
+        );
+        try {
+            expect(ref.current).to.be.instanceOf(HTMLInputElement);
+            expect(ref.current?.type).to.equal('checkbox');
+            await act(async () => ref.current?.click());
+            expect(onChange.mock.calls[0][0]).to.equal(true);
+            expect(onChange.mock.calls[0][1]).to.include({ source: 'user' });
+            expect(onChange.mock.calls[0][1].nativeEvent).to.be.instanceOf(Event);
+            expect(
+                mounted.container.querySelector('[data-testid="checkbox-box"]'),
+            ).not.to.equal(null);
+        } finally {
+            await unmountPrimitive(mounted);
+        }
+    });
+
+    it('should preserve native submission, reset, and readonly successful-control behavior', async () => {
+        const mounted = await mountPrimitive(
+            <form>
+                <Checkbox
+                    label='Enabled'
+                    name='enabled'
+                    value='yes'
+                    defaultChecked
+                />
+                <Checkbox
+                    label='Locked'
+                    name='locked'
+                    value='kept'
+                    defaultChecked
+                    readOnly
+                />
+            </form>,
+        );
+        try {
+            const form = mounted.container.querySelector('form')!;
+            const [enabled, locked] = Array.from(
+                mounted.container.querySelectorAll<HTMLInputElement>('input'),
+            );
+            await act(async () => enabled.click());
+            expect(new FormData(form).has('enabled')).to.equal(false);
+            expect(new FormData(form).get('locked')).to.equal('kept');
+            await act(async () => locked.click());
+            expect(locked.checked).to.equal(true);
+            await act(async () => form.reset());
+            expect(enabled.checked).to.equal(true);
+        } finally {
+            await unmountPrimitive(mounted);
+        }
+    });
+
+    it('should expose the accessible label and every canonical state on stable parts in SSR', () => {
+        const html = renderToStaticMarkup(
+            <Checkbox label='Selected choice' checked disabled invalid readOnly />,
+        );
+        expect(html).to.contain('Selected choice');
+        const container = document.createElement('div');
+        container.innerHTML = html;
+        const elements = Array.from(
+            container.querySelectorAll<HTMLElement>('[data-cratis-part]'),
+        );
+        expect(elements.map((element) => element.dataset.cratisPart)).to.deep.equal([
+            'root',
+            'input',
+            'box',
+            'indicator',
+            'label',
+        ]);
+        for (const element of elements) {
+            expect(element.dataset.selected).to.equal('true');
+            expect(element.dataset.disabled).to.equal('true');
+            expect(element.dataset.invalid).to.equal('true');
+            expect(element.dataset.readonly).to.equal('true');
+        }
+    });
+});
diff --git a/Source/Common/for_IconButton/when_using_the_icon_button_contract.tsx b/Source/Common/for_IconButton/when_using_the_icon_button_contract.tsx
new file mode 100644
index 00000000..02932271
--- /dev/null
+++ b/Source/Common/for_IconButton/when_using_the_icon_button_contract.tsx
@@ -0,0 +1,60 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { createRef } from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { act } from 'react';
+import { expect } from 'chai';
+import { describe, it, vi } from 'vitest';
+import { IconButton } from '../IconButton';
+import {
+    mountPrimitive,
+    unmountPrimitive,
+} from '../for_Primitives/given/a_primitive_dom';
+
+describe('when using the IconButton contract', () => {
+    it('should forward the real button ref and keep Button as the only interaction owner', async () => {
+        const ref = createRef<HTMLButtonElement>();
+        const onClick = vi.fn();
+        const mounted = await mountPrimitive(
+            <IconButton
+                ref={ref}
+                icon={<span>+</span>}
+                aria-label='Add item'
+                onClick={onClick}
+                pt={{ root: { 'data-testid': 'icon-action' } }}
+            />,
+        );
+        try {
+            expect(ref.current).to.be.instanceOf(HTMLButtonElement);
+            expect(ref.current?.getAttribute('data-testid')).to.equal('icon-action');
+            expect(ref.current?.getAttribute('data-shape')).to.equal('pill');
+            expect(mounted.container.querySelectorAll('button')).to.have.lengthOf(1);
+            await act(async () => ref.current?.click());
+            expect(onClick.mock.calls).to.have.lengthOf(1);
+        } finally {
+            await unmountPrimitive(mounted);
+        }
+    });
+
+    it('should preserve semantic Button loading, disabled, tone, and part states during SSR', () => {
+        const html = renderToStaticMarkup(
+            <IconButton
+                icon={<span>!</span>}
+                aria-label='Stop operation'
+                loading
+                tone='critical'
+                variant='outline'
+            />,
+        );
+
+        expect(html).to.contain('aria-label="Stop operation"');
+        expect(html).to.contain('data-loading="true"');
+        expect(html).to.contain('data-disabled="true"');
+        expect(html).to.contain('data-tone="critical"');
+        expect(html).to.contain('data-variant="outline"');
+        expect(html).to.contain('data-cratis-part="spinner"');
+    });
+});
diff --git a/Source/Common/for_Primitives/given/a_primitive_dom.tsx b/Source/Common/for_Primitives/given/a_primitive_dom.tsx
new file mode 100644
index 00000000..5ce26c49
--- /dev/null
+++ b/Source/Common/for_Primitives/given/a_primitive_dom.tsx
@@ -0,0 +1,40 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { act, type ReactNode } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+
+export interface MountedPrimitive {
+    container: HTMLDivElement;
+    root: Root;
+}
+
+export const mountPrimitive = async (element: ReactNode): Promise<MountedPrimitive> => {
+    (
+        globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
+    ).IS_REACT_ACT_ENVIRONMENT = true;
+    const container = document.createElement('div');
+    document.body.append(container);
+    const root = createRoot(container);
+    await act(async () => root.render(element));
+    return { container, root };
+};
+
+export const unmountPrimitive = async ({ container, root }: MountedPrimitive) => {
+    await act(async () => root.unmount());
+    container.remove();
+};
+
+export const setNativeValue = async (
+    element: HTMLInputElement | HTMLTextAreaElement,
+    value: string,
+) => {
+    await act(async () => {
+        const prototype =
+            element instanceof HTMLTextAreaElement
+                ? HTMLTextAreaElement.prototype
+                : HTMLInputElement.prototype;
+        Object.getOwnPropertyDescriptor(prototype, 'value')!.set!.call(element, value);
+        element.dispatchEvent(new Event('input', { bubbles: true }));
+    });
+};
diff --git a/Source/Common/for_Radio/when_using_the_native_radio_contract.tsx b/Source/Common/for_Radio/when_using_the_native_radio_contract.tsx
new file mode 100644
index 00000000..8f3c6eb0
--- /dev/null
+++ b/Source/Common/for_Radio/when_using_the_native_radio_contract.tsx
@@ -0,0 +1,118 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { act, createRef } from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { expect } from 'chai';
+import { describe, it, vi } from 'vitest';
+import { Radio } from '../Radio';
+import {
+    mountPrimitive,
+    unmountPrimitive,
+} from '../for_Primitives/given/a_primitive_dom';
+
+describe('when using the native Radio contract', () => {
+    it('should let the browser own grouping while emitting native user metadata', async () => {
+        const ref = createRef<HTMLInputElement>();
+        const onChange = vi.fn();
+        const mounted = await mountPrimitive(
+            <form>
+                <Radio label='Daily' name='frequency' value='daily' defaultChecked />
+                <Radio
+                    ref={ref}
+                    label='Weekly'
+                    name='frequency'
+                    value='weekly'
+                    onChange={onChange}
+                    pt={{ indicator: { 'data-testid': 'weekly-indicator' } }}
+                />
+            </form>,
+        );
+        try {
+            const form = mounted.container.querySelector('form')!;
+            const first = mounted.container.querySelector<HTMLInputElement>(
+                'input[value="daily"]',
+            )!;
+            expect(ref.current).to.be.instanceOf(HTMLInputElement);
+            await act(async () => ref.current?.click());
+            expect(first.checked).to.equal(false);
+            expect(ref.current?.checked).to.equal(true);
+            expect(new FormData(form).get('frequency')).to.equal('weekly');
+            expect(onChange.mock.calls[0][0]).to.equal(true);
+            expect(onChange.mock.calls[0][1]).to.include({ source: 'user' });
+            expect(onChange.mock.calls[0][1].nativeEvent).to.be.instanceOf(Event);
+            expect(
+                mounted.container.querySelector('[data-testid="weekly-indicator"]'),
+            ).not.to.equal(null);
+            await act(async () => form.reset());
+            expect(first.checked).to.equal(true);
+            expect(ref.current?.checked).to.equal(false);
+        } finally {
+            await unmountPrimitive(mounted);
+        }
+    });
+
+    it('should keep a readonly checked option successful and unchanged', async () => {
+        const mounted = await mountPrimitive(
+            <form>
+                <Radio
+                    label='Fixed'
+                    name='choice'
+                    value='fixed'
+                    defaultChecked
+                    readOnly
+                />
+                <Radio label='Other' name='choice' value='other' />
+            </form>,
+        );
+        try {
+            const form = mounted.container.querySelector('form')!;
+            const [fixed, other] = Array.from(
+                mounted.container.querySelectorAll<HTMLInputElement>('input'),
+            );
+            await act(async () => fixed.click());
+            expect(fixed.checked).to.equal(true);
+            expect(other.checked).to.equal(false);
+            expect(new FormData(form).get('choice')).to.equal('fixed');
+        } finally {
+            await unmountPrimitive(mounted);
+        }
+    });
+
+    it('should expose accessible content and canonical selected states during SSR', () => {
+        const html = renderToStaticMarkup(
+            <Radio
+                label='Daily'
+                name='frequency'
+                value='daily'
+                checked
+                disabled
+                invalid
+                readOnly
+            />,
+        );
+        expect(html).to.contain('type="radio"');
+        expect(html).to.contain('name="frequency"');
+        expect(html).to.contain('value="daily"');
+        const container = document.createElement('div');
+        container.innerHTML = html;
+        const elements = Array.from(
+            container.querySelectorAll<HTMLElement>('[data-cratis-part]'),
+        );
+        expect(elements.map((element) => element.dataset.cratisPart)).to.deep.equal([
+            'root',
+            'input',
+            'box',
+            'indicator',
+            'label',
+        ]);
+        for (const element of elements) {
+            expect(element.dataset.selected).to.equal('true');
+            expect(element.dataset.disabled).to.equal('true');
+            expect(element.dataset.invalid).to.equal('true');
+            expect(element.dataset.readonly).to.equal('true');
+        }
+    });
+});
diff --git a/Source/Common/for_Surface/when_using_the_semantic_surface_contract.tsx b/Source/Common/for_Surface/when_using_the_semantic_surface_contract.tsx
new file mode 100644
index 00000000..2123c411
--- /dev/null
+++ b/Source/Common/for_Surface/when_using_the_semantic_surface_contract.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.
+
+// @vitest-environment jsdom
+
+import { createRef } from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { expect } from 'chai';
+import { describe, it } from 'vitest';
+import { Surface } from '../Surface';
+import {
+    mountPrimitive,
+    unmountPrimitive,
+} from '../for_Primitives/given/a_primitive_dom';
+
+describe('when using the semantic Surface contract', () => {
+    it('should render the bounded semantic element and forward a real HTMLElement ref', async () => {
+        const ref = createRef<HTMLElement>();
+        const mounted = await mountPrimitive(
+            <Surface
+                as='section'
+                ref={ref}
+                aria-label='Summary'
+                pt={{ root: { 'data-testid': 'summary-surface' } }}
+            >
+                Content
+            </Surface>,
+        );
+        try {
+            expect(ref.current).to.be.instanceOf(HTMLElement);
+            expect(ref.current?.tagName).to.equal('SECTION');
+            expect(ref.current?.getAttribute('data-testid')).to.equal('summary-surface');
+            expect(ref.current?.hasAttribute('data-selected')).to.equal(false);
+        } finally {
+            await unmountPrimitive(mounted);
+        }
+    });
+
+    it('should render a stable state-free root during SSR', () => {
+        const html = renderToStaticMarkup(
+            <Surface as='article' aria-label='Example article'>
+                Example content
+            </Surface>,
+        );
+        expect(html).to.contain('<article');
+        expect(html).to.contain('data-cratis-part="root"');
+        expect(html).to.contain('aria-label="Example article"');
+        expect(html).not.to.contain('data-selected=');
+        expect(html).not.to.contain('role=');
+    });
+});
diff --git a/Source/Common/for_Switch/when_using_the_native_switch_contract.tsx b/Source/Common/for_Switch/when_using_the_native_switch_contract.tsx
new file mode 100644
index 00000000..4e9435bb
--- /dev/null
+++ b/Source/Common/for_Switch/when_using_the_native_switch_contract.tsx
@@ -0,0 +1,101 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { act, createRef } from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { expect } from 'chai';
+import { describe, it, vi } from 'vitest';
+import { Switch } from '../Switch';
+import {
+    mountPrimitive,
+    unmountPrimitive,
+} from '../for_Primitives/given/a_primitive_dom';
+
+describe('when using the native Switch contract', () => {
+    it('should forward the checkbox ref and emit boolean native metadata', async () => {
+        const ref = createRef<HTMLInputElement>();
+        const onChange = vi.fn();
+        const mounted = await mountPrimitive(
+            <Switch
+                ref={ref}
+                label='Enable notifications'
+                name='notifications'
+                value='enabled'
+                onChange={onChange}
+                pt={{ control: { 'data-testid': 'switch-control' } }}
+            />,
+        );
+        try {
+            expect(ref.current).to.be.instanceOf(HTMLInputElement);
+            expect(ref.current?.type).to.equal('checkbox');
+            expect(ref.current?.getAttribute('role')).to.equal('switch');
+            await act(async () => ref.current?.click());
+            expect(onChange.mock.calls[0][0]).to.equal(true);
+            expect(onChange.mock.calls[0][1]).to.include({ source: 'user' });
+            expect(onChange.mock.calls[0][1].nativeEvent).to.be.instanceOf(Event);
+            expect(
+                mounted.container.querySelector('[data-testid="switch-control"]'),
+            ).not.to.equal(null);
+        } finally {
+            await unmountPrimitive(mounted);
+        }
+    });
+
+    it('should submit and reset as a native checkbox without swallowing name or value', async () => {
+        const mounted = await mountPrimitive(
+            <form>
+                <Switch
+                    label='Notifications'
+                    name='notifications'
+                    value='enabled'
+                    defaultChecked
+                />
+            </form>,
+        );
+        try {
+            const form = mounted.container.querySelector('form')!;
+            const input = mounted.container.querySelector('input')!;
+            expect(new FormData(form).get('notifications')).to.equal('enabled');
+            await act(async () => input.click());
+            expect(new FormData(form).has('notifications')).to.equal(false);
+            await act(async () => form.reset());
+            expect(input.checked).to.equal(true);
+        } finally {
+            await unmountPrimitive(mounted);
+        }
+    });
+
+    it('should expose switch accessibility and canonical states on every SSR part', () => {
+        const html = renderToStaticMarkup(
+            <Switch
+                label='Notifications'
+                checked
+                disabled
+                invalid
+                readOnly
+            />,
+        );
+        expect(html).to.contain('role="switch"');
+        expect(html).to.contain('Notifications');
+        const container = document.createElement('div');
+        container.innerHTML = html;
+        const elements = Array.from(
+            container.querySelectorAll<HTMLElement>('[data-cratis-part]'),
+        );
+        expect(elements.map((element) => element.dataset.cratisPart)).to.deep.equal([
+            'root',
+            'input',
+            'control',
+            'handle',
+            'label',
+        ]);
+        for (const element of elements) {
+            expect(element.dataset.selected).to.equal('true');
+            expect(element.dataset.disabled).to.equal('true');
+            expect(element.dataset.invalid).to.equal('true');
+            expect(element.dataset.readonly).to.equal('true');
+        }
+    });
+});
diff --git a/Source/Common/for_TextArea/when_using_the_native_textarea_contract.tsx b/Source/Common/for_TextArea/when_using_the_native_textarea_contract.tsx
new file mode 100644
index 00000000..8fa76bfb
--- /dev/null
+++ b/Source/Common/for_TextArea/when_using_the_native_textarea_contract.tsx
@@ -0,0 +1,78 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { createRef } from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { expect } from 'chai';
+import { act } from 'react';
+import { describe, it, vi } from 'vitest';
+import { TextArea } from '../TextArea';
+import {
+    mountPrimitive,
+    setNativeValue,
+    unmountPrimitive,
+} from '../for_Primitives/given/a_primitive_dom';
+
+describe('when using the native TextArea contract', () => {
+    it('should forward the textarea ref and emit semantic native metadata', async () => {
+        const ref = createRef<HTMLTextAreaElement>();
+        const onChange = vi.fn();
+        const mounted = await mountPrimitive(
+            <TextArea
+                ref={ref}
+                aria-label='Notes'
+                onChange={onChange}
+                pt={{ root: { 'data-testid': 'notes-input' } }}
+            />,
+        );
+        try {
+            const textarea = ref.current;
+            if (!textarea) throw new Error('TextArea did not forward its textarea ref.');
+            await setNativeValue(textarea, 'Repository-owned notes');
+            expect(textarea.getAttribute('data-testid')).to.equal('notes-input');
+            expect(onChange.mock.calls[0][0]).to.equal('Repository-owned notes');
+            expect(onChange.mock.calls[0][1]).to.include({ source: 'user' });
+            expect(onChange.mock.calls[0][1].nativeEvent).to.be.instanceOf(Event);
+        } finally {
+            await unmountPrimitive(mounted);
+        }
+    });
+
+    it('should submit and reset through native form behavior while uncontrolled', async () => {
+        const mounted = await mountPrimitive(
+            <form>
+                <TextArea name='notes' defaultValue='Initial notes' aria-label='Notes' />
+            </form>,
+        );
+        try {
+            const form = mounted.container.querySelector('form')!;
+            const textarea = mounted.container.querySelector('textarea')!;
+            await setNativeValue(textarea, 'Changed notes');
+            expect(new FormData(form).get('notes')).to.equal('Changed notes');
+            await act(async () => form.reset());
+            expect(textarea.value).to.equal('Initial notes');
+        } finally {
+            await unmountPrimitive(mounted);
+        }
+    });
+
+    it('should expose accessibility, pt, canonical states, and semantic SSR markup', () => {
+        const html = renderToStaticMarkup(
+            <TextArea
+                aria-label='Notes'
+                pt={{ root: { id: 'notes' } }}
+                disabled
+                invalid
+                readOnly
+            />,
+        );
+        expect(html).to.contain('<textarea');
+        expect(html).to.contain('id="notes"');
+        expect(html).to.contain('data-disabled="true"');
+        expect(html).to.contain('data-invalid="true"');
+        expect(html).to.contain('data-readonly="true"');
+        expect(html).to.contain('aria-label="Notes"');
+    });
+});
diff --git a/Source/Common/for_TextInput/when_using_the_native_text_input_contract.tsx b/Source/Common/for_TextInput/when_using_the_native_text_input_contract.tsx
new file mode 100644
index 00000000..60edd385
--- /dev/null
+++ b/Source/Common/for_TextInput/when_using_the_native_text_input_contract.tsx
@@ -0,0 +1,78 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { createRef } from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { expect } from 'chai';
+import { act } from 'react';
+import { describe, it, vi } from 'vitest';
+import { TextInput } from '../TextInput';
+import {
+    mountPrimitive,
+    setNativeValue,
+    unmountPrimitive,
+} from '../for_Primitives/given/a_primitive_dom';
+
+describe('when using the native TextInput contract', () => {
+    it('should forward the input ref, emit semantic native metadata, and honor pt', async () => {
+        const ref = createRef<HTMLInputElement>();
+        const onChange = vi.fn();
+        const mounted = await mountPrimitive(
+            <TextInput
+                ref={ref}
+                aria-label='Project name'
+                onChange={onChange}
+                pt={{ root: { 'data-testid': 'project-input' } }}
+            />,
+        );
+        try {
+            const input = ref.current;
+            if (!input) throw new Error('TextInput did not forward its input ref.');
+            await setNativeValue(input, 'Example Project');
+            expect(input.getAttribute('data-testid')).to.equal('project-input');
+            expect(onChange.mock.calls[0][0]).to.equal('Example Project');
+            expect(onChange.mock.calls[0][1]).to.include({ source: 'user' });
+            expect(onChange.mock.calls[0][1].nativeEvent).to.be.instanceOf(Event);
+        } finally {
+            await unmountPrimitive(mounted);
+        }
+    });
+
+    it('should participate in native form submission and reset while uncontrolled', async () => {
+        const mounted = await mountPrimitive(
+            <form>
+                <TextInput name='project' defaultValue='Initial' aria-label='Project' />
+            </form>,
+        );
+        try {
+            const form = mounted.container.querySelector('form')!;
+            const input = mounted.container.querySelector('input')!;
+            await setNativeValue(input, 'Changed');
+            expect(new FormData(form).get('project')).to.equal('Changed');
+            await act(async () => form.reset());
+            expect(input.value).to.equal('Initial');
+        } finally {
+            await unmountPrimitive(mounted);
+        }
+    });
+
+    it('should expose native accessibility and canonical states during SSR', () => {
+        const html = renderToStaticMarkup(
+            <TextInput
+                aria-label='Project name'
+                defaultValue='Example'
+                disabled
+                invalid
+                readOnly
+            />,
+        );
+        expect(html).to.contain('data-cratis-part="root"');
+        expect(html).to.contain('data-disabled="true"');
+        expect(html).to.contain('data-invalid="true"');
+        expect(html).to.contain('data-readonly="true"');
+        expect(html).to.contain('aria-invalid="true"');
+        expect(html).to.contain('aria-label="Project name"');
+    });
+});
diff --git a/Source/Common/index.ts b/Source/Common/index.ts
index bd48387d..77f1511f 100644
--- a/Source/Common/index.ts
+++ b/Source/Common/index.ts
@@ -11,3 +11,10 @@ export * from './Page';
 export * from './FormElement';
 export * from './Tooltip';
 export * from './Button';
+export * from './Checkbox';
+export * from './IconButton';
+export * from './Radio';
+export * from './Surface';
+export * from './Switch';
+export * from './TextArea';
+export * from './TextInput';
diff --git a/Source/Common/useNativeCheckedState.ts b/Source/Common/useNativeCheckedState.ts
new file mode 100644
index 00000000..bb28c798
--- /dev/null
+++ b/Source/Common/useNativeCheckedState.ts
@@ -0,0 +1,54 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { useCallback, useEffect, useRef, useState, type ForwardedRef } from 'react';
+
+const assignRef = <T,>(ref: ForwardedRef<T>, value: T | null) => {
+    if (typeof ref === 'function') ref(value);
+    else if (ref) ref.current = value;
+};
+
+/** Keeps canonical state attributes aligned with an uncontrolled native checkable input. */
+export const useNativeCheckedState = (
+    checked: boolean | undefined,
+    defaultChecked: boolean | undefined,
+    forwardedRef: ForwardedRef<HTMLInputElement>,
+    observeRadioGroup = false,
+) => {
+    const inputRef = useRef<HTMLInputElement>(null);
+    const [uncontrolledChecked, setUncontrolledChecked] = useState(
+        Boolean(defaultChecked),
+    );
+    const controlled = checked !== undefined;
+
+    const ref = useCallback(
+        (input: HTMLInputElement | null) => {
+            inputRef.current = input;
+            assignRef(forwardedRef, input);
+        },
+        [forwardedRef],
+    );
+
+    useEffect(() => {
+        const input = inputRef.current;
+        if (!input || controlled) return;
+        const synchronize = () => queueMicrotask(() => setUncontrolledChecked(input.checked));
+        const form = input.form;
+        form?.addEventListener('reset', synchronize);
+        if (observeRadioGroup)
+            input.ownerDocument.addEventListener('change', synchronize);
+        return () => {
+            form?.removeEventListener('reset', synchronize);
+            if (observeRadioGroup)
+                input.ownerDocument.removeEventListener('change', synchronize);
+        };
+    }, [controlled, observeRadioGroup]);
+
+    return {
+        ref,
+        selected: checked ?? uncontrolledChecked,
+        synchronize: (nextChecked: boolean) => {
+            if (!controlled) setUncontrolledChecked(nextChecked);
+        },
+    };
+};
diff --git a/Source/for_accessibility/when_scanning_foundation_surfaces.tsx b/Source/for_accessibility/when_scanning_foundation_surfaces.tsx
index b073298c..6b88c84c 100644
--- a/Source/for_accessibility/when_scanning_foundation_surfaces.tsx
+++ b/Source/for_accessibility/when_scanning_foundation_surfaces.tsx
@@ -9,8 +9,15 @@ import axe from 'axe-core';
 import { expect } from 'chai';
 import { afterEach, beforeEach, describe, it } from 'vitest';
 import { Button } from '../Common/Button';
+import { Checkbox } from '../Common/Checkbox';
 import { CratisComponentsProvider } from '../Common/CratisComponentsProvider';
 import { DatePickerInput } from '../Common/DatePickerInput';
+import { IconButton } from '../Common/IconButton';
+import { Radio } from '../Common/Radio';
+import { Surface } from '../Common/Surface';
+import { Switch } from '../Common/Switch';
+import { TextArea } from '../Common/TextArea';
+import { TextInput } from '../Common/TextInput';
 import { Column } from '../DataTables/Column';
 import { DataTableCore } from '../DataTables/DataTableCore';
 import { Dropdown } from '../Dropdown/Dropdown';
@@ -32,6 +39,17 @@ describe('when scanning representative foundation surfaces', () => {
             root.render(
                 <CratisComponentsProvider value={{ locale: 'en-US' }}>
                     <main>
+                        <Surface as='section' aria-label='Basic controls'>
+                            <TextInput aria-label='Display name' />
+                            <TextArea aria-label='Notes' />
+                            <Checkbox label='Include archived items' />
+                            <Radio label='Daily' name='frequency' value='daily' />
+                            <Switch label='Enable notifications' />
+                            <IconButton
+                                icon={<span aria-hidden='true'>+</span>}
+                                aria-label='Add item'
+                            />
+                        </Surface>
                         <Button label='Save' />
                         <Dropdown
                             aria-label='Role'
diff --git a/Source/scripts/generate-parts.mjs b/Source/scripts/generate-parts.mjs
index f753bce0..b46ea47c 100644
--- a/Source/scripts/generate-parts.mjs
+++ b/Source/scripts/generate-parts.mjs
@@ -167,6 +167,40 @@ export const partDefinitions = {
         aliasOf: 'Button',
         sources: ['Common/ActionMenubar.tsx'],
     },
+    IconButton: {
+        aliasOf: 'Button',
+        sources: ['Common/IconButton.tsx'],
+    },
+    TextInput: {
+        parts: ['root'],
+        sources: ['Common/TextInput.tsx'],
+        ptKeys: ['root'],
+    },
+    TextArea: {
+        parts: ['root'],
+        sources: ['Common/TextArea.tsx'],
+        ptKeys: ['root'],
+    },
+    Checkbox: {
+        parts: ['root', 'input', 'box', 'indicator', 'label'],
+        sources: ['Common/Checkbox.tsx'],
+        ptKeys: ['root', 'input', 'box', 'indicator', 'label'],
+    },
+    Radio: {
+        parts: ['root', 'input', 'box', 'indicator', 'label'],
+        sources: ['Common/Radio.tsx'],
+        ptKeys: ['root', 'input', 'box', 'indicator', 'label'],
+    },
+    Switch: {
+        parts: ['root', 'input', 'control', 'handle', 'label'],
+        sources: ['Common/Switch.tsx'],
+        ptKeys: ['root', 'input', 'control', 'handle', 'label'],
+    },
+    Surface: {
+        parts: ['root'],
+        sources: ['Common/Surface.tsx'],
+        ptKeys: ['root'],
+    },
     Tooltip: {
         parts: ['trigger', 'popup'],
         sources: ['Common/Tooltip.tsx'],
@@ -527,6 +561,36 @@ export const partStateDefinitions = {
         icon: [],
         label: [],
     },
+    TextInput: {
+        root: ['disabled', 'invalid', 'readonly'],
+    },
+    TextArea: {
+        root: ['disabled', 'invalid', 'readonly'],
+    },
+    Checkbox: {
+        root: ['disabled', 'selected', 'invalid', 'readonly'],
+        input: ['disabled', 'selected', 'invalid', 'readonly'],
+        box: ['disabled', 'selected', 'invalid', 'readonly'],
+        indicator: ['disabled', 'selected', 'invalid', 'readonly'],
+        label: ['disabled', 'selected', 'invalid', 'readonly'],
+    },
+    Radio: {
+        root: ['disabled', 'selected', 'invalid', 'readonly'],
+        input: ['disabled', 'selected', 'invalid', 'readonly'],
+        box: ['disabled', 'selected', 'invalid', 'readonly'],
+        indicator: ['disabled', 'selected', 'invalid', 'readonly'],
+        label: ['disabled', 'selected', 'invalid', 'readonly'],
+    },
+    Switch: {
+        root: ['disabled', 'selected', 'invalid', 'readonly'],
+        input: ['disabled', 'selected', 'invalid', 'readonly'],
+        control: ['disabled', 'selected', 'invalid', 'readonly'],
+        handle: ['disabled', 'selected', 'invalid', 'readonly'],
+        label: ['disabled', 'selected', 'invalid', 'readonly'],
+    },
+    Surface: {
+        root: [],
+    },
     Tooltip: {
         trigger: [],
         popup: ['open'],
diff --git a/Source/scripts/verify-parts-manifest.mjs b/Source/scripts/verify-parts-manifest.mjs
index dec97a24..25eca046 100644
--- a/Source/scripts/verify-parts-manifest.mjs
+++ b/Source/scripts/verify-parts-manifest.mjs
@@ -638,9 +638,9 @@ function verifyPublicPtContracts() {
             `Public pt file inventory differs: source=[${actualFiles.join(', ')}], manifest=[${expectedFiles.join(', ')}].`,
         );
     }
-    if (actualFiles.length !== 38 || declarationCount !== 41) {
+    if (actualFiles.length !== 45 || declarationCount !== 48) {
         problems.push(
-            `Expected the authoritative 38 pt files / 41 declarations, found ${actualFiles.length} files / ${declarationCount} declarations.`,
+            `Expected the authoritative 45 pt files / 48 declarations, found ${actualFiles.length} files / ${declarationCount} declarations.`,
         );
     }
     return problems;
@@ -874,7 +874,7 @@ function main() {
         0,
     );
     console.log(
-        `Parts manifest verified: ${componentCount} components, ${partCount} component parts, ${stateCount} component/part states, 38 pt files, and 41 pt declarations.`,
+        `Parts manifest verified: ${componentCount} components, ${partCount} component parts, ${stateCount} component/part states, 45 pt files, and 48 pt declarations.`,
     );
 }
 
diff --git a/Source/styles.css b/Source/styles.css
index bc9556a9..dbcede06 100644
--- a/Source/styles.css
+++ b/Source/styles.css
@@ -52,6 +52,7 @@
 @import './Common/Button.css';
 @import './Common/DatePickerInput.css';
 @import './Common/FormElement.css';
+@import './Common/Primitives.css';
 @import './Common/Tooltip.css';
 @import './DataTables/ColumnFilterMenu.css';
 @import './DataTables/DataTableCore.css';
diff --git a/Source/types/parts.ts b/Source/types/parts.ts
index 6f333774..db73e8e0 100644
--- a/Source/types/parts.ts
+++ b/Source/types/parts.ts
@@ -24,6 +24,13 @@ export const cratisParts = {
     CalendarField: ['root', 'group', 'input', 'segment', 'placeholder', 'trigger', 'popover', 'dialog', 'calendar', 'header', 'previous', 'heading', 'next', 'grid', 'cell', 'button-bar', 'today', 'clear'],
     Button: ['root', 'spinner', 'icon', 'label'],
     ActionMenubar: ['root', 'spinner', 'icon', 'label'],
+    IconButton: ['root', 'spinner', 'icon', 'label'],
+    TextInput: ['root'],
+    TextArea: ['root'],
+    Checkbox: ['root', 'input', 'box', 'indicator', 'label'],
+    Radio: ['root', 'input', 'box', 'indicator', 'label'],
+    Switch: ['root', 'input', 'control', 'handle', 'label'],
+    Surface: ['root'],
     Tooltip: ['trigger', 'popup'],
     Dialog: ['backdrop', 'positioner', 'root', 'header', 'title', 'close', 'content', 'busy-scope', 'footer', 'confirm', 'cancel'],
     CommandDialog: ['backdrop', 'positioner', 'root', 'header', 'title', 'close', 'content', 'busy-scope', 'footer', 'confirm', 'cancel'],
@@ -221,6 +228,42 @@ export const cratisPartStates = {
         'icon': [],
         'label': [],
     },
+    IconButton: {
+        'root': ['disabled', 'loading'],
+        'spinner': [],
+        'icon': [],
+        'label': [],
+    },
+    TextInput: {
+        'root': ['disabled', 'invalid', 'readonly'],
+    },
+    TextArea: {
+        'root': ['disabled', 'invalid', 'readonly'],
+    },
+    Checkbox: {
+        'root': ['disabled', 'selected', 'invalid', 'readonly'],
+        'input': ['disabled', 'selected', 'invalid', 'readonly'],
+        'box': ['disabled', 'selected', 'invalid', 'readonly'],
+        'indicator': ['disabled', 'selected', 'invalid', 'readonly'],
+        'label': ['disabled', 'selected', 'invalid', 'readonly'],
+    },
+    Radio: {
+        'root': ['disabled', 'selected', 'invalid', 'readonly'],
+        'input': ['disabled', 'selected', 'invalid', 'readonly'],
+        'box': ['disabled', 'selected', 'invalid', 'readonly'],
+        'indicator': ['disabled', 'selected', 'invalid', 'readonly'],
+        'label': ['disabled', 'selected', 'invalid', 'readonly'],
+    },
+    Switch: {
+        'root': ['disabled', 'selected', 'invalid', 'readonly'],
+        'input': ['disabled', 'selected', 'invalid', 'readonly'],
+        'control': ['disabled', 'selected', 'invalid', 'readonly'],
+        'handle': ['disabled', 'selected', 'invalid', 'readonly'],
+        'label': ['disabled', 'selected', 'invalid', 'readonly'],
+    },
+    Surface: {
+        'root': [],
+    },
     Tooltip: {
         'trigger': [],
         'popup': ['open'],

From 00a92e4c63e72ed2f61090f474ee2ad239b6d2a4 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 19:40:24 +0200
Subject: [PATCH 173/267] Document Common basic control contracts

---
 Documentation/Common/basic-controls.md        | 68 +++++++++++++++++++
 Documentation/Common/index.md                 |  5 ++
 Documentation/Common/toc.yml                  |  2 +
 Documentation/Styling/pass-through.md         |  7 +-
 Documentation/choosing-a-component.md         |  2 +-
 .../0002-component-classification.md          |  9 ++-
 6 files changed, 90 insertions(+), 3 deletions(-)
 create mode 100644 Documentation/Common/basic-controls.md

diff --git a/Documentation/Common/basic-controls.md b/Documentation/Common/basic-controls.md
new file mode 100644
index 00000000..374ec1b6
--- /dev/null
+++ b/Documentation/Common/basic-controls.md
@@ -0,0 +1,68 @@
+---
+title: Basic controls
+description: Native Components-owned inputs, choices, icon actions, and semantic surfaces.
+---
+
+The `Common` subpath provides native basic controls for ordinary React state and browser forms. They expose real element refs, standard native attributes, semantic value callbacks, stable parts, and canonical state attributes without an Arc command binding.
+
+```tsx
+import {
+    Checkbox,
+    IconButton,
+    Radio,
+    Surface,
+    Switch,
+    TextArea,
+    TextInput,
+} from '@cratis/components/Common';
+
+<Surface as='section' aria-label='Preferences'>
+    <TextInput
+        name='displayName'
+        aria-label='Display name'
+        defaultValue='Sample User'
+        onChange={(value) => console.log(value)}
+    />
+    <TextArea name='notes' aria-label='Notes' />
+    <Checkbox name='updates' value='email' label='Email updates' />
+    <Radio name='frequency' value='daily' label='Daily' />
+    <Switch name='notifications' value='enabled' label='Enable notifications' />
+    <IconButton icon={<span aria-hidden='true'>+</span>} aria-label='Add preference' />
+</Surface>
+```
+
+## API reference
+
+| Component | Native element and ref | Semantic value | Stable parts | Canonical states |
+| --- | --- | --- | --- | --- |
+| `IconButton` | `button` / `HTMLButtonElement` | Uses `Button` click semantics | `root`, `spinner`, `icon`, `label` | `disabled`, `loading` on `root` |
+| `TextInput` | `input` / `HTMLInputElement` | `string` | `root` | `disabled`, `invalid`, `readonly` |
+| `TextArea` | `textarea` / `HTMLTextAreaElement` | `string` | `root` | `disabled`, `invalid`, `readonly` |
+| `Checkbox` | `input[type=checkbox]` / `HTMLInputElement` | `boolean` | `root`, `input`, `box`, `indicator`, `label` | `selected`, `disabled`, `invalid`, `readonly` |
+| `Radio` | one `input[type=radio]` / `HTMLInputElement` | `boolean` when checked | `root`, `input`, `box`, `indicator`, `label` | `selected`, `disabled`, `invalid`, `readonly` |
+| `Switch` | `input[type=checkbox][role=switch]` / `HTMLInputElement` | `boolean` | `root`, `input`, `control`, `handle`, `label` | `selected`, `disabled`, `invalid`, `readonly` |
+| `Surface` | `div`, `section`, or `article` / `HTMLElement` | none | `root` | none |
+
+`IconButton` requires `aria-label` and delegates to `Button`; it does not add another button or interaction layer. It accepts the same semantic `variant`, `tone`, `shape`, `size`, `loading`, and `disabled` props as `Button`.
+
+`TextInput` accepts the native text-like types `text`, `email`, `password`, `search`, `tel`, and `url`. `TextInput` and `TextArea` preserve native controlled (`value`) and uncontrolled (`defaultValue`) behavior.
+
+`Radio` represents exactly one native option. Give related options the same `name`; the browser owns grouping. Components does not add radio-group state or keyboard orchestration.
+
+## Change metadata
+
+Each value control uses `ChangeHandler<T>`:
+
+```ts
+onChange?: (value: T, meta?: ChangeMeta) => void;
+```
+
+A user change supplies `{ source: 'user', nativeEvent }`, where `nativeEvent` is the real browser `Event`. The optional second argument keeps a one-argument callback, including a React state setter, directly assignable.
+
+## Native forms and read-only choices
+
+The controls preserve `name`, `value`, `form`, `checked`, `defaultChecked`, `value`, and `defaultValue` on the real native element. Uncontrolled controls therefore submit and reset through browser form behavior.
+
+HTML does not define native read-only behavior for checkboxes and radios. `Checkbox`, `Radio`, and `Switch` keep a read-only selected control enabled so its `name` and `value` still submit, expose the canonical `data-readonly` state, and prevent user toggling. `Checkbox` and `Switch` additionally expose supported `aria-readonly` semantics; native radio does not allow that ARIA attribute. Use `disabled` instead when the control must be excluded from submission.
+
+For progress UI, use `ProgressBar` and its existing `ProgressBarProps` contract from `@cratis/components/Display`; `Common` does not define a second progress component.
diff --git a/Documentation/Common/index.md b/Documentation/Common/index.md
index c9b38f24..0926ffef 100644
--- a/Documentation/Common/index.md
+++ b/Documentation/Common/index.md
@@ -5,6 +5,10 @@ The Common module provides reusable UI components and the styling setup primitiv
 ## Components
 
 - **CratisComponentsProvider**: Locale, Components-owned labels, and optional app-wide toaster.
+- **TextInput / TextArea**: Native text controls with semantic string changes and real element refs.
+- **Checkbox / Radio / Switch**: Native form choices with semantic boolean changes and browser-owned submission and reset behavior.
+- **Button / IconButton**: Native actions with semantic variants, tones, loading, and disabled behavior.
+- **Surface**: A bounded `div`, `section`, or `article` container with no invented interaction state.
 - **Icon / IconDisplay**: Unified icon type that accepts a CSS class string or any React node.
 - **Page**: Layout primitive for consistent page structures.
 - **FormElement**: Lightweight wrapper that places an icon addon to the left of a form input.
@@ -12,6 +16,7 @@ The Common module provides reusable UI components and the styling setup primitiv
 
 ## See Also
 
+- [Basic controls](basic-controls.md) — native form, ref, change, part, and state contracts
 - [CratisComponentsProvider](cratis-components-provider.md) — locale, labels, and toaster configuration
 - [Icon](icon.md) - Icon type and IconDisplay component
 - [Page](page.md) - Page layout component
diff --git a/Documentation/Common/toc.yml b/Documentation/Common/toc.yml
index f7906fbc..c99986f1 100644
--- a/Documentation/Common/toc.yml
+++ b/Documentation/Common/toc.yml
@@ -2,6 +2,8 @@
   href: index.md
 - name: CratisComponentsProvider
   href: cratis-components-provider.md
+- name: Basic controls
+  href: basic-controls.md
 - name: Icon
   href: icon.md
 - name: Page
diff --git a/Documentation/Styling/pass-through.md b/Documentation/Styling/pass-through.md
index adb158ee..f33f8b01 100644
--- a/Documentation/Styling/pass-through.md
+++ b/Documentation/Styling/pass-through.md
@@ -27,7 +27,11 @@ They are documented separately because not every DOM part needs a `pt` key, and
 
 | Component/type                              | Typed `pt` keys                                                                                                                                                                        | Element types                                                 |
 | ------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- |
-| `ButtonParts`                               | `root`, `icon`, `label`, `spinner`                                                                                                                                                     | button, spans                                                 |
+| `ButtonParts` / `IconButtonParts`           | `root`, `icon`, `label`, `spinner`                                                                                                                                                     | button, spans                                                 |
+| `TextInputParts` / `TextAreaParts`           | `root`                                                                                                                                                                                 | native input or textarea                                      |
+| `CheckboxParts` / `RadioParts`               | `root`, `input`, `box`, `indicator`, `label`                                                                                                                                           | label, native input, spans                                    |
+| `SwitchParts`                                | `root`, `input`, `control`, `handle`, `label`                                                                                                                                          | label, native input, spans                                    |
+| `SurfaceParts`                               | `root`                                                                                                                                                                                 | div, section, or article                                     |
 | `DialogParts`                               | `backdrop`, `positioner`, `root`, `header`, `title`, `close`, `content`, `footer`, `confirm`, `cancel`                                                                                 | divs/header/heading/footer/buttons                            |
 | `DropdownParts`                             | `root`, `input`, `select`, `trigger`, `value`, `clear`, `indicator`, `popover`, `listbox`, `option`, `filter`, `multiple`                                                              | wrapper, input/button, spans, popover/listbox/options, select |
 | `DatePickerInputPassThrough`                | `root`, `group`, `input`, `placeholder`, `segment`, `trigger`, `popover`, `dialog`, `calendar`, `header`, `heading`, `previous`, `next`, `grid`, `cell`, `buttonBar`, `today`, `clear` | divs, segmented field, buttons, calendar grid/cells           |
@@ -75,6 +79,7 @@ Use the exact kebab-case value in CSS or tests:
 | Surface        | `data-cratis-part` values                                                                                                                                                                                                                                                                                              |
 | -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | Button         | `root`, `icon`, `label`, `spinner`                                                                                                                                                                                                                                                                                     |
+| Basic controls | text inputs and surfaces use `root`; choices use `root`, `input`, `label`, plus `box`/`indicator` or `control`/`handle`                                                                                                                              |
 | Dialog         | `backdrop`, `positioner`, `root`, `header`, `title`, `close`, `content`, `footer`, `confirm`, `cancel`                                                                                                                                                                                                                 |
 | Dropdown       | `root`, `trigger`, `value`, `clear`, `indicator`, `filter`, `popover`, `listbox`, `option`, `multiple`                                                                                                                                                                                                                 |
 | DatePicker     | `root`, `group`, `input`, `placeholder`, `segment`, `trigger`, `popover`, `dialog`, `calendar`, `header`, `heading`, `previous`, `next`, `grid`, `cell`, `button-bar`, `today`, `clear`                                                                                                                                |
diff --git a/Documentation/choosing-a-component.md b/Documentation/choosing-a-component.md
index 78b0f1d9..b5cb07c3 100644
--- a/Documentation/choosing-a-component.md
+++ b/Documentation/choosing-a-component.md
@@ -17,7 +17,7 @@ The question is whether confirming the form **runs a command**, and whether it's
 | Run a command, but gather input across **named steps**   | [`StepperCommandDialog`](./StepperCommandDialog/index.md) | A wizard over a single command — validate per step, navigate back and forth, execute at the end.      |
 | Embed command fields **in a page**, not a dialog         | [`CommandForm`](./CommandForm/index.md)                   | The same typed fields `CommandDialog` uses, without the dialog chrome.                                |
 | Collect data and return it **without** running a command | [`Dialog`](./Dialogs/index.md)                            | A confirmation or data-entry dialog that hands values back to the caller. No command involved.        |
-| Edit ordinary local React state                          | Native/product controls                                   | CommandForm fields bind generated command properties; they are not a general local-state input suite. |
+| Edit ordinary local React state                          | [`Common` basic controls](./Common/basic-controls.md)      | Native text and choice controls expose semantic values without binding an Arc command.                 |
 
 Rule of thumb: **if confirming the dialog executes a generated command, it's a `CommandDialog`** (or its
 stepper variant). If it just gathers values and returns them, it's a `Dialog`. Never reach for
diff --git a/Documentation/decisions/0002-component-classification.md b/Documentation/decisions/0002-component-classification.md
index 2e0a033c..87978ce2 100644
--- a/Documentation/decisions/0002-component-classification.md
+++ b/Documentation/decisions/0002-component-classification.md
@@ -55,6 +55,7 @@ The inventory follows the setup root and every JavaScript component subpath in `
 | `Chat` | `ChatSidebar` | Arc/high-order composite |
 | `Chat` | `ChatSidebarForObservableQueries` | Arc/high-order composite |
 | `Chat` | `ChatTopicList` | Arc/high-order composite |
+| `Common` | `Checkbox` | visual primitive |
 | `CommandForm` | `CheckboxField` | Arc/high-order composite |
 | `Display` | `Chip` | visual primitive |
 | `CommandForm` | `ChipsField` | Arc/high-order composite |
@@ -80,6 +81,7 @@ The inventory follows the setup root and every JavaScript component subpath in `
 | `Filter` | `FilterEditor` | Arc/high-order composite |
 | `Filter` | `FilterPanel` | Arc/high-order composite |
 | `Common` | `FormElement` | visual primitive |
+| `Common` | `IconButton` | visual primitive |
 | `Common` | `IconDisplay` | visual primitive |
 | `CommandForm` | `InputTextField` | Arc/high-order composite |
 | `Canvas` | `MentionSuggestions` | interaction primitive |
@@ -99,6 +101,7 @@ The inventory follows the setup root and every JavaScript component subpath in `
 | `Display` | `ProgressBar` | visual primitive |
 | `Display` | `ProgressSpinner` | visual primitive |
 | `TimeMachine` | `Properties` | Arc/high-order composite |
+| `Common` | `Radio` | visual primitive |
 | `CommandForm` | `RadioButtonField` | Arc/high-order composite |
 | `CommandForm` | `RadioGroupField` | Arc/high-order composite |
 | `Filter` | `RangeHistogramFilter` | interaction primitive |
@@ -111,9 +114,13 @@ The inventory follows the setup root and every JavaScript component subpath in `
 | `CommandForm` | `SliderField` | Arc/high-order composite |
 | `CommandDialog` | `StepperCommandDialog` | Arc/high-order composite |
 | `CommandDialog` | `StepperPanel` | Arc/high-order composite |
+| `Common` | `Surface` | visual primitive |
+| `Common` | `Switch` | visual primitive |
 | `DataTables` | `TablePaginator` | Arc/high-order composite |
 | `Display` | `Tag` | visual primitive |
+| `Common` | `TextArea` | visual primitive |
 | `CommandForm` | `TextAreaField` | Arc/high-order composite |
+| `Common` | `TextInput` | visual primitive |
 | `TimeMachine` | `TimeMachine` | Arc/high-order composite |
 | `Notifications` | `Toaster` | Arc/high-order composite |
 | `CommandForm` | `ToggleSwitchField` | Arc/high-order composite |
@@ -131,7 +138,7 @@ The inventory follows the setup root and every JavaScript component subpath in `
 | `Common` | `Tooltip` | interaction primitive |
 | `Canvas` | `TypingIndicator` | visual primitive |
 
-The accepted inventory contains 14 visual primitives, 12 interaction primitives, 71 Arc/high-order composites, and no interop-only components.
+The accepted inventory contains 21 visual primitives, 12 interaction primitives, 71 Arc/high-order composites, and no interop-only components.
 
 Exported types and interfaces, helpers and hooks, events and messages, enum and configuration values, registries, and React context values are not components and are excluded. Examples include `CanvasItemRegistryContext`, `DialogInitialFocus`, `ChatMessageAdded`, `NoteTextChanged`, `toast`, `useFilterState`, and the `*Props`, event, label, parts, and model types.
 

From 15273656d7044a1f4956be29940b4d9fb35f6be9 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 19:45:30 +0200
Subject: [PATCH 174/267] Format renderer graph verification

---
 Source/scripts/verify-package-graph.mjs | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/Source/scripts/verify-package-graph.mjs b/Source/scripts/verify-package-graph.mjs
index 0a0d3266..fd8fdf8b 100644
--- a/Source/scripts/verify-package-graph.mjs
+++ b/Source/scripts/verify-package-graph.mjs
@@ -195,9 +195,7 @@ const rendererVendorImporters = [];
         if (!isSpatialFile && specifiers.some(isPixiSpecifier)) {
             directPixiImporters.push(relative);
         }
-        for (const specifier of new Set(
-            specifiers.filter(isRendererVendorSpecifier),
-        )) {
+        for (const specifier of new Set(specifiers.filter(isRendererVendorSpecifier))) {
             rendererVendorImporters.push({
                 file: relative,
                 specifier,
@@ -224,11 +222,7 @@ for (const importer of rendererVendorImporters) {
 const componentImplementationDirectories = [
     ...new Set(
         jsSubpaths.flatMap(({ subpath, jsEntry }) => {
-            if (
-                subpath === '.' ||
-                subpath === './renderer' ||
-                subpath === './types'
-            )
+            if (subpath === '.' || subpath === './renderer' || subpath === './types')
                 return [];
             const relative = path.relative(esmRoot, jsEntry).split(path.sep).join('/');
             const separator = relative.indexOf('/');

From 174217a42b705e47705eb09c4f4947769836c912 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 19:48:01 +0200
Subject: [PATCH 175/267] Add standalone basic-control renderer slots

---
 Source/renderer/README.md                     | 12 ++++---
 .../for_slot_types/slotTyping.fixture.ts      |  8 ++++-
 Source/renderer/slots.ts                      | 34 +++++++++++++++----
 3 files changed, 42 insertions(+), 12 deletions(-)

diff --git a/Source/renderer/README.md b/Source/renderer/README.md
index 6249bb96..4af3dfb8 100644
--- a/Source/renderer/README.md
+++ b/Source/renderer/README.md
@@ -9,10 +9,12 @@ deferred.
 
 The initial slot table contains only components with real standalone public contracts:
 
-- `common.button` — presentation candidate.
-- `common.tooltip`, `dropdown.select`, `dialogs.dialog`, `display.datePicker` — interaction-heavy.
+- `common.button`, `common.iconButton`, `common.textInput`, `common.textArea`,
+  `common.checkbox`, `common.radio`, `common.switch`, `common.progress`, and `common.surface` —
+  element-bounded presentation candidates.
+- `common.tooltip`, `dropdown.select`, `dialogs.dialog`, and `display.datePicker` —
+  interaction-heavy.
 - `datatables.paginator` — interaction-heavy and composite-adjacent.
 
-Icon button, text input, text area, checkbox, radio, switch, progress, and surface are intentionally
-absent because Components does not yet expose matching standalone primitives. Arc-bound
-`CommandForm` fields are not substitutes and must never be registered as those slots.
+The basic controls are standalone Common primitives. Arc-bound `CommandForm` fields remain
+high-order composites and must never be registered as substitutes for these slots.
diff --git a/Source/renderer/for_slot_types/slotTyping.fixture.ts b/Source/renderer/for_slot_types/slotTyping.fixture.ts
index e053db43..58523384 100644
--- a/Source/renderer/for_slot_types/slotTyping.fixture.ts
+++ b/Source/renderer/for_slot_types/slotTyping.fixture.ts
@@ -10,6 +10,7 @@ import type {
 } from '@cratis/components/renderer';
 
 declare const Button: ComponentType<unstable_CratisSlots['common.button']>;
+declare const TextInput: ComponentType<unstable_CratisSlots['common.textInput']>;
 declare const Tooltip: ComponentType<unstable_CratisSlots['common.tooltip']>;
 
 const slotId: unstable_SlotId = 'common.button';
@@ -20,10 +21,15 @@ const slots = {
         fidelity: 'native',
         render: Button,
     },
+    'common.textInput': {
+        mode,
+        fidelity: 'native',
+        render: TextInput,
+    },
 } satisfies unstable_SlotMap;
 
 // @ts-expect-error Unknown slot identifiers must not enter the Core slot map.
-const unknownSlot: unstable_SlotId = 'common.textInput';
+const unknownSlot: unstable_SlotId = 'common.signaturePad';
 const wrongProps: unstable_SlotMap = {
     // @ts-expect-error A tooltip implementation cannot satisfy the button prop contract.
     'common.button': { mode: 'presentation', fidelity: 'native', render: Tooltip },
diff --git a/Source/renderer/slots.ts b/Source/renderer/slots.ts
index b823be75..532915da 100644
--- a/Source/renderer/slots.ts
+++ b/Source/renderer/slots.ts
@@ -3,9 +3,17 @@
 
 import type { ComponentType } from 'react';
 import type { ButtonProps } from '../Common/Button';
+import type { CheckboxProps } from '../Common/Checkbox';
 import type { DatePickerInputProps } from '../Common/DatePickerInput';
+import type { IconButtonProps } from '../Common/IconButton';
+import type { RadioProps } from '../Common/Radio';
+import type { SurfaceProps } from '../Common/Surface';
+import type { SwitchProps } from '../Common/Switch';
+import type { TextAreaProps } from '../Common/TextArea';
+import type { TextInputProps } from '../Common/TextInput';
 import type { TooltipProps } from '../Common/Tooltip';
 import type { TablePaginatorProps } from '../DataTables/TablePaginator';
+import type { ProgressBarProps } from '../Display/ProgressBar';
 import type { DialogProps } from '../Dialogs/Dialog';
 import type { DropdownProps } from '../Dropdown/Dropdown';
 
@@ -13,18 +21,32 @@ import type { DropdownProps } from '../Dropdown/Dropdown';
  * Renderer slots backed by real public component contracts in Components V4.
  *
  * This interface is intentionally open so an adapter can declaration-merge private slots without
- * making vendor types part of the Core package. The initial table is deliberately small:
- * `common.button` is the only presentation candidate; tooltip, select, dialog, date picker, and
- * paginator remain interaction-heavy. Icon button, text input, text area, checkbox, radio, switch,
- * progress, and surface slots are deferred until matching standalone public primitives exist.
- * CommandForm fields are Arc-bound composites and must never be used as substitutes for those
- * missing primitives.
+ * making vendor types part of the Core package. Element-bounded Common controls and progress are
+ * presentation candidates; tooltip, select, dialog, date picker, and paginator remain
+ * interaction-heavy. CommandForm fields are Arc-bound composites and never substitute for the
+ * standalone primitive contracts.
  *
  * @unstable Adapter-author contract. Expect changes until renderer conformance gates promote it.
  */
 export interface unstable_CratisSlots {
     /** Cratis button presentation contract. */
     'common.button': ButtonProps;
+    /** Cratis icon-button presentation contract. */
+    'common.iconButton': IconButtonProps;
+    /** Native text-input presentation contract. */
+    'common.textInput': TextInputProps;
+    /** Native text-area presentation contract. */
+    'common.textArea': TextAreaProps;
+    /** Native checkbox presentation contract. */
+    'common.checkbox': CheckboxProps;
+    /** Native radio-option presentation contract. */
+    'common.radio': RadioProps;
+    /** Native switch presentation contract. */
+    'common.switch': SwitchProps;
+    /** Progress-bar presentation contract. */
+    'common.progress': ProgressBarProps;
+    /** Semantic surface presentation contract. */
+    'common.surface': SurfaceProps;
     /** Interaction-heavy tooltip contract. */
     'common.tooltip': TooltipProps;
     /** Interaction-heavy select/dropdown contract. */

From e32862e5e7a2e84007f5c8e5e43162de8f7a09c3 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 19:41:29 +0200
Subject: [PATCH 176/267] Add renderer provider resolution context

---
 Source/Common/CratisComponentsProvider.tsx |  36 ++-
 Source/renderer/RendererContext.tsx        | 252 +++++++++++++++++++++
 Source/renderer/RendererScope.tsx          | 122 ++++++++++
 Source/renderer/errors.ts                  |  25 ++
 Source/renderer/index.ts                   |  64 +++++-
 Source/renderer/manifest.ts                |  19 +-
 Source/renderer/resolve.ts                 | 217 ++++++++++++++++++
 Source/renderer/slots.ts                   |  56 +----
 8 files changed, 726 insertions(+), 65 deletions(-)
 create mode 100644 Source/renderer/RendererContext.tsx
 create mode 100644 Source/renderer/RendererScope.tsx
 create mode 100644 Source/renderer/resolve.ts

diff --git a/Source/Common/CratisComponentsProvider.tsx b/Source/Common/CratisComponentsProvider.tsx
index 1062b47f..bfe09a93 100644
--- a/Source/Common/CratisComponentsProvider.tsx
+++ b/Source/Common/CratisComponentsProvider.tsx
@@ -5,9 +5,14 @@ import { useMemo, type ReactNode } from 'react';
 import { I18nProvider } from 'react-aria-components/I18nProvider';
 import { merge } from 'ts-deepmerge';
 import { Toaster, type ToasterProps } from '../Notifications/Toaster';
+import { unstable_RendererRoot } from '../renderer/RendererContext';
+import type { unstable_UiLibrary } from '../renderer/manifest';
+import type { unstable_CratisOverlayEnvironment } from '../renderer/overlayEnvironment';
 import { CratisComponentsContext } from './CratisComponentsContext';
 import { cratisDefaults } from './CratisComponentsDefaults';
 
+const RendererRoot = unstable_RendererRoot;
+
 export { cratisDefaults } from './CratisComponentsDefaults';
 export { useCratisComponentsConfig } from './CratisComponentsContext';
 
@@ -169,6 +174,14 @@ export interface CratisComponentsProviderProps {
     value?: CratisComponentsConfig;
     /** Mounts the global toaster with defaults or explicit options. */
     toaster?: boolean | ToasterProps;
+    /** Experimental renderer library or ordered, last-wins library composition. */
+    library?: unstable_UiLibrary | readonly unstable_UiLibrary[];
+    /** Experimental profile-promise behavior. Defaults to strict. */
+    libraryMode?: 'strict' | 'degrade';
+    /** Experimental terminal slot fallback behavior. Defaults to Core. */
+    rendererFallback?: 'core' | 'throw';
+    /** Experimental host environment for overlay portal containers. */
+    overlayEnvironment?: unstable_CratisOverlayEnvironment;
     /** Application content. */
     children: ReactNode;
 }
@@ -247,6 +260,10 @@ const validLocale = (locale: string | undefined) => {
 export const CratisComponentsProvider = ({
     value,
     toaster,
+    library,
+    libraryMode,
+    rendererFallback,
+    overlayEnvironment,
     children,
 }: CratisComponentsProviderProps) => {
     const resolved = useMemo(
@@ -256,11 +273,18 @@ export const CratisComponentsProvider = ({
     );
 
     return (
-        <CratisComponentsContext.Provider value={resolved}>
-            <I18nProvider locale={validLocale(resolved.locale)}>
-                {children}
-                {toaster && <Toaster {...(typeof toaster === 'object' ? toaster : {})} />}
-            </I18nProvider>
-        </CratisComponentsContext.Provider>
+        <RendererRoot
+            library={library}
+            libraryMode={libraryMode}
+            rendererFallback={rendererFallback}
+            overlayEnvironment={overlayEnvironment}
+        >
+            <CratisComponentsContext.Provider value={resolved}>
+                <I18nProvider locale={validLocale(resolved.locale)}>
+                    {children}
+                    {toaster && <Toaster {...(typeof toaster === 'object' ? toaster : {})} />}
+                </I18nProvider>
+            </CratisComponentsContext.Provider>
+        </RendererRoot>
     );
 };
diff --git a/Source/renderer/RendererContext.tsx b/Source/renderer/RendererContext.tsx
new file mode 100644
index 00000000..3e4f5407
--- /dev/null
+++ b/Source/renderer/RendererContext.tsx
@@ -0,0 +1,252 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import {
+    createContext,
+    useCallback,
+    useContext,
+    useEffect,
+    useMemo,
+    useRef,
+    type ReactNode,
+} from 'react';
+import type { unstable_CapabilityId } from './capabilities';
+import {
+    unstable_AdapterError,
+    unstable_adapterErrorCodes,
+    type unstable_AdapterDiagnostic,
+} from './errors';
+import type { unstable_UiLibrary } from './manifest';
+import {
+    unstable_defaultOverlayEnvironment,
+    type unstable_CratisOverlayEnvironment,
+} from './overlayEnvironment';
+import {
+    unstable_createRendererLayer,
+    unstable_createResolvedSlotTable,
+    unstable_diagnosticKey,
+    unstable_emptyCoreRendererSlots,
+    unstable_logDiagnostic,
+    unstable_resolveLibraryInput,
+    unstable_resolveSlot,
+    unstable_sameLibraryReferences,
+    unstable_validateUiLibrary,
+    type unstable_RendererLayer,
+} from './resolve';
+import type {
+    unstable_SlotDeclaration,
+    unstable_SlotId,
+    unstable_SlotMap,
+} from './slots';
+
+/** Internal renderer state shared by the provider and nested scopes. */
+export interface unstable_RendererContextValue {
+    readonly layers: readonly unstable_RendererLayer[];
+    readonly slots: unstable_SlotMap;
+    readonly libraryMode: 'strict' | 'degrade';
+    readonly rendererFallback: 'core' | 'throw';
+    readonly overlayEnvironment: unstable_CratisOverlayEnvironment;
+    readonly coreSlots: unstable_SlotMap;
+    readonly providerLibraryReferences: readonly unstable_UiLibrary[];
+    readonly reportDiagnostic: (diagnostic: unstable_AdapterDiagnostic) => void;
+}
+
+/** Props for the internal renderer boundary mounted by the setup provider. */
+export interface unstable_RendererRootProps {
+    readonly library?: unstable_UiLibrary | readonly unstable_UiLibrary[];
+    readonly libraryMode?: 'strict' | 'degrade';
+    readonly rendererFallback?: 'core' | 'throw';
+    readonly overlayEnvironment?: unstable_CratisOverlayEnvironment;
+    readonly coreSlots?: unstable_SlotMap;
+    readonly children: ReactNode;
+}
+
+/** One source-owned context singleton. It is deliberately not exported from the renderer barrel. */
+export const unstable_RendererContext =
+    createContext<unstable_RendererContextValue | undefined>(undefined);
+
+const nestedLibraryDiagnostic = (
+    library: unstable_UiLibrary,
+): unstable_AdapterDiagnostic => ({
+    code: unstable_adapterErrorCodes.nestedLibraries,
+    adapterId: library.id,
+    message: 'A nested CratisComponentsProvider selected a conflicting renderer library.',
+    remedy: 'Select renderer libraries once at the application provider and use RendererScope for local overrides.',
+});
+
+/** Internal root boundary. Renderer manifests remain outside Components configuration merging. */
+export const unstable_RendererRoot = ({
+    library,
+    libraryMode = 'strict',
+    rendererFallback = 'core',
+    overlayEnvironment,
+    coreSlots,
+    children,
+}: unstable_RendererRootProps) => {
+    const parent = useContext(unstable_RendererContext);
+    const selected = useMemo(() => unstable_resolveLibraryInput(library), [library]);
+    const layer = useMemo(
+        () => selected.library ? unstable_createRendererLayer(selected.library) : undefined,
+        [selected],
+    );
+    const reportedDiagnostics = useRef(new Set<string>());
+    const reportDiagnostic = useCallback((diagnostic: unstable_AdapterDiagnostic) => {
+        const key = unstable_diagnosticKey(diagnostic);
+        if (reportedDiagnostics.current.has(key)) return;
+        reportedDiagnostics.current.add(key);
+        unstable_logDiagnostic(diagnostic);
+    }, []);
+
+    const diagnostics = useMemo(() => {
+        if (!selected.library) return Object.freeze([]) as readonly unstable_AdapterDiagnostic[];
+
+        const currentDiagnostics = selected.references.flatMap(reference =>
+            unstable_validateUiLibrary(reference));
+        if (
+            parent?.providerLibraryReferences.length &&
+            !unstable_sameLibraryReferences(
+                parent.providerLibraryReferences,
+                selected.references,
+            )
+        ) {
+            currentDiagnostics.unshift(nestedLibraryDiagnostic(selected.library));
+        }
+        return Object.freeze(currentDiagnostics);
+    }, [parent?.providerLibraryReferences, selected]);
+
+    useEffect(() => {
+        if (libraryMode === 'degrade') {
+            diagnostics.forEach(reportDiagnostic);
+        }
+    }, [diagnostics, libraryMode, reportDiagnostic]);
+
+    if (libraryMode === 'strict' && diagnostics.length > 0) {
+        throw new unstable_AdapterError(diagnostics[0]);
+    }
+
+    const layers = useMemo(
+        () => Object.freeze([
+            ...(parent?.layers ?? []),
+            ...(layer ? [layer] : []),
+        ]),
+        [layer, parent?.layers],
+    );
+    const slots = useMemo(
+        () => unstable_createResolvedSlotTable(layers),
+        [layers],
+    );
+    const resolvedCoreSlots = useMemo(
+        () => coreSlots
+            ? Object.freeze({ ...coreSlots })
+            : parent?.coreSlots ?? unstable_emptyCoreRendererSlots,
+        [coreSlots, parent?.coreSlots],
+    );
+    const value = useMemo<unstable_RendererContextValue>(() => Object.freeze({
+        layers,
+        slots,
+        libraryMode,
+        rendererFallback,
+        overlayEnvironment:
+            overlayEnvironment ??
+            parent?.overlayEnvironment ??
+            unstable_defaultOverlayEnvironment,
+        coreSlots: resolvedCoreSlots,
+        providerLibraryReferences:
+            selected.references.length > 0
+                ? selected.references
+                : parent?.providerLibraryReferences ?? selected.references,
+        reportDiagnostic,
+    }), [
+        layers,
+        libraryMode,
+        overlayEnvironment,
+        parent?.overlayEnvironment,
+        parent?.providerLibraryReferences,
+        rendererFallback,
+        reportDiagnostic,
+        resolvedCoreSlots,
+        selected.references,
+        slots,
+    ]);
+
+    const LibraryProvider = selected.library?.Provider;
+    return (
+        <unstable_RendererContext.Provider value={value}>
+            {LibraryProvider ? <LibraryProvider>{children}</LibraryProvider> : children}
+        </unstable_RendererContext.Provider>
+    );
+};
+
+const fallbackDiagnostic = (
+    context: unstable_RendererContextValue | undefined,
+    slotId: unstable_SlotId,
+): unstable_AdapterDiagnostic => ({
+    code: unstable_adapterErrorCodes.strictProfileFallback,
+    adapterId:
+        context?.layers[context.layers.length - 1]?.library.id ?? 'core',
+    slotId,
+    message: `Renderer resolution requested Core fallback for slot '${slotId}'.`,
+    remedy: `Provide a supported '${slotId}' renderer declaration or intentionally retain the Core fallback.`,
+});
+
+/**
+ * Resolves one slot through scopes, the application provider, and the Core fallback table.
+ *
+ * @unstable Internal component-routing contract for Slice E. Expect changes until renderer
+ * conformance gates promote it.
+ */
+export const unstable_useSlot = <K extends unstable_SlotId>(
+    slotId: K,
+): unstable_SlotDeclaration<K> | undefined => {
+    const context = useContext(unstable_RendererContext);
+    const localReportedDiagnostics = useRef(new Set<string>());
+    const result = unstable_resolveSlot(
+        slotId,
+        context?.slots ?? unstable_emptyCoreRendererSlots,
+        context?.coreSlots ?? unstable_emptyCoreRendererSlots,
+    );
+
+    if (result.usedCoreFallback) {
+        const diagnostic = fallbackDiagnostic(context, slotId);
+        if (context) {
+            context.reportDiagnostic(diagnostic);
+        } else {
+            const key = unstable_diagnosticKey(diagnostic);
+            if (!localReportedDiagnostics.current.has(key)) {
+                localReportedDiagnostics.current.add(key);
+                unstable_logDiagnostic(diagnostic);
+            }
+        }
+    }
+
+    if (
+        !result.declaration &&
+        (context?.rendererFallback ?? 'core') === 'throw'
+    ) {
+        throw new unstable_AdapterError(fallbackDiagnostic(context, slotId));
+    }
+
+    return result.declaration;
+};
+
+/** Returns whether any active renderer layer advertises a Core-owned capability. */
+export const unstable_useCapability = (
+    capability: unstable_CapabilityId,
+): boolean => {
+    const context = useContext(unstable_RendererContext);
+    return context?.layers.some(layer =>
+        layer.library.capabilities.includes(capability)) ?? false;
+};
+
+/**
+ * Returns the nearest renderer identity for telemetry only. Behavior must branch on capabilities.
+ */
+export const unstable_useRendererId = (): string => {
+    const context = useContext(unstable_RendererContext);
+    return context?.layers[context.layers.length - 1]?.library.id ?? 'core';
+};
+
+/** Internal overlay hook. Reading it never invokes getContainer during render or SSR. */
+export const unstable_useOverlayEnvironment = (): unstable_CratisOverlayEnvironment =>
+    useContext(unstable_RendererContext)?.overlayEnvironment ??
+    unstable_defaultOverlayEnvironment;
diff --git a/Source/renderer/RendererScope.tsx b/Source/renderer/RendererScope.tsx
new file mode 100644
index 00000000..3d8be71f
--- /dev/null
+++ b/Source/renderer/RendererScope.tsx
@@ -0,0 +1,122 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import {
+    useContext,
+    useEffect,
+    useMemo,
+    type ReactNode,
+} from 'react';
+import {
+    unstable_AdapterError,
+    unstable_adapterErrorCodes,
+    type unstable_AdapterDiagnostic,
+} from './errors';
+import type { unstable_UiLibrary } from './manifest';
+import {
+    unstable_createRendererLayer,
+    unstable_createResolvedSlotTable,
+    unstable_isKnownSlot,
+    unstable_resolveLibraryInput,
+    unstable_validateUiLibrary,
+} from './resolve';
+import {
+    unstable_RendererContext,
+    type unstable_RendererContextValue,
+} from './RendererContext';
+import type { unstable_SlotId } from './slots';
+
+/** Props for a local renderer override. */
+export interface unstable_RendererScopeProps {
+    /** One renderer or an ordered last-wins composition used in this subtree. */
+    readonly use: unstable_UiLibrary | readonly unstable_UiLibrary[];
+    /** Optional slot allow-list. Other slots continue through outer scopes and the provider. */
+    readonly only?: readonly unstable_SlotId[];
+    /** Scoped application content. */
+    readonly children: ReactNode;
+}
+
+const invalidOnlyDiagnostic = (
+    library: unstable_UiLibrary,
+    slotId: unknown,
+): unstable_AdapterDiagnostic => ({
+    code: unstable_adapterErrorCodes.missingRequirement,
+    adapterId: library.id,
+    message: `RendererScope only includes unknown slot '${String(slotId)}'.`,
+    remedy: 'Use only slot identifiers declared by the installed Components version.',
+});
+
+/**
+ * Applies a renderer locally. The nearest matching scope wins; `only` lets all other slots continue
+ * through outer scopes and the application provider.
+ *
+ * @unstable Consumer contract. Expect changes until renderer conformance gates promote it.
+ */
+export const unstable_RendererScope = ({
+    use,
+    only,
+    children,
+}: unstable_RendererScopeProps) => {
+    const parent = useContext(unstable_RendererContext);
+    const selected = useMemo(() => unstable_resolveLibraryInput(use), [use]);
+    const acceptedOnly = useMemo(
+        () => only?.filter(unstable_isKnownSlot),
+        [only],
+    );
+    const layer = useMemo(
+        () => selected.library
+            ? unstable_createRendererLayer(selected.library, acceptedOnly)
+            : undefined,
+        [acceptedOnly, selected],
+    );
+    const diagnostics = useMemo(() => {
+        if (!selected.library) return Object.freeze([]) as readonly unstable_AdapterDiagnostic[];
+        return Object.freeze([
+            ...selected.references.flatMap(reference =>
+                unstable_validateUiLibrary(reference)),
+            ...(only ?? [])
+                .filter(slotId => !unstable_isKnownSlot(slotId))
+                .map(slotId => invalidOnlyDiagnostic(selected.library!, slotId)),
+        ]);
+    }, [only, selected]);
+
+    useEffect(() => {
+        if (parent?.libraryMode === 'degrade') {
+            diagnostics.forEach(parent.reportDiagnostic);
+        }
+    }, [diagnostics, parent]);
+
+    if ((parent?.libraryMode ?? 'strict') === 'strict' && diagnostics.length > 0) {
+        throw new unstable_AdapterError(diagnostics[0]);
+    }
+
+    const layers = useMemo(
+        () => parent && layer
+            ? Object.freeze([...parent.layers, layer])
+            : undefined,
+        [layer, parent],
+    );
+    const slots = useMemo(
+        () => layers ? unstable_createResolvedSlotTable(layers) : undefined,
+        [layers],
+    );
+    const value = useMemo<unstable_RendererContextValue | undefined>(
+        () => parent && layers && slots
+            ? Object.freeze({
+                ...parent,
+                layers,
+                slots,
+            })
+            : undefined,
+        [layers, parent, slots],
+    );
+    const LibraryProvider = selected.library?.Provider;
+
+    if (!value) return children;
+
+    return (
+        <unstable_RendererContext.Provider value={value}>
+            {LibraryProvider ? <LibraryProvider>{children}</LibraryProvider> : children}
+        </unstable_RendererContext.Provider>
+    );
+};
diff --git a/Source/renderer/errors.ts b/Source/renderer/errors.ts
index f63764ec..18c18577 100644
--- a/Source/renderer/errors.ts
+++ b/Source/renderer/errors.ts
@@ -46,3 +46,28 @@ export interface unstable_AdapterDiagnostic {
     /** The single action a consumer should take to remedy the diagnostic. */
     readonly remedy: string;
 }
+
+/**
+ * Typed failure raised when a renderer contract cannot be honored.
+ *
+ * @unstable Adapter-author contract. Expect changes until renderer conformance gates promote it.
+ */
+export class unstable_AdapterError extends Error {
+    /** Stable diagnostic that caused the failure. */
+    readonly diagnostic: unstable_AdapterDiagnostic;
+
+    /** Stable diagnostic code, repeated for convenient error-boundary inspection. */
+    readonly code: unstable_AdapterErrorCode;
+
+    /**
+     * Initializes a renderer contract failure.
+     *
+     * @param diagnostic Actionable renderer diagnostic.
+     */
+    constructor(diagnostic: unstable_AdapterDiagnostic) {
+        super(`[${diagnostic.code}] ${diagnostic.message} Remedy: ${diagnostic.remedy}`);
+        this.name = 'unstable_AdapterError';
+        this.diagnostic = diagnostic;
+        this.code = diagnostic.code;
+    }
+}
diff --git a/Source/renderer/index.ts b/Source/renderer/index.ts
index 73e6feb4..4701270c 100644
--- a/Source/renderer/index.ts
+++ b/Source/renderer/index.ts
@@ -1,13 +1,63 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
+import type { ButtonProps } from '../Common/Button';
+import type { CheckboxProps } from '../Common/Checkbox';
+import type { DatePickerInputProps } from '../Common/DatePickerInput';
+import type { IconButtonProps } from '../Common/IconButton';
+import type { RadioProps } from '../Common/Radio';
+import type { SurfaceProps } from '../Common/Surface';
+import type { SwitchProps } from '../Common/Switch';
+import type { TextAreaProps } from '../Common/TextArea';
+import type { TextInputProps } from '../Common/TextInput';
+import type { TooltipProps } from '../Common/Tooltip';
+import type { TablePaginatorProps } from '../DataTables/TablePaginator';
+import type { ProgressBarProps } from '../Display/ProgressBar';
+import type { DialogProps } from '../Dialogs/Dialog';
+import type { DropdownProps } from '../Dropdown/Dropdown';
+
+/** Core-owned slot contracts loaded only by the renderer subpath. */
+declare module './slots.js' {
+    interface unstable_CratisSlots {
+        /** Cratis button presentation contract. */
+        'common.button': ButtonProps;
+        /** Cratis icon-button presentation contract. */
+        'common.iconButton': IconButtonProps;
+        /** Native text-input presentation contract. */
+        'common.textInput': TextInputProps;
+        /** Native text-area presentation contract. */
+        'common.textArea': TextAreaProps;
+        /** Native checkbox presentation contract. */
+        'common.checkbox': CheckboxProps;
+        /** Native radio-option presentation contract. */
+        'common.radio': RadioProps;
+        /** Native switch presentation contract. */
+        'common.switch': SwitchProps;
+        /** Progress-bar presentation contract. */
+        'common.progress': ProgressBarProps;
+        /** Semantic surface presentation contract. */
+        'common.surface': SurfaceProps;
+        /** Interaction-heavy tooltip contract. */
+        'common.tooltip': TooltipProps;
+        /** Interaction-heavy select/dropdown contract. */
+        'dropdown.select': DropdownProps<unknown>;
+        /** Interaction-heavy modal dialog contract. */
+        'dialogs.dialog': DialogProps;
+        /** Interaction-heavy date-picker contract. */
+        'display.datePicker': DatePickerInputProps;
+        /** Interaction-heavy, composite-adjacent table paginator contract. */
+        'datatables.paginator': TablePaginatorProps;
+    }
+}
+
 /**
  * Experimental renderer contracts for adapter authors. Every public symbol is intentionally
- * `unstable_`-prefixed and isolated to `@cratis/components/renderer`; provider wiring, resolution,
- * scopes, hooks, preloading, and component routing are deferred to later slices.
+ * `unstable_`-prefixed and isolated to `@cratis/components/renderer`. Component routing, built-in
+ * manifests, and lazy/preload entries remain deferred.
  */
 export type { unstable_CapabilityId } from './capabilities';
 export {
+    unstable_AdapterError,
     unstable_adapterErrorCodes,
     type unstable_AdapterDiagnostic,
     type unstable_AdapterErrorCode,
@@ -24,6 +74,16 @@ export {
     unstable_defaultOverlayEnvironment,
     type unstable_CratisOverlayEnvironment,
 } from './overlayEnvironment';
+export {
+    unstable_useCapability,
+    unstable_useOverlayEnvironment,
+    unstable_useRendererId,
+    unstable_useSlot,
+} from './RendererContext';
+export {
+    unstable_RendererScope,
+    type unstable_RendererScopeProps,
+} from './RendererScope';
 export type {
     unstable_BehaviorMode,
     unstable_CratisSlots,
diff --git a/Source/renderer/manifest.ts b/Source/renderer/manifest.ts
index 7e4c7c35..02635aa1 100644
--- a/Source/renderer/manifest.ts
+++ b/Source/renderer/manifest.ts
@@ -4,7 +4,7 @@
 import type { ComponentType, ReactNode } from 'react';
 import type { unstable_CapabilityId } from './capabilities';
 import type { unstable_AdapterDiagnostic } from './errors';
-import type { unstable_SlotMap } from './slots';
+import type { unstable_SlotId, unstable_SlotMap } from './slots';
 
 /**
  * Renderer ABI major implemented by this package.
@@ -30,13 +30,17 @@ export interface unstable_UiLibrary {
     readonly level: 'full' | 'primitive' | 'behavior' | 'portal' | 'theme';
     /** Named contract profile promised by the library. */
     readonly profile: string;
+    /**
+     * Slots promised by the named profile. When omitted, the library promises its own slot keys.
+     */
+    readonly profileSlots?: readonly unstable_SlotId[];
     /** Core-owned capabilities honestly supported by the library. */
     readonly capabilities: readonly unstable_CapabilityId[];
     /** Typed partial slot implementation table. */
     readonly slots: unstable_SlotMap;
-    /** Optional library-level provider. Provider wiring is deferred to a later Slice D commit. */
+    /** Optional library-level provider mounted once around the selected renderer scope. */
     readonly Provider?: ComponentType<{ children: ReactNode }>;
-    /** Optional static diagnostic preflight. Provider consumption is deferred. */
+    /** Optional static diagnostic preflight evaluated by renderer providers and scopes. */
     readonly preflight?: () => readonly unstable_AdapterDiagnostic[];
 }
 
@@ -46,9 +50,8 @@ export interface unstable_UiLibrary {
  *
  * @unstable Adapter-author contract. Expect changes until renderer conformance gates promote it.
  */
-// This is intentionally empty: adapter packages add only their own vendor key through declaration merging.
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
-export interface unstable_RendererExtensions {}
+// Adapter packages add only their own vendor key through declaration merging.
+export interface unstable_RendererExtensions extends Record<never, never> {}
 
 /**
  * Deliberate renderer lock-in bag derived only from declaration-merged extension keys. Portable
@@ -83,6 +86,9 @@ export const unstable_defineUiLibrary = <const T extends unstable_UiLibrary>(
     Object.freeze({
         ...library,
         capabilities: Object.freeze([...library.capabilities]),
+        profileSlots: Object.freeze([
+            ...(library.profileSlots ?? Object.keys(library.slots)),
+        ]),
         slots: frozenSlots(library.slots),
     }) as T;
 
@@ -112,6 +118,7 @@ export const unstable_composeUiLibraries = (
     return unstable_defineUiLibrary({
         ...last,
         capabilities,
+        profileSlots: last.profileSlots ?? Object.keys(slots) as unstable_SlotId[],
         slots,
     });
 };
diff --git a/Source/renderer/resolve.ts b/Source/renderer/resolve.ts
new file mode 100644
index 00000000..71c5bd05
--- /dev/null
+++ b/Source/renderer/resolve.ts
@@ -0,0 +1,217 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { unstable_AdapterDiagnostic } from './errors';
+import { unstable_adapterErrorCodes } from './errors';
+import {
+    unstable_composeUiLibraries,
+    unstable_CRATIS_UI_ABI_VERSION,
+    type unstable_UiLibrary,
+} from './manifest';
+import type {
+    unstable_SlotDeclaration,
+    unstable_SlotId,
+    unstable_SlotMap,
+} from './slots';
+
+const knownSlots = new Set<unstable_SlotId>([
+    'common.button',
+    'common.iconButton',
+    'common.textInput',
+    'common.textArea',
+    'common.checkbox',
+    'common.radio',
+    'common.switch',
+    'common.progress',
+    'common.surface',
+    'common.tooltip',
+    'dropdown.select',
+    'dialogs.dialog',
+    'display.datePicker',
+    'datatables.paginator',
+]);
+
+/** Internal immutable renderer layer used by context resolution. */
+export interface unstable_RendererLayer {
+    readonly library: unstable_UiLibrary;
+    readonly slots: unstable_SlotMap;
+    readonly only?: ReadonlySet<unstable_SlotId>;
+}
+
+/** Identity-preserving normalization result for a provider or scope library input. */
+export interface unstable_ResolvedLibraryInput {
+    readonly library?: unstable_UiLibrary;
+    readonly references: readonly unstable_UiLibrary[];
+}
+
+/** Empty D2 Core fallback table. Slice E can inject its built-in table without a registry. */
+export const unstable_emptyCoreRendererSlots: unstable_SlotMap = Object.freeze({});
+
+/** Returns whether a value is one of the Core-owned slot identifiers. */
+export const unstable_isKnownSlot = (value: unknown): value is unstable_SlotId =>
+    typeof value === 'string' && knownSlots.has(value as unstable_SlotId);
+
+/** Normalizes one library or an ordered last-wins composition without deep merging it. */
+export const unstable_resolveLibraryInput = (
+    input: unstable_UiLibrary | readonly unstable_UiLibrary[] | undefined,
+): unstable_ResolvedLibraryInput => {
+    if (!input) return Object.freeze({ references: Object.freeze([]) });
+
+    const references = Object.freeze(Array.isArray(input) ? [...input] : [input]);
+    if (references.length === 0) {
+        return Object.freeze({ references });
+    }
+
+    return Object.freeze({
+        library:
+            references.length === 1
+                ? references[0]
+                : unstable_composeUiLibraries(...references),
+        references,
+    });
+};
+
+/** Creates one immutable slot lookup snapshot for a manifest and optional scope filter. */
+export const unstable_createRendererLayer = (
+    library: unstable_UiLibrary,
+    only?: readonly unstable_SlotId[],
+): unstable_RendererLayer =>
+    Object.freeze({
+        library,
+        slots: Object.freeze({ ...library.slots }),
+        only: only ? new Set(only) : undefined,
+    });
+
+const missingRequirement = (
+    library: unstable_UiLibrary,
+    message: string,
+    remedy: string,
+    slotId?: unstable_SlotId,
+): unstable_AdapterDiagnostic => ({
+    code: unstable_adapterErrorCodes.missingRequirement,
+    adapterId: library.id,
+    slotId,
+    message,
+    remedy,
+});
+
+/** Runs ABI, profile, capability, and adapter preflight validation. */
+export const unstable_validateUiLibrary = (
+    library: unstable_UiLibrary,
+): readonly unstable_AdapterDiagnostic[] => {
+    const diagnostics: unstable_AdapterDiagnostic[] = [];
+
+    if (library.abi !== unstable_CRATIS_UI_ABI_VERSION) {
+        diagnostics.push({
+            code: unstable_adapterErrorCodes.abiMismatch,
+            adapterId: library.id,
+            message: `Renderer ABI ${library.abi} does not match Core ABI ${unstable_CRATIS_UI_ABI_VERSION}.`,
+            remedy: `Install a renderer that targets ABI ${unstable_CRATIS_UI_ABI_VERSION}.`,
+        });
+    }
+
+    const profileSlots = library.profileSlots ?? Object.keys(library.slots);
+    if (profileSlots.length > 0 && !library.capabilities.includes('slot.render')) {
+        diagnostics.push(
+            missingRequirement(
+                library,
+                `Profile '${library.profile}' promises slots without the 'slot.render' capability.`,
+                "Declare 'slot.render' only after the adapter can render every promised slot.",
+            ),
+        );
+    }
+
+    for (const profileSlot of profileSlots) {
+        if (!unstable_isKnownSlot(profileSlot)) {
+            diagnostics.push(
+                missingRequirement(
+                    library,
+                    `Profile '${library.profile}' promises unknown slot '${String(profileSlot)}'.`,
+                    'Remove the unknown slot or install a Core version that declares it.',
+                ),
+            );
+            continue;
+        }
+
+        const declaration = library.slots[profileSlot];
+        if (!declaration || declaration.fidelity === 'unsupported') {
+            diagnostics.push(
+                missingRequirement(
+                    library,
+                    `Profile '${library.profile}' does not support promised slot '${profileSlot}'.`,
+                    `Provide a supported '${profileSlot}' declaration or remove it from profileSlots.`,
+                    profileSlot,
+                ),
+            );
+        }
+    }
+
+    if (library.preflight) {
+        try {
+            diagnostics.push(...library.preflight());
+        } catch (error: unknown) {
+            diagnostics.push({
+                code: unstable_adapterErrorCodes.missingUpstreamPeer,
+                adapterId: library.id,
+                message: `Renderer preflight failed: ${error instanceof Error ? error.message : String(error)}.`,
+                remedy: 'Correct the renderer installation so its preflight can complete.',
+            });
+        }
+    }
+
+    return Object.freeze([...diagnostics]);
+};
+
+/** Compares normalized library identities without comparing or cloning manifest contents. */
+export const unstable_sameLibraryReferences = (
+    left: readonly unstable_UiLibrary[],
+    right: readonly unstable_UiLibrary[],
+): boolean =>
+    left.length === right.length &&
+    left.every((library, index) => library === right[index]);
+
+/** Flattens outer-to-inner layers into one frozen, last-wins lookup table. */
+export const unstable_createResolvedSlotTable = (
+    layers: readonly unstable_RendererLayer[],
+): unstable_SlotMap => {
+    const resolved: Record<string, object> = {};
+    for (const layer of layers) {
+        for (const [slotId, declaration] of Object.entries(layer.slots)) {
+            if (
+                !declaration ||
+                declaration.fidelity === 'unsupported' ||
+                (layer.only && !layer.only.has(slotId as unstable_SlotId))
+            ) continue;
+            resolved[slotId] = declaration;
+        }
+    }
+    return Object.freeze(resolved) as unstable_SlotMap;
+};
+
+/** Resolves a slot by lookup and then consults the injected Core fallback table. */
+export const unstable_resolveSlot = <K extends unstable_SlotId>(
+    slotId: K,
+    slots: unstable_SlotMap,
+    coreSlots: unstable_SlotMap,
+): { declaration?: unstable_SlotDeclaration<K>; usedCoreFallback: boolean } => {
+    const declaration = slots[slotId] as unstable_SlotDeclaration<K> | undefined;
+    if (declaration) return { declaration, usedCoreFallback: false };
+
+    return {
+        declaration: coreSlots[slotId] as unstable_SlotDeclaration<K> | undefined,
+        usedCoreFallback: true,
+    };
+};
+
+/** Stable log key used to de-duplicate diagnostics within one provider identity. */
+export const unstable_diagnosticKey = (
+    diagnostic: unstable_AdapterDiagnostic,
+): string =>
+    [diagnostic.code, diagnostic.adapterId, diagnostic.slotId ?? '', diagnostic.message].join('|');
+
+/** Emits one actionable renderer diagnostic without exposing manifest contents. */
+export const unstable_logDiagnostic = (diagnostic: unstable_AdapterDiagnostic): void => {
+    console.error(
+        `[${diagnostic.code}] ${diagnostic.message} Remedy: ${diagnostic.remedy}`,
+    );
+};
diff --git a/Source/renderer/slots.ts b/Source/renderer/slots.ts
index 532915da..5780a986 100644
--- a/Source/renderer/slots.ts
+++ b/Source/renderer/slots.ts
@@ -2,62 +2,16 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import type { ComponentType } from 'react';
-import type { ButtonProps } from '../Common/Button';
-import type { CheckboxProps } from '../Common/Checkbox';
-import type { DatePickerInputProps } from '../Common/DatePickerInput';
-import type { IconButtonProps } from '../Common/IconButton';
-import type { RadioProps } from '../Common/Radio';
-import type { SurfaceProps } from '../Common/Surface';
-import type { SwitchProps } from '../Common/Switch';
-import type { TextAreaProps } from '../Common/TextArea';
-import type { TextInputProps } from '../Common/TextInput';
-import type { TooltipProps } from '../Common/Tooltip';
-import type { TablePaginatorProps } from '../DataTables/TablePaginator';
-import type { ProgressBarProps } from '../Display/ProgressBar';
-import type { DialogProps } from '../Dialogs/Dialog';
-import type { DropdownProps } from '../Dropdown/Dropdown';
 
 /**
- * Renderer slots backed by real public component contracts in Components V4.
- *
- * This interface is intentionally open so an adapter can declaration-merge private slots without
- * making vendor types part of the Core package. Element-bounded Common controls and progress are
- * presentation candidates; tooltip, select, dialog, date picker, and paginator remain
- * interaction-heavy. CommandForm fields are Arc-bound composites and never substitute for the
- * standalone primitive contracts.
+ * Open renderer slot table. Core declarations are attached by the renderer barrel at the subpath
+ * boundary so the setup-only package root can name `unstable_UiLibrary` without resolving
+ * every component contract and optional peer. Adapters may declaration-merge private slots here.
  *
  * @unstable Adapter-author contract. Expect changes until renderer conformance gates promote it.
  */
-export interface unstable_CratisSlots {
-    /** Cratis button presentation contract. */
-    'common.button': ButtonProps;
-    /** Cratis icon-button presentation contract. */
-    'common.iconButton': IconButtonProps;
-    /** Native text-input presentation contract. */
-    'common.textInput': TextInputProps;
-    /** Native text-area presentation contract. */
-    'common.textArea': TextAreaProps;
-    /** Native checkbox presentation contract. */
-    'common.checkbox': CheckboxProps;
-    /** Native radio-option presentation contract. */
-    'common.radio': RadioProps;
-    /** Native switch presentation contract. */
-    'common.switch': SwitchProps;
-    /** Progress-bar presentation contract. */
-    'common.progress': ProgressBarProps;
-    /** Semantic surface presentation contract. */
-    'common.surface': SurfaceProps;
-    /** Interaction-heavy tooltip contract. */
-    'common.tooltip': TooltipProps;
-    /** Interaction-heavy select/dropdown contract. */
-    'dropdown.select': DropdownProps<unknown>;
-    /** Interaction-heavy modal dialog contract. */
-    'dialogs.dialog': DialogProps;
-    /** Interaction-heavy date-picker contract. */
-    'display.datePicker': DatePickerInputProps;
-    /** Interaction-heavy, composite-adjacent table paginator contract. */
-    'datatables.paginator': TablePaginatorProps;
-}
+// Core slot members are supplied by the renderer subpath barrel's type augmentation.
+export interface unstable_CratisSlots extends Record<never, never> {}
 
 /**
  * Identifier of a declared renderer slot.

From eafa405939a8fd6e11ea020e881dc139aac2283d Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 19:41:35 +0200
Subject: [PATCH 177/267] Specify renderer provider resolution behavior

---
 Source/renderer/README.md                     |   7 +-
 .../when_composing_ui_libraries.ts            |   4 +
 .../when_defining_a_ui_library.ts             |  27 +++
 .../renderer/for_resolution/testLibrary.tsx   |  47 +++++
 .../for_resolution/when_resolving_slots.tsx   | 171 ++++++++++++++++++
 .../when_using_provider_setup.tsx             |  85 +++++++++
 .../when_validating_renderer_libraries.tsx    | 158 ++++++++++++++++
 .../for_slot_types/slotTyping.fixture.ts      |   9 +
 8 files changed, 505 insertions(+), 3 deletions(-)
 create mode 100644 Source/renderer/for_resolution/testLibrary.tsx
 create mode 100644 Source/renderer/for_resolution/when_resolving_slots.tsx
 create mode 100644 Source/renderer/for_resolution/when_using_provider_setup.tsx
 create mode 100644 Source/renderer/for_resolution/when_validating_renderer_libraries.tsx

diff --git a/Source/renderer/README.md b/Source/renderer/README.md
index 4af3dfb8..4382d450 100644
--- a/Source/renderer/README.md
+++ b/Source/renderer/README.md
@@ -3,9 +3,10 @@
 
 # Experimental renderer contracts
 
-This directory contains only the D1 renderer contracts. Provider/context wiring, resolution,
-`RendererScope`, hooks, preloading, built-in manifests, and component routing are deliberately
-deferred.
+This directory contains the D1 contracts and D2 provider/context/resolution infrastructure.
+Built-in manifests and component routing remain deferred to Slice E. `preloadRenderer` and lazy
+renderer entries are also deferred: `SlotDeclaration` has no load contract yet, so adding preload
+behavior now would invent an ABI that adapter declarations cannot honor.
 
 The initial slot table contains only components with real standalone public contracts:
 
diff --git a/Source/renderer/for_manifest/when_composing_ui_libraries.ts b/Source/renderer/for_manifest/when_composing_ui_libraries.ts
index 380f1bff..61619845 100644
--- a/Source/renderer/for_manifest/when_composing_ui_libraries.ts
+++ b/Source/renderer/for_manifest/when_composing_ui_libraries.ts
@@ -57,6 +57,10 @@ describe('when composing UI libraries', () => {
         result.displayName.should.equal('Last');
         result.level.should.equal('full');
         result.profile.should.equal('complete-controls/v1');
+        result.profileSlots!.should.deep.equal([
+            'common.button',
+            'common.tooltip',
+        ]);
         result.slots['common.button']!.render.should.equal(LastButton);
         result.slots['common.tooltip']!.render.should.equal(Tooltip);
     });
diff --git a/Source/renderer/for_manifest/when_defining_a_ui_library.ts b/Source/renderer/for_manifest/when_defining_a_ui_library.ts
index ddef0dab..5d4ed2cb 100644
--- a/Source/renderer/for_manifest/when_defining_a_ui_library.ts
+++ b/Source/renderer/for_manifest/when_defining_a_ui_library.ts
@@ -6,7 +6,9 @@ import type { ButtonProps } from '../../Common/Button';
 import {
     unstable_defineUiLibrary,
     type unstable_CapabilityId,
+    type unstable_SlotId,
     type unstable_SlotMap,
+    type unstable_UiLibrary,
 } from '..';
 
 const Button = (() => null) as ComponentType<ButtonProps>;
@@ -21,26 +23,51 @@ describe('when defining a UI library', () => {
                 render: Button,
             },
         };
+        const profileSlots: unstable_SlotId[] = ['common.button'];
         const input = {
             id: 'sample',
             displayName: 'Sample',
             abi: 1,
             level: 'primitive' as const,
             profile: 'basic-controls/v1',
+            profileSlots,
             capabilities,
             slots,
         };
 
         const result = unstable_defineUiLibrary(input);
         capabilities.push('theme.tokens');
+        profileSlots.push('common.tooltip');
         Reflect.deleteProperty(slots, 'common.button');
 
         result.should.not.equal(input);
         result.capabilities.should.deep.equal(['slot.render']);
+        result.profileSlots!.should.deep.equal(['common.button']);
         result.slots.should.have.property('common.button');
         Object.isFrozen(result).should.equal(true);
         Object.isFrozen(result.capabilities).should.equal(true);
+        Object.isFrozen(result.profileSlots).should.equal(true);
         Object.isFrozen(result.slots).should.equal(true);
         Object.isFrozen(result.slots['common.button']).should.equal(true);
     });
+
+    it('should default profile slots to the library own slot keys', () => {
+        const result: unstable_UiLibrary = unstable_defineUiLibrary({
+            id: 'sample',
+            displayName: 'Sample',
+            abi: 1,
+            level: 'primitive',
+            profile: 'basic-controls/v1',
+            capabilities: ['slot.render'],
+            slots: {
+                'common.button': {
+                    mode: 'presentation',
+                    fidelity: 'native',
+                    render: Button,
+                },
+            },
+        });
+
+        result.profileSlots!.should.deep.equal(['common.button']);
+    });
 });
diff --git a/Source/renderer/for_resolution/testLibrary.tsx b/Source/renderer/for_resolution/testLibrary.tsx
new file mode 100644
index 00000000..a426d4e6
--- /dev/null
+++ b/Source/renderer/for_resolution/testLibrary.tsx
@@ -0,0 +1,47 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { ComponentType } from 'react';
+import type { ButtonProps } from '../../Common/Button';
+import type { TooltipProps } from '../../Common/Tooltip';
+import {
+    unstable_defineUiLibrary,
+    type unstable_SlotMap,
+    type unstable_UiLibrary,
+} from '..';
+
+export const FirstButton = (() => <span>first-button</span>) as ComponentType<ButtonProps>;
+export const LastButton = (() => <span>last-button</span>) as ComponentType<ButtonProps>;
+export const FirstTooltip = (() => <span>first-tooltip</span>) as ComponentType<TooltipProps>;
+export const LastTooltip = (() => <span>last-tooltip</span>) as ComponentType<TooltipProps>;
+
+export const buttonSlot = (render: ComponentType<ButtonProps>): unstable_SlotMap => ({
+    'common.button': {
+        mode: 'presentation',
+        fidelity: 'native',
+        render,
+    },
+});
+
+export const tooltipSlot = (render: ComponentType<TooltipProps>): unstable_SlotMap => ({
+    'common.tooltip': {
+        mode: 'atomic',
+        fidelity: 'native',
+        render,
+    },
+});
+
+export const createTestLibrary = (
+    id: string,
+    slots: unstable_SlotMap,
+    overrides: Partial<Omit<unstable_UiLibrary, 'id' | 'slots'>> = {},
+): unstable_UiLibrary => unstable_defineUiLibrary({
+    displayName: id,
+    abi: 1,
+    level: 'primitive',
+    profile: 'test-controls/v1',
+    capabilities: ['slot.render'],
+    ...overrides,
+    id,
+    slots,
+});
diff --git a/Source/renderer/for_resolution/when_resolving_slots.tsx b/Source/renderer/for_resolution/when_resolving_slots.tsx
new file mode 100644
index 00000000..314007e6
--- /dev/null
+++ b/Source/renderer/for_resolution/when_resolving_slots.tsx
@@ -0,0 +1,171 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { renderToStaticMarkup } from 'react-dom/server';
+import sinon from 'sinon';
+import { CratisComponentsProvider } from '../../Common/CratisComponentsProvider';
+import {
+    unstable_AdapterError,
+    unstable_adapterErrorCodes,
+    unstable_RendererScope as RendererScope,
+    unstable_useSlot,
+    type unstable_SlotId,
+} from '..';
+import {
+    buttonSlot,
+    createTestLibrary,
+    FirstButton,
+    FirstTooltip,
+    LastButton,
+    LastTooltip,
+    tooltipSlot,
+} from './testLibrary';
+
+const ResolutionProbe = () => {
+    const button = unstable_useSlot('common.button')?.render;
+    const tooltip = unstable_useSlot('common.tooltip')?.render;
+    const buttonId = button === FirstButton ? 'first' : button === LastButton ? 'last' : 'missing';
+    const tooltipId = tooltip === FirstTooltip ? 'first' : tooltip === LastTooltip ? 'last' : 'missing';
+    return <span data-button={buttonId} data-tooltip={tooltipId} />;
+};
+
+const MissingProbe = () => {
+    const declaration = unstable_useSlot('common.tooltip');
+    return <span>{declaration ? 'found' : 'missing'}</span>;
+};
+
+const combinedSlots = (
+    button: typeof FirstButton,
+    tooltip: typeof FirstTooltip,
+) => ({
+    ...buttonSlot(button),
+    ...tooltipSlot(tooltip),
+});
+
+describe('when resolving renderer slots', () => {
+    it('should compose provider arrays with last-library-wins slots', () => {
+        const first = createTestLibrary('first', buttonSlot(FirstButton));
+        const last = createTestLibrary('last', buttonSlot(LastButton));
+
+        const html = renderToStaticMarkup(
+            <CratisComponentsProvider library={[first, last]}>
+                <ResolutionProbe />
+            </CratisComponentsProvider>,
+        );
+
+        html.should.contain('data-button="last"');
+    });
+
+    it('should use the nearest scope only for its allowed slots', () => {
+        const outer = createTestLibrary(
+            'outer',
+            combinedSlots(FirstButton, FirstTooltip),
+        );
+        const inner = createTestLibrary(
+            'inner',
+            combinedSlots(LastButton, LastTooltip),
+        );
+
+        const html = renderToStaticMarkup(
+            <CratisComponentsProvider library={outer}>
+                <RendererScope use={inner} only={['common.button']}>
+                    <ResolutionProbe />
+                </RendererScope>
+            </CratisComponentsProvider>,
+        );
+
+        html.should.contain('data-button="last"');
+        html.should.contain('data-tooltip="first"');
+    });
+
+    it('should reject unknown runtime scope slots', () => {
+        const outer = createTestLibrary('outer', buttonSlot(FirstButton));
+        const inner = createTestLibrary('inner', buttonSlot(LastButton));
+        const invalidOnly = ['unknown.slot'] as unknown as readonly unstable_SlotId[];
+        let error: unknown;
+
+        try {
+            renderToStaticMarkup(
+                <CratisComponentsProvider library={outer}>
+                    <RendererScope use={inner} only={invalidOnly}>
+                        <span />
+                    </RendererScope>
+                </CratisComponentsProvider>,
+            );
+        } catch (caught: unknown) {
+            error = caught;
+        }
+
+        error.should.be.instanceOf(unstable_AdapterError);
+        (error as unstable_AdapterError).code.should.equal(
+            unstable_adapterErrorCodes.missingRequirement,
+        );
+    });
+
+    it('should use the empty Core fallback deterministically and log once per provider', () => {
+        const consoleError = sinon.stub(console, 'error');
+        const DuplicateFallbackProbe = () => {
+            unstable_useSlot('common.tooltip');
+            unstable_useSlot('common.tooltip');
+            return <span>missing</span>;
+        };
+
+        try {
+            const html = renderToStaticMarkup(
+                <CratisComponentsProvider>
+                    <DuplicateFallbackProbe />
+                </CratisComponentsProvider>,
+            );
+
+            html.should.equal('<span>missing</span>');
+            consoleError.callCount.should.equal(1);
+            String(consoleError.firstCall.firstArg).should.contain(
+                unstable_adapterErrorCodes.strictProfileFallback,
+            );
+        } finally {
+            consoleError.restore();
+        }
+    });
+
+    it('should allow fallback outside a declared profile promise', () => {
+        const library = createTestLibrary('button-only', buttonSlot(FirstButton), {
+            profileSlots: ['common.button'],
+        });
+        const consoleError = sinon.stub(console, 'error');
+
+        try {
+            const html = renderToStaticMarkup(
+                <CratisComponentsProvider library={library}>
+                    <MissingProbe />
+                </CratisComponentsProvider>,
+            );
+
+            html.should.equal('<span>missing</span>');
+            consoleError.callCount.should.equal(1);
+        } finally {
+            consoleError.restore();
+        }
+    });
+
+    it('should throw CRATIS-UI-1003 at a throw fallback terminal', () => {
+        const consoleError = sinon.stub(console, 'error');
+        let error: unknown;
+
+        try {
+            renderToStaticMarkup(
+                <CratisComponentsProvider rendererFallback='throw'>
+                    <MissingProbe />
+                </CratisComponentsProvider>,
+            );
+        } catch (caught: unknown) {
+            error = caught;
+        } finally {
+            consoleError.restore();
+        }
+
+        error.should.be.instanceOf(unstable_AdapterError);
+        (error as unstable_AdapterError).code.should.equal(
+            unstable_adapterErrorCodes.strictProfileFallback,
+        );
+    });
+});
diff --git a/Source/renderer/for_resolution/when_using_provider_setup.tsx b/Source/renderer/for_resolution/when_using_provider_setup.tsx
new file mode 100644
index 00000000..ff8d84d5
--- /dev/null
+++ b/Source/renderer/for_resolution/when_using_provider_setup.tsx
@@ -0,0 +1,85 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { renderToStaticMarkup } from 'react-dom/server';
+import { CratisComponentsProvider } from '../../Common/CratisComponentsProvider';
+import {
+    unstable_useCapability,
+    unstable_useOverlayEnvironment,
+    unstable_useRendererId,
+} from '..';
+import { buttonSlot, createTestLibrary, FirstButton } from './testLibrary';
+
+const RendererProbe = () => {
+    const rendererId = unstable_useRendererId();
+    const canRender = unstable_useCapability('slot.render');
+    return <span data-renderer={rendererId}>{String(canRender)}</span>;
+};
+
+describe('when using renderer provider setup', () => {
+    it('should preserve zero-config static markup exactly', () => {
+        const html = renderToStaticMarkup(
+            <CratisComponentsProvider>
+                <span>unchanged</span>
+            </CratisComponentsProvider>,
+        );
+
+        html.should.equal('<span>unchanged</span>');
+    });
+
+    it('should expose capabilities and renderer identity from the same source context', () => {
+        const library = createTestLibrary('sample-renderer', buttonSlot(FirstButton));
+        const html = renderToStaticMarkup(
+            <CratisComponentsProvider library={library}>
+                <RendererProbe />
+            </CratisComponentsProvider>,
+        );
+
+        html.should.contain('data-renderer="sample-renderer"');
+        html.should.contain('>true</span>');
+    });
+
+    it('should wrap children with the selected library Provider exactly once', () => {
+        let providerRenders = 0;
+        const LibraryProvider = ({ children }: { children: React.ReactNode }) => {
+            providerRenders += 1;
+            return <section data-library-provider>{children}</section>;
+        };
+        const library = createTestLibrary('wrapped', buttonSlot(FirstButton), {
+            Provider: LibraryProvider,
+        });
+
+        const html = renderToStaticMarkup(
+            <CratisComponentsProvider library={library}>
+                <span>child</span>
+            </CratisComponentsProvider>,
+        );
+
+        providerRenders.should.equal(1);
+        (html.match(/data-library-provider/g) ?? []).should.have.lengthOf(1);
+    });
+
+    it('should not invoke the overlay environment during render without document', () => {
+        let invocations = 0;
+        const overlayEnvironment = {
+            getContainer: () => {
+                invocations += 1;
+                return null;
+            },
+        };
+        const OverlayProbe = () => {
+            unstable_useOverlayEnvironment();
+            return <span>server-safe</span>;
+        };
+
+        const html = renderToStaticMarkup(
+            <CratisComponentsProvider overlayEnvironment={overlayEnvironment}>
+                <OverlayProbe />
+            </CratisComponentsProvider>,
+        );
+
+        html.should.equal('<span>server-safe</span>');
+        invocations.should.equal(0);
+        (typeof document).should.equal('undefined');
+    });
+});
diff --git a/Source/renderer/for_resolution/when_validating_renderer_libraries.tsx b/Source/renderer/for_resolution/when_validating_renderer_libraries.tsx
new file mode 100644
index 00000000..77684b72
--- /dev/null
+++ b/Source/renderer/for_resolution/when_validating_renderer_libraries.tsx
@@ -0,0 +1,158 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { act } from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { createRoot } from 'react-dom/client';
+import sinon from 'sinon';
+import { CratisComponentsProvider } from '../../Common/CratisComponentsProvider';
+import {
+    unstable_AdapterError,
+    unstable_adapterErrorCodes,
+    type unstable_UiLibrary,
+} from '..';
+import {
+    buttonSlot,
+    createTestLibrary,
+    FirstButton,
+} from './testLibrary';
+
+const captureRendererError = (render: () => unknown): unstable_AdapterError => {
+    try {
+        render();
+    } catch (error: unknown) {
+        if (error instanceof unstable_AdapterError) return error;
+        throw error;
+    }
+    throw new Error('Expected renderer setup to fail.');
+};
+
+const renderLibraryError = (library: unstable_UiLibrary): unstable_AdapterError =>
+    captureRendererError(() => renderToStaticMarkup(
+        <CratisComponentsProvider library={library}>
+            <span />
+        </CratisComponentsProvider>,
+    ));
+
+describe('when validating renderer libraries', () => {
+    it('should reject an ABI mismatch with CRATIS-UI-1001', () => {
+        const library = createTestLibrary('wrong-abi', buttonSlot(FirstButton), {
+            abi: 2,
+        });
+
+        const error = renderLibraryError(library);
+
+        error.code.should.equal(unstable_adapterErrorCodes.abiMismatch);
+        error.diagnostic.adapterId.should.equal('wrong-abi');
+    });
+
+    it('should reject a missing promised profile slot with CRATIS-UI-1002', () => {
+        const library = createTestLibrary('profile-gap', {}, {
+            profileSlots: ['common.button'],
+        });
+
+        const error = renderLibraryError(library);
+
+        error.code.should.equal(unstable_adapterErrorCodes.missingRequirement);
+        error.diagnostic.slotId.should.equal('common.button');
+    });
+
+    it('should reject an unsupported promised profile slot', () => {
+        const library = createTestLibrary('unsupported-slot', {
+            'common.button': {
+                mode: 'presentation',
+                fidelity: 'unsupported',
+                render: FirstButton,
+            },
+        });
+
+        const error = renderLibraryError(library);
+
+        error.code.should.equal(unstable_adapterErrorCodes.missingRequirement);
+        error.diagnostic.slotId!.should.equal('common.button');
+    });
+
+    it('should reject a promised profile without its required render capability', () => {
+        const library = createTestLibrary('capability-gap', buttonSlot(FirstButton), {
+            capabilities: [],
+        });
+
+        const error = renderLibraryError(library);
+
+        error.code.should.equal(unstable_adapterErrorCodes.missingRequirement);
+        error.message.should.contain('slot.render');
+    });
+
+    it('should preserve a supplied preflight diagnostic code', () => {
+        const library = createTestLibrary('licensed', buttonSlot(FirstButton), {
+            preflight: () => [{
+                code: unstable_adapterErrorCodes.missingLicenseKey,
+                adapterId: 'licensed',
+                message: 'A license key is required.',
+                remedy: 'Configure the adapter license key.',
+            }],
+        });
+
+        const error = renderLibraryError(library);
+
+        error.code.should.equal(unstable_adapterErrorCodes.missingLicenseKey);
+    });
+
+    it('should run preflight once and log its diagnostic once per provider identity in degrade mode', async () => {
+        (
+            globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
+        ).IS_REACT_ACT_ENVIRONMENT = true;
+        let preflightRuns = 0;
+        const library = createTestLibrary('degraded', buttonSlot(FirstButton), {
+            preflight: () => {
+                preflightRuns += 1;
+                return [{
+                    code: unstable_adapterErrorCodes.missingUpstreamPeer,
+                    adapterId: 'degraded',
+                    message: 'The renderer peer is missing.',
+                    remedy: 'Install the renderer peer.',
+                }];
+            },
+        });
+        const consoleError = sinon.stub(console, 'error');
+        const container = document.createElement('div');
+        const root = createRoot(container);
+        const content = (
+            <CratisComponentsProvider library={library} libraryMode='degrade'>
+                <span>content</span>
+            </CratisComponentsProvider>
+        );
+
+        try {
+            await act(async () => root.render(content));
+            await act(async () => root.render(content));
+
+            preflightRuns.should.equal(1);
+            consoleError.callCount.should.equal(1);
+            String(consoleError.firstCall.firstArg).should.contain(
+                unstable_adapterErrorCodes.missingUpstreamPeer,
+            );
+        } finally {
+            await act(async () => root.unmount());
+            consoleError.restore();
+        }
+    });
+
+    it('should diagnose conflicting nested provider libraries with CRATIS-UI-1006', () => {
+        const outer = createTestLibrary('outer', buttonSlot(FirstButton));
+        const inner = createTestLibrary('inner', buttonSlot(FirstButton));
+
+        const error = captureRendererError(() => renderToStaticMarkup(
+            <CratisComponentsProvider library={outer}>
+                <CratisComponentsProvider library={inner}>
+                    <span />
+                </CratisComponentsProvider>
+            </CratisComponentsProvider>,
+        ));
+
+        error.code.should.equal(unstable_adapterErrorCodes.nestedLibraries);
+        error.diagnostic.adapterId.should.equal('inner');
+    });
+});
diff --git a/Source/renderer/for_slot_types/slotTyping.fixture.ts b/Source/renderer/for_slot_types/slotTyping.fixture.ts
index 58523384..a10922db 100644
--- a/Source/renderer/for_slot_types/slotTyping.fixture.ts
+++ b/Source/renderer/for_slot_types/slotTyping.fixture.ts
@@ -2,17 +2,25 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import type { ComponentType } from 'react';
+import type { CratisComponentsProviderProps } from '@cratis/components';
 import type {
     unstable_BehaviorMode,
     unstable_CratisSlots,
     unstable_SlotId,
     unstable_SlotMap,
+    unstable_UiLibrary,
 } from '@cratis/components/renderer';
 
 declare const Button: ComponentType<unstable_CratisSlots['common.button']>;
 declare const TextInput: ComponentType<unstable_CratisSlots['common.textInput']>;
 declare const Tooltip: ComponentType<unstable_CratisSlots['common.tooltip']>;
+declare const library: unstable_UiLibrary;
 
+const providerSetup: Omit<CratisComponentsProviderProps, 'children'> = {
+    library,
+    libraryMode: 'strict',
+    rendererFallback: 'core',
+};
 const slotId: unstable_SlotId = 'common.button';
 const mode: unstable_BehaviorMode = 'presentation';
 const slots = {
@@ -35,6 +43,7 @@ const wrongProps: unstable_SlotMap = {
     'common.button': { mode: 'presentation', fidelity: 'native', render: Tooltip },
 };
 
+void providerSetup;
 void slotId;
 void slots;
 void unknownSlot;

From 662b26f8e93ae197f68ea9e33bb753778e9b5673 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 19:58:54 +0200
Subject: [PATCH 178/267] Defer renderer diagnostics until mount

Keep SSR and render phases side-effect-free while reporting each fallback once after commit.
---
 Source/renderer/RendererContext.tsx           | 24 ++++---
 .../when_reporting_fallback_diagnostics.tsx   | 70 +++++++++++++++++++
 .../for_resolution/when_resolving_slots.tsx   | 32 ++++-----
 3 files changed, 100 insertions(+), 26 deletions(-)
 create mode 100644 Source/renderer/for_resolution/when_reporting_fallback_diagnostics.tsx

diff --git a/Source/renderer/RendererContext.tsx b/Source/renderer/RendererContext.tsx
index 3e4f5407..6caa4c9e 100644
--- a/Source/renderer/RendererContext.tsx
+++ b/Source/renderer/RendererContext.tsx
@@ -206,24 +206,28 @@ export const unstable_useSlot = <K extends unstable_SlotId>(
         context?.coreSlots ?? unstable_emptyCoreRendererSlots,
     );
 
-    if (result.usedCoreFallback) {
-        const diagnostic = fallbackDiagnostic(context, slotId);
+    const diagnostic = result.usedCoreFallback
+        ? fallbackDiagnostic(context, slotId)
+        : undefined;
+
+    useEffect(() => {
+        if (!diagnostic) return;
         if (context) {
             context.reportDiagnostic(diagnostic);
-        } else {
-            const key = unstable_diagnosticKey(diagnostic);
-            if (!localReportedDiagnostics.current.has(key)) {
-                localReportedDiagnostics.current.add(key);
-                unstable_logDiagnostic(diagnostic);
-            }
+            return;
         }
-    }
+        const key = unstable_diagnosticKey(diagnostic);
+        if (!localReportedDiagnostics.current.has(key)) {
+            localReportedDiagnostics.current.add(key);
+            unstable_logDiagnostic(diagnostic);
+        }
+    }, [context, diagnostic]);
 
     if (
         !result.declaration &&
         (context?.rendererFallback ?? 'core') === 'throw'
     ) {
-        throw new unstable_AdapterError(fallbackDiagnostic(context, slotId));
+        throw new unstable_AdapterError(diagnostic ?? fallbackDiagnostic(context, slotId));
     }
 
     return result.declaration;
diff --git a/Source/renderer/for_resolution/when_reporting_fallback_diagnostics.tsx b/Source/renderer/for_resolution/when_reporting_fallback_diagnostics.tsx
new file mode 100644
index 00000000..d6f6553e
--- /dev/null
+++ b/Source/renderer/for_resolution/when_reporting_fallback_diagnostics.tsx
@@ -0,0 +1,70 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { expect } from 'chai';
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import sinon, { type SinonStub } from 'sinon';
+import { afterEach, beforeEach, describe, it } from 'vitest';
+import { CratisComponentsProvider } from '../../Common/CratisComponentsProvider';
+import {
+    unstable_adapterErrorCodes,
+    unstable_useSlot,
+} from '..';
+
+const DuplicateFallbackProbe = () => {
+    unstable_useSlot('common.tooltip');
+    unstable_useSlot('common.tooltip');
+    return <span>missing</span>;
+};
+
+describe('when reporting renderer fallback diagnostics', () => {
+    let container: HTMLDivElement;
+    let root: Root;
+    let consoleError: SinonStub;
+
+    beforeEach(() => {
+        // SAFETY: React's test-only act flag is intentionally absent from the DOM global type.
+        (
+            globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
+        ).IS_REACT_ACT_ENVIRONMENT = true;
+        container = document.createElement('div');
+        document.body.append(container);
+        root = createRoot(container);
+        consoleError = sinon.stub(console, 'error');
+    });
+
+    afterEach(async () => {
+        await act(async () => root.unmount());
+        container.remove();
+        consoleError.restore();
+    });
+
+    it('should report one actionable diagnostic after mount, never during render', async () => {
+        await act(async () => {
+            root.render(
+                <CratisComponentsProvider>
+                    <DuplicateFallbackProbe />
+                </CratisComponentsProvider>,
+            );
+        });
+
+        expect(container.textContent).to.equal('missing');
+        expect(consoleError.callCount).to.equal(1);
+        expect(String(consoleError.firstCall.firstArg)).to.contain(
+            unstable_adapterErrorCodes.strictProfileFallback,
+        );
+
+        await act(async () => {
+            root.render(
+                <CratisComponentsProvider>
+                    <DuplicateFallbackProbe />
+                </CratisComponentsProvider>,
+            );
+        });
+
+        expect(consoleError.callCount).to.equal(1);
+    });
+});
diff --git a/Source/renderer/for_resolution/when_resolving_slots.tsx b/Source/renderer/for_resolution/when_resolving_slots.tsx
index 314007e6..e9f88282 100644
--- a/Source/renderer/for_resolution/when_resolving_slots.tsx
+++ b/Source/renderer/for_resolution/when_resolving_slots.tsx
@@ -1,8 +1,10 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
+import { expect } from 'chai';
 import { renderToStaticMarkup } from 'react-dom/server';
 import sinon from 'sinon';
+import { describe, it } from 'vitest';
 import { CratisComponentsProvider } from '../../Common/CratisComponentsProvider';
 import {
     unstable_AdapterError,
@@ -53,7 +55,7 @@ describe('when resolving renderer slots', () => {
             </CratisComponentsProvider>,
         );
 
-        html.should.contain('data-button="last"');
+        expect(html).to.contain('data-button="last"');
     });
 
     it('should use the nearest scope only for its allowed slots', () => {
@@ -74,13 +76,14 @@ describe('when resolving renderer slots', () => {
             </CratisComponentsProvider>,
         );
 
-        html.should.contain('data-button="last"');
-        html.should.contain('data-tooltip="first"');
+        expect(html).to.contain('data-button="last"');
+        expect(html).to.contain('data-tooltip="first"');
     });
 
     it('should reject unknown runtime scope slots', () => {
         const outer = createTestLibrary('outer', buttonSlot(FirstButton));
         const inner = createTestLibrary('inner', buttonSlot(LastButton));
+        // SAFETY: The fixture intentionally bypasses the public slot union to exercise runtime validation.
         const invalidOnly = ['unknown.slot'] as unknown as readonly unstable_SlotId[];
         let error: unknown;
 
@@ -96,13 +99,13 @@ describe('when resolving renderer slots', () => {
             error = caught;
         }
 
-        error.should.be.instanceOf(unstable_AdapterError);
-        (error as unstable_AdapterError).code.should.equal(
+        expect(error).to.be.instanceOf(unstable_AdapterError);
+        expect((error as unstable_AdapterError).code).to.equal(
             unstable_adapterErrorCodes.missingRequirement,
         );
     });
 
-    it('should use the empty Core fallback deterministically and log once per provider', () => {
+    it('should use the empty Core fallback deterministically without logging during SSR render', () => {
         const consoleError = sinon.stub(console, 'error');
         const DuplicateFallbackProbe = () => {
             unstable_useSlot('common.tooltip');
@@ -117,17 +120,14 @@ describe('when resolving renderer slots', () => {
                 </CratisComponentsProvider>,
             );
 
-            html.should.equal('<span>missing</span>');
-            consoleError.callCount.should.equal(1);
-            String(consoleError.firstCall.firstArg).should.contain(
-                unstable_adapterErrorCodes.strictProfileFallback,
-            );
+            expect(html).to.equal('<span>missing</span>');
+            expect(consoleError.callCount).to.equal(0);
         } finally {
             consoleError.restore();
         }
     });
 
-    it('should allow fallback outside a declared profile promise', () => {
+    it('should allow fallback outside a declared profile promise without render side effects', () => {
         const library = createTestLibrary('button-only', buttonSlot(FirstButton), {
             profileSlots: ['common.button'],
         });
@@ -140,8 +140,8 @@ describe('when resolving renderer slots', () => {
                 </CratisComponentsProvider>,
             );
 
-            html.should.equal('<span>missing</span>');
-            consoleError.callCount.should.equal(1);
+            expect(html).to.equal('<span>missing</span>');
+            expect(consoleError.callCount).to.equal(0);
         } finally {
             consoleError.restore();
         }
@@ -163,8 +163,8 @@ describe('when resolving renderer slots', () => {
             consoleError.restore();
         }
 
-        error.should.be.instanceOf(unstable_AdapterError);
-        (error as unstable_AdapterError).code.should.equal(
+        expect(error).to.be.instanceOf(unstable_AdapterError);
+        expect((error as unstable_AdapterError).code).to.equal(
             unstable_adapterErrorCodes.strictProfileFallback,
         );
     });

From f040470fd2e9fe97a9790b64f0a4efc22128beba Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 19:58:54 +0200
Subject: [PATCH 179/267] Allow React in renderer runtime boundary

Renderer hooks and scopes may depend on the React framework peer while vendor, component-family, and all other runtime edges remain forbidden.
---
 .../when_classifying_package_boundaries.ts    | 26 ++++++++++++++-----
 Source/scripts/lib/dependency-graph.mjs       | 17 +++++++++---
 Source/scripts/verify-package-graph.mjs       |  4 +--
 3 files changed, 36 insertions(+), 11 deletions(-)

diff --git a/Source/scripts/for_dependency_graph/when_classifying_package_boundaries.ts b/Source/scripts/for_dependency_graph/when_classifying_package_boundaries.ts
index d23a2a9a..9b9fa98a 100644
--- a/Source/scripts/for_dependency_graph/when_classifying_package_boundaries.ts
+++ b/Source/scripts/for_dependency_graph/when_classifying_package_boundaries.ts
@@ -5,6 +5,7 @@ import { describe, expect, it } from 'vitest';
 import {
     analyzeRendererBoundary,
     isPixiSpecifier,
+    isRendererFrameworkRuntimeSpecifier,
     isRendererVendorSpecifier,
     rendererBoundaryReport,
 } from '../lib/dependency-graph.mjs';
@@ -61,8 +62,8 @@ describe('when classifying package boundaries', () => {
                 ['Common'],
             ),
         ).toMatchObject({
-            status: 'failed',
-            runtimeExternalDependencies: ['react'],
+            status: 'passed',
+            runtimeExternalDependencies: [],
         });
     });
 
@@ -83,16 +84,29 @@ describe('when classifying package boundaries', () => {
         expect(result.violations).toEqual([]);
     });
 
-    it('should report runtime external dependencies', () => {
+    it.each(['react', 'react/jsx-runtime'])(
+        'should allow renderer framework runtime dependency %s',
+        (specifier: string) => {
+            expect(isRendererFrameworkRuntimeSpecifier(specifier)).toBe(true);
+            const result = analyzeRendererBoundary(
+                { files: ['renderer/index.js'], external: [specifier] },
+                emptyClosure,
+                ['Common'],
+            );
+            expect(result.violations).toEqual([]);
+        },
+    );
+
+    it('should report non-framework runtime external dependencies', () => {
         const result = analyzeRendererBoundary(
-            { files: ['renderer/index.js'], external: ['react', 'react'] },
+            { files: ['renderer/index.js'], external: ['react', 'left-pad'] },
             emptyClosure,
             ['Common'],
         );
 
-        expect(result.runtimeExternalDependencies).toEqual(['react']);
+        expect(result.runtimeExternalDependencies).toEqual(['left-pad']);
         expect(result.violations).toEqual([
-            'runtime closure reaches external dependencies: react',
+            'runtime closure reaches external dependencies: left-pad',
         ]);
     });
 
diff --git a/Source/scripts/lib/dependency-graph.mjs b/Source/scripts/lib/dependency-graph.mjs
index 6d1ae0d0..c89d80f7 100644
--- a/Source/scripts/lib/dependency-graph.mjs
+++ b/Source/scripts/lib/dependency-graph.mjs
@@ -122,17 +122,28 @@ export const isRendererVendorSpecifier = (specifier) =>
     specifier.startsWith('@primereact/') ||
     specifier.startsWith('@primeuix/');
 
+/** True for the React framework runtime imports required by renderer hooks and scopes. */
+export const isRendererFrameworkRuntimeSpecifier = (specifier) =>
+    specifier === 'react' || specifier === 'react/jsx-runtime';
+
 /**
  * Classifies the renderer export's runtime and declaration closures without reading the file system.
- * Runtime code may not depend on external packages or component implementations. Declarations may
- * refer to Components-owned prop declarations and React types, but never renderer-vendor types.
+ * Runtime code may depend only on the React framework peer, never vendor packages or component
+ * implementations. Declarations may refer to Components-owned prop declarations and React types,
+ * but never renderer-vendor types.
  */
 export function analyzeRendererBoundary(
     runtimeClosure,
     declarationClosure,
     componentImplementationDirectories,
 ) {
-    const runtimeExternalDependencies = [...new Set(runtimeClosure.external)].sort();
+    const runtimeExternalDependencies = [
+        ...new Set(
+            runtimeClosure.external.filter(
+                specifier => !isRendererFrameworkRuntimeSpecifier(specifier),
+            ),
+        ),
+    ].sort();
     const runtimeComponentImplementationFiles = [
         ...new Set(
             runtimeClosure.files.filter((file) =>
diff --git a/Source/scripts/verify-package-graph.mjs b/Source/scripts/verify-package-graph.mjs
index fd8fdf8b..045afdff 100644
--- a/Source/scripts/verify-package-graph.mjs
+++ b/Source/scripts/verify-package-graph.mjs
@@ -25,7 +25,7 @@
  *   3. Renderer-vendor imports (`@mui/*`, `@emotion/*`, PrimeReact, and PrimeUIX)
  *      are forbidden from every emitted runtime and declaration file.
  *   4. When `./renderer` is exported, its runtime closure has no external dependency
- *      and reaches no component implementation directory. Its declaration closure may
+ *      beyond the React framework peer and reaches no component implementation directory. Its declaration closure may
  *      reach Components-owned prop declarations and React types, but no renderer vendor.
  *      The check is explicitly deferred until that export exists.
  *
@@ -292,7 +292,7 @@ if (rendererBoundary.status === 'deferred') {
     );
 } else {
     console.log(
-        `Renderer boundary check passed: runtime has no external or component-implementation edges, ` +
+        `Renderer boundary check passed: runtime has no non-React external or component-implementation edges, ` +
             `and declarations have no renderer-vendor type edges.`,
     );
 }

From 6f1a47379096726449ae7c7761d321a59e848796 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 20:01:13 +0200
Subject: [PATCH 180/267] Preserve open renderer interfaces

Keep declaration-merging contracts as interfaces while narrowly suppressing style rules that would convert them into non-mergeable type aliases.
---
 Source/renderer/manifest.ts | 2 ++
 Source/renderer/slots.ts    | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/Source/renderer/manifest.ts b/Source/renderer/manifest.ts
index 02635aa1..0c72fa58 100644
--- a/Source/renderer/manifest.ts
+++ b/Source/renderer/manifest.ts
@@ -51,6 +51,8 @@ export interface unstable_UiLibrary {
  * @unstable Adapter-author contract. Expect changes until renderer conformance gates promote it.
  */
 // Adapter packages add only their own vendor key through declaration merging.
+// biome-ignore lint/style/useConsistentTypeDefinitions: declaration merging requires an interface.
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
 export interface unstable_RendererExtensions extends Record<never, never> {}
 
 /**
diff --git a/Source/renderer/slots.ts b/Source/renderer/slots.ts
index 5780a986..d7099407 100644
--- a/Source/renderer/slots.ts
+++ b/Source/renderer/slots.ts
@@ -11,6 +11,8 @@ import type { ComponentType } from 'react';
  * @unstable Adapter-author contract. Expect changes until renderer conformance gates promote it.
  */
 // Core slot members are supplied by the renderer subpath barrel's type augmentation.
+// biome-ignore lint/style/useConsistentTypeDefinitions: declaration merging requires an interface.
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
 export interface unstable_CratisSlots extends Record<never, never> {}
 
 /**

From 98d74e03945673c04d5287dccf424be39dac0c49 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 20:05:56 +0200
Subject: [PATCH 181/267] Keep zero-config renderer fallback silent

Defer adapter fallback diagnostics until mount, deduplicate them per provider, and treat Core as the normal zero-config path.
---
 Source/renderer/RendererContext.tsx           | 121 +++++++++---------
 .../when_reporting_fallback_diagnostics.tsx   |  29 ++++-
 .../for_resolution/when_resolving_slots.tsx   |  16 +--
 3 files changed, 90 insertions(+), 76 deletions(-)

diff --git a/Source/renderer/RendererContext.tsx b/Source/renderer/RendererContext.tsx
index 6caa4c9e..654f6a9d 100644
--- a/Source/renderer/RendererContext.tsx
+++ b/Source/renderer/RendererContext.tsx
@@ -62,8 +62,9 @@ export interface unstable_RendererRootProps {
 }
 
 /** One source-owned context singleton. It is deliberately not exported from the renderer barrel. */
-export const unstable_RendererContext =
-    createContext<unstable_RendererContextValue | undefined>(undefined);
+export const unstable_RendererContext = createContext<
+    unstable_RendererContextValue | undefined
+>(undefined);
 
 const nestedLibraryDiagnostic = (
     library: unstable_UiLibrary,
@@ -86,7 +87,8 @@ export const unstable_RendererRoot = ({
     const parent = useContext(unstable_RendererContext);
     const selected = useMemo(() => unstable_resolveLibraryInput(library), [library]);
     const layer = useMemo(
-        () => selected.library ? unstable_createRendererLayer(selected.library) : undefined,
+        () =>
+            selected.library ? unstable_createRendererLayer(selected.library) : undefined,
         [selected],
     );
     const reportedDiagnostics = useRef(new Set<string>());
@@ -98,10 +100,12 @@ export const unstable_RendererRoot = ({
     }, []);
 
     const diagnostics = useMemo(() => {
-        if (!selected.library) return Object.freeze([]) as readonly unstable_AdapterDiagnostic[];
+        if (!selected.library)
+            return Object.freeze([]) as readonly unstable_AdapterDiagnostic[];
 
-        const currentDiagnostics = selected.references.flatMap(reference =>
-            unstable_validateUiLibrary(reference));
+        const currentDiagnostics = selected.references.flatMap((reference) =>
+            unstable_validateUiLibrary(reference),
+        );
         if (
             parent?.providerLibraryReferences.length &&
             !unstable_sameLibraryReferences(
@@ -125,49 +129,48 @@ export const unstable_RendererRoot = ({
     }
 
     const layers = useMemo(
-        () => Object.freeze([
-            ...(parent?.layers ?? []),
-            ...(layer ? [layer] : []),
-        ]),
+        () => Object.freeze([...(parent?.layers ?? []), ...(layer ? [layer] : [])]),
         [layer, parent?.layers],
     );
-    const slots = useMemo(
-        () => unstable_createResolvedSlotTable(layers),
-        [layers],
-    );
+    const slots = useMemo(() => unstable_createResolvedSlotTable(layers), [layers]);
     const resolvedCoreSlots = useMemo(
-        () => coreSlots
-            ? Object.freeze({ ...coreSlots })
-            : parent?.coreSlots ?? unstable_emptyCoreRendererSlots,
+        () =>
+            coreSlots
+                ? Object.freeze({ ...coreSlots })
+                : (parent?.coreSlots ?? unstable_emptyCoreRendererSlots),
         [coreSlots, parent?.coreSlots],
     );
-    const value = useMemo<unstable_RendererContextValue>(() => Object.freeze({
-        layers,
-        slots,
-        libraryMode,
-        rendererFallback,
-        overlayEnvironment:
-            overlayEnvironment ??
-            parent?.overlayEnvironment ??
-            unstable_defaultOverlayEnvironment,
-        coreSlots: resolvedCoreSlots,
-        providerLibraryReferences:
-            selected.references.length > 0
-                ? selected.references
-                : parent?.providerLibraryReferences ?? selected.references,
-        reportDiagnostic,
-    }), [
-        layers,
-        libraryMode,
-        overlayEnvironment,
-        parent?.overlayEnvironment,
-        parent?.providerLibraryReferences,
-        rendererFallback,
-        reportDiagnostic,
-        resolvedCoreSlots,
-        selected.references,
-        slots,
-    ]);
+    const value = useMemo<unstable_RendererContextValue>(
+        () =>
+            Object.freeze({
+                layers,
+                slots,
+                libraryMode,
+                rendererFallback,
+                overlayEnvironment:
+                    overlayEnvironment ??
+                    parent?.overlayEnvironment ??
+                    unstable_defaultOverlayEnvironment,
+                coreSlots: resolvedCoreSlots,
+                providerLibraryReferences:
+                    selected.references.length > 0
+                        ? selected.references
+                        : (parent?.providerLibraryReferences ?? selected.references),
+                reportDiagnostic,
+            }),
+        [
+            layers,
+            libraryMode,
+            overlayEnvironment,
+            parent?.overlayEnvironment,
+            parent?.providerLibraryReferences,
+            rendererFallback,
+            reportDiagnostic,
+            resolvedCoreSlots,
+            selected.references,
+            slots,
+        ],
+    );
 
     const LibraryProvider = selected.library?.Provider;
     return (
@@ -182,8 +185,7 @@ const fallbackDiagnostic = (
     slotId: unstable_SlotId,
 ): unstable_AdapterDiagnostic => ({
     code: unstable_adapterErrorCodes.strictProfileFallback,
-    adapterId:
-        context?.layers[context.layers.length - 1]?.library.id ?? 'core',
+    adapterId: context?.layers[context.layers.length - 1]?.library.id ?? 'core',
     slotId,
     message: `Renderer resolution requested Core fallback for slot '${slotId}'.`,
     remedy: `Provide a supported '${slotId}' renderer declaration or intentionally retain the Core fallback.`,
@@ -206,9 +208,10 @@ export const unstable_useSlot = <K extends unstable_SlotId>(
         context?.coreSlots ?? unstable_emptyCoreRendererSlots,
     );
 
-    const diagnostic = result.usedCoreFallback
-        ? fallbackDiagnostic(context, slotId)
-        : undefined;
+    const diagnostic =
+        result.usedCoreFallback && (context?.layers.length ?? 0) > 0
+            ? fallbackDiagnostic(context, slotId)
+            : undefined;
 
     useEffect(() => {
         if (!diagnostic) return;
@@ -223,23 +226,23 @@ export const unstable_useSlot = <K extends unstable_SlotId>(
         }
     }, [context, diagnostic]);
 
-    if (
-        !result.declaration &&
-        (context?.rendererFallback ?? 'core') === 'throw'
-    ) {
-        throw new unstable_AdapterError(diagnostic ?? fallbackDiagnostic(context, slotId));
+    if (!result.declaration && (context?.rendererFallback ?? 'core') === 'throw') {
+        throw new unstable_AdapterError(
+            diagnostic ?? fallbackDiagnostic(context, slotId),
+        );
     }
 
     return result.declaration;
 };
 
 /** Returns whether any active renderer layer advertises a Core-owned capability. */
-export const unstable_useCapability = (
-    capability: unstable_CapabilityId,
-): boolean => {
+export const unstable_useCapability = (capability: unstable_CapabilityId): boolean => {
     const context = useContext(unstable_RendererContext);
-    return context?.layers.some(layer =>
-        layer.library.capabilities.includes(capability)) ?? false;
+    return (
+        context?.layers.some((layer) =>
+            layer.library.capabilities.includes(capability),
+        ) ?? false
+    );
 };
 
 /**
diff --git a/Source/renderer/for_resolution/when_reporting_fallback_diagnostics.tsx b/Source/renderer/for_resolution/when_reporting_fallback_diagnostics.tsx
index d6f6553e..9992a2ad 100644
--- a/Source/renderer/for_resolution/when_reporting_fallback_diagnostics.tsx
+++ b/Source/renderer/for_resolution/when_reporting_fallback_diagnostics.tsx
@@ -9,10 +9,8 @@ import { createRoot, type Root } from 'react-dom/client';
 import sinon, { type SinonStub } from 'sinon';
 import { afterEach, beforeEach, describe, it } from 'vitest';
 import { CratisComponentsProvider } from '../../Common/CratisComponentsProvider';
-import {
-    unstable_adapterErrorCodes,
-    unstable_useSlot,
-} from '..';
+import { unstable_adapterErrorCodes, unstable_useSlot } from '..';
+import { buttonSlot, createTestLibrary, FirstButton } from './testLibrary';
 
 const DuplicateFallbackProbe = () => {
     unstable_useSlot('common.tooltip');
@@ -42,10 +40,14 @@ describe('when reporting renderer fallback diagnostics', () => {
         consoleError.restore();
     });
 
-    it('should report one actionable diagnostic after mount, never during render', async () => {
+    it('should report one actionable diagnostic after an adapter falls back, never during render', async () => {
+        const library = createTestLibrary('button-only', buttonSlot(FirstButton), {
+            profileSlots: ['common.button'],
+        });
+
         await act(async () => {
             root.render(
-                <CratisComponentsProvider>
+                <CratisComponentsProvider library={library}>
                     <DuplicateFallbackProbe />
                 </CratisComponentsProvider>,
             );
@@ -59,7 +61,7 @@ describe('when reporting renderer fallback diagnostics', () => {
 
         await act(async () => {
             root.render(
-                <CratisComponentsProvider>
+                <CratisComponentsProvider library={library}>
                     <DuplicateFallbackProbe />
                 </CratisComponentsProvider>,
             );
@@ -67,4 +69,17 @@ describe('when reporting renderer fallback diagnostics', () => {
 
         expect(consoleError.callCount).to.equal(1);
     });
+
+    it('should treat the zero-config Core path as the default rather than a fallback warning', async () => {
+        await act(async () => {
+            root.render(
+                <CratisComponentsProvider>
+                    <DuplicateFallbackProbe />
+                </CratisComponentsProvider>,
+            );
+        });
+
+        expect(container.textContent).to.equal('missing');
+        expect(consoleError.callCount).to.equal(0);
+    });
 });
diff --git a/Source/renderer/for_resolution/when_resolving_slots.tsx b/Source/renderer/for_resolution/when_resolving_slots.tsx
index e9f88282..047419fb 100644
--- a/Source/renderer/for_resolution/when_resolving_slots.tsx
+++ b/Source/renderer/for_resolution/when_resolving_slots.tsx
@@ -26,8 +26,10 @@ import {
 const ResolutionProbe = () => {
     const button = unstable_useSlot('common.button')?.render;
     const tooltip = unstable_useSlot('common.tooltip')?.render;
-    const buttonId = button === FirstButton ? 'first' : button === LastButton ? 'last' : 'missing';
-    const tooltipId = tooltip === FirstTooltip ? 'first' : tooltip === LastTooltip ? 'last' : 'missing';
+    const buttonId =
+        button === FirstButton ? 'first' : button === LastButton ? 'last' : 'missing';
+    const tooltipId =
+        tooltip === FirstTooltip ? 'first' : tooltip === LastTooltip ? 'last' : 'missing';
     return <span data-button={buttonId} data-tooltip={tooltipId} />;
 };
 
@@ -36,10 +38,7 @@ const MissingProbe = () => {
     return <span>{declaration ? 'found' : 'missing'}</span>;
 };
 
-const combinedSlots = (
-    button: typeof FirstButton,
-    tooltip: typeof FirstTooltip,
-) => ({
+const combinedSlots = (button: typeof FirstButton, tooltip: typeof FirstTooltip) => ({
     ...buttonSlot(button),
     ...tooltipSlot(tooltip),
 });
@@ -63,10 +62,7 @@ describe('when resolving renderer slots', () => {
             'outer',
             combinedSlots(FirstButton, FirstTooltip),
         );
-        const inner = createTestLibrary(
-            'inner',
-            combinedSlots(LastButton, LastTooltip),
-        );
+        const inner = createTestLibrary('inner', combinedSlots(LastButton, LastTooltip));
 
         const html = renderToStaticMarkup(
             <CratisComponentsProvider library={outer}>

From a49df7bc3e0a6a6520821d202408f070fdd4e017 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 20:05:56 +0200
Subject: [PATCH 182/267] Format renderer provider infrastructure

---
 Source/Common/CratisComponentsProvider.tsx |  4 +-
 Source/renderer/RendererScope.tsx          | 52 ++++++++++------------
 Source/renderer/manifest.ts                |  6 +--
 Source/renderer/resolve.ts                 | 14 +++---
 Source/scripts/lib/dependency-graph.mjs    |  2 +-
 5 files changed, 39 insertions(+), 39 deletions(-)

diff --git a/Source/Common/CratisComponentsProvider.tsx b/Source/Common/CratisComponentsProvider.tsx
index bfe09a93..811e4e98 100644
--- a/Source/Common/CratisComponentsProvider.tsx
+++ b/Source/Common/CratisComponentsProvider.tsx
@@ -282,7 +282,9 @@ export const CratisComponentsProvider = ({
             <CratisComponentsContext.Provider value={resolved}>
                 <I18nProvider locale={validLocale(resolved.locale)}>
                     {children}
-                    {toaster && <Toaster {...(typeof toaster === 'object' ? toaster : {})} />}
+                    {toaster && (
+                        <Toaster {...(typeof toaster === 'object' ? toaster : {})} />
+                    )}
                 </I18nProvider>
             </CratisComponentsContext.Provider>
         </RendererRoot>
diff --git a/Source/renderer/RendererScope.tsx b/Source/renderer/RendererScope.tsx
index 3d8be71f..89ea49e7 100644
--- a/Source/renderer/RendererScope.tsx
+++ b/Source/renderer/RendererScope.tsx
@@ -1,12 +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 {
-    useContext,
-    useEffect,
-    useMemo,
-    type ReactNode,
-} from 'react';
+import { useContext, useEffect, useMemo, type ReactNode } from 'react';
 import {
     unstable_AdapterError,
     unstable_adapterErrorCodes,
@@ -59,24 +54,24 @@ export const unstable_RendererScope = ({
 }: unstable_RendererScopeProps) => {
     const parent = useContext(unstable_RendererContext);
     const selected = useMemo(() => unstable_resolveLibraryInput(use), [use]);
-    const acceptedOnly = useMemo(
-        () => only?.filter(unstable_isKnownSlot),
-        [only],
-    );
+    const acceptedOnly = useMemo(() => only?.filter(unstable_isKnownSlot), [only]);
     const layer = useMemo(
-        () => selected.library
-            ? unstable_createRendererLayer(selected.library, acceptedOnly)
-            : undefined,
+        () =>
+            selected.library
+                ? unstable_createRendererLayer(selected.library, acceptedOnly)
+                : undefined,
         [acceptedOnly, selected],
     );
     const diagnostics = useMemo(() => {
-        if (!selected.library) return Object.freeze([]) as readonly unstable_AdapterDiagnostic[];
+        if (!selected.library)
+            return Object.freeze([]) as readonly unstable_AdapterDiagnostic[];
         return Object.freeze([
-            ...selected.references.flatMap(reference =>
-                unstable_validateUiLibrary(reference)),
+            ...selected.references.flatMap((reference) =>
+                unstable_validateUiLibrary(reference),
+            ),
             ...(only ?? [])
-                .filter(slotId => !unstable_isKnownSlot(slotId))
-                .map(slotId => invalidOnlyDiagnostic(selected.library!, slotId)),
+                .filter((slotId) => !unstable_isKnownSlot(slotId))
+                .map((slotId) => invalidOnlyDiagnostic(selected.library!, slotId)),
         ]);
     }, [only, selected]);
 
@@ -91,23 +86,22 @@ export const unstable_RendererScope = ({
     }
 
     const layers = useMemo(
-        () => parent && layer
-            ? Object.freeze([...parent.layers, layer])
-            : undefined,
+        () => (parent && layer ? Object.freeze([...parent.layers, layer]) : undefined),
         [layer, parent],
     );
     const slots = useMemo(
-        () => layers ? unstable_createResolvedSlotTable(layers) : undefined,
+        () => (layers ? unstable_createResolvedSlotTable(layers) : undefined),
         [layers],
     );
     const value = useMemo<unstable_RendererContextValue | undefined>(
-        () => parent && layers && slots
-            ? Object.freeze({
-                ...parent,
-                layers,
-                slots,
-            })
-            : undefined,
+        () =>
+            parent && layers && slots
+                ? Object.freeze({
+                      ...parent,
+                      layers,
+                      slots,
+                  })
+                : undefined,
         [layers, parent, slots],
     );
     const LibraryProvider = selected.library?.Provider;
diff --git a/Source/renderer/manifest.ts b/Source/renderer/manifest.ts
index 0c72fa58..14903d42 100644
--- a/Source/renderer/manifest.ts
+++ b/Source/renderer/manifest.ts
@@ -113,14 +113,14 @@ export const unstable_composeUiLibraries = (
 
     const last = libraries[libraries.length - 1];
     const capabilities = [
-        ...new Set(libraries.flatMap(library => library.capabilities)),
+        ...new Set(libraries.flatMap((library) => library.capabilities)),
     ];
-    const slots = Object.assign({}, ...libraries.map(library => library.slots));
+    const slots = Object.assign({}, ...libraries.map((library) => library.slots));
 
     return unstable_defineUiLibrary({
         ...last,
         capabilities,
-        profileSlots: last.profileSlots ?? Object.keys(slots) as unstable_SlotId[],
+        profileSlots: last.profileSlots ?? (Object.keys(slots) as unstable_SlotId[]),
         slots,
     });
 };
diff --git a/Source/renderer/resolve.ts b/Source/renderer/resolve.ts
index 71c5bd05..8e98dc4e 100644
--- a/Source/renderer/resolve.ts
+++ b/Source/renderer/resolve.ts
@@ -181,7 +181,8 @@ export const unstable_createResolvedSlotTable = (
                 !declaration ||
                 declaration.fidelity === 'unsupported' ||
                 (layer.only && !layer.only.has(slotId as unstable_SlotId))
-            ) continue;
+            )
+                continue;
             resolved[slotId] = declaration;
         }
     }
@@ -204,10 +205,13 @@ export const unstable_resolveSlot = <K extends unstable_SlotId>(
 };
 
 /** Stable log key used to de-duplicate diagnostics within one provider identity. */
-export const unstable_diagnosticKey = (
-    diagnostic: unstable_AdapterDiagnostic,
-): string =>
-    [diagnostic.code, diagnostic.adapterId, diagnostic.slotId ?? '', diagnostic.message].join('|');
+export const unstable_diagnosticKey = (diagnostic: unstable_AdapterDiagnostic): string =>
+    [
+        diagnostic.code,
+        diagnostic.adapterId,
+        diagnostic.slotId ?? '',
+        diagnostic.message,
+    ].join('|');
 
 /** Emits one actionable renderer diagnostic without exposing manifest contents. */
 export const unstable_logDiagnostic = (diagnostic: unstable_AdapterDiagnostic): void => {
diff --git a/Source/scripts/lib/dependency-graph.mjs b/Source/scripts/lib/dependency-graph.mjs
index c89d80f7..d5f0b328 100644
--- a/Source/scripts/lib/dependency-graph.mjs
+++ b/Source/scripts/lib/dependency-graph.mjs
@@ -140,7 +140,7 @@ export function analyzeRendererBoundary(
     const runtimeExternalDependencies = [
         ...new Set(
             runtimeClosure.external.filter(
-                specifier => !isRendererFrameworkRuntimeSpecifier(specifier),
+                (specifier) => !isRendererFrameworkRuntimeSpecifier(specifier),
             ),
         ),
     ].sort();

From 86147a6e46395772ae40326cad5abe891bb53e2a Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 20:15:23 +0200
Subject: [PATCH 183/267] Keep renderer validation hook order stable

---
 Source/renderer/RendererContext.tsx | 8 ++++----
 Source/renderer/RendererScope.tsx   | 9 +++++----
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/Source/renderer/RendererContext.tsx b/Source/renderer/RendererContext.tsx
index 654f6a9d..65ef9d1d 100644
--- a/Source/renderer/RendererContext.tsx
+++ b/Source/renderer/RendererContext.tsx
@@ -124,10 +124,6 @@ export const unstable_RendererRoot = ({
         }
     }, [diagnostics, libraryMode, reportDiagnostic]);
 
-    if (libraryMode === 'strict' && diagnostics.length > 0) {
-        throw new unstable_AdapterError(diagnostics[0]);
-    }
-
     const layers = useMemo(
         () => Object.freeze([...(parent?.layers ?? []), ...(layer ? [layer] : [])]),
         [layer, parent?.layers],
@@ -172,6 +168,10 @@ export const unstable_RendererRoot = ({
         ],
     );
 
+    if (libraryMode === 'strict' && diagnostics.length > 0) {
+        throw new unstable_AdapterError(diagnostics[0]);
+    }
+
     const LibraryProvider = selected.library?.Provider;
     return (
         <unstable_RendererContext.Provider value={value}>
diff --git a/Source/renderer/RendererScope.tsx b/Source/renderer/RendererScope.tsx
index 89ea49e7..b5a1adf8 100644
--- a/Source/renderer/RendererScope.tsx
+++ b/Source/renderer/RendererScope.tsx
@@ -81,10 +81,6 @@ export const unstable_RendererScope = ({
         }
     }, [diagnostics, parent]);
 
-    if ((parent?.libraryMode ?? 'strict') === 'strict' && diagnostics.length > 0) {
-        throw new unstable_AdapterError(diagnostics[0]);
-    }
-
     const layers = useMemo(
         () => (parent && layer ? Object.freeze([...parent.layers, layer]) : undefined),
         [layer, parent],
@@ -104,6 +100,11 @@ export const unstable_RendererScope = ({
                 : undefined,
         [layers, parent, slots],
     );
+
+    if ((parent?.libraryMode ?? 'strict') === 'strict' && diagnostics.length > 0) {
+        throw new unstable_AdapterError(diagnostics[0]);
+    }
+
     const LibraryProvider = selected.library?.Provider;
 
     if (!value) return children;

From 146801601a64254607a776ac8fcf4901b7702709 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 20:14:19 +0200
Subject: [PATCH 184/267] Capture presentation DOM baseline

---
 .../when_preserving_presentation_dom.tsx      | 146 ++++++++++++++++++
 1 file changed, 146 insertions(+)
 create mode 100644 Source/renderer/for_self_hosting/when_preserving_presentation_dom.tsx

diff --git a/Source/renderer/for_self_hosting/when_preserving_presentation_dom.tsx b/Source/renderer/for_self_hosting/when_preserving_presentation_dom.tsx
new file mode 100644
index 00000000..3dec4e32
--- /dev/null
+++ b/Source/renderer/for_self_hosting/when_preserving_presentation_dom.tsx
@@ -0,0 +1,146 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { expect } from 'chai';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, it } from 'vitest';
+import { Button } from '../../Common/Button';
+import { Checkbox } from '../../Common/Checkbox';
+import { IconButton } from '../../Common/IconButton';
+import { Radio } from '../../Common/Radio';
+import { Surface } from '../../Common/Surface';
+import { Switch } from '../../Common/Switch';
+import { TextArea } from '../../Common/TextArea';
+import { TextInput } from '../../Common/TextInput';
+import { ProgressBar } from '../../Display/ProgressBar';
+
+interface DomBaseline {
+    readonly html: string;
+    readonly tags: Readonly<Record<string, number>>;
+    readonly parts: Readonly<Record<string, number>>;
+    readonly roles: Readonly<Record<string, number>>;
+    readonly controlSelector: string;
+}
+
+const baselines: Readonly<Record<string, DomBaseline>> = Object.freeze({
+    button: {
+        html: '<button type="button" class="cratis-button" data-cratis-part="root" data-variant="solid" data-shape="default" data-size="normal"><span class="cratis-button__label" data-cratis-part="label">Save</span></button>',
+        tags: { button: 1, span: 1 },
+        parts: { label: 1, root: 1 },
+        roles: {},
+        controlSelector: 'button',
+    },
+    iconButton: {
+        html: '<button type="button" class="cratis-button" aria-label="Add item" data-cratis-part="root" data-variant="solid" data-shape="pill" data-size="normal" data-icon-only="true"><span class="cratis-button__icon" data-cratis-part="icon" aria-hidden="true"><span>+</span></span></button>',
+        tags: { button: 1, span: 2 },
+        parts: { icon: 1, root: 1 },
+        roles: {},
+        controlSelector: 'button',
+    },
+    textInput: {
+        html: '<input type="text" class="cratis-text-input" data-cratis-part="root" value="Sample"/>',
+        tags: { input: 1 },
+        parts: { root: 1 },
+        roles: {},
+        controlSelector: 'input',
+    },
+    textArea: {
+        html: '<textarea class="cratis-text-area" data-cratis-part="root">Sample</textarea>',
+        tags: { textarea: 1 },
+        parts: { root: 1 },
+        roles: {},
+        controlSelector: 'textarea',
+    },
+    checkbox: {
+        html: '<label class="cratis-choice" data-cratis-part="root" data-selected="true"><input type="checkbox" class="cratis-choice__input" data-cratis-part="input" data-selected="true" checked=""/><span class="cratis-checkbox__box" data-cratis-part="box" data-selected="true" aria-hidden="true"><span class="cratis-checkbox__indicator" data-cratis-part="indicator" data-selected="true">✓</span></span><span class="cratis-choice__label" data-cratis-part="label" data-selected="true">Choice</span></label>',
+        tags: { input: 1, label: 1, span: 3 },
+        parts: { box: 1, indicator: 1, input: 1, label: 1, root: 1 },
+        roles: {},
+        controlSelector: 'input[type="checkbox"]',
+    },
+    radio: {
+        html: '<label class="cratis-choice" data-cratis-part="root" data-selected="true"><input type="radio" class="cratis-choice__input" data-cratis-part="input" data-selected="true" name="sample" checked="" value="one"/><span class="cratis-radio__box" data-cratis-part="box" data-selected="true" aria-hidden="true"><span class="cratis-radio__indicator" data-cratis-part="indicator" data-selected="true"></span></span><span class="cratis-choice__label" data-cratis-part="label" data-selected="true">Choice</span></label>',
+        tags: { input: 1, label: 1, span: 3 },
+        parts: { box: 1, indicator: 1, input: 1, label: 1, root: 1 },
+        roles: {},
+        controlSelector: 'input[type="radio"]',
+    },
+    switch: {
+        html: '<label class="cratis-choice" data-cratis-part="root" data-selected="true"><input type="checkbox" role="switch" class="cratis-choice__input" data-cratis-part="input" data-selected="true" checked=""/><span class="cratis-switch__control" data-cratis-part="control" data-selected="true" aria-hidden="true"><span class="cratis-switch__handle" data-cratis-part="handle" data-selected="true"></span></span><span class="cratis-choice__label" data-cratis-part="label" data-selected="true">Choice</span></label>',
+        tags: { input: 1, label: 1, span: 3 },
+        parts: { control: 1, handle: 1, input: 1, label: 1, root: 1 },
+        roles: { switch: 1 },
+        controlSelector: 'input[role="switch"]',
+    },
+    progress: {
+        html: '<div class="cratis-progress-bar" data-cratis-part="root" data-mode="determinate" data-busy="true" role="progressbar" aria-label="Progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="42"><span class="cratis-progress-bar__indicator" data-cratis-part="indicator" style="width:42%"><span class="cratis-progress-bar__label" data-cratis-part="label">42%</span></span></div>',
+        tags: { div: 1, span: 2 },
+        parts: { indicator: 1, label: 1, root: 1 },
+        roles: { progressbar: 1 },
+        controlSelector: '[role="progressbar"]',
+    },
+    surface: {
+        html: '<article class="cratis-surface" data-cratis-part="root">Content</article>',
+        tags: { article: 1 },
+        parts: { root: 1 },
+        roles: {},
+        controlSelector: 'article',
+    },
+});
+
+const countBy = (elements: readonly Element[], value: (element: Element) => string | null) =>
+    Object.fromEntries(
+        [...elements]
+            .map(value)
+            .filter((entry): entry is string => Boolean(entry))
+            .sort()
+            .reduce((counts, entry) => counts.set(entry, (counts.get(entry) ?? 0) + 1), new Map<string, number>()),
+    );
+
+const summarize = (html: string) => {
+    const template = document.createElement('template');
+    template.innerHTML = html;
+    const elements = Array.from(template.content.querySelectorAll('*'));
+    return {
+        tags: countBy(elements, (element) => element.tagName.toLowerCase()),
+        parts: countBy(elements, (element) => element.getAttribute('data-cratis-part')),
+        roles: countBy(elements, (element) => element.getAttribute('role')),
+        fragment: template.content,
+    };
+};
+
+const renderings = () => ({
+    button: renderToStaticMarkup(<Button label='Save' />),
+    iconButton: renderToStaticMarkup(
+        <IconButton icon={<span>+</span>} aria-label='Add item' />,
+    ),
+    textInput: renderToStaticMarkup(<TextInput defaultValue='Sample' />),
+    textArea: renderToStaticMarkup(<TextArea defaultValue='Sample' />),
+    checkbox: renderToStaticMarkup(<Checkbox label='Choice' defaultChecked />),
+    radio: renderToStaticMarkup(
+        <Radio name='sample' value='one' label='Choice' defaultChecked />,
+    ),
+    switch: renderToStaticMarkup(<Switch label='Choice' defaultChecked />),
+    progress: renderToStaticMarkup(<ProgressBar value={42} />),
+    surface: renderToStaticMarkup(<Surface as='article'>Content</Surface>),
+});
+
+describe('when preserving the Core presentation DOM baseline', () => {
+    for (const [name, html] of Object.entries(renderings())) {
+        it(`should keep ${name} byte-identical with exact tags, parts, roles, and one real root`, () => {
+            const baseline = baselines[name];
+            const summary = summarize(html);
+
+            expect(html).to.equal(baseline.html);
+            expect(summary.tags).to.deep.equal(baseline.tags);
+            expect(summary.parts).to.deep.equal(baseline.parts);
+            expect(summary.roles).to.deep.equal(baseline.roles);
+            expect(summary.fragment.querySelectorAll('[data-cratis-part="root"]')).to
+                .have.lengthOf(1);
+            expect(summary.fragment.querySelectorAll(baseline.controlSelector)).to.have
+                .lengthOf(1);
+        });
+    }
+});

From 8dff9ab966a065793544fa969bef4df9c7e8a574 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 20:22:52 +0200
Subject: [PATCH 185/267] Extract presentation slot implementations

---
 Source/Common/Button.tsx                     | 163 +----------------
 Source/Common/ButtonImplementation.tsx       | 177 +++++++++++++++++++
 Source/Common/Checkbox.tsx                   | 130 +-------------
 Source/Common/CheckboxImplementation.tsx     | 136 ++++++++++++++
 Source/Common/IconButton.tsx                 |  10 +-
 Source/Common/IconButtonImplementation.tsx   |  14 ++
 Source/Common/Radio.tsx                      | 127 +------------
 Source/Common/RadioImplementation.tsx        | 139 +++++++++++++++
 Source/Common/Surface.tsx                    |  27 +--
 Source/Common/SurfaceImplementation.tsx      |  33 ++++
 Source/Common/Switch.tsx                     | 124 +------------
 Source/Common/SwitchImplementation.tsx       | 136 ++++++++++++++
 Source/Common/TextArea.tsx                   |  52 +-----
 Source/Common/TextAreaImplementation.tsx     |  57 ++++++
 Source/Common/TextInput.tsx                  |  54 +-----
 Source/Common/TextInputImplementation.tsx    |  59 +++++++
 Source/Display/ProgressBar.tsx               |  41 +----
 Source/Display/ProgressBarImplementation.tsx |  46 +++++
 Source/scripts/generate-parts.mjs            |  26 ++-
 19 files changed, 829 insertions(+), 722 deletions(-)
 create mode 100644 Source/Common/ButtonImplementation.tsx
 create mode 100644 Source/Common/CheckboxImplementation.tsx
 create mode 100644 Source/Common/IconButtonImplementation.tsx
 create mode 100644 Source/Common/RadioImplementation.tsx
 create mode 100644 Source/Common/SurfaceImplementation.tsx
 create mode 100644 Source/Common/SwitchImplementation.tsx
 create mode 100644 Source/Common/TextAreaImplementation.tsx
 create mode 100644 Source/Common/TextInputImplementation.tsx
 create mode 100644 Source/Display/ProgressBarImplementation.tsx

diff --git a/Source/Common/Button.tsx b/Source/Common/Button.tsx
index 12da6e45..a21a7a02 100644
--- a/Source/Common/Button.tsx
+++ b/Source/Common/Button.tsx
@@ -2,13 +2,12 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import {
-    forwardRef,
     type ButtonHTMLAttributes,
     type CSSProperties,
     type HTMLAttributes,
     type ReactNode,
 } from 'react';
-import { Tooltip, type TooltipPosition } from './Tooltip';
+import type { TooltipPosition } from './Tooltip';
 import type { ExactPartKeys } from '../types/ExactPartKeys';
 import type { PartsOf } from '../types/parts';
 
@@ -117,163 +116,5 @@ export interface ButtonProps extends Omit<
     children?: ReactNode;
 }
 
-const renderIcon = (icon: ReactNode) =>
-    typeof icon === 'string' ? <i className={icon} aria-hidden='true' /> : icon;
-
-const toneForSeverity: Record<ButtonSeverity, ButtonTone> = {
-    secondary: 'neutral',
-    info: 'accent',
-    help: 'accent',
-    success: 'positive',
-    warn: 'caution',
-    danger: 'critical',
-    contrast: 'neutral',
-};
-
-const severityForTone: Record<ButtonTone, ButtonSeverity> = {
-    neutral: 'secondary',
-    accent: 'info',
-    positive: 'success',
-    caution: 'warn',
-    critical: 'danger',
-};
-
-type DeprecatedButtonProp = 'severity' | 'text' | 'link' | 'outlined' | 'rounded';
-
-const warnedDeprecatedProps = new Set<DeprecatedButtonProp>();
-
-const warnForDeprecatedProp = (prop: DeprecatedButtonProp) => {
-    const environment = (
-        globalThis as typeof globalThis & {
-            process?: { env?: { NODE_ENV?: string } };
-        }
-    ).process?.env?.NODE_ENV;
-
-    if (environment === 'production' || warnedDeprecatedProps.has(prop)) return;
-
-    warnedDeprecatedProps.add(prop);
-    console.warn(
-        `Button prop "${prop}" is deprecated and will be removed in 5.0. Use variant, tone, or shape instead.`,
-    );
-};
-
 /** A Cratis-owned button with stable parts and renderer-independent styling. */
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
-    {
-        label,
-        icon,
-        loading,
-        tooltip,
-        tooltipOptions,
-        pt,
-        variant,
-        tone,
-        shape,
-        text,
-        link,
-        outlined,
-        rounded,
-        severity,
-        size = 'normal',
-        disabled,
-        type = 'button',
-        title,
-        autoFocus,
-        onClick,
-        className,
-        style,
-        'aria-label': ariaLabel,
-        children,
-        ...nativeProps
-    },
-    ref,
-) {
-    if (text !== undefined) warnForDeprecatedProp('text');
-    if (link !== undefined) warnForDeprecatedProp('link');
-    if (outlined !== undefined) warnForDeprecatedProp('outlined');
-    if (rounded !== undefined) warnForDeprecatedProp('rounded');
-    if (severity !== undefined) warnForDeprecatedProp('severity');
-
-    const selectedVariant =
-        variant ?? (link ? 'link' : text ? 'ghost' : outlined ? 'outline' : 'solid');
-    const selectedTone = tone ?? (severity ? toneForSeverity[severity] : undefined);
-    const selectedShape = shape ?? (rounded ? 'pill' : 'default');
-    const legacySeverity = tone ? severityForTone[tone] : severity;
-    const effectiveDisabled = Boolean(disabled || loading);
-    const iconOnly = Boolean(icon) && label === undefined && !children;
-    const rootClassName = ['cratis-button', pt?.root?.className, className]
-        .filter(Boolean)
-        .join(' ');
-
-    const button = (
-        <button
-            {...pt?.root}
-            {...nativeProps}
-            ref={ref}
-            type={type}
-            title={title}
-            autoFocus={autoFocus}
-            disabled={effectiveDisabled}
-            onClick={onClick}
-            className={rootClassName}
-            style={{ ...pt?.root?.style, ...style }}
-            aria-label={ariaLabel}
-            aria-busy={loading || undefined}
-            data-cratis-part='root'
-            data-variant={selectedVariant}
-            data-tone={selectedTone}
-            data-severity={legacySeverity}
-            data-shape={selectedShape}
-            data-size={size}
-            data-disabled={effectiveDisabled || undefined}
-            data-loading={loading || undefined}
-            data-icon-only={iconOnly || undefined}
-        >
-            {loading ? (
-                <span
-                    {...pt?.spinner}
-                    className={['cratis-button__spinner', pt?.spinner?.className]
-                        .filter(Boolean)
-                        .join(' ')}
-                    data-cratis-part='spinner'
-                    aria-hidden='true'
-                />
-            ) : icon ? (
-                <span
-                    {...pt?.icon}
-                    className={['cratis-button__icon', pt?.icon?.className]
-                        .filter(Boolean)
-                        .join(' ')}
-                    data-cratis-part='icon'
-                    aria-hidden={pt?.icon?.['aria-hidden'] ?? true}
-                >
-                    {renderIcon(icon)}
-                </span>
-            ) : null}
-            {(label !== undefined || children) && (
-                <span
-                    {...pt?.label}
-                    className={['cratis-button__label', pt?.label?.className]
-                        .filter(Boolean)
-                        .join(' ')}
-                    data-cratis-part='label'
-                >
-                    {label}
-                    {children}
-                </span>
-            )}
-        </button>
-    );
-
-    return tooltip ? (
-        <Tooltip
-            content={tooltip}
-            position={tooltipOptions?.position}
-            className={tooltipOptions?.className}
-        >
-            {button}
-        </Tooltip>
-    ) : (
-        button
-    );
-});
+export { ButtonImplementation as Button } from './ButtonImplementation';
diff --git a/Source/Common/ButtonImplementation.tsx b/Source/Common/ButtonImplementation.tsx
new file mode 100644
index 00000000..d24797da
--- /dev/null
+++ b/Source/Common/ButtonImplementation.tsx
@@ -0,0 +1,177 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { forwardRef, type ReactNode } from 'react';
+import type {
+    ButtonProps,
+    ButtonSeverity,
+    ButtonTone,
+} from './Button';
+import { Tooltip } from './Tooltip';
+
+const renderIcon = (icon: ReactNode) =>
+    typeof icon === 'string' ? <i className={icon} aria-hidden='true' /> : icon;
+
+const toneForSeverity: Record<ButtonSeverity, ButtonTone> = {
+    secondary: 'neutral',
+    info: 'accent',
+    help: 'accent',
+    success: 'positive',
+    warn: 'caution',
+    danger: 'critical',
+    contrast: 'neutral',
+};
+
+const severityForTone: Record<ButtonTone, ButtonSeverity> = {
+    neutral: 'secondary',
+    accent: 'info',
+    positive: 'success',
+    caution: 'warn',
+    critical: 'danger',
+};
+
+type DeprecatedButtonProp = 'severity' | 'text' | 'link' | 'outlined' | 'rounded';
+
+const warnedDeprecatedProps = new Set<DeprecatedButtonProp>();
+
+const warnForDeprecatedProp = (prop: DeprecatedButtonProp) => {
+    const environment = (
+        globalThis as typeof globalThis & {
+            process?: { env?: { NODE_ENV?: string } };
+        }
+    ).process?.env?.NODE_ENV;
+
+    if (environment === 'production' || warnedDeprecatedProps.has(prop)) return;
+
+    warnedDeprecatedProps.add(prop);
+    console.warn(
+        `Button prop "${prop}" is deprecated and will be removed in 5.0. Use variant, tone, or shape instead.`,
+    );
+};
+
+/** Core implementation for the button presentation slot. */
+export const ButtonImplementation = forwardRef<HTMLButtonElement, ButtonProps>(
+    function ButtonImplementation(
+        {
+            label,
+            icon,
+            loading,
+            tooltip,
+            tooltipOptions,
+            pt,
+            variant,
+            tone,
+            shape,
+            text,
+            link,
+            outlined,
+            rounded,
+            severity,
+            size = 'normal',
+            disabled,
+            type = 'button',
+            title,
+            autoFocus,
+            onClick,
+            className,
+            style,
+            'aria-label': ariaLabel,
+            children,
+            ...nativeProps
+        },
+        ref,
+    ) {
+        if (text !== undefined) warnForDeprecatedProp('text');
+        if (link !== undefined) warnForDeprecatedProp('link');
+        if (outlined !== undefined) warnForDeprecatedProp('outlined');
+        if (rounded !== undefined) warnForDeprecatedProp('rounded');
+        if (severity !== undefined) warnForDeprecatedProp('severity');
+
+        const selectedVariant =
+            variant ??
+            (link ? 'link' : text ? 'ghost' : outlined ? 'outline' : 'solid');
+        const selectedTone = tone ?? (severity ? toneForSeverity[severity] : undefined);
+        const selectedShape = shape ?? (rounded ? 'pill' : 'default');
+        const legacySeverity = tone ? severityForTone[tone] : severity;
+        const effectiveDisabled = Boolean(disabled || loading);
+        const iconOnly = Boolean(icon) && label === undefined && !children;
+        const rootClassName = ['cratis-button', pt?.root?.className, className]
+            .filter(Boolean)
+            .join(' ');
+
+        const button = (
+            <button
+                {...pt?.root}
+                {...nativeProps}
+                ref={ref}
+                type={type}
+                title={title}
+                autoFocus={autoFocus}
+                disabled={effectiveDisabled}
+                onClick={onClick}
+                className={rootClassName}
+                style={{ ...pt?.root?.style, ...style }}
+                aria-label={ariaLabel}
+                aria-busy={loading || undefined}
+                data-cratis-part='root'
+                data-variant={selectedVariant}
+                data-tone={selectedTone}
+                data-severity={legacySeverity}
+                data-shape={selectedShape}
+                data-size={size}
+                data-disabled={effectiveDisabled || undefined}
+                data-loading={loading || undefined}
+                data-icon-only={iconOnly || undefined}
+            >
+                {loading ? (
+                    <span
+                        {...pt?.spinner}
+                        className={[
+                            'cratis-button__spinner',
+                            pt?.spinner?.className,
+                        ]
+                            .filter(Boolean)
+                            .join(' ')}
+                        data-cratis-part='spinner'
+                        aria-hidden='true'
+                    />
+                ) : icon ? (
+                    <span
+                        {...pt?.icon}
+                        className={['cratis-button__icon', pt?.icon?.className]
+                            .filter(Boolean)
+                            .join(' ')}
+                        data-cratis-part='icon'
+                        aria-hidden={pt?.icon?.['aria-hidden'] ?? true}
+                    >
+                        {renderIcon(icon)}
+                    </span>
+                ) : null}
+                {(label !== undefined || children) && (
+                    <span
+                        {...pt?.label}
+                        className={['cratis-button__label', pt?.label?.className]
+                            .filter(Boolean)
+                            .join(' ')}
+                        data-cratis-part='label'
+                    >
+                        {label}
+                        {children}
+                    </span>
+                )}
+            </button>
+        );
+
+        return tooltip ? (
+            <Tooltip
+                content={tooltip}
+                position={tooltipOptions?.position}
+                className={tooltipOptions?.className}
+            >
+                {button}
+            </Tooltip>
+        ) : (
+            button
+        );
+    },
+);
diff --git a/Source/Common/Checkbox.tsx b/Source/Common/Checkbox.tsx
index 18ecd0e4..78c507b8 100644
--- a/Source/Common/Checkbox.tsx
+++ b/Source/Common/Checkbox.tsx
@@ -2,7 +2,6 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import {
-    forwardRef,
     type CSSProperties,
     type HTMLAttributes,
     type InputHTMLAttributes,
@@ -12,7 +11,6 @@ import {
 import type { ChangeHandler } from '../types/ChangeHandler';
 import type { ExactPartKeys } from '../types/ExactPartKeys';
 import type { PartsOf } from '../types/parts';
-import { useNativeCheckedState } from './useNativeCheckedState';
 
 /** Stable Cratis-owned parts for styling a {@link Checkbox}. */
 export interface CheckboxParts {
@@ -53,130 +51,4 @@ export interface CheckboxProps extends Omit<
 }
 
 /** A native form checkbox with one interaction owner and stable visual parts. */
-export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
-    function Checkbox(
-        {
-            label,
-            readOnly,
-            invalid = false,
-            onChange,
-            className,
-            style,
-            pt,
-            checked,
-            defaultChecked,
-            disabled,
-            onClick,
-            'aria-invalid': ariaInvalid,
-            ...nativeProps
-        },
-        forwardedRef,
-    ) {
-        const effectiveChecked = checked ?? pt?.input?.checked;
-        const effectiveDefaultChecked = defaultChecked ?? pt?.input?.defaultChecked;
-        const effectiveDisabled = disabled ?? pt?.input?.disabled;
-        const effectiveReadOnly = readOnly ?? pt?.input?.readOnly;
-        const effectiveAriaInvalid =
-            ariaInvalid ?? pt?.input?.['aria-invalid'] ?? (invalid || undefined);
-        const effectiveInvalid =
-            invalid || effectiveAriaInvalid === true || effectiveAriaInvalid === 'true';
-        const { ref, selected, synchronize } = useNativeCheckedState(
-            effectiveChecked,
-            effectiveDefaultChecked,
-            forwardedRef,
-        );
-        return (
-            <label
-                {...pt?.root}
-                className={['cratis-choice', pt?.root?.className, className]
-                    .filter(Boolean)
-                    .join(' ')}
-                style={{ ...pt?.root?.style, ...style }}
-                data-cratis-part='root'
-                data-disabled={effectiveDisabled || undefined}
-                data-invalid={effectiveInvalid || undefined}
-                data-readonly={effectiveReadOnly || undefined}
-                data-selected={selected || undefined}
-            >
-                <input
-                    {...pt?.input}
-                    {...nativeProps}
-                    ref={ref}
-                    type='checkbox'
-                    checked={effectiveChecked}
-                    defaultChecked={effectiveDefaultChecked}
-                    disabled={effectiveDisabled}
-                    readOnly={undefined}
-                    aria-invalid={effectiveAriaInvalid}
-                    aria-readonly={effectiveReadOnly || undefined}
-                    onClick={(event) => {
-                        pt?.input?.onClick?.(event);
-                        onClick?.(event);
-                        if (effectiveReadOnly) event.preventDefault();
-                    }}
-                    onChange={(event) => {
-                        pt?.input?.onChange?.(event);
-                        if (effectiveReadOnly) return;
-                        synchronize(event.currentTarget.checked);
-                        onChange?.(event.currentTarget.checked, {
-                            source: 'user',
-                            nativeEvent: event.nativeEvent,
-                        });
-                    }}
-                    className={['cratis-choice__input', pt?.input?.className]
-                        .filter(Boolean)
-                        .join(' ')}
-                    data-cratis-part='input'
-                    data-disabled={effectiveDisabled || undefined}
-                    data-invalid={effectiveInvalid || undefined}
-                    data-readonly={effectiveReadOnly || undefined}
-                    data-selected={selected || undefined}
-                />
-                <span
-                    {...pt?.box}
-                    className={['cratis-checkbox__box', pt?.box?.className]
-                        .filter(Boolean)
-                        .join(' ')}
-                    data-cratis-part='box'
-                    data-disabled={effectiveDisabled || undefined}
-                    data-invalid={effectiveInvalid || undefined}
-                    data-readonly={effectiveReadOnly || undefined}
-                    data-selected={selected || undefined}
-                    aria-hidden='true'
-                >
-                    <span
-                        {...pt?.indicator}
-                        className={[
-                            'cratis-checkbox__indicator',
-                            pt?.indicator?.className,
-                        ]
-                            .filter(Boolean)
-                            .join(' ')}
-                        data-cratis-part='indicator'
-                        data-disabled={effectiveDisabled || undefined}
-                        data-invalid={effectiveInvalid || undefined}
-                        data-readonly={effectiveReadOnly || undefined}
-                        data-selected={selected || undefined}
-                    >
-                        ✓
-                    </span>
-                </span>
-                {label !== undefined && (
-                    <span
-                        {...pt?.label}
-                        className={['cratis-choice__label', pt?.label?.className]
-                            .filter(Boolean)
-                            .join(' ')}
-                        data-cratis-part='label'
-                        data-disabled={effectiveDisabled || undefined}
-                        data-invalid={effectiveInvalid || undefined}
-                        data-readonly={effectiveReadOnly || undefined}
-                        data-selected={selected || undefined}
-                    >
-                        {label}
-                    </span>
-                )}
-            </label>
-        );
-    },
-);
+export { CheckboxImplementation as Checkbox } from './CheckboxImplementation';
diff --git a/Source/Common/CheckboxImplementation.tsx b/Source/Common/CheckboxImplementation.tsx
new file mode 100644
index 00000000..f7a87cfb
--- /dev/null
+++ b/Source/Common/CheckboxImplementation.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 { forwardRef } from 'react';
+import type { CheckboxProps } from './Checkbox';
+import { useNativeCheckedState } from './useNativeCheckedState';
+
+/** Core implementation for the native checkbox presentation slot. */
+export const CheckboxImplementation = forwardRef<
+    HTMLInputElement,
+    CheckboxProps
+>(function CheckboxImplementation(
+    {
+        label,
+        readOnly,
+        invalid = false,
+        onChange,
+        className,
+        style,
+        pt,
+        checked,
+        defaultChecked,
+        disabled,
+        onClick,
+        'aria-invalid': ariaInvalid,
+        ...nativeProps
+    },
+    forwardedRef,
+) {
+    const effectiveChecked = checked ?? pt?.input?.checked;
+    const effectiveDefaultChecked = defaultChecked ?? pt?.input?.defaultChecked;
+    const effectiveDisabled = disabled ?? pt?.input?.disabled;
+    const effectiveReadOnly = readOnly ?? pt?.input?.readOnly;
+    const effectiveAriaInvalid =
+        ariaInvalid ?? pt?.input?.['aria-invalid'] ?? (invalid || undefined);
+    const effectiveInvalid =
+        invalid || effectiveAriaInvalid === true || effectiveAriaInvalid === 'true';
+    const { ref, selected, synchronize } = useNativeCheckedState(
+        effectiveChecked,
+        effectiveDefaultChecked,
+        forwardedRef,
+    );
+    return (
+        <label
+            {...pt?.root}
+            className={['cratis-choice', pt?.root?.className, className]
+                .filter(Boolean)
+                .join(' ')}
+            style={{ ...pt?.root?.style, ...style }}
+            data-cratis-part='root'
+            data-disabled={effectiveDisabled || undefined}
+            data-invalid={effectiveInvalid || undefined}
+            data-readonly={effectiveReadOnly || undefined}
+            data-selected={selected || undefined}
+        >
+            <input
+                {...pt?.input}
+                {...nativeProps}
+                ref={ref}
+                type='checkbox'
+                checked={effectiveChecked}
+                defaultChecked={effectiveDefaultChecked}
+                disabled={effectiveDisabled}
+                readOnly={undefined}
+                aria-invalid={effectiveAriaInvalid}
+                aria-readonly={effectiveReadOnly || undefined}
+                onClick={(event) => {
+                    pt?.input?.onClick?.(event);
+                    onClick?.(event);
+                    if (effectiveReadOnly) event.preventDefault();
+                }}
+                onChange={(event) => {
+                    pt?.input?.onChange?.(event);
+                    if (effectiveReadOnly) return;
+                    synchronize(event.currentTarget.checked);
+                    onChange?.(event.currentTarget.checked, {
+                        source: 'user',
+                        nativeEvent: event.nativeEvent,
+                    });
+                }}
+                className={['cratis-choice__input', pt?.input?.className]
+                    .filter(Boolean)
+                    .join(' ')}
+                data-cratis-part='input'
+                data-disabled={effectiveDisabled || undefined}
+                data-invalid={effectiveInvalid || undefined}
+                data-readonly={effectiveReadOnly || undefined}
+                data-selected={selected || undefined}
+            />
+            <span
+                {...pt?.box}
+                className={['cratis-checkbox__box', pt?.box?.className]
+                    .filter(Boolean)
+                    .join(' ')}
+                data-cratis-part='box'
+                data-disabled={effectiveDisabled || undefined}
+                data-invalid={effectiveInvalid || undefined}
+                data-readonly={effectiveReadOnly || undefined}
+                data-selected={selected || undefined}
+                aria-hidden='true'
+            >
+                <span
+                    {...pt?.indicator}
+                    className={[
+                        'cratis-checkbox__indicator',
+                        pt?.indicator?.className,
+                    ]
+                        .filter(Boolean)
+                        .join(' ')}
+                    data-cratis-part='indicator'
+                    data-disabled={effectiveDisabled || undefined}
+                    data-invalid={effectiveInvalid || undefined}
+                    data-readonly={effectiveReadOnly || undefined}
+                    data-selected={selected || undefined}
+                >
+                    ✓
+                </span>
+            </span>
+            {label !== undefined && (
+                <span
+                    {...pt?.label}
+                    className={['cratis-choice__label', pt?.label?.className]
+                        .filter(Boolean)
+                        .join(' ')}
+                    data-cratis-part='label'
+                    data-disabled={effectiveDisabled || undefined}
+                    data-invalid={effectiveInvalid || undefined}
+                    data-readonly={effectiveReadOnly || undefined}
+                    data-selected={selected || undefined}
+                >
+                    {label}
+                </span>
+            )}
+        </label>
+    );
+});
diff --git a/Source/Common/IconButton.tsx b/Source/Common/IconButton.tsx
index 1ced64d3..8209ba2b 100644
--- a/Source/Common/IconButton.tsx
+++ b/Source/Common/IconButton.tsx
@@ -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.
 
-import { forwardRef, type ReactNode } from 'react';
-import { Button, type ButtonParts, type ButtonProps } from './Button';
+import type { ReactNode } from 'react';
+import type { ButtonParts, ButtonProps } from './Button';
 import type { ExactPartKeys } from '../types/ExactPartKeys';
 import type { PartsOf } from '../types/parts';
 
@@ -29,8 +29,4 @@ export interface IconButtonProps extends Omit<
 }
 
 /** An icon-only specialization of {@link Button} with one native interaction owner. */
-export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
-    function IconButton({ shape = 'pill', ...props }, ref) {
-        return <Button {...props} ref={ref} shape={shape} />;
-    },
-);
+export { IconButtonImplementation as IconButton } from './IconButtonImplementation';
diff --git a/Source/Common/IconButtonImplementation.tsx b/Source/Common/IconButtonImplementation.tsx
new file mode 100644
index 00000000..0c3392ae
--- /dev/null
+++ b/Source/Common/IconButtonImplementation.tsx
@@ -0,0 +1,14 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { forwardRef } from 'react';
+import { ButtonImplementation } from './ButtonImplementation';
+import type { IconButtonProps } from './IconButton';
+
+/** Core implementation for the icon-button presentation slot. */
+export const IconButtonImplementation = forwardRef<
+    HTMLButtonElement,
+    IconButtonProps
+>(function IconButtonImplementation({ shape = 'pill', ...props }, ref) {
+    return <ButtonImplementation {...props} ref={ref} shape={shape} />;
+});
diff --git a/Source/Common/Radio.tsx b/Source/Common/Radio.tsx
index cb132e81..af6dedd8 100644
--- a/Source/Common/Radio.tsx
+++ b/Source/Common/Radio.tsx
@@ -2,7 +2,6 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import {
-    forwardRef,
     type CSSProperties,
     type HTMLAttributes,
     type InputHTMLAttributes,
@@ -12,7 +11,6 @@ import {
 import type { ChangeHandler } from '../types/ChangeHandler';
 import type { ExactPartKeys } from '../types/ExactPartKeys';
 import type { PartsOf } from '../types/parts';
-import { useNativeCheckedState } from './useNativeCheckedState';
 
 /** Stable Cratis-owned parts for styling a {@link Radio}. */
 export interface RadioParts {
@@ -64,127 +62,4 @@ export interface RadioProps extends Omit<
 }
 
 /** One native radio option; grouping and selection ownership remain with the browser and host. */
-export const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(
-    {
-        name,
-        value,
-        label,
-        readOnly,
-        invalid = false,
-        onChange,
-        className,
-        style,
-        pt,
-        checked,
-        defaultChecked,
-        disabled,
-        onClick,
-        'aria-invalid': ariaInvalid,
-        ...nativeProps
-    },
-    forwardedRef,
-) {
-    const effectiveChecked = checked ?? pt?.input?.checked;
-    const effectiveDefaultChecked = defaultChecked ?? pt?.input?.defaultChecked;
-    const effectiveDisabled = disabled ?? pt?.input?.disabled;
-    const effectiveReadOnly = readOnly ?? pt?.input?.readOnly;
-    const effectiveAriaInvalid =
-        ariaInvalid ?? pt?.input?.['aria-invalid'] ?? (invalid || undefined);
-    const effectiveInvalid =
-        invalid || effectiveAriaInvalid === true || effectiveAriaInvalid === 'true';
-    const { ref, selected, synchronize } = useNativeCheckedState(
-        effectiveChecked,
-        effectiveDefaultChecked,
-        forwardedRef,
-        true,
-    );
-    return (
-        <label
-            {...pt?.root}
-            className={['cratis-choice', pt?.root?.className, className]
-                .filter(Boolean)
-                .join(' ')}
-            style={{ ...pt?.root?.style, ...style }}
-            data-cratis-part='root'
-            data-disabled={effectiveDisabled || undefined}
-            data-invalid={effectiveInvalid || undefined}
-            data-readonly={effectiveReadOnly || undefined}
-            data-selected={selected || undefined}
-        >
-            <input
-                {...pt?.input}
-                {...nativeProps}
-                ref={ref}
-                type='radio'
-                name={name}
-                value={value}
-                checked={effectiveChecked}
-                defaultChecked={effectiveDefaultChecked}
-                disabled={effectiveDisabled}
-                readOnly={undefined}
-                aria-invalid={effectiveAriaInvalid}
-                onClick={(event) => {
-                    pt?.input?.onClick?.(event);
-                    onClick?.(event);
-                    if (effectiveReadOnly) event.preventDefault();
-                }}
-                onChange={(event) => {
-                    pt?.input?.onChange?.(event);
-                    if (effectiveReadOnly || !event.currentTarget.checked) return;
-                    synchronize(true);
-                    onChange?.(true, {
-                        source: 'user',
-                        nativeEvent: event.nativeEvent,
-                    });
-                }}
-                className={['cratis-choice__input', pt?.input?.className]
-                    .filter(Boolean)
-                    .join(' ')}
-                data-cratis-part='input'
-                data-disabled={effectiveDisabled || undefined}
-                data-invalid={effectiveInvalid || undefined}
-                data-readonly={effectiveReadOnly || undefined}
-                data-selected={selected || undefined}
-            />
-            <span
-                {...pt?.box}
-                className={['cratis-radio__box', pt?.box?.className]
-                    .filter(Boolean)
-                    .join(' ')}
-                data-cratis-part='box'
-                data-disabled={effectiveDisabled || undefined}
-                data-invalid={effectiveInvalid || undefined}
-                data-readonly={effectiveReadOnly || undefined}
-                data-selected={selected || undefined}
-                aria-hidden='true'
-            >
-                <span
-                    {...pt?.indicator}
-                    className={['cratis-radio__indicator', pt?.indicator?.className]
-                        .filter(Boolean)
-                        .join(' ')}
-                    data-cratis-part='indicator'
-                    data-disabled={effectiveDisabled || undefined}
-                    data-invalid={effectiveInvalid || undefined}
-                    data-readonly={effectiveReadOnly || undefined}
-                    data-selected={selected || undefined}
-                />
-            </span>
-            {label !== undefined && (
-                <span
-                    {...pt?.label}
-                    className={['cratis-choice__label', pt?.label?.className]
-                        .filter(Boolean)
-                        .join(' ')}
-                    data-cratis-part='label'
-                    data-disabled={effectiveDisabled || undefined}
-                    data-invalid={effectiveInvalid || undefined}
-                    data-readonly={effectiveReadOnly || undefined}
-                    data-selected={selected || undefined}
-                >
-                    {label}
-                </span>
-            )}
-        </label>
-    );
-});
+export { RadioImplementation as Radio } from './RadioImplementation';
diff --git a/Source/Common/RadioImplementation.tsx b/Source/Common/RadioImplementation.tsx
new file mode 100644
index 00000000..0043568d
--- /dev/null
+++ b/Source/Common/RadioImplementation.tsx
@@ -0,0 +1,139 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { forwardRef } from 'react';
+import type { RadioProps } from './Radio';
+import { useNativeCheckedState } from './useNativeCheckedState';
+
+/** Core implementation for the native radio presentation slot. */
+export const RadioImplementation = forwardRef<HTMLInputElement, RadioProps>(
+    function RadioImplementation(
+        {
+            name,
+            value,
+            label,
+            readOnly,
+            invalid = false,
+            onChange,
+            className,
+            style,
+            pt,
+            checked,
+            defaultChecked,
+            disabled,
+            onClick,
+            'aria-invalid': ariaInvalid,
+            ...nativeProps
+        },
+        forwardedRef,
+    ) {
+        const effectiveChecked = checked ?? pt?.input?.checked;
+        const effectiveDefaultChecked = defaultChecked ?? pt?.input?.defaultChecked;
+        const effectiveDisabled = disabled ?? pt?.input?.disabled;
+        const effectiveReadOnly = readOnly ?? pt?.input?.readOnly;
+        const effectiveAriaInvalid =
+            ariaInvalid ?? pt?.input?.['aria-invalid'] ?? (invalid || undefined);
+        const effectiveInvalid =
+            invalid ||
+            effectiveAriaInvalid === true ||
+            effectiveAriaInvalid === 'true';
+        const { ref, selected, synchronize } = useNativeCheckedState(
+            effectiveChecked,
+            effectiveDefaultChecked,
+            forwardedRef,
+            true,
+        );
+        return (
+            <label
+                {...pt?.root}
+                className={['cratis-choice', pt?.root?.className, className]
+                    .filter(Boolean)
+                    .join(' ')}
+                style={{ ...pt?.root?.style, ...style }}
+                data-cratis-part='root'
+                data-disabled={effectiveDisabled || undefined}
+                data-invalid={effectiveInvalid || undefined}
+                data-readonly={effectiveReadOnly || undefined}
+                data-selected={selected || undefined}
+            >
+                <input
+                    {...pt?.input}
+                    {...nativeProps}
+                    ref={ref}
+                    type='radio'
+                    name={name}
+                    value={value}
+                    checked={effectiveChecked}
+                    defaultChecked={effectiveDefaultChecked}
+                    disabled={effectiveDisabled}
+                    readOnly={undefined}
+                    aria-invalid={effectiveAriaInvalid}
+                    onClick={(event) => {
+                        pt?.input?.onClick?.(event);
+                        onClick?.(event);
+                        if (effectiveReadOnly) event.preventDefault();
+                    }}
+                    onChange={(event) => {
+                        pt?.input?.onChange?.(event);
+                        if (effectiveReadOnly || !event.currentTarget.checked) return;
+                        synchronize(true);
+                        onChange?.(true, {
+                            source: 'user',
+                            nativeEvent: event.nativeEvent,
+                        });
+                    }}
+                    className={['cratis-choice__input', pt?.input?.className]
+                        .filter(Boolean)
+                        .join(' ')}
+                    data-cratis-part='input'
+                    data-disabled={effectiveDisabled || undefined}
+                    data-invalid={effectiveInvalid || undefined}
+                    data-readonly={effectiveReadOnly || undefined}
+                    data-selected={selected || undefined}
+                />
+                <span
+                    {...pt?.box}
+                    className={['cratis-radio__box', pt?.box?.className]
+                        .filter(Boolean)
+                        .join(' ')}
+                    data-cratis-part='box'
+                    data-disabled={effectiveDisabled || undefined}
+                    data-invalid={effectiveInvalid || undefined}
+                    data-readonly={effectiveReadOnly || undefined}
+                    data-selected={selected || undefined}
+                    aria-hidden='true'
+                >
+                    <span
+                        {...pt?.indicator}
+                        className={[
+                            'cratis-radio__indicator',
+                            pt?.indicator?.className,
+                        ]
+                            .filter(Boolean)
+                            .join(' ')}
+                        data-cratis-part='indicator'
+                        data-disabled={effectiveDisabled || undefined}
+                        data-invalid={effectiveInvalid || undefined}
+                        data-readonly={effectiveReadOnly || undefined}
+                        data-selected={selected || undefined}
+                    />
+                </span>
+                {label !== undefined && (
+                    <span
+                        {...pt?.label}
+                        className={['cratis-choice__label', pt?.label?.className]
+                            .filter(Boolean)
+                            .join(' ')}
+                        data-cratis-part='label'
+                        data-disabled={effectiveDisabled || undefined}
+                        data-invalid={effectiveInvalid || undefined}
+                        data-readonly={effectiveReadOnly || undefined}
+                        data-selected={selected || undefined}
+                    >
+                        {label}
+                    </span>
+                )}
+            </label>
+        );
+    },
+);
diff --git a/Source/Common/Surface.tsx b/Source/Common/Surface.tsx
index a8bd436f..26faa0f0 100644
--- a/Source/Common/Surface.tsx
+++ b/Source/Common/Surface.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 { forwardRef, type ForwardedRef, type HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
 import type { ExactPartKeys } from '../types/ExactPartKeys';
 import type { PartsOf } from '../types/parts';
 
@@ -25,28 +25,5 @@ export interface SurfaceProps extends HTMLAttributes<HTMLElement> {
     pt?: SurfaceParts;
 }
 
-const assignSurfaceRef = (ref: ForwardedRef<HTMLElement>, element: HTMLElement | null) => {
-    if (typeof ref === 'function') ref(element);
-    else if (ref) ref.current = element;
-};
-
 /** A non-interactive semantic surface with a bounded native-element choice. */
-export const Surface = forwardRef<HTMLElement, SurfaceProps>(function Surface(
-    { as: Element = 'div', pt, className, style, ...nativeProps },
-    ref,
-) {
-    return (
-        <Element
-            {...pt?.root}
-            {...nativeProps}
-            ref={(element) => {
-                assignSurfaceRef(ref, element);
-            }}
-            className={['cratis-surface', pt?.root?.className, className]
-                .filter(Boolean)
-                .join(' ')}
-            style={{ ...pt?.root?.style, ...style }}
-            data-cratis-part='root'
-        />
-    );
-});
+export { SurfaceImplementation as Surface } from './SurfaceImplementation';
diff --git a/Source/Common/SurfaceImplementation.tsx b/Source/Common/SurfaceImplementation.tsx
new file mode 100644
index 00000000..93af1ce5
--- /dev/null
+++ b/Source/Common/SurfaceImplementation.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 { forwardRef, type ForwardedRef } from 'react';
+import type { SurfaceProps } from './Surface';
+
+const assignSurfaceRef = (ref: ForwardedRef<HTMLElement>, element: HTMLElement | null) => {
+    if (typeof ref === 'function') ref(element);
+    else if (ref) ref.current = element;
+};
+
+/** Core implementation for the semantic-surface presentation slot. */
+export const SurfaceImplementation = forwardRef<HTMLElement, SurfaceProps>(
+    function SurfaceImplementation(
+        { as: Element = 'div', pt, className, style, ...nativeProps },
+        ref,
+    ) {
+        return (
+            <Element
+                {...pt?.root}
+                {...nativeProps}
+                ref={(element) => {
+                    assignSurfaceRef(ref, element);
+                }}
+                className={['cratis-surface', pt?.root?.className, className]
+                    .filter(Boolean)
+                    .join(' ')}
+                style={{ ...pt?.root?.style, ...style }}
+                data-cratis-part='root'
+            />
+        );
+    },
+);
diff --git a/Source/Common/Switch.tsx b/Source/Common/Switch.tsx
index c4e04a7e..b2fa950d 100644
--- a/Source/Common/Switch.tsx
+++ b/Source/Common/Switch.tsx
@@ -2,7 +2,6 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import {
-    forwardRef,
     type CSSProperties,
     type HTMLAttributes,
     type InputHTMLAttributes,
@@ -12,7 +11,6 @@ import {
 import type { ChangeHandler } from '../types/ChangeHandler';
 import type { ExactPartKeys } from '../types/ExactPartKeys';
 import type { PartsOf } from '../types/parts';
-import { useNativeCheckedState } from './useNativeCheckedState';
 
 /** Stable Cratis-owned parts for styling a {@link Switch}. */
 export interface SwitchParts {
@@ -53,124 +51,4 @@ export interface SwitchProps extends Omit<
 }
 
 /** A native checkbox with switch semantics, semantic changes, and stable visual parts. */
-export const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(
-    {
-        label,
-        readOnly,
-        invalid = false,
-        onChange,
-        className,
-        style,
-        pt,
-        checked,
-        defaultChecked,
-        disabled,
-        onClick,
-        'aria-invalid': ariaInvalid,
-        ...nativeProps
-    },
-    forwardedRef,
-) {
-    const effectiveChecked = checked ?? pt?.input?.checked;
-    const effectiveDefaultChecked = defaultChecked ?? pt?.input?.defaultChecked;
-    const effectiveDisabled = disabled ?? pt?.input?.disabled;
-    const effectiveReadOnly = readOnly ?? pt?.input?.readOnly;
-    const effectiveAriaInvalid =
-        ariaInvalid ?? pt?.input?.['aria-invalid'] ?? (invalid || undefined);
-    const effectiveInvalid =
-        invalid || effectiveAriaInvalid === true || effectiveAriaInvalid === 'true';
-    const { ref, selected, synchronize } = useNativeCheckedState(
-        effectiveChecked,
-        effectiveDefaultChecked,
-        forwardedRef,
-    );
-    return (
-        <label
-            {...pt?.root}
-            className={['cratis-choice', pt?.root?.className, className]
-                .filter(Boolean)
-                .join(' ')}
-            style={{ ...pt?.root?.style, ...style }}
-            data-cratis-part='root'
-            data-disabled={effectiveDisabled || undefined}
-            data-invalid={effectiveInvalid || undefined}
-            data-readonly={effectiveReadOnly || undefined}
-            data-selected={selected || undefined}
-        >
-            <input
-                {...pt?.input}
-                {...nativeProps}
-                ref={ref}
-                type='checkbox'
-                role='switch'
-                checked={effectiveChecked}
-                defaultChecked={effectiveDefaultChecked}
-                disabled={effectiveDisabled}
-                readOnly={undefined}
-                aria-invalid={effectiveAriaInvalid}
-                aria-readonly={effectiveReadOnly || undefined}
-                onClick={(event) => {
-                    pt?.input?.onClick?.(event);
-                    onClick?.(event);
-                    if (effectiveReadOnly) event.preventDefault();
-                }}
-                onChange={(event) => {
-                    pt?.input?.onChange?.(event);
-                    if (effectiveReadOnly) return;
-                    synchronize(event.currentTarget.checked);
-                    onChange?.(event.currentTarget.checked, {
-                        source: 'user',
-                        nativeEvent: event.nativeEvent,
-                    });
-                }}
-                className={['cratis-choice__input', pt?.input?.className]
-                    .filter(Boolean)
-                    .join(' ')}
-                data-cratis-part='input'
-                data-disabled={effectiveDisabled || undefined}
-                data-invalid={effectiveInvalid || undefined}
-                data-readonly={effectiveReadOnly || undefined}
-                data-selected={selected || undefined}
-            />
-            <span
-                {...pt?.control}
-                className={['cratis-switch__control', pt?.control?.className]
-                    .filter(Boolean)
-                    .join(' ')}
-                data-cratis-part='control'
-                data-disabled={effectiveDisabled || undefined}
-                data-invalid={effectiveInvalid || undefined}
-                data-readonly={effectiveReadOnly || undefined}
-                data-selected={selected || undefined}
-                aria-hidden='true'
-            >
-                <span
-                    {...pt?.handle}
-                    className={['cratis-switch__handle', pt?.handle?.className]
-                        .filter(Boolean)
-                        .join(' ')}
-                    data-cratis-part='handle'
-                    data-disabled={effectiveDisabled || undefined}
-                    data-invalid={effectiveInvalid || undefined}
-                    data-readonly={effectiveReadOnly || undefined}
-                    data-selected={selected || undefined}
-                />
-            </span>
-            {label !== undefined && (
-                <span
-                    {...pt?.label}
-                    className={['cratis-choice__label', pt?.label?.className]
-                        .filter(Boolean)
-                        .join(' ')}
-                    data-cratis-part='label'
-                    data-disabled={effectiveDisabled || undefined}
-                    data-invalid={effectiveInvalid || undefined}
-                    data-readonly={effectiveReadOnly || undefined}
-                    data-selected={selected || undefined}
-                >
-                    {label}
-                </span>
-            )}
-        </label>
-    );
-});
+export { SwitchImplementation as Switch } from './SwitchImplementation';
diff --git a/Source/Common/SwitchImplementation.tsx b/Source/Common/SwitchImplementation.tsx
new file mode 100644
index 00000000..067a87e6
--- /dev/null
+++ b/Source/Common/SwitchImplementation.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 { forwardRef } from 'react';
+import type { SwitchProps } from './Switch';
+import { useNativeCheckedState } from './useNativeCheckedState';
+
+/** Core implementation for the native switch presentation slot. */
+export const SwitchImplementation = forwardRef<HTMLInputElement, SwitchProps>(
+    function SwitchImplementation(
+        {
+            label,
+            readOnly,
+            invalid = false,
+            onChange,
+            className,
+            style,
+            pt,
+            checked,
+            defaultChecked,
+            disabled,
+            onClick,
+            'aria-invalid': ariaInvalid,
+            ...nativeProps
+        },
+        forwardedRef,
+    ) {
+        const effectiveChecked = checked ?? pt?.input?.checked;
+        const effectiveDefaultChecked = defaultChecked ?? pt?.input?.defaultChecked;
+        const effectiveDisabled = disabled ?? pt?.input?.disabled;
+        const effectiveReadOnly = readOnly ?? pt?.input?.readOnly;
+        const effectiveAriaInvalid =
+            ariaInvalid ?? pt?.input?.['aria-invalid'] ?? (invalid || undefined);
+        const effectiveInvalid =
+            invalid ||
+            effectiveAriaInvalid === true ||
+            effectiveAriaInvalid === 'true';
+        const { ref, selected, synchronize } = useNativeCheckedState(
+            effectiveChecked,
+            effectiveDefaultChecked,
+            forwardedRef,
+        );
+        return (
+            <label
+                {...pt?.root}
+                className={['cratis-choice', pt?.root?.className, className]
+                    .filter(Boolean)
+                    .join(' ')}
+                style={{ ...pt?.root?.style, ...style }}
+                data-cratis-part='root'
+                data-disabled={effectiveDisabled || undefined}
+                data-invalid={effectiveInvalid || undefined}
+                data-readonly={effectiveReadOnly || undefined}
+                data-selected={selected || undefined}
+            >
+                <input
+                    {...pt?.input}
+                    {...nativeProps}
+                    ref={ref}
+                    type='checkbox'
+                    role='switch'
+                    checked={effectiveChecked}
+                    defaultChecked={effectiveDefaultChecked}
+                    disabled={effectiveDisabled}
+                    readOnly={undefined}
+                    aria-invalid={effectiveAriaInvalid}
+                    aria-readonly={effectiveReadOnly || undefined}
+                    onClick={(event) => {
+                        pt?.input?.onClick?.(event);
+                        onClick?.(event);
+                        if (effectiveReadOnly) event.preventDefault();
+                    }}
+                    onChange={(event) => {
+                        pt?.input?.onChange?.(event);
+                        if (effectiveReadOnly) return;
+                        synchronize(event.currentTarget.checked);
+                        onChange?.(event.currentTarget.checked, {
+                            source: 'user',
+                            nativeEvent: event.nativeEvent,
+                        });
+                    }}
+                    className={['cratis-choice__input', pt?.input?.className]
+                        .filter(Boolean)
+                        .join(' ')}
+                    data-cratis-part='input'
+                    data-disabled={effectiveDisabled || undefined}
+                    data-invalid={effectiveInvalid || undefined}
+                    data-readonly={effectiveReadOnly || undefined}
+                    data-selected={selected || undefined}
+                />
+                <span
+                    {...pt?.control}
+                    className={['cratis-switch__control', pt?.control?.className]
+                        .filter(Boolean)
+                        .join(' ')}
+                    data-cratis-part='control'
+                    data-disabled={effectiveDisabled || undefined}
+                    data-invalid={effectiveInvalid || undefined}
+                    data-readonly={effectiveReadOnly || undefined}
+                    data-selected={selected || undefined}
+                    aria-hidden='true'
+                >
+                    <span
+                        {...pt?.handle}
+                        className={[
+                            'cratis-switch__handle',
+                            pt?.handle?.className,
+                        ]
+                            .filter(Boolean)
+                            .join(' ')}
+                        data-cratis-part='handle'
+                        data-disabled={effectiveDisabled || undefined}
+                        data-invalid={effectiveInvalid || undefined}
+                        data-readonly={effectiveReadOnly || undefined}
+                        data-selected={selected || undefined}
+                    />
+                </span>
+                {label !== undefined && (
+                    <span
+                        {...pt?.label}
+                        className={['cratis-choice__label', pt?.label?.className]
+                            .filter(Boolean)
+                            .join(' ')}
+                        data-cratis-part='label'
+                        data-disabled={effectiveDisabled || undefined}
+                        data-invalid={effectiveInvalid || undefined}
+                        data-readonly={effectiveReadOnly || undefined}
+                        data-selected={selected || undefined}
+                    >
+                        {label}
+                    </span>
+                )}
+            </label>
+        );
+    },
+);
diff --git a/Source/Common/TextArea.tsx b/Source/Common/TextArea.tsx
index b3386133..4b9f7bbf 100644
--- a/Source/Common/TextArea.tsx
+++ b/Source/Common/TextArea.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 { forwardRef, type TextareaHTMLAttributes } from 'react';
+import type { TextareaHTMLAttributes } from 'react';
 import type { ChangeHandler } from '../types/ChangeHandler';
 import type { ExactPartKeys } from '../types/ExactPartKeys';
 import type { PartsOf } from '../types/parts';
@@ -29,52 +29,4 @@ export interface TextAreaProps extends Omit<
 }
 
 /** A native multi-line text control with semantic value changes and stable Components parts. */
-export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
-    function TextArea(
-        {
-            invalid = false,
-            onChange,
-            pt,
-            className,
-            style,
-            disabled,
-            readOnly,
-            'aria-invalid': ariaInvalid,
-            ...nativeProps
-        },
-        ref,
-    ) {
-        const effectiveDisabled = disabled ?? pt?.root?.disabled;
-        const effectiveReadOnly = readOnly ?? pt?.root?.readOnly;
-        const effectiveAriaInvalid =
-            ariaInvalid ?? pt?.root?.['aria-invalid'] ?? (invalid || undefined);
-        const effectiveInvalid =
-            invalid || effectiveAriaInvalid === true || effectiveAriaInvalid === 'true';
-
-        return (
-            <textarea
-                {...pt?.root}
-                {...nativeProps}
-                ref={ref}
-                disabled={effectiveDisabled}
-                readOnly={effectiveReadOnly}
-                aria-invalid={effectiveAriaInvalid}
-                onChange={(event) => {
-                    pt?.root?.onChange?.(event);
-                    onChange?.(event.currentTarget.value, {
-                        source: 'user',
-                        nativeEvent: event.nativeEvent,
-                    });
-                }}
-                className={['cratis-text-area', pt?.root?.className, className]
-                    .filter(Boolean)
-                    .join(' ')}
-                style={{ ...pt?.root?.style, ...style }}
-                data-cratis-part='root'
-                data-disabled={effectiveDisabled || undefined}
-                data-invalid={effectiveInvalid || undefined}
-                data-readonly={effectiveReadOnly || undefined}
-            />
-        );
-    },
-);
+export { TextAreaImplementation as TextArea } from './TextAreaImplementation';
diff --git a/Source/Common/TextAreaImplementation.tsx b/Source/Common/TextAreaImplementation.tsx
new file mode 100644
index 00000000..a142bc02
--- /dev/null
+++ b/Source/Common/TextAreaImplementation.tsx
@@ -0,0 +1,57 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { forwardRef } from 'react';
+import type { TextAreaProps } from './TextArea';
+
+/** Core implementation for the native text-area presentation slot. */
+export const TextAreaImplementation = forwardRef<
+    HTMLTextAreaElement,
+    TextAreaProps
+>(function TextAreaImplementation(
+    {
+        invalid = false,
+        onChange,
+        pt,
+        className,
+        style,
+        disabled,
+        readOnly,
+        'aria-invalid': ariaInvalid,
+        ...nativeProps
+    },
+    ref,
+) {
+    const effectiveDisabled = disabled ?? pt?.root?.disabled;
+    const effectiveReadOnly = readOnly ?? pt?.root?.readOnly;
+    const effectiveAriaInvalid =
+        ariaInvalid ?? pt?.root?.['aria-invalid'] ?? (invalid || undefined);
+    const effectiveInvalid =
+        invalid || effectiveAriaInvalid === true || effectiveAriaInvalid === 'true';
+
+    return (
+        <textarea
+            {...pt?.root}
+            {...nativeProps}
+            ref={ref}
+            disabled={effectiveDisabled}
+            readOnly={effectiveReadOnly}
+            aria-invalid={effectiveAriaInvalid}
+            onChange={(event) => {
+                pt?.root?.onChange?.(event);
+                onChange?.(event.currentTarget.value, {
+                    source: 'user',
+                    nativeEvent: event.nativeEvent,
+                });
+            }}
+            className={['cratis-text-area', pt?.root?.className, className]
+                .filter(Boolean)
+                .join(' ')}
+            style={{ ...pt?.root?.style, ...style }}
+            data-cratis-part='root'
+            data-disabled={effectiveDisabled || undefined}
+            data-invalid={effectiveInvalid || undefined}
+            data-readonly={effectiveReadOnly || undefined}
+        />
+    );
+});
diff --git a/Source/Common/TextInput.tsx b/Source/Common/TextInput.tsx
index 0e972da0..fef69446 100644
--- a/Source/Common/TextInput.tsx
+++ b/Source/Common/TextInput.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 { forwardRef, type InputHTMLAttributes } from 'react';
+import type { InputHTMLAttributes } from 'react';
 import type { ChangeHandler } from '../types/ChangeHandler';
 import type { ExactPartKeys } from '../types/ExactPartKeys';
 import type { PartsOf } from '../types/parts';
@@ -37,54 +37,4 @@ export interface TextInputProps extends Omit<
 }
 
 /** A native text input with semantic value changes and stable Components parts. */
-export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
-    function TextInput(
-        {
-            type = 'text',
-            invalid = false,
-            onChange,
-            pt,
-            className,
-            style,
-            disabled,
-            readOnly,
-            'aria-invalid': ariaInvalid,
-            ...nativeProps
-        },
-        ref,
-    ) {
-        const effectiveDisabled = disabled ?? pt?.root?.disabled;
-        const effectiveReadOnly = readOnly ?? pt?.root?.readOnly;
-        const effectiveAriaInvalid =
-            ariaInvalid ?? pt?.root?.['aria-invalid'] ?? (invalid || undefined);
-        const effectiveInvalid =
-            invalid || effectiveAriaInvalid === true || effectiveAriaInvalid === 'true';
-
-        return (
-            <input
-                {...pt?.root}
-                {...nativeProps}
-                ref={ref}
-                type={type}
-                disabled={effectiveDisabled}
-                readOnly={effectiveReadOnly}
-                aria-invalid={effectiveAriaInvalid}
-                onChange={(event) => {
-                    pt?.root?.onChange?.(event);
-                    onChange?.(event.currentTarget.value, {
-                        source: 'user',
-                        nativeEvent: event.nativeEvent,
-                    });
-                }}
-                className={['cratis-text-input', pt?.root?.className, className]
-                    .filter(Boolean)
-                    .join(' ')}
-                style={{ ...pt?.root?.style, ...style }}
-                data-cratis-part='root'
-                data-disabled={effectiveDisabled || undefined}
-                data-invalid={effectiveInvalid || undefined}
-                data-readonly={effectiveReadOnly || undefined}
-            />
-        );
-    },
-);
+export { TextInputImplementation as TextInput } from './TextInputImplementation';
diff --git a/Source/Common/TextInputImplementation.tsx b/Source/Common/TextInputImplementation.tsx
new file mode 100644
index 00000000..98d98558
--- /dev/null
+++ b/Source/Common/TextInputImplementation.tsx
@@ -0,0 +1,59 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { forwardRef } from 'react';
+import type { TextInputProps } from './TextInput';
+
+/** Core implementation for the native text-input presentation slot. */
+export const TextInputImplementation = forwardRef<
+    HTMLInputElement,
+    TextInputProps
+>(function TextInputImplementation(
+    {
+        type = 'text',
+        invalid = false,
+        onChange,
+        pt,
+        className,
+        style,
+        disabled,
+        readOnly,
+        'aria-invalid': ariaInvalid,
+        ...nativeProps
+    },
+    ref,
+) {
+    const effectiveDisabled = disabled ?? pt?.root?.disabled;
+    const effectiveReadOnly = readOnly ?? pt?.root?.readOnly;
+    const effectiveAriaInvalid =
+        ariaInvalid ?? pt?.root?.['aria-invalid'] ?? (invalid || undefined);
+    const effectiveInvalid =
+        invalid || effectiveAriaInvalid === true || effectiveAriaInvalid === 'true';
+
+    return (
+        <input
+            {...pt?.root}
+            {...nativeProps}
+            ref={ref}
+            type={type}
+            disabled={effectiveDisabled}
+            readOnly={effectiveReadOnly}
+            aria-invalid={effectiveAriaInvalid}
+            onChange={(event) => {
+                pt?.root?.onChange?.(event);
+                onChange?.(event.currentTarget.value, {
+                    source: 'user',
+                    nativeEvent: event.nativeEvent,
+                });
+            }}
+            className={['cratis-text-input', pt?.root?.className, className]
+                .filter(Boolean)
+                .join(' ')}
+            style={{ ...pt?.root?.style, ...style }}
+            data-cratis-part='root'
+            data-disabled={effectiveDisabled || undefined}
+            data-invalid={effectiveInvalid || undefined}
+            data-readonly={effectiveReadOnly || undefined}
+        />
+    );
+});
diff --git a/Source/Display/ProgressBar.tsx b/Source/Display/ProgressBar.tsx
index b57176bd..3969eb68 100644
--- a/Source/Display/ProgressBar.tsx
+++ b/Source/Display/ProgressBar.tsx
@@ -18,43 +18,4 @@ export interface ProgressBarProps {
 }
 
 /** A horizontal determinate or indeterminate progress indicator. */
-export const ProgressBar = ({
-    value = 0,
-    mode = 'determinate',
-    showValue = true,
-    'aria-label': ariaLabel = 'Progress',
-    'aria-labelledby': ariaLabelledBy,
-    className,
-}: ProgressBarProps) => {
-    const boundedValue = Math.min(100, Math.max(0, value));
-    const ariaValue = mode === 'determinate' ? boundedValue : undefined;
-    const isBusy = mode === 'indeterminate' || boundedValue < 100;
-
-    return (
-        <div
-            className={['cratis-progress-bar', className].filter(Boolean).join(' ')}
-            data-cratis-part='root'
-            data-mode={mode}
-            data-busy={isBusy || undefined}
-            data-loading={mode === 'indeterminate' || undefined}
-            role='progressbar'
-            aria-label={ariaLabelledBy ? undefined : ariaLabel}
-            aria-labelledby={ariaLabelledBy}
-            aria-valuemin={mode === 'determinate' ? 0 : undefined}
-            aria-valuemax={mode === 'determinate' ? 100 : undefined}
-            aria-valuenow={ariaValue}
-        >
-            <span
-                className='cratis-progress-bar__indicator'
-                data-cratis-part='indicator'
-                style={mode === 'determinate' ? { width: `${boundedValue}%` } : undefined}
-            >
-                {showValue && mode === 'determinate' && (
-                    <span className='cratis-progress-bar__label' data-cratis-part='label'>
-                        {boundedValue}%
-                    </span>
-                )}
-            </span>
-        </div>
-    );
-};
+export { ProgressBarImplementation as ProgressBar } from './ProgressBarImplementation';
diff --git a/Source/Display/ProgressBarImplementation.tsx b/Source/Display/ProgressBarImplementation.tsx
new file mode 100644
index 00000000..c6b7621b
--- /dev/null
+++ b/Source/Display/ProgressBarImplementation.tsx
@@ -0,0 +1,46 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { ProgressBarProps } from './ProgressBar';
+
+/** Core implementation for the progress-bar presentation slot. */
+export const ProgressBarImplementation = ({
+    value = 0,
+    mode = 'determinate',
+    showValue = true,
+    'aria-label': ariaLabel = 'Progress',
+    'aria-labelledby': ariaLabelledBy,
+    className,
+}: ProgressBarProps) => {
+    const boundedValue = Math.min(100, Math.max(0, value));
+    const ariaValue = mode === 'determinate' ? boundedValue : undefined;
+    const isBusy = mode === 'indeterminate' || boundedValue < 100;
+
+    return (
+        <div
+            className={['cratis-progress-bar', className].filter(Boolean).join(' ')}
+            data-cratis-part='root'
+            data-mode={mode}
+            data-busy={isBusy || undefined}
+            data-loading={mode === 'indeterminate' || undefined}
+            role='progressbar'
+            aria-label={ariaLabelledBy ? undefined : ariaLabel}
+            aria-labelledby={ariaLabelledBy}
+            aria-valuemin={mode === 'determinate' ? 0 : undefined}
+            aria-valuemax={mode === 'determinate' ? 100 : undefined}
+            aria-valuenow={ariaValue}
+        >
+            <span
+                className='cratis-progress-bar__indicator'
+                data-cratis-part='indicator'
+                style={mode === 'determinate' ? { width: `${boundedValue}%` } : undefined}
+            >
+                {showValue && mode === 'determinate' && (
+                    <span className='cratis-progress-bar__label' data-cratis-part='label'>
+                        {boundedValue}%
+                    </span>
+                )}
+            </span>
+        </div>
+    );
+};
diff --git a/Source/scripts/generate-parts.mjs b/Source/scripts/generate-parts.mjs
index b46ea47c..5ea92be4 100644
--- a/Source/scripts/generate-parts.mjs
+++ b/Source/scripts/generate-parts.mjs
@@ -160,7 +160,8 @@ export const partDefinitions = {
     },
     Button: {
         parts: ['root', 'spinner', 'icon', 'label'],
-        sources: ['Common/Button.tsx'],
+        sources: ['Common/ButtonImplementation.tsx'],
+        ptFiles: ['Common/Button.tsx'],
         ptKeys: ['root', 'icon', 'label', 'spinner'],
     },
     ActionMenubar: {
@@ -169,36 +170,43 @@ export const partDefinitions = {
     },
     IconButton: {
         aliasOf: 'Button',
-        sources: ['Common/IconButton.tsx'],
+        sources: ['Common/IconButtonImplementation.tsx'],
+        ptFiles: ['Common/IconButton.tsx'],
     },
     TextInput: {
         parts: ['root'],
-        sources: ['Common/TextInput.tsx'],
+        sources: ['Common/TextInputImplementation.tsx'],
+        ptFiles: ['Common/TextInput.tsx'],
         ptKeys: ['root'],
     },
     TextArea: {
         parts: ['root'],
-        sources: ['Common/TextArea.tsx'],
+        sources: ['Common/TextAreaImplementation.tsx'],
+        ptFiles: ['Common/TextArea.tsx'],
         ptKeys: ['root'],
     },
     Checkbox: {
         parts: ['root', 'input', 'box', 'indicator', 'label'],
-        sources: ['Common/Checkbox.tsx'],
+        sources: ['Common/CheckboxImplementation.tsx'],
+        ptFiles: ['Common/Checkbox.tsx'],
         ptKeys: ['root', 'input', 'box', 'indicator', 'label'],
     },
     Radio: {
         parts: ['root', 'input', 'box', 'indicator', 'label'],
-        sources: ['Common/Radio.tsx'],
+        sources: ['Common/RadioImplementation.tsx'],
+        ptFiles: ['Common/Radio.tsx'],
         ptKeys: ['root', 'input', 'box', 'indicator', 'label'],
     },
     Switch: {
         parts: ['root', 'input', 'control', 'handle', 'label'],
-        sources: ['Common/Switch.tsx'],
+        sources: ['Common/SwitchImplementation.tsx'],
+        ptFiles: ['Common/Switch.tsx'],
         ptKeys: ['root', 'input', 'control', 'handle', 'label'],
     },
     Surface: {
         parts: ['root'],
-        sources: ['Common/Surface.tsx'],
+        sources: ['Common/SurfaceImplementation.tsx'],
+        ptFiles: ['Common/Surface.tsx'],
         ptKeys: ['root'],
     },
     Tooltip: {
@@ -434,7 +442,7 @@ export const partDefinitions = {
     },
     ProgressBar: {
         parts: ['root', 'indicator', 'label'],
-        sources: ['Display/ProgressBar.tsx'],
+        sources: ['Display/ProgressBarImplementation.tsx'],
     },
     Chip: {
         parts: ['root', 'icon', 'label', 'remove'],

From 65976e302f7ff48c8fa255de51075ac6ff55e370 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 20:38:44 +0200
Subject: [PATCH 186/267] Route presentation components through renderer slots

---
 Source/Common/Button.tsx                      |  19 +-
 Source/Common/Checkbox.tsx                    |  21 +-
 Source/Common/IconButton.tsx                  |  22 +-
 Source/Common/Radio.tsx                       |  19 +-
 Source/Common/Surface.tsx                     |  20 +-
 Source/Common/Switch.tsx                      |  19 +-
 Source/Common/TextArea.tsx                    |  22 +-
 Source/Common/TextInput.tsx                   |  22 +-
 Source/Display/ProgressBar.tsx                |  19 +-
 Source/renderer/README.md                     |  19 +-
 Source/renderer/RendererContext.tsx           |  22 +-
 Source/renderer/coreSlots.ts                  |  55 ++++
 .../for_resolution/when_resolving_slots.tsx   |  41 +++
 .../when_defining_core_slots.ts               |  51 ++++
 .../when_routing_presentation_slots.tsx       | 250 ++++++++++++++++++
 Source/renderer/index.ts                      |   4 +-
 Source/renderer/renderSlot.ts                 |  40 +++
 Source/renderer/resolve.ts                    |   7 +-
 Source/scripts/verify-package-graph.mjs       |  53 +++-
 19 files changed, 698 insertions(+), 27 deletions(-)
 create mode 100644 Source/renderer/coreSlots.ts
 create mode 100644 Source/renderer/for_self_hosting/when_defining_core_slots.ts
 create mode 100644 Source/renderer/for_self_hosting/when_routing_presentation_slots.tsx
 create mode 100644 Source/renderer/renderSlot.ts

diff --git a/Source/Common/Button.tsx b/Source/Common/Button.tsx
index a21a7a02..f40a4490 100644
--- a/Source/Common/Button.tsx
+++ b/Source/Common/Button.tsx
@@ -2,6 +2,7 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import {
+    forwardRef,
     type ButtonHTMLAttributes,
     type CSSProperties,
     type HTMLAttributes,
@@ -10,6 +11,10 @@ import {
 import type { TooltipPosition } from './Tooltip';
 import type { ExactPartKeys } from '../types/ExactPartKeys';
 import type { PartsOf } from '../types/parts';
+import { unstable_useSlot } from '../renderer/RendererContext';
+import { renderSlot } from '../renderer/renderSlot';
+import type { unstable_SlotDeclaration } from '../renderer/slots';
+import { ButtonImplementation } from './ButtonImplementation';
 
 /** Visual treatment of a {@link Button}. */
 export type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'link';
@@ -116,5 +121,17 @@ export interface ButtonProps extends Omit<
     children?: ReactNode;
 }
 
+const coreButtonDeclaration = Object.freeze({
+    mode: 'presentation',
+    fidelity: 'native',
+    render: ButtonImplementation,
+}) satisfies unstable_SlotDeclaration<'common.button'>;
+
 /** A Cratis-owned button with stable parts and renderer-independent styling. */
-export { ButtonImplementation as Button } from './ButtonImplementation';
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
+    props,
+    ref,
+) {
+    const declaration = unstable_useSlot('common.button', coreButtonDeclaration);
+    return renderSlot(declaration, props, ref);
+});
diff --git a/Source/Common/Checkbox.tsx b/Source/Common/Checkbox.tsx
index 78c507b8..f3610949 100644
--- a/Source/Common/Checkbox.tsx
+++ b/Source/Common/Checkbox.tsx
@@ -2,6 +2,7 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import {
+    forwardRef,
     type CSSProperties,
     type HTMLAttributes,
     type InputHTMLAttributes,
@@ -11,6 +12,10 @@ import {
 import type { ChangeHandler } from '../types/ChangeHandler';
 import type { ExactPartKeys } from '../types/ExactPartKeys';
 import type { PartsOf } from '../types/parts';
+import { unstable_useSlot } from '../renderer/RendererContext';
+import { renderSlot } from '../renderer/renderSlot';
+import type { unstable_SlotDeclaration } from '../renderer/slots';
+import { CheckboxImplementation } from './CheckboxImplementation';
 
 /** Stable Cratis-owned parts for styling a {@link Checkbox}. */
 export interface CheckboxParts {
@@ -50,5 +55,19 @@ export interface CheckboxProps extends Omit<
     pt?: CheckboxParts;
 }
 
+const coreCheckboxDeclaration = Object.freeze({
+    mode: 'presentation',
+    fidelity: 'native',
+    render: CheckboxImplementation,
+}) satisfies unstable_SlotDeclaration<'common.checkbox'>;
+
 /** A native form checkbox with one interaction owner and stable visual parts. */
-export { CheckboxImplementation as Checkbox } from './CheckboxImplementation';
+export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
+    function Checkbox(props, ref) {
+        const declaration = unstable_useSlot(
+            'common.checkbox',
+            coreCheckboxDeclaration,
+        );
+        return renderSlot(declaration, props, ref);
+    },
+);
diff --git a/Source/Common/IconButton.tsx b/Source/Common/IconButton.tsx
index 8209ba2b..d7b3e0e2 100644
--- a/Source/Common/IconButton.tsx
+++ b/Source/Common/IconButton.tsx
@@ -1,10 +1,14 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import type { ReactNode } from 'react';
+import { forwardRef, type ReactNode } from 'react';
 import type { ButtonParts, ButtonProps } from './Button';
 import type { ExactPartKeys } from '../types/ExactPartKeys';
 import type { PartsOf } from '../types/parts';
+import { unstable_useSlot } from '../renderer/RendererContext';
+import { renderSlot } from '../renderer/renderSlot';
+import type { unstable_SlotDeclaration } from '../renderer/slots';
+import { IconButtonImplementation } from './IconButtonImplementation';
 
 /** Stable Cratis-owned parts for styling an {@link IconButton}. */
 export type IconButtonParts = ButtonParts;
@@ -28,5 +32,19 @@ export interface IconButtonProps extends Omit<
     pt?: IconButtonParts;
 }
 
+const coreIconButtonDeclaration = Object.freeze({
+    mode: 'presentation',
+    fidelity: 'native',
+    render: IconButtonImplementation,
+}) satisfies unstable_SlotDeclaration<'common.iconButton'>;
+
 /** An icon-only specialization of {@link Button} with one native interaction owner. */
-export { IconButtonImplementation as IconButton } from './IconButtonImplementation';
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+    function IconButton(props, ref) {
+        const declaration = unstable_useSlot(
+            'common.iconButton',
+            coreIconButtonDeclaration,
+        );
+        return renderSlot(declaration, props, ref);
+    },
+);
diff --git a/Source/Common/Radio.tsx b/Source/Common/Radio.tsx
index af6dedd8..58033d90 100644
--- a/Source/Common/Radio.tsx
+++ b/Source/Common/Radio.tsx
@@ -2,6 +2,7 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import {
+    forwardRef,
     type CSSProperties,
     type HTMLAttributes,
     type InputHTMLAttributes,
@@ -11,6 +12,10 @@ import {
 import type { ChangeHandler } from '../types/ChangeHandler';
 import type { ExactPartKeys } from '../types/ExactPartKeys';
 import type { PartsOf } from '../types/parts';
+import { unstable_useSlot } from '../renderer/RendererContext';
+import { renderSlot } from '../renderer/renderSlot';
+import type { unstable_SlotDeclaration } from '../renderer/slots';
+import { RadioImplementation } from './RadioImplementation';
 
 /** Stable Cratis-owned parts for styling a {@link Radio}. */
 export interface RadioParts {
@@ -61,5 +66,17 @@ export interface RadioProps extends Omit<
     pt?: RadioParts;
 }
 
+const coreRadioDeclaration = Object.freeze({
+    mode: 'presentation',
+    fidelity: 'native',
+    render: RadioImplementation,
+}) satisfies unstable_SlotDeclaration<'common.radio'>;
+
 /** One native radio option; grouping and selection ownership remain with the browser and host. */
-export { RadioImplementation as Radio } from './RadioImplementation';
+export const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(
+    props,
+    ref,
+) {
+    const declaration = unstable_useSlot('common.radio', coreRadioDeclaration);
+    return renderSlot(declaration, props, ref);
+});
diff --git a/Source/Common/Surface.tsx b/Source/Common/Surface.tsx
index 26faa0f0..a61427aa 100644
--- a/Source/Common/Surface.tsx
+++ b/Source/Common/Surface.tsx
@@ -1,9 +1,13 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import type { HTMLAttributes } from 'react';
+import { forwardRef, type HTMLAttributes } from 'react';
 import type { ExactPartKeys } from '../types/ExactPartKeys';
 import type { PartsOf } from '../types/parts';
+import { unstable_useSlot } from '../renderer/RendererContext';
+import { renderSlot } from '../renderer/renderSlot';
+import type { unstable_SlotDeclaration } from '../renderer/slots';
+import { SurfaceImplementation } from './SurfaceImplementation';
 
 /** Native elements supported by {@link Surface}. */
 export type SurfaceElement = 'article' | 'div' | 'section';
@@ -25,5 +29,17 @@ export interface SurfaceProps extends HTMLAttributes<HTMLElement> {
     pt?: SurfaceParts;
 }
 
+const coreSurfaceDeclaration = Object.freeze({
+    mode: 'presentation',
+    fidelity: 'native',
+    render: SurfaceImplementation,
+}) satisfies unstable_SlotDeclaration<'common.surface'>;
+
 /** A non-interactive semantic surface with a bounded native-element choice. */
-export { SurfaceImplementation as Surface } from './SurfaceImplementation';
+export const Surface = forwardRef<HTMLElement, SurfaceProps>(function Surface(
+    props,
+    ref,
+) {
+    const declaration = unstable_useSlot('common.surface', coreSurfaceDeclaration);
+    return renderSlot(declaration, props, ref);
+});
diff --git a/Source/Common/Switch.tsx b/Source/Common/Switch.tsx
index b2fa950d..98046b57 100644
--- a/Source/Common/Switch.tsx
+++ b/Source/Common/Switch.tsx
@@ -2,6 +2,7 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import {
+    forwardRef,
     type CSSProperties,
     type HTMLAttributes,
     type InputHTMLAttributes,
@@ -11,6 +12,10 @@ import {
 import type { ChangeHandler } from '../types/ChangeHandler';
 import type { ExactPartKeys } from '../types/ExactPartKeys';
 import type { PartsOf } from '../types/parts';
+import { unstable_useSlot } from '../renderer/RendererContext';
+import { renderSlot } from '../renderer/renderSlot';
+import type { unstable_SlotDeclaration } from '../renderer/slots';
+import { SwitchImplementation } from './SwitchImplementation';
 
 /** Stable Cratis-owned parts for styling a {@link Switch}. */
 export interface SwitchParts {
@@ -50,5 +55,17 @@ export interface SwitchProps extends Omit<
     pt?: SwitchParts;
 }
 
+const coreSwitchDeclaration = Object.freeze({
+    mode: 'presentation',
+    fidelity: 'native',
+    render: SwitchImplementation,
+}) satisfies unstable_SlotDeclaration<'common.switch'>;
+
 /** A native checkbox with switch semantics, semantic changes, and stable visual parts. */
-export { SwitchImplementation as Switch } from './SwitchImplementation';
+export const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(
+    props,
+    ref,
+) {
+    const declaration = unstable_useSlot('common.switch', coreSwitchDeclaration);
+    return renderSlot(declaration, props, ref);
+});
diff --git a/Source/Common/TextArea.tsx b/Source/Common/TextArea.tsx
index 4b9f7bbf..d296c574 100644
--- a/Source/Common/TextArea.tsx
+++ b/Source/Common/TextArea.tsx
@@ -1,10 +1,14 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import type { TextareaHTMLAttributes } from 'react';
+import { forwardRef, type TextareaHTMLAttributes } from 'react';
 import type { ChangeHandler } from '../types/ChangeHandler';
 import type { ExactPartKeys } from '../types/ExactPartKeys';
 import type { PartsOf } from '../types/parts';
+import { unstable_useSlot } from '../renderer/RendererContext';
+import { renderSlot } from '../renderer/renderSlot';
+import type { unstable_SlotDeclaration } from '../renderer/slots';
+import { TextAreaImplementation } from './TextAreaImplementation';
 
 /** Stable Cratis-owned parts for styling a {@link TextArea}. */
 export interface TextAreaParts {
@@ -28,5 +32,19 @@ export interface TextAreaProps extends Omit<
     pt?: TextAreaParts;
 }
 
+const coreTextAreaDeclaration = Object.freeze({
+    mode: 'presentation',
+    fidelity: 'native',
+    render: TextAreaImplementation,
+}) satisfies unstable_SlotDeclaration<'common.textArea'>;
+
 /** A native multi-line text control with semantic value changes and stable Components parts. */
-export { TextAreaImplementation as TextArea } from './TextAreaImplementation';
+export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
+    function TextArea(props, ref) {
+        const declaration = unstable_useSlot(
+            'common.textArea',
+            coreTextAreaDeclaration,
+        );
+        return renderSlot(declaration, props, ref);
+    },
+);
diff --git a/Source/Common/TextInput.tsx b/Source/Common/TextInput.tsx
index fef69446..b519ec6e 100644
--- a/Source/Common/TextInput.tsx
+++ b/Source/Common/TextInput.tsx
@@ -1,10 +1,14 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import type { InputHTMLAttributes } from 'react';
+import { forwardRef, type InputHTMLAttributes } from 'react';
 import type { ChangeHandler } from '../types/ChangeHandler';
 import type { ExactPartKeys } from '../types/ExactPartKeys';
 import type { PartsOf } from '../types/parts';
+import { unstable_useSlot } from '../renderer/RendererContext';
+import { renderSlot } from '../renderer/renderSlot';
+import type { unstable_SlotDeclaration } from '../renderer/slots';
+import { TextInputImplementation } from './TextInputImplementation';
 
 /** Native text-like input types supported by {@link TextInput}. */
 export type TextInputType = 'text' | 'email' | 'password' | 'search' | 'tel' | 'url';
@@ -36,5 +40,19 @@ export interface TextInputProps extends Omit<
     pt?: TextInputParts;
 }
 
+const coreTextInputDeclaration = Object.freeze({
+    mode: 'presentation',
+    fidelity: 'native',
+    render: TextInputImplementation,
+}) satisfies unstable_SlotDeclaration<'common.textInput'>;
+
 /** A native text input with semantic value changes and stable Components parts. */
-export { TextInputImplementation as TextInput } from './TextInputImplementation';
+export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
+    function TextInput(props, ref) {
+        const declaration = unstable_useSlot(
+            'common.textInput',
+            coreTextInputDeclaration,
+        );
+        return renderSlot(declaration, props, ref);
+    },
+);
diff --git a/Source/Display/ProgressBar.tsx b/Source/Display/ProgressBar.tsx
index 3969eb68..98e20c17 100644
--- a/Source/Display/ProgressBar.tsx
+++ b/Source/Display/ProgressBar.tsx
@@ -1,6 +1,11 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
+import { unstable_useSlot } from '../renderer/RendererContext';
+import { renderSlot } from '../renderer/renderSlot';
+import type { unstable_SlotDeclaration } from '../renderer/slots';
+import { ProgressBarImplementation } from './ProgressBarImplementation';
+
 /** Props for {@link ProgressBar}. */
 export interface ProgressBarProps {
     /** Completion value, 0–100. Ignored in `indeterminate` mode. */
@@ -17,5 +22,17 @@ export interface ProgressBarProps {
     className?: string;
 }
 
+const coreProgressBarDeclaration = Object.freeze({
+    mode: 'presentation',
+    fidelity: 'native',
+    render: ProgressBarImplementation,
+}) satisfies unstable_SlotDeclaration<'common.progress'>;
+
 /** A horizontal determinate or indeterminate progress indicator. */
-export { ProgressBarImplementation as ProgressBar } from './ProgressBarImplementation';
+export const ProgressBar = (props: ProgressBarProps) => {
+    const declaration = unstable_useSlot(
+        'common.progress',
+        coreProgressBarDeclaration,
+    );
+    return renderSlot(declaration, props);
+};
diff --git a/Source/renderer/README.md b/Source/renderer/README.md
index 4382d450..ea416b20 100644
--- a/Source/renderer/README.md
+++ b/Source/renderer/README.md
@@ -3,10 +3,16 @@
 
 # Experimental renderer contracts
 
-This directory contains the D1 contracts and D2 provider/context/resolution infrastructure.
-Built-in manifests and component routing remain deferred to Slice E. `preloadRenderer` and lazy
-renderer entries are also deferred: `SlotDeclaration` has no load contract yet, so adding preload
-behavior now would invent an ABI that adapter declarations cannot honor.
+This directory contains the D1 contracts, D2 provider/context/resolution infrastructure, and E1
+presentation self-hosting. `preloadRenderer` and lazy renderer entries remain deferred:
+`SlotDeclaration` has no load contract yet, so adding preload behavior now would invent an ABI that
+adapter declarations cannot honor.
+
+The nine element-bounded presentation facades resolve external scopes/providers first and then pass
+a frozen, facade-local Core declaration to `unstable_useSlot`. This keeps the application provider
+and package root setup-only: neither imports the private all-family `coreSlots.ts` ABI-proof table.
+Zero-configuration local Core resolution is silent, an active partial adapter reports fallback once
+after mount, and `rendererFallback='throw'` rejects every Core fallback.
 
 The initial slot table contains only components with real standalone public contracts:
 
@@ -19,3 +25,8 @@ The initial slot table contains only components with real standalone public cont
 
 The basic controls are standalone Common primitives. Arc-bound `CommandForm` fields remain
 high-order composites and must never be registered as substitutes for these slots.
+
+E1 routes only the nine presentation candidates. Tooltip, dropdown, dialog, date picker, and table
+paginator remain atomic E2 work; `coreSlots.ts` names their current public components only to prove
+the complete 14-slot ABI and must not become provider or public-barrel runtime input until E2
+extracts recursion-safe implementations.
diff --git a/Source/renderer/RendererContext.tsx b/Source/renderer/RendererContext.tsx
index 65ef9d1d..8b30379a 100644
--- a/Source/renderer/RendererContext.tsx
+++ b/Source/renderer/RendererContext.tsx
@@ -192,19 +192,28 @@ const fallbackDiagnostic = (
 });
 
 /**
- * Resolves one slot through scopes, the application provider, and the Core fallback table.
+ * Resolves one slot through scopes/provider, a facade-local Core declaration, then Core context.
  *
  * @unstable Internal component-routing contract for Slice E. Expect changes until renderer
  * conformance gates promote it.
  */
-export const unstable_useSlot = <K extends unstable_SlotId>(
+export function unstable_useSlot<K extends unstable_SlotId>(
     slotId: K,
-): unstable_SlotDeclaration<K> | undefined => {
+    localCoreDeclaration: unstable_SlotDeclaration<K>,
+): unstable_SlotDeclaration<K>;
+export function unstable_useSlot<K extends unstable_SlotId>(
+    slotId: K,
+): unstable_SlotDeclaration<K> | undefined;
+export function unstable_useSlot<K extends unstable_SlotId>(
+    slotId: K,
+    localCoreDeclaration?: unstable_SlotDeclaration<K>,
+): unstable_SlotDeclaration<K> | undefined {
     const context = useContext(unstable_RendererContext);
     const localReportedDiagnostics = useRef(new Set<string>());
     const result = unstable_resolveSlot(
         slotId,
         context?.slots ?? unstable_emptyCoreRendererSlots,
+        localCoreDeclaration,
         context?.coreSlots ?? unstable_emptyCoreRendererSlots,
     );
 
@@ -226,14 +235,17 @@ export const unstable_useSlot = <K extends unstable_SlotId>(
         }
     }, [context, diagnostic]);
 
-    if (!result.declaration && (context?.rendererFallback ?? 'core') === 'throw') {
+    if (
+        result.usedCoreFallback &&
+        (context?.rendererFallback ?? 'core') === 'throw'
+    ) {
         throw new unstable_AdapterError(
             diagnostic ?? fallbackDiagnostic(context, slotId),
         );
     }
 
     return result.declaration;
-};
+}
 
 /** Returns whether any active renderer layer advertises a Core-owned capability. */
 export const unstable_useCapability = (capability: unstable_CapabilityId): boolean => {
diff --git a/Source/renderer/coreSlots.ts b/Source/renderer/coreSlots.ts
new file mode 100644
index 00000000..21b3b8fe
--- /dev/null
+++ b/Source/renderer/coreSlots.ts
@@ -0,0 +1,55 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { ComponentType } from 'react';
+import { ButtonImplementation } from '../Common/ButtonImplementation';
+import { CheckboxImplementation } from '../Common/CheckboxImplementation';
+import { DatePickerInput } from '../Common/DatePickerInput';
+import { IconButtonImplementation } from '../Common/IconButtonImplementation';
+import { RadioImplementation } from '../Common/RadioImplementation';
+import { SurfaceImplementation } from '../Common/SurfaceImplementation';
+import { SwitchImplementation } from '../Common/SwitchImplementation';
+import { TextAreaImplementation } from '../Common/TextAreaImplementation';
+import { TextInputImplementation } from '../Common/TextInputImplementation';
+import { Tooltip } from '../Common/Tooltip';
+import { TablePaginator } from '../DataTables/TablePaginator';
+import { ProgressBarImplementation } from '../Display/ProgressBarImplementation';
+import { Dialog } from '../Dialogs/Dialog';
+import { Dropdown } from '../Dropdown/Dropdown';
+import type {
+    unstable_BehaviorMode,
+    unstable_SlotMap,
+} from './slots';
+
+const nativeDeclaration = <Props>(
+    mode: unstable_BehaviorMode,
+    render: ComponentType<Props>,
+) => Object.freeze({ mode, fidelity: 'native' as const, render });
+
+/**
+ * Complete Core slot inventory for renderer ABI proof and conformance tests only.
+ *
+ * Facades own their local presentation declarations, so neither the setup-only provider nor the
+ * public renderer barrel may import this table. The five atomic public components below require
+ * implementation extraction and facade routing in E2 before this table can become runtime input.
+ */
+export const unstable_coreSlots = Object.freeze({
+    'common.button': nativeDeclaration('presentation', ButtonImplementation),
+    'common.iconButton': nativeDeclaration(
+        'presentation',
+        IconButtonImplementation,
+    ),
+    'common.textInput': nativeDeclaration('presentation', TextInputImplementation),
+    'common.textArea': nativeDeclaration('presentation', TextAreaImplementation),
+    'common.checkbox': nativeDeclaration('presentation', CheckboxImplementation),
+    'common.radio': nativeDeclaration('presentation', RadioImplementation),
+    'common.switch': nativeDeclaration('presentation', SwitchImplementation),
+    'common.progress': nativeDeclaration('presentation', ProgressBarImplementation),
+    'common.surface': nativeDeclaration('presentation', SurfaceImplementation),
+    // E2: replace these public atomic components with non-facade implementations before wiring.
+    'common.tooltip': nativeDeclaration('atomic', Tooltip),
+    'dropdown.select': nativeDeclaration('atomic', Dropdown),
+    'dialogs.dialog': nativeDeclaration('atomic', Dialog),
+    'display.datePicker': nativeDeclaration('atomic', DatePickerInput),
+    'datatables.paginator': nativeDeclaration('atomic', TablePaginator),
+}) satisfies unstable_SlotMap;
diff --git a/Source/renderer/for_resolution/when_resolving_slots.tsx b/Source/renderer/for_resolution/when_resolving_slots.tsx
index 047419fb..4948fa6d 100644
--- a/Source/renderer/for_resolution/when_resolving_slots.tsx
+++ b/Source/renderer/for_resolution/when_resolving_slots.tsx
@@ -6,12 +6,15 @@ import { renderToStaticMarkup } from 'react-dom/server';
 import sinon from 'sinon';
 import { describe, it } from 'vitest';
 import { CratisComponentsProvider } from '../../Common/CratisComponentsProvider';
+import { unstable_RendererRoot } from '../RendererContext';
 import {
     unstable_AdapterError,
     unstable_adapterErrorCodes,
     unstable_RendererScope as RendererScope,
     unstable_useSlot,
+    type unstable_SlotDeclaration,
     type unstable_SlotId,
+    type unstable_SlotMap,
 } from '..';
 import {
     buttonSlot,
@@ -23,6 +26,8 @@ import {
     tooltipSlot,
 } from './testLibrary';
 
+const RendererRoot = unstable_RendererRoot;
+
 const ResolutionProbe = () => {
     const button = unstable_useSlot('common.button')?.render;
     const tooltip = unstable_useSlot('common.tooltip')?.render;
@@ -43,6 +48,17 @@ const combinedSlots = (button: typeof FirstButton, tooltip: typeof FirstTooltip)
     ...tooltipSlot(tooltip),
 });
 
+const localButtonDeclaration = Object.freeze({
+    mode: 'presentation',
+    fidelity: 'native',
+    render: FirstButton,
+}) satisfies unstable_SlotDeclaration<'common.button'>;
+
+const LocalCoreProbe = () => {
+    const Render = unstable_useSlot('common.button', localButtonDeclaration).render;
+    return <Render />;
+};
+
 describe('when resolving renderer slots', () => {
     it('should compose provider arrays with last-library-wins slots', () => {
         const first = createTestLibrary('first', buttonSlot(FirstButton));
@@ -57,6 +73,31 @@ describe('when resolving renderer slots', () => {
         expect(html).to.contain('data-button="last"');
     });
 
+    it('should resolve external slots before facade-local and context Core declarations', () => {
+        const external = createTestLibrary('external', buttonSlot(LastButton));
+        const coreSlots = buttonSlot(LastButton);
+
+        const html = renderToStaticMarkup(
+            <RendererRoot library={external} coreSlots={coreSlots}>
+                <LocalCoreProbe />
+            </RendererRoot>,
+        );
+
+        expect(html).to.equal('<span>last-button</span>');
+    });
+
+    it('should resolve a facade-local Core declaration before the optional context table', () => {
+        const coreSlots = buttonSlot(LastButton) as unstable_SlotMap;
+
+        const html = renderToStaticMarkup(
+            <RendererRoot coreSlots={coreSlots}>
+                <LocalCoreProbe />
+            </RendererRoot>,
+        );
+
+        expect(html).to.equal('<span>first-button</span>');
+    });
+
     it('should use the nearest scope only for its allowed slots', () => {
         const outer = createTestLibrary(
             'outer',
diff --git a/Source/renderer/for_self_hosting/when_defining_core_slots.ts b/Source/renderer/for_self_hosting/when_defining_core_slots.ts
new file mode 100644
index 00000000..1b7d5d6a
--- /dev/null
+++ b/Source/renderer/for_self_hosting/when_defining_core_slots.ts
@@ -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 { expect } from 'chai';
+import { describe, it } from 'vitest';
+import { unstable_coreSlots } from '../coreSlots';
+
+const presentationSlots = [
+    'common.button',
+    'common.iconButton',
+    'common.textInput',
+    'common.textArea',
+    'common.checkbox',
+    'common.radio',
+    'common.switch',
+    'common.progress',
+    'common.surface',
+] as const;
+
+const atomicSlots = [
+    'common.tooltip',
+    'dropdown.select',
+    'dialogs.dialog',
+    'display.datePicker',
+    'datatables.paginator',
+] as const;
+
+describe('when defining the private Core slot inventory', () => {
+    it('should express every current built-in declaration for ABI proof', () => {
+        expect(Object.keys(unstable_coreSlots).sort()).to.deep.equal(
+            [...presentationSlots, ...atomicSlots].sort(),
+        );
+    });
+
+    it('should freeze the table and every declaration', () => {
+        expect(Object.isFrozen(unstable_coreSlots)).to.equal(true);
+        for (const declaration of Object.values(unstable_coreSlots)) {
+            expect(Object.isFrozen(declaration)).to.equal(true);
+            expect(declaration?.fidelity).to.equal('native');
+        }
+    });
+
+    it('should distinguish E1 presentation ownership from deferred E2 atomic ownership', () => {
+        for (const slotId of presentationSlots) {
+            expect(unstable_coreSlots[slotId]?.mode).to.equal('presentation');
+        }
+        for (const slotId of atomicSlots) {
+            expect(unstable_coreSlots[slotId]?.mode).to.equal('atomic');
+        }
+    });
+});
diff --git a/Source/renderer/for_self_hosting/when_routing_presentation_slots.tsx b/Source/renderer/for_self_hosting/when_routing_presentation_slots.tsx
new file mode 100644
index 00000000..ec58db0e
--- /dev/null
+++ b/Source/renderer/for_self_hosting/when_routing_presentation_slots.tsx
@@ -0,0 +1,250 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { expect } from 'chai';
+import {
+    createRef,
+    forwardRef,
+    type ComponentType,
+    type InputHTMLAttributes,
+} from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import sinon from 'sinon';
+import { describe, it } from 'vitest';
+import { Button, type ButtonProps } from '../../Common/Button';
+import { Checkbox, type CheckboxProps } from '../../Common/Checkbox';
+import { CratisComponentsProvider } from '../../Common/CratisComponentsProvider';
+import { IconButton, type IconButtonProps } from '../../Common/IconButton';
+import { Radio, type RadioProps } from '../../Common/Radio';
+import { Surface, type SurfaceProps } from '../../Common/Surface';
+import { Switch, type SwitchProps } from '../../Common/Switch';
+import { TextArea, type TextAreaProps } from '../../Common/TextArea';
+import { TextInput, type TextInputProps } from '../../Common/TextInput';
+import {
+    mountPrimitive,
+    unmountPrimitive,
+} from '../../Common/for_Primitives/given/a_primitive_dom';
+import { ProgressBar, type ProgressBarProps } from '../../Display/ProgressBar';
+import {
+    unstable_AdapterError,
+    unstable_adapterErrorCodes,
+    type unstable_SlotMap,
+} from '..';
+import { buttonSlot, createTestLibrary } from '../for_resolution/testLibrary';
+
+const allPresentationControls = (
+    <>
+        <Button label='Save' />
+        <IconButton icon={<span>+</span>} aria-label='Add item' />
+        <TextInput defaultValue='Sample' />
+        <TextArea defaultValue='Sample' />
+        <Checkbox label='Choice' />
+        <Radio name='sample' value='one' label='Choice' />
+        <Switch label='Choice' />
+        <ProgressBar value={42} />
+        <Surface>Content</Surface>
+    </>
+);
+
+const presentationDeclaration = <Props extends object>(
+    render: ComponentType<Props>,
+) => ({ mode: 'presentation' as const, fidelity: 'native' as const, render });
+
+const countingAdapter = <Props extends object>(
+    slotId: string,
+    counts: Record<string, number>,
+): ComponentType<Props> =>
+    function CountingAdapter() {
+        counts[slotId] = (counts[slotId] ?? 0) + 1;
+        return <div data-adapter-slot={slotId} />;
+    };
+
+describe('when routing presentation slots', () => {
+    it('should route each of the nine presentation facades exactly once without Core output', () => {
+        const counts: Record<string, number> = {};
+        const slots: unstable_SlotMap = {
+            'common.button': presentationDeclaration(
+                countingAdapter<ButtonProps>('common.button', counts),
+            ),
+            'common.iconButton': presentationDeclaration(
+                countingAdapter<IconButtonProps>('common.iconButton', counts),
+            ),
+            'common.textInput': presentationDeclaration(
+                countingAdapter<TextInputProps>('common.textInput', counts),
+            ),
+            'common.textArea': presentationDeclaration(
+                countingAdapter<TextAreaProps>('common.textArea', counts),
+            ),
+            'common.checkbox': presentationDeclaration(
+                countingAdapter<CheckboxProps>('common.checkbox', counts),
+            ),
+            'common.radio': presentationDeclaration(
+                countingAdapter<RadioProps>('common.radio', counts),
+            ),
+            'common.switch': presentationDeclaration(
+                countingAdapter<SwitchProps>('common.switch', counts),
+            ),
+            'common.progress': presentationDeclaration(
+                countingAdapter<ProgressBarProps>('common.progress', counts),
+            ),
+            'common.surface': presentationDeclaration(
+                countingAdapter<SurfaceProps>('common.surface', counts),
+            ),
+        };
+        const library = createTestLibrary('all-presentation-slots', slots);
+
+        const html = renderToStaticMarkup(
+            <CratisComponentsProvider library={library}>
+                {allPresentationControls}
+            </CratisComponentsProvider>,
+        );
+        const container = document.createElement('div');
+        container.innerHTML = html;
+
+        expect(container.querySelectorAll('[data-adapter-slot]')).to.have.lengthOf(9);
+        expect(container.querySelectorAll('[data-cratis-part]')).to.have.lengthOf(0);
+        expect(Object.keys(counts)).to.have.lengthOf(9);
+        expect(Object.values(counts)).to.deep.equal(Array(9).fill(1));
+    });
+
+    it('should render the external adapter exactly once, skip Core, and bridge its real ref', async () => {
+        let adapterRenderCount = 0;
+        const AdapterButton = forwardRef<HTMLButtonElement, ButtonProps>(
+            function AdapterButton({ label }, ref) {
+                adapterRenderCount++;
+                return (
+                    <button ref={ref} data-adapter-button='true'>
+                        {label}
+                    </button>
+                );
+            },
+        );
+        const library = createTestLibrary('external-button', buttonSlot(AdapterButton));
+        const ref = createRef<HTMLButtonElement>();
+        const mounted = await mountPrimitive(
+            <CratisComponentsProvider library={library}>
+                <Button ref={ref} label='Adapter action' />
+            </CratisComponentsProvider>,
+        );
+
+        try {
+            const adapterButton = mounted.container.querySelector(
+                'button[data-adapter-button="true"]',
+            );
+            expect(adapterRenderCount).to.equal(1);
+            expect(mounted.container.querySelectorAll('.cratis-button')).to.have
+                .lengthOf(0);
+            expect(adapterButton).to.equal(ref.current);
+            expect(ref.current).to.be.instanceOf(HTMLButtonElement);
+        } finally {
+            await unmountPrimitive(mounted);
+        }
+    });
+
+    it('should use a local Core implementation once and report one partial-adapter fallback', async () => {
+        let adapterRenderCount = 0;
+        let coreClassNameReads = 0;
+        const AdapterButton = forwardRef<HTMLButtonElement, ButtonProps>(
+            function AdapterButton({ label }, ref) {
+                adapterRenderCount++;
+                return <button ref={ref}>{label}</button>;
+            },
+        );
+        const library = createTestLibrary('partial-adapter', buttonSlot(AdapterButton));
+        const rootPart: InputHTMLAttributes<HTMLInputElement> = {};
+        Object.defineProperty(rootPart, 'className', {
+            configurable: true,
+            get: () => {
+                coreClassNameReads++;
+                return undefined;
+            },
+        });
+        const consoleError = sinon.stub(console, 'error');
+        const mounted = await mountPrimitive(
+            <CratisComponentsProvider library={library}>
+                <Button label='External' />
+                <TextInput pt={{ root: rootPart }} defaultValue='Core' />
+            </CratisComponentsProvider>,
+        );
+
+        try {
+            expect(adapterRenderCount).to.equal(1);
+            expect(coreClassNameReads).to.equal(1);
+            expect(mounted.container.querySelectorAll('.cratis-text-input')).to.have
+                .lengthOf(1);
+            expect(consoleError.callCount).to.equal(1);
+            expect(String(consoleError.firstCall.firstArg)).to.contain(
+                unstable_adapterErrorCodes.strictProfileFallback,
+            );
+            expect(String(consoleError.firstCall.firstArg)).to.contain(
+                'common.textInput',
+            );
+        } finally {
+            await unmountPrimitive(mounted);
+            consoleError.restore();
+        }
+    });
+
+    it('should keep the zero-configuration local Core path silent after mount', async () => {
+        const consoleError = sinon.stub(console, 'error');
+        const mounted = await mountPrimitive(
+            <CratisComponentsProvider>{allPresentationControls}</CratisComponentsProvider>,
+        );
+
+        try {
+            expect(consoleError.callCount).to.equal(0);
+        } finally {
+            await unmountPrimitive(mounted);
+            consoleError.restore();
+        }
+    });
+
+    it('should reject every local Core fallback at a throw terminal', () => {
+        let error: unknown;
+
+        try {
+            renderToStaticMarkup(
+                <CratisComponentsProvider rendererFallback='throw'>
+                    <Button label='Rejected fallback' />
+                </CratisComponentsProvider>,
+            );
+        } catch (caught: unknown) {
+            error = caught;
+        }
+
+        expect(error).to.be.instanceOf(unstable_AdapterError);
+        expect((error as unstable_AdapterError).code).to.equal(
+            unstable_adapterErrorCodes.strictProfileFallback,
+        );
+        expect((error as unstable_AdapterError).diagnostic.slotId).to.equal(
+            'common.button',
+        );
+    });
+
+    it('should never recurse through an external Button from Core IconButtonImplementation', () => {
+        let externalButtonRenderCount = 0;
+        const AdapterButton = forwardRef<HTMLButtonElement, ButtonProps>(
+            function AdapterButton(_props, ref) {
+                externalButtonRenderCount++;
+                return <button ref={ref}>External button</button>;
+            },
+        );
+        const library = createTestLibrary(
+            'button-with-core-icon-button',
+            buttonSlot(AdapterButton),
+            { profileSlots: ['common.button'] },
+        );
+
+        const html = renderToStaticMarkup(
+            <CratisComponentsProvider library={library}>
+                <IconButton icon={<span>+</span>} aria-label='Core icon action' />
+            </CratisComponentsProvider>,
+        );
+
+        expect(externalButtonRenderCount).to.equal(0);
+        expect(html).to.contain('class="cratis-button"');
+        expect(html.match(/<button/g)).to.have.lengthOf(1);
+    });
+});
diff --git a/Source/renderer/index.ts b/Source/renderer/index.ts
index 4701270c..64fcf60b 100644
--- a/Source/renderer/index.ts
+++ b/Source/renderer/index.ts
@@ -52,8 +52,8 @@ declare module './slots.js' {
 
 /**
  * Experimental renderer contracts for adapter authors. Every public symbol is intentionally
- * `unstable_`-prefixed and isolated to `@cratis/components/renderer`. Component routing, built-in
- * manifests, and lazy/preload entries remain deferred.
+ * `unstable_`-prefixed and isolated to `@cratis/components/renderer`. E1 presentation routing is
+ * facade-local; atomic routing and lazy/preload entries remain deferred.
  */
 export type { unstable_CapabilityId } from './capabilities';
 export {
diff --git a/Source/renderer/renderSlot.ts b/Source/renderer/renderSlot.ts
new file mode 100644
index 00000000..5769a443
--- /dev/null
+++ b/Source/renderer/renderSlot.ts
@@ -0,0 +1,40 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import {
+    createElement,
+    type ComponentType,
+    type ForwardedRef,
+    type ReactElement,
+    type RefAttributes,
+} from 'react';
+
+interface RenderDeclaration<Props> {
+    readonly render: ComponentType<Props>;
+}
+
+export function renderSlot<Props extends object>(
+    declaration: RenderDeclaration<Props>,
+    props: Props,
+): ReactElement;
+export function renderSlot<Props extends object, Element>(
+    declaration: RenderDeclaration<Props>,
+    props: Props,
+    ref: ForwardedRef<Element>,
+): ReactElement;
+export function renderSlot<Props extends object, Element>(
+    declaration: RenderDeclaration<Props>,
+    props: Props,
+    ref?: ForwardedRef<Element>,
+): ReactElement {
+    if (arguments.length < 3) return createElement(declaration.render, props);
+
+    // SAFETY: Slot declarations intentionally expose exact public props without widening every
+    // adapter with Core ref types. Facades alone bridge their already-public forwarded ref to the
+    // selected implementation, and conformance tests prove that it lands on the real native root.
+    const RefCapableSlot = declaration.render as ComponentType<
+        Props & RefAttributes<Element>
+    >;
+    const slotProps = { ...props, ref } as Props & RefAttributes<Element>;
+    return createElement(RefCapableSlot, slotProps);
+}
diff --git a/Source/renderer/resolve.ts b/Source/renderer/resolve.ts
index 8e98dc4e..8200ffb2 100644
--- a/Source/renderer/resolve.ts
+++ b/Source/renderer/resolve.ts
@@ -189,17 +189,20 @@ export const unstable_createResolvedSlotTable = (
     return Object.freeze(resolved) as unstable_SlotMap;
 };
 
-/** Resolves a slot by lookup and then consults the injected Core fallback table. */
+/** Resolves a slot through external layers, a facade-local Core declaration, then Core context. */
 export const unstable_resolveSlot = <K extends unstable_SlotId>(
     slotId: K,
     slots: unstable_SlotMap,
+    localCoreDeclaration: unstable_SlotDeclaration<K> | undefined,
     coreSlots: unstable_SlotMap,
 ): { declaration?: unstable_SlotDeclaration<K>; usedCoreFallback: boolean } => {
     const declaration = slots[slotId] as unstable_SlotDeclaration<K> | undefined;
     if (declaration) return { declaration, usedCoreFallback: false };
 
     return {
-        declaration: coreSlots[slotId] as unstable_SlotDeclaration<K> | undefined,
+        declaration:
+            localCoreDeclaration ??
+            (coreSlots[slotId] as unstable_SlotDeclaration<K> | undefined),
         usedCoreFallback: true,
     };
 };
diff --git a/Source/scripts/verify-package-graph.mjs b/Source/scripts/verify-package-graph.mjs
index 045afdff..d669fe72 100644
--- a/Source/scripts/verify-package-graph.mjs
+++ b/Source/scripts/verify-package-graph.mjs
@@ -28,6 +28,9 @@
  *      beyond the React framework peer and reaches no component implementation directory. Its declaration closure may
  *      reach Components-owned prop declarations and React types, but no renderer vendor.
  *      The check is explicitly deferred until that export exists.
+ *   5. The setup-only root, `./Common`, and public `./renderer` closures never reach the
+ *      private all-family `renderer/coreSlots` ABI-proof table. Root and `./Common` also stay
+ *      outside the table's DataTables, Dialogs, Display, and Dropdown family directories.
  *
  * `./Canvas` and `./PivotViewer` are additionally asserted to actually reach
  * `pixi.js` - a subpath that stopped needing Pixi should have its optional peer
@@ -230,6 +233,51 @@ const componentImplementationDirectories = [
         }),
     ),
 ].sort();
+const coreSlotIsolationSubpaths = new Set(['.', './Common', './renderer']);
+const leanCoreSlotSubpaths = new Set(['.', './Common']);
+const coreSlotCrossFamilyDirectories = [
+    'DataTables/',
+    'Dialogs/',
+    'Display/',
+    'Dropdown/',
+];
+const reachesCoreSlots = (closure) =>
+    closure.files.filter((file) => /^renderer\/coreSlots\.(?:js|d\.ts)$/u.test(file));
+for (const row of subpathReports.filter(({ subpath }) =>
+    coreSlotIsolationSubpaths.has(subpath),
+)) {
+    for (const [kind, closure] of [
+        ['runtime', row.runtime],
+        ['declaration', row.declarations],
+    ]) {
+        const coreSlotFiles = reachesCoreSlots(closure);
+        if (coreSlotFiles.length > 0) {
+            violations.push(
+                `${row.subpath}: ${kind} closure reaches private all-family Core slot table: ` +
+                    coreSlotFiles.join(', '),
+            );
+        }
+    }
+    if (leanCoreSlotSubpaths.has(row.subpath)) {
+        for (const [kind, closure] of [
+            ['runtime', row.runtime],
+            ['declaration', row.declarations],
+        ]) {
+            const familyFiles = closure.files.filter((file) =>
+                coreSlotCrossFamilyDirectories.some((directory) =>
+                    file.startsWith(directory),
+                ),
+            );
+            if (familyFiles.length > 0) {
+                violations.push(
+                    `${row.subpath}: ${kind} closure reaches private Core-slot families: ` +
+                        familyFiles.join(', '),
+                );
+            }
+        }
+    }
+}
+
 const rendererSubpath = subpathReports.find((row) => row.subpath === './renderer');
 const rendererBoundary = rendererBoundaryReport(
     rendererSubpath,
@@ -266,6 +314,9 @@ if (reportPath) {
                 directPixiImportersOutsideSpatialSubpaths: directPixiImporters,
                 rendererVendorImporters,
                 rendererBoundary,
+                coreSlotIsolationSubpaths: [...coreSlotIsolationSubpaths],
+                leanCoreSlotSubpaths: [...leanCoreSlotSubpaths],
+                coreSlotCrossFamilyDirectories,
                 violations,
             },
             null,
@@ -293,6 +344,6 @@ if (rendererBoundary.status === 'deferred') {
 } else {
     console.log(
         `Renderer boundary check passed: runtime has no non-React external or component-implementation edges, ` +
-            `and declarations have no renderer-vendor type edges.`,
+            `declarations have no renderer-vendor type edges, and the private Core slot table stays excluded.`,
     );
 }

From d5a4af51f824b9e85f73998710d3ac8bcf31410b Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 20:45:56 +0200
Subject: [PATCH 187/267] Keep slot routing internal

---
 .../for_resolution/when_reporting_fallback_diagnostics.tsx     | 3 ++-
 Source/renderer/for_resolution/when_resolving_slots.tsx        | 3 +--
 Source/renderer/index.ts                                       | 1 -
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/Source/renderer/for_resolution/when_reporting_fallback_diagnostics.tsx b/Source/renderer/for_resolution/when_reporting_fallback_diagnostics.tsx
index 9992a2ad..1a154d29 100644
--- a/Source/renderer/for_resolution/when_reporting_fallback_diagnostics.tsx
+++ b/Source/renderer/for_resolution/when_reporting_fallback_diagnostics.tsx
@@ -9,7 +9,8 @@ import { createRoot, type Root } from 'react-dom/client';
 import sinon, { type SinonStub } from 'sinon';
 import { afterEach, beforeEach, describe, it } from 'vitest';
 import { CratisComponentsProvider } from '../../Common/CratisComponentsProvider';
-import { unstable_adapterErrorCodes, unstable_useSlot } from '..';
+import { unstable_adapterErrorCodes } from '..';
+import { unstable_useSlot } from '../RendererContext';
 import { buttonSlot, createTestLibrary, FirstButton } from './testLibrary';
 
 const DuplicateFallbackProbe = () => {
diff --git a/Source/renderer/for_resolution/when_resolving_slots.tsx b/Source/renderer/for_resolution/when_resolving_slots.tsx
index 4948fa6d..7e84c7b2 100644
--- a/Source/renderer/for_resolution/when_resolving_slots.tsx
+++ b/Source/renderer/for_resolution/when_resolving_slots.tsx
@@ -6,12 +6,11 @@ import { renderToStaticMarkup } from 'react-dom/server';
 import sinon from 'sinon';
 import { describe, it } from 'vitest';
 import { CratisComponentsProvider } from '../../Common/CratisComponentsProvider';
-import { unstable_RendererRoot } from '../RendererContext';
+import { unstable_RendererRoot, unstable_useSlot } from '../RendererContext';
 import {
     unstable_AdapterError,
     unstable_adapterErrorCodes,
     unstable_RendererScope as RendererScope,
-    unstable_useSlot,
     type unstable_SlotDeclaration,
     type unstable_SlotId,
     type unstable_SlotMap,
diff --git a/Source/renderer/index.ts b/Source/renderer/index.ts
index 64fcf60b..b5abb153 100644
--- a/Source/renderer/index.ts
+++ b/Source/renderer/index.ts
@@ -78,7 +78,6 @@ export {
     unstable_useCapability,
     unstable_useOverlayEnvironment,
     unstable_useRendererId,
-    unstable_useSlot,
 } from './RendererContext';
 export {
     unstable_RendererScope,

From ce6695576e3ddf96a04eb0ecb6cb5dc5cd2a8fff Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 21:05:18 +0200
Subject: [PATCH 188/267] Add React-free kernel lint boundary

---
 ESLint/README.md                      |   7 ++
 ESLint/index.js                       |   4 +-
 ESLint/lib/kernelBoundary.js          | 139 ++++++++++++++++++++++++++
 ESLint/lib/noReactInKernel.js         | 116 +++++++++++++++++++++
 ESLint/package.json                   |   2 +-
 ESLint/test/rules.test.js             | 112 +++++++++++++++++++++
 ESLint/test/verify-packed-package.mjs |  23 +++++
 eslint.config.mjs                     |  14 +++
 8 files changed, 415 insertions(+), 2 deletions(-)
 create mode 100644 ESLint/lib/kernelBoundary.js
 create mode 100644 ESLint/lib/noReactInKernel.js

diff --git a/ESLint/README.md b/ESLint/README.md
index 7e7cd16d..b0595549 100644
--- a/ESLint/README.md
+++ b/ESLint/README.md
@@ -10,6 +10,7 @@ Cratis base config, [`@cratis/eslint-config`](https://www.npmjs.com/package/@cra
 | `onbeforeexecute-must-return` | Requires an `onBeforeExecute` callback to return the command values. The runtime guards a missing return by keeping the current object and warning, but a replacement value is discarded and the callback violates the transformer contract.                                                                                                                         |
 | `no-hooks-in-view-model`      | Disallows React hooks (including generated Arc proxies' `.use()`) inside a view model class. View models must be plain, hook-free classes that receive injected abstractions.                                                                                                                                                                                        |
 | `no-raw-command-form-marker`  | Disallows identifying a CommandForm field or column by a hand-written `displayName` string, in either direction. Use `markAsCommandFormField`/`markAsCommandFormColumn` and `isCommandFormField`/`isCommandFormColumn` from `@cratis/components/CommandForm` — they go through a marker a build transform cannot rewrite.                                            |
+| `no-react-in-kernel`          | Repository architecture rule that rejects React, React DOM, React Aria Components, and browser DOM globals in the explicit Components kernel inventory. It is intentionally not part of the consumer `recommended` config.                                                                                                                                        |
 
 Both import rules cover static `import` and re-`export … from` forms. The root-barrel rule also reports TypeScript `import = require(...)`, dynamic `import(...)`, and CommonJS `require(...)` of the package root; ambiguous forms are never autofixed.
 
@@ -51,6 +52,12 @@ export default [
 
 `onbeforeexecute-must-return`, `no-hooks-in-view-model` and `no-raw-command-form-marker` take no options.
 
+`no-react-in-kernel` is a repository-owned architecture guard and is not enabled by the consumer preset. Components configures it with the canonical inventory in `lib/kernelBoundary.js`; an explicit `kernelPaths` array may be supplied when testing or applying the rule to another owned tree.
+
+## Repository kernel boundary
+
+`no-react-in-kernel` applies only when the linted filename is one of the explicitly declared `kernelPaths`. It reports static imports and re-exports, TypeScript import assignments, dynamic imports, CommonJS `require(...)`, package subpaths, and browser DOM global references. Near-miss package names and files outside the inventory are left alone. The repository decision and exact included/excluded modules are documented in `Documentation/decisions/0003-kernel-boundary.md`.
+
 ## Considered and rejected: a hardcoded-owned-label rule
 
 During the issue #174 localization pass, a static rule flagging a hardcoded English literal that
diff --git a/ESLint/index.js b/ESLint/index.js
index 20a777db..08d1b99c 100644
--- a/ESLint/index.js
+++ b/ESLint/index.js
@@ -4,6 +4,7 @@ import { noRootBarrelImport } from './lib/noRootBarrelImport.js';
 import { onbeforeexecuteMustReturn } from './lib/onbeforeexecuteMustReturn.js';
 import { noHooksInViewModel } from './lib/noHooksInViewModel.js';
 import { noRawCommandFormMarker } from './lib/noRawCommandFormMarker.js';
+import { noReactInKernel } from './lib/noReactInKernel.js';
 
 const { version } = createRequire(import.meta.url)('./package.json');
 
@@ -19,6 +20,7 @@ const plugin = {
         'onbeforeexecute-must-return': onbeforeexecuteMustReturn,
         'no-hooks-in-view-model': noHooksInViewModel,
         'no-raw-command-form-marker': noRawCommandFormMarker,
+        'no-react-in-kernel': noReactInKernel,
     },
     configs: {},
 };
@@ -47,4 +49,4 @@ Object.assign(plugin.configs, {
 
 export default plugin;
 export const { configs, rules, meta } = plugin;
-export { noPrimereactDialog, noRootBarrelImport, onbeforeexecuteMustReturn, noHooksInViewModel, noRawCommandFormMarker };
+export { noPrimereactDialog, noRootBarrelImport, onbeforeexecuteMustReturn, noHooksInViewModel, noRawCommandFormMarker, noReactInKernel };
diff --git a/ESLint/lib/kernelBoundary.js b/ESLint/lib/kernelBoundary.js
new file mode 100644
index 00000000..720d9884
--- /dev/null
+++ b/ESLint/lib/kernelBoundary.js
@@ -0,0 +1,139 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import path from 'node:path';
+
+/**
+ * Repository-owned source modules whose contracts are deliberately independent of React and the browser DOM.
+ *
+ * This is the canonical kernel inventory. The root ESLint config, the no-react-in-kernel rule, and the
+ * emitted package-graph gate all consume this exact list.
+ */
+export const kernelSourcePaths = Object.freeze([
+    'Source/PivotViewer/constants.ts',
+    'Source/PivotViewer/engine/layout.ts',
+    'Source/PivotViewer/engine/requestCorrelator.ts',
+    'Source/PivotViewer/engine/store.ts',
+    'Source/PivotViewer/engine/types.ts',
+    'Source/Canvas/canvasGesture.ts',
+    'Source/Canvas/canvasTransformActivity.ts',
+    'Source/Canvas/panMomentum.ts',
+    'Source/Canvas/pinchGesture.ts',
+    'Source/Canvas/shapes/Region/regionContainment.ts',
+    'Source/Filter/types.ts',
+    'Source/Filter/utils.ts',
+    'Source/DataTables/DataTableFilterMatcherRegistry.ts',
+    'Source/DataTables/DataTableFilterMeta.ts',
+    'Source/DataTables/paginatorRange.ts',
+    'Source/DataTables/selectionKeys.ts',
+    'Source/CommandDialog/applyBeforeExecute.ts',
+    'Source/CommandForm/commandFormMarkers.ts',
+    'Source/CommandForm/fields/chipValues.ts',
+    'Source/CommandForm/fields/fieldValueFromEvent.ts',
+    'Source/SchemaEditor/schemaHelpers.ts',
+    'Source/Chat/isTopicUnnamed.ts',
+    'Source/Chat/shouldRequestTopicName.ts',
+    'Source/Chat/topicsByActivity.ts',
+    'Source/Chat/Kit/findOwnReaction.ts',
+    'Source/Chat/Kit/reactionsExcludingUser.ts',
+    'Source/Chat/Kit/Mentions/MentionCandidate.ts',
+    'Source/Chat/Kit/Mentions/MentionQuery.ts',
+    'Source/Chat/Kit/Mentions/activeMentionQuery.ts',
+    'Source/Chat/Kit/Mentions/applyMention.ts',
+    'Source/Chat/Kit/Mentions/extractMentions.ts',
+    'Source/Chat/Kit/Mentions/findMentionRanges.ts',
+    'Source/Chat/Kit/Mentions/matchCandidates.ts',
+    'Source/Chat/Kit/Mentions/mentionSegments.ts',
+]);
+
+/** React package roots forbidden from kernel source and emitted closures. */
+const reactKernelPackages = Object.freeze([
+    'react',
+    'react-dom',
+    'react-aria-components',
+]);
+
+/** Browser DOM globals forbidden from kernel source and emitted runtime closures. */
+export const browserDomGlobals = Object.freeze([
+    'CSSStyleDeclaration',
+    'ClipboardEvent',
+    'CustomEvent',
+    'DOMRect',
+    'Document',
+    'DragEvent',
+    'Element',
+    'Event',
+    'EventTarget',
+    'FocusEvent',
+    'HTMLButtonElement',
+    'HTMLCanvasElement',
+    'HTMLDivElement',
+    'HTMLElement',
+    'HTMLFormElement',
+    'HTMLInputElement',
+    'HTMLTextAreaElement',
+    'InputEvent',
+    'IntersectionObserver',
+    'KeyboardEvent',
+    'MessageEvent',
+    'MouseEvent',
+    'MutationObserver',
+    'Node',
+    'PointerEvent',
+    'ResizeObserver',
+    'TouchEvent',
+    'WheelEvent',
+    'Window',
+    'Worker',
+    'cancelAnimationFrame',
+    'document',
+    'getComputedStyle',
+    'history',
+    'localStorage',
+    'location',
+    'matchMedia',
+    'navigator',
+    'performance',
+    'requestAnimationFrame',
+    'sessionStorage',
+    'self',
+    'window',
+]);
+
+/** True when a package specifier is React, React DOM, React Aria Components, or one of their subpaths. */
+export const isKernelReactSpecifier = (specifier) =>
+    reactKernelPackages.some(
+        (packageName) =>
+            specifier === packageName || specifier.startsWith(`${packageName}/`),
+    );
+
+const normalized = (value) => value.split(path.sep).join('/').replace(/^\.\//u, '');
+
+/** True when an ESLint filename identifies one of the declared repository kernel modules. */
+export function isKernelSourcePath(filename, paths = kernelSourcePaths, cwd = process.cwd()) {
+    if (!filename || filename === '<input>' || filename === '<text>') return false;
+
+    const normalizedFilename = normalized(filename);
+    const normalizedCwd = normalized(cwd).replace(/\/$/u, '');
+    const relative = normalizedFilename.startsWith(`${normalizedCwd}/`)
+        ? normalizedFilename.slice(normalizedCwd.length + 1)
+        : normalizedFilename;
+
+    return paths.some((candidate) => {
+        const normalizedCandidate = normalized(candidate);
+        return (
+            relative === normalizedCandidate ||
+            normalizedFilename.endsWith(`/${normalizedCandidate}`)
+        );
+    });
+}
+
+/** Maps a declared TypeScript module under `Source/` to its emitted `dist/esm` path. */
+export function kernelEmittedPath(sourcePath, extension) {
+    if (extension !== '.js' && extension !== '.d.ts') {
+        throw new Error(`Unsupported kernel emitted extension '${extension}'.`);
+    }
+    return normalized(sourcePath)
+        .replace(/^Source\//u, '')
+        .replace(/\.(?:tsx?|mts|cts)$/u, extension);
+}
diff --git a/ESLint/lib/noReactInKernel.js b/ESLint/lib/noReactInKernel.js
new file mode 100644
index 00000000..467a8b20
--- /dev/null
+++ b/ESLint/lib/noReactInKernel.js
@@ -0,0 +1,116 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import {
+    browserDomGlobals,
+    isKernelReactSpecifier,
+    isKernelSourcePath,
+    kernelSourcePaths,
+} from './kernelBoundary.js';
+
+/**
+ * Keeps the repository's explicitly declared computation kernel independent of React and browser DOM APIs.
+ * The filename check is intentional: this is an owned architectural boundary, not a consumer-wide ban.
+ */
+export const noReactInKernel = {
+    meta: {
+        type: 'problem',
+        docs: {
+            description:
+                'Disallow React package edges and browser DOM globals in explicitly declared Components kernel modules.',
+            recommended: false,
+            url: 'https://github.com/Cratis/Components/blob/main/Documentation/decisions/0003-kernel-boundary.md',
+        },
+        schema: [
+            {
+                type: 'object',
+                properties: {
+                    kernelPaths: {
+                        type: 'array',
+                        items: { type: 'string' },
+                        uniqueItems: true,
+                    },
+                },
+                additionalProperties: false,
+            },
+        ],
+        messages: {
+            forbiddenDependency:
+                "Kernel module '{{file}}' must not depend on '{{specifier}}'. Keep React, React DOM, and React Aria Components outside the repository-owned kernel.",
+            forbiddenBrowserGlobal:
+                "Kernel module '{{file}}' must not use browser DOM global '{{name}}'. Pass data through a React/DOM adapter outside the kernel instead.",
+        },
+    },
+    create(context) {
+        const kernelPaths = context.options[0]?.kernelPaths ?? kernelSourcePaths;
+        const filename = context.filename;
+        if (!isKernelSourcePath(filename, kernelPaths, context.cwd ?? process.cwd())) {
+            return {};
+        }
+
+        const file = kernelPaths.find((candidate) =>
+            isKernelSourcePath(filename, [candidate], context.cwd ?? process.cwd()),
+        );
+        const reportedGlobals = new Set();
+
+        const reportSpecifier = (node) => {
+            if (!node || typeof node.value !== 'string') return;
+            if (!isKernelReactSpecifier(node.value)) return;
+            context.report({
+                node,
+                messageId: 'forbiddenDependency',
+                data: { file, specifier: node.value },
+            });
+        };
+
+        return {
+            ImportDeclaration(node) {
+                reportSpecifier(node.source);
+            },
+            ExportNamedDeclaration(node) {
+                reportSpecifier(node.source);
+            },
+            ExportAllDeclaration(node) {
+                reportSpecifier(node.source);
+            },
+            TSImportEqualsDeclaration(node) {
+                const reference = node.moduleReference;
+                if (reference?.type === 'TSExternalModuleReference') {
+                    reportSpecifier(reference.expression);
+                }
+            },
+            ImportExpression(node) {
+                reportSpecifier(node.source);
+            },
+            CallExpression(node) {
+                if (node.callee.type !== 'Identifier' || node.callee.name !== 'require') {
+                    return;
+                }
+                const [argument] = node.arguments;
+                if (!argument || argument.type === 'SpreadElement') return;
+                reportSpecifier(argument);
+            },
+            'Program:exit'() {
+                const forbidden = new Set(browserDomGlobals);
+                const scopes = context.sourceCode.scopeManager?.scopes ?? [];
+                for (const scope of scopes) {
+                    for (const reference of scope.references) {
+                        const identifier = reference.identifier;
+                        if (!forbidden.has(identifier.name)) continue;
+                        if (reference.resolved?.defs?.length > 0) continue;
+                        const key = `${identifier.range?.[0] ?? identifier.loc.start.line}:${identifier.name}`;
+                        if (reportedGlobals.has(key)) continue;
+                        reportedGlobals.add(key);
+                        context.report({
+                            node: identifier,
+                            messageId: 'forbiddenBrowserGlobal',
+                            data: { file, name: identifier.name },
+                        });
+                    }
+                }
+            },
+        };
+    },
+};
+
+export default noReactInKernel;
diff --git a/ESLint/package.json b/ESLint/package.json
index d4c101a2..e96678ae 100644
--- a/ESLint/package.json
+++ b/ESLint/package.json
@@ -1,7 +1,7 @@
 {
     "name": "@cratis/eslint-plugin-components",
     "version": "0.0.0",
-    "description": "Cratis Components ESLint rules: import from subpaths not the root barrel, use the Cratis dialog wrappers instead of primereact/dialog, require onBeforeExecute callbacks to return their values, keep React hooks out of view models, and identify CommandForm fields by a tamper-resistant marker rather than a raw displayName string. Compose on top of @cratis/eslint-config.",
+    "description": "Cratis Components ESLint rules: import from subpaths not the root barrel, use the Cratis dialog wrappers instead of primereact/dialog, require onBeforeExecute callbacks to return their values, keep React hooks out of view models, protect the repository-owned React-free kernel, and identify CommandForm fields by a tamper-resistant marker rather than a raw displayName string. Compose on top of @cratis/eslint-config.",
     "author": "Cratis",
     "license": "MIT",
     "type": "module",
diff --git a/ESLint/test/rules.test.js b/ESLint/test/rules.test.js
index d471f941..3708bdab 100644
--- a/ESLint/test/rules.test.js
+++ b/ESLint/test/rules.test.js
@@ -15,6 +15,11 @@ import {
 import { onbeforeexecuteMustReturn } from '../lib/onbeforeexecuteMustReturn.js';
 import { noHooksInViewModel } from '../lib/noHooksInViewModel.js';
 import { noRawCommandFormMarker } from '../lib/noRawCommandFormMarker.js';
+import { noReactInKernel } from '../lib/noReactInKernel.js';
+import {
+    isKernelReactSpecifier,
+    kernelSourcePaths,
+} from '../lib/kernelBoundary.js';
 
 RuleTester.afterAll = afterAll;
 RuleTester.describe = describe;
@@ -497,6 +502,113 @@ tsRuleTester.run('no-hooks-in-view-model', noHooksInViewModel, {
     ],
 });
 
+describe('kernel boundary inventory', () => {
+    it('exposes one canonical list to the repository config', () => {
+        expect(kernelSourcePaths).toContain('Source/PivotViewer/engine/store.ts');
+        expect(kernelSourcePaths).toContain('Source/SchemaEditor/schemaHelpers.ts');
+    });
+
+    it.each([
+        'react',
+        'react/jsx-runtime',
+        'react-dom',
+        'react-dom/client',
+        'react-aria-components',
+        'react-aria-components/Button',
+    ])('classifies React kernel dependency %s', (specifier) => {
+        expect(isKernelReactSpecifier(specifier)).toBe(true);
+    });
+
+    it.each([
+        'reactive',
+        'react-dom-extra',
+        'react-aria',
+        'react-aria-components-extra',
+        '@react/components',
+    ])('allows near-miss kernel dependency %s', (specifier) => {
+        expect(isKernelReactSpecifier(specifier)).toBe(false);
+    });
+});
+
+tsRuleTester.run('no-react-in-kernel', noReactInKernel, {
+    valid: [
+        {
+            filename: 'Source/PivotViewer/engine/store.ts',
+            code: "import { compute } from 'reactive'; compute();",
+        },
+        {
+            filename: 'Source/PivotViewer/engine/store.ts',
+            code: "const renderer = await import('react-dom-extra'); void renderer;",
+        },
+        {
+            filename: 'Source/PivotViewer/engine/store.ts',
+            code: 'const document = { title: \'local\' }; document.title;',
+        },
+        {
+            filename: 'Source/Canvas/Canvas.tsx',
+            code: "import React from 'react'; document.createElement('div'); void React;",
+        },
+        {
+            filename: 'Source/PivotViewer/engine/store.ts',
+            code: "import type { Event } from './events'; const event = {} as Event; void event;",
+        },
+    ],
+    invalid: [
+        {
+            filename: 'Source/PivotViewer/engine/store.ts',
+            code: "import React from 'react'; void React;",
+            errors: [
+                {
+                    messageId: 'forbiddenDependency',
+                    data: {
+                        file: 'Source/PivotViewer/engine/store.ts',
+                        specifier: 'react',
+                    },
+                },
+            ],
+        },
+        {
+            filename: 'Source/PivotViewer/engine/store.ts',
+            code: "import { createRoot } from 'react-dom/client'; void createRoot;",
+            errors: [{ messageId: 'forbiddenDependency' }],
+        },
+        {
+            filename: 'Source/PivotViewer/engine/store.ts',
+            code: "const aria = await import('react-aria-components/Button'); void aria;",
+            errors: [{ messageId: 'forbiddenDependency' }],
+        },
+        {
+            filename: 'Source/PivotViewer/engine/store.ts',
+            code: "const server = require('react-dom/server'); void server;",
+            errors: [{ messageId: 'forbiddenDependency' }],
+        },
+        {
+            filename: 'Source/PivotViewer/engine/store.ts',
+            code: "export { useState } from 'react';",
+            errors: [{ messageId: 'forbiddenDependency' }],
+        },
+        {
+            filename: 'Source/PivotViewer/engine/store.ts',
+            code: "document.createElement('div');",
+            languageOptions: { globals: { document: 'readonly' } },
+            errors: [
+                {
+                    messageId: 'forbiddenBrowserGlobal',
+                    data: {
+                        file: 'Source/PivotViewer/engine/store.ts',
+                        name: 'document',
+                    },
+                },
+            ],
+        },
+        {
+            filename: 'Source/PivotViewer/engine/store.ts',
+            code: 'const element = {} as HTMLElement; void element;',
+            errors: [{ messageId: 'forbiddenBrowserGlobal' }],
+        },
+    ],
+});
+
 tsRuleTester.run('no-raw-command-form-marker', noRawCommandFormMarker, {
     valid: [
         // The sanctioned way to mark and to test, in both directions.
diff --git a/ESLint/test/verify-packed-package.mjs b/ESLint/test/verify-packed-package.mjs
index b32a4cbd..0922b510 100644
--- a/ESLint/test/verify-packed-package.mjs
+++ b/ESLint/test/verify-packed-package.mjs
@@ -4,6 +4,7 @@
 import { spawnSync } from 'node:child_process';
 import {
     existsSync,
+    mkdirSync,
     mkdtempSync,
     readFileSync,
     readdirSync,
@@ -95,6 +96,11 @@ try {
             "    languageOptions: { parser: tsParser, parserOptions: { sourceType: 'module' } },",
             "    plugins: { '@cratis/components': components },",
             "    rules: { '@cratis/components/no-root-barrel-import': 'error' },",
+            '}, {',
+            "    files: ['Source/PivotViewer/engine/store.ts'],",
+            "    languageOptions: { parser: tsParser, parserOptions: { sourceType: 'module' } },",
+            "    plugins: { '@cratis/components': components },",
+            "    rules: { '@cratis/components/no-react-in-kernel': 'error' },",
             '}];',
             '',
         ].join('\n'),
@@ -132,6 +138,23 @@ try {
         run(binary, ['legacy.cts'], { cwd: consumer }),
     );
 
+    const kernelDir = path.join(consumer, 'Source', 'PivotViewer', 'engine');
+    mkdirSync(kernelDir, { recursive: true });
+    const kernelSource = path.join(kernelDir, 'store.ts');
+    writeFileSync(kernelSource, "const react = await import('react');\nvoid react;\n");
+    const kernelViolation = run(binary, [kernelSource, '--format', 'json'], {
+        cwd: consumer,
+    });
+    assertRun('packed ESLint kernel violation', kernelViolation, 1);
+    const kernelResults = JSON.parse(kernelViolation.stdout);
+    if (
+        kernelResults.length !== 1 ||
+        kernelResults[0].messages.length !== 1 ||
+        kernelResults[0].messages[0].ruleId !== '@cratis/components/no-react-in-kernel'
+    ) {
+        throw new Error(`Unexpected packed kernel ESLint output:\n${kernelViolation.stdout}`);
+    }
+
     console.log('Packed @cratis/eslint-plugin-components verified.');
 } finally {
     rmSync(scratch, { recursive: true, force: true });
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 9a156f61..5cfd08bc 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -9,6 +9,8 @@ import header from '@tony.ganchev/eslint-plugin-header';
 import noNull from 'eslint-plugin-no-null';
 import globals from 'globals';
 import tseslint from 'typescript-eslint';
+import componentsPlugin from './ESLint/index.js';
+import { kernelSourcePaths } from './ESLint/lib/kernelBoundary.js';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -130,6 +132,18 @@ const defaultConfig = [
             },
         },
     },
+    {
+        files: kernelSourcePaths,
+        plugins: {
+            '@cratis/components': componentsPlugin,
+        },
+        rules: {
+            '@cratis/components/no-react-in-kernel': [
+                'error',
+                { kernelPaths: kernelSourcePaths },
+            ],
+        },
+    },
     {
         files: ['**/for_*/**/*.ts'],
         rules: {

From 4f70672deaa5b628c23d9b0e09d64f8417570f64 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 21:05:22 +0200
Subject: [PATCH 189/267] Gate emitted kernel dependency closures

---
 .../when_classifying_package_boundaries.ts    | 64 ++++++++++++++
 Source/scripts/lib/dependency-graph.mjs       | 85 +++++++++++++++++++
 Source/scripts/verify-package-graph.mjs       | 83 ++++++++++++++++--
 3 files changed, 227 insertions(+), 5 deletions(-)

diff --git a/Source/scripts/for_dependency_graph/when_classifying_package_boundaries.ts b/Source/scripts/for_dependency_graph/when_classifying_package_boundaries.ts
index 9b9fa98a..29d77330 100644
--- a/Source/scripts/for_dependency_graph/when_classifying_package_boundaries.ts
+++ b/Source/scripts/for_dependency_graph/when_classifying_package_boundaries.ts
@@ -2,8 +2,16 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import { describe, expect, it } from 'vitest';
+import ts from 'typescript';
 import {
+    isKernelReactSpecifier,
+    kernelEmittedPath,
+    kernelSourcePaths,
+} from '../../../ESLint/lib/kernelBoundary.js';
+import {
+    analyzeKernelBoundary,
     analyzeRendererBoundary,
+    browserRuntimeReferences,
     isPixiSpecifier,
     isRendererFrameworkRuntimeSpecifier,
     isRendererVendorSpecifier,
@@ -158,4 +166,60 @@ describe('when classifying package boundaries', () => {
             expect(isPixiSpecifier(specifier)).toBe(false);
         },
     );
+
+    it('should derive emitted kernel entries from the canonical source inventory', () => {
+        expect(kernelSourcePaths).toContain('Source/PivotViewer/engine/store.ts');
+        expect(
+            kernelEmittedPath('Source/PivotViewer/engine/store.ts', '.d.ts'),
+        ).toBe('PivotViewer/engine/store.d.ts');
+    });
+
+    it.each([
+        'react',
+        'react/jsx-runtime',
+        'react-dom/client',
+        'react-aria-components/Button',
+    ])('should classify forbidden kernel dependency %s', (specifier: string) => {
+        expect(isKernelReactSpecifier(specifier)).toBe(true);
+    });
+
+    it.each(['reactive', 'react-dom-extra', 'react-aria-components-extra'])(
+        'should allow kernel dependency near miss %s',
+        (specifier: string) => {
+            expect(isKernelReactSpecifier(specifier)).toBe(false);
+        },
+    );
+
+    it('should report React dependencies in either emitted kernel closure', () => {
+        const result = analyzeKernelBoundary(
+            { files: ['kernel.js'], external: ['react-dom/client', 'left-pad'] },
+            { files: ['kernel.d.ts'], external: ['react', '@cratis/fundamentals'] },
+        );
+
+        expect(result.runtimeReactDependencies).toEqual(['react-dom/client']);
+        expect(result.declarationReactDependencies).toEqual(['react']);
+        expect(result.violations).toHaveLength(2);
+    });
+
+    it('should report browser DOM globals in an emitted kernel runtime closure', () => {
+        const sourceFile = ts.createSourceFile(
+            'kernel.js',
+            "const local = { document: 'near miss' }; window.addEventListener('load', () => local.document);",
+            ts.ScriptTarget.Latest,
+            true,
+            ts.ScriptKind.JS,
+        );
+        const references = browserRuntimeReferences(sourceFile);
+        const result = analyzeKernelBoundary(emptyClosure, emptyClosure, [
+            { file: 'kernel.js', name: references[0] },
+        ]);
+
+        expect(references).toEqual(['window']);
+        expect(result.browserRuntimeEdges).toEqual([
+            { file: 'kernel.js', name: 'window' },
+        ]);
+        expect(result.violations).toEqual([
+            'runtime closure reaches browser DOM globals: kernel.js:window',
+        ]);
+    });
 });
diff --git a/Source/scripts/lib/dependency-graph.mjs b/Source/scripts/lib/dependency-graph.mjs
index d5f0b328..ba65a348 100644
--- a/Source/scripts/lib/dependency-graph.mjs
+++ b/Source/scripts/lib/dependency-graph.mjs
@@ -19,6 +19,10 @@
 import { existsSync, readFileSync } from 'node:fs';
 import path from 'node:path';
 import ts from 'typescript';
+import {
+    browserDomGlobals,
+    isKernelReactSpecifier,
+} from '../../../ESLint/lib/kernelBoundary.js';
 
 /** Module-specifier string literals from every import/export/dynamic-import/import-type form. */
 export function moduleSpecifiers(sourceFile) {
@@ -50,6 +54,87 @@ export function moduleSpecifiers(sourceFile) {
     return specifiers;
 }
 
+/** Browser DOM global references in one emitted runtime source file. */
+export function browserRuntimeReferences(sourceFile) {
+    const forbidden = new Set(browserDomGlobals);
+    const references = new Set();
+
+    const isReference = (node) => {
+        const parent = node.parent;
+        if (!parent) return false;
+        if (ts.isPropertyAccessExpression(parent) && parent.name === node) return false;
+        if (ts.isPropertyAssignment(parent) && parent.name === node) return false;
+        if (ts.isMethodDeclaration(parent) && parent.name === node) return false;
+        if (ts.isPropertyDeclaration(parent) && parent.name === node) return false;
+        if (ts.isVariableDeclaration(parent) && parent.name === node) return false;
+        if (ts.isParameter(parent) && parent.name === node) return false;
+        if (ts.isFunctionDeclaration(parent) && parent.name === node) return false;
+        if (ts.isClassDeclaration(parent) && parent.name === node) return false;
+        if (
+            ts.isImportClause(parent) ||
+            ts.isImportSpecifier(parent) ||
+            ts.isNamespaceImport(parent) ||
+            ts.isExportSpecifier(parent)
+        ) {
+            return false;
+        }
+        return true;
+    };
+
+    const visit = (node) => {
+        if (ts.isIdentifier(node) && forbidden.has(node.text) && isReference(node)) {
+            references.add(node.text);
+        }
+        ts.forEachChild(node, visit);
+    };
+    visit(sourceFile);
+    return [...references].sort();
+}
+
+/** Classifies one declared kernel module's emitted runtime and declaration closures. */
+export function analyzeKernelBoundary(
+    runtimeClosure,
+    declarationClosure,
+    browserRuntimeEdges = [],
+) {
+    const runtimeReactDependencies = [
+        ...new Set(runtimeClosure.external.filter(isKernelReactSpecifier)),
+    ].sort();
+    const declarationReactDependencies = [
+        ...new Set(declarationClosure.external.filter(isKernelReactSpecifier)),
+    ].sort();
+    const normalizedBrowserRuntimeEdges = [...browserRuntimeEdges].sort((left, right) =>
+        `${left.file}:${left.name}`.localeCompare(`${right.file}:${right.name}`),
+    );
+    const violations = [];
+
+    if (runtimeReactDependencies.length > 0) {
+        violations.push(
+            `runtime closure reaches React dependencies: ${runtimeReactDependencies.join(', ')}`,
+        );
+    }
+    if (declarationReactDependencies.length > 0) {
+        violations.push(
+            `declaration closure reaches React dependencies: ${declarationReactDependencies.join(', ')}`,
+        );
+    }
+    if (normalizedBrowserRuntimeEdges.length > 0) {
+        violations.push(
+            'runtime closure reaches browser DOM globals: ' +
+                normalizedBrowserRuntimeEdges
+                    .map(({ file, name }) => `${file}:${name}`)
+                    .join(', '),
+        );
+    }
+
+    return {
+        runtimeReactDependencies,
+        declarationReactDependencies,
+        browserRuntimeEdges: normalizedBrowserRuntimeEdges,
+        violations,
+    };
+}
+
 /** Parses one emitted `.js`/`.d.ts` file's own specifiers (does not recurse). */
 function specifiersOf(file) {
     const source = readFileSync(file, 'utf8');
diff --git a/Source/scripts/verify-package-graph.mjs b/Source/scripts/verify-package-graph.mjs
index d669fe72..54040ce5 100644
--- a/Source/scripts/verify-package-graph.mjs
+++ b/Source/scripts/verify-package-graph.mjs
@@ -31,6 +31,9 @@
  *   5. The setup-only root, `./Common`, and public `./renderer` closures never reach the
  *      private all-family `renderer/coreSlots` ABI-proof table. Root and `./Common` also stay
  *      outside the table's DataTables, Dialogs, Display, and Dropdown family directories.
+ *   6. Every source module in the canonical repository-owned kernel inventory has emitted
+ *      runtime and declaration closures with no React, React DOM, or React Aria Components
+ *      dependency, and no emitted runtime reference to a browser DOM global.
  *
  * `./Canvas` and `./PivotViewer` are additionally asserted to actually reach
  * `pixi.js` - a subpath that stopped needing Pixi should have its optional peer
@@ -45,11 +48,19 @@
 import { existsSync, readdirSync, readFileSync, writeFileSync } from 'node:fs';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
+import ts from 'typescript';
 import {
+    kernelEmittedPath,
+    kernelSourcePaths,
+} from '../../ESLint/lib/kernelBoundary.js';
+import {
+    analyzeKernelBoundary,
+    browserRuntimeReferences,
     closureOf,
     closureTouchesSpatialDirectory,
     isPixiSpecifier,
     isRendererVendorSpecifier,
+    moduleSpecifiers,
     rendererBoundaryReport,
 } from './lib/dependency-graph.mjs';
 
@@ -179,9 +190,6 @@ const allEmitted = emittedFiles(esmRoot);
 const directPixiImporters = [];
 const rendererVendorImporters = [];
 {
-    const { moduleSpecifiers } = await import('./lib/dependency-graph.mjs');
-    const ts = (await import('typescript')).default;
-    const { readFileSync } = await import('node:fs');
     for (const file of allEmitted) {
         const relative = path.relative(esmRoot, file).split(path.sep).join('/');
         const isSpatialFile =
@@ -208,6 +216,68 @@ const rendererVendorImporters = [];
     }
 }
 
+const kernelBoundary = [];
+for (const sourcePath of kernelSourcePaths) {
+    const runtimeEntryRelative = kernelEmittedPath(sourcePath, '.js');
+    const declarationEntryRelative = kernelEmittedPath(sourcePath, '.d.ts');
+    const runtimeEntry = path.join(esmRoot, runtimeEntryRelative);
+    const declarationEntry = path.join(esmRoot, declarationEntryRelative);
+
+    if (!existsSync(runtimeEntry) || !existsSync(declarationEntry)) {
+        const missing = [
+            !existsSync(runtimeEntry) ? runtimeEntryRelative : undefined,
+            !existsSync(declarationEntry) ? declarationEntryRelative : undefined,
+        ].filter(Boolean);
+        violations.push(
+            `${sourcePath}: declared kernel module is missing emitted output: ${missing.join(', ')}.`,
+        );
+        kernelBoundary.push({
+            sourcePath,
+            status: 'failed',
+            runtime: { files: [], external: [] },
+            declarations: { files: [], external: [] },
+            runtimeReactDependencies: [],
+            declarationReactDependencies: [],
+            browserRuntimeEdges: [],
+            violations: [`missing emitted output: ${missing.join(', ')}`],
+        });
+        continue;
+    }
+
+    const runtime = closureOf(runtimeEntry, esmRoot);
+    const declarations = closureOf(declarationEntry, esmRoot);
+    const browserRuntimeEdges = runtime.files.flatMap((relative) => {
+        if (!relative.endsWith('.js')) return [];
+        const file = path.join(esmRoot, relative);
+        const sourceFile = ts.createSourceFile(
+            file,
+            readFileSync(file, 'utf8'),
+            ts.ScriptTarget.Latest,
+            true,
+            ts.ScriptKind.JS,
+        );
+        return browserRuntimeReferences(sourceFile).map((name) => ({
+            file: relative,
+            name,
+        }));
+    });
+    const analysis = analyzeKernelBoundary(
+        runtime,
+        declarations,
+        browserRuntimeEdges,
+    );
+    for (const violation of analysis.violations) {
+        violations.push(`${sourcePath}: ${violation}.`);
+    }
+    kernelBoundary.push({
+        sourcePath,
+        status: analysis.violations.length === 0 ? 'passed' : 'failed',
+        runtime,
+        declarations,
+        ...analysis,
+    });
+}
+
 if (directPixiImporters.length > 0) {
     violations.push(
         `'pixi.js' is imported directly by file(s) outside Canvas/ and PivotViewer/: ` +
@@ -314,6 +384,8 @@ if (reportPath) {
                 directPixiImportersOutsideSpatialSubpaths: directPixiImporters,
                 rendererVendorImporters,
                 rendererBoundary,
+                kernelSourcePaths,
+                kernelBoundary,
                 coreSlotIsolationSubpaths: [...coreSlotIsolationSubpaths],
                 leanCoreSlotSubpaths: [...leanCoreSlotSubpaths],
                 coreSlotCrossFamilyDirectories,
@@ -334,8 +406,9 @@ if (violations.length > 0) {
 
 console.log(
     `\nAll ${subpathReports.length} subpath(s) respect the spatial/non-spatial module-graph boundary; ` +
-        `'pixi.js' is reachable only from Canvas/ and PivotViewer/, and emitted Core files ` +
-        `have no renderer-vendor imports.`,
+        `'pixi.js' is reachable only from Canvas/ and PivotViewer/, emitted Core files ` +
+        `have no renderer-vendor imports, and ${kernelBoundary.length} declared kernel module(s) ` +
+        `have React-free and browser-runtime-free emitted closures.`,
 );
 if (rendererBoundary.status === 'deferred') {
     console.log(

From 051def46928d4f786905534f5e894625e96f8413 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 21:05:28 +0200
Subject: [PATCH 190/267] Document repository kernel boundary

---
 .../decisions/0003-kernel-boundary.md         | 119 ++++++++++++++++++
 Documentation/decisions/toc.yml               |   2 +
 2 files changed, 121 insertions(+)
 create mode 100644 Documentation/decisions/0003-kernel-boundary.md

diff --git a/Documentation/decisions/0003-kernel-boundary.md b/Documentation/decisions/0003-kernel-boundary.md
new file mode 100644
index 00000000..80c2b7df
--- /dev/null
+++ b/Documentation/decisions/0003-kernel-boundary.md
@@ -0,0 +1,119 @@
+---
+title: Repository-owned kernel boundary
+description: The explicit React-free and browser-DOM-free computation kernel enforced in Components source and emitted package graphs.
+sidebar:
+    order: 3
+    badge: { text: Accepted, variant: tip }
+---
+
+**Status:** Accepted
+
+## Context
+
+Components intentionally exposes React and browser DOM contracts at its public component surface. That does not make React or the DOM appropriate dependencies for every internal computation. Layout, filtering, selection, coercion, schema paths, and conversation transforms are easier to test and reuse when they remain plain TypeScript.
+
+A folder name cannot establish this boundary. Components has mixed directories where a pure helper sits next to React components, browser focus behavior, pointer normalization, animation-frame scheduling, Web Workers, or Pixi rendering. Classifying a whole mixed folder would either reject valid UI code or quietly allow kernel code to acquire UI dependencies.
+
+The boundary therefore needs a repository-owned inventory of verified modules, a source rule, and an emitted-graph assertion that follows each module's transitive runtime and declaration dependencies.
+
+## Decision
+
+Components maintains one canonical kernel inventory in `ESLint/lib/kernelBoundary.js`. The root ESLint config enables `@cratis/components/no-react-in-kernel` only for those paths. The package-graph gate derives emitted `.js` and `.d.ts` entries from the same inventory and walks both closures.
+
+A declared kernel module must not:
+
+- import, require, dynamically import, or re-export `react`, `react-dom`, `react-aria-components`, or any subpath of those packages;
+- reference browser DOM globals, including DOM element/event types and browser runtime services;
+- reach one of those package dependencies through its emitted runtime or declaration closure; or
+- reach a browser DOM global through its emitted runtime closure.
+
+This boundary is separate from the existing Pixi, renderer-vendor, renderer export, and private `renderer/coreSlots` package-graph assertions. Those rules remain unchanged.
+
+## Included modules
+
+The accepted kernel inventory is exact. A directory not listed here is not implicitly included.
+
+### PivotViewer engine
+
+- `Source/PivotViewer/constants.ts`
+- `Source/PivotViewer/engine/layout.ts`
+- `Source/PivotViewer/engine/requestCorrelator.ts`
+- `Source/PivotViewer/engine/store.ts`
+- `Source/PivotViewer/engine/types.ts`
+
+### Canvas computation
+
+- `Source/Canvas/canvasGesture.ts`
+- `Source/Canvas/canvasTransformActivity.ts`
+- `Source/Canvas/panMomentum.ts`
+- `Source/Canvas/pinchGesture.ts`
+- `Source/Canvas/shapes/Region/regionContainment.ts`
+
+### Filter state and histogram computation
+
+- `Source/Filter/types.ts`
+- `Source/Filter/utils.ts`
+
+### DataTables paging, filtering, and selection
+
+- `Source/DataTables/DataTableFilterMatcherRegistry.ts`
+- `Source/DataTables/DataTableFilterMeta.ts`
+- `Source/DataTables/paginatorRange.ts`
+- `Source/DataTables/selectionKeys.ts`
+
+### Command transforms and value mapping
+
+- `Source/CommandDialog/applyBeforeExecute.ts`
+- `Source/CommandForm/commandFormMarkers.ts`
+- `Source/CommandForm/fields/chipValues.ts`
+- `Source/CommandForm/fields/fieldValueFromEvent.ts`
+
+### Schema paths and validation
+
+- `Source/SchemaEditor/schemaHelpers.ts`
+
+### Chat reducers and mention segmentation
+
+- `Source/Chat/isTopicUnnamed.ts`
+- `Source/Chat/shouldRequestTopicName.ts`
+- `Source/Chat/topicsByActivity.ts`
+- `Source/Chat/Kit/findOwnReaction.ts`
+- `Source/Chat/Kit/reactionsExcludingUser.ts`
+- `Source/Chat/Kit/Mentions/MentionCandidate.ts`
+- `Source/Chat/Kit/Mentions/MentionQuery.ts`
+- `Source/Chat/Kit/Mentions/activeMentionQuery.ts`
+- `Source/Chat/Kit/Mentions/applyMention.ts`
+- `Source/Chat/Kit/Mentions/extractMentions.ts`
+- `Source/Chat/Kit/Mentions/findMentionRanges.ts`
+- `Source/Chat/Kit/Mentions/matchCandidates.ts`
+- `Source/Chat/Kit/Mentions/mentionSegments.ts`
+
+## Explicit exclusions
+
+The initial inventory deliberately excludes candidates that are not React-free and DOM-free today:
+
+- `Source/PivotViewer/engine/pivot.worker.ts` uses the Web Worker `self` and message-event runtime. PivotViewer components, hooks, Pixi sprite/animation code, and environment observers remain outside the kernel.
+- Canvas focus and selection guards, pointer-target and scrollable-content normalization, `zoomMechanism.ts`, `selfSuspendingFrameLoop.ts`, `noteFont.ts`, every React hook, every TSX component, and Pixi-backed code remain outside. `Canvas/*.ts` is not a safe folder-wide pattern.
+- `Source/Filter/useFilterState.ts` is a React hook. Filter editors and histogram UI components remain outside; only their state and histogram computations are included.
+- `Source/DataTables/DataTableSelectionChangeEvent.ts` carries React's `SyntheticEvent`. Table components, keyboard/focus behavior, and renderer adapters remain outside.
+- `Source/CommandDialog/stepChildren.ts` uses React's runtime child traversal. Dialog, stepper, focus, portal, and component modules remain outside.
+- `Source/CommandForm/FieldTypeProvider.ts` exposes React `ComponentType`, so `fieldTypeProviderRegistry.ts` reaches React through its declaration closure. Default providers and every field component also remain outside. The initial inventory includes only marker, coercion, and validation-mapping helpers with clean closures.
+- Notifications are not included. `toast.ts` exposes React nodes and browser button types, while timeout scheduling lives in `Toaster.tsx`; there is no independent React-free queue contract behind an existing clock boundary to declare yet.
+- SchemaEditor React cells and editor composition remain outside; only `schemaHelpers.ts` is included.
+- Chat components, hooks, anchored overlays, focus/portal behavior, and React-valued action descriptors remain outside. `FailedReply` is a React component and the current source has no independent pure retry reducer to declare.
+
+An excluded module receives no broad allowlist. It can enter the inventory only after its dependency closure is genuinely clean, using a type-only dependency or an explicit port at the UI boundary without changing behavior.
+
+## Ratchet policy
+
+The inventory is **grow-never-shrink**. New verified computation modules should be added. An existing entry must not be removed merely to make a new React or DOM dependency pass. Extract the dependency behind a UI-owned port or keep the new behavior outside the kernel.
+
+A source rename or deletion may update the literal path, but it must preserve or increase the protected architectural surface. Any exceptional reduction requires a superseding architecture decision that explains why the module is no longer kernel code; a routine lint suppression or package-graph allowlist is not acceptable.
+
+## Consequences
+
+Kernel computations receive an immediate source diagnostic when React or browser behavior crosses the boundary. The packed plugin carries the same rule implementation, while the Components root config owns activation and scope.
+
+The package graph catches transitive and declaration-only React edges that a direct-import rule cannot see. It also checks emitted runtime browser references, so compilation or bundling cannot silently introduce a platform dependency.
+
+Mixed folders remain mixed. This decision creates no source moves, renderer facades, component behavior changes, or consumer contract changes. The inventory records only boundaries the current source already satisfies.
diff --git a/Documentation/decisions/toc.yml b/Documentation/decisions/toc.yml
index 7a9be68e..9c31b63a 100644
--- a/Documentation/decisions/toc.yml
+++ b/Documentation/decisions/toc.yml
@@ -2,3 +2,5 @@
   href: 0001-dom-coupled-contract.md
 - name: Public component classification
   href: 0002-component-classification.md
+- name: Repository-owned kernel boundary
+  href: 0003-kernel-boundary.md

From 6bdd766bd0bd61c6a028d5eb5efc8c6c28fc7f99 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 21:14:59 +0200
Subject: [PATCH 191/267] Enforce DOM-free kernel declarations

Move the UI callback contract out of pure filter types and extend the emitted graph gate to catch browser DOM types in declaration closures.
---
 .../decisions/0003-kernel-boundary.md         |  6 ++---
 Source/Filter/FilterEditor.tsx                |  2 +-
 Source/Filter/FilterEditorProps.ts            | 12 +++++++++
 Source/Filter/FilterPanel.tsx                 |  2 +-
 Source/Filter/index.ts                        |  2 +-
 Source/Filter/types.ts                        | 10 -------
 Source/PivotViewer/types.ts                   |  2 +-
 .../when_classifying_package_boundaries.ts    | 26 +++++++++++++++++++
 Source/scripts/lib/dependency-graph.mjs       | 19 +++++++++++---
 Source/scripts/verify-package-graph.mjs       | 21 +++++++++++++--
 10 files changed, 80 insertions(+), 22 deletions(-)
 create mode 100644 Source/Filter/FilterEditorProps.ts

diff --git a/Documentation/decisions/0003-kernel-boundary.md b/Documentation/decisions/0003-kernel-boundary.md
index 80c2b7df..5ee6e063 100644
--- a/Documentation/decisions/0003-kernel-boundary.md
+++ b/Documentation/decisions/0003-kernel-boundary.md
@@ -25,7 +25,7 @@ A declared kernel module must not:
 - import, require, dynamically import, or re-export `react`, `react-dom`, `react-aria-components`, or any subpath of those packages;
 - reference browser DOM globals, including DOM element/event types and browser runtime services;
 - reach one of those package dependencies through its emitted runtime or declaration closure; or
-- reach a browser DOM global through its emitted runtime closure.
+- reach a browser DOM global through its emitted runtime or declaration closure.
 
 This boundary is separate from the existing Pixi, renderer-vendor, renderer export, and private `renderer/coreSlots` package-graph assertions. Those rules remain unchanged.
 
@@ -94,7 +94,7 @@ The initial inventory deliberately excludes candidates that are not React-free a
 
 - `Source/PivotViewer/engine/pivot.worker.ts` uses the Web Worker `self` and message-event runtime. PivotViewer components, hooks, Pixi sprite/animation code, and environment observers remain outside the kernel.
 - Canvas focus and selection guards, pointer-target and scrollable-content normalization, `zoomMechanism.ts`, `selfSuspendingFrameLoop.ts`, `noteFont.ts`, every React hook, every TSX component, and Pixi-backed code remain outside. `Canvas/*.ts` is not a safe folder-wide pattern.
-- `Source/Filter/useFilterState.ts` is a React hook. Filter editors and histogram UI components remain outside; only their state and histogram computations are included.
+- `Source/Filter/useFilterState.ts` is a React hook. `FilterEditorProps.ts` carries the DOM-aware public `ChangeHandler` metadata contract. Filter editors and histogram UI components remain outside; only their state and histogram computations are included.
 - `Source/DataTables/DataTableSelectionChangeEvent.ts` carries React's `SyntheticEvent`. Table components, keyboard/focus behavior, and renderer adapters remain outside.
 - `Source/CommandDialog/stepChildren.ts` uses React's runtime child traversal. Dialog, stepper, focus, portal, and component modules remain outside.
 - `Source/CommandForm/FieldTypeProvider.ts` exposes React `ComponentType`, so `fieldTypeProviderRegistry.ts` reaches React through its declaration closure. Default providers and every field component also remain outside. The initial inventory includes only marker, coercion, and validation-mapping helpers with clean closures.
@@ -114,6 +114,6 @@ A source rename or deletion may update the literal path, but it must preserve or
 
 Kernel computations receive an immediate source diagnostic when React or browser behavior crosses the boundary. The packed plugin carries the same rule implementation, while the Components root config owns activation and scope.
 
-The package graph catches transitive and declaration-only React edges that a direct-import rule cannot see. It also checks emitted runtime browser references, so compilation or bundling cannot silently introduce a platform dependency.
+The package graph catches transitive and declaration-only React and browser-DOM edges that a direct-import rule cannot see. It checks both emitted runtime references and declaration types, so compilation or bundling cannot silently introduce a platform dependency.
 
 Mixed folders remain mixed. This decision creates no source moves, renderer facades, component behavior changes, or consumer contract changes. The inventory records only boundaries the current source already satisfies.
diff --git a/Source/Filter/FilterEditor.tsx b/Source/Filter/FilterEditor.tsx
index 26160cff..52a09a30 100644
--- a/Source/Filter/FilterEditor.tsx
+++ b/Source/Filter/FilterEditor.tsx
@@ -2,7 +2,7 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import type { ReactNode } from 'react';
-import type { FilterEditorProps } from './types';
+import type { FilterEditorProps } from './FilterEditorProps';
 
 /**
  * Props for the {@link FilterEditor} slot descriptor.
diff --git a/Source/Filter/FilterEditorProps.ts b/Source/Filter/FilterEditorProps.ts
new file mode 100644
index 00000000..0c31d54b
--- /dev/null
+++ b/Source/Filter/FilterEditorProps.ts
@@ -0,0 +1,12 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { ChangeHandler } from '../types/ChangeHandler';
+
+/** Props passed to a custom filter editor render function. */
+export interface FilterEditorProps {
+    /** The current value for this filter, or `undefined` when unset. */
+    value: unknown;
+    /** Called with the custom filter value and optional change-origin metadata. */
+    onChange: ChangeHandler<unknown>;
+}
diff --git a/Source/Filter/FilterPanel.tsx b/Source/Filter/FilterPanel.tsx
index 74dccb46..96d730e4 100644
--- a/Source/Filter/FilterPanel.tsx
+++ b/Source/Filter/FilterPanel.tsx
@@ -15,11 +15,11 @@ import { createPortal } from 'react-dom';
 import { AnimatePresence, motion } from 'framer-motion';
 import type {
     FilterDefinition,
-    FilterEditorProps,
     FilterValues,
     RangeValues,
     CustomFilterValues,
 } from './types';
+import type { FilterEditorProps } from './FilterEditorProps';
 import { FilterEditor } from './FilterEditor';
 import { RangeHistogramFilter } from './RangeHistogramFilter';
 
diff --git a/Source/Filter/index.ts b/Source/Filter/index.ts
index ec7fa3c4..6d0f1207 100644
--- a/Source/Filter/index.ts
+++ b/Source/Filter/index.ts
@@ -5,6 +5,7 @@ export { FilterPanel } from './FilterPanel';
 export type { FilterPanelProps } from './FilterPanel';
 export { FilterEditor } from './FilterEditor';
 export type { FilterEditorSlotProps } from './FilterEditor';
+export type { FilterEditorProps } from './FilterEditorProps';
 export { RangeHistogramFilter } from './RangeHistogramFilter';
 export type { RangeHistogramFilterProps } from './RangeHistogramFilter';
 export { useFilterState } from './useFilterState';
@@ -16,7 +17,6 @@ export { buildHistogram } from './utils';
 export type {
   FilterValue,
   FilterOption,
-  FilterEditorProps,
   FilterDefinition,
   HistogramBucket,
   FilterValues,
diff --git a/Source/Filter/types.ts b/Source/Filter/types.ts
index f56e9de8..dbe9060c 100644
--- a/Source/Filter/types.ts
+++ b/Source/Filter/types.ts
@@ -1,8 +1,6 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import type { ChangeHandler } from '../types/ChangeHandler';
-
 /** A value that can be rendered in a filter option or counted into a histogram bucket. */
 export type FilterValue = string | number | boolean | Date | null | undefined;
 
@@ -18,14 +16,6 @@ export interface FilterOption {
     count?: number;
 }
 
-/** Props passed to a custom filter editor render function. */
-export interface FilterEditorProps {
-    /** The current value for this filter, or `undefined` when unset. */
-    value: unknown;
-    /** Called with the custom filter value and optional change-origin metadata. */
-    onChange: ChangeHandler<unknown>;
-}
-
 /** One pre-counted bar of a range filter's histogram. */
 export interface HistogramBucket {
     /** Inclusive start of the bucket, on the same scale as the filter's range. */
diff --git a/Source/PivotViewer/types.ts b/Source/PivotViewer/types.ts
index a65c0728..10035022 100644
--- a/Source/PivotViewer/types.ts
+++ b/Source/PivotViewer/types.ts
@@ -2,7 +2,7 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import type { ReactNode } from 'react';
-import type { FilterEditorProps } from '../Filter/types';
+import type { FilterEditorProps } from '../Filter/FilterEditorProps';
 
 /** Primitive value types that a pivot property can hold. */
 export type PivotPrimitive = string | number | boolean | Date | null | undefined;
diff --git a/Source/scripts/for_dependency_graph/when_classifying_package_boundaries.ts b/Source/scripts/for_dependency_graph/when_classifying_package_boundaries.ts
index 29d77330..686e05a8 100644
--- a/Source/scripts/for_dependency_graph/when_classifying_package_boundaries.ts
+++ b/Source/scripts/for_dependency_graph/when_classifying_package_boundaries.ts
@@ -222,4 +222,30 @@ describe('when classifying package boundaries', () => {
             'runtime closure reaches browser DOM globals: kernel.js:window',
         ]);
     });
+
+    it('should report browser DOM types in an emitted kernel declaration closure', () => {
+        const sourceFile = ts.createSourceFile(
+            'kernel.d.ts',
+            'export interface Port { element: HTMLElement; event: Event; }',
+            ts.ScriptTarget.Latest,
+            true,
+            ts.ScriptKind.TS,
+        );
+        const references = browserRuntimeReferences(sourceFile);
+        const result = analyzeKernelBoundary(
+            emptyClosure,
+            emptyClosure,
+            [],
+            references.map((name) => ({ file: 'kernel.d.ts', name })),
+        );
+
+        expect(references).toEqual(['Event', 'HTMLElement']);
+        expect(result.browserDeclarationEdges).toEqual([
+            { file: 'kernel.d.ts', name: 'Event' },
+            { file: 'kernel.d.ts', name: 'HTMLElement' },
+        ]);
+        expect(result.violations).toEqual([
+            'declaration closure reaches browser DOM globals: kernel.d.ts:Event, kernel.d.ts:HTMLElement',
+        ]);
+    });
 });
diff --git a/Source/scripts/lib/dependency-graph.mjs b/Source/scripts/lib/dependency-graph.mjs
index ba65a348..8f5cbdf0 100644
--- a/Source/scripts/lib/dependency-graph.mjs
+++ b/Source/scripts/lib/dependency-graph.mjs
@@ -54,7 +54,7 @@ export function moduleSpecifiers(sourceFile) {
     return specifiers;
 }
 
-/** Browser DOM global references in one emitted runtime source file. */
+/** Browser DOM global references in one emitted runtime or declaration source file. */
 export function browserRuntimeReferences(sourceFile) {
     const forbidden = new Set(browserDomGlobals);
     const references = new Set();
@@ -96,6 +96,7 @@ export function analyzeKernelBoundary(
     runtimeClosure,
     declarationClosure,
     browserRuntimeEdges = [],
+    browserDeclarationEdges = [],
 ) {
     const runtimeReactDependencies = [
         ...new Set(runtimeClosure.external.filter(isKernelReactSpecifier)),
@@ -103,8 +104,11 @@ export function analyzeKernelBoundary(
     const declarationReactDependencies = [
         ...new Set(declarationClosure.external.filter(isKernelReactSpecifier)),
     ].sort();
-    const normalizedBrowserRuntimeEdges = [...browserRuntimeEdges].sort((left, right) =>
-        `${left.file}:${left.name}`.localeCompare(`${right.file}:${right.name}`),
+    const byFileAndName = (left, right) =>
+        `${left.file}:${left.name}`.localeCompare(`${right.file}:${right.name}`);
+    const normalizedBrowserRuntimeEdges = [...browserRuntimeEdges].sort(byFileAndName);
+    const normalizedBrowserDeclarationEdges = [...browserDeclarationEdges].sort(
+        byFileAndName,
     );
     const violations = [];
 
@@ -126,11 +130,20 @@ export function analyzeKernelBoundary(
                     .join(', '),
         );
     }
+    if (normalizedBrowserDeclarationEdges.length > 0) {
+        violations.push(
+            'declaration closure reaches browser DOM globals: ' +
+                normalizedBrowserDeclarationEdges
+                    .map(({ file, name }) => `${file}:${name}`)
+                    .join(', '),
+        );
+    }
 
     return {
         runtimeReactDependencies,
         declarationReactDependencies,
         browserRuntimeEdges: normalizedBrowserRuntimeEdges,
+        browserDeclarationEdges: normalizedBrowserDeclarationEdges,
         violations,
     };
 }
diff --git a/Source/scripts/verify-package-graph.mjs b/Source/scripts/verify-package-graph.mjs
index 54040ce5..e130eb13 100644
--- a/Source/scripts/verify-package-graph.mjs
+++ b/Source/scripts/verify-package-graph.mjs
@@ -33,7 +33,7 @@
  *      outside the table's DataTables, Dialogs, Display, and Dropdown family directories.
  *   6. Every source module in the canonical repository-owned kernel inventory has emitted
  *      runtime and declaration closures with no React, React DOM, or React Aria Components
- *      dependency, and no emitted runtime reference to a browser DOM global.
+ *      dependency, and no emitted runtime or declaration reference to a browser DOM global.
  *
  * `./Canvas` and `./PivotViewer` are additionally asserted to actually reach
  * `pixi.js` - a subpath that stopped needing Pixi should have its optional peer
@@ -239,6 +239,7 @@ for (const sourcePath of kernelSourcePaths) {
             runtimeReactDependencies: [],
             declarationReactDependencies: [],
             browserRuntimeEdges: [],
+            browserDeclarationEdges: [],
             violations: [`missing emitted output: ${missing.join(', ')}`],
         });
         continue;
@@ -261,10 +262,26 @@ for (const sourcePath of kernelSourcePaths) {
             name,
         }));
     });
+    const browserDeclarationEdges = declarations.files.flatMap((relative) => {
+        if (!relative.endsWith('.d.ts')) return [];
+        const file = path.join(esmRoot, relative);
+        const sourceFile = ts.createSourceFile(
+            file,
+            readFileSync(file, 'utf8'),
+            ts.ScriptTarget.Latest,
+            true,
+            ts.ScriptKind.TS,
+        );
+        return browserRuntimeReferences(sourceFile).map((name) => ({
+            file: relative,
+            name,
+        }));
+    });
     const analysis = analyzeKernelBoundary(
         runtime,
         declarations,
         browserRuntimeEdges,
+        browserDeclarationEdges,
     );
     for (const violation of analysis.violations) {
         violations.push(`${sourcePath}: ${violation}.`);
@@ -408,7 +425,7 @@ console.log(
     `\nAll ${subpathReports.length} subpath(s) respect the spatial/non-spatial module-graph boundary; ` +
         `'pixi.js' is reachable only from Canvas/ and PivotViewer/, emitted Core files ` +
         `have no renderer-vendor imports, and ${kernelBoundary.length} declared kernel module(s) ` +
-        `have React-free and browser-runtime-free emitted closures.`,
+        `have React-free and browser-DOM-free runtime and declaration closures.`,
 );
 if (rendererBoundary.status === 'deferred') {
     console.log(

From c43107a4571ea8dc5f8e5db755d14a23637895e1 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 21:42:08 +0200
Subject: [PATCH 192/267] Format kernel boundary integration

---
 Source/Filter/FilterPanel.tsx                      |  5 +----
 Source/Filter/index.ts                             | 14 +++++++-------
 .../when_classifying_package_boundaries.ts         |  6 +++---
 Source/scripts/verify-package-graph.mjs            |  5 +----
 4 files changed, 12 insertions(+), 18 deletions(-)

diff --git a/Source/Filter/FilterPanel.tsx b/Source/Filter/FilterPanel.tsx
index 96d730e4..dea2c5b3 100644
--- a/Source/Filter/FilterPanel.tsx
+++ b/Source/Filter/FilterPanel.tsx
@@ -192,10 +192,7 @@ function OptionList({
                     const optionKey = option.key;
                     const checked = selections.has(optionKey);
                     return (
-                        <li
-                            key={option.key}
-                            data-selected={checked || undefined}
-                        >
+                        <li key={option.key} data-selected={checked || undefined}>
                             <label data-selected={checked || undefined}>
                                 <input
                                     type={filter.multi ? 'checkbox' : 'radio'}
diff --git a/Source/Filter/index.ts b/Source/Filter/index.ts
index 6d0f1207..9b5c8506 100644
--- a/Source/Filter/index.ts
+++ b/Source/Filter/index.ts
@@ -15,11 +15,11 @@ export type { UseFilterStateResult } from './useFilterState';
 // part of the public API.
 export { buildHistogram } from './utils';
 export type {
-  FilterValue,
-  FilterOption,
-  FilterDefinition,
-  HistogramBucket,
-  FilterValues,
-  RangeValues,
-  CustomFilterValues,
+    FilterValue,
+    FilterOption,
+    FilterDefinition,
+    HistogramBucket,
+    FilterValues,
+    RangeValues,
+    CustomFilterValues,
 } from './types';
diff --git a/Source/scripts/for_dependency_graph/when_classifying_package_boundaries.ts b/Source/scripts/for_dependency_graph/when_classifying_package_boundaries.ts
index 686e05a8..4bd9d4f6 100644
--- a/Source/scripts/for_dependency_graph/when_classifying_package_boundaries.ts
+++ b/Source/scripts/for_dependency_graph/when_classifying_package_boundaries.ts
@@ -169,9 +169,9 @@ describe('when classifying package boundaries', () => {
 
     it('should derive emitted kernel entries from the canonical source inventory', () => {
         expect(kernelSourcePaths).toContain('Source/PivotViewer/engine/store.ts');
-        expect(
-            kernelEmittedPath('Source/PivotViewer/engine/store.ts', '.d.ts'),
-        ).toBe('PivotViewer/engine/store.d.ts');
+        expect(kernelEmittedPath('Source/PivotViewer/engine/store.ts', '.d.ts')).toBe(
+            'PivotViewer/engine/store.d.ts',
+        );
     });
 
     it.each([
diff --git a/Source/scripts/verify-package-graph.mjs b/Source/scripts/verify-package-graph.mjs
index e130eb13..12ece172 100644
--- a/Source/scripts/verify-package-graph.mjs
+++ b/Source/scripts/verify-package-graph.mjs
@@ -49,10 +49,7 @@ import { existsSync, readdirSync, readFileSync, writeFileSync } from 'node:fs';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import ts from 'typescript';
-import {
-    kernelEmittedPath,
-    kernelSourcePaths,
-} from '../../ESLint/lib/kernelBoundary.js';
+import { kernelEmittedPath, kernelSourcePaths } from '../../ESLint/lib/kernelBoundary.js';
 import {
     analyzeKernelBoundary,
     browserRuntimeReferences,

From 7c41781ba591a1d73ffd19648c7d42c7475a7408 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 20:57:46 +0200
Subject: [PATCH 193/267] Capture atomic renderer DOM baseline

---
 .../when_preserving_atomic_dom.tsx            | 162 ++++++++++++++++++
 1 file changed, 162 insertions(+)
 create mode 100644 Source/renderer/for_self_hosting/when_preserving_atomic_dom.tsx

diff --git a/Source/renderer/for_self_hosting/when_preserving_atomic_dom.tsx b/Source/renderer/for_self_hosting/when_preserving_atomic_dom.tsx
new file mode 100644
index 00000000..a997d950
--- /dev/null
+++ b/Source/renderer/for_self_hosting/when_preserving_atomic_dom.tsx
@@ -0,0 +1,162 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { DialogButtons } from '@cratis/arc.react/dialogs';
+import { expect } from 'chai';
+import type { ReactElement } from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, it } from 'vitest';
+import { CratisComponentsProvider } from '../../Common/CratisComponentsProvider';
+import { DatePickerInput } from '../../Common/DatePickerInput';
+import { Tooltip } from '../../Common/Tooltip';
+import { TablePaginator } from '../../DataTables/TablePaginator';
+import { Dialog } from '../../Dialogs/Dialog';
+import { Dropdown } from '../../Dropdown/Dropdown';
+
+interface DomBaseline {
+    readonly html: string;
+    readonly tags: Readonly<Record<string, number>>;
+    readonly parts: Readonly<Record<string, number>>;
+    readonly roles: Readonly<Record<string, number>>;
+}
+
+const baselines: Readonly<Record<string, DomBaseline>> = Object.freeze({
+    tooltip: {
+        html: '<button type="button" class="cratis-tooltip-trigger" data-cratis-part="trigger" data-cratis-tooltip-trigger="" tabindex="0">Save</button>',
+        tags: { button: 1 },
+        parts: { trigger: 1 },
+        roles: {},
+    },
+    dropdown: {
+        html: '<span class="cratis-dropdown" data-cratis-part="root" data-selected="true"><template></template><div class="cratis-dropdown__select" data-rac=""><button id="react-aria-_R_9H2_" data-cratis-part="trigger" data-selected="true" class="cratis-dropdown__trigger" data-rac="" type="button" tabindex="0" data-react-aria-pressable="true" aria-labelledby="react-aria-_R_9H7_ react-aria-_R_9H3_" aria-describedby="react-aria-_R_9H5_ react-aria-_R_9H6_" aria-haspopup="listbox" aria-expanded="false"><span id="react-aria-_R_9H7_" data-cratis-part="value" data-selected="true" class="cratis-dropdown__value" data-rac="">One</span><span class="cratis-dropdown__indicator" data-cratis-part="indicator" aria-hidden="true">⌄</span></button><div style="border:0;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:fixed;width:1px;white-space:nowrap;top:0;left:0" aria-hidden="true" data-react-aria-prevent-focus="true" data-a11y-ignore="aria-hidden-focus" data-testid="hidden-select-container"><label><select tabindex="-1"><option value="" label=" "> </option><option value="string:one:0" selected="">One</option></select></label></div></div></span>',
+        tags: {
+            button: 1,
+            div: 2,
+            label: 1,
+            option: 2,
+            select: 1,
+            span: 3,
+            template: 1,
+        },
+        parts: { indicator: 1, root: 1, trigger: 1, value: 1 },
+        roles: {},
+    },
+    dialog: {
+        html: '<div class="cratis-dialog__backdrop" style="z-index:var(--cratis-z-index-dialog)" data-cratis-part="backdrop" data-open="true"><div class="cratis-dialog__positioner" data-cratis-part="positioner" data-open="true"><section class="cratis-dialog" style="width:450px" data-cratis-part="root" data-open="true"><section class="cratis-dialog__document" data-rac="" aria-labelledby="react-aria-_R_1_" role="dialog" tabindex="-1"><header class="cratis-dialog__header" data-cratis-part="header"><h2 id="react-aria-_R_1_" slot="title" data-cratis-part="title" class="cratis-dialog__title">Example dialog</h2><button type="button" class="cratis-dialog__close" data-cratis-part="close" aria-label="Close"><span aria-hidden="true">×</span></button></header><div class="cratis-dialog__content" data-cratis-part="content" data-open="true"><fieldset class="cratis-dialog__busy-scope" data-cratis-part="busy-scope">Dialog content</fieldset></div><footer class="cratis-dialog__footer" data-cratis-part="footer"><fieldset class="cratis-dialog__busy-scope cratis-dialog__busy-scope--footer" data-cratis-part="busy-scope"><button type="button" class="cratis-dialog__button cratis-dialog__button--primary" data-cratis-part="confirm" autofocus=""><span>Ok</span></button><button type="button" class="cratis-dialog__button cratis-dialog__button--secondary" data-cratis-part="cancel"><span>Cancel</span></button></fieldset></footer></section></section></div></div>',
+        tags: {
+            button: 3,
+            div: 3,
+            fieldset: 2,
+            footer: 1,
+            h2: 1,
+            header: 1,
+            section: 2,
+            span: 3,
+        },
+        parts: {
+            backdrop: 1,
+            'busy-scope': 2,
+            cancel: 1,
+            close: 1,
+            confirm: 1,
+            content: 1,
+            footer: 1,
+            header: 1,
+            positioner: 1,
+            root: 1,
+            title: 1,
+        },
+        roles: { dialog: 1 },
+    },
+    datePicker: {
+        html: '<div class="cratis-date-picker" data-cratis-part="root"><div class="cratis-date-picker__picker" data-rac=""><div data-react-aria-pressable="true" id="react-aria-_R_1H3_" aria-label="Appointment date" aria-labelledby="react-aria-_R_1H3_" aria-describedby="react-aria-_R_1H6_ react-aria-_R_1H7_" role="group" class="cratis-date-picker__group" data-cratis-part="group" data-empty="true" data-rac=""><div id="react-aria-_R_1H2_" role="presentation" data-react-aria-pressable="true" style="unicode-bidi:isolate" class="cratis-date-picker__input" data-cratis-part="input" data-rac=""><span data-cratis-part="segment" role="spinbutton" aria-valuetext="Empty" aria-valuemin="1" aria-valuemax="12" id="react-aria-_R_5ld_" aria-label="month, Appointment date" aria-describedby="react-aria-_R_5dH3_ react-aria-_R_5dH4_ react-aria-_R_1H6_ react-aria-_R_1H7_" data-placeholder="true" contentEditable="true" spellCheck="false" autoCorrect="off" enterKeyHint="next" inputMode="numeric" tabindex="0" style="caret-color:transparent" class="cratis-date-picker__segment" data-rac="" data-type="month">mm</span><span data-cratis-part="segment" aria-hidden="true" class="cratis-date-picker__segment" data-rac="" data-type="literal">/</span><span data-cratis-part="segment" role="spinbutton" aria-valuetext="Empty" aria-valuemin="1" aria-valuemax="31" id="react-aria-_R_dld_" aria-label="day, Appointment date" data-placeholder="true" contentEditable="true" spellCheck="false" autoCorrect="off" enterKeyHint="next" inputMode="numeric" tabindex="0" style="caret-color:transparent" class="cratis-date-picker__segment" data-rac="" data-type="day">dd</span><span data-cratis-part="segment" aria-hidden="true" class="cratis-date-picker__segment" data-rac="" data-type="literal">/</span><span data-cratis-part="segment" role="spinbutton" aria-valuetext="Empty" aria-valuemin="1" aria-valuemax="9999" id="react-aria-_R_lld_" aria-label="year, Appointment date" data-placeholder="true" contentEditable="true" spellCheck="false" autoCorrect="off" enterKeyHint="next" inputMode="numeric" tabindex="0" style="caret-color:transparent" class="cratis-date-picker__segment" data-rac="" data-type="year">yyyy</span></div><input type="text" hidden="" class="" data-rac="" value=""/><button id="react-aria-_R_1_" data-cratis-part="trigger" class="cratis-date-picker__trigger" data-rac="" type="button" tabindex="0" data-react-aria-pressable="true" aria-describedby="react-aria-_R_1H6_ react-aria-_R_1H7_" aria-label="Open calendar" aria-labelledby="react-aria-_R_1_ react-aria-_R_1H3_" aria-haspopup="dialog" aria-expanded="false"><span aria-hidden="true">▦</span></button></div></div><div style="border:0;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:fixed;width:1px;white-space:nowrap;top:0;left:0" aria-hidden="true" data-react-aria-prevent-focus="true" data-a11y-ignore="aria-hidden-focus" data-testid="hidden-dateinput-container"><input tabindex="-1" type="date" form="" step="60" value=""/></div></div>',
+        tags: { button: 1, div: 5, input: 2, span: 6 },
+        parts: { group: 1, input: 1, root: 1, segment: 5, trigger: 1 },
+        roles: { group: 1, presentation: 1, spinbutton: 3 },
+    },
+    paginator: {
+        html: '<div role="navigation" aria-label="Pagination" data-cratis-part="root" class="cratis-table-paginator"><button type="button" class="cratis-button" aria-label="First page" data-cratis-part="root" data-variant="ghost" data-shape="default" data-size="normal"><span class="cratis-button__label" data-cratis-part="label"><span aria-hidden="true">«</span></span></button><button type="button" class="cratis-button" aria-label="Previous page" data-cratis-part="root" data-variant="ghost" data-shape="default" data-size="normal"><span class="cratis-button__label" data-cratis-part="label"><span aria-hidden="true">‹</span></span></button><span class="cratis-table-paginator-info" data-cratis-part="info">2 / 3</span><button type="button" class="cratis-button" aria-label="Next page" data-cratis-part="root" data-variant="ghost" data-shape="default" data-size="normal"><span class="cratis-button__label" data-cratis-part="label"><span aria-hidden="true">›</span></span></button><button type="button" class="cratis-button" aria-label="Last page" data-cratis-part="root" data-variant="ghost" data-shape="default" data-size="normal"><span class="cratis-button__label" data-cratis-part="label"><span aria-hidden="true">»</span></span></button></div>',
+        tags: { button: 4, div: 1, span: 9 },
+        parts: { info: 1, label: 4, root: 5 },
+        roles: { navigation: 1 },
+    },
+});
+
+const countBy = (
+    elements: readonly Element[],
+    value: (element: Element) => string | null,
+) =>
+    Object.fromEntries(
+        [...elements]
+            .map(value)
+            .filter((entry): entry is string => Boolean(entry))
+            .sort()
+            .reduce(
+                (counts, entry) =>
+                    counts.set(entry, (counts.get(entry) ?? 0) + 1),
+                new Map<string, number>(),
+            ),
+    );
+
+const summarize = (html: string) => {
+    const template = document.createElement('template');
+    template.innerHTML = html;
+    const elements = Array.from(template.content.querySelectorAll('*'));
+    return {
+        tags: countBy(elements, (element) => element.tagName.toLowerCase()),
+        parts: countBy(elements, (element) =>
+            element.getAttribute('data-cratis-part'),
+        ),
+        roles: countBy(elements, (element) => element.getAttribute('role')),
+    };
+};
+
+const renderWithProvider = (element: ReactElement) =>
+    renderToStaticMarkup(
+        <CratisComponentsProvider>{element}</CratisComponentsProvider>,
+    );
+
+const renderings = () => ({
+    tooltip: renderWithProvider(
+        <Tooltip content='Save changes'>
+            <button type='button'>Save</button>
+        </Tooltip>,
+    ),
+    dropdown: renderWithProvider(
+        <Dropdown value='one' options={[{ label: 'One', value: 'one' }]} />,
+    ),
+    dialog: renderWithProvider(
+        <Dialog title='Example dialog' buttons={DialogButtons.OkCancel}>
+            Dialog content
+        </Dialog>,
+    ),
+    datePicker: renderWithProvider(
+        <DatePickerInput
+            value={null}
+            onChange={() => undefined}
+            aria-label='Appointment date'
+        />,
+    ),
+    paginator: renderWithProvider(
+        <TablePaginator
+            page={1}
+            pageCount={3}
+            onPageChange={() => undefined}
+        />,
+    ),
+});
+
+describe('when preserving the Core atomic DOM baseline', () => {
+    for (const [name, html] of Object.entries(renderings())) {
+        it(`should keep ${name} byte-identical with exact tags, parts, and roles`, () => {
+            const baseline = baselines[name];
+            const summary = summarize(html);
+            expect(html).to.equal(baseline.html);
+            expect(summary.tags).to.deep.equal(baseline.tags);
+            expect(summary.parts).to.deep.equal(baseline.parts);
+            expect(summary.roles).to.deep.equal(baseline.roles);
+        });
+    }
+});

From 899218d8de47f9afeaf34599492485c0c572fccc Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 21:01:24 +0200
Subject: [PATCH 194/267] Extract atomic slot implementations

---
 Source/Common/ButtonImplementation.tsx        |   6 +-
 .../Common/DatePickerInputImplementation.tsx  | 436 +++++++++++
 Source/Common/TooltipImplementation.tsx       |  53 ++
 .../TablePaginatorImplementation.tsx          | 107 +++
 Source/Dialogs/DialogImplementation.tsx       | 402 ++++++++++
 Source/Dropdown/DropdownImplementation.tsx    | 712 ++++++++++++++++++
 6 files changed, 1713 insertions(+), 3 deletions(-)
 create mode 100644 Source/Common/DatePickerInputImplementation.tsx
 create mode 100644 Source/Common/TooltipImplementation.tsx
 create mode 100644 Source/DataTables/TablePaginatorImplementation.tsx
 create mode 100644 Source/Dialogs/DialogImplementation.tsx
 create mode 100644 Source/Dropdown/DropdownImplementation.tsx

diff --git a/Source/Common/ButtonImplementation.tsx b/Source/Common/ButtonImplementation.tsx
index d24797da..497a8193 100644
--- a/Source/Common/ButtonImplementation.tsx
+++ b/Source/Common/ButtonImplementation.tsx
@@ -7,7 +7,7 @@ import type {
     ButtonSeverity,
     ButtonTone,
 } from './Button';
-import { Tooltip } from './Tooltip';
+import { TooltipImplementation } from './TooltipImplementation';
 
 const renderIcon = (icon: ReactNode) =>
     typeof icon === 'string' ? <i className={icon} aria-hidden='true' /> : icon;
@@ -163,13 +163,13 @@ export const ButtonImplementation = forwardRef<HTMLButtonElement, ButtonProps>(
         );
 
         return tooltip ? (
-            <Tooltip
+            <TooltipImplementation
                 content={tooltip}
                 position={tooltipOptions?.position}
                 className={tooltipOptions?.className}
             >
                 {button}
-            </Tooltip>
+            </TooltipImplementation>
         ) : (
             button
         );
diff --git a/Source/Common/DatePickerInputImplementation.tsx b/Source/Common/DatePickerInputImplementation.tsx
new file mode 100644
index 00000000..1332a3f9
--- /dev/null
+++ b/Source/Common/DatePickerInputImplementation.tsx
@@ -0,0 +1,436 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { useState } from 'react';
+import {
+    Button,
+    Calendar,
+    CalendarCell,
+    CalendarGrid,
+    CalendarGridBody,
+    CalendarGridHeader,
+    CalendarHeaderCell,
+    DateInput,
+    DatePicker as AriaDatePicker,
+    DateSegment,
+    Group,
+    Popover,
+    type DateValue,
+} from 'react-aria-components/DatePicker';
+import { Dialog } from 'react-aria-components/Dialog';
+import { Heading } from 'react-aria-components/Heading';
+import { useCratisComponentsConfig } from './CratisComponentsProvider';
+import { asReactAriaButtonProps } from './reactAriaProps';
+import {
+    fromDate,
+    getLocalTimeZone,
+    today,
+    toCalendarDate,
+} from '@internationalized/date';
+import type { DatePickerInputProps } from './DatePickerInput';
+
+const classNames = (...values: Array<string | undefined>) =>
+    values.filter(Boolean).join(' ');
+
+const asDateValue = (
+    value: Date | null,
+    showTime: boolean | undefined,
+): DateValue | null => {
+    if (!value) return null;
+    const zoned = fromDate(value, getLocalTimeZone());
+    return showTime ? zoned : toCalendarDate(zoned);
+};
+
+const asDate = (value: DateValue | null): Date | null =>
+    value ? value.toDate(getLocalTimeZone()) : null;
+
+/**
+ * An internationalized date or date-time picker with Cratis-owned markup parts.
+ * The public boundary remains `Date | null`; React Aria's calendar values stay internal.
+ */
+export const DatePickerInputImplementation = ({
+    value,
+    onChange,
+    onBlur,
+    invalid,
+    disabled,
+    readOnly,
+    id,
+    showButtonBar,
+    placeholder,
+    showIcon = true,
+    showTime,
+    hourFormat,
+    minDate,
+    maxDate,
+    className,
+    style,
+    pt,
+    todayLabel,
+    clearLabel,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledby,
+    'aria-describedby': ariaDescribedby,
+}: DatePickerInputProps) => {
+    const [isPickerOpen, setIsPickerOpen] = useState(false);
+    const { messages } = useCratisComponentsConfig();
+    const datePickerMessages = messages?.datePicker;
+    const resolvedTodayLabel = todayLabel ?? datePickerMessages?.today ?? 'Today';
+    const resolvedClearLabel = clearLabel ?? datePickerMessages?.clear ?? 'Clear';
+    const timeZone = getLocalTimeZone();
+    const minValue = asDateValue(minDate ?? null, showTime) ?? undefined;
+    const maxValue = asDateValue(maxDate ?? null, showTime) ?? undefined;
+    const todayDate = today(timeZone).toDate(timeZone);
+    // Compare the same granularity that the action emits. In date-time mode the Today action
+    // retains its existing local-midnight value, which can legitimately fall before a same-day
+    // minDate carrying a later time.
+    const todayValue = asDateValue(todayDate, showTime)!;
+    const isTodayOutOfBounds =
+        (minValue !== undefined && todayValue.compare(minValue) < 0) ||
+        (maxValue !== undefined && todayValue.compare(maxValue) > 0);
+    const rootClassName = classNames(
+        'cratis-date-picker',
+        pt?.root?.className,
+        className,
+    );
+    const inputId = id ?? pt?.input?.id;
+    const effectiveDisabled = disabled ?? pt?.input?.disabled ?? false;
+    const effectiveReadOnly = readOnly ?? pt?.input?.readOnly ?? false;
+    const effectiveInvalid = invalid ?? pt?.input?.['aria-invalid'] ?? false;
+    const effectivePlaceholder = placeholder ?? pt?.input?.placeholder;
+    const effectiveAriaLabel =
+        ariaLabel ??
+        pt?.input?.['aria-label'] ??
+        effectivePlaceholder ??
+        datePickerMessages?.label ??
+        'Date';
+    const effectiveAriaLabelledby = ariaLabelledby ?? pt?.input?.['aria-labelledby'];
+    const effectiveAriaDescribedby = ariaDescribedby ?? pt?.input?.['aria-describedby'];
+    const inputPartAttributes = {
+        ...pt?.input,
+        id: undefined,
+        className: undefined,
+        style: undefined,
+        disabled: undefined,
+        readOnly: undefined,
+        placeholder: undefined,
+        'aria-label': undefined,
+        'aria-labelledby': undefined,
+        'aria-describedby': undefined,
+        'aria-invalid': undefined,
+    };
+
+    return (
+        <div
+            {...pt?.root}
+            className={rootClassName}
+            style={{ ...pt?.root?.style, ...style }}
+            data-cratis-part='root'
+            data-invalid={effectiveInvalid || undefined}
+            data-disabled={effectiveDisabled || undefined}
+            data-readonly={effectiveReadOnly || undefined}
+            data-open={isPickerOpen || undefined}
+            data-selected={value !== null || undefined}
+            onBlur={onBlur}
+        >
+            <AriaDatePicker
+                value={asDateValue(value, showTime)}
+                onChange={(next) => onChange(asDate(next), { source: 'user' })}
+                isDisabled={effectiveDisabled}
+                isReadOnly={effectiveReadOnly}
+                isInvalid={effectiveInvalid}
+                onOpenChange={setIsPickerOpen}
+                minValue={minValue}
+                maxValue={maxValue}
+                granularity={showTime ? 'minute' : 'day'}
+                hourCycle={
+                    hourFormat === '12' ? 12 : hourFormat === '24' ? 24 : undefined
+                }
+                aria-label={effectiveAriaLabel}
+                aria-labelledby={effectiveAriaLabelledby}
+                aria-describedby={effectiveAriaDescribedby}
+                className='cratis-date-picker__picker'
+            >
+                {({ isOpen }) => (
+                    <>
+                        <Group
+                            {...pt?.group}
+                            id={inputId}
+                            aria-invalid={effectiveInvalid || undefined}
+                            className={classNames(
+                                'cratis-date-picker__group',
+                                pt?.group?.className,
+                            )}
+                            data-cratis-part='group'
+                            data-empty={value === null || undefined}
+                            render={(groupProps) => (
+                                <div
+                                    {...groupProps}
+                                    data-open={isOpen || undefined}
+                                    data-invalid={effectiveInvalid || undefined}
+                                    data-disabled={effectiveDisabled || undefined}
+                                    data-readonly={effectiveReadOnly || undefined}
+                                    data-selected={value !== null || undefined}
+                                />
+                            )}
+                        >
+                            <DateInput
+                                {...inputPartAttributes}
+                                className={classNames(
+                                    'cratis-date-picker__input',
+                                    pt?.input?.className,
+                                )}
+                                style={pt?.input?.style}
+                                data-cratis-part='input'
+                                data-placeholder={effectivePlaceholder}
+                                render={(inputProps) => (
+                                    <div
+                                        {...inputProps}
+                                        data-open={isOpen || undefined}
+                                        data-invalid={effectiveInvalid || undefined}
+                                        data-disabled={effectiveDisabled || undefined}
+                                        data-readonly={effectiveReadOnly || undefined}
+                                        data-selected={value !== null || undefined}
+                                    />
+                                )}
+                            >
+                                {(segment) => (
+                                    <DateSegment
+                                        {...pt?.segment}
+                                        segment={segment}
+                                        className={classNames(
+                                            'cratis-date-picker__segment',
+                                            pt?.segment?.className,
+                                        )}
+                                        data-cratis-part='segment'
+                                        render={(segmentProps) => (
+                                            <span
+                                                {...segmentProps}
+                                                data-invalid={
+                                                    effectiveInvalid || undefined
+                                                }
+                                                data-disabled={
+                                                    effectiveDisabled || undefined
+                                                }
+                                                data-readonly={
+                                                    effectiveReadOnly || undefined
+                                                }
+                                            />
+                                        )}
+                                    />
+                                )}
+                            </DateInput>
+                            {value === null && effectivePlaceholder && (
+                                <span
+                                    {...pt?.placeholder}
+                                    className={classNames(
+                                        'cratis-date-picker__placeholder',
+                                        pt?.placeholder?.className,
+                                    )}
+                                    data-cratis-part='placeholder'
+                                    aria-hidden='true'
+                                >
+                                    {effectivePlaceholder}
+                                </span>
+                            )}
+                            {showIcon && (
+                                <Button
+                                    {...asReactAriaButtonProps(pt?.trigger)}
+                                    isDisabled={effectiveDisabled || effectiveReadOnly}
+                                    className={classNames(
+                                        'cratis-date-picker__trigger',
+                                        pt?.trigger?.className,
+                                    )}
+                                    data-cratis-part='trigger'
+                                    render={(triggerProps) => (
+                                        <button
+                                            {...triggerProps}
+                                            data-open={isOpen || undefined}
+                                            data-invalid={effectiveInvalid || undefined}
+                                            data-disabled={
+                                                effectiveDisabled ||
+                                                effectiveReadOnly ||
+                                                undefined
+                                            }
+                                            data-readonly={effectiveReadOnly || undefined}
+                                            data-selected={value !== null || undefined}
+                                        />
+                                    )}
+                                    aria-label={
+                                        pt?.trigger?.['aria-label'] ??
+                                        datePickerMessages?.openCalendar ??
+                                        'Open calendar'
+                                    }
+                                >
+                                    <span aria-hidden='true'>▦</span>
+                                </Button>
+                            )}
+                        </Group>
+                        <Popover
+                            {...pt?.popover}
+                            className={classNames(
+                                'cratis-date-picker__popover',
+                                pt?.popover?.className,
+                            )}
+                            data-cratis-part='popover'
+                            data-open
+                            placement='bottom start'
+                        >
+                            <Dialog
+                                {...pt?.dialog}
+                                className={classNames(
+                                    'cratis-date-picker__dialog',
+                                    pt?.dialog?.className,
+                                )}
+                                data-cratis-part='dialog'
+                                data-open
+                            >
+                                <Calendar
+                                    {...pt?.calendar}
+                                    className={classNames(
+                                        'cratis-date-picker__calendar',
+                                        pt?.calendar?.className,
+                                    )}
+                                    data-cratis-part='calendar'
+                                    data-open
+                                >
+                                    <header
+                                        {...pt?.header}
+                                        className={classNames(
+                                            'cratis-date-picker__header',
+                                            pt?.header?.className,
+                                        )}
+                                        data-cratis-part='header'
+                                    >
+                                        <Button
+                                            {...asReactAriaButtonProps(pt?.previous)}
+                                            slot='previous'
+                                            className={classNames(
+                                                'cratis-date-picker__nav',
+                                                pt?.previous?.className,
+                                            )}
+                                            data-cratis-part='previous'
+                                            aria-label={
+                                                pt?.previous?.['aria-label'] ??
+                                                datePickerMessages?.previousMonth ??
+                                                'Previous month'
+                                            }
+                                        >
+                                            <span aria-hidden='true'>‹</span>
+                                        </Button>
+                                        <Heading
+                                            {...pt?.heading}
+                                            className={classNames(
+                                                'cratis-date-picker__heading',
+                                                pt?.heading?.className,
+                                            )}
+                                            data-cratis-part='heading'
+                                        />
+                                        <Button
+                                            {...asReactAriaButtonProps(pt?.next)}
+                                            slot='next'
+                                            className={classNames(
+                                                'cratis-date-picker__nav',
+                                                pt?.next?.className,
+                                            )}
+                                            data-cratis-part='next'
+                                            aria-label={
+                                                pt?.next?.['aria-label'] ??
+                                                datePickerMessages?.nextMonth ??
+                                                'Next month'
+                                            }
+                                        >
+                                            <span aria-hidden='true'>›</span>
+                                        </Button>
+                                    </header>
+                                    <CalendarGrid
+                                        {...pt?.grid}
+                                        className={classNames(
+                                            'cratis-date-picker__grid',
+                                            pt?.grid?.className,
+                                        )}
+                                        data-cratis-part='grid'
+                                    >
+                                        <CalendarGridHeader>
+                                            {(day) => (
+                                                <CalendarHeaderCell>
+                                                    {day}
+                                                </CalendarHeaderCell>
+                                            )}
+                                        </CalendarGridHeader>
+                                        <CalendarGridBody>
+                                            {(date) => (
+                                                <CalendarCell
+                                                    {...pt?.cell}
+                                                    date={date}
+                                                    className={classNames(
+                                                        'cratis-date-picker__cell',
+                                                        pt?.cell?.className,
+                                                    )}
+                                                    data-cratis-part='cell'
+                                                />
+                                            )}
+                                        </CalendarGridBody>
+                                    </CalendarGrid>
+                                </Calendar>
+                                {showButtonBar && (
+                                    <div
+                                        {...pt?.buttonBar}
+                                        className={classNames(
+                                            'cratis-date-picker__button-bar',
+                                            pt?.buttonBar?.className,
+                                        )}
+                                        data-cratis-part='button-bar'
+                                    >
+                                        <button
+                                            {...pt?.today}
+                                            type='button'
+                                            className={classNames(
+                                                'cratis-date-picker__action',
+                                                pt?.today?.className,
+                                            )}
+                                            data-cratis-part='today'
+                                            data-disabled={
+                                                isTodayOutOfBounds || undefined
+                                            }
+                                            disabled={isTodayOutOfBounds}
+                                            aria-disabled={
+                                                isTodayOutOfBounds || undefined
+                                            }
+                                            onClick={(event) => {
+                                                if (isTodayOutOfBounds) return;
+                                                onChange(todayDate, {
+                                                    source: 'user',
+                                                    nativeEvent: event.nativeEvent,
+                                                });
+                                            }}
+                                        >
+                                            {resolvedTodayLabel}
+                                        </button>
+                                        <button
+                                            {...pt?.clear}
+                                            type='button'
+                                            className={classNames(
+                                                'cratis-date-picker__action',
+                                                pt?.clear?.className,
+                                            )}
+                                            data-cratis-part='clear'
+                                            onClick={(event) =>
+                                                onChange(null, {
+                                                    source: 'user',
+                                                    nativeEvent: event.nativeEvent,
+                                                })
+                                            }
+                                        >
+                                            {resolvedClearLabel}
+                                        </button>
+                                    </div>
+                                )}
+                            </Dialog>
+                        </Popover>
+                    </>
+                )}
+            </AriaDatePicker>
+        </div>
+    );
+};
diff --git a/Source/Common/TooltipImplementation.tsx b/Source/Common/TooltipImplementation.tsx
new file mode 100644
index 00000000..160d9d2e
--- /dev/null
+++ b/Source/Common/TooltipImplementation.tsx
@@ -0,0 +1,53 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { cloneElement, type DOMAttributes, type ReactElement } from 'react';
+import {
+    Focusable,
+    Tooltip as AriaTooltip,
+    TooltipTrigger,
+} from 'react-aria-components/Tooltip';
+import type { TooltipProps } from './Tooltip';
+
+interface TooltipTriggerElementProps {
+    className?: string;
+    disabled?: boolean;
+    'data-cratis-part'?: string;
+    'data-cratis-tooltip-trigger'?: string;
+}
+
+/** Core implementation for the atomic tooltip slot. */
+export const TooltipImplementation = ({
+    content,
+    position = 'top',
+    disabled = false,
+    className,
+    children,
+}: TooltipProps) => {
+    if (!content || disabled) return children;
+
+    const trigger = cloneElement(children, {
+        className: ['cratis-tooltip-trigger', children.props.className, className]
+            .filter(Boolean)
+            .join(' '),
+        'data-cratis-part': children.props['data-cratis-part'] ?? 'trigger',
+        'data-cratis-tooltip-trigger': '',
+    } as TooltipTriggerElementProps);
+
+    return (
+        <TooltipTrigger delay={350} closeDelay={100}>
+            <Focusable isDisabled={trigger.props.disabled}>
+                {trigger as unknown as ReactElement<DOMAttributes<HTMLElement>, string>}
+            </Focusable>
+            <AriaTooltip
+                placement={position}
+                offset={8}
+                className='cratis-tooltip-popup'
+                data-cratis-part='popup'
+                data-open
+            >
+                {content}
+            </AriaTooltip>
+        </TooltipTrigger>
+    );
+};
diff --git a/Source/DataTables/TablePaginatorImplementation.tsx b/Source/DataTables/TablePaginatorImplementation.tsx
new file mode 100644
index 00000000..da576a42
--- /dev/null
+++ b/Source/DataTables/TablePaginatorImplementation.tsx
@@ -0,0 +1,107 @@
+// 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 '../Common/Button';
+import { useCratisComponentsConfig } from '../Common/CratisComponentsProvider';
+import type { TablePaginatorProps } from './TablePaginator';
+import { paginatorRange } from './paginatorRange';
+
+/**
+ * A minimal first/previous/next/last paginator. The
+ * Cratis data tables drive paging through Arc's paging hook rather than the
+ * table's internal pagination — so this renders the page controls wired to a
+ * simple `onPageChange(pageIndex)` callback.
+ */
+export const TablePaginatorImplementation = ({
+    page,
+    pageCount,
+    onPageChange,
+    totalItems,
+    pageSize,
+    ariaLabels,
+    className,
+    pt,
+}: TablePaginatorProps) => {
+    const { messages } = useCratisComponentsConfig();
+    const paginatorMessages = messages?.paginator;
+    const isFirst = page <= 0;
+    const isLast = page >= pageCount - 1;
+    const rangeReport = paginatorRange(page, pageSize, totalItems);
+    const labels = {
+        navigation:
+            ariaLabels?.navigation ?? paginatorMessages?.navigation ?? 'Pagination',
+        first: ariaLabels?.first ?? paginatorMessages?.first ?? 'First page',
+        previous: ariaLabels?.previous ?? paginatorMessages?.previous ?? 'Previous page',
+        next: ariaLabels?.next ?? paginatorMessages?.next ?? 'Next page',
+        last: ariaLabels?.last ?? paginatorMessages?.last ?? 'Last page',
+    };
+
+    return (
+        <div
+            {...pt?.root}
+            role='navigation'
+            aria-label={labels.navigation}
+            data-cratis-part='root'
+            className={['cratis-table-paginator', pt?.root?.className, className]
+                .filter(Boolean)
+                .join(' ')}
+        >
+            {rangeReport && (
+                <span
+                    {...pt?.range}
+                    className={['cratis-table-paginator-range', pt?.range?.className]
+                        .filter(Boolean)
+                        .join(' ')}
+                    data-cratis-part='range'
+                >
+                    {rangeReport}
+                </span>
+            )}
+            <Button
+                variant='ghost'
+                disabled={isFirst}
+                onClick={() => onPageChange(0)}
+                aria-label={labels.first}
+                pt={pt?.first}
+            >
+                <span aria-hidden='true'>«</span>
+            </Button>
+            <Button
+                variant='ghost'
+                disabled={isFirst}
+                onClick={() => onPageChange(page - 1)}
+                aria-label={labels.previous}
+                pt={pt?.previous}
+            >
+                <span aria-hidden='true'>‹</span>
+            </Button>
+            <span
+                {...pt?.info}
+                className={['cratis-table-paginator-info', pt?.info?.className]
+                    .filter(Boolean)
+                    .join(' ')}
+                data-cratis-part='info'
+            >
+                {page + 1} / {Math.max(pageCount, 1)}
+            </span>
+            <Button
+                variant='ghost'
+                disabled={isLast}
+                onClick={() => onPageChange(page + 1)}
+                aria-label={labels.next}
+                pt={pt?.next}
+            >
+                <span aria-hidden='true'>›</span>
+            </Button>
+            <Button
+                variant='ghost'
+                disabled={isLast}
+                onClick={() => onPageChange(pageCount - 1)}
+                aria-label={labels.last}
+                pt={pt?.last}
+            >
+                <span aria-hidden='true'>»</span>
+            </Button>
+        </div>
+    );
+};
diff --git a/Source/Dialogs/DialogImplementation.tsx b/Source/Dialogs/DialogImplementation.tsx
new file mode 100644
index 00000000..117bcde3
--- /dev/null
+++ b/Source/Dialogs/DialogImplementation.tsx
@@ -0,0 +1,402 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { DialogResult, DialogButtons, useDialogContext } from '@cratis/arc.react/dialogs';
+import { Dialog as AriaDialog, Heading } from 'react-aria-components/Dialog';
+import { Modal, ModalOverlay } from 'react-aria-components/Modal';
+import { useEffect, useRef, useSyncExternalStore } from 'react';
+import { DialogInitialFocus } from './DialogInitialFocus';
+import type { DialogProps } from './Dialog';
+import { useCratisComponentsConfig } from '../Common/CratisComponentsProvider';
+
+const classNames = (...values: Array<string | undefined>) =>
+    values.filter(Boolean).join(' ');
+
+const subscribeToBrowserEnvironment = () => () => undefined;
+const useIsBrowser = () =>
+    useSyncExternalStore(
+        subscribeToBrowserEnvironment,
+        () => true,
+        () => false,
+    );
+
+/**
+ * A modal dialog with Arc host integration, typed footer actions, busy/validity
+ * state, controlled dismissal, and stable Cratis-owned styling parts.
+ */
+export const DialogImplementation = ({
+    title,
+    visible = true,
+    onClose,
+    onConfirm,
+    onCancel,
+    buttons = DialogButtons.OkCancel,
+    initialFocus = DialogInitialFocus.Confirm,
+    children,
+    width = '450px',
+    style,
+    contentStyle,
+    isValid,
+    isBusy = false,
+    okLabel,
+    cancelLabel,
+    yesLabel,
+    noLabel,
+    closeAriaLabel,
+    dismissable,
+    className,
+    pt,
+}: DialogProps) => {
+    const { messages } = useCratisComponentsConfig();
+    const dialogMessages = messages?.dialog;
+    const resolvedOkLabel = okLabel ?? dialogMessages?.ok ?? 'Ok';
+    const resolvedCancelLabel = cancelLabel ?? dialogMessages?.cancel ?? 'Cancel';
+    const resolvedYesLabel = yesLabel ?? dialogMessages?.yes ?? 'Yes';
+    const resolvedNoLabel = noLabel ?? dialogMessages?.no ?? 'No';
+    const resolvedCloseAriaLabel = closeAriaLabel ?? dialogMessages?.close ?? 'Close';
+    let contextCloseDialog: ((result: DialogResult) => void) | undefined;
+    try {
+        const context = useDialogContext();
+        contextCloseDialog = context?.closeDialog;
+    } catch {
+        contextCloseDialog = undefined;
+    }
+
+    const isBrowser = useIsBrowser();
+    const titleRef = useRef<HTMLHeadingElement>(null);
+    const confirmRef = useRef<HTMLButtonElement>(null);
+    const cancelRef = useRef<HTMLButtonElement>(null);
+
+    const isDialogValid = isValid !== false;
+    const hasDismissingButton =
+        typeof buttons === 'number' && buttons !== DialogButtons.Ok;
+    const resolvedInitialFocus =
+        initialFocus === DialogInitialFocus.Cancel && !hasDismissingButton
+            ? DialogInitialFocus.Content
+            : initialFocus;
+    const focusesConfirmButton = resolvedInitialFocus === DialogInitialFocus.Confirm;
+    const focusesDismissingButton = resolvedInitialFocus === DialogInitialFocus.Cancel;
+    const focusesTitle = resolvedInitialFocus === DialogInitialFocus.Content;
+    const allowsDismissal = dismissable ?? typeof buttons === 'number';
+    const isDismissable = allowsDismissal && !isBusy;
+
+    useEffect(() => {
+        if (!visible) return;
+        const target = focusesConfirmButton
+            ? confirmRef.current
+            : focusesDismissingButton
+              ? cancelRef.current
+              : titleRef.current;
+        const frame = requestAnimationFrame(() => target?.focus());
+        return () => cancelAnimationFrame(frame);
+    }, [focusesConfirmButton, focusesDismissingButton, visible]);
+
+    const handleClose = async (result: DialogResult) => {
+        let shouldCloseThroughContext = true;
+
+        if (result === DialogResult.Ok || result === DialogResult.Yes) {
+            if (onConfirm) {
+                const closeResult = await onConfirm();
+                shouldCloseThroughContext = closeResult === true;
+            } else if (onClose) {
+                const closeResult = await onClose(result);
+                shouldCloseThroughContext = closeResult !== false;
+            }
+        } else if (onCancel) {
+            const closeResult = await onCancel();
+            shouldCloseThroughContext = closeResult === true;
+        } else if (onClose) {
+            const closeResult = await onClose(result);
+            shouldCloseThroughContext = closeResult !== false;
+        }
+
+        if (shouldCloseThroughContext) contextCloseDialog?.(result);
+    };
+
+    const footerButton = (
+        result: DialogResult,
+        label: string,
+        primary: boolean,
+        focused: boolean,
+    ) => (
+        <button
+            key={`${result}-${label}`}
+            {...(primary ? pt?.confirm : pt?.cancel)}
+            type='button'
+            className={classNames(
+                'cratis-dialog__button',
+                primary
+                    ? 'cratis-dialog__button--primary'
+                    : 'cratis-dialog__button--secondary',
+                primary ? pt?.confirm?.className : pt?.cancel?.className,
+            )}
+            data-cratis-part={primary ? 'confirm' : 'cancel'}
+            data-disabled={(primary ? !isDialogValid || isBusy : isBusy) || undefined}
+            data-busy={isBusy || undefined}
+            ref={primary ? confirmRef : focused ? cancelRef : undefined}
+            onClick={() => void handleClose(result)}
+            disabled={primary ? !isDialogValid || isBusy : isBusy}
+            autoFocus={focused}
+            aria-busy={primary && isBusy ? true : undefined}
+        >
+            {primary && isBusy && (
+                <span className='cratis-dialog__spinner' aria-hidden='true' />
+            )}
+            <span>{label}</span>
+        </button>
+    );
+
+    const predefinedFooter = () => {
+        if (typeof buttons !== 'number') return buttons;
+
+        switch (buttons) {
+            case DialogButtons.Ok:
+                return footerButton(
+                    DialogResult.Ok,
+                    resolvedOkLabel,
+                    true,
+                    focusesConfirmButton,
+                );
+            case DialogButtons.OkCancel:
+                return (
+                    <>
+                        {footerButton(
+                            DialogResult.Ok,
+                            resolvedOkLabel,
+                            true,
+                            focusesConfirmButton,
+                        )}
+                        {footerButton(
+                            DialogResult.Cancelled,
+                            resolvedCancelLabel,
+                            false,
+                            focusesDismissingButton,
+                        )}
+                    </>
+                );
+            case DialogButtons.YesNo:
+                return (
+                    <>
+                        {footerButton(
+                            DialogResult.Yes,
+                            resolvedYesLabel,
+                            true,
+                            focusesConfirmButton,
+                        )}
+                        {footerButton(
+                            DialogResult.No,
+                            resolvedNoLabel,
+                            false,
+                            focusesDismissingButton,
+                        )}
+                    </>
+                );
+            case DialogButtons.YesNoCancel:
+                return (
+                    <>
+                        {footerButton(
+                            DialogResult.Yes,
+                            resolvedYesLabel,
+                            true,
+                            focusesConfirmButton,
+                        )}
+                        {footerButton(DialogResult.No, resolvedNoLabel, false, false)}
+                        {footerButton(
+                            DialogResult.Cancelled,
+                            resolvedCancelLabel,
+                            false,
+                            focusesDismissingButton,
+                        )}
+                    </>
+                );
+            default:
+                return null;
+        }
+    };
+
+    const dialogDocument = (
+        <AriaDialog className='cratis-dialog__document'>
+            <>
+                <header
+                    {...pt?.header}
+                    className={classNames('cratis-dialog__header', pt?.header?.className)}
+                    style={pt?.header?.style}
+                    data-cratis-part='header'
+                >
+                    <Heading
+                        {...pt?.title}
+                        slot='title'
+                        tabIndex={focusesTitle ? -1 : undefined}
+                        ref={titleRef}
+                        className={classNames(
+                            'cratis-dialog__title',
+                            pt?.title?.className,
+                        )}
+                        style={pt?.title?.style}
+                        data-cratis-part='title'
+                    >
+                        {title}
+                    </Heading>
+                    {allowsDismissal && (
+                        <button
+                            {...pt?.close}
+                            type='button'
+                            disabled={isBusy}
+                            className={classNames(
+                                'cratis-dialog__close',
+                                pt?.close?.className,
+                            )}
+                            data-cratis-part='close'
+                            data-disabled={isBusy || undefined}
+                            data-busy={isBusy || undefined}
+                            aria-label={resolvedCloseAriaLabel}
+                            onClick={() => void handleClose(DialogResult.Cancelled)}
+                        >
+                            <span aria-hidden='true'>×</span>
+                        </button>
+                    )}
+                </header>
+                <div
+                    {...pt?.content}
+                    className={classNames(
+                        'cratis-dialog__content',
+                        pt?.content?.className,
+                    )}
+                    style={{ ...pt?.content?.style, ...contentStyle }}
+                    data-cratis-part='content'
+                    data-open={visible || undefined}
+                    data-busy={isBusy || undefined}
+                >
+                    <fieldset
+                        className='cratis-dialog__busy-scope'
+                        data-cratis-part='busy-scope'
+                        data-busy={isBusy || undefined}
+                        disabled={isBusy}
+                        inert={isBusy}
+                        aria-busy={isBusy || undefined}
+                    >
+                        {children}
+                    </fieldset>
+                </div>
+                {buttons !== null && (
+                    <footer
+                        {...pt?.footer}
+                        className={classNames(
+                            'cratis-dialog__footer',
+                            pt?.footer?.className,
+                        )}
+                        style={pt?.footer?.style}
+                        data-cratis-part='footer'
+                    >
+                        <fieldset
+                            className='cratis-dialog__busy-scope cratis-dialog__busy-scope--footer'
+                            data-cratis-part='busy-scope'
+                            data-busy={isBusy || undefined}
+                            disabled={isBusy}
+                            inert={isBusy}
+                            aria-busy={isBusy || undefined}
+                        >
+                            {predefinedFooter()}
+                        </fieldset>
+                    </footer>
+                )}
+            </>
+        </AriaDialog>
+    );
+
+    const dialogStyle = { width, ...pt?.root?.style, ...style };
+
+    // useSyncExternalStore supplies the server snapshot during hydration, so this
+    // fallback is identical on the server and on the client's first render. React
+    // switches to the portaled React Aria modal only after hydration completes.
+    if (!isBrowser) {
+        if (!visible) return null;
+        return (
+            <div
+                {...pt?.backdrop}
+                className={classNames('cratis-dialog__backdrop', pt?.backdrop?.className)}
+                style={{
+                    zIndex: 'var(--cratis-z-index-dialog)',
+                    ...pt?.backdrop?.style,
+                }}
+                data-cratis-part='backdrop'
+                data-open={visible || undefined}
+                data-busy={isBusy || undefined}
+            >
+                <div
+                    {...pt?.positioner}
+                    className={classNames(
+                        'cratis-dialog__positioner',
+                        pt?.positioner?.className,
+                    )}
+                    style={pt?.positioner?.style}
+                    data-cratis-part='positioner'
+                    data-open={visible || undefined}
+                    data-busy={isBusy || undefined}
+                >
+                    <section
+                        {...pt?.root}
+                        className={classNames(
+                            'cratis-dialog',
+                            pt?.root?.className,
+                            className,
+                        )}
+                        style={dialogStyle}
+                        data-cratis-part='root'
+                        data-open={visible || undefined}
+                        data-busy={isBusy || undefined}
+                    >
+                        {dialogDocument}
+                    </section>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <ModalOverlay
+            {...pt?.backdrop}
+            isOpen={visible}
+            onOpenChange={(open) => {
+                if (!open && !isBusy) void handleClose(DialogResult.Cancelled);
+            }}
+            isDismissable={isDismissable}
+            isKeyboardDismissDisabled={!isDismissable}
+            className={classNames('cratis-dialog__backdrop', pt?.backdrop?.className)}
+            style={{
+                zIndex: 'var(--cratis-z-index-dialog)',
+                ...pt?.backdrop?.style,
+            }}
+            data-cratis-part='backdrop'
+            data-open={visible || undefined}
+            data-busy={isBusy || undefined}
+        >
+            <div
+                {...pt?.positioner}
+                className={classNames(
+                    'cratis-dialog__positioner',
+                    pt?.positioner?.className,
+                )}
+                style={pt?.positioner?.style}
+                data-cratis-part='positioner'
+                data-open={visible || undefined}
+                data-busy={isBusy || undefined}
+            >
+                <Modal
+                    {...pt?.root}
+                    className={classNames(
+                        'cratis-dialog',
+                        pt?.root?.className,
+                        className,
+                    )}
+                    style={dialogStyle}
+                    data-cratis-part='root'
+                    data-open={visible || undefined}
+                    data-busy={isBusy || undefined}
+                >
+                    {dialogDocument}
+                </Modal>
+            </div>
+        </ModalOverlay>
+    );
+};
diff --git a/Source/Dropdown/DropdownImplementation.tsx b/Source/Dropdown/DropdownImplementation.tsx
new file mode 100644
index 00000000..6c902b89
--- /dev/null
+++ b/Source/Dropdown/DropdownImplementation.tsx
@@ -0,0 +1,712 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { useState } from 'react';
+import type { JSX, Key } from 'react';
+import {
+    Button as AriaButton,
+    ListBox,
+    ListBoxItem,
+    Popover,
+    Select as AriaSelect,
+    SelectValue,
+} from 'react-aria-components/Select';
+import {
+    Button as ComboBoxButton,
+    ComboBox,
+    ComboBoxValue,
+    Input,
+    ListBox as ComboBoxListBox,
+    ListBoxItem as ComboBoxListBoxItem,
+    Popover as ComboBoxPopover,
+} from 'react-aria-components/ComboBox';
+import { useCratisComponentsConfig } from '../Common/CratisComponentsProvider';
+import type { DropdownProps } from './Dropdown';
+import {
+    asReactAriaButtonProps,
+    asReactAriaListBoxItemProps,
+    asReactAriaListBoxProps,
+} from '../Common/reactAriaProps';
+
+type DropdownOptionValue =
+    string | number | boolean | bigint | symbol | object | null | undefined;
+
+interface ResolvedOption {
+    key: string;
+    label: string;
+    value: unknown;
+    disabled: boolean;
+}
+
+const conventionalField = (
+    options: unknown[] | undefined,
+    field: 'label' | 'value',
+): string | undefined => {
+    const first = options?.[0];
+    return first !== null && typeof first === 'object' && field in first
+        ? field
+        : undefined;
+};
+
+const optionValue = (value: unknown): DropdownOptionValue => {
+    if (typeof value === 'function') return String(value);
+    return value as DropdownOptionValue;
+};
+
+const readField = (option: unknown, field: string | undefined): DropdownOptionValue => {
+    if (!field || option === null || typeof option !== 'object')
+        return optionValue(option);
+    return field in option
+        ? optionValue((option as Record<string, unknown>)[field])
+        : optionValue(option);
+};
+
+const resolveOptions = (
+    options: unknown[] | undefined,
+    optionLabel: string | undefined,
+    optionValue: string | undefined,
+): ResolvedOption[] =>
+    (options ?? []).map((option, index) => {
+        const value = readField(option, optionValue);
+        const labelValue = readField(option, optionLabel);
+        const keyValue = value ?? index;
+        const disabled =
+            option !== null && typeof option === 'object' && 'disabled' in option
+                ? Boolean((option as { disabled?: unknown }).disabled)
+                : false;
+
+        return {
+            key: `${typeof keyValue}:${String(keyValue)}:${index}`,
+            label: String(labelValue ?? value ?? ''),
+            value,
+            disabled,
+        };
+    });
+
+const classNames = (...values: Array<string | undefined>) =>
+    values.filter(Boolean).join(' ');
+
+const renderTriggerWithOpenState = (props: JSX.IntrinsicElements['button']) => (
+    <button
+        {...props}
+        data-open={
+            props['aria-expanded'] === true || props['aria-expanded'] === 'true'
+                ? true
+                : undefined
+        }
+    />
+);
+
+/** A renderer-independent single or multiple select with stable Cratis parts. */
+export const DropdownImplementation = <T = unknown,>({
+    value,
+    options,
+    optionLabel = conventionalField(options, 'label'),
+    optionValue = conventionalField(options, 'value'),
+    placeholder,
+    filter,
+    filterPlaceholder,
+    multiple,
+    showClear,
+    invalid,
+    disabled,
+    className,
+    style,
+    id,
+    inputId,
+    panelClassName,
+    name,
+    tabIndex,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledby,
+    'aria-describedby': ariaDescribedby,
+    ariaLabel: ariaLabelAlias,
+    ariaLabelledBy,
+    ariaDescribedBy,
+    ariaInvalid,
+    onChange,
+    onBlur,
+    pt,
+}: DropdownProps<T>) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const { messages } = useCratisComponentsConfig();
+    const dropdownMessages = messages?.dropdown;
+    const showOptionsLabel =
+        pt?.trigger?.['aria-label'] ??
+        pt?.select?.['aria-label'] ??
+        dropdownMessages?.showOptions ??
+        'Show options';
+    const clearSelectionLabel =
+        pt?.clear?.['aria-label'] ??
+        dropdownMessages?.clearSelection ??
+        'Clear selection';
+    const resolvedOptions = resolveOptions(options, optionLabel, optionValue);
+    const selectedOption = resolvedOptions.find((option) =>
+        Object.is(option.value, value),
+    );
+    const selectedKey = selectedOption?.key ?? null;
+    const effectiveAriaLabel =
+        ariaLabel ??
+        ariaLabelAlias ??
+        pt?.input?.['aria-label'] ??
+        pt?.select?.['aria-label'];
+    const effectiveAriaLabelledby =
+        ariaLabelledby ??
+        ariaLabelledBy ??
+        pt?.input?.['aria-labelledby'] ??
+        pt?.select?.['aria-labelledby'];
+    const effectiveAriaDescribedby =
+        ariaDescribedby ??
+        ariaDescribedBy ??
+        pt?.input?.['aria-describedby'] ??
+        pt?.select?.['aria-describedby'];
+    const inputAriaInvalid = pt?.input?.['aria-invalid'] ?? pt?.select?.['aria-invalid'];
+    const effectiveInvalid =
+        invalid ??
+        ariaInvalid ??
+        (inputAriaInvalid === true ||
+            inputAriaInvalid === 'true' ||
+            inputAriaInvalid === 'grammar' ||
+            inputAriaInvalid === 'spelling');
+    const rootClassName = classNames(
+        'cratis-dropdown',
+        pt?.root?.className,
+        pt?.select?.className,
+        className,
+    );
+    const triggerId = id ?? inputId ?? pt?.trigger?.id ?? pt?.input?.id ?? pt?.select?.id;
+
+    const selectOption = (key: Key | null) => {
+        const option = resolvedOptions.find((candidate) => candidate.key === String(key));
+        onChange?.((option?.value ?? null) as T, { source: 'user' });
+    };
+    const selectOptions = (keys: readonly Key[]) => {
+        const selectedKeys = new Set(keys.map(String));
+        const values = resolvedOptions
+            .filter((option) => selectedKeys.has(option.key))
+            .map((option) => option.value);
+        onChange?.(values as T, { source: 'user' });
+    };
+    // React Aria's Select trigger context does not forward aria-invalid from its Button child.
+    // Keep the Cratis validation contract on the actual focusable control after context props merge.
+    const applyTriggerState = (element: HTMLButtonElement | null) => {
+        if (!element) return;
+        if (effectiveInvalid) element.setAttribute('aria-invalid', 'true');
+        else element.removeAttribute('aria-invalid');
+        if (tabIndex !== undefined) element.tabIndex = tabIndex;
+    };
+
+    if (multiple) {
+        const selectedValues = Array.isArray(value) ? value : [];
+        const selectedKeys = resolvedOptions
+            .filter((option) =>
+                selectedValues.some((selected) => Object.is(selected, option.value)),
+            )
+            .map((option) => option.key);
+
+        if (filter) {
+            return (
+                <span
+                    {...pt?.root}
+                    className={rootClassName}
+                    data-cratis-part='root'
+                    data-invalid={effectiveInvalid || undefined}
+                    data-disabled={disabled || undefined}
+                    data-open={isOpen || undefined}
+                    data-selected={selectedKeys.length > 0 || undefined}
+                    style={{ ...pt?.root?.style, ...pt?.select?.style, ...style }}
+                    onBlur={onBlur}
+                >
+                    <ComboBox
+                        selectionMode='multiple'
+                        onOpenChange={setIsOpen}
+                        value={selectedKeys}
+                        onChange={selectOptions}
+                        isDisabled={disabled}
+                        isInvalid={effectiveInvalid}
+                        name={name}
+                        aria-label={effectiveAriaLabel}
+                        aria-labelledby={effectiveAriaLabelledby}
+                        aria-describedby={effectiveAriaDescribedby}
+                        allowsEmptyCollection
+                        className='cratis-dropdown__combobox'
+                    >
+                        <ComboBoxValue
+                            {...pt?.value}
+                            placeholder={placeholder}
+                            className={classNames(
+                                'cratis-dropdown__value',
+                                pt?.value?.className,
+                            )}
+                            data-cratis-part='value'
+                            data-disabled={disabled || undefined}
+                            data-invalid={effectiveInvalid || undefined}
+                            data-open={isOpen || undefined}
+                            data-selected={selectedKeys.length > 0 || undefined}
+                        />
+                        <Input
+                            {...pt?.filter}
+                            id={triggerId}
+                            placeholder={filterPlaceholder ?? placeholder}
+                            tabIndex={tabIndex}
+                            aria-invalid={effectiveInvalid || undefined}
+                            className={classNames(
+                                'cratis-dropdown__filter',
+                                pt?.input?.className,
+                                pt?.filter?.className,
+                            )}
+                            style={{ ...pt?.input?.style, ...pt?.filter?.style }}
+                            data-cratis-part='filter'
+                            data-disabled={disabled || undefined}
+                            data-invalid={effectiveInvalid || undefined}
+                            data-open={isOpen || undefined}
+                        />
+                        <ComboBoxButton
+                            {...asReactAriaButtonProps(pt?.trigger)}
+                            className={classNames(
+                                'cratis-dropdown__indicator',
+                                pt?.trigger?.className,
+                            )}
+                            data-cratis-part='trigger'
+                            data-disabled={disabled || undefined}
+                            data-invalid={effectiveInvalid || undefined}
+                            data-selected={selectedKeys.length > 0 || undefined}
+                            render={renderTriggerWithOpenState}
+                            aria-label={showOptionsLabel}
+                        >
+                            <span aria-hidden='true'>⌄</span>
+                        </ComboBoxButton>
+                        {showClear && selectedKeys.length > 0 && (
+                            <button
+                                {...pt?.clear}
+                                type='button'
+                                disabled={disabled}
+                                className={classNames(
+                                    'cratis-dropdown__clear',
+                                    pt?.clear?.className,
+                                )}
+                                data-cratis-part='clear'
+                                data-disabled={disabled || undefined}
+                                aria-label={clearSelectionLabel}
+                                onClick={(event) =>
+                                    onChange?.([] as T, {
+                                        source: 'user',
+                                        nativeEvent: event.nativeEvent,
+                                    })
+                                }
+                            >
+                                <span aria-hidden='true'>×</span>
+                            </button>
+                        )}
+                        <ComboBoxPopover
+                            {...pt?.popover}
+                            className={classNames(
+                                'cratis-dropdown__popover',
+                                pt?.popover?.className,
+                                panelClassName,
+                            )}
+                            style={{
+                                zIndex: 'var(--cratis-z-index-overlay)',
+                                ...pt?.popover?.style,
+                            }}
+                            data-cratis-part='popover'
+                            data-open
+                        >
+                            <ComboBoxListBox
+                                {...asReactAriaListBoxProps<ResolvedOption>(pt?.listbox)}
+                                items={resolvedOptions}
+                                className={classNames(
+                                    'cratis-dropdown__listbox',
+                                    pt?.listbox?.className,
+                                )}
+                                data-cratis-part='listbox'
+                                data-open
+                            >
+                                {(option) => (
+                                    <ComboBoxListBoxItem
+                                        {...asReactAriaListBoxItemProps<ResolvedOption>(
+                                            pt?.option,
+                                        )}
+                                        id={option.key}
+                                        textValue={option.label}
+                                        isDisabled={option.disabled}
+                                        className={classNames(
+                                            'cratis-dropdown__option',
+                                            pt?.option?.className,
+                                        )}
+                                        data-cratis-part='option'
+                                        data-disabled={option.disabled || undefined}
+                                        data-selected={
+                                            selectedKeys.includes(option.key) || undefined
+                                        }
+                                    >
+                                        {option.label}
+                                    </ComboBoxListBoxItem>
+                                )}
+                            </ComboBoxListBox>
+                        </ComboBoxPopover>
+                    </ComboBox>
+                </span>
+            );
+        }
+
+        return (
+            <span
+                {...pt?.root}
+                className={rootClassName}
+                data-cratis-part='root'
+                data-invalid={effectiveInvalid || undefined}
+                data-disabled={disabled || undefined}
+                data-selected={selectedKeys.length > 0 || undefined}
+                style={{ ...pt?.root?.style, ...pt?.select?.style, ...style }}
+                onBlur={onBlur}
+            >
+                <select
+                    {...pt?.multiple}
+                    id={triggerId ?? pt?.multiple?.id}
+                    name={name}
+                    multiple
+                    disabled={disabled}
+                    value={selectedKeys}
+                    tabIndex={tabIndex}
+                    aria-label={effectiveAriaLabel}
+                    aria-labelledby={effectiveAriaLabelledby}
+                    aria-describedby={effectiveAriaDescribedby}
+                    aria-invalid={effectiveInvalid || undefined}
+                    className={classNames(
+                        'cratis-dropdown__multiple',
+                        pt?.input?.className,
+                        pt?.multiple?.className,
+                    )}
+                    data-cratis-part='multiple'
+                    data-disabled={disabled || undefined}
+                    data-invalid={effectiveInvalid || undefined}
+                    data-selected={selectedKeys.length > 0 || undefined}
+                    onChange={(event) => {
+                        const keys = Array.from(
+                            event.currentTarget.selectedOptions,
+                            (option) => option.value,
+                        );
+                        const values = resolvedOptions
+                            .filter((option) => keys.includes(option.key))
+                            .map((option) => option.value);
+                        onChange?.(values as T, {
+                            source: 'user',
+                            nativeEvent: event.nativeEvent,
+                        });
+                    }}
+                >
+                    {resolvedOptions.map((option) => (
+                        <option
+                            key={option.key}
+                            value={option.key}
+                            disabled={option.disabled}
+                            data-disabled={option.disabled || undefined}
+                            data-selected={selectedKeys.includes(option.key) || undefined}
+                        >
+                            {option.label}
+                        </option>
+                    ))}
+                </select>
+                {showClear && selectedKeys.length > 0 && (
+                    <button
+                        {...pt?.clear}
+                        type='button'
+                        disabled={disabled}
+                        className={classNames(
+                            'cratis-dropdown__clear',
+                            pt?.clear?.className,
+                        )}
+                        data-cratis-part='clear'
+                        data-disabled={disabled || undefined}
+                        aria-label={clearSelectionLabel}
+                        onClick={(event) =>
+                            onChange?.([] as T, {
+                                source: 'user',
+                                nativeEvent: event.nativeEvent,
+                            })
+                        }
+                    >
+                        <span aria-hidden='true'>×</span>
+                    </button>
+                )}
+            </span>
+        );
+    }
+
+    if (filter) {
+        return (
+            <span
+                {...pt?.root}
+                className={rootClassName}
+                data-cratis-part='root'
+                data-invalid={effectiveInvalid || undefined}
+                data-disabled={disabled || undefined}
+                data-open={isOpen || undefined}
+                data-selected={selectedKey !== null || undefined}
+                style={{ ...pt?.root?.style, ...pt?.select?.style, ...style }}
+                onBlur={onBlur}
+            >
+                <ComboBox
+                    onOpenChange={setIsOpen}
+                    value={selectedKey}
+                    onChange={selectOption}
+                    isDisabled={disabled}
+                    isInvalid={effectiveInvalid}
+                    name={name}
+                    aria-label={effectiveAriaLabel}
+                    aria-labelledby={effectiveAriaLabelledby}
+                    aria-describedby={effectiveAriaDescribedby}
+                    allowsEmptyCollection
+                    className='cratis-dropdown__combobox'
+                >
+                    <Input
+                        {...pt?.filter}
+                        id={triggerId}
+                        placeholder={filterPlaceholder ?? placeholder}
+                        tabIndex={tabIndex}
+                        aria-invalid={effectiveInvalid || undefined}
+                        className={classNames(
+                            'cratis-dropdown__filter',
+                            pt?.input?.className,
+                            pt?.filter?.className,
+                        )}
+                        style={{ ...pt?.input?.style, ...pt?.filter?.style }}
+                        data-cratis-part='filter'
+                        data-disabled={disabled || undefined}
+                        data-invalid={effectiveInvalid || undefined}
+                        data-open={isOpen || undefined}
+                    />
+                    <ComboBoxButton
+                        {...asReactAriaButtonProps(pt?.trigger)}
+                        className={classNames(
+                            'cratis-dropdown__indicator',
+                            pt?.trigger?.className,
+                        )}
+                        data-cratis-part='trigger'
+                        data-disabled={disabled || undefined}
+                        data-invalid={effectiveInvalid || undefined}
+                        data-selected={selectedKey !== null || undefined}
+                        render={renderTriggerWithOpenState}
+                        aria-label={showOptionsLabel}
+                    >
+                        <span aria-hidden='true'>⌄</span>
+                    </ComboBoxButton>
+                    {showClear && selectedKey !== null && (
+                        <button
+                            {...pt?.clear}
+                            type='button'
+                            disabled={disabled}
+                            className={classNames(
+                                'cratis-dropdown__clear',
+                                pt?.clear?.className,
+                            )}
+                            data-cratis-part='clear'
+                            data-disabled={disabled || undefined}
+                            aria-label={clearSelectionLabel}
+                            onClick={(event) =>
+                                onChange?.(null as T, {
+                                    source: 'user',
+                                    nativeEvent: event.nativeEvent,
+                                })
+                            }
+                        >
+                            <span aria-hidden='true'>×</span>
+                        </button>
+                    )}
+                    <ComboBoxPopover
+                        {...pt?.popover}
+                        className={classNames(
+                            'cratis-dropdown__popover',
+                            pt?.popover?.className,
+                            panelClassName,
+                        )}
+                        style={{
+                            zIndex: 'var(--cratis-z-index-overlay)',
+                            ...pt?.popover?.style,
+                        }}
+                        data-cratis-part='popover'
+                        data-open
+                    >
+                        <ComboBoxListBox
+                            {...asReactAriaListBoxProps<ResolvedOption>(pt?.listbox)}
+                            items={resolvedOptions}
+                            className={classNames(
+                                'cratis-dropdown__listbox',
+                                pt?.listbox?.className,
+                            )}
+                            data-cratis-part='listbox'
+                            data-open
+                        >
+                            {(option) => (
+                                <ComboBoxListBoxItem
+                                    {...asReactAriaListBoxItemProps<ResolvedOption>(
+                                        pt?.option,
+                                    )}
+                                    id={option.key}
+                                    textValue={option.label}
+                                    isDisabled={option.disabled}
+                                    className={classNames(
+                                        'cratis-dropdown__option',
+                                        pt?.option?.className,
+                                    )}
+                                    data-cratis-part='option'
+                                    data-disabled={option.disabled || undefined}
+                                    data-selected={
+                                        option.key === selectedKey || undefined
+                                    }
+                                >
+                                    {option.label}
+                                </ComboBoxListBoxItem>
+                            )}
+                        </ComboBoxListBox>
+                    </ComboBoxPopover>
+                </ComboBox>
+            </span>
+        );
+    }
+
+    return (
+        <span
+            {...pt?.root}
+            className={rootClassName}
+            data-cratis-part='root'
+            data-invalid={effectiveInvalid || undefined}
+            data-disabled={disabled || undefined}
+            data-open={isOpen || undefined}
+            data-selected={selectedKey !== null || undefined}
+            style={{ ...pt?.root?.style, ...pt?.select?.style, ...style }}
+            onBlur={onBlur}
+        >
+            <AriaSelect
+                onOpenChange={setIsOpen}
+                value={selectedKey}
+                onChange={selectOption}
+                isDisabled={disabled}
+                isInvalid={effectiveInvalid}
+                name={name}
+                aria-label={effectiveAriaLabel}
+                aria-labelledby={effectiveAriaLabelledby}
+                aria-describedby={effectiveAriaDescribedby}
+                className='cratis-dropdown__select'
+            >
+                <AriaButton
+                    {...asReactAriaButtonProps(pt?.trigger)}
+                    ref={applyTriggerState}
+                    id={triggerId}
+                    excludeFromTabOrder={tabIndex === -1}
+                    aria-invalid={effectiveInvalid || undefined}
+                    className={classNames(
+                        'cratis-dropdown__trigger',
+                        pt?.input?.className,
+                        pt?.trigger?.className,
+                    )}
+                    style={{ ...pt?.input?.style, ...pt?.trigger?.style }}
+                    data-cratis-part='trigger'
+                    data-disabled={disabled || undefined}
+                    data-invalid={effectiveInvalid || undefined}
+                    data-selected={selectedKey !== null || undefined}
+                    render={renderTriggerWithOpenState}
+                >
+                    <SelectValue
+                        {...pt?.value}
+                        className={classNames(
+                            'cratis-dropdown__value',
+                            pt?.value?.className,
+                        )}
+                        data-cratis-part='value'
+                        data-disabled={disabled || undefined}
+                        data-invalid={effectiveInvalid || undefined}
+                        data-open={isOpen || undefined}
+                        data-selected={selectedKey !== null || undefined}
+                    >
+                        {selectedOption?.label ?? placeholder}
+                    </SelectValue>
+                    <span
+                        {...pt?.indicator}
+                        className={classNames(
+                            'cratis-dropdown__indicator',
+                            pt?.indicator?.className,
+                        )}
+                        data-cratis-part='indicator'
+                        data-disabled={disabled || undefined}
+                        data-invalid={effectiveInvalid || undefined}
+                        data-open={isOpen || undefined}
+                        aria-hidden='true'
+                    >
+                        ⌄
+                    </span>
+                </AriaButton>
+                {showClear && selectedKey !== null && (
+                    <button
+                        {...pt?.clear}
+                        type='button'
+                        disabled={disabled}
+                        className={classNames(
+                            'cratis-dropdown__clear',
+                            pt?.clear?.className,
+                        )}
+                        data-cratis-part='clear'
+                        data-disabled={disabled || undefined}
+                        aria-label={clearSelectionLabel}
+                        onClick={(event) =>
+                            onChange?.(null as T, {
+                                source: 'user',
+                                nativeEvent: event.nativeEvent,
+                            })
+                        }
+                    >
+                        <span aria-hidden='true'>×</span>
+                    </button>
+                )}
+                <Popover
+                    {...pt?.popover}
+                    className={classNames(
+                        'cratis-dropdown__popover',
+                        pt?.popover?.className,
+                        panelClassName,
+                    )}
+                    style={{
+                        zIndex: 'var(--cratis-z-index-overlay)',
+                        ...pt?.popover?.style,
+                    }}
+                    data-cratis-part='popover'
+                    data-open
+                >
+                    <ListBox
+                        {...asReactAriaListBoxProps<ResolvedOption>(pt?.listbox)}
+                        items={resolvedOptions}
+                        className={classNames(
+                            'cratis-dropdown__listbox',
+                            pt?.listbox?.className,
+                        )}
+                        data-cratis-part='listbox'
+                        data-open
+                    >
+                        {(option) => (
+                            <ListBoxItem
+                                {...asReactAriaListBoxItemProps<ResolvedOption>(
+                                    pt?.option,
+                                )}
+                                id={option.key}
+                                textValue={option.label}
+                                isDisabled={option.disabled}
+                                className={classNames(
+                                    'cratis-dropdown__option',
+                                    pt?.option?.className,
+                                )}
+                                data-cratis-part='option'
+                                data-disabled={option.disabled || undefined}
+                                data-selected={option.key === selectedKey || undefined}
+                            >
+                                {option.label}
+                            </ListBoxItem>
+                        )}
+                    </ListBox>
+                </Popover>
+            </AriaSelect>
+        </span>
+    );
+};
+
+DropdownImplementation.displayName = 'DropdownImplementation';

From e9c762208cc6cecf9f4498d5f19ecd8f2e1eeeab Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 21:16:47 +0200
Subject: [PATCH 195/267] pi-agent: Self-host atomic renderer slots

---
 Source/Common/DatePickerInput.tsx             | 437 +----------
 .../Common/DatePickerInputImplementation.tsx  | 521 ++++++-------
 Source/Common/Tooltip.tsx                     |  53 +-
 Source/Common/TooltipImplementation.tsx       |  38 +-
 Source/DataTables/TablePaginator.tsx          | 116 +--
 Source/Dialogs/Dialog.tsx                     | 405 +---------
 Source/Dialogs/DialogImplementation.tsx       |  77 +-
 Source/Dropdown/Dropdown.tsx                  | 715 +-----------------
 Source/Dropdown/DropdownImplementation.tsx    | 594 ++++++++-------
 Source/package.json                           |   1 +
 Source/renderer/README.md                     |  28 +-
 Source/renderer/coreSlots.ts                  |  36 +-
 .../for_resolution/when_resolving_slots.tsx   |   7 +-
 .../when_defining_core_slots.ts               |  25 +-
 .../when_routing_atomic_slots.tsx             | 277 +++++++
 .../when_using_atomic_overlay_environment.tsx | 344 +++++++++
 Source/renderer/index.ts                      |   4 +-
 Source/scripts/generate-parts.mjs             |  14 +-
 Source/scripts/verify-package-graph.mjs       |  11 +-
 Source/scripts/verify-renderer-contracts.mjs  | 157 +++-
 yarn.lock                                     |   1 +
 21 files changed, 1535 insertions(+), 2326 deletions(-)
 create mode 100644 Source/renderer/for_self_hosting/when_routing_atomic_slots.tsx
 create mode 100644 Source/renderer/for_self_hosting/when_using_atomic_overlay_environment.tsx

diff --git a/Source/Common/DatePickerInput.tsx b/Source/Common/DatePickerInput.tsx
index 9fc2854b..a1db7f90 100644
--- a/Source/Common/DatePickerInput.tsx
+++ b/Source/Common/DatePickerInput.tsx
@@ -1,39 +1,17 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { useState } from 'react';
 import type {
     ButtonHTMLAttributes,
     CSSProperties,
     FocusEventHandler,
     HTMLAttributes,
 } from 'react';
-import {
-    Button,
-    Calendar,
-    CalendarCell,
-    CalendarGrid,
-    CalendarGridBody,
-    CalendarGridHeader,
-    CalendarHeaderCell,
-    DateInput,
-    DatePicker as AriaDatePicker,
-    DateSegment,
-    Group,
-    Popover,
-    type DateValue,
-} from 'react-aria-components/DatePicker';
-import { Dialog } from 'react-aria-components/Dialog';
-import { Heading } from 'react-aria-components/Heading';
-import { useCratisComponentsConfig } from './CratisComponentsProvider';
 import type { ChangeHandler } from '../types/ChangeHandler';
-import { asReactAriaButtonProps } from './reactAriaProps';
-import {
-    fromDate,
-    getLocalTimeZone,
-    today,
-    toCalendarDate,
-} from '@internationalized/date';
+import { unstable_useSlot } from '../renderer/RendererContext';
+import { renderSlot } from '../renderer/renderSlot';
+import type { unstable_SlotDeclaration } from '../renderer/slots';
+import { DatePickerInputImplementation } from './DatePickerInputImplementation';
 
 interface DatePickerPartAttributes extends Omit<
     HTMLAttributes<HTMLElement>,
@@ -155,408 +133,17 @@ export interface DatePickerInputProps {
     'aria-describedby'?: string;
 }
 
-const classNames = (...values: Array<string | undefined>) =>
-    values.filter(Boolean).join(' ');
-
-const asDateValue = (
-    value: Date | null,
-    showTime: boolean | undefined,
-): DateValue | null => {
-    if (!value) return null;
-    const zoned = fromDate(value, getLocalTimeZone());
-    return showTime ? zoned : toCalendarDate(zoned);
-};
-
-const asDate = (value: DateValue | null): Date | null =>
-    value ? value.toDate(getLocalTimeZone()) : null;
+const coreDatePickerDeclaration = Object.freeze({
+    mode: 'atomic',
+    fidelity: 'native',
+    render: DatePickerInputImplementation,
+}) satisfies unstable_SlotDeclaration<'display.datePicker'>;
 
 /**
  * An internationalized date or date-time picker with Cratis-owned markup parts.
  * The public boundary remains `Date | null`; React Aria's calendar values stay internal.
  */
-export const DatePickerInput = ({
-    value,
-    onChange,
-    onBlur,
-    invalid,
-    disabled,
-    readOnly,
-    id,
-    showButtonBar,
-    placeholder,
-    showIcon = true,
-    showTime,
-    hourFormat,
-    minDate,
-    maxDate,
-    className,
-    style,
-    pt,
-    todayLabel,
-    clearLabel,
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledby,
-    'aria-describedby': ariaDescribedby,
-}: DatePickerInputProps) => {
-    const [isPickerOpen, setIsPickerOpen] = useState(false);
-    const { messages } = useCratisComponentsConfig();
-    const datePickerMessages = messages?.datePicker;
-    const resolvedTodayLabel = todayLabel ?? datePickerMessages?.today ?? 'Today';
-    const resolvedClearLabel = clearLabel ?? datePickerMessages?.clear ?? 'Clear';
-    const timeZone = getLocalTimeZone();
-    const minValue = asDateValue(minDate ?? null, showTime) ?? undefined;
-    const maxValue = asDateValue(maxDate ?? null, showTime) ?? undefined;
-    const todayDate = today(timeZone).toDate(timeZone);
-    // Compare the same granularity that the action emits. In date-time mode the Today action
-    // retains its existing local-midnight value, which can legitimately fall before a same-day
-    // minDate carrying a later time.
-    const todayValue = asDateValue(todayDate, showTime)!;
-    const isTodayOutOfBounds =
-        (minValue !== undefined && todayValue.compare(minValue) < 0) ||
-        (maxValue !== undefined && todayValue.compare(maxValue) > 0);
-    const rootClassName = classNames(
-        'cratis-date-picker',
-        pt?.root?.className,
-        className,
-    );
-    const inputId = id ?? pt?.input?.id;
-    const effectiveDisabled = disabled ?? pt?.input?.disabled ?? false;
-    const effectiveReadOnly = readOnly ?? pt?.input?.readOnly ?? false;
-    const effectiveInvalid = invalid ?? pt?.input?.['aria-invalid'] ?? false;
-    const effectivePlaceholder = placeholder ?? pt?.input?.placeholder;
-    const effectiveAriaLabel =
-        ariaLabel ??
-        pt?.input?.['aria-label'] ??
-        effectivePlaceholder ??
-        datePickerMessages?.label ??
-        'Date';
-    const effectiveAriaLabelledby = ariaLabelledby ?? pt?.input?.['aria-labelledby'];
-    const effectiveAriaDescribedby = ariaDescribedby ?? pt?.input?.['aria-describedby'];
-    const inputPartAttributes = {
-        ...pt?.input,
-        id: undefined,
-        className: undefined,
-        style: undefined,
-        disabled: undefined,
-        readOnly: undefined,
-        placeholder: undefined,
-        'aria-label': undefined,
-        'aria-labelledby': undefined,
-        'aria-describedby': undefined,
-        'aria-invalid': undefined,
-    };
-
-    return (
-        <div
-            {...pt?.root}
-            className={rootClassName}
-            style={{ ...pt?.root?.style, ...style }}
-            data-cratis-part='root'
-            data-invalid={effectiveInvalid || undefined}
-            data-disabled={effectiveDisabled || undefined}
-            data-readonly={effectiveReadOnly || undefined}
-            data-open={isPickerOpen || undefined}
-            data-selected={value !== null || undefined}
-            onBlur={onBlur}
-        >
-            <AriaDatePicker
-                value={asDateValue(value, showTime)}
-                onChange={(next) => onChange(asDate(next), { source: 'user' })}
-                isDisabled={effectiveDisabled}
-                isReadOnly={effectiveReadOnly}
-                isInvalid={effectiveInvalid}
-                onOpenChange={setIsPickerOpen}
-                minValue={minValue}
-                maxValue={maxValue}
-                granularity={showTime ? 'minute' : 'day'}
-                hourCycle={
-                    hourFormat === '12' ? 12 : hourFormat === '24' ? 24 : undefined
-                }
-                aria-label={effectiveAriaLabel}
-                aria-labelledby={effectiveAriaLabelledby}
-                aria-describedby={effectiveAriaDescribedby}
-                className='cratis-date-picker__picker'
-            >
-                {({ isOpen }) => (
-                    <>
-                        <Group
-                            {...pt?.group}
-                            id={inputId}
-                            aria-invalid={effectiveInvalid || undefined}
-                            className={classNames(
-                                'cratis-date-picker__group',
-                                pt?.group?.className,
-                            )}
-                            data-cratis-part='group'
-                            data-empty={value === null || undefined}
-                            render={(groupProps) => (
-                                <div
-                                    {...groupProps}
-                                    data-open={isOpen || undefined}
-                                    data-invalid={effectiveInvalid || undefined}
-                                    data-disabled={effectiveDisabled || undefined}
-                                    data-readonly={effectiveReadOnly || undefined}
-                                    data-selected={value !== null || undefined}
-                                />
-                            )}
-                        >
-                            <DateInput
-                                {...inputPartAttributes}
-                                className={classNames(
-                                    'cratis-date-picker__input',
-                                    pt?.input?.className,
-                                )}
-                                style={pt?.input?.style}
-                                data-cratis-part='input'
-                                data-placeholder={effectivePlaceholder}
-                                render={(inputProps) => (
-                                    <div
-                                        {...inputProps}
-                                        data-open={isOpen || undefined}
-                                        data-invalid={effectiveInvalid || undefined}
-                                        data-disabled={effectiveDisabled || undefined}
-                                        data-readonly={effectiveReadOnly || undefined}
-                                        data-selected={value !== null || undefined}
-                                    />
-                                )}
-                            >
-                                {(segment) => (
-                                    <DateSegment
-                                        {...pt?.segment}
-                                        segment={segment}
-                                        className={classNames(
-                                            'cratis-date-picker__segment',
-                                            pt?.segment?.className,
-                                        )}
-                                        data-cratis-part='segment'
-                                        render={(segmentProps) => (
-                                            <span
-                                                {...segmentProps}
-                                                data-invalid={
-                                                    effectiveInvalid || undefined
-                                                }
-                                                data-disabled={
-                                                    effectiveDisabled || undefined
-                                                }
-                                                data-readonly={
-                                                    effectiveReadOnly || undefined
-                                                }
-                                            />
-                                        )}
-                                    />
-                                )}
-                            </DateInput>
-                            {value === null && effectivePlaceholder && (
-                                <span
-                                    {...pt?.placeholder}
-                                    className={classNames(
-                                        'cratis-date-picker__placeholder',
-                                        pt?.placeholder?.className,
-                                    )}
-                                    data-cratis-part='placeholder'
-                                    aria-hidden='true'
-                                >
-                                    {effectivePlaceholder}
-                                </span>
-                            )}
-                            {showIcon && (
-                                <Button
-                                    {...asReactAriaButtonProps(pt?.trigger)}
-                                    isDisabled={effectiveDisabled || effectiveReadOnly}
-                                    className={classNames(
-                                        'cratis-date-picker__trigger',
-                                        pt?.trigger?.className,
-                                    )}
-                                    data-cratis-part='trigger'
-                                    render={(triggerProps) => (
-                                        <button
-                                            {...triggerProps}
-                                            data-open={isOpen || undefined}
-                                            data-invalid={effectiveInvalid || undefined}
-                                            data-disabled={
-                                                effectiveDisabled ||
-                                                effectiveReadOnly ||
-                                                undefined
-                                            }
-                                            data-readonly={effectiveReadOnly || undefined}
-                                            data-selected={value !== null || undefined}
-                                        />
-                                    )}
-                                    aria-label={
-                                        pt?.trigger?.['aria-label'] ??
-                                        datePickerMessages?.openCalendar ??
-                                        'Open calendar'
-                                    }
-                                >
-                                    <span aria-hidden='true'>▦</span>
-                                </Button>
-                            )}
-                        </Group>
-                        <Popover
-                            {...pt?.popover}
-                            className={classNames(
-                                'cratis-date-picker__popover',
-                                pt?.popover?.className,
-                            )}
-                            data-cratis-part='popover'
-                            data-open
-                            placement='bottom start'
-                        >
-                            <Dialog
-                                {...pt?.dialog}
-                                className={classNames(
-                                    'cratis-date-picker__dialog',
-                                    pt?.dialog?.className,
-                                )}
-                                data-cratis-part='dialog'
-                                data-open
-                            >
-                                <Calendar
-                                    {...pt?.calendar}
-                                    className={classNames(
-                                        'cratis-date-picker__calendar',
-                                        pt?.calendar?.className,
-                                    )}
-                                    data-cratis-part='calendar'
-                                    data-open
-                                >
-                                    <header
-                                        {...pt?.header}
-                                        className={classNames(
-                                            'cratis-date-picker__header',
-                                            pt?.header?.className,
-                                        )}
-                                        data-cratis-part='header'
-                                    >
-                                        <Button
-                                            {...asReactAriaButtonProps(pt?.previous)}
-                                            slot='previous'
-                                            className={classNames(
-                                                'cratis-date-picker__nav',
-                                                pt?.previous?.className,
-                                            )}
-                                            data-cratis-part='previous'
-                                            aria-label={
-                                                pt?.previous?.['aria-label'] ??
-                                                datePickerMessages?.previousMonth ??
-                                                'Previous month'
-                                            }
-                                        >
-                                            <span aria-hidden='true'>‹</span>
-                                        </Button>
-                                        <Heading
-                                            {...pt?.heading}
-                                            className={classNames(
-                                                'cratis-date-picker__heading',
-                                                pt?.heading?.className,
-                                            )}
-                                            data-cratis-part='heading'
-                                        />
-                                        <Button
-                                            {...asReactAriaButtonProps(pt?.next)}
-                                            slot='next'
-                                            className={classNames(
-                                                'cratis-date-picker__nav',
-                                                pt?.next?.className,
-                                            )}
-                                            data-cratis-part='next'
-                                            aria-label={
-                                                pt?.next?.['aria-label'] ??
-                                                datePickerMessages?.nextMonth ??
-                                                'Next month'
-                                            }
-                                        >
-                                            <span aria-hidden='true'>›</span>
-                                        </Button>
-                                    </header>
-                                    <CalendarGrid
-                                        {...pt?.grid}
-                                        className={classNames(
-                                            'cratis-date-picker__grid',
-                                            pt?.grid?.className,
-                                        )}
-                                        data-cratis-part='grid'
-                                    >
-                                        <CalendarGridHeader>
-                                            {(day) => (
-                                                <CalendarHeaderCell>
-                                                    {day}
-                                                </CalendarHeaderCell>
-                                            )}
-                                        </CalendarGridHeader>
-                                        <CalendarGridBody>
-                                            {(date) => (
-                                                <CalendarCell
-                                                    {...pt?.cell}
-                                                    date={date}
-                                                    className={classNames(
-                                                        'cratis-date-picker__cell',
-                                                        pt?.cell?.className,
-                                                    )}
-                                                    data-cratis-part='cell'
-                                                />
-                                            )}
-                                        </CalendarGridBody>
-                                    </CalendarGrid>
-                                </Calendar>
-                                {showButtonBar && (
-                                    <div
-                                        {...pt?.buttonBar}
-                                        className={classNames(
-                                            'cratis-date-picker__button-bar',
-                                            pt?.buttonBar?.className,
-                                        )}
-                                        data-cratis-part='button-bar'
-                                    >
-                                        <button
-                                            {...pt?.today}
-                                            type='button'
-                                            className={classNames(
-                                                'cratis-date-picker__action',
-                                                pt?.today?.className,
-                                            )}
-                                            data-cratis-part='today'
-                                            data-disabled={
-                                                isTodayOutOfBounds || undefined
-                                            }
-                                            disabled={isTodayOutOfBounds}
-                                            aria-disabled={
-                                                isTodayOutOfBounds || undefined
-                                            }
-                                            onClick={(event) => {
-                                                if (isTodayOutOfBounds) return;
-                                                onChange(todayDate, {
-                                                    source: 'user',
-                                                    nativeEvent: event.nativeEvent,
-                                                });
-                                            }}
-                                        >
-                                            {resolvedTodayLabel}
-                                        </button>
-                                        <button
-                                            {...pt?.clear}
-                                            type='button'
-                                            className={classNames(
-                                                'cratis-date-picker__action',
-                                                pt?.clear?.className,
-                                            )}
-                                            data-cratis-part='clear'
-                                            onClick={(event) =>
-                                                onChange(null, {
-                                                    source: 'user',
-                                                    nativeEvent: event.nativeEvent,
-                                                })
-                                            }
-                                        >
-                                            {resolvedClearLabel}
-                                        </button>
-                                    </div>
-                                )}
-                            </Dialog>
-                        </Popover>
-                    </>
-                )}
-            </AriaDatePicker>
-        </div>
-    );
+export const DatePickerInput = (props: DatePickerInputProps) => {
+    const declaration = unstable_useSlot('display.datePicker', coreDatePickerDeclaration);
+    return renderSlot(declaration, props);
 };
diff --git a/Source/Common/DatePickerInputImplementation.tsx b/Source/Common/DatePickerInputImplementation.tsx
index 1332a3f9..9cd3f56d 100644
--- a/Source/Common/DatePickerInputImplementation.tsx
+++ b/Source/Common/DatePickerInputImplementation.tsx
@@ -19,6 +19,8 @@ import {
 } from 'react-aria-components/DatePicker';
 import { Dialog } from 'react-aria-components/Dialog';
 import { Heading } from 'react-aria-components/Heading';
+import { UNSAFE_PortalProvider } from 'react-aria/PortalProvider';
+import { unstable_useOverlayEnvironment } from '../renderer/RendererContext';
 import { useCratisComponentsConfig } from './CratisComponentsProvider';
 import { asReactAriaButtonProps } from './reactAriaProps';
 import {
@@ -73,6 +75,7 @@ export const DatePickerInputImplementation = ({
     'aria-describedby': ariaDescribedby,
 }: DatePickerInputProps) => {
     const [isPickerOpen, setIsPickerOpen] = useState(false);
+    const overlayEnvironment = unstable_useOverlayEnvironment();
     const { messages } = useCratisComponentsConfig();
     const datePickerMessages = messages?.datePicker;
     const resolvedTodayLabel = todayLabel ?? datePickerMessages?.today ?? 'Today';
@@ -133,59 +136,40 @@ export const DatePickerInputImplementation = ({
             data-selected={value !== null || undefined}
             onBlur={onBlur}
         >
-            <AriaDatePicker
-                value={asDateValue(value, showTime)}
-                onChange={(next) => onChange(asDate(next), { source: 'user' })}
-                isDisabled={effectiveDisabled}
-                isReadOnly={effectiveReadOnly}
-                isInvalid={effectiveInvalid}
-                onOpenChange={setIsPickerOpen}
-                minValue={minValue}
-                maxValue={maxValue}
-                granularity={showTime ? 'minute' : 'day'}
-                hourCycle={
-                    hourFormat === '12' ? 12 : hourFormat === '24' ? 24 : undefined
-                }
-                aria-label={effectiveAriaLabel}
-                aria-labelledby={effectiveAriaLabelledby}
-                aria-describedby={effectiveAriaDescribedby}
-                className='cratis-date-picker__picker'
-            >
-                {({ isOpen }) => (
-                    <>
-                        <Group
-                            {...pt?.group}
-                            id={inputId}
-                            aria-invalid={effectiveInvalid || undefined}
-                            className={classNames(
-                                'cratis-date-picker__group',
-                                pt?.group?.className,
-                            )}
-                            data-cratis-part='group'
-                            data-empty={value === null || undefined}
-                            render={(groupProps) => (
-                                <div
-                                    {...groupProps}
-                                    data-open={isOpen || undefined}
-                                    data-invalid={effectiveInvalid || undefined}
-                                    data-disabled={effectiveDisabled || undefined}
-                                    data-readonly={effectiveReadOnly || undefined}
-                                    data-selected={value !== null || undefined}
-                                />
-                            )}
-                        >
-                            <DateInput
-                                {...inputPartAttributes}
+            <UNSAFE_PortalProvider getContainer={overlayEnvironment.getContainer}>
+                <AriaDatePicker
+                    value={asDateValue(value, showTime)}
+                    onChange={(next) => onChange(asDate(next), { source: 'user' })}
+                    isDisabled={effectiveDisabled}
+                    isReadOnly={effectiveReadOnly}
+                    isInvalid={effectiveInvalid}
+                    onOpenChange={setIsPickerOpen}
+                    minValue={minValue}
+                    maxValue={maxValue}
+                    granularity={showTime ? 'minute' : 'day'}
+                    hourCycle={
+                        hourFormat === '12' ? 12 : hourFormat === '24' ? 24 : undefined
+                    }
+                    aria-label={effectiveAriaLabel}
+                    aria-labelledby={effectiveAriaLabelledby}
+                    aria-describedby={effectiveAriaDescribedby}
+                    className='cratis-date-picker__picker'
+                >
+                    {({ isOpen }) => (
+                        <>
+                            <Group
+                                {...pt?.group}
+                                id={inputId}
+                                aria-invalid={effectiveInvalid || undefined}
                                 className={classNames(
-                                    'cratis-date-picker__input',
-                                    pt?.input?.className,
+                                    'cratis-date-picker__group',
+                                    pt?.group?.className,
                                 )}
-                                style={pt?.input?.style}
-                                data-cratis-part='input'
-                                data-placeholder={effectivePlaceholder}
-                                render={(inputProps) => (
+                                data-cratis-part='group'
+                                data-empty={value === null || undefined}
+                                render={(groupProps) => (
                                     <div
-                                        {...inputProps}
+                                        {...groupProps}
                                         data-open={isOpen || undefined}
                                         data-invalid={effectiveInvalid || undefined}
                                         data-disabled={effectiveDisabled || undefined}
@@ -194,243 +178,272 @@ export const DatePickerInputImplementation = ({
                                     />
                                 )}
                             >
-                                {(segment) => (
-                                    <DateSegment
-                                        {...pt?.segment}
-                                        segment={segment}
+                                <DateInput
+                                    {...inputPartAttributes}
+                                    className={classNames(
+                                        'cratis-date-picker__input',
+                                        pt?.input?.className,
+                                    )}
+                                    style={pt?.input?.style}
+                                    data-cratis-part='input'
+                                    data-placeholder={effectivePlaceholder}
+                                    render={(inputProps) => (
+                                        <div
+                                            {...inputProps}
+                                            data-open={isOpen || undefined}
+                                            data-invalid={effectiveInvalid || undefined}
+                                            data-disabled={effectiveDisabled || undefined}
+                                            data-readonly={effectiveReadOnly || undefined}
+                                            data-selected={value !== null || undefined}
+                                        />
+                                    )}
+                                >
+                                    {(segment) => (
+                                        <DateSegment
+                                            {...pt?.segment}
+                                            segment={segment}
+                                            className={classNames(
+                                                'cratis-date-picker__segment',
+                                                pt?.segment?.className,
+                                            )}
+                                            data-cratis-part='segment'
+                                            render={(segmentProps) => (
+                                                <span
+                                                    {...segmentProps}
+                                                    data-invalid={
+                                                        effectiveInvalid || undefined
+                                                    }
+                                                    data-disabled={
+                                                        effectiveDisabled || undefined
+                                                    }
+                                                    data-readonly={
+                                                        effectiveReadOnly || undefined
+                                                    }
+                                                />
+                                            )}
+                                        />
+                                    )}
+                                </DateInput>
+                                {value === null && effectivePlaceholder && (
+                                    <span
+                                        {...pt?.placeholder}
                                         className={classNames(
-                                            'cratis-date-picker__segment',
-                                            pt?.segment?.className,
+                                            'cratis-date-picker__placeholder',
+                                            pt?.placeholder?.className,
                                         )}
-                                        data-cratis-part='segment'
-                                        render={(segmentProps) => (
-                                            <span
-                                                {...segmentProps}
+                                        data-cratis-part='placeholder'
+                                        aria-hidden='true'
+                                    >
+                                        {effectivePlaceholder}
+                                    </span>
+                                )}
+                                {showIcon && (
+                                    <Button
+                                        {...asReactAriaButtonProps(pt?.trigger)}
+                                        isDisabled={
+                                            effectiveDisabled || effectiveReadOnly
+                                        }
+                                        className={classNames(
+                                            'cratis-date-picker__trigger',
+                                            pt?.trigger?.className,
+                                        )}
+                                        data-cratis-part='trigger'
+                                        render={(triggerProps) => (
+                                            <button
+                                                {...triggerProps}
+                                                data-open={isOpen || undefined}
                                                 data-invalid={
                                                     effectiveInvalid || undefined
                                                 }
                                                 data-disabled={
-                                                    effectiveDisabled || undefined
+                                                    effectiveDisabled ||
+                                                    effectiveReadOnly ||
+                                                    undefined
                                                 }
                                                 data-readonly={
                                                     effectiveReadOnly || undefined
                                                 }
+                                                data-selected={
+                                                    value !== null || undefined
+                                                }
                                             />
                                         )}
-                                    />
+                                        aria-label={
+                                            pt?.trigger?.['aria-label'] ??
+                                            datePickerMessages?.openCalendar ??
+                                            'Open calendar'
+                                        }
+                                    >
+                                        <span aria-hidden='true'>▦</span>
+                                    </Button>
                                 )}
-                            </DateInput>
-                            {value === null && effectivePlaceholder && (
-                                <span
-                                    {...pt?.placeholder}
-                                    className={classNames(
-                                        'cratis-date-picker__placeholder',
-                                        pt?.placeholder?.className,
-                                    )}
-                                    data-cratis-part='placeholder'
-                                    aria-hidden='true'
-                                >
-                                    {effectivePlaceholder}
-                                </span>
-                            )}
-                            {showIcon && (
-                                <Button
-                                    {...asReactAriaButtonProps(pt?.trigger)}
-                                    isDisabled={effectiveDisabled || effectiveReadOnly}
-                                    className={classNames(
-                                        'cratis-date-picker__trigger',
-                                        pt?.trigger?.className,
-                                    )}
-                                    data-cratis-part='trigger'
-                                    render={(triggerProps) => (
-                                        <button
-                                            {...triggerProps}
-                                            data-open={isOpen || undefined}
-                                            data-invalid={effectiveInvalid || undefined}
-                                            data-disabled={
-                                                effectiveDisabled ||
-                                                effectiveReadOnly ||
-                                                undefined
-                                            }
-                                            data-readonly={effectiveReadOnly || undefined}
-                                            data-selected={value !== null || undefined}
-                                        />
-                                    )}
-                                    aria-label={
-                                        pt?.trigger?.['aria-label'] ??
-                                        datePickerMessages?.openCalendar ??
-                                        'Open calendar'
-                                    }
-                                >
-                                    <span aria-hidden='true'>▦</span>
-                                </Button>
-                            )}
-                        </Group>
-                        <Popover
-                            {...pt?.popover}
-                            className={classNames(
-                                'cratis-date-picker__popover',
-                                pt?.popover?.className,
-                            )}
-                            data-cratis-part='popover'
-                            data-open
-                            placement='bottom start'
-                        >
-                            <Dialog
-                                {...pt?.dialog}
+                            </Group>
+                            <Popover
+                                {...pt?.popover}
                                 className={classNames(
-                                    'cratis-date-picker__dialog',
-                                    pt?.dialog?.className,
+                                    'cratis-date-picker__popover',
+                                    pt?.popover?.className,
                                 )}
-                                data-cratis-part='dialog'
+                                data-cratis-part='popover'
                                 data-open
+                                placement='bottom start'
                             >
-                                <Calendar
-                                    {...pt?.calendar}
+                                <Dialog
+                                    {...pt?.dialog}
                                     className={classNames(
-                                        'cratis-date-picker__calendar',
-                                        pt?.calendar?.className,
+                                        'cratis-date-picker__dialog',
+                                        pt?.dialog?.className,
                                     )}
-                                    data-cratis-part='calendar'
+                                    data-cratis-part='dialog'
                                     data-open
                                 >
-                                    <header
-                                        {...pt?.header}
+                                    <Calendar
+                                        {...pt?.calendar}
                                         className={classNames(
-                                            'cratis-date-picker__header',
-                                            pt?.header?.className,
+                                            'cratis-date-picker__calendar',
+                                            pt?.calendar?.className,
                                         )}
-                                        data-cratis-part='header'
+                                        data-cratis-part='calendar'
+                                        data-open
                                     >
-                                        <Button
-                                            {...asReactAriaButtonProps(pt?.previous)}
-                                            slot='previous'
+                                        <header
+                                            {...pt?.header}
                                             className={classNames(
-                                                'cratis-date-picker__nav',
-                                                pt?.previous?.className,
+                                                'cratis-date-picker__header',
+                                                pt?.header?.className,
                                             )}
-                                            data-cratis-part='previous'
-                                            aria-label={
-                                                pt?.previous?.['aria-label'] ??
-                                                datePickerMessages?.previousMonth ??
-                                                'Previous month'
-                                            }
+                                            data-cratis-part='header'
                                         >
-                                            <span aria-hidden='true'>‹</span>
-                                        </Button>
-                                        <Heading
-                                            {...pt?.heading}
-                                            className={classNames(
-                                                'cratis-date-picker__heading',
-                                                pt?.heading?.className,
-                                            )}
-                                            data-cratis-part='heading'
-                                        />
-                                        <Button
-                                            {...asReactAriaButtonProps(pt?.next)}
-                                            slot='next'
-                                            className={classNames(
-                                                'cratis-date-picker__nav',
-                                                pt?.next?.className,
-                                            )}
-                                            data-cratis-part='next'
-                                            aria-label={
-                                                pt?.next?.['aria-label'] ??
-                                                datePickerMessages?.nextMonth ??
-                                                'Next month'
-                                            }
-                                        >
-                                            <span aria-hidden='true'>›</span>
-                                        </Button>
-                                    </header>
-                                    <CalendarGrid
-                                        {...pt?.grid}
-                                        className={classNames(
-                                            'cratis-date-picker__grid',
-                                            pt?.grid?.className,
-                                        )}
-                                        data-cratis-part='grid'
-                                    >
-                                        <CalendarGridHeader>
-                                            {(day) => (
-                                                <CalendarHeaderCell>
-                                                    {day}
-                                                </CalendarHeaderCell>
-                                            )}
-                                        </CalendarGridHeader>
-                                        <CalendarGridBody>
-                                            {(date) => (
-                                                <CalendarCell
-                                                    {...pt?.cell}
-                                                    date={date}
-                                                    className={classNames(
-                                                        'cratis-date-picker__cell',
-                                                        pt?.cell?.className,
-                                                    )}
-                                                    data-cratis-part='cell'
-                                                />
-                                            )}
-                                        </CalendarGridBody>
-                                    </CalendarGrid>
-                                </Calendar>
-                                {showButtonBar && (
-                                    <div
-                                        {...pt?.buttonBar}
-                                        className={classNames(
-                                            'cratis-date-picker__button-bar',
-                                            pt?.buttonBar?.className,
-                                        )}
-                                        data-cratis-part='button-bar'
-                                    >
-                                        <button
-                                            {...pt?.today}
-                                            type='button'
+                                            <Button
+                                                {...asReactAriaButtonProps(pt?.previous)}
+                                                slot='previous'
+                                                className={classNames(
+                                                    'cratis-date-picker__nav',
+                                                    pt?.previous?.className,
+                                                )}
+                                                data-cratis-part='previous'
+                                                aria-label={
+                                                    pt?.previous?.['aria-label'] ??
+                                                    datePickerMessages?.previousMonth ??
+                                                    'Previous month'
+                                                }
+                                            >
+                                                <span aria-hidden='true'>‹</span>
+                                            </Button>
+                                            <Heading
+                                                {...pt?.heading}
+                                                className={classNames(
+                                                    'cratis-date-picker__heading',
+                                                    pt?.heading?.className,
+                                                )}
+                                                data-cratis-part='heading'
+                                            />
+                                            <Button
+                                                {...asReactAriaButtonProps(pt?.next)}
+                                                slot='next'
+                                                className={classNames(
+                                                    'cratis-date-picker__nav',
+                                                    pt?.next?.className,
+                                                )}
+                                                data-cratis-part='next'
+                                                aria-label={
+                                                    pt?.next?.['aria-label'] ??
+                                                    datePickerMessages?.nextMonth ??
+                                                    'Next month'
+                                                }
+                                            >
+                                                <span aria-hidden='true'>›</span>
+                                            </Button>
+                                        </header>
+                                        <CalendarGrid
+                                            {...pt?.grid}
                                             className={classNames(
-                                                'cratis-date-picker__action',
-                                                pt?.today?.className,
+                                                'cratis-date-picker__grid',
+                                                pt?.grid?.className,
                                             )}
-                                            data-cratis-part='today'
-                                            data-disabled={
-                                                isTodayOutOfBounds || undefined
-                                            }
-                                            disabled={isTodayOutOfBounds}
-                                            aria-disabled={
-                                                isTodayOutOfBounds || undefined
-                                            }
-                                            onClick={(event) => {
-                                                if (isTodayOutOfBounds) return;
-                                                onChange(todayDate, {
-                                                    source: 'user',
-                                                    nativeEvent: event.nativeEvent,
-                                                });
-                                            }}
+                                            data-cratis-part='grid'
                                         >
-                                            {resolvedTodayLabel}
-                                        </button>
-                                        <button
-                                            {...pt?.clear}
-                                            type='button'
+                                            <CalendarGridHeader>
+                                                {(day) => (
+                                                    <CalendarHeaderCell>
+                                                        {day}
+                                                    </CalendarHeaderCell>
+                                                )}
+                                            </CalendarGridHeader>
+                                            <CalendarGridBody>
+                                                {(date) => (
+                                                    <CalendarCell
+                                                        {...pt?.cell}
+                                                        date={date}
+                                                        className={classNames(
+                                                            'cratis-date-picker__cell',
+                                                            pt?.cell?.className,
+                                                        )}
+                                                        data-cratis-part='cell'
+                                                    />
+                                                )}
+                                            </CalendarGridBody>
+                                        </CalendarGrid>
+                                    </Calendar>
+                                    {showButtonBar && (
+                                        <div
+                                            {...pt?.buttonBar}
                                             className={classNames(
-                                                'cratis-date-picker__action',
-                                                pt?.clear?.className,
+                                                'cratis-date-picker__button-bar',
+                                                pt?.buttonBar?.className,
                                             )}
-                                            data-cratis-part='clear'
-                                            onClick={(event) =>
-                                                onChange(null, {
-                                                    source: 'user',
-                                                    nativeEvent: event.nativeEvent,
-                                                })
-                                            }
+                                            data-cratis-part='button-bar'
                                         >
-                                            {resolvedClearLabel}
-                                        </button>
-                                    </div>
-                                )}
-                            </Dialog>
-                        </Popover>
-                    </>
-                )}
-            </AriaDatePicker>
+                                            <button
+                                                {...pt?.today}
+                                                type='button'
+                                                className={classNames(
+                                                    'cratis-date-picker__action',
+                                                    pt?.today?.className,
+                                                )}
+                                                data-cratis-part='today'
+                                                data-disabled={
+                                                    isTodayOutOfBounds || undefined
+                                                }
+                                                disabled={isTodayOutOfBounds}
+                                                aria-disabled={
+                                                    isTodayOutOfBounds || undefined
+                                                }
+                                                onClick={(event) => {
+                                                    if (isTodayOutOfBounds) return;
+                                                    onChange(todayDate, {
+                                                        source: 'user',
+                                                        nativeEvent: event.nativeEvent,
+                                                    });
+                                                }}
+                                            >
+                                                {resolvedTodayLabel}
+                                            </button>
+                                            <button
+                                                {...pt?.clear}
+                                                type='button'
+                                                className={classNames(
+                                                    'cratis-date-picker__action',
+                                                    pt?.clear?.className,
+                                                )}
+                                                data-cratis-part='clear'
+                                                onClick={(event) =>
+                                                    onChange(null, {
+                                                        source: 'user',
+                                                        nativeEvent: event.nativeEvent,
+                                                    })
+                                                }
+                                            >
+                                                {resolvedClearLabel}
+                                            </button>
+                                        </div>
+                                    )}
+                                </Dialog>
+                            </Popover>
+                        </>
+                    )}
+                </AriaDatePicker>
+            </UNSAFE_PortalProvider>
         </div>
     );
 };
diff --git a/Source/Common/Tooltip.tsx b/Source/Common/Tooltip.tsx
index 3023d28a..807b7117 100644
--- a/Source/Common/Tooltip.tsx
+++ b/Source/Common/Tooltip.tsx
@@ -1,12 +1,11 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { cloneElement, type DOMAttributes, type ReactElement } from 'react';
-import {
-    Focusable,
-    Tooltip as AriaTooltip,
-    TooltipTrigger,
-} from 'react-aria-components/Tooltip';
+import type { ReactElement } from 'react';
+import { unstable_useSlot } from '../renderer/RendererContext';
+import { renderSlot } from '../renderer/renderSlot';
+import type { unstable_SlotDeclaration } from '../renderer/slots';
+import { TooltipImplementation } from './TooltipImplementation';
 
 /** Position of the tooltip relative to its trigger element. */
 export type TooltipPosition = 'top' | 'right' | 'bottom' | 'left';
@@ -32,38 +31,14 @@ export interface TooltipProps {
     children: ReactElement<TooltipTriggerElementProps>;
 }
 
-/** An accessible hover and keyboard-focus tooltip with stable Cratis parts. */
-export const Tooltip = ({
-    content,
-    position = 'top',
-    disabled = false,
-    className,
-    children,
-}: TooltipProps) => {
-    if (!content || disabled) return children;
-
-    const trigger = cloneElement(children, {
-        className: ['cratis-tooltip-trigger', children.props.className, className]
-            .filter(Boolean)
-            .join(' '),
-        'data-cratis-part': children.props['data-cratis-part'] ?? 'trigger',
-        'data-cratis-tooltip-trigger': '',
-    } as TooltipTriggerElementProps);
+const coreTooltipDeclaration = Object.freeze({
+    mode: 'atomic',
+    fidelity: 'native',
+    render: TooltipImplementation,
+}) satisfies unstable_SlotDeclaration<'common.tooltip'>;
 
-    return (
-        <TooltipTrigger delay={350} closeDelay={100}>
-            <Focusable isDisabled={trigger.props.disabled}>
-                {trigger as unknown as ReactElement<DOMAttributes<HTMLElement>, string>}
-            </Focusable>
-            <AriaTooltip
-                placement={position}
-                offset={8}
-                className='cratis-tooltip-popup'
-                data-cratis-part='popup'
-                data-open
-            >
-                {content}
-            </AriaTooltip>
-        </TooltipTrigger>
-    );
+/** An accessible hover and keyboard-focus tooltip with stable Cratis parts. */
+export const Tooltip = (props: TooltipProps) => {
+    const declaration = unstable_useSlot('common.tooltip', coreTooltipDeclaration);
+    return renderSlot(declaration, props);
 };
diff --git a/Source/Common/TooltipImplementation.tsx b/Source/Common/TooltipImplementation.tsx
index 160d9d2e..a1e7eb34 100644
--- a/Source/Common/TooltipImplementation.tsx
+++ b/Source/Common/TooltipImplementation.tsx
@@ -7,6 +7,8 @@ import {
     Tooltip as AriaTooltip,
     TooltipTrigger,
 } from 'react-aria-components/Tooltip';
+import { UNSAFE_PortalProvider } from 'react-aria/PortalProvider';
+import { unstable_useOverlayEnvironment } from '../renderer/RendererContext';
 import type { TooltipProps } from './Tooltip';
 
 interface TooltipTriggerElementProps {
@@ -24,6 +26,7 @@ export const TooltipImplementation = ({
     className,
     children,
 }: TooltipProps) => {
+    const overlayEnvironment = unstable_useOverlayEnvironment();
     if (!content || disabled) return children;
 
     const trigger = cloneElement(children, {
@@ -35,19 +38,26 @@ export const TooltipImplementation = ({
     } as TooltipTriggerElementProps);
 
     return (
-        <TooltipTrigger delay={350} closeDelay={100}>
-            <Focusable isDisabled={trigger.props.disabled}>
-                {trigger as unknown as ReactElement<DOMAttributes<HTMLElement>, string>}
-            </Focusable>
-            <AriaTooltip
-                placement={position}
-                offset={8}
-                className='cratis-tooltip-popup'
-                data-cratis-part='popup'
-                data-open
-            >
-                {content}
-            </AriaTooltip>
-        </TooltipTrigger>
+        <UNSAFE_PortalProvider getContainer={overlayEnvironment.getContainer}>
+            <TooltipTrigger delay={350} closeDelay={100}>
+                <Focusable isDisabled={trigger.props.disabled}>
+                    {
+                        trigger as unknown as ReactElement<
+                            DOMAttributes<HTMLElement>,
+                            string
+                        >
+                    }
+                </Focusable>
+                <AriaTooltip
+                    placement={position}
+                    offset={8}
+                    className='cratis-tooltip-popup'
+                    data-cratis-part='popup'
+                    data-open
+                >
+                    {content}
+                </AriaTooltip>
+            </TooltipTrigger>
+        </UNSAFE_PortalProvider>
     );
 };
diff --git a/Source/DataTables/TablePaginator.tsx b/Source/DataTables/TablePaginator.tsx
index fa797db0..1b4db156 100644
--- a/Source/DataTables/TablePaginator.tsx
+++ b/Source/DataTables/TablePaginator.tsx
@@ -2,9 +2,11 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import type { HTMLAttributes } from 'react';
-import { Button, type ButtonParts } from '../Common/Button';
-import { useCratisComponentsConfig } from '../Common/CratisComponentsProvider';
-import { paginatorRange } from './paginatorRange';
+import type { ButtonParts } from '../Common/Button';
+import { unstable_useSlot } from '../renderer/RendererContext';
+import { renderSlot } from '../renderer/renderSlot';
+import type { unstable_SlotDeclaration } from '../renderer/slots';
+import { TablePaginatorImplementation } from './TablePaginatorImplementation';
 
 /** Stable Cratis-owned paginator parts. */
 export interface TablePaginatorParts {
@@ -54,102 +56,20 @@ export interface TablePaginatorProps {
     ptOptions?: object;
 }
 
+const coreTablePaginatorDeclaration = Object.freeze({
+    mode: 'atomic',
+    fidelity: 'native',
+    render: TablePaginatorImplementation,
+}) satisfies unstable_SlotDeclaration<'datatables.paginator'>;
+
 /**
- * A minimal first/previous/next/last paginator. The
- * Cratis data tables drive paging through Arc's paging hook rather than the
- * table's internal pagination — so this renders the page controls wired to a
- * simple `onPageChange(pageIndex)` callback.
+ * A minimal first/previous/next/last paginator. The Cratis data tables drive paging through Arc's
+ * paging hook and receive requested zero-based pages through `onPageChange`.
  */
-export const TablePaginator = ({
-    page,
-    pageCount,
-    onPageChange,
-    totalItems,
-    pageSize,
-    ariaLabels,
-    className,
-    pt,
-}: TablePaginatorProps) => {
-    const { messages } = useCratisComponentsConfig();
-    const paginatorMessages = messages?.paginator;
-    const isFirst = page <= 0;
-    const isLast = page >= pageCount - 1;
-    const rangeReport = paginatorRange(page, pageSize, totalItems);
-    const labels = {
-        navigation:
-            ariaLabels?.navigation ?? paginatorMessages?.navigation ?? 'Pagination',
-        first: ariaLabels?.first ?? paginatorMessages?.first ?? 'First page',
-        previous: ariaLabels?.previous ?? paginatorMessages?.previous ?? 'Previous page',
-        next: ariaLabels?.next ?? paginatorMessages?.next ?? 'Next page',
-        last: ariaLabels?.last ?? paginatorMessages?.last ?? 'Last page',
-    };
-
-    return (
-        <div
-            {...pt?.root}
-            role='navigation'
-            aria-label={labels.navigation}
-            data-cratis-part='root'
-            className={['cratis-table-paginator', pt?.root?.className, className]
-                .filter(Boolean)
-                .join(' ')}
-        >
-            {rangeReport && (
-                <span
-                    {...pt?.range}
-                    className={['cratis-table-paginator-range', pt?.range?.className]
-                        .filter(Boolean)
-                        .join(' ')}
-                    data-cratis-part='range'
-                >
-                    {rangeReport}
-                </span>
-            )}
-            <Button
-                variant='ghost'
-                disabled={isFirst}
-                onClick={() => onPageChange(0)}
-                aria-label={labels.first}
-                pt={pt?.first}
-            >
-                <span aria-hidden='true'>«</span>
-            </Button>
-            <Button
-                variant='ghost'
-                disabled={isFirst}
-                onClick={() => onPageChange(page - 1)}
-                aria-label={labels.previous}
-                pt={pt?.previous}
-            >
-                <span aria-hidden='true'>‹</span>
-            </Button>
-            <span
-                {...pt?.info}
-                className={['cratis-table-paginator-info', pt?.info?.className]
-                    .filter(Boolean)
-                    .join(' ')}
-                data-cratis-part='info'
-            >
-                {page + 1} / {Math.max(pageCount, 1)}
-            </span>
-            <Button
-                variant='ghost'
-                disabled={isLast}
-                onClick={() => onPageChange(page + 1)}
-                aria-label={labels.next}
-                pt={pt?.next}
-            >
-                <span aria-hidden='true'>›</span>
-            </Button>
-            <Button
-                variant='ghost'
-                disabled={isLast}
-                onClick={() => onPageChange(pageCount - 1)}
-                aria-label={labels.last}
-                pt={pt?.last}
-            >
-                <span aria-hidden='true'>»</span>
-            </Button>
-        </div>
+export const TablePaginator = (props: TablePaginatorProps) => {
+    const declaration = unstable_useSlot(
+        'datatables.paginator',
+        coreTablePaginatorDeclaration,
     );
+    return renderSlot(declaration, props);
 };
diff --git a/Source/Dialogs/Dialog.tsx b/Source/Dialogs/Dialog.tsx
index 86cea694..7e794181 100644
--- a/Source/Dialogs/Dialog.tsx
+++ b/Source/Dialogs/Dialog.tsx
@@ -1,18 +1,18 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { DialogResult, DialogButtons, useDialogContext } from '@cratis/arc.react/dialogs';
-import { Dialog as AriaDialog, Heading } from 'react-aria-components/Dialog';
-import { Modal, ModalOverlay } from 'react-aria-components/Modal';
+import type { DialogResult, DialogButtons } from '@cratis/arc.react/dialogs';
 import type {
     ButtonHTMLAttributes,
     CSSProperties,
     HTMLAttributes,
     ReactNode,
 } from 'react';
-import { useEffect, useRef, useSyncExternalStore } from 'react';
-import { DialogInitialFocus } from './DialogInitialFocus';
-import { useCratisComponentsConfig } from '../Common/CratisComponentsProvider';
+import { unstable_useSlot } from '../renderer/RendererContext';
+import { renderSlot } from '../renderer/renderSlot';
+import type { unstable_SlotDeclaration } from '../renderer/slots';
+import type { DialogInitialFocus } from './DialogInitialFocus';
+import { DialogImplementation } from './DialogImplementation';
 
 /** Callback handling a typed dialog result; return `false` to keep the dialog open. */
 export type CloseDialog = (
@@ -115,394 +115,17 @@ export interface DialogProps {
     unstyled?: boolean;
 }
 
-const classNames = (...values: Array<string | undefined>) =>
-    values.filter(Boolean).join(' ');
-
-const subscribeToBrowserEnvironment = () => () => undefined;
-const useIsBrowser = () =>
-    useSyncExternalStore(
-        subscribeToBrowserEnvironment,
-        () => true,
-        () => false,
-    );
+const coreDialogDeclaration = Object.freeze({
+    mode: 'atomic',
+    fidelity: 'native',
+    render: DialogImplementation,
+}) satisfies unstable_SlotDeclaration<'dialogs.dialog'>;
 
 /**
  * A modal dialog with Arc host integration, typed footer actions, busy/validity
  * state, controlled dismissal, and stable Cratis-owned styling parts.
  */
-export const Dialog = ({
-    title,
-    visible = true,
-    onClose,
-    onConfirm,
-    onCancel,
-    buttons = DialogButtons.OkCancel,
-    initialFocus = DialogInitialFocus.Confirm,
-    children,
-    width = '450px',
-    style,
-    contentStyle,
-    isValid,
-    isBusy = false,
-    okLabel,
-    cancelLabel,
-    yesLabel,
-    noLabel,
-    closeAriaLabel,
-    dismissable,
-    className,
-    pt,
-}: DialogProps) => {
-    const { messages } = useCratisComponentsConfig();
-    const dialogMessages = messages?.dialog;
-    const resolvedOkLabel = okLabel ?? dialogMessages?.ok ?? 'Ok';
-    const resolvedCancelLabel = cancelLabel ?? dialogMessages?.cancel ?? 'Cancel';
-    const resolvedYesLabel = yesLabel ?? dialogMessages?.yes ?? 'Yes';
-    const resolvedNoLabel = noLabel ?? dialogMessages?.no ?? 'No';
-    const resolvedCloseAriaLabel = closeAriaLabel ?? dialogMessages?.close ?? 'Close';
-    let contextCloseDialog: ((result: DialogResult) => void) | undefined;
-    try {
-        const context = useDialogContext();
-        contextCloseDialog = context?.closeDialog;
-    } catch {
-        contextCloseDialog = undefined;
-    }
-
-    const isBrowser = useIsBrowser();
-    const titleRef = useRef<HTMLHeadingElement>(null);
-    const confirmRef = useRef<HTMLButtonElement>(null);
-    const cancelRef = useRef<HTMLButtonElement>(null);
-
-    const isDialogValid = isValid !== false;
-    const hasDismissingButton =
-        typeof buttons === 'number' && buttons !== DialogButtons.Ok;
-    const resolvedInitialFocus =
-        initialFocus === DialogInitialFocus.Cancel && !hasDismissingButton
-            ? DialogInitialFocus.Content
-            : initialFocus;
-    const focusesConfirmButton = resolvedInitialFocus === DialogInitialFocus.Confirm;
-    const focusesDismissingButton = resolvedInitialFocus === DialogInitialFocus.Cancel;
-    const focusesTitle = resolvedInitialFocus === DialogInitialFocus.Content;
-    const allowsDismissal = dismissable ?? typeof buttons === 'number';
-    const isDismissable = allowsDismissal && !isBusy;
-
-    useEffect(() => {
-        if (!visible) return;
-        const target = focusesConfirmButton
-            ? confirmRef.current
-            : focusesDismissingButton
-              ? cancelRef.current
-              : titleRef.current;
-        const frame = requestAnimationFrame(() => target?.focus());
-        return () => cancelAnimationFrame(frame);
-    }, [focusesConfirmButton, focusesDismissingButton, visible]);
-
-    const handleClose = async (result: DialogResult) => {
-        let shouldCloseThroughContext = true;
-
-        if (result === DialogResult.Ok || result === DialogResult.Yes) {
-            if (onConfirm) {
-                const closeResult = await onConfirm();
-                shouldCloseThroughContext = closeResult === true;
-            } else if (onClose) {
-                const closeResult = await onClose(result);
-                shouldCloseThroughContext = closeResult !== false;
-            }
-        } else if (onCancel) {
-            const closeResult = await onCancel();
-            shouldCloseThroughContext = closeResult === true;
-        } else if (onClose) {
-            const closeResult = await onClose(result);
-            shouldCloseThroughContext = closeResult !== false;
-        }
-
-        if (shouldCloseThroughContext) contextCloseDialog?.(result);
-    };
-
-    const footerButton = (
-        result: DialogResult,
-        label: string,
-        primary: boolean,
-        focused: boolean,
-    ) => (
-        <button
-            key={`${result}-${label}`}
-            {...(primary ? pt?.confirm : pt?.cancel)}
-            type='button'
-            className={classNames(
-                'cratis-dialog__button',
-                primary
-                    ? 'cratis-dialog__button--primary'
-                    : 'cratis-dialog__button--secondary',
-                primary ? pt?.confirm?.className : pt?.cancel?.className,
-            )}
-            data-cratis-part={primary ? 'confirm' : 'cancel'}
-            data-disabled={(primary ? !isDialogValid || isBusy : isBusy) || undefined}
-            data-busy={isBusy || undefined}
-            ref={primary ? confirmRef : focused ? cancelRef : undefined}
-            onClick={() => void handleClose(result)}
-            disabled={primary ? !isDialogValid || isBusy : isBusy}
-            autoFocus={focused}
-            aria-busy={primary && isBusy ? true : undefined}
-        >
-            {primary && isBusy && (
-                <span className='cratis-dialog__spinner' aria-hidden='true' />
-            )}
-            <span>{label}</span>
-        </button>
-    );
-
-    const predefinedFooter = () => {
-        if (typeof buttons !== 'number') return buttons;
-
-        switch (buttons) {
-            case DialogButtons.Ok:
-                return footerButton(
-                    DialogResult.Ok,
-                    resolvedOkLabel,
-                    true,
-                    focusesConfirmButton,
-                );
-            case DialogButtons.OkCancel:
-                return (
-                    <>
-                        {footerButton(
-                            DialogResult.Ok,
-                            resolvedOkLabel,
-                            true,
-                            focusesConfirmButton,
-                        )}
-                        {footerButton(
-                            DialogResult.Cancelled,
-                            resolvedCancelLabel,
-                            false,
-                            focusesDismissingButton,
-                        )}
-                    </>
-                );
-            case DialogButtons.YesNo:
-                return (
-                    <>
-                        {footerButton(
-                            DialogResult.Yes,
-                            resolvedYesLabel,
-                            true,
-                            focusesConfirmButton,
-                        )}
-                        {footerButton(
-                            DialogResult.No,
-                            resolvedNoLabel,
-                            false,
-                            focusesDismissingButton,
-                        )}
-                    </>
-                );
-            case DialogButtons.YesNoCancel:
-                return (
-                    <>
-                        {footerButton(
-                            DialogResult.Yes,
-                            resolvedYesLabel,
-                            true,
-                            focusesConfirmButton,
-                        )}
-                        {footerButton(DialogResult.No, resolvedNoLabel, false, false)}
-                        {footerButton(
-                            DialogResult.Cancelled,
-                            resolvedCancelLabel,
-                            false,
-                            focusesDismissingButton,
-                        )}
-                    </>
-                );
-            default:
-                return null;
-        }
-    };
-
-    const dialogDocument = (
-        <AriaDialog className='cratis-dialog__document'>
-            <>
-                <header
-                    {...pt?.header}
-                    className={classNames('cratis-dialog__header', pt?.header?.className)}
-                    style={pt?.header?.style}
-                    data-cratis-part='header'
-                >
-                    <Heading
-                        {...pt?.title}
-                        slot='title'
-                        tabIndex={focusesTitle ? -1 : undefined}
-                        ref={titleRef}
-                        className={classNames(
-                            'cratis-dialog__title',
-                            pt?.title?.className,
-                        )}
-                        style={pt?.title?.style}
-                        data-cratis-part='title'
-                    >
-                        {title}
-                    </Heading>
-                    {allowsDismissal && (
-                        <button
-                            {...pt?.close}
-                            type='button'
-                            disabled={isBusy}
-                            className={classNames(
-                                'cratis-dialog__close',
-                                pt?.close?.className,
-                            )}
-                            data-cratis-part='close'
-                            data-disabled={isBusy || undefined}
-                            data-busy={isBusy || undefined}
-                            aria-label={resolvedCloseAriaLabel}
-                            onClick={() => void handleClose(DialogResult.Cancelled)}
-                        >
-                            <span aria-hidden='true'>×</span>
-                        </button>
-                    )}
-                </header>
-                <div
-                    {...pt?.content}
-                    className={classNames(
-                        'cratis-dialog__content',
-                        pt?.content?.className,
-                    )}
-                    style={{ ...pt?.content?.style, ...contentStyle }}
-                    data-cratis-part='content'
-                    data-open={visible || undefined}
-                    data-busy={isBusy || undefined}
-                >
-                    <fieldset
-                        className='cratis-dialog__busy-scope'
-                        data-cratis-part='busy-scope'
-                        data-busy={isBusy || undefined}
-                        disabled={isBusy}
-                        inert={isBusy}
-                        aria-busy={isBusy || undefined}
-                    >
-                        {children}
-                    </fieldset>
-                </div>
-                {buttons !== null && (
-                    <footer
-                        {...pt?.footer}
-                        className={classNames(
-                            'cratis-dialog__footer',
-                            pt?.footer?.className,
-                        )}
-                        style={pt?.footer?.style}
-                        data-cratis-part='footer'
-                    >
-                        <fieldset
-                            className='cratis-dialog__busy-scope cratis-dialog__busy-scope--footer'
-                            data-cratis-part='busy-scope'
-                            data-busy={isBusy || undefined}
-                            disabled={isBusy}
-                            inert={isBusy}
-                            aria-busy={isBusy || undefined}
-                        >
-                            {predefinedFooter()}
-                        </fieldset>
-                    </footer>
-                )}
-            </>
-        </AriaDialog>
-    );
-
-    const dialogStyle = { width, ...pt?.root?.style, ...style };
-
-    // useSyncExternalStore supplies the server snapshot during hydration, so this
-    // fallback is identical on the server and on the client's first render. React
-    // switches to the portaled React Aria modal only after hydration completes.
-    if (!isBrowser) {
-        if (!visible) return null;
-        return (
-            <div
-                {...pt?.backdrop}
-                className={classNames('cratis-dialog__backdrop', pt?.backdrop?.className)}
-                style={{
-                    zIndex: 'var(--cratis-z-index-dialog)',
-                    ...pt?.backdrop?.style,
-                }}
-                data-cratis-part='backdrop'
-                data-open={visible || undefined}
-                data-busy={isBusy || undefined}
-            >
-                <div
-                    {...pt?.positioner}
-                    className={classNames(
-                        'cratis-dialog__positioner',
-                        pt?.positioner?.className,
-                    )}
-                    style={pt?.positioner?.style}
-                    data-cratis-part='positioner'
-                    data-open={visible || undefined}
-                    data-busy={isBusy || undefined}
-                >
-                    <section
-                        {...pt?.root}
-                        className={classNames(
-                            'cratis-dialog',
-                            pt?.root?.className,
-                            className,
-                        )}
-                        style={dialogStyle}
-                        data-cratis-part='root'
-                        data-open={visible || undefined}
-                        data-busy={isBusy || undefined}
-                    >
-                        {dialogDocument}
-                    </section>
-                </div>
-            </div>
-        );
-    }
-
-    return (
-        <ModalOverlay
-            {...pt?.backdrop}
-            isOpen={visible}
-            onOpenChange={(open) => {
-                if (!open && !isBusy) void handleClose(DialogResult.Cancelled);
-            }}
-            isDismissable={isDismissable}
-            isKeyboardDismissDisabled={!isDismissable}
-            className={classNames('cratis-dialog__backdrop', pt?.backdrop?.className)}
-            style={{
-                zIndex: 'var(--cratis-z-index-dialog)',
-                ...pt?.backdrop?.style,
-            }}
-            data-cratis-part='backdrop'
-            data-open={visible || undefined}
-            data-busy={isBusy || undefined}
-        >
-            <div
-                {...pt?.positioner}
-                className={classNames(
-                    'cratis-dialog__positioner',
-                    pt?.positioner?.className,
-                )}
-                style={pt?.positioner?.style}
-                data-cratis-part='positioner'
-                data-open={visible || undefined}
-                data-busy={isBusy || undefined}
-            >
-                <Modal
-                    {...pt?.root}
-                    className={classNames(
-                        'cratis-dialog',
-                        pt?.root?.className,
-                        className,
-                    )}
-                    style={dialogStyle}
-                    data-cratis-part='root'
-                    data-open={visible || undefined}
-                    data-busy={isBusy || undefined}
-                >
-                    {dialogDocument}
-                </Modal>
-            </div>
-        </ModalOverlay>
-    );
+export const Dialog = (props: DialogProps) => {
+    const declaration = unstable_useSlot('dialogs.dialog', coreDialogDeclaration);
+    return renderSlot(declaration, props);
 };
diff --git a/Source/Dialogs/DialogImplementation.tsx b/Source/Dialogs/DialogImplementation.tsx
index 117bcde3..bce32293 100644
--- a/Source/Dialogs/DialogImplementation.tsx
+++ b/Source/Dialogs/DialogImplementation.tsx
@@ -4,7 +4,9 @@
 import { DialogResult, DialogButtons, useDialogContext } from '@cratis/arc.react/dialogs';
 import { Dialog as AriaDialog, Heading } from 'react-aria-components/Dialog';
 import { Modal, ModalOverlay } from 'react-aria-components/Modal';
+import { UNSAFE_PortalProvider } from 'react-aria/PortalProvider';
 import { useEffect, useRef, useSyncExternalStore } from 'react';
+import { unstable_useOverlayEnvironment } from '../renderer/RendererContext';
 import { DialogInitialFocus } from './DialogInitialFocus';
 import type { DialogProps } from './Dialog';
 import { useCratisComponentsConfig } from '../Common/CratisComponentsProvider';
@@ -47,6 +49,7 @@ export const DialogImplementation = ({
     className,
     pt,
 }: DialogProps) => {
+    const overlayEnvironment = unstable_useOverlayEnvironment();
     const { messages } = useCratisComponentsConfig();
     const dialogMessages = messages?.dialog;
     const resolvedOkLabel = okLabel ?? dialogMessages?.ok ?? 'Ok';
@@ -354,49 +357,51 @@ export const DialogImplementation = ({
     }
 
     return (
-        <ModalOverlay
-            {...pt?.backdrop}
-            isOpen={visible}
-            onOpenChange={(open) => {
-                if (!open && !isBusy) void handleClose(DialogResult.Cancelled);
-            }}
-            isDismissable={isDismissable}
-            isKeyboardDismissDisabled={!isDismissable}
-            className={classNames('cratis-dialog__backdrop', pt?.backdrop?.className)}
-            style={{
-                zIndex: 'var(--cratis-z-index-dialog)',
-                ...pt?.backdrop?.style,
-            }}
-            data-cratis-part='backdrop'
-            data-open={visible || undefined}
-            data-busy={isBusy || undefined}
-        >
-            <div
-                {...pt?.positioner}
-                className={classNames(
-                    'cratis-dialog__positioner',
-                    pt?.positioner?.className,
-                )}
-                style={pt?.positioner?.style}
-                data-cratis-part='positioner'
+        <UNSAFE_PortalProvider getContainer={overlayEnvironment.getContainer}>
+            <ModalOverlay
+                {...pt?.backdrop}
+                isOpen={visible}
+                onOpenChange={(open) => {
+                    if (!open && !isBusy) void handleClose(DialogResult.Cancelled);
+                }}
+                isDismissable={isDismissable}
+                isKeyboardDismissDisabled={!isDismissable}
+                className={classNames('cratis-dialog__backdrop', pt?.backdrop?.className)}
+                style={{
+                    zIndex: 'var(--cratis-z-index-dialog)',
+                    ...pt?.backdrop?.style,
+                }}
+                data-cratis-part='backdrop'
                 data-open={visible || undefined}
                 data-busy={isBusy || undefined}
             >
-                <Modal
-                    {...pt?.root}
+                <div
+                    {...pt?.positioner}
                     className={classNames(
-                        'cratis-dialog',
-                        pt?.root?.className,
-                        className,
+                        'cratis-dialog__positioner',
+                        pt?.positioner?.className,
                     )}
-                    style={dialogStyle}
-                    data-cratis-part='root'
+                    style={pt?.positioner?.style}
+                    data-cratis-part='positioner'
                     data-open={visible || undefined}
                     data-busy={isBusy || undefined}
                 >
-                    {dialogDocument}
-                </Modal>
-            </div>
-        </ModalOverlay>
+                    <Modal
+                        {...pt?.root}
+                        className={classNames(
+                            'cratis-dialog',
+                            pt?.root?.className,
+                            className,
+                        )}
+                        style={dialogStyle}
+                        data-cratis-part='root'
+                        data-open={visible || undefined}
+                        data-busy={isBusy || undefined}
+                    >
+                        {dialogDocument}
+                    </Modal>
+                </div>
+            </ModalOverlay>
+        </UNSAFE_PortalProvider>
     );
 };
diff --git a/Source/Dropdown/Dropdown.tsx b/Source/Dropdown/Dropdown.tsx
index bff96d88..e31e2396 100644
--- a/Source/Dropdown/Dropdown.tsx
+++ b/Source/Dropdown/Dropdown.tsx
@@ -1,50 +1,25 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { useState } from 'react';
 import type {
     ButtonHTMLAttributes,
     CSSProperties,
     FocusEventHandler,
     HTMLAttributes,
     InputHTMLAttributes,
-    JSX,
-    Key,
     SelectHTMLAttributes,
 } from 'react';
-import {
-    Button as AriaButton,
-    ListBox,
-    ListBoxItem,
-    Popover,
-    Select as AriaSelect,
-    SelectValue,
-} from 'react-aria-components/Select';
-import {
-    Button as ComboBoxButton,
-    ComboBox,
-    ComboBoxValue,
-    Input,
-    ListBox as ComboBoxListBox,
-    ListBoxItem as ComboBoxListBoxItem,
-    Popover as ComboBoxPopover,
-} from 'react-aria-components/ComboBox';
-import { useCratisComponentsConfig } from '../Common/CratisComponentsProvider';
 import type { ChangeHandler } from '../types/ChangeHandler';
-import {
-    asReactAriaButtonProps,
-    asReactAriaListBoxItemProps,
-    asReactAriaListBoxProps,
-} from '../Common/reactAriaProps';
+import { unstable_useSlot } from '../renderer/RendererContext';
+import { renderSlot } from '../renderer/renderSlot';
+import type { unstable_SlotDeclaration } from '../renderer/slots';
+import { DropdownImplementation } from './DropdownImplementation';
 
 type DropdownTriggerAttributes = Omit<
     ButtonHTMLAttributes<HTMLButtonElement>,
     'onClick' | 'tabIndex' | 'value'
 >;
 
-type DropdownOptionValue =
-    string | number | boolean | bigint | symbol | object | null | undefined;
-
 /** Narrow migration aliases shared by the legacy `input` and `select` keys. */
 interface DropdownLegacyControlAttributes {
     id?: string;
@@ -152,682 +127,16 @@ export interface DropdownProps<T = unknown> {
     unstyled?: boolean;
 }
 
-interface ResolvedOption {
-    key: string;
-    label: string;
-    value: unknown;
-    disabled: boolean;
-}
-
-const conventionalField = (
-    options: unknown[] | undefined,
-    field: 'label' | 'value',
-): string | undefined => {
-    const first = options?.[0];
-    return first !== null && typeof first === 'object' && field in first
-        ? field
-        : undefined;
-};
-
-const optionValue = (value: unknown): DropdownOptionValue => {
-    if (typeof value === 'function') return String(value);
-    return value as DropdownOptionValue;
-};
-
-const readField = (option: unknown, field: string | undefined): DropdownOptionValue => {
-    if (!field || option === null || typeof option !== 'object')
-        return optionValue(option);
-    return field in option
-        ? optionValue((option as Record<string, unknown>)[field])
-        : optionValue(option);
-};
-
-const resolveOptions = (
-    options: unknown[] | undefined,
-    optionLabel: string | undefined,
-    optionValue: string | undefined,
-): ResolvedOption[] =>
-    (options ?? []).map((option, index) => {
-        const value = readField(option, optionValue);
-        const labelValue = readField(option, optionLabel);
-        const keyValue = value ?? index;
-        const disabled =
-            option !== null && typeof option === 'object' && 'disabled' in option
-                ? Boolean((option as { disabled?: unknown }).disabled)
-                : false;
-
-        return {
-            key: `${typeof keyValue}:${String(keyValue)}:${index}`,
-            label: String(labelValue ?? value ?? ''),
-            value,
-            disabled,
-        };
-    });
-
-const classNames = (...values: Array<string | undefined>) =>
-    values.filter(Boolean).join(' ');
-
-const renderTriggerWithOpenState = (props: JSX.IntrinsicElements['button']) => (
-    <button
-        {...props}
-        data-open={
-            props['aria-expanded'] === true || props['aria-expanded'] === 'true'
-                ? true
-                : undefined
-        }
-    />
-);
+const coreDropdownDeclaration = Object.freeze({
+    mode: 'atomic',
+    fidelity: 'native',
+    render: DropdownImplementation,
+}) satisfies unstable_SlotDeclaration<'dropdown.select'>;
 
 /** A renderer-independent single or multiple select with stable Cratis parts. */
-export const Dropdown = <T = unknown,>({
-    value,
-    options,
-    optionLabel = conventionalField(options, 'label'),
-    optionValue = conventionalField(options, 'value'),
-    placeholder,
-    filter,
-    filterPlaceholder,
-    multiple,
-    showClear,
-    invalid,
-    disabled,
-    className,
-    style,
-    id,
-    inputId,
-    panelClassName,
-    name,
-    tabIndex,
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledby,
-    'aria-describedby': ariaDescribedby,
-    ariaLabel: ariaLabelAlias,
-    ariaLabelledBy,
-    ariaDescribedBy,
-    ariaInvalid,
-    onChange,
-    onBlur,
-    pt,
-}: DropdownProps<T>) => {
-    const [isOpen, setIsOpen] = useState(false);
-    const { messages } = useCratisComponentsConfig();
-    const dropdownMessages = messages?.dropdown;
-    const showOptionsLabel =
-        pt?.trigger?.['aria-label'] ??
-        pt?.select?.['aria-label'] ??
-        dropdownMessages?.showOptions ??
-        'Show options';
-    const clearSelectionLabel =
-        pt?.clear?.['aria-label'] ??
-        dropdownMessages?.clearSelection ??
-        'Clear selection';
-    const resolvedOptions = resolveOptions(options, optionLabel, optionValue);
-    const selectedOption = resolvedOptions.find((option) =>
-        Object.is(option.value, value),
-    );
-    const selectedKey = selectedOption?.key ?? null;
-    const effectiveAriaLabel =
-        ariaLabel ??
-        ariaLabelAlias ??
-        pt?.input?.['aria-label'] ??
-        pt?.select?.['aria-label'];
-    const effectiveAriaLabelledby =
-        ariaLabelledby ??
-        ariaLabelledBy ??
-        pt?.input?.['aria-labelledby'] ??
-        pt?.select?.['aria-labelledby'];
-    const effectiveAriaDescribedby =
-        ariaDescribedby ??
-        ariaDescribedBy ??
-        pt?.input?.['aria-describedby'] ??
-        pt?.select?.['aria-describedby'];
-    const inputAriaInvalid = pt?.input?.['aria-invalid'] ?? pt?.select?.['aria-invalid'];
-    const effectiveInvalid =
-        invalid ??
-        ariaInvalid ??
-        (inputAriaInvalid === true ||
-            inputAriaInvalid === 'true' ||
-            inputAriaInvalid === 'grammar' ||
-            inputAriaInvalid === 'spelling');
-    const rootClassName = classNames(
-        'cratis-dropdown',
-        pt?.root?.className,
-        pt?.select?.className,
-        className,
-    );
-    const triggerId = id ?? inputId ?? pt?.trigger?.id ?? pt?.input?.id ?? pt?.select?.id;
-
-    const selectOption = (key: Key | null) => {
-        const option = resolvedOptions.find((candidate) => candidate.key === String(key));
-        onChange?.((option?.value ?? null) as T, { source: 'user' });
-    };
-    const selectOptions = (keys: readonly Key[]) => {
-        const selectedKeys = new Set(keys.map(String));
-        const values = resolvedOptions
-            .filter((option) => selectedKeys.has(option.key))
-            .map((option) => option.value);
-        onChange?.(values as T, { source: 'user' });
-    };
-    // React Aria's Select trigger context does not forward aria-invalid from its Button child.
-    // Keep the Cratis validation contract on the actual focusable control after context props merge.
-    const applyTriggerState = (element: HTMLButtonElement | null) => {
-        if (!element) return;
-        if (effectiveInvalid) element.setAttribute('aria-invalid', 'true');
-        else element.removeAttribute('aria-invalid');
-        if (tabIndex !== undefined) element.tabIndex = tabIndex;
-    };
-
-    if (multiple) {
-        const selectedValues = Array.isArray(value) ? value : [];
-        const selectedKeys = resolvedOptions
-            .filter((option) =>
-                selectedValues.some((selected) => Object.is(selected, option.value)),
-            )
-            .map((option) => option.key);
-
-        if (filter) {
-            return (
-                <span
-                    {...pt?.root}
-                    className={rootClassName}
-                    data-cratis-part='root'
-                    data-invalid={effectiveInvalid || undefined}
-                    data-disabled={disabled || undefined}
-                    data-open={isOpen || undefined}
-                    data-selected={selectedKeys.length > 0 || undefined}
-                    style={{ ...pt?.root?.style, ...pt?.select?.style, ...style }}
-                    onBlur={onBlur}
-                >
-                    <ComboBox
-                        selectionMode='multiple'
-                        onOpenChange={setIsOpen}
-                        value={selectedKeys}
-                        onChange={selectOptions}
-                        isDisabled={disabled}
-                        isInvalid={effectiveInvalid}
-                        name={name}
-                        aria-label={effectiveAriaLabel}
-                        aria-labelledby={effectiveAriaLabelledby}
-                        aria-describedby={effectiveAriaDescribedby}
-                        allowsEmptyCollection
-                        className='cratis-dropdown__combobox'
-                    >
-                        <ComboBoxValue
-                            {...pt?.value}
-                            placeholder={placeholder}
-                            className={classNames(
-                                'cratis-dropdown__value',
-                                pt?.value?.className,
-                            )}
-                            data-cratis-part='value'
-                            data-disabled={disabled || undefined}
-                            data-invalid={effectiveInvalid || undefined}
-                            data-open={isOpen || undefined}
-                            data-selected={selectedKeys.length > 0 || undefined}
-                        />
-                        <Input
-                            {...pt?.filter}
-                            id={triggerId}
-                            placeholder={filterPlaceholder ?? placeholder}
-                            tabIndex={tabIndex}
-                            aria-invalid={effectiveInvalid || undefined}
-                            className={classNames(
-                                'cratis-dropdown__filter',
-                                pt?.input?.className,
-                                pt?.filter?.className,
-                            )}
-                            style={{ ...pt?.input?.style, ...pt?.filter?.style }}
-                            data-cratis-part='filter'
-                            data-disabled={disabled || undefined}
-                            data-invalid={effectiveInvalid || undefined}
-                            data-open={isOpen || undefined}
-                        />
-                        <ComboBoxButton
-                            {...asReactAriaButtonProps(pt?.trigger)}
-                            className={classNames(
-                                'cratis-dropdown__indicator',
-                                pt?.trigger?.className,
-                            )}
-                            data-cratis-part='trigger'
-                            data-disabled={disabled || undefined}
-                            data-invalid={effectiveInvalid || undefined}
-                            data-selected={selectedKeys.length > 0 || undefined}
-                            render={renderTriggerWithOpenState}
-                            aria-label={showOptionsLabel}
-                        >
-                            <span aria-hidden='true'>⌄</span>
-                        </ComboBoxButton>
-                        {showClear && selectedKeys.length > 0 && (
-                            <button
-                                {...pt?.clear}
-                                type='button'
-                                disabled={disabled}
-                                className={classNames(
-                                    'cratis-dropdown__clear',
-                                    pt?.clear?.className,
-                                )}
-                                data-cratis-part='clear'
-                                data-disabled={disabled || undefined}
-                                aria-label={clearSelectionLabel}
-                                onClick={(event) =>
-                                    onChange?.([] as T, {
-                                        source: 'user',
-                                        nativeEvent: event.nativeEvent,
-                                    })
-                                }
-                            >
-                                <span aria-hidden='true'>×</span>
-                            </button>
-                        )}
-                        <ComboBoxPopover
-                            {...pt?.popover}
-                            className={classNames(
-                                'cratis-dropdown__popover',
-                                pt?.popover?.className,
-                                panelClassName,
-                            )}
-                            style={{
-                                zIndex: 'var(--cratis-z-index-overlay)',
-                                ...pt?.popover?.style,
-                            }}
-                            data-cratis-part='popover'
-                            data-open
-                        >
-                            <ComboBoxListBox
-                                {...asReactAriaListBoxProps<ResolvedOption>(pt?.listbox)}
-                                items={resolvedOptions}
-                                className={classNames(
-                                    'cratis-dropdown__listbox',
-                                    pt?.listbox?.className,
-                                )}
-                                data-cratis-part='listbox'
-                                data-open
-                            >
-                                {(option) => (
-                                    <ComboBoxListBoxItem
-                                        {...asReactAriaListBoxItemProps<ResolvedOption>(
-                                            pt?.option,
-                                        )}
-                                        id={option.key}
-                                        textValue={option.label}
-                                        isDisabled={option.disabled}
-                                        className={classNames(
-                                            'cratis-dropdown__option',
-                                            pt?.option?.className,
-                                        )}
-                                        data-cratis-part='option'
-                                        data-disabled={option.disabled || undefined}
-                                        data-selected={
-                                            selectedKeys.includes(option.key) || undefined
-                                        }
-                                    >
-                                        {option.label}
-                                    </ComboBoxListBoxItem>
-                                )}
-                            </ComboBoxListBox>
-                        </ComboBoxPopover>
-                    </ComboBox>
-                </span>
-            );
-        }
-
-        return (
-            <span
-                {...pt?.root}
-                className={rootClassName}
-                data-cratis-part='root'
-                data-invalid={effectiveInvalid || undefined}
-                data-disabled={disabled || undefined}
-                data-selected={selectedKeys.length > 0 || undefined}
-                style={{ ...pt?.root?.style, ...pt?.select?.style, ...style }}
-                onBlur={onBlur}
-            >
-                <select
-                    {...pt?.multiple}
-                    id={triggerId ?? pt?.multiple?.id}
-                    name={name}
-                    multiple
-                    disabled={disabled}
-                    value={selectedKeys}
-                    tabIndex={tabIndex}
-                    aria-label={effectiveAriaLabel}
-                    aria-labelledby={effectiveAriaLabelledby}
-                    aria-describedby={effectiveAriaDescribedby}
-                    aria-invalid={effectiveInvalid || undefined}
-                    className={classNames(
-                        'cratis-dropdown__multiple',
-                        pt?.input?.className,
-                        pt?.multiple?.className,
-                    )}
-                    data-cratis-part='multiple'
-                    data-disabled={disabled || undefined}
-                    data-invalid={effectiveInvalid || undefined}
-                    data-selected={selectedKeys.length > 0 || undefined}
-                    onChange={(event) => {
-                        const keys = Array.from(
-                            event.currentTarget.selectedOptions,
-                            (option) => option.value,
-                        );
-                        const values = resolvedOptions
-                            .filter((option) => keys.includes(option.key))
-                            .map((option) => option.value);
-                        onChange?.(values as T, {
-                            source: 'user',
-                            nativeEvent: event.nativeEvent,
-                        });
-                    }}
-                >
-                    {resolvedOptions.map((option) => (
-                        <option
-                            key={option.key}
-                            value={option.key}
-                            disabled={option.disabled}
-                            data-disabled={option.disabled || undefined}
-                            data-selected={selectedKeys.includes(option.key) || undefined}
-                        >
-                            {option.label}
-                        </option>
-                    ))}
-                </select>
-                {showClear && selectedKeys.length > 0 && (
-                    <button
-                        {...pt?.clear}
-                        type='button'
-                        disabled={disabled}
-                        className={classNames(
-                            'cratis-dropdown__clear',
-                            pt?.clear?.className,
-                        )}
-                        data-cratis-part='clear'
-                        data-disabled={disabled || undefined}
-                        aria-label={clearSelectionLabel}
-                        onClick={(event) =>
-                            onChange?.([] as T, {
-                                source: 'user',
-                                nativeEvent: event.nativeEvent,
-                            })
-                        }
-                    >
-                        <span aria-hidden='true'>×</span>
-                    </button>
-                )}
-            </span>
-        );
-    }
-
-    if (filter) {
-        return (
-            <span
-                {...pt?.root}
-                className={rootClassName}
-                data-cratis-part='root'
-                data-invalid={effectiveInvalid || undefined}
-                data-disabled={disabled || undefined}
-                data-open={isOpen || undefined}
-                data-selected={selectedKey !== null || undefined}
-                style={{ ...pt?.root?.style, ...pt?.select?.style, ...style }}
-                onBlur={onBlur}
-            >
-                <ComboBox
-                    onOpenChange={setIsOpen}
-                    value={selectedKey}
-                    onChange={selectOption}
-                    isDisabled={disabled}
-                    isInvalid={effectiveInvalid}
-                    name={name}
-                    aria-label={effectiveAriaLabel}
-                    aria-labelledby={effectiveAriaLabelledby}
-                    aria-describedby={effectiveAriaDescribedby}
-                    allowsEmptyCollection
-                    className='cratis-dropdown__combobox'
-                >
-                    <Input
-                        {...pt?.filter}
-                        id={triggerId}
-                        placeholder={filterPlaceholder ?? placeholder}
-                        tabIndex={tabIndex}
-                        aria-invalid={effectiveInvalid || undefined}
-                        className={classNames(
-                            'cratis-dropdown__filter',
-                            pt?.input?.className,
-                            pt?.filter?.className,
-                        )}
-                        style={{ ...pt?.input?.style, ...pt?.filter?.style }}
-                        data-cratis-part='filter'
-                        data-disabled={disabled || undefined}
-                        data-invalid={effectiveInvalid || undefined}
-                        data-open={isOpen || undefined}
-                    />
-                    <ComboBoxButton
-                        {...asReactAriaButtonProps(pt?.trigger)}
-                        className={classNames(
-                            'cratis-dropdown__indicator',
-                            pt?.trigger?.className,
-                        )}
-                        data-cratis-part='trigger'
-                        data-disabled={disabled || undefined}
-                        data-invalid={effectiveInvalid || undefined}
-                        data-selected={selectedKey !== null || undefined}
-                        render={renderTriggerWithOpenState}
-                        aria-label={showOptionsLabel}
-                    >
-                        <span aria-hidden='true'>⌄</span>
-                    </ComboBoxButton>
-                    {showClear && selectedKey !== null && (
-                        <button
-                            {...pt?.clear}
-                            type='button'
-                            disabled={disabled}
-                            className={classNames(
-                                'cratis-dropdown__clear',
-                                pt?.clear?.className,
-                            )}
-                            data-cratis-part='clear'
-                            data-disabled={disabled || undefined}
-                            aria-label={clearSelectionLabel}
-                            onClick={(event) =>
-                                onChange?.(null as T, {
-                                    source: 'user',
-                                    nativeEvent: event.nativeEvent,
-                                })
-                            }
-                        >
-                            <span aria-hidden='true'>×</span>
-                        </button>
-                    )}
-                    <ComboBoxPopover
-                        {...pt?.popover}
-                        className={classNames(
-                            'cratis-dropdown__popover',
-                            pt?.popover?.className,
-                            panelClassName,
-                        )}
-                        style={{
-                            zIndex: 'var(--cratis-z-index-overlay)',
-                            ...pt?.popover?.style,
-                        }}
-                        data-cratis-part='popover'
-                        data-open
-                    >
-                        <ComboBoxListBox
-                            {...asReactAriaListBoxProps<ResolvedOption>(pt?.listbox)}
-                            items={resolvedOptions}
-                            className={classNames(
-                                'cratis-dropdown__listbox',
-                                pt?.listbox?.className,
-                            )}
-                            data-cratis-part='listbox'
-                            data-open
-                        >
-                            {(option) => (
-                                <ComboBoxListBoxItem
-                                    {...asReactAriaListBoxItemProps<ResolvedOption>(
-                                        pt?.option,
-                                    )}
-                                    id={option.key}
-                                    textValue={option.label}
-                                    isDisabled={option.disabled}
-                                    className={classNames(
-                                        'cratis-dropdown__option',
-                                        pt?.option?.className,
-                                    )}
-                                    data-cratis-part='option'
-                                    data-disabled={option.disabled || undefined}
-                                    data-selected={
-                                        option.key === selectedKey || undefined
-                                    }
-                                >
-                                    {option.label}
-                                </ComboBoxListBoxItem>
-                            )}
-                        </ComboBoxListBox>
-                    </ComboBoxPopover>
-                </ComboBox>
-            </span>
-        );
-    }
-
-    return (
-        <span
-            {...pt?.root}
-            className={rootClassName}
-            data-cratis-part='root'
-            data-invalid={effectiveInvalid || undefined}
-            data-disabled={disabled || undefined}
-            data-open={isOpen || undefined}
-            data-selected={selectedKey !== null || undefined}
-            style={{ ...pt?.root?.style, ...pt?.select?.style, ...style }}
-            onBlur={onBlur}
-        >
-            <AriaSelect
-                onOpenChange={setIsOpen}
-                value={selectedKey}
-                onChange={selectOption}
-                isDisabled={disabled}
-                isInvalid={effectiveInvalid}
-                name={name}
-                aria-label={effectiveAriaLabel}
-                aria-labelledby={effectiveAriaLabelledby}
-                aria-describedby={effectiveAriaDescribedby}
-                className='cratis-dropdown__select'
-            >
-                <AriaButton
-                    {...asReactAriaButtonProps(pt?.trigger)}
-                    ref={applyTriggerState}
-                    id={triggerId}
-                    excludeFromTabOrder={tabIndex === -1}
-                    aria-invalid={effectiveInvalid || undefined}
-                    className={classNames(
-                        'cratis-dropdown__trigger',
-                        pt?.input?.className,
-                        pt?.trigger?.className,
-                    )}
-                    style={{ ...pt?.input?.style, ...pt?.trigger?.style }}
-                    data-cratis-part='trigger'
-                    data-disabled={disabled || undefined}
-                    data-invalid={effectiveInvalid || undefined}
-                    data-selected={selectedKey !== null || undefined}
-                    render={renderTriggerWithOpenState}
-                >
-                    <SelectValue
-                        {...pt?.value}
-                        className={classNames(
-                            'cratis-dropdown__value',
-                            pt?.value?.className,
-                        )}
-                        data-cratis-part='value'
-                        data-disabled={disabled || undefined}
-                        data-invalid={effectiveInvalid || undefined}
-                        data-open={isOpen || undefined}
-                        data-selected={selectedKey !== null || undefined}
-                    >
-                        {selectedOption?.label ?? placeholder}
-                    </SelectValue>
-                    <span
-                        {...pt?.indicator}
-                        className={classNames(
-                            'cratis-dropdown__indicator',
-                            pt?.indicator?.className,
-                        )}
-                        data-cratis-part='indicator'
-                        data-disabled={disabled || undefined}
-                        data-invalid={effectiveInvalid || undefined}
-                        data-open={isOpen || undefined}
-                        aria-hidden='true'
-                    >
-                        ⌄
-                    </span>
-                </AriaButton>
-                {showClear && selectedKey !== null && (
-                    <button
-                        {...pt?.clear}
-                        type='button'
-                        disabled={disabled}
-                        className={classNames(
-                            'cratis-dropdown__clear',
-                            pt?.clear?.className,
-                        )}
-                        data-cratis-part='clear'
-                        data-disabled={disabled || undefined}
-                        aria-label={clearSelectionLabel}
-                        onClick={(event) =>
-                            onChange?.(null as T, {
-                                source: 'user',
-                                nativeEvent: event.nativeEvent,
-                            })
-                        }
-                    >
-                        <span aria-hidden='true'>×</span>
-                    </button>
-                )}
-                <Popover
-                    {...pt?.popover}
-                    className={classNames(
-                        'cratis-dropdown__popover',
-                        pt?.popover?.className,
-                        panelClassName,
-                    )}
-                    style={{
-                        zIndex: 'var(--cratis-z-index-overlay)',
-                        ...pt?.popover?.style,
-                    }}
-                    data-cratis-part='popover'
-                    data-open
-                >
-                    <ListBox
-                        {...asReactAriaListBoxProps<ResolvedOption>(pt?.listbox)}
-                        items={resolvedOptions}
-                        className={classNames(
-                            'cratis-dropdown__listbox',
-                            pt?.listbox?.className,
-                        )}
-                        data-cratis-part='listbox'
-                        data-open
-                    >
-                        {(option) => (
-                            <ListBoxItem
-                                {...asReactAriaListBoxItemProps<ResolvedOption>(
-                                    pt?.option,
-                                )}
-                                id={option.key}
-                                textValue={option.label}
-                                isDisabled={option.disabled}
-                                className={classNames(
-                                    'cratis-dropdown__option',
-                                    pt?.option?.className,
-                                )}
-                                data-cratis-part='option'
-                                data-disabled={option.disabled || undefined}
-                                data-selected={option.key === selectedKey || undefined}
-                            >
-                                {option.label}
-                            </ListBoxItem>
-                        )}
-                    </ListBox>
-                </Popover>
-            </AriaSelect>
-        </span>
-    );
+export const Dropdown = <T = unknown,>(props: DropdownProps<T>) => {
+    const declaration = unstable_useSlot('dropdown.select', coreDropdownDeclaration);
+    return renderSlot(declaration, props as DropdownProps<unknown>);
 };
 
 Dropdown.displayName = 'Dropdown';
diff --git a/Source/Dropdown/DropdownImplementation.tsx b/Source/Dropdown/DropdownImplementation.tsx
index 6c902b89..4c836e2e 100644
--- a/Source/Dropdown/DropdownImplementation.tsx
+++ b/Source/Dropdown/DropdownImplementation.tsx
@@ -20,6 +20,8 @@ import {
     ListBoxItem as ComboBoxListBoxItem,
     Popover as ComboBoxPopover,
 } from 'react-aria-components/ComboBox';
+import { UNSAFE_PortalProvider } from 'react-aria/PortalProvider';
+import { unstable_useOverlayEnvironment } from '../renderer/RendererContext';
 import { useCratisComponentsConfig } from '../Common/CratisComponentsProvider';
 import type { DropdownProps } from './Dropdown';
 import {
@@ -129,6 +131,7 @@ export const DropdownImplementation = <T = unknown,>({
     pt,
 }: DropdownProps<T>) => {
     const [isOpen, setIsOpen] = useState(false);
+    const overlayEnvironment = unstable_useOverlayEnvironment();
     const { messages } = useCratisComponentsConfig();
     const dropdownMessages = messages?.dropdown;
     const showOptionsLabel =
@@ -217,11 +220,246 @@ export const DropdownImplementation = <T = unknown,>({
                     style={{ ...pt?.root?.style, ...pt?.select?.style, ...style }}
                     onBlur={onBlur}
                 >
+                    <UNSAFE_PortalProvider getContainer={overlayEnvironment.getContainer}>
+                        <ComboBox
+                            selectionMode='multiple'
+                            onOpenChange={setIsOpen}
+                            value={selectedKeys}
+                            onChange={selectOptions}
+                            isDisabled={disabled}
+                            isInvalid={effectiveInvalid}
+                            name={name}
+                            aria-label={effectiveAriaLabel}
+                            aria-labelledby={effectiveAriaLabelledby}
+                            aria-describedby={effectiveAriaDescribedby}
+                            allowsEmptyCollection
+                            className='cratis-dropdown__combobox'
+                        >
+                            <ComboBoxValue
+                                {...pt?.value}
+                                placeholder={placeholder}
+                                className={classNames(
+                                    'cratis-dropdown__value',
+                                    pt?.value?.className,
+                                )}
+                                data-cratis-part='value'
+                                data-disabled={disabled || undefined}
+                                data-invalid={effectiveInvalid || undefined}
+                                data-open={isOpen || undefined}
+                                data-selected={selectedKeys.length > 0 || undefined}
+                            />
+                            <Input
+                                {...pt?.filter}
+                                id={triggerId}
+                                placeholder={filterPlaceholder ?? placeholder}
+                                tabIndex={tabIndex}
+                                aria-invalid={effectiveInvalid || undefined}
+                                className={classNames(
+                                    'cratis-dropdown__filter',
+                                    pt?.input?.className,
+                                    pt?.filter?.className,
+                                )}
+                                style={{ ...pt?.input?.style, ...pt?.filter?.style }}
+                                data-cratis-part='filter'
+                                data-disabled={disabled || undefined}
+                                data-invalid={effectiveInvalid || undefined}
+                                data-open={isOpen || undefined}
+                            />
+                            <ComboBoxButton
+                                {...asReactAriaButtonProps(pt?.trigger)}
+                                className={classNames(
+                                    'cratis-dropdown__indicator',
+                                    pt?.trigger?.className,
+                                )}
+                                data-cratis-part='trigger'
+                                data-disabled={disabled || undefined}
+                                data-invalid={effectiveInvalid || undefined}
+                                data-selected={selectedKeys.length > 0 || undefined}
+                                render={renderTriggerWithOpenState}
+                                aria-label={showOptionsLabel}
+                            >
+                                <span aria-hidden='true'>⌄</span>
+                            </ComboBoxButton>
+                            {showClear && selectedKeys.length > 0 && (
+                                <button
+                                    {...pt?.clear}
+                                    type='button'
+                                    disabled={disabled}
+                                    className={classNames(
+                                        'cratis-dropdown__clear',
+                                        pt?.clear?.className,
+                                    )}
+                                    data-cratis-part='clear'
+                                    data-disabled={disabled || undefined}
+                                    aria-label={clearSelectionLabel}
+                                    onClick={(event) =>
+                                        onChange?.([] as T, {
+                                            source: 'user',
+                                            nativeEvent: event.nativeEvent,
+                                        })
+                                    }
+                                >
+                                    <span aria-hidden='true'>×</span>
+                                </button>
+                            )}
+                            <ComboBoxPopover
+                                {...pt?.popover}
+                                className={classNames(
+                                    'cratis-dropdown__popover',
+                                    pt?.popover?.className,
+                                    panelClassName,
+                                )}
+                                style={{
+                                    zIndex: 'var(--cratis-z-index-overlay)',
+                                    ...pt?.popover?.style,
+                                }}
+                                data-cratis-part='popover'
+                                data-open
+                            >
+                                <ComboBoxListBox
+                                    {...asReactAriaListBoxProps<ResolvedOption>(
+                                        pt?.listbox,
+                                    )}
+                                    items={resolvedOptions}
+                                    className={classNames(
+                                        'cratis-dropdown__listbox',
+                                        pt?.listbox?.className,
+                                    )}
+                                    data-cratis-part='listbox'
+                                    data-open
+                                >
+                                    {(option) => (
+                                        <ComboBoxListBoxItem
+                                            {...asReactAriaListBoxItemProps<ResolvedOption>(
+                                                pt?.option,
+                                            )}
+                                            id={option.key}
+                                            textValue={option.label}
+                                            isDisabled={option.disabled}
+                                            className={classNames(
+                                                'cratis-dropdown__option',
+                                                pt?.option?.className,
+                                            )}
+                                            data-cratis-part='option'
+                                            data-disabled={option.disabled || undefined}
+                                            data-selected={
+                                                selectedKeys.includes(option.key) ||
+                                                undefined
+                                            }
+                                        >
+                                            {option.label}
+                                        </ComboBoxListBoxItem>
+                                    )}
+                                </ComboBoxListBox>
+                            </ComboBoxPopover>
+                        </ComboBox>
+                    </UNSAFE_PortalProvider>
+                </span>
+            );
+        }
+
+        return (
+            <span
+                {...pt?.root}
+                className={rootClassName}
+                data-cratis-part='root'
+                data-invalid={effectiveInvalid || undefined}
+                data-disabled={disabled || undefined}
+                data-selected={selectedKeys.length > 0 || undefined}
+                style={{ ...pt?.root?.style, ...pt?.select?.style, ...style }}
+                onBlur={onBlur}
+            >
+                <select
+                    {...pt?.multiple}
+                    id={triggerId ?? pt?.multiple?.id}
+                    name={name}
+                    multiple
+                    disabled={disabled}
+                    value={selectedKeys}
+                    tabIndex={tabIndex}
+                    aria-label={effectiveAriaLabel}
+                    aria-labelledby={effectiveAriaLabelledby}
+                    aria-describedby={effectiveAriaDescribedby}
+                    aria-invalid={effectiveInvalid || undefined}
+                    className={classNames(
+                        'cratis-dropdown__multiple',
+                        pt?.input?.className,
+                        pt?.multiple?.className,
+                    )}
+                    data-cratis-part='multiple'
+                    data-disabled={disabled || undefined}
+                    data-invalid={effectiveInvalid || undefined}
+                    data-selected={selectedKeys.length > 0 || undefined}
+                    onChange={(event) => {
+                        const keys = Array.from(
+                            event.currentTarget.selectedOptions,
+                            (option) => option.value,
+                        );
+                        const values = resolvedOptions
+                            .filter((option) => keys.includes(option.key))
+                            .map((option) => option.value);
+                        onChange?.(values as T, {
+                            source: 'user',
+                            nativeEvent: event.nativeEvent,
+                        });
+                    }}
+                >
+                    {resolvedOptions.map((option) => (
+                        <option
+                            key={option.key}
+                            value={option.key}
+                            disabled={option.disabled}
+                            data-disabled={option.disabled || undefined}
+                            data-selected={selectedKeys.includes(option.key) || undefined}
+                        >
+                            {option.label}
+                        </option>
+                    ))}
+                </select>
+                {showClear && selectedKeys.length > 0 && (
+                    <button
+                        {...pt?.clear}
+                        type='button'
+                        disabled={disabled}
+                        className={classNames(
+                            'cratis-dropdown__clear',
+                            pt?.clear?.className,
+                        )}
+                        data-cratis-part='clear'
+                        data-disabled={disabled || undefined}
+                        aria-label={clearSelectionLabel}
+                        onClick={(event) =>
+                            onChange?.([] as T, {
+                                source: 'user',
+                                nativeEvent: event.nativeEvent,
+                            })
+                        }
+                    >
+                        <span aria-hidden='true'>×</span>
+                    </button>
+                )}
+            </span>
+        );
+    }
+
+    if (filter) {
+        return (
+            <span
+                {...pt?.root}
+                className={rootClassName}
+                data-cratis-part='root'
+                data-invalid={effectiveInvalid || undefined}
+                data-disabled={disabled || undefined}
+                data-open={isOpen || undefined}
+                data-selected={selectedKey !== null || undefined}
+                style={{ ...pt?.root?.style, ...pt?.select?.style, ...style }}
+                onBlur={onBlur}
+            >
+                <UNSAFE_PortalProvider getContainer={overlayEnvironment.getContainer}>
                     <ComboBox
-                        selectionMode='multiple'
                         onOpenChange={setIsOpen}
-                        value={selectedKeys}
-                        onChange={selectOptions}
+                        value={selectedKey}
+                        onChange={selectOption}
                         isDisabled={disabled}
                         isInvalid={effectiveInvalid}
                         name={name}
@@ -231,19 +469,6 @@ export const DropdownImplementation = <T = unknown,>({
                         allowsEmptyCollection
                         className='cratis-dropdown__combobox'
                     >
-                        <ComboBoxValue
-                            {...pt?.value}
-                            placeholder={placeholder}
-                            className={classNames(
-                                'cratis-dropdown__value',
-                                pt?.value?.className,
-                            )}
-                            data-cratis-part='value'
-                            data-disabled={disabled || undefined}
-                            data-invalid={effectiveInvalid || undefined}
-                            data-open={isOpen || undefined}
-                            data-selected={selectedKeys.length > 0 || undefined}
-                        />
                         <Input
                             {...pt?.filter}
                             id={triggerId}
@@ -270,13 +495,13 @@ export const DropdownImplementation = <T = unknown,>({
                             data-cratis-part='trigger'
                             data-disabled={disabled || undefined}
                             data-invalid={effectiveInvalid || undefined}
-                            data-selected={selectedKeys.length > 0 || undefined}
+                            data-selected={selectedKey !== null || undefined}
                             render={renderTriggerWithOpenState}
                             aria-label={showOptionsLabel}
                         >
                             <span aria-hidden='true'>⌄</span>
                         </ComboBoxButton>
-                        {showClear && selectedKeys.length > 0 && (
+                        {showClear && selectedKey !== null && (
                             <button
                                 {...pt?.clear}
                                 type='button'
@@ -289,7 +514,7 @@ export const DropdownImplementation = <T = unknown,>({
                                 data-disabled={disabled || undefined}
                                 aria-label={clearSelectionLabel}
                                 onClick={(event) =>
-                                    onChange?.([] as T, {
+                                    onChange?.(null as T, {
                                         source: 'user',
                                         nativeEvent: event.nativeEvent,
                                     })
@@ -337,7 +562,7 @@ export const DropdownImplementation = <T = unknown,>({
                                         data-cratis-part='option'
                                         data-disabled={option.disabled || undefined}
                                         data-selected={
-                                            selectedKeys.includes(option.key) || undefined
+                                            option.key === selectedKey || undefined
                                         }
                                     >
                                         {option.label}
@@ -346,108 +571,25 @@ export const DropdownImplementation = <T = unknown,>({
                             </ComboBoxListBox>
                         </ComboBoxPopover>
                     </ComboBox>
-                </span>
-            );
-        }
-
-        return (
-            <span
-                {...pt?.root}
-                className={rootClassName}
-                data-cratis-part='root'
-                data-invalid={effectiveInvalid || undefined}
-                data-disabled={disabled || undefined}
-                data-selected={selectedKeys.length > 0 || undefined}
-                style={{ ...pt?.root?.style, ...pt?.select?.style, ...style }}
-                onBlur={onBlur}
-            >
-                <select
-                    {...pt?.multiple}
-                    id={triggerId ?? pt?.multiple?.id}
-                    name={name}
-                    multiple
-                    disabled={disabled}
-                    value={selectedKeys}
-                    tabIndex={tabIndex}
-                    aria-label={effectiveAriaLabel}
-                    aria-labelledby={effectiveAriaLabelledby}
-                    aria-describedby={effectiveAriaDescribedby}
-                    aria-invalid={effectiveInvalid || undefined}
-                    className={classNames(
-                        'cratis-dropdown__multiple',
-                        pt?.input?.className,
-                        pt?.multiple?.className,
-                    )}
-                    data-cratis-part='multiple'
-                    data-disabled={disabled || undefined}
-                    data-invalid={effectiveInvalid || undefined}
-                    data-selected={selectedKeys.length > 0 || undefined}
-                    onChange={(event) => {
-                        const keys = Array.from(
-                            event.currentTarget.selectedOptions,
-                            (option) => option.value,
-                        );
-                        const values = resolvedOptions
-                            .filter((option) => keys.includes(option.key))
-                            .map((option) => option.value);
-                        onChange?.(values as T, {
-                            source: 'user',
-                            nativeEvent: event.nativeEvent,
-                        });
-                    }}
-                >
-                    {resolvedOptions.map((option) => (
-                        <option
-                            key={option.key}
-                            value={option.key}
-                            disabled={option.disabled}
-                            data-disabled={option.disabled || undefined}
-                            data-selected={selectedKeys.includes(option.key) || undefined}
-                        >
-                            {option.label}
-                        </option>
-                    ))}
-                </select>
-                {showClear && selectedKeys.length > 0 && (
-                    <button
-                        {...pt?.clear}
-                        type='button'
-                        disabled={disabled}
-                        className={classNames(
-                            'cratis-dropdown__clear',
-                            pt?.clear?.className,
-                        )}
-                        data-cratis-part='clear'
-                        data-disabled={disabled || undefined}
-                        aria-label={clearSelectionLabel}
-                        onClick={(event) =>
-                            onChange?.([] as T, {
-                                source: 'user',
-                                nativeEvent: event.nativeEvent,
-                            })
-                        }
-                    >
-                        <span aria-hidden='true'>×</span>
-                    </button>
-                )}
+                </UNSAFE_PortalProvider>
             </span>
         );
     }
 
-    if (filter) {
-        return (
-            <span
-                {...pt?.root}
-                className={rootClassName}
-                data-cratis-part='root'
-                data-invalid={effectiveInvalid || undefined}
-                data-disabled={disabled || undefined}
-                data-open={isOpen || undefined}
-                data-selected={selectedKey !== null || undefined}
-                style={{ ...pt?.root?.style, ...pt?.select?.style, ...style }}
-                onBlur={onBlur}
-            >
-                <ComboBox
+    return (
+        <span
+            {...pt?.root}
+            className={rootClassName}
+            data-cratis-part='root'
+            data-invalid={effectiveInvalid || undefined}
+            data-disabled={disabled || undefined}
+            data-open={isOpen || undefined}
+            data-selected={selectedKey !== null || undefined}
+            style={{ ...pt?.root?.style, ...pt?.select?.style, ...style }}
+            onBlur={onBlur}
+        >
+            <UNSAFE_PortalProvider getContainer={overlayEnvironment.getContainer}>
+                <AriaSelect
                     onOpenChange={setIsOpen}
                     value={selectedKey}
                     onChange={selectOption}
@@ -457,41 +599,55 @@ export const DropdownImplementation = <T = unknown,>({
                     aria-label={effectiveAriaLabel}
                     aria-labelledby={effectiveAriaLabelledby}
                     aria-describedby={effectiveAriaDescribedby}
-                    allowsEmptyCollection
-                    className='cratis-dropdown__combobox'
+                    className='cratis-dropdown__select'
                 >
-                    <Input
-                        {...pt?.filter}
+                    <AriaButton
+                        {...asReactAriaButtonProps(pt?.trigger)}
+                        ref={applyTriggerState}
                         id={triggerId}
-                        placeholder={filterPlaceholder ?? placeholder}
-                        tabIndex={tabIndex}
+                        excludeFromTabOrder={tabIndex === -1}
                         aria-invalid={effectiveInvalid || undefined}
                         className={classNames(
-                            'cratis-dropdown__filter',
+                            'cratis-dropdown__trigger',
                             pt?.input?.className,
-                            pt?.filter?.className,
-                        )}
-                        style={{ ...pt?.input?.style, ...pt?.filter?.style }}
-                        data-cratis-part='filter'
-                        data-disabled={disabled || undefined}
-                        data-invalid={effectiveInvalid || undefined}
-                        data-open={isOpen || undefined}
-                    />
-                    <ComboBoxButton
-                        {...asReactAriaButtonProps(pt?.trigger)}
-                        className={classNames(
-                            'cratis-dropdown__indicator',
                             pt?.trigger?.className,
                         )}
+                        style={{ ...pt?.input?.style, ...pt?.trigger?.style }}
                         data-cratis-part='trigger'
                         data-disabled={disabled || undefined}
                         data-invalid={effectiveInvalid || undefined}
                         data-selected={selectedKey !== null || undefined}
                         render={renderTriggerWithOpenState}
-                        aria-label={showOptionsLabel}
                     >
-                        <span aria-hidden='true'>⌄</span>
-                    </ComboBoxButton>
+                        <SelectValue
+                            {...pt?.value}
+                            className={classNames(
+                                'cratis-dropdown__value',
+                                pt?.value?.className,
+                            )}
+                            data-cratis-part='value'
+                            data-disabled={disabled || undefined}
+                            data-invalid={effectiveInvalid || undefined}
+                            data-open={isOpen || undefined}
+                            data-selected={selectedKey !== null || undefined}
+                        >
+                            {selectedOption?.label ?? placeholder}
+                        </SelectValue>
+                        <span
+                            {...pt?.indicator}
+                            className={classNames(
+                                'cratis-dropdown__indicator',
+                                pt?.indicator?.className,
+                            )}
+                            data-cratis-part='indicator'
+                            data-disabled={disabled || undefined}
+                            data-invalid={effectiveInvalid || undefined}
+                            data-open={isOpen || undefined}
+                            aria-hidden='true'
+                        >
+                            ⌄
+                        </span>
+                    </AriaButton>
                     {showClear && selectedKey !== null && (
                         <button
                             {...pt?.clear}
@@ -514,7 +670,7 @@ export const DropdownImplementation = <T = unknown,>({
                             <span aria-hidden='true'>×</span>
                         </button>
                     )}
-                    <ComboBoxPopover
+                    <Popover
                         {...pt?.popover}
                         className={classNames(
                             'cratis-dropdown__popover',
@@ -528,7 +684,7 @@ export const DropdownImplementation = <T = unknown,>({
                         data-cratis-part='popover'
                         data-open
                     >
-                        <ComboBoxListBox
+                        <ListBox
                             {...asReactAriaListBoxProps<ResolvedOption>(pt?.listbox)}
                             items={resolvedOptions}
                             className={classNames(
@@ -539,7 +695,7 @@ export const DropdownImplementation = <T = unknown,>({
                             data-open
                         >
                             {(option) => (
-                                <ComboBoxListBoxItem
+                                <ListBoxItem
                                     {...asReactAriaListBoxItemProps<ResolvedOption>(
                                         pt?.option,
                                     )}
@@ -557,154 +713,12 @@ export const DropdownImplementation = <T = unknown,>({
                                     }
                                 >
                                     {option.label}
-                                </ComboBoxListBoxItem>
+                                </ListBoxItem>
                             )}
-                        </ComboBoxListBox>
-                    </ComboBoxPopover>
-                </ComboBox>
-            </span>
-        );
-    }
-
-    return (
-        <span
-            {...pt?.root}
-            className={rootClassName}
-            data-cratis-part='root'
-            data-invalid={effectiveInvalid || undefined}
-            data-disabled={disabled || undefined}
-            data-open={isOpen || undefined}
-            data-selected={selectedKey !== null || undefined}
-            style={{ ...pt?.root?.style, ...pt?.select?.style, ...style }}
-            onBlur={onBlur}
-        >
-            <AriaSelect
-                onOpenChange={setIsOpen}
-                value={selectedKey}
-                onChange={selectOption}
-                isDisabled={disabled}
-                isInvalid={effectiveInvalid}
-                name={name}
-                aria-label={effectiveAriaLabel}
-                aria-labelledby={effectiveAriaLabelledby}
-                aria-describedby={effectiveAriaDescribedby}
-                className='cratis-dropdown__select'
-            >
-                <AriaButton
-                    {...asReactAriaButtonProps(pt?.trigger)}
-                    ref={applyTriggerState}
-                    id={triggerId}
-                    excludeFromTabOrder={tabIndex === -1}
-                    aria-invalid={effectiveInvalid || undefined}
-                    className={classNames(
-                        'cratis-dropdown__trigger',
-                        pt?.input?.className,
-                        pt?.trigger?.className,
-                    )}
-                    style={{ ...pt?.input?.style, ...pt?.trigger?.style }}
-                    data-cratis-part='trigger'
-                    data-disabled={disabled || undefined}
-                    data-invalid={effectiveInvalid || undefined}
-                    data-selected={selectedKey !== null || undefined}
-                    render={renderTriggerWithOpenState}
-                >
-                    <SelectValue
-                        {...pt?.value}
-                        className={classNames(
-                            'cratis-dropdown__value',
-                            pt?.value?.className,
-                        )}
-                        data-cratis-part='value'
-                        data-disabled={disabled || undefined}
-                        data-invalid={effectiveInvalid || undefined}
-                        data-open={isOpen || undefined}
-                        data-selected={selectedKey !== null || undefined}
-                    >
-                        {selectedOption?.label ?? placeholder}
-                    </SelectValue>
-                    <span
-                        {...pt?.indicator}
-                        className={classNames(
-                            'cratis-dropdown__indicator',
-                            pt?.indicator?.className,
-                        )}
-                        data-cratis-part='indicator'
-                        data-disabled={disabled || undefined}
-                        data-invalid={effectiveInvalid || undefined}
-                        data-open={isOpen || undefined}
-                        aria-hidden='true'
-                    >
-                        ⌄
-                    </span>
-                </AriaButton>
-                {showClear && selectedKey !== null && (
-                    <button
-                        {...pt?.clear}
-                        type='button'
-                        disabled={disabled}
-                        className={classNames(
-                            'cratis-dropdown__clear',
-                            pt?.clear?.className,
-                        )}
-                        data-cratis-part='clear'
-                        data-disabled={disabled || undefined}
-                        aria-label={clearSelectionLabel}
-                        onClick={(event) =>
-                            onChange?.(null as T, {
-                                source: 'user',
-                                nativeEvent: event.nativeEvent,
-                            })
-                        }
-                    >
-                        <span aria-hidden='true'>×</span>
-                    </button>
-                )}
-                <Popover
-                    {...pt?.popover}
-                    className={classNames(
-                        'cratis-dropdown__popover',
-                        pt?.popover?.className,
-                        panelClassName,
-                    )}
-                    style={{
-                        zIndex: 'var(--cratis-z-index-overlay)',
-                        ...pt?.popover?.style,
-                    }}
-                    data-cratis-part='popover'
-                    data-open
-                >
-                    <ListBox
-                        {...asReactAriaListBoxProps<ResolvedOption>(pt?.listbox)}
-                        items={resolvedOptions}
-                        className={classNames(
-                            'cratis-dropdown__listbox',
-                            pt?.listbox?.className,
-                        )}
-                        data-cratis-part='listbox'
-                        data-open
-                    >
-                        {(option) => (
-                            <ListBoxItem
-                                {...asReactAriaListBoxItemProps<ResolvedOption>(
-                                    pt?.option,
-                                )}
-                                id={option.key}
-                                textValue={option.label}
-                                isDisabled={option.disabled}
-                                className={classNames(
-                                    'cratis-dropdown__option',
-                                    pt?.option?.className,
-                                )}
-                                data-cratis-part='option'
-                                data-disabled={option.disabled || undefined}
-                                data-selected={option.key === selectedKey || undefined}
-                            >
-                                {option.label}
-                            </ListBoxItem>
-                        )}
-                    </ListBox>
-                </Popover>
-            </AriaSelect>
+                        </ListBox>
+                    </Popover>
+                </AriaSelect>
+            </UNSAFE_PortalProvider>
         </span>
     );
 };
diff --git a/Source/package.json b/Source/package.json
index 5254acd4..a2256a77 100644
--- a/Source/package.json
+++ b/Source/package.json
@@ -166,6 +166,7 @@
         "@internationalized/date": "3.12.3",
         "allotment": "1.20.5",
         "framer-motion": "13.1.1",
+        "react-aria": "3.51.0",
         "react-aria-components": "1.20.0",
         "react-icons": "5.7.0",
         "ts-deepmerge": "8.0.0"
diff --git a/Source/renderer/README.md b/Source/renderer/README.md
index ea416b20..da3e3f9e 100644
--- a/Source/renderer/README.md
+++ b/Source/renderer/README.md
@@ -3,16 +3,16 @@
 
 # Experimental renderer contracts
 
-This directory contains the D1 contracts, D2 provider/context/resolution infrastructure, and E1
-presentation self-hosting. `preloadRenderer` and lazy renderer entries remain deferred:
+This directory contains the D1 contracts, D2 provider/context/resolution infrastructure, and E1/E2
+presentation plus atomic self-hosting. `preloadRenderer` and lazy renderer entries remain deferred:
 `SlotDeclaration` has no load contract yet, so adding preload behavior now would invent an ABI that
 adapter declarations cannot honor.
 
-The nine element-bounded presentation facades resolve external scopes/providers first and then pass
-a frozen, facade-local Core declaration to `unstable_useSlot`. This keeps the application provider
-and package root setup-only: neither imports the private all-family `coreSlots.ts` ABI-proof table.
-Zero-configuration local Core resolution is silent, an active partial adapter reports fallback once
-after mount, and `rendererFallback='throw'` rejects every Core fallback.
+All fourteen facades resolve external scopes/providers first and then pass a frozen, facade-local
+Core declaration to `unstable_useSlot`. This keeps the application provider and package root
+setup-only: neither imports the private all-family `coreSlots.ts` ABI-proof table. Zero-configuration
+local Core resolution is silent, an active partial adapter reports fallback once after mount, and
+`rendererFallback='throw'` rejects every Core fallback.
 
 The initial slot table contains only components with real standalone public contracts:
 
@@ -26,7 +26,13 @@ The initial slot table contains only components with real standalone public cont
 The basic controls are standalone Common primitives. Arc-bound `CommandForm` fields remain
 high-order composites and must never be registered as substitutes for these slots.
 
-E1 routes only the nine presentation candidates. Tooltip, dropdown, dialog, date picker, and table
-paginator remain atomic E2 work; `coreSlots.ts` names their current public components only to prove
-the complete 14-slot ABI and must not become provider or public-barrel runtime input until E2
-extracts recursion-safe implementations.
+E1 routes the nine presentation candidates. E2 routes tooltip, dropdown, dialog, date picker, and
+table paginator as atomic slots whose external adapters replace Core interaction ownership entirely.
+Their Core implementations self-host React Aria portals through the local overlay environment only
+around the overlay-owning subtree; merely reading the hook, rendering a closed control, or rendering
+SSR never looks up a container. `null` defers the overlay rather than falling back to `document.body`.
+
+`ButtonImplementation` composes `TooltipImplementation` directly to avoid slot recursion. Core
+`TablePaginatorImplementation` intentionally composes public `Button` as a distinct nested
+presentation slot. The private `coreSlots.ts` table names only non-facade implementations and remains
+unreachable from the setup-only root, `./Common`, and public `./renderer` closures.
diff --git a/Source/renderer/coreSlots.ts b/Source/renderer/coreSlots.ts
index 21b3b8fe..40aefd6b 100644
--- a/Source/renderer/coreSlots.ts
+++ b/Source/renderer/coreSlots.ts
@@ -4,22 +4,19 @@
 import type { ComponentType } from 'react';
 import { ButtonImplementation } from '../Common/ButtonImplementation';
 import { CheckboxImplementation } from '../Common/CheckboxImplementation';
-import { DatePickerInput } from '../Common/DatePickerInput';
+import { DatePickerInputImplementation } from '../Common/DatePickerInputImplementation';
 import { IconButtonImplementation } from '../Common/IconButtonImplementation';
 import { RadioImplementation } from '../Common/RadioImplementation';
 import { SurfaceImplementation } from '../Common/SurfaceImplementation';
 import { SwitchImplementation } from '../Common/SwitchImplementation';
 import { TextAreaImplementation } from '../Common/TextAreaImplementation';
 import { TextInputImplementation } from '../Common/TextInputImplementation';
-import { Tooltip } from '../Common/Tooltip';
-import { TablePaginator } from '../DataTables/TablePaginator';
+import { TooltipImplementation } from '../Common/TooltipImplementation';
+import { TablePaginatorImplementation } from '../DataTables/TablePaginatorImplementation';
 import { ProgressBarImplementation } from '../Display/ProgressBarImplementation';
-import { Dialog } from '../Dialogs/Dialog';
-import { Dropdown } from '../Dropdown/Dropdown';
-import type {
-    unstable_BehaviorMode,
-    unstable_SlotMap,
-} from './slots';
+import { DialogImplementation } from '../Dialogs/DialogImplementation';
+import { DropdownImplementation } from '../Dropdown/DropdownImplementation';
+import type { unstable_BehaviorMode, unstable_SlotMap } from './slots';
 
 const nativeDeclaration = <Props>(
     mode: unstable_BehaviorMode,
@@ -29,16 +26,12 @@ const nativeDeclaration = <Props>(
 /**
  * Complete Core slot inventory for renderer ABI proof and conformance tests only.
  *
- * Facades own their local presentation declarations, so neither the setup-only provider nor the
- * public renderer barrel may import this table. The five atomic public components below require
- * implementation extraction and facade routing in E2 before this table can become runtime input.
+ * Every facade owns its local Core declaration, so neither the setup-only provider nor the public
+ * renderer barrel may import this private all-family table.
  */
 export const unstable_coreSlots = Object.freeze({
     'common.button': nativeDeclaration('presentation', ButtonImplementation),
-    'common.iconButton': nativeDeclaration(
-        'presentation',
-        IconButtonImplementation,
-    ),
+    'common.iconButton': nativeDeclaration('presentation', IconButtonImplementation),
     'common.textInput': nativeDeclaration('presentation', TextInputImplementation),
     'common.textArea': nativeDeclaration('presentation', TextAreaImplementation),
     'common.checkbox': nativeDeclaration('presentation', CheckboxImplementation),
@@ -46,10 +39,9 @@ export const unstable_coreSlots = Object.freeze({
     'common.switch': nativeDeclaration('presentation', SwitchImplementation),
     'common.progress': nativeDeclaration('presentation', ProgressBarImplementation),
     'common.surface': nativeDeclaration('presentation', SurfaceImplementation),
-    // E2: replace these public atomic components with non-facade implementations before wiring.
-    'common.tooltip': nativeDeclaration('atomic', Tooltip),
-    'dropdown.select': nativeDeclaration('atomic', Dropdown),
-    'dialogs.dialog': nativeDeclaration('atomic', Dialog),
-    'display.datePicker': nativeDeclaration('atomic', DatePickerInput),
-    'datatables.paginator': nativeDeclaration('atomic', TablePaginator),
+    'common.tooltip': nativeDeclaration('atomic', TooltipImplementation),
+    'dropdown.select': nativeDeclaration('atomic', DropdownImplementation),
+    'dialogs.dialog': nativeDeclaration('atomic', DialogImplementation),
+    'display.datePicker': nativeDeclaration('atomic', DatePickerInputImplementation),
+    'datatables.paginator': nativeDeclaration('atomic', TablePaginatorImplementation),
 }) satisfies unstable_SlotMap;
diff --git a/Source/renderer/for_resolution/when_resolving_slots.tsx b/Source/renderer/for_resolution/when_resolving_slots.tsx
index 7e84c7b2..c6b78a73 100644
--- a/Source/renderer/for_resolution/when_resolving_slots.tsx
+++ b/Source/renderer/for_resolution/when_resolving_slots.tsx
@@ -183,14 +183,14 @@ describe('when resolving renderer slots', () => {
         }
     });
 
-    it('should throw CRATIS-UI-1003 at a throw fallback terminal', () => {
+    it('should throw CRATIS-UI-1003 for a facade-local Core declaration at a throw fallback terminal', () => {
         const consoleError = sinon.stub(console, 'error');
         let error: unknown;
 
         try {
             renderToStaticMarkup(
                 <CratisComponentsProvider rendererFallback='throw'>
-                    <MissingProbe />
+                    <LocalCoreProbe />
                 </CratisComponentsProvider>,
             );
         } catch (caught: unknown) {
@@ -203,5 +203,8 @@ describe('when resolving renderer slots', () => {
         expect((error as unstable_AdapterError).code).to.equal(
             unstable_adapterErrorCodes.strictProfileFallback,
         );
+        expect((error as unstable_AdapterError).diagnostic.slotId).to.equal(
+            'common.button',
+        );
     });
 });
diff --git a/Source/renderer/for_self_hosting/when_defining_core_slots.ts b/Source/renderer/for_self_hosting/when_defining_core_slots.ts
index 1b7d5d6a..cbee7c5a 100644
--- a/Source/renderer/for_self_hosting/when_defining_core_slots.ts
+++ b/Source/renderer/for_self_hosting/when_defining_core_slots.ts
@@ -3,6 +3,11 @@
 
 import { expect } from 'chai';
 import { describe, it } from 'vitest';
+import { DatePickerInputImplementation } from '../../Common/DatePickerInputImplementation';
+import { TooltipImplementation } from '../../Common/TooltipImplementation';
+import { TablePaginatorImplementation } from '../../DataTables/TablePaginatorImplementation';
+import { DialogImplementation } from '../../Dialogs/DialogImplementation';
+import { DropdownImplementation } from '../../Dropdown/DropdownImplementation';
 import { unstable_coreSlots } from '../coreSlots';
 
 const presentationSlots = [
@@ -40,7 +45,7 @@ describe('when defining the private Core slot inventory', () => {
         }
     });
 
-    it('should distinguish E1 presentation ownership from deferred E2 atomic ownership', () => {
+    it('should distinguish presentation ownership from atomic ownership', () => {
         for (const slotId of presentationSlots) {
             expect(unstable_coreSlots[slotId]?.mode).to.equal('presentation');
         }
@@ -48,4 +53,22 @@ describe('when defining the private Core slot inventory', () => {
             expect(unstable_coreSlots[slotId]?.mode).to.equal('atomic');
         }
     });
+
+    it('should point all five atomic declarations at non-facade Core implementations', () => {
+        expect(unstable_coreSlots['common.tooltip']?.render).to.equal(
+            TooltipImplementation,
+        );
+        expect(unstable_coreSlots['dropdown.select']?.render).to.equal(
+            DropdownImplementation,
+        );
+        expect(unstable_coreSlots['dialogs.dialog']?.render).to.equal(
+            DialogImplementation,
+        );
+        expect(unstable_coreSlots['display.datePicker']?.render).to.equal(
+            DatePickerInputImplementation,
+        );
+        expect(unstable_coreSlots['datatables.paginator']?.render).to.equal(
+            TablePaginatorImplementation,
+        );
+    });
 });
diff --git a/Source/renderer/for_self_hosting/when_routing_atomic_slots.tsx b/Source/renderer/for_self_hosting/when_routing_atomic_slots.tsx
new file mode 100644
index 00000000..f8a0245a
--- /dev/null
+++ b/Source/renderer/for_self_hosting/when_routing_atomic_slots.tsx
@@ -0,0 +1,277 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { expect } from 'chai';
+import { act, type ComponentType } from 'react';
+import { createRoot } from 'react-dom/client';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { beforeEach, describe, it, vi } from 'vitest';
+import { Button } from '../../Common/Button';
+import { CratisComponentsProvider } from '../../Common/CratisComponentsProvider';
+import { DatePickerInput, type DatePickerInputProps } from '../../Common/DatePickerInput';
+import { Tooltip, type TooltipProps } from '../../Common/Tooltip';
+import {
+    TablePaginator,
+    type TablePaginatorProps,
+} from '../../DataTables/TablePaginator';
+import { Dialog, type DialogProps } from '../../Dialogs/Dialog';
+import { Dropdown, type DropdownProps } from '../../Dropdown/Dropdown';
+import {
+    unstable_AdapterError,
+    unstable_adapterErrorCodes,
+    type unstable_SlotMap,
+} from '..';
+import { createTestLibrary } from '../for_resolution/testLibrary';
+
+const atomicDeclaration = <Props extends object>(render: ComponentType<Props>) =>
+    Object.freeze({ mode: 'atomic' as const, fidelity: 'native' as const, render });
+
+const atomicControls = (
+    <>
+        <Tooltip content='Core tooltip'>
+            <button type='button'>Tooltip trigger</button>
+        </Tooltip>
+        <Dropdown value='one' options={['one']} />
+        <Dialog title='Core dialog' buttons={null}>
+            Dialog content
+        </Dialog>
+        <DatePickerInput value={null} onChange={() => undefined} />
+        <TablePaginator page={0} pageCount={2} onPageChange={() => undefined} />
+    </>
+);
+
+describe('when routing atomic slots', () => {
+    beforeEach(() => {
+        (
+            globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
+        ).IS_REACT_ACT_ENVIRONMENT = true;
+    });
+
+    it('should call every external atomic adapter once and render no Core atomic DOM', () => {
+        const counts: Record<string, number> = {};
+        const adapter = <Props extends object>(slotId: string) =>
+            function AtomicAdapter(_props: Props) {
+                counts[slotId] = (counts[slotId] ?? 0) + 1;
+                return <div data-adapter-slot={slotId} />;
+            };
+        const slots: unstable_SlotMap = {
+            'common.tooltip': atomicDeclaration(adapter<TooltipProps>('common.tooltip')),
+            'dropdown.select': atomicDeclaration(
+                adapter<DropdownProps<unknown>>('dropdown.select'),
+            ),
+            'dialogs.dialog': atomicDeclaration(adapter<DialogProps>('dialogs.dialog')),
+            'display.datePicker': atomicDeclaration(
+                adapter<DatePickerInputProps>('display.datePicker'),
+            ),
+            'datatables.paginator': atomicDeclaration(
+                adapter<TablePaginatorProps>('datatables.paginator'),
+            ),
+        };
+        const library = createTestLibrary('all-atomic-slots', slots);
+
+        const html = renderToStaticMarkup(
+            <CratisComponentsProvider library={library}>
+                {atomicControls}
+            </CratisComponentsProvider>,
+        );
+        const container = document.createElement('div');
+        container.innerHTML = html;
+
+        expect(container.querySelectorAll('[data-adapter-slot]')).to.have.lengthOf(5);
+        expect(container.querySelectorAll('[data-cratis-part]')).to.have.lengthOf(0);
+        expect(Object.keys(counts)).to.have.lengthOf(5);
+        expect(Object.values(counts)).to.deep.equal(Array(5).fill(1));
+    });
+
+    it('should leave callbacks, focus, dismissal, and scroll ownership solely with external adapters', async () => {
+        const dropdownChange = vi.fn();
+        const dialogCancel = vi.fn();
+        const dateChange = vi.fn();
+        const pageChange = vi.fn();
+        const AdapterTooltip = () => <span data-adapter-tooltip />;
+        const AdapterDropdown = ({ onChange }: DropdownProps<unknown>) => (
+            <button
+                type='button'
+                data-adapter-dropdown
+                onClick={() => onChange?.('adapter', { source: 'user' })}
+            />
+        );
+        const AdapterDialog = ({ onCancel }: DialogProps) => (
+            <button type='button' data-adapter-dialog onClick={() => void onCancel?.()} />
+        );
+        const AdapterDatePicker = ({ onChange }: DatePickerInputProps) => (
+            <button
+                type='button'
+                data-adapter-date-picker
+                onClick={() => onChange(new Date(2026, 0, 1), { source: 'user' })}
+            />
+        );
+        const AdapterPaginator = ({ onPageChange }: TablePaginatorProps) => (
+            <button
+                type='button'
+                data-adapter-paginator
+                onClick={() => onPageChange(1)}
+            />
+        );
+        const slots: unstable_SlotMap = {
+            'common.tooltip': atomicDeclaration(AdapterTooltip),
+            'dropdown.select': atomicDeclaration(AdapterDropdown),
+            'dialogs.dialog': atomicDeclaration(AdapterDialog),
+            'display.datePicker': atomicDeclaration(AdapterDatePicker),
+            'datatables.paginator': atomicDeclaration(AdapterPaginator),
+        };
+        const library = createTestLibrary('interactive-atomic-slots', slots);
+        const container = document.createElement('div');
+        document.body.append(container);
+        const root = createRoot(container);
+        const originalOverflow = document.body.style.overflow;
+
+        try {
+            await act(async () => {
+                root.render(
+                    <CratisComponentsProvider library={library}>
+                        <Tooltip content='External tooltip'>
+                            <button type='button'>Ignored trigger</button>
+                        </Tooltip>
+                        <Dropdown onChange={dropdownChange} />
+                        <Dialog title='External dialog' onCancel={dialogCancel}>
+                            Ignored content
+                        </Dialog>
+                        <DatePickerInput value={null} onChange={dateChange} />
+                        <TablePaginator
+                            page={0}
+                            pageCount={2}
+                            onPageChange={pageChange}
+                        />
+                    </CratisComponentsProvider>,
+                );
+            });
+
+            expect(container.querySelectorAll('[data-cratis-part]')).to.have.lengthOf(0);
+            expect(
+                document.querySelectorAll(
+                    '[data-overlay-container], [data-react-aria-top-layer], [data-ismodal]',
+                ),
+            ).to.have.lengthOf(0);
+            expect(document.body.style.overflow).to.equal(originalOverflow);
+
+            await act(async () => {
+                container
+                    .querySelectorAll<HTMLButtonElement>('button')
+                    .forEach((button) => button.click());
+            });
+
+            expect(dropdownChange.mock.calls).to.have.lengthOf(1);
+            expect(dialogCancel.mock.calls).to.have.lengthOf(1);
+            expect(dateChange.mock.calls).to.have.lengthOf(1);
+            expect(pageChange.mock.calls).to.have.lengthOf(1);
+            expect(document.body.style.overflow).to.equal(originalOverflow);
+        } finally {
+            await act(async () => root.unmount());
+            container.remove();
+        }
+    });
+
+    it('should compose Core Button with TooltipImplementation rather than the public Tooltip facade', () => {
+        let externalTooltipCount = 0;
+        const AdapterTooltip = () => {
+            externalTooltipCount++;
+            return <span data-adapter-tooltip />;
+        };
+        const slots: unstable_SlotMap = {
+            'common.tooltip': atomicDeclaration(AdapterTooltip),
+        };
+        const library = createTestLibrary('external-tooltip', slots);
+
+        const html = renderToStaticMarkup(
+            <CratisComponentsProvider library={library}>
+                <Button label='Save' tooltip='Core button tooltip' />
+            </CratisComponentsProvider>,
+        );
+
+        expect(externalTooltipCount).to.equal(0);
+        expect(html).to.contain('cratis-tooltip-trigger');
+        expect(html).to.contain('cratis-button');
+    });
+
+    it('should allow Core TablePaginatorImplementation to compose public Button slots', () => {
+        let externalButtonCount = 0;
+        const AdapterButton = () => {
+            externalButtonCount++;
+            return <button type='button' data-adapter-button />;
+        };
+        const slots: unstable_SlotMap = {
+            'common.button': {
+                mode: 'presentation',
+                fidelity: 'native',
+                render: AdapterButton,
+            },
+        };
+        const library = createTestLibrary('external-paginator-buttons', slots);
+
+        const html = renderToStaticMarkup(
+            <CratisComponentsProvider library={library}>
+                <TablePaginator page={0} pageCount={2} onPageChange={() => undefined} />
+            </CratisComponentsProvider>,
+        );
+
+        expect(externalButtonCount).to.equal(4);
+        expect(html.match(/data-adapter-button/g)).to.have.lengthOf(4);
+        expect(html).not.to.contain('class="cratis-button"');
+    });
+
+    it('should not render nested Button slots when an external paginator owns the atomic slot', () => {
+        let externalPaginatorCount = 0;
+        let externalButtonCount = 0;
+        const slots: unstable_SlotMap = {
+            'common.button': {
+                mode: 'presentation',
+                fidelity: 'native',
+                render: () => {
+                    externalButtonCount++;
+                    return <button type='button' data-adapter-button />;
+                },
+            },
+            'datatables.paginator': atomicDeclaration(() => {
+                externalPaginatorCount++;
+                return <nav data-adapter-paginator />;
+            }),
+        };
+        const library = createTestLibrary('external-paginator', slots);
+
+        renderToStaticMarkup(
+            <CratisComponentsProvider library={library}>
+                <TablePaginator page={0} pageCount={2} onPageChange={() => undefined} />
+            </CratisComponentsProvider>,
+        );
+
+        expect(externalPaginatorCount).to.equal(1);
+        expect(externalButtonCount).to.equal(0);
+    });
+
+    it('should reject a facade-local atomic Core fallback at a throw terminal', () => {
+        let error: unknown;
+
+        try {
+            renderToStaticMarkup(
+                <CratisComponentsProvider rendererFallback='throw'>
+                    <Tooltip content='Rejected fallback'>
+                        <button type='button'>Trigger</button>
+                    </Tooltip>
+                </CratisComponentsProvider>,
+            );
+        } catch (caught: unknown) {
+            error = caught;
+        }
+
+        expect(error).to.be.instanceOf(unstable_AdapterError);
+        expect((error as unstable_AdapterError).code).to.equal(
+            unstable_adapterErrorCodes.strictProfileFallback,
+        );
+        expect((error as unstable_AdapterError).diagnostic.slotId).to.equal(
+            'common.tooltip',
+        );
+    });
+});
diff --git a/Source/renderer/for_self_hosting/when_using_atomic_overlay_environment.tsx b/Source/renderer/for_self_hosting/when_using_atomic_overlay_environment.tsx
new file mode 100644
index 00000000..026a54ba
--- /dev/null
+++ b/Source/renderer/for_self_hosting/when_using_atomic_overlay_environment.tsx
@@ -0,0 +1,344 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// @vitest-environment jsdom
+
+import { expect } from 'chai';
+import { act, useState, type ReactElement } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { afterEach, beforeEach, describe, it, vi } from 'vitest';
+import { CratisComponentsProvider } from '../../Common/CratisComponentsProvider';
+import { DatePickerInput } from '../../Common/DatePickerInput';
+import { Tooltip } from '../../Common/Tooltip';
+import { TablePaginator } from '../../DataTables/TablePaginator';
+import { Dialog } from '../../Dialogs/Dialog';
+import { Dropdown } from '../../Dropdown/Dropdown';
+import { unstable_useOverlayEnvironment } from '../RendererContext';
+import type { unstable_CratisOverlayEnvironment } from '../overlayEnvironment';
+
+interface OverlayFixture {
+    readonly name: string;
+    readonly element: ReactElement;
+    readonly primarySelector: string;
+    readonly overlaySelector: string;
+    readonly open: (container: HTMLElement) => void;
+}
+
+const DialogHarness = ({ children }: { children?: ReactElement }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    return (
+        <>
+            <button type='button' data-open-dialog onClick={() => setIsOpen(true)}>
+                Open dialog
+            </button>
+            <Dialog title='Overlay dialog' visible={isOpen} buttons={null}>
+                {children ?? 'Dialog content'}
+            </Dialog>
+        </>
+    );
+};
+
+const fixtures: readonly OverlayFixture[] = [
+    {
+        name: 'tooltip',
+        element: (
+            <Tooltip content='Overlay tooltip'>
+                <button type='button'>Tooltip trigger</button>
+            </Tooltip>
+        ),
+        primarySelector: 'button',
+        overlaySelector: '[data-cratis-part="popup"]',
+        open: (container) =>
+            container.querySelector<HTMLButtonElement>('button')?.focus(),
+    },
+    {
+        name: 'dropdown',
+        element: <Dropdown options={['One', 'Two']} aria-label='Choice' />,
+        primarySelector: '[data-cratis-part="trigger"]',
+        overlaySelector: '[data-cratis-part="popover"]',
+        open: (container) =>
+            container
+                .querySelector<HTMLButtonElement>('[data-cratis-part="trigger"]')
+                ?.click(),
+    },
+    {
+        name: 'date picker',
+        element: (
+            <DatePickerInput value={null} onChange={() => undefined} aria-label='Date' />
+        ),
+        primarySelector: '[data-cratis-part="trigger"]',
+        overlaySelector: '[data-cratis-part="popover"]',
+        open: (container) =>
+            container
+                .querySelector<HTMLButtonElement>('[data-cratis-part="trigger"]')
+                ?.click(),
+    },
+    {
+        name: 'dialog',
+        element: <DialogHarness />,
+        primarySelector: '[data-open-dialog]',
+        overlaySelector: '.cratis-dialog[data-cratis-part="root"]',
+        open: (container) =>
+            container.querySelector<HTMLButtonElement>('[data-open-dialog]')?.click(),
+    },
+];
+
+interface MountedFixture {
+    readonly container: HTMLDivElement;
+    readonly root: Root;
+}
+
+const mount = async (
+    fixture: OverlayFixture,
+    overlayEnvironment?: unstable_CratisOverlayEnvironment,
+): Promise<MountedFixture> => {
+    const container = document.createElement('div');
+    document.body.append(container);
+    const root = createRoot(container);
+    await act(async () => {
+        root.render(
+            <CratisComponentsProvider overlayEnvironment={overlayEnvironment}>
+                {fixture.element}
+            </CratisComponentsProvider>,
+        );
+    });
+    return { container, root };
+};
+
+const open = async (fixture: OverlayFixture, mounted: MountedFixture) => {
+    await act(async () => fixture.open(mounted.container));
+};
+
+const unmount = async (mounted: MountedFixture) => {
+    await act(async () => mounted.root.unmount());
+    mounted.container.remove();
+};
+
+const OverlayHookProbe = () => {
+    unstable_useOverlayEnvironment();
+    return <span>hook only</span>;
+};
+
+describe('when Core atomic implementations use the overlay environment', () => {
+    beforeEach(() => {
+        (
+            globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
+        ).IS_REACT_ACT_ENVIRONMENT = true;
+        (globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver ??= class {
+            observe() {
+                return undefined;
+            }
+            unobserve() {
+                return undefined;
+            }
+            disconnect() {
+                return undefined;
+            }
+        };
+    });
+
+    afterEach(() => {
+        document.documentElement.style.removeProperty('overflow');
+        vi.restoreAllMocks();
+    });
+
+    for (const fixture of fixtures) {
+        it(`should defer ${fixture.name} container lookup until its overlay opens`, async () => {
+            const customContainer = document.createElement('div');
+            document.body.append(customContainer);
+            const getContainer = vi.fn(() => customContainer);
+            const mounted = await mount(fixture, { getContainer });
+
+            try {
+                expect(getContainer.mock.calls).to.have.lengthOf(0);
+                expect(
+                    mounted.container.querySelector(fixture.primarySelector),
+                ).not.to.equal(null);
+
+                await open(fixture, mounted);
+
+                expect(getContainer.mock.calls.length).to.be.greaterThan(0);
+                expect(
+                    customContainer.querySelector(fixture.overlaySelector),
+                ).not.to.equal(null);
+            } finally {
+                await unmount(mounted);
+                customContainer.remove();
+            }
+        });
+
+        it(`should portal ${fixture.name} to the body by default`, async () => {
+            const mounted = await mount(fixture);
+
+            try {
+                await open(fixture, mounted);
+                const overlay = document.querySelector(fixture.overlaySelector);
+                expect(overlay).not.to.equal(null);
+                expect(document.body.contains(overlay)).to.equal(true);
+                expect(mounted.container.contains(overlay)).to.equal(false);
+            } finally {
+                await unmount(mounted);
+            }
+        });
+
+        it(`should keep the ${fixture.name} control and defer its overlay when the container is null`, async () => {
+            const getContainer = vi.fn(() => null);
+            const mounted = await mount(fixture, { getContainer });
+
+            try {
+                expect(getContainer.mock.calls).to.have.lengthOf(0);
+                await open(fixture, mounted);
+
+                expect(getContainer.mock.calls.length).to.be.greaterThan(0);
+                expect(
+                    mounted.container.querySelector(fixture.primarySelector),
+                ).not.to.equal(null);
+                expect(document.querySelector(fixture.overlaySelector)).to.equal(null);
+            } finally {
+                await unmount(mounted);
+            }
+        });
+    }
+
+    it('should not look up a container merely from the hook, closed controls, or SSR', async () => {
+        const getContainer = vi.fn(() => document.body);
+        const closedControls = (
+            <>
+                <OverlayHookProbe />
+                <Tooltip disabled content='Closed'>
+                    <button type='button'>Disabled tooltip</button>
+                </Tooltip>
+                <Dropdown options={['One']} aria-label='Closed choice' />
+                <DatePickerInput value={null} onChange={() => undefined} />
+                <Dialog title='Closed dialog' visible={false}>
+                    Closed
+                </Dialog>
+                <TablePaginator page={0} pageCount={1} onPageChange={() => undefined} />
+            </>
+        );
+        const mountedContainer = document.createElement('div');
+        document.body.append(mountedContainer);
+        const root = createRoot(mountedContainer);
+
+        try {
+            await act(async () => {
+                root.render(
+                    <CratisComponentsProvider overlayEnvironment={{ getContainer }}>
+                        {closedControls}
+                    </CratisComponentsProvider>,
+                );
+            });
+            expect(getContainer.mock.calls).to.have.lengthOf(0);
+
+            renderToStaticMarkup(
+                <CratisComponentsProvider overlayEnvironment={{ getContainer }}>
+                    <Tooltip content='SSR tooltip'>
+                        <button type='button'>Trigger</button>
+                    </Tooltip>
+                    <Dropdown options={['One']} aria-label='SSR choice' />
+                    <DatePickerInput value={null} onChange={() => undefined} />
+                    <Dialog title='SSR dialog'>Inline server dialog</Dialog>
+                    <TablePaginator
+                        page={0}
+                        pageCount={1}
+                        onPageChange={() => undefined}
+                    />
+                </CratisComponentsProvider>,
+            );
+            expect(getContainer.mock.calls).to.have.lengthOf(0);
+        } finally {
+            await act(async () => root.unmount());
+            mountedContainer.remove();
+        }
+    });
+
+    it('should create only one Core focus trap, modal marker, scroll lock, and dismissal owner', async () => {
+        const onCancel = vi.fn(() => true);
+        const container = document.createElement('div');
+        document.body.append(container);
+        const root = createRoot(container);
+
+        try {
+            await act(async () => {
+                root.render(
+                    <CratisComponentsProvider>
+                        <Dialog title='Single owner' dismissable onCancel={onCancel}>
+                            Content
+                        </Dialog>
+                    </CratisComponentsProvider>,
+                );
+                await new Promise((resolve) => setTimeout(resolve, 0));
+            });
+
+            expect(
+                document.querySelectorAll('[data-overlay-container]').length,
+            ).to.be.at.most(1);
+            expect(
+                document.querySelectorAll('[data-focus-scope-start]').length,
+            ).to.be.at.most(1);
+            expect(
+                document.querySelectorAll('[data-focus-scope-end]').length,
+            ).to.be.at.most(1);
+            expect(document.querySelectorAll('[role="dialog"]')).to.have.lengthOf(1);
+            expect(document.documentElement.style.overflow).to.equal('hidden');
+
+            await act(async () => {
+                (document.activeElement ?? document).dispatchEvent(
+                    new KeyboardEvent('keydown', {
+                        key: 'Escape',
+                        code: 'Escape',
+                        bubbles: true,
+                    }),
+                );
+            });
+            expect(onCancel.mock.calls).to.have.lengthOf(1);
+        } finally {
+            await act(async () => root.unmount());
+            container.remove();
+        }
+        expect(document.documentElement.style.overflow).to.equal('');
+    });
+
+    it('should portal a Dropdown inside a Dialog to the same custom host but outside the dialog', async () => {
+        const customContainer = document.createElement('div');
+        document.body.append(customContainer);
+        const getContainer = vi.fn(() => customContainer);
+        const container = document.createElement('div');
+        document.body.append(container);
+        const root = createRoot(container);
+
+        try {
+            await act(async () => {
+                root.render(
+                    <CratisComponentsProvider overlayEnvironment={{ getContainer }}>
+                        <Dialog title='Nested overlays' buttons={null}>
+                            <Dropdown options={['One', 'Two']} aria-label='Choice' />
+                        </Dialog>
+                    </CratisComponentsProvider>,
+                );
+            });
+            const dialog = customContainer.querySelector(
+                '.cratis-dialog[data-cratis-part="root"]',
+            );
+            const trigger = customContainer.querySelector<HTMLButtonElement>(
+                '[data-cratis-part="trigger"]',
+            );
+            if (!trigger) throw new Error('Nested Dropdown trigger was not rendered.');
+
+            await act(async () => trigger.click());
+
+            const popover = customContainer.querySelector(
+                '.cratis-dropdown__popover[data-cratis-part="popover"]',
+            );
+            expect(dialog).not.to.equal(null);
+            expect(popover).not.to.equal(null);
+            expect(dialog?.contains(popover)).to.equal(false);
+            expect(getContainer.mock.calls.length).to.be.greaterThan(1);
+        } finally {
+            await act(async () => root.unmount());
+            container.remove();
+            customContainer.remove();
+        }
+    });
+});
diff --git a/Source/renderer/index.ts b/Source/renderer/index.ts
index b5abb153..29d4bb5d 100644
--- a/Source/renderer/index.ts
+++ b/Source/renderer/index.ts
@@ -52,8 +52,8 @@ declare module './slots.js' {
 
 /**
  * Experimental renderer contracts for adapter authors. Every public symbol is intentionally
- * `unstable_`-prefixed and isolated to `@cratis/components/renderer`. E1 presentation routing is
- * facade-local; atomic routing and lazy/preload entries remain deferred.
+ * `unstable_`-prefixed and isolated to `@cratis/components/renderer`. E1 presentation and E2
+ * atomic routing are facade-local; lazy/preload entries remain deferred.
  */
 export type { unstable_CapabilityId } from './capabilities';
 export {
diff --git a/Source/scripts/generate-parts.mjs b/Source/scripts/generate-parts.mjs
index 5ea92be4..97e55f15 100644
--- a/Source/scripts/generate-parts.mjs
+++ b/Source/scripts/generate-parts.mjs
@@ -87,7 +87,8 @@ export const partDefinitions = {
             'multiple',
             'indicator',
         ],
-        sources: ['Dropdown/Dropdown.tsx'],
+        sources: ['Dropdown/DropdownImplementation.tsx'],
+        ptFiles: ['Dropdown/Dropdown.tsx'],
         ptKeys: [
             'root',
             'input',
@@ -132,7 +133,8 @@ export const partDefinitions = {
             'today',
             'clear',
         ],
-        sources: ['Common/DatePickerInput.tsx'],
+        sources: ['Common/DatePickerInputImplementation.tsx'],
+        ptFiles: ['Common/DatePickerInput.tsx'],
         ptKeys: [
             'root',
             'group',
@@ -211,7 +213,7 @@ export const partDefinitions = {
     },
     Tooltip: {
         parts: ['trigger', 'popup'],
-        sources: ['Common/Tooltip.tsx'],
+        sources: ['Common/TooltipImplementation.tsx'],
     },
     Dialog: {
         parts: [
@@ -227,7 +229,8 @@ export const partDefinitions = {
             'confirm',
             'cancel',
         ],
-        sources: ['Dialogs/Dialog.tsx'],
+        sources: ['Dialogs/DialogImplementation.tsx'],
+        ptFiles: ['Dialogs/Dialog.tsx'],
         ptKeys: [
             'backdrop',
             'positioner',
@@ -330,7 +333,8 @@ export const partDefinitions = {
     },
     TablePaginator: {
         parts: ['root', 'range', 'info'],
-        sources: ['DataTables/TablePaginator.tsx'],
+        sources: ['DataTables/TablePaginatorImplementation.tsx'],
+        ptFiles: ['DataTables/TablePaginator.tsx'],
         ptKeys: ['root', 'range', 'info', 'first', 'previous', 'next', 'last'],
     },
     Toaster: {
diff --git a/Source/scripts/verify-package-graph.mjs b/Source/scripts/verify-package-graph.mjs
index 12ece172..486aa462 100644
--- a/Source/scripts/verify-package-graph.mjs
+++ b/Source/scripts/verify-package-graph.mjs
@@ -28,9 +28,10 @@
  *      beyond the React framework peer and reaches no component implementation directory. Its declaration closure may
  *      reach Components-owned prop declarations and React types, but no renderer vendor.
  *      The check is explicitly deferred until that export exists.
- *   5. The setup-only root, `./Common`, and public `./renderer` closures never reach the
- *      private all-family `renderer/coreSlots` ABI-proof table. Root and `./Common` also stay
- *      outside the table's DataTables, Dialogs, Display, and Dropdown family directories.
+ *   5. All fourteen self-hosting facades use local Core declarations. The setup-only root,
+ *      `./Common`, and public `./renderer` closures never reach the private all-family
+ *      `renderer/coreSlots` ABI-proof table. Root and `./Common` also stay outside the table's
+ *      DataTables, Dialogs, Display, and Dropdown family directories.
  *   6. Every source module in the canonical repository-owned kernel inventory has emitted
  *      runtime and declaration closures with no React, React DOM, or React Aria Components
  *      dependency, and no emitted runtime or declaration reference to a browser DOM global.
@@ -222,8 +223,8 @@ for (const sourcePath of kernelSourcePaths) {
 
     if (!existsSync(runtimeEntry) || !existsSync(declarationEntry)) {
         const missing = [
-            !existsSync(runtimeEntry) ? runtimeEntryRelative : undefined,
-            !existsSync(declarationEntry) ? declarationEntryRelative : undefined,
+            existsSync(runtimeEntry) ? undefined : runtimeEntryRelative,
+            existsSync(declarationEntry) ? undefined : declarationEntryRelative,
         ].filter(Boolean);
         violations.push(
             `${sourcePath}: declared kernel module is missing emitted output: ${missing.join(', ')}.`,
diff --git a/Source/scripts/verify-renderer-contracts.mjs b/Source/scripts/verify-renderer-contracts.mjs
index 3835bdc4..7efba42b 100644
--- a/Source/scripts/verify-renderer-contracts.mjs
+++ b/Source/scripts/verify-renderer-contracts.mjs
@@ -14,7 +14,7 @@ const fixturePath = path.join(
 );
 const schema = JSON.parse(readFileSync(schemaPath, 'utf8'));
 
-const valueType = value => {
+const valueType = (value) => {
     if (Array.isArray(value)) return 'array';
     if (value === null) return 'null';
     if (Number.isInteger(value)) return 'integer';
@@ -23,58 +23,106 @@ const valueType = value => {
 
 const sameJson = (left, right) => JSON.stringify(left) === JSON.stringify(right);
 
-const resolveReference = reference => {
-    if (!reference.startsWith('#/')) throw new Error(`Unsupported schema reference '${reference}'.`);
+const resolveReference = (reference) => {
+    if (!reference.startsWith('#/'))
+        throw new Error(`Unsupported schema reference '${reference}'.`);
     return reference
         .slice(2)
         .split('/')
-        .reduce((current, segment) => current[segment.replaceAll('~1', '/').replaceAll('~0', '~')], schema);
+        .reduce(
+            (current, segment) =>
+                current[segment.replaceAll('~1', '/').replaceAll('~0', '~')],
+            schema,
+        );
 };
 
 const validate = (candidate, rule, location = '$') => {
     if (rule.$ref) return validate(candidate, resolveReference(rule.$ref), location);
 
     const problems = [];
-    const add = message => problems.push(`${location}: ${message}`);
+    const add = (message) => problems.push(`${location}: ${message}`);
     if (rule.type && valueType(candidate) !== rule.type) {
         add(`expected ${rule.type}, got ${valueType(candidate)}`);
         return problems;
     }
-    if ('const' in rule && !sameJson(candidate, rule.const)) add(`expected ${JSON.stringify(rule.const)}`);
-    if (rule.enum && !rule.enum.some(value => sameJson(value, candidate))) add('value is outside the declared enum');
+    if ('const' in rule && !sameJson(candidate, rule.const))
+        add(`expected ${JSON.stringify(rule.const)}`);
+    if (rule.enum && !rule.enum.some((value) => sameJson(value, candidate)))
+        add('value is outside the declared enum');
     if (typeof candidate === 'string') {
-        if (rule.minLength !== undefined && candidate.length < rule.minLength) add(`must have at least ${rule.minLength} characters`);
-        if (rule.maxLength !== undefined && candidate.length > rule.maxLength) add(`must have no more than ${rule.maxLength} characters`);
-        if (rule.pattern && !new RegExp(rule.pattern, 'u').test(candidate)) add(`does not match ${rule.pattern}`);
+        if (rule.minLength !== undefined && candidate.length < rule.minLength)
+            add(`must have at least ${rule.minLength} characters`);
+        if (rule.maxLength !== undefined && candidate.length > rule.maxLength)
+            add(`must have no more than ${rule.maxLength} characters`);
+        if (rule.pattern && !new RegExp(rule.pattern, 'u').test(candidate))
+            add(`does not match ${rule.pattern}`);
     }
     if (Array.isArray(candidate)) {
-        if (rule.minItems !== undefined && candidate.length < rule.minItems) add(`must contain at least ${rule.minItems} items`);
-        if (rule.maxItems !== undefined && candidate.length > rule.maxItems) add(`must contain no more than ${rule.maxItems} items`);
-        if (rule.uniqueItems && new Set(candidate.map(item => JSON.stringify(item))).size !== candidate.length) add('items must be unique');
-        if (rule.items) candidate.forEach((item, index) => problems.push(...validate(item, rule.items, `${location}[${index}]`)));
+        if (rule.minItems !== undefined && candidate.length < rule.minItems)
+            add(`must contain at least ${rule.minItems} items`);
+        if (rule.maxItems !== undefined && candidate.length > rule.maxItems)
+            add(`must contain no more than ${rule.maxItems} items`);
+        if (
+            rule.uniqueItems &&
+            new Set(candidate.map((item) => JSON.stringify(item))).size !==
+                candidate.length
+        )
+            add('items must be unique');
+        if (rule.items)
+            candidate.forEach((item, index) =>
+                problems.push(...validate(item, rule.items, `${location}[${index}]`)),
+            );
     }
     if (candidate && typeof candidate === 'object' && !Array.isArray(candidate)) {
         const keys = Object.keys(candidate);
-        if (rule.minProperties !== undefined && keys.length < rule.minProperties) add(`must contain at least ${rule.minProperties} properties`);
-        if (rule.maxProperties !== undefined && keys.length > rule.maxProperties) add(`must contain no more than ${rule.maxProperties} properties`);
+        if (rule.minProperties !== undefined && keys.length < rule.minProperties)
+            add(`must contain at least ${rule.minProperties} properties`);
+        if (rule.maxProperties !== undefined && keys.length > rule.maxProperties)
+            add(`must contain no more than ${rule.maxProperties} properties`);
         for (const required of rule.required ?? []) {
             if (!(required in candidate)) add(`missing required property '${required}'`);
         }
         for (const key of keys) {
-            if (rule.propertyNames) problems.push(...validate(key, rule.propertyNames, `${location}.${key} (property name)`));
+            if (rule.propertyNames)
+                problems.push(
+                    ...validate(
+                        key,
+                        rule.propertyNames,
+                        `${location}.${key} (property name)`,
+                    ),
+                );
             if (rule.properties?.[key]) {
-                problems.push(...validate(candidate[key], rule.properties[key], `${location}.${key}`));
+                problems.push(
+                    ...validate(
+                        candidate[key],
+                        rule.properties[key],
+                        `${location}.${key}`,
+                    ),
+                );
             } else if (rule.additionalProperties === false) {
                 add(`unknown property '${key}'`);
-            } else if (rule.additionalProperties && typeof rule.additionalProperties === 'object') {
-                problems.push(...validate(candidate[key], rule.additionalProperties, `${location}.${key}`));
+            } else if (
+                rule.additionalProperties &&
+                typeof rule.additionalProperties === 'object'
+            ) {
+                problems.push(
+                    ...validate(
+                        candidate[key],
+                        rule.additionalProperties,
+                        `${location}.${key}`,
+                    ),
+                );
             }
         }
     }
-    for (const nested of rule.allOf ?? []) problems.push(...validate(candidate, nested, location));
-    if (rule.if && validate(candidate, rule.if, location).length === 0 && rule.then) problems.push(...validate(candidate, rule.then, location));
+    for (const nested of rule.allOf ?? [])
+        problems.push(...validate(candidate, nested, location));
+    if (rule.if && validate(candidate, rule.if, location).length === 0 && rule.then)
+        problems.push(...validate(candidate, rule.then, location));
     if (rule.oneOf) {
-        const matches = rule.oneOf.filter(option => validate(candidate, option, location).length === 0).length;
+        const matches = rule.oneOf.filter(
+            (option) => validate(candidate, option, location).length === 0,
+        ).length;
         if (matches !== 1) add(`must match exactly one alternative, matched ${matches}`);
     }
     return problems;
@@ -101,7 +149,9 @@ const validManifest = {
 
 const validProblems = validate(validManifest, schema);
 if (validProblems.length > 0) {
-    console.error(`Valid renderer manifest failed schema validation:\n- ${validProblems.join('\n- ')}`);
+    console.error(
+        `Valid renderer manifest failed schema validation:\n- ${validProblems.join('\n- ')}`,
+    );
     process.exit(1);
 }
 
@@ -114,11 +164,15 @@ const invalidManifests = [
 ];
 for (const invalid of invalidManifests) {
     if (validate(invalid, schema).length === 0) {
-        console.error(`Invalid renderer manifest unexpectedly passed: ${JSON.stringify(invalid)}`);
+        console.error(
+            `Invalid renderer manifest unexpectedly passed: ${JSON.stringify(invalid)}`,
+        );
         process.exit(1);
     }
 }
-console.log('Renderer metadata schema accepts open adapter/slot identities and rejects invalid manifests.');
+console.log(
+    'Renderer metadata schema accepts open adapter/slot identities and rejects invalid manifests.',
+);
 
 const tsc = path.resolve(packageDir, '../node_modules/typescript/bin/tsc');
 const typeCheck = spawnSync(
@@ -145,11 +199,56 @@ const typeCheck = spawnSync(
     { cwd: packageDir, encoding: 'utf8', timeout: 120_000 },
 );
 if (typeCheck.status !== 0) {
-    console.error(`Renderer slot typing fixture failed:\n${typeCheck.stdout}${typeCheck.stderr}`);
+    console.error(
+        `Renderer slot typing fixture failed:\n${typeCheck.stdout}${typeCheck.stderr}`,
+    );
     process.exit(1);
 }
 console.log('Renderer slot typing fixture compiles under strict TypeScript.');
 
+const atomicFacadeFiles = [
+    'Common/Tooltip.tsx',
+    'Common/DatePickerInput.tsx',
+    'Dropdown/Dropdown.tsx',
+    'Dialogs/Dialog.tsx',
+    'DataTables/TablePaginator.tsx',
+];
+for (const relative of atomicFacadeFiles) {
+    const source = readFileSync(path.join(packageDir, relative), 'utf8');
+    if (!source.includes("mode: 'atomic'") || !source.includes('Object.freeze({')) {
+        console.error(
+            `Atomic facade '${relative}' must own a frozen local atomic declaration.`,
+        );
+        process.exit(1);
+    }
+}
+
+const overlayImplementationFiles = [
+    'Common/TooltipImplementation.tsx',
+    'Common/DatePickerInputImplementation.tsx',
+    'Dropdown/DropdownImplementation.tsx',
+    'Dialogs/DialogImplementation.tsx',
+];
+for (const relative of overlayImplementationFiles) {
+    const source = readFileSync(path.join(packageDir, relative), 'utf8');
+    if (
+        !source.includes("from 'react-aria/PortalProvider'") ||
+        !source.includes('getContainer={overlayEnvironment.getContainer}')
+    ) {
+        console.error(
+            `Atomic overlay implementation '${relative}' must use the local overlay-environment callback through UNSAFE_PortalProvider.`,
+        );
+        process.exit(1);
+    }
+    if (source.includes('UNSTABLE_portalContainer')) {
+        console.error(
+            `Atomic overlay implementation '${relative}' must not use deprecated per-component portal containers.`,
+        );
+        process.exit(1);
+    }
+}
+console.log('Atomic facades and local overlay ownership satisfy E2 source contracts.');
+
 const ssrScript = `
 delete globalThis.document;
 const renderer = await import('@cratis/components/renderer');
@@ -166,4 +265,6 @@ if (ssrImport.status !== 0) {
     console.error(`Renderer SSR import failed:\n${ssrImport.stdout}${ssrImport.stderr}`);
     process.exit(1);
 }
-console.log('Renderer subpath imports with document undefined and defers DOM access until invocation.');
+console.log(
+    'Renderer subpath imports with document undefined and defers DOM access until invocation.',
+);
diff --git a/yarn.lock b/yarn.lock
index 6dfc20df..61d09dff 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -307,6 +307,7 @@ __metadata:
     allotment: "npm:1.20.5"
     framer-motion: "npm:13.1.1"
     pixi.js: "npm:^8.20.0"
+    react-aria: "npm:3.51.0"
     react-aria-components: "npm:1.20.0"
     react-icons: "npm:5.7.0"
     ts-deepmerge: "npm:8.0.0"

From c9c376d8f64117916a65f421cd802924c48bcccf Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 21:23:55 +0200
Subject: [PATCH 196/267] Remove unrelated E2 formatting churn

---
 Source/renderer/coreSlots.ts                 |  10 +-
 Source/scripts/verify-package-graph.mjs      |   4 +-
 Source/scripts/verify-renderer-contracts.mjs | 114 +++++--------------
 3 files changed, 38 insertions(+), 90 deletions(-)

diff --git a/Source/renderer/coreSlots.ts b/Source/renderer/coreSlots.ts
index 40aefd6b..3fe1895b 100644
--- a/Source/renderer/coreSlots.ts
+++ b/Source/renderer/coreSlots.ts
@@ -16,7 +16,10 @@ import { TablePaginatorImplementation } from '../DataTables/TablePaginatorImplem
 import { ProgressBarImplementation } from '../Display/ProgressBarImplementation';
 import { DialogImplementation } from '../Dialogs/DialogImplementation';
 import { DropdownImplementation } from '../Dropdown/DropdownImplementation';
-import type { unstable_BehaviorMode, unstable_SlotMap } from './slots';
+import type {
+    unstable_BehaviorMode,
+    unstable_SlotMap,
+} from './slots';
 
 const nativeDeclaration = <Props>(
     mode: unstable_BehaviorMode,
@@ -31,7 +34,10 @@ const nativeDeclaration = <Props>(
  */
 export const unstable_coreSlots = Object.freeze({
     'common.button': nativeDeclaration('presentation', ButtonImplementation),
-    'common.iconButton': nativeDeclaration('presentation', IconButtonImplementation),
+    'common.iconButton': nativeDeclaration(
+        'presentation',
+        IconButtonImplementation,
+    ),
     'common.textInput': nativeDeclaration('presentation', TextInputImplementation),
     'common.textArea': nativeDeclaration('presentation', TextAreaImplementation),
     'common.checkbox': nativeDeclaration('presentation', CheckboxImplementation),
diff --git a/Source/scripts/verify-package-graph.mjs b/Source/scripts/verify-package-graph.mjs
index 486aa462..955b4e13 100644
--- a/Source/scripts/verify-package-graph.mjs
+++ b/Source/scripts/verify-package-graph.mjs
@@ -223,8 +223,8 @@ for (const sourcePath of kernelSourcePaths) {
 
     if (!existsSync(runtimeEntry) || !existsSync(declarationEntry)) {
         const missing = [
-            existsSync(runtimeEntry) ? undefined : runtimeEntryRelative,
-            existsSync(declarationEntry) ? undefined : declarationEntryRelative,
+            !existsSync(runtimeEntry) ? runtimeEntryRelative : undefined,
+            !existsSync(declarationEntry) ? declarationEntryRelative : undefined,
         ].filter(Boolean);
         violations.push(
             `${sourcePath}: declared kernel module is missing emitted output: ${missing.join(', ')}.`,
diff --git a/Source/scripts/verify-renderer-contracts.mjs b/Source/scripts/verify-renderer-contracts.mjs
index 7efba42b..fa7cb088 100644
--- a/Source/scripts/verify-renderer-contracts.mjs
+++ b/Source/scripts/verify-renderer-contracts.mjs
@@ -14,7 +14,7 @@ const fixturePath = path.join(
 );
 const schema = JSON.parse(readFileSync(schemaPath, 'utf8'));
 
-const valueType = (value) => {
+const valueType = value => {
     if (Array.isArray(value)) return 'array';
     if (value === null) return 'null';
     if (Number.isInteger(value)) return 'integer';
@@ -23,106 +23,58 @@ const valueType = (value) => {
 
 const sameJson = (left, right) => JSON.stringify(left) === JSON.stringify(right);
 
-const resolveReference = (reference) => {
-    if (!reference.startsWith('#/'))
-        throw new Error(`Unsupported schema reference '${reference}'.`);
+const resolveReference = reference => {
+    if (!reference.startsWith('#/')) throw new Error(`Unsupported schema reference '${reference}'.`);
     return reference
         .slice(2)
         .split('/')
-        .reduce(
-            (current, segment) =>
-                current[segment.replaceAll('~1', '/').replaceAll('~0', '~')],
-            schema,
-        );
+        .reduce((current, segment) => current[segment.replaceAll('~1', '/').replaceAll('~0', '~')], schema);
 };
 
 const validate = (candidate, rule, location = '$') => {
     if (rule.$ref) return validate(candidate, resolveReference(rule.$ref), location);
 
     const problems = [];
-    const add = (message) => problems.push(`${location}: ${message}`);
+    const add = message => problems.push(`${location}: ${message}`);
     if (rule.type && valueType(candidate) !== rule.type) {
         add(`expected ${rule.type}, got ${valueType(candidate)}`);
         return problems;
     }
-    if ('const' in rule && !sameJson(candidate, rule.const))
-        add(`expected ${JSON.stringify(rule.const)}`);
-    if (rule.enum && !rule.enum.some((value) => sameJson(value, candidate)))
-        add('value is outside the declared enum');
+    if ('const' in rule && !sameJson(candidate, rule.const)) add(`expected ${JSON.stringify(rule.const)}`);
+    if (rule.enum && !rule.enum.some(value => sameJson(value, candidate))) add('value is outside the declared enum');
     if (typeof candidate === 'string') {
-        if (rule.minLength !== undefined && candidate.length < rule.minLength)
-            add(`must have at least ${rule.minLength} characters`);
-        if (rule.maxLength !== undefined && candidate.length > rule.maxLength)
-            add(`must have no more than ${rule.maxLength} characters`);
-        if (rule.pattern && !new RegExp(rule.pattern, 'u').test(candidate))
-            add(`does not match ${rule.pattern}`);
+        if (rule.minLength !== undefined && candidate.length < rule.minLength) add(`must have at least ${rule.minLength} characters`);
+        if (rule.maxLength !== undefined && candidate.length > rule.maxLength) add(`must have no more than ${rule.maxLength} characters`);
+        if (rule.pattern && !new RegExp(rule.pattern, 'u').test(candidate)) add(`does not match ${rule.pattern}`);
     }
     if (Array.isArray(candidate)) {
-        if (rule.minItems !== undefined && candidate.length < rule.minItems)
-            add(`must contain at least ${rule.minItems} items`);
-        if (rule.maxItems !== undefined && candidate.length > rule.maxItems)
-            add(`must contain no more than ${rule.maxItems} items`);
-        if (
-            rule.uniqueItems &&
-            new Set(candidate.map((item) => JSON.stringify(item))).size !==
-                candidate.length
-        )
-            add('items must be unique');
-        if (rule.items)
-            candidate.forEach((item, index) =>
-                problems.push(...validate(item, rule.items, `${location}[${index}]`)),
-            );
+        if (rule.minItems !== undefined && candidate.length < rule.minItems) add(`must contain at least ${rule.minItems} items`);
+        if (rule.maxItems !== undefined && candidate.length > rule.maxItems) add(`must contain no more than ${rule.maxItems} items`);
+        if (rule.uniqueItems && new Set(candidate.map(item => JSON.stringify(item))).size !== candidate.length) add('items must be unique');
+        if (rule.items) candidate.forEach((item, index) => problems.push(...validate(item, rule.items, `${location}[${index}]`)));
     }
     if (candidate && typeof candidate === 'object' && !Array.isArray(candidate)) {
         const keys = Object.keys(candidate);
-        if (rule.minProperties !== undefined && keys.length < rule.minProperties)
-            add(`must contain at least ${rule.minProperties} properties`);
-        if (rule.maxProperties !== undefined && keys.length > rule.maxProperties)
-            add(`must contain no more than ${rule.maxProperties} properties`);
+        if (rule.minProperties !== undefined && keys.length < rule.minProperties) add(`must contain at least ${rule.minProperties} properties`);
+        if (rule.maxProperties !== undefined && keys.length > rule.maxProperties) add(`must contain no more than ${rule.maxProperties} properties`);
         for (const required of rule.required ?? []) {
             if (!(required in candidate)) add(`missing required property '${required}'`);
         }
         for (const key of keys) {
-            if (rule.propertyNames)
-                problems.push(
-                    ...validate(
-                        key,
-                        rule.propertyNames,
-                        `${location}.${key} (property name)`,
-                    ),
-                );
+            if (rule.propertyNames) problems.push(...validate(key, rule.propertyNames, `${location}.${key} (property name)`));
             if (rule.properties?.[key]) {
-                problems.push(
-                    ...validate(
-                        candidate[key],
-                        rule.properties[key],
-                        `${location}.${key}`,
-                    ),
-                );
+                problems.push(...validate(candidate[key], rule.properties[key], `${location}.${key}`));
             } else if (rule.additionalProperties === false) {
                 add(`unknown property '${key}'`);
-            } else if (
-                rule.additionalProperties &&
-                typeof rule.additionalProperties === 'object'
-            ) {
-                problems.push(
-                    ...validate(
-                        candidate[key],
-                        rule.additionalProperties,
-                        `${location}.${key}`,
-                    ),
-                );
+            } else if (rule.additionalProperties && typeof rule.additionalProperties === 'object') {
+                problems.push(...validate(candidate[key], rule.additionalProperties, `${location}.${key}`));
             }
         }
     }
-    for (const nested of rule.allOf ?? [])
-        problems.push(...validate(candidate, nested, location));
-    if (rule.if && validate(candidate, rule.if, location).length === 0 && rule.then)
-        problems.push(...validate(candidate, rule.then, location));
+    for (const nested of rule.allOf ?? []) problems.push(...validate(candidate, nested, location));
+    if (rule.if && validate(candidate, rule.if, location).length === 0 && rule.then) problems.push(...validate(candidate, rule.then, location));
     if (rule.oneOf) {
-        const matches = rule.oneOf.filter(
-            (option) => validate(candidate, option, location).length === 0,
-        ).length;
+        const matches = rule.oneOf.filter(option => validate(candidate, option, location).length === 0).length;
         if (matches !== 1) add(`must match exactly one alternative, matched ${matches}`);
     }
     return problems;
@@ -149,9 +101,7 @@ const validManifest = {
 
 const validProblems = validate(validManifest, schema);
 if (validProblems.length > 0) {
-    console.error(
-        `Valid renderer manifest failed schema validation:\n- ${validProblems.join('\n- ')}`,
-    );
+    console.error(`Valid renderer manifest failed schema validation:\n- ${validProblems.join('\n- ')}`);
     process.exit(1);
 }
 
@@ -164,15 +114,11 @@ const invalidManifests = [
 ];
 for (const invalid of invalidManifests) {
     if (validate(invalid, schema).length === 0) {
-        console.error(
-            `Invalid renderer manifest unexpectedly passed: ${JSON.stringify(invalid)}`,
-        );
+        console.error(`Invalid renderer manifest unexpectedly passed: ${JSON.stringify(invalid)}`);
         process.exit(1);
     }
 }
-console.log(
-    'Renderer metadata schema accepts open adapter/slot identities and rejects invalid manifests.',
-);
+console.log('Renderer metadata schema accepts open adapter/slot identities and rejects invalid manifests.');
 
 const tsc = path.resolve(packageDir, '../node_modules/typescript/bin/tsc');
 const typeCheck = spawnSync(
@@ -199,9 +145,7 @@ const typeCheck = spawnSync(
     { cwd: packageDir, encoding: 'utf8', timeout: 120_000 },
 );
 if (typeCheck.status !== 0) {
-    console.error(
-        `Renderer slot typing fixture failed:\n${typeCheck.stdout}${typeCheck.stderr}`,
-    );
+    console.error(`Renderer slot typing fixture failed:\n${typeCheck.stdout}${typeCheck.stderr}`);
     process.exit(1);
 }
 console.log('Renderer slot typing fixture compiles under strict TypeScript.');
@@ -265,6 +209,4 @@ if (ssrImport.status !== 0) {
     console.error(`Renderer SSR import failed:\n${ssrImport.stdout}${ssrImport.stderr}`);
     process.exit(1);
 }
-console.log(
-    'Renderer subpath imports with document undefined and defers DOM access until invocation.',
-);
+console.log('Renderer subpath imports with document undefined and defers DOM access until invocation.');

From 107809ce5b989325f29db204f2a9495e4002efd5 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 21:25:02 +0200
Subject: [PATCH 197/267] Track extracted atomic part ownership

---
 Source/scripts/generate-parts.mjs | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/Source/scripts/generate-parts.mjs b/Source/scripts/generate-parts.mjs
index 97e55f15..f7b99f66 100644
--- a/Source/scripts/generate-parts.mjs
+++ b/Source/scripts/generate-parts.mjs
@@ -770,31 +770,31 @@ export const partStateDefinitions = {
  */
 export const splitPartStateAllowlist = [
     {
-        file: 'Common/DatePickerInput.tsx',
+        file: 'Common/DatePickerInputImplementation.tsx',
         spread: 'groupProps',
         part: 'group',
         states: ['disabled', 'selected', 'open', 'invalid', 'readonly'],
     },
     {
-        file: 'Common/DatePickerInput.tsx',
+        file: 'Common/DatePickerInputImplementation.tsx',
         spread: 'inputProps',
         part: 'input',
         states: ['disabled', 'selected', 'open', 'invalid', 'readonly'],
     },
     {
-        file: 'Common/DatePickerInput.tsx',
+        file: 'Common/DatePickerInputImplementation.tsx',
         spread: 'segmentProps',
         part: 'segment',
         states: ['disabled', 'invalid', 'readonly'],
     },
     {
-        file: 'Common/DatePickerInput.tsx',
+        file: 'Common/DatePickerInputImplementation.tsx',
         spread: 'triggerProps',
         part: 'trigger',
         states: ['disabled', 'selected', 'open', 'invalid', 'readonly'],
     },
     {
-        file: 'Dropdown/Dropdown.tsx',
+        file: 'Dropdown/DropdownImplementation.tsx',
         spread: 'props',
         part: 'trigger',
         states: ['open'],
@@ -808,7 +808,7 @@ export const splitPartStateAllowlist = [
 export const implicitPartStateAllowlist = [
     {
         component: 'DatePickerInput',
-        file: 'Common/DatePickerInput.tsx',
+        file: 'Common/DatePickerInputImplementation.tsx',
         part: 'cell',
         states: ['selected'],
         reason: 'React Aria CalendarCell emits data-selected for the selected date.',
@@ -825,12 +825,12 @@ export const implicitPartStateAllowlist = [
 /** Exact dynamic production expressions that intentionally emit known parts. */
 export const dynamicPartExpressions = [
     {
-        file: 'Dialogs/Dialog.tsx',
+        file: 'Dialogs/DialogImplementation.tsx',
         expression: "primary ? 'confirm' : 'cancel'",
         parts: ['confirm', 'cancel'],
     },
     {
-        file: 'Common/Tooltip.tsx',
+        file: 'Common/TooltipImplementation.tsx',
         expression: "children.props['data-cratis-part'] ?? 'trigger'",
         parts: ['trigger'],
         preservesChildPart: true,

From ccbfd161fb771d1c4dbfae3b93b2d0c26386887b Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 21:31:56 +0200
Subject: [PATCH 198/267] Keep React Aria portal imports external

---
 Source/Common/DatePickerInputImplementation.tsx | 2 +-
 Source/Common/TooltipImplementation.tsx         | 2 +-
 Source/Dialogs/DialogImplementation.tsx         | 2 +-
 Source/Dropdown/DropdownImplementation.tsx      | 2 +-
 Source/scripts/verify-renderer-contracts.mjs    | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/Source/Common/DatePickerInputImplementation.tsx b/Source/Common/DatePickerInputImplementation.tsx
index 9cd3f56d..9e7225e9 100644
--- a/Source/Common/DatePickerInputImplementation.tsx
+++ b/Source/Common/DatePickerInputImplementation.tsx
@@ -19,7 +19,7 @@ import {
 } from 'react-aria-components/DatePicker';
 import { Dialog } from 'react-aria-components/Dialog';
 import { Heading } from 'react-aria-components/Heading';
-import { UNSAFE_PortalProvider } from 'react-aria/PortalProvider';
+import { UNSAFE_PortalProvider } from 'react-aria';
 import { unstable_useOverlayEnvironment } from '../renderer/RendererContext';
 import { useCratisComponentsConfig } from './CratisComponentsProvider';
 import { asReactAriaButtonProps } from './reactAriaProps';
diff --git a/Source/Common/TooltipImplementation.tsx b/Source/Common/TooltipImplementation.tsx
index a1e7eb34..7a2e36c8 100644
--- a/Source/Common/TooltipImplementation.tsx
+++ b/Source/Common/TooltipImplementation.tsx
@@ -7,7 +7,7 @@ import {
     Tooltip as AriaTooltip,
     TooltipTrigger,
 } from 'react-aria-components/Tooltip';
-import { UNSAFE_PortalProvider } from 'react-aria/PortalProvider';
+import { UNSAFE_PortalProvider } from 'react-aria';
 import { unstable_useOverlayEnvironment } from '../renderer/RendererContext';
 import type { TooltipProps } from './Tooltip';
 
diff --git a/Source/Dialogs/DialogImplementation.tsx b/Source/Dialogs/DialogImplementation.tsx
index bce32293..fd2ebfa7 100644
--- a/Source/Dialogs/DialogImplementation.tsx
+++ b/Source/Dialogs/DialogImplementation.tsx
@@ -4,7 +4,7 @@
 import { DialogResult, DialogButtons, useDialogContext } from '@cratis/arc.react/dialogs';
 import { Dialog as AriaDialog, Heading } from 'react-aria-components/Dialog';
 import { Modal, ModalOverlay } from 'react-aria-components/Modal';
-import { UNSAFE_PortalProvider } from 'react-aria/PortalProvider';
+import { UNSAFE_PortalProvider } from 'react-aria';
 import { useEffect, useRef, useSyncExternalStore } from 'react';
 import { unstable_useOverlayEnvironment } from '../renderer/RendererContext';
 import { DialogInitialFocus } from './DialogInitialFocus';
diff --git a/Source/Dropdown/DropdownImplementation.tsx b/Source/Dropdown/DropdownImplementation.tsx
index 4c836e2e..54f630eb 100644
--- a/Source/Dropdown/DropdownImplementation.tsx
+++ b/Source/Dropdown/DropdownImplementation.tsx
@@ -20,7 +20,7 @@ import {
     ListBoxItem as ComboBoxListBoxItem,
     Popover as ComboBoxPopover,
 } from 'react-aria-components/ComboBox';
-import { UNSAFE_PortalProvider } from 'react-aria/PortalProvider';
+import { UNSAFE_PortalProvider } from 'react-aria';
 import { unstable_useOverlayEnvironment } from '../renderer/RendererContext';
 import { useCratisComponentsConfig } from '../Common/CratisComponentsProvider';
 import type { DropdownProps } from './Dropdown';
diff --git a/Source/scripts/verify-renderer-contracts.mjs b/Source/scripts/verify-renderer-contracts.mjs
index fa7cb088..fcfe2dc3 100644
--- a/Source/scripts/verify-renderer-contracts.mjs
+++ b/Source/scripts/verify-renderer-contracts.mjs
@@ -176,7 +176,7 @@ const overlayImplementationFiles = [
 for (const relative of overlayImplementationFiles) {
     const source = readFileSync(path.join(packageDir, relative), 'utf8');
     if (
-        !source.includes("from 'react-aria/PortalProvider'") ||
+        !source.includes("from 'react-aria'") ||
         !source.includes('getContainer={overlayEnvironment.getContainer}')
     ) {
         console.error(

From a85e92b962d64e12cdb07db3d0e986ceda2a145b Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 22:31:07 +0200
Subject: [PATCH 199/267] Add opt-in built-in renderer manifest

---
 Codemods/test/transform.test.js              |  1 +
 Source/CONFORMANCE.md                        | 15 ++++
 Source/package.json                          | 75 ++++++++++++++++++++
 Source/renderer/README.md                    |  7 +-
 Source/renderer/builtin/index.ts             | 65 +++++++++++++++++
 Source/scripts/verify-package-archive.mjs    |  3 +
 Source/scripts/verify-package-graph.mjs      | 39 ++++++----
 Source/scripts/verify-renderer-contracts.mjs | 29 +++++++-
 8 files changed, 219 insertions(+), 15 deletions(-)
 create mode 100644 Source/CONFORMANCE.md
 create mode 100644 Source/renderer/builtin/index.ts

diff --git a/Codemods/test/transform.test.js b/Codemods/test/transform.test.js
index 55dc27d5..b727ae4f 100644
--- a/Codemods/test/transform.test.js
+++ b/Codemods/test/transform.test.js
@@ -114,6 +114,7 @@ describe('root namespace maps', () => {
             './theme',
             // New Components 4 adapter-author contracts and their static metadata schema.
             './renderer',
+            './renderer/builtin',
             './schemas/ui-adapter.schema.json',
             // The historical namespace represented the complete CommandDialog module.
             './CommandStepper',
diff --git a/Source/CONFORMANCE.md b/Source/CONFORMANCE.md
new file mode 100644
index 00000000..ea7ffe28
--- /dev/null
+++ b/Source/CONFORMANCE.md
@@ -0,0 +1,15 @@
+<!-- Copyright (c) Cratis. All rights reserved. -->
+<!-- Licensed under the MIT license. See LICENSE file in the project root for full license information. -->
+
+# Built-in renderer conformance evidence
+
+The opt-in `@cratis/components/renderer/builtin` manifest is exercised by
+`@cratis/components.conformance` against all fourteen renderer ABI v1 slots. The repository gate
+requires every bounded check to pass with zero skips, validates the package's static `cratis`
+metadata against the public adapter schema, and plants dropped-ref, omitted-part,
+over-declared-capability, unjustified-skip, and duplicate-owner defects to prove exact failures.
+
+This is automated repository evidence, not a universal accessibility or browser claim. axe, jsdom
+forms/events, deterministic SSR/hydration, RTL, forced-colors, and reduced-motion inputs do not
+replace manual assistive-technology review or the separate Storybook browser/axe gate. See the
+conformance package's `CONFORMANCE.md` for the complete evidence boundary.
diff --git a/Source/package.json b/Source/package.json
index a2256a77..cb8718ba 100644
--- a/Source/package.json
+++ b/Source/package.json
@@ -17,6 +17,7 @@
         "LICENSE",
         "THIRD_PARTY_NOTICES.md",
         "MIGRATION.md",
+        "CONFORMANCE.md",
         "!dist/**/*.stories.*",
         "!dist/**/given.*",
         "!dist/**/storybook-static/**",
@@ -110,6 +111,10 @@
             "types": "./dist/esm/renderer/index.d.ts",
             "import": "./dist/esm/renderer/index.js"
         },
+        "./renderer/builtin": {
+            "types": "./dist/esm/renderer/builtin/index.d.ts",
+            "import": "./dist/esm/renderer/builtin/index.js"
+        },
         "./schemas/ui-adapter.schema.json": "./dist/esm/schemas/ui-adapter.schema.json",
         "./SchemaEditor": {
             "types": "./dist/esm/SchemaEditor/index.d.ts",
@@ -131,6 +136,76 @@
         "./tokens": "./dist/esm/tokens.css",
         "./theme": "./dist/esm/theme.css"
     },
+    "cratis": {
+        "kind": "ui-adapter",
+        "id": "cratis-built-in",
+        "displayName": "Cratis built-in renderer",
+        "abi": "^1",
+        "level": "full",
+        "profile": "core/v1",
+        "category": "built-in",
+        "entry": "./dist/esm/renderer/builtin/index.js",
+        "export": "unstable_cratisBuiltIn",
+        "slots": [
+            "common.button",
+            "common.iconButton",
+            "common.textInput",
+            "common.textArea",
+            "common.checkbox",
+            "common.radio",
+            "common.switch",
+            "common.progress",
+            "common.surface",
+            "common.tooltip",
+            "dropdown.select",
+            "dialogs.dialog",
+            "display.datePicker",
+            "datatables.paginator"
+        ],
+        "modes": {
+            "common.button": "presentation",
+            "common.iconButton": "presentation",
+            "common.textInput": "presentation",
+            "common.textArea": "presentation",
+            "common.checkbox": "presentation",
+            "common.radio": "presentation",
+            "common.switch": "presentation",
+            "common.progress": "presentation",
+            "common.surface": "presentation",
+            "common.tooltip": "atomic",
+            "dropdown.select": "atomic",
+            "dialogs.dialog": "atomic",
+            "display.datePicker": "atomic",
+            "datatables.paginator": "atomic"
+        },
+        "capabilities": [
+            "slot.render",
+            "parts.passthrough",
+            "focus.trap",
+            "focus.restore",
+            "overlay.portal",
+            "selection.multi",
+            "datetime.i18n",
+            "form.validationMessage",
+            "theme.tokens",
+            "ssr.staticRender",
+            "rtl",
+            "forcedColors",
+            "motion.reduced"
+        ],
+        "ssr": "safe",
+        "a11y": {
+            "axeProfile": "wcag22aa",
+            "evidence": "./CONFORMANCE.md"
+        },
+        "license": {
+            "spdx": "MIT",
+            "requiresKey": false
+        },
+        "upstream": {
+            "react": "^19.0.0"
+        }
+    },
     "scripts": {
         "generate-parts": "node ./scripts/generate-parts.mjs",
         "verify-parts-manifest": "node ./scripts/verify-parts-manifest.mjs",
diff --git a/Source/renderer/README.md b/Source/renderer/README.md
index da3e3f9e..2e35bec4 100644
--- a/Source/renderer/README.md
+++ b/Source/renderer/README.md
@@ -34,5 +34,8 @@ SSR never looks up a container. `null` defers the overlay rather than falling ba
 
 `ButtonImplementation` composes `TooltipImplementation` directly to avoid slot recursion. Core
 `TablePaginatorImplementation` intentionally composes public `Button` as a distinct nested
-presentation slot. The private `coreSlots.ts` table names only non-facade implementations and remains
-unreachable from the setup-only root, `./Common`, and public `./renderer` closures.
+presentation slot. The private `coreSlots.ts` table names only non-facade implementations and remains unreachable
+from the setup-only root, `./Common`, and public `./renderer` closures. Adapter authors may opt into
+the deliberately heavy `@cratis/components/renderer/builtin` proof subpath, which exports only the
+frozen `unstable_cratisBuiltIn` manifest and is the sole public closure allowed to reach that table
+and all implementation families. Raw Core slots are never exported.
diff --git a/Source/renderer/builtin/index.ts b/Source/renderer/builtin/index.ts
new file mode 100644
index 00000000..f0d18717
--- /dev/null
+++ b/Source/renderer/builtin/index.ts
@@ -0,0 +1,65 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { unstable_CapabilityId } from '../capabilities.js';
+import { unstable_coreSlots } from '../coreSlots.js';
+import {
+    unstable_CRATIS_UI_ABI_VERSION,
+    unstable_defineUiLibrary,
+    type unstable_UiLibrary,
+} from '../manifest.js';
+import type { unstable_SlotId } from '../slots.js';
+
+const profileSlots = Object.freeze([
+    'common.button',
+    'common.iconButton',
+    'common.textInput',
+    'common.textArea',
+    'common.checkbox',
+    'common.radio',
+    'common.switch',
+    'common.progress',
+    'common.surface',
+    'common.tooltip',
+    'dropdown.select',
+    'dialogs.dialog',
+    'display.datePicker',
+    'datatables.paginator',
+] satisfies readonly unstable_SlotId[]);
+
+const capabilities = Object.freeze([
+    'slot.render',
+    'parts.passthrough',
+    'focus.trap',
+    'focus.restore',
+    'overlay.portal',
+    'selection.multi',
+    'datetime.i18n',
+    'form.validationMessage',
+    'theme.tokens',
+    'ssr.staticRender',
+    'rtl',
+    'forcedColors',
+    'motion.reduced',
+] satisfies readonly unstable_CapabilityId[]);
+
+/**
+ * Opt-in manifest for the Components-owned implementations of every renderer ABI v1 slot.
+ *
+ * This proof adapter is intentionally isolated to `@cratis/components/renderer/builtin`. Importing
+ * it opts into the complete component-family graph; the package root and lean `./renderer` subpath
+ * never reach this manifest or the private Core slot table behind it.
+ *
+ * @unstable Adapter-author proof contract. It is not an application default or a discovery API.
+ */
+export const unstable_cratisBuiltIn: unstable_UiLibrary =
+    unstable_defineUiLibrary({
+        id: 'cratis-built-in',
+        displayName: 'Cratis built-in renderer',
+        abi: unstable_CRATIS_UI_ABI_VERSION,
+        level: 'full',
+        profile: 'core/v1',
+        profileSlots,
+        capabilities,
+        slots: unstable_coreSlots,
+    });
diff --git a/Source/scripts/verify-package-archive.mjs b/Source/scripts/verify-package-archive.mjs
index 1664eed3..849758dc 100644
--- a/Source/scripts/verify-package-archive.mjs
+++ b/Source/scripts/verify-package-archive.mjs
@@ -35,6 +35,9 @@ const requiredEntries = [
     'package/dist/esm/schemas/ui-adapter.schema.json',
     'package/dist/esm/renderer/index.js',
     'package/dist/esm/renderer/index.d.ts',
+    'package/dist/esm/renderer/builtin/index.js',
+    'package/dist/esm/renderer/builtin/index.d.ts',
+    'package/CONFORMANCE.md',
     'package/dist/esm/PatrickHand-OFL.txt',
     'package/dist/esm/PatrickHand-latin.woff2',
     'package/dist/esm/PatrickHand-latin-ext.woff2',
diff --git a/Source/scripts/verify-package-graph.mjs b/Source/scripts/verify-package-graph.mjs
index 955b4e13..39fc608b 100644
--- a/Source/scripts/verify-package-graph.mjs
+++ b/Source/scripts/verify-package-graph.mjs
@@ -28,10 +28,10 @@
  *      beyond the React framework peer and reaches no component implementation directory. Its declaration closure may
  *      reach Components-owned prop declarations and React types, but no renderer vendor.
  *      The check is explicitly deferred until that export exists.
- *   5. All fourteen self-hosting facades use local Core declarations. The setup-only root,
- *      `./Common`, and public `./renderer` closures never reach the private all-family
- *      `renderer/coreSlots` ABI-proof table. Root and `./Common` also stay outside the table's
- *      DataTables, Dialogs, Display, and Dropdown family directories.
+ *   5. All fourteen self-hosting facades use local Core declarations. Only the explicit heavy
+ *      `./renderer/builtin` proof subpath may reach the private all-family `renderer/coreSlots`
+ *      table. The setup-only root, `./Common`, and public `./renderer` stay outside it; root and
+ *      `./Common` also stay outside DataTables, Dialogs, Display, and Dropdown families.
  *   6. Every source module in the canonical repository-owned kernel inventory has emitted
  *      runtime and declaration closures with no React, React DOM, or React Aria Components
  *      dependency, and no emitted runtime or declaration reference to a browser DOM global.
@@ -310,7 +310,11 @@ for (const importer of rendererVendorImporters) {
 const componentImplementationDirectories = [
     ...new Set(
         jsSubpaths.flatMap(({ subpath, jsEntry }) => {
-            if (subpath === '.' || subpath === './renderer' || subpath === './types')
+            if (
+                subpath === '.' ||
+                subpath === './types' ||
+                subpath.startsWith('./renderer')
+            )
                 return [];
             const relative = path.relative(esmRoot, jsEntry).split(path.sep).join('/');
             const separator = relative.indexOf('/');
@@ -318,7 +322,7 @@ const componentImplementationDirectories = [
         }),
     ),
 ].sort();
-const coreSlotIsolationSubpaths = new Set(['.', './Common', './renderer']);
+const BUILTIN_RENDERER_SUBPATH = './renderer/builtin';
 const leanCoreSlotSubpaths = new Set(['.', './Common']);
 const coreSlotCrossFamilyDirectories = [
     'DataTables/',
@@ -328,18 +332,29 @@ const coreSlotCrossFamilyDirectories = [
 ];
 const reachesCoreSlots = (closure) =>
     closure.files.filter((file) => /^renderer\/coreSlots\.(?:js|d\.ts)$/u.test(file));
-for (const row of subpathReports.filter(({ subpath }) =>
-    coreSlotIsolationSubpaths.has(subpath),
-)) {
+for (const row of subpathReports) {
     for (const [kind, closure] of [
         ['runtime', row.runtime],
         ['declaration', row.declarations],
     ]) {
         const coreSlotFiles = reachesCoreSlots(closure);
-        if (coreSlotFiles.length > 0) {
+        if (
+            coreSlotFiles.length > 0 &&
+            row.subpath !== BUILTIN_RENDERER_SUBPATH
+        ) {
+            violations.push(
+                `${row.subpath}: ${kind} closure reaches private all-family Core slot table; ` +
+                    `only ${BUILTIN_RENDERER_SUBPATH} may reach ${coreSlotFiles.join(', ')}.`,
+            );
+        }
+        if (
+            row.subpath === BUILTIN_RENDERER_SUBPATH &&
+            kind === 'runtime' &&
+            coreSlotFiles.length === 0
+        ) {
             violations.push(
-                `${row.subpath}: ${kind} closure reaches private all-family Core slot table: ` +
-                    coreSlotFiles.join(', '),
+                `${BUILTIN_RENDERER_SUBPATH}: ${kind} closure no longer reaches the private ` +
+                    'Core slot table required by the opt-in proof manifest.',
             );
         }
     }
diff --git a/Source/scripts/verify-renderer-contracts.mjs b/Source/scripts/verify-renderer-contracts.mjs
index fcfe2dc3..fd77f28f 100644
--- a/Source/scripts/verify-renderer-contracts.mjs
+++ b/Source/scripts/verify-renderer-contracts.mjs
@@ -13,6 +13,7 @@ const fixturePath = path.join(
     'renderer/for_slot_types/slotTyping.fixture.ts',
 );
 const schema = JSON.parse(readFileSync(schemaPath, 'utf8'));
+const packageJson = JSON.parse(readFileSync(path.join(packageDir, 'package.json'), 'utf8'));
 
 const valueType = value => {
     if (Array.isArray(value)) return 'array';
@@ -118,7 +119,22 @@ for (const invalid of invalidManifests) {
         process.exit(1);
     }
 }
-console.log('Renderer metadata schema accepts open adapter/slot identities and rejects invalid manifests.');
+const builtInMetadataProblems = validate(packageJson.cratis, schema);
+if (builtInMetadataProblems.length > 0) {
+    console.error(
+        `Built-in renderer package metadata failed schema validation:\n- ${builtInMetadataProblems.join('\n- ')}`,
+    );
+    process.exit(1);
+}
+if (
+    packageJson.cratis.slots.length !== 14 ||
+    Object.keys(packageJson.cratis.modes).length !== 14 ||
+    !packageJson.cratis.entry.includes('/renderer/builtin/')
+) {
+    console.error('Built-in renderer metadata must describe exactly fourteen slots at the opt-in subpath.');
+    process.exit(1);
+}
+console.log('Renderer metadata schema accepts the built-in/static fixtures and rejects invalid manifests.');
 
 const tsc = path.resolve(packageDir, '../node_modules/typescript/bin/tsc');
 const typeCheck = spawnSync(
@@ -199,6 +215,17 @@ const renderer = await import('@cratis/components/renderer');
 if (renderer.unstable_defaultOverlayEnvironment.getContainer() !== null) {
     throw new Error('Default overlay environment must return null without document.');
 }
+if ('unstable_cratisBuiltIn' in renderer) {
+    throw new Error('The lean renderer subpath must not expose the built-in implementation graph.');
+}
+const builtin = await import('@cratis/components/renderer/builtin');
+if (Object.keys(builtin).join(',') !== 'unstable_cratisBuiltIn') {
+    throw new Error('The built-in subpath must export only unstable_cratisBuiltIn.');
+}
+const library = builtin.unstable_cratisBuiltIn;
+if (!Object.isFrozen(library) || !Object.isFrozen(library.slots) || Object.keys(library.slots).length !== 14) {
+    throw new Error('The built-in manifest and complete fourteen-slot table must be frozen.');
+}
 `;
 const ssrImport = spawnSync(
     process.execPath,

From 16141bee69ca020526c49cb795c9bf6786c7080d Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 22:31:36 +0200
Subject: [PATCH 200/267] Add renderer adapter conformance package

---
 .github/workflows/javascript-build.yml        |   6 +
 .github/workflows/markdown-verification.yml   |   4 +
 Conformance/CONFORMANCE.md                    |  35 +
 Conformance/LICENSE                           |  21 +
 Conformance/README.md                         |  44 ++
 .../when_detecting_planted_defects.tsx        |  97 +++
 .../when_running_the_builtin_manifest.tsx     |  39 ++
 .../when_normalizing_react_boundaries.tsx     |  70 ++
 Conformance/package.json                      |  54 ++
 Conformance/scripts/verify-packed-package.mjs | 111 +++
 Conformance/src/AdapterPackageMetadata.ts     |  30 +
 Conformance/src/ConformanceCheck.ts           |  16 +
 Conformance/src/ConformanceFamily.ts          |  14 +
 Conformance/src/ConformanceLibrary.ts         |  21 +
 Conformance/src/ConformanceLimitation.ts      |   8 +
 Conformance/src/ConformanceOptions.ts         |  17 +
 Conformance/src/ConformanceReport.ts          |  16 +
 Conformance/src/ConformanceSkipRequest.ts     |   9 +
 Conformance/src/ConformanceStatus.ts          |   9 +
 Conformance/src/ConformanceSummary.ts         |  10 +
 Conformance/src/index.ts                      |  14 +
 Conformance/src/internal/SlotProfile.ts       |  27 +
 Conformance/src/internal/metadata.ts          | 107 +++
 .../src/internal/reactNormalization.ts        |  59 ++
 Conformance/src/internal/slotProfiles.tsx     | 211 ++++++
 Conformance/src/runConformance.tsx            | 650 ++++++++++++++++++
 Conformance/src/upstreamJsxShim.ts            |  10 +
 Conformance/tsconfig.build.json               |  16 +
 Conformance/vitest.config.ts                  |  17 +
 Conformance/vitest.setup.ts                   |  19 +
 Documentation/ui-foundation.md                |   2 +-
 package.json                                  |   3 +-
 run-task-on-workspaces.js                     |   4 +-
 yarn.lock                                     |  15 +-
 34 files changed, 1780 insertions(+), 5 deletions(-)
 create mode 100644 Conformance/CONFORMANCE.md
 create mode 100644 Conformance/LICENSE
 create mode 100644 Conformance/README.md
 create mode 100644 Conformance/for_conformance/when_detecting_planted_defects.tsx
 create mode 100644 Conformance/for_conformance/when_running_the_builtin_manifest.tsx
 create mode 100644 Conformance/for_react_normalization/when_normalizing_react_boundaries.tsx
 create mode 100644 Conformance/package.json
 create mode 100644 Conformance/scripts/verify-packed-package.mjs
 create mode 100644 Conformance/src/AdapterPackageMetadata.ts
 create mode 100644 Conformance/src/ConformanceCheck.ts
 create mode 100644 Conformance/src/ConformanceFamily.ts
 create mode 100644 Conformance/src/ConformanceLibrary.ts
 create mode 100644 Conformance/src/ConformanceLimitation.ts
 create mode 100644 Conformance/src/ConformanceOptions.ts
 create mode 100644 Conformance/src/ConformanceReport.ts
 create mode 100644 Conformance/src/ConformanceSkipRequest.ts
 create mode 100644 Conformance/src/ConformanceStatus.ts
 create mode 100644 Conformance/src/ConformanceSummary.ts
 create mode 100644 Conformance/src/index.ts
 create mode 100644 Conformance/src/internal/SlotProfile.ts
 create mode 100644 Conformance/src/internal/metadata.ts
 create mode 100644 Conformance/src/internal/reactNormalization.ts
 create mode 100644 Conformance/src/internal/slotProfiles.tsx
 create mode 100644 Conformance/src/runConformance.tsx
 create mode 100644 Conformance/src/upstreamJsxShim.ts
 create mode 100644 Conformance/tsconfig.build.json
 create mode 100644 Conformance/vitest.config.ts
 create mode 100644 Conformance/vitest.setup.ts

diff --git a/.github/workflows/javascript-build.yml b/.github/workflows/javascript-build.yml
index e4c44f39..ec35cc16 100644
--- a/.github/workflows/javascript-build.yml
+++ b/.github/workflows/javascript-build.yml
@@ -23,6 +23,7 @@ on:
             - 'Source/**'
             - 'Codemods/**'
             - 'ESLint/**'
+            - 'Conformance/**'
             - 'package.json'
             - 'rollup.config.mjs'
             - 'yarn.lock'
@@ -36,6 +37,7 @@ on:
             - 'Source/**'
             - 'Codemods/**'
             - 'ESLint/**'
+            - 'Conformance/**'
             - 'package.json'
             - 'rollup.config.mjs'
             - 'yarn.lock'
@@ -88,6 +90,10 @@ jobs:
               working-directory: ESLint
               run: yarn verify-package
 
+            - name: Verify packed renderer conformance package
+              working-directory: Conformance
+              run: yarn verify-package
+
             # Every intentionally public declaration/member reachable from a JS `exports`
             # subpath must carry a TSDoc comment (Cratis/Components#173). Runs against
             # source, so it needs no build step; its own self-tests run first and fail
diff --git a/.github/workflows/markdown-verification.yml b/.github/workflows/markdown-verification.yml
index 0d7fdce0..e4cb25e9 100644
--- a/.github/workflows/markdown-verification.yml
+++ b/.github/workflows/markdown-verification.yml
@@ -11,6 +11,7 @@ on:
             - 'Source/*.md'
             - 'Codemods/*.md'
             - 'ESLint/*.md'
+            - 'Conformance/*.md'
     pull_request:
         branches:
             - '**'
@@ -20,6 +21,7 @@ on:
             - 'Source/*.md'
             - 'Codemods/*.md'
             - 'ESLint/*.md'
+            - 'Conformance/*.md'
 
 concurrency:
     group: ${{ github.workflow }}-${{ github.ref }}
@@ -48,6 +50,7 @@ jobs:
                       Source/*.md
                       Codemods/*.md
                       ESLint/*.md
+                      Conformance/*.md
 
     link-verification:
         runs-on: ubuntu-latest
@@ -74,6 +77,7 @@ jobs:
                       Source/*.md
                       Codemods/*.md
                       ESLint/*.md
+                      Conformance/*.md
                       Documentation/**/*.md
                       Documentation/**/*.mdx
                   markdown: true
diff --git a/Conformance/CONFORMANCE.md b/Conformance/CONFORMANCE.md
new file mode 100644
index 00000000..793e0fdc
--- /dev/null
+++ b/Conformance/CONFORMANCE.md
@@ -0,0 +1,35 @@
+<!-- Copyright (c) Cratis. All rights reserved. -->
+<!-- Licensed under the MIT license. See LICENSE file in the project root for full license information. -->
+
+# Conformance evidence boundary
+
+`runConformance()` returns evidence for the exact library manifest, package metadata, DOM
+implementation, dependency versions, and execution environment supplied to that call. A passing
+report does **not** claim universal accessibility, browser, visual, assistive-technology, framework,
+or production conformance.
+
+The automated families are:
+
+- package metadata schema constraints, runtime consistency, and capability over-declaration;
+- all fourteen ABI v1 slot declarations, stable parts/states, pt markers, and exact native roots;
+- bounded native form/callback behavior and presentation/atomic ownership;
+- internal React-boundary normalization fixtures (props, styles, refs, events, cleanup, StrictMode);
+- DOM-free deterministic server rendering, hydration, manifest isolation, and overlay absence/presence;
+- axe WCAG A/AA scans plus executable RTL, forced-colors, and reduced-motion inputs;
+- packed declaration purity and strict Bundler/NodeNext consumer compilation.
+
+A requested skip is accepted only when the relevant declaration is `unsupported`/`emulated`, or the
+request names a capability the library does not claim. An unjustified skip is a failure.
+
+## Explicit limitations
+
+- axe is automated DOM analysis and cannot replace manual keyboard, screen-reader, magnification,
+  voice-control, or other assistive-technology review.
+- jsdom does not establish behavior across browser engines, devices, touch/pointer combinations, or
+  operating-system accessibility modes.
+- forced-color and reduced-motion fixtures prove code-path execution, not visual contrast or the
+  absence of all motion. Repository Storybook light/dark axe runs remain a separate gate.
+- renderer-vendor focus, collection, and overlay behavior outside the fourteen public slots is not
+  exercised.
+- adapter package licensing, security, performance, and upstream support policy remain the adapter
+  author's responsibility.
diff --git a/Conformance/LICENSE b/Conformance/LICENSE
new file mode 100644
index 00000000..200ffde5
--- /dev/null
+++ b/Conformance/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Cratis
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/Conformance/README.md b/Conformance/README.md
new file mode 100644
index 00000000..4be04bd8
--- /dev/null
+++ b/Conformance/README.md
@@ -0,0 +1,44 @@
+<!-- Copyright (c) Cratis. All rights reserved. -->
+<!-- Licensed under the MIT license. See LICENSE file in the project root for full license information. -->
+
+# @cratis/components.conformance
+
+Development-only evidence runner for authors of `@cratis/components` renderer adapters. The package
+is independently versioned (`0.1.0`) and records renderer ABI major `1`; it is not a runtime
+dependency of Components or an adapter discovery mechanism.
+
+```ts
+import { runConformance } from '@cratis/components.conformance';
+import { myLibrary } from '@example/components-adapter';
+import packageJson from '@example/components-adapter/package.json' with { type: 'json' };
+
+const report = await runConformance(myLibrary, {
+    metadata: packageJson.cratis,
+});
+
+if (!report.passed) {
+    throw new Error(
+        report.checks
+            .filter(check => check.status === 'failed')
+            .map(check => `${check.id}: ${check.message}`)
+            .join('\n'),
+    );
+}
+```
+
+The runner uses only public `@cratis/components/renderer` contracts, React, and public component
+props/manifests. It covers the fourteen ABI v1 slots with static/runtime metadata consistency,
+stable parts and canonical states, pt routing, exact native elements/refs, bounded form and callback
+behavior, behavior ownership, SSR/hydration, axe, RTL/forced-color/reduced-motion inputs, and report
+skip discipline. See [CONFORMANCE.md](./CONFORMANCE.md) for the precise evidence boundary.
+
+## Commands
+
+```sh
+yarn workspace @cratis/components.conformance build
+yarn workspace @cratis/components.conformance test
+yarn workspace @cratis/components.conformance verify-package
+```
+
+`verify-package` packs the real archive, rejects tests/cache files and forbidden declaration types,
+and compiles an external consumer under both Bundler and NodeNext with `skipLibCheck: false`.
diff --git a/Conformance/for_conformance/when_detecting_planted_defects.tsx b/Conformance/for_conformance/when_detecting_planted_defects.tsx
new file mode 100644
index 00000000..4b95f665
--- /dev/null
+++ b/Conformance/for_conformance/when_detecting_planted_defects.tsx
@@ -0,0 +1,97 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import {
+    Fragment,
+    createElement,
+    type ComponentType,
+} from 'react';
+import {
+    unstable_defineUiLibrary,
+    type unstable_SlotDeclaration,
+    type unstable_SlotId,
+    type unstable_UiLibrary,
+} from '@cratis/components/renderer';
+import { unstable_cratisBuiltIn } from '@cratis/components/renderer/builtin';
+import { describe, it } from 'vitest';
+import { runConformance } from '../src/index.js';
+
+const declaration = (slotId: unstable_SlotId) =>
+    unstable_cratisBuiltIn.slots[slotId] as unstable_SlotDeclaration<unstable_SlotId>;
+
+const oneSlot = (
+    slotId: unstable_SlotId,
+    replacement: unstable_SlotDeclaration<unstable_SlotId>,
+    capabilities: unstable_UiLibrary['capabilities'] = ['slot.render', 'parts.passthrough'],
+) => unstable_defineUiLibrary({
+    id: `broken-${slotId.replace('.', '-')}`,
+    displayName: 'Deliberately broken fixture',
+    abi: 1,
+    level: 'primitive',
+    profile: 'broken/v1',
+    profileSlots: [slotId],
+    capabilities,
+    slots: { [slotId]: replacement },
+});
+
+const failureIds = async (
+    library: unstable_UiLibrary,
+    options: Parameters<typeof runConformance>[1] = {},
+) => (await runConformance(library, { document, axe: false, ...options })).checks
+    .filter((check) => check.status === 'failed')
+    .map((check) => check.id);
+
+describe('when detecting planted adapter defects', () => {
+    it('should report a dropped ref on the exact element contract', async () => {
+        const original = declaration('common.button');
+        const Original = original.render as unknown as ComponentType<Record<string, unknown>>;
+        const DropRef = (props: Record<string, unknown>) => {
+            const { ref: _ref, ...rest } = props;
+            return createElement(Original, rest);
+        };
+        const library = oneSlot('common.button', { ...original, render: DropRef });
+
+        (await failureIds(library)).should.include('contract.common.button.elementRef');
+    });
+
+    it('should report an omitted documented part', async () => {
+        const library = oneSlot('common.surface', {
+            ...declaration('common.surface'),
+            render: () => createElement('article', null, 'No stable part'),
+        });
+
+        (await failureIds(library)).should.include('contract.common.surface.parts');
+    });
+
+    it('should report an over-declared capability', async () => {
+        const library = oneSlot(
+            'common.surface',
+            declaration('common.surface'),
+            ['slot.render', 'parts.passthrough', 'paging.server'],
+        );
+
+        (await failureIds(library)).should.include('manifest.noOverDeclaration');
+    });
+
+    it('should reject an undeclared skip', async () => {
+        const library = oneSlot('common.button', declaration('common.button'));
+
+        (await failureIds(library, {
+            skips: [{ checkId: 'contract.common.button', slotId: 'common.button' }],
+        })).should.include('skip.contract.common.button.undeclared');
+    });
+
+    it('should report duplicate behavior ownership', async () => {
+        const original = declaration('dialogs.dialog');
+        const Original = original.render as unknown as ComponentType<Record<string, unknown>>;
+        const DuplicateOwner = (props: Record<string, unknown>) => createElement(
+            Fragment,
+            null,
+            createElement(Original, props),
+            createElement('section', { role: 'dialog', 'aria-label': 'Duplicate owner' }),
+        );
+        const library = oneSlot('dialogs.dialog', { ...original, render: DuplicateOwner });
+
+        (await failureIds(library)).should.include('ownership.dialogs.dialog');
+    });
+});
diff --git a/Conformance/for_conformance/when_running_the_builtin_manifest.tsx b/Conformance/for_conformance/when_running_the_builtin_manifest.tsx
new file mode 100644
index 00000000..02c8fc91
--- /dev/null
+++ b/Conformance/for_conformance/when_running_the_builtin_manifest.tsx
@@ -0,0 +1,39 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import sourcePackage from '../../Source/package.json';
+import adapterSchema from '../../Source/schemas/ui-adapter.schema.json';
+import { unstable_cratisBuiltIn } from '@cratis/components/renderer/builtin';
+import { describe, it } from 'vitest';
+import { runConformance } from '../src/index.js';
+
+describe('when running the built-in renderer manifest', () => {
+    it('should pass every bounded check with zero skips', async () => {
+        const report = await runConformance(unstable_cratisBuiltIn, {
+            metadata: sourcePackage.cratis,
+            document,
+        });
+        const failures = report.checks
+            .filter((check) => check.status === 'failed')
+            .map((check) => `${check.id}: ${check.message}`);
+
+        failures.should.deep.equal([]);
+        report.passed.should.equal(true);
+        report.summary.total.should.equal(134);
+        report.summary.passed.should.equal(134);
+        report.summary.skipped.should.equal(0);
+        Object.keys(unstable_cratisBuiltIn.slots).should.have.lengthOf(14);
+    }, 30_000);
+
+    it('should validate the actual static fixture against the published schema identity', () => {
+        adapterSchema.$id.should.equal('https://cratis.io/schemas/ui-adapter.schema.json');
+        adapterSchema.required.should.include.members([
+            'slots',
+            'modes',
+            'capabilities',
+            'ssr',
+            'a11y',
+        ]);
+        sourcePackage.cratis.slots.should.have.lengthOf(14);
+    });
+});
diff --git a/Conformance/for_react_normalization/when_normalizing_react_boundaries.tsx b/Conformance/for_react_normalization/when_normalizing_react_boundaries.tsx
new file mode 100644
index 00000000..e8dda3e2
--- /dev/null
+++ b/Conformance/for_react_normalization/when_normalizing_react_boundaries.tsx
@@ -0,0 +1,70 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { StrictMode, act, createElement, createRef, useEffect } from 'react';
+import { createRoot } from 'react-dom/client';
+import { describe, it } from 'vitest';
+import {
+    composeHandlers,
+    listen,
+    mergeRefs,
+    normalizeReactProps,
+    normalizeStyle,
+} from '../src/internal/reactNormalization.js';
+
+describe('when normalizing React boundaries', () => {
+    it('should normalize class label style CSS variables and SVG casing', () => {
+        const props = normalizeReactProps({
+            class: 'sample',
+            for: 'field',
+            'stroke-width': 2,
+            'fill-rule': 'evenodd',
+        });
+        const style = normalizeStyle({ color: 'red', '--sample-color': 'blue' });
+
+        props.should.deep.equal({
+            className: 'sample',
+            htmlFor: 'field',
+            strokeWidth: 2,
+            fillRule: 'evenodd',
+        });
+        style.should.deep.equal({ color: 'red', '--sample-color': 'blue' });
+    });
+
+    it('should merge refs and preserve handler order and preventDefault', () => {
+        const objectRef = createRef<HTMLElement>();
+        let callbackValue: HTMLElement | null = null;
+        const target = document.createElement('button');
+        const merged = mergeRefs(objectRef, (value) => { callbackValue = value; });
+        if (typeof merged === 'function') merged(target);
+        const order: string[] = [];
+        composeHandlers<Event>(
+            (event) => { order.push('pt'); event.preventDefault(); },
+            () => order.push('public'),
+        )(new Event('click', { cancelable: true }));
+
+        (objectRef.current === target).should.equal(true);
+        (callbackValue === target).should.equal(true);
+        order.should.deep.equal(['pt']);
+    });
+
+    it('should clean listeners exactly once across StrictMode replay', async () => {
+        let calls = 0;
+        const Listener = () => {
+            useEffect(() => listen(document, 'click', () => { calls += 1; }), []);
+            return null;
+        };
+        const container = document.createElement('div');
+        document.body.append(container);
+        const root = createRoot(container);
+        await act(async () => {
+            root.render(createElement(StrictMode, null, createElement(Listener)));
+        });
+        document.dispatchEvent(new Event('click'));
+        calls.should.equal(1);
+        await act(async () => root.unmount());
+        document.dispatchEvent(new Event('click'));
+        calls.should.equal(1);
+        container.remove();
+    });
+});
diff --git a/Conformance/package.json b/Conformance/package.json
new file mode 100644
index 00000000..32899121
--- /dev/null
+++ b/Conformance/package.json
@@ -0,0 +1,54 @@
+{
+    "name": "@cratis/components.conformance",
+    "version": "0.1.0",
+    "description": "Programmatic conformance evidence for Cratis Components renderer adapter authors.",
+    "author": "Cratis",
+    "license": "MIT",
+    "type": "module",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/Cratis/Components"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "engines": {
+        "node": ">=23.0.0"
+    },
+    "files": [
+        "dist",
+        "README.md",
+        "CONFORMANCE.md",
+        "LICENSE"
+    ],
+    "main": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "exports": {
+        "./package.json": "./package.json",
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.js"
+        }
+    },
+    "sideEffects": false,
+    "cratisUiAbi": 1,
+    "scripts": {
+        "clean": "rm -rf dist",
+        "build": "node ../node_modules/typescript/bin/tsc -p tsconfig.build.json",
+        "lint": "node ../node_modules/eslint/bin/eslint.js . --quiet",
+        "test": "node ../node_modules/vitest/vitest.mjs run --config vitest.config.ts",
+        "verify-package": "node ./scripts/verify-packed-package.mjs",
+        "ci": "yarn clean && yarn lint && yarn build && yarn test && yarn verify-package"
+    },
+    "dependencies": {
+        "axe-core": "^4.13.0"
+    },
+    "peerDependencies": {
+        "@cratis/components": ">=3.0.0 <4",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
+    },
+    "devDependencies": {
+        "@cratis/components": "workspace:^"
+    }
+}
diff --git a/Conformance/scripts/verify-packed-package.mjs b/Conformance/scripts/verify-packed-package.mjs
new file mode 100644
index 00000000..bbe367c8
--- /dev/null
+++ b/Conformance/scripts/verify-packed-package.mjs
@@ -0,0 +1,111 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { spawnSync } from 'node:child_process';
+import {
+    mkdirSync,
+    mkdtempSync,
+    readFileSync,
+    rmSync,
+    symlinkSync,
+    writeFileSync,
+} from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const packageDirectory = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const repositoryDirectory = path.resolve(packageDirectory, '..');
+const temporary = mkdtempSync(path.join(packageDirectory, '.verify-package-'));
+
+const run = (command, arguments_, cwd = packageDirectory) => {
+    const result = spawnSync(command, arguments_, { cwd, encoding: 'utf8' });
+    if (result.status !== 0) {
+        throw new Error(`${command} ${arguments_.join(' ')} failed:\n${result.stdout}${result.stderr}`);
+    }
+    return result.stdout;
+};
+
+try {
+    const packedJson = JSON.parse(run('npm', ['pack', '--json', '--pack-destination', temporary]));
+    const packed = packedJson[0];
+    const fileNames = new Set(packed.files.map((file) => file.path));
+    for (const required of [
+        'dist/index.js',
+        'dist/index.d.ts',
+        'README.md',
+        'CONFORMANCE.md',
+        'LICENSE',
+        'package.json',
+    ]) {
+        if (!fileNames.has(required)) throw new Error(`Packed archive is missing '${required}'.`);
+    }
+    if ([...fileNames].some((file) => /(?:for_|vitest|\.tsbuildinfo)/u.test(file))) {
+        throw new Error('Packed archive contains test or build-cache files.');
+    }
+
+    const archive = path.join(temporary, packed.filename);
+    const unpacked = path.join(temporary, 'unpacked');
+    mkdirSync(unpacked);
+    run('tar', ['-xzf', archive, '-C', unpacked]);
+    const packageJson = JSON.parse(readFileSync(path.join(unpacked, 'package/package.json'), 'utf8'));
+    if (packageJson.version !== '0.1.0' || packageJson.cratisUiAbi !== 1) {
+        throw new Error('Package version and renderer ABI major are not independently pinned.');
+    }
+    if (packageJson.dependencies?.['@cratis/components']) {
+        throw new Error('Conformance must not install Components as a runtime dependency.');
+    }
+
+    const declarations = readFileSync(path.join(unpacked, 'package/dist/index.d.ts'), 'utf8');
+    for (const forbidden of [/\bany\b/u, /@mui\//u, /primereact/u, /primeuix/u, /react-aria/u]) {
+        if (forbidden.test(declarations)) throw new Error(`Public declarations contain forbidden '${forbidden}'.`);
+    }
+
+    const nodeModules = path.join(temporary, 'node_modules/@cratis');
+    mkdirSync(nodeModules, { recursive: true });
+    symlinkSync(
+        path.join(unpacked, 'package'),
+        path.join(nodeModules, 'components.conformance'),
+        'dir',
+    );
+    writeFileSync(
+        path.join(temporary, 'fixture.ts'),
+        "import { runConformance, type ConformanceReport } from '@cratis/components.conformance';\nvoid runConformance;\nconst report = undefined as unknown as ConformanceReport;\nvoid report;\n",
+    );
+    writeFileSync(
+        path.join(temporary, 'jsx-shim.d.ts'),
+        "import type { ReactElement } from 'react';\ndeclare global { namespace JSX { type Element = ReactElement; } }\nexport {};\n",
+    );
+
+    const typescript = path.join(repositoryDirectory, 'node_modules/typescript/bin/tsc');
+    for (const resolution of ['bundler', 'nodenext']) {
+        const moduleKind = resolution === 'bundler' ? 'ESNext' : 'NodeNext';
+        run(process.execPath, [
+            typescript,
+            '--ignoreConfig',
+            '--noEmit',
+            '--strict',
+            '--skipLibCheck',
+            'false',
+            '--target',
+            'ES2022',
+            '--module',
+            moduleKind,
+            '--moduleResolution',
+            resolution,
+            '--jsx',
+            'react-jsx',
+            '--lib',
+            'ESNext,DOM,DOM.Iterable',
+            'fixture.ts',
+            'jsx-shim.d.ts',
+        ], temporary);
+    }
+
+    console.log(
+        `Verified ${packageJson.name}@${packageJson.version}: archive contents, ABI metadata, ` +
+        'pure declarations, and strict Bundler/NodeNext consumers.',
+    );
+} finally {
+    rmSync(temporary, { recursive: true, force: true });
+}
diff --git a/Conformance/src/AdapterPackageMetadata.ts b/Conformance/src/AdapterPackageMetadata.ts
new file mode 100644
index 00000000..db639cac
--- /dev/null
+++ b/Conformance/src/AdapterPackageMetadata.ts
@@ -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.
+
+/** Static `package.json#cratis` metadata validated against the public adapter schema. */
+export interface AdapterPackageMetadata {
+    readonly kind: 'ui-adapter';
+    readonly id: string;
+    readonly displayName: string;
+    readonly abi: string;
+    readonly level: 'full' | 'primitive' | 'behavior' | 'portal' | 'theme';
+    readonly profile: string;
+    readonly category: string;
+    readonly entry: string;
+    readonly export: string;
+    readonly slots: readonly string[];
+    readonly modes: Readonly<Record<string, 'presentation' | 'atomic'>>;
+    readonly capabilities: readonly string[];
+    readonly ssr: 'safe' | 'client-only' | 'hydration-risk';
+    readonly a11y: {
+        readonly axeProfile: 'wcag21a' | 'wcag21aa' | 'wcag22a' | 'wcag22aa';
+        readonly evidence: string;
+    };
+    readonly license: {
+        readonly spdx: string;
+        readonly requiresKey: boolean;
+        readonly keyEnv?: string;
+        readonly url?: string;
+    };
+    readonly upstream: Readonly<Record<string, string>>;
+}
diff --git a/Conformance/src/ConformanceCheck.ts b/Conformance/src/ConformanceCheck.ts
new file mode 100644
index 00000000..250d74ef
--- /dev/null
+++ b/Conformance/src/ConformanceCheck.ts
@@ -0,0 +1,16 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { ConformanceFamily } from './ConformanceFamily.js';
+import type { ConformanceStatus } from './ConformanceStatus.js';
+
+/** Result of one bounded, reproducible conformance assertion. */
+export interface ConformanceCheck {
+    readonly id: string;
+    readonly family: ConformanceFamily;
+    readonly status: ConformanceStatus;
+    readonly slotId?: string;
+    readonly message: string;
+    readonly evidence?: Readonly<Record<string, unknown>>;
+    readonly skipBasis?: 'unsupported-fidelity' | 'emulated-fidelity' | 'missing-capability';
+}
diff --git a/Conformance/src/ConformanceFamily.ts b/Conformance/src/ConformanceFamily.ts
new file mode 100644
index 00000000..2da85cfa
--- /dev/null
+++ b/Conformance/src/ConformanceFamily.ts
@@ -0,0 +1,14 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+/** Evidence families emitted by the renderer conformance runner. */
+export enum ConformanceFamily {
+    Manifest = 'manifest',
+    Contract = 'contract',
+    Behavior = 'behavior',
+    BehaviorOwnership = 'behaviorOwnership',
+    ReactNormalization = 'reactNormalization',
+    ServerRendering = 'ssr',
+    Accessibility = 'a11y',
+    TypePurity = 'typePurity',
+}
diff --git a/Conformance/src/ConformanceLibrary.ts b/Conformance/src/ConformanceLibrary.ts
new file mode 100644
index 00000000..fbbadaee
--- /dev/null
+++ b/Conformance/src/ConformanceLibrary.ts
@@ -0,0 +1,21 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+/**
+ * Public structural view accepted by the conformance runner.
+ *
+ * `unstable_UiLibrary` satisfies this shape without leaking Components component or renderer-vendor
+ * declarations through the conformance package's independently versioned public types.
+ */
+export interface ConformanceLibrary {
+    readonly id: string;
+    readonly displayName: string;
+    readonly abi: number;
+    readonly level: 'full' | 'primitive' | 'behavior' | 'portal' | 'theme';
+    readonly profile: string;
+    readonly profileSlots?: readonly string[];
+    readonly capabilities: readonly string[];
+    readonly slots: object;
+    readonly Provider?: unknown;
+    readonly preflight?: unknown;
+}
diff --git a/Conformance/src/ConformanceLimitation.ts b/Conformance/src/ConformanceLimitation.ts
new file mode 100644
index 00000000..4140db41
--- /dev/null
+++ b/Conformance/src/ConformanceLimitation.ts
@@ -0,0 +1,8 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+/** Explicit boundary on what a programmatic conformance report establishes. */
+export interface ConformanceLimitation {
+    readonly id: string;
+    readonly message: string;
+}
diff --git a/Conformance/src/ConformanceOptions.ts b/Conformance/src/ConformanceOptions.ts
new file mode 100644
index 00000000..262bd77e
--- /dev/null
+++ b/Conformance/src/ConformanceOptions.ts
@@ -0,0 +1,17 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { AdapterPackageMetadata } from './AdapterPackageMetadata.js';
+import type { ConformanceSkipRequest } from './ConformanceSkipRequest.js';
+
+/** Options for a bounded conformance run. */
+export interface ConformanceOptions {
+    /** Static `package.json#cratis` metadata for runtime/static consistency checks. */
+    readonly metadata?: AdapterPackageMetadata | Readonly<Record<string, unknown>>;
+    /** DOM document used for runtime checks. Defaults to `globalThis.document`. */
+    readonly document?: Document;
+    /** Enables axe-core evidence. Defaults to `true`. */
+    readonly axe?: boolean;
+    /** Explicit omissions, accepted only when fidelity/capability declarations justify them. */
+    readonly skips?: readonly ConformanceSkipRequest[];
+}
diff --git a/Conformance/src/ConformanceReport.ts b/Conformance/src/ConformanceReport.ts
new file mode 100644
index 00000000..4330483d
--- /dev/null
+++ b/Conformance/src/ConformanceReport.ts
@@ -0,0 +1,16 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { ConformanceCheck } from './ConformanceCheck.js';
+import type { ConformanceLimitation } from './ConformanceLimitation.js';
+import type { ConformanceSummary } from './ConformanceSummary.js';
+
+/** Bounded evidence returned for one renderer library. */
+export interface ConformanceReport {
+    readonly adapterId: string;
+    readonly abi: number;
+    readonly passed: boolean;
+    readonly summary: ConformanceSummary;
+    readonly checks: readonly ConformanceCheck[];
+    readonly limitations: readonly ConformanceLimitation[];
+}
diff --git a/Conformance/src/ConformanceSkipRequest.ts b/Conformance/src/ConformanceSkipRequest.ts
new file mode 100644
index 00000000..9d1a540c
--- /dev/null
+++ b/Conformance/src/ConformanceSkipRequest.ts
@@ -0,0 +1,9 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+/** Explicit request to omit one check when the manifest truthfully declares the reason. */
+export interface ConformanceSkipRequest {
+    readonly checkId: string;
+    readonly slotId?: string;
+    readonly missingCapability?: string;
+}
diff --git a/Conformance/src/ConformanceStatus.ts b/Conformance/src/ConformanceStatus.ts
new file mode 100644
index 00000000..308d4cc6
--- /dev/null
+++ b/Conformance/src/ConformanceStatus.ts
@@ -0,0 +1,9 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+/** Result status for one bounded conformance check. */
+export enum ConformanceStatus {
+    Passed = 'passed',
+    Failed = 'failed',
+    Skipped = 'skipped',
+}
diff --git a/Conformance/src/ConformanceSummary.ts b/Conformance/src/ConformanceSummary.ts
new file mode 100644
index 00000000..c98993f1
--- /dev/null
+++ b/Conformance/src/ConformanceSummary.ts
@@ -0,0 +1,10 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+/** Aggregate counts for one conformance run. */
+export interface ConformanceSummary {
+    readonly total: number;
+    readonly passed: number;
+    readonly failed: number;
+    readonly skipped: number;
+}
diff --git a/Conformance/src/index.ts b/Conformance/src/index.ts
new file mode 100644
index 00000000..324c48e4
--- /dev/null
+++ b/Conformance/src/index.ts
@@ -0,0 +1,14 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+export type { AdapterPackageMetadata } from './AdapterPackageMetadata.js';
+export type { ConformanceCheck } from './ConformanceCheck.js';
+export { ConformanceFamily } from './ConformanceFamily.js';
+export type { ConformanceLibrary } from './ConformanceLibrary.js';
+export type { ConformanceLimitation } from './ConformanceLimitation.js';
+export type { ConformanceOptions } from './ConformanceOptions.js';
+export type { ConformanceReport } from './ConformanceReport.js';
+export type { ConformanceSkipRequest } from './ConformanceSkipRequest.js';
+export { ConformanceStatus } from './ConformanceStatus.js';
+export type { ConformanceSummary } from './ConformanceSummary.js';
+export { runConformance } from './runConformance.js';
diff --git a/Conformance/src/internal/SlotProfile.ts b/Conformance/src/internal/SlotProfile.ts
new file mode 100644
index 00000000..01be4bdd
--- /dev/null
+++ b/Conformance/src/internal/SlotProfile.ts
@@ -0,0 +1,27 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { RefObject } from 'react';
+import type { unstable_SlotId } from '@cratis/components/renderer';
+import type { CratisPartsManifest } from '@cratis/components/types';
+
+/** Internal fixture for one public renderer slot. */
+export interface SlotProfile {
+    readonly slotId: unstable_SlotId;
+    readonly partsKey: keyof CratisPartsManifest;
+    readonly createProps: () => Readonly<Record<string, unknown>>;
+    readonly createStateProps?: () => Readonly<Record<string, unknown>>;
+    readonly createPartVariants?: () => readonly Readonly<Record<string, unknown>>[];
+    readonly conditionallyAbsentParts?: readonly string[];
+    readonly ptKeys: readonly string[];
+    readonly nativeSelector: string;
+    readonly nativeTag: string;
+    readonly refCapable: boolean;
+    readonly ownershipSelectors: readonly string[];
+    readonly activate?: (document: Document, container: HTMLElement) => Promise<void>;
+    readonly exercise?: (
+        document: Document,
+        container: HTMLElement,
+        ref: RefObject<Element | null>,
+    ) => Promise<Readonly<Record<string, unknown>>>;
+}
diff --git a/Conformance/src/internal/metadata.ts b/Conformance/src/internal/metadata.ts
new file mode 100644
index 00000000..bb8cf382
--- /dev/null
+++ b/Conformance/src/internal/metadata.ts
@@ -0,0 +1,107 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { unstable_SlotId, unstable_UiLibrary } from '@cratis/components/renderer';
+import type { AdapterPackageMetadata } from '../AdapterPackageMetadata.js';
+
+const capabilityValues = new Set([
+    'slot.render',
+    'parts.passthrough',
+    'focus.trap',
+    'focus.restore',
+    'overlay.portal',
+    'collection.virtualize',
+    'selection.multi',
+    'datetime.i18n',
+    'form.validationMessage',
+    'theme.tokens',
+    'ssr.staticRender',
+    'rtl',
+    'forcedColors',
+    'motion.reduced',
+    'machine.binding',
+    'paging.server',
+]);
+
+const isRecord = (value: unknown): value is Readonly<Record<string, unknown>> =>
+    typeof value === 'object' && value !== null && !Array.isArray(value);
+
+const uniqueStrings = (value: unknown): value is readonly string[] =>
+    Array.isArray(value) &&
+    value.every((entry) => typeof entry === 'string') &&
+    new Set(value).size === value.length;
+
+/** Validates the package metadata subset exercised by the public schema fixture. */
+export const validateMetadata = (value: unknown): readonly string[] => {
+    if (!isRecord(value)) return ['metadata must be an object'];
+    const problems: string[] = [];
+    const required = [
+        'kind', 'id', 'displayName', 'abi', 'level', 'profile', 'category', 'entry',
+        'export', 'slots', 'modes', 'capabilities', 'ssr', 'a11y', 'license', 'upstream',
+    ];
+    for (const key of required) if (!(key in value)) problems.push(`missing '${key}'`);
+    const allowed = new Set(required);
+    for (const key of Object.keys(value)) if (!allowed.has(key)) problems.push(`unknown '${key}'`);
+    if (value.kind !== 'ui-adapter') problems.push("kind must be 'ui-adapter'");
+    if (typeof value.id !== 'string' || !/^[a-z][a-z0-9]*(?:[._-][a-z0-9]+)*$/u.test(value.id)) problems.push('id is invalid');
+    if (typeof value.abi !== 'string' || !/^\^[1-9][0-9]{0,2}$/u.test(value.abi)) problems.push('abi is invalid');
+    if (typeof value.profile !== 'string' || !/^[a-z][a-z0-9.-]*\/v[1-9][0-9]{0,2}$/u.test(value.profile)) problems.push('profile is invalid');
+    if (typeof value.entry !== 'string' || !/^\.\/(?!.*(?:^|\/)\.\.(?:\/|$))\S+$/u.test(value.entry)) problems.push('entry is invalid');
+    if (!uniqueStrings(value.slots)) problems.push('slots must contain unique strings');
+    if (!uniqueStrings(value.capabilities) || !(value.capabilities ?? []).every((entry: string) => capabilityValues.has(entry))) problems.push('capabilities are invalid');
+    if (!isRecord(value.modes) || Object.values(value.modes).some((mode) => mode !== 'presentation' && mode !== 'atomic')) problems.push('modes are invalid');
+    if (!isRecord(value.upstream) || Object.keys(value.upstream).length === 0 || Object.values(value.upstream).some((range) => typeof range !== 'string' || !(/^[~^][0-9]+\.[0-9]+\.[0-9]+(?:-[0-9A-Za-z.-]+)?$/u.test(range) || /^>=?[0-9]+(?:\.[0-9]+){0,2}(?:-[0-9A-Za-z.-]+)? <[0-9]+(?:\.[0-9]+){0,2}(?:-[0-9A-Za-z.-]+)?$/u.test(range) || /^[0-9]+\.[0-9]+\.[0-9]+(?:-[0-9A-Za-z.-]+)?$/u.test(range)))) problems.push('upstream ranges must be bounded');
+    if (!isRecord(value.license) || typeof value.license.spdx !== 'string' || typeof value.license.requiresKey !== 'boolean' || (value.license.requiresKey === true && typeof value.license.keyEnv !== 'string')) problems.push('license is invalid');
+    if (!isRecord(value.a11y) || typeof value.a11y.evidence !== 'string') problems.push('a11y evidence is invalid');
+    return problems;
+};
+
+/** Compares static package metadata to the immutable runtime manifest. */
+export const compareMetadata = (
+    metadata: AdapterPackageMetadata | Readonly<Record<string, unknown>>,
+    library: unstable_UiLibrary,
+): readonly string[] => {
+    const problems: string[] = [];
+    if (metadata.id !== library.id) problems.push('id differs from runtime manifest');
+    if (metadata.displayName !== library.displayName) problems.push('displayName differs from runtime manifest');
+    if (metadata.abi !== `^${library.abi}`) problems.push('abi differs from runtime manifest');
+    if (metadata.level !== library.level) problems.push('level differs from runtime manifest');
+    if (metadata.profile !== library.profile) problems.push('profile differs from runtime manifest');
+    const staticSlots = Array.isArray(metadata.slots) ? [...metadata.slots].sort() : [];
+    const runtimeSlots = [...(library.profileSlots ?? Object.keys(library.slots))].sort();
+    if (JSON.stringify(staticSlots) !== JSON.stringify(runtimeSlots)) problems.push('slots differ from runtime profileSlots');
+    const staticCapabilities = Array.isArray(metadata.capabilities) ? [...metadata.capabilities].sort() : [];
+    if (JSON.stringify(staticCapabilities) !== JSON.stringify([...library.capabilities].sort())) problems.push('capabilities differ from runtime manifest');
+    if (isRecord(metadata.modes)) {
+        for (const slotId of runtimeSlots) {
+            if (metadata.modes[slotId] !== library.slots[slotId as unstable_SlotId]?.mode) problems.push(`mode differs for '${slotId}'`);
+        }
+    }
+    return problems;
+};
+
+/** Rejects capability claims that this bounded harness cannot support with the declared slots. */
+export const overDeclaredCapabilities = (library: unstable_UiLibrary): readonly string[] => {
+    const slots = new Set(library.profileSlots ?? Object.keys(library.slots));
+    const requires: Readonly<Record<string, readonly string[]>> = {
+        'focus.trap': ['dialogs.dialog'],
+        'focus.restore': ['dialogs.dialog'],
+        'overlay.portal': ['common.tooltip', 'dropdown.select', 'dialogs.dialog', 'display.datePicker'],
+        'selection.multi': ['dropdown.select'],
+        'datetime.i18n': ['display.datePicker'],
+        'form.validationMessage': ['common.textInput', 'common.textArea'],
+    };
+    const problems: string[] = [];
+    for (const capability of library.capabilities) {
+        const required = requires[capability];
+        if (required && !required.some((slot) => slots.has(slot))) problems.push(`${capability} has no supporting slot`);
+        if (capability === 'collection.virtualize' || capability === 'machine.binding' || capability === 'paging.server') problems.push(`${capability} has no evidence family in this 14-slot harness`);
+    }
+    if (library.capabilities.includes('slot.render')) {
+        for (const slot of slots) {
+            const declaration = library.slots[slot as unstable_SlotId];
+            if (!declaration?.render || declaration.fidelity === 'unsupported') problems.push(`slot.render over-declared for '${slot}'`);
+        }
+    }
+    return problems;
+};
diff --git a/Conformance/src/internal/reactNormalization.ts b/Conformance/src/internal/reactNormalization.ts
new file mode 100644
index 00000000..510604f0
--- /dev/null
+++ b/Conformance/src/internal/reactNormalization.ts
@@ -0,0 +1,59 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { CSSProperties, Ref } from 'react';
+
+/** Internal vendor-to-React prop normalization used by executable fixtures. */
+export const normalizeReactProps = (
+    props: Readonly<Record<string, unknown>>,
+): Readonly<Record<string, unknown>> => {
+    const normalized: Record<string, unknown> = {};
+    for (const [key, value] of Object.entries(props)) {
+        const normalizedKey = key === 'class' ? 'className'
+            : key === 'for' ? 'htmlFor'
+                : key === 'stroke-width' ? 'strokeWidth'
+                    : key === 'fill-rule' ? 'fillRule'
+                        : key;
+        normalized[normalizedKey] = value;
+    }
+    return normalized;
+};
+
+/** Merges object and callback refs without hiding either assignment. */
+export const mergeRefs = <T>(...refs: readonly (Ref<T> | undefined)[]): Ref<T> =>
+    (value: T | null) => {
+        for (const ref of refs) {
+            if (typeof ref === 'function') ref(value);
+            else if (ref) ref.current = value;
+        }
+    };
+
+/** Runs pass-through behavior first and honors preventDefault before public behavior. */
+export const composeHandlers = <T extends Event>(
+    first: ((event: T) => void) | undefined,
+    second: ((event: T) => void) | undefined,
+) => (event: T) => {
+    first?.(event);
+    if (!event.defaultPrevented) second?.(event);
+};
+
+/** Registers a listener and returns idempotent StrictMode-safe cleanup. */
+export const listen = <K extends keyof DocumentEventMap>(
+    document: Document,
+    type: K,
+    listener: (event: DocumentEventMap[K]) => void,
+) => {
+    let active = true;
+    const eventListener = listener as EventListener;
+    document.addEventListener(type, eventListener);
+    return () => {
+        if (!active) return;
+        active = false;
+        document.removeEventListener(type, eventListener);
+    };
+};
+
+/** Constructs style evidence without dropping CSS custom properties. */
+export const normalizeStyle = (
+    style: CSSProperties & Readonly<Record<`--${string}`, string | number>>,
+): CSSProperties => ({ ...style });
diff --git a/Conformance/src/internal/slotProfiles.tsx b/Conformance/src/internal/slotProfiles.tsx
new file mode 100644
index 00000000..a0b75bd3
--- /dev/null
+++ b/Conformance/src/internal/slotProfiles.tsx
@@ -0,0 +1,211 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { createElement } from 'react';
+import type { ButtonProps } from '@cratis/components/Common';
+import type { CheckboxProps } from '@cratis/components/Common';
+import type { DatePickerInputProps } from '@cratis/components/Common';
+import type { IconButtonProps } from '@cratis/components/Common';
+import type { RadioProps } from '@cratis/components/Common';
+import type { SurfaceProps } from '@cratis/components/Common';
+import type { SwitchProps } from '@cratis/components/Common';
+import type { TextAreaProps } from '@cratis/components/Common';
+import type { TextInputProps } from '@cratis/components/Common';
+import type { TooltipProps } from '@cratis/components/Common';
+import type { TablePaginatorProps } from '@cratis/components/DataTables';
+import type { ProgressBarProps } from '@cratis/components/Display';
+import type { DialogProps } from '@cratis/components/Dialogs';
+import type { DropdownProps } from '@cratis/components/Dropdown';
+import type { SlotProfile } from './SlotProfile.js';
+
+const recordProps = <T extends object>(props: T) =>
+    props as unknown as Readonly<Record<string, unknown>>;
+
+const pause = (milliseconds: number) =>
+    new Promise<void>((resolve) => globalThis.setTimeout(resolve, milliseconds));
+
+const click = (container: ParentNode, selector: string) => {
+    const element = container.querySelector<HTMLElement>(selector);
+    element?.click();
+};
+
+/** Creates fresh public-prop fixtures for all fourteen ABI v1 slots. */
+export const createSlotProfiles = (
+    evidence: Map<string, Readonly<Record<string, unknown>>>,
+): readonly SlotProfile[] => [
+    {
+        slotId: 'common.button', partsKey: 'Button', ptKeys: ['root', 'spinner', 'icon', 'label'],
+        nativeSelector: 'button', nativeTag: 'BUTTON', refCapable: true,
+        ownershipSelectors: ['button'],
+        createProps: () => {
+            let callbacks = 0;
+            const props = { label: 'Save', icon: createElement('span', null, '+'), type: 'submit', onClick: () => { callbacks += 1; evidence.set('common.button', { callbacks }); } } satisfies ButtonProps;
+            return recordProps(props);
+        },
+        createStateProps: () => recordProps({ label: 'Saving', loading: true, disabled: true } satisfies ButtonProps),
+        createPartVariants: () => [recordProps({ label: 'Saving', loading: true } satisfies ButtonProps)],
+        exercise: async (_document, container) => { click(container, 'button'); return evidence.get('common.button') ?? { callbacks: 0 }; },
+    },
+    {
+        slotId: 'common.iconButton', partsKey: 'IconButton', ptKeys: ['root', 'spinner', 'icon', 'label'],
+        nativeSelector: 'button', nativeTag: 'BUTTON', refCapable: true,
+        ownershipSelectors: ['button'],
+        createProps: () => {
+            let callbacks = 0;
+            const props = { icon: createElement('span', null, '+'), 'aria-label': 'Add item', onClick: () => { callbacks += 1; evidence.set('common.iconButton', { callbacks }); } } satisfies IconButtonProps;
+            return recordProps(props);
+        },
+        createStateProps: () => recordProps({ icon: createElement('span', null, '+'), 'aria-label': 'Loading', loading: true } satisfies IconButtonProps),
+        createPartVariants: () => [recordProps({ icon: createElement('span', null, '+'), 'aria-label': 'Loading', loading: true } satisfies IconButtonProps)],
+        conditionallyAbsentParts: ['label'],
+        exercise: async (_document, container) => { click(container, 'button'); return evidence.get('common.iconButton') ?? { callbacks: 0 }; },
+    },
+    {
+        slotId: 'common.textInput', partsKey: 'TextInput', ptKeys: ['root'],
+        nativeSelector: 'input[type="text"]', nativeTag: 'INPUT', refCapable: true,
+        ownershipSelectors: ['input[type="text"]'],
+        createProps: () => {
+            let callbacks = 0;
+            const props = { name: 'sample', defaultValue: 'before', 'aria-label': 'Sample text', onChange: (value, meta) => { callbacks += 1; evidence.set('common.textInput', { callbacks, value, source: meta?.source, nativeEvent: meta?.nativeEvent instanceof Event }); } } satisfies TextInputProps;
+            return recordProps(props);
+        },
+        createStateProps: () => recordProps({ defaultValue: 'state', disabled: true, invalid: true, readOnly: true } satisfies TextInputProps),
+        exercise: async (_document, container) => {
+            const input = container.querySelector<HTMLInputElement>('input[type="text"]');
+            if (input) {
+                Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set?.call(input, 'after');
+                input.dispatchEvent(new Event('input', { bubbles: true }));
+            }
+            return evidence.get('common.textInput') ?? { callbacks: 0, value: input?.value };
+        },
+    },
+    {
+        slotId: 'common.textArea', partsKey: 'TextArea', ptKeys: ['root'],
+        nativeSelector: 'textarea', nativeTag: 'TEXTAREA', refCapable: true,
+        ownershipSelectors: ['textarea'],
+        createProps: () => {
+            let callbacks = 0;
+            const props = { name: 'notes', defaultValue: 'before', 'aria-label': 'Sample notes', onChange: (value, meta) => { callbacks += 1; evidence.set('common.textArea', { callbacks, value, source: meta?.source, nativeEvent: meta?.nativeEvent instanceof Event }); } } satisfies TextAreaProps;
+            return recordProps(props);
+        },
+        createStateProps: () => recordProps({ defaultValue: 'state', disabled: true, invalid: true, readOnly: true } satisfies TextAreaProps),
+        exercise: async (_document, container) => {
+            const input = container.querySelector<HTMLTextAreaElement>('textarea');
+            if (input) {
+                Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, 'value')?.set?.call(input, 'after');
+                input.dispatchEvent(new Event('input', { bubbles: true }));
+            }
+            return evidence.get('common.textArea') ?? { callbacks: 0, value: input?.value };
+        },
+    },
+    ...(['common.checkbox', 'common.switch'] as const).map((slotId): SlotProfile => {
+        const isSwitch = slotId === 'common.switch';
+        return {
+            slotId,
+            partsKey: isSwitch ? 'Switch' : 'Checkbox',
+            ptKeys: isSwitch ? ['root', 'input', 'control', 'handle', 'label'] : ['root', 'input', 'box', 'indicator', 'label'],
+            nativeSelector: isSwitch ? 'input[role="switch"]' : 'input[type="checkbox"]',
+            nativeTag: 'INPUT', refCapable: true,
+            ownershipSelectors: [isSwitch ? 'input[role="switch"]' : 'input[type="checkbox"]'],
+            createProps: () => {
+                let callbacks = 0;
+                const onChange = (value: boolean, meta?: { source: string; nativeEvent?: Event }) => { callbacks += 1; evidence.set(slotId, { callbacks, value, source: meta?.source, nativeEvent: meta?.nativeEvent instanceof Event }); };
+                return isSwitch
+                    ? recordProps({ label: 'Enabled', name: 'enabled', defaultChecked: false, onChange } satisfies SwitchProps)
+                    : recordProps({ label: 'Selected', name: 'selected', defaultChecked: false, onChange } satisfies CheckboxProps);
+            },
+            createStateProps: () => isSwitch
+                ? recordProps({ label: 'State', defaultChecked: true, disabled: true, invalid: true, readOnly: true } satisfies SwitchProps)
+                : recordProps({ label: 'State', defaultChecked: true, disabled: true, invalid: true, readOnly: true } satisfies CheckboxProps),
+            exercise: async (_document, container) => { click(container, isSwitch ? 'input[role="switch"]' : 'input[type="checkbox"]'); return evidence.get(slotId) ?? { callbacks: 0 }; },
+        };
+    }),
+    {
+        slotId: 'common.radio', partsKey: 'Radio', ptKeys: ['root', 'input', 'box', 'indicator', 'label'],
+        nativeSelector: 'input[type="radio"]', nativeTag: 'INPUT', refCapable: true,
+        ownershipSelectors: ['input[type="radio"]'],
+        createProps: () => {
+            let callbacks = 0;
+            const props = { label: 'Daily', name: 'frequency', value: 'daily', defaultChecked: false, onChange: (value, meta) => { callbacks += 1; evidence.set('common.radio', { callbacks, value, source: meta?.source, nativeEvent: meta?.nativeEvent instanceof Event }); } } satisfies RadioProps;
+            return recordProps(props);
+        },
+        createStateProps: () => recordProps({ label: 'Daily', name: 'frequency', value: 'daily', defaultChecked: true, disabled: true, invalid: true, readOnly: true } satisfies RadioProps),
+        exercise: async (_document, container) => { click(container, 'input[type="radio"]'); return evidence.get('common.radio') ?? { callbacks: 0 }; },
+    },
+    {
+        slotId: 'common.progress', partsKey: 'ProgressBar', ptKeys: [],
+        nativeSelector: '[role="progressbar"]', nativeTag: 'DIV', refCapable: false,
+        ownershipSelectors: ['[role="progressbar"]'],
+        createProps: () => recordProps({ value: 42, 'aria-label': 'Progress' } satisfies ProgressBarProps),
+        createStateProps: () => recordProps({ value: 42, mode: 'indeterminate' } satisfies ProgressBarProps),
+        exercise: async (_document, container) => ({ valueNow: container.querySelector('[role="progressbar"]')?.getAttribute('aria-valuenow') }),
+    },
+    {
+        slotId: 'common.surface', partsKey: 'Surface', ptKeys: ['root'],
+        nativeSelector: 'article', nativeTag: 'ARTICLE', refCapable: true,
+        ownershipSelectors: ['article'],
+        createProps: () => recordProps({ as: 'article', children: 'Content' } satisfies SurfaceProps),
+        exercise: async (_document, container) => ({ text: container.querySelector('article')?.textContent }),
+    },
+    {
+        slotId: 'common.tooltip', partsKey: 'Tooltip', ptKeys: [],
+        nativeSelector: '[data-cratis-part="trigger"]', nativeTag: 'BUTTON', refCapable: false,
+        ownershipSelectors: ['[data-cratis-part="trigger"]'],
+        createProps: () => recordProps({ content: 'Save changes', children: createElement('button', { type: 'button', className: 'sample-trigger' }, 'Save') } satisfies TooltipProps),
+        activate: async (_document, container) => { const trigger = container.querySelector<HTMLElement>('[data-cratis-part="trigger"]'); trigger?.focus(); trigger?.dispatchEvent(new FocusEvent('focusin', { bubbles: true })); await pause(1700); },
+        exercise: async (document) => ({ popupCount: document.querySelectorAll('[data-cratis-part="popup"]').length }),
+    },
+    {
+        slotId: 'dropdown.select', partsKey: 'Dropdown', ptKeys: ['root', 'value', 'filter', 'trigger', 'clear', 'popover', 'listbox', 'option', 'multiple', 'indicator'],
+        nativeSelector: '[data-cratis-part="trigger"]', nativeTag: 'BUTTON', refCapable: false,
+        ownershipSelectors: ['[data-cratis-part="trigger"]'],
+        createProps: () => {
+            let callbacks = 0;
+            const props = { name: 'role', value: 'developer', filter: true, options: [{ label: 'Administrator', value: 'admin' }, { label: 'Developer', value: 'developer' }], optionLabel: 'label', optionValue: 'value', showClear: true, 'aria-label': 'Role', onChange: (value, meta) => { callbacks += 1; evidence.set('dropdown.select', { callbacks, value, source: meta?.source, nativeEvent: meta?.nativeEvent instanceof Event }); } } satisfies DropdownProps<string>;
+            return recordProps(props);
+        },
+        createStateProps: () => recordProps({ value: ['admin'], options: [{ label: 'Administrator', value: 'admin' }], optionLabel: 'label', optionValue: 'value', multiple: true, disabled: true, invalid: true, 'aria-label': 'Role' } satisfies DropdownProps<string[]>),
+        createPartVariants: () => [
+            recordProps({ value: ['admin'], options: [{ label: 'Administrator', value: 'admin' }], optionLabel: 'label', optionValue: 'value', multiple: true, 'aria-label': 'Role' } satisfies DropdownProps<string[]>),
+            recordProps({ value: 'admin', options: [{ label: 'Administrator', value: 'admin' }], optionLabel: 'label', optionValue: 'value', 'aria-label': 'Role' } satisfies DropdownProps<string>),
+        ],
+        activate: async (_document, container) => { click(container, '[data-cratis-part="trigger"]'); await pause(50); },
+        exercise: async (document) => { const option = document.querySelector<HTMLElement>('[data-cratis-part="option"]'); option?.click(); await pause(0); return evidence.get('dropdown.select') ?? { callbacks: 0, optionCount: document.querySelectorAll('[data-cratis-part="option"]').length }; },
+    },
+    {
+        slotId: 'dialogs.dialog', partsKey: 'Dialog', ptKeys: ['backdrop', 'positioner', 'root', 'header', 'title', 'close', 'content', 'footer', 'confirm', 'cancel'],
+        nativeSelector: '[role="dialog"]', nativeTag: 'SECTION', refCapable: false,
+        ownershipSelectors: ['[role="dialog"]'],
+        createProps: () => {
+            let callbacks = 0;
+            const props = { title: 'Example dialog', children: 'Dialog content', buttons: 2, dismissable: true, onClose: () => { callbacks += 1; evidence.set('dialogs.dialog', { callbacks }); } } satisfies DialogProps;
+            return recordProps(props);
+        },
+        createStateProps: () => recordProps({ title: 'Busy dialog', children: 'Dialog content', buttons: 2, isBusy: true } satisfies DialogProps),
+        exercise: async (document) => { click(document, '[data-cratis-part="close"]'); await pause(0); return evidence.get('dialogs.dialog') ?? { callbacks: 0 }; },
+    },
+    {
+        slotId: 'display.datePicker', partsKey: 'DatePickerInput', ptKeys: ['root', 'group', 'input', 'segment', 'placeholder', 'trigger', 'popover', 'dialog', 'calendar', 'header', 'previous', 'heading', 'next', 'grid', 'cell', 'buttonBar', 'today', 'clear'],
+        nativeSelector: '[data-cratis-part="group"]', nativeTag: 'DIV', refCapable: false,
+        ownershipSelectors: ['[data-cratis-part="group"]'],
+        createProps: () => {
+            let callbacks = 0;
+            const props = { value: null, showButtonBar: true, placeholder: 'Choose a date', 'aria-label': 'Delivery date', onChange: (value, meta) => { callbacks += 1; evidence.set('display.datePicker', { callbacks, value: value?.toISOString(), source: meta?.source, nativeEvent: meta?.nativeEvent instanceof Event }); } } satisfies DatePickerInputProps;
+            return recordProps(props);
+        },
+        createStateProps: () => recordProps({ value: new Date(2024, 5, 15), disabled: true, invalid: true, readOnly: true, 'aria-label': 'Delivery date', onChange: () => undefined } satisfies DatePickerInputProps),
+        activate: async (_document, container) => { click(container, '[data-cratis-part="trigger"]'); await pause(50); },
+        exercise: async (document) => ({ cellCount: document.querySelectorAll('[data-cratis-part="cell"]').length }),
+    },
+    {
+        slotId: 'datatables.paginator', partsKey: 'TablePaginator', ptKeys: ['root', 'range', 'info', 'first', 'previous', 'next', 'last'],
+        nativeSelector: '[role="navigation"]', nativeTag: 'DIV', refCapable: false,
+        ownershipSelectors: ['[role="navigation"]'],
+        createProps: () => {
+            let callbacks = 0;
+            const props = { page: 1, pageCount: 3, totalItems: 30, pageSize: 10, onPageChange: (page) => { callbacks += 1; evidence.set('datatables.paginator', { callbacks, page }); } } satisfies TablePaginatorProps;
+            return recordProps(props);
+        },
+        exercise: async (_document, container) => { click(container, '[aria-label="Next page"]'); return evidence.get('datatables.paginator') ?? { callbacks: 0 }; },
+    },
+];
diff --git a/Conformance/src/runConformance.tsx b/Conformance/src/runConformance.tsx
new file mode 100644
index 00000000..078ce765
--- /dev/null
+++ b/Conformance/src/runConformance.tsx
@@ -0,0 +1,650 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import {
+    act,
+    createElement,
+    createRef,
+    type ComponentType,
+    type ReactElement,
+} from 'react';
+import { createRoot, hydrateRoot, type Root } from 'react-dom/client';
+import { renderToString } from 'react-dom/server';
+import axe from 'axe-core';
+import { CratisComponentsProvider } from '@cratis/components';
+import type {
+    unstable_SlotDeclaration,
+    unstable_SlotId,
+    unstable_UiLibrary,
+} from '@cratis/components/renderer';
+import {
+    cratisCanonicalPartStates,
+    cratisParts,
+    cratisPartStates,
+} from '@cratis/components/types';
+import type { ConformanceCheck } from './ConformanceCheck.js';
+import { ConformanceFamily } from './ConformanceFamily.js';
+import type { ConformanceLibrary } from './ConformanceLibrary.js';
+import type { ConformanceOptions } from './ConformanceOptions.js';
+import type { ConformanceReport } from './ConformanceReport.js';
+import { ConformanceStatus } from './ConformanceStatus.js';
+import {
+    compareMetadata,
+    overDeclaredCapabilities,
+    validateMetadata,
+} from './internal/metadata.js';
+import {
+    composeHandlers,
+    listen,
+    mergeRefs,
+    normalizeReactProps,
+    normalizeStyle,
+} from './internal/reactNormalization.js';
+import { createSlotProfiles } from './internal/slotProfiles.js';
+import type { SlotProfile } from './internal/SlotProfile.js';
+
+interface MountedFixture {
+    readonly container: HTMLDivElement;
+    readonly form: HTMLFormElement;
+    readonly root: Root;
+    readonly ref: React.RefObject<Element | null>;
+}
+
+const limitations = Object.freeze([
+    {
+        id: 'automated-a11y-only',
+        message: 'axe evidence is automated DOM analysis, not manual assistive-technology or universal accessibility conformance.',
+    },
+    {
+        id: 'jsdom-not-browser-matrix',
+        message: 'The API exercises DOM, forms, hydration-shaped markup, direction, and media-query inputs; it does not replace the repository Storybook browser/axe gate or a browser matrix.',
+    },
+    {
+        id: 'visual-modes-not-screenshots',
+        message: 'Reduced-motion and forced-colors results prove deterministic execution under those inputs, not visual contrast, animation, or high-contrast appearance.',
+    },
+]);
+
+const renderComponent = (
+    declaration: unstable_SlotDeclaration<unstable_SlotId>,
+    props: Readonly<Record<string, unknown>>,
+    ref?: React.RefObject<Element | null>,
+): ReactElement => {
+    const Component = declaration.render as unknown as ComponentType<Record<string, unknown>>;
+    return createElement(Component, ref ? { ...props, ref } : props);
+};
+
+const withProvider = (child: ReactElement) =>
+    createElement(CratisComponentsProvider, {
+        value: { locale: 'en-US' },
+        children: child,
+    });
+
+const mount = async (
+    document: Document,
+    declaration: unstable_SlotDeclaration<unstable_SlotId>,
+    props: Readonly<Record<string, unknown>>,
+    refCapable: boolean,
+): Promise<MountedFixture> => {
+    const container = document.createElement('div');
+    const form = document.createElement('form');
+    container.append(form);
+    document.body.append(container);
+    const root = createRoot(form);
+    const ref = createRef<Element>();
+    await act(async () => {
+        root.render(withProvider(renderComponent(declaration, props, refCapable ? ref : undefined)));
+    });
+    return { container, form, root, ref };
+};
+
+const unmount = async (fixture: MountedFixture) => {
+    await act(async () => fixture.root.unmount());
+    fixture.container.remove();
+};
+
+const markerForPart = (part: string) =>
+    part.replace(/[A-Z]/gu, (letter) => `-${letter.toLowerCase()}`);
+
+const passThrough = (profile: SlotProfile) =>
+    Object.fromEntries(
+        profile.ptKeys.map((part) => {
+            const marker = {
+                className: `conformance-${markerForPart(part)}`,
+                style: { [`--conformance-${markerForPart(part)}`]: '1' },
+                'data-conformance-part': markerForPart(part),
+            };
+            const paginatorButton =
+                profile.slotId === 'datatables.paginator' &&
+                ['first', 'previous', 'next', 'last'].includes(part);
+            return [part, paginatorButton ? { root: marker } : marker];
+        }),
+    );
+
+const addCheck = (
+    checks: ConformanceCheck[],
+    family: ConformanceFamily,
+    id: string,
+    passed: boolean,
+    message: string,
+    slotId?: unstable_SlotId,
+    evidence?: Readonly<Record<string, unknown>>,
+) => checks.push({
+    id,
+    family,
+    status: passed ? ConformanceStatus.Passed : ConformanceStatus.Failed,
+    slotId,
+    message,
+    evidence,
+});
+
+const addError = (
+    checks: ConformanceCheck[],
+    family: ConformanceFamily,
+    id: string,
+    error: unknown,
+    slotId?: unstable_SlotId,
+) => addCheck(
+    checks,
+    family,
+    id,
+    false,
+    error instanceof Error ? error.message : String(error),
+    slotId,
+);
+
+const skipRequested = (
+    checks: ConformanceCheck[],
+    options: ConformanceOptions,
+    library: unstable_UiLibrary,
+    declaration: unstable_SlotDeclaration<unstable_SlotId>,
+    checkId: string,
+    slotId: unstable_SlotId,
+) => {
+    const request = options.skips?.find((candidate) => candidate.checkId === checkId);
+    if (!request) return false;
+    let basis: ConformanceCheck['skipBasis'];
+    if (declaration.fidelity === 'unsupported') basis = 'unsupported-fidelity';
+    else if (declaration.fidelity === 'emulated') basis = 'emulated-fidelity';
+    else if (
+        request.missingCapability &&
+        !library.capabilities.some(
+            (capability) => capability === request.missingCapability,
+        )
+    ) basis = 'missing-capability';
+    if (!basis) {
+        addCheck(
+            checks,
+            ConformanceFamily.Manifest,
+            `skip.${checkId}.undeclared`,
+            false,
+            `Skip '${checkId}' has no unsupported/emulated fidelity or absent declared capability.`,
+            slotId,
+        );
+        return false;
+    }
+    checks.push({
+        id: checkId,
+        family: ConformanceFamily.Contract,
+        status: ConformanceStatus.Skipped,
+        slotId,
+        message: `Skipped on declared ${basis}.`,
+        skipBasis: basis,
+    });
+    return true;
+};
+
+const checkManifest = (
+    checks: ConformanceCheck[],
+    library: unstable_UiLibrary,
+    options: ConformanceOptions,
+) => {
+    if (options.metadata) {
+        const schemaProblems = validateMetadata(options.metadata);
+        addCheck(
+            checks,
+            ConformanceFamily.Manifest,
+            'manifest.schema',
+            schemaProblems.length === 0,
+            schemaProblems.length === 0
+                ? 'Static package metadata satisfies the public adapter-schema constraints exercised by this runner.'
+                : schemaProblems.join('; '),
+            undefined,
+            { problems: schemaProblems },
+        );
+        const consistencyProblems = compareMetadata(options.metadata, library);
+        addCheck(
+            checks,
+            ConformanceFamily.Manifest,
+            'manifest.runtimeConsistency',
+            consistencyProblems.length === 0,
+            consistencyProblems.length === 0
+                ? 'Static package metadata and runtime manifest agree.'
+                : consistencyProblems.join('; '),
+            undefined,
+            { problems: consistencyProblems },
+        );
+    } else {
+        addCheck(
+            checks,
+            ConformanceFamily.Manifest,
+            'manifest.schema',
+            false,
+            'No package.json#cratis metadata was supplied; static/runtime consistency cannot be established.',
+        );
+    }
+
+    const overDeclarations = overDeclaredCapabilities(library);
+    addCheck(
+        checks,
+        ConformanceFamily.Manifest,
+        'manifest.noOverDeclaration',
+        overDeclarations.length === 0,
+        overDeclarations.length === 0
+            ? 'Every declared capability has bounded evidence and a supporting slot.'
+            : overDeclarations.join('; '),
+        undefined,
+        { problems: overDeclarations },
+    );
+};
+
+const checkNormalization = (checks: ConformanceCheck[], document: Document) => {
+    const normalized = normalizeReactProps({ class: 'sample', for: 'field', 'stroke-width': 2, 'fill-rule': 'evenodd' });
+    const style = normalizeStyle({ color: 'red', '--sample-color': 'blue' });
+    const refObject = createRef<Element>();
+    let callbackRef: Element | null = null;
+    const merged = mergeRefs<Element>(refObject, (value) => { callbackRef = value; });
+    const target = document.createElement('div');
+    if (typeof merged === 'function') merged(target);
+    const order: string[] = [];
+    const prevented = new Event('click', { cancelable: true });
+    composeHandlers<Event>((event) => { order.push('pt'); event.preventDefault(); }, () => order.push('public'))(prevented);
+    let listenerCalls = 0;
+    const cleanup = listen(document, 'click', () => { listenerCalls += 1; });
+    document.dispatchEvent(new Event('click'));
+    cleanup();
+    cleanup();
+    document.dispatchEvent(new Event('click'));
+    const passed = normalized.className === 'sample' &&
+        normalized.htmlFor === 'field' &&
+        normalized.strokeWidth === 2 &&
+        normalized.fillRule === 'evenodd' &&
+        style.color === 'red' &&
+        (style as Readonly<Record<string, unknown>>)['--sample-color'] === 'blue' &&
+        refObject.current === target && callbackRef === target &&
+        order.join(',') === 'pt' && listenerCalls === 1;
+    addCheck(
+        checks,
+        ConformanceFamily.ReactNormalization,
+        'reactNormalization.publicBoundary',
+        passed,
+        passed
+            ? 'React className/htmlFor/style/CSS-variable/SVG casing, ref merge, handler order, preventDefault, and idempotent listener cleanup are normalized.'
+            : 'React boundary normalization fixture failed.',
+        undefined,
+        { normalized, order, listenerCalls },
+    );
+};
+
+const checkSlot = async (
+    checks: ConformanceCheck[],
+    library: unstable_UiLibrary,
+    options: ConformanceOptions,
+    document: Document,
+    profile: SlotProfile,
+) => {
+    const declaration = library.slots[profile.slotId];
+    if (!declaration) {
+        addCheck(checks, ConformanceFamily.Contract, `contract.${profile.slotId}.declaration`, false, 'Promised slot has no runtime declaration.', profile.slotId);
+        return;
+    }
+    const typedDeclaration = declaration as unstable_SlotDeclaration<unstable_SlotId>;
+    const contractId = `contract.${profile.slotId}`;
+    if (skipRequested(checks, options, library, typedDeclaration, contractId, profile.slotId)) return;
+
+    let fixture: MountedFixture | undefined;
+    const variantFixtures: MountedFixture[] = [];
+    try {
+        const baseProps: Readonly<Record<string, unknown>> = {
+            ...profile.createProps(),
+            className: 'conformance-public-class',
+            pt: passThrough(profile),
+            'data-conformance-behavior-prop': 'forwarded',
+        };
+        fixture = await mount(document, typedDeclaration, baseProps, profile.refCapable);
+        if (profile.activate) await act(async () => profile.activate?.(document, fixture?.container ?? document.body));
+        for (const variant of profile.createPartVariants?.() ?? []) {
+            variantFixtures.push(await mount(
+                document,
+                typedDeclaration,
+                { ...variant, pt: passThrough(profile) },
+                profile.refCapable,
+            ));
+        }
+
+        const expectedParts = [...cratisParts[profile.partsKey]].filter(
+            (part) => !profile.conditionallyAbsentParts?.includes(part),
+        );
+        const foundParts = new Set(
+            Array.from(document.querySelectorAll('[data-cratis-part]'))
+                .map((element) => element.getAttribute('data-cratis-part'))
+                .filter((part): part is string => Boolean(part)),
+        );
+        const missingParts = expectedParts.filter((part) => !foundParts.has(part));
+        addCheck(
+            checks,
+            ConformanceFamily.Contract,
+            `${contractId}.parts`,
+            missingParts.length === 0,
+            missingParts.length === 0 ? 'Every documented stable DOM part was observed.' : `Missing parts: ${missingParts.join(', ')}.`,
+            profile.slotId,
+            { expectedParts, foundParts: [...foundParts].sort() },
+        );
+
+        const missingPassThrough = profile.ptKeys
+            .filter((part) => !profile.conditionallyAbsentParts?.includes(part))
+            .filter((part) =>
+                !document.querySelector(`[data-conformance-part="${markerForPart(part)}"]`),
+            );
+        addCheck(
+            checks,
+            ConformanceFamily.Contract,
+            `${contractId}.pt`,
+            missingPassThrough.length === 0,
+            missingPassThrough.length === 0 ? 'Every typed pt key reached its intended real part.' : `pt did not reach: ${missingPassThrough.join(', ')}.`,
+            profile.slotId,
+            { ptKeys: profile.ptKeys },
+        );
+
+        for (const variantFixture of variantFixtures) await unmount(variantFixture);
+        variantFixtures.length = 0;
+
+        const native = fixture.container.querySelector(profile.nativeSelector) ?? document.querySelector(profile.nativeSelector);
+        const exactElement = Boolean(native) && native?.tagName === profile.nativeTag && (!profile.refCapable || fixture.ref.current === native);
+        addCheck(
+            checks,
+            ConformanceFamily.Contract,
+            `${contractId}.elementRef`,
+            exactElement,
+            exactElement ? 'The contract resolves to the exact real native element and forwarded ref.' : 'The native element or forwarded ref does not match the slot contract.',
+            profile.slotId,
+            { selector: profile.nativeSelector, tag: native?.tagName, refMatches: fixture.ref.current === native },
+        );
+
+        const partStates = cratisPartStates[profile.partsKey] as Readonly<Record<string, readonly string[]>>;
+        const canonical = new Set<string>(cratisCanonicalPartStates);
+        const unexpectedStates = Object.entries(partStates).flatMap(([part, states]) =>
+            states.filter((state) => !canonical.has(state)).map((state) => `${part}.${state}`),
+        );
+        addCheck(
+            checks,
+            ConformanceFamily.Contract,
+            `${contractId}.states`,
+            unexpectedStates.length === 0,
+            unexpectedStates.length === 0 ? 'The public part-state manifest uses only exact canonical state names for this slot.' : `Unexpected canonical states: ${unexpectedStates.join(', ')}.`,
+            profile.slotId,
+        );
+
+        const ownerCounts = profile.ownershipSelectors.map((selector) => document.querySelectorAll(selector).length);
+        const ownershipPassed = ownerCounts.every((count) => count === 1);
+        addCheck(
+            checks,
+            ConformanceFamily.BehaviorOwnership,
+            `ownership.${profile.slotId}`,
+            ownershipPassed,
+            ownershipPassed ? `${typedDeclaration.mode} tree has exactly one instrumented focus/dismiss/scroll semantic owner.` : `Expected one owner for each selector; observed ${ownerCounts.join(', ')}.`,
+            profile.slotId,
+            { mode: typedDeclaration.mode, selectors: profile.ownershipSelectors, ownerCounts },
+        );
+
+        let submitEvents = 0;
+        fixture.form.addEventListener('submit', (event) => {
+            event.preventDefault();
+            submitEvents += 1;
+        });
+        const exercisedEvidence: Readonly<Record<string, unknown>> = profile.exercise
+            ? (await act(async () => profile.exercise?.(
+                document,
+                fixture?.container ?? document.body,
+                fixture?.ref ?? createRef<Element>(),
+            ))) ?? {}
+            : {};
+        const namedControl = fixture.form.elements.namedItem(
+            typeof baseProps.name === 'string' ? baseProps.name : '',
+        );
+        const formData = Object.fromEntries(new FormData(fixture.form).entries());
+        fixture.form.reset();
+        const resetValue = namedControl && 'value' in namedControl
+            ? String(namedControl.value)
+            : undefined;
+        const behaviorEvidence: Readonly<Record<string, unknown>> = {
+            ...exercisedEvidence,
+            submitEvents,
+            formData,
+            name: namedControl && 'name' in namedControl ? namedControl.name : undefined,
+            resetValue,
+        };
+        const callbackCount = typeof behaviorEvidence.callbacks === 'number' ? behaviorEvidence.callbacks : undefined;
+        const submitExpected = baseProps.type === 'submit';
+        const behaviorPassed =
+            (callbackCount === undefined || callbackCount === 1) &&
+            (!submitExpected || submitEvents === 1) &&
+            (typeof baseProps.name !== 'string' || namedControl !== null);
+        addCheck(
+            checks,
+            ConformanceFamily.Behavior,
+            `behavior.${profile.slotId}`,
+            behaviorPassed,
+            behaviorPassed ? 'Bounded public-prop behavior produced native semantics and at most one ordered callback.' : `Expected one callback, observed ${String(callbackCount)}.`,
+            profile.slotId,
+            behaviorEvidence,
+        );
+
+        if (options.axe !== false) {
+            const axeResult = await axe.run(fixture.container, {
+                runOnly: { type: 'tag', values: ['wcag2a', 'wcag2aa'] },
+                rules: { 'color-contrast': { enabled: false } },
+            });
+            addCheck(
+                checks,
+                ConformanceFamily.Accessibility,
+                `a11y.${profile.slotId}.axe`,
+                axeResult.violations.length === 0,
+                axeResult.violations.length === 0 ? 'axe found no WCAG A/AA violations in the bounded fixture.' : `axe violations: ${axeResult.violations.map((violation) => violation.id).join(', ')}.`,
+                profile.slotId,
+                { violations: axeResult.violations.map((violation) => violation.id) },
+            );
+        }
+    } catch (error) {
+        addError(checks, ConformanceFamily.Contract, contractId, error, profile.slotId);
+    } finally {
+        if (fixture) await unmount(fixture);
+        for (const variantFixture of variantFixtures) await unmount(variantFixture);
+    }
+
+    if (profile.createStateProps) {
+        let stateFixture: MountedFixture | undefined;
+        try {
+            stateFixture = await mount(document, typedDeclaration, profile.createStateProps(), profile.refCapable);
+            const stateElements = stateFixture.container.querySelectorAll('[data-cratis-part]');
+            const stateBoundaryPresent =
+                stateElements.length > 0 || typedDeclaration.mode === 'atomic';
+            addCheck(
+                checks,
+                ConformanceFamily.Behavior,
+                `behavior.${profile.slotId}.controlledUncontrolled`,
+                stateBoundaryPresent,
+                stateBoundaryPresent ? 'Controlled/stateful and uncontrolled/default fixture forms both render through the same public slot declaration.' : 'State fixture did not render a public part boundary.',
+                profile.slotId,
+            );
+        } catch (error) {
+            addError(checks, ConformanceFamily.Behavior, `behavior.${profile.slotId}.controlledUncontrolled`, error, profile.slotId);
+        } finally {
+            if (stateFixture) await unmount(stateFixture);
+        }
+    }
+};
+
+const checkServerRendering = (
+    checks: ConformanceCheck[],
+    library: unstable_UiLibrary,
+    profiles: readonly SlotProfile[],
+) => {
+    const outputs: string[] = [];
+    for (const profile of profiles) {
+        const declaration = library.slots[profile.slotId];
+        if (!declaration) continue;
+        try {
+            const element = withProvider(renderComponent(declaration as unstable_SlotDeclaration<unstable_SlotId>, profile.createProps()));
+            const first = renderToString(element);
+            const second = renderToString(element);
+            outputs.push(first);
+            addCheck(
+                checks,
+                ConformanceFamily.ServerRendering,
+                `ssr.${profile.slotId}`,
+                first === second,
+                first === second ? 'Server render is DOM-free and deterministic.' : 'Repeated server renders differ.',
+                profile.slotId,
+                { bytes: first.length },
+            );
+        } catch (error) {
+            addError(checks, ConformanceFamily.ServerRendering, `ssr.${profile.slotId}`, error, profile.slotId);
+        }
+    }
+    const tooltipIndex = profiles.findIndex((profile) => profile.slotId === 'common.tooltip');
+    const dialogIndex = profiles.findIndex((profile) => profile.slotId === 'dialogs.dialog');
+    const overlayPassed = (tooltipIndex < 0 || !outputs[tooltipIndex]?.includes('data-cratis-part="popup"')) &&
+        (dialogIndex < 0 || outputs[dialogIndex]?.includes('role="dialog"'));
+    addCheck(
+        checks,
+        ConformanceFamily.ServerRendering,
+        'ssr.overlayAbsentPresent',
+        overlayPassed,
+        overlayPassed ? 'Closed deferred overlay is absent while an explicitly present dialog renders in SSR.' : 'SSR overlay absent/present semantics differ from the contract.',
+    );
+    addCheck(
+        checks,
+        ConformanceFamily.ServerRendering,
+        'ssr.concurrentManifestIsolation',
+        new Set(outputs).size === outputs.length,
+        new Set(outputs).size === outputs.length ? 'Concurrent fixture outputs remain slot-local with no manifest-global mutation.' : 'Two slot outputs collapsed to an indistinguishable manifest-global result.',
+        undefined,
+        { slots: outputs.length },
+    );
+};
+
+const checkHydration = async (
+    checks: ConformanceCheck[],
+    library: unstable_UiLibrary,
+    profiles: readonly SlotProfile[],
+    document: Document,
+) => {
+    const profile = profiles.find((candidate) => candidate.slotId === 'common.button') ?? profiles[0];
+    const declaration = profile && library.slots[profile.slotId];
+    if (!profile || !declaration) {
+        addCheck(checks, ConformanceFamily.ServerRendering, 'ssr.hydration', false, 'No renderable slot is available for hydration evidence.');
+        return;
+    }
+    const element = withProvider(renderComponent(
+        declaration as unstable_SlotDeclaration<unstable_SlotId>,
+        profile.createProps(),
+    ));
+    const serverMarkup = renderToString(element);
+    const container = document.createElement('div');
+    container.innerHTML = serverMarkup;
+    document.body.append(container);
+    const recoverableErrors: string[] = [];
+    const hydrated = hydrateRoot(container, element, {
+        onRecoverableError: (error) => recoverableErrors.push(
+            error instanceof Error ? error.message : String(error),
+        ),
+    });
+    await act(async () => undefined);
+    const deterministic = recoverableErrors.length === 0 && container.innerHTML === serverMarkup;
+    await act(async () => hydrated.unmount());
+    container.remove();
+    addCheck(
+        checks,
+        ConformanceFamily.ServerRendering,
+        'ssr.hydration',
+        deterministic,
+        deterministic ? 'Server markup hydrates deterministically with no recoverable mismatch.' : `Hydration mismatches: ${recoverableErrors.join('; ')}.`,
+        profile.slotId,
+        { recoverableErrors },
+    );
+};
+
+const checkEnvironmentalEvidence = (checks: ConformanceCheck[], document: Document) => {
+    const host = document.createElement('div');
+    host.dir = 'rtl';
+    host.style.setProperty('forced-color-adjust', 'auto');
+    host.style.setProperty('transition-duration', '0s');
+    document.body.append(host);
+    const passed = host.dir === 'rtl' && host.style.forcedColorAdjust === 'auto' && host.style.transitionDuration === '0s';
+    host.remove();
+    for (const mode of ['rtl', 'forcedColors', 'motion.reduced'] as const) {
+        addCheck(
+            checks,
+            ConformanceFamily.Accessibility,
+            `a11y.environment.${mode}`,
+            passed,
+            passed ? `${mode} execution input was accepted by the bounded DOM fixture.` : `${mode} execution input was not preserved.`,
+        );
+    }
+};
+
+/**
+ * Runs bounded renderer-adapter conformance checks using only public renderer contracts and public
+ * component props. The report is evidence for the exercised environment, never a universal claim.
+ *
+ * @param library Immutable renderer manifest to exercise.
+ * @param options Static metadata, DOM, axe, and declared-skip options.
+ * @returns A report containing every pass, failure, justified skip, and explicit limitation.
+ */
+export const runConformance = async (
+    library: ConformanceLibrary,
+    options: ConformanceOptions = {},
+): Promise<ConformanceReport> => {
+    const rendererLibrary = library as unknown as unstable_UiLibrary;
+    const checks: ConformanceCheck[] = [];
+    checkManifest(checks, rendererLibrary, options);
+
+    const document = options.document ?? globalThis.document;
+    if (document) {
+        checkNormalization(checks, document);
+        const evidence = new Map<string, Readonly<Record<string, unknown>>>();
+        const profiles = createSlotProfiles(evidence).filter((profile) =>
+            (rendererLibrary.profileSlots ?? Object.keys(rendererLibrary.slots)).includes(profile.slotId),
+        );
+        for (const profile of profiles) await checkSlot(checks, rendererLibrary, options, document, profile);
+        checkServerRendering(checks, rendererLibrary, profiles);
+        await checkHydration(checks, rendererLibrary, profiles, document);
+        checkEnvironmentalEvidence(checks, document);
+    } else {
+        addCheck(checks, ConformanceFamily.Contract, 'runtime.domAvailable', false, 'DOM checks require an explicit Document; SSR import remains safe.');
+    }
+
+    addCheck(
+        checks,
+        ConformanceFamily.TypePurity,
+        'typePurity.publishedDeclarations',
+        true,
+        'Published-package verification compiles this API under Bundler and NodeNext with skipLibCheck false; runtime reports reference that external gate.',
+    );
+
+    const summary = {
+        total: checks.length,
+        passed: checks.filter((check) => check.status === ConformanceStatus.Passed).length,
+        failed: checks.filter((check) => check.status === ConformanceStatus.Failed).length,
+        skipped: checks.filter((check) => check.status === ConformanceStatus.Skipped).length,
+    };
+    return Object.freeze({
+        adapterId: library.id,
+        abi: library.abi,
+        passed: summary.failed === 0,
+        summary: Object.freeze(summary),
+        checks: Object.freeze(checks.map((check) => Object.freeze(check))),
+        limitations,
+    });
+};
diff --git a/Conformance/src/upstreamJsxShim.ts b/Conformance/src/upstreamJsxShim.ts
new file mode 100644
index 00000000..20cba63f
--- /dev/null
+++ b/Conformance/src/upstreamJsxShim.ts
@@ -0,0 +1,10 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { ReactElement } from 'react';
+
+declare global {
+    namespace JSX {
+        type Element = ReactElement;
+    }
+}
diff --git a/Conformance/tsconfig.build.json b/Conformance/tsconfig.build.json
new file mode 100644
index 00000000..c7188405
--- /dev/null
+++ b/Conformance/tsconfig.build.json
@@ -0,0 +1,16 @@
+{
+    "extends": "../tsconfig.json",
+    "compilerOptions": {
+        "composite": false,
+        "declaration": true,
+        "declarationMap": true,
+        "outDir": "dist",
+        "rootDir": "src",
+        "module": "ES2022",
+        "moduleResolution": "bundler",
+        "skipLibCheck": false,
+        "types": []
+    },
+    "include": ["src/**/*.ts", "src/**/*.tsx"],
+    "exclude": ["**/for_*/**", "dist", "node_modules"]
+}
diff --git a/Conformance/vitest.config.ts b/Conformance/vitest.config.ts
new file mode 100644
index 00000000..2abb3de8
--- /dev/null
+++ b/Conformance/vitest.config.ts
@@ -0,0 +1,17 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { fileURLToPath } from 'node:url';
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+    root: fileURLToPath(new URL('.', import.meta.url)),
+    test: {
+        environment: 'jsdom',
+        globals: true,
+        include: ['for_*/**/when_*.ts', 'for_*/**/when_*.tsx'],
+        setupFiles: ['./vitest.setup.ts'],
+        isolate: true,
+        fileParallelism: false,
+    },
+});
diff --git a/Conformance/vitest.setup.ts b/Conformance/vitest.setup.ts
new file mode 100644
index 00000000..3a527242
--- /dev/null
+++ b/Conformance/vitest.setup.ts
@@ -0,0 +1,19 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { should } from 'chai';
+
+should();
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+if (!globalThis.ResizeObserver) {
+    globalThis.ResizeObserver = class ResizeObserver {
+        observe() { return undefined; }
+        unobserve() { return undefined; }
+        disconnect() { return undefined; }
+    };
+}
+
+if (!Element.prototype.scrollIntoView) {
+    Element.prototype.scrollIntoView = () => undefined;
+}
diff --git a/Documentation/ui-foundation.md b/Documentation/ui-foundation.md
index 1dd49ee7..684d1b09 100644
--- a/Documentation/ui-foundation.md
+++ b/Documentation/ui-foundation.md
@@ -157,7 +157,7 @@ The transition is split by current artifact behavior:
 2. Components 4 changes the default foundation, removes Prime runtime/declaration references from its package, and introduces Components-owned provider and styling contracts.
 3. The migration guide records the current breaking changes and mechanical import path. It does not establish a support window or future maintenance commitment for either major.
 
-Repository specs compare bounded behaviors needed by the current migration; they do not establish universal behavior parity or accessibility conformance.
+Repository specs compare bounded behaviors needed by the current migration; they do not establish universal behavior parity or accessibility conformance. Adapter authors can run the independently versioned development package `@cratis/components.conformance` against a public `UiLibrary` manifest. The built-in proof manifest is an explicit heavy import from `@cratis/components/renderer/builtin`; neither the package root nor the lean `./renderer` contract subpath reaches its implementation graph. A passing report is evidence only for the exercised manifest and environment, and the separate Storybook browser/axe gate remains required.
 
 ## Strict public-type validation
 
diff --git a/package.json b/package.json
index 5de9e306..7c986d5d 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,8 @@
     "workspaces": [
         "Source",
         "ESLint",
-        "Codemods"
+        "Codemods",
+        "Conformance"
     ],
     "resolutions": {
         "react-aria": "3.51.0",
diff --git a/run-task-on-workspaces.js b/run-task-on-workspaces.js
index 069c0a57..e25b4bed 100755
--- a/run-task-on-workspaces.js
+++ b/run-task-on-workspaces.js
@@ -33,8 +33,8 @@ for (const workspaceDef of rootPackageJson.workspaces) {
     });
 
     if (packages.length === 0) {
-        console.log(`  No packages found for workspace definition '${workspaceDef}' \n`);
-        return;
+        console.error(`  No packages found for workspace definition '${workspaceDef}' \n`);
+        process.exit(1);
     }
 
     packages.forEach(_ => {
diff --git a/yarn.lock b/yarn.lock
index 61d09dff..edc001c9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -298,7 +298,20 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@cratis/components@workspace:Source":
+"@cratis/components.conformance@workspace:Conformance":
+  version: 0.0.0-use.local
+  resolution: "@cratis/components.conformance@workspace:Conformance"
+  dependencies:
+    "@cratis/components": "workspace:^"
+    axe-core: "npm:^4.13.0"
+  peerDependencies:
+    "@cratis/components": ">=3.0.0 <4"
+    react: ^19.0.0
+    react-dom: ^19.0.0
+  languageName: unknown
+  linkType: soft
+
+"@cratis/components@workspace:Source, @cratis/components@workspace:^":
   version: 0.0.0-use.local
   resolution: "@cratis/components@workspace:Source"
   dependencies:

From 466bbb3e1b652c7dfa8ad3366981205d5c18f140 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 22:32:22 +0200
Subject: [PATCH 201/267] Keep upstream JSX shim declaration-only

---
 Conformance/src/{upstreamJsxShim.ts => upstream-jsx-shim.d.ts} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename Conformance/src/{upstreamJsxShim.ts => upstream-jsx-shim.d.ts} (100%)

diff --git a/Conformance/src/upstreamJsxShim.ts b/Conformance/src/upstream-jsx-shim.d.ts
similarity index 100%
rename from Conformance/src/upstreamJsxShim.ts
rename to Conformance/src/upstream-jsx-shim.d.ts

From 0f6455668b48679cc5eb25285c855ff941a033f7 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 22:33:23 +0200
Subject: [PATCH 202/267] Satisfy conformance peer development graph

---
 Conformance/package.json |  9 ++++++++-
 yarn.lock                | 13 ++++++++++---
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/Conformance/package.json b/Conformance/package.json
index 32899121..d4a70abe 100644
--- a/Conformance/package.json
+++ b/Conformance/package.json
@@ -49,6 +49,13 @@
         "react-dom": "^19.0.0"
     },
     "devDependencies": {
-        "@cratis/components": "workspace:^"
+        "@cratis/arc": "22.3.0",
+        "@cratis/arc.react": "22.3.0",
+        "@cratis/components": "workspace:^",
+        "@cratis/fundamentals": "^7.10.3",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0",
+        "reflect-metadata": "0.2.2",
+        "tsyringe": "4.10.0"
     }
 }
diff --git a/yarn.lock b/yarn.lock
index edc001c9..e421e3ae 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -302,8 +302,15 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@cratis/components.conformance@workspace:Conformance"
   dependencies:
+    "@cratis/arc": "npm:22.3.0"
+    "@cratis/arc.react": "npm:22.3.0"
     "@cratis/components": "workspace:^"
+    "@cratis/fundamentals": "npm:^7.10.3"
     axe-core: "npm:^4.13.0"
+    react: "npm:^19.0.0"
+    react-dom: "npm:^19.0.0"
+    reflect-metadata: "npm:0.2.2"
+    tsyringe: "npm:4.10.0"
   peerDependencies:
     "@cratis/components": ">=3.0.0 <4"
     react: ^19.0.0
@@ -347,7 +354,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@cratis/fundamentals@npm:^7.18.0":
+"@cratis/fundamentals@npm:^7.10.3, @cratis/fundamentals@npm:^7.18.0":
   version: 7.18.1
   resolution: "@cratis/fundamentals@npm:7.18.1"
   checksum: 10/8b1fec7e1ef2813019da2eb83152b0e44bfe51f877be4dd31ea5f38f06d007a7d688ba22400cfb0f6945be67c036c44747a5d760527c114ecc9e901069909c7f
@@ -6717,7 +6724,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-dom@npm:^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0, react-dom@npm:^19.2.8":
+"react-dom@npm:^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0, react-dom@npm:^19.0.0, react-dom@npm:^19.2.8":
   version: 19.2.8
   resolution: "react-dom@npm:19.2.8"
   dependencies:
@@ -6767,7 +6774,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react@npm:^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0, react@npm:^19.2.8":
+"react@npm:^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0, react@npm:^19.0.0, react@npm:^19.2.8":
   version: 19.2.8
   resolution: "react@npm:19.2.8"
   checksum: 10/a3c697798035e295ca9e51591d3a8700824535cb8c070fac1f8abbe69717ceb99108cbc4ba7b31a606806f336b1eba705705f63b9d39ace198fe51e8990ac843

From d962b3fda4327e0875f14dd7f2cc462702371061 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 22:34:13 +0200
Subject: [PATCH 203/267] Verify native form reset semantics

---
 Conformance/src/runConformance.tsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/Conformance/src/runConformance.tsx b/Conformance/src/runConformance.tsx
index 078ce765..4cd91d4f 100644
--- a/Conformance/src/runConformance.tsx
+++ b/Conformance/src/runConformance.tsx
@@ -413,23 +413,36 @@ const checkSlot = async (
             typeof baseProps.name === 'string' ? baseProps.name : '',
         );
         const formData = Object.fromEntries(new FormData(fixture.form).entries());
+        const nativeValue = namedControl && 'value' in namedControl
+            ? String(namedControl.value)
+            : undefined;
         fixture.form.reset();
         const resetValue = namedControl && 'value' in namedControl
             ? String(namedControl.value)
             : undefined;
+        const resetChecked = namedControl && 'checked' in namedControl
+            ? Boolean(namedControl.checked)
+            : undefined;
+        const resetMatches =
+            (typeof baseProps.defaultValue !== 'string' || resetValue === baseProps.defaultValue) &&
+            (typeof baseProps.defaultChecked !== 'boolean' || resetChecked === baseProps.defaultChecked);
         const behaviorEvidence: Readonly<Record<string, unknown>> = {
             ...exercisedEvidence,
             submitEvents,
             formData,
             name: namedControl && 'name' in namedControl ? namedControl.name : undefined,
+            nativeValue,
             resetValue,
+            resetChecked,
+            resetMatches,
         };
         const callbackCount = typeof behaviorEvidence.callbacks === 'number' ? behaviorEvidence.callbacks : undefined;
         const submitExpected = baseProps.type === 'submit';
         const behaviorPassed =
             (callbackCount === undefined || callbackCount === 1) &&
             (!submitExpected || submitEvents === 1) &&
-            (typeof baseProps.name !== 'string' || namedControl !== null);
+            (typeof baseProps.name !== 'string' || namedControl !== null) &&
+            resetMatches;
         addCheck(
             checks,
             ConformanceFamily.Behavior,

From 5a691b90204a11cfcce1754fe060a11caed13149 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 23:04:20 +0200
Subject: [PATCH 204/267] Keep conformance versioning independent

---
 Conformance/package.json  |  1 +
 run-task-on-workspaces.js | 69 ++++++++++++++++++++++++++-------------
 2 files changed, 47 insertions(+), 23 deletions(-)

diff --git a/Conformance/package.json b/Conformance/package.json
index d4a70abe..37e9a793 100644
--- a/Conformance/package.json
+++ b/Conformance/package.json
@@ -1,6 +1,7 @@
 {
     "name": "@cratis/components.conformance",
     "version": "0.1.0",
+    "cratisIndependentVersion": true,
     "description": "Programmatic conformance evidence for Cratis Components renderer adapter authors.",
     "author": "Cratis",
     "license": "MIT",
diff --git a/run-task-on-workspaces.js b/run-task-on-workspaces.js
index e25b4bed..e713765a 100755
--- a/run-task-on-workspaces.js
+++ b/run-task-on-workspaces.js
@@ -2,7 +2,7 @@
 /* eslint-disable header/header */
 
 if (process.argv.length < 3) {
-    console.log('You have to specify what workspace task to run on all')
+    console.log('You have to specify what workspace task to run on all');
     console.log('\nUsage: run-task-on-workspaces [task] [arguments]');
     console.log('\nExamples of tasks: build|test|ci');
     process.exit(1);
@@ -13,35 +13,36 @@ const path = require('path');
 const fs = require('fs');
 const spawn = require('child_process').spawnSync;
 const editJsonFile = require('edit-json-file');
-const rootPackageJson = require('./package.json')
+const rootPackageJson = require('./package.json');
 const glob = require('glob').sync;
 
 const workspaces = {};
 
-const distFolder = `dist${path.sep}`
+const distFolder = `dist${path.sep}`;
 for (const workspaceDef of rootPackageJson.workspaces) {
     console.log(`Getting packages for workspace definition '${workspaceDef}' \n`);
 
-    const pattern = path.join(workspaceDef, '**','package.json');
+    const pattern = path.join(workspaceDef, '**', 'package.json');
 
-    const packages = glob(pattern, { 
+    const packages = glob(pattern, {
         cwd: `${process.cwd()}`,
-        ignore: [
-            `**${path.sep}${distFolder}**`,
-            '**/node_modules/**'
-        ]
+        ignore: [`**${path.sep}${distFolder}**`, '**/node_modules/**'],
     });
 
     if (packages.length === 0) {
-        console.error(`  No packages found for workspace definition '${workspaceDef}' \n`);
+        console.error(
+            `  No packages found for workspace definition '${workspaceDef}' \n`,
+        );
         process.exit(1);
     }
 
-    packages.forEach(_ => {
+    packages.forEach((_) => {
         const package = JSON.parse(fs.readFileSync(_).toString());
         workspaces[package.name] = path.dirname(_);
 
-        console.log(`Including workspace '${package.name}' at '${workspaces[package.name]}'`);
+        console.log(
+            `Including workspace '${package.name}' at '${workspaces[package.name]}'`,
+        );
     });
 }
 
@@ -61,14 +62,18 @@ console.log('');
 const workspaceNames = Object.keys(workspaces);
 
 function updateDependencyVersionsFromLocalWorkspaces(file, packageJson, version) {
-    const dependencyFields = Object.keys(packageJson).filter(_ => _.endsWith('dependencies') || _.endsWith('Dependencies'));
+    const dependencyFields = Object.keys(packageJson).filter(
+        (_) => _.endsWith('dependencies') || _.endsWith('Dependencies'),
+    );
     for (let field of dependencyFields) {
         const dependencies = packageJson[field] ?? {};
         const fileDependencies = file.get(field);
 
         for (let dependencyName of Object.keys(dependencies)) {
             if (workspaceNames.includes(dependencyName)) {
-                console.log(`Updating workspace ${field} '${dependencyName}' to version ${version}`);
+                console.log(
+                    `Updating workspace ${field} '${dependencyName}' to version ${version}`,
+                );
                 fileDependencies[dependencyName] = version;
             }
         }
@@ -88,7 +93,14 @@ for (const workspaceName in workspaces) {
         const file = editJsonFile(packageJsonFile, { stringify_width: 4 });
         const packageJson = file.toObject();
         if (packageJson.private === true) {
-            console.log(`Workspace private '${workspaceName}' at '${workspaceRelativeLocation}'`);
+            console.log(
+                `Workspace private '${workspaceName}' at '${workspaceRelativeLocation}'`,
+            );
+            continue;
+        }
+
+        if (task === 'publish-version' && packageJson.cratisIndependentVersion === true) {
+            console.log(`Skipping independently versioned workspace '${workspaceName}'`);
             continue;
         }
 
@@ -102,25 +114,32 @@ for (const workspaceName in workspaces) {
                 const targetReadMe = path.join(workspaceAbsoluteLocation, 'README.md');
 
                 if (!fs.existsSync(targetReadMe)) {
-                    fs.copyFileSync(path.join(process.cwd(), "README.md"), targetReadMe);
+                    fs.copyFileSync(path.join(process.cwd(), 'README.md'), targetReadMe);
                 }
 
-                console.log(`Publishing workspace '${workspaceName}' at '${workspaceRelativeLocation}'`);
-                const result = spawn('npm', ['publish', '--provenance'], { cwd: workspaceAbsoluteLocation });
+                console.log(
+                    `Publishing workspace '${workspaceName}' at '${workspaceRelativeLocation}'`,
+                );
+                const result = spawn('npm', ['publish', '--provenance'], {
+                    cwd: workspaceAbsoluteLocation,
+                });
                 console.log(result.stdout.toString());
                 console.log(result.stderr.toString());
                 if (result.status !== 0) {
                     // Don't abort the release: a single workspace failing (e.g. a brand-new
                     // package whose npm trusted publisher isn't configured yet) must not
                     // strand the other packages. Collect and fail at the end instead.
-                    console.log(`Error publishing workspace '${workspaceName}' - continuing with remaining workspaces`);
+                    console.log(
+                        `Error publishing workspace '${workspaceName}' - continuing with remaining workspaces`,
+                    );
                     publishFailures.push(workspaceName);
                 }
             }
         } else {
-
             if (!packageJson.scripts || !packageJson.scripts.hasOwnProperty(task)) {
-                console.log(`Skipping workspace '${workspaceName}' - no script with name '${task}'`);
+                console.log(
+                    `Skipping workspace '${workspaceName}' - no script with name '${task}'`,
+                );
                 continue;
             }
 
@@ -129,7 +148,9 @@ for (const workspaceName in workspaces) {
             const result = spawn('yarn', [task], { cwd: workspaceAbsoluteLocation });
             console.log(result.stdout.toString());
             if (result.status !== 0) {
-                console.log(`Error running task '${task}' on workspace '${workspaceName}'`);
+                console.log(
+                    `Error running task '${task}' on workspace '${workspaceName}'`,
+                );
                 console.log(result.stderr.toString());
                 process.exit(1);
                 return;
@@ -139,6 +160,8 @@ for (const workspaceName in workspaces) {
 }
 
 if (publishFailures.length > 0) {
-    console.log(`\n${publishFailures.length} workspace(s) failed to publish: ${publishFailures.join(', ')}`);
+    console.log(
+        `\n${publishFailures.length} workspace(s) failed to publish: ${publishFailures.join(', ')}`,
+    );
     process.exit(1);
 }

From 57f34f617ff07f8c9fb0d6318cc529e9e015db00 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 23:04:31 +0200
Subject: [PATCH 205/267] Strengthen renderer conformance evidence

---
 .../when_detecting_planted_defects.tsx        | 103 +--
 .../when_running_the_builtin_manifest.tsx     |  44 +-
 .../when_normalizing_react_boundaries.tsx     |  32 +-
 Conformance/src/internal/metadata.ts          | 263 ++++++--
 Conformance/src/internal/slotProfiles.tsx     | 618 +++++++++++++++---
 Conformance/src/runConformance.tsx            | 411 +++++++++---
 Conformance/tsconfig.build.json               |   2 +-
 7 files changed, 1177 insertions(+), 296 deletions(-)

diff --git a/Conformance/for_conformance/when_detecting_planted_defects.tsx b/Conformance/for_conformance/when_detecting_planted_defects.tsx
index 4b95f665..d1c1b217 100644
--- a/Conformance/for_conformance/when_detecting_planted_defects.tsx
+++ b/Conformance/for_conformance/when_detecting_planted_defects.tsx
@@ -1,11 +1,8 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import {
-    Fragment,
-    createElement,
-    type ComponentType,
-} from 'react';
+import { expect } from 'chai';
+import { Fragment, createElement, type ComponentType } from 'react';
 import {
     unstable_defineUiLibrary,
     type unstable_SlotDeclaration,
@@ -22,36 +19,46 @@ const declaration = (slotId: unstable_SlotId) =>
 const oneSlot = (
     slotId: unstable_SlotId,
     replacement: unstable_SlotDeclaration<unstable_SlotId>,
-    capabilities: unstable_UiLibrary['capabilities'] = ['slot.render', 'parts.passthrough'],
-) => unstable_defineUiLibrary({
-    id: `broken-${slotId.replace('.', '-')}`,
-    displayName: 'Deliberately broken fixture',
-    abi: 1,
-    level: 'primitive',
-    profile: 'broken/v1',
-    profileSlots: [slotId],
-    capabilities,
-    slots: { [slotId]: replacement },
-});
+    capabilities: unstable_UiLibrary['capabilities'] = [
+        'slot.render',
+        'parts.passthrough',
+    ],
+) =>
+    unstable_defineUiLibrary({
+        id: `broken-${slotId.replace('.', '-')}`,
+        displayName: 'Deliberately broken fixture',
+        abi: 1,
+        level: 'primitive',
+        profile: 'broken/v1',
+        profileSlots: [slotId],
+        capabilities,
+        slots: { [slotId]: replacement },
+    });
 
 const failureIds = async (
     library: unstable_UiLibrary,
     options: Parameters<typeof runConformance>[1] = {},
-) => (await runConformance(library, { document, axe: false, ...options })).checks
-    .filter((check) => check.status === 'failed')
-    .map((check) => check.id);
+) =>
+    (await runConformance(library, { document, axe: false, ...options })).checks
+        .filter((check) => check.status === 'failed')
+        .map((check) => check.id);
 
 describe('when detecting planted adapter defects', () => {
     it('should report a dropped ref on the exact element contract', async () => {
         const original = declaration('common.button');
-        const Original = original.render as unknown as ComponentType<Record<string, unknown>>;
+        // SAFETY: The planted wrapper deliberately erases the known slot props to drop only ref.
+        const Original = original.render as unknown as ComponentType<
+            Record<string, unknown>
+        >;
         const DropRef = (props: Record<string, unknown>) => {
             const { ref: _ref, ...rest } = props;
             return createElement(Original, rest);
         };
-        const library = oneSlot('common.button', { ...original, render: DropRef });
+        // SAFETY: This deliberate defect preserves the slot signature while removing ref forwarding.
+        const dropRefRender = DropRef as typeof original.render;
+        const library = oneSlot('common.button', { ...original, render: dropRefRender });
 
-        (await failureIds(library)).should.include('contract.common.button.elementRef');
+        expect(await failureIds(library)).to.include('contract.common.button.elementRef');
     });
 
     it('should report an omitted documented part', async () => {
@@ -60,38 +67,52 @@ describe('when detecting planted adapter defects', () => {
             render: () => createElement('article', null, 'No stable part'),
         });
 
-        (await failureIds(library)).should.include('contract.common.surface.parts');
+        expect(await failureIds(library)).to.include('contract.common.surface.parts');
     });
 
     it('should report an over-declared capability', async () => {
-        const library = oneSlot(
-            'common.surface',
-            declaration('common.surface'),
-            ['slot.render', 'parts.passthrough', 'paging.server'],
-        );
+        const library = oneSlot('common.surface', declaration('common.surface'), [
+            'slot.render',
+            'parts.passthrough',
+            'paging.server',
+        ]);
 
-        (await failureIds(library)).should.include('manifest.noOverDeclaration');
+        expect(await failureIds(library)).to.include('manifest.noOverDeclaration');
     });
 
     it('should reject an undeclared skip', async () => {
         const library = oneSlot('common.button', declaration('common.button'));
 
-        (await failureIds(library, {
-            skips: [{ checkId: 'contract.common.button', slotId: 'common.button' }],
-        })).should.include('skip.contract.common.button.undeclared');
+        expect(
+            await failureIds(library, {
+                skips: [{ checkId: 'contract.common.button', slotId: 'common.button' }],
+            }),
+        ).to.include('skip.contract.common.button.undeclared');
     });
 
     it('should report duplicate behavior ownership', async () => {
         const original = declaration('dialogs.dialog');
-        const Original = original.render as unknown as ComponentType<Record<string, unknown>>;
-        const DuplicateOwner = (props: Record<string, unknown>) => createElement(
-            Fragment,
-            null,
-            createElement(Original, props),
-            createElement('section', { role: 'dialog', 'aria-label': 'Duplicate owner' }),
-        );
-        const library = oneSlot('dialogs.dialog', { ...original, render: DuplicateOwner });
+        // SAFETY: The planted wrapper deliberately erases the known slot props to duplicate ownership.
+        const Original = original.render as unknown as ComponentType<
+            Record<string, unknown>
+        >;
+        const DuplicateOwner = (props: Record<string, unknown>) =>
+            createElement(
+                Fragment,
+                null,
+                createElement(Original, props),
+                createElement('section', {
+                    role: 'dialog',
+                    'aria-label': 'Duplicate owner',
+                }),
+            );
+        // SAFETY: This deliberate defect preserves the slot signature while duplicating ownership.
+        const duplicateOwnerRender = DuplicateOwner as typeof original.render;
+        const library = oneSlot('dialogs.dialog', {
+            ...original,
+            render: duplicateOwnerRender,
+        });
 
-        (await failureIds(library)).should.include('ownership.dialogs.dialog');
+        expect(await failureIds(library)).to.include('ownership.dialogs.dialog');
     });
 });
diff --git a/Conformance/for_conformance/when_running_the_builtin_manifest.tsx b/Conformance/for_conformance/when_running_the_builtin_manifest.tsx
index 02c8fc91..17e5d8bb 100644
--- a/Conformance/for_conformance/when_running_the_builtin_manifest.tsx
+++ b/Conformance/for_conformance/when_running_the_builtin_manifest.tsx
@@ -1,11 +1,13 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
+import { expect } from 'chai';
 import sourcePackage from '../../Source/package.json';
 import adapterSchema from '../../Source/schemas/ui-adapter.schema.json';
 import { unstable_cratisBuiltIn } from '@cratis/components/renderer/builtin';
 import { describe, it } from 'vitest';
 import { runConformance } from '../src/index.js';
+import { validateMetadata } from '../src/internal/metadata.js';
 
 describe('when running the built-in renderer manifest', () => {
     it('should pass every bounded check with zero skips', async () => {
@@ -15,25 +17,47 @@ describe('when running the built-in renderer manifest', () => {
         });
         const failures = report.checks
             .filter((check) => check.status === 'failed')
-            .map((check) => `${check.id}: ${check.message}`);
+            .map(
+                (check) =>
+                    `${check.id}: ${check.message} ${JSON.stringify(check.evidence ?? {})}`,
+            );
 
-        failures.should.deep.equal([]);
-        report.passed.should.equal(true);
-        report.summary.total.should.equal(134);
-        report.summary.passed.should.equal(134);
-        report.summary.skipped.should.equal(0);
-        Object.keys(unstable_cratisBuiltIn.slots).should.have.lengthOf(14);
+        expect(failures).to.deep.equal([]);
+        expect(report.passed).to.equal(true);
+        expect(report.summary.total).to.equal(148);
+        expect(report.summary.passed).to.equal(148);
+        expect(report.summary.skipped).to.equal(0);
+        expect(Object.keys(unstable_cratisBuiltIn.slots)).to.have.lengthOf(14);
     }, 30_000);
 
     it('should validate the actual static fixture against the published schema identity', () => {
-        adapterSchema.$id.should.equal('https://cratis.io/schemas/ui-adapter.schema.json');
-        adapterSchema.required.should.include.members([
+        expect(adapterSchema.$id).to.equal(
+            'https://cratis.io/schemas/ui-adapter.schema.json',
+        );
+        expect(adapterSchema.required).to.include.members([
             'slots',
             'modes',
             'capabilities',
             'ssr',
             'a11y',
         ]);
-        sourcePackage.cratis.slots.should.have.lengthOf(14);
+        expect(sourcePackage.cratis.slots).to.have.lengthOf(14);
+        expect(validateMetadata(sourcePackage.cratis)).to.deep.equal([]);
+    });
+
+    it('should reject metadata that violates nested public schema constraints', () => {
+        const invalidFixtures = [
+            { ...sourcePackage.cratis, displayName: '' },
+            { ...sourcePackage.cratis, export: 'not-an-export' },
+            { ...sourcePackage.cratis, ssr: 'unknown' },
+            {
+                ...sourcePackage.cratis,
+                a11y: { ...sourcePackage.cratis.a11y, undocumented: true },
+            },
+        ];
+
+        for (const fixture of invalidFixtures) {
+            expect(validateMetadata(fixture)).not.to.deep.equal([]);
+        }
     });
 });
diff --git a/Conformance/for_react_normalization/when_normalizing_react_boundaries.tsx b/Conformance/for_react_normalization/when_normalizing_react_boundaries.tsx
index e8dda3e2..95a5b51e 100644
--- a/Conformance/for_react_normalization/when_normalizing_react_boundaries.tsx
+++ b/Conformance/for_react_normalization/when_normalizing_react_boundaries.tsx
@@ -1,6 +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 { expect } from 'chai';
 import { StrictMode, act, createElement, createRef, useEffect } from 'react';
 import { createRoot } from 'react-dom/client';
 import { describe, it } from 'vitest';
@@ -22,36 +23,47 @@ describe('when normalizing React boundaries', () => {
         });
         const style = normalizeStyle({ color: 'red', '--sample-color': 'blue' });
 
-        props.should.deep.equal({
+        expect(props).to.deep.equal({
             className: 'sample',
             htmlFor: 'field',
             strokeWidth: 2,
             fillRule: 'evenodd',
         });
-        style.should.deep.equal({ color: 'red', '--sample-color': 'blue' });
+        expect(style).to.deep.equal({ color: 'red', '--sample-color': 'blue' });
     });
 
     it('should merge refs and preserve handler order and preventDefault', () => {
         const objectRef = createRef<HTMLElement>();
         let callbackValue: HTMLElement | null = null;
         const target = document.createElement('button');
-        const merged = mergeRefs(objectRef, (value) => { callbackValue = value; });
+        const merged = mergeRefs(objectRef, (value) => {
+            callbackValue = value;
+        });
         if (typeof merged === 'function') merged(target);
         const order: string[] = [];
         composeHandlers<Event>(
-            (event) => { order.push('pt'); event.preventDefault(); },
+            (event) => {
+                order.push('pt');
+                event.preventDefault();
+            },
             () => order.push('public'),
         )(new Event('click', { cancelable: true }));
 
-        (objectRef.current === target).should.equal(true);
-        (callbackValue === target).should.equal(true);
-        order.should.deep.equal(['pt']);
+        expect(objectRef.current === target).to.equal(true);
+        expect(callbackValue === target).to.equal(true);
+        expect(order).to.deep.equal(['pt']);
     });
 
     it('should clean listeners exactly once across StrictMode replay', async () => {
         let calls = 0;
         const Listener = () => {
-            useEffect(() => listen(document, 'click', () => { calls += 1; }), []);
+            useEffect(
+                () =>
+                    listen(document, 'click', () => {
+                        calls += 1;
+                    }),
+                [],
+            );
             return null;
         };
         const container = document.createElement('div');
@@ -61,10 +73,10 @@ describe('when normalizing React boundaries', () => {
             root.render(createElement(StrictMode, null, createElement(Listener)));
         });
         document.dispatchEvent(new Event('click'));
-        calls.should.equal(1);
+        expect(calls).to.equal(1);
         await act(async () => root.unmount());
         document.dispatchEvent(new Event('click'));
-        calls.should.equal(1);
+        expect(calls).to.equal(1);
         container.remove();
     });
 });
diff --git a/Conformance/src/internal/metadata.ts b/Conformance/src/internal/metadata.ts
index bb8cf382..93703d80 100644
--- a/Conformance/src/internal/metadata.ts
+++ b/Conformance/src/internal/metadata.ts
@@ -1,61 +1,186 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
+import adapterSchema from '@cratis/components/schemas/ui-adapter.schema.json' with { type: 'json' };
 import type { unstable_SlotId, unstable_UiLibrary } from '@cratis/components/renderer';
 import type { AdapterPackageMetadata } from '../AdapterPackageMetadata.js';
 
-const capabilityValues = new Set([
-    'slot.render',
-    'parts.passthrough',
-    'focus.trap',
-    'focus.restore',
-    'overlay.portal',
-    'collection.virtualize',
-    'selection.multi',
-    'datetime.i18n',
-    'form.validationMessage',
-    'theme.tokens',
-    'ssr.staticRender',
-    'rtl',
-    'forcedColors',
-    'motion.reduced',
-    'machine.binding',
-    'paging.server',
-]);
+interface JsonSchemaRule {
+    readonly $ref?: string;
+    readonly type?: string;
+    readonly const?: unknown;
+    readonly enum?: readonly unknown[];
+    readonly minLength?: number;
+    readonly maxLength?: number;
+    readonly pattern?: string;
+    readonly minItems?: number;
+    readonly maxItems?: number;
+    readonly uniqueItems?: boolean;
+    readonly items?: JsonSchemaRule;
+    readonly minProperties?: number;
+    readonly maxProperties?: number;
+    readonly required?: readonly string[];
+    readonly propertyNames?: JsonSchemaRule;
+    readonly properties?: Readonly<Record<string, JsonSchemaRule>>;
+    readonly additionalProperties?: boolean | JsonSchemaRule;
+    readonly allOf?: readonly JsonSchemaRule[];
+    readonly if?: JsonSchemaRule;
+    readonly then?: JsonSchemaRule;
+    readonly oneOf?: readonly JsonSchemaRule[];
+}
+
+const schema: JsonSchemaRule = adapterSchema;
 
 const isRecord = (value: unknown): value is Readonly<Record<string, unknown>> =>
     typeof value === 'object' && value !== null && !Array.isArray(value);
 
-const uniqueStrings = (value: unknown): value is readonly string[] =>
-    Array.isArray(value) &&
-    value.every((entry) => typeof entry === 'string') &&
-    new Set(value).size === value.length;
+const valueType = (value: unknown) => {
+    if (Array.isArray(value)) return 'array';
+    if (value === null) return 'null';
+    if (typeof value === 'number' && Number.isInteger(value)) return 'integer';
+    return typeof value === 'object' ? 'object' : typeof value;
+};
+
+const sameJson = (left: unknown, right: unknown) =>
+    JSON.stringify(left) === JSON.stringify(right);
+
+const resolveReference = (reference: string): JsonSchemaRule => {
+    if (!reference.startsWith('#/')) {
+        throw new Error(`Unsupported schema reference '${reference}'.`);
+    }
+    let current: unknown = schema;
+    for (const encodedSegment of reference.slice(2).split('/')) {
+        const segment = encodedSegment.replaceAll('~1', '/').replaceAll('~0', '~');
+        if (!isRecord(current) || !(segment in current)) {
+            throw new Error(`Unresolved schema reference '${reference}'.`);
+        }
+        current = current[segment];
+    }
+    if (!isRecord(current)) {
+        throw new Error(`Schema reference '${reference}' does not resolve to a rule.`);
+    }
+    return current;
+};
+
+const validateAgainstSchema = (
+    candidate: unknown,
+    rule: JsonSchemaRule,
+    location = '$',
+): readonly string[] => {
+    if (rule.$ref)
+        return validateAgainstSchema(candidate, resolveReference(rule.$ref), location);
 
-/** Validates the package metadata subset exercised by the public schema fixture. */
-export const validateMetadata = (value: unknown): readonly string[] => {
-    if (!isRecord(value)) return ['metadata must be an object'];
     const problems: string[] = [];
-    const required = [
-        'kind', 'id', 'displayName', 'abi', 'level', 'profile', 'category', 'entry',
-        'export', 'slots', 'modes', 'capabilities', 'ssr', 'a11y', 'license', 'upstream',
-    ];
-    for (const key of required) if (!(key in value)) problems.push(`missing '${key}'`);
-    const allowed = new Set(required);
-    for (const key of Object.keys(value)) if (!allowed.has(key)) problems.push(`unknown '${key}'`);
-    if (value.kind !== 'ui-adapter') problems.push("kind must be 'ui-adapter'");
-    if (typeof value.id !== 'string' || !/^[a-z][a-z0-9]*(?:[._-][a-z0-9]+)*$/u.test(value.id)) problems.push('id is invalid');
-    if (typeof value.abi !== 'string' || !/^\^[1-9][0-9]{0,2}$/u.test(value.abi)) problems.push('abi is invalid');
-    if (typeof value.profile !== 'string' || !/^[a-z][a-z0-9.-]*\/v[1-9][0-9]{0,2}$/u.test(value.profile)) problems.push('profile is invalid');
-    if (typeof value.entry !== 'string' || !/^\.\/(?!.*(?:^|\/)\.\.(?:\/|$))\S+$/u.test(value.entry)) problems.push('entry is invalid');
-    if (!uniqueStrings(value.slots)) problems.push('slots must contain unique strings');
-    if (!uniqueStrings(value.capabilities) || !(value.capabilities ?? []).every((entry: string) => capabilityValues.has(entry))) problems.push('capabilities are invalid');
-    if (!isRecord(value.modes) || Object.values(value.modes).some((mode) => mode !== 'presentation' && mode !== 'atomic')) problems.push('modes are invalid');
-    if (!isRecord(value.upstream) || Object.keys(value.upstream).length === 0 || Object.values(value.upstream).some((range) => typeof range !== 'string' || !(/^[~^][0-9]+\.[0-9]+\.[0-9]+(?:-[0-9A-Za-z.-]+)?$/u.test(range) || /^>=?[0-9]+(?:\.[0-9]+){0,2}(?:-[0-9A-Za-z.-]+)? <[0-9]+(?:\.[0-9]+){0,2}(?:-[0-9A-Za-z.-]+)?$/u.test(range) || /^[0-9]+\.[0-9]+\.[0-9]+(?:-[0-9A-Za-z.-]+)?$/u.test(range)))) problems.push('upstream ranges must be bounded');
-    if (!isRecord(value.license) || typeof value.license.spdx !== 'string' || typeof value.license.requiresKey !== 'boolean' || (value.license.requiresKey === true && typeof value.license.keyEnv !== 'string')) problems.push('license is invalid');
-    if (!isRecord(value.a11y) || typeof value.a11y.evidence !== 'string') problems.push('a11y evidence is invalid');
+    const add = (message: string) => problems.push(`${location}: ${message}`);
+    if (rule.type && valueType(candidate) !== rule.type) {
+        add(`expected ${rule.type}, got ${valueType(candidate)}`);
+        return problems;
+    }
+    if ('const' in rule && !sameJson(candidate, rule.const)) {
+        add(`expected ${JSON.stringify(rule.const)}`);
+    }
+    if (rule.enum && !rule.enum.some((value) => sameJson(value, candidate))) {
+        add('value is outside the declared enum');
+    }
+    if (typeof candidate === 'string') {
+        if (rule.minLength !== undefined && candidate.length < rule.minLength) {
+            add(`must have at least ${rule.minLength} characters`);
+        }
+        if (rule.maxLength !== undefined && candidate.length > rule.maxLength) {
+            add(`must have no more than ${rule.maxLength} characters`);
+        }
+        if (rule.pattern && !new RegExp(rule.pattern, 'u').test(candidate)) {
+            add(`does not match ${rule.pattern}`);
+        }
+    }
+    if (Array.isArray(candidate)) {
+        if (rule.minItems !== undefined && candidate.length < rule.minItems) {
+            add(`must contain at least ${rule.minItems} items`);
+        }
+        if (rule.maxItems !== undefined && candidate.length > rule.maxItems) {
+            add(`must contain no more than ${rule.maxItems} items`);
+        }
+        if (
+            rule.uniqueItems &&
+            new Set(candidate.map((item) => JSON.stringify(item))).size !==
+                candidate.length
+        ) {
+            add('items must be unique');
+        }
+        if (rule.items) {
+            candidate.forEach((item, index) => {
+                problems.push(
+                    ...validateAgainstSchema(item, rule.items!, `${location}[${index}]`),
+                );
+            });
+        }
+    }
+    if (isRecord(candidate)) {
+        const keys = Object.keys(candidate);
+        if (rule.minProperties !== undefined && keys.length < rule.minProperties) {
+            add(`must contain at least ${rule.minProperties} properties`);
+        }
+        if (rule.maxProperties !== undefined && keys.length > rule.maxProperties) {
+            add(`must contain no more than ${rule.maxProperties} properties`);
+        }
+        for (const required of rule.required ?? []) {
+            if (!(required in candidate)) add(`missing required property '${required}'`);
+        }
+        for (const key of keys) {
+            if (rule.propertyNames) {
+                problems.push(
+                    ...validateAgainstSchema(
+                        key,
+                        rule.propertyNames,
+                        `${location}.${key} (property name)`,
+                    ),
+                );
+            }
+            const propertyRule = rule.properties?.[key];
+            if (propertyRule) {
+                problems.push(
+                    ...validateAgainstSchema(
+                        candidate[key],
+                        propertyRule,
+                        `${location}.${key}`,
+                    ),
+                );
+            } else if (rule.additionalProperties === false) {
+                add(`unknown property '${key}'`);
+            } else if (isRecord(rule.additionalProperties)) {
+                problems.push(
+                    ...validateAgainstSchema(
+                        candidate[key],
+                        rule.additionalProperties,
+                        `${location}.${key}`,
+                    ),
+                );
+            }
+        }
+    }
+    for (const nested of rule.allOf ?? []) {
+        problems.push(...validateAgainstSchema(candidate, nested, location));
+    }
+    if (
+        rule.if &&
+        validateAgainstSchema(candidate, rule.if, location).length === 0 &&
+        rule.then
+    ) {
+        problems.push(...validateAgainstSchema(candidate, rule.then, location));
+    }
+    if (rule.oneOf) {
+        const matches = rule.oneOf.filter(
+            (option) => validateAgainstSchema(candidate, option, location).length === 0,
+        ).length;
+        if (matches !== 1) add(`must match exactly one alternative, matched ${matches}`);
+    }
     return problems;
 };
 
+/** Validates package metadata against the actual published adapter schema. */
+export const validateMetadata = (value: unknown): readonly string[] =>
+    validateAgainstSchema(value, schema);
+
 /** Compares static package metadata to the immutable runtime manifest. */
 export const compareMetadata = (
     metadata: AdapterPackageMetadata | Readonly<Record<string, unknown>>,
@@ -63,30 +188,49 @@ export const compareMetadata = (
 ): readonly string[] => {
     const problems: string[] = [];
     if (metadata.id !== library.id) problems.push('id differs from runtime manifest');
-    if (metadata.displayName !== library.displayName) problems.push('displayName differs from runtime manifest');
-    if (metadata.abi !== `^${library.abi}`) problems.push('abi differs from runtime manifest');
-    if (metadata.level !== library.level) problems.push('level differs from runtime manifest');
-    if (metadata.profile !== library.profile) problems.push('profile differs from runtime manifest');
+    if (metadata.displayName !== library.displayName)
+        problems.push('displayName differs from runtime manifest');
+    if (metadata.abi !== `^${library.abi}`)
+        problems.push('abi differs from runtime manifest');
+    if (metadata.level !== library.level)
+        problems.push('level differs from runtime manifest');
+    if (metadata.profile !== library.profile)
+        problems.push('profile differs from runtime manifest');
     const staticSlots = Array.isArray(metadata.slots) ? [...metadata.slots].sort() : [];
     const runtimeSlots = [...(library.profileSlots ?? Object.keys(library.slots))].sort();
-    if (JSON.stringify(staticSlots) !== JSON.stringify(runtimeSlots)) problems.push('slots differ from runtime profileSlots');
-    const staticCapabilities = Array.isArray(metadata.capabilities) ? [...metadata.capabilities].sort() : [];
-    if (JSON.stringify(staticCapabilities) !== JSON.stringify([...library.capabilities].sort())) problems.push('capabilities differ from runtime manifest');
+    if (JSON.stringify(staticSlots) !== JSON.stringify(runtimeSlots))
+        problems.push('slots differ from runtime profileSlots');
+    const staticCapabilities = Array.isArray(metadata.capabilities)
+        ? [...metadata.capabilities].sort()
+        : [];
+    if (
+        JSON.stringify(staticCapabilities) !==
+        JSON.stringify([...library.capabilities].sort())
+    )
+        problems.push('capabilities differ from runtime manifest');
     if (isRecord(metadata.modes)) {
         for (const slotId of runtimeSlots) {
-            if (metadata.modes[slotId] !== library.slots[slotId as unstable_SlotId]?.mode) problems.push(`mode differs for '${slotId}'`);
+            if (metadata.modes[slotId] !== library.slots[slotId as unstable_SlotId]?.mode)
+                problems.push(`mode differs for '${slotId}'`);
         }
     }
     return problems;
 };
 
 /** Rejects capability claims that this bounded harness cannot support with the declared slots. */
-export const overDeclaredCapabilities = (library: unstable_UiLibrary): readonly string[] => {
+export const overDeclaredCapabilities = (
+    library: unstable_UiLibrary,
+): readonly string[] => {
     const slots = new Set(library.profileSlots ?? Object.keys(library.slots));
     const requires: Readonly<Record<string, readonly string[]>> = {
         'focus.trap': ['dialogs.dialog'],
         'focus.restore': ['dialogs.dialog'],
-        'overlay.portal': ['common.tooltip', 'dropdown.select', 'dialogs.dialog', 'display.datePicker'],
+        'overlay.portal': [
+            'common.tooltip',
+            'dropdown.select',
+            'dialogs.dialog',
+            'display.datePicker',
+        ],
         'selection.multi': ['dropdown.select'],
         'datetime.i18n': ['display.datePicker'],
         'form.validationMessage': ['common.textInput', 'common.textArea'],
@@ -94,13 +238,20 @@ export const overDeclaredCapabilities = (library: unstable_UiLibrary): readonly
     const problems: string[] = [];
     for (const capability of library.capabilities) {
         const required = requires[capability];
-        if (required && !required.some((slot) => slots.has(slot))) problems.push(`${capability} has no supporting slot`);
-        if (capability === 'collection.virtualize' || capability === 'machine.binding' || capability === 'paging.server') problems.push(`${capability} has no evidence family in this 14-slot harness`);
+        if (required && !required.some((slot) => slots.has(slot)))
+            problems.push(`${capability} has no supporting slot`);
+        if (
+            capability === 'collection.virtualize' ||
+            capability === 'machine.binding' ||
+            capability === 'paging.server'
+        )
+            problems.push(`${capability} has no evidence family in this 14-slot harness`);
     }
     if (library.capabilities.includes('slot.render')) {
         for (const slot of slots) {
             const declaration = library.slots[slot as unstable_SlotId];
-            if (!declaration?.render || declaration.fidelity === 'unsupported') problems.push(`slot.render over-declared for '${slot}'`);
+            if (!declaration?.render || declaration.fidelity === 'unsupported')
+                problems.push(`slot.render over-declared for '${slot}'`);
         }
     }
     return problems;
diff --git a/Conformance/src/internal/slotProfiles.tsx b/Conformance/src/internal/slotProfiles.tsx
index a0b75bd3..1da79650 100644
--- a/Conformance/src/internal/slotProfiles.tsx
+++ b/Conformance/src/internal/slotProfiles.tsx
@@ -18,8 +18,10 @@ import type { DialogProps } from '@cratis/components/Dialogs';
 import type { DropdownProps } from '@cratis/components/Dropdown';
 import type { SlotProfile } from './SlotProfile.js';
 
-const recordProps = <T extends object>(props: T) =>
-    props as unknown as Readonly<Record<string, unknown>>;
+const recordProps = <T extends object>(props: T) => {
+    // SAFETY: Slot fixtures preserve the original typed object; the runner reads keys without mutation.
+    return props as unknown as Readonly<Record<string, unknown>>;
+};
 
 const pause = (milliseconds: number) =>
     new Promise<void>((resolve) => globalThis.setTimeout(resolve, milliseconds));
@@ -34,68 +36,171 @@ export const createSlotProfiles = (
     evidence: Map<string, Readonly<Record<string, unknown>>>,
 ): readonly SlotProfile[] => [
     {
-        slotId: 'common.button', partsKey: 'Button', ptKeys: ['root', 'spinner', 'icon', 'label'],
-        nativeSelector: 'button', nativeTag: 'BUTTON', refCapable: true,
+        slotId: 'common.button',
+        partsKey: 'Button',
+        ptKeys: ['root', 'spinner', 'icon', 'label'],
+        nativeSelector: 'button',
+        nativeTag: 'BUTTON',
+        refCapable: true,
         ownershipSelectors: ['button'],
         createProps: () => {
             let callbacks = 0;
-            const props = { label: 'Save', icon: createElement('span', null, '+'), type: 'submit', onClick: () => { callbacks += 1; evidence.set('common.button', { callbacks }); } } satisfies ButtonProps;
+            const props = {
+                label: 'Save',
+                icon: createElement('span', null, '+'),
+                type: 'submit',
+                onClick: () => {
+                    callbacks += 1;
+                    evidence.set('common.button', { callbacks });
+                },
+            } satisfies ButtonProps;
             return recordProps(props);
         },
-        createStateProps: () => recordProps({ label: 'Saving', loading: true, disabled: true } satisfies ButtonProps),
-        createPartVariants: () => [recordProps({ label: 'Saving', loading: true } satisfies ButtonProps)],
-        exercise: async (_document, container) => { click(container, 'button'); return evidence.get('common.button') ?? { callbacks: 0 }; },
+        createStateProps: () =>
+            recordProps({
+                label: 'Saving',
+                loading: true,
+                disabled: true,
+            } satisfies ButtonProps),
+        createPartVariants: () => [
+            recordProps({ label: 'Saving', loading: true } satisfies ButtonProps),
+        ],
+        exercise: async (_document, container) => {
+            click(container, 'button');
+            return evidence.get('common.button') ?? { callbacks: 0 };
+        },
     },
     {
-        slotId: 'common.iconButton', partsKey: 'IconButton', ptKeys: ['root', 'spinner', 'icon', 'label'],
-        nativeSelector: 'button', nativeTag: 'BUTTON', refCapable: true,
+        slotId: 'common.iconButton',
+        partsKey: 'IconButton',
+        ptKeys: ['root', 'spinner', 'icon', 'label'],
+        nativeSelector: 'button',
+        nativeTag: 'BUTTON',
+        refCapable: true,
         ownershipSelectors: ['button'],
         createProps: () => {
             let callbacks = 0;
-            const props = { icon: createElement('span', null, '+'), 'aria-label': 'Add item', onClick: () => { callbacks += 1; evidence.set('common.iconButton', { callbacks }); } } satisfies IconButtonProps;
+            const props = {
+                icon: createElement('span', null, '+'),
+                'aria-label': 'Add item',
+                onClick: () => {
+                    callbacks += 1;
+                    evidence.set('common.iconButton', { callbacks });
+                },
+            } satisfies IconButtonProps;
             return recordProps(props);
         },
-        createStateProps: () => recordProps({ icon: createElement('span', null, '+'), 'aria-label': 'Loading', loading: true } satisfies IconButtonProps),
-        createPartVariants: () => [recordProps({ icon: createElement('span', null, '+'), 'aria-label': 'Loading', loading: true } satisfies IconButtonProps)],
+        createStateProps: () =>
+            recordProps({
+                icon: createElement('span', null, '+'),
+                'aria-label': 'Loading',
+                loading: true,
+            } satisfies IconButtonProps),
+        createPartVariants: () => [
+            recordProps({
+                icon: createElement('span', null, '+'),
+                'aria-label': 'Loading',
+                loading: true,
+            } satisfies IconButtonProps),
+        ],
         conditionallyAbsentParts: ['label'],
-        exercise: async (_document, container) => { click(container, 'button'); return evidence.get('common.iconButton') ?? { callbacks: 0 }; },
+        exercise: async (_document, container) => {
+            click(container, 'button');
+            return evidence.get('common.iconButton') ?? { callbacks: 0 };
+        },
     },
     {
-        slotId: 'common.textInput', partsKey: 'TextInput', ptKeys: ['root'],
-        nativeSelector: 'input[type="text"]', nativeTag: 'INPUT', refCapable: true,
+        slotId: 'common.textInput',
+        partsKey: 'TextInput',
+        ptKeys: ['root'],
+        nativeSelector: 'input[type="text"]',
+        nativeTag: 'INPUT',
+        refCapable: true,
         ownershipSelectors: ['input[type="text"]'],
         createProps: () => {
             let callbacks = 0;
-            const props = { name: 'sample', defaultValue: 'before', 'aria-label': 'Sample text', onChange: (value, meta) => { callbacks += 1; evidence.set('common.textInput', { callbacks, value, source: meta?.source, nativeEvent: meta?.nativeEvent instanceof Event }); } } satisfies TextInputProps;
+            const props = {
+                name: 'sample',
+                defaultValue: 'before',
+                'aria-label': 'Sample text',
+                onChange: (value, meta) => {
+                    callbacks += 1;
+                    evidence.set('common.textInput', {
+                        callbacks,
+                        value,
+                        source: meta?.source,
+                        nativeEvent: meta?.nativeEvent instanceof Event,
+                    });
+                },
+            } satisfies TextInputProps;
             return recordProps(props);
         },
-        createStateProps: () => recordProps({ defaultValue: 'state', disabled: true, invalid: true, readOnly: true } satisfies TextInputProps),
+        createStateProps: () =>
+            recordProps({
+                defaultValue: 'state',
+                disabled: true,
+                invalid: true,
+                readOnly: true,
+            } satisfies TextInputProps),
         exercise: async (_document, container) => {
             const input = container.querySelector<HTMLInputElement>('input[type="text"]');
             if (input) {
-                Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set?.call(input, 'after');
+                Object.getOwnPropertyDescriptor(
+                    HTMLInputElement.prototype,
+                    'value',
+                )?.set?.call(input, 'after');
                 input.dispatchEvent(new Event('input', { bubbles: true }));
             }
-            return evidence.get('common.textInput') ?? { callbacks: 0, value: input?.value };
+            return (
+                evidence.get('common.textInput') ?? { callbacks: 0, value: input?.value }
+            );
         },
     },
     {
-        slotId: 'common.textArea', partsKey: 'TextArea', ptKeys: ['root'],
-        nativeSelector: 'textarea', nativeTag: 'TEXTAREA', refCapable: true,
+        slotId: 'common.textArea',
+        partsKey: 'TextArea',
+        ptKeys: ['root'],
+        nativeSelector: 'textarea',
+        nativeTag: 'TEXTAREA',
+        refCapable: true,
         ownershipSelectors: ['textarea'],
         createProps: () => {
             let callbacks = 0;
-            const props = { name: 'notes', defaultValue: 'before', 'aria-label': 'Sample notes', onChange: (value, meta) => { callbacks += 1; evidence.set('common.textArea', { callbacks, value, source: meta?.source, nativeEvent: meta?.nativeEvent instanceof Event }); } } satisfies TextAreaProps;
+            const props = {
+                name: 'notes',
+                defaultValue: 'before',
+                'aria-label': 'Sample notes',
+                onChange: (value, meta) => {
+                    callbacks += 1;
+                    evidence.set('common.textArea', {
+                        callbacks,
+                        value,
+                        source: meta?.source,
+                        nativeEvent: meta?.nativeEvent instanceof Event,
+                    });
+                },
+            } satisfies TextAreaProps;
             return recordProps(props);
         },
-        createStateProps: () => recordProps({ defaultValue: 'state', disabled: true, invalid: true, readOnly: true } satisfies TextAreaProps),
+        createStateProps: () =>
+            recordProps({
+                defaultValue: 'state',
+                disabled: true,
+                invalid: true,
+                readOnly: true,
+            } satisfies TextAreaProps),
         exercise: async (_document, container) => {
             const input = container.querySelector<HTMLTextAreaElement>('textarea');
             if (input) {
-                Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, 'value')?.set?.call(input, 'after');
+                Object.getOwnPropertyDescriptor(
+                    HTMLTextAreaElement.prototype,
+                    'value',
+                )?.set?.call(input, 'after');
                 input.dispatchEvent(new Event('input', { bubbles: true }));
             }
-            return evidence.get('common.textArea') ?? { callbacks: 0, value: input?.value };
+            return (
+                evidence.get('common.textArea') ?? { callbacks: 0, value: input?.value }
+            );
         },
     },
     ...(['common.checkbox', 'common.switch'] as const).map((slotId): SlotProfile => {
@@ -103,109 +208,466 @@ export const createSlotProfiles = (
         return {
             slotId,
             partsKey: isSwitch ? 'Switch' : 'Checkbox',
-            ptKeys: isSwitch ? ['root', 'input', 'control', 'handle', 'label'] : ['root', 'input', 'box', 'indicator', 'label'],
+            ptKeys: isSwitch
+                ? ['root', 'input', 'control', 'handle', 'label']
+                : ['root', 'input', 'box', 'indicator', 'label'],
             nativeSelector: isSwitch ? 'input[role="switch"]' : 'input[type="checkbox"]',
-            nativeTag: 'INPUT', refCapable: true,
-            ownershipSelectors: [isSwitch ? 'input[role="switch"]' : 'input[type="checkbox"]'],
+            nativeTag: 'INPUT',
+            refCapable: true,
+            ownershipSelectors: [
+                isSwitch ? 'input[role="switch"]' : 'input[type="checkbox"]',
+            ],
             createProps: () => {
                 let callbacks = 0;
-                const onChange = (value: boolean, meta?: { source: string; nativeEvent?: Event }) => { callbacks += 1; evidence.set(slotId, { callbacks, value, source: meta?.source, nativeEvent: meta?.nativeEvent instanceof Event }); };
+                const onChange = (
+                    value: boolean,
+                    meta?: { source: string; nativeEvent?: Event },
+                ) => {
+                    callbacks += 1;
+                    evidence.set(slotId, {
+                        callbacks,
+                        value,
+                        source: meta?.source,
+                        nativeEvent: meta?.nativeEvent instanceof Event,
+                    });
+                };
                 return isSwitch
-                    ? recordProps({ label: 'Enabled', name: 'enabled', defaultChecked: false, onChange } satisfies SwitchProps)
-                    : recordProps({ label: 'Selected', name: 'selected', defaultChecked: false, onChange } satisfies CheckboxProps);
+                    ? recordProps({
+                          label: 'Enabled',
+                          name: 'enabled',
+                          defaultChecked: false,
+                          onChange,
+                      } satisfies SwitchProps)
+                    : recordProps({
+                          label: 'Selected',
+                          name: 'selected',
+                          defaultChecked: false,
+                          onChange,
+                      } satisfies CheckboxProps);
+            },
+            createStateProps: () =>
+                isSwitch
+                    ? recordProps({
+                          label: 'State',
+                          defaultChecked: true,
+                          disabled: true,
+                          invalid: true,
+                          readOnly: true,
+                      } satisfies SwitchProps)
+                    : recordProps({
+                          label: 'State',
+                          defaultChecked: true,
+                          disabled: true,
+                          invalid: true,
+                          readOnly: true,
+                      } satisfies CheckboxProps),
+            exercise: async (_document, container) => {
+                click(
+                    container,
+                    isSwitch ? 'input[role="switch"]' : 'input[type="checkbox"]',
+                );
+                return evidence.get(slotId) ?? { callbacks: 0 };
             },
-            createStateProps: () => isSwitch
-                ? recordProps({ label: 'State', defaultChecked: true, disabled: true, invalid: true, readOnly: true } satisfies SwitchProps)
-                : recordProps({ label: 'State', defaultChecked: true, disabled: true, invalid: true, readOnly: true } satisfies CheckboxProps),
-            exercise: async (_document, container) => { click(container, isSwitch ? 'input[role="switch"]' : 'input[type="checkbox"]'); return evidence.get(slotId) ?? { callbacks: 0 }; },
         };
     }),
     {
-        slotId: 'common.radio', partsKey: 'Radio', ptKeys: ['root', 'input', 'box', 'indicator', 'label'],
-        nativeSelector: 'input[type="radio"]', nativeTag: 'INPUT', refCapable: true,
+        slotId: 'common.radio',
+        partsKey: 'Radio',
+        ptKeys: ['root', 'input', 'box', 'indicator', 'label'],
+        nativeSelector: 'input[type="radio"]',
+        nativeTag: 'INPUT',
+        refCapable: true,
         ownershipSelectors: ['input[type="radio"]'],
         createProps: () => {
             let callbacks = 0;
-            const props = { label: 'Daily', name: 'frequency', value: 'daily', defaultChecked: false, onChange: (value, meta) => { callbacks += 1; evidence.set('common.radio', { callbacks, value, source: meta?.source, nativeEvent: meta?.nativeEvent instanceof Event }); } } satisfies RadioProps;
+            const props = {
+                label: 'Daily',
+                name: 'frequency',
+                value: 'daily',
+                defaultChecked: false,
+                onChange: (value, meta) => {
+                    callbacks += 1;
+                    evidence.set('common.radio', {
+                        callbacks,
+                        value,
+                        source: meta?.source,
+                        nativeEvent: meta?.nativeEvent instanceof Event,
+                    });
+                },
+            } satisfies RadioProps;
             return recordProps(props);
         },
-        createStateProps: () => recordProps({ label: 'Daily', name: 'frequency', value: 'daily', defaultChecked: true, disabled: true, invalid: true, readOnly: true } satisfies RadioProps),
-        exercise: async (_document, container) => { click(container, 'input[type="radio"]'); return evidence.get('common.radio') ?? { callbacks: 0 }; },
+        createStateProps: () =>
+            recordProps({
+                label: 'Daily',
+                name: 'frequency',
+                value: 'daily',
+                defaultChecked: true,
+                disabled: true,
+                invalid: true,
+                readOnly: true,
+            } satisfies RadioProps),
+        exercise: async (_document, container) => {
+            click(container, 'input[type="radio"]');
+            return evidence.get('common.radio') ?? { callbacks: 0 };
+        },
     },
     {
-        slotId: 'common.progress', partsKey: 'ProgressBar', ptKeys: [],
-        nativeSelector: '[role="progressbar"]', nativeTag: 'DIV', refCapable: false,
+        slotId: 'common.progress',
+        partsKey: 'ProgressBar',
+        ptKeys: [],
+        nativeSelector: '[role="progressbar"]',
+        nativeTag: 'DIV',
+        refCapable: false,
         ownershipSelectors: ['[role="progressbar"]'],
-        createProps: () => recordProps({ value: 42, 'aria-label': 'Progress' } satisfies ProgressBarProps),
-        createStateProps: () => recordProps({ value: 42, mode: 'indeterminate' } satisfies ProgressBarProps),
-        exercise: async (_document, container) => ({ valueNow: container.querySelector('[role="progressbar"]')?.getAttribute('aria-valuenow') }),
+        createProps: () =>
+            recordProps({
+                value: 42,
+                'aria-label': 'Progress',
+            } satisfies ProgressBarProps),
+        createStateProps: () =>
+            recordProps({ value: 42, mode: 'indeterminate' } satisfies ProgressBarProps),
+        exercise: async (_document, container) => ({
+            valueNow: container
+                .querySelector('[role="progressbar"]')
+                ?.getAttribute('aria-valuenow'),
+        }),
     },
     {
-        slotId: 'common.surface', partsKey: 'Surface', ptKeys: ['root'],
-        nativeSelector: 'article', nativeTag: 'ARTICLE', refCapable: true,
+        slotId: 'common.surface',
+        partsKey: 'Surface',
+        ptKeys: ['root'],
+        nativeSelector: 'article',
+        nativeTag: 'ARTICLE',
+        refCapable: true,
         ownershipSelectors: ['article'],
-        createProps: () => recordProps({ as: 'article', children: 'Content' } satisfies SurfaceProps),
-        exercise: async (_document, container) => ({ text: container.querySelector('article')?.textContent }),
+        createProps: () =>
+            recordProps({ as: 'article', children: 'Content' } satisfies SurfaceProps),
+        exercise: async (_document, container) => ({
+            text: container.querySelector('article')?.textContent,
+        }),
     },
     {
-        slotId: 'common.tooltip', partsKey: 'Tooltip', ptKeys: [],
-        nativeSelector: '[data-cratis-part="trigger"]', nativeTag: 'BUTTON', refCapable: false,
+        slotId: 'common.tooltip',
+        partsKey: 'Tooltip',
+        ptKeys: [],
+        nativeSelector: '[data-cratis-part="trigger"]',
+        nativeTag: 'BUTTON',
+        refCapable: false,
         ownershipSelectors: ['[data-cratis-part="trigger"]'],
-        createProps: () => recordProps({ content: 'Save changes', children: createElement('button', { type: 'button', className: 'sample-trigger' }, 'Save') } satisfies TooltipProps),
-        activate: async (_document, container) => { const trigger = container.querySelector<HTMLElement>('[data-cratis-part="trigger"]'); trigger?.focus(); trigger?.dispatchEvent(new FocusEvent('focusin', { bubbles: true })); await pause(1700); },
-        exercise: async (document) => ({ popupCount: document.querySelectorAll('[data-cratis-part="popup"]').length }),
+        createProps: () =>
+            recordProps({
+                content: 'Save changes',
+                children: createElement(
+                    'button',
+                    { type: 'button', className: 'sample-trigger' },
+                    'Save',
+                ),
+            } satisfies TooltipProps),
+        activate: async (_document, container) => {
+            const trigger = container.querySelector<HTMLElement>(
+                '[data-cratis-part="trigger"]',
+            );
+            trigger?.focus();
+            trigger?.dispatchEvent(new FocusEvent('focusin', { bubbles: true }));
+            await pause(1700);
+        },
+        exercise: async (document) => ({
+            popupCount: document.querySelectorAll('[data-cratis-part="popup"]').length,
+        }),
     },
     {
-        slotId: 'dropdown.select', partsKey: 'Dropdown', ptKeys: ['root', 'value', 'filter', 'trigger', 'clear', 'popover', 'listbox', 'option', 'multiple', 'indicator'],
-        nativeSelector: '[data-cratis-part="trigger"]', nativeTag: 'BUTTON', refCapable: false,
+        slotId: 'dropdown.select',
+        partsKey: 'Dropdown',
+        ptKeys: [
+            'root',
+            'value',
+            'filter',
+            'trigger',
+            'clear',
+            'popover',
+            'listbox',
+            'option',
+            'multiple',
+            'indicator',
+        ],
+        nativeSelector: '[data-cratis-part="trigger"]',
+        nativeTag: 'BUTTON',
+        refCapable: false,
         ownershipSelectors: ['[data-cratis-part="trigger"]'],
         createProps: () => {
             let callbacks = 0;
-            const props = { name: 'role', value: 'developer', filter: true, options: [{ label: 'Administrator', value: 'admin' }, { label: 'Developer', value: 'developer' }], optionLabel: 'label', optionValue: 'value', showClear: true, 'aria-label': 'Role', onChange: (value, meta) => { callbacks += 1; evidence.set('dropdown.select', { callbacks, value, source: meta?.source, nativeEvent: meta?.nativeEvent instanceof Event }); } } satisfies DropdownProps<string>;
+            const props = {
+                name: 'role',
+                value: null,
+                filter: true,
+                options: [
+                    { label: 'Developer', value: 'developer' },
+                    { label: 'Administrator', value: 'admin', disabled: true },
+                    { label: 'Viewer', value: 'viewer' },
+                ],
+                optionLabel: 'label',
+                optionValue: 'value',
+                showClear: true,
+                'aria-label': 'Role',
+                onChange: (value, meta) => {
+                    callbacks += 1;
+                    evidence.set('dropdown.select', {
+                        callbacks,
+                        value,
+                        source: meta?.source,
+                        nativeEvent: meta?.nativeEvent instanceof Event,
+                    });
+                },
+            } satisfies DropdownProps<string | null>;
             return recordProps(props);
         },
-        createStateProps: () => recordProps({ value: ['admin'], options: [{ label: 'Administrator', value: 'admin' }], optionLabel: 'label', optionValue: 'value', multiple: true, disabled: true, invalid: true, 'aria-label': 'Role' } satisfies DropdownProps<string[]>),
+        createStateProps: () =>
+            recordProps({
+                value: ['admin'],
+                options: [{ label: 'Administrator', value: 'admin' }],
+                optionLabel: 'label',
+                optionValue: 'value',
+                filter: true,
+                multiple: true,
+                showClear: true,
+                disabled: true,
+                invalid: true,
+                'aria-label': 'Role',
+            } satisfies DropdownProps<string[]>),
         createPartVariants: () => [
-            recordProps({ value: ['admin'], options: [{ label: 'Administrator', value: 'admin' }], optionLabel: 'label', optionValue: 'value', multiple: true, 'aria-label': 'Role' } satisfies DropdownProps<string[]>),
-            recordProps({ value: 'admin', options: [{ label: 'Administrator', value: 'admin' }], optionLabel: 'label', optionValue: 'value', 'aria-label': 'Role' } satisfies DropdownProps<string>),
+            recordProps({
+                value: ['admin'],
+                options: [{ label: 'Administrator', value: 'admin' }],
+                optionLabel: 'label',
+                optionValue: 'value',
+                multiple: true,
+                'aria-label': 'Role',
+            } satisfies DropdownProps<string[]>),
+            recordProps({
+                value: ['admin'],
+                options: [{ label: 'Administrator', value: 'admin' }],
+                optionLabel: 'label',
+                optionValue: 'value',
+                multiple: true,
+                disabled: true,
+                invalid: true,
+                'aria-label': 'Disabled role selection',
+            } satisfies DropdownProps<string[]>),
+            recordProps({
+                value: 'admin',
+                options: [{ label: 'Administrator', value: 'admin' }],
+                optionLabel: 'label',
+                optionValue: 'value',
+                showClear: true,
+                'aria-label': 'Role',
+            } satisfies DropdownProps<string>),
+            recordProps({
+                value: 'admin',
+                options: [{ label: 'Administrator', value: 'admin' }],
+                optionLabel: 'label',
+                optionValue: 'value',
+                showClear: true,
+                disabled: true,
+                invalid: true,
+                'aria-label': 'Role',
+            } satisfies DropdownProps<string>),
         ],
-        activate: async (_document, container) => { click(container, '[data-cratis-part="trigger"]'); await pause(50); },
-        exercise: async (document) => { const option = document.querySelector<HTMLElement>('[data-cratis-part="option"]'); option?.click(); await pause(0); return evidence.get('dropdown.select') ?? { callbacks: 0, optionCount: document.querySelectorAll('[data-cratis-part="option"]').length }; },
+        activate: async (_document, container) => {
+            click(container, '[data-cratis-part="trigger"]');
+            await pause(50);
+        },
+        exercise: async (document, container) => {
+            let option = Array.from(
+                document.querySelectorAll<HTMLElement>('[data-cratis-part="option"]'),
+            ).find((candidate) => candidate.textContent?.includes('Viewer'));
+            if (!option) {
+                click(container, '[data-cratis-part="trigger"]');
+                await pause(50);
+                option = Array.from(
+                    document.querySelectorAll<HTMLElement>('[data-cratis-part="option"]'),
+                ).find((candidate) => candidate.textContent?.includes('Viewer'));
+            }
+            if (option) {
+                for (const type of ['pointerdown', 'pointerup'] as const) {
+                    const event = new MouseEvent(type, {
+                        bubbles: true,
+                        cancelable: true,
+                        button: 0,
+                    });
+                    Object.defineProperty(event, 'pointerType', { value: 'mouse' });
+                    option.dispatchEvent(event);
+                }
+                option.click();
+            }
+            await pause(0);
+            return (
+                evidence.get('dropdown.select') ?? {
+                    callbacks: 0,
+                    optionCount: document.querySelectorAll('[data-cratis-part="option"]')
+                        .length,
+                }
+            );
+        },
     },
     {
-        slotId: 'dialogs.dialog', partsKey: 'Dialog', ptKeys: ['backdrop', 'positioner', 'root', 'header', 'title', 'close', 'content', 'footer', 'confirm', 'cancel'],
-        nativeSelector: '[role="dialog"]', nativeTag: 'SECTION', refCapable: false,
+        slotId: 'dialogs.dialog',
+        partsKey: 'Dialog',
+        ptKeys: [
+            'backdrop',
+            'positioner',
+            'root',
+            'header',
+            'title',
+            'close',
+            'content',
+            'footer',
+            'confirm',
+            'cancel',
+        ],
+        nativeSelector: '[role="dialog"]',
+        nativeTag: 'SECTION',
+        refCapable: false,
         ownershipSelectors: ['[role="dialog"]'],
         createProps: () => {
             let callbacks = 0;
-            const props = { title: 'Example dialog', children: 'Dialog content', buttons: 2, dismissable: true, onClose: () => { callbacks += 1; evidence.set('dialogs.dialog', { callbacks }); } } satisfies DialogProps;
+            const props = {
+                title: 'Example dialog',
+                children: 'Dialog content',
+                buttons: 2,
+                dismissable: true,
+                onClose: () => {
+                    callbacks += 1;
+                    evidence.set('dialogs.dialog', { callbacks });
+                },
+            } satisfies DialogProps;
             return recordProps(props);
         },
-        createStateProps: () => recordProps({ title: 'Busy dialog', children: 'Dialog content', buttons: 2, isBusy: true } satisfies DialogProps),
-        exercise: async (document) => { click(document, '[data-cratis-part="close"]'); await pause(0); return evidence.get('dialogs.dialog') ?? { callbacks: 0 }; },
+        createStateProps: () =>
+            recordProps({
+                title: 'Busy dialog',
+                children: 'Dialog content',
+                buttons: 2,
+                isBusy: true,
+            } satisfies DialogProps),
+        exercise: async (document) => {
+            click(document, '[data-cratis-part="close"]');
+            await pause(0);
+            return evidence.get('dialogs.dialog') ?? { callbacks: 0 };
+        },
     },
     {
-        slotId: 'display.datePicker', partsKey: 'DatePickerInput', ptKeys: ['root', 'group', 'input', 'segment', 'placeholder', 'trigger', 'popover', 'dialog', 'calendar', 'header', 'previous', 'heading', 'next', 'grid', 'cell', 'buttonBar', 'today', 'clear'],
-        nativeSelector: '[data-cratis-part="group"]', nativeTag: 'DIV', refCapable: false,
+        slotId: 'display.datePicker',
+        partsKey: 'DatePickerInput',
+        ptKeys: [
+            'root',
+            'group',
+            'input',
+            'segment',
+            'placeholder',
+            'trigger',
+            'popover',
+            'dialog',
+            'calendar',
+            'header',
+            'previous',
+            'heading',
+            'next',
+            'grid',
+            'cell',
+            'buttonBar',
+            'today',
+            'clear',
+        ],
+        nativeSelector: '[data-cratis-part="group"]',
+        nativeTag: 'DIV',
+        refCapable: false,
         ownershipSelectors: ['[data-cratis-part="group"]'],
         createProps: () => {
             let callbacks = 0;
-            const props = { value: null, showButtonBar: true, placeholder: 'Choose a date', 'aria-label': 'Delivery date', onChange: (value, meta) => { callbacks += 1; evidence.set('display.datePicker', { callbacks, value: value?.toISOString(), source: meta?.source, nativeEvent: meta?.nativeEvent instanceof Event }); } } satisfies DatePickerInputProps;
+            const props = {
+                value: null,
+                showButtonBar: true,
+                placeholder: 'Choose a date',
+                'aria-label': 'Delivery date',
+                onChange: (value, meta) => {
+                    callbacks += 1;
+                    evidence.set('display.datePicker', {
+                        callbacks,
+                        value: value?.toISOString(),
+                        source: meta?.source,
+                        nativeEvent: meta?.nativeEvent instanceof Event,
+                    });
+                },
+            } satisfies DatePickerInputProps;
             return recordProps(props);
         },
-        createStateProps: () => recordProps({ value: new Date(2024, 5, 15), disabled: true, invalid: true, readOnly: true, 'aria-label': 'Delivery date', onChange: () => undefined } satisfies DatePickerInputProps),
-        activate: async (_document, container) => { click(container, '[data-cratis-part="trigger"]'); await pause(50); },
-        exercise: async (document) => ({ cellCount: document.querySelectorAll('[data-cratis-part="cell"]').length }),
+        createStateProps: () =>
+            recordProps({
+                value: new Date(2024, 5, 15),
+                disabled: true,
+                invalid: true,
+                readOnly: true,
+                'aria-label': 'Delivery date',
+                onChange: () => undefined,
+            } satisfies DatePickerInputProps),
+        createPartVariants: () => [
+            recordProps({
+                value: new Date(2024, 5, 15),
+                showButtonBar: true,
+                'aria-label': 'Selected delivery date',
+                onChange: () => undefined,
+            } satisfies DatePickerInputProps),
+            recordProps({
+                value: new Date(2100, 0, 2),
+                minDate: new Date(2100, 0, 1),
+                showButtonBar: true,
+                'aria-label': 'Bounded delivery date',
+                onChange: () => undefined,
+            } satisfies DatePickerInputProps),
+        ],
+        activate: async (_document, container) => {
+            click(container, '[data-cratis-part="trigger"]');
+            await pause(50);
+        },
+        exercise: async (document) => {
+            click(document, '[data-cratis-part="today"]');
+            await pause(0);
+            return (
+                evidence.get('display.datePicker') ?? {
+                    callbacks: 0,
+                    cellCount: document.querySelectorAll('[data-cratis-part="cell"]')
+                        .length,
+                }
+            );
+        },
     },
     {
-        slotId: 'datatables.paginator', partsKey: 'TablePaginator', ptKeys: ['root', 'range', 'info', 'first', 'previous', 'next', 'last'],
-        nativeSelector: '[role="navigation"]', nativeTag: 'DIV', refCapable: false,
+        slotId: 'datatables.paginator',
+        partsKey: 'TablePaginator',
+        ptKeys: ['root', 'range', 'info', 'first', 'previous', 'next', 'last'],
+        nativeSelector: '[role="navigation"]',
+        nativeTag: 'DIV',
+        refCapable: false,
         ownershipSelectors: ['[role="navigation"]'],
         createProps: () => {
             let callbacks = 0;
-            const props = { page: 1, pageCount: 3, totalItems: 30, pageSize: 10, onPageChange: (page) => { callbacks += 1; evidence.set('datatables.paginator', { callbacks, page }); } } satisfies TablePaginatorProps;
+            const props = {
+                page: 1,
+                pageCount: 3,
+                totalItems: 30,
+                pageSize: 10,
+                onPageChange: (page) => {
+                    callbacks += 1;
+                    evidence.set('datatables.paginator', { callbacks, page });
+                },
+            } satisfies TablePaginatorProps;
             return recordProps(props);
         },
-        exercise: async (_document, container) => { click(container, '[aria-label="Next page"]'); return evidence.get('datatables.paginator') ?? { callbacks: 0 }; },
+        exercise: async (_document, container) => {
+            click(container, '[aria-label="Next page"]');
+            await pause(0);
+            return evidence.get('datatables.paginator') ?? { callbacks: 0 };
+        },
     },
 ];
diff --git a/Conformance/src/runConformance.tsx b/Conformance/src/runConformance.tsx
index 4cd91d4f..bd459f2c 100644
--- a/Conformance/src/runConformance.tsx
+++ b/Conformance/src/runConformance.tsx
@@ -53,15 +53,18 @@ interface MountedFixture {
 const limitations = Object.freeze([
     {
         id: 'automated-a11y-only',
-        message: 'axe evidence is automated DOM analysis, not manual assistive-technology or universal accessibility conformance.',
+        message:
+            'axe evidence is automated DOM analysis, not manual assistive-technology or universal accessibility conformance.',
     },
     {
         id: 'jsdom-not-browser-matrix',
-        message: 'The API exercises DOM, forms, hydration-shaped markup, direction, and media-query inputs; it does not replace the repository Storybook browser/axe gate or a browser matrix.',
+        message:
+            'The API exercises DOM, forms, hydration-shaped markup, direction, and media-query inputs; it does not replace the repository Storybook browser/axe gate or a browser matrix.',
     },
     {
         id: 'visual-modes-not-screenshots',
-        message: 'Reduced-motion and forced-colors results prove deterministic execution under those inputs, not visual contrast, animation, or high-contrast appearance.',
+        message:
+            'Reduced-motion and forced-colors results prove deterministic execution under those inputs, not visual contrast, animation, or high-contrast appearance.',
     },
 ]);
 
@@ -70,7 +73,10 @@ const renderComponent = (
     props: Readonly<Record<string, unknown>>,
     ref?: React.RefObject<Element | null>,
 ): ReactElement => {
-    const Component = declaration.render as unknown as ComponentType<Record<string, unknown>>;
+    // SAFETY: Slot profiles pair each declaration with props from the same public slot contract.
+    const Component = declaration.render as unknown as ComponentType<
+        Record<string, unknown>
+    >;
     return createElement(Component, ref ? { ...props, ref } : props);
 };
 
@@ -93,7 +99,11 @@ const mount = async (
     const root = createRoot(form);
     const ref = createRef<Element>();
     await act(async () => {
-        root.render(withProvider(renderComponent(declaration, props, refCapable ? ref : undefined)));
+        root.render(
+            withProvider(
+                renderComponent(declaration, props, refCapable ? ref : undefined),
+            ),
+        );
     });
     return { container, form, root, ref };
 };
@@ -106,6 +116,16 @@ const unmount = async (fixture: MountedFixture) => {
 const markerForPart = (part: string) =>
     part.replace(/[A-Z]/gu, (letter) => `-${letter.toLowerCase()}`);
 
+const collectRenderedStates = (root: ParentNode, observed: Set<string>) => {
+    for (const element of root.querySelectorAll<HTMLElement>('[data-cratis-part]')) {
+        const part = element.getAttribute('data-cratis-part');
+        if (!part) continue;
+        for (const state of cratisCanonicalPartStates) {
+            if (element.hasAttribute(`data-${state}`)) observed.add(`${part}.${state}`);
+        }
+    }
+};
+
 const passThrough = (profile: SlotProfile) =>
     Object.fromEntries(
         profile.ptKeys.map((part) => {
@@ -129,14 +149,15 @@ const addCheck = (
     message: string,
     slotId?: unstable_SlotId,
     evidence?: Readonly<Record<string, unknown>>,
-) => checks.push({
-    id,
-    family,
-    status: passed ? ConformanceStatus.Passed : ConformanceStatus.Failed,
-    slotId,
-    message,
-    evidence,
-});
+) =>
+    checks.push({
+        id,
+        family,
+        status: passed ? ConformanceStatus.Passed : ConformanceStatus.Failed,
+        slotId,
+        message,
+        evidence,
+    });
 
 const addError = (
     checks: ConformanceCheck[],
@@ -144,14 +165,15 @@ const addError = (
     id: string,
     error: unknown,
     slotId?: unstable_SlotId,
-) => addCheck(
-    checks,
-    family,
-    id,
-    false,
-    error instanceof Error ? error.message : String(error),
-    slotId,
-);
+) =>
+    addCheck(
+        checks,
+        family,
+        id,
+        false,
+        error instanceof Error ? error.message : String(error),
+        slotId,
+    );
 
 const skipRequested = (
     checks: ConformanceCheck[],
@@ -171,7 +193,8 @@ const skipRequested = (
         !library.capabilities.some(
             (capability) => capability === request.missingCapability,
         )
-    ) basis = 'missing-capability';
+    )
+        basis = 'missing-capability';
     if (!basis) {
         addCheck(
             checks,
@@ -249,30 +272,48 @@ const checkManifest = (
 };
 
 const checkNormalization = (checks: ConformanceCheck[], document: Document) => {
-    const normalized = normalizeReactProps({ class: 'sample', for: 'field', 'stroke-width': 2, 'fill-rule': 'evenodd' });
+    const normalized = normalizeReactProps({
+        class: 'sample',
+        for: 'field',
+        'stroke-width': 2,
+        'fill-rule': 'evenodd',
+    });
     const style = normalizeStyle({ color: 'red', '--sample-color': 'blue' });
     const refObject = createRef<Element>();
     let callbackRef: Element | null = null;
-    const merged = mergeRefs<Element>(refObject, (value) => { callbackRef = value; });
+    const merged = mergeRefs<Element>(refObject, (value) => {
+        callbackRef = value;
+    });
     const target = document.createElement('div');
     if (typeof merged === 'function') merged(target);
     const order: string[] = [];
     const prevented = new Event('click', { cancelable: true });
-    composeHandlers<Event>((event) => { order.push('pt'); event.preventDefault(); }, () => order.push('public'))(prevented);
+    composeHandlers<Event>(
+        (event) => {
+            order.push('pt');
+            event.preventDefault();
+        },
+        () => order.push('public'),
+    )(prevented);
     let listenerCalls = 0;
-    const cleanup = listen(document, 'click', () => { listenerCalls += 1; });
+    const cleanup = listen(document, 'click', () => {
+        listenerCalls += 1;
+    });
     document.dispatchEvent(new Event('click'));
     cleanup();
     cleanup();
     document.dispatchEvent(new Event('click'));
-    const passed = normalized.className === 'sample' &&
+    const passed =
+        normalized.className === 'sample' &&
         normalized.htmlFor === 'field' &&
         normalized.strokeWidth === 2 &&
         normalized.fillRule === 'evenodd' &&
         style.color === 'red' &&
         (style as Readonly<Record<string, unknown>>)['--sample-color'] === 'blue' &&
-        refObject.current === target && callbackRef === target &&
-        order.join(',') === 'pt' && listenerCalls === 1;
+        refObject.current === target &&
+        callbackRef === target &&
+        order.join(',') === 'pt' &&
+        listenerCalls === 1;
     addCheck(
         checks,
         ConformanceFamily.ReactNormalization,
@@ -295,15 +336,33 @@ const checkSlot = async (
 ) => {
     const declaration = library.slots[profile.slotId];
     if (!declaration) {
-        addCheck(checks, ConformanceFamily.Contract, `contract.${profile.slotId}.declaration`, false, 'Promised slot has no runtime declaration.', profile.slotId);
+        addCheck(
+            checks,
+            ConformanceFamily.Contract,
+            `contract.${profile.slotId}.declaration`,
+            false,
+            'Promised slot has no runtime declaration.',
+            profile.slotId,
+        );
         return;
     }
     const typedDeclaration = declaration as unstable_SlotDeclaration<unstable_SlotId>;
     const contractId = `contract.${profile.slotId}`;
-    if (skipRequested(checks, options, library, typedDeclaration, contractId, profile.slotId)) return;
+    if (
+        skipRequested(
+            checks,
+            options,
+            library,
+            typedDeclaration,
+            contractId,
+            profile.slotId,
+        )
+    )
+        return;
 
     let fixture: MountedFixture | undefined;
     const variantFixtures: MountedFixture[] = [];
+    const observedStateAssociations = new Set<string>();
     try {
         const baseProps: Readonly<Record<string, unknown>> = {
             ...profile.createProps(),
@@ -312,14 +371,25 @@ const checkSlot = async (
             'data-conformance-behavior-prop': 'forwarded',
         };
         fixture = await mount(document, typedDeclaration, baseProps, profile.refCapable);
-        if (profile.activate) await act(async () => profile.activate?.(document, fixture?.container ?? document.body));
+        if (profile.activate)
+            await act(async () =>
+                profile.activate?.(document, fixture?.container ?? document.body),
+            );
+        collectRenderedStates(document, observedStateAssociations);
         for (const variant of profile.createPartVariants?.() ?? []) {
-            variantFixtures.push(await mount(
+            const variantFixture = await mount(
                 document,
                 typedDeclaration,
                 { ...variant, pt: passThrough(profile) },
                 profile.refCapable,
-            ));
+            );
+            variantFixtures.push(variantFixture);
+            if (profile.activate) {
+                await act(async () =>
+                    profile.activate?.(document, variantFixture.container),
+                );
+            }
+            collectRenderedStates(document, observedStateAssociations);
         }
 
         const expectedParts = [...cratisParts[profile.partsKey]].filter(
@@ -336,22 +406,29 @@ const checkSlot = async (
             ConformanceFamily.Contract,
             `${contractId}.parts`,
             missingParts.length === 0,
-            missingParts.length === 0 ? 'Every documented stable DOM part was observed.' : `Missing parts: ${missingParts.join(', ')}.`,
+            missingParts.length === 0
+                ? 'Every documented stable DOM part was observed.'
+                : `Missing parts: ${missingParts.join(', ')}.`,
             profile.slotId,
             { expectedParts, foundParts: [...foundParts].sort() },
         );
 
         const missingPassThrough = profile.ptKeys
             .filter((part) => !profile.conditionallyAbsentParts?.includes(part))
-            .filter((part) =>
-                !document.querySelector(`[data-conformance-part="${markerForPart(part)}"]`),
+            .filter(
+                (part) =>
+                    !document.querySelector(
+                        `[data-conformance-part="${markerForPart(part)}"]`,
+                    ),
             );
         addCheck(
             checks,
             ConformanceFamily.Contract,
             `${contractId}.pt`,
             missingPassThrough.length === 0,
-            missingPassThrough.length === 0 ? 'Every typed pt key reached its intended real part.' : `pt did not reach: ${missingPassThrough.join(', ')}.`,
+            missingPassThrough.length === 0
+                ? 'Every typed pt key reached its intended real part.'
+                : `pt did not reach: ${missingPassThrough.join(', ')}.`,
             profile.slotId,
             { ptKeys: profile.ptKeys },
         );
@@ -359,42 +436,67 @@ const checkSlot = async (
         for (const variantFixture of variantFixtures) await unmount(variantFixture);
         variantFixtures.length = 0;
 
-        const native = fixture.container.querySelector(profile.nativeSelector) ?? document.querySelector(profile.nativeSelector);
-        const exactElement = Boolean(native) && native?.tagName === profile.nativeTag && (!profile.refCapable || fixture.ref.current === native);
+        const native =
+            fixture.container.querySelector(profile.nativeSelector) ??
+            document.querySelector(profile.nativeSelector);
+        const exactElement =
+            Boolean(native) &&
+            native?.tagName === profile.nativeTag &&
+            (!profile.refCapable || fixture.ref.current === native);
         addCheck(
             checks,
             ConformanceFamily.Contract,
             `${contractId}.elementRef`,
             exactElement,
-            exactElement ? 'The contract resolves to the exact real native element and forwarded ref.' : 'The native element or forwarded ref does not match the slot contract.',
+            exactElement
+                ? 'The contract resolves to the exact real native element and forwarded ref.'
+                : 'The native element or forwarded ref does not match the slot contract.',
             profile.slotId,
-            { selector: profile.nativeSelector, tag: native?.tagName, refMatches: fixture.ref.current === native },
+            {
+                selector: profile.nativeSelector,
+                tag: native?.tagName,
+                refMatches: fixture.ref.current === native,
+            },
         );
 
-        const partStates = cratisPartStates[profile.partsKey] as Readonly<Record<string, readonly string[]>>;
+        const partStates = cratisPartStates[profile.partsKey] as Readonly<
+            Record<string, readonly string[]>
+        >;
         const canonical = new Set<string>(cratisCanonicalPartStates);
         const unexpectedStates = Object.entries(partStates).flatMap(([part, states]) =>
-            states.filter((state) => !canonical.has(state)).map((state) => `${part}.${state}`),
+            states
+                .filter((state) => !canonical.has(state))
+                .map((state) => `${part}.${state}`),
         );
         addCheck(
             checks,
             ConformanceFamily.Contract,
             `${contractId}.states`,
             unexpectedStates.length === 0,
-            unexpectedStates.length === 0 ? 'The public part-state manifest uses only exact canonical state names for this slot.' : `Unexpected canonical states: ${unexpectedStates.join(', ')}.`,
+            unexpectedStates.length === 0
+                ? 'The public part-state manifest uses only exact canonical state names for this slot.'
+                : `Unexpected canonical states: ${unexpectedStates.join(', ')}.`,
             profile.slotId,
         );
 
-        const ownerCounts = profile.ownershipSelectors.map((selector) => document.querySelectorAll(selector).length);
+        const ownerCounts = profile.ownershipSelectors.map(
+            (selector) => document.querySelectorAll(selector).length,
+        );
         const ownershipPassed = ownerCounts.every((count) => count === 1);
         addCheck(
             checks,
             ConformanceFamily.BehaviorOwnership,
             `ownership.${profile.slotId}`,
             ownershipPassed,
-            ownershipPassed ? `${typedDeclaration.mode} tree has exactly one instrumented focus/dismiss/scroll semantic owner.` : `Expected one owner for each selector; observed ${ownerCounts.join(', ')}.`,
+            ownershipPassed
+                ? `${typedDeclaration.mode} tree has exactly one instrumented focus/dismiss/scroll semantic owner.`
+                : `Expected one owner for each selector; observed ${ownerCounts.join(', ')}.`,
             profile.slotId,
-            { mode: typedDeclaration.mode, selectors: profile.ownershipSelectors, ownerCounts },
+            {
+                mode: typedDeclaration.mode,
+                selectors: profile.ownershipSelectors,
+                ownerCounts,
+            },
         );
 
         let submitEvents = 0;
@@ -403,29 +505,39 @@ const checkSlot = async (
             submitEvents += 1;
         });
         const exercisedEvidence: Readonly<Record<string, unknown>> = profile.exercise
-            ? (await act(async () => profile.exercise?.(
-                document,
-                fixture?.container ?? document.body,
-                fixture?.ref ?? createRef<Element>(),
-            ))) ?? {}
+            ? ((await act(async () =>
+                  profile.exercise?.(
+                      document,
+                      fixture?.container ?? document.body,
+                      fixture?.ref ?? createRef<Element>(),
+                  ),
+              )) ?? {})
             : {};
         const namedControl = fixture.form.elements.namedItem(
             typeof baseProps.name === 'string' ? baseProps.name : '',
         );
         const formData = Object.fromEntries(new FormData(fixture.form).entries());
-        const nativeValue = namedControl && 'value' in namedControl
-            ? String(namedControl.value)
-            : undefined;
-        fixture.form.reset();
-        const resetValue = namedControl && 'value' in namedControl
-            ? String(namedControl.value)
-            : undefined;
-        const resetChecked = namedControl && 'checked' in namedControl
-            ? Boolean(namedControl.checked)
-            : undefined;
+        const nativeValue =
+            namedControl && 'value' in namedControl
+                ? String(namedControl.value)
+                : undefined;
+        await act(async () => {
+            fixture?.form.reset();
+            await Promise.resolve();
+        });
+        const resetValue =
+            namedControl && 'value' in namedControl
+                ? String(namedControl.value)
+                : undefined;
+        const resetChecked =
+            namedControl && 'checked' in namedControl
+                ? Boolean(namedControl.checked)
+                : undefined;
         const resetMatches =
-            (typeof baseProps.defaultValue !== 'string' || resetValue === baseProps.defaultValue) &&
-            (typeof baseProps.defaultChecked !== 'boolean' || resetChecked === baseProps.defaultChecked);
+            (typeof baseProps.defaultValue !== 'string' ||
+                resetValue === baseProps.defaultValue) &&
+            (typeof baseProps.defaultChecked !== 'boolean' ||
+                resetChecked === baseProps.defaultChecked);
         const behaviorEvidence: Readonly<Record<string, unknown>> = {
             ...exercisedEvidence,
             submitEvents,
@@ -436,7 +548,10 @@ const checkSlot = async (
             resetChecked,
             resetMatches,
         };
-        const callbackCount = typeof behaviorEvidence.callbacks === 'number' ? behaviorEvidence.callbacks : undefined;
+        const callbackCount =
+            typeof behaviorEvidence.callbacks === 'number'
+                ? behaviorEvidence.callbacks
+                : undefined;
         const submitExpected = baseProps.type === 'submit';
         const behaviorPassed =
             (callbackCount === undefined || callbackCount === 1) &&
@@ -448,7 +563,9 @@ const checkSlot = async (
             ConformanceFamily.Behavior,
             `behavior.${profile.slotId}`,
             behaviorPassed,
-            behaviorPassed ? 'Bounded public-prop behavior produced native semantics and at most one ordered callback.' : `Expected one callback, observed ${String(callbackCount)}.`,
+            behaviorPassed
+                ? 'Bounded public-prop behavior produced native semantics and at most one ordered callback.'
+                : `Expected one callback, observed ${String(callbackCount)}.`,
             profile.slotId,
             behaviorEvidence,
         );
@@ -463,7 +580,9 @@ const checkSlot = async (
                 ConformanceFamily.Accessibility,
                 `a11y.${profile.slotId}.axe`,
                 axeResult.violations.length === 0,
-                axeResult.violations.length === 0 ? 'axe found no WCAG A/AA violations in the bounded fixture.' : `axe violations: ${axeResult.violations.map((violation) => violation.id).join(', ')}.`,
+                axeResult.violations.length === 0
+                    ? 'axe found no WCAG A/AA violations in the bounded fixture.'
+                    : `axe violations: ${axeResult.violations.map((violation) => violation.id).join(', ')}.`,
                 profile.slotId,
                 { violations: axeResult.violations.map((violation) => violation.id) },
             );
@@ -478,8 +597,15 @@ const checkSlot = async (
     if (profile.createStateProps) {
         let stateFixture: MountedFixture | undefined;
         try {
-            stateFixture = await mount(document, typedDeclaration, profile.createStateProps(), profile.refCapable);
-            const stateElements = stateFixture.container.querySelectorAll('[data-cratis-part]');
+            stateFixture = await mount(
+                document,
+                typedDeclaration,
+                profile.createStateProps(),
+                profile.refCapable,
+            );
+            collectRenderedStates(document, observedStateAssociations);
+            const stateElements =
+                stateFixture.container.querySelectorAll('[data-cratis-part]');
             const stateBoundaryPresent =
                 stateElements.length > 0 || typedDeclaration.mode === 'atomic';
             addCheck(
@@ -487,15 +613,44 @@ const checkSlot = async (
                 ConformanceFamily.Behavior,
                 `behavior.${profile.slotId}.controlledUncontrolled`,
                 stateBoundaryPresent,
-                stateBoundaryPresent ? 'Controlled/stateful and uncontrolled/default fixture forms both render through the same public slot declaration.' : 'State fixture did not render a public part boundary.',
+                stateBoundaryPresent
+                    ? 'Controlled/stateful and uncontrolled/default fixture forms both render through the same public slot declaration.'
+                    : 'State fixture did not render a public part boundary.',
                 profile.slotId,
             );
         } catch (error) {
-            addError(checks, ConformanceFamily.Behavior, `behavior.${profile.slotId}.controlledUncontrolled`, error, profile.slotId);
+            addError(
+                checks,
+                ConformanceFamily.Behavior,
+                `behavior.${profile.slotId}.controlledUncontrolled`,
+                error,
+                profile.slotId,
+            );
         } finally {
             if (stateFixture) await unmount(stateFixture);
         }
     }
+
+    const expectedStateAssociations = Object.entries(
+        cratisPartStates[profile.partsKey] as Readonly<Record<string, readonly string[]>>,
+    ).flatMap(([part, states]) => states.map((state) => `${part}.${state}`));
+    const missingStateAssociations = expectedStateAssociations.filter(
+        (association) => !observedStateAssociations.has(association),
+    );
+    addCheck(
+        checks,
+        ConformanceFamily.Contract,
+        `contract.${profile.slotId}.stateCoverage`,
+        missingStateAssociations.length === 0,
+        missingStateAssociations.length === 0
+            ? 'Every canonical component/part state was observed in a bounded fixture.'
+            : `Canonical states not observed: ${missingStateAssociations.join(', ')}.`,
+        profile.slotId,
+        {
+            expectedStateAssociations,
+            observedStateAssociations: [...observedStateAssociations].sort(),
+        },
+    );
 };
 
 const checkServerRendering = (
@@ -508,7 +663,12 @@ const checkServerRendering = (
         const declaration = library.slots[profile.slotId];
         if (!declaration) continue;
         try {
-            const element = withProvider(renderComponent(declaration as unstable_SlotDeclaration<unstable_SlotId>, profile.createProps()));
+            const element = withProvider(
+                renderComponent(
+                    declaration as unstable_SlotDeclaration<unstable_SlotId>,
+                    profile.createProps(),
+                ),
+            );
             const first = renderToString(element);
             const second = renderToString(element);
             outputs.push(first);
@@ -517,31 +677,49 @@ const checkServerRendering = (
                 ConformanceFamily.ServerRendering,
                 `ssr.${profile.slotId}`,
                 first === second,
-                first === second ? 'Server render is DOM-free and deterministic.' : 'Repeated server renders differ.',
+                first === second
+                    ? 'Server render is DOM-free and deterministic.'
+                    : 'Repeated server renders differ.',
                 profile.slotId,
                 { bytes: first.length },
             );
         } catch (error) {
-            addError(checks, ConformanceFamily.ServerRendering, `ssr.${profile.slotId}`, error, profile.slotId);
+            addError(
+                checks,
+                ConformanceFamily.ServerRendering,
+                `ssr.${profile.slotId}`,
+                error,
+                profile.slotId,
+            );
         }
     }
-    const tooltipIndex = profiles.findIndex((profile) => profile.slotId === 'common.tooltip');
-    const dialogIndex = profiles.findIndex((profile) => profile.slotId === 'dialogs.dialog');
-    const overlayPassed = (tooltipIndex < 0 || !outputs[tooltipIndex]?.includes('data-cratis-part="popup"')) &&
+    const tooltipIndex = profiles.findIndex(
+        (profile) => profile.slotId === 'common.tooltip',
+    );
+    const dialogIndex = profiles.findIndex(
+        (profile) => profile.slotId === 'dialogs.dialog',
+    );
+    const overlayPassed =
+        (tooltipIndex < 0 ||
+            !outputs[tooltipIndex]?.includes('data-cratis-part="popup"')) &&
         (dialogIndex < 0 || outputs[dialogIndex]?.includes('role="dialog"'));
     addCheck(
         checks,
         ConformanceFamily.ServerRendering,
         'ssr.overlayAbsentPresent',
         overlayPassed,
-        overlayPassed ? 'Closed deferred overlay is absent while an explicitly present dialog renders in SSR.' : 'SSR overlay absent/present semantics differ from the contract.',
+        overlayPassed
+            ? 'Closed deferred overlay is absent while an explicitly present dialog renders in SSR.'
+            : 'SSR overlay absent/present semantics differ from the contract.',
     );
     addCheck(
         checks,
         ConformanceFamily.ServerRendering,
         'ssr.concurrentManifestIsolation',
         new Set(outputs).size === outputs.length,
-        new Set(outputs).size === outputs.length ? 'Concurrent fixture outputs remain slot-local with no manifest-global mutation.' : 'Two slot outputs collapsed to an indistinguishable manifest-global result.',
+        new Set(outputs).size === outputs.length
+            ? 'Concurrent fixture outputs remain slot-local with no manifest-global mutation.'
+            : 'Two slot outputs collapsed to an indistinguishable manifest-global result.',
         undefined,
         { slots: outputs.length },
     );
@@ -553,28 +731,40 @@ const checkHydration = async (
     profiles: readonly SlotProfile[],
     document: Document,
 ) => {
-    const profile = profiles.find((candidate) => candidate.slotId === 'common.button') ?? profiles[0];
+    const profile =
+        profiles.find((candidate) => candidate.slotId === 'common.button') ?? profiles[0];
     const declaration = profile && library.slots[profile.slotId];
     if (!profile || !declaration) {
-        addCheck(checks, ConformanceFamily.ServerRendering, 'ssr.hydration', false, 'No renderable slot is available for hydration evidence.');
+        addCheck(
+            checks,
+            ConformanceFamily.ServerRendering,
+            'ssr.hydration',
+            false,
+            'No renderable slot is available for hydration evidence.',
+        );
         return;
     }
-    const element = withProvider(renderComponent(
-        declaration as unstable_SlotDeclaration<unstable_SlotId>,
-        profile.createProps(),
-    ));
+    const element = withProvider(
+        renderComponent(
+            declaration as unstable_SlotDeclaration<unstable_SlotId>,
+            profile.createProps(),
+        ),
+    );
     const serverMarkup = renderToString(element);
     const container = document.createElement('div');
-    container.innerHTML = serverMarkup;
+    const range = document.createRange();
+    range.selectNode(document.body);
+    container.append(range.createContextualFragment(serverMarkup));
     document.body.append(container);
     const recoverableErrors: string[] = [];
     const hydrated = hydrateRoot(container, element, {
-        onRecoverableError: (error) => recoverableErrors.push(
-            error instanceof Error ? error.message : String(error),
-        ),
+        onRecoverableError: (error) =>
+            recoverableErrors.push(
+                error instanceof Error ? error.message : String(error),
+            ),
     });
     await act(async () => undefined);
-    const deterministic = recoverableErrors.length === 0 && container.innerHTML === serverMarkup;
+    const deterministic = recoverableErrors.length === 0;
     await act(async () => hydrated.unmount());
     container.remove();
     addCheck(
@@ -582,7 +772,9 @@ const checkHydration = async (
         ConformanceFamily.ServerRendering,
         'ssr.hydration',
         deterministic,
-        deterministic ? 'Server markup hydrates deterministically with no recoverable mismatch.' : `Hydration mismatches: ${recoverableErrors.join('; ')}.`,
+        deterministic
+            ? 'Server markup hydrates deterministically with no recoverable mismatch.'
+            : `Hydration mismatches: ${recoverableErrors.join('; ')}.`,
         profile.slotId,
         { recoverableErrors },
     );
@@ -594,7 +786,10 @@ const checkEnvironmentalEvidence = (checks: ConformanceCheck[], document: Docume
     host.style.setProperty('forced-color-adjust', 'auto');
     host.style.setProperty('transition-duration', '0s');
     document.body.append(host);
-    const passed = host.dir === 'rtl' && host.style.forcedColorAdjust === 'auto' && host.style.transitionDuration === '0s';
+    const passed =
+        host.dir === 'rtl' &&
+        host.style.forcedColorAdjust === 'auto' &&
+        host.style.transitionDuration === '0s';
     host.remove();
     for (const mode of ['rtl', 'forcedColors', 'motion.reduced'] as const) {
         addCheck(
@@ -602,7 +797,9 @@ const checkEnvironmentalEvidence = (checks: ConformanceCheck[], document: Docume
             ConformanceFamily.Accessibility,
             `a11y.environment.${mode}`,
             passed,
-            passed ? `${mode} execution input was accepted by the bounded DOM fixture.` : `${mode} execution input was not preserved.`,
+            passed
+                ? `${mode} execution input was accepted by the bounded DOM fixture.`
+                : `${mode} execution input was not preserved.`,
         );
     }
 };
@@ -619,6 +816,8 @@ export const runConformance = async (
     library: ConformanceLibrary,
     options: ConformanceOptions = {},
 ): Promise<ConformanceReport> => {
+    // SAFETY: ConformanceLibrary deliberately mirrors the public UiLibrary runtime shape without
+    // leaking Components declarations through this package's independent public types.
     const rendererLibrary = library as unknown as unstable_UiLibrary;
     const checks: ConformanceCheck[] = [];
     checkManifest(checks, rendererLibrary, options);
@@ -628,14 +827,23 @@ export const runConformance = async (
         checkNormalization(checks, document);
         const evidence = new Map<string, Readonly<Record<string, unknown>>>();
         const profiles = createSlotProfiles(evidence).filter((profile) =>
-            (rendererLibrary.profileSlots ?? Object.keys(rendererLibrary.slots)).includes(profile.slotId),
+            (rendererLibrary.profileSlots ?? Object.keys(rendererLibrary.slots)).includes(
+                profile.slotId,
+            ),
         );
-        for (const profile of profiles) await checkSlot(checks, rendererLibrary, options, document, profile);
+        for (const profile of profiles)
+            await checkSlot(checks, rendererLibrary, options, document, profile);
         checkServerRendering(checks, rendererLibrary, profiles);
         await checkHydration(checks, rendererLibrary, profiles, document);
         checkEnvironmentalEvidence(checks, document);
     } else {
-        addCheck(checks, ConformanceFamily.Contract, 'runtime.domAvailable', false, 'DOM checks require an explicit Document; SSR import remains safe.');
+        addCheck(
+            checks,
+            ConformanceFamily.Contract,
+            'runtime.domAvailable',
+            false,
+            'DOM checks require an explicit Document; SSR import remains safe.',
+        );
     }
 
     addCheck(
@@ -648,9 +856,12 @@ export const runConformance = async (
 
     const summary = {
         total: checks.length,
-        passed: checks.filter((check) => check.status === ConformanceStatus.Passed).length,
-        failed: checks.filter((check) => check.status === ConformanceStatus.Failed).length,
-        skipped: checks.filter((check) => check.status === ConformanceStatus.Skipped).length,
+        passed: checks.filter((check) => check.status === ConformanceStatus.Passed)
+            .length,
+        failed: checks.filter((check) => check.status === ConformanceStatus.Failed)
+            .length,
+        skipped: checks.filter((check) => check.status === ConformanceStatus.Skipped)
+            .length,
     };
     return Object.freeze({
         adapterId: library.id,
diff --git a/Conformance/tsconfig.build.json b/Conformance/tsconfig.build.json
index c7188405..7da6df93 100644
--- a/Conformance/tsconfig.build.json
+++ b/Conformance/tsconfig.build.json
@@ -6,7 +6,7 @@
         "declarationMap": true,
         "outDir": "dist",
         "rootDir": "src",
-        "module": "ES2022",
+        "module": "ESNext",
         "moduleResolution": "bundler",
         "skipLibCheck": false,
         "types": []

From 91924433ffc2e9c1373cc14ba3bc42f07c59dc59 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 23:22:23 +0200
Subject: [PATCH 206/267] Make renderer conformance evidence fail closed

---
 Conformance/CONFORMANCE.md                    |  18 +-
 .../when_detecting_planted_defects.tsx        |  90 ++++++++--
 .../when_running_the_builtin_manifest.tsx     |  35 ++++
 Conformance/scripts/verify-packed-package.mjs |  76 +++++++--
 Conformance/src/runConformance.tsx            | 156 ++++++++++++------
 Source/CONFORMANCE.md                         |  11 +-
 6 files changed, 308 insertions(+), 78 deletions(-)

diff --git a/Conformance/CONFORMANCE.md b/Conformance/CONFORMANCE.md
index 793e0fdc..c68bb3fa 100644
--- a/Conformance/CONFORMANCE.md
+++ b/Conformance/CONFORMANCE.md
@@ -12,11 +12,11 @@ The automated families are:
 
 - package metadata schema constraints, runtime consistency, and capability over-declaration;
 - all fourteen ABI v1 slot declarations, stable parts/states, pt markers, and exact native roots;
-- bounded native form/callback behavior and presentation/atomic ownership;
+- bounded native form/callback behavior and one interactive semantic root per declared ownership selector;
 - internal React-boundary normalization fixtures (props, styles, refs, events, cleanup, StrictMode);
-- DOM-free deterministic server rendering, hydration, manifest isolation, and overlay absence/presence;
-- axe WCAG A/AA scans plus executable RTL, forced-colors, and reduced-motion inputs;
-- packed declaration purity and strict Bundler/NodeNext consumer compilation.
+- DOM-free deterministic server rendering, slot-local output distinction, hydration, and bounded overlay absence/presence;
+- axe WCAG A/AA scans plus a real slot rendered inside bounded RTL, forced-color-adjust, and reduced-transition DOM hosts;
+- a separate packed-package gate covering every emitted declaration, runtime entry loading, and strict Bundler/NodeNext consumer compilation.
 
 A requested skip is accepted only when the relevant declaration is `unsupported`/`emulated`, or the
 request names a capability the library does not claim. An unjustified skip is a failure.
@@ -27,8 +27,14 @@ request names a capability the library does not claim. An unjustified skip is a
   voice-control, or other assistive-technology review.
 - jsdom does not establish behavior across browser engines, devices, touch/pointer combinations, or
   operating-system accessibility modes.
-- forced-color and reduced-motion fixtures prove code-path execution, not visual contrast or the
-  absence of all motion. Repository Storybook light/dark axe runs remain a separate gate.
+- forced-color-adjust and reduced-transition host fixtures prove that a real slot renders under
+  those bounded DOM inputs, not that a browser activated forced-colors/reduced-motion media modes,
+  visual contrast, or the absence of all motion. Repository Storybook light/dark axe runs remain a
+  separate gate.
+- ownership checks count declared interactive semantic roots. They do not instrument a vendor's
+  internal focus trap, dismissal listener, or scroll lock.
+- slot-local SSR output checks do not establish concurrent-request isolation across processes or
+  application server runtimes.
 - renderer-vendor focus, collection, and overlay behavior outside the fourteen public slots is not
   exercised.
 - adapter package licensing, security, performance, and upstream support policy remain the adapter
diff --git a/Conformance/for_conformance/when_detecting_planted_defects.tsx b/Conformance/for_conformance/when_detecting_planted_defects.tsx
index d1c1b217..fc5bc8a1 100644
--- a/Conformance/for_conformance/when_detecting_planted_defects.tsx
+++ b/Conformance/for_conformance/when_detecting_planted_defects.tsx
@@ -2,7 +2,14 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import { expect } from 'chai';
-import { Fragment, createElement, type ComponentType } from 'react';
+import {
+    Fragment,
+    createElement,
+    forwardRef,
+    type ComponentType,
+    type HTMLAttributes,
+    type ReactNode,
+} from 'react';
 import {
     unstable_defineUiLibrary,
     type unstable_SlotDeclaration,
@@ -35,13 +42,45 @@ const oneSlot = (
         slots: { [slotId]: replacement },
     });
 
+const metadataFor = (library: unstable_UiLibrary) => {
+    const slots = [...(library.profileSlots ?? Object.keys(library.slots))];
+    return {
+        kind: 'ui-adapter',
+        id: library.id,
+        displayName: library.displayName,
+        abi: `^${library.abi}`,
+        level: library.level,
+        profile: library.profile,
+        category: 'test-fixture',
+        entry: './dist/index.js',
+        export: 'TestFixture',
+        slots,
+        modes: Object.fromEntries(
+            slots.map((slotId) => [slotId, library.slots[slotId as unstable_SlotId]?.mode]),
+        ),
+        capabilities: [...library.capabilities],
+        ssr: 'safe',
+        a11y: { axeProfile: 'wcag21aa', evidence: './CONFORMANCE.md' },
+        license: { spdx: 'MIT', requiresKey: false },
+        upstream: { react: '^19.0.0' },
+    } as const;
+};
+
 const failureIds = async (
     library: unstable_UiLibrary,
     options: Parameters<typeof runConformance>[1] = {},
 ) =>
-    (await runConformance(library, { document, axe: false, ...options })).checks
+    (
+        await runConformance(library, {
+            metadata: metadataFor(library),
+            document,
+            axe: false,
+            ...options,
+        })
+    ).checks
         .filter((check) => check.status === 'failed')
-        .map((check) => check.id);
+        .map((check) => check.id)
+        .sort();
 
 describe('when detecting planted adapter defects', () => {
     it('should report a dropped ref on the exact element contract', async () => {
@@ -58,16 +97,43 @@ describe('when detecting planted adapter defects', () => {
         const dropRefRender = DropRef as typeof original.render;
         const library = oneSlot('common.button', { ...original, render: dropRefRender });
 
-        expect(await failureIds(library)).to.include('contract.common.button.elementRef');
+        expect(await failureIds(library)).to.deep.equal([
+            'contract.common.button.elementRef',
+        ]);
     });
 
     it('should report an omitted documented part', async () => {
+        const original = declaration('common.surface');
+        const MissingPart = forwardRef<HTMLElement, Record<string, unknown>>(
+            (props, ref) => {
+                // SAFETY: The planted fixture reads only the typed root pass-through attributes.
+                const pt = props.pt as
+                    | { readonly root?: HTMLAttributes<HTMLElement> }
+                    | undefined;
+                return createElement(
+                    'article',
+                    {
+                        ...pt?.root,
+                        ref,
+                        className:
+                            typeof props.className === 'string'
+                                ? props.className
+                                : undefined,
+                    },
+                    props.children as ReactNode,
+                );
+            },
+        );
+        // SAFETY: The deliberate fixture preserves the Surface contract except for its part marker.
+        const missingPartRender = MissingPart as unknown as typeof original.render;
         const library = oneSlot('common.surface', {
-            ...declaration('common.surface'),
-            render: () => createElement('article', null, 'No stable part'),
+            ...original,
+            render: missingPartRender,
         });
 
-        expect(await failureIds(library)).to.include('contract.common.surface.parts');
+        expect(await failureIds(library)).to.deep.equal([
+            'contract.common.surface.parts',
+        ]);
     });
 
     it('should report an over-declared capability', async () => {
@@ -77,7 +143,9 @@ describe('when detecting planted adapter defects', () => {
             'paging.server',
         ]);
 
-        expect(await failureIds(library)).to.include('manifest.noOverDeclaration');
+        expect(await failureIds(library)).to.deep.equal([
+            'manifest.noOverDeclaration',
+        ]);
     });
 
     it('should reject an undeclared skip', async () => {
@@ -87,7 +155,7 @@ describe('when detecting planted adapter defects', () => {
             await failureIds(library, {
                 skips: [{ checkId: 'contract.common.button', slotId: 'common.button' }],
             }),
-        ).to.include('skip.contract.common.button.undeclared');
+        ).to.deep.equal(['skip.contract.common.button.undeclared']);
     });
 
     it('should report duplicate behavior ownership', async () => {
@@ -113,6 +181,8 @@ describe('when detecting planted adapter defects', () => {
             render: duplicateOwnerRender,
         });
 
-        expect(await failureIds(library)).to.include('ownership.dialogs.dialog');
+        expect(await failureIds(library)).to.deep.equal([
+            'ownership.dialogs.dialog',
+        ]);
     });
 });
diff --git a/Conformance/for_conformance/when_running_the_builtin_manifest.tsx b/Conformance/for_conformance/when_running_the_builtin_manifest.tsx
index 17e5d8bb..91c62424 100644
--- a/Conformance/for_conformance/when_running_the_builtin_manifest.tsx
+++ b/Conformance/for_conformance/when_running_the_builtin_manifest.tsx
@@ -4,6 +4,7 @@
 import { expect } from 'chai';
 import sourcePackage from '../../Source/package.json';
 import adapterSchema from '../../Source/schemas/ui-adapter.schema.json';
+import { unstable_defineUiLibrary } from '@cratis/components/renderer';
 import { unstable_cratisBuiltIn } from '@cratis/components/renderer/builtin';
 import { describe, it } from 'vitest';
 import { runConformance } from '../src/index.js';
@@ -27,6 +28,15 @@ describe('when running the built-in renderer manifest', () => {
         expect(report.summary.total).to.equal(148);
         expect(report.summary.passed).to.equal(148);
         expect(report.summary.skipped).to.equal(0);
+        expect(report.checks.find((check) => check.id === 'manifest.immutable')?.status).to.equal(
+            'passed',
+        );
+        expect(report.checks.some((check) => check.id === 'typePurity.publishedDeclarations')).to.equal(
+            false,
+        );
+        expect(report.checks.some((check) => check.id === 'ssr.slotOutputIsolation')).to.equal(
+            true,
+        );
         expect(Object.keys(unstable_cratisBuiltIn.slots)).to.have.lengthOf(14);
     }, 30_000);
 
@@ -45,6 +55,31 @@ describe('when running the built-in renderer manifest', () => {
         expect(validateMetadata(sourcePackage.cratis)).to.deep.equal([]);
     });
 
+    it('should key overlay evidence by slot for a partial renderer profile', async () => {
+        const dialog = unstable_cratisBuiltIn.slots['dialogs.dialog'];
+        if (!dialog) throw new Error('Built-in dialog declaration is missing.');
+        const dialogOnly = unstable_defineUiLibrary({
+            id: 'dialog-only-fixture',
+            displayName: 'Dialog-only fixture',
+            abi: 1,
+            level: 'behavior',
+            profile: 'dialog-only/v1',
+            profileSlots: ['dialogs.dialog'],
+            capabilities: ['slot.render', 'focus.trap', 'focus.restore'],
+            slots: { 'dialogs.dialog': dialog },
+        });
+
+        const report = await runConformance(dialogOnly, {
+            document,
+            axe: false,
+        });
+
+        expect(
+            report.checks.find((check) => check.id === 'ssr.overlayAbsentPresent')
+                ?.status,
+        ).to.equal('passed');
+    });
+
     it('should reject metadata that violates nested public schema constraints', () => {
         const invalidFixtures = [
             { ...sourcePackage.cratis, displayName: '' },
diff --git a/Conformance/scripts/verify-packed-package.mjs b/Conformance/scripts/verify-packed-package.mjs
index bbe367c8..77c4288e 100644
--- a/Conformance/scripts/verify-packed-package.mjs
+++ b/Conformance/scripts/verify-packed-package.mjs
@@ -16,7 +16,7 @@ import { fileURLToPath } from 'node:url';
 
 const packageDirectory = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
 const repositoryDirectory = path.resolve(packageDirectory, '..');
-const temporary = mkdtempSync(path.join(packageDirectory, '.verify-package-'));
+const temporary = mkdtempSync(path.join(os.tmpdir(), 'cratis-conformance-package-'));
 
 const run = (command, arguments_, cwd = packageDirectory) => {
     const result = spawnSync(command, arguments_, { cwd, encoding: 'utf8' });
@@ -49,25 +49,79 @@ try {
     mkdirSync(unpacked);
     run('tar', ['-xzf', archive, '-C', unpacked]);
     const packageJson = JSON.parse(readFileSync(path.join(unpacked, 'package/package.json'), 'utf8'));
-    if (packageJson.version !== '0.1.0' || packageJson.cratisUiAbi !== 1) {
-        throw new Error('Package version and renderer ABI major are not independently pinned.');
+    const sourcePackageJson = JSON.parse(
+        readFileSync(path.join(repositoryDirectory, 'Source/package.json'), 'utf8'),
+    );
+    if (
+        packageJson.version !== '0.1.0' ||
+        packageJson.version === sourcePackageJson.version ||
+        packageJson.cratisIndependentVersion !== true ||
+        packageJson.cratisUiAbi !== 1
+    ) {
+        throw new Error(
+            'Package version and renderer ABI major must be explicitly independent from Components.',
+        );
     }
     if (packageJson.dependencies?.['@cratis/components']) {
         throw new Error('Conformance must not install Components as a runtime dependency.');
     }
 
-    const declarations = readFileSync(path.join(unpacked, 'package/dist/index.d.ts'), 'utf8');
-    for (const forbidden of [/\bany\b/u, /@mui\//u, /primereact/u, /primeuix/u, /react-aria/u]) {
-        if (forbidden.test(declarations)) throw new Error(`Public declarations contain forbidden '${forbidden}'.`);
+    const declarationFiles = [...fileNames].filter((file) => file.endsWith('.d.ts'));
+    for (const declarationFile of declarationFiles) {
+        const declarations = readFileSync(
+            path.join(unpacked, 'package', declarationFile),
+            'utf8',
+        );
+        for (const forbidden of [
+            /\bany\b/u,
+            /@mui\//u,
+            /primereact/u,
+            /primeuix/u,
+            /react-aria/u,
+        ]) {
+            if (forbidden.test(declarations)) {
+                throw new Error(
+                    `Public declaration '${declarationFile}' contains forbidden '${forbidden}'.`,
+                );
+            }
+        }
     }
 
-    const nodeModules = path.join(temporary, 'node_modules/@cratis');
-    mkdirSync(nodeModules, { recursive: true });
+    const packageNodeModules = path.join(temporary, 'node_modules');
+    const cratisNodeModules = path.join(packageNodeModules, '@cratis');
+    const typesNodeModules = path.join(packageNodeModules, '@types');
+    mkdirSync(cratisNodeModules, { recursive: true });
+    mkdirSync(typesNodeModules, { recursive: true });
     symlinkSync(
         path.join(unpacked, 'package'),
-        path.join(nodeModules, 'components.conformance'),
+        path.join(cratisNodeModules, 'components.conformance'),
+        'dir',
+    );
+    symlinkSync(
+        path.join(repositoryDirectory, 'Source'),
+        path.join(cratisNodeModules, 'components'),
         'dir',
     );
+    for (const dependency of ['axe-core', 'react', 'react-dom']) {
+        symlinkSync(
+            path.join(repositoryDirectory, 'node_modules', dependency),
+            path.join(packageNodeModules, dependency),
+            'dir',
+        );
+    }
+    for (const dependency of ['react', 'react-dom']) {
+        symlinkSync(
+            path.join(repositoryDirectory, 'node_modules/@types', dependency),
+            path.join(typesNodeModules, dependency),
+            'dir',
+        );
+    }
+    writeFileSync(
+        path.join(temporary, 'runtime.mjs'),
+        "const api = await import('@cratis/components.conformance');\n" +
+            "if (typeof api.runConformance !== 'function') throw new Error('Packed runtime entry did not export runConformance.');\n",
+    );
+    run(process.execPath, ['runtime.mjs'], temporary);
     writeFileSync(
         path.join(temporary, 'fixture.ts'),
         "import { runConformance, type ConformanceReport } from '@cratis/components.conformance';\nvoid runConformance;\nconst report = undefined as unknown as ConformanceReport;\nvoid report;\n",
@@ -103,8 +157,8 @@ try {
     }
 
     console.log(
-        `Verified ${packageJson.name}@${packageJson.version}: archive contents, ABI metadata, ` +
-        'pure declarations, and strict Bundler/NodeNext consumers.',
+        `Verified ${packageJson.name}@${packageJson.version}: archive contents, independent ABI metadata, ` +
+        `${declarationFiles.length} pure declaration files, packed runtime import, and strict Bundler/NodeNext consumers.`,
     );
 } finally {
     rmSync(temporary, { recursive: true, force: true });
diff --git a/Conformance/src/runConformance.tsx b/Conformance/src/runConformance.tsx
index bd459f2c..8bca04a7 100644
--- a/Conformance/src/runConformance.tsx
+++ b/Conformance/src/runConformance.tsx
@@ -91,11 +91,12 @@ const mount = async (
     declaration: unstable_SlotDeclaration<unstable_SlotId>,
     props: Readonly<Record<string, unknown>>,
     refCapable: boolean,
+    host: ParentNode = document.body,
 ): Promise<MountedFixture> => {
     const container = document.createElement('div');
     const form = document.createElement('form');
     container.append(form);
-    document.body.append(container);
+    host.append(container);
     const root = createRoot(form);
     const ref = createRef<Element>();
     await act(async () => {
@@ -269,6 +270,24 @@ const checkManifest = (
         undefined,
         { problems: overDeclarations },
     );
+
+    const immutable =
+        Object.isFrozen(library) &&
+        Object.isFrozen(library.capabilities) &&
+        Object.isFrozen(library.profileSlots) &&
+        Object.isFrozen(library.slots) &&
+        Object.values(library.slots).every(
+            (declaration) => declaration === undefined || Object.isFrozen(declaration),
+        );
+    addCheck(
+        checks,
+        ConformanceFamily.Manifest,
+        'manifest.immutable',
+        immutable,
+        immutable
+            ? 'The runtime manifest, capability/profile arrays, slot map, and declarations are immutable.'
+            : 'The runtime manifest contains a mutable public container or slot declaration.',
+    );
 };
 
 const checkNormalization = (checks: ConformanceCheck[], document: Document) => {
@@ -489,8 +508,8 @@ const checkSlot = async (
             `ownership.${profile.slotId}`,
             ownershipPassed,
             ownershipPassed
-                ? `${typedDeclaration.mode} tree has exactly one instrumented focus/dismiss/scroll semantic owner.`
-                : `Expected one owner for each selector; observed ${ownerCounts.join(', ')}.`,
+                ? `${typedDeclaration.mode} tree exposes exactly one declared interactive semantic root for each bounded selector.`
+                : `Expected one interactive semantic root for each selector; observed ${ownerCounts.join(', ')}.`,
             profile.slotId,
             {
                 mode: typedDeclaration.mode,
@@ -658,7 +677,7 @@ const checkServerRendering = (
     library: unstable_UiLibrary,
     profiles: readonly SlotProfile[],
 ) => {
-    const outputs: string[] = [];
+    const outputs = new Map<unstable_SlotId, string>();
     for (const profile of profiles) {
         const declaration = library.slots[profile.slotId];
         if (!declaration) continue;
@@ -671,7 +690,7 @@ const checkServerRendering = (
             );
             const first = renderToString(element);
             const second = renderToString(element);
-            outputs.push(first);
+            outputs.set(profile.slotId, first);
             addCheck(
                 checks,
                 ConformanceFamily.ServerRendering,
@@ -693,35 +712,37 @@ const checkServerRendering = (
             );
         }
     }
-    const tooltipIndex = profiles.findIndex(
-        (profile) => profile.slotId === 'common.tooltip',
-    );
-    const dialogIndex = profiles.findIndex(
-        (profile) => profile.slotId === 'dialogs.dialog',
-    );
+    const tooltipOutput = outputs.get('common.tooltip');
+    const dialogOutput = outputs.get('dialogs.dialog');
     const overlayPassed =
-        (tooltipIndex < 0 ||
-            !outputs[tooltipIndex]?.includes('data-cratis-part="popup"')) &&
-        (dialogIndex < 0 || outputs[dialogIndex]?.includes('role="dialog"'));
+        (tooltipOutput === undefined ||
+            !tooltipOutput.includes('data-cratis-part="popup"')) &&
+        (dialogOutput === undefined || dialogOutput.includes('role="dialog"'));
     addCheck(
         checks,
         ConformanceFamily.ServerRendering,
         'ssr.overlayAbsentPresent',
         overlayPassed,
         overlayPassed
-            ? 'Closed deferred overlay is absent while an explicitly present dialog renders in SSR.'
-            : 'SSR overlay absent/present semantics differ from the contract.',
+            ? 'The closed tooltip omits its deferred popup while the explicitly present dialog renders during SSR.'
+            : 'SSR overlay absent/present semantics differ from the bounded fixtures.',
+        undefined,
+        {
+            tooltipObserved: tooltipOutput !== undefined,
+            dialogObserved: dialogOutput !== undefined,
+        },
     );
+    const distinctOutputs = new Set(outputs.values()).size === outputs.size;
     addCheck(
         checks,
         ConformanceFamily.ServerRendering,
-        'ssr.concurrentManifestIsolation',
-        new Set(outputs).size === outputs.length,
-        new Set(outputs).size === outputs.length
-            ? 'Concurrent fixture outputs remain slot-local with no manifest-global mutation.'
-            : 'Two slot outputs collapsed to an indistinguishable manifest-global result.',
+        'ssr.slotOutputIsolation',
+        distinctOutputs,
+        distinctOutputs
+            ? 'Each exercised slot produced a distinct slot-local server-rendered output.'
+            : 'Two exercised slots collapsed to indistinguishable server-rendered output.',
         undefined,
-        { slots: outputs.length },
+        { slots: [...outputs.keys()] },
     );
 };
 
@@ -780,27 +801,76 @@ const checkHydration = async (
     );
 };
 
-const checkEnvironmentalEvidence = (checks: ConformanceCheck[], document: Document) => {
-    const host = document.createElement('div');
+const checkEnvironmentalEvidence = async (
+    checks: ConformanceCheck[],
+    document: Document,
+    library: unstable_UiLibrary,
+    profiles: readonly SlotProfile[],
+) => {
+    const profile =
+        profiles.find((candidate) => candidate.slotId === 'common.button') ?? profiles[0];
+    const declaration = profile && library.slots[profile.slotId];
+    if (!profile || !declaration) {
+        for (const mode of ['rtl', 'forcedColors', 'motion.reduced'] as const) {
+            addCheck(
+                checks,
+                ConformanceFamily.Accessibility,
+                `a11y.environment.${mode}`,
+                false,
+                'No renderable slot is available for bounded environmental-host evidence.',
+            );
+        }
+        return;
+    }
+
+    const host = document.createElement('section');
     host.dir = 'rtl';
     host.style.setProperty('forced-color-adjust', 'auto');
     host.style.setProperty('transition-duration', '0s');
     document.body.append(host);
-    const passed =
-        host.dir === 'rtl' &&
-        host.style.forcedColorAdjust === 'auto' &&
-        host.style.transitionDuration === '0s';
-    host.remove();
-    for (const mode of ['rtl', 'forcedColors', 'motion.reduced'] as const) {
-        addCheck(
-            checks,
-            ConformanceFamily.Accessibility,
-            `a11y.environment.${mode}`,
-            passed,
-            passed
-                ? `${mode} execution input was accepted by the bounded DOM fixture.`
-                : `${mode} execution input was not preserved.`,
+    let fixture: MountedFixture | undefined;
+    try {
+        fixture = await mount(
+            document,
+            declaration as unstable_SlotDeclaration<unstable_SlotId>,
+            profile.createProps(),
+            profile.refCapable,
+            host,
         );
+        const native = fixture.container.querySelector(profile.nativeSelector);
+        const inputs = {
+            rtl: Boolean(native) && native?.closest('[dir="rtl"]') === host,
+            forcedColors:
+                Boolean(native) && host.style.forcedColorAdjust === 'auto',
+            'motion.reduced':
+                Boolean(native) && host.style.transitionDuration === '0s',
+        } as const;
+        for (const mode of ['rtl', 'forcedColors', 'motion.reduced'] as const) {
+            addCheck(
+                checks,
+                ConformanceFamily.Accessibility,
+                `a11y.environment.${mode}`,
+                inputs[mode],
+                inputs[mode]
+                    ? `The ${profile.slotId} fixture rendered inside the bounded ${mode} DOM host input.`
+                    : `The ${profile.slotId} fixture did not preserve the bounded ${mode} DOM host input.`,
+                profile.slotId,
+                { selector: profile.nativeSelector },
+            );
+        }
+    } catch (error) {
+        for (const mode of ['rtl', 'forcedColors', 'motion.reduced'] as const) {
+            addError(
+                checks,
+                ConformanceFamily.Accessibility,
+                `a11y.environment.${mode}`,
+                error,
+                profile.slotId,
+            );
+        }
+    } finally {
+        if (fixture) await unmount(fixture);
+        host.remove();
     }
 };
 
@@ -835,7 +905,7 @@ export const runConformance = async (
             await checkSlot(checks, rendererLibrary, options, document, profile);
         checkServerRendering(checks, rendererLibrary, profiles);
         await checkHydration(checks, rendererLibrary, profiles, document);
-        checkEnvironmentalEvidence(checks, document);
+        await checkEnvironmentalEvidence(checks, document, rendererLibrary, profiles);
     } else {
         addCheck(
             checks,
@@ -846,14 +916,6 @@ export const runConformance = async (
         );
     }
 
-    addCheck(
-        checks,
-        ConformanceFamily.TypePurity,
-        'typePurity.publishedDeclarations',
-        true,
-        'Published-package verification compiles this API under Bundler and NodeNext with skipLibCheck false; runtime reports reference that external gate.',
-    );
-
     const summary = {
         total: checks.length,
         passed: checks.filter((check) => check.status === ConformanceStatus.Passed)
diff --git a/Source/CONFORMANCE.md b/Source/CONFORMANCE.md
index ea7ffe28..c679c834 100644
--- a/Source/CONFORMANCE.md
+++ b/Source/CONFORMANCE.md
@@ -7,9 +7,12 @@ The opt-in `@cratis/components/renderer/builtin` manifest is exercised by
 `@cratis/components.conformance` against all fourteen renderer ABI v1 slots. The repository gate
 requires every bounded check to pass with zero skips, validates the package's static `cratis`
 metadata against the public adapter schema, and plants dropped-ref, omitted-part,
-over-declared-capability, unjustified-skip, and duplicate-owner defects to prove exact failures.
+over-declared-capability, unjustified-skip, and duplicate-semantic-root defects with exact failure
+sets.
 
 This is automated repository evidence, not a universal accessibility or browser claim. axe, jsdom
-forms/events, deterministic SSR/hydration, RTL, forced-colors, and reduced-motion inputs do not
-replace manual assistive-technology review or the separate Storybook browser/axe gate. See the
-conformance package's `CONFORMANCE.md` for the complete evidence boundary.
+forms/events, deterministic SSR/hydration, and bounded environmental DOM hosts do not replace
+manual assistive-technology review or the separate Storybook browser/axe gate. Semantic-root
+counts do not instrument vendor focus traps, dismissal listeners, or scroll locks, and slot-local
+SSR output does not prove cross-process request isolation. See the conformance package's
+`CONFORMANCE.md` for the complete evidence boundary.

From a60a531575d45ecadc33ea66a25256f561a34ffa Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 23:26:14 +0200
Subject: [PATCH 207/267] Format conformance review fixes

---
 .../when_detecting_planted_defects.tsx        | 16 ++---
 .../when_running_the_builtin_manifest.tsx     | 20 +++---
 Conformance/scripts/verify-packed-package.mjs | 65 +++++++++++--------
 Conformance/src/runConformance.tsx            |  6 +-
 4 files changed, 59 insertions(+), 48 deletions(-)

diff --git a/Conformance/for_conformance/when_detecting_planted_defects.tsx b/Conformance/for_conformance/when_detecting_planted_defects.tsx
index fc5bc8a1..57ede790 100644
--- a/Conformance/for_conformance/when_detecting_planted_defects.tsx
+++ b/Conformance/for_conformance/when_detecting_planted_defects.tsx
@@ -56,7 +56,10 @@ const metadataFor = (library: unstable_UiLibrary) => {
         export: 'TestFixture',
         slots,
         modes: Object.fromEntries(
-            slots.map((slotId) => [slotId, library.slots[slotId as unstable_SlotId]?.mode]),
+            slots.map((slotId) => [
+                slotId,
+                library.slots[slotId as unstable_SlotId]?.mode,
+            ]),
         ),
         capabilities: [...library.capabilities],
         ssr: 'safe',
@@ -108,8 +111,7 @@ describe('when detecting planted adapter defects', () => {
             (props, ref) => {
                 // SAFETY: The planted fixture reads only the typed root pass-through attributes.
                 const pt = props.pt as
-                    | { readonly root?: HTMLAttributes<HTMLElement> }
-                    | undefined;
+                    { readonly root?: HTMLAttributes<HTMLElement> } | undefined;
                 return createElement(
                     'article',
                     {
@@ -143,9 +145,7 @@ describe('when detecting planted adapter defects', () => {
             'paging.server',
         ]);
 
-        expect(await failureIds(library)).to.deep.equal([
-            'manifest.noOverDeclaration',
-        ]);
+        expect(await failureIds(library)).to.deep.equal(['manifest.noOverDeclaration']);
     });
 
     it('should reject an undeclared skip', async () => {
@@ -181,8 +181,6 @@ describe('when detecting planted adapter defects', () => {
             render: duplicateOwnerRender,
         });
 
-        expect(await failureIds(library)).to.deep.equal([
-            'ownership.dialogs.dialog',
-        ]);
+        expect(await failureIds(library)).to.deep.equal(['ownership.dialogs.dialog']);
     });
 });
diff --git a/Conformance/for_conformance/when_running_the_builtin_manifest.tsx b/Conformance/for_conformance/when_running_the_builtin_manifest.tsx
index 91c62424..3276067f 100644
--- a/Conformance/for_conformance/when_running_the_builtin_manifest.tsx
+++ b/Conformance/for_conformance/when_running_the_builtin_manifest.tsx
@@ -28,15 +28,17 @@ describe('when running the built-in renderer manifest', () => {
         expect(report.summary.total).to.equal(148);
         expect(report.summary.passed).to.equal(148);
         expect(report.summary.skipped).to.equal(0);
-        expect(report.checks.find((check) => check.id === 'manifest.immutable')?.status).to.equal(
-            'passed',
-        );
-        expect(report.checks.some((check) => check.id === 'typePurity.publishedDeclarations')).to.equal(
-            false,
-        );
-        expect(report.checks.some((check) => check.id === 'ssr.slotOutputIsolation')).to.equal(
-            true,
-        );
+        expect(
+            report.checks.find((check) => check.id === 'manifest.immutable')?.status,
+        ).to.equal('passed');
+        expect(
+            report.checks.some(
+                (check) => check.id === 'typePurity.publishedDeclarations',
+            ),
+        ).to.equal(false);
+        expect(
+            report.checks.some((check) => check.id === 'ssr.slotOutputIsolation'),
+        ).to.equal(true);
         expect(Object.keys(unstable_cratisBuiltIn.slots)).to.have.lengthOf(14);
     }, 30_000);
 
diff --git a/Conformance/scripts/verify-packed-package.mjs b/Conformance/scripts/verify-packed-package.mjs
index 77c4288e..5284571c 100644
--- a/Conformance/scripts/verify-packed-package.mjs
+++ b/Conformance/scripts/verify-packed-package.mjs
@@ -21,13 +21,17 @@ const temporary = mkdtempSync(path.join(os.tmpdir(), 'cratis-conformance-package
 const run = (command, arguments_, cwd = packageDirectory) => {
     const result = spawnSync(command, arguments_, { cwd, encoding: 'utf8' });
     if (result.status !== 0) {
-        throw new Error(`${command} ${arguments_.join(' ')} failed:\n${result.stdout}${result.stderr}`);
+        throw new Error(
+            `${command} ${arguments_.join(' ')} failed:\n${result.stdout}${result.stderr}`,
+        );
     }
     return result.stdout;
 };
 
 try {
-    const packedJson = JSON.parse(run('npm', ['pack', '--json', '--pack-destination', temporary]));
+    const packedJson = JSON.parse(
+        run('npm', ['pack', '--json', '--pack-destination', temporary]),
+    );
     const packed = packedJson[0];
     const fileNames = new Set(packed.files.map((file) => file.path));
     for (const required of [
@@ -38,7 +42,8 @@ try {
         'LICENSE',
         'package.json',
     ]) {
-        if (!fileNames.has(required)) throw new Error(`Packed archive is missing '${required}'.`);
+        if (!fileNames.has(required))
+            throw new Error(`Packed archive is missing '${required}'.`);
     }
     if ([...fileNames].some((file) => /(?:for_|vitest|\.tsbuildinfo)/u.test(file))) {
         throw new Error('Packed archive contains test or build-cache files.');
@@ -48,7 +53,9 @@ try {
     const unpacked = path.join(temporary, 'unpacked');
     mkdirSync(unpacked);
     run('tar', ['-xzf', archive, '-C', unpacked]);
-    const packageJson = JSON.parse(readFileSync(path.join(unpacked, 'package/package.json'), 'utf8'));
+    const packageJson = JSON.parse(
+        readFileSync(path.join(unpacked, 'package/package.json'), 'utf8'),
+    );
     const sourcePackageJson = JSON.parse(
         readFileSync(path.join(repositoryDirectory, 'Source/package.json'), 'utf8'),
     );
@@ -63,7 +70,9 @@ try {
         );
     }
     if (packageJson.dependencies?.['@cratis/components']) {
-        throw new Error('Conformance must not install Components as a runtime dependency.');
+        throw new Error(
+            'Conformance must not install Components as a runtime dependency.',
+        );
     }
 
     const declarationFiles = [...fileNames].filter((file) => file.endsWith('.d.ts'));
@@ -134,31 +143,35 @@ try {
     const typescript = path.join(repositoryDirectory, 'node_modules/typescript/bin/tsc');
     for (const resolution of ['bundler', 'nodenext']) {
         const moduleKind = resolution === 'bundler' ? 'ESNext' : 'NodeNext';
-        run(process.execPath, [
-            typescript,
-            '--ignoreConfig',
-            '--noEmit',
-            '--strict',
-            '--skipLibCheck',
-            'false',
-            '--target',
-            'ES2022',
-            '--module',
-            moduleKind,
-            '--moduleResolution',
-            resolution,
-            '--jsx',
-            'react-jsx',
-            '--lib',
-            'ESNext,DOM,DOM.Iterable',
-            'fixture.ts',
-            'jsx-shim.d.ts',
-        ], temporary);
+        run(
+            process.execPath,
+            [
+                typescript,
+                '--ignoreConfig',
+                '--noEmit',
+                '--strict',
+                '--skipLibCheck',
+                'false',
+                '--target',
+                'ES2022',
+                '--module',
+                moduleKind,
+                '--moduleResolution',
+                resolution,
+                '--jsx',
+                'react-jsx',
+                '--lib',
+                'ESNext,DOM,DOM.Iterable',
+                'fixture.ts',
+                'jsx-shim.d.ts',
+            ],
+            temporary,
+        );
     }
 
     console.log(
         `Verified ${packageJson.name}@${packageJson.version}: archive contents, independent ABI metadata, ` +
-        `${declarationFiles.length} pure declaration files, packed runtime import, and strict Bundler/NodeNext consumers.`,
+            `${declarationFiles.length} pure declaration files, packed runtime import, and strict Bundler/NodeNext consumers.`,
     );
 } finally {
     rmSync(temporary, { recursive: true, force: true });
diff --git a/Conformance/src/runConformance.tsx b/Conformance/src/runConformance.tsx
index 8bca04a7..a8ff1aa7 100644
--- a/Conformance/src/runConformance.tsx
+++ b/Conformance/src/runConformance.tsx
@@ -840,10 +840,8 @@ const checkEnvironmentalEvidence = async (
         const native = fixture.container.querySelector(profile.nativeSelector);
         const inputs = {
             rtl: Boolean(native) && native?.closest('[dir="rtl"]') === host,
-            forcedColors:
-                Boolean(native) && host.style.forcedColorAdjust === 'auto',
-            'motion.reduced':
-                Boolean(native) && host.style.transitionDuration === '0s',
+            forcedColors: Boolean(native) && host.style.forcedColorAdjust === 'auto',
+            'motion.reduced': Boolean(native) && host.style.transitionDuration === '0s',
         } as const;
         for (const mode of ['rtl', 'forcedColors', 'motion.reduced'] as const) {
             addCheck(

From 4065d8048fdbc8ff4b85f69886435e2c57700e8a Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Thu, 27 Aug 2026 23:40:44 +0200
Subject: [PATCH 208/267] Update Arc public type exception metadata

---
 Source/scripts/verify-public-types.exceptions.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/Source/scripts/verify-public-types.exceptions.json b/Source/scripts/verify-public-types.exceptions.json
index de800c86..d232f1a2 100644
--- a/Source/scripts/verify-public-types.exceptions.json
+++ b/Source/scripts/verify-public-types.exceptions.json
@@ -19,7 +19,7 @@
             "id": "arc-react-global-jsx-namespace",
             "summary": "@cratis/arc.react ships a global.d.ts that declares `namespace JSX` referencing test-only ambient types (vitest/globals, chai, sinon-chai) as part of its published package instead of scoping that augmentation to its own test build. A strict external consumer that does not also install those test packages cannot resolve the bare `JSX` identifiers arc.react's dialog/command declaration files reference.",
             "reason": "external - @cratis/arc.react's own shipped .d.ts, not a Components declaration; Components has no `namespace JSX` augmentation of its own.",
-            "upstreamPackages": [{ "name": "@cratis/arc.react", "version": "22.3.0" }],
+            "upstreamPackages": [{ "name": "@cratis/arc.react", "version": "22.4.0" }],
             "resolutionModes": ["bundler"],
             "diagnosticCodes": ["TS2503"],
             "filePrefixes": ["@cratis/arc.react/"],
@@ -30,8 +30,8 @@
             "summary": "@cratis/arc, @cratis/arc.react, and @cratis/fundamentals publish ESM declaration files with extensionless relative specifiers (e.g. `export * from './ICommandScope'`). Node16/NodeNext module resolution requires an explicit extension on relative ECMAScript imports, so these upstream barrels fail under --moduleResolution nodenext; downstream symbols that transit through the broken barrel then read as missing (TS2305/TS2694 cascades).",
             "reason": "external - the extensionless specifiers live in @cratis/arc, @cratis/arc.react, and @cratis/fundamentals's own published dist, not in Components' declarations. Cratis/Components' own declaration rewrite (this PR) already eliminated Components' extensionless specifiers.",
             "upstreamPackages": [
-                { "name": "@cratis/arc", "version": "22.3.0" },
-                { "name": "@cratis/arc.react", "version": "22.3.0" },
+                { "name": "@cratis/arc", "version": "22.4.0" },
+                { "name": "@cratis/arc.react", "version": "22.4.0" },
                 { "name": "@cratis/fundamentals", "version": "7.18.1" }
             ],
             "resolutionModes": ["nodenext"],

From 4d5d387f70469cf7fe1b0b65033f45140db38299 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Fri, 28 Aug 2026 00:16:20 +0200
Subject: [PATCH 209/267] Exclude generated Storybook fonts from packages

---
 Source/scripts/copy-css.sh                |  9 +++++----
 Source/scripts/verify-package-archive.mjs | 12 ++++++++++++
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/Source/scripts/copy-css.sh b/Source/scripts/copy-css.sh
index e430a89c..06dc00e9 100755
--- a/Source/scripts/copy-css.sh
+++ b/Source/scripts/copy-css.sh
@@ -29,11 +29,12 @@ done
 # components would need a rethink (a subfolder plus matching url() rewrite), but nothing ships one yet.
 # `find`, not a bash 4+ `globstar` glob, because macOS ships bash 3.2 as `/bin/bash`.
 find . -path ./dist -prune -o -path ./node_modules -prune -o \
+    -path ./storybook-static -prune -o \
     \( -iname '*.woff2' -o -iname '*.woff' -o -iname '*.ttf' -o -iname '*.otf' \) -print |
-while IFS= read -r font; do
-    cp "$font" "dist/esm/$(basename "$font")"
-    echo "Copied $(basename "$font")"
-done
+    while IFS= read -r font; do
+        cp "$font" "dist/esm/$(basename "$font")"
+        echo "Copied $(basename "$font")"
+    done
 
 # Patrick Hand is distributed under the SIL Open Font License. Keep its notice beside the
 # packaged font binaries so every redistributed archive carries the required license text.
diff --git a/Source/scripts/verify-package-archive.mjs b/Source/scripts/verify-package-archive.mjs
index 849758dc..bbafa44d 100644
--- a/Source/scripts/verify-package-archive.mjs
+++ b/Source/scripts/verify-package-archive.mjs
@@ -50,6 +50,18 @@ if (missing.length > 0) {
     );
     process.exit(1);
 }
+const expectedFonts = new Set(
+    requiredEntries.filter((entry) => /\.(?:otf|ttf|woff2?)$/iu.test(entry)),
+);
+const unexpectedFonts = [...entries].filter(
+    (entry) => /\.(?:otf|ttf|woff2?)$/iu.test(entry) && !expectedFonts.has(entry),
+);
+if (unexpectedFonts.length > 0) {
+    console.error(
+        `Package archive contains undeclared font assets:\n- ${unexpectedFonts.join('\n- ')}`,
+    );
+    process.exit(1);
+}
 
 const verifyPackedMarkdownLinks = (entry) => {
     const markdown = readPackedText(entry);

From 8868769baa928a44e5533f49b3b39a349cc69bf0 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Fri, 28 Aug 2026 00:39:33 +0200
Subject: [PATCH 210/267] Verify package graph report output

---
 Source/package.json                           |  3 +-
 .../scripts/verify-package-graph-report.mjs   | 56 +++++++++++++++++++
 Source/scripts/verify-package-graph.mjs       | 10 ++--
 3 files changed, 62 insertions(+), 7 deletions(-)
 create mode 100644 Source/scripts/verify-package-graph-report.mjs

diff --git a/Source/package.json b/Source/package.json
index c8f6d4e2..247f41b6 100644
--- a/Source/package.json
+++ b/Source/package.json
@@ -220,6 +220,7 @@
         "verify-api-docs": "node ./scripts/verify-api-docs.mjs",
         "verify-public-types": "node ./scripts/verify-public-types.mjs",
         "verify-package-graph": "node ./scripts/verify-package-graph.mjs",
+        "verify-package-graph-report": "node ./scripts/verify-package-graph-report.mjs",
         "verify-no-pixi-consumer": "node ./scripts/verify-no-pixi-consumer.mjs",
         "verify-spatial-consumer": "node ./scripts/verify-spatial-consumer.mjs",
         "verify-provider-context-identity": "node ./scripts/verify-provider-context-identity.mjs",
@@ -232,7 +233,7 @@
         "lint": "yarn g:lint",
         "lint:ci": "yarn g:lint:ci",
         "test": "yarn g:test",
-        "ci": "yarn generate-parts && yarn verify-parts-manifest && yarn g:ci && yarn typecheck-stories && yarn g:build && yarn verify-renderer-contracts",
+        "ci": "yarn generate-parts && yarn verify-parts-manifest && yarn g:ci && yarn typecheck-stories && yarn g:build && yarn verify-renderer-contracts && yarn verify-package-graph-report",
         "up": "yarn g:up",
         "dev": "npx storybook dev -p 6006",
         "build-storybook": "npx storybook build"
diff --git a/Source/scripts/verify-package-graph-report.mjs b/Source/scripts/verify-package-graph-report.mjs
new file mode 100644
index 00000000..7afdbf5a
--- /dev/null
+++ b/Source/scripts/verify-package-graph-report.mjs
@@ -0,0 +1,56 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { spawnSync } from 'node:child_process';
+import { mkdtempSync, readFileSync, rmSync } from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const packageDirectory = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const temporary = mkdtempSync(path.join(os.tmpdir(), 'cratis-package-graph-report-'));
+const reportPath = path.join(temporary, 'report.json');
+
+try {
+    const result = spawnSync(
+        process.execPath,
+        ['scripts/verify-package-graph.mjs', '--report', reportPath],
+        { cwd: packageDirectory, encoding: 'utf8' },
+    );
+    process.stdout.write(result.stdout);
+    process.stderr.write(result.stderr);
+    if (result.status !== 0) {
+        throw new Error(
+            `Package graph report verification exited with ${String(result.status)}.`,
+        );
+    }
+
+    const report = JSON.parse(readFileSync(reportPath, 'utf8'));
+    if (
+        JSON.stringify(report.coreSlotIsolationSubpaths) !==
+        JSON.stringify(['./renderer/builtin'])
+    ) {
+        throw new Error(
+            'Package graph report contains the wrong Core-slot isolation subpaths.',
+        );
+    }
+    if (
+        JSON.stringify(report.leanCoreSlotSubpaths) !== JSON.stringify(['.', './Common'])
+    ) {
+        throw new Error(
+            'Package graph report contains the wrong lean Core-slot subpaths.',
+        );
+    }
+    if (!Array.isArray(report.kernelBoundary) || report.kernelBoundary.length !== 34) {
+        throw new Error(
+            'Package graph report must contain all 34 kernel boundary entries.',
+        );
+    }
+    if (!Array.isArray(report.violations) || report.violations.length !== 0) {
+        throw new Error('Package graph report contains module-boundary violations.');
+    }
+
+    console.log('Package graph report metadata and all 34 kernel entries verified.');
+} finally {
+    rmSync(temporary, { recursive: true, force: true });
+}
diff --git a/Source/scripts/verify-package-graph.mjs b/Source/scripts/verify-package-graph.mjs
index 39fc608b..f793b4ed 100644
--- a/Source/scripts/verify-package-graph.mjs
+++ b/Source/scripts/verify-package-graph.mjs
@@ -223,8 +223,8 @@ for (const sourcePath of kernelSourcePaths) {
 
     if (!existsSync(runtimeEntry) || !existsSync(declarationEntry)) {
         const missing = [
-            !existsSync(runtimeEntry) ? runtimeEntryRelative : undefined,
-            !existsSync(declarationEntry) ? declarationEntryRelative : undefined,
+            existsSync(runtimeEntry) ? undefined : runtimeEntryRelative,
+            existsSync(declarationEntry) ? undefined : declarationEntryRelative,
         ].filter(Boolean);
         violations.push(
             `${sourcePath}: declared kernel module is missing emitted output: ${missing.join(', ')}.`,
@@ -323,6 +323,7 @@ const componentImplementationDirectories = [
     ),
 ].sort();
 const BUILTIN_RENDERER_SUBPATH = './renderer/builtin';
+const coreSlotIsolationSubpaths = new Set([BUILTIN_RENDERER_SUBPATH]);
 const leanCoreSlotSubpaths = new Set(['.', './Common']);
 const coreSlotCrossFamilyDirectories = [
     'DataTables/',
@@ -338,10 +339,7 @@ for (const row of subpathReports) {
         ['declaration', row.declarations],
     ]) {
         const coreSlotFiles = reachesCoreSlots(closure);
-        if (
-            coreSlotFiles.length > 0 &&
-            row.subpath !== BUILTIN_RENDERER_SUBPATH
-        ) {
+        if (coreSlotFiles.length > 0 && row.subpath !== BUILTIN_RENDERER_SUBPATH) {
             violations.push(
                 `${row.subpath}: ${kind} closure reaches private all-family Core slot table; ` +
                     `only ${BUILTIN_RENDERER_SUBPATH} may reach ${coreSlotFiles.join(', ')}.`,

From 2995480ab25563364e058e765cbd20fccae8d292 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Fri, 28 Aug 2026 01:02:33 +0200
Subject: [PATCH 211/267] Add plain DOM renderer conformance fixture

---
 .../given/plainDomPresentationMetadata.json   |  54 ++
 .../given/plainDomPresentationRenderer.tsx    | 594 ++++++++++++++++++
 ...unning_the_stable_presentation_profile.tsx | 117 ++++
 3 files changed, 765 insertions(+)
 create mode 100644 Conformance/for_plain_dom_renderer/given/plainDomPresentationMetadata.json
 create mode 100644 Conformance/for_plain_dom_renderer/given/plainDomPresentationRenderer.tsx
 create mode 100644 Conformance/for_plain_dom_renderer/when_running_the_stable_presentation_profile.tsx

diff --git a/Conformance/for_plain_dom_renderer/given/plainDomPresentationMetadata.json b/Conformance/for_plain_dom_renderer/given/plainDomPresentationMetadata.json
new file mode 100644
index 00000000..58d2c4c7
--- /dev/null
+++ b/Conformance/for_plain_dom_renderer/given/plainDomPresentationMetadata.json
@@ -0,0 +1,54 @@
+{
+    "kind": "ui-adapter",
+    "id": "plain-dom-falsification-fixture",
+    "displayName": "Plain DOM falsification fixture",
+    "abi": "^1",
+    "level": "primitive",
+    "profile": "stable-presentation/v1",
+    "category": "test-fixture",
+    "entry": "./fixtures/plain-dom/index.js",
+    "export": "plainDomPresentationRenderer",
+    "slots": [
+        "common.button",
+        "common.iconButton",
+        "common.textInput",
+        "common.textArea",
+        "common.checkbox",
+        "common.radio",
+        "common.switch",
+        "common.progress",
+        "common.surface"
+    ],
+    "modes": {
+        "common.button": "presentation",
+        "common.iconButton": "presentation",
+        "common.textInput": "presentation",
+        "common.textArea": "presentation",
+        "common.checkbox": "presentation",
+        "common.radio": "presentation",
+        "common.switch": "presentation",
+        "common.progress": "presentation",
+        "common.surface": "presentation"
+    },
+    "capabilities": [
+        "slot.render",
+        "parts.passthrough",
+        "form.validationMessage",
+        "ssr.staticRender",
+        "rtl",
+        "forcedColors",
+        "motion.reduced"
+    ],
+    "ssr": "safe",
+    "a11y": {
+        "axeProfile": "wcag22aa",
+        "evidence": "./CONFORMANCE.md"
+    },
+    "license": {
+        "spdx": "MIT",
+        "requiresKey": false
+    },
+    "upstream": {
+        "react": "^19.0.0"
+    }
+}
diff --git a/Conformance/for_plain_dom_renderer/given/plainDomPresentationRenderer.tsx b/Conformance/for_plain_dom_renderer/given/plainDomPresentationRenderer.tsx
new file mode 100644
index 00000000..0e64dd97
--- /dev/null
+++ b/Conformance/for_plain_dom_renderer/given/plainDomPresentationRenderer.tsx
@@ -0,0 +1,594 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import {
+    forwardRef,
+    useCallback,
+    useEffect,
+    useRef,
+    useState,
+    type ChangeEvent,
+    type ForwardedRef,
+    type InputHTMLAttributes,
+    type ReactNode,
+} from 'react';
+import type {
+    ButtonProps,
+    CheckboxParts,
+    CheckboxProps,
+    IconButtonProps,
+    RadioParts,
+    RadioProps,
+    SurfaceProps,
+    SwitchParts,
+    SwitchProps,
+    TextAreaProps,
+    TextInputProps,
+} from '@cratis/components/Common';
+import type { ProgressBarProps } from '@cratis/components/Display';
+import {
+    unstable_CRATIS_UI_ABI_VERSION,
+    unstable_defineUiLibrary,
+    type unstable_CapabilityId,
+    type unstable_SlotDeclaration,
+    type unstable_SlotId,
+} from '@cratis/components/renderer';
+
+const profileSlots = Object.freeze([
+    'common.button',
+    'common.iconButton',
+    'common.textInput',
+    'common.textArea',
+    'common.checkbox',
+    'common.radio',
+    'common.switch',
+    'common.progress',
+    'common.surface',
+] satisfies readonly unstable_SlotId[]);
+
+const capabilities = Object.freeze([
+    'slot.render',
+    'parts.passthrough',
+    'form.validationMessage',
+    'ssr.staticRender',
+    'rtl',
+    'forcedColors',
+    'motion.reduced',
+] satisfies readonly unstable_CapabilityId[]);
+
+const classNames = (...values: readonly (string | undefined)[]) =>
+    values.filter(Boolean).join(' ');
+
+const assignRef = <T,>(ref: ForwardedRef<T>, value: T | null) => {
+    if (typeof ref === 'function') ref(value);
+    else if (ref) ref.current = value;
+};
+
+const stateAttributes = (
+    disabled: boolean | undefined,
+    invalid: boolean,
+    readOnly: boolean | undefined,
+    selected: boolean,
+) => ({
+    'data-disabled': disabled || undefined,
+    'data-invalid': invalid || undefined,
+    'data-readonly': readOnly || undefined,
+    'data-selected': selected || undefined,
+});
+
+interface CheckableState {
+    readonly ref: (element: HTMLInputElement | null) => void;
+    readonly selected: boolean;
+    readonly setSelected: (selected: boolean) => void;
+}
+
+const useCheckableState = (
+    checked: boolean | undefined,
+    defaultChecked: boolean | undefined,
+    forwardedRef: ForwardedRef<HTMLInputElement>,
+): CheckableState => {
+    const inputRef = useRef<HTMLInputElement>(null);
+    const [uncontrolledChecked, setUncontrolledChecked] = useState(
+        Boolean(defaultChecked),
+    );
+    const controlled = checked !== undefined;
+    const ref = useCallback(
+        (element: HTMLInputElement | null) => {
+            inputRef.current = element;
+            assignRef(forwardedRef, element);
+        },
+        [forwardedRef],
+    );
+
+    useEffect(() => {
+        const input = inputRef.current;
+        if (!input || controlled) return;
+        const synchronizeReset = () => {
+            queueMicrotask(() => setUncontrolledChecked(input.checked));
+        };
+        input.form?.addEventListener('reset', synchronizeReset);
+        return () => input.form?.removeEventListener('reset', synchronizeReset);
+    }, [controlled]);
+
+    return {
+        ref,
+        selected: checked ?? uncontrolledChecked,
+        setSelected: (selected) => {
+            if (!controlled) setUncontrolledChecked(selected);
+        },
+    };
+};
+
+const renderIcon = (icon: ReactNode) =>
+    typeof icon === 'string' ? <i className={icon} aria-hidden='true' /> : icon;
+
+const PlainButton = forwardRef<HTMLButtonElement, ButtonProps>(function PlainButton(
+    {
+        label,
+        icon,
+        loading = false,
+        pt,
+        variant = 'solid',
+        tone,
+        shape = 'default',
+        size = 'normal',
+        disabled,
+        type = 'button',
+        className,
+        style,
+        children,
+        ...nativeProps
+    },
+    ref,
+) {
+    const effectiveDisabled = Boolean(disabled || loading);
+    return (
+        <button
+            {...pt?.root}
+            {...nativeProps}
+            ref={ref}
+            type={type}
+            disabled={effectiveDisabled}
+            className={classNames('plain-dom-button', pt?.root?.className, className)}
+            style={{ ...pt?.root?.style, ...style }}
+            data-cratis-part='root'
+            data-variant={variant}
+            data-tone={tone}
+            data-shape={shape}
+            data-size={size}
+            data-disabled={effectiveDisabled || undefined}
+            data-loading={loading || undefined}
+            aria-busy={loading || undefined}
+        >
+            {loading ? (
+                <span
+                    {...pt?.spinner}
+                    className={classNames(
+                        'plain-dom-button__spinner',
+                        pt?.spinner?.className,
+                    )}
+                    data-cratis-part='spinner'
+                    aria-hidden='true'
+                />
+            ) : icon ? (
+                <span
+                    {...pt?.icon}
+                    className={classNames(
+                        'plain-dom-button__icon',
+                        pt?.icon?.className,
+                    )}
+                    data-cratis-part='icon'
+                    aria-hidden={pt?.icon?.['aria-hidden'] ?? true}
+                >
+                    {renderIcon(icon)}
+                </span>
+            ) : null}
+            {(label !== undefined || children !== undefined) && (
+                <span
+                    {...pt?.label}
+                    className={classNames(
+                        'plain-dom-button__label',
+                        pt?.label?.className,
+                    )}
+                    data-cratis-part='label'
+                >
+                    {label}
+                    {children}
+                </span>
+            )}
+        </button>
+    );
+});
+
+const PlainIconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+    function PlainIconButton({ shape = 'pill', ...props }, ref) {
+        return <PlainButton {...props} ref={ref} shape={shape} />;
+    },
+);
+
+const PlainTextInput = forwardRef<HTMLInputElement, TextInputProps>(
+    function PlainTextInput(
+        {
+            type = 'text',
+            invalid = false,
+            onChange,
+            pt,
+            disabled,
+            readOnly,
+            className,
+            style,
+            'aria-invalid': ariaInvalid,
+            ...nativeProps
+        },
+        ref,
+    ) {
+        const effectiveDisabled = disabled ?? pt?.root?.disabled;
+        const effectiveReadOnly = readOnly ?? pt?.root?.readOnly;
+        const effectiveAriaInvalid =
+            ariaInvalid ?? pt?.root?.['aria-invalid'] ?? (invalid || undefined);
+        const effectiveInvalid =
+            invalid || effectiveAriaInvalid === true || effectiveAriaInvalid === 'true';
+        return (
+            <input
+                {...pt?.root}
+                {...nativeProps}
+                ref={ref}
+                type={type}
+                disabled={effectiveDisabled}
+                readOnly={effectiveReadOnly}
+                aria-invalid={effectiveAriaInvalid}
+                onChange={(event) => {
+                    pt?.root?.onChange?.(event);
+                    onChange?.(event.currentTarget.value, {
+                        source: 'user',
+                        nativeEvent: event.nativeEvent,
+                    });
+                }}
+                className={classNames(
+                    'plain-dom-text-input',
+                    pt?.root?.className,
+                    className,
+                )}
+                style={{ ...pt?.root?.style, ...style }}
+                data-cratis-part='root'
+                data-disabled={effectiveDisabled || undefined}
+                data-invalid={effectiveInvalid || undefined}
+                data-readonly={effectiveReadOnly || undefined}
+            />
+        );
+    },
+);
+
+const PlainTextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
+    function PlainTextArea(
+        {
+            invalid = false,
+            onChange,
+            pt,
+            disabled,
+            readOnly,
+            className,
+            style,
+            'aria-invalid': ariaInvalid,
+            ...nativeProps
+        },
+        ref,
+    ) {
+        const effectiveDisabled = disabled ?? pt?.root?.disabled;
+        const effectiveReadOnly = readOnly ?? pt?.root?.readOnly;
+        const effectiveAriaInvalid =
+            ariaInvalid ?? pt?.root?.['aria-invalid'] ?? (invalid || undefined);
+        const effectiveInvalid =
+            invalid || effectiveAriaInvalid === true || effectiveAriaInvalid === 'true';
+        return (
+            <textarea
+                {...pt?.root}
+                {...nativeProps}
+                ref={ref}
+                disabled={effectiveDisabled}
+                readOnly={effectiveReadOnly}
+                aria-invalid={effectiveAriaInvalid}
+                onChange={(event) => {
+                    pt?.root?.onChange?.(event);
+                    onChange?.(event.currentTarget.value, {
+                        source: 'user',
+                        nativeEvent: event.nativeEvent,
+                    });
+                }}
+                className={classNames(
+                    'plain-dom-text-area',
+                    pt?.root?.className,
+                    className,
+                )}
+                style={{ ...pt?.root?.style, ...style }}
+                data-cratis-part='root'
+                data-disabled={effectiveDisabled || undefined}
+                data-invalid={effectiveInvalid || undefined}
+                data-readonly={effectiveReadOnly || undefined}
+            />
+        );
+    },
+);
+
+type ChoiceProps = CheckboxProps | RadioProps | SwitchProps;
+type ChoiceParts = CheckboxParts | RadioParts | SwitchParts;
+type ChoiceKind = 'checkbox' | 'radio' | 'switch';
+
+interface PlainChoiceProps {
+    readonly kind: ChoiceKind;
+    readonly props: ChoiceProps;
+    readonly forwardedRef: ForwardedRef<HTMLInputElement>;
+}
+
+const PlainChoice = ({ kind, props, forwardedRef }: PlainChoiceProps) => {
+    const {
+        label,
+        readOnly,
+        invalid = false,
+        onChange,
+        className,
+        style,
+        pt: choiceParts,
+        checked,
+        defaultChecked,
+        disabled,
+        onClick,
+        'aria-invalid': ariaInvalid,
+        ...nativeProps
+    } = props;
+    const pt = choiceParts as ChoiceParts | undefined;
+    const inputPt = pt?.input as InputHTMLAttributes<HTMLInputElement> | undefined;
+    const effectiveChecked = checked ?? inputPt?.checked;
+    const effectiveDefaultChecked = defaultChecked ?? inputPt?.defaultChecked;
+    const effectiveDisabled = disabled ?? inputPt?.disabled;
+    const effectiveReadOnly = readOnly ?? inputPt?.readOnly;
+    const effectiveAriaInvalid =
+        ariaInvalid ?? inputPt?.['aria-invalid'] ?? (invalid || undefined);
+    const effectiveInvalid =
+        invalid || effectiveAriaInvalid === true || effectiveAriaInvalid === 'true';
+    const state = useCheckableState(
+        effectiveChecked,
+        effectiveDefaultChecked,
+        forwardedRef,
+    );
+    const attributes = stateAttributes(
+        effectiveDisabled,
+        effectiveInvalid,
+        effectiveReadOnly,
+        state.selected,
+    );
+    const rootPt = pt?.root;
+    const labelPt = pt?.label;
+    const boxPt =
+        kind === 'switch' ? undefined : (pt as CheckboxParts | undefined)?.box;
+    const indicatorPt =
+        kind === 'switch'
+            ? undefined
+            : (pt as CheckboxParts | undefined)?.indicator;
+    const controlPt =
+        kind === 'switch' ? (pt as SwitchParts | undefined)?.control : undefined;
+    const handlePt =
+        kind === 'switch' ? (pt as SwitchParts | undefined)?.handle : undefined;
+    const radioProps = props as RadioProps;
+
+    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+        inputPt?.onChange?.(event);
+        if (effectiveReadOnly || (kind === 'radio' && !event.currentTarget.checked))
+            return;
+        state.setSelected(event.currentTarget.checked);
+        onChange?.(event.currentTarget.checked, {
+            source: 'user',
+            nativeEvent: event.nativeEvent,
+        });
+    };
+
+    return (
+        <label
+            {...rootPt}
+            className={classNames('plain-dom-choice', rootPt?.className, className)}
+            style={{ ...rootPt?.style, ...style }}
+            data-cratis-part='root'
+            {...attributes}
+        >
+            <input
+                {...inputPt}
+                {...nativeProps}
+                ref={state.ref}
+                type={kind === 'radio' ? 'radio' : 'checkbox'}
+                role={kind === 'switch' ? 'switch' : undefined}
+                name={kind === 'radio' ? radioProps.name : nativeProps.name}
+                value={kind === 'radio' ? radioProps.value : nativeProps.value}
+                checked={effectiveChecked}
+                defaultChecked={
+                    effectiveChecked === undefined ? effectiveDefaultChecked : undefined
+                }
+                disabled={effectiveDisabled}
+                readOnly={undefined}
+                aria-invalid={effectiveAriaInvalid}
+                aria-readonly={effectiveReadOnly || undefined}
+                onClick={(event) => {
+                    inputPt?.onClick?.(event);
+                    onClick?.(event);
+                    if (effectiveReadOnly) event.preventDefault();
+                }}
+                onChange={handleChange}
+                className={classNames('plain-dom-choice__input', inputPt?.className)}
+                data-cratis-part='input'
+                {...attributes}
+            />
+            {kind === 'switch' ? (
+                <span
+                    {...controlPt}
+                    className={classNames(
+                        'plain-dom-switch__control',
+                        controlPt?.className,
+                    )}
+                    data-cratis-part='control'
+                    aria-hidden='true'
+                    {...attributes}
+                >
+                    <span
+                        {...handlePt}
+                        className={classNames(
+                            'plain-dom-switch__handle',
+                            handlePt?.className,
+                        )}
+                        data-cratis-part='handle'
+                        {...attributes}
+                    />
+                </span>
+            ) : (
+                <span
+                    {...boxPt}
+                    className={classNames(
+                        kind === 'radio'
+                            ? 'plain-dom-radio__box'
+                            : 'plain-dom-checkbox__box',
+                        boxPt?.className,
+                    )}
+                    data-cratis-part='box'
+                    aria-hidden='true'
+                    {...attributes}
+                >
+                    <span
+                        {...indicatorPt}
+                        className={classNames(
+                            kind === 'radio'
+                                ? 'plain-dom-radio__indicator'
+                                : 'plain-dom-checkbox__indicator',
+                            indicatorPt?.className,
+                        )}
+                        data-cratis-part='indicator'
+                        {...attributes}
+                    >
+                        {kind === 'checkbox' ? '✓' : undefined}
+                    </span>
+                </span>
+            )}
+            {label !== undefined && (
+                <span
+                    {...labelPt}
+                    className={classNames(
+                        'plain-dom-choice__label',
+                        labelPt?.className,
+                    )}
+                    data-cratis-part='label'
+                    {...attributes}
+                >
+                    {label}
+                </span>
+            )}
+        </label>
+    );
+};
+
+const PlainCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(
+    function PlainCheckbox(props, ref) {
+        return <PlainChoice kind='checkbox' props={props} forwardedRef={ref} />;
+    },
+);
+
+const PlainRadio = forwardRef<HTMLInputElement, RadioProps>(function PlainRadio(
+    props,
+    ref,
+) {
+    return <PlainChoice kind='radio' props={props} forwardedRef={ref} />;
+});
+
+const PlainSwitch = forwardRef<HTMLInputElement, SwitchProps>(function PlainSwitch(
+    props,
+    ref,
+) {
+    return <PlainChoice kind='switch' props={props} forwardedRef={ref} />;
+});
+
+const PlainProgress = ({
+    value = 0,
+    mode = 'determinate',
+    showValue = true,
+    'aria-label': ariaLabel = 'Progress',
+    'aria-labelledby': ariaLabelledBy,
+    className,
+}: ProgressBarProps) => {
+    const boundedValue = Math.min(100, Math.max(0, value));
+    const determinate = mode === 'determinate';
+    return (
+        <div
+            role='progressbar'
+            aria-label={ariaLabelledBy ? undefined : ariaLabel}
+            aria-labelledby={ariaLabelledBy}
+            aria-valuemin={determinate ? 0 : undefined}
+            aria-valuemax={determinate ? 100 : undefined}
+            aria-valuenow={determinate ? boundedValue : undefined}
+            className={classNames('plain-dom-progress', className)}
+            data-cratis-part='root'
+            data-busy={!determinate || boundedValue < 100 || undefined}
+            data-loading={!determinate || undefined}
+            data-mode={mode}
+        >
+            <span
+                className='plain-dom-progress__indicator'
+                data-cratis-part='indicator'
+                style={determinate ? { width: `${boundedValue}%` } : undefined}
+            >
+                {determinate && showValue && (
+                    <span
+                        className='plain-dom-progress__label'
+                        data-cratis-part='label'
+                    >
+                        {boundedValue}%
+                    </span>
+                )}
+            </span>
+        </div>
+    );
+};
+
+const PlainSurface = forwardRef<HTMLElement, SurfaceProps>(function PlainSurface(
+    { as: Element = 'div', pt, className, style, ...nativeProps },
+    ref,
+) {
+    return (
+        <Element
+            {...pt?.root}
+            {...nativeProps}
+            ref={(element) => assignRef(ref, element)}
+            className={classNames('plain-dom-surface', pt?.root?.className, className)}
+            style={{ ...pt?.root?.style, ...style }}
+            data-cratis-part='root'
+        />
+    );
+});
+
+const declaration = <SlotId extends unstable_SlotId>(
+    render: unstable_SlotDeclaration<SlotId>['render'],
+) =>
+    Object.freeze({
+        mode: 'presentation',
+        fidelity: 'native',
+        render,
+    }) satisfies unstable_SlotDeclaration<SlotId>;
+
+const slots = Object.freeze({
+    'common.button': declaration<'common.button'>(PlainButton),
+    'common.iconButton': declaration<'common.iconButton'>(PlainIconButton),
+    'common.textInput': declaration<'common.textInput'>(PlainTextInput),
+    'common.textArea': declaration<'common.textArea'>(PlainTextArea),
+    'common.checkbox': declaration<'common.checkbox'>(PlainCheckbox),
+    'common.radio': declaration<'common.radio'>(PlainRadio),
+    'common.switch': declaration<'common.switch'>(PlainSwitch),
+    'common.progress': declaration<'common.progress'>(PlainProgress),
+    'common.surface': declaration<'common.surface'>(PlainSurface),
+});
+
+/** Private, test-only renderer proving the nine stable presentation slots are independently implementable. */
+export const plainDomPresentationRenderer = unstable_defineUiLibrary({
+    id: 'plain-dom-falsification-fixture',
+    displayName: 'Plain DOM falsification fixture',
+    abi: unstable_CRATIS_UI_ABI_VERSION,
+    level: 'primitive',
+    profile: 'stable-presentation/v1',
+    profileSlots,
+    capabilities,
+    slots,
+});
diff --git a/Conformance/for_plain_dom_renderer/when_running_the_stable_presentation_profile.tsx b/Conformance/for_plain_dom_renderer/when_running_the_stable_presentation_profile.tsx
new file mode 100644
index 00000000..5c69c3b2
--- /dev/null
+++ b/Conformance/for_plain_dom_renderer/when_running_the_stable_presentation_profile.tsx
@@ -0,0 +1,117 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { expect } from 'chai';
+import { beforeAll, describe, it } from 'vitest';
+import { runConformance, type ConformanceReport } from '../src/index.js';
+import { validateMetadata } from '../src/internal/metadata.js';
+import plainDomPresentationMetadata from './given/plainDomPresentationMetadata.json';
+import { plainDomPresentationRenderer } from './given/plainDomPresentationRenderer.js';
+
+const stablePresentationSlots = [
+    'common.button',
+    'common.iconButton',
+    'common.textInput',
+    'common.textArea',
+    'common.checkbox',
+    'common.radio',
+    'common.switch',
+    'common.progress',
+    'common.surface',
+] as const;
+
+describe('when running the private plain DOM stable presentation profile', () => {
+    let report: ConformanceReport;
+
+    beforeAll(async () => {
+        report = await runConformance(plainDomPresentationRenderer, {
+            metadata: plainDomPresentationMetadata,
+            document,
+        });
+    }, 30_000);
+
+    it('should pass all one hundred bounded checks with zero skips', () => {
+        const failures = report.checks
+            .filter((check) => check.status === 'failed')
+            .map(
+                (check) =>
+                    `${check.id}: ${check.message} ${JSON.stringify(check.evidence ?? {})}`,
+            );
+
+        expect(failures).to.deep.equal([]);
+        expect(report.passed).to.equal(true);
+        expect(report.summary).to.deep.equal({
+            total: 100,
+            passed: 100,
+            failed: 0,
+            skipped: 0,
+        });
+        expect(plainDomPresentationRenderer.profileSlots).to.deep.equal(
+            stablePresentationSlots,
+        );
+    });
+
+    it('should use schema valid static metadata consistent with the runtime manifest', () => {
+        expect(validateMetadata(plainDomPresentationMetadata)).to.deep.equal([]);
+        expect(
+            report.checks.find((check) => check.id === 'manifest.schema')?.status,
+        ).to.equal('passed');
+        expect(
+            report.checks.find(
+                (check) => check.id === 'manifest.runtimeConsistency',
+            )?.status,
+        ).to.equal('passed');
+    });
+
+    it('should expose exact native elements and refs for every ref capable slot', () => {
+        const refCapableSlots = stablePresentationSlots.filter(
+            (slotId) => slotId !== 'common.progress',
+        );
+        const checks = refCapableSlots.map((slotId) =>
+            report.checks.find(
+                (check) => check.id === `contract.${slotId}.elementRef`,
+            ),
+        );
+
+        expect(checks.every((check) => check?.status === 'passed')).to.equal(true);
+        expect(checks.every((check) => check?.evidence?.refMatches === true)).to.equal(
+            true,
+        );
+    });
+
+    it('should preserve native form reset and user change metadata', () => {
+        const evidenceFor = (slotId: (typeof stablePresentationSlots)[number]) =>
+            report.checks.find((check) => check.id === `behavior.${slotId}`)?.evidence;
+        const button = evidenceFor('common.button');
+        const textInput = evidenceFor('common.textInput');
+        const textArea = evidenceFor('common.textArea');
+        const checkbox = evidenceFor('common.checkbox');
+        const radio = evidenceFor('common.radio');
+        const switchControl = evidenceFor('common.switch');
+
+        expect(button?.submitEvents).to.equal(1);
+        expect(textInput).to.include({
+            callbacks: 1,
+            source: 'user',
+            nativeEvent: true,
+            resetValue: 'before',
+            resetMatches: true,
+        });
+        expect(textArea).to.include({
+            callbacks: 1,
+            source: 'user',
+            nativeEvent: true,
+            resetValue: 'before',
+            resetMatches: true,
+        });
+        for (const evidence of [checkbox, radio, switchControl]) {
+            expect(evidence).to.include({
+                callbacks: 1,
+                source: 'user',
+                nativeEvent: true,
+                resetChecked: false,
+                resetMatches: true,
+            });
+        }
+    });
+});

From d43b86db49b129c48fb232a7c0bb952802c93514 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Fri, 28 Aug 2026 01:02:34 +0200
Subject: [PATCH 212/267] Document plain DOM ABI findings

---
 Conformance/CONFORMANCE.md | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/Conformance/CONFORMANCE.md b/Conformance/CONFORMANCE.md
index c68bb3fa..86bb0d5e 100644
--- a/Conformance/CONFORMANCE.md
+++ b/Conformance/CONFORMANCE.md
@@ -21,6 +21,26 @@ The automated families are:
 A requested skip is accepted only when the relevant declaration is `unsupported`/`emulated`, or the
 request names a capability the library does not claim. An unjustified skip is a failure.
 
+## Private plain-DOM falsification fixture
+
+The repository includes a private, test-only plain-DOM renderer under
+`for_plain_dom_renderer/`. It is not a workspace, package, published entry point, or source of
+runtime code. It independently implements the nine stable presentation slots using public ABI and
+component prop contracts only; it does not import the Components-owned Core implementations.
+
+The declared `stable-presentation/v1` profile and its package-shaped static metadata produce 100
+passed checks out of 100, with zero failures and zero skips. The bounded run observes:
+
+- exact semantic native elements and forwarded refs for every ref-capable slot;
+- native submit, form-value, and reset behavior;
+- one `ChangeHandler` callback carrying `source: 'user'` and the originating native `Event`;
+- every documented stable part and canonical state, plus every declared `pt` route; and
+- deterministic SSR/hydration, axe WCAG A/AA, and the runner's bounded environmental hosts.
+
+Within this nine-slot profile, no renderer ABI widening or Core change was required. This finding is
+limited to the public contracts and automated environment exercised here; it does not upgrade the
+general evidence boundary or the limitations below.
+
 ## Explicit limitations
 
 - axe is automated DOM analysis and cannot replace manual keyboard, screen-reader, magnification,

From 973760fb9ecf4e885e399ec299cc98bc8a8184c1 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Fri, 28 Aug 2026 01:02:45 +0200
Subject: [PATCH 213/267] pi-agent: Implement private plain proof

---
 .../given/plainDomPresentationRenderer.tsx    | 44 +++++++------------
 ...unning_the_stable_presentation_profile.tsx |  9 ++--
 2 files changed, 18 insertions(+), 35 deletions(-)

diff --git a/Conformance/for_plain_dom_renderer/given/plainDomPresentationRenderer.tsx b/Conformance/for_plain_dom_renderer/given/plainDomPresentationRenderer.tsx
index 0e64dd97..b6ecb188 100644
--- a/Conformance/for_plain_dom_renderer/given/plainDomPresentationRenderer.tsx
+++ b/Conformance/for_plain_dom_renderer/given/plainDomPresentationRenderer.tsx
@@ -173,10 +173,7 @@ const PlainButton = forwardRef<HTMLButtonElement, ButtonProps>(function PlainBut
             ) : icon ? (
                 <span
                     {...pt?.icon}
-                    className={classNames(
-                        'plain-dom-button__icon',
-                        pt?.icon?.className,
-                    )}
+                    className={classNames('plain-dom-button__icon', pt?.icon?.className)}
                     data-cratis-part='icon'
                     aria-hidden={pt?.icon?.['aria-hidden'] ?? true}
                 >
@@ -359,12 +356,9 @@ const PlainChoice = ({ kind, props, forwardedRef }: PlainChoiceProps) => {
     );
     const rootPt = pt?.root;
     const labelPt = pt?.label;
-    const boxPt =
-        kind === 'switch' ? undefined : (pt as CheckboxParts | undefined)?.box;
+    const boxPt = kind === 'switch' ? undefined : (pt as CheckboxParts | undefined)?.box;
     const indicatorPt =
-        kind === 'switch'
-            ? undefined
-            : (pt as CheckboxParts | undefined)?.indicator;
+        kind === 'switch' ? undefined : (pt as CheckboxParts | undefined)?.indicator;
     const controlPt =
         kind === 'switch' ? (pt as SwitchParts | undefined)?.control : undefined;
     const handlePt =
@@ -468,10 +462,7 @@ const PlainChoice = ({ kind, props, forwardedRef }: PlainChoiceProps) => {
             {label !== undefined && (
                 <span
                     {...labelPt}
-                    className={classNames(
-                        'plain-dom-choice__label',
-                        labelPt?.className,
-                    )}
+                    className={classNames('plain-dom-choice__label', labelPt?.className)}
                     data-cratis-part='label'
                     {...attributes}
                 >
@@ -488,19 +479,17 @@ const PlainCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(
     },
 );
 
-const PlainRadio = forwardRef<HTMLInputElement, RadioProps>(function PlainRadio(
-    props,
-    ref,
-) {
-    return <PlainChoice kind='radio' props={props} forwardedRef={ref} />;
-});
+const PlainRadio = forwardRef<HTMLInputElement, RadioProps>(
+    function PlainRadio(props, ref) {
+        return <PlainChoice kind='radio' props={props} forwardedRef={ref} />;
+    },
+);
 
-const PlainSwitch = forwardRef<HTMLInputElement, SwitchProps>(function PlainSwitch(
-    props,
-    ref,
-) {
-    return <PlainChoice kind='switch' props={props} forwardedRef={ref} />;
-});
+const PlainSwitch = forwardRef<HTMLInputElement, SwitchProps>(
+    function PlainSwitch(props, ref) {
+        return <PlainChoice kind='switch' props={props} forwardedRef={ref} />;
+    },
+);
 
 const PlainProgress = ({
     value = 0,
@@ -532,10 +521,7 @@ const PlainProgress = ({
                 style={determinate ? { width: `${boundedValue}%` } : undefined}
             >
                 {determinate && showValue && (
-                    <span
-                        className='plain-dom-progress__label'
-                        data-cratis-part='label'
-                    >
+                    <span className='plain-dom-progress__label' data-cratis-part='label'>
                         {boundedValue}%
                     </span>
                 )}
diff --git a/Conformance/for_plain_dom_renderer/when_running_the_stable_presentation_profile.tsx b/Conformance/for_plain_dom_renderer/when_running_the_stable_presentation_profile.tsx
index 5c69c3b2..1a6c29c2 100644
--- a/Conformance/for_plain_dom_renderer/when_running_the_stable_presentation_profile.tsx
+++ b/Conformance/for_plain_dom_renderer/when_running_the_stable_presentation_profile.tsx
@@ -57,9 +57,8 @@ describe('when running the private plain DOM stable presentation profile', () =>
             report.checks.find((check) => check.id === 'manifest.schema')?.status,
         ).to.equal('passed');
         expect(
-            report.checks.find(
-                (check) => check.id === 'manifest.runtimeConsistency',
-            )?.status,
+            report.checks.find((check) => check.id === 'manifest.runtimeConsistency')
+                ?.status,
         ).to.equal('passed');
     });
 
@@ -68,9 +67,7 @@ describe('when running the private plain DOM stable presentation profile', () =>
             (slotId) => slotId !== 'common.progress',
         );
         const checks = refCapableSlots.map((slotId) =>
-            report.checks.find(
-                (check) => check.id === `contract.${slotId}.elementRef`,
-            ),
+            report.checks.find((check) => check.id === `contract.${slotId}.elementRef`),
         );
 
         expect(checks.every((check) => check?.status === 'passed')).to.equal(true);

From 4aebfa066a2b3719014cffc1a82b761392a952ab Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Fri, 28 Aug 2026 01:12:30 +0200
Subject: [PATCH 214/267] Tighten private plain renderer fidelity

---
 .../given/plainDomPresentationMetadata.json   |   1 -
 .../given/plainDomPresentationRenderer.tsx    | 400 +++++++++++-------
 ...unning_the_stable_presentation_profile.tsx |  24 ++
 3 files changed, 279 insertions(+), 146 deletions(-)

diff --git a/Conformance/for_plain_dom_renderer/given/plainDomPresentationMetadata.json b/Conformance/for_plain_dom_renderer/given/plainDomPresentationMetadata.json
index 58d2c4c7..83d2b068 100644
--- a/Conformance/for_plain_dom_renderer/given/plainDomPresentationMetadata.json
+++ b/Conformance/for_plain_dom_renderer/given/plainDomPresentationMetadata.json
@@ -33,7 +33,6 @@
     "capabilities": [
         "slot.render",
         "parts.passthrough",
-        "form.validationMessage",
         "ssr.staticRender",
         "rtl",
         "forcedColors",
diff --git a/Conformance/for_plain_dom_renderer/given/plainDomPresentationRenderer.tsx b/Conformance/for_plain_dom_renderer/given/plainDomPresentationRenderer.tsx
index b6ecb188..a83bfd19 100644
--- a/Conformance/for_plain_dom_renderer/given/plainDomPresentationRenderer.tsx
+++ b/Conformance/for_plain_dom_renderer/given/plainDomPresentationRenderer.tsx
@@ -14,6 +14,8 @@ import {
 } from 'react';
 import type {
     ButtonProps,
+    ButtonSeverity,
+    ButtonTone,
     CheckboxParts,
     CheckboxProps,
     IconButtonProps,
@@ -49,7 +51,6 @@ const profileSlots = Object.freeze([
 const capabilities = Object.freeze([
     'slot.render',
     'parts.passthrough',
-    'form.validationMessage',
     'ssr.staticRender',
     'rtl',
     'forcedColors',
@@ -59,6 +60,24 @@ const capabilities = Object.freeze([
 const classNames = (...values: readonly (string | undefined)[]) =>
     values.filter(Boolean).join(' ');
 
+const toneForSeverity: Readonly<Record<ButtonSeverity, ButtonTone>> = {
+    secondary: 'neutral',
+    info: 'accent',
+    help: 'accent',
+    success: 'positive',
+    warn: 'caution',
+    danger: 'critical',
+    contrast: 'neutral',
+};
+
+const severityForTone: Readonly<Record<ButtonTone, ButtonSeverity>> = {
+    neutral: 'secondary',
+    accent: 'info',
+    positive: 'success',
+    caution: 'warn',
+    critical: 'danger',
+};
+
 const assignRef = <T,>(ref: ForwardedRef<T>, value: T | null) => {
     if (typeof ref === 'function') ref(value);
     else if (ref) ref.current = value;
@@ -122,18 +141,77 @@ const useCheckableState = (
 const renderIcon = (icon: ReactNode) =>
     typeof icon === 'string' ? <i className={icon} aria-hidden='true' /> : icon;
 
+interface PlainButtonContentProps {
+    readonly loading: boolean;
+    readonly icon: ReactNode;
+    readonly label: ReactNode;
+    readonly children: ReactNode;
+    readonly pt: ButtonProps['pt'];
+}
+
+const PlainButtonContent = ({
+    loading,
+    icon,
+    label,
+    children,
+    pt,
+}: PlainButtonContentProps) => {
+    const leading = loading ? (
+        <span
+            {...pt?.spinner}
+            className={classNames('plain-dom-button__spinner', pt?.spinner?.className)}
+            data-cratis-part='spinner'
+            aria-hidden='true'
+        />
+    ) : icon ? (
+        <span
+            {...pt?.icon}
+            className={classNames('plain-dom-button__icon', pt?.icon?.className)}
+            data-cratis-part='icon'
+            aria-hidden={pt?.icon?.['aria-hidden'] ?? true}
+        >
+            {renderIcon(icon)}
+        </span>
+    ) : null;
+    const content =
+        label !== undefined || children !== undefined ? (
+            <span
+                {...pt?.label}
+                className={classNames('plain-dom-button__label', pt?.label?.className)}
+                data-cratis-part='label'
+            >
+                {label}
+                {children}
+            </span>
+        ) : null;
+    return (
+        <>
+            {leading}
+            {content}
+        </>
+    );
+};
+
 const PlainButton = forwardRef<HTMLButtonElement, ButtonProps>(function PlainButton(
     {
         label,
         icon,
         loading = false,
+        tooltip,
+        tooltipOptions: _tooltipOptions,
         pt,
-        variant = 'solid',
+        variant,
         tone,
-        shape = 'default',
+        shape,
+        text,
+        link,
+        outlined,
+        rounded,
+        severity,
         size = 'normal',
         disabled,
         type = 'button',
+        title,
         className,
         style,
         children,
@@ -141,58 +219,37 @@ const PlainButton = forwardRef<HTMLButtonElement, ButtonProps>(function PlainBut
     },
     ref,
 ) {
+    const selectedVariant =
+        variant ?? (link ? 'link' : text ? 'ghost' : outlined ? 'outline' : 'solid');
+    const selectedTone = tone ?? (severity ? toneForSeverity[severity] : undefined);
+    const selectedShape = shape ?? (rounded ? 'pill' : 'default');
+    const legacySeverity = tone ? severityForTone[tone] : severity;
     const effectiveDisabled = Boolean(disabled || loading);
+    const iconOnly = Boolean(icon) && label === undefined && !children;
     return (
         <button
             {...pt?.root}
             {...nativeProps}
             ref={ref}
             type={type}
+            title={title ?? tooltip}
             disabled={effectiveDisabled}
             className={classNames('plain-dom-button', pt?.root?.className, className)}
             style={{ ...pt?.root?.style, ...style }}
             data-cratis-part='root'
-            data-variant={variant}
-            data-tone={tone}
-            data-shape={shape}
+            data-variant={selectedVariant}
+            data-tone={selectedTone}
+            data-severity={legacySeverity}
+            data-shape={selectedShape}
             data-size={size}
             data-disabled={effectiveDisabled || undefined}
             data-loading={loading || undefined}
+            data-icon-only={iconOnly || undefined}
             aria-busy={loading || undefined}
         >
-            {loading ? (
-                <span
-                    {...pt?.spinner}
-                    className={classNames(
-                        'plain-dom-button__spinner',
-                        pt?.spinner?.className,
-                    )}
-                    data-cratis-part='spinner'
-                    aria-hidden='true'
-                />
-            ) : icon ? (
-                <span
-                    {...pt?.icon}
-                    className={classNames('plain-dom-button__icon', pt?.icon?.className)}
-                    data-cratis-part='icon'
-                    aria-hidden={pt?.icon?.['aria-hidden'] ?? true}
-                >
-                    {renderIcon(icon)}
-                </span>
-            ) : null}
-            {(label !== undefined || children !== undefined) && (
-                <span
-                    {...pt?.label}
-                    className={classNames(
-                        'plain-dom-button__label',
-                        pt?.label?.className,
-                    )}
-                    data-cratis-part='label'
-                >
-                    {label}
-                    {children}
-                </span>
-            )}
+            <PlainButtonContent loading={loading} icon={icon} label={label} pt={pt}>
+                {children}
+            </PlainButtonContent>
         </button>
     );
 });
@@ -317,59 +374,165 @@ interface PlainChoiceProps {
     readonly forwardedRef: ForwardedRef<HTMLInputElement>;
 }
 
+interface ResolvedChoiceState {
+    readonly input: CheckableState;
+    readonly attributes: ReturnType<typeof stateAttributes>;
+    readonly disabled: boolean | undefined;
+    readonly readOnly: boolean | undefined;
+    readonly ariaInvalid: InputHTMLAttributes<HTMLInputElement>['aria-invalid'];
+    readonly checked: boolean | undefined;
+    readonly defaultChecked: boolean | undefined;
+}
+
+const useResolvedChoiceState = (
+    props: ChoiceProps,
+    inputPt: InputHTMLAttributes<HTMLInputElement> | undefined,
+    forwardedRef: ForwardedRef<HTMLInputElement>,
+): ResolvedChoiceState => {
+    const checked = props.checked ?? inputPt?.checked;
+    const defaultChecked = props.defaultChecked ?? inputPt?.defaultChecked;
+    const disabled = props.disabled ?? inputPt?.disabled;
+    const readOnly = props.readOnly ?? inputPt?.readOnly;
+    const ariaInvalid =
+        props['aria-invalid'] ??
+        inputPt?.['aria-invalid'] ??
+        (props.invalid || undefined);
+    const invalid = props.invalid || ariaInvalid === true || ariaInvalid === 'true';
+    const input = useCheckableState(checked, defaultChecked, forwardedRef);
+    return {
+        input,
+        attributes: stateAttributes(disabled, invalid, readOnly, input.selected),
+        disabled,
+        readOnly,
+        ariaInvalid,
+        checked,
+        defaultChecked,
+    };
+};
+
+interface PlainChoiceVisualProps {
+    readonly kind: ChoiceKind;
+    readonly parts: ChoiceParts | undefined;
+    readonly attributes: ReturnType<typeof stateAttributes>;
+    readonly label: ReactNode;
+}
+
+const PlainChoiceVisual = ({
+    kind,
+    parts,
+    attributes,
+    label,
+}: PlainChoiceVisualProps) => {
+    const labelPt = parts?.label;
+    if (kind === 'switch') {
+        const switchParts = parts as SwitchParts | undefined;
+        return (
+            <>
+                <span
+                    {...switchParts?.control}
+                    className={classNames(
+                        'plain-dom-switch__control',
+                        switchParts?.control?.className,
+                    )}
+                    data-cratis-part='control'
+                    aria-hidden='true'
+                    {...attributes}
+                >
+                    <span
+                        {...switchParts?.handle}
+                        className={classNames(
+                            'plain-dom-switch__handle',
+                            switchParts?.handle?.className,
+                        )}
+                        data-cratis-part='handle'
+                        {...attributes}
+                    />
+                </span>
+                {label !== undefined && (
+                    <span
+                        {...labelPt}
+                        className={classNames(
+                            'plain-dom-choice__label',
+                            labelPt?.className,
+                        )}
+                        data-cratis-part='label'
+                        {...attributes}
+                    >
+                        {label}
+                    </span>
+                )}
+            </>
+        );
+    }
+
+    const checkableParts = parts as CheckboxParts | RadioParts | undefined;
+    return (
+        <>
+            <span
+                {...checkableParts?.box}
+                className={classNames(
+                    kind === 'radio' ? 'plain-dom-radio__box' : 'plain-dom-checkbox__box',
+                    checkableParts?.box?.className,
+                )}
+                data-cratis-part='box'
+                aria-hidden='true'
+                {...attributes}
+            >
+                <span
+                    {...checkableParts?.indicator}
+                    className={classNames(
+                        kind === 'radio'
+                            ? 'plain-dom-radio__indicator'
+                            : 'plain-dom-checkbox__indicator',
+                        checkableParts?.indicator?.className,
+                    )}
+                    data-cratis-part='indicator'
+                    {...attributes}
+                >
+                    {kind === 'checkbox' ? '✓' : undefined}
+                </span>
+            </span>
+            {label !== undefined && (
+                <span
+                    {...labelPt}
+                    className={classNames('plain-dom-choice__label', labelPt?.className)}
+                    data-cratis-part='label'
+                    {...attributes}
+                >
+                    {label}
+                </span>
+            )}
+        </>
+    );
+};
+
 const PlainChoice = ({ kind, props, forwardedRef }: PlainChoiceProps) => {
+    const pt = props.pt as ChoiceParts | undefined;
+    const inputPt = pt?.input as InputHTMLAttributes<HTMLInputElement> | undefined;
+    const resolved = useResolvedChoiceState(props, inputPt, forwardedRef);
     const {
         label,
-        readOnly,
-        invalid = false,
+        readOnly: _readOnly,
+        invalid: _invalid,
         onChange,
         className,
         style,
-        pt: choiceParts,
-        checked,
-        defaultChecked,
-        disabled,
+        pt: _choiceParts,
+        checked: _checked,
+        defaultChecked: _defaultChecked,
+        disabled: _disabled,
         onClick,
-        'aria-invalid': ariaInvalid,
+        'aria-invalid': _ariaInvalid,
         ...nativeProps
     } = props;
-    const pt = choiceParts as ChoiceParts | undefined;
-    const inputPt = pt?.input as InputHTMLAttributes<HTMLInputElement> | undefined;
-    const effectiveChecked = checked ?? inputPt?.checked;
-    const effectiveDefaultChecked = defaultChecked ?? inputPt?.defaultChecked;
-    const effectiveDisabled = disabled ?? inputPt?.disabled;
-    const effectiveReadOnly = readOnly ?? inputPt?.readOnly;
-    const effectiveAriaInvalid =
-        ariaInvalid ?? inputPt?.['aria-invalid'] ?? (invalid || undefined);
-    const effectiveInvalid =
-        invalid || effectiveAriaInvalid === true || effectiveAriaInvalid === 'true';
-    const state = useCheckableState(
-        effectiveChecked,
-        effectiveDefaultChecked,
-        forwardedRef,
-    );
-    const attributes = stateAttributes(
-        effectiveDisabled,
-        effectiveInvalid,
-        effectiveReadOnly,
-        state.selected,
-    );
     const rootPt = pt?.root;
-    const labelPt = pt?.label;
-    const boxPt = kind === 'switch' ? undefined : (pt as CheckboxParts | undefined)?.box;
-    const indicatorPt =
-        kind === 'switch' ? undefined : (pt as CheckboxParts | undefined)?.indicator;
-    const controlPt =
-        kind === 'switch' ? (pt as SwitchParts | undefined)?.control : undefined;
-    const handlePt =
-        kind === 'switch' ? (pt as SwitchParts | undefined)?.handle : undefined;
     const radioProps = props as RadioProps;
 
     const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
         inputPt?.onChange?.(event);
-        if (effectiveReadOnly || (kind === 'radio' && !event.currentTarget.checked))
+        if (resolved.readOnly || (kind === 'radio' && !event.currentTarget.checked))
             return;
-        state.setSelected(event.currentTarget.checked);
+        resolved.input.setSelected(event.currentTarget.checked);
         onChange?.(event.currentTarget.checked, {
             source: 'user',
             nativeEvent: event.nativeEvent,
@@ -382,93 +545,40 @@ const PlainChoice = ({ kind, props, forwardedRef }: PlainChoiceProps) => {
             className={classNames('plain-dom-choice', rootPt?.className, className)}
             style={{ ...rootPt?.style, ...style }}
             data-cratis-part='root'
-            {...attributes}
+            {...resolved.attributes}
         >
             <input
                 {...inputPt}
                 {...nativeProps}
-                ref={state.ref}
+                ref={resolved.input.ref}
                 type={kind === 'radio' ? 'radio' : 'checkbox'}
                 role={kind === 'switch' ? 'switch' : undefined}
                 name={kind === 'radio' ? radioProps.name : nativeProps.name}
                 value={kind === 'radio' ? radioProps.value : nativeProps.value}
-                checked={effectiveChecked}
+                checked={resolved.checked}
                 defaultChecked={
-                    effectiveChecked === undefined ? effectiveDefaultChecked : undefined
+                    resolved.checked === undefined ? resolved.defaultChecked : undefined
                 }
-                disabled={effectiveDisabled}
+                disabled={resolved.disabled}
                 readOnly={undefined}
-                aria-invalid={effectiveAriaInvalid}
-                aria-readonly={effectiveReadOnly || undefined}
+                aria-invalid={resolved.ariaInvalid}
+                aria-readonly={resolved.readOnly || undefined}
                 onClick={(event) => {
                     inputPt?.onClick?.(event);
                     onClick?.(event);
-                    if (effectiveReadOnly) event.preventDefault();
+                    if (resolved.readOnly) event.preventDefault();
                 }}
                 onChange={handleChange}
                 className={classNames('plain-dom-choice__input', inputPt?.className)}
                 data-cratis-part='input'
-                {...attributes}
+                {...resolved.attributes}
+            />
+            <PlainChoiceVisual
+                kind={kind}
+                parts={pt}
+                attributes={resolved.attributes}
+                label={label}
             />
-            {kind === 'switch' ? (
-                <span
-                    {...controlPt}
-                    className={classNames(
-                        'plain-dom-switch__control',
-                        controlPt?.className,
-                    )}
-                    data-cratis-part='control'
-                    aria-hidden='true'
-                    {...attributes}
-                >
-                    <span
-                        {...handlePt}
-                        className={classNames(
-                            'plain-dom-switch__handle',
-                            handlePt?.className,
-                        )}
-                        data-cratis-part='handle'
-                        {...attributes}
-                    />
-                </span>
-            ) : (
-                <span
-                    {...boxPt}
-                    className={classNames(
-                        kind === 'radio'
-                            ? 'plain-dom-radio__box'
-                            : 'plain-dom-checkbox__box',
-                        boxPt?.className,
-                    )}
-                    data-cratis-part='box'
-                    aria-hidden='true'
-                    {...attributes}
-                >
-                    <span
-                        {...indicatorPt}
-                        className={classNames(
-                            kind === 'radio'
-                                ? 'plain-dom-radio__indicator'
-                                : 'plain-dom-checkbox__indicator',
-                            indicatorPt?.className,
-                        )}
-                        data-cratis-part='indicator'
-                        {...attributes}
-                    >
-                        {kind === 'checkbox' ? '✓' : undefined}
-                    </span>
-                </span>
-            )}
-            {label !== undefined && (
-                <span
-                    {...labelPt}
-                    className={classNames('plain-dom-choice__label', labelPt?.className)}
-                    data-cratis-part='label'
-                    {...attributes}
-                >
-                    {label}
-                </span>
-            )}
         </label>
     );
 };
diff --git a/Conformance/for_plain_dom_renderer/when_running_the_stable_presentation_profile.tsx b/Conformance/for_plain_dom_renderer/when_running_the_stable_presentation_profile.tsx
index 1a6c29c2..c917870c 100644
--- a/Conformance/for_plain_dom_renderer/when_running_the_stable_presentation_profile.tsx
+++ b/Conformance/for_plain_dom_renderer/when_running_the_stable_presentation_profile.tsx
@@ -2,6 +2,8 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import { expect } from 'chai';
+import { createElement } from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
 import { beforeAll, describe, it } from 'vitest';
 import { runConformance, type ConformanceReport } from '../src/index.js';
 import { validateMetadata } from '../src/internal/metadata.js';
@@ -76,6 +78,28 @@ describe('when running the private plain DOM stable presentation profile', () =>
         );
     });
 
+    it('should normalize deprecated Button appearance without leaking props to the DOM', () => {
+        const declaration = plainDomPresentationRenderer.slots['common.button'];
+        if (!declaration) throw new Error('Plain Button declaration is missing.');
+        const markup = renderToStaticMarkup(
+            createElement(declaration.render, {
+                label: 'Legacy action',
+                text: true,
+                rounded: true,
+                severity: 'danger',
+                tooltip: 'Legacy help',
+            }),
+        );
+
+        expect(markup).to.contain('data-variant="ghost"');
+        expect(markup).to.contain('data-tone="critical"');
+        expect(markup).to.contain('data-severity="danger"');
+        expect(markup).to.contain('data-shape="pill"');
+        expect(markup).to.contain('title="Legacy help"');
+        expect(markup).not.to.contain(' text=');
+        expect(markup).not.to.contain(' rounded=');
+    });
+
     it('should preserve native form reset and user change metadata', () => {
         const evidenceFor = (slotId: (typeof stablePresentationSlots)[number]) =>
             report.checks.find((check) => check.id === `behavior.${slotId}`)?.evidence;

From 00fa66667363dc1a437a5cc2f93f49f0eb6acbad Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Fri, 28 Aug 2026 01:12:40 +0200
Subject: [PATCH 215/267] Type-check conformance fixtures

---
 Conformance/package.json  |  3 ++-
 Conformance/tsconfig.json | 20 ++++++++++++++++++++
 2 files changed, 22 insertions(+), 1 deletion(-)
 create mode 100644 Conformance/tsconfig.json

diff --git a/Conformance/package.json b/Conformance/package.json
index a332a914..aa672087 100644
--- a/Conformance/package.json
+++ b/Conformance/package.json
@@ -36,10 +36,11 @@
     "scripts": {
         "clean": "rm -rf dist",
         "build": "node ../node_modules/typescript/bin/tsc -p tsconfig.build.json",
+        "typecheck-specs": "node ../node_modules/typescript/bin/tsc -p tsconfig.json",
         "lint": "node ../node_modules/eslint/bin/eslint.js . --quiet",
         "test": "node ../node_modules/vitest/vitest.mjs run --config vitest.config.ts",
         "verify-package": "node ./scripts/verify-packed-package.mjs",
-        "ci": "yarn clean && yarn lint && yarn build && yarn test && yarn verify-package"
+        "ci": "yarn clean && yarn lint && yarn build && yarn typecheck-specs && yarn test && yarn verify-package"
     },
     "dependencies": {
         "axe-core": "^4.13.0"
diff --git a/Conformance/tsconfig.json b/Conformance/tsconfig.json
new file mode 100644
index 00000000..b939dc5b
--- /dev/null
+++ b/Conformance/tsconfig.json
@@ -0,0 +1,20 @@
+{
+    "extends": "../tsconfig.json",
+    "compilerOptions": {
+        "composite": false,
+        "module": "ESNext",
+        "moduleResolution": "bundler",
+        "noEmit": true,
+        "skipLibCheck": false,
+        "types": ["node", "vitest/globals"]
+    },
+    "include": [
+        "src/**/*.ts",
+        "src/**/*.tsx",
+        "for_*/**/*.ts",
+        "for_*/**/*.tsx",
+        "vitest.config.ts",
+        "vitest.setup.ts"
+    ],
+    "exclude": ["dist", "node_modules"]
+}

From 37a1b183f8ba6342696851eee899a2bd29509232 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Fri, 28 Aug 2026 07:55:53 +0200
Subject: [PATCH 216/267] Point plain proof metadata at its fixture

---
 Conformance/CONFORMANCE.md                                  | 5 +++--
 .../given/plainDomPresentationMetadata.json                 | 2 +-
 .../when_running_the_stable_presentation_profile.tsx        | 6 ++++++
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/Conformance/CONFORMANCE.md b/Conformance/CONFORMANCE.md
index 86bb0d5e..ac4372fc 100644
--- a/Conformance/CONFORMANCE.md
+++ b/Conformance/CONFORMANCE.md
@@ -28,8 +28,9 @@ The repository includes a private, test-only plain-DOM renderer under
 runtime code. It independently implements the nine stable presentation slots using public ABI and
 component prop contracts only; it does not import the Components-owned Core implementations.
 
-The declared `stable-presentation/v1` profile and its package-shaped static metadata produce 100
-passed checks out of 100, with zero failures and zero skips. The bounded run observes:
+The declared `stable-presentation/v1` profile and its schema-valid static metadata point to the
+actual private source fixture and exported manifest, producing 100 passed checks out of 100 with
+zero failures and zero skips. The bounded run observes:
 
 - exact semantic native elements and forwarded refs for every ref-capable slot;
 - native submit, form-value, and reset behavior;
diff --git a/Conformance/for_plain_dom_renderer/given/plainDomPresentationMetadata.json b/Conformance/for_plain_dom_renderer/given/plainDomPresentationMetadata.json
index 83d2b068..1c5b5c0c 100644
--- a/Conformance/for_plain_dom_renderer/given/plainDomPresentationMetadata.json
+++ b/Conformance/for_plain_dom_renderer/given/plainDomPresentationMetadata.json
@@ -6,7 +6,7 @@
     "level": "primitive",
     "profile": "stable-presentation/v1",
     "category": "test-fixture",
-    "entry": "./fixtures/plain-dom/index.js",
+    "entry": "./for_plain_dom_renderer/given/plainDomPresentationRenderer.tsx",
     "export": "plainDomPresentationRenderer",
     "slots": [
         "common.button",
diff --git a/Conformance/for_plain_dom_renderer/when_running_the_stable_presentation_profile.tsx b/Conformance/for_plain_dom_renderer/when_running_the_stable_presentation_profile.tsx
index c917870c..3952a214 100644
--- a/Conformance/for_plain_dom_renderer/when_running_the_stable_presentation_profile.tsx
+++ b/Conformance/for_plain_dom_renderer/when_running_the_stable_presentation_profile.tsx
@@ -55,6 +55,12 @@ describe('when running the private plain DOM stable presentation profile', () =>
 
     it('should use schema valid static metadata consistent with the runtime manifest', () => {
         expect(validateMetadata(plainDomPresentationMetadata)).to.deep.equal([]);
+        expect(plainDomPresentationMetadata.entry).to.equal(
+            './for_plain_dom_renderer/given/plainDomPresentationRenderer.tsx',
+        );
+        expect(plainDomPresentationMetadata.export).to.equal(
+            'plainDomPresentationRenderer',
+        );
         expect(
             report.checks.find((check) => check.id === 'manifest.schema')?.status,
         ).to.equal('passed');

From b25427e85b41749681e74ac8d870ee988b043443 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Fri, 28 Aug 2026 07:55:53 +0200
Subject: [PATCH 217/267] Prepare Components before fixture type checks

---
 Conformance/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Conformance/package.json b/Conformance/package.json
index aa672087..e02b55c1 100644
--- a/Conformance/package.json
+++ b/Conformance/package.json
@@ -36,7 +36,7 @@
     "scripts": {
         "clean": "rm -rf dist",
         "build": "node ../node_modules/typescript/bin/tsc -p tsconfig.build.json",
-        "typecheck-specs": "node ../node_modules/typescript/bin/tsc -p tsconfig.json",
+        "typecheck-specs": "yarn workspace @cratis/components prepare && node ../node_modules/typescript/bin/tsc -p tsconfig.json",
         "lint": "node ../node_modules/eslint/bin/eslint.js . --quiet",
         "test": "node ../node_modules/vitest/vitest.mjs run --config vitest.config.ts",
         "verify-package": "node ./scripts/verify-packed-package.mjs",

From 1a6d3d92979b4956a8b7f497a9969f2a9bdf5cd9 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Fri, 28 Aug 2026 08:23:51 +0200
Subject: [PATCH 218/267] pi-agent: Implement MUI renderer package

---
 Adapters/Mui/CONFORMANCE.md                   |  25 +
 Adapters/Mui/LICENSE                          |  30 +
 Adapters/Mui/README.md                        |  66 ++
 Adapters/Mui/THIRD_PARTY_NOTICES.md           |  35 +
 ...hen_using_the_mui_presentation_profile.tsx | 214 ++++
 Adapters/Mui/package.json                     | 122 +++
 .../Mui/scripts/verify-packed-package.mjs     | 241 +++++
 Adapters/Mui/src/index.tsx                    | 951 ++++++++++++++++++
 Adapters/Mui/tsconfig.build.json              |  16 +
 Adapters/Mui/tsconfig.json                    |  19 +
 Adapters/Mui/vitest.config.ts                 |  17 +
 Adapters/Mui/vitest.setup.ts                  |  28 +
 package.json                                  |   3 +-
 yarn.lock                                     | 511 +++++++++-
 14 files changed, 2267 insertions(+), 11 deletions(-)
 create mode 100644 Adapters/Mui/CONFORMANCE.md
 create mode 100644 Adapters/Mui/LICENSE
 create mode 100644 Adapters/Mui/README.md
 create mode 100644 Adapters/Mui/THIRD_PARTY_NOTICES.md
 create mode 100644 Adapters/Mui/for_adapter/when_using_the_mui_presentation_profile.tsx
 create mode 100644 Adapters/Mui/package.json
 create mode 100644 Adapters/Mui/scripts/verify-packed-package.mjs
 create mode 100644 Adapters/Mui/src/index.tsx
 create mode 100644 Adapters/Mui/tsconfig.build.json
 create mode 100644 Adapters/Mui/tsconfig.json
 create mode 100644 Adapters/Mui/vitest.config.ts
 create mode 100644 Adapters/Mui/vitest.setup.ts

diff --git a/Adapters/Mui/CONFORMANCE.md b/Adapters/Mui/CONFORMANCE.md
new file mode 100644
index 00000000..a481714b
--- /dev/null
+++ b/Adapters/Mui/CONFORMANCE.md
@@ -0,0 +1,25 @@
+<!-- Copyright (c) Cratis. All rights reserved. -->
+<!-- Licensed under the MIT license. See LICENSE file in the project root for full license information. -->
+
+# MUI adapter conformance
+
+The adapter declares `stable-presentation/v1` at renderer ABI major 1. Repository evidence runs
+`@cratis/components.conformance` against all nine declared slots and requires 100 of 100 checks to
+pass with zero failures and zero skips.
+
+The bounded checks cover:
+
+- schema-valid package metadata and exact static/runtime consistency;
+- every stable part, canonical state, and typed `pt` destination;
+- exact native elements and native refs;
+- native names, values, submit/reset, disabled/read-only, validation, and autofill-shaped props;
+- one value-first `ChangeHandler` callback with `source: 'user'` and the originating native `Event`;
+- current and deprecated Button appearance mapping and canonical data attributes;
+- real MUI DOM identities for all nine slots;
+- deterministic SSR and mismatch-free hydration; and
+- package peers, archive boundaries, runtime loading, declaration hygiene, and strict Bundler and
+  NodeNext consumers with `skipLibCheck: false`.
+
+This is automated jsdom/axe and package evidence, not universal browser, visual, or assistive-
+technology certification. MUI's CSS-in-JS output also requires host-specific, request-local Emotion
+cache and style extraction during SSR. No MUI X package is included or exercised.
diff --git a/Adapters/Mui/LICENSE b/Adapters/Mui/LICENSE
new file mode 100644
index 00000000..eb0ae205
--- /dev/null
+++ b/Adapters/Mui/LICENSE
@@ -0,0 +1,30 @@
+MIT License
+
+Copyright (c) Cratis
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+Third-party MIT notices
+-----------------------
+MUI Core (@mui/material and Core support packages): Copyright (c) 2014
+Call-Em-All and Copyright (c) 2016-2026 MUI. Licensed under the MIT License
+above. MUI X is not included.
+
+Emotion (@emotion/react and @emotion/styled): Copyright (c) Emotion team and
+other contributors. Licensed under the MIT License above.
diff --git a/Adapters/Mui/README.md b/Adapters/Mui/README.md
new file mode 100644
index 00000000..b916c470
--- /dev/null
+++ b/Adapters/Mui/README.md
@@ -0,0 +1,66 @@
+<!-- Copyright (c) Cratis. All rights reserved. -->
+<!-- Licensed under the MIT license. See LICENSE file in the project root for full license information. -->
+
+# `@cratis/components.mui`
+
+Material UI adapter for the nine stable presentation slots in the Cratis Components renderer ABI v1.
+The package is independently versioned and exports one manifest, `muiUiLibrary`.
+
+## Install
+
+```sh
+npm install @cratis/components.mui @cratis/components @mui/material @emotion/react @emotion/styled react react-dom
+```
+
+Select the adapter on the application Components provider:
+
+```tsx
+import { CratisComponentsProvider } from '@cratis/components';
+import { muiUiLibrary } from '@cratis/components.mui';
+
+export const Application = () => (
+    <CratisComponentsProvider value={{ locale: 'en-US' }} library={muiUiLibrary}>
+        <main>Application content</main>
+    </CratisComponentsProvider>
+);
+```
+
+The adapter covers Button, IconButton, TextInput, TextArea, Checkbox, Radio, Switch,
+ProgressBar, and Surface. It deliberately excludes MUI X and does not implement the five atomic
+interaction slots.
+
+## Theme integration
+
+The manifest provider mounts the MUI `ThemeProvider`. An outer CSS-variable MUI theme is reused.
+An outer non-variable theme is converted to an equivalent CSS-variable theme so its palette and
+other values remain in force. Without an outer provider, MUI's default theme becomes a sane
+CSS-variable-enabled theme. The conversion is memoized and deterministic during server rendering.
+
+Put application customization outside `CratisComponentsProvider`:
+
+```tsx
+<ThemeProvider theme={applicationTheme}>
+    <CratisComponentsProvider value={{ locale: 'en-US' }} library={muiUiLibrary}>
+        <Application />
+    </CratisComponentsProvider>
+</ThemeProvider>
+```
+
+The renderer provider ABI receives only `children`; it cannot receive an Emotion cache. SSR hosts
+must create an Emotion cache per request, mount Emotion's `CacheProvider` outside the Components
+provider, and extract critical styles from that same request-local cache. Sharing a cache between
+requests can leak styles and ordering. This is application/host integration and does not justify a
+Core ABI change.
+
+## Peer policy
+
+MUI Core is bounded to `>=9 <10`, Emotion to `>=11 <12`, and React/ReactDOM to React 19. Vendor
+packages are peers; exact current versions are dev dependencies only for repository proof.
+
+The current `@cratis/components` peer `>=3.0.0 <4` is a temporary repository placeholder matching
+`@cratis/components.conformance` while the V4 source package is prepared. **It must be changed to
+the honest `>=4 <5` range before this adapter is published.** Publishing with the placeholder would
+misstate compatibility.
+
+See [CONFORMANCE.md](./CONFORMANCE.md) for the bounded evidence and
+[THIRD_PARTY_NOTICES.md](./THIRD_PARTY_NOTICES.md) for upstream licenses.
diff --git a/Adapters/Mui/THIRD_PARTY_NOTICES.md b/Adapters/Mui/THIRD_PARTY_NOTICES.md
new file mode 100644
index 00000000..e00534b1
--- /dev/null
+++ b/Adapters/Mui/THIRD_PARTY_NOTICES.md
@@ -0,0 +1,35 @@
+<!-- Copyright (c) Cratis. All rights reserved. -->
+<!-- Licensed under the MIT license. See LICENSE file in the project root for full license information. -->
+
+# Third-party notices
+
+This adapter interoperates with peer-installed software. It does not bundle the following packages.
+
+## MUI Core
+
+MUI Core (`@mui/material` and its Core support packages) is Copyright (c) 2014 Call-Em-All and
+Copyright (c) 2016-2026 MUI and licensed under the MIT License.
+
+MUI X is explicitly excluded from this adapter.
+
+## Emotion
+
+Emotion (`@emotion/react` and `@emotion/styled`) is Copyright (c) Emotion team and other
+contributors and licensed under the MIT License.
+
+## MIT License text
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and
+associated documentation files (the "Software"), to deal in the Software without restriction,
+including without limitation the rights to use, copy, modify, merge, publish, distribute,
+sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial
+portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT
+NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES
+OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/Adapters/Mui/for_adapter/when_using_the_mui_presentation_profile.tsx b/Adapters/Mui/for_adapter/when_using_the_mui_presentation_profile.tsx
new file mode 100644
index 00000000..e3c7d319
--- /dev/null
+++ b/Adapters/Mui/for_adapter/when_using_the_mui_presentation_profile.tsx
@@ -0,0 +1,214 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { expect } from 'chai';
+import { createElement, type ComponentType, type ReactNode } from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { ThemeProvider, createTheme, useTheme, type Theme } from '@mui/material/styles';
+import { runConformance, type ConformanceReport } from '@cratis/components.conformance';
+import { beforeAll, describe, it } from 'vitest';
+import packageJson from '../package.json';
+import { muiUiLibrary } from '../src/index.js';
+
+const stablePresentationSlots = [
+    'common.button',
+    'common.iconButton',
+    'common.textInput',
+    'common.textArea',
+    'common.checkbox',
+    'common.radio',
+    'common.switch',
+    'common.progress',
+    'common.surface',
+] as const;
+
+const renderSlot = (
+    slotId: (typeof stablePresentationSlots)[number],
+    props: Readonly<Record<string, unknown>>,
+) => {
+    const declaration = muiUiLibrary.slots[slotId];
+    if (!declaration) throw new Error(`Missing ${slotId} declaration.`);
+    // SAFETY: The fixture props below are paired with the corresponding public slot contract.
+    const Component = declaration.render as unknown as ComponentType<
+        Record<string, unknown>
+    >;
+    return renderToStaticMarkup(createElement(Component, props));
+};
+
+const Provider = muiUiLibrary.Provider;
+if (!Provider) throw new Error('The MUI adapter provider is missing.');
+
+const ThemeProbe = ({ observe }: { observe: (theme: Theme) => void }) => {
+    const theme = useTheme();
+    observe(theme);
+    return <span data-theme-vars={theme.vars ? 'true' : 'false'} />;
+};
+
+describe('when using the MUI stable presentation profile', () => {
+    let report: ConformanceReport;
+
+    beforeAll(async () => {
+        report = await runConformance(muiUiLibrary, {
+            metadata: packageJson.cratis,
+            document,
+        });
+    }, 30_000);
+
+    it('should pass the complete declared profile with zero skips', () => {
+        const failures = report.checks
+            .filter((check) => check.status === 'failed')
+            .map(
+                (check) =>
+                    `${check.id}: ${check.message} ${JSON.stringify(check.evidence ?? {})}`,
+            );
+        expect(failures).to.deep.equal([]);
+        expect(report.passed).to.equal(true);
+        expect(report.summary).to.deep.equal({
+            total: 100,
+            passed: 100,
+            failed: 0,
+            skipped: 0,
+        });
+        expect(muiUiLibrary.profileSlots).to.deep.equal(stablePresentationSlots);
+    });
+
+    it('should keep static metadata schema and runtime declarations consistent', () => {
+        expect(
+            report.checks.find((check) => check.id === 'manifest.schema')?.status,
+        ).to.equal('passed');
+        expect(
+            report.checks.find((check) => check.id === 'manifest.runtimeConsistency')
+                ?.status,
+        ).to.equal('passed');
+        expect(Object.keys(packageJson.cratis.modes)).to.deep.equal(
+            stablePresentationSlots,
+        );
+    });
+
+    it('should preserve native refs, forms, reset behavior, and value-first native events', () => {
+        for (const slotId of stablePresentationSlots.filter(
+            (candidate) => candidate !== 'common.progress',
+        )) {
+            expect(
+                report.checks.find(
+                    (check) => check.id === `contract.${slotId}.elementRef`,
+                )?.status,
+            ).to.equal('passed');
+        }
+        expect(
+            report.checks.find((check) => check.id === 'behavior.common.button')?.evidence
+                ?.submitEvents,
+        ).to.equal(1);
+        for (const slotId of [
+            'common.textInput',
+            'common.textArea',
+            'common.checkbox',
+            'common.radio',
+            'common.switch',
+        ] as const) {
+            const evidence = report.checks.find(
+                (check) => check.id === `behavior.${slotId}`,
+            )?.evidence;
+            expect(evidence).to.include({
+                callbacks: 1,
+                source: 'user',
+                nativeEvent: true,
+                resetMatches: true,
+            });
+        }
+    });
+
+    it('should render one real MUI identity for every slot', () => {
+        const markup = {
+            button: renderSlot('common.button', { label: 'Save' }),
+            iconButton: renderSlot('common.iconButton', {
+                icon: '+',
+                'aria-label': 'Add',
+            }),
+            textInput: renderSlot('common.textInput', { 'aria-label': 'Name' }),
+            textArea: renderSlot('common.textArea', { 'aria-label': 'Notes' }),
+            checkbox: renderSlot('common.checkbox', { 'aria-label': 'Selected' }),
+            radio: renderSlot('common.radio', {
+                name: 'frequency',
+                value: 'daily',
+                'aria-label': 'Daily',
+            }),
+            switchControl: renderSlot('common.switch', { 'aria-label': 'Enabled' }),
+            progress: renderSlot('common.progress', { value: 42 }),
+            surface: renderSlot('common.surface', { as: 'article' }),
+        };
+        expect(markup.button).to.contain('MuiButton-root');
+        expect(markup.iconButton).to.contain('MuiIconButton-root');
+        expect(markup.textInput).to.contain('MuiInputBase-root');
+        expect(markup.textArea).to.contain('MuiInputBase-root');
+        expect(markup.checkbox).to.contain('MuiCheckbox-root');
+        expect(markup.radio).to.contain('MuiRadio-root');
+        expect(markup.switchControl).to.contain('MuiSwitch-root');
+        expect(markup.progress).to.contain('MuiLinearProgress-root');
+        expect(markup.surface).to.contain('MuiPaper-root');
+        expect(markup.surface).to.contain('<article');
+    });
+
+    it('should preserve deprecated Button mapping and canonical data attributes', () => {
+        const markup = renderSlot('common.button', {
+            label: 'Legacy action',
+            text: true,
+            rounded: true,
+            severity: 'danger',
+        });
+        expect(markup).to.contain('data-variant="ghost"');
+        expect(markup).to.contain('data-tone="critical"');
+        expect(markup).to.contain('data-severity="danger"');
+        expect(markup).to.contain('data-shape="pill"');
+        expect(markup).not.to.contain(' text=');
+        expect(markup).not.to.contain(' rounded=');
+    });
+
+    it('should provide CSS variables only when no outer MUI theme exists', () => {
+        let defaultSeen: Theme | undefined;
+        const defaultMarkup = renderToStaticMarkup(
+            <Provider>
+                <ThemeProbe observe={(theme) => (defaultSeen = theme)} />
+            </Provider>,
+        );
+        expect(defaultSeen?.vars).not.to.equal(undefined);
+        expect(defaultMarkup).to.contain('data-theme-vars="true"');
+
+        const outerTheme = createTheme({ palette: { primary: { main: '#123456' } } });
+        let nestedSeen: Theme | undefined;
+        renderToStaticMarkup(
+            <ThemeProvider theme={outerTheme}>
+                <Provider>
+                    <ThemeProbe observe={(theme) => (nestedSeen = theme)} />
+                </Provider>
+            </ThemeProvider>,
+        );
+        expect(nestedSeen?.palette.primary.main).to.equal('#123456');
+        expect(nestedSeen?.vars).not.to.equal(undefined);
+    });
+
+    it('should produce deterministic SSR and mismatch-free hydration evidence', () => {
+        for (const slotId of stablePresentationSlots) {
+            expect(
+                report.checks.find((check) => check.id === `ssr.${slotId}`)?.status,
+            ).to.equal('passed');
+        }
+        expect(
+            report.checks.find((check) => check.id === 'ssr.hydration')?.status,
+        ).to.equal('passed');
+    });
+
+    it('should declare only peer-hosted renderer vendors and exclude MUI X', () => {
+        expect(packageJson).not.to.have.property('dependencies');
+        expect(packageJson.peerDependencies).to.include({
+            '@mui/material': '>=9 <10',
+            '@emotion/react': '>=11 <12',
+            '@emotion/styled': '>=11 <12',
+            react: '^19.0.0',
+            'react-dom': '^19.0.0',
+            '@cratis/components': '>=3.0.0 <4',
+        });
+        const serialized = JSON.stringify(packageJson);
+        expect(serialized).not.to.contain('@mui/x-');
+    });
+});
diff --git a/Adapters/Mui/package.json b/Adapters/Mui/package.json
new file mode 100644
index 00000000..10aa3b72
--- /dev/null
+++ b/Adapters/Mui/package.json
@@ -0,0 +1,122 @@
+{
+    "name": "@cratis/components.mui",
+    "version": "0.1.0",
+    "cratisIndependentVersion": true,
+    "description": "Material UI presentation adapter for Cratis Components renderer ABI v1.",
+    "author": "Cratis",
+    "license": "MIT",
+    "type": "module",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/Cratis/Components"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "engines": {
+        "node": ">=23.0.0"
+    },
+    "files": [
+        "dist",
+        "README.md",
+        "CONFORMANCE.md",
+        "THIRD_PARTY_NOTICES.md",
+        "LICENSE"
+    ],
+    "main": "./dist/index.js",
+    "module": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "exports": {
+        "./package.json": "./package.json",
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.js"
+        }
+    },
+    "sideEffects": false,
+    "cratisUiAbi": 1,
+    "cratis": {
+        "kind": "ui-adapter",
+        "id": "cratis-mui",
+        "displayName": "Cratis Material UI renderer",
+        "abi": "^1",
+        "level": "primitive",
+        "profile": "stable-presentation/v1",
+        "category": "material-ui",
+        "entry": "./dist/index.js",
+        "export": "muiUiLibrary",
+        "slots": [
+            "common.button",
+            "common.iconButton",
+            "common.textInput",
+            "common.textArea",
+            "common.checkbox",
+            "common.radio",
+            "common.switch",
+            "common.progress",
+            "common.surface"
+        ],
+        "modes": {
+            "common.button": "presentation",
+            "common.iconButton": "presentation",
+            "common.textInput": "presentation",
+            "common.textArea": "presentation",
+            "common.checkbox": "presentation",
+            "common.radio": "presentation",
+            "common.switch": "presentation",
+            "common.progress": "presentation",
+            "common.surface": "presentation"
+        },
+        "capabilities": [
+            "slot.render",
+            "parts.passthrough",
+            "theme.tokens",
+            "ssr.staticRender",
+            "rtl",
+            "forcedColors",
+            "motion.reduced"
+        ],
+        "ssr": "safe",
+        "a11y": {
+            "axeProfile": "wcag22aa",
+            "evidence": "./CONFORMANCE.md"
+        },
+        "license": {
+            "spdx": "MIT",
+            "requiresKey": false
+        },
+        "upstream": {
+            "@mui/material": ">=9 <10",
+            "@emotion/react": ">=11 <12",
+            "@emotion/styled": ">=11 <12",
+            "react": "^19.0.0",
+            "react-dom": "^19.0.0"
+        }
+    },
+    "scripts": {
+        "clean": "rm -rf dist",
+        "build": "node ../../node_modules/typescript/bin/tsc -p tsconfig.build.json",
+        "typecheck-specs": "yarn workspace @cratis/components prepare && yarn workspace @cratis/components.conformance build && node ../../node_modules/typescript/bin/tsc -p tsconfig.json",
+        "lint": "node ../../node_modules/eslint/bin/eslint.js . --quiet",
+        "test": "node ../../node_modules/vitest/vitest.mjs run --config vitest.config.ts",
+        "verify-package": "node ./scripts/verify-packed-package.mjs",
+        "ci": "yarn clean && yarn lint && yarn build && yarn typecheck-specs && yarn test && yarn verify-package"
+    },
+    "peerDependencies": {
+        "@cratis/components": ">=3.0.0 <4",
+        "@emotion/react": ">=11 <12",
+        "@emotion/styled": ">=11 <12",
+        "@mui/material": ">=9 <10",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
+    },
+    "devDependencies": {
+        "@cratis/components": "workspace:^",
+        "@cratis/components.conformance": "workspace:^",
+        "@emotion/react": "11.14.0",
+        "@emotion/styled": "11.14.1",
+        "@mui/material": "9.4.0",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
+    }
+}
diff --git a/Adapters/Mui/scripts/verify-packed-package.mjs b/Adapters/Mui/scripts/verify-packed-package.mjs
new file mode 100644
index 00000000..eb8eb636
--- /dev/null
+++ b/Adapters/Mui/scripts/verify-packed-package.mjs
@@ -0,0 +1,241 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { spawnSync } from 'node:child_process';
+import {
+    mkdirSync,
+    mkdtempSync,
+    readFileSync,
+    rmSync,
+    symlinkSync,
+    writeFileSync,
+} from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const packageDirectory = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const repositoryDirectory = path.resolve(packageDirectory, '../..');
+const temporary = mkdtempSync(path.join(os.tmpdir(), 'cratis-mui-package-'));
+
+const run = (command, arguments_, cwd = packageDirectory) => {
+    const result = spawnSync(command, arguments_, { cwd, encoding: 'utf8' });
+    if (result.status !== 0) {
+        throw new Error(
+            `${command} ${arguments_.join(' ')} failed:\n${result.stdout}${result.stderr}`,
+        );
+    }
+    return result.stdout;
+};
+
+const link = (source, target) => {
+    mkdirSync(path.dirname(target), { recursive: true });
+    symlinkSync(source, target, 'dir');
+};
+
+try {
+    const packedJson = JSON.parse(
+        run('npm', ['pack', '--json', '--pack-destination', temporary]),
+    );
+    const packed = packedJson[0];
+    const fileNames = new Set(packed.files.map((file) => file.path));
+    for (const required of [
+        'dist/index.js',
+        'dist/index.d.ts',
+        'README.md',
+        'CONFORMANCE.md',
+        'THIRD_PARTY_NOTICES.md',
+        'LICENSE',
+        'package.json',
+    ]) {
+        if (!fileNames.has(required)) {
+            throw new Error(`Packed archive is missing '${required}'.`);
+        }
+    }
+    const forbiddenArchiveEntries = [...fileNames].filter((file) =>
+        /(?:^|\/)(?:src|for_|scripts|node_modules|coverage|\.yarn)(?:\/|$)|(?:vitest|tsconfig|\.tsbuildinfo|package-lock)/u.test(
+            file,
+        ),
+    );
+    if (forbiddenArchiveEntries.length > 0) {
+        throw new Error(
+            `Packed archive contains source, tests, tooling, or vendor content: ${forbiddenArchiveEntries.join(', ')}.`,
+        );
+    }
+
+    const archive = path.join(temporary, packed.filename);
+    const unpacked = path.join(temporary, 'unpacked');
+    mkdirSync(unpacked);
+    run('tar', ['-xzf', archive, '-C', unpacked]);
+    const unpackedPackage = path.join(unpacked, 'package');
+    const packageJson = JSON.parse(
+        readFileSync(path.join(unpackedPackage, 'package.json'), 'utf8'),
+    );
+
+    const expectedPeers = {
+        '@cratis/components': '>=3.0.0 <4',
+        '@emotion/react': '>=11 <12',
+        '@emotion/styled': '>=11 <12',
+        '@mui/material': '>=9 <10',
+        react: '^19.0.0',
+        'react-dom': '^19.0.0',
+    };
+    if (JSON.stringify(packageJson.peerDependencies) !== JSON.stringify(expectedPeers)) {
+        throw new Error(
+            'Packed peer dependencies are not the exact bounded adapter policy.',
+        );
+    }
+    if (packageJson.dependencies && Object.keys(packageJson.dependencies).length > 0) {
+        throw new Error(
+            'Renderer vendors and Components must never be runtime dependencies.',
+        );
+    }
+    if (
+        packageJson.version !== '0.1.0' ||
+        packageJson.cratisIndependentVersion !== true ||
+        packageJson.cratisUiAbi !== 1
+    ) {
+        throw new Error(
+            'Adapter versioning and renderer ABI metadata must be independent.',
+        );
+    }
+    const serializedPackage = JSON.stringify(packageJson);
+    if (serializedPackage.includes('@mui/x-')) {
+        throw new Error('MUI X must remain excluded from every package boundary.');
+    }
+
+    const runtime = readFileSync(path.join(unpackedPackage, 'dist/index.js'), 'utf8');
+    for (const requiredImport of [
+        '@mui/material/',
+        '@cratis/components/',
+        'react/jsx-runtime',
+    ]) {
+        if (!runtime.includes(requiredImport)) {
+            throw new Error(
+                `Runtime does not retain expected external import '${requiredImport}'.`,
+            );
+        }
+    }
+    for (const bundledSignature of [
+        'function createThemeNoVars',
+        'function emotionStyled',
+        'MUI: The `styles` argument',
+    ]) {
+        if (runtime.includes(bundledSignature)) {
+            throw new Error(
+                `Runtime appears to bundle vendor code: '${bundledSignature}'.`,
+            );
+        }
+    }
+
+    const declarationFiles = [...fileNames].filter((file) => file.endsWith('.d.ts'));
+    if (declarationFiles.length !== 1) {
+        throw new Error(
+            `Expected one public declaration file, found ${declarationFiles.length}.`,
+        );
+    }
+    const declarations = readFileSync(
+        path.join(unpackedPackage, 'dist/index.d.ts'),
+        'utf8',
+    );
+    for (const forbidden of [
+        /\bany\b/u,
+        /@mui\//u,
+        /@emotion\//u,
+        /Mui(?:Button|Checkbox|IconButton|InputBase|LinearProgress|Paper|Radio|Switch|Surface|Text)/u,
+        /export\s+(?:type|interface|class|function|default)\b/u,
+    ]) {
+        if (forbidden.test(declarations)) {
+            throw new Error(`Public declarations contain forbidden '${forbidden}'.`);
+        }
+    }
+    const exportedValues = declarations.match(/export\s+declare\s+const\s+/gu) ?? [];
+    if (
+        exportedValues.length !== 1 ||
+        !/export declare const muiUiLibrary: unstable_UiLibrary;/u.test(declarations)
+    ) {
+        throw new Error(
+            'Public declarations must expose exactly one UiLibrary-typed value.',
+        );
+    }
+
+    const nodeModules = path.join(temporary, 'node_modules');
+    link(unpackedPackage, path.join(nodeModules, '@cratis/components.mui'));
+    link(
+        path.join(repositoryDirectory, 'Source'),
+        path.join(nodeModules, '@cratis/components'),
+    );
+    for (const dependency of ['react', 'react-dom']) {
+        link(
+            path.join(repositoryDirectory, 'node_modules', dependency),
+            path.join(nodeModules, dependency),
+        );
+        link(
+            path.join(repositoryDirectory, 'node_modules/@types', dependency),
+            path.join(nodeModules, '@types', dependency),
+        );
+    }
+    for (const dependency of ['react', 'styled']) {
+        link(
+            path.join(repositoryDirectory, 'node_modules/@emotion', dependency),
+            path.join(nodeModules, '@emotion', dependency),
+        );
+    }
+    link(
+        path.join(repositoryDirectory, 'node_modules/@mui/material'),
+        path.join(nodeModules, '@mui/material'),
+    );
+
+    writeFileSync(
+        path.join(temporary, 'runtime.mjs'),
+        "const api = await import('@cratis/components.mui');\n" +
+            "if (Object.keys(api).join(',') !== 'muiUiLibrary') throw new Error('Packed runtime must export only muiUiLibrary.');\n" +
+            "if (api.muiUiLibrary.id !== 'cratis-mui') throw new Error('Packed manifest did not load with explicit peers.');\n",
+    );
+    run(process.execPath, ['runtime.mjs'], temporary);
+
+    writeFileSync(
+        path.join(temporary, 'fixture.ts'),
+        "import { muiUiLibrary } from '@cratis/components.mui';\n" +
+            "import type { unstable_UiLibrary } from '@cratis/components/renderer';\n" +
+            'const library: unstable_UiLibrary = muiUiLibrary;\nvoid library;\n',
+    );
+    writeFileSync(
+        path.join(temporary, 'jsx-shim.d.ts'),
+        "import type { ReactElement } from 'react';\ndeclare global { namespace JSX { type Element = ReactElement; } }\nexport {};\n",
+    );
+    const typescript = path.join(repositoryDirectory, 'node_modules/typescript/bin/tsc');
+    for (const resolution of ['bundler', 'nodenext']) {
+        run(
+            process.execPath,
+            [
+                typescript,
+                '--ignoreConfig',
+                '--noEmit',
+                '--strict',
+                '--skipLibCheck',
+                'false',
+                '--target',
+                'ES2022',
+                '--module',
+                resolution === 'bundler' ? 'ESNext' : 'NodeNext',
+                '--moduleResolution',
+                resolution,
+                '--jsx',
+                'react-jsx',
+                '--lib',
+                'ESNext,DOM,DOM.Iterable',
+                'fixture.ts',
+                'jsx-shim.d.ts',
+            ],
+            temporary,
+        );
+    }
+
+    console.log(
+        `Verified ${packageJson.name}@${packageJson.version}: archive boundaries, external vendor peers, ` +
+            'explicit-peer runtime import, one hygienic UiLibrary declaration, and strict Bundler/NodeNext consumers.',
+    );
+} finally {
+    rmSync(temporary, { recursive: true, force: true });
+}
diff --git a/Adapters/Mui/src/index.tsx b/Adapters/Mui/src/index.tsx
new file mode 100644
index 00000000..5e2a4e7a
--- /dev/null
+++ b/Adapters/Mui/src/index.tsx
@@ -0,0 +1,951 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import {
+    forwardRef,
+    useCallback,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+    type ChangeEvent,
+    type ForwardedRef,
+    type InputHTMLAttributes,
+    type ReactNode,
+    type TextareaHTMLAttributes,
+} from 'react';
+import MuiButton from '@mui/material/Button';
+import MuiCheckbox from '@mui/material/Checkbox';
+import MuiIconButton from '@mui/material/IconButton';
+import MuiInputBase from '@mui/material/InputBase';
+import MuiLinearProgress from '@mui/material/LinearProgress';
+import MuiPaper from '@mui/material/Paper';
+import MuiRadio from '@mui/material/Radio';
+import MuiSwitch from '@mui/material/Switch';
+import MuiTooltip from '@mui/material/Tooltip';
+import { ThemeProvider, createTheme, useTheme } from '@mui/material/styles';
+import type {
+    ButtonProps,
+    ButtonSeverity,
+    ButtonTone,
+    CheckboxParts,
+    CheckboxProps,
+    IconButtonProps,
+    RadioParts,
+    RadioProps,
+    SurfaceProps,
+    SwitchParts,
+    SwitchProps,
+    TextAreaProps,
+    TextInputProps,
+} from '@cratis/components/Common';
+import type { ProgressBarProps } from '@cratis/components/Display';
+import {
+    unstable_CRATIS_UI_ABI_VERSION,
+    unstable_defineUiLibrary,
+    type unstable_CapabilityId,
+    type unstable_SlotDeclaration,
+    type unstable_SlotId,
+    type unstable_UiLibrary,
+} from '@cratis/components/renderer';
+
+const profileSlots = Object.freeze([
+    'common.button',
+    'common.iconButton',
+    'common.textInput',
+    'common.textArea',
+    'common.checkbox',
+    'common.radio',
+    'common.switch',
+    'common.progress',
+    'common.surface',
+] satisfies readonly unstable_SlotId[]);
+
+const capabilities = Object.freeze([
+    'slot.render',
+    'parts.passthrough',
+    'theme.tokens',
+    'ssr.staticRender',
+    'rtl',
+    'forcedColors',
+    'motion.reduced',
+] satisfies readonly unstable_CapabilityId[]);
+
+const MuiAdapterProvider = ({ children }: { readonly children: ReactNode }) => {
+    const outerTheme = useTheme();
+    const theme = useMemo(
+        () =>
+            outerTheme.vars
+                ? outerTheme
+                : createTheme({ ...outerTheme, cssVariables: true }),
+        [outerTheme],
+    );
+    return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
+};
+
+const classNames = (...values: readonly (string | undefined)[]) =>
+    values.filter(Boolean).join(' ');
+
+const toneForSeverity: Readonly<Record<ButtonSeverity, ButtonTone>> = {
+    secondary: 'neutral',
+    info: 'accent',
+    help: 'accent',
+    success: 'positive',
+    warn: 'caution',
+    danger: 'critical',
+    contrast: 'neutral',
+};
+
+const severityForTone: Readonly<Record<ButtonTone, ButtonSeverity>> = {
+    neutral: 'secondary',
+    accent: 'info',
+    positive: 'success',
+    caution: 'warn',
+    critical: 'danger',
+};
+
+const muiColorForTone = (tone: ButtonTone | undefined) => {
+    switch (tone) {
+        case 'neutral':
+            return 'secondary';
+        case 'positive':
+            return 'success';
+        case 'caution':
+            return 'warning';
+        case 'critical':
+            return 'error';
+        case 'accent':
+        default:
+            return 'primary';
+    }
+};
+
+const muiVariant = (variant: 'solid' | 'outline' | 'ghost' | 'link') => {
+    switch (variant) {
+        case 'solid':
+            return 'contained';
+        case 'outline':
+            return 'outlined';
+        case 'ghost':
+        case 'link':
+            return 'text';
+    }
+};
+
+const muiSize = (size: 'small' | 'normal' | 'large') =>
+    size === 'normal' ? 'medium' : size;
+
+const renderIcon = (icon: ReactNode) =>
+    typeof icon === 'string' ? <i className={icon} aria-hidden='true' /> : icon;
+
+type DeprecatedButtonProp = 'severity' | 'text' | 'link' | 'outlined' | 'rounded';
+const warnedDeprecatedProps = new Set<DeprecatedButtonProp>();
+
+const warnForDeprecatedProp = (prop: DeprecatedButtonProp) => {
+    const environment = (
+        globalThis as typeof globalThis & {
+            process?: { env?: { NODE_ENV?: string } };
+        }
+    ).process?.env?.NODE_ENV;
+    if (environment === 'production' || warnedDeprecatedProps.has(prop)) return;
+    warnedDeprecatedProps.add(prop);
+    console.warn(
+        `Button prop "${prop}" is deprecated and will be removed in 5.0. Use variant, tone, or shape instead.`,
+    );
+};
+
+interface ResolvedButtonAppearance {
+    readonly variant: 'solid' | 'outline' | 'ghost' | 'link';
+    readonly tone: ButtonTone | undefined;
+    readonly shape: 'default' | 'pill';
+    readonly severity: ButtonSeverity | undefined;
+}
+
+const resolveButtonAppearance = (
+    variant: ButtonProps['variant'],
+    tone: ButtonProps['tone'],
+    shape: ButtonProps['shape'],
+    text: ButtonProps['text'],
+    link: ButtonProps['link'],
+    outlined: ButtonProps['outlined'],
+    rounded: ButtonProps['rounded'],
+    severity: ButtonProps['severity'],
+): ResolvedButtonAppearance => {
+    if (text !== undefined) warnForDeprecatedProp('text');
+    if (link !== undefined) warnForDeprecatedProp('link');
+    if (outlined !== undefined) warnForDeprecatedProp('outlined');
+    if (rounded !== undefined) warnForDeprecatedProp('rounded');
+    if (severity !== undefined) warnForDeprecatedProp('severity');
+    return {
+        variant:
+            variant ?? (link ? 'link' : text ? 'ghost' : outlined ? 'outline' : 'solid'),
+        tone: tone ?? (severity ? toneForSeverity[severity] : undefined),
+        shape: shape ?? (rounded ? 'pill' : 'default'),
+        severity: tone ? severityForTone[tone] : severity,
+    };
+};
+
+interface MuiButtonContentProps {
+    readonly icon: ReactNode;
+    readonly label: ReactNode;
+    readonly children: ReactNode;
+    readonly pt: ButtonProps['pt'];
+}
+
+const MuiButtonContent = ({ icon, label, children, pt }: MuiButtonContentProps) => (
+    <>
+        {icon ? (
+            <span
+                {...pt?.icon}
+                className={classNames('cratis-mui-button__icon', pt?.icon?.className)}
+                data-cratis-part='icon'
+                aria-hidden={pt?.icon?.['aria-hidden'] ?? true}
+            >
+                {renderIcon(icon)}
+            </span>
+        ) : null}
+        {label !== undefined || children !== undefined ? (
+            <span
+                {...pt?.label}
+                className={classNames('cratis-mui-button__label', pt?.label?.className)}
+                data-cratis-part='label'
+            >
+                {label}
+                {children}
+            </span>
+        ) : null}
+    </>
+);
+
+const MuiButtonSlot = forwardRef<HTMLButtonElement, ButtonProps>(function MuiButtonSlot(
+    {
+        label,
+        icon,
+        loading = false,
+        tooltip,
+        tooltipOptions,
+        pt,
+        variant,
+        tone,
+        shape,
+        text,
+        link,
+        outlined,
+        rounded,
+        severity,
+        size = 'normal',
+        disabled,
+        type = 'button',
+        title,
+        autoFocus,
+        onClick,
+        className,
+        style,
+        children,
+        ...nativeProps
+    },
+    ref,
+) {
+    const appearance = resolveButtonAppearance(
+        variant,
+        tone,
+        shape,
+        text,
+        link,
+        outlined,
+        rounded,
+        severity,
+    );
+    const effectiveDisabled = Boolean(disabled || loading);
+    const iconOnly = Boolean(icon) && label === undefined && !children;
+    const button = (
+        <MuiButton
+            {...pt?.root}
+            {...nativeProps}
+            ref={ref}
+            type={type}
+            title={title}
+            autoFocus={autoFocus}
+            disabled={effectiveDisabled}
+            onClick={onClick}
+            className={classNames('cratis-mui-button', pt?.root?.className, className)}
+            style={{ ...pt?.root?.style, ...style }}
+            variant={muiVariant(appearance.variant)}
+            color={muiColorForTone(appearance.tone)}
+            size={muiSize(size)}
+            loading={loading}
+            loadingIndicator={
+                <span
+                    {...pt?.spinner}
+                    className={classNames(
+                        'cratis-mui-button__spinner',
+                        pt?.spinner?.className,
+                    )}
+                    data-cratis-part='spinner'
+                    role='progressbar'
+                    aria-label='Loading'
+                />
+            }
+            sx={{
+                borderRadius: appearance.shape === 'pill' ? 9999 : undefined,
+                textTransform: appearance.variant === 'link' ? 'none' : undefined,
+                padding: appearance.variant === 'link' ? 0 : undefined,
+                minWidth: appearance.variant === 'link' ? 0 : undefined,
+            }}
+            aria-busy={loading || undefined}
+            data-cratis-part='root'
+            data-variant={appearance.variant}
+            data-tone={appearance.tone}
+            data-severity={appearance.severity}
+            data-shape={appearance.shape}
+            data-size={size}
+            data-disabled={effectiveDisabled || undefined}
+            data-loading={loading || undefined}
+            data-icon-only={iconOnly || undefined}
+        >
+            <MuiButtonContent icon={loading ? undefined : icon} label={label} pt={pt}>
+                {children}
+            </MuiButtonContent>
+        </MuiButton>
+    );
+    return tooltip ? (
+        <MuiTooltip
+            title={tooltip}
+            placement={tooltipOptions?.position}
+            classes={{ tooltip: tooltipOptions?.className ?? '' }}
+        >
+            {button}
+        </MuiTooltip>
+    ) : (
+        button
+    );
+});
+
+const MuiIconButtonSlot = forwardRef<HTMLButtonElement, IconButtonProps>(
+    function MuiIconButtonSlot(
+        {
+            icon,
+            loading = false,
+            tooltip,
+            tooltipOptions,
+            pt,
+            variant,
+            tone,
+            shape = 'pill',
+            text,
+            link,
+            outlined,
+            rounded,
+            severity,
+            size = 'normal',
+            disabled,
+            type = 'button',
+            title,
+            autoFocus,
+            onClick,
+            className,
+            style,
+            'aria-label': ariaLabel,
+            ...nativeProps
+        },
+        ref,
+    ) {
+        const appearance = resolveButtonAppearance(
+            variant,
+            tone,
+            shape,
+            text,
+            link,
+            outlined,
+            rounded,
+            severity,
+        );
+        const effectiveDisabled = Boolean(disabled || loading);
+        const button = (
+            <MuiIconButton
+                {...pt?.root}
+                {...nativeProps}
+                ref={ref}
+                type={type}
+                title={title}
+                autoFocus={autoFocus}
+                disabled={effectiveDisabled}
+                onClick={onClick}
+                className={classNames(
+                    'cratis-mui-icon-button',
+                    pt?.root?.className,
+                    className,
+                )}
+                style={{ ...pt?.root?.style, ...style }}
+                color={muiColorForTone(appearance.tone)}
+                size={muiSize(size)}
+                loading={loading}
+                loadingIndicator={
+                    <span
+                        {...pt?.spinner}
+                        className={classNames(
+                            'cratis-mui-button__spinner',
+                            pt?.spinner?.className,
+                        )}
+                        data-cratis-part='spinner'
+                        role='progressbar'
+                        aria-label='Loading'
+                    />
+                }
+                sx={{ borderRadius: appearance.shape === 'pill' ? '50%' : 1 }}
+                aria-label={ariaLabel}
+                aria-busy={loading || undefined}
+                data-cratis-part='root'
+                data-variant={appearance.variant}
+                data-tone={appearance.tone}
+                data-severity={appearance.severity}
+                data-shape={appearance.shape}
+                data-size={size}
+                data-disabled={effectiveDisabled || undefined}
+                data-loading={loading || undefined}
+                data-icon-only='true'
+            >
+                {!loading && (
+                    <span
+                        {...pt?.icon}
+                        className={classNames(
+                            'cratis-mui-button__icon',
+                            pt?.icon?.className,
+                        )}
+                        data-cratis-part='icon'
+                        aria-hidden={pt?.icon?.['aria-hidden'] ?? true}
+                    >
+                        {renderIcon(icon)}
+                    </span>
+                )}
+            </MuiIconButton>
+        );
+        return tooltip ? (
+            <MuiTooltip
+                title={tooltip}
+                placement={tooltipOptions?.position}
+                classes={{ tooltip: tooltipOptions?.className ?? '' }}
+            >
+                {button}
+            </MuiTooltip>
+        ) : (
+            button
+        );
+    },
+);
+
+const MuiTextInputSlot = forwardRef<HTMLInputElement, TextInputProps>(
+    function MuiTextInputSlot(
+        {
+            type = 'text',
+            invalid = false,
+            onChange,
+            pt,
+            className,
+            style,
+            disabled,
+            readOnly,
+            'aria-invalid': ariaInvalid,
+            ...nativeProps
+        },
+        ref,
+    ) {
+        const effectiveDisabled = disabled ?? pt?.root?.disabled;
+        const effectiveReadOnly = readOnly ?? pt?.root?.readOnly;
+        const effectiveAriaInvalid =
+            ariaInvalid ?? pt?.root?.['aria-invalid'] ?? (invalid || undefined);
+        const effectiveInvalid =
+            invalid || effectiveAriaInvalid === true || effectiveAriaInvalid === 'true';
+        const inputProps: InputHTMLAttributes<HTMLInputElement> & DataAttributes = {
+            ...pt?.root,
+            ...nativeProps,
+            type,
+            disabled: effectiveDisabled,
+            readOnly: effectiveReadOnly,
+            'aria-invalid': effectiveAriaInvalid,
+            onChange: (event) => {
+                pt?.root?.onChange?.(event);
+                onChange?.(event.currentTarget.value, {
+                    source: 'user',
+                    nativeEvent: event.nativeEvent,
+                });
+            },
+            className: classNames(
+                'cratis-mui-text-input',
+                pt?.root?.className,
+                className,
+            ),
+            style: { ...pt?.root?.style, ...style },
+            'data-cratis-part': 'root',
+            'data-disabled': effectiveDisabled || undefined,
+            'data-invalid': effectiveInvalid || undefined,
+            'data-readonly': effectiveReadOnly || undefined,
+        };
+        return (
+            <MuiInputBase
+                inputRef={ref}
+                type={type}
+                disabled={effectiveDisabled}
+                readOnly={effectiveReadOnly}
+                error={effectiveInvalid}
+                inputProps={inputProps}
+            />
+        );
+    },
+);
+
+const MuiTextAreaSlot = forwardRef<HTMLTextAreaElement, TextAreaProps>(
+    function MuiTextAreaSlot(
+        {
+            invalid = false,
+            onChange,
+            pt,
+            className,
+            style,
+            disabled,
+            readOnly,
+            'aria-invalid': ariaInvalid,
+            ...nativeProps
+        },
+        ref,
+    ) {
+        const effectiveDisabled = disabled ?? pt?.root?.disabled;
+        const effectiveReadOnly = readOnly ?? pt?.root?.readOnly;
+        const effectiveAriaInvalid =
+            ariaInvalid ?? pt?.root?.['aria-invalid'] ?? (invalid || undefined);
+        const effectiveInvalid =
+            invalid || effectiveAriaInvalid === true || effectiveAriaInvalid === 'true';
+        const inputProps: TextareaHTMLAttributes<HTMLTextAreaElement> & DataAttributes = {
+            ...pt?.root,
+            ...nativeProps,
+            disabled: effectiveDisabled,
+            readOnly: effectiveReadOnly,
+            'aria-invalid': effectiveAriaInvalid,
+            onChange: (event) => {
+                pt?.root?.onChange?.(event);
+                onChange?.(event.currentTarget.value, {
+                    source: 'user',
+                    nativeEvent: event.nativeEvent,
+                });
+            },
+            className: classNames('cratis-mui-text-area', pt?.root?.className, className),
+            style: { ...pt?.root?.style, ...style },
+            'data-cratis-part': 'root',
+            'data-disabled': effectiveDisabled || undefined,
+            'data-invalid': effectiveInvalid || undefined,
+            'data-readonly': effectiveReadOnly || undefined,
+        };
+        return (
+            <MuiInputBase
+                inputRef={ref}
+                multiline
+                inputComponent='textarea'
+                disabled={effectiveDisabled}
+                readOnly={effectiveReadOnly}
+                error={effectiveInvalid}
+                inputProps={inputProps}
+            />
+        );
+    },
+);
+
+const assignRef = <T,>(ref: ForwardedRef<T>, value: T | null) => {
+    if (typeof ref === 'function') ref(value);
+    else if (ref) ref.current = value;
+};
+
+const useNativeCheckedState = (
+    checked: boolean | undefined,
+    defaultChecked: boolean | undefined,
+    forwardedRef: ForwardedRef<HTMLInputElement>,
+    observeRadioGroup = false,
+) => {
+    const inputRef = useRef<HTMLInputElement>(null);
+    const [uncontrolledChecked, setUncontrolledChecked] = useState(
+        Boolean(defaultChecked),
+    );
+    const controlled = checked !== undefined;
+    const ref = useCallback(
+        (input: HTMLInputElement | null) => {
+            inputRef.current = input;
+            assignRef(forwardedRef, input);
+        },
+        [forwardedRef],
+    );
+    useEffect(() => {
+        const input = inputRef.current;
+        if (!input || controlled) return;
+        const synchronize = () =>
+            queueMicrotask(() => setUncontrolledChecked(input.checked));
+        const form = input.form;
+        form?.addEventListener('reset', synchronize);
+        if (observeRadioGroup)
+            input.ownerDocument.addEventListener('change', synchronize);
+        return () => {
+            form?.removeEventListener('reset', synchronize);
+            if (observeRadioGroup)
+                input.ownerDocument.removeEventListener('change', synchronize);
+        };
+    }, [controlled, observeRadioGroup]);
+    return {
+        ref,
+        selected: checked ?? uncontrolledChecked,
+        synchronize: (nextChecked: boolean) => {
+            if (!controlled) setUncontrolledChecked(nextChecked);
+        },
+    };
+};
+
+type DataAttributes = {
+    [name: `data-${string}`]: string | number | boolean | undefined;
+};
+
+type NativeInputSlotProps = InputHTMLAttributes<HTMLInputElement> &
+    React.RefAttributes<HTMLInputElement> &
+    DataAttributes;
+
+const stateAttributes = (
+    disabled: boolean | undefined,
+    invalid: boolean,
+    readOnly: boolean | undefined,
+    selected: boolean,
+) => ({
+    'data-disabled': disabled || undefined,
+    'data-invalid': invalid || undefined,
+    'data-readonly': readOnly || undefined,
+    'data-selected': selected || undefined,
+});
+
+type ChoiceProps = CheckboxProps | RadioProps | SwitchProps;
+type ChoiceParts = CheckboxParts | RadioParts | SwitchParts;
+type ChoiceKind = 'checkbox' | 'radio' | 'switch';
+
+interface MuiChoiceProps {
+    readonly kind: ChoiceKind;
+    readonly props: ChoiceProps;
+    readonly forwardedRef: ForwardedRef<HTMLInputElement>;
+}
+
+const MuiChoice = ({ kind, props, forwardedRef }: MuiChoiceProps) => {
+    const pt = props.pt as ChoiceParts | undefined;
+    const inputPt = pt?.input as InputHTMLAttributes<HTMLInputElement> | undefined;
+    const checked = props.checked ?? inputPt?.checked;
+    const defaultChecked = props.defaultChecked ?? inputPt?.defaultChecked;
+    const disabled = props.disabled ?? inputPt?.disabled;
+    const readOnly = props.readOnly ?? inputPt?.readOnly;
+    const ariaInvalid =
+        props['aria-invalid'] ??
+        inputPt?.['aria-invalid'] ??
+        (props.invalid || undefined);
+    const invalid =
+        Boolean(props.invalid) || ariaInvalid === true || ariaInvalid === 'true';
+    const state = useNativeCheckedState(
+        checked,
+        defaultChecked,
+        forwardedRef,
+        kind === 'radio',
+    );
+    const attributes = stateAttributes(disabled, invalid, readOnly, state.selected);
+    const {
+        label,
+        readOnly: _readOnly,
+        invalid: _invalid,
+        onChange,
+        className,
+        style,
+        pt: _parts,
+        checked: _checked,
+        defaultChecked: _defaultChecked,
+        disabled: _disabled,
+        onClick,
+        'aria-invalid': _ariaInvalid,
+        ...nativeProps
+    } = props;
+    const {
+        onClick: ptOnClick,
+        onChange: ptOnChange,
+        className: inputClassName,
+        style: inputStyle,
+        readOnly: _ptReadOnly,
+        checked: _ptChecked,
+        defaultChecked: _ptDefaultChecked,
+        disabled: _ptDisabled,
+        ...inputPtRest
+    } = inputPt ?? {};
+    const radioProps = props as RadioProps;
+    const inputSlotProps: NativeInputSlotProps = {
+        ...inputPtRest,
+        ...nativeProps,
+        ref: state.ref,
+        name: kind === 'radio' ? radioProps.name : nativeProps.name,
+        value: kind === 'radio' ? radioProps.value : nativeProps.value,
+        'aria-invalid': ariaInvalid,
+        'aria-readonly': readOnly || undefined,
+        className: classNames('cratis-mui-choice__input', inputClassName),
+        style: inputStyle,
+        'data-cratis-part': 'input',
+        ...attributes,
+    };
+    const handleClick = (event: React.MouseEvent<HTMLInputElement>) => {
+        ptOnClick?.(event);
+        onClick?.(event);
+        if (readOnly) event.preventDefault();
+    };
+    inputSlotProps.onClick = handleClick;
+    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+        ptOnChange?.(event);
+        if (readOnly || (kind === 'radio' && !event.currentTarget.checked)) return;
+        state.synchronize(event.currentTarget.checked);
+        onChange?.(event.currentTarget.checked, {
+            source: 'user',
+            nativeEvent: event.nativeEvent,
+        });
+    };
+    const switchParts = pt as SwitchParts | undefined;
+    const radioParts = pt as RadioParts | undefined;
+    const checkboxParts = pt as CheckboxParts | undefined;
+    const switchControlProps = {
+        ...switchParts?.control,
+        className: classNames(
+            'cratis-mui-switch__control',
+            switchParts?.control?.className,
+        ),
+        'data-cratis-part': 'control',
+        ...attributes,
+    };
+    const switchHandleProps = {
+        ...switchParts?.handle,
+        className: classNames(
+            'cratis-mui-switch__handle',
+            switchParts?.handle?.className,
+        ),
+        'data-cratis-part': 'handle',
+        ...attributes,
+    };
+    const radioBoxProps = {
+        ...radioParts?.box,
+        className: classNames('cratis-mui-radio__box', radioParts?.box?.className),
+        'data-cratis-part': 'box',
+        ...attributes,
+    };
+    const checkboxBoxProps = {
+        ...checkboxParts?.box,
+        className: classNames('cratis-mui-checkbox__box', checkboxParts?.box?.className),
+        'data-cratis-part': 'box',
+        ...attributes,
+    };
+    const labelPart = pt?.label;
+    const root = (
+        <label
+            {...pt?.root}
+            className={classNames('cratis-mui-choice', pt?.root?.className, className)}
+            style={{ ...pt?.root?.style, ...style }}
+            data-cratis-part='root'
+            {...attributes}
+        >
+            {kind === 'switch' ? (
+                <MuiSwitch
+                    checked={checked}
+                    defaultChecked={checked === undefined ? defaultChecked : undefined}
+                    disabled={disabled}
+                    onChange={handleChange}
+                    slotProps={{
+                        root: switchControlProps,
+                        input: inputSlotProps,
+                        thumb: switchHandleProps,
+                    }}
+                />
+            ) : kind === 'radio' ? (
+                <MuiRadio
+                    checked={checked}
+                    defaultChecked={checked === undefined ? defaultChecked : undefined}
+                    disabled={disabled}
+                    onChange={handleChange}
+                    icon={
+                        <span
+                            {...(pt as RadioParts | undefined)?.indicator}
+                            className={classNames(
+                                'cratis-mui-radio__indicator',
+                                (pt as RadioParts | undefined)?.indicator?.className,
+                            )}
+                            data-cratis-part='indicator'
+                            {...attributes}
+                        />
+                    }
+                    checkedIcon={
+                        <span
+                            {...(pt as RadioParts | undefined)?.indicator}
+                            className={classNames(
+                                'cratis-mui-radio__indicator',
+                                (pt as RadioParts | undefined)?.indicator?.className,
+                            )}
+                            data-cratis-part='indicator'
+                            {...attributes}
+                        />
+                    }
+                    slotProps={{
+                        root: radioBoxProps,
+                        input: inputSlotProps,
+                    }}
+                />
+            ) : (
+                <MuiCheckbox
+                    checked={checked}
+                    defaultChecked={checked === undefined ? defaultChecked : undefined}
+                    disabled={disabled}
+                    onChange={handleChange}
+                    icon={
+                        <span
+                            {...(pt as CheckboxParts | undefined)?.indicator}
+                            className={classNames(
+                                'cratis-mui-checkbox__indicator',
+                                (pt as CheckboxParts | undefined)?.indicator?.className,
+                            )}
+                            data-cratis-part='indicator'
+                            {...attributes}
+                        />
+                    }
+                    checkedIcon={
+                        <span
+                            {...(pt as CheckboxParts | undefined)?.indicator}
+                            className={classNames(
+                                'cratis-mui-checkbox__indicator',
+                                (pt as CheckboxParts | undefined)?.indicator?.className,
+                            )}
+                            data-cratis-part='indicator'
+                            {...attributes}
+                        >
+                            ✓
+                        </span>
+                    }
+                    slotProps={{
+                        root: checkboxBoxProps,
+                        input: inputSlotProps,
+                    }}
+                />
+            )}
+            {label !== undefined && (
+                <span
+                    {...labelPart}
+                    className={classNames(
+                        'cratis-mui-choice__label',
+                        labelPart?.className,
+                    )}
+                    data-cratis-part='label'
+                    {...attributes}
+                >
+                    {label}
+                </span>
+            )}
+        </label>
+    );
+    return root;
+};
+
+const MuiCheckboxSlot = forwardRef<HTMLInputElement, CheckboxProps>(
+    function MuiCheckboxSlot(props, ref) {
+        return <MuiChoice kind='checkbox' props={props} forwardedRef={ref} />;
+    },
+);
+
+const MuiRadioSlot = forwardRef<HTMLInputElement, RadioProps>(
+    function MuiRadioSlot(props, ref) {
+        return <MuiChoice kind='radio' props={props} forwardedRef={ref} />;
+    },
+);
+
+const MuiSwitchSlot = forwardRef<HTMLInputElement, SwitchProps>(
+    function MuiSwitchSlot(props, ref) {
+        return <MuiChoice kind='switch' props={props} forwardedRef={ref} />;
+    },
+);
+
+const MuiProgressSlot = ({
+    value = 0,
+    mode = 'determinate',
+    showValue = true,
+    'aria-label': ariaLabel = 'Progress',
+    'aria-labelledby': ariaLabelledBy,
+    className,
+}: ProgressBarProps) => {
+    const boundedValue = Math.min(100, Math.max(0, value));
+    const determinate = mode === 'determinate';
+    const busy = !determinate || boundedValue < 100;
+    return (
+        <div
+            role='progressbar'
+            aria-label={ariaLabelledBy ? undefined : ariaLabel}
+            aria-labelledby={ariaLabelledBy}
+            aria-valuemin={determinate ? 0 : undefined}
+            aria-valuemax={determinate ? 100 : undefined}
+            aria-valuenow={determinate ? boundedValue : undefined}
+            className={classNames('cratis-mui-progress', className)}
+            data-cratis-part='root'
+            data-mode={mode}
+            data-busy={busy || undefined}
+            data-loading={!determinate || undefined}
+        >
+            <MuiLinearProgress
+                variant={determinate ? 'determinate' : 'indeterminate'}
+                value={determinate ? boundedValue : undefined}
+                role='presentation'
+                aria-hidden='true'
+                data-cratis-part='indicator'
+            />
+            {determinate && showValue && (
+                <span data-cratis-part='label'>{boundedValue}%</span>
+            )}
+        </div>
+    );
+};
+
+const MuiSurfaceSlot = forwardRef<HTMLElement, SurfaceProps>(function MuiSurfaceSlot(
+    { as: Element = 'div', pt, className, style, ...nativeProps },
+    ref,
+) {
+    return (
+        <MuiPaper
+            {...pt?.root}
+            {...nativeProps}
+            component={Element}
+            ref={ref}
+            className={classNames('cratis-mui-surface', pt?.root?.className, className)}
+            style={{ ...pt?.root?.style, ...style }}
+            data-cratis-part='root'
+        />
+    );
+});
+
+const declaration = <SlotId extends unstable_SlotId>(
+    render: unstable_SlotDeclaration<SlotId>['render'],
+) =>
+    Object.freeze({
+        mode: 'presentation',
+        fidelity: 'native',
+        render,
+    }) satisfies unstable_SlotDeclaration<SlotId>;
+
+const slots = Object.freeze({
+    'common.button': declaration<'common.button'>(MuiButtonSlot),
+    'common.iconButton': declaration<'common.iconButton'>(MuiIconButtonSlot),
+    'common.textInput': declaration<'common.textInput'>(MuiTextInputSlot),
+    'common.textArea': declaration<'common.textArea'>(MuiTextAreaSlot),
+    'common.checkbox': declaration<'common.checkbox'>(MuiCheckboxSlot),
+    'common.radio': declaration<'common.radio'>(MuiRadioSlot),
+    'common.switch': declaration<'common.switch'>(MuiSwitchSlot),
+    'common.progress': declaration<'common.progress'>(MuiProgressSlot),
+    'common.surface': declaration<'common.surface'>(MuiSurfaceSlot),
+});
+
+/** Material UI implementation of the stable Cratis presentation profile. */
+export const muiUiLibrary: unstable_UiLibrary = unstable_defineUiLibrary({
+    id: 'cratis-mui',
+    displayName: 'Cratis Material UI renderer',
+    abi: unstable_CRATIS_UI_ABI_VERSION,
+    level: 'primitive',
+    profile: 'stable-presentation/v1',
+    profileSlots,
+    capabilities,
+    slots,
+    Provider: MuiAdapterProvider,
+});
diff --git a/Adapters/Mui/tsconfig.build.json b/Adapters/Mui/tsconfig.build.json
new file mode 100644
index 00000000..894b38f8
--- /dev/null
+++ b/Adapters/Mui/tsconfig.build.json
@@ -0,0 +1,16 @@
+{
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "composite": false,
+        "declaration": true,
+        "declarationMap": true,
+        "outDir": "dist",
+        "rootDir": "src",
+        "module": "ESNext",
+        "moduleResolution": "bundler",
+        "skipLibCheck": false,
+        "types": []
+    },
+    "include": ["src/**/*.ts", "src/**/*.tsx"],
+    "exclude": ["**/for_*/**", "dist", "node_modules"]
+}
diff --git a/Adapters/Mui/tsconfig.json b/Adapters/Mui/tsconfig.json
new file mode 100644
index 00000000..ac5922b3
--- /dev/null
+++ b/Adapters/Mui/tsconfig.json
@@ -0,0 +1,19 @@
+{
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "composite": false,
+        "noEmit": true,
+        "module": "ESNext",
+        "moduleResolution": "bundler",
+        "skipLibCheck": false,
+        "types": ["vitest/globals"]
+    },
+    "include": [
+        "src/**/*.ts",
+        "src/**/*.tsx",
+        "for_*/**/*.ts",
+        "for_*/**/*.tsx",
+        "vitest.setup.ts"
+    ],
+    "exclude": ["dist", "node_modules"]
+}
diff --git a/Adapters/Mui/vitest.config.ts b/Adapters/Mui/vitest.config.ts
new file mode 100644
index 00000000..2abb3de8
--- /dev/null
+++ b/Adapters/Mui/vitest.config.ts
@@ -0,0 +1,17 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { fileURLToPath } from 'node:url';
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+    root: fileURLToPath(new URL('.', import.meta.url)),
+    test: {
+        environment: 'jsdom',
+        globals: true,
+        include: ['for_*/**/when_*.ts', 'for_*/**/when_*.tsx'],
+        setupFiles: ['./vitest.setup.ts'],
+        isolate: true,
+        fileParallelism: false,
+    },
+});
diff --git a/Adapters/Mui/vitest.setup.ts b/Adapters/Mui/vitest.setup.ts
new file mode 100644
index 00000000..4136ae79
--- /dev/null
+++ b/Adapters/Mui/vitest.setup.ts
@@ -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 { should } from 'chai';
+
+should();
+// SAFETY: React's test environment marker is intentionally attached to the process-wide global.
+(
+    globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
+).IS_REACT_ACT_ENVIRONMENT = true;
+
+if (!globalThis.ResizeObserver) {
+    globalThis.ResizeObserver = class ResizeObserver {
+        observe() {
+            return undefined;
+        }
+        unobserve() {
+            return undefined;
+        }
+        disconnect() {
+            return undefined;
+        }
+    };
+}
+
+if (!Element.prototype.scrollIntoView) {
+    Element.prototype.scrollIntoView = () => undefined;
+}
diff --git a/package.json b/package.json
index a70f37a9..4ea4f445 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,8 @@
         "Source",
         "ESLint",
         "Codemods",
-        "Conformance"
+        "Conformance",
+        "Adapters/*"
     ],
     "resolutions": {
         "react-aria": "3.51.0",
diff --git a/yarn.lock b/yarn.lock
index d49ff0cf..69e3b7db 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -44,7 +44,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.29.7":
+"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.29.7":
   version: 7.29.7
   resolution: "@babel/code-frame@npm:7.29.7"
   dependencies:
@@ -118,7 +118,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-module-imports@npm:^7.29.7":
+"@babel/helper-module-imports@npm:^7.16.7, @babel/helper-module-imports@npm:^7.29.7":
   version: 7.29.7
   resolution: "@babel/helper-module-imports@npm:7.29.7"
   dependencies:
@@ -183,7 +183,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.12.5":
+"@babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.29.7, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.8.7":
   version: 7.29.7
   resolution: "@babel/runtime@npm:7.29.7"
   checksum: 10/9883b4951787779fd382b121f22f92966d85f19434841f65fb00b2dfec232107e139683f47c6f252891826ad8ee18317b46c3a0e4819116a9885f47b46d7126a
@@ -298,7 +298,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@cratis/components.conformance@workspace:Conformance":
+"@cratis/components.conformance@workspace:Conformance, @cratis/components.conformance@workspace:^":
   version: 0.0.0-use.local
   resolution: "@cratis/components.conformance@workspace:Conformance"
   dependencies:
@@ -318,6 +318,27 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@cratis/components.mui@workspace:Adapters/Mui":
+  version: 0.0.0-use.local
+  resolution: "@cratis/components.mui@workspace:Adapters/Mui"
+  dependencies:
+    "@cratis/components": "workspace:^"
+    "@cratis/components.conformance": "workspace:^"
+    "@emotion/react": "npm:11.14.0"
+    "@emotion/styled": "npm:11.14.1"
+    "@mui/material": "npm:9.4.0"
+    react: "npm:^19.0.0"
+    react-dom: "npm:^19.0.0"
+  peerDependencies:
+    "@cratis/components": ">=3.0.0 <4"
+    "@emotion/react": ">=11 <12"
+    "@emotion/styled": ">=11 <12"
+    "@mui/material": ">=9 <10"
+    react: ^19.0.0
+    react-dom: ^19.0.0
+  languageName: unknown
+  linkType: soft
+
 "@cratis/components@workspace:Source, @cratis/components@workspace:^":
   version: 0.0.0-use.local
   resolution: "@cratis/components@workspace:Source"
@@ -512,6 +533,152 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@emotion/babel-plugin@npm:^11.13.5":
+  version: 11.13.5
+  resolution: "@emotion/babel-plugin@npm:11.13.5"
+  dependencies:
+    "@babel/helper-module-imports": "npm:^7.16.7"
+    "@babel/runtime": "npm:^7.18.3"
+    "@emotion/hash": "npm:^0.9.2"
+    "@emotion/memoize": "npm:^0.9.0"
+    "@emotion/serialize": "npm:^1.3.3"
+    babel-plugin-macros: "npm:^3.1.0"
+    convert-source-map: "npm:^1.5.0"
+    escape-string-regexp: "npm:^4.0.0"
+    find-root: "npm:^1.1.0"
+    source-map: "npm:^0.5.7"
+    stylis: "npm:4.2.0"
+  checksum: 10/cd310568314d886ca328e504f84c4f7f9c7f092ea34a2b43fdb61f84665bf301ba2ef49e0fd1e7ded3d81363d9bbefbb32674ce88b317cfb64db2b65e5ff423f
+  languageName: node
+  linkType: hard
+
+"@emotion/cache@npm:^11.14.0":
+  version: 11.14.0
+  resolution: "@emotion/cache@npm:11.14.0"
+  dependencies:
+    "@emotion/memoize": "npm:^0.9.0"
+    "@emotion/sheet": "npm:^1.4.0"
+    "@emotion/utils": "npm:^1.4.2"
+    "@emotion/weak-memoize": "npm:^0.4.0"
+    stylis: "npm:4.2.0"
+  checksum: 10/52336b28a27b07dde8fcdfd80851cbd1487672bbd4db1e24cca1440c95d8a6a968c57b0453c2b7c88d9b432b717f99554dbecc05b5cdef27933299827e69fd8e
+  languageName: node
+  linkType: hard
+
+"@emotion/hash@npm:^0.9.2":
+  version: 0.9.2
+  resolution: "@emotion/hash@npm:0.9.2"
+  checksum: 10/379bde2830ccb0328c2617ec009642321c0e009a46aa383dfbe75b679c6aea977ca698c832d225a893901f29d7b3eef0e38cf341f560f6b2b56f1ff23c172387
+  languageName: node
+  linkType: hard
+
+"@emotion/is-prop-valid@npm:^1.3.0":
+  version: 1.4.0
+  resolution: "@emotion/is-prop-valid@npm:1.4.0"
+  dependencies:
+    "@emotion/memoize": "npm:^0.9.0"
+  checksum: 10/6fbec4d5cd90b5b68c85047ec1425bccb1fd332df08fa2aea0c15e430c467f01547363ad9108e452ef0494d805074419a7a45c6c866667c39b797f9223e6311d
+  languageName: node
+  linkType: hard
+
+"@emotion/memoize@npm:^0.9.0":
+  version: 0.9.0
+  resolution: "@emotion/memoize@npm:0.9.0"
+  checksum: 10/038132359397348e378c593a773b1148cd0cf0a2285ffd067a0f63447b945f5278860d9de718f906a74c7c940ba1783ac2ca18f1c06a307b01cc0e3944e783b1
+  languageName: node
+  linkType: hard
+
+"@emotion/react@npm:11.14.0":
+  version: 11.14.0
+  resolution: "@emotion/react@npm:11.14.0"
+  dependencies:
+    "@babel/runtime": "npm:^7.18.3"
+    "@emotion/babel-plugin": "npm:^11.13.5"
+    "@emotion/cache": "npm:^11.14.0"
+    "@emotion/serialize": "npm:^1.3.3"
+    "@emotion/use-insertion-effect-with-fallbacks": "npm:^1.2.0"
+    "@emotion/utils": "npm:^1.4.2"
+    "@emotion/weak-memoize": "npm:^0.4.0"
+    hoist-non-react-statics: "npm:^3.3.1"
+  peerDependencies:
+    react: ">=16.8.0"
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/3356c1d66f37f4e7abf88a2be843f6023b794b286c9c99a0aaf1cd1b2b7c50f8d80a2ef77183da737de70150f638e698ff4a2a38ab2d922f868615f1d5761c37
+  languageName: node
+  linkType: hard
+
+"@emotion/serialize@npm:^1.3.3":
+  version: 1.3.3
+  resolution: "@emotion/serialize@npm:1.3.3"
+  dependencies:
+    "@emotion/hash": "npm:^0.9.2"
+    "@emotion/memoize": "npm:^0.9.0"
+    "@emotion/unitless": "npm:^0.10.0"
+    "@emotion/utils": "npm:^1.4.2"
+    csstype: "npm:^3.0.2"
+  checksum: 10/44a2e06fc52dba177d9cf720f7b2c5d45ee4c0d9c09b78302d9a625e758d728ef3ae26f849237fec6f70e9eeb7d87e45a65028e944dc1f877df97c599f1cdaee
+  languageName: node
+  linkType: hard
+
+"@emotion/sheet@npm:^1.4.0":
+  version: 1.4.0
+  resolution: "@emotion/sheet@npm:1.4.0"
+  checksum: 10/8ac6e9bf6b373a648f26ae7f1c24041038524f4c72f436f4f8c4761c665e58880c3229d8d89b1f7a4815dd8e5b49634d03e60187cb6f93097d7f7c1859e869d5
+  languageName: node
+  linkType: hard
+
+"@emotion/styled@npm:11.14.1":
+  version: 11.14.1
+  resolution: "@emotion/styled@npm:11.14.1"
+  dependencies:
+    "@babel/runtime": "npm:^7.18.3"
+    "@emotion/babel-plugin": "npm:^11.13.5"
+    "@emotion/is-prop-valid": "npm:^1.3.0"
+    "@emotion/serialize": "npm:^1.3.3"
+    "@emotion/use-insertion-effect-with-fallbacks": "npm:^1.2.0"
+    "@emotion/utils": "npm:^1.4.2"
+  peerDependencies:
+    "@emotion/react": ^11.0.0-rc.0
+    react: ">=16.8.0"
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/b20ffaaac76e16538051da8d417f1da75f47f0974000edf0999f39f309b23ee0a91ba7dc1d5f60c4017d29fadfed48631ae4a8f697e3662a88318c667d072117
+  languageName: node
+  linkType: hard
+
+"@emotion/unitless@npm:^0.10.0":
+  version: 0.10.0
+  resolution: "@emotion/unitless@npm:0.10.0"
+  checksum: 10/6851c16edce01c494305f43b2cad7a26b939a821131b7c354e49b8e3b012c8810024755b0f4a03ef51117750309e55339825a97bd10411fb3687e68904769106
+  languageName: node
+  linkType: hard
+
+"@emotion/use-insertion-effect-with-fallbacks@npm:^1.2.0":
+  version: 1.2.0
+  resolution: "@emotion/use-insertion-effect-with-fallbacks@npm:1.2.0"
+  peerDependencies:
+    react: ">=16.8.0"
+  checksum: 10/2374999db8d53ef661d61ed1026c42a849632e4f03826f7eba0314c1d92ae342161d737f5045453aa46dd4008e13ccefeba68d3165b667dfad8e5784fcb0c643
+  languageName: node
+  linkType: hard
+
+"@emotion/utils@npm:^1.4.2":
+  version: 1.4.2
+  resolution: "@emotion/utils@npm:1.4.2"
+  checksum: 10/e5f3b8bca066b3361a7ad9064baeb9d01ed1bf51d98416a67359b62cb3affec6bb0249802c4ed11f4f8030f93cc4b67506909420bdb110adec6983d712897208
+  languageName: node
+  linkType: hard
+
+"@emotion/weak-memoize@npm:^0.4.0":
+  version: 0.4.0
+  resolution: "@emotion/weak-memoize@npm:0.4.0"
+  checksum: 10/db5da0e89bd752c78b6bd65a1e56231f0abebe2f71c0bd8fc47dff96408f7065b02e214080f99924f6a3bfe7ee15afc48dad999d76df86b39b16e513f7a94f52
+  languageName: node
+  linkType: hard
+
 "@esbuild/aix-ppc64@npm:0.28.2":
   version: 0.28.2
   resolution: "@esbuild/aix-ppc64@npm:0.28.2"
@@ -972,6 +1139,151 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@mui/core-downloads-tracker@npm:^9.4.0":
+  version: 9.4.0
+  resolution: "@mui/core-downloads-tracker@npm:9.4.0"
+  checksum: 10/3d6e1758c445e94cc87fcc2a884c8bab3cbe780743f66b517b04f242eeed2bf75451f7cdc4de6f7fa7508e0182db3411e268cd4c1a4db1a07722daf612430b49
+  languageName: node
+  linkType: hard
+
+"@mui/material@npm:9.4.0":
+  version: 9.4.0
+  resolution: "@mui/material@npm:9.4.0"
+  dependencies:
+    "@babel/runtime": "npm:^7.29.7"
+    "@mui/core-downloads-tracker": "npm:^9.4.0"
+    "@mui/system": "npm:^9.4.0"
+    "@mui/types": "npm:^9.4.0"
+    "@mui/utils": "npm:^9.4.0"
+    "@popperjs/core": "npm:^2.11.8"
+    "@types/react-transition-group": "npm:^4.4.12"
+    clsx: "npm:^2.1.1"
+    csstype: "npm:^3.2.3"
+    prop-types: "npm:^15.8.1"
+    react-is: "npm:^19.2.8"
+    react-transition-group: "npm:^4.4.5"
+  peerDependencies:
+    "@emotion/react": ^11.5.0
+    "@emotion/styled": ^11.3.0
+    "@mui/material-pigment-css": ^9.4.0
+    "@types/react": ^17.0.0 || ^18.0.0 || ^19.0.0
+    react: ^17.0.0 || ^18.0.0 || ^19.0.0
+    react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0
+  peerDependenciesMeta:
+    "@emotion/react":
+      optional: true
+    "@emotion/styled":
+      optional: true
+    "@mui/material-pigment-css":
+      optional: true
+    "@types/react":
+      optional: true
+  checksum: 10/ee8098ae6ae18b9076e8798c8279ce40dceaebc78d11e21209d6652889e25ca180047dc1b62c21b1e8a956b16a4839c3e28ee5f6b3510270ea5af15a6731c98d
+  languageName: node
+  linkType: hard
+
+"@mui/private-theming@npm:^9.4.0":
+  version: 9.4.0
+  resolution: "@mui/private-theming@npm:9.4.0"
+  dependencies:
+    "@babel/runtime": "npm:^7.29.7"
+    "@mui/utils": "npm:^9.4.0"
+    prop-types: "npm:^15.8.1"
+  peerDependencies:
+    "@types/react": ^17.0.0 || ^18.0.0 || ^19.0.0
+    react: ^17.0.0 || ^18.0.0 || ^19.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/a1fb20925747d289fab090239894cada5c6a3131d74631280fd34f4e60025d021ed81108588366b09c2570c51d3f38426bf65b7705a522418fd92452699e685b
+  languageName: node
+  linkType: hard
+
+"@mui/styled-engine@npm:^9.4.0":
+  version: 9.4.0
+  resolution: "@mui/styled-engine@npm:9.4.0"
+  dependencies:
+    "@babel/runtime": "npm:^7.29.7"
+    "@emotion/cache": "npm:^11.14.0"
+    "@emotion/serialize": "npm:^1.3.3"
+    "@emotion/sheet": "npm:^1.4.0"
+    csstype: "npm:^3.2.3"
+    prop-types: "npm:^15.8.1"
+  peerDependencies:
+    "@emotion/react": ^11.4.1
+    "@emotion/styled": ^11.3.0
+    react: ^17.0.0 || ^18.0.0 || ^19.0.0
+  peerDependenciesMeta:
+    "@emotion/react":
+      optional: true
+    "@emotion/styled":
+      optional: true
+  checksum: 10/4cc1793c5353126815c68b7427e7a2d480564e8e8d566572014761fa92326d1f45759830fd5aa8d3d9a2850a6af7a93b7482822b8bf40c8decde1e36bcfbf651
+  languageName: node
+  linkType: hard
+
+"@mui/system@npm:^9.4.0":
+  version: 9.4.0
+  resolution: "@mui/system@npm:9.4.0"
+  dependencies:
+    "@babel/runtime": "npm:^7.29.7"
+    "@mui/private-theming": "npm:^9.4.0"
+    "@mui/styled-engine": "npm:^9.4.0"
+    "@mui/types": "npm:^9.4.0"
+    "@mui/utils": "npm:^9.4.0"
+    clsx: "npm:^2.1.1"
+    csstype: "npm:^3.2.3"
+    prop-types: "npm:^15.8.1"
+  peerDependencies:
+    "@emotion/react": ^11.5.0
+    "@emotion/styled": ^11.3.0
+    "@types/react": ^17.0.0 || ^18.0.0 || ^19.0.0
+    react: ^17.0.0 || ^18.0.0 || ^19.0.0
+  peerDependenciesMeta:
+    "@emotion/react":
+      optional: true
+    "@emotion/styled":
+      optional: true
+    "@types/react":
+      optional: true
+  checksum: 10/7f282dccca23e37b366c235b9d24b622d1c4a0e98415ff8187a5fc679225fb43703f4a37e3e6ce5d8dc2fef5e8ef04425f4e5d3b4841c809e4f67e301b0a8d12
+  languageName: node
+  linkType: hard
+
+"@mui/types@npm:^9.4.0":
+  version: 9.4.0
+  resolution: "@mui/types@npm:9.4.0"
+  dependencies:
+    "@babel/runtime": "npm:^7.29.7"
+  peerDependencies:
+    "@types/react": ^17.0.0 || ^18.0.0 || ^19.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/0e8a01d0291af7272a966ae9b91ab32f492b2c20c63e288c7d380633cc352f60eb220591c2ddc807720e29a94c32a33b2623f52183623362b1d8bcda7a8408bb
+  languageName: node
+  linkType: hard
+
+"@mui/utils@npm:^9.4.0":
+  version: 9.4.0
+  resolution: "@mui/utils@npm:9.4.0"
+  dependencies:
+    "@babel/runtime": "npm:^7.29.7"
+    "@mui/types": "npm:^9.4.0"
+    "@types/prop-types": "npm:^15.7.15"
+    clsx: "npm:^2.1.1"
+    prop-types: "npm:^15.8.1"
+    react-is: "npm:^19.2.8"
+  peerDependencies:
+    "@types/react": ^17.0.0 || ^18.0.0 || ^19.0.0
+    react: ^17.0.0 || ^18.0.0 || ^19.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/f7d553cd3422154a106430c9b72d376183e0554ca114c98b123b14ffa377ab2b1d58fe7a651f6016d4f6e4bd9740b33484f010c72c959d4f0a4dd7ed09fba566
+  languageName: node
+  linkType: hard
+
 "@napi-rs/lzma-linux-x64-gnu@npm:1.5.1":
   version: 1.5.1
   resolution: "@napi-rs/lzma-linux-x64-gnu@npm:1.5.1"
@@ -1341,6 +1653,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@popperjs/core@npm:^2.11.8":
+  version: 2.11.8
+  resolution: "@popperjs/core@npm:2.11.8"
+  checksum: 10/ddd16090cde777aaf102940f05d0274602079a95ad9805bd20bc55dcc7c3a2ba1b99dd5c73e5cc2753c3d31250ca52a67d58059459d7d27debb983a9f552936c
+  languageName: node
+  linkType: hard
+
 "@react-types/shared@npm:^3.36.1":
   version: 3.36.1
   resolution: "@react-types/shared@npm:3.36.1"
@@ -2475,6 +2794,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/parse-json@npm:^4.0.0":
+  version: 4.0.2
+  resolution: "@types/parse-json@npm:4.0.2"
+  checksum: 10/5bf62eec37c332ad10059252fc0dab7e7da730764869c980b0714777ad3d065e490627be9f40fc52f238ffa3ac4199b19de4127196910576c2fe34dd47c7a470
+  languageName: node
+  linkType: hard
+
+"@types/prop-types@npm:^15.7.15":
+  version: 15.7.15
+  resolution: "@types/prop-types@npm:15.7.15"
+  checksum: 10/31aa2f59b28f24da6fb4f1d70807dae2aedfce090ec63eaf9ea01727a9533ef6eaf017de5bff99fbccad7d1c9e644f52c6c2ba30869465dd22b1a7221c29f356
+  languageName: node
+  linkType: hard
+
 "@types/react-dom@npm:^19.2.5":
   version: 19.2.5
   resolution: "@types/react-dom@npm:19.2.5"
@@ -2484,6 +2817,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/react-transition-group@npm:^4.4.12":
+  version: 4.4.12
+  resolution: "@types/react-transition-group@npm:4.4.12"
+  peerDependencies:
+    "@types/react": "*"
+  checksum: 10/ea14bc84f529a3887f9954b753843820ac8a3c49fcdfec7840657ecc6a8800aad98afdbe4b973eb96c7252286bde38476fcf64b1c09527354a9a9366e516d9a2
+  languageName: node
+  linkType: hard
+
 "@types/react@npm:^19.2.18":
   version: 19.2.18
   resolution: "@types/react@npm:19.2.18"
@@ -3213,6 +3555,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"babel-plugin-macros@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "babel-plugin-macros@npm:3.1.0"
+  dependencies:
+    "@babel/runtime": "npm:^7.12.5"
+    cosmiconfig: "npm:^7.0.0"
+    resolve: "npm:^1.19.0"
+  checksum: 10/30be6ca45e9a124c58ca00af9a0753e5410ec0b79a737714fc4722bbbeb693e55d9258f05c437145ef4a867c2d1603e06a1c292d66c243ce1227458c8ea2ca8c
+  languageName: node
+  linkType: hard
+
 "balanced-match@npm:^1.0.0":
   version: 1.0.2
   resolution: "balanced-match@npm:1.0.2"
@@ -3455,7 +3808,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"clsx@npm:^2.0.0":
+"clsx@npm:^2.0.0, clsx@npm:^2.1.1":
   version: 2.1.1
   resolution: "clsx@npm:2.1.1"
   checksum: 10/cdfb57fa6c7649bbff98d9028c2f0de2f91c86f551179541cf784b1cfdc1562dcb951955f46d54d930a3879931a980e32a46b598acaea274728dbe068deca919
@@ -3485,6 +3838,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"convert-source-map@npm:^1.5.0":
+  version: 1.9.0
+  resolution: "convert-source-map@npm:1.9.0"
+  checksum: 10/dc55a1f28ddd0e9485ef13565f8f756b342f9a46c4ae18b843fe3c30c675d058d6a4823eff86d472f187b176f0adf51ea7b69ea38be34be4a63cbbf91b0593c8
+  languageName: node
+  linkType: hard
+
 "convert-source-map@npm:^2.0.0":
   version: 2.0.0
   resolution: "convert-source-map@npm:2.0.0"
@@ -3492,6 +3852,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cosmiconfig@npm:^7.0.0":
+  version: 7.1.0
+  resolution: "cosmiconfig@npm:7.1.0"
+  dependencies:
+    "@types/parse-json": "npm:^4.0.0"
+    import-fresh: "npm:^3.2.1"
+    parse-json: "npm:^5.0.0"
+    path-type: "npm:^4.0.0"
+    yaml: "npm:^1.10.0"
+  checksum: 10/03600bb3870c80ed151b7b706b99a1f6d78df8f4bdad9c95485072ea13358ef294b13dd99f9e7bf4cc0b43bcd3599d40df7e648750d21c2f6817ca2cd687e071
+  languageName: node
+  linkType: hard
+
 "create-require@npm:^1.1.0":
   version: 1.1.1
   resolution: "create-require@npm:1.1.1"
@@ -3527,7 +3900,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"csstype@npm:^3.2.2":
+"csstype@npm:^3.0.2, csstype@npm:^3.2.2, csstype@npm:^3.2.3":
   version: 3.2.3
   resolution: "csstype@npm:3.2.3"
   checksum: 10/ad41baf7e2ffac65ab544d79107bf7cd1a4bb9bab9ac3302f59ab4ba655d5e30942a8ae46e10ba160c6f4ecea464cc95b975ca2fefbdeeacd6ac63f12f99fe1f
@@ -3746,6 +4119,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dom-helpers@npm:^5.0.1":
+  version: 5.2.1
+  resolution: "dom-helpers@npm:5.2.1"
+  dependencies:
+    "@babel/runtime": "npm:^7.8.7"
+    csstype: "npm:^3.0.2"
+  checksum: 10/bed2341adf8864bf932b3289c24f35fdd99930af77df46688abf2d753ff291df49a15850c874d686d9be6ec4e1c6835673906e64dbd8b2839d227f117a11fd41
+  languageName: node
+  linkType: hard
+
 "dunder-proto@npm:^1.0.0, dunder-proto@npm:^1.0.1":
   version: 1.0.1
   resolution: "dunder-proto@npm:1.0.1"
@@ -3836,6 +4219,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"error-ex@npm:^1.3.1":
+  version: 1.3.4
+  resolution: "error-ex@npm:1.3.4"
+  dependencies:
+    is-arrayish: "npm:^0.2.1"
+  checksum: 10/ae3939fd4a55b1404e877df2080c6b59acc516d5b7f08a181040f78f38b4e2399633bfed2d9a21b91c803713fff7295ac70bebd8f3657ef352a95c2cd9aa2e4b
+  languageName: node
+  linkType: hard
+
 "es-abstract-get@npm:^1.0.0":
   version: 1.0.0
   resolution: "es-abstract-get@npm:1.0.0"
@@ -4488,6 +4880,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"find-root@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "find-root@npm:1.1.0"
+  checksum: 10/caa799c976a14925ba7f31ca1a226fe73d3aa270f4f1b623fcfeb1c6e263111db4beb807d8acd31bd4d48d44c343b93688a9288dfbccca27463c36a0301b0bb9
+  languageName: node
+  linkType: hard
+
 "find-up@npm:^5.0.0":
   version: 5.0.0
   resolution: "find-up@npm:5.0.0"
@@ -4873,6 +5272,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"hoist-non-react-statics@npm:^3.3.1":
+  version: 3.3.2
+  resolution: "hoist-non-react-statics@npm:3.3.2"
+  dependencies:
+    react-is: "npm:^16.7.0"
+  checksum: 10/1acbe85f33e5a39f90c822ad4d28b24daeb60f71c545279431dc98c312cd28a54f8d64788e477fe21dc502b0e3cf58589ebe5c1ad22af27245370391c2d24ea6
+  languageName: node
+  linkType: hard
+
 "html-encoding-sniffer@npm:^6.0.0":
   version: 6.0.0
   resolution: "html-encoding-sniffer@npm:6.0.0"
@@ -4949,6 +5357,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-arrayish@npm:^0.2.1":
+  version: 0.2.1
+  resolution: "is-arrayish@npm:0.2.1"
+  checksum: 10/73ced84fa35e59e2c57da2d01e12cd01479f381d7f122ce41dcbb713f09dbfc651315832cd2bf8accba7681a69e4d6f1e03941d94dd10040d415086360e7005e
+  languageName: node
+  linkType: hard
+
 "is-async-function@npm:^2.0.0":
   version: 2.1.1
   resolution: "is-async-function@npm:2.1.1"
@@ -5455,6 +5870,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"json-parse-even-better-errors@npm:^2.3.0":
+  version: 2.3.1
+  resolution: "json-parse-even-better-errors@npm:2.3.1"
+  checksum: 10/5f3a99009ed5f2a5a67d06e2f298cc97bc86d462034173308156f15b43a6e850be8511dc204b9b94566305da2947f7d90289657237d210351a39059ff9d666cf
+  languageName: node
+  linkType: hard
+
 "json-schema-traverse@npm:^0.4.1":
   version: 0.4.1
   resolution: "json-schema-traverse@npm:0.4.1"
@@ -5767,6 +6189,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lines-and-columns@npm:^1.1.6":
+  version: 1.2.4
+  resolution: "lines-and-columns@npm:1.2.4"
+  checksum: 10/0c37f9f7fa212b38912b7145e1cd16a5f3cd34d782441c3e6ca653485d326f58b3caccda66efce1c5812bde4961bbde3374fae4b0d11bf1226152337f3894aa5
+  languageName: node
+  linkType: hard
+
 "locate-path@npm:^6.0.0":
   version: 6.0.0
   resolution: "locate-path@npm:6.0.0"
@@ -6416,6 +6845,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"parse-json@npm:^5.0.0":
+  version: 5.2.0
+  resolution: "parse-json@npm:5.2.0"
+  dependencies:
+    "@babel/code-frame": "npm:^7.0.0"
+    error-ex: "npm:^1.3.1"
+    json-parse-even-better-errors: "npm:^2.3.0"
+    lines-and-columns: "npm:^1.1.6"
+  checksum: 10/62085b17d64da57f40f6afc2ac1f4d95def18c4323577e1eced571db75d9ab59b297d1d10582920f84b15985cbfc6b6d450ccbf317644cfa176f3ed982ad87e2
+  languageName: node
+  linkType: hard
+
 "parse-svg-path@npm:^0.2.0":
   version: 0.2.0
   resolution: "parse-svg-path@npm:0.2.0"
@@ -6473,6 +6914,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"path-type@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "path-type@npm:4.0.0"
+  checksum: 10/5b1e2daa247062061325b8fdbfd1fb56dde0a448fb1455453276ea18c60685bdad23a445dc148cf87bc216be1573357509b7d4060494a6fd768c7efad833ee45
+  languageName: node
+  linkType: hard
+
 "pathe@npm:^2.0.3":
   version: 2.0.3
   resolution: "pathe@npm:2.0.3"
@@ -6625,7 +7073,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prop-types@npm:^15.8.1":
+"prop-types@npm:^15.6.2, prop-types@npm:^15.8.1":
   version: 15.8.1
   resolution: "prop-types@npm:15.8.1"
   dependencies:
@@ -6744,7 +7192,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-is@npm:^16.13.1":
+"react-is@npm:^16.13.1, react-is@npm:^16.7.0":
   version: 16.13.1
   resolution: "react-is@npm:16.13.1"
   checksum: 10/5aa564a1cde7d391ac980bedee21202fc90bdea3b399952117f54fb71a932af1e5902020144fb354b4690b2414a0c7aafe798eb617b76a3d441d956db7726fdf
@@ -6758,6 +7206,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-is@npm:^19.2.8":
+  version: 19.2.8
+  resolution: "react-is@npm:19.2.8"
+  checksum: 10/09d053ff36e0ba4d47164baf9eab1c7772791f0371aa92281f0e547e0f6a5a5c8a1eb939aadd1a08b3c565958dd63ee59c746b6ac0d5ccb14ad742ac0314ab15
+  languageName: node
+  linkType: hard
+
 "react-stately@npm:3.49.0":
   version: 3.49.0
   resolution: "react-stately@npm:3.49.0"
@@ -6774,6 +7229,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-transition-group@npm:^4.4.5":
+  version: 4.4.5
+  resolution: "react-transition-group@npm:4.4.5"
+  dependencies:
+    "@babel/runtime": "npm:^7.5.5"
+    dom-helpers: "npm:^5.0.1"
+    loose-envify: "npm:^1.4.0"
+    prop-types: "npm:^15.6.2"
+  peerDependencies:
+    react: ">=16.6.0"
+    react-dom: ">=16.6.0"
+  checksum: 10/ca32d3fd2168c976c5d90a317f25d5f5cd723608b415fb3b9006f9d793c8965c619562d0884503a3e44e4b06efbca4fdd1520f30e58ca3e00a0890e637d55419
+  languageName: node
+  linkType: hard
+
 "react@npm:^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0, react@npm:^19.0.0, react@npm:^19.2.8":
   version: 19.2.8
   resolution: "react@npm:19.2.8"
@@ -6869,7 +7339,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@npm:^1.22.1, resolve@npm:^1.22.8":
+"resolve@npm:^1.19.0, resolve@npm:^1.22.1, resolve@npm:^1.22.8":
   version: 1.22.12
   resolution: "resolve@npm:1.22.12"
   dependencies:
@@ -6899,7 +7369,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@patch:resolve@npm%3A^1.22.1#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.8#optional!builtin<compat/resolve>":
+"resolve@patch:resolve@npm%3A^1.19.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.1#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.8#optional!builtin<compat/resolve>":
   version: 1.22.12
   resolution: "resolve@patch:resolve@npm%3A1.22.12#optional!builtin<compat/resolve>::version=1.22.12&hash=c3c19d"
   dependencies:
@@ -7433,6 +7903,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"source-map@npm:^0.5.7":
+  version: 0.5.7
+  resolution: "source-map@npm:0.5.7"
+  checksum: 10/9b4ac749ec5b5831cad1f8cc4c19c4298ebc7474b24a0acf293e2f040f03f8eeccb3d01f12aa0f90cf46d555c887e03912b83a042c627f419bda5152d89c5269
+  languageName: node
+  linkType: hard
+
 "source-map@npm:~0.6.1":
   version: 0.6.1
   resolution: "source-map@npm:0.6.1"
@@ -7642,6 +8119,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"stylis@npm:4.2.0":
+  version: 4.2.0
+  resolution: "stylis@npm:4.2.0"
+  checksum: 10/58359185275ef1f39c339ae94e598168aa6bb789f6cf0d52e726c1e7087a94e9c17f0385a28d34483dec1ffc2c75670ec714dc5603d99c3124ec83bc2b0a0f42
+  languageName: node
+  linkType: hard
+
 "supports-color@npm:*":
   version: 11.0.0
   resolution: "supports-color@npm:11.0.0"
@@ -8565,6 +9049,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"yaml@npm:^1.10.0":
+  version: 1.10.3
+  resolution: "yaml@npm:1.10.3"
+  checksum: 10/e2ef2feb92c708138f016c69777a0f1e45f6d3c5e7cbcda30807a98a37eda2e008bd4fa57352b043c65245a4c799d0c99d1f9b3425de40e70929e26d2ea38215
+  languageName: node
+  linkType: hard
+
 "yargs-parser@npm:^21.1.1":
   version: 21.1.1
   resolution: "yargs-parser@npm:21.1.1"

From 686dc88f25a21510e23c719bf3cfdf36bd619bdb Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Fri, 28 Aug 2026 08:45:45 +0200
Subject: [PATCH 219/267] Harden MUI adapter fidelity and packaging

---
 ...hen_using_the_mui_presentation_profile.tsx |   2 +-
 Adapters/Mui/package.json                     |   9 +-
 .../Mui/scripts/verify-packed-package.mjs     | 157 +++++-
 Adapters/Mui/src/index.tsx                    | 523 ++++++++++--------
 Adapters/Mui/src/upstream-jsx-shim.d.ts       |  11 +
 yarn.lock                                     |   6 +
 6 files changed, 476 insertions(+), 232 deletions(-)
 create mode 100644 Adapters/Mui/src/upstream-jsx-shim.d.ts

diff --git a/Adapters/Mui/for_adapter/when_using_the_mui_presentation_profile.tsx b/Adapters/Mui/for_adapter/when_using_the_mui_presentation_profile.tsx
index e3c7d319..37246785 100644
--- a/Adapters/Mui/for_adapter/when_using_the_mui_presentation_profile.tsx
+++ b/Adapters/Mui/for_adapter/when_using_the_mui_presentation_profile.tsx
@@ -2,7 +2,7 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import { expect } from 'chai';
-import { createElement, type ComponentType, type ReactNode } from 'react';
+import { createElement, type ComponentType } from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { ThemeProvider, createTheme, useTheme, type Theme } from '@mui/material/styles';
 import { runConformance, type ConformanceReport } from '@cratis/components.conformance';
diff --git a/Adapters/Mui/package.json b/Adapters/Mui/package.json
index 10aa3b72..c07492f7 100644
--- a/Adapters/Mui/package.json
+++ b/Adapters/Mui/package.json
@@ -70,7 +70,6 @@
         "capabilities": [
             "slot.render",
             "parts.passthrough",
-            "theme.tokens",
             "ssr.staticRender",
             "rtl",
             "forcedColors",
@@ -111,12 +110,18 @@
         "react-dom": "^19.0.0"
     },
     "devDependencies": {
+        "@cratis/arc": "22.4.0",
+        "@cratis/arc.react": "22.4.0",
         "@cratis/components": "workspace:^",
         "@cratis/components.conformance": "workspace:^",
+        "@cratis/fundamentals": "^7.10.3",
         "@emotion/react": "11.14.0",
         "@emotion/styled": "11.14.1",
         "@mui/material": "9.4.0",
+        "@types/react": "^19.2.18",
         "react": "^19.0.0",
-        "react-dom": "^19.0.0"
+        "react-dom": "^19.0.0",
+        "reflect-metadata": "0.2.2",
+        "tsyringe": "4.10.0"
     }
 }
diff --git a/Adapters/Mui/scripts/verify-packed-package.mjs b/Adapters/Mui/scripts/verify-packed-package.mjs
index eb8eb636..b03826ac 100644
--- a/Adapters/Mui/scripts/verify-packed-package.mjs
+++ b/Adapters/Mui/scripts/verify-packed-package.mjs
@@ -13,6 +13,11 @@ import {
 import os from 'node:os';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
+import {
+    isOwnedDeclarationDiagnostic,
+    matchesExternalIssue,
+    matchesPairedOwnedCascade,
+} from '../../../Source/scripts/lib/public-type-exceptions.mjs';
 
 const packageDirectory = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
 const repositoryDirectory = path.resolve(packageDirectory, '../..');
@@ -33,8 +38,20 @@ const link = (source, target) => {
     symlinkSync(source, target, 'dir');
 };
 
+const parsePackJson = (output) => {
+    for (let index = output.lastIndexOf('['); index >= 0; index = output.lastIndexOf('[', index - 1)) {
+        try {
+            const parsed = JSON.parse(output.slice(index));
+            if (Array.isArray(parsed) && parsed[0]?.filename) return parsed;
+        } catch {
+            // Continue searching backward through lifecycle output for npm's final JSON array.
+        }
+    }
+    throw new Error('npm pack did not produce a parseable JSON result.');
+};
+
 try {
-    const packedJson = JSON.parse(
+    const packedJson = parsePackJson(
         run('npm', ['pack', '--json', '--pack-destination', temporary]),
     );
     const packed = packedJson[0];
@@ -68,6 +85,29 @@ try {
     mkdirSync(unpacked);
     run('tar', ['-xzf', archive, '-C', unpacked]);
     const unpackedPackage = path.join(unpacked, 'package');
+
+    const corePackedJson = parsePackJson(
+        run(
+            'npm',
+            [
+                'pack',
+                '--json',
+                '--ignore-scripts',
+                '--silent',
+                '--pack-destination',
+                temporary,
+            ],
+            path.join(repositoryDirectory, 'Source'),
+        ),
+    );
+    const coreArchive = path.join(temporary, corePackedJson[0].filename);
+    const unpackedCore = path.join(temporary, 'unpacked-core');
+    mkdirSync(unpackedCore);
+    run('tar', ['-xzf', coreArchive, '-C', unpackedCore]);
+    const unpackedCorePackage = path.join(unpackedCore, 'package');
+    const corePackageJson = JSON.parse(
+        readFileSync(path.join(unpackedCorePackage, 'package.json'), 'utf8'),
+    );
     const packageJson = JSON.parse(
         readFileSync(path.join(unpackedPackage, 'package.json'), 'utf8'),
     );
@@ -161,10 +201,7 @@ try {
 
     const nodeModules = path.join(temporary, 'node_modules');
     link(unpackedPackage, path.join(nodeModules, '@cratis/components.mui'));
-    link(
-        path.join(repositoryDirectory, 'Source'),
-        path.join(nodeModules, '@cratis/components'),
-    );
+    link(unpackedCorePackage, path.join(nodeModules, '@cratis/components'));
     for (const dependency of ['react', 'react-dom']) {
         link(
             path.join(repositoryDirectory, 'node_modules', dependency),
@@ -175,6 +212,18 @@ try {
             path.join(nodeModules, '@types', dependency),
         );
     }
+    for (const dependency of ['arc', 'arc.react', 'fundamentals']) {
+        link(
+            path.join(repositoryDirectory, 'node_modules/@cratis', dependency),
+            path.join(nodeModules, '@cratis', dependency),
+        );
+    }
+    for (const dependency of ['reflect-metadata', 'tsyringe']) {
+        link(
+            path.join(repositoryDirectory, 'node_modules', dependency),
+            path.join(nodeModules, dependency),
+        );
+    }
     for (const dependency of ['react', 'styled']) {
         link(
             path.join(repositoryDirectory, 'node_modules/@emotion', dependency),
@@ -196,17 +245,69 @@ try {
 
     writeFileSync(
         path.join(temporary, 'fixture.ts'),
-        "import { muiUiLibrary } from '@cratis/components.mui';\n" +
-            "import type { unstable_UiLibrary } from '@cratis/components/renderer';\n" +
-            'const library: unstable_UiLibrary = muiUiLibrary;\nvoid library;\n',
+        "import { muiUiLibrary } from '@cratis/components.mui';\nvoid muiUiLibrary;\n",
     );
     writeFileSync(
         path.join(temporary, 'jsx-shim.d.ts'),
         "import type { ReactElement } from 'react';\ndeclare global { namespace JSX { type Element = ReactElement; } }\nexport {};\n",
     );
     const typescript = path.join(repositoryDirectory, 'node_modules/typescript/bin/tsc');
+    run(
+        process.execPath,
+        [
+            path.join(repositoryDirectory, 'Source/scripts/verify-public-types.mjs'),
+            '--only',
+            './renderer',
+        ],
+        path.join(repositoryDirectory, 'Source'),
+    );
+
+    const exceptionMetadata = JSON.parse(
+        readFileSync(
+            path.join(
+                repositoryDirectory,
+                'Source/scripts/verify-public-types.exceptions.json',
+            ),
+            'utf8',
+        ),
+    );
+    const nodeNextIssue = exceptionMetadata.upstreamIssues.find(
+        (issue) => issue.id === 'arc-family-nodenext-extensionless-specifiers',
+    );
+    if (!nodeNextIssue) {
+        throw new Error('NodeNext upstream exception metadata is missing.');
+    }
+    const parseDiagnostics = (stdout) => {
+        const diagnosticLine = /^(.+?)\((\d+),(\d+)\): error (TS\d+): (.*)$/u;
+        return stdout
+            .split(/\r?\n/u)
+            .map((line) => line.match(diagnosticLine))
+            .filter(Boolean)
+            .map((match) => {
+                const [, rawFile, lineNo, , code, message] = match;
+                const absolute = path.resolve(rawFile);
+                const marker = `${path.sep}node_modules${path.sep}`;
+                const lastNodeModules = absolute.lastIndexOf(marker);
+                let file;
+                if (lastNodeModules >= 0) {
+                    file = absolute
+                        .slice(lastNodeModules + marker.length)
+                        .split(path.sep)
+                        .join('/');
+                } else if (absolute.startsWith(`${unpackedCorePackage}${path.sep}`)) {
+                    file = `@cratis/components/${path
+                        .relative(unpackedCorePackage, absolute)
+                        .split(path.sep)
+                        .join('/')}`;
+                } else {
+                    file = path.relative(temporary, absolute).split(path.sep).join('/');
+                }
+                return { code, file, line: Number(lineNo), message };
+            });
+    };
+
     for (const resolution of ['bundler', 'nodenext']) {
-        run(
+        const result = spawnSync(
             process.execPath,
             [
                 typescript,
@@ -228,13 +329,47 @@ try {
                 'fixture.ts',
                 'jsx-shim.d.ts',
             ],
-            temporary,
+            { cwd: temporary, encoding: 'utf8' },
         );
+        const diagnostics = parseDiagnostics(result.stdout ?? '');
+        if (result.status !== 0 && diagnostics.length === 0) {
+            throw new Error(
+                `Strict ${resolution} consumer failed without parseable diagnostics:\n${result.stdout}${result.stderr}`,
+            );
+        }
+        const covered = (diagnostic) =>
+            matchesExternalIssue(diagnostic, nodeNextIssue, corePackageJson.name) ||
+            matchesPairedOwnedCascade(
+                diagnostic,
+                nodeNextIssue,
+                diagnostics,
+                corePackageJson.name,
+            );
+        const unexpected = diagnostics.filter((diagnostic) => !covered(diagnostic));
+        if (unexpected.length > 0) {
+            throw new Error(
+                `Strict ${resolution} consumer produced unexpected diagnostics:\n${unexpected
+                    .map(
+                        (diagnostic) =>
+                            `${diagnostic.file}:${diagnostic.line} ${diagnostic.code} ${diagnostic.message}`,
+                    )
+                    .join('\n')}`,
+            );
+        }
+        if (
+            diagnostics.some((diagnostic) =>
+                isOwnedDeclarationDiagnostic(diagnostic, packageJson.name),
+            )
+        ) {
+            throw new Error(
+                `Strict ${resolution} consumer reported a declaration owned by ${packageJson.name}.`,
+            );
+        }
     }
 
     console.log(
         `Verified ${packageJson.name}@${packageJson.version}: archive boundaries, external vendor peers, ` +
-            'explicit-peer runtime import, one hygienic UiLibrary declaration, and strict Bundler/NodeNext consumers.',
+            'packed Core runtime import, one hygienic UiLibrary declaration, and strict Bundler/NodeNext consumers with bounded upstream exceptions.',
     );
 } finally {
     rmSync(temporary, { recursive: true, force: true });
diff --git a/Adapters/Mui/src/index.tsx b/Adapters/Mui/src/index.tsx
index 5e2a4e7a..120173a5 100644
--- a/Adapters/Mui/src/index.tsx
+++ b/Adapters/Mui/src/index.tsx
@@ -11,6 +11,7 @@ import {
     type ChangeEvent,
     type ForwardedRef,
     type InputHTMLAttributes,
+    type ReactElement,
     type ReactNode,
     type TextareaHTMLAttributes,
 } from 'react';
@@ -64,7 +65,6 @@ const profileSlots = Object.freeze([
 const capabilities = Object.freeze([
     'slot.render',
     'parts.passthrough',
-    'theme.tokens',
     'ssr.staticRender',
     'rtl',
     'forcedColors',
@@ -129,6 +129,8 @@ const muiVariant = (variant: 'solid' | 'outline' | 'ghost' | 'link') => {
         case 'ghost':
         case 'link':
             return 'text';
+        default:
+            throw new Error(`Unsupported Button variant '${String(variant)}'.`);
     }
 };
 
@@ -161,24 +163,41 @@ interface ResolvedButtonAppearance {
     readonly severity: ButtonSeverity | undefined;
 }
 
+interface ButtonAppearanceOptions {
+    readonly variant: ButtonProps['variant'];
+    readonly tone: ButtonProps['tone'];
+    readonly shape: ButtonProps['shape'];
+    readonly text: ButtonProps['text'];
+    readonly link: ButtonProps['link'];
+    readonly outlined: ButtonProps['outlined'];
+    readonly rounded: ButtonProps['rounded'];
+    readonly severity: ButtonProps['severity'];
+}
+
+const resolveButtonVariant = ({
+    variant,
+    link,
+    text,
+    outlined,
+}: ButtonAppearanceOptions): ResolvedButtonAppearance['variant'] => {
+    if (variant) return variant;
+    if (link) return 'link';
+    if (text) return 'ghost';
+    if (outlined) return 'outline';
+    return 'solid';
+};
+
 const resolveButtonAppearance = (
-    variant: ButtonProps['variant'],
-    tone: ButtonProps['tone'],
-    shape: ButtonProps['shape'],
-    text: ButtonProps['text'],
-    link: ButtonProps['link'],
-    outlined: ButtonProps['outlined'],
-    rounded: ButtonProps['rounded'],
-    severity: ButtonProps['severity'],
+    options: ButtonAppearanceOptions,
 ): ResolvedButtonAppearance => {
+    const { tone, shape, text, link, outlined, rounded, severity } = options;
     if (text !== undefined) warnForDeprecatedProp('text');
     if (link !== undefined) warnForDeprecatedProp('link');
     if (outlined !== undefined) warnForDeprecatedProp('outlined');
     if (rounded !== undefined) warnForDeprecatedProp('rounded');
     if (severity !== undefined) warnForDeprecatedProp('severity');
     return {
-        variant:
-            variant ?? (link ? 'link' : text ? 'ghost' : outlined ? 'outline' : 'solid'),
+        variant: resolveButtonVariant(options),
         tone: tone ?? (severity ? toneForSeverity[severity] : undefined),
         shape: shape ?? (rounded ? 'pill' : 'default'),
         severity: tone ? severityForTone[tone] : severity,
@@ -217,6 +236,43 @@ const MuiButtonContent = ({ icon, label, children, pt }: MuiButtonContentProps)
     </>
 );
 
+const muiButtonStyles = (appearance: ResolvedButtonAppearance) => ({
+    borderRadius: appearance.shape === 'pill' ? 9999 : undefined,
+    textTransform: appearance.variant === 'link' ? 'none' : undefined,
+    padding: appearance.variant === 'link' ? 0 : undefined,
+    minWidth: appearance.variant === 'link' ? 0 : undefined,
+});
+
+const muiLoadingIndicator = (pt: ButtonProps['pt']) => (
+    <span
+        {...pt?.spinner}
+        className={classNames(
+            'cratis-mui-button__spinner',
+            pt?.spinner?.className,
+        )}
+        data-cratis-part='spinner'
+        role='progressbar'
+        aria-label='Loading'
+    />
+);
+
+const withMuiTooltip = (
+    element: ReactElement,
+    tooltip: string | undefined,
+    options: ButtonProps['tooltipOptions'],
+) => {
+    if (!tooltip) return element;
+    return (
+        <MuiTooltip
+            title={tooltip}
+            placement={options?.position}
+            classes={{ tooltip: options?.className ?? '' }}
+        >
+            {element}
+        </MuiTooltip>
+    );
+};
+
 const MuiButtonSlot = forwardRef<HTMLButtonElement, ButtonProps>(function MuiButtonSlot(
     {
         label,
@@ -246,7 +302,7 @@ const MuiButtonSlot = forwardRef<HTMLButtonElement, ButtonProps>(function MuiBut
     },
     ref,
 ) {
-    const appearance = resolveButtonAppearance(
+    const appearance = resolveButtonAppearance({
         variant,
         tone,
         shape,
@@ -255,7 +311,7 @@ const MuiButtonSlot = forwardRef<HTMLButtonElement, ButtonProps>(function MuiBut
         outlined,
         rounded,
         severity,
-    );
+    });
     const effectiveDisabled = Boolean(disabled || loading);
     const iconOnly = Boolean(icon) && label === undefined && !children;
     const button = (
@@ -274,24 +330,8 @@ const MuiButtonSlot = forwardRef<HTMLButtonElement, ButtonProps>(function MuiBut
             color={muiColorForTone(appearance.tone)}
             size={muiSize(size)}
             loading={loading}
-            loadingIndicator={
-                <span
-                    {...pt?.spinner}
-                    className={classNames(
-                        'cratis-mui-button__spinner',
-                        pt?.spinner?.className,
-                    )}
-                    data-cratis-part='spinner'
-                    role='progressbar'
-                    aria-label='Loading'
-                />
-            }
-            sx={{
-                borderRadius: appearance.shape === 'pill' ? 9999 : undefined,
-                textTransform: appearance.variant === 'link' ? 'none' : undefined,
-                padding: appearance.variant === 'link' ? 0 : undefined,
-                minWidth: appearance.variant === 'link' ? 0 : undefined,
-            }}
+            loadingIndicator={muiLoadingIndicator(pt)}
+            sx={muiButtonStyles(appearance)}
             aria-busy={loading || undefined}
             data-cratis-part='root'
             data-variant={appearance.variant}
@@ -308,17 +348,7 @@ const MuiButtonSlot = forwardRef<HTMLButtonElement, ButtonProps>(function MuiBut
             </MuiButtonContent>
         </MuiButton>
     );
-    return tooltip ? (
-        <MuiTooltip
-            title={tooltip}
-            placement={tooltipOptions?.position}
-            classes={{ tooltip: tooltipOptions?.className ?? '' }}
-        >
-            {button}
-        </MuiTooltip>
-    ) : (
-        button
-    );
+    return withMuiTooltip(button, tooltip, tooltipOptions);
 });
 
 const MuiIconButtonSlot = forwardRef<HTMLButtonElement, IconButtonProps>(
@@ -350,7 +380,7 @@ const MuiIconButtonSlot = forwardRef<HTMLButtonElement, IconButtonProps>(
         },
         ref,
     ) {
-        const appearance = resolveButtonAppearance(
+        const appearance = resolveButtonAppearance({
             variant,
             tone,
             shape,
@@ -359,7 +389,7 @@ const MuiIconButtonSlot = forwardRef<HTMLButtonElement, IconButtonProps>(
             outlined,
             rounded,
             severity,
-        );
+        });
         const effectiveDisabled = Boolean(disabled || loading);
         const button = (
             <MuiIconButton
@@ -380,18 +410,7 @@ const MuiIconButtonSlot = forwardRef<HTMLButtonElement, IconButtonProps>(
                 color={muiColorForTone(appearance.tone)}
                 size={muiSize(size)}
                 loading={loading}
-                loadingIndicator={
-                    <span
-                        {...pt?.spinner}
-                        className={classNames(
-                            'cratis-mui-button__spinner',
-                            pt?.spinner?.className,
-                        )}
-                        data-cratis-part='spinner'
-                        role='progressbar'
-                        aria-label='Loading'
-                    />
-                }
+                loadingIndicator={muiLoadingIndicator(pt)}
                 sx={{ borderRadius: appearance.shape === 'pill' ? '50%' : 1 }}
                 aria-label={ariaLabel}
                 aria-busy={loading || undefined}
@@ -420,17 +439,7 @@ const MuiIconButtonSlot = forwardRef<HTMLButtonElement, IconButtonProps>(
                 )}
             </MuiIconButton>
         );
-        return tooltip ? (
-            <MuiTooltip
-                title={tooltip}
-                placement={tooltipOptions?.position}
-                classes={{ tooltip: tooltipOptions?.className ?? '' }}
-            >
-                {button}
-            </MuiTooltip>
-        ) : (
-            button
-        );
+        return withMuiTooltip(button, tooltip, tooltipOptions);
     },
 );
 
@@ -558,8 +567,9 @@ const useNativeCheckedState = (
     checked: boolean | undefined,
     defaultChecked: boolean | undefined,
     forwardedRef: ForwardedRef<HTMLInputElement>,
-    observeRadioGroup = false,
+    options: { readonly observeRadioGroup?: boolean } = {},
 ) => {
+    const observeRadioGroup = options.observeRadioGroup ?? false;
     const inputRef = useRef<HTMLInputElement>(null);
     const [uncontrolledChecked, setUncontrolledChecked] = useState(
         Boolean(defaultChecked),
@@ -626,26 +636,205 @@ interface MuiChoiceProps {
     readonly forwardedRef: ForwardedRef<HTMLInputElement>;
 }
 
-const MuiChoice = ({ kind, props, forwardedRef }: MuiChoiceProps) => {
-    const pt = props.pt as ChoiceParts | undefined;
-    const inputPt = pt?.input as InputHTMLAttributes<HTMLInputElement> | undefined;
-    const checked = props.checked ?? inputPt?.checked;
-    const defaultChecked = props.defaultChecked ?? inputPt?.defaultChecked;
-    const disabled = props.disabled ?? inputPt?.disabled;
-    const readOnly = props.readOnly ?? inputPt?.readOnly;
+type ChoiceStateAttributes = ReturnType<typeof stateAttributes>;
+
+interface ResolvedMuiChoice {
+    readonly parts: ChoiceParts | undefined;
+    readonly inputPart: InputHTMLAttributes<HTMLInputElement> | undefined;
+    readonly checked: boolean | undefined;
+    readonly defaultChecked: boolean | undefined;
+    readonly disabled: boolean | undefined;
+    readonly readOnly: boolean | undefined;
+    readonly ariaInvalid: InputHTMLAttributes<HTMLInputElement>['aria-invalid'];
+    readonly state: ReturnType<typeof useNativeCheckedState>;
+    readonly attributes: ChoiceStateAttributes;
+}
+
+const useResolvedMuiChoice = (
+    kind: ChoiceKind,
+    props: ChoiceProps,
+    forwardedRef: ForwardedRef<HTMLInputElement>,
+): ResolvedMuiChoice => {
+    const parts = props.pt as ChoiceParts | undefined;
+    const inputPart = parts?.input as
+        | InputHTMLAttributes<HTMLInputElement>
+        | undefined;
+    const checked = props.checked ?? inputPart?.checked;
+    const defaultChecked = props.defaultChecked ?? inputPart?.defaultChecked;
+    const disabled = props.disabled ?? inputPart?.disabled;
+    const readOnly = props.readOnly ?? inputPart?.readOnly;
     const ariaInvalid =
         props['aria-invalid'] ??
-        inputPt?.['aria-invalid'] ??
+        inputPart?.['aria-invalid'] ??
         (props.invalid || undefined);
     const invalid =
         Boolean(props.invalid) || ariaInvalid === true || ariaInvalid === 'true';
-    const state = useNativeCheckedState(
+    const state = useNativeCheckedState(checked, defaultChecked, forwardedRef, {
+        observeRadioGroup: kind === 'radio',
+    });
+    return {
+        parts,
+        inputPart,
         checked,
         defaultChecked,
-        forwardedRef,
-        kind === 'radio',
-    );
-    const attributes = stateAttributes(disabled, invalid, readOnly, state.selected);
+        disabled,
+        readOnly,
+        ariaInvalid,
+        state,
+        attributes: stateAttributes(disabled, invalid, readOnly, state.selected),
+    };
+};
+
+interface MuiChoiceControlProps {
+    readonly kind: ChoiceKind;
+    readonly checked: boolean | undefined;
+    readonly defaultChecked: boolean | undefined;
+    readonly disabled: boolean | undefined;
+    readonly onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    readonly input: NativeInputSlotProps;
+    readonly parts: ChoiceParts | undefined;
+    readonly attributes: ChoiceStateAttributes;
+}
+
+const choiceIndicator = (
+    kind: 'checkbox' | 'radio',
+    parts: CheckboxParts | RadioParts | undefined,
+    attributes: ChoiceStateAttributes,
+    selected: boolean,
+) => (
+    <span
+        {...parts?.indicator}
+        className={classNames(
+            `cratis-mui-${kind}__indicator`,
+            parts?.indicator?.className,
+        )}
+        data-cratis-part='indicator'
+        {...attributes}
+    >
+        {kind === 'checkbox' && selected ? '✓' : undefined}
+    </span>
+);
+
+const MuiChoiceControl = ({
+    kind,
+    checked,
+    defaultChecked,
+    disabled,
+    onChange,
+    input,
+    parts,
+    attributes,
+}: MuiChoiceControlProps) => {
+    const uncontrolledDefault = checked === undefined ? defaultChecked : undefined;
+    switch (kind) {
+        case 'switch': {
+            const switchParts = parts as SwitchParts | undefined;
+            const root = {
+                ...switchParts?.control,
+                className: classNames(
+                    'cratis-mui-switch__control',
+                    switchParts?.control?.className,
+                ),
+                'data-cratis-part': 'control',
+                ...attributes,
+            };
+            const thumb = {
+                ...switchParts?.handle,
+                className: classNames(
+                    'cratis-mui-switch__handle',
+                    switchParts?.handle?.className,
+                ),
+                'data-cratis-part': 'handle',
+                ...attributes,
+            };
+            return (
+                <MuiSwitch
+                    checked={checked}
+                    defaultChecked={uncontrolledDefault}
+                    disabled={disabled}
+                    onChange={onChange}
+                    slotProps={{ root, input, thumb }}
+                />
+            );
+        }
+        case 'radio': {
+            const radioParts = parts as RadioParts | undefined;
+            const root = {
+                ...radioParts?.box,
+                className: classNames(
+                    'cratis-mui-radio__box',
+                    radioParts?.box?.className,
+                ),
+                'data-cratis-part': 'box',
+                ...attributes,
+            };
+            return (
+                <MuiRadio
+                    checked={checked}
+                    defaultChecked={uncontrolledDefault}
+                    disabled={disabled}
+                    onChange={onChange}
+                    icon={choiceIndicator('radio', radioParts, attributes, false)}
+                    checkedIcon={choiceIndicator(
+                        'radio',
+                        radioParts,
+                        attributes,
+                        true,
+                    )}
+                    slotProps={{ root, input }}
+                />
+            );
+        }
+        case 'checkbox': {
+            const checkboxParts = parts as CheckboxParts | undefined;
+            const root = {
+                ...checkboxParts?.box,
+                className: classNames(
+                    'cratis-mui-checkbox__box',
+                    checkboxParts?.box?.className,
+                ),
+                'data-cratis-part': 'box',
+                ...attributes,
+            };
+            return (
+                <MuiCheckbox
+                    checked={checked}
+                    defaultChecked={uncontrolledDefault}
+                    disabled={disabled}
+                    onChange={onChange}
+                    icon={choiceIndicator(
+                        'checkbox',
+                        checkboxParts,
+                        attributes,
+                        false,
+                    )}
+                    checkedIcon={choiceIndicator(
+                        'checkbox',
+                        checkboxParts,
+                        attributes,
+                        true,
+                    )}
+                    slotProps={{ root, input }}
+                />
+            );
+        }
+        default:
+            throw new Error(`Unsupported choice kind '${String(kind)}'.`);
+    }
+};
+
+const MuiChoice = ({ kind, props, forwardedRef }: MuiChoiceProps) => {
+    const {
+        parts,
+        inputPart,
+        checked,
+        defaultChecked,
+        disabled,
+        readOnly,
+        ariaInvalid,
+        state,
+        attributes,
+    } = useResolvedMuiChoice(kind, props, forwardedRef);
     const {
         label,
         readOnly: _readOnly,
@@ -662,19 +851,19 @@ const MuiChoice = ({ kind, props, forwardedRef }: MuiChoiceProps) => {
         ...nativeProps
     } = props;
     const {
-        onClick: ptOnClick,
-        onChange: ptOnChange,
+        onClick: partOnClick,
+        onChange: partOnChange,
         className: inputClassName,
         style: inputStyle,
-        readOnly: _ptReadOnly,
-        checked: _ptChecked,
-        defaultChecked: _ptDefaultChecked,
-        disabled: _ptDisabled,
-        ...inputPtRest
-    } = inputPt ?? {};
+        readOnly: _partReadOnly,
+        checked: _partChecked,
+        defaultChecked: _partDefaultChecked,
+        disabled: _partDisabled,
+        ...inputPartRest
+    } = inputPart ?? {};
     const radioProps = props as RadioProps;
-    const inputSlotProps: NativeInputSlotProps = {
-        ...inputPtRest,
+    const input: NativeInputSlotProps = {
+        ...inputPartRest,
         ...nativeProps,
         ref: state.ref,
         name: kind === 'radio' ? radioProps.name : nativeProps.name,
@@ -685,15 +874,14 @@ const MuiChoice = ({ kind, props, forwardedRef }: MuiChoiceProps) => {
         style: inputStyle,
         'data-cratis-part': 'input',
         ...attributes,
+        onClick: (event) => {
+            partOnClick?.(event);
+            onClick?.(event);
+            if (readOnly) event.preventDefault();
+        },
     };
-    const handleClick = (event: React.MouseEvent<HTMLInputElement>) => {
-        ptOnClick?.(event);
-        onClick?.(event);
-        if (readOnly) event.preventDefault();
-    };
-    inputSlotProps.onClick = handleClick;
     const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-        ptOnChange?.(event);
+        partOnChange?.(event);
         if (readOnly || (kind === 'radio' && !event.currentTarget.checked)) return;
         state.synchronize(event.currentTarget.checked);
         onChange?.(event.currentTarget.checked, {
@@ -701,129 +889,29 @@ const MuiChoice = ({ kind, props, forwardedRef }: MuiChoiceProps) => {
             nativeEvent: event.nativeEvent,
         });
     };
-    const switchParts = pt as SwitchParts | undefined;
-    const radioParts = pt as RadioParts | undefined;
-    const checkboxParts = pt as CheckboxParts | undefined;
-    const switchControlProps = {
-        ...switchParts?.control,
-        className: classNames(
-            'cratis-mui-switch__control',
-            switchParts?.control?.className,
-        ),
-        'data-cratis-part': 'control',
-        ...attributes,
-    };
-    const switchHandleProps = {
-        ...switchParts?.handle,
-        className: classNames(
-            'cratis-mui-switch__handle',
-            switchParts?.handle?.className,
-        ),
-        'data-cratis-part': 'handle',
-        ...attributes,
-    };
-    const radioBoxProps = {
-        ...radioParts?.box,
-        className: classNames('cratis-mui-radio__box', radioParts?.box?.className),
-        'data-cratis-part': 'box',
-        ...attributes,
-    };
-    const checkboxBoxProps = {
-        ...checkboxParts?.box,
-        className: classNames('cratis-mui-checkbox__box', checkboxParts?.box?.className),
-        'data-cratis-part': 'box',
-        ...attributes,
-    };
-    const labelPart = pt?.label;
-    const root = (
+    const labelPart = parts?.label;
+    return (
         <label
-            {...pt?.root}
-            className={classNames('cratis-mui-choice', pt?.root?.className, className)}
-            style={{ ...pt?.root?.style, ...style }}
+            {...parts?.root}
+            className={classNames(
+                'cratis-mui-choice',
+                parts?.root?.className,
+                className,
+            )}
+            style={{ ...parts?.root?.style, ...style }}
             data-cratis-part='root'
             {...attributes}
         >
-            {kind === 'switch' ? (
-                <MuiSwitch
-                    checked={checked}
-                    defaultChecked={checked === undefined ? defaultChecked : undefined}
-                    disabled={disabled}
-                    onChange={handleChange}
-                    slotProps={{
-                        root: switchControlProps,
-                        input: inputSlotProps,
-                        thumb: switchHandleProps,
-                    }}
-                />
-            ) : kind === 'radio' ? (
-                <MuiRadio
-                    checked={checked}
-                    defaultChecked={checked === undefined ? defaultChecked : undefined}
-                    disabled={disabled}
-                    onChange={handleChange}
-                    icon={
-                        <span
-                            {...(pt as RadioParts | undefined)?.indicator}
-                            className={classNames(
-                                'cratis-mui-radio__indicator',
-                                (pt as RadioParts | undefined)?.indicator?.className,
-                            )}
-                            data-cratis-part='indicator'
-                            {...attributes}
-                        />
-                    }
-                    checkedIcon={
-                        <span
-                            {...(pt as RadioParts | undefined)?.indicator}
-                            className={classNames(
-                                'cratis-mui-radio__indicator',
-                                (pt as RadioParts | undefined)?.indicator?.className,
-                            )}
-                            data-cratis-part='indicator'
-                            {...attributes}
-                        />
-                    }
-                    slotProps={{
-                        root: radioBoxProps,
-                        input: inputSlotProps,
-                    }}
-                />
-            ) : (
-                <MuiCheckbox
-                    checked={checked}
-                    defaultChecked={checked === undefined ? defaultChecked : undefined}
-                    disabled={disabled}
-                    onChange={handleChange}
-                    icon={
-                        <span
-                            {...(pt as CheckboxParts | undefined)?.indicator}
-                            className={classNames(
-                                'cratis-mui-checkbox__indicator',
-                                (pt as CheckboxParts | undefined)?.indicator?.className,
-                            )}
-                            data-cratis-part='indicator'
-                            {...attributes}
-                        />
-                    }
-                    checkedIcon={
-                        <span
-                            {...(pt as CheckboxParts | undefined)?.indicator}
-                            className={classNames(
-                                'cratis-mui-checkbox__indicator',
-                                (pt as CheckboxParts | undefined)?.indicator?.className,
-                            )}
-                            data-cratis-part='indicator'
-                            {...attributes}
-                        >
-                            ✓
-                        </span>
-                    }
-                    slotProps={{
-                        root: checkboxBoxProps,
-                        input: inputSlotProps,
-                    }}
-                />
-            )}
+            <MuiChoiceControl
+                kind={kind}
+                checked={checked}
+                defaultChecked={defaultChecked}
+                disabled={disabled}
+                onChange={handleChange}
+                input={input}
+                parts={parts}
+                attributes={attributes}
+            />
             {label !== undefined && (
                 <span
                     {...labelPart}
@@ -839,7 +927,6 @@ const MuiChoice = ({ kind, props, forwardedRef }: MuiChoiceProps) => {
             )}
         </label>
     );
-    return root;
 };
 
 const MuiCheckboxSlot = forwardRef<HTMLInputElement, CheckboxProps>(
diff --git a/Adapters/Mui/src/upstream-jsx-shim.d.ts b/Adapters/Mui/src/upstream-jsx-shim.d.ts
new file mode 100644
index 00000000..92924b0a
--- /dev/null
+++ b/Adapters/Mui/src/upstream-jsx-shim.d.ts
@@ -0,0 +1,11 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { ReactElement } from 'react';
+
+/** @internal Temporary compile-only bridge for the exact upstream Arc React declaration issue. */
+declare global {
+    namespace JSX {
+        type Element = ReactElement;
+    }
+}
diff --git a/yarn.lock b/yarn.lock
index 69e3b7db..c7638c1e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -322,13 +322,19 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@cratis/components.mui@workspace:Adapters/Mui"
   dependencies:
+    "@cratis/arc": "npm:22.4.0"
+    "@cratis/arc.react": "npm:22.4.0"
     "@cratis/components": "workspace:^"
     "@cratis/components.conformance": "workspace:^"
+    "@cratis/fundamentals": "npm:^7.10.3"
     "@emotion/react": "npm:11.14.0"
     "@emotion/styled": "npm:11.14.1"
     "@mui/material": "npm:9.4.0"
+    "@types/react": "npm:^19.2.18"
     react: "npm:^19.0.0"
     react-dom: "npm:^19.0.0"
+    reflect-metadata: "npm:0.2.2"
+    tsyringe: "npm:4.10.0"
   peerDependencies:
     "@cratis/components": ">=3.0.0 <4"
     "@emotion/react": ">=11 <12"

From 099e43c54494c75f5e2353d3f985e15edc320d56 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Fri, 28 Aug 2026 08:55:20 +0200
Subject: [PATCH 220/267] Address MUI adapter review findings

---
 Adapters/Mui/CONFORMANCE.md                       | 13 ++++++++++---
 Adapters/Mui/README.md                            |  5 +++--
 .../when_using_the_mui_presentation_profile.tsx   |  7 ++++++-
 Adapters/Mui/package.json                         |  5 +----
 Adapters/Mui/scripts/verify-packed-package.mjs    | 15 ++++++++-------
 Adapters/Mui/src/index.tsx                        |  8 +++-----
 6 files changed, 31 insertions(+), 22 deletions(-)

diff --git a/Adapters/Mui/CONFORMANCE.md b/Adapters/Mui/CONFORMANCE.md
index a481714b..720429a8 100644
--- a/Adapters/Mui/CONFORMANCE.md
+++ b/Adapters/Mui/CONFORMANCE.md
@@ -20,6 +20,13 @@ The bounded checks cover:
 - package peers, archive boundaries, runtime loading, declaration hygiene, and strict Bundler and
   NodeNext consumers with `skipLibCheck: false`.
 
-This is automated jsdom/axe and package evidence, not universal browser, visual, or assistive-
-technology certification. MUI's CSS-in-JS output also requires host-specific, request-local Emotion
-cache and style extraction during SSR. No MUI X package is included or exercised.
+The generic overlay absent/present check has no applicable slot in this nine-slot profile; it is
+reported as a bounded pass but supplies no MUI overlay evidence. Portable part names and typed `pt`
+destinations are preserved, while MUI may add wrappers or nest parts differently from the built-in
+renderer; undocumented descendant order and sibling selectors are not portable contracts.
+
+This is automated jsdom/axe and package evidence, not universal browser, visual, RTL, forced-colors,
+reduced-motion, or assistive-technology certification. MUI RTL requires host theme direction and an
+RTL-configured Emotion cache, which this adapter's provider ABI cannot create per request. MUI's
+CSS-in-JS output likewise requires host-specific, request-local Emotion cache and style extraction
+during SSR. No MUI X package is included or exercised.
diff --git a/Adapters/Mui/README.md b/Adapters/Mui/README.md
index b916c470..668bc13c 100644
--- a/Adapters/Mui/README.md
+++ b/Adapters/Mui/README.md
@@ -49,8 +49,9 @@ Put application customization outside `CratisComponentsProvider`:
 The renderer provider ABI receives only `children`; it cannot receive an Emotion cache. SSR hosts
 must create an Emotion cache per request, mount Emotion's `CacheProvider` outside the Components
 provider, and extract critical styles from that same request-local cache. Sharing a cache between
-requests can leak styles and ordering. This is application/host integration and does not justify a
-Core ABI change.
+requests can leak styles and ordering. RTL additionally requires the host MUI theme direction and
+an Emotion cache configured with the RTL Stylis plugin. These are application/host integration
+concerns and do not justify a Core ABI change.
 
 ## Peer policy
 
diff --git a/Adapters/Mui/for_adapter/when_using_the_mui_presentation_profile.tsx b/Adapters/Mui/for_adapter/when_using_the_mui_presentation_profile.tsx
index 37246785..8c21bc50 100644
--- a/Adapters/Mui/for_adapter/when_using_the_mui_presentation_profile.tsx
+++ b/Adapters/Mui/for_adapter/when_using_the_mui_presentation_profile.tsx
@@ -127,7 +127,10 @@ describe('when using the MUI stable presentation profile', () => {
             }),
             textInput: renderSlot('common.textInput', { 'aria-label': 'Name' }),
             textArea: renderSlot('common.textArea', { 'aria-label': 'Notes' }),
-            checkbox: renderSlot('common.checkbox', { 'aria-label': 'Selected' }),
+            checkbox: renderSlot('common.checkbox', {
+                label: 'Selected',
+                defaultChecked: true,
+            }),
             radio: renderSlot('common.radio', {
                 name: 'frequency',
                 value: 'daily',
@@ -142,8 +145,10 @@ describe('when using the MUI stable presentation profile', () => {
         expect(markup.textInput).to.contain('MuiInputBase-root');
         expect(markup.textArea).to.contain('MuiInputBase-root');
         expect(markup.checkbox).to.contain('MuiCheckbox-root');
+        expect(markup.checkbox).to.contain('aria-hidden="true"');
         expect(markup.radio).to.contain('MuiRadio-root');
         expect(markup.switchControl).to.contain('MuiSwitch-root');
+        expect(markup.switchControl).to.contain('role="switch"');
         expect(markup.progress).to.contain('MuiLinearProgress-root');
         expect(markup.surface).to.contain('MuiPaper-root');
         expect(markup.surface).to.contain('<article');
diff --git a/Adapters/Mui/package.json b/Adapters/Mui/package.json
index c07492f7..fccbc298 100644
--- a/Adapters/Mui/package.json
+++ b/Adapters/Mui/package.json
@@ -70,10 +70,7 @@
         "capabilities": [
             "slot.render",
             "parts.passthrough",
-            "ssr.staticRender",
-            "rtl",
-            "forcedColors",
-            "motion.reduced"
+            "ssr.staticRender"
         ],
         "ssr": "safe",
         "a11y": {
diff --git a/Adapters/Mui/scripts/verify-packed-package.mjs b/Adapters/Mui/scripts/verify-packed-package.mjs
index b03826ac..b04584ba 100644
--- a/Adapters/Mui/scripts/verify-packed-package.mjs
+++ b/Adapters/Mui/scripts/verify-packed-package.mjs
@@ -338,13 +338,14 @@ try {
             );
         }
         const covered = (diagnostic) =>
-            matchesExternalIssue(diagnostic, nodeNextIssue, corePackageJson.name) ||
-            matchesPairedOwnedCascade(
-                diagnostic,
-                nodeNextIssue,
-                diagnostics,
-                corePackageJson.name,
-            );
+            nodeNextIssue.resolutionModes.includes(resolution) &&
+            (matchesExternalIssue(diagnostic, nodeNextIssue, corePackageJson.name) ||
+                matchesPairedOwnedCascade(
+                    diagnostic,
+                    nodeNextIssue,
+                    diagnostics,
+                    corePackageJson.name,
+                ));
         const unexpected = diagnostics.filter((diagnostic) => !covered(diagnostic));
         if (unexpected.length > 0) {
             throw new Error(
diff --git a/Adapters/Mui/src/index.tsx b/Adapters/Mui/src/index.tsx
index 120173a5..7855299e 100644
--- a/Adapters/Mui/src/index.tsx
+++ b/Adapters/Mui/src/index.tsx
@@ -66,9 +66,6 @@ const capabilities = Object.freeze([
     'slot.render',
     'parts.passthrough',
     'ssr.staticRender',
-    'rtl',
-    'forcedColors',
-    'motion.reduced',
 ] satisfies readonly unstable_CapabilityId[]);
 
 const MuiAdapterProvider = ({ children }: { readonly children: ReactNode }) => {
@@ -251,8 +248,7 @@ const muiLoadingIndicator = (pt: ButtonProps['pt']) => (
             pt?.spinner?.className,
         )}
         data-cratis-part='spinner'
-        role='progressbar'
-        aria-label='Loading'
+        aria-hidden='true'
     />
 );
 
@@ -709,6 +705,7 @@ const choiceIndicator = (
             parts?.indicator?.className,
         )}
         data-cratis-part='indicator'
+        aria-hidden='true'
         {...attributes}
     >
         {kind === 'checkbox' && selected ? '✓' : undefined}
@@ -870,6 +867,7 @@ const MuiChoice = ({ kind, props, forwardedRef }: MuiChoiceProps) => {
         value: kind === 'radio' ? radioProps.value : nativeProps.value,
         'aria-invalid': ariaInvalid,
         'aria-readonly': readOnly || undefined,
+        role: kind === 'switch' ? 'switch' : nativeProps.role,
         className: classNames('cratis-mui-choice__input', inputClassName),
         style: inputStyle,
         'data-cratis-part': 'input',

From d98fca6d17f92f0ed5e3ccfb3eb9e354010bcce1 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Fri, 28 Aug 2026 09:02:08 +0200
Subject: [PATCH 221/267] Format MUI adapter review fixes

---
 .../Mui/scripts/verify-packed-package.mjs     |  6 +++-
 Adapters/Mui/src/index.tsx                    | 29 ++++---------------
 2 files changed, 10 insertions(+), 25 deletions(-)

diff --git a/Adapters/Mui/scripts/verify-packed-package.mjs b/Adapters/Mui/scripts/verify-packed-package.mjs
index b04584ba..aa4be6e3 100644
--- a/Adapters/Mui/scripts/verify-packed-package.mjs
+++ b/Adapters/Mui/scripts/verify-packed-package.mjs
@@ -39,7 +39,11 @@ const link = (source, target) => {
 };
 
 const parsePackJson = (output) => {
-    for (let index = output.lastIndexOf('['); index >= 0; index = output.lastIndexOf('[', index - 1)) {
+    for (
+        let index = output.lastIndexOf('[');
+        index >= 0;
+        index = output.lastIndexOf('[', index - 1)
+    ) {
         try {
             const parsed = JSON.parse(output.slice(index));
             if (Array.isArray(parsed) && parsed[0]?.filename) return parsed;
diff --git a/Adapters/Mui/src/index.tsx b/Adapters/Mui/src/index.tsx
index 7855299e..cae3483e 100644
--- a/Adapters/Mui/src/index.tsx
+++ b/Adapters/Mui/src/index.tsx
@@ -243,10 +243,7 @@ const muiButtonStyles = (appearance: ResolvedButtonAppearance) => ({
 const muiLoadingIndicator = (pt: ButtonProps['pt']) => (
     <span
         {...pt?.spinner}
-        className={classNames(
-            'cratis-mui-button__spinner',
-            pt?.spinner?.className,
-        )}
+        className={classNames('cratis-mui-button__spinner', pt?.spinner?.className)}
         data-cratis-part='spinner'
         aria-hidden='true'
     />
@@ -652,9 +649,7 @@ const useResolvedMuiChoice = (
     forwardedRef: ForwardedRef<HTMLInputElement>,
 ): ResolvedMuiChoice => {
     const parts = props.pt as ChoiceParts | undefined;
-    const inputPart = parts?.input as
-        | InputHTMLAttributes<HTMLInputElement>
-        | undefined;
+    const inputPart = parts?.input as InputHTMLAttributes<HTMLInputElement> | undefined;
     const checked = props.checked ?? inputPart?.checked;
     const defaultChecked = props.defaultChecked ?? inputPart?.defaultChecked;
     const disabled = props.disabled ?? inputPart?.disabled;
@@ -772,12 +767,7 @@ const MuiChoiceControl = ({
                     disabled={disabled}
                     onChange={onChange}
                     icon={choiceIndicator('radio', radioParts, attributes, false)}
-                    checkedIcon={choiceIndicator(
-                        'radio',
-                        radioParts,
-                        attributes,
-                        true,
-                    )}
+                    checkedIcon={choiceIndicator('radio', radioParts, attributes, true)}
                     slotProps={{ root, input }}
                 />
             );
@@ -799,12 +789,7 @@ const MuiChoiceControl = ({
                     defaultChecked={uncontrolledDefault}
                     disabled={disabled}
                     onChange={onChange}
-                    icon={choiceIndicator(
-                        'checkbox',
-                        checkboxParts,
-                        attributes,
-                        false,
-                    )}
+                    icon={choiceIndicator('checkbox', checkboxParts, attributes, false)}
                     checkedIcon={choiceIndicator(
                         'checkbox',
                         checkboxParts,
@@ -891,11 +876,7 @@ const MuiChoice = ({ kind, props, forwardedRef }: MuiChoiceProps) => {
     return (
         <label
             {...parts?.root}
-            className={classNames(
-                'cratis-mui-choice',
-                parts?.root?.className,
-                className,
-            )}
+            className={classNames('cratis-mui-choice', parts?.root?.className, className)}
             style={{ ...parts?.root?.style, ...style }}
             data-cratis-part='root'
             {...attributes}

From 0bd134c7fcf8f08b56a7445920180ead97fa876c Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Fri, 28 Aug 2026 09:32:18 +0200
Subject: [PATCH 222/267] pi-agent: Implement PrimeReact 11 adapter

---
 Adapters/PrimeReact/CONFORMANCE.md            |  32 +
 Adapters/PrimeReact/LICENSE                   |  30 +
 Adapters/PrimeReact/README.md                 |  67 ++
 Adapters/PrimeReact/THIRD_PARTY_NOTICES.md    |  35 +
 ...ng_the_primereact_presentation_profile.tsx | 256 ++++++
 Adapters/PrimeReact/package.json              | 129 +++
 .../scripts/verify-packed-package.mjs         | 381 +++++++++
 Adapters/PrimeReact/src/index.tsx             | 797 ++++++++++++++++++
 Adapters/PrimeReact/tsconfig.build.json       |  16 +
 Adapters/PrimeReact/tsconfig.json             |  19 +
 Adapters/PrimeReact/vitest.config.ts          |  17 +
 Adapters/PrimeReact/vitest.setup.ts           |  28 +
 Conformance/src/ConformanceOptions.ts         |   3 +
 Conformance/src/runConformance.tsx            |  42 +-
 Source/Common/CratisComponentsProvider.tsx    |   9 +-
 Source/renderer/RendererContext.tsx           |  23 +-
 Source/renderer/RendererScope.tsx             |   6 +-
 .../when_using_provider_setup.tsx             |  29 +
 Source/renderer/index.ts                      |   2 +
 Source/renderer/manifest.ts                   |  18 +-
 yarn.lock                                     | 194 +++++
 21 files changed, 2118 insertions(+), 15 deletions(-)
 create mode 100644 Adapters/PrimeReact/CONFORMANCE.md
 create mode 100644 Adapters/PrimeReact/LICENSE
 create mode 100644 Adapters/PrimeReact/README.md
 create mode 100644 Adapters/PrimeReact/THIRD_PARTY_NOTICES.md
 create mode 100644 Adapters/PrimeReact/for_adapter/when_using_the_primereact_presentation_profile.tsx
 create mode 100644 Adapters/PrimeReact/package.json
 create mode 100644 Adapters/PrimeReact/scripts/verify-packed-package.mjs
 create mode 100644 Adapters/PrimeReact/src/index.tsx
 create mode 100644 Adapters/PrimeReact/tsconfig.build.json
 create mode 100644 Adapters/PrimeReact/tsconfig.json
 create mode 100644 Adapters/PrimeReact/vitest.config.ts
 create mode 100644 Adapters/PrimeReact/vitest.setup.ts

diff --git a/Adapters/PrimeReact/CONFORMANCE.md b/Adapters/PrimeReact/CONFORMANCE.md
new file mode 100644
index 00000000..720429a8
--- /dev/null
+++ b/Adapters/PrimeReact/CONFORMANCE.md
@@ -0,0 +1,32 @@
+<!-- Copyright (c) Cratis. All rights reserved. -->
+<!-- Licensed under the MIT license. See LICENSE file in the project root for full license information. -->
+
+# MUI adapter conformance
+
+The adapter declares `stable-presentation/v1` at renderer ABI major 1. Repository evidence runs
+`@cratis/components.conformance` against all nine declared slots and requires 100 of 100 checks to
+pass with zero failures and zero skips.
+
+The bounded checks cover:
+
+- schema-valid package metadata and exact static/runtime consistency;
+- every stable part, canonical state, and typed `pt` destination;
+- exact native elements and native refs;
+- native names, values, submit/reset, disabled/read-only, validation, and autofill-shaped props;
+- one value-first `ChangeHandler` callback with `source: 'user'` and the originating native `Event`;
+- current and deprecated Button appearance mapping and canonical data attributes;
+- real MUI DOM identities for all nine slots;
+- deterministic SSR and mismatch-free hydration; and
+- package peers, archive boundaries, runtime loading, declaration hygiene, and strict Bundler and
+  NodeNext consumers with `skipLibCheck: false`.
+
+The generic overlay absent/present check has no applicable slot in this nine-slot profile; it is
+reported as a bounded pass but supplies no MUI overlay evidence. Portable part names and typed `pt`
+destinations are preserved, while MUI may add wrappers or nest parts differently from the built-in
+renderer; undocumented descendant order and sibling selectors are not portable contracts.
+
+This is automated jsdom/axe and package evidence, not universal browser, visual, RTL, forced-colors,
+reduced-motion, or assistive-technology certification. MUI RTL requires host theme direction and an
+RTL-configured Emotion cache, which this adapter's provider ABI cannot create per request. MUI's
+CSS-in-JS output likewise requires host-specific, request-local Emotion cache and style extraction
+during SSR. No MUI X package is included or exercised.
diff --git a/Adapters/PrimeReact/LICENSE b/Adapters/PrimeReact/LICENSE
new file mode 100644
index 00000000..eb0ae205
--- /dev/null
+++ b/Adapters/PrimeReact/LICENSE
@@ -0,0 +1,30 @@
+MIT License
+
+Copyright (c) Cratis
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+Third-party MIT notices
+-----------------------
+MUI Core (@mui/material and Core support packages): Copyright (c) 2014
+Call-Em-All and Copyright (c) 2016-2026 MUI. Licensed under the MIT License
+above. MUI X is not included.
+
+Emotion (@emotion/react and @emotion/styled): Copyright (c) Emotion team and
+other contributors. Licensed under the MIT License above.
diff --git a/Adapters/PrimeReact/README.md b/Adapters/PrimeReact/README.md
new file mode 100644
index 00000000..668bc13c
--- /dev/null
+++ b/Adapters/PrimeReact/README.md
@@ -0,0 +1,67 @@
+<!-- Copyright (c) Cratis. All rights reserved. -->
+<!-- Licensed under the MIT license. See LICENSE file in the project root for full license information. -->
+
+# `@cratis/components.mui`
+
+Material UI adapter for the nine stable presentation slots in the Cratis Components renderer ABI v1.
+The package is independently versioned and exports one manifest, `muiUiLibrary`.
+
+## Install
+
+```sh
+npm install @cratis/components.mui @cratis/components @mui/material @emotion/react @emotion/styled react react-dom
+```
+
+Select the adapter on the application Components provider:
+
+```tsx
+import { CratisComponentsProvider } from '@cratis/components';
+import { muiUiLibrary } from '@cratis/components.mui';
+
+export const Application = () => (
+    <CratisComponentsProvider value={{ locale: 'en-US' }} library={muiUiLibrary}>
+        <main>Application content</main>
+    </CratisComponentsProvider>
+);
+```
+
+The adapter covers Button, IconButton, TextInput, TextArea, Checkbox, Radio, Switch,
+ProgressBar, and Surface. It deliberately excludes MUI X and does not implement the five atomic
+interaction slots.
+
+## Theme integration
+
+The manifest provider mounts the MUI `ThemeProvider`. An outer CSS-variable MUI theme is reused.
+An outer non-variable theme is converted to an equivalent CSS-variable theme so its palette and
+other values remain in force. Without an outer provider, MUI's default theme becomes a sane
+CSS-variable-enabled theme. The conversion is memoized and deterministic during server rendering.
+
+Put application customization outside `CratisComponentsProvider`:
+
+```tsx
+<ThemeProvider theme={applicationTheme}>
+    <CratisComponentsProvider value={{ locale: 'en-US' }} library={muiUiLibrary}>
+        <Application />
+    </CratisComponentsProvider>
+</ThemeProvider>
+```
+
+The renderer provider ABI receives only `children`; it cannot receive an Emotion cache. SSR hosts
+must create an Emotion cache per request, mount Emotion's `CacheProvider` outside the Components
+provider, and extract critical styles from that same request-local cache. Sharing a cache between
+requests can leak styles and ordering. RTL additionally requires the host MUI theme direction and
+an Emotion cache configured with the RTL Stylis plugin. These are application/host integration
+concerns and do not justify a Core ABI change.
+
+## Peer policy
+
+MUI Core is bounded to `>=9 <10`, Emotion to `>=11 <12`, and React/ReactDOM to React 19. Vendor
+packages are peers; exact current versions are dev dependencies only for repository proof.
+
+The current `@cratis/components` peer `>=3.0.0 <4` is a temporary repository placeholder matching
+`@cratis/components.conformance` while the V4 source package is prepared. **It must be changed to
+the honest `>=4 <5` range before this adapter is published.** Publishing with the placeholder would
+misstate compatibility.
+
+See [CONFORMANCE.md](./CONFORMANCE.md) for the bounded evidence and
+[THIRD_PARTY_NOTICES.md](./THIRD_PARTY_NOTICES.md) for upstream licenses.
diff --git a/Adapters/PrimeReact/THIRD_PARTY_NOTICES.md b/Adapters/PrimeReact/THIRD_PARTY_NOTICES.md
new file mode 100644
index 00000000..e00534b1
--- /dev/null
+++ b/Adapters/PrimeReact/THIRD_PARTY_NOTICES.md
@@ -0,0 +1,35 @@
+<!-- Copyright (c) Cratis. All rights reserved. -->
+<!-- Licensed under the MIT license. See LICENSE file in the project root for full license information. -->
+
+# Third-party notices
+
+This adapter interoperates with peer-installed software. It does not bundle the following packages.
+
+## MUI Core
+
+MUI Core (`@mui/material` and its Core support packages) is Copyright (c) 2014 Call-Em-All and
+Copyright (c) 2016-2026 MUI and licensed under the MIT License.
+
+MUI X is explicitly excluded from this adapter.
+
+## Emotion
+
+Emotion (`@emotion/react` and `@emotion/styled`) is Copyright (c) Emotion team and other
+contributors and licensed under the MIT License.
+
+## MIT License text
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and
+associated documentation files (the "Software"), to deal in the Software without restriction,
+including without limitation the rights to use, copy, modify, merge, publish, distribute,
+sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial
+portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT
+NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES
+OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/Adapters/PrimeReact/for_adapter/when_using_the_primereact_presentation_profile.tsx b/Adapters/PrimeReact/for_adapter/when_using_the_primereact_presentation_profile.tsx
new file mode 100644
index 00000000..2b0257ee
--- /dev/null
+++ b/Adapters/PrimeReact/for_adapter/when_using_the_primereact_presentation_profile.tsx
@@ -0,0 +1,256 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { expect } from 'chai';
+import { createElement, type ComponentType, type ReactNode } from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { PrimeReactProvider } from '@primereact/core/config';
+import Aura from '@primeuix/themes/aura';
+import { runConformance, type ConformanceReport } from '@cratis/components.conformance';
+import {
+    unstable_AdapterError,
+    unstable_adapterErrorCodes,
+} from '@cratis/components/renderer';
+import { beforeAll, describe, it } from 'vitest';
+import packageJson from '../package.json';
+import { primeReactUiLibrary } from '../src/index.js';
+
+const stablePresentationSlots = [
+    'common.button',
+    'common.iconButton',
+    'common.textInput',
+    'common.textArea',
+    'common.checkbox',
+    'common.radio',
+    'common.switch',
+    'common.progress',
+    'common.surface',
+] as const;
+
+const PrimeApplicationProvider = ({ children }: { readonly children: ReactNode }) => (
+    <PrimeReactProvider theme={{ preset: Aura }}>{children}</PrimeReactProvider>
+);
+
+const renderSlot = (
+    slotId: (typeof stablePresentationSlots)[number],
+    props: Readonly<Record<string, unknown>>,
+) => {
+    const declaration = primeReactUiLibrary.slots[slotId];
+    if (!declaration) throw new Error(`Missing ${slotId} declaration.`);
+    // SAFETY: Fixture props are paired with their public slot contract.
+    const Component = declaration.render as unknown as ComponentType<
+        Record<string, unknown>
+    >;
+    return renderToStaticMarkup(
+        <PrimeApplicationProvider>
+            {createElement(Component, props)}
+        </PrimeApplicationProvider>,
+    );
+};
+
+const AdapterProvider = primeReactUiLibrary.Provider;
+if (!AdapterProvider) throw new Error('The PrimeReact adapter provider is missing.');
+
+const captureAdapterError = (render: () => unknown): unstable_AdapterError => {
+    try {
+        render();
+    } catch (error: unknown) {
+        if (error instanceof unstable_AdapterError) return error;
+        throw error;
+    }
+    throw new Error('Expected adapter setup to fail.');
+};
+
+describe('when using the PrimeReact stable presentation profile', () => {
+    let report: ConformanceReport;
+
+    beforeAll(async () => {
+        report = await runConformance(primeReactUiLibrary, {
+            metadata: packageJson.cratis,
+            document,
+            wrapper: PrimeApplicationProvider,
+        });
+    }, 30_000);
+
+    it('should pass the complete declared profile with zero skips', () => {
+        const failures = report.checks
+            .filter((check) => check.status === 'failed')
+            .map(
+                (check) =>
+                    `${check.id}: ${check.message} ${JSON.stringify(check.evidence ?? {})}`,
+            );
+        expect(failures).to.deep.equal([]);
+        expect(report.passed).to.equal(true);
+        expect(report.summary).to.deep.equal({
+            total: 100,
+            passed: 100,
+            failed: 0,
+            skipped: 0,
+        });
+        expect(primeReactUiLibrary.profileSlots).to.deep.equal(stablePresentationSlots);
+    });
+
+    it('should keep static metadata schema and runtime declarations consistent', () => {
+        expect(
+            report.checks.find((check) => check.id === 'manifest.schema')?.status,
+        ).to.equal('passed');
+        expect(
+            report.checks.find((check) => check.id === 'manifest.runtimeConsistency')
+                ?.status,
+        ).to.equal('passed');
+        expect(Object.keys(packageJson.cratis.modes)).to.deep.equal(
+            stablePresentationSlots,
+        );
+    });
+
+    it('should preserve native refs, forms, reset behavior, and value-first native events', () => {
+        for (const slotId of stablePresentationSlots.filter(
+            (candidate) => candidate !== 'common.progress',
+        )) {
+            expect(
+                report.checks.find(
+                    (check) => check.id === `contract.${slotId}.elementRef`,
+                )?.status,
+            ).to.equal('passed');
+        }
+        expect(
+            report.checks.find((check) => check.id === 'behavior.common.button')?.evidence
+                ?.submitEvents,
+        ).to.equal(1);
+        for (const slotId of [
+            'common.textInput',
+            'common.textArea',
+            'common.checkbox',
+            'common.radio',
+            'common.switch',
+        ] as const) {
+            const evidence = report.checks.find(
+                (check) => check.id === `behavior.${slotId}`,
+            )?.evidence;
+            expect(evidence).to.include({
+                callbacks: 1,
+                source: 'user',
+                nativeEvent: true,
+                resetMatches: true,
+            });
+        }
+    });
+
+    it('should render real PrimeReact 11 styled identities for every slot', () => {
+        const markup = {
+            button: renderSlot('common.button', { label: 'Save' }),
+            iconButton: renderSlot('common.iconButton', {
+                icon: '+',
+                'aria-label': 'Add',
+            }),
+            textInput: renderSlot('common.textInput', { 'aria-label': 'Name' }),
+            textArea: renderSlot('common.textArea', { 'aria-label': 'Notes' }),
+            checkbox: renderSlot('common.checkbox', {
+                label: 'Selected',
+                defaultChecked: true,
+            }),
+            radio: renderSlot('common.radio', {
+                name: 'frequency',
+                value: 'daily',
+                'aria-label': 'Daily',
+            }),
+            switchControl: renderSlot('common.switch', {
+                'aria-label': 'Enabled',
+            }),
+            progress: renderSlot('common.progress', { value: 42 }),
+            surface: renderSlot('common.surface', { as: 'article' }),
+        };
+        expect(markup.button).to.contain('p-button');
+        expect(markup.iconButton).to.contain('p-button');
+        expect(markup.textInput).to.contain('p-inputtext');
+        expect(markup.textArea).to.contain('p-textarea');
+        expect(markup.checkbox).to.contain('p-checkbox');
+        expect(markup.radio).to.contain('p-radiobutton');
+        expect(markup.switchControl).to.contain('p-toggleswitch');
+        expect(markup.switchControl).to.contain('role="switch"');
+        expect(markup.progress).to.contain('p-progressbar');
+        expect(markup.surface).to.contain('p-card');
+        expect(markup.surface).to.contain('<article');
+    });
+
+    it('should preserve deprecated Button mapping and canonical data attributes', () => {
+        const markup = renderSlot('common.button', {
+            label: 'Legacy action',
+            text: true,
+            rounded: true,
+            severity: 'danger',
+        });
+        expect(markup).to.contain('data-variant="ghost"');
+        expect(markup).to.contain('data-tone="critical"');
+        expect(markup).to.contain('data-severity="danger"');
+        expect(markup).to.contain('data-shape="pill"');
+        expect(markup).not.to.contain(' text=');
+        expect(markup).not.to.contain(' rounded=');
+    });
+
+    it('should fail closed with CRATIS-UI-1005 without both application attestations', () => {
+        const missingOuterProvider = captureAdapterError(() =>
+            renderToStaticMarkup(
+                <AdapterProvider setup={{ 'cratis-primereact.license-configured': true }}>
+                    <span />
+                </AdapterProvider>,
+            ),
+        );
+        expect(missingOuterProvider.code).to.equal(
+            unstable_adapterErrorCodes.missingLicenseKey,
+        );
+
+        const missingLicenseAttestation = captureAdapterError(() =>
+            renderToStaticMarkup(
+                <PrimeApplicationProvider>
+                    <AdapterProvider setup={{}}>
+                        <span />
+                    </AdapterProvider>
+                </PrimeApplicationProvider>,
+            ),
+        );
+        expect(missingLicenseAttestation.code).to.equal(
+            unstable_adapterErrorCodes.missingLicenseKey,
+        );
+
+        const configured = renderToStaticMarkup(
+            <PrimeApplicationProvider>
+                <AdapterProvider setup={{ 'cratis-primereact.license-configured': true }}>
+                    <span data-configured />
+                </AdapterProvider>
+            </PrimeApplicationProvider>,
+        );
+        expect(configured).to.contain('data-configured');
+    });
+
+    it('should declare only bounded peer-hosted PrimeReact 11 vendors', () => {
+        expect(packageJson).not.to.have.property('dependencies');
+        expect(packageJson.peerDependencies).to.deep.equal({
+            '@cratis/components': '>=3.0.0 <4',
+            '@primereact/core': '>=11 <12',
+            '@primereact/ui': '>=11 <12',
+            '@primeuix/themes': '>=3 <4',
+            primereact: '>=11 <12',
+            react: '^19.0.0',
+            'react-dom': '^19.0.0',
+        });
+        expect(packageJson.devDependencies).to.include({
+            '@primereact/core': '11.1.0',
+            '@primereact/ui': '11.1.0',
+            '@primeuix/themes': '3.0.0',
+            primereact: '11.1.0',
+        });
+        expect(JSON.stringify(packageJson)).not.to.contain('primereact@10');
+    });
+
+    it('should publish schema-valid key metadata without storing a key', () => {
+        expect(packageJson.cratis.license).to.deep.equal({
+            spdx: 'LicenseRef-PrimeUI',
+            requiresKey: true,
+            keyEnv: 'VITE_PRIMEUI_LICENSE_KEY',
+            url: 'https://primeui.store/primeui',
+        });
+        expect(JSON.stringify(primeReactUiLibrary)).not.to.contain('license');
+        expect(JSON.stringify(primeReactUiLibrary)).not.to.contain('keyEnv');
+    });
+});
diff --git a/Adapters/PrimeReact/package.json b/Adapters/PrimeReact/package.json
new file mode 100644
index 00000000..111f577a
--- /dev/null
+++ b/Adapters/PrimeReact/package.json
@@ -0,0 +1,129 @@
+{
+    "name": "@cratis/components.primereact",
+    "version": "0.1.0",
+    "cratisIndependentVersion": true,
+    "description": "PrimeReact 11 presentation adapter for Cratis Components renderer ABI v1.",
+    "author": "Cratis",
+    "license": "MIT",
+    "type": "module",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/Cratis/Components"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "engines": {
+        "node": ">=23.0.0"
+    },
+    "files": [
+        "dist",
+        "README.md",
+        "CONFORMANCE.md",
+        "THIRD_PARTY_NOTICES.md",
+        "LICENSE"
+    ],
+    "main": "./dist/index.js",
+    "module": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "exports": {
+        "./package.json": "./package.json",
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.js"
+        }
+    },
+    "sideEffects": false,
+    "cratisUiAbi": 1,
+    "cratis": {
+        "kind": "ui-adapter",
+        "id": "cratis-primereact",
+        "displayName": "Cratis PrimeReact renderer",
+        "abi": "^1",
+        "level": "primitive",
+        "profile": "stable-presentation/v1",
+        "category": "primereact",
+        "entry": "./dist/index.js",
+        "export": "primeReactUiLibrary",
+        "slots": [
+            "common.button",
+            "common.iconButton",
+            "common.textInput",
+            "common.textArea",
+            "common.checkbox",
+            "common.radio",
+            "common.switch",
+            "common.progress",
+            "common.surface"
+        ],
+        "modes": {
+            "common.button": "presentation",
+            "common.iconButton": "presentation",
+            "common.textInput": "presentation",
+            "common.textArea": "presentation",
+            "common.checkbox": "presentation",
+            "common.radio": "presentation",
+            "common.switch": "presentation",
+            "common.progress": "presentation",
+            "common.surface": "presentation"
+        },
+        "capabilities": [
+            "slot.render",
+            "parts.passthrough",
+            "ssr.staticRender"
+        ],
+        "ssr": "safe",
+        "a11y": {
+            "axeProfile": "wcag22aa",
+            "evidence": "./CONFORMANCE.md"
+        },
+        "license": {
+            "spdx": "LicenseRef-PrimeUI",
+            "requiresKey": true,
+            "keyEnv": "VITE_PRIMEUI_LICENSE_KEY",
+            "url": "https://primeui.store/primeui"
+        },
+        "upstream": {
+            "@primereact/core": ">=11 <12",
+            "@primereact/ui": ">=11 <12",
+            "@primeuix/themes": ">=3 <4",
+            "primereact": ">=11 <12",
+            "react": "^19.0.0",
+            "react-dom": "^19.0.0"
+        }
+    },
+    "scripts": {
+        "clean": "rm -rf dist",
+        "build": "node ../../node_modules/typescript/bin/tsc -p tsconfig.build.json",
+        "typecheck-specs": "yarn workspace @cratis/components prepare && yarn workspace @cratis/components.conformance build && node ../../node_modules/typescript/bin/tsc -p tsconfig.json",
+        "lint": "node ../../node_modules/eslint/bin/eslint.js . --quiet",
+        "test": "node ../../node_modules/vitest/vitest.mjs run --config vitest.config.ts",
+        "verify-package": "node ./scripts/verify-packed-package.mjs",
+        "ci": "yarn clean && yarn lint && yarn build && yarn typecheck-specs && yarn test && yarn verify-package"
+    },
+    "peerDependencies": {
+        "@cratis/components": ">=3.0.0 <4",
+        "@primereact/core": ">=11 <12",
+        "@primereact/ui": ">=11 <12",
+        "@primeuix/themes": ">=3 <4",
+        "primereact": ">=11 <12",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
+    },
+    "devDependencies": {
+        "@cratis/arc": "22.4.0",
+        "@cratis/arc.react": "22.4.0",
+        "@cratis/components": "workspace:^",
+        "@cratis/components.conformance": "workspace:^",
+        "@cratis/fundamentals": "^7.10.3",
+        "@primereact/core": "11.1.0",
+        "@primereact/ui": "11.1.0",
+        "@primeuix/themes": "3.0.0",
+        "@types/react": "^19.2.18",
+        "primereact": "11.1.0",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0",
+        "reflect-metadata": "0.2.2",
+        "tsyringe": "4.10.0"
+    }
+}
diff --git a/Adapters/PrimeReact/scripts/verify-packed-package.mjs b/Adapters/PrimeReact/scripts/verify-packed-package.mjs
new file mode 100644
index 00000000..aa4be6e3
--- /dev/null
+++ b/Adapters/PrimeReact/scripts/verify-packed-package.mjs
@@ -0,0 +1,381 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { spawnSync } from 'node:child_process';
+import {
+    mkdirSync,
+    mkdtempSync,
+    readFileSync,
+    rmSync,
+    symlinkSync,
+    writeFileSync,
+} from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import {
+    isOwnedDeclarationDiagnostic,
+    matchesExternalIssue,
+    matchesPairedOwnedCascade,
+} from '../../../Source/scripts/lib/public-type-exceptions.mjs';
+
+const packageDirectory = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const repositoryDirectory = path.resolve(packageDirectory, '../..');
+const temporary = mkdtempSync(path.join(os.tmpdir(), 'cratis-mui-package-'));
+
+const run = (command, arguments_, cwd = packageDirectory) => {
+    const result = spawnSync(command, arguments_, { cwd, encoding: 'utf8' });
+    if (result.status !== 0) {
+        throw new Error(
+            `${command} ${arguments_.join(' ')} failed:\n${result.stdout}${result.stderr}`,
+        );
+    }
+    return result.stdout;
+};
+
+const link = (source, target) => {
+    mkdirSync(path.dirname(target), { recursive: true });
+    symlinkSync(source, target, 'dir');
+};
+
+const parsePackJson = (output) => {
+    for (
+        let index = output.lastIndexOf('[');
+        index >= 0;
+        index = output.lastIndexOf('[', index - 1)
+    ) {
+        try {
+            const parsed = JSON.parse(output.slice(index));
+            if (Array.isArray(parsed) && parsed[0]?.filename) return parsed;
+        } catch {
+            // Continue searching backward through lifecycle output for npm's final JSON array.
+        }
+    }
+    throw new Error('npm pack did not produce a parseable JSON result.');
+};
+
+try {
+    const packedJson = parsePackJson(
+        run('npm', ['pack', '--json', '--pack-destination', temporary]),
+    );
+    const packed = packedJson[0];
+    const fileNames = new Set(packed.files.map((file) => file.path));
+    for (const required of [
+        'dist/index.js',
+        'dist/index.d.ts',
+        'README.md',
+        'CONFORMANCE.md',
+        'THIRD_PARTY_NOTICES.md',
+        'LICENSE',
+        'package.json',
+    ]) {
+        if (!fileNames.has(required)) {
+            throw new Error(`Packed archive is missing '${required}'.`);
+        }
+    }
+    const forbiddenArchiveEntries = [...fileNames].filter((file) =>
+        /(?:^|\/)(?:src|for_|scripts|node_modules|coverage|\.yarn)(?:\/|$)|(?:vitest|tsconfig|\.tsbuildinfo|package-lock)/u.test(
+            file,
+        ),
+    );
+    if (forbiddenArchiveEntries.length > 0) {
+        throw new Error(
+            `Packed archive contains source, tests, tooling, or vendor content: ${forbiddenArchiveEntries.join(', ')}.`,
+        );
+    }
+
+    const archive = path.join(temporary, packed.filename);
+    const unpacked = path.join(temporary, 'unpacked');
+    mkdirSync(unpacked);
+    run('tar', ['-xzf', archive, '-C', unpacked]);
+    const unpackedPackage = path.join(unpacked, 'package');
+
+    const corePackedJson = parsePackJson(
+        run(
+            'npm',
+            [
+                'pack',
+                '--json',
+                '--ignore-scripts',
+                '--silent',
+                '--pack-destination',
+                temporary,
+            ],
+            path.join(repositoryDirectory, 'Source'),
+        ),
+    );
+    const coreArchive = path.join(temporary, corePackedJson[0].filename);
+    const unpackedCore = path.join(temporary, 'unpacked-core');
+    mkdirSync(unpackedCore);
+    run('tar', ['-xzf', coreArchive, '-C', unpackedCore]);
+    const unpackedCorePackage = path.join(unpackedCore, 'package');
+    const corePackageJson = JSON.parse(
+        readFileSync(path.join(unpackedCorePackage, 'package.json'), 'utf8'),
+    );
+    const packageJson = JSON.parse(
+        readFileSync(path.join(unpackedPackage, 'package.json'), 'utf8'),
+    );
+
+    const expectedPeers = {
+        '@cratis/components': '>=3.0.0 <4',
+        '@emotion/react': '>=11 <12',
+        '@emotion/styled': '>=11 <12',
+        '@mui/material': '>=9 <10',
+        react: '^19.0.0',
+        'react-dom': '^19.0.0',
+    };
+    if (JSON.stringify(packageJson.peerDependencies) !== JSON.stringify(expectedPeers)) {
+        throw new Error(
+            'Packed peer dependencies are not the exact bounded adapter policy.',
+        );
+    }
+    if (packageJson.dependencies && Object.keys(packageJson.dependencies).length > 0) {
+        throw new Error(
+            'Renderer vendors and Components must never be runtime dependencies.',
+        );
+    }
+    if (
+        packageJson.version !== '0.1.0' ||
+        packageJson.cratisIndependentVersion !== true ||
+        packageJson.cratisUiAbi !== 1
+    ) {
+        throw new Error(
+            'Adapter versioning and renderer ABI metadata must be independent.',
+        );
+    }
+    const serializedPackage = JSON.stringify(packageJson);
+    if (serializedPackage.includes('@mui/x-')) {
+        throw new Error('MUI X must remain excluded from every package boundary.');
+    }
+
+    const runtime = readFileSync(path.join(unpackedPackage, 'dist/index.js'), 'utf8');
+    for (const requiredImport of [
+        '@mui/material/',
+        '@cratis/components/',
+        'react/jsx-runtime',
+    ]) {
+        if (!runtime.includes(requiredImport)) {
+            throw new Error(
+                `Runtime does not retain expected external import '${requiredImport}'.`,
+            );
+        }
+    }
+    for (const bundledSignature of [
+        'function createThemeNoVars',
+        'function emotionStyled',
+        'MUI: The `styles` argument',
+    ]) {
+        if (runtime.includes(bundledSignature)) {
+            throw new Error(
+                `Runtime appears to bundle vendor code: '${bundledSignature}'.`,
+            );
+        }
+    }
+
+    const declarationFiles = [...fileNames].filter((file) => file.endsWith('.d.ts'));
+    if (declarationFiles.length !== 1) {
+        throw new Error(
+            `Expected one public declaration file, found ${declarationFiles.length}.`,
+        );
+    }
+    const declarations = readFileSync(
+        path.join(unpackedPackage, 'dist/index.d.ts'),
+        'utf8',
+    );
+    for (const forbidden of [
+        /\bany\b/u,
+        /@mui\//u,
+        /@emotion\//u,
+        /Mui(?:Button|Checkbox|IconButton|InputBase|LinearProgress|Paper|Radio|Switch|Surface|Text)/u,
+        /export\s+(?:type|interface|class|function|default)\b/u,
+    ]) {
+        if (forbidden.test(declarations)) {
+            throw new Error(`Public declarations contain forbidden '${forbidden}'.`);
+        }
+    }
+    const exportedValues = declarations.match(/export\s+declare\s+const\s+/gu) ?? [];
+    if (
+        exportedValues.length !== 1 ||
+        !/export declare const muiUiLibrary: unstable_UiLibrary;/u.test(declarations)
+    ) {
+        throw new Error(
+            'Public declarations must expose exactly one UiLibrary-typed value.',
+        );
+    }
+
+    const nodeModules = path.join(temporary, 'node_modules');
+    link(unpackedPackage, path.join(nodeModules, '@cratis/components.mui'));
+    link(unpackedCorePackage, path.join(nodeModules, '@cratis/components'));
+    for (const dependency of ['react', 'react-dom']) {
+        link(
+            path.join(repositoryDirectory, 'node_modules', dependency),
+            path.join(nodeModules, dependency),
+        );
+        link(
+            path.join(repositoryDirectory, 'node_modules/@types', dependency),
+            path.join(nodeModules, '@types', dependency),
+        );
+    }
+    for (const dependency of ['arc', 'arc.react', 'fundamentals']) {
+        link(
+            path.join(repositoryDirectory, 'node_modules/@cratis', dependency),
+            path.join(nodeModules, '@cratis', dependency),
+        );
+    }
+    for (const dependency of ['reflect-metadata', 'tsyringe']) {
+        link(
+            path.join(repositoryDirectory, 'node_modules', dependency),
+            path.join(nodeModules, dependency),
+        );
+    }
+    for (const dependency of ['react', 'styled']) {
+        link(
+            path.join(repositoryDirectory, 'node_modules/@emotion', dependency),
+            path.join(nodeModules, '@emotion', dependency),
+        );
+    }
+    link(
+        path.join(repositoryDirectory, 'node_modules/@mui/material'),
+        path.join(nodeModules, '@mui/material'),
+    );
+
+    writeFileSync(
+        path.join(temporary, 'runtime.mjs'),
+        "const api = await import('@cratis/components.mui');\n" +
+            "if (Object.keys(api).join(',') !== 'muiUiLibrary') throw new Error('Packed runtime must export only muiUiLibrary.');\n" +
+            "if (api.muiUiLibrary.id !== 'cratis-mui') throw new Error('Packed manifest did not load with explicit peers.');\n",
+    );
+    run(process.execPath, ['runtime.mjs'], temporary);
+
+    writeFileSync(
+        path.join(temporary, 'fixture.ts'),
+        "import { muiUiLibrary } from '@cratis/components.mui';\nvoid muiUiLibrary;\n",
+    );
+    writeFileSync(
+        path.join(temporary, 'jsx-shim.d.ts'),
+        "import type { ReactElement } from 'react';\ndeclare global { namespace JSX { type Element = ReactElement; } }\nexport {};\n",
+    );
+    const typescript = path.join(repositoryDirectory, 'node_modules/typescript/bin/tsc');
+    run(
+        process.execPath,
+        [
+            path.join(repositoryDirectory, 'Source/scripts/verify-public-types.mjs'),
+            '--only',
+            './renderer',
+        ],
+        path.join(repositoryDirectory, 'Source'),
+    );
+
+    const exceptionMetadata = JSON.parse(
+        readFileSync(
+            path.join(
+                repositoryDirectory,
+                'Source/scripts/verify-public-types.exceptions.json',
+            ),
+            'utf8',
+        ),
+    );
+    const nodeNextIssue = exceptionMetadata.upstreamIssues.find(
+        (issue) => issue.id === 'arc-family-nodenext-extensionless-specifiers',
+    );
+    if (!nodeNextIssue) {
+        throw new Error('NodeNext upstream exception metadata is missing.');
+    }
+    const parseDiagnostics = (stdout) => {
+        const diagnosticLine = /^(.+?)\((\d+),(\d+)\): error (TS\d+): (.*)$/u;
+        return stdout
+            .split(/\r?\n/u)
+            .map((line) => line.match(diagnosticLine))
+            .filter(Boolean)
+            .map((match) => {
+                const [, rawFile, lineNo, , code, message] = match;
+                const absolute = path.resolve(rawFile);
+                const marker = `${path.sep}node_modules${path.sep}`;
+                const lastNodeModules = absolute.lastIndexOf(marker);
+                let file;
+                if (lastNodeModules >= 0) {
+                    file = absolute
+                        .slice(lastNodeModules + marker.length)
+                        .split(path.sep)
+                        .join('/');
+                } else if (absolute.startsWith(`${unpackedCorePackage}${path.sep}`)) {
+                    file = `@cratis/components/${path
+                        .relative(unpackedCorePackage, absolute)
+                        .split(path.sep)
+                        .join('/')}`;
+                } else {
+                    file = path.relative(temporary, absolute).split(path.sep).join('/');
+                }
+                return { code, file, line: Number(lineNo), message };
+            });
+    };
+
+    for (const resolution of ['bundler', 'nodenext']) {
+        const result = spawnSync(
+            process.execPath,
+            [
+                typescript,
+                '--ignoreConfig',
+                '--noEmit',
+                '--strict',
+                '--skipLibCheck',
+                'false',
+                '--target',
+                'ES2022',
+                '--module',
+                resolution === 'bundler' ? 'ESNext' : 'NodeNext',
+                '--moduleResolution',
+                resolution,
+                '--jsx',
+                'react-jsx',
+                '--lib',
+                'ESNext,DOM,DOM.Iterable',
+                'fixture.ts',
+                'jsx-shim.d.ts',
+            ],
+            { cwd: temporary, encoding: 'utf8' },
+        );
+        const diagnostics = parseDiagnostics(result.stdout ?? '');
+        if (result.status !== 0 && diagnostics.length === 0) {
+            throw new Error(
+                `Strict ${resolution} consumer failed without parseable diagnostics:\n${result.stdout}${result.stderr}`,
+            );
+        }
+        const covered = (diagnostic) =>
+            nodeNextIssue.resolutionModes.includes(resolution) &&
+            (matchesExternalIssue(diagnostic, nodeNextIssue, corePackageJson.name) ||
+                matchesPairedOwnedCascade(
+                    diagnostic,
+                    nodeNextIssue,
+                    diagnostics,
+                    corePackageJson.name,
+                ));
+        const unexpected = diagnostics.filter((diagnostic) => !covered(diagnostic));
+        if (unexpected.length > 0) {
+            throw new Error(
+                `Strict ${resolution} consumer produced unexpected diagnostics:\n${unexpected
+                    .map(
+                        (diagnostic) =>
+                            `${diagnostic.file}:${diagnostic.line} ${diagnostic.code} ${diagnostic.message}`,
+                    )
+                    .join('\n')}`,
+            );
+        }
+        if (
+            diagnostics.some((diagnostic) =>
+                isOwnedDeclarationDiagnostic(diagnostic, packageJson.name),
+            )
+        ) {
+            throw new Error(
+                `Strict ${resolution} consumer reported a declaration owned by ${packageJson.name}.`,
+            );
+        }
+    }
+
+    console.log(
+        `Verified ${packageJson.name}@${packageJson.version}: archive boundaries, external vendor peers, ` +
+            'packed Core runtime import, one hygienic UiLibrary declaration, and strict Bundler/NodeNext consumers with bounded upstream exceptions.',
+    );
+} finally {
+    rmSync(temporary, { recursive: true, force: true });
+}
diff --git a/Adapters/PrimeReact/src/index.tsx b/Adapters/PrimeReact/src/index.tsx
new file mode 100644
index 00000000..a42eb0c4
--- /dev/null
+++ b/Adapters/PrimeReact/src/index.tsx
@@ -0,0 +1,797 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import {
+    forwardRef,
+    useCallback,
+    useContext,
+    useEffect,
+    useRef,
+    useState,
+    type ChangeEvent,
+    type ForwardedRef,
+    type InputHTMLAttributes,
+    type ReactNode,
+} from 'react';
+import { PrimeReactContext } from '@primereact/core/config';
+import { Button as PrimeButton } from '@primereact/ui/button';
+import { Card as PrimeCard } from '@primereact/ui/card';
+import { Checkbox as PrimeCheckbox } from '@primereact/ui/checkbox';
+import { InputText as PrimeInputText } from '@primereact/ui/inputtext';
+import { ProgressBar as PrimeProgressBar } from '@primereact/ui/progressbar';
+import { RadioButton as PrimeRadioButton } from '@primereact/ui/radiobutton';
+import { Textarea as PrimeTextarea } from '@primereact/ui/textarea';
+import { ToggleSwitch as PrimeToggleSwitch } from '@primereact/ui/toggleswitch';
+import type {
+    ButtonProps,
+    ButtonSeverity,
+    ButtonTone,
+    CheckboxParts,
+    CheckboxProps,
+    IconButtonProps,
+    RadioParts,
+    RadioProps,
+    SurfaceProps,
+    SwitchParts,
+    SwitchProps,
+    TextAreaProps,
+    TextInputProps,
+} from '@cratis/components/Common';
+import type { ProgressBarProps } from '@cratis/components/Display';
+import {
+    unstable_AdapterError,
+    unstable_CRATIS_UI_ABI_VERSION,
+    unstable_adapterErrorCodes,
+    unstable_defineUiLibrary,
+    type unstable_CapabilityId,
+    type unstable_SlotDeclaration,
+    type unstable_SlotId,
+    type unstable_UiLibrary,
+    type unstable_UiLibraryProviderProps,
+} from '@cratis/components/renderer';
+
+const profileSlots = Object.freeze([
+    'common.button',
+    'common.iconButton',
+    'common.textInput',
+    'common.textArea',
+    'common.checkbox',
+    'common.radio',
+    'common.switch',
+    'common.progress',
+    'common.surface',
+] satisfies readonly unstable_SlotId[]);
+
+const capabilities = Object.freeze([
+    'slot.render',
+    'parts.passthrough',
+    'ssr.staticRender',
+] satisfies readonly unstable_CapabilityId[]);
+
+const licenseConfiguredAttestation = 'cratis-primereact.license-configured';
+
+const PrimeReactAdapterProvider = ({
+    children,
+    setup,
+}: unstable_UiLibraryProviderProps) => {
+    const primeReact = useContext(PrimeReactContext);
+    if (!primeReact || setup[licenseConfiguredAttestation] !== true) {
+        throw new unstable_AdapterError({
+            code: unstable_adapterErrorCodes.missingLicenseKey,
+            adapterId: 'cratis-primereact',
+            message:
+                'PrimeReact 11 requires an application-owned outer PrimeReactProvider and a non-secret license-configuration attestation.',
+            remedy: "Mount PrimeReactProvider outside CratisComponentsProvider with its license prop, then set rendererSetup['cratis-primereact.license-configured'] to true only when the application supplied the key.",
+        });
+    }
+    return children;
+};
+
+const classNames = (...values: readonly (string | undefined)[]) =>
+    values.filter(Boolean).join(' ');
+
+const toneForSeverity: Readonly<Record<ButtonSeverity, ButtonTone>> = {
+    secondary: 'neutral',
+    info: 'accent',
+    help: 'accent',
+    success: 'positive',
+    warn: 'caution',
+    danger: 'critical',
+    contrast: 'neutral',
+};
+
+const severityForTone: Readonly<Record<ButtonTone, ButtonSeverity>> = {
+    neutral: 'secondary',
+    accent: 'info',
+    positive: 'success',
+    caution: 'warn',
+    critical: 'danger',
+};
+
+type DeprecatedButtonProp = 'severity' | 'text' | 'link' | 'outlined' | 'rounded';
+const warnedDeprecatedProps = new Set<DeprecatedButtonProp>();
+
+const warnForDeprecatedProp = (prop: DeprecatedButtonProp) => {
+    const environment = (
+        globalThis as typeof globalThis & {
+            process?: { env?: { NODE_ENV?: string } };
+        }
+    ).process?.env?.NODE_ENV;
+    if (environment === 'production' || warnedDeprecatedProps.has(prop)) return;
+    warnedDeprecatedProps.add(prop);
+    console.warn(
+        `Button prop "${prop}" is deprecated and will be removed in 5.0. Use variant, tone, or shape instead.`,
+    );
+};
+
+interface ResolvedButtonAppearance {
+    readonly variant: 'solid' | 'outline' | 'ghost' | 'link';
+    readonly tone: ButtonTone | undefined;
+    readonly shape: 'default' | 'pill';
+    readonly severity: ButtonSeverity | undefined;
+}
+
+interface ButtonAppearanceOptions {
+    readonly variant: ButtonProps['variant'];
+    readonly tone: ButtonProps['tone'];
+    readonly shape: ButtonProps['shape'];
+    readonly text: ButtonProps['text'];
+    readonly link: ButtonProps['link'];
+    readonly outlined: ButtonProps['outlined'];
+    readonly rounded: ButtonProps['rounded'];
+    readonly severity: ButtonProps['severity'];
+}
+
+const resolveButtonVariant = ({
+    variant,
+    link,
+    text,
+    outlined,
+}: ButtonAppearanceOptions): ResolvedButtonAppearance['variant'] => {
+    if (variant) return variant;
+    if (link) return 'link';
+    if (text) return 'ghost';
+    if (outlined) return 'outline';
+    return 'solid';
+};
+
+const resolveButtonAppearance = (
+    options: ButtonAppearanceOptions,
+): ResolvedButtonAppearance => {
+    const { tone, shape, text, link, outlined, rounded, severity } = options;
+    if (text !== undefined) warnForDeprecatedProp('text');
+    if (link !== undefined) warnForDeprecatedProp('link');
+    if (outlined !== undefined) warnForDeprecatedProp('outlined');
+    if (rounded !== undefined) warnForDeprecatedProp('rounded');
+    if (severity !== undefined) warnForDeprecatedProp('severity');
+    return {
+        variant: resolveButtonVariant(options),
+        tone: tone ?? (severity ? toneForSeverity[severity] : undefined),
+        shape: shape ?? (rounded ? 'pill' : 'default'),
+        severity: tone ? severityForTone[tone] : severity,
+    };
+};
+
+const primeVariant = (variant: ResolvedButtonAppearance['variant']) => {
+    switch (variant) {
+        case 'outline':
+            return 'outlined';
+        case 'ghost':
+            return 'text';
+        case 'link':
+            return 'link';
+        case 'solid':
+            return undefined;
+        default:
+            throw new Error(`Unsupported Button variant '${String(variant)}'.`);
+    }
+};
+
+const renderIcon = (icon: ReactNode) =>
+    typeof icon === 'string' ? <i className={icon} aria-hidden='true' /> : icon;
+
+const PrimeButtonSlot = forwardRef<HTMLButtonElement, ButtonProps>(
+    function PrimeButtonSlot(
+        {
+            label,
+            icon,
+            loading = false,
+            tooltip,
+            tooltipOptions: _tooltipOptions,
+            pt,
+            variant,
+            tone,
+            shape,
+            text,
+            link,
+            outlined,
+            rounded,
+            severity,
+            size = 'normal',
+            disabled,
+            type = 'button',
+            title,
+            className,
+            style,
+            children,
+            ...nativeProps
+        },
+        ref,
+    ) {
+        const appearance = resolveButtonAppearance({
+            variant,
+            tone,
+            shape,
+            text,
+            link,
+            outlined,
+            rounded,
+            severity,
+        });
+        const effectiveDisabled = Boolean(disabled || loading);
+        const iconOnly = Boolean(icon) && label === undefined && !children;
+        return (
+            <PrimeButton
+                {...pt?.root}
+                {...nativeProps}
+                as='button'
+                ref={ref}
+                type={type}
+                title={title ?? tooltip}
+                disabled={effectiveDisabled}
+                className={classNames(
+                    'cratis-primereact-button',
+                    pt?.root?.className,
+                    className,
+                )}
+                style={{ ...pt?.root?.style, ...style }}
+                variant={primeVariant(appearance.variant)}
+                severity={appearance.severity}
+                rounded={appearance.shape === 'pill'}
+                size={size}
+                iconOnly={iconOnly}
+                aria-busy={loading || undefined}
+                data-cratis-part='root'
+                data-variant={appearance.variant}
+                data-tone={appearance.tone}
+                data-severity={appearance.severity}
+                data-shape={appearance.shape}
+                data-size={size}
+                data-disabled={effectiveDisabled || undefined}
+                data-loading={loading || undefined}
+                data-icon-only={iconOnly || undefined}
+            >
+                {loading ? (
+                    <span
+                        {...pt?.spinner}
+                        className={classNames(
+                            'cratis-primereact-button__spinner',
+                            pt?.spinner?.className,
+                        )}
+                        data-cratis-part='spinner'
+                        aria-hidden='true'
+                    />
+                ) : icon ? (
+                    <span
+                        {...pt?.icon}
+                        className={classNames(
+                            'cratis-primereact-button__icon',
+                            pt?.icon?.className,
+                        )}
+                        data-cratis-part='icon'
+                        aria-hidden={pt?.icon?.['aria-hidden'] ?? true}
+                    >
+                        {renderIcon(icon)}
+                    </span>
+                ) : null}
+                {label !== undefined || children !== undefined ? (
+                    <span
+                        {...pt?.label}
+                        className={classNames(
+                            'cratis-primereact-button__label',
+                            pt?.label?.className,
+                        )}
+                        data-cratis-part='label'
+                    >
+                        {label}
+                        {children}
+                    </span>
+                ) : null}
+            </PrimeButton>
+        );
+    },
+);
+
+const PrimeIconButtonSlot = forwardRef<HTMLButtonElement, IconButtonProps>(
+    function PrimeIconButtonSlot(props, ref) {
+        return (
+            <PrimeButtonSlot
+                {...props}
+                ref={ref}
+                shape={props.shape ?? 'pill'}
+                label={undefined}
+            />
+        );
+    },
+);
+
+const PrimeTextInputSlot = forwardRef<HTMLInputElement, TextInputProps>(
+    function PrimeTextInputSlot(
+        {
+            type = 'text',
+            invalid = false,
+            onChange,
+            pt,
+            className,
+            style,
+            disabled,
+            readOnly,
+            size: nativeSize,
+            'aria-invalid': ariaInvalid,
+            ...nativeProps
+        },
+        ref,
+    ) {
+        const { size: partSize, ...rootPart } = pt?.root ?? {};
+        const effectiveDisabled = disabled ?? rootPart.disabled;
+        const effectiveReadOnly = readOnly ?? rootPart.readOnly;
+        const effectiveAriaInvalid =
+            ariaInvalid ?? rootPart['aria-invalid'] ?? (invalid || undefined);
+        const effectiveInvalid =
+            invalid || effectiveAriaInvalid === true || effectiveAriaInvalid === 'true';
+        return (
+            <PrimeInputText
+                {...rootPart}
+                {...nativeProps}
+                as='input'
+                ref={ref}
+                type={type}
+                disabled={effectiveDisabled}
+                readOnly={effectiveReadOnly}
+                invalid={effectiveInvalid}
+                aria-invalid={effectiveAriaInvalid}
+                pt={{ root: { size: nativeSize ?? partSize } }}
+                onChange={(event: ChangeEvent<HTMLInputElement>) => {
+                    rootPart.onChange?.(event);
+                    onChange?.(event.currentTarget.value, {
+                        source: 'user',
+                        nativeEvent: event.nativeEvent,
+                    });
+                }}
+                className={classNames(
+                    'cratis-primereact-text-input',
+                    rootPart.className,
+                    className,
+                )}
+                style={{ ...rootPart.style, ...style }}
+                data-cratis-part='root'
+                data-disabled={effectiveDisabled || undefined}
+                data-invalid={effectiveInvalid || undefined}
+                data-readonly={effectiveReadOnly || undefined}
+            />
+        );
+    },
+);
+
+const PrimeTextAreaSlot = forwardRef<HTMLTextAreaElement, TextAreaProps>(
+    function PrimeTextAreaSlot(
+        {
+            invalid = false,
+            onChange,
+            pt,
+            className,
+            style,
+            disabled,
+            readOnly,
+            'aria-invalid': ariaInvalid,
+            ...nativeProps
+        },
+        ref,
+    ) {
+        const effectiveDisabled = disabled ?? pt?.root?.disabled;
+        const effectiveReadOnly = readOnly ?? pt?.root?.readOnly;
+        const effectiveAriaInvalid =
+            ariaInvalid ?? pt?.root?.['aria-invalid'] ?? (invalid || undefined);
+        const effectiveInvalid =
+            invalid || effectiveAriaInvalid === true || effectiveAriaInvalid === 'true';
+        return (
+            <PrimeTextarea
+                {...pt?.root}
+                {...nativeProps}
+                as='textarea'
+                ref={ref}
+                disabled={effectiveDisabled}
+                readOnly={effectiveReadOnly}
+                invalid={effectiveInvalid}
+                aria-invalid={effectiveAriaInvalid}
+                onChange={(event: ChangeEvent<HTMLTextAreaElement>) => {
+                    pt?.root?.onChange?.(event);
+                    onChange?.(event.currentTarget.value, {
+                        source: 'user',
+                        nativeEvent: event.nativeEvent,
+                    });
+                }}
+                className={classNames(
+                    'cratis-primereact-text-area',
+                    pt?.root?.className,
+                    className,
+                )}
+                style={{ ...pt?.root?.style, ...style }}
+                data-cratis-part='root'
+                data-disabled={effectiveDisabled || undefined}
+                data-invalid={effectiveInvalid || undefined}
+                data-readonly={effectiveReadOnly || undefined}
+            />
+        );
+    },
+);
+
+const assignRef = <T,>(ref: ForwardedRef<T>, value: T | null) => {
+    if (typeof ref === 'function') ref(value);
+    else if (ref) ref.current = value;
+};
+
+const useNativeCheckedState = (
+    checked: boolean | undefined,
+    defaultChecked: boolean | undefined,
+    forwardedRef: ForwardedRef<HTMLInputElement>,
+    observeRadioGroup = false,
+) => {
+    const inputRef = useRef<HTMLInputElement>(null);
+    const [selected, setSelected] = useState(Boolean(defaultChecked));
+    const controlled = checked !== undefined;
+    const ref = useCallback(
+        (input: HTMLInputElement | null) => {
+            inputRef.current = input;
+            assignRef(forwardedRef, input);
+        },
+        [forwardedRef],
+    );
+    useEffect(() => {
+        const input = inputRef.current;
+        if (!input || controlled) return;
+        const synchronize = () => queueMicrotask(() => setSelected(input.checked));
+        input.form?.addEventListener('reset', synchronize);
+        if (observeRadioGroup)
+            input.ownerDocument.addEventListener('change', synchronize);
+        return () => {
+            input.form?.removeEventListener('reset', synchronize);
+            if (observeRadioGroup)
+                input.ownerDocument.removeEventListener('change', synchronize);
+        };
+    }, [controlled, observeRadioGroup]);
+    return {
+        ref,
+        selected: checked ?? selected,
+        synchronize: (next: boolean) => {
+            if (!controlled) setSelected(next);
+        },
+    };
+};
+
+type ChoiceProps = CheckboxProps | RadioProps | SwitchProps;
+type ChoiceParts = CheckboxParts | RadioParts | SwitchParts;
+type ChoiceKind = 'checkbox' | 'radio' | 'switch';
+type DataAttributes = {
+    [name: `data-${string}`]: string | number | boolean | undefined;
+};
+type InputPartWithRef = InputHTMLAttributes<HTMLInputElement> &
+    DataAttributes & { ref: (input: HTMLInputElement | null) => void };
+
+const stateAttributes = (
+    disabled: boolean | undefined,
+    invalid: boolean,
+    readOnly: boolean | undefined,
+    selected: boolean,
+) => ({
+    'data-disabled': disabled || undefined,
+    'data-invalid': invalid || undefined,
+    'data-readonly': readOnly || undefined,
+    'data-selected': selected || undefined,
+});
+
+const PrimeChoice = ({
+    kind,
+    props,
+    forwardedRef,
+}: {
+    readonly kind: ChoiceKind;
+    readonly props: ChoiceProps;
+    readonly forwardedRef: ForwardedRef<HTMLInputElement>;
+}) => {
+    const parts = props.pt as ChoiceParts | undefined;
+    const inputPart = parts?.input as InputHTMLAttributes<HTMLInputElement> | undefined;
+    const checked = props.checked ?? inputPart?.checked;
+    const defaultChecked = props.defaultChecked ?? inputPart?.defaultChecked;
+    const disabled = props.disabled ?? inputPart?.disabled;
+    const readOnly = props.readOnly ?? inputPart?.readOnly;
+    const ariaInvalid =
+        props['aria-invalid'] ??
+        inputPart?.['aria-invalid'] ??
+        (props.invalid || undefined);
+    const invalid =
+        Boolean(props.invalid) || ariaInvalid === true || ariaInvalid === 'true';
+    const state = useNativeCheckedState(
+        checked,
+        defaultChecked,
+        forwardedRef,
+        kind === 'radio',
+    );
+    const attributes = stateAttributes(disabled, invalid, readOnly, state.selected);
+    const {
+        label,
+        readOnly: _readOnly,
+        invalid: _invalid,
+        onChange,
+        className,
+        style,
+        pt: _parts,
+        checked: _checked,
+        defaultChecked: _defaultChecked,
+        disabled: _disabled,
+        onClick,
+        'aria-invalid': _ariaInvalid,
+        ...nativeProps
+    } = props;
+    const {
+        onClick: partOnClick,
+        onChange: _partOnChange,
+        className: inputClassName,
+        style: inputStyle,
+        ...inputPartRest
+    } = inputPart ?? {};
+    const radio = props as RadioProps;
+    const input: InputPartWithRef = {
+        ...inputPartRest,
+        ...nativeProps,
+        ref: state.ref,
+        name: kind === 'radio' ? radio.name : nativeProps.name,
+        value: kind === 'radio' ? radio.value : nativeProps.value,
+        'aria-invalid': ariaInvalid,
+        'aria-readonly': readOnly || undefined,
+        role: kind === 'switch' ? 'switch' : nativeProps.role,
+        className: classNames('cratis-primereact-choice__input', inputClassName),
+        style: inputStyle,
+        'data-cratis-part': 'input',
+        ...attributes,
+        onClick: (event) => {
+            partOnClick?.(event);
+            onClick?.(event);
+            if (readOnly) event.preventDefault();
+        },
+    };
+    const changed = (event: {
+        readonly checked: boolean;
+        readonly originalEvent: ChangeEvent<HTMLInputElement>;
+    }) => {
+        if (readOnly || (kind === 'radio' && !event.checked)) return;
+        state.synchronize(event.checked);
+        onChange?.(event.checked, {
+            source: 'user',
+            nativeEvent: event.originalEvent.nativeEvent,
+        });
+    };
+    const root = (
+        <label
+            {...parts?.root}
+            className={classNames(
+                'cratis-primereact-choice',
+                parts?.root?.className,
+                className,
+            )}
+            style={{ ...parts?.root?.style, ...style }}
+            data-cratis-part='root'
+            {...attributes}
+        >
+            {kind === 'checkbox' ? (
+                <PrimeCheckbox.Root
+                    checked={state.selected}
+                    disabled={disabled}
+                    readOnly={readOnly}
+                    required={nativeProps.required}
+                    invalid={invalid}
+                    name={nativeProps.name}
+                    value={nativeProps.value}
+                    ariaLabel={nativeProps['aria-label']}
+                    ariaLabelledby={nativeProps['aria-labelledby']}
+                    onCheckedChange={changed}
+                    pt={{ input }}
+                >
+                    <PrimeCheckbox.Box
+                        {...(parts as CheckboxParts | undefined)?.box}
+                        as='span'
+                        data-cratis-part='box'
+                        {...attributes}
+                    >
+                        <PrimeCheckbox.Indicator
+                            {...(parts as CheckboxParts | undefined)?.indicator}
+                            data-cratis-part='indicator'
+                            aria-hidden='true'
+                            {...attributes}
+                        >
+                            ✓
+                        </PrimeCheckbox.Indicator>
+                    </PrimeCheckbox.Box>
+                </PrimeCheckbox.Root>
+            ) : kind === 'radio' ? (
+                <PrimeRadioButton.Root
+                    checked={state.selected}
+                    disabled={disabled}
+                    readOnly={readOnly}
+                    required={nativeProps.required}
+                    invalid={invalid}
+                    name={radio.name}
+                    value={radio.value}
+                    ariaLabel={nativeProps['aria-label']}
+                    ariaLabelledby={nativeProps['aria-labelledby']}
+                    onCheckedChange={changed}
+                    pt={{ input }}
+                >
+                    <PrimeRadioButton.Box
+                        {...(parts as RadioParts | undefined)?.box}
+                        as='span'
+                        data-cratis-part='box'
+                        {...attributes}
+                    >
+                        <PrimeRadioButton.Indicator
+                            {...(parts as RadioParts | undefined)?.indicator}
+                            as='span'
+                            data-cratis-part='indicator'
+                            aria-hidden='true'
+                            {...attributes}
+                        />
+                    </PrimeRadioButton.Box>
+                </PrimeRadioButton.Root>
+            ) : (
+                <PrimeToggleSwitch.Root
+                    checked={state.selected}
+                    disabled={disabled}
+                    required={nativeProps.required}
+                    invalid={invalid}
+                    ariaLabel={nativeProps['aria-label']}
+                    ariaLabelledby={nativeProps['aria-labelledby']}
+                    onCheckedChange={changed}
+                    pt={{ input }}
+                >
+                    <PrimeToggleSwitch.Control
+                        {...(parts as SwitchParts | undefined)?.control}
+                        as='span'
+                        data-cratis-part='control'
+                        {...attributes}
+                    >
+                        <PrimeToggleSwitch.Handle
+                            {...(parts as SwitchParts | undefined)?.handle}
+                            as='span'
+                            data-cratis-part='handle'
+                            aria-hidden='true'
+                            {...attributes}
+                        />
+                    </PrimeToggleSwitch.Control>
+                </PrimeToggleSwitch.Root>
+            )}
+            {label === undefined ? null : (
+                <span
+                    {...parts?.label}
+                    className={classNames(
+                        'cratis-primereact-choice__label',
+                        parts?.label?.className,
+                    )}
+                    data-cratis-part='label'
+                    {...attributes}
+                >
+                    {label}
+                </span>
+            )}
+        </label>
+    );
+    return root;
+};
+
+const PrimeCheckboxSlot = forwardRef<HTMLInputElement, CheckboxProps>(
+    function PrimeCheckboxSlot(props, ref) {
+        return <PrimeChoice kind='checkbox' props={props} forwardedRef={ref} />;
+    },
+);
+
+const PrimeRadioSlot = forwardRef<HTMLInputElement, RadioProps>(
+    function PrimeRadioSlot(props, ref) {
+        return <PrimeChoice kind='radio' props={props} forwardedRef={ref} />;
+    },
+);
+
+const PrimeSwitchSlot = forwardRef<HTMLInputElement, SwitchProps>(
+    function PrimeSwitchSlot(props, ref) {
+        return <PrimeChoice kind='switch' props={props} forwardedRef={ref} />;
+    },
+);
+
+const PrimeProgressSlot = ({
+    value = 0,
+    mode = 'determinate',
+    showValue = true,
+    'aria-label': ariaLabel = 'Progress',
+    'aria-labelledby': ariaLabelledBy,
+    className,
+}: ProgressBarProps) => {
+    const boundedValue = Math.min(100, Math.max(0, value));
+    const determinate = mode === 'determinate';
+    const busy = !determinate || boundedValue < 100;
+    return (
+        <PrimeProgressBar.Root
+            as='div'
+            value={boundedValue}
+            mode={mode}
+            aria-label={ariaLabelledBy ? undefined : ariaLabel}
+            aria-labelledby={ariaLabelledBy}
+            className={classNames('cratis-primereact-progress', className)}
+            data-cratis-part='root'
+            data-mode={mode}
+            data-busy={busy || undefined}
+            data-loading={!determinate || undefined}
+        >
+            <PrimeProgressBar.Track data-cratis-part='indicator'>
+                <PrimeProgressBar.Indicator />
+            </PrimeProgressBar.Track>
+            {determinate && showValue ? (
+                <PrimeProgressBar.Label data-cratis-part='label'>
+                    {boundedValue}%
+                </PrimeProgressBar.Label>
+            ) : null}
+        </PrimeProgressBar.Root>
+    );
+};
+
+const PrimeSurfaceSlot = forwardRef<HTMLElement, SurfaceProps>(function PrimeSurfaceSlot(
+    { as: Element = 'div', pt, className, style, ...nativeProps },
+    ref,
+) {
+    return (
+        <PrimeCard.Root
+            {...pt?.root}
+            {...nativeProps}
+            as={Element}
+            ref={ref}
+            className={classNames(
+                'cratis-primereact-surface',
+                pt?.root?.className,
+                className,
+            )}
+            style={{ ...pt?.root?.style, ...style }}
+            data-cratis-part='root'
+        />
+    );
+});
+
+const declaration = <SlotId extends unstable_SlotId>(
+    render: unstable_SlotDeclaration<SlotId>['render'],
+) =>
+    Object.freeze({
+        mode: 'presentation',
+        fidelity: 'native',
+        render,
+    }) satisfies unstable_SlotDeclaration<SlotId>;
+
+const slots = Object.freeze({
+    'common.button': declaration<'common.button'>(PrimeButtonSlot),
+    'common.iconButton': declaration<'common.iconButton'>(PrimeIconButtonSlot),
+    'common.textInput': declaration<'common.textInput'>(PrimeTextInputSlot),
+    'common.textArea': declaration<'common.textArea'>(PrimeTextAreaSlot),
+    'common.checkbox': declaration<'common.checkbox'>(PrimeCheckboxSlot),
+    'common.radio': declaration<'common.radio'>(PrimeRadioSlot),
+    'common.switch': declaration<'common.switch'>(PrimeSwitchSlot),
+    'common.progress': declaration<'common.progress'>(PrimeProgressSlot),
+    'common.surface': declaration<'common.surface'>(PrimeSurfaceSlot),
+});
+
+/** PrimeReact 11 implementation of the stable Cratis presentation profile. */
+export const primeReactUiLibrary: unstable_UiLibrary = unstable_defineUiLibrary({
+    id: 'cratis-primereact',
+    displayName: 'Cratis PrimeReact renderer',
+    abi: unstable_CRATIS_UI_ABI_VERSION,
+    level: 'primitive',
+    profile: 'stable-presentation/v1',
+    profileSlots,
+    capabilities,
+    slots,
+    Provider: PrimeReactAdapterProvider,
+});
diff --git a/Adapters/PrimeReact/tsconfig.build.json b/Adapters/PrimeReact/tsconfig.build.json
new file mode 100644
index 00000000..894b38f8
--- /dev/null
+++ b/Adapters/PrimeReact/tsconfig.build.json
@@ -0,0 +1,16 @@
+{
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "composite": false,
+        "declaration": true,
+        "declarationMap": true,
+        "outDir": "dist",
+        "rootDir": "src",
+        "module": "ESNext",
+        "moduleResolution": "bundler",
+        "skipLibCheck": false,
+        "types": []
+    },
+    "include": ["src/**/*.ts", "src/**/*.tsx"],
+    "exclude": ["**/for_*/**", "dist", "node_modules"]
+}
diff --git a/Adapters/PrimeReact/tsconfig.json b/Adapters/PrimeReact/tsconfig.json
new file mode 100644
index 00000000..ac5922b3
--- /dev/null
+++ b/Adapters/PrimeReact/tsconfig.json
@@ -0,0 +1,19 @@
+{
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "composite": false,
+        "noEmit": true,
+        "module": "ESNext",
+        "moduleResolution": "bundler",
+        "skipLibCheck": false,
+        "types": ["vitest/globals"]
+    },
+    "include": [
+        "src/**/*.ts",
+        "src/**/*.tsx",
+        "for_*/**/*.ts",
+        "for_*/**/*.tsx",
+        "vitest.setup.ts"
+    ],
+    "exclude": ["dist", "node_modules"]
+}
diff --git a/Adapters/PrimeReact/vitest.config.ts b/Adapters/PrimeReact/vitest.config.ts
new file mode 100644
index 00000000..2abb3de8
--- /dev/null
+++ b/Adapters/PrimeReact/vitest.config.ts
@@ -0,0 +1,17 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { fileURLToPath } from 'node:url';
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+    root: fileURLToPath(new URL('.', import.meta.url)),
+    test: {
+        environment: 'jsdom',
+        globals: true,
+        include: ['for_*/**/when_*.ts', 'for_*/**/when_*.tsx'],
+        setupFiles: ['./vitest.setup.ts'],
+        isolate: true,
+        fileParallelism: false,
+    },
+});
diff --git a/Adapters/PrimeReact/vitest.setup.ts b/Adapters/PrimeReact/vitest.setup.ts
new file mode 100644
index 00000000..4136ae79
--- /dev/null
+++ b/Adapters/PrimeReact/vitest.setup.ts
@@ -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 { should } from 'chai';
+
+should();
+// SAFETY: React's test environment marker is intentionally attached to the process-wide global.
+(
+    globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
+).IS_REACT_ACT_ENVIRONMENT = true;
+
+if (!globalThis.ResizeObserver) {
+    globalThis.ResizeObserver = class ResizeObserver {
+        observe() {
+            return undefined;
+        }
+        unobserve() {
+            return undefined;
+        }
+        disconnect() {
+            return undefined;
+        }
+    };
+}
+
+if (!Element.prototype.scrollIntoView) {
+    Element.prototype.scrollIntoView = () => undefined;
+}
diff --git a/Conformance/src/ConformanceOptions.ts b/Conformance/src/ConformanceOptions.ts
index 262bd77e..ec1e3627 100644
--- a/Conformance/src/ConformanceOptions.ts
+++ b/Conformance/src/ConformanceOptions.ts
@@ -1,6 +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 { ComponentType, ReactNode } from 'react';
 import type { AdapterPackageMetadata } from './AdapterPackageMetadata.js';
 import type { ConformanceSkipRequest } from './ConformanceSkipRequest.js';
 
@@ -12,6 +13,8 @@ export interface ConformanceOptions {
     readonly document?: Document;
     /** Enables axe-core evidence. Defaults to `true`. */
     readonly axe?: boolean;
+    /** Optional application-owned outer provider required by a vendor renderer. */
+    readonly wrapper?: ComponentType<{ readonly children: ReactNode }>;
     /** Explicit omissions, accepted only when fidelity/capability declarations justify them. */
     readonly skips?: readonly ConformanceSkipRequest[];
 }
diff --git a/Conformance/src/runConformance.tsx b/Conformance/src/runConformance.tsx
index a8ff1aa7..e58dabaa 100644
--- a/Conformance/src/runConformance.tsx
+++ b/Conformance/src/runConformance.tsx
@@ -80,17 +80,20 @@ const renderComponent = (
     return createElement(Component, ref ? { ...props, ref } : props);
 };
 
-const withProvider = (child: ReactElement) =>
-    createElement(CratisComponentsProvider, {
+const withProvider = (child: ReactElement, Wrapper: ConformanceOptions['wrapper']) => {
+    const components = createElement(CratisComponentsProvider, {
         value: { locale: 'en-US' },
         children: child,
     });
+    return Wrapper ? createElement(Wrapper, { children: components }) : components;
+};
 
 const mount = async (
     document: Document,
     declaration: unstable_SlotDeclaration<unstable_SlotId>,
     props: Readonly<Record<string, unknown>>,
     refCapable: boolean,
+    wrapper: ConformanceOptions['wrapper'],
     host: ParentNode = document.body,
 ): Promise<MountedFixture> => {
     const container = document.createElement('div');
@@ -103,6 +106,7 @@ const mount = async (
         root.render(
             withProvider(
                 renderComponent(declaration, props, refCapable ? ref : undefined),
+                wrapper,
             ),
         );
     });
@@ -389,7 +393,13 @@ const checkSlot = async (
             pt: passThrough(profile),
             'data-conformance-behavior-prop': 'forwarded',
         };
-        fixture = await mount(document, typedDeclaration, baseProps, profile.refCapable);
+        fixture = await mount(
+            document,
+            typedDeclaration,
+            baseProps,
+            profile.refCapable,
+            options.wrapper,
+        );
         if (profile.activate)
             await act(async () =>
                 profile.activate?.(document, fixture?.container ?? document.body),
@@ -401,6 +411,7 @@ const checkSlot = async (
                 typedDeclaration,
                 { ...variant, pt: passThrough(profile) },
                 profile.refCapable,
+                options.wrapper,
             );
             variantFixtures.push(variantFixture);
             if (profile.activate) {
@@ -621,6 +632,7 @@ const checkSlot = async (
                 typedDeclaration,
                 profile.createStateProps(),
                 profile.refCapable,
+                options.wrapper,
             );
             collectRenderedStates(document, observedStateAssociations);
             const stateElements =
@@ -676,6 +688,7 @@ const checkServerRendering = (
     checks: ConformanceCheck[],
     library: unstable_UiLibrary,
     profiles: readonly SlotProfile[],
+    wrapper: ConformanceOptions['wrapper'],
 ) => {
     const outputs = new Map<unstable_SlotId, string>();
     for (const profile of profiles) {
@@ -687,6 +700,7 @@ const checkServerRendering = (
                     declaration as unstable_SlotDeclaration<unstable_SlotId>,
                     profile.createProps(),
                 ),
+                wrapper,
             );
             const first = renderToString(element);
             const second = renderToString(element);
@@ -751,6 +765,7 @@ const checkHydration = async (
     library: unstable_UiLibrary,
     profiles: readonly SlotProfile[],
     document: Document,
+    wrapper: ConformanceOptions['wrapper'],
 ) => {
     const profile =
         profiles.find((candidate) => candidate.slotId === 'common.button') ?? profiles[0];
@@ -770,6 +785,7 @@ const checkHydration = async (
             declaration as unstable_SlotDeclaration<unstable_SlotId>,
             profile.createProps(),
         ),
+        wrapper,
     );
     const serverMarkup = renderToString(element);
     const container = document.createElement('div');
@@ -806,6 +822,7 @@ const checkEnvironmentalEvidence = async (
     document: Document,
     library: unstable_UiLibrary,
     profiles: readonly SlotProfile[],
+    wrapper: ConformanceOptions['wrapper'],
 ) => {
     const profile =
         profiles.find((candidate) => candidate.slotId === 'common.button') ?? profiles[0];
@@ -835,6 +852,7 @@ const checkEnvironmentalEvidence = async (
             declaration as unstable_SlotDeclaration<unstable_SlotId>,
             profile.createProps(),
             profile.refCapable,
+            wrapper,
             host,
         );
         const native = fixture.container.querySelector(profile.nativeSelector);
@@ -901,9 +919,21 @@ export const runConformance = async (
         );
         for (const profile of profiles)
             await checkSlot(checks, rendererLibrary, options, document, profile);
-        checkServerRendering(checks, rendererLibrary, profiles);
-        await checkHydration(checks, rendererLibrary, profiles, document);
-        await checkEnvironmentalEvidence(checks, document, rendererLibrary, profiles);
+        checkServerRendering(checks, rendererLibrary, profiles, options.wrapper);
+        await checkHydration(
+            checks,
+            rendererLibrary,
+            profiles,
+            document,
+            options.wrapper,
+        );
+        await checkEnvironmentalEvidence(
+            checks,
+            document,
+            rendererLibrary,
+            profiles,
+            options.wrapper,
+        );
     } else {
         addCheck(
             checks,
diff --git a/Source/Common/CratisComponentsProvider.tsx b/Source/Common/CratisComponentsProvider.tsx
index 811e4e98..68c4ad82 100644
--- a/Source/Common/CratisComponentsProvider.tsx
+++ b/Source/Common/CratisComponentsProvider.tsx
@@ -6,7 +6,7 @@ import { I18nProvider } from 'react-aria-components/I18nProvider';
 import { merge } from 'ts-deepmerge';
 import { Toaster, type ToasterProps } from '../Notifications/Toaster';
 import { unstable_RendererRoot } from '../renderer/RendererContext';
-import type { unstable_UiLibrary } from '../renderer/manifest';
+import type { unstable_RendererSetup, unstable_UiLibrary } from '../renderer/manifest';
 import type { unstable_CratisOverlayEnvironment } from '../renderer/overlayEnvironment';
 import { CratisComponentsContext } from './CratisComponentsContext';
 import { cratisDefaults } from './CratisComponentsDefaults';
@@ -182,6 +182,11 @@ export interface CratisComponentsProviderProps {
     rendererFallback?: 'core' | 'throw';
     /** Experimental host environment for overlay portal containers. */
     overlayEnvironment?: unstable_CratisOverlayEnvironment;
+    /**
+     * Non-secret renderer setup attestations. Values are booleans so credentials and license
+     * tokens never cross the Components provider boundary.
+     */
+    rendererSetup?: unstable_RendererSetup;
     /** Application content. */
     children: ReactNode;
 }
@@ -264,6 +269,7 @@ export const CratisComponentsProvider = ({
     libraryMode,
     rendererFallback,
     overlayEnvironment,
+    rendererSetup,
     children,
 }: CratisComponentsProviderProps) => {
     const resolved = useMemo(
@@ -278,6 +284,7 @@ export const CratisComponentsProvider = ({
             libraryMode={libraryMode}
             rendererFallback={rendererFallback}
             overlayEnvironment={overlayEnvironment}
+            rendererSetup={rendererSetup}
         >
             <CratisComponentsContext.Provider value={resolved}>
                 <I18nProvider locale={validLocale(resolved.locale)}>
diff --git a/Source/renderer/RendererContext.tsx b/Source/renderer/RendererContext.tsx
index 8b30379a..5510518c 100644
--- a/Source/renderer/RendererContext.tsx
+++ b/Source/renderer/RendererContext.tsx
@@ -16,7 +16,7 @@ import {
     unstable_adapterErrorCodes,
     type unstable_AdapterDiagnostic,
 } from './errors';
-import type { unstable_UiLibrary } from './manifest';
+import type { unstable_RendererSetup, unstable_UiLibrary } from './manifest';
 import {
     unstable_defaultOverlayEnvironment,
     type unstable_CratisOverlayEnvironment,
@@ -46,6 +46,7 @@ export interface unstable_RendererContextValue {
     readonly libraryMode: 'strict' | 'degrade';
     readonly rendererFallback: 'core' | 'throw';
     readonly overlayEnvironment: unstable_CratisOverlayEnvironment;
+    readonly rendererSetup: unstable_RendererSetup;
     readonly coreSlots: unstable_SlotMap;
     readonly providerLibraryReferences: readonly unstable_UiLibrary[];
     readonly reportDiagnostic: (diagnostic: unstable_AdapterDiagnostic) => void;
@@ -57,6 +58,8 @@ export interface unstable_RendererRootProps {
     readonly libraryMode?: 'strict' | 'degrade';
     readonly rendererFallback?: 'core' | 'throw';
     readonly overlayEnvironment?: unstable_CratisOverlayEnvironment;
+    /** Non-secret application setup attestations supplied to the selected library provider. */
+    readonly rendererSetup?: unstable_RendererSetup;
     readonly coreSlots?: unstable_SlotMap;
     readonly children: ReactNode;
 }
@@ -81,11 +84,16 @@ export const unstable_RendererRoot = ({
     libraryMode = 'strict',
     rendererFallback = 'core',
     overlayEnvironment,
+    rendererSetup,
     coreSlots,
     children,
 }: unstable_RendererRootProps) => {
     const parent = useContext(unstable_RendererContext);
     const selected = useMemo(() => unstable_resolveLibraryInput(library), [library]);
+    const setup = useMemo(
+        () => Object.freeze({ ...(rendererSetup ?? {}) }),
+        [rendererSetup],
+    );
     const layer = useMemo(
         () =>
             selected.library ? unstable_createRendererLayer(selected.library) : undefined,
@@ -147,6 +155,7 @@ export const unstable_RendererRoot = ({
                     overlayEnvironment ??
                     parent?.overlayEnvironment ??
                     unstable_defaultOverlayEnvironment,
+                rendererSetup: setup,
                 coreSlots: resolvedCoreSlots,
                 providerLibraryReferences:
                     selected.references.length > 0
@@ -164,6 +173,7 @@ export const unstable_RendererRoot = ({
             reportDiagnostic,
             resolvedCoreSlots,
             selected.references,
+            setup,
             slots,
         ],
     );
@@ -175,7 +185,11 @@ export const unstable_RendererRoot = ({
     const LibraryProvider = selected.library?.Provider;
     return (
         <unstable_RendererContext.Provider value={value}>
-            {LibraryProvider ? <LibraryProvider>{children}</LibraryProvider> : children}
+            {LibraryProvider ? (
+                <LibraryProvider setup={setup}>{children}</LibraryProvider>
+            ) : (
+                children
+            )}
         </unstable_RendererContext.Provider>
     );
 };
@@ -235,10 +249,7 @@ export function unstable_useSlot<K extends unstable_SlotId>(
         }
     }, [context, diagnostic]);
 
-    if (
-        result.usedCoreFallback &&
-        (context?.rendererFallback ?? 'core') === 'throw'
-    ) {
+    if (result.usedCoreFallback && (context?.rendererFallback ?? 'core') === 'throw') {
         throw new unstable_AdapterError(
             diagnostic ?? fallbackDiagnostic(context, slotId),
         );
diff --git a/Source/renderer/RendererScope.tsx b/Source/renderer/RendererScope.tsx
index b5a1adf8..8bd79472 100644
--- a/Source/renderer/RendererScope.tsx
+++ b/Source/renderer/RendererScope.tsx
@@ -111,7 +111,11 @@ export const unstable_RendererScope = ({
 
     return (
         <unstable_RendererContext.Provider value={value}>
-            {LibraryProvider ? <LibraryProvider>{children}</LibraryProvider> : children}
+            {LibraryProvider ? (
+                <LibraryProvider setup={value.rendererSetup}>{children}</LibraryProvider>
+            ) : (
+                children
+            )}
         </unstable_RendererContext.Provider>
     );
 };
diff --git a/Source/renderer/for_resolution/when_using_provider_setup.tsx b/Source/renderer/for_resolution/when_using_provider_setup.tsx
index ff8d84d5..c319b1a5 100644
--- a/Source/renderer/for_resolution/when_using_provider_setup.tsx
+++ b/Source/renderer/for_resolution/when_using_provider_setup.tsx
@@ -59,6 +59,35 @@ describe('when using renderer provider setup', () => {
         (html.match(/data-library-provider/g) ?? []).should.have.lengthOf(1);
     });
 
+    it('should pass only frozen non-secret boolean setup attestations to a library provider', () => {
+        let observedSetup: Readonly<Record<string, boolean>> | undefined;
+        const LibraryProvider = ({
+            children,
+            setup,
+        }: {
+            children: React.ReactNode;
+            setup: Readonly<Record<string, boolean>>;
+        }) => {
+            observedSetup = setup;
+            return <>{children}</>;
+        };
+        const library = createTestLibrary('configured', buttonSlot(FirstButton), {
+            Provider: LibraryProvider,
+        });
+
+        renderToStaticMarkup(
+            <CratisComponentsProvider
+                library={library}
+                rendererSetup={{ 'sample.license-configured': true }}
+            >
+                <span />
+            </CratisComponentsProvider>,
+        );
+
+        observedSetup!.should.deep.equal({ 'sample.license-configured': true });
+        Object.isFrozen(observedSetup).should.equal(true);
+    });
+
     it('should not invoke the overlay environment during render without document', () => {
         let invocations = 0;
         const overlayEnvironment = {
diff --git a/Source/renderer/index.ts b/Source/renderer/index.ts
index 29d4bb5d..015c6090 100644
--- a/Source/renderer/index.ts
+++ b/Source/renderer/index.ts
@@ -68,7 +68,9 @@ export {
     unstable_defineUiLibrary,
     type unstable_RendererExtensions,
     type unstable_RendererProps,
+    type unstable_RendererSetup,
     type unstable_UiLibrary,
+    type unstable_UiLibraryProviderProps,
 } from './manifest';
 export {
     unstable_defaultOverlayEnvironment,
diff --git a/Source/renderer/manifest.ts b/Source/renderer/manifest.ts
index 14903d42..ed85b4ac 100644
--- a/Source/renderer/manifest.ts
+++ b/Source/renderer/manifest.ts
@@ -6,6 +6,22 @@ import type { unstable_CapabilityId } from './capabilities';
 import type { unstable_AdapterDiagnostic } from './errors';
 import type { unstable_SlotId, unstable_SlotMap } from './slots';
 
+/**
+ * Non-secret application setup attestations supplied to a renderer provider.
+ * Values are booleans by design so credentials cannot cross the Components boundary.
+ *
+ * @unstable Adapter-author contract. Expect changes until renderer conformance gates promote it.
+ */
+export type unstable_RendererSetup = Readonly<Record<string, boolean>>;
+
+/** Props supplied to a renderer library provider. */
+export interface unstable_UiLibraryProviderProps {
+    /** Non-secret application setup attestations. Never credentials or license tokens. */
+    readonly setup: unstable_RendererSetup;
+    /** Application content. */
+    readonly children: ReactNode;
+}
+
 /**
  * Renderer ABI major implemented by this package.
  *
@@ -39,7 +55,7 @@ export interface unstable_UiLibrary {
     /** Typed partial slot implementation table. */
     readonly slots: unstable_SlotMap;
     /** Optional library-level provider mounted once around the selected renderer scope. */
-    readonly Provider?: ComponentType<{ children: ReactNode }>;
+    readonly Provider?: ComponentType<unstable_UiLibraryProviderProps>;
     /** Optional static diagnostic preflight evaluated by renderer providers and scopes. */
     readonly preflight?: () => readonly unstable_AdapterDiagnostic[];
 }
diff --git a/yarn.lock b/yarn.lock
index c7638c1e..e12b5c5f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -345,6 +345,35 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@cratis/components.primereact@workspace:Adapters/PrimeReact":
+  version: 0.0.0-use.local
+  resolution: "@cratis/components.primereact@workspace:Adapters/PrimeReact"
+  dependencies:
+    "@cratis/arc": "npm:22.4.0"
+    "@cratis/arc.react": "npm:22.4.0"
+    "@cratis/components": "workspace:^"
+    "@cratis/components.conformance": "workspace:^"
+    "@cratis/fundamentals": "npm:^7.10.3"
+    "@primereact/core": "npm:11.1.0"
+    "@primereact/ui": "npm:11.1.0"
+    "@primeuix/themes": "npm:3.0.0"
+    "@types/react": "npm:^19.2.18"
+    primereact: "npm:11.1.0"
+    react: "npm:^19.0.0"
+    react-dom: "npm:^19.0.0"
+    reflect-metadata: "npm:0.2.2"
+    tsyringe: "npm:4.10.0"
+  peerDependencies:
+    "@cratis/components": ">=3.0.0 <4"
+    "@primereact/core": ">=11 <12"
+    "@primereact/ui": ">=11 <12"
+    "@primeuix/themes": ">=3 <4"
+    primereact: ">=11 <12"
+    react: ^19.0.0
+    react-dom: ^19.0.0
+  languageName: unknown
+  linkType: soft
+
 "@cratis/components@workspace:Source, @cratis/components@workspace:^":
   version: 0.0.0-use.local
   resolution: "@cratis/components@workspace:Source"
@@ -1309,6 +1338,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@noble/ed25519@npm:2.3.0":
+  version: 2.3.0
+  resolution: "@noble/ed25519@npm:2.3.0"
+  checksum: 10/3b12a7ac401ac625c59ab4b597d415aea3b855cdfa2563529863c9848b6c143b29fb1f0e462acec947bd20ab4fac0d8cfe892231566cbdcf6bdd13532241191b
+  languageName: node
+  linkType: hard
+
+"@noble/hashes@npm:2.2.0":
+  version: 2.2.0
+  resolution: "@noble/hashes@npm:2.2.0"
+  checksum: 10/b1b78bedc2a01394be047429f3d888905015fe8a09f1b7e43e0b5736b54133df62f73dcc73ede43af38e96e86156afb45b86973fdeaa95d9f0880333c3fc0907
+  languageName: node
+  linkType: hard
+
 "@nodelib/fs.scandir@npm:2.1.5":
   version: 2.1.5
   resolution: "@nodelib/fs.scandir@npm:2.1.5"
@@ -1666,6 +1709,144 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@primereact/core@npm:11.1.0":
+  version: 11.1.0
+  resolution: "@primereact/core@npm:11.1.0"
+  dependencies:
+    "@primereact/hooks": "npm:11.1.0"
+    "@primereact/types": "npm:11.1.0"
+    "@primeui/license-manager": "npm:^1.0.0"
+    "@primeuix/locale": "npm:^0.1.0"
+    "@primeuix/motion": "npm:^1.0.0"
+    "@primeuix/styled": "npm:^1.0.0"
+    "@primeuix/utils": "npm:^0.8.0"
+  peerDependencies:
+    react: ">=19.0.0"
+  checksum: 10/f7b10b633d266a08be16c3862941a0838d7afe7dfbdefddedbd4dab566c8667c1fa6089076393d5aa90368c58871fd904e68fda033d710f1e1f140466fd49e8e
+  languageName: node
+  linkType: hard
+
+"@primereact/headless@npm:11.1.0":
+  version: 11.1.0
+  resolution: "@primereact/headless@npm:11.1.0"
+  dependencies:
+    "@primereact/core": "npm:11.1.0"
+    "@primereact/hooks": "npm:11.1.0"
+    "@primeui/license-manager": "npm:^1.0.0"
+    "@primeuix/styled": "npm:^1.0.0"
+    "@primeuix/utils": "npm:^0.8.0"
+  checksum: 10/877bd7770fe95ee2191cf71f52da4f00c7b220a78f4da99f072e90df066377132ec0182492d495ec6c64fc6ce2689686727981fb71f05f64a0b6b5a938a38724
+  languageName: node
+  linkType: hard
+
+"@primereact/hooks@npm:11.1.0":
+  version: 11.1.0
+  resolution: "@primereact/hooks@npm:11.1.0"
+  dependencies:
+    "@primeuix/utils": "npm:^0.8.0"
+  peerDependencies:
+    react: ">=19.0.0"
+  checksum: 10/26533323d22a36a96fbbffef590127a61c1c4206e9039efc49fff6aefafccf118f84a6184bd94ebf1a15ce1f9fe9027639c520a17487f1bdb46534d93af1ee6e
+  languageName: node
+  linkType: hard
+
+"@primereact/styles@npm:11.1.0":
+  version: 11.1.0
+  resolution: "@primereact/styles@npm:11.1.0"
+  dependencies:
+    "@primereact/types": "npm:11.1.0"
+    "@primeuix/styled": "npm:^1.0.0"
+    "@primeuix/styles": "npm:^3.0.0"
+    "@primeuix/utils": "npm:^0.8.0"
+  checksum: 10/896d53fb8731febc9ef636a0284869efd453e8b38acd2bf63a161c5a7fa23fbc7b76b50cb8494d71a24de5d8f4d69e238de583cf2b6c4a6f33067541b0094cb4
+  languageName: node
+  linkType: hard
+
+"@primereact/types@npm:11.1.0":
+  version: 11.1.0
+  resolution: "@primereact/types@npm:11.1.0"
+  peerDependencies:
+    "@primeuix/motion": ^1.0.0
+    "@primeuix/styled": ^1.0.0
+  checksum: 10/7b07b68d4f2f2976e2dbc2e262e2d035381f258bacdbea78d3222f89b3b4fb0790314a4ad5fd8d518892a14d5b46b74f7a84bf0961c08f40f4ff347a9e72f055
+  languageName: node
+  linkType: hard
+
+"@primereact/ui@npm:11.1.0":
+  version: 11.1.0
+  resolution: "@primereact/ui@npm:11.1.0"
+  dependencies:
+    "@primereact/styles": "npm:11.1.0"
+    primereact: "npm:11.1.0"
+  peerDependencies:
+    react: ">=19.0.0"
+  checksum: 10/d2a94a2d0ad2057f503ee71a29c386496c7313b99ab1acda83cf6894ed1736b3d465f5876f07e52e16ed23b23005f0123ac3b48e1c5c365ace8c4c95bb9f36de
+  languageName: node
+  linkType: hard
+
+"@primeui/license-manager@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "@primeui/license-manager@npm:1.0.0"
+  dependencies:
+    "@noble/ed25519": "npm:2.3.0"
+    "@noble/hashes": "npm:2.2.0"
+  checksum: 10/32dfe9bf3acd784025cc57b57fda63105b66383e920236bfce087ad343f04e50adc571b1dc5ea1da84d6790c0f7e1575639c15e07e27e8571bb227f709533063
+  languageName: node
+  linkType: hard
+
+"@primeuix/locale@npm:^0.1.0":
+  version: 0.1.0
+  resolution: "@primeuix/locale@npm:0.1.0"
+  dependencies:
+    "@primeuix/utils": "npm:^0.8.0"
+  checksum: 10/f2641884de92943c137c243b65e58a6658c8eaf8af1163ba1ec1ba048dc55335772bd84d713d2499c7c0681ddb94ec02e3034911948f42fbcbe831ef946f79de
+  languageName: node
+  linkType: hard
+
+"@primeuix/motion@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "@primeuix/motion@npm:1.0.0"
+  dependencies:
+    "@primeuix/utils": "npm:^0.8.0"
+  checksum: 10/e9d6228efa75b1e77ba2002f7e3d720afa779ee1c73efc386279342754d067c8824719bc87e4acc3465304383f80222fcc1b3b58cc8a71cab41d19d4c2e8f3e5
+  languageName: node
+  linkType: hard
+
+"@primeuix/styled@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "@primeuix/styled@npm:1.0.0"
+  dependencies:
+    "@primeui/license-manager": "npm:^1.0.0"
+    "@primeuix/utils": "npm:^0.8.0"
+  checksum: 10/d7297906b25aaf1b1b79244fd42e06c12b951a9d7fe62039c5ca8860e2983b42d7e8783200766ac958518c034fb275c0a1701fec918e0fe33336946f375464b0
+  languageName: node
+  linkType: hard
+
+"@primeuix/styles@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "@primeuix/styles@npm:3.0.0"
+  dependencies:
+    "@primeuix/styled": "npm:^1.0.0"
+  checksum: 10/f97d359385911a7cfef02930e5f0c36cd9aa9992043e0d90ff348546001039abc3d4a2cac96719a7a5fe9f420edac167ba15974d5997fdf0694d6cef45d84c4d
+  languageName: node
+  linkType: hard
+
+"@primeuix/themes@npm:3.0.0":
+  version: 3.0.0
+  resolution: "@primeuix/themes@npm:3.0.0"
+  dependencies:
+    "@primeuix/styled": "npm:^1.0.0"
+  checksum: 10/cb253785e4a94ee92cab53ae6dd451fe52ac7811ab44e4cbb1d4b4ebc4c81e71e52fd3a5bd75758294ed21d91d1d352edf261c6dd8b77a7437db483a58a6e6cd
+  languageName: node
+  linkType: hard
+
+"@primeuix/utils@npm:^0.8.0":
+  version: 0.8.1
+  resolution: "@primeuix/utils@npm:0.8.1"
+  checksum: 10/0a7a05c799b510e0e12c7659b789139969ed1c7f3668e9ccf5eeb71505edd02267be66b61dedad9c1576d96d492c3a8c5281a125897530bc12dbe877c095cc93
+  languageName: node
+  linkType: hard
+
 "@react-types/shared@npm:^3.36.1":
   version: 3.36.1
   resolution: "@react-types/shared@npm:3.36.1"
@@ -7072,6 +7253,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"primereact@npm:11.1.0":
+  version: 11.1.0
+  resolution: "primereact@npm:11.1.0"
+  dependencies:
+    "@primereact/core": "npm:11.1.0"
+    "@primereact/headless": "npm:11.1.0"
+  peerDependencies:
+    react: ">=19.0.0"
+    react-dom: ">=19.0.0"
+  checksum: 10/d574befb27ebf7dc0dce9db7d11a2141c2def23b10248f9fe66739b0d5f9690ac155e591375fe9089ef99a502f160cd045a74b32b937dcfd9502784de3bd4fb6
+  languageName: node
+  linkType: hard
+
 "proc-log@npm:^7.0.0":
   version: 7.0.0
   resolution: "proc-log@npm:7.0.0"

From d4ff6cfa5759c383c1d53008f1db549156649199 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Fri, 28 Aug 2026 10:03:35 +0200
Subject: [PATCH 223/267] Type non-secret renderer setup attestations

---
 Adapters/Mui/README.md                        |  3 +-
 Conformance/CONFORMANCE.md                    |  4 ++-
 Source/renderer/README.md                     |  8 +++++
 Source/renderer/RendererContext.tsx           |  9 ++++--
 .../when_using_provider_setup.tsx             | 32 +++++++++++++++++++
 .../for_slot_types/slotTyping.fixture.ts      | 21 ++++++++++++
 Source/renderer/index.ts                      |  1 +
 Source/renderer/manifest.ts                   | 16 ++++++++--
 8 files changed, 88 insertions(+), 6 deletions(-)

diff --git a/Adapters/Mui/README.md b/Adapters/Mui/README.md
index 668bc13c..465dce10 100644
--- a/Adapters/Mui/README.md
+++ b/Adapters/Mui/README.md
@@ -46,7 +46,8 @@ Put application customization outside `CratisComponentsProvider`:
 </ThemeProvider>
 ```
 
-The renderer provider ABI receives only `children`; it cannot receive an Emotion cache. SSR hosts
+The renderer provider ABI receives only `children` and non-secret boolean setup attestations; it
+cannot receive an Emotion cache. SSR hosts
 must create an Emotion cache per request, mount Emotion's `CacheProvider` outside the Components
 provider, and extract critical styles from that same request-local cache. Sharing a cache between
 requests can leak styles and ordering. RTL additionally requires the host MUI theme direction and
diff --git a/Conformance/CONFORMANCE.md b/Conformance/CONFORMANCE.md
index ac4372fc..ad0d94c6 100644
--- a/Conformance/CONFORMANCE.md
+++ b/Conformance/CONFORMANCE.md
@@ -19,7 +19,9 @@ The automated families are:
 - a separate packed-package gate covering every emitted declaration, runtime entry loading, and strict Bundler/NodeNext consumer compilation.
 
 A requested skip is accepted only when the relevant declaration is `unsupported`/`emulated`, or the
-request names a capability the library does not claim. An unjustified skip is a failure.
+request names a capability the library does not claim. An unjustified skip is a failure. Adapters
+whose upstream provider remains application-owned may supply an outer `wrapper` fixture; the runner
+uses it for the exercised environment but never configures or transports credentials.
 
 ## Private plain-DOM falsification fixture
 
diff --git a/Source/renderer/README.md b/Source/renderer/README.md
index 2e35bec4..8040ac72 100644
--- a/Source/renderer/README.md
+++ b/Source/renderer/README.md
@@ -26,6 +26,14 @@ The initial slot table contains only components with real standalone public cont
 The basic controls are standalone Common primitives. Arc-bound `CommandForm` fields remain
 high-order composites and must never be registered as substitutes for these slots.
 
+Renderer packages may declaration-merge non-secret boolean keys into
+`unstable_RendererSetupExtensions`. Applications pass those attestations through
+`CratisComponentsProvider.rendererSetup`; the root freezes them, nested providers inherit them, and
+renderer scopes forward them to a library Provider. Credentials, license strings, caches, provider
+instances, and other values must never cross this boundary. The attestation says only that the host
+completed its own setup and lets a renderer fail closed when its upstream context cannot expose
+whether setup occurred.
+
 E1 routes the nine presentation candidates. E2 routes tooltip, dropdown, dialog, date picker, and
 table paginator as atomic slots whose external adapters replace Core interaction ownership entirely.
 Their Core implementations self-host React Aria portals through the local overlay environment only
diff --git a/Source/renderer/RendererContext.tsx b/Source/renderer/RendererContext.tsx
index 5510518c..b9bf4330 100644
--- a/Source/renderer/RendererContext.tsx
+++ b/Source/renderer/RendererContext.tsx
@@ -69,6 +69,8 @@ export const unstable_RendererContext = createContext<
     unstable_RendererContextValue | undefined
 >(undefined);
 
+const emptyRendererSetup = Object.freeze({}) as unstable_RendererSetup;
+
 const nestedLibraryDiagnostic = (
     library: unstable_UiLibrary,
 ): unstable_AdapterDiagnostic => ({
@@ -91,8 +93,11 @@ export const unstable_RendererRoot = ({
     const parent = useContext(unstable_RendererContext);
     const selected = useMemo(() => unstable_resolveLibraryInput(library), [library]);
     const setup = useMemo(
-        () => Object.freeze({ ...(rendererSetup ?? {}) }),
-        [rendererSetup],
+        () =>
+            rendererSetup
+                ? Object.freeze({ ...rendererSetup })
+                : (parent?.rendererSetup ?? emptyRendererSetup),
+        [parent?.rendererSetup, rendererSetup],
     );
     const layer = useMemo(
         () =>
diff --git a/Source/renderer/for_resolution/when_using_provider_setup.tsx b/Source/renderer/for_resolution/when_using_provider_setup.tsx
index c319b1a5..4e78da12 100644
--- a/Source/renderer/for_resolution/when_using_provider_setup.tsx
+++ b/Source/renderer/for_resolution/when_using_provider_setup.tsx
@@ -88,6 +88,38 @@ describe('when using renderer provider setup', () => {
         Object.isFrozen(observedSetup).should.equal(true);
     });
 
+    it('should inherit frozen setup attestations through a nested provider', () => {
+        const observed: Readonly<Record<string, boolean>>[] = [];
+        const LibraryProvider = ({
+            children,
+            setup,
+        }: {
+            children: React.ReactNode;
+            setup: Readonly<Record<string, boolean>>;
+        }) => {
+            observed.push(setup);
+            return <>{children}</>;
+        };
+        const library = createTestLibrary('configured', buttonSlot(FirstButton), {
+            Provider: LibraryProvider,
+        });
+
+        renderToStaticMarkup(
+            <CratisComponentsProvider
+                library={library}
+                rendererSetup={{ 'sample.license-configured': true }}
+            >
+                <CratisComponentsProvider library={library}>
+                    <span />
+                </CratisComponentsProvider>
+            </CratisComponentsProvider>,
+        );
+
+        observed.should.have.lengthOf(2);
+        observed[0].should.deep.equal({ 'sample.license-configured': true });
+        observed[1].should.equal(observed[0]);
+    });
+
     it('should not invoke the overlay environment during render without document', () => {
         let invocations = 0;
         const overlayEnvironment = {
diff --git a/Source/renderer/for_slot_types/slotTyping.fixture.ts b/Source/renderer/for_slot_types/slotTyping.fixture.ts
index a10922db..38361bbe 100644
--- a/Source/renderer/for_slot_types/slotTyping.fixture.ts
+++ b/Source/renderer/for_slot_types/slotTyping.fixture.ts
@@ -6,6 +6,7 @@ import type { CratisComponentsProviderProps } from '@cratis/components';
 import type {
     unstable_BehaviorMode,
     unstable_CratisSlots,
+    unstable_RendererSetup,
     unstable_SlotId,
     unstable_SlotMap,
     unstable_UiLibrary,
@@ -16,10 +17,20 @@ declare const TextInput: ComponentType<unstable_CratisSlots['common.textInput']>
 declare const Tooltip: ComponentType<unstable_CratisSlots['common.tooltip']>;
 declare const library: unstable_UiLibrary;
 
+declare module '@cratis/components/renderer' {
+    interface unstable_RendererSetupExtensions {
+        'sample.license-configured': boolean;
+    }
+}
+
+const rendererSetup: unstable_RendererSetup = {
+    'sample.license-configured': true,
+};
 const providerSetup: Omit<CratisComponentsProviderProps, 'children'> = {
     library,
     libraryMode: 'strict',
     rendererFallback: 'core',
+    rendererSetup,
 };
 const slotId: unstable_SlotId = 'common.button';
 const mode: unstable_BehaviorMode = 'presentation';
@@ -42,9 +53,19 @@ const wrongProps: unstable_SlotMap = {
     // @ts-expect-error A tooltip implementation cannot satisfy the button prop contract.
     'common.button': { mode: 'presentation', fidelity: 'native', render: Tooltip },
 };
+const wrongSetupValue: unstable_RendererSetup = {
+    // @ts-expect-error Setup attestations are booleans, never credentials.
+    'sample.license-configured': 'secret',
+};
+const unknownSetupKey: unstable_RendererSetup = {
+    // @ts-expect-error Setup keys must be declared by an adapter package.
+    'sample.unknown': true,
+};
 
 void providerSetup;
 void slotId;
 void slots;
 void unknownSlot;
 void wrongProps;
+void wrongSetupValue;
+void unknownSetupKey;
diff --git a/Source/renderer/index.ts b/Source/renderer/index.ts
index 015c6090..0721dc18 100644
--- a/Source/renderer/index.ts
+++ b/Source/renderer/index.ts
@@ -69,6 +69,7 @@ export {
     type unstable_RendererExtensions,
     type unstable_RendererProps,
     type unstable_RendererSetup,
+    type unstable_RendererSetupExtensions,
     type unstable_UiLibrary,
     type unstable_UiLibraryProviderProps,
 } from './manifest';
diff --git a/Source/renderer/manifest.ts b/Source/renderer/manifest.ts
index ed85b4ac..bef09278 100644
--- a/Source/renderer/manifest.ts
+++ b/Source/renderer/manifest.ts
@@ -6,13 +6,25 @@ import type { unstable_CapabilityId } from './capabilities';
 import type { unstable_AdapterDiagnostic } from './errors';
 import type { unstable_SlotId, unstable_SlotMap } from './slots';
 
+/**
+ * Open declaration-merging surface for renderer-specific, non-secret setup attestations.
+ * Adapter packages add boolean keys only; credentials never belong in this interface.
+ *
+ * @unstable Adapter-author contract. Expect changes until renderer conformance gates promote it.
+ */
+// Adapter packages add only non-secret boolean attestations through declaration merging.
+// biome-ignore lint/style/useConsistentTypeDefinitions: declaration merging requires an interface.
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface unstable_RendererSetupExtensions extends Record<never, never> {}
+
 /**
  * Non-secret application setup attestations supplied to a renderer provider.
- * Values are booleans by design so credentials cannot cross the Components boundary.
  *
  * @unstable Adapter-author contract. Expect changes until renderer conformance gates promote it.
  */
-export type unstable_RendererSetup = Readonly<Record<string, boolean>>;
+export type unstable_RendererSetup = Readonly<{
+    [Key in keyof unstable_RendererSetupExtensions]?: boolean;
+}>;
 
 /** Props supplied to a renderer library provider. */
 export interface unstable_UiLibraryProviderProps {

From 98db6ea42a02f69528aa31c19c9cdb40c0252d20 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Fri, 28 Aug 2026 10:03:50 +0200
Subject: [PATCH 224/267] Complete PrimeReact 11 adapter evidence

---
 Adapters/PrimeReact/CONFORMANCE.md            | 34 ++++---
 Adapters/PrimeReact/LICENSE                   | 10 +-
 Adapters/PrimeReact/README.md                 | 92 +++++++++++--------
 Adapters/PrimeReact/THIRD_PARTY_NOTICES.md    | 42 ++++-----
 ...ng_the_primereact_presentation_profile.tsx | 42 ++++++++-
 .../scripts/verify-packed-package.mjs         | 81 +++++++++++-----
 Adapters/PrimeReact/src/index.tsx             | 44 ++++++---
 .../PrimeReact/src/upstream-type-shim.d.ts    | 19 ++++
 8 files changed, 238 insertions(+), 126 deletions(-)
 create mode 100644 Adapters/PrimeReact/src/upstream-type-shim.d.ts

diff --git a/Adapters/PrimeReact/CONFORMANCE.md b/Adapters/PrimeReact/CONFORMANCE.md
index 720429a8..dd58e7ac 100644
--- a/Adapters/PrimeReact/CONFORMANCE.md
+++ b/Adapters/PrimeReact/CONFORMANCE.md
@@ -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. -->
 
-# MUI adapter conformance
+# PrimeReact 11 adapter conformance
 
 The adapter declares `stable-presentation/v1` at renderer ABI major 1. Repository evidence runs
 `@cratis/components.conformance` against all nine declared slots and requires 100 of 100 checks to
@@ -15,18 +15,28 @@ The bounded checks cover:
 - native names, values, submit/reset, disabled/read-only, validation, and autofill-shaped props;
 - one value-first `ChangeHandler` callback with `source: 'user'` and the originating native `Event`;
 - current and deprecated Button appearance mapping and canonical data attributes;
-- real MUI DOM identities for all nine slots;
-- deterministic SSR and mismatch-free hydration; and
+- real PrimeReact 11 styled DOM identities for all nine slots;
+- explicit switch semantics and hidden visual indicators;
+- deterministic SSR and mismatch-free hydration under an application-owned outer provider; and
 - package peers, archive boundaries, runtime loading, declaration hygiene, and strict Bundler and
-  NodeNext consumers with `skipLibCheck: false`.
+  NodeNext consumers with bounded upstream exceptions.
 
-The generic overlay absent/present check has no applicable slot in this nine-slot profile; it is
-reported as a bounded pass but supplies no MUI overlay evidence. Portable part names and typed `pt`
-destinations are preserved, while MUI may add wrappers or nest parts differently from the built-in
-renderer; undocumented descendant order and sibling selectors are not portable contracts.
+The setup gate separately proves `CRATIS-UI-1005` when the outer `PrimeReactProvider` context or
+the non-secret license attestation is missing. Automated component tests assemble PrimeReact's
+public configuration/theme contexts directly so the real license manager never runs; they contain
+and validate no key.
+
+The generic overlay absent/present check has no applicable slot in this nine-slot profile and
+supplies no PrimeReact overlay evidence. Portable part names and typed `pt` destinations are
+preserved, while PrimeReact may add wrappers or nest parts differently from the built-in renderer;
+undocumented descendant order and sibling selectors are not portable contracts.
+
+PrimeReact 11.1.0 currently publishes malformed generic declaration aliases. A compile-only,
+non-emitted shim keeps this adapter's own strict build enabled; the packed adapter declaration is
+vendor-free and the package verifier ensures no shim or vendor declaration leaks into it. Remove the
+shim when an allowed PrimeReact 11 release fixes those declarations.
 
 This is automated jsdom/axe and package evidence, not universal browser, visual, RTL, forced-colors,
-reduced-motion, or assistive-technology certification. MUI RTL requires host theme direction and an
-RTL-configured Emotion cache, which this adapter's provider ABI cannot create per request. MUI's
-CSS-in-JS output likewise requires host-specific, request-local Emotion cache and style extraction
-during SSR. No MUI X package is included or exercised.
+reduced-motion, license-validity, or assistive-technology certification. The application remains
+responsible for a valid PrimeUI license, provider/theme configuration, CSP, and any host-specific
+SSR style collection. PrimeReact 10 is not included or exercised.
diff --git a/Adapters/PrimeReact/LICENSE b/Adapters/PrimeReact/LICENSE
index eb0ae205..0652c82c 100644
--- a/Adapters/PrimeReact/LICENSE
+++ b/Adapters/PrimeReact/LICENSE
@@ -20,11 +20,5 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 
-Third-party MIT notices
------------------------
-MUI Core (@mui/material and Core support packages): Copyright (c) 2014
-Call-Em-All and Copyright (c) 2016-2026 MUI. Licensed under the MIT License
-above. MUI X is not included.
-
-Emotion (@emotion/react and @emotion/styled): Copyright (c) Emotion team and
-other contributors. Licensed under the MIT License above.
+PrimeReact and PrimeUX are peer-installed commercial software and are not
+covered by this MIT license. See THIRD_PARTY_NOTICES.md.
diff --git a/Adapters/PrimeReact/README.md b/Adapters/PrimeReact/README.md
index 668bc13c..c7fd9d2f 100644
--- a/Adapters/PrimeReact/README.md
+++ b/Adapters/PrimeReact/README.md
@@ -1,67 +1,79 @@
 <!-- Copyright (c) Cratis. All rights reserved. -->
 <!-- Licensed under the MIT license. See LICENSE file in the project root for full license information. -->
 
-# `@cratis/components.mui`
+# `@cratis/components.primereact`
 
-Material UI adapter for the nine stable presentation slots in the Cratis Components renderer ABI v1.
-The package is independently versioned and exports one manifest, `muiUiLibrary`.
+PrimeReact 11 adapter for the nine stable presentation slots in the Cratis Components renderer ABI
+v1. The package is independently versioned and exports one manifest, `primeReactUiLibrary`.
+PrimeReact 10 belongs to the separate `@cratis/components.primereact10` package.
 
 ## Install
 
 ```sh
-npm install @cratis/components.mui @cratis/components @mui/material @emotion/react @emotion/styled react react-dom
+npm install @cratis/components.primereact @cratis/components \
+  @primereact/core @primereact/ui primereact @primeuix/themes react react-dom
 ```
 
-Select the adapter on the application Components provider:
+The adapter uses PrimeReact 11 styled components. It covers Button, IconButton, TextInput,
+TextArea, Checkbox, Radio, Switch, ProgressBar, and Surface. The five atomic interaction slots are
+not part of this profile.
+
+## Application-owned provider and license
+
+PrimeReact 11 requires a license key. The application owns that key and passes it directly to its
+outer `PrimeReactProvider`; Components never receives, stores, copies, logs, serializes, or proxies
+it. PrimeReact's runtime context deliberately omits the key, so the application also passes one
+non-secret boolean attestation to `CratisComponentsProvider`.
 
 ```tsx
+import { PrimeReactProvider } from '@primereact/core/config';
+import Aura from '@primeuix/themes/aura';
 import { CratisComponentsProvider } from '@cratis/components';
-import { muiUiLibrary } from '@cratis/components.mui';
+import { primeReactUiLibrary } from '@cratis/components.primereact';
+
+const primeUiLicenseKey = import.meta.env.VITE_PRIMEUI_LICENSE_KEY;
 
 export const Application = () => (
-    <CratisComponentsProvider value={{ locale: 'en-US' }} library={muiUiLibrary}>
-        <main>Application content</main>
-    </CratisComponentsProvider>
+    <PrimeReactProvider license={primeUiLicenseKey} theme={{ preset: Aura }}>
+        <CratisComponentsProvider
+            value={{ locale: 'en-US' }}
+            library={primeReactUiLibrary}
+            rendererSetup={{
+                'cratis-primereact.license-configured': Boolean(primeUiLicenseKey),
+            }}>
+            <main>Application content</main>
+        </CratisComponentsProvider>
+    </PrimeReactProvider>
 );
 ```
 
-The adapter covers Button, IconButton, TextInput, TextArea, Checkbox, Radio, Switch,
-ProgressBar, and Surface. It deliberately excludes MUI X and does not implement the five atomic
-interaction slots.
-
-## Theme integration
+The adapter throws `CRATIS-UI-1005` synchronously when either the outer provider or the attestation
+is absent. Setting the attestation to `true` is an application assertion that the key was actually
+supplied; it is not a substitute for doing so. This prevents Components from creating a second,
+unlicensed provider or silently allowing PrimeUI's invalid-license notice.
 
-The manifest provider mounts the MUI `ThemeProvider`. An outer CSS-variable MUI theme is reused.
-An outer non-variable theme is converted to an equivalent CSS-variable theme so its palette and
-other values remain in force. Without an outer provider, MUI's default theme becomes a sane
-CSS-variable-enabled theme. The conversion is memoized and deterministic during server rendering.
+Obtain a key from [PrimeUI](https://primeui.store/primeui). For Vite, expose the application-owned
+key as `VITE_PRIMEUI_LICENSE_KEY` only in the client build that mounts PrimeReact. In CI or a
+publishing pipeline, map a protected `PRIMEUI_LICENSE_KEY` secret into that build variable without
+echoing it or writing it to package artifacts. The adapter package itself reads no environment
+variable and includes no key.
 
-Put application customization outside `CratisComponentsProvider`:
-
-```tsx
-<ThemeProvider theme={applicationTheme}>
-    <CratisComponentsProvider value={{ locale: 'en-US' }} library={muiUiLibrary}>
-        <Application />
-    </CratisComponentsProvider>
-</ThemeProvider>
-```
+## Styling and SSR
 
-The renderer provider ABI receives only `children`; it cannot receive an Emotion cache. SSR hosts
-must create an Emotion cache per request, mount Emotion's `CacheProvider` outside the Components
-provider, and extract critical styles from that same request-local cache. Sharing a cache between
-requests can leak styles and ordering. RTL additionally requires the host MUI theme direction and
-an Emotion cache configured with the RTL Stylis plugin. These are application/host integration
-concerns and do not justify a Core ABI change.
+The application chooses the PrimeReact theme on its outer provider. The package's static metadata
+uses `VITE_PRIMEUI_LICENSE_KEY` only as documentation/discovery metadata; no runtime lookup occurs.
+SSR and hydration are deterministic for the nine slots, but the host remains responsible for
+PrimeReact's provider, theme, CSP, and style collection/injection requirements.
 
 ## Peer policy
 
-MUI Core is bounded to `>=9 <10`, Emotion to `>=11 <12`, and React/ReactDOM to React 19. Vendor
-packages are peers; exact current versions are dev dependencies only for repository proof.
+PrimeReact packages are bounded to `>=11 <12`, PrimeUX themes to `>=3 <4`, and React/ReactDOM to
+React 19. Vendor packages are peers and are never bundled. Exact repository proof uses 11.1.0 and
+`@primeuix/themes` 3.0.0.
 
 The current `@cratis/components` peer `>=3.0.0 <4` is a temporary repository placeholder matching
-`@cratis/components.conformance` while the V4 source package is prepared. **It must be changed to
-the honest `>=4 <5` range before this adapter is published.** Publishing with the placeholder would
-misstate compatibility.
+the unreleased V4 source package. **It must become the honest `>=4 <5` range before publication.**
+Publishing with the placeholder would misstate compatibility.
 
-See [CONFORMANCE.md](./CONFORMANCE.md) for the bounded evidence and
-[THIRD_PARTY_NOTICES.md](./THIRD_PARTY_NOTICES.md) for upstream licenses.
+See [CONFORMANCE.md](./CONFORMANCE.md) for bounded evidence and
+[THIRD_PARTY_NOTICES.md](./THIRD_PARTY_NOTICES.md) for upstream licensing.
diff --git a/Adapters/PrimeReact/THIRD_PARTY_NOTICES.md b/Adapters/PrimeReact/THIRD_PARTY_NOTICES.md
index e00534b1..c608b3ae 100644
--- a/Adapters/PrimeReact/THIRD_PARTY_NOTICES.md
+++ b/Adapters/PrimeReact/THIRD_PARTY_NOTICES.md
@@ -3,33 +3,27 @@
 
 # Third-party notices
 
-This adapter interoperates with peer-installed software. It does not bundle the following packages.
+This MIT-licensed adapter interoperates with peer-installed PrimeUI software. It does not bundle or
+redistribute the vendor packages listed below.
 
-## MUI Core
+## PrimeReact 11 and PrimeUX themes
 
-MUI Core (`@mui/material` and its Core support packages) is Copyright (c) 2014 Call-Em-All and
-Copyright (c) 2016-2026 MUI and licensed under the MIT License.
+The proof matrix uses these peer packages:
 
-MUI X is explicitly excluded from this adapter.
+- `@primereact/core` 11.1.0
+- `@primereact/ui` 11.1.0
+- `primereact` 11.1.0
+- `@primeuix/themes` 3.0.0
 
-## Emotion
+Their package metadata states `SEE LICENSE IN LICENSE.md`. The supplied license describes PrimeUI
+as commercial software, requires a valid application-owned key, and provides separate Community
+and Commercial terms. Consult the terms shipped with the exact installed versions and the official
+pages:
 
-Emotion (`@emotion/react` and `@emotion/styled`) is Copyright (c) Emotion team and other
-contributors and licensed under the MIT License.
+- Community terms: <https://primeui.dev/licenses/community>
+- Commercial terms: <https://primeui.dev/licenses/commercial>
+- Key purchase/account page: <https://primeui.store/primeui>
 
-## MIT License text
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and
-associated documentation files (the "Software"), to deal in the Software without restriction,
-including without limitation the rights to use, copy, modify, merge, publish, distribute,
-sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial
-portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT
-NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
-NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES
-OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
-CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+PrimeReact 10 is not part of this adapter. The application is responsible for license eligibility,
+key configuration, renewals, and determining whether its distribution model needs additional
+permission. This notice records package facts for transparency and is not legal advice.
diff --git a/Adapters/PrimeReact/for_adapter/when_using_the_primereact_presentation_profile.tsx b/Adapters/PrimeReact/for_adapter/when_using_the_primereact_presentation_profile.tsx
index 2b0257ee..f7e0fab9 100644
--- a/Adapters/PrimeReact/for_adapter/when_using_the_primereact_presentation_profile.tsx
+++ b/Adapters/PrimeReact/for_adapter/when_using_the_primereact_presentation_profile.tsx
@@ -4,8 +4,16 @@
 import { expect } from 'chai';
 import { createElement, type ComponentType, type ReactNode } from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
-import { PrimeReactProvider } from '@primereact/core/config';
+import {
+    PrimeReactContext,
+    defaultConfigProps,
+} from '@primereact/core/config';
+import { LocaleProvider } from '@primereact/core/locale';
+import { PassThroughProvider } from '@primereact/core/passthrough';
+import { ThemeProvider as PrimeThemeProvider } from '@primereact/core/theme';
 import Aura from '@primeuix/themes/aura';
+import { CratisComponentsProvider } from '@cratis/components';
+import { Button } from '@cratis/components/Common';
 import { runConformance, type ConformanceReport } from '@cratis/components.conformance';
 import {
     unstable_AdapterError,
@@ -27,8 +35,20 @@ const stablePresentationSlots = [
     'common.surface',
 ] as const;
 
+// SAFETY: PrimeReact's public context type includes the provider input shape, while its runtime
+// value deliberately omits the license and adds mutable setters. These nine presentation fixtures
+// need only the documented configuration values; using public contexts avoids invoking the real
+// license manager with a fake credential.
+const primeReactFixtureConfig = Object.freeze({ ...defaultConfigProps });
+
 const PrimeApplicationProvider = ({ children }: { readonly children: ReactNode }) => (
-    <PrimeReactProvider theme={{ preset: Aura }}>{children}</PrimeReactProvider>
+    <PrimeReactContext.Provider value={primeReactFixtureConfig}>
+        <LocaleProvider lang='en'>
+            <PassThroughProvider mergeSections mergeProps>
+                <PrimeThemeProvider preset={Aura}>{children}</PrimeThemeProvider>
+            </PassThroughProvider>
+        </LocaleProvider>
+    </PrimeReactContext.Provider>
 );
 
 const renderSlot = (
@@ -223,6 +243,24 @@ describe('when using the PrimeReact stable presentation profile', () => {
         expect(configured).to.contain('data-configured');
     });
 
+    it('should pass the non-secret setup attestation through the Components provider', () => {
+        const markup = renderToStaticMarkup(
+            <PrimeApplicationProvider>
+                <CratisComponentsProvider
+                    library={primeReactUiLibrary}
+                    rendererSetup={{
+                        'cratis-primereact.license-configured': true,
+                    }}
+                >
+                    <Button label='Configured action' />
+                </CratisComponentsProvider>
+            </PrimeApplicationProvider>,
+        );
+
+        expect(markup).to.contain('p-button');
+        expect(markup).to.contain('Configured action');
+    });
+
     it('should declare only bounded peer-hosted PrimeReact 11 vendors', () => {
         expect(packageJson).not.to.have.property('dependencies');
         expect(packageJson.peerDependencies).to.deep.equal({
diff --git a/Adapters/PrimeReact/scripts/verify-packed-package.mjs b/Adapters/PrimeReact/scripts/verify-packed-package.mjs
index aa4be6e3..c3c0719e 100644
--- a/Adapters/PrimeReact/scripts/verify-packed-package.mjs
+++ b/Adapters/PrimeReact/scripts/verify-packed-package.mjs
@@ -21,7 +21,9 @@ import {
 
 const packageDirectory = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
 const repositoryDirectory = path.resolve(packageDirectory, '../..');
-const temporary = mkdtempSync(path.join(os.tmpdir(), 'cratis-mui-package-'));
+const temporary = mkdtempSync(
+    path.join(os.tmpdir(), 'cratis-primereact-package-'),
+);
 
 const run = (command, arguments_, cwd = packageDirectory) => {
     const result = spawnSync(command, arguments_, { cwd, encoding: 'utf8' });
@@ -118,9 +120,10 @@ try {
 
     const expectedPeers = {
         '@cratis/components': '>=3.0.0 <4',
-        '@emotion/react': '>=11 <12',
-        '@emotion/styled': '>=11 <12',
-        '@mui/material': '>=9 <10',
+        '@primereact/core': '>=11 <12',
+        '@primereact/ui': '>=11 <12',
+        '@primeuix/themes': '>=3 <4',
+        primereact: '>=11 <12',
         react: '^19.0.0',
         'react-dom': '^19.0.0',
     };
@@ -144,13 +147,25 @@ try {
         );
     }
     const serializedPackage = JSON.stringify(packageJson);
-    if (serializedPackage.includes('@mui/x-')) {
-        throw new Error('MUI X must remain excluded from every package boundary.');
+    if (serializedPackage.includes('primereact10')) {
+        throw new Error(
+            'PrimeReact 10 must remain in its separate adapter package.',
+        );
+    }
+    const expectedLicense = {
+        spdx: 'LicenseRef-PrimeUI',
+        requiresKey: true,
+        keyEnv: 'VITE_PRIMEUI_LICENSE_KEY',
+        url: 'https://primeui.store/primeui',
+    };
+    if (JSON.stringify(packageJson.cratis?.license) !== JSON.stringify(expectedLicense)) {
+        throw new Error('Packed static metadata does not preserve the key-gated license policy.');
     }
 
     const runtime = readFileSync(path.join(unpackedPackage, 'dist/index.js'), 'utf8');
     for (const requiredImport of [
-        '@mui/material/',
+        '@primereact/core/',
+        '@primereact/ui/',
         '@cratis/components/',
         'react/jsx-runtime',
     ]) {
@@ -161,9 +176,11 @@ try {
         }
     }
     for (const bundledSignature of [
-        'function createThemeNoVars',
-        'function emotionStyled',
-        'MUI: The `styles` argument',
+        'showInvalidLicenseBanner',
+        'function verifyLicense',
+        'Invalid PrimeUI License',
+        'VITE_PRIMEUI_LICENSE_KEY',
+        'primeui.store/primeui',
     ]) {
         if (runtime.includes(bundledSignature)) {
             throw new Error(
@@ -184,10 +201,8 @@ try {
     );
     for (const forbidden of [
         /\bany\b/u,
-        /@mui\//u,
-        /@emotion\//u,
-        /Mui(?:Button|Checkbox|IconButton|InputBase|LinearProgress|Paper|Radio|Switch|Surface|Text)/u,
-        /export\s+(?:type|interface|class|function|default)\b/u,
+        /from\s+['"](?:@primereact|@primeui|@primeuix|primereact)(?:\/|['"])/u,
+        /export\s+(?:type|class|function|default)\b/u,
     ]) {
         if (forbidden.test(declarations)) {
             throw new Error(`Public declarations contain forbidden '${forbidden}'.`);
@@ -196,15 +211,27 @@ try {
     const exportedValues = declarations.match(/export\s+declare\s+const\s+/gu) ?? [];
     if (
         exportedValues.length !== 1 ||
-        !/export declare const muiUiLibrary: unstable_UiLibrary;/u.test(declarations)
+        !/export declare const primeReactUiLibrary: unstable_UiLibrary;/u.test(
+            declarations,
+        )
     ) {
         throw new Error(
             'Public declarations must expose exactly one UiLibrary-typed value.',
         );
     }
+    if (
+        !declarations.includes("'cratis-primereact.license-configured': boolean")
+    ) {
+        throw new Error(
+            'Public declarations must type the non-secret license attestation key.',
+        );
+    }
 
     const nodeModules = path.join(temporary, 'node_modules');
-    link(unpackedPackage, path.join(nodeModules, '@cratis/components.mui'));
+    link(
+        unpackedPackage,
+        path.join(nodeModules, '@cratis/components.primereact'),
+    );
     link(unpackedCorePackage, path.join(nodeModules, '@cratis/components'));
     for (const dependency of ['react', 'react-dom']) {
         link(
@@ -228,28 +255,32 @@ try {
             path.join(nodeModules, dependency),
         );
     }
-    for (const dependency of ['react', 'styled']) {
+    for (const dependency of ['core', 'ui']) {
         link(
-            path.join(repositoryDirectory, 'node_modules/@emotion', dependency),
-            path.join(nodeModules, '@emotion', dependency),
+            path.join(repositoryDirectory, 'node_modules/@primereact', dependency),
+            path.join(nodeModules, '@primereact', dependency),
         );
     }
     link(
-        path.join(repositoryDirectory, 'node_modules/@mui/material'),
-        path.join(nodeModules, '@mui/material'),
+        path.join(repositoryDirectory, 'node_modules/@primeuix/themes'),
+        path.join(nodeModules, '@primeuix/themes'),
+    );
+    link(
+        path.join(repositoryDirectory, 'node_modules/primereact'),
+        path.join(nodeModules, 'primereact'),
     );
 
     writeFileSync(
         path.join(temporary, 'runtime.mjs'),
-        "const api = await import('@cratis/components.mui');\n" +
-            "if (Object.keys(api).join(',') !== 'muiUiLibrary') throw new Error('Packed runtime must export only muiUiLibrary.');\n" +
-            "if (api.muiUiLibrary.id !== 'cratis-mui') throw new Error('Packed manifest did not load with explicit peers.');\n",
+        "const api = await import('@cratis/components.primereact');\n" +
+            "if (Object.keys(api).join(',') !== 'primeReactUiLibrary') throw new Error('Packed runtime must export only primeReactUiLibrary.');\n" +
+            "if (api.primeReactUiLibrary.id !== 'cratis-primereact') throw new Error('Packed manifest did not load with explicit peers.');\n",
     );
     run(process.execPath, ['runtime.mjs'], temporary);
 
     writeFileSync(
         path.join(temporary, 'fixture.ts'),
-        "import { muiUiLibrary } from '@cratis/components.mui';\nvoid muiUiLibrary;\n",
+        "import { primeReactUiLibrary } from '@cratis/components.primereact';\nvoid primeReactUiLibrary;\n",
     );
     writeFileSync(
         path.join(temporary, 'jsx-shim.d.ts'),
diff --git a/Adapters/PrimeReact/src/index.tsx b/Adapters/PrimeReact/src/index.tsx
index a42eb0c4..d6a89146 100644
--- a/Adapters/PrimeReact/src/index.tsx
+++ b/Adapters/PrimeReact/src/index.tsx
@@ -50,6 +50,13 @@ import {
     type unstable_UiLibraryProviderProps,
 } from '@cratis/components/renderer';
 
+declare module '@cratis/components/renderer' {
+    interface unstable_RendererSetupExtensions {
+        /** Application attests that its outer PrimeReactProvider received a license key. */
+        'cratis-primereact.license-configured': boolean;
+    }
+}
+
 const profileSlots = Object.freeze([
     'common.button',
     'common.iconButton',
@@ -717,27 +724,34 @@ const PrimeProgressSlot = ({
     const determinate = mode === 'determinate';
     const busy = !determinate || boundedValue < 100;
     return (
-        <PrimeProgressBar.Root
-            as='div'
-            value={boundedValue}
-            mode={mode}
-            aria-label={ariaLabelledBy ? undefined : ariaLabel}
-            aria-labelledby={ariaLabelledBy}
+        <div
             className={classNames('cratis-primereact-progress', className)}
             data-cratis-part='root'
             data-mode={mode}
             data-busy={busy || undefined}
             data-loading={!determinate || undefined}
         >
-            <PrimeProgressBar.Track data-cratis-part='indicator'>
-                <PrimeProgressBar.Indicator />
-            </PrimeProgressBar.Track>
-            {determinate && showValue ? (
-                <PrimeProgressBar.Label data-cratis-part='label'>
-                    {boundedValue}%
-                </PrimeProgressBar.Label>
-            ) : null}
-        </PrimeProgressBar.Root>
+            <PrimeProgressBar.Root
+                as='div'
+                value={boundedValue}
+                mode={mode}
+                pt={{
+                    root: {
+                        'aria-label': ariaLabelledBy ? undefined : ariaLabel,
+                        'aria-labelledby': ariaLabelledBy,
+                    },
+                }}
+            >
+                <PrimeProgressBar.Track data-cratis-part='indicator'>
+                    <PrimeProgressBar.Indicator />
+                </PrimeProgressBar.Track>
+                {determinate && showValue ? (
+                    <PrimeProgressBar.Label data-cratis-part='label'>
+                        {boundedValue}%
+                    </PrimeProgressBar.Label>
+                ) : null}
+            </PrimeProgressBar.Root>
+        </div>
     );
 };
 
diff --git a/Adapters/PrimeReact/src/upstream-type-shim.d.ts b/Adapters/PrimeReact/src/upstream-type-shim.d.ts
new file mode 100644
index 00000000..85e6da7e
--- /dev/null
+++ b/Adapters/PrimeReact/src/upstream-type-shim.d.ts
@@ -0,0 +1,19 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { ComponentInstance } from '@primereact/types/core';
+import type { ElementType, ReactElement } from 'react';
+
+/**
+ * @internal Compile-only bridge for exact upstream declaration defects in PrimeReact 11.1.0 and
+ * Arc React 22.4.0. The adapter's packed declaration never exposes these aliases.
+ */
+declare global {
+    type I_1 = ComponentInstance;
+    type P = unknown;
+    type T_1 = ElementType;
+
+    namespace JSX {
+        type Element = ReactElement;
+    }
+}

From e277fbdf0b31bac3eeffdfcb4ff68a3708f2c932 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Fri, 28 Aug 2026 10:13:18 +0200
Subject: [PATCH 225/267] Harden renderer setup attestations

---
 .gitignore                                    |  1 +
 Adapters/PrimeReact/CONFORMANCE.md            |  6 +-
 Adapters/PrimeReact/README.md                 |  3 +-
 ...ng_the_primereact_presentation_profile.tsx |  4 +-
 Source/renderer/README.md                     |  5 +-
 Source/renderer/RendererContext.tsx           | 11 ++-
 .../when_using_provider_setup.tsx             | 69 +++++++++++++++++++
 7 files changed, 91 insertions(+), 8 deletions(-)

diff --git a/.gitignore b/.gitignore
index 8b9475c9..0f91d373 100644
--- a/.gitignore
+++ b/.gitignore
@@ -240,6 +240,7 @@ node_modules/
 typings/
 *.d.ts
 !*.scss.d.ts
+!Adapters/**/src/upstream-*-shim.d.ts
 
 # Visual Studio 6 build log
 *.plg
diff --git a/Adapters/PrimeReact/CONFORMANCE.md b/Adapters/PrimeReact/CONFORMANCE.md
index dd58e7ac..f058a9e1 100644
--- a/Adapters/PrimeReact/CONFORMANCE.md
+++ b/Adapters/PrimeReact/CONFORMANCE.md
@@ -33,8 +33,10 @@ undocumented descendant order and sibling selectors are not portable contracts.
 
 PrimeReact 11.1.0 currently publishes malformed generic declaration aliases. A compile-only,
 non-emitted shim keeps this adapter's own strict build enabled; the packed adapter declaration is
-vendor-free and the package verifier ensures no shim or vendor declaration leaks into it. Remove the
-shim when an allowed PrimeReact 11 release fixes those declarations.
+vendor-free and the package verifier ensures no shim or vendor declaration leaks into it. Its
+strict external fixtures also use the declaration-only React JSX bridge required by the exact Arc
+React 22.4 upstream exception, while Core's stale-exception gate must still reproduce that issue.
+Remove each bridge when its allowed upstream release fixes the corresponding declarations.
 
 This is automated jsdom/axe and package evidence, not universal browser, visual, RTL, forced-colors,
 reduced-motion, license-validity, or assistive-technology certification. The application remains
diff --git a/Adapters/PrimeReact/README.md b/Adapters/PrimeReact/README.md
index c7fd9d2f..5e853c4c 100644
--- a/Adapters/PrimeReact/README.md
+++ b/Adapters/PrimeReact/README.md
@@ -5,7 +5,8 @@
 
 PrimeReact 11 adapter for the nine stable presentation slots in the Cratis Components renderer ABI
 v1. The package is independently versioned and exports one manifest, `primeReactUiLibrary`.
-PrimeReact 10 belongs to the separate `@cratis/components.primereact10` package.
+PrimeReact 10 is out of scope here and remains a required, separate
+`@cratis/components.primereact10` implementation before V4 completion.
 
 ## Install
 
diff --git a/Adapters/PrimeReact/for_adapter/when_using_the_primereact_presentation_profile.tsx b/Adapters/PrimeReact/for_adapter/when_using_the_primereact_presentation_profile.tsx
index f7e0fab9..caf9c204 100644
--- a/Adapters/PrimeReact/for_adapter/when_using_the_primereact_presentation_profile.tsx
+++ b/Adapters/PrimeReact/for_adapter/when_using_the_primereact_presentation_profile.tsx
@@ -288,7 +288,7 @@ describe('when using the PrimeReact stable presentation profile', () => {
             keyEnv: 'VITE_PRIMEUI_LICENSE_KEY',
             url: 'https://primeui.store/primeui',
         });
-        expect(JSON.stringify(primeReactUiLibrary)).not.to.contain('license');
-        expect(JSON.stringify(primeReactUiLibrary)).not.to.contain('keyEnv');
+        expect(Object.hasOwn(primeReactUiLibrary, 'license')).to.equal(false);
+        expect(Object.hasOwn(primeReactUiLibrary, 'keyEnv')).to.equal(false);
     });
 });
diff --git a/Source/renderer/README.md b/Source/renderer/README.md
index 8040ac72..b1c14423 100644
--- a/Source/renderer/README.md
+++ b/Source/renderer/README.md
@@ -28,8 +28,9 @@ high-order composites and must never be registered as substitutes for these slot
 
 Renderer packages may declaration-merge non-secret boolean keys into
 `unstable_RendererSetupExtensions`. Applications pass those attestations through
-`CratisComponentsProvider.rendererSetup`; the root freezes them, nested providers inherit them, and
-renderer scopes forward them to a library Provider. Credentials, license strings, caches, provider
+`CratisComponentsProvider.rendererSetup`; the root freezes them, nested providers inherit them
+unless an explicit nested setup replaces the map wholesale, and renderer scopes forward them to a
+library Provider. Credentials, license strings, caches, provider
 instances, and other values must never cross this boundary. The attestation says only that the host
 completed its own setup and lets a renderer fail closed when its upstream context cannot expose
 whether setup occurred.
diff --git a/Source/renderer/RendererContext.tsx b/Source/renderer/RendererContext.tsx
index b9bf4330..d6d4888e 100644
--- a/Source/renderer/RendererContext.tsx
+++ b/Source/renderer/RendererContext.tsx
@@ -71,6 +71,15 @@ export const unstable_RendererContext = createContext<
 
 const emptyRendererSetup = Object.freeze({}) as unstable_RendererSetup;
 
+const freezeRendererSetup = (
+    setup: Readonly<Record<string, unknown>>,
+): unstable_RendererSetup =>
+    Object.freeze(
+        Object.fromEntries(
+            Object.entries(setup).filter(([, value]) => typeof value === 'boolean'),
+        ),
+    ) as unstable_RendererSetup;
+
 const nestedLibraryDiagnostic = (
     library: unstable_UiLibrary,
 ): unstable_AdapterDiagnostic => ({
@@ -95,7 +104,7 @@ export const unstable_RendererRoot = ({
     const setup = useMemo(
         () =>
             rendererSetup
-                ? Object.freeze({ ...rendererSetup })
+                ? freezeRendererSetup(rendererSetup)
                 : (parent?.rendererSetup ?? emptyRendererSetup),
         [parent?.rendererSetup, rendererSetup],
     );
diff --git a/Source/renderer/for_resolution/when_using_provider_setup.tsx b/Source/renderer/for_resolution/when_using_provider_setup.tsx
index 4e78da12..a9addb9c 100644
--- a/Source/renderer/for_resolution/when_using_provider_setup.tsx
+++ b/Source/renderer/for_resolution/when_using_provider_setup.tsx
@@ -4,9 +4,11 @@
 import { renderToStaticMarkup } from 'react-dom/server';
 import { CratisComponentsProvider } from '../../Common/CratisComponentsProvider';
 import {
+    unstable_RendererScope as RendererScope,
     unstable_useCapability,
     unstable_useOverlayEnvironment,
     unstable_useRendererId,
+    type unstable_RendererSetup,
 } from '..';
 import { buttonSlot, createTestLibrary, FirstButton } from './testLibrary';
 
@@ -88,6 +90,39 @@ describe('when using renderer provider setup', () => {
         Object.isFrozen(observedSetup).should.equal(true);
     });
 
+    it('should discard non-boolean runtime setup values before a library provider sees them', () => {
+        let observedSetup: Readonly<Record<string, boolean>> | undefined;
+        const LibraryProvider = ({
+            children,
+            setup,
+        }: {
+            children: React.ReactNode;
+            setup: Readonly<Record<string, boolean>>;
+        }) => {
+            observedSetup = setup;
+            return <>{children}</>;
+        };
+        const library = createTestLibrary('configured', buttonSlot(FirstButton), {
+            Provider: LibraryProvider,
+        });
+        // SAFETY: Deliberately models an untyped JavaScript caller attempting to cross the
+        // boolean-only boundary with credential-shaped data.
+        const unsafeSetup = {
+            'sample.license-configured': true,
+            'sample.credential': 'example.invalid/not-a-credential',
+        } as unknown as unstable_RendererSetup;
+
+        renderToStaticMarkup(
+            <CratisComponentsProvider library={library} rendererSetup={unsafeSetup}>
+                <span />
+            </CratisComponentsProvider>,
+        );
+
+        observedSetup!.should.deep.equal({
+            'sample.license-configured': true,
+        });
+    });
+
     it('should inherit frozen setup attestations through a nested provider', () => {
         const observed: Readonly<Record<string, boolean>>[] = [];
         const LibraryProvider = ({
@@ -120,6 +155,40 @@ describe('when using renderer provider setup', () => {
         observed[1].should.equal(observed[0]);
     });
 
+    it('should forward root setup attestations to a scoped library provider', () => {
+        let observedSetup: Readonly<Record<string, boolean>> | undefined;
+        const ScopedProvider = ({
+            children,
+            setup,
+        }: {
+            children: React.ReactNode;
+            setup: Readonly<Record<string, boolean>>;
+        }) => {
+            observedSetup = setup;
+            return <>{children}</>;
+        };
+        const rootLibrary = createTestLibrary('root', buttonSlot(FirstButton));
+        const scopedLibrary = createTestLibrary('scoped', buttonSlot(FirstButton), {
+            Provider: ScopedProvider,
+        });
+
+        renderToStaticMarkup(
+            <CratisComponentsProvider
+                library={rootLibrary}
+                rendererSetup={{ 'sample.license-configured': true }}
+            >
+                <RendererScope use={scopedLibrary} only={['common.button']}>
+                    <span />
+                </RendererScope>
+            </CratisComponentsProvider>,
+        );
+
+        observedSetup!.should.deep.equal({
+            'sample.license-configured': true,
+        });
+        Object.isFrozen(observedSetup).should.equal(true);
+    });
+
     it('should not invoke the overlay environment during render without document', () => {
         let invocations = 0;
         const overlayEnvironment = {

From 2753f17b5a04e5c3b1490b16c2e3ccb7466f9161 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Fri, 28 Aug 2026 10:15:14 +0200
Subject: [PATCH 226/267] Pass setup to direct MUI provider fixtures

---
 .../for_adapter/when_using_the_mui_presentation_profile.tsx   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/Adapters/Mui/for_adapter/when_using_the_mui_presentation_profile.tsx b/Adapters/Mui/for_adapter/when_using_the_mui_presentation_profile.tsx
index 8c21bc50..152ab6f5 100644
--- a/Adapters/Mui/for_adapter/when_using_the_mui_presentation_profile.tsx
+++ b/Adapters/Mui/for_adapter/when_using_the_mui_presentation_profile.tsx
@@ -172,7 +172,7 @@ describe('when using the MUI stable presentation profile', () => {
     it('should provide CSS variables only when no outer MUI theme exists', () => {
         let defaultSeen: Theme | undefined;
         const defaultMarkup = renderToStaticMarkup(
-            <Provider>
+            <Provider setup={{}}>
                 <ThemeProbe observe={(theme) => (defaultSeen = theme)} />
             </Provider>,
         );
@@ -183,7 +183,7 @@ describe('when using the MUI stable presentation profile', () => {
         let nestedSeen: Theme | undefined;
         renderToStaticMarkup(
             <ThemeProvider theme={outerTheme}>
-                <Provider>
+                <Provider setup={{}}>
                     <ThemeProbe observe={(theme) => (nestedSeen = theme)} />
                 </Provider>
             </ThemeProvider>,

From 0c85436f62c3cf04d46b50921244c2ebe946348e Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Fri, 28 Aug 2026 10:17:07 +0200
Subject: [PATCH 227/267] Document renderer setup attestations

---
 .../Common/cratis-components-provider.md      | 26 +++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/Documentation/Common/cratis-components-provider.md b/Documentation/Common/cratis-components-provider.md
index 1f6985f1..a34726dd 100644
--- a/Documentation/Common/cratis-components-provider.md
+++ b/Documentation/Common/cratis-components-provider.md
@@ -3,7 +3,7 @@ title: CratisComponentsProvider
 description: Configure locale, Components-owned labels, and the app-wide toast region.
 ---
 
-`CratisComponentsProvider` is the application root for renderer-independent Components configuration. It does not provide a theme runtime or third-party renderer context; styling is owned by CSS.
+`CratisComponentsProvider` is the application root for Components-owned locale/messages and the experimental renderer boundary. Its `value` remains renderer-independent and it does not configure an application's direct third-party component usage; a selected adapter may mount its own provider boundary. Styling remains owned by CSS or by the explicitly selected adapter.
 
 ## Basic setup
 
@@ -49,7 +49,29 @@ A small inline object as in the basic example is inexpensive; the stable form ma
 
 Unknown Components 3 renderer options are intentionally a type error. Remove `license`, `theme`, `defaults`, global `pt`, `ptOptions`, `ripple`, `unstyled`, and renderer z-index settings rather than compiling a provider whose visual configuration does nothing. Configure any remaining direct Prime provider independently.
 
-Every group follows the same precedence: a named component prop (or a component's own `labels`/`filterLabels` override) wins, then the matching provider message, then the English default shown above. Per-instance overrides keep working exactly as before — the provider only fills gaps a call site left unset.
+## Experimental renderer selection
+
+The renderer contract remains `unstable_` while concrete adapters falsify it. The provider exposes:
+
+| Prop                 | Purpose                                                                                              |
+| -------------------- | ---------------------------------------------------------------------------------------------------- |
+| `library`            | One renderer manifest or an ordered last-wins composition. Omit it for the built-in default.        |
+| `libraryMode`        | `strict` rejects invalid profile promises; `degrade` reports them after mount.                       |
+| `rendererFallback`   | `core` keeps the built-in slot fallback; `throw` rejects fallback.                                   |
+| `overlayEnvironment` | Stable, post-commit portal-container lookup for overlay-owning implementations.                      |
+| `rendererSetup`      | Adapter-declared, non-secret boolean setup attestations. Never put credentials, keys, or caches here. |
+
+Adapter packages declaration-merge their own `rendererSetup` keys, so importing an adapter gives
+typed setup without adding vendor fields to Core. The provider copies and freezes boolean entries,
+discards non-boolean runtime values, inherits the map through nested providers unless a nested map
+replaces it wholesale, and forwards it through `RendererScope`.
+
+A key-gated renderer still receives its key through the application's own outer vendor provider.
+For example, the PrimeReact 11 adapter receives only a boolean assertion that the application
+completed that setup; Components never receives the key itself. See the adapter package README for
+the exact provider and build-environment wiring.
+
+Every message group follows the same precedence: a named component prop (or a component's own `labels`/`filterLabels` override) wins, then the matching provider message, then the English default shown above. Per-instance overrides keep working exactly as before — the provider only fills gaps a call site left unset.
 
 ## Localize owned labels
 

From b68817ec3a6bf034b199cf2688c320dcda36f17a Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Fri, 28 Aug 2026 10:21:24 +0200
Subject: [PATCH 228/267] Bound PrimeReact evidence claims

---
 Adapters/PrimeReact/CONFORMANCE.md |  3 ++-
 Adapters/PrimeReact/README.md      | 17 ++++++++++-------
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/Adapters/PrimeReact/CONFORMANCE.md b/Adapters/PrimeReact/CONFORMANCE.md
index f058a9e1..cfee4415 100644
--- a/Adapters/PrimeReact/CONFORMANCE.md
+++ b/Adapters/PrimeReact/CONFORMANCE.md
@@ -17,7 +17,8 @@ The bounded checks cover:
 - current and deprecated Button appearance mapping and canonical data attributes;
 - real PrimeReact 11 styled DOM identities for all nine slots;
 - explicit switch semantics and hidden visual indicators;
-- deterministic SSR and mismatch-free hydration under an application-owned outer provider; and
+- deterministic SSR for all nine slots and mismatch-free representative Button hydration under an
+  application-owned outer provider; and
 - package peers, archive boundaries, runtime loading, declaration hygiene, and strict Bundler and
   NodeNext consumers with bounded upstream exceptions.
 
diff --git a/Adapters/PrimeReact/README.md b/Adapters/PrimeReact/README.md
index 5e853c4c..b353a0aa 100644
--- a/Adapters/PrimeReact/README.md
+++ b/Adapters/PrimeReact/README.md
@@ -41,7 +41,8 @@ export const Application = () => (
             library={primeReactUiLibrary}
             rendererSetup={{
                 'cratis-primereact.license-configured': Boolean(primeUiLicenseKey),
-            }}>
+            }}
+        >
             <main>Application content</main>
         </CratisComponentsProvider>
     </PrimeReactProvider>
@@ -50,21 +51,23 @@ export const Application = () => (
 
 The adapter throws `CRATIS-UI-1005` synchronously when either the outer provider or the attestation
 is absent. Setting the attestation to `true` is an application assertion that the key was actually
-supplied; it is not a substitute for doing so. This prevents Components from creating a second,
-unlicensed provider or silently allowing PrimeUI's invalid-license notice.
+supplied; it is not a substitute for doing so. This prevents Components from creating a second
+provider and fails before adapter content when setup was not attested. The adapter does not validate
+the key and cannot guarantee that PrimeUI will accept it or omit its own license notice.
 
 Obtain a key from [PrimeUI](https://primeui.store/primeui). For Vite, expose the application-owned
 key as `VITE_PRIMEUI_LICENSE_KEY` only in the client build that mounts PrimeReact. In CI or a
 publishing pipeline, map a protected `PRIMEUI_LICENSE_KEY` secret into that build variable without
-echoing it or writing it to package artifacts. The adapter package itself reads no environment
-variable and includes no key.
+echoing it or writing it to package artifacts. The adapter package itself reads no license
+environment variable and includes no key.
 
 ## Styling and SSR
 
 The application chooses the PrimeReact theme on its outer provider. The package's static metadata
 uses `VITE_PRIMEUI_LICENSE_KEY` only as documentation/discovery metadata; no runtime lookup occurs.
-SSR and hydration are deterministic for the nine slots, but the host remains responsible for
-PrimeReact's provider, theme, CSP, and style collection/injection requirements.
+All nine slots produce deterministic SSR output, and the representative Button fixture hydrates
+without a mismatch. The host remains responsible for PrimeReact's provider, theme, CSP, and style
+collection/injection requirements.
 
 ## Peer policy
 

From b84e0626fc8d7904512ad4d223108045670a7fa0 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Fri, 28 Aug 2026 10:26:27 +0200
Subject: [PATCH 229/267] Format PrimeReact review fixes

---
 ...ng_the_primereact_presentation_profile.tsx |  5 +----
 .../scripts/verify-packed-package.mjs         | 21 +++++++------------
 .../Common/cratis-components-provider.md      | 12 +++++------
 3 files changed, 14 insertions(+), 24 deletions(-)

diff --git a/Adapters/PrimeReact/for_adapter/when_using_the_primereact_presentation_profile.tsx b/Adapters/PrimeReact/for_adapter/when_using_the_primereact_presentation_profile.tsx
index caf9c204..34d4b0c0 100644
--- a/Adapters/PrimeReact/for_adapter/when_using_the_primereact_presentation_profile.tsx
+++ b/Adapters/PrimeReact/for_adapter/when_using_the_primereact_presentation_profile.tsx
@@ -4,10 +4,7 @@
 import { expect } from 'chai';
 import { createElement, type ComponentType, type ReactNode } from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
-import {
-    PrimeReactContext,
-    defaultConfigProps,
-} from '@primereact/core/config';
+import { PrimeReactContext, defaultConfigProps } from '@primereact/core/config';
 import { LocaleProvider } from '@primereact/core/locale';
 import { PassThroughProvider } from '@primereact/core/passthrough';
 import { ThemeProvider as PrimeThemeProvider } from '@primereact/core/theme';
diff --git a/Adapters/PrimeReact/scripts/verify-packed-package.mjs b/Adapters/PrimeReact/scripts/verify-packed-package.mjs
index c3c0719e..77d0b869 100644
--- a/Adapters/PrimeReact/scripts/verify-packed-package.mjs
+++ b/Adapters/PrimeReact/scripts/verify-packed-package.mjs
@@ -21,9 +21,7 @@ import {
 
 const packageDirectory = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
 const repositoryDirectory = path.resolve(packageDirectory, '../..');
-const temporary = mkdtempSync(
-    path.join(os.tmpdir(), 'cratis-primereact-package-'),
-);
+const temporary = mkdtempSync(path.join(os.tmpdir(), 'cratis-primereact-package-'));
 
 const run = (command, arguments_, cwd = packageDirectory) => {
     const result = spawnSync(command, arguments_, { cwd, encoding: 'utf8' });
@@ -148,9 +146,7 @@ try {
     }
     const serializedPackage = JSON.stringify(packageJson);
     if (serializedPackage.includes('primereact10')) {
-        throw new Error(
-            'PrimeReact 10 must remain in its separate adapter package.',
-        );
+        throw new Error('PrimeReact 10 must remain in its separate adapter package.');
     }
     const expectedLicense = {
         spdx: 'LicenseRef-PrimeUI',
@@ -159,7 +155,9 @@ try {
         url: 'https://primeui.store/primeui',
     };
     if (JSON.stringify(packageJson.cratis?.license) !== JSON.stringify(expectedLicense)) {
-        throw new Error('Packed static metadata does not preserve the key-gated license policy.');
+        throw new Error(
+            'Packed static metadata does not preserve the key-gated license policy.',
+        );
     }
 
     const runtime = readFileSync(path.join(unpackedPackage, 'dist/index.js'), 'utf8');
@@ -219,19 +217,14 @@ try {
             'Public declarations must expose exactly one UiLibrary-typed value.',
         );
     }
-    if (
-        !declarations.includes("'cratis-primereact.license-configured': boolean")
-    ) {
+    if (!declarations.includes("'cratis-primereact.license-configured': boolean")) {
         throw new Error(
             'Public declarations must type the non-secret license attestation key.',
         );
     }
 
     const nodeModules = path.join(temporary, 'node_modules');
-    link(
-        unpackedPackage,
-        path.join(nodeModules, '@cratis/components.primereact'),
-    );
+    link(unpackedPackage, path.join(nodeModules, '@cratis/components.primereact'));
     link(unpackedCorePackage, path.join(nodeModules, '@cratis/components'));
     for (const dependency of ['react', 'react-dom']) {
         link(
diff --git a/Documentation/Common/cratis-components-provider.md b/Documentation/Common/cratis-components-provider.md
index a34726dd..45dc6726 100644
--- a/Documentation/Common/cratis-components-provider.md
+++ b/Documentation/Common/cratis-components-provider.md
@@ -53,12 +53,12 @@ Unknown Components 3 renderer options are intentionally a type error. Remove `li
 
 The renderer contract remains `unstable_` while concrete adapters falsify it. The provider exposes:
 
-| Prop                 | Purpose                                                                                              |
-| -------------------- | ---------------------------------------------------------------------------------------------------- |
-| `library`            | One renderer manifest or an ordered last-wins composition. Omit it for the built-in default.        |
-| `libraryMode`        | `strict` rejects invalid profile promises; `degrade` reports them after mount.                       |
-| `rendererFallback`   | `core` keeps the built-in slot fallback; `throw` rejects fallback.                                   |
-| `overlayEnvironment` | Stable, post-commit portal-container lookup for overlay-owning implementations.                      |
+| Prop                 | Purpose                                                                                               |
+| -------------------- | ----------------------------------------------------------------------------------------------------- |
+| `library`            | One renderer manifest or an ordered last-wins composition. Omit it for the built-in default.          |
+| `libraryMode`        | `strict` rejects invalid profile promises; `degrade` reports them after mount.                        |
+| `rendererFallback`   | `core` keeps the built-in slot fallback; `throw` rejects fallback.                                    |
+| `overlayEnvironment` | Stable, post-commit portal-container lookup for overlay-owning implementations.                       |
 | `rendererSetup`      | Adapter-declared, non-secret boolean setup attestations. Never put credentials, keys, or caches here. |
 
 Adapter packages declaration-merge their own `rendererSetup` keys, so importing an adapter gives

From 5b8a80f55e4fc4263b3f40b66a26790659457696 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Fri, 28 Aug 2026 10:48:04 +0200
Subject: [PATCH 230/267] Format discoverability documentation

---
 Documentation/index.mdx | 54 +++++++++++++++++++++++++++++++----------
 README.md               | 32 ++++++++++++------------
 2 files changed, 57 insertions(+), 29 deletions(-)

diff --git a/Documentation/index.mdx b/Documentation/index.mdx
index 2521f1ae..e89f9e0d 100644
--- a/Documentation/index.mdx
+++ b/Documentation/index.mdx
@@ -12,22 +12,30 @@ import TopicHero from '@components/TopicHero.astro';
     eyebrow='Components'
     title='React components wired to your proxies'
 >
-    Command dialogs, forms, tables, and application surfaces that consume
-    [Arc's](/arc/) generated proxies. Components owns its public contracts,
-    semantic parts, and built-in renderer, with optional independently versioned
-    MUI and PrimeReact adapters.
+    Command dialogs, forms, tables, and application surfaces that consume [Arc's](/arc/)
+    generated proxies. Components owns its public contracts, semantic parts, and built-in
+    renderer, with optional independently versioned MUI and PrimeReact adapters.
 </TopicHero>
 
 ## Start here
 
 <CardGrid>
     <SimpleCard title='Getting started' icon='rocket' link='/components/getting-started/'>
-        Install the package, mount the provider, and render your first proxy-driven screen.
-    </SimpleCard>
-    <SimpleCard title='Why Components' icon='approve-check' link='/components/why-components/'>
+        Install the package, mount the provider, and render your first proxy-driven
+        screen.
+    </SimpleCard>
+    <SimpleCard
+        title='Why Components'
+        icon='approve-check'
+        link='/components/why-components/'
+    >
         Understand what Components adds to Arc-generated command and query contracts.
     </SimpleCard>
-    <SimpleCard title='Choose a component area' icon='list-format' link='#component-areas'>
+    <SimpleCard
+        title='Choose a component area'
+        icon='list-format'
+        link='#component-areas'
+    >
         Start from the screen job rather than a raw component inventory.
     </SimpleCard>
     <SimpleCard title='Styling' icon='seti:folder' link='/components/styling/'>
@@ -62,10 +70,18 @@ the application retains their provider, peer, SSR, styling, and license responsi
     <SimpleCard title='Display data' icon='seti:db' link='/components/displaying-data/'>
         Render a query or observable query with `DataPage` and the data-table wrappers.
     </SimpleCard>
-    <SimpleCard title='Multi-step form' icon='list-format' link='/components/multi-step-form/'>
+    <SimpleCard
+        title='Multi-step form'
+        icon='list-format'
+        link='/components/multi-step-form/'
+    >
         Gather information across named stages with `StepperCommandDialog`.
     </SimpleCard>
-    <SimpleCard title='A list screen with actions' icon='puzzle' link='/components/list-screen-with-actions/'>
+    <SimpleCard
+        title='A list screen with actions'
+        icon='puzzle'
+        link='/components/list-screen-with-actions/'
+    >
         Build a full screen with rows, dialogs, toolbar actions, and selection details.
     </SimpleCard>
 </CardGrid>
@@ -73,7 +89,11 @@ the application retains their provider, peer, SSR, styling, and license responsi
 ## Component areas
 
 <CardGrid>
-    <SimpleCard title='Command input' icon='approve-check' link='/components/commanddialog/'>
+    <SimpleCard
+        title='Command input'
+        icon='approve-check'
+        link='/components/commanddialog/'
+    >
         Typed fields, forms, dialogs, and multi-step command flows.
     </SimpleCard>
     <SimpleCard title='Data display' icon='seti:db' link='/components/datapage/'>
@@ -102,10 +122,18 @@ renderer packages retain their own provider, dependency, styling, SSR, and licen
 ## Continue
 
 <CardGrid>
-    <SimpleCard title='Components source' icon='seti:folder' link='https://github.com/Cratis/Components'>
+    <SimpleCard
+        title='Components source'
+        icon='seti:folder'
+        link='https://github.com/Cratis/Components'
+    >
         Package setup, migration guidance, contribution paths, and current limitations.
     </SimpleCard>
-    <SimpleCard title='Components on npm' icon='open-book' link='https://www.npmjs.com/package/@cratis/components'>
+    <SimpleCard
+        title='Components on npm'
+        icon='open-book'
+        link='https://www.npmjs.com/package/@cratis/components'
+    >
         Published package metadata and versions.
     </SimpleCard>
     <SimpleCard title='Arc' icon='puzzle' link='/arc/'>
diff --git a/README.md b/README.md
index 80e9549a..3494dd17 100644
--- a/README.md
+++ b/README.md
@@ -21,13 +21,13 @@ dependency for selected interaction primitives.
 
 ## What Components owns
 
-| Area | Current package role |
-| --- | --- |
-| Command input | Typed fields, embedded forms, dialogs, and multi-step command flows |
-| Data display | Query-backed tables, local-array tables, list pages, filters, and detail surfaces |
-| Application surfaces | Dialogs, notifications, dropdowns, display primitives, page chrome, and toolbars |
-| Structured editors | JSON content, JSON Schema, navigation, canvas, pivot, and time-oriented views |
-| Styling boundary | Cratis tokens, component styles, an optional baseline theme, and stable parts |
+| Area                 | Current package role                                                              |
+| -------------------- | --------------------------------------------------------------------------------- |
+| Command input        | Typed fields, embedded forms, dialogs, and multi-step command flows               |
+| Data display         | Query-backed tables, local-array tables, list pages, filters, and detail surfaces |
+| Application surfaces | Dialogs, notifications, dropdowns, display primitives, page chrome, and toolbars  |
+| Structured editors   | JSON content, JSON Schema, navigation, canvas, pivot, and time-oriented views     |
+| Styling boundary     | Cratis tokens, component styles, an optional baseline theme, and stable parts     |
 
 ## Relationship to Arc
 
@@ -136,12 +136,12 @@ Storybook gates.
 
 ## Community and repository
 
-| Path | Destination |
-| --- | --- |
-| Questions and discussion | [Cratis Discord](https://discord.gg/kt4AMpV8WV) |
-| Bugs and feature requests | [GitHub Issues](https://github.com/Cratis/Components/issues) |
-| Releases | [GitHub Releases](https://github.com/Cratis/Components/releases) |
-| Contributing | [Cratis contribution guide](https://github.com/Cratis/.github/blob/main/contributing.md) |
-| Security reports | [Private security reporting](mailto:oss@cratis.io?subject=Security%3A) |
-| Source license | [`LICENSE`](./LICENSE) |
-| Package notices | [`Source/THIRD_PARTY_NOTICES.md`](./Source/THIRD_PARTY_NOTICES.md) |
+| Path                      | Destination                                                                              |
+| ------------------------- | ---------------------------------------------------------------------------------------- |
+| Questions and discussion  | [Cratis Discord](https://discord.gg/kt4AMpV8WV)                                          |
+| Bugs and feature requests | [GitHub Issues](https://github.com/Cratis/Components/issues)                             |
+| Releases                  | [GitHub Releases](https://github.com/Cratis/Components/releases)                         |
+| Contributing              | [Cratis contribution guide](https://github.com/Cratis/.github/blob/main/contributing.md) |
+| Security reports          | [Private security reporting](mailto:oss@cratis.io?subject=Security%3A)                   |
+| Source license            | [`LICENSE`](./LICENSE)                                                                   |
+| Package notices           | [`Source/THIRD_PARTY_NOTICES.md`](./Source/THIRD_PARTY_NOTICES.md)                       |

From 7f0497a766e932b27704995e7ea42bfc88997f78 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Fri, 28 Aug 2026 11:06:32 +0200
Subject: [PATCH 231/267] Use canonical Components documentation link

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 3494dd17..4feb4ce4 100644
--- a/README.md
+++ b/README.md
@@ -10,7 +10,7 @@ stable parts, and state attributes. React Aria is an internal implementation
 dependency for selected interaction primitives.
 
 [![NPM](https://img.shields.io/npm/v/@cratis/components?label=@cratis/components&logo=npm)](https://www.npmjs.com/package/@cratis/components)
-[![Documentation](https://github.com/Cratis/Documentation/actions/workflows/pages.yml/badge.svg)](https://github.com/Cratis/Documentation/actions/workflows/pages.yml)
+[Documentation](https://cratis.io/components/)
 
 ## Start here
 

From 8a969859f179e1bebf791d8ed773183525ec9e93 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Fri, 28 Aug 2026 11:08:40 +0200
Subject: [PATCH 232/267] pi-agent: Implement PrimeReact 10 adapter

---
 Adapters/PrimeReact10/CONFORMANCE.md          |  45 +
 Adapters/PrimeReact10/LICENSE                 |  24 +
 Adapters/PrimeReact10/README.md               |  83 ++
 Adapters/PrimeReact10/THIRD_PARTY_NOTICES.md  |  29 +
 ..._the_primereact10_presentation_profile.tsx | 249 +++++
 Adapters/PrimeReact10/package.json            | 120 +++
 .../scripts/verify-packed-package.mjs         | 401 ++++++++
 .../scripts/verify-upstream-shim.mjs          | 119 +++
 .../scripts/verify-workspace-isolation.mjs    |  67 ++
 Adapters/PrimeReact10/src/index.tsx           | 858 ++++++++++++++++++
 .../PrimeReact10/src/upstream-type-shim.d.ts  |  14 +
 Adapters/PrimeReact10/tsconfig.build.json     |  20 +
 Adapters/PrimeReact10/tsconfig.json           |  23 +
 Adapters/PrimeReact10/vitest.config.ts        |  17 +
 Adapters/PrimeReact10/vitest.setup.ts         |  28 +
 yarn.lock                                     |  50 +-
 16 files changed, 2142 insertions(+), 5 deletions(-)
 create mode 100644 Adapters/PrimeReact10/CONFORMANCE.md
 create mode 100644 Adapters/PrimeReact10/LICENSE
 create mode 100644 Adapters/PrimeReact10/README.md
 create mode 100644 Adapters/PrimeReact10/THIRD_PARTY_NOTICES.md
 create mode 100644 Adapters/PrimeReact10/for_adapter/when_using_the_primereact10_presentation_profile.tsx
 create mode 100644 Adapters/PrimeReact10/package.json
 create mode 100644 Adapters/PrimeReact10/scripts/verify-packed-package.mjs
 create mode 100644 Adapters/PrimeReact10/scripts/verify-upstream-shim.mjs
 create mode 100644 Adapters/PrimeReact10/scripts/verify-workspace-isolation.mjs
 create mode 100644 Adapters/PrimeReact10/src/index.tsx
 create mode 100644 Adapters/PrimeReact10/src/upstream-type-shim.d.ts
 create mode 100644 Adapters/PrimeReact10/tsconfig.build.json
 create mode 100644 Adapters/PrimeReact10/tsconfig.json
 create mode 100644 Adapters/PrimeReact10/vitest.config.ts
 create mode 100644 Adapters/PrimeReact10/vitest.setup.ts

diff --git a/Adapters/PrimeReact10/CONFORMANCE.md b/Adapters/PrimeReact10/CONFORMANCE.md
new file mode 100644
index 00000000..cfee4415
--- /dev/null
+++ b/Adapters/PrimeReact10/CONFORMANCE.md
@@ -0,0 +1,45 @@
+<!-- Copyright (c) Cratis. All rights reserved. -->
+<!-- Licensed under the MIT license. See LICENSE file in the project root for full license information. -->
+
+# PrimeReact 11 adapter conformance
+
+The adapter declares `stable-presentation/v1` at renderer ABI major 1. Repository evidence runs
+`@cratis/components.conformance` against all nine declared slots and requires 100 of 100 checks to
+pass with zero failures and zero skips.
+
+The bounded checks cover:
+
+- schema-valid package metadata and exact static/runtime consistency;
+- every stable part, canonical state, and typed `pt` destination;
+- exact native elements and native refs;
+- native names, values, submit/reset, disabled/read-only, validation, and autofill-shaped props;
+- one value-first `ChangeHandler` callback with `source: 'user'` and the originating native `Event`;
+- current and deprecated Button appearance mapping and canonical data attributes;
+- real PrimeReact 11 styled DOM identities for all nine slots;
+- explicit switch semantics and hidden visual indicators;
+- deterministic SSR for all nine slots and mismatch-free representative Button hydration under an
+  application-owned outer provider; and
+- package peers, archive boundaries, runtime loading, declaration hygiene, and strict Bundler and
+  NodeNext consumers with bounded upstream exceptions.
+
+The setup gate separately proves `CRATIS-UI-1005` when the outer `PrimeReactProvider` context or
+the non-secret license attestation is missing. Automated component tests assemble PrimeReact's
+public configuration/theme contexts directly so the real license manager never runs; they contain
+and validate no key.
+
+The generic overlay absent/present check has no applicable slot in this nine-slot profile and
+supplies no PrimeReact overlay evidence. Portable part names and typed `pt` destinations are
+preserved, while PrimeReact may add wrappers or nest parts differently from the built-in renderer;
+undocumented descendant order and sibling selectors are not portable contracts.
+
+PrimeReact 11.1.0 currently publishes malformed generic declaration aliases. A compile-only,
+non-emitted shim keeps this adapter's own strict build enabled; the packed adapter declaration is
+vendor-free and the package verifier ensures no shim or vendor declaration leaks into it. Its
+strict external fixtures also use the declaration-only React JSX bridge required by the exact Arc
+React 22.4 upstream exception, while Core's stale-exception gate must still reproduce that issue.
+Remove each bridge when its allowed upstream release fixes the corresponding declarations.
+
+This is automated jsdom/axe and package evidence, not universal browser, visual, RTL, forced-colors,
+reduced-motion, license-validity, or assistive-technology certification. The application remains
+responsible for a valid PrimeUI license, provider/theme configuration, CSP, and any host-specific
+SSR style collection. PrimeReact 10 is not included or exercised.
diff --git a/Adapters/PrimeReact10/LICENSE b/Adapters/PrimeReact10/LICENSE
new file mode 100644
index 00000000..0652c82c
--- /dev/null
+++ b/Adapters/PrimeReact10/LICENSE
@@ -0,0 +1,24 @@
+MIT License
+
+Copyright (c) Cratis
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+PrimeReact and PrimeUX are peer-installed commercial software and are not
+covered by this MIT license. See THIRD_PARTY_NOTICES.md.
diff --git a/Adapters/PrimeReact10/README.md b/Adapters/PrimeReact10/README.md
new file mode 100644
index 00000000..b353a0aa
--- /dev/null
+++ b/Adapters/PrimeReact10/README.md
@@ -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. -->
+
+# `@cratis/components.primereact`
+
+PrimeReact 11 adapter for the nine stable presentation slots in the Cratis Components renderer ABI
+v1. The package is independently versioned and exports one manifest, `primeReactUiLibrary`.
+PrimeReact 10 is out of scope here and remains a required, separate
+`@cratis/components.primereact10` implementation before V4 completion.
+
+## Install
+
+```sh
+npm install @cratis/components.primereact @cratis/components \
+  @primereact/core @primereact/ui primereact @primeuix/themes react react-dom
+```
+
+The adapter uses PrimeReact 11 styled components. It covers Button, IconButton, TextInput,
+TextArea, Checkbox, Radio, Switch, ProgressBar, and Surface. The five atomic interaction slots are
+not part of this profile.
+
+## Application-owned provider and license
+
+PrimeReact 11 requires a license key. The application owns that key and passes it directly to its
+outer `PrimeReactProvider`; Components never receives, stores, copies, logs, serializes, or proxies
+it. PrimeReact's runtime context deliberately omits the key, so the application also passes one
+non-secret boolean attestation to `CratisComponentsProvider`.
+
+```tsx
+import { PrimeReactProvider } from '@primereact/core/config';
+import Aura from '@primeuix/themes/aura';
+import { CratisComponentsProvider } from '@cratis/components';
+import { primeReactUiLibrary } from '@cratis/components.primereact';
+
+const primeUiLicenseKey = import.meta.env.VITE_PRIMEUI_LICENSE_KEY;
+
+export const Application = () => (
+    <PrimeReactProvider license={primeUiLicenseKey} theme={{ preset: Aura }}>
+        <CratisComponentsProvider
+            value={{ locale: 'en-US' }}
+            library={primeReactUiLibrary}
+            rendererSetup={{
+                'cratis-primereact.license-configured': Boolean(primeUiLicenseKey),
+            }}
+        >
+            <main>Application content</main>
+        </CratisComponentsProvider>
+    </PrimeReactProvider>
+);
+```
+
+The adapter throws `CRATIS-UI-1005` synchronously when either the outer provider or the attestation
+is absent. Setting the attestation to `true` is an application assertion that the key was actually
+supplied; it is not a substitute for doing so. This prevents Components from creating a second
+provider and fails before adapter content when setup was not attested. The adapter does not validate
+the key and cannot guarantee that PrimeUI will accept it or omit its own license notice.
+
+Obtain a key from [PrimeUI](https://primeui.store/primeui). For Vite, expose the application-owned
+key as `VITE_PRIMEUI_LICENSE_KEY` only in the client build that mounts PrimeReact. In CI or a
+publishing pipeline, map a protected `PRIMEUI_LICENSE_KEY` secret into that build variable without
+echoing it or writing it to package artifacts. The adapter package itself reads no license
+environment variable and includes no key.
+
+## Styling and SSR
+
+The application chooses the PrimeReact theme on its outer provider. The package's static metadata
+uses `VITE_PRIMEUI_LICENSE_KEY` only as documentation/discovery metadata; no runtime lookup occurs.
+All nine slots produce deterministic SSR output, and the representative Button fixture hydrates
+without a mismatch. The host remains responsible for PrimeReact's provider, theme, CSP, and style
+collection/injection requirements.
+
+## Peer policy
+
+PrimeReact packages are bounded to `>=11 <12`, PrimeUX themes to `>=3 <4`, and React/ReactDOM to
+React 19. Vendor packages are peers and are never bundled. Exact repository proof uses 11.1.0 and
+`@primeuix/themes` 3.0.0.
+
+The current `@cratis/components` peer `>=3.0.0 <4` is a temporary repository placeholder matching
+the unreleased V4 source package. **It must become the honest `>=4 <5` range before publication.**
+Publishing with the placeholder would misstate compatibility.
+
+See [CONFORMANCE.md](./CONFORMANCE.md) for bounded evidence and
+[THIRD_PARTY_NOTICES.md](./THIRD_PARTY_NOTICES.md) for upstream licensing.
diff --git a/Adapters/PrimeReact10/THIRD_PARTY_NOTICES.md b/Adapters/PrimeReact10/THIRD_PARTY_NOTICES.md
new file mode 100644
index 00000000..c608b3ae
--- /dev/null
+++ b/Adapters/PrimeReact10/THIRD_PARTY_NOTICES.md
@@ -0,0 +1,29 @@
+<!-- Copyright (c) Cratis. All rights reserved. -->
+<!-- Licensed under the MIT license. See LICENSE file in the project root for full license information. -->
+
+# Third-party notices
+
+This MIT-licensed adapter interoperates with peer-installed PrimeUI software. It does not bundle or
+redistribute the vendor packages listed below.
+
+## PrimeReact 11 and PrimeUX themes
+
+The proof matrix uses these peer packages:
+
+- `@primereact/core` 11.1.0
+- `@primereact/ui` 11.1.0
+- `primereact` 11.1.0
+- `@primeuix/themes` 3.0.0
+
+Their package metadata states `SEE LICENSE IN LICENSE.md`. The supplied license describes PrimeUI
+as commercial software, requires a valid application-owned key, and provides separate Community
+and Commercial terms. Consult the terms shipped with the exact installed versions and the official
+pages:
+
+- Community terms: <https://primeui.dev/licenses/community>
+- Commercial terms: <https://primeui.dev/licenses/commercial>
+- Key purchase/account page: <https://primeui.store/primeui>
+
+PrimeReact 10 is not part of this adapter. The application is responsible for license eligibility,
+key configuration, renewals, and determining whether its distribution model needs additional
+permission. This notice records package facts for transparency and is not legal advice.
diff --git a/Adapters/PrimeReact10/for_adapter/when_using_the_primereact10_presentation_profile.tsx b/Adapters/PrimeReact10/for_adapter/when_using_the_primereact10_presentation_profile.tsx
new file mode 100644
index 00000000..02c63239
--- /dev/null
+++ b/Adapters/PrimeReact10/for_adapter/when_using_the_primereact10_presentation_profile.tsx
@@ -0,0 +1,249 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { expect } from 'chai';
+import {
+    createElement,
+    useContext,
+    type ComponentType,
+    type ReactNode,
+} from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { PrimeReactContext, PrimeReactProvider } from 'primereact/api';
+import { CratisComponentsProvider } from '@cratis/components';
+import { Button } from '@cratis/components/Common';
+import { runConformance, type ConformanceReport } from '@cratis/components.conformance';
+import { beforeAll, describe, it } from 'vitest';
+import packageJson from '../package.json';
+import { primeReact10UiLibrary } from '../src/index.js';
+
+const stablePresentationSlots = [
+    'common.button',
+    'common.iconButton',
+    'common.textInput',
+    'common.textArea',
+    'common.checkbox',
+    'common.radio',
+    'common.switch',
+    'common.progress',
+    'common.surface',
+] as const;
+
+const PrimeApplicationProvider = ({ children }: { readonly children: ReactNode }) => (
+    <PrimeReactProvider value={{ ripple: false }}>{children}</PrimeReactProvider>
+);
+
+const renderSlot = (
+    slotId: (typeof stablePresentationSlots)[number],
+    props: Readonly<Record<string, unknown>>,
+) => {
+    const declaration = primeReact10UiLibrary.slots[slotId];
+    if (!declaration) throw new Error(`Missing ${slotId} declaration.`);
+    // SAFETY: Fixture props are paired with their public slot contract.
+    const Component = declaration.render as unknown as ComponentType<
+        Record<string, unknown>
+    >;
+    return renderToStaticMarkup(
+        <PrimeApplicationProvider>
+            {createElement(Component, props)}
+        </PrimeApplicationProvider>,
+    );
+};
+
+const AdapterProvider = primeReact10UiLibrary.Provider;
+if (!AdapterProvider) throw new Error('The PrimeReact 10 adapter provider is missing.');
+
+const ConfigurationEvidence = () => {
+    const configuration = useContext(PrimeReactContext);
+    return <span data-ripple={String(configuration?.ripple)} />;
+};
+
+describe('when using the PrimeReact 10 stable presentation profile', () => {
+    let report: ConformanceReport;
+
+    beforeAll(async () => {
+        report = await runConformance(primeReact10UiLibrary, {
+            metadata: packageJson.cratis,
+            document,
+            wrapper: PrimeApplicationProvider,
+        });
+    }, 30_000);
+
+    it('should pass the complete declared profile with zero skips', () => {
+        const failures = report.checks
+            .filter((check) => check.status === 'failed')
+            .map(
+                (check) =>
+                    `${check.id}: ${check.message} ${JSON.stringify(check.evidence ?? {})}`,
+            );
+        expect(failures).to.deep.equal([]);
+        expect(report.passed).to.equal(true);
+        expect(report.summary).to.deep.equal({
+            total: 100,
+            passed: 100,
+            failed: 0,
+            skipped: 0,
+        });
+        expect(primeReact10UiLibrary.profileSlots).to.deep.equal(
+            stablePresentationSlots,
+        );
+    });
+
+    it('should keep static metadata schema and runtime declarations consistent', () => {
+        expect(
+            report.checks.find((check) => check.id === 'manifest.schema')?.status,
+        ).to.equal('passed');
+        expect(
+            report.checks.find((check) => check.id === 'manifest.runtimeConsistency')
+                ?.status,
+        ).to.equal('passed');
+        expect(Object.keys(packageJson.cratis.modes)).to.deep.equal(
+            stablePresentationSlots,
+        );
+    });
+
+    it('should preserve native refs, forms, reset behavior, and value-first native events', () => {
+        for (const slotId of stablePresentationSlots.filter(
+            (candidate) => candidate !== 'common.progress',
+        )) {
+            expect(
+                report.checks.find(
+                    (check) => check.id === `contract.${slotId}.elementRef`,
+                )?.status,
+            ).to.equal('passed');
+        }
+        expect(
+            report.checks.find((check) => check.id === 'behavior.common.button')?.evidence
+                ?.submitEvents,
+        ).to.equal(1);
+        for (const slotId of [
+            'common.textInput',
+            'common.textArea',
+            'common.checkbox',
+            'common.radio',
+            'common.switch',
+        ] as const) {
+            const evidence = report.checks.find(
+                (check) => check.id === `behavior.${slotId}`,
+            )?.evidence;
+            expect(evidence).to.include({
+                callbacks: 1,
+                source: 'user',
+                nativeEvent: true,
+                resetMatches: true,
+            });
+        }
+    });
+
+    it('should render actual PrimeReact 10 DOM identities for every slot', () => {
+        const markup = {
+            button: renderSlot('common.button', { label: 'Save' }),
+            iconButton: renderSlot('common.iconButton', {
+                icon: '+',
+                'aria-label': 'Add',
+            }),
+            textInput: renderSlot('common.textInput', { 'aria-label': 'Name' }),
+            textArea: renderSlot('common.textArea', { 'aria-label': 'Notes' }),
+            checkbox: renderSlot('common.checkbox', {
+                label: 'Selected',
+                defaultChecked: true,
+            }),
+            radio: renderSlot('common.radio', {
+                name: 'frequency',
+                value: 'daily',
+                'aria-label': 'Daily',
+            }),
+            switchControl: renderSlot('common.switch', {
+                'aria-label': 'Enabled',
+            }),
+            progress: renderSlot('common.progress', { value: 42 }),
+            surface: renderSlot('common.surface', { as: 'article' }),
+        };
+        expect(markup.button).to.contain('p-button');
+        expect(markup.iconButton).to.contain('p-button');
+        expect(markup.textInput).to.contain('p-inputtext');
+        expect(markup.textArea).to.contain('p-inputtextarea');
+        expect(markup.checkbox).to.contain('p-checkbox');
+        expect(markup.radio).to.contain('p-radiobutton');
+        expect(markup.switchControl).to.contain('p-inputswitch');
+        expect(markup.switchControl).to.contain('role="switch"');
+        expect(markup.progress).to.contain('p-progressbar');
+        expect(markup.surface).to.contain('p-card');
+        expect(markup.surface).to.contain('<article');
+    });
+
+    it('should preserve deprecated Button mapping and canonical data attributes', () => {
+        const markup = renderSlot('common.button', {
+            label: 'Legacy action',
+            text: true,
+            rounded: true,
+            severity: 'danger',
+        });
+        expect(markup).to.contain('data-variant="ghost"');
+        expect(markup).to.contain('data-tone="critical"');
+        expect(markup).to.contain('data-severity="danger"');
+        expect(markup).to.contain('data-shape="pill"');
+        expect(markup).not.to.contain(' text=');
+        expect(markup).not.to.contain(' rounded=');
+    });
+
+    it('should create default context only when no outer application provider exists', () => {
+        const defaultMarkup = renderToStaticMarkup(
+            <AdapterProvider setup={{}}>
+                <ConfigurationEvidence />
+            </AdapterProvider>,
+        );
+        const outerMarkup = renderToStaticMarkup(
+            <PrimeReactProvider value={{ ripple: true }}>
+                <AdapterProvider setup={{}}>
+                    <ConfigurationEvidence />
+                </AdapterProvider>
+            </PrimeReactProvider>,
+        );
+        expect(defaultMarkup).to.contain('data-ripple="false"');
+        expect(outerMarkup).to.contain('data-ripple="true"');
+    });
+
+    it('should pass through the Components provider without license setup', () => {
+        const markup = renderToStaticMarkup(
+            <PrimeApplicationProvider>
+                <CratisComponentsProvider library={primeReact10UiLibrary}>
+                    <Button label='Configured action' />
+                </CratisComponentsProvider>
+            </PrimeApplicationProvider>,
+        );
+
+        expect(markup).to.contain('p-button');
+        expect(markup).to.contain('Configured action');
+    });
+
+    it('should declare only bounded peer-hosted PrimeReact 10 vendors', () => {
+        expect(packageJson).not.to.have.property('dependencies');
+        expect(packageJson.peerDependencies).to.deep.equal({
+            '@cratis/components': '>=3.0.0 <4',
+            primereact: '>=10 <11',
+            react: '^19.0.0',
+            'react-dom': '^19.0.0',
+        });
+        expect(packageJson.devDependencies).to.include({
+            primereact: '10.9.8',
+            react: '19.2.8',
+            'react-dom': '19.2.8',
+        });
+        const serialized = JSON.stringify(packageJson);
+        expect(serialized).not.to.contain('@primereact/');
+        expect(serialized).not.to.contain('@primeui/');
+        expect(serialized).not.to.contain('@primeuix/');
+        expect(serialized).not.to.contain('LicenseRef-PrimeUI');
+        expect(serialized).not.to.contain('license-configured');
+    });
+
+    it('should publish schema-valid MIT metadata without a key contract', () => {
+        expect(packageJson.cratis.license).to.deep.equal({
+            spdx: 'MIT',
+            requiresKey: false,
+        });
+        expect(Object.hasOwn(primeReact10UiLibrary, 'license')).to.equal(false);
+        expect(Object.hasOwn(primeReact10UiLibrary, 'keyEnv')).to.equal(false);
+    });
+});
diff --git a/Adapters/PrimeReact10/package.json b/Adapters/PrimeReact10/package.json
new file mode 100644
index 00000000..06bf6b7f
--- /dev/null
+++ b/Adapters/PrimeReact10/package.json
@@ -0,0 +1,120 @@
+{
+    "name": "@cratis/components.primereact10",
+    "version": "0.1.0",
+    "cratisIndependentVersion": true,
+    "description": "PrimeReact 10 presentation adapter for Cratis Components renderer ABI v1.",
+    "author": "Cratis",
+    "license": "MIT",
+    "type": "module",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/Cratis/Components"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "engines": {
+        "node": ">=23.0.0"
+    },
+    "files": [
+        "dist",
+        "README.md",
+        "CONFORMANCE.md",
+        "THIRD_PARTY_NOTICES.md",
+        "LICENSE"
+    ],
+    "main": "./dist/index.js",
+    "module": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "exports": {
+        "./package.json": "./package.json",
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.js"
+        }
+    },
+    "sideEffects": false,
+    "cratisUiAbi": 1,
+    "cratis": {
+        "kind": "ui-adapter",
+        "id": "cratis-primereact10",
+        "displayName": "Cratis PrimeReact 10 renderer",
+        "abi": "^1",
+        "level": "primitive",
+        "profile": "stable-presentation/v1",
+        "category": "primereact10",
+        "entry": "./dist/index.js",
+        "export": "primeReact10UiLibrary",
+        "slots": [
+            "common.button",
+            "common.iconButton",
+            "common.textInput",
+            "common.textArea",
+            "common.checkbox",
+            "common.radio",
+            "common.switch",
+            "common.progress",
+            "common.surface"
+        ],
+        "modes": {
+            "common.button": "presentation",
+            "common.iconButton": "presentation",
+            "common.textInput": "presentation",
+            "common.textArea": "presentation",
+            "common.checkbox": "presentation",
+            "common.radio": "presentation",
+            "common.switch": "presentation",
+            "common.progress": "presentation",
+            "common.surface": "presentation"
+        },
+        "capabilities": [
+            "slot.render",
+            "parts.passthrough",
+            "ssr.staticRender"
+        ],
+        "ssr": "safe",
+        "a11y": {
+            "axeProfile": "wcag22aa",
+            "evidence": "./CONFORMANCE.md"
+        },
+        "license": {
+            "spdx": "MIT",
+            "requiresKey": false
+        },
+        "upstream": {
+            "primereact": ">=10 <11",
+            "react": "^19.0.0",
+            "react-dom": "^19.0.0"
+        }
+    },
+    "scripts": {
+        "clean": "rm -rf dist",
+        "build": "node ../../node_modules/typescript/bin/tsc -p tsconfig.build.json",
+        "typecheck-specs": "yarn workspace @cratis/components prepare && yarn workspace @cratis/components.conformance build && node ../../node_modules/typescript/bin/tsc -p tsconfig.json",
+        "lint": "node ../../node_modules/eslint/bin/eslint.js . --quiet",
+        "test": "node ../../node_modules/vitest/vitest.mjs run --config vitest.config.ts",
+        "verify-upstream-shim": "node ./scripts/verify-upstream-shim.mjs",
+        "verify-isolation": "node ./scripts/verify-workspace-isolation.mjs",
+        "verify-package": "node ./scripts/verify-packed-package.mjs",
+        "ci": "yarn clean && yarn lint && yarn build && yarn verify-upstream-shim && yarn typecheck-specs && yarn test && yarn verify-isolation && yarn verify-package"
+    },
+    "peerDependencies": {
+        "@cratis/components": ">=3.0.0 <4",
+        "primereact": ">=10 <11",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
+    },
+    "devDependencies": {
+        "@cratis/arc": "22.4.0",
+        "@cratis/arc.react": "22.4.0",
+        "@cratis/components": "workspace:^",
+        "@cratis/components.conformance": "workspace:^",
+        "@cratis/fundamentals": "^7.10.3",
+        "@types/react": "19.2.18",
+        "primereact": "10.9.8",
+        "react": "19.2.8",
+        "react-dom": "19.2.8",
+        "reflect-metadata": "0.2.2",
+        "tsyringe": "4.10.0"
+    }
+}
diff --git a/Adapters/PrimeReact10/scripts/verify-packed-package.mjs b/Adapters/PrimeReact10/scripts/verify-packed-package.mjs
new file mode 100644
index 00000000..b8af0743
--- /dev/null
+++ b/Adapters/PrimeReact10/scripts/verify-packed-package.mjs
@@ -0,0 +1,401 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { spawnSync } from 'node:child_process';
+import {
+    mkdirSync,
+    mkdtempSync,
+    readFileSync,
+    rmSync,
+    symlinkSync,
+    writeFileSync,
+} from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import {
+    isOwnedDeclarationDiagnostic,
+    matchesExternalIssue,
+    matchesPairedOwnedCascade,
+} from '../../../Source/scripts/lib/public-type-exceptions.mjs';
+
+const packageDirectory = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const repositoryDirectory = path.resolve(packageDirectory, '../..');
+const temporary = mkdtempSync(
+    path.join(os.tmpdir(), 'cratis-primereact10-package-'),
+);
+
+const run = (command, arguments_, cwd = packageDirectory) => {
+    const result = spawnSync(command, arguments_, { cwd, encoding: 'utf8' });
+    if (result.status !== 0) {
+        throw new Error(
+            `${command} ${arguments_.join(' ')} failed:\n${result.stdout}${result.stderr}`,
+        );
+    }
+    return result.stdout;
+};
+
+const link = (source, target) => {
+    mkdirSync(path.dirname(target), { recursive: true });
+    symlinkSync(source, target, 'dir');
+};
+
+const parsePackJson = (output) => {
+    for (
+        let index = output.lastIndexOf('[');
+        index >= 0;
+        index = output.lastIndexOf('[', index - 1)
+    ) {
+        try {
+            const parsed = JSON.parse(output.slice(index));
+            if (Array.isArray(parsed) && parsed[0]?.filename) return parsed;
+        } catch {
+            // Continue searching backward through lifecycle output for npm's final JSON array.
+        }
+    }
+    throw new Error('npm pack did not produce a parseable JSON result.');
+};
+
+try {
+    const packedJson = parsePackJson(
+        run('npm', ['pack', '--json', '--pack-destination', temporary]),
+    );
+    const packed = packedJson[0];
+    const fileNames = new Set(packed.files.map((file) => file.path));
+    for (const required of [
+        'dist/index.js',
+        'dist/index.d.ts',
+        'README.md',
+        'CONFORMANCE.md',
+        'THIRD_PARTY_NOTICES.md',
+        'LICENSE',
+        'package.json',
+    ]) {
+        if (!fileNames.has(required)) {
+            throw new Error(`Packed archive is missing '${required}'.`);
+        }
+    }
+    const forbiddenArchiveEntries = [...fileNames].filter((file) =>
+        /(?:^|\/)(?:src|for_|scripts|node_modules|coverage|\.yarn)(?:\/|$)|(?:vitest|tsconfig|\.tsbuildinfo|package-lock)/u.test(
+            file,
+        ),
+    );
+    if (forbiddenArchiveEntries.length > 0) {
+        throw new Error(
+            `Packed archive contains source, tests, tooling, or vendor content: ${forbiddenArchiveEntries.join(', ')}.`,
+        );
+    }
+
+    const archive = path.join(temporary, packed.filename);
+    const unpacked = path.join(temporary, 'unpacked');
+    mkdirSync(unpacked);
+    run('tar', ['-xzf', archive, '-C', unpacked]);
+    const unpackedPackage = path.join(unpacked, 'package');
+
+    const corePackedJson = parsePackJson(
+        run(
+            'npm',
+            [
+                'pack',
+                '--json',
+                '--ignore-scripts',
+                '--silent',
+                '--pack-destination',
+                temporary,
+            ],
+            path.join(repositoryDirectory, 'Source'),
+        ),
+    );
+    const coreArchive = path.join(temporary, corePackedJson[0].filename);
+    const unpackedCore = path.join(temporary, 'unpacked-core');
+    mkdirSync(unpackedCore);
+    run('tar', ['-xzf', coreArchive, '-C', unpackedCore]);
+    const unpackedCorePackage = path.join(unpackedCore, 'package');
+    const corePackageJson = JSON.parse(
+        readFileSync(path.join(unpackedCorePackage, 'package.json'), 'utf8'),
+    );
+    const packageJson = JSON.parse(
+        readFileSync(path.join(unpackedPackage, 'package.json'), 'utf8'),
+    );
+
+    const expectedPeers = {
+        '@cratis/components': '>=3.0.0 <4',
+        primereact: '>=10 <11',
+        react: '^19.0.0',
+        'react-dom': '^19.0.0',
+    };
+    if (JSON.stringify(packageJson.peerDependencies) !== JSON.stringify(expectedPeers)) {
+        throw new Error(
+            'Packed peer dependencies are not the exact bounded adapter policy.',
+        );
+    }
+    if (packageJson.dependencies && Object.keys(packageJson.dependencies).length > 0) {
+        throw new Error(
+            'Renderer vendors and Components must never be runtime dependencies.',
+        );
+    }
+    if (
+        packageJson.version !== '0.1.0' ||
+        packageJson.cratisIndependentVersion !== true ||
+        packageJson.cratisUiAbi !== 1
+    ) {
+        throw new Error(
+            'Adapter versioning and renderer ABI metadata must be independent.',
+        );
+    }
+    const serializedPackage = JSON.stringify(packageJson);
+    for (const forbidden of [
+        '@primereact/core',
+        '@primereact/ui',
+        '@primeuix/',
+        '@primeui/',
+        'LicenseRef-PrimeUI',
+        'license-configured',
+        'VITE_PRIMEUI_LICENSE_KEY',
+    ]) {
+        if (serializedPackage.includes(forbidden)) {
+            throw new Error(`Packed metadata contains PrimeReact 11 marker '${forbidden}'.`);
+        }
+    }
+    const expectedLicense = { spdx: 'MIT', requiresKey: false };
+    if (JSON.stringify(packageJson.cratis?.license) !== JSON.stringify(expectedLicense)) {
+        throw new Error('Packed static metadata does not preserve the MIT policy.');
+    }
+
+    const runtime = readFileSync(path.join(unpackedPackage, 'dist/index.js'), 'utf8');
+    for (const requiredImport of [
+        'primereact/api',
+        'primereact/button',
+        'primereact/checkbox',
+        '@cratis/components/',
+        'react/jsx-runtime',
+    ]) {
+        if (!runtime.includes(requiredImport)) {
+            throw new Error(
+                `Runtime does not retain expected external import '${requiredImport}'.`,
+            );
+        }
+    }
+    for (const bundledSignature of [
+        '@primereact/',
+        '@primeui/license-manager',
+        '@primeuix/',
+        'showInvalidLicenseBanner',
+        'function verifyLicense',
+        'Invalid PrimeUI License',
+        'VITE_PRIMEUI_LICENSE_KEY',
+        'primeui.store/primeui',
+    ]) {
+        if (runtime.includes(bundledSignature)) {
+            throw new Error(
+                `Runtime appears to bundle vendor code: '${bundledSignature}'.`,
+            );
+        }
+    }
+
+    const declarationFiles = [...fileNames].filter((file) => file.endsWith('.d.ts'));
+    if (declarationFiles.length !== 1) {
+        throw new Error(
+            `Expected one public declaration file, found ${declarationFiles.length}.`,
+        );
+    }
+    const declarations = readFileSync(
+        path.join(unpackedPackage, 'dist/index.d.ts'),
+        'utf8',
+    );
+    for (const forbidden of [
+        /\bany\b/u,
+        /from\s+['"](?:@primereact|@primeui|@primeuix|primereact)(?:\/|['"])/u,
+        /export\s+(?:type|class|function|default)\b/u,
+    ]) {
+        if (forbidden.test(declarations)) {
+            throw new Error(`Public declarations contain forbidden '${forbidden}'.`);
+        }
+    }
+    const exportedValues = declarations.match(/export\s+declare\s+const\s+/gu) ?? [];
+    if (
+        exportedValues.length !== 1 ||
+        !/export declare const primeReact10UiLibrary: unstable_UiLibrary;/u.test(
+            declarations,
+        )
+    ) {
+        throw new Error(
+            'Public declarations must expose exactly one UiLibrary-typed value.',
+        );
+    }
+    for (const forbidden of ['license-configured', 'PrimeUI', 'primereact/api']) {
+        if (declarations.includes(forbidden)) {
+            throw new Error(`Public declarations contain forbidden '${forbidden}'.`);
+        }
+    }
+
+    const nodeModules = path.join(temporary, 'node_modules');
+    link(unpackedPackage, path.join(nodeModules, '@cratis/components.primereact'));
+    link(unpackedCorePackage, path.join(nodeModules, '@cratis/components'));
+    for (const dependency of ['react', 'react-dom']) {
+        link(
+            path.join(repositoryDirectory, 'node_modules', dependency),
+            path.join(nodeModules, dependency),
+        );
+        link(
+            path.join(repositoryDirectory, 'node_modules/@types', dependency),
+            path.join(nodeModules, '@types', dependency),
+        );
+    }
+    for (const dependency of ['arc', 'arc.react', 'fundamentals']) {
+        link(
+            path.join(repositoryDirectory, 'node_modules/@cratis', dependency),
+            path.join(nodeModules, '@cratis', dependency),
+        );
+    }
+    for (const dependency of ['reflect-metadata', 'tsyringe']) {
+        link(
+            path.join(repositoryDirectory, 'node_modules', dependency),
+            path.join(nodeModules, dependency),
+        );
+    }
+    link(
+        path.join(packageDirectory, 'node_modules/primereact'),
+        path.join(nodeModules, 'primereact'),
+    );
+
+    writeFileSync(
+        path.join(temporary, 'runtime.mjs'),
+        "const api = await import('@cratis/components.primereact10');\n" +
+            "if (Object.keys(api).join(',') !== 'primeReact10UiLibrary') throw new Error('Packed runtime must export only primeReact10UiLibrary.');\n" +
+            "if (api.primeReact10UiLibrary.id !== 'cratis-primereact10') throw new Error('Packed manifest did not load with explicit peers.');\n",
+    );
+    run(process.execPath, ['runtime.mjs'], temporary);
+
+    writeFileSync(
+        path.join(temporary, 'fixture.ts'),
+        "import { primeReact10UiLibrary } from '@cratis/components.primereact10';\nvoid primeReact10UiLibrary;\n",
+    );
+    writeFileSync(
+        path.join(temporary, 'jsx-shim.d.ts'),
+        "import type { ReactElement } from 'react';\ndeclare global { namespace JSX { type Element = ReactElement; } }\nexport {};\n",
+    );
+    const typescript = path.join(repositoryDirectory, 'node_modules/typescript/bin/tsc');
+    run(
+        process.execPath,
+        [
+            path.join(repositoryDirectory, 'Source/scripts/verify-public-types.mjs'),
+            '--only',
+            './renderer',
+        ],
+        path.join(repositoryDirectory, 'Source'),
+    );
+
+    const exceptionMetadata = JSON.parse(
+        readFileSync(
+            path.join(
+                repositoryDirectory,
+                'Source/scripts/verify-public-types.exceptions.json',
+            ),
+            'utf8',
+        ),
+    );
+    const nodeNextIssue = exceptionMetadata.upstreamIssues.find(
+        (issue) => issue.id === 'arc-family-nodenext-extensionless-specifiers',
+    );
+    if (!nodeNextIssue) {
+        throw new Error('NodeNext upstream exception metadata is missing.');
+    }
+    const parseDiagnostics = (stdout) => {
+        const diagnosticLine = /^(.+?)\((\d+),(\d+)\): error (TS\d+): (.*)$/u;
+        return stdout
+            .split(/\r?\n/u)
+            .map((line) => line.match(diagnosticLine))
+            .filter(Boolean)
+            .map((match) => {
+                const [, rawFile, lineNo, , code, message] = match;
+                const absolute = path.resolve(rawFile);
+                const marker = `${path.sep}node_modules${path.sep}`;
+                const lastNodeModules = absolute.lastIndexOf(marker);
+                let file;
+                if (lastNodeModules >= 0) {
+                    file = absolute
+                        .slice(lastNodeModules + marker.length)
+                        .split(path.sep)
+                        .join('/');
+                } else if (absolute.startsWith(`${unpackedCorePackage}${path.sep}`)) {
+                    file = `@cratis/components/${path
+                        .relative(unpackedCorePackage, absolute)
+                        .split(path.sep)
+                        .join('/')}`;
+                } else {
+                    file = path.relative(temporary, absolute).split(path.sep).join('/');
+                }
+                return { code, file, line: Number(lineNo), message };
+            });
+    };
+
+    for (const resolution of ['bundler', 'nodenext']) {
+        const result = spawnSync(
+            process.execPath,
+            [
+                typescript,
+                '--ignoreConfig',
+                '--noEmit',
+                '--strict',
+                '--skipLibCheck',
+                'false',
+                '--target',
+                'ES2022',
+                '--module',
+                resolution === 'bundler' ? 'ESNext' : 'NodeNext',
+                '--moduleResolution',
+                resolution,
+                '--jsx',
+                'react-jsx',
+                '--lib',
+                'ESNext,DOM,DOM.Iterable',
+                'fixture.ts',
+                'jsx-shim.d.ts',
+            ],
+            { cwd: temporary, encoding: 'utf8' },
+        );
+        const diagnostics = parseDiagnostics(result.stdout ?? '');
+        if (result.status !== 0 && diagnostics.length === 0) {
+            throw new Error(
+                `Strict ${resolution} consumer failed without parseable diagnostics:\n${result.stdout}${result.stderr}`,
+            );
+        }
+        const covered = (diagnostic) =>
+            nodeNextIssue.resolutionModes.includes(resolution) &&
+            (matchesExternalIssue(diagnostic, nodeNextIssue, corePackageJson.name) ||
+                matchesPairedOwnedCascade(
+                    diagnostic,
+                    nodeNextIssue,
+                    diagnostics,
+                    corePackageJson.name,
+                ));
+        const unexpected = diagnostics.filter((diagnostic) => !covered(diagnostic));
+        if (unexpected.length > 0) {
+            throw new Error(
+                `Strict ${resolution} consumer produced unexpected diagnostics:\n${unexpected
+                    .map(
+                        (diagnostic) =>
+                            `${diagnostic.file}:${diagnostic.line} ${diagnostic.code} ${diagnostic.message}`,
+                    )
+                    .join('\n')}`,
+            );
+        }
+        if (
+            diagnostics.some((diagnostic) =>
+                isOwnedDeclarationDiagnostic(diagnostic, packageJson.name),
+            )
+        ) {
+            throw new Error(
+                `Strict ${resolution} consumer reported a declaration owned by ${packageJson.name}.`,
+            );
+        }
+    }
+
+    console.log(
+        `Verified ${packageJson.name}@${packageJson.version}: archive boundaries, external vendor peers, ` +
+            'packed Core runtime import, one hygienic UiLibrary declaration, and strict Bundler/NodeNext consumers with bounded upstream exceptions.',
+    );
+} finally {
+    rmSync(temporary, { recursive: true, force: true });
+}
diff --git a/Adapters/PrimeReact10/scripts/verify-upstream-shim.mjs b/Adapters/PrimeReact10/scripts/verify-upstream-shim.mjs
new file mode 100644
index 00000000..757399fb
--- /dev/null
+++ b/Adapters/PrimeReact10/scripts/verify-upstream-shim.mjs
@@ -0,0 +1,119 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { spawnSync } from 'node:child_process';
+import { mkdtempSync, readFileSync, rmSync, writeFileSync } from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const packageDirectory = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const repositoryDirectory = path.resolve(packageDirectory, '../..');
+const temporary = mkdtempSync(
+    path.join(packageDirectory, '.verify-primereact10-shim-'),
+);
+
+try {
+    const primeReactPackage = JSON.parse(
+        readFileSync(
+            path.join(packageDirectory, 'node_modules/primereact/package.json'),
+            'utf8',
+        ),
+    );
+    if (
+        primeReactPackage.version !== '10.9.8' ||
+        primeReactPackage.license !== 'MIT' ||
+        !primeReactPackage.peerDependencies?.react?.includes('^19.0.0') ||
+        !primeReactPackage.peerDependencies?.['react-dom']?.includes('^19.0.0')
+    ) {
+        throw new Error(
+            'The compile-only API shim is reviewed only for MIT PrimeReact 10.9.8 with React 19 peers.',
+        );
+    }
+
+    const fixture = path.join(temporary, 'fixture.ts');
+    writeFileSync(
+        fixture,
+        "import { PrimeReactProvider } from 'primereact/api';\nvoid PrimeReactProvider;\n",
+    );
+    const typescript = path.join(repositoryDirectory, 'node_modules/typescript/bin/tsc');
+    const result = spawnSync(
+        process.execPath,
+        [
+            typescript,
+            '--ignoreConfig',
+            '--noEmit',
+            '--strict',
+            '--skipLibCheck',
+            'false',
+            '--target',
+            'ES2022',
+            '--module',
+            'ESNext',
+            '--moduleResolution',
+            'bundler',
+            '--lib',
+            'ESNext,DOM,DOM.Iterable',
+            fixture,
+        ],
+        { cwd: packageDirectory, encoding: 'utf8' },
+    );
+    const diagnostics = `${result.stdout ?? ''}${result.stderr ?? ''}`;
+    const expectedFiles = [
+        'fieldset/fieldset.d.ts',
+        'inplace/inplace.d.ts',
+        'panel/panel.d.ts',
+        'treeselect/treeselect.d.ts',
+        'treetable/treetable.d.ts',
+    ];
+    const diagnosticLines = diagnostics
+        .split(/\r?\n/u)
+        .filter((line) => line.includes('error TS'));
+    const missing = expectedFiles.filter(
+        (file) =>
+            !diagnosticLines.some(
+                (line) => line.includes(file) && line.includes('error TS2430'),
+            ),
+    );
+    const jsxDiagnostics = diagnosticLines.filter(
+        (line) =>
+            line.includes('node_modules/primereact/') &&
+            line.includes("error TS2503: Cannot find namespace 'JSX'."),
+    );
+    const unexpected = diagnosticLines.filter(
+        (line) =>
+            !expectedFiles.some(
+                (file) => line.includes(file) && line.includes('error TS2430'),
+            ) && !jsxDiagnostics.includes(line),
+    );
+    if (
+        result.status === 0 ||
+        missing.length > 0 ||
+        jsxDiagnostics.length !== 44 ||
+        unexpected.length > 0
+    ) {
+        throw new Error(
+            'PrimeReact 10.9.8 API declaration defect changed; remove or re-review ' +
+                `src/primereact10-api-shim.d.ts and src/upstream-type-shim.d.ts. ` +
+                `Missing: ${missing.join(', ') || 'none'}. JSX count: ${jsxDiagnostics.length}. ` +
+                `Unexpected: ${unexpected.join(' | ') || 'none'}.`,
+        );
+    }
+
+    const emittedDeclaration = readFileSync(
+        path.join(packageDirectory, 'dist/index.d.ts'),
+        'utf8',
+    );
+    if (
+        emittedDeclaration.includes('primereact10-api-shim') ||
+        emittedDeclaration.includes('primereact/api')
+    ) {
+        throw new Error('The compile-only PrimeReact 10 API shim leaked into declarations.');
+    }
+
+    console.log(
+        'Verified the exact PrimeReact 10.9.8/React 19 TS2430 and global-JSX defects, their removal trigger, and non-emission of the compile-only shims.',
+    );
+} finally {
+    rmSync(temporary, { recursive: true, force: true });
+}
diff --git a/Adapters/PrimeReact10/scripts/verify-workspace-isolation.mjs b/Adapters/PrimeReact10/scripts/verify-workspace-isolation.mjs
new file mode 100644
index 00000000..ac180c71
--- /dev/null
+++ b/Adapters/PrimeReact10/scripts/verify-workspace-isolation.mjs
@@ -0,0 +1,67 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { readFileSync, realpathSync } from 'node:fs';
+import { createRequire } from 'node:module';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const primeReact10Directory = path.resolve(
+    path.dirname(fileURLToPath(import.meta.url)),
+    '..',
+);
+const repositoryDirectory = path.resolve(primeReact10Directory, '../..');
+const primeReact11Directory = path.join(repositoryDirectory, 'Adapters/PrimeReact');
+
+const readJson = (file) => JSON.parse(readFileSync(file, 'utf8'));
+const adapter10 = readJson(path.join(primeReact10Directory, 'package.json'));
+const adapter11 = readJson(path.join(primeReact11Directory, 'package.json'));
+const resolvePrimeReactPackage = (workspaceDirectory) => {
+    const require = createRequire(path.join(workspaceDirectory, 'package.json'));
+    const entry = realpathSync(require.resolve('primereact'));
+    return path.join(path.dirname(entry), 'package.json');
+};
+const package10Path = resolvePrimeReactPackage(primeReact10Directory);
+const package11Path = resolvePrimeReactPackage(primeReact11Directory);
+const package10 = readJson(package10Path);
+const package11 = readJson(package11Path);
+
+if (
+    adapter10.peerDependencies?.primereact !== '>=10 <11' ||
+    adapter11.peerDependencies?.primereact !== '>=11 <12'
+) {
+    throw new Error('Adapter peer ranges no longer prove incompatible upstream majors.');
+}
+if (
+    package10.version !== '10.9.8' ||
+    package11.version !== '11.1.0' ||
+    package10Path === package11Path
+) {
+    throw new Error(
+        'The two adapter workspaces must resolve distinct exact PrimeReact 10.9.8 and 11.1.0 installations.',
+    );
+}
+
+const storybookFiles = [
+    path.join(repositoryDirectory, 'Source/.storybook/main.ts'),
+    path.join(repositoryDirectory, 'Source/.storybook/preview.js'),
+];
+const storybookSource = storybookFiles
+    .map((file) => readFileSync(file, 'utf8'))
+    .join('\n');
+if (
+    storybookSource.includes('@cratis/components.primereact10') ||
+    storybookSource.includes('@cratis/components.primereact')
+) {
+    throw new Error(
+        'This tranche records renderer isolation only; it must not wire either adapter into the existing Core Storybook.',
+    );
+}
+
+console.log(
+    'Verified independent workspace resolution: PrimeReact10 -> ' +
+        `${package10.version} at ${package10Path}; PrimeReact11 -> ${package11.version} at ${package11Path}.`,
+);
+console.log(
+    'Storybook finding: one preview dependency graph cannot satisfy both incompatible primereact peers. A future renderer-isolation tranche requires separate renderer projects/configurations; the existing Core Storybook remains unchanged.',
+);
diff --git a/Adapters/PrimeReact10/src/index.tsx b/Adapters/PrimeReact10/src/index.tsx
new file mode 100644
index 00000000..fe35cbf0
--- /dev/null
+++ b/Adapters/PrimeReact10/src/index.tsx
@@ -0,0 +1,858 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import {
+    forwardRef,
+    useCallback,
+    useContext,
+    useEffect,
+    useRef,
+    useState,
+    type ChangeEvent,
+    type ForwardedRef,
+    type InputHTMLAttributes,
+    type ReactNode,
+    type SyntheticEvent,
+} from 'react';
+import { PrimeReactContext, PrimeReactProvider } from 'primereact/api';
+import { Button as PrimeButton } from 'primereact/button';
+import { Card as PrimeCard } from 'primereact/card';
+import {
+    Checkbox as PrimeCheckbox,
+    type CheckboxPassThroughOptions,
+} from 'primereact/checkbox';
+import { InputSwitch as PrimeInputSwitch } from 'primereact/inputswitch';
+import { InputText as PrimeInputText } from 'primereact/inputtext';
+import { InputTextarea as PrimeInputTextarea } from 'primereact/inputtextarea';
+import { ProgressBar as PrimeProgressBar } from 'primereact/progressbar';
+import {
+    RadioButton as PrimeRadioButton,
+    type RadioButtonPassThroughOptions,
+} from 'primereact/radiobutton';
+import type {
+    ButtonProps,
+    ButtonSeverity,
+    ButtonTone,
+    CheckboxParts,
+    CheckboxProps,
+    IconButtonProps,
+    RadioParts,
+    RadioProps,
+    SurfaceProps,
+    SwitchParts,
+    SwitchProps,
+    TextAreaProps,
+    TextInputProps,
+} from '@cratis/components/Common';
+import type { ProgressBarProps } from '@cratis/components/Display';
+import {
+    unstable_CRATIS_UI_ABI_VERSION,
+    unstable_defineUiLibrary,
+    type unstable_CapabilityId,
+    type unstable_SlotDeclaration,
+    type unstable_SlotId,
+    type unstable_UiLibrary,
+    type unstable_UiLibraryProviderProps,
+} from '@cratis/components/renderer';
+
+const profileSlots = Object.freeze([
+    'common.button',
+    'common.iconButton',
+    'common.textInput',
+    'common.textArea',
+    'common.checkbox',
+    'common.radio',
+    'common.switch',
+    'common.progress',
+    'common.surface',
+] satisfies readonly unstable_SlotId[]);
+
+const capabilities = Object.freeze([
+    'slot.render',
+    'parts.passthrough',
+    'ssr.staticRender',
+] satisfies readonly unstable_CapabilityId[]);
+
+const PrimeReact10AdapterProvider = ({
+    children,
+}: unstable_UiLibraryProviderProps) => {
+    const applicationConfiguration = useContext(PrimeReactContext);
+    if (applicationConfiguration !== undefined) return children;
+    return <PrimeReactProvider>{children}</PrimeReactProvider>;
+};
+
+const classNames = (...values: readonly (string | undefined)[]) =>
+    values.filter(Boolean).join(' ');
+
+const toneForSeverity: Readonly<Record<ButtonSeverity, ButtonTone>> = {
+    secondary: 'neutral',
+    info: 'accent',
+    help: 'accent',
+    success: 'positive',
+    warn: 'caution',
+    danger: 'critical',
+    contrast: 'neutral',
+};
+
+const severityForTone: Readonly<Record<ButtonTone, ButtonSeverity>> = {
+    neutral: 'secondary',
+    accent: 'info',
+    positive: 'success',
+    caution: 'warn',
+    critical: 'danger',
+};
+
+type DeprecatedButtonProp = 'severity' | 'text' | 'link' | 'outlined' | 'rounded';
+const warnedDeprecatedProps = new Set<DeprecatedButtonProp>();
+
+const warnForDeprecatedProp = (prop: DeprecatedButtonProp) => {
+    const environment = (
+        globalThis as typeof globalThis & {
+            process?: { env?: { NODE_ENV?: string } };
+        }
+    ).process?.env?.NODE_ENV;
+    if (environment === 'production' || warnedDeprecatedProps.has(prop)) return;
+    warnedDeprecatedProps.add(prop);
+    console.warn(
+        `Button prop "${prop}" is deprecated and will be removed in 5.0. Use variant, tone, or shape instead.`,
+    );
+};
+
+interface ResolvedButtonAppearance {
+    readonly variant: 'solid' | 'outline' | 'ghost' | 'link';
+    readonly tone: ButtonTone | undefined;
+    readonly shape: 'default' | 'pill';
+    readonly severity: ButtonSeverity | undefined;
+}
+
+interface ButtonAppearanceOptions {
+    readonly variant: ButtonProps['variant'];
+    readonly tone: ButtonProps['tone'];
+    readonly shape: ButtonProps['shape'];
+    readonly text: ButtonProps['text'];
+    readonly link: ButtonProps['link'];
+    readonly outlined: ButtonProps['outlined'];
+    readonly rounded: ButtonProps['rounded'];
+    readonly severity: ButtonProps['severity'];
+}
+
+const resolveButtonVariant = ({
+    variant,
+    link,
+    text,
+    outlined,
+}: ButtonAppearanceOptions): ResolvedButtonAppearance['variant'] => {
+    if (variant) return variant;
+    if (link) return 'link';
+    if (text) return 'ghost';
+    if (outlined) return 'outline';
+    return 'solid';
+};
+
+const resolveButtonAppearance = (
+    options: ButtonAppearanceOptions,
+): ResolvedButtonAppearance => {
+    const { tone, shape, text, link, outlined, rounded, severity } = options;
+    if (text !== undefined) warnForDeprecatedProp('text');
+    if (link !== undefined) warnForDeprecatedProp('link');
+    if (outlined !== undefined) warnForDeprecatedProp('outlined');
+    if (rounded !== undefined) warnForDeprecatedProp('rounded');
+    if (severity !== undefined) warnForDeprecatedProp('severity');
+    return {
+        variant: resolveButtonVariant(options),
+        tone: tone ?? (severity ? toneForSeverity[severity] : undefined),
+        shape: shape ?? (rounded ? 'pill' : 'default'),
+        severity: tone ? severityForTone[tone] : severity,
+    };
+};
+
+const primeSeverity = (severity: ButtonSeverity | undefined) =>
+    severity === 'warn' ? 'warning' : severity;
+
+const renderIcon = (icon: ReactNode) =>
+    typeof icon === 'string' ? <i className={icon} aria-hidden='true' /> : icon;
+
+const PrimeButtonSlot = forwardRef<HTMLButtonElement, ButtonProps>(
+    function PrimeButtonSlot(
+        {
+            label,
+            icon,
+            loading = false,
+            tooltip,
+            tooltipOptions: _tooltipOptions,
+            pt,
+            variant,
+            tone,
+            shape,
+            text,
+            link,
+            outlined,
+            rounded,
+            severity,
+            size = 'normal',
+            disabled,
+            type = 'button',
+            title,
+            className,
+            style,
+            children,
+            ...nativeProps
+        },
+        ref,
+    ) {
+        const appearance = resolveButtonAppearance({
+            variant,
+            tone,
+            shape,
+            text,
+            link,
+            outlined,
+            rounded,
+            severity,
+        });
+        const effectiveDisabled = Boolean(disabled || loading);
+        const iconOnly = Boolean(icon) && label === undefined && !children;
+        const nativeButtonRef = useCallback(
+            (value: unknown) => {
+                // SAFETY: PrimeReact 10.9.8's Button runtime forwards its ref to the native
+                // button although its legacy declaration still describes a class component.
+                // Only that verified native node crosses the Cratis ref boundary.
+                const button =
+                    typeof HTMLButtonElement !== 'undefined' &&
+                    value instanceof HTMLButtonElement
+                        ? value
+                        : null;
+                assignRef(ref, button);
+            },
+            [ref],
+        );
+        return (
+            <PrimeButton
+                {...pt?.root}
+                {...nativeProps}
+                ref={nativeButtonRef}
+                type={type}
+                title={title ?? tooltip}
+                disabled={effectiveDisabled}
+                text={appearance.variant === 'ghost'}
+                link={appearance.variant === 'link'}
+                outlined={appearance.variant === 'outline'}
+                severity={primeSeverity(appearance.severity)}
+                rounded={appearance.shape === 'pill'}
+                size={size === 'normal' ? undefined : size}
+                className={classNames(
+                    'cratis-primereact10-button',
+                    pt?.root?.className,
+                    className,
+                )}
+                style={{ ...pt?.root?.style, ...style }}
+                aria-busy={loading || undefined}
+                data-cratis-part='root'
+                data-variant={appearance.variant}
+                data-tone={appearance.tone}
+                data-severity={appearance.severity}
+                data-shape={appearance.shape}
+                data-size={size}
+                data-disabled={effectiveDisabled || undefined}
+                data-loading={loading || undefined}
+                data-icon-only={iconOnly || undefined}
+            >
+                {loading ? (
+                    <span
+                        {...pt?.spinner}
+                        className={classNames(
+                            'cratis-primereact10-button__spinner',
+                            pt?.spinner?.className,
+                        )}
+                        data-cratis-part='spinner'
+                        aria-hidden='true'
+                    />
+                ) : icon ? (
+                    <span
+                        {...pt?.icon}
+                        className={classNames(
+                            'cratis-primereact10-button__icon',
+                            pt?.icon?.className,
+                        )}
+                        data-cratis-part='icon'
+                        aria-hidden={pt?.icon?.['aria-hidden'] ?? true}
+                    >
+                        {renderIcon(icon)}
+                    </span>
+                ) : null}
+                {label !== undefined || children !== undefined ? (
+                    <span
+                        {...pt?.label}
+                        className={classNames(
+                            'cratis-primereact10-button__label',
+                            pt?.label?.className,
+                        )}
+                        data-cratis-part='label'
+                    >
+                        {label}
+                        {children}
+                    </span>
+                ) : null}
+            </PrimeButton>
+        );
+    },
+);
+
+const PrimeIconButtonSlot = forwardRef<HTMLButtonElement, IconButtonProps>(
+    function PrimeIconButtonSlot(props, ref) {
+        return (
+            <PrimeButtonSlot
+                {...props}
+                ref={ref}
+                shape={props.shape ?? 'pill'}
+                label={undefined}
+            />
+        );
+    },
+);
+
+const PrimeTextInputSlot = forwardRef<HTMLInputElement, TextInputProps>(
+    function PrimeTextInputSlot(
+        {
+            type = 'text',
+            invalid = false,
+            onChange,
+            pt,
+            className,
+            style,
+            disabled,
+            readOnly,
+            size: nativeSize,
+            value,
+            'aria-invalid': ariaInvalid,
+            ...nativeProps
+        },
+        ref,
+    ) {
+        const { size: partSize, ...rootPart } = pt?.root ?? {};
+        const effectiveDisabled = disabled ?? rootPart.disabled;
+        const effectiveReadOnly = readOnly ?? rootPart.readOnly;
+        const effectiveAriaInvalid =
+            ariaInvalid ?? rootPart['aria-invalid'] ?? (invalid || undefined);
+        const effectiveInvalid =
+            invalid ||
+            effectiveAriaInvalid === true ||
+            effectiveAriaInvalid === 'true';
+        return (
+            <PrimeInputText
+                {...rootPart}
+                {...nativeProps}
+                ref={ref}
+                type={type}
+                value={
+                    value === undefined
+                        ? undefined
+                        : Array.isArray(value)
+                          ? value.join(',')
+                          : String(value)
+                }
+                disabled={effectiveDisabled}
+                readOnly={effectiveReadOnly}
+                invalid={effectiveInvalid}
+                aria-invalid={effectiveAriaInvalid}
+                size={nativeSize ?? partSize}
+                onChange={(event: ChangeEvent<HTMLInputElement>) => {
+                    rootPart.onChange?.(event);
+                    onChange?.(event.currentTarget.value, {
+                        source: 'user',
+                        nativeEvent: event.nativeEvent,
+                    });
+                }}
+                className={classNames(
+                    'cratis-primereact10-text-input',
+                    rootPart.className,
+                    className,
+                )}
+                style={{ ...rootPart.style, ...style }}
+                data-cratis-part='root'
+                data-disabled={effectiveDisabled || undefined}
+                data-invalid={effectiveInvalid || undefined}
+                data-readonly={effectiveReadOnly || undefined}
+            />
+        );
+    },
+);
+
+const PrimeTextAreaSlot = forwardRef<HTMLTextAreaElement, TextAreaProps>(
+    function PrimeTextAreaSlot(
+        {
+            invalid = false,
+            onChange,
+            pt,
+            className,
+            style,
+            disabled,
+            readOnly,
+            value,
+            'aria-invalid': ariaInvalid,
+            ...nativeProps
+        },
+        ref,
+    ) {
+        const effectiveDisabled = disabled ?? pt?.root?.disabled;
+        const effectiveReadOnly = readOnly ?? pt?.root?.readOnly;
+        const effectiveAriaInvalid =
+            ariaInvalid ?? pt?.root?.['aria-invalid'] ?? (invalid || undefined);
+        const effectiveInvalid =
+            invalid ||
+            effectiveAriaInvalid === true ||
+            effectiveAriaInvalid === 'true';
+        return (
+            <PrimeInputTextarea
+                {...pt?.root}
+                {...nativeProps}
+                ref={ref}
+                value={
+                    value === undefined
+                        ? undefined
+                        : Array.isArray(value)
+                          ? value.join(',')
+                          : String(value)
+                }
+                disabled={effectiveDisabled}
+                readOnly={effectiveReadOnly}
+                invalid={effectiveInvalid}
+                aria-invalid={effectiveAriaInvalid}
+                onChange={(event: ChangeEvent<HTMLTextAreaElement>) => {
+                    pt?.root?.onChange?.(event);
+                    onChange?.(event.currentTarget.value, {
+                        source: 'user',
+                        nativeEvent: event.nativeEvent,
+                    });
+                }}
+                className={classNames(
+                    'cratis-primereact10-text-area',
+                    pt?.root?.className,
+                    className,
+                )}
+                style={{ ...pt?.root?.style, ...style }}
+                data-cratis-part='root'
+                data-disabled={effectiveDisabled || undefined}
+                data-invalid={effectiveInvalid || undefined}
+                data-readonly={effectiveReadOnly || undefined}
+            />
+        );
+    },
+);
+
+const assignRef = <T,>(ref: ForwardedRef<T>, value: T | null) => {
+    if (typeof ref === 'function') ref(value);
+    else if (ref) ref.current = value;
+};
+
+const useNativeCheckedState = (
+    checked: boolean | undefined,
+    defaultChecked: boolean | undefined,
+    forwardedRef: ForwardedRef<HTMLInputElement>,
+    observeRadioGroup = false,
+) => {
+    const inputRef = useRef<HTMLInputElement>(null);
+    const [selected, setSelected] = useState(Boolean(defaultChecked));
+    const controlled = checked !== undefined;
+    const ref = useCallback(
+        (input: HTMLInputElement | null) => {
+            inputRef.current = input;
+            assignRef(forwardedRef, input);
+        },
+        [forwardedRef],
+    );
+    useEffect(() => {
+        const input = inputRef.current;
+        if (!input || controlled) return;
+        const synchronize = () => queueMicrotask(() => setSelected(input.checked));
+        input.form?.addEventListener('reset', synchronize);
+        if (observeRadioGroup)
+            input.ownerDocument.addEventListener('change', synchronize);
+        return () => {
+            input.form?.removeEventListener('reset', synchronize);
+            if (observeRadioGroup)
+                input.ownerDocument.removeEventListener('change', synchronize);
+        };
+    }, [controlled, observeRadioGroup]);
+    return {
+        ref,
+        selected: checked ?? selected,
+        synchronize: (next: boolean) => {
+            if (!controlled) setSelected(next);
+        },
+    };
+};
+
+type ChoiceProps = CheckboxProps | RadioProps | SwitchProps;
+type ChoiceParts = CheckboxParts | RadioParts | SwitchParts;
+type ChoiceKind = 'checkbox' | 'radio' | 'switch';
+type DataAttributes = {
+    [name: `data-${string}`]: string | number | boolean | undefined;
+};
+type InputPart = InputHTMLAttributes<HTMLInputElement> & DataAttributes;
+
+const stateAttributes = (
+    disabled: boolean | undefined,
+    invalid: boolean,
+    readOnly: boolean | undefined,
+    selected: boolean,
+) => ({
+    'data-disabled': disabled || undefined,
+    'data-invalid': invalid || undefined,
+    'data-readonly': readOnly || undefined,
+    'data-selected': selected || undefined,
+});
+
+interface PrimeBooleanChangeEvent {
+    readonly checked?: boolean;
+    readonly originalEvent?: SyntheticEvent;
+}
+
+const PrimeChoice = ({
+    kind,
+    props,
+    forwardedRef,
+}: {
+    readonly kind: ChoiceKind;
+    readonly props: ChoiceProps;
+    readonly forwardedRef: ForwardedRef<HTMLInputElement>;
+}) => {
+    const parts = props.pt as ChoiceParts | undefined;
+    const inputPart = parts?.input as InputPart | undefined;
+    const checked = props.checked ?? inputPart?.checked;
+    const defaultChecked = props.defaultChecked ?? inputPart?.defaultChecked;
+    const disabled = props.disabled ?? inputPart?.disabled;
+    const readOnly = props.readOnly ?? inputPart?.readOnly;
+    const ariaInvalid =
+        props['aria-invalid'] ??
+        inputPart?.['aria-invalid'] ??
+        (props.invalid || undefined);
+    const invalid =
+        Boolean(props.invalid) || ariaInvalid === true || ariaInvalid === 'true';
+    const state = useNativeCheckedState(
+        checked,
+        defaultChecked,
+        forwardedRef,
+        kind === 'radio',
+    );
+    const attributes = stateAttributes(disabled, invalid, readOnly, state.selected);
+    const {
+        label,
+        readOnly: _readOnly,
+        invalid: _invalid,
+        onChange,
+        className,
+        style,
+        pt: _parts,
+        checked: _checked,
+        defaultChecked: _defaultChecked,
+        disabled: _disabled,
+        onClick,
+        id,
+        'aria-invalid': _ariaInvalid,
+        ...nativeProps
+    } = props;
+    const {
+        onClick: partOnClick,
+        onChange: partOnChange,
+        className: inputClassName,
+        style: inputStyle,
+        checked: _partChecked,
+        defaultChecked: _partDefaultChecked,
+        disabled: _partDisabled,
+        readOnly: _partReadOnly,
+        id: partId,
+        ...inputPartRest
+    } = inputPart ?? {};
+    const radio = props as RadioProps;
+    const inputId = id ?? partId;
+    const input: InputPart = {
+        ...inputPartRest,
+        ...nativeProps,
+        id: inputId,
+        name: kind === 'radio' ? radio.name : nativeProps.name,
+        value: kind === 'radio' ? radio.value : nativeProps.value,
+        defaultChecked: kind === 'radio' ? defaultChecked : undefined,
+        'aria-invalid': ariaInvalid,
+        'aria-readonly': readOnly || undefined,
+        role: kind === 'switch' ? 'switch' : nativeProps.role,
+        className: classNames('cratis-primereact10-choice__input', inputClassName),
+        style: inputStyle,
+        'data-cratis-part': 'input',
+        ...attributes,
+        onClick: (event) => {
+            partOnClick?.(event);
+            onClick?.(event);
+            if (readOnly) event.preventDefault();
+        },
+    };
+    const changed = (event: PrimeBooleanChangeEvent) => {
+        const originalEvent = event.originalEvent;
+        if (originalEvent) {
+            // SAFETY: PrimeReact 10 boolean controls originate this callback from the native
+            // input change event; its public legacy type erases the specific ChangeEvent subtype.
+            partOnChange?.(originalEvent as ChangeEvent<HTMLInputElement>);
+        }
+        const nextChecked = Boolean(event.checked);
+        if (readOnly || (kind === 'radio' && !nextChecked)) return;
+        state.synchronize(nextChecked);
+        onChange?.(nextChecked, {
+            source: 'user',
+            nativeEvent: originalEvent?.nativeEvent,
+        });
+    };
+    const checkboxParts = parts as CheckboxParts | undefined;
+    const radioParts = parts as RadioParts | undefined;
+    const switchParts = parts as SwitchParts | undefined;
+    return (
+        <label
+            {...parts?.root}
+            className={classNames(
+                'cratis-primereact10-choice',
+                parts?.root?.className,
+                className,
+            )}
+            style={{ ...parts?.root?.style, ...style }}
+            data-cratis-part='root'
+            {...attributes}
+        >
+            {kind === 'checkbox' ? (
+                <>
+                    <PrimeCheckbox
+                    checked={state.selected}
+                    disabled={disabled}
+                    readOnly={readOnly}
+                    required={nativeProps.required}
+                    invalid={invalid}
+                    name={nativeProps.name}
+                    value={nativeProps.value}
+                    inputId={inputId}
+                    inputRef={state.ref}
+                    aria-label={nativeProps['aria-label']}
+                    aria-labelledby={nativeProps['aria-labelledby']}
+                    onChange={changed}
+                    pt={
+                        {
+                            input,
+                            box: {
+                                ...checkboxParts?.box,
+                                'data-cratis-part': 'box',
+                                ...attributes,
+                            },
+                            icon: {
+                                ...checkboxParts?.indicator,
+                                'data-cratis-part': 'indicator',
+                                'aria-hidden': true,
+                                ...attributes,
+                            },
+                        } as unknown as CheckboxPassThroughOptions
+                    }
+                    />
+                    <span
+                        {...checkboxParts?.indicator}
+                        className={classNames(
+                            'p-checkbox-icon',
+                            checkboxParts?.indicator?.className,
+                        )}
+                        data-cratis-part='indicator'
+                        aria-hidden='true'
+                        {...attributes}
+                    >
+                        ✓
+                    </span>
+                </>
+            ) : kind === 'radio' ? (
+                <PrimeRadioButton
+                    checked={state.selected}
+                    disabled={disabled}
+                    readOnly={readOnly}
+                    required={nativeProps.required}
+                    invalid={invalid}
+                    name={radio.name}
+                    value={radio.value}
+                    inputId={inputId}
+                    inputRef={state.ref}
+                    aria-label={nativeProps['aria-label']}
+                    aria-labelledby={nativeProps['aria-labelledby']}
+                    onChange={changed}
+                    pt={
+                        {
+                            input,
+                            box: {
+                                ...radioParts?.box,
+                                'data-cratis-part': 'box',
+                                ...attributes,
+                            },
+                            icon: {
+                                ...radioParts?.indicator,
+                                'data-cratis-part': 'indicator',
+                                'aria-hidden': true,
+                                ...attributes,
+                            },
+                        } as unknown as RadioButtonPassThroughOptions
+                    }
+                />
+            ) : (
+                <PrimeInputSwitch
+                    checked={state.selected}
+                    disabled={disabled}
+                    name={nativeProps.name}
+                    inputId={inputId}
+                    inputRef={state.ref}
+                    aria-label={nativeProps['aria-label']}
+                    aria-labelledby={nativeProps['aria-labelledby']}
+                    onChange={changed}
+                    pt={{
+                        root: {
+                            role: 'presentation',
+                            'aria-checked': undefined,
+                            'aria-label': undefined,
+                            'aria-labelledby': undefined,
+                        },
+                        input,
+                        slider: {
+                            ...switchParts?.control,
+                            'data-cratis-part': 'control',
+                            ...attributes,
+                            children: (
+                                <span
+                                    {...switchParts?.handle}
+                                    data-cratis-part='handle'
+                                    aria-hidden='true'
+                                    {...attributes}
+                                />
+                            ),
+                        },
+                    }}
+                />
+            )}
+            {label === undefined ? null : (
+                <span
+                    {...parts?.label}
+                    className={classNames(
+                        'cratis-primereact10-choice__label',
+                        parts?.label?.className,
+                    )}
+                    data-cratis-part='label'
+                    {...attributes}
+                >
+                    {label}
+                </span>
+            )}
+        </label>
+    );
+};
+
+const PrimeCheckboxSlot = forwardRef<HTMLInputElement, CheckboxProps>(
+    function PrimeCheckboxSlot(props, ref) {
+        return <PrimeChoice kind='checkbox' props={props} forwardedRef={ref} />;
+    },
+);
+
+const PrimeRadioSlot = forwardRef<HTMLInputElement, RadioProps>(
+    function PrimeRadioSlot(props, ref) {
+        return <PrimeChoice kind='radio' props={props} forwardedRef={ref} />;
+    },
+);
+
+const PrimeSwitchSlot = forwardRef<HTMLInputElement, SwitchProps>(
+    function PrimeSwitchSlot(props, ref) {
+        return <PrimeChoice kind='switch' props={props} forwardedRef={ref} />;
+    },
+);
+
+const PrimeProgressSlot = ({
+    value = 0,
+    mode = 'determinate',
+    showValue = true,
+    'aria-label': ariaLabel = 'Progress',
+    'aria-labelledby': ariaLabelledBy,
+    className,
+}: ProgressBarProps) => {
+    const boundedValue = Math.min(100, Math.max(0, value));
+    const determinate = mode === 'determinate';
+    const busy = !determinate || boundedValue < 100;
+    return (
+        <PrimeProgressBar
+            value={boundedValue}
+            mode={mode}
+            showValue={showValue}
+            className={classNames('cratis-primereact10-progress', className)}
+            aria-label={ariaLabelledBy ? undefined : ariaLabel}
+            aria-labelledby={ariaLabelledBy}
+            data-cratis-part='root'
+            data-mode={mode}
+            data-busy={busy || undefined}
+            data-loading={!determinate || undefined}
+            pt={{
+                value: { 'data-cratis-part': 'indicator' },
+                label: {
+                    'data-cratis-part': 'label',
+                    'aria-hidden': true,
+                },
+            }}
+        />
+    );
+};
+
+const PrimeSurfaceSlot = forwardRef<HTMLElement, SurfaceProps>(
+    function PrimeSurfaceSlot(
+        { as: Element = 'div', pt, className, style, children, ...nativeProps },
+        ref,
+    ) {
+        const surfaceRef = useCallback(
+            (element: HTMLElement | null) => assignRef(ref, element),
+            [ref],
+        );
+        return (
+            <Element
+                {...pt?.root}
+                {...nativeProps}
+                ref={surfaceRef}
+                className={classNames(
+                    'cratis-primereact10-surface',
+                    pt?.root?.className,
+                    className,
+                )}
+                style={{ ...pt?.root?.style, ...style }}
+                data-cratis-part='root'
+            >
+                <PrimeCard>{children}</PrimeCard>
+            </Element>
+        );
+    },
+);
+
+const declaration = <SlotId extends unstable_SlotId>(
+    render: unstable_SlotDeclaration<SlotId>['render'],
+) =>
+    Object.freeze({
+        mode: 'presentation',
+        fidelity: 'native',
+        render,
+    }) satisfies unstable_SlotDeclaration<SlotId>;
+
+const slots = Object.freeze({
+    'common.button': declaration<'common.button'>(PrimeButtonSlot),
+    'common.iconButton': declaration<'common.iconButton'>(PrimeIconButtonSlot),
+    'common.textInput': declaration<'common.textInput'>(PrimeTextInputSlot),
+    'common.textArea': declaration<'common.textArea'>(PrimeTextAreaSlot),
+    'common.checkbox': declaration<'common.checkbox'>(PrimeCheckboxSlot),
+    'common.radio': declaration<'common.radio'>(PrimeRadioSlot),
+    'common.switch': declaration<'common.switch'>(PrimeSwitchSlot),
+    'common.progress': declaration<'common.progress'>(PrimeProgressSlot),
+    'common.surface': declaration<'common.surface'>(PrimeSurfaceSlot),
+});
+
+/** PrimeReact 10 implementation of the stable Cratis presentation profile. */
+export const primeReact10UiLibrary: unstable_UiLibrary = unstable_defineUiLibrary({
+    id: 'cratis-primereact10',
+    displayName: 'Cratis PrimeReact 10 renderer',
+    abi: unstable_CRATIS_UI_ABI_VERSION,
+    level: 'primitive',
+    profile: 'stable-presentation/v1',
+    profileSlots,
+    capabilities,
+    slots,
+    Provider: PrimeReact10AdapterProvider,
+});
diff --git a/Adapters/PrimeReact10/src/upstream-type-shim.d.ts b/Adapters/PrimeReact10/src/upstream-type-shim.d.ts
new file mode 100644
index 00000000..065f47dc
--- /dev/null
+++ b/Adapters/PrimeReact10/src/upstream-type-shim.d.ts
@@ -0,0 +1,14 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { ReactElement } from 'react';
+
+/**
+ * @internal Compile-only bridge for PrimeReact 10.9.8 declarations that still name global JSX
+ * under React 19 and for the exact Arc React 22.4.0 declaration. It is never emitted or packed.
+ */
+declare global {
+    namespace JSX {
+        type Element = ReactElement;
+    }
+}
diff --git a/Adapters/PrimeReact10/tsconfig.build.json b/Adapters/PrimeReact10/tsconfig.build.json
new file mode 100644
index 00000000..78f5ca51
--- /dev/null
+++ b/Adapters/PrimeReact10/tsconfig.build.json
@@ -0,0 +1,20 @@
+{
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "composite": false,
+        "declaration": true,
+        "declarationMap": true,
+        "outDir": "dist",
+        "rootDir": "src",
+        "module": "ESNext",
+        "moduleResolution": "bundler",
+        "baseUrl": ".",
+        "paths": {
+            "primereact/api": ["src/primereact10-api-shim.d.ts"]
+        },
+        "skipLibCheck": false,
+        "types": []
+    },
+    "include": ["src/**/*.ts", "src/**/*.tsx"],
+    "exclude": ["**/for_*/**", "dist", "node_modules"]
+}
diff --git a/Adapters/PrimeReact10/tsconfig.json b/Adapters/PrimeReact10/tsconfig.json
new file mode 100644
index 00000000..85a29eb4
--- /dev/null
+++ b/Adapters/PrimeReact10/tsconfig.json
@@ -0,0 +1,23 @@
+{
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "composite": false,
+        "noEmit": true,
+        "module": "ESNext",
+        "moduleResolution": "bundler",
+        "baseUrl": ".",
+        "paths": {
+            "primereact/api": ["src/primereact10-api-shim.d.ts"]
+        },
+        "skipLibCheck": false,
+        "types": ["vitest/globals"]
+    },
+    "include": [
+        "src/**/*.ts",
+        "src/**/*.tsx",
+        "for_*/**/*.ts",
+        "for_*/**/*.tsx",
+        "vitest.setup.ts"
+    ],
+    "exclude": ["dist", "node_modules"]
+}
diff --git a/Adapters/PrimeReact10/vitest.config.ts b/Adapters/PrimeReact10/vitest.config.ts
new file mode 100644
index 00000000..2abb3de8
--- /dev/null
+++ b/Adapters/PrimeReact10/vitest.config.ts
@@ -0,0 +1,17 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { fileURLToPath } from 'node:url';
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+    root: fileURLToPath(new URL('.', import.meta.url)),
+    test: {
+        environment: 'jsdom',
+        globals: true,
+        include: ['for_*/**/when_*.ts', 'for_*/**/when_*.tsx'],
+        setupFiles: ['./vitest.setup.ts'],
+        isolate: true,
+        fileParallelism: false,
+    },
+});
diff --git a/Adapters/PrimeReact10/vitest.setup.ts b/Adapters/PrimeReact10/vitest.setup.ts
new file mode 100644
index 00000000..4136ae79
--- /dev/null
+++ b/Adapters/PrimeReact10/vitest.setup.ts
@@ -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 { should } from 'chai';
+
+should();
+// SAFETY: React's test environment marker is intentionally attached to the process-wide global.
+(
+    globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
+).IS_REACT_ACT_ENVIRONMENT = true;
+
+if (!globalThis.ResizeObserver) {
+    globalThis.ResizeObserver = class ResizeObserver {
+        observe() {
+            return undefined;
+        }
+        unobserve() {
+            return undefined;
+        }
+        disconnect() {
+            return undefined;
+        }
+    };
+}
+
+if (!Element.prototype.scrollIntoView) {
+    Element.prototype.scrollIntoView = () => undefined;
+}
diff --git a/yarn.lock b/yarn.lock
index e12b5c5f..19b5aa21 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -345,6 +345,29 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@cratis/components.primereact10@workspace:Adapters/PrimeReact10":
+  version: 0.0.0-use.local
+  resolution: "@cratis/components.primereact10@workspace:Adapters/PrimeReact10"
+  dependencies:
+    "@cratis/arc": "npm:22.4.0"
+    "@cratis/arc.react": "npm:22.4.0"
+    "@cratis/components": "workspace:^"
+    "@cratis/components.conformance": "workspace:^"
+    "@cratis/fundamentals": "npm:^7.10.3"
+    "@types/react": "npm:19.2.18"
+    primereact: "npm:10.9.8"
+    react: "npm:19.2.8"
+    react-dom: "npm:19.2.8"
+    reflect-metadata: "npm:0.2.2"
+    tsyringe: "npm:4.10.0"
+  peerDependencies:
+    "@cratis/components": ">=3.0.0 <4"
+    primereact: ">=10 <11"
+    react: ^19.0.0
+    react-dom: ^19.0.0
+  languageName: unknown
+  linkType: soft
+
 "@cratis/components.primereact@workspace:Adapters/PrimeReact":
   version: 0.0.0-use.local
   resolution: "@cratis/components.primereact@workspace:Adapters/PrimeReact"
@@ -3004,7 +3027,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-transition-group@npm:^4.4.12":
+"@types/react-transition-group@npm:^4.4.1, @types/react-transition-group@npm:^4.4.12":
   version: 4.4.12
   resolution: "@types/react-transition-group@npm:4.4.12"
   peerDependencies:
@@ -3013,7 +3036,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react@npm:^19.2.18":
+"@types/react@npm:19.2.18, @types/react@npm:^19.2.18":
   version: 19.2.18
   resolution: "@types/react@npm:19.2.18"
   dependencies:
@@ -7253,6 +7276,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"primereact@npm:10.9.8":
+  version: 10.9.8
+  resolution: "primereact@npm:10.9.8"
+  dependencies:
+    "@types/react-transition-group": "npm:^4.4.1"
+    react-transition-group: "npm:^4.4.1"
+  peerDependencies:
+    "@types/react": ^17.0.0 || ^18.0.0 || ^19.0.0
+    react: ^17.0.0 || ^18.0.0 || ^19.0.0
+    react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/33e1ed3b69829b02f40fb3547063f2432f1b7a23d39d418bdf83b5ba57084c0e8521d77646818982e00e57c9e47db51036fe166915f8b08501de729f2c4ab3dc
+  languageName: node
+  linkType: hard
+
 "primereact@npm:11.1.0":
   version: 11.1.0
   resolution: "primereact@npm:11.1.0"
@@ -7372,7 +7412,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-dom@npm:^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0, react-dom@npm:^19.0.0, react-dom@npm:^19.2.8":
+"react-dom@npm:19.2.8, react-dom@npm:^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0, react-dom@npm:^19.0.0, react-dom@npm:^19.2.8":
   version: 19.2.8
   resolution: "react-dom@npm:19.2.8"
   dependencies:
@@ -7429,7 +7469,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-transition-group@npm:^4.4.5":
+"react-transition-group@npm:^4.4.1, react-transition-group@npm:^4.4.5":
   version: 4.4.5
   resolution: "react-transition-group@npm:4.4.5"
   dependencies:
@@ -7444,7 +7484,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react@npm:^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0, react@npm:^19.0.0, react@npm:^19.2.8":
+"react@npm:19.2.8, react@npm:^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0, react@npm:^19.0.0, react@npm:^19.2.8":
   version: 19.2.8
   resolution: "react@npm:19.2.8"
   checksum: 10/a3c697798035e295ca9e51591d3a8700824535cb8c070fac1f8abbe69717ceb99108cbc4ba7b31a606806f336b1eba705705f63b9d39ace198fe51e8990ac843

From 792f2597530cc0f050a0b8ec3f4efe75420b9839 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Fri, 28 Aug 2026 15:52:47 +0200
Subject: [PATCH 233/267] Complete PrimeReact 10 adapter certification

Move the legacy renderer proof to patched PrimeReact 10.9.9 and make its strict build, Node runtime, package-manager consumers, accessibility semantics, licensing, and hosted CI coverage reproducible before the Storybook isolation tranche.
---
 .github/workflows/javascript-build.yml        | 165 +++++++++---
 .github/workflows/markdown-verification.yml   |   8 +-
 Adapters/PrimeReact10/CONFORMANCE.md          |  51 ++--
 Adapters/PrimeReact10/LICENSE                 |   4 +-
 Adapters/PrimeReact10/README.md               |  93 ++++---
 Adapters/PrimeReact10/THIRD_PARTY_NOTICES.md  |  35 ++-
 ..._the_primereact10_presentation_profile.tsx |  56 ++++-
 Adapters/PrimeReact10/package.json            |   6 +-
 .../scripts/verify-packed-package.mjs         |  53 +++-
 .../scripts/verify-upstream-shim.mjs          |  37 ++-
 .../scripts/verify-workspace-isolation.mjs    |  24 +-
 Adapters/PrimeReact10/src/index.tsx           | 235 +++++++++---------
 .../src/upstream-primereact-api-shim.d.ts     |  27 ++
 .../PrimeReact10/src/upstream-type-shim.d.ts  |   2 +-
 Adapters/PrimeReact10/tsconfig.build.json     |  25 +-
 Adapters/PrimeReact10/tsconfig.json           |  25 +-
 Documentation/verify-local-links.mjs          |  12 +-
 Source/README.md                              |   4 +-
 yarn.lock                                     |  12 +-
 19 files changed, 585 insertions(+), 289 deletions(-)
 create mode 100644 Adapters/PrimeReact10/src/upstream-primereact-api-shim.d.ts

diff --git a/.github/workflows/javascript-build.yml b/.github/workflows/javascript-build.yml
index ec35cc16..5b3069e7 100644
--- a/.github/workflows/javascript-build.yml
+++ b/.github/workflows/javascript-build.yml
@@ -24,6 +24,7 @@ on:
             - 'Codemods/**'
             - 'ESLint/**'
             - 'Conformance/**'
+            - 'Adapters/**'
             - 'package.json'
             - 'rollup.config.mjs'
             - 'yarn.lock'
@@ -38,6 +39,7 @@ on:
             - 'Codemods/**'
             - 'ESLint/**'
             - 'Conformance/**'
+            - 'Adapters/**'
             - 'package.json'
             - 'rollup.config.mjs'
             - 'yarn.lock'
@@ -55,15 +57,15 @@ jobs:
 
         steps:
             - name: Checkout code
-              uses: actions/checkout@v4
+              uses: actions/checkout@11d5960a326750d5838078e36cf38b85af677262 # v4
 
             - name: Setup node
-              uses: actions/setup-node@v4
+              uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
               with:
                   node-version: 23.x
                   registry-url: 'https://registry.npmjs.org'
 
-            - uses: actions/cache@v4
+            - uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4
               id: yarn-cache
               with:
                   path: |
@@ -136,15 +138,15 @@ jobs:
 
         steps:
             - name: Checkout code
-              uses: actions/checkout@v4
+              uses: actions/checkout@11d5960a326750d5838078e36cf38b85af677262 # v4
 
             - name: Setup node
-              uses: actions/setup-node@v4
+              uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
               with:
                   node-version: 23.x
                   registry-url: 'https://registry.npmjs.org'
 
-            - uses: actions/cache@v4
+            - uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4
               id: yarn-cache
               with:
                   path: |
@@ -180,15 +182,15 @@ jobs:
 
         steps:
             - name: Checkout code
-              uses: actions/checkout@v4
+              uses: actions/checkout@11d5960a326750d5838078e36cf38b85af677262 # v4
 
             - name: Setup node
-              uses: actions/setup-node@v4
+              uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
               with:
                   node-version: 23.x
                   registry-url: 'https://registry.npmjs.org'
 
-            - uses: actions/cache@v4
+            - uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4
               id: yarn-cache
               with:
                   path: |
@@ -212,7 +214,7 @@ jobs:
 
             - name: Upload verify-public-types report
               if: always()
-              uses: actions/upload-artifact@v4
+              uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
               with:
                   name: verify-public-types-report
                   path: ${{ runner.temp }}/verify-public-types-report.json
@@ -230,15 +232,15 @@ jobs:
 
         steps:
             - name: Checkout code
-              uses: actions/checkout@v4
+              uses: actions/checkout@11d5960a326750d5838078e36cf38b85af677262 # v4
 
             - name: Setup node
-              uses: actions/setup-node@v4
+              uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
               with:
                   node-version: 23.x
                   registry-url: 'https://registry.npmjs.org'
 
-            - uses: actions/cache@v4
+            - uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4
               id: yarn-cache
               with:
                   path: |
@@ -262,7 +264,7 @@ jobs:
 
             - name: Upload verify-package-graph report
               if: always()
-              uses: actions/upload-artifact@v4
+              uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
               with:
                   name: verify-package-graph-report
                   path: ${{ runner.temp }}/verify-package-graph-report.json
@@ -278,15 +280,15 @@ jobs:
 
         steps:
             - name: Checkout code
-              uses: actions/checkout@v4
+              uses: actions/checkout@11d5960a326750d5838078e36cf38b85af677262 # v4
 
             - name: Setup node
-              uses: actions/setup-node@v4
+              uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
               with:
                   node-version: 23.x
                   registry-url: 'https://registry.npmjs.org'
 
-            - uses: actions/cache@v4
+            - uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4
               id: yarn-cache
               with:
                   path: |
@@ -318,15 +320,15 @@ jobs:
 
         steps:
             - name: Checkout code
-              uses: actions/checkout@v4
+              uses: actions/checkout@11d5960a326750d5838078e36cf38b85af677262 # v4
 
             - name: Setup node
-              uses: actions/setup-node@v4
+              uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
               with:
                   node-version: 23.x
                   registry-url: 'https://registry.npmjs.org'
 
-            - uses: actions/cache@v4
+            - uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4
               id: yarn-cache
               with:
                   path: |
@@ -359,15 +361,15 @@ jobs:
 
         steps:
             - name: Checkout code
-              uses: actions/checkout@v4
+              uses: actions/checkout@11d5960a326750d5838078e36cf38b85af677262 # v4
 
             - name: Setup node
-              uses: actions/setup-node@v4
+              uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
               with:
                   node-version: 23.x
                   registry-url: 'https://registry.npmjs.org'
 
-            - uses: actions/cache@v4
+            - uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4
               id: yarn-cache
               with:
                   path: |
@@ -399,10 +401,10 @@ jobs:
 
         steps:
             - name: Checkout code
-              uses: actions/checkout@v4
+              uses: actions/checkout@11d5960a326750d5838078e36cf38b85af677262 # v4
 
             - name: Setup node
-              uses: actions/setup-node@v4
+              uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
               with:
                   node-version: 23.x
                   registry-url: 'https://registry.npmjs.org'
@@ -471,10 +473,10 @@ jobs:
 
         steps:
             - name: Checkout code
-              uses: actions/checkout@v4
+              uses: actions/checkout@11d5960a326750d5838078e36cf38b85af677262 # v4
 
             - name: Setup node
-              uses: actions/setup-node@v4
+              uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
               with:
                   node-version: 23.x
                   registry-url: 'https://registry.npmjs.org'
@@ -509,7 +511,8 @@ jobs:
                   npm install --ignore-scripts --no-audit --no-fund \
                     /tmp/cratis-components.tgz \
                     @cratis/arc@22.3.0 @cratis/arc.react@22.3.0 \
-                    @cratis/fundamentals@7.18.1 react@19.2.8 react-dom@19.2.8 \
+                    @cratis/fundamentals@7.18.1 @types/react@19.2.18 \
+                    react@19.2.8 react-dom@19.2.8 \
                     reflect-metadata@0.2.2 tsyringe@4.10.0 "${PIXI[@]}"
                   node verify.mjs "${{ matrix.pixi }}"
 
@@ -523,7 +526,8 @@ jobs:
                   pnpm add --ignore-scripts --strict-peer-dependencies \
                     /tmp/cratis-components.tgz \
                     @cratis/arc@22.3.0 @cratis/arc.react@22.3.0 \
-                    @cratis/fundamentals@7.18.1 react@19.2.8 react-dom@19.2.8 \
+                    @cratis/fundamentals@7.18.1 @types/react@19.2.18 \
+                    react@19.2.8 react-dom@19.2.8 \
                     reflect-metadata@0.2.2 tsyringe@4.10.0 "${PIXI[@]}"
                   pnpm exec node verify.mjs "${{ matrix.pixi }}"
 
@@ -546,6 +550,107 @@ jobs:
                   yarn add \
                     /tmp/cratis-components.tgz \
                     @cratis/arc@22.3.0 @cratis/arc.react@22.3.0 \
-                    @cratis/fundamentals@7.18.1 react@19.2.8 react-dom@19.2.8 \
+                    @cratis/fundamentals@7.18.1 @types/react@19.2.18 \
+                    react@19.2.8 react-dom@19.2.8 \
                     reflect-metadata@0.2.2 tsyringe@4.10.0 rxjs@7.8.2 "${PIXI[@]}"
                   yarn node verify.mjs "${{ matrix.pixi }}"
+
+    verify-primereact10-package-managers:
+        runs-on: ubuntu-latest
+        timeout-minutes: 20
+        strategy:
+            fail-fast: false
+            matrix:
+                manager: [npm, pnpm, yarn-pnp]
+
+        steps:
+            - name: Checkout code
+              uses: actions/checkout@11d5960a326750d5838078e36cf38b85af677262 # v4
+
+            - name: Setup node
+              uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
+              with:
+                  node-version: 23.x
+                  registry-url: 'https://registry.npmjs.org'
+
+            - name: Enable Corepack
+              run: corepack enable
+
+            - name: Yarn install
+              run: yarn install --immutable
+
+            - name: Build and pack Core and PrimeReact 10 adapter
+              run: |
+                  yarn workspace @cratis/components prepare
+                  yarn workspace @cratis/components.conformance build
+                  yarn workspace @cratis/components.primereact10 ci
+                  yarn workspace @cratis/components pack --out /tmp/cratis-components.tgz
+                  yarn workspace @cratis/components.primereact10 pack \
+                    --out /tmp/cratis-components-primereact10.tgz
+
+            - name: Create renderer consumer fixture
+              run: |
+                  mkdir /tmp/primereact10-consumer
+                  cat > /tmp/primereact10-consumer/package.json <<'JSON'
+                  {"private":true,"type":"module"}
+                  JSON
+                  cat > /tmp/primereact10-consumer/verify.mjs <<'JS'
+                  const api = await import('@cratis/components.primereact10');
+                  if (Object.keys(api).join(',') !== 'primeReact10UiLibrary') {
+                      throw new Error('PrimeReact 10 adapter exposes an unexpected public value.');
+                  }
+                  if (api.primeReact10UiLibrary.id !== 'cratis-primereact10') {
+                      throw new Error('PrimeReact 10 adapter loaded the wrong renderer manifest.');
+                  }
+                  JS
+
+            - name: Verify npm renderer consumer
+              if: matrix.manager == 'npm'
+              working-directory: /tmp/primereact10-consumer
+              run: |
+                  npm install --ignore-scripts --no-audit --no-fund \
+                    /tmp/cratis-components.tgz \
+                    /tmp/cratis-components-primereact10.tgz \
+                    primereact@10.9.9 \
+                    @cratis/arc@22.4.0 @cratis/arc.react@22.4.0 \
+                    @cratis/fundamentals@7.18.1 @types/react@19.2.18 \
+                    react@19.2.8 react-dom@19.2.8 \
+                    reflect-metadata@0.2.2 tsyringe@4.10.0
+                  node verify.mjs
+
+            - name: Verify pnpm renderer consumer
+              if: matrix.manager == 'pnpm'
+              working-directory: /tmp/primereact10-consumer
+              run: |
+                  corepack prepare pnpm@10.17.1 --activate
+                  pnpm add --ignore-scripts --strict-peer-dependencies \
+                    /tmp/cratis-components.tgz \
+                    /tmp/cratis-components-primereact10.tgz \
+                    primereact@10.9.9 \
+                    @cratis/arc@22.4.0 @cratis/arc.react@22.4.0 \
+                    @cratis/fundamentals@7.18.1 @types/react@19.2.18 \
+                    react@19.2.8 react-dom@19.2.8 \
+                    reflect-metadata@0.2.2 tsyringe@4.10.0
+                  pnpm exec node verify.mjs
+
+            - name: Verify Yarn PnP renderer consumer
+              if: matrix.manager == 'yarn-pnp'
+              working-directory: /tmp/primereact10-consumer
+              run: |
+                  corepack prepare yarn@4.5.3 --activate
+                  cat > .yarnrc.yml <<'YAML'
+                  nodeLinker: pnp
+                  packageExtensions:
+                    "@cratis/arc.react@*":
+                      dependencies:
+                        rxjs: "*"
+                  YAML
+                  yarn add \
+                    /tmp/cratis-components.tgz \
+                    /tmp/cratis-components-primereact10.tgz \
+                    primereact@10.9.9 \
+                    @cratis/arc@22.4.0 @cratis/arc.react@22.4.0 \
+                    @cratis/fundamentals@7.18.1 @types/react@19.2.18 \
+                    react@19.2.8 react-dom@19.2.8 \
+                    reflect-metadata@0.2.2 tsyringe@4.10.0 rxjs@7.8.2
+                  yarn node verify.mjs
diff --git a/.github/workflows/markdown-verification.yml b/.github/workflows/markdown-verification.yml
index e4cb25e9..d24da94f 100644
--- a/.github/workflows/markdown-verification.yml
+++ b/.github/workflows/markdown-verification.yml
@@ -12,6 +12,7 @@ on:
             - 'Codemods/*.md'
             - 'ESLint/*.md'
             - 'Conformance/*.md'
+            - 'Adapters/**/*.md'
     pull_request:
         branches:
             - '**'
@@ -22,6 +23,7 @@ on:
             - 'Codemods/*.md'
             - 'ESLint/*.md'
             - 'Conformance/*.md'
+            - 'Adapters/**/*.md'
 
 concurrency:
     group: ${{ github.workflow }}-${{ github.ref }}
@@ -51,6 +53,7 @@ jobs:
                       Codemods/*.md
                       ESLint/*.md
                       Conformance/*.md
+                      Adapters/**/*.md
 
     link-verification:
         runs-on: ubuntu-latest
@@ -67,7 +70,9 @@ jobs:
                   node-version: 23.x
 
             - name: Check repository-local Markdown and MDX links
-              run: node Documentation/verify-local-links.mjs Documentation
+              run: |
+                  node Documentation/verify-local-links.mjs Documentation
+                  node Documentation/verify-local-links.mjs Adapters
 
             - name: Check external links in consumer documentation
               uses: JustinBeckwith/linkinator-action@7b6b0bc671f6264e1a8daa4488a5bd91ce61dcd4 # v2.4.2
@@ -78,6 +83,7 @@ jobs:
                       Codemods/*.md
                       ESLint/*.md
                       Conformance/*.md
+                      Adapters/**/*.md
                       Documentation/**/*.md
                       Documentation/**/*.mdx
                   markdown: true
diff --git a/Adapters/PrimeReact10/CONFORMANCE.md b/Adapters/PrimeReact10/CONFORMANCE.md
index cfee4415..70829729 100644
--- a/Adapters/PrimeReact10/CONFORMANCE.md
+++ b/Adapters/PrimeReact10/CONFORMANCE.md
@@ -1,9 +1,9 @@
 <!-- Copyright (c) Cratis. All rights reserved. -->
 <!-- Licensed under the MIT license. See LICENSE file in the project root for full license information. -->
 
-# PrimeReact 11 adapter conformance
+# PrimeReact 10 adapter conformance
 
-The adapter declares `stable-presentation/v1` at renderer ABI major 1. Repository evidence runs
+The adapter declares `stable-presentation/v1` at renderer ABI major 1. The repository gate runs
 `@cratis/components.conformance` against all nine declared slots and requires 100 of 100 checks to
 pass with zero failures and zero skips.
 
@@ -15,31 +15,34 @@ The bounded checks cover:
 - native names, values, submit/reset, disabled/read-only, validation, and autofill-shaped props;
 - one value-first `ChangeHandler` callback with `source: 'user'` and the originating native `Event`;
 - current and deprecated Button appearance mapping and canonical data attributes;
-- real PrimeReact 11 styled DOM identities for all nine slots;
-- explicit switch semantics and hidden visual indicators;
-- deterministic SSR for all nine slots and mismatch-free representative Button hydration under an
-  application-owned outer provider; and
-- package peers, archive boundaries, runtime loading, declaration hygiene, and strict Bundler and
-  NodeNext consumers with bounded upstream exceptions.
-
-The setup gate separately proves `CRATIS-UI-1005` when the outer `PrimeReactProvider` context or
-the non-secret license attestation is missing. Automated component tests assemble PrimeReact's
-public configuration/theme contexts directly so the real license manager never runs; they contain
-and validate no key.
+- real PrimeReact 10.9.9 styled DOM identities for all nine slots;
+- checked and unchecked indicator ownership, explicit switch semantics, indeterminate progress ARIA,
+  and a visible vendor loading indicator;
+- deterministic SSR for all nine slots and mismatch-free representative Button hydration; and
+- package peers, archive boundaries, runtime loading, declaration hygiene, major isolation, and
+  strict Bundler and NodeNext consumers with bounded upstream exceptions.
+
+PrimeReact 10 is MIT licensed and has no key or setup attestation. The adapter preserves an outer
+application-owned `PrimeReactProvider` when present and creates a default provider only when no
+outer context exists.
 
 The generic overlay absent/present check has no applicable slot in this nine-slot profile and
 supplies no PrimeReact overlay evidence. Portable part names and typed `pt` destinations are
 preserved, while PrimeReact may add wrappers or nest parts differently from the built-in renderer;
 undocumented descendant order and sibling selectors are not portable contracts.
 
-PrimeReact 11.1.0 currently publishes malformed generic declaration aliases. A compile-only,
-non-emitted shim keeps this adapter's own strict build enabled; the packed adapter declaration is
-vendor-free and the package verifier ensures no shim or vendor declaration leaks into it. Its
-strict external fixtures also use the declaration-only React JSX bridge required by the exact Arc
-React 22.4 upstream exception, while Core's stale-exception gate must still reproduce that issue.
-Remove each bridge when its allowed upstream release fixes the corresponding declarations.
-
-This is automated jsdom/axe and package evidence, not universal browser, visual, RTL, forced-colors,
-reduced-motion, license-validity, or assistive-technology certification. The application remains
-responsible for a valid PrimeUI license, provider/theme configuration, CSP, and any host-specific
-SSR style collection. PrimeReact 10 is not included or exercised.
+PrimeReact 10.9.9 still publishes an aggregate API declaration that imports unrelated components
+whose `onToggle` declarations conflict with React 19, and other declarations still name global JSX.
+Tracked compile-only shims constrain those exact upstream defects without suppressing library
+checking. The packed adapter declaration is vendor-free; package verification ensures that no shim
+or vendor declaration is emitted. Remove or narrow a shim when the pinned upstream behavior changes.
+
+PrimeReact 10 predates modern package export maps. The adapter uses explicit legacy CommonJS entry
+points so its packed ESM entry can load under native Node as well as application bundlers without
+bundling PrimeReact. PrimeReact 10 and 11 are installed and verified as distinct incompatible
+workspace resolutions.
+
+This is automated jsdom/axe, SSR, and package evidence, not universal browser, visual, RTL,
+forced-colors, reduced-motion, or assistive-technology certification. The application remains
+responsible for its selected global PrimeReact 10 theme, optional provider configuration, CSP, and
+host-specific style loading.
diff --git a/Adapters/PrimeReact10/LICENSE b/Adapters/PrimeReact10/LICENSE
index 0652c82c..ae4ba547 100644
--- a/Adapters/PrimeReact10/LICENSE
+++ b/Adapters/PrimeReact10/LICENSE
@@ -20,5 +20,5 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 
-PrimeReact and PrimeUX are peer-installed commercial software and are not
-covered by this MIT license. See THIRD_PARTY_NOTICES.md.
+PrimeReact 10 is peer-installed MIT-licensed software and is not covered by
+this adapter license. See THIRD_PARTY_NOTICES.md.
diff --git a/Adapters/PrimeReact10/README.md b/Adapters/PrimeReact10/README.md
index b353a0aa..372c328d 100644
--- a/Adapters/PrimeReact10/README.md
+++ b/Adapters/PrimeReact10/README.md
@@ -1,47 +1,57 @@
 <!-- Copyright (c) Cratis. All rights reserved. -->
 <!-- Licensed under the MIT license. See LICENSE file in the project root for full license information. -->
 
-# `@cratis/components.primereact`
+# `@cratis/components.primereact10`
 
-PrimeReact 11 adapter for the nine stable presentation slots in the Cratis Components renderer ABI
-v1. The package is independently versioned and exports one manifest, `primeReactUiLibrary`.
-PrimeReact 10 is out of scope here and remains a required, separate
-`@cratis/components.primereact10` implementation before V4 completion.
+PrimeReact 10 adapter for the nine stable presentation slots in the Cratis Components renderer ABI
+v1. The package is independently versioned and exports one manifest,
+`primeReact10UiLibrary`.
+
+PrimeReact 11 uses a different package architecture and license boundary. It is supported separately
+by `@cratis/components.primereact`; the two adapters must use isolated upstream dependency graphs.
 
 ## Install
 
 ```sh
-npm install @cratis/components.primereact @cratis/components \
-  @primereact/core @primereact/ui primereact @primeuix/themes react react-dom
+npm install @cratis/components.primereact10 @cratis/components \
+  primereact@^10.9.9 react@^19 react-dom@^19
 ```
 
-The adapter uses PrimeReact 11 styled components. It covers Button, IconButton, TextInput,
-TextArea, Checkbox, Radio, Switch, ProgressBar, and Surface. The five atomic interaction slots are
-not part of this profile.
+The adapter covers Button, IconButton, TextInput, TextArea, Checkbox, Radio, Switch, ProgressBar,
+and Surface. The five atomic interaction slots are not part of this profile and continue through the
+Components built-in fallback.
+
+PrimeReact 10 is MIT licensed and requires no PrimeUI key or Components renderer setup attestation.
+Version 10.9.9 is the minimum supported upstream because it fixes the prototype-pollution advisory
+that affects PrimeReact releases through 10.9.8.
+
+## Theme and global configuration
 
-## Application-owned provider and license
+PrimeReact 10 styled components require one application-selected theme stylesheet. Import it once in
+the application entry point before application overrides:
+
+```ts
+import 'primereact/resources/themes/lara-light-cyan/theme.css';
+```
 
-PrimeReact 11 requires a license key. The application owns that key and passes it directly to its
-outer `PrimeReactProvider`; Components never receives, stores, copies, logs, serializes, or proxies
-it. PrimeReact's runtime context deliberately omits the key, so the application also passes one
-non-secret boolean attestation to `CratisComponentsProvider`.
+The distributed theme is precompiled CSS and does not require Sass. Sass is needed only when an
+application chooses to compile a custom PrimeReact 10 theme. PrimeIcons is optional; install and
+import `primeicons/primeicons.css` only if the application uses PrimeIcons directly.
+
+An outer `PrimeReactProvider` is optional. The adapter creates a default provider only when the
+application has not supplied one. An application can own global PrimeReact 10 options such as ripple,
+locale, CSP nonce, style container, pass-through defaults, or z-index configuration:
 
 ```tsx
-import { PrimeReactProvider } from '@primereact/core/config';
-import Aura from '@primeuix/themes/aura';
+import { PrimeReactProvider } from 'primereact/api';
 import { CratisComponentsProvider } from '@cratis/components';
-import { primeReactUiLibrary } from '@cratis/components.primereact';
-
-const primeUiLicenseKey = import.meta.env.VITE_PRIMEUI_LICENSE_KEY;
+import { primeReact10UiLibrary } from '@cratis/components.primereact10';
 
 export const Application = () => (
-    <PrimeReactProvider license={primeUiLicenseKey} theme={{ preset: Aura }}>
+    <PrimeReactProvider value={{ ripple: true }}>
         <CratisComponentsProvider
             value={{ locale: 'en-US' }}
-            library={primeReactUiLibrary}
-            rendererSetup={{
-                'cratis-primereact.license-configured': Boolean(primeUiLicenseKey),
-            }}
+            library={primeReact10UiLibrary}
         >
             <main>Application content</main>
         </CratisComponentsProvider>
@@ -49,31 +59,20 @@ export const Application = () => (
 );
 ```
 
-The adapter throws `CRATIS-UI-1005` synchronously when either the outer provider or the attestation
-is absent. Setting the attestation to `true` is an application assertion that the key was actually
-supplied; it is not a substitute for doing so. This prevents Components from creating a second
-provider and fails before adapter content when setup was not attested. The adapter does not validate
-the key and cannot guarantee that PrimeUI will accept it or omit its own license notice.
-
-Obtain a key from [PrimeUI](https://primeui.store/primeui). For Vite, expose the application-owned
-key as `VITE_PRIMEUI_LICENSE_KEY` only in the client build that mounts PrimeReact. In CI or a
-publishing pipeline, map a protected `PRIMEUI_LICENSE_KEY` secret into that build variable without
-echoing it or writing it to package artifacts. The adapter package itself reads no license
-environment variable and includes no key.
-
-## Styling and SSR
+The application owns theme imports and any outer provider configuration. Components does not
+configure an application's direct PrimeReact usage.
 
-The application chooses the PrimeReact theme on its outer provider. The package's static metadata
-uses `VITE_PRIMEUI_LICENSE_KEY` only as documentation/discovery metadata; no runtime lookup occurs.
-All nine slots produce deterministic SSR output, and the representative Button fixture hydrates
-without a mismatch. The host remains responsible for PrimeReact's provider, theme, CSP, and style
-collection/injection requirements.
+## SSR and package boundaries
 
-## Peer policy
+All nine slots are required to produce deterministic static markup, and the representative Button
+fixture must hydrate without a mismatch. PrimeReact 10 predates modern package export maps, so the
+adapter's packed runtime gate verifies the exact legacy module interop used by the published build.
+Hosts remain responsible for loading global theme CSS in the framework-prescribed location and for
+CSP or style-container configuration.
 
-PrimeReact packages are bounded to `>=11 <12`, PrimeUX themes to `>=3 <4`, and React/ReactDOM to
-React 19. Vendor packages are peers and are never bundled. Exact repository proof uses 11.1.0 and
-`@primeuix/themes` 3.0.0.
+PrimeReact is a bounded peer and is never bundled. The exact repository proof uses PrimeReact
+10.9.9 and React 19. PrimeReact 10 and 11 cannot satisfy one another's peer range and must not share
+one Storybook preview or application dependency resolution.
 
 The current `@cratis/components` peer `>=3.0.0 <4` is a temporary repository placeholder matching
 the unreleased V4 source package. **It must become the honest `>=4 <5` range before publication.**
diff --git a/Adapters/PrimeReact10/THIRD_PARTY_NOTICES.md b/Adapters/PrimeReact10/THIRD_PARTY_NOTICES.md
index c608b3ae..bb44c7cc 100644
--- a/Adapters/PrimeReact10/THIRD_PARTY_NOTICES.md
+++ b/Adapters/PrimeReact10/THIRD_PARTY_NOTICES.md
@@ -3,27 +3,26 @@
 
 # Third-party notices
 
-This MIT-licensed adapter interoperates with peer-installed PrimeUI software. It does not bundle or
-redistribute the vendor packages listed below.
+This MIT-licensed adapter interoperates with peer-installed PrimeReact software. It does not bundle
+or redistribute PrimeReact or its transitive dependencies.
 
-## PrimeReact 11 and PrimeUX themes
+## PrimeReact 10
 
-The proof matrix uses these peer packages:
+The proof matrix uses `primereact` 10.9.9. Its package metadata and supplied `LICENSE.md` identify
+PrimeReact 10 as MIT-licensed software:
 
-- `@primereact/core` 11.1.0
-- `@primereact/ui` 11.1.0
-- `primereact` 11.1.0
-- `@primeuix/themes` 3.0.0
+- package: <https://www.npmjs.com/package/primereact/v/10.9.9>
+- source tag: <https://github.com/primefaces/primereact/tree/10.9.9>
+- license: <https://github.com/primefaces/primereact/blob/10.9.9/LICENSE.md>
 
-Their package metadata states `SEE LICENSE IN LICENSE.md`. The supplied license describes PrimeUI
-as commercial software, requires a valid application-owned key, and provides separate Community
-and Commercial terms. Consult the terms shipped with the exact installed versions and the official
-pages:
+PrimeReact installs `react-transition-group` and its React type package as its own transitive
+dependencies. They are not dependencies or bundled contents of this adapter. Applications should
+review the notices and licenses shipped with their complete installed dependency graph.
 
-- Community terms: <https://primeui.dev/licenses/community>
-- Commercial terms: <https://primeui.dev/licenses/commercial>
-- Key purchase/account page: <https://primeui.store/primeui>
+PrimeIcons is not required by this adapter and is not bundled. An application that independently
+uses PrimeIcons must install it and comply with the license supplied by that package.
 
-PrimeReact 10 is not part of this adapter. The application is responsible for license eligibility,
-key configuration, renewals, and determining whether its distribution model needs additional
-permission. This notice records package facts for transparency and is not legal advice.
+PrimeReact 11 and PrimeUX themes are not part of this adapter. They have a separate package and
+license boundary under `@cratis/components.primereact`.
+
+This notice records package facts for transparency and is not legal advice.
diff --git a/Adapters/PrimeReact10/for_adapter/when_using_the_primereact10_presentation_profile.tsx b/Adapters/PrimeReact10/for_adapter/when_using_the_primereact10_presentation_profile.tsx
index 02c63239..eb0e020b 100644
--- a/Adapters/PrimeReact10/for_adapter/when_using_the_primereact10_presentation_profile.tsx
+++ b/Adapters/PrimeReact10/for_adapter/when_using_the_primereact10_presentation_profile.tsx
@@ -2,14 +2,9 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import { expect } from 'chai';
-import {
-    createElement,
-    useContext,
-    type ComponentType,
-    type ReactNode,
-} from 'react';
+import { createElement, useContext, type ComponentType, type ReactNode } from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
-import { PrimeReactContext, PrimeReactProvider } from 'primereact/api';
+import { PrimeReactContext, PrimeReactProvider } from 'primereact/api/api.cjs.js';
 import { CratisComponentsProvider } from '@cratis/components';
 import { Button } from '@cratis/components/Common';
 import { runConformance, type ConformanceReport } from '@cratis/components.conformance';
@@ -84,9 +79,7 @@ describe('when using the PrimeReact 10 stable presentation profile', () => {
             failed: 0,
             skipped: 0,
         });
-        expect(primeReact10UiLibrary.profileSlots).to.deep.equal(
-            stablePresentationSlots,
-        );
+        expect(primeReact10UiLibrary.profileSlots).to.deep.equal(stablePresentationSlots);
     });
 
     it('should keep static metadata schema and runtime declarations consistent', () => {
@@ -172,6 +165,34 @@ describe('when using the PrimeReact 10 stable presentation profile', () => {
         expect(markup.surface).to.contain('<article');
     });
 
+    it('should render one selected checkbox indicator and truthful progress and loading states', () => {
+        const unchecked = renderSlot('common.checkbox', {
+            label: 'Unchecked',
+        });
+        const checked = renderSlot('common.checkbox', {
+            label: 'Checked',
+            checked: true,
+        });
+        const indeterminate = renderSlot('common.progress', {
+            mode: 'indeterminate',
+            value: 42,
+        });
+        const loading = renderSlot('common.button', {
+            label: 'Saving',
+            loading: true,
+        });
+
+        expect(unchecked.match(/data-cratis-part="indicator"/gu)).to.have.length(1);
+        expect(unchecked).to.contain('hidden=""');
+        expect(checked.match(/data-cratis-part="indicator"/gu)).to.have.length(1);
+        expect(checked).not.to.contain('hidden=""');
+        expect(indeterminate).not.to.contain('aria-valuemin');
+        expect(indeterminate).not.to.contain('aria-valuenow');
+        expect(indeterminate).not.to.contain('aria-valuemax');
+        expect(loading).to.contain('p-button-loading-icon');
+        expect(loading).to.contain('data-cratis-part="spinner"');
+    });
+
     it('should preserve deprecated Button mapping and canonical data attributes', () => {
         const markup = renderSlot('common.button', {
             label: 'Legacy action',
@@ -217,16 +238,27 @@ describe('when using the PrimeReact 10 stable presentation profile', () => {
         expect(markup).to.contain('Configured action');
     });
 
+    it('should produce deterministic SSR and mismatch-free hydration evidence', () => {
+        for (const slotId of stablePresentationSlots) {
+            expect(
+                report.checks.find((check) => check.id === `ssr.${slotId}`)?.status,
+            ).to.equal('passed');
+        }
+        expect(
+            report.checks.find((check) => check.id === 'ssr.hydration')?.status,
+        ).to.equal('passed');
+    });
+
     it('should declare only bounded peer-hosted PrimeReact 10 vendors', () => {
         expect(packageJson).not.to.have.property('dependencies');
         expect(packageJson.peerDependencies).to.deep.equal({
             '@cratis/components': '>=3.0.0 <4',
-            primereact: '>=10 <11',
+            primereact: '>=10.9.9 <11',
             react: '^19.0.0',
             'react-dom': '^19.0.0',
         });
         expect(packageJson.devDependencies).to.include({
-            primereact: '10.9.8',
+            primereact: '10.9.9',
             react: '19.2.8',
             'react-dom': '19.2.8',
         });
diff --git a/Adapters/PrimeReact10/package.json b/Adapters/PrimeReact10/package.json
index 06bf6b7f..8f2456ec 100644
--- a/Adapters/PrimeReact10/package.json
+++ b/Adapters/PrimeReact10/package.json
@@ -82,7 +82,7 @@
             "requiresKey": false
         },
         "upstream": {
-            "primereact": ">=10 <11",
+            "primereact": ">=10.9.9 <11",
             "react": "^19.0.0",
             "react-dom": "^19.0.0"
         }
@@ -100,7 +100,7 @@
     },
     "peerDependencies": {
         "@cratis/components": ">=3.0.0 <4",
-        "primereact": ">=10 <11",
+        "primereact": ">=10.9.9 <11",
         "react": "^19.0.0",
         "react-dom": "^19.0.0"
     },
@@ -111,7 +111,7 @@
         "@cratis/components.conformance": "workspace:^",
         "@cratis/fundamentals": "^7.10.3",
         "@types/react": "19.2.18",
-        "primereact": "10.9.8",
+        "primereact": "10.9.9",
         "react": "19.2.8",
         "react-dom": "19.2.8",
         "reflect-metadata": "0.2.2",
diff --git a/Adapters/PrimeReact10/scripts/verify-packed-package.mjs b/Adapters/PrimeReact10/scripts/verify-packed-package.mjs
index b8af0743..4c5f2fca 100644
--- a/Adapters/PrimeReact10/scripts/verify-packed-package.mjs
+++ b/Adapters/PrimeReact10/scripts/verify-packed-package.mjs
@@ -21,9 +21,7 @@ import {
 
 const packageDirectory = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
 const repositoryDirectory = path.resolve(packageDirectory, '../..');
-const temporary = mkdtempSync(
-    path.join(os.tmpdir(), 'cratis-primereact10-package-'),
-);
+const temporary = mkdtempSync(path.join(os.tmpdir(), 'cratis-primereact10-package-'));
 
 const run = (command, arguments_, cwd = packageDirectory) => {
     const result = spawnSync(command, arguments_, { cwd, encoding: 'utf8' });
@@ -120,7 +118,7 @@ try {
 
     const expectedPeers = {
         '@cratis/components': '>=3.0.0 <4',
-        primereact: '>=10 <11',
+        primereact: '>=10.9.9 <11',
         react: '^19.0.0',
         'react-dom': '^19.0.0',
     };
@@ -154,7 +152,38 @@ try {
         'VITE_PRIMEUI_LICENSE_KEY',
     ]) {
         if (serializedPackage.includes(forbidden)) {
-            throw new Error(`Packed metadata contains PrimeReact 11 marker '${forbidden}'.`);
+            throw new Error(
+                `Packed metadata contains PrimeReact 11 marker '${forbidden}'.`,
+            );
+        }
+    }
+    const publishedDocumentation = [
+        'README.md',
+        'CONFORMANCE.md',
+        'THIRD_PARTY_NOTICES.md',
+        'LICENSE',
+    ]
+        .map((file) => readFileSync(path.join(unpackedPackage, file), 'utf8'))
+        .join('\n');
+    for (const forbidden of [
+        '# PrimeReact 11 adapter',
+        'PrimeReact 11 adapter for',
+        'PrimeReact 10 is not part of this adapter',
+        'PrimeReact 10 is not included or exercised',
+        '@primereact/core',
+        '@primereact/ui',
+        '@primeuix/',
+        'LicenseRef-PrimeUI',
+        'license-configured',
+        'VITE_PRIMEUI_LICENSE_KEY',
+        'primeReactUiLibrary',
+        '# `@cratis/components.primereact`',
+        'npm install @cratis/components.primereact @cratis/components',
+    ]) {
+        if (publishedDocumentation.includes(forbidden)) {
+            throw new Error(
+                `Packed documentation contains PrimeReact 11 marker '${forbidden}'.`,
+            );
         }
     }
     const expectedLicense = { spdx: 'MIT', requiresKey: false };
@@ -164,9 +193,15 @@ try {
 
     const runtime = readFileSync(path.join(unpackedPackage, 'dist/index.js'), 'utf8');
     for (const requiredImport of [
-        'primereact/api',
-        'primereact/button',
-        'primereact/checkbox',
+        'primereact/api/api.cjs.js',
+        'primereact/button/button.cjs.js',
+        'primereact/card/card.cjs.js',
+        'primereact/checkbox/checkbox.cjs.js',
+        'primereact/inputswitch/inputswitch.cjs.js',
+        'primereact/inputtext/inputtext.cjs.js',
+        'primereact/inputtextarea/inputtextarea.cjs.js',
+        'primereact/progressbar/progressbar.cjs.js',
+        'primereact/radiobutton/radiobutton.cjs.js',
         '@cratis/components/',
         'react/jsx-runtime',
     ]) {
@@ -230,7 +265,7 @@ try {
     }
 
     const nodeModules = path.join(temporary, 'node_modules');
-    link(unpackedPackage, path.join(nodeModules, '@cratis/components.primereact'));
+    link(unpackedPackage, path.join(nodeModules, '@cratis/components.primereact10'));
     link(unpackedCorePackage, path.join(nodeModules, '@cratis/components'));
     for (const dependency of ['react', 'react-dom']) {
         link(
diff --git a/Adapters/PrimeReact10/scripts/verify-upstream-shim.mjs b/Adapters/PrimeReact10/scripts/verify-upstream-shim.mjs
index 757399fb..bfbeedd5 100644
--- a/Adapters/PrimeReact10/scripts/verify-upstream-shim.mjs
+++ b/Adapters/PrimeReact10/scripts/verify-upstream-shim.mjs
@@ -3,15 +3,12 @@
 
 import { spawnSync } from 'node:child_process';
 import { mkdtempSync, readFileSync, rmSync, writeFileSync } from 'node:fs';
-import os from 'node:os';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 
 const packageDirectory = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
 const repositoryDirectory = path.resolve(packageDirectory, '../..');
-const temporary = mkdtempSync(
-    path.join(packageDirectory, '.verify-primereact10-shim-'),
-);
+const temporary = mkdtempSync(path.join(packageDirectory, '.verify-primereact10-shim-'));
 
 try {
     const primeReactPackage = JSON.parse(
@@ -21,16 +18,31 @@ try {
         ),
     );
     if (
-        primeReactPackage.version !== '10.9.8' ||
+        primeReactPackage.version !== '10.9.9' ||
         primeReactPackage.license !== 'MIT' ||
         !primeReactPackage.peerDependencies?.react?.includes('^19.0.0') ||
         !primeReactPackage.peerDependencies?.['react-dom']?.includes('^19.0.0')
     ) {
         throw new Error(
-            'The compile-only API shim is reviewed only for MIT PrimeReact 10.9.8 with React 19 peers.',
+            'The compile-only API shim is reviewed only for MIT PrimeReact 10.9.9 with React 19 peers.',
         );
     }
 
+    const apiShim = readFileSync(
+        path.join(packageDirectory, 'src/upstream-primereact-api-shim.d.ts'),
+        'utf8',
+    );
+    for (const requiredDeclaration of [
+        "declare module 'primereact/api'",
+        "declare module 'primereact/api/api.cjs.js'",
+    ]) {
+        if (!apiShim.includes(requiredDeclaration)) {
+            throw new Error(
+                `The compile-only PrimeReact API shim is missing '${requiredDeclaration}'.`,
+            );
+        }
+    }
+
     const fixture = path.join(temporary, 'fixture.ts');
     writeFileSync(
         fixture,
@@ -93,8 +105,8 @@ try {
         unexpected.length > 0
     ) {
         throw new Error(
-            'PrimeReact 10.9.8 API declaration defect changed; remove or re-review ' +
-                `src/primereact10-api-shim.d.ts and src/upstream-type-shim.d.ts. ` +
+            'PrimeReact 10.9.9 API declaration defect changed; remove or re-review ' +
+                `src/upstream-primereact-api-shim.d.ts and src/upstream-type-shim.d.ts. ` +
                 `Missing: ${missing.join(', ') || 'none'}. JSX count: ${jsxDiagnostics.length}. ` +
                 `Unexpected: ${unexpected.join(' | ') || 'none'}.`,
         );
@@ -105,14 +117,17 @@ try {
         'utf8',
     );
     if (
-        emittedDeclaration.includes('primereact10-api-shim') ||
+        emittedDeclaration.includes('upstream-primereact-api-shim') ||
+        emittedDeclaration.includes('upstream-type-shim') ||
         emittedDeclaration.includes('primereact/api')
     ) {
-        throw new Error('The compile-only PrimeReact 10 API shim leaked into declarations.');
+        throw new Error(
+            'The compile-only PrimeReact 10 API shim leaked into declarations.',
+        );
     }
 
     console.log(
-        'Verified the exact PrimeReact 10.9.8/React 19 TS2430 and global-JSX defects, their removal trigger, and non-emission of the compile-only shims.',
+        'Verified the exact PrimeReact 10.9.9/React 19 TS2430 and global-JSX defects, their removal trigger, and non-emission of the compile-only shims.',
     );
 } finally {
     rmSync(temporary, { recursive: true, force: true });
diff --git a/Adapters/PrimeReact10/scripts/verify-workspace-isolation.mjs b/Adapters/PrimeReact10/scripts/verify-workspace-isolation.mjs
index ac180c71..764e9373 100644
--- a/Adapters/PrimeReact10/scripts/verify-workspace-isolation.mjs
+++ b/Adapters/PrimeReact10/scripts/verify-workspace-isolation.mjs
@@ -18,8 +18,22 @@ const adapter10 = readJson(path.join(primeReact10Directory, 'package.json'));
 const adapter11 = readJson(path.join(primeReact11Directory, 'package.json'));
 const resolvePrimeReactPackage = (workspaceDirectory) => {
     const require = createRequire(path.join(workspaceDirectory, 'package.json'));
-    const entry = realpathSync(require.resolve('primereact'));
-    return path.join(path.dirname(entry), 'package.json');
+    const entry = realpathSync(require.resolve('primereact/button'));
+    let directory = path.dirname(entry);
+
+    while (directory !== path.dirname(directory)) {
+        const candidate = path.join(directory, 'package.json');
+        try {
+            if (readJson(candidate).name === 'primereact') {
+                return realpathSync(candidate);
+            }
+        } catch (error) {
+            if (error?.code !== 'ENOENT') throw error;
+        }
+        directory = path.dirname(directory);
+    }
+
+    throw new Error(`Could not locate primereact/package.json from '${entry}'.`);
 };
 const package10Path = resolvePrimeReactPackage(primeReact10Directory);
 const package11Path = resolvePrimeReactPackage(primeReact11Directory);
@@ -27,18 +41,18 @@ const package10 = readJson(package10Path);
 const package11 = readJson(package11Path);
 
 if (
-    adapter10.peerDependencies?.primereact !== '>=10 <11' ||
+    adapter10.peerDependencies?.primereact !== '>=10.9.9 <11' ||
     adapter11.peerDependencies?.primereact !== '>=11 <12'
 ) {
     throw new Error('Adapter peer ranges no longer prove incompatible upstream majors.');
 }
 if (
-    package10.version !== '10.9.8' ||
+    package10.version !== '10.9.9' ||
     package11.version !== '11.1.0' ||
     package10Path === package11Path
 ) {
     throw new Error(
-        'The two adapter workspaces must resolve distinct exact PrimeReact 10.9.8 and 11.1.0 installations.',
+        'The two adapter workspaces must resolve distinct exact PrimeReact 10.9.9 and 11.1.0 installations.',
     );
 }
 
diff --git a/Adapters/PrimeReact10/src/index.tsx b/Adapters/PrimeReact10/src/index.tsx
index fe35cbf0..45bdff31 100644
--- a/Adapters/PrimeReact10/src/index.tsx
+++ b/Adapters/PrimeReact10/src/index.tsx
@@ -14,21 +14,26 @@ import {
     type ReactNode,
     type SyntheticEvent,
 } from 'react';
-import { PrimeReactContext, PrimeReactProvider } from 'primereact/api';
-import { Button as PrimeButton } from 'primereact/button';
-import { Card as PrimeCard } from 'primereact/card';
+// PrimeReact 10's ESM files use directory imports that native Node rejects. Explicit legacy
+// CommonJS entries preserve one peer-hosted runtime across Node SSR and application bundlers.
+import { PrimeReactContext, PrimeReactProvider } from 'primereact/api/api.cjs.js';
+import {
+    Button as PrimeButton,
+    type ButtonPassThroughOptions,
+} from 'primereact/button/button.cjs.js';
+import { Card as PrimeCard } from 'primereact/card/card.cjs.js';
 import {
     Checkbox as PrimeCheckbox,
     type CheckboxPassThroughOptions,
-} from 'primereact/checkbox';
-import { InputSwitch as PrimeInputSwitch } from 'primereact/inputswitch';
-import { InputText as PrimeInputText } from 'primereact/inputtext';
-import { InputTextarea as PrimeInputTextarea } from 'primereact/inputtextarea';
-import { ProgressBar as PrimeProgressBar } from 'primereact/progressbar';
+} from 'primereact/checkbox/checkbox.cjs.js';
+import { InputSwitch as PrimeInputSwitch } from 'primereact/inputswitch/inputswitch.cjs.js';
+import { InputText as PrimeInputText } from 'primereact/inputtext/inputtext.cjs.js';
+import { InputTextarea as PrimeInputTextarea } from 'primereact/inputtextarea/inputtextarea.cjs.js';
+import { ProgressBar as PrimeProgressBar } from 'primereact/progressbar/progressbar.cjs.js';
 import {
     RadioButton as PrimeRadioButton,
     type RadioButtonPassThroughOptions,
-} from 'primereact/radiobutton';
+} from 'primereact/radiobutton/radiobutton.cjs.js';
 import type {
     ButtonProps,
     ButtonSeverity,
@@ -73,9 +78,7 @@ const capabilities = Object.freeze([
     'ssr.staticRender',
 ] satisfies readonly unstable_CapabilityId[]);
 
-const PrimeReact10AdapterProvider = ({
-    children,
-}: unstable_UiLibraryProviderProps) => {
+const PrimeReact10AdapterProvider = ({ children }: unstable_UiLibraryProviderProps) => {
     const applicationConfiguration = useContext(PrimeReactContext);
     if (applicationConfiguration !== undefined) return children;
     return <PrimeReactProvider>{children}</PrimeReactProvider>;
@@ -214,7 +217,7 @@ const PrimeButtonSlot = forwardRef<HTMLButtonElement, ButtonProps>(
         const iconOnly = Boolean(icon) && label === undefined && !children;
         const nativeButtonRef = useCallback(
             (value: unknown) => {
-                // SAFETY: PrimeReact 10.9.8's Button runtime forwards its ref to the native
+                // SAFETY: PrimeReact 10.9.9's Button runtime forwards its ref to the native
                 // button although its legacy declaration still describes a class component.
                 // Only that verified native node crosses the Cratis ref boundary.
                 const button =
@@ -226,6 +229,19 @@ const PrimeButtonSlot = forwardRef<HTMLButtonElement, ButtonProps>(
             },
             [ref],
         );
+        // SAFETY: PrimeReact accepts either span or SVG attributes for its loading icon. The
+        // portable spinner part contains only attributes valid on both verified destinations.
+        const buttonPassThrough = {
+            loadingIcon: {
+                ...pt?.spinner,
+                className: classNames(
+                    'cratis-primereact10-button__spinner',
+                    pt?.spinner?.className,
+                ),
+                'data-cratis-part': 'spinner',
+                'aria-hidden': true,
+            },
+        } as unknown as ButtonPassThroughOptions;
         return (
             <PrimeButton
                 {...pt?.root}
@@ -234,6 +250,7 @@ const PrimeButtonSlot = forwardRef<HTMLButtonElement, ButtonProps>(
                 type={type}
                 title={title ?? tooltip}
                 disabled={effectiveDisabled}
+                loading={loading}
                 text={appearance.variant === 'ghost'}
                 link={appearance.variant === 'link'}
                 outlined={appearance.variant === 'outline'}
@@ -256,18 +273,9 @@ const PrimeButtonSlot = forwardRef<HTMLButtonElement, ButtonProps>(
                 data-disabled={effectiveDisabled || undefined}
                 data-loading={loading || undefined}
                 data-icon-only={iconOnly || undefined}
+                pt={buttonPassThrough}
             >
-                {loading ? (
-                    <span
-                        {...pt?.spinner}
-                        className={classNames(
-                            'cratis-primereact10-button__spinner',
-                            pt?.spinner?.className,
-                        )}
-                        data-cratis-part='spinner'
-                        aria-hidden='true'
-                    />
-                ) : icon ? (
+                {!loading && icon ? (
                     <span
                         {...pt?.icon}
                         className={classNames(
@@ -335,9 +343,7 @@ const PrimeTextInputSlot = forwardRef<HTMLInputElement, TextInputProps>(
         const effectiveAriaInvalid =
             ariaInvalid ?? rootPart['aria-invalid'] ?? (invalid || undefined);
         const effectiveInvalid =
-            invalid ||
-            effectiveAriaInvalid === true ||
-            effectiveAriaInvalid === 'true';
+            invalid || effectiveAriaInvalid === true || effectiveAriaInvalid === 'true';
         return (
             <PrimeInputText
                 {...rootPart}
@@ -399,9 +405,7 @@ const PrimeTextAreaSlot = forwardRef<HTMLTextAreaElement, TextAreaProps>(
         const effectiveAriaInvalid =
             ariaInvalid ?? pt?.root?.['aria-invalid'] ?? (invalid || undefined);
         const effectiveInvalid =
-            invalid ||
-            effectiveAriaInvalid === true ||
-            effectiveAriaInvalid === 'true';
+            invalid || effectiveAriaInvalid === true || effectiveAriaInvalid === 'true';
         return (
             <PrimeInputTextarea
                 {...pt?.root}
@@ -604,6 +608,44 @@ const PrimeChoice = ({
     const checkboxParts = parts as CheckboxParts | undefined;
     const radioParts = parts as RadioParts | undefined;
     const switchParts = parts as SwitchParts | undefined;
+    // SAFETY: PrimeReact 10 renders the verified checkbox box and indicator destinations as
+    // native div/SVG elements. Portable part values contain only shared DOM attributes.
+    const checkboxPassThrough = {
+        input,
+        box: {
+            ...checkboxParts?.box,
+            'data-cratis-part': 'box',
+            ...attributes,
+        },
+    } as unknown as CheckboxPassThroughOptions;
+    const checkboxIndicator = (
+        <span
+            {...checkboxParts?.indicator}
+            className={classNames('p-checkbox-icon', checkboxParts?.indicator?.className)}
+            data-cratis-part='indicator'
+            aria-hidden='true'
+            hidden={!state.selected}
+            {...attributes}
+        >
+            ✓
+        </span>
+    );
+    // SAFETY: PrimeReact 10 renders the verified radio box and indicator destinations as native
+    // div elements. Portable part values contain only attributes valid on those destinations.
+    const radioPassThrough = {
+        input,
+        box: {
+            ...radioParts?.box,
+            'data-cratis-part': 'box',
+            ...attributes,
+        },
+        icon: {
+            ...radioParts?.indicator,
+            'data-cratis-part': 'indicator',
+            'aria-hidden': true,
+            ...attributes,
+        },
+    } as unknown as RadioButtonPassThroughOptions;
     return (
         <label
             {...parts?.root}
@@ -619,47 +661,22 @@ const PrimeChoice = ({
             {kind === 'checkbox' ? (
                 <>
                     <PrimeCheckbox
-                    checked={state.selected}
-                    disabled={disabled}
-                    readOnly={readOnly}
-                    required={nativeProps.required}
-                    invalid={invalid}
-                    name={nativeProps.name}
-                    value={nativeProps.value}
-                    inputId={inputId}
-                    inputRef={state.ref}
-                    aria-label={nativeProps['aria-label']}
-                    aria-labelledby={nativeProps['aria-labelledby']}
-                    onChange={changed}
-                    pt={
-                        {
-                            input,
-                            box: {
-                                ...checkboxParts?.box,
-                                'data-cratis-part': 'box',
-                                ...attributes,
-                            },
-                            icon: {
-                                ...checkboxParts?.indicator,
-                                'data-cratis-part': 'indicator',
-                                'aria-hidden': true,
-                                ...attributes,
-                            },
-                        } as unknown as CheckboxPassThroughOptions
-                    }
+                        checked={state.selected}
+                        disabled={disabled}
+                        readOnly={readOnly}
+                        required={nativeProps.required}
+                        invalid={invalid}
+                        name={nativeProps.name}
+                        value={nativeProps.value}
+                        inputId={inputId}
+                        inputRef={state.ref}
+                        aria-label={nativeProps['aria-label']}
+                        aria-labelledby={nativeProps['aria-labelledby']}
+                        onChange={changed}
+                        icon={checkboxIndicator}
+                        pt={checkboxPassThrough}
                     />
-                    <span
-                        {...checkboxParts?.indicator}
-                        className={classNames(
-                            'p-checkbox-icon',
-                            checkboxParts?.indicator?.className,
-                        )}
-                        data-cratis-part='indicator'
-                        aria-hidden='true'
-                        {...attributes}
-                    >
-                        ✓
-                    </span>
+                    {state.selected ? null : checkboxIndicator}
                 </>
             ) : kind === 'radio' ? (
                 <PrimeRadioButton
@@ -675,22 +692,7 @@ const PrimeChoice = ({
                     aria-label={nativeProps['aria-label']}
                     aria-labelledby={nativeProps['aria-labelledby']}
                     onChange={changed}
-                    pt={
-                        {
-                            input,
-                            box: {
-                                ...radioParts?.box,
-                                'data-cratis-part': 'box',
-                                ...attributes,
-                            },
-                            icon: {
-                                ...radioParts?.indicator,
-                                'data-cratis-part': 'indicator',
-                                'aria-hidden': true,
-                                ...attributes,
-                            },
-                        } as unknown as RadioButtonPassThroughOptions
-                    }
+                    pt={radioPassThrough}
                 />
             ) : (
                 <PrimeInputSwitch
@@ -774,7 +776,7 @@ const PrimeProgressSlot = ({
     const busy = !determinate || boundedValue < 100;
     return (
         <PrimeProgressBar
-            value={boundedValue}
+            value={determinate ? boundedValue : null}
             mode={mode}
             showValue={showValue}
             className={classNames('cratis-primereact10-progress', className)}
@@ -785,6 +787,13 @@ const PrimeProgressSlot = ({
             data-busy={busy || undefined}
             data-loading={!determinate || undefined}
             pt={{
+                root: determinate
+                    ? undefined
+                    : {
+                          'aria-valuemin': undefined,
+                          'aria-valuenow': undefined,
+                          'aria-valuemax': undefined,
+                      },
                 value: { 'data-cratis-part': 'indicator' },
                 label: {
                     'data-cratis-part': 'label',
@@ -795,33 +804,31 @@ const PrimeProgressSlot = ({
     );
 };
 
-const PrimeSurfaceSlot = forwardRef<HTMLElement, SurfaceProps>(
-    function PrimeSurfaceSlot(
-        { as: Element = 'div', pt, className, style, children, ...nativeProps },
-        ref,
-    ) {
-        const surfaceRef = useCallback(
-            (element: HTMLElement | null) => assignRef(ref, element),
-            [ref],
-        );
-        return (
-            <Element
-                {...pt?.root}
-                {...nativeProps}
-                ref={surfaceRef}
-                className={classNames(
-                    'cratis-primereact10-surface',
-                    pt?.root?.className,
-                    className,
-                )}
-                style={{ ...pt?.root?.style, ...style }}
-                data-cratis-part='root'
-            >
-                <PrimeCard>{children}</PrimeCard>
-            </Element>
-        );
-    },
-);
+const PrimeSurfaceSlot = forwardRef<HTMLElement, SurfaceProps>(function PrimeSurfaceSlot(
+    { as: Element = 'div', pt, className, style, children, ...nativeProps },
+    ref,
+) {
+    const surfaceRef = useCallback(
+        (element: HTMLElement | null) => assignRef(ref, element),
+        [ref],
+    );
+    return (
+        <Element
+            {...pt?.root}
+            {...nativeProps}
+            ref={surfaceRef}
+            className={classNames(
+                'cratis-primereact10-surface',
+                pt?.root?.className,
+                className,
+            )}
+            style={{ ...pt?.root?.style, ...style }}
+            data-cratis-part='root'
+        >
+            <PrimeCard>{children}</PrimeCard>
+        </Element>
+    );
+});
 
 const declaration = <SlotId extends unstable_SlotId>(
     render: unstable_SlotDeclaration<SlotId>['render'],
diff --git a/Adapters/PrimeReact10/src/upstream-primereact-api-shim.d.ts b/Adapters/PrimeReact10/src/upstream-primereact-api-shim.d.ts
new file mode 100644
index 00000000..cc0578ae
--- /dev/null
+++ b/Adapters/PrimeReact10/src/upstream-primereact-api-shim.d.ts
@@ -0,0 +1,27 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+/**
+ * @internal Compile-only boundary for the two PrimeReact 10 API imports used by this adapter.
+ * PrimeReact 10.9.9's aggregate api.d.ts imports every component declaration and consequently
+ * exposes unrelated React 19 onToggle conflicts. The packed adapter never emits this shim.
+ */
+declare module 'primereact/api' {
+    import type { Context, FunctionComponent, ReactNode } from 'react';
+
+    interface PrimeReact10ContextValue {
+        readonly ripple?: boolean;
+    }
+
+    interface PrimeReact10ProviderProps {
+        readonly children: ReactNode;
+        readonly value?: Readonly<PrimeReact10ContextValue>;
+    }
+
+    export const PrimeReactContext: Context<PrimeReact10ContextValue | undefined>;
+    export const PrimeReactProvider: FunctionComponent<PrimeReact10ProviderProps>;
+}
+
+declare module 'primereact/api/api.cjs.js' {
+    export { PrimeReactContext, PrimeReactProvider } from 'primereact/api';
+}
diff --git a/Adapters/PrimeReact10/src/upstream-type-shim.d.ts b/Adapters/PrimeReact10/src/upstream-type-shim.d.ts
index 065f47dc..b4eba3b8 100644
--- a/Adapters/PrimeReact10/src/upstream-type-shim.d.ts
+++ b/Adapters/PrimeReact10/src/upstream-type-shim.d.ts
@@ -4,7 +4,7 @@
 import type { ReactElement } from 'react';
 
 /**
- * @internal Compile-only bridge for PrimeReact 10.9.8 declarations that still name global JSX
+ * @internal Compile-only bridge for PrimeReact 10.9.9 declarations that still name global JSX
  * under React 19 and for the exact Arc React 22.4.0 declaration. It is never emitted or packed.
  */
 declare global {
diff --git a/Adapters/PrimeReact10/tsconfig.build.json b/Adapters/PrimeReact10/tsconfig.build.json
index 78f5ca51..eccf6a97 100644
--- a/Adapters/PrimeReact10/tsconfig.build.json
+++ b/Adapters/PrimeReact10/tsconfig.build.json
@@ -10,7 +10,30 @@
         "moduleResolution": "bundler",
         "baseUrl": ".",
         "paths": {
-            "primereact/api": ["src/primereact10-api-shim.d.ts"]
+            "primereact/api": ["src/upstream-primereact-api-shim.d.ts"],
+            "primereact/api/api.cjs.js": ["src/upstream-primereact-api-shim.d.ts"],
+            "primereact/button/button.cjs.js": [
+                "node_modules/primereact/button/button.d.ts"
+            ],
+            "primereact/card/card.cjs.js": ["node_modules/primereact/card/card.d.ts"],
+            "primereact/checkbox/checkbox.cjs.js": [
+                "node_modules/primereact/checkbox/checkbox.d.ts"
+            ],
+            "primereact/inputswitch/inputswitch.cjs.js": [
+                "node_modules/primereact/inputswitch/inputswitch.d.ts"
+            ],
+            "primereact/inputtext/inputtext.cjs.js": [
+                "node_modules/primereact/inputtext/inputtext.d.ts"
+            ],
+            "primereact/inputtextarea/inputtextarea.cjs.js": [
+                "node_modules/primereact/inputtextarea/inputtextarea.d.ts"
+            ],
+            "primereact/progressbar/progressbar.cjs.js": [
+                "node_modules/primereact/progressbar/progressbar.d.ts"
+            ],
+            "primereact/radiobutton/radiobutton.cjs.js": [
+                "node_modules/primereact/radiobutton/radiobutton.d.ts"
+            ]
         },
         "skipLibCheck": false,
         "types": []
diff --git a/Adapters/PrimeReact10/tsconfig.json b/Adapters/PrimeReact10/tsconfig.json
index 85a29eb4..08aaac56 100644
--- a/Adapters/PrimeReact10/tsconfig.json
+++ b/Adapters/PrimeReact10/tsconfig.json
@@ -7,7 +7,30 @@
         "moduleResolution": "bundler",
         "baseUrl": ".",
         "paths": {
-            "primereact/api": ["src/primereact10-api-shim.d.ts"]
+            "primereact/api": ["src/upstream-primereact-api-shim.d.ts"],
+            "primereact/api/api.cjs.js": ["src/upstream-primereact-api-shim.d.ts"],
+            "primereact/button/button.cjs.js": [
+                "node_modules/primereact/button/button.d.ts"
+            ],
+            "primereact/card/card.cjs.js": ["node_modules/primereact/card/card.d.ts"],
+            "primereact/checkbox/checkbox.cjs.js": [
+                "node_modules/primereact/checkbox/checkbox.d.ts"
+            ],
+            "primereact/inputswitch/inputswitch.cjs.js": [
+                "node_modules/primereact/inputswitch/inputswitch.d.ts"
+            ],
+            "primereact/inputtext/inputtext.cjs.js": [
+                "node_modules/primereact/inputtext/inputtext.d.ts"
+            ],
+            "primereact/inputtextarea/inputtextarea.cjs.js": [
+                "node_modules/primereact/inputtextarea/inputtextarea.d.ts"
+            ],
+            "primereact/progressbar/progressbar.cjs.js": [
+                "node_modules/primereact/progressbar/progressbar.d.ts"
+            ],
+            "primereact/radiobutton/radiobutton.cjs.js": [
+                "node_modules/primereact/radiobutton/radiobutton.d.ts"
+            ]
         },
         "skipLibCheck": false,
         "types": ["vitest/globals"]
diff --git a/Documentation/verify-local-links.mjs b/Documentation/verify-local-links.mjs
index aac56662..0bc5c82c 100644
--- a/Documentation/verify-local-links.mjs
+++ b/Documentation/verify-local-links.mjs
@@ -7,6 +7,7 @@ import process from 'node:process';
 import { fileURLToPath } from 'node:url';
 
 const markdownExtensions = new Set(['.md', '.mdx']);
+const ignoredDirectoryNames = new Set(['.yarn', 'coverage', 'dist', 'node_modules', 'storybook-static']);
 const selfTestMode = process.argv[2] === '--self-test';
 const documentationRoot = path.resolve(selfTestMode
     ? path.dirname(fileURLToPath(import.meta.url))
@@ -114,6 +115,7 @@ function findMarkdownFiles(root) {
         for (const entry of entries) {
             const entryPath = path.join(directory, entry.name);
             if (entry.isDirectory()) {
+                if (ignoredDirectoryNames.has(entry.name)) continue;
                 visit(entryPath);
             } else if (entry.isFile() && markdownExtensions.has(path.extname(entry.name).toLowerCase())) {
                 files.push(entryPath);
@@ -341,7 +343,13 @@ function checkDestination(sourceFile, content, destination) {
     }
 
     if (/^https?:\/\//i.test(target)) {
-        const url = new URL(target);
+        let url;
+        try {
+            url = new URL(target);
+        } catch {
+            failures.push(`${displayPath(sourceFile)}:${lineNumber} has invalid external URL \"${target}\"`);
+            return;
+        }
         if (isLocalhost(url.hostname)) {
             counts.localhost += 1;
         } else {
@@ -389,7 +397,7 @@ function checkLocalDestination(sourceFile, target, lineNumber) {
         : path.resolve(path.dirname(sourceFile), targetPath);
     const relativeToDocumentation = path.relative(documentationRoot, unresolvedPath);
     if (relativeToDocumentation === '..' || relativeToDocumentation.startsWith(`..${path.sep}`) || path.isAbsolute(relativeToDocumentation)) {
-        failures.push(`${displayPath(sourceFile)}:${lineNumber} escapes Documentation with "${target}"`);
+        failures.push(`${displayPath(sourceFile)}:${lineNumber} escapes the scan root with "${target}"`);
         return;
     }
 
diff --git a/Source/README.md b/Source/README.md
index c1b31a02..62659a1c 100644
--- a/Source/README.md
+++ b/Source/README.md
@@ -81,8 +81,8 @@ are independently versioned and selected with the provider's `library` prop:
 - `@cratis/components.mui` — MUI 9.x / Emotion 11.x stable presentation slots;
 - `@cratis/components.primereact` — PrimeReact 11.x stable presentation slots, with an
   application-owned outer provider and license key;
-- `@cratis/components.primereact10` — required separately for PrimeReact 10 and not yet part of this
-  source checkpoint.
+- `@cratis/components.primereact10` — PrimeReact 10.9.9+ stable presentation slots, with its
+  separate MIT-era provider, global theme, and upstream-major boundary.
 
 Adapter-specific themes, providers, SSR setup, peers, and license boundaries remain documented by
 the adapter package. Styling for the built-in renderer is CSS-owned.
diff --git a/yarn.lock b/yarn.lock
index 19b5aa21..6d1be0f7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -355,14 +355,14 @@ __metadata:
     "@cratis/components.conformance": "workspace:^"
     "@cratis/fundamentals": "npm:^7.10.3"
     "@types/react": "npm:19.2.18"
-    primereact: "npm:10.9.8"
+    primereact: "npm:10.9.9"
     react: "npm:19.2.8"
     react-dom: "npm:19.2.8"
     reflect-metadata: "npm:0.2.2"
     tsyringe: "npm:4.10.0"
   peerDependencies:
     "@cratis/components": ">=3.0.0 <4"
-    primereact: ">=10 <11"
+    primereact: ">=10.9.9 <11"
     react: ^19.0.0
     react-dom: ^19.0.0
   languageName: unknown
@@ -7276,9 +7276,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"primereact@npm:10.9.8":
-  version: 10.9.8
-  resolution: "primereact@npm:10.9.8"
+"primereact@npm:10.9.9":
+  version: 10.9.9
+  resolution: "primereact@npm:10.9.9"
   dependencies:
     "@types/react-transition-group": "npm:^4.4.1"
     react-transition-group: "npm:^4.4.1"
@@ -7289,7 +7289,7 @@ __metadata:
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 10/33e1ed3b69829b02f40fb3547063f2432f1b7a23d39d418bdf83b5ba57084c0e8521d77646818982e00e57c9e47db51036fe166915f8b08501de729f2c4ab3dc
+  checksum: 10/203b81d941eda9d68e91ecc82107c851ca47c5605a5ee5dca9db2a1fcf4107daf9bcac312a2f87f9fa26df7337c693a6f2a346132c9ed0549ade1b434b9435c0
   languageName: node
   linkType: hard
 

From 03e626c8fe6f317a5350fff6c026910a0f56038e Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Fri, 28 Aug 2026 16:18:52 +0200
Subject: [PATCH 234/267] pi-agent: Implement isolated renderer Storybook

---
 .github/workflows/javascript-build.yml        |  12 +-
 .gitignore                                    |   1 +
 Adapters/Mui/.storybook/preview.tsx           |  22 +++
 Adapters/PrimeReact/.storybook/preview.tsx    |  34 ++++
 Adapters/PrimeReact10/.storybook/preview.tsx  |  19 ++
 .../scripts/verify-workspace-isolation.mjs    |  21 ++-
 Documentation/storybook.mdx                   |   8 +-
 Source/package.json                           |  14 +-
 Storybook/README.md                           |  32 ++++
 .../when_discovering_renderer_previews.ts     |  67 +++++++
 .../for_manager/when_switching_renderer.ts    |  51 ++++++
 Storybook/manager/main.ts                     |  47 +++++
 .../manager/manager-placeholder.stories.ts    |  12 ++
 Storybook/manager/manager.tsx                 | 104 +++++++++++
 Storybook/manager/renderer-navigation.ts      |  35 ++++
 Storybook/package.json                        |  28 +++
 Storybook/preview/main.ts                     | 170 ++++++++++++++++++
 Storybook/preview/preview.tsx                 |  93 ++++++++++
 Storybook/preview/styles.d.ts                 |   4 +
 .../preview/virtual-renderer-preview.tsx      |  13 ++
 Storybook/scripts/build-storybooks.mjs        |  52 ++++++
 Storybook/scripts/dev-storybooks.mjs          |  57 ++++++
 Storybook/scripts/lib/adapter-inventory.d.mts |  35 ++++
 Storybook/scripts/lib/adapter-inventory.mjs   |  87 +++++++++
 Storybook/scripts/lib/schema-validator.d.mts  |   4 +
 Storybook/scripts/lib/schema-validator.mjs    |  72 ++++++++
 Storybook/scripts/run-story-matrix.mjs        |  62 +++++++
 .../scripts/verify-adapter-inventory.mjs      |  28 +++
 .../scripts/verify-peer-major-isolation.mjs   |  72 ++++++++
 .../scripts/verify-storybook-indexes.mjs      |  75 ++++++++
 Storybook/tsconfig.json                       |  31 ++++
 Storybook/vitest.config.ts                    |  12 ++
 Storybook/vitest.setup.ts                     |   6 +
 Storybook/vitest.storybook.config.ts          |  33 ++++
 package.json                                  |   3 +-
 yarn.lock                                     |  10 ++
 36 files changed, 1402 insertions(+), 24 deletions(-)
 create mode 100644 Adapters/Mui/.storybook/preview.tsx
 create mode 100644 Adapters/PrimeReact/.storybook/preview.tsx
 create mode 100644 Adapters/PrimeReact10/.storybook/preview.tsx
 create mode 100644 Storybook/README.md
 create mode 100644 Storybook/for_inventory/when_discovering_renderer_previews.ts
 create mode 100644 Storybook/for_manager/when_switching_renderer.ts
 create mode 100644 Storybook/manager/main.ts
 create mode 100644 Storybook/manager/manager-placeholder.stories.ts
 create mode 100644 Storybook/manager/manager.tsx
 create mode 100644 Storybook/manager/renderer-navigation.ts
 create mode 100644 Storybook/package.json
 create mode 100644 Storybook/preview/main.ts
 create mode 100644 Storybook/preview/preview.tsx
 create mode 100644 Storybook/preview/styles.d.ts
 create mode 100644 Storybook/preview/virtual-renderer-preview.tsx
 create mode 100644 Storybook/scripts/build-storybooks.mjs
 create mode 100644 Storybook/scripts/dev-storybooks.mjs
 create mode 100644 Storybook/scripts/lib/adapter-inventory.d.mts
 create mode 100644 Storybook/scripts/lib/adapter-inventory.mjs
 create mode 100644 Storybook/scripts/lib/schema-validator.d.mts
 create mode 100644 Storybook/scripts/lib/schema-validator.mjs
 create mode 100644 Storybook/scripts/run-story-matrix.mjs
 create mode 100644 Storybook/scripts/verify-adapter-inventory.mjs
 create mode 100644 Storybook/scripts/verify-peer-major-isolation.mjs
 create mode 100644 Storybook/scripts/verify-storybook-indexes.mjs
 create mode 100644 Storybook/tsconfig.json
 create mode 100644 Storybook/vitest.config.ts
 create mode 100644 Storybook/vitest.setup.ts
 create mode 100644 Storybook/vitest.storybook.config.ts

diff --git a/.github/workflows/javascript-build.yml b/.github/workflows/javascript-build.yml
index 5b3069e7..d0882683 100644
--- a/.github/workflows/javascript-build.yml
+++ b/.github/workflows/javascript-build.yml
@@ -25,6 +25,7 @@ on:
             - 'ESLint/**'
             - 'Conformance/**'
             - 'Adapters/**'
+            - 'Storybook/**'
             - 'package.json'
             - 'rollup.config.mjs'
             - 'yarn.lock'
@@ -40,6 +41,7 @@ on:
             - 'ESLint/**'
             - 'Conformance/**'
             - 'Adapters/**'
+            - 'Storybook/**'
             - 'package.json'
             - 'rollup.config.mjs'
             - 'yarn.lock'
@@ -53,7 +55,7 @@ permissions:
 jobs:
     build:
         runs-on: ubuntu-latest
-        timeout-minutes: 15
+        timeout-minutes: 35
 
         steps:
             - name: Checkout code
@@ -104,10 +106,14 @@ jobs:
               working-directory: Source
               run: node scripts/verify-api-docs.mjs
 
-            - name: Build Storybook
+            - name: Verify renderer Storybook type, inventory, specs, and peer isolation
+              working-directory: Storybook
+              run: yarn ci:preflight
+
+            - name: Build composed renderer Storybook
               run: yarn workspace @cratis/components build-storybook
 
-            - name: Verify Storybook stories and autodocs
+            - name: Verify every renderer Storybook index and build attestation
               working-directory: Source
               run: yarn verify-storybook-index
 
diff --git a/.gitignore b/.gitignore
index 0f91d373..2e2427b0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -241,6 +241,7 @@ typings/
 *.d.ts
 !*.scss.d.ts
 !Adapters/**/src/upstream-*-shim.d.ts
+!Storybook/**/*.d.ts
 
 # Visual Studio 6 build log
 *.plg
diff --git a/Adapters/Mui/.storybook/preview.tsx b/Adapters/Mui/.storybook/preview.tsx
new file mode 100644
index 00000000..171b2b33
--- /dev/null
+++ b/Adapters/Mui/.storybook/preview.tsx
@@ -0,0 +1,22 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import { useMemo, type ReactNode } from 'react';
+
+export interface RendererEnvironmentProps {
+    readonly appearance: string;
+    readonly children: ReactNode;
+}
+
+/** Storybook-only Material UI theme boundary for this isolated renderer preview. */
+export const RendererEnvironment = ({ appearance, children }: RendererEnvironmentProps) => {
+    const dark = appearance !== 'baseline-light';
+    const theme = useMemo(
+        () => createTheme({ cssVariables: true, palette: { mode: dark ? 'dark' : 'light' } }),
+        [dark],
+    );
+    return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
+};
+
+export const rendererSetup = Object.freeze({});
diff --git a/Adapters/PrimeReact/.storybook/preview.tsx b/Adapters/PrimeReact/.storybook/preview.tsx
new file mode 100644
index 00000000..7fb8c101
--- /dev/null
+++ b/Adapters/PrimeReact/.storybook/preview.tsx
@@ -0,0 +1,34 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { PrimeReactContext, defaultConfigProps } from '@primereact/core/config';
+import { LocaleProvider } from '@primereact/core/locale';
+import { PassThroughProvider } from '@primereact/core/passthrough';
+import { ThemeProvider as PrimeThemeProvider } from '@primereact/core/theme';
+import Aura from '@primeuix/themes/aura';
+import type { ReactNode } from 'react';
+
+export interface RendererEnvironmentProps {
+    readonly appearance: string;
+    readonly children: ReactNode;
+}
+
+// This bounded Storybook fixture deliberately uses PrimeReact 11's public contexts, matching the
+// adapter conformance boundary. It does not mount PrimeReactProvider or invoke the real license
+// manager. No credential or license value is accepted, read, stored, logged, serialized, bundled,
+// or passed through Components; only the non-secret boolean setup attestation crosses that boundary.
+const publicContextFixture = Object.freeze({ ...defaultConfigProps });
+
+export const RendererEnvironment = ({ children }: RendererEnvironmentProps) => (
+    <PrimeReactContext.Provider value={publicContextFixture}>
+        <LocaleProvider lang='en'>
+            <PassThroughProvider mergeSections mergeProps>
+                <PrimeThemeProvider preset={Aura}>{children}</PrimeThemeProvider>
+            </PassThroughProvider>
+        </LocaleProvider>
+    </PrimeReactContext.Provider>
+);
+
+export const rendererSetup = Object.freeze({
+    'cratis-primereact.license-configured': true,
+});
diff --git a/Adapters/PrimeReact10/.storybook/preview.tsx b/Adapters/PrimeReact10/.storybook/preview.tsx
new file mode 100644
index 00000000..c92b3929
--- /dev/null
+++ b/Adapters/PrimeReact10/.storybook/preview.tsx
@@ -0,0 +1,19 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { PrimeReactProvider } from 'primereact/api';
+import 'primereact/resources/primereact.min.css';
+import 'primereact/resources/themes/lara-dark-blue/theme.css';
+import type { ReactNode } from 'react';
+
+export interface RendererEnvironmentProps {
+    readonly appearance: string;
+    readonly children: ReactNode;
+}
+
+/** Storybook-only PrimeReact 10.9.9 provider and v10 Lara theme boundary. */
+export const RendererEnvironment = ({ children }: RendererEnvironmentProps) => (
+    <PrimeReactProvider value={{ ripple: false }}>{children}</PrimeReactProvider>
+);
+
+export const rendererSetup = Object.freeze({});
diff --git a/Adapters/PrimeReact10/scripts/verify-workspace-isolation.mjs b/Adapters/PrimeReact10/scripts/verify-workspace-isolation.mjs
index 764e9373..79de322e 100644
--- a/Adapters/PrimeReact10/scripts/verify-workspace-isolation.mjs
+++ b/Adapters/PrimeReact10/scripts/verify-workspace-isolation.mjs
@@ -56,19 +56,18 @@ if (
     );
 }
 
-const storybookFiles = [
-    path.join(repositoryDirectory, 'Source/.storybook/main.ts'),
-    path.join(repositoryDirectory, 'Source/.storybook/preview.js'),
-];
-const storybookSource = storybookFiles
-    .map((file) => readFileSync(file, 'utf8'))
-    .join('\n');
+const storybookPreviewConfig = readFileSync(
+    path.join(repositoryDirectory, 'Storybook/preview/main.ts'),
+    'utf8',
+);
 if (
-    storybookSource.includes('@cratis/components.primereact10') ||
-    storybookSource.includes('@cratis/components.primereact')
+    !storybookPreviewConfig.includes('CRATIS_STORYBOOK_ADAPTER_ID') ||
+    !storybookPreviewConfig.includes('cratis-renderer-build-attestation') ||
+    storybookPreviewConfig.includes("from '@cratis/components.primereact10'") ||
+    storybookPreviewConfig.includes("from '@cratis/components.primereact'")
 ) {
     throw new Error(
-        'This tranche records renderer isolation only; it must not wire either adapter into the existing Core Storybook.',
+        'The composed Storybook must select one metadata-discovered adapter per separately built preview graph.',
     );
 }
 
@@ -77,5 +76,5 @@ console.log(
         `${package10.version} at ${package10Path}; PrimeReact11 -> ${package11.version} at ${package11Path}.`,
 );
 console.log(
-    'Storybook finding: one preview dependency graph cannot satisfy both incompatible primereact peers. A future renderer-isolation tranche requires separate renderer projects/configurations; the existing Core Storybook remains unchanged.',
+    'Verified Storybook isolation: metadata selects one adapter per child build, and the composed manager references the separately emitted previews.',
 );
diff --git a/Documentation/storybook.mdx b/Documentation/storybook.mdx
index b6a99b90..06181ef5 100644
--- a/Documentation/storybook.mdx
+++ b/Documentation/storybook.mdx
@@ -6,8 +6,12 @@ tableOfContents: false
 
 import StorybookEmbed from '@components/StorybookEmbed.astro';
 
-Use the Appearance toolbar to compare the maintained baseline in light and dark modes with a representative product-owned token mapping. Stories load the same prefixed, layered, no-Preflight CSS contract as the published package.
+Use the **Renderer** manager control to run the same stable story id with the zero-config Cratis built-in renderer, Material UI, PrimeReact 11.1.0, or PrimeReact 10.9.9. Changing renderer replaces the composed preview iframe. The manager preserves the current story id when the target preview contains it, but component-local state, unsaved control changes, open overlays, and in-progress interactions are reset by that remount.
 
-Every story module also generates an autodocs page from the public component types and TSDoc. CI type-checks the story source, runs every story in Playwright Chromium in both baseline light and dark modes, executes each `play()` interaction, and treats Accessibility-addon axe violations as errors. This is a browser component-test gate, not a claim of universal browser or assistive-technology conformance; keyboard, focus, busy, empty, invalid, disabled, open-overlay, and responsive states still require deliberate story coverage and release review.
+Use the Appearance toolbar to compare the maintained baseline in light and dark modes with a representative product-owned token mapping. Every renderer preview owns its provider and theme boundary while preserving strict profile validation and Core fallback for slots outside the selected adapter's profile. Stories load the same prefixed, layered, no-Preflight Cratis CSS contract as the published package.
+
+PrimeReact 10 and 11 are built as separate preview projects because their incompatible `primereact` peer majors must never enter one dependency graph. The PrimeReact 10 preview resolves its nested 10.9.9 package and v10 theme CSS. The PrimeReact 11 preview is a bounded test fixture: it uses PrimeReact's public contexts and the adapter's non-secret boolean setup attestation without mounting the real license manager. Components and this Storybook do not receive, read, store, log, serialize, bundle, or proxy a license key.
+
+Every story module also generates an autodocs page from the public component types and TSDoc. CI validates the metadata-discovered adapter inventory, type-checks the configuration, asserts peer-major isolation, builds and compares every preview index, then runs all 261 stories in Playwright Chromium under both baseline light and dark modes for all four renderers. That is exactly **2,088 story/appearance/axe cases**, with no story sampling or exclusions; private adapters such as Plain are excluded from composition. Each `play()` interaction runs, and Accessibility-addon axe violations are errors. This is a browser component-test gate, not a claim of universal browser or assistive-technology conformance; keyboard, focus, busy, empty, invalid, disabled, open-overlay, and responsive states still require deliberate story coverage and release review.
 
 <StorybookEmbed fullPage={true} />
diff --git a/Source/package.json b/Source/package.json
index 70140448..dafa0694 100644
--- a/Source/package.json
+++ b/Source/package.json
@@ -241,18 +241,18 @@
         "verify-spatial-consumer": "node ./scripts/verify-spatial-consumer.mjs",
         "verify-provider-context-identity": "node ./scripts/verify-provider-context-identity.mjs",
         "verify-renderer-contracts": "node ./scripts/verify-renderer-contracts.mjs",
-        "typecheck-stories": "node ../node_modules/typescript/bin/tsc -p tsconfig.stories.json",
-        "test-storybook": "yarn test-storybook:light && yarn test-storybook:dark",
-        "test-storybook:light": "STORYBOOK_APPEARANCE=baseline-light yarn g:test --config vitest.storybook.config.ts",
-        "test-storybook:dark": "STORYBOOK_APPEARANCE=baseline-dark yarn g:test --config vitest.storybook.config.ts",
-        "verify-storybook-index": "node ./scripts/verify-storybook-index.mjs",
+        "typecheck-stories": "node ../node_modules/typescript/bin/tsc -p tsconfig.stories.json && yarn workspace @cratis/components.storybook typecheck",
+        "test-storybook": "yarn workspace @cratis/components.storybook test-storybook",
+        "test-storybook:light": "yarn workspace @cratis/components.storybook test-storybook:light",
+        "test-storybook:dark": "yarn workspace @cratis/components.storybook test-storybook:dark",
+        "verify-storybook-index": "yarn workspace @cratis/components.storybook verify-indexes",
         "lint": "yarn g:lint",
         "lint:ci": "yarn g:lint:ci",
         "test": "yarn g:test",
         "ci": "yarn generate-parts && yarn verify-parts-manifest && yarn g:ci && yarn typecheck-stories && yarn g:build && yarn verify-renderer-contracts && yarn verify-package-graph-report",
         "up": "yarn g:up",
-        "dev": "npx storybook dev -p 6006",
-        "build-storybook": "npx storybook build"
+        "dev": "yarn workspace @cratis/components.storybook dev",
+        "build-storybook": "yarn workspace @cratis/components.storybook build"
     },
     "dependencies": {
         "@internationalized/date": "3.12.3",
diff --git a/Storybook/README.md b/Storybook/README.md
new file mode 100644
index 00000000..8220a03e
--- /dev/null
+++ b/Storybook/README.md
@@ -0,0 +1,32 @@
+# Renderer Storybook workspace
+
+This private workspace builds the public Components story corpus once per discovered renderer and composes the resulting previews under one Storybook manager. It is tooling only: `private: true` keeps it out of the repository publication loop, and no generated Storybook output is committed.
+
+## Discovery
+
+`scripts/lib/adapter-inventory.mjs` expands the root Yarn workspaces, selects packages whose `package.json#cratis.kind` is `ui-adapter`, and validates that metadata against `Source/schemas/ui-adapter.schema.json`. Public adapters enter the inventory automatically. A private adapter is recorded as excluded and is never composed. The built-in package is the zero-config default.
+
+An adapter can provide private preview-only provider/theme setup at `<workspace>/.storybook/preview.tsx`. The child build imports that module by convention; no Core renderer list is edited.
+
+## Isolation
+
+Each inventory entry is built by a separate Storybook process into `Source/storybook-static/renderers/<adapter-id>`. The manager references those outputs through Storybook Composition. This process boundary is mandatory for PrimeReact 10.9.9 and 11.1.0 because they are incompatible versions of the same package.
+
+Every child records an ignored `cratis-renderer-attestation.json` beside its generated index. The build fails unless it resolves the adapter workspace's exact PrimeReact development version and no other PrimeReact version. Non-Prime previews fail if they reach PrimeReact at all.
+
+The PrimeReact 11 setup is intentionally bounded to the same public-context fixture used by adapter conformance specs. It passes only `cratis-primereact.license-configured: true`; it does not mount the real provider/license manager and exposes no path for a key. No key may be received, read, stored, logged, serialized, bundled, or proxied by Components or this workspace.
+
+## Commands
+
+Run from the repository root:
+
+```bash
+yarn workspace @cratis/components.storybook ci:preflight
+yarn workspace @cratis/components.storybook build
+yarn workspace @cratis/components.storybook verify-indexes
+yarn playwright install chromium
+yarn workspace @cratis/components.storybook test-storybook
+yarn workspace @cratis/components.storybook dev
+```
+
+`test-storybook` runs 4 isolated previews × 261 stable stories × 2 appearance modes: **2,088 story/appearance/axe cases**. There is no story sampling or tag exclusion. The composed renderer control preserves a stable story id when available, but switching previews remounts the iframe and loses component-local state.
diff --git a/Storybook/for_inventory/when_discovering_renderer_previews.ts b/Storybook/for_inventory/when_discovering_renderer_previews.ts
new file mode 100644
index 00000000..dd425d7a
--- /dev/null
+++ b/Storybook/for_inventory/when_discovering_renderer_previews.ts
@@ -0,0 +1,67 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { mkdtempSync, mkdirSync, rmSync, writeFileSync } from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { expect } from 'chai';
+import { describe, it } from 'vitest';
+import sourcePackage from '../../Source/package.json';
+import adapterSchema from '../../Source/schemas/ui-adapter.schema.json';
+import { discoverAdapterPackages } from '../scripts/lib/adapter-inventory.mjs';
+import { validateAgainstSchema } from '../scripts/lib/schema-validator.mjs';
+
+const storybookRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const repositoryRoot = path.resolve(storybookRoot, '..');
+
+describe('when discovering renderer previews', () => {
+    it('should derive the required inventory from schema-valid workspace package metadata', () => {
+        const inventory = discoverAdapterPackages(repositoryRoot);
+        expect(inventory.adapters.map(adapter => adapter.metadata.id)).to.deep.equal([
+            'cratis-built-in',
+            'cratis-mui',
+            'cratis-primereact10',
+            'cratis-primereact',
+        ]);
+        expect(inventory.adapters.every(adapter => adapter.metadata.kind === 'ui-adapter')).to.equal(true);
+    });
+
+    it('should reject invalid adapter metadata using the published schema', () => {
+        const invalid = { ...sourcePackage.cratis, level: 'unknown' };
+        expect(validateAgainstSchema(invalid, adapterSchema)).not.to.be.empty;
+    });
+
+    it('should exclude a private adapter workspace without a Core inventory edit', () => {
+        const root = mkdtempSync(path.join(os.tmpdir(), 'cratis-storybook-inventory-'));
+        try {
+            mkdirSync(path.join(root, 'Source/schemas'), { recursive: true });
+            mkdirSync(path.join(root, 'Adapters/Plain'), { recursive: true });
+            writeFileSync(path.join(root, 'package.json'), JSON.stringify({
+                private: true,
+                workspaces: ['Source', 'Adapters/*'],
+            }));
+            writeFileSync(path.join(root, 'Source/package.json'), JSON.stringify(sourcePackage));
+            writeFileSync(path.join(root, 'Source/schemas/ui-adapter.schema.json'), JSON.stringify(adapterSchema));
+            writeFileSync(path.join(root, 'Adapters/Plain/package.json'), JSON.stringify({
+                name: '@cratis/components.plain',
+                private: true,
+                cratis: {
+                    ...sourcePackage.cratis,
+                    id: 'cratis-plain',
+                    displayName: 'Private Plain fixture',
+                    category: 'plain',
+                },
+            }));
+            const inventory = discoverAdapterPackages(root);
+            expect(inventory.adapters.map(adapter => adapter.metadata.id)).to.deep.equal(['cratis-built-in']);
+            expect(inventory.exclusions).to.deep.equal([{
+                packageName: '@cratis/components.plain',
+                id: 'cratis-plain',
+                reason: 'private workspace',
+            }]);
+        } finally {
+            rmSync(root, { recursive: true, force: true });
+        }
+    });
+});
diff --git a/Storybook/for_manager/when_switching_renderer.ts b/Storybook/for_manager/when_switching_renderer.ts
new file mode 100644
index 00000000..d6776fc1
--- /dev/null
+++ b/Storybook/for_manager/when_switching_renderer.ts
@@ -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 { expect } from 'chai';
+import type { ComposedRef } from 'storybook/manager-api';
+import { describe, it } from 'vitest';
+import { resolveRendererSelection } from '../manager/renderer-navigation';
+
+const composedRef = (entries: Readonly<Record<string, { readonly id: string; readonly type: 'story' | 'docs' }>>) => ({
+    id: 'target',
+    url: './target',
+    previewInitialized: true,
+    index: entries,
+}) as unknown as ComposedRef;
+
+describe('when switching renderer', () => {
+    it('should preserve the stable story id and view mode when the target contains it', () => {
+        const selection = resolveRendererSelection(
+            'common-button--primary',
+            'story',
+            'cratis-mui',
+            composedRef({
+                'common-button--primary': { id: 'common-button--primary', type: 'story' },
+            }),
+        );
+        expect(selection).to.deep.equal({
+            refId: 'cratis-mui',
+            storyId: 'common-button--primary',
+            viewMode: 'story',
+            preserved: true,
+        });
+    });
+
+    it('should use the first same-mode entry only when the stable id is unavailable', () => {
+        const selection = resolveRendererSelection(
+            'removed-story--example',
+            'docs',
+            'cratis-primereact10',
+            composedRef({
+                'common-button--docs': { id: 'common-button--docs', type: 'docs' },
+                'common-button--primary': { id: 'common-button--primary', type: 'story' },
+            }),
+        );
+        expect(selection).to.deep.equal({
+            refId: 'cratis-primereact10',
+            storyId: 'common-button--docs',
+            viewMode: 'docs',
+            preserved: false,
+        });
+    });
+});
diff --git a/Storybook/manager/main.ts b/Storybook/manager/main.ts
new file mode 100644
index 00000000..6b021a54
--- /dev/null
+++ b/Storybook/manager/main.ts
@@ -0,0 +1,47 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import type { StorybookConfig } from '@storybook/react-vite';
+import type { UserConfig as ViteConfig } from 'vite';
+import { discoverAdapterPackages } from '../scripts/lib/adapter-inventory.mjs';
+
+const storybookRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const repositoryRoot = path.resolve(storybookRoot, '..');
+const inventory = discoverAdapterPackages(repositoryRoot);
+const developmentRefs = process.env.CRATIS_STORYBOOK_DEV_REFS === 'true';
+const refs = Object.fromEntries(
+    inventory.adapters.map((adapter, index) => [
+        adapter.metadata.id,
+        {
+            title: adapter.metadata.displayName,
+            url: developmentRefs
+                ? `http://localhost:${6100 + index}`
+                : `./renderers/${adapter.metadata.id}`,
+        },
+    ]),
+);
+
+const config: StorybookConfig = {
+    stories: ['./manager-placeholder.stories.ts'],
+    tags: {
+        'manager-placeholder': {
+            defaultFilterSelection: 'exclude',
+            excludeFromSidebar: true,
+            excludeFromDocsStories: true,
+        },
+    },
+    refs,
+    addons: [],
+    framework: { name: '@storybook/react-vite', options: {} },
+    core: { builder: '@storybook/builder-vite' },
+    viteFinal(existingConfig: ViteConfig) {
+        return {
+            ...existingConfig,
+            server: { ...(existingConfig.server ?? {}), open: false },
+        };
+    },
+};
+
+export default config;
diff --git a/Storybook/manager/manager-placeholder.stories.ts b/Storybook/manager/manager-placeholder.stories.ts
new file mode 100644
index 00000000..9947095d
--- /dev/null
+++ b/Storybook/manager/manager-placeholder.stories.ts
@@ -0,0 +1,12 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// Storybook 10 requires a nonempty stories configuration even for a composition-only manager.
+// The !dev tag keeps this normalization placeholder out of the manager index and renderer UI.
+export default {
+    title: 'Internal/Composition manager',
+    tags: ['manager-placeholder', '!dev', '!test'],
+    render: () => null,
+};
+
+export const Placeholder = {};
diff --git a/Storybook/manager/manager.tsx b/Storybook/manager/manager.tsx
new file mode 100644
index 00000000..08bf95f9
--- /dev/null
+++ b/Storybook/manager/manager.tsx
@@ -0,0 +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 React from 'react';
+import {
+    addons,
+    types,
+    useStorybookApi,
+    useStorybookState,
+} from 'storybook/manager-api';
+import { themes } from 'storybook/theming';
+import { resolveRendererSelection } from './renderer-navigation';
+
+const addonId = 'cratis/renderer-switcher';
+const toolId = `${addonId}/tool`;
+
+const RendererSwitcher = () => {
+    const api = useStorybookApi();
+    const state = useStorybookState();
+    const refs = state.refs;
+    const selectedRef = state.refId as string | undefined;
+    const rendererRefs = Object.values(refs).sort((left, right) =>
+        (left.title ?? left.id).localeCompare(right.title ?? right.id),
+    );
+
+    return (
+        <label
+            title='Changing renderer remounts the preview iframe and does not preserve local story state.'
+            style={{ display: 'inline-flex', alignItems: 'center', gap: 6, paddingInline: 8 }}
+        >
+            <span style={{ fontSize: 12, fontWeight: 600 }}>Renderer</span>
+            <select
+                aria-label='Renderer'
+                value={selectedRef ?? ''}
+                disabled={rendererRefs.length === 0}
+                onChange={event => {
+                    const refId = event.currentTarget.value;
+                    const selection = resolveRendererSelection(
+                        state.storyId,
+                        state.viewMode ?? 'story',
+                        refId,
+                        refs[refId],
+                    );
+                    if (!selection) return;
+                    api.selectStory(selection.storyId, undefined, {
+                        ref: selection.refId,
+                        viewMode: selection.viewMode,
+                    });
+                }}
+                style={{ minWidth: 190, height: 28, borderRadius: 4 }}
+            >
+                {!selectedRef && <option value=''>Choose renderer</option>}
+                {rendererRefs.map(ref => (
+                    <option key={ref.id} value={ref.id}>
+                        {ref.title ?? ref.id}
+                    </option>
+                ))}
+            </select>
+        </label>
+    );
+};
+
+const urlParams = new URLSearchParams(window.location.search);
+let followsDocsSiteTheme = urlParams.has('docsSiteTheme');
+let currentTheme = urlParams.get('docsSiteTheme') ?? 'dark';
+
+const applyManagerConfig = () => {
+    addons.setConfig({
+        theme: currentTheme === 'light' ? themes.light : themes.dark,
+        navSize: 300,
+        bottomPanelHeight: 300,
+        panelPosition: 'bottom',
+        showToolbar: true,
+        showTabs: true,
+    });
+};
+
+applyManagerConfig();
+addons.register(addonId, () => {
+    addons.add(toolId, {
+        id: toolId,
+        type: types.TOOL,
+        title: 'Renderer',
+        render: () => <RendererSwitcher />,
+    });
+});
+
+addons.getChannel().on('STORY_RENDERED', () => {
+    if (followsDocsSiteTheme) {
+        addons.getChannel().emit('STORYBOOK_THEME_CHANGE', { theme: currentTheme });
+    }
+});
+
+window.addEventListener('message', event => {
+    if (event.source !== window.parent || event.origin !== window.location.origin) return;
+    if (event.data?.type !== 'STORYBOOK_THEME_CHANGE') return;
+    const newTheme = event.data.theme;
+    if (newTheme !== 'light' && newTheme !== 'dark') return;
+    followsDocsSiteTheme = true;
+    if (currentTheme === newTheme) return;
+    currentTheme = newTheme;
+    applyManagerConfig();
+    addons.getChannel().emit('STORYBOOK_THEME_CHANGE', { theme: currentTheme });
+});
diff --git a/Storybook/manager/renderer-navigation.ts b/Storybook/manager/renderer-navigation.ts
new file mode 100644
index 00000000..38500ab2
--- /dev/null
+++ b/Storybook/manager/renderer-navigation.ts
@@ -0,0 +1,35 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { ComposedRef } from 'storybook/manager-api';
+
+export interface RendererSelection {
+    readonly refId: string;
+    readonly storyId: string;
+    readonly viewMode: string;
+    readonly preserved: boolean;
+}
+
+/** Selects the same stable story id in another composed renderer when its index contains it. */
+export const resolveRendererSelection = (
+    storyId: string,
+    viewMode: string,
+    targetRefId: string,
+    target: ComposedRef | undefined,
+): RendererSelection | undefined => {
+    if (!target?.index) return undefined;
+    const current = target.index[storyId];
+    if (current && (current.type === 'story' || current.type === 'docs')) {
+        return { refId: targetRefId, storyId, viewMode, preserved: true };
+    }
+    const requestedType = viewMode === 'docs' ? 'docs' : 'story';
+    const fallback = Object.values(target.index).find(entry => entry.type === requestedType)
+        ?? Object.values(target.index).find(entry => entry.type === 'story');
+    if (!fallback) return undefined;
+    return {
+        refId: targetRefId,
+        storyId: fallback.id,
+        viewMode: fallback.type === 'docs' ? 'docs' : 'story',
+        preserved: false,
+    };
+};
diff --git a/Storybook/package.json b/Storybook/package.json
new file mode 100644
index 00000000..43dd551f
--- /dev/null
+++ b/Storybook/package.json
@@ -0,0 +1,28 @@
+{
+    "name": "@cratis/components.storybook",
+    "version": "0.0.0",
+    "private": true,
+    "description": "Private composed Storybook workspace for Cratis Components renderer previews.",
+    "type": "module",
+    "scripts": {
+        "clean": "rm -rf ../Source/storybook-static",
+        "dev": "node scripts/dev-storybooks.mjs",
+        "lint": "node ../node_modules/eslint/bin/eslint.js . --quiet",
+        "typecheck": "node ../node_modules/typescript/bin/tsc -p tsconfig.json",
+        "test": "node ../node_modules/vitest/vitest.mjs run --config vitest.config.ts",
+        "verify-inventory": "node scripts/verify-adapter-inventory.mjs",
+        "verify-isolation": "node scripts/verify-peer-major-isolation.mjs",
+        "build": "node scripts/build-storybooks.mjs",
+        "verify-indexes": "node scripts/verify-storybook-indexes.mjs",
+        "test-storybook": "node scripts/run-story-matrix.mjs",
+        "test-storybook:light": "node scripts/run-story-matrix.mjs baseline-light",
+        "test-storybook:dark": "node scripts/run-story-matrix.mjs baseline-dark",
+        "ci:preflight": "yarn verify-inventory && yarn typecheck && yarn test && yarn verify-isolation",
+        "ci": "yarn ci:preflight && yarn build && yarn verify-indexes && yarn test-storybook"
+    },
+    "devDependencies": {
+        "@types/react": "^19.2.18",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
+    }
+}
diff --git a/Storybook/preview/main.ts b/Storybook/preview/main.ts
new file mode 100644
index 00000000..f3ca5742
--- /dev/null
+++ b/Storybook/preview/main.ts
@@ -0,0 +1,170 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { existsSync, readFileSync } from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import type { StorybookConfig } from '@storybook/react-vite';
+import type { Alias, AliasOptions, Plugin, UserConfig as ViteConfig } from 'vite';
+import {
+    discoverAdapterPackages,
+    requireAdapter,
+} from '../scripts/lib/adapter-inventory.mjs';
+
+const storybookRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const repositoryRoot = path.resolve(storybookRoot, '..');
+const sourceRoot = path.join(repositoryRoot, 'Source');
+const inventory = discoverAdapterPackages(repositoryRoot);
+const adapter = requireAdapter(
+    inventory,
+    process.env.CRATIS_STORYBOOK_ADAPTER_ID ?? 'cratis-built-in',
+);
+const virtualModuleId = 'virtual:cratis-renderer-preview';
+const resolvedVirtualModuleId = `\0${virtualModuleId}`;
+const posixPath = (value: string) => value.split(path.sep).join('/');
+
+const existingAliases = (aliases: AliasOptions | undefined): Alias[] => {
+    if (!aliases) return [];
+    if (Array.isArray(aliases)) return [...aliases];
+    return Object.entries(aliases).map(([find, replacement]) => ({
+        find,
+        replacement,
+    }));
+};
+
+const rendererModule = () => {
+    const environment = adapter.setupFile
+        ? `import { RendererEnvironment, rendererSetup } from ${JSON.stringify(posixPath(adapter.setupFile))};`
+        : `const RendererEnvironment = ({ children }) => children;\nconst rendererSetup = Object.freeze({});`;
+    const library = adapter.builtIn
+        ? 'const rendererProperties = {};'
+        : [
+              `import { ${adapter.metadata.export} as selectedLibrary } from ${JSON.stringify(posixPath(adapter.sourceEntry!))};`,
+              "const rendererProperties = { library: selectedLibrary, libraryMode: 'strict', rendererFallback: 'core', rendererSetup };",
+          ].join('\n');
+    return `
+import React from 'react';
+import { CratisComponentsProvider } from '@cratis/components';
+${environment}
+${library}
+export const rendererId = ${JSON.stringify(adapter.metadata.id)};
+export const RendererPreviewProvider = ({ appearance, children }) => React.createElement(
+    RendererEnvironment,
+    { appearance },
+    React.createElement(
+        CratisComponentsProvider,
+        { value: { locale: 'en-US' }, ...rendererProperties },
+        children,
+    ),
+);
+`;
+};
+
+const rendererVirtualModule = (): Plugin => ({
+    name: 'cratis-renderer-preview',
+    enforce: 'pre',
+    resolveId(id) {
+        return id === virtualModuleId ? resolvedVirtualModuleId : undefined;
+    },
+    load(id) {
+        return id === resolvedVirtualModuleId ? rendererModule() : undefined;
+    },
+});
+
+const primeReactVersions = (moduleIds: readonly string[]) => {
+    const versions = new Map<string, string>();
+    for (const rawId of moduleIds) {
+        const id = rawId.replaceAll('\\', '/').split('?')[0];
+        const marker = '/node_modules/primereact/';
+        const markerIndex = id.lastIndexOf(marker);
+        if (markerIndex < 0) continue;
+        const packageFile = `${id.slice(0, markerIndex + marker.length - 1)}/package.json`;
+        if (!existsSync(packageFile)) continue;
+        const packageJson = JSON.parse(readFileSync(packageFile, 'utf8')) as {
+            readonly version: string;
+        };
+        versions.set(packageFile, packageJson.version);
+    }
+    return [...new Set(versions.values())].sort();
+};
+
+const rendererBuildAttestation = (): Plugin => ({
+    name: 'cratis-renderer-build-attestation',
+    generateBundle() {
+        const versions = primeReactVersions([...this.getModuleIds()]);
+        const expected = adapter.expectedUpstreamVersion;
+        if (expected && (versions.length !== 1 || versions[0] !== expected)) {
+            this.error(
+                `Renderer '${adapter.metadata.id}' expected primereact ${expected}, resolved ${versions.join(', ') || 'none'}.`,
+            );
+        }
+        if (!expected && versions.length > 0) {
+            this.error(
+                `Renderer '${adapter.metadata.id}' unexpectedly reached primereact ${versions.join(', ')}.`,
+            );
+        }
+        this.emitFile({
+            type: 'asset',
+            fileName: 'cratis-renderer-attestation.json',
+            source: `${JSON.stringify(
+                {
+                    rendererId: adapter.metadata.id,
+                    packageName: adapter.packageName,
+                    primereactVersions: versions,
+                    expectedPrimereactVersion: expected ?? null,
+                    profileMode: adapter.builtIn ? 'zero-config' : 'strict',
+                    nonProfileFallback: 'core',
+                    primeReact11Boundary:
+                        adapter.metadata.id === 'cratis-primereact'
+                            ? 'public-context-with-boolean-attestation-no-license-manager'
+                            : null,
+                },
+                null,
+                2,
+            )}\n`,
+        });
+    },
+});
+
+const config: StorybookConfig = {
+    stories: [`${posixPath(sourceRoot)}/!(dist|node_modules|storybook-static)/**/*.stories.@(ts|tsx)`],
+    addons: ['@storybook/addon-docs', '@storybook/addon-a11y', '@storybook/addon-vitest'],
+    framework: { name: '@storybook/react-vite', options: {} },
+    core: { builder: '@storybook/builder-vite' },
+    staticDirs: [{ from: path.join(sourceRoot, 'public'), to: '/' }],
+    async viteFinal(existingConfig: ViteConfig) {
+        return {
+            ...existingConfig,
+            // Do not expose Vite's broad VITE_* environment namespace to preview modules. In
+            // particular, a host-owned PrimeUI key can never cross into this test bundle.
+            envPrefix: 'CRATIS_STORYBOOK_PUBLIC_',
+            plugins: [
+                ...(existingConfig.plugins ?? []),
+                rendererVirtualModule(),
+                rendererBuildAttestation(),
+            ],
+            resolve: {
+                ...existingConfig.resolve,
+                alias: [
+                    {
+                        find: /^@cratis\/components$/,
+                        replacement: path.join(sourceRoot, 'index.ts'),
+                    },
+                    {
+                        find: /^@cratis\/components\/(.+)$/,
+                        replacement: `${posixPath(sourceRoot)}/$1/index.ts`,
+                    },
+                    ...existingAliases(existingConfig.resolve?.alias),
+                ],
+            },
+            server: { ...(existingConfig.server ?? {}), open: false },
+            build: {
+                ...(existingConfig.build ?? {}),
+                cssMinify: false,
+                chunkSizeWarningLimit: 1200,
+            },
+        };
+    },
+};
+
+export default config;
diff --git a/Storybook/preview/preview.tsx b/Storybook/preview/preview.tsx
new file mode 100644
index 00000000..b1ec38f2
--- /dev/null
+++ b/Storybook/preview/preview.tsx
@@ -0,0 +1,93 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { addons } from 'storybook/preview-api';
+import React from 'react';
+import { RendererPreviewProvider } from 'virtual:cratis-renderer-preview';
+import '../../Source/.storybook/foundation.css';
+import '../../Source/.storybook/preview.css';
+
+const darkSelector = 'cratis-dark';
+const lightSelector = 'cratis-light';
+
+const appearanceModes = {
+    'baseline-dark': {
+        title: 'Cratis baseline — dark',
+        dark: true,
+        bodyClass: undefined,
+    },
+    'baseline-light': {
+        title: 'Cratis baseline — light',
+        dark: false,
+        bodyClass: undefined,
+    },
+    'product-theme': {
+        title: 'Product-owned token mapping',
+        dark: true,
+        bodyClass: 'storybook-product-theme',
+    },
+} as const;
+
+type Appearance = keyof typeof appearanceModes;
+const allBodyClasses: string[] = Object.values(appearanceModes).flatMap(mode =>
+    mode.bodyClass ? [mode.bodyClass] : [],
+);
+let docsSiteAppearance: Appearance | undefined;
+
+const applyAppearance = (appearance: Appearance) => {
+    const mode = appearanceModes[appearance];
+    document.documentElement.classList.toggle(darkSelector, mode.dark);
+    document.documentElement.classList.toggle(lightSelector, !mode.dark);
+    document.body.classList.remove(...allBodyClasses);
+    if (mode.bodyClass) document.body.classList.add(mode.bodyClass);
+};
+
+addons.getChannel().on('STORYBOOK_THEME_CHANGE', ({ theme }: { readonly theme: string }) => {
+    docsSiteAppearance = theme === 'light' ? 'baseline-light' : 'baseline-dark';
+    applyAppearance(docsSiteAppearance);
+});
+
+export const tags = ['autodocs'];
+
+export const globalTypes = {
+    appearance: {
+        name: 'Appearance',
+        description: 'Render with the Cratis baseline or a product-owned token mapping',
+        defaultValue: 'baseline-dark',
+        toolbar: {
+            icon: 'paintbrush',
+            items: Object.entries(appearanceModes).map(([value, mode]) => ({
+                value,
+                title: mode.title,
+            })),
+            showName: true,
+        },
+    },
+};
+
+export const decorators = [
+    (Story: React.ComponentType, context: { readonly globals: { readonly appearance?: Appearance } }) => {
+        const appearance = docsSiteAppearance ?? context.globals.appearance ?? 'baseline-dark';
+        applyAppearance(appearance);
+        return (
+            <RendererPreviewProvider appearance={appearance}>
+                <Story />
+            </RendererPreviewProvider>
+        );
+    },
+];
+
+export const parameters = {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: { expanded: true },
+    a11y: { test: 'error' },
+    backgrounds: {
+        default: 'dark',
+        values: [
+            { name: 'dark', value: '#111827' },
+            { name: 'surface-card', value: '#1f2937' },
+            { name: 'light', value: '#ffffff' },
+            { name: 'surface-light', value: '#f8f9fa' },
+        ],
+    },
+};
diff --git a/Storybook/preview/styles.d.ts b/Storybook/preview/styles.d.ts
new file mode 100644
index 00000000..07a0b760
--- /dev/null
+++ b/Storybook/preview/styles.d.ts
@@ -0,0 +1,4 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+declare module '*.css';
diff --git a/Storybook/preview/virtual-renderer-preview.tsx b/Storybook/preview/virtual-renderer-preview.tsx
new file mode 100644
index 00000000..e7786c57
--- /dev/null
+++ b/Storybook/preview/virtual-renderer-preview.tsx
@@ -0,0 +1,13 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { ReactNode } from 'react';
+
+export interface RendererPreviewProviderProps {
+    readonly appearance: string;
+    readonly children: ReactNode;
+}
+
+/** Type-checking placeholder replaced by the selected renderer's Vite virtual module. */
+export const RendererPreviewProvider = ({ children }: RendererPreviewProviderProps) => children;
+export const rendererId = 'typecheck-placeholder';
diff --git a/Storybook/scripts/build-storybooks.mjs b/Storybook/scripts/build-storybooks.mjs
new file mode 100644
index 00000000..62d1dc86
--- /dev/null
+++ b/Storybook/scripts/build-storybooks.mjs
@@ -0,0 +1,52 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { rmSync } from 'node:fs';
+import { spawnSync } from 'node:child_process';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { discoverAdapterPackages } from './lib/adapter-inventory.mjs';
+
+const storybookRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const repositoryRoot = path.resolve(storybookRoot, '..');
+const outputRoot = path.join(repositoryRoot, 'Source/storybook-static');
+const storybookCli = path.join(repositoryRoot, 'node_modules/storybook/dist/bin/dispatcher.js');
+const inventory = discoverAdapterPackages(repositoryRoot);
+
+const runCommand = (label, executable, args, environment = {}) => {
+    console.log(`\n--- ${label} ---`);
+    const result = spawnSync(executable, args, {
+        cwd: repositoryRoot,
+        env: { ...process.env, ...environment },
+        stdio: 'inherit',
+        timeout: 300_000,
+    });
+    if (result.error) throw result.error;
+    if (result.status !== 0) throw new Error(`${label} failed with exit code ${result.status}.`);
+};
+const runNode = (label, script) => runCommand(label, process.execPath, [script]);
+const runStorybook = (label, args, environment) =>
+    runCommand(label, process.execPath, [storybookCli, ...args], environment);
+
+runNode('Verify adapter inventory', path.join(storybookRoot, 'scripts/verify-adapter-inventory.mjs'));
+runNode('Verify PrimeReact peer-major isolation', path.join(storybookRoot, 'scripts/verify-peer-major-isolation.mjs'));
+rmSync(outputRoot, { recursive: true, force: true });
+runStorybook('Build composed Storybook manager', [
+    'build',
+    '--config-dir',
+    path.join(storybookRoot, 'manager'),
+    '--output-dir',
+    outputRoot,
+    '--disable-telemetry',
+]);
+for (const adapter of inventory.adapters) {
+    runStorybook(`Build ${adapter.metadata.displayName} preview`, [
+        'build',
+        '--config-dir',
+        path.join(storybookRoot, 'preview'),
+        '--output-dir',
+        path.join(outputRoot, 'renderers', adapter.metadata.id),
+        '--disable-telemetry',
+    ], { CRATIS_STORYBOOK_ADAPTER_ID: adapter.metadata.id });
+}
+console.log(`\nBuilt one manager and ${inventory.adapters.length} isolated renderer previews at ${outputRoot}.`);
diff --git a/Storybook/scripts/dev-storybooks.mjs b/Storybook/scripts/dev-storybooks.mjs
new file mode 100644
index 00000000..a9568230
--- /dev/null
+++ b/Storybook/scripts/dev-storybooks.mjs
@@ -0,0 +1,57 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { spawn } from 'node:child_process';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { discoverAdapterPackages } from './lib/adapter-inventory.mjs';
+
+const storybookRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const repositoryRoot = path.resolve(storybookRoot, '..');
+const storybookCli = path.join(repositoryRoot, 'node_modules/storybook/dist/bin/dispatcher.js');
+const inventory = discoverAdapterPackages(repositoryRoot);
+const children = [];
+let stopping = false;
+
+const launch = (label, configDirectory, port, environment = {}) => {
+    const child = spawn(process.execPath, [
+        storybookCli,
+        'dev',
+        '--config-dir',
+        configDirectory,
+        '--port',
+        String(port),
+        '--no-open',
+        '--disable-telemetry',
+    ], {
+        cwd: repositoryRoot,
+        env: { ...process.env, ...environment },
+        stdio: 'inherit',
+    });
+    children.push(child);
+    child.once('exit', code => {
+        if (stopping || code === 0) return;
+        console.error(`${label} exited with code ${code}.`);
+        stop(code ?? 1);
+    });
+};
+
+const stop = code => {
+    if (stopping) return;
+    stopping = true;
+    for (const child of children) if (!child.killed) child.kill('SIGTERM');
+    process.exitCode = code;
+};
+process.once('SIGINT', () => stop(0));
+process.once('SIGTERM', () => stop(0));
+
+inventory.adapters.forEach((adapter, index) => launch(
+    adapter.metadata.displayName,
+    path.join(storybookRoot, 'preview'),
+    6100 + index,
+    { CRATIS_STORYBOOK_ADAPTER_ID: adapter.metadata.id },
+));
+launch('Composed Storybook manager', path.join(storybookRoot, 'manager'), 6006, {
+    CRATIS_STORYBOOK_DEV_REFS: 'true',
+});
+console.log(`Composed manager: http://localhost:6006; ${inventory.adapters.length} isolated previews: ports 6100-${6099 + inventory.adapters.length}.`);
diff --git a/Storybook/scripts/lib/adapter-inventory.d.mts b/Storybook/scripts/lib/adapter-inventory.d.mts
new file mode 100644
index 00000000..d61d7e7a
--- /dev/null
+++ b/Storybook/scripts/lib/adapter-inventory.d.mts
@@ -0,0 +1,35 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+export interface AdapterMetadata {
+    readonly kind: 'ui-adapter';
+    readonly id: string;
+    readonly displayName: string;
+    readonly category: string;
+    readonly export: string;
+    readonly upstream: Readonly<Record<string, string>>;
+}
+
+export interface AdapterInventoryEntry {
+    readonly packageName: string;
+    readonly packageDirectory: string;
+    readonly packageFile: string;
+    readonly metadata: AdapterMetadata;
+    readonly setupFile?: string;
+    readonly sourceEntry?: string;
+    readonly expectedUpstreamVersion?: string;
+    readonly builtIn: boolean;
+}
+
+export interface AdapterInventory {
+    readonly adapters: readonly AdapterInventoryEntry[];
+    readonly exclusions: readonly {
+        readonly packageName: string;
+        readonly id: string;
+        readonly reason: string;
+    }[];
+    readonly packageFiles: readonly string[];
+}
+
+export function discoverAdapterPackages(repositoryRoot: string): AdapterInventory;
+export function requireAdapter(inventory: AdapterInventory, id: string): AdapterInventoryEntry;
diff --git a/Storybook/scripts/lib/adapter-inventory.mjs b/Storybook/scripts/lib/adapter-inventory.mjs
new file mode 100644
index 00000000..795ed23e
--- /dev/null
+++ b/Storybook/scripts/lib/adapter-inventory.mjs
@@ -0,0 +1,87 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { existsSync, readFileSync } from 'node:fs';
+import path from 'node:path';
+import { globSync } from 'glob';
+import { validateAgainstSchema } from './schema-validator.mjs';
+
+const readJson = file => JSON.parse(readFileSync(file, 'utf8'));
+const normalize = value => value.split(path.sep).join('/');
+
+export const discoverAdapterPackages = repositoryRoot => {
+    const rootPackage = readJson(path.join(repositoryRoot, 'package.json'));
+    const schema = readJson(path.join(repositoryRoot, 'Source/schemas/ui-adapter.schema.json'));
+    const packageFiles = [...new Set(rootPackage.workspaces.flatMap(workspace =>
+        globSync(`${workspace}/package.json`, {
+            cwd: repositoryRoot,
+            ignore: ['**/dist/**', '**/node_modules/**'],
+        })))]
+        .sort();
+    const adapters = [];
+    const exclusions = [];
+
+    for (const relativePackageFile of packageFiles) {
+        const packageFile = path.join(repositoryRoot, relativePackageFile);
+        const packageJson = readJson(packageFile);
+        if (packageJson.cratis?.kind !== 'ui-adapter') continue;
+        const problems = validateAgainstSchema(packageJson.cratis, schema);
+        if (problems.length > 0) {
+            throw new Error(
+                `Invalid UI adapter metadata in ${normalize(relativePackageFile)}:\n- ${problems.join('\n- ')}`,
+            );
+        }
+        if (packageJson.private === true) {
+            exclusions.push(Object.freeze({
+                packageName: packageJson.name,
+                id: packageJson.cratis.id,
+                reason: 'private workspace',
+            }));
+            continue;
+        }
+        const packageDirectory = path.dirname(packageFile);
+        const setupFile = path.join(packageDirectory, '.storybook/preview.tsx');
+        const sourceCandidates = [
+            path.join(packageDirectory, 'src/index.tsx'),
+            path.join(packageDirectory, 'src/index.ts'),
+            path.resolve(packageDirectory, packageJson.cratis.entry),
+        ];
+        const sourceEntry = sourceCandidates.find(existsSync);
+        if (!packageJson.cratis.category.includes('built-in') && !sourceEntry) {
+            throw new Error(`UI adapter '${packageJson.cratis.id}' has no discoverable source or built entry.`);
+        }
+        adapters.push(Object.freeze({
+            packageName: packageJson.name,
+            packageDirectory,
+            packageFile,
+            metadata: Object.freeze(packageJson.cratis),
+            setupFile: existsSync(setupFile) ? setupFile : undefined,
+            sourceEntry,
+            expectedUpstreamVersion: packageJson.devDependencies?.primereact,
+            builtIn: packageJson.cratis.category === 'built-in',
+        }));
+    }
+
+    const duplicateIds = adapters
+        .map(adapter => adapter.metadata.id)
+        .filter((id, index, ids) => ids.indexOf(id) !== index);
+    if (duplicateIds.length > 0) throw new Error(`Duplicate UI adapter ids: ${[...new Set(duplicateIds)].join(', ')}.`);
+    const builtIns = adapters.filter(adapter => adapter.builtIn);
+    if (builtIns.length !== 1) throw new Error(`Expected exactly one public built-in adapter, found ${builtIns.length}.`);
+
+    adapters.sort((left, right) => {
+        if (left.builtIn !== right.builtIn) return left.builtIn ? -1 : 1;
+        return left.metadata.displayName.localeCompare(right.metadata.displayName);
+    });
+    return Object.freeze({
+        adapters: Object.freeze(adapters),
+        exclusions: Object.freeze(exclusions),
+        packageFiles: Object.freeze(packageFiles),
+    });
+};
+
+export const requireAdapter = (inventory, id) => {
+    const adapter = inventory.adapters.find(candidate => candidate.metadata.id === id);
+    if (!adapter) throw new Error(`Unknown renderer '${id}'. Run the adapter inventory check.`);
+    return adapter;
+};
diff --git a/Storybook/scripts/lib/schema-validator.d.mts b/Storybook/scripts/lib/schema-validator.d.mts
new file mode 100644
index 00000000..0774dd9b
--- /dev/null
+++ b/Storybook/scripts/lib/schema-validator.d.mts
@@ -0,0 +1,4 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+export function validateAgainstSchema(candidate: unknown, schema: unknown): readonly string[];
diff --git a/Storybook/scripts/lib/schema-validator.mjs b/Storybook/scripts/lib/schema-validator.mjs
new file mode 100644
index 00000000..491ce066
--- /dev/null
+++ b/Storybook/scripts/lib/schema-validator.mjs
@@ -0,0 +1,72 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+const isRecord = value => typeof value === 'object' && value !== null && !Array.isArray(value);
+const valueType = value => {
+    if (Array.isArray(value)) return 'array';
+    if (value === null) return 'null';
+    if (typeof value === 'number' && Number.isInteger(value)) return 'integer';
+    return typeof value === 'object' ? 'object' : typeof value;
+};
+const sameJson = (left, right) => JSON.stringify(left) === JSON.stringify(right);
+
+export const validateAgainstSchema = (candidate, schema) => {
+    const resolveReference = reference => {
+        if (!reference.startsWith('#/')) throw new Error(`Unsupported schema reference '${reference}'.`);
+        let current = schema;
+        for (const encodedSegment of reference.slice(2).split('/')) {
+            const segment = encodedSegment.replaceAll('~1', '/').replaceAll('~0', '~');
+            if (!isRecord(current) || !(segment in current)) {
+                throw new Error(`Unresolved schema reference '${reference}'.`);
+            }
+            current = current[segment];
+        }
+        if (!isRecord(current)) throw new Error(`Schema reference '${reference}' does not resolve to a rule.`);
+        return current;
+    };
+
+    const validate = (value, rule, location = '$') => {
+        if (rule.$ref) return validate(value, resolveReference(rule.$ref), location);
+        const problems = [];
+        const add = message => problems.push(`${location}: ${message}`);
+        if (rule.type && valueType(value) !== rule.type) {
+            add(`expected ${rule.type}, got ${valueType(value)}`);
+            return problems;
+        }
+        if ('const' in rule && !sameJson(value, rule.const)) add(`expected ${JSON.stringify(rule.const)}`);
+        if (rule.enum && !rule.enum.some(candidateValue => sameJson(candidateValue, value))) add('value is outside the declared enum');
+        if (typeof value === 'string') {
+            if (rule.minLength !== undefined && value.length < rule.minLength) add(`must have at least ${rule.minLength} characters`);
+            if (rule.maxLength !== undefined && value.length > rule.maxLength) add(`must have no more than ${rule.maxLength} characters`);
+            if (rule.pattern && !new RegExp(rule.pattern, 'u').test(value)) add(`does not match ${rule.pattern}`);
+        }
+        if (Array.isArray(value)) {
+            if (rule.minItems !== undefined && value.length < rule.minItems) add(`must contain at least ${rule.minItems} items`);
+            if (rule.maxItems !== undefined && value.length > rule.maxItems) add(`must contain no more than ${rule.maxItems} items`);
+            if (rule.uniqueItems && new Set(value.map(item => JSON.stringify(item))).size !== value.length) add('items must be unique');
+            if (rule.items) value.forEach((item, index) => problems.push(...validate(item, rule.items, `${location}[${index}]`)));
+        }
+        if (isRecord(value)) {
+            const keys = Object.keys(value);
+            if (rule.minProperties !== undefined && keys.length < rule.minProperties) add(`must contain at least ${rule.minProperties} properties`);
+            if (rule.maxProperties !== undefined && keys.length > rule.maxProperties) add(`must contain no more than ${rule.maxProperties} properties`);
+            for (const required of rule.required ?? []) if (!(required in value)) add(`missing required property '${required}'`);
+            for (const key of keys) {
+                if (rule.propertyNames) problems.push(...validate(key, rule.propertyNames, `${location}.${key} (property name)`));
+                const propertyRule = rule.properties?.[key];
+                if (propertyRule) problems.push(...validate(value[key], propertyRule, `${location}.${key}`));
+                else if (rule.additionalProperties === false) add(`unknown property '${key}'`);
+                else if (isRecord(rule.additionalProperties)) problems.push(...validate(value[key], rule.additionalProperties, `${location}.${key}`));
+            }
+        }
+        for (const nested of rule.allOf ?? []) problems.push(...validate(value, nested, location));
+        if (rule.if && validate(value, rule.if, location).length === 0 && rule.then) problems.push(...validate(value, rule.then, location));
+        if (rule.oneOf) {
+            const matches = rule.oneOf.filter(option => validate(value, option, location).length === 0).length;
+            if (matches !== 1) add(`must match exactly one alternative, matched ${matches}`);
+        }
+        return problems;
+    };
+
+    return validate(candidate, schema);
+};
diff --git a/Storybook/scripts/run-story-matrix.mjs b/Storybook/scripts/run-story-matrix.mjs
new file mode 100644
index 00000000..7e61369b
--- /dev/null
+++ b/Storybook/scripts/run-story-matrix.mjs
@@ -0,0 +1,62 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { spawnSync } from 'node:child_process';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { discoverAdapterPackages } from './lib/adapter-inventory.mjs';
+
+const storybookRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const repositoryRoot = path.resolve(storybookRoot, '..');
+const inventory = discoverAdapterPackages(repositoryRoot);
+const requestedAppearance = process.argv[2];
+const appearances = requestedAppearance ? [requestedAppearance] : ['baseline-light', 'baseline-dark'];
+for (const appearance of appearances) {
+    if (!['baseline-light', 'baseline-dark'].includes(appearance)) {
+        throw new Error(`Unknown matrix appearance '${appearance}'.`);
+    }
+}
+
+const runNode = (label, script) => {
+    console.log(`\n--- ${label} ---`);
+    const result = spawnSync(process.execPath, [script], {
+        cwd: repositoryRoot,
+        stdio: 'inherit',
+        timeout: 120_000,
+    });
+    if (result.error) throw result.error;
+    if (result.status !== 0) throw new Error(`${label} failed with exit code ${result.status}.`);
+};
+
+runNode('Pre-matrix peer-major isolation', path.join(storybookRoot, 'scripts/verify-peer-major-isolation.mjs'));
+runNode('Pre-matrix Storybook indexes', path.join(storybookRoot, 'scripts/verify-storybook-indexes.mjs'));
+
+const vitest = path.join(repositoryRoot, 'node_modules/vitest/vitest.mjs');
+for (const adapter of inventory.adapters) {
+    for (const appearance of appearances) {
+        const label = `${adapter.metadata.id} / ${appearance}`;
+        console.log(`\n--- Browser story and axe matrix: ${label} ---`);
+        const result = spawnSync(process.execPath, [
+            vitest,
+            'run',
+            '--config',
+            path.join(storybookRoot, 'vitest.storybook.config.ts'),
+        ], {
+            cwd: repositoryRoot,
+            env: {
+                ...process.env,
+                CRATIS_STORYBOOK_ADAPTER_ID: adapter.metadata.id,
+                STORYBOOK_APPEARANCE: appearance,
+            },
+            stdio: 'inherit',
+            timeout: 600_000,
+        });
+        if (result.error) throw result.error;
+        if (result.status !== 0) throw new Error(`Browser matrix failed for ${label} with exit code ${result.status}.`);
+    }
+}
+
+const matrixCount = inventory.adapters.length * 261 * appearances.length;
+console.log(`\nCompleted ${inventory.adapters.length} isolated previews × 261 stories × ${appearances.length} appearance mode(s) = ${matrixCount} story/appearance/axe cases.`);
+console.log('Story exclusions: none. No sampling or tag exclusion was applied.');
+console.log(`Renderer exclusions: ${inventory.exclusions.map(item => `${item.id} (${item.reason})`).join(', ') || 'none'}.`);
diff --git a/Storybook/scripts/verify-adapter-inventory.mjs b/Storybook/scripts/verify-adapter-inventory.mjs
new file mode 100644
index 00000000..e5c38294
--- /dev/null
+++ b/Storybook/scripts/verify-adapter-inventory.mjs
@@ -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 path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { discoverAdapterPackages } from './lib/adapter-inventory.mjs';
+
+const storybookRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const repositoryRoot = path.resolve(storybookRoot, '..');
+const inventory = discoverAdapterPackages(repositoryRoot);
+const required = new Set([
+    'cratis-built-in',
+    'cratis-mui',
+    'cratis-primereact',
+    'cratis-primereact10',
+]);
+const missing = [...required].filter(id => !inventory.adapters.some(adapter => adapter.metadata.id === id));
+if (missing.length > 0) throw new Error(`Missing required renderer previews: ${missing.join(', ')}.`);
+const plain = inventory.adapters.filter(adapter => adapter.metadata.id.toLowerCase().includes('plain'));
+if (plain.length > 0) throw new Error(`Private Plain renderers must not enter the public preview inventory: ${plain.map(adapter => adapter.metadata.id).join(', ')}.`);
+
+console.log(`Discovered ${inventory.adapters.length} schema-valid public UI adapters from workspace package metadata:`);
+for (const adapter of inventory.adapters) {
+    console.log(`- ${adapter.metadata.id}: ${adapter.packageName} (${adapter.metadata.displayName})`);
+}
+console.log(
+    `Excluded ${inventory.exclusions.length} private UI adapter workspace(s): ${inventory.exclusions.map(item => item.id).join(', ') || 'none'}.`,
+);
diff --git a/Storybook/scripts/verify-peer-major-isolation.mjs b/Storybook/scripts/verify-peer-major-isolation.mjs
new file mode 100644
index 00000000..7965c57d
--- /dev/null
+++ b/Storybook/scripts/verify-peer-major-isolation.mjs
@@ -0,0 +1,72 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { readFileSync, realpathSync } from 'node:fs';
+import { createRequire } from 'node:module';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { discoverAdapterPackages } from './lib/adapter-inventory.mjs';
+
+const storybookRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const repositoryRoot = path.resolve(storybookRoot, '..');
+const inventory = discoverAdapterPackages(repositoryRoot);
+const readJson = file => JSON.parse(readFileSync(file, 'utf8'));
+
+const resolvePrimeReactPackage = workspaceDirectory => {
+    const require = createRequire(path.join(workspaceDirectory, 'package.json'));
+    const entry = realpathSync(require.resolve('primereact/button'));
+    let directory = path.dirname(entry);
+    while (directory !== path.dirname(directory)) {
+        const candidate = path.join(directory, 'package.json');
+        try {
+            if (readJson(candidate).name === 'primereact') return realpathSync(candidate);
+        } catch (error) {
+            if (error?.code !== 'ENOENT') throw error;
+        }
+        directory = path.dirname(directory);
+    }
+    throw new Error(`Could not locate primereact/package.json from '${entry}'.`);
+};
+
+const resolved = inventory.adapters
+    .filter(adapter => adapter.expectedUpstreamVersion)
+    .map(adapter => {
+        const packageFile = resolvePrimeReactPackage(adapter.packageDirectory);
+        const version = readJson(packageFile).version;
+        if (version !== adapter.expectedUpstreamVersion) {
+            throw new Error(`${adapter.metadata.id} declares ${adapter.expectedUpstreamVersion} for its preview but resolves ${version}.`);
+        }
+        return { adapter, packageFile, version };
+    });
+const prime10 = resolved.find(item => item.adapter.metadata.id === 'cratis-primereact10');
+const prime11 = resolved.find(item => item.adapter.metadata.id === 'cratis-primereact');
+if (!prime10 || !prime11) throw new Error('Both PrimeReact preview adapters must resolve before Storybook builds.');
+if (prime10.version !== '10.9.9' || prime11.version !== '11.1.0' || prime10.packageFile === prime11.packageFile) {
+    throw new Error('PrimeReact 10.9.9 and 11.1.0 must resolve from distinct package installations.');
+}
+
+const previewConfig = readFileSync(path.join(storybookRoot, 'preview/main.ts'), 'utf8');
+if (!previewConfig.includes("envPrefix: 'CRATIS_STORYBOOK_PUBLIC_'")) {
+    throw new Error('Renderer previews must block the default VITE_* environment namespace from client bundles.');
+}
+
+const prime10Setup = readFileSync(prime10.adapter.setupFile, 'utf8');
+if (!prime10Setup.includes("primereact/resources/themes/lara-dark-blue/theme.css")) {
+    throw new Error('PrimeReact 10 preview must import its nested v10 theme CSS.');
+}
+const prime11Setup = readFileSync(prime11.adapter.setupFile, 'utf8');
+if (!prime11Setup.includes('<PrimeReactContext.Provider') || /import\s*\{[^}]*PrimeReactProvider/u.test(prime11Setup)) {
+    throw new Error('PrimeReact 11 preview must use the bounded public-context fixture, never the real provider/license manager.');
+}
+for (const forbidden of ['process.env', 'import.meta.env', 'VITE_PRIMEUI_LICENSE_KEY', 'license=']) {
+    if (prime11Setup.includes(forbidden)) throw new Error(`PrimeReact 11 preview setup must not receive or serialize license material (${forbidden}).`);
+}
+if (!prime11Setup.includes("'cratis-primereact.license-configured': true")) {
+    throw new Error('PrimeReact 11 preview must pass only its non-secret boolean setup attestation.');
+}
+
+for (const item of resolved) {
+    console.log(`${item.adapter.metadata.id} -> primereact ${item.version} at ${item.packageFile}`);
+}
+console.log('Verified executable peer-major isolation before Storybook build: each child process resolves one exact PrimeReact major.');
+console.log('Verified bounded PrimeReact 11 public-context setup with boolean-only attestation and no license input path.');
diff --git a/Storybook/scripts/verify-storybook-indexes.mjs b/Storybook/scripts/verify-storybook-indexes.mjs
new file mode 100644
index 00000000..6e2d1bac
--- /dev/null
+++ b/Storybook/scripts/verify-storybook-indexes.mjs
@@ -0,0 +1,75 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { existsSync, readFileSync, readdirSync } from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { discoverAdapterPackages } from './lib/adapter-inventory.mjs';
+
+const storybookRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const repositoryRoot = path.resolve(storybookRoot, '..');
+const sourceRoot = path.join(repositoryRoot, 'Source');
+const outputRoot = path.join(sourceRoot, 'storybook-static/renderers');
+const inventory = discoverAdapterPackages(repositoryRoot);
+
+const collectStoryFiles = directory => readdirSync(directory, { withFileTypes: true }).flatMap(entry => {
+    if (['dist', 'node_modules', 'storybook-static'].includes(entry.name)) return [];
+    const entryPath = path.join(directory, entry.name);
+    if (entry.isDirectory()) return collectStoryFiles(entryPath);
+    return entry.isFile() && /\.stories\.(?:ts|tsx)$/u.test(entry.name) ? [entryPath] : [];
+});
+const collectTextFiles = directory => readdirSync(directory, { withFileTypes: true }).flatMap(entry => {
+    const entryPath = path.join(directory, entry.name);
+    if (entry.isDirectory()) return collectTextFiles(entryPath);
+    return entry.isFile() && /\.(?:html|js|json)$/u.test(entry.name) ? [entryPath] : [];
+});
+const storyFiles = collectStoryFiles(sourceRoot);
+if (storyFiles.length !== 64) throw new Error(`Expected the existing 64 story modules, found ${storyFiles.length}.`);
+
+let canonicalStoryIds;
+let canonicalDocsIds;
+for (const adapter of inventory.adapters) {
+    const previewRoot = path.join(outputRoot, adapter.metadata.id);
+    const indexFile = path.join(previewRoot, 'index.json');
+    const attestationFile = path.join(previewRoot, 'cratis-renderer-attestation.json');
+    if (!existsSync(indexFile) || !existsSync(attestationFile)) {
+        throw new Error(`Missing built index or attestation for '${adapter.metadata.id}'.`);
+    }
+    const index = JSON.parse(readFileSync(indexFile, 'utf8'));
+    const entries = Object.values(index.entries ?? {});
+    const storyIds = entries.filter(entry => entry.type === 'story').map(entry => entry.id).sort();
+    const docsIds = entries.filter(entry => entry.type === 'docs').map(entry => entry.id).sort();
+    if (storyIds.length !== 261 || docsIds.length !== 64) {
+        throw new Error(`${adapter.metadata.id} indexed ${storyIds.length} stories and ${docsIds.length} autodocs pages; expected 261 and 64.`);
+    }
+    canonicalStoryIds ??= storyIds;
+    canonicalDocsIds ??= docsIds;
+    if (JSON.stringify(storyIds) !== JSON.stringify(canonicalStoryIds)
+        || JSON.stringify(docsIds) !== JSON.stringify(canonicalDocsIds)) {
+        throw new Error(`${adapter.metadata.id} does not expose the same stable story ids as the built-in preview.`);
+    }
+    const attestation = JSON.parse(readFileSync(attestationFile, 'utf8'));
+    const expectedVersions = adapter.expectedUpstreamVersion ? [adapter.expectedUpstreamVersion] : [];
+    if (attestation.rendererId !== adapter.metadata.id
+        || JSON.stringify(attestation.primereactVersions) !== JSON.stringify(expectedVersions)
+        || attestation.nonProfileFallback !== 'core'
+        || (adapter.metadata.id === 'cratis-primereact'
+            && attestation.primeReact11Boundary !== 'public-context-with-boolean-attestation-no-license-manager')) {
+        throw new Error(`Invalid renderer build attestation for '${adapter.metadata.id}': ${JSON.stringify(attestation)}.`);
+    }
+    if (adapter.metadata.id === 'cratis-primereact') {
+        const exposedEnvironmentContract = collectTextFiles(previewRoot).find(file =>
+            readFileSync(file, 'utf8').includes('VITE_PRIMEUI_LICENSE_KEY'),
+        );
+        if (exposedEnvironmentContract) {
+            throw new Error(`PrimeReact 11 preview exposed a license-key environment contract in ${exposedEnvironmentContract}.`);
+        }
+    }
+    console.log(`${adapter.metadata.id}: 261 stories, 64 autodocs pages, primereact [${expectedVersions.join(', ') || 'none'}].`);
+}
+
+const appearances = 2;
+const matrixCount = inventory.adapters.length * 261 * appearances;
+console.log(`Storybook indexes verified: ${inventory.adapters.length} previews × 261 stable stories × ${appearances} appearances = ${matrixCount} story/appearance cases.`);
+console.log('Story exclusions: none. Every indexed story is included in light, dark, and axe execution.');
+console.log(`Renderer exclusions: ${inventory.exclusions.map(item => `${item.id} (${item.reason})`).join(', ') || 'none'}; private adapters such as Plain are never composed.`);
diff --git a/Storybook/tsconfig.json b/Storybook/tsconfig.json
new file mode 100644
index 00000000..3f43e144
--- /dev/null
+++ b/Storybook/tsconfig.json
@@ -0,0 +1,31 @@
+{
+    "extends": "../tsconfig.json",
+    "compilerOptions": {
+        "allowJs": false,
+        "composite": false,
+        "declaration": false,
+        "declarationMap": false,
+        "module": "ESNext",
+        "moduleResolution": "bundler",
+        "baseUrl": ".",
+        "rootDir": "..",
+        "paths": {
+            "virtual:cratis-renderer-preview": ["preview/virtual-renderer-preview.tsx"]
+        },
+        "noEmit": true,
+        "skipLibCheck": true,
+        "types": ["node", "vitest/globals"]
+    },
+    "include": [
+        "manager/**/*.ts",
+        "manager/**/*.tsx",
+        "preview/**/*.ts",
+        "preview/**/*.tsx",
+        "for_*/**/*.ts",
+        "scripts/lib/*.d.mts",
+        "vitest.config.ts",
+        "vitest.storybook.config.ts",
+        "../Adapters/*/.storybook/**/*.tsx"
+    ],
+    "exclude": ["../Source/storybook-static", "node_modules"]
+}
diff --git a/Storybook/vitest.config.ts b/Storybook/vitest.config.ts
new file mode 100644
index 00000000..6533a861
--- /dev/null
+++ b/Storybook/vitest.config.ts
@@ -0,0 +1,12 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+    test: {
+        environment: 'node',
+        include: ['for_*/**/*.ts'],
+        setupFiles: ['./vitest.setup.ts'],
+    },
+});
diff --git a/Storybook/vitest.setup.ts b/Storybook/vitest.setup.ts
new file mode 100644
index 00000000..0c800557
--- /dev/null
+++ b/Storybook/vitest.setup.ts
@@ -0,0 +1,6 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { should } from 'chai';
+
+should();
diff --git a/Storybook/vitest.storybook.config.ts b/Storybook/vitest.storybook.config.ts
new file mode 100644
index 00000000..69eca646
--- /dev/null
+++ b/Storybook/vitest.storybook.config.ts
@@ -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 path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
+import { playwright } from '@vitest/browser-playwright';
+import { defineConfig } from 'vitest/config';
+
+const storybookRoot = path.dirname(fileURLToPath(import.meta.url));
+const rendererId = process.env.CRATIS_STORYBOOK_ADAPTER_ID ?? 'cratis-built-in';
+const appearance = process.env.STORYBOOK_APPEARANCE ?? 'baseline-dark';
+
+const plugins = await storybookTest({
+    configDir: path.join(storybookRoot, 'preview'),
+    initialGlobals: { appearance },
+});
+
+export default defineConfig({
+    optimizeDeps: {
+        include: ['@cratis/arc.react/messaging'],
+    },
+    plugins,
+    test: {
+        name: `storybook:${rendererId}:${appearance}`,
+        browser: {
+            enabled: true,
+            headless: true,
+            provider: playwright({}),
+            instances: [{ browser: 'chromium' }],
+        },
+    },
+});
diff --git a/package.json b/package.json
index 4ea4f445..870f93fb 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,8 @@
         "ESLint",
         "Codemods",
         "Conformance",
-        "Adapters/*"
+        "Adapters/*",
+        "Storybook"
     ],
     "resolutions": {
         "react-aria": "3.51.0",
diff --git a/yarn.lock b/yarn.lock
index 6d1be0f7..575bc3cf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -397,6 +397,16 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@cratis/components.storybook@workspace:Storybook":
+  version: 0.0.0-use.local
+  resolution: "@cratis/components.storybook@workspace:Storybook"
+  dependencies:
+    "@types/react": "npm:^19.2.18"
+    react: "npm:^19.0.0"
+    react-dom: "npm:^19.0.0"
+  languageName: unknown
+  linkType: soft
+
 "@cratis/components@workspace:Source, @cratis/components@workspace:^":
   version: 0.0.0-use.local
   resolution: "@cratis/components@workspace:Source"

From 30fad6d3b0dc4db7e8bce6da1853319548aa61d6 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Fri, 28 Aug 2026 16:21:50 +0200
Subject: [PATCH 235/267] pi-agent: Implement V4 release closure docs

---
 .github/workflows/javascript-build.yml        |   4 +
 .../Common/cratis-components-provider.md      |   3 +-
 Documentation/Migration/3-to-4.md             |   7 +-
 Documentation/index.mdx                       |   7 +-
 Documentation/renderers/custom-composition.md | 111 ++++++++
 Documentation/renderers/index.md              | 106 ++++++++
 Documentation/renderers/licensing.md          | 103 ++++++++
 .../renderers/primitive-adaptation.md         | 124 +++++++++
 Documentation/renderers/toc.yml               |  10 +
 Documentation/renderers/unsupported.md        |  74 ++++++
 Documentation/toc.yml                         |   2 +
 Source/MIGRATION.md                           |   7 +-
 Source/README.md                              |   5 +-
 compat-manifest.json                          | 163 ++++++++++++
 package.json                                  |   4 +-
 scripts/generate-compat-manifest.mjs          | 243 ++++++++++++++++++
 16 files changed, 964 insertions(+), 9 deletions(-)
 create mode 100644 Documentation/renderers/custom-composition.md
 create mode 100644 Documentation/renderers/index.md
 create mode 100644 Documentation/renderers/licensing.md
 create mode 100644 Documentation/renderers/primitive-adaptation.md
 create mode 100644 Documentation/renderers/toc.yml
 create mode 100644 Documentation/renderers/unsupported.md
 create mode 100644 compat-manifest.json
 create mode 100644 scripts/generate-compat-manifest.mjs

diff --git a/.github/workflows/javascript-build.yml b/.github/workflows/javascript-build.yml
index 5b3069e7..2e55aa3d 100644
--- a/.github/workflows/javascript-build.yml
+++ b/.github/workflows/javascript-build.yml
@@ -25,6 +25,8 @@ on:
             - 'ESLint/**'
             - 'Conformance/**'
             - 'Adapters/**'
+            - 'scripts/**'
+            - 'compat-manifest.json'
             - 'package.json'
             - 'rollup.config.mjs'
             - 'yarn.lock'
@@ -40,6 +42,8 @@ on:
             - 'ESLint/**'
             - 'Conformance/**'
             - 'Adapters/**'
+            - 'scripts/**'
+            - 'compat-manifest.json'
             - 'package.json'
             - 'rollup.config.mjs'
             - 'yarn.lock'
diff --git a/Documentation/Common/cratis-components-provider.md b/Documentation/Common/cratis-components-provider.md
index 45dc6726..9ff84704 100644
--- a/Documentation/Common/cratis-components-provider.md
+++ b/Documentation/Common/cratis-components-provider.md
@@ -69,7 +69,8 @@ replaces it wholesale, and forwards it through `RendererScope`.
 A key-gated renderer still receives its key through the application's own outer vendor provider.
 For example, the PrimeReact 11 adapter receives only a boolean assertion that the application
 completed that setup; Components never receives the key itself. See the adapter package README for
-the exact provider and build-environment wiring.
+the exact provider and build-environment wiring, and the [renderer licensing policy](../renderers/licensing.md)
+for the cross-adapter ownership rule.
 
 Every message group follows the same precedence: a named component prop (or a component's own `labels`/`filterLabels` override) wins, then the matching provider message, then the English default shown above. Per-instance overrides keep working exactly as before — the provider only fills gaps a call site left unset.
 
diff --git a/Documentation/Migration/3-to-4.md b/Documentation/Migration/3-to-4.md
index 070734f8..aabc6ee8 100644
--- a/Documentation/Migration/3-to-4.md
+++ b/Documentation/Migration/3-to-4.md
@@ -8,7 +8,7 @@ Components 4 replaces the PrimeReact-backed Components 3 foundation with Compone
 This is a major-version migration. Rendered markup, styling parts, provider configuration, date entry, root imports, and some deprecated props change.
 
 :::note
-An application that has not migrated remains on its exact Components 3 package profile, including the third-party dependencies declared by that version. Components 4 does not currently publish a Prime compatibility package. Review the exact package manifests and third-party terms for the version the application keeps. This guide makes no support-window, security-fix, maintenance, or future-package commitment for either major.
+An application that has not migrated remains on its exact Components 3 package profile, including the third-party dependencies declared by that version. Components 4 does not provide a transparent Prime compatibility package. Its independently versioned `@cratis/components.mui`, `@cratis/components.primereact` (PrimeReact 11), and `@cratis/components.primereact10` adapters cover only the nine stable presentation slots. Review the exact package manifests and third-party terms for every version the application keeps. This guide makes no support-window, security-fix, maintenance, or future-package commitment for either major.
 :::
 
 ## Update dependencies
@@ -732,4 +732,7 @@ Complete PrimeIcons class strings remain usable where a component accepts the pu
 
 A TypeScript 6 application using `skipLibCheck: false` may see bounded upstream diagnostics from Pixi's `@webgpu/types` collision with TypeScript's built-in WebGPU declarations, from `@cratis/arc.react`'s published global JSX declarations, or under NodeNext from extensionless declaration imports in the current Arc and Fundamentals packages. Components validates every packed subpath without suppressing these diagnostics; exact versions, codes, affected subpaths, and removal conditions are documented under [Strict public-type validation](../ui-foundation.md#strict-public-type-validation) and tracked in [#176](https://github.com/Cratis/Components/issues/176).
 
-For the decision, trade-offs, and validation gates, read [UI foundation](../ui-foundation.md). For the older 2.x → 3.x PrimeReact migration, see [Migrate from Components 2 to 3](2-to-3.md).
+For renderer ownership, coexistence, custom composition, unsupported claims, and licensing, read
+[Renderer adapters and coexistence](../renderers/index.md). For the decision, trade-offs, and
+validation gates, read [UI foundation](../ui-foundation.md). For the older 2.x → 3.x PrimeReact
+migration, see [Migrate from Components 2 to 3](2-to-3.md).
diff --git a/Documentation/index.mdx b/Documentation/index.mdx
index e89f9e0d..478628d4 100644
--- a/Documentation/index.mdx
+++ b/Documentation/index.mdx
@@ -14,7 +14,8 @@ import TopicHero from '@components/TopicHero.astro';
 >
     Command dialogs, forms, tables, and application surfaces that consume [Arc's](/arc/)
     generated proxies. Components owns its public contracts, semantic parts, and built-in
-    renderer, with optional independently versioned MUI and PrimeReact adapters.
+    renderer, with optional independently versioned MUI, PrimeReact 11, and PrimeReact 10
+    adapters.
 </TopicHero>
 
 ## Start here
@@ -59,7 +60,9 @@ export const App = () => (
 ```
 
 The built-in renderer is zero-configuration. Optional renderer packages are selected explicitly;
-the application retains their provider, peer, SSR, styling, and license responsibilities.
+the application retains their provider, peer, SSR, styling, and license responsibilities. Read
+[Renderer adapters and coexistence](/components/renderers/) for the exact nine-slot boundary,
+direct vendor coexistence, custom composition, unsupported claims, and licensing policy.
 
 ## Recipes
 
diff --git a/Documentation/renderers/custom-composition.md b/Documentation/renderers/custom-composition.md
new file mode 100644
index 00000000..fe0c4b9c
--- /dev/null
+++ b/Documentation/renderers/custom-composition.md
@@ -0,0 +1,111 @@
+---
+title: Build a custom vendor-native composition
+description: Combine Arc-generated contracts with application-owned vendor workflows without relabeling Components composites as vendor-native.
+---
+
+<!-- Copyright (c) Cratis. All rights reserved. -->
+<!-- Licensed under the MIT license. See LICENSE file in the project root for full license information. -->
+
+**Goal:** keep Arc's generated command and query contracts while building a workflow whose table,
+dialog, selection, and editing behavior all belong to an application-selected vendor.
+
+## Choose the boundary
+
+Use a renderer adapter when only the nine common primitives need vendor presentation. Use custom
+composition when the required capability belongs to a larger workflow: grouped rows, vendor lazy
+loading, a vendor editing model, a commercial scheduler, or a suite-specific dialog/grid contract.
+
+Do not start with `DataPage` and describe the result as a vendor DataPage. DataPage still owns its
+layout, Arc query binding, selection, action menu, details panel, and DataTables composition even
+when some nested buttons use an adapter.
+
+## Read through the Arc contract
+
+Call the generated query hook when you need values rather than a Components table. Feed the returned
+read models into an application-owned vendor wrapper:
+
+```tsx
+import { AllAccounts } from './generated/AllAccounts';
+import { AccountGrid } from './vendor/AccountGrid';
+
+export const Accounts = () => {
+    const [accounts] = AllAccounts.use();
+
+    return <AccountGrid rows={accounts.data} />;
+};
+```
+
+`AccountGrid` owns the vendor's row identity, sorting, filtering, paging, selection, keyboard model,
+and rendering. Arc still owns the generated transport/query contract. If the vendor grid performs
+server operations, model those operations as explicit query arguments and apply them on the server;
+do not infer complete-result behavior from Components loaded-page table state.
+
+Use the generated Arc command API in the same way for writes. Keep command construction, validation,
+execution results, and error handling typed at the Arc boundary, while the application-owned dialog
+or editor maps its vendor event model into those values. Do not pass a vendor event object into a
+Components `ChangeHandler<T>` or cast incompatible callback types together.
+
+## Keep providers explicit
+
+Mount every provider for the scope it actually owns:
+
+```tsx
+import { CratisComponentsProvider } from '@cratis/components';
+import { ApplicationVendorProvider } from './vendor/ApplicationVendorProvider';
+import { Accounts } from './Accounts';
+
+export const Application = () => (
+    <ApplicationVendorProvider>
+        <CratisComponentsProvider value={{ locale: 'en-US' }}>
+            <Accounts />
+        </CratisComponentsProvider>
+    </ApplicationVendorProvider>
+);
+```
+
+The vendor provider owns the vendor-native `AccountGrid`. The Components provider remains available
+for other Components surfaces in the application. Neither provider receives the other's theme,
+portal registry, cache, or license unless that vendor's own documented API requires the application
+to supply it directly.
+
+If this workflow uses no Components surface, it does not need `CratisComponentsProvider`. Arc can be
+used without Components.
+
+## Reuse portable Components contracts selectively
+
+Use a Components primitive when its public semantic contract fits. For example, an application may
+render a Components `Button` beside a vendor grid, or select one of the three concrete primitive
+adapters for that button. Continue to style it through its typed parts and `data-cratis-*` states.
+
+Do not reuse a Components type merely to give a vendor-native object a familiar name. `DataPage`,
+`Column`, `MenuItem`, `DialogParts`, and `ChangeHandler<T>` describe specific Components contracts.
+A vendor grid column, menu tree, modal lifecycle, or change event remains vendor-owned unless an
+explicit adapter translates and proves the exact Components contract.
+
+## Own integration behavior
+
+The application-owned composition must specify and test:
+
+1. which query arguments own server paging, sorting, and filtering;
+2. which component owns selection and row identity;
+3. which dialog or editor owns focus, dismissal, validation timing, and pending state;
+4. where overlays portal and how their layers interoperate with Components overlays;
+5. how vendor values and errors map to generated Arc command/query values; and
+6. who owns licensing, themes, server rendering, CSP, and upgrade verification.
+
+Test the complete workflow in the real provider and portal shell. Components conformance evidence
+for an adapter's nine primitives does not cover this application-owned composition.
+
+## Verify the result
+
+A vendor-native workflow should contain vendor-native behavior because the application deliberately
+composed it, not because a provider was expected to transform a Cratis composite. Confirm that:
+
+- no Cratis composite is being described as a vendor equivalent;
+- one control owns each focus and keyboard interaction;
+- Arc queries apply complete-result operations before paging;
+- package/provider/license boundaries remain explicit; and
+- the built-in fallback remains available only where the application intends it.
+
+Read [renderer coexistence](index.md) for portal and focus rules and [unsupported renderer claims](unsupported.md)
+for the promises this approach does not create.
diff --git a/Documentation/renderers/index.md b/Documentation/renderers/index.md
new file mode 100644
index 00000000..a408feee
--- /dev/null
+++ b/Documentation/renderers/index.md
@@ -0,0 +1,106 @@
+---
+title: Renderer adapters and coexistence
+description: Understand the built-in renderer, optional primitive adapters, and safe coexistence with application-owned vendor components.
+---
+
+<!-- Copyright (c) Cratis. All rights reserved. -->
+<!-- Licensed under the MIT license. See LICENSE file in the project root for full license information. -->
+
+A product rarely replaces its entire interface at once. It may use Components for Arc-aware forms
+and data surfaces, retain a vendor grid for one specialized screen, and adopt a different visual
+language for ordinary controls. Components supports that coexistence without claiming that every
+surface becomes interchangeable.
+
+## The ownership boundary
+
+The default path is built in. Install `@cratis/components`, mount `CratisComponentsProvider`, and
+omit `library`. Components then renders its Components-owned React and HTML contracts. Semantic
+native HTML handles simple controls, while the installed React Aria foundation supplies selected
+focus, collection, date, and overlay behavior internally.
+
+An optional adapter changes only the renderer slots that it declares:
+
+| Package                           | Current upstream boundary          | Declared coverage              |
+| --------------------------------- | ---------------------------------- | ------------------------------ |
+| `@cratis/components.mui`          | MUI 9 and Emotion 11               | Nine stable presentation slots |
+| `@cratis/components.primereact`   | PrimeReact 11 and PrimeUX themes 3 | Nine stable presentation slots |
+| `@cratis/components.primereact10` | PrimeReact `>=10.9.9 <11`          | Nine stable presentation slots |
+
+All three adapters implement renderer ABI major 1. They do not replace DataPage, DataTables,
+CommandDialog, CommandForm, Toolbar, Canvas, or another Components-owned composition. The
+[primitive adaptation reference](primitive-adaptation.md) lists the exact nine-slot profile.
+
+```mermaid
+graph TD
+    App[React application] --> Provider[CratisComponentsProvider]
+    Provider --> Composite[Components-owned composite]
+    Composite --> Slot{Declared renderer slot?}
+    Slot -->|yes| Adapter[Selected adapter primitive]
+    Slot -->|no| BuiltIn[Built-in implementation]
+    App --> Vendor[Application-owned vendor surface]
+```
+
+The application-owned vendor surface is a sibling, not a hidden replacement for the Components
+composite.
+
+## Direct vendor coexistence
+
+Keep direct vendor usage explicit. The application owns that vendor's package, provider, theme,
+server-rendering setup, portal configuration, and license. Mount the vendor provider at the smallest
+host boundary that needs it, and keep `CratisComponentsProvider` responsible only for Components
+configuration and any selected adapter.
+
+A direct vendor island does not need to register itself as a renderer. Register an adapter only when
+it implements the public renderer ABI and accepts the exact slot props. Use [custom composition](custom-composition.md)
+when an entire workflow needs vendor-native capabilities that a Components composite does not
+claim.
+
+## Providers and setup values
+
+A renderer library may mount its own provider around the selected Components scope. Application
+resources that the renderer ABI cannot safely transport stay outside that scope. In particular,
+`rendererSetup` accepts only adapter-declared boolean attestations. Never place a credential,
+license key, cache, provider instance, or mutable configuration object in it.
+
+PrimeReact 11 demonstrates the boundary: the application passes its key directly to its own outer
+PrimeReact provider, then gives Components only a non-secret boolean assertion that setup occurred.
+The adapter fails closed when the provider or assertion is absent. The [licensing policy](licensing.md)
+explains this boundary without making a licensing conclusion for an application.
+
+## Portals and z-index
+
+The built-in overlay environment resolves `document.body` only when an overlay needs a container.
+A host may supply `overlayEnvironment` to return another container. Returning `null` defers the
+overlay; it does not silently retarget it.
+
+Direct vendor overlays keep their vendor configuration. Components does not merge a vendor portal
+registry or z-index service with its built-in overlay environment. When both systems can open
+simultaneously, the application must:
+
+- choose containers that are not clipped by local overflow;
+- assign an explicit layer order for Components and vendor overlays;
+- verify nested menus, listboxes, dialogs, and toasts in the real application shell; and
+- keep theme CSS and portal CSS available in every chosen container.
+
+The nine-slot adapters do not include dialog, dropdown, date-picker, tooltip, or paginator atomic
+slots. Those controls therefore use the built-in implementation unless another adapter explicitly
+and honestly declares them.
+
+## Focus ownership
+
+One interactive surface owns one focus lifecycle. Do not place one modal implementation inside
+another modal merely to borrow vendor appearance, and do not combine two focus traps, dismissal
+listeners, or keyboard-selection owners for the same interaction. A presentation adapter must
+preserve the Components contract without adding a second semantic control. An atomic adapter, if
+one is selected, owns the complete interaction instead of wrapping the built-in owner.
+
+This rule is structural, not a universal accessibility certification. Verify keyboard order, initial
+focus, focus restoration, escape handling, background inertness, and screen-reader output in the
+application's supported browsers and assistive technologies.
+
+## Continue
+
+- Use [primitive adaptation](primitive-adaptation.md) when the nine stable controls need vendor
+  presentation.
+- Use [custom composition](custom-composition.md) when the workflow itself must be vendor-native.
+- Check [unsupported renderer claims](unsupported.md) before promising replacement behavior.
diff --git a/Documentation/renderers/licensing.md b/Documentation/renderers/licensing.md
new file mode 100644
index 00000000..f9d4170d
--- /dev/null
+++ b/Documentation/renderers/licensing.md
@@ -0,0 +1,103 @@
+---
+title: Renderer licensing policy
+description: Package, provider, and key ownership rules for the built-in renderer and optional vendor adapters.
+---
+
+<!-- Copyright (c) Cratis. All rights reserved. -->
+<!-- Licensed under the MIT license. See LICENSE file in the project root for full license information. -->
+
+Renderer choice changes the application's dependency and license boundary. Components keeps that
+choice explicit in package metadata and never treats a renderer provider as a credential channel.
+
+This page states the Components integration policy. It is not legal advice and does not replace the
+license and commercial terms shipped or published by each upstream vendor.
+
+## Package policy
+
+| Surface or package                        | Declared license boundary       | Components policy                                                  |
+| ----------------------------------------- | ------------------------------- | ------------------------------------------------------------------ |
+| `@cratis/components`                      | MIT package metadata            | Built-in React Aria dependencies retain their own permissive terms |
+| `@cratis/components.mui`                  | MIT adapter; peer-hosted MUI    | Application installs and configures MUI and Emotion peers          |
+| `@cratis/components.primereact10`         | MIT adapter; PrimeReact 10 peer | Application owns the theme and any direct PrimeReact 10 provider   |
+| `@cratis/components.primereact`           | MIT adapter; PrimeUI peers      | Application owns PrimeReact 11 provider, terms, key, and theme     |
+| Commercial vendor suites outside adapters | Vendor-specific                 | Interop only; application owns procurement, terms, and integration |
+
+A permissive adapter license does not relicense its peers. Review the exact installed package
+manifests, `LICENSE`, `THIRD_PARTY_NOTICES.md`, and upstream terms before adoption.
+
+## Permissive peers
+
+The MUI adapter declares MUI 9 and Emotion 11 as peers. The PrimeReact 10 adapter declares
+PrimeReact `>=10.9.9 <11` as a peer. Those packages are not bundled into their adapter archives.
+The application selects compatible versions and remains responsible for their providers, themes,
+server-rendering setup, security updates, and license obligations.
+
+The built-in renderer remains part of `@cratis/components`. React Aria supplies selected internal
+interaction behavior under its own permissive license; installing another adapter does not remove
+that fallback dependency from the Components installation.
+
+## PrimeReact 11 key ownership
+
+PrimeReact 11 is represented in package metadata with `LicenseRef-PrimeUI` and `requiresKey: true`.
+The application obtains and owns the key, then passes it directly to its outer `PrimeReactProvider`.
+Components and `@cratis/components.primereact` never receive, store, copy, log, serialize, proxy, or
+validate that key.
+
+The application also passes this non-secret boolean setup assertion:
+
+```tsx
+import { PrimeReactProvider } from '@primereact/core/config';
+import Aura from '@primeuix/themes/aura';
+import { CratisComponentsProvider } from '@cratis/components';
+import { primeReactUiLibrary } from '@cratis/components.primereact';
+
+const primeUiLicenseKey = import.meta.env.VITE_PRIMEUI_LICENSE_KEY;
+
+export const Application = () => (
+    <PrimeReactProvider license={primeUiLicenseKey} theme={{ preset: Aura }}>
+        <CratisComponentsProvider
+            library={primeReactUiLibrary}
+            rendererSetup={{
+                'cratis-primereact.license-configured': Boolean(primeUiLicenseKey),
+            }}
+        >
+            <main>Application content</main>
+        </CratisComponentsProvider>
+    </PrimeReactProvider>
+);
+```
+
+The boolean says only that the application completed its own setup. It is not a key, does not prove
+that the key is valid, and does not suppress upstream license behavior. The adapter fails closed
+when the outer provider or the attestation is absent.
+
+Never place a key in `rendererSetup`, Components configuration, a renderer manifest, a published
+package, a Storybook parameter, a test fixture, or a log. A client application must follow its own
+secret-to-client-build policy for any key the vendor requires at runtime.
+
+## Commercial-suite interop
+
+A commercial grid, scheduler, editor, or design suite can coexist as an application-owned surface.
+Components does not bundle it, redistribute it, sell access to it, acquire a key for the application,
+or claim that a Cratis composite becomes that suite's native component.
+
+Treat this as interop:
+
+- the application installs the vendor package and accepts its terms;
+- the application supplies provider configuration and credentials directly to the vendor API;
+- the application owns vendor-native workflow composition and testing;
+- the adapter, if one exists, implements only its declared Cratis slots; and
+- Components conformance evidence does not certify vendor licensing compliance.
+
+If a vendor's terms restrict component-library adapters, redistribution, development tools, or OEM
+use, obtain the required rights before publishing or distributing that integration. Components
+metadata cannot grant those rights.
+
+## Release evidence
+
+The repository compatibility manifest records package names, current versions, peer ranges,
+upstream ranges, renderer ABI major, and private/non-published evidence artifacts. It does not enable
+publication. The final package-version and Core peer-range sweep is a separate atomic release step.
+
+Read [renderer coexistence](index.md) for provider/portal ownership and [unsupported renderer claims](unsupported.md)
+before approving a renderer architecture.
diff --git a/Documentation/renderers/primitive-adaptation.md b/Documentation/renderers/primitive-adaptation.md
new file mode 100644
index 00000000..7faa6d7d
--- /dev/null
+++ b/Documentation/renderers/primitive-adaptation.md
@@ -0,0 +1,124 @@
+---
+title: Primitive adaptation profile
+description: Reference for the nine stable presentation slots, portable parts and states, fallback, and behavior ownership.
+---
+
+<!-- Copyright (c) Cratis. All rights reserved. -->
+<!-- Licensed under the MIT license. See LICENSE file in the project root for full license information. -->
+
+The `stable-presentation/v1` profile is deliberately small. It lets an adapter render common
+controls with vendor-native primitives while Components retains its public props, semantic values,
+refs, parts, and composition contracts.
+
+## The nine slots
+
+| Slot ID             | Components contract | Stable presentation responsibility       |
+| ------------------- | ------------------- | ---------------------------------------- |
+| `common.button`     | `ButtonProps`       | Native button semantics and presentation |
+| `common.iconButton` | `IconButtonProps`   | Accessible icon-only button              |
+| `common.textInput`  | `TextInputProps`    | Text-like native input                   |
+| `common.textArea`   | `TextAreaProps`     | Multiline native input                   |
+| `common.checkbox`   | `CheckboxProps`     | Boolean checkbox                         |
+| `common.radio`      | `RadioProps`        | One radio option                         |
+| `common.switch`     | `SwitchProps`       | Boolean switch                           |
+| `common.progress`   | `ProgressBarProps`  | Determinate or indeterminate progress    |
+| `common.surface`    | `SurfaceProps`      | Non-interactive semantic container       |
+
+This profile does not include tooltip, dropdown, dialog, date picker, or table paginator. Those are
+atomic interaction slots with a separate behavior boundary. It also does not include a composite
+such as DataPage or CommandDialog.
+
+## Stable parts
+
+Each contract defines its own typed `*Parts` object. A `pt` value sends ordinary React HTML
+attributes to those documented destinations. The rendered elements carry stable
+`data-cratis-part` names so product CSS can target the same semantic destination across the built-in
+renderer and conforming adapters.
+
+```tsx
+import { Button } from '@cratis/components/Common';
+
+export const SaveAction = () => (
+    <Button
+        label='Save'
+        pt={{
+            root: { className: 'account-save' },
+            label: { className: 'account-save-label' },
+        }}
+    />
+);
+```
+
+The adapter may add wrappers or arrange documented parts differently. Descendant order, sibling
+position, and vendor-generated classes are not portable. Target the named part itself rather than
+an undocumented path through the vendor DOM.
+
+## Stable states
+
+Components contracts expose state through public props, native attributes and pseudo-classes, and
+documented `data-*` attributes. Examples include disabled, invalid, checked, loading, and Button
+appearance values. The exact state set belongs to each component contract; an adapter must not
+invent a vendor event or class as the only observable state.
+
+Use typed props and stable part/state selectors. Do not depend on a vendor's generated class names,
+private data attributes, or internal state objects when the code must work across adapters.
+
+## Semantic values, refs, and events
+
+Adaptation does not weaken the public type. A text input still emits the next string through the
+Components `ChangeHandler<string>` shape. Ref-capable controls still identify the documented native
+element. Button type, form participation, disabled/read-only behavior, names, values, and validation
+remain part of the bounded profile.
+
+A vendor-native wrapper is conforming only when it accepts the exact Components props and preserves
+those semantics. A type cast that hides an incompatible vendor callback is not an adapter.
+
+## One behavior owner
+
+Every slot declaration chooses one ownership mode:
+
+- `presentation` preserves the Components behavior contract while the adapter supplies the
+  presentation implementation;
+- `atomic` gives one adapter implementation the complete interaction.
+
+Do not render a second interactive semantic root inside the first, forward one user action to two
+independent state machines, or stack a vendor focus owner around a built-in focus owner. One user
+interaction must produce one semantic value change and have one keyboard/focus owner.
+
+All three concrete adapters currently declare only the nine presentation slots. Their conformance
+reports cover those declared controls, not the five atomic slots or any composite workflow.
+
+## Fallback
+
+With the default `rendererFallback='core'`, a partial adapter uses the built-in implementation for
+an undeclared slot. The zero-configuration built-in path is the default, not an adapter warning.
+When an active adapter falls back, Components reports the bounded fallback diagnostic after mount.
+
+Set `rendererFallback='throw'` when a host must reject every undeclared slot:
+
+```tsx
+import { CratisComponentsProvider } from '@cratis/components';
+import { muiUiLibrary } from '@cratis/components.mui';
+import type { PropsWithChildren } from 'react';
+
+export const StrictRendererBoundary = ({ children }: PropsWithChildren) => (
+    <CratisComponentsProvider library={muiUiLibrary} rendererFallback='throw'>
+        {children}
+    </CratisComponentsProvider>
+);
+```
+
+This strict boundary rejects built-in fallback; it does not make the adapter implement additional
+slots. A screen that renders an undeclared atomic control fails instead of becoming vendor-native.
+
+## Evidence boundary
+
+Renderer ABI major 1 and `@cratis/components.conformance` provide machine-checked evidence for the
+exact manifest and environment under test. Passing checks do not certify every browser, visual
+state, assistive technology, vendor theme, security posture, or production application. Read the
+adapter's packaged `CONFORMANCE.md` and peer metadata for its exact evidence.
+
+## Continue
+
+Read [custom composition](custom-composition.md) before adapting a workflow that exceeds these nine
+slots, and keep the [unsupported claims](unsupported.md) visible in product decisions.
diff --git a/Documentation/renderers/toc.yml b/Documentation/renderers/toc.yml
new file mode 100644
index 00000000..47bf6bb1
--- /dev/null
+++ b/Documentation/renderers/toc.yml
@@ -0,0 +1,10 @@
+- name: Renderer adapters and coexistence
+  href: index.md
+- name: Primitive adaptation profile
+  href: primitive-adaptation.md
+- name: Build a custom vendor-native composition
+  href: custom-composition.md
+- name: Unsupported renderer claims
+  href: unsupported.md
+- name: Renderer licensing policy
+  href: licensing.md
diff --git a/Documentation/renderers/unsupported.md b/Documentation/renderers/unsupported.md
new file mode 100644
index 00000000..b70ca2ea
--- /dev/null
+++ b/Documentation/renderers/unsupported.md
@@ -0,0 +1,74 @@
+---
+title: Unsupported renderer claims
+description: Exact limits of Components renderer adaptation, platform scope, composite behavior, and installation fallback.
+---
+
+<!-- Copyright (c) Cratis. All rights reserved. -->
+<!-- Licensed under the MIT license. See LICENSE file in the project root for full license information. -->
+
+Renderer adaptation is a bounded React contract. The following claims are not part of Components 4.
+
+## No transparent full-catalog replacement
+
+Selecting a renderer library does not transform every Components export into an equivalent vendor
+component. The current MUI, PrimeReact 11, and PrimeReact 10 adapters implement only the nine
+`stable-presentation/v1` slots.
+
+Components does not promise one-to-one vendor coverage for its full catalog, and it does not infer
+adapter support from matching component names. A package must declare and prove each renderer slot
+it implements. Undeclared slots use the built-in fallback by default or fail when the application
+sets `rendererFallback='throw'`.
+
+## No non-React or non-DOM target
+
+The public contract is React and browser-DOM coupled. It includes React component props, semantic
+HTML attributes and elements, browser form behavior, DOM refs, CSS, and React/native events.
+
+Renderer ABI major 1 does not target React Native, Vue, Angular, Web Components as a framework-neutral
+surface, server-only template engines, terminal interfaces, or canvas/Pixi as a replacement for the
+DOM component catalog. Canvas and PivotViewer may use Pixi internally, but that does not make the
+rest of Components portable to non-DOM targets.
+
+## No vendor DataPage promise
+
+A DataPage rendered under an adapter is still DataPage. It continues to own its page layout, Arc
+query binding, DataTables composition, loaded-page behavior, selection, actions, and optional detail
+panel. A nested Button may use a vendor presentation slot; the page does not thereby become a MUI
+Data Grid or PrimeReact DataTable.
+
+When a screen requires a vendor grid's grouping, expansion, editing, virtualized collection,
+controlled server state, or commercial feature set, build an [application-owned custom composition](custom-composition.md).
+Do not depend on undocumented DOM replacement inside DataPage.
+
+## No removal of the built-in installation
+
+Installing `@cratis/components` still installs its built-in foundation, including React Aria packages
+used internally for selected interactions. Choosing an adapter does not produce a vendor-only Core
+archive and does not tree-shake package installation metadata.
+
+The adapter package adds peer-hosted vendor implementations for declared slots. Uncovered slots can
+continue through the built-in fallback. If an application cannot accept the built-in dependency or
+license set in its installation at all, the current adapter model is not a fit.
+
+## No automatic provider or portal unification
+
+Components does not merge an application's direct vendor provider, portal registry, z-index manager,
+server-rendering cache, theme, or license into one universal host. Adapter providers receive only
+the public renderer provider props. PrimeReact 11 additionally requires an application-owned outer
+provider and a non-secret boolean setup attestation.
+
+The application must verify coexistence when Components overlays and direct vendor overlays can be
+open together. Passing renderer conformance does not establish application-shell layering or focus
+behavior.
+
+## No universal conformance claim
+
+Repository conformance and Storybook checks are bounded evidence. They do not establish universal
+visual fidelity, browser support, accessibility, assistive-technology behavior, performance,
+security, licensing compliance, or production suitability. Read the exact adapter package manifest,
+README, `CONFORMANCE.md`, notices, and upstream terms for the version under evaluation.
+
+## Supported decisions
+
+Use the [renderer overview](index.md) to choose explicit ownership, the [primitive profile](primitive-adaptation.md)
+for the exact adaptable surface, and the [licensing policy](licensing.md) for package/key boundaries.
diff --git a/Documentation/toc.yml b/Documentation/toc.yml
index b3d58cd8..1a7a0f4c 100644
--- a/Documentation/toc.yml
+++ b/Documentation/toc.yml
@@ -16,6 +16,8 @@
   href: choosing-a-component.md
 - name: Styling
   href: Styling/toc.yml
+- name: Renderer adapters
+  href: renderers/toc.yml
 - name: Storybook
   href: storybook.mdx
 - name: Building a form
diff --git a/Source/MIGRATION.md b/Source/MIGRATION.md
index d4933638..63898287 100644
--- a/Source/MIGRATION.md
+++ b/Source/MIGRATION.md
@@ -5,7 +5,7 @@ Components 4 replaces the PrimeReact-backed Components 3 foundation with Compone
 This is a major-version migration. Rendered markup, styling parts, provider configuration, date entry, root imports, and some deprecated props change.
 
 :::note
-An application that has not migrated remains on its exact Components 3 package profile, including the third-party dependencies declared by that version. Components 4 does not currently publish a Prime compatibility package. Review the exact package manifests and third-party terms for the version the application keeps. This guide makes no support-window, security-fix, maintenance, or future-package commitment for either major.
+An application that has not migrated remains on its exact Components 3 package profile, including the third-party dependencies declared by that version. Components 4 does not provide a transparent Prime compatibility package. Its independently versioned `@cratis/components.mui`, `@cratis/components.primereact` (PrimeReact 11), and `@cratis/components.primereact10` adapters cover only the nine stable presentation slots. Review the exact package manifests and third-party terms for every version the application keeps. This guide makes no support-window, security-fix, maintenance, or future-package commitment for either major.
 :::
 
 ## Update dependencies
@@ -25,7 +25,10 @@ Keep a Prime package only when your application still imports it directly. Migra
 
 Applications using Canvas or PivotViewer must install `pixi.js@^8.20.0`, now an optional peer rather than a nested Components dependency. Align any existing direct Pixi dependency to the same compatible resolution so public `PIXI.Container` and pointer-event types come from one package instance. Applications using only non-Pixi subpaths do not need it.
 
-The package declares an Arc peer range of `>=20.3.1 <23`.
+The package declares an Arc peer range of `>=20.3.1 <23`. The adapter package manifests still use
+the temporary `@cratis/components >=3.0.0 <4` repository peer while the V4 source set is assembled;
+do not interpret that placeholder as release compatibility. The final `>=4 <5` peer sweep and
+package versioning happen together after the remaining release blockers close.
 
 ## Import from explicit subpaths
 
diff --git a/Source/README.md b/Source/README.md
index 62659a1c..547cb160 100644
--- a/Source/README.md
+++ b/Source/README.md
@@ -10,6 +10,7 @@ contracts, stable parts, and design tokens. React Aria supplies selected
 interaction primitives internally; consumers do not import or style React Aria.
 
 - [Canonical Components documentation](https://cratis.io/components/)
+- [Renderer adapters and coexistence](https://cratis.io/components/renderers/)
 - [Migration guide](./MIGRATION.md)
 - [Private security reporting](mailto:oss@cratis.io?subject=Security%3A)
 
@@ -85,7 +86,9 @@ are independently versioned and selected with the provider's `library` prop:
   separate MIT-era provider, global theme, and upstream-major boundary.
 
 Adapter-specific themes, providers, SSR setup, peers, and license boundaries remain documented by
-the adapter package. Styling for the built-in renderer is CSS-owned.
+the adapter package. Styling for the built-in renderer is CSS-owned. The canonical renderer guide
+bounds primitive adaptation, direct vendor coexistence, custom composition, unsupported claims, and
+license/key ownership.
 
 ```tsx
 <CratisComponentsProvider
diff --git a/compat-manifest.json b/compat-manifest.json
new file mode 100644
index 00000000..dc9b6e1c
--- /dev/null
+++ b/compat-manifest.json
@@ -0,0 +1,163 @@
+{
+    "schemaVersion": 1,
+    "publicationEnabled": false,
+    "rendererAbi": 1,
+    "coreTarget": "4.x",
+    "sourcePackageManifests": [
+        "Source/package.json",
+        "ESLint/package.json",
+        "Codemods/package.json",
+        "Conformance/package.json",
+        "Adapters/Mui/package.json",
+        "Adapters/PrimeReact/package.json",
+        "Adapters/PrimeReact10/package.json"
+    ],
+    "packages": [
+        {
+            "name": "@cratis/components",
+            "manifest": "Source/package.json",
+            "role": "core",
+            "version": "3.0.0",
+            "private": false,
+            "packageAccess": "public",
+            "peerDependencies": {
+                "@cratis/arc": ">=20.3.1 <23",
+                "@cratis/arc.react": ">=20.3.1 <23",
+                "@cratis/fundamentals": "^7.10.3",
+                "pixi.js": "^8.20.0",
+                "react": "^19.0.0",
+                "react-dom": "^19.0.0",
+                "reflect-metadata": "0.2.2",
+                "tsyringe": "4.10.0"
+            },
+            "upstream": {
+                "react": "^19.0.0"
+            },
+            "rendererAbi": 1
+        },
+        {
+            "name": "@cratis/eslint-plugin-components",
+            "manifest": "ESLint/package.json",
+            "role": "eslint",
+            "version": "0.0.0",
+            "private": false,
+            "packageAccess": "public",
+            "peerDependencies": {
+                "eslint": ">=9"
+            },
+            "upstream": {}
+        },
+        {
+            "name": "@cratis/components-codemods",
+            "manifest": "Codemods/package.json",
+            "role": "codemods",
+            "version": "0.0.0",
+            "private": false,
+            "packageAccess": "public",
+            "peerDependencies": {},
+            "upstream": {}
+        },
+        {
+            "name": "@cratis/components.conformance",
+            "manifest": "Conformance/package.json",
+            "role": "conformance",
+            "version": "0.1.0",
+            "private": false,
+            "packageAccess": "public",
+            "peerDependencies": {
+                "@cratis/components": ">=3.0.0 <4",
+                "react": "^19.0.0",
+                "react-dom": "^19.0.0"
+            },
+            "upstream": {},
+            "rendererAbi": 1
+        },
+        {
+            "name": "@cratis/components.mui",
+            "manifest": "Adapters/Mui/package.json",
+            "role": "renderer-adapter",
+            "version": "0.1.0",
+            "private": false,
+            "packageAccess": "public",
+            "peerDependencies": {
+                "@cratis/components": ">=3.0.0 <4",
+                "@emotion/react": ">=11 <12",
+                "@emotion/styled": ">=11 <12",
+                "@mui/material": ">=9 <10",
+                "react": "^19.0.0",
+                "react-dom": "^19.0.0"
+            },
+            "upstream": {
+                "@emotion/react": ">=11 <12",
+                "@emotion/styled": ">=11 <12",
+                "@mui/material": ">=9 <10",
+                "react": "^19.0.0",
+                "react-dom": "^19.0.0"
+            },
+            "rendererAbi": 1
+        },
+        {
+            "name": "@cratis/components.primereact",
+            "manifest": "Adapters/PrimeReact/package.json",
+            "role": "renderer-adapter",
+            "version": "0.1.0",
+            "private": false,
+            "packageAccess": "public",
+            "peerDependencies": {
+                "@cratis/components": ">=3.0.0 <4",
+                "@primereact/core": ">=11 <12",
+                "@primereact/ui": ">=11 <12",
+                "@primeuix/themes": ">=3 <4",
+                "primereact": ">=11 <12",
+                "react": "^19.0.0",
+                "react-dom": "^19.0.0"
+            },
+            "upstream": {
+                "@primereact/core": ">=11 <12",
+                "@primereact/ui": ">=11 <12",
+                "@primeuix/themes": ">=3 <4",
+                "primereact": ">=11 <12",
+                "react": "^19.0.0",
+                "react-dom": "^19.0.0"
+            },
+            "rendererAbi": 1
+        },
+        {
+            "name": "@cratis/components.primereact10",
+            "manifest": "Adapters/PrimeReact10/package.json",
+            "role": "renderer-adapter",
+            "version": "0.1.0",
+            "private": false,
+            "packageAccess": "public",
+            "peerDependencies": {
+                "@cratis/components": ">=3.0.0 <4",
+                "primereact": ">=10.9.9 <11",
+                "react": "^19.0.0",
+                "react-dom": "^19.0.0"
+            },
+            "upstream": {
+                "primereact": ">=10.9.9 <11",
+                "react": "^19.0.0",
+                "react-dom": "^19.0.0"
+            },
+            "rendererAbi": 1
+        }
+    ],
+    "privateArtifacts": [
+        {
+            "id": "plain",
+            "path": "Conformance/for_plain_dom_renderer",
+            "purpose": "Private plain-DOM conformance falsification fixture",
+            "private": true,
+            "published": false
+        },
+        {
+            "id": "storybook",
+            "path": "Source/.storybook",
+            "purpose": "Private release-blocker evidence",
+            "private": true,
+            "published": false,
+            "releaseBlocker": true
+        }
+    ]
+}
diff --git a/package.json b/package.json
index 4ea4f445..c4dd479b 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,9 @@
         "build": "node ./run-task-on-workspaces.js build",
         "lint": "node ./run-task-on-workspaces.js lint",
         "test": "node ./run-task-on-workspaces.js test",
-        "ci": "node ./run-task-on-workspaces.js ci",
+        "generate-compat-manifest": "node ./scripts/generate-compat-manifest.mjs --write",
+        "verify-compat-manifest": "node ./scripts/generate-compat-manifest.mjs --check",
+        "ci": "yarn verify-compat-manifest && node ./run-task-on-workspaces.js ci",
         "publish-version": "node ./run-task-on-workspaces.js publish-version $*",
         "up": "node ./run-task-on-workspaces.js up"
     },
diff --git a/scripts/generate-compat-manifest.mjs b/scripts/generate-compat-manifest.mjs
new file mode 100644
index 00000000..fba49a3d
--- /dev/null
+++ b/scripts/generate-compat-manifest.mjs
@@ -0,0 +1,243 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import fs from 'node:fs';
+import path from 'node:path';
+import process from 'node:process';
+import { fileURLToPath } from 'node:url';
+
+const repositoryDirectory = path.resolve(
+    path.dirname(fileURLToPath(import.meta.url)),
+    '..',
+);
+const outputPath = path.join(repositoryDirectory, 'compat-manifest.json');
+const expectedPackages = new Map([
+    ['@cratis/components', 'core'],
+    ['@cratis/eslint-plugin-components', 'eslint'],
+    ['@cratis/components-codemods', 'codemods'],
+    ['@cratis/components.conformance', 'conformance'],
+    ['@cratis/components.mui', 'renderer-adapter'],
+    ['@cratis/components.primereact', 'renderer-adapter'],
+    ['@cratis/components.primereact10', 'renderer-adapter'],
+]);
+const packageOrder = [...expectedPackages.keys()];
+const rendererAbi = 1;
+const coreTarget = '4.x';
+
+const mode = process.argv[2] ?? '--check';
+if (!['--check', '--write'].includes(mode)) {
+    throw new Error('Usage: node scripts/generate-compat-manifest.mjs [--check|--write]');
+}
+
+const rootPackage = readJson(path.join(repositoryDirectory, 'package.json'));
+const workspaceManifestPaths = discoverWorkspaceManifestPaths(rootPackage.workspaces);
+const packages = workspaceManifestPaths.map((manifestPath) => packageEntry(manifestPath));
+validatePackageSet(packages);
+
+packages.sort(
+    (left, right) => packageOrder.indexOf(left.name) - packageOrder.indexOf(right.name),
+);
+
+const manifest = {
+    schemaVersion: 1,
+    publicationEnabled: false,
+    rendererAbi,
+    coreTarget,
+    sourcePackageManifests: packages.map((entry) => entry.manifest),
+    packages,
+    privateArtifacts: [
+        {
+            id: 'plain',
+            path: 'Conformance/for_plain_dom_renderer',
+            purpose: 'Private plain-DOM conformance falsification fixture',
+            private: true,
+            published: false,
+        },
+        {
+            id: 'storybook',
+            path: 'Source/.storybook',
+            purpose: 'Private release-blocker evidence',
+            private: true,
+            published: false,
+            releaseBlocker: true,
+        },
+    ],
+};
+
+validateManifest(manifest);
+const serialized = `${JSON.stringify(manifest, null, 4)}\n`;
+
+if (mode === '--write') {
+    fs.writeFileSync(outputPath, serialized);
+    console.log(
+        `Wrote ${path.relative(repositoryDirectory, outputPath)} from ${packages.length} workspace package manifests.`,
+    );
+} else {
+    if (!fs.existsSync(outputPath)) {
+        fail('compat-manifest.json is missing. Run yarn generate-compat-manifest.');
+    }
+    const current = fs.readFileSync(outputPath, 'utf8');
+    if (current !== serialized) {
+        fail(
+            'compat-manifest.json is stale. Run yarn generate-compat-manifest and review the package metadata change.',
+        );
+    }
+    console.log(
+        `Verified compat-manifest.json against ${packages.length} workspace package manifests.`,
+    );
+}
+
+function discoverWorkspaceManifestPaths(workspaces) {
+    if (!Array.isArray(workspaces))
+        fail('Root package.json must declare a workspaces array.');
+
+    const manifestPaths = [];
+    for (const workspace of workspaces) {
+        if (workspace.endsWith('/*')) {
+            const parent = path.join(repositoryDirectory, workspace.slice(0, -2));
+            for (const entry of fs.readdirSync(parent, { withFileTypes: true })) {
+                if (!entry.isDirectory()) continue;
+                const relativeManifest = path.posix.join(
+                    workspace.slice(0, -2),
+                    entry.name,
+                    'package.json',
+                );
+                if (fs.existsSync(path.join(repositoryDirectory, relativeManifest))) {
+                    manifestPaths.push(relativeManifest);
+                }
+            }
+        } else {
+            manifestPaths.push(path.posix.join(workspace, 'package.json'));
+        }
+    }
+    return manifestPaths.sort();
+}
+
+function packageEntry(manifestPath) {
+    const packageJson = readJson(path.join(repositoryDirectory, manifestPath));
+    if (!expectedPackages.has(packageJson.name)) {
+        fail(
+            `Workspace ${manifestPath} declares unexpected package '${packageJson.name ?? '<unnamed>'}'.`,
+        );
+    }
+
+    const entry = {
+        name: packageJson.name,
+        manifest: manifestPath,
+        role: expectedPackages.get(packageJson.name),
+        version: packageJson.version,
+        private: packageJson.private === true,
+        packageAccess: packageJson.publishConfig?.access ?? null,
+        peerDependencies: sortObject(packageJson.peerDependencies ?? {}),
+        upstream: sortObject(packageJson.cratis?.upstream ?? {}),
+    };
+
+    const abi = packageJson.cratisUiAbi ?? parseAbiMajor(packageJson.cratis?.abi);
+    if (abi !== undefined) entry.rendererAbi = abi;
+    return entry;
+}
+
+function validatePackageSet(packages) {
+    const actualNames = packages.map((entry) => entry.name);
+    const missing = packageOrder.filter((name) => !actualNames.includes(name));
+    const duplicates = actualNames.filter(
+        (name, index) => actualNames.indexOf(name) !== index,
+    );
+    if (missing.length > 0) fail(`Missing release packages: ${missing.join(', ')}.`);
+    if (duplicates.length > 0)
+        fail(`Duplicate release packages: ${[...new Set(duplicates)].join(', ')}.`);
+    if (actualNames.length !== packageOrder.length) {
+        fail(
+            `Expected ${packageOrder.length} release packages, found ${actualNames.length}.`,
+        );
+    }
+}
+
+function validateManifest(manifest) {
+    if (manifest.rendererAbi !== 1 || manifest.coreTarget !== '4.x') {
+        fail(
+            'Compatibility metadata must target renderer ABI 1 and Components Core 4.x.',
+        );
+    }
+    if (manifest.publicationEnabled !== false) {
+        fail('Compatibility metadata must not enable publication.');
+    }
+
+    for (const entry of manifest.packages) {
+        if (entry.private || entry.packageAccess !== 'public') {
+            fail(
+                `${entry.name} must remain an explicitly public-intent package manifest.`,
+            );
+        }
+        if (
+            entry.rendererAbi !== undefined &&
+            entry.rendererAbi !== manifest.rendererAbi
+        ) {
+            fail(
+                `${entry.name} declares renderer ABI ${entry.rendererAbi}; expected ${manifest.rendererAbi}.`,
+            );
+        }
+        for (const [upstreamName, upstreamRange] of Object.entries(entry.upstream)) {
+            if (entry.peerDependencies[upstreamName] !== upstreamRange) {
+                fail(
+                    `${entry.name} upstream '${upstreamName}' must exactly match its peer dependency range.`,
+                );
+            }
+        }
+    }
+
+    const adapters = manifest.packages.filter(
+        (entry) => entry.role === 'renderer-adapter',
+    );
+    for (const adapter of adapters) {
+        if (adapter.version !== '0.1.0') {
+            fail(`${adapter.name} must remain at adapter version 0.1.0 in this tranche.`);
+        }
+    }
+
+    const primeReact10 = manifest.packages.find(
+        (entry) => entry.name === '@cratis/components.primereact10',
+    );
+    if (
+        primeReact10.peerDependencies.primereact !== '>=10.9.9 <11' ||
+        primeReact10.upstream.primereact !== '>=10.9.9 <11'
+    ) {
+        fail(
+            'PrimeReact 10 must remain bounded to >=10.9.9 <11 in peers and upstream metadata.',
+        );
+    }
+
+    for (const artifact of manifest.privateArtifacts) {
+        if (!artifact.private || artifact.published) {
+            fail(
+                `Private artifact '${artifact.id}' must be explicitly private and non-published.`,
+            );
+        }
+        if (!fs.existsSync(path.join(repositoryDirectory, artifact.path))) {
+            fail(
+                `Private artifact '${artifact.id}' path '${artifact.path}' does not exist.`,
+            );
+        }
+    }
+}
+
+function parseAbiMajor(value) {
+    if (value === undefined) return undefined;
+    const match = String(value).match(/\d+/);
+    return match ? Number(match[0]) : undefined;
+}
+
+function sortObject(value) {
+    return Object.fromEntries(
+        Object.entries(value).sort(([left], [right]) => left.localeCompare(right)),
+    );
+}
+
+function readJson(filePath) {
+    return JSON.parse(fs.readFileSync(filePath, 'utf8'));
+}
+
+function fail(message) {
+    console.error(message);
+    process.exit(1);
+}

From ca05de74f7a5af0699a7957b209917073360d232 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Fri, 28 Aug 2026 18:01:08 +0200
Subject: [PATCH 236/267] Complete renderer Storybook matrix certification

Make the composed manager preserve stable story ids across lazy refs, run browser coverage from the Source-rooted Storybook config, and close the renderer-specific accessibility and behavior findings exposed by the full four-renderer matrix.
---
 Adapters/Mui/.storybook/preview.tsx           |  22 ++-
 Adapters/Mui/src/index.tsx                    |   2 +-
 Adapters/PrimeReact/.storybook/preview.css    | 168 ++++++++++++++++++
 Adapters/PrimeReact/.storybook/preview.tsx    |   1 +
 Adapters/PrimeReact/src/index.tsx             |  11 +-
 Adapters/PrimeReact10/.storybook/preview.css  |  50 ++++++
 Adapters/PrimeReact10/.storybook/preview.tsx  |  16 +-
 Adapters/PrimeReact10/src/index.tsx           |   5 +-
 Source/.storybook-renderers/main.ts           |   4 +
 .../.storybook-renderers}/preview.tsx         |  24 ++-
 Source/Common/ActionMenubar.stories.tsx       |   2 +-
 .../for_manager/when_switching_renderer.ts    |  50 +++++-
 Storybook/manager/manager.tsx                 |  40 +++--
 Storybook/manager/renderer-navigation.ts      |  14 +-
 Storybook/package.json                        |   3 +-
 Storybook/preview/main.ts                     |   2 +-
 Storybook/scripts/build-storybooks.mjs        |  43 +++--
 Storybook/scripts/dev-storybooks.mjs          |  57 +++---
 Storybook/scripts/run-story-matrix.mjs        |  63 ++++---
 Storybook/scripts/verify-composed-manager.mjs | 135 ++++++++++++++
 Storybook/vitest.storybook.config.ts          |  61 ++++++-
 21 files changed, 665 insertions(+), 108 deletions(-)
 create mode 100644 Adapters/PrimeReact/.storybook/preview.css
 create mode 100644 Adapters/PrimeReact10/.storybook/preview.css
 create mode 100644 Source/.storybook-renderers/main.ts
 rename {Storybook/preview => Source/.storybook-renderers}/preview.tsx (82%)
 create mode 100644 Storybook/scripts/verify-composed-manager.mjs

diff --git a/Adapters/Mui/.storybook/preview.tsx b/Adapters/Mui/.storybook/preview.tsx
index 171b2b33..85e7cd3a 100644
--- a/Adapters/Mui/.storybook/preview.tsx
+++ b/Adapters/Mui/.storybook/preview.tsx
@@ -10,10 +10,28 @@ export interface RendererEnvironmentProps {
 }
 
 /** Storybook-only Material UI theme boundary for this isolated renderer preview. */
-export const RendererEnvironment = ({ appearance, children }: RendererEnvironmentProps) => {
+export const RendererEnvironment = ({
+    appearance,
+    children,
+}: RendererEnvironmentProps) => {
     const dark = appearance !== 'baseline-light';
     const theme = useMemo(
-        () => createTheme({ cssVariables: true, palette: { mode: dark ? 'dark' : 'light' } }),
+        () =>
+            createTheme({
+                cssVariables: true,
+                palette: {
+                    mode: dark ? 'dark' : 'light',
+                    primary: { main: dark ? '#90caf9' : '#005ea8' },
+                    warning: {
+                        main: dark ? '#ffb74d' : '#8a3b00',
+                        contrastText: dark ? '#111827' : '#ffffff',
+                    },
+                    error: {
+                        main: dark ? '#ef9a9a' : '#c62828',
+                        contrastText: dark ? '#111827' : '#ffffff',
+                    },
+                },
+            }),
         [dark],
     );
     return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
diff --git a/Adapters/Mui/src/index.tsx b/Adapters/Mui/src/index.tsx
index cae3483e..6d1ed78e 100644
--- a/Adapters/Mui/src/index.tsx
+++ b/Adapters/Mui/src/index.tsx
@@ -851,7 +851,7 @@ const MuiChoice = ({ kind, props, forwardedRef }: MuiChoiceProps) => {
         name: kind === 'radio' ? radioProps.name : nativeProps.name,
         value: kind === 'radio' ? radioProps.value : nativeProps.value,
         'aria-invalid': ariaInvalid,
-        'aria-readonly': readOnly || undefined,
+        'aria-readonly': kind === 'switch' ? readOnly || undefined : undefined,
         role: kind === 'switch' ? 'switch' : nativeProps.role,
         className: classNames('cratis-mui-choice__input', inputClassName),
         style: inputStyle,
diff --git a/Adapters/PrimeReact/.storybook/preview.css b/Adapters/PrimeReact/.storybook/preview.css
new file mode 100644
index 00000000..e2cab8c4
--- /dev/null
+++ b/Adapters/PrimeReact/.storybook/preview.css
@@ -0,0 +1,168 @@
+/* Copyright (c) Cratis. All rights reserved. */
+/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */
+
+html.cratis-light .cratis-primereact-button {
+    color: #ffffff !important;
+    background: #005ea8 !important;
+    border-color: #005ea8 !important;
+}
+
+html.cratis-light .cratis-primereact-button[data-tone='neutral'] {
+    background: #475569 !important;
+    border-color: #475569 !important;
+}
+
+html.cratis-light .cratis-primereact-button[data-tone='accent'] {
+    background: #0369a1 !important;
+    border-color: #0369a1 !important;
+}
+
+html.cratis-light .cratis-primereact-button[data-tone='positive'] {
+    background: #047857 !important;
+    border-color: #047857 !important;
+}
+
+html.cratis-light .cratis-primereact-button[data-tone='caution'] {
+    background: #8a3b00 !important;
+    border-color: #8a3b00 !important;
+}
+
+html.cratis-light .cratis-primereact-button[data-tone='critical'] {
+    background: #b91c1c !important;
+    border-color: #b91c1c !important;
+}
+
+html.cratis-light
+    .cratis-primereact-button:is(
+        [data-variant='ghost'],
+        [data-variant='link'],
+        [data-variant='outline']
+    ) {
+    color: #005ea8 !important;
+    background: transparent !important;
+}
+
+html.cratis-light
+    .cratis-primereact-button[data-tone='neutral']:is(
+        [data-variant='ghost'],
+        [data-variant='link'],
+        [data-variant='outline']
+    ) {
+    color: #475569 !important;
+}
+
+html.cratis-light
+    .cratis-primereact-button[data-tone='accent']:is(
+        [data-variant='ghost'],
+        [data-variant='link'],
+        [data-variant='outline']
+    ) {
+    color: #0369a1 !important;
+}
+
+html.cratis-light
+    .cratis-primereact-button[data-tone='positive']:is(
+        [data-variant='ghost'],
+        [data-variant='link'],
+        [data-variant='outline']
+    ) {
+    color: #047857 !important;
+}
+
+html.cratis-light
+    .cratis-primereact-button[data-tone='caution']:is(
+        [data-variant='ghost'],
+        [data-variant='link'],
+        [data-variant='outline']
+    ) {
+    color: #8a3b00 !important;
+}
+
+html.cratis-light
+    .cratis-primereact-button[data-tone='critical']:is(
+        [data-variant='ghost'],
+        [data-variant='link'],
+        [data-variant='outline']
+    ) {
+    color: #b91c1c !important;
+}
+
+html.cratis-dark .cratis-primereact-button {
+    color: #111827 !important;
+    background: #6ee7b7 !important;
+    border-color: #6ee7b7 !important;
+}
+
+html.cratis-dark .cratis-primereact-button[data-tone='neutral'] {
+    background: #cbd5e1 !important;
+    border-color: #cbd5e1 !important;
+}
+
+html.cratis-dark .cratis-primereact-button[data-tone='accent'] {
+    background: #7dd3fc !important;
+    border-color: #7dd3fc !important;
+}
+
+html.cratis-dark .cratis-primereact-button[data-tone='caution'] {
+    background: #fbbf24 !important;
+    border-color: #fbbf24 !important;
+}
+
+html.cratis-dark .cratis-primereact-button[data-tone='critical'] {
+    background: #fca5a5 !important;
+    border-color: #fca5a5 !important;
+}
+
+html.cratis-dark
+    .cratis-primereact-button:is(
+        [data-variant='ghost'],
+        [data-variant='link'],
+        [data-variant='outline']
+    ) {
+    color: #6ee7b7 !important;
+    background: transparent !important;
+}
+
+html.cratis-dark
+    .cratis-primereact-button[data-tone='neutral']:is(
+        [data-variant='ghost'],
+        [data-variant='link'],
+        [data-variant='outline']
+    ) {
+    color: #cbd5e1 !important;
+}
+
+html.cratis-dark
+    .cratis-primereact-button[data-tone='accent']:is(
+        [data-variant='ghost'],
+        [data-variant='link'],
+        [data-variant='outline']
+    ) {
+    color: #7dd3fc !important;
+}
+
+html.cratis-dark
+    .cratis-primereact-button[data-tone='caution']:is(
+        [data-variant='ghost'],
+        [data-variant='link'],
+        [data-variant='outline']
+    ) {
+    color: #fbbf24 !important;
+}
+
+html.cratis-dark
+    .cratis-primereact-button[data-tone='critical']:is(
+        [data-variant='ghost'],
+        [data-variant='link'],
+        [data-variant='outline']
+    ) {
+    color: #fca5a5 !important;
+}
+
+html.cratis-light .cratis-primereact-progress .p-progressbar-label {
+    color: #111827 !important;
+}
+
+html.cratis-dark .cratis-primereact-progress .p-progressbar-label {
+    color: #ffffff !important;
+}
diff --git a/Adapters/PrimeReact/.storybook/preview.tsx b/Adapters/PrimeReact/.storybook/preview.tsx
index 7fb8c101..0df726be 100644
--- a/Adapters/PrimeReact/.storybook/preview.tsx
+++ b/Adapters/PrimeReact/.storybook/preview.tsx
@@ -7,6 +7,7 @@ import { PassThroughProvider } from '@primereact/core/passthrough';
 import { ThemeProvider as PrimeThemeProvider } from '@primereact/core/theme';
 import Aura from '@primeuix/themes/aura';
 import type { ReactNode } from 'react';
+import './preview.css';
 
 export interface RendererEnvironmentProps {
     readonly appearance: string;
diff --git a/Adapters/PrimeReact/src/index.tsx b/Adapters/PrimeReact/src/index.tsx
index d6a89146..4b9c36e7 100644
--- a/Adapters/PrimeReact/src/index.tsx
+++ b/Adapters/PrimeReact/src/index.tsx
@@ -555,7 +555,7 @@ const PrimeChoice = ({
         name: kind === 'radio' ? radio.name : nativeProps.name,
         value: kind === 'radio' ? radio.value : nativeProps.value,
         'aria-invalid': ariaInvalid,
-        'aria-readonly': readOnly || undefined,
+        'aria-readonly': kind === 'switch' ? readOnly || undefined : undefined,
         role: kind === 'switch' ? 'switch' : nativeProps.role,
         className: classNames('cratis-primereact-choice__input', inputClassName),
         style: inputStyle,
@@ -733,12 +733,19 @@ const PrimeProgressSlot = ({
         >
             <PrimeProgressBar.Root
                 as='div'
-                value={boundedValue}
+                value={determinate ? boundedValue : undefined}
                 mode={mode}
                 pt={{
                     root: {
                         'aria-label': ariaLabelledBy ? undefined : ariaLabel,
                         'aria-labelledby': ariaLabelledBy,
+                        ...(determinate
+                            ? {}
+                            : {
+                                  'aria-valuemin': undefined,
+                                  'aria-valuenow': undefined,
+                                  'aria-valuemax': undefined,
+                              }),
                     },
                 }}
             >
diff --git a/Adapters/PrimeReact10/.storybook/preview.css b/Adapters/PrimeReact10/.storybook/preview.css
new file mode 100644
index 00000000..1ec3637d
--- /dev/null
+++ b/Adapters/PrimeReact10/.storybook/preview.css
@@ -0,0 +1,50 @@
+/* Copyright (c) Cratis. All rights reserved. */
+/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */
+
+html.cratis-light {
+    --primary-color: #005ea8;
+    --primary-color-text: #ffffff;
+    --red-400: #b91c1c;
+    --surface-400: #475569;
+}
+
+html.cratis-light .p-button {
+    color: #ffffff;
+    background: #005ea8;
+    border-color: #005ea8;
+}
+
+html.cratis-light .p-button.p-button-secondary {
+    background: #475569;
+    border-color: #475569;
+}
+
+html.cratis-light .p-button.p-button-danger {
+    background: #b91c1c;
+    border-color: #b91c1c;
+}
+
+html.cratis-light .p-button.p-button-warning {
+    background: #8a3b00;
+    border-color: #8a3b00;
+}
+
+html.cratis-light .p-button:is(.p-button-text, .p-button-link, .p-button-outlined) {
+    color: #005ea8;
+    background: transparent;
+}
+
+html.cratis-light
+    .p-button.p-button-secondary:is(.p-button-text, .p-button-link, .p-button-outlined) {
+    color: #475569;
+}
+
+html.cratis-light
+    .p-button.p-button-danger:is(.p-button-text, .p-button-link, .p-button-outlined) {
+    color: #b91c1c;
+}
+
+html.cratis-light
+    .p-button.p-button-warning:is(.p-button-text, .p-button-link, .p-button-outlined) {
+    color: #8a3b00;
+}
diff --git a/Adapters/PrimeReact10/.storybook/preview.tsx b/Adapters/PrimeReact10/.storybook/preview.tsx
index c92b3929..ddbb44de 100644
--- a/Adapters/PrimeReact10/.storybook/preview.tsx
+++ b/Adapters/PrimeReact10/.storybook/preview.tsx
@@ -5,6 +5,7 @@ import { PrimeReactProvider } from 'primereact/api';
 import 'primereact/resources/primereact.min.css';
 import 'primereact/resources/themes/lara-dark-blue/theme.css';
 import type { ReactNode } from 'react';
+import './preview.css';
 
 export interface RendererEnvironmentProps {
     readonly appearance: string;
@@ -12,8 +13,19 @@ export interface RendererEnvironmentProps {
 }
 
 /** Storybook-only PrimeReact 10.9.9 provider and v10 Lara theme boundary. */
-export const RendererEnvironment = ({ children }: RendererEnvironmentProps) => (
-    <PrimeReactProvider value={{ ripple: false }}>{children}</PrimeReactProvider>
+export const RendererEnvironment = ({
+    appearance,
+    children,
+}: RendererEnvironmentProps) => (
+    <PrimeReactProvider value={{ ripple: false }}>
+        <div
+            className={
+                appearance === 'baseline-light' ? 'cratis-prime10-light' : undefined
+            }
+        >
+            {children}
+        </div>
+    </PrimeReactProvider>
 );
 
 export const rendererSetup = Object.freeze({});
diff --git a/Adapters/PrimeReact10/src/index.tsx b/Adapters/PrimeReact10/src/index.tsx
index 45bdff31..b8ff04c0 100644
--- a/Adapters/PrimeReact10/src/index.tsx
+++ b/Adapters/PrimeReact10/src/index.tsx
@@ -509,6 +509,7 @@ const stateAttributes = (
 
 interface PrimeBooleanChangeEvent {
     readonly checked?: boolean;
+    readonly value?: boolean;
     readonly originalEvent?: SyntheticEvent;
 }
 
@@ -578,7 +579,7 @@ const PrimeChoice = ({
         value: kind === 'radio' ? radio.value : nativeProps.value,
         defaultChecked: kind === 'radio' ? defaultChecked : undefined,
         'aria-invalid': ariaInvalid,
-        'aria-readonly': readOnly || undefined,
+        'aria-readonly': kind === 'switch' ? readOnly || undefined : undefined,
         role: kind === 'switch' ? 'switch' : nativeProps.role,
         className: classNames('cratis-primereact10-choice__input', inputClassName),
         style: inputStyle,
@@ -597,7 +598,7 @@ const PrimeChoice = ({
             // input change event; its public legacy type erases the specific ChangeEvent subtype.
             partOnChange?.(originalEvent as ChangeEvent<HTMLInputElement>);
         }
-        const nextChecked = Boolean(event.checked);
+        const nextChecked = Boolean(kind === 'switch' ? event.value : event.checked);
         if (readOnly || (kind === 'radio' && !nextChecked)) return;
         state.synchronize(nextChecked);
         onChange?.(nextChecked, {
diff --git a/Source/.storybook-renderers/main.ts b/Source/.storybook-renderers/main.ts
new file mode 100644
index 00000000..27d8c698
--- /dev/null
+++ b/Source/.storybook-renderers/main.ts
@@ -0,0 +1,4 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+export { default } from '../../Storybook/preview/main.ts';
diff --git a/Storybook/preview/preview.tsx b/Source/.storybook-renderers/preview.tsx
similarity index 82%
rename from Storybook/preview/preview.tsx
rename to Source/.storybook-renderers/preview.tsx
index b1ec38f2..06a13525 100644
--- a/Storybook/preview/preview.tsx
+++ b/Source/.storybook-renderers/preview.tsx
@@ -4,8 +4,8 @@
 import { addons } from 'storybook/preview-api';
 import React from 'react';
 import { RendererPreviewProvider } from 'virtual:cratis-renderer-preview';
-import '../../Source/.storybook/foundation.css';
-import '../../Source/.storybook/preview.css';
+import '../.storybook/foundation.css';
+import '../.storybook/preview.css';
 
 const darkSelector = 'cratis-dark';
 const lightSelector = 'cratis-light';
@@ -29,7 +29,7 @@ const appearanceModes = {
 } as const;
 
 type Appearance = keyof typeof appearanceModes;
-const allBodyClasses: string[] = Object.values(appearanceModes).flatMap(mode =>
+const allBodyClasses: string[] = Object.values(appearanceModes).flatMap((mode) =>
     mode.bodyClass ? [mode.bodyClass] : [],
 );
 let docsSiteAppearance: Appearance | undefined;
@@ -42,10 +42,12 @@ const applyAppearance = (appearance: Appearance) => {
     if (mode.bodyClass) document.body.classList.add(mode.bodyClass);
 };
 
-addons.getChannel().on('STORYBOOK_THEME_CHANGE', ({ theme }: { readonly theme: string }) => {
-    docsSiteAppearance = theme === 'light' ? 'baseline-light' : 'baseline-dark';
-    applyAppearance(docsSiteAppearance);
-});
+addons
+    .getChannel()
+    .on('STORYBOOK_THEME_CHANGE', ({ theme }: { readonly theme: string }) => {
+        docsSiteAppearance = theme === 'light' ? 'baseline-light' : 'baseline-dark';
+        applyAppearance(docsSiteAppearance);
+    });
 
 export const tags = ['autodocs'];
 
@@ -66,8 +68,12 @@ export const globalTypes = {
 };
 
 export const decorators = [
-    (Story: React.ComponentType, context: { readonly globals: { readonly appearance?: Appearance } }) => {
-        const appearance = docsSiteAppearance ?? context.globals.appearance ?? 'baseline-dark';
+    (
+        Story: React.ComponentType,
+        context: { readonly globals: { readonly appearance?: Appearance } },
+    ) => {
+        const appearance =
+            docsSiteAppearance ?? context.globals.appearance ?? 'baseline-dark';
         applyAppearance(appearance);
         return (
             <RendererPreviewProvider appearance={appearance}>
diff --git a/Source/Common/ActionMenubar.stories.tsx b/Source/Common/ActionMenubar.stories.tsx
index 93a30781..c4dfc999 100644
--- a/Source/Common/ActionMenubar.stories.tsx
+++ b/Source/Common/ActionMenubar.stories.tsx
@@ -34,7 +34,7 @@ export const DisabledAction: Story = {
     play: async ({ canvasElement, args }) => {
         const save = within(canvasElement).getByRole('button', { name: 'Save' });
         await expect(save).toBeDisabled();
-        await userEvent.click(save);
+        save.click();
         await expect(args.model[1].command).not.toHaveBeenCalled();
     },
     args: {
diff --git a/Storybook/for_manager/when_switching_renderer.ts b/Storybook/for_manager/when_switching_renderer.ts
index d6776fc1..36496cbf 100644
--- a/Storybook/for_manager/when_switching_renderer.ts
+++ b/Storybook/for_manager/when_switching_renderer.ts
@@ -4,16 +4,52 @@
 import { expect } from 'chai';
 import type { ComposedRef } from 'storybook/manager-api';
 import { describe, it } from 'vitest';
-import { resolveRendererSelection } from '../manager/renderer-navigation';
+import {
+    canonicalRendererStoryId,
+    resolveRendererSelection,
+} from '../manager/renderer-navigation';
 
-const composedRef = (entries: Readonly<Record<string, { readonly id: string; readonly type: 'story' | 'docs' }>>) => ({
-    id: 'target',
-    url: './target',
-    previewInitialized: true,
-    index: entries,
-}) as unknown as ComposedRef;
+const composedRef = (
+    entries: Readonly<
+        Record<string, { readonly id: string; readonly type: 'story' | 'docs' }>
+    >,
+) =>
+    ({
+        id: 'target',
+        url: './target',
+        previewInitialized: true,
+        index: entries,
+    }) as unknown as ComposedRef;
 
 describe('when switching renderer', () => {
+    it('should remove the composed ref prefix before resolving the target story', () => {
+        expect(
+            canonicalRendererStoryId('cratis-mui_common-button--label', 'cratis-mui'),
+        ).to.equal('common-button--label');
+        expect(canonicalRendererStoryId('common-button--label', undefined)).to.equal(
+            'common-button--label',
+        );
+    });
+
+    it('should preserve the stable story id while a lazy composed ref loads its index', () => {
+        const selection = resolveRendererSelection(
+            'common-button--label',
+            'story',
+            'cratis-primereact10',
+            {
+                id: 'cratis-primereact10',
+                url: './renderers/cratis-primereact10',
+                previewInitialized: false,
+            } as ComposedRef,
+        );
+        expect(selection).to.deep.equal({
+            refId: 'cratis-primereact10',
+            storyId: 'common-button--label',
+            viewMode: 'story',
+            preserved: true,
+        });
+    });
+
     it('should preserve the stable story id and view mode when the target contains it', () => {
         const selection = resolveRendererSelection(
             'common-button--primary',
diff --git a/Storybook/manager/manager.tsx b/Storybook/manager/manager.tsx
index 08bf95f9..9c125ee9 100644
--- a/Storybook/manager/manager.tsx
+++ b/Storybook/manager/manager.tsx
@@ -2,14 +2,12 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import React from 'react';
-import {
-    addons,
-    types,
-    useStorybookApi,
-    useStorybookState,
-} from 'storybook/manager-api';
+import { addons, types, useStorybookApi, useStorybookState } from 'storybook/manager-api';
 import { themes } from 'storybook/theming';
-import { resolveRendererSelection } from './renderer-navigation';
+import {
+    canonicalRendererStoryId,
+    resolveRendererSelection,
+} from './renderer-navigation';
 
 const addonId = 'cratis/renderer-switcher';
 const toolId = `${addonId}/tool`;
@@ -19,6 +17,7 @@ const RendererSwitcher = () => {
     const state = useStorybookState();
     const refs = state.refs;
     const selectedRef = state.refId as string | undefined;
+    const selectedStoryId = canonicalRendererStoryId(state.storyId, selectedRef);
     const rendererRefs = Object.values(refs).sort((left, right) =>
         (left.title ?? left.id).localeCompare(right.title ?? right.id),
     );
@@ -26,17 +25,22 @@ const RendererSwitcher = () => {
     return (
         <label
             title='Changing renderer remounts the preview iframe and does not preserve local story state.'
-            style={{ display: 'inline-flex', alignItems: 'center', gap: 6, paddingInline: 8 }}
+            style={{
+                display: 'inline-flex',
+                alignItems: 'center',
+                gap: 6,
+                paddingInline: 8,
+            }}
         >
             <span style={{ fontSize: 12, fontWeight: 600 }}>Renderer</span>
             <select
                 aria-label='Renderer'
                 value={selectedRef ?? ''}
                 disabled={rendererRefs.length === 0}
-                onChange={event => {
+                onChange={(event) => {
                     const refId = event.currentTarget.value;
                     const selection = resolveRendererSelection(
-                        state.storyId,
+                        selectedStoryId,
                         state.viewMode ?? 'story',
                         refId,
                         refs[refId],
@@ -50,7 +54,7 @@ const RendererSwitcher = () => {
                 style={{ minWidth: 190, height: 28, borderRadius: 4 }}
             >
                 {!selectedRef && <option value=''>Choose renderer</option>}
-                {rendererRefs.map(ref => (
+                {rendererRefs.map((ref) => (
                     <option key={ref.id} value={ref.id}>
                         {ref.title ?? ref.id}
                     </option>
@@ -67,11 +71,13 @@ let currentTheme = urlParams.get('docsSiteTheme') ?? 'dark';
 const applyManagerConfig = () => {
     addons.setConfig({
         theme: currentTheme === 'light' ? themes.light : themes.dark,
-        navSize: 300,
-        bottomPanelHeight: 300,
-        panelPosition: 'bottom',
-        showToolbar: true,
-        showTabs: true,
+        layout: {
+            navSize: 300,
+            bottomPanelHeight: 300,
+            panelPosition: 'bottom',
+            showToolbar: true,
+            showTabs: true,
+        },
     });
 };
 
@@ -91,7 +97,7 @@ addons.getChannel().on('STORY_RENDERED', () => {
     }
 });
 
-window.addEventListener('message', event => {
+window.addEventListener('message', (event) => {
     if (event.source !== window.parent || event.origin !== window.location.origin) return;
     if (event.data?.type !== 'STORYBOOK_THEME_CHANGE') return;
     const newTheme = event.data.theme;
diff --git a/Storybook/manager/renderer-navigation.ts b/Storybook/manager/renderer-navigation.ts
index 38500ab2..63aeb1a7 100644
--- a/Storybook/manager/renderer-navigation.ts
+++ b/Storybook/manager/renderer-navigation.ts
@@ -10,6 +10,10 @@ export interface RendererSelection {
     readonly preserved: boolean;
 }
 
+/** Removes Storybook Composition's ref prefix from the manager's selected story id. */
+export const canonicalRendererStoryId = (storyId: string, refId: string | undefined) =>
+    refId && storyId.startsWith(`${refId}_`) ? storyId.slice(refId.length + 1) : storyId;
+
 /** Selects the same stable story id in another composed renderer when its index contains it. */
 export const resolveRendererSelection = (
     storyId: string,
@@ -17,14 +21,18 @@ export const resolveRendererSelection = (
     targetRefId: string,
     target: ComposedRef | undefined,
 ): RendererSelection | undefined => {
-    if (!target?.index) return undefined;
+    if (!target) return undefined;
+    if (!target.index) {
+        return { refId: targetRefId, storyId, viewMode, preserved: true };
+    }
     const current = target.index[storyId];
     if (current && (current.type === 'story' || current.type === 'docs')) {
         return { refId: targetRefId, storyId, viewMode, preserved: true };
     }
     const requestedType = viewMode === 'docs' ? 'docs' : 'story';
-    const fallback = Object.values(target.index).find(entry => entry.type === requestedType)
-        ?? Object.values(target.index).find(entry => entry.type === 'story');
+    const fallback =
+        Object.values(target.index).find((entry) => entry.type === requestedType) ??
+        Object.values(target.index).find((entry) => entry.type === 'story');
     if (!fallback) return undefined;
     return {
         refId: targetRefId,
diff --git a/Storybook/package.json b/Storybook/package.json
index 43dd551f..3f1e7cc1 100644
--- a/Storybook/package.json
+++ b/Storybook/package.json
@@ -14,7 +14,8 @@
         "verify-isolation": "node scripts/verify-peer-major-isolation.mjs",
         "build": "node scripts/build-storybooks.mjs",
         "verify-indexes": "node scripts/verify-storybook-indexes.mjs",
-        "test-storybook": "node scripts/run-story-matrix.mjs",
+        "verify-manager": "node scripts/verify-composed-manager.mjs",
+        "test-storybook": "yarn verify-manager && node scripts/run-story-matrix.mjs",
         "test-storybook:light": "node scripts/run-story-matrix.mjs baseline-light",
         "test-storybook:dark": "node scripts/run-story-matrix.mjs baseline-dark",
         "ci:preflight": "yarn verify-inventory && yarn typecheck && yarn test && yarn verify-isolation",
diff --git a/Storybook/preview/main.ts b/Storybook/preview/main.ts
index f3ca5742..02758dc0 100644
--- a/Storybook/preview/main.ts
+++ b/Storybook/preview/main.ts
@@ -127,7 +127,7 @@ const rendererBuildAttestation = (): Plugin => ({
 });
 
 const config: StorybookConfig = {
-    stories: [`${posixPath(sourceRoot)}/!(dist|node_modules|storybook-static)/**/*.stories.@(ts|tsx)`],
+    stories: ['../!(dist|node_modules|storybook-static)/**/*.stories.@(ts|tsx)'],
     addons: ['@storybook/addon-docs', '@storybook/addon-a11y', '@storybook/addon-vitest'],
     framework: { name: '@storybook/react-vite', options: {} },
     core: { builder: '@storybook/builder-vite' },
diff --git a/Storybook/scripts/build-storybooks.mjs b/Storybook/scripts/build-storybooks.mjs
index 62d1dc86..b6c3d6bd 100644
--- a/Storybook/scripts/build-storybooks.mjs
+++ b/Storybook/scripts/build-storybooks.mjs
@@ -10,7 +10,11 @@ import { discoverAdapterPackages } from './lib/adapter-inventory.mjs';
 const storybookRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
 const repositoryRoot = path.resolve(storybookRoot, '..');
 const outputRoot = path.join(repositoryRoot, 'Source/storybook-static');
-const storybookCli = path.join(repositoryRoot, 'node_modules/storybook/dist/bin/dispatcher.js');
+const storybookCli = path.join(
+    repositoryRoot,
+    'node_modules/storybook/dist/bin/dispatcher.js',
+);
+const rendererConfigDirectory = path.join(repositoryRoot, 'Source/.storybook-renderers');
 const inventory = discoverAdapterPackages(repositoryRoot);
 
 const runCommand = (label, executable, args, environment = {}) => {
@@ -22,14 +26,21 @@ const runCommand = (label, executable, args, environment = {}) => {
         timeout: 300_000,
     });
     if (result.error) throw result.error;
-    if (result.status !== 0) throw new Error(`${label} failed with exit code ${result.status}.`);
+    if (result.status !== 0)
+        throw new Error(`${label} failed with exit code ${result.status}.`);
 };
 const runNode = (label, script) => runCommand(label, process.execPath, [script]);
 const runStorybook = (label, args, environment) =>
     runCommand(label, process.execPath, [storybookCli, ...args], environment);
 
-runNode('Verify adapter inventory', path.join(storybookRoot, 'scripts/verify-adapter-inventory.mjs'));
-runNode('Verify PrimeReact peer-major isolation', path.join(storybookRoot, 'scripts/verify-peer-major-isolation.mjs'));
+runNode(
+    'Verify adapter inventory',
+    path.join(storybookRoot, 'scripts/verify-adapter-inventory.mjs'),
+);
+runNode(
+    'Verify PrimeReact peer-major isolation',
+    path.join(storybookRoot, 'scripts/verify-peer-major-isolation.mjs'),
+);
 rmSync(outputRoot, { recursive: true, force: true });
 runStorybook('Build composed Storybook manager', [
     'build',
@@ -40,13 +51,19 @@ runStorybook('Build composed Storybook manager', [
     '--disable-telemetry',
 ]);
 for (const adapter of inventory.adapters) {
-    runStorybook(`Build ${adapter.metadata.displayName} preview`, [
-        'build',
-        '--config-dir',
-        path.join(storybookRoot, 'preview'),
-        '--output-dir',
-        path.join(outputRoot, 'renderers', adapter.metadata.id),
-        '--disable-telemetry',
-    ], { CRATIS_STORYBOOK_ADAPTER_ID: adapter.metadata.id });
+    runStorybook(
+        `Build ${adapter.metadata.displayName} preview`,
+        [
+            'build',
+            '--config-dir',
+            rendererConfigDirectory,
+            '--output-dir',
+            path.join(outputRoot, 'renderers', adapter.metadata.id),
+            '--disable-telemetry',
+        ],
+        { CRATIS_STORYBOOK_ADAPTER_ID: adapter.metadata.id },
+    );
 }
-console.log(`\nBuilt one manager and ${inventory.adapters.length} isolated renderer previews at ${outputRoot}.`);
+console.log(
+    `\nBuilt one manager and ${inventory.adapters.length} isolated renderer previews at ${outputRoot}.`,
+);
diff --git a/Storybook/scripts/dev-storybooks.mjs b/Storybook/scripts/dev-storybooks.mjs
index a9568230..b7c356cd 100644
--- a/Storybook/scripts/dev-storybooks.mjs
+++ b/Storybook/scripts/dev-storybooks.mjs
@@ -8,35 +8,43 @@ import { discoverAdapterPackages } from './lib/adapter-inventory.mjs';
 
 const storybookRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
 const repositoryRoot = path.resolve(storybookRoot, '..');
-const storybookCli = path.join(repositoryRoot, 'node_modules/storybook/dist/bin/dispatcher.js');
+const storybookCli = path.join(
+    repositoryRoot,
+    'node_modules/storybook/dist/bin/dispatcher.js',
+);
+const rendererConfigDirectory = path.join(repositoryRoot, 'Source/.storybook-renderers');
 const inventory = discoverAdapterPackages(repositoryRoot);
 const children = [];
 let stopping = false;
 
 const launch = (label, configDirectory, port, environment = {}) => {
-    const child = spawn(process.execPath, [
-        storybookCli,
-        'dev',
-        '--config-dir',
-        configDirectory,
-        '--port',
-        String(port),
-        '--no-open',
-        '--disable-telemetry',
-    ], {
-        cwd: repositoryRoot,
-        env: { ...process.env, ...environment },
-        stdio: 'inherit',
-    });
+    const child = spawn(
+        process.execPath,
+        [
+            storybookCli,
+            'dev',
+            '--config-dir',
+            configDirectory,
+            '--port',
+            String(port),
+            '--no-open',
+            '--disable-telemetry',
+        ],
+        {
+            cwd: repositoryRoot,
+            env: { ...process.env, ...environment },
+            stdio: 'inherit',
+        },
+    );
     children.push(child);
-    child.once('exit', code => {
+    child.once('exit', (code) => {
         if (stopping || code === 0) return;
         console.error(`${label} exited with code ${code}.`);
         stop(code ?? 1);
     });
 };
 
-const stop = code => {
+const stop = (code) => {
     if (stopping) return;
     stopping = true;
     for (const child of children) if (!child.killed) child.kill('SIGTERM');
@@ -45,13 +53,14 @@ const stop = code => {
 process.once('SIGINT', () => stop(0));
 process.once('SIGTERM', () => stop(0));
 
-inventory.adapters.forEach((adapter, index) => launch(
-    adapter.metadata.displayName,
-    path.join(storybookRoot, 'preview'),
-    6100 + index,
-    { CRATIS_STORYBOOK_ADAPTER_ID: adapter.metadata.id },
-));
+inventory.adapters.forEach((adapter, index) =>
+    launch(adapter.metadata.displayName, rendererConfigDirectory, 6100 + index, {
+        CRATIS_STORYBOOK_ADAPTER_ID: adapter.metadata.id,
+    }),
+);
 launch('Composed Storybook manager', path.join(storybookRoot, 'manager'), 6006, {
     CRATIS_STORYBOOK_DEV_REFS: 'true',
 });
-console.log(`Composed manager: http://localhost:6006; ${inventory.adapters.length} isolated previews: ports 6100-${6099 + inventory.adapters.length}.`);
+console.log(
+    `Composed manager: http://localhost:6006; ${inventory.adapters.length} isolated previews: ports 6100-${6099 + inventory.adapters.length}.`,
+);
diff --git a/Storybook/scripts/run-story-matrix.mjs b/Storybook/scripts/run-story-matrix.mjs
index 7e61369b..6652a630 100644
--- a/Storybook/scripts/run-story-matrix.mjs
+++ b/Storybook/scripts/run-story-matrix.mjs
@@ -8,9 +8,12 @@ import { discoverAdapterPackages } from './lib/adapter-inventory.mjs';
 
 const storybookRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
 const repositoryRoot = path.resolve(storybookRoot, '..');
+const sourceRoot = path.join(repositoryRoot, 'Source');
 const inventory = discoverAdapterPackages(repositoryRoot);
 const requestedAppearance = process.argv[2];
-const appearances = requestedAppearance ? [requestedAppearance] : ['baseline-light', 'baseline-dark'];
+const appearances = requestedAppearance
+    ? [requestedAppearance]
+    : ['baseline-light', 'baseline-dark'];
 for (const appearance of appearances) {
     if (!['baseline-light', 'baseline-dark'].includes(appearance)) {
         throw new Error(`Unknown matrix appearance '${appearance}'.`);
@@ -25,38 +28,56 @@ const runNode = (label, script) => {
         timeout: 120_000,
     });
     if (result.error) throw result.error;
-    if (result.status !== 0) throw new Error(`${label} failed with exit code ${result.status}.`);
+    if (result.status !== 0)
+        throw new Error(`${label} failed with exit code ${result.status}.`);
 };
 
-runNode('Pre-matrix peer-major isolation', path.join(storybookRoot, 'scripts/verify-peer-major-isolation.mjs'));
-runNode('Pre-matrix Storybook indexes', path.join(storybookRoot, 'scripts/verify-storybook-indexes.mjs'));
+runNode(
+    'Pre-matrix peer-major isolation',
+    path.join(storybookRoot, 'scripts/verify-peer-major-isolation.mjs'),
+);
+runNode(
+    'Pre-matrix Storybook indexes',
+    path.join(storybookRoot, 'scripts/verify-storybook-indexes.mjs'),
+);
 
 const vitest = path.join(repositoryRoot, 'node_modules/vitest/vitest.mjs');
 for (const adapter of inventory.adapters) {
     for (const appearance of appearances) {
         const label = `${adapter.metadata.id} / ${appearance}`;
         console.log(`\n--- Browser story and axe matrix: ${label} ---`);
-        const result = spawnSync(process.execPath, [
-            vitest,
-            'run',
-            '--config',
-            path.join(storybookRoot, 'vitest.storybook.config.ts'),
-        ], {
-            cwd: repositoryRoot,
-            env: {
-                ...process.env,
-                CRATIS_STORYBOOK_ADAPTER_ID: adapter.metadata.id,
-                STORYBOOK_APPEARANCE: appearance,
+        const result = spawnSync(
+            process.execPath,
+            [
+                vitest,
+                'run',
+                '--config',
+                path.join(storybookRoot, 'vitest.storybook.config.ts'),
+            ],
+            {
+                cwd: sourceRoot,
+                env: {
+                    ...process.env,
+                    CRATIS_STORYBOOK_ADAPTER_ID: adapter.metadata.id,
+                    STORYBOOK_APPEARANCE: appearance,
+                },
+                stdio: 'inherit',
+                timeout: 600_000,
             },
-            stdio: 'inherit',
-            timeout: 600_000,
-        });
+        );
         if (result.error) throw result.error;
-        if (result.status !== 0) throw new Error(`Browser matrix failed for ${label} with exit code ${result.status}.`);
+        if (result.status !== 0)
+            throw new Error(
+                `Browser matrix failed for ${label} with exit code ${result.status}.`,
+            );
     }
 }
 
 const matrixCount = inventory.adapters.length * 261 * appearances.length;
-console.log(`\nCompleted ${inventory.adapters.length} isolated previews × 261 stories × ${appearances.length} appearance mode(s) = ${matrixCount} story/appearance/axe cases.`);
+console.log(
+    `\nCompleted ${inventory.adapters.length} isolated previews × 261 stories × ${appearances.length} appearance mode(s) = ${matrixCount} story/appearance/axe cases.`,
+);
 console.log('Story exclusions: none. No sampling or tag exclusion was applied.');
-console.log(`Renderer exclusions: ${inventory.exclusions.map(item => `${item.id} (${item.reason})`).join(', ') || 'none'}.`);
+console.log(
+    `Renderer exclusions: ${inventory.exclusions.map((item) => `${item.id} (${item.reason})`).join(', ') || 'none'}.`,
+);
diff --git a/Storybook/scripts/verify-composed-manager.mjs b/Storybook/scripts/verify-composed-manager.mjs
new file mode 100644
index 00000000..bbe29321
--- /dev/null
+++ b/Storybook/scripts/verify-composed-manager.mjs
@@ -0,0 +1,135 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { createServer } from 'node:http';
+import { existsSync, readFileSync, statSync } from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { chromium } from 'playwright';
+
+const storybookRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const repositoryRoot = path.resolve(storybookRoot, '..');
+const outputRoot = path.join(repositoryRoot, 'Source/storybook-static');
+const knownStoryId = 'common-button--label';
+const sourceRendererId = 'cratis-mui';
+const targetRendererId = 'cratis-primereact10';
+
+const contentTypes = {
+    '.css': 'text/css; charset=utf-8',
+    '.html': 'text/html; charset=utf-8',
+    '.js': 'text/javascript; charset=utf-8',
+    '.json': 'application/json; charset=utf-8',
+    '.mjs': 'text/javascript; charset=utf-8',
+    '.svg': 'image/svg+xml',
+    '.woff2': 'font/woff2',
+};
+
+const resolveRequest = (requestUrl) => {
+    const pathname = decodeURIComponent(
+        new URL(requestUrl ?? '/', 'http://localhost').pathname,
+    );
+    const requested = path.resolve(outputRoot, `.${pathname}`);
+    const relative = path.relative(outputRoot, requested);
+    if (
+        relative === '..' ||
+        relative.startsWith(`..${path.sep}`) ||
+        path.isAbsolute(relative)
+    ) {
+        return undefined;
+    }
+    if (existsSync(requested) && statSync(requested).isDirectory()) {
+        return path.join(requested, 'index.html');
+    }
+    return existsSync(requested) ? requested : path.join(outputRoot, 'index.html');
+};
+
+if (!existsSync(path.join(outputRoot, 'index.html'))) {
+    throw new Error('Build the composed Storybook before verifying its manager.');
+}
+
+const server = createServer((request, response) => {
+    let file;
+    try {
+        file = resolveRequest(request.url);
+    } catch {
+        response.writeHead(400).end('Invalid URL');
+        return;
+    }
+    if (!file || !existsSync(file)) {
+        response.writeHead(404).end('Not found');
+        return;
+    }
+    response.writeHead(200, {
+        'Content-Type': contentTypes[path.extname(file)] ?? 'application/octet-stream',
+        'Cache-Control': 'no-store',
+    });
+    response.end(readFileSync(file));
+});
+
+await new Promise((resolve, reject) => {
+    server.once('error', reject);
+    server.listen(0, '127.0.0.1', resolve);
+});
+
+const address = server.address();
+if (!address || typeof address === 'string') {
+    server.close();
+    throw new Error('Could not determine the composed Storybook test port.');
+}
+
+const baseUrl = `http://127.0.0.1:${address.port}`;
+const browser = await chromium.launch({ headless: true });
+try {
+    const page = await browser.newPage();
+    const pageErrors = [];
+    page.on('pageerror', (error) => pageErrors.push(error.message));
+    await page.goto(`${baseUrl}/?path=/story/${sourceRendererId}_${knownStoryId}`, {
+        waitUntil: 'domcontentloaded',
+    });
+
+    const selector = page.locator('select[aria-label="Renderer"]');
+    await selector.waitFor({ state: 'visible', timeout: 30_000 });
+    const options = await selector.locator('option').allTextContents();
+    if (options.length !== 4 || !options.includes('Cratis PrimeReact 10 renderer')) {
+        throw new Error(`Expected four renderer options, found: ${options.join(', ')}.`);
+    }
+    if ((await selector.inputValue()) !== sourceRendererId) {
+        throw new Error(
+            'The renderer selector did not reflect the initial composed ref.',
+        );
+    }
+
+    // Composition loads referenced indexes asynchronously after the manager toolbar appears.
+    await page.waitForTimeout(1_000);
+    await selector.selectOption(targetRendererId);
+    const expectedPath = `/story/${targetRendererId}_${knownStoryId}`;
+    await page.waitForURL(
+        (url) => new URL(url).searchParams.get('path') === expectedPath,
+        { timeout: 30_000 },
+    );
+    await page.waitForTimeout(500);
+
+    const childUrl = page
+        .frames()
+        .map((frame) => frame.url())
+        .find(
+            (url) =>
+                url.includes(`/renderers/${targetRendererId}/iframe.html`) &&
+                url.includes(`id=${knownStoryId}`),
+        );
+    if (!childUrl) {
+        throw new Error(
+            'The selected renderer preview iframe did not load the preserved story.',
+        );
+    }
+    if (pageErrors.length > 0) {
+        throw new Error(`Composed manager page errors: ${pageErrors.join(' | ')}`);
+    }
+
+    console.log(
+        `Composed manager verified: ${sourceRendererId} -> ${targetRendererId}, preserved '${knownStoryId}', loaded ${childUrl}.`,
+    );
+} finally {
+    await browser.close();
+    await new Promise((resolve) => server.close(resolve));
+}
diff --git a/Storybook/vitest.storybook.config.ts b/Storybook/vitest.storybook.config.ts
index 69eca646..2993aa25 100644
--- a/Storybook/vitest.storybook.config.ts
+++ b/Storybook/vitest.storybook.config.ts
@@ -8,17 +8,74 @@ import { playwright } from '@vitest/browser-playwright';
 import { defineConfig } from 'vitest/config';
 
 const storybookRoot = path.dirname(fileURLToPath(import.meta.url));
+const repositoryRoot = path.resolve(storybookRoot, '..');
 const rendererId = process.env.CRATIS_STORYBOOK_ADAPTER_ID ?? 'cratis-built-in';
 const appearance = process.env.STORYBOOK_APPEARANCE ?? 'baseline-dark';
+const rendererDependenciesById: Readonly<Record<string, readonly string[]>> = {
+    'cratis-mui': [
+        '@mui/material/Button',
+        '@mui/material/Checkbox',
+        '@mui/material/IconButton',
+        '@mui/material/InputBase',
+        '@mui/material/LinearProgress',
+        '@mui/material/Paper',
+        '@mui/material/Radio',
+        '@mui/material/Switch',
+        '@mui/material/Tooltip',
+        '@mui/material/styles',
+    ],
+    'cratis-primereact': [
+        '@primereact/core/config',
+        '@primereact/core/locale',
+        '@primereact/core/passthrough',
+        '@primereact/core/theme',
+        '@primereact/ui/button',
+        '@primereact/ui/card',
+        '@primereact/ui/checkbox',
+        '@primereact/ui/inputtext',
+        '@primereact/ui/progressbar',
+        '@primereact/ui/radiobutton',
+        '@primereact/ui/textarea',
+        '@primereact/ui/toggleswitch',
+        '@primeuix/themes/aura',
+    ],
+    'cratis-primereact10': [
+        'primereact/api',
+        'primereact/api/api.cjs.js',
+        'primereact/button/button.cjs.js',
+        'primereact/card/card.cjs.js',
+        'primereact/checkbox/checkbox.cjs.js',
+        'primereact/inputswitch/inputswitch.cjs.js',
+        'primereact/inputtext/inputtext.cjs.js',
+        'primereact/inputtextarea/inputtextarea.cjs.js',
+        'primereact/progressbar/progressbar.cjs.js',
+        'primereact/radiobutton/radiobutton.cjs.js',
+    ],
+};
+const rendererDependencies = rendererDependenciesById[rendererId] ?? [];
+const primeReactRoot =
+    rendererId === 'cratis-primereact10'
+        ? path.join(repositoryRoot, 'Adapters/PrimeReact10/node_modules/primereact')
+        : rendererId === 'cratis-primereact'
+          ? path.join(repositoryRoot, 'node_modules/primereact')
+          : undefined;
 
 const plugins = await storybookTest({
-    configDir: path.join(storybookRoot, 'preview'),
+    configDir: path.resolve(storybookRoot, '../Source/.storybook-renderers'),
     initialGlobals: { appearance },
 });
 
 export default defineConfig({
+    resolve: {
+        alias: primeReactRoot
+            ? [
+                  { find: /^primereact\/(.+)$/u, replacement: `${primeReactRoot}/$1` },
+                  { find: 'primereact', replacement: primeReactRoot },
+              ]
+            : [],
+    },
     optimizeDeps: {
-        include: ['@cratis/arc.react/messaging'],
+        include: ['@cratis/arc.react/messaging', ...rendererDependencies],
     },
     plugins,
     test: {

From 34e9507a8c1ea340fe55217e4ff472fe0b844cf2 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Fri, 28 Aug 2026 18:15:52 +0200
Subject: [PATCH 237/267] Reject traversal in Storybook smoke server

Keep the composed-manager verifier bound to its generated output root even for explicitly encoded parent path segments.
---
 Storybook/scripts/verify-composed-manager.mjs | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/Storybook/scripts/verify-composed-manager.mjs b/Storybook/scripts/verify-composed-manager.mjs
index bbe29321..c7348661 100644
--- a/Storybook/scripts/verify-composed-manager.mjs
+++ b/Storybook/scripts/verify-composed-manager.mjs
@@ -25,6 +25,9 @@ const contentTypes = {
 };
 
 const resolveRequest = (requestUrl) => {
+    const rawPathname = (requestUrl ?? '/').split(/[?#]/u, 1)[0];
+    const decodedRawPathname = decodeURIComponent(rawPathname).replaceAll('\\', '/');
+    if (decodedRawPathname.split('/').includes('..')) return undefined;
     const pathname = decodeURIComponent(
         new URL(requestUrl ?? '/', 'http://localhost').pathname,
     );
@@ -46,6 +49,12 @@ const resolveRequest = (requestUrl) => {
 if (!existsSync(path.join(outputRoot, 'index.html'))) {
     throw new Error('Build the composed Storybook before verifying its manager.');
 }
+if (
+    resolveRequest('/../outside') !== undefined ||
+    resolveRequest('/%2e%2e/outside') !== undefined
+) {
+    throw new Error('The composed Storybook verifier accepted a traversal path.');
+}
 
 const server = createServer((request, response) => {
     let file;

From e661780f24dd0794945e448b9fce9fb7555637b4 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Fri, 28 Aug 2026 18:33:06 +0200
Subject: [PATCH 238/267] Finalize Components 4 package compatibility

Set the Core and migration tooling to 4.0.0, bind Conformance and all renderer adapters to the honest Components 4 peer range, and make the generated compatibility manifest enforce the final seven-package release set while publication stays disabled.
---
 Adapters/Mui/README.md                        |  6 +--
 ...hen_using_the_mui_presentation_profile.tsx |  2 +-
 Adapters/Mui/package.json                     |  2 +-
 .../Mui/scripts/verify-packed-package.mjs     |  2 +-
 Adapters/PrimeReact/README.md                 |  5 +-
 ...ng_the_primereact_presentation_profile.tsx |  2 +-
 Adapters/PrimeReact/package.json              |  2 +-
 .../scripts/verify-packed-package.mjs         |  2 +-
 Adapters/PrimeReact10/README.md               |  5 +-
 ..._the_primereact10_presentation_profile.tsx |  2 +-
 Adapters/PrimeReact10/package.json            |  2 +-
 .../scripts/verify-packed-package.mjs         |  2 +-
 Codemods/package.json                         |  2 +-
 Conformance/package.json                      |  2 +-
 ESLint/package.json                           |  2 +-
 Source/MIGRATION.md                           |  7 ++-
 Source/package.json                           |  2 +-
 compat-manifest.json                          | 20 ++++----
 scripts/generate-compat-manifest.mjs          | 46 ++++++++++++++-----
 yarn.lock                                     |  8 ++--
 20 files changed, 71 insertions(+), 52 deletions(-)

diff --git a/Adapters/Mui/README.md b/Adapters/Mui/README.md
index 465dce10..5c64b56d 100644
--- a/Adapters/Mui/README.md
+++ b/Adapters/Mui/README.md
@@ -59,10 +59,8 @@ concerns and do not justify a Core ABI change.
 MUI Core is bounded to `>=9 <10`, Emotion to `>=11 <12`, and React/ReactDOM to React 19. Vendor
 packages are peers; exact current versions are dev dependencies only for repository proof.
 
-The current `@cratis/components` peer `>=3.0.0 <4` is a temporary repository placeholder matching
-`@cratis/components.conformance` while the V4 source package is prepared. **It must be changed to
-the honest `>=4 <5` range before this adapter is published.** Publishing with the placeholder would
-misstate compatibility.
+The adapter requires `@cratis/components >=4 <5`. This range is intentionally bounded to the
+Components major whose renderer ABI and stable presentation profile it implements.
 
 See [CONFORMANCE.md](./CONFORMANCE.md) for the bounded evidence and
 [THIRD_PARTY_NOTICES.md](./THIRD_PARTY_NOTICES.md) for upstream licenses.
diff --git a/Adapters/Mui/for_adapter/when_using_the_mui_presentation_profile.tsx b/Adapters/Mui/for_adapter/when_using_the_mui_presentation_profile.tsx
index 152ab6f5..e3089410 100644
--- a/Adapters/Mui/for_adapter/when_using_the_mui_presentation_profile.tsx
+++ b/Adapters/Mui/for_adapter/when_using_the_mui_presentation_profile.tsx
@@ -211,7 +211,7 @@ describe('when using the MUI stable presentation profile', () => {
             '@emotion/styled': '>=11 <12',
             react: '^19.0.0',
             'react-dom': '^19.0.0',
-            '@cratis/components': '>=3.0.0 <4',
+            '@cratis/components': '>=4 <5',
         });
         const serialized = JSON.stringify(packageJson);
         expect(serialized).not.to.contain('@mui/x-');
diff --git a/Adapters/Mui/package.json b/Adapters/Mui/package.json
index fccbc298..0a6b4ab1 100644
--- a/Adapters/Mui/package.json
+++ b/Adapters/Mui/package.json
@@ -99,7 +99,7 @@
         "ci": "yarn clean && yarn lint && yarn build && yarn typecheck-specs && yarn test && yarn verify-package"
     },
     "peerDependencies": {
-        "@cratis/components": ">=3.0.0 <4",
+        "@cratis/components": ">=4 <5",
         "@emotion/react": ">=11 <12",
         "@emotion/styled": ">=11 <12",
         "@mui/material": ">=9 <10",
diff --git a/Adapters/Mui/scripts/verify-packed-package.mjs b/Adapters/Mui/scripts/verify-packed-package.mjs
index aa4be6e3..2f16a971 100644
--- a/Adapters/Mui/scripts/verify-packed-package.mjs
+++ b/Adapters/Mui/scripts/verify-packed-package.mjs
@@ -117,7 +117,7 @@ try {
     );
 
     const expectedPeers = {
-        '@cratis/components': '>=3.0.0 <4',
+        '@cratis/components': '>=4 <5',
         '@emotion/react': '>=11 <12',
         '@emotion/styled': '>=11 <12',
         '@mui/material': '>=9 <10',
diff --git a/Adapters/PrimeReact/README.md b/Adapters/PrimeReact/README.md
index b353a0aa..43c0500c 100644
--- a/Adapters/PrimeReact/README.md
+++ b/Adapters/PrimeReact/README.md
@@ -75,9 +75,8 @@ PrimeReact packages are bounded to `>=11 <12`, PrimeUX themes to `>=3 <4`, and R
 React 19. Vendor packages are peers and are never bundled. Exact repository proof uses 11.1.0 and
 `@primeuix/themes` 3.0.0.
 
-The current `@cratis/components` peer `>=3.0.0 <4` is a temporary repository placeholder matching
-the unreleased V4 source package. **It must become the honest `>=4 <5` range before publication.**
-Publishing with the placeholder would misstate compatibility.
+The adapter requires `@cratis/components >=4 <5`. This range is intentionally bounded to the
+Components major whose renderer ABI and stable presentation profile it implements.
 
 See [CONFORMANCE.md](./CONFORMANCE.md) for bounded evidence and
 [THIRD_PARTY_NOTICES.md](./THIRD_PARTY_NOTICES.md) for upstream licensing.
diff --git a/Adapters/PrimeReact/for_adapter/when_using_the_primereact_presentation_profile.tsx b/Adapters/PrimeReact/for_adapter/when_using_the_primereact_presentation_profile.tsx
index 34d4b0c0..45ee378a 100644
--- a/Adapters/PrimeReact/for_adapter/when_using_the_primereact_presentation_profile.tsx
+++ b/Adapters/PrimeReact/for_adapter/when_using_the_primereact_presentation_profile.tsx
@@ -261,7 +261,7 @@ describe('when using the PrimeReact stable presentation profile', () => {
     it('should declare only bounded peer-hosted PrimeReact 11 vendors', () => {
         expect(packageJson).not.to.have.property('dependencies');
         expect(packageJson.peerDependencies).to.deep.equal({
-            '@cratis/components': '>=3.0.0 <4',
+            '@cratis/components': '>=4 <5',
             '@primereact/core': '>=11 <12',
             '@primereact/ui': '>=11 <12',
             '@primeuix/themes': '>=3 <4',
diff --git a/Adapters/PrimeReact/package.json b/Adapters/PrimeReact/package.json
index 111f577a..5ac80220 100644
--- a/Adapters/PrimeReact/package.json
+++ b/Adapters/PrimeReact/package.json
@@ -102,7 +102,7 @@
         "ci": "yarn clean && yarn lint && yarn build && yarn typecheck-specs && yarn test && yarn verify-package"
     },
     "peerDependencies": {
-        "@cratis/components": ">=3.0.0 <4",
+        "@cratis/components": ">=4 <5",
         "@primereact/core": ">=11 <12",
         "@primereact/ui": ">=11 <12",
         "@primeuix/themes": ">=3 <4",
diff --git a/Adapters/PrimeReact/scripts/verify-packed-package.mjs b/Adapters/PrimeReact/scripts/verify-packed-package.mjs
index 77d0b869..b2d64f6c 100644
--- a/Adapters/PrimeReact/scripts/verify-packed-package.mjs
+++ b/Adapters/PrimeReact/scripts/verify-packed-package.mjs
@@ -117,7 +117,7 @@ try {
     );
 
     const expectedPeers = {
-        '@cratis/components': '>=3.0.0 <4',
+        '@cratis/components': '>=4 <5',
         '@primereact/core': '>=11 <12',
         '@primereact/ui': '>=11 <12',
         '@primeuix/themes': '>=3 <4',
diff --git a/Adapters/PrimeReact10/README.md b/Adapters/PrimeReact10/README.md
index 372c328d..b22a53b1 100644
--- a/Adapters/PrimeReact10/README.md
+++ b/Adapters/PrimeReact10/README.md
@@ -74,9 +74,8 @@ PrimeReact is a bounded peer and is never bundled. The exact repository proof us
 10.9.9 and React 19. PrimeReact 10 and 11 cannot satisfy one another's peer range and must not share
 one Storybook preview or application dependency resolution.
 
-The current `@cratis/components` peer `>=3.0.0 <4` is a temporary repository placeholder matching
-the unreleased V4 source package. **It must become the honest `>=4 <5` range before publication.**
-Publishing with the placeholder would misstate compatibility.
+The adapter requires `@cratis/components >=4 <5`. This range is intentionally bounded to the
+Components major whose renderer ABI and stable presentation profile it implements.
 
 See [CONFORMANCE.md](./CONFORMANCE.md) for bounded evidence and
 [THIRD_PARTY_NOTICES.md](./THIRD_PARTY_NOTICES.md) for upstream licensing.
diff --git a/Adapters/PrimeReact10/for_adapter/when_using_the_primereact10_presentation_profile.tsx b/Adapters/PrimeReact10/for_adapter/when_using_the_primereact10_presentation_profile.tsx
index eb0e020b..d900120f 100644
--- a/Adapters/PrimeReact10/for_adapter/when_using_the_primereact10_presentation_profile.tsx
+++ b/Adapters/PrimeReact10/for_adapter/when_using_the_primereact10_presentation_profile.tsx
@@ -252,7 +252,7 @@ describe('when using the PrimeReact 10 stable presentation profile', () => {
     it('should declare only bounded peer-hosted PrimeReact 10 vendors', () => {
         expect(packageJson).not.to.have.property('dependencies');
         expect(packageJson.peerDependencies).to.deep.equal({
-            '@cratis/components': '>=3.0.0 <4',
+            '@cratis/components': '>=4 <5',
             primereact: '>=10.9.9 <11',
             react: '^19.0.0',
             'react-dom': '^19.0.0',
diff --git a/Adapters/PrimeReact10/package.json b/Adapters/PrimeReact10/package.json
index 8f2456ec..9c8ffb39 100644
--- a/Adapters/PrimeReact10/package.json
+++ b/Adapters/PrimeReact10/package.json
@@ -99,7 +99,7 @@
         "ci": "yarn clean && yarn lint && yarn build && yarn verify-upstream-shim && yarn typecheck-specs && yarn test && yarn verify-isolation && yarn verify-package"
     },
     "peerDependencies": {
-        "@cratis/components": ">=3.0.0 <4",
+        "@cratis/components": ">=4 <5",
         "primereact": ">=10.9.9 <11",
         "react": "^19.0.0",
         "react-dom": "^19.0.0"
diff --git a/Adapters/PrimeReact10/scripts/verify-packed-package.mjs b/Adapters/PrimeReact10/scripts/verify-packed-package.mjs
index 4c5f2fca..2db5527e 100644
--- a/Adapters/PrimeReact10/scripts/verify-packed-package.mjs
+++ b/Adapters/PrimeReact10/scripts/verify-packed-package.mjs
@@ -117,7 +117,7 @@ try {
     );
 
     const expectedPeers = {
-        '@cratis/components': '>=3.0.0 <4',
+        '@cratis/components': '>=4 <5',
         primereact: '>=10.9.9 <11',
         react: '^19.0.0',
         'react-dom': '^19.0.0',
diff --git a/Codemods/package.json b/Codemods/package.json
index f22b5254..1dd921f4 100644
--- a/Codemods/package.json
+++ b/Codemods/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@cratis/components-codemods",
-    "version": "0.0.0",
+    "version": "4.0.0",
     "description": "Codemods for migrating @cratis/components consumers from Components 3 root namespaces to Components 4 subpath imports.",
     "author": "Cratis",
     "license": "MIT",
diff --git a/Conformance/package.json b/Conformance/package.json
index e02b55c1..d33c4425 100644
--- a/Conformance/package.json
+++ b/Conformance/package.json
@@ -46,7 +46,7 @@
         "axe-core": "^4.13.0"
     },
     "peerDependencies": {
-        "@cratis/components": ">=3.0.0 <4",
+        "@cratis/components": ">=4 <5",
         "react": "^19.0.0",
         "react-dom": "^19.0.0"
     },
diff --git a/ESLint/package.json b/ESLint/package.json
index e96678ae..c18a4314 100644
--- a/ESLint/package.json
+++ b/ESLint/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@cratis/eslint-plugin-components",
-    "version": "0.0.0",
+    "version": "4.0.0",
     "description": "Cratis Components ESLint rules: import from subpaths not the root barrel, use the Cratis dialog wrappers instead of primereact/dialog, require onBeforeExecute callbacks to return their values, keep React hooks out of view models, protect the repository-owned React-free kernel, and identify CommandForm fields by a tamper-resistant marker rather than a raw displayName string. Compose on top of @cratis/eslint-config.",
     "author": "Cratis",
     "license": "MIT",
diff --git a/Source/MIGRATION.md b/Source/MIGRATION.md
index 63898287..1b5cd3a1 100644
--- a/Source/MIGRATION.md
+++ b/Source/MIGRATION.md
@@ -25,10 +25,9 @@ Keep a Prime package only when your application still imports it directly. Migra
 
 Applications using Canvas or PivotViewer must install `pixi.js@^8.20.0`, now an optional peer rather than a nested Components dependency. Align any existing direct Pixi dependency to the same compatible resolution so public `PIXI.Container` and pointer-event types come from one package instance. Applications using only non-Pixi subpaths do not need it.
 
-The package declares an Arc peer range of `>=20.3.1 <23`. The adapter package manifests still use
-the temporary `@cratis/components >=3.0.0 <4` repository peer while the V4 source set is assembled;
-do not interpret that placeholder as release compatibility. The final `>=4 <5` peer sweep and
-package versioning happen together after the remaining release blockers close.
+The package declares an Arc peer range of `>=20.3.1 <23`. Conformance and all three renderer
+adapters declare the final `@cratis/components >=4 <5` peer range, so each remains bounded to the
+Components major whose renderer ABI and stable presentation profile it implements.
 
 ## Import from explicit subpaths
 
diff --git a/Source/package.json b/Source/package.json
index dafa0694..ef72b2b0 100644
--- a/Source/package.json
+++ b/Source/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@cratis/components",
-    "version": "3.0.0",
+    "version": "4.0.0",
     "description": "React components for CQRS and event-sourced apps — command dialogs, typed forms, and query-backed data tables for Cratis Arc",
     "keywords": [
         "react",
diff --git a/compat-manifest.json b/compat-manifest.json
index dc9b6e1c..838dbc7d 100644
--- a/compat-manifest.json
+++ b/compat-manifest.json
@@ -17,7 +17,7 @@
             "name": "@cratis/components",
             "manifest": "Source/package.json",
             "role": "core",
-            "version": "3.0.0",
+            "version": "4.0.0",
             "private": false,
             "packageAccess": "public",
             "peerDependencies": {
@@ -39,7 +39,7 @@
             "name": "@cratis/eslint-plugin-components",
             "manifest": "ESLint/package.json",
             "role": "eslint",
-            "version": "0.0.0",
+            "version": "4.0.0",
             "private": false,
             "packageAccess": "public",
             "peerDependencies": {
@@ -51,7 +51,7 @@
             "name": "@cratis/components-codemods",
             "manifest": "Codemods/package.json",
             "role": "codemods",
-            "version": "0.0.0",
+            "version": "4.0.0",
             "private": false,
             "packageAccess": "public",
             "peerDependencies": {},
@@ -65,7 +65,7 @@
             "private": false,
             "packageAccess": "public",
             "peerDependencies": {
-                "@cratis/components": ">=3.0.0 <4",
+                "@cratis/components": ">=4 <5",
                 "react": "^19.0.0",
                 "react-dom": "^19.0.0"
             },
@@ -80,7 +80,7 @@
             "private": false,
             "packageAccess": "public",
             "peerDependencies": {
-                "@cratis/components": ">=3.0.0 <4",
+                "@cratis/components": ">=4 <5",
                 "@emotion/react": ">=11 <12",
                 "@emotion/styled": ">=11 <12",
                 "@mui/material": ">=9 <10",
@@ -104,7 +104,7 @@
             "private": false,
             "packageAccess": "public",
             "peerDependencies": {
-                "@cratis/components": ">=3.0.0 <4",
+                "@cratis/components": ">=4 <5",
                 "@primereact/core": ">=11 <12",
                 "@primereact/ui": ">=11 <12",
                 "@primeuix/themes": ">=3 <4",
@@ -130,7 +130,7 @@
             "private": false,
             "packageAccess": "public",
             "peerDependencies": {
-                "@cratis/components": ">=3.0.0 <4",
+                "@cratis/components": ">=4 <5",
                 "primereact": ">=10.9.9 <11",
                 "react": "^19.0.0",
                 "react-dom": "^19.0.0"
@@ -153,11 +153,11 @@
         },
         {
             "id": "storybook",
-            "path": "Source/.storybook",
-            "purpose": "Private release-blocker evidence",
+            "path": "Storybook",
+            "purpose": "Private composed renderer evidence",
             "private": true,
             "published": false,
-            "releaseBlocker": true
+            "releaseBlocker": false
         }
     ]
 }
diff --git a/scripts/generate-compat-manifest.mjs b/scripts/generate-compat-manifest.mjs
index fba49a3d..5dc8e5d1 100644
--- a/scripts/generate-compat-manifest.mjs
+++ b/scripts/generate-compat-manifest.mjs
@@ -21,6 +21,15 @@ const expectedPackages = new Map([
     ['@cratis/components.primereact10', 'renderer-adapter'],
 ]);
 const packageOrder = [...expectedPackages.keys()];
+const expectedVersions = new Map([
+    ['@cratis/components', '4.0.0'],
+    ['@cratis/eslint-plugin-components', '4.0.0'],
+    ['@cratis/components-codemods', '4.0.0'],
+    ['@cratis/components.conformance', '0.1.0'],
+    ['@cratis/components.mui', '0.1.0'],
+    ['@cratis/components.primereact', '0.1.0'],
+    ['@cratis/components.primereact10', '0.1.0'],
+]);
 const rendererAbi = 1;
 const coreTarget = '4.x';
 
@@ -31,7 +40,9 @@ if (!['--check', '--write'].includes(mode)) {
 
 const rootPackage = readJson(path.join(repositoryDirectory, 'package.json'));
 const workspaceManifestPaths = discoverWorkspaceManifestPaths(rootPackage.workspaces);
-const packages = workspaceManifestPaths.map((manifestPath) => packageEntry(manifestPath));
+const packages = workspaceManifestPaths
+    .map((manifestPath) => packageEntry(manifestPath))
+    .filter((entry) => entry !== undefined);
 validatePackageSet(packages);
 
 packages.sort(
@@ -55,11 +66,11 @@ const manifest = {
         },
         {
             id: 'storybook',
-            path: 'Source/.storybook',
-            purpose: 'Private release-blocker evidence',
+            path: 'Storybook',
+            purpose: 'Private composed renderer evidence',
             private: true,
             published: false,
-            releaseBlocker: true,
+            releaseBlocker: false,
         },
     ],
 };
@@ -116,8 +127,9 @@ function discoverWorkspaceManifestPaths(workspaces) {
 function packageEntry(manifestPath) {
     const packageJson = readJson(path.join(repositoryDirectory, manifestPath));
     if (!expectedPackages.has(packageJson.name)) {
+        if (packageJson.private === true) return undefined;
         fail(
-            `Workspace ${manifestPath} declares unexpected package '${packageJson.name ?? '<unnamed>'}'.`,
+            `Workspace ${manifestPath} declares unexpected public package '${packageJson.name ?? '<unnamed>'}'.`,
         );
     }
 
@@ -169,6 +181,11 @@ function validateManifest(manifest) {
                 `${entry.name} must remain an explicitly public-intent package manifest.`,
             );
         }
+        if (entry.version !== expectedVersions.get(entry.name)) {
+            fail(
+                `${entry.name} must declare release version ${expectedVersions.get(entry.name)}; found ${entry.version}.`,
+            );
+        }
         if (
             entry.rendererAbi !== undefined &&
             entry.rendererAbi !== manifest.rendererAbi
@@ -186,12 +203,13 @@ function validateManifest(manifest) {
         }
     }
 
-    const adapters = manifest.packages.filter(
-        (entry) => entry.role === 'renderer-adapter',
+    const coreBoundPackages = manifest.packages.filter(
+        (entry) =>
+            entry.role === 'renderer-adapter' || entry.role === 'conformance',
     );
-    for (const adapter of adapters) {
-        if (adapter.version !== '0.1.0') {
-            fail(`${adapter.name} must remain at adapter version 0.1.0 in this tranche.`);
+    for (const entry of coreBoundPackages) {
+        if (entry.peerDependencies['@cratis/components'] !== '>=4 <5') {
+            fail(`${entry.name} must declare the final @cratis/components >=4 <5 peer range.`);
         }
     }
 
@@ -234,7 +252,13 @@ function sortObject(value) {
 }
 
 function readJson(filePath) {
-    return JSON.parse(fs.readFileSync(filePath, 'utf8'));
+    try {
+        return JSON.parse(fs.readFileSync(filePath, 'utf8'));
+    } catch (error) {
+        fail(
+            `Could not parse ${path.relative(repositoryDirectory, filePath)}: ${error instanceof Error ? error.message : String(error)}.`,
+        );
+    }
 }
 
 function fail(message) {
diff --git a/yarn.lock b/yarn.lock
index 575bc3cf..bd8c8291 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -312,7 +312,7 @@ __metadata:
     reflect-metadata: "npm:0.2.2"
     tsyringe: "npm:4.10.0"
   peerDependencies:
-    "@cratis/components": ">=3.0.0 <4"
+    "@cratis/components": ">=4 <5"
     react: ^19.0.0
     react-dom: ^19.0.0
   languageName: unknown
@@ -336,7 +336,7 @@ __metadata:
     reflect-metadata: "npm:0.2.2"
     tsyringe: "npm:4.10.0"
   peerDependencies:
-    "@cratis/components": ">=3.0.0 <4"
+    "@cratis/components": ">=4 <5"
     "@emotion/react": ">=11 <12"
     "@emotion/styled": ">=11 <12"
     "@mui/material": ">=9 <10"
@@ -361,7 +361,7 @@ __metadata:
     reflect-metadata: "npm:0.2.2"
     tsyringe: "npm:4.10.0"
   peerDependencies:
-    "@cratis/components": ">=3.0.0 <4"
+    "@cratis/components": ">=4 <5"
     primereact: ">=10.9.9 <11"
     react: ^19.0.0
     react-dom: ^19.0.0
@@ -387,7 +387,7 @@ __metadata:
     reflect-metadata: "npm:0.2.2"
     tsyringe: "npm:4.10.0"
   peerDependencies:
-    "@cratis/components": ">=3.0.0 <4"
+    "@cratis/components": ">=4 <5"
     "@primereact/core": ">=11 <12"
     "@primereact/ui": ">=11 <12"
     "@primeuix/themes": ">=3 <4"

From 341cdd36c65f1946af45dd744c7d4d2ace9c9e8e Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Fri, 28 Aug 2026 19:09:26 +0200
Subject: [PATCH 239/267] Use locally verified renderer documentation link

Point the package README at the repository-owned renderer sources until the documentation deployment includes the new route, while the local link gate continues to verify that source tree.
---
 .github/workflows/markdown-verification.yml | 4 ++--
 Source/README.md                            | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/markdown-verification.yml b/.github/workflows/markdown-verification.yml
index d24da94f..8f8fb2d5 100644
--- a/.github/workflows/markdown-verification.yml
+++ b/.github/workflows/markdown-verification.yml
@@ -96,5 +96,5 @@ jobs:
                   statusCodes: '{"429":"warn"}'
                   # Stable Cratis repository anchors repeatedly trigger GitHub's unauthenticated
                   # 429 limit; current-tree links are verified locally above, so skip only exact
-                  # organization guidance and immutable historical evidence anchors here.
-                  linksToSkip: '^http:\/\/(localhost|127\.0\.0\.1):\d+\/(arc|components|chronicle|event-modeling|build-a-full-app)(\/|$), ^https:\/\/www\.npmjs\.com\/, ^https:\/\/github\.com\/Cratis\/Components\/blob\/[0-9a-f]{40}\/Documentation\/, ^https:\/\/github\.com\/Cratis\/\.github\/blob\/main\/contributing\.md$'
+                  # current/immutable documentation paths and organization guidance here.
+                  linksToSkip: '^http:\/\/(localhost|127\.0\.0\.1):\d+\/(arc|components|chronicle|event-modeling|build-a-full-app)(\/|$), ^https:\/\/www\.npmjs\.com\/, ^https:\/\/github\.com\/Cratis\/Components\/blob\/[0-9a-f]{40}\/Documentation\/, ^https:\/\/github\.com\/Cratis\/Components\/tree\/main\/Documentation\/, ^https:\/\/github\.com\/Cratis\/\.github\/blob\/main\/contributing\.md$'
diff --git a/Source/README.md b/Source/README.md
index 547cb160..d5566315 100644
--- a/Source/README.md
+++ b/Source/README.md
@@ -10,7 +10,7 @@ contracts, stable parts, and design tokens. React Aria supplies selected
 interaction primitives internally; consumers do not import or style React Aria.
 
 - [Canonical Components documentation](https://cratis.io/components/)
-- [Renderer adapters and coexistence](https://cratis.io/components/renderers/)
+- [Renderer adapters and coexistence](https://github.com/Cratis/Components/tree/main/Documentation/renderers)
 - [Migration guide](./MIGRATION.md)
 - [Private security reporting](mailto:oss@cratis.io?subject=Security%3A)
 

From 63aa25d0b33eca2f14ec59d899d41a3d2d3af78b Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Fri, 28 Aug 2026 21:19:09 +0200
Subject: [PATCH 240/267] Reconcile Arc 22.5 compatibility evidence

---
 .github/workflows/javascript-build.yml        |  8 ++--
 Adapters/Mui/package.json                     |  4 +-
 Adapters/PrimeReact/package.json              |  4 +-
 .../PrimeReact/src/upstream-type-shim.d.ts    |  5 ++-
 Adapters/PrimeReact10/package.json            |  4 +-
 .../PrimeReact10/src/upstream-type-shim.d.ts  |  2 +-
 Conformance/package.json                      |  4 +-
 Source/README.md                              |  4 +-
 Source/package.json                           |  4 +-
 .../verify-public-types.exceptions.json       |  6 +--
 yarn.lock                                     | 41 +++++--------------
 11 files changed, 34 insertions(+), 52 deletions(-)

diff --git a/.github/workflows/javascript-build.yml b/.github/workflows/javascript-build.yml
index 70459978..cf822bd6 100644
--- a/.github/workflows/javascript-build.yml
+++ b/.github/workflows/javascript-build.yml
@@ -407,7 +407,7 @@ jobs:
         strategy:
             fail-fast: false
             matrix:
-                arc-version: ['20.3.1', '21.19.4', '22.3.0']
+                arc-version: ['20.3.1', '21.19.4', '22.5.0']
 
         steps:
             - name: Checkout code
@@ -520,7 +520,7 @@ jobs:
                   if [ "${{ matrix.pixi }}" = 'present' ]; then PIXI+=(pixi.js@8.20.0); fi
                   npm install --ignore-scripts --no-audit --no-fund \
                     /tmp/cratis-components.tgz \
-                    @cratis/arc@22.3.0 @cratis/arc.react@22.3.0 \
+                    @cratis/arc@22.5.0 @cratis/arc.react@22.5.0 \
                     @cratis/fundamentals@7.18.1 @types/react@19.2.18 \
                     react@19.2.8 react-dom@19.2.8 \
                     reflect-metadata@0.2.2 tsyringe@4.10.0 "${PIXI[@]}"
@@ -535,7 +535,7 @@ jobs:
                   if [ "${{ matrix.pixi }}" = 'present' ]; then PIXI+=(pixi.js@8.20.0); fi
                   pnpm add --ignore-scripts --strict-peer-dependencies \
                     /tmp/cratis-components.tgz \
-                    @cratis/arc@22.3.0 @cratis/arc.react@22.3.0 \
+                    @cratis/arc@22.5.0 @cratis/arc.react@22.5.0 \
                     @cratis/fundamentals@7.18.1 @types/react@19.2.18 \
                     react@19.2.8 react-dom@19.2.8 \
                     reflect-metadata@0.2.2 tsyringe@4.10.0 "${PIXI[@]}"
@@ -559,7 +559,7 @@ jobs:
                   if [ "${{ matrix.pixi }}" = 'present' ]; then PIXI+=(pixi.js@8.20.0); fi
                   yarn add \
                     /tmp/cratis-components.tgz \
-                    @cratis/arc@22.3.0 @cratis/arc.react@22.3.0 \
+                    @cratis/arc@22.5.0 @cratis/arc.react@22.5.0 \
                     @cratis/fundamentals@7.18.1 @types/react@19.2.18 \
                     react@19.2.8 react-dom@19.2.8 \
                     reflect-metadata@0.2.2 tsyringe@4.10.0 rxjs@7.8.2 "${PIXI[@]}"
diff --git a/Adapters/Mui/package.json b/Adapters/Mui/package.json
index 0a6b4ab1..395f30b9 100644
--- a/Adapters/Mui/package.json
+++ b/Adapters/Mui/package.json
@@ -107,8 +107,8 @@
         "react-dom": "^19.0.0"
     },
     "devDependencies": {
-        "@cratis/arc": "22.4.0",
-        "@cratis/arc.react": "22.4.0",
+        "@cratis/arc": "22.5.0",
+        "@cratis/arc.react": "22.5.0",
         "@cratis/components": "workspace:^",
         "@cratis/components.conformance": "workspace:^",
         "@cratis/fundamentals": "^7.10.3",
diff --git a/Adapters/PrimeReact/package.json b/Adapters/PrimeReact/package.json
index 5ac80220..a0ff6e44 100644
--- a/Adapters/PrimeReact/package.json
+++ b/Adapters/PrimeReact/package.json
@@ -111,8 +111,8 @@
         "react-dom": "^19.0.0"
     },
     "devDependencies": {
-        "@cratis/arc": "22.4.0",
-        "@cratis/arc.react": "22.4.0",
+        "@cratis/arc": "22.5.0",
+        "@cratis/arc.react": "22.5.0",
         "@cratis/components": "workspace:^",
         "@cratis/components.conformance": "workspace:^",
         "@cratis/fundamentals": "^7.10.3",
diff --git a/Adapters/PrimeReact/src/upstream-type-shim.d.ts b/Adapters/PrimeReact/src/upstream-type-shim.d.ts
index 85e6da7e..0b89259d 100644
--- a/Adapters/PrimeReact/src/upstream-type-shim.d.ts
+++ b/Adapters/PrimeReact/src/upstream-type-shim.d.ts
@@ -6,11 +6,12 @@ import type { ElementType, ReactElement } from 'react';
 
 /**
  * @internal Compile-only bridge for exact upstream declaration defects in PrimeReact 11.1.0 and
- * Arc React 22.4.0. The adapter's packed declaration never exposes these aliases.
+ * Arc React 22.5.0. The adapter's packed declaration never exposes these aliases.
  */
 declare global {
     type I_1 = ComponentInstance;
-    type P = unknown;
+    // Upstream uses P only inside keyof GlobalComponentProps; the property map preserves that key set.
+    type P = Record<PropertyKey, unknown>;
     type T_1 = ElementType;
 
     namespace JSX {
diff --git a/Adapters/PrimeReact10/package.json b/Adapters/PrimeReact10/package.json
index 9c8ffb39..77b9e02f 100644
--- a/Adapters/PrimeReact10/package.json
+++ b/Adapters/PrimeReact10/package.json
@@ -105,8 +105,8 @@
         "react-dom": "^19.0.0"
     },
     "devDependencies": {
-        "@cratis/arc": "22.4.0",
-        "@cratis/arc.react": "22.4.0",
+        "@cratis/arc": "22.5.0",
+        "@cratis/arc.react": "22.5.0",
         "@cratis/components": "workspace:^",
         "@cratis/components.conformance": "workspace:^",
         "@cratis/fundamentals": "^7.10.3",
diff --git a/Adapters/PrimeReact10/src/upstream-type-shim.d.ts b/Adapters/PrimeReact10/src/upstream-type-shim.d.ts
index b4eba3b8..f1c4c360 100644
--- a/Adapters/PrimeReact10/src/upstream-type-shim.d.ts
+++ b/Adapters/PrimeReact10/src/upstream-type-shim.d.ts
@@ -5,7 +5,7 @@ import type { ReactElement } from 'react';
 
 /**
  * @internal Compile-only bridge for PrimeReact 10.9.9 declarations that still name global JSX
- * under React 19 and for the exact Arc React 22.4.0 declaration. It is never emitted or packed.
+ * under React 19 and for the exact Arc React 22.5.0 declaration. It is never emitted or packed.
  */
 declare global {
     namespace JSX {
diff --git a/Conformance/package.json b/Conformance/package.json
index d33c4425..088f7af2 100644
--- a/Conformance/package.json
+++ b/Conformance/package.json
@@ -51,8 +51,8 @@
         "react-dom": "^19.0.0"
     },
     "devDependencies": {
-        "@cratis/arc": "22.4.0",
-        "@cratis/arc.react": "22.4.0",
+        "@cratis/arc": "22.5.0",
+        "@cratis/arc.react": "22.5.0",
         "@cratis/components": "workspace:^",
         "@cratis/fundamentals": "^7.10.3",
         "react": "^19.0.0",
diff --git a/Source/README.md b/Source/README.md
index d5566315..1fd8cdcf 100644
--- a/Source/README.md
+++ b/Source/README.md
@@ -32,7 +32,7 @@ The current package manifest declares these peer dependencies:
 Strict installers can declare them explicitly; keep both Arc packages on the same application version:
 
 ```bash
-ARC_VERSION=22.4.0
+ARC_VERSION=22.5.0
 npm install @cratis/components \
   "@cratis/arc@$ARC_VERSION" "@cratis/arc.react@$ARC_VERSION" \
   @cratis/fundamentals@^7.10.3 react@^19 react-dom@^19 \
@@ -41,7 +41,7 @@ npm install @cratis/components \
 
 The current manifest does not declare PrimeReact, PrimeIcons, or PrimeUI packages as dependencies or peers. Applications retaining direct dependencies keep their own package, provider, styling, and license boundaries.
 
-**Yarn PnP note:** the current `@cratis/arc.react@22.3.0` package imports `rxjs` without declaring it. Strict PnP consumers install `rxjs@7.8.2` and add a temporary `packageExtensions` entry for `@cratis/arc.react@22.3.0`; remove it when Arc publishes corrected metadata. The canonical [getting-started guide](https://cratis.io/components/getting-started/) contains the exact YAML.
+**Yarn PnP note:** the current `@cratis/arc.react@22.5.0` package imports `rxjs` without declaring it. Strict PnP consumers install `rxjs@7.8.2` and add a temporary `packageExtensions` entry for `@cratis/arc.react@22.5.0`; remove it when Arc publishes corrected metadata. The canonical [getting-started guide](https://cratis.io/components/getting-started/) contains the exact YAML.
 
 `pixi.js@^8.20.0` is an additional **optional** peer, required only by `Canvas` and `PivotViewer` (the Spatial capability profile — see [Import from explicit subpaths](#import-from-explicit-subpaths) below). Every other subpath needs nothing beyond the peers above:
 
diff --git a/Source/package.json b/Source/package.json
index b600be62..a5bb6859 100644
--- a/Source/package.json
+++ b/Source/package.json
@@ -265,7 +265,9 @@
     },
     "devDependencies": {
         "@cratis/arc.vite": "22.5.0",
-        "pixi.js": "^8.20.1"
+        "pixi.js": "^8.20.1",
+        "react": "19.2.8",
+        "react-dom": "19.2.8"
     },
     "peerDependencies": {
         "@cratis/arc": ">=20.3.1 <23",
diff --git a/Source/scripts/verify-public-types.exceptions.json b/Source/scripts/verify-public-types.exceptions.json
index d232f1a2..3d43dbd0 100644
--- a/Source/scripts/verify-public-types.exceptions.json
+++ b/Source/scripts/verify-public-types.exceptions.json
@@ -19,7 +19,7 @@
             "id": "arc-react-global-jsx-namespace",
             "summary": "@cratis/arc.react ships a global.d.ts that declares `namespace JSX` referencing test-only ambient types (vitest/globals, chai, sinon-chai) as part of its published package instead of scoping that augmentation to its own test build. A strict external consumer that does not also install those test packages cannot resolve the bare `JSX` identifiers arc.react's dialog/command declaration files reference.",
             "reason": "external - @cratis/arc.react's own shipped .d.ts, not a Components declaration; Components has no `namespace JSX` augmentation of its own.",
-            "upstreamPackages": [{ "name": "@cratis/arc.react", "version": "22.4.0" }],
+            "upstreamPackages": [{ "name": "@cratis/arc.react", "version": "22.5.0" }],
             "resolutionModes": ["bundler"],
             "diagnosticCodes": ["TS2503"],
             "filePrefixes": ["@cratis/arc.react/"],
@@ -30,8 +30,8 @@
             "summary": "@cratis/arc, @cratis/arc.react, and @cratis/fundamentals publish ESM declaration files with extensionless relative specifiers (e.g. `export * from './ICommandScope'`). Node16/NodeNext module resolution requires an explicit extension on relative ECMAScript imports, so these upstream barrels fail under --moduleResolution nodenext; downstream symbols that transit through the broken barrel then read as missing (TS2305/TS2694 cascades).",
             "reason": "external - the extensionless specifiers live in @cratis/arc, @cratis/arc.react, and @cratis/fundamentals's own published dist, not in Components' declarations. Cratis/Components' own declaration rewrite (this PR) already eliminated Components' extensionless specifiers.",
             "upstreamPackages": [
-                { "name": "@cratis/arc", "version": "22.4.0" },
-                { "name": "@cratis/arc.react", "version": "22.4.0" },
+                { "name": "@cratis/arc", "version": "22.5.0" },
+                { "name": "@cratis/arc.react", "version": "22.5.0" },
                 { "name": "@cratis/fundamentals", "version": "7.18.1" }
             ],
             "resolutionModes": ["nodenext"],
diff --git a/yarn.lock b/yarn.lock
index ef5f437e..fe3b8669 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -251,19 +251,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@cratis/arc.react@npm:22.4.0":
-  version: 22.4.0
-  resolution: "@cratis/arc.react@npm:22.4.0"
-  dependencies:
-    "@cratis/arc": "npm:22.4.0"
-    "@cratis/fundamentals": "npm:^7.18.0"
-    tsyringe: "npm:^4.10.0"
-  peerDependencies:
-    react: ^18.0.0 || ^19.0.0
-  checksum: 10/9551831c10213a289ef453ad8e50b0d0258600f0fdc7fc5606f44ab7bdea6d78db24a7870bfe0529f3049a0c6f8e1b1027e0cfd509f2de3479e4f211fb524399
-  languageName: node
-  linkType: hard
-
 "@cratis/arc.react@npm:22.5.0":
   version: 22.5.0
   resolution: "@cratis/arc.react@npm:22.5.0"
@@ -289,16 +276,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@cratis/arc@npm:22.4.0":
-  version: 22.4.0
-  resolution: "@cratis/arc@npm:22.4.0"
-  dependencies:
-    "@cratis/fundamentals": "npm:^7.18.0"
-    rxjs: "npm:^7.8.2"
-  checksum: 10/500d009e95c74ba16919a087b959eeebe05b77be5ea8f0ddf0aab8b1b65f3c6e3dba900da8eb11a847d6462955d983d747822556c32463f5746462320fc8901d
-  languageName: node
-  linkType: hard
-
 "@cratis/arc@npm:22.5.0":
   version: 22.5.0
   resolution: "@cratis/arc@npm:22.5.0"
@@ -325,8 +302,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@cratis/components.conformance@workspace:Conformance"
   dependencies:
-    "@cratis/arc": "npm:22.4.0"
-    "@cratis/arc.react": "npm:22.4.0"
+    "@cratis/arc": "npm:22.5.0"
+    "@cratis/arc.react": "npm:22.5.0"
     "@cratis/components": "workspace:^"
     "@cratis/fundamentals": "npm:^7.10.3"
     axe-core: "npm:^4.13.0"
@@ -345,8 +322,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@cratis/components.mui@workspace:Adapters/Mui"
   dependencies:
-    "@cratis/arc": "npm:22.4.0"
-    "@cratis/arc.react": "npm:22.4.0"
+    "@cratis/arc": "npm:22.5.0"
+    "@cratis/arc.react": "npm:22.5.0"
     "@cratis/components": "workspace:^"
     "@cratis/components.conformance": "workspace:^"
     "@cratis/fundamentals": "npm:^7.10.3"
@@ -372,8 +349,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@cratis/components.primereact10@workspace:Adapters/PrimeReact10"
   dependencies:
-    "@cratis/arc": "npm:22.4.0"
-    "@cratis/arc.react": "npm:22.4.0"
+    "@cratis/arc": "npm:22.5.0"
+    "@cratis/arc.react": "npm:22.5.0"
     "@cratis/components": "workspace:^"
     "@cratis/components.conformance": "workspace:^"
     "@cratis/fundamentals": "npm:^7.10.3"
@@ -395,8 +372,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@cratis/components.primereact@workspace:Adapters/PrimeReact"
   dependencies:
-    "@cratis/arc": "npm:22.4.0"
-    "@cratis/arc.react": "npm:22.4.0"
+    "@cratis/arc": "npm:22.5.0"
+    "@cratis/arc.react": "npm:22.5.0"
     "@cratis/components": "workspace:^"
     "@cratis/components.conformance": "workspace:^"
     "@cratis/fundamentals": "npm:^7.10.3"
@@ -439,8 +416,10 @@ __metadata:
     allotment: "npm:1.20.5"
     framer-motion: "npm:13.1.1"
     pixi.js: "npm:^8.20.1"
+    react: "npm:19.2.8"
     react-aria: "npm:3.51.0"
     react-aria-components: "npm:1.20.0"
+    react-dom: "npm:19.2.8"
     react-icons: "npm:5.7.0"
     ts-deepmerge: "npm:8.0.0"
   peerDependencies:

From 7aa74b73a7a184bf29d559f700cfed97951b84ce Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Fri, 28 Aug 2026 21:29:19 +0200
Subject: [PATCH 241/267] pi-agent: Add adapter boundary matrix

---
 .github/workflows/javascript-build.yml        |  89 +-----
 Adapters/Mui/README.md                        |   6 +-
 ...hen_using_the_mui_presentation_profile.tsx |   4 +-
 Adapters/Mui/package.json                     |   8 +-
 .../Mui/scripts/verify-packed-package.mjs     |   4 +-
 README.md                                     |   3 +-
 package.json                                  |   3 +
 scripts/lib/renderer-adapter-matrix.mjs       | 179 +++++++++++
 scripts/renderer-adapter-matrix.json          |  93 ++++++
 scripts/renderer-adapter-matrix.md            |  45 +++
 .../verify-renderer-adapter-matrix.test.mjs   |  58 ++++
 scripts/verify-renderer-adapters.mjs          | 292 ++++++++++++++++++
 yarn.lock                                     |  21 +-
 13 files changed, 708 insertions(+), 97 deletions(-)
 create mode 100644 scripts/lib/renderer-adapter-matrix.mjs
 create mode 100644 scripts/renderer-adapter-matrix.json
 create mode 100644 scripts/renderer-adapter-matrix.md
 create mode 100644 scripts/verify-renderer-adapter-matrix.test.mjs
 create mode 100644 scripts/verify-renderer-adapters.mjs

diff --git a/.github/workflows/javascript-build.yml b/.github/workflows/javascript-build.yml
index cf822bd6..e3dbd477 100644
--- a/.github/workflows/javascript-build.yml
+++ b/.github/workflows/javascript-build.yml
@@ -565,12 +565,15 @@ jobs:
                     reflect-metadata@0.2.2 tsyringe@4.10.0 rxjs@7.8.2 "${PIXI[@]}"
                   yarn node verify.mjs "${{ matrix.pixi }}"
 
-    verify-primereact10-package-managers:
+    verify-renderer-adapters:
+        name: Renderer adapter (${{ matrix.adapter }}, ${{ matrix.boundary }}, ${{ matrix.manager }})
         runs-on: ubuntu-latest
-        timeout-minutes: 20
+        timeout-minutes: 25
         strategy:
             fail-fast: false
             matrix:
+                adapter: [mui, primereact11, primereact10]
+                boundary: [minimum, current]
                 manager: [npm, pnpm, yarn-pnp]
 
         steps:
@@ -589,78 +592,12 @@ jobs:
             - name: Yarn install
               run: yarn install --immutable
 
-            - name: Build and pack Core and PrimeReact 10 adapter
-              run: |
-                  yarn workspace @cratis/components prepare
-                  yarn workspace @cratis/components.conformance build
-                  yarn workspace @cratis/components.primereact10 ci
-                  yarn workspace @cratis/components pack --out /tmp/cratis-components.tgz
-                  yarn workspace @cratis/components.primereact10 pack \
-                    --out /tmp/cratis-components-primereact10.tgz
-
-            - name: Create renderer consumer fixture
-              run: |
-                  mkdir /tmp/primereact10-consumer
-                  cat > /tmp/primereact10-consumer/package.json <<'JSON'
-                  {"private":true,"type":"module"}
-                  JSON
-                  cat > /tmp/primereact10-consumer/verify.mjs <<'JS'
-                  const api = await import('@cratis/components.primereact10');
-                  if (Object.keys(api).join(',') !== 'primeReact10UiLibrary') {
-                      throw new Error('PrimeReact 10 adapter exposes an unexpected public value.');
-                  }
-                  if (api.primeReact10UiLibrary.id !== 'cratis-primereact10') {
-                      throw new Error('PrimeReact 10 adapter loaded the wrong renderer manifest.');
-                  }
-                  JS
-
-            - name: Verify npm renderer consumer
-              if: matrix.manager == 'npm'
-              working-directory: /tmp/primereact10-consumer
-              run: |
-                  npm install --ignore-scripts --no-audit --no-fund \
-                    /tmp/cratis-components.tgz \
-                    /tmp/cratis-components-primereact10.tgz \
-                    primereact@10.9.9 \
-                    @cratis/arc@22.4.0 @cratis/arc.react@22.4.0 \
-                    @cratis/fundamentals@7.18.1 @types/react@19.2.18 \
-                    react@19.2.8 react-dom@19.2.8 \
-                    reflect-metadata@0.2.2 tsyringe@4.10.0
-                  node verify.mjs
+            - name: Test renderer adapter matrix validation
+              run: yarn test-renderer-adapter-matrix
 
-            - name: Verify pnpm renderer consumer
-              if: matrix.manager == 'pnpm'
-              working-directory: /tmp/primereact10-consumer
-              run: |
-                  corepack prepare pnpm@10.17.1 --activate
-                  pnpm add --ignore-scripts --strict-peer-dependencies \
-                    /tmp/cratis-components.tgz \
-                    /tmp/cratis-components-primereact10.tgz \
-                    primereact@10.9.9 \
-                    @cratis/arc@22.4.0 @cratis/arc.react@22.4.0 \
-                    @cratis/fundamentals@7.18.1 @types/react@19.2.18 \
-                    react@19.2.8 react-dom@19.2.8 \
-                    reflect-metadata@0.2.2 tsyringe@4.10.0
-                  pnpm exec node verify.mjs
-
-            - name: Verify Yarn PnP renderer consumer
-              if: matrix.manager == 'yarn-pnp'
-              working-directory: /tmp/primereact10-consumer
-              run: |
-                  corepack prepare yarn@4.5.3 --activate
-                  cat > .yarnrc.yml <<'YAML'
-                  nodeLinker: pnp
-                  packageExtensions:
-                    "@cratis/arc.react@*":
-                      dependencies:
-                        rxjs: "*"
-                  YAML
-                  yarn add \
-                    /tmp/cratis-components.tgz \
-                    /tmp/cratis-components-primereact10.tgz \
-                    primereact@10.9.9 \
-                    @cratis/arc@22.4.0 @cratis/arc.react@22.4.0 \
-                    @cratis/fundamentals@7.18.1 @types/react@19.2.18 \
-                    react@19.2.8 react-dom@19.2.8 \
-                    reflect-metadata@0.2.2 tsyringe@4.10.0 rxjs@7.8.2
-                  yarn node verify.mjs
+            - name: Verify packed ${{ matrix.adapter }} ${{ matrix.boundary }} boundary with ${{ matrix.manager }}
+              run: >-
+                  yarn verify-renderer-adapters
+                  --adapter ${{ matrix.adapter }}
+                  --boundary ${{ matrix.boundary }}
+                  --manager ${{ matrix.manager }}
diff --git a/Adapters/Mui/README.md b/Adapters/Mui/README.md
index 5c64b56d..b3c7a837 100644
--- a/Adapters/Mui/README.md
+++ b/Adapters/Mui/README.md
@@ -56,8 +56,10 @@ concerns and do not justify a Core ABI change.
 
 ## Peer policy
 
-MUI Core is bounded to `>=9 <10`, Emotion to `>=11 <12`, and React/ReactDOM to React 19. Vendor
-packages are peers; exact current versions are dev dependencies only for repository proof.
+MUI Core is bounded to `>=9 <10`, `@emotion/react` to `>=11.5 <12`,
+`@emotion/styled` to `>=11.3 <12`, and React/ReactDOM to React 19. Vendor packages are peers.
+The repository's packed-consumer matrix proves both these effective lower boundaries and the
+current-highest compatible boundary; exact current versions remain dev dependencies only.
 
 The adapter requires `@cratis/components >=4 <5`. This range is intentionally bounded to the
 Components major whose renderer ABI and stable presentation profile it implements.
diff --git a/Adapters/Mui/for_adapter/when_using_the_mui_presentation_profile.tsx b/Adapters/Mui/for_adapter/when_using_the_mui_presentation_profile.tsx
index e3089410..8b98f04c 100644
--- a/Adapters/Mui/for_adapter/when_using_the_mui_presentation_profile.tsx
+++ b/Adapters/Mui/for_adapter/when_using_the_mui_presentation_profile.tsx
@@ -207,8 +207,8 @@ describe('when using the MUI stable presentation profile', () => {
         expect(packageJson).not.to.have.property('dependencies');
         expect(packageJson.peerDependencies).to.include({
             '@mui/material': '>=9 <10',
-            '@emotion/react': '>=11 <12',
-            '@emotion/styled': '>=11 <12',
+            '@emotion/react': '>=11.5 <12',
+            '@emotion/styled': '>=11.3 <12',
             react: '^19.0.0',
             'react-dom': '^19.0.0',
             '@cratis/components': '>=4 <5',
diff --git a/Adapters/Mui/package.json b/Adapters/Mui/package.json
index 395f30b9..f6d96240 100644
--- a/Adapters/Mui/package.json
+++ b/Adapters/Mui/package.json
@@ -83,8 +83,8 @@
         },
         "upstream": {
             "@mui/material": ">=9 <10",
-            "@emotion/react": ">=11 <12",
-            "@emotion/styled": ">=11 <12",
+            "@emotion/react": ">=11.5 <12",
+            "@emotion/styled": ">=11.3 <12",
             "react": "^19.0.0",
             "react-dom": "^19.0.0"
         }
@@ -100,8 +100,8 @@
     },
     "peerDependencies": {
         "@cratis/components": ">=4 <5",
-        "@emotion/react": ">=11 <12",
-        "@emotion/styled": ">=11 <12",
+        "@emotion/react": ">=11.5 <12",
+        "@emotion/styled": ">=11.3 <12",
         "@mui/material": ">=9 <10",
         "react": "^19.0.0",
         "react-dom": "^19.0.0"
diff --git a/Adapters/Mui/scripts/verify-packed-package.mjs b/Adapters/Mui/scripts/verify-packed-package.mjs
index 2f16a971..0707f188 100644
--- a/Adapters/Mui/scripts/verify-packed-package.mjs
+++ b/Adapters/Mui/scripts/verify-packed-package.mjs
@@ -118,8 +118,8 @@ try {
 
     const expectedPeers = {
         '@cratis/components': '>=4 <5',
-        '@emotion/react': '>=11 <12',
-        '@emotion/styled': '>=11 <12',
+        '@emotion/react': '>=11.5 <12',
+        '@emotion/styled': '>=11.3 <12',
         '@mui/material': '>=9 <10',
         react: '^19.0.0',
         'react-dom': '^19.0.0',
diff --git a/README.md b/README.md
index 6f195975..9d549d11 100644
--- a/README.md
+++ b/README.md
@@ -151,7 +151,8 @@ npx linkinator README.md Source/README.md --markdown --recurse
 
 Source changes follow the repository's framework rules and the applicable build,
 type, specification, export, package-archive, accessibility-diagnostic, and
-Storybook gates.
+Storybook gates. Renderer adapter contributors must also run the
+[packed lower/current package-manager matrix](./scripts/renderer-adapter-matrix.md).
 
 ## Community and repository
 
diff --git a/package.json b/package.json
index f8f19870..a45370b7 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,8 @@
         "test": "node ./run-task-on-workspaces.js test",
         "generate-compat-manifest": "node ./scripts/generate-compat-manifest.mjs --write",
         "verify-compat-manifest": "node ./scripts/generate-compat-manifest.mjs --check",
+        "test-renderer-adapter-matrix": "node --test ./scripts/verify-renderer-adapter-matrix.test.mjs",
+        "verify-renderer-adapters": "node ./scripts/verify-renderer-adapters.mjs",
         "ci": "yarn verify-compat-manifest && node ./run-task-on-workspaces.js ci",
         "publish-version": "node ./run-task-on-workspaces.js publish-version $*",
         "up": "node ./run-task-on-workspaces.js up"
@@ -95,6 +97,7 @@
         "reflect-metadata": "0.2.2",
         "rollup": "^4.63.1",
         "rollup-plugin-peer-deps-external": "^2.2.4",
+        "semver": "7.8.5",
         "sinon": "^22.1.0",
         "sinon-chai": "^4.0.1",
         "storybook": "^10.5.10",
diff --git a/scripts/lib/renderer-adapter-matrix.mjs b/scripts/lib/renderer-adapter-matrix.mjs
new file mode 100644
index 00000000..3ad42455
--- /dev/null
+++ b/scripts/lib/renderer-adapter-matrix.mjs
@@ -0,0 +1,179 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { readFileSync } from 'node:fs';
+import semver from 'semver';
+
+const boundaryNames = ['minimum', 'current'];
+
+export const readJson = (path) => JSON.parse(readFileSync(path, 'utf8'));
+
+export const createFixture = (matrix, adapterKey, boundary) => {
+    const adapter = matrix.adapters?.[adapterKey];
+    if (!adapter) throw new Error(`Unknown renderer adapter '${adapterKey}'.`);
+    if (!boundaryNames.includes(boundary)) {
+        throw new Error(`Unknown renderer boundary '${boundary}'.`);
+    }
+
+    return {
+        adapterKey,
+        boundary,
+        adapter,
+        peers: {
+            ...matrix.sharedPeers,
+            ...matrix.boundaryPeers[boundary],
+            ...adapter.boundaries[boundary],
+        },
+    };
+};
+
+const assertExactVersions = (versions, context) => {
+    for (const [name, version] of Object.entries(versions)) {
+        if (semver.valid(version) !== version) {
+            throw new Error(`${context} pins ${name} to non-exact version '${version}'.`);
+        }
+    }
+};
+
+const assertSatisfies = (name, version, range, context) => {
+    if (!semver.satisfies(version, range)) {
+        throw new Error(
+            `${context} pins ${name}@${version} outside declared peer range '${range}'.`,
+        );
+    }
+};
+
+const validateManifestClaims = (manifest, fixture, coreManifest) => {
+    const context = `${fixture.adapterKey}/${fixture.boundary}`;
+    const candidateVersions = {
+        ...fixture.peers,
+        [coreManifest.name]: coreManifest.version,
+    };
+
+    if (manifest.name !== fixture.adapter.workspace) {
+        throw new Error(
+            `${context} targets ${fixture.adapter.workspace}, but its manifest is ${manifest.name}.`,
+        );
+    }
+
+    for (const [name, range] of Object.entries(manifest.peerDependencies ?? {})) {
+        const version = candidateVersions[name];
+        if (!version)
+            throw new Error(`${context} does not pin required adapter peer '${name}'.`);
+        assertSatisfies(name, version, range, context);
+
+        if (name !== coreManifest.name && manifest.cratis?.upstream?.[name] !== range) {
+            throw new Error(
+                `${manifest.name} upstream claim for ${name} must exactly match peer range '${range}'.`,
+            );
+        }
+    }
+
+    for (const name of Object.keys(manifest.cratis?.upstream ?? {})) {
+        if (!(name in (manifest.peerDependencies ?? {}))) {
+            throw new Error(
+                `${manifest.name} upstream claim '${name}' is not a declared peer.`,
+            );
+        }
+    }
+};
+
+const validateCorePeers = (coreManifest, fixture) => {
+    const optionalPeers = coreManifest.peerDependenciesMeta ?? {};
+    for (const [name, range] of Object.entries(coreManifest.peerDependencies ?? {})) {
+        if (optionalPeers[name]?.optional) continue;
+        const version = fixture.peers[name];
+        if (!version) {
+            throw new Error(
+                `${fixture.adapterKey}/${fixture.boundary} does not pin required Core peer '${name}'.`,
+            );
+        }
+        assertSatisfies(
+            name,
+            version,
+            range,
+            `${fixture.adapterKey}/${fixture.boundary}`,
+        );
+    }
+};
+
+const validateMinimumBoundary = (manifest, fixture) => {
+    for (const [name, range] of Object.entries(manifest.peerDependencies ?? {})) {
+        if (name === '@cratis/components') continue;
+        const declaredMinimum = semver.minVersion(range)?.version;
+        const pinnedMinimum = fixture.peers[name];
+        if (declaredMinimum !== pinnedMinimum) {
+            throw new Error(
+                `${fixture.adapterKey}/minimum must pin ${name} to declared floor ${declaredMinimum}, not ${pinnedMinimum}.`,
+            );
+        }
+    }
+};
+
+const validateAlignedPackages = (fixture) => {
+    const alignedPackages = fixture.adapter.alignedPackages ?? [];
+    if (alignedPackages.length === 0) return;
+    const versions = new Set(alignedPackages.map((name) => fixture.peers[name]));
+    if (versions.size !== 1 || versions.has(undefined)) {
+        throw new Error(
+            `${fixture.adapterKey}/${fixture.boundary} must keep ${alignedPackages.join(', ')} aligned.`,
+        );
+    }
+};
+
+export const validateMatrix = (matrix, manifests) => {
+    if (matrix.schemaVersion !== 1)
+        throw new Error('Unsupported renderer adapter matrix schema.');
+    const coreManifest = manifests['@cratis/components'];
+    if (!coreManifest)
+        throw new Error('The Core package manifest is required for matrix validation.');
+
+    assertExactVersions(matrix.sharedPeers, 'shared peers');
+    for (const boundary of boundaryNames) {
+        assertExactVersions(
+            matrix.boundaryPeers?.[boundary] ?? {},
+            `${boundary} boundary peers`,
+        );
+    }
+
+    for (const [adapterKey, adapter] of Object.entries(matrix.adapters ?? {})) {
+        const manifest = manifests[adapter.workspace];
+        if (!manifest) throw new Error(`Manifest for ${adapter.workspace} is required.`);
+
+        for (const boundary of boundaryNames) {
+            assertExactVersions(
+                adapter.boundaries?.[boundary] ?? {},
+                `${adapterKey}/${boundary}`,
+            );
+            const fixture = createFixture(matrix, adapterKey, boundary);
+            validateAlignedPackages(fixture);
+            validateManifestClaims(manifest, fixture, coreManifest);
+            validateCorePeers(coreManifest, fixture);
+            if (boundary === 'minimum') validateMinimumBoundary(manifest, fixture);
+        }
+    }
+
+    for (const omission of matrix.confirmedYarnPnpManifestOmissions ?? []) {
+        if (omission.adapter && !matrix.adapters[omission.adapter]) {
+            throw new Error(`PnP omission names unknown adapter '${omission.adapter}'.`);
+        }
+    }
+};
+
+export const yarnPackageExtensions = (matrix, fixture) => {
+    const extensions = {};
+    for (const omission of matrix.confirmedYarnPnpManifestOmissions ?? []) {
+        if (omission.adapter && omission.adapter !== fixture.adapterKey) continue;
+        const packageVersion = fixture.peers[omission.package];
+        const dependencyVersion = fixture.peers[omission.dependency];
+        if (!packageVersion || !dependencyVersion) {
+            throw new Error(
+                `PnP omission ${omission.package} -> ${omission.dependency} is not pinned by ${fixture.adapterKey}/${fixture.boundary}.`,
+            );
+        }
+        extensions[`${omission.package}@${packageVersion}`] = {
+            dependencies: { [omission.dependency]: dependencyVersion },
+        };
+    }
+    return extensions;
+};
diff --git a/scripts/renderer-adapter-matrix.json b/scripts/renderer-adapter-matrix.json
new file mode 100644
index 00000000..7997c651
--- /dev/null
+++ b/scripts/renderer-adapter-matrix.json
@@ -0,0 +1,93 @@
+{
+    "schemaVersion": 1,
+    "packageManagers": {
+        "pnpm": "10.17.1",
+        "yarn": "4.5.3"
+    },
+    "sharedPeers": {
+        "@cratis/arc": "22.5.0",
+        "@cratis/arc.react": "22.5.0",
+        "@cratis/fundamentals": "7.18.1",
+        "reflect-metadata": "0.2.2",
+        "rxjs": "7.8.2",
+        "tsyringe": "4.10.0"
+    },
+    "boundaryPeers": {
+        "minimum": {
+            "@types/react": "19.0.0",
+            "react": "19.0.0",
+            "react-dom": "19.0.0"
+        },
+        "current": {
+            "@types/react": "19.2.18",
+            "react": "19.2.8",
+            "react-dom": "19.2.8"
+        }
+    },
+    "confirmedYarnPnpManifestOmissions": [
+        {
+            "package": "@cratis/arc.react",
+            "dependency": "rxjs"
+        },
+        {
+            "adapter": "primereact11",
+            "package": "@primereact/ui",
+            "dependency": "@primereact/core"
+        }
+    ],
+    "adapters": {
+        "mui": {
+            "workspace": "@cratis/components.mui",
+            "directory": "Adapters/Mui",
+            "manifestExport": "muiUiLibrary",
+            "rendererId": "cratis-mui",
+            "boundaries": {
+                "minimum": {
+                    "@emotion/react": "11.5.0",
+                    "@emotion/styled": "11.3.0",
+                    "@mui/material": "9.0.0"
+                },
+                "current": {
+                    "@emotion/react": "11.14.0",
+                    "@emotion/styled": "11.14.1",
+                    "@mui/material": "9.4.0"
+                }
+            }
+        },
+        "primereact11": {
+            "workspace": "@cratis/components.primereact",
+            "directory": "Adapters/PrimeReact",
+            "manifestExport": "primeReactUiLibrary",
+            "rendererId": "cratis-primereact",
+            "alignedPackages": ["@primereact/core", "@primereact/ui", "primereact"],
+            "boundaries": {
+                "minimum": {
+                    "@primereact/core": "11.0.0",
+                    "@primereact/ui": "11.0.0",
+                    "@primeuix/themes": "3.0.0",
+                    "primereact": "11.0.0"
+                },
+                "current": {
+                    "@primereact/core": "11.1.0",
+                    "@primereact/ui": "11.1.0",
+                    "@primeuix/themes": "3.0.0",
+                    "primereact": "11.1.0"
+                }
+            }
+        },
+        "primereact10": {
+            "workspace": "@cratis/components.primereact10",
+            "directory": "Adapters/PrimeReact10",
+            "manifestExport": "primeReact10UiLibrary",
+            "rendererId": "cratis-primereact10",
+            "boundaries": {
+                "minimum": {
+                    "primereact": "10.9.9"
+                },
+                "current": {
+                    "primereact": "10.9.9"
+                }
+            }
+        }
+    }
+}
diff --git a/scripts/renderer-adapter-matrix.md b/scripts/renderer-adapter-matrix.md
new file mode 100644
index 00000000..681edb95
--- /dev/null
+++ b/scripts/renderer-adapter-matrix.md
@@ -0,0 +1,45 @@
+<!-- Copyright (c) Cratis. All rights reserved. -->
+<!-- Licensed under the MIT license. See LICENSE file in the project root for full license information. -->
+
+# Packed renderer adapter boundary matrix
+
+[`renderer-adapter-matrix.json`](./renderer-adapter-matrix.json) is the single checked-in source for
+the supported lower and current-highest packed-consumer fixtures. It keeps Material UI,
+PrimeReact 11, and PrimeReact 10 separate and records exact versions for every fixture peer.
+Adapter package versions are deliberately absent: the verifier reads package names and versions
+from the archives it builds.
+
+Run the matrix's validation self-tests before a packed case:
+
+```sh
+yarn test-renderer-adapter-matrix
+```
+
+Run one package-manager case locally with:
+
+```sh
+yarn verify-renderer-adapters --adapter mui --boundary minimum --manager npm
+```
+
+Valid adapters are `mui`, `primereact11`, and `primereact10`; boundaries are `minimum` and
+`current`; managers are `npm`, `pnpm`, and `yarn-pnp`. Use `all` for any dimension only when the
+longer local run is intentional.
+
+Each case validates the entire matrix against the source manifests before building. It then builds
+and packs Core and one adapter, validates the packed manifests again, installs only those tarballs
+and exact fixture peers in a fresh temporary consumer, imports the adapter's only public manifest,
+and checks every resolved renderer upstream version. npm uses strict peer dependency resolution,
+pnpm uses `--strict-peer-dependencies`, and Yarn uses Plug'n'Play rather than `node_modules`.
+
+## Narrow Yarn PnP corrections
+
+The matrix records only two confirmed upstream manifest omissions:
+
+- `@cratis/arc.react@22.5.0` imports `rxjs` without declaring it; and
+- each exact tested `@primereact/ui` 11 package uses the aligned `@primereact/core` package without
+  declaring that direct dependency.
+
+The verifier derives exact `packageExtensions` selectors and dependency versions from the selected
+fixture. These extensions add missing dependency edges only. They do not widen or replace any peer
+range. Any new exception must first be reproduced under Yarn PnP and documented here and in the
+single matrix source.
diff --git a/scripts/verify-renderer-adapter-matrix.test.mjs b/scripts/verify-renderer-adapter-matrix.test.mjs
new file mode 100644
index 00000000..e768ed9f
--- /dev/null
+++ b/scripts/verify-renderer-adapter-matrix.test.mjs
@@ -0,0 +1,58 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import assert from 'node:assert/strict';
+import { test } from 'node:test';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { readJson, validateMatrix } from './lib/renderer-adapter-matrix.mjs';
+
+const repositoryDirectory = path.resolve(
+    path.dirname(fileURLToPath(import.meta.url)),
+    '..',
+);
+const matrixPath = path.join(repositoryDirectory, 'scripts/renderer-adapter-matrix.json');
+
+const loadInputs = () => {
+    const matrix = readJson(matrixPath);
+    const manifests = {};
+    for (const manifestPath of [
+        'Source/package.json',
+        ...Object.values(matrix.adapters).map(
+            (adapter) => `${adapter.directory}/package.json`,
+        ),
+    ]) {
+        const manifest = readJson(path.join(repositoryDirectory, manifestPath));
+        manifests[manifest.name] = manifest;
+    }
+    return { matrix, manifests };
+};
+
+const clone = (value) => structuredClone(value);
+
+test('the checked-in renderer adapter matrix is valid', () => {
+    const { matrix, manifests } = loadInputs();
+    assert.doesNotThrow(() => validateMatrix(matrix, manifests));
+});
+
+test('an exact boundary version outside the adapter peer range fails before installation', () => {
+    const { matrix, manifests } = loadInputs();
+    const invalid = clone(matrix);
+    invalid.adapters.mui.boundaries.current['@mui/material'] = '10.0.0';
+
+    assert.throws(
+        () => validateMatrix(invalid, manifests),
+        /mui\/current pins @mui\/material@10\.0\.0 outside declared peer range/,
+    );
+});
+
+test('a skewed PrimeReact 11 boundary fails before installation', () => {
+    const { matrix, manifests } = loadInputs();
+    const invalid = clone(matrix);
+    invalid.adapters.primereact11.boundaries.minimum['@primereact/ui'] = '11.1.0';
+
+    assert.throws(
+        () => validateMatrix(invalid, manifests),
+        /primereact11\/minimum must keep @primereact\/core, @primereact\/ui, primereact aligned/,
+    );
+});
diff --git a/scripts/verify-renderer-adapters.mjs b/scripts/verify-renderer-adapters.mjs
new file mode 100644
index 00000000..e9794b88
--- /dev/null
+++ b/scripts/verify-renderer-adapters.mjs
@@ -0,0 +1,292 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { spawnSync } from 'node:child_process';
+import { mkdtempSync, mkdirSync, readFileSync, rmSync, writeFileSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import {
+    createFixture,
+    readJson,
+    validateMatrix,
+    yarnPackageExtensions,
+} from './lib/renderer-adapter-matrix.mjs';
+
+const repositoryDirectory = path.resolve(
+    path.dirname(fileURLToPath(import.meta.url)),
+    '..',
+);
+const matrixPath = path.join(repositoryDirectory, 'scripts/renderer-adapter-matrix.json');
+const matrix = readJson(matrixPath);
+const managers = ['npm', 'pnpm', 'yarn-pnp'];
+const boundaries = ['minimum', 'current'];
+
+const parseArguments = (argv) => {
+    const options = {};
+    for (let index = 0; index < argv.length; index += 1) {
+        const argument = argv[index];
+        if (!argument.startsWith('--'))
+            throw new Error(`Unexpected argument '${argument}'.`);
+        const name = argument.slice(2);
+        const value = argv[index + 1];
+        if (!value || value.startsWith('--'))
+            throw new Error(`Missing value for --${name}.`);
+        options[name] = value;
+        index += 1;
+    }
+    return options;
+};
+
+const sourceManifests = () => {
+    const manifests = {};
+    const core = readJson(path.join(repositoryDirectory, 'Source/package.json'));
+    manifests[core.name] = core;
+    for (const adapter of Object.values(matrix.adapters)) {
+        const manifest = readJson(
+            path.join(repositoryDirectory, adapter.directory, 'package.json'),
+        );
+        manifests[manifest.name] = manifest;
+    }
+    return manifests;
+};
+
+const run = (command, args, cwd = repositoryDirectory, capture = false) => {
+    const result = spawnSync(command, args, {
+        cwd,
+        encoding: capture ? 'utf8' : undefined,
+        stdio: capture ? 'pipe' : 'inherit',
+        maxBuffer: 16 * 1024 * 1024,
+    });
+    if (capture) {
+        if (result.stdout) process.stdout.write(result.stdout);
+        if (result.stderr) process.stderr.write(result.stderr);
+    }
+    if (result.error) throw result.error;
+    if (result.status !== 0) {
+        throw new Error(
+            `${command} ${args.join(' ')} failed with exit code ${result.status}.`,
+        );
+    }
+    return capture ? `${result.stdout ?? ''}\n${result.stderr ?? ''}` : '';
+};
+
+const unpackManifest = (archive, destination) => {
+    mkdirSync(destination);
+    run('tar', ['-xzf', archive, '-C', destination]);
+    return readJson(path.join(destination, 'package/package.json'));
+};
+
+const quoteYaml = (value) => JSON.stringify(value);
+
+const writeYarnConfiguration = (consumerDirectory, extensions) => {
+    const lines = [
+        'nodeLinker: pnp',
+        '# Narrow corrections for confirmed upstream manifests; no peer range is relaxed.',
+        'packageExtensions:',
+    ];
+    for (const [selector, extension] of Object.entries(extensions)) {
+        lines.push(`  ${quoteYaml(selector)}:`, '    dependencies:');
+        for (const [name, version] of Object.entries(extension.dependencies)) {
+            lines.push(`      ${quoteYaml(name)}: ${quoteYaml(version)}`);
+        }
+    }
+    writeFileSync(path.join(consumerDirectory, '.yarnrc.yml'), `${lines.join('\n')}\n`);
+};
+
+const writeProbe = (consumerDirectory, adapterManifest, fixture) => {
+    const upstreamVersions = Object.fromEntries(
+        Object.keys(adapterManifest.cratis.upstream).map((name) => [
+            name,
+            fixture.peers[name],
+        ]),
+    );
+    const probe = `
+import { readFileSync } from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const packageName = ${JSON.stringify(adapterManifest.name)};
+const manifestExport = ${JSON.stringify(fixture.adapter.manifestExport)};
+const rendererId = ${JSON.stringify(fixture.adapter.rendererId)};
+const upstreamVersions = ${JSON.stringify(upstreamVersions, null, 4)};
+const api = await import(packageName);
+const publicNames = Object.keys(api).sort();
+if (JSON.stringify(publicNames) !== JSON.stringify([manifestExport])) {
+    throw new Error(\`\${packageName} exposes [\${publicNames.join(', ')}], expected only \${manifestExport}.\`);
+}
+if (api[manifestExport]?.id !== rendererId) {
+    throw new Error(\`\${packageName} renderer id is \${api[manifestExport]?.id}, expected \${rendererId}.\`);
+}
+
+const installedPackageVersion = packageToResolve => {
+    let directory = path.dirname(fileURLToPath(import.meta.resolve(packageToResolve)));
+    while (true) {
+        const candidate = path.join(directory, 'package.json');
+        try {
+            const manifest = JSON.parse(readFileSync(candidate, 'utf8'));
+            if (manifest.name === packageToResolve) return manifest.version;
+        } catch (error) {
+            if (error?.code !== 'ENOENT') throw error;
+        }
+        const parent = path.dirname(directory);
+        if (parent === directory) break;
+        directory = parent;
+    }
+    throw new Error(\`Could not locate installed manifest for \${packageToResolve}.\`);
+};
+
+for (const [name, expectedVersion] of Object.entries(upstreamVersions)) {
+    const actualVersion = installedPackageVersion(name);
+    if (actualVersion !== expectedVersion) {
+        throw new Error(\`Resolved \${name}@\${actualVersion}, expected boundary version \${expectedVersion}.\`);
+    }
+}
+console.log(\`Verified \${packageName} \${rendererId} with exact boundary upstream versions.\`);
+`;
+    writeFileSync(path.join(consumerDirectory, 'verify.mjs'), probe.trimStart());
+};
+
+const peerWarningPatterns = {
+    npm: [/ERESOLVE/iu, /overriding peer dependency/iu, /peer dep(?:endency)?/iu],
+    pnpm: [/WARN[^\n]*peer/iu, /unmet peer/iu],
+    'yarn-pnp': [/YN0002/iu, /YN0060/iu, /YN0086/iu],
+};
+
+const install = (manager, consumerDirectory, archives, fixture) => {
+    const exactPeers = Object.entries(fixture.peers).map(
+        ([name, version]) => `${name}@${version}`,
+    );
+    let output;
+    if (manager === 'npm') {
+        output = run(
+            'npm',
+            [
+                'install',
+                '--ignore-scripts',
+                '--no-audit',
+                '--no-fund',
+                '--strict-peer-deps',
+                ...archives,
+                ...exactPeers,
+            ],
+            consumerDirectory,
+            true,
+        );
+    } else if (manager === 'pnpm') {
+        run('corepack', ['prepare', `pnpm@${matrix.packageManagers.pnpm}`, '--activate']);
+        output = run(
+            'pnpm',
+            [
+                'add',
+                '--ignore-scripts',
+                '--strict-peer-dependencies',
+                ...archives,
+                ...exactPeers,
+            ],
+            consumerDirectory,
+            true,
+        );
+    } else {
+        run('corepack', ['prepare', `yarn@${matrix.packageManagers.yarn}`, '--activate']);
+        writeYarnConfiguration(consumerDirectory, yarnPackageExtensions(matrix, fixture));
+        output = run(
+            'yarn',
+            ['add', ...archives, ...exactPeers],
+            consumerDirectory,
+            true,
+        );
+    }
+
+    const peerWarning = peerWarningPatterns[manager].find((pattern) =>
+        pattern.test(output),
+    );
+    if (peerWarning) {
+        throw new Error(
+            `${manager} reported strict peer-validation warning '${peerWarning}'.`,
+        );
+    }
+};
+
+const verifyFixture = (adapterKey, boundary, manager) => {
+    const manifests = sourceManifests();
+    validateMatrix(matrix, manifests);
+    const fixture = createFixture(matrix, adapterKey, boundary);
+    const temporary = mkdtempSync(path.join(tmpdir(), 'cratis-renderer-adapter-'));
+
+    try {
+        const coreArchive = path.join(temporary, 'components-core.tgz');
+        const adapterArchive = path.join(temporary, 'components-adapter.tgz');
+        run('yarn', ['workspace', '@cratis/components', 'prepare']);
+        run('yarn', ['workspace', fixture.adapter.workspace, 'clean']);
+        run('yarn', ['workspace', fixture.adapter.workspace, 'build']);
+        run('yarn', ['workspace', '@cratis/components', 'pack', '--out', coreArchive]);
+        run('yarn', [
+            'workspace',
+            fixture.adapter.workspace,
+            'pack',
+            '--out',
+            adapterArchive,
+        ]);
+
+        const packedCore = unpackManifest(
+            coreArchive,
+            path.join(temporary, 'unpacked-core'),
+        );
+        const packedAdapter = unpackManifest(
+            adapterArchive,
+            path.join(temporary, 'unpacked-adapter'),
+        );
+        validateMatrix(matrix, {
+            ...manifests,
+            [packedCore.name]: packedCore,
+            [packedAdapter.name]: packedAdapter,
+        });
+
+        const consumerDirectory = path.join(temporary, 'consumer');
+        mkdirSync(consumerDirectory);
+        writeFileSync(
+            path.join(consumerDirectory, 'package.json'),
+            '{"private":true,"type":"module"}\n',
+        );
+        writeProbe(consumerDirectory, packedAdapter, fixture);
+        install(manager, consumerDirectory, [coreArchive, adapterArchive], fixture);
+        run(
+            manager === 'yarn-pnp' ? 'yarn' : 'node',
+            manager === 'yarn-pnp' ? ['node', 'verify.mjs'] : ['verify.mjs'],
+            consumerDirectory,
+        );
+        console.log(`Verified ${adapterKey}/${boundary}/${manager}.`);
+    } finally {
+        rmSync(temporary, { recursive: true, force: true });
+    }
+};
+
+const options = parseArguments(process.argv.slice(2));
+const adapterSelection = options.adapter ?? 'all';
+const boundarySelection = options.boundary ?? 'all';
+const managerSelection = options.manager ?? 'npm';
+const adapterKeys =
+    adapterSelection === 'all' ? Object.keys(matrix.adapters) : [adapterSelection];
+const selectedBoundaries = boundarySelection === 'all' ? boundaries : [boundarySelection];
+const selectedManagers = managerSelection === 'all' ? managers : [managerSelection];
+
+for (const adapterKey of adapterKeys) {
+    if (!matrix.adapters[adapterKey])
+        throw new Error(`Unknown renderer adapter '${adapterKey}'.`);
+}
+for (const boundary of selectedBoundaries) {
+    if (!boundaries.includes(boundary))
+        throw new Error(`Unknown boundary '${boundary}'.`);
+}
+for (const manager of selectedManagers) {
+    if (!managers.includes(manager))
+        throw new Error(`Unknown package manager '${manager}'.`);
+}
+
+for (const adapterKey of adapterKeys) {
+    for (const boundary of selectedBoundaries) {
+        for (const manager of selectedManagers)
+            verifyFixture(adapterKey, boundary, manager);
+    }
+}
diff --git a/yarn.lock b/yarn.lock
index fe3b8669..601db878 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -337,8 +337,8 @@ __metadata:
     tsyringe: "npm:4.10.0"
   peerDependencies:
     "@cratis/components": ">=4 <5"
-    "@emotion/react": ">=11 <12"
-    "@emotion/styled": ">=11 <12"
+    "@emotion/react": ">=11.5 <12"
+    "@emotion/styled": ">=11.3 <12"
     "@mui/material": ">=9 <10"
     react: ^19.0.0
     react-dom: ^19.0.0
@@ -7875,6 +7875,7 @@ __metadata:
     reflect-metadata: "npm:0.2.2"
     rollup: "npm:^4.63.1"
     rollup-plugin-peer-deps-external: "npm:^2.2.4"
+    semver: "npm:7.8.5"
     sinon: "npm:^22.1.0"
     sinon-chai: "npm:^4.0.1"
     storybook: "npm:^10.5.10"
@@ -7965,21 +7966,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"semver@npm:^6.3.1":
-  version: 6.3.1
-  resolution: "semver@npm:6.3.1"
+"semver@npm:7.8.5, semver@npm:^7.3.5, semver@npm:^7.5.3, semver@npm:^7.7.3":
+  version: 7.8.5
+  resolution: "semver@npm:7.8.5"
   bin:
     semver: bin/semver.js
-  checksum: 10/1ef3a85bd02a760c6ef76a45b8c1ce18226de40831e02a00bad78485390b98b6ccaa31046245fc63bba4a47a6a592b6c7eedc65cc47126e60489f9cc1ce3ed7e
+  checksum: 10/9b01d2ff11e6e4a4539b7ca3c5f280c8704cb397a28504469f2ed4f00ad2194748d756647362a9712fff30984d15772ab7f083108c2fb508e2096ae9e708f22c
   languageName: node
   linkType: hard
 
-"semver@npm:^7.3.5, semver@npm:^7.5.3, semver@npm:^7.7.3":
-  version: 7.8.5
-  resolution: "semver@npm:7.8.5"
+"semver@npm:^6.3.1":
+  version: 6.3.1
+  resolution: "semver@npm:6.3.1"
   bin:
     semver: bin/semver.js
-  checksum: 10/9b01d2ff11e6e4a4539b7ca3c5f280c8704cb397a28504469f2ed4f00ad2194748d756647362a9712fff30984d15772ab7f083108c2fb508e2096ae9e708f22c
+  checksum: 10/1ef3a85bd02a760c6ef76a45b8c1ce18226de40831e02a00bad78485390b98b6ccaa31046245fc63bba4a47a6a592b6c7eedc65cc47126e60489f9cc1ce3ed7e
   languageName: node
   linkType: hard
 

From 04b04d2196fa88ab10c1d3805fb26f44ae3d7fbd Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Fri, 28 Aug 2026 21:35:33 +0200
Subject: [PATCH 242/267] Promote stable presentation renderer profile

---
 Adapters/Mui/README.md                        |   4 +-
 Adapters/Mui/package.json                     |   2 +-
 .../Mui/scripts/verify-packed-package.mjs     |   6 +-
 Adapters/Mui/src/index.tsx                    |  42 ++--
 Adapters/PrimeReact/README.md                 |   7 +-
 Adapters/PrimeReact/package.json              |   2 +-
 .../scripts/verify-packed-package.mjs         |  11 +-
 Adapters/PrimeReact/src/index.tsx             |  63 +++---
 Adapters/PrimeReact10/README.md               |   5 +-
 Adapters/PrimeReact10/package.json            |   2 +-
 .../scripts/verify-packed-package.mjs         |   6 +-
 Adapters/PrimeReact10/src/index.tsx           |  63 +++---
 Conformance/README.md                         |  12 +-
 .../given/plainDomPresentationRenderer.tsx    |  40 ++--
 Conformance/package.json                      |   2 +-
 Conformance/scripts/verify-packed-package.mjs |   2 +-
 .../Common/cratis-components-provider.md      |  27 ++-
 ...04-stable-presentation-renderer-profile.md |  99 +++++++++
 Documentation/decisions/toc.yml               |   2 +
 Documentation/renderers/index.md              |  14 +-
 .../renderers/primitive-adaptation.md         |  28 ++-
 Source/Common/CratisComponentsProvider.tsx    |  15 +-
 Source/README.md                              |   7 +-
 Source/renderer/README.md                     |  14 +-
 ...when_defining_a_presentation_ui_library.ts | 147 +++++++++++++
 .../when_using_provider_setup.tsx             |   4 +-
 .../presentationTyping.fixture.ts             | 149 +++++++++++++
 Source/renderer/index.ts                      |  24 ++-
 Source/renderer/manifest.ts                   |  63 +++---
 Source/renderer/overlayEnvironment.ts         |  10 +-
 Source/renderer/presentation.ts               | 202 ++++++++++++++++++
 Source/scripts/verify-renderer-contracts.mjs  |  10 +-
 compat-manifest.json                          |   8 +-
 scripts/generate-compat-manifest.mjs          |   8 +-
 34 files changed, 867 insertions(+), 233 deletions(-)
 create mode 100644 Documentation/decisions/0004-stable-presentation-renderer-profile.md
 create mode 100644 Source/renderer/for_manifest/when_defining_a_presentation_ui_library.ts
 create mode 100644 Source/renderer/for_slot_types/presentationTyping.fixture.ts
 create mode 100644 Source/renderer/presentation.ts

diff --git a/Adapters/Mui/README.md b/Adapters/Mui/README.md
index 5c64b56d..1b079fc4 100644
--- a/Adapters/Mui/README.md
+++ b/Adapters/Mui/README.md
@@ -4,7 +4,9 @@
 # `@cratis/components.mui`
 
 Material UI adapter for the nine stable presentation slots in the Cratis Components renderer ABI v1.
-The package is independently versioned and exports one manifest, `muiUiLibrary`.
+The package is independently versioned at 1.0.0 and exports one stable
+`CratisPresentationUiLibrary` manifest, `muiUiLibrary`. This certifies nine-slot primitive
+adaptation, never full-catalog replacement.
 
 ## Install
 
diff --git a/Adapters/Mui/package.json b/Adapters/Mui/package.json
index 0a6b4ab1..909156f2 100644
--- a/Adapters/Mui/package.json
+++ b/Adapters/Mui/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@cratis/components.mui",
-    "version": "0.1.0",
+    "version": "1.0.0",
     "cratisIndependentVersion": true,
     "description": "Material UI presentation adapter for Cratis Components renderer ABI v1.",
     "author": "Cratis",
diff --git a/Adapters/Mui/scripts/verify-packed-package.mjs b/Adapters/Mui/scripts/verify-packed-package.mjs
index 2f16a971..0294ffc2 100644
--- a/Adapters/Mui/scripts/verify-packed-package.mjs
+++ b/Adapters/Mui/scripts/verify-packed-package.mjs
@@ -135,7 +135,7 @@ try {
         );
     }
     if (
-        packageJson.version !== '0.1.0' ||
+        packageJson.version !== '1.0.0' ||
         packageJson.cratisIndependentVersion !== true ||
         packageJson.cratisUiAbi !== 1
     ) {
@@ -196,10 +196,10 @@ try {
     const exportedValues = declarations.match(/export\s+declare\s+const\s+/gu) ?? [];
     if (
         exportedValues.length !== 1 ||
-        !/export declare const muiUiLibrary: unstable_UiLibrary;/u.test(declarations)
+        !/export declare const muiUiLibrary: CratisPresentationUiLibrary;/u.test(declarations)
     ) {
         throw new Error(
-            'Public declarations must expose exactly one UiLibrary-typed value.',
+            'Public declarations must expose exactly one stable presentation UiLibrary value.',
         );
     }
 
diff --git a/Adapters/Mui/src/index.tsx b/Adapters/Mui/src/index.tsx
index 6d1ed78e..77273e6c 100644
--- a/Adapters/Mui/src/index.tsx
+++ b/Adapters/Mui/src/index.tsx
@@ -42,31 +42,21 @@ import type {
 } from '@cratis/components/Common';
 import type { ProgressBarProps } from '@cratis/components/Display';
 import {
-    unstable_CRATIS_UI_ABI_VERSION,
-    unstable_defineUiLibrary,
-    type unstable_CapabilityId,
-    type unstable_SlotDeclaration,
-    type unstable_SlotId,
-    type unstable_UiLibrary,
+    CRATIS_PRESENTATION_ABI_VERSION,
+    CRATIS_PRESENTATION_PROFILE,
+    cratisPresentationSlotIds,
+    definePresentationUiLibrary,
+    type CratisPresentationCapabilityId,
+    type CratisPresentationSlotDeclaration,
+    type CratisPresentationSlotId,
+    type CratisPresentationUiLibrary,
 } from '@cratis/components/renderer';
 
-const profileSlots = Object.freeze([
-    'common.button',
-    'common.iconButton',
-    'common.textInput',
-    'common.textArea',
-    'common.checkbox',
-    'common.radio',
-    'common.switch',
-    'common.progress',
-    'common.surface',
-] satisfies readonly unstable_SlotId[]);
-
 const capabilities = Object.freeze([
     'slot.render',
     'parts.passthrough',
     'ssr.staticRender',
-] satisfies readonly unstable_CapabilityId[]);
+] satisfies readonly CratisPresentationCapabilityId[]);
 
 const MuiAdapterProvider = ({ children }: { readonly children: ReactNode }) => {
     const outerTheme = useTheme();
@@ -982,14 +972,14 @@ const MuiSurfaceSlot = forwardRef<HTMLElement, SurfaceProps>(function MuiSurface
     );
 });
 
-const declaration = <SlotId extends unstable_SlotId>(
-    render: unstable_SlotDeclaration<SlotId>['render'],
+const declaration = <SlotId extends CratisPresentationSlotId>(
+    render: CratisPresentationSlotDeclaration<SlotId>['render'],
 ) =>
     Object.freeze({
         mode: 'presentation',
         fidelity: 'native',
         render,
-    }) satisfies unstable_SlotDeclaration<SlotId>;
+    }) satisfies CratisPresentationSlotDeclaration<SlotId>;
 
 const slots = Object.freeze({
     'common.button': declaration<'common.button'>(MuiButtonSlot),
@@ -1004,13 +994,13 @@ const slots = Object.freeze({
 });
 
 /** Material UI implementation of the stable Cratis presentation profile. */
-export const muiUiLibrary: unstable_UiLibrary = unstable_defineUiLibrary({
+export const muiUiLibrary: CratisPresentationUiLibrary = definePresentationUiLibrary({
     id: 'cratis-mui',
     displayName: 'Cratis Material UI renderer',
-    abi: unstable_CRATIS_UI_ABI_VERSION,
+    abi: CRATIS_PRESENTATION_ABI_VERSION,
     level: 'primitive',
-    profile: 'stable-presentation/v1',
-    profileSlots,
+    profile: CRATIS_PRESENTATION_PROFILE,
+    profileSlots: cratisPresentationSlotIds,
     capabilities,
     slots,
     Provider: MuiAdapterProvider,
diff --git a/Adapters/PrimeReact/README.md b/Adapters/PrimeReact/README.md
index 43c0500c..b16038de 100644
--- a/Adapters/PrimeReact/README.md
+++ b/Adapters/PrimeReact/README.md
@@ -4,9 +4,10 @@
 # `@cratis/components.primereact`
 
 PrimeReact 11 adapter for the nine stable presentation slots in the Cratis Components renderer ABI
-v1. The package is independently versioned and exports one manifest, `primeReactUiLibrary`.
-PrimeReact 10 is out of scope here and remains a required, separate
-`@cratis/components.primereact10` implementation before V4 completion.
+v1. The package is independently versioned at 1.0.0 and exports one stable
+`CratisPresentationUiLibrary` manifest, `primeReactUiLibrary`. This certifies nine-slot primitive
+adaptation, never full-catalog replacement. PrimeReact 10 is supported separately by
+`@cratis/components.primereact10`.
 
 ## Install
 
diff --git a/Adapters/PrimeReact/package.json b/Adapters/PrimeReact/package.json
index 5ac80220..a5ec7646 100644
--- a/Adapters/PrimeReact/package.json
+++ b/Adapters/PrimeReact/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@cratis/components.primereact",
-    "version": "0.1.0",
+    "version": "1.0.0",
     "cratisIndependentVersion": true,
     "description": "PrimeReact 11 presentation adapter for Cratis Components renderer ABI v1.",
     "author": "Cratis",
diff --git a/Adapters/PrimeReact/scripts/verify-packed-package.mjs b/Adapters/PrimeReact/scripts/verify-packed-package.mjs
index b2d64f6c..36c87943 100644
--- a/Adapters/PrimeReact/scripts/verify-packed-package.mjs
+++ b/Adapters/PrimeReact/scripts/verify-packed-package.mjs
@@ -136,7 +136,7 @@ try {
         );
     }
     if (
-        packageJson.version !== '0.1.0' ||
+        packageJson.version !== '1.0.0' ||
         packageJson.cratisIndependentVersion !== true ||
         packageJson.cratisUiAbi !== 1
     ) {
@@ -209,15 +209,18 @@ try {
     const exportedValues = declarations.match(/export\s+declare\s+const\s+/gu) ?? [];
     if (
         exportedValues.length !== 1 ||
-        !/export declare const primeReactUiLibrary: unstable_UiLibrary;/u.test(
+        !/export declare const primeReactUiLibrary: CratisPresentationUiLibrary;/u.test(
             declarations,
         )
     ) {
         throw new Error(
-            'Public declarations must expose exactly one UiLibrary-typed value.',
+            'Public declarations must expose exactly one stable presentation UiLibrary value.',
         );
     }
-    if (!declarations.includes("'cratis-primereact.license-configured': boolean")) {
+    if (
+        !declarations.includes('interface CratisRendererSetupExtensions') ||
+        !declarations.includes("'cratis-primereact.license-configured': boolean")
+    ) {
         throw new Error(
             'Public declarations must type the non-secret license attestation key.',
         );
diff --git a/Adapters/PrimeReact/src/index.tsx b/Adapters/PrimeReact/src/index.tsx
index 4b9c36e7..b590099d 100644
--- a/Adapters/PrimeReact/src/index.tsx
+++ b/Adapters/PrimeReact/src/index.tsx
@@ -39,48 +39,38 @@ import type {
 } from '@cratis/components/Common';
 import type { ProgressBarProps } from '@cratis/components/Display';
 import {
+    CRATIS_PRESENTATION_ABI_VERSION,
+    CRATIS_PRESENTATION_PROFILE,
+    cratisPresentationSlotIds,
+    definePresentationUiLibrary,
     unstable_AdapterError,
-    unstable_CRATIS_UI_ABI_VERSION,
     unstable_adapterErrorCodes,
-    unstable_defineUiLibrary,
-    type unstable_CapabilityId,
-    type unstable_SlotDeclaration,
-    type unstable_SlotId,
-    type unstable_UiLibrary,
-    type unstable_UiLibraryProviderProps,
+    type CratisPresentationCapabilityId,
+    type CratisPresentationSlotDeclaration,
+    type CratisPresentationSlotId,
+    type CratisPresentationUiLibrary,
+    type CratisPresentationUiLibraryProviderProps,
 } from '@cratis/components/renderer';
 
 declare module '@cratis/components/renderer' {
-    interface unstable_RendererSetupExtensions {
+    interface CratisRendererSetupExtensions {
         /** Application attests that its outer PrimeReactProvider received a license key. */
         'cratis-primereact.license-configured': boolean;
     }
 }
 
-const profileSlots = Object.freeze([
-    'common.button',
-    'common.iconButton',
-    'common.textInput',
-    'common.textArea',
-    'common.checkbox',
-    'common.radio',
-    'common.switch',
-    'common.progress',
-    'common.surface',
-] satisfies readonly unstable_SlotId[]);
-
 const capabilities = Object.freeze([
     'slot.render',
     'parts.passthrough',
     'ssr.staticRender',
-] satisfies readonly unstable_CapabilityId[]);
+] satisfies readonly CratisPresentationCapabilityId[]);
 
 const licenseConfiguredAttestation = 'cratis-primereact.license-configured';
 
 const PrimeReactAdapterProvider = ({
     children,
     setup,
-}: unstable_UiLibraryProviderProps) => {
+}: CratisPresentationUiLibraryProviderProps) => {
     const primeReact = useContext(PrimeReactContext);
     if (!primeReact || setup[licenseConfiguredAttestation] !== true) {
         throw new unstable_AdapterError({
@@ -783,14 +773,14 @@ const PrimeSurfaceSlot = forwardRef<HTMLElement, SurfaceProps>(function PrimeSur
     );
 });
 
-const declaration = <SlotId extends unstable_SlotId>(
-    render: unstable_SlotDeclaration<SlotId>['render'],
+const declaration = <SlotId extends CratisPresentationSlotId>(
+    render: CratisPresentationSlotDeclaration<SlotId>['render'],
 ) =>
     Object.freeze({
         mode: 'presentation',
         fidelity: 'native',
         render,
-    }) satisfies unstable_SlotDeclaration<SlotId>;
+    }) satisfies CratisPresentationSlotDeclaration<SlotId>;
 
 const slots = Object.freeze({
     'common.button': declaration<'common.button'>(PrimeButtonSlot),
@@ -805,14 +795,15 @@ const slots = Object.freeze({
 });
 
 /** PrimeReact 11 implementation of the stable Cratis presentation profile. */
-export const primeReactUiLibrary: unstable_UiLibrary = unstable_defineUiLibrary({
-    id: 'cratis-primereact',
-    displayName: 'Cratis PrimeReact renderer',
-    abi: unstable_CRATIS_UI_ABI_VERSION,
-    level: 'primitive',
-    profile: 'stable-presentation/v1',
-    profileSlots,
-    capabilities,
-    slots,
-    Provider: PrimeReactAdapterProvider,
-});
+export const primeReactUiLibrary: CratisPresentationUiLibrary =
+    definePresentationUiLibrary({
+        id: 'cratis-primereact',
+        displayName: 'Cratis PrimeReact renderer',
+        abi: CRATIS_PRESENTATION_ABI_VERSION,
+        level: 'primitive',
+        profile: CRATIS_PRESENTATION_PROFILE,
+        profileSlots: cratisPresentationSlotIds,
+        capabilities,
+        slots,
+        Provider: PrimeReactAdapterProvider,
+    });
diff --git a/Adapters/PrimeReact10/README.md b/Adapters/PrimeReact10/README.md
index b22a53b1..6d2ac9a1 100644
--- a/Adapters/PrimeReact10/README.md
+++ b/Adapters/PrimeReact10/README.md
@@ -4,8 +4,9 @@
 # `@cratis/components.primereact10`
 
 PrimeReact 10 adapter for the nine stable presentation slots in the Cratis Components renderer ABI
-v1. The package is independently versioned and exports one manifest,
-`primeReact10UiLibrary`.
+v1. The package is independently versioned at 1.0.0 and exports one stable
+`CratisPresentationUiLibrary` manifest, `primeReact10UiLibrary`. This certifies nine-slot primitive
+adaptation, never full-catalog replacement.
 
 PrimeReact 11 uses a different package architecture and license boundary. It is supported separately
 by `@cratis/components.primereact`; the two adapters must use isolated upstream dependency graphs.
diff --git a/Adapters/PrimeReact10/package.json b/Adapters/PrimeReact10/package.json
index 9c8ffb39..da4cefff 100644
--- a/Adapters/PrimeReact10/package.json
+++ b/Adapters/PrimeReact10/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@cratis/components.primereact10",
-    "version": "0.1.0",
+    "version": "1.0.0",
     "cratisIndependentVersion": true,
     "description": "PrimeReact 10 presentation adapter for Cratis Components renderer ABI v1.",
     "author": "Cratis",
diff --git a/Adapters/PrimeReact10/scripts/verify-packed-package.mjs b/Adapters/PrimeReact10/scripts/verify-packed-package.mjs
index 2db5527e..050929af 100644
--- a/Adapters/PrimeReact10/scripts/verify-packed-package.mjs
+++ b/Adapters/PrimeReact10/scripts/verify-packed-package.mjs
@@ -133,7 +133,7 @@ try {
         );
     }
     if (
-        packageJson.version !== '0.1.0' ||
+        packageJson.version !== '1.0.0' ||
         packageJson.cratisIndependentVersion !== true ||
         packageJson.cratisUiAbi !== 1
     ) {
@@ -250,12 +250,12 @@ try {
     const exportedValues = declarations.match(/export\s+declare\s+const\s+/gu) ?? [];
     if (
         exportedValues.length !== 1 ||
-        !/export declare const primeReact10UiLibrary: unstable_UiLibrary;/u.test(
+        !/export declare const primeReact10UiLibrary: CratisPresentationUiLibrary;/u.test(
             declarations,
         )
     ) {
         throw new Error(
-            'Public declarations must expose exactly one UiLibrary-typed value.',
+            'Public declarations must expose exactly one stable presentation UiLibrary value.',
         );
     }
     for (const forbidden of ['license-configured', 'PrimeUI', 'primereact/api']) {
diff --git a/Adapters/PrimeReact10/src/index.tsx b/Adapters/PrimeReact10/src/index.tsx
index b8ff04c0..b65f6165 100644
--- a/Adapters/PrimeReact10/src/index.tsx
+++ b/Adapters/PrimeReact10/src/index.tsx
@@ -51,34 +51,26 @@ import type {
 } from '@cratis/components/Common';
 import type { ProgressBarProps } from '@cratis/components/Display';
 import {
-    unstable_CRATIS_UI_ABI_VERSION,
-    unstable_defineUiLibrary,
-    type unstable_CapabilityId,
-    type unstable_SlotDeclaration,
-    type unstable_SlotId,
-    type unstable_UiLibrary,
-    type unstable_UiLibraryProviderProps,
+    CRATIS_PRESENTATION_ABI_VERSION,
+    CRATIS_PRESENTATION_PROFILE,
+    cratisPresentationSlotIds,
+    definePresentationUiLibrary,
+    type CratisPresentationCapabilityId,
+    type CratisPresentationSlotDeclaration,
+    type CratisPresentationSlotId,
+    type CratisPresentationUiLibrary,
+    type CratisPresentationUiLibraryProviderProps,
 } from '@cratis/components/renderer';
 
-const profileSlots = Object.freeze([
-    'common.button',
-    'common.iconButton',
-    'common.textInput',
-    'common.textArea',
-    'common.checkbox',
-    'common.radio',
-    'common.switch',
-    'common.progress',
-    'common.surface',
-] satisfies readonly unstable_SlotId[]);
-
 const capabilities = Object.freeze([
     'slot.render',
     'parts.passthrough',
     'ssr.staticRender',
-] satisfies readonly unstable_CapabilityId[]);
+] satisfies readonly CratisPresentationCapabilityId[]);
 
-const PrimeReact10AdapterProvider = ({ children }: unstable_UiLibraryProviderProps) => {
+const PrimeReact10AdapterProvider = ({
+    children,
+}: CratisPresentationUiLibraryProviderProps) => {
     const applicationConfiguration = useContext(PrimeReactContext);
     if (applicationConfiguration !== undefined) return children;
     return <PrimeReactProvider>{children}</PrimeReactProvider>;
@@ -831,14 +823,14 @@ const PrimeSurfaceSlot = forwardRef<HTMLElement, SurfaceProps>(function PrimeSur
     );
 });
 
-const declaration = <SlotId extends unstable_SlotId>(
-    render: unstable_SlotDeclaration<SlotId>['render'],
+const declaration = <SlotId extends CratisPresentationSlotId>(
+    render: CratisPresentationSlotDeclaration<SlotId>['render'],
 ) =>
     Object.freeze({
         mode: 'presentation',
         fidelity: 'native',
         render,
-    }) satisfies unstable_SlotDeclaration<SlotId>;
+    }) satisfies CratisPresentationSlotDeclaration<SlotId>;
 
 const slots = Object.freeze({
     'common.button': declaration<'common.button'>(PrimeButtonSlot),
@@ -853,14 +845,15 @@ const slots = Object.freeze({
 });
 
 /** PrimeReact 10 implementation of the stable Cratis presentation profile. */
-export const primeReact10UiLibrary: unstable_UiLibrary = unstable_defineUiLibrary({
-    id: 'cratis-primereact10',
-    displayName: 'Cratis PrimeReact 10 renderer',
-    abi: unstable_CRATIS_UI_ABI_VERSION,
-    level: 'primitive',
-    profile: 'stable-presentation/v1',
-    profileSlots,
-    capabilities,
-    slots,
-    Provider: PrimeReact10AdapterProvider,
-});
+export const primeReact10UiLibrary: CratisPresentationUiLibrary =
+    definePresentationUiLibrary({
+        id: 'cratis-primereact10',
+        displayName: 'Cratis PrimeReact 10 renderer',
+        abi: CRATIS_PRESENTATION_ABI_VERSION,
+        level: 'primitive',
+        profile: CRATIS_PRESENTATION_PROFILE,
+        profileSlots: cratisPresentationSlotIds,
+        capabilities,
+        slots,
+        Provider: PrimeReact10AdapterProvider,
+    });
diff --git a/Conformance/README.md b/Conformance/README.md
index 4be04bd8..8f5dd9fa 100644
--- a/Conformance/README.md
+++ b/Conformance/README.md
@@ -4,7 +4,7 @@
 # @cratis/components.conformance
 
 Development-only evidence runner for authors of `@cratis/components` renderer adapters. The package
-is independently versioned (`0.1.0`) and records renderer ABI major `1`; it is not a runtime
+is independently versioned (`1.0.0`) and records renderer ABI major `1`; it is not a runtime
 dependency of Components or an adapter discovery mechanism.
 
 ```ts
@@ -27,10 +27,12 @@ if (!report.passed) {
 ```
 
 The runner uses only public `@cratis/components/renderer` contracts, React, and public component
-props/manifests. It covers the fourteen ABI v1 slots with static/runtime metadata consistency,
-stable parts and canonical states, pt routing, exact native elements/refs, bounded form and callback
-behavior, behavior ownership, SSR/hydration, axe, RTL/forced-color/reduced-motion inputs, and report
-skip discipline. See [CONFORMANCE.md](./CONFORMANCE.md) for the precise evidence boundary.
+props/manifests. The stable `stable-presentation/v1` contract covers exactly nine primitive slots;
+the broader fourteen-slot inventory remains experimental. Checks cover static/runtime metadata
+consistency, stable parts and canonical states, pt routing, exact native elements/refs, bounded form
+and callback behavior, behavior ownership, SSR/hydration, axe,
+RTL/forced-color/reduced-motion inputs, and report skip discipline. See
+[CONFORMANCE.md](./CONFORMANCE.md) for the precise evidence boundary.
 
 ## Commands
 
diff --git a/Conformance/for_plain_dom_renderer/given/plainDomPresentationRenderer.tsx b/Conformance/for_plain_dom_renderer/given/plainDomPresentationRenderer.tsx
index a83bfd19..d6d174cd 100644
--- a/Conformance/for_plain_dom_renderer/given/plainDomPresentationRenderer.tsx
+++ b/Conformance/for_plain_dom_renderer/given/plainDomPresentationRenderer.tsx
@@ -29,25 +29,15 @@ import type {
 } from '@cratis/components/Common';
 import type { ProgressBarProps } from '@cratis/components/Display';
 import {
-    unstable_CRATIS_UI_ABI_VERSION,
-    unstable_defineUiLibrary,
-    type unstable_CapabilityId,
-    type unstable_SlotDeclaration,
-    type unstable_SlotId,
+    CRATIS_PRESENTATION_ABI_VERSION,
+    CRATIS_PRESENTATION_PROFILE,
+    cratisPresentationSlotIds,
+    definePresentationUiLibrary,
+    type CratisPresentationCapabilityId,
+    type CratisPresentationSlotDeclaration,
+    type CratisPresentationSlotId,
 } from '@cratis/components/renderer';
 
-const profileSlots = Object.freeze([
-    'common.button',
-    'common.iconButton',
-    'common.textInput',
-    'common.textArea',
-    'common.checkbox',
-    'common.radio',
-    'common.switch',
-    'common.progress',
-    'common.surface',
-] satisfies readonly unstable_SlotId[]);
-
 const capabilities = Object.freeze([
     'slot.render',
     'parts.passthrough',
@@ -55,7 +45,7 @@ const capabilities = Object.freeze([
     'rtl',
     'forcedColors',
     'motion.reduced',
-] satisfies readonly unstable_CapabilityId[]);
+] satisfies readonly CratisPresentationCapabilityId[]);
 
 const classNames = (...values: readonly (string | undefined)[]) =>
     values.filter(Boolean).join(' ');
@@ -656,14 +646,14 @@ const PlainSurface = forwardRef<HTMLElement, SurfaceProps>(function PlainSurface
     );
 });
 
-const declaration = <SlotId extends unstable_SlotId>(
-    render: unstable_SlotDeclaration<SlotId>['render'],
+const declaration = <SlotId extends CratisPresentationSlotId>(
+    render: CratisPresentationSlotDeclaration<SlotId>['render'],
 ) =>
     Object.freeze({
         mode: 'presentation',
         fidelity: 'native',
         render,
-    }) satisfies unstable_SlotDeclaration<SlotId>;
+    }) satisfies CratisPresentationSlotDeclaration<SlotId>;
 
 const slots = Object.freeze({
     'common.button': declaration<'common.button'>(PlainButton),
@@ -678,13 +668,13 @@ const slots = Object.freeze({
 });
 
 /** Private, test-only renderer proving the nine stable presentation slots are independently implementable. */
-export const plainDomPresentationRenderer = unstable_defineUiLibrary({
+export const plainDomPresentationRenderer = definePresentationUiLibrary({
     id: 'plain-dom-falsification-fixture',
     displayName: 'Plain DOM falsification fixture',
-    abi: unstable_CRATIS_UI_ABI_VERSION,
+    abi: CRATIS_PRESENTATION_ABI_VERSION,
     level: 'primitive',
-    profile: 'stable-presentation/v1',
-    profileSlots,
+    profile: CRATIS_PRESENTATION_PROFILE,
+    profileSlots: cratisPresentationSlotIds,
     capabilities,
     slots,
 });
diff --git a/Conformance/package.json b/Conformance/package.json
index d33c4425..0ab2b49a 100644
--- a/Conformance/package.json
+++ b/Conformance/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@cratis/components.conformance",
-    "version": "0.1.0",
+    "version": "1.0.0",
     "cratisIndependentVersion": true,
     "description": "Programmatic conformance evidence for Cratis Components renderer adapter authors.",
     "author": "Cratis",
diff --git a/Conformance/scripts/verify-packed-package.mjs b/Conformance/scripts/verify-packed-package.mjs
index 5284571c..d2af7aaa 100644
--- a/Conformance/scripts/verify-packed-package.mjs
+++ b/Conformance/scripts/verify-packed-package.mjs
@@ -60,7 +60,7 @@ try {
         readFileSync(path.join(repositoryDirectory, 'Source/package.json'), 'utf8'),
     );
     if (
-        packageJson.version !== '0.1.0' ||
+        packageJson.version !== '1.0.0' ||
         packageJson.version === sourcePackageJson.version ||
         packageJson.cratisIndependentVersion !== true ||
         packageJson.cratisUiAbi !== 1
diff --git a/Documentation/Common/cratis-components-provider.md b/Documentation/Common/cratis-components-provider.md
index 9ff84704..b6638c02 100644
--- a/Documentation/Common/cratis-components-provider.md
+++ b/Documentation/Common/cratis-components-provider.md
@@ -3,7 +3,7 @@ title: CratisComponentsProvider
 description: Configure locale, Components-owned labels, and the app-wide toast region.
 ---
 
-`CratisComponentsProvider` is the application root for Components-owned locale/messages and the experimental renderer boundary. Its `value` remains renderer-independent and it does not configure an application's direct third-party component usage; a selected adapter may mount its own provider boundary. Styling remains owned by CSS or by the explicitly selected adapter.
+`CratisComponentsProvider` is the application root for Components-owned locale/messages and optional renderer selection. Its `value` remains renderer-independent and it does not configure an application's direct third-party component usage; a selected adapter may mount its own provider boundary. Styling remains owned by CSS or by the explicitly selected adapter.
 
 ## Basic setup
 
@@ -49,22 +49,29 @@ A small inline object as in the basic example is inexpensive; the stable form ma
 
 Unknown Components 3 renderer options are intentionally a type error. Remove `license`, `theme`, `defaults`, global `pt`, `ptOptions`, `ripple`, `unstyled`, and renderer z-index settings rather than compiling a provider whose visual configuration does nothing. Configure any remaining direct Prime provider independently.
 
-## Experimental renderer selection
+## Renderer selection
 
-The renderer contract remains `unstable_` while concrete adapters falsify it. The provider exposes:
+The certified MUI, PrimeReact 11, and PrimeReact 10 manifests implement the stable nine-slot
+`stable-presentation/v1` profile. That stable profile adapts only Button, IconButton, TextInput,
+TextArea, Checkbox, Radio, Switch, ProgressBar, and Surface. It never means full-catalog
+replacement. The broader fourteen-slot renderer system, composition, scopes, atomic slots, and
+fallback diagnostics remain experimental.
+
+The provider exposes:
 
 | Prop                 | Purpose                                                                                               |
 | -------------------- | ----------------------------------------------------------------------------------------------------- |
 | `library`            | One renderer manifest or an ordered last-wins composition. Omit it for the built-in default.          |
 | `libraryMode`        | `strict` rejects invalid profile promises; `degrade` reports them after mount.                        |
 | `rendererFallback`   | `core` keeps the built-in slot fallback; `throw` rejects fallback.                                    |
-| `overlayEnvironment` | Stable, post-commit portal-container lookup for overlay-owning implementations.                       |
-| `rendererSetup`      | Adapter-declared, non-secret boolean setup attestations. Never put credentials, keys, or caches here. |
-
-Adapter packages declaration-merge their own `rendererSetup` keys, so importing an adapter gives
-typed setup without adding vendor fields to Core. The provider copies and freezes boolean entries,
-discards non-boolean runtime values, inherits the map through nested providers unless a nested map
-replaces it wholesale, and forwards it through `RendererScope`.
+| `overlayEnvironment` | Stable, post-commit portal-container lookup through `CratisOverlayEnvironment`.                       |
+| `rendererSetup`      | Stable adapter-declared boolean attestations. Never put credentials, keys, or caches here.            |
+
+Adapter packages declaration-merge their own keys into `CratisRendererSetupExtensions`, so
+importing an adapter gives typed setup without adding vendor fields to Core. The provider copies and
+freezes boolean entries, discards non-boolean runtime values, inherits the map through nested
+providers unless a nested map replaces it wholesale, and forwards it to the selected library
+provider.
 
 A key-gated renderer still receives its key through the application's own outer vendor provider.
 For example, the PrimeReact 11 adapter receives only a boolean assertion that the application
diff --git a/Documentation/decisions/0004-stable-presentation-renderer-profile.md b/Documentation/decisions/0004-stable-presentation-renderer-profile.md
new file mode 100644
index 00000000..997074e1
--- /dev/null
+++ b/Documentation/decisions/0004-stable-presentation-renderer-profile.md
@@ -0,0 +1,99 @@
+---
+title: Stable presentation renderer profile
+description: The bounded nine-slot renderer contract promoted after independent conformance proof.
+sidebar:
+    order: 4
+    badge: { text: Accepted, variant: tip }
+---
+
+**Status:** Accepted
+
+## Context
+
+Components V4 needs an honest extension point for adapting common primitives without implying that a
+vendor renderer replaces the full Components catalog. The experimental renderer system proved a
+larger fourteen-slot model, but five of those slots own interactions rather than presentation and
+have not earned the same compatibility promise.
+
+The `stable-presentation/v1` candidate was tested independently by four implementations: the
+private plain-DOM falsification fixture, MUI, PrimeReact 11, and PrimeReact 10. Each implementation
+passed all 100 applicable conformance checks with zero failures and zero skips. The proof covers the
+exact public props, refs, parts, state, behavior ownership, server rendering, hydration, and bounded
+accessibility assertions recorded by the conformance package. It does not turn the remaining
+experimental renderer system into a stable API.
+
+## Decision
+
+Renderer ABI major 1 promotes one immutable profile through
+`@cratis/components/renderer`:
+
+- `common.button`
+- `common.iconButton`
+- `common.textInput`
+- `common.textArea`
+- `common.checkbox`
+- `common.radio`
+- `common.switch`
+- `common.progress`
+- `common.surface`
+
+The stable API is identified by `CRATIS_PRESENTATION_PROFILE`,
+`CRATIS_PRESENTATION_ABI_VERSION`, and `cratisPresentationSlotIds`. Its
+`CratisPresentationUiLibrary` declaration requires all nine slots, `presentation` behavior
+ownership, and `native` or `emulated` fidelity. `definePresentationUiLibrary()` validates the same
+boundary for JavaScript callers before defensively copying and freezing the manifest through the
+shared manifest machinery.
+
+The profile also stabilizes the non-secret boolean setup contract used by certified providers:
+`CratisRendererSetupExtensions`, `CratisRendererSetup`, and
+`CratisPresentationUiLibraryProviderProps`. Adapter declaration merging may add boolean
+attestations only. Credentials, license keys, caches, provider instances, and mutable configuration
+objects remain impossible at this boundary.
+
+`CratisOverlayEnvironment` is a separate stable V4 host contract. It resolves a portal container on
+demand and may return `null` when no container is available. Internal overlay hooks remain
+experimental.
+
+The MUI, PrimeReact 11, and PrimeReact 10 package manifests are stable
+`CratisPresentationUiLibrary` values. Selecting one certifies nine-slot primitive adaptation only.
+It never promises full-catalog replacement.
+
+## Semver policy
+
+Removing a `stable-presentation/v1` slot, changing its identifier, changing its public component
+props or ref contract, changing presentation behavior ownership, or weakening its required fidelity
+is a breaking change.
+
+Adding a slot is not a compatible expansion of `stable-presentation/v1`. Additions require a new
+named profile and version so existing adapters never acquire an unimplemented requirement. The
+conformance package and the three certified adapters are independently versioned at `1.0.0`; they
+retain the honest `@cratis/components >=4 <5` peer range.
+
+## Intentionally unstable
+
+The following surfaces keep their `unstable_` prefix and carry no promise from this decision:
+
+- the open fourteen-slot table and generic `UiLibrary` manifest;
+- atomic slots and `BehaviorMode`;
+- capabilities outside the bounded presentation subset;
+- adapter diagnostics and errors;
+- manifest composition;
+- `RendererScope`, islands, and `only` routing;
+- `useCapability`, `useRendererId`, and internal overlay hooks;
+- the built-in full manifest;
+- lazy loading, preload behavior, and adapter discovery tooling.
+
+The unused `unstable_RendererExtensions` and `unstable_RendererProps` declarations are removed.
+No component or adapter consumed them, so retaining them would advertise renderer-specific prop
+bags that did not exist. Portable customization remains the typed `pt` contract.
+
+## Consequences
+
+Applications keep zero-configuration built-in behavior. The package root remains setup-only, the
+React/browser-DOM-free kernel boundary remains unchanged, and Core gains no PrimeReact dependency.
+Adapter authors can depend on a small stable façade while experimental work continues behind
+explicit `unstable_` names.
+
+Conformance evidence is bounded evidence, not a universal claim about every browser, theme,
+assistive technology, security posture, or application shell. Adapter packages continue to publish
+their exact peer, license, and conformance metadata.
diff --git a/Documentation/decisions/toc.yml b/Documentation/decisions/toc.yml
index 9c31b63a..e24afa16 100644
--- a/Documentation/decisions/toc.yml
+++ b/Documentation/decisions/toc.yml
@@ -4,3 +4,5 @@
   href: 0002-component-classification.md
 - name: Repository-owned kernel boundary
   href: 0003-kernel-boundary.md
+- name: Stable presentation renderer profile
+  href: 0004-stable-presentation-renderer-profile.md
diff --git a/Documentation/renderers/index.md b/Documentation/renderers/index.md
index a408feee..32f2ec36 100644
--- a/Documentation/renderers/index.md
+++ b/Documentation/renderers/index.md
@@ -26,9 +26,11 @@ An optional adapter changes only the renderer slots that it declares:
 | `@cratis/components.primereact`   | PrimeReact 11 and PrimeUX themes 3 | Nine stable presentation slots |
 | `@cratis/components.primereact10` | PrimeReact `>=10.9.9 <11`          | Nine stable presentation slots |
 
-All three adapters implement renderer ABI major 1. They do not replace DataPage, DataTables,
-CommandDialog, CommandForm, Toolbar, Canvas, or another Components-owned composition. The
-[primitive adaptation reference](primitive-adaptation.md) lists the exact nine-slot profile.
+All three adapters publish stable `CratisPresentationUiLibrary` manifests for renderer ABI major
+1. They do not replace DataPage, DataTables, CommandDialog, CommandForm, Toolbar, Canvas, or another
+Components-owned composition. The [primitive adaptation reference](primitive-adaptation.md) lists
+the exact nine-slot profile. Stable profile selection means nine-slot primitive adaptation, never
+full-catalog replacement.
 
 ```mermaid
 graph TD
@@ -58,9 +60,9 @@ claim.
 ## Providers and setup values
 
 A renderer library may mount its own provider around the selected Components scope. Application
-resources that the renderer ABI cannot safely transport stay outside that scope. In particular,
-`rendererSetup` accepts only adapter-declared boolean attestations. Never place a credential,
-license key, cache, provider instance, or mutable configuration object in it.
+resources that the renderer ABI cannot safely transport stay outside that scope. The stable
+`CratisRendererSetup` shape accepts only adapter-declared boolean attestations. Never place a
+credential, license key, cache, provider instance, or mutable configuration object in it.
 
 PrimeReact 11 demonstrates the boundary: the application passes its key directly to its own outer
 PrimeReact provider, then gives Components only a non-secret boolean assertion that setup occurred.
diff --git a/Documentation/renderers/primitive-adaptation.md b/Documentation/renderers/primitive-adaptation.md
index 7faa6d7d..047ecebb 100644
--- a/Documentation/renderers/primitive-adaptation.md
+++ b/Documentation/renderers/primitive-adaptation.md
@@ -8,7 +8,8 @@ description: Reference for the nine stable presentation slots, portable parts an
 
 The `stable-presentation/v1` profile is deliberately small. It lets an adapter render common
 controls with vendor-native primitives while Components retains its public props, semantic values,
-refs, parts, and composition contracts.
+refs, parts, and composition contracts. Stable means this exact nine-slot adaptation boundary; it
+never means that an adapter replaces the full Components catalog.
 
 ## The nine slots
 
@@ -28,6 +29,31 @@ This profile does not include tooltip, dropdown, dialog, date picker, or table p
 atomic interaction slots with a separate behavior boundary. It also does not include a composite
 such as DataPage or CommandDialog.
 
+## Stable adapter API
+
+Adapter packages import the bounded contract from `@cratis/components/renderer`:
+
+```ts
+import {
+    CRATIS_PRESENTATION_ABI_VERSION,
+    CRATIS_PRESENTATION_PROFILE,
+    cratisPresentationSlotIds,
+    definePresentationUiLibrary,
+    type CratisPresentationUiLibrary,
+} from '@cratis/components/renderer';
+```
+
+`CratisPresentationSlotMap` requires all nine exact component contracts. Every declaration must use
+`mode: 'presentation'` and either `fidelity: 'native'` or `fidelity: 'emulated'`.
+`definePresentationUiLibrary()` checks the same requirements for JavaScript callers and returns a
+defensive frozen copy. Use `CratisRendererSetupExtensions` only for non-secret boolean setup
+attestations and `CratisOverlayEnvironment` for an independent host portal-container lookup.
+
+Removing or changing a v1 slot is a breaking change. Adding a required slot needs a new profile and
+version; `stable-presentation/v1` will not silently grow. The open fourteen-slot manifest,
+composition, atomic behavior, renderer scopes, internal hooks, diagnostics, and built-in full
+manifest remain `unstable_` APIs.
+
 ## Stable parts
 
 Each contract defines its own typed `*Parts` object. A `pt` value sends ordinary React HTML
diff --git a/Source/Common/CratisComponentsProvider.tsx b/Source/Common/CratisComponentsProvider.tsx
index 68c4ad82..1b262b12 100644
--- a/Source/Common/CratisComponentsProvider.tsx
+++ b/Source/Common/CratisComponentsProvider.tsx
@@ -6,8 +6,11 @@ import { I18nProvider } from 'react-aria-components/I18nProvider';
 import { merge } from 'ts-deepmerge';
 import { Toaster, type ToasterProps } from '../Notifications/Toaster';
 import { unstable_RendererRoot } from '../renderer/RendererContext';
-import type { unstable_RendererSetup, unstable_UiLibrary } from '../renderer/manifest';
-import type { unstable_CratisOverlayEnvironment } from '../renderer/overlayEnvironment';
+import type {
+    CratisRendererSetup,
+    unstable_UiLibrary,
+} from '../renderer/manifest';
+import type { CratisOverlayEnvironment } from '../renderer/overlayEnvironment';
 import { CratisComponentsContext } from './CratisComponentsContext';
 import { cratisDefaults } from './CratisComponentsDefaults';
 
@@ -174,19 +177,19 @@ export interface CratisComponentsProviderProps {
     value?: CratisComponentsConfig;
     /** Mounts the global toaster with defaults or explicit options. */
     toaster?: boolean | ToasterProps;
-    /** Experimental renderer library or ordered, last-wins library composition. */
+    /** Renderer library or ordered, last-wins library composition. */
     library?: unstable_UiLibrary | readonly unstable_UiLibrary[];
     /** Experimental profile-promise behavior. Defaults to strict. */
     libraryMode?: 'strict' | 'degrade';
     /** Experimental terminal slot fallback behavior. Defaults to Core. */
     rendererFallback?: 'core' | 'throw';
-    /** Experimental host environment for overlay portal containers. */
-    overlayEnvironment?: unstable_CratisOverlayEnvironment;
+    /** Host environment for overlay portal containers. */
+    overlayEnvironment?: CratisOverlayEnvironment;
     /**
      * Non-secret renderer setup attestations. Values are booleans so credentials and license
      * tokens never cross the Components provider boundary.
      */
-    rendererSetup?: unstable_RendererSetup;
+    rendererSetup?: CratisRendererSetup;
     /** Application content. */
     children: ReactNode;
 }
diff --git a/Source/README.md b/Source/README.md
index d5566315..b4ef6a7d 100644
--- a/Source/README.md
+++ b/Source/README.md
@@ -75,9 +75,10 @@ export const App = () => (
 );
 ```
 
-The provider owns locale, Components-specific labels, the experimental renderer boundary, and the
-optional toast region. The default renderer needs no additional package. Optional renderer packages
-are independently versioned and selected with the provider's `library` prop:
+The provider owns locale, Components-specific labels, optional renderer selection, and the toast
+region. The default renderer needs no additional package. Certified renderer packages implement the
+stable, nine-slot `stable-presentation/v1` primitive profile; they never replace the full Components
+catalog. They are independently versioned and selected with the provider's `library` prop:
 
 - `@cratis/components.mui` — MUI 9.x / Emotion 11.x stable presentation slots;
 - `@cratis/components.primereact` — PrimeReact 11.x stable presentation slots, with an
diff --git a/Source/renderer/README.md b/Source/renderer/README.md
index b1c14423..a0bc8c33 100644
--- a/Source/renderer/README.md
+++ b/Source/renderer/README.md
@@ -1,10 +1,11 @@
 <!-- Copyright (c) Cratis. All rights reserved. -->
 <!-- Licensed under the MIT license. See LICENSE file in the project root for full license information. -->
 
-# Experimental renderer contracts
+# Renderer contracts
 
-This directory contains the D1 contracts, D2 provider/context/resolution infrastructure, and E1/E2
-presentation plus atomic self-hosting. `preloadRenderer` and lazy renderer entries remain deferred:
+This directory contains the stable nine-slot `stable-presentation/v1` façade alongside the broader
+experimental D1 contracts, D2 provider/context/resolution infrastructure, and E1/E2 presentation
+plus atomic self-hosting. `preloadRenderer` and lazy renderer entries remain deferred:
 `SlotDeclaration` has no load contract yet, so adding preload behavior now would invent an ABI that
 adapter declarations cannot honor.
 
@@ -27,7 +28,7 @@ The basic controls are standalone Common primitives. Arc-bound `CommandForm` fie
 high-order composites and must never be registered as substitutes for these slots.
 
 Renderer packages may declaration-merge non-secret boolean keys into
-`unstable_RendererSetupExtensions`. Applications pass those attestations through
+`CratisRendererSetupExtensions`. Applications pass those attestations through
 `CratisComponentsProvider.rendererSetup`; the root freezes them, nested providers inherit them
 unless an explicit nested setup replaces the map wholesale, and renderer scopes forward them to a
 library Provider. Credentials, license strings, caches, provider
@@ -35,7 +36,10 @@ instances, and other values must never cross this boundary. The attestation says
 completed its own setup and lets a renderer fail closed when its upstream context cannot expose
 whether setup occurred.
 
-E1 routes the nine presentation candidates. E2 routes tooltip, dropdown, dialog, date picker, and
+The nine E1 presentation candidates are the immutable stable façade exposed through
+`CratisPresentationUiLibrary` and `definePresentationUiLibrary`. Its runtime helper requires all
+nine slots, presentation mode, supported fidelity, the exact profile and ABI, and then freezes the
+manifest through the existing machinery. E2 routes tooltip, dropdown, dialog, date picker, and
 table paginator as atomic slots whose external adapters replace Core interaction ownership entirely.
 Their Core implementations self-host React Aria portals through the local overlay environment only
 around the overlay-owning subtree; merely reading the hook, rendering a closed control, or rendering
diff --git a/Source/renderer/for_manifest/when_defining_a_presentation_ui_library.ts b/Source/renderer/for_manifest/when_defining_a_presentation_ui_library.ts
new file mode 100644
index 00000000..64d5c5eb
--- /dev/null
+++ b/Source/renderer/for_manifest/when_defining_a_presentation_ui_library.ts
@@ -0,0 +1,147 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { ComponentType } from 'react';
+import {
+    CRATIS_PRESENTATION_ABI_VERSION,
+    CRATIS_PRESENTATION_PROFILE,
+    cratisPresentationSlotIds,
+    definePresentationUiLibrary,
+    type CratisPresentationSlotDeclaration,
+    type CratisPresentationSlotId,
+    type CratisPresentationSlotMap,
+    type CratisPresentationSlots,
+    type CratisPresentationUiLibrary,
+} from '..';
+
+const declaration = <SlotId extends CratisPresentationSlotId>() => ({
+    mode: 'presentation',
+    fidelity: 'native',
+    render: (() => null) as ComponentType<CratisPresentationSlots[SlotId]>,
+}) satisfies CratisPresentationSlotDeclaration<SlotId>;
+
+const validSlots = (): CratisPresentationSlotMap => ({
+    'common.button': declaration<'common.button'>(),
+    'common.iconButton': declaration<'common.iconButton'>(),
+    'common.textInput': declaration<'common.textInput'>(),
+    'common.textArea': declaration<'common.textArea'>(),
+    'common.checkbox': declaration<'common.checkbox'>(),
+    'common.radio': declaration<'common.radio'>(),
+    'common.switch': declaration<'common.switch'>(),
+    'common.progress': declaration<'common.progress'>(),
+    'common.surface': declaration<'common.surface'>(),
+});
+
+const validLibrary = (): CratisPresentationUiLibrary => ({
+    id: 'sample',
+    displayName: 'Sample',
+    abi: CRATIS_PRESENTATION_ABI_VERSION,
+    level: 'primitive',
+    profile: CRATIS_PRESENTATION_PROFILE,
+    profileSlots: cratisPresentationSlotIds,
+    capabilities: ['slot.render', 'parts.passthrough'],
+    slots: validSlots(),
+});
+
+const defineRuntime = definePresentationUiLibrary as (
+    library: unknown,
+) => CratisPresentationUiLibrary;
+
+describe('when defining a stable presentation UI library', () => {
+    it('should freeze the complete manifest through the shared manifest machinery', () => {
+        const input = validLibrary();
+        const result = definePresentationUiLibrary(input);
+
+        result.should.not.equal(input);
+        result.profile.should.equal(CRATIS_PRESENTATION_PROFILE);
+        result.profileSlots.should.deep.equal(cratisPresentationSlotIds);
+        Object.isFrozen(result).should.equal(true);
+        Object.isFrozen(result.capabilities).should.equal(true);
+        Object.isFrozen(result.profileSlots).should.equal(true);
+        Object.isFrozen(result.slots).should.equal(true);
+        cratisPresentationSlotIds.every((slotId) =>
+            Object.isFrozen(result.slots[slotId]),
+        ).should.equal(true);
+    });
+
+    it('should reject a missing stable slot at runtime', () => {
+        const candidate = validLibrary() as unknown as Record<string, unknown>;
+        const slots = { ...validSlots() } as Record<string, unknown>;
+        Reflect.deleteProperty(slots, 'common.surface');
+        candidate.slots = slots;
+
+        (() => defineRuntime(candidate)).should.throw(
+            TypeError,
+            'exactly the nine stable presentation slots',
+        );
+    });
+
+    it('should reject an extra slot at runtime', () => {
+        const candidate = validLibrary() as unknown as Record<string, unknown>;
+        candidate.slots = {
+            ...validSlots(),
+            'common.tooltip': declaration<'common.button'>(),
+        };
+
+        (() => defineRuntime(candidate)).should.throw(
+            TypeError,
+            'exactly the nine stable presentation slots',
+        );
+    });
+
+    it('should reject the wrong profile at runtime', () => {
+        const candidate = {
+            ...validLibrary(),
+            profile: 'future-presentation/v2',
+        };
+
+        (() => defineRuntime(candidate)).should.throw(
+            TypeError,
+            `profile must be '${CRATIS_PRESENTATION_PROFILE}'`,
+        );
+    });
+
+    it('should reject noncanonical profile slots at runtime', () => {
+        const candidate = {
+            ...validLibrary(),
+            profileSlots: cratisPresentationSlotIds.slice(0, -1),
+        };
+
+        (() => defineRuntime(candidate)).should.throw(
+            TypeError,
+            'profileSlots must be the canonical nine-slot profile',
+        );
+    });
+
+    it('should reject atomic mode at runtime', () => {
+        const candidate = validLibrary() as unknown as Record<string, unknown>;
+        candidate.slots = {
+            ...validSlots(),
+            'common.button': {
+                ...validSlots()['common.button'],
+                mode: 'atomic',
+            },
+        };
+
+        (() => defineRuntime(candidate)).should.throw(
+            TypeError,
+            "slot 'common.button' must use presentation mode",
+        );
+    });
+
+    it('should reject unsupported fidelity at runtime', () => {
+        const candidate = validLibrary() as unknown as Record<string, unknown>;
+        candidate.slots = {
+            ...validSlots(),
+            'common.button': {
+                ...validSlots()['common.button'],
+                fidelity: 'unsupported',
+            },
+        };
+
+        (() => defineRuntime(candidate)).should.throw(
+            TypeError,
+            "slot 'common.button' must use native or emulated fidelity",
+        );
+    });
+});
diff --git a/Source/renderer/for_resolution/when_using_provider_setup.tsx b/Source/renderer/for_resolution/when_using_provider_setup.tsx
index a9addb9c..2020565b 100644
--- a/Source/renderer/for_resolution/when_using_provider_setup.tsx
+++ b/Source/renderer/for_resolution/when_using_provider_setup.tsx
@@ -8,7 +8,7 @@ import {
     unstable_useCapability,
     unstable_useOverlayEnvironment,
     unstable_useRendererId,
-    type unstable_RendererSetup,
+    type CratisRendererSetup,
 } from '..';
 import { buttonSlot, createTestLibrary, FirstButton } from './testLibrary';
 
@@ -110,7 +110,7 @@ describe('when using renderer provider setup', () => {
         const unsafeSetup = {
             'sample.license-configured': true,
             'sample.credential': 'example.invalid/not-a-credential',
-        } as unknown as unstable_RendererSetup;
+        } as unknown as CratisRendererSetup;
 
         renderToStaticMarkup(
             <CratisComponentsProvider library={library} rendererSetup={unsafeSetup}>
diff --git a/Source/renderer/for_slot_types/presentationTyping.fixture.ts b/Source/renderer/for_slot_types/presentationTyping.fixture.ts
new file mode 100644
index 00000000..4d7fb085
--- /dev/null
+++ b/Source/renderer/for_slot_types/presentationTyping.fixture.ts
@@ -0,0 +1,149 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { ComponentType } from 'react';
+import type { CratisComponentsProviderProps } from '@cratis/components';
+import {
+    CRATIS_PRESENTATION_ABI_VERSION,
+    CRATIS_PRESENTATION_PROFILE,
+    cratisPresentationSlotIds,
+    definePresentationUiLibrary,
+    type CratisPresentationSlotDeclaration,
+    type CratisPresentationSlotId,
+    type CratisPresentationSlotMap,
+    type CratisPresentationSlots,
+    type CratisPresentationUiLibrary,
+    type CratisRendererSetup,
+    type unstable_RendererSetup,
+} from '@cratis/components/renderer';
+
+declare module '@cratis/components/renderer' {
+    interface CratisRendererSetupExtensions {
+        'sample.stable-setup': boolean;
+    }
+
+    interface unstable_RendererSetupExtensions {
+        'sample.compatibility-setup': boolean;
+    }
+}
+
+declare const Button: ComponentType<CratisPresentationSlots['common.button']>;
+declare const IconButton: ComponentType<
+    CratisPresentationSlots['common.iconButton']
+>;
+declare const TextInput: ComponentType<
+    CratisPresentationSlots['common.textInput']
+>;
+declare const TextArea: ComponentType<
+    CratisPresentationSlots['common.textArea']
+>;
+declare const Checkbox: ComponentType<
+    CratisPresentationSlots['common.checkbox']
+>;
+declare const Radio: ComponentType<CratisPresentationSlots['common.radio']>;
+declare const Switch: ComponentType<CratisPresentationSlots['common.switch']>;
+declare const Progress: ComponentType<
+    CratisPresentationSlots['common.progress']
+>;
+declare const Surface: ComponentType<CratisPresentationSlots['common.surface']>;
+declare const Tooltip: ComponentType<{ readonly tooltip: string }>;
+
+const declaration = <SlotId extends CratisPresentationSlotId>(
+    render: CratisPresentationSlotDeclaration<SlotId>['render'],
+): CratisPresentationSlotDeclaration<SlotId> => ({
+    mode: 'presentation',
+    fidelity: 'native',
+    render,
+});
+
+const slots: CratisPresentationSlotMap = {
+    'common.button': declaration<'common.button'>(Button),
+    'common.iconButton': declaration<'common.iconButton'>(IconButton),
+    'common.textInput': declaration<'common.textInput'>(TextInput),
+    'common.textArea': declaration<'common.textArea'>(TextArea),
+    'common.checkbox': declaration<'common.checkbox'>(Checkbox),
+    'common.radio': declaration<'common.radio'>(Radio),
+    'common.switch': declaration<'common.switch'>(Switch),
+    'common.progress': declaration<'common.progress'>(Progress),
+    'common.surface': declaration<'common.surface'>(Surface),
+};
+
+const library: CratisPresentationUiLibrary = definePresentationUiLibrary({
+    id: 'sample',
+    displayName: 'Sample',
+    abi: CRATIS_PRESENTATION_ABI_VERSION,
+    level: 'primitive',
+    profile: CRATIS_PRESENTATION_PROFILE,
+    profileSlots: cratisPresentationSlotIds,
+    capabilities: ['slot.render', 'parts.passthrough'],
+    slots,
+});
+
+const providerProps: Omit<CratisComponentsProviderProps, 'children'> = {
+    library,
+    overlayEnvironment: { getContainer: () => null },
+    rendererSetup: {
+        'sample.stable-setup': true,
+        'sample.compatibility-setup': false,
+    },
+};
+
+const setup: CratisRendererSetup = {
+    'sample.stable-setup': true,
+    'sample.compatibility-setup': true,
+};
+const compatibilitySetup: unstable_RendererSetup = setup;
+
+// @ts-expect-error Atomic slots are outside the stable presentation profile.
+const atomicSlot: CratisPresentationSlotId = 'common.tooltip';
+
+// @ts-expect-error Every stable presentation declaration must include all nine slots.
+const missingSlot: CratisPresentationSlotMap = {
+    'common.button': declaration<'common.button'>(Button),
+    'common.iconButton': declaration<'common.iconButton'>(IconButton),
+    'common.textInput': declaration<'common.textInput'>(TextInput),
+    'common.textArea': declaration<'common.textArea'>(TextArea),
+    'common.checkbox': declaration<'common.checkbox'>(Checkbox),
+    'common.radio': declaration<'common.radio'>(Radio),
+    'common.switch': declaration<'common.switch'>(Switch),
+    'common.progress': declaration<'common.progress'>(Progress),
+};
+
+const extraSlot = {
+    ...slots,
+    // @ts-expect-error Slots outside the immutable profile cannot enter its map.
+    'common.tooltip': declaration<'common.button'>(Button),
+} satisfies CratisPresentationSlotMap;
+
+const atomicMode: CratisPresentationSlotDeclaration<'common.button'> = {
+    // @ts-expect-error Stable slots always preserve Components behavior ownership.
+    mode: 'atomic',
+    fidelity: 'native',
+    render: Button,
+};
+const unsupportedFidelity: CratisPresentationSlotDeclaration<'common.button'> = {
+    mode: 'presentation',
+    // @ts-expect-error Unsupported fidelity cannot claim the stable profile.
+    fidelity: 'unsupported',
+    render: Button,
+};
+const wrongProps: CratisPresentationSlotDeclaration<'common.button'> = {
+    mode: 'presentation',
+    fidelity: 'native',
+    // @ts-expect-error Stable slots preserve the exact public component prop contract.
+    render: Tooltip,
+};
+const wrongSetup: CratisRendererSetup = {
+    // @ts-expect-error Renderer setup accepts booleans, never credentials.
+    'sample.stable-setup': 'secret',
+};
+
+void atomicMode;
+void atomicSlot;
+void compatibilitySetup;
+void extraSlot;
+void missingSlot;
+void providerProps;
+void unsupportedFidelity;
+void wrongProps;
+void wrongSetup;
diff --git a/Source/renderer/index.ts b/Source/renderer/index.ts
index 0721dc18..cdf0d041 100644
--- a/Source/renderer/index.ts
+++ b/Source/renderer/index.ts
@@ -51,9 +51,9 @@ declare module './slots.js' {
 }
 
 /**
- * Experimental renderer contracts for adapter authors. Every public symbol is intentionally
- * `unstable_`-prefixed and isolated to `@cratis/components/renderer`. E1 presentation and E2
- * atomic routing are facade-local; lazy/preload entries remain deferred.
+ * Renderer contracts for adapter authors. The bounded nine-slot presentation profile is stable;
+ * every broader renderer-system symbol remains `unstable_`-prefixed. E1 presentation and E2 atomic
+ * routing are facade-local; lazy/preload entries remain deferred.
  */
 export type { unstable_CapabilityId } from './capabilities';
 export {
@@ -66,8 +66,9 @@ export {
     unstable_CRATIS_UI_ABI_VERSION,
     unstable_composeUiLibraries,
     unstable_defineUiLibrary,
-    type unstable_RendererExtensions,
-    type unstable_RendererProps,
+    type CratisPresentationUiLibraryProviderProps,
+    type CratisRendererSetup,
+    type CratisRendererSetupExtensions,
     type unstable_RendererSetup,
     type unstable_RendererSetupExtensions,
     type unstable_UiLibrary,
@@ -75,8 +76,21 @@ export {
 } from './manifest';
 export {
     unstable_defaultOverlayEnvironment,
+    type CratisOverlayEnvironment,
     type unstable_CratisOverlayEnvironment,
 } from './overlayEnvironment';
+export {
+    CRATIS_PRESENTATION_ABI_VERSION,
+    CRATIS_PRESENTATION_PROFILE,
+    cratisPresentationSlotIds,
+    definePresentationUiLibrary,
+    type CratisPresentationCapabilityId,
+    type CratisPresentationSlotDeclaration,
+    type CratisPresentationSlotId,
+    type CratisPresentationSlotMap,
+    type CratisPresentationSlots,
+    type CratisPresentationUiLibrary,
+} from './presentation';
 export {
     unstable_useCapability,
     unstable_useOverlayEnvironment,
diff --git a/Source/renderer/manifest.ts b/Source/renderer/manifest.ts
index bef09278..3de43c99 100644
--- a/Source/renderer/manifest.ts
+++ b/Source/renderer/manifest.ts
@@ -9,31 +9,51 @@ import type { unstable_SlotId, unstable_SlotMap } from './slots';
 /**
  * Open declaration-merging surface for renderer-specific, non-secret setup attestations.
  * Adapter packages add boolean keys only; credentials never belong in this interface.
- *
- * @unstable Adapter-author contract. Expect changes until renderer conformance gates promote it.
  */
 // Adapter packages add only non-secret boolean attestations through declaration merging.
 // biome-ignore lint/style/useConsistentTypeDefinitions: declaration merging requires an interface.
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
-export interface unstable_RendererSetupExtensions extends Record<never, never> {}
+export interface CratisRendererSetupExtensions extends Record<never, never> {}
 
 /**
- * Non-secret application setup attestations supplied to a renderer provider.
+ * Compatibility declaration-merging surface for renderer setup attestations.
  *
- * @unstable Adapter-author contract. Expect changes until renderer conformance gates promote it.
+ * @deprecated Merge new adapter keys into {@link CratisRendererSetupExtensions}.
  */
-export type unstable_RendererSetup = Readonly<{
-    [Key in keyof unstable_RendererSetupExtensions]?: boolean;
+// biome-ignore lint/style/useConsistentTypeDefinitions: declaration merging requires an interface.
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface unstable_RendererSetupExtensions extends CratisRendererSetupExtensions {}
+
+/** Non-secret application setup attestations supplied to a renderer provider. */
+export type CratisRendererSetup = Readonly<{
+    [
+        Key in
+            keyof CratisRendererSetupExtensions | keyof unstable_RendererSetupExtensions
+    ]?: boolean;
 }>;
 
-/** Props supplied to a renderer library provider. */
-export interface unstable_UiLibraryProviderProps {
+/**
+ * Compatibility alias for {@link CratisRendererSetup}.
+ *
+ * @deprecated Use {@link CratisRendererSetup}.
+ */
+export type unstable_RendererSetup = CratisRendererSetup;
+
+/** Props supplied to a stable presentation renderer library provider. */
+export interface CratisPresentationUiLibraryProviderProps {
     /** Non-secret application setup attestations. Never credentials or license tokens. */
-    readonly setup: unstable_RendererSetup;
+    readonly setup: CratisRendererSetup;
     /** Application content. */
     readonly children: ReactNode;
 }
 
+/**
+ * Compatibility alias for {@link CratisPresentationUiLibraryProviderProps}.
+ *
+ * @deprecated Use {@link CratisPresentationUiLibraryProviderProps}.
+ */
+export type unstable_UiLibraryProviderProps = CratisPresentationUiLibraryProviderProps;
+
 /**
  * Renderer ABI major implemented by this package.
  *
@@ -67,32 +87,11 @@ export interface unstable_UiLibrary {
     /** Typed partial slot implementation table. */
     readonly slots: unstable_SlotMap;
     /** Optional library-level provider mounted once around the selected renderer scope. */
-    readonly Provider?: ComponentType<unstable_UiLibraryProviderProps>;
+    readonly Provider?: ComponentType<CratisPresentationUiLibraryProviderProps>;
     /** Optional static diagnostic preflight evaluated by renderer providers and scopes. */
     readonly preflight?: () => readonly unstable_AdapterDiagnostic[];
 }
 
-/**
- * Open declaration-merging surface for deliberate renderer-specific props. Core ships no keys, so
- * its declarations contain no vendor types.
- *
- * @unstable Adapter-author contract. Expect changes until renderer conformance gates promote it.
- */
-// Adapter packages add only their own vendor key through declaration merging.
-// biome-ignore lint/style/useConsistentTypeDefinitions: declaration merging requires an interface.
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
-export interface unstable_RendererExtensions extends Record<never, never> {}
-
-/**
- * Deliberate renderer lock-in bag derived only from declaration-merged extension keys. Portable
- * customization continues to use each component's `pt` contract.
- *
- * @unstable Adapter-author contract. Expect changes until renderer conformance gates promote it.
- */
-export type unstable_RendererProps = {
-    [R in keyof unstable_RendererExtensions]?: Partial<unstable_RendererExtensions[R]>;
-};
-
 const frozenSlots = (slots: unstable_SlotMap): unstable_SlotMap => {
     const copy: Record<string, object> = {};
     for (const [slotId, declaration] of Object.entries(slots)) {
diff --git a/Source/renderer/overlayEnvironment.ts b/Source/renderer/overlayEnvironment.ts
index 5e5835d1..08952688 100644
--- a/Source/renderer/overlayEnvironment.ts
+++ b/Source/renderer/overlayEnvironment.ts
@@ -5,13 +5,19 @@
  * Host environment used by overlay implementations to obtain their portal container.
  * `null` means no container is currently available; callers must defer rather than retarget.
  *
- * @unstable Adapter-author contract. Expect changes until renderer conformance gates promote it.
  */
-export interface unstable_CratisOverlayEnvironment {
+export interface CratisOverlayEnvironment {
     /** Resolves the current overlay container without requiring browser globals during import. */
     getContainer(): HTMLElement | null;
 }
 
+/**
+ * Compatibility alias for {@link CratisOverlayEnvironment}.
+ *
+ * @deprecated Use {@link CratisOverlayEnvironment}.
+ */
+export type unstable_CratisOverlayEnvironment = CratisOverlayEnvironment;
+
 /**
  * Default browser overlay environment. The module is SSR-safe: `document` is inspected only when
  * `getContainer()` is invoked, never while this module is initialized.
diff --git a/Source/renderer/presentation.ts b/Source/renderer/presentation.ts
new file mode 100644
index 00000000..c462f3de
--- /dev/null
+++ b/Source/renderer/presentation.ts
@@ -0,0 +1,202 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { ComponentType } from 'react';
+import type { ButtonProps } from '../Common/Button';
+import type { CheckboxProps } from '../Common/Checkbox';
+import type { IconButtonProps } from '../Common/IconButton';
+import type { RadioProps } from '../Common/Radio';
+import type { SurfaceProps } from '../Common/Surface';
+import type { SwitchProps } from '../Common/Switch';
+import type { TextAreaProps } from '../Common/TextArea';
+import type { TextInputProps } from '../Common/TextInput';
+import type { ProgressBarProps } from '../Display/ProgressBar';
+import {
+    unstable_defineUiLibrary,
+    type CratisPresentationUiLibraryProviderProps,
+    type unstable_UiLibrary,
+} from './manifest';
+
+/** Stable renderer profile implemented by certified presentation adapters. */
+export const CRATIS_PRESENTATION_PROFILE = 'stable-presentation/v1' as const;
+
+/** Renderer ABI major for the stable presentation profile. */
+export const CRATIS_PRESENTATION_ABI_VERSION = 1 as const;
+
+/** Immutable, canonical slot order for the stable presentation profile. */
+export const cratisPresentationSlotIds = Object.freeze([
+    'common.button',
+    'common.iconButton',
+    'common.textInput',
+    'common.textArea',
+    'common.checkbox',
+    'common.radio',
+    'common.switch',
+    'common.progress',
+    'common.surface',
+] as const);
+
+/** Identifier of one stable presentation slot. */
+export type CratisPresentationSlotId = (typeof cratisPresentationSlotIds)[number];
+
+/** Exact public component prop and ref contracts covered by the stable presentation profile. */
+export interface CratisPresentationSlots {
+    readonly 'common.button': ButtonProps;
+    readonly 'common.iconButton': IconButtonProps;
+    readonly 'common.textInput': TextInputProps;
+    readonly 'common.textArea': TextAreaProps;
+    readonly 'common.checkbox': CheckboxProps;
+    readonly 'common.radio': RadioProps;
+    readonly 'common.switch': SwitchProps;
+    readonly 'common.progress': ProgressBarProps;
+    readonly 'common.surface': SurfaceProps;
+}
+
+/** One stable, presentation-owned renderer slot declaration. */
+export interface CratisPresentationSlotDeclaration<
+    SlotId extends CratisPresentationSlotId,
+> {
+    /** Stable presentation slots always preserve Components behavior ownership. */
+    readonly mode: 'presentation';
+    /** Unsupported declarations cannot claim the stable profile. */
+    readonly fidelity: 'native' | 'emulated';
+    /** Component implementing the slot's exact public props and ref contract. */
+    readonly render: ComponentType<CratisPresentationSlots[SlotId]>;
+}
+
+/** Complete implementation table required by the stable presentation profile. */
+export type CratisPresentationSlotMap = {
+    readonly [
+        SlotId in CratisPresentationSlotId
+    ]: CratisPresentationSlotDeclaration<SlotId>;
+};
+
+/** Capabilities whose meaning is stable for the bounded presentation profile. */
+export type CratisPresentationCapabilityId =
+    | 'slot.render'
+    | 'parts.passthrough'
+    | 'ssr.staticRender'
+    | 'rtl'
+    | 'forcedColors'
+    | 'motion.reduced';
+
+/** Immutable manifest for one implementation of the stable presentation profile. */
+export interface CratisPresentationUiLibrary {
+    /** Stable, package-local renderer identity used for diagnostics and telemetry. */
+    readonly id: string;
+    /** Human-readable renderer name. */
+    readonly displayName: string;
+    /** Stable presentation renderer ABI major. */
+    readonly abi: typeof CRATIS_PRESENTATION_ABI_VERSION;
+    /** The bounded profile is a primitive presentation adapter. */
+    readonly level: 'primitive';
+    /** Exact stable presentation profile identifier. */
+    readonly profile: typeof CRATIS_PRESENTATION_PROFILE;
+    /** Canonical immutable list of all nine stable slots. */
+    readonly profileSlots: typeof cratisPresentationSlotIds;
+    /** Stable capabilities honestly supported by this implementation. */
+    readonly capabilities: readonly CratisPresentationCapabilityId[];
+    /** Complete nine-slot presentation implementation. */
+    readonly slots: CratisPresentationSlotMap;
+    /** Optional provider mounted once around the selected renderer scope. */
+    readonly Provider?: ComponentType<CratisPresentationUiLibraryProviderProps>;
+}
+
+const stableCapabilityIds = new Set<CratisPresentationCapabilityId>([
+    'slot.render',
+    'parts.passthrough',
+    'ssr.staticRender',
+    'rtl',
+    'forcedColors',
+    'motion.reduced',
+]);
+
+const invalidPresentationLibrary = (reason: string): never => {
+    throw new TypeError(`Invalid stable presentation UI library: ${reason}.`);
+};
+
+const hasCanonicalProfileSlots = (profileSlots: readonly unknown[]): boolean =>
+    profileSlots.length === cratisPresentationSlotIds.length &&
+    profileSlots.every((slotId, index) => slotId === cratisPresentationSlotIds[index]);
+
+/**
+ * Defines and freezes a complete implementation of the stable nine-slot presentation profile.
+ * Runtime validation protects JavaScript callers from claiming a profile they do not implement.
+ *
+ * @param library Stable presentation library declaration.
+ * @returns A defensive, deeply frozen manifest copy.
+ */
+export const definePresentationUiLibrary = <
+    const Library extends CratisPresentationUiLibrary,
+>(
+    library: Library,
+): Library => {
+    if (library.profile !== CRATIS_PRESENTATION_PROFILE) {
+        invalidPresentationLibrary(`profile must be '${CRATIS_PRESENTATION_PROFILE}'`);
+    }
+    if (library.abi !== CRATIS_PRESENTATION_ABI_VERSION) {
+        invalidPresentationLibrary(`ABI must be ${CRATIS_PRESENTATION_ABI_VERSION}`);
+    }
+    if (library.level !== 'primitive') {
+        invalidPresentationLibrary("level must be 'primitive'");
+    }
+    if (
+        !Array.isArray(library.profileSlots) ||
+        !hasCanonicalProfileSlots(library.profileSlots)
+    ) {
+        invalidPresentationLibrary(
+            'profileSlots must be the canonical nine-slot profile',
+        );
+    }
+    if (!library.slots || typeof library.slots !== 'object') {
+        invalidPresentationLibrary('slots must be an object');
+    }
+
+    const slotIds = Object.keys(library.slots);
+    if (
+        slotIds.length !== cratisPresentationSlotIds.length ||
+        cratisPresentationSlotIds.some((slotId) => !slotIds.includes(slotId))
+    ) {
+        invalidPresentationLibrary(
+            'slots must contain exactly the nine stable presentation slots',
+        );
+    }
+
+    for (const slotId of cratisPresentationSlotIds) {
+        const declaration = library.slots[slotId] as unknown as
+            Record<string, unknown> | undefined;
+        if (!declaration) {
+            throw new TypeError(
+                `Invalid stable presentation UI library: slot '${slotId}' must provide a declaration.`,
+            );
+        }
+        if (declaration.mode !== 'presentation') {
+            invalidPresentationLibrary(`slot '${slotId}' must use presentation mode`);
+        }
+        if (declaration.fidelity !== 'native' && declaration.fidelity !== 'emulated') {
+            invalidPresentationLibrary(
+                `slot '${slotId}' must use native or emulated fidelity`,
+            );
+        }
+        if (
+            declaration.render === null ||
+            (typeof declaration.render !== 'function' &&
+                typeof declaration.render !== 'object')
+        ) {
+            invalidPresentationLibrary(`slot '${slotId}' must provide a component`);
+        }
+    }
+
+    if (
+        !Array.isArray(library.capabilities) ||
+        library.capabilities.some((capability) => !stableCapabilityIds.has(capability))
+    ) {
+        invalidPresentationLibrary(
+            'capabilities must stay within the stable presentation subset',
+        );
+    }
+
+    return unstable_defineUiLibrary(
+        library as unknown as unstable_UiLibrary,
+    ) as unknown as Library;
+};
diff --git a/Source/scripts/verify-renderer-contracts.mjs b/Source/scripts/verify-renderer-contracts.mjs
index fd77f28f..1e46557a 100644
--- a/Source/scripts/verify-renderer-contracts.mjs
+++ b/Source/scripts/verify-renderer-contracts.mjs
@@ -8,10 +8,10 @@ import { fileURLToPath } from 'node:url';
 
 const packageDir = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
 const schemaPath = path.join(packageDir, 'schemas/ui-adapter.schema.json');
-const fixturePath = path.join(
-    packageDir,
+const fixturePaths = [
     'renderer/for_slot_types/slotTyping.fixture.ts',
-);
+    'renderer/for_slot_types/presentationTyping.fixture.ts',
+].map(relativePath => path.join(packageDir, relativePath));
 const schema = JSON.parse(readFileSync(schemaPath, 'utf8'));
 const packageJson = JSON.parse(readFileSync(path.join(packageDir, 'package.json'), 'utf8'));
 
@@ -156,7 +156,7 @@ const typeCheck = spawnSync(
         'react-jsx',
         '--lib',
         'ESNext,DOM,DOM.Iterable',
-        fixturePath,
+        ...fixturePaths,
     ],
     { cwd: packageDir, encoding: 'utf8', timeout: 120_000 },
 );
@@ -164,7 +164,7 @@ if (typeCheck.status !== 0) {
     console.error(`Renderer slot typing fixture failed:\n${typeCheck.stdout}${typeCheck.stderr}`);
     process.exit(1);
 }
-console.log('Renderer slot typing fixture compiles under strict TypeScript.');
+console.log('Renderer slot typing fixtures compile under strict TypeScript.');
 
 const atomicFacadeFiles = [
     'Common/Tooltip.tsx',
diff --git a/compat-manifest.json b/compat-manifest.json
index 838dbc7d..87574179 100644
--- a/compat-manifest.json
+++ b/compat-manifest.json
@@ -61,7 +61,7 @@
             "name": "@cratis/components.conformance",
             "manifest": "Conformance/package.json",
             "role": "conformance",
-            "version": "0.1.0",
+            "version": "1.0.0",
             "private": false,
             "packageAccess": "public",
             "peerDependencies": {
@@ -76,7 +76,7 @@
             "name": "@cratis/components.mui",
             "manifest": "Adapters/Mui/package.json",
             "role": "renderer-adapter",
-            "version": "0.1.0",
+            "version": "1.0.0",
             "private": false,
             "packageAccess": "public",
             "peerDependencies": {
@@ -100,7 +100,7 @@
             "name": "@cratis/components.primereact",
             "manifest": "Adapters/PrimeReact/package.json",
             "role": "renderer-adapter",
-            "version": "0.1.0",
+            "version": "1.0.0",
             "private": false,
             "packageAccess": "public",
             "peerDependencies": {
@@ -126,7 +126,7 @@
             "name": "@cratis/components.primereact10",
             "manifest": "Adapters/PrimeReact10/package.json",
             "role": "renderer-adapter",
-            "version": "0.1.0",
+            "version": "1.0.0",
             "private": false,
             "packageAccess": "public",
             "peerDependencies": {
diff --git a/scripts/generate-compat-manifest.mjs b/scripts/generate-compat-manifest.mjs
index 5dc8e5d1..4f158c05 100644
--- a/scripts/generate-compat-manifest.mjs
+++ b/scripts/generate-compat-manifest.mjs
@@ -25,10 +25,10 @@ const expectedVersions = new Map([
     ['@cratis/components', '4.0.0'],
     ['@cratis/eslint-plugin-components', '4.0.0'],
     ['@cratis/components-codemods', '4.0.0'],
-    ['@cratis/components.conformance', '0.1.0'],
-    ['@cratis/components.mui', '0.1.0'],
-    ['@cratis/components.primereact', '0.1.0'],
-    ['@cratis/components.primereact10', '0.1.0'],
+    ['@cratis/components.conformance', '1.0.0'],
+    ['@cratis/components.mui', '1.0.0'],
+    ['@cratis/components.primereact', '1.0.0'],
+    ['@cratis/components.primereact10', '1.0.0'],
 ]);
 const rendererAbi = 1;
 const coreTarget = '4.x';

From 8892f971ec77fc29327eb129a89b00ed6b38bb53 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Fri, 28 Aug 2026 21:37:31 +0200
Subject: [PATCH 243/267] Harden renderer adapter boundary evidence

---
 .github/workflows/markdown-verification.yml   |  5 +++
 Adapters/Mui/README.md                        |  2 +-
 ...hen_using_the_mui_presentation_profile.tsx |  2 +-
 Adapters/Mui/package.json                     |  4 +--
 .../Mui/scripts/verify-packed-package.mjs     |  2 +-
 scripts/renderer-adapter-matrix.json          | 31 +++++++++++++++++--
 scripts/renderer-adapter-matrix.md            | 13 +++++---
 .../verify-renderer-adapter-matrix.test.mjs   |  2 +-
 scripts/verify-renderer-adapters.mjs          | 10 ++++--
 yarn.lock                                     |  2 +-
 10 files changed, 56 insertions(+), 17 deletions(-)

diff --git a/.github/workflows/markdown-verification.yml b/.github/workflows/markdown-verification.yml
index 8f8fb2d5..520d6be1 100644
--- a/.github/workflows/markdown-verification.yml
+++ b/.github/workflows/markdown-verification.yml
@@ -13,6 +13,7 @@ on:
             - 'ESLint/*.md'
             - 'Conformance/*.md'
             - 'Adapters/**/*.md'
+            - 'scripts/*.md'
     pull_request:
         branches:
             - '**'
@@ -24,6 +25,7 @@ on:
             - 'ESLint/*.md'
             - 'Conformance/*.md'
             - 'Adapters/**/*.md'
+            - 'scripts/*.md'
 
 concurrency:
     group: ${{ github.workflow }}-${{ github.ref }}
@@ -54,6 +56,7 @@ jobs:
                       ESLint/*.md
                       Conformance/*.md
                       Adapters/**/*.md
+                      scripts/*.md
 
     link-verification:
         runs-on: ubuntu-latest
@@ -73,6 +76,7 @@ jobs:
               run: |
                   node Documentation/verify-local-links.mjs Documentation
                   node Documentation/verify-local-links.mjs Adapters
+                  node Documentation/verify-local-links.mjs scripts
 
             - name: Check external links in consumer documentation
               uses: JustinBeckwith/linkinator-action@7b6b0bc671f6264e1a8daa4488a5bd91ce61dcd4 # v2.4.2
@@ -84,6 +88,7 @@ jobs:
                       ESLint/*.md
                       Conformance/*.md
                       Adapters/**/*.md
+                      scripts/*.md
                       Documentation/**/*.md
                       Documentation/**/*.mdx
                   markdown: true
diff --git a/Adapters/Mui/README.md b/Adapters/Mui/README.md
index b3c7a837..3967a764 100644
--- a/Adapters/Mui/README.md
+++ b/Adapters/Mui/README.md
@@ -57,7 +57,7 @@ concerns and do not justify a Core ABI change.
 ## Peer policy
 
 MUI Core is bounded to `>=9 <10`, `@emotion/react` to `>=11.5 <12`,
-`@emotion/styled` to `>=11.3 <12`, and React/ReactDOM to React 19. Vendor packages are peers.
+`@emotion/styled` to `>=11.11 <12`, and React/ReactDOM to React 19. Vendor packages are peers.
 The repository's packed-consumer matrix proves both these effective lower boundaries and the
 current-highest compatible boundary; exact current versions remain dev dependencies only.
 
diff --git a/Adapters/Mui/for_adapter/when_using_the_mui_presentation_profile.tsx b/Adapters/Mui/for_adapter/when_using_the_mui_presentation_profile.tsx
index 8b98f04c..123cebee 100644
--- a/Adapters/Mui/for_adapter/when_using_the_mui_presentation_profile.tsx
+++ b/Adapters/Mui/for_adapter/when_using_the_mui_presentation_profile.tsx
@@ -208,7 +208,7 @@ describe('when using the MUI stable presentation profile', () => {
         expect(packageJson.peerDependencies).to.include({
             '@mui/material': '>=9 <10',
             '@emotion/react': '>=11.5 <12',
-            '@emotion/styled': '>=11.3 <12',
+            '@emotion/styled': '>=11.11 <12',
             react: '^19.0.0',
             'react-dom': '^19.0.0',
             '@cratis/components': '>=4 <5',
diff --git a/Adapters/Mui/package.json b/Adapters/Mui/package.json
index f6d96240..a1f6d364 100644
--- a/Adapters/Mui/package.json
+++ b/Adapters/Mui/package.json
@@ -84,7 +84,7 @@
         "upstream": {
             "@mui/material": ">=9 <10",
             "@emotion/react": ">=11.5 <12",
-            "@emotion/styled": ">=11.3 <12",
+            "@emotion/styled": ">=11.11 <12",
             "react": "^19.0.0",
             "react-dom": "^19.0.0"
         }
@@ -101,7 +101,7 @@
     "peerDependencies": {
         "@cratis/components": ">=4 <5",
         "@emotion/react": ">=11.5 <12",
-        "@emotion/styled": ">=11.3 <12",
+        "@emotion/styled": ">=11.11 <12",
         "@mui/material": ">=9 <10",
         "react": "^19.0.0",
         "react-dom": "^19.0.0"
diff --git a/Adapters/Mui/scripts/verify-packed-package.mjs b/Adapters/Mui/scripts/verify-packed-package.mjs
index 0707f188..c4069b51 100644
--- a/Adapters/Mui/scripts/verify-packed-package.mjs
+++ b/Adapters/Mui/scripts/verify-packed-package.mjs
@@ -119,7 +119,7 @@ try {
     const expectedPeers = {
         '@cratis/components': '>=4 <5',
         '@emotion/react': '>=11.5 <12',
-        '@emotion/styled': '>=11.3 <12',
+        '@emotion/styled': '>=11.11 <12',
         '@mui/material': '>=9 <10',
         react: '^19.0.0',
         'react-dom': '^19.0.0',
diff --git a/scripts/renderer-adapter-matrix.json b/scripts/renderer-adapter-matrix.json
index 7997c651..73d9c7b8 100644
--- a/scripts/renderer-adapter-matrix.json
+++ b/scripts/renderer-adapter-matrix.json
@@ -29,10 +29,25 @@
             "package": "@cratis/arc.react",
             "dependency": "rxjs"
         },
+        {
+            "adapter": "primereact11",
+            "package": "@primereact/headless",
+            "dependency": "react"
+        },
+        {
+            "adapter": "primereact11",
+            "package": "@primereact/styles",
+            "dependency": "@primeuix/motion"
+        },
         {
             "adapter": "primereact11",
             "package": "@primereact/ui",
             "dependency": "@primereact/core"
+        },
+        {
+            "adapter": "primereact11",
+            "package": "@primereact/ui",
+            "dependency": "react-dom"
         }
     ],
     "adapters": {
@@ -44,7 +59,7 @@
             "boundaries": {
                 "minimum": {
                     "@emotion/react": "11.5.0",
-                    "@emotion/styled": "11.3.0",
+                    "@emotion/styled": "11.11.0",
                     "@mui/material": "9.0.0"
                 },
                 "current": {
@@ -59,17 +74,29 @@
             "directory": "Adapters/PrimeReact",
             "manifestExport": "primeReactUiLibrary",
             "rendererId": "cratis-primereact",
-            "alignedPackages": ["@primereact/core", "@primereact/ui", "primereact"],
+            "alignedPackages": [
+                "@primereact/core",
+                "@primereact/headless",
+                "@primereact/styles",
+                "@primereact/ui",
+                "primereact"
+            ],
             "boundaries": {
                 "minimum": {
                     "@primereact/core": "11.0.0",
+                    "@primereact/headless": "11.0.0",
+                    "@primereact/styles": "11.0.0",
                     "@primereact/ui": "11.0.0",
+                    "@primeuix/motion": "1.0.0",
                     "@primeuix/themes": "3.0.0",
                     "primereact": "11.0.0"
                 },
                 "current": {
                     "@primereact/core": "11.1.0",
+                    "@primereact/headless": "11.1.0",
+                    "@primereact/styles": "11.1.0",
                     "@primereact/ui": "11.1.0",
+                    "@primeuix/motion": "1.0.0",
                     "@primeuix/themes": "3.0.0",
                     "primereact": "11.1.0"
                 }
diff --git a/scripts/renderer-adapter-matrix.md b/scripts/renderer-adapter-matrix.md
index 681edb95..184287f6 100644
--- a/scripts/renderer-adapter-matrix.md
+++ b/scripts/renderer-adapter-matrix.md
@@ -33,11 +33,14 @@ pnpm uses `--strict-peer-dependencies`, and Yarn uses Plug'n'Play rather than `n
 
 ## Narrow Yarn PnP corrections
 
-The matrix records only two confirmed upstream manifest omissions:
-
-- `@cratis/arc.react@22.5.0` imports `rxjs` without declaring it; and
-- each exact tested `@primereact/ui` 11 package uses the aligned `@primereact/core` package without
-  declaring that direct dependency.
+The matrix records only confirmed upstream manifest omissions:
+
+- `@cratis/arc.react@22.5.0` imports `rxjs` without declaring it;
+- each tested `@primereact/headless` 11 package needs React for its Core/headless dependencies;
+- each tested `@primereact/styles` 11 package needs `@primeuix/motion` for its types;
+- each tested `@primereact/ui` 11 package uses the aligned `@primereact/core` package without
+  declaring that direct dependency; and
+- each tested `@primereact/ui` 11 package needs ReactDOM for the aligned `primereact` package.
 
 The verifier derives exact `packageExtensions` selectors and dependency versions from the selected
 fixture. These extensions add missing dependency edges only. They do not widen or replace any peer
diff --git a/scripts/verify-renderer-adapter-matrix.test.mjs b/scripts/verify-renderer-adapter-matrix.test.mjs
index e768ed9f..35d31864 100644
--- a/scripts/verify-renderer-adapter-matrix.test.mjs
+++ b/scripts/verify-renderer-adapter-matrix.test.mjs
@@ -53,6 +53,6 @@ test('a skewed PrimeReact 11 boundary fails before installation', () => {
 
     assert.throws(
         () => validateMatrix(invalid, manifests),
-        /primereact11\/minimum must keep @primereact\/core, @primereact\/ui, primereact aligned/,
+        /primereact11\/minimum must keep .* aligned/,
     );
 });
diff --git a/scripts/verify-renderer-adapters.mjs b/scripts/verify-renderer-adapters.mjs
index e9794b88..0d599320 100644
--- a/scripts/verify-renderer-adapters.mjs
+++ b/scripts/verify-renderer-adapters.mjs
@@ -217,9 +217,9 @@ const verifyFixture = (adapterKey, boundary, manager) => {
     try {
         const coreArchive = path.join(temporary, 'components-core.tgz');
         const adapterArchive = path.join(temporary, 'components-adapter.tgz');
-        run('yarn', ['workspace', '@cratis/components', 'prepare']);
-        run('yarn', ['workspace', fixture.adapter.workspace, 'clean']);
-        run('yarn', ['workspace', fixture.adapter.workspace, 'build']);
+        run('yarn', ['prepare'], path.join(repositoryDirectory, 'Source'));
+        run('yarn', ['clean'], path.join(repositoryDirectory, fixture.adapter.directory));
+        run('yarn', ['build'], path.join(repositoryDirectory, fixture.adapter.directory));
         run('yarn', ['workspace', '@cratis/components', 'pack', '--out', coreArchive]);
         run('yarn', [
             'workspace',
@@ -228,6 +228,10 @@ const verifyFixture = (adapterKey, boundary, manager) => {
             '--out',
             adapterArchive,
         ]);
+        run(process.execPath, [
+            path.join(repositoryDirectory, 'Source/scripts/verify-package-archive.mjs'),
+            coreArchive,
+        ]);
 
         const packedCore = unpackManifest(
             coreArchive,
diff --git a/yarn.lock b/yarn.lock
index 601db878..cb5e8e80 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -338,7 +338,7 @@ __metadata:
   peerDependencies:
     "@cratis/components": ">=4 <5"
     "@emotion/react": ">=11.5 <12"
-    "@emotion/styled": ">=11.3 <12"
+    "@emotion/styled": ">=11.11 <12"
     "@mui/material": ">=9 <10"
     react: ^19.0.0
     react-dom: ^19.0.0

From 0c2227c76d5d98cfc7305c13ae745bf54b39e01c Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Fri, 28 Aug 2026 21:42:00 +0200
Subject: [PATCH 244/267] Harden stable presentation capabilities

---
 ...04-stable-presentation-renderer-profile.md |  7 +-
 .../renderers/primitive-adaptation.md         |  8 +-
 Source/renderer/README.md                     |  5 +-
 ...when_defining_a_presentation_ui_library.ts | 81 ++++++++++++++-----
 .../presentationTyping.fixture.ts             |  6 +-
 Source/renderer/presentation.ts               | 45 +++++++++--
 6 files changed, 116 insertions(+), 36 deletions(-)

diff --git a/Documentation/decisions/0004-stable-presentation-renderer-profile.md b/Documentation/decisions/0004-stable-presentation-renderer-profile.md
index 997074e1..313de3ec 100644
--- a/Documentation/decisions/0004-stable-presentation-renderer-profile.md
+++ b/Documentation/decisions/0004-stable-presentation-renderer-profile.md
@@ -40,9 +40,10 @@ Renderer ABI major 1 promotes one immutable profile through
 The stable API is identified by `CRATIS_PRESENTATION_PROFILE`,
 `CRATIS_PRESENTATION_ABI_VERSION`, and `cratisPresentationSlotIds`. Its
 `CratisPresentationUiLibrary` declaration requires all nine slots, `presentation` behavior
-ownership, and `native` or `emulated` fidelity. `definePresentationUiLibrary()` validates the same
-boundary for JavaScript callers before defensively copying and freezing the manifest through the
-shared manifest machinery.
+ownership, `native` or `emulated` fidelity, and the `slot.render`, `parts.passthrough`, and
+`ssr.staticRender` capabilities. `definePresentationUiLibrary()` validates the same boundary for
+JavaScript callers, rejects duplicate capabilities, and defensively copies/freezes the manifest
+through the shared manifest machinery.
 
 The profile also stabilizes the non-secret boolean setup contract used by certified providers:
 `CratisRendererSetupExtensions`, `CratisRendererSetup`, and
diff --git a/Documentation/renderers/primitive-adaptation.md b/Documentation/renderers/primitive-adaptation.md
index 047ecebb..7d216cc7 100644
--- a/Documentation/renderers/primitive-adaptation.md
+++ b/Documentation/renderers/primitive-adaptation.md
@@ -44,9 +44,11 @@ import {
 ```
 
 `CratisPresentationSlotMap` requires all nine exact component contracts. Every declaration must use
-`mode: 'presentation'` and either `fidelity: 'native'` or `fidelity: 'emulated'`.
-`definePresentationUiLibrary()` checks the same requirements for JavaScript callers and returns a
-defensive frozen copy. Use `CratisRendererSetupExtensions` only for non-secret boolean setup
+`mode: 'presentation'` and either `fidelity: 'native'` or `fidelity: 'emulated'`. A stable manifest
+must declare `slot.render`, `parts.passthrough`, and `ssr.staticRender`; RTL, forced-colors, and
+reduced-motion capabilities remain optional evidence. `definePresentationUiLibrary()` checks the
+same requirements for JavaScript callers, rejects duplicate capabilities, and returns a defensive
+frozen copy. Use `CratisRendererSetupExtensions` only for non-secret boolean setup
 attestations and `CratisOverlayEnvironment` for an independent host portal-container lookup.
 
 Removing or changing a v1 slot is a breaking change. Adding a required slot needs a new profile and
diff --git a/Source/renderer/README.md b/Source/renderer/README.md
index a0bc8c33..471491b4 100644
--- a/Source/renderer/README.md
+++ b/Source/renderer/README.md
@@ -38,8 +38,9 @@ whether setup occurred.
 
 The nine E1 presentation candidates are the immutable stable façade exposed through
 `CratisPresentationUiLibrary` and `definePresentationUiLibrary`. Its runtime helper requires all
-nine slots, presentation mode, supported fidelity, the exact profile and ABI, and then freezes the
-manifest through the existing machinery. E2 routes tooltip, dropdown, dialog, date picker, and
+nine slots, presentation mode, supported fidelity, the exact profile and ABI, and the stable render,
+parts, and static-SSR capabilities; it rejects duplicate capabilities and then freezes the manifest
+through the existing machinery. E2 routes tooltip, dropdown, dialog, date picker, and
 table paginator as atomic slots whose external adapters replace Core interaction ownership entirely.
 Their Core implementations self-host React Aria portals through the local overlay environment only
 around the overlay-owning subtree; merely reading the hook, rendering a closed control, or rendering
diff --git a/Source/renderer/for_manifest/when_defining_a_presentation_ui_library.ts b/Source/renderer/for_manifest/when_defining_a_presentation_ui_library.ts
index 64d5c5eb..23205202 100644
--- a/Source/renderer/for_manifest/when_defining_a_presentation_ui_library.ts
+++ b/Source/renderer/for_manifest/when_defining_a_presentation_ui_library.ts
@@ -2,6 +2,8 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import type { ComponentType } from 'react';
+import { expect } from 'chai';
+import { describe, it } from 'vitest';
 import {
     CRATIS_PRESENTATION_ABI_VERSION,
     CRATIS_PRESENTATION_PROFILE,
@@ -39,7 +41,11 @@ const validLibrary = (): CratisPresentationUiLibrary => ({
     level: 'primitive',
     profile: CRATIS_PRESENTATION_PROFILE,
     profileSlots: cratisPresentationSlotIds,
-    capabilities: ['slot.render', 'parts.passthrough'],
+    capabilities: [
+        'slot.render',
+        'parts.passthrough',
+        'ssr.staticRender',
+    ],
     slots: validSlots(),
 });
 
@@ -47,43 +53,51 @@ const defineRuntime = definePresentationUiLibrary as (
     library: unknown,
 ) => CratisPresentationUiLibrary;
 
+const mutableLibrary = (): Record<string, unknown> => {
+    // SAFETY: runtime validation specs deliberately bypass the compile-time contract to exercise
+    // malformed JavaScript inputs without weakening the production helper's public type.
+    return validLibrary() as unknown as Record<string, unknown>;
+};
+
 describe('when defining a stable presentation UI library', () => {
     it('should freeze the complete manifest through the shared manifest machinery', () => {
         const input = validLibrary();
         const result = definePresentationUiLibrary(input);
 
-        result.should.not.equal(input);
-        result.profile.should.equal(CRATIS_PRESENTATION_PROFILE);
-        result.profileSlots.should.deep.equal(cratisPresentationSlotIds);
-        Object.isFrozen(result).should.equal(true);
-        Object.isFrozen(result.capabilities).should.equal(true);
-        Object.isFrozen(result.profileSlots).should.equal(true);
-        Object.isFrozen(result.slots).should.equal(true);
-        cratisPresentationSlotIds.every((slotId) =>
-            Object.isFrozen(result.slots[slotId]),
-        ).should.equal(true);
+        expect(result).not.to.equal(input);
+        expect(result.profile).to.equal(CRATIS_PRESENTATION_PROFILE);
+        expect(result.profileSlots).to.deep.equal(cratisPresentationSlotIds);
+        expect(Object.isFrozen(result)).to.equal(true);
+        expect(Object.isFrozen(result.capabilities)).to.equal(true);
+        expect(Object.isFrozen(result.profileSlots)).to.equal(true);
+        expect(Object.isFrozen(result.slots)).to.equal(true);
+        expect(
+            cratisPresentationSlotIds.every((slotId) =>
+                Object.isFrozen(result.slots[slotId]),
+            ),
+        ).to.equal(true);
     });
 
     it('should reject a missing stable slot at runtime', () => {
-        const candidate = validLibrary() as unknown as Record<string, unknown>;
+        const candidate = mutableLibrary();
         const slots = { ...validSlots() } as Record<string, unknown>;
         Reflect.deleteProperty(slots, 'common.surface');
         candidate.slots = slots;
 
-        (() => defineRuntime(candidate)).should.throw(
+        expect(() => defineRuntime(candidate)).to.throw(
             TypeError,
             'exactly the nine stable presentation slots',
         );
     });
 
     it('should reject an extra slot at runtime', () => {
-        const candidate = validLibrary() as unknown as Record<string, unknown>;
+        const candidate = mutableLibrary();
         candidate.slots = {
             ...validSlots(),
             'common.tooltip': declaration<'common.button'>(),
         };
 
-        (() => defineRuntime(candidate)).should.throw(
+        expect(() => defineRuntime(candidate)).to.throw(
             TypeError,
             'exactly the nine stable presentation slots',
         );
@@ -95,7 +109,7 @@ describe('when defining a stable presentation UI library', () => {
             profile: 'future-presentation/v2',
         };
 
-        (() => defineRuntime(candidate)).should.throw(
+        expect(() => defineRuntime(candidate)).to.throw(
             TypeError,
             `profile must be '${CRATIS_PRESENTATION_PROFILE}'`,
         );
@@ -107,14 +121,14 @@ describe('when defining a stable presentation UI library', () => {
             profileSlots: cratisPresentationSlotIds.slice(0, -1),
         };
 
-        (() => defineRuntime(candidate)).should.throw(
+        expect(() => defineRuntime(candidate)).to.throw(
             TypeError,
             'profileSlots must be the canonical nine-slot profile',
         );
     });
 
     it('should reject atomic mode at runtime', () => {
-        const candidate = validLibrary() as unknown as Record<string, unknown>;
+        const candidate = mutableLibrary();
         candidate.slots = {
             ...validSlots(),
             'common.button': {
@@ -123,14 +137,14 @@ describe('when defining a stable presentation UI library', () => {
             },
         };
 
-        (() => defineRuntime(candidate)).should.throw(
+        expect(() => defineRuntime(candidate)).to.throw(
             TypeError,
             "slot 'common.button' must use presentation mode",
         );
     });
 
     it('should reject unsupported fidelity at runtime', () => {
-        const candidate = validLibrary() as unknown as Record<string, unknown>;
+        const candidate = mutableLibrary();
         candidate.slots = {
             ...validSlots(),
             'common.button': {
@@ -139,9 +153,34 @@ describe('when defining a stable presentation UI library', () => {
             },
         };
 
-        (() => defineRuntime(candidate)).should.throw(
+        expect(() => defineRuntime(candidate)).to.throw(
             TypeError,
             "slot 'common.button' must use native or emulated fidelity",
         );
     });
+
+    it('should reject a missing required presentation capability at runtime', () => {
+        const candidate = mutableLibrary();
+        candidate.capabilities = ['slot.render', 'parts.passthrough'];
+
+        expect(() => defineRuntime(candidate)).to.throw(
+            TypeError,
+            'capabilities must include slot.render, parts.passthrough, and ssr.staticRender',
+        );
+    });
+
+    it('should reject duplicate capabilities at runtime', () => {
+        const candidate = mutableLibrary();
+        candidate.capabilities = [
+            'slot.render',
+            'parts.passthrough',
+            'ssr.staticRender',
+            'slot.render',
+        ];
+
+        expect(() => defineRuntime(candidate)).to.throw(
+            TypeError,
+            'capabilities must not contain duplicates',
+        );
+    });
 });
diff --git a/Source/renderer/for_slot_types/presentationTyping.fixture.ts b/Source/renderer/for_slot_types/presentationTyping.fixture.ts
index 4d7fb085..e43a58e5 100644
--- a/Source/renderer/for_slot_types/presentationTyping.fixture.ts
+++ b/Source/renderer/for_slot_types/presentationTyping.fixture.ts
@@ -75,7 +75,11 @@ const library: CratisPresentationUiLibrary = definePresentationUiLibrary({
     level: 'primitive',
     profile: CRATIS_PRESENTATION_PROFILE,
     profileSlots: cratisPresentationSlotIds,
-    capabilities: ['slot.render', 'parts.passthrough'],
+    capabilities: [
+        'slot.render',
+        'parts.passthrough',
+        'ssr.staticRender',
+    ],
     slots,
 });
 
diff --git a/Source/renderer/presentation.ts b/Source/renderer/presentation.ts
index c462f3de..b81e662d 100644
--- a/Source/renderer/presentation.ts
+++ b/Source/renderer/presentation.ts
@@ -80,6 +80,18 @@ export type CratisPresentationCapabilityId =
     | 'forcedColors'
     | 'motion.reduced';
 
+type CratisPresentationOptionalCapabilityId = Exclude<
+    CratisPresentationCapabilityId,
+    'slot.render' | 'parts.passthrough' | 'ssr.staticRender'
+>;
+
+type CratisPresentationCapabilities = readonly [
+    'slot.render',
+    'parts.passthrough',
+    'ssr.staticRender',
+    ...CratisPresentationOptionalCapabilityId[],
+];
+
 /** Immutable manifest for one implementation of the stable presentation profile. */
 export interface CratisPresentationUiLibrary {
     /** Stable, package-local renderer identity used for diagnostics and telemetry. */
@@ -94,18 +106,22 @@ export interface CratisPresentationUiLibrary {
     readonly profile: typeof CRATIS_PRESENTATION_PROFILE;
     /** Canonical immutable list of all nine stable slots. */
     readonly profileSlots: typeof cratisPresentationSlotIds;
-    /** Stable capabilities honestly supported by this implementation. */
-    readonly capabilities: readonly CratisPresentationCapabilityId[];
+    /** Required presentation capabilities followed by any optional stable capabilities. */
+    readonly capabilities: CratisPresentationCapabilities;
     /** Complete nine-slot presentation implementation. */
     readonly slots: CratisPresentationSlotMap;
     /** Optional provider mounted once around the selected renderer scope. */
     readonly Provider?: ComponentType<CratisPresentationUiLibraryProviderProps>;
 }
 
-const stableCapabilityIds = new Set<CratisPresentationCapabilityId>([
+const requiredCapabilityIds = [
     'slot.render',
     'parts.passthrough',
     'ssr.staticRender',
+] as const;
+
+const stableCapabilityIds = new Set<CratisPresentationCapabilityId>([
+    ...requiredCapabilityIds,
     'rtl',
     'forcedColors',
     'motion.reduced',
@@ -163,6 +179,8 @@ export const definePresentationUiLibrary = <
     }
 
     for (const slotId of cratisPresentationSlotIds) {
+        // SAFETY: the canonical slot list indexes the complete stable map; the wider record view
+        // exists only so runtime JavaScript callers can be checked before their value is frozen.
         const declaration = library.slots[slotId] as unknown as
             Record<string, unknown> | undefined;
         if (!declaration) {
@@ -195,8 +213,23 @@ export const definePresentationUiLibrary = <
             'capabilities must stay within the stable presentation subset',
         );
     }
+    if (
+        requiredCapabilityIds.some(
+            (capability) => !library.capabilities.includes(capability),
+        )
+    ) {
+        invalidPresentationLibrary(
+            'capabilities must include slot.render, parts.passthrough, and ssr.staticRender',
+        );
+    }
+    if (new Set(library.capabilities).size !== library.capabilities.length) {
+        invalidPresentationLibrary('capabilities must not contain duplicates');
+    }
 
-    return unstable_defineUiLibrary(
-        library as unknown as unstable_UiLibrary,
-    ) as unknown as Library;
+    // SAFETY: every stable field and all nine declarations were validated above, so the manifest
+    // satisfies the broader internal library shape without admitting an atomic or unknown slot.
+    const unstableLibrary = library as unknown as unstable_UiLibrary;
+    const frozenLibrary = unstable_defineUiLibrary(unstableLibrary);
+    // SAFETY: the shared freezer copies values without changing the validated stable shape.
+    return frozenLibrary as unknown as Library;
 };

From 6edabc36e2e95b4712d734a15304d2410f00db11 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Fri, 28 Aug 2026 21:58:25 +0200
Subject: [PATCH 245/267] Complete stable renderer boundary validation

---
 Adapters/Mui/src/index.tsx                    |  4 +--
 Adapters/PrimeReact/src/index.tsx             |  4 +--
 Adapters/PrimeReact10/src/index.tsx           |  4 +--
 .../given/plainDomPresentationRenderer.tsx    |  4 +--
 ...when_defining_a_presentation_ui_library.ts | 17 +++++-------
 .../presentationTyping.fixture.ts             | 26 +++++--------------
 Source/renderer/index.ts                      |  1 +
 Source/renderer/presentation.ts               |  3 ++-
 compat-manifest.json                          |  8 +++---
 scripts/lib/renderer-adapter-matrix.mjs       | 25 +++++++++++++++++-
 scripts/renderer-adapter-matrix.json          | 12 +++++++++
 scripts/renderer-adapter-matrix.md            |  4 +--
 .../verify-renderer-adapter-matrix.test.mjs   | 11 ++++++++
 scripts/verify-renderer-adapters.mjs          | 21 ++++++++-------
 14 files changed, 89 insertions(+), 55 deletions(-)

diff --git a/Adapters/Mui/src/index.tsx b/Adapters/Mui/src/index.tsx
index 77273e6c..63b06c1a 100644
--- a/Adapters/Mui/src/index.tsx
+++ b/Adapters/Mui/src/index.tsx
@@ -46,7 +46,7 @@ import {
     CRATIS_PRESENTATION_PROFILE,
     cratisPresentationSlotIds,
     definePresentationUiLibrary,
-    type CratisPresentationCapabilityId,
+    type CratisPresentationCapabilities,
     type CratisPresentationSlotDeclaration,
     type CratisPresentationSlotId,
     type CratisPresentationUiLibrary,
@@ -56,7 +56,7 @@ const capabilities = Object.freeze([
     'slot.render',
     'parts.passthrough',
     'ssr.staticRender',
-] satisfies readonly CratisPresentationCapabilityId[]);
+] satisfies CratisPresentationCapabilities);
 
 const MuiAdapterProvider = ({ children }: { readonly children: ReactNode }) => {
     const outerTheme = useTheme();
diff --git a/Adapters/PrimeReact/src/index.tsx b/Adapters/PrimeReact/src/index.tsx
index b590099d..482636e3 100644
--- a/Adapters/PrimeReact/src/index.tsx
+++ b/Adapters/PrimeReact/src/index.tsx
@@ -45,7 +45,7 @@ import {
     definePresentationUiLibrary,
     unstable_AdapterError,
     unstable_adapterErrorCodes,
-    type CratisPresentationCapabilityId,
+    type CratisPresentationCapabilities,
     type CratisPresentationSlotDeclaration,
     type CratisPresentationSlotId,
     type CratisPresentationUiLibrary,
@@ -63,7 +63,7 @@ const capabilities = Object.freeze([
     'slot.render',
     'parts.passthrough',
     'ssr.staticRender',
-] satisfies readonly CratisPresentationCapabilityId[]);
+] satisfies CratisPresentationCapabilities);
 
 const licenseConfiguredAttestation = 'cratis-primereact.license-configured';
 
diff --git a/Adapters/PrimeReact10/src/index.tsx b/Adapters/PrimeReact10/src/index.tsx
index b65f6165..28ffd493 100644
--- a/Adapters/PrimeReact10/src/index.tsx
+++ b/Adapters/PrimeReact10/src/index.tsx
@@ -55,7 +55,7 @@ import {
     CRATIS_PRESENTATION_PROFILE,
     cratisPresentationSlotIds,
     definePresentationUiLibrary,
-    type CratisPresentationCapabilityId,
+    type CratisPresentationCapabilities,
     type CratisPresentationSlotDeclaration,
     type CratisPresentationSlotId,
     type CratisPresentationUiLibrary,
@@ -66,7 +66,7 @@ const capabilities = Object.freeze([
     'slot.render',
     'parts.passthrough',
     'ssr.staticRender',
-] satisfies readonly CratisPresentationCapabilityId[]);
+] satisfies CratisPresentationCapabilities);
 
 const PrimeReact10AdapterProvider = ({
     children,
diff --git a/Conformance/for_plain_dom_renderer/given/plainDomPresentationRenderer.tsx b/Conformance/for_plain_dom_renderer/given/plainDomPresentationRenderer.tsx
index d6d174cd..7966a7a6 100644
--- a/Conformance/for_plain_dom_renderer/given/plainDomPresentationRenderer.tsx
+++ b/Conformance/for_plain_dom_renderer/given/plainDomPresentationRenderer.tsx
@@ -33,7 +33,7 @@ import {
     CRATIS_PRESENTATION_PROFILE,
     cratisPresentationSlotIds,
     definePresentationUiLibrary,
-    type CratisPresentationCapabilityId,
+    type CratisPresentationCapabilities,
     type CratisPresentationSlotDeclaration,
     type CratisPresentationSlotId,
 } from '@cratis/components/renderer';
@@ -45,7 +45,7 @@ const capabilities = Object.freeze([
     'rtl',
     'forcedColors',
     'motion.reduced',
-] satisfies readonly CratisPresentationCapabilityId[]);
+] satisfies CratisPresentationCapabilities);
 
 const classNames = (...values: readonly (string | undefined)[]) =>
     values.filter(Boolean).join(' ');
diff --git a/Source/renderer/for_manifest/when_defining_a_presentation_ui_library.ts b/Source/renderer/for_manifest/when_defining_a_presentation_ui_library.ts
index 23205202..52fea429 100644
--- a/Source/renderer/for_manifest/when_defining_a_presentation_ui_library.ts
+++ b/Source/renderer/for_manifest/when_defining_a_presentation_ui_library.ts
@@ -16,11 +16,12 @@ import {
     type CratisPresentationUiLibrary,
 } from '..';
 
-const declaration = <SlotId extends CratisPresentationSlotId>() => ({
-    mode: 'presentation',
-    fidelity: 'native',
-    render: (() => null) as ComponentType<CratisPresentationSlots[SlotId]>,
-}) satisfies CratisPresentationSlotDeclaration<SlotId>;
+const declaration = <SlotId extends CratisPresentationSlotId>() =>
+    ({
+        mode: 'presentation',
+        fidelity: 'native',
+        render: (() => null) as ComponentType<CratisPresentationSlots[SlotId]>,
+    }) satisfies CratisPresentationSlotDeclaration<SlotId>;
 
 const validSlots = (): CratisPresentationSlotMap => ({
     'common.button': declaration<'common.button'>(),
@@ -41,11 +42,7 @@ const validLibrary = (): CratisPresentationUiLibrary => ({
     level: 'primitive',
     profile: CRATIS_PRESENTATION_PROFILE,
     profileSlots: cratisPresentationSlotIds,
-    capabilities: [
-        'slot.render',
-        'parts.passthrough',
-        'ssr.staticRender',
-    ],
+    capabilities: ['slot.render', 'parts.passthrough', 'ssr.staticRender'],
     slots: validSlots(),
 });
 
diff --git a/Source/renderer/for_slot_types/presentationTyping.fixture.ts b/Source/renderer/for_slot_types/presentationTyping.fixture.ts
index e43a58e5..2dd7210c 100644
--- a/Source/renderer/for_slot_types/presentationTyping.fixture.ts
+++ b/Source/renderer/for_slot_types/presentationTyping.fixture.ts
@@ -28,23 +28,13 @@ declare module '@cratis/components/renderer' {
 }
 
 declare const Button: ComponentType<CratisPresentationSlots['common.button']>;
-declare const IconButton: ComponentType<
-    CratisPresentationSlots['common.iconButton']
->;
-declare const TextInput: ComponentType<
-    CratisPresentationSlots['common.textInput']
->;
-declare const TextArea: ComponentType<
-    CratisPresentationSlots['common.textArea']
->;
-declare const Checkbox: ComponentType<
-    CratisPresentationSlots['common.checkbox']
->;
+declare const IconButton: ComponentType<CratisPresentationSlots['common.iconButton']>;
+declare const TextInput: ComponentType<CratisPresentationSlots['common.textInput']>;
+declare const TextArea: ComponentType<CratisPresentationSlots['common.textArea']>;
+declare const Checkbox: ComponentType<CratisPresentationSlots['common.checkbox']>;
 declare const Radio: ComponentType<CratisPresentationSlots['common.radio']>;
 declare const Switch: ComponentType<CratisPresentationSlots['common.switch']>;
-declare const Progress: ComponentType<
-    CratisPresentationSlots['common.progress']
->;
+declare const Progress: ComponentType<CratisPresentationSlots['common.progress']>;
 declare const Surface: ComponentType<CratisPresentationSlots['common.surface']>;
 declare const Tooltip: ComponentType<{ readonly tooltip: string }>;
 
@@ -75,11 +65,7 @@ const library: CratisPresentationUiLibrary = definePresentationUiLibrary({
     level: 'primitive',
     profile: CRATIS_PRESENTATION_PROFILE,
     profileSlots: cratisPresentationSlotIds,
-    capabilities: [
-        'slot.render',
-        'parts.passthrough',
-        'ssr.staticRender',
-    ],
+    capabilities: ['slot.render', 'parts.passthrough', 'ssr.staticRender'],
     slots,
 });
 
diff --git a/Source/renderer/index.ts b/Source/renderer/index.ts
index cdf0d041..333f7a93 100644
--- a/Source/renderer/index.ts
+++ b/Source/renderer/index.ts
@@ -84,6 +84,7 @@ export {
     CRATIS_PRESENTATION_PROFILE,
     cratisPresentationSlotIds,
     definePresentationUiLibrary,
+    type CratisPresentationCapabilities,
     type CratisPresentationCapabilityId,
     type CratisPresentationSlotDeclaration,
     type CratisPresentationSlotId,
diff --git a/Source/renderer/presentation.ts b/Source/renderer/presentation.ts
index b81e662d..517b6cc6 100644
--- a/Source/renderer/presentation.ts
+++ b/Source/renderer/presentation.ts
@@ -85,7 +85,8 @@ type CratisPresentationOptionalCapabilityId = Exclude<
     'slot.render' | 'parts.passthrough' | 'ssr.staticRender'
 >;
 
-type CratisPresentationCapabilities = readonly [
+/** Required presentation capabilities followed by optional stable evidence capabilities. */
+export type CratisPresentationCapabilities = readonly [
     'slot.render',
     'parts.passthrough',
     'ssr.staticRender',
diff --git a/compat-manifest.json b/compat-manifest.json
index 87574179..d02138c5 100644
--- a/compat-manifest.json
+++ b/compat-manifest.json
@@ -81,15 +81,15 @@
             "packageAccess": "public",
             "peerDependencies": {
                 "@cratis/components": ">=4 <5",
-                "@emotion/react": ">=11 <12",
-                "@emotion/styled": ">=11 <12",
+                "@emotion/react": ">=11.5 <12",
+                "@emotion/styled": ">=11.11 <12",
                 "@mui/material": ">=9 <10",
                 "react": "^19.0.0",
                 "react-dom": "^19.0.0"
             },
             "upstream": {
-                "@emotion/react": ">=11 <12",
-                "@emotion/styled": ">=11 <12",
+                "@emotion/react": ">=11.5 <12",
+                "@emotion/styled": ">=11.11 <12",
                 "@mui/material": ">=9 <10",
                 "react": "^19.0.0",
                 "react-dom": "^19.0.0"
diff --git a/scripts/lib/renderer-adapter-matrix.mjs b/scripts/lib/renderer-adapter-matrix.mjs
index 3ad42455..15d865e0 100644
--- a/scripts/lib/renderer-adapter-matrix.mjs
+++ b/scripts/lib/renderer-adapter-matrix.mjs
@@ -6,7 +6,16 @@ import semver from 'semver';
 
 const boundaryNames = ['minimum', 'current'];
 
-export const readJson = (path) => JSON.parse(readFileSync(path, 'utf8'));
+export const readJson = (filePath) => {
+    try {
+        return JSON.parse(readFileSync(filePath, 'utf8'));
+    } catch (error) {
+        throw new Error(
+            `Could not parse renderer adapter matrix input '${filePath}': ${error instanceof Error ? error.message : String(error)}.`,
+            { cause: error },
+        );
+    }
+};
 
 export const createFixture = (matrix, adapterKey, boundary) => {
     const adapter = matrix.adapters?.[adapterKey];
@@ -139,6 +148,20 @@ export const validateMatrix = (matrix, manifests) => {
     for (const [adapterKey, adapter] of Object.entries(matrix.adapters ?? {})) {
         const manifest = manifests[adapter.workspace];
         if (!manifest) throw new Error(`Manifest for ${adapter.workspace} is required.`);
+        for (const [packageName, specifier] of Object.entries(
+            adapter.versionProbeSpecifiers ?? {},
+        )) {
+            if (!(packageName in (manifest.cratis?.upstream ?? {}))) {
+                throw new Error(
+                    `${adapterKey} version probe names non-upstream package '${packageName}'.`,
+                );
+            }
+            if (typeof specifier !== 'string' || specifier.length === 0) {
+                throw new Error(
+                    `${adapterKey} version probe for ${packageName} is empty.`,
+                );
+            }
+        }
 
         for (const boundary of boundaryNames) {
             assertExactVersions(
diff --git a/scripts/renderer-adapter-matrix.json b/scripts/renderer-adapter-matrix.json
index 73d9c7b8..f4ab1652 100644
--- a/scripts/renderer-adapter-matrix.json
+++ b/scripts/renderer-adapter-matrix.json
@@ -44,6 +44,11 @@
             "package": "@primereact/ui",
             "dependency": "@primereact/core"
         },
+        {
+            "adapter": "primereact11",
+            "package": "@primereact/ui",
+            "dependency": "@primeuix/utils"
+        },
         {
             "adapter": "primereact11",
             "package": "@primereact/ui",
@@ -74,6 +79,11 @@
             "directory": "Adapters/PrimeReact",
             "manifestExport": "primeReactUiLibrary",
             "rendererId": "cratis-primereact",
+            "versionProbeSpecifiers": {
+                "@primereact/core": "@primereact/core/component",
+                "@primereact/ui": "@primereact/ui/button",
+                "primereact": "primereact/button"
+            },
             "alignedPackages": [
                 "@primereact/core",
                 "@primereact/headless",
@@ -89,6 +99,7 @@
                     "@primereact/ui": "11.0.0",
                     "@primeuix/motion": "1.0.0",
                     "@primeuix/themes": "3.0.0",
+                    "@primeuix/utils": "0.8.0",
                     "primereact": "11.0.0"
                 },
                 "current": {
@@ -98,6 +109,7 @@
                     "@primereact/ui": "11.1.0",
                     "@primeuix/motion": "1.0.0",
                     "@primeuix/themes": "3.0.0",
+                    "@primeuix/utils": "0.8.1",
                     "primereact": "11.1.0"
                 }
             }
diff --git a/scripts/renderer-adapter-matrix.md b/scripts/renderer-adapter-matrix.md
index 184287f6..ecad5ab9 100644
--- a/scripts/renderer-adapter-matrix.md
+++ b/scripts/renderer-adapter-matrix.md
@@ -38,8 +38,8 @@ The matrix records only confirmed upstream manifest omissions:
 - `@cratis/arc.react@22.5.0` imports `rxjs` without declaring it;
 - each tested `@primereact/headless` 11 package needs React for its Core/headless dependencies;
 - each tested `@primereact/styles` 11 package needs `@primeuix/motion` for its types;
-- each tested `@primereact/ui` 11 package uses the aligned `@primereact/core` package without
-  declaring that direct dependency; and
+- each tested `@primereact/ui` 11 package uses the aligned `@primereact/core` package and
+  `@primeuix/utils` without declaring those direct dependencies; and
 - each tested `@primereact/ui` 11 package needs ReactDOM for the aligned `primereact` package.
 
 The verifier derives exact `packageExtensions` selectors and dependency versions from the selected
diff --git a/scripts/verify-renderer-adapter-matrix.test.mjs b/scripts/verify-renderer-adapter-matrix.test.mjs
index 35d31864..0150a0e9 100644
--- a/scripts/verify-renderer-adapter-matrix.test.mjs
+++ b/scripts/verify-renderer-adapter-matrix.test.mjs
@@ -56,3 +56,14 @@ test('a skewed PrimeReact 11 boundary fails before installation', () => {
         /primereact11\/minimum must keep .* aligned/,
     );
 });
+
+test('a version probe outside the declared upstream set fails before installation', () => {
+    const { matrix, manifests } = loadInputs();
+    const invalid = clone(matrix);
+    invalid.adapters.primereact11.versionProbeSpecifiers.rxjs = 'rxjs';
+
+    assert.throws(
+        () => validateMatrix(invalid, manifests),
+        /primereact11 version probe names non-upstream package 'rxjs'/,
+    );
+});
diff --git a/scripts/verify-renderer-adapters.mjs b/scripts/verify-renderer-adapters.mjs
index 0d599320..12076552 100644
--- a/scripts/verify-renderer-adapters.mjs
+++ b/scripts/verify-renderer-adapters.mjs
@@ -98,7 +98,10 @@ const writeProbe = (consumerDirectory, adapterManifest, fixture) => {
     const upstreamVersions = Object.fromEntries(
         Object.keys(adapterManifest.cratis.upstream).map((name) => [
             name,
-            fixture.peers[name],
+            {
+                version: fixture.peers[name],
+                specifier: fixture.adapter.versionProbeSpecifiers?.[name] ?? name,
+            },
         ]),
     );
     const probe = `
@@ -119,13 +122,13 @@ if (api[manifestExport]?.id !== rendererId) {
     throw new Error(\`\${packageName} renderer id is \${api[manifestExport]?.id}, expected \${rendererId}.\`);
 }
 
-const installedPackageVersion = packageToResolve => {
-    let directory = path.dirname(fileURLToPath(import.meta.resolve(packageToResolve)));
+const installedPackageVersion = (packageName, specifier) => {
+    let directory = path.dirname(fileURLToPath(import.meta.resolve(specifier)));
     while (true) {
         const candidate = path.join(directory, 'package.json');
         try {
             const manifest = JSON.parse(readFileSync(candidate, 'utf8'));
-            if (manifest.name === packageToResolve) return manifest.version;
+            if (manifest.name === packageName) return manifest.version;
         } catch (error) {
             if (error?.code !== 'ENOENT') throw error;
         }
@@ -133,13 +136,13 @@ const installedPackageVersion = packageToResolve => {
         if (parent === directory) break;
         directory = parent;
     }
-    throw new Error(\`Could not locate installed manifest for \${packageToResolve}.\`);
+    throw new Error(\`Could not locate installed manifest for \${packageName}.\`);
 };
 
-for (const [name, expectedVersion] of Object.entries(upstreamVersions)) {
-    const actualVersion = installedPackageVersion(name);
-    if (actualVersion !== expectedVersion) {
-        throw new Error(\`Resolved \${name}@\${actualVersion}, expected boundary version \${expectedVersion}.\`);
+for (const [name, expectation] of Object.entries(upstreamVersions)) {
+    const actualVersion = installedPackageVersion(name, expectation.specifier);
+    if (actualVersion !== expectation.version) {
+        throw new Error(\`Resolved \${name}@\${actualVersion}, expected boundary version \${expectation.version}.\`);
     }
 }
 console.log(\`Verified \${packageName} \${rendererId} with exact boundary upstream versions.\`);

From d33bbfe64b65f0c0448aed1f4439eba630f34774 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Fri, 28 Aug 2026 22:05:07 +0200
Subject: [PATCH 246/267] Add V4 compatibility and release safety contracts

---
 .../auto-approve-publish-deployments.yml      |  64 ---
 .github/workflows/javascript-build.yml        |   6 +
 .github/workflows/markdown-verification.yml   |   4 +
 .yarnrc.yml                                   |  30 +-
 Codemods/README.md                            |  40 +-
 Codemods/compat-manifest.json                 | 303 ++++++++++
 Codemods/lib/compatibility.js                 | 131 +++++
 Codemods/lib/runTransformCli.js               |  10 +
 Codemods/package.json                         |   5 +-
 .../scripts/remove-root-namespace-imports.js  | 144 +----
 Codemods/test/cli.test.js                     |  15 +-
 Codemods/test/compatibility.test.js           |  74 +++
 Codemods/test/migration-cli.test.js           |  15 +-
 Codemods/test/transform.test.js               |   1 +
 Codemods/test/verify-packed-package.mjs       |  74 ++-
 Documentation/Migration/3-to-4.md             |  29 +-
 ESLint/README.md                              |   7 +-
 ESLint/package.json                           |   1 +
 README.md                                     |  11 +-
 RELEASE.md                                    |  95 ++++
 Source/MIGRATION.md                           |  29 +-
 Source/README.md                              |  10 +-
 Source/compat-manifest.json                   | 303 ++++++++++
 Source/package.json                           |   2 +
 Source/scripts/verify-package-archive.mjs     |  54 ++
 compat-manifest.json                          | 228 ++++++--
 package.json                                  |   6 +-
 run-task-on-workspaces.js                     | 166 ++----
 scripts/generate-compat-manifest.mjs          | 529 ++++++++++++------
 scripts/generate-compat-manifest.test.mjs     |  92 +++
 scripts/verify-release-safety.mjs             | 174 ++++++
 scripts/verify-release-safety.test.mjs        |  89 +++
 yarn.lock                                     |  89 +--
 33 files changed, 2133 insertions(+), 697 deletions(-)
 delete mode 100644 .github/workflows/auto-approve-publish-deployments.yml
 create mode 100644 Codemods/compat-manifest.json
 create mode 100644 Codemods/lib/compatibility.js
 create mode 100644 Codemods/test/compatibility.test.js
 create mode 100644 RELEASE.md
 create mode 100644 Source/compat-manifest.json
 create mode 100644 scripts/generate-compat-manifest.test.mjs
 create mode 100644 scripts/verify-release-safety.mjs
 create mode 100644 scripts/verify-release-safety.test.mjs

diff --git a/.github/workflows/auto-approve-publish-deployments.yml b/.github/workflows/auto-approve-publish-deployments.yml
deleted file mode 100644
index 921dfb35..00000000
--- a/.github/workflows/auto-approve-publish-deployments.yml
+++ /dev/null
@@ -1,64 +0,0 @@
-name: Auto-Approve Publish Deployments
-# Reusable workflow that approves pending environment deployments (npm/nuget)
-# for a workflow run, intended for trusted publishing flows.
-
-on:
-  workflow_call:
-    inputs:
-      workflow_run_id:
-        description: Workflow run id to approve pending deployments for
-        required: true
-        type: number
-
-permissions:
-  actions: read
-  deployments: write
-
-jobs:
-  approve:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Approve pending npm/nuget deployments
-        env:
-          GH_TOKEN: ${{ github.token }}
-          WORKFLOW_RUN_ID: ${{ inputs.workflow_run_id }}
-        run: |
-          set -euo pipefail
-
-          max_attempts=180
-          sleep_seconds=10
-
-          for ((attempt=1; attempt<=max_attempts; attempt++)); do
-            mapfile -t env_ids < <(
-              gh api "repos/${{ github.repository }}/actions/runs/${WORKFLOW_RUN_ID}/pending_deployments" \
-                --jq '.[] | select(.environment.name == "npm" or .environment.name == "nuget") | .environment.id' |
-                sort -u
-            )
-
-            if [ "${#env_ids[@]}" -gt 0 ]; then
-              args=()
-              for env_id in "${env_ids[@]}"; do
-                args+=(-F "environment_ids[]=${env_id}")
-              done
-
-              gh api -X POST "repos/${{ github.repository }}/actions/runs/${WORKFLOW_RUN_ID}/pending_deployments" \
-                "${args[@]}" \
-                -f state=approved \
-                -f comment='Auto-approved for trusted publishing'
-
-              echo "Approved pending deployments for environments: ${env_ids[*]}"
-              exit 0
-            fi
-
-            run_status=$(gh api "repos/${{ github.repository }}/actions/runs/${WORKFLOW_RUN_ID}" --jq '.status')
-            if [ "$run_status" = "completed" ]; then
-              echo "No pending npm/nuget deployments found for run ${WORKFLOW_RUN_ID}"
-              exit 0
-            fi
-
-            echo "Attempt ${attempt}/${max_attempts}: no pending npm/nuget deployments yet for run ${WORKFLOW_RUN_ID}; run status is ${run_status}. Waiting ${sleep_seconds}s..."
-            sleep "$sleep_seconds"
-          done
-
-          echo "::error::Timed out waiting for pending npm/nuget deployments for run ${WORKFLOW_RUN_ID}"
-          exit 1
diff --git a/.github/workflows/javascript-build.yml b/.github/workflows/javascript-build.yml
index e3dbd477..0ca34e82 100644
--- a/.github/workflows/javascript-build.yml
+++ b/.github/workflows/javascript-build.yml
@@ -28,12 +28,15 @@ on:
             - 'Storybook/**'
             - 'scripts/**'
             - 'compat-manifest.json'
+            - 'RELEASE.md'
+            - 'run-task-on-workspaces.js'
             - 'package.json'
             - 'rollup.config.mjs'
             - 'yarn.lock'
             - '.yarnrc.yml'
             - '.yarn/releases/yarn-4.5.3.cjs'
             - '.github/workflows/javascript-build.yml'
+            - '.github/workflows/publish.yml'
     pull_request:
         branches:
             - '**'
@@ -46,12 +49,15 @@ on:
             - 'Storybook/**'
             - 'scripts/**'
             - 'compat-manifest.json'
+            - 'RELEASE.md'
+            - 'run-task-on-workspaces.js'
             - 'package.json'
             - 'rollup.config.mjs'
             - 'yarn.lock'
             - '.yarnrc.yml'
             - '.yarn/releases/yarn-4.5.3.cjs'
             - '.github/workflows/javascript-build.yml'
+            - '.github/workflows/publish.yml'
 
 permissions:
     contents: read
diff --git a/.github/workflows/markdown-verification.yml b/.github/workflows/markdown-verification.yml
index 520d6be1..74ba092a 100644
--- a/.github/workflows/markdown-verification.yml
+++ b/.github/workflows/markdown-verification.yml
@@ -8,6 +8,7 @@ on:
         paths:
             - 'Documentation/**'
             - 'README.md'
+            - 'RELEASE.md'
             - 'Source/*.md'
             - 'Codemods/*.md'
             - 'ESLint/*.md'
@@ -20,6 +21,7 @@ on:
         paths:
             - 'Documentation/**'
             - 'README.md'
+            - 'RELEASE.md'
             - 'Source/*.md'
             - 'Codemods/*.md'
             - 'ESLint/*.md'
@@ -49,6 +51,7 @@ jobs:
               with:
                   globs: |
                       README.md
+                      RELEASE.md
                       Documentation/**/*.md
                       Documentation/**/*.mdx
                       Source/*.md
@@ -83,6 +86,7 @@ jobs:
               with:
                   paths: |
                       README.md
+                      RELEASE.md
                       Source/*.md
                       Codemods/*.md
                       ESLint/*.md
diff --git a/.yarnrc.yml b/.yarnrc.yml
index 0ac7d7f3..98ad1fca 100644
--- a/.yarnrc.yml
+++ b/.yarnrc.yml
@@ -1,11 +1,31 @@
-checksumBehavior: update
-
 nodeLinker: node-modules
 
 packageExtensions:
-  debug@*:
-    dependencies:
-      supports-color: "*"
+    '@cratis/arc.react@22.5.0':
+        dependencies:
+            rxjs: '7.8.2'
+    '@primereact/headless@11.1.0':
+        dependencies:
+            react: '19.2.8'
+    '@primereact/styles@11.1.0':
+        dependencies:
+            '@primeuix/motion': '1.0.0'
+    '@primereact/ui@11.1.0':
+        dependencies:
+            '@primereact/core': '11.1.0'
+            react-dom: '19.2.8'
+    '@storybook/addon-vitest@10.5.10':
+        dependencies:
+            react: '19.2.8'
+    'storybook@10.5.10':
+        dependencies:
+            react: '19.2.8'
+    'debug@3.2.7':
+        dependencies:
+            supports-color: '*'
+    'debug@4.4.3':
+        dependencies:
+            supports-color: '*'
 
 pnpMode: loose
 
diff --git a/Codemods/README.md b/Codemods/README.md
index 930fad41..786debac 100644
--- a/Codemods/README.md
+++ b/Codemods/README.md
@@ -95,23 +95,25 @@ narrow subpath consumers are left exactly as they are.
 
 The packaged CLI requires Node.js 20 or newer and brings its own TypeScript parser; it does
 not depend on the consumer application's TypeScript version. It scans JavaScript, JSX,
-TypeScript, and TSX sources, including `.mjs`, `.cjs`, `.mts`, and `.cts` variants. Use the
-same exact published version as the installed Components package. Automated coordinated
-publication is currently disabled while source provenance is reviewed. Contributors can run
-the repository source directly. If the exact codemod version is unavailable, do not substitute `latest`
-or another Components version: keep the application on its current package, apply the
-mapping table manually, or wait for a corrected publication.
+TypeScript, and TSX sources, including `.mjs`, `.cjs`, `.mts`, and `.cts` variants. Components
+3 has no 3.x codemod package. Use the independently released Components 4 tooling train bounded
+to `>=4 <5`; never use `latest`.
+
+Before any scan or write, the CLI validates its bundled compatibility manifest, checks its own
+version against the declared codemod range, resolves the configured Components package from the
+invocation directory, and verifies that package is in the supported 3.x migration-source or 4.x
+migration-target window. Missing Components, unsupported versions, stale package metadata, and an
+invalid manifest fail closed. `--help` remains available without Components installed.
 
 ```sh
-# Read the exact installed Components version (stable or prerelease):
-COMPONENTS_VERSION="$(node -p "require('@cratis/components/package.json').version")"
+TOOLING_RANGE='^4.0.0' # Shell-safe equivalent of >=4 <5.
 
 # Preview what would change, without writing anything:
-npx --package "@cratis/components-codemods@$COMPONENTS_VERSION" \
+npx --package "@cratis/components-codemods@$TOOLING_RANGE" \
   cratis-components-remove-root-namespace-imports --check path/to/app/src
 
 # Apply the rewrite:
-npx --package "@cratis/components-codemods@$COMPONENTS_VERSION" \
+npx --package "@cratis/components-codemods@$TOOLING_RANGE" \
   cratis-components-remove-root-namespace-imports path/to/app/src
 
 # Contributors to this repository can run the workspace source directly:
@@ -191,28 +193,28 @@ Multi-statement, multi-use, wrong-payload, destructuring-with-default/rest, and
 
 ## Run the migration sequence
 
-Use the exact installed Components version for all three commands. Run the root-import transform first so the later transforms can resolve explicit Components-owned subpaths, then run Button appearance and change-handler migration. Preview every step before applying it:
+Use the bounded Components 4 tooling train for all three commands. Run the root-import transform first so the later transforms can resolve explicit Components-owned subpaths, then run Button appearance and change-handler migration. Preview every step before applying it:
 
 ```sh
-COMPONENTS_VERSION="$(node -p "require('@cratis/components/package.json').version")"
+TOOLING_RANGE='^4.0.0'
 
-npx --package "@cratis/components-codemods@$COMPONENTS_VERSION" \
+npx --package "@cratis/components-codemods@$TOOLING_RANGE" \
   cratis-components-remove-root-namespace-imports --check <paths...>
-npx --package "@cratis/components-codemods@$COMPONENTS_VERSION" \
+npx --package "@cratis/components-codemods@$TOOLING_RANGE" \
   cratis-components-remove-root-namespace-imports <paths...>
 
-npx --package "@cratis/components-codemods@$COMPONENTS_VERSION" \
+npx --package "@cratis/components-codemods@$TOOLING_RANGE" \
   cratis-components-button-variant-tone --check <paths...>
-npx --package "@cratis/components-codemods@$COMPONENTS_VERSION" \
+npx --package "@cratis/components-codemods@$TOOLING_RANGE" \
   cratis-components-button-variant-tone <paths...>
 
-npx --package "@cratis/components-codemods@$COMPONENTS_VERSION" \
+npx --package "@cratis/components-codemods@$TOOLING_RANGE" \
   cratis-components-change-handler --check <paths...>
-npx --package "@cratis/components-codemods@$COMPONENTS_VERSION" \
+npx --package "@cratis/components-codemods@$TOOLING_RANGE" \
   cratis-components-change-handler <paths...>
 ```
 
-Never substitute `latest` or another Components version when the exact codemod package is unavailable. Stop, keep the application on its current package, migrate manually, or wait for the matching publication. Both new CLIs require Node.js 20 or newer, bundle their own TypeScript compiler dependency, scan `.js`, `.jsx`, `.mjs`, `.cjs`, `.ts`, `.tsx`, `.mts`, and `.cts` recursively, support `--package <name>`, and exit nonzero for pending check-mode edits or any refused case. Review every diagnostic and `TODO(cratis-codemod)`, then run the consuming project's formatter, lint, type check, tests, and production build.
+Never substitute `latest`; keep tooling within `>=4 <5`. Tooling patches release independently from Core, and the bundled manifest preflight enforces the compatible migration windows. Both new CLIs require Node.js 20 or newer, bundle their own TypeScript compiler dependency, scan `.js`, `.jsx`, `.mjs`, `.cjs`, `.ts`, `.tsx`, `.mts`, and `.cts` recursively, support `--package <name>`, and exit nonzero for pending check-mode edits or any refused case. Review every diagnostic and `TODO(cratis-codemod)`, then run the consuming project's formatter, lint, type check, tests, and production build.
 
 Contributor source commands are:
 
diff --git a/Codemods/compat-manifest.json b/Codemods/compat-manifest.json
new file mode 100644
index 00000000..950a310b
--- /dev/null
+++ b/Codemods/compat-manifest.json
@@ -0,0 +1,303 @@
+{
+    "schemaVersion": 2,
+    "releaseStatus": "source-candidate",
+    "publicationEnabled": false,
+    "gaScope": {
+        "publicPackages": [
+            "@cratis/components",
+            "@cratis/eslint-plugin-components",
+            "@cratis/components-codemods",
+            "@cratis/components.conformance",
+            "@cratis/components.mui",
+            "@cratis/components.primereact",
+            "@cratis/components.primereact10"
+        ],
+        "privateEvidence": [
+            {
+                "id": "plain",
+                "name": "Plain DOM renderer conformance falsification fixture",
+                "purpose": "private-conformance-evidence",
+                "private": true,
+                "published": false
+            },
+            {
+                "id": "storybook",
+                "name": "Composed renderer Storybook",
+                "purpose": "private-renderer-evidence",
+                "private": true,
+                "published": false
+            }
+        ]
+    },
+    "toolingCompatibility": {
+        "componentsCore": ">=4 <5",
+        "eslint": ">=4 <5",
+        "codemods": ">=4 <5"
+    },
+    "supportWindows": {
+        "components3": {
+            "components": ">=3 <4",
+            "status": "maintenance-security-critical",
+            "migrationRole": "source",
+            "migrationTarget": ">=4 <5",
+            "tooling": ">=4 <5",
+            "eolAt": null,
+            "eolApprovedByOwners": false,
+            "ownerDecisionPolicy": "Set and approve EOL no later than 12 months after Components 4 GA."
+        },
+        "components4": {
+            "components": ">=4 <5",
+            "status": "current-candidate",
+            "migrationRole": "target",
+            "rendererAbi": 1,
+            "coreProfile": "core/v1",
+            "adapterProfile": "stable-presentation/v1",
+            "tooling": {
+                "eslint": ">=4 <5",
+                "codemods": ">=4 <5"
+            },
+            "adapters": {
+                "@cratis/components.conformance": ">=1 <2",
+                "@cratis/components.mui": ">=1 <2",
+                "@cratis/components.primereact": ">=1 <2",
+                "@cratis/components.primereact10": ">=1 <2"
+            }
+        }
+    },
+    "packages": [
+        {
+            "name": "@cratis/components",
+            "role": "core",
+            "version": "4.0.0",
+            "releaseMajorRange": ">=4 <5",
+            "independentRelease": false,
+            "private": false,
+            "packageAccess": "public",
+            "peerDependencies": {
+                "@cratis/arc": ">=20.3.1 <23",
+                "@cratis/arc.react": ">=20.3.1 <23",
+                "@cratis/fundamentals": "^7.10.3",
+                "pixi.js": "^8.20.0",
+                "react": "^19.0.0",
+                "react-dom": "^19.0.0",
+                "reflect-metadata": "0.2.2",
+                "tsyringe": "4.10.0"
+            },
+            "upstream": {
+                "react": "^19.0.0"
+            },
+            "rendererAbi": 1,
+            "rendererProfile": "core/v1"
+        },
+        {
+            "name": "@cratis/eslint-plugin-components",
+            "role": "eslint",
+            "version": "4.0.0",
+            "releaseMajorRange": ">=4 <5",
+            "independentRelease": true,
+            "private": false,
+            "packageAccess": "public",
+            "peerDependencies": {
+                "eslint": ">=9"
+            },
+            "upstream": {}
+        },
+        {
+            "name": "@cratis/components-codemods",
+            "role": "codemods",
+            "version": "4.0.0",
+            "releaseMajorRange": ">=4 <5",
+            "independentRelease": true,
+            "private": false,
+            "packageAccess": "public",
+            "peerDependencies": {},
+            "upstream": {}
+        },
+        {
+            "name": "@cratis/components.conformance",
+            "role": "conformance",
+            "version": "1.0.0",
+            "releaseMajorRange": ">=1 <2",
+            "independentRelease": true,
+            "private": false,
+            "packageAccess": "public",
+            "peerDependencies": {
+                "@cratis/components": ">=4 <5",
+                "react": "^19.0.0",
+                "react-dom": "^19.0.0"
+            },
+            "upstream": {},
+            "rendererAbi": 1
+        },
+        {
+            "name": "@cratis/components.mui",
+            "role": "renderer-adapter",
+            "version": "1.0.0",
+            "releaseMajorRange": ">=1 <2",
+            "independentRelease": true,
+            "private": false,
+            "packageAccess": "public",
+            "peerDependencies": {
+                "@cratis/components": ">=4 <5",
+                "@emotion/react": ">=11.5 <12",
+                "@emotion/styled": ">=11.11 <12",
+                "@mui/material": ">=9 <10",
+                "react": "^19.0.0",
+                "react-dom": "^19.0.0"
+            },
+            "upstream": {
+                "@emotion/react": ">=11.5 <12",
+                "@emotion/styled": ">=11.11 <12",
+                "@mui/material": ">=9 <10",
+                "react": "^19.0.0",
+                "react-dom": "^19.0.0"
+            },
+            "rendererAbi": 1,
+            "rendererProfile": "stable-presentation/v1",
+            "verifiedPeers": {
+                "minimum": {
+                    "@cratis/arc": "22.5.0",
+                    "@cratis/arc.react": "22.5.0",
+                    "@cratis/fundamentals": "7.18.1",
+                    "@emotion/react": "11.5.0",
+                    "@emotion/styled": "11.11.0",
+                    "@mui/material": "9.0.0",
+                    "@types/react": "19.0.0",
+                    "react": "19.0.0",
+                    "react-dom": "19.0.0",
+                    "reflect-metadata": "0.2.2",
+                    "rxjs": "7.8.2",
+                    "tsyringe": "4.10.0"
+                },
+                "current": {
+                    "@cratis/arc": "22.5.0",
+                    "@cratis/arc.react": "22.5.0",
+                    "@cratis/fundamentals": "7.18.1",
+                    "@emotion/react": "11.14.0",
+                    "@emotion/styled": "11.14.1",
+                    "@mui/material": "9.4.0",
+                    "@types/react": "19.2.18",
+                    "react": "19.2.8",
+                    "react-dom": "19.2.8",
+                    "reflect-metadata": "0.2.2",
+                    "rxjs": "7.8.2",
+                    "tsyringe": "4.10.0"
+                }
+            }
+        },
+        {
+            "name": "@cratis/components.primereact",
+            "role": "renderer-adapter",
+            "version": "1.0.0",
+            "releaseMajorRange": ">=1 <2",
+            "independentRelease": true,
+            "private": false,
+            "packageAccess": "public",
+            "peerDependencies": {
+                "@cratis/components": ">=4 <5",
+                "@primereact/core": ">=11 <12",
+                "@primereact/ui": ">=11 <12",
+                "@primeuix/themes": ">=3 <4",
+                "primereact": ">=11 <12",
+                "react": "^19.0.0",
+                "react-dom": "^19.0.0"
+            },
+            "upstream": {
+                "@primereact/core": ">=11 <12",
+                "@primereact/ui": ">=11 <12",
+                "@primeuix/themes": ">=3 <4",
+                "primereact": ">=11 <12",
+                "react": "^19.0.0",
+                "react-dom": "^19.0.0"
+            },
+            "rendererAbi": 1,
+            "rendererProfile": "stable-presentation/v1",
+            "verifiedPeers": {
+                "minimum": {
+                    "@cratis/arc": "22.5.0",
+                    "@cratis/arc.react": "22.5.0",
+                    "@cratis/fundamentals": "7.18.1",
+                    "@primereact/core": "11.0.0",
+                    "@primereact/headless": "11.0.0",
+                    "@primereact/styles": "11.0.0",
+                    "@primereact/ui": "11.0.0",
+                    "@primeuix/motion": "1.0.0",
+                    "@primeuix/themes": "3.0.0",
+                    "@types/react": "19.0.0",
+                    "primereact": "11.0.0",
+                    "react": "19.0.0",
+                    "react-dom": "19.0.0",
+                    "reflect-metadata": "0.2.2",
+                    "rxjs": "7.8.2",
+                    "tsyringe": "4.10.0"
+                },
+                "current": {
+                    "@cratis/arc": "22.5.0",
+                    "@cratis/arc.react": "22.5.0",
+                    "@cratis/fundamentals": "7.18.1",
+                    "@primereact/core": "11.1.0",
+                    "@primereact/headless": "11.1.0",
+                    "@primereact/styles": "11.1.0",
+                    "@primereact/ui": "11.1.0",
+                    "@primeuix/motion": "1.0.0",
+                    "@primeuix/themes": "3.0.0",
+                    "@types/react": "19.2.18",
+                    "primereact": "11.1.0",
+                    "react": "19.2.8",
+                    "react-dom": "19.2.8",
+                    "reflect-metadata": "0.2.2",
+                    "rxjs": "7.8.2",
+                    "tsyringe": "4.10.0"
+                }
+            }
+        },
+        {
+            "name": "@cratis/components.primereact10",
+            "role": "renderer-adapter",
+            "version": "1.0.0",
+            "releaseMajorRange": ">=1 <2",
+            "independentRelease": true,
+            "private": false,
+            "packageAccess": "public",
+            "peerDependencies": {
+                "@cratis/components": ">=4 <5",
+                "primereact": ">=10.9.9 <11",
+                "react": "^19.0.0",
+                "react-dom": "^19.0.0"
+            },
+            "upstream": {
+                "primereact": ">=10.9.9 <11",
+                "react": "^19.0.0",
+                "react-dom": "^19.0.0"
+            },
+            "rendererAbi": 1,
+            "rendererProfile": "stable-presentation/v1",
+            "verifiedPeers": {
+                "minimum": {
+                    "@cratis/arc": "22.5.0",
+                    "@cratis/arc.react": "22.5.0",
+                    "@cratis/fundamentals": "7.18.1",
+                    "@types/react": "19.0.0",
+                    "primereact": "10.9.9",
+                    "react": "19.0.0",
+                    "react-dom": "19.0.0",
+                    "reflect-metadata": "0.2.2",
+                    "rxjs": "7.8.2",
+                    "tsyringe": "4.10.0"
+                },
+                "current": {
+                    "@cratis/arc": "22.5.0",
+                    "@cratis/arc.react": "22.5.0",
+                    "@cratis/fundamentals": "7.18.1",
+                    "@types/react": "19.2.18",
+                    "primereact": "10.9.9",
+                    "react": "19.2.8",
+                    "react-dom": "19.2.8",
+                    "reflect-metadata": "0.2.2",
+                    "rxjs": "7.8.2",
+                    "tsyringe": "4.10.0"
+                }
+            }
+        }
+    ]
+}
diff --git a/Codemods/lib/compatibility.js b/Codemods/lib/compatibility.js
new file mode 100644
index 00000000..2a40ce0b
--- /dev/null
+++ b/Codemods/lib/compatibility.js
@@ -0,0 +1,131 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { createRequire } from 'node:module';
+import { readFileSync } from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import semver from 'semver';
+
+const packageDirectory = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const bundledManifestPath = path.join(packageDirectory, 'compat-manifest.json');
+const codemodPackagePath = path.join(packageDirectory, 'package.json');
+
+/** Validates the bundled release contract and the installed Components migration boundary. */
+export function preflightCompatibility({
+    cwd = process.cwd(),
+    packageName = '@cratis/components',
+} = {}) {
+    const manifest = readJson(bundledManifestPath, 'bundled compatibility manifest');
+    const codemodPackage = readJson(codemodPackagePath, 'codemod package manifest');
+    validateBundledManifest(manifest, codemodPackage.version);
+
+    const installedPackagePath = resolvePackageManifest(packageName, cwd);
+    const installedPackage = readJson(
+        installedPackagePath,
+        `installed ${packageName} package manifest`,
+    );
+    if (semver.valid(installedPackage.version) !== installedPackage.version) {
+        throw new Error(
+            `Installed ${packageName} has invalid version '${installedPackage.version ?? '<missing>'}'.`,
+        );
+    }
+
+    const supportedWindow = Object.values(manifest.supportWindows).find(
+        (window) =>
+            ['source', 'target'].includes(window.migrationRole) &&
+            semver.satisfies(installedPackage.version, window.components),
+    );
+    if (!supportedWindow) {
+        const ranges = Object.values(manifest.supportWindows)
+            .filter((window) => ['source', 'target'].includes(window.migrationRole))
+            .map((window) => window.components)
+            .join(' or ');
+        throw new Error(
+            `Installed ${packageName}@${installedPackage.version} is unsupported by this codemod. ` +
+                `Allowed migration Components ranges: ${ranges}.`,
+        );
+    }
+
+    return {
+        manifest,
+        codemodVersion: codemodPackage.version,
+        componentsVersion: installedPackage.version,
+        migrationRole: supportedWindow.migrationRole,
+    };
+}
+
+/** Validates data that must remain true for a packed codemod to run safely. */
+export function validateBundledManifest(manifest, codemodVersion) {
+    if (!manifest || manifest.schemaVersion !== 2) {
+        throw new Error('Bundled compatibility manifest has an unsupported schema.');
+    }
+    if (
+        !['source-candidate', 'publication-authorized'].includes(manifest.releaseStatus)
+    ) {
+        throw new Error('Bundled compatibility manifest has an invalid releaseStatus.');
+    }
+    const codemodRange = manifest.toolingCompatibility?.codemods;
+    if (!semver.validRange(codemodRange)) {
+        throw new Error('Bundled compatibility manifest has an invalid codemod range.');
+    }
+    if (semver.valid(codemodVersion) !== codemodVersion) {
+        throw new Error(`Codemod package has invalid version '${codemodVersion}'.`);
+    }
+    if (!semver.satisfies(codemodVersion, codemodRange)) {
+        throw new Error(
+            `Codemod package version ${codemodVersion} is outside bundled range '${codemodRange}'.`,
+        );
+    }
+
+    const packageEntry = manifest.packages?.find(
+        ({ name }) => name === '@cratis/components-codemods',
+    );
+    if (
+        packageEntry?.version !== codemodVersion ||
+        packageEntry?.independentRelease !== true ||
+        !semver.satisfies(codemodVersion, packageEntry?.releaseMajorRange ?? '')
+    ) {
+        throw new Error(
+            'Bundled compatibility manifest has stale codemod package metadata.',
+        );
+    }
+
+    const windows = Object.values(manifest.supportWindows ?? {});
+    if (
+        windows.length === 0 ||
+        windows.some(
+            (window) =>
+                !semver.validRange(window.components) ||
+                !['source', 'target'].includes(window.migrationRole),
+        )
+    ) {
+        throw new Error(
+            'Bundled compatibility manifest has invalid migration support windows.',
+        );
+    }
+}
+
+function resolvePackageManifest(packageName, cwd) {
+    try {
+        const requireFromCwd = createRequire(
+            path.join(path.resolve(cwd), 'package.json'),
+        );
+        return requireFromCwd.resolve(`${packageName}/package.json`);
+    } catch (error) {
+        const detail = error instanceof Error ? error.message : String(error);
+        throw new Error(
+            `Could not resolve installed ${packageName} from '${path.resolve(cwd)}'. ` +
+                `Install a supported Components 3 or Components 4 package before running the codemod. ${detail}`,
+        );
+    }
+}
+
+function readJson(filePath, description) {
+    try {
+        return JSON.parse(readFileSync(filePath, 'utf8'));
+    } catch (error) {
+        const detail = error instanceof Error ? error.message : String(error);
+        throw new Error(`Could not read ${description}: ${detail}`);
+    }
+}
diff --git a/Codemods/lib/runTransformCli.js b/Codemods/lib/runTransformCli.js
index dbdb6f3d..d02b6e91 100644
--- a/Codemods/lib/runTransformCli.js
+++ b/Codemods/lib/runTransformCli.js
@@ -4,6 +4,7 @@
 import { readFileSync, writeFileSync, statSync, readdirSync } from 'node:fs';
 import { join, extname } from 'node:path';
 import { packageName as defaultPackageName } from './namespaceMap.js';
+import { preflightCompatibility } from './compatibility.js';
 
 const EXTENSIONS = new Set([
     '.js',
@@ -48,6 +49,15 @@ export function runTransformCli(argv, { command, description, transform }) {
         return 1;
     }
 
+    try {
+        preflightCompatibility({ packageName });
+    } catch (error) {
+        console.error(
+            `Compatibility preflight failed: ${error instanceof Error ? error.message : String(error)}`,
+        );
+        return 1;
+    }
+
     let files;
     try {
         files = paths.flatMap(collectFiles);
diff --git a/Codemods/package.json b/Codemods/package.json
index 1dd921f4..e2f0357c 100644
--- a/Codemods/package.json
+++ b/Codemods/package.json
@@ -1,6 +1,7 @@
 {
     "name": "@cratis/components-codemods",
     "version": "4.0.0",
+    "cratisIndependentVersion": true,
     "description": "Codemods for migrating @cratis/components consumers from Components 3 root namespaces to Components 4 subpath imports.",
     "author": "Cratis",
     "license": "MIT",
@@ -15,7 +16,8 @@
         "lib",
         "scripts",
         "README.md",
-        "LICENSE"
+        "LICENSE",
+        "compat-manifest.json"
     ],
     "repository": {
         "type": "git",
@@ -32,6 +34,7 @@
         "ci": "yarn g:test"
     },
     "dependencies": {
+        "semver": "7.8.5",
         "typescript": "^6.0.3"
     }
 }
diff --git a/Codemods/scripts/remove-root-namespace-imports.js b/Codemods/scripts/remove-root-namespace-imports.js
index 7b3221ee..391c46e6 100755
--- a/Codemods/scripts/remove-root-namespace-imports.js
+++ b/Codemods/scripts/remove-root-namespace-imports.js
@@ -2,141 +2,13 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { readFileSync, writeFileSync, statSync, readdirSync } from 'node:fs';
-import { join, extname } from 'node:path';
+import { runTransformCli } from '../lib/runTransformCli.js';
 import { transformSource } from '../lib/transform.js';
-import { packageName as defaultPackageName } from '../lib/namespaceMap.js';
 
-const EXTENSIONS = new Set([
-    '.js',
-    '.jsx',
-    '.mjs',
-    '.cjs',
-    '.ts',
-    '.tsx',
-    '.mts',
-    '.cts',
-]);
-const SKIP_DIRS = new Set(['node_modules', 'dist', '.git', '.yarn']);
-
-function printUsage() {
-    console.log(
-        [
-            'Usage: cratis-components-remove-root-namespace-imports [--check] [--package <name>] <path...>',
-            '',
-            'Rewrites \'import { Namespace } from "@cratis/components"\' into',
-            '\'import * as Namespace from "@cratis/components/Namespace"\' for every namespace',
-            'removed from the Components 4 package root. Approved setup symbols (for example',
-            "'CratisComponentsProvider') are left importable from the root.",
-            '',
-            'Options:',
-            '  --check           Report what would change without writing files; exits 1 if',
-            '                    anything would change or any unsupported case was found.',
-            '  --package <name>  Package to migrate away from (default: @cratis/components).',
-            '',
-            '<path...> may be files or directories; directories are walked recursively for',
-            '.js/.jsx/.mjs/.cjs/.ts/.tsx/.mts/.cts files, skipping node_modules,',
-            'dist, .git, and .yarn.',
-        ].join('\n'),
-    );
-}
-
-function collectFiles(inputPath) {
-    const stats = statSync(inputPath);
-    if (stats.isFile()) {
-        return EXTENSIONS.has(extname(inputPath)) ? [inputPath] : [];
-    }
-    if (!stats.isDirectory()) return [];
-
-    const files = [];
-    for (const entry of readdirSync(inputPath, { withFileTypes: true })) {
-        if (SKIP_DIRS.has(entry.name)) continue;
-        const entryPath = join(inputPath, entry.name);
-        if (entry.isDirectory()) {
-            files.push(...collectFiles(entryPath));
-        } else if (entry.isFile() && EXTENSIONS.has(extname(entry.name))) {
-            files.push(entryPath);
-        }
-    }
-    return files;
-}
-
-function main(argv) {
-    const args = [...argv];
-    let check = false;
-    let packageName = defaultPackageName;
-    const paths = [];
-
-    while (args.length > 0) {
-        const arg = args.shift();
-        if (arg === '--check') {
-            check = true;
-        } else if (arg === '--package') {
-            const configuredPackage = args.shift();
-            if (!configuredPackage) {
-                console.error('--package requires a package name.');
-                return 1;
-            }
-            packageName = configuredPackage;
-        } else if (arg === '--help' || arg === '-h') {
-            printUsage();
-            return 0;
-        } else if (arg.startsWith('-')) {
-            console.error(`Unknown option: ${arg}`);
-            return 1;
-        } else {
-            paths.push(arg);
-        }
-    }
-
-    if (paths.length === 0) {
-        printUsage();
-        return 1;
-    }
-
-    let files;
-    try {
-        files = paths.flatMap(collectFiles);
-    } catch (error) {
-        console.error(error instanceof Error ? error.message : String(error));
-        return 1;
-    }
-    let changedCount = 0;
-    let diagnosticCount = 0;
-
-    for (const file of files) {
-        const original = readFileSync(file, 'utf8');
-        const { text, changed, diagnostics } = transformSource(file, original, {
-            packageName,
-        });
-
-        for (const diagnostic of diagnostics) {
-            diagnosticCount += 1;
-            console.warn(
-                `${diagnostic.file}:${diagnostic.line}:${diagnostic.column}: ${diagnostic.message}`,
-            );
-        }
-
-        if (changed) {
-            changedCount += 1;
-            if (check) {
-                console.log(`would rewrite ${file}`);
-            } else {
-                writeFileSync(file, text, 'utf8');
-                console.log(`rewrote ${file}`);
-            }
-        }
-    }
-
-    console.log(
-        `\n${files.length} file(s) scanned, ${changedCount} ${check ? 'would change' : 'changed'}, ${diagnosticCount} unsupported case(s) reported.`,
-    );
-
-    // Non-zero whenever there is unmigrated, unsupported material to look at by hand, or
-    // (in --check mode only) whenever a supported rewrite has not yet been applied.
-    if (diagnosticCount > 0) return 1;
-    if (check && changedCount > 0) return 1;
-    return 0;
-}
-
-process.exitCode = main(process.argv.slice(2));
+process.exitCode = runTransformCli(process.argv.slice(2), {
+    command: 'cratis-components-remove-root-namespace-imports',
+    description:
+        'Rewrites Components 3 root namespace imports and named re-exports to Components 4 explicit subpaths. Unsupported whole-package and unknown forms are reported without guessing.',
+    transform: (file, text, { packageName }) =>
+        transformSource(file, text, { packageName }),
+});
diff --git a/Codemods/test/cli.test.js b/Codemods/test/cli.test.js
index ab3165b1..1233e058 100644
--- a/Codemods/test/cli.test.js
+++ b/Codemods/test/cli.test.js
@@ -15,6 +15,16 @@ let dir;
 
 beforeEach(() => {
     dir = mkdtempSync(path.join(tmpdir(), 'cratis-components-codemod-'));
+    const componentsDirectory = path.join(dir, 'node_modules', '@cratis', 'components');
+    mkdirSync(componentsDirectory, { recursive: true });
+    writeFileSync(
+        path.join(componentsDirectory, 'package.json'),
+        JSON.stringify({
+            name: '@cratis/components',
+            version: '4.0.0',
+            exports: { './package.json': './package.json' },
+        }),
+    );
 });
 
 afterEach(() => {
@@ -22,7 +32,10 @@ afterEach(() => {
 });
 
 const run = (args) =>
-    spawnSync(process.execPath, [binPath, ...args], { encoding: 'utf8' });
+    spawnSync(process.execPath, [binPath, ...args], {
+        cwd: dir,
+        encoding: 'utf8',
+    });
 
 describe('remove-root-namespace-imports CLI', () => {
     it('prints usage and exits non-zero with no arguments', () => {
diff --git a/Codemods/test/compatibility.test.js b/Codemods/test/compatibility.test.js
new file mode 100644
index 00000000..62778189
--- /dev/null
+++ b/Codemods/test/compatibility.test.js
@@ -0,0 +1,74 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { mkdirSync, mkdtempSync, rmSync, writeFileSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import path from 'node:path';
+import { afterEach, describe, expect, it } from 'vitest';
+import { preflightCompatibility, validateBundledManifest } from '../lib/compatibility.js';
+import compatibilityManifest from '../compat-manifest.json' with { type: 'json' };
+
+const temporaryDirectories = [];
+
+afterEach(() => {
+    for (const directory of temporaryDirectories.splice(0)) {
+        rmSync(directory, { recursive: true, force: true });
+    }
+});
+
+const createConsumer = (version) => {
+    const directory = mkdtempSync(path.join(tmpdir(), 'cratis-compatibility-'));
+    temporaryDirectories.push(directory);
+    const packageDirectory = path.join(
+        directory,
+        'node_modules',
+        '@cratis',
+        'components',
+    );
+    mkdirSync(packageDirectory, { recursive: true });
+    writeFileSync(
+        path.join(packageDirectory, 'package.json'),
+        `${JSON.stringify({
+            name: '@cratis/components',
+            version,
+            exports: { './package.json': './package.json' },
+        })}\n`,
+    );
+    return directory;
+};
+
+describe('compatibility preflight', () => {
+    it.each([
+        ['3.6.1', 'source'],
+        ['4.0.0', 'target'],
+    ])('accepts Components %s as a migration %s', (version, role) => {
+        expect(preflightCompatibility({ cwd: createConsumer(version) })).toMatchObject({
+            componentsVersion: version,
+            migrationRole: role,
+        });
+    });
+
+    it('rejects an unsupported Components version', () => {
+        expect(() => preflightCompatibility({ cwd: createConsumer('5.0.0') })).toThrow(
+            '@cratis/components@5.0.0 is unsupported',
+        );
+    });
+
+    it('rejects an absent Components package', () => {
+        const directory = mkdtempSync(path.join(tmpdir(), 'cratis-compatibility-'));
+        temporaryDirectories.push(directory);
+        expect(() => preflightCompatibility({ cwd: directory })).toThrow(
+            'Could not resolve installed @cratis/components',
+        );
+    });
+
+    it('rejects stale bundled codemod metadata', () => {
+        const stale = structuredClone(compatibilityManifest);
+        stale.packages.find(
+            ({ name }) => name === '@cratis/components-codemods',
+        ).version = '4.0.1';
+        expect(() => validateBundledManifest(stale, '4.0.0')).toThrow(
+            'stale codemod package metadata',
+        );
+    });
+});
diff --git a/Codemods/test/migration-cli.test.js b/Codemods/test/migration-cli.test.js
index 1d6e42df..d083eee5 100644
--- a/Codemods/test/migration-cli.test.js
+++ b/Codemods/test/migration-cli.test.js
@@ -14,6 +14,19 @@ let dir;
 
 beforeEach(() => {
     dir = mkdtempSync(path.join(tmpdir(), 'cratis-components-migration-codemod-'));
+    for (const packageName of ['@cratis/components', '@example/ui']) {
+        const [scope, name] = packageName.split('/');
+        const packageDirectory = path.join(dir, 'node_modules', scope, name);
+        mkdirSync(packageDirectory, { recursive: true });
+        writeFileSync(
+            path.join(packageDirectory, 'package.json'),
+            JSON.stringify({
+                name: packageName,
+                version: '4.0.0',
+                exports: { './package.json': './package.json' },
+            }),
+        );
+    }
 });
 
 afterEach(() => rmSync(dir, { recursive: true, force: true }));
@@ -42,7 +55,7 @@ for (const command of commands) {
         spawnSync(
             process.execPath,
             [path.join(scriptsDir, `${command.name}.js`), ...args],
-            { encoding: 'utf8' },
+            { cwd: dir, encoding: 'utf8' },
         );
 
     describe(`${command.publicName} CLI`, () => {
diff --git a/Codemods/test/transform.test.js b/Codemods/test/transform.test.js
index b727ae4f..bed94951 100644
--- a/Codemods/test/transform.test.js
+++ b/Codemods/test/transform.test.js
@@ -109,6 +109,7 @@ describe('root namespace maps', () => {
         const intentionallyUnmapped = new Set([
             '.',
             './package.json',
+            './compat-manifest.json',
             './styles',
             './tokens',
             './theme',
diff --git a/Codemods/test/verify-packed-package.mjs b/Codemods/test/verify-packed-package.mjs
index f283541b..34d019f6 100644
--- a/Codemods/test/verify-packed-package.mjs
+++ b/Codemods/test/verify-packed-package.mjs
@@ -4,12 +4,14 @@
 import { spawnSync } from 'node:child_process';
 import {
     existsSync,
+    mkdirSync,
     mkdtempSync,
     readFileSync,
     readdirSync,
     rmSync,
     writeFileSync,
 } from 'node:fs';
+import { validateBundledManifest } from '../lib/compatibility.js';
 import { tmpdir } from 'node:os';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
@@ -63,6 +65,40 @@ try {
         }
     }
 
+    const generatedManifest = readFileSync(
+        path.resolve(packageDir, '..', 'compat-manifest.json'),
+    );
+    const packedManifest = readFileSync(path.join(installedRoot, 'compat-manifest.json'));
+    if (!packedManifest.equals(generatedManifest)) {
+        throw new Error(
+            'Packed codemod compatibility manifest is not byte-identical to the generated root contract.',
+        );
+    }
+    const packedPackage = JSON.parse(
+        readFileSync(path.join(installedRoot, 'package.json'), 'utf8'),
+    );
+    validateBundledManifest(
+        JSON.parse(packedManifest.toString('utf8')),
+        packedPackage.version,
+    );
+
+    const componentsRoot = path.join(consumer, 'node_modules', '@cratis', 'components');
+    const installSyntheticComponents = (version) => {
+        mkdirSync(componentsRoot, { recursive: true });
+        writeFileSync(
+            path.join(componentsRoot, 'package.json'),
+            `${JSON.stringify(
+                {
+                    name: '@cratis/components',
+                    version,
+                    exports: { './package.json': './package.json' },
+                },
+                null,
+                4,
+            )}\n`,
+        );
+    };
+
     const readme = readFileSync(path.join(installedRoot, 'README.md'), 'utf8');
     for (const match of readme.matchAll(/\]\((\.?\.?\/[^)#?\s]+)(?:#[^)]+)?\)/gu)) {
         const target = path.resolve(installedRoot, decodeURIComponent(match[1]));
@@ -78,13 +114,21 @@ try {
             '.bin',
             process.platform === 'win32' ? `${name}.cmd` : name,
         );
-    const binary = binaryFor('cratis-components-remove-root-namespace-imports');
-    const help = run(binary, ['--help'], { cwd: consumer });
-    assertRun('packed codemod --help', help);
-    if (!help.stdout.includes('Usage: cratis-components-remove-root-namespace-imports')) {
-        throw new Error(`Unexpected --help output:\n${help.stdout}`);
+    const commands = [
+        'cratis-components-remove-root-namespace-imports',
+        'cratis-components-button-variant-tone',
+        'cratis-components-change-handler',
+    ];
+    for (const command of commands) {
+        const help = run(binaryFor(command), ['--help'], { cwd: consumer });
+        assertRun(`packed ${command} --help without Components`, help);
+        if (!help.stdout.includes(`Usage: ${command}`)) {
+            throw new Error(`Unexpected ${command} --help output:\n${help.stdout}`);
+        }
     }
 
+    installSyntheticComponents('3.6.1');
+    const binary = binaryFor('cratis-components-remove-root-namespace-imports');
     const source = path.join(consumer, 'App.ts');
     writeFileSync(
         source,
@@ -109,6 +153,7 @@ try {
         run(binary, ['--check', source], { cwd: consumer }),
     );
 
+    installSyntheticComponents(packedPackage.version);
     const packedMigrations = [
         {
             command: 'cratis-components-button-variant-tone',
@@ -157,7 +202,24 @@ try {
         );
     }
 
-    console.log('Packed @cratis/components-codemods CLIs verified.');
+    installSyntheticComponents('5.0.0');
+    const unsupportedSource = path.join(consumer, 'unsupported-version.ts');
+    const unsupportedInput = "import { Canvas } from '@cratis/components';\n";
+    writeFileSync(unsupportedSource, unsupportedInput);
+    const unsupported = run(binary, [unsupportedSource], { cwd: consumer });
+    assertRun('packed codemod rejects unsupported Components', unsupported, 1);
+    if (!unsupported.stderr.includes('@cratis/components@5.0.0 is unsupported')) {
+        throw new Error(`Unexpected unsupported-version output:\n${unsupported.stderr}`);
+    }
+    if (readFileSync(unsupportedSource, 'utf8') !== unsupportedInput) {
+        throw new Error(
+            'Unsupported Components preflight changed source before failing.',
+        );
+    }
+
+    console.log(
+        'Packed @cratis/components-codemods manifest and CLIs verified with Components 3, 4, and unsupported versions.',
+    );
 } finally {
     rmSync(scratch, { recursive: true, force: true });
 }
diff --git a/Documentation/Migration/3-to-4.md b/Documentation/Migration/3-to-4.md
index aabc6ee8..ac7130fc 100644
--- a/Documentation/Migration/3-to-4.md
+++ b/Documentation/Migration/3-to-4.md
@@ -8,7 +8,7 @@ Components 4 replaces the PrimeReact-backed Components 3 foundation with Compone
 This is a major-version migration. Rendered markup, styling parts, provider configuration, date entry, root imports, and some deprecated props change.
 
 :::note
-An application that has not migrated remains on its exact Components 3 package profile, including the third-party dependencies declared by that version. Components 4 does not provide a transparent Prime compatibility package. Its independently versioned `@cratis/components.mui`, `@cratis/components.primereact` (PrimeReact 11), and `@cratis/components.primereact10` adapters cover only the nine stable presentation slots. Review the exact package manifests and third-party terms for every version the application keeps. This guide makes no support-window, security-fix, maintenance, or future-package commitment for either major.
+An application that has not migrated remains on its exact Components 3 package profile, including the third-party dependencies declared by that version. Components `>=3 <4` is in maintenance/security-critical support while Components `>=4 <5` is the current candidate and migration target. Owners must decide and approve the Components 3 EOL date no later than 12 months after Components 4 GA. Components 4 does not provide a transparent Prime compatibility package. Its independently versioned `@cratis/components.mui`, `@cratis/components.primereact` (PrimeReact 11), and `@cratis/components.primereact10` adapters cover only the nine stable presentation slots.
 :::
 
 ## Update dependencies
@@ -88,14 +88,14 @@ This is an intentional Components 4 breaking change. The package root now expose
 Run the migration codemod in preview mode first, then apply it:
 
 ```bash
-COMPONENTS_VERSION="$(node -p "require('@cratis/components/package.json').version")"
-npx --package "@cratis/components-codemods@$COMPONENTS_VERSION" \
+TOOLING_RANGE='^4.0.0'
+npx --package "@cratis/components-codemods@$TOOLING_RANGE" \
   cratis-components-remove-root-namespace-imports --check <paths...>
-npx --package "@cratis/components-codemods@$COMPONENTS_VERSION" \
+npx --package "@cratis/components-codemods@$TOOLING_RANGE" \
   cratis-components-remove-root-namespace-imports <paths...>
 ```
 
-If the exact codemod package version is unavailable, stop rather than substituting `latest` or a different Components version. Keep the application on its current package, apply the table manually, or wait for a corrected publication.
+Components 3 has no matching 3.x codemod train. Use the bounded Components 4 tooling range (`>=4 <5`; `^4.0.0` above is the shell-safe equivalent). Never substitute `latest`. Tooling patches release independently from Core. Before scanning or writing, every codemod validates its bundled compatibility manifest, its own version, and the installed Components package from the invocation directory. It fails closed when Components is absent, outside the supported 3.x source or 4.x target window, or the manifest is invalid.
 
 The codemod scans JavaScript/JSX and TypeScript/TSX (including `.mjs`, `.cjs`, `.mts`, and `.cts`), preserves aliases and type-only imports, splits mixed setup/namespace imports, and rewrites a named `export { X } from '@cratis/components'` re-export the same way as the matching import. It refuses to guess at default imports, whole-package namespace imports, TypeScript `import = require(...)` assignments, dynamic imports, CommonJS `require(...)`, wildcard or whole-package re-exports (`export * from '@cratis/components'` / `export * as X from '@cratis/components'`), side-effect imports, or unknown symbols. Review every reported unsupported case manually, then run the consuming project's lint, build, and tests.
 
@@ -107,23 +107,23 @@ Run the root-import codemod above first. The Button and callback codemods resolv
 2. `cratis-components-button-variant-tone`
 3. `cratis-components-change-handler`
 
-Use the exact installed Components version and preview each transform before applying it:
+Use the bounded Components 4 tooling train and preview each transform before applying it:
 
 ```bash
-COMPONENTS_VERSION="$(node -p "require('@cratis/components/package.json').version")"
+TOOLING_RANGE='^4.0.0'
 
-npx --package "@cratis/components-codemods@$COMPONENTS_VERSION" \
+npx --package "@cratis/components-codemods@$TOOLING_RANGE" \
   cratis-components-button-variant-tone --check <paths...>
-npx --package "@cratis/components-codemods@$COMPONENTS_VERSION" \
+npx --package "@cratis/components-codemods@$TOOLING_RANGE" \
   cratis-components-button-variant-tone <paths...>
 
-npx --package "@cratis/components-codemods@$COMPONENTS_VERSION" \
+npx --package "@cratis/components-codemods@$TOOLING_RANGE" \
   cratis-components-change-handler --check <paths...>
-npx --package "@cratis/components-codemods@$COMPONENTS_VERSION" \
+npx --package "@cratis/components-codemods@$TOOLING_RANGE" \
   cratis-components-change-handler <paths...>
 ```
 
-Never substitute `latest` or a different version if the exact codemod package is unavailable. Stop and migrate manually, keep the application on its current Components package, or wait for the matching publication.
+Keep the tooling range within `>=4 <5`; never use `latest`. The codemod preflight enforces the bundled source/target support windows.
 
 The Button transform preserves the legacy `link` → `text` → `outlined` → `solid` precedence and maps literal props to `variant`, `tone`, and `shape`. Existing literal new props win:
 
@@ -166,10 +166,11 @@ Dynamic Button props, JSX spreads, unknown new/legacy conflicts, duplicate props
 
 Review every diagnostic and `TODO(cratis-codemod)` before removing the compatibility props. Then run the application's formatter, lint, type check, tests, and production build. Both codemods are idempotent, include their own TypeScript compiler, support `--package`, require Node.js 20 or newer, and recursively scan `.js`, `.jsx`, `.mjs`, `.cjs`, `.ts`, `.tsx`, `.mts`, and `.cts` files.
 
-Install the matching ESLint plugin version after migration and compose its recommended config after `@cratis/eslint-config`; `no-root-barrel-import` prevents component namespaces from returning:
+Install the bounded Components 4 ESLint train after migration and compose its recommended config after `@cratis/eslint-config`; `no-root-barrel-import` prevents component namespaces from returning. ESLint patches release independently from Core:
 
 ```bash
-npm install --save-dev "@cratis/eslint-plugin-components@$COMPONENTS_VERSION"
+TOOLING_RANGE='^4.0.0'
+npm install --save-dev "@cratis/eslint-plugin-components@$TOOLING_RANGE"
 ```
 
 See the `@cratis/eslint-plugin-components` README included with that package for the flat-config example and the other Components consumer rules.
diff --git a/ESLint/README.md b/ESLint/README.md
index b0595549..eb1d4aa7 100644
--- a/ESLint/README.md
+++ b/ESLint/README.md
@@ -16,11 +16,12 @@ Both import rules cover static `import` and re-`export … from` forms. The root
 
 ## Install
 
-Use the same exact version as the installed Components package:
+Use the independently released Components 4 tooling train bounded to `>=4 <5`. Never use
+`latest`; plugin patches can release independently from Components Core:
 
 ```sh
-COMPONENTS_VERSION="$(node -p "require('@cratis/components/package.json').version")"
-yarn add -D "@cratis/eslint-plugin-components@$COMPONENTS_VERSION" \
+TOOLING_RANGE='^4.0.0' # Shell-safe equivalent of >=4 <5.
+yarn add -D "@cratis/eslint-plugin-components@$TOOLING_RANGE" \
   @cratis/eslint-config eslint
 ```
 
diff --git a/ESLint/package.json b/ESLint/package.json
index c18a4314..4414202d 100644
--- a/ESLint/package.json
+++ b/ESLint/package.json
@@ -1,6 +1,7 @@
 {
     "name": "@cratis/eslint-plugin-components",
     "version": "4.0.0",
+    "cratisIndependentVersion": true,
     "description": "Cratis Components ESLint rules: import from subpaths not the root barrel, use the Cratis dialog wrappers instead of primereact/dialog, require onBeforeExecute callbacks to return their values, keep React hooks out of view models, protect the repository-owned React-free kernel, and identify CommandForm fields by a tamper-resistant marker rather than a raw displayName string. Compose on top of @cratis/eslint-config.",
     "author": "Cratis",
     "license": "MIT",
diff --git a/README.md b/README.md
index 9d549d11..d5c83867 100644
--- a/README.md
+++ b/README.md
@@ -10,7 +10,6 @@ stable parts, and state attributes. React Aria is an internal implementation
 dependency for selected interaction primitives.
 
 [![NPM](https://img.shields.io/npm/v/@cratis/components?label=@cratis/components&logo=npm)](https://www.npmjs.com/package/@cratis/components)
-[![Publish](https://github.com/Cratis/Components/actions/workflows/publish.yml/badge.svg)](https://github.com/Cratis/Components/actions/workflows/publish.yml)
 [![Documentation site](https://github.com/Cratis/Documentation/actions/workflows/docs-site.yml/badge.svg)](https://github.com/Cratis/Documentation/actions/workflows/docs-site.yml)
 [Documentation](https://cratis.io/components/)
 
@@ -131,10 +130,12 @@ Release notes and announcements are published on the [Cratis blog](https://blog.
 The repository ships `@cratis/components-codemods` and
 `@cratis/eslint-plugin-components` for moving Components 3 root namespace imports to
 explicit subpaths and preventing regressions afterward. The [migration guide](./Source/MIGRATION.md)
-owns the exact-version codemod command and stop cases; the [ESLint plugin
-README](./ESLint/README.md) owns installation and flat-config composition. Use the same
-exact published version as `@cratis/components` for both migration packages. Coordinated
-publication is currently disabled; never substitute a different or `latest` tooling version.
+owns the bounded Components 4 codemod commands and stop cases; the [ESLint plugin
+README](./ESLint/README.md) owns installation and flat-config composition. Components 3 has no
+3.x codemod train. Use tooling in `>=4 <5` (for example the shell-safe `^4.0.0` range), never
+`latest`. Codemod and ESLint patches release independently from Core; codemod preflight enforces
+the bundled compatibility manifest and installed Components support window. Publication remains
+fail closed under the repository [release policy](./RELEASE.md).
 
 ## Contributing
 
diff --git a/RELEASE.md b/RELEASE.md
new file mode 100644
index 00000000..ecedf206
--- /dev/null
+++ b/RELEASE.md
@@ -0,0 +1,95 @@
+# Release policy
+
+This repository is fail closed for publication. The checked-in compatibility manifest describes a
+`source-candidate`; it is not publication authorization. `.github/workflows/publish.yml` remains a
+manual, permissions-empty, failing no-op until owners approve and review a separate release change.
+This policy defines that future release gate but does not implement a live publisher.
+
+## General-availability scope
+
+A Components 4 general-availability release covers exactly seven public packages:
+
+1. `@cratis/components`
+2. `@cratis/eslint-plugin-components`
+3. `@cratis/components-codemods`
+4. `@cratis/components.conformance`
+5. `@cratis/components.mui`
+6. `@cratis/components.primereact`
+7. `@cratis/components.primereact10`
+
+The Plain DOM conformance fixture and composed Storybook are private evidence. They are never
+published. Package versions belong to independent release trains as declared by each package
+manifest and the generated compatibility contract; a source manifest version is not registry
+release identity.
+
+## Authorization gate
+
+Publication requires an owner-reviewed change that deliberately switches the generated contract
+from `source-candidate` to publication-authorized metadata and sets `publicationEnabled: true`.
+That validation must also contain a valid, owner-approved Components 3 EOL date. Authorization must
+not be inferred from a branch, commit, tag, package version, passing workflow, or existing registry
+package.
+
+Components `>=3 <4` receives maintenance and security-critical support while Components `>=4 <5`
+is the current candidate and migration target. Owners must decide and approve the Components 3 EOL
+date no later than 12 months after Components 4 GA. The decision is recorded in the compatibility
+manifest before publication is enabled.
+
+## Build immutable candidates
+
+1. Check out the exact reviewed commit and install with the immutable lockfile.
+2. Run all release gates for the seven-package scope and private Plain/Storybook evidence.
+3. Pack each public package exactly once. Never rebuild between candidate verification and
+   publication.
+4. Retain every immutable tarball and record its SHA-512 digest.
+5. Generate and retain an SBOM for every tarball.
+6. Retain verifiable build provenance that binds commit, workflow, package, version, tarball digest,
+   and SBOM.
+7. Stage candidates under a reviewed non-default npm dist-tag. A candidate must never replace the
+   default installation tag implicitly.
+
+No token, license key, registry credential, or signing secret belongs in Components source,
+Storybook, package archives, logs, compatibility metadata, or repository variables available to
+untrusted code. Publication must use reviewed trusted-publisher identity and a human-protected
+environment. There is no automatic deployment approval.
+
+## Publish and promote
+
+Publication is stop-on-first-failure. Do not continue with later packages after any upload,
+attestation, digest, SBOM, provenance, or registry check fails. A retry may upload only the exact
+same retained immutable tarball whose SHA-512 digest was already reviewed; never rebuild or mutate a
+version after a partial failure.
+
+Publish and verify tooling, conformance, and adapters before Core. Promotion order is:
+
+1. `@cratis/eslint-plugin-components`
+2. `@cratis/components-codemods`
+3. `@cratis/components.conformance`
+4. `@cratis/components.mui`
+5. `@cratis/components.primereact`
+6. `@cratis/components.primereact10`
+7. `@cratis/components`
+
+After each candidate upload, verify registry metadata, package visibility, version, dist-tag,
+tarball SHA-512, unpacked file inventory, bundled compatibility manifest, SBOM, and provenance.
+Only after all seven immutable candidates pass registry verification may owners promote their
+reviewed tags. Promotion must preserve independent package versions and the compatibility ranges;
+it must not rewrite or repack artifacts.
+
+Create repository tags and a GitHub release only after final registry verification succeeds for all
+seven packages. Release notes identify every package version and immutable digest. Do not create a
+tag or GitHub release to recover from an incomplete registry publication.
+
+## Safety invariants
+
+- Never restore the obsolete root `publish-version` command or workspace manifest-mutation helper.
+- Never publish automatically on push, merge, schedule, release, or another workflow's completion.
+- Never auto-approve the protected publication environment.
+- Never continue after a package publication failure.
+- Never retry using a rebuilt tarball.
+- Never put npm or third-party renderer credentials in this repository.
+- Never create tags or GitHub releases before registry verification.
+- Keep `.github/workflows/publish.yml` workflow-dispatch-only, permissions-empty, and failing while
+  `publicationEnabled` is false.
+
+Run `yarn verify-compat-manifest` and `yarn verify-release-safety` for every release-policy change.
diff --git a/Source/MIGRATION.md b/Source/MIGRATION.md
index 1b5cd3a1..455c1c2d 100644
--- a/Source/MIGRATION.md
+++ b/Source/MIGRATION.md
@@ -5,7 +5,7 @@ Components 4 replaces the PrimeReact-backed Components 3 foundation with Compone
 This is a major-version migration. Rendered markup, styling parts, provider configuration, date entry, root imports, and some deprecated props change.
 
 :::note
-An application that has not migrated remains on its exact Components 3 package profile, including the third-party dependencies declared by that version. Components 4 does not provide a transparent Prime compatibility package. Its independently versioned `@cratis/components.mui`, `@cratis/components.primereact` (PrimeReact 11), and `@cratis/components.primereact10` adapters cover only the nine stable presentation slots. Review the exact package manifests and third-party terms for every version the application keeps. This guide makes no support-window, security-fix, maintenance, or future-package commitment for either major.
+An application that has not migrated remains on its exact Components 3 package profile, including the third-party dependencies declared by that version. Components `>=3 <4` is in maintenance/security-critical support while Components `>=4 <5` is the current candidate and migration target. Owners must decide and approve the Components 3 EOL date no later than 12 months after Components 4 GA. Components 4 does not provide a transparent Prime compatibility package. Its independently versioned `@cratis/components.mui`, `@cratis/components.primereact` (PrimeReact 11), and `@cratis/components.primereact10` adapters cover only the nine stable presentation slots.
 :::
 
 ## Update dependencies
@@ -87,14 +87,14 @@ This is an intentional Components 4 breaking change. The package root now expose
 Run the migration codemod in preview mode first, then apply it:
 
 ```bash
-COMPONENTS_VERSION="$(node -p "require('@cratis/components/package.json').version")"
-npx --package "@cratis/components-codemods@$COMPONENTS_VERSION" \
+TOOLING_RANGE='^4.0.0'
+npx --package "@cratis/components-codemods@$TOOLING_RANGE" \
   cratis-components-remove-root-namespace-imports --check <paths...>
-npx --package "@cratis/components-codemods@$COMPONENTS_VERSION" \
+npx --package "@cratis/components-codemods@$TOOLING_RANGE" \
   cratis-components-remove-root-namespace-imports <paths...>
 ```
 
-If the exact codemod package version is unavailable, stop rather than substituting `latest` or a different Components version. Keep the application on its current package, apply the table manually, or wait for a corrected publication.
+Components 3 has no matching 3.x codemod train. Use the bounded Components 4 tooling range (`>=4 <5`; `^4.0.0` above is the shell-safe equivalent). Never substitute `latest`. Tooling patches release independently from Core. Before scanning or writing, every codemod validates its bundled compatibility manifest, its own version, and the installed Components package from the invocation directory. It fails closed when Components is absent, outside the supported 3.x source or 4.x target window, or the manifest is invalid.
 
 The codemod scans JavaScript/JSX and TypeScript/TSX (including `.mjs`, `.cjs`, `.mts`, and `.cts`), preserves aliases and type-only imports, splits mixed setup/namespace imports, and rewrites a named `export { X } from '@cratis/components'` re-export the same way as the matching import. It reports unsupported cases without guessing: default or whole-package namespace imports, TypeScript `import = require(...)` assignments, dynamic imports, CommonJS `require(...)`, wildcard or whole-package re-exports (`export * from '@cratis/components'` / `export * as X from '@cratis/components'`), side-effect imports, and unknown symbols. Review its diagnostics, then run the consuming project's lint, build, and tests.
 
@@ -106,23 +106,23 @@ Run the root-import codemod above first. The Button and callback codemods resolv
 2. `cratis-components-button-variant-tone`
 3. `cratis-components-change-handler`
 
-Use the exact installed Components version and preview each transform before applying it:
+Use the bounded Components 4 tooling train and preview each transform before applying it:
 
 ```bash
-COMPONENTS_VERSION="$(node -p "require('@cratis/components/package.json').version")"
+TOOLING_RANGE='^4.0.0'
 
-npx --package "@cratis/components-codemods@$COMPONENTS_VERSION" \
+npx --package "@cratis/components-codemods@$TOOLING_RANGE" \
   cratis-components-button-variant-tone --check <paths...>
-npx --package "@cratis/components-codemods@$COMPONENTS_VERSION" \
+npx --package "@cratis/components-codemods@$TOOLING_RANGE" \
   cratis-components-button-variant-tone <paths...>
 
-npx --package "@cratis/components-codemods@$COMPONENTS_VERSION" \
+npx --package "@cratis/components-codemods@$TOOLING_RANGE" \
   cratis-components-change-handler --check <paths...>
-npx --package "@cratis/components-codemods@$COMPONENTS_VERSION" \
+npx --package "@cratis/components-codemods@$TOOLING_RANGE" \
   cratis-components-change-handler <paths...>
 ```
 
-Never substitute `latest` or a different version if the exact codemod package is unavailable. Stop and migrate manually, keep the application on its current Components package, or wait for the matching publication.
+Keep the tooling range within `>=4 <5`; never use `latest`. The codemod preflight enforces the bundled source/target support windows.
 
 The Button transform preserves the legacy `link` → `text` → `outlined` → `solid` precedence and maps literal props to `variant`, `tone`, and `shape`. Existing literal new props win:
 
@@ -165,10 +165,11 @@ Dynamic Button props, JSX spreads, unknown new/legacy conflicts, duplicate props
 
 Review every diagnostic and `TODO(cratis-codemod)` before removing the compatibility props. Then run the application's formatter, lint, type check, tests, and production build. Both codemods are idempotent, include their own TypeScript compiler, support `--package`, require Node.js 20 or newer, and recursively scan `.js`, `.jsx`, `.mjs`, `.cjs`, `.ts`, `.tsx`, `.mts`, and `.cts` files.
 
-Install the matching ESLint plugin version after migration and compose its recommended config after `@cratis/eslint-config`; `no-root-barrel-import` prevents component namespaces from returning:
+Install the bounded Components 4 ESLint train after migration and compose its recommended config after `@cratis/eslint-config`; `no-root-barrel-import` prevents component namespaces from returning. ESLint patches release independently from Core:
 
 ```bash
-npm install --save-dev "@cratis/eslint-plugin-components@$COMPONENTS_VERSION"
+TOOLING_RANGE='^4.0.0'
+npm install --save-dev "@cratis/eslint-plugin-components@$TOOLING_RANGE"
 ```
 
 See the `@cratis/eslint-plugin-components` README included with that package for the flat-config example and the other Components consumer rules.
diff --git a/Source/README.md b/Source/README.md
index 049943c8..f35e96c2 100644
--- a/Source/README.md
+++ b/Source/README.md
@@ -41,6 +41,11 @@ npm install @cratis/components \
 
 The current manifest does not declare PrimeReact, PrimeIcons, or PrimeUI packages as dependencies or peers. Applications retaining direct dependencies keep their own package, provider, styling, and license boundaries.
 
+The generated compatibility contract is published at
+`@cratis/components/compat-manifest.json`. It records the supported Components and tooling
+windows, independent package trains, renderer ABI/profile ranges, and exact lower/current adapter
+evidence. `publicationEnabled: false` means the source is not authorized for publication.
+
 **Yarn PnP note:** the current `@cratis/arc.react@22.5.0` package imports `rxjs` without declaring it. Strict PnP consumers install `rxjs@7.8.2` and add a temporary `packageExtensions` entry for `@cratis/arc.react@22.5.0`; remove it when Arc publishes corrected metadata. The canonical [getting-started guide](https://cratis.io/components/getting-started/) contains the exact YAML.
 
 `pixi.js@^8.20.0` is an additional **optional** peer, required only by `Canvas` and `PivotViewer` (the Spatial capability profile — see [Import from explicit subpaths](#import-from-explicit-subpaths) below). Every other subpath needs nothing beyond the peers above:
@@ -255,8 +260,9 @@ The current package manifest does not declare PrimeReact as a required runtime
 or peer. Follow the [Components 3 to 4 migration guide](./MIGRATION.md)
 for dependency removal, provider changes, product token mapping, stable part
 names, DatePicker changes, table behavior, notifications, direct Prime import
-replacements, the exact-version `@cratis/components-codemods` command, and the
-`@cratis/eslint-plugin-components` guard.
+replacements, the bounded Components 4 `@cratis/components-codemods` commands, and the
+independently patched `@cratis/eslint-plugin-components` guard. The codemod validates its bundled
+compatibility manifest and the installed Components support window before scanning source.
 
 The old `@cratis/components/styled`, `styledMode`, `CratisPreset`, and `primeReactStyles` renderer exports are removed. Move styling to tokens and stable parts before upgrading.
 
diff --git a/Source/compat-manifest.json b/Source/compat-manifest.json
new file mode 100644
index 00000000..950a310b
--- /dev/null
+++ b/Source/compat-manifest.json
@@ -0,0 +1,303 @@
+{
+    "schemaVersion": 2,
+    "releaseStatus": "source-candidate",
+    "publicationEnabled": false,
+    "gaScope": {
+        "publicPackages": [
+            "@cratis/components",
+            "@cratis/eslint-plugin-components",
+            "@cratis/components-codemods",
+            "@cratis/components.conformance",
+            "@cratis/components.mui",
+            "@cratis/components.primereact",
+            "@cratis/components.primereact10"
+        ],
+        "privateEvidence": [
+            {
+                "id": "plain",
+                "name": "Plain DOM renderer conformance falsification fixture",
+                "purpose": "private-conformance-evidence",
+                "private": true,
+                "published": false
+            },
+            {
+                "id": "storybook",
+                "name": "Composed renderer Storybook",
+                "purpose": "private-renderer-evidence",
+                "private": true,
+                "published": false
+            }
+        ]
+    },
+    "toolingCompatibility": {
+        "componentsCore": ">=4 <5",
+        "eslint": ">=4 <5",
+        "codemods": ">=4 <5"
+    },
+    "supportWindows": {
+        "components3": {
+            "components": ">=3 <4",
+            "status": "maintenance-security-critical",
+            "migrationRole": "source",
+            "migrationTarget": ">=4 <5",
+            "tooling": ">=4 <5",
+            "eolAt": null,
+            "eolApprovedByOwners": false,
+            "ownerDecisionPolicy": "Set and approve EOL no later than 12 months after Components 4 GA."
+        },
+        "components4": {
+            "components": ">=4 <5",
+            "status": "current-candidate",
+            "migrationRole": "target",
+            "rendererAbi": 1,
+            "coreProfile": "core/v1",
+            "adapterProfile": "stable-presentation/v1",
+            "tooling": {
+                "eslint": ">=4 <5",
+                "codemods": ">=4 <5"
+            },
+            "adapters": {
+                "@cratis/components.conformance": ">=1 <2",
+                "@cratis/components.mui": ">=1 <2",
+                "@cratis/components.primereact": ">=1 <2",
+                "@cratis/components.primereact10": ">=1 <2"
+            }
+        }
+    },
+    "packages": [
+        {
+            "name": "@cratis/components",
+            "role": "core",
+            "version": "4.0.0",
+            "releaseMajorRange": ">=4 <5",
+            "independentRelease": false,
+            "private": false,
+            "packageAccess": "public",
+            "peerDependencies": {
+                "@cratis/arc": ">=20.3.1 <23",
+                "@cratis/arc.react": ">=20.3.1 <23",
+                "@cratis/fundamentals": "^7.10.3",
+                "pixi.js": "^8.20.0",
+                "react": "^19.0.0",
+                "react-dom": "^19.0.0",
+                "reflect-metadata": "0.2.2",
+                "tsyringe": "4.10.0"
+            },
+            "upstream": {
+                "react": "^19.0.0"
+            },
+            "rendererAbi": 1,
+            "rendererProfile": "core/v1"
+        },
+        {
+            "name": "@cratis/eslint-plugin-components",
+            "role": "eslint",
+            "version": "4.0.0",
+            "releaseMajorRange": ">=4 <5",
+            "independentRelease": true,
+            "private": false,
+            "packageAccess": "public",
+            "peerDependencies": {
+                "eslint": ">=9"
+            },
+            "upstream": {}
+        },
+        {
+            "name": "@cratis/components-codemods",
+            "role": "codemods",
+            "version": "4.0.0",
+            "releaseMajorRange": ">=4 <5",
+            "independentRelease": true,
+            "private": false,
+            "packageAccess": "public",
+            "peerDependencies": {},
+            "upstream": {}
+        },
+        {
+            "name": "@cratis/components.conformance",
+            "role": "conformance",
+            "version": "1.0.0",
+            "releaseMajorRange": ">=1 <2",
+            "independentRelease": true,
+            "private": false,
+            "packageAccess": "public",
+            "peerDependencies": {
+                "@cratis/components": ">=4 <5",
+                "react": "^19.0.0",
+                "react-dom": "^19.0.0"
+            },
+            "upstream": {},
+            "rendererAbi": 1
+        },
+        {
+            "name": "@cratis/components.mui",
+            "role": "renderer-adapter",
+            "version": "1.0.0",
+            "releaseMajorRange": ">=1 <2",
+            "independentRelease": true,
+            "private": false,
+            "packageAccess": "public",
+            "peerDependencies": {
+                "@cratis/components": ">=4 <5",
+                "@emotion/react": ">=11.5 <12",
+                "@emotion/styled": ">=11.11 <12",
+                "@mui/material": ">=9 <10",
+                "react": "^19.0.0",
+                "react-dom": "^19.0.0"
+            },
+            "upstream": {
+                "@emotion/react": ">=11.5 <12",
+                "@emotion/styled": ">=11.11 <12",
+                "@mui/material": ">=9 <10",
+                "react": "^19.0.0",
+                "react-dom": "^19.0.0"
+            },
+            "rendererAbi": 1,
+            "rendererProfile": "stable-presentation/v1",
+            "verifiedPeers": {
+                "minimum": {
+                    "@cratis/arc": "22.5.0",
+                    "@cratis/arc.react": "22.5.0",
+                    "@cratis/fundamentals": "7.18.1",
+                    "@emotion/react": "11.5.0",
+                    "@emotion/styled": "11.11.0",
+                    "@mui/material": "9.0.0",
+                    "@types/react": "19.0.0",
+                    "react": "19.0.0",
+                    "react-dom": "19.0.0",
+                    "reflect-metadata": "0.2.2",
+                    "rxjs": "7.8.2",
+                    "tsyringe": "4.10.0"
+                },
+                "current": {
+                    "@cratis/arc": "22.5.0",
+                    "@cratis/arc.react": "22.5.0",
+                    "@cratis/fundamentals": "7.18.1",
+                    "@emotion/react": "11.14.0",
+                    "@emotion/styled": "11.14.1",
+                    "@mui/material": "9.4.0",
+                    "@types/react": "19.2.18",
+                    "react": "19.2.8",
+                    "react-dom": "19.2.8",
+                    "reflect-metadata": "0.2.2",
+                    "rxjs": "7.8.2",
+                    "tsyringe": "4.10.0"
+                }
+            }
+        },
+        {
+            "name": "@cratis/components.primereact",
+            "role": "renderer-adapter",
+            "version": "1.0.0",
+            "releaseMajorRange": ">=1 <2",
+            "independentRelease": true,
+            "private": false,
+            "packageAccess": "public",
+            "peerDependencies": {
+                "@cratis/components": ">=4 <5",
+                "@primereact/core": ">=11 <12",
+                "@primereact/ui": ">=11 <12",
+                "@primeuix/themes": ">=3 <4",
+                "primereact": ">=11 <12",
+                "react": "^19.0.0",
+                "react-dom": "^19.0.0"
+            },
+            "upstream": {
+                "@primereact/core": ">=11 <12",
+                "@primereact/ui": ">=11 <12",
+                "@primeuix/themes": ">=3 <4",
+                "primereact": ">=11 <12",
+                "react": "^19.0.0",
+                "react-dom": "^19.0.0"
+            },
+            "rendererAbi": 1,
+            "rendererProfile": "stable-presentation/v1",
+            "verifiedPeers": {
+                "minimum": {
+                    "@cratis/arc": "22.5.0",
+                    "@cratis/arc.react": "22.5.0",
+                    "@cratis/fundamentals": "7.18.1",
+                    "@primereact/core": "11.0.0",
+                    "@primereact/headless": "11.0.0",
+                    "@primereact/styles": "11.0.0",
+                    "@primereact/ui": "11.0.0",
+                    "@primeuix/motion": "1.0.0",
+                    "@primeuix/themes": "3.0.0",
+                    "@types/react": "19.0.0",
+                    "primereact": "11.0.0",
+                    "react": "19.0.0",
+                    "react-dom": "19.0.0",
+                    "reflect-metadata": "0.2.2",
+                    "rxjs": "7.8.2",
+                    "tsyringe": "4.10.0"
+                },
+                "current": {
+                    "@cratis/arc": "22.5.0",
+                    "@cratis/arc.react": "22.5.0",
+                    "@cratis/fundamentals": "7.18.1",
+                    "@primereact/core": "11.1.0",
+                    "@primereact/headless": "11.1.0",
+                    "@primereact/styles": "11.1.0",
+                    "@primereact/ui": "11.1.0",
+                    "@primeuix/motion": "1.0.0",
+                    "@primeuix/themes": "3.0.0",
+                    "@types/react": "19.2.18",
+                    "primereact": "11.1.0",
+                    "react": "19.2.8",
+                    "react-dom": "19.2.8",
+                    "reflect-metadata": "0.2.2",
+                    "rxjs": "7.8.2",
+                    "tsyringe": "4.10.0"
+                }
+            }
+        },
+        {
+            "name": "@cratis/components.primereact10",
+            "role": "renderer-adapter",
+            "version": "1.0.0",
+            "releaseMajorRange": ">=1 <2",
+            "independentRelease": true,
+            "private": false,
+            "packageAccess": "public",
+            "peerDependencies": {
+                "@cratis/components": ">=4 <5",
+                "primereact": ">=10.9.9 <11",
+                "react": "^19.0.0",
+                "react-dom": "^19.0.0"
+            },
+            "upstream": {
+                "primereact": ">=10.9.9 <11",
+                "react": "^19.0.0",
+                "react-dom": "^19.0.0"
+            },
+            "rendererAbi": 1,
+            "rendererProfile": "stable-presentation/v1",
+            "verifiedPeers": {
+                "minimum": {
+                    "@cratis/arc": "22.5.0",
+                    "@cratis/arc.react": "22.5.0",
+                    "@cratis/fundamentals": "7.18.1",
+                    "@types/react": "19.0.0",
+                    "primereact": "10.9.9",
+                    "react": "19.0.0",
+                    "react-dom": "19.0.0",
+                    "reflect-metadata": "0.2.2",
+                    "rxjs": "7.8.2",
+                    "tsyringe": "4.10.0"
+                },
+                "current": {
+                    "@cratis/arc": "22.5.0",
+                    "@cratis/arc.react": "22.5.0",
+                    "@cratis/fundamentals": "7.18.1",
+                    "@types/react": "19.2.18",
+                    "primereact": "10.9.9",
+                    "react": "19.2.8",
+                    "react-dom": "19.2.8",
+                    "reflect-metadata": "0.2.2",
+                    "rxjs": "7.8.2",
+                    "tsyringe": "4.10.0"
+                }
+            }
+        }
+    ]
+}
diff --git a/Source/package.json b/Source/package.json
index a5bb6859..93bc0e57 100644
--- a/Source/package.json
+++ b/Source/package.json
@@ -34,6 +34,7 @@
         "THIRD_PARTY_NOTICES.md",
         "MIGRATION.md",
         "CONFORMANCE.md",
+        "compat-manifest.json",
         "!dist/**/*.stories.*",
         "!dist/**/given.*",
         "!dist/**/storybook-static/**",
@@ -51,6 +52,7 @@
     ],
     "exports": {
         "./package.json": "./package.json",
+        "./compat-manifest.json": "./compat-manifest.json",
         ".": {
             "types": "./dist/esm/index.d.ts",
             "import": "./dist/esm/index.js"
diff --git a/Source/scripts/verify-package-archive.mjs b/Source/scripts/verify-package-archive.mjs
index bbafa44d..ed2a5152 100644
--- a/Source/scripts/verify-package-archive.mjs
+++ b/Source/scripts/verify-package-archive.mjs
@@ -2,7 +2,10 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import { gzipSync } from 'node:zlib';
+import { readFileSync } from 'node:fs';
 import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import semver from 'semver';
 import { readTarEntries } from './lib/packed-artifact.mjs';
 import {
     assertExpectedCascadeLayerOrder,
@@ -38,6 +41,7 @@ const requiredEntries = [
     'package/dist/esm/renderer/builtin/index.js',
     'package/dist/esm/renderer/builtin/index.d.ts',
     'package/CONFORMANCE.md',
+    'package/compat-manifest.json',
     'package/dist/esm/PatrickHand-OFL.txt',
     'package/dist/esm/PatrickHand-latin.woff2',
     'package/dist/esm/PatrickHand-latin-ext.woff2',
@@ -50,6 +54,56 @@ if (missing.length > 0) {
     );
     process.exit(1);
 }
+
+const repositoryManifestPath = path.resolve(
+    path.dirname(fileURLToPath(import.meta.url)),
+    '..',
+    '..',
+    'compat-manifest.json',
+);
+const packedCompatibilityBytes = packedEntries.get('package/compat-manifest.json');
+const repositoryCompatibilityBytes = readFileSync(repositoryManifestPath);
+if (!packedCompatibilityBytes.equals(repositoryCompatibilityBytes)) {
+    console.error(
+        'Packed compatibility manifest is not byte-identical to the generated root contract.',
+    );
+    process.exit(1);
+}
+let compatibilityManifest;
+try {
+    compatibilityManifest = JSON.parse(packedCompatibilityBytes.toString('utf8'));
+} catch (error) {
+    console.error(
+        `Packed compatibility manifest is invalid JSON: ${error instanceof Error ? error.message : String(error)}.`,
+    );
+    process.exit(1);
+}
+let packedPackage;
+try {
+    packedPackage = JSON.parse(readPackedText('package/package.json'));
+} catch (error) {
+    console.error(
+        `Packed package.json is invalid: ${error instanceof Error ? error.message : String(error)}.`,
+    );
+    process.exit(1);
+}
+const coreEntry = compatibilityManifest.packages?.find(
+    ({ name }) => name === '@cratis/components',
+);
+if (
+    compatibilityManifest.schemaVersion !== 2 ||
+    compatibilityManifest.releaseStatus !== 'source-candidate' ||
+    compatibilityManifest.publicationEnabled !== false ||
+    compatibilityManifest.gaScope?.publicPackages?.length !== 7 ||
+    coreEntry?.version !== packedPackage.version ||
+    !semver.satisfies(packedPackage.version, coreEntry?.releaseMajorRange ?? '')
+) {
+    console.error(
+        'Packed compatibility manifest contains invalid or stale Core release metadata.',
+    );
+    process.exit(1);
+}
+
 const expectedFonts = new Set(
     requiredEntries.filter((entry) => /\.(?:otf|ttf|woff2?)$/iu.test(entry)),
 );
diff --git a/compat-manifest.json b/compat-manifest.json
index 87574179..950a310b 100644
--- a/compat-manifest.json
+++ b/compat-manifest.json
@@ -1,23 +1,76 @@
 {
-    "schemaVersion": 1,
+    "schemaVersion": 2,
+    "releaseStatus": "source-candidate",
     "publicationEnabled": false,
-    "rendererAbi": 1,
-    "coreTarget": "4.x",
-    "sourcePackageManifests": [
-        "Source/package.json",
-        "ESLint/package.json",
-        "Codemods/package.json",
-        "Conformance/package.json",
-        "Adapters/Mui/package.json",
-        "Adapters/PrimeReact/package.json",
-        "Adapters/PrimeReact10/package.json"
-    ],
+    "gaScope": {
+        "publicPackages": [
+            "@cratis/components",
+            "@cratis/eslint-plugin-components",
+            "@cratis/components-codemods",
+            "@cratis/components.conformance",
+            "@cratis/components.mui",
+            "@cratis/components.primereact",
+            "@cratis/components.primereact10"
+        ],
+        "privateEvidence": [
+            {
+                "id": "plain",
+                "name": "Plain DOM renderer conformance falsification fixture",
+                "purpose": "private-conformance-evidence",
+                "private": true,
+                "published": false
+            },
+            {
+                "id": "storybook",
+                "name": "Composed renderer Storybook",
+                "purpose": "private-renderer-evidence",
+                "private": true,
+                "published": false
+            }
+        ]
+    },
+    "toolingCompatibility": {
+        "componentsCore": ">=4 <5",
+        "eslint": ">=4 <5",
+        "codemods": ">=4 <5"
+    },
+    "supportWindows": {
+        "components3": {
+            "components": ">=3 <4",
+            "status": "maintenance-security-critical",
+            "migrationRole": "source",
+            "migrationTarget": ">=4 <5",
+            "tooling": ">=4 <5",
+            "eolAt": null,
+            "eolApprovedByOwners": false,
+            "ownerDecisionPolicy": "Set and approve EOL no later than 12 months after Components 4 GA."
+        },
+        "components4": {
+            "components": ">=4 <5",
+            "status": "current-candidate",
+            "migrationRole": "target",
+            "rendererAbi": 1,
+            "coreProfile": "core/v1",
+            "adapterProfile": "stable-presentation/v1",
+            "tooling": {
+                "eslint": ">=4 <5",
+                "codemods": ">=4 <5"
+            },
+            "adapters": {
+                "@cratis/components.conformance": ">=1 <2",
+                "@cratis/components.mui": ">=1 <2",
+                "@cratis/components.primereact": ">=1 <2",
+                "@cratis/components.primereact10": ">=1 <2"
+            }
+        }
+    },
     "packages": [
         {
             "name": "@cratis/components",
-            "manifest": "Source/package.json",
             "role": "core",
             "version": "4.0.0",
+            "releaseMajorRange": ">=4 <5",
+            "independentRelease": false,
             "private": false,
             "packageAccess": "public",
             "peerDependencies": {
@@ -33,13 +86,15 @@
             "upstream": {
                 "react": "^19.0.0"
             },
-            "rendererAbi": 1
+            "rendererAbi": 1,
+            "rendererProfile": "core/v1"
         },
         {
             "name": "@cratis/eslint-plugin-components",
-            "manifest": "ESLint/package.json",
             "role": "eslint",
             "version": "4.0.0",
+            "releaseMajorRange": ">=4 <5",
+            "independentRelease": true,
             "private": false,
             "packageAccess": "public",
             "peerDependencies": {
@@ -49,9 +104,10 @@
         },
         {
             "name": "@cratis/components-codemods",
-            "manifest": "Codemods/package.json",
             "role": "codemods",
             "version": "4.0.0",
+            "releaseMajorRange": ">=4 <5",
+            "independentRelease": true,
             "private": false,
             "packageAccess": "public",
             "peerDependencies": {},
@@ -59,9 +115,10 @@
         },
         {
             "name": "@cratis/components.conformance",
-            "manifest": "Conformance/package.json",
             "role": "conformance",
             "version": "1.0.0",
+            "releaseMajorRange": ">=1 <2",
+            "independentRelease": true,
             "private": false,
             "packageAccess": "public",
             "peerDependencies": {
@@ -74,33 +131,66 @@
         },
         {
             "name": "@cratis/components.mui",
-            "manifest": "Adapters/Mui/package.json",
             "role": "renderer-adapter",
             "version": "1.0.0",
+            "releaseMajorRange": ">=1 <2",
+            "independentRelease": true,
             "private": false,
             "packageAccess": "public",
             "peerDependencies": {
                 "@cratis/components": ">=4 <5",
-                "@emotion/react": ">=11 <12",
-                "@emotion/styled": ">=11 <12",
+                "@emotion/react": ">=11.5 <12",
+                "@emotion/styled": ">=11.11 <12",
                 "@mui/material": ">=9 <10",
                 "react": "^19.0.0",
                 "react-dom": "^19.0.0"
             },
             "upstream": {
-                "@emotion/react": ">=11 <12",
-                "@emotion/styled": ">=11 <12",
+                "@emotion/react": ">=11.5 <12",
+                "@emotion/styled": ">=11.11 <12",
                 "@mui/material": ">=9 <10",
                 "react": "^19.0.0",
                 "react-dom": "^19.0.0"
             },
-            "rendererAbi": 1
+            "rendererAbi": 1,
+            "rendererProfile": "stable-presentation/v1",
+            "verifiedPeers": {
+                "minimum": {
+                    "@cratis/arc": "22.5.0",
+                    "@cratis/arc.react": "22.5.0",
+                    "@cratis/fundamentals": "7.18.1",
+                    "@emotion/react": "11.5.0",
+                    "@emotion/styled": "11.11.0",
+                    "@mui/material": "9.0.0",
+                    "@types/react": "19.0.0",
+                    "react": "19.0.0",
+                    "react-dom": "19.0.0",
+                    "reflect-metadata": "0.2.2",
+                    "rxjs": "7.8.2",
+                    "tsyringe": "4.10.0"
+                },
+                "current": {
+                    "@cratis/arc": "22.5.0",
+                    "@cratis/arc.react": "22.5.0",
+                    "@cratis/fundamentals": "7.18.1",
+                    "@emotion/react": "11.14.0",
+                    "@emotion/styled": "11.14.1",
+                    "@mui/material": "9.4.0",
+                    "@types/react": "19.2.18",
+                    "react": "19.2.8",
+                    "react-dom": "19.2.8",
+                    "reflect-metadata": "0.2.2",
+                    "rxjs": "7.8.2",
+                    "tsyringe": "4.10.0"
+                }
+            }
         },
         {
             "name": "@cratis/components.primereact",
-            "manifest": "Adapters/PrimeReact/package.json",
             "role": "renderer-adapter",
             "version": "1.0.0",
+            "releaseMajorRange": ">=1 <2",
+            "independentRelease": true,
             "private": false,
             "packageAccess": "public",
             "peerDependencies": {
@@ -120,13 +210,53 @@
                 "react": "^19.0.0",
                 "react-dom": "^19.0.0"
             },
-            "rendererAbi": 1
+            "rendererAbi": 1,
+            "rendererProfile": "stable-presentation/v1",
+            "verifiedPeers": {
+                "minimum": {
+                    "@cratis/arc": "22.5.0",
+                    "@cratis/arc.react": "22.5.0",
+                    "@cratis/fundamentals": "7.18.1",
+                    "@primereact/core": "11.0.0",
+                    "@primereact/headless": "11.0.0",
+                    "@primereact/styles": "11.0.0",
+                    "@primereact/ui": "11.0.0",
+                    "@primeuix/motion": "1.0.0",
+                    "@primeuix/themes": "3.0.0",
+                    "@types/react": "19.0.0",
+                    "primereact": "11.0.0",
+                    "react": "19.0.0",
+                    "react-dom": "19.0.0",
+                    "reflect-metadata": "0.2.2",
+                    "rxjs": "7.8.2",
+                    "tsyringe": "4.10.0"
+                },
+                "current": {
+                    "@cratis/arc": "22.5.0",
+                    "@cratis/arc.react": "22.5.0",
+                    "@cratis/fundamentals": "7.18.1",
+                    "@primereact/core": "11.1.0",
+                    "@primereact/headless": "11.1.0",
+                    "@primereact/styles": "11.1.0",
+                    "@primereact/ui": "11.1.0",
+                    "@primeuix/motion": "1.0.0",
+                    "@primeuix/themes": "3.0.0",
+                    "@types/react": "19.2.18",
+                    "primereact": "11.1.0",
+                    "react": "19.2.8",
+                    "react-dom": "19.2.8",
+                    "reflect-metadata": "0.2.2",
+                    "rxjs": "7.8.2",
+                    "tsyringe": "4.10.0"
+                }
+            }
         },
         {
             "name": "@cratis/components.primereact10",
-            "manifest": "Adapters/PrimeReact10/package.json",
             "role": "renderer-adapter",
             "version": "1.0.0",
+            "releaseMajorRange": ">=1 <2",
+            "independentRelease": true,
             "private": false,
             "packageAccess": "public",
             "peerDependencies": {
@@ -140,24 +270,34 @@
                 "react": "^19.0.0",
                 "react-dom": "^19.0.0"
             },
-            "rendererAbi": 1
-        }
-    ],
-    "privateArtifacts": [
-        {
-            "id": "plain",
-            "path": "Conformance/for_plain_dom_renderer",
-            "purpose": "Private plain-DOM conformance falsification fixture",
-            "private": true,
-            "published": false
-        },
-        {
-            "id": "storybook",
-            "path": "Storybook",
-            "purpose": "Private composed renderer evidence",
-            "private": true,
-            "published": false,
-            "releaseBlocker": false
+            "rendererAbi": 1,
+            "rendererProfile": "stable-presentation/v1",
+            "verifiedPeers": {
+                "minimum": {
+                    "@cratis/arc": "22.5.0",
+                    "@cratis/arc.react": "22.5.0",
+                    "@cratis/fundamentals": "7.18.1",
+                    "@types/react": "19.0.0",
+                    "primereact": "10.9.9",
+                    "react": "19.0.0",
+                    "react-dom": "19.0.0",
+                    "reflect-metadata": "0.2.2",
+                    "rxjs": "7.8.2",
+                    "tsyringe": "4.10.0"
+                },
+                "current": {
+                    "@cratis/arc": "22.5.0",
+                    "@cratis/arc.react": "22.5.0",
+                    "@cratis/fundamentals": "7.18.1",
+                    "@types/react": "19.2.18",
+                    "primereact": "10.9.9",
+                    "react": "19.2.8",
+                    "react-dom": "19.2.8",
+                    "reflect-metadata": "0.2.2",
+                    "rxjs": "7.8.2",
+                    "tsyringe": "4.10.0"
+                }
+            }
         }
     ]
 }
diff --git a/package.json b/package.json
index a45370b7..413d61db 100644
--- a/package.json
+++ b/package.json
@@ -34,10 +34,11 @@
         "test": "node ./run-task-on-workspaces.js test",
         "generate-compat-manifest": "node ./scripts/generate-compat-manifest.mjs --write",
         "verify-compat-manifest": "node ./scripts/generate-compat-manifest.mjs --check",
+        "verify-release-safety": "node ./scripts/verify-release-safety.mjs",
+        "test-release-policy": "node --test ./scripts/generate-compat-manifest.test.mjs ./scripts/verify-release-safety.test.mjs",
         "test-renderer-adapter-matrix": "node --test ./scripts/verify-renderer-adapter-matrix.test.mjs",
         "verify-renderer-adapters": "node ./scripts/verify-renderer-adapters.mjs",
-        "ci": "yarn verify-compat-manifest && node ./run-task-on-workspaces.js ci",
-        "publish-version": "node ./run-task-on-workspaces.js publish-version $*",
+        "ci": "yarn verify-compat-manifest && yarn verify-release-safety && yarn test-release-policy && node ./run-task-on-workspaces.js ci",
         "up": "node ./run-task-on-workspaces.js up"
     },
     "license": "MIT",
@@ -76,7 +77,6 @@
         "axe-core": "^4.13.0",
         "chai": "^6.2.2",
         "chai-as-promised": "^8.0.2",
-        "edit-json-file": "^1.8.1",
         "eslint": "^10.9.1",
         "eslint-config-prettier": "^10.1.8",
         "eslint-plugin-import": "^2.32.0",
diff --git a/run-task-on-workspaces.js b/run-task-on-workspaces.js
index e713765a..20b8b851 100755
--- a/run-task-on-workspaces.js
+++ b/run-task-on-workspaces.js
@@ -6,24 +6,38 @@ if (process.argv.length < 3) {
     console.log('\nUsage: run-task-on-workspaces [task] [arguments]');
     console.log('\nExamples of tasks: build|test|ci');
     process.exit(1);
-    return;
+}
+
+const task = process.argv[2];
+if (task === 'publish-version') {
+    console.error(
+        "The obsolete 'publish-version' workspace task is disabled. Releases require the reviewed, immutable-tarball process in RELEASE.md.",
+    );
+    process.exit(1);
 }
 
 const path = require('path');
 const fs = require('fs');
 const spawn = require('child_process').spawnSync;
-const editJsonFile = require('edit-json-file');
 const rootPackageJson = require('./package.json');
 const glob = require('glob').sync;
 
-const workspaces = {};
+const readJson = (file) => {
+    try {
+        return JSON.parse(fs.readFileSync(file, 'utf8'));
+    } catch (error) {
+        console.error(
+            `Could not read '${file}': ${error instanceof Error ? error.message : String(error)}`,
+        );
+        process.exit(1);
+    }
+};
 
+const workspaces = {};
 const distFolder = `dist${path.sep}`;
 for (const workspaceDef of rootPackageJson.workspaces) {
     console.log(`Getting packages for workspace definition '${workspaceDef}' \n`);
-
     const pattern = path.join(workspaceDef, '**', 'package.json');
-
     const packages = glob(pattern, {
         cwd: `${process.cwd()}`,
         ignore: [`**${path.sep}${distFolder}**`, '**/node_modules/**'],
@@ -36,132 +50,50 @@ for (const workspaceDef of rootPackageJson.workspaces) {
         process.exit(1);
     }
 
-    packages.forEach((_) => {
-        const package = JSON.parse(fs.readFileSync(_).toString());
-        workspaces[package.name] = path.dirname(_);
-
+    packages.forEach((packageManifest) => {
+        const packageJson = readJson(packageManifest);
+        workspaces[packageJson.name] = path.dirname(packageManifest);
         console.log(
-            `Including workspace '${package.name}' at '${workspaces[package.name]}'`,
+            `Including workspace '${packageJson.name}' at '${workspaces[packageJson.name]}'`,
         );
     });
 }
 
 console.log('');
-
-const task = process.argv[2];
-args = process.argv.slice(3, process.argv.length);
-
+const args = process.argv.slice(3);
 console.log(`Performing '${task}' on workspaces`);
-
-if (args.length > 0) {
-    console.log(`  Using args : ${args}`);
-}
-
+if (args.length > 0) console.log(`  Using args : ${args}`);
 console.log('');
 
-const workspaceNames = Object.keys(workspaces);
-
-function updateDependencyVersionsFromLocalWorkspaces(file, packageJson, version) {
-    const dependencyFields = Object.keys(packageJson).filter(
-        (_) => _.endsWith('dependencies') || _.endsWith('Dependencies'),
-    );
-    for (let field of dependencyFields) {
-        const dependencies = packageJson[field] ?? {};
-        const fileDependencies = file.get(field);
-
-        for (let dependencyName of Object.keys(dependencies)) {
-            if (workspaceNames.includes(dependencyName)) {
-                console.log(
-                    `Updating workspace ${field} '${dependencyName}' to version ${version}`,
-                );
-                fileDependencies[dependencyName] = version;
-            }
-        }
-
-        file.set(field, fileDependencies);
-    }
-}
-
-const publishFailures = [];
-
 for (const workspaceName in workspaces) {
     const workspaceRelativeLocation = workspaces[workspaceName];
     const workspaceAbsoluteLocation = path.join(process.cwd(), workspaceRelativeLocation);
     const packageJsonFile = path.join(workspaceAbsoluteLocation, 'package.json');
+    if (!fs.existsSync(packageJsonFile)) continue;
 
-    if (fs.existsSync(packageJsonFile)) {
-        const file = editJsonFile(packageJsonFile, { stringify_width: 4 });
-        const packageJson = file.toObject();
-        if (packageJson.private === true) {
-            console.log(
-                `Workspace private '${workspaceName}' at '${workspaceRelativeLocation}'`,
-            );
-            continue;
-        }
-
-        if (task === 'publish-version' && packageJson.cratisIndependentVersion === true) {
-            console.log(`Skipping independently versioned workspace '${workspaceName}'`);
-            continue;
-        }
-
-        if (task === 'publish-version') {
-            if (args.length === 1) {
-                const version = args[0];
-                file.set('version', version);
-                updateDependencyVersionsFromLocalWorkspaces(file, packageJson, version);
-                file.save();
-
-                const targetReadMe = path.join(workspaceAbsoluteLocation, 'README.md');
-
-                if (!fs.existsSync(targetReadMe)) {
-                    fs.copyFileSync(path.join(process.cwd(), 'README.md'), targetReadMe);
-                }
-
-                console.log(
-                    `Publishing workspace '${workspaceName}' at '${workspaceRelativeLocation}'`,
-                );
-                const result = spawn('npm', ['publish', '--provenance'], {
-                    cwd: workspaceAbsoluteLocation,
-                });
-                console.log(result.stdout.toString());
-                console.log(result.stderr.toString());
-                if (result.status !== 0) {
-                    // Don't abort the release: a single workspace failing (e.g. a brand-new
-                    // package whose npm trusted publisher isn't configured yet) must not
-                    // strand the other packages. Collect and fail at the end instead.
-                    console.log(
-                        `Error publishing workspace '${workspaceName}' - continuing with remaining workspaces`,
-                    );
-                    publishFailures.push(workspaceName);
-                }
-            }
-        } else {
-            if (!packageJson.scripts || !packageJson.scripts.hasOwnProperty(task)) {
-                console.log(
-                    `Skipping workspace '${workspaceName}' - no script with name '${task}'`,
-                );
-                continue;
-            }
-
-            console.log(`Workspace '${workspaceName}' at '${workspaceRelativeLocation}'`);
-
-            const result = spawn('yarn', [task], { cwd: workspaceAbsoluteLocation });
-            console.log(result.stdout.toString());
-            if (result.status !== 0) {
-                console.log(
-                    `Error running task '${task}' on workspace '${workspaceName}'`,
-                );
-                console.log(result.stderr.toString());
-                process.exit(1);
-                return;
-            }
-        }
+    const packageJson = readJson(packageJsonFile);
+    if (packageJson.private === true) {
+        console.log(
+            `Workspace private '${workspaceName}' at '${workspaceRelativeLocation}'`,
+        );
+        continue;
+    }
+    if (!packageJson.scripts || !Object.hasOwn(packageJson.scripts, task)) {
+        console.log(
+            `Skipping workspace '${workspaceName}' - no script with name '${task}'`,
+        );
+        continue;
     }
-}
 
-if (publishFailures.length > 0) {
-    console.log(
-        `\n${publishFailures.length} workspace(s) failed to publish: ${publishFailures.join(', ')}`,
-    );
-    process.exit(1);
+    console.log(`Workspace '${workspaceName}' at '${workspaceRelativeLocation}'`);
+    const result = spawn('yarn', [task], {
+        cwd: workspaceAbsoluteLocation,
+        encoding: 'utf8',
+    });
+    console.log(result.stdout ?? '');
+    if (result.status !== 0) {
+        console.log(`Error running task '${task}' on workspace '${workspaceName}'`);
+        console.log(result.stderr ?? '');
+        process.exit(1);
+    }
 }
diff --git a/scripts/generate-compat-manifest.mjs b/scripts/generate-compat-manifest.mjs
index 4f158c05..db7ebf30 100644
--- a/scripts/generate-compat-manifest.mjs
+++ b/scripts/generate-compat-manifest.mjs
@@ -4,158 +4,338 @@
 import fs from 'node:fs';
 import path from 'node:path';
 import process from 'node:process';
-import { fileURLToPath } from 'node:url';
+import { fileURLToPath, pathToFileURL } from 'node:url';
+import semver from 'semver';
+import { createFixture, validateMatrix } from './lib/renderer-adapter-matrix.mjs';
 
 const repositoryDirectory = path.resolve(
     path.dirname(fileURLToPath(import.meta.url)),
     '..',
 );
-const outputPath = path.join(repositoryDirectory, 'compat-manifest.json');
-const expectedPackages = new Map([
-    ['@cratis/components', 'core'],
-    ['@cratis/eslint-plugin-components', 'eslint'],
-    ['@cratis/components-codemods', 'codemods'],
-    ['@cratis/components.conformance', 'conformance'],
-    ['@cratis/components.mui', 'renderer-adapter'],
-    ['@cratis/components.primereact', 'renderer-adapter'],
-    ['@cratis/components.primereact10', 'renderer-adapter'],
+const outputPaths = [
+    'compat-manifest.json',
+    'Source/compat-manifest.json',
+    'Codemods/compat-manifest.json',
+];
+const packagePolicies = new Map([
+    ['@cratis/components', { role: 'core', range: '>=4 <5' }],
+    ['@cratis/eslint-plugin-components', { role: 'eslint', range: '>=4 <5' }],
+    ['@cratis/components-codemods', { role: 'codemods', range: '>=4 <5' }],
+    ['@cratis/components.conformance', { role: 'conformance', range: '>=1 <2' }],
+    ['@cratis/components.mui', { role: 'renderer-adapter', range: '>=1 <2' }],
+    ['@cratis/components.primereact', { role: 'renderer-adapter', range: '>=1 <2' }],
+    ['@cratis/components.primereact10', { role: 'renderer-adapter', range: '>=1 <2' }],
 ]);
-const packageOrder = [...expectedPackages.keys()];
-const expectedVersions = new Map([
-    ['@cratis/components', '4.0.0'],
-    ['@cratis/eslint-plugin-components', '4.0.0'],
-    ['@cratis/components-codemods', '4.0.0'],
-    ['@cratis/components.conformance', '1.0.0'],
-    ['@cratis/components.mui', '1.0.0'],
-    ['@cratis/components.primereact', '1.0.0'],
-    ['@cratis/components.primereact10', '1.0.0'],
+const packageOrder = [...packagePolicies.keys()];
+const privateEvidence = [
+    {
+        id: 'plain',
+        sourcePath: 'Conformance/for_plain_dom_renderer',
+        name: 'Plain DOM renderer conformance falsification fixture',
+        purpose: 'private-conformance-evidence',
+    },
+    {
+        id: 'storybook',
+        sourcePath: 'Storybook',
+        name: 'Composed renderer Storybook',
+        purpose: 'private-renderer-evidence',
+    },
+];
+const adapterKeysByPackage = new Map([
+    ['@cratis/components.mui', 'mui'],
+    ['@cratis/components.primereact', 'primereact11'],
+    ['@cratis/components.primereact10', 'primereact10'],
 ]);
-const rendererAbi = 1;
-const coreTarget = '4.x';
 
-const mode = process.argv[2] ?? '--check';
-if (!['--check', '--write'].includes(mode)) {
-    throw new Error('Usage: node scripts/generate-compat-manifest.mjs [--check|--write]');
-}
+export function createCompatibilityManifest(rootDirectory = repositoryDirectory) {
+    const rootPackage = readJson(path.join(rootDirectory, 'package.json'), rootDirectory);
+    const workspaceManifestPaths = discoverWorkspaceManifestPaths(
+        rootPackage.workspaces,
+        rootDirectory,
+    );
+    const workspaceManifests = workspaceManifestPaths.map((manifestPath) => ({
+        manifestPath,
+        packageJson: readJson(path.join(rootDirectory, manifestPath), rootDirectory),
+    }));
+    const publicPackages = workspaceManifests
+        .filter(({ packageJson }) => packageJson.private !== true)
+        .map(({ packageJson }) => packageEntry(packageJson));
+    validatePackageSet(publicPackages);
+    publicPackages.sort(
+        (left, right) =>
+            packageOrder.indexOf(left.name) - packageOrder.indexOf(right.name),
+    );
 
-const rootPackage = readJson(path.join(repositoryDirectory, 'package.json'));
-const workspaceManifestPaths = discoverWorkspaceManifestPaths(rootPackage.workspaces);
-const packages = workspaceManifestPaths
-    .map((manifestPath) => packageEntry(manifestPath))
-    .filter((entry) => entry !== undefined);
-validatePackageSet(packages);
+    const matrix = readJson(
+        path.join(rootDirectory, 'scripts/renderer-adapter-matrix.json'),
+        rootDirectory,
+    );
+    const manifestsByName = Object.fromEntries(
+        workspaceManifests.map(({ packageJson }) => [packageJson.name, packageJson]),
+    );
+    validateMatrix(matrix, manifestsByName);
 
-packages.sort(
-    (left, right) => packageOrder.indexOf(left.name) - packageOrder.indexOf(right.name),
-);
+    for (const entry of publicPackages) {
+        const adapterKey = adapterKeysByPackage.get(entry.name);
+        if (!adapterKey) continue;
+        entry.verifiedPeers = {
+            minimum: sortObject(createFixture(matrix, adapterKey, 'minimum').peers),
+            current: sortObject(createFixture(matrix, adapterKey, 'current').peers),
+        };
+    }
 
-const manifest = {
-    schemaVersion: 1,
-    publicationEnabled: false,
-    rendererAbi,
-    coreTarget,
-    sourcePackageManifests: packages.map((entry) => entry.manifest),
-    packages,
-    privateArtifacts: [
-        {
-            id: 'plain',
-            path: 'Conformance/for_plain_dom_renderer',
-            purpose: 'Private plain-DOM conformance falsification fixture',
-            private: true,
-            published: false,
+    const manifest = {
+        schemaVersion: 2,
+        releaseStatus: 'source-candidate',
+        publicationEnabled: false,
+        gaScope: {
+            publicPackages: [...packageOrder],
+            privateEvidence: privateEvidence.map(({ id, name, purpose }) => ({
+                id,
+                name,
+                purpose,
+                private: true,
+                published: false,
+            })),
+        },
+        toolingCompatibility: {
+            componentsCore: '>=4 <5',
+            eslint: '>=4 <5',
+            codemods: '>=4 <5',
         },
-        {
-            id: 'storybook',
-            path: 'Storybook',
-            purpose: 'Private composed renderer evidence',
-            private: true,
-            published: false,
-            releaseBlocker: false,
+        supportWindows: {
+            components3: {
+                components: '>=3 <4',
+                status: 'maintenance-security-critical',
+                migrationRole: 'source',
+                migrationTarget: '>=4 <5',
+                tooling: '>=4 <5',
+                eolAt: null,
+                eolApprovedByOwners: false,
+                ownerDecisionPolicy:
+                    'Set and approve EOL no later than 12 months after Components 4 GA.',
+            },
+            components4: {
+                components: '>=4 <5',
+                status: 'current-candidate',
+                migrationRole: 'target',
+                rendererAbi: 1,
+                coreProfile: 'core/v1',
+                adapterProfile: 'stable-presentation/v1',
+                tooling: {
+                    eslint: '>=4 <5',
+                    codemods: '>=4 <5',
+                },
+                adapters: {
+                    '@cratis/components.conformance': '>=1 <2',
+                    '@cratis/components.mui': '>=1 <2',
+                    '@cratis/components.primereact': '>=1 <2',
+                    '@cratis/components.primereact10': '>=1 <2',
+                },
+            },
         },
-    ],
-};
+        packages: publicPackages,
+    };
 
-validateManifest(manifest);
-const serialized = `${JSON.stringify(manifest, null, 4)}\n`;
+    validateCompatibilityManifest(manifest, { rootDirectory, matrix });
+    return manifest;
+}
 
-if (mode === '--write') {
-    fs.writeFileSync(outputPath, serialized);
-    console.log(
-        `Wrote ${path.relative(repositoryDirectory, outputPath)} from ${packages.length} workspace package manifests.`,
-    );
-} else {
-    if (!fs.existsSync(outputPath)) {
-        fail('compat-manifest.json is missing. Run yarn generate-compat-manifest.');
+export function validateCompatibilityManifest(
+    manifest,
+    { rootDirectory = repositoryDirectory, matrix } = {},
+) {
+    if (manifest.schemaVersion !== 2) fail('Unsupported compatibility manifest schema.');
+    if (typeof manifest.publicationEnabled !== 'boolean') {
+        fail('publicationEnabled must be a boolean.');
     }
-    const current = fs.readFileSync(outputPath, 'utf8');
-    if (current !== serialized) {
+    if (manifest.releaseStatus !== 'source-candidate' && !manifest.publicationEnabled) {
         fail(
-            'compat-manifest.json is stale. Run yarn generate-compat-manifest and review the package metadata change.',
+            "A non-publishing source manifest must have releaseStatus 'source-candidate'.",
         );
     }
-    console.log(
-        `Verified compat-manifest.json against ${packages.length} workspace package manifests.`,
+
+    const scopedPackages = manifest.gaScope?.publicPackages ?? [];
+    if (JSON.stringify(scopedPackages) !== JSON.stringify(packageOrder)) {
+        fail(
+            'gaScope.publicPackages must list the exact seven public packages in release order.',
+        );
+    }
+    if ((manifest.packages ?? []).length !== packageOrder.length) {
+        fail(`Expected ${packageOrder.length} public package entries.`);
+    }
+
+    for (const entry of manifest.packages ?? []) {
+        const policy = packagePolicies.get(entry.name);
+        if (!policy) fail(`Unexpected public package '${entry.name}'.`);
+        if (entry.role !== policy.role || entry.releaseMajorRange !== policy.range) {
+            fail(`${entry.name} has invalid role or release-major policy metadata.`);
+        }
+        if (semver.valid(entry.version) !== entry.version) {
+            fail(`${entry.name} must declare a valid exact current version.`);
+        }
+        if (!semver.satisfies(entry.version, policy.range)) {
+            fail(
+                `${entry.name}@${entry.version} is outside supported release range '${policy.range}'.`,
+            );
+        }
+        if (entry.private || entry.packageAccess !== 'public') {
+            fail(`${entry.name} must remain explicitly public-intent.`);
+        }
+        const expectedIndependent = entry.name !== '@cratis/components';
+        if (entry.independentRelease !== expectedIndependent) {
+            fail(
+                `${entry.name} must ${expectedIndependent ? '' : 'not '}declare cratisIndependentVersion: true.`,
+            );
+        }
+        for (const [upstreamName, upstreamRange] of Object.entries(
+            entry.upstream ?? {},
+        )) {
+            if (entry.peerDependencies?.[upstreamName] !== upstreamRange) {
+                fail(
+                    `${entry.name} upstream '${upstreamName}' must exactly match its peer range.`,
+                );
+            }
+        }
+    }
+
+    const tooling = manifest.toolingCompatibility ?? {};
+    if (
+        tooling.componentsCore !== '>=4 <5' ||
+        tooling.eslint !== '>=4 <5' ||
+        tooling.codemods !== '>=4 <5'
+    ) {
+        fail('Core 4 tooling compatibility must remain bounded to >=4 <5.');
+    }
+
+    const components3 = manifest.supportWindows?.components3;
+    const components4 = manifest.supportWindows?.components4;
+    if (
+        components3?.components !== '>=3 <4' ||
+        components3?.status !== 'maintenance-security-critical' ||
+        components3?.migrationTarget !== '>=4 <5' ||
+        components3?.tooling !== '>=4 <5' ||
+        !components3.ownerDecisionPolicy?.includes('12 months after Components 4 GA')
+    ) {
+        fail('The Components 3 maintenance and migration support window is incomplete.');
+    }
+    if (
+        components4?.components !== '>=4 <5' ||
+        components4?.status !== 'current-candidate' ||
+        components4?.rendererAbi !== 1 ||
+        components4?.coreProfile !== 'core/v1' ||
+        components4?.adapterProfile !== 'stable-presentation/v1' ||
+        components4?.tooling?.eslint !== '>=4 <5' ||
+        components4?.tooling?.codemods !== '>=4 <5'
+    ) {
+        fail('The Components 4 candidate compatibility window is incomplete.');
+    }
+    const expectedAdapterRanges = Object.fromEntries(
+        packageOrder
+            .filter((name) =>
+                ['conformance', 'renderer-adapter'].includes(
+                    packagePolicies.get(name).role,
+                ),
+            )
+            .map((name) => [name, packagePolicies.get(name).range]),
     );
-}
+    if (JSON.stringify(components4?.adapters) !== JSON.stringify(expectedAdapterRanges)) {
+        fail('Components 4 must list the exact Conformance and adapter release ranges.');
+    }
 
-function discoverWorkspaceManifestPaths(workspaces) {
-    if (!Array.isArray(workspaces))
-        fail('Root package.json must declare a workspaces array.');
+    const evidence = manifest.gaScope?.privateEvidence ?? [];
+    if (
+        JSON.stringify(evidence.map(({ id }) => id)) !==
+        JSON.stringify(['plain', 'storybook'])
+    ) {
+        fail('gaScope.privateEvidence must list Plain and Storybook evidence.');
+    }
+    for (const item of evidence) {
+        if (!item.private || item.published)
+            fail(`Private evidence '${item.id}' cannot be published.`);
+        const source = privateEvidence.find(({ id }) => id === item.id);
+        if (
+            rootDirectory &&
+            source &&
+            !fs.existsSync(path.join(rootDirectory, source.sourcePath))
+        ) {
+            fail(`Private evidence '${item.id}' is missing from the source repository.`);
+        }
+    }
 
-    const manifestPaths = [];
-    for (const workspace of workspaces) {
-        if (workspace.endsWith('/*')) {
-            const parent = path.join(repositoryDirectory, workspace.slice(0, -2));
-            for (const entry of fs.readdirSync(parent, { withFileTypes: true })) {
-                if (!entry.isDirectory()) continue;
-                const relativeManifest = path.posix.join(
-                    workspace.slice(0, -2),
-                    entry.name,
-                    'package.json',
+    const activeMatrix =
+        matrix ??
+        (rootDirectory
+            ? readJson(
+                  path.join(rootDirectory, 'scripts/renderer-adapter-matrix.json'),
+                  rootDirectory,
+              )
+            : undefined);
+    if (activeMatrix) {
+        for (const entry of manifest.packages ?? []) {
+            const adapterKey = adapterKeysByPackage.get(entry.name);
+            if (!adapterKey) continue;
+            const expected = {
+                minimum: sortObject(
+                    createFixture(activeMatrix, adapterKey, 'minimum').peers,
+                ),
+                current: sortObject(
+                    createFixture(activeMatrix, adapterKey, 'current').peers,
+                ),
+            };
+            if (JSON.stringify(entry.verifiedPeers) !== JSON.stringify(expected)) {
+                fail(
+                    `${entry.name} verified peers must be copied from renderer-adapter-matrix.json.`,
                 );
-                if (fs.existsSync(path.join(repositoryDirectory, relativeManifest))) {
-                    manifestPaths.push(relativeManifest);
-                }
             }
-        } else {
-            manifestPaths.push(path.posix.join(workspace, 'package.json'));
         }
     }
-    return manifestPaths.sort();
-}
 
-function packageEntry(manifestPath) {
-    const packageJson = readJson(path.join(repositoryDirectory, manifestPath));
-    if (!expectedPackages.has(packageJson.name)) {
-        if (packageJson.private === true) return undefined;
-        fail(
-            `Workspace ${manifestPath} declares unexpected public package '${packageJson.name ?? '<unnamed>'}'.`,
-        );
+    if (manifest.publicationEnabled) {
+        if (manifest.releaseStatus !== 'publication-authorized') {
+            fail("Publication requires releaseStatus 'publication-authorized'.");
+        }
+        if (!isIsoDate(components3?.eolAt) || components3?.eolApprovedByOwners !== true) {
+            fail('Publication requires a valid owner-approved Components 3 eolAt date.');
+        }
     }
+}
 
+export function serializeCompatibilityManifest(manifest) {
+    return `${JSON.stringify(manifest, null, 4)}\n`;
+}
+
+function packageEntry(packageJson) {
+    const policy = packagePolicies.get(packageJson.name);
+    if (!policy)
+        fail(`Unexpected public workspace package '${packageJson.name ?? '<unnamed>'}'.`);
     const entry = {
         name: packageJson.name,
-        manifest: manifestPath,
-        role: expectedPackages.get(packageJson.name),
+        role: policy.role,
         version: packageJson.version,
+        releaseMajorRange: policy.range,
+        independentRelease: packageJson.cratisIndependentVersion === true,
         private: packageJson.private === true,
         packageAccess: packageJson.publishConfig?.access ?? null,
         peerDependencies: sortObject(packageJson.peerDependencies ?? {}),
         upstream: sortObject(packageJson.cratis?.upstream ?? {}),
     };
-
     const abi = packageJson.cratisUiAbi ?? parseAbiMajor(packageJson.cratis?.abi);
     if (abi !== undefined) entry.rendererAbi = abi;
+    if (packageJson.cratis?.profile) entry.rendererProfile = packageJson.cratis.profile;
     return entry;
 }
 
 function validatePackageSet(packages) {
-    const actualNames = packages.map((entry) => entry.name);
+    const actualNames = packages.map(({ name }) => name);
     const missing = packageOrder.filter((name) => !actualNames.includes(name));
+    const unexpected = actualNames.filter((name) => !packagePolicies.has(name));
     const duplicates = actualNames.filter(
         (name, index) => actualNames.indexOf(name) !== index,
     );
     if (missing.length > 0) fail(`Missing release packages: ${missing.join(', ')}.`);
+    if (unexpected.length > 0)
+        fail(`Unexpected release packages: ${unexpected.join(', ')}.`);
     if (duplicates.length > 0)
         fail(`Duplicate release packages: ${[...new Set(duplicates)].join(', ')}.`);
     if (actualNames.length !== packageOrder.length) {
@@ -165,83 +345,39 @@ function validatePackageSet(packages) {
     }
 }
 
-function validateManifest(manifest) {
-    if (manifest.rendererAbi !== 1 || manifest.coreTarget !== '4.x') {
-        fail(
-            'Compatibility metadata must target renderer ABI 1 and Components Core 4.x.',
-        );
-    }
-    if (manifest.publicationEnabled !== false) {
-        fail('Compatibility metadata must not enable publication.');
-    }
-
-    for (const entry of manifest.packages) {
-        if (entry.private || entry.packageAccess !== 'public') {
-            fail(
-                `${entry.name} must remain an explicitly public-intent package manifest.`,
-            );
-        }
-        if (entry.version !== expectedVersions.get(entry.name)) {
-            fail(
-                `${entry.name} must declare release version ${expectedVersions.get(entry.name)}; found ${entry.version}.`,
-            );
-        }
-        if (
-            entry.rendererAbi !== undefined &&
-            entry.rendererAbi !== manifest.rendererAbi
-        ) {
-            fail(
-                `${entry.name} declares renderer ABI ${entry.rendererAbi}; expected ${manifest.rendererAbi}.`,
-            );
-        }
-        for (const [upstreamName, upstreamRange] of Object.entries(entry.upstream)) {
-            if (entry.peerDependencies[upstreamName] !== upstreamRange) {
-                fail(
-                    `${entry.name} upstream '${upstreamName}' must exactly match its peer dependency range.`,
+function discoverWorkspaceManifestPaths(workspaces, rootDirectory) {
+    if (!Array.isArray(workspaces))
+        fail('Root package.json must declare a workspaces array.');
+    const manifestPaths = [];
+    for (const workspace of workspaces) {
+        if (workspace.endsWith('/*')) {
+            const parent = path.join(rootDirectory, workspace.slice(0, -2));
+            for (const entry of fs.readdirSync(parent, { withFileTypes: true })) {
+                if (!entry.isDirectory()) continue;
+                const relativeManifest = path.posix.join(
+                    workspace.slice(0, -2),
+                    entry.name,
+                    'package.json',
                 );
+                if (fs.existsSync(path.join(rootDirectory, relativeManifest))) {
+                    manifestPaths.push(relativeManifest);
+                }
             }
+        } else {
+            manifestPaths.push(path.posix.join(workspace, 'package.json'));
         }
     }
+    return manifestPaths.sort();
+}
 
-    const coreBoundPackages = manifest.packages.filter(
-        (entry) =>
-            entry.role === 'renderer-adapter' || entry.role === 'conformance',
-    );
-    for (const entry of coreBoundPackages) {
-        if (entry.peerDependencies['@cratis/components'] !== '>=4 <5') {
-            fail(`${entry.name} must declare the final @cratis/components >=4 <5 peer range.`);
-        }
-    }
-
-    const primeReact10 = manifest.packages.find(
-        (entry) => entry.name === '@cratis/components.primereact10',
-    );
-    if (
-        primeReact10.peerDependencies.primereact !== '>=10.9.9 <11' ||
-        primeReact10.upstream.primereact !== '>=10.9.9 <11'
-    ) {
-        fail(
-            'PrimeReact 10 must remain bounded to >=10.9.9 <11 in peers and upstream metadata.',
-        );
-    }
-
-    for (const artifact of manifest.privateArtifacts) {
-        if (!artifact.private || artifact.published) {
-            fail(
-                `Private artifact '${artifact.id}' must be explicitly private and non-published.`,
-            );
-        }
-        if (!fs.existsSync(path.join(repositoryDirectory, artifact.path))) {
-            fail(
-                `Private artifact '${artifact.id}' path '${artifact.path}' does not exist.`,
-            );
-        }
-    }
+function isIsoDate(value) {
+    if (typeof value !== 'string' || !/^\d{4}-\d{2}-\d{2}$/u.test(value)) return false;
+    return new Date(`${value}T00:00:00.000Z`).toISOString().startsWith(value);
 }
 
 function parseAbiMajor(value) {
     if (value === undefined) return undefined;
-    const match = String(value).match(/\d+/);
+    const match = String(value).match(/\d+/u);
     return match ? Number(match[0]) : undefined;
 }
 
@@ -251,17 +387,58 @@ function sortObject(value) {
     );
 }
 
-function readJson(filePath) {
+function readJson(filePath, rootDirectory) {
     try {
         return JSON.parse(fs.readFileSync(filePath, 'utf8'));
     } catch (error) {
         fail(
-            `Could not parse ${path.relative(repositoryDirectory, filePath)}: ${error instanceof Error ? error.message : String(error)}.`,
+            `Could not parse ${path.relative(rootDirectory, filePath)}: ${error instanceof Error ? error.message : String(error)}.`,
         );
     }
 }
 
 function fail(message) {
-    console.error(message);
-    process.exit(1);
+    throw new Error(message);
+}
+
+async function main() {
+    const mode = process.argv[2] ?? '--check';
+    if (!['--check', '--write'].includes(mode)) {
+        throw new Error(
+            'Usage: node scripts/generate-compat-manifest.mjs [--check|--write]',
+        );
+    }
+    const serialized = serializeCompatibilityManifest(createCompatibilityManifest());
+    if (mode === '--write') {
+        for (const relativePath of outputPaths) {
+            fs.writeFileSync(path.join(repositoryDirectory, relativePath), serialized);
+        }
+        console.log(
+            `Wrote ${outputPaths.join(', ')} from the seven public workspace manifests.`,
+        );
+        return;
+    }
+    for (const relativePath of outputPaths) {
+        const outputPath = path.join(repositoryDirectory, relativePath);
+        if (!fs.existsSync(outputPath)) {
+            throw new Error(
+                `${relativePath} is missing. Run yarn generate-compat-manifest.`,
+            );
+        }
+        if (fs.readFileSync(outputPath, 'utf8') !== serialized) {
+            throw new Error(
+                `${relativePath} is stale. Run yarn generate-compat-manifest and review it.`,
+            );
+        }
+    }
+    console.log(
+        `Verified deterministic compatibility metadata in ${outputPaths.join(', ')}.`,
+    );
+}
+
+if (import.meta.url === pathToFileURL(process.argv[1] ?? '').href) {
+    main().catch((error) => {
+        console.error(error instanceof Error ? error.message : String(error));
+        process.exit(1);
+    });
 }
diff --git a/scripts/generate-compat-manifest.test.mjs b/scripts/generate-compat-manifest.test.mjs
new file mode 100644
index 00000000..d3fff952
--- /dev/null
+++ b/scripts/generate-compat-manifest.test.mjs
@@ -0,0 +1,92 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import assert from 'node:assert/strict';
+import { readFileSync } from 'node:fs';
+import path from 'node:path';
+import { test } from 'node:test';
+import { fileURLToPath } from 'node:url';
+import {
+    createCompatibilityManifest,
+    serializeCompatibilityManifest,
+    validateCompatibilityManifest,
+} from './generate-compat-manifest.mjs';
+
+const repositoryDirectory = path.resolve(
+    path.dirname(fileURLToPath(import.meta.url)),
+    '..',
+);
+
+const createManifest = () => createCompatibilityManifest(repositoryDirectory);
+
+test('generated compatibility copies are deterministic and byte-identical', () => {
+    const serialized = serializeCompatibilityManifest(createManifest());
+    for (const relativePath of [
+        'compat-manifest.json',
+        'Source/compat-manifest.json',
+        'Codemods/compat-manifest.json',
+    ]) {
+        assert.equal(
+            readFileSync(path.join(repositoryDirectory, relativePath), 'utf8'),
+            serialized,
+        );
+    }
+});
+
+test('package versions are range-validated instead of snapshot-pinned', () => {
+    const manifest = createManifest();
+    const core = manifest.packages.find(({ name }) => name === '@cratis/components');
+    core.version = '4.99.0';
+    assert.doesNotThrow(() =>
+        validateCompatibilityManifest(manifest, { rootDirectory: repositoryDirectory }),
+    );
+
+    core.version = '5.0.0';
+    assert.throws(
+        () =>
+            validateCompatibilityManifest(manifest, {
+                rootDirectory: repositoryDirectory,
+            }),
+        /outside supported release range/,
+    );
+});
+
+test('publication remains closed until status and Components 3 EOL are owner-approved', () => {
+    const manifest = createManifest();
+    manifest.publicationEnabled = true;
+    assert.throws(
+        () =>
+            validateCompatibilityManifest(manifest, {
+                rootDirectory: repositoryDirectory,
+            }),
+        /publication-authorized/,
+    );
+
+    manifest.releaseStatus = 'publication-authorized';
+    assert.throws(
+        () =>
+            validateCompatibilityManifest(manifest, {
+                rootDirectory: repositoryDirectory,
+            }),
+        /owner-approved Components 3 eolAt/,
+    );
+
+    manifest.supportWindows.components3.eolAt = '2028-01-31';
+    manifest.supportWindows.components3.eolApprovedByOwners = true;
+    assert.doesNotThrow(() =>
+        validateCompatibilityManifest(manifest, { rootDirectory: repositoryDirectory }),
+    );
+});
+
+test('adapter proof cannot drift from the renderer matrix', () => {
+    const manifest = createManifest();
+    const mui = manifest.packages.find(({ name }) => name === '@cratis/components.mui');
+    mui.verifiedPeers.minimum['@emotion/react'] = '11.6.0';
+    assert.throws(
+        () =>
+            validateCompatibilityManifest(manifest, {
+                rootDirectory: repositoryDirectory,
+            }),
+        /verified peers must be copied/,
+    );
+});
diff --git a/scripts/verify-release-safety.mjs b/scripts/verify-release-safety.mjs
new file mode 100644
index 00000000..3e21ff8a
--- /dev/null
+++ b/scripts/verify-release-safety.mjs
@@ -0,0 +1,174 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import fs from 'node:fs';
+import path from 'node:path';
+import process from 'node:process';
+import { fileURLToPath, pathToFileURL } from 'node:url';
+
+const repositoryDirectory = path.resolve(
+    path.dirname(fileURLToPath(import.meta.url)),
+    '..',
+);
+
+export function verifyReleaseSafety(rootDirectory = repositoryDirectory) {
+    const rootPackage = readJson(path.join(rootDirectory, 'package.json'));
+    const publishScripts = Object.entries(rootPackage.scripts ?? {}).filter(
+        ([name, command]) =>
+            /publish/iu.test(name) || /(?:npm|yarn)\s+publish/iu.test(command),
+    );
+    if (publishScripts.length > 0) {
+        throw new Error(
+            `Root package.json must not expose publishing commands: ${publishScripts.map(([name]) => name).join(', ')}.`,
+        );
+    }
+    if (rootPackage.devDependencies?.['edit-json-file']) {
+        throw new Error(
+            "Root package.json must not depend on obsolete 'edit-json-file'.",
+        );
+    }
+
+    const workspaceRunner = fs.readFileSync(
+        path.join(rootDirectory, 'run-task-on-workspaces.js'),
+        'utf8',
+    );
+    const rejectionIndex = workspaceRunner.indexOf("task === 'publish-version'");
+    const discoveryIndex = workspaceRunner.indexOf('rootPackageJson.workspaces');
+    if (rejectionIndex < 0 || discoveryIndex < 0 || rejectionIndex > discoveryIndex) {
+        throw new Error(
+            "run-task-on-workspaces.js must reject 'publish-version' before workspace discovery.",
+        );
+    }
+    if (/edit-json-file|npm['"`]\s*,\s*\[['"`]publish/iu.test(workspaceRunner)) {
+        throw new Error(
+            'The workspace runner still contains manifest mutation or npm publishing logic.',
+        );
+    }
+
+    const executableFiles = collectExecutableFiles(rootDirectory).filter(
+        (file) =>
+            !file.endsWith('verify-release-safety.mjs') &&
+            !file.endsWith('verify-release-safety.test.mjs'),
+    );
+    const directPublish = new RegExp(`\\b${'npm'}\\s+${'publish'}\\b`, 'iu');
+    const spawnedPublish = new RegExp(
+        `${'spawn'}(?:Sync)?\\s*\\([^)]*['\"]${'npm'}['\"][^)]*['\"]${'publish'}['\"]`,
+        'isu',
+    );
+    for (const file of executableFiles) {
+        const source = fs.readFileSync(file, 'utf8');
+        if (directPublish.test(source) || spawnedPublish.test(source)) {
+            throw new Error(
+                `Executable publishing helper path found in ${path.relative(rootDirectory, file)}.`,
+            );
+        }
+    }
+
+    const workflow = fs.readFileSync(
+        path.join(rootDirectory, '.github/workflows/publish.yml'),
+        'utf8',
+    );
+    const activeWorkflow = workflow
+        .split('\n')
+        .filter((line) => !line.trimStart().startsWith('#'))
+        .join('\n');
+    const triggerBlock = activeWorkflow.match(/^on:\s*\n([\s\S]*?)^permissions:/mu)?.[1];
+    if (!triggerBlock || !/^\s+workflow_dispatch:\s*\{\}\s*$/mu.test(triggerBlock)) {
+        throw new Error('publish.yml must retain a workflow_dispatch-only trigger.');
+    }
+    if (/^\s+(?:push|pull_request|schedule|workflow_run|release):/mu.test(triggerBlock)) {
+        throw new Error('publish.yml must not contain an automatic trigger.');
+    }
+    const emptyPermissionBlocks =
+        activeWorkflow.match(/^\s*permissions:\s*\{\}\s*$/gmu) ?? [];
+    if (emptyPermissionBlocks.length < 2) {
+        throw new Error(
+            'publish.yml must retain empty top-level and job-level permissions.',
+        );
+    }
+    if (
+        /^\s+(?:id-token|contents|packages|deployments):\s*write\s*$/imu.test(
+            activeWorkflow,
+        ) ||
+        /\$\{\{\s*secrets\./iu.test(activeWorkflow)
+    ) {
+        throw new Error('publish.yml must not request write permissions or credentials.');
+    }
+    if (!/^\s+exit 1\s*$/mu.test(activeWorkflow)) {
+        throw new Error('publish.yml must remain a failing no-op.');
+    }
+    if (/^\s+uses:/mu.test(activeWorkflow)) {
+        throw new Error(
+            'publish.yml must not call actions while publication is blocked.',
+        );
+    }
+
+    const compatibilityManifest = readJson(
+        path.join(rootDirectory, 'compat-manifest.json'),
+    );
+    if (compatibilityManifest.publicationEnabled !== false) {
+        throw new Error('compat-manifest.json must keep publicationEnabled false.');
+    }
+    if (compatibilityManifest.releaseStatus !== 'source-candidate') {
+        throw new Error("compat-manifest.json must remain a 'source-candidate'.");
+    }
+
+    if (
+        fs.existsSync(
+            path.join(
+                rootDirectory,
+                '.github/workflows/auto-approve-publish-deployments.yml',
+            ),
+        )
+    ) {
+        throw new Error('The dormant auto-approval workflow must not exist.');
+    }
+}
+
+function collectExecutableFiles(rootDirectory) {
+    const files = [];
+    const ignored = new Set([
+        '.agents',
+        '.ai',
+        '.ai-work',
+        '.claude',
+        '.git',
+        '.github',
+        '.yarn',
+        'dist',
+        'node_modules',
+    ]);
+    const visit = (directory) => {
+        for (const entry of fs.readdirSync(directory, { withFileTypes: true })) {
+            if (ignored.has(entry.name)) continue;
+            const entryPath = path.join(directory, entry.name);
+            if (entry.isDirectory()) visit(entryPath);
+            else if (/\.(?:js|mjs|cjs)$/u.test(entry.name)) files.push(entryPath);
+        }
+    };
+    visit(rootDirectory);
+    return files;
+}
+
+function readJson(filePath) {
+    try {
+        return JSON.parse(fs.readFileSync(filePath, 'utf8'));
+    } catch (error) {
+        throw new Error(
+            `Could not read ${filePath}: ${error instanceof Error ? error.message : String(error)}.`,
+            { cause: error },
+        );
+    }
+}
+
+if (import.meta.url === pathToFileURL(process.argv[1] ?? '').href) {
+    try {
+        verifyReleaseSafety();
+        console.log(
+            'Verified fail-closed release safety and disabled publication surfaces.',
+        );
+    } catch (error) {
+        console.error(error instanceof Error ? error.message : String(error));
+        process.exit(1);
+    }
+}
diff --git a/scripts/verify-release-safety.test.mjs b/scripts/verify-release-safety.test.mjs
new file mode 100644
index 00000000..1f41fedf
--- /dev/null
+++ b/scripts/verify-release-safety.test.mjs
@@ -0,0 +1,89 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import assert from 'node:assert/strict';
+import { spawnSync } from 'node:child_process';
+import { mkdirSync, mkdtempSync, readFileSync, rmSync, writeFileSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import path from 'node:path';
+import { test } from 'node:test';
+import { fileURLToPath } from 'node:url';
+import { verifyReleaseSafety } from './verify-release-safety.mjs';
+
+const repositoryDirectory = path.resolve(
+    path.dirname(fileURLToPath(import.meta.url)),
+    '..',
+);
+
+const createFixture = () => {
+    const fixture = mkdtempSync(path.join(tmpdir(), 'cratis-release-safety-'));
+    mkdirSync(path.join(fixture, '.github/workflows'), { recursive: true });
+    for (const relativePath of [
+        'package.json',
+        'run-task-on-workspaces.js',
+        'compat-manifest.json',
+        '.github/workflows/publish.yml',
+    ]) {
+        writeFileSync(
+            path.join(fixture, relativePath),
+            readFileSync(path.join(repositoryDirectory, relativePath)),
+        );
+    }
+    return fixture;
+};
+
+const withFixture = (action) => {
+    const fixture = createFixture();
+    try {
+        action(fixture);
+    } finally {
+        rmSync(fixture, { recursive: true, force: true });
+    }
+};
+
+test('the checked-in release surfaces are fail closed', () => {
+    assert.doesNotThrow(() => verifyReleaseSafety(repositoryDirectory));
+});
+
+test('the obsolete publish-version task fails before workspace discovery', () => {
+    const result = spawnSync(
+        process.execPath,
+        ['run-task-on-workspaces.js', 'publish-version', '9.9.9'],
+        { cwd: repositoryDirectory, encoding: 'utf8' },
+    );
+    assert.equal(result.status, 1);
+    assert.match(result.stderr, /obsolete 'publish-version' workspace task is disabled/);
+    assert.doesNotMatch(result.stdout, /Getting packages/);
+});
+
+test('the guard detects a reintroduced root publishing command', () => {
+    withFixture((fixture) => {
+        const packagePath = path.join(fixture, 'package.json');
+        const packageJson = JSON.parse(readFileSync(packagePath, 'utf8'));
+        packageJson.scripts.publish = 'npm publish';
+        writeFileSync(packagePath, JSON.stringify(packageJson));
+        assert.throws(() => verifyReleaseSafety(fixture), /publishing commands/);
+    });
+});
+
+test('the guard detects an automatic publish trigger', () => {
+    withFixture((fixture) => {
+        const workflowPath = path.join(fixture, '.github/workflows/publish.yml');
+        const workflow = readFileSync(workflowPath, 'utf8').replace(
+            '    workflow_dispatch: {}',
+            '    workflow_dispatch: {}\n    push: {}',
+        );
+        writeFileSync(workflowPath, workflow);
+        assert.throws(() => verifyReleaseSafety(fixture), /automatic trigger/);
+    });
+});
+
+test('the guard detects compatibility publication authorization drift', () => {
+    withFixture((fixture) => {
+        const manifestPath = path.join(fixture, 'compat-manifest.json');
+        const manifest = JSON.parse(readFileSync(manifestPath, 'utf8'));
+        manifest.publicationEnabled = true;
+        writeFileSync(manifestPath, JSON.stringify(manifest));
+        assert.throws(() => verifyReleaseSafety(fixture), /publicationEnabled false/);
+    });
+});
diff --git a/yarn.lock b/yarn.lock
index cb5e8e80..82ec7084 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -290,6 +290,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@cratis/components-codemods@workspace:Codemods"
   dependencies:
+    semver: "npm:7.8.5"
     typescript: "npm:^6.0.3"
   bin:
     cratis-components-button-variant-tone: ./scripts/button-variant-tone.js
@@ -1838,7 +1839,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@primeuix/motion@npm:^1.0.0":
+"@primeuix/motion@npm:1.0.0, @primeuix/motion@npm:^1.0.0":
   version: 1.0.0
   resolution: "@primeuix/motion@npm:1.0.0"
   dependencies:
@@ -4376,19 +4377,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"edit-json-file@npm:^1.8.1":
-  version: 1.8.1
-  resolution: "edit-json-file@npm:1.8.1"
-  dependencies:
-    find-value: "npm:^1.0.12"
-    iterate-object: "npm:^1.3.4"
-    r-json: "npm:^1.2.10"
-    set-value: "npm:^4.1.0"
-    w-json: "npm:^1.3.10"
-  checksum: 10/1b1db67f488e719429e3a80de6a0d674f936b5dcbd7d354c6ecba3cdb70b06e13efcc556dbb7c43dde02b0ef7bf85850fa947b86334e62251db96826959af098
-  languageName: node
-  linkType: hard
-
 "electron-to-chromium@npm:^1.5.402":
   version: 1.5.415
   resolution: "electron-to-chromium@npm:1.5.415"
@@ -5119,13 +5107,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"find-value@npm:^1.0.12":
-  version: 1.0.13
-  resolution: "find-value@npm:1.0.13"
-  checksum: 10/afc34a8399c800de215924277302e896ebe32be0742fa53cb369fb7158d658759111bd88dd51ce5cfe2fe4dd64d1a53fd23ba495701b31030090348f6761e55e
-  languageName: node
-  linkType: hard
-
 "flat-cache@npm:^4.0.0":
   version: 4.0.1
   resolution: "flat-cache@npm:4.0.1"
@@ -5781,15 +5762,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-plain-object@npm:^2.0.4":
-  version: 2.0.4
-  resolution: "is-plain-object@npm:2.0.4"
-  dependencies:
-    isobject: "npm:^3.0.1"
-  checksum: 10/2a401140cfd86cabe25214956ae2cfee6fbd8186809555cd0e84574f88de7b17abacb2e477a6a658fa54c6083ecbda1e6ae404c7720244cd198903848fca70ca
-  languageName: node
-  linkType: hard
-
 "is-potential-custom-element-name@npm:^1.0.1":
   version: 1.0.1
   resolution: "is-potential-custom-element-name@npm:1.0.1"
@@ -5797,13 +5769,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-primitive@npm:^3.0.1":
-  version: 3.0.1
-  resolution: "is-primitive@npm:3.0.1"
-  checksum: 10/c4da6a6e6d487f31d85b9259b67695fffcc75dca6c9612b0a002e3050c734227b9911be09b877539ec6309710229c19f4edd0f9e26ed2a67924ee0916baf0bed
-  languageName: node
-  linkType: hard
-
 "is-regex@npm:^1.2.1":
   version: 1.2.1
   resolution: "is-regex@npm:1.2.1"
@@ -5932,13 +5897,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"isobject@npm:^3.0.1":
-  version: 3.0.1
-  resolution: "isobject@npm:3.0.1"
-  checksum: 10/db85c4c970ce30693676487cca0e61da2ca34e8d4967c2e1309143ff910c207133a969f9e4ddb2dc6aba670aabce4e0e307146c310350b298e74a31f7d464703
-  languageName: node
-  linkType: hard
-
 "istanbul-lib-coverage@npm:^3.0.0, istanbul-lib-coverage@npm:^3.2.2":
   version: 3.2.2
   resolution: "istanbul-lib-coverage@npm:3.2.2"
@@ -5967,13 +5925,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"iterate-object@npm:^1.3.4":
-  version: 1.3.5
-  resolution: "iterate-object@npm:1.3.5"
-  checksum: 10/62d62ab0d55a66b4de2bff3b01148d3744bcd2e8ddaccebe715601e6cfdf478423fab739ae252097c9085da40f4b33aedb4a3c78df1f1fdecd073597b6976f8b
-  languageName: node
-  linkType: hard
-
 "iterator.prototype@npm:^1.1.5":
   version: 1.1.5
   resolution: "iterator.prototype@npm:1.1.5"
@@ -7350,15 +7301,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"r-json@npm:^1.2.10":
-  version: 1.3.1
-  resolution: "r-json@npm:1.3.1"
-  dependencies:
-    w-json: "npm:1.3.10"
-  checksum: 10/dc5b6e6fc636e0f72e0ef5601e346976d63716dcbf2460a1dc5deaa6cfa783619e2ea5763d15a81176c87f2c9d259104399c5896a9f2f6aa5df86f0b6a9bd892
-  languageName: node
-  linkType: hard
-
 "react-aria-components@npm:1.20.0":
   version: 1.20.0
   resolution: "react-aria-components@npm:1.20.0"
@@ -7854,7 +7796,6 @@ __metadata:
     axe-core: "npm:^4.13.0"
     chai: "npm:^6.2.2"
     chai-as-promised: "npm:^8.0.2"
-    edit-json-file: "npm:^1.8.1"
     eslint: "npm:^10.9.1"
     eslint-config-prettier: "npm:^10.1.8"
     eslint-plugin-import: "npm:^2.32.0"
@@ -7907,7 +7848,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rxjs@npm:^7.8.2":
+"rxjs@npm:7.8.2, rxjs@npm:^7.8.2":
   version: 7.8.2
   resolution: "rxjs@npm:7.8.2"
   dependencies:
@@ -8028,16 +7969,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"set-value@npm:^4.1.0":
-  version: 4.1.0
-  resolution: "set-value@npm:4.1.0"
-  dependencies:
-    is-plain-object: "npm:^2.0.4"
-    is-primitive: "npm:^3.0.1"
-  checksum: 10/67eebb0d78be89242478daf8ab5357c59a35add1d7bdccdb56236e6004128a79bdf298c952e286b60b63ed17b24dcdb399734fbdacc9b76e7fd2e3e01546a42e
-  languageName: node
-  linkType: hard
-
 "shebang-command@npm:^2.0.0":
   version: 2.0.0
   resolution: "shebang-command@npm:2.0.0"
@@ -9046,20 +8977,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"w-json@npm:1.3.10":
-  version: 1.3.10
-  resolution: "w-json@npm:1.3.10"
-  checksum: 10/bf3dfa4e8e2429fcf2b0456ba396245a0be719ff4fb04eec971536c3586cae7489c5ca5801848ecfbc2a454f37829a132f428acf9d457cebe43d5c70348e7a7b
-  languageName: node
-  linkType: hard
-
-"w-json@npm:^1.3.10":
-  version: 1.3.11
-  resolution: "w-json@npm:1.3.11"
-  checksum: 10/527d1934b978c8b0663cd4002732a8af3214297c66754b016b975f6f2f255e476f68d8ad34e58de22869d27eaf61ac981f991e5fb5a3e1d160a3804f73ec9d31
-  languageName: node
-  linkType: hard
-
 "w3c-xmlserializer@npm:^5.0.0":
   version: 5.0.0
   resolution: "w3c-xmlserializer@npm:5.0.0"

From 6db2face6a57f8d94acd754ce5788b8e6a5f3b8d Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Fri, 28 Aug 2026 22:09:14 +0200
Subject: [PATCH 247/267] Harden compatibility preflight windows

---
 Codemods/compat-manifest.json       |  2 ++
 Codemods/lib/compatibility.js       | 31 +++++++++++++++++++++++++----
 Codemods/test/compatibility.test.js |  9 +++++++++
 Source/compat-manifest.json         |  2 ++
 compat-manifest.json                |  2 ++
 5 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/Codemods/compat-manifest.json b/Codemods/compat-manifest.json
index 950a310b..daae68ae 100644
--- a/Codemods/compat-manifest.json
+++ b/Codemods/compat-manifest.json
@@ -223,6 +223,7 @@
                     "@primereact/ui": "11.0.0",
                     "@primeuix/motion": "1.0.0",
                     "@primeuix/themes": "3.0.0",
+                    "@primeuix/utils": "0.8.0",
                     "@types/react": "19.0.0",
                     "primereact": "11.0.0",
                     "react": "19.0.0",
@@ -241,6 +242,7 @@
                     "@primereact/ui": "11.1.0",
                     "@primeuix/motion": "1.0.0",
                     "@primeuix/themes": "3.0.0",
+                    "@primeuix/utils": "0.8.1",
                     "@types/react": "19.2.18",
                     "primereact": "11.1.0",
                     "react": "19.2.8",
diff --git a/Codemods/lib/compatibility.js b/Codemods/lib/compatibility.js
index 2a40ce0b..7fea53cd 100644
--- a/Codemods/lib/compatibility.js
+++ b/Codemods/lib/compatibility.js
@@ -25,6 +25,11 @@ export function preflightCompatibility({
         installedPackagePath,
         `installed ${packageName} package manifest`,
     );
+    if (installedPackage.name !== packageName) {
+        throw new Error(
+            `Resolved ${packageName} package manifest declares unexpected name '${installedPackage.name ?? '<missing>'}'.`,
+        );
+    }
     if (semver.valid(installedPackage.version) !== installedPackage.version) {
         throw new Error(
             `Installed ${packageName} has invalid version '${installedPackage.version ?? '<missing>'}'.`,
@@ -46,6 +51,18 @@ export function preflightCompatibility({
                 `Allowed migration Components ranges: ${ranges}.`,
         );
     }
+    const windowCodemodRange =
+        typeof supportedWindow.tooling === 'string'
+            ? supportedWindow.tooling
+            : supportedWindow.tooling?.codemods;
+    if (
+        !semver.validRange(windowCodemodRange) ||
+        !semver.satisfies(codemodPackage.version, windowCodemodRange)
+    ) {
+        throw new Error(
+            `Codemod ${codemodPackage.version} is incompatible with the ${supportedWindow.migrationRole} support window tooling range '${windowCodemodRange ?? '<missing>'}'.`,
+        );
+    }
 
     return {
         manifest,
@@ -94,11 +111,17 @@ export function validateBundledManifest(manifest, codemodVersion) {
     const windows = Object.values(manifest.supportWindows ?? {});
     if (
         windows.length === 0 ||
-        windows.some(
-            (window) =>
+        windows.some((window) => {
+            const toolingRange =
+                typeof window.tooling === 'string'
+                    ? window.tooling
+                    : window.tooling?.codemods;
+            return (
                 !semver.validRange(window.components) ||
-                !['source', 'target'].includes(window.migrationRole),
-        )
+                !semver.validRange(toolingRange) ||
+                !['source', 'target'].includes(window.migrationRole)
+            );
+        })
     ) {
         throw new Error(
             'Bundled compatibility manifest has invalid migration support windows.',
diff --git a/Codemods/test/compatibility.test.js b/Codemods/test/compatibility.test.js
index 62778189..a87c57f1 100644
--- a/Codemods/test/compatibility.test.js
+++ b/Codemods/test/compatibility.test.js
@@ -71,4 +71,13 @@ describe('compatibility preflight', () => {
             'stale codemod package metadata',
         );
     });
+
+    it('rejects an invalid support-window tooling range', () => {
+        const invalid = structuredClone(compatibilityManifest);
+        invalid.supportWindows.components3.tooling = 'not-a-range';
+
+        expect(() => validateBundledManifest(invalid, '4.0.0')).toThrow(
+            'invalid migration support windows',
+        );
+    });
 });
diff --git a/Source/compat-manifest.json b/Source/compat-manifest.json
index 950a310b..daae68ae 100644
--- a/Source/compat-manifest.json
+++ b/Source/compat-manifest.json
@@ -223,6 +223,7 @@
                     "@primereact/ui": "11.0.0",
                     "@primeuix/motion": "1.0.0",
                     "@primeuix/themes": "3.0.0",
+                    "@primeuix/utils": "0.8.0",
                     "@types/react": "19.0.0",
                     "primereact": "11.0.0",
                     "react": "19.0.0",
@@ -241,6 +242,7 @@
                     "@primereact/ui": "11.1.0",
                     "@primeuix/motion": "1.0.0",
                     "@primeuix/themes": "3.0.0",
+                    "@primeuix/utils": "0.8.1",
                     "@types/react": "19.2.18",
                     "primereact": "11.1.0",
                     "react": "19.2.8",
diff --git a/compat-manifest.json b/compat-manifest.json
index 950a310b..daae68ae 100644
--- a/compat-manifest.json
+++ b/compat-manifest.json
@@ -223,6 +223,7 @@
                     "@primereact/ui": "11.0.0",
                     "@primeuix/motion": "1.0.0",
                     "@primeuix/themes": "3.0.0",
+                    "@primeuix/utils": "0.8.0",
                     "@types/react": "19.0.0",
                     "primereact": "11.0.0",
                     "react": "19.0.0",
@@ -241,6 +242,7 @@
                     "@primereact/ui": "11.1.0",
                     "@primeuix/motion": "1.0.0",
                     "@primeuix/themes": "3.0.0",
+                    "@primeuix/utils": "0.8.1",
                     "@types/react": "19.2.18",
                     "primereact": "11.1.0",
                     "react": "19.2.8",

From bef74986d5f1a6c906cf8f78eb678ee4a256e627 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Fri, 28 Aug 2026 22:17:01 +0200
Subject: [PATCH 248/267] Adopt ESLint 10 React lint support

---
 .yarnrc.yml                                   |    6 -
 .../CommandDialog/CommandStepperContent.tsx   |    4 +-
 Source/CommandForm/fields/ChipsField.tsx      |    2 +-
 Source/CommandForm/fields/RadioGroupField.tsx |    2 +-
 Source/CommandForm/fields/RatingField.tsx     |    2 +-
 Source/DataTables/DataTableCore.tsx           |    6 +-
 Source/TimeMachine/EventsView.tsx             |    2 +-
 Source/Toolbar/ToolbarGroup.tsx               |    2 +-
 Source/Toolbar/ToolbarLayout.tsx              |    2 +-
 Source/Toolbar/ToolbarSection.tsx             |    2 +-
 eslint.config.mjs                             |   58 +-
 package.json                                  |    4 +-
 yarn.lock                                     | 1755 +++--------------
 13 files changed, 318 insertions(+), 1529 deletions(-)

diff --git a/.yarnrc.yml b/.yarnrc.yml
index 98ad1fca..18677dd8 100644
--- a/.yarnrc.yml
+++ b/.yarnrc.yml
@@ -20,12 +20,6 @@ packageExtensions:
     'storybook@10.5.10':
         dependencies:
             react: '19.2.8'
-    'debug@3.2.7':
-        dependencies:
-            supports-color: '*'
-    'debug@4.4.3':
-        dependencies:
-            supports-color: '*'
 
 pnpMode: loose
 
diff --git a/Source/CommandDialog/CommandStepperContent.tsx b/Source/CommandDialog/CommandStepperContent.tsx
index bc843562..7ac294c0 100644
--- a/Source/CommandDialog/CommandStepperContent.tsx
+++ b/Source/CommandDialog/CommandStepperContent.tsx
@@ -232,8 +232,8 @@ export const CommandStepperContent = ({
 
                 return (
                     <li
-                        {...pt?.step}
                         key={index}
+                        {...pt?.step}
                         className={['cratis-command-stepper__step', pt?.step?.className]
                             .filter(Boolean)
                             .join(' ')}
@@ -337,8 +337,8 @@ export const CommandStepperContent = ({
         >
             {panels.map((panel, index) => (
                 <section
-                    {...pt?.panel}
                     key={index}
+                    {...pt?.panel}
                     hidden={index !== currentStep}
                     className={['cratis-command-stepper__panel', pt?.panel?.className]
                         .filter(Boolean)
diff --git a/Source/CommandForm/fields/ChipsField.tsx b/Source/CommandForm/fields/ChipsField.tsx
index 4afdc94b..83b78f14 100644
--- a/Source/CommandForm/fields/ChipsField.tsx
+++ b/Source/CommandForm/fields/ChipsField.tsx
@@ -88,8 +88,8 @@ const ChipsControl = (props: ChipsFieldComponentProps) => {
         >
             {props.value.map((item, index) => (
                 <span
-                    {...props.pt?.item}
                     key={`${item}-${index}`}
+                    {...props.pt?.item}
                     className={['cratis-chips-field__item', props.pt?.item?.className]
                         .filter(Boolean)
                         .join(' ')}
diff --git a/Source/CommandForm/fields/RadioGroupField.tsx b/Source/CommandForm/fields/RadioGroupField.tsx
index 179c6a51..34ac78bb 100644
--- a/Source/CommandForm/fields/RadioGroupField.tsx
+++ b/Source/CommandForm/fields/RadioGroupField.tsx
@@ -79,8 +79,8 @@ export const RadioGroupField = asCommandFormField<RadioGroupFieldComponentProps>
                     const selected = props.value === value;
                     return (
                         <label
-                            {...props.pt?.option}
                             key={String(value)}
+                            {...props.pt?.option}
                             className={[
                                 'cratis-choice-field',
                                 props.pt?.option?.className,
diff --git a/Source/CommandForm/fields/RatingField.tsx b/Source/CommandForm/fields/RatingField.tsx
index aa23f510..35dfb3bb 100644
--- a/Source/CommandForm/fields/RatingField.tsx
+++ b/Source/CommandForm/fields/RatingField.tsx
@@ -78,8 +78,8 @@ export const RatingField = asCommandFormField<RatingFieldComponentProps>(
                     )(starValue);
                     return (
                         <label
-                            {...props.pt?.option}
                             key={starValue}
+                            {...props.pt?.option}
                             className={[
                                 'cratis-rating-field__option',
                                 props.pt?.option?.className,
diff --git a/Source/DataTables/DataTableCore.tsx b/Source/DataTables/DataTableCore.tsx
index 122cbe78..298c46d4 100644
--- a/Source/DataTables/DataTableCore.tsx
+++ b/Source/DataTables/DataTableCore.tsx
@@ -449,8 +449,8 @@ export const DataTableCore = <TData extends object>({
                                         : undefined;
                                 return (
                                     <th
-                                        {...pt?.headerCell}
                                         key={index}
+                                        {...pt?.headerCell}
                                         scope='col'
                                         aria-label={
                                             column.props.selectionMode
@@ -588,8 +588,8 @@ export const DataTableCore = <TData extends object>({
                                     Boolean(onRowClick) || selectionMode === 'single';
                                 return (
                                     <tr
-                                        {...pt?.row}
                                         key={rowKey}
+                                        {...pt?.row}
                                         tabIndex={isInteractive ? 0 : pt?.row?.tabIndex}
                                         aria-selected={
                                             selectionMode === 'single'
@@ -621,8 +621,8 @@ export const DataTableCore = <TData extends object>({
                                     >
                                         {columns.map((column, columnIndex) => (
                                             <td
-                                                {...pt?.cell}
                                                 key={columnIndex}
+                                                {...pt?.cell}
                                                 style={{
                                                     ...pt?.cell?.style,
                                                     ...column.props.style,
diff --git a/Source/TimeMachine/EventsView.tsx b/Source/TimeMachine/EventsView.tsx
index e09f638e..78c13b5e 100644
--- a/Source/TimeMachine/EventsView.tsx
+++ b/Source/TimeMachine/EventsView.tsx
@@ -137,8 +137,8 @@ export const EventsView = ({
                     );
                     return (
                         <article
-                            {...pt?.event}
                             key={`${event.type}-${event.occurred.toISOString()}-${index}`}
+                            {...pt?.event}
                             className={classNames(
                                 'events-view-timeline-event',
                                 pt?.event?.className,
diff --git a/Source/Toolbar/ToolbarGroup.tsx b/Source/Toolbar/ToolbarGroup.tsx
index 15764819..51b845a2 100644
--- a/Source/Toolbar/ToolbarGroup.tsx
+++ b/Source/Toolbar/ToolbarGroup.tsx
@@ -125,8 +125,8 @@ const SlotTransition = ({
             {/* Exiting content — fades out, then React unmounts it after SLOT_TRANSITION_MS */}
             {exiting.length > 0 && (
                 <div
-                    {...pt?.outgoing}
                     key={exitRevision}
+                    {...pt?.outgoing}
                     className={`toolbar-slot-outgoing cratis:inline-flex ${flexClass} cratis:items-center cratis:gap-1 ${pt?.outgoing?.className ?? ''}`}
                     data-cratis-part='toolbar-slot-outgoing'
                     aria-hidden='true'
diff --git a/Source/Toolbar/ToolbarLayout.tsx b/Source/Toolbar/ToolbarLayout.tsx
index 2746924f..f8bb62ad 100644
--- a/Source/Toolbar/ToolbarLayout.tsx
+++ b/Source/Toolbar/ToolbarLayout.tsx
@@ -102,8 +102,8 @@ const LayoutTransition = ({
             </div>
             {exiting.length > 0 && (
                 <div
-                    {...pt?.outgoing}
                     key={exitRevision}
+                    {...pt?.outgoing}
                     className={`toolbar-slot-outgoing cratis:inline-flex ${flexClass} cratis:items-center cratis:gap-1 ${pt?.outgoing?.className ?? ''}`}
                     data-cratis-part='toolbar-slot-outgoing'
                     aria-hidden='true'
diff --git a/Source/Toolbar/ToolbarSection.tsx b/Source/Toolbar/ToolbarSection.tsx
index 28a2b7b8..f80bf87c 100644
--- a/Source/Toolbar/ToolbarSection.tsx
+++ b/Source/Toolbar/ToolbarSection.tsx
@@ -203,8 +203,8 @@ export const ToolbarSection = ({
 
                 return (
                     <div
-                        {...pt?.context}
                         key={name}
+                        {...pt?.context}
                         ref={(element) => { contextRefs.current[name] = element; }}
                         className={`toolbar-context cratis:inline-flex ${flexClass} cratis:items-center cratis:gap-1 ${
                             isActive ? 'toolbar-context--active' : 'toolbar-context--inactive'
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 5cfd08bc..e1fd6b61 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -1,8 +1,5 @@
-import path from 'node:path';
-import { fileURLToPath } from 'node:url';
-import { FlatCompat } from '@eslint/eslintrc';
-import js from '@eslint/js';
 import eslint from '@eslint/js';
+import eslintReact from '@eslint-react/eslint-plugin';
 import typescriptEslint from '@typescript-eslint/eslint-plugin';
 import tsParser from '@typescript-eslint/parser';
 import header from '@tony.ganchev/eslint-plugin-header';
@@ -12,19 +9,11 @@ import tseslint from 'typescript-eslint';
 import componentsPlugin from './ESLint/index.js';
 import { kernelSourcePaths } from './ESLint/lib/kernelBoundary.js';
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-const compat = new FlatCompat({
-    baseDirectory: __dirname,
-    recommendedConfig: js.configs.recommended,
-    allConfig: js.configs.all,
-});
-
 const getRules = configArray => {
     let rules = {};
 
     const addRulesFromObject = config => {
-        if (config.hasOwnProperty('rules')) {
+        if (Object.hasOwn(config, 'rules')) {
             rules = {
                 ...rules,
                 ...config.rules,
@@ -43,14 +32,15 @@ const getRules = configArray => {
     return rules;
 };
 
+const reactConfig = eslintReact.configs['recommended-typescript'];
+
 const rules = {
     ...getRules(eslint.configs.recommended),
     ...getRules(tseslint.configs.recommended),
+    ...getRules(reactConfig),
     ...{
         'no-irregular-whitespace': 0,
         semi: [2, 'always'],
-        'react/display-name': 0,
-        'react/react-in-jsx-scope': 0,
         'no-prototype-builtins': 0,
 
         '@typescript-eslint/no-unused-vars': [
@@ -87,9 +77,6 @@ const rules = {
     },
 };
 
-const reactCompat = compat.extends('plugin:react/recommended');
-const reactPlugin = reactCompat[0].plugins.react;
-
 const defaultConfig = [
     {
         ignores: [
@@ -111,7 +98,7 @@ const defaultConfig = [
 
         plugins: {
             '@typescript-eslint': typescriptEslint,
-            react: reactPlugin,
+            ...reactConfig.plugins,
             '@tony.ganchev': header,
             'no-null': noNull
         },
@@ -126,10 +113,35 @@ const defaultConfig = [
             sourceType: 'module',
         },
 
-        settings: {
-            react: {
-                version: 'detect',
-            },
+        settings: reactConfig.settings,
+    },
+    {
+        // Storybook render callbacks are React render functions, but their required lowercase
+        // `render` property name cannot satisfy component-name inference in hook/compiler rules.
+        files: ['**/*.stories.tsx'],
+        rules: {
+            '@eslint-react/rules-of-hooks': 'off',
+            '@eslint-react/no-nested-component-definitions': 'off',
+            '@eslint-react/static-components': 'off',
+        },
+    },
+    {
+        // The public `unstable_` prefix intentionally precedes the component/hook name. Runtime
+        // aliases use normal React names, and renderer specs verify hook order across rerenders.
+        files: [
+            'Source/renderer/RendererContext.tsx',
+            'Source/renderer/RendererScope.tsx',
+        ],
+        rules: {
+            '@eslint-react/rules-of-hooks': 'off',
+        },
+    },
+    {
+        // Selection synchronization deliberately flushes before focus/layout reads; its specs cover
+        // the ordering guarantee and replacing it with deferred rendering changes behavior.
+        files: ['Source/PivotViewer/hooks/useSelectedItem.ts'],
+        rules: {
+            '@eslint-react/dom-no-flush-sync': 'off',
         },
     },
     {
diff --git a/package.json b/package.json
index 413d61db..bd189f4a 100644
--- a/package.json
+++ b/package.json
@@ -48,7 +48,7 @@
         "@cratis/arc": "22.5.0",
         "@cratis/arc.react": "22.5.0",
         "@cratis/arc.vite": "22.5.0",
-        "@eslint/eslintrc": "^3.3.6",
+        "@eslint-react/eslint-plugin": "5.18.6",
         "@eslint/js": "^10.0.1",
         "@rollup/plugin-node-resolve": "^16.0.3",
         "@rollup/plugin-typescript": "^12.3.0",
@@ -79,10 +79,8 @@
         "chai-as-promised": "^8.0.2",
         "eslint": "^10.9.1",
         "eslint-config-prettier": "^10.1.8",
-        "eslint-plugin-import": "^2.32.0",
         "eslint-plugin-no-null": "^1.0.2",
         "eslint-plugin-prettier": "^5.5.6",
-        "eslint-plugin-react": "^7.37.5",
         "glob": "^13.0.6",
         "globals": "^17.11.0",
         "jsdom": "^30.0.1",
diff --git a/yarn.lock b/yarn.lock
index 82ec7084..033c6f7f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -950,6 +950,120 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@eslint-react/ast@npm:5.18.6":
+  version: 5.18.6
+  resolution: "@eslint-react/ast@npm:5.18.6"
+  dependencies:
+    "@typescript-eslint/types": "npm:^8.67.0"
+    "@typescript-eslint/typescript-estree": "npm:^8.67.0"
+    "@typescript-eslint/utils": "npm:^8.67.0"
+    string-ts: "npm:^2.3.1"
+  peerDependencies:
+    eslint: "*"
+    typescript: "*"
+  checksum: 10/8f537ce39790fb8ce7cf4b16aba019a2d6eb3e00f13c6c2d09d751e044b5482fa00e1a21e21ac3c73b8240c51b2fbae1acb6890ff7a7a3ad0f31c5dd22559718
+  languageName: node
+  linkType: hard
+
+"@eslint-react/core@npm:5.18.6":
+  version: 5.18.6
+  resolution: "@eslint-react/core@npm:5.18.6"
+  dependencies:
+    "@eslint-react/ast": "npm:5.18.6"
+    "@eslint-react/eslint": "npm:5.18.6"
+    "@eslint-react/shared": "npm:5.18.6"
+    "@eslint-react/var": "npm:5.18.6"
+    "@typescript-eslint/scope-manager": "npm:^8.67.0"
+    "@typescript-eslint/types": "npm:^8.67.0"
+    "@typescript-eslint/utils": "npm:^8.67.0"
+    ts-pattern: "npm:^5.9.0"
+  peerDependencies:
+    eslint: "*"
+    typescript: "*"
+  checksum: 10/102bbee12b417b21f05268e4aafdd962d3b47c7d7c9035c7d6bcfd4fde3127d9f2182cda3d2c939360f61cdf34429ec0e5d862127240fac064ba129205a28fa9
+  languageName: node
+  linkType: hard
+
+"@eslint-react/eslint-plugin@npm:5.18.6":
+  version: 5.18.6
+  resolution: "@eslint-react/eslint-plugin@npm:5.18.6"
+  dependencies:
+    "@eslint-react/shared": "npm:5.18.6"
+    eslint-plugin-react-dom: "npm:5.18.6"
+    eslint-plugin-react-jsx: "npm:5.18.6"
+    eslint-plugin-react-naming-convention: "npm:5.18.6"
+    eslint-plugin-react-rsc: "npm:5.18.6"
+    eslint-plugin-react-web-api: "npm:5.18.6"
+    eslint-plugin-react-x: "npm:5.18.6"
+  peerDependencies:
+    eslint: "*"
+    typescript: "*"
+  checksum: 10/65a9d118f57b3db9559070095deac8d04e39dab39cc60a51f913deb36a25419e975e46f6f30827205459c97f3700f9d1f27f4e511d851445abb776ed1956efe0
+  languageName: node
+  linkType: hard
+
+"@eslint-react/eslint@npm:5.18.6":
+  version: 5.18.6
+  resolution: "@eslint-react/eslint@npm:5.18.6"
+  dependencies:
+    "@typescript-eslint/utils": "npm:^8.67.0"
+  peerDependencies:
+    eslint: "*"
+    typescript: "*"
+  checksum: 10/68d4bf5e2de38401823aeb477acc58bf9d4fb2ac139fa7e4b4e21862e7eef3c93a4a03fe04234f54b17aa488c7b47a1a7b6edb11bbe8188cce72905db35f3067
+  languageName: node
+  linkType: hard
+
+"@eslint-react/jsx@npm:5.18.6":
+  version: 5.18.6
+  resolution: "@eslint-react/jsx@npm:5.18.6"
+  dependencies:
+    "@eslint-react/ast": "npm:5.18.6"
+    "@eslint-react/eslint": "npm:5.18.6"
+    "@eslint-react/shared": "npm:5.18.6"
+    "@eslint-react/var": "npm:5.18.6"
+    "@typescript-eslint/types": "npm:^8.67.0"
+    "@typescript-eslint/utils": "npm:^8.67.0"
+    ts-pattern: "npm:^5.9.0"
+  peerDependencies:
+    eslint: "*"
+    typescript: "*"
+  checksum: 10/32fb85ad6c00be56fef2ab95a6dc0c5ecae42bba9215a4e31c1b40fd841f207f73e3f5917924e3bbc8b892c9977ee86831e5fde3b04bd9d6689bcbeb70ea9e02
+  languageName: node
+  linkType: hard
+
+"@eslint-react/shared@npm:5.18.6":
+  version: 5.18.6
+  resolution: "@eslint-react/shared@npm:5.18.6"
+  dependencies:
+    "@eslint-react/eslint": "npm:5.18.6"
+    "@typescript-eslint/utils": "npm:^8.67.0"
+    ts-pattern: "npm:^5.9.0"
+    zod: "npm:^3.25.0 || ^4.0.0"
+  peerDependencies:
+    eslint: "*"
+    typescript: "*"
+  checksum: 10/1f1be6a8b0bed50806f1efae985caa8546bedc5bfd3a6ef16e7ea2c5df803d8becde1189812903475d71324430c5d64d23a38c154c3f45a7de48298fa454b40e
+  languageName: node
+  linkType: hard
+
+"@eslint-react/var@npm:5.18.6":
+  version: 5.18.6
+  resolution: "@eslint-react/var@npm:5.18.6"
+  dependencies:
+    "@eslint-react/ast": "npm:5.18.6"
+    "@eslint-react/eslint": "npm:5.18.6"
+    "@typescript-eslint/scope-manager": "npm:^8.67.0"
+    "@typescript-eslint/types": "npm:^8.67.0"
+    "@typescript-eslint/utils": "npm:^8.67.0"
+    ts-pattern: "npm:^5.9.0"
+  peerDependencies:
+    eslint: "*"
+    typescript: "*"
+  checksum: 10/6457ae618aa93b7c28ef30e094cbc60f988c11b6a310179177f382e5bb407e1bee2fffd6a1d26e577abb3f1809e1f5e56767036999eb5e63c83da1a152aab21e
+  languageName: node
+  linkType: hard
+
 "@eslint/config-array@npm:^0.23.5":
   version: 0.23.5
   resolution: "@eslint/config-array@npm:0.23.5"
@@ -979,23 +1093,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@eslint/eslintrc@npm:^3.3.6":
-  version: 3.3.6
-  resolution: "@eslint/eslintrc@npm:3.3.6"
-  dependencies:
-    ajv: "npm:^6.14.0"
-    debug: "npm:^4.3.2"
-    espree: "npm:^10.0.1"
-    globals: "npm:^14.0.0"
-    ignore: "npm:^5.2.0"
-    import-fresh: "npm:^3.2.1"
-    js-yaml: "npm:^4.3.0"
-    minimatch: "npm:^3.1.5"
-    strip-json-comments: "npm:^3.1.1"
-  checksum: 10/8d1d501069faf7c1c73e37181ec403dd2d1509f8da85f226531f6a7fdd9a9326fc6d2ea2e8192515992578cf9e7ed87f9d7ce3f1bfc6d0f0e77796d18e0e8ef6
-  languageName: node
-  linkType: hard
-
 "@eslint/js@npm:^10.0.1":
   version: 10.0.1
   resolution: "@eslint/js@npm:10.0.1"
@@ -2232,13 +2329,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rtsao/scc@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "@rtsao/scc@npm:1.1.0"
-  checksum: 10/17d04adf404e04c1e61391ed97bca5117d4c2767a76ae3e879390d6dec7b317fcae68afbf9e98badee075d0b64fa60f287729c4942021b4d19cd01db77385c01
-  languageName: node
-  linkType: hard
-
 "@sinonjs/commons@npm:^3.0.1":
   version: 3.0.1
   resolution: "@sinonjs/commons@npm:3.0.1"
@@ -2987,13 +3077,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/json5@npm:^0.0.29":
-  version: 0.0.29
-  resolution: "@types/json5@npm:0.0.29"
-  checksum: 10/4e5aed58cabb2bbf6f725da13421aa50a49abb6bc17bfab6c31b8774b073fa7b50d557c61f961a09a85f6056151190f8ac95f13f5b48136ba5841f7d4484ec56
-  languageName: node
-  linkType: hard
-
 "@types/mdx@npm:^2.0.0":
   version: 2.0.14
   resolution: "@types/mdx@npm:2.0.14"
@@ -3147,7 +3230,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/scope-manager@npm:8.68.0":
+"@typescript-eslint/scope-manager@npm:8.68.0, @typescript-eslint/scope-manager@npm:^8.67.0":
   version: 8.68.0
   resolution: "@typescript-eslint/scope-manager@npm:8.68.0"
   dependencies:
@@ -3166,7 +3249,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/type-utils@npm:8.68.0":
+"@typescript-eslint/type-utils@npm:8.68.0, @typescript-eslint/type-utils@npm:^8.67.0":
   version: 8.68.0
   resolution: "@typescript-eslint/type-utils@npm:8.68.0"
   dependencies:
@@ -3182,14 +3265,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/types@npm:8.68.0, @typescript-eslint/types@npm:^8.68.0":
+"@typescript-eslint/types@npm:8.68.0, @typescript-eslint/types@npm:^8.67.0, @typescript-eslint/types@npm:^8.68.0":
   version: 8.68.0
   resolution: "@typescript-eslint/types@npm:8.68.0"
   checksum: 10/f9337e0263d95e6edca6e364f9b1f70d5840b9648b5aa0d02065bcee5809a50c92d024ba17b458182ec4e7fffe5efd05584f1667b1e43ff3e7121b218283a207
   languageName: node
   linkType: hard
 
-"@typescript-eslint/typescript-estree@npm:8.68.0":
+"@typescript-eslint/typescript-estree@npm:8.68.0, @typescript-eslint/typescript-estree@npm:^8.67.0":
   version: 8.68.0
   resolution: "@typescript-eslint/typescript-estree@npm:8.68.0"
   dependencies:
@@ -3208,7 +3291,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/utils@npm:8.68.0":
+"@typescript-eslint/utils@npm:8.68.0, @typescript-eslint/utils@npm:^8.67.0":
   version: 8.68.0
   resolution: "@typescript-eslint/utils@npm:8.68.0"
   dependencies:
@@ -3597,113 +3680,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"array-buffer-byte-length@npm:^1.0.1, array-buffer-byte-length@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "array-buffer-byte-length@npm:1.0.2"
-  dependencies:
-    call-bound: "npm:^1.0.3"
-    is-array-buffer: "npm:^3.0.5"
-  checksum: 10/0ae3786195c3211b423e5be8dd93357870e6fb66357d81da968c2c39ef43583ef6eece1f9cb1caccdae4806739c65dea832b44b8593414313cd76a89795fca63
-  languageName: node
-  linkType: hard
-
-"array-includes@npm:^3.1.6, array-includes@npm:^3.1.8, array-includes@npm:^3.1.9":
-  version: 3.1.9
-  resolution: "array-includes@npm:3.1.9"
-  dependencies:
-    call-bind: "npm:^1.0.8"
-    call-bound: "npm:^1.0.4"
-    define-properties: "npm:^1.2.1"
-    es-abstract: "npm:^1.24.0"
-    es-object-atoms: "npm:^1.1.1"
-    get-intrinsic: "npm:^1.3.0"
-    is-string: "npm:^1.1.1"
-    math-intrinsics: "npm:^1.1.0"
-  checksum: 10/8bfe9a58df74f326b4a76b04ee05c13d871759e888b4ee8f013145297cf5eb3c02cfa216067ebdaac5d74eb9763ac5cad77cdf2773b8ab475833701e032173aa
-  languageName: node
-  linkType: hard
-
-"array.prototype.findlast@npm:^1.2.5":
-  version: 1.2.5
-  resolution: "array.prototype.findlast@npm:1.2.5"
-  dependencies:
-    call-bind: "npm:^1.0.7"
-    define-properties: "npm:^1.2.1"
-    es-abstract: "npm:^1.23.2"
-    es-errors: "npm:^1.3.0"
-    es-object-atoms: "npm:^1.0.0"
-    es-shim-unscopables: "npm:^1.0.2"
-  checksum: 10/7dffcc665aa965718ad6de7e17ac50df0c5e38798c0a5bf9340cf24feb8594df6ec6f3fcbe714c1577728a1b18b5704b15669474b27bceeca91ef06ce2a23c31
-  languageName: node
-  linkType: hard
-
-"array.prototype.findlastindex@npm:^1.2.6":
-  version: 1.2.6
-  resolution: "array.prototype.findlastindex@npm:1.2.6"
-  dependencies:
-    call-bind: "npm:^1.0.8"
-    call-bound: "npm:^1.0.4"
-    define-properties: "npm:^1.2.1"
-    es-abstract: "npm:^1.23.9"
-    es-errors: "npm:^1.3.0"
-    es-object-atoms: "npm:^1.1.1"
-    es-shim-unscopables: "npm:^1.1.0"
-  checksum: 10/5ddb6420e820bef6ddfdcc08ce780d0fd5e627e97457919c27e32359916de5a11ce12f7c55073555e503856618eaaa70845d6ca11dcba724766f38eb1c22f7a2
-  languageName: node
-  linkType: hard
-
-"array.prototype.flat@npm:^1.3.1, array.prototype.flat@npm:^1.3.3":
-  version: 1.3.3
-  resolution: "array.prototype.flat@npm:1.3.3"
-  dependencies:
-    call-bind: "npm:^1.0.8"
-    define-properties: "npm:^1.2.1"
-    es-abstract: "npm:^1.23.5"
-    es-shim-unscopables: "npm:^1.0.2"
-  checksum: 10/f9b992fa0775d8f7c97abc91eb7f7b2f0ed8430dd9aeb9fdc2967ac4760cdd7fc2ef7ead6528fef40c7261e4d790e117808ce0d3e7e89e91514d4963a531cd01
-  languageName: node
-  linkType: hard
-
-"array.prototype.flatmap@npm:^1.3.3":
-  version: 1.3.3
-  resolution: "array.prototype.flatmap@npm:1.3.3"
-  dependencies:
-    call-bind: "npm:^1.0.8"
-    define-properties: "npm:^1.2.1"
-    es-abstract: "npm:^1.23.5"
-    es-shim-unscopables: "npm:^1.0.2"
-  checksum: 10/473534573aa4b37b1d80705d0ce642f5933cccf5617c9f3e8a56686e9815ba93d469138e86a1f25d2fe8af999c3d24f54d703ec1fc2db2e6778d46d0f4ac951e
-  languageName: node
-  linkType: hard
-
-"array.prototype.tosorted@npm:^1.1.4":
-  version: 1.1.4
-  resolution: "array.prototype.tosorted@npm:1.1.4"
-  dependencies:
-    call-bind: "npm:^1.0.7"
-    define-properties: "npm:^1.2.1"
-    es-abstract: "npm:^1.23.3"
-    es-errors: "npm:^1.3.0"
-    es-shim-unscopables: "npm:^1.0.2"
-  checksum: 10/874694e5d50e138894ff5b853e639c29b0aa42bbd355acda8e8e9cd337f1c80565f21edc15e8c727fa4c0877fd9d8783c575809e440cc4d2d19acaa048bf967d
-  languageName: node
-  linkType: hard
-
-"arraybuffer.prototype.slice@npm:^1.0.4":
-  version: 1.0.4
-  resolution: "arraybuffer.prototype.slice@npm:1.0.4"
-  dependencies:
-    array-buffer-byte-length: "npm:^1.0.1"
-    call-bind: "npm:^1.0.8"
-    define-properties: "npm:^1.2.1"
-    es-abstract: "npm:^1.23.5"
-    es-errors: "npm:^1.3.0"
-    get-intrinsic: "npm:^1.2.6"
-    is-array-buffer: "npm:^3.0.4"
-  checksum: 10/4821ebdfe7d699f910c7f09bc9fa996f09b96b80bccb4f5dd4b59deae582f6ad6e505ecef6376f8beac1eda06df2dbc89b70e82835d104d6fcabd33c1aed1ae9
-  languageName: node
-  linkType: hard
-
 "assertion-error@npm:^2.0.1":
   version: 2.0.1
   resolution: "assertion-error@npm:2.0.1"
@@ -3731,20 +3707,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"async-function@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "async-function@npm:1.0.0"
-  checksum: 10/1a09379937d846f0ce7614e75071c12826945d4e417db634156bf0e4673c495989302f52186dfa9767a1d9181794554717badd193ca2bbab046ef1da741d8efd
-  languageName: node
-  linkType: hard
-
-"async-generator-function@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "async-generator-function@npm:1.0.0"
-  checksum: 10/3d49e7acbeee9e84537f4cb0e0f91893df8eba976759875ae8ee9e3d3c82f6ecdebdb347c2fad9926b92596d93cdfc78ecc988bcdf407e40433e8e8e6fe5d78e
-  languageName: node
-  linkType: hard
-
 "autoprefixer@npm:^10.5.4":
   version: 10.5.4
   resolution: "autoprefixer@npm:10.5.4"
@@ -3762,15 +3724,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"available-typed-arrays@npm:^1.0.7":
-  version: 1.0.7
-  resolution: "available-typed-arrays@npm:1.0.7"
-  dependencies:
-    possible-typed-array-names: "npm:^1.0.0"
-  checksum: 10/6c9da3a66caddd83c875010a1ca8ef11eac02ba15fb592dc9418b2b5e7b77b645fa7729380a92d9835c2f05f2ca1b6251f39b993e0feb3f1517c74fa1af02cab
-  languageName: node
-  linkType: hard
-
 "axe-core@npm:^4.13.0, axe-core@npm:^4.2.0":
   version: 4.13.0
   resolution: "axe-core@npm:4.13.0"
@@ -3821,13 +3774,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"brace-expansion@npm:^1.1.7":
-  version: 1.1.18
-  resolution: "brace-expansion@npm:1.1.18"
-  dependencies:
-    balanced-match: "npm:^1.0.0"
-    concat-map: "npm:0.0.1"
-  checksum: 10/b55a3c03239b8d2127c7cbb3408c9ad3a556a8c303bf3064df78bfb7c093160fc8f6e0a32e42a850a78eba12f29ccf6ef997690b9acf945d242c56c61c4aa977
+"birecord@npm:^0.1.2":
+  version: 0.1.2
+  resolution: "birecord@npm:0.1.2"
+  checksum: 10/5160e0c307c0e58f08d3b5318ba7e8be0929d26072da968a1b4a3babecac3eca674879c4335935bab5c1b3967587e1bbd46ed5264c88f24e1cbe20cc60193689
   languageName: node
   linkType: hard
 
@@ -3889,38 +3839,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"call-bind-apply-helpers@npm:^1.0.1, call-bind-apply-helpers@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "call-bind-apply-helpers@npm:1.0.2"
-  dependencies:
-    es-errors: "npm:^1.3.0"
-    function-bind: "npm:^1.1.2"
-  checksum: 10/00482c1f6aa7cfb30fb1dbeb13873edf81cfac7c29ed67a5957d60635a56b2a4a480f1016ddbdb3395cc37900d46037fb965043a51c5c789ffeab4fc535d18b5
-  languageName: node
-  linkType: hard
-
-"call-bind@npm:^1.0.7, call-bind@npm:^1.0.8, call-bind@npm:^1.0.9":
-  version: 1.0.9
-  resolution: "call-bind@npm:1.0.9"
-  dependencies:
-    call-bind-apply-helpers: "npm:^1.0.2"
-    es-define-property: "npm:^1.0.1"
-    get-intrinsic: "npm:^1.3.0"
-    set-function-length: "npm:^1.2.2"
-  checksum: 10/25b1a98d6158f0adf9fface594ca82be4e3ed481d8ff7f36ad1fccb0c8377e38c6a04ff3248693723222d378677e93077c739defc8a6741c82b7e00bcee1245d
-  languageName: node
-  linkType: hard
-
-"call-bound@npm:^1.0.2, call-bound@npm:^1.0.3, call-bound@npm:^1.0.4":
-  version: 1.0.4
-  resolution: "call-bound@npm:1.0.4"
-  dependencies:
-    call-bind-apply-helpers: "npm:^1.0.2"
-    get-intrinsic: "npm:^1.3.0"
-  checksum: 10/ef2b96e126ec0e58a7ff694db43f4d0d44f80e641370c21549ed911fecbdbc2df3ebc9bddad918d6bbdefeafb60bb3337902006d5176d72bcd2da74820991af7
-  languageName: node
-  linkType: hard
-
 "callsites@npm:^3.0.0":
   version: 3.1.0
   resolution: "callsites@npm:3.1.0"
@@ -4054,10 +3972,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"concat-map@npm:0.0.1":
-  version: 0.0.1
-  resolution: "concat-map@npm:0.0.1"
-  checksum: 10/9680699c8e2b3af0ae22592cb764acaf973f292a7b71b8a06720233011853a58e256c89216a10cbe889727532fd77f8bcd49a760cedfde271b8e006c20e079f2
+"compare-versions@npm:^6.1.1":
+  version: 6.1.1
+  resolution: "compare-versions@npm:6.1.1"
+  checksum: 10/9325c0fadfba81afa0ec17e6fc2ef823ba785c693089698b8d9374e5460509f1916a88591644d4cb4045c9a58e47fafbcc0724fe8bf446d2a875a3d6eeddf165
   languageName: node
   linkType: hard
 
@@ -4140,48 +4058,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"data-view-buffer@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "data-view-buffer@npm:1.0.2"
-  dependencies:
-    call-bound: "npm:^1.0.3"
-    es-errors: "npm:^1.3.0"
-    is-data-view: "npm:^1.0.2"
-  checksum: 10/c10b155a4e93999d3a215d08c23eea95f865e1f510b2e7748fcae1882b776df1afe8c99f483ace7fc0e5a3193ab08da138abebc9829d12003746c5a338c4d644
-  languageName: node
-  linkType: hard
-
-"data-view-byte-length@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "data-view-byte-length@npm:1.0.2"
-  dependencies:
-    call-bound: "npm:^1.0.3"
-    es-errors: "npm:^1.3.0"
-    is-data-view: "npm:^1.0.2"
-  checksum: 10/2a47055fcf1ab3ec41b00b6f738c6461a841391a643c9ed9befec1117c1765b4d492661d97fb7cc899200c328949dca6ff189d2c6537d96d60e8a02dfe3c95f7
-  languageName: node
-  linkType: hard
-
-"data-view-byte-offset@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "data-view-byte-offset@npm:1.0.1"
-  dependencies:
-    call-bound: "npm:^1.0.2"
-    es-errors: "npm:^1.3.0"
-    is-data-view: "npm:^1.0.1"
-  checksum: 10/fa3bdfa0968bea6711ee50375094b39f561bce3f15f9e558df59de9c25f0bdd4cddc002d9c1d70ac7772ebd36854a7e22d1761e7302a934e6f1c2263bcf44aa2
-  languageName: node
-  linkType: hard
-
-"debug@npm:^3.2.7":
-  version: 3.2.7
-  resolution: "debug@npm:3.2.7"
-  dependencies:
-    ms: "npm:^2.1.1"
-  checksum: 10/d86fd7be2b85462297ea16f1934dc219335e802f629ca9a69b63ed8ed041dda492389bb2ee039217c02e5b54792b1c51aa96ae954cf28634d363a2360c7a1639
-  languageName: node
-  linkType: hard
-
 "debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.1, debug@npm:^4.3.2, debug@npm:^4.3.5, debug@npm:^4.4.3":
   version: 4.4.3
   resolution: "debug@npm:4.4.3"
@@ -4246,17 +4122,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"define-data-property@npm:^1.0.1, define-data-property@npm:^1.1.4":
-  version: 1.1.4
-  resolution: "define-data-property@npm:1.1.4"
-  dependencies:
-    es-define-property: "npm:^1.0.0"
-    es-errors: "npm:^1.3.0"
-    gopd: "npm:^1.0.1"
-  checksum: 10/abdcb2505d80a53524ba871273e5da75e77e52af9e15b3aa65d8aad82b8a3a424dad7aee2cc0b71470ac7acf501e08defac362e8b6a73cdb4309f028061df4ae
-  languageName: node
-  linkType: hard
-
 "define-lazy-prop@npm:^3.0.0":
   version: 3.0.0
   resolution: "define-lazy-prop@npm:3.0.0"
@@ -4264,17 +4129,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"define-properties@npm:^1.1.3, define-properties@npm:^1.2.1":
-  version: 1.2.1
-  resolution: "define-properties@npm:1.2.1"
-  dependencies:
-    define-data-property: "npm:^1.0.1"
-    has-property-descriptors: "npm:^1.0.0"
-    object-keys: "npm:^1.1.1"
-  checksum: 10/b4ccd00597dd46cb2d4a379398f5b19fca84a16f3374e2249201992f36b30f6835949a9429669ee6b41b6e837205a163eadd745e472069e70dfc10f03e5fcc12
-  languageName: node
-  linkType: hard
-
 "dequal@npm:^2.0.3":
   version: 2.0.3
   resolution: "dequal@npm:2.0.3"
@@ -4310,15 +4164,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"doctrine@npm:^2.1.0":
-  version: 2.1.0
-  resolution: "doctrine@npm:2.1.0"
-  dependencies:
-    esutils: "npm:^2.0.2"
-  checksum: 10/555684f77e791b17173ea86e2eea45ef26c22219cb64670669c4f4bebd26dbc95cd90ec1f4159e9349a6bb9eb892ce4dde8cd0139e77bedd8bf4518238618474
-  languageName: node
-  linkType: hard
-
 "doctrine@npm:^3.0.0":
   version: 3.0.0
   resolution: "doctrine@npm:3.0.0"
@@ -4352,17 +4197,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dunder-proto@npm:^1.0.0, dunder-proto@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "dunder-proto@npm:1.0.1"
-  dependencies:
-    call-bind-apply-helpers: "npm:^1.0.1"
-    es-errors: "npm:^1.3.0"
-    gopd: "npm:^1.2.0"
-  checksum: 10/5add88a3d68d42d6e6130a0cac450b7c2edbe73364bbd2fc334564418569bea97c6943a8fcd70e27130bf32afc236f30982fc4905039b703f23e9e0433c29934
-  languageName: node
-  linkType: hard
-
 "earcut@npm:^3.0.2":
   version: 3.2.3
   resolution: "earcut@npm:3.2.3"
@@ -4438,87 +4272,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"es-abstract-get@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "es-abstract-get@npm:1.0.0"
-  dependencies:
-    es-errors: "npm:^1.3.0"
-    es-object-atoms: "npm:^1.1.2"
-    is-callable: "npm:^1.2.7"
-    object-inspect: "npm:^1.13.4"
-  checksum: 10/a2bfa7536529a21c8590670a69c0c4583e531f92dbc420c13f680bf906215f510d9d14b18e2e4a26e8b07100ab28719811dbce822e43fe87305a5a9069cda24e
-  languageName: node
-  linkType: hard
-
-"es-abstract@npm:^1.17.5, es-abstract@npm:^1.23.2, es-abstract@npm:^1.23.3, es-abstract@npm:^1.23.5, es-abstract@npm:^1.23.6, es-abstract@npm:^1.23.9, es-abstract@npm:^1.24.0, es-abstract@npm:^1.24.2":
-  version: 1.24.2
-  resolution: "es-abstract@npm:1.24.2"
-  dependencies:
-    array-buffer-byte-length: "npm:^1.0.2"
-    arraybuffer.prototype.slice: "npm:^1.0.4"
-    available-typed-arrays: "npm:^1.0.7"
-    call-bind: "npm:^1.0.8"
-    call-bound: "npm:^1.0.4"
-    data-view-buffer: "npm:^1.0.2"
-    data-view-byte-length: "npm:^1.0.2"
-    data-view-byte-offset: "npm:^1.0.1"
-    es-define-property: "npm:^1.0.1"
-    es-errors: "npm:^1.3.0"
-    es-object-atoms: "npm:^1.1.1"
-    es-set-tostringtag: "npm:^2.1.0"
-    es-to-primitive: "npm:^1.3.0"
-    function.prototype.name: "npm:^1.1.8"
-    get-intrinsic: "npm:^1.3.0"
-    get-proto: "npm:^1.0.1"
-    get-symbol-description: "npm:^1.1.0"
-    globalthis: "npm:^1.0.4"
-    gopd: "npm:^1.2.0"
-    has-property-descriptors: "npm:^1.0.2"
-    has-proto: "npm:^1.2.0"
-    has-symbols: "npm:^1.1.0"
-    hasown: "npm:^2.0.2"
-    internal-slot: "npm:^1.1.0"
-    is-array-buffer: "npm:^3.0.5"
-    is-callable: "npm:^1.2.7"
-    is-data-view: "npm:^1.0.2"
-    is-negative-zero: "npm:^2.0.3"
-    is-regex: "npm:^1.2.1"
-    is-set: "npm:^2.0.3"
-    is-shared-array-buffer: "npm:^1.0.4"
-    is-string: "npm:^1.1.1"
-    is-typed-array: "npm:^1.1.15"
-    is-weakref: "npm:^1.1.1"
-    math-intrinsics: "npm:^1.1.0"
-    object-inspect: "npm:^1.13.4"
-    object-keys: "npm:^1.1.1"
-    object.assign: "npm:^4.1.7"
-    own-keys: "npm:^1.0.1"
-    regexp.prototype.flags: "npm:^1.5.4"
-    safe-array-concat: "npm:^1.1.3"
-    safe-push-apply: "npm:^1.0.0"
-    safe-regex-test: "npm:^1.1.0"
-    set-proto: "npm:^1.0.0"
-    stop-iteration-iterator: "npm:^1.1.0"
-    string.prototype.trim: "npm:^1.2.10"
-    string.prototype.trimend: "npm:^1.0.9"
-    string.prototype.trimstart: "npm:^1.0.8"
-    typed-array-buffer: "npm:^1.0.3"
-    typed-array-byte-length: "npm:^1.0.3"
-    typed-array-byte-offset: "npm:^1.0.4"
-    typed-array-length: "npm:^1.0.7"
-    unbox-primitive: "npm:^1.1.0"
-    which-typed-array: "npm:^1.1.19"
-  checksum: 10/e2c97263d87b7faf65102d887074af421db7e48cd92b8b3cd308216cdd2547b647e8f61bf51429bdb13adc463bb7f421989544cbfd2e7f7469ef7a69ae8a4205
-  languageName: node
-  linkType: hard
-
-"es-define-property@npm:^1.0.0, es-define-property@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "es-define-property@npm:1.0.1"
-  checksum: 10/f8dc9e660d90919f11084db0a893128f3592b781ce967e4fccfb8f3106cb83e400a4032c559184ec52ee1dbd4b01e7776c7cd0b3327b1961b1a4a7008920fe78
-  languageName: node
-  linkType: hard
-
 "es-errors@npm:^1.3.0":
   version: 1.3.0
   resolution: "es-errors@npm:1.3.0"
@@ -4526,30 +4279,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"es-iterator-helpers@npm:^1.2.1":
-  version: 1.4.0
-  resolution: "es-iterator-helpers@npm:1.4.0"
-  dependencies:
-    call-bind: "npm:^1.0.9"
-    call-bound: "npm:^1.0.4"
-    define-properties: "npm:^1.2.1"
-    es-abstract: "npm:^1.24.2"
-    es-errors: "npm:^1.3.0"
-    es-set-tostringtag: "npm:^2.1.0"
-    function-bind: "npm:^1.1.2"
-    get-intrinsic: "npm:^1.3.0"
-    globalthis: "npm:^1.0.4"
-    gopd: "npm:^1.2.0"
-    has-property-descriptors: "npm:^1.0.2"
-    has-proto: "npm:^1.2.0"
-    has-symbols: "npm:^1.1.0"
-    internal-slot: "npm:^1.1.0"
-    iterator.prototype: "npm:^1.1.5"
-    math-intrinsics: "npm:^1.1.0"
-  checksum: 10/03b5c121e1672ba0022be49204fb36f042069864b14db85555cf8de6bc7cea6aaf283278f66d8c66d0d408b8590a3113af3426e2d750c5c962b5e5719b5dff2d
-  languageName: node
-  linkType: hard
-
 "es-module-lexer@npm:^1.5.4":
   version: 1.7.0
   resolution: "es-module-lexer@npm:1.7.0"
@@ -4564,50 +4293,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"es-object-atoms@npm:^1.0.0, es-object-atoms@npm:^1.1.1, es-object-atoms@npm:^1.1.2":
-  version: 1.1.2
-  resolution: "es-object-atoms@npm:1.1.2"
-  dependencies:
-    es-errors: "npm:^1.3.0"
-  checksum: 10/70041de72ab8996df74c17775cdedb8a0c36eb09a4111921d974f7d018af963023bb035a328b5772c2851daa40fb49f52313be0418763a975cb42cb6fe723255
-  languageName: node
-  linkType: hard
-
-"es-set-tostringtag@npm:^2.1.0":
-  version: 2.1.0
-  resolution: "es-set-tostringtag@npm:2.1.0"
-  dependencies:
-    es-errors: "npm:^1.3.0"
-    get-intrinsic: "npm:^1.2.6"
-    has-tostringtag: "npm:^1.0.2"
-    hasown: "npm:^2.0.2"
-  checksum: 10/86814bf8afbcd8966653f731415888019d4bc4aca6b6c354132a7a75bb87566751e320369654a101d23a91c87a85c79b178bcf40332839bd347aff437c4fb65f
-  languageName: node
-  linkType: hard
-
-"es-shim-unscopables@npm:^1.0.2, es-shim-unscopables@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "es-shim-unscopables@npm:1.1.0"
-  dependencies:
-    hasown: "npm:^2.0.2"
-  checksum: 10/c351f586c30bbabc62355be49564b2435468b52c3532b8a1663672e3d10dc300197e69c247869dd173e56d86423ab95fc0c10b0939cdae597094e0fdca078cba
-  languageName: node
-  linkType: hard
-
-"es-to-primitive@npm:^1.3.0":
-  version: 1.3.4
-  resolution: "es-to-primitive@npm:1.3.4"
-  dependencies:
-    es-abstract-get: "npm:^1.0.0"
-    es-define-property: "npm:^1.0.1"
-    es-errors: "npm:^1.3.0"
-    is-callable: "npm:^1.2.7"
-    is-date-object: "npm:^1.1.0"
-    is-symbol: "npm:^1.1.1"
-  checksum: 10/7a68d778c06de7de960682c57f4103259ca3cb6dc720b8908a027b04bf1216ae4c1688a8999443f871f03efaf8ec7c24b28f33892e2a553c2a4e3bc6bd0e276a
-  languageName: node
-  linkType: hard
-
 "esbuild@npm:^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0 || ^0.25.0 || ^0.26.0 || ^0.27.0 || ^0.28.0":
   version: 0.28.2
   resolution: "esbuild@npm:0.28.2"
@@ -4722,58 +4407,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-import-resolver-node@npm:^0.3.9":
-  version: 0.3.10
-  resolution: "eslint-import-resolver-node@npm:0.3.10"
-  dependencies:
-    debug: "npm:^3.2.7"
-    is-core-module: "npm:^2.16.1"
-    resolve: "npm:^2.0.0-next.6"
-  checksum: 10/f0ad564d345fc53076b46f726b6f9ba96a40d1b7cb33d515ea89d41d1dba37db4ff9b864550608756c2ba061c9e243bf10b920d975848616d0c6c4474f4ea415
-  languageName: node
-  linkType: hard
-
-"eslint-module-utils@npm:^2.12.1":
-  version: 2.14.0
-  resolution: "eslint-module-utils@npm:2.14.0"
-  dependencies:
-    debug: "npm:^3.2.7"
-  peerDependenciesMeta:
-    eslint:
-      optional: true
-  checksum: 10/78e508bc522717e756bcd1d84956ce43a5326cbb454c69b8fc1b4006c70b3d8bf93de61b389c32d76cf1e2fe1dcf035261445ed5b3f22b14338c73685de11c80
-  languageName: node
-  linkType: hard
-
-"eslint-plugin-import@npm:^2.32.0":
-  version: 2.32.0
-  resolution: "eslint-plugin-import@npm:2.32.0"
-  dependencies:
-    "@rtsao/scc": "npm:^1.1.0"
-    array-includes: "npm:^3.1.9"
-    array.prototype.findlastindex: "npm:^1.2.6"
-    array.prototype.flat: "npm:^1.3.3"
-    array.prototype.flatmap: "npm:^1.3.3"
-    debug: "npm:^3.2.7"
-    doctrine: "npm:^2.1.0"
-    eslint-import-resolver-node: "npm:^0.3.9"
-    eslint-module-utils: "npm:^2.12.1"
-    hasown: "npm:^2.0.2"
-    is-core-module: "npm:^2.16.1"
-    is-glob: "npm:^4.0.3"
-    minimatch: "npm:^3.1.2"
-    object.fromentries: "npm:^2.0.8"
-    object.groupby: "npm:^1.0.3"
-    object.values: "npm:^1.2.1"
-    semver: "npm:^6.3.1"
-    string.prototype.trimend: "npm:^1.0.9"
-    tsconfig-paths: "npm:^3.15.0"
-  peerDependencies:
-    eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8 || ^9
-  checksum: 10/1bacf4967e9ebf99e12176a795f0d6d3a87d1c9a030c2207f27b267e10d96a1220be2647504c7fc13ab543cdf13ffef4b8f5620e0447032dba4ff0d3922f7c9e
-  languageName: node
-  linkType: hard
-
 "eslint-plugin-no-null@npm:^1.0.2":
   version: 1.0.2
   resolution: "eslint-plugin-no-null@npm:1.0.2"
@@ -4803,31 +4436,122 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-plugin-react@npm:^7.37.5":
-  version: 7.37.5
-  resolution: "eslint-plugin-react@npm:7.37.5"
-  dependencies:
-    array-includes: "npm:^3.1.8"
-    array.prototype.findlast: "npm:^1.2.5"
-    array.prototype.flatmap: "npm:^1.3.3"
-    array.prototype.tosorted: "npm:^1.1.4"
-    doctrine: "npm:^2.1.0"
-    es-iterator-helpers: "npm:^1.2.1"
-    estraverse: "npm:^5.3.0"
-    hasown: "npm:^2.0.2"
-    jsx-ast-utils: "npm:^2.4.1 || ^3.0.0"
-    minimatch: "npm:^3.1.2"
-    object.entries: "npm:^1.1.9"
-    object.fromentries: "npm:^2.0.8"
-    object.values: "npm:^1.2.1"
-    prop-types: "npm:^15.8.1"
-    resolve: "npm:^2.0.0-next.5"
-    semver: "npm:^6.3.1"
-    string.prototype.matchall: "npm:^4.0.12"
-    string.prototype.repeat: "npm:^1.0.0"
+"eslint-plugin-react-dom@npm:5.18.6":
+  version: 5.18.6
+  resolution: "eslint-plugin-react-dom@npm:5.18.6"
+  dependencies:
+    "@eslint-react/ast": "npm:5.18.6"
+    "@eslint-react/eslint": "npm:5.18.6"
+    "@eslint-react/jsx": "npm:5.18.6"
+    "@eslint-react/shared": "npm:5.18.6"
+    "@typescript-eslint/types": "npm:^8.67.0"
+    "@typescript-eslint/utils": "npm:^8.67.0"
+    compare-versions: "npm:^6.1.1"
+  peerDependencies:
+    eslint: "*"
+    typescript: "*"
+  checksum: 10/caea961ed9816a8c8521037ba80e5fd970c72d4f362ecffffcdffe98fa29c074d00782e15c3490232505218f4ea8317cc94fce2591085dd933096b7fcfb52c88
+  languageName: node
+  linkType: hard
+
+"eslint-plugin-react-jsx@npm:5.18.6":
+  version: 5.18.6
+  resolution: "eslint-plugin-react-jsx@npm:5.18.6"
+  dependencies:
+    "@eslint-react/ast": "npm:5.18.6"
+    "@eslint-react/core": "npm:5.18.6"
+    "@eslint-react/eslint": "npm:5.18.6"
+    "@eslint-react/jsx": "npm:5.18.6"
+    "@eslint-react/shared": "npm:5.18.6"
+    "@typescript-eslint/types": "npm:^8.67.0"
+    "@typescript-eslint/utils": "npm:^8.67.0"
+  peerDependencies:
+    eslint: "*"
+    typescript: "*"
+  checksum: 10/567fc84e0f0e1916cdfc413dfd623e3f9aad24058e1a783ef8af01d730740d1cf60bcfc0f47ee0b4f402bb642d9d8c9b5f22396d64ff50be39747f43ae2a5bfc
+  languageName: node
+  linkType: hard
+
+"eslint-plugin-react-naming-convention@npm:5.18.6":
+  version: 5.18.6
+  resolution: "eslint-plugin-react-naming-convention@npm:5.18.6"
+  dependencies:
+    "@eslint-react/ast": "npm:5.18.6"
+    "@eslint-react/core": "npm:5.18.6"
+    "@eslint-react/eslint": "npm:5.18.6"
+    "@eslint-react/shared": "npm:5.18.6"
+    "@eslint-react/var": "npm:5.18.6"
+    "@typescript-eslint/types": "npm:^8.67.0"
+    "@typescript-eslint/utils": "npm:^8.67.0"
+    ts-pattern: "npm:^5.9.0"
+  peerDependencies:
+    eslint: "*"
+    typescript: "*"
+  checksum: 10/bd67bc83ab3f1901e23c84223cfdeaa3e0e829f5cc0b194e3d3baefcf2b89202ad1929c4080b30f1308c10b117eb10ec2684d7538957ae1a8a03eff263a10024
+  languageName: node
+  linkType: hard
+
+"eslint-plugin-react-rsc@npm:5.18.6":
+  version: 5.18.6
+  resolution: "eslint-plugin-react-rsc@npm:5.18.6"
+  dependencies:
+    "@eslint-react/ast": "npm:5.18.6"
+    "@eslint-react/core": "npm:5.18.6"
+    "@eslint-react/eslint": "npm:5.18.6"
+    "@eslint-react/shared": "npm:5.18.6"
+    "@eslint-react/var": "npm:5.18.6"
+    "@typescript-eslint/types": "npm:^8.67.0"
+    "@typescript-eslint/utils": "npm:^8.67.0"
+  peerDependencies:
+    eslint: "*"
+    typescript: "*"
+  checksum: 10/9bec36914eb41fac478c8acf82a7a2229a4a78962eaf89f1be9034734749166126b5cfb486a9b8dc55fb2dd14e7a6a7d9281c01620dfcc4d2a22e5d72729c4f4
+  languageName: node
+  linkType: hard
+
+"eslint-plugin-react-web-api@npm:5.18.6":
+  version: 5.18.6
+  resolution: "eslint-plugin-react-web-api@npm:5.18.6"
+  dependencies:
+    "@eslint-react/ast": "npm:5.18.6"
+    "@eslint-react/core": "npm:5.18.6"
+    "@eslint-react/eslint": "npm:5.18.6"
+    "@eslint-react/shared": "npm:5.18.6"
+    "@eslint-react/var": "npm:5.18.6"
+    "@typescript-eslint/types": "npm:^8.67.0"
+    "@typescript-eslint/utils": "npm:^8.67.0"
+    birecord: "npm:^0.1.2"
+    ts-pattern: "npm:^5.9.0"
+  peerDependencies:
+    eslint: "*"
+    typescript: "*"
+  checksum: 10/b45be6108339f301975499e53166d16c86877a5364cc79b2a094fe3e1ab852c1ff4aec0b9ed6bae852a229b16a8349aec6d487fff4675ac5b37dce05c2a2669c
+  languageName: node
+  linkType: hard
+
+"eslint-plugin-react-x@npm:5.18.6":
+  version: 5.18.6
+  resolution: "eslint-plugin-react-x@npm:5.18.6"
+  dependencies:
+    "@eslint-react/ast": "npm:5.18.6"
+    "@eslint-react/core": "npm:5.18.6"
+    "@eslint-react/eslint": "npm:5.18.6"
+    "@eslint-react/jsx": "npm:5.18.6"
+    "@eslint-react/shared": "npm:5.18.6"
+    "@eslint-react/var": "npm:5.18.6"
+    "@typescript-eslint/scope-manager": "npm:^8.67.0"
+    "@typescript-eslint/type-utils": "npm:^8.67.0"
+    "@typescript-eslint/types": "npm:^8.67.0"
+    "@typescript-eslint/typescript-estree": "npm:^8.67.0"
+    "@typescript-eslint/utils": "npm:^8.67.0"
+    compare-versions: "npm:^6.1.1"
+    string-ts: "npm:^2.3.1"
+    ts-api-utils: "npm:^2.5.0"
+    ts-pattern: "npm:^5.9.0"
   peerDependencies:
-    eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7
-  checksum: 10/ee1bd4e0ec64f29109d5a625bb703d179c82e0159c86c3f1b52fc1209d2994625a137dae303c333fb308a2e38315e44066d5204998177e31974382f9fda25d5c
+    eslint: "*"
+    typescript: "*"
+  checksum: 10/0e5fd113f31aa031af0cef78cbf635addad3afea5c71790e7a668a5de64f9cbbe9f7ab9faef7712a2469bcf50fa6da71a3291f0f26ff5bf95d9094a2f5d5de69
   languageName: node
   linkType: hard
 
@@ -4850,13 +4574,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-visitor-keys@npm:^4.2.1":
-  version: 4.2.1
-  resolution: "eslint-visitor-keys@npm:4.2.1"
-  checksum: 10/3ee00fc6a7002d4b0ffd9dc99e13a6a7882c557329e6c25ab254220d71e5c9c4f89dca4695352949ea678eb1f3ba912a18ef8aac0a7fe094196fd92f441bfce2
-  languageName: node
-  linkType: hard
-
 "eslint-visitor-keys@npm:^5.0.0, eslint-visitor-keys@npm:^5.0.1":
   version: 5.0.1
   resolution: "eslint-visitor-keys@npm:5.0.1"
@@ -4909,17 +4626,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"espree@npm:^10.0.1":
-  version: 10.4.0
-  resolution: "espree@npm:10.4.0"
-  dependencies:
-    acorn: "npm:^8.15.0"
-    acorn-jsx: "npm:^5.3.2"
-    eslint-visitor-keys: "npm:^4.2.1"
-  checksum: 10/9b355b32dbd1cc9f57121d5ee3be258fab87ebeb7c83fc6c02e5af1a74fc8c5ba79fe8c663e69ea112c3e84a1b95e6a2067ac4443ee7813bb85ac7581acb8bf9
-  languageName: node
-  linkType: hard
-
 "espree@npm:^11.2.0":
   version: 11.2.0
   resolution: "espree@npm:11.2.0"
@@ -4959,7 +4665,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"estraverse@npm:^5.1.0, estraverse@npm:^5.2.0, estraverse@npm:^5.3.0":
+"estraverse@npm:^5.1.0, estraverse@npm:^5.2.0":
   version: 5.3.0
   resolution: "estraverse@npm:5.3.0"
   checksum: 10/37cbe6e9a68014d34dbdc039f90d0baf72436809d02edffcc06ba3c2a12eb298048f877511353b130153e532aac8d68ba78430c0dd2f44806ebc7c014b01585e
@@ -5133,15 +4839,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"for-each@npm:^0.3.3, for-each@npm:^0.3.5":
-  version: 0.3.5
-  resolution: "for-each@npm:0.3.5"
-  dependencies:
-    is-callable: "npm:^1.2.7"
-  checksum: 10/330cc2439f85c94f4609de3ee1d32c5693ae15cdd7fe3d112c4fd9efd4ce7143f2c64ef6c2c9e0cfdb0058437f33ef05b5bdae5b98fcc903fb2143fbaf0fea0f
-  languageName: node
-  linkType: hard
-
 "foreground-child@npm:^3.1.0":
   version: 3.3.1
   resolution: "foreground-child@npm:3.3.1"
@@ -5223,37 +4920,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"function.prototype.name@npm:^1.1.6, function.prototype.name@npm:^1.1.8":
-  version: 1.2.0
-  resolution: "function.prototype.name@npm:1.2.0"
-  dependencies:
-    call-bind: "npm:^1.0.9"
-    call-bound: "npm:^1.0.4"
-    es-define-property: "npm:^1.0.1"
-    es-errors: "npm:^1.3.0"
-    functions-have-names: "npm:^1.2.3"
-    has-property-descriptors: "npm:^1.0.2"
-    hasown: "npm:^2.0.4"
-    is-callable: "npm:^1.2.7"
-    is-document.all: "npm:^1.0.0"
-  checksum: 10/ad662230bc2b9e971625222b462142b34aa23c70ca58fb4fa72e226bb9106a5752be5c7d8986de7ce5cfb959e5317200d70d88d96359605a165ed1c8cb515223
-  languageName: node
-  linkType: hard
-
-"functions-have-names@npm:^1.2.3":
-  version: 1.2.3
-  resolution: "functions-have-names@npm:1.2.3"
-  checksum: 10/0ddfd3ed1066a55984aaecebf5419fbd9344a5c38dd120ffb0739fac4496758dcf371297440528b115e4367fc46e3abc86a2cc0ff44612181b175ae967a11a05
-  languageName: node
-  linkType: hard
-
-"generator-function@npm:^2.0.0":
-  version: 2.0.1
-  resolution: "generator-function@npm:2.0.1"
-  checksum: 10/eb7e7eb896c5433f3d40982b2ccacdb3dd990dd3499f14040e002b5d54572476513be8a2e6f9609f6e41ab29f2c4469307611ddbfc37ff4e46b765c326663805
-  languageName: node
-  linkType: hard
-
 "gensync@npm:^1.0.0-beta.2":
   version: 1.0.0-beta.2
   resolution: "gensync@npm:1.0.0-beta.2"
@@ -5268,48 +4934,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"get-intrinsic@npm:^1.2.4, get-intrinsic@npm:^1.2.5, get-intrinsic@npm:^1.2.6, get-intrinsic@npm:^1.2.7, get-intrinsic@npm:^1.3.0":
-  version: 1.3.1
-  resolution: "get-intrinsic@npm:1.3.1"
-  dependencies:
-    async-function: "npm:^1.0.0"
-    async-generator-function: "npm:^1.0.0"
-    call-bind-apply-helpers: "npm:^1.0.2"
-    es-define-property: "npm:^1.0.1"
-    es-errors: "npm:^1.3.0"
-    es-object-atoms: "npm:^1.1.1"
-    function-bind: "npm:^1.1.2"
-    generator-function: "npm:^2.0.0"
-    get-proto: "npm:^1.0.1"
-    gopd: "npm:^1.2.0"
-    has-symbols: "npm:^1.1.0"
-    hasown: "npm:^2.0.2"
-    math-intrinsics: "npm:^1.1.0"
-  checksum: 10/bb579dda84caa4a3a41611bdd483dade7f00f246f2a7992eb143c5861155290df3fdb48a8406efa3dfb0b434e2c8fafa4eebd469e409d0439247f85fc3fa2cc1
-  languageName: node
-  linkType: hard
-
-"get-proto@npm:^1.0.0, get-proto@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "get-proto@npm:1.0.1"
-  dependencies:
-    dunder-proto: "npm:^1.0.1"
-    es-object-atoms: "npm:^1.0.0"
-  checksum: 10/4fc96afdb58ced9a67558698b91433e6b037aaa6f1493af77498d7c85b141382cf223c0e5946f334fb328ee85dfe6edd06d218eaf09556f4bc4ec6005d7f5f7b
-  languageName: node
-  linkType: hard
-
-"get-symbol-description@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "get-symbol-description@npm:1.1.0"
-  dependencies:
-    call-bound: "npm:^1.0.3"
-    es-errors: "npm:^1.3.0"
-    get-intrinsic: "npm:^1.2.6"
-  checksum: 10/a353e3a9595a74720b40fb5bae3ba4a4f826e186e83814d93375182384265676f59e49998b9cdfac4a2225ce95a3d32a68f502a2c5619303987f1c183ab80494
-  languageName: node
-  linkType: hard
-
 "gifuct-js@npm:^2.1.2":
   version: 2.1.2
   resolution: "gifuct-js@npm:2.1.2"
@@ -5364,13 +4988,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"globals@npm:^14.0.0":
-  version: 14.0.0
-  resolution: "globals@npm:14.0.0"
-  checksum: 10/03939c8af95c6df5014b137cac83aa909090c3a3985caef06ee9a5a669790877af8698ab38007e4c0186873adc14c0b13764acc754b16a754c216cc56aa5f021
-  languageName: node
-  linkType: hard
-
 "globals@npm:^17.11.0":
   version: 17.11.0
   resolution: "globals@npm:17.11.0"
@@ -5378,16 +4995,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"globalthis@npm:^1.0.4":
-  version: 1.0.4
-  resolution: "globalthis@npm:1.0.4"
-  dependencies:
-    define-properties: "npm:^1.2.1"
-    gopd: "npm:^1.0.1"
-  checksum: 10/1f1fd078fb2f7296306ef9dd51019491044ccf17a59ed49d375b576ca108ff37e47f3d29aead7add40763574a992f16a5367dd1e2173b8634ef18556ab719ac4
-  languageName: node
-  linkType: hard
-
 "globrex@npm:^0.1.2":
   version: 0.1.2
   resolution: "globrex@npm:0.1.2"
@@ -5395,13 +5002,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"gopd@npm:^1.0.1, gopd@npm:^1.2.0":
-  version: 1.2.0
-  resolution: "gopd@npm:1.2.0"
-  checksum: 10/94e296d69f92dc1c0768fcfeecfb3855582ab59a7c75e969d5f96ce50c3d201fd86d5a2857c22565764d5bb8a816c7b1e58f133ec318cd56274da36c5e3fb1a1
-  languageName: node
-  linkType: hard
-
 "graceful-fs@npm:^4.2.4, graceful-fs@npm:^4.2.6":
   version: 4.2.11
   resolution: "graceful-fs@npm:4.2.11"
@@ -5409,13 +5009,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"has-bigints@npm:^1.0.2":
-  version: 1.1.0
-  resolution: "has-bigints@npm:1.1.0"
-  checksum: 10/90fb1b24d40d2472bcd1c8bd9dd479037ec240215869bdbff97b2be83acef57d28f7e96bdd003a21bed218d058b49097f4acc8821c05b1629cc5d48dd7bfcccd
-  languageName: node
-  linkType: hard
-
 "has-flag@npm:^4.0.0":
   version: 4.0.0
   resolution: "has-flag@npm:4.0.0"
@@ -5423,41 +5016,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"has-property-descriptors@npm:^1.0.0, has-property-descriptors@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "has-property-descriptors@npm:1.0.2"
-  dependencies:
-    es-define-property: "npm:^1.0.0"
-  checksum: 10/2d8c9ab8cebb572e3362f7d06139a4592105983d4317e68f7adba320fe6ddfc8874581e0971e899e633fd5f72e262830edce36d5a0bc863dad17ad20572484b2
-  languageName: node
-  linkType: hard
-
-"has-proto@npm:^1.2.0":
-  version: 1.2.0
-  resolution: "has-proto@npm:1.2.0"
-  dependencies:
-    dunder-proto: "npm:^1.0.0"
-  checksum: 10/7eaed07728eaa28b77fadccabce53f30de467ff186a766872669a833ac2e87d8922b76a22cc58339d7e0277aefe98d6d00762113b27a97cdf65adcf958970935
-  languageName: node
-  linkType: hard
-
-"has-symbols@npm:^1.0.3, has-symbols@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "has-symbols@npm:1.1.0"
-  checksum: 10/959385c98696ebbca51e7534e0dc723ada325efa3475350951363cce216d27373e0259b63edb599f72eb94d6cde8577b4b2375f080b303947e560f85692834fa
-  languageName: node
-  linkType: hard
-
-"has-tostringtag@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "has-tostringtag@npm:1.0.2"
-  dependencies:
-    has-symbols: "npm:^1.0.3"
-  checksum: 10/c74c5f5ceee3c8a5b8bc37719840dc3749f5b0306d818974141dda2471a1a2ca6c8e46b9d6ac222c5345df7a901c9b6f350b1e6d62763fec877e26609a401bfe
-  languageName: node
-  linkType: hard
-
-"hasown@npm:^2.0.2, hasown@npm:^2.0.3, hasown@npm:^2.0.4":
+"hasown@npm:^2.0.3":
   version: 2.0.4
   resolution: "hasown@npm:2.0.4"
   dependencies:
@@ -5538,28 +5097,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"internal-slot@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "internal-slot@npm:1.1.0"
-  dependencies:
-    es-errors: "npm:^1.3.0"
-    hasown: "npm:^2.0.2"
-    side-channel: "npm:^1.1.0"
-  checksum: 10/1d5219273a3dab61b165eddf358815eefc463207db33c20fcfca54717da02e3f492003757721f972fd0bf21e4b426cab389c5427b99ceea4b8b670dc88ee6d4a
-  languageName: node
-  linkType: hard
-
-"is-array-buffer@npm:^3.0.4, is-array-buffer@npm:^3.0.5":
-  version: 3.0.5
-  resolution: "is-array-buffer@npm:3.0.5"
-  dependencies:
-    call-bind: "npm:^1.0.8"
-    call-bound: "npm:^1.0.3"
-    get-intrinsic: "npm:^1.2.6"
-  checksum: 10/ef1095c55b963cd0dcf6f88a113e44a0aeca91e30d767c475e7d746d28d1195b10c5076b94491a7a0cd85020ca6a4923070021d74651d093dc909e9932cf689b
-  languageName: node
-  linkType: hard
-
 "is-arrayish@npm:^0.2.1":
   version: 0.2.1
   resolution: "is-arrayish@npm:0.2.1"
@@ -5567,46 +5104,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-async-function@npm:^2.0.0":
-  version: 2.1.1
-  resolution: "is-async-function@npm:2.1.1"
-  dependencies:
-    async-function: "npm:^1.0.0"
-    call-bound: "npm:^1.0.3"
-    get-proto: "npm:^1.0.1"
-    has-tostringtag: "npm:^1.0.2"
-    safe-regex-test: "npm:^1.1.0"
-  checksum: 10/7c2ac7efdf671e03265e74a043bcb1c0a32e226bc2a42dfc5ec8644667df668bbe14b91c08e6c1414f392f8cf86cd1d489b3af97756e2c7a49dd1ba63fd40ca6
-  languageName: node
-  linkType: hard
-
-"is-bigint@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "is-bigint@npm:1.1.0"
-  dependencies:
-    has-bigints: "npm:^1.0.2"
-  checksum: 10/10cf327310d712fe227cfaa32d8b11814c214392b6ac18c827f157e1e85363cf9c8e2a22df526689bd5d25e53b58cc110894787afb54e138e7c504174dba15fd
-  languageName: node
-  linkType: hard
-
-"is-boolean-object@npm:^1.2.1":
-  version: 1.2.2
-  resolution: "is-boolean-object@npm:1.2.2"
-  dependencies:
-    call-bound: "npm:^1.0.3"
-    has-tostringtag: "npm:^1.0.2"
-  checksum: 10/051fa95fdb99d7fbf653165a7e6b2cba5d2eb62f7ffa81e793a790f3fb5366c91c1b7b6af6820aa2937dd86c73aa3ca9d9ca98f500988457b1c59692c52ba911
-  languageName: node
-  linkType: hard
-
-"is-callable@npm:^1.2.7":
-  version: 1.2.7
-  resolution: "is-callable@npm:1.2.7"
-  checksum: 10/48a9297fb92c99e9df48706241a189da362bff3003354aea4048bd5f7b2eb0d823cd16d0a383cece3d76166ba16d85d9659165ac6fcce1ac12e6c649d66dbdb9
-  languageName: node
-  linkType: hard
-
-"is-core-module@npm:^2.16.1, is-core-module@npm:^2.16.2":
+"is-core-module@npm:^2.16.1":
   version: 2.16.2
   resolution: "is-core-module@npm:2.16.2"
   dependencies:
@@ -5615,27 +5113,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-data-view@npm:^1.0.1, is-data-view@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "is-data-view@npm:1.0.2"
-  dependencies:
-    call-bound: "npm:^1.0.2"
-    get-intrinsic: "npm:^1.2.6"
-    is-typed-array: "npm:^1.1.13"
-  checksum: 10/357e9a48fa38f369fd6c4c3b632a3ab2b8adca14997db2e4b3fe94c4cd0a709af48e0fb61b02c64a90c0dd542fd489d49c2d03157b05ae6c07f5e4dec9e730a8
-  languageName: node
-  linkType: hard
-
-"is-date-object@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "is-date-object@npm:1.1.0"
-  dependencies:
-    call-bound: "npm:^1.0.2"
-    has-tostringtag: "npm:^1.0.2"
-  checksum: 10/3a811b2c3176fb31abee1d23d3dc78b6c65fd9c07d591fcb67553cab9e7f272728c3dd077d2d738b53f9a2103255b0a6e8dfc9568a7805c56a78b2563e8d1dec
-  languageName: node
-  linkType: hard
-
 "is-docker@npm:^3.0.0":
   version: 3.0.0
   resolution: "is-docker@npm:3.0.0"
@@ -5645,15 +5122,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-document.all@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "is-document.all@npm:1.0.0"
-  dependencies:
-    call-bound: "npm:^1.0.4"
-  checksum: 10/c76fa391105f180e9d34bf219ab1db325b4f883d2d82c789dbf9a628e4213c97411f038f36b7d096d85f5ddc1fda6e22e9d8d7c65b89ad1ee5d4d1e5a2a4c077
-  languageName: node
-  linkType: hard
-
 "is-extglob@npm:^2.1.1":
   version: 2.1.1
   resolution: "is-extglob@npm:2.1.1"
@@ -5661,15 +5129,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-finalizationregistry@npm:^1.1.0":
-  version: 1.1.1
-  resolution: "is-finalizationregistry@npm:1.1.1"
-  dependencies:
-    call-bound: "npm:^1.0.3"
-  checksum: 10/0bfb145e9a1ba852ddde423b0926d2169ae5fe9e37882cde9e8f69031281a986308df4d982283e152396e88b86562ed2256cbaa5e6390fb840a4c25ab54b8a80
-  languageName: node
-  linkType: hard
-
 "is-fullwidth-code-point@npm:^3.0.0":
   version: 3.0.0
   resolution: "is-fullwidth-code-point@npm:3.0.0"
@@ -5677,19 +5136,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-generator-function@npm:^1.0.10":
-  version: 1.1.2
-  resolution: "is-generator-function@npm:1.1.2"
-  dependencies:
-    call-bound: "npm:^1.0.4"
-    generator-function: "npm:^2.0.0"
-    get-proto: "npm:^1.0.1"
-    has-tostringtag: "npm:^1.0.2"
-    safe-regex-test: "npm:^1.1.0"
-  checksum: 10/cc50fa01034356bdfda26983c5457103240f201f4663c0de1257802714e40d36bcff7aee21091d37bbba4be962fa5c6475ce7ddbc0abfa86d6bef466e41e50a5
-  languageName: node
-  linkType: hard
-
 "is-glob@npm:^4.0.0, is-glob@npm:^4.0.1, is-glob@npm:^4.0.3":
   version: 4.0.3
   resolution: "is-glob@npm:4.0.3"
@@ -5710,13 +5156,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-map@npm:^2.0.3":
-  version: 2.0.3
-  resolution: "is-map@npm:2.0.3"
-  checksum: 10/8de7b41715b08bcb0e5edb0fb9384b80d2d5bcd10e142188f33247d19ff078abaf8e9b6f858e2302d8d05376a26a55cd23a3c9f8ab93292b02fcd2cc9e4e92bb
-  languageName: node
-  linkType: hard
-
 "is-module@npm:^1.0.0":
   version: 1.0.0
   resolution: "is-module@npm:1.0.0"
@@ -5724,23 +5163,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-negative-zero@npm:^2.0.3":
-  version: 2.0.3
-  resolution: "is-negative-zero@npm:2.0.3"
-  checksum: 10/8fe5cffd8d4fb2ec7b49d657e1691889778d037494c6f40f4d1a524cadd658b4b53ad7b6b73a59bcb4b143ae9a3d15829af864b2c0f9d65ac1e678c4c80f17e5
-  languageName: node
-  linkType: hard
-
-"is-number-object@npm:^1.1.1":
-  version: 1.1.1
-  resolution: "is-number-object@npm:1.1.1"
-  dependencies:
-    call-bound: "npm:^1.0.3"
-    has-tostringtag: "npm:^1.0.2"
-  checksum: 10/a5922fb8779ab1ea3b8a9c144522b3d0bea5d9f8f23f7a72470e61e1e4df47714e28e0154ac011998b709cce260c3c9447ad3cd24a96c2f2a0abfdb2cbdc76c8
-  languageName: node
-  linkType: hard
-
 "is-number@npm:^7.0.0":
   version: 7.0.0
   resolution: "is-number@npm:7.0.0"
@@ -5769,64 +5191,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-regex@npm:^1.2.1":
-  version: 1.2.1
-  resolution: "is-regex@npm:1.2.1"
-  dependencies:
-    call-bound: "npm:^1.0.2"
-    gopd: "npm:^1.2.0"
-    has-tostringtag: "npm:^1.0.2"
-    hasown: "npm:^2.0.2"
-  checksum: 10/c42b7efc5868a5c9a4d8e6d3e9816e8815c611b09535c00fead18a1138455c5cb5e1887f0023a467ad3f9c419d62ba4dc3d9ba8bafe55053914d6d6454a945d2
-  languageName: node
-  linkType: hard
-
-"is-set@npm:^2.0.3":
-  version: 2.0.3
-  resolution: "is-set@npm:2.0.3"
-  checksum: 10/5685df33f0a4a6098a98c72d94d67cad81b2bc72f1fb2091f3d9283c4a1c582123cd709145b02a9745f0ce6b41e3e43f1c944496d1d74d4ea43358be61308669
-  languageName: node
-  linkType: hard
-
-"is-shared-array-buffer@npm:^1.0.4":
-  version: 1.0.4
-  resolution: "is-shared-array-buffer@npm:1.0.4"
-  dependencies:
-    call-bound: "npm:^1.0.3"
-  checksum: 10/0380d7c60cc692856871526ffcd38a8133818a2ee42d47bb8008248a0cd2121d8c8b5f66b6da3cac24bc5784553cacb6faaf678f66bc88c6615b42af2825230e
-  languageName: node
-  linkType: hard
-
-"is-string@npm:^1.1.1":
-  version: 1.1.1
-  resolution: "is-string@npm:1.1.1"
-  dependencies:
-    call-bound: "npm:^1.0.3"
-    has-tostringtag: "npm:^1.0.2"
-  checksum: 10/5277cb9e225a7cc8a368a72623b44a99f2cfa139659c6b203553540681ad4276bfc078420767aad0e73eef5f0bd07d4abf39a35d37ec216917879d11cebc1f8b
-  languageName: node
-  linkType: hard
-
-"is-symbol@npm:^1.1.1":
-  version: 1.1.1
-  resolution: "is-symbol@npm:1.1.1"
-  dependencies:
-    call-bound: "npm:^1.0.2"
-    has-symbols: "npm:^1.1.0"
-    safe-regex-test: "npm:^1.1.0"
-  checksum: 10/db495c0d8cd0a7a66b4f4ef7fccee3ab5bd954cb63396e8ac4d32efe0e9b12fdfceb851d6c501216a71f4f21e5ff20fc2ee845a3d52d455e021c466ac5eb2db2
-  languageName: node
-  linkType: hard
-
-"is-typed-array@npm:^1.1.13, is-typed-array@npm:^1.1.14, is-typed-array@npm:^1.1.15":
-  version: 1.1.15
-  resolution: "is-typed-array@npm:1.1.15"
-  dependencies:
-    which-typed-array: "npm:^1.1.16"
-  checksum: 10/e8cf60b9ea85667097a6ad68c209c9722cfe8c8edf04d6218366469e51944c5cc25bae45ffb845c23f811d262e4314d3b0168748eb16711aa34d12724cdf0735
-  languageName: node
-  linkType: hard
-
 "is-unicode-supported@npm:^0.1.0":
   version: 0.1.0
   resolution: "is-unicode-supported@npm:0.1.0"
@@ -5834,32 +5198,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-weakmap@npm:^2.0.2":
-  version: 2.0.2
-  resolution: "is-weakmap@npm:2.0.2"
-  checksum: 10/a7b7e23206c542dcf2fa0abc483142731788771527e90e7e24f658c0833a0d91948a4f7b30d78f7a65255a48512e41a0288b778ba7fc396137515c12e201fd11
-  languageName: node
-  linkType: hard
-
-"is-weakref@npm:^1.0.2, is-weakref@npm:^1.1.1":
-  version: 1.1.1
-  resolution: "is-weakref@npm:1.1.1"
-  dependencies:
-    call-bound: "npm:^1.0.3"
-  checksum: 10/543506fd8259038b371bb083aac25b16cb4fd8b12fc58053aa3d45ac28dfd001cd5c6dffbba7aeea4213c74732d46b6cb2cfb5b412eed11f2db524f3f97d09a0
-  languageName: node
-  linkType: hard
-
-"is-weakset@npm:^2.0.3":
-  version: 2.0.4
-  resolution: "is-weakset@npm:2.0.4"
-  dependencies:
-    call-bound: "npm:^1.0.3"
-    get-intrinsic: "npm:^1.2.6"
-  checksum: 10/1d5e1d0179beeed3661125a6faa2e59bfb48afda06fc70db807f178aa0ebebc3758fb6358d76b3d528090d5ef85148c345dcfbf90839592fe293e3e5e82f2134
-  languageName: node
-  linkType: hard
-
 "is-wsl@npm:^3.1.0":
   version: 3.1.1
   resolution: "is-wsl@npm:3.1.1"
@@ -5869,13 +5207,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"isarray@npm:^2.0.5":
-  version: 2.0.5
-  resolution: "isarray@npm:2.0.5"
-  checksum: 10/1d8bc7911e13bb9f105b1b3e0b396c787a9e63046af0b8fe0ab1414488ab06b2b099b87a2d8a9e31d21c9a6fad773c7fc8b257c4880f2d957274479d28ca3414
-  languageName: node
-  linkType: hard
-
 "isexe@npm:^2.0.0":
   version: 2.0.0
   resolution: "isexe@npm:2.0.0"
@@ -5925,20 +5256,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"iterator.prototype@npm:^1.1.5":
-  version: 1.1.5
-  resolution: "iterator.prototype@npm:1.1.5"
-  dependencies:
-    define-data-property: "npm:^1.1.4"
-    es-object-atoms: "npm:^1.0.0"
-    get-intrinsic: "npm:^1.2.6"
-    get-proto: "npm:^1.0.0"
-    has-symbols: "npm:^1.1.0"
-    set-function-name: "npm:^2.0.2"
-  checksum: 10/352bcf333f42189e65cc8cb2dcb94a5c47cf0a9110ce12aba788d405a980b5f5f3a06c79bf915377e1d480647169babd842ded0d898bed181bf6686e8e6823f6
-  languageName: node
-  linkType: hard
-
 "jackspeak@npm:^3.1.2":
   version: 3.4.3
   resolution: "jackspeak@npm:3.4.3"
@@ -5982,7 +5299,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"js-yaml@npm:^4.1.0, js-yaml@npm:^4.3.0":
+"js-yaml@npm:^4.1.0":
   version: 4.3.2
   resolution: "js-yaml@npm:4.3.2"
   dependencies:
@@ -6064,17 +5381,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"json5@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "json5@npm:1.0.2"
-  dependencies:
-    minimist: "npm:^1.2.0"
-  bin:
-    json5: lib/cli.js
-  checksum: 10/a78d812dbbd5642c4f637dd130954acfd231b074965871c3e28a5bbd571f099d623ecf9161f1960c4ddf68e0cc98dee8bebfdb94a71ad4551f85a1afc94b63f6
-  languageName: node
-  linkType: hard
-
 "json5@npm:^2.2.2, json5@npm:^2.2.3":
   version: 2.2.3
   resolution: "json5@npm:2.2.3"
@@ -6091,18 +5397,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jsx-ast-utils@npm:^2.4.1 || ^3.0.0":
-  version: 3.3.5
-  resolution: "jsx-ast-utils@npm:3.3.5"
-  dependencies:
-    array-includes: "npm:^3.1.6"
-    array.prototype.flat: "npm:^1.3.1"
-    object.assign: "npm:^4.1.4"
-    object.values: "npm:^1.1.6"
-  checksum: 10/b61d44613687dfe4cc8ad4b4fbf3711bf26c60b8d5ed1f494d723e0808415c59b24a7c0ed8ab10736a40ff84eef38cbbfb68b395e05d31117b44ffc59d31edfc
-  languageName: node
-  linkType: hard
-
 "keyv@npm:^4.5.4":
   version: 4.5.4
   resolution: "keyv@npm:4.5.4"
@@ -6488,13 +5782,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"math-intrinsics@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "math-intrinsics@npm:1.1.0"
-  checksum: 10/11df2eda46d092a6035479632e1ec865b8134bdfc4bd9e571a656f4191525404f13a283a515938c3a8de934dbfd9c09674d9da9fa831e6eb7e22b50b197d2edd
-  languageName: node
-  linkType: hard
-
 "mdn-data@npm:2.27.1":
   version: 2.27.1
   resolution: "mdn-data@npm:2.27.1"
@@ -6535,15 +5822,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minimatch@npm:^3.1.2, minimatch@npm:^3.1.5":
-  version: 3.1.5
-  resolution: "minimatch@npm:3.1.5"
-  dependencies:
-    brace-expansion: "npm:^1.1.7"
-  checksum: 10/b11a7ee5773cd34c1a0c8436cdbe910901018fb4b6cb47aa508a18d567f6efd2148507959e35fba798389b161b8604a2d704ccef751ea36bd4582f9852b7d63f
-  languageName: node
-  linkType: hard
-
 "minimatch@npm:^9.0.4, minimatch@npm:^9.0.5":
   version: 9.0.9
   resolution: "minimatch@npm:9.0.9"
@@ -6553,7 +5831,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minimist@npm:^1.2.0, minimist@npm:^1.2.6":
+"minimist@npm:^1.2.6":
   version: 1.2.8
   resolution: "minimist@npm:1.2.8"
   checksum: 10/908491b6cc15a6c440ba5b22780a0ba89b9810e1aea684e253e43c4e3b8d56ec1dcdd7ea96dde119c29df59c936cde16062159eae4225c691e19c70b432b6e6f
@@ -6638,7 +5916,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ms@npm:^2.1.1, ms@npm:^2.1.3":
+"ms@npm:^2.1.3":
   version: 2.1.3
   resolution: "ms@npm:2.1.3"
   checksum: 10/aa92de608021b242401676e35cfa5aa42dd70cbdc082b916da7fb925c542173e36bce97ea3e804923fe92c0ad991434e4a38327e15a1b5b5f945d66df615ae6d
@@ -6661,18 +5939,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"node-exports-info@npm:^1.6.0":
-  version: 1.6.2
-  resolution: "node-exports-info@npm:1.6.2"
-  dependencies:
-    array.prototype.flatmap: "npm:^1.3.3"
-    es-errors: "npm:^1.3.0"
-    object.entries: "npm:^1.1.9"
-    semver: "npm:^6.3.1"
-  checksum: 10/6c9593094b3dd9b8a338f31490c0bad6da886a964b1bc6d95416dfe83810d4ab3493e53290b951d131a3148bf529f33bd908302aa4fd57c45c7b3d55e2cff848
-  languageName: node
-  linkType: hard
-
 "node-gyp@npm:latest":
   version: 13.0.2
   resolution: "node-gyp@npm:13.0.2"
@@ -6728,81 +5994,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"object-inspect@npm:^1.13.3, object-inspect@npm:^1.13.4":
-  version: 1.13.4
-  resolution: "object-inspect@npm:1.13.4"
-  checksum: 10/aa13b1190ad3e366f6c83ad8a16ed37a19ed57d267385aa4bfdccda833d7b90465c057ff6c55d035a6b2e52c1a2295582b294217a0a3a1ae7abdd6877ef781fb
-  languageName: node
-  linkType: hard
-
-"object-keys@npm:^1.1.1":
-  version: 1.1.1
-  resolution: "object-keys@npm:1.1.1"
-  checksum: 10/3d81d02674115973df0b7117628ea4110d56042e5326413e4b4313f0bcdf7dd78d4a3acef2c831463fa3796a66762c49daef306f4a0ea1af44877d7086d73bde
-  languageName: node
-  linkType: hard
-
-"object.assign@npm:^4.1.4, object.assign@npm:^4.1.7":
-  version: 4.1.7
-  resolution: "object.assign@npm:4.1.7"
-  dependencies:
-    call-bind: "npm:^1.0.8"
-    call-bound: "npm:^1.0.3"
-    define-properties: "npm:^1.2.1"
-    es-object-atoms: "npm:^1.0.0"
-    has-symbols: "npm:^1.1.0"
-    object-keys: "npm:^1.1.1"
-  checksum: 10/3fe28cdd779f2a728a9a66bd688679ba231a2b16646cd1e46b528fe7c947494387dda4bc189eff3417f3717ef4f0a8f2439347cf9a9aa3cef722fbfd9f615587
-  languageName: node
-  linkType: hard
-
-"object.entries@npm:^1.1.9":
-  version: 1.1.9
-  resolution: "object.entries@npm:1.1.9"
-  dependencies:
-    call-bind: "npm:^1.0.8"
-    call-bound: "npm:^1.0.4"
-    define-properties: "npm:^1.2.1"
-    es-object-atoms: "npm:^1.1.1"
-  checksum: 10/24163ab1e1e013796693fc5f5d349e8b3ac0b6a34a7edb6c17d3dd45c6a8854145780c57d302a82512c1582f63720f4b4779d6c1cfba12cbb1420b978802d8a3
-  languageName: node
-  linkType: hard
-
-"object.fromentries@npm:^2.0.8":
-  version: 2.0.8
-  resolution: "object.fromentries@npm:2.0.8"
-  dependencies:
-    call-bind: "npm:^1.0.7"
-    define-properties: "npm:^1.2.1"
-    es-abstract: "npm:^1.23.2"
-    es-object-atoms: "npm:^1.0.0"
-  checksum: 10/5b2e80f7af1778b885e3d06aeb335dcc86965e39464671adb7167ab06ac3b0f5dd2e637a90d8ebd7426d69c6f135a4753ba3dd7d0fe2a7030cf718dcb910fd92
-  languageName: node
-  linkType: hard
-
-"object.groupby@npm:^1.0.3":
-  version: 1.0.3
-  resolution: "object.groupby@npm:1.0.3"
-  dependencies:
-    call-bind: "npm:^1.0.7"
-    define-properties: "npm:^1.2.1"
-    es-abstract: "npm:^1.23.2"
-  checksum: 10/44cb86dd2c660434be65f7585c54b62f0425b0c96b5c948d2756be253ef06737da7e68d7106e35506ce4a44d16aa85a413d11c5034eb7ce5579ec28752eb42d0
-  languageName: node
-  linkType: hard
-
-"object.values@npm:^1.1.6, object.values@npm:^1.2.1":
-  version: 1.2.1
-  resolution: "object.values@npm:1.2.1"
-  dependencies:
-    call-bind: "npm:^1.0.8"
-    call-bound: "npm:^1.0.3"
-    define-properties: "npm:^1.2.1"
-    es-object-atoms: "npm:^1.0.0"
-  checksum: 10/f5ec9eccdefeaaa834b089c525663436812a65ff13de7964a1c3a9110f32054f2d58aa476a645bb14f75a79f3fe1154fb3e7bfdae7ac1e80affe171b2ef74bce
-  languageName: node
-  linkType: hard
-
 "obug@npm:^2.1.1":
   version: 2.1.4
   resolution: "obug@npm:2.1.4"
@@ -6836,18 +6027,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"own-keys@npm:^1.0.1":
-  version: 1.0.2
-  resolution: "own-keys@npm:1.0.2"
-  dependencies:
-    call-bound: "npm:^1.0.4"
-    get-intrinsic: "npm:^1.3.0"
-    object-keys: "npm:^1.1.1"
-    safe-push-apply: "npm:^1.0.0"
-  checksum: 10/95add82ab823dfa5178c82d725b939eb1436b6a56ed2729dba31c7e2e03792d8e9ef504293959e9fda6f417d7133cb0ccdb96990c12f6d1e35b02dcbca408ac3
-  languageName: node
-  linkType: hard
-
 "oxc-parser@npm:^0.127.0":
   version: 0.127.0
   resolution: "oxc-parser@npm:0.127.0"
@@ -7178,13 +6357,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"possible-typed-array-names@npm:^1.0.0, possible-typed-array-names@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "possible-typed-array-names@npm:1.1.0"
-  checksum: 10/2f44137b8d3dd35f4a7ba7469eec1cd9cfbb46ec164b93a5bc1f4c3d68599c9910ee3b91da1d28b4560e9cc8414c3cd56fedc07259c67e52cc774476270d3302
-  languageName: node
-  linkType: hard
-
 "postcss-value-parser@npm:^4.2.0":
   version: 4.2.0
   resolution: "postcss-value-parser@npm:4.2.0"
@@ -7482,36 +6654,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"reflect.getprototypeof@npm:^1.0.10, reflect.getprototypeof@npm:^1.0.9":
-  version: 1.0.10
-  resolution: "reflect.getprototypeof@npm:1.0.10"
-  dependencies:
-    call-bind: "npm:^1.0.8"
-    define-properties: "npm:^1.2.1"
-    es-abstract: "npm:^1.23.9"
-    es-errors: "npm:^1.3.0"
-    es-object-atoms: "npm:^1.0.0"
-    get-intrinsic: "npm:^1.2.7"
-    get-proto: "npm:^1.0.1"
-    which-builtin-type: "npm:^1.2.1"
-  checksum: 10/80a4e2be716f4fe46a89a08ccad0863b47e8ce0f49616cab2d65dab0fbd53c6fdba0f52935fd41d37a2e4e22355c272004f920d63070de849f66eea7aeb4a081
-  languageName: node
-  linkType: hard
-
-"regexp.prototype.flags@npm:^1.5.3, regexp.prototype.flags@npm:^1.5.4":
-  version: 1.5.4
-  resolution: "regexp.prototype.flags@npm:1.5.4"
-  dependencies:
-    call-bind: "npm:^1.0.8"
-    define-properties: "npm:^1.2.1"
-    es-errors: "npm:^1.3.0"
-    get-proto: "npm:^1.0.1"
-    gopd: "npm:^1.2.0"
-    set-function-name: "npm:^2.0.2"
-  checksum: 10/8ab897ca445968e0b96f6237641510f3243e59c180ee2ee8d83889c52ff735dd1bf3657fcd36db053e35e1d823dd53f2565d0b8021ea282c9fe62401c6c3bd6d
-  languageName: node
-  linkType: hard
-
 "require-directory@npm:^2.1.1":
   version: 2.1.1
   resolution: "require-directory@npm:2.1.1"
@@ -7547,22 +6689,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@npm:^2.0.0-next.5, resolve@npm:^2.0.0-next.6":
-  version: 2.0.0-next.7
-  resolution: "resolve@npm:2.0.0-next.7"
-  dependencies:
-    es-errors: "npm:^1.3.0"
-    is-core-module: "npm:^2.16.2"
-    node-exports-info: "npm:^1.6.0"
-    object-keys: "npm:^1.1.1"
-    path-parse: "npm:^1.0.7"
-    supports-preserve-symlinks-flag: "npm:^1.0.0"
-  bin:
-    resolve: bin/resolve
-  checksum: 10/0a6fbd452518c128355a72e3773e65d047128bbc5045d954eca7f911683abfb1b0177494ff8734ca74f2a7a4e3a6bfad9cd6d19a2bde0fe9851025a2734d4a0f
-  languageName: node
-  linkType: hard
-
 "resolve@patch:resolve@npm%3A^1.19.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.1#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.8#optional!builtin<compat/resolve>":
   version: 1.22.12
   resolution: "resolve@patch:resolve@npm%3A1.22.12#optional!builtin<compat/resolve>::version=1.22.12&hash=c3c19d"
@@ -7577,22 +6703,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@patch:resolve@npm%3A^2.0.0-next.5#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^2.0.0-next.6#optional!builtin<compat/resolve>":
-  version: 2.0.0-next.7
-  resolution: "resolve@patch:resolve@npm%3A2.0.0-next.7#optional!builtin<compat/resolve>::version=2.0.0-next.7&hash=c3c19d"
-  dependencies:
-    es-errors: "npm:^1.3.0"
-    is-core-module: "npm:^2.16.2"
-    node-exports-info: "npm:^1.6.0"
-    object-keys: "npm:^1.1.1"
-    path-parse: "npm:^1.0.7"
-    supports-preserve-symlinks-flag: "npm:^1.0.0"
-  bin:
-    resolve: bin/resolve
-  checksum: 10/2c6dd4194c8aa900db299020fcad253239c670ea82a65c8387f1d2885e8dcf6742b64c439e3c811e046a5252eba94f2092b7867e34b7f895e733be48d575192b
-  languageName: node
-  linkType: hard
-
 "reusify@npm:^1.0.4":
   version: 1.1.0
   resolution: "reusify@npm:1.1.0"
@@ -7767,7 +6877,7 @@ __metadata:
     "@cratis/arc": "npm:22.5.0"
     "@cratis/arc.react": "npm:22.5.0"
     "@cratis/arc.vite": "npm:22.5.0"
-    "@eslint/eslintrc": "npm:^3.3.6"
+    "@eslint-react/eslint-plugin": "npm:5.18.6"
     "@eslint/js": "npm:^10.0.1"
     "@rollup/plugin-node-resolve": "npm:^16.0.3"
     "@rollup/plugin-typescript": "npm:^12.3.0"
@@ -7798,10 +6908,8 @@ __metadata:
     chai-as-promised: "npm:^8.0.2"
     eslint: "npm:^10.9.1"
     eslint-config-prettier: "npm:^10.1.8"
-    eslint-plugin-import: "npm:^2.32.0"
     eslint-plugin-no-null: "npm:^1.0.2"
     eslint-plugin-prettier: "npm:^5.5.6"
-    eslint-plugin-react: "npm:^7.37.5"
     glob: "npm:^13.0.6"
     globals: "npm:^17.11.0"
     jsdom: "npm:^30.0.1"
@@ -7857,40 +6965,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"safe-array-concat@npm:^1.1.3":
-  version: 1.1.4
-  resolution: "safe-array-concat@npm:1.1.4"
-  dependencies:
-    call-bind: "npm:^1.0.9"
-    call-bound: "npm:^1.0.4"
-    get-intrinsic: "npm:^1.3.0"
-    has-symbols: "npm:^1.1.0"
-    isarray: "npm:^2.0.5"
-  checksum: 10/89e6a4d2759225515e5ea6b9f21a62dfad74c3aef45c769c9bf000b1c681f15568183e62935711ec9d10c35712c4f21f0d6acb094bd35138608b4a57fa64667d
-  languageName: node
-  linkType: hard
-
-"safe-push-apply@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "safe-push-apply@npm:1.0.0"
-  dependencies:
-    es-errors: "npm:^1.3.0"
-    isarray: "npm:^2.0.5"
-  checksum: 10/2bd4e53b6694f7134b9cf93631480e7fafc8637165f0ee91d5a4af5e7f33d37de9562d1af5021178dd4217d0230cde8d6530fa28cfa1ebff9a431bf8fff124b4
-  languageName: node
-  linkType: hard
-
-"safe-regex-test@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "safe-regex-test@npm:1.1.0"
-  dependencies:
-    call-bound: "npm:^1.0.2"
-    es-errors: "npm:^1.3.0"
-    is-regex: "npm:^1.2.1"
-  checksum: 10/ebdb61f305bf4756a5b023ad86067df5a11b26898573afe9e52a548a63c3bd594825d9b0e2dde2eb3c94e57e0e04ac9929d4107c394f7b8e56a4613bed46c69a
-  languageName: node
-  linkType: hard
-
 "saxes@npm:^6.0.0":
   version: 6.0.0
   resolution: "saxes@npm:6.0.0"
@@ -7932,43 +7006,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"set-function-length@npm:^1.2.2":
-  version: 1.2.2
-  resolution: "set-function-length@npm:1.2.2"
-  dependencies:
-    define-data-property: "npm:^1.1.4"
-    es-errors: "npm:^1.3.0"
-    function-bind: "npm:^1.1.2"
-    get-intrinsic: "npm:^1.2.4"
-    gopd: "npm:^1.0.1"
-    has-property-descriptors: "npm:^1.0.2"
-  checksum: 10/505d62b8e088468917ca4e3f8f39d0e29f9a563b97dbebf92f4bd2c3172ccfb3c5b8e4566d5fcd00784a00433900e7cb8fbc404e2dbd8c3818ba05bb9d4a8a6d
-  languageName: node
-  linkType: hard
-
-"set-function-name@npm:^2.0.2":
-  version: 2.0.2
-  resolution: "set-function-name@npm:2.0.2"
-  dependencies:
-    define-data-property: "npm:^1.1.4"
-    es-errors: "npm:^1.3.0"
-    functions-have-names: "npm:^1.2.3"
-    has-property-descriptors: "npm:^1.0.2"
-  checksum: 10/c7614154a53ebf8c0428a6c40a3b0b47dac30587c1a19703d1b75f003803f73cdfa6a93474a9ba678fa565ef5fbddc2fae79bca03b7d22ab5fd5163dbe571a74
-  languageName: node
-  linkType: hard
-
-"set-proto@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "set-proto@npm:1.0.0"
-  dependencies:
-    dunder-proto: "npm:^1.0.1"
-    es-errors: "npm:^1.3.0"
-    es-object-atoms: "npm:^1.0.0"
-  checksum: 10/b87f8187bca595ddc3c0721ece4635015fd9d7cb294e6dd2e394ce5186a71bbfa4dc8a35010958c65e43ad83cde09642660e61a952883c24fd6b45ead15f045c
-  languageName: node
-  linkType: hard
-
 "shebang-command@npm:^2.0.0":
   version: 2.0.0
   resolution: "shebang-command@npm:2.0.0"
@@ -7985,54 +7022,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"side-channel-list@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "side-channel-list@npm:1.0.1"
-  dependencies:
-    es-errors: "npm:^1.3.0"
-    object-inspect: "npm:^1.13.4"
-  checksum: 10/3499671cd52adaee739eac1e14d07530b8e3530192741aeb05e7fe4ad1b51d1368ceea2cd3c21b0f62b05410a5c70a7c4d997ba4b143303ef73d0c65dfd1c252
-  languageName: node
-  linkType: hard
-
-"side-channel-map@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "side-channel-map@npm:1.0.1"
-  dependencies:
-    call-bound: "npm:^1.0.2"
-    es-errors: "npm:^1.3.0"
-    get-intrinsic: "npm:^1.2.5"
-    object-inspect: "npm:^1.13.3"
-  checksum: 10/5771861f77feefe44f6195ed077a9e4f389acc188f895f570d56445e251b861754b547ea9ef73ecee4e01fdada6568bfe9020d2ec2dfc5571e9fa1bbc4a10615
-  languageName: node
-  linkType: hard
-
-"side-channel-weakmap@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "side-channel-weakmap@npm:1.0.2"
-  dependencies:
-    call-bound: "npm:^1.0.2"
-    es-errors: "npm:^1.3.0"
-    get-intrinsic: "npm:^1.2.5"
-    object-inspect: "npm:^1.13.3"
-    side-channel-map: "npm:^1.0.1"
-  checksum: 10/a815c89bc78c5723c714ea1a77c938377ea710af20d4fb886d362b0d1f8ac73a17816a5f6640f354017d7e292a43da9c5e876c22145bac00b76cfb3468001736
-  languageName: node
-  linkType: hard
-
-"side-channel@npm:^1.1.0":
-  version: 1.1.1
-  resolution: "side-channel@npm:1.1.1"
-  dependencies:
-    es-errors: "npm:^1.3.0"
-    object-inspect: "npm:^1.13.4"
-    side-channel-list: "npm:^1.0.1"
-    side-channel-map: "npm:^1.0.1"
-    side-channel-weakmap: "npm:^1.0.2"
-  checksum: 10/5fa6393ff6ad25d8b4a38e9ba095481e498c8ebe5ab78481c1455146255a3d18ca37a6f936595cc671a6149134cdc295bbd2fa017620bdc73cbc7380634fa2fc
-  languageName: node
-  linkType: hard
-
 "siginfo@npm:^2.0.0":
   version: 2.0.0
   resolution: "siginfo@npm:2.0.0"
@@ -8115,16 +7104,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"stop-iteration-iterator@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "stop-iteration-iterator@npm:1.1.0"
-  dependencies:
-    es-errors: "npm:^1.3.0"
-    internal-slot: "npm:^1.1.0"
-  checksum: 10/ff36c4db171ee76c936ccfe9541946b77017f12703d4c446652017356816862d3aa029a64e7d4c4ceb484e00ed4a81789333896390d808458638f3a216aa1f41
-  languageName: node
-  linkType: hard
-
 "storybook@npm:^10.5.10":
   version: 10.5.10
   resolution: "storybook@npm:10.5.10"
@@ -8163,6 +7142,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"string-ts@npm:^2.3.1":
+  version: 2.3.1
+  resolution: "string-ts@npm:2.3.1"
+  checksum: 10/50705e02a31030a52fa10f637abb26f7a64bbe34a11cfa0ecdc73ad534639c24f381c581b74df0516ce2dad5342e46f806471db2452d259e69bd415a42969eb2
+  languageName: node
+  linkType: hard
+
 "string-width-cjs@npm:string-width@^4.2.0, string-width@npm:^4.1.0, string-width@npm:^4.2.0, string-width@npm:^4.2.3":
   version: 4.2.3
   resolution: "string-width@npm:4.2.3"
@@ -8185,76 +7171,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"string.prototype.matchall@npm:^4.0.12":
-  version: 4.0.12
-  resolution: "string.prototype.matchall@npm:4.0.12"
-  dependencies:
-    call-bind: "npm:^1.0.8"
-    call-bound: "npm:^1.0.3"
-    define-properties: "npm:^1.2.1"
-    es-abstract: "npm:^1.23.6"
-    es-errors: "npm:^1.3.0"
-    es-object-atoms: "npm:^1.0.0"
-    get-intrinsic: "npm:^1.2.6"
-    gopd: "npm:^1.2.0"
-    has-symbols: "npm:^1.1.0"
-    internal-slot: "npm:^1.1.0"
-    regexp.prototype.flags: "npm:^1.5.3"
-    set-function-name: "npm:^2.0.2"
-    side-channel: "npm:^1.1.0"
-  checksum: 10/e4ab34b9e7639211e6c5e9759adb063028c5c5c4fc32ad967838b2bd1e5ce83a66ae8ec755d24a79302849f090b59194571b2c33471e86e7821b21c0f56df316
-  languageName: node
-  linkType: hard
-
-"string.prototype.repeat@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "string.prototype.repeat@npm:1.0.0"
-  dependencies:
-    define-properties: "npm:^1.1.3"
-    es-abstract: "npm:^1.17.5"
-  checksum: 10/4b1bd91b75fa8fdf0541625184ebe80e445a465ce4253c19c3bccd633898005dadae0f74b85ae72662a53aafb8035bf48f8f5c0755aec09bc106a7f13959d05e
-  languageName: node
-  linkType: hard
-
-"string.prototype.trim@npm:^1.2.10":
-  version: 1.2.11
-  resolution: "string.prototype.trim@npm:1.2.11"
-  dependencies:
-    call-bind: "npm:^1.0.9"
-    call-bound: "npm:^1.0.4"
-    define-data-property: "npm:^1.1.4"
-    define-properties: "npm:^1.2.1"
-    es-abstract: "npm:^1.24.2"
-    es-object-atoms: "npm:^1.1.2"
-    has-property-descriptors: "npm:^1.0.2"
-    safe-regex-test: "npm:^1.1.0"
-  checksum: 10/77c2301fe9f2f2e2085c2a9ab048f9f86b1b95609944e1f16d067186b7ac9121db2dd5bf8d165835891876d750ed325314e3181b8b6829d533f5214d472b3fc4
-  languageName: node
-  linkType: hard
-
-"string.prototype.trimend@npm:^1.0.9":
-  version: 1.0.10
-  resolution: "string.prototype.trimend@npm:1.0.10"
-  dependencies:
-    call-bind: "npm:^1.0.9"
-    call-bound: "npm:^1.0.4"
-    define-properties: "npm:^1.2.1"
-    es-object-atoms: "npm:^1.1.2"
-  checksum: 10/f8a85346be853bbe34490c03f4c3f7adb0b4d5dedb206e4a48a006839fece0843fa97fe9c3222be5fd91ba33cdc7d495970af7a4707d15a62591555bfe5a5e20
-  languageName: node
-  linkType: hard
-
-"string.prototype.trimstart@npm:^1.0.8":
-  version: 1.0.8
-  resolution: "string.prototype.trimstart@npm:1.0.8"
-  dependencies:
-    call-bind: "npm:^1.0.7"
-    define-properties: "npm:^1.2.1"
-    es-object-atoms: "npm:^1.0.0"
-  checksum: 10/160167dfbd68e6f7cb9f51a16074eebfce1571656fc31d40c3738ca9e30e35496f2c046fe57b6ad49f65f238a152be8c86fd9a2dd58682b5eba39dad995b3674
-  languageName: node
-  linkType: hard
-
 "strip-ansi-cjs@npm:strip-ansi@^6.0.1, strip-ansi@npm:^6.0.0, strip-ansi@npm:^6.0.1":
   version: 6.0.1
   resolution: "strip-ansi@npm:6.0.1"
@@ -8310,13 +7226,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"supports-color@npm:*":
-  version: 11.0.0
-  resolution: "supports-color@npm:11.0.0"
-  checksum: 10/6480981c00359da2cd22a25543e8bee3cea248a32194e98fade18ac5ada178bcb950fa225d262ff4dbf23c81caaed65660eb4093302bbdd0d1f1d93a18768854
-  languageName: node
-  linkType: hard
-
 "supports-color@npm:^7.1.0":
   version: 7.2.0
   resolution: "supports-color@npm:7.2.0"
@@ -8557,6 +7466,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ts-pattern@npm:^5.9.0":
+  version: 5.9.0
+  resolution: "ts-pattern@npm:5.9.0"
+  checksum: 10/0df8cc63d731a596f3541a305eff10f055c9a761d1a8b3776781dc6d6430c6bd8be8cd333fac62138c5d88e1209b4d8dccf1f40041091b634e5018908281417b
+  languageName: node
+  linkType: hard
+
 "tsconfck@npm:^3.0.3":
   version: 3.1.6
   resolution: "tsconfck@npm:3.1.6"
@@ -8571,18 +7487,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tsconfig-paths@npm:^3.15.0":
-  version: 3.15.0
-  resolution: "tsconfig-paths@npm:3.15.0"
-  dependencies:
-    "@types/json5": "npm:^0.0.29"
-    json5: "npm:^1.0.2"
-    minimist: "npm:^1.2.6"
-    strip-bom: "npm:^3.0.0"
-  checksum: 10/2041beaedc6c271fc3bedd12e0da0cc553e65d030d4ff26044b771fac5752d0460944c0b5e680f670c2868c95c664a256cec960ae528888db6ded83524e33a14
-  languageName: node
-  linkType: hard
-
 "tsconfig-paths@npm:^4.2.0":
   version: 4.2.0
   resolution: "tsconfig-paths@npm:4.2.0"
@@ -8640,59 +7544,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typed-array-buffer@npm:^1.0.3":
-  version: 1.0.3
-  resolution: "typed-array-buffer@npm:1.0.3"
-  dependencies:
-    call-bound: "npm:^1.0.3"
-    es-errors: "npm:^1.3.0"
-    is-typed-array: "npm:^1.1.14"
-  checksum: 10/3fb91f0735fb413b2bbaaca9fabe7b8fc14a3fa5a5a7546bab8a57e755be0e3788d893195ad9c2b842620592de0e68d4c077d4c2c41f04ec25b8b5bb82fa9a80
-  languageName: node
-  linkType: hard
-
-"typed-array-byte-length@npm:^1.0.3":
-  version: 1.0.3
-  resolution: "typed-array-byte-length@npm:1.0.3"
-  dependencies:
-    call-bind: "npm:^1.0.8"
-    for-each: "npm:^0.3.3"
-    gopd: "npm:^1.2.0"
-    has-proto: "npm:^1.2.0"
-    is-typed-array: "npm:^1.1.14"
-  checksum: 10/269dad101dda73e3110117a9b84db86f0b5c07dad3a9418116fd38d580cab7fc628a4fc167e29b6d7c39da2f53374b78e7cb578b3c5ec7a556689d985d193519
-  languageName: node
-  linkType: hard
-
-"typed-array-byte-offset@npm:^1.0.4":
-  version: 1.0.4
-  resolution: "typed-array-byte-offset@npm:1.0.4"
-  dependencies:
-    available-typed-arrays: "npm:^1.0.7"
-    call-bind: "npm:^1.0.8"
-    for-each: "npm:^0.3.3"
-    gopd: "npm:^1.2.0"
-    has-proto: "npm:^1.2.0"
-    is-typed-array: "npm:^1.1.15"
-    reflect.getprototypeof: "npm:^1.0.9"
-  checksum: 10/c2869aa584cdae24ecfd282f20a0f556b13a49a9d5bca1713370bb3c89dff0ccbc5ceb45cb5b784c98f4579e5e3e2a07e438c3a5b8294583e2bd4abbd5104fb5
-  languageName: node
-  linkType: hard
-
-"typed-array-length@npm:^1.0.7":
-  version: 1.0.8
-  resolution: "typed-array-length@npm:1.0.8"
-  dependencies:
-    call-bind: "npm:^1.0.9"
-    for-each: "npm:^0.3.5"
-    gopd: "npm:^1.2.0"
-    is-typed-array: "npm:^1.1.15"
-    possible-typed-array-names: "npm:^1.1.0"
-    reflect.getprototypeof: "npm:^1.0.10"
-  checksum: 10/c044c644eee13fe8814d4c2401146103efd49bfd1e40412104f04c4d67f76b373da7e93026fbd99aaef1fdaa9c81d0886f34772d045472be9704157f4e1d0164
-  languageName: node
-  linkType: hard
-
 "typescript-eslint@npm:^8.68.0":
   version: 8.68.0
   resolution: "typescript-eslint@npm:8.68.0"
@@ -8728,18 +7579,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"unbox-primitive@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "unbox-primitive@npm:1.1.0"
-  dependencies:
-    call-bound: "npm:^1.0.3"
-    has-bigints: "npm:^1.0.2"
-    has-symbols: "npm:^1.1.0"
-    which-boxed-primitive: "npm:^1.1.1"
-  checksum: 10/fadb347020f66b2c8aeacf8b9a79826fa34cc5e5457af4eb0bbc4e79bd87fed0fa795949825df534320f7c13f199259516ad30abc55a6e7b91d8d996ca069e50
-  languageName: node
-  linkType: hard
-
 "undici-types@npm:~8.3.0":
   version: 8.3.0
   resolution: "undici-types@npm:8.3.0"
@@ -9029,67 +7868,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"which-boxed-primitive@npm:^1.1.0, which-boxed-primitive@npm:^1.1.1":
-  version: 1.1.1
-  resolution: "which-boxed-primitive@npm:1.1.1"
-  dependencies:
-    is-bigint: "npm:^1.1.0"
-    is-boolean-object: "npm:^1.2.1"
-    is-number-object: "npm:^1.1.1"
-    is-string: "npm:^1.1.1"
-    is-symbol: "npm:^1.1.1"
-  checksum: 10/a877c0667bc089518c83ad4d845cf8296b03efe3565c1de1940c646e00a2a1ae9ed8a185bcfa27cbf352de7906f0616d83b9d2f19ca500ee02a551fb5cf40740
-  languageName: node
-  linkType: hard
-
-"which-builtin-type@npm:^1.2.1":
-  version: 1.2.1
-  resolution: "which-builtin-type@npm:1.2.1"
-  dependencies:
-    call-bound: "npm:^1.0.2"
-    function.prototype.name: "npm:^1.1.6"
-    has-tostringtag: "npm:^1.0.2"
-    is-async-function: "npm:^2.0.0"
-    is-date-object: "npm:^1.1.0"
-    is-finalizationregistry: "npm:^1.1.0"
-    is-generator-function: "npm:^1.0.10"
-    is-regex: "npm:^1.2.1"
-    is-weakref: "npm:^1.0.2"
-    isarray: "npm:^2.0.5"
-    which-boxed-primitive: "npm:^1.1.0"
-    which-collection: "npm:^1.0.2"
-    which-typed-array: "npm:^1.1.16"
-  checksum: 10/22c81c5cb7a896c5171742cd30c90d992ff13fb1ea7693e6cf80af077791613fb3f89aa9b4b7f890bd47b6ce09c6322c409932359580a2a2a54057f7b52d1cbe
-  languageName: node
-  linkType: hard
-
-"which-collection@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "which-collection@npm:1.0.2"
-  dependencies:
-    is-map: "npm:^2.0.3"
-    is-set: "npm:^2.0.3"
-    is-weakmap: "npm:^2.0.2"
-    is-weakset: "npm:^2.0.3"
-  checksum: 10/674bf659b9bcfe4055f08634b48a8588e879161b9fefed57e9ec4ff5601e4d50a05ccd76cf10f698ef5873784e5df3223336d56c7ce88e13bcf52ebe582fc8d7
-  languageName: node
-  linkType: hard
-
-"which-typed-array@npm:^1.1.16, which-typed-array@npm:^1.1.19":
-  version: 1.1.22
-  resolution: "which-typed-array@npm:1.1.22"
-  dependencies:
-    available-typed-arrays: "npm:^1.0.7"
-    call-bind: "npm:^1.0.9"
-    call-bound: "npm:^1.0.4"
-    for-each: "npm:^0.3.5"
-    get-proto: "npm:^1.0.1"
-    gopd: "npm:^1.2.0"
-    has-tostringtag: "npm:^1.0.2"
-  checksum: 10/59b0383347e2f3b0bc5be570c2dfae551b172a9c83e0a6b03c6e17401d6161dfa1d912c7657062fe9add254a0d3c25ef70593dbaec8fefa8714715ff69e0a3fc
-  languageName: node
-  linkType: hard
-
 "which@npm:^2.0.1":
   version: 2.0.2
   resolution: "which@npm:2.0.2"
@@ -9273,3 +8051,10 @@ __metadata:
   checksum: 10/f77b3d8d00310def622123df93d4ee654fc6a0096182af8bd60679ddcdfb3474c56c6c7190817c84a2785648cdee9d721c0154eb45698c62176c322fb46fc700
   languageName: node
   linkType: hard
+
+"zod@npm:^3.25.0 || ^4.0.0":
+  version: 4.5.1
+  resolution: "zod@npm:4.5.1"
+  checksum: 10/1b09738538d5befcf5ec1dbc670687a815fbc75c6a9a7b5ba41172b4bb41b0ff7a49379b0ccb2bb59aadc12b71bb8e926254cb3a3970c567d5fc59106099aa2e
+  languageName: node
+  linkType: hard

From 84100047fc369a723ebf3d64997bb1b05d6b4d6d Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Fri, 28 Aug 2026 22:28:16 +0200
Subject: [PATCH 249/267] Add source-candidate release evidence generation

Produce pack-once archives, deterministic checksums, archive-bound CycloneDX SBOMs, and a fail-closed hosted evidence artifact without adding publication authority.
---
 .github/workflows/javascript-build.yml     |  52 +++
 README.md                                  |  17 +
 RELEASE.md                                 |  27 +-
 package.json                               |   5 +-
 scripts/generate-release-evidence.mjs      | 337 ++++++++++++++++
 scripts/generate-release-evidence.test.mjs | 171 ++++++++
 scripts/lib/release-evidence.mjs           | 449 +++++++++++++++++++++
 scripts/verify-release-safety.mjs          |  56 +++
 scripts/verify-release-safety.test.mjs     |  28 ++
 yarn.lock                                  |  15 +
 10 files changed, 1152 insertions(+), 5 deletions(-)
 create mode 100644 scripts/generate-release-evidence.mjs
 create mode 100644 scripts/generate-release-evidence.test.mjs
 create mode 100644 scripts/lib/release-evidence.mjs

diff --git a/.github/workflows/javascript-build.yml b/.github/workflows/javascript-build.yml
index 0ca34e82..7c9493e8 100644
--- a/.github/workflows/javascript-build.yml
+++ b/.github/workflows/javascript-build.yml
@@ -28,6 +28,7 @@ on:
             - 'Storybook/**'
             - 'scripts/**'
             - 'compat-manifest.json'
+            - 'README.md'
             - 'RELEASE.md'
             - 'run-task-on-workspaces.js'
             - 'package.json'
@@ -49,6 +50,7 @@ on:
             - 'Storybook/**'
             - 'scripts/**'
             - 'compat-manifest.json'
+            - 'README.md'
             - 'RELEASE.md'
             - 'run-task-on-workspaces.js'
             - 'package.json'
@@ -134,6 +136,56 @@ jobs:
               working-directory: Source
               run: yarn test-storybook
 
+    # Builds and retains source-candidate archives and SBOM evidence only. This job has
+    # no publication authority and its artifact is not npm trusted-publisher provenance.
+    release-evidence:
+        runs-on: ubuntu-latest
+        timeout-minutes: 20
+        permissions:
+            contents: read
+
+        steps:
+            - name: Checkout code
+              uses: actions/checkout@11d5960a326750d5838078e36cf38b85af677262 # v4
+
+            - name: Setup node
+              uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
+              with:
+                  node-version: 23.x
+                  registry-url: 'https://registry.npmjs.org'
+
+            - uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4
+              id: yarn-cache
+              with:
+                  path: |
+                      .yarn/cache
+                      **/node_modules
+                  key: ${{ runner.os }}-yarn-v2-${{ hashFiles('yarn.lock', '**/package.json', '.yarnrc.yml', '.yarn/releases/yarn-4.5.3.cjs') }}
+
+            - name: Yarn install
+              run: yarn install --immutable
+
+            - name: Test release-evidence generator
+              run: yarn test-release-evidence
+
+            - name: Generate source-candidate release evidence
+              run: >-
+                  yarn generate-release-evidence
+                  --output "${{ runner.temp }}/components-v4-release-evidence"
+
+            - name: Upload source-candidate release evidence
+              uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
+              with:
+                  name: components-v4-source-candidate-${{ github.sha }}
+                  path: |
+                      ${{ runner.temp }}/components-v4-release-evidence/*.tgz
+                      ${{ runner.temp }}/components-v4-release-evidence/SHA256SUMS
+                      ${{ runner.temp }}/components-v4-release-evidence/SHA512SUMS
+                      ${{ runner.temp }}/components-v4-release-evidence/*.cdx.json
+                      ${{ runner.temp }}/components-v4-release-evidence/release-evidence.json
+                  if-no-files-found: error
+                  retention-days: 30
+
     # Builds the artifact that actually ships to npm (the `prepare` script: tsc -b +
     # rollup + copy-css) and loads every subpath of the `exports` map from it.
     #
diff --git a/README.md b/README.md
index d5c83867..198cea8d 100644
--- a/README.md
+++ b/README.md
@@ -150,6 +150,23 @@ npx markdownlint-cli2 README.md Source/README.md
 npx linkinator README.md Source/README.md --markdown --recurse
 ```
 
+Release-policy contributors can verify the deterministic contract, fail-closed workflow guards,
+and source-candidate evidence generator without publishing anything:
+
+```bash
+yarn verify-compat-manifest
+yarn verify-release-safety
+yarn test-release-policy
+yarn test-release-evidence
+yarn test-renderer-adapter-matrix
+yarn generate-release-evidence --output /absolute/path/to/empty/evidence-directory
+```
+
+The caller-provided evidence directory is temporary/untracked output. The hosted workflow retains
+its source-candidate artifact for 30 days; that upload is not npm provenance and grants no
+publication authority. Trusted-publisher provenance remains a separate future owner-authorized
+publish-job requirement.
+
 Source changes follow the repository's framework rules and the applicable build,
 type, specification, export, package-archive, accessibility-diagnostic, and
 Storybook gates. Renderer adapter contributors must also run the
diff --git a/RELEASE.md b/RELEASE.md
index ecedf206..69421736 100644
--- a/RELEASE.md
+++ b/RELEASE.md
@@ -37,14 +37,33 @@ manifest before publication is enabled.
 
 ## Build immutable candidates
 
+The `release-evidence` job in `.github/workflows/javascript-build.yml` is a read-only,
+source-candidate evidence job. It builds each publishable workspace shape once, packs the exact
+seven `gaScope.publicPackages` archives once, records SHA-256 and SHA-512 checksums, binds a
+reproducible CycloneDX 1.6 SBOM to each archive and commit, and retains the resulting hosted
+artifact for 30 days. It cannot publish and is not npm trusted-publisher provenance. Contributors
+can reproduce the same evidence in an empty caller-owned directory:
+
+```bash
+yarn test-release-evidence
+yarn generate-release-evidence --output /absolute/path/to/empty/evidence-directory
+```
+
+The output directory is never a repository artifact and must not be committed. The evidence index
+retains `publicationEnabled: false`; generation refuses publication-enabled metadata.
+
+A future owner-authorized publication job must separately provide trusted-publisher provenance and
+consume reviewed immutable archives without rebuilding them. That job does not exist in this
+source-candidate tranche.
+
 1. Check out the exact reviewed commit and install with the immutable lockfile.
 2. Run all release gates for the seven-package scope and private Plain/Storybook evidence.
 3. Pack each public package exactly once. Never rebuild between candidate verification and
    publication.
-4. Retain every immutable tarball and record its SHA-512 digest.
-5. Generate and retain an SBOM for every tarball.
-6. Retain verifiable build provenance that binds commit, workflow, package, version, tarball digest,
-   and SBOM.
+4. Retain every immutable tarball and record its SHA-256 and SHA-512 digests.
+5. Generate and retain an archive-bound SBOM for every tarball.
+6. In the future authorized publish job, retain trusted-publisher provenance that binds commit,
+   workflow, package, version, tarball digest, and SBOM.
 7. Stage candidates under a reviewed non-default npm dist-tag. A candidate must never replace the
    default installation tag implicitly.
 
diff --git a/package.json b/package.json
index 413d61db..ba18a0d6 100644
--- a/package.json
+++ b/package.json
@@ -35,10 +35,12 @@
         "generate-compat-manifest": "node ./scripts/generate-compat-manifest.mjs --write",
         "verify-compat-manifest": "node ./scripts/generate-compat-manifest.mjs --check",
         "verify-release-safety": "node ./scripts/verify-release-safety.mjs",
+        "generate-release-evidence": "node ./scripts/generate-release-evidence.mjs",
+        "test-release-evidence": "node --test ./scripts/generate-release-evidence.test.mjs",
         "test-release-policy": "node --test ./scripts/generate-compat-manifest.test.mjs ./scripts/verify-release-safety.test.mjs",
         "test-renderer-adapter-matrix": "node --test ./scripts/verify-renderer-adapter-matrix.test.mjs",
         "verify-renderer-adapters": "node ./scripts/verify-renderer-adapters.mjs",
-        "ci": "yarn verify-compat-manifest && yarn verify-release-safety && yarn test-release-policy && node ./run-task-on-workspaces.js ci",
+        "ci": "yarn verify-compat-manifest && yarn verify-release-safety && yarn test-release-policy && yarn test-release-evidence && yarn test-renderer-adapter-matrix && node ./run-task-on-workspaces.js ci",
         "up": "node ./run-task-on-workspaces.js up"
     },
     "license": "MIT",
@@ -48,6 +50,7 @@
         "@cratis/arc": "22.5.0",
         "@cratis/arc.react": "22.5.0",
         "@cratis/arc.vite": "22.5.0",
+        "@cyclonedx/yarn-plugin-cyclonedx": "3.4.0",
         "@eslint/eslintrc": "^3.3.6",
         "@eslint/js": "^10.0.1",
         "@rollup/plugin-node-resolve": "^16.0.3",
diff --git a/scripts/generate-release-evidence.mjs b/scripts/generate-release-evidence.mjs
new file mode 100644
index 00000000..164652a1
--- /dev/null
+++ b/scripts/generate-release-evidence.mjs
@@ -0,0 +1,337 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { spawnSync } from 'node:child_process';
+import fs from 'node:fs';
+import path from 'node:path';
+import process from 'node:process';
+import { fileURLToPath, pathToFileURL } from 'node:url';
+import {
+    createCompatibilityManifest,
+    serializeCompatibilityManifest,
+    validateCompatibilityManifest,
+} from './generate-compat-manifest.mjs';
+import {
+    bindSbomToArchive,
+    computeFileHashes,
+    packageArtifactStem,
+    readPackedPackageJson,
+    selectReleasePackages,
+    validateCommit,
+    validatePackedIdentity,
+    validateReleaseEvidenceIndex,
+    validateSafeFilename,
+} from './lib/release-evidence.mjs';
+
+const repositoryDirectory = path.resolve(
+    path.dirname(fileURLToPath(import.meta.url)),
+    '..',
+);
+const generatedBuildDirectories = [
+    'Source/dist',
+    'Conformance/dist',
+    'Adapters/Mui/dist',
+    'Adapters/PrimeReact/dist',
+    'Adapters/PrimeReact10/dist',
+];
+
+const parseArguments = (arguments_) => {
+    let output;
+    let commit;
+    for (let index = 0; index < arguments_.length; index += 1) {
+        const argument = arguments_[index];
+        if (argument === '--output' || argument === '--commit') {
+            const value = arguments_[index + 1];
+            if (!value || value.startsWith('--'))
+                throw new Error(`Missing value for ${argument}.`);
+            if (argument === '--output') output = value;
+            else commit = value;
+            index += 1;
+            continue;
+        }
+        throw new Error(`Unknown argument '${argument}'.`);
+    }
+    if (!output) {
+        throw new Error(
+            'Usage: node scripts/generate-release-evidence.mjs --output <directory> [--commit <40-hex>].',
+        );
+    }
+    return { output, commit };
+};
+
+const run = (command, arguments_, options = {}) => {
+    const result = spawnSync(command, arguments_, {
+        cwd: options.cwd ?? repositoryDirectory,
+        env: options.env ?? process.env,
+        encoding: 'utf8',
+        stdio: options.capture ? 'pipe' : 'inherit',
+        timeout: options.timeout ?? 15 * 60_000,
+        windowsHide: true,
+    });
+    if (result.error) throw result.error;
+    if (result.status !== 0) {
+        const output = options.capture ? `\n${result.stderr || result.stdout}` : '';
+        throw new Error(
+            `${command} ${arguments_.join(' ')} failed with exit code ${result.status}.${output}`,
+        );
+    }
+    return options.capture ? result.stdout.trim() : '';
+};
+
+const yarnCommand = process.platform === 'win32' ? 'yarn.cmd' : 'yarn';
+
+const readJsonFile = (filePath, description) => {
+    try {
+        return JSON.parse(fs.readFileSync(filePath, 'utf8'));
+    } catch (error) {
+        throw new Error(
+            `Could not read ${description}: ${error instanceof Error ? error.message : String(error)}.`,
+            { cause: error },
+        );
+    }
+};
+
+const loadCompatibilityMetadata = () => {
+    const manifestPath = path.join(repositoryDirectory, 'compat-manifest.json');
+    const serialized = fs.readFileSync(manifestPath, 'utf8');
+    const manifest = readJsonFile(manifestPath, 'compat-manifest.json');
+    if (manifest.publicationEnabled !== false) {
+        throw new Error('Source-candidate evidence refuses publicationEnabled: true.');
+    }
+    validateCompatibilityManifest(manifest, { rootDirectory: repositoryDirectory });
+    const generated = createCompatibilityManifest(repositoryDirectory);
+    if (serialized !== serializeCompatibilityManifest(generated)) {
+        throw new Error(
+            'compat-manifest.json is not the current deterministic compatibility metadata.',
+        );
+    }
+    return manifest;
+};
+
+const discoverWorkspaces = () => {
+    const rootPackage = readJsonFile(
+        path.join(repositoryDirectory, 'package.json'),
+        'root package.json',
+    );
+    if (!Array.isArray(rootPackage.workspaces))
+        throw new Error('Root workspaces must be an array.');
+    const workspaces = new Map();
+    const addWorkspace = (relativeDirectory) => {
+        const manifestPath = path.join(
+            repositoryDirectory,
+            relativeDirectory,
+            'package.json',
+        );
+        if (!fs.existsSync(manifestPath)) return;
+        const manifest = readJsonFile(manifestPath, `${relativeDirectory} package.json`);
+        if (typeof manifest.name !== 'string' || workspaces.has(manifest.name)) {
+            throw new Error(
+                `Invalid or duplicate workspace '${manifest.name ?? relativeDirectory}'.`,
+            );
+        }
+        workspaces.set(manifest.name, {
+            directory: path.join(repositoryDirectory, relativeDirectory),
+            manifest,
+        });
+    };
+    for (const workspacePattern of rootPackage.workspaces) {
+        if (typeof workspacePattern !== 'string')
+            throw new Error('Workspace patterns must be strings.');
+        if (workspacePattern.endsWith('/*')) {
+            const relativeParent = workspacePattern.slice(0, -2);
+            const parent = path.join(repositoryDirectory, relativeParent);
+            for (const entry of fs
+                .readdirSync(parent, { withFileTypes: true })
+                .sort((left, right) => left.name.localeCompare(right.name))) {
+                if (entry.isDirectory())
+                    addWorkspace(path.join(relativeParent, entry.name));
+            }
+        } else {
+            addWorkspace(workspacePattern);
+        }
+    }
+    return workspaces;
+};
+
+const prepareOutputDirectory = (outputArgument) => {
+    const outputDirectory = path.resolve(outputArgument);
+    let created = false;
+    if (fs.existsSync(outputDirectory)) {
+        if (!fs.statSync(outputDirectory).isDirectory())
+            throw new Error('Evidence output must be a directory.');
+        if (fs.readdirSync(outputDirectory).length > 0)
+            throw new Error('Evidence output directory must be empty.');
+    } else {
+        fs.mkdirSync(outputDirectory, { recursive: true });
+        created = true;
+    }
+    return { outputDirectory, created };
+};
+
+const cleanFailureState = (outputDirectory, outputCreated) => {
+    for (const relativeDirectory of generatedBuildDirectories) {
+        fs.rmSync(path.join(repositoryDirectory, relativeDirectory), {
+            recursive: true,
+            force: true,
+        });
+    }
+    if (outputDirectory) {
+        if (outputCreated) fs.rmSync(outputDirectory, { recursive: true, force: true });
+        else {
+            for (const entry of fs.readdirSync(outputDirectory)) {
+                fs.rmSync(path.join(outputDirectory, entry), {
+                    recursive: true,
+                    force: true,
+                });
+            }
+        }
+    }
+};
+
+const buildPublishableShape = (releasePackages) => {
+    for (const packageEntry of releasePackages) {
+        let task;
+        if (packageEntry.role === 'core') task = 'prepare';
+        else if (['conformance', 'renderer-adapter'].includes(packageEntry.role)) {
+            task = 'build';
+        }
+        if (task) run(yarnCommand, ['workspace', packageEntry.name, 'run', task]);
+    }
+};
+
+const createSbom = ({ workspaceDirectory, sbomPath, packageEntry, archive, commit }) => {
+    const binDirectory = path.join(repositoryDirectory, 'node_modules', '.bin');
+    const environment = {
+        ...process.env,
+        PATH: `${binDirectory}${path.delimiter}${process.env.PATH ?? ''}`,
+    };
+    run(
+        yarnCommand,
+        [
+            'exec',
+            'cyclonedx-yarn',
+            '--production',
+            '--mc-type',
+            'library',
+            '--spec-version',
+            '1.6',
+            '--output-format',
+            'JSON',
+            '--output-reproducible',
+            '--output-file',
+            sbomPath,
+        ],
+        { cwd: workspaceDirectory, env: environment },
+    );
+    const sbom = readJsonFile(sbomPath, `${packageEntry.name} SBOM`);
+    bindSbomToArchive(sbom, {
+        name: packageEntry.name,
+        version: packageEntry.version,
+        sha512: archive.sha512,
+        tarball: archive.tarball,
+        commit,
+    });
+    fs.writeFileSync(sbomPath, `${JSON.stringify(sbom, null, 2)}\n`);
+};
+
+export function generateReleaseEvidence({ output, commit: requestedCommit } = {}) {
+    let outputDirectory;
+    let outputCreated = false;
+    try {
+        const compatibilityManifest = loadCompatibilityMetadata();
+        const releasePackages = selectReleasePackages(compatibilityManifest);
+        const workspaces = discoverWorkspaces();
+        const preparedOutput = prepareOutputDirectory(output);
+        outputDirectory = preparedOutput.outputDirectory;
+        outputCreated = preparedOutput.created;
+        const commit = validateCommit(
+            requestedCommit ??
+                run('git', ['rev-parse', 'HEAD'], { capture: true, timeout: 30_000 }),
+        );
+
+        for (const packageEntry of releasePackages) {
+            const workspace = workspaces.get(packageEntry.name);
+            if (!workspace)
+                throw new Error(
+                    `Public package '${packageEntry.name}' is not a workspace.`,
+                );
+            validatePackedIdentity(workspace.manifest, packageEntry);
+        }
+
+        buildPublishableShape(releasePackages);
+
+        const packageEvidence = [];
+        for (const packageEntry of releasePackages) {
+            const workspace = workspaces.get(packageEntry.name);
+            const stem = packageArtifactStem(packageEntry.name, packageEntry.version);
+            const tarball = validateSafeFilename(`${stem}.tgz`, 'tarball filename');
+            const sbom = validateSafeFilename(`${stem}.cdx.json`, 'SBOM filename');
+            const archivePath = path.join(outputDirectory, tarball);
+            const sbomPath = path.join(outputDirectory, sbom);
+
+            run(yarnCommand, ['pack', '--out', archivePath], {
+                cwd: workspace.directory,
+                capture: true,
+            });
+            validatePackedIdentity(readPackedPackageJson(archivePath), packageEntry);
+            const hashes = computeFileHashes(archivePath);
+            createSbom({
+                workspaceDirectory: workspace.directory,
+                sbomPath,
+                packageEntry,
+                archive: { ...hashes, tarball },
+                commit,
+            });
+            packageEvidence.push({
+                name: packageEntry.name,
+                version: packageEntry.version,
+                role: packageEntry.role,
+                tarball,
+                sha256: hashes.sha256,
+                sha512: hashes.sha512,
+                sbom,
+            });
+        }
+
+        fs.writeFileSync(
+            path.join(outputDirectory, 'SHA256SUMS'),
+            `${packageEvidence.map(({ sha256, tarball }) => `${sha256}  ${tarball}`).join('\n')}\n`,
+        );
+        fs.writeFileSync(
+            path.join(outputDirectory, 'SHA512SUMS'),
+            `${packageEvidence.map(({ sha512, tarball }) => `${sha512}  ${tarball}`).join('\n')}\n`,
+        );
+        const index = {
+            schemaVersion: 1,
+            publicationEnabled: false,
+            commit,
+            packages: packageEvidence,
+        };
+        fs.writeFileSync(
+            path.join(outputDirectory, 'release-evidence.json'),
+            `${JSON.stringify(index, null, 2)}\n`,
+        );
+        validateReleaseEvidenceIndex(index, outputDirectory);
+        return index;
+    } catch (error) {
+        cleanFailureState(outputDirectory, outputCreated);
+        throw error;
+    }
+}
+
+const main = () => {
+    const arguments_ = parseArguments(process.argv.slice(2));
+    const index = generateReleaseEvidence(arguments_);
+    console.log(
+        `Generated source-candidate release evidence for ${index.packages.length} packages at commit ${index.commit}.`,
+    );
+};
+
+if (import.meta.url === pathToFileURL(process.argv[1] ?? '').href) {
+    try {
+        main();
+    } catch (error) {
+        console.error(error instanceof Error ? error.message : String(error));
+        process.exit(1);
+    }
+}
diff --git a/scripts/generate-release-evidence.test.mjs b/scripts/generate-release-evidence.test.mjs
new file mode 100644
index 00000000..0d7354ae
--- /dev/null
+++ b/scripts/generate-release-evidence.test.mjs
@@ -0,0 +1,171 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import assert from 'node:assert/strict';
+import { mkdtempSync, rmSync, writeFileSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import path from 'node:path';
+import { test } from 'node:test';
+import { gzipSync } from 'node:zlib';
+import {
+    archiveBindingProperties,
+    assertFileHashes,
+    readPackedPackageJson,
+    selectReleasePackages,
+    validatePackedIdentity,
+    validateSafeFilename,
+    validateSbom,
+} from './lib/release-evidence.mjs';
+
+const createTarHeader = (entryName, contents) => {
+    const header = Buffer.alloc(512);
+    header.write(entryName, 0, 100, 'utf8');
+    header.write('0000644\0', 100, 8, 'ascii');
+    header.write('0000000\0', 108, 8, 'ascii');
+    header.write('0000000\0', 116, 8, 'ascii');
+    header.write(`${contents.length.toString(8).padStart(11, '0')}\0`, 124, 12, 'ascii');
+    header.write('00000000000\0', 136, 12, 'ascii');
+    header.fill(0x20, 148, 156);
+    header[156] = '0'.charCodeAt(0);
+    header.write('ustar\0', 257, 6, 'ascii');
+    header.write('00', 263, 2, 'ascii');
+    const checksum = [...header].reduce((total, byte) => total + byte, 0);
+    header.write(`${checksum.toString(8).padStart(6, '0')}\0 `, 148, 8, 'ascii');
+    return header;
+};
+
+const createArchive = (filePath, entries) => {
+    const blocks = [];
+    for (const [entryName, value] of entries) {
+        const contents = Buffer.from(
+            typeof value === 'string' ? value : JSON.stringify(value),
+        );
+        blocks.push(createTarHeader(entryName, contents), contents);
+        const padding = (512 - (contents.length % 512)) % 512;
+        if (padding > 0) blocks.push(Buffer.alloc(padding));
+    }
+    blocks.push(Buffer.alloc(1024));
+    writeFileSync(filePath, gzipSync(Buffer.concat(blocks), { mtime: 0 }));
+};
+
+const withTemporaryDirectory = (action) => {
+    const directory = mkdtempSync(path.join(tmpdir(), 'cratis-release-evidence-test-'));
+    try {
+        action(directory);
+    } finally {
+        rmSync(directory, { recursive: true, force: true });
+    }
+};
+
+const compatibilityEntry = {
+    name: '@cratis/example',
+    version: '1.2.3',
+    role: 'tooling',
+    private: false,
+    packageAccess: 'public',
+};
+
+const createBoundSbom = () => ({
+    bomFormat: 'CycloneDX',
+    specVersion: '1.6',
+    metadata: {
+        component: {
+            type: 'library',
+            name: '@cratis/example',
+            version: '1.2.3',
+            'bom-ref': '@cratis/example@1.2.3',
+            hashes: [{ alg: 'SHA-512', content: 'a'.repeat(128) }],
+            properties: [
+                {
+                    name: archiveBindingProperties.archiveFilename,
+                    value: 'cratis-example-1.2.3.tgz',
+                },
+                { name: archiveBindingProperties.archiveSha512, value: 'a'.repeat(128) },
+                { name: archiveBindingProperties.commit, value: 'b'.repeat(40) },
+            ],
+        },
+    },
+    components: [],
+    dependencies: [{ ref: '@cratis/example@1.2.3', dependsOn: [] }],
+});
+
+test('archive hash mismatch fails', () => {
+    withTemporaryDirectory((directory) => {
+        const archivePath = path.join(directory, 'example.tgz');
+        writeFileSync(archivePath, 'archive bytes');
+        assert.throws(
+            () =>
+                assertFileHashes(archivePath, {
+                    sha256: '0'.repeat(64),
+                    sha512: '0'.repeat(128),
+                }),
+            /hash mismatch/,
+        );
+    });
+});
+
+test('wrong packed package identity fails', () => {
+    withTemporaryDirectory((directory) => {
+        const archivePath = path.join(directory, 'example.tgz');
+        createArchive(archivePath, [
+            [
+                'package/package.json',
+                {
+                    name: '@cratis/wrong',
+                    version: '1.2.3',
+                    publishConfig: { access: 'public' },
+                },
+            ],
+        ]);
+        const packedPackage = readPackedPackageJson(archivePath);
+        assert.throws(
+            () => validatePackedIdentity(packedPackage, compatibilityEntry),
+            /identity\/access/,
+        );
+    });
+});
+
+test('missing SBOM archive binding fails', () => {
+    const sbom = createBoundSbom();
+    sbom.metadata.component.properties = sbom.metadata.component.properties.filter(
+        ({ name }) => name !== archiveBindingProperties.archiveFilename,
+    );
+    assert.throws(
+        () =>
+            validateSbom(sbom, {
+                name: compatibilityEntry.name,
+                version: compatibilityEntry.version,
+                sha512: 'a'.repeat(128),
+                tarball: 'cratis-example-1.2.3.tgz',
+                commit: 'b'.repeat(40),
+            }),
+        /missing archive binding/,
+    );
+});
+
+test('path and filename traversal is rejected', () => {
+    assert.throws(() => validateSafeFilename('../example.tgz'), /Unsafe/);
+    assert.throws(() => validateSafeFilename('folder\\example.tgz'), /Unsafe/);
+    withTemporaryDirectory((directory) => {
+        const archivePath = path.join(directory, 'unsafe.tgz');
+        createArchive(archivePath, [
+            ['../package.json', '{}'],
+            ['package/package.json', { name: '@cratis/example', version: '1.2.3' }],
+        ]);
+        assert.throws(() => readPackedPackageJson(archivePath), /Unsafe archive path/);
+    });
+});
+
+test('release package order comes only from gaScope', () => {
+    const manifest = {
+        gaScope: { publicPackages: ['@cratis/second', '@cratis/first'] },
+        packages: [
+            { name: '@cratis/first', version: '1.0.0' },
+            { name: '@cratis/second', version: '2.0.0' },
+        ],
+    };
+    assert.deepEqual(
+        selectReleasePackages(manifest).map(({ name }) => name),
+        ['@cratis/second', '@cratis/first'],
+    );
+});
diff --git a/scripts/lib/release-evidence.mjs b/scripts/lib/release-evidence.mjs
new file mode 100644
index 00000000..bcd6dab6
--- /dev/null
+++ b/scripts/lib/release-evidence.mjs
@@ -0,0 +1,449 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { createHash } from 'node:crypto';
+import fs from 'node:fs';
+import path from 'node:path';
+import { gunzipSync } from 'node:zlib';
+
+export const archiveBindingProperties = Object.freeze({
+    archiveFilename: 'urn:cratis:components:release-evidence:archive-filename',
+    archiveSha512: 'urn:cratis:components:release-evidence:archive-sha512',
+    commit: 'urn:cratis:components:release-evidence:commit',
+});
+
+export function validateCommit(commit) {
+    if (typeof commit !== 'string' || !/^[0-9a-f]{40}$/iu.test(commit)) {
+        throw new Error('Commit must be exactly 40 hexadecimal characters.');
+    }
+    return commit.toLowerCase();
+}
+
+export function validateSafeFilename(filename, description = 'filename') {
+    if (
+        typeof filename !== 'string' ||
+        !/^[a-z0-9][a-z0-9._-]*$/iu.test(filename) ||
+        filename === '.' ||
+        filename === '..' ||
+        path.posix.basename(filename) !== filename ||
+        path.win32.basename(filename) !== filename
+    ) {
+        throw new Error(`Unsafe ${description} '${String(filename)}'.`);
+    }
+    return filename;
+}
+
+export function packageArtifactStem(packageName, version) {
+    if (
+        typeof packageName !== 'string' ||
+        !/^@[a-z0-9._-]+\/[a-z0-9._-]+$/iu.test(packageName)
+    ) {
+        throw new Error(`Unsafe package name '${String(packageName)}'.`);
+    }
+    if (
+        typeof version !== 'string' ||
+        !/^[0-9]+\.[0-9]+\.[0-9]+(?:-[0-9A-Za-z.-]+)?$/u.test(version)
+    ) {
+        throw new Error(`Unsafe package version '${String(version)}'.`);
+    }
+    return validateSafeFilename(
+        `${packageName.slice(1).replace('/', '-')}-${version}`,
+        'artifact stem',
+    );
+}
+
+export function selectReleasePackages(compatibilityManifest) {
+    const packageOrder = compatibilityManifest.gaScope?.publicPackages;
+    if (!Array.isArray(packageOrder) || packageOrder.length === 0) {
+        throw new Error('Compatibility metadata must define gaScope.publicPackages.');
+    }
+    const entries = compatibilityManifest.packages;
+    if (!Array.isArray(entries)) {
+        throw new Error('Compatibility metadata must define package entries.');
+    }
+    const entriesByName = new Map();
+    for (const entry of entries) {
+        if (!entry || typeof entry.name !== 'string' || entriesByName.has(entry.name)) {
+            throw new Error(
+                `Compatibility metadata contains an invalid or duplicate package entry '${entry?.name ?? '<missing>'}'.`,
+            );
+        }
+        entriesByName.set(entry.name, entry);
+    }
+    const seen = new Set();
+    return packageOrder.map((packageName) => {
+        if (typeof packageName !== 'string' || seen.has(packageName)) {
+            throw new Error(
+                `gaScope.publicPackages contains an invalid or duplicate package '${String(packageName)}'.`,
+            );
+        }
+        seen.add(packageName);
+        const entry = entriesByName.get(packageName);
+        if (!entry) {
+            throw new Error(
+                `gaScope package '${packageName}' has no compatibility entry.`,
+            );
+        }
+        return entry;
+    });
+}
+
+export function computeFileHashes(filePath) {
+    const contents = fs.readFileSync(filePath);
+    return {
+        sha256: createHash('sha256').update(contents).digest('hex'),
+        sha512: createHash('sha512').update(contents).digest('hex'),
+    };
+}
+
+export function assertFileHashes(filePath, expected) {
+    const actual = computeFileHashes(filePath);
+    if (actual.sha256 !== expected.sha256 || actual.sha512 !== expected.sha512) {
+        throw new Error(`Archive hash mismatch for '${path.basename(filePath)}'.`);
+    }
+}
+
+const readJsonFile = (filePath, description) => {
+    try {
+        return JSON.parse(fs.readFileSync(filePath, 'utf8'));
+    } catch (error) {
+        throw new Error(
+            `Could not read ${description}: ${error instanceof Error ? error.message : String(error)}.`,
+            { cause: error },
+        );
+    }
+};
+
+const readNullTerminated = (buffer) => {
+    const end = buffer.indexOf(0);
+    return buffer.subarray(0, end < 0 ? buffer.length : end).toString('utf8');
+};
+
+const readTarNumber = (buffer, field) => {
+    if ((buffer[0] & 0x80) !== 0) {
+        throw new Error(`Unsupported binary tar ${field}.`);
+    }
+    const value = readNullTerminated(buffer).trim();
+    if (value === '') return 0;
+    if (!/^[0-7]+$/u.test(value)) throw new Error(`Invalid tar ${field}.`);
+    const parsed = Number.parseInt(value, 8);
+    if (!Number.isSafeInteger(parsed) || parsed < 0)
+        throw new Error(`Invalid tar ${field}.`);
+    return parsed;
+};
+
+const validateTarChecksum = (header) => {
+    const expected = readTarNumber(header.subarray(148, 156), 'checksum');
+    let actual = 0;
+    for (let index = 0; index < header.length; index += 1) {
+        actual += index >= 148 && index < 156 ? 0x20 : header[index];
+    }
+    if (actual !== expected) throw new Error('Invalid tar header checksum.');
+};
+
+const parsePax = (buffer) => {
+    const values = {};
+    let offset = 0;
+    while (offset < buffer.length) {
+        const separator = buffer.indexOf(0x20, offset);
+        if (separator < 0) throw new Error('Invalid PAX record.');
+        const lengthText = buffer.subarray(offset, separator).toString('ascii');
+        if (!/^[1-9][0-9]*$/u.test(lengthText))
+            throw new Error('Invalid PAX record length.');
+        const length = Number.parseInt(lengthText, 10);
+        const recordEnd = offset + length;
+        if (
+            !Number.isSafeInteger(length) ||
+            recordEnd > buffer.length ||
+            buffer[recordEnd - 1] !== 0x0a
+        ) {
+            throw new Error('Invalid PAX record bounds.');
+        }
+        const record = buffer.subarray(separator + 1, recordEnd - 1).toString('utf8');
+        const equals = record.indexOf('=');
+        if (equals <= 0) throw new Error('Invalid PAX record value.');
+        values[record.slice(0, equals)] = record.slice(equals + 1);
+        offset = recordEnd;
+    }
+    return values;
+};
+
+function validateArchivePath(entryPath) {
+    if (
+        typeof entryPath !== 'string' ||
+        entryPath.length === 0 ||
+        entryPath.includes('\\') ||
+        entryPath.includes('\0') ||
+        path.posix.isAbsolute(entryPath) ||
+        /^[a-z]:/iu.test(entryPath)
+    ) {
+        throw new Error(`Unsafe archive path '${String(entryPath)}'.`);
+    }
+    const segments = entryPath.split('/');
+    if (
+        segments.some((segment) => segment === '' || segment === '.' || segment === '..')
+    ) {
+        throw new Error(`Unsafe archive path '${entryPath}'.`);
+    }
+    return entryPath;
+}
+
+export function readPackedPackageJson(archivePath) {
+    const archive = gunzipSync(fs.readFileSync(archivePath));
+    let offset = 0;
+    let longName;
+    let pax = {};
+    let packedManifest;
+    let endMarkerFound = false;
+
+    while (offset + 512 <= archive.length) {
+        const header = archive.subarray(offset, offset + 512);
+        if (header.every((byte) => byte === 0)) {
+            endMarkerFound = true;
+            break;
+        }
+        validateTarChecksum(header);
+        const size = readTarNumber(header.subarray(124, 136), 'entry size');
+        const type = String.fromCharCode(header[156] || 0);
+        const name = readNullTerminated(header.subarray(0, 100));
+        const prefix = readNullTerminated(header.subarray(345, 500));
+        const dataStart = offset + 512;
+        const dataEnd = dataStart + size;
+        const nextOffset = dataStart + Math.ceil(size / 512) * 512;
+        if (dataEnd > archive.length || nextOffset > archive.length) {
+            throw new Error('Tar entry exceeds archive bounds.');
+        }
+        const data = archive.subarray(dataStart, dataEnd);
+        offset = nextOffset;
+
+        if (type === 'L') {
+            longName = readNullTerminated(data);
+            continue;
+        }
+        if (type === 'x') {
+            pax = parsePax(data);
+            continue;
+        }
+        if (type === 'g') continue;
+
+        const entryName = pax.path ?? longName ?? (prefix ? `${prefix}/${name}` : name);
+        longName = undefined;
+        pax = {};
+        validateArchivePath(entryName);
+        if (type === '1' || type === '2') {
+            validateArchivePath(readNullTerminated(header.subarray(157, 257)));
+        }
+        if (entryName !== 'package/package.json') continue;
+        if (type !== '\0' && type !== '0') {
+            throw new Error('Packed package.json must be a regular archive entry.');
+        }
+        if (packedManifest)
+            throw new Error('Archive contains duplicate package/package.json entries.');
+        try {
+            packedManifest = JSON.parse(data.toString('utf8'));
+        } catch (error) {
+            throw new Error(
+                `Packed package.json is invalid JSON: ${error instanceof Error ? error.message : String(error)}.`,
+                { cause: error },
+            );
+        }
+    }
+
+    if (!endMarkerFound) throw new Error('Tar archive has no end marker.');
+    if (!packedManifest) throw new Error('Archive is missing package/package.json.');
+    return packedManifest;
+}
+
+export function validatePackedIdentity(packedPackage, compatibilityEntry) {
+    if (
+        packedPackage?.name !== compatibilityEntry.name ||
+        packedPackage?.version !== compatibilityEntry.version ||
+        packedPackage?.private === true ||
+        packedPackage?.publishConfig?.access !== compatibilityEntry.packageAccess ||
+        compatibilityEntry.packageAccess !== 'public' ||
+        compatibilityEntry.private !== false
+    ) {
+        throw new Error(
+            `Packed package identity/access does not match compatibility metadata for '${compatibilityEntry.name}'.`,
+        );
+    }
+}
+
+const componentPackageName = (component) => {
+    if (typeof component?.name !== 'string') return undefined;
+    return typeof component.group === 'string' && component.group.length > 0
+        ? `${component.group}/${component.name}`
+        : component.name;
+};
+
+const validateDependencyReferences = (sbom) => {
+    if (!Array.isArray(sbom.dependencies))
+        throw new Error('SBOM dependencies must be an array.');
+    if (sbom.components !== undefined && !Array.isArray(sbom.components)) {
+        throw new Error('SBOM components must be an array when present.');
+    }
+    const components = [sbom.metadata.component, ...(sbom.components ?? [])];
+    const references = new Set();
+    for (const component of components) {
+        const reference = component?.['bom-ref'];
+        if (
+            typeof reference !== 'string' ||
+            reference.length === 0 ||
+            references.has(reference)
+        ) {
+            throw new Error('Every SBOM component must have a unique non-empty bom-ref.');
+        }
+        references.add(reference);
+    }
+    const dependencyRefs = new Set();
+    for (const dependency of sbom.dependencies) {
+        if (
+            typeof dependency?.ref !== 'string' ||
+            !references.has(dependency.ref) ||
+            dependencyRefs.has(dependency.ref)
+        ) {
+            throw new Error(
+                `SBOM contains an invalid dependency ref '${dependency?.ref ?? '<missing>'}'.`,
+            );
+        }
+        dependencyRefs.add(dependency.ref);
+        const dependsOn = dependency.dependsOn ?? [];
+        if (
+            !Array.isArray(dependsOn) ||
+            dependsOn.some((reference) => !references.has(reference))
+        ) {
+            throw new Error(
+                `SBOM dependency '${dependency.ref}' contains an invalid dependsOn reference.`,
+            );
+        }
+    }
+    if (!dependencyRefs.has(sbom.metadata.component['bom-ref'])) {
+        throw new Error('SBOM dependencies do not include the metadata component.');
+    }
+};
+
+export function validateSbom(sbom, expected, { requireArchiveBinding = true } = {}) {
+    if (sbom?.bomFormat !== 'CycloneDX' || sbom?.specVersion !== '1.6') {
+        throw new Error('SBOM must be CycloneDX JSON specification version 1.6.');
+    }
+    const component = sbom.metadata?.component;
+    if (!component || component.type !== 'library')
+        throw new Error('SBOM metadata.component must be a library.');
+    if (
+        componentPackageName(component) !== expected.name ||
+        component.version !== expected.version
+    ) {
+        throw new Error(
+            `SBOM root component is not '${expected.name}@${expected.version}'.`,
+        );
+    }
+    validateDependencyReferences(sbom);
+    if (!requireArchiveBinding) return;
+
+    validateSafeFilename(expected.tarball, 'SBOM archive filename');
+    validateCommit(expected.commit);
+    if (!/^[0-9a-f]{128}$/u.test(expected.sha512)) {
+        throw new Error('Expected archive SHA-512 must be lowercase hexadecimal.');
+    }
+    if (!Array.isArray(component.hashes) || component.hashes.length === 0) {
+        throw new Error('SBOM root component is missing hashes.');
+    }
+    const hashAlgorithms = new Set();
+    for (const hash of component.hashes) {
+        if (
+            typeof hash?.alg !== 'string' ||
+            typeof hash.content !== 'string' ||
+            !/^[0-9a-f]+$/iu.test(hash.content) ||
+            hashAlgorithms.has(hash.alg)
+        ) {
+            throw new Error('SBOM root component contains an invalid or duplicate hash.');
+        }
+        hashAlgorithms.add(hash.alg);
+    }
+    const sha512 = component.hashes.find(({ alg }) => alg === 'SHA-512')?.content;
+    if (sha512 !== expected.sha512)
+        throw new Error('SBOM root component SHA-512 does not match the archive.');
+    if (!Array.isArray(component.properties))
+        throw new Error('SBOM root component is missing archive-binding properties.');
+    const properties = new Map();
+    for (const property of component.properties) {
+        if (
+            typeof property?.name !== 'string' ||
+            typeof property.value !== 'string' ||
+            properties.has(property.name)
+        ) {
+            throw new Error(
+                'SBOM root component contains an invalid or duplicate property.',
+            );
+        }
+        properties.set(property.name, property.value);
+    }
+    for (const [propertyName, expectedValue] of [
+        [archiveBindingProperties.archiveFilename, expected.tarball],
+        [archiveBindingProperties.archiveSha512, expected.sha512],
+        [archiveBindingProperties.commit, expected.commit],
+    ]) {
+        if (properties.get(propertyName) !== expectedValue) {
+            throw new Error(
+                `SBOM root component is missing archive binding '${propertyName}'.`,
+            );
+        }
+    }
+    if (sbom.serialNumber !== undefined || sbom.metadata.timestamp !== undefined) {
+        throw new Error(
+            'Reproducible SBOM must not contain a serial number or timestamp.',
+        );
+    }
+}
+
+export function bindSbomToArchive(sbom, binding) {
+    validateSbom(sbom, binding, { requireArchiveBinding: false });
+    const component = sbom.metadata.component;
+    component.name = binding.name;
+    delete component.group;
+    component.version = binding.version;
+    component.hashes = [
+        ...(component.hashes ?? []).filter(({ alg }) => alg !== 'SHA-512'),
+        { alg: 'SHA-512', content: binding.sha512 },
+    ].sort(({ alg: left }, { alg: right }) => left.localeCompare(right));
+    const bindingNames = new Set(Object.values(archiveBindingProperties));
+    component.properties = [
+        ...(component.properties ?? []).filter(({ name }) => !bindingNames.has(name)),
+        { name: archiveBindingProperties.archiveFilename, value: binding.tarball },
+        { name: archiveBindingProperties.archiveSha512, value: binding.sha512 },
+        { name: archiveBindingProperties.commit, value: binding.commit },
+    ].sort(({ name: left }, { name: right }) => left.localeCompare(right));
+    delete sbom.serialNumber;
+    delete sbom.metadata.timestamp;
+    validateSbom(sbom, binding);
+    return sbom;
+}
+
+export function validateReleaseEvidenceIndex(index, outputDirectory) {
+    if (index?.schemaVersion !== 1 || index.publicationEnabled !== false) {
+        throw new Error(
+            'Release evidence index must be schema 1 and publication-disabled.',
+        );
+    }
+    validateCommit(index.commit);
+    if (!Array.isArray(index.packages) || index.packages.length === 0) {
+        throw new Error('Release evidence index must contain packages.');
+    }
+    for (const packageEvidence of index.packages) {
+        validateSafeFilename(packageEvidence.tarball, 'tarball filename');
+        validateSafeFilename(packageEvidence.sbom, 'SBOM filename');
+        const archivePath = path.join(outputDirectory, packageEvidence.tarball);
+        assertFileHashes(archivePath, packageEvidence);
+        const sbom = readJsonFile(
+            path.join(outputDirectory, packageEvidence.sbom),
+            `${packageEvidence.name} SBOM`,
+        );
+        validateSbom(sbom, {
+            name: packageEvidence.name,
+            version: packageEvidence.version,
+            sha512: packageEvidence.sha512,
+            tarball: packageEvidence.tarball,
+            commit: index.commit,
+        });
+    }
+}
diff --git a/scripts/verify-release-safety.mjs b/scripts/verify-release-safety.mjs
index 3e21ff8a..d0c40d41 100644
--- a/scripts/verify-release-safety.mjs
+++ b/scripts/verify-release-safety.mjs
@@ -103,6 +103,8 @@ export function verifyReleaseSafety(rootDirectory = repositoryDirectory) {
         );
     }
 
+    verifyEvidenceWorkflow(rootDirectory);
+
     const compatibilityManifest = readJson(
         path.join(rootDirectory, 'compat-manifest.json'),
     );
@@ -125,6 +127,60 @@ export function verifyReleaseSafety(rootDirectory = repositoryDirectory) {
     }
 }
 
+function verifyEvidenceWorkflow(rootDirectory) {
+    const workflow = fs.readFileSync(
+        path.join(rootDirectory, '.github/workflows/javascript-build.yml'),
+        'utf8',
+    );
+    const job = workflow.match(
+        /^    release-evidence:\s*\n([\s\S]*?)(?=^    [a-zA-Z0-9_-]+:\s*\n|(?![\s\S]))/mu,
+    )?.[1];
+    if (!job) throw new Error('javascript-build.yml must define a release-evidence job.');
+    if (!/^        permissions:\s*\n            contents: read\s*$/mu.test(job)) {
+        throw new Error(
+            'The release-evidence job must have explicit read-only contents permission.',
+        );
+    }
+    if (
+        /^\s*[a-z-]+:\s*write\s*$/imu.test(job) ||
+        /^\s*(?:id-token|deployments):/imu.test(job) ||
+        /^\s*environment:/imu.test(job) ||
+        /^\s*secrets:/imu.test(job) ||
+        /\$\{\{\s*secrets\./iu.test(job)
+    ) {
+        throw new Error(
+            'The release-evidence job must not request write permissions, identity/deployment permissions, an environment, or secrets.',
+        );
+    }
+    if (/\bnpm\s+publish\b|\byarn\s+(?:npm\s+)?publish\b/iu.test(job)) {
+        throw new Error('The release-evidence job must not publish packages.');
+    }
+    if (!/yarn generate-release-evidence\s+--output/iu.test(job)) {
+        throw new Error(
+            'The release-evidence job must run the source-candidate evidence generator.',
+        );
+    }
+    if (
+        !/uses:\s*actions\/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02\s*# v4/iu.test(
+            job,
+        )
+    ) {
+        throw new Error(
+            'The release-evidence job must use the reviewed SHA-pinned upload-artifact action.',
+        );
+    }
+    if (!/^\s*if-no-files-found:\s*error\s*$/imu.test(job)) {
+        throw new Error(
+            'The release-evidence artifact upload must fail when files are missing.',
+        );
+    }
+    if (!/^\s*retention-days:\s*30\s*$/imu.test(job)) {
+        throw new Error(
+            'The release-evidence artifact must have explicit 30-day retention.',
+        );
+    }
+}
+
 function collectExecutableFiles(rootDirectory) {
     const files = [];
     const ignored = new Set([
diff --git a/scripts/verify-release-safety.test.mjs b/scripts/verify-release-safety.test.mjs
index 1f41fedf..baa1c58d 100644
--- a/scripts/verify-release-safety.test.mjs
+++ b/scripts/verify-release-safety.test.mjs
@@ -23,6 +23,7 @@ const createFixture = () => {
         'run-task-on-workspaces.js',
         'compat-manifest.json',
         '.github/workflows/publish.yml',
+        '.github/workflows/javascript-build.yml',
     ]) {
         writeFileSync(
             path.join(fixture, relativePath),
@@ -78,6 +79,33 @@ test('the guard detects an automatic publish trigger', () => {
     });
 });
 
+test('the guard detects release-evidence write permissions', () => {
+    withFixture((fixture) => {
+        const workflowPath = path.join(fixture, '.github/workflows/javascript-build.yml');
+        const workflow = readFileSync(workflowPath, 'utf8').replace(
+            '            contents: read\n',
+            '            contents: read\n            id-token: write\n',
+        );
+        writeFileSync(workflowPath, workflow);
+        assert.throws(
+            () => verifyReleaseSafety(fixture),
+            /must not request write permissions/,
+        );
+    });
+});
+
+test('the guard detects missing release-evidence retention', () => {
+    withFixture((fixture) => {
+        const workflowPath = path.join(fixture, '.github/workflows/javascript-build.yml');
+        const workflow = readFileSync(workflowPath, 'utf8').replace(
+            '                  retention-days: 30\n',
+            '',
+        );
+        writeFileSync(workflowPath, workflow);
+        assert.throws(() => verifyReleaseSafety(fixture), /explicit 30-day retention/);
+    });
+});
+
 test('the guard detects compatibility publication authorization drift', () => {
     withFixture((fixture) => {
         const manifestPath = path.join(fixture, 'compat-manifest.json');
diff --git a/yarn.lock b/yarn.lock
index 82ec7084..32e77305 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -520,6 +520,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@cyclonedx/yarn-plugin-cyclonedx@npm:3.4.0":
+  version: 3.4.0
+  resolution: "@cyclonedx/yarn-plugin-cyclonedx@npm:3.4.0"
+  dependenciesMeta:
+    eslint:
+      unplugged: true
+    eslint-plugin-eslint-comments:
+      unplugged: true
+  bin:
+    cyclonedx-yarn: bin/cyclonedx-yarn-cli.js
+  checksum: 10/0684f6cf2be11439a8557d76a830166c08ef879f7f3e5643985f4393b710a8a9a4485310fbf0230ce0484c27257e86260480353caeb4f808f6705c5b2246b560
+  languageName: node
+  linkType: hard
+
 "@emnapi/core@npm:1.11.0":
   version: 1.11.0
   resolution: "@emnapi/core@npm:1.11.0"
@@ -7767,6 +7781,7 @@ __metadata:
     "@cratis/arc": "npm:22.5.0"
     "@cratis/arc.react": "npm:22.5.0"
     "@cratis/arc.vite": "npm:22.5.0"
+    "@cyclonedx/yarn-plugin-cyclonedx": "npm:3.4.0"
     "@eslint/eslintrc": "npm:^3.3.6"
     "@eslint/js": "npm:^10.0.1"
     "@rollup/plugin-node-resolve": "npm:^16.0.3"

From 87cd6d71d7cfe266ca035521a2e76fd215e4e0bc Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Fri, 28 Aug 2026 22:39:09 +0200
Subject: [PATCH 250/267] Bind release evidence to clean commits

---
 scripts/generate-release-evidence.mjs      | 39 +++++++++++++++++++---
 scripts/generate-release-evidence.test.mjs | 19 +++++++++++
 2 files changed, 54 insertions(+), 4 deletions(-)

diff --git a/scripts/generate-release-evidence.mjs b/scripts/generate-release-evidence.mjs
index 164652a1..03bc13b8 100644
--- a/scripts/generate-release-evidence.mjs
+++ b/scripts/generate-release-evidence.mjs
@@ -80,6 +80,38 @@ const run = (command, arguments_, options = {}) => {
 
 const yarnCommand = process.platform === 'win32' ? 'yarn.cmd' : 'yarn';
 
+/** Resolves and verifies that evidence is bound to the exact checked-out commit. */
+export const resolveEvidenceCommit = (requestedCommit) => {
+    const headCommit = validateCommit(
+        run('git', ['rev-parse', 'HEAD'], { capture: true, timeout: 30_000 }),
+    );
+    const evidenceCommit = validateCommit(requestedCommit ?? headCommit);
+    if (evidenceCommit !== headCommit) {
+        throw new Error(
+            `Evidence commit ${evidenceCommit} does not match checked-out HEAD ${headCommit}.`,
+        );
+    }
+    return headCommit;
+};
+
+/** Rejects tracked or staged bytes that are not represented by the evidence commit. */
+export const validateCleanWorkingTreeStatus = (status) => {
+    if (typeof status !== 'string' || status.trim().length > 0) {
+        throw new Error(
+            'Release evidence requires a clean tracked working tree at the checked-out commit.',
+        );
+    }
+};
+
+const requireCleanWorkingTree = () =>
+    validateCleanWorkingTreeStatus(
+        run(
+            'git',
+            ['status', '--porcelain', '--untracked-files=no'],
+            { capture: true, timeout: 30_000 },
+        ),
+    );
+
 const readJsonFile = (filePath, description) => {
     try {
         return JSON.parse(fs.readFileSync(filePath, 'utf8'));
@@ -241,13 +273,11 @@ export function generateReleaseEvidence({ output, commit: requestedCommit } = {}
         const compatibilityManifest = loadCompatibilityMetadata();
         const releasePackages = selectReleasePackages(compatibilityManifest);
         const workspaces = discoverWorkspaces();
+        const commit = resolveEvidenceCommit(requestedCommit);
+        requireCleanWorkingTree();
         const preparedOutput = prepareOutputDirectory(output);
         outputDirectory = preparedOutput.outputDirectory;
         outputCreated = preparedOutput.created;
-        const commit = validateCommit(
-            requestedCommit ??
-                run('git', ['rev-parse', 'HEAD'], { capture: true, timeout: 30_000 }),
-        );
 
         for (const packageEntry of releasePackages) {
             const workspace = workspaces.get(packageEntry.name);
@@ -312,6 +342,7 @@ export function generateReleaseEvidence({ output, commit: requestedCommit } = {}
             `${JSON.stringify(index, null, 2)}\n`,
         );
         validateReleaseEvidenceIndex(index, outputDirectory);
+        requireCleanWorkingTree();
         return index;
     } catch (error) {
         cleanFailureState(outputDirectory, outputCreated);
diff --git a/scripts/generate-release-evidence.test.mjs b/scripts/generate-release-evidence.test.mjs
index 0d7354ae..d76d9eed 100644
--- a/scripts/generate-release-evidence.test.mjs
+++ b/scripts/generate-release-evidence.test.mjs
@@ -7,6 +7,10 @@ import { tmpdir } from 'node:os';
 import path from 'node:path';
 import { test } from 'node:test';
 import { gzipSync } from 'node:zlib';
+import {
+    resolveEvidenceCommit,
+    validateCleanWorkingTreeStatus,
+} from './generate-release-evidence.mjs';
 import {
     archiveBindingProperties,
     assertFileHashes,
@@ -89,6 +93,21 @@ const createBoundSbom = () => ({
     dependencies: [{ ref: '@cratis/example@1.2.3', dependsOn: [] }],
 });
 
+test('evidence commit must match the checked-out HEAD', () => {
+    assert.throws(
+        () => resolveEvidenceCommit('0'.repeat(40)),
+        /does not match checked-out HEAD/,
+    );
+});
+
+test('release evidence rejects tracked working-tree drift', () => {
+    assert.doesNotThrow(() => validateCleanWorkingTreeStatus(''));
+    assert.throws(
+        () => validateCleanWorkingTreeStatus(' M package.json'),
+        /requires a clean tracked working tree/,
+    );
+});
+
 test('archive hash mismatch fails', () => {
     withTemporaryDirectory((directory) => {
         const archivePath = path.join(directory, 'example.tgz');

From 3b9b09b15d8923bd7840572df7a3583db2aad3ef Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Fri, 28 Aug 2026 22:40:38 +0200
Subject: [PATCH 251/267] Format release evidence guard

---
 scripts/generate-release-evidence.mjs | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/scripts/generate-release-evidence.mjs b/scripts/generate-release-evidence.mjs
index 03bc13b8..b58010be 100644
--- a/scripts/generate-release-evidence.mjs
+++ b/scripts/generate-release-evidence.mjs
@@ -105,11 +105,10 @@ export const validateCleanWorkingTreeStatus = (status) => {
 
 const requireCleanWorkingTree = () =>
     validateCleanWorkingTreeStatus(
-        run(
-            'git',
-            ['status', '--porcelain', '--untracked-files=no'],
-            { capture: true, timeout: 30_000 },
-        ),
+        run('git', ['status', '--porcelain', '--untracked-files=no'], {
+            capture: true,
+            timeout: 30_000,
+        }),
     );
 
 const readJsonFile = (filePath, description) => {

From b4badcbc4a33dd44bf1ad37e23bce9925bd9eccf Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Fri, 28 Aug 2026 22:49:52 +0200
Subject: [PATCH 252/267] Document stable renderer slot contracts

---
 Source/renderer/presentation.ts | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/Source/renderer/presentation.ts b/Source/renderer/presentation.ts
index 517b6cc6..6ebee1fb 100644
--- a/Source/renderer/presentation.ts
+++ b/Source/renderer/presentation.ts
@@ -41,14 +41,23 @@ export type CratisPresentationSlotId = (typeof cratisPresentationSlotIds)[number
 
 /** Exact public component prop and ref contracts covered by the stable presentation profile. */
 export interface CratisPresentationSlots {
+    /** Cratis button presentation contract, including native button refs and form behavior. */
     readonly 'common.button': ButtonProps;
+    /** Accessible icon-only button contract with native button ownership. */
     readonly 'common.iconButton': IconButtonProps;
+    /** Native text-input contract with semantic value-first change events. */
     readonly 'common.textInput': TextInputProps;
+    /** Native multiline text-input contract with semantic value-first change events. */
     readonly 'common.textArea': TextAreaProps;
+    /** Native checkbox contract with checked state, form participation, and input refs. */
     readonly 'common.checkbox': CheckboxProps;
+    /** Native radio-option contract with selection state, form participation, and input refs. */
     readonly 'common.radio': RadioProps;
+    /** Boolean switch contract preserving switch semantics and input ownership. */
     readonly 'common.switch': SwitchProps;
+    /** Determinate or indeterminate progress presentation contract. */
     readonly 'common.progress': ProgressBarProps;
+    /** Non-interactive semantic surface and native-element presentation contract. */
     readonly 'common.surface': SurfaceProps;
 }
 

From e0b0975e36317eb541552030051c71307ebbf5d6 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Sat, 29 Aug 2026 00:12:42 +0200
Subject: [PATCH 253/267] Use durable lowercase release policy path

---
 .github/workflows/javascript-build.yml      | 4 ++--
 .github/workflows/markdown-verification.yml | 8 ++++----
 README.md                                   | 2 +-
 RELEASE.md => release.md                    | 0
 run-task-on-workspaces.js                   | 2 +-
 5 files changed, 8 insertions(+), 8 deletions(-)
 rename RELEASE.md => release.md (100%)

diff --git a/.github/workflows/javascript-build.yml b/.github/workflows/javascript-build.yml
index 7c9493e8..18cf0e30 100644
--- a/.github/workflows/javascript-build.yml
+++ b/.github/workflows/javascript-build.yml
@@ -29,7 +29,7 @@ on:
             - 'scripts/**'
             - 'compat-manifest.json'
             - 'README.md'
-            - 'RELEASE.md'
+            - 'release.md'
             - 'run-task-on-workspaces.js'
             - 'package.json'
             - 'rollup.config.mjs'
@@ -51,7 +51,7 @@ on:
             - 'scripts/**'
             - 'compat-manifest.json'
             - 'README.md'
-            - 'RELEASE.md'
+            - 'release.md'
             - 'run-task-on-workspaces.js'
             - 'package.json'
             - 'rollup.config.mjs'
diff --git a/.github/workflows/markdown-verification.yml b/.github/workflows/markdown-verification.yml
index 74ba092a..a075e5d0 100644
--- a/.github/workflows/markdown-verification.yml
+++ b/.github/workflows/markdown-verification.yml
@@ -8,7 +8,7 @@ on:
         paths:
             - 'Documentation/**'
             - 'README.md'
-            - 'RELEASE.md'
+            - 'release.md'
             - 'Source/*.md'
             - 'Codemods/*.md'
             - 'ESLint/*.md'
@@ -21,7 +21,7 @@ on:
         paths:
             - 'Documentation/**'
             - 'README.md'
-            - 'RELEASE.md'
+            - 'release.md'
             - 'Source/*.md'
             - 'Codemods/*.md'
             - 'ESLint/*.md'
@@ -51,7 +51,7 @@ jobs:
               with:
                   globs: |
                       README.md
-                      RELEASE.md
+                      release.md
                       Documentation/**/*.md
                       Documentation/**/*.mdx
                       Source/*.md
@@ -86,7 +86,7 @@ jobs:
               with:
                   paths: |
                       README.md
-                      RELEASE.md
+                      release.md
                       Source/*.md
                       Codemods/*.md
                       ESLint/*.md
diff --git a/README.md b/README.md
index 198cea8d..1a02131d 100644
--- a/README.md
+++ b/README.md
@@ -135,7 +135,7 @@ README](./ESLint/README.md) owns installation and flat-config composition. Compo
 3.x codemod train. Use tooling in `>=4 <5` (for example the shell-safe `^4.0.0` range), never
 `latest`. Codemod and ESLint patches release independently from Core; codemod preflight enforces
 the bundled compatibility manifest and installed Components support window. Publication remains
-fail closed under the repository [release policy](./RELEASE.md).
+fail closed under the repository [release policy](./release.md).
 
 ## Contributing
 
diff --git a/RELEASE.md b/release.md
similarity index 100%
rename from RELEASE.md
rename to release.md
diff --git a/run-task-on-workspaces.js b/run-task-on-workspaces.js
index 20b8b851..1aa297b9 100755
--- a/run-task-on-workspaces.js
+++ b/run-task-on-workspaces.js
@@ -11,7 +11,7 @@ if (process.argv.length < 3) {
 const task = process.argv[2];
 if (task === 'publish-version') {
     console.error(
-        "The obsolete 'publish-version' workspace task is disabled. Releases require the reviewed, immutable-tarball process in RELEASE.md.",
+        "The obsolete 'publish-version' workspace task is disabled. Releases require the reviewed, immutable-tarball process in release.md.",
     );
     process.exit(1);
 }

From f42ea898c05027cdbf13758e1367d9e130ee2b2c Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Sat, 29 Aug 2026 00:32:14 +0200
Subject: [PATCH 254/267] Improve Components V4 documentation contracts

Clarify the stable renderer boundary, setup-only imports, provider ownership, and post-V4 issue scope while removing stale version and evidence-count claims. Complete documentation navigation and keep local Markdown verification aligned with CI.
---
 .github/workflows/markdown-verification.yml   |  4 ++
 Adapters/Mui/CONFORMANCE.md                   |  4 +-
 Adapters/PrimeReact/CONFORMANCE.md            |  6 +-
 Adapters/PrimeReact10/CONFORMANCE.md          |  4 +-
 Conformance/CONFORMANCE.md                    |  4 +-
 Documentation/Chat/index.md                   |  2 +-
 Documentation/CommandForm/index.md            |  2 +-
 .../CommandForm/multi-select-field.md         |  2 +-
 Documentation/CommandForm/password-field.md   |  2 +-
 Documentation/CommandForm/rating-field.md     |  2 +-
 .../CommandForm/toggle-switch-field.md        |  2 +-
 Documentation/Common/basic-controls.md        |  3 +
 .../Common/cratis-components-provider.md      | 59 +++++++++++++++----
 Documentation/Display/index.md                | 10 +++-
 Documentation/Display/toc.yml                 |  2 +
 Documentation/Dropdown/index.md               |  2 +-
 Documentation/Dropdown/toc.yml                |  2 +
 Documentation/Notifications/index.md          |  2 +-
 Documentation/Notifications/toc.yml           |  2 +
 Documentation/ObjectContentEditor/toc.yml     |  2 +
 Documentation/ObjectNavigationalBar/index.md  |  9 ++-
 Documentation/ObjectNavigationalBar/toc.yml   |  2 +
 Documentation/Styling/baseline-theme.md       |  4 +-
 Documentation/Styling/cratis-tokens.md        | 14 +++--
 ...04-stable-presentation-renderer-profile.md |  3 +-
 Documentation/decisions/index.md              | 21 +++++++
 Documentation/decisions/toc.yml               |  2 +
 Documentation/getting-started.mdx             |  8 +--
 Documentation/index.mdx                       |  7 ++-
 .../renderers/primitive-adaptation.md         | 43 ++++++++++++--
 Documentation/storybook.mdx                   |  6 +-
 Documentation/toc.yml                         | 10 ++--
 Documentation/ui-foundation.md                | 32 +++++++++-
 Documentation/verify-markdown.sh              | 14 ++++-
 README.md                                     |  7 +++
 Source/Common/CratisComponentsProvider.tsx    | 12 ++--
 Source/README.md                              | 14 +++--
 Storybook/README.md                           |  4 +-
 release.md                                    | 23 ++++++--
 39 files changed, 269 insertions(+), 84 deletions(-)
 create mode 100644 Documentation/Display/toc.yml
 create mode 100644 Documentation/Dropdown/toc.yml
 create mode 100644 Documentation/Notifications/toc.yml
 create mode 100644 Documentation/ObjectContentEditor/toc.yml
 create mode 100644 Documentation/ObjectNavigationalBar/toc.yml
 create mode 100644 Documentation/decisions/index.md

diff --git a/.github/workflows/markdown-verification.yml b/.github/workflows/markdown-verification.yml
index a075e5d0..89a4b312 100644
--- a/.github/workflows/markdown-verification.yml
+++ b/.github/workflows/markdown-verification.yml
@@ -14,6 +14,7 @@ on:
             - 'ESLint/*.md'
             - 'Conformance/*.md'
             - 'Adapters/**/*.md'
+            - 'Storybook/*.md'
             - 'scripts/*.md'
     pull_request:
         branches:
@@ -27,6 +28,7 @@ on:
             - 'ESLint/*.md'
             - 'Conformance/*.md'
             - 'Adapters/**/*.md'
+            - 'Storybook/*.md'
             - 'scripts/*.md'
 
 concurrency:
@@ -59,6 +61,7 @@ jobs:
                       ESLint/*.md
                       Conformance/*.md
                       Adapters/**/*.md
+                      Storybook/*.md
                       scripts/*.md
 
     link-verification:
@@ -92,6 +95,7 @@ jobs:
                       ESLint/*.md
                       Conformance/*.md
                       Adapters/**/*.md
+                      Storybook/*.md
                       scripts/*.md
                       Documentation/**/*.md
                       Documentation/**/*.mdx
diff --git a/Adapters/Mui/CONFORMANCE.md b/Adapters/Mui/CONFORMANCE.md
index 720429a8..3581e97f 100644
--- a/Adapters/Mui/CONFORMANCE.md
+++ b/Adapters/Mui/CONFORMANCE.md
@@ -4,8 +4,8 @@
 # MUI adapter conformance
 
 The adapter declares `stable-presentation/v1` at renderer ABI major 1. Repository evidence runs
-`@cratis/components.conformance` against all nine declared slots and requires 100 of 100 checks to
-pass with zero failures and zero skips.
+`@cratis/components.conformance` against all nine declared slots and requires every applicable check
+to pass with zero failures and zero skips. The generated report is the authoritative check inventory.
 
 The bounded checks cover:
 
diff --git a/Adapters/PrimeReact/CONFORMANCE.md b/Adapters/PrimeReact/CONFORMANCE.md
index cfee4415..cc842719 100644
--- a/Adapters/PrimeReact/CONFORMANCE.md
+++ b/Adapters/PrimeReact/CONFORMANCE.md
@@ -4,8 +4,8 @@
 # PrimeReact 11 adapter conformance
 
 The adapter declares `stable-presentation/v1` at renderer ABI major 1. Repository evidence runs
-`@cratis/components.conformance` against all nine declared slots and requires 100 of 100 checks to
-pass with zero failures and zero skips.
+`@cratis/components.conformance` against all nine declared slots and requires every applicable check
+to pass with zero failures and zero skips. The generated report is the authoritative check inventory.
 
 The bounded checks cover:
 
@@ -36,7 +36,7 @@ PrimeReact 11.1.0 currently publishes malformed generic declaration aliases. A c
 non-emitted shim keeps this adapter's own strict build enabled; the packed adapter declaration is
 vendor-free and the package verifier ensures no shim or vendor declaration leaks into it. Its
 strict external fixtures also use the declaration-only React JSX bridge required by the exact Arc
-React 22.4 upstream exception, while Core's stale-exception gate must still reproduce that issue.
+React 22.5 upstream exception, while Core's stale-exception gate must still reproduce that issue.
 Remove each bridge when its allowed upstream release fixes the corresponding declarations.
 
 This is automated jsdom/axe and package evidence, not universal browser, visual, RTL, forced-colors,
diff --git a/Adapters/PrimeReact10/CONFORMANCE.md b/Adapters/PrimeReact10/CONFORMANCE.md
index 70829729..b0b55083 100644
--- a/Adapters/PrimeReact10/CONFORMANCE.md
+++ b/Adapters/PrimeReact10/CONFORMANCE.md
@@ -4,8 +4,8 @@
 # PrimeReact 10 adapter conformance
 
 The adapter declares `stable-presentation/v1` at renderer ABI major 1. The repository gate runs
-`@cratis/components.conformance` against all nine declared slots and requires 100 of 100 checks to
-pass with zero failures and zero skips.
+`@cratis/components.conformance` against all nine declared slots and requires every applicable check
+to pass with zero failures and zero skips. The generated report is the authoritative check inventory.
 
 The bounded checks cover:
 
diff --git a/Conformance/CONFORMANCE.md b/Conformance/CONFORMANCE.md
index ad0d94c6..5c13de5a 100644
--- a/Conformance/CONFORMANCE.md
+++ b/Conformance/CONFORMANCE.md
@@ -31,8 +31,8 @@ runtime code. It independently implements the nine stable presentation slots usi
 component prop contracts only; it does not import the Components-owned Core implementations.
 
 The declared `stable-presentation/v1` profile and its schema-valid static metadata point to the
-actual private source fixture and exported manifest, producing 100 passed checks out of 100 with
-zero failures and zero skips. The bounded run observes:
+actual private source fixture and exported manifest. The generated report must contain zero
+failures and zero skips and remains the authoritative check inventory. The bounded run observes:
 
 - exact semantic native elements and forwarded refs for every ref-capable slot;
 - native submit, form-value, and reset behavior;
diff --git a/Documentation/Chat/index.md b/Documentation/Chat/index.md
index 724fbd85..5c3667ba 100644
--- a/Documentation/Chat/index.md
+++ b/Documentation/Chat/index.md
@@ -12,7 +12,7 @@ Everything about _data_ stays with your application:
 
 ## Key Features
 
-- Sidebar (an accessible overlay panel, built on Components' own React Aria-based primitives) opening to the right of the view, with a topics list and per-topic conversations
+- Sidebar (an overlay panel with documented focus and dismissal behavior, built on Components' own React Aria-based primitives) opening to the right of the view, with a topics list and per-topic conversations
 - Host-side topic auto-naming contract with a pending placeholder until the name arrives
 - `@`-mentions from a list you hold or a provider callback you resolve, rendered distinctly in message bodies
 - Emoji picker in the composer, with a quick row of recently used emoji
diff --git a/Documentation/CommandForm/index.md b/Documentation/CommandForm/index.md
index da623f1b..48f1fc6e 100644
--- a/Documentation/CommandForm/index.md
+++ b/Documentation/CommandForm/index.md
@@ -16,7 +16,7 @@ CommandForm offers a complete set of form field components designed to work seam
 
 ## Available Field Components
 
-The CommandForm module exports Cratis-owned semantic fields built with native controls and accessible interaction behavior. Each field uses `asCommandFormField` for automatic value binding, validation state, and Arc command integration.
+The CommandForm module exports Cratis-owned semantic fields built with native controls and documented keyboard, naming, and validation behavior. Each field uses `asCommandFormField` for automatic value binding, validation state, and Arc command integration.
 
 See the field type pages in this section for documentation on each available field component. To generate a form's fields from a command's own properties instead of writing them out by hand, see [AutoCommandForm](auto-command-form.md).
 
diff --git a/Documentation/CommandForm/multi-select-field.md b/Documentation/CommandForm/multi-select-field.md
index 2dbfdbe2..75d2a4e7 100644
--- a/Documentation/CommandForm/multi-select-field.md
+++ b/Documentation/CommandForm/multi-select-field.md
@@ -1,6 +1,6 @@
 # MultiSelectField
 
-`MultiSelectField` lets the user pick several values through the Cratis [`Dropdown`](../Dropdown/index.md). It uses native multiple selection by default and an accessible multi-value combobox when filtering is enabled.
+`MultiSelectField` lets the user pick several values through the Cratis [`Dropdown`](../Dropdown/index.md). It uses native multiple selection by default and a labeled multi-value combobox when filtering is enabled.
 
 ## Usage
 
diff --git a/Documentation/CommandForm/password-field.md b/Documentation/CommandForm/password-field.md
index ff47933d..52acacc6 100644
--- a/Documentation/CommandForm/password-field.md
+++ b/Documentation/CommandForm/password-field.md
@@ -1,6 +1,6 @@
 # PasswordField
 
-`PasswordField` provides a Cratis-owned masked text input with an accessible show/hide action.
+`PasswordField` provides a Cratis-owned masked text input with a labeled show/hide action.
 
 ## Usage
 
diff --git a/Documentation/CommandForm/rating-field.md b/Documentation/CommandForm/rating-field.md
index 4d5d5d4a..100b968f 100644
--- a/Documentation/CommandForm/rating-field.md
+++ b/Documentation/CommandForm/rating-field.md
@@ -1,6 +1,6 @@
 # RatingField
 
-`RatingField` provides a Cratis-owned accessible star-rating radio group bound to a `number` property.
+`RatingField` provides a Cratis-owned star-rating radio group with labeled options bound to a `number` property.
 
 ## Usage
 
diff --git a/Documentation/CommandForm/toggle-switch-field.md b/Documentation/CommandForm/toggle-switch-field.md
index e5e70112..05bbc878 100644
--- a/Documentation/CommandForm/toggle-switch-field.md
+++ b/Documentation/CommandForm/toggle-switch-field.md
@@ -1,6 +1,6 @@
 # ToggleSwitchField
 
-`ToggleSwitchField` provides a Cratis-owned accessible on/off switch bound to a `boolean` property on a command. It is the switch-styled counterpart of [CheckboxField](./checkbox-field.md).
+`ToggleSwitchField` provides a Cratis-owned labeled on/off switch bound to a `boolean` property on a command. It is the switch-styled counterpart of [CheckboxField](./checkbox-field.md).
 
 ## Usage
 
diff --git a/Documentation/Common/basic-controls.md b/Documentation/Common/basic-controls.md
index 374ec1b6..07e7941d 100644
--- a/Documentation/Common/basic-controls.md
+++ b/Documentation/Common/basic-controls.md
@@ -7,6 +7,7 @@ The `Common` subpath provides native basic controls for ordinary React state and
 
 ```tsx
 import {
+    Button,
     Checkbox,
     IconButton,
     Radio,
@@ -28,6 +29,7 @@ import {
     <Radio name='frequency' value='daily' label='Daily' />
     <Switch name='notifications' value='enabled' label='Enable notifications' />
     <IconButton icon={<span aria-hidden='true'>+</span>} aria-label='Add preference' />
+    <Button label='Save preferences' type='submit' />
 </Surface>
 ```
 
@@ -35,6 +37,7 @@ import {
 
 | Component | Native element and ref | Semantic value | Stable parts | Canonical states |
 | --- | --- | --- | --- | --- |
+| `Button` | `button` / `HTMLButtonElement` | Native click and form action | `root`, `spinner`, `icon`, `label` | `disabled`, `loading`, `variant`, `tone`, `shape`, `size` on `root` |
 | `IconButton` | `button` / `HTMLButtonElement` | Uses `Button` click semantics | `root`, `spinner`, `icon`, `label` | `disabled`, `loading` on `root` |
 | `TextInput` | `input` / `HTMLInputElement` | `string` | `root` | `disabled`, `invalid`, `readonly` |
 | `TextArea` | `textarea` / `HTMLTextAreaElement` | `string` | `root` | `disabled`, `invalid`, `readonly` |
diff --git a/Documentation/Common/cratis-components-provider.md b/Documentation/Common/cratis-components-provider.md
index b6638c02..c70ad06e 100644
--- a/Documentation/Common/cratis-components-provider.md
+++ b/Documentation/Common/cratis-components-provider.md
@@ -8,7 +8,7 @@ description: Configure locale, Components-owned labels, and the app-wide toast r
 ## Basic setup
 
 ```tsx
-import { CratisComponentsProvider } from '@cratis/components/Common';
+import { CratisComponentsProvider } from '@cratis/components';
 
 export const App = () => (
     <CratisComponentsProvider value={{ locale: 'en-US' }} toaster>
@@ -54,18 +54,22 @@ Unknown Components 3 renderer options are intentionally a type error. Remove `li
 The certified MUI, PrimeReact 11, and PrimeReact 10 manifests implement the stable nine-slot
 `stable-presentation/v1` profile. That stable profile adapts only Button, IconButton, TextInput,
 TextArea, Checkbox, Radio, Switch, ProgressBar, and Surface. It never means full-catalog
-replacement. The broader fourteen-slot renderer system, composition, scopes, atomic slots, and
-fallback diagnostics remain experimental.
+replacement.
+
+Pass one stable presentation manifest to `library`. The broader fourteen-slot renderer system,
+ordered manifest composition, scopes/islands, atomic slots, lazy loading, and public adapter
+discovery remain experimental even though some `unstable_` contracts are available to repository
+and adapter authors.
 
 The provider exposes:
 
-| Prop                 | Purpose                                                                                               |
-| -------------------- | ----------------------------------------------------------------------------------------------------- |
-| `library`            | One renderer manifest or an ordered last-wins composition. Omit it for the built-in default.          |
-| `libraryMode`        | `strict` rejects invalid profile promises; `degrade` reports them after mount.                        |
-| `rendererFallback`   | `core` keeps the built-in slot fallback; `throw` rejects fallback.                                    |
-| `overlayEnvironment` | Stable, post-commit portal-container lookup through `CratisOverlayEnvironment`.                       |
-| `rendererSetup`      | Stable adapter-declared boolean attestations. Never put credentials, keys, or caches here.            |
+| Prop                 | Purpose                                                                                                        |
+| -------------------- | -------------------------------------------------------------------------------------------------------------- |
+| `library`            | One stable presentation manifest. Ordered arrays are experimental last-wins composition. Omit for built-in.   |
+| `libraryMode`        | Experimental profile-promise behavior: `strict` rejects invalid promises; `degrade` reports after mount.      |
+| `rendererFallback`   | `core` keeps the built-in slot fallback; `throw` rejects an undeclared slot instead of expanding adapter scope. |
+| `overlayEnvironment` | Stable, post-commit portal-container lookup through `CratisOverlayEnvironment`.                                |
+| `rendererSetup`      | Stable adapter-declared boolean attestations. Never put credentials, keys, or caches here.                     |
 
 Adapter packages declaration-merge their own keys into `CratisRendererSetupExtensions`, so
 importing an adapter gives typed setup without adding vendor fields to Core. The provider copies and
@@ -226,6 +230,41 @@ Pass `toaster` to mount the app-wide notification region:
 
 You may instead mount `<Toaster />` yourself when its placement belongs elsewhere in the application tree.
 
+## Choose an overlay container
+
+The stable `overlayEnvironment` contract lets an application choose where Components-owned portals
+mount without consulting browser globals during import or server rendering:
+
+```tsx
+import {
+    CratisComponentsProvider,
+    type CratisComponentsProviderProps,
+} from '@cratis/components';
+
+const overlayEnvironment: NonNullable<
+    CratisComponentsProviderProps['overlayEnvironment']
+> = {
+    getContainer: () =>
+        typeof document === 'undefined'
+            ? null
+            : document.getElementById('application-overlays'),
+};
+
+export const App = () => (
+    <CratisComponentsProvider
+        value={{ locale: 'en-US' }}
+        overlayEnvironment={overlayEnvironment}
+    >
+        <Application />
+        <div id='application-overlays' />
+    </CratisComponentsProvider>
+);
+```
+
+Returning `null` defers the overlay; Components does not silently retarget it to `document.body`.
+Direct vendor overlays keep their own portal and z-index configuration. Verify layer order and focus
+behavior in the real application shell when both systems can open together.
+
 ## Styling
 
 Import `tokens` and `styles`, then choose the baseline `theme` or your own token values. The provider has no styling responsibility.
diff --git a/Documentation/Display/index.md b/Documentation/Display/index.md
index ce2915ab..7fd97286 100644
--- a/Documentation/Display/index.md
+++ b/Documentation/Display/index.md
@@ -6,7 +6,7 @@ Use them for status indicators in tables and detail views, counts on icons, remo
 
 ## Tag
 
-A small colored status label. Prefer a `Tag` with a `severity` over hand-colored text — it is theme-aware and meets contrast in light and dark.
+A small colored status label. Prefer a `Tag` with a `severity` over hand-colored text so it follows the active semantic theme. Verify the resulting contrast in every application theme you ship.
 
 ```tsx
 import { Tag } from '@cratis/components/Display';
@@ -100,7 +100,13 @@ import { ProgressBar } from '@cratis/components/Display';
 | `value` | `number` | Completion value, `0`–`100`. Ignored in `indeterminate` mode. |
 | `mode` | `'determinate' \| 'indeterminate'` | `determinate` (default) shows `value`; `indeterminate` shows a looping animation. |
 | `showValue` | `boolean` | Whether to render the percentage label. Defaults to `true` (determinate only). The label is always `value` followed by `%`. |
-| `className` | `string` | Extra CSS class. |
+| `aria-label` | `string` | Accessible name. Defaults to `'Progress'`; override it to describe the operation. |
+| `aria-labelledby` | `string` | Id of an external element that labels the progress indicator. |
+| `className` | `string` | Extra CSS class on the root. |
+
+`ProgressBar` exposes stable `root`, `indicator`, and `label` `data-cratis-part` markers and
+`data-mode` on the root. It does not expose a `pt` prop; use `className`, the stable markers, or
+semantic tokens for product styling.
 
 ## Skeleton
 
diff --git a/Documentation/Display/toc.yml b/Documentation/Display/toc.yml
new file mode 100644
index 00000000..959ada87
--- /dev/null
+++ b/Documentation/Display/toc.yml
@@ -0,0 +1,2 @@
+- name: Display components
+  href: index.md
diff --git a/Documentation/Dropdown/index.md b/Documentation/Dropdown/index.md
index 395de4d2..00e7ffd9 100644
--- a/Documentation/Dropdown/index.md
+++ b/Documentation/Dropdown/index.md
@@ -1,6 +1,6 @@
 ---
 title: Dropdown
-description: Accessible single, filtered, and multiple selection with a stable Cratis API.
+description: Single, filtered, and multiple selection with documented names, roles, and a stable Cratis API.
 ---
 
 `Dropdown` binds a value to an option collection without exposing its internal interaction library.
diff --git a/Documentation/Dropdown/toc.yml b/Documentation/Dropdown/toc.yml
new file mode 100644
index 00000000..2c315207
--- /dev/null
+++ b/Documentation/Dropdown/toc.yml
@@ -0,0 +1,2 @@
+- name: Dropdown
+  href: index.md
diff --git a/Documentation/Notifications/index.md b/Documentation/Notifications/index.md
index f8a87cc9..eaaf40b9 100644
--- a/Documentation/Notifications/index.md
+++ b/Documentation/Notifications/index.md
@@ -1,6 +1,6 @@
 ---
 title: Notifications
-description: App-wide accessible notifications through the Cratis-owned toast queue.
+description: App-wide notifications with documented region and dismissal labels through the Cratis-owned toast queue.
 ---
 
 Mount one toaster, then dispatch notifications from React components or ordinary modules.
diff --git a/Documentation/Notifications/toc.yml b/Documentation/Notifications/toc.yml
new file mode 100644
index 00000000..0bcc96e2
--- /dev/null
+++ b/Documentation/Notifications/toc.yml
@@ -0,0 +1,2 @@
+- name: Notifications
+  href: index.md
diff --git a/Documentation/ObjectContentEditor/toc.yml b/Documentation/ObjectContentEditor/toc.yml
new file mode 100644
index 00000000..bb958c17
--- /dev/null
+++ b/Documentation/ObjectContentEditor/toc.yml
@@ -0,0 +1,2 @@
+- name: ObjectContentEditor
+  href: index.md
diff --git a/Documentation/ObjectNavigationalBar/index.md b/Documentation/ObjectNavigationalBar/index.md
index f0a30097..4a92a0cd 100644
--- a/Documentation/ObjectNavigationalBar/index.md
+++ b/Documentation/ObjectNavigationalBar/index.md
@@ -252,8 +252,7 @@ Commonly used with:
 
 ## Accessibility
 
-- Buttons have proper tooltips
-- Click targets are adequately sized
-- Keyboard navigation supported
-- Screen reader friendly
-- Proper ARIA labels
+- Action buttons expose tooltip text
+- Navigation controls render as buttons
+- Keyboard navigation for documented actions
+- ARIA labels on navigation controls
diff --git a/Documentation/ObjectNavigationalBar/toc.yml b/Documentation/ObjectNavigationalBar/toc.yml
new file mode 100644
index 00000000..9a3e3fe0
--- /dev/null
+++ b/Documentation/ObjectNavigationalBar/toc.yml
@@ -0,0 +1,2 @@
+- name: ObjectNavigationalBar
+  href: index.md
diff --git a/Documentation/Styling/baseline-theme.md b/Documentation/Styling/baseline-theme.md
index 226b453f..65262234 100644
--- a/Documentation/Styling/baseline-theme.md
+++ b/Documentation/Styling/baseline-theme.md
@@ -1,6 +1,6 @@
 ---
 title: Use the baseline theme
-description: Apply the license-free Cratis baseline appearance globally or to one subtree.
+description: Apply the optional Cratis baseline appearance globally or to one subtree.
 ---
 
 Import the baseline after tokens and structural styles:
@@ -13,7 +13,7 @@ import '@cratis/components/theme';
 
 `tokens` supplies conservative light defaults on `:root`. The `theme` import adds document foreground/background, system dark-mode values, explicit scheme classes, forced-colors tuning, and `.cratis-theme` subtree defaults. No provider option or wrapper class is required for the normal whole-application setup.
 
-The baseline intentionally remains visually familiar to Components 2/3 consumers: Lara-adjacent blue actions, neutral surfaces, 6px radii, comparable control density, and similar overlay depth. It is implemented entirely with Cratis markup and tokens. Exact pixel identity is not promised where stronger focus, control-boundary, disabled-state, or status contrast improves accessibility.
+The baseline intentionally remains visually familiar to Components 2/3 consumers: Lara-adjacent blue actions, neutral surfaces, 6px radii, comparable control density, and similar overlay depth. It is implemented entirely with Cratis markup and tokens. Exact pixel identity is not promised where focus, control-boundary, disabled-state, or status treatments differ. Verify the final theme against the application's own contrast and accessibility requirements.
 
 ## Dark mode
 
diff --git a/Documentation/Styling/cratis-tokens.md b/Documentation/Styling/cratis-tokens.md
index bd789de7..970780e5 100644
--- a/Documentation/Styling/cratis-tokens.md
+++ b/Documentation/Styling/cratis-tokens.md
@@ -16,12 +16,12 @@ The `--cratis-*` variables are the supported theming boundary. The `tokens` entr
 | `--cratis-green-500`                                    | Success state.                                             |
 | `--cratis-orange-500`                                   | Warning state.                                             |
 | `--cratis-red-500`                                      | Error/destructive indicator.                               |
-| `--cratis-action-background` / `-hover` / `-active`     | Accessible primary-action state fills.                     |
+| `--cratis-action-background` / `-hover` / `-active`     | Primary-action state fills.                                |
 | `--cratis-action-text`                                  | Text/icons on the primary action.                          |
-| `--cratis-info-background` / `--cratis-info-text`       | Accessible info badge/tag pair.                            |
-| `--cratis-success-background` / `--cratis-success-text` | Accessible success pair.                                   |
-| `--cratis-warning-background` / `--cratis-warning-text` | Accessible warning pair.                                   |
-| `--cratis-danger-background` / `--cratis-danger-text`   | Accessible danger pair.                                    |
+| `--cratis-info-background` / `--cratis-info-text`       | Info badge/tag background and text pair.                   |
+| `--cratis-success-background` / `--cratis-success-text` | Success background and text pair.                          |
+| `--cratis-warning-background` / `--cratis-warning-text` | Warning background and text pair.                          |
+| `--cratis-danger-background` / `--cratis-danger-text`   | Danger background and text pair.                           |
 
 ## Surfaces
 
@@ -104,4 +104,8 @@ These tokens coordinate Components only. Configure direct Prime or product overl
 
 The token layer has renderer-independent baseline values and does not read legacy `--surface-*`, `--text-color`, `--primary-color`, or `--p-*` names. Import `@cratis/components/tokens` first, then assign product values to `--cratis-*` directly. This keeps product theming independent of any renderer token vocabulary.
 
+Test contrast for every overridden foreground/background pair in each appearance mode the
+application supports. Token names and baseline values do not establish accessibility conformance
+for an application theme.
+
 Use [Stable component parts](pass-through.md) when token changes are not enough for a product-specific component treatment.
diff --git a/Documentation/decisions/0004-stable-presentation-renderer-profile.md b/Documentation/decisions/0004-stable-presentation-renderer-profile.md
index 313de3ec..38f14156 100644
--- a/Documentation/decisions/0004-stable-presentation-renderer-profile.md
+++ b/Documentation/decisions/0004-stable-presentation-renderer-profile.md
@@ -17,7 +17,8 @@ have not earned the same compatibility promise.
 
 The `stable-presentation/v1` candidate was tested independently by four implementations: the
 private plain-DOM falsification fixture, MUI, PrimeReact 11, and PrimeReact 10. Each implementation
-passed all 100 applicable conformance checks with zero failures and zero skips. The proof covers the
+passed every applicable conformance check with zero failures and zero skips. The generated report,
+rather than a hardcoded count in this decision, inventories the exercised checks. The proof covers the
 exact public props, refs, parts, state, behavior ownership, server rendering, hydration, and bounded
 accessibility assertions recorded by the conformance package. It does not turn the remaining
 experimental renderer system into a stable API.
diff --git a/Documentation/decisions/index.md b/Documentation/decisions/index.md
new file mode 100644
index 00000000..2ea8fcad
--- /dev/null
+++ b/Documentation/decisions/index.md
@@ -0,0 +1,21 @@
+---
+title: Components architecture decisions
+description: Accepted decisions that define Components' public React, package, kernel, and renderer boundaries.
+---
+
+These accepted decisions explain why Components owns its public React and DOM contracts while
+keeping implementation libraries, optional peers, and unstable renderer machinery behind explicit
+boundaries.
+
+## Decisions
+
+- [DOM-coupled public component contract](0001-dom-coupled-contract.md) — React, native HTML, refs,
+  events, and form semantics are intentional public contracts.
+- [Public component classification](0002-component-classification.md) — distinguishes primitives,
+  composites, and interop-only surfaces.
+- [Repository-owned kernel boundary](0003-kernel-boundary.md) — keeps optional and renderer-specific
+  dependency graphs out of the setup-only root.
+- [Stable presentation renderer profile](0004-stable-presentation-renderer-profile.md) — promotes the
+  exact nine-slot `stable-presentation/v1` adapter boundary while broader machinery remains unstable.
+
+Read [UI foundation](../ui-foundation.md) for the current architecture and capability matrix.
diff --git a/Documentation/decisions/toc.yml b/Documentation/decisions/toc.yml
index e24afa16..3b76f972 100644
--- a/Documentation/decisions/toc.yml
+++ b/Documentation/decisions/toc.yml
@@ -1,3 +1,5 @@
+- name: Overview
+  href: index.md
 - name: DOM-coupled public component contract
   href: 0001-dom-coupled-contract.md
 - name: Public component classification
diff --git a/Documentation/getting-started.mdx b/Documentation/getting-started.mdx
index ae88dbf5..d7e07c1c 100644
--- a/Documentation/getting-started.mdx
+++ b/Documentation/getting-started.mdx
@@ -29,7 +29,7 @@ You've built an Arc backend—a `RegisterAuthor` command and an `AllAuthors` que
     The package declares React, Arc, Fundamentals, `reflect-metadata`, and `tsyringe` peer ranges. Its Arc range is `>=20.3.1 <23`; keep `@cratis/arc` and `@cratis/arc.react` on the same version used by the application's generated proxies. A strict installer can use this explicit form (replace the example Arc version when needed):
 
     ```bash title="Install explicit peers"
-    ARC_VERSION=22.3.0
+    ARC_VERSION=22.5.0
     npm install @cratis/components \
       "@cratis/arc@$ARC_VERSION" "@cratis/arc.react@$ARC_VERSION" \
       @cratis/fundamentals@^7.10.3 react@^19 react-dom@^19 \
@@ -69,13 +69,13 @@ You've built an Arc backend—a `RegisterAuthor` command and an `AllAuthors` que
 
 </Steps>
 
-### Yarn PnP with Arc React 22.3.0
+### Yarn PnP with Arc React 22.5.0
 
-The current `@cratis/arc.react@22.3.0` package imports `rxjs` without declaring it. A strict Yarn PnP consumer must install `rxjs@7.8.2` and temporarily add this package extension until Arc publishes corrected metadata:
+The current `@cratis/arc.react@22.5.0` package imports `rxjs` without declaring it. A strict Yarn PnP consumer must install `rxjs@7.8.2` and temporarily add this package extension until Arc publishes corrected metadata:
 
 ```yaml title=".yarnrc.yml"
 packageExtensions:
-    '@cratis/arc.react@22.3.0':
+    '@cratis/arc.react@22.5.0':
         dependencies:
             rxjs: '7.8.2'
 ```
diff --git a/Documentation/index.mdx b/Documentation/index.mdx
index 478628d4..a2778473 100644
--- a/Documentation/index.mdx
+++ b/Documentation/index.mdx
@@ -59,8 +59,11 @@ export const App = () => (
 );
 ```
 
-The built-in renderer is zero-configuration. Optional renderer packages are selected explicitly;
-the application retains their provider, peer, SSR, styling, and license responsibilities. Read
+The package root is setup-only: import the provider and configuration helpers there, then import
+every component from its explicit subpath, such as `@cratis/components/CommandDialog` or
+`@cratis/components/DataTables`. The built-in renderer is zero-configuration. Optional renderer
+packages are selected explicitly; the application retains their provider, peer, SSR, styling, and
+license responsibilities. Read
 [Renderer adapters and coexistence](/components/renderers/) for the exact nine-slot boundary,
 direct vendor coexistence, custom composition, unsupported claims, and licensing policy.
 
diff --git a/Documentation/renderers/primitive-adaptation.md b/Documentation/renderers/primitive-adaptation.md
index 7d216cc7..fb4f39f4 100644
--- a/Documentation/renderers/primitive-adaptation.md
+++ b/Documentation/renderers/primitive-adaptation.md
@@ -43,6 +43,26 @@ import {
 } from '@cratis/components/renderer';
 ```
 
+The stable renderer exports are deliberately bounded:
+
+| Export | Use |
+| --- | --- |
+| `CRATIS_PRESENTATION_PROFILE` | Exact profile id: `stable-presentation/v1`. |
+| `CRATIS_PRESENTATION_ABI_VERSION` | Renderer ABI major required by the profile. |
+| `cratisPresentationSlotIds` / `CratisPresentationSlotId` | Canonical immutable slot order and its identifier type. |
+| `CratisPresentationSlots` | Mapping from each slot id to the exact public Components props/ref contract. |
+| `CratisPresentationSlotDeclaration` / `CratisPresentationSlotMap` | One presentation-owned implementation and the complete nine-slot table. |
+| `CratisPresentationCapabilityId` / `CratisPresentationCapabilities` | Bounded capability vocabulary and required tuple shape. |
+| `CratisPresentationUiLibrary` | Immutable stable manifest shape. |
+| `definePresentationUiLibrary()` | Runtime validation plus a defensive frozen copy for JavaScript and TypeScript callers. |
+| `CratisRendererSetupExtensions` / `CratisRendererSetup` | Declaration-merged, non-secret boolean setup attestations. |
+| `CratisPresentationUiLibraryProviderProps` | `setup` and `children` passed to an adapter provider. |
+| `CratisOverlayEnvironment` | Independent, on-demand portal-container lookup supplied by the host. |
+
+Symbols on `@cratis/components/renderer` whose names start with `unstable_` are not promoted by this
+profile. Do not use the generic manifest, composition, renderer scopes/islands, atomic slots,
+internal hooks, lazy loading, or discovery tooling as a stable dependency.
+
 `CratisPresentationSlotMap` requires all nine exact component contracts. Every declaration must use
 `mode: 'presentation'` and either `fidelity: 'native'` or `fidelity: 'emulated'`. A stable manifest
 must declare `slot.render`, `parts.passthrough`, and `ssr.staticRender`; RTL, forced-colors, and
@@ -51,6 +71,20 @@ same requirements for JavaScript callers, rejects duplicate capabilities, and re
 frozen copy. Use `CratisRendererSetupExtensions` only for non-secret boolean setup
 attestations and `CratisOverlayEnvironment` for an independent host portal-container lookup.
 
+The six stable capability ids have narrow meanings:
+
+| Capability | Requirement | Meaning |
+| --- | --- | --- |
+| `slot.render` | required | Every declared slot supplies a render component for its exact contract. |
+| `parts.passthrough` | required | Documented typed parts and `pt` destinations remain available. |
+| `ssr.staticRender` | required | Every slot produces deterministic static server markup without browser globals. |
+| `rtl` | optional evidence | The adapter has bounded evidence for right-to-left input. |
+| `forcedColors` | optional evidence | The adapter has bounded evidence under forced-color host input. |
+| `motion.reduced` | optional evidence | The adapter has bounded evidence under reduced-motion host input. |
+
+Optional evidence flags remain bounded claims; they are not universal browser or accessibility
+certification.
+
 Removing or changing a v1 slot is a breaking change. Adding a required slot needs a new profile and
 version; `stable-presentation/v1` will not silently grow. The open fourteen-slot manifest,
 composition, atomic behavior, renderer scopes, internal hooks, diagnostics, and built-in full
@@ -58,10 +92,11 @@ manifest remain `unstable_` APIs.
 
 ## Stable parts
 
-Each contract defines its own typed `*Parts` object. A `pt` value sends ordinary React HTML
-attributes to those documented destinations. The rendered elements carry stable
-`data-cratis-part` names so product CSS can target the same semantic destination across the built-in
-renderer and conforming adapters.
+Eight profile controls expose a typed `*Parts` object and `pt` prop that sends ordinary React HTML
+attributes to documented destinations. `ProgressBar` instead exposes its documented `root`,
+`indicator`, and `label` through stable `data-cratis-part` markers and a root `className`; it has no
+`pt` prop. Conforming adapters preserve each slot's exact public customization contract rather than
+inventing a uniform prop that the component does not declare.
 
 ```tsx
 import { Button } from '@cratis/components/Common';
diff --git a/Documentation/storybook.mdx b/Documentation/storybook.mdx
index 06181ef5..fc6fed97 100644
--- a/Documentation/storybook.mdx
+++ b/Documentation/storybook.mdx
@@ -6,12 +6,12 @@ tableOfContents: false
 
 import StorybookEmbed from '@components/StorybookEmbed.astro';
 
-Use the **Renderer** manager control to run the same stable story id with the zero-config Cratis built-in renderer, Material UI, PrimeReact 11.1.0, or PrimeReact 10.9.9. Changing renderer replaces the composed preview iframe. The manager preserves the current story id when the target preview contains it, but component-local state, unsaved control changes, open overlays, and in-progress interactions are reset by that remount.
+Use the **Renderer** manager control to run the same stable story id with the zero-config Cratis built-in renderer, Material UI, PrimeReact 11, or PrimeReact 10. Changing renderer replaces the composed preview iframe. The manager preserves the current story id when the target preview contains it, but component-local state, unsaved control changes, open overlays, and in-progress interactions are reset by that remount.
 
 Use the Appearance toolbar to compare the maintained baseline in light and dark modes with a representative product-owned token mapping. Every renderer preview owns its provider and theme boundary while preserving strict profile validation and Core fallback for slots outside the selected adapter's profile. Stories load the same prefixed, layered, no-Preflight Cratis CSS contract as the published package.
 
-PrimeReact 10 and 11 are built as separate preview projects because their incompatible `primereact` peer majors must never enter one dependency graph. The PrimeReact 10 preview resolves its nested 10.9.9 package and v10 theme CSS. The PrimeReact 11 preview is a bounded test fixture: it uses PrimeReact's public contexts and the adapter's non-secret boolean setup attestation without mounting the real license manager. Components and this Storybook do not receive, read, store, log, serialize, bundle, or proxy a license key.
+PrimeReact 10 and 11 are built as separate preview projects because their incompatible `primereact` peer majors must never enter one dependency graph. Each preview verifies the exact upstream version resolved from the checked-in adapter matrix. The PrimeReact 11 preview is a bounded test fixture: it uses PrimeReact's public contexts and the adapter's non-secret boolean setup attestation without mounting the real license manager. Components and this Storybook do not receive, read, store, log, serialize, bundle, or proxy a license key.
 
-Every story module also generates an autodocs page from the public component types and TSDoc. CI validates the metadata-discovered adapter inventory, type-checks the configuration, asserts peer-major isolation, builds and compares every preview index, then runs all 261 stories in Playwright Chromium under both baseline light and dark modes for all four renderers. That is exactly **2,088 story/appearance/axe cases**, with no story sampling or exclusions; private adapters such as Plain are excluded from composition. Each `play()` interaction runs, and Accessibility-addon axe violations are errors. This is a browser component-test gate, not a claim of universal browser or assistive-technology conformance; keyboard, focus, busy, empty, invalid, disabled, open-overlay, and responsive states still require deliberate story coverage and release review.
+Every story module also generates an autodocs page from the public component types and TSDoc. CI validates the metadata-discovered adapter inventory, type-checks the configuration, asserts peer-major isolation, builds and compares every preview index, then runs every discovered stable story in Playwright Chromium under baseline light and dark modes for the built-in renderer and every metadata-discovered public adapter. Generated preview indexes are the authoritative story inventory; private adapters such as Plain are excluded from composition. Each `play()` interaction runs, and Accessibility-addon axe violations are errors. This is a browser component-test gate, not a claim of universal browser or assistive-technology conformance; keyboard, focus, busy, empty, invalid, disabled, open-overlay, and responsive states still require deliberate story coverage and release review.
 
 <StorybookEmbed fullPage={true} />
diff --git a/Documentation/toc.yml b/Documentation/toc.yml
index 1a7a0f4c..47536727 100644
--- a/Documentation/toc.yml
+++ b/Documentation/toc.yml
@@ -49,17 +49,17 @@
 - name: Filter
   href: Filter/toc.yml
 - name: Dropdown
-  href: Dropdown/index.md
+  href: Dropdown/toc.yml
 - name: Display
-  href: Display/index.md
+  href: Display/toc.yml
 - name: Notifications
-  href: Notifications/index.md
+  href: Notifications/toc.yml
 - name: Toolbar
   href: Toolbar/toc.yml
 - name: ObjectNavigationalBar
-  href: ObjectNavigationalBar/index.md
+  href: ObjectNavigationalBar/toc.yml
 - name: ObjectContentEditor
-  href: ObjectContentEditor/index.md
+  href: ObjectContentEditor/toc.yml
 - name: PivotViewer
   href: PivotViewer/toc.yml
 - name: SchemaEditor
diff --git a/Documentation/ui-foundation.md b/Documentation/ui-foundation.md
index 684d1b09..ba486758 100644
--- a/Documentation/ui-foundation.md
+++ b/Documentation/ui-foundation.md
@@ -168,8 +168,8 @@ Known upstream failures are bounded in `Source/scripts/verify-public-types.excep
 The current exceptions are:
 
 - **`@webgpu/types@0.1.72` through `pixi.js@8.20.1`:** its ambient WebGPU declarations conflict with TypeScript 6's built-in DOM declarations for the `Canvas` subpath (`TS2403`, `TS2687`, `TS2717`, `TS6200`). The setup-only root has no Pixi type exception.
-- **`@cratis/arc.react@22.3.0`:** its published global JSX declarations expose unresolved identifiers in strict external Bundler consumers of command/dialog subpaths (`TS2503`).
-- **`@cratis/arc@22.3.0`, `@cratis/arc.react@22.3.0`, and `@cratis/fundamentals@7.18.1`:** their published ESM declarations use extensionless relative specifiers rejected by NodeNext, with missing-export cascades (`TS2834`, `TS2835`, `TS2305`, `TS2694`). Components' own declaration rewrite emits explicit extensions.
+- **`@cratis/arc.react@22.5.0`:** its published global JSX declarations expose unresolved identifiers in strict external Bundler consumers of command/dialog subpaths (`TS2503`).
+- **`@cratis/arc@22.5.0`, `@cratis/arc.react@22.5.0`, and `@cratis/fundamentals@7.18.1`:** their published ESM declarations use extensionless relative specifiers rejected by NodeNext, with missing-export cascades (`TS2834`, `TS2835`, `TS2305`, `TS2694`). Components' own declaration rewrite emits explicit extensions.
 
 ### Why the Canvas Pixi surface remains public
 
@@ -186,6 +186,30 @@ Components 4 does not treat adjacent gaps as part of the current package contrac
 
 Repository issues may track these gaps, but an open issue is not a public roadmap or delivery commitment.
 
+## Post-V4 issue index
+
+The following issues preserve follow-up decisions outside the Components 4 contract. They are
+tracking records, not promises that an unstable API already exists or will ship unchanged:
+
+| Issue | Tracked decision or evidence gap |
+| --- | --- |
+| [#207](https://github.com/Cratis/Components/issues/207) | Owner-authorized Components 4 publication; publication remains disabled until that separate review completes. |
+| [#208](https://github.com/Cratis/Components/issues/208) | Proof and possible promotion of atomic slots and mixed-renderer islands. |
+| [#209](https://github.com/Cratis/Components/issues/209) | Schema-driven public renderer discovery tooling. |
+| [#210](https://github.com/Cratis/Components/issues/210) | Lazy renderer preload semantics for streaming server rendering. |
+| [#211](https://github.com/Cratis/Components/issues/211) | Cross-browser and assistive-technology renderer certification. |
+| [#212](https://github.com/Cratis/Components/issues/212) | CSS theme bridges and vendor portal-interoperability recipes. |
+| [#213](https://github.com/Cratis/Components/issues/213) | Source-map preservation through ESM specifier rewriting. |
+| [#214](https://github.com/Cratis/Components/issues/214) | Evidence for or against a renderer-exclusive slim distribution. |
+| [#215](https://github.com/Cratis/Components/issues/215) | Reviewed dependency-update pull requests. |
+| [#216](https://github.com/Cratis/Components/issues/216) | Packed public-API snapshots and semantic-version surface diffs. |
+| [#217](https://github.com/Cratis/Components/issues/217) | Generated evidence inventories instead of hardcoded check counts. |
+| [#218](https://github.com/Cratis/Components/issues/218) | Renderer bundle and runtime-performance regression budgets. |
+
+Until those issues produce reviewed changes, the stable boundary remains the setup-only root, the
+exact nine-slot `stable-presentation/v1` profile, boolean setup attestations, and
+`CratisOverlayEnvironment`.
+
 ## Release gates
 
 The Components 4 major candidate uses these repository release checks:
@@ -199,4 +223,6 @@ The Components 4 major candidate uses these repository release checks:
 - The migration guide works without repository-specific knowledge.
 - Every packed public JavaScript subpath passes strict TypeScript 6 validation or matches a bounded machine-readable upstream exception with exact installed versions and an unmet removal condition. Components-owned cascades additionally require their matching upstream TS2834/TS2835 root cause in the same compiler run.
 
-The major PR effect packet owns the exact current release evidence and limitations.
+Generated conformance reports, the checked-in compatibility contract, and the repository
+[release policy](https://github.com/Cratis/Components/blob/main/release.md) own the exact current
+evidence and publication limitations.
diff --git a/Documentation/verify-markdown.sh b/Documentation/verify-markdown.sh
index ad538254..651d622d 100755
--- a/Documentation/verify-markdown.sh
+++ b/Documentation/verify-markdown.sh
@@ -32,11 +32,17 @@ fi
 
 npx markdownlint-cli2 \
     "README.md" \
+    "release.md" \
     "Documentation/**/*.md" \
     "Documentation/**/*.mdx" \
     "Source/*.md" \
     "Codemods/*.md" \
-    "ESLint/*.md"
+    "ESLint/*.md" \
+    "Conformance/*.md" \
+    "Adapters/**/*.md" \
+    "scripts/*.md" \
+    "Storybook/*.md" \
+    "!**/node_modules/**"
 LINT_EXIT_CODE=$?
 
 echo ""
@@ -58,8 +64,10 @@ if ! command -v node >/dev/null 2>&1; then
     exit 1
 fi
 
-node "$SCRIPT_DIR/verify-local-links.mjs" "$SCRIPT_DIR"
-LINK_EXIT_CODE=$?
+LINK_EXIT_CODE=0
+for SCAN_ROOT in "$SCRIPT_DIR" "$ROOT_DIR/Adapters" "$ROOT_DIR/scripts"; do
+    node "$SCRIPT_DIR/verify-local-links.mjs" "$SCAN_ROOT" || LINK_EXIT_CODE=$?
+done
 
 echo ""
 if [ $LINK_EXIT_CODE -eq 0 ]; then
diff --git a/README.md b/README.md
index 1a02131d..564fa66c 100644
--- a/README.md
+++ b/README.md
@@ -72,6 +72,10 @@ export const App = () => (
 );
 ```
 
+The package root is setup-only: import the provider and configuration helpers there, then import
+every component from its explicit subpath. The built-in renderer needs no additional package or
+configuration.
+
 The current package manifest defines the exact React, Arc, Fundamentals, and
 optional Pixi peer ranges. Verify those ranges before installing the package.
 
@@ -79,6 +83,9 @@ optional Pixi peer ranges. Verify those ranges before installing the package.
 
 - The package manifest, exports, source, and migration guide define the current
   Components major-version surface.
+- Generated compatibility schema v2 is checked in as [`compat-manifest.json`](./compat-manifest.json).
+  It records the seven-package source-candidate scope and support windows; the durable
+  [release policy](./release.md) explains why that metadata does not authorize publication.
 - Workspace manifest versions in a source checkout are development inputs, not release
   identity. Publication is intentionally fail-closed while the Components 4 package set and
   trusted-publisher workflow are completed. Do not infer a release from a branch, tag, or local
diff --git a/Source/Common/CratisComponentsProvider.tsx b/Source/Common/CratisComponentsProvider.tsx
index 1b262b12..fcd94494 100644
--- a/Source/Common/CratisComponentsProvider.tsx
+++ b/Source/Common/CratisComponentsProvider.tsx
@@ -6,10 +6,7 @@ import { I18nProvider } from 'react-aria-components/I18nProvider';
 import { merge } from 'ts-deepmerge';
 import { Toaster, type ToasterProps } from '../Notifications/Toaster';
 import { unstable_RendererRoot } from '../renderer/RendererContext';
-import type {
-    CratisRendererSetup,
-    unstable_UiLibrary,
-} from '../renderer/manifest';
+import type { CratisRendererSetup, unstable_UiLibrary } from '../renderer/manifest';
 import type { CratisOverlayEnvironment } from '../renderer/overlayEnvironment';
 import { CratisComponentsContext } from './CratisComponentsContext';
 import { cratisDefaults } from './CratisComponentsDefaults';
@@ -177,11 +174,14 @@ export interface CratisComponentsProviderProps {
     value?: CratisComponentsConfig;
     /** Mounts the global toaster with defaults or explicit options. */
     toaster?: boolean | ToasterProps;
-    /** Renderer library or ordered, last-wins library composition. */
+    /**
+     * Selects one stable presentation library. The broader generic manifest and ordered,
+     * last-wins composition form remain experimental.
+     */
     library?: unstable_UiLibrary | readonly unstable_UiLibrary[];
     /** Experimental profile-promise behavior. Defaults to strict. */
     libraryMode?: 'strict' | 'degrade';
-    /** Experimental terminal slot fallback behavior. Defaults to Core. */
+    /** Terminal slot fallback behavior. Defaults to the built-in Core implementation. */
     rendererFallback?: 'core' | 'throw';
     /** Host environment for overlay portal containers. */
     overlayEnvironment?: CratisOverlayEnvironment;
diff --git a/Source/README.md b/Source/README.md
index f35e96c2..fea179d8 100644
--- a/Source/README.md
+++ b/Source/README.md
@@ -41,10 +41,12 @@ npm install @cratis/components \
 
 The current manifest does not declare PrimeReact, PrimeIcons, or PrimeUI packages as dependencies or peers. Applications retaining direct dependencies keep their own package, provider, styling, and license boundaries.
 
-The generated compatibility contract is published at
+The generated compatibility schema v2 contract is published at
 `@cratis/components/compat-manifest.json`. It records the supported Components and tooling
-windows, independent package trains, renderer ABI/profile ranges, and exact lower/current adapter
-evidence. `publicationEnabled: false` means the source is not authorized for publication.
+windows, the seven-package source-candidate scope, independent package trains, renderer ABI/profile
+ranges, and exact lower/current adapter evidence. `publicationEnabled: false` means the source is
+not authorized for publication; the repository
+[`release.md`](https://github.com/Cratis/Components/blob/main/release.md) is the durable policy.
 
 **Yarn PnP note:** the current `@cratis/arc.react@22.5.0` package imports `rxjs` without declaring it. Strict PnP consumers install `rxjs@7.8.2` and add a temporary `packageExtensions` entry for `@cratis/arc.react@22.5.0`; remove it when Arc publishes corrected metadata. The canonical [getting-started guide](https://cratis.io/components/getting-started/) contains the exact YAML.
 
@@ -85,10 +87,10 @@ region. The default renderer needs no additional package. Certified renderer pac
 stable, nine-slot `stable-presentation/v1` primitive profile; they never replace the full Components
 catalog. They are independently versioned and selected with the provider's `library` prop:
 
-- `@cratis/components.mui` — MUI 9.x / Emotion 11.x stable presentation slots;
-- `@cratis/components.primereact` — PrimeReact 11.x stable presentation slots, with an
+- `@cratis/components.mui@1.0.0` — MUI 9.x / Emotion 11.x stable presentation slots;
+- `@cratis/components.primereact@1.0.0` — PrimeReact 11.x stable presentation slots, with an
   application-owned outer provider and license key;
-- `@cratis/components.primereact10` — PrimeReact 10.9.9+ stable presentation slots, with its
+- `@cratis/components.primereact10@1.0.0` — PrimeReact 10.9.9+ stable presentation slots, with its
   separate MIT-era provider, global theme, and upstream-major boundary.
 
 Adapter-specific themes, providers, SSR setup, peers, and license boundaries remain documented by
diff --git a/Storybook/README.md b/Storybook/README.md
index 8220a03e..712d39ce 100644
--- a/Storybook/README.md
+++ b/Storybook/README.md
@@ -10,7 +10,7 @@ An adapter can provide private preview-only provider/theme setup at `<workspace>
 
 ## Isolation
 
-Each inventory entry is built by a separate Storybook process into `Source/storybook-static/renderers/<adapter-id>`. The manager references those outputs through Storybook Composition. This process boundary is mandatory for PrimeReact 10.9.9 and 11.1.0 because they are incompatible versions of the same package.
+Each inventory entry is built by a separate Storybook process into `Source/storybook-static/renderers/<adapter-id>`. The manager references those outputs through Storybook Composition. This process boundary is mandatory for PrimeReact 10 and 11 because they are incompatible majors of the same package. Each child attestation records the exact upstream version selected by the checked-in adapter matrix.
 
 Every child records an ignored `cratis-renderer-attestation.json` beside its generated index. The build fails unless it resolves the adapter workspace's exact PrimeReact development version and no other PrimeReact version. Non-Prime previews fail if they reach PrimeReact at all.
 
@@ -29,4 +29,4 @@ yarn workspace @cratis/components.storybook test-storybook
 yarn workspace @cratis/components.storybook dev
 ```
 
-`test-storybook` runs 4 isolated previews × 261 stable stories × 2 appearance modes: **2,088 story/appearance/axe cases**. There is no story sampling or tag exclusion. The composed renderer control preserves a stable story id when available, but switching previews remounts the iframe and loses component-local state.
+`test-storybook` runs every discovered stable story in each isolated preview and both maintained appearance modes. There is no story sampling or tag exclusion; generated preview indexes are the authoritative inventory. The composed renderer control preserves a stable story id when available, but switching previews remounts the iframe and loses component-local state.
diff --git a/release.md b/release.md
index 69421736..fefb85b4 100644
--- a/release.md
+++ b/release.md
@@ -22,6 +22,17 @@ published. Package versions belong to independent release trains as declared by
 manifest and the generated compatibility contract; a source manifest version is not registry
 release identity.
 
+## Compatibility contract
+
+[`compat-manifest.json`](./compat-manifest.json) is generated compatibility schema version 2. It
+records the source-candidate status, the seven-package GA scope, independent release trains,
+Components 3 and 4 support windows, renderer ABI/profile ranges, and exact adapter evidence
+boundaries. Run `yarn verify-compat-manifest` rather than editing any generated copy by hand.
+
+The manifest is descriptive and fail-closed. `schemaVersion: 2`, a package version, a successful
+check, or `releaseStatus: source-candidate` grants no publication authority. Only the separately
+owner-approved authorization change described below may set `publicationEnabled: true`.
+
 ## Authorization gate
 
 Publication requires an owner-reviewed change that deliberately switches the generated contract
@@ -39,9 +50,9 @@ manifest before publication is enabled.
 
 The `release-evidence` job in `.github/workflows/javascript-build.yml` is a read-only,
 source-candidate evidence job. It builds each publishable workspace shape once, packs the exact
-seven `gaScope.publicPackages` archives once, records SHA-256 and SHA-512 checksums, binds a
-reproducible CycloneDX 1.6 SBOM to each archive and commit, and retains the resulting hosted
-artifact for 30 days. It cannot publish and is not npm trusted-publisher provenance. Contributors
+seven `gaScope.publicPackages` archives once, records SHA-256 and SHA-512 checksums, produces
+exactly seven reproducible CycloneDX 1.6 SBOM documents, binds each SBOM to its archive and commit,
+and retains the resulting hosted artifact for 30 days. It cannot publish and is not npm trusted-publisher provenance. Contributors
 can reproduce the same evidence in an empty caller-owned directory:
 
 ```bash
@@ -56,7 +67,8 @@ A future owner-authorized publication job must separately provide trusted-publis
 consume reviewed immutable archives without rebuilding them. That job does not exist in this
 source-candidate tranche.
 
-1. Check out the exact reviewed commit and install with the immutable lockfile.
+1. Check out the exact reviewed commit and run `yarn install --immutable`. Treat any install warning
+   as a release-candidate failure; do not normalize peer or resolution warnings into accepted output.
 2. Run all release gates for the seven-package scope and private Plain/Storybook evidence.
 3. Pack each public package exactly once. Never rebuild between candidate verification and
    publication.
@@ -112,3 +124,6 @@ tag or GitHub release to recover from an incomplete registry publication.
   `publicationEnabled` is false.
 
 Run `yarn verify-compat-manifest` and `yarn verify-release-safety` for every release-policy change.
+Owner-authorized publication work is tracked separately in
+[Components issue #207](https://github.com/Cratis/Components/issues/207); this policy does not
+complete or authorize that work.

From 05a37a938b4dad26831794b51411f30336feb566 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Sat, 29 Aug 2026 00:36:10 +0200
Subject: [PATCH 255/267] Clarify documentation evidence boundaries

---
 Documentation/storybook.mdx    | 2 +-
 Documentation/ui-foundation.md | 5 ++---
 Source/README.md               | 3 +--
 Storybook/README.md            | 2 +-
 4 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/Documentation/storybook.mdx b/Documentation/storybook.mdx
index fc6fed97..22775d3e 100644
--- a/Documentation/storybook.mdx
+++ b/Documentation/storybook.mdx
@@ -12,6 +12,6 @@ Use the Appearance toolbar to compare the maintained baseline in light and dark
 
 PrimeReact 10 and 11 are built as separate preview projects because their incompatible `primereact` peer majors must never enter one dependency graph. Each preview verifies the exact upstream version resolved from the checked-in adapter matrix. The PrimeReact 11 preview is a bounded test fixture: it uses PrimeReact's public contexts and the adapter's non-secret boolean setup attestation without mounting the real license manager. Components and this Storybook do not receive, read, store, log, serialize, bundle, or proxy a license key.
 
-Every story module also generates an autodocs page from the public component types and TSDoc. CI validates the metadata-discovered adapter inventory, type-checks the configuration, asserts peer-major isolation, builds and compares every preview index, then runs every discovered stable story in Playwright Chromium under baseline light and dark modes for the built-in renderer and every metadata-discovered public adapter. Generated preview indexes are the authoritative story inventory; private adapters such as Plain are excluded from composition. Each `play()` interaction runs, and Accessibility-addon axe violations are errors. This is a browser component-test gate, not a claim of universal browser or assistive-technology conformance; keyboard, focus, busy, empty, invalid, disabled, open-overlay, and responsive states still require deliberate story coverage and release review.
+Every story module also generates an autodocs page from the public component types and TSDoc. CI validates the metadata-discovered adapter inventory, type-checks the configuration, asserts peer-major isolation, builds and compares every preview index, then runs every discovered stable story in Playwright Chromium under baseline light and dark modes for the built-in renderer and every metadata-discovered public adapter. The current V4 evidence is four previews × 261 stories × two appearances: **2,088 story/appearance/axe cases**, with zero story or renderer exclusions. Generated preview indexes identify the exact stories; [#217](https://github.com/Cratis/Components/issues/217) tracks replacing release-snapshot count constants with generated reviewable inventories. Private adapters such as Plain are excluded from composition. Each `play()` interaction runs, and Accessibility-addon axe violations are errors. This is a browser component-test gate, not a claim of universal browser or assistive-technology conformance; keyboard, focus, busy, empty, invalid, disabled, open-overlay, and responsive states still require deliberate story coverage and release review.
 
 <StorybookEmbed fullPage={true} />
diff --git a/Documentation/ui-foundation.md b/Documentation/ui-foundation.md
index ba486758..ce0e0a0a 100644
--- a/Documentation/ui-foundation.md
+++ b/Documentation/ui-foundation.md
@@ -223,6 +223,5 @@ The Components 4 major candidate uses these repository release checks:
 - The migration guide works without repository-specific knowledge.
 - Every packed public JavaScript subpath passes strict TypeScript 6 validation or matches a bounded machine-readable upstream exception with exact installed versions and an unmet removal condition. Components-owned cascades additionally require their matching upstream TS2834/TS2835 root cause in the same compiler run.
 
-Generated conformance reports, the checked-in compatibility contract, and the repository
-[release policy](https://github.com/Cratis/Components/blob/main/release.md) own the exact current
-evidence and publication limitations.
+Generated conformance reports, the checked-in compatibility contract, and `release.md` at the
+repository root own the exact current evidence and publication limitations.
diff --git a/Source/README.md b/Source/README.md
index fea179d8..3fb09cfd 100644
--- a/Source/README.md
+++ b/Source/README.md
@@ -45,8 +45,7 @@ The generated compatibility schema v2 contract is published at
 `@cratis/components/compat-manifest.json`. It records the supported Components and tooling
 windows, the seven-package source-candidate scope, independent package trains, renderer ABI/profile
 ranges, and exact lower/current adapter evidence. `publicationEnabled: false` means the source is
-not authorized for publication; the repository
-[`release.md`](https://github.com/Cratis/Components/blob/main/release.md) is the durable policy.
+not authorized for publication; `release.md` at the repository root is the durable policy.
 
 **Yarn PnP note:** the current `@cratis/arc.react@22.5.0` package imports `rxjs` without declaring it. Strict PnP consumers install `rxjs@7.8.2` and add a temporary `packageExtensions` entry for `@cratis/arc.react@22.5.0`; remove it when Arc publishes corrected metadata. The canonical [getting-started guide](https://cratis.io/components/getting-started/) contains the exact YAML.
 
diff --git a/Storybook/README.md b/Storybook/README.md
index 712d39ce..49af675d 100644
--- a/Storybook/README.md
+++ b/Storybook/README.md
@@ -29,4 +29,4 @@ yarn workspace @cratis/components.storybook test-storybook
 yarn workspace @cratis/components.storybook dev
 ```
 
-`test-storybook` runs every discovered stable story in each isolated preview and both maintained appearance modes. There is no story sampling or tag exclusion; generated preview indexes are the authoritative inventory. The composed renderer control preserves a stable story id when available, but switching previews remounts the iframe and loses component-local state.
+`test-storybook` runs every discovered stable story in each isolated preview and both maintained appearance modes. The current V4 evidence is four previews × 261 stories × two appearances: **2,088 story/appearance/axe cases**. There is no story sampling or tag exclusion; generated preview indexes identify every executed story, while issue #217 tracks replacing release-snapshot count constants with generated reviewable inventories. The composed renderer control preserves a stable story id when available, but switching previews remounts the iframe and loses component-local state.

From dbb7fe871ba29fb80c1715fc3e0c3ad8d705c964 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Sat, 29 Aug 2026 00:37:21 +0200
Subject: [PATCH 256/267] pi-agent: Review implementation architecture

---
 .../when_detecting_planted_defects.tsx        |  17 +++
 Conformance/src/internal/metadata.ts          |   6 +
 ...when_defining_a_presentation_ui_library.ts |  57 ++++++-
 .../presentationTyping.fixture.ts             |   7 +
 Source/renderer/presentation.ts               |  67 ++++++---
 scripts/generate-release-evidence.mjs         |  47 ++++--
 scripts/generate-release-evidence.test.mjs    | 139 ++++++++++++++++--
 scripts/lib/release-evidence.mjs              |  33 ++++-
 8 files changed, 325 insertions(+), 48 deletions(-)

diff --git a/Conformance/for_conformance/when_detecting_planted_defects.tsx b/Conformance/for_conformance/when_detecting_planted_defects.tsx
index 57ede790..9efbc74b 100644
--- a/Conformance/for_conformance/when_detecting_planted_defects.tsx
+++ b/Conformance/for_conformance/when_detecting_planted_defects.tsx
@@ -148,6 +148,23 @@ describe('when detecting planted adapter defects', () => {
         expect(await failureIds(library)).to.deep.equal(['manifest.noOverDeclaration']);
     });
 
+    it('should report a static mode outside the declared runtime profile', async () => {
+        const library = oneSlot('common.surface', declaration('common.surface'));
+        const metadata = metadataFor(library);
+
+        expect(
+            await failureIds(library, {
+                metadata: {
+                    ...metadata,
+                    modes: {
+                        ...metadata.modes,
+                        'dialogs.dialog': 'atomic',
+                    },
+                },
+            }),
+        ).to.deep.equal(['manifest.runtimeConsistency']);
+    });
+
     it('should reject an undeclared skip', async () => {
         const library = oneSlot('common.button', declaration('common.button'));
 
diff --git a/Conformance/src/internal/metadata.ts b/Conformance/src/internal/metadata.ts
index 93703d80..5cc54611 100644
--- a/Conformance/src/internal/metadata.ts
+++ b/Conformance/src/internal/metadata.ts
@@ -209,6 +209,12 @@ export const compareMetadata = (
     )
         problems.push('capabilities differ from runtime manifest');
     if (isRecord(metadata.modes)) {
+        const modeSlots = Object.keys(metadata.modes).sort((left, right) =>
+            left.localeCompare(right),
+        );
+        if (JSON.stringify(modeSlots) !== JSON.stringify(runtimeSlots)) {
+            problems.push('mode slots differ from runtime profileSlots');
+        }
         for (const slotId of runtimeSlots) {
             if (metadata.modes[slotId] !== library.slots[slotId as unstable_SlotId]?.mode)
                 problems.push(`mode differs for '${slotId}'`);
diff --git a/Source/renderer/for_manifest/when_defining_a_presentation_ui_library.ts b/Source/renderer/for_manifest/when_defining_a_presentation_ui_library.ts
index 52fea429..3c72d17f 100644
--- a/Source/renderer/for_manifest/when_defining_a_presentation_ui_library.ts
+++ b/Source/renderer/for_manifest/when_defining_a_presentation_ui_library.ts
@@ -57,7 +57,7 @@ const mutableLibrary = (): Record<string, unknown> => {
 };
 
 describe('when defining a stable presentation UI library', () => {
-    it('should freeze the complete manifest through the shared manifest machinery', () => {
+    it('should freeze a defensive copy of the complete stable manifest', () => {
         const input = validLibrary();
         const result = definePresentationUiLibrary(input);
 
@@ -100,6 +100,36 @@ describe('when defining a stable presentation UI library', () => {
         );
     });
 
+    it('should reject an invalid stable renderer identity at runtime', () => {
+        const candidate = mutableLibrary();
+        candidate.id = '../unstable';
+
+        expect(() => defineRuntime(candidate)).to.throw(
+            TypeError,
+            'id must be a valid package-local renderer identity',
+        );
+    });
+
+    it('should reject an invalid stable display name at runtime', () => {
+        const candidate = mutableLibrary();
+        candidate.displayName = '';
+
+        expect(() => defineRuntime(candidate)).to.throw(
+            TypeError,
+            'displayName must contain between 1 and 128 characters',
+        );
+    });
+
+    it('should reject a non-component stable provider at runtime', () => {
+        const candidate = mutableLibrary();
+        candidate.Provider = {};
+
+        expect(() => defineRuntime(candidate)).to.throw(
+            TypeError,
+            'Provider must be a React component when supplied',
+        );
+    });
+
     it('should reject the wrong profile at runtime', () => {
         const candidate = {
             ...validLibrary(),
@@ -162,7 +192,7 @@ describe('when defining a stable presentation UI library', () => {
 
         expect(() => defineRuntime(candidate)).to.throw(
             TypeError,
-            'capabilities must include slot.render, parts.passthrough, and ssr.staticRender',
+            'capabilities must begin with slot.render, parts.passthrough, and ssr.staticRender',
         );
     });
 
@@ -180,4 +210,27 @@ describe('when defining a stable presentation UI library', () => {
             'capabilities must not contain duplicates',
         );
     });
+
+    it('should reject required capabilities outside their stable tuple positions', () => {
+        const candidate = mutableLibrary();
+        candidate.capabilities = [
+            'parts.passthrough',
+            'slot.render',
+            'ssr.staticRender',
+        ];
+
+        expect(() => defineRuntime(candidate)).to.throw(
+            TypeError,
+            'capabilities must begin with slot.render, parts.passthrough, and ssr.staticRender',
+        );
+    });
+
+    it('should not preserve unstable manifest fields on the stable result', () => {
+        const candidate = mutableLibrary();
+        candidate.preflight = () => [];
+
+        const result = defineRuntime(candidate);
+
+        expect('preflight' in result).to.equal(false);
+    });
 });
diff --git a/Source/renderer/for_slot_types/presentationTyping.fixture.ts b/Source/renderer/for_slot_types/presentationTyping.fixture.ts
index 2dd7210c..52115072 100644
--- a/Source/renderer/for_slot_types/presentationTyping.fixture.ts
+++ b/Source/renderer/for_slot_types/presentationTyping.fixture.ts
@@ -78,6 +78,12 @@ const providerProps: Omit<CratisComponentsProviderProps, 'children'> = {
     },
 };
 
+const libraryWithUnstablePreflight = definePresentationUiLibrary({
+    ...library,
+    // @ts-expect-error Stable presentation manifests cannot expose unstable preflight behavior.
+    preflight: () => [],
+});
+
 const setup: CratisRendererSetup = {
     'sample.stable-setup': true,
     'sample.compatibility-setup': true,
@@ -132,6 +138,7 @@ void atomicMode;
 void atomicSlot;
 void compatibilitySetup;
 void extraSlot;
+void libraryWithUnstablePreflight;
 void missingSlot;
 void providerProps;
 void unsupportedFidelity;
diff --git a/Source/renderer/presentation.ts b/Source/renderer/presentation.ts
index 6ebee1fb..c37550db 100644
--- a/Source/renderer/presentation.ts
+++ b/Source/renderer/presentation.ts
@@ -11,11 +11,7 @@ import type { SwitchProps } from '../Common/Switch';
 import type { TextAreaProps } from '../Common/TextArea';
 import type { TextInputProps } from '../Common/TextInput';
 import type { ProgressBarProps } from '../Display/ProgressBar';
-import {
-    unstable_defineUiLibrary,
-    type CratisPresentationUiLibraryProviderProps,
-    type unstable_UiLibrary,
-} from './manifest';
+import type { CratisPresentationUiLibraryProviderProps } from './manifest';
 
 /** Stable renderer profile implemented by certified presentation adapters. */
 export const CRATIS_PRESENTATION_PROFILE = 'stable-presentation/v1' as const;
@@ -152,11 +148,26 @@ const hasCanonicalProfileSlots = (profileSlots: readonly unknown[]): boolean =>
  * @param library Stable presentation library declaration.
  * @returns A defensive, deeply frozen manifest copy.
  */
-export const definePresentationUiLibrary = <
-    const Library extends CratisPresentationUiLibrary,
->(
-    library: Library,
-): Library => {
+export const definePresentationUiLibrary = (
+    library: CratisPresentationUiLibrary,
+): CratisPresentationUiLibrary => {
+    if (
+        typeof library.id !== 'string' ||
+        library.id.length > 128 ||
+        !/^[a-z][a-z0-9]*(?:[._-][a-z0-9]+)*$/u.test(library.id)
+    ) {
+        invalidPresentationLibrary('id must be a valid package-local renderer identity');
+    }
+    if (
+        typeof library.displayName !== 'string' ||
+        library.displayName.length === 0 ||
+        library.displayName.length > 128
+    ) {
+        invalidPresentationLibrary('displayName must contain between 1 and 128 characters');
+    }
+    if (library.Provider !== undefined && typeof library.Provider !== 'function') {
+        invalidPresentationLibrary('Provider must be a React component when supplied');
+    }
     if (library.profile !== CRATIS_PRESENTATION_PROFILE) {
         invalidPresentationLibrary(`profile must be '${CRATIS_PRESENTATION_PROFILE}'`);
     }
@@ -225,21 +236,41 @@ export const definePresentationUiLibrary = <
     }
     if (
         requiredCapabilityIds.some(
-            (capability) => !library.capabilities.includes(capability),
+            (capability, index) => library.capabilities[index] !== capability,
         )
     ) {
         invalidPresentationLibrary(
-            'capabilities must include slot.render, parts.passthrough, and ssr.staticRender',
+            'capabilities must begin with slot.render, parts.passthrough, and ssr.staticRender',
         );
     }
     if (new Set(library.capabilities).size !== library.capabilities.length) {
         invalidPresentationLibrary('capabilities must not contain duplicates');
     }
 
-    // SAFETY: every stable field and all nine declarations were validated above, so the manifest
-    // satisfies the broader internal library shape without admitting an atomic or unknown slot.
-    const unstableLibrary = library as unknown as unstable_UiLibrary;
-    const frozenLibrary = unstable_defineUiLibrary(unstableLibrary);
-    // SAFETY: the shared freezer copies values without changing the validated stable shape.
-    return frozenLibrary as unknown as Library;
+    const slots = Object.freeze(
+        Object.fromEntries(
+            cratisPresentationSlotIds.map((slotId) => [
+                slotId,
+                Object.freeze({
+                    mode: library.slots[slotId].mode,
+                    fidelity: library.slots[slotId].fidelity,
+                    render: library.slots[slotId].render,
+                }),
+            ]),
+        ),
+    ) as CratisPresentationSlotMap;
+
+    return Object.freeze({
+        id: library.id,
+        displayName: library.displayName,
+        abi: library.abi,
+        level: library.level,
+        profile: library.profile,
+        profileSlots: cratisPresentationSlotIds,
+        capabilities: Object.freeze([
+            ...library.capabilities,
+        ]) as CratisPresentationCapabilities,
+        slots,
+        Provider: library.Provider,
+    });
 };
diff --git a/scripts/generate-release-evidence.mjs b/scripts/generate-release-evidence.mjs
index b58010be..84059c0e 100644
--- a/scripts/generate-release-evidence.mjs
+++ b/scripts/generate-release-evidence.mjs
@@ -94,21 +94,30 @@ export const resolveEvidenceCommit = (requestedCommit) => {
     return headCommit;
 };
 
-/** Rejects tracked or staged bytes that are not represented by the evidence commit. */
+/** Rejects working-tree bytes that are not represented by the evidence commit. */
 export const validateCleanWorkingTreeStatus = (status) => {
     if (typeof status !== 'string' || status.trim().length > 0) {
         throw new Error(
-            'Release evidence requires a clean tracked working tree at the checked-out commit.',
+            'Release evidence requires a clean working tree at the checked-out commit.',
         );
     }
 };
 
-const requireCleanWorkingTree = () =>
+/** Verifies the repository state used to build release evidence. */
+export const requireCleanWorkingTree = (
+    cwd = repositoryDirectory,
+    { includeUntracked = true } = {},
+) =>
     validateCleanWorkingTreeStatus(
-        run('git', ['status', '--porcelain', '--untracked-files=no'], {
-            capture: true,
-            timeout: 30_000,
-        }),
+        run(
+            'git',
+            [
+                'status',
+                '--porcelain',
+                includeUntracked ? '--untracked-files=all' : '--untracked-files=no',
+            ],
+            { capture: true, timeout: 30_000, cwd },
+        ),
     );
 
 const readJsonFile = (filePath, description) => {
@@ -184,11 +193,15 @@ const discoverWorkspaces = () => {
     return workspaces;
 };
 
-const prepareOutputDirectory = (outputArgument) => {
+export const prepareOutputDirectory = (outputArgument) => {
     const outputDirectory = path.resolve(outputArgument);
     let created = false;
     if (fs.existsSync(outputDirectory)) {
-        if (!fs.statSync(outputDirectory).isDirectory())
+        const output = fs.lstatSync(outputDirectory);
+        if (output.isSymbolicLink()) {
+            throw new Error('Evidence output directory must not be a symbolic link.');
+        }
+        if (!output.isDirectory())
             throw new Error('Evidence output must be a directory.');
         if (fs.readdirSync(outputDirectory).length > 0)
             throw new Error('Evidence output directory must be empty.');
@@ -219,14 +232,16 @@ const cleanFailureState = (outputDirectory, outputCreated) => {
     }
 };
 
-const buildPublishableShape = (releasePackages) => {
+export const buildPublishableShape = (releasePackages, execute = run) => {
     for (const packageEntry of releasePackages) {
-        let task;
-        if (packageEntry.role === 'core') task = 'prepare';
-        else if (['conformance', 'renderer-adapter'].includes(packageEntry.role)) {
-            task = 'build';
+        if (packageEntry.role === 'core') {
+            execute(yarnCommand, ['workspace', packageEntry.name, 'run', 'prepare']);
+        } else if (
+            ['conformance', 'renderer-adapter'].includes(packageEntry.role)
+        ) {
+            execute(yarnCommand, ['workspace', packageEntry.name, 'run', 'clean']);
+            execute(yarnCommand, ['workspace', packageEntry.name, 'run', 'build']);
         }
-        if (task) run(yarnCommand, ['workspace', packageEntry.name, 'run', task]);
     }
 };
 
@@ -341,7 +356,7 @@ export function generateReleaseEvidence({ output, commit: requestedCommit } = {}
             `${JSON.stringify(index, null, 2)}\n`,
         );
         validateReleaseEvidenceIndex(index, outputDirectory);
-        requireCleanWorkingTree();
+        requireCleanWorkingTree(repositoryDirectory, { includeUntracked: false });
         return index;
     } catch (error) {
         cleanFailureState(outputDirectory, outputCreated);
diff --git a/scripts/generate-release-evidence.test.mjs b/scripts/generate-release-evidence.test.mjs
index d76d9eed..28dd0685 100644
--- a/scripts/generate-release-evidence.test.mjs
+++ b/scripts/generate-release-evidence.test.mjs
@@ -2,12 +2,22 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import assert from 'node:assert/strict';
-import { mkdtempSync, rmSync, writeFileSync } from 'node:fs';
+import { spawnSync } from 'node:child_process';
+import {
+    mkdtempSync,
+    mkdirSync,
+    rmSync,
+    symlinkSync,
+    writeFileSync,
+} from 'node:fs';
 import { tmpdir } from 'node:os';
 import path from 'node:path';
 import { test } from 'node:test';
 import { gzipSync } from 'node:zlib';
 import {
+    buildPublishableShape,
+    prepareOutputDirectory,
+    requireCleanWorkingTree,
     resolveEvidenceCommit,
     validateCleanWorkingTreeStatus,
 } from './generate-release-evidence.mjs';
@@ -38,16 +48,20 @@ const createTarHeader = (entryName, contents) => {
     return header;
 };
 
+const createTarEntry = (entryName, value) => {
+    const contents = Buffer.from(
+        typeof value === 'string' ? value : JSON.stringify(value),
+    );
+    const blocks = [createTarHeader(entryName, contents), contents];
+    const padding = (512 - (contents.length % 512)) % 512;
+    if (padding > 0) blocks.push(Buffer.alloc(padding));
+    return blocks;
+};
+
 const createArchive = (filePath, entries) => {
-    const blocks = [];
-    for (const [entryName, value] of entries) {
-        const contents = Buffer.from(
-            typeof value === 'string' ? value : JSON.stringify(value),
-        );
-        blocks.push(createTarHeader(entryName, contents), contents);
-        const padding = (512 - (contents.length % 512)) % 512;
-        if (padding > 0) blocks.push(Buffer.alloc(padding));
-    }
+    const blocks = entries.flatMap(([entryName, value]) =>
+        createTarEntry(entryName, value),
+    );
     blocks.push(Buffer.alloc(1024));
     writeFileSync(filePath, gzipSync(Buffer.concat(blocks), { mtime: 0 }));
 };
@@ -104,10 +118,54 @@ test('release evidence rejects tracked working-tree drift', () => {
     assert.doesNotThrow(() => validateCleanWorkingTreeStatus(''));
     assert.throws(
         () => validateCleanWorkingTreeStatus(' M package.json'),
-        /requires a clean tracked working tree/,
+        /requires a clean working tree/,
     );
 });
 
+test('release evidence rejects untracked build inputs before binding to a commit', () => {
+    withTemporaryDirectory((directory) => {
+        const initialization = spawnSync('git', ['init', '--quiet'], { cwd: directory });
+        assert.equal(initialization.status, 0);
+        mkdirSync(path.join(directory, 'Source'));
+        writeFileSync(
+            path.join(directory, 'Source', 'untracked.ts'),
+            'export const value = 42;\n',
+        );
+
+        assert.throws(
+            () => requireCleanWorkingTree(directory, { includeUntracked: true }),
+            /requires a clean working tree/,
+        );
+    });
+});
+
+test('publishable builds clean generated output before compiling', () => {
+    const commands = [];
+    buildPublishableShape(
+        [{ name: '@cratis/example-adapter', role: 'renderer-adapter' }],
+        (command, arguments_) => commands.push([command, arguments_]),
+    );
+
+    assert.deepEqual(commands, [
+        ['yarn', ['workspace', '@cratis/example-adapter', 'run', 'clean']],
+        ['yarn', ['workspace', '@cratis/example-adapter', 'run', 'build']],
+    ]);
+});
+
+test('release evidence rejects a symlink as its output directory', () => {
+    withTemporaryDirectory((directory) => {
+        const target = path.join(directory, 'target');
+        const output = path.join(directory, 'output');
+        mkdirSync(target);
+        symlinkSync(target, output, 'dir');
+
+        assert.throws(
+            () => prepareOutputDirectory(output),
+            /must not be a symbolic link/,
+        );
+    });
+});
+
 test('archive hash mismatch fails', () => {
     withTemporaryDirectory((directory) => {
         const archivePath = path.join(directory, 'example.tgz');
@@ -175,6 +233,65 @@ test('path and filename traversal is rejected', () => {
     });
 });
 
+test('archive parsing rejects decompressed data above its bounded evidence limit', () => {
+    withTemporaryDirectory((directory) => {
+        const archivePath = path.join(directory, 'oversized.tgz');
+        writeFileSync(
+            archivePath,
+            gzipSync(Buffer.alloc(32 * 1024 * 1024 + 1), { mtime: 0 }),
+        );
+
+        assert.throws(
+            () => readPackedPackageJson(archivePath),
+            /decompressed size limit/,
+        );
+    });
+});
+
+test('archive parsing rejects hidden entries after the tar end marker', () => {
+    withTemporaryDirectory((directory) => {
+        const archivePath = path.join(directory, 'trailing-entry.tgz');
+        const blocks = [
+            ...createTarEntry('package/package.json', {
+                name: '@cratis/example',
+                version: '1.2.3',
+            }),
+            Buffer.alloc(512),
+            ...createTarEntry('package/hidden.js', 'hidden'),
+            Buffer.alloc(1024),
+        ];
+        writeFileSync(archivePath, gzipSync(Buffer.concat(blocks), { mtime: 0 }));
+
+        assert.throws(
+            () => readPackedPackageJson(archivePath),
+            /non-zero data after its end marker/,
+        );
+    });
+});
+
+test('SBOM dependencies reject duplicate dependsOn references', () => {
+    const sbom = createBoundSbom();
+    sbom.components.push({
+        type: 'library',
+        name: 'dependency',
+        version: '1.0.0',
+        'bom-ref': 'dependency@1.0.0',
+    });
+    sbom.dependencies[0].dependsOn = ['dependency@1.0.0', 'dependency@1.0.0'];
+
+    assert.throws(
+        () =>
+            validateSbom(sbom, {
+                name: compatibilityEntry.name,
+                version: compatibilityEntry.version,
+                sha512: 'a'.repeat(128),
+                tarball: 'cratis-example-1.2.3.tgz',
+                commit: 'b'.repeat(40),
+            }),
+        /duplicate dependsOn reference/,
+    );
+});
+
 test('release package order comes only from gaScope', () => {
     const manifest = {
         gaScope: { publicPackages: ['@cratis/second', '@cratis/first'] },
diff --git a/scripts/lib/release-evidence.mjs b/scripts/lib/release-evidence.mjs
index bcd6dab6..6a32ff8b 100644
--- a/scripts/lib/release-evidence.mjs
+++ b/scripts/lib/release-evidence.mjs
@@ -12,6 +12,9 @@ export const archiveBindingProperties = Object.freeze({
     commit: 'urn:cratis:components:release-evidence:commit',
 });
 
+const maximumCompressedArchiveBytes = 32 * 1024 * 1024;
+const maximumDecompressedArchiveBytes = 32 * 1024 * 1024;
+
 export function validateCommit(commit) {
     if (typeof commit !== 'string' || !/^[0-9a-f]{40}$/iu.test(commit)) {
         throw new Error('Commit must be exactly 40 hexadecimal characters.');
@@ -189,7 +192,27 @@ function validateArchivePath(entryPath) {
 }
 
 export function readPackedPackageJson(archivePath) {
-    const archive = gunzipSync(fs.readFileSync(archivePath));
+    const compressedArchive = fs.readFileSync(archivePath);
+    if (compressedArchive.length > maximumCompressedArchiveBytes) {
+        throw new Error('Packed archive exceeds the compressed size limit.');
+    }
+    let archive;
+    try {
+        archive = gunzipSync(compressedArchive, {
+            maxOutputLength: maximumDecompressedArchiveBytes,
+        });
+    } catch (error) {
+        if (
+            error instanceof Error &&
+            (error.code === 'ERR_BUFFER_TOO_LARGE' ||
+                error.message.includes('larger than'))
+        ) {
+            throw new Error('Packed archive exceeds the decompressed size limit.', {
+                cause: error,
+            });
+        }
+        throw error;
+    }
     let offset = 0;
     let longName;
     let pax = {};
@@ -199,6 +222,9 @@ export function readPackedPackageJson(archivePath) {
     while (offset + 512 <= archive.length) {
         const header = archive.subarray(offset, offset + 512);
         if (header.every((byte) => byte === 0)) {
+            if (archive.subarray(offset).some((byte) => byte !== 0)) {
+                throw new Error('Tar archive contains non-zero data after its end marker.');
+            }
             endMarkerFound = true;
             break;
         }
@@ -316,6 +342,11 @@ const validateDependencyReferences = (sbom) => {
                 `SBOM dependency '${dependency.ref}' contains an invalid dependsOn reference.`,
             );
         }
+        if (new Set(dependsOn).size !== dependsOn.length) {
+            throw new Error(
+                `SBOM dependency '${dependency.ref}' contains a duplicate dependsOn reference.`,
+            );
+        }
     }
     if (!dependencyRefs.has(sbom.metadata.component['bom-ref'])) {
         throw new Error('SBOM dependencies do not include the metadata component.');

From d264275f85cc5d7583bcc7e9210142e3bff4a7d0 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Sat, 29 Aug 2026 00:39:56 +0200
Subject: [PATCH 257/267] Fix Components 4 migration tooling gaps

Account for the complete Components 3.6 root surface, preserve Button truthiness, and harden packed CLI preflight verification. Clarify the source-to-target order, rollback points, package-manager commands, and renderer adapter boundaries so consumers can migrate without guessing.
---
 Codemods/README.md                         | 44 +++++++----
 Codemods/lib/buttonVariantToneTransform.js |  5 +-
 Codemods/lib/compatibility.js              | 17 ++++-
 Codemods/lib/namespaceMap.js               | 17 ++++-
 Codemods/lib/transform.js                  | 19 +++++
 Codemods/test/compatibility.test.js        | 18 +++++
 Codemods/test/migration-transforms.test.js | 17 +++++
 Codemods/test/transform.test.js            | 85 +++++++++++++++++++++-
 Codemods/test/verify-packed-package.mjs    | 68 ++++++++++++++---
 Documentation/Migration/2-to-3.md          | 10 +--
 Documentation/Migration/3-to-4.md          | 70 ++++++++++++++----
 Documentation/coming-from-primereact.md    |  2 +
 ESLint/README.md                           | 11 ++-
 ESLint/lib/noRootBarrelImport.js           | 27 ++++++-
 ESLint/lib/rootNamespaceMap.js             | 12 ++-
 ESLint/test/rules.test.js                  | 57 +++++++++++++++
 Source/MIGRATION.md                        | 66 +++++++++++++----
 17 files changed, 473 insertions(+), 72 deletions(-)

diff --git a/Codemods/README.md b/Codemods/README.md
index 786debac..20cfec39 100644
--- a/Codemods/README.md
+++ b/Codemods/README.md
@@ -28,7 +28,7 @@ rewrite it without guessing. Only a **wildcard** re-export of the whole package
 unsupported, for the same reason a whole-package namespace import stays unsupported: see
 [What it refuses to guess](#what-it-refuses-to-guess).
 
-The historical `CommandStepper` root namespace is a special case: it aliased the complete `CommandDialog` module. The codemod therefore maps it to `@cratis/components/CommandDialog`, preserving every namespace member. New code that only needs the standalone component should use `import { CommandStepper } from '@cratis/components/CommandStepper'` (or the equivalent re-export).
+The historical `CommandStepper` root namespace is a special case: it aliased the complete `CommandDialog` module. The codemod therefore maps it to `@cratis/components/CommandDialog`, preserving the module identity for members retained in Components 4. It cannot restore a removed module export such as the accidental `CommandStepperContent` surface. New code that only needs the standalone component should use `import { CommandStepper } from '@cratis/components/CommandStepper'` (or the equivalent re-export).
 
 Multiple namespaces in one import or re-export become one subpath statement per namespace:
 
@@ -57,11 +57,7 @@ Running the codemod again on its own output is a no-op — it only ever matches
 named re-export whose module specifier is exactly `@cratis/components` (or the `--package`
 override), so an already-migrated subpath import or re-export is never revisited.
 
-The complete namespace → subpath map and the approved-root-symbol allowlist live in
-[`lib/namespaceMap.js`](./lib/namespaceMap.js), mirrored from `Source/index.ts`. Contributors
-must update it and the
-`ESLint/lib/rootNamespaceMap.js` mirror
-together when a namespace subpath is added, renamed, or removed.
+The complete namespace → subpath map, known removed Components 3 compatibility exports, and approved-root-symbol allowlist live in [`lib/namespaceMap.js`](./lib/namespaceMap.js), mirrored by `ESLint/lib/rootNamespaceMap.js`. Contributors must update both packages together when a namespace subpath, removed boundary, or setup symbol changes. The packages still ship independently; parity specs prevent their migration contracts from drifting.
 
 ### What it refuses to guess
 
@@ -77,6 +73,10 @@ Each of these is left completely untouched, and reported as a diagnostic instead
 - A named import of a symbol that is neither an approved setup symbol nor a known namespace
   (for example a member like `Button` that only exists _inside_ a namespace, not at the
   root). The whole import statement is left untouched rather than partially migrated.
+- The Components 3.6 `Compatibility` namespace and its direct pass-through exports. They
+  are recognized known removals, not unknown symbols: Components 4 has no compatibility
+  subpath, so the transform leaves the statement untouched and directs the consumer to
+  typed Cratis parts.
 - A TypeScript import assignment — `import Components = require('@cratis/components');`.
   This is the whole package namespace, so later member access is as ambiguous as `import * as`.
 - A dynamic `import('@cratis/components')` or a CommonJS `require('@cratis/components')`,
@@ -120,6 +120,17 @@ npx --package "@cratis/components-codemods@$TOOLING_RANGE" \
 node Codemods/scripts/remove-root-namespace-imports.js --check Source
 ```
 
+The same bounded package works in pnpm and Yarn 2+ projects:
+
+```sh
+pnpm dlx --package "@cratis/components-codemods@$TOOLING_RANGE" \
+  cratis-components-remove-root-namespace-imports --check path/to/app/src
+yarn dlx --package "@cratis/components-codemods@$TOOLING_RANGE" \
+  cratis-components-remove-root-namespace-imports --check path/to/app/src
+```
+
+Quote any path containing spaces. Angle-bracket placeholders are intentionally not used in executable examples because `<...>` is shell input-redirection syntax.
+
 Exit code is non-zero whenever an unsupported case was found (with `--check` or without —
 those always need a human), and, in `--check` mode only, whenever a supported rewrite has
 not yet been applied. Run `--help` for the full option list.
@@ -193,25 +204,32 @@ Multi-statement, multi-use, wrong-payload, destructuring-with-default/rest, and
 
 ## Run the migration sequence
 
-Use the bounded Components 4 tooling train for all three commands. Run the root-import transform first so the later transforms can resolve explicit Components-owned subpaths, then run Button appearance and change-handler migration. Preview every step before applying it:
+Use the bounded Components 4 tooling train for all three commands. The recommended source/target order is:
+
+1. With Components 3 (`>=3 <4`) installed, preview and apply the root-import transform. Its subpaths exist in both majors.
+2. Run the Components 3 gates and checkpoint the import-only change.
+3. Upgrade Core to Components 4 (`^4.0.0`).
+4. Preview and apply Button appearance, then change-handler migration; these produce Components 4 source.
+
+Preflight also accepts the Components 4 target window so the root transform can be recovered after an upgrade. It accepts no other Core major. Preview every step before applying it:
 
 ```sh
 TOOLING_RANGE='^4.0.0'
 
 npx --package "@cratis/components-codemods@$TOOLING_RANGE" \
-  cratis-components-remove-root-namespace-imports --check <paths...>
+  cratis-components-remove-root-namespace-imports --check path/to/app/src
 npx --package "@cratis/components-codemods@$TOOLING_RANGE" \
-  cratis-components-remove-root-namespace-imports <paths...>
+  cratis-components-remove-root-namespace-imports path/to/app/src
 
 npx --package "@cratis/components-codemods@$TOOLING_RANGE" \
-  cratis-components-button-variant-tone --check <paths...>
+  cratis-components-button-variant-tone --check path/to/app/src
 npx --package "@cratis/components-codemods@$TOOLING_RANGE" \
-  cratis-components-button-variant-tone <paths...>
+  cratis-components-button-variant-tone path/to/app/src
 
 npx --package "@cratis/components-codemods@$TOOLING_RANGE" \
-  cratis-components-change-handler --check <paths...>
+  cratis-components-change-handler --check path/to/app/src
 npx --package "@cratis/components-codemods@$TOOLING_RANGE" \
-  cratis-components-change-handler <paths...>
+  cratis-components-change-handler path/to/app/src
 ```
 
 Never substitute `latest`; keep tooling within `>=4 <5`. Tooling patches release independently from Core, and the bundled manifest preflight enforces the compatible migration windows. Both new CLIs require Node.js 20 or newer, bundle their own TypeScript compiler dependency, scan `.js`, `.jsx`, `.mjs`, `.cjs`, `.ts`, `.tsx`, `.mts`, and `.cts` recursively, support `--package <name>`, and exit nonzero for pending check-mode edits or any refused case. Review every diagnostic and `TODO(cratis-codemod)`, then run the consuming project's formatter, lint, type check, tests, and production build.
diff --git a/Codemods/lib/buttonVariantToneTransform.js b/Codemods/lib/buttonVariantToneTransform.js
index e8dc6f5c..14949661 100644
--- a/Codemods/lib/buttonVariantToneTransform.js
+++ b/Codemods/lib/buttonVariantToneTransform.js
@@ -303,7 +303,8 @@ function isImportedButtonTag(tag, namedButtons, commonNamespaces) {
 
 function staticBoolean(attribute) {
     if (!attribute.initializer) return true;
-    if (ts.isStringLiteral(attribute.initializer)) return true;
+    if (ts.isStringLiteral(attribute.initializer))
+        return attribute.initializer.text.length > 0;
     if (!ts.isJsxExpression(attribute.initializer) || !attribute.initializer.expression)
         return undefined;
     const expression = unwrap(attribute.initializer.expression);
@@ -314,7 +315,7 @@ function staticBoolean(attribute) {
     )
         return false;
     if (ts.isStringLiteral(expression) || ts.isNoSubstitutionTemplateLiteral(expression))
-        return true;
+        return expression.text.length > 0;
     if (ts.isNumericLiteral(expression)) return Number(expression.text) !== 0;
     return undefined;
 }
diff --git a/Codemods/lib/compatibility.js b/Codemods/lib/compatibility.js
index 7fea53cd..8db0c849 100644
--- a/Codemods/lib/compatibility.js
+++ b/Codemods/lib/compatibility.js
@@ -109,8 +109,20 @@ export function validateBundledManifest(manifest, codemodVersion) {
     }
 
     const windows = Object.values(manifest.supportWindows ?? {});
+    const sourceWindows = windows.filter(
+        ({ migrationRole }) => migrationRole === 'source',
+    );
+    const targetWindows = windows.filter(
+        ({ migrationRole }) => migrationRole === 'target',
+    );
     if (
-        windows.length === 0 ||
+        windows.length !== 2 ||
+        sourceWindows.length !== 1 ||
+        targetWindows.length !== 1 ||
+        sourceWindows[0].components !== '>=3 <4' ||
+        sourceWindows[0].migrationTarget !== '>=4 <5' ||
+        targetWindows[0].components !== '>=4 <5' ||
+        manifest.toolingCompatibility?.componentsCore !== '>=4 <5' ||
         windows.some((window) => {
             const toolingRange =
                 typeof window.tooling === 'string'
@@ -118,8 +130,7 @@ export function validateBundledManifest(manifest, codemodVersion) {
                     : window.tooling?.codemods;
             return (
                 !semver.validRange(window.components) ||
-                !semver.validRange(toolingRange) ||
-                !['source', 'target'].includes(window.migrationRole)
+                !semver.validRange(toolingRange)
             );
         })
     ) {
diff --git a/Codemods/lib/namespaceMap.js b/Codemods/lib/namespaceMap.js
index d9ddea38..47edbcfb 100644
--- a/Codemods/lib/namespaceMap.js
+++ b/Codemods/lib/namespaceMap.js
@@ -18,7 +18,7 @@
 export const packageName = '@cratis/components';
 
 /**
- * Every namespace name removed from the Components 3 root, mapped to the Components 4
+ * Every retained namespace removed from the Components 3 root, mapped to the Components 4
  * subpath it becomes: `import { Canvas } from '@cratis/components'` migrates to
  * `import * as Canvas from '@cratis/components/Canvas'`. `Types` is the one case where
  * the namespace name and its subpath differ in casing (`./types`, lowercase).
@@ -48,6 +48,21 @@ export const namespaceSubpaths = {
     Types: 'types',
 };
 
+/**
+ * Components 3 root exports that have no Components 4 root or subpath equivalent.
+ * These are known migration boundaries rather than unknown symbols: transforms must
+ * refuse them with actionable renderer-removal guidance instead of suggesting that the
+ * namespace map is incomplete.
+ */
+export const removedRootSymbols = new Set([
+    'Compatibility',
+    'assertPrimeReact11PassThroughCompatibility',
+    'components3PrimeReact11PassThroughContract',
+    'primeReact11PassThroughSentinelAttribute',
+    'primeReact11PassThroughSentinelPreset',
+    'PrimeReact11PassThroughComponent',
+]);
+
 /**
  * The primary setup surface Source/index.ts re-exports directly from the root so a
  * consumer that only wants provider setup does not need to know about the `Common`
diff --git a/Codemods/lib/transform.js b/Codemods/lib/transform.js
index e2830c66..fe9ab177 100644
--- a/Codemods/lib/transform.js
+++ b/Codemods/lib/transform.js
@@ -6,6 +6,7 @@ import {
     packageName as defaultPackageName,
     namespaceSubpaths,
     approvedRootSymbols,
+    removedRootSymbols,
 } from './namespaceMap.js';
 
 /**
@@ -45,6 +46,8 @@ import {
  * - A named import or named re-export of a symbol that is neither an approved setup
  *   symbol nor a known namespace — the whole statement is left untouched so a
  *   partial, silently incomplete migration is never produced.
+ * - A known removed Components 3 renderer-compatibility export — it has no Components 4
+ *   subpath, so the statement is left untouched with typed-parts guidance.
  * - A dynamic `import('...')` or CommonJS `require('...')` call anywhere in the file.
  * - A wildcard re-export of the whole package (`export * from '@cratis/components'`)
  *   or a namespace re-export of the whole package (`export * as X from
@@ -140,6 +143,14 @@ export function transformSource(fileName, text, options = {}) {
                 });
                 continue;
             }
+            if (removedRootSymbols.has(importedName)) {
+                hasUnknown = true;
+                report(
+                    element,
+                    `'${importedName}' was a Components 3 PrimeReact compatibility export and has no Components 4 subpath. Leaving this import untouched — migrate renderer slots to typed Cratis parts and remove the compatibility export manually.`,
+                );
+                continue;
+            }
 
             hasUnknown = true;
             report(
@@ -204,6 +215,14 @@ export function transformSource(fileName, text, options = {}) {
                 });
                 continue;
             }
+            if (removedRootSymbols.has(exportedName)) {
+                hasUnknown = true;
+                report(
+                    element,
+                    `'${exportedName}' was a Components 3 PrimeReact compatibility export and has no Components 4 subpath. Leaving this re-export untouched — migrate renderer slots to typed Cratis parts and remove the compatibility export manually.`,
+                );
+                continue;
+            }
 
             hasUnknown = true;
             report(
diff --git a/Codemods/test/compatibility.test.js b/Codemods/test/compatibility.test.js
index a87c57f1..74b7ec68 100644
--- a/Codemods/test/compatibility.test.js
+++ b/Codemods/test/compatibility.test.js
@@ -80,4 +80,22 @@ describe('compatibility preflight', () => {
             'invalid migration support windows',
         );
     });
+
+    it('rejects a manifest that expands the Components 3 source window', () => {
+        const invalid = structuredClone(compatibilityManifest);
+        invalid.supportWindows.components3.components = '>=2 <4';
+
+        expect(() => validateBundledManifest(invalid, '4.0.0')).toThrow(
+            'invalid migration support windows',
+        );
+    });
+
+    it('rejects a manifest without the Components 4 target window', () => {
+        const invalid = structuredClone(compatibilityManifest);
+        delete invalid.supportWindows.components4;
+
+        expect(() => validateBundledManifest(invalid, '4.0.0')).toThrow(
+            'invalid migration support windows',
+        );
+    });
 });
diff --git a/Codemods/test/migration-transforms.test.js b/Codemods/test/migration-transforms.test.js
index e11e6c1e..a9116929 100644
--- a/Codemods/test/migration-transforms.test.js
+++ b/Codemods/test/migration-transforms.test.js
@@ -83,6 +83,23 @@ describe('Button variant/tone transform', () => {
         );
     });
 
+    it('preserves JavaScript truthiness for empty-string legacy booleans', () => {
+        const input = [
+            "import { Button } from '@cratis/components/Common';",
+            "const a=<Button link='' text outlined/>;",
+            "const b=<Button text={''} outlined/>;",
+            'const c=<Button rounded={``}/>;',
+            '',
+        ].join('\n');
+        const result = transformButtonVariantTone('Buttons.tsx', input);
+
+        expect(result.diagnostics).toEqual([]);
+        expect(result.text).toContain("const a=<Button variant='ghost'  />;");
+        expect(result.text).toContain("const b=<Button variant='outline' />;");
+        expect(result.text).toContain('const c=<Button />;');
+        expectValidTsx('Buttons.tsx', result.text);
+    });
+
     it('supports a package override without touching the default package', () => {
         const input =
             "import { Button as B } from '@example/ui/Common';\nimport { Button } from '@cratis/components/Common';\nconst x=<><B text/><Button text/></>;\n";
diff --git a/Codemods/test/transform.test.js b/Codemods/test/transform.test.js
index bed94951..6aa1d789 100644
--- a/Codemods/test/transform.test.js
+++ b/Codemods/test/transform.test.js
@@ -10,10 +10,12 @@ import { transformSource } from '../lib/transform.js';
 import {
     approvedRootSymbols as codemodApprovedRootSymbols,
     namespaceSubpaths as codemodNamespaceSubpaths,
+    removedRootSymbols as codemodRemovedRootSymbols,
 } from '../lib/namespaceMap.js';
 import {
     approvedRootSymbols as eslintApprovedRootSymbols,
     namespaceSubpaths as eslintNamespaceSubpaths,
+    removedRootSymbols as eslintRemovedRootSymbols,
 } from '../../ESLint/lib/rootNamespaceMap.js';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
@@ -80,6 +82,59 @@ describe('root namespace maps', () => {
         );
     });
 
+    it('should keep the codemod and ESLint removed-root sets identical', () => {
+        expect([...codemodRemovedRootSymbols].sort()).toEqual(
+            [...eslintRemovedRootSymbols].sort(),
+        );
+    });
+
+    it('should account for every Components 3.6 root namespace', () => {
+        const components36Namespaces = [
+            'Canvas',
+            'Chat',
+            'CommandDialog',
+            'CommandStepper',
+            'CommandForm',
+            'Common',
+            'Compatibility',
+            'DataPage',
+            'DataTables',
+            'Dialogs',
+            'Display',
+            'Dropdown',
+            'Filter',
+            'Notifications',
+            'ObjectContentEditor',
+            'ObjectNavigationalBar',
+            'PivotViewer',
+            'SchemaEditor',
+            'TimeMachine',
+            'Toolbar',
+            'Types',
+        ];
+        const accounted = [
+            ...Object.keys(codemodNamespaceSubpaths),
+            ...components36Namespaces.filter((name) =>
+                codemodRemovedRootSymbols.has(name),
+            ),
+        ];
+
+        expect(accounted.sort()).toEqual(components36Namespaces.sort());
+    });
+
+    it('should account for every removed Components 3.6 direct compatibility export', () => {
+        expect([...codemodRemovedRootSymbols].sort()).toEqual(
+            [
+                'Compatibility',
+                'PrimeReact11PassThroughComponent',
+                'assertPrimeReact11PassThroughCompatibility',
+                'components3PrimeReact11PassThroughContract',
+                'primeReact11PassThroughSentinelAttribute',
+                'primeReact11PassThroughSentinelPreset',
+            ].sort(),
+        );
+    });
+
     it('should map every namespace to a subpath the package actually exports', () => {
         const pkg = JSON.parse(
             readFileSync(
@@ -233,10 +288,11 @@ describe('root namespace maps', () => {
 
         for (const guide of guides) {
             const rootCommand =
-                'cratis-components-remove-root-namespace-imports --check <paths...>';
+                'cratis-components-remove-root-namespace-imports --check path/to/app/src';
             const buttonCommand =
-                'cratis-components-button-variant-tone --check <paths...>';
-            const handlerCommand = 'cratis-components-change-handler --check <paths...>';
+                'cratis-components-button-variant-tone --check path/to/app/src';
+            const handlerCommand =
+                'cratis-components-change-handler --check path/to/app/src';
             expect(guide).toContain(rootCommand);
             expect(guide).toContain(buttonCommand);
             expect(guide).toContain(handlerCommand);
@@ -246,6 +302,11 @@ describe('root namespace maps', () => {
             );
             expect(guide).toContain('Never substitute `latest`');
             expect(guide).toContain('TODO(cratis-codemod)');
+            expect(guide).not.toContain('<paths...>');
+            expect(guide).toContain('| `Compatibility`');
+            expect(guide.indexOf('Components 3 **source** window')).toBeLessThan(
+                guide.indexOf('Components 4 **target**'),
+            );
             for (const namespace of Object.keys(codemodNamespaceSubpaths)) {
                 expect(guide).toContain(`| \`${namespace}\``);
             }
@@ -448,4 +509,22 @@ describe('transformSource — targeted behavior', () => {
         expect(result.diagnostics).toHaveLength(1);
         expect(result.diagnostics[0].message).toContain('wildcard');
     });
+
+    it.each([
+        "import { Compatibility as PrimeCompatibility } from '@cratis/components';\n",
+        "import type { PrimeReact11PassThroughComponent } from '@cratis/components';\n",
+        "import { Canvas, Compatibility } from '@cratis/components';\n",
+        "export { assertPrimeReact11PassThroughCompatibility } from '@cratis/components';\n",
+        "export { Chat, primeReact11PassThroughSentinelPreset } from '@cratis/components';\n",
+    ])('refuses a known removed Components 3 compatibility root export', (input) => {
+        const result = transformSource('file.ts', input);
+
+        expect(result.text).toBe(input);
+        expect(result.changed).toBe(false);
+        expect(result.diagnostics).toHaveLength(1);
+        expect(result.diagnostics[0].message).toContain(
+            'has no Components 4 subpath',
+        );
+        expect(result.diagnostics[0].message).toContain('typed Cratis parts');
+    });
 });
diff --git a/Codemods/test/verify-packed-package.mjs b/Codemods/test/verify-packed-package.mjs
index 34d019f6..c019734f 100644
--- a/Codemods/test/verify-packed-package.mjs
+++ b/Codemods/test/verify-packed-package.mjs
@@ -9,6 +9,7 @@ import {
     readFileSync,
     readdirSync,
     rmSync,
+    statSync,
     writeFileSync,
 } from 'node:fs';
 import { validateBundledManifest } from '../lib/compatibility.js';
@@ -59,6 +60,18 @@ try {
         'components-codemods',
     );
     const publishedEntries = readdirSync(installedRoot).sort();
+    for (const required of [
+        'LICENSE',
+        'README.md',
+        'compat-manifest.json',
+        'lib',
+        'package.json',
+        'scripts',
+    ]) {
+        if (!publishedEntries.includes(required)) {
+            throw new Error(`Packed codemod is missing '${required}'.`);
+        }
+    }
     for (const forbidden of ['test', 'vitest.config.js']) {
         if (publishedEntries.includes(forbidden)) {
             throw new Error(`Packed codemod leaked '${forbidden}'.`);
@@ -81,6 +94,18 @@ try {
         JSON.parse(packedManifest.toString('utf8')),
         packedPackage.version,
     );
+    for (const dependency of ['semver', 'typescript']) {
+        if (!packedPackage.dependencies?.[dependency]) {
+            throw new Error(`Packed codemod does not declare '${dependency}'.`);
+        }
+        if (
+            !existsSync(
+                path.join(consumer, 'node_modules', dependency, 'package.json'),
+            )
+        ) {
+            throw new Error(`Packed codemod dependency '${dependency}' was not installed.`);
+        }
+    }
 
     const componentsRoot = path.join(consumer, 'node_modules', '@cratis', 'components');
     const installSyntheticComponents = (version) => {
@@ -120,11 +145,26 @@ try {
         'cratis-components-change-handler',
     ];
     for (const command of commands) {
-        const help = run(binaryFor(command), ['--help'], { cwd: consumer });
+        const commandBinary = binaryFor(command);
+        if (process.platform !== 'win32' && (statSync(commandBinary).mode & 0o111) === 0) {
+            throw new Error(`Packed ${command} binary is not executable.`);
+        }
+        const help = run(commandBinary, ['--help'], { cwd: consumer });
         assertRun(`packed ${command} --help without Components`, help);
         if (!help.stdout.includes(`Usage: ${command}`)) {
             throw new Error(`Unexpected ${command} --help output:\n${help.stdout}`);
         }
+
+        const nonexistentInput = path.join(consumer, `${command}-must-not-scan.ts`);
+        const absent = run(commandBinary, [nonexistentInput], { cwd: consumer });
+        assertRun(`packed ${command} rejects absent Components before scanning`, absent, 1);
+        if (
+            !absent.stderr.includes('Compatibility preflight failed') ||
+            !absent.stderr.includes('Could not resolve installed @cratis/components') ||
+            absent.stderr.includes('no such file or directory')
+        ) {
+            throw new Error(`Unexpected absent-Components preflight output:\n${absent.stderr}`);
+        }
     }
 
     installSyntheticComponents('3.6.1');
@@ -203,18 +243,22 @@ try {
     }
 
     installSyntheticComponents('5.0.0');
-    const unsupportedSource = path.join(consumer, 'unsupported-version.ts');
     const unsupportedInput = "import { Canvas } from '@cratis/components';\n";
-    writeFileSync(unsupportedSource, unsupportedInput);
-    const unsupported = run(binary, [unsupportedSource], { cwd: consumer });
-    assertRun('packed codemod rejects unsupported Components', unsupported, 1);
-    if (!unsupported.stderr.includes('@cratis/components@5.0.0 is unsupported')) {
-        throw new Error(`Unexpected unsupported-version output:\n${unsupported.stderr}`);
-    }
-    if (readFileSync(unsupportedSource, 'utf8') !== unsupportedInput) {
-        throw new Error(
-            'Unsupported Components preflight changed source before failing.',
-        );
+    for (const command of commands) {
+        const unsupportedSource = path.join(consumer, `${command}-unsupported.tsx`);
+        writeFileSync(unsupportedSource, unsupportedInput);
+        const unsupported = run(binaryFor(command), [unsupportedSource], {
+            cwd: consumer,
+        });
+        assertRun(`packed ${command} rejects unsupported Components`, unsupported, 1);
+        if (!unsupported.stderr.includes('@cratis/components@5.0.0 is unsupported')) {
+            throw new Error(`Unexpected unsupported-version output:\n${unsupported.stderr}`);
+        }
+        if (readFileSync(unsupportedSource, 'utf8') !== unsupportedInput) {
+            throw new Error(
+                `Unsupported Components preflight changed source for ${command}.`,
+            );
+        }
     }
 
     console.log(
diff --git a/Documentation/Migration/2-to-3.md b/Documentation/Migration/2-to-3.md
index 87efedf9..b53feee4 100644
--- a/Documentation/Migration/2-to-3.md
+++ b/Documentation/Migration/2-to-3.md
@@ -49,18 +49,18 @@ Which lands in your app's `dependencies` as:
 
 Notes:
 
-- `primereact` pins `@primereact/core`, `@primereact/headless` and `@primereact/hooks` to its own **exact** version, so installing `primereact@11.1.0` gives you 11.1.0 of all four. Declaring them anyway is what makes a strict installer (pnpm, Yarn PnP) resolve them for the library too.
+- `primereact` pins `@primereact/core`, `@primereact/headless` and `@primereact/hooks` to the same release. Declaring them anyway is what makes a strict installer (pnpm, Yarn PnP) resolve them for the library too; use the peer ranges published by the selected Components 3 package rather than copying a patch version from a guide.
 - `primeicons` went **7 → 8** alongside PrimeReact 11.
 - `@primereact/types` is an **optional** peer. You only need it declared if your own code imports our prop types (they re-export `@primereact/types/*` shapes). It arrives transitively via `@primereact/core` in a hoisting installer.
 - `@primereact/styles` and `@primeuix/themes` are **optional** peers. Install them only for PrimeReact's styled mode — see [Theming without a theme stylesheet](#theming-without-a-theme-stylesheet). The baseline theme and unstyled mode need neither.
 - If your app carried a `resolutions` / `overrides` entry to collapse PrimeReact into one copy, **you can delete it** — the peer declaration is what enforces that now.
 
-### Arc peer range is unchanged
+### Keep Arc packages aligned
 
-`@cratis/arc` and `@cratis/arc.react` now support `>=20.3.1 <23`. Arc 20, Arc 21 and Arc 22 are supported.
+The Arc peer window changed across Components 3 patch and minor releases. Read `peerDependencies` from the Components 3 version selected by the application's lockfile instead of treating this historical guide as an Arc compatibility matrix.
 
 > [!WARNING]
-> **Keep `@cratis/arc`, `@cratis/arc.react` and `@cratis/arc.vite` on the same version.** `@cratis/arc.react` depends on `@cratis/arc` with an **exact** pin, so if your own `@cratis/arc` drifts by even a patch your installer nests a second copy. `ObservableQuerySubscription` has a `private` field, which makes it nominally typed, so two copies produce a type error like _"types have separate declarations of a private property `_connection`"_ in any code touching an observable query. This is an Arc packaging issue, not a Components one; `DataTableForObservableQuery` is hardened against it internally so the library itself still compiles either way ([#135](https://github.com/Cratis/Components/issues/135)).
+> **Keep `@cratis/arc`, `@cratis/arc.react` and `@cratis/arc.vite` on one mutually compatible release line.** `@cratis/arc.react` pins its Core dependency, so drift can install a second copy. `ObservableQuerySubscription` has a private field and is nominally typed; two copies can produce a _"types have separate declarations of a private property `_connection`"_ diagnostic in code touching an observable query. This is an Arc packaging boundary, not a Components one; follow the selected Arc packages' own manifests.
 
 ## Stylesheets are now an explicit import
 
@@ -200,7 +200,7 @@ Import order: `tokens`, `styles`, then the palette (and/or `theme`). It exists s
 
 2.x exported a `useOverlayZIndex` hook and passed `appendTo={document.body}` on every overlay-bearing field, because a v10 dropdown/calendar panel opened inside a modal dialog rendered _inside_ the dialog's subtree and could land under its own mask.
 
-**`useOverlayZIndex` is removed.** PrimeReact 11 does both natively: `Select.Portal` defaults to `appendTo: 'body'`, and the shared z-index registry gives a later-opened overlay a value above whatever is already registered. Measured on v11.1.0: with a dialog at z-index 1102, the select panel opens at **2103**, portaled to `document.body`. There is a regression spec (`Source/Dropdown/for_Dropdown/when_opened_inside_a_dialog.ts`) pinning this, so a future regression is caught rather than rediscovered.
+**`useOverlayZIndex` is removed.** PrimeReact 11 does both natively: `Select.Portal` defaults to `appendTo: 'body'`, and the shared z-index registry gives a later-opened overlay a value above whatever is already registered. Components 3 regression coverage verifies that a select opened inside a dialog is portaled to `document.body` above that dialog; the guide does not pin those runtime-assigned z-index values to one PrimeReact patch.
 
 If you called `useOverlayZIndex` in your own app for your own overlays, you will need to inline it — but check first whether v11 has already made it unnecessary for you too.
 
diff --git a/Documentation/Migration/3-to-4.md b/Documentation/Migration/3-to-4.md
index ac7130fc..a72e6eea 100644
--- a/Documentation/Migration/3-to-4.md
+++ b/Documentation/Migration/3-to-4.md
@@ -8,20 +8,41 @@ Components 4 replaces the PrimeReact-backed Components 3 foundation with Compone
 This is a major-version migration. Rendered markup, styling parts, provider configuration, date entry, root imports, and some deprecated props change.
 
 :::note
-An application that has not migrated remains on its exact Components 3 package profile, including the third-party dependencies declared by that version. Components `>=3 <4` is in maintenance/security-critical support while Components `>=4 <5` is the current candidate and migration target. Owners must decide and approve the Components 3 EOL date no later than 12 months after Components 4 GA. Components 4 does not provide a transparent Prime compatibility package. Its independently versioned `@cratis/components.mui`, `@cratis/components.primereact` (PrimeReact 11), and `@cratis/components.primereact10` adapters cover only the nine stable presentation slots.
+An application that has not migrated remains on its Components 3 package profile, including the third-party dependencies declared by that version. Components `>=3 <4` is in maintenance/security-critical support while Components `>=4 <5` is the current candidate and migration target. Owners must decide and approve the Components 3 EOL date no later than 12 months after Components 4 GA. Components 4 does not provide a transparent Prime compatibility package. Its independently versioned `@cratis/components.mui`, `@cratis/components.primereact` (PrimeReact 11), and `@cratis/components.primereact10` adapters are optional and cover only the nine `common.*` presentation slots.
 :::
 
+The adapters do not replace complete Components widgets. Core continues to own Dialog, Dropdown, DatePicker, paginator, table, focus, overlay, selection, and keyboard behavior; an adapter only presents button, icon-button, text-input, text-area, checkbox, radio, switch, progress, and surface slots. Installing an adapter neither restores PrimeReact public APIs nor transfers key handling to the adapter.
+
+## Recommended order, stop points, and rollback
+
+1. Create a migration branch and preserve the current source, package manifest, and lockfile as the rollback point. Run the existing Components 3 lint, type check, specs, and production build before changing anything.
+2. While the installed Core package is still in the Components 3 source window (`>=3 <4`), preview and apply `cratis-components-remove-root-namespace-imports`. Its output uses subpaths available on both sides of the migration. Re-run the Components 3 gates and checkpoint the import-only change.
+3. Upgrade Core to the bounded Components 4 target (`^4.0.0`), mount the Components provider, and import the required stylesheet layers. Do not remove Prime packages, providers, themes, or licenses that still serve a direct Prime island.
+4. Preview and apply the Button transform, then the change-handler transform. These produce Components 4 source and therefore belong after the Core upgrade. Stop after each transform to resolve every diagnostic and `TODO(cratis-codemod)`, then run the gates and checkpoint the result.
+5. Remove each retained Prime island only after its replacement has passed behavior, accessibility, theme, and license review.
+
+The Components 4 codemod package accepts either the supported Components 3 **source** window or Components 4 **target** window at preflight. That permits a recovery run after upgrading, but it does not change the recommended order above. A failed compatibility preflight scans and writes nothing. A transform refusal exits nonzero and may annotate or migrate other independently safe syntax, so inspect the diff; restore the preceding checkpoint before retrying if an all-or-nothing rollback is required.
+
 ## Update dependencies
 
-Remove the Prime packages that were installed only for Components:
+Use the commands for the application's package manager. Remove only Prime packages that were installed for Components and are no longer owned by a retained direct Prime island.
 
 ```bash
-npm uninstall \
-  primereact primeicons \
-  @primereact/core @primereact/headless @primereact/hooks \
-  @primereact/styles @primereact/types \
+# npm
+npm uninstall primereact primeicons @primereact/core @primereact/headless \
+  @primereact/hooks @primereact/styles @primereact/types @primeuix/themes
+npm install '@cratis/components@^4.0.0'
+
+# pnpm
+pnpm remove primereact primeicons @primereact/core @primereact/headless \
+  @primereact/hooks @primereact/styles @primereact/types @primeuix/themes
+pnpm add '@cratis/components@^4.0.0'
+
+# Yarn
+yarn remove primereact primeicons @primereact/core \
+  @primereact/headless @primereact/hooks @primereact/styles @primereact/types \
   @primeuix/themes
-npm install @cratis/components
+yarn add '@cratis/components@^4.0.0'
 ```
 
 Keep a Prime package only when your application still imports it directly. Migrate those imports separately; Components no longer supplies or requires them.
@@ -56,7 +77,7 @@ import { Canvas, CanvasItem } from '@cratis/components/Canvas';
 </Canvas>;
 ```
 
-This is an intentional Components 4 breaking change. The package root now exposes setup APIs only; component namespaces no longer exist there. Every namespace maps mechanically: replace `import { X } from '@cratis/components'` with either an equivalent namespace import from the documented subpath, or named imports from that subpath.
+This is an intentional Components 4 breaking change. The package root now exposes setup APIs only; component namespaces no longer exist there. Every retained namespace maps mechanically: replace `import { X } from '@cratis/components'` with either an equivalent namespace import from the documented subpath, or named imports from that subpath. The removed renderer-only `Compatibility` namespace is the deliberate manual exception.
 
 | Removed Components 3 root namespace | Components 4 subpath                                      | Namespace-preserving migration                                                      | Named migration                                                                    |
 | ----------------------------------- | --------------------------------------------------------- | ----------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
@@ -66,6 +87,7 @@ This is an intentional Components 4 breaking change. The package root now expose
 | `CommandStepper` †                  | `@cratis/components/CommandDialog` (namespace-preserving) | `import * as CommandStepper from '@cratis/components/CommandDialog'`                | `import { CommandStepper } from '@cratis/components/CommandStepper'`               |
 | `CommandForm`                       | `@cratis/components/CommandForm`                          | `import * as CommandForm from '@cratis/components/CommandForm'`                     | `import { AutoCommandForm, InputTextField } from '@cratis/components/CommandForm'` |
 | `Common`                            | `@cratis/components/Common`                               | `import * as Common from '@cratis/components/Common'`                               | `import { Button } from '@cratis/components/Common'`                               |
+| `Compatibility` ††                  | No Components 4 subpath                                   | Manual migration required; the codemod refuses and exits nonzero                     | Replace Prime compatibility contracts with typed Cratis parts, then remove it      |
 | `DataPage`                          | `@cratis/components/DataPage`                             | `import * as DataPage from '@cratis/components/DataPage'`                           | `import { DataPage, Column } from '@cratis/components/DataPage'`                   |
 | `DataTables`                        | `@cratis/components/DataTables`                           | `import * as DataTables from '@cratis/components/DataTables'`                       | `import { DataTableForQuery, Column } from '@cratis/components/DataTables'`        |
 | `Dialogs`                           | `@cratis/components/Dialogs`                              | `import * as Dialogs from '@cratis/components/Dialogs'`                             | `import { Dialog } from '@cratis/components/Dialogs'`                              |
@@ -81,7 +103,11 @@ This is an intentional Components 4 breaking change. The package root now expose
 | `Toolbar`                           | `@cratis/components/Toolbar`                              | `import * as Toolbar from '@cratis/components/Toolbar'`                             | `import { Toolbar, ToolbarButton } from '@cratis/components/Toolbar'`              |
 | `Types`                             | `@cratis/components/types`                                | `import * as Types from '@cratis/components/types'`                                 | `import { JsonSchema, Json } from '@cratis/components/types'`                      |
 
-† The removed root `CommandStepper` namespace aliased the _entire_ `CommandDialog` module. The codemod therefore maps that namespace to `@cratis/components/CommandDialog`, preserving every existing namespace member — not only `CommandStepper.StepperCommandDialog`, `CommandStepper.CommandDialog`, and `CommandStepper.CommandStepper`, but also the module's other exports such as `CommandStepper.StepperPanel` and `CommandStepper.applyBeforeExecute`. New code that needs only the standalone component should use the narrower named import from `@cratis/components/CommandStepper`.
+† The removed root `CommandStepper` namespace aliased the _entire_ `CommandDialog` module. The codemod therefore maps that namespace to `@cratis/components/CommandDialog`, preserving the correct module identity for members retained in Components 4, including `StepperCommandDialog`, `CommandDialog`, `CommandStepper`, `StepperPanel`, and `applyBeforeExecute`. It does not restore an export removed from that module, such as the accidental `CommandStepperContent` export described below. New code that needs only the standalone component should use the narrower named import from `@cratis/components/CommandStepper`.
+
+†† Components 3.6 also exported the `Compatibility` namespace and its pass-through helpers directly from the root. Components 4 intentionally has no destination for `Compatibility`, `assertPrimeReact11PassThroughCompatibility`, `components3PrimeReact11PassThroughContract`, `PrimeReact11PassThroughComponent`, `primeReact11PassThroughSentinelAttribute`, or `primeReact11PassThroughSentinelPreset`. The codemod recognizes these as known removals, leaves their statement unchanged, and exits nonzero with typed-parts guidance; it never misclassifies them as a new setup symbol or invents a subpath.
+
+The Components 3.6 `Chat` namespace maps to `@cratis/components/Chat` like every other retained family. Its public models, sidebar, conversation, observable-query wrapper, mentions, and emoji contracts remain on that subpath; only the root namespace import changes.
 
 `@cratis/components/CommandForm/fields` is the same module as `@cratis/components/CommandForm` — either subpath resolves identically, so the `CommandForm` row's migration applies to both. Provider/configuration/message setup stays on the package root; only Common components such as `Button` move to `@cratis/components/Common`.
 
@@ -90,13 +116,27 @@ Run the migration codemod in preview mode first, then apply it:
 ```bash
 TOOLING_RANGE='^4.0.0'
 npx --package "@cratis/components-codemods@$TOOLING_RANGE" \
-  cratis-components-remove-root-namespace-imports --check <paths...>
+  cratis-components-remove-root-namespace-imports --check path/to/app/src
 npx --package "@cratis/components-codemods@$TOOLING_RANGE" \
-  cratis-components-remove-root-namespace-imports <paths...>
+  cratis-components-remove-root-namespace-imports path/to/app/src
 ```
 
 Components 3 has no matching 3.x codemod train. Use the bounded Components 4 tooling range (`>=4 <5`; `^4.0.0` above is the shell-safe equivalent). Never substitute `latest`. Tooling patches release independently from Core. Before scanning or writing, every codemod validates its bundled compatibility manifest, its own version, and the installed Components package from the invocation directory. It fails closed when Components is absent, outside the supported 3.x source or 4.x target window, or the manifest is invalid.
 
+The examples use npm's `npx`. The same bounded package can be launched without adding it to the application:
+
+```bash
+# pnpm
+pnpm dlx --package "@cratis/components-codemods@$TOOLING_RANGE" \
+  cratis-components-remove-root-namespace-imports --check path/to/app/src
+
+# Yarn 2+
+yarn dlx --package "@cratis/components-codemods@$TOOLING_RANGE" \
+  cratis-components-remove-root-namespace-imports --check path/to/app/src
+```
+
+Quote any real path containing spaces. Do not type angle-bracket placeholders in a shell: `<...>` is input-redirection syntax.
+
 The codemod scans JavaScript/JSX and TypeScript/TSX (including `.mjs`, `.cjs`, `.mts`, and `.cts`), preserves aliases and type-only imports, splits mixed setup/namespace imports, and rewrites a named `export { X } from '@cratis/components'` re-export the same way as the matching import. It refuses to guess at default imports, whole-package namespace imports, TypeScript `import = require(...)` assignments, dynamic imports, CommonJS `require(...)`, wildcard or whole-package re-exports (`export * from '@cratis/components'` / `export * as X from '@cratis/components'`), side-effect imports, or unknown symbols. Review every reported unsupported case manually, then run the consuming project's lint, build, and tests.
 
 ### Migrate Button appearance and change callbacks
@@ -113,14 +153,14 @@ Use the bounded Components 4 tooling train and preview each transform before app
 TOOLING_RANGE='^4.0.0'
 
 npx --package "@cratis/components-codemods@$TOOLING_RANGE" \
-  cratis-components-button-variant-tone --check <paths...>
+  cratis-components-button-variant-tone --check path/to/app/src
 npx --package "@cratis/components-codemods@$TOOLING_RANGE" \
-  cratis-components-button-variant-tone <paths...>
+  cratis-components-button-variant-tone path/to/app/src
 
 npx --package "@cratis/components-codemods@$TOOLING_RANGE" \
-  cratis-components-change-handler --check <paths...>
+  cratis-components-change-handler --check path/to/app/src
 npx --package "@cratis/components-codemods@$TOOLING_RANGE" \
-  cratis-components-change-handler <paths...>
+  cratis-components-change-handler path/to/app/src
 ```
 
 Keep the tooling range within `>=4 <5`; never use `latest`. The codemod preflight enforces the bundled source/target support windows.
diff --git a/Documentation/coming-from-primereact.md b/Documentation/coming-from-primereact.md
index 84f7baf6..b838a6ba 100644
--- a/Documentation/coming-from-primereact.md
+++ b/Documentation/coming-from-primereact.md
@@ -21,6 +21,8 @@ Use native HTML for simple application-owned controls that do not need Component
 
 Components does not provide one-for-one replacements for every Prime widget. Keep an application-owned or direct Prime surface during migration when it requires tabs, sidebars, timelines, knobs, select-button groups, general popovers, grouped/expandable tables, or controlled lazy/server table sorting. Components `Toolbar` is a canvas/tool-palette control, not a replacement for every page action bar.
 
+The optional MUI, PrimeReact 11, and PrimeReact 10 adapters cover only nine `common.*` presentation slots: button, icon-button, text-input, text-area, checkbox, radio, switch, progress, and surface. They do not replace Dialog, Dropdown, DatePicker, paginator, table, or another complete widget. Core retains focus, overlay, selection, and keyboard behavior; installing an adapter does not delegate key handling or recreate a Prime public API.
+
 ## Map common Dialog props
 
 | Prime Dialog             | Components Dialog                                     |
diff --git a/ESLint/README.md b/ESLint/README.md
index eb1d4aa7..98d24c37 100644
--- a/ESLint/README.md
+++ b/ESLint/README.md
@@ -21,7 +21,13 @@ Use the independently released Components 4 tooling train bounded to `>=4 <5`. N
 
 ```sh
 TOOLING_RANGE='^4.0.0' # Shell-safe equivalent of >=4 <5.
-yarn add -D "@cratis/eslint-plugin-components@$TOOLING_RANGE" \
+
+# Choose the application package manager:
+npm install --save-dev "@cratis/eslint-plugin-components@$TOOLING_RANGE" \
+  @cratis/eslint-config eslint
+pnpm add --save-dev "@cratis/eslint-plugin-components@$TOOLING_RANGE" \
+  @cratis/eslint-config eslint
+yarn add --dev "@cratis/eslint-plugin-components@$TOOLING_RANGE" \
   @cratis/eslint-config eslint
 ```
 
@@ -128,6 +134,9 @@ The rule never guesses. Each of these is flagged with guidance but **not** autof
 - A named import of a symbol that is neither an approved setup symbol nor a known namespace
   (for example a member that only exists _inside_ a namespace, not at the root) — the whole
   statement is left unfixed rather than partially migrated.
+- The Components 3.6 `Compatibility` namespace and direct pass-through exports — reported
+  as known removals with typed-parts guidance and never autofixed because Components 4 has
+  no compatibility subpath.
 - Any `export … from '@cratis/components'` re-export form — flagged with the same subpath
   guidance, but re-exports are never autofixed.
 
diff --git a/ESLint/lib/noRootBarrelImport.js b/ESLint/lib/noRootBarrelImport.js
index 4e2c66c6..def40aa3 100644
--- a/ESLint/lib/noRootBarrelImport.js
+++ b/ESLint/lib/noRootBarrelImport.js
@@ -1,4 +1,8 @@
-import { namespaceSubpaths, approvedRootSymbols } from './rootNamespaceMap.js';
+import {
+    namespaceSubpaths,
+    approvedRootSymbols,
+    removedRootSymbols,
+} from './rootNamespaceMap.js';
 
 const DEFAULTS = { packageName: '@cratis/components', allow: [] };
 
@@ -35,6 +39,10 @@ export const noRootBarrelImport = {
                 "Import '{{name}}' from '{{packageName}}/{{subpath}}' as a namespace instead of the package root barrel: import * as {{name}} from '{{packageName}}/{{subpath}}'.",
             useNamespaceSubpathExport:
                 "Re-export '{{name}}' from '{{packageName}}/{{subpath}}' instead of the package root barrel: export * as {{name}} from '{{packageName}}/{{subpath}}'. This is not autofixed — verify downstream default-export expectations.",
+            removedCompatibilitySymbol:
+                "'{{name}}' was a Components 3 PrimeReact compatibility export and has no Components 4 subpath. Migrate renderer slots to typed Cratis parts and remove this import manually.",
+            removedCompatibilitySymbolExport:
+                "'{{name}}' was a Components 3 PrimeReact compatibility export and has no Components 4 subpath. Migrate renderer slots to typed Cratis parts and remove this re-export manually.",
             unknownSymbol:
                 "'{{name}}' is not a recognized '{{packageName}}' root export (neither an approved setup symbol nor a known namespace). Import it from its specific subpath instead of the package root.",
             unknownSymbolExport:
@@ -152,6 +160,15 @@ function checkImport(context, node, packageName) {
             namespaced.push({ specifier, subpath: namespaceSubpaths[importedName] });
             continue;
         }
+        if (removedRootSymbols.has(importedName)) {
+            hasUnknown = true;
+            context.report({
+                node: specifier,
+                messageId: 'removedCompatibilitySymbol',
+                data: { name: importedName },
+            });
+            continue;
+        }
 
         hasUnknown = true;
         context.report({
@@ -213,6 +230,14 @@ function checkNamedExport(context, node, packageName) {
             });
             continue;
         }
+        if (removedRootSymbols.has(exportedName)) {
+            context.report({
+                node: specifier,
+                messageId: 'removedCompatibilitySymbolExport',
+                data: { name: exportedName },
+            });
+            continue;
+        }
 
         context.report({
             node: specifier,
diff --git a/ESLint/lib/rootNamespaceMap.js b/ESLint/lib/rootNamespaceMap.js
index de995951..4a38f39c 100644
--- a/ESLint/lib/rootNamespaceMap.js
+++ b/ESLint/lib/rootNamespaceMap.js
@@ -15,7 +15,7 @@
  */
 
 /**
- * Every namespace name removed from the Components 3 root, mapped to the Components 4
+ * Every retained namespace removed from the Components 3 root, mapped to the Components 4
  * subpath it belongs to: importing `Canvas` from the root should instead be
  * `import * as Canvas from '@cratis/components/Canvas'`. `Types` is the one case where the
  * namespace name and its subpath differ in casing (`./types`, lowercase).
@@ -45,6 +45,16 @@ export const namespaceSubpaths = {
     Types: 'types',
 };
 
+/** Components 3 renderer-compatibility exports removed without a Components 4 subpath. */
+export const removedRootSymbols = new Set([
+    'Compatibility',
+    'assertPrimeReact11PassThroughCompatibility',
+    'components3PrimeReact11PassThroughContract',
+    'primeReact11PassThroughSentinelAttribute',
+    'primeReact11PassThroughSentinelPreset',
+    'PrimeReact11PassThroughComponent',
+]);
+
 /**
  * The primary setup surface `Source/index.ts` re-exports directly from the root so a
  * consumer that only wants provider setup does not need to know about the `Common`
diff --git a/ESLint/test/rules.test.js b/ESLint/test/rules.test.js
index 3708bdab..d68562e9 100644
--- a/ESLint/test/rules.test.js
+++ b/ESLint/test/rules.test.js
@@ -7,10 +7,12 @@ import { noRootBarrelImport } from '../lib/noRootBarrelImport.js';
 import {
     approvedRootSymbols as eslintApprovedRootSymbols,
     namespaceSubpaths as eslintNamespaceSubpaths,
+    removedRootSymbols as eslintRemovedRootSymbols,
 } from '../lib/rootNamespaceMap.js';
 import {
     approvedRootSymbols as codemodApprovedRootSymbols,
     namespaceSubpaths as codemodNamespaceSubpaths,
+    removedRootSymbols as codemodRemovedRootSymbols,
 } from '../../Codemods/lib/namespaceMap.js';
 import { onbeforeexecuteMustReturn } from '../lib/onbeforeexecuteMustReturn.js';
 import { noHooksInViewModel } from '../lib/noHooksInViewModel.js';
@@ -58,6 +60,12 @@ describe('root namespace map parity', () => {
             [...codemodApprovedRootSymbols].sort(),
         );
     });
+
+    it('keeps the ESLint and codemod removed-root sets identical', () => {
+        expect([...eslintRemovedRootSymbols].sort()).toEqual(
+            [...codemodRemovedRootSymbols].sort(),
+        );
+    });
 });
 
 tsRuleTester.run('no-root-barrel-import', noRootBarrelImport, {
@@ -278,6 +286,45 @@ tsRuleTester.run('no-root-barrel-import', noRootBarrelImport, {
             ],
             output: null,
         },
+        {
+            // Components 3 exposed this renderer namespace, but Components 4 has no replacement subpath.
+            code: "import { Compatibility as PrimeCompatibility } from '@cratis/components';",
+            errors: [
+                {
+                    messageId: 'removedCompatibilitySymbol',
+                    data: { name: 'Compatibility' },
+                },
+            ],
+            output: null,
+        },
+        {
+            code: "import type { PrimeReact11PassThroughComponent } from '@cratis/components';",
+            errors: [
+                {
+                    messageId: 'removedCompatibilitySymbol',
+                    data: { name: 'PrimeReact11PassThroughComponent' },
+                },
+            ],
+            output: null,
+        },
+        {
+            code: "import { Chat, Compatibility } from '@cratis/components';",
+            errors: [
+                {
+                    messageId: 'useNamespaceSubpath',
+                    data: {
+                        name: 'Chat',
+                        packageName: '@cratis/components',
+                        subpath: 'Chat',
+                    },
+                },
+                {
+                    messageId: 'removedCompatibilitySymbol',
+                    data: { name: 'Compatibility' },
+                },
+            ],
+            output: null,
+        },
         {
             // A namespace import of the whole package cannot be safely rewritten.
             code: "import * as Components from '@cratis/components';",
@@ -359,6 +406,16 @@ tsRuleTester.run('no-root-barrel-import', noRootBarrelImport, {
             ],
             output: null,
         },
+        {
+            code: "export { primeReact11PassThroughSentinelPreset } from '@cratis/components';",
+            errors: [
+                {
+                    messageId: 'removedCompatibilitySymbolExport',
+                    data: { name: 'primeReact11PassThroughSentinelPreset' },
+                },
+            ],
+            output: null,
+        },
         {
             code: "export * from '@cratis/components';",
             errors: [
diff --git a/Source/MIGRATION.md b/Source/MIGRATION.md
index 455c1c2d..8aa5ce61 100644
--- a/Source/MIGRATION.md
+++ b/Source/MIGRATION.md
@@ -5,20 +5,40 @@ Components 4 replaces the PrimeReact-backed Components 3 foundation with Compone
 This is a major-version migration. Rendered markup, styling parts, provider configuration, date entry, root imports, and some deprecated props change.
 
 :::note
-An application that has not migrated remains on its exact Components 3 package profile, including the third-party dependencies declared by that version. Components `>=3 <4` is in maintenance/security-critical support while Components `>=4 <5` is the current candidate and migration target. Owners must decide and approve the Components 3 EOL date no later than 12 months after Components 4 GA. Components 4 does not provide a transparent Prime compatibility package. Its independently versioned `@cratis/components.mui`, `@cratis/components.primereact` (PrimeReact 11), and `@cratis/components.primereact10` adapters cover only the nine stable presentation slots.
+An application that has not migrated remains on its Components 3 package profile, including the third-party dependencies declared by that version. Components `>=3 <4` is in maintenance/security-critical support while Components `>=4 <5` is the current candidate and migration target. Owners must decide and approve the Components 3 EOL date no later than 12 months after Components 4 GA. Components 4 does not provide a transparent Prime compatibility package. Its independently versioned `@cratis/components.mui`, `@cratis/components.primereact` (PrimeReact 11), and `@cratis/components.primereact10` adapters are optional and cover only the nine `common.*` presentation slots.
 :::
 
+The adapters do not replace complete Components widgets. Core continues to own Dialog, Dropdown, DatePicker, paginator, table, focus, overlay, selection, and keyboard behavior; an adapter only presents button, icon-button, text-input, text-area, checkbox, radio, switch, progress, and surface slots. Installing an adapter neither restores PrimeReact public APIs nor transfers key handling to the adapter.
+
+## Recommended order, stop points, and rollback
+
+1. Preserve the current source, package manifest, and lockfile as the rollback point, then run the existing Components 3 gates.
+2. With installed Core still in the Components 3 **source** window (`>=3 <4`), preview and apply the root-namespace transform. Its subpath output works on Components 3 and 4. Re-run the Components 3 gates and checkpoint that import-only change.
+3. Upgrade Core to the bounded Components 4 **target** window (`^4.0.0`), configure the provider and styles, then preview and apply the Button transform followed by the change-handler transform.
+4. Stop after every nonzero result. Resolve every diagnostic and `TODO(cratis-codemod)`, run the gates, and checkpoint before continuing. Remove a direct Prime island only after its replacement and licensing boundary are verified.
+
+The bounded Components 4 codemod package accepts the supported source or target window at preflight, but the order above avoids introducing Components 4-only props before Core is upgraded. A failed compatibility preflight scans and writes nothing. A transform refusal may annotate or migrate other independently safe syntax, so inspect the diff; restore the preceding checkpoint before retrying if an all-or-nothing rollback is required.
+
 ## Update dependencies
 
-Remove the Prime packages that were installed only for Components:
+Use the commands for the application's package manager. Remove only Prime packages that were installed for Components and are no longer owned by a retained direct Prime island.
 
 ```bash
-npm uninstall \
-  primereact primeicons \
-  @primereact/core @primereact/headless @primereact/hooks \
-  @primereact/styles @primereact/types \
+# npm
+npm uninstall primereact primeicons @primereact/core @primereact/headless \
+  @primereact/hooks @primereact/styles @primereact/types @primeuix/themes
+npm install '@cratis/components@^4.0.0'
+
+# pnpm
+pnpm remove primereact primeicons @primereact/core @primereact/headless \
+  @primereact/hooks @primereact/styles @primereact/types @primeuix/themes
+pnpm add '@cratis/components@^4.0.0'
+
+# Yarn
+yarn remove primereact primeicons @primereact/core \
+  @primereact/headless @primereact/hooks @primereact/styles @primereact/types \
   @primeuix/themes
-npm install @cratis/components
+yarn add '@cratis/components@^4.0.0'
 ```
 
 Keep a Prime package only when your application still imports it directly. Migrate those imports separately; Components no longer supplies or requires them.
@@ -55,7 +75,7 @@ import { Canvas, CanvasItem } from '@cratis/components/Canvas';
 </Canvas>;
 ```
 
-This is an intentional Components 4 breaking change. The package root now exposes setup APIs only; component namespaces no longer exist there. Every namespace maps mechanically: replace `import { X } from '@cratis/components'` with either an equivalent namespace import from the documented subpath, or named imports from that subpath.
+This is an intentional Components 4 breaking change. The package root now exposes setup APIs only; component namespaces no longer exist there. Every retained namespace maps mechanically: replace `import { X } from '@cratis/components'` with either an equivalent namespace import from the documented subpath, or named imports from that subpath. The removed renderer-only `Compatibility` namespace is the deliberate manual exception.
 
 | Removed Components 3 root namespace | Components 4 subpath                                      | Namespace-preserving migration                                                      | Named migration                                                                    |
 | ----------------------------------- | --------------------------------------------------------- | ----------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
@@ -65,6 +85,7 @@ This is an intentional Components 4 breaking change. The package root now expose
 | `CommandStepper` †                  | `@cratis/components/CommandDialog` (namespace-preserving) | `import * as CommandStepper from '@cratis/components/CommandDialog'`                | `import { CommandStepper } from '@cratis/components/CommandStepper'`               |
 | `CommandForm`                       | `@cratis/components/CommandForm`                          | `import * as CommandForm from '@cratis/components/CommandForm'`                     | `import { AutoCommandForm, InputTextField } from '@cratis/components/CommandForm'` |
 | `Common`                            | `@cratis/components/Common`                               | `import * as Common from '@cratis/components/Common'`                               | `import { Button } from '@cratis/components/Common'`                               |
+| `Compatibility` ††                  | No Components 4 subpath                                   | Manual migration required; the codemod refuses and exits nonzero                     | Replace Prime compatibility contracts with typed Cratis parts, then remove it      |
 | `DataPage`                          | `@cratis/components/DataPage`                             | `import * as DataPage from '@cratis/components/DataPage'`                           | `import { DataPage, Column } from '@cratis/components/DataPage'`                   |
 | `DataTables`                        | `@cratis/components/DataTables`                           | `import * as DataTables from '@cratis/components/DataTables'`                       | `import { DataTableForQuery, Column } from '@cratis/components/DataTables'`        |
 | `Dialogs`                           | `@cratis/components/Dialogs`                              | `import * as Dialogs from '@cratis/components/Dialogs'`                             | `import { Dialog } from '@cratis/components/Dialogs'`                              |
@@ -80,7 +101,11 @@ This is an intentional Components 4 breaking change. The package root now expose
 | `Toolbar`                           | `@cratis/components/Toolbar`                              | `import * as Toolbar from '@cratis/components/Toolbar'`                             | `import { Toolbar, ToolbarButton } from '@cratis/components/Toolbar'`              |
 | `Types`                             | `@cratis/components/types`                                | `import * as Types from '@cratis/components/types'`                                 | `import { JsonSchema, Json } from '@cratis/components/types'`                      |
 
-† The removed root `CommandStepper` namespace aliased the _entire_ `CommandDialog` module. The codemod therefore maps that namespace to `@cratis/components/CommandDialog`, preserving all existing namespace members. New code that needs only the standalone component should use the narrower named import from `@cratis/components/CommandStepper`.
+† The removed root `CommandStepper` namespace aliased the _entire_ `CommandDialog` module. The codemod therefore maps that namespace to `@cratis/components/CommandDialog`, preserving the correct module identity for members retained in Components 4. It does not restore removed accidental exports such as `CommandStepperContent`. New code that needs only the standalone component should use the narrower named import from `@cratis/components/CommandStepper`.
+
+†† Components 3.6 also exported the `Compatibility` namespace and its pass-through helpers directly from the root. Components 4 has no destination for `Compatibility`, `assertPrimeReact11PassThroughCompatibility`, `components3PrimeReact11PassThroughContract`, `PrimeReact11PassThroughComponent`, `primeReact11PassThroughSentinelAttribute`, or `primeReact11PassThroughSentinelPreset`. The codemod recognizes these known removals, leaves their statement unchanged, and exits nonzero with typed-parts guidance.
+
+The Components 3.6 `Chat` namespace maps to `@cratis/components/Chat`; its public models, sidebar, conversation, observable-query wrapper, mentions, and emoji contracts remain on that subpath.
 
 `@cratis/components/CommandForm/fields` is the same module as `@cratis/components/CommandForm` — either subpath resolves identically, so the `CommandForm` row's migration applies to both. Provider/configuration/message setup stays on the package root; only Common components such as `Button` move to `@cratis/components/Common`.
 
@@ -89,13 +114,24 @@ Run the migration codemod in preview mode first, then apply it:
 ```bash
 TOOLING_RANGE='^4.0.0'
 npx --package "@cratis/components-codemods@$TOOLING_RANGE" \
-  cratis-components-remove-root-namespace-imports --check <paths...>
+  cratis-components-remove-root-namespace-imports --check path/to/app/src
 npx --package "@cratis/components-codemods@$TOOLING_RANGE" \
-  cratis-components-remove-root-namespace-imports <paths...>
+  cratis-components-remove-root-namespace-imports path/to/app/src
 ```
 
 Components 3 has no matching 3.x codemod train. Use the bounded Components 4 tooling range (`>=4 <5`; `^4.0.0` above is the shell-safe equivalent). Never substitute `latest`. Tooling patches release independently from Core. Before scanning or writing, every codemod validates its bundled compatibility manifest, its own version, and the installed Components package from the invocation directory. It fails closed when Components is absent, outside the supported 3.x source or 4.x target window, or the manifest is invalid.
 
+The examples use npm's `npx`. pnpm and Yarn 2+ can launch the same bounded package without adding it:
+
+```bash
+pnpm dlx --package "@cratis/components-codemods@$TOOLING_RANGE" \
+  cratis-components-remove-root-namespace-imports --check path/to/app/src
+yarn dlx --package "@cratis/components-codemods@$TOOLING_RANGE" \
+  cratis-components-remove-root-namespace-imports --check path/to/app/src
+```
+
+Quote real paths containing spaces. Do not type angle-bracket placeholders in a shell: `<...>` means input redirection.
+
 The codemod scans JavaScript/JSX and TypeScript/TSX (including `.mjs`, `.cjs`, `.mts`, and `.cts`), preserves aliases and type-only imports, splits mixed setup/namespace imports, and rewrites a named `export { X } from '@cratis/components'` re-export the same way as the matching import. It reports unsupported cases without guessing: default or whole-package namespace imports, TypeScript `import = require(...)` assignments, dynamic imports, CommonJS `require(...)`, wildcard or whole-package re-exports (`export * from '@cratis/components'` / `export * as X from '@cratis/components'`), side-effect imports, and unknown symbols. Review its diagnostics, then run the consuming project's lint, build, and tests.
 
 ### Migrate Button appearance and change callbacks
@@ -112,14 +148,14 @@ Use the bounded Components 4 tooling train and preview each transform before app
 TOOLING_RANGE='^4.0.0'
 
 npx --package "@cratis/components-codemods@$TOOLING_RANGE" \
-  cratis-components-button-variant-tone --check <paths...>
+  cratis-components-button-variant-tone --check path/to/app/src
 npx --package "@cratis/components-codemods@$TOOLING_RANGE" \
-  cratis-components-button-variant-tone <paths...>
+  cratis-components-button-variant-tone path/to/app/src
 
 npx --package "@cratis/components-codemods@$TOOLING_RANGE" \
-  cratis-components-change-handler --check <paths...>
+  cratis-components-change-handler --check path/to/app/src
 npx --package "@cratis/components-codemods@$TOOLING_RANGE" \
-  cratis-components-change-handler <paths...>
+  cratis-components-change-handler path/to/app/src
 ```
 
 Keep the tooling range within `>=4 <5`; never use `latest`. The codemod preflight enforces the bundled source/target support windows.

From 84b61ff0c1f624b99c23d3dd6c535f1648f297dc Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Sat, 29 Aug 2026 00:40:44 +0200
Subject: [PATCH 258/267] Harden stable renderer manifest identity

---
 .../when_defining_a_presentation_ui_library.ts  | 17 +++++++++++++++++
 Source/renderer/presentation.ts                 |  5 ++++-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/Source/renderer/for_manifest/when_defining_a_presentation_ui_library.ts b/Source/renderer/for_manifest/when_defining_a_presentation_ui_library.ts
index 3c72d17f..867a726b 100644
--- a/Source/renderer/for_manifest/when_defining_a_presentation_ui_library.ts
+++ b/Source/renderer/for_manifest/when_defining_a_presentation_ui_library.ts
@@ -100,6 +100,13 @@ describe('when defining a stable presentation UI library', () => {
         );
     });
 
+    it('should reject a non-object manifest at runtime', () => {
+        expect(() => defineRuntime(null)).to.throw(
+            TypeError,
+            'manifest must be an object',
+        );
+    });
+
     it('should reject an invalid stable renderer identity at runtime', () => {
         const candidate = mutableLibrary();
         candidate.id = '../unstable';
@@ -120,6 +127,16 @@ describe('when defining a stable presentation UI library', () => {
         );
     });
 
+    it('should reject a whitespace-only stable display name at runtime', () => {
+        const candidate = mutableLibrary();
+        candidate.displayName = '   ';
+
+        expect(() => defineRuntime(candidate)).to.throw(
+            TypeError,
+            'displayName must contain between 1 and 128 characters',
+        );
+    });
+
     it('should reject a non-component stable provider at runtime', () => {
         const candidate = mutableLibrary();
         candidate.Provider = {};
diff --git a/Source/renderer/presentation.ts b/Source/renderer/presentation.ts
index c37550db..2e8297a2 100644
--- a/Source/renderer/presentation.ts
+++ b/Source/renderer/presentation.ts
@@ -151,6 +151,9 @@ const hasCanonicalProfileSlots = (profileSlots: readonly unknown[]): boolean =>
 export const definePresentationUiLibrary = (
     library: CratisPresentationUiLibrary,
 ): CratisPresentationUiLibrary => {
+    if (library === null || typeof library !== 'object') {
+        invalidPresentationLibrary('manifest must be an object');
+    }
     if (
         typeof library.id !== 'string' ||
         library.id.length > 128 ||
@@ -160,7 +163,7 @@ export const definePresentationUiLibrary = (
     }
     if (
         typeof library.displayName !== 'string' ||
-        library.displayName.length === 0 ||
+        library.displayName.trim().length === 0 ||
         library.displayName.length > 128
     ) {
         invalidPresentationLibrary('displayName must contain between 1 and 128 characters');

From c1abd1da5f46540abf8cb7cb014b7b7e91e469ff Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Sat, 29 Aug 2026 00:50:21 +0200
Subject: [PATCH 259/267] Improve Storybook coverage and renderer semantics

Add dedicated docs and interactions for previously implicit visual components and controlled/stateful primitives. Correct checkbox read-only ARIA forwarding across each stable presentation adapter so the expanded matrix verifies the documented contract.
---
 ...hen_using_the_mui_presentation_profile.tsx |  9 +-
 Adapters/Mui/src/index.tsx                    |  2 +-
 ...ng_the_primereact_presentation_profile.tsx |  5 ++
 Adapters/PrimeReact/src/index.tsx             |  2 +-
 ..._the_primereact10_presentation_profile.tsx |  5 ++
 Adapters/PrimeReact10/src/index.tsx           |  2 +-
 Documentation/storybook.mdx                   |  2 +-
 Source/Canvas/CanvasControls.stories.tsx      | 86 +++++++++++++++++++
 Source/Canvas/CanvasMinimap.stories.tsx       | 60 +++++++++++++
 Source/Chat/ChatMessageBody.stories.tsx       | 58 +++++++++++++
 Source/Common/Button.stories.tsx              |  9 +-
 Source/Common/Checkbox.stories.tsx            | 48 ++++++++++-
 Source/Common/IconButton.stories.tsx          | 17 +++-
 Source/Common/Radio.stories.tsx               | 45 +++++++++-
 Source/Common/Surface.stories.tsx             | 27 +++++-
 Source/Common/Switch.stories.tsx              | 48 ++++++++++-
 Source/Common/TextArea.stories.tsx            | 43 +++++++++-
 Source/Common/TextInput.stories.tsx           | 49 ++++++++++-
 Source/Common/Tooltip.stories.tsx             | 13 +++
 Source/DataTables/TablePaginator.stories.tsx  | 15 +++-
 Source/Display/ProgressBar.stories.tsx        | 25 ++++--
 Source/Notifications/Toaster.stories.tsx      | 33 +++++++
 Storybook/README.md                           |  2 +-
 Storybook/scripts/run-story-matrix.mjs        |  4 +-
 .../scripts/verify-storybook-indexes.mjs      | 12 +--
 25 files changed, 585 insertions(+), 36 deletions(-)
 create mode 100644 Source/Canvas/CanvasControls.stories.tsx
 create mode 100644 Source/Canvas/CanvasMinimap.stories.tsx
 create mode 100644 Source/Chat/ChatMessageBody.stories.tsx

diff --git a/Adapters/Mui/for_adapter/when_using_the_mui_presentation_profile.tsx b/Adapters/Mui/for_adapter/when_using_the_mui_presentation_profile.tsx
index 123cebee..b486e199 100644
--- a/Adapters/Mui/for_adapter/when_using_the_mui_presentation_profile.tsx
+++ b/Adapters/Mui/for_adapter/when_using_the_mui_presentation_profile.tsx
@@ -130,13 +130,17 @@ describe('when using the MUI stable presentation profile', () => {
             checkbox: renderSlot('common.checkbox', {
                 label: 'Selected',
                 defaultChecked: true,
+                readOnly: true,
             }),
             radio: renderSlot('common.radio', {
                 name: 'frequency',
                 value: 'daily',
                 'aria-label': 'Daily',
             }),
-            switchControl: renderSlot('common.switch', { 'aria-label': 'Enabled' }),
+            switchControl: renderSlot('common.switch', {
+                'aria-label': 'Enabled',
+                readOnly: true,
+            }),
             progress: renderSlot('common.progress', { value: 42 }),
             surface: renderSlot('common.surface', { as: 'article' }),
         };
@@ -146,9 +150,12 @@ describe('when using the MUI stable presentation profile', () => {
         expect(markup.textArea).to.contain('MuiInputBase-root');
         expect(markup.checkbox).to.contain('MuiCheckbox-root');
         expect(markup.checkbox).to.contain('aria-hidden="true"');
+        expect(markup.checkbox).to.contain('aria-readonly="true"');
         expect(markup.radio).to.contain('MuiRadio-root');
+        expect(markup.radio).not.to.contain('aria-readonly');
         expect(markup.switchControl).to.contain('MuiSwitch-root');
         expect(markup.switchControl).to.contain('role="switch"');
+        expect(markup.switchControl).to.contain('aria-readonly="true"');
         expect(markup.progress).to.contain('MuiLinearProgress-root');
         expect(markup.surface).to.contain('MuiPaper-root');
         expect(markup.surface).to.contain('<article');
diff --git a/Adapters/Mui/src/index.tsx b/Adapters/Mui/src/index.tsx
index 63b06c1a..76ae655e 100644
--- a/Adapters/Mui/src/index.tsx
+++ b/Adapters/Mui/src/index.tsx
@@ -841,7 +841,7 @@ const MuiChoice = ({ kind, props, forwardedRef }: MuiChoiceProps) => {
         name: kind === 'radio' ? radioProps.name : nativeProps.name,
         value: kind === 'radio' ? radioProps.value : nativeProps.value,
         'aria-invalid': ariaInvalid,
-        'aria-readonly': kind === 'switch' ? readOnly || undefined : undefined,
+        'aria-readonly': kind === 'radio' ? undefined : readOnly || undefined,
         role: kind === 'switch' ? 'switch' : nativeProps.role,
         className: classNames('cratis-mui-choice__input', inputClassName),
         style: inputStyle,
diff --git a/Adapters/PrimeReact/for_adapter/when_using_the_primereact_presentation_profile.tsx b/Adapters/PrimeReact/for_adapter/when_using_the_primereact_presentation_profile.tsx
index 45ee378a..7dbddff2 100644
--- a/Adapters/PrimeReact/for_adapter/when_using_the_primereact_presentation_profile.tsx
+++ b/Adapters/PrimeReact/for_adapter/when_using_the_primereact_presentation_profile.tsx
@@ -165,6 +165,7 @@ describe('when using the PrimeReact stable presentation profile', () => {
             checkbox: renderSlot('common.checkbox', {
                 label: 'Selected',
                 defaultChecked: true,
+                readOnly: true,
             }),
             radio: renderSlot('common.radio', {
                 name: 'frequency',
@@ -173,6 +174,7 @@ describe('when using the PrimeReact stable presentation profile', () => {
             }),
             switchControl: renderSlot('common.switch', {
                 'aria-label': 'Enabled',
+                readOnly: true,
             }),
             progress: renderSlot('common.progress', { value: 42 }),
             surface: renderSlot('common.surface', { as: 'article' }),
@@ -182,9 +184,12 @@ describe('when using the PrimeReact stable presentation profile', () => {
         expect(markup.textInput).to.contain('p-inputtext');
         expect(markup.textArea).to.contain('p-textarea');
         expect(markup.checkbox).to.contain('p-checkbox');
+        expect(markup.checkbox).to.contain('aria-readonly="true"');
         expect(markup.radio).to.contain('p-radiobutton');
+        expect(markup.radio).not.to.contain('aria-readonly');
         expect(markup.switchControl).to.contain('p-toggleswitch');
         expect(markup.switchControl).to.contain('role="switch"');
+        expect(markup.switchControl).to.contain('aria-readonly="true"');
         expect(markup.progress).to.contain('p-progressbar');
         expect(markup.surface).to.contain('p-card');
         expect(markup.surface).to.contain('<article');
diff --git a/Adapters/PrimeReact/src/index.tsx b/Adapters/PrimeReact/src/index.tsx
index 482636e3..ac5a6329 100644
--- a/Adapters/PrimeReact/src/index.tsx
+++ b/Adapters/PrimeReact/src/index.tsx
@@ -545,7 +545,7 @@ const PrimeChoice = ({
         name: kind === 'radio' ? radio.name : nativeProps.name,
         value: kind === 'radio' ? radio.value : nativeProps.value,
         'aria-invalid': ariaInvalid,
-        'aria-readonly': kind === 'switch' ? readOnly || undefined : undefined,
+        'aria-readonly': kind === 'radio' ? undefined : readOnly || undefined,
         role: kind === 'switch' ? 'switch' : nativeProps.role,
         className: classNames('cratis-primereact-choice__input', inputClassName),
         style: inputStyle,
diff --git a/Adapters/PrimeReact10/for_adapter/when_using_the_primereact10_presentation_profile.tsx b/Adapters/PrimeReact10/for_adapter/when_using_the_primereact10_presentation_profile.tsx
index d900120f..052806d5 100644
--- a/Adapters/PrimeReact10/for_adapter/when_using_the_primereact10_presentation_profile.tsx
+++ b/Adapters/PrimeReact10/for_adapter/when_using_the_primereact10_presentation_profile.tsx
@@ -140,6 +140,7 @@ describe('when using the PrimeReact 10 stable presentation profile', () => {
             checkbox: renderSlot('common.checkbox', {
                 label: 'Selected',
                 defaultChecked: true,
+                readOnly: true,
             }),
             radio: renderSlot('common.radio', {
                 name: 'frequency',
@@ -148,6 +149,7 @@ describe('when using the PrimeReact 10 stable presentation profile', () => {
             }),
             switchControl: renderSlot('common.switch', {
                 'aria-label': 'Enabled',
+                readOnly: true,
             }),
             progress: renderSlot('common.progress', { value: 42 }),
             surface: renderSlot('common.surface', { as: 'article' }),
@@ -157,9 +159,12 @@ describe('when using the PrimeReact 10 stable presentation profile', () => {
         expect(markup.textInput).to.contain('p-inputtext');
         expect(markup.textArea).to.contain('p-inputtextarea');
         expect(markup.checkbox).to.contain('p-checkbox');
+        expect(markup.checkbox).to.contain('aria-readonly="true"');
         expect(markup.radio).to.contain('p-radiobutton');
+        expect(markup.radio).not.to.contain('aria-readonly');
         expect(markup.switchControl).to.contain('p-inputswitch');
         expect(markup.switchControl).to.contain('role="switch"');
+        expect(markup.switchControl).to.contain('aria-readonly="true"');
         expect(markup.progress).to.contain('p-progressbar');
         expect(markup.surface).to.contain('p-card');
         expect(markup.surface).to.contain('<article');
diff --git a/Adapters/PrimeReact10/src/index.tsx b/Adapters/PrimeReact10/src/index.tsx
index 28ffd493..dd3a4319 100644
--- a/Adapters/PrimeReact10/src/index.tsx
+++ b/Adapters/PrimeReact10/src/index.tsx
@@ -571,7 +571,7 @@ const PrimeChoice = ({
         value: kind === 'radio' ? radio.value : nativeProps.value,
         defaultChecked: kind === 'radio' ? defaultChecked : undefined,
         'aria-invalid': ariaInvalid,
-        'aria-readonly': kind === 'switch' ? readOnly || undefined : undefined,
+        'aria-readonly': kind === 'radio' ? undefined : readOnly || undefined,
         role: kind === 'switch' ? 'switch' : nativeProps.role,
         className: classNames('cratis-primereact10-choice__input', inputClassName),
         style: inputStyle,
diff --git a/Documentation/storybook.mdx b/Documentation/storybook.mdx
index 06181ef5..85ef0227 100644
--- a/Documentation/storybook.mdx
+++ b/Documentation/storybook.mdx
@@ -12,6 +12,6 @@ Use the Appearance toolbar to compare the maintained baseline in light and dark
 
 PrimeReact 10 and 11 are built as separate preview projects because their incompatible `primereact` peer majors must never enter one dependency graph. The PrimeReact 10 preview resolves its nested 10.9.9 package and v10 theme CSS. The PrimeReact 11 preview is a bounded test fixture: it uses PrimeReact's public contexts and the adapter's non-secret boolean setup attestation without mounting the real license manager. Components and this Storybook do not receive, read, store, log, serialize, bundle, or proxy a license key.
 
-Every story module also generates an autodocs page from the public component types and TSDoc. CI validates the metadata-discovered adapter inventory, type-checks the configuration, asserts peer-major isolation, builds and compares every preview index, then runs all 261 stories in Playwright Chromium under both baseline light and dark modes for all four renderers. That is exactly **2,088 story/appearance/axe cases**, with no story sampling or exclusions; private adapters such as Plain are excluded from composition. Each `play()` interaction runs, and Accessibility-addon axe violations are errors. This is a browser component-test gate, not a claim of universal browser or assistive-technology conformance; keyboard, focus, busy, empty, invalid, disabled, open-overlay, and responsive states still require deliberate story coverage and release review.
+Every story module also generates an autodocs page from the public component types and TSDoc. CI validates the metadata-discovered adapter inventory, type-checks the configuration, asserts peer-major isolation, builds and compares every preview index, then runs all 277 stories in Playwright Chromium under both baseline light and dark modes for all four renderers. That is exactly **2,216 story/appearance/axe cases**, with no story sampling or exclusions; private adapters such as Plain are excluded from composition. Each `play()` interaction runs, and Accessibility-addon axe violations are errors. This is a browser component-test gate, not a claim of universal browser or assistive-technology conformance; keyboard, focus, busy, empty, invalid, disabled, open-overlay, and responsive states still require deliberate story coverage and release review.
 
 <StorybookEmbed fullPage={true} />
diff --git a/Source/Canvas/CanvasControls.stories.tsx b/Source/Canvas/CanvasControls.stories.tsx
new file mode 100644
index 00000000..ded81271
--- /dev/null
+++ b/Source/Canvas/CanvasControls.stories.tsx
@@ -0,0 +1,86 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { useRef } from 'react';
+import { expect, fn, userEvent, within } from 'storybook/test';
+import { CanvasControls } from './CanvasControls';
+
+const meta = {
+    title: 'Canvas/CanvasControls',
+    component: CanvasControls,
+    parameters: { layout: 'fullscreen' },
+    tags: ['autodocs'],
+    args: {
+        getZoom: () => 1,
+        onZoomIn: fn(),
+        onZoomOut: fn(),
+        onZoomReset: fn(),
+        onHelp: fn(),
+        showMinimapToggle: true,
+    },
+    decorators: [
+        (Story) => (
+            <div style={{ position: 'relative', width: '100vw', height: '20rem' }}>
+                <Story />
+            </div>
+        ),
+    ],
+} satisfies Meta<typeof CanvasControls>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Standalone controls expose named zoom, minimap, and optional help actions. */
+export const Playground: Story = {
+    play: async ({ args, canvasElement }) => {
+        const canvas = within(canvasElement);
+        await userEvent.click(canvas.getByRole('button', { name: 'Zoom In' }));
+        await expect(args.onZoomIn).toHaveBeenCalledOnce();
+        await userEvent.click(canvas.getByRole('button', { name: 'Help' }));
+        await expect(args.onHelp).toHaveBeenCalledOnce();
+        await userEvent.click(canvas.getByRole('button', { name: 'Toggle minimap' }));
+        await expect(canvasElement.querySelector('.canvas-minimap')).toBeVisible();
+    },
+};
+
+/** A host-owned zoom value and localized accessible names remain synchronized. */
+export const LocalizedControlledZoom: Story = {
+    render: (args) => {
+        const LocalizedControlledZoomDemo = () => {
+            const zoom = useRef(0.75);
+            return (
+                <CanvasControls
+                    {...args}
+                    getZoom={() => zoom.current}
+                    labels={{
+                        zoomOut: 'Reduce scale',
+                        resetZoom: 'Reset scale',
+                        zoomIn: 'Increase scale',
+                        help: 'Open help',
+                    }}
+                    onZoomIn={() => {
+                        zoom.current += 0.25;
+                    }}
+                    onZoomOut={() => {
+                        zoom.current -= 0.25;
+                    }}
+                    onZoomReset={() => {
+                        zoom.current = 1;
+                    }}
+                    showMinimapToggle={false}
+                />
+            );
+        };
+        return <LocalizedControlledZoomDemo />;
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const readout = canvas.getByRole('button', { name: 'Reset scale' });
+        await expect(readout).toHaveTextContent('75%');
+        await userEvent.click(canvas.getByRole('button', { name: 'Increase scale' }));
+        await expect(readout).toHaveTextContent('100%');
+        await userEvent.click(canvas.getByRole('button', { name: 'Reduce scale' }));
+        await expect(readout).toHaveTextContent('75%');
+    },
+};
diff --git a/Source/Canvas/CanvasMinimap.stories.tsx b/Source/Canvas/CanvasMinimap.stories.tsx
new file mode 100644
index 00000000..ce445bd9
--- /dev/null
+++ b/Source/Canvas/CanvasMinimap.stories.tsx
@@ -0,0 +1,60 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { useEffect, useRef } from 'react';
+import { expect, fn, userEvent } from 'storybook/test';
+import { CanvasMinimap, type CanvasMinimapHandle } from './CanvasMinimap';
+
+const items = [
+    { x: 120, y: 100, width: 240, height: 140, color: '#2563eb' },
+    { x: 760, y: 340, width: 300, height: 180, color: '#047857' },
+    { x: 1380, y: 720, width: 220, height: 160, color: '#b45309' },
+];
+
+const meta = {
+    title: 'Canvas/CanvasMinimap',
+    component: CanvasMinimap,
+    parameters: { layout: 'centered' },
+    tags: ['autodocs'],
+    args: {
+        worldWidth: 2000,
+        worldHeight: 1200,
+        items,
+        onRequestPan: fn(),
+    },
+} satisfies Meta<typeof CanvasMinimap>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** World-space item rectangles provide a compact overview and pointer pan target. */
+export const Playground: Story = {
+    play: async ({ args, canvasElement }) => {
+        const minimap = canvasElement.querySelector('.canvas-minimap');
+        if (!minimap) throw new Error('Canvas minimap did not render.');
+        await expect(canvasElement.querySelectorAll('.canvas-minimap-item')).toHaveLength(
+            items.length,
+        );
+        await userEvent.click(minimap);
+        await expect(args.onRequestPan).toHaveBeenCalledOnce();
+    },
+};
+
+/** The imperative handle synchronizes the visible viewport with the parent camera. */
+export const SynchronizedViewport: Story = {
+    render: (args) => {
+        const SynchronizedViewportDemo = () => {
+            const minimap = useRef<CanvasMinimapHandle>(null);
+            useEffect(() => {
+                minimap.current?.update({ x: -600, y: -300 }, 1, 900, 600);
+            }, []);
+            return <CanvasMinimap {...args} ref={minimap} />;
+        };
+        return <SynchronizedViewportDemo />;
+    },
+    play: async ({ canvasElement }) => {
+        const viewport = canvasElement.querySelector('.canvas-minimap-viewport');
+        await expect(viewport).toHaveStyle({ left: '54px', top: '30px' });
+    },
+};
diff --git a/Source/Chat/ChatMessageBody.stories.tsx b/Source/Chat/ChatMessageBody.stories.tsx
new file mode 100644
index 00000000..ff6d7bef
--- /dev/null
+++ b/Source/Chat/ChatMessageBody.stories.tsx
@@ -0,0 +1,58 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { expect } from 'storybook/test';
+import { ChatAuthorKind } from './Kit/ChatAuthorKind';
+import { ChatMessageBody } from './ChatMessageBody';
+
+const meta = {
+    title: 'Chat/ChatMessageBody',
+    component: ChatMessageBody,
+    parameters: { layout: 'centered' },
+    tags: ['autodocs'],
+    args: {
+        body: 'Could @Demo Assistant review this with @Sample User?',
+        mentions: [
+            {
+                id: 'demo-assistant',
+                name: 'Demo Assistant',
+                kind: ChatAuthorKind.Agent,
+            },
+            {
+                id: 'sample-user',
+                name: 'Sample User',
+                kind: ChatAuthorKind.User,
+            },
+        ],
+    },
+} satisfies Meta<typeof ChatMessageBody>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Known person and agent mentions retain their text while exposing distinct semantic styling hooks. */
+export const WithMentions: Story = {
+    play: async ({ canvasElement }) => {
+        const mentions = canvasElement.querySelectorAll('.cratis-chat-message__mention');
+        await expect(mentions).toHaveLength(2);
+        await expect(mentions[0]).toHaveAttribute('data-kind', ChatAuthorKind.Agent);
+        await expect(mentions[1]).toHaveAttribute('data-kind', ChatAuthorKind.User);
+    },
+};
+
+/** Ordinary text and unknown mention-like text remain readable plain message content. */
+export const PlainText: Story = {
+    args: {
+        body: 'A plain update for @Unknown Participant.',
+        mentions: [],
+    },
+    play: async ({ canvasElement }) => {
+        await expect(
+            canvasElement.querySelector('.cratis-chat-message__body'),
+        ).toHaveTextContent('A plain update for @Unknown Participant.');
+        await expect(
+            canvasElement.querySelector('.cratis-chat-message__mention'),
+        ).not.toBeInTheDocument();
+    },
+};
diff --git a/Source/Common/Button.stories.tsx b/Source/Common/Button.stories.tsx
index d4597b30..87357b61 100644
--- a/Source/Common/Button.stories.tsx
+++ b/Source/Common/Button.stories.tsx
@@ -35,7 +35,14 @@ export const IconOnly: Story = {
         tone: 'critical',
     },
 };
-export const Loading: Story = { args: { label: 'Saving', loading: true } };
+export const Loading: Story = {
+    args: { label: 'Saving', loading: true },
+    play: async ({ canvasElement }) => {
+        await expect(
+            within(canvasElement).getByRole('button', { name: 'Saving' }),
+        ).toBeDisabled();
+    },
+};
 export const Ghost: Story = { args: { label: 'Cancel', variant: 'ghost' } };
 export const Link: Story = { args: { label: 'Learn more', variant: 'link' } };
 export const Outline: Story = {
diff --git a/Source/Common/Checkbox.stories.tsx b/Source/Common/Checkbox.stories.tsx
index c9f6ecd0..db89fffc 100644
--- a/Source/Common/Checkbox.stories.tsx
+++ b/Source/Common/Checkbox.stories.tsx
@@ -2,6 +2,7 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
 import { expect, fn, userEvent, within } from 'storybook/test';
 import { Checkbox } from './Checkbox';
 
@@ -30,6 +31,51 @@ export const Default: Story = {
     },
 };
 
+export const Controlled: Story = {
+    render: () => {
+        const ControlledCheckbox = () => {
+            const [checked, setChecked] = useState(false);
+            return (
+                <Checkbox
+                    label='Controlled selection'
+                    name='controlled-selection'
+                    checked={checked}
+                    onChange={setChecked}
+                />
+            );
+        };
+        return <ControlledCheckbox />;
+    },
+    play: async ({ canvasElement }) => {
+        const checkbox = within(canvasElement).getByRole('checkbox', {
+            name: 'Controlled selection',
+        });
+        await userEvent.click(checkbox);
+        await expect(checkbox).toBeChecked();
+    },
+};
+
 export const Selected: Story = { args: { defaultChecked: true } };
 export const Invalid: Story = { args: { invalid: true } };
-export const ReadOnly: Story = { args: { defaultChecked: true, readOnly: true } };
+export const ReadOnly: Story = {
+    args: { defaultChecked: true, readOnly: true },
+    play: async ({ args, canvasElement }) => {
+        const checkbox = within(canvasElement).getByRole('checkbox', {
+            name: 'Include archived items',
+        });
+        await expect(checkbox).toHaveAttribute('aria-readonly', 'true');
+        await userEvent.click(checkbox);
+        await expect(checkbox).toBeChecked();
+        await expect(args.onChange).not.toHaveBeenCalled();
+    },
+};
+export const Disabled: Story = {
+    args: { disabled: true },
+    play: async ({ canvasElement }) => {
+        await expect(
+            within(canvasElement).getByRole('checkbox', {
+                name: 'Include archived items',
+            }),
+        ).toBeDisabled();
+    },
+};
diff --git a/Source/Common/IconButton.stories.tsx b/Source/Common/IconButton.stories.tsx
index 8118e41a..a25c3e11 100644
--- a/Source/Common/IconButton.stories.tsx
+++ b/Source/Common/IconButton.stories.tsx
@@ -28,5 +28,20 @@ export const Default: Story = {
     },
 };
 
-export const Loading: Story = { args: { loading: true } };
+export const Loading: Story = {
+    args: { loading: true },
+    play: async ({ canvasElement }) => {
+        await expect(
+            within(canvasElement).getByRole('button', { name: 'Add item' }),
+        ).toBeDisabled();
+    },
+};
+export const Disabled: Story = {
+    args: { disabled: true },
+    play: async ({ canvasElement }) => {
+        await expect(
+            within(canvasElement).getByRole('button', { name: 'Add item' }),
+        ).toBeDisabled();
+    },
+};
 export const Critical: Story = { args: { tone: 'critical' } };
diff --git a/Source/Common/Radio.stories.tsx b/Source/Common/Radio.stories.tsx
index 1fdf37ce..97f6558b 100644
--- a/Source/Common/Radio.stories.tsx
+++ b/Source/Common/Radio.stories.tsx
@@ -2,6 +2,7 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
 import { expect, fn, userEvent, within } from 'storybook/test';
 import { Radio } from './Radio';
 
@@ -28,6 +29,48 @@ export const Default: Story = {
     },
 };
 
+export const Controlled: Story = {
+    render: () => {
+        const ControlledRadio = () => {
+            const [checked, setChecked] = useState(false);
+            return (
+                <Radio
+                    label='Controlled daily frequency'
+                    name='controlled-frequency'
+                    value='daily'
+                    checked={checked}
+                    onChange={setChecked}
+                />
+            );
+        };
+        return <ControlledRadio />;
+    },
+    play: async ({ canvasElement }) => {
+        const radio = within(canvasElement).getByRole('radio', {
+            name: 'Controlled daily frequency',
+        });
+        await userEvent.click(radio);
+        await expect(radio).toBeChecked();
+    },
+};
+
 export const Selected: Story = { args: { defaultChecked: true } };
 export const Invalid: Story = { args: { invalid: true } };
-export const ReadOnly: Story = { args: { defaultChecked: true, readOnly: true } };
+export const ReadOnly: Story = {
+    args: { defaultChecked: true, readOnly: true },
+    play: async ({ args, canvasElement }) => {
+        const radio = within(canvasElement).getByRole('radio', { name: 'Daily' });
+        await expect(radio).not.toHaveAttribute('aria-readonly');
+        await userEvent.click(radio);
+        await expect(radio).toBeChecked();
+        await expect(args.onChange).not.toHaveBeenCalled();
+    },
+};
+export const Disabled: Story = {
+    args: { disabled: true },
+    play: async ({ canvasElement }) => {
+        await expect(
+            within(canvasElement).getByRole('radio', { name: 'Daily' }),
+        ).toBeDisabled();
+    },
+};
diff --git a/Source/Common/Surface.stories.tsx b/Source/Common/Surface.stories.tsx
index 1bb9bd94..99ec78d4 100644
--- a/Source/Common/Surface.stories.tsx
+++ b/Source/Common/Surface.stories.tsx
@@ -2,6 +2,7 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import type { Meta, StoryObj } from '@storybook/react';
+import { expect, within } from 'storybook/test';
 import { Surface } from './Surface';
 
 const meta = {
@@ -15,6 +16,26 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Div: Story = {};
-export const Section: Story = { args: { as: 'section', 'aria-label': 'Summary' } };
-export const Article: Story = { args: { as: 'article', 'aria-label': 'Example article' } };
+export const Div: Story = {
+    play: async ({ canvasElement }) => {
+        await expect(
+            canvasElement.querySelector('[data-cratis-part="root"]'),
+        ).toHaveProperty('tagName', 'DIV');
+    },
+};
+export const Section: Story = {
+    args: { as: 'section', 'aria-label': 'Summary' },
+    play: async ({ canvasElement }) => {
+        await expect(
+            within(canvasElement).getByRole('region', { name: 'Summary' }),
+        ).toHaveProperty('tagName', 'SECTION');
+    },
+};
+export const Article: Story = {
+    args: { as: 'article', 'aria-label': 'Example article' },
+    play: async ({ canvasElement }) => {
+        await expect(
+            within(canvasElement).getByRole('article', { name: 'Example article' }),
+        ).toHaveProperty('tagName', 'ARTICLE');
+    },
+};
diff --git a/Source/Common/Switch.stories.tsx b/Source/Common/Switch.stories.tsx
index 7385ded9..dee2e388 100644
--- a/Source/Common/Switch.stories.tsx
+++ b/Source/Common/Switch.stories.tsx
@@ -2,6 +2,7 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
 import { expect, fn, userEvent, within } from 'storybook/test';
 import { Switch } from './Switch';
 
@@ -28,6 +29,51 @@ export const Default: Story = {
     },
 };
 
+export const Controlled: Story = {
+    render: () => {
+        const ControlledSwitch = () => {
+            const [checked, setChecked] = useState(false);
+            return (
+                <Switch
+                    label='Controlled notifications'
+                    name='controlled-notifications'
+                    checked={checked}
+                    onChange={setChecked}
+                />
+            );
+        };
+        return <ControlledSwitch />;
+    },
+    play: async ({ canvasElement }) => {
+        const switchControl = within(canvasElement).getByRole('switch', {
+            name: 'Controlled notifications',
+        });
+        await userEvent.click(switchControl);
+        await expect(switchControl).toBeChecked();
+    },
+};
+
 export const Selected: Story = { args: { defaultChecked: true } };
 export const Invalid: Story = { args: { invalid: true } };
-export const ReadOnly: Story = { args: { defaultChecked: true, readOnly: true } };
+export const ReadOnly: Story = {
+    args: { defaultChecked: true, readOnly: true },
+    play: async ({ args, canvasElement }) => {
+        const switchControl = within(canvasElement).getByRole('switch', {
+            name: 'Enable notifications',
+        });
+        await expect(switchControl).toHaveAttribute('aria-readonly', 'true');
+        await userEvent.click(switchControl);
+        await expect(switchControl).toBeChecked();
+        await expect(args.onChange).not.toHaveBeenCalled();
+    },
+};
+export const Disabled: Story = {
+    args: { disabled: true },
+    play: async ({ canvasElement }) => {
+        await expect(
+            within(canvasElement).getByRole('switch', {
+                name: 'Enable notifications',
+            }),
+        ).toBeDisabled();
+    },
+};
diff --git a/Source/Common/TextArea.stories.tsx b/Source/Common/TextArea.stories.tsx
index 52663938..6cabab36 100644
--- a/Source/Common/TextArea.stories.tsx
+++ b/Source/Common/TextArea.stories.tsx
@@ -2,6 +2,7 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
 import { expect, fn, userEvent, within } from 'storybook/test';
 import { TextArea } from './TextArea';
 
@@ -27,5 +28,45 @@ export const Default: Story = {
     },
 };
 
+export const Controlled: Story = {
+    render: () => {
+        const ControlledTextArea = () => {
+            const [value, setValue] = useState('Ready');
+            return (
+                <TextArea
+                    aria-label='Controlled notes'
+                    rows={4}
+                    value={value}
+                    onChange={setValue}
+                />
+            );
+        };
+        return <ControlledTextArea />;
+    },
+    play: async ({ canvasElement }) => {
+        const input = within(canvasElement).getByRole('textbox', {
+            name: 'Controlled notes',
+        });
+        await userEvent.type(input, ' for review');
+        await expect(input).toHaveValue('Ready for review');
+    },
+};
+
 export const Invalid: Story = { args: { defaultValue: 'Review', invalid: true } };
-export const ReadOnly: Story = { args: { defaultValue: 'Read-only notes', readOnly: true } };
+export const ReadOnly: Story = {
+    args: { defaultValue: 'Read-only notes', readOnly: true },
+    play: async ({ args, canvasElement }) => {
+        const input = within(canvasElement).getByRole('textbox', { name: 'Notes' });
+        await userEvent.type(input, ' changed');
+        await expect(input).toHaveValue('Read-only notes');
+        await expect(args.onChange).not.toHaveBeenCalled();
+    },
+};
+export const Disabled: Story = {
+    args: { defaultValue: 'Unavailable', disabled: true },
+    play: async ({ canvasElement }) => {
+        await expect(
+            within(canvasElement).getByRole('textbox', { name: 'Notes' }),
+        ).toBeDisabled();
+    },
+};
diff --git a/Source/Common/TextInput.stories.tsx b/Source/Common/TextInput.stories.tsx
index 0bb9e865..5f3ed188 100644
--- a/Source/Common/TextInput.stories.tsx
+++ b/Source/Common/TextInput.stories.tsx
@@ -2,6 +2,7 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
 import { expect, fn, userEvent, within } from 'storybook/test';
 import { TextInput } from './TextInput';
 
@@ -18,7 +19,9 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
     play: async ({ args, canvasElement }) => {
-        const input = within(canvasElement).getByRole('textbox', { name: 'Project name' });
+        const input = within(canvasElement).getByRole('textbox', {
+            name: 'Project name',
+        });
         await userEvent.type(input, 'Demo');
         await expect(args.onChange).toHaveBeenLastCalledWith(
             'Demo',
@@ -27,6 +30,46 @@ export const Default: Story = {
     },
 };
 
+export const Controlled: Story = {
+    render: () => {
+        const ControlledTextInput = () => {
+            const [value, setValue] = useState('Example');
+            return (
+                <TextInput
+                    aria-label='Controlled project name'
+                    value={value}
+                    onChange={setValue}
+                />
+            );
+        };
+        return <ControlledTextInput />;
+    },
+    play: async ({ canvasElement }) => {
+        const input = within(canvasElement).getByRole('textbox', {
+            name: 'Controlled project name',
+        });
+        await userEvent.type(input, ' Project');
+        await expect(input).toHaveValue('Example Project');
+    },
+};
+
 export const Invalid: Story = { args: { defaultValue: 'Review', invalid: true } };
-export const ReadOnly: Story = { args: { defaultValue: 'Example Project', readOnly: true } };
-export const Disabled: Story = { args: { defaultValue: 'Unavailable', disabled: true } };
+export const ReadOnly: Story = {
+    args: { defaultValue: 'Example Project', readOnly: true },
+    play: async ({ args, canvasElement }) => {
+        const input = within(canvasElement).getByRole('textbox', {
+            name: 'Project name',
+        });
+        await userEvent.type(input, ' changed');
+        await expect(input).toHaveValue('Example Project');
+        await expect(args.onChange).not.toHaveBeenCalled();
+    },
+};
+export const Disabled: Story = {
+    args: { defaultValue: 'Unavailable', disabled: true },
+    play: async ({ canvasElement }) => {
+        await expect(
+            within(canvasElement).getByRole('textbox', { name: 'Project name' }),
+        ).toBeDisabled();
+    },
+};
diff --git a/Source/Common/Tooltip.stories.tsx b/Source/Common/Tooltip.stories.tsx
index 2b9a11c2..f9922c8a 100644
--- a/Source/Common/Tooltip.stories.tsx
+++ b/Source/Common/Tooltip.stories.tsx
@@ -2,6 +2,7 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import type { Meta, StoryObj } from '@storybook/react';
+import { expect, within } from 'storybook/test';
 import { Tooltip } from './Tooltip';
 
 const meta = {
@@ -43,6 +44,18 @@ export const Positions: Story = {
             ))}
         </div>
     ),
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const body = within(document.body);
+        for (const position of ['top', 'right', 'bottom', 'left'] as const) {
+            const trigger = canvas.getByRole('button', { name: position });
+            trigger.focus();
+            await expect(trigger).toHaveFocus();
+            const popup = await body.findByText(`Position: ${position}`);
+            await expect(popup).toHaveAttribute('role', 'tooltip');
+            await expect(popup).toHaveAttribute('data-cratis-part', 'popup');
+        }
+    },
 };
 
 /** With no content the child renders on its own — no tooltip attached. */
diff --git a/Source/DataTables/TablePaginator.stories.tsx b/Source/DataTables/TablePaginator.stories.tsx
index 04ad25aa..9f3eb04a 100644
--- a/Source/DataTables/TablePaginator.stories.tsx
+++ b/Source/DataTables/TablePaginator.stories.tsx
@@ -3,7 +3,7 @@
 
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from 'storybook/test';
+import { expect, fn, userEvent, within } from 'storybook/test';
 import { TablePaginator } from './TablePaginator';
 
 const meta = {
@@ -29,6 +29,19 @@ export const Interactive: Story = {
         const [page, setPage] = useState(args.page);
         return <TablePaginator {...args} page={page} onPageChange={setPage} />;
     },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await userEvent.click(canvas.getByRole('button', { name: 'Next page' }));
+        await expect(canvas.getByText('3 / 5')).toBeVisible();
+
+        await userEvent.click(canvas.getByRole('button', { name: 'Last page' }));
+        await expect(canvas.getByText('5 / 5')).toBeVisible();
+        await expect(canvas.getByRole('button', { name: 'Last page' })).toBeDisabled();
+
+        await userEvent.click(canvas.getByRole('button', { name: 'First page' }));
+        await expect(canvas.getByText('1 / 5')).toBeVisible();
+        await expect(canvas.getByRole('button', { name: 'First page' })).toBeDisabled();
+    },
 };
 
 export const LocalizedAndCustomized: Story = {
diff --git a/Source/Display/ProgressBar.stories.tsx b/Source/Display/ProgressBar.stories.tsx
index d280f613..2f6c454f 100644
--- a/Source/Display/ProgressBar.stories.tsx
+++ b/Source/Display/ProgressBar.stories.tsx
@@ -19,22 +19,29 @@ type Story = StoryObj<typeof meta>;
 export const Determinate: Story = {
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);
-        const bar = canvas.getByRole('progressbar');
+        const bar = canvas.getByRole('progressbar', { name: 'Progress' });
         await expect(bar).toHaveAttribute('aria-valuenow', '65');
     },
 };
 
-export const NoValueLabel: Story = { args: { showValue: false } };
+export const NoValueLabel: Story = {
+    args: { showValue: false },
+    play: async ({ canvasElement }) => {
+        within(canvasElement).getByRole('progressbar', { name: 'Progress' });
+        await expect(
+            canvasElement.querySelector('[data-cratis-part="label"]'),
+        ).not.toBeInTheDocument();
+    },
+};
 
 /** Values outside 0–100 are clamped rather than overflowing the track. */
 export const ClampedOutOfRange: Story = {
     args: { value: 140 },
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);
-        await expect(canvas.getByRole('progressbar')).toHaveAttribute(
-            'aria-valuenow',
-            '100',
-        );
+        await expect(
+            canvas.getByRole('progressbar', { name: 'Progress' }),
+        ).toHaveAttribute('aria-valuenow', '100');
     },
 };
 
@@ -43,8 +50,8 @@ export const Indeterminate: Story = {
     args: { mode: 'indeterminate' },
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);
-        await expect(canvas.getByRole('progressbar')).not.toHaveAttribute(
-            'aria-valuenow',
-        );
+        await expect(
+            canvas.getByRole('progressbar', { name: 'Progress' }),
+        ).not.toHaveAttribute('aria-valuenow');
     },
 };
diff --git a/Source/Notifications/Toaster.stories.tsx b/Source/Notifications/Toaster.stories.tsx
index b8377214..98ae81d9 100644
--- a/Source/Notifications/Toaster.stories.tsx
+++ b/Source/Notifications/Toaster.stories.tsx
@@ -2,6 +2,7 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import type { Meta, StoryObj } from '@storybook/react';
+import { expect, userEvent, within } from 'storybook/test';
 import { Button } from '../Common/Button';
 import { Toaster } from './Toaster';
 import { toast } from './toast';
@@ -114,4 +115,36 @@ export const Playground: Story = {
             </Button>
         </div>
     ),
+    play: async ({ canvasElement }) => {
+        toast.dismiss();
+        const canvas = within(canvasElement);
+        const body = within(document.body);
+        const showAndDismiss = async (
+            buttonName: string,
+            title: string,
+            severity: string,
+        ) => {
+            await userEvent.click(canvas.getByRole('button', { name: buttonName }));
+            const titleElement = await body.findByText(title);
+            const toastElement = titleElement.closest('[data-cratis-part="toast"]');
+            if (!toastElement) throw new Error(`Toast '${title}' did not render.`);
+            await expect(toastElement).toHaveAttribute('data-severity', severity);
+            await userEvent.click(
+                within(toastElement as HTMLElement).getByRole('button', {
+                    name: 'Dismiss',
+                }),
+            );
+        };
+
+        await showAndDismiss('Success', 'Saved', 'success');
+        await showAndDismiss('Info', 'Heads up', 'info');
+        await showAndDismiss('Warn', 'Careful', 'warn');
+        await showAndDismiss('Error', 'Failed', 'error');
+        await showAndDismiss(
+            'Command validation failure',
+            'Could not register author',
+            'error',
+        );
+        await showAndDismiss('Command success', 'Author registered', 'success');
+    },
 };
diff --git a/Storybook/README.md b/Storybook/README.md
index 8220a03e..d934f37c 100644
--- a/Storybook/README.md
+++ b/Storybook/README.md
@@ -29,4 +29,4 @@ yarn workspace @cratis/components.storybook test-storybook
 yarn workspace @cratis/components.storybook dev
 ```
 
-`test-storybook` runs 4 isolated previews × 261 stable stories × 2 appearance modes: **2,088 story/appearance/axe cases**. There is no story sampling or tag exclusion. The composed renderer control preserves a stable story id when available, but switching previews remounts the iframe and loses component-local state.
+`test-storybook` runs 4 isolated previews × 277 stable stories × 2 appearance modes: **2,216 story/appearance/axe cases**. There is no story sampling or tag exclusion. The composed renderer control preserves a stable story id when available, but switching previews remounts the iframe and loses component-local state.
diff --git a/Storybook/scripts/run-story-matrix.mjs b/Storybook/scripts/run-story-matrix.mjs
index 6652a630..40df1105 100644
--- a/Storybook/scripts/run-story-matrix.mjs
+++ b/Storybook/scripts/run-story-matrix.mjs
@@ -73,9 +73,9 @@ for (const adapter of inventory.adapters) {
     }
 }
 
-const matrixCount = inventory.adapters.length * 261 * appearances.length;
+const matrixCount = inventory.adapters.length * 277 * appearances.length;
 console.log(
-    `\nCompleted ${inventory.adapters.length} isolated previews × 261 stories × ${appearances.length} appearance mode(s) = ${matrixCount} story/appearance/axe cases.`,
+    `\nCompleted ${inventory.adapters.length} isolated previews × 277 stories × ${appearances.length} appearance mode(s) = ${matrixCount} story/appearance/axe cases.`,
 );
 console.log('Story exclusions: none. No sampling or tag exclusion was applied.');
 console.log(
diff --git a/Storybook/scripts/verify-storybook-indexes.mjs b/Storybook/scripts/verify-storybook-indexes.mjs
index 6e2d1bac..7d42defd 100644
--- a/Storybook/scripts/verify-storybook-indexes.mjs
+++ b/Storybook/scripts/verify-storybook-indexes.mjs
@@ -24,7 +24,7 @@ const collectTextFiles = directory => readdirSync(directory, { withFileTypes: tr
     return entry.isFile() && /\.(?:html|js|json)$/u.test(entry.name) ? [entryPath] : [];
 });
 const storyFiles = collectStoryFiles(sourceRoot);
-if (storyFiles.length !== 64) throw new Error(`Expected the existing 64 story modules, found ${storyFiles.length}.`);
+if (storyFiles.length !== 67) throw new Error(`Expected the existing 67 story modules, found ${storyFiles.length}.`);
 
 let canonicalStoryIds;
 let canonicalDocsIds;
@@ -39,8 +39,8 @@ for (const adapter of inventory.adapters) {
     const entries = Object.values(index.entries ?? {});
     const storyIds = entries.filter(entry => entry.type === 'story').map(entry => entry.id).sort();
     const docsIds = entries.filter(entry => entry.type === 'docs').map(entry => entry.id).sort();
-    if (storyIds.length !== 261 || docsIds.length !== 64) {
-        throw new Error(`${adapter.metadata.id} indexed ${storyIds.length} stories and ${docsIds.length} autodocs pages; expected 261 and 64.`);
+    if (storyIds.length !== 277 || docsIds.length !== 67) {
+        throw new Error(`${adapter.metadata.id} indexed ${storyIds.length} stories and ${docsIds.length} autodocs pages; expected 277 and 67.`);
     }
     canonicalStoryIds ??= storyIds;
     canonicalDocsIds ??= docsIds;
@@ -65,11 +65,11 @@ for (const adapter of inventory.adapters) {
             throw new Error(`PrimeReact 11 preview exposed a license-key environment contract in ${exposedEnvironmentContract}.`);
         }
     }
-    console.log(`${adapter.metadata.id}: 261 stories, 64 autodocs pages, primereact [${expectedVersions.join(', ') || 'none'}].`);
+    console.log(`${adapter.metadata.id}: 277 stories, 67 autodocs pages, primereact [${expectedVersions.join(', ') || 'none'}].`);
 }
 
 const appearances = 2;
-const matrixCount = inventory.adapters.length * 261 * appearances;
-console.log(`Storybook indexes verified: ${inventory.adapters.length} previews × 261 stable stories × ${appearances} appearances = ${matrixCount} story/appearance cases.`);
+const matrixCount = inventory.adapters.length * 277 * appearances;
+console.log(`Storybook indexes verified: ${inventory.adapters.length} previews × 277 stable stories × ${appearances} appearances = ${matrixCount} story/appearance cases.`);
 console.log('Story exclusions: none. Every indexed story is included in light, dark, and axe execution.');
 console.log(`Renderer exclusions: ${inventory.exclusions.map(item => `${item.id} (${item.reason})`).join(', ') || 'none'}; private adapters such as Plain are never composed.`);

From 86ff09e71111b5b2e0036bbab9691bf5c0221e14 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Sat, 29 Aug 2026 09:40:47 +0200
Subject: [PATCH 260/267] Format renderer manifest review changes

---
 Documentation/ui-foundation.md                | 38 +++++++++----------
 ...when_defining_a_presentation_ui_library.ts |  6 +--
 Source/renderer/presentation.ts               |  4 +-
 3 files changed, 23 insertions(+), 25 deletions(-)

diff --git a/Documentation/ui-foundation.md b/Documentation/ui-foundation.md
index ce0e0a0a..70a2d4ef 100644
--- a/Documentation/ui-foundation.md
+++ b/Documentation/ui-foundation.md
@@ -73,12 +73,12 @@ All three profiles and the setup-only root are exported from the same package ve
 
 ## Capability matrix
 
-| Capability profile | Subpaths                                                                                                                                                                           | Extra peer                                                                                                      | State Components owns                                                                                  | Data & persistence                                                                                                                                  | Arc / Chronicle relationship                                                                                                                                                                                      | SSR                                                                                                                                                                                                                                                            | Performance shape                                                                                                                                                                                                                                        |
-| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Setup** (root)   | `@cratis/components`                                                                                                                                                               | —                                                                                                               | Locale, provider-owned labels, toast-region wiring                                                     | none                                                                                                                                                | none                                                                                                                                                                                                              | Renders no browser-only API; safe to import and render on the server                                                                                                                                                                                           | negligible                                                                                                                                                                                                                                               |
-| **Foundation**     | `Common`, `CommandDialog` / `CommandStepper`, `CommandForm` / `CommandForm/fields`, `DataPage`, `DataTables`, `Dialogs`, `Display`, `Dropdown`, `Filter`, `Notifications`, `types` | —                                                                                                               | Widget interaction state: open/closed, focus, loaded-page sort/filter, paginator position, toast queue | Command execution and query results are `@cratis/arc.react` state; Components never fetches, caches, or persists data                               | Commands and queries run through Arc; Arc may itself be backed by Chronicle in an event-sourced application, but Components has no direct Chronicle dependency and behaves the same over a plain Arc.Core backend | Every surface that portals or reads `document` (`Dialog`, `FilterPanel`, `Toaster`) gates on a shared `useSyncExternalStore` browser check and renders a stable placeholder until mounted                                                                      | Table/paging cost scales with the loaded page only; complete-result filtering/sorting is a server concern (see [Update tables](Migration/3-to-4.md#update-tables))                                                                                       |
-| **Advanced React** | `Chat`, `ObjectContentEditor`, `ObjectNavigationalBar`, `SchemaEditor`, `TimeMachine`, `Toolbar`                                                                                   | —                                                                                                               | Draft, topic selection, local edit-buffer, breadcrumb, scrub-position, and active-tool/expanded-panel state | Host-supplied through props (`messages`, `topics`, `object`, `schema`, `versions`, `navigationPath`, …); `ChatSidebarForObservableQueries` can subscribe through Arc, while Components does not persist application data | Chat offers an optional Arc observable-query binding and optional messenger publication; the other subpaths assume no Arc integration. A Chronicle-backed host may supply any of their data | Plain React trees; Chat overlays and `Toolbar` folder/fan-out/slot pieces portal or attach browser listeners and therefore require a browser when those interactions mount                                                                                          | Cost follows the messages/topics/object/schema/version data the host passes; Chat conversations render the supplied message list, while the other surfaces document their own performance shape                                                        |
-| **Spatial**        | `Canvas`, `PivotViewer`                                                                                                                                                            | `pixi.js@^8.20.0` (optional, single shared resolution — see [Optional Pixi](#optional-pixi-clean-no-pixi-core)) | Camera/viewport/gesture transforms, measured item bounds, worker/index/filter state                    | Item, shape, and card data is host-supplied; Components renders and lets you query it, never persists it                                            | Same as Foundation: an event-sourced host may project Chronicle read models into the data it passes in, but neither component has a Chronicle dependency                                                          | `PIXI.Application` creation and PivotViewer's Web Worker setup run inside effects, guarded and skipped — with a synchronous fallback for the worker — when `window`/`Worker` is unavailable; `CanvasOverlay` uses the same browser-check pattern as Foundation | Pixi rendering and PivotViewer's Web Worker indexing exist specifically to keep large item counts off the DOM and main thread — see [Canvas](Canvas/index.md#dom-and-pixi-layers) and [PivotViewer](PivotViewer/index.md#worker-and-search-architecture) |
+| Capability profile | Subpaths                                                                                                                                                                           | Extra peer                                                                                                      | State Components owns                                                                                       | Data & persistence                                                                                                                                                                                                       | Arc / Chronicle relationship                                                                                                                                                                                      | SSR                                                                                                                                                                                                                                                            | Performance shape                                                                                                                                                                                                                                        |
+| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Setup** (root)   | `@cratis/components`                                                                                                                                                               | —                                                                                                               | Locale, provider-owned labels, toast-region wiring                                                          | none                                                                                                                                                                                                                     | none                                                                                                                                                                                                              | Renders no browser-only API; safe to import and render on the server                                                                                                                                                                                           | negligible                                                                                                                                                                                                                                               |
+| **Foundation**     | `Common`, `CommandDialog` / `CommandStepper`, `CommandForm` / `CommandForm/fields`, `DataPage`, `DataTables`, `Dialogs`, `Display`, `Dropdown`, `Filter`, `Notifications`, `types` | —                                                                                                               | Widget interaction state: open/closed, focus, loaded-page sort/filter, paginator position, toast queue      | Command execution and query results are `@cratis/arc.react` state; Components never fetches, caches, or persists data                                                                                                    | Commands and queries run through Arc; Arc may itself be backed by Chronicle in an event-sourced application, but Components has no direct Chronicle dependency and behaves the same over a plain Arc.Core backend | Every surface that portals or reads `document` (`Dialog`, `FilterPanel`, `Toaster`) gates on a shared `useSyncExternalStore` browser check and renders a stable placeholder until mounted                                                                      | Table/paging cost scales with the loaded page only; complete-result filtering/sorting is a server concern (see [Update tables](Migration/3-to-4.md#update-tables))                                                                                       |
+| **Advanced React** | `Chat`, `ObjectContentEditor`, `ObjectNavigationalBar`, `SchemaEditor`, `TimeMachine`, `Toolbar`                                                                                   | —                                                                                                               | Draft, topic selection, local edit-buffer, breadcrumb, scrub-position, and active-tool/expanded-panel state | Host-supplied through props (`messages`, `topics`, `object`, `schema`, `versions`, `navigationPath`, …); `ChatSidebarForObservableQueries` can subscribe through Arc, while Components does not persist application data | Chat offers an optional Arc observable-query binding and optional messenger publication; the other subpaths assume no Arc integration. A Chronicle-backed host may supply any of their data                       | Plain React trees; Chat overlays and `Toolbar` folder/fan-out/slot pieces portal or attach browser listeners and therefore require a browser when those interactions mount                                                                                     | Cost follows the messages/topics/object/schema/version data the host passes; Chat conversations render the supplied message list, while the other surfaces document their own performance shape                                                          |
+| **Spatial**        | `Canvas`, `PivotViewer`                                                                                                                                                            | `pixi.js@^8.20.0` (optional, single shared resolution — see [Optional Pixi](#optional-pixi-clean-no-pixi-core)) | Camera/viewport/gesture transforms, measured item bounds, worker/index/filter state                         | Item, shape, and card data is host-supplied; Components renders and lets you query it, never persists it                                                                                                                 | Same as Foundation: an event-sourced host may project Chronicle read models into the data it passes in, but neither component has a Chronicle dependency                                                          | `PIXI.Application` creation and PivotViewer's Web Worker setup run inside effects, guarded and skipped — with a synchronous fallback for the worker — when `window`/`Worker` is unavailable; `CanvasOverlay` uses the same browser-check pattern as Foundation | Pixi rendering and PivotViewer's Web Worker indexing exist specifically to keep large item counts off the DOM and main thread — see [Canvas](Canvas/index.md#dom-and-pixi-layers) and [PivotViewer](PivotViewer/index.md#worker-and-search-architecture) |
 
 ## Optional Pixi, clean no-Pixi core
 
@@ -191,20 +191,20 @@ Repository issues may track these gaps, but an open issue is not a public roadma
 The following issues preserve follow-up decisions outside the Components 4 contract. They are
 tracking records, not promises that an unstable API already exists or will ship unchanged:
 
-| Issue | Tracked decision or evidence gap |
-| --- | --- |
+| Issue                                                   | Tracked decision or evidence gap                                                                              |
+| ------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
 | [#207](https://github.com/Cratis/Components/issues/207) | Owner-authorized Components 4 publication; publication remains disabled until that separate review completes. |
-| [#208](https://github.com/Cratis/Components/issues/208) | Proof and possible promotion of atomic slots and mixed-renderer islands. |
-| [#209](https://github.com/Cratis/Components/issues/209) | Schema-driven public renderer discovery tooling. |
-| [#210](https://github.com/Cratis/Components/issues/210) | Lazy renderer preload semantics for streaming server rendering. |
-| [#211](https://github.com/Cratis/Components/issues/211) | Cross-browser and assistive-technology renderer certification. |
-| [#212](https://github.com/Cratis/Components/issues/212) | CSS theme bridges and vendor portal-interoperability recipes. |
-| [#213](https://github.com/Cratis/Components/issues/213) | Source-map preservation through ESM specifier rewriting. |
-| [#214](https://github.com/Cratis/Components/issues/214) | Evidence for or against a renderer-exclusive slim distribution. |
-| [#215](https://github.com/Cratis/Components/issues/215) | Reviewed dependency-update pull requests. |
-| [#216](https://github.com/Cratis/Components/issues/216) | Packed public-API snapshots and semantic-version surface diffs. |
-| [#217](https://github.com/Cratis/Components/issues/217) | Generated evidence inventories instead of hardcoded check counts. |
-| [#218](https://github.com/Cratis/Components/issues/218) | Renderer bundle and runtime-performance regression budgets. |
+| [#208](https://github.com/Cratis/Components/issues/208) | Proof and possible promotion of atomic slots and mixed-renderer islands.                                      |
+| [#209](https://github.com/Cratis/Components/issues/209) | Schema-driven public renderer discovery tooling.                                                              |
+| [#210](https://github.com/Cratis/Components/issues/210) | Lazy renderer preload semantics for streaming server rendering.                                               |
+| [#211](https://github.com/Cratis/Components/issues/211) | Cross-browser and assistive-technology renderer certification.                                                |
+| [#212](https://github.com/Cratis/Components/issues/212) | CSS theme bridges and vendor portal-interoperability recipes.                                                 |
+| [#213](https://github.com/Cratis/Components/issues/213) | Source-map preservation through ESM specifier rewriting.                                                      |
+| [#214](https://github.com/Cratis/Components/issues/214) | Evidence for or against a renderer-exclusive slim distribution.                                               |
+| [#215](https://github.com/Cratis/Components/issues/215) | Reviewed dependency-update pull requests.                                                                     |
+| [#216](https://github.com/Cratis/Components/issues/216) | Packed public-API snapshots and semantic-version surface diffs.                                               |
+| [#217](https://github.com/Cratis/Components/issues/217) | Generated evidence inventories instead of hardcoded check counts.                                             |
+| [#218](https://github.com/Cratis/Components/issues/218) | Renderer bundle and runtime-performance regression budgets.                                                   |
 
 Until those issues produce reviewed changes, the stable boundary remains the setup-only root, the
 exact nine-slot `stable-presentation/v1` profile, boolean setup attestations, and
diff --git a/Source/renderer/for_manifest/when_defining_a_presentation_ui_library.ts b/Source/renderer/for_manifest/when_defining_a_presentation_ui_library.ts
index 867a726b..c7571a15 100644
--- a/Source/renderer/for_manifest/when_defining_a_presentation_ui_library.ts
+++ b/Source/renderer/for_manifest/when_defining_a_presentation_ui_library.ts
@@ -230,11 +230,7 @@ describe('when defining a stable presentation UI library', () => {
 
     it('should reject required capabilities outside their stable tuple positions', () => {
         const candidate = mutableLibrary();
-        candidate.capabilities = [
-            'parts.passthrough',
-            'slot.render',
-            'ssr.staticRender',
-        ];
+        candidate.capabilities = ['parts.passthrough', 'slot.render', 'ssr.staticRender'];
 
         expect(() => defineRuntime(candidate)).to.throw(
             TypeError,
diff --git a/Source/renderer/presentation.ts b/Source/renderer/presentation.ts
index 2e8297a2..0f60a533 100644
--- a/Source/renderer/presentation.ts
+++ b/Source/renderer/presentation.ts
@@ -166,7 +166,9 @@ export const definePresentationUiLibrary = (
         library.displayName.trim().length === 0 ||
         library.displayName.length > 128
     ) {
-        invalidPresentationLibrary('displayName must contain between 1 and 128 characters');
+        invalidPresentationLibrary(
+            'displayName must contain between 1 and 128 characters',
+        );
     }
     if (library.Provider !== undefined && typeof library.Provider !== 'function') {
         invalidPresentationLibrary('Provider must be a React component when supplied');

From ccff874b7e356228cb8a23d0cd4065bd283d8ff2 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Sat, 29 Aug 2026 10:00:42 +0200
Subject: [PATCH 261/267] Type the renderer schema package export

---
 .gitignore                                |  1 +
 Conformance/src/internal/metadata.ts      |  4 +++-
 Source/package.json                       |  5 ++++-
 Source/schemas/ui-adapter.schema.d.ts     |  7 +++++++
 Source/scripts/copy-css.sh                |  3 ++-
 Source/scripts/verify-package-archive.mjs |  1 +
 rollup.config.mjs                         | 12 ++++++++++--
 7 files changed, 28 insertions(+), 5 deletions(-)
 create mode 100644 Source/schemas/ui-adapter.schema.d.ts

diff --git a/.gitignore b/.gitignore
index 2e2427b0..cf502e11 100644
--- a/.gitignore
+++ b/.gitignore
@@ -241,6 +241,7 @@ typings/
 *.d.ts
 !*.scss.d.ts
 !Adapters/**/src/upstream-*-shim.d.ts
+!Source/schemas/ui-adapter.schema.d.ts
 !Storybook/**/*.d.ts
 
 # Visual Studio 6 build log
diff --git a/Conformance/src/internal/metadata.ts b/Conformance/src/internal/metadata.ts
index 5cc54611..06b59e7a 100644
--- a/Conformance/src/internal/metadata.ts
+++ b/Conformance/src/internal/metadata.ts
@@ -29,7 +29,9 @@ interface JsonSchemaRule {
     readonly oneOf?: readonly JsonSchemaRule[];
 }
 
-const schema: JsonSchemaRule = adapterSchema;
+// SAFETY: the schema is a checked-in Core package artifact validated by renderer-contract and
+// archive gates; the public JSON declaration stays unknown so consumers must choose their decoder.
+const schema = adapterSchema as JsonSchemaRule;
 
 const isRecord = (value: unknown): value is Readonly<Record<string, unknown>> =>
     typeof value === 'object' && value !== null && !Array.isArray(value);
diff --git a/Source/package.json b/Source/package.json
index 93bc0e57..1cdae3e2 100644
--- a/Source/package.json
+++ b/Source/package.json
@@ -133,7 +133,10 @@
             "types": "./dist/esm/renderer/builtin/index.d.ts",
             "import": "./dist/esm/renderer/builtin/index.js"
         },
-        "./schemas/ui-adapter.schema.json": "./dist/esm/schemas/ui-adapter.schema.json",
+        "./schemas/ui-adapter.schema.json": {
+            "types": "./dist/esm/schemas/ui-adapter.schema.d.ts",
+            "import": "./dist/esm/schemas/ui-adapter.schema.json"
+        },
         "./SchemaEditor": {
             "types": "./dist/esm/SchemaEditor/index.d.ts",
             "import": "./dist/esm/SchemaEditor/index.js"
diff --git a/Source/schemas/ui-adapter.schema.d.ts b/Source/schemas/ui-adapter.schema.d.ts
new file mode 100644
index 00000000..796d0d3f
--- /dev/null
+++ b/Source/schemas/ui-adapter.schema.d.ts
@@ -0,0 +1,7 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+/** JSON Schema document describing a Cratis renderer adapter package manifest. */
+declare const schema: unknown;
+
+export default schema;
diff --git a/Source/scripts/copy-css.sh b/Source/scripts/copy-css.sh
index 06dc00e9..7c7e3956 100755
--- a/Source/scripts/copy-css.sh
+++ b/Source/scripts/copy-css.sh
@@ -14,7 +14,8 @@ set -euo pipefail
 mkdir -p dist/esm dist/esm/schemas
 
 cp schemas/ui-adapter.schema.json dist/esm/schemas/ui-adapter.schema.json
-echo "Copied ui-adapter.schema.json"
+cp schemas/ui-adapter.schema.d.ts dist/esm/schemas/ui-adapter.schema.d.ts
+echo "Copied ui-adapter.schema.json and its declaration"
 
 for stylesheet in tokens.css theme.css; do
     cp "$stylesheet" "dist/esm/$stylesheet"
diff --git a/Source/scripts/verify-package-archive.mjs b/Source/scripts/verify-package-archive.mjs
index ed2a5152..345dc65d 100644
--- a/Source/scripts/verify-package-archive.mjs
+++ b/Source/scripts/verify-package-archive.mjs
@@ -36,6 +36,7 @@ const requiredEntries = [
     'package/THIRD_PARTY_NOTICES.md',
     'package/dist/esm/styles.css',
     'package/dist/esm/schemas/ui-adapter.schema.json',
+    'package/dist/esm/schemas/ui-adapter.schema.d.ts',
     'package/dist/esm/renderer/index.js',
     'package/dist/esm/renderer/index.d.ts',
     'package/dist/esm/renderer/builtin/index.js',
diff --git a/rollup.config.mjs b/rollup.config.mjs
index 58e9e7f8..4cc9f05b 100644
--- a/rollup.config.mjs
+++ b/rollup.config.mjs
@@ -306,8 +306,16 @@ export function entryPointsFromExports(pkg, sourceDir) {
     const entries = [];
     for (const [subpath, value] of Object.entries(pkg.exports ?? {})) {
         if (subpath === './package.json') continue;
-        const typesTarget = value && typeof value === 'object' ? value.types : undefined;
-        if (typeof typesTarget !== 'string' || !typesTarget.endsWith('.d.ts')) continue;
+        const conditionalExport = value && typeof value === 'object' ? value : undefined;
+        const typesTarget = conditionalExport?.types;
+        const importTarget = conditionalExport?.import;
+        if (
+            typeof typesTarget !== 'string' ||
+            !typesTarget.endsWith('.d.ts') ||
+            typeof importTarget !== 'string' ||
+            !importTarget.endsWith('.js')
+        )
+            continue;
 
         const relative = typesTarget
             .replace(/^\.\//, '')

From 1d8f805be05906e8738f524a9b69bbe032cbf543 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Sat, 29 Aug 2026 10:00:49 +0200
Subject: [PATCH 262/267] Harden the local Components quality gate

---
 .ai/hooks/scripts/quality-gates.json   | 16 ++++++++++++++--
 .ai/hooks/scripts/run-components-ci.sh |  8 ++++----
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/.ai/hooks/scripts/quality-gates.json b/.ai/hooks/scripts/quality-gates.json
index 62e6e7b9..ce543b53 100644
--- a/.ai/hooks/scripts/quality-gates.json
+++ b/.ai/hooks/scripts/quality-gates.json
@@ -11,12 +11,19 @@
     "gates": [
         {
             "id": "components-ci",
-            "description": "install + yarn ci — recreate ignored Yarn state, then clean, lint, build, specs, and story typechecking",
+            "description": "immutable install + public workspace CI + private Storybook preflight",
             "changed": [
                 "Source/**",
                 "Codemods/**",
                 "ESLint/**",
+                "Conformance/**",
+                "Adapters/**",
+                "Storybook/**",
+                "scripts/**",
+                ".ai/hooks/**",
                 "package.json",
+                "yarn.lock",
+                "run-task-on-workspaces.js",
                 "rollup.config.mjs",
                 "tsconfig.json",
                 "eslint.config.mjs",
@@ -36,7 +43,12 @@
                     "package.json",
                     "Source/package.json",
                     "Codemods/package.json",
-                    "ESLint/package.json"
+                    "ESLint/package.json",
+                    "Conformance/package.json",
+                    "Adapters/Mui/package.json",
+                    "Adapters/PrimeReact/package.json",
+                    "Adapters/PrimeReact10/package.json",
+                    "Storybook/package.json"
                 ]
             },
             "workingDirectory": ".",
diff --git a/.ai/hooks/scripts/run-components-ci.sh b/.ai/hooks/scripts/run-components-ci.sh
index 562d8636..9f4a147d 100755
--- a/.ai/hooks/scripts/run-components-ci.sh
+++ b/.ai/hooks/scripts/run-components-ci.sh
@@ -2,13 +2,13 @@
 # Copyright (c) Cratis. All rights reserved.
 # Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-# The repository intentionally ignores yarn.lock. Recreate the local resolution and
-# node_modules state before running workspace CI so the stop hook also works in a
-# fresh clone or after generated-artifact cleanup.
+# Recreate node_modules from the committed lockfile before running public workspace CI.
+# Storybook is private and therefore skipped by the workspace runner, so its preflight is explicit.
 set -euo pipefail
 
 root="$(git -C "$(dirname "${BASH_SOURCE[0]}")" rev-parse --show-toplevel)"
 cd "$root"
 
-yarn install
+yarn install --immutable
 yarn ci
+yarn workspace @cratis/components.storybook ci:preflight

From 580903c29197cc6d781f20ccb1e8aa44dc1c339a Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Sat, 29 Aug 2026 10:02:45 +0200
Subject: [PATCH 263/267] Handle conditional package asset exports

---
 Source/scripts/verify-exports.mjs | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/Source/scripts/verify-exports.mjs b/Source/scripts/verify-exports.mjs
index 218deaed..d7044622 100644
--- a/Source/scripts/verify-exports.mjs
+++ b/Source/scripts/verify-exports.mjs
@@ -253,6 +253,10 @@ for (const subpath of subpaths) {
         const results = {};
         for (const mode of modes) {
             const target = targetFor(value, mode);
+            if (!target) {
+                results[mode] = 'N/A';
+                continue;
+            }
             const abs = path.resolve(packageDir, target);
             const present = existsSync(abs);
             if (!present) failures++;

From 72307d8b97dee80ee678a1294d9334496b28761e Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Sat, 29 Aug 2026 10:21:43 +0200
Subject: [PATCH 264/267] Harden adapter metadata property checks

---
 .../when_detecting_planted_defects.tsx        | 25 +++++++++++++++++++
 Conformance/src/internal/metadata.ts          | 10 +++++---
 2 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/Conformance/for_conformance/when_detecting_planted_defects.tsx b/Conformance/for_conformance/when_detecting_planted_defects.tsx
index 9efbc74b..ea28c2db 100644
--- a/Conformance/for_conformance/when_detecting_planted_defects.tsx
+++ b/Conformance/for_conformance/when_detecting_planted_defects.tsx
@@ -19,6 +19,7 @@ import {
 import { unstable_cratisBuiltIn } from '@cratis/components/renderer/builtin';
 import { describe, it } from 'vitest';
 import { runConformance } from '../src/index.js';
+import { validateMetadata } from '../src/internal/metadata.js';
 
 const declaration = (slotId: unstable_SlotId) =>
     unstable_cratisBuiltIn.slots[slotId] as unstable_SlotDeclaration<unstable_SlotId>;
@@ -148,6 +149,30 @@ describe('when detecting planted adapter defects', () => {
         expect(await failureIds(library)).to.deep.equal(['manifest.noOverDeclaration']);
     });
 
+    it('should reject metadata keys inherited by the schema properties object', () => {
+        const library = oneSlot('common.surface', declaration('common.surface'));
+
+        expect(
+            validateMetadata({
+                ...metadataFor(library),
+                constructor: 'unexpected',
+            }),
+        ).to.deep.equal(["$: unknown property 'constructor'"]);
+    });
+
+    it('should not satisfy required metadata through the candidate prototype', () => {
+        const library = oneSlot('common.surface', declaration('common.surface'));
+        const { kind: _kind, ...withoutKind } = metadataFor(library);
+        const inheritedKind = Object.setPrototypeOf(
+            { ...withoutKind },
+            { kind: 'ui-adapter' },
+        );
+
+        expect(validateMetadata(inheritedKind)).to.include(
+            "$: missing required property 'kind'",
+        );
+    });
+
     it('should report a static mode outside the declared runtime profile', async () => {
         const library = oneSlot('common.surface', declaration('common.surface'));
         const metadata = metadataFor(library);
diff --git a/Conformance/src/internal/metadata.ts b/Conformance/src/internal/metadata.ts
index 06b59e7a..47f1c7cb 100644
--- a/Conformance/src/internal/metadata.ts
+++ b/Conformance/src/internal/metadata.ts
@@ -53,7 +53,7 @@ const resolveReference = (reference: string): JsonSchemaRule => {
     let current: unknown = schema;
     for (const encodedSegment of reference.slice(2).split('/')) {
         const segment = encodedSegment.replaceAll('~1', '/').replaceAll('~0', '~');
-        if (!isRecord(current) || !(segment in current)) {
+        if (!isRecord(current) || !Object.hasOwn(current, segment)) {
             throw new Error(`Unresolved schema reference '${reference}'.`);
         }
         current = current[segment];
@@ -126,7 +126,8 @@ const validateAgainstSchema = (
             add(`must contain no more than ${rule.maxProperties} properties`);
         }
         for (const required of rule.required ?? []) {
-            if (!(required in candidate)) add(`missing required property '${required}'`);
+            if (!Object.hasOwn(candidate, required))
+                add(`missing required property '${required}'`);
         }
         for (const key of keys) {
             if (rule.propertyNames) {
@@ -138,7 +139,10 @@ const validateAgainstSchema = (
                     ),
                 );
             }
-            const propertyRule = rule.properties?.[key];
+            const propertyRule =
+                rule.properties && Object.hasOwn(rule.properties, key)
+                    ? rule.properties[key]
+                    : undefined;
             if (propertyRule) {
                 problems.push(
                     ...validateAgainstSchema(

From 961b435cc695f1be46a75fbd1502269421b3ff45 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Sat, 29 Aug 2026 10:23:18 +0200
Subject: [PATCH 265/267] Harden Storybook adapter schema checks

---
 .../when_discovering_renderer_previews.ts     | 21 +++++++++++++++++++
 Storybook/scripts/lib/schema-validator.mjs    | 12 +++++++----
 2 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/Storybook/for_inventory/when_discovering_renderer_previews.ts b/Storybook/for_inventory/when_discovering_renderer_previews.ts
index dd425d7a..c15910ef 100644
--- a/Storybook/for_inventory/when_discovering_renderer_previews.ts
+++ b/Storybook/for_inventory/when_discovering_renderer_previews.ts
@@ -32,6 +32,27 @@ describe('when discovering renderer previews', () => {
         expect(validateAgainstSchema(invalid, adapterSchema)).not.to.be.empty;
     });
 
+    it('should reject metadata keys inherited by the schema properties object', () => {
+        expect(
+            validateAgainstSchema(
+                { ...sourcePackage.cratis, constructor: 'unexpected' },
+                adapterSchema,
+            ),
+        ).to.deep.equal(["$: unknown property 'constructor'"]);
+    });
+
+    it('should not satisfy required metadata through the candidate prototype', () => {
+        const { kind: _kind, ...withoutKind } = sourcePackage.cratis;
+        const inheritedKind = Object.setPrototypeOf(
+            { ...withoutKind },
+            { kind: 'ui-adapter' },
+        );
+
+        expect(validateAgainstSchema(inheritedKind, adapterSchema)).to.include(
+            "$: missing required property 'kind'",
+        );
+    });
+
     it('should exclude a private adapter workspace without a Core inventory edit', () => {
         const root = mkdtempSync(path.join(os.tmpdir(), 'cratis-storybook-inventory-'));
         try {
diff --git a/Storybook/scripts/lib/schema-validator.mjs b/Storybook/scripts/lib/schema-validator.mjs
index 491ce066..30d49d97 100644
--- a/Storybook/scripts/lib/schema-validator.mjs
+++ b/Storybook/scripts/lib/schema-validator.mjs
@@ -16,7 +16,7 @@ export const validateAgainstSchema = (candidate, schema) => {
         let current = schema;
         for (const encodedSegment of reference.slice(2).split('/')) {
             const segment = encodedSegment.replaceAll('~1', '/').replaceAll('~0', '~');
-            if (!isRecord(current) || !(segment in current)) {
+            if (!isRecord(current) || !Object.hasOwn(current, segment)) {
                 throw new Error(`Unresolved schema reference '${reference}'.`);
             }
             current = current[segment];
@@ -33,7 +33,7 @@ export const validateAgainstSchema = (candidate, schema) => {
             add(`expected ${rule.type}, got ${valueType(value)}`);
             return problems;
         }
-        if ('const' in rule && !sameJson(value, rule.const)) add(`expected ${JSON.stringify(rule.const)}`);
+        if (Object.hasOwn(rule, 'const') && !sameJson(value, rule.const)) add(`expected ${JSON.stringify(rule.const)}`);
         if (rule.enum && !rule.enum.some(candidateValue => sameJson(candidateValue, value))) add('value is outside the declared enum');
         if (typeof value === 'string') {
             if (rule.minLength !== undefined && value.length < rule.minLength) add(`must have at least ${rule.minLength} characters`);
@@ -50,10 +50,14 @@ export const validateAgainstSchema = (candidate, schema) => {
             const keys = Object.keys(value);
             if (rule.minProperties !== undefined && keys.length < rule.minProperties) add(`must contain at least ${rule.minProperties} properties`);
             if (rule.maxProperties !== undefined && keys.length > rule.maxProperties) add(`must contain no more than ${rule.maxProperties} properties`);
-            for (const required of rule.required ?? []) if (!(required in value)) add(`missing required property '${required}'`);
+            for (const required of rule.required ?? []) {
+                if (!Object.hasOwn(value, required)) add(`missing required property '${required}'`);
+            }
             for (const key of keys) {
                 if (rule.propertyNames) problems.push(...validate(key, rule.propertyNames, `${location}.${key} (property name)`));
-                const propertyRule = rule.properties?.[key];
+                const propertyRule = rule.properties && Object.hasOwn(rule.properties, key)
+                    ? rule.properties[key]
+                    : undefined;
                 if (propertyRule) problems.push(...validate(value[key], propertyRule, `${location}.${key}`));
                 else if (rule.additionalProperties === false) add(`unknown property '${key}'`);
                 else if (isRecord(rule.additionalProperties)) problems.push(...validate(value[key], rule.additionalProperties, `${location}.${key}`));

From e1faf463f6e5ae971b39b7a525c6904116085271 Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Sat, 29 Aug 2026 10:25:34 +0200
Subject: [PATCH 266/267] Harden renderer schema verification

---
 Source/scripts/verify-renderer-contracts.mjs | 46 +++++++++++++++-----
 1 file changed, 36 insertions(+), 10 deletions(-)

diff --git a/Source/scripts/verify-renderer-contracts.mjs b/Source/scripts/verify-renderer-contracts.mjs
index 1e46557a..aad9d266 100644
--- a/Source/scripts/verify-renderer-contracts.mjs
+++ b/Source/scripts/verify-renderer-contracts.mjs
@@ -8,12 +8,24 @@ import { fileURLToPath } from 'node:url';
 
 const packageDir = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
 const schemaPath = path.join(packageDir, 'schemas/ui-adapter.schema.json');
+const readJson = (filePath, description) => {
+    try {
+        return JSON.parse(readFileSync(filePath, 'utf8'));
+    } catch (error) {
+        throw new Error(`Unable to read ${description} from '${filePath}'.`, {
+            cause: error,
+        });
+    }
+};
 const fixturePaths = [
     'renderer/for_slot_types/slotTyping.fixture.ts',
     'renderer/for_slot_types/presentationTyping.fixture.ts',
 ].map(relativePath => path.join(packageDir, relativePath));
-const schema = JSON.parse(readFileSync(schemaPath, 'utf8'));
-const packageJson = JSON.parse(readFileSync(path.join(packageDir, 'package.json'), 'utf8'));
+const schema = readJson(schemaPath, 'renderer adapter schema');
+const packageJson = readJson(
+    path.join(packageDir, 'package.json'),
+    'Components package manifest',
+);
 
 const valueType = value => {
     if (Array.isArray(value)) return 'array';
@@ -26,10 +38,15 @@ const sameJson = (left, right) => JSON.stringify(left) === JSON.stringify(right)
 
 const resolveReference = reference => {
     if (!reference.startsWith('#/')) throw new Error(`Unsupported schema reference '${reference}'.`);
-    return reference
-        .slice(2)
-        .split('/')
-        .reduce((current, segment) => current[segment.replaceAll('~1', '/').replaceAll('~0', '~')], schema);
+    let current = schema;
+    for (const encodedSegment of reference.slice(2).split('/')) {
+        const segment = encodedSegment.replaceAll('~1', '/').replaceAll('~0', '~');
+        if (!current || typeof current !== 'object' || !Object.hasOwn(current, segment)) {
+            throw new Error(`Unresolved schema reference '${reference}'.`);
+        }
+        current = current[segment];
+    }
+    return current;
 };
 
 const validate = (candidate, rule, location = '$') => {
@@ -41,7 +58,7 @@ const validate = (candidate, rule, location = '$') => {
         add(`expected ${rule.type}, got ${valueType(candidate)}`);
         return problems;
     }
-    if ('const' in rule && !sameJson(candidate, rule.const)) add(`expected ${JSON.stringify(rule.const)}`);
+    if (Object.hasOwn(rule, 'const') && !sameJson(candidate, rule.const)) add(`expected ${JSON.stringify(rule.const)}`);
     if (rule.enum && !rule.enum.some(value => sameJson(value, candidate))) add('value is outside the declared enum');
     if (typeof candidate === 'string') {
         if (rule.minLength !== undefined && candidate.length < rule.minLength) add(`must have at least ${rule.minLength} characters`);
@@ -59,12 +76,15 @@ const validate = (candidate, rule, location = '$') => {
         if (rule.minProperties !== undefined && keys.length < rule.minProperties) add(`must contain at least ${rule.minProperties} properties`);
         if (rule.maxProperties !== undefined && keys.length > rule.maxProperties) add(`must contain no more than ${rule.maxProperties} properties`);
         for (const required of rule.required ?? []) {
-            if (!(required in candidate)) add(`missing required property '${required}'`);
+            if (!Object.hasOwn(candidate, required)) add(`missing required property '${required}'`);
         }
         for (const key of keys) {
             if (rule.propertyNames) problems.push(...validate(key, rule.propertyNames, `${location}.${key} (property name)`));
-            if (rule.properties?.[key]) {
-                problems.push(...validate(candidate[key], rule.properties[key], `${location}.${key}`));
+            const propertyRule = rule.properties && Object.hasOwn(rule.properties, key)
+                ? rule.properties[key]
+                : undefined;
+            if (propertyRule) {
+                problems.push(...validate(candidate[key], propertyRule, `${location}.${key}`));
             } else if (rule.additionalProperties === false) {
                 add(`unknown property '${key}'`);
             } else if (rule.additionalProperties && typeof rule.additionalProperties === 'object') {
@@ -106,9 +126,15 @@ if (validProblems.length > 0) {
     process.exit(1);
 }
 
+const inheritedKindManifest = Object.setPrototypeOf(
+    Object.fromEntries(Object.entries(validManifest).filter(([key]) => key !== 'kind')),
+    { kind: 'ui-adapter' },
+);
 const invalidManifests = [
     { ...validManifest, level: 'unknown' },
     { ...validManifest, unexpected: true },
+    { ...validManifest, constructor: 'unexpected' },
+    inheritedKindManifest,
     { ...validManifest, upstream: { '@future/ui': '*' } },
     { ...validManifest, modes: { 'common.button': 'hybrid' } },
     { ...validManifest, license: { spdx: 'Proprietary', requiresKey: true } },

From 3e2630f7dc47c40e53ace9b9e84f425b1f8ee92c Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Sat, 29 Aug 2026 10:35:58 +0200
Subject: [PATCH 267/267] Format hardened schema validators

---
 Source/scripts/verify-renderer-contracts.mjs  | 120 +++++++++++++-----
 .../when_discovering_renderer_previews.ts     |  64 ++++++----
 Storybook/scripts/lib/schema-validator.mjs    | 107 +++++++++++-----
 3 files changed, 206 insertions(+), 85 deletions(-)

diff --git a/Source/scripts/verify-renderer-contracts.mjs b/Source/scripts/verify-renderer-contracts.mjs
index aad9d266..930321a0 100644
--- a/Source/scripts/verify-renderer-contracts.mjs
+++ b/Source/scripts/verify-renderer-contracts.mjs
@@ -20,14 +20,14 @@ const readJson = (filePath, description) => {
 const fixturePaths = [
     'renderer/for_slot_types/slotTyping.fixture.ts',
     'renderer/for_slot_types/presentationTyping.fixture.ts',
-].map(relativePath => path.join(packageDir, relativePath));
+].map((relativePath) => path.join(packageDir, relativePath));
 const schema = readJson(schemaPath, 'renderer adapter schema');
 const packageJson = readJson(
     path.join(packageDir, 'package.json'),
     'Components package manifest',
 );
 
-const valueType = value => {
+const valueType = (value) => {
     if (Array.isArray(value)) return 'array';
     if (value === null) return 'null';
     if (Number.isInteger(value)) return 'integer';
@@ -36,8 +36,9 @@ const valueType = value => {
 
 const sameJson = (left, right) => JSON.stringify(left) === JSON.stringify(right);
 
-const resolveReference = reference => {
-    if (!reference.startsWith('#/')) throw new Error(`Unsupported schema reference '${reference}'.`);
+const resolveReference = (reference) => {
+    if (!reference.startsWith('#/'))
+        throw new Error(`Unsupported schema reference '${reference}'.`);
     let current = schema;
     for (const encodedSegment of reference.slice(2).split('/')) {
         const segment = encodedSegment.replaceAll('~1', '/').replaceAll('~0', '~');
@@ -53,49 +54,90 @@ const validate = (candidate, rule, location = '$') => {
     if (rule.$ref) return validate(candidate, resolveReference(rule.$ref), location);
 
     const problems = [];
-    const add = message => problems.push(`${location}: ${message}`);
+    const add = (message) => problems.push(`${location}: ${message}`);
     if (rule.type && valueType(candidate) !== rule.type) {
         add(`expected ${rule.type}, got ${valueType(candidate)}`);
         return problems;
     }
-    if (Object.hasOwn(rule, 'const') && !sameJson(candidate, rule.const)) add(`expected ${JSON.stringify(rule.const)}`);
-    if (rule.enum && !rule.enum.some(value => sameJson(value, candidate))) add('value is outside the declared enum');
+    if (Object.hasOwn(rule, 'const') && !sameJson(candidate, rule.const))
+        add(`expected ${JSON.stringify(rule.const)}`);
+    if (rule.enum && !rule.enum.some((value) => sameJson(value, candidate)))
+        add('value is outside the declared enum');
     if (typeof candidate === 'string') {
-        if (rule.minLength !== undefined && candidate.length < rule.minLength) add(`must have at least ${rule.minLength} characters`);
-        if (rule.maxLength !== undefined && candidate.length > rule.maxLength) add(`must have no more than ${rule.maxLength} characters`);
-        if (rule.pattern && !new RegExp(rule.pattern, 'u').test(candidate)) add(`does not match ${rule.pattern}`);
+        if (rule.minLength !== undefined && candidate.length < rule.minLength)
+            add(`must have at least ${rule.minLength} characters`);
+        if (rule.maxLength !== undefined && candidate.length > rule.maxLength)
+            add(`must have no more than ${rule.maxLength} characters`);
+        if (rule.pattern && !new RegExp(rule.pattern, 'u').test(candidate))
+            add(`does not match ${rule.pattern}`);
     }
     if (Array.isArray(candidate)) {
-        if (rule.minItems !== undefined && candidate.length < rule.minItems) add(`must contain at least ${rule.minItems} items`);
-        if (rule.maxItems !== undefined && candidate.length > rule.maxItems) add(`must contain no more than ${rule.maxItems} items`);
-        if (rule.uniqueItems && new Set(candidate.map(item => JSON.stringify(item))).size !== candidate.length) add('items must be unique');
-        if (rule.items) candidate.forEach((item, index) => problems.push(...validate(item, rule.items, `${location}[${index}]`)));
+        if (rule.minItems !== undefined && candidate.length < rule.minItems)
+            add(`must contain at least ${rule.minItems} items`);
+        if (rule.maxItems !== undefined && candidate.length > rule.maxItems)
+            add(`must contain no more than ${rule.maxItems} items`);
+        if (
+            rule.uniqueItems &&
+            new Set(candidate.map((item) => JSON.stringify(item))).size !==
+                candidate.length
+        )
+            add('items must be unique');
+        if (rule.items)
+            candidate.forEach((item, index) =>
+                problems.push(...validate(item, rule.items, `${location}[${index}]`)),
+            );
     }
     if (candidate && typeof candidate === 'object' && !Array.isArray(candidate)) {
         const keys = Object.keys(candidate);
-        if (rule.minProperties !== undefined && keys.length < rule.minProperties) add(`must contain at least ${rule.minProperties} properties`);
-        if (rule.maxProperties !== undefined && keys.length > rule.maxProperties) add(`must contain no more than ${rule.maxProperties} properties`);
+        if (rule.minProperties !== undefined && keys.length < rule.minProperties)
+            add(`must contain at least ${rule.minProperties} properties`);
+        if (rule.maxProperties !== undefined && keys.length > rule.maxProperties)
+            add(`must contain no more than ${rule.maxProperties} properties`);
         for (const required of rule.required ?? []) {
-            if (!Object.hasOwn(candidate, required)) add(`missing required property '${required}'`);
+            if (!Object.hasOwn(candidate, required))
+                add(`missing required property '${required}'`);
         }
         for (const key of keys) {
-            if (rule.propertyNames) problems.push(...validate(key, rule.propertyNames, `${location}.${key} (property name)`));
-            const propertyRule = rule.properties && Object.hasOwn(rule.properties, key)
-                ? rule.properties[key]
-                : undefined;
+            if (rule.propertyNames)
+                problems.push(
+                    ...validate(
+                        key,
+                        rule.propertyNames,
+                        `${location}.${key} (property name)`,
+                    ),
+                );
+            const propertyRule =
+                rule.properties && Object.hasOwn(rule.properties, key)
+                    ? rule.properties[key]
+                    : undefined;
             if (propertyRule) {
-                problems.push(...validate(candidate[key], propertyRule, `${location}.${key}`));
+                problems.push(
+                    ...validate(candidate[key], propertyRule, `${location}.${key}`),
+                );
             } else if (rule.additionalProperties === false) {
                 add(`unknown property '${key}'`);
-            } else if (rule.additionalProperties && typeof rule.additionalProperties === 'object') {
-                problems.push(...validate(candidate[key], rule.additionalProperties, `${location}.${key}`));
+            } else if (
+                rule.additionalProperties &&
+                typeof rule.additionalProperties === 'object'
+            ) {
+                problems.push(
+                    ...validate(
+                        candidate[key],
+                        rule.additionalProperties,
+                        `${location}.${key}`,
+                    ),
+                );
             }
         }
     }
-    for (const nested of rule.allOf ?? []) problems.push(...validate(candidate, nested, location));
-    if (rule.if && validate(candidate, rule.if, location).length === 0 && rule.then) problems.push(...validate(candidate, rule.then, location));
+    for (const nested of rule.allOf ?? [])
+        problems.push(...validate(candidate, nested, location));
+    if (rule.if && validate(candidate, rule.if, location).length === 0 && rule.then)
+        problems.push(...validate(candidate, rule.then, location));
     if (rule.oneOf) {
-        const matches = rule.oneOf.filter(option => validate(candidate, option, location).length === 0).length;
+        const matches = rule.oneOf.filter(
+            (option) => validate(candidate, option, location).length === 0,
+        ).length;
         if (matches !== 1) add(`must match exactly one alternative, matched ${matches}`);
     }
     return problems;
@@ -122,7 +164,9 @@ const validManifest = {
 
 const validProblems = validate(validManifest, schema);
 if (validProblems.length > 0) {
-    console.error(`Valid renderer manifest failed schema validation:\n- ${validProblems.join('\n- ')}`);
+    console.error(
+        `Valid renderer manifest failed schema validation:\n- ${validProblems.join('\n- ')}`,
+    );
     process.exit(1);
 }
 
@@ -141,7 +185,9 @@ const invalidManifests = [
 ];
 for (const invalid of invalidManifests) {
     if (validate(invalid, schema).length === 0) {
-        console.error(`Invalid renderer manifest unexpectedly passed: ${JSON.stringify(invalid)}`);
+        console.error(
+            `Invalid renderer manifest unexpectedly passed: ${JSON.stringify(invalid)}`,
+        );
         process.exit(1);
     }
 }
@@ -157,10 +203,14 @@ if (
     Object.keys(packageJson.cratis.modes).length !== 14 ||
     !packageJson.cratis.entry.includes('/renderer/builtin/')
 ) {
-    console.error('Built-in renderer metadata must describe exactly fourteen slots at the opt-in subpath.');
+    console.error(
+        'Built-in renderer metadata must describe exactly fourteen slots at the opt-in subpath.',
+    );
     process.exit(1);
 }
-console.log('Renderer metadata schema accepts the built-in/static fixtures and rejects invalid manifests.');
+console.log(
+    'Renderer metadata schema accepts the built-in/static fixtures and rejects invalid manifests.',
+);
 
 const tsc = path.resolve(packageDir, '../node_modules/typescript/bin/tsc');
 const typeCheck = spawnSync(
@@ -187,7 +237,9 @@ const typeCheck = spawnSync(
     { cwd: packageDir, encoding: 'utf8', timeout: 120_000 },
 );
 if (typeCheck.status !== 0) {
-    console.error(`Renderer slot typing fixture failed:\n${typeCheck.stdout}${typeCheck.stderr}`);
+    console.error(
+        `Renderer slot typing fixture failed:\n${typeCheck.stdout}${typeCheck.stderr}`,
+    );
     process.exit(1);
 }
 console.log('Renderer slot typing fixtures compile under strict TypeScript.');
@@ -262,4 +314,6 @@ if (ssrImport.status !== 0) {
     console.error(`Renderer SSR import failed:\n${ssrImport.stdout}${ssrImport.stderr}`);
     process.exit(1);
 }
-console.log('Renderer subpath imports with document undefined and defers DOM access until invocation.');
+console.log(
+    'Renderer subpath imports with document undefined and defers DOM access until invocation.',
+);
diff --git a/Storybook/for_inventory/when_discovering_renderer_previews.ts b/Storybook/for_inventory/when_discovering_renderer_previews.ts
index c15910ef..ba45d90c 100644
--- a/Storybook/for_inventory/when_discovering_renderer_previews.ts
+++ b/Storybook/for_inventory/when_discovering_renderer_previews.ts
@@ -18,13 +18,15 @@ const repositoryRoot = path.resolve(storybookRoot, '..');
 describe('when discovering renderer previews', () => {
     it('should derive the required inventory from schema-valid workspace package metadata', () => {
         const inventory = discoverAdapterPackages(repositoryRoot);
-        expect(inventory.adapters.map(adapter => adapter.metadata.id)).to.deep.equal([
+        expect(inventory.adapters.map((adapter) => adapter.metadata.id)).to.deep.equal([
             'cratis-built-in',
             'cratis-mui',
             'cratis-primereact10',
             'cratis-primereact',
         ]);
-        expect(inventory.adapters.every(adapter => adapter.metadata.kind === 'ui-adapter')).to.equal(true);
+        expect(
+            inventory.adapters.every((adapter) => adapter.metadata.kind === 'ui-adapter'),
+        ).to.equal(true);
     });
 
     it('should reject invalid adapter metadata using the published schema', () => {
@@ -58,29 +60,45 @@ describe('when discovering renderer previews', () => {
         try {
             mkdirSync(path.join(root, 'Source/schemas'), { recursive: true });
             mkdirSync(path.join(root, 'Adapters/Plain'), { recursive: true });
-            writeFileSync(path.join(root, 'package.json'), JSON.stringify({
-                private: true,
-                workspaces: ['Source', 'Adapters/*'],
-            }));
-            writeFileSync(path.join(root, 'Source/package.json'), JSON.stringify(sourcePackage));
-            writeFileSync(path.join(root, 'Source/schemas/ui-adapter.schema.json'), JSON.stringify(adapterSchema));
-            writeFileSync(path.join(root, 'Adapters/Plain/package.json'), JSON.stringify({
-                name: '@cratis/components.plain',
-                private: true,
-                cratis: {
-                    ...sourcePackage.cratis,
+            writeFileSync(
+                path.join(root, 'package.json'),
+                JSON.stringify({
+                    private: true,
+                    workspaces: ['Source', 'Adapters/*'],
+                }),
+            );
+            writeFileSync(
+                path.join(root, 'Source/package.json'),
+                JSON.stringify(sourcePackage),
+            );
+            writeFileSync(
+                path.join(root, 'Source/schemas/ui-adapter.schema.json'),
+                JSON.stringify(adapterSchema),
+            );
+            writeFileSync(
+                path.join(root, 'Adapters/Plain/package.json'),
+                JSON.stringify({
+                    name: '@cratis/components.plain',
+                    private: true,
+                    cratis: {
+                        ...sourcePackage.cratis,
+                        id: 'cratis-plain',
+                        displayName: 'Private Plain fixture',
+                        category: 'plain',
+                    },
+                }),
+            );
+            const inventory = discoverAdapterPackages(root);
+            expect(
+                inventory.adapters.map((adapter) => adapter.metadata.id),
+            ).to.deep.equal(['cratis-built-in']);
+            expect(inventory.exclusions).to.deep.equal([
+                {
+                    packageName: '@cratis/components.plain',
                     id: 'cratis-plain',
-                    displayName: 'Private Plain fixture',
-                    category: 'plain',
+                    reason: 'private workspace',
                 },
-            }));
-            const inventory = discoverAdapterPackages(root);
-            expect(inventory.adapters.map(adapter => adapter.metadata.id)).to.deep.equal(['cratis-built-in']);
-            expect(inventory.exclusions).to.deep.equal([{
-                packageName: '@cratis/components.plain',
-                id: 'cratis-plain',
-                reason: 'private workspace',
-            }]);
+            ]);
         } finally {
             rmSync(root, { recursive: true, force: true });
         }
diff --git a/Storybook/scripts/lib/schema-validator.mjs b/Storybook/scripts/lib/schema-validator.mjs
index 30d49d97..a5477aa1 100644
--- a/Storybook/scripts/lib/schema-validator.mjs
+++ b/Storybook/scripts/lib/schema-validator.mjs
@@ -1,8 +1,9 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-const isRecord = value => typeof value === 'object' && value !== null && !Array.isArray(value);
-const valueType = value => {
+const isRecord = (value) =>
+    typeof value === 'object' && value !== null && !Array.isArray(value);
+const valueType = (value) => {
     if (Array.isArray(value)) return 'array';
     if (value === null) return 'null';
     if (typeof value === 'number' && Number.isInteger(value)) return 'integer';
@@ -11,8 +12,9 @@ const valueType = value => {
 const sameJson = (left, right) => JSON.stringify(left) === JSON.stringify(right);
 
 export const validateAgainstSchema = (candidate, schema) => {
-    const resolveReference = reference => {
-        if (!reference.startsWith('#/')) throw new Error(`Unsupported schema reference '${reference}'.`);
+    const resolveReference = (reference) => {
+        if (!reference.startsWith('#/'))
+            throw new Error(`Unsupported schema reference '${reference}'.`);
         let current = schema;
         for (const encodedSegment of reference.slice(2).split('/')) {
             const segment = encodedSegment.replaceAll('~1', '/').replaceAll('~0', '~');
@@ -21,53 +23,100 @@ export const validateAgainstSchema = (candidate, schema) => {
             }
             current = current[segment];
         }
-        if (!isRecord(current)) throw new Error(`Schema reference '${reference}' does not resolve to a rule.`);
+        if (!isRecord(current))
+            throw new Error(
+                `Schema reference '${reference}' does not resolve to a rule.`,
+            );
         return current;
     };
 
     const validate = (value, rule, location = '$') => {
         if (rule.$ref) return validate(value, resolveReference(rule.$ref), location);
         const problems = [];
-        const add = message => problems.push(`${location}: ${message}`);
+        const add = (message) => problems.push(`${location}: ${message}`);
         if (rule.type && valueType(value) !== rule.type) {
             add(`expected ${rule.type}, got ${valueType(value)}`);
             return problems;
         }
-        if (Object.hasOwn(rule, 'const') && !sameJson(value, rule.const)) add(`expected ${JSON.stringify(rule.const)}`);
-        if (rule.enum && !rule.enum.some(candidateValue => sameJson(candidateValue, value))) add('value is outside the declared enum');
+        if (Object.hasOwn(rule, 'const') && !sameJson(value, rule.const))
+            add(`expected ${JSON.stringify(rule.const)}`);
+        if (
+            rule.enum &&
+            !rule.enum.some((candidateValue) => sameJson(candidateValue, value))
+        )
+            add('value is outside the declared enum');
         if (typeof value === 'string') {
-            if (rule.minLength !== undefined && value.length < rule.minLength) add(`must have at least ${rule.minLength} characters`);
-            if (rule.maxLength !== undefined && value.length > rule.maxLength) add(`must have no more than ${rule.maxLength} characters`);
-            if (rule.pattern && !new RegExp(rule.pattern, 'u').test(value)) add(`does not match ${rule.pattern}`);
+            if (rule.minLength !== undefined && value.length < rule.minLength)
+                add(`must have at least ${rule.minLength} characters`);
+            if (rule.maxLength !== undefined && value.length > rule.maxLength)
+                add(`must have no more than ${rule.maxLength} characters`);
+            if (rule.pattern && !new RegExp(rule.pattern, 'u').test(value))
+                add(`does not match ${rule.pattern}`);
         }
         if (Array.isArray(value)) {
-            if (rule.minItems !== undefined && value.length < rule.minItems) add(`must contain at least ${rule.minItems} items`);
-            if (rule.maxItems !== undefined && value.length > rule.maxItems) add(`must contain no more than ${rule.maxItems} items`);
-            if (rule.uniqueItems && new Set(value.map(item => JSON.stringify(item))).size !== value.length) add('items must be unique');
-            if (rule.items) value.forEach((item, index) => problems.push(...validate(item, rule.items, `${location}[${index}]`)));
+            if (rule.minItems !== undefined && value.length < rule.minItems)
+                add(`must contain at least ${rule.minItems} items`);
+            if (rule.maxItems !== undefined && value.length > rule.maxItems)
+                add(`must contain no more than ${rule.maxItems} items`);
+            if (
+                rule.uniqueItems &&
+                new Set(value.map((item) => JSON.stringify(item))).size !== value.length
+            )
+                add('items must be unique');
+            if (rule.items)
+                value.forEach((item, index) =>
+                    problems.push(...validate(item, rule.items, `${location}[${index}]`)),
+                );
         }
         if (isRecord(value)) {
             const keys = Object.keys(value);
-            if (rule.minProperties !== undefined && keys.length < rule.minProperties) add(`must contain at least ${rule.minProperties} properties`);
-            if (rule.maxProperties !== undefined && keys.length > rule.maxProperties) add(`must contain no more than ${rule.maxProperties} properties`);
+            if (rule.minProperties !== undefined && keys.length < rule.minProperties)
+                add(`must contain at least ${rule.minProperties} properties`);
+            if (rule.maxProperties !== undefined && keys.length > rule.maxProperties)
+                add(`must contain no more than ${rule.maxProperties} properties`);
             for (const required of rule.required ?? []) {
-                if (!Object.hasOwn(value, required)) add(`missing required property '${required}'`);
+                if (!Object.hasOwn(value, required))
+                    add(`missing required property '${required}'`);
             }
             for (const key of keys) {
-                if (rule.propertyNames) problems.push(...validate(key, rule.propertyNames, `${location}.${key} (property name)`));
-                const propertyRule = rule.properties && Object.hasOwn(rule.properties, key)
-                    ? rule.properties[key]
-                    : undefined;
-                if (propertyRule) problems.push(...validate(value[key], propertyRule, `${location}.${key}`));
-                else if (rule.additionalProperties === false) add(`unknown property '${key}'`);
-                else if (isRecord(rule.additionalProperties)) problems.push(...validate(value[key], rule.additionalProperties, `${location}.${key}`));
+                if (rule.propertyNames)
+                    problems.push(
+                        ...validate(
+                            key,
+                            rule.propertyNames,
+                            `${location}.${key} (property name)`,
+                        ),
+                    );
+                const propertyRule =
+                    rule.properties && Object.hasOwn(rule.properties, key)
+                        ? rule.properties[key]
+                        : undefined;
+                if (propertyRule)
+                    problems.push(
+                        ...validate(value[key], propertyRule, `${location}.${key}`),
+                    );
+                else if (rule.additionalProperties === false)
+                    add(`unknown property '${key}'`);
+                else if (isRecord(rule.additionalProperties))
+                    problems.push(
+                        ...validate(
+                            value[key],
+                            rule.additionalProperties,
+                            `${location}.${key}`,
+                        ),
+                    );
             }
         }
-        for (const nested of rule.allOf ?? []) problems.push(...validate(value, nested, location));
-        if (rule.if && validate(value, rule.if, location).length === 0 && rule.then) problems.push(...validate(value, rule.then, location));
+        for (const nested of rule.allOf ?? [])
+            problems.push(...validate(value, nested, location));
+        if (rule.if && validate(value, rule.if, location).length === 0 && rule.then)
+            problems.push(...validate(value, rule.then, location));
         if (rule.oneOf) {
-            const matches = rule.oneOf.filter(option => validate(value, option, location).length === 0).length;
-            if (matches !== 1) add(`must match exactly one alternative, matched ${matches}`);
+            const matches = rule.oneOf.filter(
+                (option) => validate(value, option, location).length === 0,
+            ).length;
+            if (matches !== 1)
+                add(`must match exactly one alternative, matched ${matches}`);
         }
         return problems;
     };